@nanoporetech-digital/components 7.9.1 → 8.0.0-alpha.0

package/docs-vscode.json

@@ -5,43 +5,9 @@
       "name": "nano-accordion",
       "description": {
         "kind": "markdown",
-        "value": "Simple accordion - only one item open at a time - must be used with [details](story/components-accordion--details) elements."
+        "value": "Groups multiple details elements together, allowing only one to be open at a time."
       },
-      "attributes": [
-        {
-          "name": "color",
-          "description": "Color to use from the color palette.",
-          "values": [
-            {
-              "name": "danger"
-            },
-            {
-              "name": "dark"
-            },
-            {
-              "name": "light"
-            },
-            {
-              "name": "medium"
-            },
-            {
-              "name": "primary"
-            },
-            {
-              "name": "secondary"
-            },
-            {
-              "name": "success"
-            },
-            {
-              "name": "tertiary"
-            },
-            {
-              "name": "warning"
-            }
-          ]
-        }
-      ]
+      "attributes": []
     },
     {
       "name": "nano-alert",
@@ -62,31 +28,23 @@
               "name": "danger"
             },
             {
-              "name": "dark"
-            },
-            {
-              "name": "light"
-            },
-            {
-              "name": "medium"
+              "name": "neutral"
             },
             {
               "name": "primary"
             },
-            {
-              "name": "secondary"
-            },
             {
               "name": "success"
             },
-            {
-              "name": "tertiary"
-            },
             {
               "name": "warning"
             }
           ]
         },
+        {
+          "name": "countdown",
+          "description": "Enables a countdown that indicates the remaining time the alert will be displayed.\nTypically used to indicate the remaining time before a whole app refresh."
+        },
         {
           "name": "duration",
           "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\nalert before it closes (e.g. moves the mouse over it), the timer will restart."
@@ -98,6 +56,27 @@
         {
           "name": "open",
           "description": "Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods."
+        },
+        {
+          "name": "theme",
+          "description": "The color to use from the application's color palette.",
+          "values": [
+            {
+              "name": "danger"
+            },
+            {
+              "name": "neutral"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
         }
       ]
     },
@@ -120,6 +99,10 @@
           "name": "browse-index",
           "description": "Will maintain a search all / '*' on init and reset allowing for a view\nthen filter experience rather than a search first experience"
         },
+        {
+          "name": "filters",
+          "description": "Query filters to apply to all searches.\nRefer to https://www.algolia.com/doc/api-reference/api-parameters/filters for format."
+        },
         {
           "name": "listen-to",
           "description": "JS querySelector string of a `nano-input` / `input` element from which\nto listen to `nano-change` or `change` events and change the `query` prop.\nNot required if an appropriate field is in the 'search-input' slot"
@@ -152,6 +135,10 @@
           "name": "results-page",
           "description": "The current algolia page of results currently being viewed or to get."
         },
+        {
+          "name": "search-index",
+          "description": "Algolia search index. Used in conjunction with 'apiKey' & 'appId'.\n```\n{ index: string, // algolia index name\n  domain?: string, // used in template filters to resolve incomplete url fields\n  filters?: [string], // algolia facets to retrive\n  hitsPerPage?: number,\n  name?: string // human readable index name\n}\n```"
+        },
         {
           "name": "search-index-name",
           "description": "Algolia search index name. Alternative to 'searchIndex'.\nA simplified shortcut for setting an index.\nProperties such as hitsPerPage and facets will come from the algolia index"
@@ -187,6 +174,10 @@
               "name": "url-query-push"
             }
           ]
+        },
+        {
+          "name": "tpl-render-fn",
+          "description": "Template engine render function to use when rendering results and filters.\nDefaults to Squirrel v8's render (https://squirrelly.js.org/)."
         }
       ]
     },
@@ -440,6 +431,10 @@
           "name": "iterations",
           "description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops."
         },
