@nanoporetech-digital/components 1.15.6 → 2.0.0

package/dist/types/components/tabs/tab.d.ts

@@ -1,4 +1,4 @@
-import { ComponentInterface } from '../../stencil-public-runtime';
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 /**
  * @slot - The tab's label.
  */
@@ -12,9 +12,14 @@ export declare class Tab implements ComponentInterface {
   active: boolean;
   /** Set to true to draw the tab in an active state. */
   disabled: boolean;
+  /** When true, the tab will be rendered with a close icon. */
+  closable: boolean;
+  /** Emitted when the tab is closable and the close button is activated. */
+  nanoTabClose: EventEmitter;
   /** Sets focus to the tab. */
   setFocus(): Promise<void>;
   /** Removes focus from the tab. */
   removeFocus(): Promise<void>;
+  private handleCloseClick;
   render(): any;
 }

package/dist/types/components.d.ts

@@ -5,9 +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, NavItemEventDetail, PageChangeEventDetail, PickerChangeEvent, RangeChangeEventDetail, RangeValue, ResizeStateChangeEventDetail, SearchIndex, SelectChangeEventDetail, SlideAnimation, StyleEventDetail, TextFieldTypes } from "./interface.d";
+import { AlgoliaNetworkError, AloliaSearchResultDetail, CheckboxChangeEventDetail, Color, ControlValidity, ControlValidityEventDetail, DateDisabledPredicate, DateInputChangeEventDetail, DragEvent, DuetLocalizedText, FileInputChangeEventDetail, FileWithUrl, FilterChangeEventDetail, Flickity, FlickityOptions, GridSizes, IndexResult, InputChangeEventDetail, LocalDateOpts, NavItemEventDetail, OptionInterface, PageChangeEventDetail, PickerChangeEvent, RangeChangeEventDetail, RangeValue, ResizeStateChangeEventDetail, SearchIndex, SelectChangeEventDetail, SlideAnimation, StyleEventDetail, TextFieldTypes } from "./interface.d";
 import { StorageMethods } from "./utils/store/component-store";
 import { DaysOfWeek } from "./utils/date-utils";
