@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.1

package/dist/esm/nano-data-table.entry.js

@@ -0,0 +1,11 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+export { N as nano_data_table } from './nano-data-table-Bm9J8Phu.js';
+import './index-DOuz1S3w.js';
+import './renderer-CnE0Hztu.js';
+import './math-BEqsTfVK.js';
+import './throttle-C93FMm2Z.js';
+import './scroll-DHa1CIPP.js';
+import './dom-GYcqUAl_.js';
+import './index-DkZY6pJu.js';

package/dist/esm/nano-datalist_3.entry.js

@@ -1,15 +1,13 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
-import { g as getElement, r as registerInstance, c as createEvent, d as writeTask, a as Host } from './index-6cc72cd9.js';
-import { t as transformTag, h } from './renderer-4bc3e2dc.js';
-import { g as getActiveElement } from './active-element-a2502948.js';
-import { d as debounce } from './throttle-df960210.js';
-import { g as getDirectChildren } from './dom-fafdec9a.js';
-import { g as getTextContent } from './slot-1cd90e53.js';
+import { a as getElement, r as registerInstance, c as createEvent, e as writeTask, d as Host } from './index-DOuz1S3w.js';
+import { t as transformTag, h } from './renderer-CnE0Hztu.js';
+import { g as getActiveElement } from './active-element-C1pBwzyj.js';
+import { d as debounce } from './throttle-C93FMm2Z.js';
+import { g as getDirectChildren } from './dom-GYcqUAl_.js';
 
