@nanoporetech-digital/components 8.0.0-alpha.7 → 8.0.0-alpha.9

package/dist/collection/components/rating/rating.js

@@ -166,23 +166,23 @@ export class Rating {
         else {
             displayValue = this.isHovering ? this.hoverValue : this.value;
         }
-        return (h(Host, { key: '1f1a4c5f6b8dea2419e75be53db6e74d4455c3c5', class: "nano-rating" }, h("div", { key: '6898eef81bc7e3d634b3054a4694f49db79929c8', class: "rating-wrap" }, h("div", { key: 'bbad068f69e99c12083bb53c00a25b2dff02ddb7', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
+        return (h(Host, { key: '3c6a6a92555b16420e5a5401f6020a6c2bc66b50', class: "nano-rating" }, h("div", { key: '2ccf681ef28c0f2b804da2c98416c7ea384de6fa', class: "rating-wrap" }, h("div", { key: '529d5315867405bc0b50ebe4e1ee3c38c88002ef', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
                 rating: true,
                 'rating--readonly': this.readonly,
                 'rating--disabled': this.disabled,
-            }, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("span", { key: 'd2518d1ec73803cdc284c64ff4fcee9c86f6077d', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (h("span", { class: {
+            }, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("span", { key: '81cefbe9454eed12d1689cc7e0e2d525a760a5b2', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (h("span", { class: {
                 rating__symbol: true,
                 'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
             },
             // Users can click the current value to clear the rating. When this happens, we set this.isHovering to
             // false to prevent the hover state from confusing them as they move the mouse out of the control. This
             // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.
-            onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { key: '046a97718d174445372c909eee0d061c4effd770', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
+            onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { key: '418807cc26fddef01c6f9ea63def433e9b9d71e9', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
                 clip: this.clip(displayValue),
             } }, counter.map((index) => (h("span", { class: {
                 rating__symbol: true,
                 'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
-            }, innerHTML: this.symbol(index + 1) })))), h("input", { key: '8a0a62b7419a719e2a2cf08e361aae299dea7d65', type: "hidden", name: this.name, value: this.value, disabled: this.disabled || this.readonly })))));
+            }, innerHTML: this.symbol(index + 1) })))), h("input", { key: '7c759836e1c59f34140097b9e0026e99fda9abe5', type: "hidden", name: this.name, value: this.value, disabled: this.disabled || this.readonly })))));
     }
     static get is() { return "nano-rating"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/resize-observe/resize-observe.js

@@ -6,6 +6,9 @@ import { h } from "../../utils/renderer";
 /**
  * A thin, declarative interface to the [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
  *
+ * @status stable
+ * @version 1.0.0
+ *
  * @slot - Main slot for any content.
  * @slot content-fit-x - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off
  * @slot content-nofit-x - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off
@@ -92,40 +95,41 @@ export class ResizeObserve {
             };
             return recurse(ele);
         };
-        let didChange = false;
         const measureEle = findNonContentsEle(this.host.firstElementChild);
-        if (measureEle) {
-            if (this.notifyContentFit && this.notifyContentFit.includes('x')) {
-                if (this.currentWidth < measureEle.scrollWidth &&
-                    this.contentFitX !== false) {
-                    didChange = true;
-                    this.contentFitX = false;
-                }
-                else if (this.currentWidth >= measureEle.scrollWidth &&
-                    this.contentFitX !== true) {
-                    didChange = true;
-                    this.contentFitX = true;
-                }
+        if (!measureEle)
+            return;
+        let didChange = false;
+        const { width, height } = this.host.getBoundingClientRect();
+        if (this.notifyContentFit && this.notifyContentFit.includes('x')) {
+            if (width < measureEle.scrollWidth &&
+                this.contentFitX !== false) {
+                didChange = true;
+                this.contentFitX = false;
             }
-            if (this.notifyContentFit && this.notifyContentFit.includes('y')) {
-                if (this.currentHeight < measureEle.scrollHeight &&
-                    this.contentFitY !== false) {
-                    didChange = true;
-                    this.contentFitY = false;
-                }
-                else if (this.currentHeight >= measureEle.scrollHeight &&
-                    this.contentFitY !== true) {
-                    didChange = true;
-                    this.contentFitY = true;
-                }
+            else if (width >= measureEle.scrollWidth &&
+                this.contentFitX !== true) {
+                didChange = true;
+                this.contentFitX = true;
             }
-            if (didChange) {
-                this.nanoResizeContentFitChange.emit({
-                    x: this.contentFitX,
-                    y: this.contentFitY,
-                });
+        }
+        if (this.notifyContentFit && this.notifyContentFit.includes('y')) {
+            if (height < measureEle.scrollHeight &&
+                this.contentFitY !== false) {
+                didChange = true;
+                this.contentFitY = false;
+            }
+            else if (height >= measureEle.scrollHeight &&
+                this.contentFitY !== true) {
+                didChange = true;
+                this.contentFitY = true;
             }
         }
+        if (didChange) {
+            this.nanoResizeContentFitChange.emit({
+                x: this.contentFitX,
+                y: this.contentFitY,
+            });
+        }
     }
     assessChanges = () => {
         if (!this.currentWidth && !this.currentHeight)
@@ -179,7 +183,7 @@ export class ResizeObserve {
                 });
             });
         });
-        this.classNames = ['is-ready', ...classNames];
+        this.classNames = [...new Set(['is-ready', ...classNames])];
         this.nanoResizeStateChange.emit(this.toSimpleObj(changes));
     }
     toSimpleObj(stateMaps) {
@@ -223,11 +227,19 @@ export class ResizeObserve {
             this.attachRO();
     }
     disconnectedCallback() {
-        if (this.ro)
+        if (this.ro) {
             this.ro.disconnect();
+            this.ro = undefined;
+        }
     }
     render() {
-        return (h(Host, { key: '67ae39458d0f21c7100481c6aa68f9455e468d86', class: "nano-resize-observe" }, h("slot", { key: '503108cec78fcfda303a9e392e1903ec7acfc244' }), !!this.notifyContentFit &&
+        return (h(Host, { key: '8a8006f2426c4cf29fb0decf2b5fa49797f04c63', class: {
+                'nano-resize-observe': true,
+                'content-fit-x': this.contentFitX,
+                'content-fit-y': this.contentFitY,
+                'content-nofit-x': this.contentFitX === false,
+                'content-nofit-y': this.contentFitY === false,
+            } }, h("slot", { key: 'e077345fe28091840cca8e2424fa577df01ec87d' }), !!this.notifyContentFit &&
             (this.contentFitX !== null || this.contentFitY !== null) && [
             this.contentFitX ? (h("slot", { name: "content-fit-x" })) : (h("slot", { name: "content-nofit-x" })),
             this.contentFitY ? (h("slot", { name: "content-fit-y" })) : (h("slot", { name: "content-nofit-y" })),

package/dist/collection/components/select/select.css

@@ -358,7 +358,7 @@ label.visually-hide,
   display: grid;
   grid-template-areas: "overlay";
 }
-:host(:not(.is-invalid):not(.is-valid)) .form-ctrl__validation-icon {
+:host(:not(.is-invalid, .is-valid)) .form-ctrl__validation-icon {
   display: none;
 }
 

package/dist/collection/components/select/select.js

@@ -113,7 +113,9 @@ export class Select {
      * String to place within a label element. Alternatively you may use a label slot.
      */
     get label() {
-        return this.required && !this._label.endsWith('*') ? this._label + ' *' : this._label;
+        return this.required && !this._label.endsWith('*')
+            ? this._label + ' *'
+            : this._label;
     }
     set label(value) {
         this._label = value;
@@ -701,30 +703,30 @@ export class Select {
             disabled,
             clearControl: this.clearable,
         }))(this);
-        return (h(Host, { key: 'b85a8a4b4566ce33e0e7bae347c765037d1ec34b', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
+        return (h(Host, { key: '260ec75bf9f2624c4303f9107cb151b97065174a', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
                 'has-value': !!this.value.length || !!this.inputSearchVal.length,
                 'has-focus': this.hasFocus,
                 'is-invalid': this._invalid === true,
                 'is-valid': this._invalid === false,
                 'nano-select': true,
-            } }, h(FormControlWrap, { key: '42335a9fda2b4e2560f33e5d4c40a58403e482d2', ...wrapOptions, class: {
+            } }, h(FormControlWrap, { key: 'd87280b7bc9405de2db9cc12db0538cf76e95504', ...wrapOptions, class: {
                 'has-error': !!this.errorMessage &&
                     this.showInlineError &&
                     this._invalid === true,
                 'has-helper': this.hasHelperSlot,
                 'is-open': this.hasOpened,
                 masked: this.mask,
-            } }, h(FormControl, { key: '7571a30e6a3f0b231d9e0b7a6e2f662fe3bd8183', ...controlOptions, ref: (el) => (this.selectWrap = el), onClearText: this.clearSelectValue, control: this.el, endValueSlot: h("slot", { name: "down-arrow" }, h("nano-icon", { class: "select__down-arrow", name: "light/chevron-down" })), showInlineError: this.showInlineError }, this.multiple && (h("div", { key: 'e92b079944fb81314da40799ba8f11f5644d5fa7', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
-            this.mask && (h("div", { key: '488c94ddb9e49c9e3f5a099a77cb0e879a02e1e2', class: "select__mask" }, this.getLabel(this.value))),
-            h("input", { key: '3fc66f07b7c9220e2c9d3eb02b1b268f52921a46', ref: (input) => (this.inputCtrl = input), id: this.selectId, class: "select__native-input", "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readOnly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
-        ])), !this.readonly && !this.disabled && (h("nano-datalist", { key: '1737bc4d8e6267659ebbd981cd043e0a3f0e20e3', ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selectMulti' : 'select', options: this._options.length ? this._options : undefined, onNanoDeselect: (e) => {
+            } }, h(FormControl, { key: 'ffcd44c88c563f296c5508e95c7a41d74617f484', ...controlOptions, ref: (el) => (this.selectWrap = el), onClearText: this.clearSelectValue, control: this.el, endValueSlot: h("slot", { name: "down-arrow" }, h("nano-icon", { class: "select__down-arrow", name: "light/chevron-down" })), showInlineError: this.showInlineError }, this.multiple && (h("div", { key: 'dfc075f72efc14b669f90d3a13472c806dc68ddd', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
+            this.mask && (h("div", { key: '5826e2e1e7c3588349ed4279c95a5ef0b15b21d2', class: "select__mask" }, this.getLabel(this.value))),
+            h("input", { key: 'eb120065926e6acc331a136fd981ad33bec34941', ref: (input) => (this.inputCtrl = input), id: this.selectId, class: "select__native-input", "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readOnly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
+        ])), !this.readonly && !this.disabled && (h("nano-datalist", { key: '235fe1c1381a7a275b8485ed327e32c65ca1afdc', ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selectMulti' : 'select', options: this._options.length ? this._options : undefined, onNanoDeselect: (e) => {
                 e.preventDefault();
                 this.removeValue(e.detail.value);
             }, onNanoOptionsUpdated: this.setOptions, onNanoSelect: this.setValue,
             // @ts-expect-error - this bubbles from the nano-dropdown
             onNanoShow: () => (this.hasOpened = true), onNanoHide: () => (this.hasOpened = false) }, this.allowCustomValues &&
             this.multiple &&
-            !!this.inputSearchVal && (h("nano-option", { key: '23a03a568fc87bd041b4c4e702afba215e637423', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: 'edd9ba1b076740baeaa34f62aa27f598bda7114d', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: '80e401156f240faf7fa04fef7915aa982305abd3' }))), h("select", { key: 'ba8bc3b4d7149e249c26f82da6816afa1b25fabf', id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
+            !!this.inputSearchVal && (h("nano-option", { key: '284691608ccaeb8dd109db1e67a7f5b71c161b26', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: '01613a6b92b766ec5fc3cbd8f599d3ff2c5a40f6', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: 'f4a80a0be3b228c8323c439f100e0ead6bb259a8' }))), h("select", { key: 'b963c46543facd4ee4780ea9575cd0d1bd943b2b', id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
             this.valArray.map((val) => {
                 return (h("option", { value: val, selected: true }, val));
             }), !this.allowCustomValues &&

package/dist/collection/components/slides/lib/js/prev-next-button.js

@@ -45,7 +45,9 @@ export default () => {
         });
         // create arrow
         const icon = document.createElement('span');
-        icon.className = 'button-icon ' + (this.isPrevious ? 'button-icon--previous' : 'button-icon--next');
+        icon.className =
+            'button-icon ' +
+                (this.isPrevious ? 'button-icon--previous' : 'button-icon--next');
         icon.part.add('navigation-icon');
         slot.appendChild(icon);
         // events

package/dist/collection/components/slides/slide.js

@@ -38,7 +38,7 @@ export class Slide {
         });
     }
     render() {
-        return (h(Host, { key: 'ef8511e766273878ebc0ceaa121199bd86130bbb', class: "nano-slide" }, h("slot", { key: '4b783b4c3df8662fb590a52ed17df975681d44bc' })));
+        return (h(Host, { key: '3c6b1d8ac380c330925fdd1688ca54161afa5033', class: "nano-slide" }, h("slot", { key: 'c9befdfd0d120aa6c773ba9ed24d97fcde7f8ce7' })));
     }
     static get is() { return "nano-slide"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/slides/slides.css

@@ -273,7 +273,7 @@ https://flickity.metafizzy.co
   z-index: 4;
   display: inline-flex;
   justify-content: center;
-  bottom: 0;
+  inset-block-end: 0;
 }
 
 .flickity-rtl .flickity-page-dots {
@@ -298,7 +298,7 @@ https://flickity.metafizzy.co
   content: "";
   position: absolute;
   inset: 0;
-  background: currentColor;
+  background: currentcolor;
   background: var(--dot-color);
   margin: calc(var(--nano-spacing-md) / 2);
 }

package/dist/collection/components/slides/slides.js

@@ -499,15 +499,15 @@ export class Slides {
         this.destroyflickity();
     }
     render() {
-        return (h(Host, { key: '0eecdd4b8054bfc79c414f92cc52208cc17030c9', class: "nano-slides" }, h("div", { key: '52d4f9e42fc545c9fbd955f497ff31911e2bae7e', class: {
+        return (h(Host, { key: 'db808d24fa5e0650b8848a8ad49f409b1742d010', class: "nano-slides" }, h("div", { key: '833b9add3ac283a28290ff442ba3222719819248', class: {
                 slideshow: true,
                 ready: this.ready,
                 'not-ready': !this.ready,
-            }, part: "base" }, h("div", { key: 'd41c00513b0f7a9a9cb05a5943f368b86af34bdf', ref: (div) => (this.flickityEl = div), class: {
+            }, part: "base" }, h("div", { key: '582d0ce3f49bf048c65caca78b86439eed298933', ref: (div) => (this.flickityEl = div), class: {
                 'flickity-container': true,
                 'slides-ready': this.slidesReady,
                 'slides-not-ready': !this.slidesReady,
-            }, part: "slide-container" }, h("slot", { key: 'bebd09c2b27bc7dbae72d5cab15b8fbd77af52a0' })), h("div", { key: '4e5b0c0385dcc3757f889004ec50f7550bc3bfe2', class: "ui-extras" }, h("slot", { key: '6481258c29c5f30c2a47b102e47e9ce75260c712', name: "ui" })))));
+            }, part: "slide-container" }, h("slot", { key: 'f9ea3b11fb13efaf78254e061fff5e8396ad3e54' })), h("div", { key: 'a7c4f452bb04aa5a2fd98839cf493737f057e7af', class: "ui-extras" }, h("slot", { key: 'f6eb7fbbb0dc21d50c7daca4e1c10b3924de4ba3', name: "ui" })))));
     }
     static get is() { return "nano-slides"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sortable/sortable.js

@@ -733,7 +733,7 @@ export class Sortable {
         }
     }
     render() {
-        return (h(Host, { key: '108dd7db53821adef114521be6a825561c974137', class: "nano-sortable" }, h("div", { key: '7b23e9a51e5cb366676fb61163b031c0ba693599', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (h("div", null, str)))), h("slot", { key: 'a61fca55dd0de8a4dd1611ada70101ca19906528' })));
+        return (h(Host, { key: 'bf0691e59a5832ca8249a7d1253232399f6dcd08', class: "nano-sortable" }, h("div", { key: '5ff7d9c08e496fbfffb5df836dd6834d339106fc', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (h("div", null, str)))), h("slot", { key: '6419b77cd7e962726d7b2c5b88997b73b1bc9a3f' })));
     }
     static get is() { return "nano-sortable"; }
     static get encapsulation() { return "shadow"; }
@@ -838,7 +838,7 @@ export class Sortable {
                         "Element": {
                             "location": "import",
                             "path": "@stencil/core",
-                            "id": "../../../stenciljs/internal/stencil-core/index.d.ts::Element"
+                            "id": "../../node_modules/.pnpm/@stencil+core@4.35.3/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element"
                         }
                     }
                 },
@@ -869,7 +869,7 @@ export class Sortable {
                         "Element": {
                             "location": "import",
                             "path": "@stencil/core",
-                            "id": "../../../stenciljs/internal/stencil-core/index.d.ts::Element"
+                            "id": "../../node_modules/.pnpm/@stencil+core@4.35.3/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element"
                         }
                     }
                 },
@@ -900,7 +900,7 @@ export class Sortable {
                         "Element": {
                             "location": "import",
                             "path": "@stencil/core",
-                            "id": "../../../stenciljs/internal/stencil-core/index.d.ts::Element"
+                            "id": "../../node_modules/.pnpm/@stencil+core@4.35.3/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element"
                         }
                     }
                 },
@@ -931,7 +931,7 @@ export class Sortable {
                         "Element": {
                             "location": "import",
                             "path": "@stencil/core",
-                            "id": "../../../stenciljs/internal/stencil-core/index.d.ts::Element"
+                            "id": "../../node_modules/.pnpm/@stencil+core@4.35.3/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element"
                         }
                     }
                 },
@@ -968,7 +968,7 @@ export class Sortable {
                         "Element": {
                             "location": "import",
                             "path": "@stencil/core",
-                            "id": "../../../stenciljs/internal/stencil-core/index.d.ts::Element"
+                            "id": "../../node_modules/.pnpm/@stencil+core@4.35.3/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element"
                         },
                         "HTMLElement": {
                             "location": "global",

package/dist/collection/components/sticker/sticker.js

@@ -599,12 +599,12 @@ export class Sticker {
         this.hasBootstrapped = false;
     }
     render() {
-        return (h(Host, { key: 'd101390b8f5a9505d6a563181fff96c29716fb88', sticky: !this.isRootSticker && !this.stickToEle && this.isSticky, hide: this.hide && this.isStuck, siblings: this.stuckCounter, index: this.stickerIndex, stuck: this.isStuck && this.isSticky, "placed-bottom": this.positions.includes('bottom'), "placed-top": this.positions.includes('top'), "placed-end": this.positions.includes('end'), "placed-start": this.positions.includes('start'), class: "nano-sticker" }, h("div", { key: '7b034516d6af7615fe35b9d2161b5378c0b2d7cf', class: {
+        return (h(Host, { key: '6ecfe8ffd92fbe3126dcdbce737267b800b5f3ec', sticky: !this.isRootSticker && !this.stickToEle && this.isSticky, hide: this.hide && this.isStuck, siblings: this.stuckCounter, index: this.stickerIndex, stuck: this.isStuck && this.isSticky, "placed-bottom": this.positions.includes('bottom'), "placed-top": this.positions.includes('top'), "placed-end": this.positions.includes('end'), "placed-start": this.positions.includes('start'), class: "nano-sticker" }, h("div", { key: '662dd7f185a4d9dd30cf285c3a3c5e37736147f9', class: {
                 sticker: true,
                 sticky: this.isRootSticker && this.isSticky,
                 stuck: this.isStuck && this.isRootSticker && this.isSticky,
                 hide: this.isRootSticker && this.hide && this.isStuck,
-            }, ref: (div) => (this.sticker = div) }, h("div", { key: '10491e3b9e0af4220e7f84ab0ae72bf297e0af23', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: 'f3efcf1fd5a0bda012258cace4712f398fc71a4f' })))));
+            }, ref: (div) => (this.sticker = div) }, h("div", { key: '9e026e99d36884aa8a196d03e55aafbce4d33754', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: '36ff243ac039dd52fb1ce57c72dfbfd9a682c6ec' })))));
     }
     static get is() { return "nano-sticker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table.js

@@ -227,10 +227,10 @@ export class NanoTable {
         this.cleanUpObservers();
     }
     render() {
-        return (h(Host, { key: 'e968dfa9cd63226118a11fe73f142236e008b489', class: {
+        return (h(Host, { key: 'a976d3c4d360aa37eeccf025c4948b8bcf9a6a05', class: {
                 'nano-table': true,
                 'nano-table--props-ready': this.propsReady,
-            } }, this.scrollable && (h("nano-masked-overflow", { key: '5dbe429e48270fc449057dee7d7c2090ad35e5e2', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: '5e32115ed739865a4452f74ab19c01f7f63aa763', class: "nano-table__overflow" }))), h("slot", { key: '42bfc9215be8ca00a5d6aa5232475544cff4b2b7' })));
+            } }, this.scrollable && (h("nano-masked-overflow", { key: '6d78f909c2fd7ebd1b478e9b399ac97f5202acb5', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: '9a2246d08f3f82efee4a6a6c7aec6002b159b9bc', class: "nano-table__overflow" }))), h("slot", { key: '21fad37f4eda294cd90b11175b8650b63dfe4ab0' })));
     }
     static get is() { return "nano-table"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/tabs/tab-content.js

@@ -24,10 +24,10 @@ export class NanoTabContent {
         requestAnimationFrame(() => (this.ready = true));
     }
     render() {
-        return (h(Host, { key: 'd75249c18948a3c52f1163cf036cbde27e64ef2c', id: this.host.id || this.tabContentId, style: { display: this.active ? 'block' : 'none' }, role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true', class: {
+        return (h(Host, { key: 'e77e802472984dd6997e5dbea3b807853c530f9a', id: this.host.id || this.tabContentId, style: { display: this.active ? 'block' : 'none' }, role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true', class: {
                 ready: this.ready,
                 'nano-tab-content': true,
-            } }, h("div", { key: '11c33106eb61433952881ae701d68e5a0bc738c5', part: "base", class: "nano-tab-content" }, h("slot", { key: 'a9e9ed4679fb0ab7d90ee45dddb3c482e2598242' }))));
+            } }, h("div", { key: '9c642ced7beec01c0cbaa333b977ee23ef83981a', part: "base", class: "nano-tab-content" }, h("slot", { key: 'fcafb5cedc796e0f3661519ccdb1d9374568d59e' }))));
     }
     static get is() { return "nano-tab-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tab-group.js

@@ -293,7 +293,7 @@ export class NanoTabGroup {
                     const storedTab = store.retrieve()?.tab;
                     // if a tab is in storage, set it as active now
                     if (storedTab && storedTab !== store.initialState?.tab) {
-                        this.getAllActiveTabs.forEach(element => {
+                        this.getAllActiveTabs.forEach((element) => {
                             if (element.panel === storedTab) {
                                 element.active = true;
                             }

package/dist/collection/components/tabs/tab.js

@@ -51,12 +51,12 @@ export class NanoTab {
         }
     };
     render() {
-        return (h(Host, { key: 'be35131ea184b6644288e79d3e0bd1ea8c8668dc', id: this.host.id || this.tabId, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, h("div", { key: '24c2a9b88b258d4332a8fc15e7687ec9b0e2a54e', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
+        return (h(Host, { key: '42d49d8148bac6792761ca027917184992ac9787', id: this.host.id || this.tabId, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, h("div", { key: 'a5c816c6faab721c3c8896083f87ead5dd06abd1', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
                 tab: true,
                 'tab--active': this.active,
                 'tab--disabled': this.disabled,
                 'tab--closable': this.closable,
-            } }, h("slot", { key: '80ab0aa015352e67446cee86a340db6a8b6ed6ee', name: "start" }), h("div", { key: '008484dda3003b4baa4c603ea43ce8ea15c4f688', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, h("slot", { key: '5ee9fe66f2a58e0c06fafe1eb8ba0941ff0ca082' })), h("slot", { key: 'b3ef36e571ef16ecc40a2983faf5ade9e3a47a9f', name: "end" }), this.closable && !this.disabled && (h("nano-icon-button", { key: 'ba51a18677145770de7b18974a28448fccb593cf', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
+            } }, h("slot", { key: 'c1aa8a3a0239d501a65b5db2c263b5ad777360e0', name: "start" }), h("div", { key: '508bd62a360aa2c6ba195f7dbaa2e8503bc79771', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, h("slot", { key: '48d789df0212ed3fcb91b169336540027aa182be' })), h("slot", { key: '29f8662c82ee362daf86d2fda096f1d95b9e80a1', name: "end" }), this.closable && !this.disabled && (h("nano-icon-button", { key: 'bd37054c27603d7cf012c88c99ad472973539e3e', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
     }
     static get is() { return "nano-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tag/tag.js

@@ -41,8 +41,8 @@ export class NanoTag {
     render() {
         return (this.closable &&
             !this.containsAnchor() && [
-            h("slot", { key: '7b5455fe29a182a51e9d9dc884e5d40dd3aaafd6' }),
-            h("nano-icon-button", { key: 'af79797da765a4da2d6a49d9ca1a7bd9295a8429', label: "Close", "icon-name": "light/xmark-large", onKeyDown: this.onKeyDown, onClick: this.handleClick }),
+            h("slot", { key: '02921bb2fa1d13cfac3fe08aaea65def2d7ec926' }),
+            h("nano-icon-button", { key: 'df6374b1e36c5bf4b2511781839b20ff05c5be6b', label: "Close", "icon-name": "light/xmark-large", onKeyDown: this.onKeyDown, onClick: this.handleClick }),
         ]);
     }
     static get is() { return "nano-tag"; }

package/dist/collection/components/tooltip/tooltip.js

@@ -227,10 +227,10 @@ export class Tooltip {
             this.popover.destroy();
     }
     render() {
-        return (h(Host, { key: '11084ad6ae4888255ad9118d9f230eb8d6f7f582', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, h("slot", { key: '04718a12adc5a00cd2a467d1f5eada0efb10b4aa', onSlotchange: this.handleSlotChange }), h("div", { key: 'c010b4767a12f50a3004a403f7f905a1b32be517', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, h("div", { key: 'b3923b2b512bbcb962f19066456a5f739cf6030e', part: "base", ref: (el) => (this.tooltip = el), class: {
+        return (h(Host, { key: 'bae7fd3006e859e7aabcf7d6c4358de59a345c44', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, h("slot", { key: '1c28d3ce46378a6add85ac596d8e561f431c0913', onSlotchange: this.handleSlotChange }), h("div", { key: '18262c8b0048dbb1a630dd046b348b97827ad80a', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, h("div", { key: 'd17d63c777bb90a70223fe012b670eed8af06a2d', part: "base", ref: (el) => (this.tooltip = el), class: {
                 tooltip: true,
                 'tooltip--open': this.open,
-            }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { key: '1eb8412dcf8f2517a9e2c0786844492acf97e77c', name: "content", onSlotchange: () => this.setLabel() }, this.content), h("div", { key: '89e9f4859aefcee96afe6a3099a03ef1c544d7c7', class: "tooltip-arrow", "data-popper-arrow": true })))));
+            }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { key: 'a4dd740342d39075c4ba50e2b1ec6c6a231c905b', name: "content", onSlotchange: () => this.setLabel() }, this.content), h("div", { key: '772a967f357113294c4e9f9f5e93da2845063875', class: "tooltip-arrow", "data-popper-arrow": true })))));
     }
     static get is() { return "nano-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/constructible-style.js

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { h, Host, getElement, Build } from "@stencil/core";
+import { h, Host, getElement, Build, } from "@stencil/core";
 // import type { VNode, HTMLStencilElement } from "@stencil/core";
 const supportsConstructibleStylesheets = (() => {
     try {

package/dist/collection/utils/scroll.js

@@ -5,20 +5,15 @@ import { getOffset } from "./dom";
 /**
  * @returns the width of the document's scrollbar
  */
-function getScrollbarWidth() {
+function getScrollLockSize() {
     const documentWidth = document.documentElement.clientWidth;
-    return Math.abs(window.innerWidth - documentWidth);
-}
-/**
- * Used in conjunction with `scrollbarWidth` to set proper body padding in case the user has padding already on the `<body>` element.
- * @returns body's computed css padding
- */
-function getExistingBodyPadding() {
-    const padding = Number(getComputedStyle(document.body).paddingRight.replace(/px/, ''));
-    if (isNaN(padding) || !padding) {
-        return 0;
+    const scrollbarWidth = Math.abs(window.innerWidth - documentWidth);
+    const { paddingRight, paddingInlineEnd } = getComputedStyle(document.body);
+    let docPadding = Number((paddingInlineEnd || paddingRight).replace(/px/, ''));
+    if (!!docPadding || isNaN(docPadding)) {
+        docPadding = 0;
     }
-    return padding;
+    return scrollbarWidth + docPadding;
 }
 const locks = new Set();
 /**
@@ -31,7 +26,7 @@ export function lockBodyScrolling(lockingEl) {
         return;
     // When the first lock is created,
     // set the scroll lock size to match the scrollbar's width to prevent content from shifting.
-    const scrollbarWidth = getScrollbarWidth() + getExistingBodyPadding(); // must be measured before the `sl-scroll-lock` class is applied
+    const scrollbarWidth = getScrollLockSize(); // must be measured before the `sl-scroll-lock` class is applied
     let scrollbarGutterProperty = getComputedStyle(document.documentElement).scrollbarGutter;
     // default is auto, unsupported browsers is "undefined"
     if (!scrollbarGutterProperty || scrollbarGutterProperty === 'auto') {

package/dist/components/algolia.js

@@ -2798,7 +2798,7 @@ const Algolia = /*@__PURE__*/ proxyCustomElement(class Algolia extends HTMLEleme
             }, "aria-busy": this.isLoading }, this.hasLoadSlot && (h("div", { key: '586696526af9ba7b721ebfe8aeba2b5a45b8a19a', hidden: !this.isLoading }, h("slot", { key: '40556633911954fd20b756fedf71aea7e15b15e1', name: "loader" }))), !this.hasLoadSlot && (h("div", { key: 'e5ee4968b6864b656b3537ec46b69e64ebe76370', class: {
                 loader: true,
                 loading: this.isLoading,
-            } }, h("nano-spinner", { key: '420a97d058127ea029329d6eca5055c0c54f4c1f', overlay: true }))), h(Universe.Provider, { key: '9c271e35ea7f850eb1ec2f99415ab2eebf014387', state: wormholeState }, h("slot", { key: '7a7a5ac869321d6db0a2f6f784a28e638cbe1a3f', name: "search-input" }), h("div", { key: '91b799022bee756066f1eb60038fdb428c98d3dc', class: "results-container", "aria-live": "polite" }, h("div", { key: '4209e438e0cefbc244dde4c3a9c10e3e5bf56137', ref: (div) => (this.resultsDiv = div), class: "results" }, h("slot", { key: '44b89a4cae72f8ff38c08dd605df32df03a2fc9a', name: "output" })))), h("div", { key: '7fa2100def56573ef4e098ca6da1a722d50416f9', ref: (div) => (this.defaultDiv = div), class: "default", tabindex: "-1" }, h("slot", { key: '2d5b9cd557465ceee3f249cc556aa6fa32cffd75' }))));
+            } }, h("nano-spinner", { key: '420a97d058127ea029329d6eca5055c0c54f4c1f', overlay: true }))), h(Universe.Provider, { key: '9c271e35ea7f850eb1ec2f99415ab2eebf014387', state: wormholeState }, h("slot", { key: '7a7a5ac869321d6db0a2f6f784a28e638cbe1a3f', name: "search-input" }), h("div", { key: '91b799022bee756066f1eb60038fdb428c98d3dc', class: "results-container", "aria-live": "polite" }, h("div", { key: '4209e438e0cefbc244dde4c3a9c10e3e5bf56137', ref: (div) => (this.resultsDiv = div), class: "results" }, h("slot", { key: '44b89a4cae72f8ff38c08dd605df32df03a2fc9a', name: "output" })))), h("div", { key: 'a584e0f2f10c38ffc46decc5b4b6bd2a1e14118a', ref: (div) => (this.defaultDiv = div), class: "default", tabindex: "-1", part: "default-content" }, h("slot", { key: 'dcf3c87479d48774b63bf32b4e2de2bfe9a6b1ea' }))));
     }
     static get watchers() { return {
         "listenTo": ["handleListenToChange"],

package/dist/components/datalist.js

@@ -511,7 +511,7 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
     }
     componentDidRender() {
         setTimeout(() => {
-            if (!this.connectedInput)
+            if (!this.connectedInput && this.host.isConnected)
                 console.warn('no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop', this.host);
         }, 500);
     }
@@ -525,18 +525,18 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
         }
     }
     render() {
-        return (h(Host, { key: 'b9c67e5dfc3c26c4eac219d9bdc9081aa79d7122', 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: '2b8f7500f1ed990dc79bda02a6980a018697d508', 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: '29a0de977f7be1a39c5c869a5ab366bb64711d9e', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
+                : undefined }, h("nano-dropdown", { key: '7beb913e00bb595dd36ad107edfdac05ab902efd', 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: '86769c73825853c557ed7a1dfb0f86898ce6504f', part: "main-menu", ref: (el) => (this.listBox = el), 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: '125572d377ad74a2b6d3e0ae36f708075517d60f', 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 }, h("slot", { key: 'f5ea0623591a368f38ce3c1e41ef431c4a9f5960', name: "list-top" }), h("slot", { key: '98804885ffb99528138867d2747af3acef3f64f7' }), h("slot", { key: '1341dc10f96570c04613153cf939aaf7dc21f0d3', name: "internal-opts" }), h("slot", { key: '84d86a667a69cd571f7b96dc29d1ddd58c3d482c', name: "list-bottom" })), h("nano-menu", { key: '9b09caa70bd106eb9e64c714072c0b88275f34c6', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
+            }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '63f4fc2409d3e2ef1bc38658f4d0e890326ddb7e', name: "list-top" }), h("slot", { key: '0bd4aa53d535ac07a779f9f44dae01801c5ddb43' }), h("slot", { key: 'ee39e492165395226a04b49dbe4ba0d6d3a70172', name: "internal-opts" }), h("slot", { key: 'd7af12aa6cf517a89b1718b74c48235753970664', name: "list-bottom" })), h("nano-menu", { key: 'bb1f661fc618cacc2f81aaeca1d03c96c1d1c557', 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: '58187330291198ff00571570e2b6b6bfdc79c905', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '72ea39405f558d10de86a14704ed48e869f01426', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
+            } }, h("slot", { key: 'c343a887d35603ba194a4774e2ca66e7e299ed2c', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '2810cc360410aae1263442e29aca34f0cd39c9b6', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
     }
     static get watchers() { return {
         "open": ["openWatcher"],

package/dist/components/date-picker.js

@@ -578,11 +578,11 @@ const NanoDatePicker = /*@__PURE__*/ proxyCustomElement(class NanoDatePicker ext
             minYear = minDate.getFullYear();
         if (maxDate)
             maxYear = maxDate.getFullYear();
-        return (h(Host, { key: '1793ae3627c1af938416338594a3607f7a686706', class: "nano-date-picker" }, h("div", { key: '2f50b7959a5787581f0e824f7c5e433ca3985784', class: "duet-date" }, h("div", { key: '805511e4311e996c3729a30da4b66a29288fc137', class: {
+        return (h(Host, { key: '325b63a7956c84802d783fa95086b66df5fbfdc2', class: "nano-date-picker" }, h("div", { key: 'be1ef3571202d7074ddda34a299774b1e9a8a96c', class: "duet-date" }, h("div", { key: '52583e20b54f39ef154e51e200f09719654555c9', class: {
                 'duet-date__dialog': true,
                 'is-active': true,
-            }, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: '333ed28590d71bddb694c6ba8a6bd4056012c209', class: "duet-date__dialog-content" }, h("div", { key: '62235540545d46423a368a25518079fee3d29b0f', class: "duet-date__vhidden duet-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: '5154197320634e2fc9d59cecc6ab83f5e6922c58', class: "duet-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '04d15f2d9b914c5334d5765b7279f2bcbeb0acf0' }, h("h2", { key: '56e76ca762e7fda6db0531435d0e48c511d7cc31', id: this.dialogLabelId, class: "duet-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], ' ', this.focusedDay.getFullYear()), h("label", { key: 'ef4ff1b95cc348a308e119246cd9a617438ec44c', htmlFor: this.monthSelectId, class: "duet-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: '7f10da9f614ddb58f89fa6d5964817295feeed45', class: "duet-date__select" }, h("select", { key: '58d4f452c9ffdf441bb42a8e044f2d17382662e9', 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: 'd7fb131ba8f73e1a8f03711971115ba9f26798e5', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: 'ed65bb461b54b9862fd58b5d21de5cdf52da1a8a' }, this.localization.monthNamesShort[focusedMonth]), h("nano-icon", { key: '1b8ecb5652cc2a0daba3ff9d2cc14dca8f8055a9', name: "light/chevron-down" }))), h("label", { key: '2eb441ddd3ada49165f41bec138dcddd3cf8fc28', htmlFor: this.yearSelectId, class: "duet-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: '12deefa0da5a17e8a81ee733eb5d76a7384409fe', class: "duet-date__select" }, h("select", { key: 'b3a3a05d0fab4c69eb72f1ca4aa603fa0856fe37', 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: '960b6cee86d795dd88d015aff93318dc9876e628', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: 'e14f14c75613c197001240b965358fe3aa6a1cb3' }, this.focusedDay.getFullYear()), h("nano-icon", { key: 'a74f16678cd2f444a881a19e55774988444f0515', name: "light/chevron-down" })))), h("div", { key: 'c20d467896edad680eef48d40a22de5657da0e75', class: "duet-date__nav" }, h("button", { key: 'f3d8bf7f048d04796b450f6123b6e90b45b37655', class: "duet-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("nano-icon", { key: 'd115ff718668dfa3dd9e05733baeb21bc179a5a5', name: "light/chevron-left" }), h("span", { key: 'd5ba77a2eb0a81a469973d7873e10beb6683c02f', class: "duet-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: '9d745902f2d971b2f5d0ad467274c0a180a5d173', class: "duet-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("nano-icon", { key: '5a5fabb015800b28cc276a8f69701e347bf8a1d5', name: "light/chevron-right" }), h("span", { key: '418d78e367dcc1cf0f85002a8f975920d57521f2', class: "duet-date__vhidden" }, this.localization.nextMonthLabel)))), h("div", { key: '89e4f57750c36ab9b616b961c0524a554d95ec77' }, h(DatePickerMonth, { key: 'e6c173dedbe03b267a1536403822415a968dea65', 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: '9ff8a1baa94f6502a4691cbd69c45808ee94eaa1', class: "duet-date__dialog-content" }, h("div", { key: 'ea56053783abfe899d19dffee3d0709decf34586', class: "duet-date__vhidden duet-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: '53fde77f3ae470c6d5271ff901557876f9f082db', class: "duet-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '0dd5d2f41fa1acc596b4d0b83644744607427295' }, h("h2", { key: 'fbc33424f5048889a766afec0dec6408b8d107e4', id: this.dialogLabelId, class: "duet-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], ' ', this.focusedDay.getFullYear()), h("label", { key: 'b2f293e2eecaad9c2070fb0b0612332b7c60bb13', htmlFor: this.monthSelectId, class: "duet-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: 'e3641b3731fd4387c5623590d16e7f566f6f7273', class: "duet-date__select" }, h("select", { key: 'a7d655e5ed0e5f30a4acb1fc6e5fc0b6f4190211', 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: 'd48f0c2a4ba4f25a5fbe2c524119d53c852225fe', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: 'c5a052d1d5d627efc147fa3c6d815aa58a88a658' }, this.localization.monthNamesShort[focusedMonth]), h("nano-icon", { key: '75a671f7f3b5e99db8292448a1213057522cb54a', name: "light/chevron-down" }))), h("label", { key: 'd75e61f7a398d8a59eea903ed7579e0e2488a588', htmlFor: this.yearSelectId, class: "duet-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: '7f53843dbfd10dad14ab29ba36fa132c411b7181', class: "duet-date__select" }, h("select", { key: '95c128dd44bc337d21f93acb263db9ab31a7a85d', 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: '3bed714eb0f65a52f50686c7bc1b66c53be8ffc9', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: '925804c72b36ad5092babc990660505d3841dca9' }, this.focusedDay.getFullYear()), h("nano-icon", { key: 'b8a54c98c40d20ce85562d0a3de40aa4dde2ff11', name: "light/chevron-down" })))), h("div", { key: 'd9525a0266c3abf1c0248fc8defa85f49a1a93d4', class: "duet-date__nav" }, h("button", { key: '9c7390ebc74ae31f8687c764dbe918f50316d93c', class: "duet-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("nano-icon", { key: '0cc15df22222c3c7c944b12cd6518f200c15891c', name: "light/chevron-left" }), h("span", { key: 'e9a376ce2f4aa7e180de15388ee3cb657e1968ac', class: "duet-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: '6b49ef9d261384853bf5982ed212e33f110d86a7', class: "duet-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("nano-icon", { key: '48fd8c193aa842fcc610edccc205124d7b955230', name: "light/chevron-right" }), h("span", { key: '639bf8f2367d1d4b077cf1dfb2e8144b49dc234d', class: "duet-date__vhidden" }, this.localization.nextMonthLabel)))), h("div", { key: '88459567f3cd03189554d95d691ac51058905396' }, h(DatePickerMonth, { key: '79561fa4051c802e33a74cafc11c212c399d20e9', 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"]