@nanoporetech-digital/components 3.7.1 → 3.8.1

package/dist/types/components.d.ts

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { AlgoliaNetworkError, AloliaSearchResultDetail, CheckboxChangeEventDetail, Color, ControlValidity, ControlValidityEventDetail, DateDisabledPredicate, DateInputChangeEventDetail, DragEvent, DuetLocalizedText, FileInputChangeEventDetail, FileWithUrl, FilterChangeEventDetail, Flickity, FlickityOptions, GridSizes, IndexResult, InputChangeEventDetail, LocalDateOpts, MyAccountUser, NanoFormEles, NavItemEventDetail, OptionInterface, PageChangeEventDetail, PickerChangeEvent, PlainFormEles, RangeChangeEventDetail, RangeValue, ResizeStateChangeEventDetail, SearchIndex, SelectChangeEventDetail, SlideAnimation, StyleEventDetail, TableTypes, TextFieldTypes, ValidationState, ValidatorValueStore } from "./interface";
+import { AlgoliaNetworkError, AloliaSearchResultDetail, CheckboxChangeEventDetail, Color, ControlValidity, ControlValidityEventDetail, DateDisabledPredicate, DateInputChangeEventDetail, DragEvent, DuetLocalizedText, FileInputChangeEventDetail, FileWithUrl, FilterChangeEventDetail, Flickity, FlickityOptions, GridSizes, IndexResult, InputChangeEventDetail, LocalDateOpts, MyAccountData, MyAccountUser, NanoFormEles, NavItemEventDetail, OptionInterface, PageChangeEventDetail, PickerChangeEvent, PlainFormEles, RangeChangeEventDetail, RangeValue, ResizeStateChangeEventDetail, SearchIndex, SelectChangeEventDetail, SlideAnimation, StyleEventDetail, TableTypes, TextFieldTypes, ValidationState, ValidatorValueStore } from "./interface";
 import { StorageMethods } from "./utils/store/component-store";
 import { DaysOfWeek } from "./utils/date-utils";
 import { PopoverPlacement } from "./utils/popover";
