@nanoporetech-digital/components 1.15.6 → 2.1.0

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2022-01-18T09:41:32",
+  "timestamp": "2022-03-02T21:32:06",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.12.2",
@@ -2366,6 +2366,357 @@
       "dependencies": [],
       "dependencyGraph": {}
     },
+    {
+      "filePath": "./src/components/datalist/datalist.tsx",
+      "encapsulation": "shadow",
+      "tag": "nano-datalist",
+      "readme": "# nano-datalist\n\n\n",
+      "docs": "`nano-datalist` a visually consistent and more flexible replacement for a native\n[datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist). Can be nested within a `nano-input`\nor linked to any input control via the `input` prop. Is used internally within `nano-select`.\nOptions can be defined declaratively by nesting `<nano-option>` elements or imperatively using the `options` prop",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "- use `<nano-option>` elements for more complex html. Alternatively use the `options` prop"
+        },
+        {
+          "name": "slot",
+          "text": "list-top - shows at the top of the list when there are options present"
+        },
+        {
+          "name": "slot",
+          "text": "list-bottom - shows at the bottom of the list when there are options present"
+        },
+        {
+          "name": "slot",
+          "text": "no-result - shown when there are no results otherwise nothing will be shown"
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "activeOptions",
+          "type": "HTMLNanoOptionElement[]",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "return all the active options currently within the datalist. Can be useful for validation",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "HTMLNanoOptionElement[]"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": true,
+          "setter": false
+        },
+        {
+          "name": "disableFilter",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "disable-filter",
+          "reflectToAttr": false,
+          "docs": "Use this option to disable to default filtering. This is useful if filtering happens\nexternally via another method (e.g. via ajax)",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "disabled",
+          "reflectToAttr": false,
+          "docs": "Activate / deactivate the datalist control",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "dropDownConfig",
+          "type": "{ host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: \"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"right\" | \"right-start\" | \"right-end\" | \"left\" | \"left-start\" | \"left-end\"; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; }",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "nano-dropdown config options you can pass to the nested dropdown component",
+          "docsTags": [],
+          "default": "{\n    skidding: -1,\n  }",
+          "values": [
+            {
+              "type": "{ host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: \"top\""
+            },
+            {
+              "value": "top-start",
+              "type": "string"
+            },
+            {
+              "value": "top-end",
+              "type": "string"
+            },
+            {
+              "value": "bottom",
+              "type": "string"
+            },
+            {
+              "value": "bottom-start",
+              "type": "string"
+            },
+            {
+              "value": "bottom-end",
+              "type": "string"
+            },
+            {
+              "value": "right",
+              "type": "string"
+            },
+            {
+              "value": "right-start",
+              "type": "string"
+            },
+            {
+              "value": "right-end",
+              "type": "string"
+            },
+            {
+              "value": "left",
+              "type": "string"
+            },
+            {
+              "value": "left-start",
+              "type": "string"
+            },
+            {
+              "type": "\"left-end\"; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; }"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": true,
+          "setter": true
+        },
+        {
+          "name": "input",
+          "type": "HTMLInputElement | string",
+          "mutable": false,
+          "attr": "input",
+          "reflectToAttr": false,
+          "docs": "A selector to a HTMLInputElement",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "HTMLInputElement"
+            },
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "mutable": true,
+          "attr": "open",
+          "reflectToAttr": false,
+          "docs": "Force datalist open",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "options",
+          "type": "OptionInterface[]",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "Provide an option list.\nOptions can be defined declaratively by nesting `<nano-option>` elements or imperatively using this prop",
+          "docsTags": [],
+          "default": "[]",
+          "values": [
+            {
+              "type": "OptionInterface[]"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "selected",
+          "type": "string[]",
+          "mutable": true,
+          "reflectToAttr": false,
+          "docs": "By default, items in the list will appear 'selected' when the value in the linked input control matches.\nHowever you can add other selected options via the the selected prop.",
+          "docsTags": [],
+          "default": "[]",
+          "values": [
+            {
+              "type": "string[]"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "type",
+          "type": "\"input\" | \"selctMulti\" | \"select\"",
+          "mutable": false,
+          "attr": "type",
+          "reflectToAttr": false,
+          "docs": "Tweaks the datalist behaviour and linked control semantics and behaviour.\ne.g. 'select' will make the linked input control readonly.",
+          "docsTags": [],
+          "default": "'input'",
+          "values": [
+            {
+              "value": "input",
+              "type": "string"
+            },
+            {
+              "value": "selctMulti",
+              "type": "string"
+            },
+            {
+              "value": "select",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [
+        {
+          "event": "nanoDeselect",
+          "detail": "HTMLNanoOptionElement",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fired when a currently selected item is reselected.",
+          "docsTags": []
+        },
+        {
+          "event": "nanoOptionsUpdated",
+          "detail": "HTMLNanoOptionElement[]",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fired when active options change",
+          "docsTags": []
+        },
+        {
+          "event": "nanoSelect",
+          "detail": "HTMLNanoOptionElement",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fired when an item is selected.",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [
+        {
+          "name": "--color",
+          "annotation": "prop",
+          "docs": "default text color of content other than `nano-option`. Defaults to $color-palegrey;"
+        },
+        {
+          "name": "--font-size",
+          "annotation": "prop",
+          "docs": "for all nested `nano-option` elements. Defaults to .8em;"
+        },
+        {
+          "name": "--padding-bottom",
+          "annotation": "prop",
+          "docs": "for all nested `nano-option` elements. Defaults to var(--nano-spacing-small, 8px);"
+        },
+        {
+          "name": "--padding-end",
+          "annotation": "prop",
+          "docs": "for all nested `nano-option` elements. Defaults to var(--nano-spacing-xlarge, 24px);"
+        },
+        {
+          "name": "--padding-start",
+          "annotation": "prop",
+          "docs": "for all nested `nano-option` elements. Defaults to var(--nano-spacing-xlarge, 24px);"
+        },
+        {
+          "name": "--padding-top",
+          "annotation": "prop",
+          "docs": "for all nested `nano-option` elements. Defaults to var(--nano-spacing-small, 8px);"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "docs": "use `<nano-option>` elements for more complex html. Alternatively use the `options` prop"
+        },
+        {
+          "name": "list-bottom",
+          "docs": "shows at the bottom of the list when there are options present"
+        },
+        {
+          "name": "list-top",
+          "docs": "shows at the top of the list when there are options present"
+        },
+        {
+          "name": "no-result",
+          "docs": "shown when there are no results otherwise nothing will be shown"
+        }
+      ],
+      "parts": [],
+      "dependents": [
+        "nano-select"
+      ],
+      "dependencies": [
+        "nano-option",
+        "nano-dropdown",
+        "nano-menu"
+      ],
+      "dependencyGraph": {
+        "nano-datalist": [
+          "nano-option",
+          "nano-dropdown",
+          "nano-menu"
+        ],
+        "nano-option": [
+          "nano-icon"
+        ],
+        "nano-select": [
+          "nano-datalist"
+        ]
+      }
+    },
     {
       "filePath": "./src/components/date-input/date-input.tsx",
       "encapsulation": "scoped",
@@ -2380,6 +2731,14 @@
         {
           "name": "slot",
           "text": "helper - helper text to accompany the form field underneath."
+        },
+        {
+          "name": "slot",
+          "text": "start - input start slot"
+        },
+        {
+          "name": "slot",
+          "text": "end - input end slot"
         }
       ],
       "usage": {},
@@ -3087,6 +3446,10 @@
         }
       ],
       "slots": [
+        {
+          "name": "end",
+          "docs": "input end slot"
+        },
         {
           "name": "helper",
           "docs": "helper text to accompany the form field underneath."
@@ -3094,6 +3457,10 @@
         {
           "name": "label",
           "docs": "if you do not set a label attribute, you can use this slot for more complex markup"
+        },
+        {
+          "name": "start",
+          "docs": "input start slot"
         }
       ],
       "parts": [],
@@ -4393,7 +4760,7 @@
       "encapsulation": "shadow",
       "tag": "nano-dropdown",
       "readme": "# nano-dropdown\n\n\n",
-      "docs": "Dropdowns show additional content in a panel.\nDesigned to work well with nano-menu components to provide a list of options (works well with nano-nav-items).",
+      "docs": "Dropdowns show additional content in a panel.\nDesigned to work well with nano-menu components to provide a list of options (`nano-nav-items` / `nano-option`).",
       "docsTags": [
         {
           "name": "slot",
@@ -4701,11 +5068,6 @@
         }
       ],
       "listeners": [
-        {
-          "event": "nanoFocus",
-          "capture": false,
-          "passive": false
-        },
         {
           "event": "nanoOpen",
           "capture": false,
@@ -4738,6 +5100,26 @@
           "annotation": "prop",
           "docs": "Defaults to var(--nano-layer-bg, #fff);"
         },
+        {
+          "name": "--box-shadow",
+          "annotation": "prop",
+          "docs": "var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));"
+        },
+        {
+          "name": "--dropdown-z-index",
+          "annotation": "prop",
+          "docs": "Defaults to var(--nano-layer-index-dropdown, 300);"
+        },
+        {
+          "name": "--min-width",
+          "annotation": "prop",
+          "docs": "Defaults to 0;"
+        },
+        {
+          "name": "--overflow",
+          "annotation": "prop",
+          "docs": "`nano-menu` with nested `nav-item` requires hidden overflow. This can be overidden;"
+        },
         {
           "name": "--padding",
           "annotation": "prop",
@@ -4774,10 +5156,14 @@
         }
       ],
       "dependents": [
+        "nano-datalist",
         "nano-date-input"
       ],
       "dependencies": [],
       "dependencyGraph": {
+        "nano-datalist": [
+          "nano-dropdown"
+        ],
         "nano-date-input": [
           "nano-dropdown"
         ]
@@ -5908,6 +6294,7 @@
       "dependents": [],
       "dependencies": [
         "nano-select",
+        "nano-option",
         "nano-icon",
         "nano-input",
         "nano-nav-item",
@@ -5916,12 +6303,23 @@
       "dependencyGraph": {
         "nano-global-nav": [
           "nano-select",
+          "nano-option",
           "nano-icon",
           "nano-input",
           "nano-nav-item",
           "nano-sticker"
         ],
         "nano-select": [
+          "nano-icon",
+          "nano-datalist",
+          "nano-option"
+        ],
+        "nano-datalist": [
+          "nano-option",
+          "nano-dropdown",
+          "nano-menu"
+        ],
+        "nano-option": [
           "nano-icon"
         ],
         "nano-input": [
@@ -6220,7 +6618,17 @@
         }
       ],
       "methods": [],
-      "events": [],
+      "events": [
+        {
+          "event": "nanoBpChange",
+          "detail": "string[]",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the `nano-grid` changes breakpoint",
+          "docsTags": []
+        }
+      ],
       "listeners": [],
       "styles": [
         {
@@ -6464,6 +6872,11 @@
           "annotation": "prop",
           "docs": "Tint colour of nano-skeleton. Default depends on theme;"
         },
+        {
+          "name": "--quote-size",
+          "annotation": "prop",
+          "docs": "Font size of the quote. Defaults to 1.3em and grows to 3rem on the xl breakpoint;"
+        },
         {
           "name": "--scrim-color",
           "annotation": "prop",
@@ -6798,6 +7211,7 @@
         "nano-icon-button",
         "nano-input",
         "nano-menu-drawer",
+        "nano-option",
         "nano-select",
         "nano-tab-group"
       ],
@@ -6824,6 +7238,9 @@
         "nano-menu-drawer": [
           "nano-icon"
         ],
+        "nano-option": [
+          "nano-icon"
+        ],
         "nano-select": [
           "nano-icon"
         ],
@@ -7043,14 +7460,25 @@
           "name": "--hover-color",
           "annotation": "prop",
           "docs": "defaults to #007495;"
+        },
+        {
+          "name": "--padding",
+          "annotation": "prop",
+          "docs": "defaults to var(--nano-spacing-small, 8px);"
         }
       ],
       "slots": [],
-      "parts": [],
+      "parts": [
+        {
+          "name": "base",
+          "docs": ""
+        }
+      ],
       "dependents": [
         "nano-alert",
         "nano-dialog",
-        "nano-file-upload"
+        "nano-file-upload",
+        "nano-tab"
       ],
       "dependencies": [
         "nano-icon"
@@ -7067,6 +7495,9 @@
         ],
         "nano-file-upload": [
           "nano-icon-button"
+        ],
+        "nano-tab": [
+          "nano-icon-button"
         ]
       }
     },
@@ -7271,7 +7702,19 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "inline-button - suitable for inline action buttons or icons that may add extra contextual information"
+          "text": "start - suitable for inline action buttons or icons that may add extra contextual information"
+        },
+        {
+          "name": "slot",
+          "text": "end - suitable for inline action buttons or icons that may add extra contextual information"
+        },
+        {
+          "name": "slot",
+          "text": "value-start - similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist"
+        },
+        {
+          "name": "slot",
+          "text": "value-end - similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist"
         },
         {
           "name": "slot",
@@ -7283,7 +7726,7 @@
         },
         {
           "name": "slot",
-          "text": "legacy - you can use this slot to wrap any old inputs / labels. This will set appropriate defaults for the nano-input"
+          "text": "- can be used with a `nano-datalist`. See the `nano-datalist` docs for more information"
         }
       ],
       "usage": {},
@@ -7821,7 +8264,7 @@
           "type": "boolean",
           "mutable": false,
           "attr": "readonly",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "If `true`, the user cannot modify the value.",
           "docsTags": [],
           "default": "false",
@@ -8183,7 +8626,7 @@
         },
         {
           "event": "nanoInput",
-          "detail": "KeyboardEvent",
+          "detail": "InputEvent",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
@@ -8211,6 +8654,17 @@
           "target": "body",
           "capture": false,
           "passive": false
+        },
+        {
+          "event": "mousedown",
+          "target": "body",
+          "capture": false,
+          "passive": true
+        },
+        {
+          "event": "keydown",
+          "capture": false,
+          "passive": false
         }
       ],
       "styles": [
@@ -8382,20 +8836,32 @@
       ],
       "slots": [
         {
-          "name": "helper",
-          "docs": "helper text to accompany the form field underneath."
+          "name": "",
+          "docs": "can be used with a `nano-datalist`. See the `nano-datalist` docs for more information"
         },
         {
-          "name": "inline-button",
+          "name": "end",
           "docs": "suitable for inline action buttons or icons that may add extra contextual information"
         },
+        {
+          "name": "helper",
+          "docs": "helper text to accompany the form field underneath."
+        },
         {
           "name": "label",
           "docs": "if you do not set a label attribute, you can use this slot for more complex markup"
         },
         {
-          "name": "legacy",
-          "docs": "you can use this slot to wrap any old inputs / labels. This will set appropriate defaults for the nano-input"
+          "name": "start",
+          "docs": "suitable for inline action buttons or icons that may add extra contextual information"
+        },
+        {
+          "name": "value-end",
+          "docs": "similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist"
+        },
+        {
+          "name": "value-start",
+          "docs": "similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist"
         }
       ],
       "parts": [],
@@ -8420,28 +8886,101 @@
     },
     {
       "filePath": "./src/components/menu/menu.tsx",
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "tag": "nano-menu",
       "readme": "# nano-menu\n\n\n",
-      "docs": "",
+      "docs": "Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.\nManages focus state / active.",
       "docsTags": [
         {
           "name": "slot",
-          "text": "- The menu's content, including menu items, menu dividers, and menu labels."
+          "text": "- The menu's content; `nano-option`, `nano-nav-item` elements as well as <hr> and more."
         }
       ],
       "usage": {},
-      "props": [],
+      "props": [
+        {
+          "name": "hasFocus",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "has-focus",
+          "reflectToAttr": false,
+          "docs": "get the focus state of the menu @readonly",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": true,
+          "setter": false
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "mutable": false,
+          "attr": "label",
+          "reflectToAttr": false,
+          "docs": "an accessible label",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "type",
+          "type": "\"listbox\" | \"menu\"",
+          "mutable": false,
+          "attr": "type",
+          "reflectToAttr": false,
+          "docs": "changes the role of the underlying control - sometimes required for semantics",
+          "docsTags": [],
+          "default": "'menu'",
+          "values": [
+            {
+              "value": "listbox",
+              "type": "string"
+            },
+            {
+              "value": "menu",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
       "methods": [
         {
-          "name": "removeFocus",
+          "name": "removeFocus",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "removeFocus() => Promise<void>",
+          "parameters": [],
+          "docs": "Removes focus from the menu.",
+          "docsTags": []
+        },
+        {
+          "name": "resetActiveItem",
           "returns": {
             "type": "Promise<void>",
             "docs": ""
           },
-          "signature": "removeFocus() => Promise<void>",
+          "signature": "resetActiveItem() => Promise<void>",
           "parameters": [],
-          "docs": "Removes focus from the menu.",
+          "docs": "Removes any active item's state",
           "docsTags": []
         },
         {
@@ -8454,6 +8993,17 @@
           "parameters": [],
           "docs": "Sets focus on the menu.",
           "docsTags": []
+        },
+        {
+          "name": "showActiveElement",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "showActiveElement() => Promise<void>",
+          "parameters": [],
+          "docs": "Sets the current active item",
+          "docsTags": []
         }
       ],
       "events": [
@@ -8477,7 +9027,7 @@
         },
         {
           "event": "nanoSelect",
-          "detail": "any",
+          "detail": "HTMLNanoNavItemElement | HTMLNanoOptionElement",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
@@ -8485,23 +9035,60 @@
           "docsTags": []
         }
       ],
-      "listeners": [],
+      "listeners": [
+        {
+          "event": "mousedown",
+          "target": "body",
+          "capture": false,
+          "passive": true
+        },
+        {
+          "event": "keydown",
+          "capture": false,
+          "passive": false
+        }
+      ],
       "styles": [
         {
           "name": "--bg-color-focus",
           "annotation": "prop",
           "docs": "bg focus color of nav-items. Defaults to #f2f7f9;"
         },
+        {
+          "name": "--bg-color-hover",
+          "annotation": "prop",
+          "docs": "bg hover color of nav-items. Defaults to #f2f7f9;"
+        },
+        {
+          "name": "--bg-color-selected",
+          "annotation": "prop",
+          "docs": "bg selected color of nav-items. Defaults to #f2f7f9;"
+        },
         {
           "name": "--color-focus",
           "annotation": "prop",
           "docs": "text focus color of nav-items. Defaults to #007495"
         },
+        {
+          "name": "--color-hover",
+          "annotation": "prop",
+          "docs": "text hover color of nav-items. Defaults to #007495"
+        },
+        {
+          "name": "--color-selected",
+          "annotation": "prop",
+          "docs": "text selected color of nav-items. Defaults to #007495"
+        },
         {
           "name": "--focus-outline",
           "annotation": "prop",
           "docs": "the focus style of nav-items. Defaults to 'none'"
         },
+        {
+          "name": "--font-size",
+          "annotation": "prop",
+          "docs": "default font-size for all items. Defaults .9em;"
+        },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
@@ -8536,7 +9123,7 @@
       "slots": [
         {
           "name": "",
-          "docs": "The menu's content, including menu items, menu dividers, and menu labels."
+          "docs": "The menu's content; `nano-option`, `nano-nav-item` elements as well as <hr> and more."
         }
       ],
       "parts": [
@@ -8545,9 +9132,15 @@
           "docs": ""
         }
       ],
-      "dependents": [],
+      "dependents": [
+        "nano-datalist"
+      ],
       "dependencies": [],
-      "dependencyGraph": {}
+      "dependencyGraph": {
+        "nano-datalist": [
+          "nano-menu"
+        ]
+      }
     },
     {
       "filePath": "./src/components/menu-drawer/menu-drawer.tsx",
@@ -8838,19 +9431,224 @@
           "default": "'_self'",
           "values": [
             {
-              "value": "_blank",
-              "type": "string"
-            },
-            {
-              "value": "_parent",
-              "type": "string"
-            },
-            {
-              "value": "_self",
-              "type": "string"
-            },
-            {
-              "value": "_top",
+              "value": "_blank",
+              "type": "string"
+            },
+            {
+              "value": "_parent",
+              "type": "string"
+            },
+            {
+              "value": "_self",
+              "type": "string"
+            },
+            {
+              "value": "_top",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "setFocus",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "setFocus() => Promise<void>",
+          "parameters": [],
+          "docs": "Sets focus on the first button or anchor present. Use this method instead of the global\n`element.focus()`.",
+          "docsTags": []
+        }
+      ],
+      "events": [
+        {
+          "event": "nanoBlur",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the nav item loses focus.",
+          "docsTags": []
+        },
+        {
+          "event": "nanoClose",
+          "detail": "NavItemEventDetail",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the nav item closes it's secondary navigation.",
+          "docsTags": []
+        },
+        {
+          "event": "nanoClosing",
+          "detail": "NavItemEventDetail",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the nav item is about to close it's secondary navigation.",
+          "docsTags": []
+        },
+        {
+          "event": "nanoFocus",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the nav item has focus.",
+          "docsTags": []
+        },
+        {
+          "event": "nanoOpen",
+          "detail": "NavItemEventDetail",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the nav item opens it's secondary navigation.",
+          "docsTags": []
+        },
+        {
+          "event": "nanoOpening",
+          "detail": "NavItemEventDetail",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the nav item is about to open it's secondary navigation.",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [
+        "nano-global-nav"
+      ],
+      "dependencies": [],
+      "dependencyGraph": {
+        "nano-global-nav": [
+          "nano-nav-item"
+        ]
+      }
+    },
+    {
+      "filePath": "./src/components/option/option.tsx",
+      "encapsulation": "shadow",
+      "tag": "nano-option",
+      "readme": "# nano-option\n\n\n",
+      "docs": "Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "- main label. Defaults to `label` or `value` prop"
+        },
+        {
+          "name": "slot",
+          "text": "checked-icon - icon to indicated checked / selected state. Defaults to fontawesome light/check"
+        },
+        {
+          "name": "slot",
+          "text": "start - suitable for an icon or content displayed at the start of the main label"
+        },
+        {
+          "name": "slot",
+          "text": "end - suitable for an icon or content displayed at the end of the main label"
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "disabled",
+          "reflectToAttr": true,
+          "docs": "Whether this option should be disabled",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "filterMeta",
+          "type": "string",
+          "mutable": false,
+          "attr": "filter-meta",
+          "reflectToAttr": false,
+          "docs": "You can add extra meta for this option. When displayed in a list, users\nsearch / filter via extra related terms. Another usecase is 'endonyms'",
+          "docsTags": [],
+          "default": "''",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "mutable": true,
+          "attr": "label",
+          "reflectToAttr": true,
+          "docs": "Label of the option",
+          "docsTags": [],
+          "default": "''",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "selected",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "selected",
+          "reflectToAttr": true,
+          "docs": "Whether this option is selected",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "mutable": true,
+          "attr": "value",
+          "reflectToAttr": true,
+          "docs": "Value of the option",
+          "docsTags": [],
+          "default": "''",
+          "values": [
+            {
               "type": "string"
             }
           ],
@@ -8860,86 +9658,148 @@
           "setter": false
         }
       ],
-      "methods": [
-        {
-          "name": "setFocus",
-          "returns": {
-            "type": "Promise<void>",
-            "docs": ""
-          },
-          "signature": "setFocus() => Promise<void>",
-          "parameters": [],
-          "docs": "Sets focus on the first button or anchor present. Use this method instead of the global\n`element.focus()`.",
-          "docsTags": []
-        }
-      ],
+      "methods": [],
       "events": [
         {
-          "event": "nanoBlur",
-          "detail": "void",
+          "event": "nanoSelect",
+          "detail": "HTMLNanoOptionElement",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the nav item loses focus.",
+          "docs": "Fired when an option is selected",
           "docsTags": []
+        }
+      ],
+      "listeners": [
+        {
+          "event": "keydown",
+          "capture": false,
+          "passive": false
+        }
+      ],
+      "styles": [
+        {
+          "name": "--bg",
+          "annotation": "prop",
+          "docs": "default background. Defaults to none;"
         },
         {
-          "event": "nanoClose",
-          "detail": "NavItemEventDetail",
-          "bubbles": true,
-          "cancelable": true,
-          "composed": true,
-          "docs": "Emitted when the nav item closes it's secondary navigation.",
-          "docsTags": []
+          "name": "--bg-disabled",
+          "annotation": "prop",
+          "docs": "background when disabled. Defaults to none;"
         },
         {
-          "event": "nanoClosing",
-          "detail": "NavItemEventDetail",
-          "bubbles": true,
-          "cancelable": true,
-          "composed": true,
-          "docs": "Emitted when the nav item is about to close it's secondary navigation.",
-          "docsTags": []
+          "name": "--bg-focus",
+          "annotation": "prop",
+          "docs": "background when focused. Defaults to var(--nano-color-base, var(--nano-color-primary-tint, #2689a5));"
         },
         {
-          "event": "nanoFocus",
-          "detail": "void",
-          "bubbles": true,
-          "cancelable": true,
-          "composed": true,
-          "docs": "Emitted when the nav item has focus.",
-          "docsTags": []
+          "name": "--bg-selected",
+          "annotation": "prop",
+          "docs": "background when selected. Defaults to var(--nano-select-opt-bg, #f2f7f9);"
         },
         {
-          "event": "nanoOpen",
-          "detail": "NavItemEventDetail",
-          "bubbles": true,
-          "cancelable": true,
-          "composed": true,
-          "docs": "Emitted when the nav item opens it's secondary navigation.",
-          "docsTags": []
+          "name": "--color",
+          "annotation": "prop",
+          "docs": "default text color. Defaults to var(--input-text-color, var(--nano-input-text-color, #4a4a4a));"
         },
         {
-          "event": "nanoOpening",
-          "detail": "NavItemEventDetail",
-          "bubbles": true,
-          "cancelable": true,
-          "composed": true,
-          "docs": "Emitted when the nav item is about to open it's secondary navigation.",
-          "docsTags": []
+          "name": "--color-disabled",
+          "annotation": "prop",
+          "docs": "text color when disabled. Defaults to #b5aea7;"
+        },
+        {
+          "name": "--color-focus",
+          "annotation": "prop",
+          "docs": "text color when focused. Defaults to var(--nano-color-base, var(--nano-color-primary-contrast, #fff));"
+        },
+        {
+          "name": "--color-selected",
+          "annotation": "prop",
+          "docs": "text color when selected. Defaults to var(--nano-color-base, var(--nano-color-primary, #007495));"
+        },
+        {
+          "name": "--opt-icon-size",
+          "annotation": "prop",
+          "docs": "Sizes all icons within the option. Defaults to 1.4em;"
+        },
+        {
+          "name": "--padding-bottom",
+          "annotation": "prop",
+          "docs": "Defaults to var(--nano-spacing-small, 8px);"
+        },
+        {
+          "name": "--padding-end",
+          "annotation": "prop",
+          "docs": "Defaults to var(--nano-spacing-small, 8px);"
+        },
+        {
+          "name": "--padding-start",
+          "annotation": "prop",
+          "docs": "Defaults to var(--nano-spacing-small, 8px);"
+        },
+        {
+          "name": "--padding-top",
+          "annotation": "prop",
+          "docs": "Defaults to var(--nano-spacing-small, 8px);"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "docs": "main label. Defaults to `label` or `value` prop"
+        },
+        {
+          "name": "checked-icon",
+          "docs": "icon to indicated checked / selected state. Defaults to fontawesome light/check"
+        },
+        {
+          "name": "end",
+          "docs": "suitable for an icon or content displayed at the end of the main label"
+        },
+        {
+          "name": "start",
+          "docs": "suitable for an icon or content displayed at the start of the main label"
+        }
+      ],
+      "parts": [
+        {
+          "name": "check-icon",
+          "docs": ""
+        },
+        {
+          "name": "end",
+          "docs": ""
+        },
+        {
+          "name": "label",
+          "docs": ""
+        },
+        {
+          "name": "start",
+          "docs": ""
         }
       ],
-      "listeners": [],
-      "styles": [],
-      "slots": [],
-      "parts": [],
       "dependents": [
-        "nano-global-nav"
+        "nano-datalist",
+        "nano-global-nav",
+        "nano-select"
+      ],
+      "dependencies": [
+        "nano-icon"
       ],
-      "dependencies": [],
       "dependencyGraph": {
+        "nano-option": [
+          "nano-icon"
+        ],
+        "nano-datalist": [
+          "nano-option"
+        ],
         "nano-global-nav": [
-          "nano-nav-item"
+          "nano-option"
+        ],
+        "nano-select": [
+          "nano-option"
         ]
       }
     },
@@ -9676,13 +10536,37 @@
       "readme": "# nano-select (extra examples and methods)\n\n### Placeholder adds an intitial, empty option.\n\n```html\n<nano-select id=\"select\" clear-select show-inline-error=\"dirty\" required label=\"Choose your favourite\">\n  <option value=\"monkey\" label=\"monkey\"></option>\n  <option value=\"trousers\" label=\"trousers\"></option>\n  <option value=\"mouse\" label=\"mouse\" selected></option>\n</nano-select>\n```\n\n### Adding more options\n\n```js\nfunction addOpts() {\n  let sl = document.querySelector('#select');\n  sl.options = [\n    ...sl.options, \n    {label: 'another', value: \"one more\"}, \n    {label: 'no value'}, \n    'just a string'\n  ]\n}\n```\n\n### Multiple select allowing custom values\n\n```html\n<nano-select id=\"multiple\" multiple allow-custom-values clear-select show-inline-error=\"dirty\" label=\"Test\" required>\n  <option value=\"Lorem ipsum dolor sit amet\"></option>\n  <option value=\"trousers\" label=\"trousers\"></option>\n</nano-select>\n```\n\n### Invalidate and show custom error\n\n```js\nfunction showError() {\n  let input = document.querySelector('#userName');\n  input.showError('User name already taken. Please choose another');\n  // clear error\n  input.showError('');\n}\n```\n<br>",
       "docs": "The select component is a wrapper to the HTML select element with custom styling and additional functionality.\nIt accepts most of the same properties as the HTML [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).\nIt's multi selection functionality is vastly improved from the native solution. It allows for the control of\nvalue order through drag and drop or changing the insertion point with arrow keys. It also can allow for user defined values.",
       "docsTags": [
+        {
+          "name": "slot",
+          "text": "start - suitable for inline action buttons or icons that may add extra contextual information"
+        },
+        {
+          "name": "slot",
+          "text": "end - suitable for inline action buttons or icons that may add extra contextual information"
+        },
+        {
+          "name": "slot",
+          "text": "value-start - similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist"
+        },
+        {
+          "name": "slot",
+          "text": "value-end - similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist"
+        },
         {
           "name": "slot",
           "text": "label - if you do not set a label attribute, you can use this slot for more complex markup"
         },
         {
           "name": "slot",
-          "text": "legacy - you can use this slot to wrap any old select / labels / options. This will set appropriate defaults for the nano-select"
+          "text": "helper - helper text to accompany the form field underneath."
+        },
+        {
+          "name": "slot",
+          "text": "down-arrow - use this to replace the default down arrow"
+        },
+        {
+          "name": "slot",
+          "text": "- default slot; nest `nano-option` elements"
         }
       ],
       "usage": {},
@@ -9833,6 +10717,67 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "dropDownConfig",
+          "type": "{ host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: \"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"right\" | \"right-start\" | \"right-end\" | \"left\" | \"left-start\" | \"left-end\"; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; }",
+          "mutable": true,
+          "reflectToAttr": false,
+          "docs": "nano-dropdown config options you can pass to the nested dropdown component",
+          "docsTags": [],
+          "default": "{}",
+          "values": [
+            {
+              "type": "{ host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: \"top\""
+            },
+            {
+              "value": "top-start",
+              "type": "string"
+            },
+            {
+              "value": "top-end",
+              "type": "string"
+            },
+            {
+              "value": "bottom",
+              "type": "string"
+            },
+            {
+              "value": "bottom-start",
+              "type": "string"
+            },
+            {
+              "value": "bottom-end",
+              "type": "string"
+            },
+            {
+              "value": "right",
+              "type": "string"
+            },
+            {
+              "value": "right-start",
+              "type": "string"
+            },
+            {
+              "value": "right-end",
+              "type": "string"
+            },
+            {
+              "value": "left",
+              "type": "string"
+            },
+            {
+              "value": "left-start",
+              "type": "string"
+            },
+            {
+              "type": "\"left-end\"; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; }"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "floatLabel",
           "type": "boolean",
@@ -9892,7 +10837,7 @@
         {
           "name": "invalid",
           "type": "boolean",
-          "mutable": true,
+          "mutable": false,
           "attr": "invalid",
           "reflectToAttr": true,
           "docs": "This will be true when the control is in an invalid state.\nValidity is determined by the `required` prop. Or if custom validity message is set.",
@@ -9905,7 +10850,7 @@
           ],
           "optional": false,
           "required": false,
-          "getter": false,
+          "getter": true,
           "setter": false
         },
         {
@@ -9914,7 +10859,7 @@
           "mutable": false,
           "attr": "label",
           "reflectToAttr": false,
-          "docs": "String to place within a label element.",
+          "docs": "String to place within a label element. Alternatively use the 'label' slot",
           "docsTags": [],
           "values": [
             {
@@ -10001,36 +10946,17 @@
           "setter": false
         },
         {
-          "name": "name",
-          "type": "string",
-          "mutable": false,
-          "attr": "name",
-          "reflectToAttr": false,
-          "docs": "The name of the control, which is submitted with the form data.",
-          "docsTags": [],
-          "default": "this.selectId + '-name'",
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "native",
-          "type": "boolean",
+          "name": "name",
+          "type": "string",
           "mutable": false,
-          "attr": "native",
+          "attr": "name",
           "reflectToAttr": false,
-          "docs": "Whether to use native <select> elements. Setting to false will use a similar UI as multiple=\"true\"",
+          "docs": "The name of the control, which is submitted with the form data.",
           "docsTags": [],
-          "default": "true",
+          "default": "this.selectId + '-name'",
           "values": [
             {
-              "type": "boolean"
+              "type": "string"
             }
           ],
           "optional": false,
@@ -10040,24 +10966,23 @@
         },
         {
           "name": "options",
-          "type": "(string | { label: string; value?: string; })[]",
-          "mutable": true,
+          "type": "(string | OptionInterface)[]",
+          "mutable": false,
           "reflectToAttr": false,
-          "docs": "You can set options via js. domElement.options = ['option 1', 'option 2'] or [{label: 'option 1', value: 'opt-1'}]",
+          "docs": "You can set options via js as an array of strings: `domElement.options = ['option 1', 'option 2']` or\nobjects `domElement.options = [{label: 'option 1', value: 'opt-1'}]`. See `nano-option` docs for all available properties.\nAlternatively, you can nest `<nano-option>` elements within a `<nano-select>`\nRegardless - reading `options` will return the current component options - slotted or otherwise",
           "docsTags": [],
-          "default": "[]",
           "values": [
             {
               "type": "(string"
             },
             {
-              "type": "{ label: string; value?: string; })[]"
+              "type": "OptionInterface)[]"
             }
           ],
           "optional": false,
           "required": false,
-          "getter": false,
-          "setter": false
+          "getter": true,
+          "setter": true
         },
         {
           "name": "placeholder",
@@ -10082,7 +11007,7 @@
           "type": "boolean",
           "mutable": false,
           "attr": "readonly",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "If `true`, the user cannot modify the value.",
           "docsTags": [],
           "default": "false",
@@ -10183,12 +11108,12 @@
         {
           "name": "value",
           "type": "string | string[]",
-          "mutable": true,
+          "mutable": false,
           "attr": "value",
           "reflectToAttr": false,
           "docs": "The value of the select.",
           "docsTags": [],
-          "default": "this.multiple\n    ? []\n    : ''",
+          "default": "this.multiple ? [] : ''",
           "values": [
             {
               "type": "string"
@@ -10197,10 +11122,10 @@
               "type": "string[]"
             }
           ],
-          "optional": true,
+          "optional": false,
           "required": false,
-          "getter": false,
-          "setter": false
+          "getter": true,
+          "setter": true
         }
       ],
       "methods": [
@@ -10310,7 +11235,19 @@
           ]
         }
       ],
-      "listeners": [],
+      "listeners": [
+        {
+          "event": "mousedown",
+          "target": "body",
+          "capture": false,
+          "passive": true
+        },
+        {
+          "event": "keydown",
+          "capture": false,
+          "passive": false
+        }
+      ],
       "styles": [
         {
           "name": "--clear-btn-color",
@@ -10479,13 +11416,37 @@
         }
       ],
       "slots": [
+        {
+          "name": "",
+          "docs": "default slot; nest `nano-option` elements"
+        },
+        {
+          "name": "down-arrow",
+          "docs": "use this to replace the default down arrow"
+        },
+        {
+          "name": "end",
+          "docs": "suitable for inline action buttons or icons that may add extra contextual information"
+        },
+        {
+          "name": "helper",
+          "docs": "helper text to accompany the form field underneath."
+        },
         {
           "name": "label",
           "docs": "if you do not set a label attribute, you can use this slot for more complex markup"
         },
         {
-          "name": "legacy",
-          "docs": "you can use this slot to wrap any old select / labels / options. This will set appropriate defaults for the nano-select"
+          "name": "start",
+          "docs": "suitable for inline action buttons or icons that may add extra contextual information"
+        },
+        {
+          "name": "value-end",
+          "docs": "similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist"
+        },
+        {
+          "name": "value-start",
+          "docs": "similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist"
         }
       ],
       "parts": [],
@@ -10493,10 +11454,22 @@
         "nano-global-nav"
       ],
       "dependencies": [
-        "nano-icon"
+        "nano-icon",
+        "nano-datalist",
+        "nano-option"
       ],
       "dependencyGraph": {
         "nano-select": [
+          "nano-icon",
+          "nano-datalist",
+          "nano-option"
+        ],
+        "nano-datalist": [
+          "nano-option",
+          "nano-dropdown",
+          "nano-menu"
+        ],
+        "nano-option": [
           "nano-icon"
         ],
         "nano-global-nav": [
@@ -10504,102 +11477,6 @@
         ]
       }
     },
-    {
-      "filePath": "./src/components/select/select-option.tsx",
-      "encapsulation": "shadow",
-      "tag": "nano-select-option",
-      "readme": "# nano-select (extra examples and methods)\n\n### Placeholder adds an intitial, empty option.\n\n```html\n<nano-select id=\"select\" clear-select show-inline-error=\"dirty\" required label=\"Choose your favourite\">\n  <option value=\"monkey\" label=\"monkey\"></option>\n  <option value=\"trousers\" label=\"trousers\"></option>\n  <option value=\"mouse\" label=\"mouse\" selected></option>\n</nano-select>\n```\n\n### Adding more options\n\n```js\nfunction addOpts() {\n  let sl = document.querySelector('#select');\n  sl.options = [\n    ...sl.options, \n    {label: 'another', value: \"one more\"}, \n    {label: 'no value'}, \n    'just a string'\n  ]\n}\n```\n\n### Multiple select allowing custom values\n\n```html\n<nano-select id=\"multiple\" multiple allow-custom-values clear-select show-inline-error=\"dirty\" label=\"Test\" required>\n  <option value=\"Lorem ipsum dolor sit amet\"></option>\n  <option value=\"trousers\" label=\"trousers\"></option>\n</nano-select>\n```\n\n### Invalidate and show custom error\n\n```js\nfunction showError() {\n  let input = document.querySelector('#userName');\n  input.showError('User name already taken. Please choose another');\n  // clear error\n  input.showError('');\n}\n```\n<br>",
-      "docs": "Select options to be used with [select](/story/nano-components-select) elements",
-      "docsTags": [],
-      "usage": {},
-      "props": [
-        {
-          "name": "disabled",
-          "type": "boolean",
-          "mutable": false,
-          "attr": "disabled",
-          "reflectToAttr": false,
-          "docs": "Whether this option should be disabled",
-          "docsTags": [],
-          "default": "false",
-          "values": [
-            {
-              "type": "boolean"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "label",
-          "type": "string",
-          "mutable": false,
-          "attr": "label",
-          "reflectToAttr": false,
-          "docs": "Label of the option",
-          "docsTags": [],
-          "default": "''",
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "selected",
-          "type": "boolean",
-          "mutable": false,
-          "attr": "selected",
-          "reflectToAttr": false,
-          "docs": "Whether this option is selected",
-          "docsTags": [],
-          "default": "false",
-          "values": [
-            {
-              "type": "boolean"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "value",
-          "type": "string",
-          "mutable": false,
-          "attr": "value",
-          "reflectToAttr": false,
-          "docs": "Value of the option",
-          "docsTags": [],
-          "default": "''",
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        }
-      ],
-      "methods": [],
-      "events": [],
-      "listeners": [],
-      "styles": [],
-      "slots": [],
-      "parts": [],
-      "dependents": [],
-      "dependencies": [],
-      "dependencyGraph": {}
-    },
     {
       "filePath": "./src/components/skeleton/skeleton.tsx",
       "encapsulation": "shadow",
@@ -11722,6 +12599,25 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "closable",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "closable",
+          "reflectToAttr": false,
+          "docs": "When true, the tab will be rendered with a close icon.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "disabled",
           "type": "boolean",
@@ -11785,13 +12681,23 @@
           "docsTags": []
         }
       ],
-      "events": [],
+      "events": [
+        {
+          "event": "nanoTabClose",
+          "detail": "any",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the tab is closable and the close button is activated.",
+          "docsTags": []
+        }
+      ],
       "listeners": [],
       "styles": [
         {
-          "name": "--active-bg-rgb",
+          "name": "--active-bg",
           "annotation": "prop",
-          "docs": "Defaults to var(--bg-rgb);"
+          "docs": "Defaults to rgba(var(--bg-rgb), 1);"
         },
         {
           "name": "--active-text-color",
@@ -11823,6 +12729,11 @@
           "annotation": "prop",
           "docs": "Defaults to .93em;"
         },
+        {
+          "name": "--inactive-bg",
+          "annotation": "prop",
+          "docs": "Defaults to rgba(var(--bg-rgb), 0.7);"
+        },
         {
           "name": "--padding",
           "annotation": "prop",
@@ -11867,8 +12778,17 @@
         }
       ],
       "dependents": [],
-      "dependencies": [],
-      "dependencyGraph": {}
+      "dependencies": [
+        "nano-icon-button"
+      ],
+      "dependencyGraph": {
+        "nano-tab": [
+          "nano-icon-button"
+        ],
+        "nano-icon-button": [
+          "nano-icon"
+        ]
+      }
     },
     {
       "filePath": "./src/components/tabs/tab-content.tsx",
@@ -11889,7 +12809,7 @@
           "type": "boolean",
           "mutable": false,
           "attr": "active",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "When true, the tab content will be shown.",
           "docsTags": [],
           "default": "false",
@@ -11908,7 +12828,7 @@
           "type": "string",
           "mutable": false,
           "attr": "name",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "The tab panel's name.",
           "docsTags": [],
           "default": "''",
@@ -11956,11 +12876,31 @@
         },
         {
           "name": "slot",
-          "text": "tab-content-header = a header bar displayed above tab content."
+          "text": "tab-content-header - a header bar displayed above tab content."
         },
         {
           "name": "slot",
           "text": "- Add `nano-tab-content` elements to add tabbable content."
+        },
+        {
+          "name": "part",
+          "text": "base - the main tab-group wrapper"
+        },
+        {
+          "name": "part",
+          "text": "nav - the bar surrounding all the tabs and nav buttons"
+        },
+        {
+          "name": "part",
+          "text": "tabs - the wrapper around the `nano-tab` components"
+        },
+        {
+          "name": "part",
+          "text": "active-tab-indicator - the active indicator line"
+        },
+        {
+          "name": "part",
+          "text": "body - the wrapper around the `nano-tab-content` components"
         }
       ],
       "usage": {},
@@ -12016,6 +12956,24 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "disableSwipe",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "disable-swipe",
+          "reflectToAttr": false,
+          "docs": "Disable 'swipe to change tab' on devices with touch",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "noScrollControls",
           "type": "boolean",
@@ -12132,9 +13090,18 @@
         }
       ],
       "events": [
+        {
+          "event": "nanoTabClose",
+          "detail": "{ name: string; }",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when a closable tab is removed.",
+          "docsTags": []
+        },
         {
           "event": "nanoTabHide",
-          "detail": "any",
+          "detail": "{ name: string; }",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
@@ -12143,15 +13110,30 @@
         },
         {
           "event": "nanoTabShow",
-          "detail": "any",
+          "detail": "{ name: string; }",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
           "docs": "Emitted when a tab is shown.",
           "docsTags": []
+        },
+        {
+          "event": "nanoTabWillClose",
+          "detail": "{ name: string; }",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the tab is closable and the close button is activated.",
+          "docsTags": []
+        }
+      ],
+      "listeners": [
+        {
+          "event": "nanoTabClose",
+          "capture": false,
+          "passive": false
         }
       ],
-      "listeners": [],
       "styles": [
         {
           "name": "--background-rgb",
@@ -12250,8 +13232,8 @@
           "docs": "Add `nano-tab-content` elements to add tabbable content."
         },
         {
-          "name": "tab-content-header = a header bar displayed above tab content.",
-          "docs": ""
+          "name": "tab-content-header",
+          "docs": "a header bar displayed above tab content."
         },
         {
           "name": "tabs",
@@ -12261,23 +13243,23 @@
       "parts": [
         {
           "name": "active-tab-indicator",
-          "docs": ""
+          "docs": "the active indicator line"
         },
         {
           "name": "base",
-          "docs": ""
+          "docs": "the main tab-group wrapper"
         },
         {
           "name": "body",
-          "docs": ""
+          "docs": "the wrapper around the `nano-tab-content` components"
         },
         {
           "name": "nav",
-          "docs": ""
+          "docs": "the bar surrounding all the tabs and nav buttons"
         },
         {
           "name": "tabs",
-          "docs": ""
+          "docs": "the wrapper around the `nano-tab` components"
         }
       ],
       "dependents": [],