-const datalistCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--padding-start:var(--nano-spacing-xlarge, 24px);--padding-end:var(--nano-spacing-xlarge, 24px);--font-size:0.8em;--color:#b5aea7;color:var(--color)}.dlist--isfiltered ::slotted(*:not(.nano-option):not([slot=no-result]):not([slot=list-top]):not([slot=list-bottom])){display:none !important}.dlist__dropdown{--min-width:100%;--overflow:auto}.dlist__status{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.dlist__menu{--padding-top:inherit;--padding-bottom:inherit;--padding-start:inherit;--padding-end:inherit;--font-size:inherit}";
-const NanoDatalistStyle0 = datalistCss;
+const datalistCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--padding-top:8px;--padding-bottom:8px;--padding-start:var(--nano-spacing-l);--padding-end:var(--nano-spacing-l);--font-size:var(--nano-font-size-2xs);--color:var(--nano-color-neutral-1000);color:var(--color)}.dlist--isfiltered ::slotted(*:not(.nano-option,[slot=no-result],[slot=list-top],[slot=list-bottom])){display:none !important}.dlist__dropdown{--min-width:100%;--overflow:auto;display:inline}.dlist__status{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.dlist__menu{--padding-top:inherit;--padding-bottom:inherit;--padding-start:inherit;--padding-end:inherit;--font-size:inherit;--padding:var(--nano-spacing-sm) var(--nano-spacing-l)}";
 
 function findLabel(formCtrl) {
     let foundLabel;
@@ -99,9 +97,14 @@ const DataList = class {
     open = false;
     openWatcher() {
         writeTask(() => {
+            if (this.open) {
+                const { height, top } = this.nanoDropdown.tetherTo.getBoundingClientRect();
+                this.nanoDropdown.style.setProperty('--max-height', window.innerHeight - (height + top + 40) + 'px');
+            }
             this.nanoDropdown.open = this.open;
-            if (this.connectedInput)
+            if (this.connectedInput) {
                 this.connectedInput.setAttribute('aria-expanded', this.open.toString());
+            }
         });
     }
     /** Use this option to disable to default filtering. This is useful if filtering happens
@@ -179,7 +182,7 @@ const DataList = class {
         // forceUpdate(this.host);
     }
     watchTypeChange() {
-        if (!this.connectedInput || this.disabled)
+        if (!this.connectedInput)
             return;
         let dwConfig = { closeOnSelect: false };
         let autocompleteType = 'both';
@@ -191,7 +194,7 @@ const DataList = class {
             case 'select':
                 autocompleteType = 'list';
                 readonly = true;
-                dwConfig = { closeOnSelect: true, placement: 'center' };
+                dwConfig = { closeOnSelect: true };
                 break;
         }
         if (!this.isNanoInput) {
@@ -333,7 +336,7 @@ const DataList = class {
         e.stopPropagation();
         this.changeInputValue(e.detail);
         requestAnimationFrame(() => this.inputChange());
-        if (this.type !== 'selctMulti')
+        if (this.type !== 'selectMulti')
             this.shouldOpen = false;
     };
     // this is for type="select" only.
@@ -401,7 +404,7 @@ const DataList = class {
         const attrFind = (toFind) => toFind.toLowerCase().indexOf(valStr) > -1;
         this.allOptEles.forEach((opt) => {
             if ((val === opt.value || val === opt.label) &&
-                this.type !== 'selctMulti') {
+                this.type !== 'selectMulti') {
                 opt.selected = true;
                 exactMatch = true;
             }
@@ -425,19 +428,14 @@ const DataList = class {
         this.actvOptEles = activeEles;
     }
     inputClick = () => {
+        if (this.open)
+            return;
         this.shouldOpen = true;
         // open dropdown if possible
         this.manageDropdownDisplay();
     };
     inputKeydown = (e) => {
-        const ignoreKeys = [
-            'Shift',
-            'ArrowRight',
-            'ArrowLeft',
-            'Escape',
-            'Enter',
-            'Tab',
-        ];
+        const ignoreKeys = ['Shift', 'ArrowRight', 'ArrowLeft', 'Escape', 'Tab'];
         if (ignoreKeys.includes(e.key)) {
             if (e.key === 'Tab')
                 this.shouldOpen = false;
@@ -445,7 +443,7 @@ const DataList = class {
         }
         // When select, mirror native select behaviour. Search on closed list
         if (this.type === 'select' &&
-            !['ArrowDown', 'ArrowUp'].includes(e.key) &&
+            !['ArrowDown', 'ArrowUp', 'Enter'].includes(e.key) &&
             (e.key !== ' ' || this.typeToSelectTimeout)) {
             if (e.key === ' ' || /^[a-zA0-9]+$/i.test(e.key)) {
                 clearTimeout(this.typeToSelectTimeout);
@@ -465,7 +463,7 @@ const DataList = class {
         this.shouldOpen = true;
         // open dropdown if possible
         this.manageDropdownDisplay();
-        if (['ArrowDown', 'ArrowUp'].includes(e.key)) {
+        if (['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(e.key)) {
             e.preventDefault();
             this.shouldFocus = true;
         }
@@ -518,22 +516,23 @@ const DataList = class {
             this.mo.disconnect();
             this.mo = undefined;
         }
-        if (this.connectedInput)
-            this.removeEventListeners(this.connectedInput);
+        if (this.connectedInput) {
+            this.connectedInput = undefined;
+        }
     }
     render() {
-        return (h(Host, { key: 'e6a6afd64373143835f8e12f9349e839abaf63e1', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
+        return (h(Host, { key: 'c869f626deae72020846edf761d0d8f1b59c34e7', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
                 ? 'Select options from the list below'
-                : undefined }, h("nano-dropdown", { key: 'bd1a92afc347e6e3a9d63695bd56fb76b3a06464', ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
+                : undefined }, h("nano-dropdown", { key: '8fa52dc246705c9af636b1c96ee37df8b6bd746d', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
                 dlist__dropdown: true,
                 'dlist--isfiltered': this.isFiltered,
-            }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '846d438e2314582af9a962289ab0f908857083fa', hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
+            }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '998896a220e3cf3f010bda3354bb530ac0cc9296', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
                 dlist__menu: true,
                 'dlist__menu--open': this.dropwdownOpen,
-            }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown, ref: (el) => (this.listBox = el) }, h("slot", { key: 'f306217f59daac3e67e41bd5dbbf2a3681d56007', name: "list-top" }), h("slot", { key: '0174164d6761691413ead34af1436ee370849d98' }), h("slot", { key: 'fdcaea628c1920017a4d250b125769d422d306dc', name: "internal-opts" }), h("slot", { key: 'bcb453282e86a98805fa0c8f357b389110764252', name: "list-bottom" })), h("nano-menu", { key: '61b91937f773707bd6369649d5761951459b7991', type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
+            }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '8f585edd48ec29a847818d1e9af8baf0bc4b4ddf', name: "list-top" }), h("slot", { key: '3bdd8c0a51d63b6fcf3a25d630212db4ba7d8a9b' }), h("slot", { key: 'a7b997daebd6a1e25f1a4a97e4354b966ceeebd6', name: "internal-opts" }), h("slot", { key: '41ebc4da7244b1e4fb532a2fbb0356ea51eb865a', name: "list-bottom" })), h("nano-menu", { key: 'd5d360f4e8d3c78780477572d385daaa4bb12c15', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
                 dlist__menu: true,
                 'dlist__menu--open': this.dropwdownOpen,
-            } }, h("slot", { key: '433a4643f759e5391b13ee757628c6f196cb8060', name: "no-result" })), !!this.actvOptEles && (h("div", { key: 'caafff3ec17cba31fdc5092d96da166f64541776', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
+            } }, h("slot", { key: '3cc55519054da79e57dc70ecc936c0e67e7e3949', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '0662bfdc4056f2111647550d9aba6a331653d2f3', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
     }
     static get watchers() { return {
         "open": ["openWatcher"],
@@ -541,7 +540,6 @@ const DataList = class {
         "options": ["handleOptionsChange"],
         "type": ["watchTypeChange"],
         "connectedInput": ["watchTypeChange", "manageInputEvents"],
-        "disabled": ["watchTypeChange"],
         "selected": ["watchActvOptChange"],
         "actvOptEles": ["watchActvOptChange", "manageCanOpen", "fireActiveOptsEvent"],
         "hasNoResult": ["manageCanOpen"],
@@ -549,231 +547,14 @@ const DataList = class {
         "canOpen": ["manageDropdownDisplay"]
     }; }
 };
-DataList.style = NanoDatalistStyle0;
-
-const menuCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-start:var(--nano-spacing-medium, 16px);--padding-end:var(--nano-spacing-medium, 16px);--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--secondary-padding-top:0;--secondary-padding-bottom:0;--bg-color-hover:#f2f7f9;--bg-color-focus:#f2f7f9;--bg-color-selected:#f2f7f9;--color-hover:#007495;--color-selected:#007495;--color-focus:#007495;--focus-outline:none;--font-size:0.9em;display:block}.menu{font-size:var(--font-size, 0.9em);overscroll-behavior:none;min-inline-size:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(.nano-nav-item):not(.nano-option):not(hr):not(slot)){padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:block}";
-const NanoMenuStyle0 = menuCss;
-
-const Menu = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.nanoFocus = createEvent(this, "nanoFocus", 7);
-        this.nanoBlur = createEvent(this, "nanoBlur", 7);
-        this.nanoSelect = createEvent(this, "nanoSelect", 7);
-    }
-    ignoreMouseEvents = false;
-    ignoreMouseTimeout;
-    menu;
-    typeToSelect = '';
-    typeToSelectTimeout;
-    get el() { return getElement(this); }
-    // Public API
-    /** get the focus state of the menu @readonly */
-    get hasFocus() {
-        return this._hasFocus;
-    }
-    _hasFocus = false;
-    /** changes the role of the underlying control - sometimes required for semantics */
-    type = 'menu';
-    /** an accessible label */
-    label;
-    // Events
-    /** Emitted when the menu gains focus. */
-    nanoFocus;
-    /** Emitted when the menu loses focus. */
-    nanoBlur;
-    /** Emitted when a menu item is selected. */
-    nanoSelect;
-    // Public Methods
-    /** Sets focus on the menu. */
-    async setFocus() {
-        if (this.menu?.focus)
-            this.menu.focus({ preventScroll: true });
-    }
-    /** Removes focus from the menu. */
-    async removeFocus() {
-        if (this.menu?.blur)
-            this.menu.blur();
-    }
-    /** Sets the current active item */
-    async showActiveElement() {
-        if (this.selectedItem)
-            this.selectedItem.scrollIntoView({ block: 'nearest' });
-    }
-    /** Removes any active item's state */
-    async resetActiveItem() {
-        this.getItems
-            .filter((i) => i.tagName.toLowerCase() === transformTag('nano-option'))
-            .map((i) => i.setAttribute('tabindex', '-1'));
-    }
-    // Private methods
-    get getItems() {
-        let items;
-        const opened = this.el.querySelectorAll(`${transformTag('nano-nav-item')}.secondary-open`);
-        if (opened.length) {
-            const ctx = opened[opened.length - 1];
-            items = Array.from(ctx.querySelectorAll(`${transformTag('nano-nav-item')}, ${transformTag('nano-option')}`));
-        }
-        else {
-            items = getDirectChildren(this.el, `${transformTag('nano-nav-item')}, ${transformTag('nano-option')}`, 'slot');
-        }
-        return items.filter((el) => !el.disabled && !el.hidden);
-    }
-    get activeItem() {
-        const activeElement = getActiveElement();
-        return this.getItems.find((i) => i.getAttribute('tabindex') === '0' ||
-            i === activeElement ||
-            i.classList.contains('has-focus'));
-    }
-    get selectedItem() {
-        return this.getItems.find((i) => i.selected);
-    }
-    async setActiveFocusItem(item, focus = true) {
-        const items = this.getItems;
-        const activeItem = !item ? items.find((i) => i.selected) || items[0] : item;
-        items
-            .filter((i) => i.tagName.toLowerCase() === transformTag('nano-option'))
-            .map((i) => i.setAttribute('tabindex', i === activeItem ? '0' : '-1'));
-        if (!focus)
-            return;
-        if (activeItem) {
-            if (activeItem.setFocus)
-                activeItem.setFocus();
-            else
-                activeItem.focus();
-        }
-        else
-            this.menu.focus();
-    }
-    // Event Handlers
-    handleBlur(e) {
-        if (!this.hasFocus)
-            return;
-        const kev = e;
-        let found;
-        if (kev.key) {
-            if (kev.key !== 'Tab')
-                return;
-            found =
-                getActiveElement() &&
-                    getActiveElement().closest(this.el.tagName.toLowerCase()) === this.el;
-        }
-        else
-            found = !!e.composedPath().find((el) => el === this.el);
-        if (!found) {
-            this.resetActiveItem();
-            this._hasFocus = false;
-            this.nanoBlur.emit();
-        }
-    }
-    handleFocus = () => {
-        this.setActiveFocusItem(this.selectedItem || this.getItems[0]);
-        this._hasFocus = true;
-        this.nanoFocus.emit();
-    };
-    handleClick = (event) => {
-        const target = event.target;
-        const item = target.closest(transformTag('nano-nav-item'));
-        if (item && !item.disabled) {
-            this.nanoSelect.emit(item);
-        }
-    };
-    handleKeyDown = (event) => {
-        // When keying through the menu, if the mouse happens to be hovering over a menu item and the menu scrolls, the
-        // mouseout/mouseover event will fire causing the selection to be different than what the user expects. This gives
-        // us a way to temporarily ignore mouse events while the user is interacting with a keyboard.
-        clearTimeout(this.ignoreMouseTimeout);
-        this.ignoreMouseTimeout = setTimeout(() => (this.ignoreMouseEvents = false), 500);
-        this.ignoreMouseEvents = true;
-        // Make a selection when pressing enter
-        switch (event.key) {
-            case ' ':
-                if (this.activeItem)
-                    this.activeItem.click();
-                break;
-            case 'ArrowDown':
-            case 'ArrowUp':
-            case 'PageDown':
-            case 'PageUp':
-            case 'Home':
-            case 'End': {
-                const items = this.getItems;
-                const selectedItem = this.activeItem;
-                let index = items.indexOf(selectedItem);
-                if (items.length) {
-                    event.preventDefault();
-                    if (event.key === 'ArrowDown') {
-                        index++;
-                    }
-                    else if (event.key === 'ArrowUp') {
-                        index--;
-                    }
-                    else if (event.key === 'Home' || event.key === 'PageUp') {
-                        index = 0;
-                    }
-                    else if (event.key === 'End' || event.key === 'PageDown') {
-                        index = items.length - 1;
-                    }
-                    if (index < 0)
-                        index = items.length - 1;
-                    if (index > items.length - 1)
-                        index = 0;
-                    this.setActiveFocusItem(items[index]);
-                    if (items[index])
-                        items[index].scrollIntoView({ block: 'nearest' });
-                    return;
-                }
-                break;
-            }
-        }
-        // Handle type-to-search behavior when non-control characters are entered
-        if (event.key === ' ' || /^[a-z0-9]+$/i.test(event.key)) {
-            clearTimeout(this.typeToSelectTimeout);
-            this.typeToSelectTimeout = setTimeout(() => (this.typeToSelect = ''), 750);
-            this.typeToSelect += event.key;
-            const items = this.getItems;
-            for (const item of items) {
-                const slot = item.shadowRoot.querySelector('slot:not([name])');
-                const label = getTextContent(slot).toLowerCase().trim();
-                if (label.substring(0, this.typeToSelect.length) === this.typeToSelect) {
-                    this.setActiveFocusItem(item);
-                    break;
-                }
-            }
-        }
-    };
-    handleMouseOver = (event) => {
-        const target = event.target;
-        const item = target.closest(transformTag('nano-nav-item')) ||
-            target.closest(transformTag('nano-option'));
-        if (item && !this.ignoreMouseEvents) {
-            this.setActiveFocusItem(item);
-        }
-    };
-    // Component Lifecycle
-    componentDidLoad() {
-        {
-            getDirectChildren(this.el, ':not(nano-nav-item):not(nano-option):not([role])', true).forEach((el) => el.setAttribute('role', 'none'));
-        }
-    }
-    render() {
-        return (h(Host, { key: '78d73e5aceb8bc9890134c9253834d37c0faf1c3', role: this.type === 'menu' ? 'menu' : 'group', class: "nano-menu" }, h("div", { key: 'e38c5896dc520623bf97392954f278f5ea1b0450', onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onFocus: this.handleFocus, "aria-label": this.label ? this.label : undefined, ref: (el) => (this.menu = el), part: "base", class: {
-                menu: true,
-                ['menu--' + this.type]: true,
-                'menu--has-focus': this.hasFocus,
-            }, tabIndex: -1, role: "group" }, h("slot", { key: '213aae294bd3f00e968561ed98716b67c76387a6' }))));
-    }
-};
-Menu.style = NanoMenuStyle0;
+DataList.style = datalistCss;
 
-const optionCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--bg:none;--bg-selected:var(--nano-select-opt-bg, #f2f7f9);--bg-focus:var(--nano-color-base, var(--nano-color-primary-tint, #2689a5));--bg-disabled:none;--color:var(--input-text-color, var(--nano-input-text-color, #4a4a4a));--color-selected:var(--nano-color-base, var(--nano-color-primary, #007495));--color-focus:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--color-disabled:#b5aea7;--opt-icon-size:1.6em;display:block;color:var(--color);overflow:hidden;font-size:14px;font-size:clamp(12px, .9em, 16px)}:host(:focus){outline:none}.option{position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;align-items:stretch;inline-size:100%;background:var(--bg);padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom)}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{flex:1 1 auto;display:flex;align-items:center}.option__start{flex:0 0 auto;display:flex;align-items:center}.option__start ::slotted(.nano-icon){font-size:var(--opt-icon-size)}.option__start ::slotted(:last-child){margin-inline-end:0.5em}.option__end{flex:0 0 auto;display:flex;align-items:center}.option__end ::slotted(.nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){margin-inline-start:0.5em}.option__check{visibility:hidden;display:flex;position:absolute;inset-inline-start:0.6em;inset-block-start:calc(50% - 0.6em);align-items:center;font-size:0.9em}.option--selected:not(.option--novalue) .option__check{visibility:visible}";
-const NanoOptionStyle0 = optionCss;
+const optionCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--bg:none;--bg-selected:none;--bg-focus:var(--nano-color-blue-cerulean-1000);--bg-disabled:none;--color:var(--nano-color-base-1000);--color-selected:var(--nano-color-base-1000);--color-focus:var(--nano-color-base-0);--color-disabled:var(--nano-color-neutral-300);--opt-icon-size:1em;--padding-start:var(--nano-spacing-sm);--padding-end:var(--nano-spacing-md);--padding-bottom:6px;--padding-top:6px;display:block;color:var(--color);overflow:hidden;font-size:var(--nano-font-size-xs)}:host(:focus){outline:none}.option{color:inherit;text-decoration:none;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;align-items:stretch;inline-size:100%;background:var(--bg);padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom)}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{flex:1 1 auto;display:flex;align-items:center}.option__start{flex:0 0 auto;display:flex;align-items:center}.option__start ::slotted(.nano-icon){font-size:var(--opt-icon-size)}.option__start ::slotted(:last-child){margin-inline-end:var(--padding-end)}.option__end{flex:0 0 auto;display:flex;align-items:center}.option__end ::slotted(.nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){margin-inline-start:var(--padding-start)}.option__check{visibility:hidden;display:flex;margin-inline-end:var(--padding-start);align-items:center;font-size:var(--nano-font-size-2xs);inline-size:var(--nano-font-size-2xs)}.option--selected:not(.option--novalue) .option__check{visibility:visible}";
 
 let optIds = 0;
 const Option = class {
     optId = `nano-option-${optIds++}`;
     get host() { return getElement(this); }
-    hasFocus = false;
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.nanoSelect = createEvent(this, "nanoSelect", 7);
@@ -808,18 +589,20 @@ const Option = class {
      * search / filter via extra related terms. Another usecase is 'endonyms'
      */
     filterMeta = '';
+    /** Setting an href will render an `<a>` element */
+    href;
     /** Fired when an option is selected */
     nanoSelect;
     // Event handlers
-    // stop scrolling on select
     handleKeyDown(e) {
-        if (e.key !== ' ' && e.key !== 'Enter')
+        if ((e.key !== ' ' && e.key !== 'Enter') || this.href)
             return;
+        // stop scrolling on select
         e.preventDefault();
         this.nanoSelect.emit(this.host);
     }
     handleClick() {
-        if (this.disabled)
+        if (this.disabled || this.href)
             return;
         this.nanoSelect.emit(this.host);
     }
@@ -836,20 +619,66 @@ const Option = class {
         this.labelChanged();
     }
     render() {
-        return (h(Host, { key: '9c710d546cb6c588559561ea7759446d8a4b5a48', role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: "nano-option" }, h("div", { key: 'b8824f9d1d8736e434ffb32b122a419767e897d3', onMouseDown: this.handleClick, id: this.optId, class: {
+        const WrapTag = this.href ? 'a' : 'div';
+        return (h(Host, { key: 'ab20615d63e2e61ae1d685d4e56074e9192aad02', role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: "nano-option" }, h(WrapTag, { key: 'b301227561b6201851a03b6b1511fc789d58f872', href: this.href || undefined, onMouseDown: this.handleClick, id: this.optId, class: {
                 option: true,
                 'option--selected': this.selected,
                 'option--disabled': this.disabled,
                 'option--novalue': !this.value,
-            } }, h("div", { key: '81424ff221aa45c36268315cea0a07a49d5bd092', part: "check-icon", class: "option__check" }, h("slot", { key: '331a405714047eb22fc7043d4e0bf3dbdf67ca55', name: "check-icon" }, h("nano-icon", { key: '0fc3ee15ccca0c3195bd9a5feb844060419f9ed2', name: "light/check", "aria-hidden": "true" }))), h("div", { key: 'e83acd281d86ea73e39566c718bef76781ab77ac', part: "start", class: "option__start" }, h("slot", { key: 'f971683c4b1ea04cd7bfdcaab55a9f4fce544ce8', name: "start" })), h("div", { key: '5e69f3f9cbe5358714802d3718ab154d3badc9e4', part: "label", class: "option__label" }, h("slot", { key: '3449b82ecd58edc5faf2bb713d63db9e975fdc96' }, this.label || this.value)), h("div", { key: 'a634d9bb9bb769ad94dc4141bfd938eb65dd78b2', part: "end", class: "option__end" }, h("slot", { key: '64de93cc1d913c4a842d27c622f8e0a45567677a', name: "end" })))));
+            } }, h("div", { key: 'ed2d11478560dd2e73f7b1373a6742a3f14368a8', part: "check-icon", class: "option__check" }, h("slot", { key: '23a98f11788b6427ea1187bd4f0ddce6fb945ad1', name: "check-icon" }, h("nano-icon", { key: 'ae544942a830172078186d6b060d06423cdce4f6', name: "light/check", "aria-hidden": "true" }))), h("div", { key: '8cc27b2315e7746e5a239cc5f28f656963736e56', part: "start", class: "option__start" }, h("slot", { key: '774af5f7b50587f609dcefa3ba5c41340d9a6acf', name: "start" })), h("div", { key: '3c4524e66aac70d5e74b42271ff57ab10f747cf6', part: "label", class: "option__label" }, h("slot", { key: 'dc4fa00135857715d9867f747a14a19b01b892d1' }, this.label || this.value)), h("div", { key: '3f59b784aec9d62f4c1aaf731781ff21b53e114b', part: "end", class: "option__end" }, h("slot", { key: '138aa8b09d4195210528e87ff763c8c4d9a668b7', name: "end" })))));
     }
     static get watchers() { return {
         "value": ["valueChanged"],
         "label": ["labelChanged"]
     }; }
 };
-Option.style = NanoOptionStyle0;
+Option.style = optionCss;
+
+const tagCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}";
 
-export { DataList as nano_datalist, Menu as nano_menu, Option as nano_option };
+const NanoTag = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.nanoClose = createEvent(this, "nanoClose", 7);
+    }
+    /**
+     * Whether the tag is closable or not.
+     * If true, a close button will be displayed.
+     */
+    closable = false;
+    /**
+     * The size of the tag.
+     */
+    size = 'regular';
+    get el() { return getElement(this); }
+    /**
+     * Fires when close button is clicked
+     */
+    nanoClose;
+    onKeyDown = (e) => {
+        switch (e.key) {
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                this.close();
+                break;
+        }
+    };
+    handleClick = (_e) => {
+        this.close();
+    };
+    close() {
+        this.nanoClose.emit();
+    }
+    containsAnchor = () => !!this.el.querySelector('a');
+    render() {
+        return (this.closable &&
+            !this.containsAnchor() && [
+            h("slot", { key: '0d6e99e16dc034266f43677f5dbb47b7a390d562' }),
+            h("nano-icon-button", { key: '08586a086598c37e6d4af76df6ff19ca1723b3d8', label: "Close", "icon-name": "light/xmark-large", onKeyDown: this.onKeyDown, onClick: this.handleClick }),
+        ]);
+    }
+};
+NanoTag.style = tagCss;
 
