@nanoporetech-digital/components 4.9.4 → 5.0.0

package/dist/types/components.d.ts

@@ -5,11 +5,11 @@
  * 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, MyAccountData, 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, 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";
-import { EventEmitter } from "./stencil-public-runtime";
+import { Element, EventEmitter } from "./stencil-public-runtime";
 import { ObservableMap } from "@stencil/store";
 import { MyAccountUser as MyAccountUser1 } from "./components/global-nav/global-nav-interface";
 import { OptionInterface as OptionInterface1 } from "./components/option/option-interface";
@@ -1118,42 +1118,49 @@ export namespace Components {
     interface NanoGlobalSearchResults {
     }
     /**
-     * A context-aware CSS grid implementation.
-     * Uses it's own width to choose column number - not screen width.
+     * A lightweight, context-aware CSS grid implementation.
+     * - Define multiple grids templates at different breakpoints
+     * - Uses `@container` queries to select the correct grid depending on the current dimensions
+     * - Use `grid-states="..."` on direct descendants for `column` / `row` - `start` / `end`
+     * - SSR optimised
      */
     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.
-         */
-        "contentPanel": boolean;
-        /**
-          * Helper to make grid items expand to full height in IE11
-         */
-        "fullHeight": boolean;
         /**
           * the number of columns the grid has at the large breakpoint.
          */
         "lCols": number;
         /**
-          * the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.
+          * the component's large breakpoint. Note - all breakpoints are based on component width, not screen width. Will default to `px` if no unit supplied e.g. `20rem`
+         */
+        "lSize": number | string;
+        /**
+          * Optional large `grid-template`. *Note* - you must set `lCols` for this to take affect
          */
-        "lSize": number;
+        "lTpl"?: string;
         /**
           * the number of columns the grid has at the medium breakpoint.
          */
         "mCols": number;
         /**
-          * the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.
+          * the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width. Will default to `px` if no unit supplied e.g. `20rem`
+         */
+        "mSize": number | string;
+        /**
+          * Optional medium `grid-template`. *Note* - you must set `mCols` for this to take affect
          */
-        "mSize": number;
+        "mTpl"?: string;
         /**
           * the number of columns the grid has at the small breakpoint.
          */
         "sCols": number;
         /**
-          * the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.
+          * the component's small breakpoint. Note - all breakpoints are based on component width, not screen width. Will default to `px` if no unit supplied e.g. `20rem`
+         */
+        "sSize": number | string;
+        /**
+          * Optional small `grid-template`. *Note* - you must set `sCols` for this to take affect
          */
-        "sSize": number;
+        "sTpl"?: string;
         /**
           * shows a grid helper to visualise where columns are
          */
@@ -1163,33 +1170,35 @@ export namespace Components {
          */
         "xlCols": number;
         /**
-          * the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.
+          * the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width. Will default to `px` if no unit supplied e.g. `20rem`
          */
-        "xlSize": number;
+        "xlSize": number | string;
+        /**
+          * Optional xl `grid-template`. *Note* - you must set `xlCols` for this to take affect
+         */
+        "xlTpl"?: string;
         /**
           * the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint)
          */
         "xxlCols": number;
+        /**
+          * Optional xxl `grid-template`. *Note* - you must set `xxlCols` for this to take affect
+         */
+        "xxlTpl"?: string;
     }
     /**
+     * @deprecated - you can now use `grid-states="..."`
+     * on any direct `nano-grid` descendent without limitation rendering `nano-grid-item` obsolete.
      * Grid items to be used with [grid](/story/nano-components-grid) elements
      */
     interface NanoGridItem {
-        /**
-          * Called by parent grid to trigger new classes
-         */
-        "changeBP": (newGridSizes: GridSizes[]) => Promise<void>;
-        /**
-          * 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.
+          * src for background image. For more control use the `background` slot instead.
          */
         "imgSrc"?: string;
         /**
@@ -1254,6 +1263,10 @@ export namespace Components {
           * Set to true to disable the button.
          */
         "disabled": boolean;
+        /**
+          * The HTML form element or form element id. Used to submit a form when the button is not a child of the form.
+         */
+        "form": HTMLFormElement | string;
         /**
           * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
          */
@@ -1274,6 +1287,10 @@ export namespace Components {
           * The name of the button, submitted as a pair with the button’s value as part of the form data.
          */
         "name"?: string;
+        /**
+          * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)
+         */
+        "rel": string | undefined;
         /**
           * Sets focus on the internal button
          */
@@ -2068,6 +2085,103 @@ export namespace Components {
          */
         "updateAutoHeight": (speed?: number) => Promise<void>;
     }
+    /**
+     * An accessible and flexible re-order / sort utility component.
+     * - Drag and drop via mouse, touch or keyboard
+     * - Live announcements for screen readers
+     * - Works with or without an explicit handle (although with is preferable)
+     */
+    interface NanoSortable {
+        /**
+          * Items being sorted will animate into place
+         */
+        "animationEnabled": boolean;
+        /**
+          * The css animation timing applied when `animationEnabled` is `true`
+         */
+        "animationTiming": any;
+        /**
+          * A function that should attach a keyboard accessible control. When a `handleSelector` is not used - to allow keyboard accessibility - `createKeyboardHandle` should render a focusable element.  If your sortable item is itself focusable, you must use this function to render a control *outside* of the focusable element.
+          * @param _number
+          * @param _element
+          * @returns a function that attaches a keyboard accessible handle control element. The function itself *must* return the handle element.
+         */
+        "createKeyboardHandle": (_number: number, _element: Element) => HTMLElement;
+        /**
+          * Dragged items by default, will take whatever default css is applied in situ. When sortable items' dimensions are dynamic (i.e they can shrink / grow via the space allowed) dragging items can look 'wrong'. Apply `dragResize` to read & recreate the dragged items current dimensions when dragged.
+         */
+        "dragResize": boolean;
+        /**
+          * Use this class to change how the element looks whilst being sorted
+         */
+        "draggedClass": string;
+        /**
+          * Used to generate a screen reader live update, informing the user of the current element being dropped.
+          * @param el the element that has been dropped by the user
+          * @returns a string, describing the element that has been dropped
+         */
+        "droppedHelperText": (el: Element) => string;
+        /**
+          * Used in-conjunction with `dropzoneSelector`, applied when a dropzone is dragged over
+         */
+        "dropzoneActiveClass"?: string;
+        /**
+          * When dragging between grouped collections of items, it is possible to drag all sortable items from one group to another. At that point, you will not be able to drag items back to the original group. A `dropzoneSelector` allows you to define a placeholder area where items can always be dropped.
+         */
+        "dropzoneSelector"?: string;
+        /**
+          * Used to generate a screen reader live update, informing the user of the current element being grabbed.
+          * @param el the element that has been grabbed by the user
+          * @returns a string, describing the element being grabbed
+         */
+        "grabbedHelperText": (el: Element) => string;
+        /**
+          * Use this class to change how the handle looks whilst being sorted
+         */
+        "handleDraggedClass": string;
+        /**
+          * A css query selector which matches an element *within* the `itemSelector` element which will act like a drag handle. **Note** For keyboard a11y it's recommended to use `handleSelector` when possible. Alternatively, the `createKeyboardHandle` prop will be used
+         */
+        "handleSelector"?: string;
+        /**
+          * Accessibility helper text applied to handle controls
+         */
+        "helperText": string;
+        /**
+          * As a sortable element is interacted with, announcements are made to screen readers - informing the user what is changing. By default, the text from the element is extracted to describe the interacted with element. Use this function to provide a more meaningful, concise item descriptor
+          * @param el the element being interacted with
+          * @returns a string, describing the element being interacted with
+         */
+        "itemDescriptor": (el: Element) => string;
+        /**
+          * A css query selector which matches a set of elements that should be sortable. e.g. `<li>` or `<tr>`
+         */
+        "itemSelector": string;
+        /**
+          * The axis to lock dragging elements to. `undefined` means any axis
+         */
+        "orientation"?: 'horizontal' | 'vertical';
+        /**
+          * Use this class to change how the element looks when acting as a placeholder
+         */
+        "placeholderClass": string;
+        /**
+          * If sortable elements change dynamically, use this method to add handle controls to new elements
+         */
+        "refreshKeyboardHandles": () => Promise<void>;
+        /**
+          * Used to generate a screen reader live update, informing the user when items have been reordered.
+          * @param el the element that has been reordered by the user
+          * @param elements the elements in the sortable list
+          * @param position the new position of the dropped element
+          * @returns a string, describing the element being dropped
+         */
+        "reorderHelperText": (el: Element, elements: Element[], position: number) => string;
+        /**
+          * use `sortableHostElement` to watch a sortable list without needing to wrap in `nano-sortable`. Note that the `sortableHostElement` element css `position` will be set to `relative`
+         */
+        "sortableHostElement"?: HTMLElement;
+    }
     /**
      * Spinners are used to show the progress of an indeterminate operation.
      */
@@ -2263,7 +2377,6 @@ export namespace Components {
      * - 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
      */
@@ -2305,10 +2418,6 @@ export namespace Components {
     property: TableTypes.Prop,
     order: TableTypes.Order
   ) => Promise<true | TableTypes.Falsy>;
-        /**
-          * The default draggable option for all columns. `true` will enable column drag-to-reorder unless you set `draggable: false` on a column `false` will disable column drag-to-reorder unless you set `draggable: true` on a column
-         */
-        "defaultColDraggable": boolean;
         /**
           * The default sortable option for all columns. `true` will enable column sorting unless you set `sortable: false` on a column `false` will disable column sorting unless you set `sortable: true` on a column
          */
@@ -2522,10 +2631,6 @@ export interface NanoGlobalSearchResultsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNanoGlobalSearchResultsElement;
 }
-export interface NanoGridCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLNanoGridElement;
-}
 export interface NanoImgCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNanoImgElement;
@@ -2570,6 +2675,10 @@ export interface NanoSlidesCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNanoSlidesElement;
 }
+export interface NanoSortableCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNanoSortableElement;
+}
 export interface NanoSplitPaneCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNanoSplitPaneElement;
