@nanoporetech-digital/components 7.9.1 → 8.0.0-alpha.0

package/dist/components/avatar.js

@@ -0,0 +1,33 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+
+const avatarCss = ":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}}";
+
+const NanoAvatar = /*@__PURE__*/ proxyCustomElement(class NanoAvatar extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    /** Initials to use as when no image is available (1–2 characters max recommended). */
+    initials;
+    static get style() { return avatarCss; }
+}, [0, "nano-avatar", {
+        "initials": [513]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nano-avatar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nano-avatar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NanoAvatar);
+            }
+            break;
+    } });
+}
+
+export { NanoAvatar as N, defineCustomElement as d };

package/dist/components/badge.js

@@ -0,0 +1,36 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+
+const NanoBadge = /*@__PURE__*/ proxyCustomElement(class NanoBadge extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    /** The semantic theme of the button. Defaults to primary / brand blue  */
+    theme;
+    /** The strength / vibrancy of the theme. Defaults to `3` */
+    strength;
+    /** Use pulse to draw attention to the badge with an animation */
+    pulse;
+}, [0, "nano-badge", {
+        "theme": [513],
+        "strength": [513],
+        "pulse": [516]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nano-badge"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nano-badge":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NanoBadge);
+            }
+            break;
+    } });
+}
+
+export { NanoBadge as N, defineCustomElement as d };

package/dist/components/component-store.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { getElement } from '@stencil/core/internal/client';
 import { d as debounce } from './throttle.js';
@@ -18,14 +18,7 @@ function parse(searchParams, replacer) {
             .map(n => decodeURIComponent(n.replace(/\+/g, ' ')));
         const value = rawValue.length === 1 ? rawValue[0] : rawValue;
         let key = paramKey;
-        let v = replacer ?
-            replacer({
-                firstRawValue: params.get(paramKey).split(','),
-                key,
-                rawValue,
-                value,
-            }) :
-            value;
+        let v = value;
         if (key.includes('.')) {
             const [f, ...kl] = key.split('.');
             const o = (t[f] || {});
@@ -64,9 +57,7 @@ function stringify(input, replacer) {
                     value = rawValue.toString();
                 else
                     value = String(rawValue);
-                const vv = replacer ?
-                    replacer({ flattenedKey, key, rawValue, value }) :
-                    value;
+                const vv = value;
                 vv != null && sp.append(flattenedKey, vv);
             }
         });
@@ -187,46 +178,58 @@ const ComponentStore = {
             return acc;
         }, {});
         store.set(getId, new Store(getId, component, keys, initialState, method));
-        const componentstore = store.get(getId);
-        componentstore.dispatchToProps();
+        const componentStore = store.get(getId);
+        componentStore.dispatchToProps();
         const connectedCallback = component.connectedCallback;
         component.connectedCallback = function () {
             store.set(getId, new Store(getId, component, keys, initialState, method));
-            const componentstore = store.get(getId);
+            const componentStore = store.get(getId);
             if (connectedCallback) {
                 connectedCallback.call(component);
             }
-            if (componentstore)
-                componentstore.dispatchToProps();
+            if (componentStore)
+                componentStore.dispatchToProps();
         };
         const componentDidRender = component.componentDidRender;
         component.componentDidRender = function () {
-            const componentstore = store.get(getId);
+            const componentStore = store.get(getId);
             if (componentDidRender) {
                 componentDidRender.call(component);
             }
-            if (componentstore)
-                componentstore.savePropsToStore();
+            if (componentStore)
+                componentStore.savePropsToStore();
         };
         const disconnectedCallback = component.disconnectedCallback;
         component.disconnectedCallback = function () {
-            const componentstore = store.get(getId);
-            if (componentstore)
-                componentstore.delete();
+            const componentStore = store.get(getId);
+            if (componentStore)
+                componentStore.delete();
             store.delete(getId);
             if (disconnectedCallback) {
                 disconnectedCallback.call(component);
             }
         };
     },
