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

package/dist/cjs/{tabbable-D33Xh_1b.js → tabbable-CQ4-mXv0.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-require('./index-BlC8UV0T.js');
+require('./index-trCnMfo7.js');
 
 // Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable
 function isTabbable(el, skipVisible = false) {

package/dist/cjs/{table.worker-L6KfPMgT.js → table.worker-Dto6wn52.js}

@@ -3,14 +3,14 @@
  */
 'use strict';
 
-var nanoDataTable_entry = require('./nano-data-table-ed7Lg_CN.js');
-require('./index-BlC8UV0T.js');
-require('./renderer-BjTjwe8d.js');
+var nanoDataTable_entry = require('./nano-data-table-zUnFb2XO.js');
+require('./index-trCnMfo7.js');
+require('./renderer-W7BRtd3i.js');
 require('./math-DIjJ3V87.js');
 require('./throttle-CrRDOkln.js');
-require('./scroll-CtgMHKrt.js');
-require('./dom-B0-coRX2.js');
-require('./index-ZOnWVzxx.js');
+require('./scroll-33Y1FRj4.js');
+require('./dom-DM4lO0bS.js');
+require('./index-DMCNW34o.js');
 
 const workerName = 'table.worker';
 const workerMsgId = 'stencil.table.worker';

package/dist/collection/collection-manifest.json

@@ -29,6 +29,7 @@
     "components/dialog/dialog.js",
     "components/drawer/drawer.js",
     "components/nav-item/nav-item.js",
+    "components/feature-box/feature-box.js",
     "components/field-validator/field-validator.js",
     "components/file-upload/file-upload.js",
     "components/footer/footer.js",
@@ -66,7 +67,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.35.1-dev.1751297804.fe5d130",
+    "version": "4.35.3",
     "typescriptVersion": "5.5.4"
   },
   "collections": [],

package/dist/collection/components/algolia/algolia.js

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

package/dist/collection/components/animation/animation.js

@@ -164,7 +164,7 @@ export class NanoAnimation {
         this.animation?.finish();
     }
     render() {
-        return (h(Host, { key: 'a71dc9c9b6505aa5ad8cdaefb32cadc0ca37fbb5', class: "nano-animation" }, h("slot", { key: 'a01cc1638ec3b57d56deb0f91d2421be4874d212', ref: (slot) => {
+        return (h(Host, { key: '566f725817c91b577fc31a6eea9d5baecf3b481e', class: "nano-animation" }, h("slot", { key: '968e1c43d7e3a73d0662f8595ad08c3fa1a44044', ref: (slot) => {
                 this.defaultSlot = slot;
             }, onSlotchange: this.handleSlotChange })));
     }

package/dist/collection/components/breadcrumb/breadcrumb.css

@@ -51,19 +51,28 @@
   --text-color-disabled: var(--nano-color-neutral-1000);
   --border-color: var(--nano-color-neutral-400);
   --trigger-bg-color: var(--nano-color-base-0);
-  container-type: inline-size;
   display: block;
 }
 
 .breadcrumbs {
+  inline-size: fit-content;
+}
+
+nano-menu.breadcrumbs {
   inline-size: 100%;
-  max-inline-size: 1346px;
 }
 
-ol,
-nano-menu::part(base) {
+.breadcrumbs-hidden {
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+  height: 0;
+  overflow: hidden;
+}
+
+ol {
   list-style: none;
-  padding: 0;
+  padding: var(--nano-spacing-l3) 0;
   margin: 0;
   display: flex;
   flex-direction: row;
@@ -112,14 +121,10 @@ a.return.link {
 
 .breadcrumbs__dropdown {
   inline-size: 100%;
-  display: none;
 }
 .breadcrumbs__dropdown[open]::part(trigger) {
   box-shadow: var(--nano-shadow-l1);
 }
-.breadcrumbs__dropdown[open]::part(panel) {
-  box-shadow: var(--nano-shadow-l1);
-}
 
 .trigger-button {
   inline-size: 100%;
@@ -155,23 +160,14 @@ a.return.link {
   transform: rotate(180deg);
 }
 
-@container (width < 768px) {
-  .main {
-    display: none !important;
-  }
-  .breadcrumbs__dropdown {
-    display: block !important;
-  }
-  nano-menu::part(base) {
-    flex-direction: column !important;
-  }
-  nano-nav-item::after {
-    display: none !important;
-  }
-  .trigger-button_label::after {
-    display: inline-block !important;
-  }
-  .return-only {
-    padding: var(--nano-spacing-l3) var(--nano-spacing-l2) !important;
-  }
+nano-nav-item::after {
+  display: none !important;
+}
+
+.trigger-button_label::after {
+  display: inline-block !important;
+}
+
+.return-only {
+  padding: var(--nano-spacing-l3) var(--nano-spacing-l2) !important;
 }

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

@@ -14,24 +14,56 @@ export class NanoBreadcrumb {
     /** Array of breadcrumb items to render */
     breadcrumbs = [];
     isOpen = false;
-    componentWillLoad() {
-        // add global styles to shadow DOM
-        if (Build.isBrowser)
+    isOverflowing = false;
+    mainRef;
+    componentDidLoad() {
+        if (Build.isBrowser) {
+            this.checkOverflow();
             addGlobalStylesheetToShadow(this.el?.shadowRoot);
+        }
+    }
+    componentDidUpdate() {
+        if (Build.isBrowser) {
+            this.checkOverflow();
+        }
+    }
+    connectedCallback() {
+        if (Build.isBrowser) {
+            window.addEventListener('resize', this.checkOverflow);
+        }
+    }
+    disconnectedCallback() {
+        if (Build.isBrowser) {
+            window.removeEventListener('resize', this.checkOverflow);
+        }
     }
+    checkOverflow = () => {
+        if (!this.mainRef)
+            return;
+        const containerWidth = this.el.clientWidth;
+        const contentWidth = this.mainRef.scrollWidth;
+        const shouldOverflow = contentWidth > containerWidth * 0.9;
+        if (this.isOverflowing !== shouldOverflow) {
+            this.isOverflowing = shouldOverflow;
+            if (this.isOverflowing)
+                this.isOpen = false; // Reset dropdown state when overflow occurs
+        }
+    };
     render() {
         const returnBreadcrumb = this.breadcrumbs?.find((breadcrumb) => breadcrumb.return);
-        // if we have a return breadcrumb, we only want to show that
         if (returnBreadcrumb) {
             return (h("nav", { "aria-label": "Breadcrumb", class: "breadcrumbs" }, h(BreadcrumbList, { breadcrumbs: [returnBreadcrumb], className: "return-only" })));
         }
         const parentBreadcrumb = this.breadcrumbs?.length
             ? this.breadcrumbs.at(-1)
             : null;
-        return (h("div", { class: "breadcrumbs" }, h("nav", { "aria-label": "Breadcrumb" }, h(BreadcrumbList, { breadcrumbs: this.breadcrumbs, className: "main" })), h("nano-dropdown", { dialogTitle: `${parentBreadcrumb?.label} Breadcrumb`, onNanoShow: () => (this.isOpen = true), onNanoHide: () => (this.isOpen = false), containingElement: this.el, class: "breadcrumbs__dropdown" }, h("button", { class: "trigger-button", slot: "trigger" }, h("span", null, this.breadcrumbs && this.breadcrumbs.length > 1 && (h("span", { class: "trigger-button_label" }, "..")), h("span", { class: "trigger-button_label" }, parentBreadcrumb?.label)), h("nano-icon", { class: {
+        return (h("div", { class: "breadcrumbs" }, h("nav", { "aria-label": "Breadcrumb" }, h(BreadcrumbList, { breadcrumbs: this.breadcrumbs, className: `main${this.isOverflowing ? ' breadcrumbs-hidden' : ''}`, mainRef: (el) => (this.mainRef = el) })), this.isOverflowing && (h("nano-dropdown", { dialogTitle: `${parentBreadcrumb?.label} Breadcrumb`, onNanoShow: () => (this.isOpen = true), onNanoHide: () => (this.isOpen = false), containingElement: this.el, class: "breadcrumbs__dropdown" }, h("button", { class: "trigger-button", slot: "trigger" }, h("span", null, this.breadcrumbs && this.breadcrumbs.length > 1 && (h("span", { class: "trigger-button_label" }, "..")), h("span", { class: "trigger-button_label" }, parentBreadcrumb?.label)), h("nano-icon", { class: {
                 'trigger-icon': true,
                 'trigger-icon--open': this.isOpen,
-            }, name: "light/chevron-down" })), h("nav", null, h("nano-menu", { class: "breadcrumbs small", label: "Breadcrumbs" }, this.breadcrumbs?.slice(0, -1)?.map((breadcrumb, index) => (h("nano-nav-item", { key: index, href: breadcrumb.href, class: { return: breadcrumb.return, link: !!breadcrumb.href }, disabled: !breadcrumb.href }, breadcrumb.label))))))));
+            }, name: "light/chevron-down" })), h("nav", null, h("nano-menu", { class: "breadcrumbs small", label: "Breadcrumbs" }, this.breadcrumbs?.slice(0, -1)?.map((breadcrumb, index) => (h("nano-nav-item", { key: index, href: breadcrumb.href, class: {
+                return: breadcrumb.return,
+                link: !!breadcrumb.href,
+            }, disabled: !breadcrumb.href }, breadcrumb.label)))))))));
     }
     static get is() { return "nano-breadcrumb"; }
     static get encapsulation() { return "shadow"; }
@@ -76,9 +108,10 @@ export class NanoBreadcrumb {
     }
     static get states() {
         return {
-            "isOpen": {}
+            "isOpen": {},
+            "isOverflowing": {}
         };
     }
     static get elementRef() { return "el"; }
 }
-const BreadcrumbList = ({ breadcrumbs, className, }) => (h("ol", { class: `breadcrumbs ${className}` }, breadcrumbs?.map((breadcrumb, index) => (h("li", null, h("a", { key: index, href: breadcrumb.href, class: { return: breadcrumb.return, link: !!breadcrumb.href } }, breadcrumb.return && (h("nano-icon", { name: "light/chevron-left", size: "small", class: "breadcrumb-icon" })), breadcrumb.label))))));
+const BreadcrumbList = ({ breadcrumbs, className, mainRef, }) => (h("ol", { class: `breadcrumbs ${className}`, ref: mainRef }, breadcrumbs?.map((breadcrumb, index) => (h("li", null, h("a", { key: index, href: breadcrumb.href, class: { return: breadcrumb.return, link: !!breadcrumb.href } }, breadcrumb.return && (h("nano-icon", { name: "light/chevron-left", size: "small", class: "breadcrumb-icon" })), breadcrumb.label))))));

package/dist/collection/components/card/card.js

@@ -6,6 +6,7 @@
  * @type CSS Only
  *
  * @slot img - The image of the card. Appears first.
+ * @slot category - The category tag on a card. Appears on the bottom right corner of a card image.
  * @slot title - The title of the card. Appears second.
  * @slot content - The main content of the card. Appears third.
  * @slot footer - The footer of the card. Appears last.

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

@@ -56,7 +56,8 @@ export class CheckboxGroup {
      * A collective label for children controls
      */
     get legend() {
-        if (!this._legend.endsWith('*') && this.nativeCbs?.find((cb) => !!cb.required)) {
+        if (!this._legend.endsWith('*') &&
+            this.nativeCbs?.find((cb) => !!cb.required)) {
             return this._legend + ' *';
         }
         return this._legend;
@@ -101,18 +102,14 @@ export class CheckboxGroup {
      * @returns `{ isValid: boolean, errorMessage: string }`
      */
     async reportValidity(validateFirst) {
-        return new Promise((resolve) => {
-            if (validateFirst) {
-                this.customValidate();
-                this.showInlineValidation();
-            }
-            setTimeout(() => {
-                resolve({
-                    isValid: !this.invalid,
-                    errorMessage: this.errorMessage,
-                });
-            }, 50);
-        });
+        if (validateFirst) {
+            this.customValidate();
+            this.showInlineValidation();
+        }
+        return {
+            isValid: !this.invalid,
+            errorMessage: this.errorMessage,
+        };
     }
     /**
      * Invalidate the field and show a custom error message.
@@ -323,7 +320,7 @@ export class CheckboxGroup {
     // stencil hooks
     componentWillLoad() {
         this.handleValueChange = this.handleValueChange.bind(this);
-        this.handleValueChange = debounce(this.handleValueChange, 1);
+        // this.handleValueChange = debounce(this.handleValueChange, 1);
         this.showInlineValidation = debounce(this.showInlineValidation, 10);
         this.handleDisabledChange();
         this.handleSlotChange();
@@ -346,14 +343,14 @@ export class CheckboxGroup {
     render() {
         const legendId = this.grpId + '-lbl';
         const moreId = this.showInlineError || this.hasHelperSlot ? this.grpId + '-more' : '';
-        return (h(Host, { key: 'b6d81d374260c8cb97dfc1557238c20945b44632', class: this.checkboxTypes }, h("fieldset", { key: 'fa058ccca23a91b369c659ff442585de43a4333d', disabled: this.disabled, class: {
+        return (h(Host, { key: '15fc5c86bc5db9189119af9c59b5b406fe5b6e22', class: this.checkboxTypes }, h("fieldset", { key: 'b3d7acc9c452fefca51966fa2a88d755f338b206', disabled: this.disabled, class: {
                 cbgroup: true,
                 'has-error': this.showErrorMsg && !!this.errorMessage,
                 'has-helper': this.hasHelperSlot,
-            } }, h("legend", { key: '429737fad96eef6af343c5e978a4642a599ea4a6', id: legendId, class: {
+            } }, h("legend", { key: 'd4aef86c845f730e2a11696a4347da6c1e7771d8', id: legendId, class: {
                 cbgroup__legend: true,
                 'visually-hide': this.hideLegend,
-            } }, h("slot", { key: 'd592da5791f7e830c57aec7c62c01b32326b5a34', name: "legend" }, this.legend)), h("div", { key: '0bb0a2206a13bb9f773857b4ac897bfffb75a741', class: "cbgroup__cbs", role: "group", "aria-labelledby": legendId + ' ' + moreId }, h("slot", { key: '23f668b5fa4a1d23f39ea49998ae75767df15624' })), (this.showInlineError || this.hasHelperSlot) && (h("div", { key: '1e15d0bb57352fb8cd7a3a746dd5adb8bb979819', class: "cbgroup__more", id: moreId }, this.showInlineError ? (h("div", { class: "cbgroup__error" }, this.errorMessage)) : (''), h("div", { key: 'e23596644945fafd2802bf1ac8958a314a076bc8', class: "cbgroup__help" }, h("slot", { key: 'd6df38d9ceaa915364a20dc29d8a1457b071c6ef', name: "helper" })))))));
+            } }, h("slot", { key: 'a31964559fc797ee445b9e38633b7cc2c3d30286', name: "legend" }, this.legend)), h("div", { key: 'bcfad3c07ebcefc2e5cc0bb7ac5c23712ae76284', class: "cbgroup__cbs", role: "group", "aria-labelledby": legendId + ' ' + moreId }, h("slot", { key: '7222f411ed5c38a520aff17452fe4da6e84c80d3' })), (this.showInlineError || this.hasHelperSlot) && (h("div", { key: '6a31f268047242b78861057902d06ecaf4e7e0c1', class: "cbgroup__more", id: moreId }, this.showInlineError ? (h("div", { class: "cbgroup__error" }, this.errorMessage)) : (''), h("div", { key: '2b9f59ce901eddbe7b40cf13bdf0276b4522dc6e', class: "cbgroup__help" }, h("slot", { key: '92df785a50cfe52cafe741747e65b56d2a451211', name: "helper" })))))));
     }
     static get is() { return "nano-checkbox-group"; }
     static get encapsulation() { return "scoped"; }

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

@@ -831,7 +831,7 @@ export class NanoDataTable {
             h(TableColHead, { column: colModel, headRenderer: this.headRender, onColumnSortClick: this.sortStart, defaults: {
                     sortable: this.defaultSort,
                 } }),
-        ]))), this._loading && !this.blocks.length && (h("tbody", { class: `${CSSNAMESPACE}__active ${CSSNAMESPACE}__loading` }, [...Array(this.placeholderSize).keys()].map((rowIndex) => (h("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: () => h("span", { class: "n-loader-skeleton" }, h("span", null, "Content loading")) })))))))), h("tr", { hidden: !!this._loading || !!this.blocks.length }, h("th", { class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, h("div", { class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, h("slot", { name: "no-results" }, "No results found")))), this.blocks.map((block, blockIndex) => (h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
+        ]))), this._loading && !this.blocks.length && (h("tbody", { class: `${CSSNAMESPACE}__active ${CSSNAMESPACE}__loading` }, [...Array(this.placeholderSize).keys()].map((rowIndex) => (h("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: () => (h("span", { class: "n-loader-skeleton" }, h("span", null, "Content loading"))) })))))))), h("tr", { hidden: !!this._loading || !!this.blocks.length }, h("th", { class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, h("div", { class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, h("slot", { name: "no-results" }, "No results found")))), this.blocks.map((block, blockIndex) => (h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
                 this.blockElements.push(tb);
             }, class: {
                 [`${CSSNAMESPACE}__inactive`]: !this.activeBlocks.includes(blockIndex),

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

@@ -511,7 +511,7 @@ export class DataList {
     }
     componentDidRender() {
         setTimeout(() => {
-            if (!this.connectedInput)
+            if (!this.connectedInput && this.host.isConnected)
                 console.warn('no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop', this.host);
         }, 500);
     }
@@ -525,18 +525,18 @@ export class DataList {
         }
     }
     render() {
-        return (h(Host, { key: 'b9c67e5dfc3c26c4eac219d9bdc9081aa79d7122', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
+        return (h(Host, { key: '2b8f7500f1ed990dc79bda02a6980a018697d508', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
                 ? 'Select options from the list below'
-                : undefined }, h("nano-dropdown", { key: '29a0de977f7be1a39c5c869a5ab366bb64711d9e', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
+                : undefined }, h("nano-dropdown", { key: '7beb913e00bb595dd36ad107edfdac05ab902efd', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
                 dlist__dropdown: true,
                 'dlist--isfiltered': this.isFiltered,
-            }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '86769c73825853c557ed7a1dfb0f86898ce6504f', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
+            }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '125572d377ad74a2b6d3e0ae36f708075517d60f', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
                 dlist__menu: true,
                 'dlist__menu--open': this.dropwdownOpen,
-            }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: 'f5ea0623591a368f38ce3c1e41ef431c4a9f5960', name: "list-top" }), h("slot", { key: '98804885ffb99528138867d2747af3acef3f64f7' }), h("slot", { key: '1341dc10f96570c04613153cf939aaf7dc21f0d3', name: "internal-opts" }), h("slot", { key: '84d86a667a69cd571f7b96dc29d1ddd58c3d482c', name: "list-bottom" })), h("nano-menu", { key: '9b09caa70bd106eb9e64c714072c0b88275f34c6', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
+            }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '63f4fc2409d3e2ef1bc38658f4d0e890326ddb7e', name: "list-top" }), h("slot", { key: '0bd4aa53d535ac07a779f9f44dae01801c5ddb43' }), h("slot", { key: 'ee39e492165395226a04b49dbe4ba0d6d3a70172', name: "internal-opts" }), h("slot", { key: 'd7af12aa6cf517a89b1718b74c48235753970664', name: "list-bottom" })), h("nano-menu", { key: 'bb1f661fc618cacc2f81aaeca1d03c96c1d1c557', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
                 dlist__menu: true,
                 'dlist__menu--open': this.dropwdownOpen,
-            } }, h("slot", { key: '58187330291198ff00571570e2b6b6bfdc79c905', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '72ea39405f558d10de86a14704ed48e869f01426', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
+            } }, h("slot", { key: 'c343a887d35603ba194a4774e2ca66e7e299ed2c', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '2810cc360410aae1263442e29aca34f0cd39c9b6', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
     }
     static get is() { return "nano-datalist"; }
     static get encapsulation() { return "shadow"; }

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

@@ -12,8 +12,7 @@ const DateRegxps = {
 };
 let inputIds = 0;
 /**
- * The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field.
- * It has specific options for localisation, date formatting and validation.
+ * Enables date selection and input in a form.
  *
  * @version 1.0.0
  * @status deprecated
@@ -412,10 +411,10 @@ export class DateInput {
             this.dropDownConfig.tetherTo = this.trigger;
         const valueDate = parseISODate(this.value);
         const hasHelperSlot = !!this.host.querySelector('[slot="helper"]');
-        return (h(Host, { key: 'e5387f4d921d8ec1dd46a2e80bb68b98c6d050e0', class: { ...createColorClasses(this.color), 'date-input': true } }, h("div", { key: 'ee8bbe0b2c0923cc229e639179d0c7f4819cc665', class: "date-field" }, h("nano-input", { key: '0c2062d026b56c893adba3ecc4ad545408083cd6', class: "date-field__input", slot: "trigger", required: this.required || undefined, showInlineError: this.showInlineError, validateOn: this.validateOn, placeholder: this.placeholder !== 'false' ? this.placeholder : undefined, pattern: this.pattern, label: this.label, disabled: this.disabled || undefined, color: this.color || undefined, autofocus: this.autofocus || undefined, clearable: this.clearable || undefined, onNanoChange: this.onInputChange, onNanoInput: this.onInputKey, onNanoValidate: this.onInputValidate, name: "", form: this.form || undefined, size: this.size || undefined, readonly: this.readonly, value: this.inputValue, ref: (input) => (this.input = input), floatLabel: this.floatLabel, hideLabel: this.hideLabel, inputmode: 'numeric', part: "input" }, h("slot", { key: '2faabea02873035c747b023251aa8ecd38b5eec8', name: "start", slot: "start" }), h("slot", { key: '7459e5f0c001018166fc25b40f0ebf8377d50269', name: "label", slot: "label" }), h("slot", { key: '2657702bbe0bbe221f092631c2f41e7cc296e301', name: "end", slot: "end" }), this.picker && [
-            h("button", { key: 'fa62df397158bb262bf47ae9d3607424f2b65729', slot: "end", class: "date-field__open", type: "button", onKeyDown: this.onTriggerKey, onClick: this.onTriggerClick, ref: (trigger) => (this.trigger = trigger), disabled: this.disabled || this.readonly }, h("nano-icon", { key: '9cb9ea18875aabffda4ffc384a5bee81a5337420', name: "light/calendar-days" })),
-            h("nano-dropdown", { key: 'c813474e3ab6b19d53cb090e72c47ff6e850f739', slot: "end", onNanoHide: this.onDropdownHide, dialogTitle: "Choose a date", class: "date-field__dropdown", ref: (dropdown) => (this.dropdown = dropdown), ...this.dropDownConfig, part: "dropdown" }, h("div", { key: 'ebc1a186d359f6d3b33a94ebf20494cfa2d90bda' }, h("div", { key: '59d1112f354d77f14240ca956ddf09a89940bb45', class: "date-field__close-bar" }, h("button", { key: 'd18615f69c49954bce85c962e99fee6c16e67451', class: "date-field__close", type: "button", onMouseDown: this.onCloseClick, onKeyDown: this.onCloseKeyDown, ref: (pickerClose) => (this.pickerCloseBtn = pickerClose) }, h("nano-icon", { key: 'ece83cc846678beed11e322c9b52afc56b46356f', name: "light/xmark" }), h("span", { key: '60a6b3c6e95972f8307dd7d0f51bfe3d48e4da00', class: "vhidden" }, "Close window"))), h("nano-date-picker", { key: 'c5efd935b37738d00def7234e7bee1a60710ea75', isDateDisabled: this.isDateDisabled, onNanoDatePicked: this.onDatePicked, min: this.min || undefined, max: this.max || undefined, "is-modal": true, ref: (picker) => (this.pickerEle = picker), localization: this.localization, selectedDate: this.value || this.initialPickerDate, firstDayOfWeek: this.firstDayOfWeek, color: this.color || undefined, part: "date-picker" }))),
-        ], (hasHelperSlot || this.helperText || this.showInlineError) && (h("span", { key: 'c2aff5297c406107f98f07d6f3fd65fcbacbefc3', slot: "helper" }, h("span", { key: 'e429219f14b8b68e63682f83864ff8ba694c0ec1', class: { vhidden: !!this.value.length } }, h("slot", { key: '2a2f1fab799e5826dfd41070959a48962d3bc754', name: "helper" })), this.helperText && !!valueDate && (h("span", { key: 'd09144b4ef71b33dcecef9d50cb635e4d336c45d' }, valueDate.toLocaleDateString(this.locale, this.helperTextFormat)))))), h("input", { key: '4d7826a5502e8574fca54bd09192be3980b0a95f', type: "hidden", value: this.value, name: this.name }))));
+        return (h(Host, { key: 'd584003b7188229e35c59048e46b0c2be1068987', class: { ...createColorClasses(this.color), 'date-input': true } }, h("div", { key: '88ef9423db0ed1e11b5ccad2c75a0c9d0f9b9d29', class: "date-field" }, h("nano-input", { key: 'a4d5c368da0bb9b296563e09760d8c450360d2d3', class: "date-field__input", slot: "trigger", required: this.required || undefined, showInlineError: this.showInlineError, validateOn: this.validateOn, placeholder: this.placeholder !== 'false' ? this.placeholder : undefined, pattern: this.pattern, label: this.label, disabled: this.disabled || undefined, color: this.color || undefined, autofocus: this.autofocus || undefined, clearable: this.clearable || undefined, onNanoChange: this.onInputChange, onNanoInput: this.onInputKey, onNanoValidate: this.onInputValidate, name: "", form: this.form || undefined, size: this.size || undefined, readonly: this.readonly, value: this.inputValue, ref: (input) => (this.input = input), floatLabel: this.floatLabel, hideLabel: this.hideLabel, inputmode: 'numeric', part: "input" }, h("slot", { key: '8852fd0a14ed85773706f6313be4af121c33f212', name: "start", slot: "start" }), h("slot", { key: 'c34815b4acd3bd9e556d908dcebb4e39a9ab1f78', name: "label", slot: "label" }), h("slot", { key: '3ba077636a9908c1ff57ca6a82824586becd8497', name: "end", slot: "end" }), this.picker && [
+            h("button", { key: 'c45a42017fc0023f1f9b6c8201b209979678fd52', slot: "end", class: "date-field__open", type: "button", onKeyDown: this.onTriggerKey, onClick: this.onTriggerClick, ref: (trigger) => (this.trigger = trigger), disabled: this.disabled || this.readonly }, h("nano-icon", { key: 'ae888424999bff07e6693023e1ef38a2ae471c96', name: "light/calendar-days" })),
+            h("nano-dropdown", { key: 'd82337659d8656f162e51789dcd32c102f733f77', slot: "end", onNanoHide: this.onDropdownHide, dialogTitle: "Choose a date", class: "date-field__dropdown", ref: (dropdown) => (this.dropdown = dropdown), ...this.dropDownConfig, part: "dropdown" }, h("div", { key: 'f5c9d99cd1a6725068f7f1acd27cf6e3e3717754' }, h("div", { key: 'b9e02ade28a5213382b993e57143dff2d19ececd', class: "date-field__close-bar" }, h("button", { key: 'af6aebad9c406b500d17338a0f5fb178638d3a01', class: "date-field__close", type: "button", onMouseDown: this.onCloseClick, onKeyDown: this.onCloseKeyDown, ref: (pickerClose) => (this.pickerCloseBtn = pickerClose) }, h("nano-icon", { key: '6cecd49256234320e73d732e689dd552dbf22645', name: "light/xmark" }), h("span", { key: 'fc9f86d2f3dbf06d53217ccf6556b3b119240ceb', class: "vhidden" }, "Close window"))), h("nano-date-picker", { key: 'd0a388667a9372ecfebae22d0175fe68230c11ac', isDateDisabled: this.isDateDisabled, onNanoDatePicked: this.onDatePicked, min: this.min || undefined, max: this.max || undefined, "is-modal": true, ref: (picker) => (this.pickerEle = picker), localization: this.localization, selectedDate: this.value || this.initialPickerDate, firstDayOfWeek: this.firstDayOfWeek, color: this.color || undefined, part: "date-picker" }))),
+        ], (hasHelperSlot || this.helperText || this.showInlineError) && (h("span", { key: '109ec3fe3dd22087fca3240b3ad2b712b7444a3e', slot: "helper" }, h("span", { key: 'a709814dfcb66923cb512737768b4385c6a2fa85', class: { vhidden: !!this.value.length } }, h("slot", { key: '16375d1e2af0839d94b93b02117817fe54ed5887', name: "helper" })), this.helperText && !!valueDate && (h("span", { key: 'dce160d23dbf15337800f15f43380c75643f6373' }, valueDate.toLocaleDateString(this.locale, this.helperTextFormat)))))), h("input", { key: 'c50fb0b2a5104229cf44f9564a902b813e45111f', type: "hidden", value: this.value, name: this.name }))));
     }
     static get is() { return "nano-date-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/date-picker/date-picker.js

@@ -267,11 +267,11 @@ export class NanoDatePicker {
             minYear = minDate.getFullYear();
         if (maxDate)
             maxYear = maxDate.getFullYear();
-        return (h(Host, { key: '1793ae3627c1af938416338594a3607f7a686706', class: "nano-date-picker" }, h("div", { key: '2f50b7959a5787581f0e824f7c5e433ca3985784', class: "duet-date" }, h("div", { key: '805511e4311e996c3729a30da4b66a29288fc137', class: {
+        return (h(Host, { key: '325b63a7956c84802d783fa95086b66df5fbfdc2', class: "nano-date-picker" }, h("div", { key: 'be1ef3571202d7074ddda34a299774b1e9a8a96c', class: "duet-date" }, h("div", { key: '52583e20b54f39ef154e51e200f09719654555c9', class: {
                 'duet-date__dialog': true,
                 'is-active': true,
-            }, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: '333ed28590d71bddb694c6ba8a6bd4056012c209', class: "duet-date__dialog-content" }, h("div", { key: '62235540545d46423a368a25518079fee3d29b0f', class: "duet-date__vhidden duet-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: '5154197320634e2fc9d59cecc6ab83f5e6922c58', class: "duet-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '04d15f2d9b914c5334d5765b7279f2bcbeb0acf0' }, h("h2", { key: '56e76ca762e7fda6db0531435d0e48c511d7cc31', id: this.dialogLabelId, class: "duet-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], ' ', this.focusedDay.getFullYear()), h("label", { key: 'ef4ff1b95cc348a308e119246cd9a617438ec44c', htmlFor: this.monthSelectId, class: "duet-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: '7f10da9f614ddb58f89fa6d5964817295feeed45', class: "duet-date__select" }, h("select", { key: '58d4f452c9ffdf441bb42a8e044f2d17382662e9', id: this.monthSelectId, class: "duet-date__select--month", ref: (element) => (this.firstFocusableElement = this.monthSelectNode =
-                element), onChange: this.handleMonthSelect }, this.localization.monthNames.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { key: 'd7fb131ba8f73e1a8f03711971115ba9f26798e5', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: 'ed65bb461b54b9862fd58b5d21de5cdf52da1a8a' }, this.localization.monthNamesShort[focusedMonth]), h("nano-icon", { key: '1b8ecb5652cc2a0daba3ff9d2cc14dca8f8055a9', name: "light/chevron-down" }))), h("label", { key: '2eb441ddd3ada49165f41bec138dcddd3cf8fc28', htmlFor: this.yearSelectId, class: "duet-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: '12deefa0da5a17e8a81ee733eb5d76a7384409fe', class: "duet-date__select" }, h("select", { key: 'b3a3a05d0fab4c69eb72f1ca4aa603fa0856fe37', id: this.yearSelectId, class: "duet-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: '960b6cee86d795dd88d015aff93318dc9876e628', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: 'e14f14c75613c197001240b965358fe3aa6a1cb3' }, this.focusedDay.getFullYear()), h("nano-icon", { key: 'a74f16678cd2f444a881a19e55774988444f0515', name: "light/chevron-down" })))), h("div", { key: 'c20d467896edad680eef48d40a22de5657da0e75', class: "duet-date__nav" }, h("button", { key: 'f3d8bf7f048d04796b450f6123b6e90b45b37655', class: "duet-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("nano-icon", { key: 'd115ff718668dfa3dd9e05733baeb21bc179a5a5', name: "light/chevron-left" }), h("span", { key: 'd5ba77a2eb0a81a469973d7873e10beb6683c02f', class: "duet-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: '9d745902f2d971b2f5d0ad467274c0a180a5d173', class: "duet-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("nano-icon", { key: '5a5fabb015800b28cc276a8f69701e347bf8a1d5', name: "light/chevron-right" }), h("span", { key: '418d78e367dcc1cf0f85002a8f975920d57521f2', class: "duet-date__vhidden" }, this.localization.nextMonthLabel)))), h("div", { key: '89e4f57750c36ab9b616b961c0524a554d95ec77' }, h(DatePickerMonth, { key: 'e6c173dedbe03b267a1536403822415a968dea65', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate, isDateDisabled: this.isDateDisabled })))))));
+            }, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: '9ff8a1baa94f6502a4691cbd69c45808ee94eaa1', class: "duet-date__dialog-content" }, h("div", { key: 'ea56053783abfe899d19dffee3d0709decf34586', class: "duet-date__vhidden duet-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: '53fde77f3ae470c6d5271ff901557876f9f082db', class: "duet-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '0dd5d2f41fa1acc596b4d0b83644744607427295' }, h("h2", { key: 'fbc33424f5048889a766afec0dec6408b8d107e4', id: this.dialogLabelId, class: "duet-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], ' ', this.focusedDay.getFullYear()), h("label", { key: 'b2f293e2eecaad9c2070fb0b0612332b7c60bb13', htmlFor: this.monthSelectId, class: "duet-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: 'e3641b3731fd4387c5623590d16e7f566f6f7273', class: "duet-date__select" }, h("select", { key: 'a7d655e5ed0e5f30a4acb1fc6e5fc0b6f4190211', id: this.monthSelectId, class: "duet-date__select--month", ref: (element) => (this.firstFocusableElement = this.monthSelectNode =
+                element), onChange: this.handleMonthSelect }, this.localization.monthNames.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { key: 'd48f0c2a4ba4f25a5fbe2c524119d53c852225fe', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: 'c5a052d1d5d627efc147fa3c6d815aa58a88a658' }, this.localization.monthNamesShort[focusedMonth]), h("nano-icon", { key: '75a671f7f3b5e99db8292448a1213057522cb54a', name: "light/chevron-down" }))), h("label", { key: 'd75e61f7a398d8a59eea903ed7579e0e2488a588', htmlFor: this.yearSelectId, class: "duet-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: '7f53843dbfd10dad14ab29ba36fa132c411b7181', class: "duet-date__select" }, h("select", { key: '95c128dd44bc337d21f93acb263db9ab31a7a85d', id: this.yearSelectId, class: "duet-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: '3bed714eb0f65a52f50686c7bc1b66c53be8ffc9', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: '925804c72b36ad5092babc990660505d3841dca9' }, this.focusedDay.getFullYear()), h("nano-icon", { key: 'b8a54c98c40d20ce85562d0a3de40aa4dde2ff11', name: "light/chevron-down" })))), h("div", { key: 'd9525a0266c3abf1c0248fc8defa85f49a1a93d4', class: "duet-date__nav" }, h("button", { key: '9c7390ebc74ae31f8687c764dbe918f50316d93c', class: "duet-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("nano-icon", { key: '0cc15df22222c3c7c944b12cd6518f200c15891c', name: "light/chevron-left" }), h("span", { key: 'e9a376ce2f4aa7e180de15388ee3cb657e1968ac', class: "duet-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: '6b49ef9d261384853bf5982ed212e33f110d86a7', class: "duet-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("nano-icon", { key: '48fd8c193aa842fcc610edccc205124d7b955230', name: "light/chevron-right" }), h("span", { key: '639bf8f2367d1d4b077cf1dfb2e8144b49dc234d', class: "duet-date__vhidden" }, this.localization.nextMonthLabel)))), h("div", { key: '88459567f3cd03189554d95d691ac51058905396' }, h(DatePickerMonth, { key: '79561fa4051c802e33a74cafc11c212c399d20e9', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate, isDateDisabled: this.isDateDisabled })))))));
     }
     static get is() { return "nano-date-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/drawer/drawer.css

@@ -106,7 +106,6 @@
 
 .drawer__panel {
   position: absolute;
-  z-index: 2;
   max-inline-size: 100%;
   max-block-size: 100%;
   background-color: var(--panel-background);

package/dist/collection/components/dropdown/dropdown.js

@@ -601,7 +601,7 @@ export class Dropdown {
                         "EventEmitter": {
                             "location": "import",
                             "path": "@stencil/core",
-                            "id": "../../../stenciljs/internal/stencil-core/index.d.ts::EventEmitter"
+                            "id": "../../node_modules/.pnpm/@stencil+core@4.35.3/node_modules/@stencil/core/internal/stencil-core/index.d.ts::EventEmitter"
                         }
                     }
                 },

package/dist/collection/components/feature-box/feature-box.css

@@ -0,0 +1,42 @@
+: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;
+    }
+  }/**
+* @prop --color: text colour of feature box contents. Defaults to `var(--nano-color-basic-white)`; 
+* @prop --bg: background of the feature box. Defaults to `var(--nano-color-basic-black)`;
+*/

package/dist/collection/components/feature-box/feature-box.js

@@ -0,0 +1,49 @@
+/**
+ * Highlights a key message on a landing page.
+ *
+ * @status new
+ * @version 8.0.0
+ * @type CSS Only
+ *
+ * @slot img - The image of the card. Appears first.
+ * @slot content - The main content of the card. Suitable for headings, paragraphs, and other text elements.
+ */
+export class NanoFeatureBox {
+    /** The position of the image of the feature-box (`start` being left on a l2r page) */
+    imgPosition = 'start';
+    static get is() { return "nano-feature-box"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["feature-box.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["feature-box.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "imgPosition": {
+                "type": "string",
+                "attribute": "img-position",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'end'",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The position of the image of the feature-box (`start` being left on a l2r page)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'start'"
+            }
+        };
+    }
+}

package/dist/collection/components/field-validator/field-validator.js

@@ -702,7 +702,7 @@ export class FieldValidator {
                         "ObservableMap": {
                             "location": "import",
                             "path": "@stencil/store",
-                            "id": "../../node_modules/.pnpm/@stencil+store@2.1.2_@stencil+core@stenciljs/node_modules/@stencil/store/dist/index.d.ts::ObservableMap"
+                            "id": "../../node_modules/.pnpm/@stencil+store@2.1.2_@stencil+core@4.35.3/node_modules/@stencil/store/dist/index.d.ts::ObservableMap"
                         },
                         "ValidatorValueStore": {
                             "location": "import",

package/dist/collection/components/file-upload/file-upload.js

@@ -67,7 +67,9 @@ export class FileUpload {
     _label = '';
     /** String to place within a label element. */
     get label() {
-        return this.required && !this._label.endsWith('*') ? this._label + ' *' : this._label;
+        return this.required && !this._label.endsWith('*')
+            ? this._label + ' *'
+            : this._label;
     }
     set label(value) {
         this._label = value;
@@ -229,7 +231,7 @@ export class FileUpload {
     checkFileType(type) {
         if (!this.accept)
             return true;
-        return !!type && this.accept.match(type) && this.accept.match(type).length > 0;
+        return (!!type && this.accept.match(type) && this.accept.match(type).length > 0);
     }
     validate = () => {
         this.errorMessage = '';
@@ -386,7 +388,8 @@ export class FileUpload {
                     this.onDragStop(e);
                 }, onDragEnd: this.onDragStop, onDragLeave: this.onDragStop, onDragEnter: this.onDragStart, onDragOver: this.onDragStart }, (!!this.label || (this.hasLabelSlot && eleType !== 'drop')) && (h("div", { class: `file-upload__label ${this.hideLabel ? 'visually-hide' : ''}` }, !!this.label && !!this.label.length ? this.label : '', !this.label && this.hasLabelSlot && eleType !== 'drop' && (h("slot", { name: "label" })))), eleType === 'drop' && (h("div", { class: "file-upload__drop-area" }, h("div", null, this.hasLabelSlot && h("slot", { name: "label" })), h("div", null, "Drag and drop or\u00A0", h("span", null, "browse")))), eleType === 'btn' && (h("div", { class: `file-upload__button button--keyline button--icon-start ${this.hasFocus ? 'button--focus' : ''}` }, h("nano-cta", { secondary: true, class: `file-upload__btn-content` }, h("div", { class: "button", disabled: this.disabled }, this.fileList.length
                 ? this.fileList[0].file.name
-                : this.placeholder)), !!this.value && this.clearable && !this.disabled && (h("button", { type: "button", class: "icon file-upload__clear-btn", tabindex: "0", "aria-label": "Clear selected file", onClick: this.onClearClick }, h("nano-icon", { name: "light/xmark" }))), !this.disabled && this.showInlineError &&
+                : this.placeholder)), !!this.value && this.clearable && !this.disabled && (h("button", { type: "button", class: "icon file-upload__clear-btn", tabindex: "0", "aria-label": "Clear selected file", onClick: this.onClearClick }, h("nano-icon", { name: "light/xmark" }))), !this.disabled &&
+                this.showInlineError &&
                 (this._invalid ? (h("nano-icon", { name: "solid/circle-xmark", class: "file-upload__icon file-upload__icon-error" })) : (h("nano-icon", { name: "solid/circle-check", class: "file-upload__icon file-upload__icon-success" }))))), h("input", { "aria-labelledby": labelId + ' ' + moreId + ' ' + listId, type: "file", id: this.fileInputId, accept: this.accept, class: "file-upload__input", multiple: this.maxFiles > 1, disabled: this.disabled, name: this.canChangeFileList ? undefined : this.name, form: this.form, ref: (input) => {
                     if (this.canChangeFileList) {
                         this.publicInputEl = input;
@@ -414,7 +417,7 @@ export class FileUpload {
         ];
     };
     render() {
-        return (h(Host, { key: '4f495870314e3f688517b34be6749cf2b77810ea', class: "nano-file-upload" }, h("div", { key: '9baa63fe75b200913f82abb4304d73e22fbb4be4', class: {
+        return (h(Host, { key: 'c6fc291c7ac3c990d5304a2589c7dd1a0193333e', class: "nano-file-upload" }, h("div", { key: '12fd1e6551fe6ff6e1eb6a84000a21e526c61c36', class: {
                 'file-upload': true,
                 'file-upload--dragging': this.isDragging,
                 'file-upload--focus': this.hasFocus,