@@ -2828,8 +2937,11 @@ declare global {
         new (): HTMLNanoGlobalSearchResultsElement;
     };
     /**
-     * A context-aware CSS grid implementation.
-     * Uses it's own width to choose column number - not screen width.
+     * A lightweight, context-aware CSS grid implementation.
+     * - Define multiple grids templates at different breakpoints
+     * - Uses `@container` queries to select the correct grid depending on the current dimensions
+     * - Use `grid-states="..."` on direct descendants for `column` / `row` - `start` / `end`
+     * - SSR optimised
      */
     interface HTMLNanoGridElement extends Components.NanoGrid, HTMLStencilElement {
     }
@@ -2838,6 +2950,8 @@ declare global {
         new (): HTMLNanoGridElement;
     };
     /**
+     * @deprecated - you can now use `grid-states="..."`
+     * on any direct `nano-grid` descendent without limitation rendering `nano-grid-item` obsolete.
      * Grid items to be used with [grid](/story/nano-components-grid) elements
      */
     interface HTMLNanoGridItemElement extends Components.NanoGridItem, HTMLStencilElement {
@@ -3030,6 +3144,18 @@ declare global {
         prototype: HTMLNanoSlidesElement;
         new (): HTMLNanoSlidesElement;
     };
+    /**
+     * An accessible and flexible re-order / sort utility component.
+     * - Drag and drop via mouse, touch or keyboard
+     * - Live announcements for screen readers
+     * - Works with or without an explicit handle (although with is preferable)
+     */
+    interface HTMLNanoSortableElement extends Components.NanoSortable, HTMLStencilElement {
+    }
+    var HTMLNanoSortableElement: {
+        prototype: HTMLNanoSortableElement;
+        new (): HTMLNanoSortableElement;
+    };
     /**
      * Spinners are used to show the progress of an indeterminate operation.
      */
@@ -3088,7 +3214,6 @@ declare global {
      * - 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
      */
@@ -3151,6 +3276,7 @@ declare global {
         "nano-skeleton": HTMLNanoSkeletonElement;
         "nano-slide": HTMLNanoSlideElement;
         "nano-slides": HTMLNanoSlidesElement;
+        "nano-sortable": HTMLNanoSortableElement;
         "nano-spinner": HTMLNanoSpinnerElement;
         "nano-split-pane": HTMLNanoSplitPaneElement;
         "nano-sticker": HTMLNanoStickerElement;
@@ -4322,46 +4448,49 @@ declare namespace LocalJSX {
         "onNanoSearchGoBack"?: (event: NanoGlobalSearchResultsCustomEvent<any>) => void;
     }
     /**
-     * A context-aware CSS grid implementation.
-     * Uses it's own width to choose column number - not screen width.
+     * A lightweight, context-aware CSS grid implementation.
+     * - Define multiple grids templates at different breakpoints
+     * - Uses `@container` queries to select the correct grid depending on the current dimensions
+     * - Use `grid-states="..."` on direct descendants for `column` / `row` - `start` / `end`
+     * - SSR optimised
      */
     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.
-         */
-        "contentPanel"?: boolean;
-        /**
-          * Helper to make grid items expand to full height in IE11
-         */
-        "fullHeight"?: boolean;
         /**
           * the number of columns the grid has at the large breakpoint.
          */
         "lCols"?: number;
         /**
-          * the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.
+          * the component's large breakpoint. Note - all breakpoints are based on component width, not screen width. Will default to `px` if no unit supplied e.g. `20rem`
+         */
+        "lSize"?: number | string;
+        /**
+          * Optional large `grid-template`. *Note* - you must set `lCols` for this to take affect
          */
-        "lSize"?: number;
+        "lTpl"?: string;
         /**
           * the number of columns the grid has at the medium breakpoint.
          */
         "mCols"?: number;
         /**
-          * the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.
+          * the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width. Will default to `px` if no unit supplied e.g. `20rem`
          */
-        "mSize"?: number;
+        "mSize"?: number | string;
         /**
-          * Emitted when the `nano-grid` changes breakpoint
+          * Optional medium `grid-template`. *Note* - you must set `mCols` for this to take affect
          */
-        "onNanoBpChange"?: (event: NanoGridCustomEvent<string[]>) => void;
+        "mTpl"?: string;
         /**
           * the number of columns the grid has at the small breakpoint.
          */
         "sCols"?: number;
         /**
-          * the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.
+          * the component's small breakpoint. Note - all breakpoints are based on component width, not screen width. Will default to `px` if no unit supplied e.g. `20rem`
          */
-        "sSize"?: number;
+        "sSize"?: number | string;
+        /**
+          * Optional small `grid-template`. *Note* - you must set `sCols` for this to take affect
+         */
+        "sTpl"?: string;
         /**
           * shows a grid helper to visualise where columns are
          */
@@ -4371,29 +4500,35 @@ declare namespace LocalJSX {
          */
         "xlCols"?: number;
         /**
-          * the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.
+          * the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width. Will default to `px` if no unit supplied e.g. `20rem`
          */
-        "xlSize"?: number;
+        "xlSize"?: number | string;
+        /**
+          * Optional xl `grid-template`. *Note* - you must set `xlCols` for this to take affect
+         */
+        "xlTpl"?: string;
         /**
           * the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint)
          */
         "xxlCols"?: number;
+        /**
+          * Optional xxl `grid-template`. *Note* - you must set `xxlCols` for this to take affect
+         */
+        "xxlTpl"?: string;
     }
     /**
+     * @deprecated - you can now use `grid-states="..."`
+     * on any direct `nano-grid` descendent without limitation rendering `nano-grid-item` obsolete.
      * 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.
+          * src for background image. For more control use the `background` slot instead.
          */
         "imgSrc"?: string;
         /**
@@ -4458,6 +4593,10 @@ declare namespace LocalJSX {
           * Set to true to disable the button.
          */
         "disabled"?: boolean;
+        /**
+          * The HTML form element or form element id. Used to submit a form when the button is not a child of the form.
+         */
+        "form"?: HTMLFormElement | string;
         /**
           * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
          */
@@ -4478,6 +4617,10 @@ declare namespace LocalJSX {
           * The name of the button, submitted as a pair with the button’s value as part of the form data.
          */
         "name"?: string;
+        /**
+          * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)
+         */
+        "rel"?: string | undefined;
         /**
           * display the label as a `<nano-tooltip />`
          */
@@ -5311,6 +5454,115 @@ declare namespace LocalJSX {
          */
         "pager"?: boolean;
     }
+    /**
+     * An accessible and flexible re-order / sort utility component.
+     * - Drag and drop via mouse, touch or keyboard
+     * - Live announcements for screen readers
+     * - Works with or without an explicit handle (although with is preferable)
+     */
+    interface NanoSortable {
+        /**
+          * Items being sorted will animate into place
+         */
+        "animationEnabled"?: boolean;
+        /**
+          * The css animation timing applied when `animationEnabled` is `true`
+         */
+        "animationTiming"?: any;
+        /**
+          * A function that should attach a keyboard accessible control. When a `handleSelector` is not used - to allow keyboard accessibility - `createKeyboardHandle` should render a focusable element.  If your sortable item is itself focusable, you must use this function to render a control *outside* of the focusable element.
+          * @param _number
+          * @param _element
+          * @returns a function that attaches a keyboard accessible handle control element. The function itself *must* return the handle element.
+         */
+        "createKeyboardHandle"?: (_number: number, _element: Element) => HTMLElement;
+        /**
+          * Dragged items by default, will take whatever default css is applied in situ. When sortable items' dimensions are dynamic (i.e they can shrink / grow via the space allowed) dragging items can look 'wrong'. Apply `dragResize` to read & recreate the dragged items current dimensions when dragged.
+         */
+        "dragResize"?: boolean;
+        /**
+          * Use this class to change how the element looks whilst being sorted
+         */
+        "draggedClass"?: string;
+        /**
+          * Used to generate a screen reader live update, informing the user of the current element being dropped.
+          * @param el the element that has been dropped by the user
+          * @returns a string, describing the element that has been dropped
+         */
+        "droppedHelperText"?: (el: Element) => string;
+        /**
+          * Used in-conjunction with `dropzoneSelector`, applied when a dropzone is dragged over
+         */
+        "dropzoneActiveClass"?: string;
+        /**
+          * When dragging between grouped collections of items, it is possible to drag all sortable items from one group to another. At that point, you will not be able to drag items back to the original group. A `dropzoneSelector` allows you to define a placeholder area where items can always be dropped.
+         */
+        "dropzoneSelector"?: string;
+        /**
+          * Used to generate a screen reader live update, informing the user of the current element being grabbed.
+          * @param el the element that has been grabbed by the user
+          * @returns a string, describing the element being grabbed
+         */
+        "grabbedHelperText"?: (el: Element) => string;
+        /**
+          * Use this class to change how the handle looks whilst being sorted
+         */
+        "handleDraggedClass"?: string;
+        /**
+          * A css query selector which matches an element *within* the `itemSelector` element which will act like a drag handle. **Note** For keyboard a11y it's recommended to use `handleSelector` when possible. Alternatively, the `createKeyboardHandle` prop will be used
+         */
+        "handleSelector"?: string;
+        /**
+          * Accessibility helper text applied to handle controls
+         */
+        "helperText"?: string;
+        /**
+          * As a sortable element is interacted with, announcements are made to screen readers - informing the user what is changing. By default, the text from the element is extracted to describe the interacted with element. Use this function to provide a more meaningful, concise item descriptor
+          * @param el the element being interacted with
+          * @returns a string, describing the element being interacted with
+         */
+        "itemDescriptor"?: (el: Element) => string;
+        /**
+          * A css query selector which matches a set of elements that should be sortable. e.g. `<li>` or `<tr>`
+         */
+        "itemSelector"?: string;
+        /**
+          * Fired when a sortable element is dropped after having been picked up.
+         */
+        "onNanoDropped"?: (event: NanoSortableCustomEvent<{ element: HTMLElement }>) => void;
+        /**
+          * Fired when a sortable element is picked-up; via keyboard, mouse or touch. `event.preventDefault()` to prevent the element being picked-up.
+         */
+        "onNanoGrabbed"?: (event: NanoSortableCustomEvent<{ element: HTMLElement; index: number }>) => void;
+        /**
+          * Fired when an the order changes. Use this to update any underlying data model. `event.preventDefault()` to prevent the element being moved; will revert to original position.
+         */
+        "onNanoOrderChange"?: (event: NanoSortableCustomEvent<{
+    element: HTMLElement;
+    originalIndex: number;
+    targetIndex: number;
+  }>) => void;
+        /**
+          * The axis to lock dragging elements to. `undefined` means any axis
+         */
+        "orientation"?: 'horizontal' | 'vertical';
+        /**
+          * Use this class to change how the element looks when acting as a placeholder
+         */
+        "placeholderClass"?: string;
+        /**
+          * Used to generate a screen reader live update, informing the user when items have been reordered.
+          * @param el the element that has been reordered by the user
+          * @param elements the elements in the sortable list
+          * @param position the new position of the dropped element
+          * @returns a string, describing the element being dropped
+         */
+        "reorderHelperText"?: (el: Element, elements: Element[], position: number) => string;
+        /**
+          * use `sortableHostElement` to watch a sortable list without needing to wrap in `nano-sortable`. Note that the `sortableHostElement` element css `position` will be set to `relative`
+         */
+        "sortableHostElement"?: HTMLElement;
+    }
     /**
      * Spinners are used to show the progress of an indeterminate operation.
      */
@@ -5517,7 +5769,6 @@ declare namespace LocalJSX {
      * - 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
      */
@@ -5547,10 +5798,6 @@ declare namespace LocalJSX {
     property: TableTypes.Prop,
     order: TableTypes.Order
   ) => Promise<true | TableTypes.Falsy>;
-        /**
-          * The default draggable option for all columns. `true` will enable column drag-to-reorder unless you set `draggable: false` on a column `false` will disable column drag-to-reorder unless you set `draggable: true` on a column
-         */
-        "defaultColDraggable"?: boolean;
         /**
           * The default sortable option for all columns. `true` will enable column sorting unless you set `sortable: false` on a column `false` will disable column sorting unless you set `sortable: true` on a column
          */
@@ -5607,21 +5854,6 @@ declare namespace LocalJSX {
         "onNanoTblBlockRendered"?: (event: NanoTableCustomEvent<{
     block: number;
     totalBlocks: number;
-  }>) => void;
-        /**
-          * Fired when a column has started dragging
-         */
-        "onNanoTblColDrag"?: (event: NanoTableCustomEvent<{
-    column: TableTypes.Prop;
-  }>) => void;
-        /**
-          * Fired when a column has been dropped (after dragging) `event.preventDefault()` to stop column re-order.
-         */
-        "onNanoTblColDrop"?: (event: NanoTableCustomEvent<{
-    fromCol: TableTypes.Prop;
-    toCol: TableTypes.Prop;
-    fromIndex: number;
-    toIndex: number;
   }>) => void;
         /**
           * Fired when the table has done it's first complete render
@@ -5773,6 +6005,7 @@ declare namespace LocalJSX {
         "nano-skeleton": NanoSkeleton;
         "nano-slide": NanoSlide;
         "nano-slides": NanoSlides;
+        "nano-sortable": NanoSortable;
         "nano-spinner": NanoSpinner;
         "nano-split-pane": NanoSplitPane;
         "nano-sticker": NanoSticker;
@@ -5905,11 +6138,16 @@ declare module "@stencil/core" {
              */
             "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.
+             * A lightweight, context-aware CSS grid implementation.
+             * - Define multiple grids templates at different breakpoints
+             * - Uses `@container` queries to select the correct grid depending on the current dimensions
+             * - Use `grid-states="..."` on direct descendants for `column` / `row` - `start` / `end`
+             * - SSR optimised
              */
             "nano-grid": LocalJSX.NanoGrid & JSXBase.HTMLAttributes<HTMLNanoGridElement>;
             /**
+             * @deprecated - you can now use `grid-states="..."`
+             * on any direct `nano-grid` descendent without limitation rendering `nano-grid-item` obsolete.
              * Grid items to be used with [grid](/story/nano-components-grid) elements
              */
             "nano-grid-item": LocalJSX.NanoGridItem & JSXBase.HTMLAttributes<HTMLNanoGridItemElement>;
@@ -6007,6 +6245,13 @@ declare module "@stencil/core" {
              * Uses [Flickity](https://flickity.metafizzy.co/) under the hood.
              */
             "nano-slides": LocalJSX.NanoSlides & JSXBase.HTMLAttributes<HTMLNanoSlidesElement>;
+            /**
+             * An accessible and flexible re-order / sort utility component.
+             * - Drag and drop via mouse, touch or keyboard
+             * - Live announcements for screen readers
+             * - Works with or without an explicit handle (although with is preferable)
+             */
+            "nano-sortable": LocalJSX.NanoSortable & JSXBase.HTMLAttributes<HTMLNanoSortableElement>;
             /**
              * Spinners are used to show the progress of an indeterminate operation.
              */
@@ -6035,7 +6280,6 @@ declare module "@stencil/core" {
              * - 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
              */