-//# sourceMappingURL=nano-datalist_3.entry.js.map
+export { DataList as nano_datalist, Option as nano_option, NanoTag as nano_tag };

package/dist/esm/nano-date-input.entry.js

@@ -1,13 +1,12 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
-import { r as registerInstance, c as createEvent, g as getElement, a as Host } from './index-6cc72cd9.js';
-import { h } from './renderer-4bc3e2dc.js';
-import { p as parseISODate, a as printISODate, c as createDate } from './date-utils-1e39c114.js';
-import { c as createColorClasses } from './theme-d553c17a.js';
+import { r as registerInstance, c as createEvent, a as getElement, d as Host } from './index-DOuz1S3w.js';
+import { h } from './renderer-CnE0Hztu.js';
+import { p as parseISODate, a as printISODate, c as createDate } from './date-utils-BZYdjI1P.js';
+import { c as createColorClasses } from './theme-aiuyr36I.js';
 
-const dateInputCss = ".sc-nano-date-input-h{box-sizing:border-box}*.sc-nano-date-input,*.sc-nano-date-input::before,*.sc-nano-date-input::after{box-sizing:border-box}[hidden].sc-nano-date-input{display:none !important}.sc-nano-date-input-h{box-sizing:border-box}*.sc-nano-date-input,*.sc-nano-date-input::before,*.sc-nano-date-input::after{box-sizing:border-box}[hidden].sc-nano-date-input{display:none !important}.sc-nano-date-input-h{display:inline-block;inline-size:100%;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--open-btn-color:var(--nano-button-color, #f0efed);--open-btn-border:none;--close-btn-color:var(--nano-button-color, #f0efed);--picker-base-size:16px}.nano-color.sc-nano-date-input-h{--focus-shadow:0 0 0 0.1875rem rgb(var(--nano-color-tint-rgb)/0.56)}.nano-icon.sc-nano-date-input{pointer-events:none}.date-field.sc-nano-date-input{display:flex;flex-direction:column;position:relative}.date-field__dropdown.sc-nano-date-input{--padding:0;--overflow:visible;padding:0 !important;inline-size:0 !important;inline-size:100%;z-index:var(--nano-layer-index-dropdown, 300) !important}.date-field__close-bar.sc-nano-date-input{align-items:center;display:flex;justify-content:space-between;text-overflow:ellipsis;white-space:nowrap;border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-8px;inset-block-start:-8px;inline-size:auto;z-index:1}.date-field__open.sc-nano-date-input{background:var(--open-btn-color);border:var(--open-btn-border);margin:0;appearance:none}.date-field__open.sc-nano-date-input:focus{box-shadow:var(--focus-shadow);outline:none}.date-field__close.sc-nano-date-input{align-items:center;appearance:none;background:var(--close-btn-color);border:0;border-radius:50%;cursor:pointer;display:flex;block-size:24px;justify-content:center;padding:0;inline-size:24px}@media (width >= 36em){.date-field__close.sc-nano-date-input{opacity:0}}.date-field__close.sc-nano-date-input:focus{box-shadow:var(--focus-shadow);outline:none}@media (width >= 36em){.date-field__close.sc-nano-date-input:focus{opacity:1}}.date-field__close.sc-nano-date-input .nano-icon.sc-nano-date-input{margin-block:0;margin-inline:auto}.date-field.sc-nano-date-input .nano-date-picker.sc-nano-date-input{font-size:var(--picker-base-size)}.vhidden.sc-nano-date-input{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";
-const NanoDateInputStyle0 = dateInputCss;
+const dateInputCss = ".sc-nano-date-input-h,*.sc-nano-date-input,*.sc-nano-date-input::before,*.sc-nano-date-input::after{box-sizing:border-box}[hidden].sc-nano-date-input{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-date-input-h,*.sc-nano-date-input,*.sc-nano-date-input::before,*.sc-nano-date-input::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-date-input-h,*.sc-nano-date-input,*.sc-nano-date-input::before,*.sc-nano-date-input::after{box-sizing:border-box}[hidden].sc-nano-date-input{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-date-input-h,*.sc-nano-date-input,*.sc-nano-date-input::before,*.sc-nano-date-input::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-date-input-h{display:inline-block;inline-size:100%;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--open-btn-color:var(--nano-button-color, #f0efed);--open-btn-border:none;--close-btn-color:var(--nano-button-color, #f0efed);--picker-base-size:16px}.nano-color.sc-nano-date-input-h{--focus-shadow:0 0 0 0.1875rem rgb(var(--nano-color-tint-rgb)/0.56)}.nano-icon.sc-nano-date-input{pointer-events:none}.date-field.sc-nano-date-input{display:flex;flex-direction:column;position:relative}.date-field__dropdown.sc-nano-date-input{--padding:0;--overflow:visible;padding:0 !important;inline-size:0 !important;inline-size:100%;z-index:var(--nano-layer-index-dropdown, 300) !important}.date-field__close-bar.sc-nano-date-input{align-items:center;display:flex;justify-content:space-between;text-overflow:ellipsis;white-space:nowrap;border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-8px;inset-block-start:-8px;inline-size:auto;z-index:1}.date-field__open.sc-nano-date-input{background:var(--open-btn-color);border:var(--open-btn-border);margin:0;appearance:none}.date-field__open.sc-nano-date-input:focus{box-shadow:var(--focus-shadow);outline:none}.date-field__close.sc-nano-date-input{align-items:center;appearance:none;background:var(--close-btn-color);border:0;border-radius:50%;cursor:pointer;display:flex;block-size:24px;justify-content:center;padding:0;inline-size:24px}@media (width >= 36em){.date-field__close.sc-nano-date-input{opacity:0}}.date-field__close.sc-nano-date-input:focus{box-shadow:var(--focus-shadow);outline:none}@media (width >= 36em){.date-field__close.sc-nano-date-input:focus{opacity:1}}.date-field__close.sc-nano-date-input .nano-icon.sc-nano-date-input{margin-block:0;margin-inline:auto}.date-field.sc-nano-date-input .nano-date-picker.sc-nano-date-input{font-size:var(--picker-base-size)}.vhidden.sc-nano-date-input{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}";
 
 const DateRegxps = {
     d: '(\\d{1,2})',
@@ -26,7 +25,6 @@ const DateInput = class {
     pickerCloseBtn;
     dropdown;
     input;
-    pickerOpenSource;
     directInput = false;
     dateOrderIndeces = { d: 0, m: 1, y: 3 };
     inputId = `nano-input-${inputIds++}`;
@@ -111,7 +109,7 @@ const DateInput = class {
     /**
      * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
      */
-    clearInput = false;
+    clearable = false;
     /**
      * String to place within a label element. Alternatively you may use a label slot.
      */
@@ -207,7 +205,7 @@ const DateInput = class {
      */
     picker = true;
     /**
-     * Initial picker date. Will be to `value` if set. Will be today's date if nothing set.
+     * Initial picker date. Defaults to `value` if set and today's date if not.
      * Must be in IS0-8601 format: YYYY-MM-DD.
      */
     initialPickerDate;
@@ -309,23 +307,15 @@ const DateInput = class {
         setTimeout((_) => (this.pickerOpen = false), 200);
         setTimeout((_) => this.trigger.focus(), 50);
     };
-    onDropdownShow = () => {
-        setTimeout((_) => {
-            this.pickerEle.setFocus(false, this.pickerOpenSource === 'key');
-            this.pickerOpenSource = null;
-        }, 200);
-    };
     onTriggerClick = () => {
         if (!this.pickerOpen) {
             this.pickerOpen = true;
-            this.pickerOpenSource = 'mouse';
         }
     };
     onTriggerKey = (e) => {
         if ([' ', 'Enter'].includes(e.key)) {
             if (!this.pickerOpen) {
                 this.pickerOpen = true;
-                this.pickerOpenSource = 'key';
             }
         }
     };
@@ -394,6 +384,7 @@ const DateInput = class {
         return dateStr;
     }
     connectedCallback() {
+        console.warn('nano-date-input is deprecated and will be removed in a future version. Use nano-input with type="date" instead.');
         this.setDatePattern();
         this.handleValueChange();
     }
@@ -416,10 +407,10 @@ const DateInput = class {
             this.dropDownConfig.tetherTo = this.trigger;
         const valueDate = parseISODate(this.value);
         const hasHelperSlot = !!this.host.querySelector('[slot="helper"]');
-        return (h(Host, { key: '10cc3a473bcaabed644824018630e99a1dc97285', class: { ...createColorClasses(this.color), 'date-input': true } }, h("div", { key: '16632dc366bed7fff25941bb12ba022b126397e6', class: "date-field" }, h("nano-input", { key: '3e6909fd765bd1ed73231fa8be5a061a8a1e032f', class: "date-field__input", slot: "trigger", required: this.required || undefined, showInlineError: this.showInlineError, validateOn: this.validateOn, placeholder: this.placeholder !== 'false' ? this.placeholder : undefined, pattern: this.pattern, label: this.label, disabled: this.disabled || undefined, color: this.color || undefined, autofocus: this.autofocus || undefined, clearInput: this.clearInput || undefined, onNanoChange: this.onInputChange, onNanoInput: this.onInputKey, onNanoValidate: this.onInputValidate, name: "", form: this.form || undefined, size: this.size || undefined, readonly: this.readonly, value: this.inputValue, ref: (input) => (this.input = input), floatLabel: this.floatLabel, hideLabel: this.hideLabel, inputmode: 'numeric', part: "input" }, h("slot", { key: '14bb7aa556675be2c7b94d1e1dd3ec4a1d9c1b2d', name: "start", slot: "start" }), h("slot", { key: '115fc589b717c7ab2e374d03dc6f4015907b44dd', name: "label", slot: "label" }), h("slot", { key: '2d86afd1e8e25ef60568cdb8b3b9e41793ae0a66', name: "end", slot: "end" }), this.picker && [
-            h("button", { key: '741cf88ae3c4deebb58d815c053e90de4bc53d9d', slot: "end", class: "date-field__open", type: "button", onKeyDown: this.onTriggerKey, onClick: this.onTriggerClick, ref: (trigger) => (this.trigger = trigger), disabled: this.disabled || this.readonly }, h("nano-icon", { key: '1706c0202aacb50e29bd77d6a21896bb0b0b18a6', name: "light/calendar-days" })),
-            h("nano-dropdown", { key: '0a9acac249c9056d89ee07df62059e04fbc5195f', slot: "end", onNanoHide: this.onDropdownHide, onNanoShow: this.onDropdownShow, dialogTitle: "Choose a date", class: "date-field__dropdown", ref: (dropdown) => (this.dropdown = dropdown), ...this.dropDownConfig, part: "dropdown" }, h("div", { key: '41d05ebd55994d7cf036ed9ed03e914a53f61142' }, h("div", { key: '86175e0f4ce2278ef73cb203d1ff98a9debaf2fa', class: "date-field__close-bar" }, h("button", { key: '4a2fcac03a395e0debe269477c6af1d070dc17a3', class: "date-field__close", type: "button", onMouseDown: this.onCloseClick, onKeyDown: this.onCloseKeyDown, ref: (pickerClose) => (this.pickerCloseBtn = pickerClose) }, h("nano-icon", { key: 'ff0cdb92aaa76e6a1fb73707034a24266ea63fdf', name: "light/xmark" }), h("span", { key: '63a11831d86b83d38e598d148900da95fc1ef9f6', class: "vhidden" }, "Close window"))), h("nano-date-picker", { key: '870ab0597d916e7a75903cf5e41b3654bc6fa578', isDateDisabled: this.isDateDisabled, onNanoDatePicked: this.onDatePicked, min: this.min || undefined, max: this.max || undefined, "is-modal": true, ref: (picker) => (this.pickerEle = picker), localization: this.localization, selectedDate: this.value || this.initialPickerDate, firstDayOfWeek: this.firstDayOfWeek, color: this.color || undefined, part: "date-picker" }))),
-        ], (hasHelperSlot || this.helperText || this.showInlineError) && (h("span", { key: 'bb51d81e5b6a1bba76687a463b43466584ccde09', slot: "helper" }, h("span", { key: '1b9ba5f2b56bb3fab5cbbda97657395eb01668df', class: { vhidden: !!this.value.length } }, h("slot", { key: 'f2cdaf86b02a54d5ef47185802df2787b0ad3fc0', name: "helper" })), this.helperText && !!valueDate && (h("span", { key: 'c90b4d9d6e687f492feeeef14f3a556ccaec2d62' }, valueDate.toLocaleDateString(this.locale, this.helperTextFormat)))))), h("input", { key: '70cf184aa59cb0893ad4acc55554a63a7fa45bcf', type: "hidden", value: this.value, name: this.name }))));
+        return (h(Host, { key: 'e5387f4d921d8ec1dd46a2e80bb68b98c6d050e0', class: { ...createColorClasses(this.color), 'date-input': true } }, h("div", { key: 'ee8bbe0b2c0923cc229e639179d0c7f4819cc665', class: "date-field" }, h("nano-input", { key: '0c2062d026b56c893adba3ecc4ad545408083cd6', class: "date-field__input", slot: "trigger", required: this.required || undefined, showInlineError: this.showInlineError, validateOn: this.validateOn, placeholder: this.placeholder !== 'false' ? this.placeholder : undefined, pattern: this.pattern, label: this.label, disabled: this.disabled || undefined, color: this.color || undefined, autofocus: this.autofocus || undefined, clearable: this.clearable || undefined, onNanoChange: this.onInputChange, onNanoInput: this.onInputKey, onNanoValidate: this.onInputValidate, name: "", form: this.form || undefined, size: this.size || undefined, readonly: this.readonly, value: this.inputValue, ref: (input) => (this.input = input), floatLabel: this.floatLabel, hideLabel: this.hideLabel, inputmode: 'numeric', part: "input" }, h("slot", { key: '2faabea02873035c747b023251aa8ecd38b5eec8', name: "start", slot: "start" }), h("slot", { key: '7459e5f0c001018166fc25b40f0ebf8377d50269', name: "label", slot: "label" }), h("slot", { key: '2657702bbe0bbe221f092631c2f41e7cc296e301', name: "end", slot: "end" }), this.picker && [
+            h("button", { key: 'fa62df397158bb262bf47ae9d3607424f2b65729', slot: "end", class: "date-field__open", type: "button", onKeyDown: this.onTriggerKey, onClick: this.onTriggerClick, ref: (trigger) => (this.trigger = trigger), disabled: this.disabled || this.readonly }, h("nano-icon", { key: '9cb9ea18875aabffda4ffc384a5bee81a5337420', name: "light/calendar-days" })),
+            h("nano-dropdown", { key: 'c813474e3ab6b19d53cb090e72c47ff6e850f739', slot: "end", onNanoHide: this.onDropdownHide, dialogTitle: "Choose a date", class: "date-field__dropdown", ref: (dropdown) => (this.dropdown = dropdown), ...this.dropDownConfig, part: "dropdown" }, h("div", { key: 'ebc1a186d359f6d3b33a94ebf20494cfa2d90bda' }, h("div", { key: '59d1112f354d77f14240ca956ddf09a89940bb45', class: "date-field__close-bar" }, h("button", { key: 'd18615f69c49954bce85c962e99fee6c16e67451', class: "date-field__close", type: "button", onMouseDown: this.onCloseClick, onKeyDown: this.onCloseKeyDown, ref: (pickerClose) => (this.pickerCloseBtn = pickerClose) }, h("nano-icon", { key: 'ece83cc846678beed11e322c9b52afc56b46356f', name: "light/xmark" }), h("span", { key: '60a6b3c6e95972f8307dd7d0f51bfe3d48e4da00', class: "vhidden" }, "Close window"))), h("nano-date-picker", { key: 'c5efd935b37738d00def7234e7bee1a60710ea75', isDateDisabled: this.isDateDisabled, onNanoDatePicked: this.onDatePicked, min: this.min || undefined, max: this.max || undefined, "is-modal": true, ref: (picker) => (this.pickerEle = picker), localization: this.localization, selectedDate: this.value || this.initialPickerDate, firstDayOfWeek: this.firstDayOfWeek, color: this.color || undefined, part: "date-picker" }))),
+        ], (hasHelperSlot || this.helperText || this.showInlineError) && (h("span", { key: 'c2aff5297c406107f98f07d6f3fd65fcbacbefc3', slot: "helper" }, h("span", { key: 'e429219f14b8b68e63682f83864ff8ba694c0ec1', class: { vhidden: !!this.value.length } }, h("slot", { key: '2a2f1fab799e5826dfd41070959a48962d3bc754', name: "helper" })), this.helperText && !!valueDate && (h("span", { key: 'd09144b4ef71b33dcecef9d50cb635e4d336c45d' }, valueDate.toLocaleDateString(this.locale, this.helperTextFormat)))))), h("input", { key: '4d7826a5502e8574fca54bd09192be3980b0a95f', type: "hidden", value: this.value, name: this.name }))));
     }
     static get watchers() { return {
         "value": ["handleValueChange", "testDateValidity"],
@@ -429,8 +420,6 @@ const DateInput = class {
         "pickerOpen": ["handlePickerOpenChange"]
     }; }
 };
-DateInput.style = NanoDateInputStyle0;
+DateInput.style = dateInputCss;
 
 export { DateInput as nano_date_input };
-
-//# sourceMappingURL=nano-date-input.entry.js.map