+    update(id) {
+        const componentStore = store.get(id);
+        if (componentStore) {
+            componentStore.savePropsToStore();
+        }
+        else {
+            console.error(`No store found for id: ${id}`);
+        }
+    },
+    get(id) {
+        return store.get(id);
+    },
 };
 class Store {
     method = 'session';
     keys;
     id;
     component;
-    initialState = {};
     updateStore = true;
+    initialState = {};
     constructor(id, component, keys, initialState, method) {
         if (!id)
             throw new Error('No id set. You can only instantiate a new component store with an id');
@@ -319,5 +322,3 @@ class Store {
 }
 
 export { ComponentStore as C };
-
-//# sourceMappingURL=component-store.js.map

package/dist/components/cta.js

@@ -0,0 +1,61 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const ctaCss = ":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}}";
+
+const NanoCta = /*@__PURE__*/ proxyCustomElement(class NanoCta extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    get host() { return this; }
+    /** The semantic theme of the button. Defaults to primary / brand blue  */
+    theme;
+    /** Turn on the secondary style. Every theme also has a secondary style */
+    secondary;
+    /** The size of the button. Defaults to large */
+    size;
+    /** Show a loading spinner */
+    loading;
+    /**
+     * A predefined icon to show. Defaults to no icon.
+     * *note* Will be overruled if a `<nano-icon />` or `<svg />` is detected
+     */
+    icon;
+    /** Predefined styles when displaying a number of CTAs together */
+    group;
+    internalButton = false;
+    componentWillLoad() {
+        this.internalButton = !this.host.querySelector('button, a');
+    }
+    render() {
+        if (!this.internalButton)
+            return;
+        return (h("button", { type: "button", class: "nano-internal-cta" }, h("slot", null)));
+    }
+    static get style() { return ctaCss; }
+}, [4, "nano-cta", {
+        "theme": [513],
+        "secondary": [516],
+        "size": [513],
+        "loading": [513],
+        "icon": [513],
+        "group": [513]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nano-cta"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nano-cta":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NanoCta);
+            }
+            break;
+    } });
+}
+
+export { NanoCta as N, defineCustomElement as d };

package/dist/components/datalist.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { proxyCustomElement, HTMLElement, createEvent, writeTask, Build, Host } from '@stencil/core/internal/client';
 import { t as transformTag, h } from './renderer.js';
@@ -9,8 +9,7 @@ import { g as getDirectChildren } from './dom.js';
 import { d as defineCustomElement$2 } from './dropdown.js';
 import { d as defineCustomElement$1 } from './menu.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;
@@ -102,9 +101,14 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
     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
@@ -194,7 +198,7 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
             case 'select':
                 autocompleteType = 'list';
                 readonly = true;
-                dwConfig = { closeOnSelect: true, placement: 'center' };
+                dwConfig = { closeOnSelect: true };
                 break;
         }
         if (!this.isNanoInput) {
@@ -336,7 +340,7 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
         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.
@@ -404,7 +408,7 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
         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;
             }
@@ -428,19 +432,14 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
         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;
@@ -448,7 +447,7 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
         }
         // 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);
@@ -468,7 +467,7 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
         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;
         }
