@nanoporetech-digital/components 8.21.0 → 8.23.0

package/hydrate/index.mjs

@@ -15267,12 +15267,13 @@ class GlobalNav {
                         });
                     } }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
                 h("nano-option", { key: 'ddf176669705bb04a45575ee1bf8897d46ae9704', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
-            ])))))), h("div", { key: 'f84317012affbf6aa952810f627ca318f042dd0b', class: "gn__cart" }, this.cartUrl && [
-            h("nano-icon-button", { key: 'c656b17e3ee2462900fc855c8128b2e92e3ad4cb', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }),
-            this.cartCount && (h("nano-badge", { key: '878066adbf28890694e65f651031e35912b30f06', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount)),
-        ]), this.breakpoint <= bpps.contact.breakpoint
+            ])))))), h("div", { key: 'f84317012affbf6aa952810f627ca318f042dd0b', class: "gn__cart" }, this.cartUrl &&
+            [
+                h("nano-icon-button", { iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }),
+                this.cartCount && (h("nano-badge", { theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount)),
+            ].join('')), this.breakpoint <= bpps.contact.breakpoint
             ? bpps.contact.tpl()
-            : '', this.isLoggedIn ? (h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, h("nano-icon", { name: "light/user" }), h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, typeof this.loginUrl === 'string' ? (h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login")) : (h("button", { onClick: this.loginUrl }, "Login")))))))), h("nano-global-search-results", { key: 'afb40b7671b51b72cc58ce006b6ed163fb1d1e78', part: "site-search-results" }, h("div", { key: '660f6ad6fb20ca8c88118b44bdb2b44b3a06f19b', class: "gn__site", part: "site-wrapper" }, h("slot", { key: 'fcd45d11fb7fcdcf986940f8a4bda1287635856a' }))))));
+            : '', this.isLoggedIn ? (h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, h("nano-icon", { name: "light/user" }), h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, typeof this.loginUrl === 'string' ? (h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login")) : (h("button", { onClick: this.loginUrl }, "Login")))))))), h("nano-global-search-results", { key: 'f8e1eb79d5e0c7aa36799ea2cb969cc642d22e0f', part: "site-search-results" }, h("div", { key: 'd8161c9901f704d2e5a31c275f5a72c541f03440', class: "gn__site", part: "site-wrapper" }, h("slot", { key: '6bea1e3ef7a22cf414d13161496d915b9d6738a0' }))))));
     }
     static get assetsDirs() { return ["assets"]; }
     static get watchers() { return {
@@ -15602,12 +15603,12 @@ class GlobalSearchResults {
         this.ro.observe(this.el);
     }
     render() {
-        return (h(Host, { key: '63af990582466961e1cf02c9e67bd8cffa82e620', class: {
+        return (h(Host, { key: '5f98118e522745952fcf8ec685baaefe50449f61', class: {
                 small: this.currentWidth < 780,
                 'nano-global-search-results': true,
-            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : undefined }, h("nano-algolia", { key: 'ea81b7334b7d2edb65328f65c70db0f75b48820c', storeId: this.queryId, storeMethod: "url-hash-push", class: "main-search__wrap sc-nano-global-search-results", ref: (ele) => requestAnimationFrame(() => (this.algoliaEle = ele)), id: "main-search",
+            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : undefined }, h("nano-algolia", { key: '95ef31ad42c4ad9481a5f550f855c74df9d2495b', storeId: this.queryId, storeMethod: "url-hash-push", class: "main-search__wrap sc-nano-global-search-results", ref: (ele) => requestAnimationFrame(() => (this.algoliaEle = ele)), id: "main-search",
             // @ts-expect-error this bubbles from nano-algolia-filter
-            onNanoFilterChanged: () => this.handleNanoFilterChanged() }, h("template", { key: '10cf57aac61c6b40cd3a285ddfd03b483b9d131d', slot: "template" }, 
+            onNanoFilterChanged: () => this.handleNanoFilterChanged() }, h("template", { key: 'fddb187aa20b542d26f687cf99185103fe385016', slot: "template" }, 
         /* html */ `<div class="main-search sc-nano-global-search-results">
               <nano-algolia-results id="main-search-results" class="main-search__results sc-nano-global-search-results" infinite-scroll>
                 <script type="text/template" slot="start-template">
@@ -15985,7 +15986,7 @@ class GlobalSearchResults {
                   </div>
                 </div>
               {{ /if }}
-            </div>`), h("div", { key: '531d1aaf58fe5df465d93998f9448207d23de76a', slot: "output" }), h("slot", { key: '66231f02547592a1b03a87b3f3e237c527befc38' }))));
+            </div>`), h("div", { key: '3f0569e65a67eecec757ca63c4563c714597f800', slot: "output" }), h("slot", { key: 'bf73c4ef234e11134894950b4116a45e50d694f7' }))));
     }
     static get watchers() { return {
         "algoliaEle": ["handleAlgoliaCredsChange", "handleAlgoliaIndexChange", "handleAlgoliaEleChange"],
@@ -16273,7 +16274,7 @@ class Grid {
         this.constructSizeArray();
     }
     render() {
-        return (h(Host, { key: '56ae0bda8aedac96841dd8cf308117ef1aaa9824', class: "nano-grid" }, h("div", { key: '6fffc201e4261b8f6c458bd044b31fe12cd9045e', part: "grid", class: "grid", "cache-key": this.cacheKey }, h("slot", { key: 'a6d7473ba9a8ffd21c4df95c2028e67026ffd1a5' })), this.showHelper && (h("div", { key: '275145f83283b504171fdc973741a1398cca6317', class: "grid grid--helper", part: "helper", "cache-key": this.cacheKey }, [...Array(24)].map(() => (h("div", { class: "grid__helper-item" })))))));
+        return (h(Host, { key: '7a52ad31f58be507692b215b3efb4f73c299f32a', class: "nano-grid" }, h("div", { key: '62e6e11a9bd8023e58a488f7f5b25c0ffa2b9ea9', part: "grid", class: "grid", "cache-key": this.cacheKey }, h("slot", { key: 'c290f451f09b19ea99c0510c154033ca6a511adf' })), this.showHelper && (h("div", { key: 'a60138cc0ce3f097a2457db4841eb69b6f978380', class: "grid grid--helper", part: "helper", "cache-key": this.cacheKey }, [...Array(24)].map(() => (h("div", { class: "grid__helper-item" })))))));
     }
     static get watchers() { return {
         "sTpl": ["constructSizeArray"],
@@ -16342,7 +16343,7 @@ class GridItem {
      * m-row-start-2
      */
     render() {
-        return hAsync("slot", { key: '9a50a1034bd70b2d0c461f01acdb6b0484e492d3' });
+        return hAsync("slot", { key: '840c6d4f408fdec3c76f27cff9bd5760e3672483' });
     }
     static get style() { return ":host { display: inline-block; }"; }
     static get cmpMeta() { return {
@@ -16460,7 +16461,7 @@ class Hero {
     };
     render() {
         const rtl = this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';
-        return (h(Host, { key: '8270c80717ac41cc4cd5bedb577b131fe01ac967', class: "nano-hero" }, h("div", { key: '8b04bda451af03b648beb5576cd0badd48364aab', class: {
+        return (h(Host, { key: '27b92467c95fb4fd6369a66e97af741b921e797b', class: "nano-hero" }, h("div", { key: '30c66e5e68288e3f9357306a562f43535727f3f4', class: {
                 hero: true,
                 'hero--light': this.theme === 'light',
                 'hero--secondary': this.hasSecondaryContent,
@@ -16471,9 +16472,9 @@ class Hero {
                 'hero--hasbg': this.hasBg,
                 'hero--backbtn': this.hasBackBtn,
                 'hero--sub': this.level === 'sub',
-            } }, h("div", { key: 'be91fa5b23ceddaf411b269eb6635b886c83174d', class: "hero__bg-wrap" }, !!this.imgSrc && (h("nano-img", { key: '961b0a21220f0305cc0f4a4af0c6cd5e99446c41', class: "hero__img", lazy: false, background: true, srcSet: this.imgSrcSet, src: this.imgSrc }, h(this.HeroContent, { key: 'b272423beee722ae9d4adc0313d2d9ca4e6e3cd4' }))), !this.imgSrc && [
-            h("div", { key: 'f10056208ed97f1d4a051572261c874e5dae6e96', class: "hero__bg-slot" }, h("slot", { key: '225c3a0b114b16e8edb063d6979683b343e85419', name: "background" })),
-            h(this.HeroContent, { key: '375442509ce1954ca651d56d49488b0da464e577' }),
+            } }, h("div", { key: '494286fc1f1539883b8cd5a81b7c12a2ad8d00b8', class: "hero__bg-wrap" }, !!this.imgSrc && (h("nano-img", { key: '7590b6d1b1aef03a5f0ff0e47d78299dfdd749d0', class: "hero__img", lazy: false, background: true, srcSet: this.imgSrcSet, src: this.imgSrc }, h(this.HeroContent, { key: '4f95d47c8cdcf4b78333c0ace1935f4f6f979448' }))), !this.imgSrc && [
+            h("div", { key: '897f86e5f4ee4ace8622bd21e67cbe582a72304d', class: "hero__bg-slot" }, h("slot", { key: 'd30ccb5fad732bbf9bab8111b6d96dccca9c77b3', name: "background" })),
+            h(this.HeroContent, { key: 'ce045aca03de5fe3474d3a4c9c3e258da3a19823' }),
         ]))));
     }
     static get watchers() { return {
@@ -16668,7 +16669,7 @@ class Icon {
                 (this.name.indexOf('arrow') > -1 ||
                     this.name.indexOf('chevron') > -1) &&
                 this.isRtl());
-        return (h(Host, { key: '5c392d7707158df8b3c3d75f00824e597c3a87a9', class: {
+        return (h(Host, { key: '7210f407d6f2cff4fc6944e38f8913c6153246b9', class: {
                 loading: this.isLoading,
                 'flip-rtl': !!flipRtl,
                 'nano-icon': true,
@@ -16970,16 +16971,16 @@ class Img {
         const bgStyle = this.loadSrc
             ? { 'background-image': `url(${this.loadSrc})` }
             : {};
-        return (h(Host, { key: 'f8774fc9ad6e94727378337c2f405a068a7c88fb', class: "nano-img" }, h("div", { key: '15ae3c8ea944c8f0eab8616194f44fc1033e8fe2', class: "img" }, h("div", { key: 'ec3f433ded23dcb7fc57e53b0ecaba789ba492e0', class: "img__loader n-loader-skeleton" }, "Loading"), !!this.background && (h("div", { key: '8f4e8c9d595a31b477b0ae3f9e135f6b5c3f0e69', class: {
+        return (h(Host, { key: '87b53a98c1228b994b1a6ab0c46cc91bc119e974', class: "nano-img" }, h("div", { key: '217c7d94900cb7605c339d050ccd0e3b86f404ca', class: "img" }, h("div", { key: '7e9ff37632ca1614f8921ec1cc0cd19052e27b5e', class: "img__loader n-loader-skeleton" }, "Loading"), !!this.background && (h("div", { key: 'aa108de18fafcde5276f6e14ea729f74003a40e9', class: {
                 loaded: this.hasLoaded,
                 img__bg: true,
                 'no-height': this.autoHeight === 'image',
-            }, style: bgStyle }, h("slot", { key: '29bab2a5c86b3dfe18db8936af77674c44d743d0' }))), h("img", { key: 'e6731b48ed137d97aa98e64dc55488d56724f672', class: {
+            }, style: bgStyle }, h("slot", { key: 'd1882bdb7dc2ddf9706523f630cc7162620a8cb9' }))), h("img", { key: 'cf058a2586e24b4c31d587d898749df5c00c550b', class: {
                 img__image: true,
                 loaded: this.hasLoaded,
                 hide: this.background,
                 'no-height': this.autoHeight === 'content',
-            }, decoding: "async", src: this.src , loading: this.lazy ? 'lazy' : undefined, alt: this.alt, onLoad: this.onLoad, onError: this.loadError }), h("nano-resize-observe", { key: '0f1ce7d8b82adc19bfa459ff2adae708a4263c6e', class: "img__observer", onNanoResizeStateChange: this.onResize, states: this.imgStates }))));
+            }, decoding: "async", src: this.src , loading: this.lazy ? 'lazy' : undefined, alt: this.alt, onLoad: this.onLoad, onError: this.loadError }), h("nano-resize-observe", { key: 'c7ebda46f4adea6954f0d01586c6f7a3bb5fe77b', class: "img__observer", onNanoResizeStateChange: this.onResize, states: this.imgStates }))));
     }
     static get watchers() { return {
         "_src": ["_srcChanged"],
@@ -18481,17 +18482,17 @@ class InputOTP {
         const inputmode = this.getInputmode();
         const tabbableIndex = this.getTabbableIndex();
         const pattern = this.getPattern();
-        return (hAsync(Host, { key: '69c1b3c4a4cae21665bb7e3646a27a89f8d0a73b', class: {
+        return (hAsync(Host, { key: 'f64df732f8821fe6a50473f9eeedda67a4e24d9f', class: {
                 'has-focus': hasFocus,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
                 'nano-invalid': invalid,
                 'nano-valid': valid,
-            } }, hAsync("div", { key: '9fcd9882d552cde88adfa7578e556155651bbb4d', class: "input-otp-container" }, hAsync("div", { key: '3e2c1a83282c08c1ccef81c4f13a895f1efeec13', class: "input-otp-group", role: "group", "aria-label": "One-time password input" }, Array.from({ length }).map((_, index) => (hAsync(Fragment, null, hAsync("div", { class: "native-wrapper" }, hAsync("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && (hAsync("div", { class: "input-otp-separator" })))))), this.showValidity && (hAsync("div", { key: 'b5d9d9f3023cca6fcf9d8a394287de2333eeff54', class: {
+            } }, hAsync("div", { key: '9c870f9c59052a8c91b82e156d349e54de81c041', class: "input-otp-container" }, hAsync("div", { key: 'f4a5e00024479470b315e65bcffbbab4abd9ffbd', class: "input-otp-group", role: "group", "aria-label": "One-time password input" }, Array.from({ length }).map((_, index) => (hAsync(Fragment, null, hAsync("div", { class: "native-wrapper" }, hAsync("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && (hAsync("div", { class: "input-otp-separator" })))))), this.showValidity && (hAsync("div", { key: 'bcb625f2e6c49296f225b0ad25a1c373995aed23', class: {
                 'input-otp-icon': true,
                 'input-otp-icon--valid': valid,
                 'input-otp-icon--invalid': invalid,
-            }, part: "validity-icon" }, hAsync("slot", { key: 'd4a3123b713487f579a503ea1158e73b97a35198', name: "validity-icon" }, hAsync("nano-icon", { key: '2d7886aadaaa786f3594ace3d4fa3d2ebbdc30c3', hidden: !valid, name: "light/circle-check", class: "input-otp-valid-icon", "aria-label": "Valid input" }))))), this.slotCtrl.has('[default]') && (hAsync("div", { key: '32b6883425e8f62bda344ad6f92ff63a5fef98f4', class: "input-otp-description" }, hAsync("slot", { key: '81b5c65f7c8bab2f8bf371c03bc5a2ae455b6c3f' })))));
+            }, part: "validity-icon" }, hAsync("slot", { key: '1a0605cbb7fcce8de9586762603a5aea7edf9efd', name: "validity-icon" }, hAsync("nano-icon", { key: '9e3296be4bd6ec722aeade4f856b05f8db8c7c9a', hidden: !valid, name: "light/circle-check", class: "input-otp-valid-icon", "aria-label": "Valid input" }))))), this.slotCtrl.has('[default]') && (hAsync("div", { key: 'd222b87bcfd6b54408c6cb32b59f4a15a59eafee', class: "input-otp-description" }, hAsync("slot", { key: 'da5df8a834ef47ae08cd856eff4c6ffc8f78636c' })))));
     }
     static get watchers() { return {
         "value": ["valueChanged"]
@@ -18663,7 +18664,7 @@ class IntersectionObserve {
         this.removeIO();
     }
     render() {
-        return (h(Host, { key: '6ed0913499a9caede509c0394a2be337ddbcfc7c', class: "nano-intersection-observe" }, h("slot", { key: 'a55eeb8c1527dd62aba761b60b6a0764cbd5bfa4', ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange })));
+        return (h(Host, { key: '2f1a60278e63faf882cff97b4ace2f1735acc2ca', class: "nano-intersection-observe" }, h("slot", { key: '77cb4316de920f26b5306f77c9484df410a0dbf8', ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange })));
     }
     static get watchers() { return {
         "root": ["handleRootChange"],
@@ -19010,7 +19011,7 @@ class MaskedOverflow {
         }
     }
     render() {
-        return (h(Host, { key: 'e5c6238730817f0c7036060faa8c344d514a3924', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: '4027acd51b80fd1bf2bb9d66a05ec051802732f3', part: "base", class: {
+        return (h(Host, { key: '1f67834ad38adbec9efab74d6133e841b7ae0fa2', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: 'b186e466ef1ddb2360ec9cdbc0c8d39c2b3d68eb', part: "base", class: {
                 onav: true,
                 [`onav--${this.orientation}`]: true,
                 'onav--has-scroll-controls': this.hasScrollControls,
@@ -19019,12 +19020,12 @@ 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: 'a552b2e3cdf9f84249655b21ce6f2acb5c330a75', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '5aca29990db29b3d0d00e6bca317cd3870d06d6b', part: "scroll-button scroll-button-prev", class: {
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '00e2cfcd9cae23bd249495f6d05e937b5ff73e63', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '4a0c678fb5aae21b5e8ed456f40806a49c2e11e0', 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: '9c2b4c91859b5c6c132ab2eecc01cf56eeec18b9', 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: 'a77097f7b9a70e08f9a1eb980948c5c92dff760d', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: 'b8661b042f9e195850a33ce3570b75c9bed25d7e', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: '54af572f6ef591d8d3cb34221e048ac0e32140bb', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'e27a06cc2cec7ed373c527e3c6db5a0a56a90b71', part: "scroll-button scroll-button-next", class: {
+                : 'light/chevron-up' })), h("div", { key: '21534fc131bbe794e60515724cfb7dba73ae79fd', 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: 'cac929682c1f05fb172a28cda883739606c67dfd', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: 'ba83a8981643a256d178799a4b5e7835071a35dd', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: '540bb7d3652e2af8b8a04b21287f9ce927aacfcf', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: '06b1a788269ef77093092c281278a43c9031520d', 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'
@@ -19465,14 +19466,14 @@ class MenuDrawer {
     disconnectedCallback() {
     }
     render() {
-        return (h(Host, { key: 'bed821db8e5a30f26c3c9bad45b01321bdf4ca77', class: {
+        return (h(Host, { key: '88e497a7de6fa22960b367e348d07e25d983e0b7', class: {
                 open: this.open,
                 'secondary-open': this.secondaryOpen,
                 hide: this.hide,
                 loading: this.isLoading,
                 'has-global-nav': !!this.globalNav,
                 'nano-menu-drawer': true,
-            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, h("div", { key: 'e80fe18a73873359fc1d86ca93a06b8c6d3173c1', ref: (div) => (this.containerDiv = div), class: "container" }, h("div", { key: 'fe83b1858bacd94f3e0540ee3933d1018f7bfb9d', class: `content-wrap ${this.secondaryOpen ? 'secondary-open' : ''}` }, h("nav", { key: 'bed3b6c253cf16f8a796393be71c2c1b9aebd266', ref: (div) => (this.contentDiv = div), class: "content" }, h("div", { key: 'a8ea363c51345c83fcbf8723a32627bd99c5a9cf', class: "head" }, h("button", { key: 'fa9765354704685582e64771ded73c30c88e0374', onClick: this.toggle, class: "collapse-btn" }, h("nano-icon", { key: '0489c46c0c76a72720daf6656e26c2946433bccc', name: "light/arrow-right-to-line" }), h("span", { key: '81b00aaf09a528d6137351df20e23149a5325bf0', class: "visually-hidden" }, "collapse / expand menu"))), h("slot", { key: 'ab5f6ed3b81b2d5f741a1d102a12db5b0f68bae7' }), this.slotCtrl.has('foot') && (h("div", { key: 'dbb8345173ee78b9685cc46c6dcde5c2d617a868', class: "foot" }, h("slot", { key: '93bfeb1493a1d5e9a420803a09e64dced877591b', name: "foot" }))))))));
+            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, h("div", { key: 'acdbcb1b7999b4f558803a2b9c8e2157153e3a87', ref: (div) => (this.containerDiv = div), class: "container" }, h("div", { key: 'e32ccc0e51864c5625b601a1b26c4964e043611d', class: `content-wrap ${this.secondaryOpen ? 'secondary-open' : ''}` }, h("nav", { key: 'a6f310fe0ba1e43f4ababadd571d216b5308e572', ref: (div) => (this.contentDiv = div), class: "content" }, h("div", { key: '0bf69ec7213f74af4f2a23216ff2c94096b316db', class: "head" }, h("button", { key: '8d88423f034bda1ce69e22dc380b6060b3ef69ea', onClick: this.toggle, class: "collapse-btn" }, h("nano-icon", { key: '7bb5aabdfd50ee97038962536c775c95ce186665', name: "light/arrow-right-to-line" }), h("span", { key: '123597bc410dc8d56070e8409c29470a4adf708d', class: "visually-hidden" }, "collapse / expand menu"))), h("slot", { key: 'd35d60883b1e6fd30148e0bdf0f1af91dcc6b239' }), this.slotCtrl.has('foot') && (h("div", { key: '3e64eda301760521a433c9fc2baa7ae8dba76cb4', class: "foot" }, h("slot", { key: 'b1fc95970ef9206f4cc0438a90fd7ce4ed0103da', name: "foot" }))))))));
     }
     static get watchers() { return {
         "open": ["openChange"]
@@ -23593,11 +23594,11 @@ class NanoInPageNav {
         }
     }
     render() {
-        return (h(Host, { key: 'a975c3e0b58fe39d504281784dd2f16e086eb0a1', class: {
+        return (h(Host, { key: '98e7ef088a7a2fef3688f8c162e8c9ff03b693f3', class: {
                 'nano-in-page-nav': true,
                 'external-links': this.externalLinks === true ||
                     (this.externalLinks === 'auto' && this.autoExternalLinks),
-            } }, h("nav", { key: 'd5ecad4befef8a17ab87bc6fd8166548d3bbac02', part: "root", "aria-label": "In-page navigation" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (h("div", { key: 'b8af62ddcfb510d5db84b10fdae6c3abc140adff', class: "header" }, h("slot", { key: 'd54e126201453b1b4ddf0d788193eecd9fb3f32f', name: "back" }), h("slot", { key: 'aabc23912eb3f55c38793596f347de8c1bb72fa0', name: "accessory" }))), h("div", { key: 'dcd9be9561af10b16731a80072ee851f16d1cacd', class: "desktop-nav" }, h("slot", { key: '5af492dafc853a042d14fa752f327303c102be23', onSlotchange: () => this.handleSlotChange })), h("nano-details", { key: 'b04115b88b4f2fbcfad931f82de1fe70030400be', label: "Menu", class: "details-wrapper mobile-nav", ref: (el) => (this.mobileNavWrapper = el) }))));
+            } }, h("nav", { key: '0661c3f487261c2cdc22ce3b88964c77504a5b99', part: "root", "aria-label": "In-page navigation" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (h("div", { key: 'd55049ae9253d491a3543f24b95528503d91ab8e', class: "header" }, h("slot", { key: 'ad852799569e17e5367a910d685ecc7bb50cb6e8', name: "back" }), h("slot", { key: '74e4cbf7bd86c1477d23c83f054f62d1e81c9d07', name: "accessory" }))), h("div", { key: 'cd1d6fea25ba9c727d89ef95b942c2a2d246c133', class: "desktop-nav" }, h("slot", { key: 'd8489cf43bd6f41b4f248312547b81b4d9579567', onSlotchange: () => this.handleSlotChange })), h("nano-details", { key: '7d262c965ff3749dcda07cbab110a3828f754cb1', label: "Menu", class: "details-wrapper mobile-nav", ref: (el) => (this.mobileNavWrapper = el) }))));
     }
     static get style() { return inPageNavCss; }
     static get cmpMeta() { return {
@@ -23684,7 +23685,7 @@ class NanoIncrement {
         this.handleSlotChange();
     }
     render() {
-        return (h(Host, { key: '14c12f59b2f00d22bc58fb5ca64616a0a6b19749', class: "nano-increment" }, h("div", { key: '77800505fe9e0d79fda864dc48cb199e6ea611c7', class: "root" }, h("div", { key: '01576d846ca2708319d9faf1c7a0a25169f6c3f4', class: "minus" }, h("nano-icon-button", { key: 'a6b30034c64de602ac504a882aa3ff7c5a933083', iconName: "light/minus", label: "Decrement", onClick: this.handleMinus })), h("slot", { key: 'f04566d5f4a52f23a36bfb1c86a8dadfa3638d66', onSlotchange: this.handleSlotChange }), h("div", { key: '4f1e183e7d547d5f72154115300d14cfbbe3d62b', class: "plus" }, h("nano-icon-button", { key: '20af1b2a19cd8c9264e6375f4a5c05b9f917d979', iconName: "light/plus", label: "Increment", onClick: this.handlePlus })))));
+        return (h(Host, { key: 'b004b7452e52ff5fd5075255cd9653b9559be1b0', class: "nano-increment" }, h("div", { key: 'd0caad9244de44e53dbca5a2acd47760730bdca3', class: "root" }, h("div", { key: 'abfa810a7bcd47cc2c944438427e1373c5e55025', class: "minus" }, h("nano-icon-button", { key: '74234fb22f0f3d1ee1396a9407cfea9680ae3fa2', iconName: "light/minus", label: "Decrement", onClick: this.handleMinus })), h("slot", { key: '88d3bb4d96b1b8f4177ec72116c76401f3cfc2ec', onSlotchange: this.handleSlotChange }), h("div", { key: '66590f569382d6d8b7594c2774ed61a784966248', class: "plus" }, h("nano-icon-button", { key: 'efd86d3fb1618ff9b95bc3f21abd5c9a547e5177', iconName: "light/plus", label: "Increment", onClick: this.handlePlus })))));
     }
     static get watchers() { return {
         "inputElement": ["inputElementChanged"]
@@ -23845,7 +23846,7 @@ class NanoStepAccordion {
         }
     }
     render() {
-        return (h("nano-accordion", { key: '1a977444388da596ff3fbf0559ac77a274efce11', alwaysOpen: true, onNanoToggle: (event) => this.handleToggle(event) }, this.steps.map((step, index) => (h("nano-details", { open: index === this.activeStep, disabled: !step.enabled, class: {
+        return (h("nano-accordion", { key: '3933ced100bc62e13f6a2ea4e28fbfb3b47623bd', alwaysOpen: true, onNanoToggle: (event) => this.handleToggle(event) }, this.steps.map((step, index) => (h("nano-details", { open: index === this.activeStep, disabled: !step.enabled, class: {
                 step: true,
                 'step--active': index === this.activeStep,
                 'step--complete': step.complete,
@@ -23974,10 +23975,10 @@ class NanoStepBreadcrumb {
     };
     render() {
         const Wrapper = this.steps.filter((step) => step.href).length > 0 ? 'nav' : 'div';
-        return (h(Host, { key: 'c36aea91ff263fe145d0eebfe5ba34c3fb33c948' }, h(Wrapper, { key: '5399b604512fdc7254f01702b5f58fd1ab5725be', class: "step-wrapper" }, h("ul", { key: '42f2f8adddd37661873ed4b16559b558a4525af4', class: `step-list desktop ${this.cacheKey}` }, this.steps.map((step, index) => (h("li", { class: "step-item-wrapper", key: index }, h(this.ControlTag, { step: step, index: index }))))), h("div", { key: 'ab41697fed0c7d4282913f8492676008cee1ec63', class: `step-list mobile ${this.cacheKey}` }, h("nano-dropdown", { key: '73e5bba6d10f193c4e0b6b2ff43919e0b1589bcb', dialogTitle: "Steps", class: "step-dropdown" }, h("button", { key: '7054eb631e22d22ef7fbcb0c8320e77b288b381f', slot: "trigger", class: "step-trigger" }, h("div", { key: '8f0816402f31637a1402d1ee1e66bcd086ef6377', class: "step-progress-circle", role: "progressbar", "aria-valuenow": "2", "aria-valuemin": "0", "aria-valuemax": "5", style: {
+        return (h(Host, { key: '48029ac0b605c9647855037129d6ad5a98a715dd' }, h(Wrapper, { key: 'ef6d7a2c89752d634d58f28ce9a40d4d1f4b98fa', class: "step-wrapper" }, h("ul", { key: 'ee8af5b273d4053e6fab17e61a2ec2a57c91f4b2', class: `step-list desktop ${this.cacheKey}` }, this.steps.map((step, index) => (h("li", { class: "step-item-wrapper", key: index }, h(this.ControlTag, { step: step, index: index }))))), h("div", { key: 'ac2e7b33ce199a98ba9c8e96834337ef228baddf', class: `step-list mobile ${this.cacheKey}` }, h("nano-dropdown", { key: 'f5d5219f318f30ec566ea059433931b91df81f63', dialogTitle: "Steps", class: "step-dropdown" }, h("button", { key: '219b8a02f81d57d69a65d5ddb37e488da1a4cdd5', slot: "trigger", class: "step-trigger" }, h("div", { key: '534fb29581efd259190ac7595ed90c9a318ec8aa', class: "step-progress-circle", role: "progressbar", "aria-valuenow": "2", "aria-valuemin": "0", "aria-valuemax": "5", style: {
                 '--value': '' + (this.activeStep + 1),
                 '--max': '' + this.steps.length,
-            } }, h("span", { key: '1ab7e9e69dc52d2761b2c1a2c7bdb19cc0cdad0f', class: "step-progress-text" }, h("strong", { key: 'e760c2e668e5930694a873448154e3f23bf03018' }, this.activeStep + 1), " of", ' ', this.steps.length)), h("div", { key: '0afdddcdfa767f2d250986360c5ce52a37adc868', class: "step-trigger-text" }, h("div", { key: '1c200ddd5ca41a6c003c4b4bfa6c6e188a8641ac', class: "step-trigger-now" }, this.steps[this.activeStep | 0]?.title || 'Select a step'), h("div", { key: 'c600fd068470ea8ae187c74dc9616e8efb057c9e', class: "step-trigger-next" }, this.steps[this.activeStep + 1]?.title || 'Next step')), h("nano-icon", { key: '053727621ffd9a19c39b9be0766c904391ede136', class: "step-trigger-icon", name: "light/chevron-down" })), h("nano-menu", { key: '7a578be0c13a7e4edeb40500e30e58d47c917b8e' }, this.steps.map((step, index) => (h("nano-nav-item", { class: {
+            } }, h("span", { key: '78ad1b7c4abc3792084f5bcf981636a2a6164ab8', class: "step-progress-text" }, h("strong", { key: '1bdbe550c28f43cb2b912217729d144748d6c1ed' }, this.activeStep + 1), " of", ' ', this.steps.length)), h("div", { key: 'a51e378206530c72192156539fea5335615904d1', class: "step-trigger-text" }, h("div", { key: '1651e2890fd4c9b3c765c19ff87a0ac33a93c24a', class: "step-trigger-now" }, this.steps[this.activeStep | 0]?.title || 'Select a step'), h("div", { key: 'fb6829d86e5095131b1cf634694df9431871b6eb', class: "step-trigger-next" }, this.steps[this.activeStep + 1]?.title || 'Next step')), h("nano-icon", { key: 'd830c93a1b82c4bba48e868a15c4932429cf6e12', class: "step-trigger-icon", name: "light/chevron-down" })), h("nano-menu", { key: '19cd91a9422e730a20a2af144b8bdb831f6e4741' }, this.steps.map((step, index) => (h("nano-nav-item", { class: {
                 'step-item-mobile': true,
                 'step-item-mobile step-item--active': index === this.activeStep,
                 'step-item-mobile step-item--complete': step.complete,
@@ -24069,12 +24070,12 @@ class NanoTab {
     };
     render() {
         const Tag = this.href ? 'a' : 'div';
-        return (h(Host, { key: 'eeba7d6c136e8ede5c1d60ecf53696a6aac3e2c4', id: this.host.id || this.tabId, role: !this.href ? 'tab' : undefined, "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, h(Tag, { key: 'a91c1e97699d0d32329c1f17b63da3ef97040333', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
+        return (h(Host, { key: '875ed41d6262b96ec0c2a2f6d098f81c17d64b04', id: this.host.id || this.tabId, role: !this.href ? 'tab' : undefined, "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, h(Tag, { key: 'aead25be6fbc998c99feadc6117bb7cc7e9f313a', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
                 tab: true,
                 'tab--active': this.active,
                 'tab--disabled': this.disabled,
                 'tab--closable': this.closable,
-            }, href: this.href, target: this.target }, h("slot", { key: '2bab15a4a52e1eb75acecaf28b3b625ae3949716', name: "start" }), h("div", { key: 'ac5235d4d3b7802d5d7f7f5e896d996f8be68fc0', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active || this.href ? '-1' : '0', class: "tab__label" }, h("slot", { key: '5ad82f1d6061ab94268f623d1aaa82791a221b7c' })), h("slot", { key: '6f30a65a661a1a85eb3d363edb03c3e16fcf59f0', name: "end" }), this.closable && !this.disabled && (h("nano-icon-button", { key: 'f8ea9979858ab6faf98100cf970271e4262d7ab1', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
+            }, href: this.href, target: this.target }, h("slot", { key: 'a51277a59c4d77dfec9fb4a854a4b220d6385951', name: "start" }), h("div", { key: 'b9e40aed4fbb0ee84743c30c8999f53e3cff78e3', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active || this.href ? '-1' : '0', class: "tab__label" }, h("slot", { key: '0686818384592ad23d33d44975dfb5a73bdd29ce' })), h("slot", { key: 'e5352b25ead956c16a8010f86ce77aac3b79f701', name: "end" }), this.closable && !this.disabled && (h("nano-icon-button", { key: '0322668a114a903d1c253ac4aa672d836189a360', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
     }
     static get style() { return tabCss; }
     static get cmpMeta() { return {
@@ -24122,10 +24123,10 @@ class NanoTabContent {
         requestAnimationFrame(() => (this.ready = true));
     }
     render() {
-        return (h(Host, { key: 'd6b4670c20b4ba1434561d9ca12fa31da1a0e20d', id: this.host.id || this.tabContentId, style: { display: this.active ? 'block' : 'none' }, role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true', class: {
+        return (h(Host, { key: '48c39766db841b0359dd94133fa5003511ca1089', id: this.host.id || this.tabContentId, style: { display: this.active ? 'block' : 'none' }, role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true', class: {
                 ready: this.ready,
                 'nano-tab-content': true,
-            } }, h("div", { key: 'c7c7a56f8942451a8a9beca4b9126c5f6533f9e3', part: "base", class: "nano-tab-content" }, h("slot", { key: '662b14c342f751f9d7a4bcbfecb82ae8207ee219' }))));
+            } }, h("div", { key: '5e4b64e22c8db58ba785b229f5016dd1d868fab4', part: "base", class: "nano-tab-content" }, h("slot", { key: '20d01c471574e0d122edb605993d1ee36d132dc2' }))));
     }
     static get style() { return tabContentCss; }
     static get cmpMeta() { return {
@@ -24691,10 +24692,10 @@ class NanoTable {
         this.cleanUpObservers();
     }
     render() {
-        return (h(Host, { key: 'fa8f3bb2dfffee9a213d372282b5902ed56c5a2b', class: {
+        return (h(Host, { key: 'f68fb611a2b8c93efbeadc151066297d28078ef2', class: {
                 'nano-table': true,
                 'nano-table--props-ready': this.propsReady,
-            } }, this.scrollable && (h("nano-masked-overflow", { key: 'da0d773c42fb2c1b9f694fa4b2c307c2c070d67d', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: '83f36ec8ff79fa21fb1ae03f1746ccc544ffa7f3', class: "nano-table__overflow" }))), h("slot", { key: '57821514111245364971a5f85c6ff95309590eb3' })));
+            } }, this.scrollable && (h("nano-masked-overflow", { key: 'ba100eb1f9459b4e0f13260cd62510325fa080a8', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: 'cac84916ed7f96ce2ea1ee441400654358214a68', class: "nano-table__overflow" }))), h("slot", { key: 'ca3fa5224877847494b1399643cfc8d5aeb9cf45' })));
     }
     static get watchers() { return {
         "compact": ["handleCompactChange"],
@@ -25771,8 +25772,8 @@ let Rating$1 = class Rating {
         this.handleShowHideElements();
     }
     render() {
-        return (h(Host, { key: 'b129148afdc959f912a16d1e2642c3e920a0a381', class: "nano-more-less" }, h("slot", { key: '92aa96b6301d14f7b4d9aee9cc4cafbf0ff75431', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
-            h("div", { key: '73a5c457e8243cd8cf8e8ec1e681aa2c62244936', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: '48802275120ff78676a19b25f792806dd03db2c1', name: "less" }, h("button", { key: '703d054e4560cf22d571a29838dfbd649062f7ca', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
+        return (h(Host, { key: '6725c318f6b61aa4820271d17d497b5c8cb8c7dc', class: "nano-more-less" }, h("slot", { key: 'a625bedbd79f00944006a2d65c2179ab59989f1d', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
+            h("div", { key: 'cc3fb3559fc46491b3bca7ba2fd51f3eefe6725b', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: '188bc1a935508f6d65109e361774526cd869dc1f', name: "less" }, h("button", { key: 'f19d147e8644cfa3230d1c486905f1a927830284', 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, ")")))) : (''),
         ]));
     }
@@ -25993,20 +25994,20 @@ class Rating {
         else {
             displayValue = this.isHovering ? this.hoverValue : this.value;
         }
-        return (h(Host, { key: '3011ba88cafed0ec3c79d823a3abac433f68b5d1', class: "nano-rating" }, h("label", { key: 'ea6a01bc5a7f8e7fecbb16a905c472b5e1c62328', class: `rating-label${this.hideLabel ? ' visually-hidden' : ''}`, part: "label", htmlFor: this.name }, h("slot", { key: '22e31eeaed0aca337a71c1bbb39c238413f1c00c', name: "label" }, this.label)), h("input", { key: '265bd0055cbd05911611e0a5e45828d4dab7ac8c', class: "range-input visually-hidden", name: this.name, id: this.name, disabled: this.disabled || this.readonly, required: this.required, value: this.value, onFocus: () => {
+        return (h(Host, { key: '7b00ff24b403047e03fda276bc537e579aaf9337', class: "nano-rating" }, h("label", { key: '26257b3d070a664d05a6600aef8dbd107e88baaa', class: `rating-label${this.hideLabel ? ' visually-hidden' : ''}`, part: "label", htmlFor: this.name }, h("slot", { key: '8a036cdedf3a5dd00c6da73d7502571e35b2548a', name: "label" }, this.label)), h("input", { key: '08c877385050f6db8a6a330ffe2931998b3df06c', class: "range-input visually-hidden", name: this.name, id: this.name, disabled: this.disabled || this.readonly, required: this.required, value: this.value, onFocus: () => {
                 this.setFocus();
-            } }), h("div", { key: '4c0af619c68c230a5994871efdf5608870fb83e0', class: "rating-wrap" }, h("div", { key: 'e6f94c258bc04b6a4a6aad66c9364c1c811f859a', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
+            } }), h("div", { key: '85ff5c3544ad9945583bb7899b6c4c03f49fcf38', class: "rating-wrap" }, h("div", { key: 'e6456939171b5e5ab35927aeac29f4c0c136d974', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
                 rating: true,
                 'rating--readonly': this.readonly,
                 'rating--disabled': this.disabled,
-            }, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("span", { key: 'd514ae0f85be4d59ab6a2ae4496357c5d6601ba9', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (h("span", { class: {
+            }, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("span", { key: '42602e3cc956c85b6dcd5b646a8c23a0558693fc', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (h("span", { class: {
                 rating__symbol: true,
                 'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
             },
             // Users can click the current value to clear the rating. When this happens, we set this.isHovering to
             // false to prevent the hover state from confusing them as they move the mouse out of the control. This
             // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.
-            onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { key: '0caf2f0561d3b74e6891e6c2a4b970fef53298f3', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
+            onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { key: '4921301540e54a7e3d632a3ac296f53765ca3c10', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
                 clip: this.clip(displayValue),
             } }, counter.map((index) => (h("span", { class: {
                 rating__symbol: true,
@@ -26278,13 +26279,13 @@ class ResizeObserve {
         }
     }
     render() {
-        return (h(Host, { key: 'a2c57218f65a9af2297e6662c29d3a7c853092df', class: {
+        return (h(Host, { key: 'c53e9d0b32ab42d70286f2e419bafd0ac47a10ab', class: {
                 'nano-resize-observe': true,
                 'content-fit-x': this.contentFitX,
                 'content-fit-y': this.contentFitY,
                 'content-nofit-x': this.contentFitX === false,
                 'content-nofit-y': this.contentFitY === false,
-            } }, h("slot", { key: 'cf0faa31f7c1daa08238555a46699c1b731e13b8' }), !!this.notifyContentFit &&
+            } }, h("slot", { key: 'f90ceb11f59a9e7416a9279821daae7922ce497f' }), !!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" })),
@@ -27015,30 +27016,30 @@ class Select {
             disabled,
             clearControl: this.clearable,
         }))(this);
-        return (h(Host, { key: 'a2c56f43fef750f8e336a1612644761293b19bd4', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
+        return (h(Host, { key: '025066dc414ac2cb5e53c24f40ad82e7ce68695e', 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: '632d901cdff60d36ae1a410f6c252c671eac8e63', ...wrapOptions, class: {
+            } }, h(FormControlWrap, { key: 'b2a86d25b2c92627bb2f17c1c6c7a8348766141b', ...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: '387a55518ed1c74ea944008c750a0ca42a6bbbe8', ...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: '660b70b098520471d4f7653af5cc50388625cd1c', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
-            this.mask && (h("div", { key: '44f53317d26f2f8b85b5c8b397ccfd68a26eebb5', class: "select__mask" }, this.getLabel(this.value))),
-            h("input", { key: '04f3935c7f759e3767f32faecb9e6ef81a36c777', 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: 'aae86b85c3bd2c2c562468f2a33e52c7036ad69b', 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: '21156d1bae4d42e2a2d7abcaa34798d769516ee2', ...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: 'ffab8aaa7ff8fe98569a7a95a460d4cad46fec7d', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
+            this.mask && (h("div", { key: '6da5a52e4c35495ae29e74010e6329c224ca458d', class: "select__mask" }, this.getLabel(this.value))),
+            h("input", { key: '50a6562f4a2897834df1f203f5395387c882abca', 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: 'b466edd540ff40d4fdd387acfab419a03e7e1dfe', 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: 'cf744eb6bbad3ce2d8d05354d5edaf3eab07a207', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: '990e00208c403d92d1586fb0b2c4618768f5fda5', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: '54fce41f95c01e0b2ff1619209ebb15a28383677' }))), h("select", { key: '1c5ff40ac84be25c6b7075ef031b29f2b6f9b007', 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: '570d63eea44ae889bb3c5ac9714b5c7064ebaaaf', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: 'ab6331bbd2d9391e847339f9a4bd6103131465d1', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: '8176482dad3b46a3213aac5b38fe13cad13445e4' }))), h("select", { key: '8a5cbfcbd895703a459c1acd3a8a18399977d21a', 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 &&
@@ -27181,7 +27182,7 @@ let Slide$2 = class Slide {
         });
     }
     render() {
-        return (h(Host, { key: '3de94ff45cb6dddcca7f0097f3376361c2666f7e', class: "nano-slide" }, h("slot", { key: '9998d9102bdc69eecd28752b4a2c130497b34d06' })));
+        return (h(Host, { key: '5942e883ec56c489c9ff7c7172f45bd804b3e269', class: "nano-slide" }, h("slot", { key: '7224e97679d00b8e1f4957898a1c0c1ddcd101cc' })));
     }
     static get watchers() { return {
         "ready": ["readyChange"]
@@ -30163,15 +30164,15 @@ class Slides {
         this.destroyflickity();
     }
     render() {
-        return (h(Host, { key: 'ab3c7c4aee4786601f82e6d83ddb2de195ff8fd7', class: "nano-slides" }, h("div", { key: 'fbe7dadaddefd92daef76bec6e01dfb7a11aded7', class: {
+        return (h(Host, { key: '5d1c313e7391e5fadf9a282e8e0d620a826c8ae2', class: "nano-slides" }, h("div", { key: 'b9cdbd89391725d29ddb3b9f3ac57346712bf94a', class: {
                 slideshow: true,
                 ready: this.ready,
                 'not-ready': !this.ready,
-            }, part: "base" }, h("div", { key: 'efef77051a0db1a52586ce3e12baee3cb443d312', ref: (div) => (this.flickityEl = div), class: {
+            }, part: "base" }, h("div", { key: 'a82230810b978fe9760d245e668e9a683ee12ad4', ref: (div) => (this.flickityEl = div), class: {
                 'flickity-container': true,
                 'slides-ready': this.slidesReady,
                 'slides-not-ready': !this.slidesReady,
-            }, part: "slide-container" }, h("slot", { key: 'cbdf063d45eb964328ade1026c897e02e27567f2', onSlotchange: () => this.update() })), h("div", { key: 'a68ae1524777a0fbb9369135e4f802cd70b8249f', class: "ui-extras" }, h("slot", { key: 'ea8f0636dcfabaa7704ed86fa10cdbd5d21db872', name: "ui" })), this.slideCount > 1 && (this.pager || this.navbtns) && (h("div", { key: '078617be5a5af3ea80886927f2f2b6c8bafd8427', class: "pagination", part: "pagination" }, this.navbtns && (h("button", { key: 'fb0c9671d14839940f71640edf42039f28e81ca1', class: "flickity-button flickity-prev-next-button previous", part: "navigation-button navigation-button--previous", "aria-label": "Previous slide", onClick: () => this.slidePrev(), disabled: this.iCurrentSlide === 0 && !this.options.wrapAround }, h("span", { key: '4b535329bbcc1a13cb13e07b6885e33127c21d25', class: "button-icon button-icon--previous", part: "navigation-icon" }, h("slot", { key: '160d5479d37a91b4b210b3f477d780a39f93049d', name: "previous-icon" })))), this.pager && (h("div", { key: '370e6b8f4991efa3a19362f7e886ea8650cc92ad', class: "flickity-page-dots" }, Array.from({ length: this.slideCount }).map((_, index) => (h("button", { part: "pagination-item--active", key: index, class: {
+            }, part: "slide-container" }, h("slot", { key: 'bc1f8563f4f4cd784ae9de46ccac11bc49e32cc3', onSlotchange: () => this.update() })), h("div", { key: 'e0c6dd93e882d2edf16e86f4e6898e5aed24f6b7', class: "ui-extras" }, h("slot", { key: '5b6de873affa6ce865ee9192a59a533edf9b839f', name: "ui" })), this.slideCount > 1 && (this.pager || this.navbtns) && (h("div", { key: '3c5108510d1e65d96a3174f15a161dcb46e46144', class: "pagination", part: "pagination" }, this.navbtns && (h("button", { key: 'db9adeb169165d2c2a789f9e4895ecb80264e0b4', class: "flickity-button flickity-prev-next-button previous", part: "navigation-button navigation-button--previous", "aria-label": "Previous slide", onClick: () => this.slidePrev(), disabled: this.iCurrentSlide === 0 && !this.options.wrapAround }, h("span", { key: '1e3f8cb53b5da081be8271cf9c63fbd4e646bdda', class: "button-icon button-icon--previous", part: "navigation-icon" }, h("slot", { key: '63ac42f3e49bac359f42b1351292ecaaa61b595d', name: "previous-icon" })))), this.pager && (h("div", { key: '832719a63ff65cde7b5ca17dd5978bdaefc7a8bc', class: "flickity-page-dots" }, Array.from({ length: this.slideCount }).map((_, index) => (h("button", { part: "pagination-item--active", key: index, class: {
                 'pagination-btn': true,
                 'pagination-btn--active': this.isActive(index),
                 'is-selected': this.isActive(index),
@@ -30180,8 +30181,8 @@ class Slides {
                 if (this.isActive(index))
                     return;
                 this.slideTo(index);
-            } }, h("span", { class: "pagination-btn__label" }, "Go to slide ", index + 1)))))), this.navbtns && (h("button", { key: '8c8841103ecf7e698326216cd9d19616098ba087', class: "flickity-button flickity-prev-next-button next", part: "navigation-button navigation-button--next", "aria-label": "Next slide", onClick: () => this.slideNext(), disabled: this.syncflickity?.slides.length ===
-                this.iCurrentSlide + 1 && !this.options.wrapAround }, h("span", { key: '038894a16910a9f7156d69ddf02805cd7a4b3db2', class: "button-icon", part: "navigation-icon" }, h("slot", { key: 'fce4e6b92873f9805e8d2d5db6eac1afb04bd9f2', name: "next-icon" })))))))));
+            } }, h("span", { class: "pagination-btn__label" }, "Go to slide ", index + 1)))))), this.navbtns && (h("button", { key: 'ec472210b2562701da6fca63a33f5e3a192695bf', class: "flickity-button flickity-prev-next-button next", part: "navigation-button navigation-button--next", "aria-label": "Next slide", onClick: () => this.slideNext(), disabled: this.syncflickity?.slides.length ===
+                this.iCurrentSlide + 1 && !this.options.wrapAround }, h("span", { key: 'a27d88c1264de80d79b8b1ccee08bb0f7cb7d019', class: "button-icon", part: "navigation-icon" }, h("slot", { key: '01ff479ea5b2208abcbfc72a902914a37e571721', name: "next-icon" })))))))));
     }
     static get watchers() { return {
         "options": ["optionsChanged"],
@@ -30939,7 +30940,7 @@ class Sortable {
         }
     }
     render() {
-        return (h(Host, { key: '845be657a2bbfb42718ee9e8d4672ff31756fcc3', class: "nano-sortable" }, h("div", { key: '9c603a11407cb62ffe50bb6cfd89b47994df21e9', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (h("div", null, str)))), h("slot", { key: '36a5e7111ed26a7714206c449ffc7be1a46337d1' })));
+        return (h(Host, { key: '0117648295aac00c85009e3af3d446a828a5aacb', class: "nano-sortable" }, h("div", { key: '5b740c9d6049933c342d2ebb72a89f94362e2060', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (h("div", null, str)))), h("slot", { key: '3760f1ef3178eac54451b1482247082e058b1437' })));
     }
     static get watchers() { return {
         "itemSelector": ["handleItemSelectorChange"],
@@ -31938,12 +31939,12 @@ class Sticker {
         this.hasBootstrapped = false;
     }
     render() {
-        return (h(Host, { key: '9760c52934c0b3d6459598dfa3a197927cf7e878', sticky: !this.isRootSticker && !this.stickToEle && this.isSticky, hide: this.hide && this.isStuck, siblings: this.stuckCounter, index: this.stickerIndex, stuck: this.isStuck && this.isSticky, "placed-bottom": this.positions.includes('bottom'), "placed-top": this.positions.includes('top'), "placed-end": this.positions.includes('end'), "placed-start": this.positions.includes('start'), class: "nano-sticker" }, h("div", { key: 'abbbd0a9b785792f00a75d411fbc3b882f605032', class: {
+        return (h(Host, { key: 'ee5683148e0b20facf45727a35a8e58168386011', sticky: !this.isRootSticker && !this.stickToEle && this.isSticky, hide: this.hide && this.isStuck, siblings: this.stuckCounter, index: this.stickerIndex, stuck: this.isStuck && this.isSticky, "placed-bottom": this.positions.includes('bottom'), "placed-top": this.positions.includes('top'), "placed-end": this.positions.includes('end'), "placed-start": this.positions.includes('start'), class: "nano-sticker" }, h("div", { key: '3063fd08b7a50d8c27a26acd8de37e2995d1b822', class: {
                 sticker: true,
                 sticky: this.isRootSticker && this.isSticky,
                 stuck: this.isStuck && this.isRootSticker && this.isSticky,
                 hide: this.isRootSticker && this.hide && this.isStuck,
-            }, ref: (div) => (this.sticker = div) }, h("div", { key: 'de9552b69657aad9f2015dfa1470a197d490520c', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: 'baafb74a16688cd9e1839eb617ceb46fb7e2b23f' })))));
+            }, ref: (div) => (this.sticker = div) }, h("div", { key: '70289b3224edd38bee35a856c4e7d02a8b631ab1', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: '20df0df1966b2ca4097a7baad492e5f35c5e77c5' })))));
     }
     static get watchers() { return {
         "trigger": ["updateTriggerOffset"],
@@ -32232,10 +32233,10 @@ class Tooltip {
             this.popover.destroy();
     }
     render() {
-        return (h(Host, { key: '79951f5782653b519fabd8345c2ec0af5cf86f2d', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, h("slot", { key: '6698cb226357c92807393c1fe2f73991c13ead07', onSlotchange: this.handleSlotChange }), h("div", { key: 'dbb8bda886e15850c17c06dca8d9f8924cb62486', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, h("div", { key: '9b1f5692d592331470c0159229aab8fbcb091b21', part: "base", ref: (el) => (this.tooltip = el), class: {
+        return (h(Host, { key: '4cb6b736687f8d9239977489efe329a075114992', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, h("slot", { key: '01ee007dff43ac6955707da369d29d123b01b7be', onSlotchange: this.handleSlotChange }), h("div", { key: 'c9f487295d223825983dc5882e3ec9bf9e81d250', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, h("div", { key: 'b1918debb6975af209042a030536fa05d737b170', part: "base", ref: (el) => (this.tooltip = el), class: {
                 tooltip: true,
                 'tooltip--open': this.open,
-            }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { key: '1e6f35227072b696e2cea3cbf93eea26285b20cf', name: "content", onSlotchange: () => this.setLabel() }, this.content), h("div", { key: 'dab2de407dae223b4ac229283d9dedb8a69e4919', class: "tooltip-arrow", "data-popper-arrow": true })))));
+            }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { key: 'bb040cfddec62e9110ad2ba3c143a2f9f8a0aa48', name: "content", onSlotchange: () => this.setLabel() }, this.content), h("div", { key: '0471547ce6acc7c036bb23a820fcb74998a22d75', class: "tooltip-arrow", "data-popper-arrow": true })))));
     }
     static get watchers() { return {
         "content": ["setLabel"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "8.21.0",
+  "version": "8.23.0",
   "sideEffects": false,
   "description": "A collection of Oxford Nanopore corporate / digital webcomponents",
   "type": "module",
@@ -56,7 +56,7 @@
     "smart-array-filter": "^4.0.2",
     "stencil-wormhole": "3.2.1",
     "tyqs": "^0.1.3",
-    "@nanoporetech-digital/style": "8.21.0"
+    "@nanoporetech-digital/style": "8.23.0"
   },
   "devDependencies": {
     "@algolia/client-search": "^4.22.1",