@nanoporetech-digital/components 4.9.4 → 5.0.0

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-06-12T10:24:47",
+  "timestamp": "2023-07-07T11:52:57",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.23.0",
@@ -7369,22 +7369,34 @@
       "encapsulation": "shadow",
       "tag": "nano-grid",
       "readme": "# nano-grid (extra examples and methods)\n\n## 1. Define the number of grid columns to display at various container sizes (from 1 to 10). \n\n```html\n<nano-grid m-cols=\"2\" l-cols=\"4\" xl-cols=\"6\" xxl-cols=\"10\" show-helper></nano-grid>\n```\n<nano-grid style=\"min-height: 200px\" m-cols=\"2\" l-cols=\"4\" xl-cols=\"6\" xxl-cols=\"10\" show-helper></nano-grid>\n\n## 2. Put items into the grid\n\nBy default items will fill one column.\n\n```html\n<nano-grid m-cols=\"2\" l-cols=\"4\" xl-cols=\"6\" show-helper>\n  <div></div>\n  <div></div>\n  <div></div>\n</nano-grid>\n```\n\n## 3. Set items to span columns and rows and / or start on different columns and rows at different sizes\n\n```html\n<nano-grid l-cols=\"6\" show-helper>\n  <div grid-states=\"\n    xl-col-span-2 \n    xl-col-start-2 \n    xl-row-span-2 \n    l-col-span-4\n  \"></div>\n  <div grid-states=\"xl-col-start-1 xl-row-start-1\"></div>\n  <div grid-states=\"xl-col-start-6\"></div>\n  <div grid-states=\"l-col-span-2\"></div>\n</nano-grid>\n```\n\n### IE11 Notes\n\nIf you need to support IE11 there are some things to consider.\n\nThere is no native way for IE11 to wrap items to new rows automatically. In order to achive this, items have been statically assigned to their row and column.\n\nThis causes 2 side-effects:\n\n1. In-order to strike a balance between flexibility and not creating humongous CSS files; the maximum grid columns currently supported is *10* with a potential *20* items spread accross them. If you need more look at nesting grids.\n\n2. If you wish to use any item grid-state property (col-span, col-start, row-span or row start) you will then need to assign corresponding properies to ALL items within the grid. E.g.\n\n```html\n<nano-grid l-cols=\"6\" show-helper>\n  <div grid-states=\"l-col-span-2 l-col-start-2 l-row-span-2\">1</div>\n  <div grid-states=\"l-col-start-1 l-row-start-1\">2</div>\n  <div grid-states=\"l-col-start-6\">3</div>\n  <div grid-states=\"l-col-span-2\">4</div>\n</nano-grid>\n```\n\n(Something that will work on modern browsers) Will need to become:\n\n```html\n<nano-grid l-cols=\"6\" show-helper>\n  <div grid-states=\"l-col-span-2 l-col-start-2 l-row-span-2 l-row-start-1\">1</div>\n  <div grid-states=\"l-col-start-1 l-row-start-1\">2</div>\n  <div grid-states=\"l-col-start-6 l-row-start-1\">3</div>\n  <div grid-states=\"l-col-start-4 l-col-span-2 l-row-start-2\">4</div>\n</nano-grid>\n```\n",