@@ -525,18 +524,18 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
             this.removeEventListeners(this.connectedInput);
     }
     render() {
-        return (h(Host, { key: '967dd82369e855a7f9edf70cb17737d36efc1828', 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: '0e0725581517a0a58fbaf04bfd5dba2d4362f71d', 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: 'd98ed992c76129d5f1a1b5cb3c2a7e4c0c385118', ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
+                : undefined }, h("nano-dropdown", { key: '5b0a39513e9c0717bf3240c250f703c6997b8a23', 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: 'b06ac3c64408a331819e3326fb72adfdf5c07b91', 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: 'a6c4229eda26e59f8cf37602bcb0fa61e80ee2e5', 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: '58683fab717385e8dff20602683964327093f660', name: "list-top" }), h("slot", { key: '949fb5e02b13f878cde4d90a9848fcb18b35ea2c' }), h("slot", { key: 'ed9bccc1520dc103e1673fae32094b05245ab704', name: "internal-opts" }), h("slot", { key: 'aca33681c6282a17386c9934b93cfce6622c08e1', name: "list-bottom" })), h("nano-menu", { key: '4de595aded1e1f586a8d11d21bf6151758da9f9d', type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
+            }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: 'c96ff0ec6819c41954f073fb07799a3e30c50101', name: "list-top" }), h("slot", { key: 'da56d581d05587674da3371088280ed98f837af1' }), h("slot", { key: '0f372b97c431d484e9ffc87594660e4ca5d2bba6', name: "internal-opts" }), h("slot", { key: 'e51e02accb72f3ac43386dba8e240470695efa1c', name: "list-bottom" })), h("nano-menu", { key: 'df93b22751834dfbbf6e23a9bdaad5a8086355ec', 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: '0da09df34253d8bd83bdd263e25f40b9075d30a7', name: "no-result" })), !!this.actvOptEles && (h("div", { key: 'ee9d3f67a82cc6a2e0c25efb0c79e031995d0587', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
+            } }, h("slot", { key: '785156311b41d90eecb951782342fd1b8d706ff1', name: "no-result" })), !!this.actvOptEles && (h("div", { key: 'b57c146e650ef55c51fa445c097fc1e10845efc9', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
     }
     static get watchers() { return {
         "open": ["openWatcher"],
@@ -550,14 +549,14 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
         "shouldOpen": ["manageDropdownDisplay"],
         "canOpen": ["manageDropdownDisplay"]
     }; }
-    static get style() { return NanoDatalistStyle0; }
+    static get style() { return datalistCss; }
 }, [1, "nano-datalist", {
         "selected": [1040],
-        "dropDownConfig": [6160],
+        "dropDownConfig": [6160, "drop-down-config"],
         "options": [16],
         "input": [1],
         "type": [1],
-        "activeOptions": [2064],
+        "activeOptions": [2064, "active-options"],
         "open": [1028],
         "disableFilter": [4, "disable-filter"],
         "disabled": [4],
@@ -605,5 +604,3 @@ function defineCustomElement() {
 }
 
 export { DataList as D, defineCustomElement as d };
-
-//# sourceMappingURL=datalist.js.map

package/dist/components/date-picker.js

@@ -1,10 +1,8 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { h } from './renderer.js';
-import { f as focusVisible } from './focus-visible.js';
-import { c as createColorClasses } from './theme.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
 const ISO_DATE_FORMAT = /^(\d{4})-(\d{2})-(\d{2})/;
@@ -269,7 +267,6 @@ const localization = {
         'Dec',
     ],
 };
-const defaultLocalization = localization;
 
 const DatePickerDay = ({ focusedDay, today, day, onDaySelect, onKeyboardNavigation, focusedDayRef, inRange, disabled, isSelected, }) => {
     const isToday = isEqual(day, today);
@@ -312,14 +309,13 @@ const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, localization
     return (h("table", { class: "duet-date__table", role: "grid", "aria-labelledby": labelledById, onFocusin: onFocusIn, onMouseDown: onMouseDown },
         h("thead", null,
             h("tr", null, mapWithOffset(localization.dayNames, firstDayOfWeek, (dayName) => (h("th", { class: "duet-date__table-header", scope: "col" },
-                h("span", { "aria-hidden": "true" }, dayName.substr(0, 2)),
+                h("span", { "aria-hidden": "true" }, dayName.substring(0, 2)),
                 h("span", { class: "duet-date__vhidden" }, dayName)))))),
         h("tbody", null, chunk(days, 7).map((week) => (h("tr", { class: "duet-date__row" }, week.map((day) => (h("td", { class: "duet-date__cell", role: "gridcell", "aria-selected": isEqual(day, selectedDate) ? 'true' : undefined },
             h(DatePickerDay, { day: day, today: today, focusedDay: focusedDate, inRange: inRange(day, min, max), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, focusedDayRef: focusedDayRef, disabled: isDateDisabled(day), isSelected: isEqual(day, selectedDate) }))))))))));
 };
 
-const datePickerCss = ":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{--background:var(--nano-layer-bg, #fff);--active-color:var(--nano-color-base, var(--nano-color-primary, #007495));--active-text-color:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    );--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--inactive-color:var(--nano-button-color, #f0efed);display:block;font-size:16px}:host(.nano-color){--active-color:var(--nano-color-base, var(--nano-color-primary, #007495));--active-text-color:var(--nano-color-contrast);--focus-shadow:0 0 0 0.1875rem rgb(var(--nano-color-tint-rgb)/0.56)}.duet-date *,.duet-date *::before,.duet-date *::after{box-sizing:border-box;margin:0}.duet-date{box-sizing:border-box;color:currentcolor;display:block;margin:0;position:relative;text-align:start;inline-size:100%}.duet-date__dialog{display:flex;inset-block-start:100%;max-inline-size:100%;inline-size:100%}.duet-date__dialog.is-left{inset-inline:auto 0;inline-size:auto}.duet-date__dialog-content{background:var(--background);min-inline-size:290px;padding-block:16px 20px;padding-inline:16px;position:relative;transform:none;max-inline-size:100%;inline-size:100%}.duet-date__table{border-collapse:collapse;border-spacing:0;font-size:1em;line-height:1;text-align:center;inline-size:100%}.duet-date__table-header{font-size:0.75em;font-weight:600;letter-spacing:1px;line-height:1;padding-block-end:8px;text-decoration:none;text-transform:uppercase}.duet-date__cell{text-align:center}.duet-date__day{appearance:none;background:transparent;border:0;border-radius:50%;cursor:pointer;display:inline-block;font-size:0.875em;font-variant-numeric:tabular-nums;line-height:1;position:relative;text-align:center;vertical-align:middle;z-index:1;transition:0.15s ease all;block-size:2.5em;inline-size:2.5em}.duet-date__day.is-today{box-shadow:0 0 0 1px var(--active-color);position:relative}.duet-date__day:hover::before,.duet-date__day.is-today::before{content:\"\";background:var(--active-color);border-radius:50%;opacity:0.16;position:absolute;inset:0}[aria-selected=true] .duet-date__day{background:var(--active-color) !important;color:var(--active-text-color);box-shadow:none;outline:0}.duet-date__day:active{background:var(--active-color);box-shadow:var(--focus-shadow);color:var(--active-text-color)}.duet-date__day:focus{box-shadow:var(--focus-shadow);outline:0}.duet-date__day.is-disabled{background:transparent;box-shadow:none;cursor:default;opacity:0.5}.duet-date__day.is-disabled::before{display:none}.duet-date__day.is-outside{background:var(--inactive-color);box-shadow:none;cursor:default;opacity:0.6;pointer-events:none}.duet-date__day.is-outside::before{display:none}.duet-date__header{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{background:var(--inactive-color);align-items:center;appearance:none;border:0;border-radius:50%;cursor:pointer;display:inline-flex;justify-content:space-around;margin-inline-start:8px;padding:0;transition:background-color 300ms ease;font-size:0.9em;block-size:2.2em;inline-size:2.2em}.duet-date__prev:focus,.duet-date__next:focus{box-shadow:var(--focus-shadow);outline:0}.duet-date__prev:active:focus,.duet-date__next:active:focus{box-shadow:none}.duet-date__prev:disabled,.duet-date__next:disabled{cursor:default;opacity:0.5}.duet-date__prev .nano-icon,.duet-date__next .nano-icon{margin-block:0;margin-inline:auto}.duet-date__select{display:inline-flex;margin-block-start:4px;position:relative}.duet-date__select span{margin-inline-end:4px}.duet-date__select select{cursor:pointer;font-size:1em;block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%;z-index:2}.duet-date__select select.focus-visible:focus+.duet-date__select-label{box-shadow:var(--focus-shadow)}.duet-date__select-label{align-items:center;border-radius:4px;display:flex;font-size:1.25em;font-weight:600;line-height:1;padding-block:0;padding-inline:8px 4px;pointer-events:none;position:relative;inline-size:100%;z-index:1}.duet-date__select-label .nano-icon{font-size:0.55em}.duet-date__vhidden{border:0;clip:rect(1px, 1px, 1px, 1px);block-size:1px;overflow:hidden;padding:0;position:absolute;inset-block-start:0;inline-size:1px}";
-const NanoDatePickerStyle0 = datePickerCss;
+const datePickerCss = ":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{--active-color:var(--nano-color-primary-1000);--active-text-color:var(--nano-color-base-0);--inactive-color:var(--nano-color-neutral-300);display:block;font-size:16px;background:var(--nano-color-neutral-50)}.duet-date *,.duet-date *::before,.duet-date *::after{box-sizing:border-box;margin:0}.duet-date{box-sizing:border-box;color:currentcolor;display:block;margin:0;position:relative;text-align:start;inline-size:100%}.duet-date__dialog{display:flex;inset-block-start:100%;max-inline-size:100%;inline-size:100%}.duet-date__dialog.is-left{inset-inline:auto 0;inline-size:auto}.duet-date__dialog-content{min-inline-size:290px;padding:var(--nano-spacing-md);position:relative;transform:none;max-inline-size:100%;inline-size:100%}.duet-date__table{border-collapse:collapse;border-spacing:0;font-size:1em;line-height:1;text-align:center;inline-size:100%}.duet-date__table-header{font-size:0.75em;font-weight:600;letter-spacing:1px;line-height:1;padding-block-end:8px;text-decoration:none;text-transform:uppercase}.duet-date__cell{text-align:center;padding:0 0 3px}.duet-date__day{appearance:none;background:transparent;border:0;border-radius:50%;cursor:pointer;display:inline-block;font-size:0.875em;font-variant-numeric:tabular-nums;line-height:1;position:relative;text-align:center;vertical-align:middle;z-index:1;block-size:2.5em;inline-size:2.5em}.duet-date__day.is-today{box-shadow:0 0 0 1px var(--active-color);position:relative}.duet-date__day:hover::before,.duet-date__day.is-today::before{content:\"\";background:var(--active-color);border-radius:50%;opacity:0.16;position:absolute;inset:0}[aria-selected=true] .duet-date__day{background:var(--active-color) !important;color:var(--active-text-color);box-shadow:none;outline:0}.duet-date__day:not(.is-disabled):active{background:color-mix(in srgb, var(--active-color), black 20%);color:var(--active-text-color)}.duet-date__day:focus-visible{outline:var(--nano-focus-ring);outline-offset:-1px;z-index:2}.duet-date__day.is-disabled{background:transparent;box-shadow:none;cursor:default;opacity:0.5}.duet-date__day.is-disabled::before{display:none}.duet-date__day.is-outside{background:var(--inactive-color);box-shadow:none;cursor:default;opacity:0.8;pointer-events:none}.duet-date__day.is-outside::before{display:none}.duet-date__header{align-items:center;display:flex;justify-content:space-between;margin-block-end:var(--nano-spacing-md);inline-size:100%}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{background:var(--inactive-color);align-items:center;appearance:none;border:0;border-radius:50%;cursor:pointer;display:inline-flex;justify-content:space-around;margin-inline-start:8px;padding:0;font-size:0.9em;block-size:2.2em;inline-size:2.2em}.duet-date__prev:focus-visible,.duet-date__next:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.duet-date__prev:active,.duet-date__next:active{background:color-mix(in srgb, var(--inactive-color), black 20%)}.duet-date__prev:disabled,.duet-date__next:disabled{cursor:default;opacity:0.7}.duet-date__prev .nano-icon,.duet-date__next .nano-icon{margin-block:0;margin-inline:auto}.duet-date__select{display:inline-flex;margin-block-start:4px;position:relative}.duet-date__select span{margin-inline-end:4px}.duet-date__select select{cursor:pointer;font-size:1em;block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%;z-index:2}.duet-date__select select:focus-visible:focus+.duet-date__select-label{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.duet-date__select-label{align-items:center;display:flex;font-size:1.25em;font-weight:600;line-height:1;padding-block:0;padding-inline:8px 4px;pointer-events:none;position:relative;inline-size:100%;z-index:1}.duet-date__select-label .nano-icon{font-size:0.55em}.duet-date__vhidden{border:0;clip:rect(1px, 1px, 1px, 1px);block-size:1px;overflow:hidden;padding:0;position:absolute;inset-block-start:0;inline-size:1px}";
 
 function range(from, to) {
     const result = [];
@@ -329,7 +325,7 @@ function range(from, to) {
     return result;
 }
 let dateIds = 0;
-const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTMLElement {
+const NanoDatePicker = /*@__PURE__*/ proxyCustomElement(class NanoDatePicker extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
@@ -342,7 +338,6 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
     dialogLabelId = this.dateId + '-' + 'dialog';
     firstFocusableElement;
     monthSelectNode;
-    yearSelectNode;
     focusedDayNode;
     focusTimeoutId;
     initialTouchX = null;
@@ -351,30 +346,38 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
     activeFocus = false;
     focusedDay = new Date();
     // Public Property API
+    _selectedDate = '';
     /** Selected Date. Must be in IS0-8601 format: YYYY-MM-DD. */
-    selectedDate = '';
+    get selectedDate() {
+        return this._selectedDate;
+    }
+    set selectedDate(value) {
+        if (typeof value !== 'string') {
+            this._selectedDate = '';
+            return;
+        }
+        value = value.split('T')[0]; // remove time part if present
+        this._selectedDate = value;
+    }
     /** 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 = '';
     /** 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 = '';
-    /** Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.
+    /** Which day is considered first day of the week. `0` for Sunday, `1` for Monday, etc.
      * Default is Monday. */
     firstDayOfWeek = DaysOfWeek.Monday;
     /** Button labels, day names, month names, etc, used for localization.
      * Default is English. */
-    localization = defaultLocalization;
-    /** The color to use from the application's color palette. */
-    color;
+    localization = localization;
     /**
      * Controls which days are disabled and therefore disallowed.
      * For example, this can be used to disallow selection of weekends.
      * @returns `false` for not disabled and `true` for disabled
      */
     isDateDisabled = () => false;
-    /** Controls whether the picker is a modal or dialog,
-     * popup control and will therefore keep focus within the control */
+    /** Controls whether the picker is within a modal control and will therefore keep focus within the control */
     isModal = false;
     /** @internal First focusable element. Relevant for keeping focus within the control */
     firstFocusEle;
@@ -386,7 +389,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
      * @param day - focus to the current selected day
      * @param forceFocusVisible - force visible focus - required if opened via keyboad
      */
-    async setFocus(day = false, forceFocusVisible = false) {
+    async setFocus(day = false) {
         this.setFocusedDay(parseISODate(this.selectedDate) || new Date());
         if (day) {
             setTimeout((_) => this.focusedDayNode.focus(), 20);
@@ -394,8 +397,6 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
         }
         clearTimeout(this.focusTimeoutId);
         this.focusTimeoutId = setTimeout(() => {
-            if (forceFocusVisible)
-                focusVisible.force(this.monthSelectNode);
             this.monthSelectNode.focus();
         }, 20);
     }
@@ -473,7 +474,10 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
         if (event.key === 'Tab' && !event.shiftKey && this.isModal) {
             event.preventDefault();
             const ele = this.firstFocusEle || this.firstFocusableElement;
-            ele.focus();
+            if (ele['setFocus'])
+                ele.setFocus();
+            else
+                ele.focus();
             return;
         }
         let handled = true;
@@ -552,22 +556,9 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
             setTimeout(() => element.focus(), 0);
         }
     };
-    connectedCallback() {
-        if (this.yearSelectNode)
-            focusVisible.observe(this.yearSelectNode);
-        if (this.monthSelectNode)
-            focusVisible.observe(this.monthSelectNode);
-    }
     componentWillLoad() {
         this.handleSelectedDateChange();
     }
-    componentDidLoad() {
-        this.connectedCallback();
-    }
-    disconnectedCallback() {
-        focusVisible.unobserve(this.yearSelectNode);
-        focusVisible.unobserve(this.monthSelectNode);
-    }
     render() {
         const valueAsDate = parseISODate(this.selectedDate);
         const selectedYear = (valueAsDate || this.focusedDay).getFullYear();
@@ -587,26 +578,25 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
             minYear = minDate.getFullYear();
         if (maxDate)
             maxYear = maxDate.getFullYear();
-        return (h(Host, { key: '126b01f14158329419fb42f1e54a02ce4cfb965c', class: { ...createColorClasses(this.color), 'nano-date-picker': true } }, h("div", { key: 'b1122b2aff25ff4f0f584fb8ba180d7b606e3826', class: "duet-date" }, h("div", { key: '6c7de4fe31e66fb3a87e313292a14f2f95d7ef3f', class: {
+        return (h(Host, { key: '476708135e014efc8662dcfdd6877bfa21ef6f31', class: "nano-date-picker" }, h("div", { key: '4ff36de5c9e6c86fa26638db70514f12fad96262', class: "duet-date" }, h("div", { key: '544a676f3354fc3cd0a6c0f1fd8610d47c5c586b', class: {
                 'duet-date__dialog': true,
                 'is-active': true,
-            }, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: 'd0187c54b6c9ef0de0939f3fc722ffe721b862d8', class: "duet-date__dialog-content" }, h("div", { key: 'ee76a378ad52d1ac71258efc15c8723153c6c58e', class: "duet-date__vhidden duet-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: 'a2a2a170ccf1a6ad341086fcd7443aa2626c8591', class: "duet-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: 'ddd3a3a3623cf5b61dbb2d49ea4454e3ec7bd38b' }, h("h2", { key: '70c4c43daf51201a0e2a568005a79f328230d324', id: this.dialogLabelId, class: "duet-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], ' ', this.focusedDay.getFullYear()), h("label", { key: '8250e3839dfb6c35f9787aff667b2d141de5fdcd', htmlFor: this.monthSelectId, class: "duet-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: 'd4a05e88e2df283665c016554c4adce5d26b44ef', class: "duet-date__select" }, h("select", { key: '69363c3bd0f0ccb700acc5e07d58b21626c8c567', id: this.monthSelectId, class: "duet-date__select--month", ref: (element) => (this.firstFocusableElement = this.monthSelectNode =
-                element), onChange: this.handleMonthSelect }, this.localization.monthNames.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { key: 'bda454d4475eec3fe5ae9acc5c8469ecb3d18c05', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: 'd19ab3a704087c802120ccc3302936c731b7562e' }, this.localization.monthNamesShort[focusedMonth]), h("nano-icon", { key: '43a416a07564d92b336f24949e996883bf58d5ee', name: "light/chevron-down" }))), h("label", { key: '70377923f51c50f90e60f67176ff78a33d374ee0', htmlFor: this.yearSelectId, class: "duet-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: '7bf07568e4a9cf4d8be23d4fc3524387a084c2fd', class: "duet-date__select" }, h("select", { key: 'd93e973816afe3104eb3e758d528710dcb75eaf5', id: this.yearSelectId, class: "duet-date__select--year", onChange: this.handleYearSelect, ref: (element) => (this.yearSelectNode = element) }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: 'a702ec49fb3fae14fc45675cfeadf53ebb640d23', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: '245198b80ab131426457daa425f3bb29178bd5cd' }, this.focusedDay.getFullYear()), h("nano-icon", { key: '61346903f0755ced93ae4298fbf69c5045411c3d', name: "light/chevron-down" })))), h("div", { key: '58fa6c63619b08701a33b8690c6581d5109aeb48', class: "duet-date__nav" }, h("button", { key: 'c1428835b394a76fc15e7f627b0f1cf223a860d8', class: "duet-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("nano-icon", { key: '59a1bfa486467fd186afe8484cb6d36f6361ca31', name: "light/chevron-left" }), h("span", { key: '79b059d58381e91fe5fb3eab5f6c0e4e1f76a481', class: "duet-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: '9e3bf89c8ba8660985810339f2a26972b8669c9c', class: "duet-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("nano-icon", { key: '93ebf9ceb09fd374f99a4b1081d3a604a366c951', name: "light/chevron-right" }), h("span", { key: 'f9bab89b3c09bc9e53ea4d455881a4e9db64b222', class: "duet-date__vhidden" }, this.localization.nextMonthLabel)))), h("div", { key: 'b0a97a8d3aca05ef9db1a69602779e34ccee7bbe' }, h(DatePickerMonth, { key: 'e2dd247425720b2032e9e7a0a951a936d87dd560', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate, isDateDisabled: this.isDateDisabled })))))));
+            }, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: '94665c51ab3ee801e6affb6be91076777f329665', class: "duet-date__dialog-content" }, h("div", { key: '3e014e07dd3f43808bdb99fbc79c6f81958328ac', class: "duet-date__vhidden duet-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: '6759c71255f8ff0c05a56e118ad628afc7f1af43', class: "duet-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: 'b0688e27b47a95fbb8c051d0680975741547762e' }, h("h2", { key: '1bb4b0035cc07304248c496c55077a88d43d57f5', id: this.dialogLabelId, class: "duet-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], ' ', this.focusedDay.getFullYear()), h("label", { key: 'e740c878525a794eaac04b44c4770edaa5a1d780', htmlFor: this.monthSelectId, class: "duet-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: '658b004a5ae3e50070a2683f92c68b924246a4e9', class: "duet-date__select" }, h("select", { key: '3a99660e9c05ca78d5945b4a8dd581f3fcd64fff', id: this.monthSelectId, class: "duet-date__select--month", ref: (element) => (this.firstFocusableElement = this.monthSelectNode =
+                element), onChange: this.handleMonthSelect }, this.localization.monthNames.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { key: '6c9f19bbd85e2d6bd16e06b87507599a77f3b8e0', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: '94813adbb53c491d53045106a0e97e68ecc8a257' }, this.localization.monthNamesShort[focusedMonth]), h("nano-icon", { key: 'd6d867b3732097902ac0b537d055ec0eb6dbb11f', name: "light/chevron-down" }))), h("label", { key: 'a77adf78db5d8f2ec2998526c2d5d2882fb01a24', htmlFor: this.yearSelectId, class: "duet-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: 'fe5d77c1f3d5cb7bc8ba2befd232b001fcafa8da', class: "duet-date__select" }, h("select", { key: '3585692273f5bdfdb58e1e265bb6b754708cb69a', id: this.yearSelectId, class: "duet-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: 'ce1137c980183ccffc195f83bdc5147de3f8194b', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: 'a5d3e28fdbb1b4192f51da8009cce094558db3c0' }, this.focusedDay.getFullYear()), h("nano-icon", { key: '0958bff2d269607480fb9475f4a58df147885f4b', name: "light/chevron-down" })))), h("div", { key: 'd49585f3b292ba85ed013e52a5a042cb55601937', class: "duet-date__nav" }, h("button", { key: '1f3f492d1965e6416a5fac52db0ecba7864b8df7', class: "duet-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("nano-icon", { key: 'abe59d338029675ad55a5e7faab8170ca2c2af2f', name: "light/chevron-left" }), h("span", { key: '7d59fa5d95085c6d66d93f95c953e9a2f74b8a5f', class: "duet-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: 'a895a7b901ca21fa32710c3a187ce263cf105908', class: "duet-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("nano-icon", { key: 'b8737eb28e5ad5873f40523a557745a338aa5277', name: "light/chevron-right" }), h("span", { key: '2c98c7be89ce30939c647f7faea1c531fa0d38a9', class: "duet-date__vhidden" }, this.localization.nextMonthLabel)))), h("div", { key: '42284a65a7e2bb5302cd75a61f19a691ea1236bd' }, h(DatePickerMonth, { key: 'd548838275eecb1a2dff47851e9fd57c9f49f691', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate, isDateDisabled: this.isDateDisabled })))))));
     }
     static get watchers() { return {
         "selectedDate": ["handleSelectedDateChange"]
     }; }
-    static get style() { return NanoDatePickerStyle0; }
+    static get style() { return datePickerCss; }
 }, [1, "nano-date-picker", {
-        "selectedDate": [1025, "selected-date"],
+        "selectedDate": [7169, "selected-date"],
         "min": [1],
         "max": [1],
         "firstDayOfWeek": [2, "first-day-of-week"],
         "localization": [16],
-        "color": [1],
-        "isDateDisabled": [16],
+        "isDateDisabled": [16, "is-date-disabled"],
         "isModal": [4, "is-modal"],
-        "firstFocusEle": [16],
+        "firstFocusEle": [16, "first-focus-ele"],
         "activeFocus": [32],
         "focusedDay": [32],
         "setFocus": [64]
@@ -621,7 +611,7 @@ function defineCustomElement() {
     components.forEach(tagName => { switch (tagName) {
         case "nano-date-picker":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, DatePicker);
+                customElements.define(tagName, NanoDatePicker);
             }
             break;
         case "nano-icon":
@@ -632,6 +622,4 @@ function defineCustomElement() {
     } });
 }
 
-export { DatePicker as D, printISODate as a, createDate as c, defineCustomElement as d, parseISODate as p };
-
-//# sourceMappingURL=date-picker.js.map
+export { NanoDatePicker as N, printISODate as a, createDate as c, defineCustomElement as d, parseISODate as p };