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

package/dist/collection/components/nav-item/nav-item.js

@@ -21,8 +21,15 @@ import { focusInContainer } from "../../utils/active-element";
  * @part trigger--button - the controlling `<button>` element
  * @part trigger--anchor - the controlling <a> element
  * @part trigger-wrapper - the wrapping div around the control (shadow `<button>` / `<a>` or slotted `<a>`)
- * @part secondary-wrapper - the div surrounding slotted secondary content
- * @part secondary-mask - the div that is added when secondary content is shown
+ * @part label - the label text of the nav item
+ * @part modal - the div that contains the secondary content panel
+ * @part modal--open - the div that contains the secondary content panel when open
+ * @part modal--close - the div that contains the secondary content panel when closed
+ * @part modal-content - the div that contains the secondary content panel content
+ * @part modal-content--open - the div that contains the secondary content panel content when open
+ * @part modal-mask - the div that covers the screen when the secondary content panel is open
+ * @part close-button - the div that contains the close button for the secondary content panel
+ * @part close-button-icon - the icon inside the close button for the secondary content panel
  *
  * @version 1.0.0
  * @status stable
@@ -48,8 +55,6 @@ export class NavItem {
     checkbox = false;
     /** Whether secondary menus should close on blur */
     closeOnBlur = true;
-    /** Will show an indicator badge - only when placed in a nano-menu-draw */
-    notification = false;
     /** Emitted when the nav item closes it's secondary navigation. */
     nanoClose;
     /** Emitted when the nav item opens it's secondary navigation. */
@@ -178,24 +183,22 @@ export class NavItem {
         this.openChange();
     }
     render() {
-        return (h(Host, { key: '7554eb7a4a66fc4f899b40b35265245a3be931f8', class: {
+        return (h(Host, { key: '815fb74d8f91f3efb7c2582439b1e8f4f4aa905d', class: {
                 'nano-menu-drawer': this.isInMenuDrawer,
                 'nano-nav-item': true,
                 disabled: this.disabled,
-            }, role: this.host.closest('[role="menu"]') ? 'menuitem' : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, h("div", { key: '4bf288ec9f9162bb746b70b085fde42b871f93fb', class: {
+            }, role: this.host.closest('[role="menu"]') ? 'menuitem' : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, h("div", { key: '63a0f2086fd81b4cbea08c385de2e493d7c8f926', class: {
                 navitem: true,
                 'navitem--open': this.open,
                 'navitem--active': this.selected,
-            }, part: "trigger-wrapper" }, this.href && !this.disabled && (h("a", { key: 'a9bf5adf3da060452ed58e2c6e1eba45168815a3', part: "trigger trigger--anchor", target: this.target, ref: (a) => (this.controlElement = a), href: this.href, class: {
+            }, part: "trigger-wrapper" }, this.href && !this.disabled && (h("a", { key: 'e50cab85eba47cba80ff30a07bcab83c00595915', part: "trigger trigger--anchor", target: this.target, ref: (a) => (this.controlElement = a), href: this.href, class: {
                 navitem__trigger: true,
-                notification: this.notification,
-            } }, h("slot", { key: '47cdd2e84dd51f236675351c599d8e9f9bf66ede', name: "icon-start" }), h("span", { key: 'a15d804a252ed532501fb08536ed5ce8a3b42e47', class: "navitem__label", part: "label" }, h("slot", { key: 'ea37d813d0fd15bd457930b61d06cd97d64fce35', onSlotchange: this.handleDefaultSlotChange })), h("slot", { key: '384a3212fba3d0cc3d488974dcaf53c23c3942e1', name: "icon-end" }))), (!this.href || this.disabled) && (h("button", { key: '698c4beb9cddb3b2037db40b5c9e33a276dad060', role: this.checkbox ? 'checkbox' : undefined, "aria-checked": this.checkbox ? this.selected.toString() : undefined, part: "trigger trigger--button", ref: (btn) => (this.controlElement = btn), onClick: this.handleClick, disabled: this.disabled, class: {
+            } }, h("slot", { key: '2fc43a8c964c8e34e045e0df85d5bf355b3e9b26', name: "icon-start" }), h("span", { key: '6aed9dea66e87ef15edb69971b1c97fd8d2fbe29', class: "navitem__label", part: "label" }, h("slot", { key: '96f26809714cbe44effe57851814e1e24a6ad851', onSlotchange: this.handleDefaultSlotChange })), h("slot", { key: 'f43de3bfdb6cdea0f93fe248d873c73062a3034b', name: "icon-end" }))), (!this.href || this.disabled) && (h("button", { key: '9db35da35c662d588729976d1be17a07ed855642', role: this.checkbox ? 'checkbox' : undefined, "aria-checked": this.checkbox ? this.selected.toString() : undefined, part: "trigger trigger--button", ref: (btn) => (this.controlElement = btn), onClick: this.handleClick, disabled: this.disabled, class: {
                 navitem__trigger: true,
-                notification: this.notification,
-            } }, h("slot", { key: 'c01a71dfaeb867d2792146110fdde1dd134b7f71', name: "icon-start" }), h("span", { key: '6a48071ba10f1407350e87958ed491f704714ea8', class: "navitem__label", part: "label" }, h("slot", { key: '246f807c0a03a8805fea87023f48de2f5fa7a7a0', onSlotchange: this.handleDefaultSlotChange })), h("slot", { key: '6a246213800a4425464ac41aefe9362e327d412f', name: "icon-end" }))), this.slotCtrl.has('secondary') && !this.disabled && (h("div", { key: '8928988fd43de734785801c9fc7707fb7efa33c3', part: "modal", class: {
+            } }, h("slot", { key: '394a189a9d5d8b65607bd6089c9a08cdeed8e48a', name: "icon-start" }), h("span", { key: '28b56da5d700f7654c2d42fda996babff390f92e', class: "navitem__label", part: "label" }, h("slot", { key: '13a35382772f7ee79af116c500eba5d4fd4a25ad', onSlotchange: this.handleDefaultSlotChange })), h("slot", { key: '158f3590fcf2025c3c53bd3d3f9dbeddbd2829ba', name: "icon-end" }))), this.slotCtrl.has('secondary') && !this.disabled && (h("div", { key: '44ab1a0d6930f5d60b8540157911d365821f611c', part: "modal", class: {
                 navitem__modal: true,
                 'navitem__modal--open': this.didOpen,
-            }, ref: (div) => (this.secondaryDiv = div), tabIndex: -1 }, h("div", { key: 'eca197afa8cb297eeafc4b7a55ffb6fb288c498c', class: "navitem__modal-content", part: `modal-content ${this.didOpen ? 'modal-content--open' : ''}` }, this.slotCtrl.has('close-button') && (h("div", { key: '5a774cf15677b3848f80c0cf5bee87da44e3ca04', part: "close-button", onClick: this.closeSecondary }, h("slot", { key: '57a08ef1239b6c29241524e3c7ac977c78c910d5', name: "close-button" }))), h("slot", { key: '6c35ed89b61461fcc294cddc022c57255558a63b', name: "secondary" })), h("div", { key: '163003649197f1ed341836e73e7acd50c7abc640', class: "navitem__modal-mask", onClick: this.closeSecondary, part: `modal-mask ${this.didOpen ? 'modal-mask--open' : ''}` }))))));
+            }, ref: (div) => (this.secondaryDiv = div), tabIndex: -1 }, h("div", { key: '758dc3ed99502ff459b187fb42dc6f1c83f335e8', class: "navitem__modal-content", part: `modal-content ${this.didOpen ? 'modal-content--open' : ''}` }, this.slotCtrl.has('close-button') && (h("div", { key: 'fb30657f31352b234b8f5f9f7dea697b663dc05d', part: "close-button", onClick: this.closeSecondary }, h("slot", { key: 'de6bdeb04bf0543c2200cca7a7a1d8d70032d0ed', name: "close-button" }))), h("slot", { key: '45c2c6ce36042b43c8177343e238392193a16367', name: "secondary" })), h("div", { key: 'd9ccc26e9f2675dcf5fc9000bc2759fd48247fe2', class: "navitem__modal-mask", onClick: this.closeSecondary, part: `modal-mask ${this.didOpen ? 'modal-mask--open' : ''}` }))))));
     }
     static get is() { return "nano-nav-item"; }
     static get encapsulation() { return "shadow"; }
@@ -350,26 +353,6 @@ export class NavItem {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
-            },
-            "notification": {
-                "type": "boolean",
-                "attribute": "notification",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Will show an indicator badge - only when placed in a nano-menu-draw"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/option/option.css

@@ -62,7 +62,7 @@
   --color: var(--nano-color-base-1000);
   --color-selected: var(--nano-color-base-1000);
   --color-focus: var(--nano-color-base-0);
-  --color-disabled: var(--nano-color-neutral-300);
+  --color-disabled: var(--nano-color-neutral-400);
   --opt-icon-size: 1em;
   --padding-start: var(--nano-spacing-sm);
   --padding-end: var(--nano-spacing-md);
@@ -123,8 +123,6 @@
 }
 .option__start ::slotted(.nano-icon) {
   font-size: var(--opt-icon-size);
-}
-.option__start ::slotted(:last-child) {
   margin-inline-end: var(--padding-end);
 }
 .option__end {

package/dist/collection/components/option/option.js

@@ -49,7 +49,7 @@ export class Option {
      */
     disabled = false;
     /** You can add extra meta for this option. When displayed in a list, users
-     * search / filter via extra related terms. Another usecase is 'endonyms'
+     * search / filter via extra related terms.
      */
     filterMeta = '';
     /** Setting an href will render an `<a>` element */
@@ -83,12 +83,12 @@ export class Option {
     }
     render() {
         const WrapTag = this.href ? 'a' : 'div';
-        return (h(Host, { key: '9cb53ef00c462eeca94b4dbe77d94698cd86f9b2', role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: "nano-option" }, h(WrapTag, { key: 'a51a558222fe2b114677ad1bc374058aba990a0a', href: this.href || undefined, onMouseDown: this.handleClick, id: this.optId, class: {
+        return (h(Host, { key: '3d7d858dd7c55eadbcb924e1d8462ba27c73dc9e', role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: "nano-option" }, h(WrapTag, { key: '4051c726c3b1a62ed9862e2d82a810847718807b', href: this.href || undefined, onMouseDown: this.handleClick, id: this.optId, class: {
                 option: true,
                 'option--selected': this.selected,
                 'option--disabled': this.disabled,
                 'option--novalue': !this.value,
-            } }, h("div", { key: 'fa5ce294668b860ac56cb0b436379057eebb275e', part: "check-icon", class: "option__check" }, h("slot", { key: '2592c5a5435e45023c0cb4b650d43a4cda29928d', name: "check-icon" }, h("nano-icon", { key: '2ad41f653575adc67328f3cea2eb39d3720ad400', name: "light/check", "aria-hidden": "true" }))), h("div", { key: '0d7c8d24179350d535095a0c990e3ac46bdc4a03', part: "start", class: "option__start" }, h("slot", { key: '4d06de2b71ab9b00aa56ba87a09fdaa432b55b59', name: "start" })), h("div", { key: '5e05e3a353da6d50ad54f5ce3b5b63d496a2581b', part: "label", class: "option__label" }, h("slot", { key: '22acfe355130ea11be35f8abb2529476e67e9ab4' }, this.label || this.value)), h("div", { key: '016938a4d89ca5188dc4f7c20b7cd7fedb51cc44', part: "end", class: "option__end" }, h("slot", { key: 'b8c0caa513d3089d607189cb673c9d78e424fabb', name: "end" })))));
+            } }, h("div", { key: '0e8e795ad749c25df46592f41caf8664b2997048', part: "check-icon", class: "option__check" }, h("slot", { key: 'dba5e01284906955e5be879da029c567d7a9046b', name: "check-icon" }, h("nano-icon", { key: 'ae3b584d895112bb62847f6c1ec0076595e7ce47', name: "light/check", "aria-hidden": "true" }))), h("div", { key: 'dfc6d63862ff2a4f666f87142cd0aa82d674d689', part: "start", class: "option__start" }, h("slot", { key: '69da1111220411b943e5461d78e1b04c2b57badb', name: "start" })), h("div", { key: 'a13f33b7b3a06d9ebf62053f5f5667884409ee1c', part: "label", class: "option__label" }, h("slot", { key: '685114fae504ec3bc9553c73d5906fbea061d07b' }, this.label || this.value)), h("div", { key: 'f44ccfedcf5d8c22c4dd08374c4421f7f146165b', part: "end", class: "option__end" }, h("slot", { key: '118e4cf34d5b43df7216340c4c401ed274d88d5a', name: "end" })))));
     }
     static get is() { return "nano-option"; }
     static get encapsulation() { return "shadow"; }
@@ -197,7 +197,7 @@ export class Option {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "You can add extra meta for this option. When displayed in a list, users\nsearch / filter via extra related terms. Another usecase is 'endonyms'"
+                    "text": "You can add extra meta for this option. When displayed in a list, users\nsearch / filter via extra related terms."
                 },
                 "getter": false,
                 "setter": false,

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: '110989d9ed5b1b40b76f9c8e641d5fdc95f0cdc3', class: "nano-resize-observe" }, h("slot", { key: '817b25ecae05e920029170061a31b03b3a155b53' }), !!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.js

@@ -703,30 +703,30 @@ export class Select {
             disabled,
             clearControl: this.clearable,
         }))(this);
-        return (h(Host, { key: '176a0d6fb53c170c355d6a65446e063a509ffb6a', 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: '37984e991141b3cc49952e422b6e05d4ee60b797', ...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: '2ba3a6dba6398baaa6666c8433fbef51965cbfa0', ...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: 'c98ceed9279e96fcf40b94634ba3d2462dae8c40', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
-            this.mask && (h("div", { key: '3aeb73d315a15554913d83d55082371901b76fde', class: "select__mask" }, this.getLabel(this.value))),
-            h("input", { key: 'cce66d2d18e7f5ba1235ede4fee57b4f67a8a157', 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: '76a86645ba7119bb9e9cfc95782c6d911761b315', 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: '31bc6caa39d7675249e7e6e2edd9756b3b24fe2a', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: 'b5cd544bb04a692ea31b61428c89d4095b09347f', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: 'c9e265690baa4c48609b9ea4e05555d762cc759c' }))), h("select", { key: 'bbae26688eafd95609c5b17dfe7b7a2083de5967', 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/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.js

@@ -499,15 +499,15 @@ export class Slides {
         this.destroyflickity();
     }
     render() {
-        return (h(Host, { key: '9e8f895c3e090bad627b2deb2fc73fd4376955d8', class: "nano-slides" }, h("div", { key: 'ec54add94ca823d9e7cfd76c025cb1e126c6ca46', 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: '8d1edb24c0dc802ff6b16de97a30ac9bfa628db5', 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: 'c4801b234cc2a6312a7fbac0a5218631f740f616' })), h("div", { key: '43a7d3fa38eb728ab12f4d37ecd247a6d1a66e53', class: "ui-extras" }, h("slot", { key: '98601f0edd95f9f6c717b3bb7ab293db2cab3a93', 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.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: '345a759cd77b0114bfd769672e0a3fa3d4006f77' }),
-            h("nano-icon-button", { key: 'a1a437b829d5805a02c12f523e4c098c8132f60e', 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/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"],