@nanoporetech-digital/components 8.12.3 → 8.14.0

package/dist/cjs/nano-details.cjs.entry.js

@@ -5,7 +5,7 @@
 
 var index = require('./index-DGttnXif.js');
 var renderer = require('./renderer-jVpDRMfV.js');
-var slot = require('./slot-BUMYLmup.js');
+var slot = require('./slot-CM4lrtVE.js');
 require('./dom-Dxk5vXYq.js');
 
 const detailsCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:var(--nano-spacing-md);--btn-padding:var(--padding);--btn-bg-color:transparent;--btn-bg-color--hover:var(--nano-color-primary-100);--btn-bg-color--active:var(--nano-color-primary-300);--content-padding:var(--padding);display:block;border:1px solid var(--nano-color-neutral-300);color:var(--nano-color-neutral-1400)}:host([size=small]){--padding:var(--nano-spacing-sm) 0.9375rem}:host([size=large]){--padding:var(--nano-spacing-l)}:host([size=large]) .header{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-lg);line-height:var(--nano-line-height-dense);text-wrap:balance}:host([disabled]){opacity:0.5}.header{all:unset;cursor:pointer;padding:var(--btn-padding);position:relative;display:flex;flex-wrap:wrap;align-items:center;background:var(--btn-bg-color);color:inherit;font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-md);line-height:var(--nano-line-height-dense);text-wrap:balance}.header::-webkit-details-marker{display:none}.header:focus{outline:none}.header:not([aria-disabled=true]):focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.header:not([aria-disabled=true]):hover{background:var(--btn-bg-color--hover)}.header:not([aria-disabled=true]):active{background:var(--btn-bg-color--active)}.disabled .header{cursor:not-allowed}.header .label{inline-size:100%;max-inline-size:100%;max-block-size:100%;flex:1;display:inline-block}.header .icon{line-height:0;flex-direction:column;justify-content:center;display:inline-block;color:var(--nano-color-primary-1200)}.header .icon .default-icon{rotate:0deg;transform-origin:center;transition:var(--nano-transition-x-fast) ease rotate}:host([open]) .header .icon .default-icon{rotate:180deg}.header .icon--start{margin-inline:0 var(--btn-padding);margin-block:0}.header .icon--end{margin-inline:var(--btn-padding) 0;margin-block:0}.header .icon ::slotted(.nano-icon),.header .icon::slotted(.nano-icon){color:currentcolor;transition:var(--nano-transition-x-fast) ease rotate;transform-origin:center}.body{display:grid;grid-template-rows:0fr;transition:all var(--nano-transition-fast) ease-out;opacity:0}:host([open]) .body{grid-template-rows:1fr;opacity:1}.content-wrapper{overflow:hidden}.content{padding:var(--content-padding)}";

package/dist/cjs/nano-dialog.cjs.entry.js

@@ -7,7 +7,7 @@ var index = require('./index-DGttnXif.js');
 var renderer = require('./renderer-jVpDRMfV.js');
 var modal = require('./modal-BlzeVZW4.js');
 var scroll = require('./scroll-C6pO9RvO.js');
-var slot = require('./slot-BUMYLmup.js');
+var slot = require('./slot-CM4lrtVE.js');
 var componentStore = require('./component-store-C5eBOK0w.js');
 var tabbable = require('./tabbable-C-YwPfjA.js');
 require('./dom-Dxk5vXYq.js');

package/dist/cjs/nano-dropdown_2.cjs.entry.js

@@ -9,7 +9,7 @@ var popover = require('./popover-CU5-yMCD.js');
 var tabbable = require('./tabbable-C-YwPfjA.js');
 var renderer = require('./renderer-jVpDRMfV.js');
 var dom = require('./dom-Dxk5vXYq.js');