+import { OptionInterface as OptionInterface1 } from "./components/option/option-interface";
+import { Dropdown } from "./components/dropdown/dropdown";
 export namespace Components {
     interface NanoAccordion {
         /**
@@ -334,6 +336,44 @@ export namespace Components {
          */
         "validateOn"?: 'dirty' | 'submit' | 'submitThenDirty';
     }
+    interface NanoDatalist {
+        /**
+          * return all the active options currently within the datalist. Can be useful for validation
+         */
+        "activeOptions": HTMLNanoOptionElement[];
+        /**
+          * Use this option to disable to default filtering. This is useful if filtering happens externally via another method (e.g. via ajax)
+         */
+        "disableFilter": boolean;
+        /**
+          * Activate / deactivate the datalist control
+         */
+        "disabled": boolean;
+        /**
+          * nano-dropdown config options you can pass to the nested dropdown component
+         */
+        "dropDownConfig": { host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end"; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; };
+        /**
+          * A selector to a HTMLInputElement
+         */
+        "input"?: string | HTMLInputElement;
+        /**
+          * Force datalist open
+         */
+        "open": boolean;
+        /**
+          * Provide an option list. Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using this prop
+         */
+        "options"?: OptionInterface[];
+        /**
+          * By default, items in the list will appear 'selected' when the value in the linked input control matches. However you can add other selected options via the the selected prop.
+         */
+        "selected": string[];
+        /**
+          * Tweaks the datalist behaviour and linked control semantics and behaviour. e.g. 'select' will make the linked input control readonly.
+         */
+        "type": 'select' | 'selctMulti' | 'input';
+    }
     interface NanoDateInput {
         /**
           * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
@@ -1197,14 +1237,34 @@ export namespace Components {
         "value"?: string | null;
     }
     interface NanoMenu {
+        /**
+          * get the focus state of the menu @readonly
+         */
+        "hasFocus": boolean;
+        /**
+          * an accessible label
+         */
+        "label": string;
         /**
           * Removes focus from the menu.
          */
         "removeFocus": () => Promise<void>;
+        /**
+          * Removes any active item's state
+         */
+        "resetActiveItem": () => Promise<void>;
         /**
           * Sets focus on the menu.
          */
         "setFocus": () => Promise<void>;
+        /**
+          * Sets the current active item
+         */
+        "showActiveElement": () => Promise<void>;
+        /**
+          * changes the role of the underlying control - sometimes required for semantics
+         */
+        "type": 'menu' | 'listbox';
     }
     interface NanoMenuDrawer {
         /**
@@ -1262,6 +1322,28 @@ export namespace Components {
          */
         "target": '_self' | '_blank' | '_parent' | '_top';
     }
+    interface NanoOption {
+        /**
+          * Whether this option should be disabled
+         */
+        "disabled": boolean;
+        /**
+          * You can add extra meta for this option. When displayed in a list, users search / filter via extra related terms. Another usecase is 'endonyms'
+         */
+        "filterMeta": string;
+        /**
+          * Label of the option
+         */
+        "label": string;
+        /**
+          * Whether this option is selected
+         */
+        "selected": boolean;
+        /**
+          * Value of the option
+         */
+        "value": string;
+    }
     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"`
@@ -1385,6 +1467,10 @@ export namespace Components {
           * If `true`, the user cannot interact with the select.
          */
         "disabled": boolean;
+        /**
+          * nano-dropdown config options you can pass to the nested dropdown component
+         */
+        "dropDownConfig"?: Partial<Dropdown>;
         /**
           * Enable floating label behaviour. Will disable placeholder if set.
          */
@@ -1406,7 +1492,7 @@ export namespace Components {
          */
         "invalid": boolean;
         /**
-          * String to place within a label element.
+          * String to place within a label element. Alternatively use the 'label' slot
          */
         "label": string;
         /**
@@ -1430,15 +1516,9 @@ export namespace Components {
          */
         "name": string;
         /**
-          * Whether to use native <select> elements. Setting to false will use a similar UI as multiple="true"
+          * You can set options via js as an array of strings: `domElement.options = ['option 1', 'option 2']` or objects `domElement.options = [{label: 'option 1', value: 'opt-1'}]`. See `nano-option` docs for all available properties. Alternatively, you can nest `<nano-option>` elements within a `<nano-select>` Regardless - reading `options` will return the current component options - slotted or otherwise
          */
-        "native": boolean;
-        /**
-          * You can set options via js. domElement.options = ['option 1', 'option 2'] or [{label: 'option 1', value: 'opt-1'}]
-         */
-        "options": Array<
-    string | { label: string; value?: string }
-  >;
+        "options": Array<OptionInterface | string>;
         /**
           * Instructional text that shows before the select has a value. Text set here will be placed inside the label when a value is set. If you don't want this behaviour just set the first option to have no value.
          */
@@ -1480,25 +1560,7 @@ export namespace Components {
         /**
           * The value of the select.
          */
-        "value"?: string | Array<string | null>;
-    }
-    interface NanoSelectOption {
-        /**
-          * Whether this option should be disabled
-         */
-        "disabled": boolean;
-        /**
-          * Label of the option
-         */
-        "label": string;
-        /**
-          * Whether this option is selected
-         */
-        "selected": boolean;
-        /**
-          * Value of the option
-         */
-        "value": string;
+        "value": string | string[];
     }
     interface NanoSkeleton {
         /**
@@ -1682,6 +1744,10 @@ export namespace Components {
           * The active, selected tab. If none active, the first will automatically be selected.
          */
         "active": boolean;
+        /**
+          * When true, the tab will be rendered with a close icon.
+         */
+        "closable": boolean;
         /**
           * Set to true to draw the tab in an active state.
          */
@@ -1714,6 +1780,10 @@ export namespace Components {
           * The color to use from the application's color palette.
          */
         "color"?: Color;
+        /**
+          * Disable 'swipe to change tab' on devices with touch
+         */
+        "disableSwipe": boolean;
         /**
           * Disables the scroll arrows that appear when tabs overflow.
          */
@@ -1846,6 +1916,12 @@ declare global {
         prototype: HTMLNanoCheckboxGroupElement;
         new (): HTMLNanoCheckboxGroupElement;
     };
+    interface HTMLNanoDatalistElement extends Components.NanoDatalist, HTMLStencilElement {
+    }
+    var HTMLNanoDatalistElement: {
+        prototype: HTMLNanoDatalistElement;
+        new (): HTMLNanoDatalistElement;
+    };
     interface HTMLNanoDateInputElement extends Components.NanoDateInput, HTMLStencilElement {
     }
     var HTMLNanoDateInputElement: {
@@ -1960,6 +2036,12 @@ declare global {
         prototype: HTMLNanoNavItemElement;
         new (): HTMLNanoNavItemElement;
     };
+    interface HTMLNanoOptionElement extends Components.NanoOption, HTMLStencilElement {
+    }
+    var HTMLNanoOptionElement: {
+        prototype: HTMLNanoOptionElement;
+        new (): HTMLNanoOptionElement;
+    };
     interface HTMLNanoRangeElement extends Components.NanoRange, HTMLStencilElement {
     }
     var HTMLNanoRangeElement: {
@@ -1984,12 +2066,6 @@ declare global {
         prototype: HTMLNanoSelectElement;
         new (): HTMLNanoSelectElement;
     };
-    interface HTMLNanoSelectOptionElement extends Components.NanoSelectOption, HTMLStencilElement {
-    }
-    var HTMLNanoSelectOptionElement: {
-        prototype: HTMLNanoSelectOptionElement;
-        new (): HTMLNanoSelectOptionElement;
-    };
     interface HTMLNanoSkeletonElement extends Components.NanoSkeleton, HTMLStencilElement {
     }
     var HTMLNanoSkeletonElement: {
@@ -2055,6 +2131,7 @@ declare global {
         "nano-aspect-ratio": HTMLNanoAspectRatioElement;
         "nano-checkbox": HTMLNanoCheckboxElement;
         "nano-checkbox-group": HTMLNanoCheckboxGroupElement;
+        "nano-datalist": HTMLNanoDatalistElement;
         "nano-date-input": HTMLNanoDateInputElement;
         "nano-date-picker": HTMLNanoDatePickerElement;
         "nano-details": HTMLNanoDetailsElement;
@@ -2074,11 +2151,11 @@ declare global {
         "nano-menu": HTMLNanoMenuElement;
         "nano-menu-drawer": HTMLNanoMenuDrawerElement;
         "nano-nav-item": HTMLNanoNavItemElement;
+        "nano-option": HTMLNanoOptionElement;
         "nano-range": HTMLNanoRangeElement;
         "nano-rating": HTMLNanoRatingElement;
         "nano-resize-observe": HTMLNanoResizeObserveElement;
         "nano-select": HTMLNanoSelectElement;
-        "nano-select-option": HTMLNanoSelectOptionElement;
         "nano-skeleton": HTMLNanoSkeletonElement;
         "nano-slide": HTMLNanoSlideElement;
         "nano-slides": HTMLNanoSlidesElement;
@@ -2432,6 +2509,56 @@ declare namespace LocalJSX {
          */
         "validateOn"?: 'dirty' | 'submit' | 'submitThenDirty';
     }
+    interface NanoDatalist {
+        /**
+          * return all the active options currently within the datalist. Can be useful for validation
+         */
+        "activeOptions"?: HTMLNanoOptionElement[];
+        /**
+          * Use this option to disable to default filtering. This is useful if filtering happens externally via another method (e.g. via ajax)
+         */
+        "disableFilter"?: boolean;
+        /**
+          * Activate / deactivate the datalist control
+         */
+        "disabled"?: boolean;
+        /**
+          * nano-dropdown config options you can pass to the nested dropdown component
+         */
+        "dropDownConfig"?: { host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end"; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; };
+        /**
+          * A selector to a HTMLInputElement
+         */
+        "input"?: string | HTMLInputElement;
+        /**
+          * Fired when a currently selected item is reselected.
+         */
+        "onNanoDeselect"?: (event: CustomEvent<HTMLNanoOptionElement>) => void;
+        /**
+          * Fired when active options change
+         */
+        "onNanoOptionsUpdated"?: (event: CustomEvent<HTMLNanoOptionElement[]>) => void;
+        /**
+          * Fired when an item is selected.
+         */
+        "onNanoSelect"?: (event: CustomEvent<HTMLNanoOptionElement>) => void;
+        /**
+          * Force datalist open
+         */
+        "open"?: boolean;
+        /**
+          * Provide an option list. Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using this prop
+         */
+        "options"?: OptionInterface[];
+        /**
+          * By default, items in the list will appear 'selected' when the value in the linked input control matches. However you can add other selected options via the the selected prop.
+         */
+        "selected"?: string[];
+        /**
+          * Tweaks the datalist behaviour and linked control semantics and behaviour. e.g. 'select' will make the linked input control readonly.
+         */
+        "type"?: 'select' | 'selctMulti' | 'input';
+    }
     interface NanoDateInput {
         /**
           * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
@@ -3010,6 +3137,10 @@ declare namespace LocalJSX {
           * the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.
          */
         "mSize"?: number;
+        /**
+          * Emitted when the `nano-grid` changes breakpoint
+         */
+        "onNanoBpChange"?: (event: CustomEvent<string[]>) => void;
         /**
           * the number of columns the grid has at the small breakpoint.
          */
@@ -3284,7 +3415,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when a keyboard input occurred.
          */
-        "onNanoInput"?: (event: CustomEvent<KeyboardEvent>) => void;
+        "onNanoInput"?: (event: CustomEvent<InputEvent>) => void;
         /**
           * Called when validation is performed (which depends on `validateOn`).
           * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.
@@ -3348,6 +3479,14 @@ declare namespace LocalJSX {
         "value"?: string | null;
     }
     interface NanoMenu {
+        /**
+          * get the focus state of the menu @readonly
+         */
+        "hasFocus"?: boolean;
+        /**
+          * an accessible label
+         */
+        "label"?: string;
         /**
           * Emitted when the menu loses focus.
          */
@@ -3359,7 +3498,11 @@ declare namespace LocalJSX {
         /**
           * Emitted when a menu item is selected.
          */
-        "onNanoSelect"?: (event: CustomEvent<any>) => void;
+        "onNanoSelect"?: (event: CustomEvent<HTMLNanoOptionElement | HTMLNanoNavItemElement>) => void;
+        /**
+          * changes the role of the underlying control - sometimes required for semantics
+         */
+        "type"?: 'menu' | 'listbox';
     }
     interface NanoMenuDrawer {
         /**
@@ -3437,6 +3580,32 @@ declare namespace LocalJSX {
          */
         "target"?: '_self' | '_blank' | '_parent' | '_top';
     }
+    interface NanoOption {
+        /**
+          * Whether this option should be disabled
+         */
+        "disabled"?: boolean;
+        /**
+          * You can add extra meta for this option. When displayed in a list, users search / filter via extra related terms. Another usecase is 'endonyms'
+         */
+        "filterMeta"?: string;
+        /**
+          * Label of the option
+         */
+        "label"?: string;
+        /**
+          * Fired when an option is selected
+         */
+        "onNanoSelect"?: (event: CustomEvent<HTMLNanoOptionElement>) => void;
+        /**
+          * Whether this option is selected
+         */
+        "selected"?: boolean;
+        /**
+          * Value of the option
+         */
+        "value"?: string;
+    }
     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"`
@@ -3580,6 +3749,10 @@ declare namespace LocalJSX {
           * If `true`, the user cannot interact with the select.
          */
         "disabled"?: boolean;
+        /**
+          * nano-dropdown config options you can pass to the nested dropdown component
+         */
+        "dropDownConfig"?: Partial<Dropdown>;
         /**
           * Enable floating label behaviour. Will disable placeholder if set.
          */
@@ -3597,7 +3770,7 @@ declare namespace LocalJSX {
          */
         "invalid"?: boolean;
         /**
-          * String to place within a label element.
+          * String to place within a label element. Alternatively use the 'label' slot
          */
         "label": string;
         /**
@@ -3620,10 +3793,6 @@ declare namespace LocalJSX {
           * The name of the control, which is submitted with the form data.
          */
         "name"?: string;
-        /**
-          * Whether to use native <select> elements. Setting to false will use a similar UI as multiple="true"
-         */
-        "native"?: boolean;
         /**
           * Emitted when the select loses focus.
          */
@@ -3646,11 +3815,9 @@ declare namespace LocalJSX {
          */
         "onNanoValidate"?: (event: CustomEvent<ControlValidityEventDetail>) => void;
         /**
-          * You can set options via js. domElement.options = ['option 1', 'option 2'] or [{label: 'option 1', value: 'opt-1'}]
+          * You can set options via js as an array of strings: `domElement.options = ['option 1', 'option 2']` or objects `domElement.options = [{label: 'option 1', value: 'opt-1'}]`. See `nano-option` docs for all available properties. Alternatively, you can nest `<nano-option>` elements within a `<nano-select>` Regardless - reading `options` will return the current component options - slotted or otherwise
          */
-        "options"?: Array<
-    string | { label: string; value?: string }
-  >;
+        "options"?: Array<OptionInterface | string>;
         /**
           * Instructional text that shows before the select has a value. Text set here will be placed inside the label when a value is set. If you don't want this behaviour just set the first option to have no value.
          */
@@ -3678,25 +3845,7 @@ declare namespace LocalJSX {
         /**
           * The value of the select.
          */
-        "value"?: string | Array<string | null>;
-    }
-    interface NanoSelectOption {
-        /**
-          * Whether this option should be disabled
-         */
-        "disabled"?: boolean;
-        /**
-          * Label of the option
-         */
-        "label"?: string;
-        /**
-          * Whether this option is selected
-         */
-        "selected"?: boolean;
-        /**
-          * Value of the option
-         */
-        "value"?: string;
+        "value"?: string | string[];
     }
     interface NanoSkeleton {
         /**
@@ -3865,10 +4014,18 @@ declare namespace LocalJSX {
           * The active, selected tab. If none active, the first will automatically be selected.
          */
         "active"?: boolean;
+        /**
+          * When true, the tab will be rendered with a close icon.
+         */
+        "closable"?: boolean;
         /**
           * Set to true to draw the tab in an active state.
          */
         "disabled"?: boolean;
+        /**
+          * Emitted when the tab is closable and the close button is activated.
+         */
+        "onNanoTabClose"?: (event: CustomEvent<any>) => void;
         /**
           * The name of the tab panel the tab will control. The panel must be located in the same tab group.
          */
@@ -3889,18 +4046,30 @@ declare namespace LocalJSX {
           * The color to use from the application's color palette.
          */
         "color"?: Color;
+        /**
+          * Disable 'swipe to change tab' on devices with touch
+         */
+        "disableSwipe"?: boolean;
         /**
           * Disables the scroll arrows that appear when tabs overflow.
          */
         "noScrollControls"?: boolean;
+        /**
+          * Emitted when a closable tab is removed.
+         */
+        "onNanoTabClose"?: (event: CustomEvent<{ name: string }>) => void;
         /**
           * Emitted when a tab is hidden.
          */
-        "onNanoTabHide"?: (event: CustomEvent<any>) => void;
+        "onNanoTabHide"?: (event: CustomEvent<{ name: string }>) => void;
         /**
           * Emitted when a tab is shown.
          */
-        "onNanoTabShow"?: (event: CustomEvent<any>) => void;
+        "onNanoTabShow"?: (event: CustomEvent<{ name: string }>) => void;
+        /**
+          * Emitted when the tab is closable and the close button is activated.
+         */
+        "onNanoTabWillClose"?: (event: CustomEvent<{ name: string }>) => void;
         /**
           * The placement of the tabs.
          */
@@ -3982,6 +4151,7 @@ declare namespace LocalJSX {
         "nano-aspect-ratio": NanoAspectRatio;
         "nano-checkbox": NanoCheckbox;
         "nano-checkbox-group": NanoCheckboxGroup;
+        "nano-datalist": NanoDatalist;
         "nano-date-input": NanoDateInput;
         "nano-date-picker": NanoDatePicker;
         "nano-details": NanoDetails;
@@ -4001,11 +4171,11 @@ declare namespace LocalJSX {
         "nano-menu": NanoMenu;
         "nano-menu-drawer": NanoMenuDrawer;
         "nano-nav-item": NanoNavItem;
+        "nano-option": NanoOption;
         "nano-range": NanoRange;
         "nano-rating": NanoRating;
         "nano-resize-observe": NanoResizeObserve;
         "nano-select": NanoSelect;
-        "nano-select-option": NanoSelectOption;
         "nano-skeleton": NanoSkeleton;
         "nano-slide": NanoSlide;
         "nano-slides": NanoSlides;
@@ -4031,6 +4201,7 @@ declare module "@stencil/core" {
             "nano-aspect-ratio": LocalJSX.NanoAspectRatio & JSXBase.HTMLAttributes<HTMLNanoAspectRatioElement>;
             "nano-checkbox": LocalJSX.NanoCheckbox & JSXBase.HTMLAttributes<HTMLNanoCheckboxElement>;
             "nano-checkbox-group": LocalJSX.NanoCheckboxGroup & JSXBase.HTMLAttributes<HTMLNanoCheckboxGroupElement>;
+            "nano-datalist": LocalJSX.NanoDatalist & JSXBase.HTMLAttributes<HTMLNanoDatalistElement>;
             "nano-date-input": LocalJSX.NanoDateInput & JSXBase.HTMLAttributes<HTMLNanoDateInputElement>;
             "nano-date-picker": LocalJSX.NanoDatePicker & JSXBase.HTMLAttributes<HTMLNanoDatePickerElement>;
             "nano-details": LocalJSX.NanoDetails & JSXBase.HTMLAttributes<HTMLNanoDetailsElement>;
@@ -4050,11 +4221,11 @@ declare module "@stencil/core" {
             "nano-menu": LocalJSX.NanoMenu & JSXBase.HTMLAttributes<HTMLNanoMenuElement>;
             "nano-menu-drawer": LocalJSX.NanoMenuDrawer & JSXBase.HTMLAttributes<HTMLNanoMenuDrawerElement>;
             "nano-nav-item": LocalJSX.NanoNavItem & JSXBase.HTMLAttributes<HTMLNanoNavItemElement>;
+            "nano-option": LocalJSX.NanoOption & JSXBase.HTMLAttributes<HTMLNanoOptionElement>;
             "nano-range": LocalJSX.NanoRange & JSXBase.HTMLAttributes<HTMLNanoRangeElement>;
             "nano-rating": LocalJSX.NanoRating & JSXBase.HTMLAttributes<HTMLNanoRatingElement>;
             "nano-resize-observe": LocalJSX.NanoResizeObserve & JSXBase.HTMLAttributes<HTMLNanoResizeObserveElement>;
             "nano-select": LocalJSX.NanoSelect & JSXBase.HTMLAttributes<HTMLNanoSelectElement>;
-            "nano-select-option": LocalJSX.NanoSelectOption & JSXBase.HTMLAttributes<HTMLNanoSelectOptionElement>;
             "nano-skeleton": LocalJSX.NanoSkeleton & JSXBase.HTMLAttributes<HTMLNanoSkeletonElement>;
             "nano-slide": LocalJSX.NanoSlide & JSXBase.HTMLAttributes<HTMLNanoSlideElement>;
             "nano-slides": LocalJSX.NanoSlides & JSXBase.HTMLAttributes<HTMLNanoSlidesElement>;

package/dist/types/interface.d.ts

@@ -16,6 +16,7 @@ export * from './components/date-input/date-input-interface';
 export * from './components/resize-observe/resize-observe-interface';
 export * from './components/alert/alert-interface';
 export * from './components/file-upload/file-upload-interface';
+export * from './components/option/option-interface';
 
 export { Gesture, GestureConfig, GestureDetail } from './utils/gesture';
 export type PredefinedColors =

package/dist/types/utils/active-element.d.ts

@@ -0,0 +1 @@
+export declare function getActiveElement(root?: Document | ShadowRoot): Element | null;

package/dist/types/utils/dom.d.ts

@@ -1,5 +1,13 @@
 export declare function closestElement(selector: string, base?: Element): Element;
-export declare const getDirectChildren: (elm: Element, sel: string) => Array<HTMLElement>;
+/**
+ * Get direct child elements / nodes from from any element (for when querySelectorAll(':scope > .selector') fails)
+ * @param el - a root element to query from
+ * @param sel - a query selector string
+ * @param elesOnly - return only Elements (no Nodes)
+ */
+export declare function getDirectChildren<T = HTMLElement>(el: Element, sel: string, elesOnly?: true): Array<T>;
+export declare function getDirectChildren<T = HTMLElement>(el: Element, sel: string, elesOnly?: 'slot'): Array<T>;
+export declare function getDirectChildren<T = HTMLElement>(el: Element, sel: string, elesOnly?: false): Array<T | Node>;
 export declare const getSiblings: (el: Element, sel?: string) => Array<Element>;
 export declare function getOffset(element: HTMLElement, parent: HTMLElement): {
   top: number;

package/dist/types/utils/index.d.ts

@@ -1,10 +1,11 @@
 import { Side } from '../interface';
 export * from './dom';
 export * from './throttle';
-export * from './legacy';
 export * from './scroll';
 export * from './slot';
 export * from './theme';
+export * from './active-element';
+export * from './tabbable';
 /**
  * Patched Request Animation Frame method.
  * Perform a function between browser paints for less page jank

package/dist/types/utils/tabbable.d.ts

@@ -1,2 +1,2 @@
-export declare function getTabbableElements(root: HTMLElement | ShadowRoot): HTMLElement[];
-export declare function getNearestTabbableElement(el: HTMLElement): HTMLElement | null;
+export declare function getTabbableElements(root: HTMLElement | ShadowRoot, first?: boolean): HTMLElement[];
+export declare function getNearestTabbableElement(el: Element): HTMLElement | null;

package/dist/types/utils/testing/index.d.ts

@@ -1,5 +1,5 @@
 import { E2EPage } from '@stencil/core/testing';
-import { Page as PuppeteerPage } from 'puppeteer';
+import { ElementHandle, Page as PuppeteerPage } from 'puppeteer';
 import axe from 'axe-core';
 import { MatchImageSnapshotOptions } from 'jest-image-snapshot';
 declare global {
@@ -40,9 +40,10 @@ export declare class E2EPlayGround<T> {
   }): Promise<NanoE2EPage>;
   reportA11y(): Promise<string>;
   component(): Promise<import("@stencil/core/testing").E2EElement>;
-  componentQuery(selectorStr: string, shadow?: boolean): Promise<import("puppeteer").ElementHandle<Element>>;
+  componentQuery(selectorStr: string, shadow?: boolean): Promise<ElementHandle<Element>>;
 }
 export declare function getFocusedElement(page: E2EPage, shadowEleSelector?: string): Promise<import("puppeteer").JSHandle<unknown>>;
+export declare function clickOnElement(page: E2EPage, elem: ElementHandle<Element>, x?: number, y?: number): Promise<void>;
 export declare function createPage(optionsOrHtml?: string | NanoE2EPageOptions): Promise<NanoE2EPage>;
 export declare const kebabize: (str: any) => any;
 export declare const screenshotSettings: (dirname: string) => MatchImageSnapshotOptions;