-      "docs": "A context-aware CSS grid implementation.\nUses it's own width to choose column number - not screen width.",
-      "docsTags": [],
+      "docs": "A lightweight, context-aware CSS grid implementation.\n\n- Define multiple grids templates at different breakpoints\n- Uses `@container` queries to select the correct grid depending on the current dimensions\n- Use `grid-states=\"...\"` on direct descendants for `column` / `row` - `start` / `end`\n- SSR optimised",
+      "docsTags": [
+        {
+          "name": "part",
+          "text": "grid - the main grid element.\nUse this to set css such as `justify-items|content` / `align-items|content` / `place-content`"
+        },
+        {
+          "name": "part",
+          "text": "helper - a replica grid showed when `show-helper` is true"
+        },
+        {
+          "name": "slot",
+          "text": "- default slot. Use this to place grid items. Use `grid-states=\"...\"` attribute to opt-out of auto / sequential placement."
+        }
+      ],
       "usage": {},
       "props": [
         {
-          "name": "contentPanel",
-          "type": "boolean",
+          "name": "lCols",
+          "type": "number",
           "mutable": false,
-          "attr": "content-panel",
-          "reflectToAttr": true,
-          "docs": "shortcut for a traditional website like grid (requires more than one row). The second row will auto expand to fill the grid height. The first row and > 2nd row will be the size of their content. e.g. header, body and footer.",
+          "attr": "l-cols",
+          "reflectToAttr": false,
+          "docs": "the number of columns the grid has at the large breakpoint.",
           "docsTags": [],
-          "default": "false",
           "values": [
             {
-              "type": "boolean"
+              "type": "number"
             }
           ],
           "optional": false,
@@ -7393,17 +7405,20 @@
           "setter": false
         },
         {
-          "name": "fullHeight",
-          "type": "boolean",
+          "name": "lSize",
+          "type": "number | string",
           "mutable": false,
-          "attr": "full-height",
-          "reflectToAttr": true,
-          "docs": "Helper to make grid items expand to full height in IE11",
+          "attr": "l-size",
+          "reflectToAttr": false,
+          "docs": "the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.\nWill default to `px` if no unit supplied e.g. `20rem`",
           "docsTags": [],
-          "default": "false",
+          "default": "800",
           "values": [
             {
-              "type": "boolean"
+              "type": "number"
+            },
+            {
+              "type": "string"
             }
           ],
           "optional": false,
@@ -7412,32 +7427,31 @@
           "setter": false
         },
         {
-          "name": "lCols",
-          "type": "number",
+          "name": "lTpl",
+          "type": "string",
           "mutable": false,
-          "attr": "l-cols",
+          "attr": "l-tpl",
           "reflectToAttr": false,
-          "docs": "the number of columns the grid has at the large breakpoint.",
+          "docs": "Optional large `grid-template`. *Note* - you must set `lCols` for this to take affect",
           "docsTags": [],
           "values": [
             {
-              "type": "number"
+              "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false,
           "getter": false,
           "setter": false
         },
         {
-          "name": "lSize",
+          "name": "mCols",
           "type": "number",
           "mutable": false,
-          "attr": "l-size",
+          "attr": "m-cols",
           "reflectToAttr": false,
-          "docs": "the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.",
+          "docs": "the number of columns the grid has at the medium breakpoint.",
           "docsTags": [],
-          "default": "800",
           "values": [
             {
               "type": "number"
@@ -7449,16 +7463,20 @@
           "setter": false
         },
         {
-          "name": "mCols",
-          "type": "number",
+          "name": "mSize",
+          "type": "number | string",
           "mutable": false,
-          "attr": "m-cols",
+          "attr": "m-size",
           "reflectToAttr": false,
-          "docs": "the number of columns the grid has at the medium breakpoint.",
+          "docs": "the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.\nWill default to `px` if no unit supplied e.g. `20rem`",
           "docsTags": [],
+          "default": "550",
           "values": [
             {
               "type": "number"
+            },
+            {
+              "type": "string"
             }
           ],
           "optional": false,
@@ -7467,20 +7485,19 @@
           "setter": false
         },
         {
-          "name": "mSize",
-          "type": "number",
+          "name": "mTpl",
+          "type": "string",
           "mutable": false,
-          "attr": "m-size",
+          "attr": "m-tpl",
           "reflectToAttr": false,
-          "docs": "the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.",
+          "docs": "Optional medium `grid-template`. *Note* - you must set `mCols` for this to take affect",
           "docsTags": [],
-          "default": "550",
           "values": [
             {
-              "type": "number"
+              "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false,
           "getter": false,
           "setter": false
@@ -7505,16 +7522,19 @@
         },
         {
           "name": "sSize",
-          "type": "number",
+          "type": "number | string",
           "mutable": false,
           "attr": "s-size",
           "reflectToAttr": false,
-          "docs": "the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.",
+          "docs": "the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.\nWill default to `px` if no unit supplied e.g. `20rem`",
           "docsTags": [],
           "default": "300",
           "values": [
             {
               "type": "number"
+            },
+            {
+              "type": "string"
             }
           ],
           "optional": false,
@@ -7522,6 +7542,24 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "sTpl",
+          "type": "string",
+          "mutable": false,
+          "attr": "s-tpl",
+          "reflectToAttr": false,
+          "docs": "Optional small `grid-template`. *Note* - you must set `sCols` for this to take affect",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "showHelper",
           "type": "boolean",
@@ -7561,16 +7599,19 @@
         },
         {
           "name": "xlSize",
-          "type": "number",
+          "type": "number | string",
           "mutable": false,
           "attr": "xl-size",
           "reflectToAttr": false,
-          "docs": "the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.",
+          "docs": "the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.\nWill default to `px` if no unit supplied e.g. `20rem`",
           "docsTags": [],
           "default": "1000",
           "values": [
             {
               "type": "number"
+            },
+            {
+              "type": "string"
             }
           ],
           "optional": false,
@@ -7578,6 +7619,24 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "xlTpl",
+          "type": "string",
+          "mutable": false,
+          "attr": "xl-tpl",
+          "reflectToAttr": false,
+          "docs": "Optional xl `grid-template`. *Note* - you must set `xlCols` for this to take affect",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "xxlCols",
           "type": "number",
@@ -7595,20 +7654,28 @@
           "required": false,
           "getter": false,
           "setter": false
-        }
-      ],
-      "methods": [],
-      "events": [
+        },
         {
-          "event": "nanoBpChange",
-          "detail": "string[]",
-          "bubbles": true,
-          "cancelable": true,
-          "composed": true,
-          "docs": "Emitted when the `nano-grid` changes breakpoint",
-          "docsTags": []
+          "name": "xxlTpl",
+          "type": "string",
+          "mutable": false,
+          "attr": "xxl-tpl",
+          "reflectToAttr": false,
+          "docs": "Optional xxl `grid-template`. *Note* - you must set `xxlCols` for this to take affect",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
         }
       ],
+      "methods": [],
+      "events": [],
       "listeners": [],
       "styles": [
         {
@@ -7622,8 +7689,22 @@
           "docs": "gap between all rows. Defaults to theme's global padding"
         }
       ],
-      "slots": [],
-      "parts": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "default slot. Use this to place grid items. Use `grid-states=\"...\"` attribute to opt-out of auto / sequential placement."
+        }
+      ],
+      "parts": [
+        {
+          "name": "grid",
+          "docs": "the main grid element.\nUse this to set css such as `justify-items|content` / `align-items|content` / `place-content`"
+        },
+        {
+          "name": "helper",
+          "docs": "a replica grid showed when `show-helper` is true"
+        }
+      ],
       "dependents": [
         "nano-hero"
       ],
@@ -7639,45 +7720,25 @@
       "encapsulation": "shadow",
       "tag": "nano-grid-item",
       "readme": "# nano-grid (extra examples and methods)\n\n## 1. Define the number of grid columns to display at various container sizes (from 1 to 10). \n\n```html\n<nano-grid m-cols=\"2\" l-cols=\"4\" xl-cols=\"6\" xxl-cols=\"10\" show-helper></nano-grid>\n```\n<nano-grid style=\"min-height: 200px\" m-cols=\"2\" l-cols=\"4\" xl-cols=\"6\" xxl-cols=\"10\" show-helper></nano-grid>\n\n## 2. Put items into the grid\n\nBy default items will fill one column.\n\n```html\n<nano-grid m-cols=\"2\" l-cols=\"4\" xl-cols=\"6\" show-helper>\n  <div></div>\n  <div></div>\n  <div></div>\n</nano-grid>\n```\n\n## 3. Set items to span columns and rows and / or start on different columns and rows at different sizes\n\n```html\n<nano-grid l-cols=\"6\" show-helper>\n  <div grid-states=\"\n    xl-col-span-2 \n    xl-col-start-2 \n    xl-row-span-2 \n    l-col-span-4\n  \"></div>\n  <div grid-states=\"xl-col-start-1 xl-row-start-1\"></div>\n  <div grid-states=\"xl-col-start-6\"></div>\n  <div grid-states=\"l-col-span-2\"></div>\n</nano-grid>\n```\n\n### IE11 Notes\n\nIf you need to support IE11 there are some things to consider.\n\nThere is no native way for IE11 to wrap items to new rows automatically. In order to achive this, items have been statically assigned to their row and column.\n\nThis causes 2 side-effects:\n\n1. In-order to strike a balance between flexibility and not creating humongous CSS files; the maximum grid columns currently supported is *10* with a potential *20* items spread accross them. If you need more look at nesting grids.\n\n2. If you wish to use any item grid-state property (col-span, col-start, row-span or row start) you will then need to assign corresponding properies to ALL items within the grid. E.g.\n\n```html\n<nano-grid l-cols=\"6\" show-helper>\n  <div grid-states=\"l-col-span-2 l-col-start-2 l-row-span-2\">1</div>\n  <div grid-states=\"l-col-start-1 l-row-start-1\">2</div>\n  <div grid-states=\"l-col-start-6\">3</div>\n  <div grid-states=\"l-col-span-2\">4</div>\n</nano-grid>\n```\n\n(Something that will work on modern browsers) Will need to become:\n\n```html\n<nano-grid l-cols=\"6\" show-helper>\n  <div grid-states=\"l-col-span-2 l-col-start-2 l-row-span-2 l-row-start-1\">1</div>\n  <div grid-states=\"l-col-start-1 l-row-start-1\">2</div>\n  <div grid-states=\"l-col-start-6 l-row-start-1\">3</div>\n  <div grid-states=\"l-col-start-4 l-col-span-2 l-row-start-2\">4</div>\n</nano-grid>\n```\n",
-      "docs": "Grid items to be used with [grid](/story/nano-components-grid) elements",
-      "docsTags": [],
-      "usage": {},
-      "props": [
+      "docs": "",
+      "docsTags": [
         {
-          "name": "gridStates",
-          "type": "string",
-          "mutable": false,
-          "attr": "grid-states",
-          "reflectToAttr": false,
-          "docs": "How to position this item within it's parent grid at different break points. Examples:\nxl-col-span-2\nl-col-start-2\nxxl-row-span-2\nm-row-start-2",
-          "docsTags": [],
-          "default": "''",
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
+          "name": "deprecated",
+          "text": "- you can now use `grid-states=\"...\"`\non any direct `nano-grid` descendent without limitation rendering `nano-grid-item` obsolete.\n\nGrid items to be used with [grid](/story/nano-components-grid) elements"
         }
       ],
+      "usage": {},
+      "props": [],
       "methods": [],
       "events": [],
       "listeners": [],
       "styles": [],
       "slots": [],
       "parts": [],
-      "dependents": [
-        "nano-hero"
-      ],
+      "dependents": [],
       "dependencies": [],
-      "dependencyGraph": {
-        "nano-hero": [
-          "nano-grid-item"
-        ]
-      }
+      "dependencyGraph": {},
+      "deprecation": "- you can now use `grid-states=\"...\"`\non any direct `nano-grid` descendent without limitation rendering `nano-grid-item` obsolete.\n\nGrid items to be used with [grid](/story/nano-components-grid) elements"
     },
     {
       "filePath": "./src/components/hero/hero.tsx",
@@ -7739,7 +7800,7 @@
           "mutable": false,
           "attr": "img-src",
           "reflectToAttr": false,
-          "docs": "src for backgronund image. For more control use the `background` slot instead.",
+          "docs": "src for background image. For more control use the `background` slot instead.",
           "docsTags": [],
           "values": [
             {
@@ -7938,13 +7999,11 @@
       "dependents": [],
       "dependencies": [
         "nano-grid",
-        "nano-grid-item",
         "nano-img"
       ],
       "dependencyGraph": {
         "nano-hero": [
           "nano-grid",
-          "nano-grid-item",
           "nano-img"
         ],
         "nano-img": [
@@ -8243,7 +8302,7 @@
     },
     {
       "filePath": "./src/components/icon-button/icon-button.tsx",
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "tag": "nano-icon-button",
       "readme": "# nano-icon-button\n\n\n",
       "docs": "Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.",
@@ -8278,6 +8337,27 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "form",
+          "type": "HTMLFormElement | string",
+          "mutable": false,
+          "attr": "form",
+          "reflectToAttr": false,
+          "docs": "The HTML form element or form element id.\nUsed to submit a form when the button is not a child of the form.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "HTMLFormElement"
+            },
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "href",
           "type": "string",
@@ -8368,6 +8448,24 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "rel",
+          "type": "string",
+          "mutable": false,
+          "attr": "rel",
+          "reflectToAttr": false,
+          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "showTooltip",
           "type": "boolean",
@@ -8479,9 +8577,9 @@
           "docs": "defaults to transparent;"
         },
         {
-          "name": "--border-radius",
+          "name": "--box-shadow",
           "annotation": "prop",
-          "docs": "defaults to var(--nano-border-radius-medium, 4px);"
+          "docs": "defaults to none;"
         },
         {
           "name": "--color",
@@ -13852,28 +13950,32 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/spinner/spinner.tsx",
+      "filePath": "./src/components/sortable/sortable.tsx",
       "encapsulation": "shadow",
-      "tag": "nano-spinner",
-      "readme": "# nano-spinner\n\n\n",
-      "docs": "Spinners are used to show the progress of an indeterminate operation.",
+      "tag": "nano-sortable",
+      "readme": "# nano-sortable\n\n\n",
+      "docs": "An accessible and flexible re-order / sort utility component.\n\n- Drag and drop via mouse, touch or keyboard\n- Live announcements for screen readers\n- Works with or without an explicit handle (although with is preferable)",
       "docsTags": [
+        {
+          "name": "part",
+          "text": "announcements - the a11y, live region. Visually hidden by default"
+        },
         {
           "name": "slot",
-          "text": "- Used for loading messages"
+          "text": "- The default slot containing any items you might want to sort"
         }
       ],
       "usage": {},
       "props": [
         {
-          "name": "overlay",
+          "name": "animationEnabled",
           "type": "boolean",
           "mutable": false,
-          "attr": "overlay",
-          "reflectToAttr": true,
-          "docs": "Displays absolutely with an overlay",
+          "attr": "animation-enabled",
+          "reflectToAttr": false,
+          "docs": "Items being sorted will animate into place",
           "docsTags": [],
-          "default": "false",
+          "default": "true",
           "values": [
             {
               "type": "boolean"
@@ -13885,43 +13987,512 @@
           "setter": false
         },
         {
-          "name": "type",
-          "type": "\"circle\" | \"dna\"",
+          "name": "animationTiming",
+          "type": "any",
           "mutable": false,
-          "attr": "type",
+          "attr": "animation-timing",
           "reflectToAttr": false,
-          "docs": "The type of spinner animation. dna should be used for larger, page loads. Circle for smaller component loaders.",
+          "docs": "The css animation timing applied when `animationEnabled` is `true`",
           "docsTags": [],
-          "default": "'dna'",
+          "default": "{ duration: 200, easing: 'ease-out' }",
           "values": [
             {
-              "value": "circle",
-              "type": "string"
-            },
-            {
-              "value": "dna",
-              "type": "string"
+              "type": "any"
             }
           ],
           "optional": false,
           "required": false,
           "getter": false,
           "setter": false
-        }
-      ],
-      "methods": [],
-      "events": [],
-      "listeners": [],
-      "styles": [
-        {
-          "name": "--base-color-rgb",
-          "annotation": "prop",
-          "docs": "default var(--nano-indicator-rgb, 84 140 175)"
-        },
-        {
-          "name": "--indicator-color",
-          "annotation": "prop",
-          "docs": "default var(--nano-indicator-color, rgb(var(--base-color-rgb) / 10%));"
+        },
+        {
+          "name": "createKeyboardHandle",
+          "type": "(_number: number, _element: Element) => HTMLElement",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "A function that should attach a keyboard accessible control.\nWhen a `handleSelector` is not used - to allow keyboard accessibility -\n`createKeyboardHandle` should render a focusable element.\n\nIf your sortable item is itself focusable,\nyou must use this function to render a control *outside* of the focusable element.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "_number"
+            },
+            {
+              "name": "param",
+              "text": "_element"
+            },
+            {
+              "name": "returns",
+              "text": "a function that attaches a keyboard accessible handle control element.\nThe function itself *must* return the handle element."
+            }
+          ],
+          "default": "(_number: number, _element: Element) => {\n    const handleTpl = /* html */ `\n      <nano-icon-button\n        slot=\"end\"\n        icon-name=\"light/arrows\"\n        class=\"nano-sortable__keyboard-handle visually-hidden\"\n        label=\"Re-order this item\"\n      ></nano-icon-button>`;\n    const div = globalThis.document.createElement('div');\n    div.innerHTML = handleTpl;\n\n    const handle = div.children[0] as HTMLElement;\n    _element.append(handle);\n    return handle;\n  }",
+          "values": [
+            {
+              "type": "(_number: number, _element: Element) => HTMLElement"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "dragResize",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "drag-resize",
+          "reflectToAttr": false,
+          "docs": "Dragged items by default, will take whatever default css is applied in situ.\nWhen sortable items' dimensions are dynamic (i.e they can shrink / grow via the space allowed) dragging items can look 'wrong'.\nApply `dragResize` to read & recreate the dragged items current dimensions when dragged.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "draggedClass",
+          "type": "string",
+          "mutable": false,
+          "attr": "dragged-class",
+          "reflectToAttr": false,
+          "docs": "Use this class to change how the element looks whilst being sorted",
+          "docsTags": [],
+          "default": "'nano-sortable__dragged'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "droppedHelperText",
+          "type": "(el: Element) => string",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "Used to generate a screen reader live update, informing the user of the current element being dropped.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "el the element that has been dropped by the user"
+            },
+            {
+              "name": "returns",
+              "text": "a string, describing the element that has been dropped"
+            }
+          ],
+          "default": "(el: Element) =>\n    `${this.itemDescriptor(el)} dropped`",
+          "values": [
+            {
+              "type": "(el: Element) => string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "dropzoneActiveClass",
+          "type": "string",
+          "mutable": false,
+          "attr": "dropzone-active-class",
+          "reflectToAttr": false,
+          "docs": "Used in-conjunction with `dropzoneSelector`, applied when a dropzone is dragged over",
+          "docsTags": [],
+          "default": "''",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "dropzoneSelector",
+          "type": "string",
+          "mutable": false,
+          "attr": "dropzone-selector",
+          "reflectToAttr": false,
+          "docs": "When dragging between grouped collections of items, it is possible to drag all sortable items from one group to another.\nAt that point, you will not be able to drag items back to the original group.\nA `dropzoneSelector` allows you to define a placeholder area where items can always be dropped.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "grabbedHelperText",
+          "type": "(el: Element) => string",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "Used to generate a screen reader live update, informing the user of the current element being grabbed.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "el the element that has been grabbed by the user"
+            },
+            {
+              "name": "returns",
+              "text": "a string, describing the element being grabbed"
+            }
+          ],
+          "default": "(el: Element) =>\n    `${this.itemDescriptor(el)} grabbed`",
+          "values": [
+            {
+              "type": "(el: Element) => string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "handleDraggedClass",
+          "type": "string",
+          "mutable": false,
+          "attr": "handle-dragged-class",
+          "reflectToAttr": false,
+          "docs": "Use this class to change how the handle looks whilst being sorted",
+          "docsTags": [],
+          "default": "'nano-sortable__handle-dragged'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "handleSelector",
+          "type": "string",
+          "mutable": false,
+          "attr": "handle-selector",
+          "reflectToAttr": false,
+          "docs": "A css query selector which matches an element *within* the `itemSelector` element\nwhich will act like a drag handle. **Note** For keyboard a11y it's recommended\nto use `handleSelector` when possible. Alternatively, the `createKeyboardHandle` prop will be used",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "helperText",
+          "type": "string",
+          "mutable": false,
+          "attr": "helper-text",
+          "reflectToAttr": false,
+          "docs": "Accessibility helper text applied to handle controls",
+          "docsTags": [],
+          "default": "'Press \"Space\" or \"Enter\" to enable element reordering and use the arrow keys to reorder items.' +\n    'Press \"Escape\" to cancel reordering. Alternatively, use your mouse to drag / reorder.'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "itemDescriptor",
+          "type": "(el: Element) => string",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "As a sortable element is interacted with, announcements are made to screen readers\n- informing the user what is changing.\nBy default, the text from the element is extracted to describe the interacted with element.\nUse this function to provide a more meaningful, concise item descriptor",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "el the element being interacted with"
+            },
+            {
+              "name": "returns",
+              "text": "a string, describing the element being interacted with"
+            }
+          ],
+          "default": "(el: Element) => `\"${el.textContent.trim()}\"`",
+          "values": [
+            {
+              "type": "(el: Element) => string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "itemSelector",
+          "type": "string",
+          "mutable": false,
+          "attr": "item-selector",
+          "reflectToAttr": false,
+          "docs": "A css query selector which matches a set of elements that should be sortable. e.g. `<li>` or `<tr>`",
+          "docsTags": [],
+          "default": "'li'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "orientation",
+          "type": "\"horizontal\" | \"vertical\"",
+          "mutable": false,
+          "attr": "orientation",
+          "reflectToAttr": false,
+          "docs": "The axis to lock dragging elements to. `undefined` means any axis",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "horizontal",
+              "type": "string"
+            },
+            {
+              "value": "vertical",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "placeholderClass",
+          "type": "string",
+          "mutable": false,
+          "attr": "placeholder-class",
+          "reflectToAttr": false,
+          "docs": "Use this class to change how the element looks when acting as a placeholder",
+          "docsTags": [],
+          "default": "'nano-sortable__placeholder'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "reorderHelperText",
+          "type": "(el: Element, elements: Element[], position: number) => string",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "Used to generate a screen reader live update, informing the user when items have been reordered.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "el the element that has been reordered by the user"
+            },
+            {
+              "name": "param",
+              "text": "elements the elements in the sortable list"
+            },
+            {
+              "name": "param",
+              "text": "position the new position of the dropped element"
+            },
+            {
+              "name": "returns",
+              "text": "a string, describing the element being dropped"
+            }
+          ],
+          "default": "(\n    el: Element,\n    elements: Element[],\n    position: number\n  ) =>\n    `The list has been reordered, ${this.itemDescriptor(\n      el\n    )} is now item ${position} of ${elements.length}`",
+          "values": [
+            {
+              "type": "(el: Element, elements: Element[], position: number) => string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "sortableHostElement",
+          "type": "HTMLElement",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "use `sortableHostElement` to watch a sortable list without needing to wrap in `nano-sortable`.\nNote that the `sortableHostElement` element css `position` will be set to `relative`",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "HTMLElement"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "refreshKeyboardHandles",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "refreshKeyboardHandles() => Promise<void>",
+          "parameters": [],
+          "docs": "If sortable elements change dynamically, use this method to add handle controls to new elements",
+          "docsTags": []
+        }
+      ],
+      "events": [
+        {
+          "event": "nanoDropped",
+          "detail": "{ element: HTMLElement; }",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fired when a sortable element is dropped after having been picked up.",
+          "docsTags": []
+        },
+        {
+          "event": "nanoGrabbed",
+          "detail": "{ element: HTMLElement; index: number; }",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fired when a sortable element is picked-up; via keyboard, mouse or touch.\n`event.preventDefault()` to prevent the element being picked-up.",
+          "docsTags": []
+        },
+        {
+          "event": "nanoOrderChange",
+          "detail": "{ element: HTMLElement; originalIndex: number; targetIndex: number; }",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fired when an the order changes. Use this to update any underlying data model.\n`event.preventDefault()` to prevent the element being moved; will revert to original position.",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "The default slot containing any items you might want to sort"
+        }
+      ],
+      "parts": [
+        {
+          "name": "announcements",
+          "docs": "the a11y, live region. Visually hidden by default"
+        }
+      ],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "./src/components/spinner/spinner.tsx",
+      "encapsulation": "shadow",
+      "tag": "nano-spinner",
+      "readme": "# nano-spinner\n\n\n",
+      "docs": "Spinners are used to show the progress of an indeterminate operation.",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "- Used for loading messages"
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "overlay",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "overlay",
+          "reflectToAttr": true,
+          "docs": "Displays absolutely with an overlay",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "type",
+          "type": "\"circle\" | \"dna\"",
+          "mutable": false,
+          "attr": "type",
+          "reflectToAttr": false,
+          "docs": "The type of spinner animation. dna should be used for larger, page loads. Circle for smaller component loaders.",
+          "docsTags": [],
+          "default": "'dna'",
+          "values": [
+            {
+              "value": "circle",
+              "type": "string"
+            },
+            {
+              "value": "dna",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [
+        {
+          "name": "--base-color-rgb",
+          "annotation": "prop",
+          "docs": "default var(--nano-indicator-rgb, 84 140 175)"
+        },
+        {
+          "name": "--indicator-color",
+          "annotation": "prop",
+          "docs": "default var(--nano-indicator-color, rgb(var(--base-color-rgb) / 10%));"
         },
         {
           "name": "--overlay-color",
@@ -14610,9 +15181,29 @@
       "readme": "# nano-tab\n\n\n",
       "docs": "",
       "docsTags": [
+        {
+          "name": "slot",
+          "text": "start - start of the tab, content. Outside of the focusable element"
+        },
+        {
+          "name": "slot",
+          "text": "end - end of the tab, content. Outside of the focusable element"
+        },
         {
           "name": "slot",
           "text": "- The tab's label."
+        },
+        {
+          "name": "part",
+          "text": "base - the wrapper around the whole control"
+        },
+        {
+          "name": "part",
+          "text": "tab - the main tab control that controls the active state"
+        },
+        {
+          "name": "part",
+          "text": "close-btn - the close button of the tab (if `closable=true`)"
         }
       ],
       "usage": {},
@@ -14746,6 +15337,11 @@
           "annotation": "prop",
           "docs": "Defaults to var(--nano-layer-bg-rgb, 255 255 255);"
         },
+        {
+          "name": "--border-radius",
+          "annotation": "prop",
+          "docs": "inherit;"
+        },
         {
           "name": "--disabled-bg-rgb",
           "annotation": "prop",
@@ -14806,12 +15402,28 @@
         {
           "name": "",
           "docs": "The tab's label."
+        },
+        {
+          "name": "end",
+          "docs": "end of the tab, content. Outside of the focusable element"
+        },
+        {
+          "name": "start",
+          "docs": "start of the tab, content. Outside of the focusable element"
         }
       ],
       "parts": [
         {
           "name": "base",
-          "docs": ""
+          "docs": "the wrapper around the whole control"
+        },
+        {
+          "name": "close-btn",
+          "docs": "the close button of the tab (if `closable=true`)"
+        },
+        {
+          "name": "tab",
+          "docs": "the main tab control that controls the active state"
         }
       ],
       "dependents": [],
@@ -15036,7 +15648,7 @@
           "type": "\"start\" | \"top\"",
           "mutable": false,
           "attr": "placement",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "The placement of the tabs.",
           "docsTags": [],
           "default": "'top'",
@@ -15191,7 +15803,7 @@
         {
           "name": "--content-border-radius",
           "annotation": "prop",
-          "docs": "defaults to var(--border-radius);"
+          "docs": "defaults to `var(--border-radius)` `position=\"top\"`. `0 var(--border-radius) var(--border-radius) 0` `position=\"start\"`;"
         },
         {
           "name": "--content-padding",
@@ -15236,7 +15848,7 @@
         {
           "name": "--tab-border-radius",
           "annotation": "prop",
-          "docs": "defaults to var(--border-radius);"
+          "docs": "defaults to `var(--border-radius) var(--border-radius) 0 0` `position=\"top\"`. `0` `position=\"start\"`. ;"
         },
         {
           "name": "--tab-text-color",
@@ -15320,7 +15932,7 @@
       "encapsulation": "none",
       "tag": "nano-table",
       "readme": "# nano-table\n\n\n",
-      "docs": "A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.\n\n- Built-in search\n- Built-in column filter\n- Built-in column sort\n- Easily swap in API / async based search / filter & sort\n- Pin headers, footers, rows, columns\n- Drag-&-Drop columns to re-order\n- Add custom rendering at every level\n- Add custom properties at every level",
+      "docs": "A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.\n\n- Built-in search\n- Built-in column filter\n- Built-in column sort\n- Easily swap in API / async based search / filter & sort\n- Pin headers, footers, rows, columns\n- Add custom rendering at every level\n- Add custom properties at every level",
       "docsTags": [
         {
           "name": "slot",
@@ -15427,25 +16039,6 @@
           "getter": false,
           "setter": false
         },
-        {
-          "name": "defaultColDraggable",
-          "type": "boolean",
-          "mutable": false,
-          "attr": "default-col-draggable",
-          "reflectToAttr": false,
-          "docs": "The default draggable option for all columns.\n`true` will enable column drag-to-reorder unless you set `draggable: false` on a column\n`false` will disable column drag-to-reorder unless you set `draggable: true` on a column",
-          "docsTags": [],
-          "default": "false",
-          "values": [
-            {
-              "type": "boolean"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
         {
           "name": "defaultSort",
           "type": "boolean",
@@ -15882,24 +16475,6 @@
           "docs": "Fired whenever a block is activated by scrolling into view / becoming visible\nThis could be leveraged for infinite scrolling / to fetch more data.",
           "docsTags": []
         },
-        {
-          "event": "nanoTblColDrag",
-          "detail": "{ column: keyof RowGeneric; }",
-          "bubbles": true,
-          "cancelable": true,
-          "composed": true,
-          "docs": "Fired when a column has started dragging",
-          "docsTags": []
-        },
-        {
-          "event": "nanoTblColDrop",
-          "detail": "{ fromCol: keyof RowGeneric; toCol: keyof RowGeneric; fromIndex: number; toIndex: number; }",
-          "bubbles": true,
-          "cancelable": true,
-          "composed": true,
-          "docs": "Fired when a column has been dropped (after dragging)\n`event.preventDefault()` to stop column re-order.",
-          "docsTags": []
-        },
         {
           "event": "nanoTblReady",
           "detail": "any",