@@ -15,12 +15,18 @@ import { MyAccountUser as MyAccountUser1 } from "./components/global-nav/global-
 import { OptionInterface as OptionInterface1 } from "./components/option/option-interface";
 import { Dropdown } from "./components/dropdown/dropdown";
 export namespace Components {
+    /**
+     * Simple accordion - only one item open at a time - must be used with [details](story/components-accordion--details) elements.
+     */
     interface NanoAccordion {
         /**
           * Color to use from the color palette.
          */
         "color"?: Color;
     }
+    /**
+     * Alerts are used to display important messages either inline, as toast notifications or as modals requiring action.
+     */
     interface NanoAlert {
         /**
           * Displays the alert as a dialog / modal - more akin to a traditional js alert().
@@ -58,6 +64,10 @@ export namespace Components {
          */
         "toast": (position?: 'tr' | 'tl' | 'bl' | 'br') => Promise<void>;
     }
+    /**
+     * Algolia search container to contain and sync nano-algolia-results and nano-algolia-filter components.
+     * Can optionally contain nano-algolia-input components or use them as a 'resultsEmitter'
+     */
     interface NanoAlgolia {
         /**
           * An Algolia API Key. Used in conjunction with 'searchIndex' & 'appId'.
@@ -88,7 +98,7 @@ export namespace Components {
          */
         "operator": 'or' | 'and';
         /**
-          * The query string used to search the index. Will automtically be set with any slotted `search-input` input elements or from elements linked to from `listen-to`
+          * The query string used to search the index. Will automatically be set with any slotted `search-input` input elements or from elements linked to from `listen-to`
          */
         "query": string;
         /**
@@ -133,6 +143,10 @@ export namespace Components {
          */
         "tplRenderFn": (...args: any[]) => string;
     }
+    /**
+     * Displays and syncs algolia filters
+     * Must be nested within an nano-algolia component.
+     */
     interface NanoAlgoliaFilter {
         /**
           * Name of this filter - must match an appropriate algolia facet on a parent nano-algolia index to display
@@ -155,6 +169,11 @@ export namespace Components {
          */
         "value": string | Array<string>;
     }
+    /**
+     * @deprecated Component for querying Algolia Indeces.
+     * Can be nested within an algolia element or used outside as a 'resultsEmitter' (see algolia component documentation)
+     * Must include one 'nano-input' component
+     */
     interface NanoAlgoliaInput {
         /**
           * An Algolia API Key. Used in conjunction with 'searchIndex' & 'appId'. Alternatively this will be set automatically when nested within an algolia component
@@ -197,6 +216,10 @@ export namespace Components {
          */
         "storeMethod": StorageMethods;
     }
+    /**
+     * Displays results from Algolia searches.
+     * TODO / WIP
+     */
     interface NanoAlgoliaPagination {
         /**
           * Go to a particular page
@@ -215,6 +238,10 @@ export namespace Components {
          */
         "prevPage": () => Promise<void>;
     }
+    /**
+     * Displays and syncs results from Algolia searches.
+     * Must be nested within an nano-algolia component.
+     */
     interface NanoAlgoliaResults {
         /**
           * Whether new pages loaded by pagination will replace or be appended to the results block (this will be ignored if 'infiniteScroll' is set to true)
@@ -225,6 +252,12 @@ export namespace Components {
          */
         "infiniteScroll": boolean;
     }
+    /**
+     * Displays media in the desired aspect ratio.
+     * You can slot in any replaced element, including `<iframe>`, `<img>`, and `<video>`.
+     * As the element's width changes, its height will resize proportionally. Only one element should be slotted into the container.
+     * The default aspect ratio is 16:9.
+     */
     interface NanoAspectRatio {
         /**
           * The aspect ratio of the embedded media in the format of `width:height`, e.g. `16:9`, `4:3`, or `1:1`. Ratios not in this format will be ignored.
@@ -235,6 +268,11 @@ export namespace Components {
          */
         "fit": 'cover' | 'contain';
     }
+    /**
+     * `nano-checkbox` is used to let a user choose one or more options from a limited number of options.
+     * They appear as checked when activated.
+     * They can be checked by mouse, keyboard, touch or programmatically by setting the checked property.
+     */
     interface NanoCheckbox {
         /**
           * checked property that can be used to get/set the value. accepts only boolean values
@@ -312,6 +350,10 @@ export namespace Components {
          */
         "value": string;
     }
+    /**
+     * `nano-checkbox-group` is an optional wrapper for all `nano-checkbox` controls.
+     * It provides a convenient place to anchor a collective label and any validation issues.
+     */
     interface NanoCheckboxGroup {
         /**
           * Disable all the nested form controls
@@ -357,7 +399,17 @@ export namespace Components {
           * Current validation message - if any. @readonly
          */
         "validityMessage": string;
+        /**
+          * The current, collective checkbox value
+         */
+        "value": string[] | string;
     }
+    /**
+     * `nano-datalist` a visually consistent and more flexible replacement for a native
+     * [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist). Can be nested within a `nano-input`
+     * or linked to any input control via the `input` prop. Is used internally within `nano-select`.
+     * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using the `options` prop
+     */
     interface NanoDatalist {
         /**
           * return all the active options currently within the datalist. Can be useful for validation
@@ -396,6 +448,9 @@ export namespace Components {
          */
         "type": 'select' | 'selctMulti' | 'input';
     }
+    /**
+     * 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.
+     */
     interface NanoDateInput {
         /**
           * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
@@ -545,6 +600,10 @@ export namespace Components {
          */
         "value": string;
     }
+    /**
+     * A highly performant, small and accessible date-picker.
+     * Customised from [Duet date-picker](https://duetds.github.io/date-picker/).
+     */
     interface NanoDatePicker {
         /**
           * The color to use from the application's color palette.
@@ -611,6 +670,9 @@ export namespace Components {
          */
         "open": boolean;
     }
+    /**
+     * Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
+     */
     interface NanoDialog {
         /**
           * Hides the dialog
@@ -657,6 +719,9 @@ export namespace Components {
          */
         "storeMethod": StorageMethods;
     }
+    /**
+     * WIP / TODO. https://git.oxfordnanolabs.local/Digital/nano-components/-/issues/24
+     */
     interface NanoDrawer {
         /**
           * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of its parent element, set this prop and add `position: relative` to the parent.
@@ -695,6 +760,10 @@ export namespace Components {
          */
         "type": 'overlay' | 'reveal' | 'push';
     }
+    /**
+     * Dropdowns show additional content in a panel.
+     * Designed to work well with nano-menu components to provide a list of options (`nano-nav-items` / `nano-option`).
+     */
     interface NanoDropdown {
         /**
           * Determines if the dropdown should open automatically when the trigger is clicked
@@ -746,6 +815,14 @@ export namespace Components {
          */
         "tetherTo": HTMLElement;
     }
+    /**
+     * A toolbox for `nano-...` form fields and form validation.
+     * - Easy to add validation across field dependencies - e.g. "When Field1 contains '123' Field2 must contain '456'"
+     * - Easy access to whole form and individual field validity states
+     * - Easy access to form data payload
+     * = Access to 2-way, data bound reactive store
+     * - Scroll to invalid field on submit
+     */
     interface NanoFieldValidator {
         /**
           * Returns true if any nested fields have been changed @readonly
@@ -811,6 +888,12 @@ export namespace Components {
          */
         "validationState": ValidationState[];
     }
+    /**
+     * A better UI experience for `input type="file"` form controls.
+     *   - Drag and Drop
+     *   - Validation options
+     *   - Preview and manage multiple files
+     */
     interface NanoFileUpload {
         /**
           * The accept attribute value is a string that defines the file types the file input should accept. E.g. for a MS Word file: `.doc, .docx,application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document`
@@ -900,10 +983,15 @@ export namespace Components {
          */
         "validityMessage": string;
         /**
-          * A file input's value attribute contains a DOMString that represents the path to the selected file(s). If the user selected multiple files, the value represents the first file in the list of files they selected. You can reset the file-upload control by setting the value to an emptry string e.g. `var input.value = ''`
+          * A file input's value attribute contains a DOMString that represents the path to the selected file(s). If the user selected multiple files, the value represents the first file in the list of files they selected. You can reset the file-upload control by setting the value to an empty string e.g. `var input.value = ''`
          */
         "value": string;
     }
+    /**
+     * Nanopore digital global navigation and search bar.
+     * Incorporates MyAccount / SSO states (messages / cart / user name etc).
+     * Incorporates Algolia search.
+     */
     interface NanoGlobalNav {
         /**
           * Active MyAccount link sections. By default all will show.
@@ -942,6 +1030,10 @@ export namespace Components {
           * Url to the Nanopore message center. Will default to the url supplied by MyAccount
          */
         "msgUrl": string;
+        /**
+          * An alternative to both 'env' and 'ssoDataUrl'. You can directly provide a JSON object of myaccount data. (e.g. https://myaccount.nanoporetech.com/nav_bar_data.json) This is useful for SSR
+         */
+        "myAccountData": MyAccountData | null;
         /**
           * Logged in user details automatically populated from MyAccount
          */
@@ -959,11 +1051,11 @@ export namespace Components {
          */
         "searchIndeces": Array<SearchIndex>;
         /**
-          * Algolia search index to programatically set or to set an initial index
+          * Algolia search index to programmatically set or to set an initial index
          */
         "searchIndex": string;
         /**
-          * A search value to passed to Algolia to programatically get or to preload search results
+          * A search value to passed to Algolia to programmatically get or to preload search results
          */
         "searchValue": string;
         /**
@@ -987,6 +1079,9 @@ export namespace Components {
          */
         "submitSearch": () => Promise<void>;
     }
+    /**
+     * Nanopore digital global navigation user profile.
+     */
     interface NanoGlobalNavUserProfile {
         /**
           * Logged in user details automatically populated from MyAccount
@@ -997,8 +1092,19 @@ export namespace Components {
          */
         "userProfileUrl": string;
     }
+    /**
+     * Nanopore Global Search results component
+     * to be used in conjunction with [Globla-Nav](/story/nano-compounds-global-nav).
+     * A shortcut / helper which combines algolia components.
+     * There should only be one <nano-global-search-results> per page
+     * and should be a direct child of <nano-global-nav>
+     */
     interface NanoGlobalSearchResults {
     }
+    /**
+     * A context-aware CSS grid implementation.
+     * Uses it's own width to choose column number - not screen width.
+     */
     interface NanoGrid {
         /**
           * 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.
@@ -1049,6 +1155,9 @@ export namespace Components {
          */
         "xxlCols": number;
     }
+    /**
+     * Grid items to be used with [grid](/story/nano-components-grid) elements
+     */
     interface NanoGridItem {
         /**
           * Called by parent grid to trigger new classes
@@ -1059,6 +1168,9 @@ export namespace Components {
          */
         "gridStates": string;
     }
+    /**
+     * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.
+     */
     interface NanoHero {
         /**
           * src for backgronund image. For more control use the `background` slot instead.
@@ -1081,6 +1193,9 @@ export namespace Components {
          */
         "theme": 'dark' | 'light';
     }
+    /**
+     * An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path). Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.
+     */
     interface NanoIcon {
         /**
           * Specifies the label to use for accessibility. Defaults to the icon name.
@@ -1115,6 +1230,9 @@ export namespace Components {
          */
         "src"?: string;
     }
+    /**
+     * Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
+     */
     interface NanoIconButton {
         /**
           * Set to true to disable the button.
@@ -1157,6 +1275,9 @@ export namespace Components {
          */
         "value"?: string;
     }
+    /**
+     * Img with benefits. Lazy loading. Simple `srcSet` solution for both `<img>` and `background-image` varieties.
+     */
     interface NanoImg {
         /**
           * This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, or if the image is not yet downloaded.
@@ -1183,6 +1304,11 @@ export namespace Components {
          */
         "srcSet"?: string;
     }
+    /**
+     * 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).
+     * It 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.
+     * The default styling reference comes from the [ONT styleguide](https://nanoporetech.zeroheight.com/styleguide/s/31282/p/230c74-text-input--textarea/b/942ee4)
+     */
     interface NanoInput {
         /**
           * 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.
@@ -1362,6 +1488,10 @@ export namespace Components {
          */
         "value"?: string | null;
     }
+    /**
+     * Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.
+     * Manages focus state / active.
+     */
     interface NanoMenu {
         /**
           * get the focus state of the menu @readonly
@@ -1392,6 +1522,12 @@ export namespace Components {
          */
         "type": 'menu' | 'listbox';
     }
+    /**
+     * Menu drawer - digital specific navigation strip designed to be open (default) or closed.
+     * Shows menu item logos only on minimised, expands to show entire menu item.
+     * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.
+     * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.
+     */
     interface NanoMenuDrawer {
         /**
           * Should element hide and move items into the nano-global-nav when items are cut off (this will only work when nano-menu-drawer is displayed at full screen)
@@ -1410,6 +1546,12 @@ export namespace Components {
          */
         "saveState": boolean;
     }
+    /**
+     * Nav items to be used with the various nav items.
+     * [Globla-Nav](/story/compounds-global-nav)
+     * [Menu-Drawer](/story/components-menu-drawer)
+     * [Dropdown](/story/components-dropdown)
+     */
     interface NanoNavItem {
         /**
           * Whether secondary menus should close on blur
@@ -1452,6 +1594,9 @@ export namespace Components {
          */
         "target": '_self' | '_blank' | '_parent' | '_top';
     }
+    /**
+     * Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)
+     */
     interface NanoOption {
         /**
           * Whether this option should be disabled
@@ -1474,6 +1619,9 @@ export namespace Components {
          */
         "value": string;
     }
+    /**
+     * Used to show the status of an ongoing operation.
+     */
     interface NanoProgressBar {
         /**
           * When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.
@@ -1488,6 +1636,12 @@ export namespace Components {
          */
         "value": number;
     }
+    /**
+     * The Range slider lets users select from a range of values by moving
+     * the slider knob. It can accept dual knobs, but by default one knob controls the value of the range.
+     * Labels can be placed on either side of the range by adding the
+     * `slot="start"` or `slot="end"` to the element.
+     */
     interface NanoRange {
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`
@@ -1538,6 +1692,9 @@ export namespace Components {
          */
         "value": RangeValue;
     }
+    /**
+     * Rating - a form element to allow the viewing and input of user feedback.
+     */
     interface NanoRating {
         /**
           * Disables the rating.
@@ -1582,6 +1739,12 @@ export namespace Components {
          */
         "value": number;
     }
+    /**
+     * A Resize-Observer utility component.
+     * Takes a string list of sizes and optional class-names.
+     * Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.
+     * Additionally, can fire events when content no-longer fits within the element.
+     */
     interface NanoResizeObserve {
         /**
           * Fire `nanoResizeContentFitChange` events notifying whether content currently fits or does not on the x, y or both axis'. Also makes the `content-fit-...` slots available
@@ -1592,6 +1755,12 @@ export namespace Components {
          */
         "states": string;
     }
+    /**
+     * The select component is a wrapper to the HTML select element with custom styling and additional functionality.
+     * It accepts most of the same properties as the HTML [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).
+     * It's multi selection functionality is vastly improved from the native solution. It allows for the control of
+     * value order through drag and drop or changing the insertion point with arrow keys. It also can allow for user defined values.
+     */
     interface NanoSelect {
         /**
           * in multiple mode, allow users to enter their own values
@@ -1716,6 +1885,11 @@ export namespace Components {
          */
         "value": string | string[];
     }
+    /**
+     * Skeletons are used to show where content will eventually be drawn.
+     * Simple containers for scaffolding layouts that mimic what users will see when content has finished loading.
+     * Prevents large areas of empty space during asynchronous operations.
+     */
     interface NanoSkeleton {
         /**
           * When `true`, the skeleton will animate.
@@ -1728,6 +1902,11 @@ export namespace Components {
          */
         "ready": boolean | null;
     }
+    /**
+     * The Slides component is a multi-section container. Each section can be swiped or dragged between.
+     * It contains any number of Slide components.
+     * Uses [Flickity](https://flickity.metafizzy.co/) under the hood. A good balance of options, flexibility and IE11 compatibility.
+     */
     interface NanoSlides {
         /**
           * Animation presets.
@@ -1828,6 +2007,9 @@ export namespace Components {
          */
         "updateAutoHeight": (speed?: number) => Promise<void>;
     }
+    /**
+     * Spinners are used to show the progress of an indeterminate operation.
+     */
     interface NanoSpinner {
         /**
           * Displays absolutely with an overlay
@@ -1838,6 +2020,9 @@ export namespace Components {
          */
         "type": 'dna' | 'circle';
     }
+    /**
+     * Split panes display two adjacent panels, allowing the user to reposition them.
+     */
     interface NanoSplitPane {
         /**
           * When changing `position` via property, the pane will animate into position. Make `animationDuration` 0 to disable.
@@ -1880,6 +2065,9 @@ export namespace Components {
          */
         "vertical": boolean;
     }
+    /**
+     * The Sticker component is a toolbox for 'sticking' items to scrolling containers.
+     */
     interface NanoSticker {
         /**
           * Only applicable to root stickers. When applied the sticker will grow or shrink to the scrollParent size
@@ -1971,6 +2159,12 @@ export namespace Components {
          */
         "name": string;
     }
+    /**
+     * A tradtional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.
+     * Tabs can be stacked vertically or horizontally (which presents different styling variations) using the `placement` attribute.
+     * Horizonal tabs that don't fit will overflow and scroll appropriately.
+     * Tab-content can also be swiped to change tabs.
+     */
     interface NanoTabGroup {
         /**
           * The color to use from the application's color palette.
@@ -2001,6 +2195,17 @@ export namespace Components {
          */
         "storeMethod": StorageMethods;
     }
+    /**
+     * A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.
+     * - Built-in search
+     * - Built-in column filter
+     * - Built-in column sort
+     * - Easily swap in API / async based search / filter & sort
+     * - Pin headers, footers, rows, columns
+     * - Drag-&-Drop columns to re-order
+     * - Add custom rendering at every level
+     * - Add custom properties at every level
+     */
     interface NanoTable {
         /**
           * Apply a filter on a column
@@ -2119,6 +2324,9 @@ export namespace Components {
          */
         "virtualTotalItems": number;
     }
+    /**
+     * Tooltips display additional information based on a specific action.
+     */
     interface NanoTooltip {
         /**
           * The tooltip's content. Alternatively, you can use the content slot.
@@ -2326,78 +2534,133 @@ export interface NanoTooltipCustomEvent<T> extends CustomEvent<T> {
     target: HTMLNanoTooltipElement;
 }
 declare global {
+    /**
+     * Simple accordion - only one item open at a time - must be used with [details](story/components-accordion--details) elements.
+     */
     interface HTMLNanoAccordionElement extends Components.NanoAccordion, HTMLStencilElement {
     }
     var HTMLNanoAccordionElement: {
         prototype: HTMLNanoAccordionElement;
         new (): HTMLNanoAccordionElement;
     };
+    /**
+     * Alerts are used to display important messages either inline, as toast notifications or as modals requiring action.
+     */
     interface HTMLNanoAlertElement extends Components.NanoAlert, HTMLStencilElement {
     }
     var HTMLNanoAlertElement: {
         prototype: HTMLNanoAlertElement;
         new (): HTMLNanoAlertElement;
     };
+    /**
+     * Algolia search container to contain and sync nano-algolia-results and nano-algolia-filter components.
+     * Can optionally contain nano-algolia-input components or use them as a 'resultsEmitter'
+     */
     interface HTMLNanoAlgoliaElement extends Components.NanoAlgolia, HTMLStencilElement {
     }
     var HTMLNanoAlgoliaElement: {
         prototype: HTMLNanoAlgoliaElement;
         new (): HTMLNanoAlgoliaElement;
     };
+    /**
+     * Displays and syncs algolia filters
+     * Must be nested within an nano-algolia component.
+     */
     interface HTMLNanoAlgoliaFilterElement extends Components.NanoAlgoliaFilter, HTMLStencilElement {
     }
     var HTMLNanoAlgoliaFilterElement: {
         prototype: HTMLNanoAlgoliaFilterElement;
         new (): HTMLNanoAlgoliaFilterElement;
     };
+    /**
+     * @deprecated Component for querying Algolia Indeces.
+     * Can be nested within an algolia element or used outside as a 'resultsEmitter' (see algolia component documentation)
+     * Must include one 'nano-input' component
+     */
     interface HTMLNanoAlgoliaInputElement extends Components.NanoAlgoliaInput, HTMLStencilElement {
     }
     var HTMLNanoAlgoliaInputElement: {
         prototype: HTMLNanoAlgoliaInputElement;
         new (): HTMLNanoAlgoliaInputElement;
     };
+    /**
+     * Displays results from Algolia searches.
+     * TODO / WIP
+     */
     interface HTMLNanoAlgoliaPaginationElement extends Components.NanoAlgoliaPagination, HTMLStencilElement {
     }
     var HTMLNanoAlgoliaPaginationElement: {
         prototype: HTMLNanoAlgoliaPaginationElement;
         new (): HTMLNanoAlgoliaPaginationElement;
     };
+    /**
+     * Displays and syncs results from Algolia searches.
+     * Must be nested within an nano-algolia component.
+     */
     interface HTMLNanoAlgoliaResultsElement extends Components.NanoAlgoliaResults, HTMLStencilElement {
     }
     var HTMLNanoAlgoliaResultsElement: {
         prototype: HTMLNanoAlgoliaResultsElement;
         new (): HTMLNanoAlgoliaResultsElement;
     };
+    /**
+     * Displays media in the desired aspect ratio.
+     * You can slot in any replaced element, including `<iframe>`, `<img>`, and `<video>`.
+     * As the element's width changes, its height will resize proportionally. Only one element should be slotted into the container.
+     * The default aspect ratio is 16:9.
+     */
     interface HTMLNanoAspectRatioElement extends Components.NanoAspectRatio, HTMLStencilElement {
     }
     var HTMLNanoAspectRatioElement: {
         prototype: HTMLNanoAspectRatioElement;
         new (): HTMLNanoAspectRatioElement;
     };
+    /**
+     * `nano-checkbox` is used to let a user choose one or more options from a limited number of options.
+     * They appear as checked when activated.
+     * They can be checked by mouse, keyboard, touch or programmatically by setting the checked property.
+     */
     interface HTMLNanoCheckboxElement extends Components.NanoCheckbox, HTMLStencilElement {
     }
     var HTMLNanoCheckboxElement: {
         prototype: HTMLNanoCheckboxElement;
         new (): HTMLNanoCheckboxElement;
     };
+    /**
+     * `nano-checkbox-group` is an optional wrapper for all `nano-checkbox` controls.
+     * It provides a convenient place to anchor a collective label and any validation issues.
+     */
     interface HTMLNanoCheckboxGroupElement extends Components.NanoCheckboxGroup, HTMLStencilElement {
     }
     var HTMLNanoCheckboxGroupElement: {
         prototype: HTMLNanoCheckboxGroupElement;
         new (): HTMLNanoCheckboxGroupElement;
     };
+    /**
+     * `nano-datalist` a visually consistent and more flexible replacement for a native
+     * [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist). Can be nested within a `nano-input`
+     * or linked to any input control via the `input` prop. Is used internally within `nano-select`.
+     * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using the `options` prop
+     */
     interface HTMLNanoDatalistElement extends Components.NanoDatalist, HTMLStencilElement {
     }
     var HTMLNanoDatalistElement: {
         prototype: HTMLNanoDatalistElement;
         new (): HTMLNanoDatalistElement;
     };
+    /**
+     * 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.
+     */
     interface HTMLNanoDateInputElement extends Components.NanoDateInput, HTMLStencilElement {
     }
     var HTMLNanoDateInputElement: {
         prototype: HTMLNanoDateInputElement;
         new (): HTMLNanoDateInputElement;
     };
+    /**
+     * A highly performant, small and accessible date-picker.
+     * Customised from [Duet date-picker](https://duetds.github.io/date-picker/).
+     */
     interface HTMLNanoDatePickerElement extends Components.NanoDatePicker, HTMLStencilElement {
     }
     var HTMLNanoDatePickerElement: {
@@ -2416,150 +2679,261 @@ declare global {
         prototype: HTMLNanoDetailsElement;
         new (): HTMLNanoDetailsElement;
     };
+    /**
+     * Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
+     */
     interface HTMLNanoDialogElement extends Components.NanoDialog, HTMLStencilElement {
     }
     var HTMLNanoDialogElement: {
         prototype: HTMLNanoDialogElement;
         new (): HTMLNanoDialogElement;
     };
+    /**
+     * WIP / TODO. https://git.oxfordnanolabs.local/Digital/nano-components/-/issues/24
+     */
     interface HTMLNanoDrawerElement extends Components.NanoDrawer, HTMLStencilElement {
     }
     var HTMLNanoDrawerElement: {
         prototype: HTMLNanoDrawerElement;
         new (): HTMLNanoDrawerElement;
     };
+    /**
+     * Dropdowns show additional content in a panel.
+     * Designed to work well with nano-menu components to provide a list of options (`nano-nav-items` / `nano-option`).
+     */
     interface HTMLNanoDropdownElement extends Components.NanoDropdown, HTMLStencilElement {
     }
     var HTMLNanoDropdownElement: {
         prototype: HTMLNanoDropdownElement;
         new (): HTMLNanoDropdownElement;
     };
+    /**
+     * A toolbox for `nano-...` form fields and form validation.
+     * - Easy to add validation across field dependencies - e.g. "When Field1 contains '123' Field2 must contain '456'"
+     * - Easy access to whole form and individual field validity states
+     * - Easy access to form data payload
+     * = Access to 2-way, data bound reactive store
+     * - Scroll to invalid field on submit
+     */
     interface HTMLNanoFieldValidatorElement extends Components.NanoFieldValidator, HTMLStencilElement {
     }
     var HTMLNanoFieldValidatorElement: {
         prototype: HTMLNanoFieldValidatorElement;
         new (): HTMLNanoFieldValidatorElement;
     };
+    /**
+     * A better UI experience for `input type="file"` form controls.
+     *   - Drag and Drop
+     *   - Validation options
+     *   - Preview and manage multiple files
+     */
     interface HTMLNanoFileUploadElement extends Components.NanoFileUpload, HTMLStencilElement {
     }
     var HTMLNanoFileUploadElement: {
         prototype: HTMLNanoFileUploadElement;
         new (): HTMLNanoFileUploadElement;
     };
+    /**
+     * Nanopore digital global navigation and search bar.
+     * Incorporates MyAccount / SSO states (messages / cart / user name etc).
+     * Incorporates Algolia search.
+     */
     interface HTMLNanoGlobalNavElement extends Components.NanoGlobalNav, HTMLStencilElement {
     }
     var HTMLNanoGlobalNavElement: {
         prototype: HTMLNanoGlobalNavElement;
         new (): HTMLNanoGlobalNavElement;
     };
+    /**
+     * Nanopore digital global navigation user profile.
+     */
     interface HTMLNanoGlobalNavUserProfileElement extends Components.NanoGlobalNavUserProfile, HTMLStencilElement {
     }
     var HTMLNanoGlobalNavUserProfileElement: {
         prototype: HTMLNanoGlobalNavUserProfileElement;
         new (): HTMLNanoGlobalNavUserProfileElement;
     };
+    /**
+     * Nanopore Global Search results component
+     * to be used in conjunction with [Globla-Nav](/story/nano-compounds-global-nav).
+     * A shortcut / helper which combines algolia components.
+     * There should only be one <nano-global-search-results> per page
+     * and should be a direct child of <nano-global-nav>
+     */
     interface HTMLNanoGlobalSearchResultsElement extends Components.NanoGlobalSearchResults, HTMLStencilElement {
     }
     var HTMLNanoGlobalSearchResultsElement: {
         prototype: HTMLNanoGlobalSearchResultsElement;
         new (): HTMLNanoGlobalSearchResultsElement;
     };
+    /**
+     * A context-aware CSS grid implementation.
+     * Uses it's own width to choose column number - not screen width.
+     */
     interface HTMLNanoGridElement extends Components.NanoGrid, HTMLStencilElement {
     }
     var HTMLNanoGridElement: {
         prototype: HTMLNanoGridElement;
         new (): HTMLNanoGridElement;
     };
+    /**
+     * Grid items to be used with [grid](/story/nano-components-grid) elements
+     */
     interface HTMLNanoGridItemElement extends Components.NanoGridItem, HTMLStencilElement {
     }
     var HTMLNanoGridItemElement: {
         prototype: HTMLNanoGridItemElement;
         new (): HTMLNanoGridItemElement;
     };
+    /**
+     * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.
+     */
     interface HTMLNanoHeroElement extends Components.NanoHero, HTMLStencilElement {
     }
     var HTMLNanoHeroElement: {
         prototype: HTMLNanoHeroElement;
         new (): HTMLNanoHeroElement;
     };
+    /**
+     * An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path). Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.
+     */
     interface HTMLNanoIconElement extends Components.NanoIcon, HTMLStencilElement {
     }
     var HTMLNanoIconElement: {
         prototype: HTMLNanoIconElement;
         new (): HTMLNanoIconElement;
     };
+    /**
+     * Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
+     */
     interface HTMLNanoIconButtonElement extends Components.NanoIconButton, HTMLStencilElement {
     }
     var HTMLNanoIconButtonElement: {
         prototype: HTMLNanoIconButtonElement;
         new (): HTMLNanoIconButtonElement;
     };
+    /**
+     * Img with benefits. Lazy loading. Simple `srcSet` solution for both `<img>` and `background-image` varieties.
+     */
     interface HTMLNanoImgElement extends Components.NanoImg, HTMLStencilElement {
     }
     var HTMLNanoImgElement: {
         prototype: HTMLNanoImgElement;
         new (): HTMLNanoImgElement;
     };
+    /**
+     * 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).
+     * It 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.
+     * The default styling reference comes from the [ONT styleguide](https://nanoporetech.zeroheight.com/styleguide/s/31282/p/230c74-text-input--textarea/b/942ee4)
+     */
     interface HTMLNanoInputElement extends Components.NanoInput, HTMLStencilElement {
     }
     var HTMLNanoInputElement: {
         prototype: HTMLNanoInputElement;
         new (): HTMLNanoInputElement;
     };
+    /**
+     * Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.
+     * Manages focus state / active.
+     */
     interface HTMLNanoMenuElement extends Components.NanoMenu, HTMLStencilElement {
     }
     var HTMLNanoMenuElement: {
         prototype: HTMLNanoMenuElement;
         new (): HTMLNanoMenuElement;
     };
+    /**
+     * Menu drawer - digital specific navigation strip designed to be open (default) or closed.
+     * Shows menu item logos only on minimised, expands to show entire menu item.
+     * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.
+     * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.
+     */
     interface HTMLNanoMenuDrawerElement extends Components.NanoMenuDrawer, HTMLStencilElement {
     }
     var HTMLNanoMenuDrawerElement: {
         prototype: HTMLNanoMenuDrawerElement;
         new (): HTMLNanoMenuDrawerElement;
     };
+    /**
+     * Nav items to be used with the various nav items.
+     * [Globla-Nav](/story/compounds-global-nav)
+     * [Menu-Drawer](/story/components-menu-drawer)
+     * [Dropdown](/story/components-dropdown)
+     */
     interface HTMLNanoNavItemElement extends Components.NanoNavItem, HTMLStencilElement {
     }
     var HTMLNanoNavItemElement: {
         prototype: HTMLNanoNavItemElement;
         new (): HTMLNanoNavItemElement;
     };
+    /**
+     * Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)
+     */
     interface HTMLNanoOptionElement extends Components.NanoOption, HTMLStencilElement {
     }
     var HTMLNanoOptionElement: {
         prototype: HTMLNanoOptionElement;
         new (): HTMLNanoOptionElement;
     };
+    /**
+     * Used to show the status of an ongoing operation.
+     */
     interface HTMLNanoProgressBarElement extends Components.NanoProgressBar, HTMLStencilElement {
     }
     var HTMLNanoProgressBarElement: {
         prototype: HTMLNanoProgressBarElement;
         new (): HTMLNanoProgressBarElement;
     };
+    /**
+     * The Range slider lets users select from a range of values by moving
+     * the slider knob. It can accept dual knobs, but by default one knob controls the value of the range.
+     * Labels can be placed on either side of the range by adding the
+     * `slot="start"` or `slot="end"` to the element.
+     */
     interface HTMLNanoRangeElement extends Components.NanoRange, HTMLStencilElement {
     }
     var HTMLNanoRangeElement: {
         prototype: HTMLNanoRangeElement;
         new (): HTMLNanoRangeElement;
     };
+    /**
+     * Rating - a form element to allow the viewing and input of user feedback.
+     */
     interface HTMLNanoRatingElement extends Components.NanoRating, HTMLStencilElement {
     }
     var HTMLNanoRatingElement: {
         prototype: HTMLNanoRatingElement;
         new (): HTMLNanoRatingElement;
     };
+    /**
+     * A Resize-Observer utility component.
+     * Takes a string list of sizes and optional class-names.
+     * Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.
+     * Additionally, can fire events when content no-longer fits within the element.
+     */
     interface HTMLNanoResizeObserveElement extends Components.NanoResizeObserve, HTMLStencilElement {
     }
     var HTMLNanoResizeObserveElement: {
         prototype: HTMLNanoResizeObserveElement;
         new (): HTMLNanoResizeObserveElement;
     };
+    /**
+     * The select component is a wrapper to the HTML select element with custom styling and additional functionality.
+     * It accepts most of the same properties as the HTML [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).
+     * It's multi selection functionality is vastly improved from the native solution. It allows for the control of
+     * value order through drag and drop or changing the insertion point with arrow keys. It also can allow for user defined values.
+     */
     interface HTMLNanoSelectElement extends Components.NanoSelect, HTMLStencilElement {
     }
     var HTMLNanoSelectElement: {
         prototype: HTMLNanoSelectElement;
         new (): HTMLNanoSelectElement;
     };
+    /**
+     * Skeletons are used to show where content will eventually be drawn.
+     * Simple containers for scaffolding layouts that mimic what users will see when content has finished loading.
+     * Prevents large areas of empty space during asynchronous operations.
+     */
     interface HTMLNanoSkeletonElement extends Components.NanoSkeleton, HTMLStencilElement {
     }
     var HTMLNanoSkeletonElement: {
@@ -2572,24 +2946,38 @@ declare global {
         prototype: HTMLNanoSlideElement;
         new (): HTMLNanoSlideElement;
     };
+    /**
+     * The Slides component is a multi-section container. Each section can be swiped or dragged between.
+     * It contains any number of Slide components.
+     * Uses [Flickity](https://flickity.metafizzy.co/) under the hood. A good balance of options, flexibility and IE11 compatibility.
+     */
     interface HTMLNanoSlidesElement extends Components.NanoSlides, HTMLStencilElement {
     }
     var HTMLNanoSlidesElement: {
         prototype: HTMLNanoSlidesElement;
         new (): HTMLNanoSlidesElement;
     };
+    /**
+     * Spinners are used to show the progress of an indeterminate operation.
+     */
     interface HTMLNanoSpinnerElement extends Components.NanoSpinner, HTMLStencilElement {
     }
     var HTMLNanoSpinnerElement: {
         prototype: HTMLNanoSpinnerElement;
         new (): HTMLNanoSpinnerElement;
     };
+    /**
+     * Split panes display two adjacent panels, allowing the user to reposition them.
+     */
     interface HTMLNanoSplitPaneElement extends Components.NanoSplitPane, HTMLStencilElement {
     }
     var HTMLNanoSplitPaneElement: {
         prototype: HTMLNanoSplitPaneElement;
         new (): HTMLNanoSplitPaneElement;
     };
+    /**
+     * The Sticker component is a toolbox for 'sticking' items to scrolling containers.
+     */
     interface HTMLNanoStickerElement extends Components.NanoSticker, HTMLStencilElement {
     }
     var HTMLNanoStickerElement: {
@@ -2608,18 +2996,38 @@ declare global {
         prototype: HTMLNanoTabContentElement;
         new (): HTMLNanoTabContentElement;
     };
+    /**
+     * A tradtional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.
+     * Tabs can be stacked vertically or horizontally (which presents different styling variations) using the `placement` attribute.
+     * Horizonal tabs that don't fit will overflow and scroll appropriately.
+     * Tab-content can also be swiped to change tabs.
+     */
     interface HTMLNanoTabGroupElement extends Components.NanoTabGroup, HTMLStencilElement {
     }
     var HTMLNanoTabGroupElement: {
         prototype: HTMLNanoTabGroupElement;
         new (): HTMLNanoTabGroupElement;
     };
+    /**
+     * A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.
+     * - Built-in search
+     * - Built-in column filter
+     * - Built-in column sort
+     * - Easily swap in API / async based search / filter & sort
+     * - Pin headers, footers, rows, columns
+     * - Drag-&-Drop columns to re-order
+     * - Add custom rendering at every level
+     * - Add custom properties at every level
+     */
     interface HTMLNanoTableElement extends Components.NanoTable, HTMLStencilElement {
     }
     var HTMLNanoTableElement: {
         prototype: HTMLNanoTableElement;
         new (): HTMLNanoTableElement;
     };
+    /**
+     * Tooltips display additional information based on a specific action.
+     */
     interface HTMLNanoTooltipElement extends Components.NanoTooltip, HTMLStencilElement {
     }
     var HTMLNanoTooltipElement: {
@@ -2680,6 +3088,9 @@ declare global {
     }
 }
 declare namespace LocalJSX {
+    /**
+     * Simple accordion - only one item open at a time - must be used with [details](story/components-accordion--details) elements.
+     */
     interface NanoAccordion {
         /**
           * Color to use from the color palette.
@@ -2690,6 +3101,9 @@ declare namespace LocalJSX {
          */
         "onNanoToggle"?: (event: NanoAccordionCustomEvent<any>) => void;
     }
+    /**
+     * Alerts are used to display important messages either inline, as toast notifications or as modals requiring action.
+     */
     interface NanoAlert {
         /**
           * Set to true to make the alert closable.
@@ -2724,6 +3138,10 @@ declare namespace LocalJSX {
          */
         "open"?: boolean;
     }
+    /**
+     * Algolia search container to contain and sync nano-algolia-results and nano-algolia-filter components.
+     * Can optionally contain nano-algolia-input components or use them as a 'resultsEmitter'
+     */
     interface NanoAlgolia {
         /**
           * An Algolia API Key. Used in conjunction with 'searchIndex' & 'appId'.
@@ -2774,7 +3192,7 @@ declare namespace LocalJSX {
          */
         "operator"?: 'or' | 'and';
         /**
-          * The query string used to search the index. Will automtically be set with any slotted `search-input` input elements or from elements linked to from `listen-to`
+          * The query string used to search the index. Will automatically be set with any slotted `search-input` input elements or from elements linked to from `listen-to`
          */
         "query"?: string;
         /**
@@ -2814,6 +3232,10 @@ declare namespace LocalJSX {
          */
         "tplRenderFn"?: (...args: any[]) => string;
     }
+    /**
+     * Displays and syncs algolia filters
+     * Must be nested within an nano-algolia component.
+     */
     interface NanoAlgoliaFilter {
         /**
           * Name of this filter - must match an appropriate algolia facet on a parent nano-algolia index to display
@@ -2844,6 +3266,11 @@ declare namespace LocalJSX {
          */
         "value"?: string | Array<string>;
     }
+    /**
+     * @deprecated Component for querying Algolia Indeces.
+     * Can be nested within an algolia element or used outside as a 'resultsEmitter' (see algolia component documentation)
+     * Must include one 'nano-input' component
+     */
     interface NanoAlgoliaInput {
         /**
           * An Algolia API Key. Used in conjunction with 'searchIndex' & 'appId'. Alternatively this will be set automatically when nested within an algolia component
@@ -2890,6 +3317,10 @@ declare namespace LocalJSX {
          */
         "storeMethod"?: StorageMethods;
     }
+    /**
+     * Displays results from Algolia searches.
+     * TODO / WIP
+     */
     interface NanoAlgoliaPagination {
         /**
           * Max number of page numbers to show
@@ -2900,6 +3331,10 @@ declare namespace LocalJSX {
          */
         "onNanoPageChanged"?: (event: NanoAlgoliaPaginationCustomEvent<{ page: number }>) => void;
     }
+    /**
+     * Displays and syncs results from Algolia searches.
+     * Must be nested within an nano-algolia component.
+     */
     interface NanoAlgoliaResults {
         /**
           * Whether new pages loaded by pagination will replace or be appended to the results block (this will be ignored if 'infiniteScroll' is set to true)
@@ -2918,6 +3353,12 @@ declare namespace LocalJSX {
          */
         "onNanoTplUpdated"?: (event: NanoAlgoliaResultsCustomEvent<HTMLNanoAlgoliaResultsElement>) => void;
     }
+    /**
+     * Displays media in the desired aspect ratio.
+     * You can slot in any replaced element, including `<iframe>`, `<img>`, and `<video>`.
+     * As the element's width changes, its height will resize proportionally. Only one element should be slotted into the container.
+     * The default aspect ratio is 16:9.
+     */
     interface NanoAspectRatio {
         /**
           * The aspect ratio of the embedded media in the format of `width:height`, e.g. `16:9`, `4:3`, or `1:1`. Ratios not in this format will be ignored.
@@ -2928,6 +3369,11 @@ declare namespace LocalJSX {
          */
         "fit"?: 'cover' | 'contain';
     }
+    /**
+     * `nano-checkbox` is used to let a user choose one or more options from a limited number of options.
+     * They appear as checked when activated.
+     * They can be checked by mouse, keyboard, touch or programmatically by setting the checked property.
+     */
     interface NanoCheckbox {
         /**
           * checked property that can be used to get/set the value. accepts only boolean values
@@ -2994,6 +3440,10 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    /**
+     * `nano-checkbox-group` is an optional wrapper for all `nano-checkbox` controls.
+     * It provides a convenient place to anchor a collective label and any validation issues.
+     */
     interface NanoCheckboxGroup {
         /**
           * Disable all the nested form controls
@@ -3015,6 +3465,10 @@ declare namespace LocalJSX {
           * The minimum number of checkboxes required to be valid. Only relevant for checkbox type controls. A validation error will be thrown if not enough controls are checked.
          */
         "min"?: number;
+        /**
+          * Called when a nested checkbox changes
+         */
+        "onNanoChange"?: (event: NanoCheckboxGroupCustomEvent<string | string[]>) => void;
         /**
           * Called when validation is performed (which depends on `validateOn`).
           * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.
@@ -3032,7 +3486,17 @@ declare namespace LocalJSX {
           * Current validation message - if any. @readonly
          */
         "validityMessage"?: string;
+        /**
+          * The current, collective checkbox value
+         */
+        "value"?: string[] | string;
     }
+    /**
+     * `nano-datalist` a visually consistent and more flexible replacement for a native
+     * [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist). Can be nested within a `nano-input`
+     * or linked to any input control via the `input` prop. Is used internally within `nano-select`.
+     * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using the `options` prop
+     */
     interface NanoDatalist {
         /**
           * return all the active options currently within the datalist. Can be useful for validation
@@ -3083,6 +3547,9 @@ declare namespace LocalJSX {
          */
         "type"?: 'select' | 'selctMulti' | 'input';
     }
+    /**
+     * 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.
+     */
     interface NanoDateInput {
         /**
           * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
@@ -3223,6 +3690,10 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    /**
+     * A highly performant, small and accessible date-picker.
+     * Customised from [Duet date-picker](https://duetds.github.io/date-picker/).
+     */
     interface NanoDatePicker {
         /**
           * The color to use from the application's color palette.
@@ -3294,6 +3765,9 @@ declare namespace LocalJSX {
          */
         "open"?: boolean;
     }
+    /**
+     * Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
+     */
     interface NanoDialog {
         /**
           * Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...`
@@ -3356,6 +3830,9 @@ declare namespace LocalJSX {
          */
         "storeMethod"?: StorageMethods;
     }
+    /**
+     * WIP / TODO. https://git.oxfordnanolabs.local/Digital/nano-components/-/issues/24
+     */
     interface NanoDrawer {
         /**
           * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of its parent element, set this prop and add `position: relative` to the parent.
@@ -3406,6 +3883,10 @@ declare namespace LocalJSX {
          */
         "type"?: 'overlay' | 'reveal' | 'push';
     }
+    /**
+     * Dropdowns show additional content in a panel.
+     * Designed to work well with nano-menu components to provide a list of options (`nano-nav-items` / `nano-option`).
+     */
     interface NanoDropdown {
         /**
           * Determines if the dropdown should open automatically when the trigger is clicked
@@ -3464,6 +3945,14 @@ declare namespace LocalJSX {
          */
         "tetherTo"?: HTMLElement;
     }
+    /**
+     * A toolbox for `nano-...` form fields and form validation.
+     * - Easy to add validation across field dependencies - e.g. "When Field1 contains '123' Field2 must contain '456'"
+     * - Easy access to whole form and individual field validity states
+     * - Easy access to form data payload
+     * = Access to 2-way, data bound reactive store
+     * - Scroll to invalid field on submit
+     */
     interface NanoFieldValidator {
         /**
           * Returns true if any nested fields have been changed @readonly
@@ -3526,6 +4015,12 @@ declare namespace LocalJSX {
          */
         "validationState"?: ValidationState[];
     }
+    /**
+     * A better UI experience for `input type="file"` form controls.
+     *   - Drag and Drop
+     *   - Validation options
+     *   - Preview and manage multiple files
+     */
     interface NanoFileUpload {
         /**
           * The accept attribute value is a string that defines the file types the file input should accept. E.g. for a MS Word file: `.doc, .docx,application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document`
@@ -3613,10 +4108,15 @@ declare namespace LocalJSX {
          */
         "validityMessage"?: string;
         /**
-          * A file input's value attribute contains a DOMString that represents the path to the selected file(s). If the user selected multiple files, the value represents the first file in the list of files they selected. You can reset the file-upload control by setting the value to an emptry string e.g. `var input.value = ''`
+          * A file input's value attribute contains a DOMString that represents the path to the selected file(s). If the user selected multiple files, the value represents the first file in the list of files they selected. You can reset the file-upload control by setting the value to an empty string e.g. `var input.value = ''`
          */
         "value"?: string;
     }
+    /**
+     * Nanopore digital global navigation and search bar.
+     * Incorporates MyAccount / SSO states (messages / cart / user name etc).
+     * Incorporates Algolia search.
+     */
     interface NanoGlobalNav {
         /**
           * Active MyAccount link sections. By default all will show.
@@ -3655,6 +4155,10 @@ declare namespace LocalJSX {
           * Url to the Nanopore message center. Will default to the url supplied by MyAccount
          */
         "msgUrl"?: string;
+        /**
+          * An alternative to both 'env' and 'ssoDataUrl'. You can directly provide a JSON object of myaccount data. (e.g. https://myaccount.nanoporetech.com/nav_bar_data.json) This is useful for SSR
+         */
+        "myAccountData"?: MyAccountData | null;
         /**
           * Logged in user details automatically populated from MyAccount
          */
@@ -3688,11 +4192,11 @@ declare namespace LocalJSX {
          */
         "searchIndeces"?: Array<SearchIndex>;
         /**
-          * Algolia search index to programatically set or to set an initial index
+          * Algolia search index to programmatically set or to set an initial index
          */
         "searchIndex"?: string;
         /**
-          * A search value to passed to Algolia to programatically get or to preload search results
+          * A search value to passed to Algolia to programmatically get or to preload search results
          */
         "searchValue"?: string;
         /**
@@ -3712,6 +4216,9 @@ declare namespace LocalJSX {
          */
         "ssoRedirect"?: string;
     }
+    /**
+     * Nanopore digital global navigation user profile.
+     */
     interface NanoGlobalNavUserProfile {
         /**
           * Logged in user details automatically populated from MyAccount
@@ -3722,12 +4229,23 @@ declare namespace LocalJSX {
          */
         "userProfileUrl"?: string;
     }
+    /**
+     * Nanopore Global Search results component
+     * to be used in conjunction with [Globla-Nav](/story/nano-compounds-global-nav).
+     * A shortcut / helper which combines algolia components.
+     * There should only be one <nano-global-search-results> per page
+     * and should be a direct child of <nano-global-nav>
+     */
     interface NanoGlobalSearchResults {
         /**
           * Fired when the user clicks the 'back' button / closes the search panel Calling `event.preventDefault()` will prevent it from being closed.
          */
         "onNanoSearchGoBack"?: (event: NanoGlobalSearchResultsCustomEvent<any>) => void;
     }
+    /**
+     * A context-aware CSS grid implementation.
+     * Uses it's own width to choose column number - not screen width.
+     */
     interface NanoGrid {
         /**
           * 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.
@@ -3782,12 +4300,18 @@ declare namespace LocalJSX {
          */
         "xxlCols"?: number;
     }
+    /**
+     * Grid items to be used with [grid](/story/nano-components-grid) elements
+     */
     interface NanoGridItem {
         /**
           * How to position this item within it's parent grid at different break points. Examples: xl-col-span-2 l-col-start-2 xxl-row-span-2 m-row-start-2
          */
         "gridStates"?: string;
     }
+    /**
+     * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.
+     */
     interface NanoHero {
         /**
           * src for backgronund image. For more control use the `background` slot instead.
@@ -3810,6 +4334,9 @@ declare namespace LocalJSX {
          */
         "theme"?: 'dark' | 'light';
     }
+    /**
+     * An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path). Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.
+     */
     interface NanoIcon {
         /**
           * Specifies the label to use for accessibility. Defaults to the icon name.
@@ -3844,6 +4371,9 @@ declare namespace LocalJSX {
          */
         "src"?: string;
     }
+    /**
+     * Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
+     */
     interface NanoIconButton {
         /**
           * Set to true to disable the button.
@@ -3882,6 +4412,9 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    /**
+     * Img with benefits. Lazy loading. Simple `srcSet` solution for both `<img>` and `background-image` varieties.
+     */
     interface NanoImg {
         /**
           * This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, or if the image is not yet downloaded.
@@ -3920,6 +4453,11 @@ declare namespace LocalJSX {
          */
         "srcSet"?: string;
     }
+    /**
+     * 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).
+     * It 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.
+     * The default styling reference comes from the [ONT styleguide](https://nanoporetech.zeroheight.com/styleguide/s/31282/p/230c74-text-input--textarea/b/942ee4)
+     */
     interface NanoInput {
         /**
           * 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.
@@ -4098,6 +4636,10 @@ declare namespace LocalJSX {
          */
         "value"?: string | null;
     }
+    /**
+     * Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.
+     * Manages focus state / active.
+     */
     interface NanoMenu {
         /**
           * get the focus state of the menu @readonly
@@ -4124,6 +4666,12 @@ declare namespace LocalJSX {
          */
         "type"?: 'menu' | 'listbox';
     }
+    /**
+     * Menu drawer - digital specific navigation strip designed to be open (default) or closed.
+     * Shows menu item logos only on minimised, expands to show entire menu item.
+     * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.
+     * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.
+     */
     interface NanoMenuDrawer {
         /**
           * Should element hide and move items into the nano-global-nav when items are cut off (this will only work when nano-menu-drawer is displayed at full screen)
@@ -4142,6 +4690,12 @@ declare namespace LocalJSX {
          */
         "saveState"?: boolean;
     }
+    /**
+     * Nav items to be used with the various nav items.
+     * [Globla-Nav](/story/compounds-global-nav)
+     * [Menu-Drawer](/story/components-menu-drawer)
+     * [Dropdown](/story/components-dropdown)
+     */
     interface NanoNavItem {
         /**
           * Whether secondary menus should close on blur
@@ -4204,6 +4758,9 @@ declare namespace LocalJSX {
          */
         "target"?: '_self' | '_blank' | '_parent' | '_top';
     }
+    /**
+     * Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)
+     */
     interface NanoOption {
         /**
           * Whether this option should be disabled
@@ -4230,6 +4787,9 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    /**
+     * Used to show the status of an ongoing operation.
+     */
     interface NanoProgressBar {
         /**
           * When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.
@@ -4244,6 +4804,12 @@ declare namespace LocalJSX {
          */
         "value"?: number;
     }
+    /**
+     * The Range slider lets users select from a range of values by moving
+     * the slider knob. It can accept dual knobs, but by default one knob controls the value of the range.
+     * Labels can be placed on either side of the range by adding the
+     * `slot="start"` or `slot="end"` to the element.
+     */
     interface NanoRange {
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`
@@ -4306,6 +4872,9 @@ declare namespace LocalJSX {
          */
         "value"?: RangeValue;
     }
+    /**
+     * Rating - a form element to allow the viewing and input of user feedback.
+     */
     interface NanoRating {
         /**
           * Disables the rating.
@@ -4354,6 +4923,12 @@ declare namespace LocalJSX {
          */
         "value"?: number;
     }
+    /**
+     * A Resize-Observer utility component.
+     * Takes a string list of sizes and optional class-names.
+     * Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.
+     * Additionally, can fire events when content no-longer fits within the element.
+     */
     interface NanoResizeObserve {
         /**
           * Fire `nanoResizeContentFitChange` events notifying whether content currently fits or does not on the x, y or both axis'. Also makes the `content-fit-...` slots available
@@ -4379,6 +4954,12 @@ declare namespace LocalJSX {
          */
         "states"?: string;
     }
+    /**
+     * The select component is a wrapper to the HTML select element with custom styling and additional functionality.
+     * It accepts most of the same properties as the HTML [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).
+     * It's multi selection functionality is vastly improved from the native solution. It allows for the control of
+     * value order through drag and drop or changing the insertion point with arrow keys. It also can allow for user defined values.
+     */
     interface NanoSelect {
         /**
           * in multiple mode, allow users to enter their own values
@@ -4506,6 +5087,11 @@ declare namespace LocalJSX {
          */
         "value"?: string | string[];
     }
+    /**
+     * Skeletons are used to show where content will eventually be drawn.
+     * Simple containers for scaffolding layouts that mimic what users will see when content has finished loading.
+     * Prevents large areas of empty space during asynchronous operations.
+     */
     interface NanoSkeleton {
         /**
           * When `true`, the skeleton will animate.
@@ -4522,6 +5108,11 @@ declare namespace LocalJSX {
          */
         "ready"?: boolean | null;
     }
+    /**
+     * The Slides component is a multi-section container. Each section can be swiped or dragged between.
+     * It contains any number of Slide components.
+     * Uses [Flickity](https://flickity.metafizzy.co/) under the hood. A good balance of options, flexibility and IE11 compatibility.
+     */
     interface NanoSlides {
         /**
           * Animation presets.
@@ -4600,6 +5191,9 @@ declare namespace LocalJSX {
          */
         "pager"?: boolean;
     }
+    /**
+     * Spinners are used to show the progress of an indeterminate operation.
+     */
     interface NanoSpinner {
         /**
           * Displays absolutely with an overlay
@@ -4610,6 +5204,9 @@ declare namespace LocalJSX {
          */
         "type"?: 'dna' | 'circle';
     }
+    /**
+     * Split panes display two adjacent panels, allowing the user to reposition them.
+     */
     interface NanoSplitPane {
         /**
           * When changing `position` via property, the pane will animate into position. Make `animationDuration` 0 to disable.
@@ -4652,6 +5249,9 @@ declare namespace LocalJSX {
          */
         "vertical"?: boolean;
     }
+    /**
+     * The Sticker component is a toolbox for 'sticking' items to scrolling containers.
+     */
     interface NanoSticker {
         /**
           * Only applicable to root stickers. When applied the sticker will grow or shrink to the scrollParent size
@@ -4742,6 +5342,12 @@ declare namespace LocalJSX {
          */
         "name"?: string;
     }
+    /**
+     * A tradtional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.
+     * Tabs can be stacked vertically or horizontally (which presents different styling variations) using the `placement` attribute.
+     * Horizonal tabs that don't fit will overflow and scroll appropriately.
+     * Tab-content can also be swiped to change tabs.
+     */
     interface NanoTabGroup {
         /**
           * The color to use from the application's color palette.
@@ -4784,6 +5390,17 @@ declare namespace LocalJSX {
          */
         "storeMethod"?: StorageMethods;
     }
+    /**
+     * A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.
+     * - Built-in search
+     * - Built-in column filter
+     * - Built-in column sort
+     * - Easily swap in API / async based search / filter & sort
+     * - Pin headers, footers, rows, columns
+     * - Drag-&-Drop columns to re-order
+     * - Add custom rendering at every level
+     * - Add custom properties at every level
+     */
     interface NanoTable {
         /**
           * The number of total blocks currently rendered in the table. @readonly
@@ -4928,6 +5545,9 @@ declare namespace LocalJSX {
          */
         "virtualTotalItems"?: number;
     }
+    /**
+     * Tooltips display additional information based on a specific action.
+     */
     interface NanoTooltip {
         /**
           * The tooltip's content. Alternatively, you can use the content slot.
@@ -5046,55 +5666,255 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            /**
+             * Simple accordion - only one item open at a time - must be used with [details](story/components-accordion--details) elements.
+             */
             "nano-accordion": LocalJSX.NanoAccordion & JSXBase.HTMLAttributes<HTMLNanoAccordionElement>;
+            /**
+             * Alerts are used to display important messages either inline, as toast notifications or as modals requiring action.
+             */
             "nano-alert": LocalJSX.NanoAlert & JSXBase.HTMLAttributes<HTMLNanoAlertElement>;
+            /**
+             * Algolia search container to contain and sync nano-algolia-results and nano-algolia-filter components.
+             * Can optionally contain nano-algolia-input components or use them as a 'resultsEmitter'
+             */
             "nano-algolia": LocalJSX.NanoAlgolia & JSXBase.HTMLAttributes<HTMLNanoAlgoliaElement>;
+            /**
+             * Displays and syncs algolia filters
+             * Must be nested within an nano-algolia component.
+             */
             "nano-algolia-filter": LocalJSX.NanoAlgoliaFilter & JSXBase.HTMLAttributes<HTMLNanoAlgoliaFilterElement>;
+            /**
+             * @deprecated Component for querying Algolia Indeces.
+             * Can be nested within an algolia element or used outside as a 'resultsEmitter' (see algolia component documentation)
+             * Must include one 'nano-input' component
+             */
             "nano-algolia-input": LocalJSX.NanoAlgoliaInput & JSXBase.HTMLAttributes<HTMLNanoAlgoliaInputElement>;
+            /**
+             * Displays results from Algolia searches.
+             * TODO / WIP
+             */
             "nano-algolia-pagination": LocalJSX.NanoAlgoliaPagination & JSXBase.HTMLAttributes<HTMLNanoAlgoliaPaginationElement>;
+            /**
+             * Displays and syncs results from Algolia searches.
+             * Must be nested within an nano-algolia component.
+             */
             "nano-algolia-results": LocalJSX.NanoAlgoliaResults & JSXBase.HTMLAttributes<HTMLNanoAlgoliaResultsElement>;
+            /**
+             * Displays media in the desired aspect ratio.
+             * You can slot in any replaced element, including `<iframe>`, `<img>`, and `<video>`.
+             * As the element's width changes, its height will resize proportionally. Only one element should be slotted into the container.
+             * The default aspect ratio is 16:9.
+             */
             "nano-aspect-ratio": LocalJSX.NanoAspectRatio & JSXBase.HTMLAttributes<HTMLNanoAspectRatioElement>;
+            /**
+             * `nano-checkbox` is used to let a user choose one or more options from a limited number of options.
+             * They appear as checked when activated.
+             * They can be checked by mouse, keyboard, touch or programmatically by setting the checked property.
+             */
             "nano-checkbox": LocalJSX.NanoCheckbox & JSXBase.HTMLAttributes<HTMLNanoCheckboxElement>;
+            /**
+             * `nano-checkbox-group` is an optional wrapper for all `nano-checkbox` controls.
+             * It provides a convenient place to anchor a collective label and any validation issues.
+             */
             "nano-checkbox-group": LocalJSX.NanoCheckboxGroup & JSXBase.HTMLAttributes<HTMLNanoCheckboxGroupElement>;
+            /**
+             * `nano-datalist` a visually consistent and more flexible replacement for a native
+             * [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist). Can be nested within a `nano-input`
+             * or linked to any input control via the `input` prop. Is used internally within `nano-select`.
+             * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using the `options` prop
+             */
             "nano-datalist": LocalJSX.NanoDatalist & JSXBase.HTMLAttributes<HTMLNanoDatalistElement>;
+            /**
+             * 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.
+             */
             "nano-date-input": LocalJSX.NanoDateInput & JSXBase.HTMLAttributes<HTMLNanoDateInputElement>;
+            /**
+             * A highly performant, small and accessible date-picker.
+             * Customised from [Duet date-picker](https://duetds.github.io/date-picker/).
+             */
             "nano-date-picker": LocalJSX.NanoDatePicker & JSXBase.HTMLAttributes<HTMLNanoDatePickerElement>;
             "nano-demo": LocalJSX.NanoDemo & JSXBase.HTMLAttributes<HTMLNanoDemoElement>;
             "nano-details": LocalJSX.NanoDetails & JSXBase.HTMLAttributes<HTMLNanoDetailsElement>;
+            /**
+             * Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
+             */
             "nano-dialog": LocalJSX.NanoDialog & JSXBase.HTMLAttributes<HTMLNanoDialogElement>;
+            /**
+             * WIP / TODO. https://git.oxfordnanolabs.local/Digital/nano-components/-/issues/24
+             */
             "nano-drawer": LocalJSX.NanoDrawer & JSXBase.HTMLAttributes<HTMLNanoDrawerElement>;
+            /**
+             * Dropdowns show additional content in a panel.
+             * Designed to work well with nano-menu components to provide a list of options (`nano-nav-items` / `nano-option`).
+             */
             "nano-dropdown": LocalJSX.NanoDropdown & JSXBase.HTMLAttributes<HTMLNanoDropdownElement>;
+            /**
+             * A toolbox for `nano-...` form fields and form validation.
+             * - Easy to add validation across field dependencies - e.g. "When Field1 contains '123' Field2 must contain '456'"
+             * - Easy access to whole form and individual field validity states
+             * - Easy access to form data payload
+             * = Access to 2-way, data bound reactive store
+             * - Scroll to invalid field on submit
+             */
             "nano-field-validator": LocalJSX.NanoFieldValidator & JSXBase.HTMLAttributes<HTMLNanoFieldValidatorElement>;
+            /**
+             * A better UI experience for `input type="file"` form controls.
+             *   - Drag and Drop
+             *   - Validation options
+             *   - Preview and manage multiple files
+             */
             "nano-file-upload": LocalJSX.NanoFileUpload & JSXBase.HTMLAttributes<HTMLNanoFileUploadElement>;
+            /**
+             * Nanopore digital global navigation and search bar.
+             * Incorporates MyAccount / SSO states (messages / cart / user name etc).
+             * Incorporates Algolia search.
+             */
             "nano-global-nav": LocalJSX.NanoGlobalNav & JSXBase.HTMLAttributes<HTMLNanoGlobalNavElement>;
+            /**
+             * Nanopore digital global navigation user profile.
+             */
             "nano-global-nav-user-profile": LocalJSX.NanoGlobalNavUserProfile & JSXBase.HTMLAttributes<HTMLNanoGlobalNavUserProfileElement>;
+            /**
+             * Nanopore Global Search results component
+             * to be used in conjunction with [Globla-Nav](/story/nano-compounds-global-nav).
+             * A shortcut / helper which combines algolia components.
+             * There should only be one <nano-global-search-results> per page
+             * and should be a direct child of <nano-global-nav>
+             */
             "nano-global-search-results": LocalJSX.NanoGlobalSearchResults & JSXBase.HTMLAttributes<HTMLNanoGlobalSearchResultsElement>;
+            /**
+             * A context-aware CSS grid implementation.
+             * Uses it's own width to choose column number - not screen width.
+             */
             "nano-grid": LocalJSX.NanoGrid & JSXBase.HTMLAttributes<HTMLNanoGridElement>;
+            /**
+             * Grid items to be used with [grid](/story/nano-components-grid) elements
+             */
             "nano-grid-item": LocalJSX.NanoGridItem & JSXBase.HTMLAttributes<HTMLNanoGridItemElement>;
+            /**
+             * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.
+             */
             "nano-hero": LocalJSX.NanoHero & JSXBase.HTMLAttributes<HTMLNanoHeroElement>;
+            /**
+             * An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path). Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.
+             */
             "nano-icon": LocalJSX.NanoIcon & JSXBase.HTMLAttributes<HTMLNanoIconElement>;
+            /**
+             * Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
+             */
             "nano-icon-button": LocalJSX.NanoIconButton & JSXBase.HTMLAttributes<HTMLNanoIconButtonElement>;
+            /**
+             * Img with benefits. Lazy loading. Simple `srcSet` solution for both `<img>` and `background-image` varieties.
+             */
             "nano-img": LocalJSX.NanoImg & JSXBase.HTMLAttributes<HTMLNanoImgElement>;
+            /**
+             * 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).
+             * It 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.
+             * The default styling reference comes from the [ONT styleguide](https://nanoporetech.zeroheight.com/styleguide/s/31282/p/230c74-text-input--textarea/b/942ee4)
+             */
             "nano-input": LocalJSX.NanoInput & JSXBase.HTMLAttributes<HTMLNanoInputElement>;
+            /**
+             * Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.
+             * Manages focus state / active.
+             */
             "nano-menu": LocalJSX.NanoMenu & JSXBase.HTMLAttributes<HTMLNanoMenuElement>;
+            /**
+             * Menu drawer - digital specific navigation strip designed to be open (default) or closed.
+             * Shows menu item logos only on minimised, expands to show entire menu item.
+             * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.
+             * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.
+             */
             "nano-menu-drawer": LocalJSX.NanoMenuDrawer & JSXBase.HTMLAttributes<HTMLNanoMenuDrawerElement>;
+            /**
+             * Nav items to be used with the various nav items.
+             * [Globla-Nav](/story/compounds-global-nav)
+             * [Menu-Drawer](/story/components-menu-drawer)
+             * [Dropdown](/story/components-dropdown)
+             */
             "nano-nav-item": LocalJSX.NanoNavItem & JSXBase.HTMLAttributes<HTMLNanoNavItemElement>;
+            /**
+             * Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)
+             */
             "nano-option": LocalJSX.NanoOption & JSXBase.HTMLAttributes<HTMLNanoOptionElement>;
+            /**
+             * Used to show the status of an ongoing operation.
+             */
             "nano-progress-bar": LocalJSX.NanoProgressBar & JSXBase.HTMLAttributes<HTMLNanoProgressBarElement>;
+            /**
+             * The Range slider lets users select from a range of values by moving
+             * the slider knob. It can accept dual knobs, but by default one knob controls the value of the range.
+             * Labels can be placed on either side of the range by adding the
+             * `slot="start"` or `slot="end"` to the element.
+             */
             "nano-range": LocalJSX.NanoRange & JSXBase.HTMLAttributes<HTMLNanoRangeElement>;
+            /**
+             * Rating - a form element to allow the viewing and input of user feedback.
+             */
             "nano-rating": LocalJSX.NanoRating & JSXBase.HTMLAttributes<HTMLNanoRatingElement>;
+            /**
+             * A Resize-Observer utility component.
+             * Takes a string list of sizes and optional class-names.
+             * Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.
+             * Additionally, can fire events when content no-longer fits within the element.
+             */
             "nano-resize-observe": LocalJSX.NanoResizeObserve & JSXBase.HTMLAttributes<HTMLNanoResizeObserveElement>;
+            /**
+             * The select component is a wrapper to the HTML select element with custom styling and additional functionality.
+             * It accepts most of the same properties as the HTML [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).
+             * It's multi selection functionality is vastly improved from the native solution. It allows for the control of
+             * value order through drag and drop or changing the insertion point with arrow keys. It also can allow for user defined values.
+             */
             "nano-select": LocalJSX.NanoSelect & JSXBase.HTMLAttributes<HTMLNanoSelectElement>;
+            /**
+             * Skeletons are used to show where content will eventually be drawn.
+             * Simple containers for scaffolding layouts that mimic what users will see when content has finished loading.
+             * Prevents large areas of empty space during asynchronous operations.
+             */
             "nano-skeleton": LocalJSX.NanoSkeleton & JSXBase.HTMLAttributes<HTMLNanoSkeletonElement>;
             "nano-slide": LocalJSX.NanoSlide & JSXBase.HTMLAttributes<HTMLNanoSlideElement>;
+            /**
+             * The Slides component is a multi-section container. Each section can be swiped or dragged between.
+             * It contains any number of Slide components.
+             * Uses [Flickity](https://flickity.metafizzy.co/) under the hood. A good balance of options, flexibility and IE11 compatibility.
+             */
             "nano-slides": LocalJSX.NanoSlides & JSXBase.HTMLAttributes<HTMLNanoSlidesElement>;
+            /**
+             * Spinners are used to show the progress of an indeterminate operation.
+             */
             "nano-spinner": LocalJSX.NanoSpinner & JSXBase.HTMLAttributes<HTMLNanoSpinnerElement>;
+            /**
+             * Split panes display two adjacent panels, allowing the user to reposition them.
+             */
             "nano-split-pane": LocalJSX.NanoSplitPane & JSXBase.HTMLAttributes<HTMLNanoSplitPaneElement>;
+            /**
+             * The Sticker component is a toolbox for 'sticking' items to scrolling containers.
+             */
             "nano-sticker": LocalJSX.NanoSticker & JSXBase.HTMLAttributes<HTMLNanoStickerElement>;
             "nano-tab": LocalJSX.NanoTab & JSXBase.HTMLAttributes<HTMLNanoTabElement>;
             "nano-tab-content": LocalJSX.NanoTabContent & JSXBase.HTMLAttributes<HTMLNanoTabContentElement>;
+            /**
+             * A tradtional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.
+             * Tabs can be stacked vertically or horizontally (which presents different styling variations) using the `placement` attribute.
+             * Horizonal tabs that don't fit will overflow and scroll appropriately.
+             * Tab-content can also be swiped to change tabs.
+             */
             "nano-tab-group": LocalJSX.NanoTabGroup & JSXBase.HTMLAttributes<HTMLNanoTabGroupElement>;
+            /**
+             * A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.
+             * - Built-in search
+             * - Built-in column filter
+             * - Built-in column sort
+             * - Easily swap in API / async based search / filter & sort
+             * - Pin headers, footers, rows, columns
+             * - Drag-&-Drop columns to re-order
+             * - Add custom rendering at every level
+             * - Add custom properties at every level
+             */
             "nano-table": LocalJSX.NanoTable & JSXBase.HTMLAttributes<HTMLNanoTableElement>;
+            /**
+             * Tooltips display additional information based on a specific action.
+             */
             "nano-tooltip": LocalJSX.NanoTooltip & JSXBase.HTMLAttributes<HTMLNanoTooltipElement>;
         }
     }