complete API / JSDocs, remove label styles

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aotearoan/neon",
   "description": "Neon is a design library of components for use with VueJS. It supports light and dark modes and can be extended to support multiple themes",
-  "version": "0.26.4",
+  "version": "0.27.0",
   "main": "dist/@aotearoan/neon.umd.js",
   "types": "dist/@aotearoan/components.d.ts",
   "files": [

public/docs/layout/card/NeonCard.json

@@ -1,12 +1,13 @@
 {
+  "description": "Card component used for the layout of content within a grid or page.",
+  "tags": {},
   "displayName": "NeonCard",
   "exportName": "default",
-  "description": "",
-  "tags": {},
   "props": [
     {
       "name": "orientation",
       "tags": {},
+      "description": "Change the orientation of a card to horizontal. This is useful for creating long narrow cards spanning the full page. NOTE: For responsiveness, horizontal cards are automatically transformed to vertical cards at lower screen sizes.",
       "type": {
         "name": "NeonOrientation"
       },
@@ -18,6 +19,7 @@
     {
       "name": "horizontalBreakpoint",
       "tags": {},
+      "description": "The breakpoint to switch horizontal cards to vertical cards.",
       "type": {
         "name": "NeonResponsive"
       },
@@ -29,7 +31,8 @@
   ],
   "slots": [
     {
-      "name": "default"
+      "name": "default",
+      "description": "card contents"
     }
   ]
 }

public/docs/layout/card/body/NeonCardBody.json

@@ -1,12 +1,13 @@
 {
+  "description": "A \"body\" card section. Cards can contain multiple card body sections.",
+  "tags": {},
   "displayName": "NeonCardBody",
   "exportName": "default",
-  "description": "",
-  "tags": {},
   "props": [
     {
       "name": "fullWidth",
       "tags": {},
+      "description": "If true, this will remove all padding from the card body. This is useful for presenting images and also tabs as well as other content.",
       "type": {
         "name": "boolean"
       },
@@ -18,7 +19,8 @@
   ],
   "slots": [
     {
-      "name": "default"
+      "name": "default",
+      "description": "card body content"
     }
   ]
 }

public/docs/layout/card/footer/NeonCardFooter.json

@@ -1,11 +1,12 @@
 {
+  "description": "The card footer. This is the (optional) final section of a card, it is primarily used for adding actions to a card, e.g. buttons and actions.",
+  "tags": {},
   "displayName": "NeonCardFooter",
   "exportName": "default",
-  "description": "",
-  "tags": {},
   "slots": [
     {
-      "name": "default"
+      "name": "default",
+      "description": "card footer content"
     }
   ]
 }

public/docs/layout/card/header/NeonCardHeader.json

@@ -1,11 +1,12 @@
 {
+  "description": "A card header section, used to contain titles and secondary actions (e.g. favorite button). This is normally the first section in a card but may also be placed below other sections, e.g. a full width section containing an image.",
+  "tags": {},
   "displayName": "NeonCardHeader",
   "exportName": "default",
-  "description": "",
-  "tags": {},
   "slots": [
     {
-      "name": "default"
+      "name": "default",
+      "description": "card header content"
     }
   ]
 }

public/docs/layout/drawer/NeonDrawer.json

@@ -1,19 +1,25 @@
 {
+  "description": "A drawer is a slide out panel for representing data which may be secondary or not fit on the main screen. Examples are a responsive navigation menu, more details of a selected item on the page. Drawers can be opened from top, bottom, left or right and an overlay covers the screen to focus more attention on the drawer contents.",
+  "tags": {},
   "displayName": "NeonDrawer",
   "exportName": "default",
-  "description": "",
-  "tags": {},
   "props": [
     {
       "name": "fullWidth",
       "tags": {},
+      "description": "If true, remove the padding applied to the drawer.",
       "type": {
         "name": "boolean"
+      },
+      "defaultValue": {
+        "func": false,
+        "value": "false"
       }
     },
     {
       "name": "open",
       "tags": {},
+      "description": "Set the drawer to visible.",
       "type": {
         "name": "boolean"
       },
@@ -22,6 +28,7 @@
     {
       "name": "position",
       "tags": {},
+      "description": "The location of the drawer.",
       "type": {
         "name": "NeonPosition"
       },
@@ -33,6 +40,7 @@
     {
       "name": "overlay",
       "tags": {},
+      "description": "Display a semi-transparent overlay under the drawer, but over the rest of the page.",
       "type": {
         "name": "boolean"
       },
@@ -45,7 +53,7 @@
   "events": [
     {
       "name": "close",
-      "description": "close event is emitted when the element is closed.",
+      "description": "Emitted when the drawer is closed.",
       "type": {
         "names": [
           "void"
@@ -55,7 +63,8 @@
   ],
   "slots": [
     {
-      "name": "default"
+      "name": "default",
+      "description": "drawer contents"
     }
   ]
 }

public/docs/layout/footer/NeonFooter.json

@@ -1,11 +1,12 @@
 {
+  "description": "The page footer component. Place directly inside the NeonPage component to have it rendered at the bottom of the page even when the content is shorter than the page.",
+  "tags": {},
   "displayName": "NeonFooter",
   "exportName": "default",
-  "description": "",
-  "tags": {},
   "slots": [
     {
-      "name": "default"
+      "name": "default",
+      "description": "footer contents"
     }
   ]
 }

public/docs/layout/grid/NeonGrid.json

@@ -1,8 +1,8 @@
 {
+  "description": "A CSS grid component for top level layout within a page. This component provides functionality to dynamically generate the grid CSS and inject it into the page as well as defining the grid for different responsive breakpoints. The defined grid can be updated programmatically which is useful for adding/removing items from the grid.\n\nNeonGrid provides a slot for a set of NeonGridArea components, defining the contents for the various grid areas on the page.",
+  "tags": {},
   "displayName": "NeonGrid",
   "exportName": "default",
-  "description": "",
-  "tags": {},
   "props": [
     {
       "name": "layouts",
@@ -15,12 +15,13 @@
             "name": "NeonGridModel"
           }
         ]
-      }
+      },
+      "required": true
     },
     {
       "name": "id",
       "tags": {},
-      "description": "id of the grid, should be unique on the page",
+      "description": "Id of the grid, should be unique on the page",
       "type": {
         "name": "string"
       },
@@ -29,7 +30,8 @@
   ],
   "slots": [
     {
-      "name": "default"
+      "name": "default",
+      "description": "contents of the grid, namely neon-grid-area components"
     }
   ]
 }

public/docs/layout/grid/grid-area/NeonGridArea.json

@@ -1,13 +1,13 @@
 {
+  "description": "A grid area is the basic container corresponding to a grid area defined in the NeonGrid component.",
+  "tags": {},
   "displayName": "NeonGridArea",
   "exportName": "default",
-  "description": "",
-  "tags": {},
   "props": [
     {
       "name": "id",
       "tags": {},
-      "description": "identifier of the grid area (this should match a named area in the grid layout)",
+      "description": "Identifier of the grid area (this should match a named area in the grid layout)",
       "type": {
         "name": "string"
       },

public/docs/layout/modal/NeonModal.json

@@ -1,12 +1,13 @@
 {
+  "description": "A modal dialog component. This will be rendered above the content of the main window and can either be dismissed by the user or configured to require user interaction before dismissal.",
+  "tags": {},
   "displayName": "NeonModal",
   "exportName": "default",
-  "description": "",
-  "tags": {},
   "props": [
     {
       "name": "open",
       "tags": {},
+      "description": "Whether or not the modal is currently open.",
       "type": {
         "name": "boolean"
       },
@@ -15,6 +16,7 @@
     {
       "name": "dismissable",
       "tags": {},
+      "description": "Whether or not the user is allowed to dismiss the modal by clicking outside of the modal or pressing escape.",
       "type": {
         "name": "boolean"
       },
@@ -27,7 +29,7 @@
   "events": [
     {
       "name": "close",
-      "description": "close event is emitted when the element is closed.",
+      "description": "Emitted when the modal is closed.",
       "type": {
         "names": [
           "void"
@@ -37,7 +39,8 @@
   ],
   "slots": [
     {
-      "name": "default"
+      "name": "default",
+      "description": "modal contents"
     }
   ]
 }

public/docs/layout/page/NeonPage.json

@@ -1,14 +1,15 @@
 {
+  "description": "A \"page\" component, this is defined as a wrapper around the contents (NeonGrid, etc) and footer which provides the correct responsive layout accounting for NeonTopNav and NeonSideNav components being used.",
+  "tags": {},
   "displayName": "NeonPage",
   "exportName": "default",
-  "description": "",
-  "tags": {},
   "slots": [
     {
       "name": "top-nav"
     },
     {
-      "name": "content"
+      "name": "content",
+      "description": "the page contents"
     }
   ]
 }

public/docs/layout/side-nav/NeonSideNav.json

@@ -1,23 +1,30 @@
 {
+  "description": "A side navigation component. This is displayed at the <em>larger-than-tablet</em> breakpoint and hidden at <em>tablet</em> and below. Use this to display menus, navigation or other items related to the main page content. A side nave had two slots, one for <em>sticky</em> content which remains visible at all times. The other is for <em>scrolling content</em> which is allowed to overflow below the bottom of the page.",
+  "tags": {},
   "displayName": "NeonSideNav",
   "exportName": "default",
-  "description": "",
-  "tags": {},
   "props": [
     {
       "name": "fullWidth",
       "tags": {},
+      "description": "If true, removes the side nav component's padding.",
       "type": {
         "name": "boolean"
+      },
+      "defaultValue": {
+        "func": false,
+        "value": "false"
       }
     }
   ],
   "slots": [
     {
-      "name": "sticky"
+      "name": "sticky",
+      "description": "sticky (fixed, non-scrolling) content"
     },
     {
-      "name": "scrolling"
+      "name": "scrolling",
+      "description": "scrolling content"
     }
   ]
 }

public/docs/layout/top-nav/NeonTopNav.json

@@ -1,11 +1,12 @@
 {
+  "description": "Top navigation component. This is a fixed container at the top of the page for displaying the site logo, menus, user login and other important actions which need to be visible at all times.",
+  "tags": {},
   "displayName": "NeonTopNav",
   "exportName": "default",
-  "description": "",
-  "tags": {},
   "slots": [
     {
-      "name": "default"
+      "name": "default",
+      "description": "top navigation contents"
     }
   ]
 }

public/docs/navigation/action-menu/NeonActionMenu.json

@@ -1,12 +1,13 @@
 {
+  "description": "An action menu is designed for the NeonSideNav component and is designed to behave like tabs where selecting a different item switches the contents in the main page.",
+  "tags": {},
   "exportName": "default",
   "displayName": "NeonActionMenu",
-  "description": "",
-  "tags": {},
   "props": [
     {
       "name": "model",
       "tags": {},
+      "description": "The list of action items to display in the menu.",
       "type": {
         "name": "Array",
         "elements": [
@@ -20,6 +21,7 @@
     {
       "name": "value",
       "tags": {},
+      "description": "The key of the selected model action item.",
       "type": {
         "name": "string"
       },
@@ -29,9 +31,10 @@
   "events": [
     {
       "name": "input",
+      "description": "emitted when the user clicks on a new action menu item.",
       "type": {
         "names": [
-          "undefined"
+          "string"
         ]
       }
     }