@nanoporetech-digital/components 1.13.17 → 1.13.21

package/dist/types/components.d.ts

@@ -0,0 +1,4039 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * 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, FilterChangeEventDetail, Flickity, FlickityOptions, GridSizes, IndexResult, InputChangeEventDetail, LocalDateOpts, NavItemEventDetail, 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";
+export namespace Components {
+    interface NanoAccordion {
+        /**
+          * Color to use from the color palette.
+         */
+        "color"?: Color;
+    }
+    interface NanoAlert {
+        /**
+          * Displays the alert as a dialog / modal - more akin to a traditional js alert().
+          * @param label a label for assistive technology
+         */
+        "alert": (label: string) => Promise<void>;
+        /**
+          * Set to true to make the alert closable.
+         */
+        "closable": boolean;
+        /**
+          * The color to use from the application's color palette.
+         */
+        "color"?: Color;
+        /**
+          * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the alert before it closes (e.g. moves the mouse over it), the timer will restart.
+         */
+        "duration": number;
+        /**
+          * Hides the alert
+         */
+        "hide": () => Promise<boolean>;
+        /**
+          * Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods.
+         */
+        "open": boolean;
+        /**
+          * Shows the alert.
+         */
+        "show": () => Promise<boolean>;
+        /**
+          * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by calling this method again. The returned promise will resolve after the alert is hidden.
+          * @param position options are tr (top-right - default), tl (top-left), br (bottom-right), bl (bottom-left)
+          * @returns a promise which will resolve after the alert has hidden
+         */
+        "toast": (position?: 'tr' | 'tl' | 'bl' | 'br') => Promise<void>;
+    }
+    interface NanoAlgolia {
+        /**
+          * An Algolia API Key. Used in conjunction with 'searchIndex' & 'appId'.
+         */
+        "apiKey": string;
+        /**
+          * An Algolia App ID key. Used in conjunction with 'searchIndex' & 'apiKey'.
+         */
+        "appId": string;
+        /**
+          * Will maintain a search all / '*' on init and reset allowing for a view then filter experience rather than a search first experience
+         */
+        "browseIndex": boolean;
+        /**
+          * Query filters to apply to all searches. Refer to https://www.algolia.com/doc/api-reference/api-parameters/filters for format.
+         */
+        "filters": Array<string>;
+        /**
+          * JS querSelector string of a `nano-input` / `input` element from which to listen to `nano-change` or `change` events and change the `query` prop. Not required if an appropriate field is in the 'search-input' slot
+         */
+        "listenTo"?: string;
+        /**
+          * Minimum number of characters before performing a search
+         */
+        "minChars": number;
+        /**
+          * The external operator joining filter values.
+         */
+        "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`
+         */
+        "query": string;
+        /**
+          * @param facetName - will clear all filter selections of that type
+          * @param facetValue - will remove a single filter selection Remove facet filters (as set from nano-algolia-filter elements). The omission or both will remove all facet filters
+         */
+        "removeFilters": (facetName?: string, facetValue?: string) => Promise<void>;
+        /**
+          * Changes the index without removing any current filters. Most appropriate for algolia replicas.
+         */
+        "replicaIndex": string;
+        /**
+          * The current algolia page of results currently being viewed or to get.
+         */
+        "resultsPage": number;
+        /**
+          * Algolia search index. Used in conjunction with 'apiKey' & 'appId'. ``` { index: string, // algolia index name   domain?: string, // used in template filters to resolve incomplete url fields   filters?: [string], // algolia facets to retrive   hitsPerPage?: number,   name?: string // human readable index name } ```
+         */
+        "searchIndex": SearchIndex;
+        /**
+          * Algolia search index name. Alternative to 'searchIndex'. A simplified shortcut for setting an index. Properties such as hitsPerPage and facets will come from the algolia index
+         */
+        "searchIndexName": string;
+        /**
+          * Show the result panel. By default it will automatically show when the result receives new hits.
+         */
+        "showResults": boolean;
+        /**
+          * Store search queries (against this ID) to the component store. Use in conjunction with storeMethod
+         */
+        "storeId"?: string;
+        /**
+          * The method of storage. Either session storage, url hash (after the '#') or url query (after the '?').
+         */
+        "storeMethod": StorageMethods;
+        /**
+          * Template engine to use when rendering results and filters. Defaults to Squirrel v8 (https://squirrelly.js.org/). This gives you access to the underlying squirrel object allowing you to modify it's configuration / add filters.
+         */
+        "tplEngine": Object;
+        /**
+          * Template engine render function to use when rendering results and filters. Defaults to Squirrel v8's render (https://squirrelly.js.org/).
+         */
+        "tplRenderFn": (...args: any[]) => string;
+    }
+    interface NanoAlgoliaFilter {
+        /**
+          * Name of this filter - must match an appropriate algolia facet on a parent nano-algolia index to display
+         */
+        "filterName": string;
+        /**
+          * The internal operator joining filter values.
+         */
+        "operator": 'or' | 'and';
+        /**
+          * Store search queries (against this ID) to the component store. Use in conjunction with storeMethod
+         */
+        "storeId"?: string;
+        /**
+          * The method of storage. Either session storage, url hash (after the '#') or url query (after the '?').
+         */
+        "storeMethod": StorageMethods;
+        /**
+          * Set values of this filter. Will result in form elements being selected. '|' delimited string or array.
+         */
+        "value": string | Array<string>;
+    }
+    interface NanoAlgoliaInput {
+        /**
+          * An Algolia API Key. Used in conjunction with 'searchIndex' & 'appId'. Alternatively this will be set automatically when nested within an algolia component
+         */
+        "apiKey": string;
+        /**
+          * An Algolia App ID key. Used in conjunction with 'searchIndex' & 'apiKey'. Alternatively this will be set automatically when nested within an algolia component
+         */
+        "appId": string;
+        /**
+          * Automatically emit results data to algolia components. For example, if you wanted to provide an 'autocomplete' style dropdown before showing the main results with a submit button
+         */
+        "autoEmit": boolean;
+        /**
+          * Will maintain a search all / '*' on init and reset allowing for a view then filter experience rather than a search first experience
+         */
+        "browseIndex": boolean;
+        /**
+          * Minimum number of characters before performing a search
+         */
+        "minChars": number;
+        /**
+          * Manually emit search results to algolia components. Useful if you don't wish to search on input change / want to provide 'autocomplete' options or / and want to use a submit button
+         */
+        "search": () => Promise<void>;
+        /**
+          * Algolia search index. Used in conjunction with 'searchIndex' & 'appId'. Alternatively this will be set automatically if you're using a 'resultsEmitter' element. ``` { index: string, // algolia index name   domain?: string, // used in template filers to resolve incomplete url fields   filters?: [string], // algolia facets to retrive   hitsPerPage?: number,   name?: string // human readable index name } ```
+         */
+        "searchIndex": SearchIndex;
+        /**
+          * Algolia search index name. Alternative to 'searchIndex'. A simplified shortcut for setting an index. properties such as hitsPerPage and facets will come from the algolia index
+         */
+        "searchIndexName": string;
+        /**
+          * Store search queries (against this ID) to the component store. Use in conjunction with storeMethod
+         */
+        "storeId"?: string;
+        /**
+          * The method of storage. Either session storage, url hash (after the '#') or url query (after the '?').
+         */
+        "storeMethod": StorageMethods;
+    }
+    interface NanoAlgoliaPagination {
+        /**
+          * Go to a particular page
+         */
+        "goToPage": (page: number) => Promise<void>;
+        /**
+          * Max number of page numbers to show
+         */
+        "maxToShow": number;
+        /**
+          * Go to next page from current
+         */
+        "nextPage": () => Promise<void>;
+        /**
+          * Go to previous page from current
+         */
+        "prevPage": () => Promise<void>;
+    }
+    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)
+         */
+        "appendPages": boolean;
+        /**
+          * Load and append pages automatically on scroll
+         */
+        "infiniteScroll": boolean;
+    }
+    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.
+         */
+        "aspectRatio": string;
+        /**
+          * Determines how content will be resized to fit its container.
+         */
+        "fit": 'cover' | 'contain';
+    }
+    interface NanoCheckbox {
+        /**
+          * checked property that can be used to get/set the value. accepts only boolean values
+         */
+        "checked": boolean;
+        /**
+          * Color to use from your application's color palette.
+         */
+        "color"?: Color;
+        /**
+          * If `true`, the user cannot interact with the checkbox.
+         */
+        "disabled": boolean;
+        /**
+          * Returns the native input control
+         */
+        "getInputElement": () => Promise<HTMLInputElement>;
+        "hasFocus": boolean;
+        /**
+          * If `true`, the checkbox will visually appear as indeterminate (only relevant for type="checkbox")
+         */
+        "indeterminate": boolean;
+        /**
+          * This will be true when the control is in an invalid state. Validity is determined by the `required` prop. Or if custom validity message is set.
+         */
+        "invalid": boolean;
+        /**
+          * label property that can be used to set the label text. Alternatively you may use a label slot.
+         */
+        "label"?: string;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name": string;
+        /**
+          * Removes focus from the checkbox.
+         */
+        "removeFocus": () => Promise<void>;
+        /**
+          * Checks for validity and shows the browser's validation message if the control is invalid.
+         */
+        "reportError": () => Promise<boolean>;
+        /**
+          * Set to true to make the field required.
+         */
+        "required": boolean;
+        /**
+          * Sets a custom validation message. If `message` is not empty, the field will be considered invalid. Use in conjunction with `nano-checkbox-group`
+         */
+        "setError": (message: string) => Promise<void>;
+        /**
+          * Sets focus on the checkbox.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * Controls the underlying field type and style.
+         */
+        "type": | 'radio'
+    | 'checkbox'
+    | 'tag'
+    | 'segment'
+    | 'segment-pill';
+        /**
+          * The value of a checkbox is analogous to the value of an `<input type='checkbox'>`, it's only present when `checked` is true.
+         */
+        "value": string;
+    }
+    interface NanoCheckboxGroup {
+        /**
+          * Disable all the nested form controls
+         */
+        "disabled": boolean | null;
+        "invalid": boolean;
+        /**
+          * A common label for children controls
+         */
+        "legend": string;
+        /**
+          * The maximum number of checkboxes allowed. Only relevant for checkbox type controls. Other controls will automatically be disabled upon reaching this number.
+         */
+        "max": number;
+        /**
+          * 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;
+        /**
+          * Get the current state of the control.
+          * @param validateFirst - perform validation first before reporting
+          * @returns `{ isValid: boolean, errorMessage: string }`
+         */
+        "reportValidity": (validateFirst: boolean) => Promise<ControlValidity>;
+        /**
+          * Whether to show validation errors underneath input
+         */
+        "showInlineError": boolean;
+        /**
+          * When should the field perform validation
+         */
+        "validateOn"?: 'dirty' | 'submit' | 'submitThenDirty';
+    }
+    interface NanoDateInput {
+        /**
+          * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+         */
+        "autofocus": boolean;
+        /**
+          * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
+         */
+        "clearInput": boolean;
+        /**
+          * Close the picker after a date is selected
+         */
+        "closeAfterPicked": boolean;
+        /**
+          * The color to use from the application's color palette.
+         */
+        "color"?: Color;
+        /**
+          * The order of the date parts for entry and display. e.g. dmy = dd mm yyyy
+         */
+        "dateOrder": 'dmy' | 'mdy' | 'ymd' | 'dym';
+        /**
+          * If `true`, the user cannot interact with the input.
+         */
+        "disabled": boolean;
+        /**
+          * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc. Default is Monday.
+         */
+        "firstDayOfWeek"?: DaysOfWeek;
+        /**
+          * Enable floating label behaviour. Will disable placeholder if set.
+         */
+        "floatLabel": boolean;
+        /**
+          * The form element to associate the select with (its form owner). Must be the id of a form.
+         */
+        "form"?: string | null;
+        /**
+          * Returns the native `<input>` element used under the hood.
+         */
+        "getInputElement": () => Promise<HTMLInputElement | HTMLTextAreaElement>;
+        /**
+          * Whether to show a long form, confirmation date string of the one currently entered
+         */
+        "helperText": boolean;
+        /**
+          * Options for the date string display. Refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString.
+         */
+        "helperTextFormat": LocalDateOpts;
+        /**
+          * Visually hide the label - but make it accessible.
+         */
+        "hideLabel"?: boolean;
+        /**
+          * Initial picker date. Will be to `value` if set. Will be today's date if nothing set. Must be in IS0-8601 format: YYYY-MM-DD.
+         */
+        "initialPickerDate"?: string;
+        /**
+          * String to place within a label element. Alternatively you may use a label slot.
+         */
+        "label"?: string;
+        /**
+          * Button labels, day names, month names, etc, used for localization. Default is English.
+         */
+        "localization"?: DuetLocalizedText;
+        /**
+          * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the min property.
+         */
+        "max"?: string;
+        /**
+          * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the max property.
+         */
+        "min"?: string;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name": string;
+        /**
+          * Show a date picker. Date pickers are not very useful if the potential input is too far in the distance or past e.g. Birthdays
+         */
+        "picker": boolean;
+        /**
+          * Set / read whether the picker is currently open.
+         */
+        "pickerOpen": boolean;
+        /**
+          * Instructional text that shows before the input has a value. The pattern prop will be used to create a placeholder automatically if unused.
+         */
+        "placeholder": string;
+        /**
+          * If `true`, the user cannot modify the value.
+         */
+        "readonly": boolean;
+        /**
+          * Get the current state of the control.
+          * @param validateFirst - perform validation first before reporting
+          * @returns `{ isValid: boolean, errorMessage: string }`
+         */
+        "reportValidity": (validateFirst: boolean) => Promise<ControlValidity>;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+         */
+        "required": boolean;
+        /**
+          * Sets focus on the child `nano-input`.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.
+         */
+        "showError": (message: string) => Promise<void>;
+        /**
+          * Whether to show validation errors underneath input
+         */
+        "showInlineError": boolean;
+        /**
+          * The initial size (number of characters) of the control.
+         */
+        "size"?: number;
+        /**
+          * When should the field perform validation
+         */
+        "validateOn"?: 'dirty' | 'submit' | 'submitThenDirty';
+        /**
+          * Current value. Must be in IS0-8601 format: YYYY-MM-DD.
+         */
+        "value": string;
+    }
+    interface NanoDatePicker {
+        /**
+          * The color to use from the application's color palette.
+         */
+        "color"?: Color;
+        /**
+          * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc. Default is Monday.
+         */
+        "firstDayOfWeek": DaysOfWeek;
+        "firstFocusEle": HTMLElement;
+        /**
+          * Controls which days are disabled and therefore disallowed. For example, this can be used to disallow selection of weekends.
+         */
+        "isDateDisabled": DateDisabledPredicate;
+        /**
+          * Controls whether the picker is a modal or dialog, popup control and will therefore keep focus within the control
+         */
+        "isModal": boolean;
+        /**
+          * Button labels, day names, month names, etc, used for localization. Default is English.
+         */
+        "localization": DuetLocalizedText;
+        /**
+          * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the min property.
+         */
+        "max": string;
+        /**
+          * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the max property.
+         */
+        "min": string;
+        /**
+          * Selected Date. Must be in IS0-8601 format: YYYY-MM-DD.
+         */
+        "selectedDate": string;
+        /**
+          * Focus to the calendar. If day set, will focus to the current selected day.
+          * @param day
+         */
+        "setFocus": (day?: boolean) => Promise<void>;
+    }
+    interface NanoDetails {
+        /**
+          * Color to use from your application's color palette.
+         */
+        "color"?: Color;
+        /**
+          * Icon slot rotation amount (degrees) on open
+         */
+        "iconRotation": number;
+        /**
+          * Button / handle text to be used if no complex markup required. Otherwise use label slot.
+         */
+        "label": string;
+        /**
+          * Have no handle - you will need to control the hiding / showing of content with script
+         */
+        "noHandle": boolean;
+        /**
+          * Should item be open on load
+         */
+        "open": boolean;
+    }
+    interface NanoDialog {
+        /**
+          * Hides the dialog
+         */
+        "hide": () => Promise<void>;
+        /**
+          * The dialog's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility.
+         */
+        "label": string;
+        /**
+          * Set to true to disable the footer. This will also remove the footer close button, so please ensure you  provide an easy, accessible way for users to dismiss the dialog.
+         */
+        "noFooter": boolean;
+        /**
+          * Set to true to disable the header. This will also remove the default close button, so please ensure you  provide an easy, accessible way for users to dismiss the dialog.
+         */
+        "noHeader": boolean;
+        /**
+          * An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key
+         */
+        "noUserDismiss": boolean;
+        /**
+          * Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods.
+         */
+        "open": boolean;
+        /**
+          * Shows the dialog
+         */
+        "show": () => Promise<void>;
+        /**
+          * Show a colour ribbon at the top of the modal
+         */
+        "showRibbon": boolean;
+        /**
+          * Store search queries (against this ID) to the component store. Use in conjunction with storeMethod
+         */
+        "storeId"?: string;
+        /**
+          * The method of storage. Either session storage, url hash (after the '#') or url query (after the '?').
+         */
+        "storeMethod": StorageMethods;
+    }
+    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.
+         */
+        "contained": boolean;
+        /**
+          * Required for 'reveal' and 'push' types A valid DOM selector of the content element that this drawer will push or reveal underneath Please remember - elements wrapping the content element must be 'overflow: hidden' otherwise menus will be shown when closed
+         */
+        "contentSelector": string;
+        /**
+          * Hides the drawer
+         */
+        "hide": () => Promise<void>;
+        /**
+          * The drawer's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility.
+         */
+        "label": string;
+        /**
+          * Removes the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the drawer.
+         */
+        "noHeader": boolean;
+        /**
+          * Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods.
+         */
+        "open": boolean;
+        /**
+          * The direction from which the drawer will open.
+         */
+        "placement": 'top' | 'end' | 'bottom' | 'start';
+        /**
+          * Shows the drawer
+         */
+        "show": () => Promise<void>;
+        /**
+          * The display type of the drawer
+         */
+        "type": 'overlay' | 'reveal' | 'push';
+    }
+    interface NanoDropdown {
+        /**
+          * Determines if the dropdown should open automatically when the trigger is clicked
+         */
+        "autoOpen": boolean;
+        /**
+          * Determines whether the dropdown should hide when a menu item is selected.
+         */
+        "closeOnSelect": boolean;
+        /**
+          * The dropdown will close when the user interacts outside of this element (e.g. clicking).
+         */
+        "containingElement": HTMLElement;
+        /**
+          * Title used to describe the dropdown content for accessibility
+         */
+        "dialogTitle": string | null;
+        /**
+          * The distance in pixels from which to offset the panel away from its trigger.
+         */
+        "distance": number;
+        /**
+          * Hides the dropdown panel
+         */
+        "hide": () => Promise<void>;
+        /**
+          * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`.
+         */
+        "hoist": boolean;
+        /**
+          * Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods.
+         */
+        "open": boolean;
+        /**
+          * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside of the viewport.
+         */
+        "placement": | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end';
+        /**
+          * Shows the dropdown panel
+         */
+        "show": () => Promise<void>;
+        /**
+          * The distance in pixels from which to offset the panel along its trigger.
+         */
+        "skidding": number;
+    }
+    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`
+         */
+        "accept"?: string;
+        /**
+          * Specifies which camera to use for capture of image or video data. `user` for the user-facing camera and/or microphone. `environment` specifies the the outward-facing camera and/or microphone. If the requested facing mode isn't available, the user agent may fall back to its preferred default mode.
+         */
+        "capture"?: 'user' | 'environment';
+        /**
+          * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input. Only used within single file uploads.
+         */
+        "clearInput": boolean;
+        /**
+          * If `true`, the user cannot interact with the select.
+         */
+        "disabled": boolean;
+        /**
+          * A File array that lists every selected file. Has an added `objectURL` property returning a `DOMString` containing an object URL that can be used to reference the contents of the specified source This list has no more than one member unless the multiple attribute is specified. @readonly
+         */
+        "files": { lastModified: number; type: string; name: string; size: number; objectURL: string; arrayBuffer: () => Promise<ArrayBuffer>; slice: (start?: number, end?: number, contentType?: string) => Blob; stream: () => ReadableStream<any>; text: () => Promise<string>; }[];
+        /**
+          * Returns the native `<input>` element used under the hood
+         */
+        "getInputElement": () => Promise<HTMLInputElement | HTMLTextAreaElement>;
+        /**
+          * Visually hide the label - but make it accessible.
+         */
+        "hideLabel"?: boolean;
+        /**
+          * This will be true when the control is in an invalid state. Validity is determined by the `required` prop. Or if custom validity message is set. @readonly
+         */
+        "invalid": boolean;
+        /**
+          * String to place within a label element.
+         */
+        "label": string;
+        /**
+          * The maximum file size allowed per file (Megabytes)
+         */
+        "maxFileSize": number;
+        /**
+          * The maximum file size allowed per file (bytes).
+         */
+        "maxFiles": number;
+        /**
+          * Name of the form control. Submitted with the form as part of a name/value pair.
+         */
+        "name": string;
+        /**
+          * Placeholder only used within single file uploads.
+         */
+        "placeholder": string;
+        /**
+          * Get the current state of the control.
+          * @param validateFirst - perform validation first before reporting
+          * @returns `{ isValid: boolean, errorMessage: string }`
+         */
+        "reportValidity": (validateFirst: boolean) => Promise<ControlValidity>;
+        /**
+          * If `true`, the user must select a file to upload before submitting a form.
+         */
+        "required": boolean;
+        /**
+          * Sets focus on the specified `nano-input`. Use this method instead of the global `input.focus()`.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.
+          * @param message
+         */
+        "showError": (message: string) => Promise<void>;
+        /**
+          * Whether to show validation errors underneath input
+         */
+        "showInlineError": boolean;
+        /**
+          * When should the field perform validation
+         */
+        "validateOn"?: 'dirty' | 'submit' | 'submitThenDirty';
+        /**
+          * 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 = ''`
+         */
+        "value": string;
+    }
+    interface NanoGlobalNav {
+        /**
+          * Active MyAccount link sections. By default all will show.
+         */
+        "activeMyAccountSections": (
+    | 'about'
+    | 'loggedin'
+    | 'sites'
+    | 'icons'
+  )[];
+        /**
+          * MyAccount store cart count.
+         */
+        "cartCount": number;
+        /**
+          * Url to the Nanopore store cart. Will default to the url supplied by MyAccount
+         */
+        "cartUrl": string;
+        /**
+          * Connect to local, dev, test or prod MyAccount environments to retrieve global nav / sso data
+         */
+        "env": 'local' | 'dev' | 'test' | 'prod';
+        /**
+          * Whether to attempt to get global nav / sso data from MyAccount
+         */
+        "getMyAccountData": boolean;
+        /**
+          * The link to put on the logo
+         */
+        "logoUrl": string;
+        /**
+          * MyAccount undread message count.
+         */
+        "msgCount": number;
+        /**
+          * Url to the Nanopore message center. Will default to the url supplied by MyAccount
+         */
+        "msgUrl": string;
+        /**
+          * Logged in user details automatically populated from MyAccount
+         */
+        "myAccountUser": {
+    id: string | null;
+    name: string | null;
+    first_name: string | null;
+    last_name: string | null;
+    email: string | null;
+    company: string | null;
+    lifecycle_stage: string | null;
+    indirect_customer: boolean;
+  };
+        /**
+          * An Algolia API Key. Will be automatically populated from MyAccount
+         */
+        "searchApiKey": string;
+        /**
+          * An Algolia App ID key. Will be automatically populated from MyAccount
+         */
+        "searchAppId": string;
+        /**
+          * An array of Algolia search indexes (and optional display names). Will be automatically populated from MyAccount
+         */
+        "searchIndeces": Array<SearchIndex>;
+        /**
+          * Algolia search index to programatically set or to set an initial index
+         */
+        "searchIndex": string;
+        /**
+          * A search value to passed to Algolia to programatically get or to preload search results
+         */
+        "searchValue": string;
+        /**
+          * Whether to show Nanopore logo
+         */
+        "showLogo": boolean;
+        /**
+          * Whether to show search functionality
+         */
+        "showSearch": boolean;
+        /**
+          * Where to take user after SSO login
+         */
+        "ssoRedirect": string;
+        /**
+          * Submit the search form (a search value must be present)
+         */
+        "submitSearch": () => Promise<void>;
+    }
+    interface NanoGlobalSearchResults {
+    }
+    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.
+         */
+        "lSize": number;
+        /**
+          * 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.
+         */
+        "mSize": number;
+        /**
+          * 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.
+         */
+        "sSize": number;
+        /**
+          * shows a grid helper to visualise where columns are
+         */
+        "showHelper": boolean;
+        /**
+          * the number of columns the grid has at the xl breakpoint.
+         */
+        "xlCols": number;
+        /**
+          * the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.
+         */
+        "xlSize": number;
+        /**
+          * the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint)
+         */
+        "xxlCols": number;
+    }
+    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;
+    }
+    interface NanoHero {
+        /**
+          * src for backgronund image. For more control use the `background` slot instead.
+         */
+        "imgSrc"?: string;
+        /**
+          * Optional list string providing media sizes with corresponding image srcs. i.e. show img-x at 300px wide. Format `srcSet="200w src/imgSmall.jpg, 500h src/imgMed.png"`
+         */
+        "imgSrcSet"?: string;
+        /**
+          * The Break Point width that the hero component will change to the large view. Defaults to the XL grid size (900px)
+         */
+        "largeScreenBP": number;
+        /**
+          * Set the content structure level of the hero. Defaults to 'top'
+         */
+        "level": 'top' | 'sub';
+        /**
+          * Base style for the hero. Either 'light' (white bg / dark text), or 'dark' (dark bg / white text)
+         */
+        "theme": 'dark' | 'light';
+    }
+    interface NanoIcon {
+        /**
+          * Specifies the label to use for accessibility. Defaults to the icon name.
+         */
+        "ariaLabel"?: string;
+        /**
+          * Color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+         */
+        "color"?: Color;
+        /**
+          * Specifies whether the icon should horizontally flip when `dir` is `"rtl"`.
+         */
+        "flipRtl"?: boolean;
+        /**
+          * A combination of both `name` and `src`. If a `src` url is detected it will set the `src` property. Otherwise it assumes it's a built-in named SVG and set the `name` property.
+         */
+        "icon"?: any;
+        /**
+          * If enabled, nano-icon will be loaded lazily when it's visible in the viewport. Default, `false`.
+         */
+        "lazy": boolean;
+        /**
+          * Specifies which icon to use from the built-in set of icons.
+         */
+        "name"?: string;
+        /**
+          * The size of the icon. Available options are: `"small"` and `"large"`.
+         */
+        "size"?: 'small' | 'large';
+        /**
+          * Specifies the exact `src` of an SVG file to use.
+         */
+        "src"?: string;
+    }
+    interface NanoIconButton {
+        /**
+          * Set to true to disable the button.
+         */
+        "disabled": boolean;
+        /**
+          * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
+         */
+        "href": string | undefined;
+        /**
+          * The name of the icon to draw.
+         */
+        "iconName"?: string;
+        /**
+          * An external URL of an SVG file.
+         */
+        "iconSrc"?: string;
+        /**
+          * A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should always include a label that describes what the icon button does.
+         */
+        "label": string;
+        /**
+          * The name of the button, submitted as a pair with the button’s value as part of the form data.
+         */
+        "name"?: string;
+        /**
+          * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
+         */
+        "target": string | undefined;
+        /**
+          * The default behavior of the button.
+         */
+        "type": 'submit' | 'reset' | 'button';
+        /**
+          * Defines the value associated with the button’s name when it’s submitted with the form data.
+         */
+        "value"?: string;
+    }
+    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.
+         */
+        "alt"?: string;
+        /**
+          * When the image is rendered as a background, and there is no preset dimensions of the component, you can set how the component height will be set. Via image size or via the content *
+         */
+        "autoHeight": 'content' | 'image';
+        /**
+          * Render the image as a background image *
+         */
+        "background"?: boolean;
+        /**
+          * Render image lazily, when it comes into the browser viewport *
+         */
+        "lazy": boolean;
+        /**
+          * The image URL. This attribute is mandatory for the `<img>` element.
+         */
+        "src": string;
+        /**
+          * Optional list string providing media sizes with corresponding image srcs. i.e. show img-x at 300px wide. Format `srcSet="200w src/imgSmall.jpg, 500h src/imgMed.png"`
+         */
+        "srcSet"?: string;
+    }
+    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.
+         */
+        "accept"?: string;
+        /**
+          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
+         */
+        "autocapitalise": 'none' | 'sentences' | 'words' | 'characters';
+        /**
+          * Indicates whether the value of the control can be automatically completed by the browser.
+         */
+        "autocomplete": 'on' | 'off';
+        /**
+          * Whether auto correction should be enabled when the user is entering/editing the text value.
+         */
+        "autocorrect": 'on' | 'off';
+        /**
+          * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+         */
+        "autofocus": boolean;
+        /**
+          * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
+         */
+        "clearInput": boolean;
+        /**
+          * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
+         */
+        "clearOnEdit"?: boolean;
+        /**
+          * The color to use from the application's color palette.
+         */
+        "color"?: Color;
+        /**
+          * Set the amount of time, in milliseconds, to wait to trigger the `nanoChange` event after each keystroke.
+         */
+        "debounce": number;
+        /**
+          * If `true`, the user cannot interact with the input.
+         */
+        "disabled": boolean;
+        /**
+          * Enable floating label behaviour. Will disable placeholder if set.
+         */
+        "floatLabel": boolean;
+        /**
+          * The form element to associate the select with (its form owner). Must be the id of a form.
+         */
+        "form"?: string | null;
+        /**
+          * Returns the native `<input>` element used under the hood.
+         */
+        "getInputElement": () => Promise<HTMLInputElement | HTMLTextAreaElement>;
+        /**
+          * Visually hide the label - but make it accessible.
+         */
+        "hideLabel"?: boolean;
+        /**
+          * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
+         */
+        "inputmode"?: | 'none'
+    | 'text'
+    | 'tel'
+    | 'url'
+    | 'email'
+    | 'numeric'
+    | 'decimal'
+    | 'search';
+        /**
+          * This will be true when the control is in an invalid state. Validity is determined by the `required` prop. Or if custom validity message is set. @readonly
+         */
+        "invalid": boolean;
+        /**
+          * String to place within a label element. Alternatively you may use a label slot.
+         */
+        "label": string;
+        /**
+          * The maximum value, which must not be less than its minimum (min attribute) value.
+         */
+        "max"?: string;
+        /**
+          * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.
+         */
+        "maxlength"?: number;
+        /**
+          * The minimum value, which must not be greater than its maximum (max attribute) value.
+         */
+        "min"?: string;
+        /**
+          * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.
+         */
+        "minlength"?: number;
+        /**
+          * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"` or `"file"`, otherwise it is ignored.
+         */
+        "multiple"?: boolean;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name": string;
+        /**
+          * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored.
+         */
+        "pattern"?: string;
+        /**
+          * Instructional text that shows before the input has a value.
+         */
+        "placeholder"?: string | null;
+        /**
+          * If `true`, the user cannot modify the value.
+         */
+        "readonly": boolean;
+        /**
+          * Get the current state of the control.
+          * @param validateFirst - perform validation first before reporting
+          * @returns `{ isValid: boolean, errorMessage: string }`
+         */
+        "reportValidity": (validateFirst: boolean) => Promise<ControlValidity>;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+         */
+        "required": boolean;
+        /**
+          * relevant to type="textarea". Vertical resizing - enable / disable or make automatic.
+         */
+        "resize": 'true' | 'false' | 'auto';
+        /**
+          * relevant to type="textarea". Default number of rows to show
+         */
+        "rows": number;
+        /**
+          * Sets focus on the specified `nano-input`. Use this method instead of the global `input.focus()`.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * relevant to type="textarea".
+         */
+        "showCharCount": boolean;
+        /**
+          * Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.
+         */
+        "showError": (message: string) => Promise<void>;
+        /**
+          * Whether to show validation errors underneath input
+         */
+        "showInlineError": boolean;
+        /**
+          * The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored.
+         */
+        "size"?: number;
+        /**
+          * If `true`, the element will have its spelling and grammar checked.
+         */
+        "spellcheck": boolean;
+        /**
+          * Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number.
+         */
+        "step"?: string;
+        /**
+          * The type of control to display. The default type is text.
+         */
+        "type": TextFieldTypes;
+        /**
+          * When should the field perform validation
+         */
+        "validateOn": 'dirty' | 'submit' | 'submitThenDirty';
+        /**
+          * The value of the input.
+         */
+        "value"?: string | null;
+    }
+    interface NanoMenu {
+        /**
+          * Removes focus from the menu.
+         */
+        "removeFocus": () => Promise<void>;
+        /**
+          * Sets focus on the menu.
+         */
+        "setFocus": () => Promise<void>;
+    }
+    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)
+         */
+        "hideHeight": boolean;
+        /**
+          * Screen width to hide the menu drawer and move the items into the nano-global-nav
+         */
+        "hideWidth": number;
+        /**
+          * Set the initial menu drawer open or closed
+         */
+        "open": boolean;
+        /**
+          * Save open state to localStorage
+         */
+        "saveState": boolean;
+    }
+    interface NanoNavItem {
+        /**
+          * Whether secondary menus should close on blur
+         */
+        "closeOnBlur": boolean;
+        /**
+          * Disable the nav item
+         */
+        "disabled": boolean;
+        /**
+          * Href to link to
+         */
+        "href": string;
+        /**
+          * Whether a secondary menu should be or is currently open
+         */
+        "open": boolean;
+        /**
+          * Screen pixel width to activate the secondary menu
+         */
+        "secondaryActiveWidth": number;
+        /**
+          * Secondary fallback function for when the secondary menu is no longer active.
+         */
+        "secondaryFallback": () => void;
+        /**
+          * Whether this menu item is currently 'selected'
+         */
+        "selected": boolean;
+        /**
+          * Sets focus on the first button or anchor present. Use this method instead of the global `element.focus()`.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * Target to use for links
+         */
+        "target": '_self' | '_blank' | '_parent' | '_top';
+    }
+    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"`
+         */
+        "color"?: Color;
+        /**
+          * How long, in milliseconds, to wait to trigger the `nanoChange` event after each change in the range value.
+         */
+        "debounce": number;
+        /**
+          * If `true`, the user cannot interact with the range.
+         */
+        "disabled": boolean;
+        /**
+          * Show two knobs.
+         */
+        "dualKnobs": boolean;
+        /**
+          * Maximum integer value of the range.
+         */
+        "max": number;
+        /**
+          * Minimum integer value of the range.
+         */
+        "min": number;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name": string;
+        /**
+          * If `true`, a pin with integer value is shown when the knob is pressed.
+         */
+        "pin": boolean;
+        /**
+          * If `true`, the knob snaps to tick marks evenly spaced based on the step property value.
+         */
+        "snaps": boolean;
+        /**
+          * Specifies the value granularity.
+         */
+        "step": number;
+        /**
+          * If `true`, tick marks are displayed based on the step value. Only applies when `snaps` is `true`.
+         */
+        "ticks": boolean;
+        /**
+          * the value of the range.
+         */
+        "value": RangeValue;
+    }
+    interface NanoRating {
+        /**
+          * Disables the rating.
+         */
+        "disabled": boolean;
+        /**
+          * The highest rating to show.
+         */
+        "max": number;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name": string;
+        /**
+          * The minimum increment value allowed by the control.
+         */
+        "precision": number;
+        /**
+          * Makes the rating readonly.
+         */
+        "readonly": boolean;
+        /**
+          * Removes focus from the rating.
+         */
+        "removeFocus": () => Promise<void>;
+        /**
+          * Sets focus on the rating.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * A function that returns the symbols to display. Allows for more granular control than `symbol-name`. Accepts an option `value` parameter you can use to map a specific symbol to a value.
+         */
+        "symbol": (_: number) => string;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "symbolName": string;
+        /**
+          * The current rating.
+         */
+        "value": number;
+    }
+    interface NanoResizeObserve {
+        /**
+          * string list of sizes and optional class-names. Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints. Format: `states="800w, 300h class1 class2"`
+         */
+        "states": string;
+    }
+    interface NanoSelect {
+        /**
+          * in multiple mode, allow users to enter their own values
+         */
+        "allowCustomValues": boolean;
+        /**
+          * This Boolean attribute lets you specify that a form control should have select focus when the page loads.
+         */
+        "autofocus": boolean;
+        /**
+          * If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.
+         */
+        "clearSelect": boolean;
+        /**
+          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+         */
+        "color"?: Color;
+        /**
+          * Set the amount of time, in milliseconds, to wait to trigger the `nanoSearchChange` event after each keystroke.
+         */
+        "debounce": number;
+        /**
+          * If `true`, the user cannot interact with the select.
+         */
+        "disabled": boolean;
+        /**
+          * Enable floating label behaviour. Will disable placeholder if set.
+         */
+        "floatLabel": boolean;
+        /**
+          * The form element to associate the select with (its form owner). Must be the id of a form.
+         */
+        "form"?: string | null;
+        /**
+          * Returns the native `<select>` element used under the hood.
+         */
+        "getSelectElement": () => Promise<HTMLSelectElement>;
+        /**
+          * Visually hide the label - but make it accessible.
+         */
+        "hideLabel"?: boolean;
+        /**
+          * This will be true when the control is in an invalid state. Validity is determined by the `required` prop. Or if custom validity message is set.
+         */
+        "invalid": boolean;
+        /**
+          * String to place within a label element.
+         */
+        "label": string;
+        /**
+          * Hide the native select element and cover with a value 'mask'. Enables a fluid nano-select width upon value change (if required). Doesn't work with multiple="true".
+         */
+        "mask": boolean;
+        /**
+          * Maximum number of options that can be selected when multiple is true
+         */
+        "max"?: number;
+        /**
+          * Minimum number of options that can be selected when multiple is true
+         */
+        "min"?: number;
+        /**
+          * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"` or `"file"`, otherwise it is ignored.
+         */
+        "multiple"?: boolean;
+        /**
+          * 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;
+        /**
+          * 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 }
+  >;
+        /**
+          * 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.
+         */
+        "placeholder"?: string | null;
+        /**
+          * If `true`, the user cannot modify the value.
+         */
+        "readonly": boolean;
+        /**
+          * Get the current state of the control.
+          * @param validateFirst - perform validation first before reporting
+          * @returns `{ isValid: boolean, errorMessage: string }`
+         */
+        "reportValidity": (validateFirst: boolean) => Promise<ControlValidity>;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+         */
+        "required": boolean;
+        /**
+          * Sets focus on the specified `nano-select`. Use this method instead of the global `select.focus()`.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.
+         */
+        "showError": (message: string) => Promise<void>;
+        /**
+          * Whether to show validation errors underneath input
+         */
+        "showInlineError": boolean;
+        /**
+          * The initial size of the control.
+         */
+        "size"?: number;
+        /**
+          * When should the field perform validation
+         */
+        "validateOn"?: 'dirty' | 'submit' | 'submitThenDirty';
+        /**
+          * 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;
+    }
+    interface NanoSkeleton {
+        /**
+          * When `true`, the skeleton will animate.
+         */
+        "animated": boolean;
+    }
+    interface NanoSlide {
+        /**
+          * Used to to inform the parent slides components of readiness. This will automatically be set to true when the slide has loaded but can be set and updated manually.
+         */
+        "ready": boolean | null;
+    }
+    interface NanoSlides {
+        /**
+          * Animation presets.
+         */
+        "animation": SlideAnimation;
+        /**
+          * time duration, in ms, to automatically advance slides
+         */
+        "autoplay": string | false | number;
+        /**
+          * Zero-based index of the selected cell.
+         */
+        "currentSlide": number;
+        /**
+          * If `true`, make the slider fullscreen.
+         */
+        "fullscreen": boolean;
+        /**
+          * If `true`, show a fullscreen button.
+         */
+        "fullscreenbtn": boolean;
+        /**
+          * Get the index of the active slide.
+         */
+        "getActiveIndex": () => Promise<number>;
+        /**
+          * Get the flickity instance. Use this to access the full flickity API. See https://flickity.metafizzy.co/ for all API options.
+         */
+        "getflickity": () => Promise<Flickity>;
+        /**
+          * Get whether or not the current slide is the first slide.
+         */
+        "isBeginning": () => Promise<boolean>;
+        /**
+          * Get whether or not the current slide is the last slide.
+         */
+        "isEnd": () => Promise<boolean>;
+        /**
+          * Get the total number of slides.
+         */
+        "length": () => Promise<number>;
+        /**
+          * Lock or unlock the ability to slide to the next slide.
+          * @param lock If `true`, disable swiping
+         */
+        "lockSwipes": (lock: boolean) => Promise<void>;
+        /**
+          * If `true`, show the next / prev buttons.
+         */
+        "navbtns": boolean;
+        /**
+          * Options to pass to the flickity instance. See https://flickity.metafizzy.co/options.html for valid options
+         */
+        "options": FlickityOptions;
+        /**
+          * If `true`, show the pagination.
+         */
+        "pager": boolean;
+        "ready": boolean;
+        /**
+          * Hard destroy / create. Certain flickity options, you will require the instance to be re-initialised
+         */
+        "reload": () => Promise<void>;
+        /**
+          * Transition to the next slide.
+          * @param instant The transition duration (in ms).
+          * @param wrap If true, the first slide will be selected if at the last slide.
+         */
+        "slideNext": (instant?: boolean, wrap?: boolean) => Promise<void>;
+        /**
+          * Transition to the previous slide.
+          * @param instant The transition duration (in ms).
+          * @param wrap If true, the last slide will be selected if at the first slide.
+         */
+        "slidePrev": (instant?: boolean, wrap?: boolean) => Promise<void>;
+        /**
+          * Transition to the specified slide.
+          * @param index The index of the slide to transition to.
+          * @param instant Immediately view the selected slide without animation.
+         */
+        "slideTo": (index: number, instant?: boolean) => Promise<void>;
+        /**
+          * Start auto play.
+          * @param time - optional time duration to show slides
+         */
+        "startAutoplay": (time?: number) => Promise<void>;
+        /**
+          * Stop auto play.
+         */
+        "stopAutoplay": () => Promise<void>;
+        /**
+          * Update the underlying flickity implementation. Call this if you've added or removed child slides.
+         */
+        "update": () => Promise<void>;
+        /**
+          * Force flickity to update its height (when adaptiveHeight is enabled) for the duration equal to 'speed' parameter.
+          * @param speed The transition duration (in ms).
+         */
+        "updateAutoHeight": (speed?: number) => Promise<void>;
+    }
+    interface NanoSpinner {
+        /**
+          * Displays absolutely with an overlay
+         */
+        "overlay": boolean;
+        /**
+          * The type of spinner animation. dna should be used for larger, page loads. Circle for smaller component loaders.
+         */
+        "type": 'dna' | 'circle';
+    }
+    interface NanoSticker {
+        /**
+          * Only applicable to root stickers. When applied the sticker will grow or shrink to the scrollParent size
+         */
+        "autoResize": boolean;
+        /**
+          * The max width of the item to implement sticky behaviour.
+         */
+        "breakPointMax": null | number;
+        /**
+          * The min width of the item to implement sticky behaviour.
+         */
+        "breakPointMin": null | number;
+        "getTriggerPos": () => Promise<{ top: number; left: number; }>;
+        /**
+          * When applied stickers will hide upon new stickers being stuck to the same position
+         */
+        "hideOnNewStickers": boolean;
+        /**
+          * Method to return the visibility status of the sticker
+          * @returns boolean
+         */
+        "isHiding": () => Promise<boolean>;
+        /**
+          * Method to return the stuck status of the sticker
+          * @returns boolean
+         */
+        "isSticking": () => Promise<boolean>;
+        /**
+          * Manually enable / disabled sticky behaviour
+         */
+        "isSticky": boolean;
+        /**
+          * Distance the item should be stuck from the sticky edge.
+         */
+        "offset": number | { v: number; h: number };
+        "pauseHiding": (pause: boolean) => Promise<boolean>;
+        /**
+          * The edge of the scroll-parent to stick to
+         */
+        "position": 'top' | 'bottom';
+        /**
+          * When applied, the sticker will hide when the scroll-parent is scrolling away from the sticker's stuck position and show when scrolling toward it. By default this will apply when the parent is below either the h or w dimensions
+         */
+        "quietMode": 'on' | 'off' | { h: number; w: number };
+        /**
+          * Define which scroll element to listen & stick to. By default, it will find traverse the DOM to find the closest.
+         */
+        "scrollParent"?: HTMLElement | Document;
+        "setTriggerPos": (offset: number | { v: number; h: number; }) => Promise<number | { v: number; h: number; }>;
+        /**
+          * Upon being stuck, attach the sticker to another sticker element. A JS query selector that returns a <nano-sticker>
+         */
+        "stickTo": string;
+    }
+    interface NanoTab {
+        /**
+          * The active, selected tab. If none active, the first will automatically be selected.
+         */
+        "active": boolean;
+        /**
+          * Set to true to draw the tab in an active state.
+         */
+        "disabled": boolean;
+        /**
+          * The name of the tab panel the tab will control. The panel must be located in the same tab group.
+         */
+        "panel": string;
+        /**
+          * Removes focus from the tab.
+         */
+        "removeFocus": () => Promise<void>;
+        /**
+          * Sets focus to the tab.
+         */
+        "setFocus": () => Promise<void>;
+    }
+    interface NanoTabContent {
+        /**
+          * When true, the tab content will be shown.
+         */
+        "active": boolean;
+        /**
+          * The tab panel's name.
+         */
+        "name": string;
+    }
+    interface NanoTabGroup {
+        /**
+          * The color to use from the application's color palette.
+         */
+        "color"?: Color;
+        /**
+          * Disables the scroll arrows that appear when tabs overflow.
+         */
+        "noScrollControls": boolean;
+        /**
+          * The placement of the tabs.
+         */
+        "placement": 'top' | 'start';
+        /**
+          * Shows the specified tab panel.
+         */
+        "show": (panel: string) => Promise<void>;
+        /**
+          * Store the currently open tab (against this ID) in the component store. Use in conjunction with storeMethod
+         */
+        "storeId"?: string;
+        /**
+          * The method of storage. Either session storage, url hash (after the '#') or url query (after the '?').
+         */
+        "storeMethod": StorageMethods;
+    }
+    interface NanoTooltip {
+        /**
+          * The tooltip's content. Alternatively, you can use the content slot.
+         */
+        "content": string;
+        /**
+          * Set to true to disable the tooltip so it won't show when triggered.
+         */
+        "disabled": boolean;
+        /**
+          * The distance in pixels from which to offset the tooltip away from its target.
+         */
+        "distance": number;
+        /**
+          * Shows the tooltip.
+         */
+        "hide": () => Promise<void>;
+        /**
+          * Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.
+         */
+        "open": boolean;
+        /**
+          * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside of the viewport.
+         */
+        "placement": | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end';
+        /**
+          * Shows the tooltip.
+         */
+        "show": () => Promise<void>;
+        /**
+          * The distance in pixels from which to offset the tooltip along its target.
+         */
+        "skidding": number;
+        /**
+          * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple options can be passed by separating them with a space. When manual is used, the tooltip must be activated programmatically.
+         */
+        "trigger": string;
+    }
+}
+declare global {
+    interface HTMLNanoAccordionElement extends Components.NanoAccordion, HTMLStencilElement {
+    }
+    var HTMLNanoAccordionElement: {
+        prototype: HTMLNanoAccordionElement;
+        new (): HTMLNanoAccordionElement;
+    };
+    interface HTMLNanoAlertElement extends Components.NanoAlert, HTMLStencilElement {
+    }
+    var HTMLNanoAlertElement: {
+        prototype: HTMLNanoAlertElement;
+        new (): HTMLNanoAlertElement;
+    };
+    interface HTMLNanoAlgoliaElement extends Components.NanoAlgolia, HTMLStencilElement {
+    }
+    var HTMLNanoAlgoliaElement: {
+        prototype: HTMLNanoAlgoliaElement;
+        new (): HTMLNanoAlgoliaElement;
+    };
+    interface HTMLNanoAlgoliaFilterElement extends Components.NanoAlgoliaFilter, HTMLStencilElement {
+    }
+    var HTMLNanoAlgoliaFilterElement: {
+        prototype: HTMLNanoAlgoliaFilterElement;
+        new (): HTMLNanoAlgoliaFilterElement;
+    };
+    interface HTMLNanoAlgoliaInputElement extends Components.NanoAlgoliaInput, HTMLStencilElement {
+    }
+    var HTMLNanoAlgoliaInputElement: {
+        prototype: HTMLNanoAlgoliaInputElement;
+        new (): HTMLNanoAlgoliaInputElement;
+    };
+    interface HTMLNanoAlgoliaPaginationElement extends Components.NanoAlgoliaPagination, HTMLStencilElement {
+    }
+    var HTMLNanoAlgoliaPaginationElement: {
+        prototype: HTMLNanoAlgoliaPaginationElement;
+        new (): HTMLNanoAlgoliaPaginationElement;
+    };
+    interface HTMLNanoAlgoliaResultsElement extends Components.NanoAlgoliaResults, HTMLStencilElement {
+    }
+    var HTMLNanoAlgoliaResultsElement: {
+        prototype: HTMLNanoAlgoliaResultsElement;
+        new (): HTMLNanoAlgoliaResultsElement;
+    };
+    interface HTMLNanoAspectRatioElement extends Components.NanoAspectRatio, HTMLStencilElement {
+    }
+    var HTMLNanoAspectRatioElement: {
+        prototype: HTMLNanoAspectRatioElement;
+        new (): HTMLNanoAspectRatioElement;
+    };
+    interface HTMLNanoCheckboxElement extends Components.NanoCheckbox, HTMLStencilElement {
+    }
+    var HTMLNanoCheckboxElement: {
+        prototype: HTMLNanoCheckboxElement;
+        new (): HTMLNanoCheckboxElement;
+    };
+    interface HTMLNanoCheckboxGroupElement extends Components.NanoCheckboxGroup, HTMLStencilElement {
+    }
+    var HTMLNanoCheckboxGroupElement: {
+        prototype: HTMLNanoCheckboxGroupElement;
+        new (): HTMLNanoCheckboxGroupElement;
+    };
+    interface HTMLNanoDateInputElement extends Components.NanoDateInput, HTMLStencilElement {
+    }
+    var HTMLNanoDateInputElement: {
+        prototype: HTMLNanoDateInputElement;
+        new (): HTMLNanoDateInputElement;
+    };
+    interface HTMLNanoDatePickerElement extends Components.NanoDatePicker, HTMLStencilElement {
+    }
+    var HTMLNanoDatePickerElement: {
+        prototype: HTMLNanoDatePickerElement;
+        new (): HTMLNanoDatePickerElement;
+    };
+    interface HTMLNanoDetailsElement extends Components.NanoDetails, HTMLStencilElement {
+    }
+    var HTMLNanoDetailsElement: {
+        prototype: HTMLNanoDetailsElement;
+        new (): HTMLNanoDetailsElement;
+    };
+    interface HTMLNanoDialogElement extends Components.NanoDialog, HTMLStencilElement {
+    }
+    var HTMLNanoDialogElement: {
+        prototype: HTMLNanoDialogElement;
+        new (): HTMLNanoDialogElement;
+    };
+    interface HTMLNanoDrawerElement extends Components.NanoDrawer, HTMLStencilElement {
+    }
+    var HTMLNanoDrawerElement: {
+        prototype: HTMLNanoDrawerElement;
+        new (): HTMLNanoDrawerElement;
+    };
+    interface HTMLNanoDropdownElement extends Components.NanoDropdown, HTMLStencilElement {
+    }
+    var HTMLNanoDropdownElement: {
+        prototype: HTMLNanoDropdownElement;
+        new (): HTMLNanoDropdownElement;
+    };
+    interface HTMLNanoFileUploadElement extends Components.NanoFileUpload, HTMLStencilElement {
+    }
+    var HTMLNanoFileUploadElement: {
+        prototype: HTMLNanoFileUploadElement;
+        new (): HTMLNanoFileUploadElement;
+    };
+    interface HTMLNanoGlobalNavElement extends Components.NanoGlobalNav, HTMLStencilElement {
+    }
+    var HTMLNanoGlobalNavElement: {
+        prototype: HTMLNanoGlobalNavElement;
+        new (): HTMLNanoGlobalNavElement;
+    };
+    interface HTMLNanoGlobalSearchResultsElement extends Components.NanoGlobalSearchResults, HTMLStencilElement {
+    }
+    var HTMLNanoGlobalSearchResultsElement: {
+        prototype: HTMLNanoGlobalSearchResultsElement;
+        new (): HTMLNanoGlobalSearchResultsElement;
+    };
+    interface HTMLNanoGridElement extends Components.NanoGrid, HTMLStencilElement {
+    }
+    var HTMLNanoGridElement: {
+        prototype: HTMLNanoGridElement;
+        new (): HTMLNanoGridElement;
+    };
+    interface HTMLNanoGridItemElement extends Components.NanoGridItem, HTMLStencilElement {
+    }
+    var HTMLNanoGridItemElement: {
+        prototype: HTMLNanoGridItemElement;
+        new (): HTMLNanoGridItemElement;
+    };
+    interface HTMLNanoHeroElement extends Components.NanoHero, HTMLStencilElement {
+    }
+    var HTMLNanoHeroElement: {
+        prototype: HTMLNanoHeroElement;
+        new (): HTMLNanoHeroElement;
+    };
+    interface HTMLNanoIconElement extends Components.NanoIcon, HTMLStencilElement {
+    }
+    var HTMLNanoIconElement: {
+        prototype: HTMLNanoIconElement;
+        new (): HTMLNanoIconElement;
+    };
+    interface HTMLNanoIconButtonElement extends Components.NanoIconButton, HTMLStencilElement {
+    }
+    var HTMLNanoIconButtonElement: {
+        prototype: HTMLNanoIconButtonElement;
+        new (): HTMLNanoIconButtonElement;
+    };
+    interface HTMLNanoImgElement extends Components.NanoImg, HTMLStencilElement {
+    }
+    var HTMLNanoImgElement: {
+        prototype: HTMLNanoImgElement;
+        new (): HTMLNanoImgElement;
+    };
+    interface HTMLNanoInputElement extends Components.NanoInput, HTMLStencilElement {
+    }
+    var HTMLNanoInputElement: {
+        prototype: HTMLNanoInputElement;
+        new (): HTMLNanoInputElement;
+    };
+    interface HTMLNanoMenuElement extends Components.NanoMenu, HTMLStencilElement {
+    }
+    var HTMLNanoMenuElement: {
+        prototype: HTMLNanoMenuElement;
+        new (): HTMLNanoMenuElement;
+    };
+    interface HTMLNanoMenuDrawerElement extends Components.NanoMenuDrawer, HTMLStencilElement {
+    }
+    var HTMLNanoMenuDrawerElement: {
+        prototype: HTMLNanoMenuDrawerElement;
+        new (): HTMLNanoMenuDrawerElement;
+    };
+    interface HTMLNanoNavItemElement extends Components.NanoNavItem, HTMLStencilElement {
+    }
+    var HTMLNanoNavItemElement: {
+        prototype: HTMLNanoNavItemElement;
+        new (): HTMLNanoNavItemElement;
+    };
+    interface HTMLNanoRangeElement extends Components.NanoRange, HTMLStencilElement {
+    }
+    var HTMLNanoRangeElement: {
+        prototype: HTMLNanoRangeElement;
+        new (): HTMLNanoRangeElement;
+    };
+    interface HTMLNanoRatingElement extends Components.NanoRating, HTMLStencilElement {
+    }
+    var HTMLNanoRatingElement: {
+        prototype: HTMLNanoRatingElement;
+        new (): HTMLNanoRatingElement;
+    };
+    interface HTMLNanoResizeObserveElement extends Components.NanoResizeObserve, HTMLStencilElement {
+    }
+    var HTMLNanoResizeObserveElement: {
+        prototype: HTMLNanoResizeObserveElement;
+        new (): HTMLNanoResizeObserveElement;
+    };
+    interface HTMLNanoSelectElement extends Components.NanoSelect, HTMLStencilElement {
+    }
+    var HTMLNanoSelectElement: {
+        prototype: HTMLNanoSelectElement;
+        new (): HTMLNanoSelectElement;
+    };
+    interface HTMLNanoSelectOptionElement extends Components.NanoSelectOption, HTMLStencilElement {
+    }
+    var HTMLNanoSelectOptionElement: {
+        prototype: HTMLNanoSelectOptionElement;
+        new (): HTMLNanoSelectOptionElement;
+    };
+    interface HTMLNanoSkeletonElement extends Components.NanoSkeleton, HTMLStencilElement {
+    }
+    var HTMLNanoSkeletonElement: {
+        prototype: HTMLNanoSkeletonElement;
+        new (): HTMLNanoSkeletonElement;
+    };
+    interface HTMLNanoSlideElement extends Components.NanoSlide, HTMLStencilElement {
+    }
+    var HTMLNanoSlideElement: {
+        prototype: HTMLNanoSlideElement;
+        new (): HTMLNanoSlideElement;
+    };
+    interface HTMLNanoSlidesElement extends Components.NanoSlides, HTMLStencilElement {
+    }
+    var HTMLNanoSlidesElement: {
+        prototype: HTMLNanoSlidesElement;
+        new (): HTMLNanoSlidesElement;
+    };
+    interface HTMLNanoSpinnerElement extends Components.NanoSpinner, HTMLStencilElement {
+    }
+    var HTMLNanoSpinnerElement: {
+        prototype: HTMLNanoSpinnerElement;
+        new (): HTMLNanoSpinnerElement;
+    };
+    interface HTMLNanoStickerElement extends Components.NanoSticker, HTMLStencilElement {
+    }
+    var HTMLNanoStickerElement: {
+        prototype: HTMLNanoStickerElement;
+        new (): HTMLNanoStickerElement;
+    };
+    interface HTMLNanoTabElement extends Components.NanoTab, HTMLStencilElement {
+    }
+    var HTMLNanoTabElement: {
+        prototype: HTMLNanoTabElement;
+        new (): HTMLNanoTabElement;
+    };
+    interface HTMLNanoTabContentElement extends Components.NanoTabContent, HTMLStencilElement {
+    }
+    var HTMLNanoTabContentElement: {
+        prototype: HTMLNanoTabContentElement;
+        new (): HTMLNanoTabContentElement;
+    };
+    interface HTMLNanoTabGroupElement extends Components.NanoTabGroup, HTMLStencilElement {
+    }
+    var HTMLNanoTabGroupElement: {
+        prototype: HTMLNanoTabGroupElement;
+        new (): HTMLNanoTabGroupElement;
+    };
+    interface HTMLNanoTooltipElement extends Components.NanoTooltip, HTMLStencilElement {
+    }
+    var HTMLNanoTooltipElement: {
+        prototype: HTMLNanoTooltipElement;
+        new (): HTMLNanoTooltipElement;
+    };
+    interface HTMLElementTagNameMap {
+        "nano-accordion": HTMLNanoAccordionElement;
+        "nano-alert": HTMLNanoAlertElement;
+        "nano-algolia": HTMLNanoAlgoliaElement;
+        "nano-algolia-filter": HTMLNanoAlgoliaFilterElement;
+        "nano-algolia-input": HTMLNanoAlgoliaInputElement;
+        "nano-algolia-pagination": HTMLNanoAlgoliaPaginationElement;
+        "nano-algolia-results": HTMLNanoAlgoliaResultsElement;
+        "nano-aspect-ratio": HTMLNanoAspectRatioElement;
+        "nano-checkbox": HTMLNanoCheckboxElement;
+        "nano-checkbox-group": HTMLNanoCheckboxGroupElement;
+        "nano-date-input": HTMLNanoDateInputElement;
+        "nano-date-picker": HTMLNanoDatePickerElement;
+        "nano-details": HTMLNanoDetailsElement;
+        "nano-dialog": HTMLNanoDialogElement;
+        "nano-drawer": HTMLNanoDrawerElement;
+        "nano-dropdown": HTMLNanoDropdownElement;
+        "nano-file-upload": HTMLNanoFileUploadElement;
+        "nano-global-nav": HTMLNanoGlobalNavElement;
+        "nano-global-search-results": HTMLNanoGlobalSearchResultsElement;
+        "nano-grid": HTMLNanoGridElement;
+        "nano-grid-item": HTMLNanoGridItemElement;
+        "nano-hero": HTMLNanoHeroElement;
+        "nano-icon": HTMLNanoIconElement;
+        "nano-icon-button": HTMLNanoIconButtonElement;
+        "nano-img": HTMLNanoImgElement;
+        "nano-input": HTMLNanoInputElement;
+        "nano-menu": HTMLNanoMenuElement;
+        "nano-menu-drawer": HTMLNanoMenuDrawerElement;
+        "nano-nav-item": HTMLNanoNavItemElement;
+        "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;
+        "nano-spinner": HTMLNanoSpinnerElement;
+        "nano-sticker": HTMLNanoStickerElement;
+        "nano-tab": HTMLNanoTabElement;
+        "nano-tab-content": HTMLNanoTabContentElement;
+        "nano-tab-group": HTMLNanoTabGroupElement;
+        "nano-tooltip": HTMLNanoTooltipElement;
+    }
+}
+declare namespace LocalJSX {
+    interface NanoAccordion {
+        /**
+          * Color to use from the color palette.
+         */
+        "color"?: Color;
+        /**
+          * Fires when accordion elements toggle
+         */
+        "onNanoToggle"?: (event: CustomEvent<any>) => void;
+    }
+    interface NanoAlert {
+        /**
+          * Set to true to make the alert closable.
+         */
+        "closable"?: boolean;
+        /**
+          * The color to use from the application's color palette.
+         */
+        "color"?: Color;
+        /**
+          * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the alert before it closes (e.g. moves the mouse over it), the timer will restart.
+         */
+        "duration"?: number;
+        /**
+          * Emitted after the alert closes and all transitions are complete.
+         */
+        "onNanoAfterHide"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted after the alert opens and all transitions are complete.
+         */
+        "onNanoAfterShow"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed.
+         */
+        "onNanoHide"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened.
+         */
+        "onNanoShow"?: (event: CustomEvent<any>) => void;
+        /**
+          * Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods.
+         */
+        "open"?: boolean;
+    }
+    interface NanoAlgolia {
+        /**
+          * An Algolia API Key. Used in conjunction with 'searchIndex' & 'appId'.
+         */
+        "apiKey"?: string;
+        /**
+          * An Algolia App ID key. Used in conjunction with 'searchIndex' & 'apiKey'.
+         */
+        "appId"?: string;
+        /**
+          * Will maintain a search all / '*' on init and reset allowing for a view then filter experience rather than a search first experience
+         */
+        "browseIndex"?: boolean;
+        /**
+          * Query filters to apply to all searches. Refer to https://www.algolia.com/doc/api-reference/api-parameters/filters for format.
+         */
+        "filters"?: Array<string>;
+        /**
+          * JS querSelector string of a `nano-input` / `input` element from which to listen to `nano-change` or `change` events and change the `query` prop. Not required if an appropriate field is in the 'search-input' slot
+         */
+        "listenTo"?: string;
+        /**
+          * Minimum number of characters before performing a search
+         */
+        "minChars"?: number;
+        /**
+          * Emitted after an algolia search.
+         */
+        "onNanoAfterQuery"?: (event: CustomEvent<IndexResult>) => void;
+        /**
+          * Emitted before an algolia search.
+         */
+        "onNanoBeforeQuery"?: (event: CustomEvent<IndexResult>) => void;
+        /**
+          * Emitted when the algolia element has been created.
+         */
+        "onNanoDidLoad"?: (event: CustomEvent<HTMLNanoAlgoliaElement>) => void;
+        /**
+          * Emitted when results and all filters are shown and have loaded.
+         */
+        "onNanoResultsShown"?: (event: CustomEvent<IndexResult>) => void;
+        /**
+          * The external operator joining filter values.
+         */
+        "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`
+         */
+        "query"?: string;
+        /**
+          * Changes the index without removing any current filters. Most appropriate for algolia replicas.
+         */
+        "replicaIndex"?: string;
+        /**
+          * The current algolia page of results currently being viewed or to get.
+         */
+        "resultsPage"?: number;
+        /**
+          * Algolia search index. Used in conjunction with 'apiKey' & 'appId'. ``` { index: string, // algolia index name   domain?: string, // used in template filters to resolve incomplete url fields   filters?: [string], // algolia facets to retrive   hitsPerPage?: number,   name?: string // human readable index name } ```
+         */
+        "searchIndex"?: SearchIndex;
+        /**
+          * Algolia search index name. Alternative to 'searchIndex'. A simplified shortcut for setting an index. Properties such as hitsPerPage and facets will come from the algolia index
+         */
+        "searchIndexName"?: string;
+        /**
+          * Show the result panel. By default it will automatically show when the result receives new hits.
+         */
+        "showResults"?: boolean;
+        /**
+          * Store search queries (against this ID) to the component store. Use in conjunction with storeMethod
+         */
+        "storeId"?: string;
+        /**
+          * The method of storage. Either session storage, url hash (after the '#') or url query (after the '?').
+         */
+        "storeMethod"?: StorageMethods;
+        /**
+          * Template engine to use when rendering results and filters. Defaults to Squirrel v8 (https://squirrelly.js.org/). This gives you access to the underlying squirrel object allowing you to modify it's configuration / add filters.
+         */
+        "tplEngine"?: Object;
+        /**
+          * Template engine render function to use when rendering results and filters. Defaults to Squirrel v8's render (https://squirrelly.js.org/).
+         */
+        "tplRenderFn"?: (...args: any[]) => string;
+    }
+    interface NanoAlgoliaFilter {
+        /**
+          * Name of this filter - must match an appropriate algolia facet on a parent nano-algolia index to display
+         */
+        "filterName"?: string;
+        /**
+          * Emitted when the filter value changes
+         */
+        "onNanoFilterChanged"?: (event: CustomEvent<FilterChangeEventDetail>) => void;
+        /**
+          * Emitted when templates are updated
+         */
+        "onNanoTplUpdated"?: (event: CustomEvent<HTMLNanoAlgoliaFilterElement>) => void;
+        /**
+          * The internal operator joining filter values.
+         */
+        "operator"?: 'or' | 'and';
+        /**
+          * Store search queries (against this ID) to the component store. Use in conjunction with storeMethod
+         */
+        "storeId"?: string;
+        /**
+          * The method of storage. Either session storage, url hash (after the '#') or url query (after the '?').
+         */
+        "storeMethod"?: StorageMethods;
+        /**
+          * Set values of this filter. Will result in form elements being selected. '|' delimited string or array.
+         */
+        "value"?: string | Array<string>;
+    }
+    interface NanoAlgoliaInput {
+        /**
+          * An Algolia API Key. Used in conjunction with 'searchIndex' & 'appId'. Alternatively this will be set automatically when nested within an algolia component
+         */
+        "apiKey"?: string;
+        /**
+          * An Algolia App ID key. Used in conjunction with 'searchIndex' & 'apiKey'. Alternatively this will be set automatically when nested within an algolia component
+         */
+        "appId"?: string;
+        /**
+          * Automatically emit results data to algolia components. For example, if you wanted to provide an 'autocomplete' style dropdown before showing the main results with a submit button
+         */
+        "autoEmit"?: boolean;
+        /**
+          * Will maintain a search all / '*' on init and reset allowing for a view then filter experience rather than a search first experience
+         */
+        "browseIndex"?: boolean;
+        /**
+          * Minimum number of characters before performing a search
+         */
+        "minChars"?: number;
+        /**
+          * Emitted when search results are successfully returned from Algolia.
+         */
+        "onNanoSearch"?: (event: CustomEvent<AloliaSearchResultDetail>) => void;
+        /**
+          * Emitted when search field is cleared.
+         */
+        "onNanoSearchReset"?: (event: CustomEvent<AloliaSearchResultDetail>) => void;
+        /**
+          * Algolia search index. Used in conjunction with 'searchIndex' & 'appId'. Alternatively this will be set automatically if you're using a 'resultsEmitter' element. ``` { index: string, // algolia index name   domain?: string, // used in template filers to resolve incomplete url fields   filters?: [string], // algolia facets to retrive   hitsPerPage?: number,   name?: string // human readable index name } ```
+         */
+        "searchIndex"?: SearchIndex;
+        /**
+          * Algolia search index name. Alternative to 'searchIndex'. A simplified shortcut for setting an index. properties such as hitsPerPage and facets will come from the algolia index
+         */
+        "searchIndexName"?: string;
+        /**
+          * Store search queries (against this ID) to the component store. Use in conjunction with storeMethod
+         */
+        "storeId"?: string;
+        /**
+          * The method of storage. Either session storage, url hash (after the '#') or url query (after the '?').
+         */
+        "storeMethod"?: StorageMethods;
+    }
+    interface NanoAlgoliaPagination {
+        /**
+          * Max number of page numbers to show
+         */
+        "maxToShow"?: number;
+        /**
+          * Emitted when the page number changes
+         */
+        "onNanoPageChanged"?: (event: CustomEvent<{ page: number }>) => void;
+    }
+    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)
+         */
+        "appendPages"?: boolean;
+        /**
+          * Load and append pages automatically on scroll
+         */
+        "infiniteScroll"?: boolean;
+        /**
+          * Emitted when the page number changes
+         */
+        "onNanoPageChanged"?: (event: CustomEvent<PageChangeEventDetail>) => void;
+        /**
+          * Emitted when templates are updated
+         */
+        "onNanoTplUpdated"?: (event: CustomEvent<HTMLNanoAlgoliaResultsElement>) => void;
+    }
+    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.
+         */
+        "aspectRatio"?: string;
+        /**
+          * Determines how content will be resized to fit its container.
+         */
+        "fit"?: 'cover' | 'contain';
+    }
+    interface NanoCheckbox {
+        /**
+          * checked property that can be used to get/set the value. accepts only boolean values
+         */
+        "checked"?: boolean;
+        /**
+          * Color to use from your application's color palette.
+         */
+        "color"?: Color;
+        /**
+          * If `true`, the user cannot interact with the checkbox.
+         */
+        "disabled"?: boolean;
+        /**
+          * If `true`, the checkbox will visually appear as indeterminate (only relevant for type="checkbox")
+         */
+        "indeterminate"?: boolean;
+        /**
+          * This will be true when the control is in an invalid state. Validity is determined by the `required` prop. Or if custom validity message is set.
+         */
+        "invalid"?: boolean;
+        /**
+          * label property that can be used to set the label text. Alternatively you may use a label slot.
+         */
+        "label"?: string;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name"?: string;
+        /**
+          * Emited when the checkbox is blurred
+         */
+        "onNanoBlur"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emited when the checkbox is toggled
+         */
+        "onNanoChange"?: (event: CustomEvent<CheckboxChangeEventDetail>) => void;
+        /**
+          * Emited when the checkbox is focused
+         */
+        "onNanoFocus"?: (event: CustomEvent<any>) => void;
+        /**
+          * Set to true to make the field required.
+         */
+        "required"?: boolean;
+        /**
+          * Controls the underlying field type and style.
+         */
+        "type"?: | 'radio'
+    | 'checkbox'
+    | 'tag'
+    | 'segment'
+    | 'segment-pill';
+        /**
+          * The value of a checkbox is analogous to the value of an `<input type='checkbox'>`, it's only present when `checked` is true.
+         */
+        "value"?: string;
+    }
+    interface NanoCheckboxGroup {
+        /**
+          * Disable all the nested form controls
+         */
+        "disabled"?: boolean | null;
+        /**
+          * A common label for children controls
+         */
+        "legend"?: string;
+        /**
+          * The maximum number of checkboxes allowed. Only relevant for checkbox type controls. Other controls will automatically be disabled upon reaching this number.
+         */
+        "max"?: number;
+        /**
+          * 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 validation is performed (which depends on `validateOn`).
+          * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.
+         */
+        "onNanoValidate"?: (event: CustomEvent<ControlValidityEventDetail>) => void;
+        /**
+          * Whether to show validation errors underneath input
+         */
+        "showInlineError"?: boolean;
+        /**
+          * When should the field perform validation
+         */
+        "validateOn"?: 'dirty' | 'submit' | 'submitThenDirty';
+    }
+    interface NanoDateInput {
+        /**
+          * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+         */
+        "autofocus"?: boolean;
+        /**
+          * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
+         */
+        "clearInput"?: boolean;
+        /**
+          * Close the picker after a date is selected
+         */
+        "closeAfterPicked"?: boolean;
+        /**
+          * The color to use from the application's color palette.
+         */
+        "color"?: Color;
+        /**
+          * The order of the date parts for entry and display. e.g. dmy = dd mm yyyy
+         */
+        "dateOrder"?: 'dmy' | 'mdy' | 'ymd' | 'dym';
+        /**
+          * If `true`, the user cannot interact with the input.
+         */
+        "disabled"?: boolean;
+        /**
+          * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc. Default is Monday.
+         */
+        "firstDayOfWeek"?: DaysOfWeek;
+        /**
+          * Enable floating label behaviour. Will disable placeholder if set.
+         */
+        "floatLabel"?: boolean;
+        /**
+          * The form element to associate the select with (its form owner). Must be the id of a form.
+         */
+        "form"?: string | null;
+        /**
+          * Whether to show a long form, confirmation date string of the one currently entered
+         */
+        "helperText"?: boolean;
+        /**
+          * Options for the date string display. Refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString.
+         */
+        "helperTextFormat"?: LocalDateOpts;
+        /**
+          * Visually hide the label - but make it accessible.
+         */
+        "hideLabel"?: boolean;
+        /**
+          * Initial picker date. Will be to `value` if set. Will be today's date if nothing set. Must be in IS0-8601 format: YYYY-MM-DD.
+         */
+        "initialPickerDate"?: string;
+        /**
+          * String to place within a label element. Alternatively you may use a label slot.
+         */
+        "label"?: string;
+        /**
+          * Button labels, day names, month names, etc, used for localization. Default is English.
+         */
+        "localization"?: DuetLocalizedText;
+        /**
+          * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the min property.
+         */
+        "max"?: string;
+        /**
+          * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the max property.
+         */
+        "min"?: string;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name"?: string;
+        /**
+          * Event emitted when a date is selected.
+         */
+        "onNanoChange"?: (event: CustomEvent<DateInputChangeEventDetail>) => void;
+        /**
+          * Called when validation is performed (which depends on `validateOn`).
+          * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.
+         */
+        "onNanoValidate"?: (event: CustomEvent<ControlValidityEventDetail>) => void;
+        /**
+          * Show a date picker. Date pickers are not very useful if the potential input is too far in the distance or past e.g. Birthdays
+         */
+        "picker"?: boolean;
+        /**
+          * Set / read whether the picker is currently open.
+         */
+        "pickerOpen"?: boolean;
+        /**
+          * Instructional text that shows before the input has a value. The pattern prop will be used to create a placeholder automatically if unused.
+         */
+        "placeholder"?: string;
+        /**
+          * If `true`, the user cannot modify the value.
+         */
+        "readonly"?: boolean;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+         */
+        "required"?: boolean;
+        /**
+          * Whether to show validation errors underneath input
+         */
+        "showInlineError"?: boolean;
+        /**
+          * The initial size (number of characters) of the control.
+         */
+        "size"?: number;
+        /**
+          * When should the field perform validation
+         */
+        "validateOn"?: 'dirty' | 'submit' | 'submitThenDirty';
+        /**
+          * Current value. Must be in IS0-8601 format: YYYY-MM-DD.
+         */
+        "value"?: string;
+    }
+    interface NanoDatePicker {
+        /**
+          * The color to use from the application's color palette.
+         */
+        "color"?: Color;
+        /**
+          * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc. Default is Monday.
+         */
+        "firstDayOfWeek"?: DaysOfWeek;
+        /**
+          * Controls which days are disabled and therefore disallowed. For example, this can be used to disallow selection of weekends.
+         */
+        "isDateDisabled"?: DateDisabledPredicate;
+        /**
+          * Controls whether the picker is a modal or dialog, popup control and will therefore keep focus within the control
+         */
+        "isModal"?: boolean;
+        /**
+          * Button labels, day names, month names, etc, used for localization. Default is English.
+         */
+        "localization"?: DuetLocalizedText;
+        /**
+          * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the min property.
+         */
+        "max"?: string;
+        /**
+          * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the max property.
+         */
+        "min"?: string;
+        /**
+          * Event emitted when a date is selected.
+         */
+        "onNanoDatePicked"?: (event: CustomEvent<PickerChangeEvent>) => void;
+        /**
+          * Selected Date. Must be in IS0-8601 format: YYYY-MM-DD.
+         */
+        "selectedDate"?: string;
+    }
+    interface NanoDetails {
+        /**
+          * Color to use from your application's color palette.
+         */
+        "color"?: Color;
+        /**
+          * Icon slot rotation amount (degrees) on open
+         */
+        "iconRotation"?: number;
+        /**
+          * Button / handle text to be used if no complex markup required. Otherwise use label slot.
+         */
+        "label"?: string;
+        /**
+          * Have no handle - you will need to control the hiding / showing of content with script
+         */
+        "noHandle"?: boolean;
+        /**
+          * Emitted when the component closes. Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.
+         */
+        "onNanoClosed"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted when the component opens. Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.
+         */
+        "onNanoOpened"?: (event: CustomEvent<any>) => void;
+        /**
+          * Should item be open on load
+         */
+        "open"?: boolean;
+    }
+    interface NanoDialog {
+        /**
+          * The dialog's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility.
+         */
+        "label"?: string;
+        /**
+          * Set to true to disable the footer. This will also remove the footer close button, so please ensure you  provide an easy, accessible way for users to dismiss the dialog.
+         */
+        "noFooter"?: boolean;
+        /**
+          * Set to true to disable the header. This will also remove the default close button, so please ensure you  provide an easy, accessible way for users to dismiss the dialog.
+         */
+        "noHeader"?: boolean;
+        /**
+          * An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key
+         */
+        "noUserDismiss"?: boolean;
+        /**
+          * Emitted after the dialog closes and all transitions are complete.
+         */
+        "onNanoAfterHide"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted after the dialog opens and all transitions are complete.
+         */
+        "onNanoAfterShow"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed.
+         */
+        "onNanoHide"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and allow you to set it on a different element in the dialog, such as an input or button.
+         */
+        "onNanoInitialFocus"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted when the user clicks the close button, clicks the overlay, or presses the `Escape` key. Calling `event.preventDefault()` will prevent the dialog from closing.
+         */
+        "onNanoRequestClose"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened.
+         */
+        "onNanoShow"?: (event: CustomEvent<any>) => void;
+        /**
+          * Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods.
+         */
+        "open"?: boolean;
+        /**
+          * Show a colour ribbon at the top of the modal
+         */
+        "showRibbon"?: boolean;
+        /**
+          * Store search queries (against this ID) to the component store. Use in conjunction with storeMethod
+         */
+        "storeId"?: string;
+        /**
+          * The method of storage. Either session storage, url hash (after the '#') or url query (after the '?').
+         */
+        "storeMethod"?: StorageMethods;
+    }
+    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.
+         */
+        "contained"?: boolean;
+        /**
+          * Required for 'reveal' and 'push' types A valid DOM selector of the content element that this drawer will push or reveal underneath Please remember - elements wrapping the content element must be 'overflow: hidden' otherwise menus will be shown when closed
+         */
+        "contentSelector"?: string;
+        /**
+          * The drawer's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility.
+         */
+        "label"?: string;
+        /**
+          * Removes the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the drawer.
+         */
+        "noHeader"?: boolean;
+        /**
+          * Emitted after the drawer closes and all transitions are complete.
+         */
+        "onNanoAfterHide"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted after the drawer opens and all transitions are complete.
+         */
+        "onNanoAfterShow"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed.
+         */
+        "onNanoHide"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing.
+         */
+        "onNanoOverlayDismiss"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened.
+         */
+        "onNanoShow"?: (event: CustomEvent<any>) => void;
+        /**
+          * Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods.
+         */
+        "open"?: boolean;
+        /**
+          * The direction from which the drawer will open.
+         */
+        "placement"?: 'top' | 'end' | 'bottom' | 'start';
+        /**
+          * The display type of the drawer
+         */
+        "type"?: 'overlay' | 'reveal' | 'push';
+    }
+    interface NanoDropdown {
+        /**
+          * Determines if the dropdown should open automatically when the trigger is clicked
+         */
+        "autoOpen"?: boolean;
+        /**
+          * Determines whether the dropdown should hide when a menu item is selected.
+         */
+        "closeOnSelect"?: boolean;
+        /**
+          * The dropdown will close when the user interacts outside of this element (e.g. clicking).
+         */
+        "containingElement"?: HTMLElement;
+        /**
+          * Title used to describe the dropdown content for accessibility
+         */
+        "dialogTitle"?: string | null;
+        /**
+          * The distance in pixels from which to offset the panel away from its trigger.
+         */
+        "distance"?: number;
+        /**
+          * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`.
+         */
+        "hoist"?: boolean;
+        /**
+          * Emitted after the dropdown closes and all transitions are complete.
+         */
+        "onNanoAfterHide"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted after the dropdown opens and all transitions are complete.
+         */
+        "onNanoAfterShow"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed.
+         */
+        "onNanoHide"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened.
+         */
+        "onNanoShow"?: (event: CustomEvent<any>) => void;
+        /**
+          * Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods.
+         */
+        "open"?: boolean;
+        /**
+          * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside of the viewport.
+         */
+        "placement"?: | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end';
+        /**
+          * The distance in pixels from which to offset the panel along its trigger.
+         */
+        "skidding"?: number;
+    }
+    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`
+         */
+        "accept"?: string;
+        /**
+          * Specifies which camera to use for capture of image or video data. `user` for the user-facing camera and/or microphone. `environment` specifies the the outward-facing camera and/or microphone. If the requested facing mode isn't available, the user agent may fall back to its preferred default mode.
+         */
+        "capture"?: 'user' | 'environment';
+        /**
+          * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input. Only used within single file uploads.
+         */
+        "clearInput"?: boolean;
+        /**
+          * If `true`, the user cannot interact with the select.
+         */
+        "disabled"?: boolean;
+        /**
+          * A File array that lists every selected file. Has an added `objectURL` property returning a `DOMString` containing an object URL that can be used to reference the contents of the specified source This list has no more than one member unless the multiple attribute is specified. @readonly
+         */
+        "files"?: { lastModified: number; type: string; name: string; size: number; objectURL: string; arrayBuffer: () => Promise<ArrayBuffer>; slice: (start?: number, end?: number, contentType?: string) => Blob; stream: () => ReadableStream<any>; text: () => Promise<string>; }[];
+        /**
+          * Visually hide the label - but make it accessible.
+         */
+        "hideLabel"?: boolean;
+        /**
+          * This will be true when the control is in an invalid state. Validity is determined by the `required` prop. Or if custom validity message is set. @readonly
+         */
+        "invalid"?: boolean;
+        /**
+          * String to place within a label element.
+         */
+        "label": string;
+        /**
+          * The maximum file size allowed per file (Megabytes)
+         */
+        "maxFileSize"?: number;
+        /**
+          * The maximum file size allowed per file (bytes).
+         */
+        "maxFiles"?: number;
+        /**
+          * Name of the form control. Submitted with the form as part of a name/value pair.
+         */
+        "name": string;
+        /**
+          * Emited when the checkbox is blurred
+         */
+        "onNanoBlur"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted when the value has changed.
+         */
+        "onNanoChange"?: (event: CustomEvent<FileInputChangeEventDetail>) => void;
+        /**
+          * Emited when the checkbox is focused
+         */
+        "onNanoFocus"?: (event: CustomEvent<any>) => void;
+        /**
+          * Called when validation is performed (which depends on `validateOn`).
+          * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.
+         */
+        "onNanoValidate"?: (event: CustomEvent<ControlValidityEventDetail>) => void;
+        /**
+          * Placeholder only used within single file uploads.
+         */
+        "placeholder"?: string;
+        /**
+          * If `true`, the user must select a file to upload before submitting a form.
+         */
+        "required"?: boolean;
+        /**
+          * Whether to show validation errors underneath input
+         */
+        "showInlineError"?: boolean;
+        /**
+          * When should the field perform validation
+         */
+        "validateOn"?: 'dirty' | 'submit' | 'submitThenDirty';
+        /**
+          * 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 = ''`
+         */
+        "value"?: string;
+    }
+    interface NanoGlobalNav {
+        /**
+          * Active MyAccount link sections. By default all will show.
+         */
+        "activeMyAccountSections"?: (
+    | 'about'
+    | 'loggedin'
+    | 'sites'
+    | 'icons'
+  )[];
+        /**
+          * MyAccount store cart count.
+         */
+        "cartCount"?: number;
+        /**
+          * Url to the Nanopore store cart. Will default to the url supplied by MyAccount
+         */
+        "cartUrl"?: string;
+        /**
+          * Connect to local, dev, test or prod MyAccount environments to retrieve global nav / sso data
+         */
+        "env"?: 'local' | 'dev' | 'test' | 'prod';
+        /**
+          * Whether to attempt to get global nav / sso data from MyAccount
+         */
+        "getMyAccountData"?: boolean;
+        /**
+          * The link to put on the logo
+         */
+        "logoUrl"?: string;
+        /**
+          * MyAccount undread message count.
+         */
+        "msgCount"?: number;
+        /**
+          * Url to the Nanopore message center. Will default to the url supplied by MyAccount
+         */
+        "msgUrl"?: string;
+        /**
+          * Logged in user details automatically populated from MyAccount
+         */
+        "myAccountUser"?: {
+    id: string | null;
+    name: string | null;
+    first_name: string | null;
+    last_name: string | null;
+    email: string | null;
+    company: string | null;
+    lifecycle_stage: string | null;
+    indirect_customer: boolean;
+  };
+        /**
+          * Emitted when the global nav is ready.
+         */
+        "onNanoIsReady"?: (event: CustomEvent<void>) => void;
+        /**
+          * Emitted when algolia returns an error.
+         */
+        "onNanoSearchError"?: (event: CustomEvent<AlgoliaNetworkError>) => void;
+        /**
+          * Emitted when search field is cleared.
+         */
+        "onNanoSearchReset"?: (event: CustomEvent<AloliaSearchResultDetail>) => void;
+        /**
+          * Emitted when search results are successfully returned from Algolia.
+         */
+        "onNanoSearchResult"?: (event: CustomEvent<AloliaSearchResultDetail>) => void;
+        /**
+          * An Algolia API Key. Will be automatically populated from MyAccount
+         */
+        "searchApiKey"?: string;
+        /**
+          * An Algolia App ID key. Will be automatically populated from MyAccount
+         */
+        "searchAppId"?: string;
+        /**
+          * An array of Algolia search indexes (and optional display names). Will be automatically populated from MyAccount
+         */
+        "searchIndeces"?: Array<SearchIndex>;
+        /**
+          * Algolia search index to programatically set or to set an initial index
+         */
+        "searchIndex"?: string;
+        /**
+          * A search value to passed to Algolia to programatically get or to preload search results
+         */
+        "searchValue"?: string;
+        /**
+          * Whether to show Nanopore logo
+         */
+        "showLogo"?: boolean;
+        /**
+          * Whether to show search functionality
+         */
+        "showSearch"?: boolean;
+        /**
+          * Where to take user after SSO login
+         */
+        "ssoRedirect"?: string;
+    }
+    interface NanoGlobalSearchResults {
+    }
+    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.
+         */
+        "lSize"?: number;
+        /**
+          * 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.
+         */
+        "mSize"?: number;
+        /**
+          * 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.
+         */
+        "sSize"?: number;
+        /**
+          * shows a grid helper to visualise where columns are
+         */
+        "showHelper"?: boolean;
+        /**
+          * the number of columns the grid has at the xl breakpoint.
+         */
+        "xlCols"?: number;
+        /**
+          * the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.
+         */
+        "xlSize"?: number;
+        /**
+          * the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint)
+         */
+        "xxlCols"?: number;
+    }
+    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;
+    }
+    interface NanoHero {
+        /**
+          * src for backgronund image. For more control use the `background` slot instead.
+         */
+        "imgSrc"?: string;
+        /**
+          * Optional list string providing media sizes with corresponding image srcs. i.e. show img-x at 300px wide. Format `srcSet="200w src/imgSmall.jpg, 500h src/imgMed.png"`
+         */
+        "imgSrcSet"?: string;
+        /**
+          * The Break Point width that the hero component will change to the large view. Defaults to the XL grid size (900px)
+         */
+        "largeScreenBP"?: number;
+        /**
+          * Set the content structure level of the hero. Defaults to 'top'
+         */
+        "level"?: 'top' | 'sub';
+        /**
+          * Base style for the hero. Either 'light' (white bg / dark text), or 'dark' (dark bg / white text)
+         */
+        "theme"?: 'dark' | 'light';
+    }
+    interface NanoIcon {
+        /**
+          * Specifies the label to use for accessibility. Defaults to the icon name.
+         */
+        "ariaLabel"?: string;
+        /**
+          * Color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+         */
+        "color"?: Color;
+        /**
+          * Specifies whether the icon should horizontally flip when `dir` is `"rtl"`.
+         */
+        "flipRtl"?: boolean;
+        /**
+          * A combination of both `name` and `src`. If a `src` url is detected it will set the `src` property. Otherwise it assumes it's a built-in named SVG and set the `name` property.
+         */
+        "icon"?: any;
+        /**
+          * If enabled, nano-icon will be loaded lazily when it's visible in the viewport. Default, `false`.
+         */
+        "lazy"?: boolean;
+        /**
+          * Specifies which icon to use from the built-in set of icons.
+         */
+        "name"?: string;
+        /**
+          * The size of the icon. Available options are: `"small"` and `"large"`.
+         */
+        "size"?: 'small' | 'large';
+        /**
+          * Specifies the exact `src` of an SVG file to use.
+         */
+        "src"?: string;
+    }
+    interface NanoIconButton {
+        /**
+          * Set to true to disable the button.
+         */
+        "disabled"?: boolean;
+        /**
+          * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
+         */
+        "href"?: string | undefined;
+        /**
+          * The name of the icon to draw.
+         */
+        "iconName"?: string;
+        /**
+          * An external URL of an SVG file.
+         */
+        "iconSrc"?: string;
+        /**
+          * A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should always include a label that describes what the icon button does.
+         */
+        "label": string;
+        /**
+          * The name of the button, submitted as a pair with the button’s value as part of the form data.
+         */
+        "name"?: string;
+        /**
+          * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
+         */
+        "target"?: string | undefined;
+        /**
+          * The default behavior of the button.
+         */
+        "type"?: 'submit' | 'reset' | 'button';
+        /**
+          * Defines the value associated with the button’s name when it’s submitted with the form data.
+         */
+        "value"?: string;
+    }
+    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.
+         */
+        "alt"?: string;
+        /**
+          * When the image is rendered as a background, and there is no preset dimensions of the component, you can set how the component height will be set. Via image size or via the content *
+         */
+        "autoHeight"?: 'content' | 'image';
+        /**
+          * Render the image as a background image *
+         */
+        "background"?: boolean;
+        /**
+          * Render image lazily, when it comes into the browser viewport *
+         */
+        "lazy"?: boolean;
+        /**
+          * Emitted when the image has finished loading
+         */
+        "onNanoImgDidLoad"?: (event: CustomEvent<void>) => void;
+        /**
+          * Emitted when the img fails to load
+         */
+        "onNanoImgError"?: (event: CustomEvent<void>) => void;
+        /**
+          * Emitted when the img src has been set
+         */
+        "onNanoImgWillLoad"?: (event: CustomEvent<void>) => void;
+        /**
+          * The image URL. This attribute is mandatory for the `<img>` element.
+         */
+        "src": string;
+        /**
+          * Optional list string providing media sizes with corresponding image srcs. i.e. show img-x at 300px wide. Format `srcSet="200w src/imgSmall.jpg, 500h src/imgMed.png"`
+         */
+        "srcSet"?: string;
+    }
+    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.
+         */
+        "accept"?: string;
+        /**
+          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
+         */
+        "autocapitalise"?: 'none' | 'sentences' | 'words' | 'characters';
+        /**
+          * Indicates whether the value of the control can be automatically completed by the browser.
+         */
+        "autocomplete"?: 'on' | 'off';
+        /**
+          * Whether auto correction should be enabled when the user is entering/editing the text value.
+         */
+        "autocorrect"?: 'on' | 'off';
+        /**
+          * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+         */
+        "autofocus"?: boolean;
+        /**
+          * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
+         */
+        "clearInput"?: boolean;
+        /**
+          * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
+         */
+        "clearOnEdit"?: boolean;
+        /**
+          * The color to use from the application's color palette.
+         */
+        "color"?: Color;
+        /**
+          * Set the amount of time, in milliseconds, to wait to trigger the `nanoChange` event after each keystroke.
+         */
+        "debounce"?: number;
+        /**
+          * If `true`, the user cannot interact with the input.
+         */
+        "disabled"?: boolean;
+        /**
+          * Enable floating label behaviour. Will disable placeholder if set.
+         */
+        "floatLabel"?: boolean;
+        /**
+          * The form element to associate the select with (its form owner). Must be the id of a form.
+         */
+        "form"?: string | null;
+        /**
+          * Visually hide the label - but make it accessible.
+         */
+        "hideLabel"?: boolean;
+        /**
+          * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
+         */
+        "inputmode"?: | 'none'
+    | 'text'
+    | 'tel'
+    | 'url'
+    | 'email'
+    | 'numeric'
+    | 'decimal'
+    | 'search';
+        /**
+          * This will be true when the control is in an invalid state. Validity is determined by the `required` prop. Or if custom validity message is set. @readonly
+         */
+        "invalid"?: boolean;
+        /**
+          * String to place within a label element. Alternatively you may use a label slot.
+         */
+        "label": string;
+        /**
+          * The maximum value, which must not be less than its minimum (min attribute) value.
+         */
+        "max"?: string;
+        /**
+          * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.
+         */
+        "maxlength"?: number;
+        /**
+          * The minimum value, which must not be greater than its maximum (max attribute) value.
+         */
+        "min"?: string;
+        /**
+          * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.
+         */
+        "minlength"?: number;
+        /**
+          * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"` or `"file"`, otherwise it is ignored.
+         */
+        "multiple"?: boolean;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the input loses focus.
+         */
+        "onNanoBlur"?: (event: CustomEvent<void>) => void;
+        /**
+          * Emitted when the value has changed.
+         */
+        "onNanoChange"?: (event: CustomEvent<InputChangeEventDetail>) => void;
+        /**
+          * Emitted when the input has focus.
+         */
+        "onNanoFocus"?: (event: CustomEvent<void>) => void;
+        /**
+          * Emitted when a keyboard input occurred.
+         */
+        "onNanoInput"?: (event: CustomEvent<KeyboardEvent>) => void;
+        /**
+          * Called when validation is performed (which depends on `validateOn`).
+          * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.
+         */
+        "onNanoValidate"?: (event: CustomEvent<ControlValidityEventDetail>) => void;
+        /**
+          * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored.
+         */
+        "pattern"?: string;
+        /**
+          * Instructional text that shows before the input has a value.
+         */
+        "placeholder"?: string | null;
+        /**
+          * If `true`, the user cannot modify the value.
+         */
+        "readonly"?: boolean;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+         */
+        "required"?: boolean;
+        /**
+          * relevant to type="textarea". Vertical resizing - enable / disable or make automatic.
+         */
+        "resize"?: 'true' | 'false' | 'auto';
+        /**
+          * relevant to type="textarea". Default number of rows to show
+         */
+        "rows"?: number;
+        /**
+          * relevant to type="textarea".
+         */
+        "showCharCount"?: boolean;
+        /**
+          * Whether to show validation errors underneath input
+         */
+        "showInlineError"?: boolean;
+        /**
+          * The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored.
+         */
+        "size"?: number;
+        /**
+          * If `true`, the element will have its spelling and grammar checked.
+         */
+        "spellcheck"?: boolean;
+        /**
+          * Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number.
+         */
+        "step"?: string;
+        /**
+          * The type of control to display. The default type is text.
+         */
+        "type"?: TextFieldTypes;
+        /**
+          * When should the field perform validation
+         */
+        "validateOn"?: 'dirty' | 'submit' | 'submitThenDirty';
+        /**
+          * The value of the input.
+         */
+        "value"?: string | null;
+    }
+    interface NanoMenu {
+        /**
+          * Emitted when the menu loses focus.
+         */
+        "onNanoBlur"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted when the menu gains focus.
+         */
+        "onNanoFocus"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted when a menu item is selected.
+         */
+        "onNanoSelect"?: (event: CustomEvent<any>) => void;
+    }
+    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)
+         */
+        "hideHeight"?: boolean;
+        /**
+          * Screen width to hide the menu drawer and move the items into the nano-global-nav
+         */
+        "hideWidth"?: number;
+        /**
+          * Set the initial menu drawer open or closed
+         */
+        "open"?: boolean;
+        /**
+          * Save open state to localStorage
+         */
+        "saveState"?: boolean;
+    }
+    interface NanoNavItem {
+        /**
+          * Whether secondary menus should close on blur
+         */
+        "closeOnBlur"?: boolean;
+        /**
+          * Disable the nav item
+         */
+        "disabled"?: boolean;
+        /**
+          * Href to link to
+         */
+        "href"?: string;
+        /**
+          * Emitted when the nav item loses focus.
+         */
+        "onNanoBlur"?: (event: CustomEvent<void>) => void;
+        /**
+          * Emitted when the nav item closes it's secondary navigation.
+         */
+        "onNanoClose"?: (event: CustomEvent<NavItemEventDetail>) => void;
+        /**
+          * Emitted when the nav item is about to close it's secondary navigation.
+         */
+        "onNanoClosing"?: (event: CustomEvent<NavItemEventDetail>) => void;
+        /**
+          * Emitted when the nav item has focus.
+         */
+        "onNanoFocus"?: (event: CustomEvent<void>) => void;
+        /**
+          * Emitted when the nav item opens it's secondary navigation.
+         */
+        "onNanoOpen"?: (event: CustomEvent<NavItemEventDetail>) => void;
+        /**
+          * Emitted when the nav item is about to open it's secondary navigation.
+         */
+        "onNanoOpening"?: (event: CustomEvent<NavItemEventDetail>) => void;
+        /**
+          * Whether a secondary menu should be or is currently open
+         */
+        "open"?: boolean;
+        /**
+          * Screen pixel width to activate the secondary menu
+         */
+        "secondaryActiveWidth"?: number;
+        /**
+          * Secondary fallback function for when the secondary menu is no longer active.
+         */
+        "secondaryFallback"?: () => void;
+        /**
+          * Whether this menu item is currently 'selected'
+         */
+        "selected"?: boolean;
+        /**
+          * Target to use for links
+         */
+        "target"?: '_self' | '_blank' | '_parent' | '_top';
+    }
+    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"`
+         */
+        "color"?: Color;
+        /**
+          * How long, in milliseconds, to wait to trigger the `nanoChange` event after each change in the range value.
+         */
+        "debounce"?: number;
+        /**
+          * If `true`, the user cannot interact with the range.
+         */
+        "disabled"?: boolean;
+        /**
+          * Show two knobs.
+         */
+        "dualKnobs"?: boolean;
+        /**
+          * Maximum integer value of the range.
+         */
+        "max"?: number;
+        /**
+          * Minimum integer value of the range.
+         */
+        "min"?: number;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the range loses focus.
+         */
+        "onNanoBlur"?: (event: CustomEvent<void>) => void;
+        /**
+          * Emitted when the value property has changed.
+         */
+        "onNanoChange"?: (event: CustomEvent<RangeChangeEventDetail>) => void;
+        /**
+          * Emitted when the range has focus.
+         */
+        "onNanoFocus"?: (event: CustomEvent<void>) => void;
+        /**
+          * If `true`, a pin with integer value is shown when the knob is pressed.
+         */
+        "pin"?: boolean;
+        /**
+          * If `true`, the knob snaps to tick marks evenly spaced based on the step property value.
+         */
+        "snaps"?: boolean;
+        /**
+          * Specifies the value granularity.
+         */
+        "step"?: number;
+        /**
+          * If `true`, tick marks are displayed based on the step value. Only applies when `snaps` is `true`.
+         */
+        "ticks"?: boolean;
+        /**
+          * the value of the range.
+         */
+        "value"?: RangeValue;
+    }
+    interface NanoRating {
+        /**
+          * Disables the rating.
+         */
+        "disabled"?: boolean;
+        /**
+          * The highest rating to show.
+         */
+        "max"?: number;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the input loses focus.
+         */
+        "onNanoBlur"?: (event: CustomEvent<void>) => void;
+        /**
+          * Emitted when the rating's value changes.
+         */
+        "onNanoChange"?: (event: CustomEvent<void>) => void;
+        /**
+          * Emitted when the input has focus.
+         */
+        "onNanoFocus"?: (event: CustomEvent<void>) => void;
+        /**
+          * The minimum increment value allowed by the control.
+         */
+        "precision"?: number;
+        /**
+          * Makes the rating readonly.
+         */
+        "readonly"?: boolean;
+        /**
+          * A function that returns the symbols to display. Allows for more granular control than `symbol-name`. Accepts an option `value` parameter you can use to map a specific symbol to a value.
+         */
+        "symbol"?: (_: number) => string;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "symbolName"?: string;
+        /**
+          * The current rating.
+         */
+        "value"?: number;
+    }
+    interface NanoResizeObserve {
+        /**
+          * A resize break point is switched on or off
+         */
+        "onNanoResizeStateChange"?: (event: CustomEvent<ResizeStateChangeEventDetail>) => void;
+        /**
+          * string list of sizes and optional class-names. Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints. Format: `states="800w, 300h class1 class2"`
+         */
+        "states"?: string;
+    }
+    interface NanoSelect {
+        /**
+          * in multiple mode, allow users to enter their own values
+         */
+        "allowCustomValues"?: boolean;
+        /**
+          * This Boolean attribute lets you specify that a form control should have select focus when the page loads.
+         */
+        "autofocus"?: boolean;
+        /**
+          * If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.
+         */
+        "clearSelect"?: boolean;
+        /**
+          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+         */
+        "color"?: Color;
+        /**
+          * Set the amount of time, in milliseconds, to wait to trigger the `nanoSearchChange` event after each keystroke.
+         */
+        "debounce"?: number;
+        /**
+          * If `true`, the user cannot interact with the select.
+         */
+        "disabled"?: boolean;
+        /**
+          * Enable floating label behaviour. Will disable placeholder if set.
+         */
+        "floatLabel"?: boolean;
+        /**
+          * The form element to associate the select with (its form owner). Must be the id of a form.
+         */
+        "form"?: string | null;
+        /**
+          * Visually hide the label - but make it accessible.
+         */
+        "hideLabel"?: boolean;
+        /**
+          * This will be true when the control is in an invalid state. Validity is determined by the `required` prop. Or if custom validity message is set.
+         */
+        "invalid"?: boolean;
+        /**
+          * String to place within a label element.
+         */
+        "label": string;
+        /**
+          * Hide the native select element and cover with a value 'mask'. Enables a fluid nano-select width upon value change (if required). Doesn't work with multiple="true".
+         */
+        "mask"?: boolean;
+        /**
+          * Maximum number of options that can be selected when multiple is true
+         */
+        "max"?: number;
+        /**
+          * Minimum number of options that can be selected when multiple is true
+         */
+        "min"?: number;
+        /**
+          * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"` or `"file"`, otherwise it is ignored.
+         */
+        "multiple"?: boolean;
+        /**
+          * 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.
+         */
+        "onNanoBlur"?: (event: CustomEvent<void>) => void;
+        /**
+          * Emitted when the value has changed.
+         */
+        "onNanoChange"?: (event: CustomEvent<SelectChangeEventDetail>) => void;
+        /**
+          * Emitted when the select has focus.
+         */
+        "onNanoFocus"?: (event: CustomEvent<void>) => void;
+        /**
+          * Emitted when a keyboard input occurred on a multiple="true" input
+         */
+        "onNanoSearchChange"?: (event: CustomEvent<InputChangeEventDetail>) => void;
+        /**
+          * Called when validation is performed (which depends on `validateOn`).
+          * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.
+         */
+        "onNanoValidate"?: (event: CustomEvent<ControlValidityEventDetail>) => void;
+        /**
+          * 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 }
+  >;
+        /**
+          * 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.
+         */
+        "placeholder"?: string | null;
+        /**
+          * If `true`, the user cannot modify the value.
+         */
+        "readonly"?: boolean;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+         */
+        "required"?: boolean;
+        /**
+          * Whether to show validation errors underneath input
+         */
+        "showInlineError"?: boolean;
+        /**
+          * The initial size of the control.
+         */
+        "size"?: number;
+        /**
+          * When should the field perform validation
+         */
+        "validateOn"?: 'dirty' | 'submit' | 'submitThenDirty';
+        /**
+          * 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;
+    }
+    interface NanoSkeleton {
+        /**
+          * When `true`, the skeleton will animate.
+         */
+        "animated"?: boolean;
+    }
+    interface NanoSlide {
+        /**
+          * Fired when the slide has loaded.
+         */
+        "onNanoSlideReady"?: (event: CustomEvent<void>) => void;
+        /**
+          * Used to to inform the parent slides components of readiness. This will automatically be set to true when the slide has loaded but can be set and updated manually.
+         */
+        "ready"?: boolean | null;
+    }
+    interface NanoSlides {
+        /**
+          * Animation presets.
+         */
+        "animation"?: SlideAnimation;
+        /**
+          * time duration, in ms, to automatically advance slides
+         */
+        "autoplay"?: string | false | number;
+        /**
+          * Zero-based index of the selected cell.
+         */
+        "currentSlide"?: number;
+        /**
+          * If `true`, make the slider fullscreen.
+         */
+        "fullscreen"?: boolean;
+        /**
+          * If `true`, show a fullscreen button.
+         */
+        "fullscreenbtn"?: boolean;
+        /**
+          * If `true`, show the next / prev buttons.
+         */
+        "navbtns"?: boolean;
+        /**
+          * Emitted when the selected slide is changed.
+         */
+        "onNanoSlidesChange"?: (event: CustomEvent<number>) => void;
+        /**
+          * Emitted after component initialization
+         */
+        "onNanoSlidesDidLoad"?: (event: CustomEvent<void>) => void;
+        /**
+          * Emitted when the slider has finished being dragged.
+         */
+        "onNanoSlidesDragEnd"?: (event: CustomEvent<DragEvent>) => void;
+        /**
+          * Emitted when the slider is being dragged.
+         */
+        "onNanoSlidesDragMove"?: (event: CustomEvent<DragEvent>) => void;
+        /**
+          * Emitted when the slider starts actively being moved.
+         */
+        "onNanoSlidesDragStart"?: (event: CustomEvent<DragEvent>) => void;
+        /**
+          * Emitted when the user taps/clicks on the slide's container.
+         */
+        "onNanoSlidesFullscreenChange"?: (event: CustomEvent<boolean>) => void;
+        /**
+          * Emitted after flickity initialization
+         */
+        "onNanoSlidesReady"?: (event: CustomEvent<void>) => void;
+        /**
+          * Emitted when the slider moves.
+         */
+        "onNanoSlidesScroll"?: (event: CustomEvent<number>) => void;
+        /**
+          * Emitted when a slide is selected, even on the same slide
+         */
+        "onNanoSlidesSelect"?: (event: CustomEvent<number>) => void;
+        /**
+          * Emitted when the user taps/clicks on the slide's container.
+         */
+        "onNanoSlidesTap"?: (event: CustomEvent<DragEvent>) => void;
+        /**
+          * Emitted when the slide transition has finished.
+         */
+        "onNanoSlidesTransitionEnd"?: (event: CustomEvent<number>) => void;
+        /**
+          * Options to pass to the flickity instance. See https://flickity.metafizzy.co/options.html for valid options
+         */
+        "options"?: FlickityOptions;
+        /**
+          * If `true`, show the pagination.
+         */
+        "pager"?: boolean;
+    }
+    interface NanoSpinner {
+        /**
+          * Displays absolutely with an overlay
+         */
+        "overlay"?: boolean;
+        /**
+          * The type of spinner animation. dna should be used for larger, page loads. Circle for smaller component loaders.
+         */
+        "type"?: 'dna' | 'circle';
+    }
+    interface NanoSticker {
+        /**
+          * Only applicable to root stickers. When applied the sticker will grow or shrink to the scrollParent size
+         */
+        "autoResize"?: boolean;
+        /**
+          * The max width of the item to implement sticky behaviour.
+         */
+        "breakPointMax"?: null | number;
+        /**
+          * The min width of the item to implement sticky behaviour.
+         */
+        "breakPointMin"?: null | number;
+        /**
+          * When applied stickers will hide upon new stickers being stuck to the same position
+         */
+        "hideOnNewStickers"?: boolean;
+        /**
+          * Manually enable / disabled sticky behaviour
+         */
+        "isSticky"?: boolean;
+        /**
+          * Distance the item should be stuck from the sticky edge.
+         */
+        "offset"?: number | { v: number; h: number };
+        /**
+          * Emitted when a sticker is hidden
+         */
+        "onNanoHide"?: (event: CustomEvent<{ sticker: HTMLNanoStickerElement }>) => void;
+        /**
+          * Emitted when a sticker is showing
+         */
+        "onNanoShow"?: (event: CustomEvent<{ sticker: HTMLNanoStickerElement }>) => void;
+        /**
+          * Emitted when a sticker is stuck
+         */
+        "onNanoStuck"?: (event: CustomEvent<{ sticker: HTMLNanoStickerElement }>) => void;
+        /**
+          * Emitted when a sticker is unstuck
+         */
+        "onNanoUnstuck"?: (event: CustomEvent<{ sticker: HTMLNanoStickerElement }>) => void;
+        /**
+          * The edge of the scroll-parent to stick to
+         */
+        "position"?: 'top' | 'bottom';
+        /**
+          * When applied, the sticker will hide when the scroll-parent is scrolling away from the sticker's stuck position and show when scrolling toward it. By default this will apply when the parent is below either the h or w dimensions
+         */
+        "quietMode"?: 'on' | 'off' | { h: number; w: number };
+        /**
+          * Define which scroll element to listen & stick to. By default, it will find traverse the DOM to find the closest.
+         */
+        "scrollParent"?: HTMLElement | Document;
+        /**
+          * Upon being stuck, attach the sticker to another sticker element. A JS query selector that returns a <nano-sticker>
+         */
+        "stickTo"?: string;
+    }
+    interface NanoTab {
+        /**
+          * The active, selected tab. If none active, the first will automatically be selected.
+         */
+        "active"?: boolean;
+        /**
+          * Set to true to draw the tab in an active state.
+         */
+        "disabled"?: boolean;
+        /**
+          * The name of the tab panel the tab will control. The panel must be located in the same tab group.
+         */
+        "panel"?: string;
+    }
+    interface NanoTabContent {
+        /**
+          * When true, the tab content will be shown.
+         */
+        "active"?: boolean;
+        /**
+          * The tab panel's name.
+         */
+        "name"?: string;
+    }
+    interface NanoTabGroup {
+        /**
+          * The color to use from the application's color palette.
+         */
+        "color"?: Color;
+        /**
+          * Disables the scroll arrows that appear when tabs overflow.
+         */
+        "noScrollControls"?: boolean;
+        /**
+          * Emitted when a tab is hidden.
+         */
+        "onNanoTabHide"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted when a tab is shown.
+         */
+        "onNanoTabShow"?: (event: CustomEvent<any>) => void;
+        /**
+          * The placement of the tabs.
+         */
+        "placement"?: 'top' | 'start';
+        /**
+          * Store the currently open tab (against this ID) in the component store. Use in conjunction with storeMethod
+         */
+        "storeId"?: string;
+        /**
+          * The method of storage. Either session storage, url hash (after the '#') or url query (after the '?').
+         */
+        "storeMethod"?: StorageMethods;
+    }
+    interface NanoTooltip {
+        /**
+          * The tooltip's content. Alternatively, you can use the content slot.
+         */
+        "content"?: string;
+        /**
+          * Set to true to disable the tooltip so it won't show when triggered.
+         */
+        "disabled"?: boolean;
+        /**
+          * The distance in pixels from which to offset the tooltip away from its target.
+         */
+        "distance"?: number;
+        /**
+          * Emitted after the tooltip has hidden and all transitions are complete.
+         */
+        "onNanoAfterHide"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted after the tooltip has shown and all transitions are complete.
+         */
+        "onNanoAfterShow"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden.
+         */
+        "onNanoHide"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown.
+         */
+        "onNanoShow"?: (event: CustomEvent<any>) => void;
+        /**
+          * Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.
+         */
+        "open"?: boolean;
+        /**
+          * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside of the viewport.
+         */
+        "placement"?: | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end';
+        /**
+          * The distance in pixels from which to offset the tooltip along its target.
+         */
+        "skidding"?: number;
+        /**
+          * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple options can be passed by separating them with a space. When manual is used, the tooltip must be activated programmatically.
+         */
+        "trigger"?: string;
+    }
+    interface IntrinsicElements {
+        "nano-accordion": NanoAccordion;
+        "nano-alert": NanoAlert;
+        "nano-algolia": NanoAlgolia;
+        "nano-algolia-filter": NanoAlgoliaFilter;
+        "nano-algolia-input": NanoAlgoliaInput;
+        "nano-algolia-pagination": NanoAlgoliaPagination;
+        "nano-algolia-results": NanoAlgoliaResults;
+        "nano-aspect-ratio": NanoAspectRatio;
+        "nano-checkbox": NanoCheckbox;
+        "nano-checkbox-group": NanoCheckboxGroup;
+        "nano-date-input": NanoDateInput;
+        "nano-date-picker": NanoDatePicker;
+        "nano-details": NanoDetails;
+        "nano-dialog": NanoDialog;
+        "nano-drawer": NanoDrawer;
+        "nano-dropdown": NanoDropdown;
+        "nano-file-upload": NanoFileUpload;
+        "nano-global-nav": NanoGlobalNav;
+        "nano-global-search-results": NanoGlobalSearchResults;
+        "nano-grid": NanoGrid;
+        "nano-grid-item": NanoGridItem;
+        "nano-hero": NanoHero;
+        "nano-icon": NanoIcon;
+        "nano-icon-button": NanoIconButton;
+        "nano-img": NanoImg;
+        "nano-input": NanoInput;
+        "nano-menu": NanoMenu;
+        "nano-menu-drawer": NanoMenuDrawer;
+        "nano-nav-item": NanoNavItem;
+        "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;
+        "nano-spinner": NanoSpinner;
+        "nano-sticker": NanoSticker;
+        "nano-tab": NanoTab;
+        "nano-tab-content": NanoTabContent;
+        "nano-tab-group": NanoTabGroup;
+        "nano-tooltip": NanoTooltip;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "nano-accordion": LocalJSX.NanoAccordion & JSXBase.HTMLAttributes<HTMLNanoAccordionElement>;
+            "nano-alert": LocalJSX.NanoAlert & JSXBase.HTMLAttributes<HTMLNanoAlertElement>;
+            "nano-algolia": LocalJSX.NanoAlgolia & JSXBase.HTMLAttributes<HTMLNanoAlgoliaElement>;
+            "nano-algolia-filter": LocalJSX.NanoAlgoliaFilter & JSXBase.HTMLAttributes<HTMLNanoAlgoliaFilterElement>;
+            "nano-algolia-input": LocalJSX.NanoAlgoliaInput & JSXBase.HTMLAttributes<HTMLNanoAlgoliaInputElement>;
+            "nano-algolia-pagination": LocalJSX.NanoAlgoliaPagination & JSXBase.HTMLAttributes<HTMLNanoAlgoliaPaginationElement>;
+            "nano-algolia-results": LocalJSX.NanoAlgoliaResults & JSXBase.HTMLAttributes<HTMLNanoAlgoliaResultsElement>;
+            "nano-aspect-ratio": LocalJSX.NanoAspectRatio & JSXBase.HTMLAttributes<HTMLNanoAspectRatioElement>;
+            "nano-checkbox": LocalJSX.NanoCheckbox & JSXBase.HTMLAttributes<HTMLNanoCheckboxElement>;
+            "nano-checkbox-group": LocalJSX.NanoCheckboxGroup & JSXBase.HTMLAttributes<HTMLNanoCheckboxGroupElement>;
+            "nano-date-input": LocalJSX.NanoDateInput & JSXBase.HTMLAttributes<HTMLNanoDateInputElement>;
+            "nano-date-picker": LocalJSX.NanoDatePicker & JSXBase.HTMLAttributes<HTMLNanoDatePickerElement>;
+            "nano-details": LocalJSX.NanoDetails & JSXBase.HTMLAttributes<HTMLNanoDetailsElement>;
+            "nano-dialog": LocalJSX.NanoDialog & JSXBase.HTMLAttributes<HTMLNanoDialogElement>;
+            "nano-drawer": LocalJSX.NanoDrawer & JSXBase.HTMLAttributes<HTMLNanoDrawerElement>;
+            "nano-dropdown": LocalJSX.NanoDropdown & JSXBase.HTMLAttributes<HTMLNanoDropdownElement>;
+            "nano-file-upload": LocalJSX.NanoFileUpload & JSXBase.HTMLAttributes<HTMLNanoFileUploadElement>;
+            "nano-global-nav": LocalJSX.NanoGlobalNav & JSXBase.HTMLAttributes<HTMLNanoGlobalNavElement>;
+            "nano-global-search-results": LocalJSX.NanoGlobalSearchResults & JSXBase.HTMLAttributes<HTMLNanoGlobalSearchResultsElement>;
+            "nano-grid": LocalJSX.NanoGrid & JSXBase.HTMLAttributes<HTMLNanoGridElement>;
+            "nano-grid-item": LocalJSX.NanoGridItem & JSXBase.HTMLAttributes<HTMLNanoGridItemElement>;
+            "nano-hero": LocalJSX.NanoHero & JSXBase.HTMLAttributes<HTMLNanoHeroElement>;
+            "nano-icon": LocalJSX.NanoIcon & JSXBase.HTMLAttributes<HTMLNanoIconElement>;
+            "nano-icon-button": LocalJSX.NanoIconButton & JSXBase.HTMLAttributes<HTMLNanoIconButtonElement>;
+            "nano-img": LocalJSX.NanoImg & JSXBase.HTMLAttributes<HTMLNanoImgElement>;
+            "nano-input": LocalJSX.NanoInput & JSXBase.HTMLAttributes<HTMLNanoInputElement>;
+            "nano-menu": LocalJSX.NanoMenu & JSXBase.HTMLAttributes<HTMLNanoMenuElement>;
+            "nano-menu-drawer": LocalJSX.NanoMenuDrawer & JSXBase.HTMLAttributes<HTMLNanoMenuDrawerElement>;
+            "nano-nav-item": LocalJSX.NanoNavItem & JSXBase.HTMLAttributes<HTMLNanoNavItemElement>;
+            "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>;
+            "nano-spinner": LocalJSX.NanoSpinner & JSXBase.HTMLAttributes<HTMLNanoSpinnerElement>;
+            "nano-sticker": LocalJSX.NanoSticker & JSXBase.HTMLAttributes<HTMLNanoStickerElement>;
+            "nano-tab": LocalJSX.NanoTab & JSXBase.HTMLAttributes<HTMLNanoTabElement>;
+            "nano-tab-content": LocalJSX.NanoTabContent & JSXBase.HTMLAttributes<HTMLNanoTabContentElement>;
+            "nano-tab-group": LocalJSX.NanoTabGroup & JSXBase.HTMLAttributes<HTMLNanoTabGroupElement>;
+            "nano-tooltip": LocalJSX.NanoTooltip & JSXBase.HTMLAttributes<HTMLNanoTooltipElement>;
+        }
+    }
+}