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

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/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

@@ -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: 'f5870b17a2a42fc705708682f48c42b8acc623b7', 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: 'ef306491a6086d4977e46567ad1e4b344890ea86', 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: 'c175138c17a40bf755688ef7e4a85ef8e1608836', 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: '9a079eef12530562bd535a4d9e2ec65f747cd113', name: "list-top" }), h("slot", { key: '3421b5c0f4bfe14354f7a27d99b17d208032df25' }), h("slot", { key: '5bc52d6bbaffb020a8dee8acdceafb5c421e89d8', name: "internal-opts" }), h("slot", { key: '66a4b6158d9bea7f0212088a86069d93bc7c17ef', name: "list-bottom" })), h("nano-menu", { key: '78daf54379a013a64c702cfc2df12e2cf36c993e', 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: '4c1fa43790c0ae2c84d919242764797c9e9a2546', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '01e5040fe2991ffacfceb27ce997399641ab6a37', 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-picker/date-picker.js

@@ -81,12 +81,12 @@ export class NanoDatePicker {
     async setFocus(day = false) {
         this.setFocusedDay(parseISODate(this.selectedDate) || new Date());
         if (day) {
-            setTimeout((_) => this.focusedDayNode.focus(), 20);
+            setTimeout((_) => this.focusedDayNode.focus({ preventScroll: true }), 20);
             return;
         }
         clearTimeout(this.focusTimeoutId);
         this.focusTimeoutId = setTimeout(() => {
-            this.monthSelectNode.focus();
+            this.monthSelectNode.focus({ preventScroll: true });
         }, 20);
     }
     handleSelectedDateChange() {
@@ -242,7 +242,7 @@ export class NanoDatePicker {
     processFocusedDayNode = (element) => {
         this.focusedDayNode = element;
         if (this.activeFocus) {
-            setTimeout(() => element.focus(), 0);
+            setTimeout(() => element.focus({ preventScroll: true }), 0);
         }
     };
     componentWillLoad() {
@@ -267,11 +267,11 @@ export class NanoDatePicker {
             minYear = minDate.getFullYear();
         if (maxDate)
             maxYear = maxDate.getFullYear();
-        return (h(Host, { key: '476708135e014efc8662dcfdd6877bfa21ef6f31', class: "nano-date-picker" }, h("div", { key: '4ff36de5c9e6c86fa26638db70514f12fad96262', class: "duet-date" }, h("div", { key: '544a676f3354fc3cd0a6c0f1fd8610d47c5c586b', 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: '94665c51ab3ee801e6affb6be91076777f329665', class: "duet-date__dialog-content" }, h("div", { key: '3e014e07dd3f43808bdb99fbc79c6f81958328ac', class: "duet-date__vhidden duet-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: '6759c71255f8ff0c05a56e118ad628afc7f1af43', class: "duet-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: 'b0688e27b47a95fbb8c051d0680975741547762e' }, h("h2", { key: '1bb4b0035cc07304248c496c55077a88d43d57f5', id: this.dialogLabelId, class: "duet-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], ' ', this.focusedDay.getFullYear()), h("label", { key: 'e740c878525a794eaac04b44c4770edaa5a1d780', htmlFor: this.monthSelectId, class: "duet-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: '658b004a5ae3e50070a2683f92c68b924246a4e9', class: "duet-date__select" }, h("select", { key: '3a99660e9c05ca78d5945b4a8dd581f3fcd64fff', 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: '6c9f19bbd85e2d6bd16e06b87507599a77f3b8e0', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: '94813adbb53c491d53045106a0e97e68ecc8a257' }, this.localization.monthNamesShort[focusedMonth]), h("nano-icon", { key: 'd6d867b3732097902ac0b537d055ec0eb6dbb11f', name: "light/chevron-down" }))), h("label", { key: 'a77adf78db5d8f2ec2998526c2d5d2882fb01a24', htmlFor: this.yearSelectId, class: "duet-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: 'fe5d77c1f3d5cb7bc8ba2befd232b001fcafa8da', class: "duet-date__select" }, h("select", { key: '3585692273f5bdfdb58e1e265bb6b754708cb69a', 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: 'ce1137c980183ccffc195f83bdc5147de3f8194b', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: 'a5d3e28fdbb1b4192f51da8009cce094558db3c0' }, this.focusedDay.getFullYear()), h("nano-icon", { key: '0958bff2d269607480fb9475f4a58df147885f4b', name: "light/chevron-down" })))), h("div", { key: 'd49585f3b292ba85ed013e52a5a042cb55601937', class: "duet-date__nav" }, h("button", { key: '1f3f492d1965e6416a5fac52db0ecba7864b8df7', class: "duet-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("nano-icon", { key: 'abe59d338029675ad55a5e7faab8170ca2c2af2f', name: "light/chevron-left" }), h("span", { key: '7d59fa5d95085c6d66d93f95c953e9a2f74b8a5f', class: "duet-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: 'a895a7b901ca21fa32710c3a187ce263cf105908', class: "duet-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("nano-icon", { key: 'b8737eb28e5ad5873f40523a557745a338aa5277', name: "light/chevron-right" }), h("span", { key: '2c98c7be89ce30939c647f7faea1c531fa0d38a9', class: "duet-date__vhidden" }, this.localization.nextMonthLabel)))), h("div", { key: '42284a65a7e2bb5302cd75a61f19a691ea1236bd' }, h(DatePickerMonth, { key: 'd548838275eecb1a2dff47851e9fd57c9f49f691', 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/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/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,

package/dist/collection/components/grid/grid.js

@@ -175,7 +175,7 @@ export class Grid {
         this.constructSizeArray();
     }
     render() {
-        return (h(Host, { key: '410e2e3fce3867216adb0f9bf0501f8d40514bce', class: "nano-grid" }, h("div", { key: '424f6da1b39d37ef70912e87e5d61320b5ff8d11', part: "grid", class: "grid", "cache-key": this.cacheKey }, h("slot", { key: '051bdae40a3d63dfdb744a980c74a42c2ac9c05f' })), this.showHelper && (h("div", { key: 'b24395cdacf9d7ba3a15b1a9b064a2a97f3afac1', class: "grid grid--helper", part: "helper", "cache-key": this.cacheKey }, [...Array(24)].map(() => (h("div", { class: "grid__helper-item" })))))));
+        return (h(Host, { key: '74b98156bf6fbb3bf105135be4f461737d7774ac', class: "nano-grid" }, h("div", { key: 'dda06ec152c7d25ee0e6090e6c301bc8e5e81aac', part: "grid", class: "grid", "cache-key": this.cacheKey }, h("slot", { key: '175e120e0198bfad25600316aa8a8becf9390866' })), this.showHelper && (h("div", { key: '773d0ca81af12cc416550578e4df88f08b7af3cd', class: "grid grid--helper", part: "helper", "cache-key": this.cacheKey }, [...Array(24)].map(() => (h("div", { class: "grid__helper-item" })))))));
     }
     static get is() { return "nano-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input/input.css

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

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

@@ -140,7 +140,9 @@ export class Input {
      * String to place within a label element. Alternatively you may use a label slot.
      */
     get label() {
-        return this.required && !this._label.endsWith('*') ? this._label + ' *' : this._label;
+        return this.required && !this._label.endsWith('*')
+            ? this._label + ' *'
+            : this._label;
     }
     set label(value) {
         this._label = value;
@@ -579,18 +581,18 @@ export class Input {
             disabled,
             clearControl: this.clearable,
         }))(this);
-        return (h(Host, { key: '1601bf765681a833b22c05294a1c8d9b5c6be5ee', "aria-disabled": this.disabled ? 'true' : null, class: {
+        return (h(Host, { key: '87ffe8828b64535a10140feecfc75ff5fba354f2', "aria-disabled": this.disabled ? 'true' : null, class: {
                 'has-value': this.hasValue(),
                 'has-focus': this.hasFocus,
                 'is-invalid': this._invalid === true,
                 'is-valid': this._invalid === false,
                 'nano-input': true,
-            } }, h("div", { key: '3db99291d328de9684137597706b79e4f24b65e2', style: { width: '100%' } }, h(FormControlWrap, { key: 'df525275b5c35b9ae3fdc793766a9af759740076', ...wrapOptions, class: {
+            } }, h("div", { key: '88cf2db24e47049dd5ef7d45b41614b821a6dd5f', style: { width: '100%' } }, h(FormControlWrap, { key: 'c50c5abfb6c8e3b64c151cca611ba83d6949dfff', ...wrapOptions, class: {
                 'has-helper': this.hasHelperSlot,
                 'has-error': !!this.errorMessage &&
                     this.showInlineError &&
                     this._invalid === true,
-            } }, h(FormControl, { key: '8f25ff2340431b2ea29d5063877ad376ec229758', ...controlOptions, onClearText: this.clearTextInput, control: this.el, ref: (el) => (this.nativeInputWrap = el), showInlineError: this.showInlineError, endSlot: this.showPicker &&
+            } }, h(FormControl, { key: 'fc9d46333893136293bbdac44372ba3863a9d864', ...controlOptions, onClearText: this.clearTextInput, control: this.el, ref: (el) => (this.nativeInputWrap = el), showInlineError: this.showInlineError, endSlot: this.showPicker &&
                 this.type === 'date' &&
                 !this.readonly &&
                 !this.disabled && [
@@ -605,10 +607,10 @@ export class Input {
                         this.value = e.detail.value;
                         this.pickerDropdown?.hide();
                     }, min: this.min, max: this.max, "is-modal": true, selectedDate: this.value || this.initialPickerDate || undefined }))),
-            ] }, this.type !== 'textarea' && (h("input", { key: '97734d0168a049af1b22e4517db5e58d25a75b13', id: this.inputId, class: "input__native-ctrl", ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalise, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onClick: (e) => e.preventDefault(), onChange: this.onInput, onFocus: this.onFocus, onBlur: this.handleBlur, onKeyDown: this.onKeydown, onInvalid: this.validate })), this.type === 'textarea' && (h("textarea", { key: 'b1780aa8cf51d8b7440825d461d89e8746fcd96d', rows: this.floatLabel ? 1 : this.rows, id: this.inputId, class: {
+            ] }, this.type !== 'textarea' && (h("input", { key: '5aa8c0b68e55c5afb3f9e9676ee75bd53a242af2', id: this.inputId, class: "input__native-ctrl", ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalise, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onClick: (e) => e.preventDefault(), onChange: this.onInput, onFocus: this.onFocus, onBlur: this.handleBlur, onKeyDown: this.onKeydown, onInvalid: this.validate })), this.type === 'textarea' && (h("textarea", { key: '571c808ea1f623b996e17d287eab361444da2fa3', rows: this.floatLabel ? 1 : this.rows, id: this.inputId, class: {
                 'input__native-ctrl': true,
                 input__resizable: this.resize === 'true',
-            }, ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, autoCapitalize: this.autocapitalise, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate, onBlur: this.handleBlur })))), h("slot", { key: 'fa333ee624b824af60a8a79d09720e231e8d455c' }))));
+            }, ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, autoCapitalize: this.autocapitalise, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate, onBlur: this.handleBlur })))), h("slot", { key: '10a61c2bbda41eac07546a6ad6a83b2b767489e8' }))));
     }
     static get is() { return "nano-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/masked-overflow/masked-overflow.js

@@ -327,7 +327,7 @@ export class MaskedOverflow {
         }
     }
     render() {
-        return (h(Host, { key: '4f88bf0a4cd8f01c745685afe7b0c5f9fc9b26b2', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: 'b7894467af4981a53bb0540998f9fdee3b5e4db7', part: "base", class: {
+        return (h(Host, { key: 'ce255683796d356286e4c9cbd7f7ea34db77190b', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: 'd1ed2c18f2b317721e2cab42694a1f203d5d807a', part: "base", class: {
                 onav: true,
                 [`onav--${this.orientation}`]: true,
                 'onav--has-scroll-controls': this.hasScrollControls,
@@ -336,12 +336,12 @@ export class MaskedOverflow {
                 'onav--no-transitions': this.instantReCalc,
                 'onnav--has-indicator': this.showIndicator,
                 'onnav--hide-scrollbars': this.hideScrollbars && this.hideScrollbars !== 'false',
-            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'c12e39f98ea4750a0709c822f1827fd3a4580ca5', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '9f45887d61630f41398e872bb7d3538f87fcc7c0', part: "scroll-button scroll-button-prev", class: {
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'e1acd4b76844e48ef2700500977fcc227323fa92', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '30e8801e0b1ba96675ab129e5371eb6e1edff420', part: "scroll-button scroll-button-prev", class: {
                 'onav__scroll-button': true,
                 'onav__scroll-button--start': true,
             }, ref: (btn) => (this.startBtn = btn), onClick: () => this.handleBtnClick(false), label: "Click to scroll", iconName: this.orientation === 'horizontal'
                 ? 'light/chevron-left'
-                : 'light/chevron-up' })), h("div", { key: '1b6402869156bb7d6f3ddaf5b6b9e1ba80e94104', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, h("div", { key: '1018eef93e68d13faf4c7898a69f6723e772ec3c', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: 'ab21bd04d6bb661f716d835ee4bc0d111fed863f', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: 'bb66cabd059551b392e5049eb8d18f83de8eb818', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'bd48cb7171ee606a9c368a36090cefb3e61337bd', part: "scroll-button scroll-button-next", class: {
+                : 'light/chevron-up' })), h("div", { key: '494da67346cf9ec3217eb46aad8e0bbfca7e5842', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, h("div", { key: '98e0cc7a8b0ab82440b0110e8f4d018b02612901', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: '9f1622b178b5cfcf0c44cacb9f5dd3465306b9f8', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: 'd11134d63b8a733b7d9e0e74283eb463be032c82', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: '2630de597a4c38e555eb95dfc19033a517ccdee2', part: "scroll-button scroll-button-next", class: {
                 'onav__scroll-button': true,
                 'onav__scroll-button--end': true,
             }, ref: (btn) => (this.endBtn = btn), onClick: () => this.handleBtnClick(true), label: "Click to scroll", iconName: this.orientation === 'horizontal'

package/dist/collection/components/more-less/more-less.js

@@ -65,8 +65,8 @@ export class Rating {
         this.handleShowHideElements();
     }
     render() {
-        return (h(Host, { key: '49834d5d379bcc71bfd228cbad3becf4343160ac', class: "nano-more-less" }, h("slot", { key: '4cbea5f74ddd512cacfc2c65c35ce0cd9fbfee00', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
-            h("div", { key: 'd8b9b8135f3789705f18793dd8262bcebb38f2cb', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: '564f67099d59d520fbf9a5c40f6f14e681346eff', name: "less" }, h("button", { key: 'a5aa9c0a0eda6b6dda1c72288b18668d4028eec5', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
+        return (h(Host, { key: 'e1afec82d8deaccc2710b9523edb2f46e9918c1b', class: "nano-more-less" }, h("slot", { key: '704bb046e601225e50a7dc5b74dee973bf58274c', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
+            h("div", { key: 'd905bc9d85634c5eed8e33acdc28f0bfae6396a4', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: '64c6138dc9e43cfe13e7be7d43740e533fa03630', name: "less" }, h("button", { key: '3c447841fafb877de9e2e16ce2f103da5831d744', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
             !this.noHideBtn ? (h("div", { style: { display: this.show ? 'contents' : 'none' }, class: "button-wrapper", part: "button-wrapper button-wrapper--more", onClick: (e) => this.handleClick(e) }, h("slot", { name: "more" }, h("button", { part: "button button--more" }, "Show less (-", this.children.length - this.maxToShow, ")")))) : (''),
         ]));
     }

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

@@ -83,12 +83,12 @@ export class Option {
     }
     render() {
         const WrapTag = this.href ? 'a' : 'div';
-        return (h(Host, { key: '67b4ee2d21105b72d816b42054329fbe54ed8688', role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: "nano-option" }, h(WrapTag, { key: '61ad0172a3d7c0fefacd135121d9f52c15dc9bc5', href: this.href || undefined, onMouseDown: this.handleClick, id: this.optId, class: {
+        return (h(Host, { key: '9cb53ef00c462eeca94b4dbe77d94698cd86f9b2', role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: "nano-option" }, h(WrapTag, { key: 'a51a558222fe2b114677ad1bc374058aba990a0a', href: this.href || undefined, onMouseDown: this.handleClick, id: this.optId, class: {
                 option: true,
                 'option--selected': this.selected,
                 'option--disabled': this.disabled,
                 'option--novalue': !this.value,
-            } }, h("div", { key: '029278a486ed9a1dd809940ed702c55ac0f490a2', part: "check-icon", class: "option__check" }, h("slot", { key: '70c6d3b126e18b91f9e298491e11f6c6a188a957', name: "check-icon" }, h("nano-icon", { key: '20543f3436aff8fb152d69b8d89d009b02d18b88', name: "light/check", "aria-hidden": "true" }))), h("div", { key: '548cb4eb15f59c3be72ec1452ca84206c97389da', part: "start", class: "option__start" }, h("slot", { key: '5e9f2ac1c0358b8008799ed08643619fc41055f8', name: "start" })), h("div", { key: '95f3cd28fb34f02d55034322cd5154e06d5fc4c1', part: "label", class: "option__label" }, h("slot", { key: '1c1208ad99a9a123c6a9110c3cd976a502bc5cca' }, this.label || this.value)), h("div", { key: 'fcf9bf3e1c6674811be6a29af94d747903457d33', part: "end", class: "option__end" }, h("slot", { key: 'c49f296954fd5a60920af5b07fb5157bbe6e4e72', name: "end" })))));
+            } }, h("div", { key: 'fa5ce294668b860ac56cb0b436379057eebb275e', part: "check-icon", class: "option__check" }, h("slot", { key: '2592c5a5435e45023c0cb4b650d43a4cda29928d', name: "check-icon" }, h("nano-icon", { key: '2ad41f653575adc67328f3cea2eb39d3720ad400', name: "light/check", "aria-hidden": "true" }))), h("div", { key: '0d7c8d24179350d535095a0c990e3ac46bdc4a03', part: "start", class: "option__start" }, h("slot", { key: '4d06de2b71ab9b00aa56ba87a09fdaa432b55b59', name: "start" })), h("div", { key: '5e05e3a353da6d50ad54f5ce3b5b63d496a2581b', part: "label", class: "option__label" }, h("slot", { key: '22acfe355130ea11be35f8abb2529476e67e9ab4' }, this.label || this.value)), h("div", { key: '016938a4d89ca5188dc4f7c20b7cd7fedb51cc44', part: "end", class: "option__end" }, h("slot", { key: 'b8c0caa513d3089d607189cb673c9d78e424fabb', name: "end" })))));
     }
     static get is() { return "nano-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-bar/progress-bar.css

@@ -51,7 +51,7 @@ nano-progress-bar {
   position: relative;
   overflow: clip;
   border-radius: var(--border-radius);
-  height: var(--height);
+  block-size: var(--height);
   font-size: var(--height);
 }
 nano-progress-bar[size=small] {
@@ -62,8 +62,8 @@ nano-progress-bar[size=large] {
 }
 nano-progress-bar progress {
   appearance: none;
-  width: 100%;
-  height: inherit;
+  inline-size: 100%;
+  block-size: inherit;
   border-radius: var(--border-radius);
   background-color: var(--track-color);
   grid-area: 1/1;
@@ -79,7 +79,7 @@ nano-progress-bar > label progress {
 }
 nano-progress-bar:has(progress:not([value]))::after {
   content: "";
-  width: 100%;
+  inline-size: 100%;
   inset: 0;
   display: block;
   transform: translateZ(0);
@@ -125,7 +125,7 @@ nano-progress-bar[show-percent] progress[value]::before {
   position: absolute;
   inline-size: attr(value %);
   min-inline-size: 6%;
-  top: 50%;
+  inset-block-start: 50%;
   translate: 0 -50%;
   text-align: center;
   transition: inline-size var(--nano-transition-fast);

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

@@ -227,7 +227,7 @@ export class ResizeObserve {
             this.ro.disconnect();
     }
     render() {
-        return (h(Host, { key: '67ae39458d0f21c7100481c6aa68f9455e468d86', class: "nano-resize-observe" }, h("slot", { key: '503108cec78fcfda303a9e392e1903ec7acfc244' }), !!this.notifyContentFit &&
+        return (h(Host, { key: '110989d9ed5b1b40b76f9c8e641d5fdc95f0cdc3', class: "nano-resize-observe" }, h("slot", { key: '817b25ecae05e920029170061a31b03b3a155b53' }), !!this.notifyContentFit &&
             (this.contentFitX !== null || this.contentFitY !== null) && [
             this.contentFitX ? (h("slot", { name: "content-fit-x" })) : (h("slot", { name: "content-nofit-x" })),
             this.contentFitY ? (h("slot", { name: "content-fit-y" })) : (h("slot", { name: "content-nofit-y" })),

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

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

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

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