+        {
+          "name": "keyframes",
+          "description": "The keyframes to use for the animation. If this is set, `name` will be ignored."
+        },
         {
           "name": "name",
           "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
@@ -754,49 +749,161 @@
       ]
     },
     {
-      "name": "nano-checkbox",
+      "name": "nano-avatar",
       "description": {
         "kind": "markdown",
-        "value": "`nano-checkbox` is used to let a user choose one or more options from a limited number of options.\nThey appear as checked when activated.\nThey can be checked by mouse, keyboard, touch or programmatically by setting the checked property."
+        "value": "Avatars are used to represent a person or object."
       },
       "attributes": [
         {
-          "name": "checked",
-          "description": "checked property that can be used to get/set the value. accepts only boolean values"
+          "name": "initials",
+          "description": "Initials to use as when no image is available (1–2 characters max recommended)."
+        }
+      ]
+    },
+    {
+      "name": "nano-badge",
+      "description": {
+        "kind": "markdown",
+        "value": "Badges are used to draw attention and display statuses or counts."
+      },
+      "attributes": [
+        {
+          "name": "pulse",
+          "description": "Use pulse to draw attention to the badge with an animation"
         },
         {
-          "name": "color",
-          "description": "Color to use from your application's color palette.",
+          "name": "strength",
+          "description": "The strength / vibrancy of the theme. Defaults to `3`",
           "values": [
             {
-              "name": "danger"
+              "name": "1"
             },
             {
-              "name": "dark"
+              "name": "2"
             },
             {
-              "name": "light"
+              "name": "3"
             },
             {
-              "name": "medium"
+              "name": "4"
+            }
+          ]
+        },
+        {
+          "name": "theme",
+          "description": "The semantic theme of the button. Defaults to primary / brand blue",
+          "values": [
+            {
+              "name": "danger"
             },
             {
-              "name": "primary"
+              "name": "neutral"
             },
             {
-              "name": "secondary"
+              "name": "primary"
             },
             {
               "name": "success"
             },
             {
-              "name": "tertiary"
+              "name": "warning"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "nano-breadcrumb",
+      "description": {
+        "kind": "markdown",
+        "value": "Breadcrumbs are used to indicate the current page's location within a navigational hierarchy."
+      },
+      "attributes": [
+        {
+          "name": "breadcrumbs",
+          "description": "Array of breadcrumb items to render"
+        }
+      ]
+    },
+    {
+      "name": "nano-card",
+      "description": {
+        "kind": "markdown",
+        "value": "Cards are used to display content in a compact and organized way."
+      },
+      "attributes": [
+        {
+          "name": "layout",
+          "description": "The layout of the card. `landscape` only applies when the card is large enough. Defaults to portrait.",
+          "values": [
+            {
+              "name": "landscape"
             },
             {
-              "name": "warning"
+              "name": "portrait"
             }
           ]
         },
+        {
+          "name": "size",
+          "description": "Size of card's heading. Defaults to `large`. Has no baring on `variant=\"promo\"` cards",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "variant",
+          "description": "The variant of card. Changes the styling of the card and of nested elements",
+          "values": [
+            {
+              "name": "product"
+            },
+            {
+              "name": "promo"
+            },
+            {
+              "name": "promo-aero"
+            },
+            {
+              "name": "promo-grey"
+            },
+            {
+              "name": "promo-plain"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "nano-card-carousel",
+      "description": {
+        "kind": "markdown",
+        "value": "Showcase up to 6 pieces of content in a slide-show format."
+      },
+      "attributes": [
+        {
+          "name": "carousel-title",
+          "description": "The title of the carousel. Alternatively use the `slot=\"title\"` for more control over markup"
+        }
+      ]
+    },
+    {
+      "name": "nano-checkbox",
+      "description": {
+        "kind": "markdown",
+        "value": "Checkboxes are used to let a user choose one or more values from a limited number of options."
+      },
+      "attributes": [
+        {
+          "name": "checked",
+          "description": "checked property that can be used to get/set the value. accepts only boolean values"
+        },
         {
           "name": "disabled",
           "description": "If `true`, the user cannot interact with the checkbox."
@@ -805,6 +912,10 @@
           "name": "form",
           "description": "The form element to associate the input with (its form owner). Must be the id of a form."
         },
+        {
+          "name": "hide-label",
+          "description": "Visually hide the label - but make it accessible."
+        },
         {
           "name": "indeterminate",
           "description": "If `true`, the checkbox will visually appear as indeterminate (only relevant for type=\"checkbox\")"
@@ -838,9 +949,6 @@
             {
               "name": "segment"
             },
-            {
-              "name": "segment-pill"
-            },
             {
               "name": "switch"
             },
@@ -863,7 +971,7 @@
       "name": "nano-checkbox-group",
       "description": {
         "kind": "markdown",
-        "value": "`nano-checkbox-group` is an optional wrapper for all `nano-checkbox` controls.\nIt provides a convenient place to anchor a collective label and any validation issues."
+        "value": "Checkbox group is an optional wrapper for all checkbox controls.\nIt provides a convenient place to anchor labels and validation messages."
       },
       "attributes": [
         {
@@ -880,7 +988,7 @@
         },
         {
           "name": "legend",
-          "description": "A common label for children controls"
+          "description": "A collective label for children controls"
         },
         {
           "name": "max",
@@ -910,12 +1018,226 @@
           ]
         },
         {
-          "name": "validity-message",
-          "description": "Current validation message - if any."
+          "name": "validity-message",
+          "description": "Current validation message - if any."
+        },
+        {
+          "name": "value",
+          "description": "The current, collective checkbox value"
+        }
+      ]
+    },
+    {
+      "name": "nano-collapsible-comparison",
+      "description": {
+        "kind": "markdown",
+        "value": "Collapsible comparison allows users to compare two short lists of titles which can be expanded to reveal more detail about each item."
+      },
+      "attributes": [
+        {
+          "name": "open",
+          "description": "Controls whether the comparison is open or closed."
+        }
+      ]
+    },
+    {
+      "name": "nano-content-links",
+      "description": {
+        "kind": "markdown",
+        "value": "Content links are used to group multiple links together."
+      },
+      "attributes": []
+    },
+    {
+      "name": "nano-cta",
+      "description": {
+        "kind": "markdown",
+        "value": "CTAs (Call To Actions) invite the user to take action.\nThey are used to highlight important content and interactions and are often used in conjunction with other components like cards, modals, and forms."
+      },
+      "attributes": [
+        {
+          "name": "group",
+          "description": "Predefined styles when displaying a number of CTAs together",
+          "values": [
+            {
+              "name": "balanced"
+            },
+            {
+              "name": "stacked"
+            }
+          ]
+        },
+        {
+          "name": "icon",
+          "description": "A predefined icon to show. Defaults to no icon.\n*note* Will be overruled if a `<nano-icon />` or `<svg />` is detected",
+          "values": [
+            {
+              "name": "back"
+            },
+            {
+              "name": "down"
+            },
+            {
+              "name": "download"
+            },
+            {
+              "name": "false"
+            },
+            {
+              "name": "forward"
+            },
+            {
+              "name": "open"
+            },
+            {
+              "name": "up"
+            }
+          ]
+        },
+        {
+          "name": "loading",
+          "description": "Show a loading spinner",
+          "values": [
+            {
+              "name": "false"
+            },
+            {
+              "name": "true"
+            }
+          ]
+        },
+        {
+          "name": "secondary",
+          "description": "Turn on the secondary style. Every theme also has a secondary style"
+        },
+        {
+          "name": "size",
+          "description": "The size of the button. Defaults to large",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "theme",
+          "description": "The semantic theme of the button. Defaults to primary / brand blue",
+          "values": [
+            {
+              "name": "danger"
+            },
+            {
+              "name": "neutral"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "nano-data-table",
+      "description": {
+        "kind": "markdown",
+        "value": "Enables the search, filter and sort of tabular data."
+      },
+      "attributes": [
+        {
+          "name": "applied-filters",
+          "description": ""
+        },
+        {
+          "name": "blocks-length",
+          "description": "The number of total blocks currently rendered in the table."
+        },
+        {
+          "name": "caption",
+          "description": "A descriptive title of the table.\nYou must use this or the `slot=\"caption\"` for accessibility"
+        },
+        {
+          "name": "columns",
+          "description": "The column config used to present the rows of data"
+        },
+        {
+          "name": "custom-filter-fn",
+          "description": "A custom filtering function. Should return a promise.\nIf the promise resolves as `true` the column UI will be updated.\nIf the promise resolves as falsy, the sort will be performed by the component.\nA good use-case would be performing the filter on a server / via fetch.\nThen on success, updating the table's data via the `rows` property"
+        },
+        {
+          "name": "custom-renderer",
+          "description": "Function called whenever `col.cellTemplate` renders an unknown object.\nThe function should render a valid HTMLElement to the cell arg.\nExample usage - render JSX from a 3rd party lib and append the result to the cell element."
+        },
+        {
+          "name": "custom-sort-fn",
+          "description": "A custom sorting function. Should return a promise.\nIf the promise resolves as `true` the column UI will be updated.\nIf the promise resolves as falsey, the sort will be performed by the component.\nA good use-case would be performing the sort on a server / via fetch.\nThen on success, updating the table's data via the `rows` property"
+        },
+        {
+          "name": "default-sort",
+          "description": "The default sortable option for all columns.\n`true` will enable column sorting unless you set `sortable: false` on a column\n`false` will disable column sorting unless you set `sortable: true` on a column"
+        },
+        {
+          "name": "foot-render",
+          "description": "Used for custom tfoot row rendering"
+        },
+        {
+          "name": "head-render",
+          "description": "Used for custom thead row rendering"
+        },
+        {
+          "name": "loading",
+          "description": "Will show a loading state when set to true.\nBy default, will be shown automatically if `rows` is a promise waiting to resolve / or falsy\n*or* when performing custom filtering or sorting.\n*Note* when set manually, will overwrite any internal loading state.\nSet to 'undefined' to revert to default behaviour."
+        },
+        {
+          "name": "per-block",
+          "description": "To improve performance, data is split into blocks\nwhich are shown / hidden and rendered as they become visible.\nUse this to control the number of hits within a block -\nA block should fill a scrolling viewport.\nThe less perBlock the better for performance"
+        },
+        {
+          "name": "placeholder-size",
+          "description": "When loading rows asynchronously render this number of placeholder rows"
+        },
+        {
+          "name": "row-render",
+          "description": "Used for custom row rendering"
+        },
+        {
+          "name": "rows",
+          "description": "The data to place in the table"
+        },
+        {
+          "name": "scrollable",
+          "description": "If true, will render any nested table in a scrollable container (using `overflow: auto`)"
+        },
+        {
+          "name": "search-term",
+          "description": "Term to search for in the data"
+        },
+        {
+          "name": "show-caption",
+          "description": "Show the caption on-screen"
         },
         {
-          "name": "value",
-          "description": "The current, collective checkbox value"
+          "name": "show-footer",
+          "description": "Whether to show a `<tfoot>` component"
+        },
+        {
+          "name": "show-paginate-spinner",
+          "description": "If true, will show a spinner at the bottom of the table when loading"
+        },
+        {
+          "name": "virtual-total-items",
+          "description": "Use this to render the table with roughly the correct dimensions.\na use-case might be; fetch a small initial dataset to minimise load-time,\nrender the table with the correct dimensions, the table becomes interactive,\nload the rest of the data"
         }
       ]
     },
@@ -923,9 +1245,13 @@
       "name": "nano-datalist",
       "description": {
         "kind": "markdown",
-        "value": "`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"
+        "value": "Represents a permissible or recommended list of options available to choose from within other controls."
       },
       "attributes": [
+        {
+          "name": "active-options",
+          "description": "return all the active options currently within the datalist. Can be useful for validation"
+        },
         {
           "name": "disable-filter",
           "description": "Use this option to disable to default filtering. This is useful if filtering happens\nexternally via another method (e.g. via ajax)"
@@ -934,6 +1260,10 @@
           "name": "disabled",
           "description": "Activate / deactivate the datalist control"
         },
+        {
+          "name": "drop-down-config",
+          "description": "nano-dropdown config options you can pass to the nested dropdown component"
+        },
         {
           "name": "input",
           "description": "A selector to a HTMLInputElement"
@@ -942,6 +1272,14 @@
           "name": "open",
           "description": "Force datalist open"
         },
+        {
+          "name": "options",
+          "description": "Provide an option list.\nOptions can be defined declaratively by nesting `<nano-option>` elements or imperatively using this prop"
+        },
+        {
+          "name": "selected",
+          "description": "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."
+        },
         {
           "name": "type",
           "description": "Tweaks the datalist behaviour and linked control semantics and behaviour.\ne.g. 'select' will make the linked input control `readonly`.",
@@ -950,10 +1288,10 @@
               "name": "input"
             },
             {
-              "name": "selctMulti"
+              "name": "select"
             },
             {
-              "name": "select"
+              "name": "selectMulti"
             }
           ]
         }
@@ -963,7 +1301,7 @@
       "name": "nano-date-input",
       "description": {
         "kind": "markdown",
-        "value": "The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field. It has specific options for localisation, date formatting and validation."
+        "value": "The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field.\nIt has specific options for localisation, date formatting and validation."
       },
       "attributes": [
         {
@@ -971,7 +1309,7 @@
           "description": "This Boolean attribute lets you specify that a form control should have input focus when the page loads."
         },
         {
-          "name": "clear-input",
+          "name": "clearable",
           "description": "If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input."
         },
         {
@@ -986,26 +1324,14 @@
               "name": "danger"
             },
             {
-              "name": "dark"
-            },
-            {
-              "name": "light"
-            },
-            {
-              "name": "medium"
+              "name": "neutral"
             },
             {
               "name": "primary"
             },
-            {
-              "name": "secondary"
-            },
             {
               "name": "success"
             },
-            {
-              "name": "tertiary"
-            },
             {
               "name": "warning"
             }
@@ -1029,10 +1355,18 @@
             }
           ]
         },
+        {
+          "name": "date-value",
+          "description": ""
+        },
         {
           "name": "disabled",
           "description": "If `true`, the user cannot interact with the input."
         },
+        {
+          "name": "drop-down-config",
+          "description": "nano-dropdown config options you can pass to the nested dropdown component"
+        },
         {
           "name": "first-day-of-week",
           "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday."
@@ -1049,22 +1383,34 @@
           "name": "helper-text",
           "description": "Whether to show a long form, confirmation date string of the one currently entered"
         },
+        {
+          "name": "helper-text-format",
+          "description": "Options for the date string display. Refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString."
+        },
         {
           "name": "hide-label",
           "description": "Visually hide the label - but make it accessible."
         },
         {
           "name": "initial-picker-date",
-          "description": "Initial picker date. Will be to `value` if set. Will be today's date if nothing set.\nMust be in IS0-8601 format: YYYY-MM-DD."
+          "description": "Initial picker date. Defaults to `value` if set and today's date if not.\nMust be in IS0-8601 format: YYYY-MM-DD."
         },
         {
           "name": "invalid",
           "description": "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."
         },
+        {
+          "name": "is-date-disabled",
+          "description": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends."
+        },
         {
           "name": "label",
           "description": "String to place within a label element. Alternatively you may use a label slot."
         },
+        {
+          "name": "localization",
+          "description": "Button labels, day names, month names, etc, used for localization.\nDefault is English."
+        },
         {
           "name": "max",
           "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property."
@@ -1134,49 +1480,24 @@
       "name": "nano-date-picker",
       "description": {
         "kind": "markdown",
-        "value": "A highly performant, small and accessible date-picker.\nCustomised from [Duet date-picker](https://duetds.github.io/date-picker/)."
+        "value": "Enables the selection of a date from a calendar view."
       },
       "attributes": [
         {
-          "name": "color",
-          "description": "The color to use from the application's color palette.",
-          "values": [
-            {
-              "name": "danger"
-            },
-            {
-              "name": "dark"
-            },
-            {
-              "name": "light"
-            },
-            {
-              "name": "medium"
-            },
-            {
-              "name": "primary"
-            },
-            {
-              "name": "secondary"
-            },
-            {
-              "name": "success"
-            },
-            {
-              "name": "tertiary"
-            },
-            {
-              "name": "warning"
-            }
-          ]
+          "name": "first-day-of-week",
+          "description": "Which day is considered first day of the week. `0` for Sunday, `1` for Monday, etc.\nDefault is Monday."
         },
         {
-          "name": "first-day-of-week",
-          "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday."
+          "name": "is-date-disabled",
+          "description": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends."
         },
         {
           "name": "is-modal",
-          "description": "Controls whether the picker is a modal or dialog,\npopup control and will therefore keep focus within the control"
+          "description": "Controls whether the picker is within a modal control and will therefore keep focus within the control"
+        },
+        {
+          "name": "localization",
+          "description": "Button labels, day names, month names, etc, used for localization.\nDefault is English."
         },
         {
           "name": "max",
@@ -1196,32 +1517,35 @@
       "name": "nano-details",
       "description": {
         "kind": "markdown",
-        "value": "A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](/story/nano-components-accordion--accordion) element to add 'one item open at a time' support."
+        "value": "Details show a brief summary and on interaction expand to show additional content."
       },
       "attributes": [
         {
           "name": "disabled",
           "description": "Disables the details so it can't be toggled."
         },
-        {
-          "name": "icon-rotation",
-          "description": "Icon slot rotation amount (degrees) on open"
-        },
         {
           "name": "label",
           "description": "Summary / handle text. Use the `label` slot for HTML markup"
         },
-        {
-          "name": "no-handle",
-          "description": "Hide the handle. (You will need to control the hiding / showing of content with script)"
-        },
         {
           "name": "open",
           "description": "Should item be open on load"
         },
         {
-          "name": "use-cache-height",
-          "description": "Sometimes, nested content will resize within the details component which results in choppy show/hide animations.\nSet `useCacheHeight` to `true` try to keep animations smooth."
+          "name": "size",
+          "description": "The size of the details. Primarily controls the trigger element and overall padding.",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "small"
+            }
+          ]
         }
       ]
     },
@@ -1240,10 +1564,6 @@
           "name": "label",
           "description": "The dialog's label as displayed in the header. You should always include a relevant\nlabel even when using `no-header`, as it is required for proper accessibility."
         },
-        {
-          "name": "no-footer",
-          "description": "Set to true to disable the footer. This will also remove the footer close button,\nso please ensure you  provide an easy, accessible way for users to dismiss the dialog."
-        },
         {
           "name": "no-header",
           "description": "Set to true to disable the header. This will also remove the default close button,\nso please ensure you  provide an easy, accessible way for users to dismiss the dialog."
@@ -1339,6 +1659,10 @@
             }
           ]
         },
+        {
+          "name": "resizable",
+          "description": "Makes the drawer resizable"
+        },
         {
           "name": "store-id",
           "description": "Store search queries (against this ID) to the component store. Use in conjunction with storeMethod"
@@ -1373,7 +1697,7 @@
       "name": "nano-dropdown",
       "description": {
         "kind": "markdown",
-        "value": "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`)."
+        "value": "Dropdowns expose additional content that “drops down” in a panel."
       },
       "attributes": [
         {
@@ -1384,6 +1708,10 @@
           "name": "close-on-select",
           "description": "Determines whether the dropdown should hide when a menu item is selected."
         },
+        {
+          "name": "containing-element",
+          "description": "The dropdown will close when the user interacts outside of this element (e.g. clicking)."
+        },
         {
           "name": "dialog-title",
           "description": "Title used to describe the dropdown content for accessibility"
@@ -1457,6 +1785,10 @@
         {
           "name": "skidding",
           "description": "The distance in pixels from which to offset the panel along its trigger."
+        },
+        {
+          "name": "tether-to",
+          "description": "If you don't want to use the trigger slot, you can use this to 'tether' the dropdown to another element.\nAnd you will still need to control when the component is opened (using show() / hide() or the `open` prop)"
         }
       ]
     },
@@ -1464,7 +1796,7 @@
       "name": "nano-field-validator",
       "description": {
         "kind": "markdown",
-        "value": "A toolbox for `nano-...` form fields and form validation.\n- Easy to add validation across field dependencies - e.g. \"When Field1 contains '123' Field2 must contain '456'\"\n- Easy access to whole form and individual field validity states\n- Easy access to form data payload\n= Access to 2-way, data bound reactive store\n- Scroll to invalid field on submit"
+        "value": "A toolbox to expose a form's data model and validation state"
       },
       "attributes": [
         {
@@ -1475,6 +1807,10 @@
           "name": "extra-field-selector",
           "description": "By default, `nano-field-validator` will also track all native form field elements.\nYou can add extra web-component form fields to listen to\n(as long as they match the standard form field spec) by using the `fieldSelector` prop."
         },
+        {
+          "name": "payload",
+          "description": "The current form payload as a reactive proxy."
+        },
         {
           "name": "scroll-to-invalid",
           "description": "Tries to scroll to the first invalid field on submit"
@@ -1483,6 +1819,10 @@
           "name": "show-validation",
           "description": "Returns true if validation errors will be displayed to the user."
         },
+        {
+          "name": "store",
+          "description": "The current form state as a stencil store."
+        },
         {
           "name": "valid",
           "description": "Returns true if all the nested fields are currently valid"
@@ -1501,6 +1841,14 @@
               "name": "submitThenDirty"
             }
           ]
+        },
+        {
+          "name": "validation",
+          "description": "A validation callback method."
+        },
+        {
+          "name": "validation-state",
+          "description": "Get the current validation state of all form fields."
         }
       ]
     },
@@ -1535,6 +1883,10 @@
           "name": "disabled",
           "description": "If `true`, the user cannot interact with the select."
         },
+        {
+          "name": "files",
+          "description": "A File array that lists every selected file.\nHas an added `objectURL` property returning a `DOMString`\ncontaining an object URL that can be used to reference the contents of the specified source\nThis list has no more than one member unless the multiple attribute is specified"
+        },
         {
           "name": "form",
           "description": "The form element to associate with this input (its form owner). Must be the id of a form."
@@ -1600,11 +1952,19 @@
         }
       ]
     },
+    {
+      "name": "nano-footer",
+      "description": {
+        "kind": "markdown",
+        "value": "The footer is used to provide navigation, copyright info and links to social media platforms."
+      },
+      "attributes": []
+    },
     {
       "name": "nano-global-nav",
       "description": {
         "kind": "markdown",
-        "value": "Nanopore digital global navigation and search bar.\nIncorporates MyAccount / SSO states (messages / cart / user name etc).\nIncorporates Algolia search."
+        "value": "The Global nav component standardises navigation within and across web applications."
       },
       "attributes": [
         {
@@ -1616,31 +1976,21 @@
           "description": "Url to the Nanopore store cart. Will default to the url supplied by MyAccount"
         },
         {
-          "name": "env",
-          "description": "Connect to local, dev, test or prod MyAccount\nenvironments to retrieve global nav / sso data.\nAlternatively, you can use the `ssoDataUrl` prop.",
-          "values": [
-            {
-              "name": "dev"
-            },
-            {
-              "name": "local"
-            },
-            {
-              "name": "prod"
-            },
-            {
-              "name": "test"
-            }
-          ]
+          "name": "contact-url",
+          "description": "Url to the Nanopore contact page"
         },
         {
-          "name": "get-my-account-data",
-          "description": "Whether to attempt to get global nav / sso data from MyAccount"
+          "name": "login-url",
+          "description": "Url to the Nanopore login page. Will default to the url supplied by MyAccount"
         },
         {
           "name": "logo-url",
           "description": "The link to put on the logo"
         },
+        {
+          "name": "logout-url",
+          "description": "Url to the Nanopore login page. Will default to the url supplied by MyAccount"
+        },
         {
           "name": "msg-count",
           "description": "MyAccount un-read message count."
@@ -1650,49 +2000,28 @@
           "description": "Url to the Nanopore message center. Will default to the url supplied by MyAccount"
         },
         {
-          "name": "search-api-key",
-          "description": "An Algolia API Key. Will be automatically populated from MyAccount"
+          "name": "my-account-data",
+          "description": "MyAccount data automatically set via `myAccountUrl`.\nAlternatively you can directly provide a JSON object which is useful for SSR\n(ref https://myaccount.nanoporetech.com/nav_bar_data.json)"
         },
         {
-          "name": "search-app-id",
-          "description": "An Algolia App ID key. Will be automatically populated from MyAccount"
+          "name": "my-account-url",
+          "description": "A base url to retrieve global nav / sso data. `nav_bar_data.json` will be appended to this url"
         },
         {
-          "name": "search-index",
-          "description": "Algolia search index to programmatically set or to set an initial index"
-        },
-        {
-          "name": "search-value",
-          "description": "A search value to passed to Algolia to programmatically get or to preload search results"
+          "name": "my-account-user",
+          "description": "Logged in user details automatically populated from MyAccount"
         },
         {
-          "name": "show-logo",
-          "description": "Whether to show Nanopore logo"
-        },
-        {
-          "name": "show-search",
-          "description": "Whether to show search functionality"
+          "name": "search-index",
+          "description": "Algolia search index to search within"
         },
         {
-          "name": "sso-data-url",
-          "description": "A base url to retrieve global nav / sso data.\n`nav_bar_data.json` will be appended to this url.\nAn alternative to the pre-defined `env` urls"
+          "name": "search-value",
+          "description": "A search string used to load and show autocomplete results"
         },
         {
-          "name": "sso-redirect",
-          "description": "Where to take user after SSO login"
-        }
-      ]
-    },
-    {
-      "name": "nano-global-nav-user-profile",
-      "description": {
-        "kind": "markdown",
-        "value": "Nanopore digital global navigation user profile."
-      },
-      "attributes": [
-        {
-          "name": "user-profile-url",
-          "description": "Link to the user profile"
+          "name": "session-redirect",
+          "description": "A url to take the user after login / logout. Defaults to current URL. Is automatically URI encoded"
         }
       ]
     },
@@ -1708,7 +2037,7 @@
       "name": "nano-grid",
       "description": {
         "kind": "markdown",
-        "value": "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"
+        "value": "A context-aware CSS grid implementation."
       },
       "attributes": [
         {
@@ -1830,7 +2159,7 @@
       "name": "nano-icon",
       "description": {
         "kind": "markdown",
-        "value": "An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path).\nLazily loads SVG for each icon, so will only request the icons that you're using and that are visible."
+        "value": "An SVG loader / helper. Comes bundled with font-awesome pro icons & ONT pictogram and device icons.\nLazily loads SVG as icons become visible."
       },
       "attributes": [
         {
@@ -1839,40 +2168,19 @@
         },
         {
           "name": "color",
-          "description": "Color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.",
+          "description": "Specifies the color of the icon. If not specified, the icon will inherit the color of the parent element.",
           "values": [
             {
-              "name": "danger"
-            },
-            {
-              "name": "dark"
-            },
-            {
-              "name": "light"
-            },
-            {
-              "name": "medium"
+              "name": "neutral"
             },
             {
               "name": "primary"
-            },
-            {
-              "name": "secondary"
-            },
-            {
-              "name": "success"
-            },
-            {
-              "name": "tertiary"
-            },
-            {
-              "name": "warning"
             }
           ]
         },
         {
           "name": "flip-rtl",
-          "description": "Specifies whether the icon should horizontally flip when `dir` is `\"rtl\"`."
+          "description": "Specifies whether the icon should horizontally flip when `dir` is `\"rtl\"`.\nBy default, when an 'arrow' or 'chevron' icon is used, it will flip automatically when detecting `dir=\"rtl\"` on the document or closest ancestor."
         },
         {
           "name": "icon",
@@ -1892,13 +2200,22 @@
         },
         {
           "name": "size",
-          "description": "The size of the icon.\nAvailable options are: `\"small\"` and `\"large\"`.",
+          "description": "The size of the icon. `auto` automatically sizes according to the font-size of the parent element.\n*Note*: size will be different on 'pictogram' and 'device' vs 'font awesome' icons.",
           "values": [
+            {
+              "name": "auto"
+            },
             {
               "name": "large"
             },
+            {
+              "name": "regular"
+            },
             {
               "name": "small"
+            },
+            {
+              "name": "xl"
             }
           ]
         },
@@ -1912,7 +2229,7 @@
       "name": "nano-icon-button",
       "description": {
         "kind": "markdown",
-        "value": "Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars."
+        "value": "Simple icon-only buttons designed to be used for actions and in toolbars."
       },
       "attributes": [
         {
@@ -1976,6 +2293,39 @@
         }
       ]
     },
+    {
+      "name": "nano-icon-item",
+      "description": {
+        "kind": "markdown",
+        "value": "Icon Items are a standard way of displaying a Pictogram or Device Icon with some concise text."
+      },
+      "attributes": [
+        {
+          "name": "layout",
+          "description": "The layout of the icon items. Defaults to portrait.",
+          "values": [
+            {
+              "name": "landscape"
+            },
+            {
+              "name": "portrait"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "The size of the icon. Defaults to regular",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "regular"
+            }
+          ]
+        }
+      ]
+    },
     {
       "name": "nano-img",
       "description": {
@@ -2017,17 +2367,38 @@
         }
       ]
     },
+    {
+      "name": "nano-in-page-nav",
+      "description": {
+        "kind": "markdown",
+        "value": "\\\nIn-page navigation allows users to quickly find different sections on a page."
+      },
+      "attributes": [
+        {
+          "name": "breakpoint",
+          "description": "The breakpoint (in px) at which the nav will switch from large to small screen styles. Defaults to 767"
+        },
+        {
+          "name": "sticky-headers",
+          "description": "Whether the headers should be sticky (small screen only). Defaults to true"
+        }
+      ]
+    },
     {
       "name": "nano-input",
       "description": {
         "kind": "markdown",
-        "value": "The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input).\n\nIt is meant for text type inputs only, such as \"text\", \"password\", \"email\", \"number\", \"search\", \"tel\", and \"url\". It supports all standard text input events including keyup, keydown, keypress, and more.\nThe default styling reference comes from the [ONT styleguide](https://nanoporetech.zeroheight.com/styleguide/s/31282/p/230c74-text-input--textarea/b/942ee4)"
+        "value": "Inputs collect text data from the user."
       },
       "attributes": [
         {
           "name": "accept",
           "description": "If the value of the type attribute is `\"file\"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers."
         },
+        {
+          "name": "always-show-placeholder",
+          "description": "Sometimes it can be helpful to always show the placeholder, even when the input has a value.\nFor example a postcode field could have a placeholder `e.g. LD1 1AA` which is helpful to show."
+        },
         {
           "name": "autocapitalise",
           "description": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.",
@@ -2074,46 +2445,17 @@
           "name": "autofocus",
           "description": "This Boolean attribute lets you specify that a form control should have input focus when the page loads."
         },
-        {
-          "name": "clear-input",
-          "description": "If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input."
-        },
-        {
-          "name": "clear-on-edit",
-          "description": "If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types."
-        },
-        {
-          "name": "color",
-          "description": "The color to use from the application's color palette.",
-          "values": [
-            {
-              "name": "danger"
-            },
-            {
-              "name": "dark"
-            },
-            {
-              "name": "light"
-            },
-            {
-              "name": "medium"
-            },
-            {
-              "name": "primary"
-            },
-            {
-              "name": "secondary"
-            },
-            {
-              "name": "success"
-            },
-            {
-              "name": "tertiary"
-            },
-            {
-              "name": "warning"
-            }
-          ]
+        {
+          "name": "clear-on-edit",
+          "description": "If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types."
+        },
+        {
+          "name": "clearable",
+          "description": "If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input."
+        },
+        {
+          "name": "close-after-picked",
+          "description": "relevant to `type=\"date\"`. If `true`, the input will close after a date is picked."
         },
         {
           "name": "debounce",
@@ -2135,6 +2477,10 @@
           "name": "hide-label",
           "description": "Visually hide the label - but make it accessible."
         },
+        {
+          "name": "initial-picker-date",
+          "description": "relevant to `type=\"date\"`. Initial picker date. Defaults to `value` if set and today's date if not.\nMust be in IS0-8601 format: YYYY-MM-DD."
+        },
         {
           "name": "inputmode",
           "description": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
@@ -2169,6 +2515,10 @@
           "name": "invalid",
           "description": "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."
         },
+        {
+          "name": "is-date-disabled",
+          "description": "relevant to `type=\"date\"`. Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends."
+        },
         {
           "name": "label",
           "description": "String to place within a label element. Alternatively you may use a label slot."
@@ -2201,6 +2551,10 @@
           "name": "pattern",
           "description": "A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored."
         },
+        {
+          "name": "picker-options",
+          "description": "relevant to `type=\"date\"`. Other options to pass to the date picker.\nSee the `nano-date-picker` docs for more information."
+        },
         {
           "name": "placeholder",
           "description": "Instructional text that shows before the input has a value."
@@ -2211,11 +2565,11 @@
         },
         {
           "name": "required",
-          "description": "If `true`, the user must fill in a value before submitting a form."
+          "description": "If `true`, the user must fill in a value before submitting a form.\nBy default, setting this will also add an asterisk to the label.\nYou can disable this by using the `label` slot instead."
         },
         {
           "name": "resize",
-          "description": "relevant to type=\"textarea\". Vertical resizing - enable / disable or make automatic.",
+          "description": "relevant to `type=\"textarea\"`. Vertical resizing - enable / disable or make automatic.",
           "values": [
             {
               "name": "auto"
@@ -2230,16 +2584,20 @@
         },
         {
           "name": "rows",
-          "description": "relevant to type=\"textarea\". Default number of rows to show"
+          "description": "relevant to `type=\"textarea\"`. Default number of rows to show"
         },
         {
           "name": "show-char-count",
-          "description": "relevant to type=\"textarea\"."
+          "description": "Whether to show a character count / remaining count when using the `maxlength` attribute."
         },
         {
           "name": "show-inline-error",
           "description": "Whether to show validation errors underneath input"
         },
+        {
+          "name": "show-picker",
+          "description": "relevant to `type=\"date\"`. Whether to show a date picker.\nDate pickers are not very useful if the potential input is too far in the distance or past e.g. Birthdays"
+        },
         {
           "name": "size",
           "description": "The initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored."
@@ -2310,6 +2668,14 @@
         {
           "name": "value",
           "description": "The value of the input."
+        },
+        {
+          "name": "value-as-date",
+          "description": "Represents the current value of the input as a Date, or null if conversion is not possible"
+        },
+        {
+          "name": "value-as-number",
+          "description": "Represents the value of the input or NaN if numeric conversion is impossible"
         }
       ]
     },
@@ -2317,28 +2683,69 @@
       "name": "nano-intersection-observe",
       "description": {
         "kind": "markdown",
-        "value": "A thin, declarative interface to the IntersectionObserver API."
+        "value": "A thin, declarative interface to the [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver)."
       },
       "attributes": [
         {
           "name": "root",
-          "description": "The element that is used as the viewport for checking visibility of the target. Must be an ancestor of the target.\nDefaults to an automatic check for ancestors that `overflow: auto` or otherwise the `Document`.",
+          "description": "The element that is used as the viewport for checking visibility of the target. Must be an ancestor of the target.\nDefaults to an automatic check for ancestors that `overflow: auto` or otherwise the `Document`."
+        },
+        {
+          "name": "root-margin",
+          "description": "Margin around the root. Can be similar to CSS margins property, e.g. \"10px 20px 30px 40px\" (top, right, bottom, left).\nThe values can be percentages. This set of values serves to grow or shrink each side of the root element's\nbounding box before computing intersections. Defaults to zeros."
+        },
+        {
+          "name": "threshold",
+          "description": "Indicate at what percentage of the target's visibility the observer's callback should be executed.\nIf you only want to detect when visibility passes the 50% mark, you can use a value of '0.5'.\nIf you want the callback to run every time visibility passes another '25%',\nyou would specify a string of values (separated by ',') array '0, 0.25, 0.5, 0.75, 1'.\nA value of '1.0' means that the threshold isn't considered passed until every pixel is visible."
+        }
+      ]
+    },
+    {
+      "name": "nano-masked-overflow",
+      "description": {
+        "kind": "markdown",
+        "value": "`masked-overflow` provides a responsive overflow container for any set of elements that might not fit on smaller screens or containers: it accepts any children,\nautomatically scrolls to the active item on load, and masks additional content using subtle fade effects, plus scroll buttons to cue users that there’s more content off-screen."
+      },
+      "attributes": [
+        {
+          "name": "active-handler",
+          "description": "A function called when an item becomes 'active' (via click or keyboard)"
+        },
+        {
+          "name": "hide-scrollbars",
+          "description": "Show or hide the browser's default scrollbars. Defaults to `true` on vertical orientation and `false` on `horizontal` orientation"
+        },
+        {
+          "name": "inactive-handler",
+          "description": "A function called when an item becomes 'inactive'\n(because another item was made active)"
+        },
+        {
+          "name": "is-active-handler",
+          "description": "A function called to assess an initial, active item"
+        },
+        {
+          "name": "label",
+          "description": "Used to appropriately label the scrolling element for screen-readers"
+        },
+        {
+          "name": "orientation",
+          "description": "The flex direction of the element",
           "values": [
             {
-              "name": "auto"
+              "name": "horizontal"
             },
             {
-              "name": "root"
+              "name": "vertical"
             }
           ]
         },
         {
-          "name": "root-margin",
-          "description": "Margin around the root. Can be similar to CSS margins property, e.g. \"10px 20px 30px 40px\" (top, right, bottom, left).\nThe values can be percentages. This set of values serves to grow or shrink each side of the root element's\nbounding box before computing intersections. Defaults to zeros."
+          "name": "scroll-controls",
+          "description": "Disables the scroll arrow buttons that appear when content overflows"
         },
         {
-          "name": "threshold",
-          "description": "Indicate at what percentage of the target's visibility the observer's callback should be executed.\nIf you only want to detect when visibility passes the 50% mark, you can use a value of '0.5'.\nIf you want the callback to run every time visibility passes another '25%',\nyou would specify a string of values (separated by ',') array '0, 0.25, 0.5, 0.75, 1'.\nA value of '1.0' means that the threshold isn't considered passed until every pixel is visible."
+          "name": "show-indicator",
+          "description": "Shows a track and a highlight line that automatically moves the currently active item."
         }
       ]
     },
@@ -2346,7 +2753,7 @@
       "name": "nano-menu",
       "description": {
         "kind": "markdown",
-        "value": "Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.\nManages focus state / active."
+        "value": "Menus provide a list of options for the user to choose from."
       },
       "attributes": [
         {
@@ -2359,13 +2766,16 @@
         },
         {
           "name": "type",
-          "description": "changes the role of the underlying control - sometimes required for semantics",
+          "description": "changes the role of the underlying control (required for accessibility semantics).\nBy default this will be set via the frequency of element type (e.g. `<button>` vs `<a>`)",
           "values": [
             {
               "name": "listbox"
             },
             {
               "name": "menu"
+            },
+            {
+              "name": "nav"
             }
           ]
         }
@@ -2425,9 +2835,13 @@
       "name": "nano-nav-item",
       "description": {
         "kind": "markdown",
-        "value": "Nav items to be used with the various nav items.\n[Globla-Nav](/story/compounds-global-nav)\n[Menu-Drawer](/story/components-menu-drawer)\n[Dropdown](/story/components-dropdown)"
+        "value": "Nav items provide options or links for the user to pick from a menu or navigation bar."
       },
       "attributes": [
+        {
+          "name": "checkbox",
+          "description": "Changes behaviour so automatically becomes `selected` onClick"
+        },
         {
           "name": "close-on-blur",
           "description": "Whether secondary menus should close on blur"
@@ -2438,7 +2852,7 @@
         },
         {
           "name": "href",
-          "description": "Href to link to"
+          "description": "Href to link to. Alternatively, slot an `<a>` element"
         },
         {
           "name": "notification",
@@ -2448,10 +2862,6 @@
           "name": "open",
           "description": "Whether a secondary menu should be or is currently open"
         },
-        {
-          "name": "secondary-active-width",
-          "description": "Screen pixel width to activate the secondary menu"
-        },
         {
           "name": "selected",
           "description": "Whether this menu item is currently 'selected'"
@@ -2491,6 +2901,10 @@
           "name": "filter-meta",
           "description": "You can add extra meta for this option. When displayed in a list, users\nsearch / filter via extra related terms. Another usecase is 'endonyms'"
         },
+        {
+          "name": "href",
+          "description": "Setting an href will render an `<a>` element"
+        },
         {
           "name": "label",
           "description": "Label of the option"
@@ -2505,36 +2919,11 @@
         }
       ]
     },
-    {
-      "name": "nano-overflow-nav",
-      "description": {
-        "kind": "markdown",
-        "value": "Primarily used to display navigational items that may not fit on smaller screens.\n\n- Accepts any collection of elements\n- Gives visual cues of 'more' with auto display fade effect and scroll buttons\n- Auto scrolls to the active item onload"
-      },
-      "attributes": [
-        {
-          "name": "orientation",
-          "description": "The flex direction of the element",
-          "values": [
-            {
-              "name": "horizontal"
-            },
-            {
-              "name": "vertical"
-            }
-          ]
-        },
-        {
-          "name": "scroll-controls",
-          "description": "Disables the scroll arrow buttons that appear when content overflows"
-        }
-      ]
-    },
     {
       "name": "nano-progress-bar",
       "description": {
         "kind": "markdown",
-        "value": "Used to show the status of an ongoing operation."
+        "value": "Shows the status of an ongoing operation."
       },
       "attributes": [
         {
@@ -2555,7 +2944,7 @@
       "name": "nano-range",
       "description": {
         "kind": "markdown",
-        "value": "The Range slider lets users select from a range of values by moving\nthe slider knob. It can accept dual knobs, but by default one knob controls the value of the range.\n\nLabels can be placed on either side of the range by adding the\n`slot=\"start\"` or `slot=\"end\"` to the element."
+        "value": "Ranges allow the user to select a value within a given range using a slider."
       },
       "attributes": [
         {
@@ -2566,26 +2955,14 @@
               "name": "danger"
             },
             {
-              "name": "dark"
-            },
-            {
-              "name": "light"
-            },
-            {
-              "name": "medium"
+              "name": "neutral"
             },
             {
               "name": "primary"
             },
-            {
-              "name": "secondary"
-            },
             {
               "name": "success"
             },
-            {
-              "name": "tertiary"
-            },
             {
               "name": "warning"
             }
@@ -2664,6 +3041,10 @@
           "name": "readonly",
           "description": "Makes the rating readonly."
         },
+        {
+          "name": "symbol",
+          "description": "A function that returns the symbols to display.\nAllows for more granular control than `symbol-name`.\nAccepts an option `value` parameter you can use to map a specific symbol to a value."
+        },
         {
           "name": "symbol-name",
           "description": "The name of the control, which is submitted with the form data."
@@ -2678,7 +3059,7 @@
       "name": "nano-resize-observe",
       "description": {
         "kind": "markdown",
-        "value": "A Resize-Observer utility component.\nTakes a string list of sizes and optional class-names.\nAdds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\nAdditionally, can fire events when content no-longer fits within the element."
+        "value": "A thin, declarative interface to the [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)."
       },
       "attributes": [
         {
@@ -2706,7 +3087,7 @@
       "name": "nano-select",
       "description": {
         "kind": "markdown",
-        "value": "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."
+        "value": "Selects allow users to choose items from a menu of options."
       },
       "attributes": [
         {
@@ -2718,42 +3099,9 @@
           "description": "This Boolean attribute lets you specify that a form control should have select focus when the page loads."
         },
         {
-          "name": "clear-select",
+          "name": "clearable",
           "description": "If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select."
         },
-        {
-          "name": "color",
-          "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.",
-          "values": [
-            {
-              "name": "danger"
-            },
-            {
-              "name": "dark"
-            },
-            {
-              "name": "light"
-            },
-            {
-              "name": "medium"
-            },
-            {
-              "name": "primary"
-            },
-            {
-              "name": "secondary"
-            },
-            {
-              "name": "success"
-            },
-            {
-              "name": "tertiary"
-            },
-            {
-              "name": "warning"
-            }
-          ]
-        },
         {
           "name": "debounce",
           "description": "Set the amount of time, in milliseconds, to wait to trigger the `nanoSearchChange` event after each keystroke."
@@ -2762,6 +3110,10 @@
           "name": "disabled",
           "description": "If `true`, the user cannot interact with the select."
         },
+        {
+          "name": "drop-down-config",
+          "description": "nano-dropdown config options you can pass to the nested dropdown component"
+        },
         {
           "name": "float-label",
           "description": "Enable floating label behaviour. Will disable placeholder if set."
@@ -2780,7 +3132,7 @@
         },
         {
           "name": "label",
-          "description": "String to place within a label element. Alternatively use the 'label' slot"
+          "description": "String to place within a label element. Alternatively you may use a label slot."
         },
         {
           "name": "mask",
@@ -2806,6 +3158,10 @@
           "name": "name",
           "description": "The name of the control, which is submitted with the form data."
         },
+        {
+          "name": "options",
+          "description": "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"
+        },
         {
           "name": "placeholder",
           "description": "Instructional text that shows before the select has a value. Text set here will be placed inside the label when a value is set.\nIf you don't want this behaviour just set the first option to have no value."
@@ -2816,7 +3172,7 @@
         },
         {
           "name": "required",
-          "description": "If `true`, the user must fill in a value before submitting a form."
+          "description": "If `true`, the user must fill in a value before submitting a form.\nBy default, setting this will also add an asterisk to the label.\nYou can disable this by using the `label` slot instead."
         },
         {
           "name": "show-inline-error",
@@ -2848,6 +3204,10 @@
         {
           "name": "value",
           "description": "The value of the select."
+        },
+        {
+          "name": "value-tag-template",
+          "description": "A function that customizes the tag value to be rendered when `multiple=\"true\"`."
         }
       ]
     },
@@ -2855,7 +3215,7 @@
       "name": "nano-skeleton",
       "description": {
         "kind": "markdown",
-        "value": "Skeletons are used to show where content will eventually be drawn.\nSimple containers for scaffolding layouts that mimic what users will see when content has finished loading.\nPrevents large areas of empty space during asynchronous operations."
+        "value": "Skeletons are used to show where content will eventually be drawn."
       },
       "attributes": [
         {
@@ -2881,7 +3241,7 @@
       "name": "nano-slides",
       "description": {
         "kind": "markdown",
-        "value": "The Slides component is a multi-section container. Each section can be swiped or dragged between.\nIt contains any number of Slide components.\n\nUses [Flickity](https://flickity.metafizzy.co/) under the hood."
+        "value": "A toolbox for creating carousel or slide-show widgets, allowing users to navigate through a collection of items one at a time."
       },
       "attributes": [
         {
@@ -2919,6 +3279,10 @@
           "name": "navbtns",
           "description": "If `true`, show the next / prev buttons."
         },
+        {
+          "name": "options",
+          "description": "Options to pass to the flickity instance.\nSee https://flickity.metafizzy.co/options.html for valid options"
+        },
         {
           "name": "pager",
           "description": "If `true`, show the pagination."
@@ -2929,7 +3293,7 @@
       "name": "nano-sortable",
       "description": {
         "kind": "markdown",
-        "value": "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)"
+        "value": "An accessible and flexible sort and re-order utility."
       },
       "attributes": [
         {
@@ -2940,6 +3304,10 @@
           "name": "animation-timing",
           "description": "The css animation timing applied when `animationEnabled` is `true`"
         },
+        {
+          "name": "create-keyboard-handle",
+          "description": "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."
+        },
         {
           "name": "drag-resize",
           "description": "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."
@@ -2948,6 +3316,10 @@
           "name": "dragged-class",
           "description": "Use this class to change how the element looks whilst being sorted"
         },
+        {
+          "name": "dropped-helper-text",
+          "description": "Used to generate a screen reader live update, informing the user of the current element being dropped."
+        },
         {
           "name": "dropzone-active-class",
           "description": "Used in-conjunction with `dropzoneSelector`, applied when a dropzone is dragged over"
@@ -2956,6 +3328,10 @@
           "name": "dropzone-selector",
           "description": "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."
         },
+        {
+          "name": "grabbed-helper-text",
+          "description": "Used to generate a screen reader live update, informing the user of the current element being grabbed."
+        },
         {
           "name": "handle-dragged-class",
           "description": "Use this class to change how the handle looks whilst being sorted"
@@ -2968,6 +3344,10 @@
           "name": "helper-text",
           "description": "Accessibility helper text applied to handle controls"
         },
+        {
+          "name": "item-descriptor",
+          "description": "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"
+        },
         {
           "name": "item-selector",
           "description": "A css query selector which matches a set of elements that should be sortable. e.g. `<li>` or `<tr>`"
@@ -2987,6 +3367,14 @@
         {
           "name": "placeholder-class",
           "description": "Use this class to change how the element looks when acting as a placeholder"
+        },
+        {
+          "name": "reorder-helper-text",
+          "description": "Used to generate a screen reader live update, informing the user when items have been reordered."
+        },
+        {
+          "name": "sortable-host-element",
+          "description": "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`"
         }
       ]
     },
@@ -3119,6 +3507,10 @@
             }
           ]
         },
+        {
+          "name": "scroll-parent",
+          "description": "Define which scroll element to listen & stick to.\nBy default, it will find traverse the DOM to find the closest."
+        },
         {
           "name": "stick-to",
           "description": "Upon being stuck, attach the sticker to another sticker element.\nJS query selector string or DOM element pointing to a `<nano-sticker>`"
@@ -3129,7 +3521,7 @@
       "name": "nano-tab",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab content](tab-content)."
       },
       "attributes": [
         {
@@ -3146,7 +3538,7 @@
         },
         {
           "name": "panel",
-          "description": "The name of the tab panel the tab will control. The panel must be located in the same tab group."
+          "description": "The name of the `nano-tab-content` panel the tab will control. The content panel must be located in the same tab group."
         }
       ]
     },
@@ -3154,7 +3546,7 @@
       "name": "nano-tab-content",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "Used inside [tab groups](/components/tab-group) to display content."
       },
       "attributes": [
         {
@@ -3171,46 +3563,17 @@
       "name": "nano-tab-group",
       "description": {
         "kind": "markdown",
-        "value": "A traditional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.\n\nTabs can be stacked vertically or horizontally (which presents different styling variations) using the `placement` attribute.\nHorizontal tabs that don't fit will overflow and scroll appropriately.\nTab-content can also be swiped to change tabs."
+        "value": "Tab groups organize content into a container that shows one section at a time."
       },
       "attributes": [
-        {
-          "name": "color",
-          "description": "The color to use from the application's color palette.",
-          "values": [
-            {
-              "name": "danger"
-            },
-            {
-              "name": "dark"
-            },
-            {
-              "name": "light"
-            },
-            {
-              "name": "medium"
-            },
-            {
-              "name": "primary"
-            },
-            {
-              "name": "secondary"
-            },
-            {
-              "name": "success"
-            },
-            {
-              "name": "tertiary"
-            },
-            {
-              "name": "warning"
-            }
-          ]
-        },
         {
           "name": "disable-swipe",
           "description": "Disable 'swipe to change tab' on devices with touch"
         },
+        {
+          "name": "equal-tab-size",
+          "description": "Make all tabs equal size. This is only recommended when there are a small number of tabs"
+        },
         {
           "name": "no-scroll-controls",
           "description": "Disables the scroll arrows that appear when tabs overflow."
@@ -3227,13 +3590,25 @@
             }
           ]
         },
+        {
+          "name": "size",
+          "description": "Size of tabs. Default is `regular`. `large` is only available when `placement=\"top\"`",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "regular"
+            }
+          ]
+        },
         {
           "name": "store-id",
-          "description": "Store the currently open tab (against this ID) in the component store.\nUse in conjunction with storeMethod"
+          "description": "Store the open tab against this ID in the component store.\nUse in combination with `storeMethod`"
         },
         {
           "name": "store-method",
-          "description": "The method of storage.\nEither session storage, url hash (after the '#') or url query (after the '?').",
+          "description": "The method of storage.\nEither session storage, url hash (after an '#') or url query (after an '?').",
           "values": [
             {
               "name": "local"
@@ -3261,60 +3636,50 @@
       "name": "nano-table",
       "description": {
         "kind": "markdown",
-        "value": "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"
+        "value": "Displays tabular data in rows and columns."
       },
       "attributes": [
         {
-          "name": "blocks-length",
-          "description": "The number of total blocks currently rendered in the table."
-        },
-        {
-          "name": "caption",
-          "description": "A descriptive title of the table.\nYou must use this or the `slot=\"caption\"` for accessibility"
-        },
-        {
-          "name": "default-sort",
-          "description": "The default sortable option for all columns.\n`true` will enable column sorting unless you set `sortable: false` on a column\n`false` will disable column sorting unless you set `sortable: true` on a column"
-        },
-        {
-          "name": "loading",
-          "description": "Will show a loading state when set to true.\nBy default, will be shown automatically if `rows` is a promise waiting to resolve / or falsy\n*or* when performing custom filtering or sorting.\n*Note* when set manually, will overwrite any internal loading state.\nSet to 'undefined' to revert to default behaviour."
-        },
-        {
-          "name": "per-block",
-          "description": "To improve performance, data is split into blocks\nwhich are shown / hidden and rendered as they become visible.\nUse this to control the number of hits within a block -\nA block should fill a scrolling viewport.\nThe less perBlock the better for performance"
-        },
-        {
-          "name": "placeholder-size",
-          "description": "When loading rows asynchronously, this will render this number of placeholder rows"
+          "name": "compact",
+          "description": "If true, the table will be rendered in a compact style.",
+          "values": [
+            {
+              "name": "auto"
+            }
+          ]
         },
         {
-          "name": "search-term",
-          "description": "Term to search for in the data"
+          "name": "hide-caption",
+          "description": "Visually hide the table's caption"
         },
         {
-          "name": "show-caption",
-          "description": "Show the caption on-screen"
-        },
+          "name": "scrollable",
+          "description": "If true, will render any nested table in a scrollable container (using `overflow: auto`)"
+        }
+      ]
+    },
+    {
+      "name": "nano-tag",
+      "description": {
+        "kind": "markdown",
+        "value": "Tags provide a quick visual clue about the content, and help to organise and group content based on shared attributes."
+      },
+      "attributes": [
         {
-          "name": "show-footer",
-          "description": "Whether to show a `<tfoot>` component"
+          "name": "closable",
+          "description": "Whether the tag is closable or not.\nIf true, a close button will be displayed."
         },
         {
-          "name": "type",
-          "description": "The type of table. Grid type will make cells navigable by keyboard",
+          "name": "size",
+          "description": "The size of the tag.",
           "values": [
             {
-              "name": "grid"
+              "name": "large"
             },
             {
-              "name": "table"
+              "name": "regular"
             }
           ]
-        },
-        {
-          "name": "virtual-total-items",
-          "description": "Use this to render the table with roughly the correct dimensions.\na use-case might be; fetch a small initial dataset to minimise load-time,\nrender the table with the correct dimensions, the table becomes interactive,\nload the rest of the data"
         }
       ]
     },