@nanoporetech-digital/components 8.12.3 → 8.14.0

package/dist/types/components/input-otp/input-otp.d.ts

@@ -113,6 +113,10 @@ export declare class InputOTP implements ComponentInterface {
      * Emitted when the input group loses focus.
      */
     nanoBlur: EventEmitter<FocusEvent>;
+    /**
+     * Emitted when the input group is cleared.
+     */
+    nanoClear: EventEmitter<void>;
     /**
      * Emitted when the input group has focus.
      */
@@ -124,6 +128,10 @@ export declare class InputOTP implements ComponentInterface {
      * Otherwise, the first empty input box or the last input if all are filled will be focused.
      */
     setFocus(index?: number): Promise<void>;
+    /**
+     * Resets the input boxes to empty values.
+     */
+    clear(): Promise<void>;
     valueChanged(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;

package/dist/types/components.d.ts

@@ -2196,6 +2196,10 @@ export namespace Components {
           * @default false
          */
         "allowInvalid": boolean;
+        /**
+          * Resets the input boxes to empty values.
+         */
+        "clear": () => Promise<void>;
         /**
           * If `true`, the user cannot interact with the input.
           * @default false
@@ -4485,6 +4489,7 @@ declare global {
         "nanoChange": InputOtpChangeEventDetail;
         "nanoComplete": InputOtpCompleteEventDetail;
         "nanoBlur": FocusEvent;
+        "nanoClear": void;
         "nanoFocus": FocusEvent;
     }
     /**
@@ -7410,6 +7415,10 @@ declare namespace LocalJSX {
           * The `nanoChange` event is fired when the user modifies the input's value. Unlike the `nanoInput` event, the `nanoChange` event is only fired when changes are committed, not as the user types.  The `nanoChange` event fires when the `<nano-input-otp>` component loses focus after its value has changed.  This event will not emit when programmatically setting the `value` property.
          */
         "onNanoChange"?: (event: NanoInputOtpCustomEvent<InputOtpChangeEventDetail>) => void;
+        /**
+          * Emitted when the input group is cleared.
+         */
+        "onNanoClear"?: (event: NanoInputOtpCustomEvent<void>) => void;
         /**
           * Emitted when all input boxes have been filled with valid values.
          */

package/dist/types/utils/renderer.d.ts

@@ -4,7 +4,7 @@ import { h as stencilH } from '../stencil-public-runtime';
  * @param tag
  * @returns the transformed tag
  */
-export declare function transformTag(tag: string): string;
+export declare function transformTag<T extends string>(tag: T): T;
 /**
  * Augment Stencil's `h()` function to add a tag prefix
  * @param args incoming JSX arguments

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-10-17T15:38:23",
+  "timestamp": "2025-10-29T17:36:06",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.36.1",
@@ -3369,7 +3369,7 @@
             "references": {
               "Breadcrumb": {
                 "location": "local",
-                "path": "/builds/vSRqAuzi/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
+                "path": "/builds/RG1Ezkr-/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
                 "id": "src/components/breadcrumb/breadcrumb.tsx::Breadcrumb"
               }
             }
@@ -4911,6 +4911,11 @@
         }
       ],
       "styles": [
+        {
+          "name": "--gap",
+          "annotation": "prop",
+          "docs": "The gap between checkboxes. Defaults to var(--nano-spacing-md)."
+        },
         {
           "name": "--help-msg-color",
           "annotation": "prop",
@@ -18208,6 +18213,28 @@
         }
       ],
       "methods": [
+        {
+          "name": "clear",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "clear() => Promise<void>",
+          "parameters": [],
+          "docs": "Resets the input boxes to empty values.",
+          "docsTags": []
+        },
         {
           "name": "setFocus",
           "returns": {
@@ -18288,6 +18315,20 @@
           "docs": "The `nanoChange` event is fired when the user modifies the input's value.\nUnlike the `nanoInput` event, the `nanoChange` event is only fired when changes\nare committed, not as the user types.\n\nThe `nanoChange` event fires when the `<nano-input-otp>` component loses\nfocus after its value has changed.\n\nThis event will not emit when programmatically setting the `value` property.",
           "docsTags": []
         },
+        {
+          "event": "nanoClear",
+          "detail": "void",
+          "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the input group is cleared.",
+          "docsTags": []
+        },
         {
           "event": "nanoComplete",
           "detail": "InputOtpCompleteEventDetail",

package/hydrate/index.js

@@ -3836,7 +3836,8 @@ class HasSlotController {
             // * Regular shadow DOM component *
             childNodes = [...this.host.shadowRoot.childNodes];
         }
-        else if (!this.host.classList.contains('hydrated')) {
+        else if (!this.host.classList.contains('hydrated') &&
+            this.host.__childNodes) {
             // * Non-shadow, polyfilled component *
             // Component has not done initial render. Return component internals
             childNodes = [...(this.host?.__childNodes ?? [])];
@@ -3846,7 +3847,7 @@ class HasSlotController {
             childNodes = [...this.host.childNodes];
         }
         return childNodes.some((node) => {
-            if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
+            if (node.nodeType === Node.TEXT_NODE && !!node.textContent.trim()) {
                 return true;
             }
             if (node.nodeType === Node.ELEMENT_NODE) {
@@ -8470,7 +8471,7 @@ const getClassMap = (classes) => {
     return map;
 };
 
-const checkboxGroupCss = ".sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-checkbox-group-h{--label-color:var(--nano-color-base-1000);--label-font-size:var(--nano-font-size-xs);--invalid-msg-color:var(--nano-color-danger-1100);--help-msg-color:var(--nano-color-base-1000);--more-font-size:var(--nano-font-size-2xs);display:block;inline-size:100%}.sc-nano-checkbox-group-h *.sc-nano-checkbox-group{box-sizing:inherit}.cbgroup.sc-nano-checkbox-group{margin:0;padding:0;border:0}.cbgroup__error.sc-nano-checkbox-group,.cbgroup__help.sc-nano-checkbox-group,.cbgroup__more.sc-nano-checkbox-group{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.cbgroup__error.sc-nano-checkbox-group,.cbgroup__help.sc-nano-checkbox-group{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--more-font-size);line-height:1.2;transition:0.3s ease-out opacity;font-style:italic}.show-error.sc-nano-checkbox-group .cbgroup__error.sc-nano-checkbox-group,.show-error.sc-nano-checkbox-group .cbgroup__help.sc-nano-checkbox-group{opacity:1}.cbgroup__error.sc-nano-checkbox-group{color:var(--invalid-msg-color);opacity:0}.has-error.sc-nano-checkbox-group .cbgroup__error.sc-nano-checkbox-group{opacity:1}.cbgroup__help.sc-nano-checkbox-group{opacity:1;color:var(--help-msg-color)}.has-error.sc-nano-checkbox-group .cbgroup__help.sc-nano-checkbox-group{opacity:0}.cbgroup__more.sc-nano-checkbox-group{block-size:1em;margin-block:var(--nano-spacing-sm) 0;position:relative;opacity:0;display:none;transition:all var(--nano-transition-fast) ease;transition-behavior:allow-discrete}.has-helper.sc-nano-checkbox-group .cbgroup__more.sc-nano-checkbox-group,.has-error.sc-nano-checkbox-group .cbgroup__more.sc-nano-checkbox-group{display:block;opacity:1}.cbgroup__legend.sc-nano-checkbox-group{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);padding:0 0 0.9375rem;margin:0;display:block;inline-size:100%}.cbgroup__legend.visually-hide.sc-nano-checkbox-group{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.cbgroup__cbs.sc-nano-checkbox-group{margin:0;padding:0;display:flex;flex-direction:column;gap:var(--nano-spacing-md)}.types-segment.sc-nano-checkbox-group-h .cbgroup__cbs.sc-nano-checkbox-group{flex-direction:row;gap:0}.types-tag.sc-nano-checkbox-group-h .cbgroup__cbs.sc-nano-checkbox-group{flex-direction:row;gap:var(--nano-spacing-sm)}";
+const checkboxGroupCss = ".sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-checkbox-group-h{--label-color:var(--nano-color-base-1000);--label-font-size:var(--nano-font-size-xs);--invalid-msg-color:var(--nano-color-danger-1100);--help-msg-color:var(--nano-color-base-1000);--more-font-size:var(--nano-font-size-2xs);--gap:var(--nano-spacing-md);display:block;inline-size:100%}.sc-nano-checkbox-group-h *.sc-nano-checkbox-group{box-sizing:inherit}.cbgroup.sc-nano-checkbox-group{margin:0;padding:0;border:0}.cbgroup__error.sc-nano-checkbox-group,.cbgroup__help.sc-nano-checkbox-group,.cbgroup__more.sc-nano-checkbox-group{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.cbgroup__error.sc-nano-checkbox-group,.cbgroup__help.sc-nano-checkbox-group{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--more-font-size);line-height:1.2;transition:0.3s ease-out opacity;font-style:italic}.show-error.sc-nano-checkbox-group .cbgroup__error.sc-nano-checkbox-group,.show-error.sc-nano-checkbox-group .cbgroup__help.sc-nano-checkbox-group{opacity:1}.cbgroup__error.sc-nano-checkbox-group{color:var(--invalid-msg-color);opacity:0}.has-error.sc-nano-checkbox-group .cbgroup__error.sc-nano-checkbox-group{opacity:1}.cbgroup__help.sc-nano-checkbox-group{opacity:1;color:var(--help-msg-color)}.has-error.sc-nano-checkbox-group .cbgroup__help.sc-nano-checkbox-group{opacity:0}.cbgroup__more.sc-nano-checkbox-group{block-size:1em;margin-block:var(--nano-spacing-sm) 0;position:relative;opacity:0;display:none;transition:all var(--nano-transition-fast) ease;transition-behavior:allow-discrete}.has-helper.sc-nano-checkbox-group .cbgroup__more.sc-nano-checkbox-group,.has-error.sc-nano-checkbox-group .cbgroup__more.sc-nano-checkbox-group{display:block;opacity:1}.cbgroup__legend.sc-nano-checkbox-group{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);padding:0 0 0.9375rem;margin:0;display:block;inline-size:100%}.cbgroup__legend.visually-hide.sc-nano-checkbox-group{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.cbgroup__cbs.sc-nano-checkbox-group{margin:0;padding:0;display:flex;flex-direction:column;gap:var(--gap)}.types-segment.sc-nano-checkbox-group-h .cbgroup__cbs.sc-nano-checkbox-group{flex-direction:row;--gap:0}.types-tag.sc-nano-checkbox-group-h .cbgroup__cbs.sc-nano-checkbox-group{flex-direction:row;--gap:var(--nano-spacing-sm)}";
 
 /**
  * Checkbox group is an optional wrapper for all [checkbox](/components/checkbox) controls.
@@ -9534,18 +9535,18 @@ class DataList {
         }
     }
     render() {
-        return (h(Host, { key: '269f57e6eccd251685f84a94d53f380d6545a3cb', 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: '8acb3be76246d665171db96444cff3a5141e1132', 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: 'ee6398b356dc1a0ff9fa35e84955314fc95435b6', 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: '56c051873a20a3dab17a36eec1a2f040f83247fa', 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: 'f80006a5ba62c227094da52672b4abf6ee6335dc', 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: '7559b648617c8d32f61c670e4dc78c0d60d36dc4', 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: '8a2d3160b990c99baeaf4fd9bdd7bb04229d642c', name: "list-top" }), h("slot", { key: '2230e4458be0998d59d18250e1d22188baf2f6b1' }), h("slot", { key: 'fca84cbd01495e4b62ba95c4c07681f506939d3f', name: "internal-opts" }), h("slot", { key: '076fd81c15f5ac6590e5311503262a07f60e8454', name: "list-bottom" })), h("nano-menu", { key: 'd4878bc502b4fcc0de01f67b5065ad017f445f75', 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: '02bd8ba511db314637e8991d29234a22967cf27d', name: "list-top" }), h("slot", { key: 'cb0234e0dd103293c1f1292af62575dd766af730' }), h("slot", { key: '0adac42b20ee0338de74217e6e91c00be6b5b6a7', name: "internal-opts" }), h("slot", { key: '906255e4e6fdc87fa8bf6e278ad076f179553925', name: "list-bottom" })), h("nano-menu", { key: '9aa978054227c9bb928c06ce93303ceda48cbf29', 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: '2ac583af3ac8b24ace627637ab86471999df9465', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '4971780255baf694fcc447756ca02e1115ece871', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
+            } }, h("slot", { key: '4e2ce9dcb39d0c823ed27f13dc8c9a8873f0ca9f', name: "no-result" })), !!this.actvOptEles && (h("div", { key: 'c6bf0c88d7b1fcd24b2882c7db851ffca2e77ba3', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
     }
     static get watchers() { return {
         "open": ["openWatcher"],
@@ -17768,6 +17769,7 @@ class InputOTP {
         this.nanoChange = createEvent(this, "nanoChange", 7);
         this.nanoComplete = createEvent(this, "nanoComplete", 7);
         this.nanoBlur = createEvent(this, "nanoBlur", 7);
+        this.nanoClear = createEvent(this, "nanoClear", 7);
         this.nanoFocus = createEvent(this, "nanoFocus", 7);
     }
     inputRefs = [];
@@ -17871,6 +17873,10 @@ class InputOTP {
      * Emitted when the input group loses focus.
      */
     nanoBlur;
+    /**
+     * Emitted when the input group is cleared.
+     */
+    nanoClear;
     /**
      * Emitted when the input group has focus.
      */
@@ -17891,6 +17897,16 @@ class InputOTP {
             this.inputRefs[tabbableIndex]?.focus();
         }
     }
+    /**
+     * Resets the input boxes to empty values.
+     */
+    async clear() {
+        this.value = '';
+        this.inputRefs.forEach((input, index) => {
+            input.value = this.inputValues[index] || '';
+        });
+        this.nanoClear.emit();
+    }
     valueChanged() {
         this.initializeValues();
         this.updateTabIndexes();
@@ -18431,31 +18447,29 @@ class InputOTP {
      * - `valid` is true if all input boxes are filled with valid values.
      */
     computeValidity() {
-        const { inputValues } = this;
         this.invalid =
             this.allowInvalid &&
                 this.inputValues.some((val) => val !== '' && !this.validKeyPattern.test(val));
         this.valid =
             this.inputValues.length === this.length &&
                 this.inputValues.every((val) => val !== '' && this.validKeyPattern.test(val));
-        inputValues.some((v) => v !== '' && !this.validKeyPattern.test(v));
     }
     render() {
         const { disabled, hasFocus, inputId, inputRefs, inputValues, length, readonly, invalid, valid, } = this;
         const inputmode = this.getInputmode();
         const tabbableIndex = this.getTabbableIndex();
         const pattern = this.getPattern();
-        return (hAsync(Host, { key: '9b64211ca6a227c5f905a76a50ca3a44eff0a96b', class: {
+        return (hAsync(Host, { key: '69c1b3c4a4cae21665bb7e3646a27a89f8d0a73b', class: {
                 'has-focus': hasFocus,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
                 'nano-invalid': invalid,
                 'nano-valid': valid,
-            } }, hAsync("div", { key: 'cc7fb4411962398f143d2dd17c40448111956e80', class: "input-otp-container" }, hAsync("div", { key: '4408d19628b34a25cb3bc39a0df1dd859700399f', class: "input-otp-group", role: "group", "aria-label": "One-time password input" }, Array.from({ length }).map((_, index) => (hAsync(Fragment, null, hAsync("div", { class: "native-wrapper" }, hAsync("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && (hAsync("div", { class: "input-otp-separator" })))))), this.showValidity && (hAsync("div", { key: 'cc45bac1e7f7675b467bae6153d9ffa586ec6655', class: {
+            } }, hAsync("div", { key: '9fcd9882d552cde88adfa7578e556155651bbb4d', class: "input-otp-container" }, hAsync("div", { key: '3e2c1a83282c08c1ccef81c4f13a895f1efeec13', class: "input-otp-group", role: "group", "aria-label": "One-time password input" }, Array.from({ length }).map((_, index) => (hAsync(Fragment, null, hAsync("div", { class: "native-wrapper" }, hAsync("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && (hAsync("div", { class: "input-otp-separator" })))))), this.showValidity && (hAsync("div", { key: 'b5d9d9f3023cca6fcf9d8a394287de2333eeff54', class: {
                 'input-otp-icon': true,
                 'input-otp-icon--valid': valid,
                 'input-otp-icon--invalid': invalid,
-            }, part: "validity-icon" }, hAsync("slot", { key: '84bd77959eaa572898cd48525512d93b6406b6b6', name: "validity-icon" }, hAsync("nano-icon", { key: 'c903d61964571e006aca28afea7a911f47527d43', hidden: !valid, name: "light/circle-check", class: "input-otp-valid-icon", "aria-label": "Valid input" }))))), this.slotCtrl.has('[default]') && (hAsync("div", { key: 'ddbf6145b86b48ad942227ec15ab419612e5ef41', class: "input-otp-description" }, hAsync("slot", { key: '56862b93b96aee7ecad1b36472666f94f2021a5f' })))));
+            }, part: "validity-icon" }, hAsync("slot", { key: 'd4a3123b713487f579a503ea1158e73b97a35198', name: "validity-icon" }, hAsync("nano-icon", { key: '2d7886aadaaa786f3594ace3d4fa3d2ebbdc30c3', hidden: !valid, name: "light/circle-check", class: "input-otp-valid-icon", "aria-label": "Valid input" }))))), this.slotCtrl.has('[default]') && (hAsync("div", { key: '32b6883425e8f62bda344ad6f92ff63a5fef98f4', class: "input-otp-description" }, hAsync("slot", { key: '81b5c65f7c8bab2f8bf371c03bc5a2ae455b6c3f' })))));
     }
     static get watchers() { return {
         "value": ["valueChanged"]
@@ -18479,7 +18493,8 @@ class InputOTP {
             "previousInputValues": [32],
             "invalid": [32],
             "valid": [32],
-            "setFocus": [64]
+            "setFocus": [64],
+            "clear": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -21148,7 +21163,7 @@ function mergeCellProperties(rowIndex, colIndex, defaultProps) {
  */
 function colheadFootRender(col) {
     const tpl = col?.columnTemplate;
-    return tpl ? (tpl(hAsync, col)) : (hAsync(Fragment, null, col.title));
+    return tpl ? tpl(hAsync, col) : (hAsync(Fragment, null, col.title));
 }
 function headerPinClasses(type, vPinned, toString = false) {
     const classes = {
@@ -21285,7 +21300,7 @@ function cellRender(rowIndex, colIndex) {
         // custom rendering can render to the templateEle OR return a promise<string>
         tplResult = result && result['then'] ? result : templateEle;
     }
-    return tplResult ? (tplResult) : model.cellModel !== undefined && model.cellModel !== null ? (h(Fragment, null, model.cellModel?.toString())) : ('');
+    return tplResult ? tplResult : model.cellModel !== undefined && model.cellModel !== null ? (h(Fragment, null, model.cellModel?.toString())) : ('');
 }
 const baseCellClasses = (colIndex, toString = false) => {
     const store = fetchStores();

package/hydrate/index.mjs

@@ -3834,7 +3834,8 @@ class HasSlotController {
             // * Regular shadow DOM component *
             childNodes = [...this.host.shadowRoot.childNodes];
         }
-        else if (!this.host.classList.contains('hydrated')) {
+        else if (!this.host.classList.contains('hydrated') &&
+            this.host.__childNodes) {
             // * Non-shadow, polyfilled component *
             // Component has not done initial render. Return component internals
             childNodes = [...(this.host?.__childNodes ?? [])];
@@ -3844,7 +3845,7 @@ class HasSlotController {
             childNodes = [...this.host.childNodes];
         }
         return childNodes.some((node) => {
-            if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
+            if (node.nodeType === Node.TEXT_NODE && !!node.textContent.trim()) {
                 return true;
             }
             if (node.nodeType === Node.ELEMENT_NODE) {
@@ -8468,7 +8469,7 @@ const getClassMap = (classes) => {
     return map;
 };
 
-const checkboxGroupCss = ".sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-checkbox-group-h{--label-color:var(--nano-color-base-1000);--label-font-size:var(--nano-font-size-xs);--invalid-msg-color:var(--nano-color-danger-1100);--help-msg-color:var(--nano-color-base-1000);--more-font-size:var(--nano-font-size-2xs);display:block;inline-size:100%}.sc-nano-checkbox-group-h *.sc-nano-checkbox-group{box-sizing:inherit}.cbgroup.sc-nano-checkbox-group{margin:0;padding:0;border:0}.cbgroup__error.sc-nano-checkbox-group,.cbgroup__help.sc-nano-checkbox-group,.cbgroup__more.sc-nano-checkbox-group{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.cbgroup__error.sc-nano-checkbox-group,.cbgroup__help.sc-nano-checkbox-group{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--more-font-size);line-height:1.2;transition:0.3s ease-out opacity;font-style:italic}.show-error.sc-nano-checkbox-group .cbgroup__error.sc-nano-checkbox-group,.show-error.sc-nano-checkbox-group .cbgroup__help.sc-nano-checkbox-group{opacity:1}.cbgroup__error.sc-nano-checkbox-group{color:var(--invalid-msg-color);opacity:0}.has-error.sc-nano-checkbox-group .cbgroup__error.sc-nano-checkbox-group{opacity:1}.cbgroup__help.sc-nano-checkbox-group{opacity:1;color:var(--help-msg-color)}.has-error.sc-nano-checkbox-group .cbgroup__help.sc-nano-checkbox-group{opacity:0}.cbgroup__more.sc-nano-checkbox-group{block-size:1em;margin-block:var(--nano-spacing-sm) 0;position:relative;opacity:0;display:none;transition:all var(--nano-transition-fast) ease;transition-behavior:allow-discrete}.has-helper.sc-nano-checkbox-group .cbgroup__more.sc-nano-checkbox-group,.has-error.sc-nano-checkbox-group .cbgroup__more.sc-nano-checkbox-group{display:block;opacity:1}.cbgroup__legend.sc-nano-checkbox-group{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);padding:0 0 0.9375rem;margin:0;display:block;inline-size:100%}.cbgroup__legend.visually-hide.sc-nano-checkbox-group{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.cbgroup__cbs.sc-nano-checkbox-group{margin:0;padding:0;display:flex;flex-direction:column;gap:var(--nano-spacing-md)}.types-segment.sc-nano-checkbox-group-h .cbgroup__cbs.sc-nano-checkbox-group{flex-direction:row;gap:0}.types-tag.sc-nano-checkbox-group-h .cbgroup__cbs.sc-nano-checkbox-group{flex-direction:row;gap:var(--nano-spacing-sm)}";
+const checkboxGroupCss = ".sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-checkbox-group-h{--label-color:var(--nano-color-base-1000);--label-font-size:var(--nano-font-size-xs);--invalid-msg-color:var(--nano-color-danger-1100);--help-msg-color:var(--nano-color-base-1000);--more-font-size:var(--nano-font-size-2xs);--gap:var(--nano-spacing-md);display:block;inline-size:100%}.sc-nano-checkbox-group-h *.sc-nano-checkbox-group{box-sizing:inherit}.cbgroup.sc-nano-checkbox-group{margin:0;padding:0;border:0}.cbgroup__error.sc-nano-checkbox-group,.cbgroup__help.sc-nano-checkbox-group,.cbgroup__more.sc-nano-checkbox-group{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.cbgroup__error.sc-nano-checkbox-group,.cbgroup__help.sc-nano-checkbox-group{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--more-font-size);line-height:1.2;transition:0.3s ease-out opacity;font-style:italic}.show-error.sc-nano-checkbox-group .cbgroup__error.sc-nano-checkbox-group,.show-error.sc-nano-checkbox-group .cbgroup__help.sc-nano-checkbox-group{opacity:1}.cbgroup__error.sc-nano-checkbox-group{color:var(--invalid-msg-color);opacity:0}.has-error.sc-nano-checkbox-group .cbgroup__error.sc-nano-checkbox-group{opacity:1}.cbgroup__help.sc-nano-checkbox-group{opacity:1;color:var(--help-msg-color)}.has-error.sc-nano-checkbox-group .cbgroup__help.sc-nano-checkbox-group{opacity:0}.cbgroup__more.sc-nano-checkbox-group{block-size:1em;margin-block:var(--nano-spacing-sm) 0;position:relative;opacity:0;display:none;transition:all var(--nano-transition-fast) ease;transition-behavior:allow-discrete}.has-helper.sc-nano-checkbox-group .cbgroup__more.sc-nano-checkbox-group,.has-error.sc-nano-checkbox-group .cbgroup__more.sc-nano-checkbox-group{display:block;opacity:1}.cbgroup__legend.sc-nano-checkbox-group{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);padding:0 0 0.9375rem;margin:0;display:block;inline-size:100%}.cbgroup__legend.visually-hide.sc-nano-checkbox-group{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.cbgroup__cbs.sc-nano-checkbox-group{margin:0;padding:0;display:flex;flex-direction:column;gap:var(--gap)}.types-segment.sc-nano-checkbox-group-h .cbgroup__cbs.sc-nano-checkbox-group{flex-direction:row;--gap:0}.types-tag.sc-nano-checkbox-group-h .cbgroup__cbs.sc-nano-checkbox-group{flex-direction:row;--gap:var(--nano-spacing-sm)}";
 
 /**
  * Checkbox group is an optional wrapper for all [checkbox](/components/checkbox) controls.
@@ -9532,18 +9533,18 @@ class DataList {
         }
     }
     render() {
-        return (h(Host, { key: '269f57e6eccd251685f84a94d53f380d6545a3cb', 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: '8acb3be76246d665171db96444cff3a5141e1132', 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: 'ee6398b356dc1a0ff9fa35e84955314fc95435b6', 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: '56c051873a20a3dab17a36eec1a2f040f83247fa', 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: 'f80006a5ba62c227094da52672b4abf6ee6335dc', 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: '7559b648617c8d32f61c670e4dc78c0d60d36dc4', 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: '8a2d3160b990c99baeaf4fd9bdd7bb04229d642c', name: "list-top" }), h("slot", { key: '2230e4458be0998d59d18250e1d22188baf2f6b1' }), h("slot", { key: 'fca84cbd01495e4b62ba95c4c07681f506939d3f', name: "internal-opts" }), h("slot", { key: '076fd81c15f5ac6590e5311503262a07f60e8454', name: "list-bottom" })), h("nano-menu", { key: 'd4878bc502b4fcc0de01f67b5065ad017f445f75', 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: '02bd8ba511db314637e8991d29234a22967cf27d', name: "list-top" }), h("slot", { key: 'cb0234e0dd103293c1f1292af62575dd766af730' }), h("slot", { key: '0adac42b20ee0338de74217e6e91c00be6b5b6a7', name: "internal-opts" }), h("slot", { key: '906255e4e6fdc87fa8bf6e278ad076f179553925', name: "list-bottom" })), h("nano-menu", { key: '9aa978054227c9bb928c06ce93303ceda48cbf29', 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: '2ac583af3ac8b24ace627637ab86471999df9465', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '4971780255baf694fcc447756ca02e1115ece871', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
+            } }, h("slot", { key: '4e2ce9dcb39d0c823ed27f13dc8c9a8873f0ca9f', name: "no-result" })), !!this.actvOptEles && (h("div", { key: 'c6bf0c88d7b1fcd24b2882c7db851ffca2e77ba3', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
     }
     static get watchers() { return {
         "open": ["openWatcher"],
@@ -17766,6 +17767,7 @@ class InputOTP {
         this.nanoChange = createEvent(this, "nanoChange", 7);
         this.nanoComplete = createEvent(this, "nanoComplete", 7);
         this.nanoBlur = createEvent(this, "nanoBlur", 7);
+        this.nanoClear = createEvent(this, "nanoClear", 7);
         this.nanoFocus = createEvent(this, "nanoFocus", 7);
     }
     inputRefs = [];
@@ -17869,6 +17871,10 @@ class InputOTP {
      * Emitted when the input group loses focus.
      */
     nanoBlur;
+    /**
+     * Emitted when the input group is cleared.
+     */
+    nanoClear;
     /**
      * Emitted when the input group has focus.
      */
@@ -17889,6 +17895,16 @@ class InputOTP {
             this.inputRefs[tabbableIndex]?.focus();
         }
     }
+    /**
+     * Resets the input boxes to empty values.
+     */
+    async clear() {
+        this.value = '';
+        this.inputRefs.forEach((input, index) => {
+            input.value = this.inputValues[index] || '';
+        });
+        this.nanoClear.emit();
+    }
     valueChanged() {
         this.initializeValues();
         this.updateTabIndexes();
@@ -18429,31 +18445,29 @@ class InputOTP {
      * - `valid` is true if all input boxes are filled with valid values.
      */
     computeValidity() {
-        const { inputValues } = this;
         this.invalid =
             this.allowInvalid &&
                 this.inputValues.some((val) => val !== '' && !this.validKeyPattern.test(val));
         this.valid =
             this.inputValues.length === this.length &&
                 this.inputValues.every((val) => val !== '' && this.validKeyPattern.test(val));
-        inputValues.some((v) => v !== '' && !this.validKeyPattern.test(v));
     }
     render() {
         const { disabled, hasFocus, inputId, inputRefs, inputValues, length, readonly, invalid, valid, } = this;
         const inputmode = this.getInputmode();
         const tabbableIndex = this.getTabbableIndex();
         const pattern = this.getPattern();
-        return (hAsync(Host, { key: '9b64211ca6a227c5f905a76a50ca3a44eff0a96b', class: {
+        return (hAsync(Host, { key: '69c1b3c4a4cae21665bb7e3646a27a89f8d0a73b', class: {
                 'has-focus': hasFocus,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
                 'nano-invalid': invalid,
                 'nano-valid': valid,
-            } }, hAsync("div", { key: 'cc7fb4411962398f143d2dd17c40448111956e80', class: "input-otp-container" }, hAsync("div", { key: '4408d19628b34a25cb3bc39a0df1dd859700399f', class: "input-otp-group", role: "group", "aria-label": "One-time password input" }, Array.from({ length }).map((_, index) => (hAsync(Fragment, null, hAsync("div", { class: "native-wrapper" }, hAsync("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && (hAsync("div", { class: "input-otp-separator" })))))), this.showValidity && (hAsync("div", { key: 'cc45bac1e7f7675b467bae6153d9ffa586ec6655', class: {
+            } }, hAsync("div", { key: '9fcd9882d552cde88adfa7578e556155651bbb4d', class: "input-otp-container" }, hAsync("div", { key: '3e2c1a83282c08c1ccef81c4f13a895f1efeec13', class: "input-otp-group", role: "group", "aria-label": "One-time password input" }, Array.from({ length }).map((_, index) => (hAsync(Fragment, null, hAsync("div", { class: "native-wrapper" }, hAsync("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && (hAsync("div", { class: "input-otp-separator" })))))), this.showValidity && (hAsync("div", { key: 'b5d9d9f3023cca6fcf9d8a394287de2333eeff54', class: {
                 'input-otp-icon': true,
                 'input-otp-icon--valid': valid,
                 'input-otp-icon--invalid': invalid,
-            }, part: "validity-icon" }, hAsync("slot", { key: '84bd77959eaa572898cd48525512d93b6406b6b6', name: "validity-icon" }, hAsync("nano-icon", { key: 'c903d61964571e006aca28afea7a911f47527d43', hidden: !valid, name: "light/circle-check", class: "input-otp-valid-icon", "aria-label": "Valid input" }))))), this.slotCtrl.has('[default]') && (hAsync("div", { key: 'ddbf6145b86b48ad942227ec15ab419612e5ef41', class: "input-otp-description" }, hAsync("slot", { key: '56862b93b96aee7ecad1b36472666f94f2021a5f' })))));
+            }, part: "validity-icon" }, hAsync("slot", { key: 'd4a3123b713487f579a503ea1158e73b97a35198', name: "validity-icon" }, hAsync("nano-icon", { key: '2d7886aadaaa786f3594ace3d4fa3d2ebbdc30c3', hidden: !valid, name: "light/circle-check", class: "input-otp-valid-icon", "aria-label": "Valid input" }))))), this.slotCtrl.has('[default]') && (hAsync("div", { key: '32b6883425e8f62bda344ad6f92ff63a5fef98f4', class: "input-otp-description" }, hAsync("slot", { key: '81b5c65f7c8bab2f8bf371c03bc5a2ae455b6c3f' })))));
     }
     static get watchers() { return {
         "value": ["valueChanged"]
@@ -18477,7 +18491,8 @@ class InputOTP {
             "previousInputValues": [32],
             "invalid": [32],
             "valid": [32],
-            "setFocus": [64]
+            "setFocus": [64],
+            "clear": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -21146,7 +21161,7 @@ function mergeCellProperties(rowIndex, colIndex, defaultProps) {
  */
 function colheadFootRender(col) {
     const tpl = col?.columnTemplate;
-    return tpl ? (tpl(hAsync, col)) : (hAsync(Fragment, null, col.title));
+    return tpl ? tpl(hAsync, col) : (hAsync(Fragment, null, col.title));
 }
 function headerPinClasses(type, vPinned, toString = false) {
     const classes = {
@@ -21283,7 +21298,7 @@ function cellRender(rowIndex, colIndex) {
         // custom rendering can render to the templateEle OR return a promise<string>
         tplResult = result && result['then'] ? result : templateEle;
     }
-    return tplResult ? (tplResult) : model.cellModel !== undefined && model.cellModel !== null ? (h(Fragment, null, model.cellModel?.toString())) : ('');
+    return tplResult ? tplResult : model.cellModel !== undefined && model.cellModel !== null ? (h(Fragment, null, model.cellModel?.toString())) : ('');
 }
 const baseCellClasses = (colIndex, toString = false) => {
     const store = fetchStores();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "8.12.3",
+  "version": "8.14.0",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -60,7 +60,7 @@
     "smart-array-filter": "^4.0.2",
     "stencil-wormhole": "3.2.1",
     "tyqs": "^0.1.3",
-    "@nanoporetech-digital/style": "8.12.3"
+    "@nanoporetech-digital/style": "8.14.0"
   },
   "devDependencies": {
     "@algolia/client-search": "^4.22.1",

package/dist/nano-components/slot-D31cEKyt.js

@@ -1,4 +0,0 @@
-/*!
- * Custom elements for Nanopore-Digital Web applications
- */
-import{g as t,j as s}from"./index-BM3Om9WE.js";import{g as h}from"./dom-dlicJTEJ.js";function i(t){const s=t.getRootNode();return s.host?s.host.innerText:t.innerText}class o{host;slotNames=[];constructor(s,...h){this.slotNames=h;const i=s.componentWillLoad;s.componentWillLoad=()=>{this.host=t(s),i&&i.call(s)};const o=s.connectedCallback;s.connectedCallback=()=>{this.host=t(s),this.hostConnected(),o&&o.call(s)};const e=s.disconnectedCallback;s.disconnectedCallback=()=>{this.hostDisconnected(),this.host=void 0,e&&e.call(s)}}hasDefaultSlot(){if(!this.host)return!1;let t;return t=this.host.shadowRoot?[...this.host.shadowRoot.childNodes]:this.host.classList.contains("hydrated")?[...this.host.childNodes]:[...this.host?.__childNodes??[]],t.some((t=>t.nodeType===Node.TEXT_NODE&&""!==t.textContent.trim()||t.nodeType===Node.ELEMENT_NODE&&!t.hasAttribute("slot")))}hasNamedSlot(t){return!!this.host&&h(this.host,`[slot="${t}"]`,!0).length>0}has(t){return"[default]"===t?this.hasDefaultSlot():this.hasNamedSlot(t)}hostConnected(){(this.host.shadowRoot??this.host).addEventListener("slotchange",this.handleSlotChange)}hostDisconnected(){this.host&&(this.host.shadowRoot??this.host).removeEventListener("slotchange",this.handleSlotChange)}handleSlotChange=t=>{const h=t.target;(this.slotNames.includes("[default]")&&!h.name||h.name&&this.slotNames.includes(h.name))&&s(this.host)}}export{o as H,i as g}