-var slot = require('./slot-BUMYLmup.js');
+var slot = require('./slot-CM4lrtVE.js');
 
 const dropdownCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--width:auto;--border:none;--border-radius:0px;--background:var(--nano-color-neutral-75);--padding:0 0;--overflow:auto;--dropdown-z-index:var(--nano-z-index-dropdown);--min-width:0;--max-height:none;--box-shadow:var(--nano-shadow-l2);--menu-height:calc(100vh - 200px);display:inline-block}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width);border:0;background:none;padding:0;overflow:visible;color:unset}.dropdown__positioner::backdrop{display:none}.dropdown__positioner[popover],.dropdown__positioner:popover-open{inset:unset}@media (width <= 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-inline-size:var(--min-width);inline-size:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentcolor;box-shadow:var(--box-shadow);opacity:0;transition:var(--nano-transition-x-fast) ease opacity, var(--nano-transition-x-fast) ease transform, var(--nano-transition-fast) ease min-block-size;min-block-size:20px;overflow:var(--overflow);max-block-size:var(--max-height);box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(.nano-menu){max-block-size:var(--menu-height)}.dropdown__accessible-title{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}";
 

package/dist/cjs/nano-in-page-nav.cjs.entry.js

@@ -5,7 +5,7 @@
 
 var index = require('./index-DGttnXif.js');
 var renderer = require('./renderer-jVpDRMfV.js');
-var slot = require('./slot-BUMYLmup.js');
+var slot = require('./slot-CM4lrtVE.js');
 var dom = require('./dom-Dxk5vXYq.js');
 var scroll = require('./scroll-C6pO9RvO.js');
 

package/dist/cjs/nano-input-otp.cjs.entry.js

@@ -4,7 +4,7 @@
 'use strict';
 
 var index = require('./index-DGttnXif.js');
-var slot = require('./slot-BUMYLmup.js');
+var slot = require('./slot-CM4lrtVE.js');
 require('./dom-Dxk5vXYq.js');
 
 const inputOtpCss = ".sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{box-sizing:border-box}[hidden].sc-nano-input-otp{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{box-sizing:border-box}[hidden].sc-nano-input-otp{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-input-otp-h{--color:initial;--min-width:40px;--width:40px;--height:50px;--gap:8px;--icon-size:var(--nano-pictogram-size-small);--inline-padding:calc(var(--icon-size) + var(--gap));--spacing:var(--nano-spacing-xl);--separator-width:7px;--separator-height:1px;--separator-border-radius:0;--separator-color:var(--nano-color-primary-1000);--highlight-color-valid:var(--nano-color-success-1100);--highlight-color-invalid:var(--nano-color-warning-1100);--border-radius:8px;--border-color:var(--nano-color-neutral-700);--border-width:1px;display:block;position:relative;margin-inline:var(--inline-padding)}.input-otp-container.sc-nano-input-otp{position:relative;inline-size:fit-content;block-size:fit-content;margin:0 auto}.input-otp-group.sc-nano-input-otp{display:flex;align-items:center;justify-content:center;gap:var(--gap)}.native-wrapper.sc-nano-input-otp{display:flex;align-items:center;justify-content:center;min-inline-size:var(--min-width)}.native-input.sc-nano-input-otp{border-radius:var(--border-radius);inline-size:var(--width);min-inline-size:inherit;block-size:var(--height);border-width:var(--border-width);border-style:solid;border-color:var(--border-color);background:var(--background);color:var(--color);font-size:inherit;text-align:center;appearance:none}.input-otp-description.sc-nano-input-otp{color:currentcolor;font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);text-align:center;position:relative;margin-block-start:var(--spacing)}.input-otp-description-hidden.sc-nano-input-otp{display:none}.input-otp-separator.sc-nano-input-otp{border-radius:var(--separator-border-radius);flex-shrink:0;inline-size:var(--separator-width);block-size:var(--separator-height);background:var(--separator-color)}.input-otp-disabled.sc-nano-input-otp-h .input-otp-description.sc-nano-input-otp,.input-otp-disabled.sc-nano-input-otp-h .input-otp-group.sc-nano-input-otp{--color:var(--nano-color-neutral-700);opacity:0.5}.input-otp-disabled.sc-nano-input-otp-h,.input-otp-disabled.sc-nano-input-otp-h .native-input.sc-nano-input-otp:disabled{cursor:not-allowed}.has-focus.sc-nano-input-otp-h .native-input.sc-nano-input-otp:focus{outline:var(--nano-focus-ring)}.nano-invalid.sc-nano-input-otp-h .native-input.sc-nano-input-otp{border-color:var(--highlight-color-invalid)}.nano-valid.sc-nano-input-otp-h .native-input.sc-nano-input-otp{border-color:var(--highlight-color-valid)}.input-otp-icon.sc-nano-input-otp{position:absolute;inset-block-start:50%;transform:translateY(-43%);inset-inline-end:calc((var(--gap) + var(--icon-size)) * -1);inline-size:var(--icon-size);block-size:var(--icon-size);display:flex;align-items:center}.input-otp-icon--valid.sc-nano-input-otp{color:var(--nano-color-success-1100)}.input-otp-icon--invalid.sc-nano-input-otp{color:var(--nano-color-warning-1100)}";
@@ -16,6 +16,7 @@ const InputOTP = class {
         this.nanoChange = index.createEvent(this, "nanoChange", 7);
         this.nanoComplete = index.createEvent(this, "nanoComplete", 7);
         this.nanoBlur = index.createEvent(this, "nanoBlur", 7);
+        this.nanoClear = index.createEvent(this, "nanoClear", 7);
         this.nanoFocus = index.createEvent(this, "nanoFocus", 7);
     }
     inputRefs = [];
@@ -119,6 +120,10 @@ const InputOTP = class {
      * Emitted when the input group loses focus.
      */
     nanoBlur;
+    /**
+     * Emitted when the input group is cleared.
+     */
+    nanoClear;
     /**
      * Emitted when the input group has focus.
      */
@@ -139,6 +144,16 @@ const InputOTP = class {
             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();
@@ -679,31 +694,29 @@ const InputOTP = class {
      * - `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 (index.h(index.Host, { key: '9b64211ca6a227c5f905a76a50ca3a44eff0a96b', class: {
+        return (index.h(index.Host, { key: '69c1b3c4a4cae21665bb7e3646a27a89f8d0a73b', class: {
                 'has-focus': hasFocus,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
                 'nano-invalid': invalid,
                 'nano-valid': valid,
-            } }, index.h("div", { key: 'cc7fb4411962398f143d2dd17c40448111956e80', class: "input-otp-container" }, index.h("div", { key: '4408d19628b34a25cb3bc39a0df1dd859700399f', class: "input-otp-group", role: "group", "aria-label": "One-time password input" }, Array.from({ length }).map((_, index$1) => (index.h(index.Fragment, null, index.h("div", { class: "native-wrapper" }, index.h("input", { class: "native-input", id: `${inputId}-${index$1}`, "aria-label": `Input ${index$1 + 1} of ${length}`, type: "text", inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index$1 === tabbableIndex ? 0 : -1, value: inputValues[index$1] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index$1] = el), onInput: this.onInput(index$1), onBlur: this.onBlur, onFocus: this.onFocus(index$1), onKeyDown: this.onKeyDown(index$1), onPaste: this.onPaste })), this.showSeparator(index$1) && (index.h("div", { class: "input-otp-separator" })))))), this.showValidity && (index.h("div", { key: 'cc45bac1e7f7675b467bae6153d9ffa586ec6655', class: {
+            } }, index.h("div", { key: '9fcd9882d552cde88adfa7578e556155651bbb4d', class: "input-otp-container" }, index.h("div", { key: '3e2c1a83282c08c1ccef81c4f13a895f1efeec13', class: "input-otp-group", role: "group", "aria-label": "One-time password input" }, Array.from({ length }).map((_, index$1) => (index.h(index.Fragment, null, index.h("div", { class: "native-wrapper" }, index.h("input", { class: "native-input", id: `${inputId}-${index$1}`, "aria-label": `Input ${index$1 + 1} of ${length}`, type: "text", inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index$1 === tabbableIndex ? 0 : -1, value: inputValues[index$1] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index$1] = el), onInput: this.onInput(index$1), onBlur: this.onBlur, onFocus: this.onFocus(index$1), onKeyDown: this.onKeyDown(index$1), onPaste: this.onPaste })), this.showSeparator(index$1) && (index.h("div", { class: "input-otp-separator" })))))), this.showValidity && (index.h("div", { key: 'b5d9d9f3023cca6fcf9d8a394287de2333eeff54', class: {
                 'input-otp-icon': true,
                 'input-otp-icon--valid': valid,
                 'input-otp-icon--invalid': invalid,
-            }, part: "validity-icon" }, index.h("slot", { key: '84bd77959eaa572898cd48525512d93b6406b6b6', name: "validity-icon" }, index.h("nano-icon", { key: 'c903d61964571e006aca28afea7a911f47527d43', hidden: !valid, name: "light/circle-check", class: "input-otp-valid-icon", "aria-label": "Valid input" }))))), this.slotCtrl.has('[default]') && (index.h("div", { key: 'ddbf6145b86b48ad942227ec15ab419612e5ef41', class: "input-otp-description" }, index.h("slot", { key: '56862b93b96aee7ecad1b36472666f94f2021a5f' })))));
+            }, part: "validity-icon" }, index.h("slot", { key: 'd4a3123b713487f579a503ea1158e73b97a35198', name: "validity-icon" }, index.h("nano-icon", { key: '2d7886aadaaa786f3594ace3d4fa3d2ebbdc30c3', hidden: !valid, name: "light/circle-check", class: "input-otp-valid-icon", "aria-label": "Valid input" }))))), this.slotCtrl.has('[default]') && (index.h("div", { key: '32b6883425e8f62bda344ad6f92ff63a5fef98f4', class: "input-otp-description" }, index.h("slot", { key: '81b5c65f7c8bab2f8bf371c03bc5a2ae455b6c3f' })))));
     }
     static get watchers() { return {
         "value": ["valueChanged"]

package/dist/cjs/nano-menu-drawer.cjs.entry.js

@@ -6,7 +6,7 @@
 var index = require('./index-DGttnXif.js');
 var dom = require('./dom-Dxk5vXYq.js');
 var renderer = require('./renderer-jVpDRMfV.js');
-var slot = require('./slot-BUMYLmup.js');
+var slot = require('./slot-CM4lrtVE.js');
 
 const menuDrawerCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--padding-top:13px;--padding-end:13px;--padding-bottom:13px;--padding-start:13px;--icon-size:19px;--font-size:var(--nano-font-size-xs);--bg-color:var(--nano-color-surface-50);--bg-color-hover:var(--nano-color-neutral-75);--bg-color-selected:var(--nano-color-neutral-300);--bg-color-open:var(--nano-color-neutral-300);--content-color:var(--nano-color-neutral-1400);--divider-color:var(--nano-color-neutral-300);--global-nav-height:76px;--menu-width:calc((var(--padding-end) + var(--padding-start)) + var(--icon-size));color-scheme:dark;display:block;z-index:1;background:var(--bg-color);color:var(--content-color);min-block-size:100%}:host(.hide){display:none}.head{border-block-end:var(--divider-color) 1px solid}.container{inset-inline-end:auto;color:var(--content-color);inline-size:var(--menu-width);transition:inline-size 0.3s ease;inset-block-start:var(--global-nav-height);position:sticky;display:flex;flex-direction:column;block-size:100%;max-block-size:calc(100vh - var(--global-nav-height))}:host(.open) .container{inline-size:auto}.content-wrap{inset-inline-start:0;inset-block-start:0;inline-size:inherit;background:var(--bg-color);font-size:var(--font-size);line-height:1;display:flex;flex-direction:column;align-items:stretch;flex:1;box-shadow:var(--nano-shadow-ls)}.content-wrap.secondary-open{box-shadow:none}.content-wrap::after{content:\"\";position:absolute;inset:calc(var(--global-nav-height) * -1) 0 0;background-color:var(--bg-color);z-index:-1}.content{inline-size:auto;display:flex;flex-direction:column;overflow:hidden visible;flex:1}.collapse-btn{all:unset;padding-block:6px;margin-block-start:5px;padding-inline:var(--padding-start) var(--padding-end);inline-size:100%;display:flex;justify-items:flex-start;appearance:none;cursor:pointer;font-size:var(--icon-size)}.collapse-btn:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.collapse-btn:hover{background-color:var(--bg-color-hover)}.collapse-btn:active{background-color:var(--bg-color-selected)}.collapse-btn .nano-icon{transition:var(--nano-transition-x-fast) rotate ease-in-out;rotate:0deg}:host(.open) .collapse-btn .nano-icon{rotate:180deg}.visually-hidden{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.foot{margin-block:auto var(--padding-bottom)}";
 

package/dist/cjs/nano-nav-item.cjs.entry.js

@@ -7,7 +7,7 @@ var index = require('./index-DGttnXif.js');
 var dom = require('./dom-Dxk5vXYq.js');
 var tabbable = require('./tabbable-C-YwPfjA.js');
 var renderer = require('./renderer-jVpDRMfV.js');
-var slot = require('./slot-BUMYLmup.js');
+var slot = require('./slot-CM4lrtVE.js');
 var activeElement = require('./active-element-Vtuxns0n.js');
 
 /**

package/dist/cjs/{slot-BUMYLmup.js → slot-CM4lrtVE.js}

@@ -68,7 +68,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 ?? [])];
@@ -78,7 +79,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) {

package/dist/cjs/{table.worker-Ctqp7IJT.js → table.worker-D7SJpZlV.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var nanoDataTable_entry = require('./nano-data-table-B07AITiQ.js');
+var nanoDataTable_entry = require('./nano-data-table-CiPPql2J.js');
 require('./index-DGttnXif.js');
 require('./renderer-jVpDRMfV.js');
 require('./math-DIjJ3V87.js');

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -89,7 +89,7 @@ export class NanoBreadcrumb {
                     "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"
                         }
                     }

package/dist/collection/components/checkbox/checkbox-group.css

@@ -44,12 +44,14 @@
    * @prop --invalid-msg-color: The color of the error message. Defaults to var(--nano-color-danger-1100).
    * @prop --help-msg-color: The color of the help message. Defaults to var(--nano-color-base-1000).
    * @prop --more-font-size: The font size of the more information text (either help or error messaging). Defaults to var(--nano-font-size-2xs).
+    * @prop --gap: The gap between checkboxes. Defaults to var(--nano-spacing-md).
    */
   --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%;
 }
@@ -141,13 +143,13 @@
   padding: 0;
   display: flex;
   flex-direction: column;
-  gap: var(--nano-spacing-md);
+  gap: var(--gap);
 }
 :host(.types-segment) .cbgroup__cbs {
   flex-direction: row;
-  gap: 0;
+  --gap: 0;
 }
 :host(.types-tag) .cbgroup__cbs {
   flex-direction: row;
-  gap: var(--nano-spacing-sm);
+  --gap: var(--nano-spacing-sm);
 }

package/dist/collection/components/data-table/table.cell.js

@@ -49,7 +49,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())) : ('');
 }
 export const baseCellClasses = (colIndex, toString = false) => {
     const store = fetchStores();

package/dist/collection/components/data-table/table.utils.js

@@ -105,7 +105,7 @@ export function mergeCellProperties(rowIndex, colIndex, defaultProps) {
  */
 export function colheadFootRender(col) {
     const tpl = col?.columnTemplate;
-    return tpl ? (tpl(h, col)) : (h(Fragment, null, col.title));
+    return tpl ? tpl(h, col) : (h(Fragment, null, col.title));
 }
 export function headerPinClasses(type, vPinned, toString = false) {
     const classes = {

package/dist/collection/components/datalist/datalist.js

@@ -533,18 +533,18 @@ export 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 is() { return "nano-datalist"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/icon/pictogram/accessible-and-affordable.svg

@@ -0,0 +1,6 @@
+<svg width="48" height="40" viewBox="0 0 48 40">
+<path d="M46.8222 19.4092C44.5863 17.1568 40.9487 17.158 38.7128 19.4092L32.6099 25.5572L33.2351 26.1871L39.338 20.0391C41.2293 18.1352 44.3057 18.1339 46.1969 20.0391L46.7495 20.5957L32.8399 34.6086C29.9589 37.5109 26.1283 39.1092 22.0542 39.1092H0V40H22.0542C26.3645 40 30.4171 38.3091 33.4651 35.2385L48 20.5957L46.8222 19.4092Z" />
+<path d="M7.13331 25.6088C9.83358 24.0819 13.0562 23.8092 15.9698 24.8615C18.2433 25.6814 20.6199 26.097 23.0334 26.097H28.4426C29.8387 26.097 30.9739 27.2407 30.9739 28.647C30.9739 30.0528 29.8387 31.1964 28.4426 31.1964H16.6617V32.0872H28.4426C30.3258 32.0872 31.8582 30.5442 31.8582 28.647C31.8582 26.7499 30.3258 25.2062 28.4426 25.2062H23.0334C20.7216 25.2062 18.4456 24.808 16.2682 24.0229C13.1117 22.8842 9.62393 23.1793 6.70104 24.8323L5.60897 25.4485C3.89964 26.4145 1.95969 26.9251 0 26.9251V27.8159C2.11138 27.8159 4.20056 27.2655 6.04124 26.225L7.13331 25.6088Z" />
+<path d="M23.9497 20.4758C29.5538 20.4758 34.1126 15.8833 34.1126 10.2379C34.1126 4.5925 29.5538 0 23.9497 0C18.3457 0 13.7863 4.5925 13.7863 10.2379C13.7863 15.8833 18.3457 20.4758 23.9497 20.4758ZM23.9497 0.890794C29.066 0.890794 33.2284 5.08386 33.2284 10.2379C33.2284 15.392 29.066 19.585 23.9497 19.585C18.8329 19.585 14.6705 15.392 14.6705 10.2379C14.6705 5.08386 18.8329 0.890794 23.9497 0.890794Z" />
+<path d="M24.0823 14.5416C22.9773 14.5416 22.0782 13.6359 22.0782 12.5227H21.194C21.194 13.9747 22.2581 15.171 23.6402 15.3873V16.9996H24.5245V15.3873C25.9067 15.171 26.9713 13.9747 26.9713 12.5227C26.9713 10.9181 25.6751 9.61237 24.0823 9.61237C22.9773 9.61237 22.0782 8.70667 22.0782 7.59349C22.0782 6.47969 22.9773 5.57398 24.0823 5.57398C25.188 5.57398 26.087 6.47969 26.087 7.59349H26.9713C26.9713 6.14145 25.9067 4.94471 24.5245 4.72823V3.11405H23.6402V4.72823C22.2581 4.94471 21.194 6.14145 21.194 7.59349C21.194 9.19804 22.4895 10.5032 24.0823 10.5032C25.188 10.5032 26.087 11.4089 26.087 12.5227C26.087 13.6359 25.188 14.5416 24.0823 14.5416Z" />
+</svg>

package/dist/collection/components/icon/pictogram/faster-results.svg

@@ -0,0 +1,3 @@
+<svg width="43" height="44" viewBox="0 0 43 44">
+<path d="M43 22L21.0145 0V21.0283L0 0V44L21.0145 22.9717V44L43 22ZM0.972794 41.6499V2.35009L20.6098 22L0.972794 41.6499ZM21.9872 2.35009L41.6243 22L21.9872 41.6499V2.35009Z" />
+</svg>

package/dist/collection/components/icon/pictogram/richer-insights.svg

@@ -0,0 +1,9 @@
+<svg width="48" height="42" viewBox="0 0 48 42">
+<path d="M48 41.0615H0V42H48V41.0615Z" />
+<path d="M16.3525 5.45348H31.4498C30.9561 5.10562 30.4484 4.78655 29.9209 4.51493H17.881C17.3537 4.78655 16.8462 5.10562 16.3525 5.45348Z" />
+<path d="M12.2811 10.0814C12.1206 10.3889 11.9792 10.7032 11.845 11.02H35.9692C35.8338 10.7014 35.6847 10.3886 35.5239 10.0814H12.2811Z" />
+<path d="M10.8257 16.5865H36.983C36.9884 16.4306 37.0058 16.2768 37.0058 16.1198C37.0058 15.9611 36.9884 15.8057 36.9828 15.6479H10.8259C10.8147 15.961 10.8146 16.2735 10.8257 16.5865Z" />
+<path d="M12.2788 22.153H35.5262C35.6869 21.8457 35.8363 21.5332 35.9715 21.2145H11.8427C11.9767 21.5312 12.1185 21.8456 12.2788 22.153Z" />
+<path d="M17.8676 27.7202H29.9352C30.4642 27.4456 30.9716 27.129 31.4619 26.7816H16.3407C16.831 27.129 17.3383 27.4456 17.8676 27.7202Z" />
+<path d="M48 2.90879H33.1773C27.6267 -0.969598 20.1764 -0.969598 14.6258 2.90879H0V3.84734H13.4081C13.0844 4.12289 12.7616 4.40039 12.4558 4.70539C9.42602 7.72721 7.86699 11.6589 7.74623 15.6263H0V16.5649H7.74394C7.85321 20.5488 9.41371 24.5002 12.4558 27.5343C12.7444 27.8221 13.0499 28.0824 13.3543 28.3439H0V29.2824H14.5599C17.3498 31.2528 20.6214 32.2539 23.9016 32.2539C27.1735 32.2539 30.4373 31.2581 33.2224 29.2977L42.4734 38.5233C42.9833 39.0319 43.6527 39.2858 44.3221 39.2858C44.9922 39.2858 45.6616 39.0319 46.1716 38.5233L46.3665 38.3289C47.3857 37.3125 47.3857 35.6579 46.3665 34.6415L40.9931 29.2824H48V28.3439H40.052L37.1154 25.4152C38.9917 22.764 39.9734 19.6783 40.0588 16.5649H48V15.6263H40.0564C39.9358 11.6589 38.3768 7.72721 35.3473 4.70539C35.0415 4.40039 34.7188 4.12289 34.395 3.84734H48V2.90879ZM45.701 35.3051C46.0173 35.6206 46.1913 36.0395 46.1913 36.4852C46.1913 36.9309 46.0173 37.3498 45.701 37.6653L45.5061 37.8596C44.8734 38.4893 43.7715 38.4906 43.1388 37.8596L33.9898 28.7356C34.458 28.3627 34.9138 27.9666 35.3473 27.5343C35.7808 27.102 36.1779 26.6474 36.5519 26.1805L45.701 35.3051ZM34.6818 26.8706C28.7371 32.7984 19.0647 32.7984 13.1213 26.8706C10.2415 23.9987 8.65586 20.181 8.65586 16.1198C8.65586 12.0587 10.2415 8.24099 13.1213 5.36905C16.0936 2.40548 19.9973 0.923701 23.9016 0.923701C27.8058 0.923701 31.7095 2.40548 34.6818 5.36905C40.6246 11.2968 40.6252 20.9428 34.6818 26.8706Z" />
+</svg>

package/dist/collection/components/input-otp/input-otp.js

@@ -116,6 +116,10 @@ export 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.
      */
@@ -136,6 +140,16 @@ export 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();
@@ -676,31 +690,29 @@ export 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 (h(Host, { key: '9b64211ca6a227c5f905a76a50ca3a44eff0a96b', class: {
+        return (h(Host, { key: '69c1b3c4a4cae21665bb7e3646a27a89f8d0a73b', class: {
                 'has-focus': hasFocus,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
                 'nano-invalid': invalid,
                 'nano-valid': valid,
-            } }, h("div", { key: 'cc7fb4411962398f143d2dd17c40448111956e80', class: "input-otp-container" }, h("div", { key: '4408d19628b34a25cb3bc39a0df1dd859700399f', class: "input-otp-group", role: "group", "aria-label": "One-time password input" }, Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("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) && (h("div", { class: "input-otp-separator" })))))), this.showValidity && (h("div", { key: 'cc45bac1e7f7675b467bae6153d9ffa586ec6655', class: {
+            } }, h("div", { key: '9fcd9882d552cde88adfa7578e556155651bbb4d', class: "input-otp-container" }, h("div", { key: '3e2c1a83282c08c1ccef81c4f13a895f1efeec13', class: "input-otp-group", role: "group", "aria-label": "One-time password input" }, Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("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) && (h("div", { class: "input-otp-separator" })))))), this.showValidity && (h("div", { key: 'b5d9d9f3023cca6fcf9d8a394287de2333eeff54', class: {
                 'input-otp-icon': true,
                 'input-otp-icon--valid': valid,
                 'input-otp-icon--invalid': invalid,
-            }, part: "validity-icon" }, h("slot", { key: '84bd77959eaa572898cd48525512d93b6406b6b6', name: "validity-icon" }, h("nano-icon", { key: 'c903d61964571e006aca28afea7a911f47527d43', hidden: !valid, name: "light/circle-check", class: "input-otp-valid-icon", "aria-label": "Valid input" }))))), this.slotCtrl.has('[default]') && (h("div", { key: 'ddbf6145b86b48ad942227ec15ab419612e5ef41', class: "input-otp-description" }, h("slot", { key: '56862b93b96aee7ecad1b36472666f94f2021a5f' })))));
+            }, part: "validity-icon" }, h("slot", { key: 'd4a3123b713487f579a503ea1158e73b97a35198', name: "validity-icon" }, h("nano-icon", { key: '2d7886aadaaa786f3594ace3d4fa3d2ebbdc30c3', hidden: !valid, name: "light/circle-check", class: "input-otp-valid-icon", "aria-label": "Valid input" }))))), this.slotCtrl.has('[default]') && (h("div", { key: '32b6883425e8f62bda344ad6f92ff63a5fef98f4', class: "input-otp-description" }, h("slot", { key: '81b5c65f7c8bab2f8bf371c03bc5a2ae455b6c3f' })))));
     }
     static get is() { return "nano-input-otp"; }
     static get encapsulation() { return "scoped"; }
@@ -989,6 +1001,21 @@ export class InputOTP {
                         }
                     }
                 }
+            }, {
+                "method": "nanoClear",
+                "name": "nanoClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input group is cleared."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }, {
                 "method": "nanoFocus",
                 "name": "nanoFocus",
@@ -1036,6 +1063,23 @@ export class InputOTP {
                             "text": "index - The index of the input box to focus (0-based).\nIf provided and the input box has a value, the input box at that index will be focused.\nOtherwise, the first empty input box or the last input if all are filled will be focused."
                         }]
                 }
+            },
+            "clear": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Resets the input boxes to empty values.",
+                    "tags": []
+                }
             }
         };
     }

package/dist/collection/utils/slot.js

@@ -84,7 +84,8 @@ export 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 ?? [])];
@@ -94,7 +95,7 @@ export 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) {

package/dist/components/datalist.js

@@ -529,18 +529,18 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
         }
     }
     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"],

package/dist/components/nano-checkbox-group.js

@@ -6,7 +6,7 @@ import { g as getClassMap } from './theme.js';
 import { d as debounce } from './throttle.js';
 import { t as transformTag, h } from './renderer.js';
 
-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)}";
 
 const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup extends HTMLElement {
     constructor() {

package/dist/components/nano-data-table.js

@@ -367,7 +367,7 @@ function mergeCellProperties(rowIndex, colIndex, defaultProps) {
  */
 function colheadFootRender(col) {
     const tpl = col?.columnTemplate;
-    return tpl ? (tpl(h, col)) : (h(Fragment, null, col.title));
+    return tpl ? tpl(h, col) : (h(Fragment, null, col.title));
 }
 function headerPinClasses(type, vPinned, toString = false) {
     const classes = {
@@ -504,7 +504,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$1(Fragment, null, model.cellModel?.toString())) : ('');
+    return tplResult ? tplResult : model.cellModel !== undefined && model.cellModel !== null ? (h$1(Fragment, null, model.cellModel?.toString())) : ('');
 }
 const baseCellClasses = (colIndex, toString = false) => {
     const store = fetchStores();

package/dist/components/nano-input-otp.js

@@ -15,6 +15,7 @@ const InputOTP = /*@__PURE__*/ proxyCustomElement(class InputOTP extends HTMLEle
         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 = [];
@@ -118,6 +119,10 @@ const InputOTP = /*@__PURE__*/ proxyCustomElement(class InputOTP extends HTMLEle
      * Emitted when the input group loses focus.
      */
     nanoBlur;
+    /**
+     * Emitted when the input group is cleared.
+     */
+    nanoClear;
     /**
      * Emitted when the input group has focus.
      */
@@ -138,6 +143,16 @@ const InputOTP = /*@__PURE__*/ proxyCustomElement(class InputOTP extends HTMLEle
             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();
@@ -678,31 +693,29 @@ const InputOTP = /*@__PURE__*/ proxyCustomElement(class InputOTP extends HTMLEle
      * - `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 (h(Host, { key: '9b64211ca6a227c5f905a76a50ca3a44eff0a96b', class: {
+        return (h(Host, { key: '69c1b3c4a4cae21665bb7e3646a27a89f8d0a73b', class: {
                 'has-focus': hasFocus,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
                 'nano-invalid': invalid,
                 'nano-valid': valid,
-            } }, h("div", { key: 'cc7fb4411962398f143d2dd17c40448111956e80', class: "input-otp-container" }, h("div", { key: '4408d19628b34a25cb3bc39a0df1dd859700399f', class: "input-otp-group", role: "group", "aria-label": "One-time password input" }, Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("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) && (h("div", { class: "input-otp-separator" })))))), this.showValidity && (h("div", { key: 'cc45bac1e7f7675b467bae6153d9ffa586ec6655', class: {
+            } }, h("div", { key: '9fcd9882d552cde88adfa7578e556155651bbb4d', class: "input-otp-container" }, h("div", { key: '3e2c1a83282c08c1ccef81c4f13a895f1efeec13', class: "input-otp-group", role: "group", "aria-label": "One-time password input" }, Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("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) && (h("div", { class: "input-otp-separator" })))))), this.showValidity && (h("div", { key: 'b5d9d9f3023cca6fcf9d8a394287de2333eeff54', class: {
                 'input-otp-icon': true,
                 'input-otp-icon--valid': valid,
                 'input-otp-icon--invalid': invalid,
-            }, part: "validity-icon" }, h("slot", { key: '84bd77959eaa572898cd48525512d93b6406b6b6', name: "validity-icon" }, h("nano-icon", { key: 'c903d61964571e006aca28afea7a911f47527d43', hidden: !valid, name: "light/circle-check", class: "input-otp-valid-icon", "aria-label": "Valid input" }))))), this.slotCtrl.has('[default]') && (h("div", { key: 'ddbf6145b86b48ad942227ec15ab419612e5ef41', class: "input-otp-description" }, h("slot", { key: '56862b93b96aee7ecad1b36472666f94f2021a5f' })))));
+            }, part: "validity-icon" }, h("slot", { key: 'd4a3123b713487f579a503ea1158e73b97a35198', name: "validity-icon" }, h("nano-icon", { key: '2d7886aadaaa786f3594ace3d4fa3d2ebbdc30c3', hidden: !valid, name: "light/circle-check", class: "input-otp-valid-icon", "aria-label": "Valid input" }))))), this.slotCtrl.has('[default]') && (h("div", { key: '32b6883425e8f62bda344ad6f92ff63a5fef98f4', class: "input-otp-description" }, h("slot", { key: '81b5c65f7c8bab2f8bf371c03bc5a2ae455b6c3f' })))));
     }
     static get watchers() { return {
         "value": ["valueChanged"]
@@ -723,7 +736,8 @@ const InputOTP = /*@__PURE__*/ proxyCustomElement(class InputOTP extends HTMLEle
         "previousInputValues": [32],
         "invalid": [32],
         "valid": [32],
-        "setFocus": [64]
+        "setFocus": [64],
+        "clear": [64]
     }, undefined, {
         "value": ["valueChanged"]
     }]);