@nanoporetech-digital/components 8.3.2 → 8.4.1

package/hydrate/index.mjs

@@ -14041,7 +14041,9 @@ class FieldValidator {
             this._valid = this.activeForm.checkValidity();
             this.internalValidate = false;
         }
-        this.nanoPayloadChange.emit(this._store.state);
+        setTimeout(() => {
+            this.nanoPayloadChange.emit(this._store.state);
+        }, 20);
     };
     /**
      * Handles nano field value changes and passes to store
@@ -14134,7 +14136,7 @@ class FieldValidator {
             this.activeForm.removeEventListener('invalid', this.handleFormInvalid, true);
     }
     render() {
-        return (h(Host, { key: '145b307561c5a2a35d5b6b6d88d03c88ba8a41b4', class: "nano-field-validator" }, this.userForm && h("slot", { key: '2a16d6a8f32afe2c22522e240e117ccf8446edc5' }), !this.userForm && (h("form", { key: 'c72a5b25d958c97d28c78279b05fa7a3643a994e', ref: (f) => (this.activeForm = f) }, h("slot", { key: '7983e9fc33115b5448b980cbcba0940163521db8' })))));
+        return (h(Host, { key: 'bb60437392e410d528560b9a8a63c58b13f25495', class: "nano-field-validator" }, this.userForm && h("slot", { key: '7e9ff598dce291e80b53638453a8544398382cdd' }), !this.userForm && (h("form", { key: '68241c190268172ff742839ff57a5ac1ff66ca8e', ref: (f) => (this.activeForm = f) }, h("slot", { key: 'e89427bf668eb47217accdb2844d14cb4c3abd36' })))));
     }
     static get watchers() { return {
         "userForm": ["userFormChange"],
@@ -14783,7 +14785,7 @@ class GlobalNav {
         });
     }
     /**
-     * MyAccount data automatically set via `myAccountUrl`.
+     * MyAccount data is automatically set via `myAccountUrl`.
      * Alternatively you can directly provide a JSON object which is useful for SSR
      * (ref https://myaccount.nanoporetech.com/nav_bar_data.json)
      */
@@ -15092,7 +15094,7 @@ class GlobalNav {
     };
     handleSearchCloseEvent = (e) => {
         if (e.target.classList.contains('gn__search-dropdown')) {
-            this.searchBarShown = false;
+            requestAnimationFrame(() => (this.searchBarShown = false));
         }
     };
     handleSearchTermInputEvent = (e) => {
@@ -15193,33 +15195,34 @@ class GlobalNav {
     }
     render() {
         const bpps = this.bpPartials;
-        return (h(Host, { key: 'a11b011a86053bb118d2a2718fde17ba98a818a2', class: {
+        return (h(Host, { key: '3964e8a3aab86d4252876816ca934c69e75da22b', class: {
                 'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
                 'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
                 'nano-global-nav': true,
-            } }, h("div", { key: '883aa872acfdd67b58b11bb6bd36f520e21308a6', class: {
+            } }, h("div", { key: 'fc2f728b3c4412913ffc2d18c07d057bf6e0bf87', class: {
                 gn: true,
                 'gn__search-open': this.searchBarShown,
-            } }, h("nano-drawer", { key: '8eab86995bdb7a64ab20a5922f8fed085c00dd9a', ref: (el) => (this.overflowMenu = el), label: "Main menu", part: "drawer", class: "gn__drawer nano-theme-dark", placement: "start", open: this.overflowOpen, onNanoAfterHide: () => (this.overflowOpen = false), onNanoAfterShow: () => (this.overflowOpen = true) }, h("div", { key: 'bec24a05669c928f332f52531da350fede81e09b', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: '79ea2417881502eea913922536255ff07a520dec', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
+            } }, h("nano-drawer", { key: '9a2c9109327ff9cd4eb2553df7e93571a29aa237', ref: (el) => (this.overflowMenu = el), label: "Main menu", part: "drawer", class: "gn__drawer nano-theme-dark", placement: "start", open: this.overflowOpen, onNanoAfterHide: () => (this.overflowOpen = false), onNanoAfterShow: () => (this.overflowOpen = true) }, h("div", { key: '649c672f237ce2145eda6c8988744f6709835615', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: 'd002c07a9eb1cdcc4e188e5b146ce8a11257ab98', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
             ? bpps.mainMenu.tpl()
-            : '', h("slot", { key: '139e672405b09a05784765c02fdcd2937ef72ee8', name: "overflow" }))), h("div", { key: '52f185901c3d7b53f94fe23598941c836177ca4f', class: "gn__menu-bar-wrapper" }, h("div", { key: '8fa34c4322037f38f2804e385c90155ba0cc6566', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: '807c175fb7c54c6e88fe03ef13b105b601110fc9', class: `gn__main-menu ${this.shouldResize ? 'resizing' : ''}`, part: "main-menu", ref: (el) => (this.mainMenu = el) }, this.breakpoint > bpps.mainMenu.breakpoint && (h("nano-icon-button", { key: '4e524e4266f8b4c980bad91a821da3864d6ef7c5', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: 'cd5251ce86c170167cecc3927caeb3d96c46c038', name: "logo" }, h("a", { key: 'cba3f5560b1285b99e893adab8df08739d7a55ba', href: this.logoUrl, class: "gn__logo-link", part: "logo-link" }, this.breakpoint <= bpps.logo.breakpoint ? (h("img", { src: getAssetPath('../nano-assets/ont-logo.svg'), alt: `Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,
+            : '', h("slot", { key: 'b6bf65e8ed92636f1eba4b376ecb2fd617bcd67f', name: "overflow" }))), h("div", { key: 'b7a5e9d074b63f1841d3946d0166389c73161f25', class: "gn__menu-bar-wrapper" }, h("div", { key: '6b4d27a83ed4cbf3a62c0b924b08c887e415904a', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: '64acb1e7f44c8931bd928e0c6be01eaf83cf47ff', class: `gn__main-menu ${this.shouldResize ? 'resizing' : ''}`, part: "main-menu", ref: (el) => (this.mainMenu = el) }, this.breakpoint > bpps.mainMenu.breakpoint && (h("nano-icon-button", { key: '49dc9cf7e3d75dee49d7a50defde7a260c33f867', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: 'ffb1b38b1e7682ab2fe26d44a0c9686306634197', name: "logo" }, h("a", { key: 'a8427d3042b4871027a08b5ea993c57659ab12c0', href: this.logoUrl, class: "gn__logo-link", part: "logo-link" }, this.breakpoint <= bpps.logo.breakpoint ? (h("img", { src: getAssetPath('../nano-assets/ont-logo.svg'), alt: `Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,
                             (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--large", width: "152", height: "36", part: "logo logo--large" })) : (h("img", { src: getAssetPath('../nano-assets/ont-wheel.svg'), alt: `Oxford Nanopore Technologies logo. A stylised representation of a nanopore,
-                            (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--small", width: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: '49ee4adade1ad0cda74fbb3fbd210f2469057b3e', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '5600be22c0fcd69fb51a2e1ee9a5f4b3ea1a8c35', class: "gn__main-menu-actions" }, h("nano-dropdown", { key: '24eabdc75c19c564382096ca71b7f1f8ad36a3b0', dialogTitle: "Search Oxford Nanopore Technologies", placement: "bottom", class: "gn__search-dropdown", skidding: -30, distance: 25, open: this.searchBarShown, onNanoAfterShow: this.handleSearchOpenEvent, onNanoAfterHide: this.handleSearchCloseEvent, autoOpen: !!this.searchIndices.length }, h("nano-icon-button", { key: '458613e1f5e9fe71ba73bc67b30725e3394251ba', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), !!this.searchIndices.length && (h("form", { key: '844fb0cdc10c8c9e1e0e2c9d8a035c4e1e651b7f', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '34493f43a9ce0a4143f2b506d3ff2c5983c0ebf2', part: "search-select", label: "Which site do you wish to search in?", mask: true, hideLabel: true, value: this.activeIndex?.index, onNanoChange: this.handleSearchIndexChangeEvent }, this.searchIndices.map((index) => (h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index))))), h("nano-input", { key: 'b8f9415058b665e618509e080a8d99de1d6875cf', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, onNanoChange: (e) => {
-                this.handleSearchTermChangeEvent(e.detail.value);
-            }, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: 'fdce329dcd11f5fd47b80407cca87e4ba5586b6c', slot: "end", name: "light/magnifying-glass" }), h("nano-datalist", { key: '9647d74f50b93ffa2f7164d661382a7ba23a1518', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: 'f0b1bb77607ddbe71fe15a7ec0b4a0211e6c56b9', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: '0c87148566edcae34bfa237cd4fb8a4a8a482ee8' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
-            this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
-                    searchInsight.sendClick({
-                        index: this.activeIndex.index,
-                        eventName: 'Global nav quick search - search result clicked',
-                        queryID: this.autocompleteResults.queryID,
-                        objectIDs: [hit.objectID],
-                        positions: [i + 1],
-                    });
-                } }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
-            h("nano-option", { key: 'a7b6d4ff2b9d356342bcb2fbbd03356d982953f3', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
-        ]))))), h("div", { key: '884fe3776886eaf768355c60ba5a8eb7d41caa54', class: "gn__cart" }, h("nano-icon-button", { key: '17d8b0611855c47d200504c7885c270f20736109', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }), !!this.cartCount && (h("nano-badge", { key: 'e00aed6a3ba8165f56738ab5494fabc66af68381', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount))), this.breakpoint <= bpps.contact.breakpoint
+                            (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--small", width: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: '51d372b7aaa316b4d1ddc945bf0b3c5cdba579af', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '7af369c343889985cfda4d596576e6ad0913f34c', class: "gn__main-menu-actions" }, !this.myAccountData ||
+            (!!this.searchIndices.length && (h("nano-dropdown", { key: 'f122c285ba5966efe5fdb5698ab759fa89eb9282', dialogTitle: "Search Oxford Nanopore Technologies", placement: "bottom", class: "gn__search-dropdown", skidding: -30, distance: 25, open: this.searchBarShown, onNanoAfterShow: this.handleSearchOpenEvent, onNanoAfterHide: this.handleSearchCloseEvent, autoOpen: !!this.searchIndices.length }, h("nano-icon-button", { key: '8fe139d799eeb34b1ff129808338ce8d6304d262', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), h("form", { key: '95d27edc95e00c96ce9751e9501429e0062bcab6', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '109461b01a0cbd6ee5c0d0120d93802f8b4a2642', part: "search-select", label: "Which site do you wish to search in?", mask: true, hideLabel: true, value: this.activeIndex?.index, onNanoChange: this.handleSearchIndexChangeEvent }, this.searchIndices.map((index) => (h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index))))), h("nano-input", { key: '81d5c3531557500daebe167defe8b068909ffe9f', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, showInlineError: false, onNanoChange: (e) => {
+                    this.handleSearchTermChangeEvent(e.detail.value);
+                }, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: '4c3dc50a07877f4c10bbebe2b91d5cc2a6924aee', slot: "end", name: "light/magnifying-glass" }), h("nano-datalist", { key: 'ab9037d4d2c5dc5bca7cdb21ced7a50a5ea181b1', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '794cbd8cc6fd876e931457c93caad690be445400', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: 'de620a03a8bba906542c10e46d1529f1b6a63327' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
+                this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
+                        searchInsight.sendClick({
+                            index: this.activeIndex.index,
+                            eventName: 'Global nav quick search - search result clicked',
+                            queryID: this.autocompleteResults.queryID,
+                            objectIDs: [hit.objectID],
+                            positions: [i + 1],
+                        });
+                    } }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
+                h("nano-option", { key: '35962d666c2f47c4952f1a06324db3db186a21e1', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
+            ])))))), h("div", { key: '930f8a1adb7566478ec7e9e96b08ecdefecfd4b8', class: "gn__cart" }, h("nano-icon-button", { key: '76f447b14988391240284c66d1e6e347c8873067', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }), !!this.cartCount && (h("nano-badge", { key: '389552b85553b498ce5b799dc182f73933dadc59', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount))), 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" }, h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login"))))))), h("nano-global-search-results", { key: '3b292618916afe3f08fc456c105df868725ddb26', part: "site-search-results" }, h("div", { key: '8bb4b9fe8389ac2f4aa2784294fd1bd1f736e9c4', class: "gn__site", part: "site-wrapper" }, h("slot", { key: 'cf2327c16e479d36cc4f2dcd67d2c026518a3ebc' }))))));
+            : '', 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" }, h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login"))))))), h("nano-global-search-results", { key: '38b900fdb5dbcd1d24642c8862c320c473de6dc3', part: "site-search-results" }, h("div", { key: 'b5b824f4a54aa2989ca0a359f7c7b74ae5e6d777', class: "gn__site", part: "site-wrapper" }, h("slot", { key: '02dd2c08252ba31c972fffe9c956e7ead76f61ef' }))))));
     }
     static get assetsDirs() { return ["assets"]; }
     static get watchers() { return {
@@ -15534,12 +15537,12 @@ class GlobalSearchResults {
         this.ro.observe(this.el);
     }
     render() {
-        return (h(Host, { key: 'c3e9e501af8fea7703a69a11249b209a2b249d70', class: {
+        return (h(Host, { key: 'c88b1cd5b5fcf63cc3961cc3e190fe4432349b03', class: {
                 small: this.currentWidth < 780,
                 'nano-global-search-results': true,
-            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : undefined }, h("nano-algolia", { key: 'f4778fa577bb79485a927565e938032db14981e3', 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: 'e27f4efbd7405ca852f9e6ea96d3a53b4ded8041', 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: '274742b09cfbccacda5776856a5a63fd3f256d5e', slot: "template" }, 
+            onNanoFilterChanged: () => this.handleNanoFilterChanged() }, h("template", { key: 'a614cc2ad29144b19555cf2106b8a38982817918', 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">
@@ -15917,7 +15920,7 @@ class GlobalSearchResults {
                   </div>
                 </div>
               {{ /if }}
-            </div>`), h("div", { key: 'f34469ff51c7c07f4451112bfe1aa3a3e0e2d47c', slot: "output" }), h("slot", { key: '099de4e70571d4d4de3c8bc279a4b62f44dd6191' }))));
+            </div>`), h("div", { key: 'c759117717909ec2ca8973bd4de0175e06fd73fa', slot: "output" }), h("slot", { key: '45d84a723310889c1acb75b2563839e6bd164296' }))));
     }
     static get watchers() { return {
         "algoliaEle": ["handleAlgoliaCredsChange", "handleAlgoliaIndexChange", "handleAlgoliaEleChange"],
@@ -15974,10 +15977,9 @@ function ConstructibleStyle(opts = {}) {
         if (!opts.cacheKeyProperty) {
             opts.cacheKeyProperty = propertyKey;
         }
-        const { componentWillLoad, render} = target;
-        if (!componentWillLoad)
-            console.warn(`ConstructibleStyle requires you to have a \`componentWillLoad\` lifecycle method in \`${target.constructor.name}\`. Failure to add this function may cause ConstructibleStyle to fail due to StencilJS build optimizations.`);
+        const { render} = target;
         {
+            // adds a style element to the component
             target.render = function () {
                 const cssText = typeof this[propertyKey] === 'function'
                     ? this[propertyKey]()
@@ -16032,7 +16034,7 @@ function getHostChildren(node) {
 
 const gridCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--grid-col-gap:var(--nano-spacing-md);--grid-row-gap:var(--nano-spacing-md);--grid-align-items:start;--grid-justify-items:normal;--current-grid-size:\"grid size: s\";container-type:inline-size;display:block}:host .grid{display:grid;gap:var(--grid-row-gap) var(--grid-col-gap);block-size:inherit;min-block-size:inherit;place-items:var(--grid-align-items) var(--grid-justify-items)}:host([show-helper]:not([show-helper=false])){position:relative}:host([show-helper]:not([show-helper=false])) .grid--helper{position:absolute;inset:0;pointer-events:none;display:grid !important;overflow:hidden}:host([show-helper]:not([show-helper=false])) .grid--helper::before{content:var(--current-grid-size);font-size:30px;position:absolute;inline-size:100%;inset-inline-start:0;text-align:center;inset-block-start:50%;transform:translateY(-50%);color:rgba(0, 0, 0, 0.2);text-transform:uppercase;z-index:99;pointer-events:none}:host([show-helper]:not([show-helper=false])) .grid__helper-item{background:hsla(204, 80%, 72%, 0.25);block-size:100vh;inline-size:100%}";
 
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
         r = Reflect.decorate(decorators, target, key, desc);
@@ -16042,7 +16044,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
                 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$1 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
         return Reflect.metadata(k, v);
 };
@@ -16206,7 +16208,7 @@ class Grid {
         this.constructSizeArray();
     }
     render() {
-        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" })))))));
+        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" })))))));
     }
     static get watchers() { return {
         "sTpl": ["constructSizeArray"],
@@ -16252,9 +16254,9 @@ class Grid {
         "$attrsToReflect$": [["sSize", "s-size"], ["mSize", "m-size"], ["lSize", "l-size"], ["xlSize", "xl-size"], ["sCols", "s-cols"], ["mCols", "m-cols"], ["lCols", "l-cols"], ["xlCols", "xl-cols"], ["xxlCols", "xxl-cols"], ["showHelper", "show-helper"]]
     }; }
 }
-__decorate([
+__decorate$1([
     ConstructibleStyle({ cacheKeyProperty: 'cacheKey' }),
-    __metadata("design:type", Object)
+    __metadata$1("design:type", Object)
 ], Grid.prototype, "styles", void 0);
 
 /**
@@ -16275,7 +16277,7 @@ class GridItem {
      * m-row-start-2
      */
     render() {
-        return hAsync("slot", { key: '8df6ce243d4a12c9cfe966f33d70b181eeb84b43' });
+        return hAsync("slot", { key: '9a50a1034bd70b2d0c461f01acdb6b0484e492d3' });
     }
     static get style() { return ":host { display: inline-block; }"; }
     static get cmpMeta() { return {
@@ -16393,7 +16395,7 @@ class Hero {
     };
     render() {
         const rtl = this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';
-        return (h(Host, { key: 'fd48435b9a236d4b0a13853b495fa6e7a17d759f', class: "nano-hero" }, h("div", { key: '6d4a1d9deb8bdbb1a2c6d55bcedecf03dafbe1d3', class: {
+        return (h(Host, { key: '8270c80717ac41cc4cd5bedb577b131fe01ac967', class: "nano-hero" }, h("div", { key: '8b04bda451af03b648beb5576cd0badd48364aab', class: {
                 hero: true,
                 'hero--light': this.theme === 'light',
                 'hero--secondary': this.hasSecondaryContent,
@@ -16404,9 +16406,9 @@ class Hero {
                 'hero--hasbg': this.hasBg,
                 'hero--backbtn': this.hasBackBtn,
                 'hero--sub': this.level === 'sub',
-            } }, h("div", { key: 'd6b6675e229a107dd71d12e6b5c3b2decd36c86d', class: "hero__bg-wrap" }, !!this.imgSrc && (h("nano-img", { key: 'eeaa0dce87aedba0e30d3a73ae1bc5732a284732', class: "hero__img", lazy: false, background: true, srcSet: this.imgSrcSet, src: this.imgSrc }, h(this.HeroContent, { key: 'fe87fdc964d9b97611014a905620d43ef2d9b01d' }))), !this.imgSrc && [
-            h("div", { key: '74d6e0d9eb61110f8f395258efd2541f795de7f4', class: "hero__bg-slot" }, h("slot", { key: '125bbc331e99605bd2795a4720c0ca53fb4b1862', name: "background" })),
-            h(this.HeroContent, { key: '15ff774728e7dd459bbbaab916b0b2577989aac8' }),
+            } }, 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' }),
         ]))));
     }
     static get watchers() { return {
@@ -16601,7 +16603,7 @@ class Icon {
                 (this.name.indexOf('arrow') > -1 ||
                     this.name.indexOf('chevron') > -1) &&
                 this.isRtl());
-        return (h(Host, { key: '754a53ed280fd9bcb1dcbec89eba4180f491d1b8', class: {
+        return (h(Host, { key: '0bc1c17119f0e49b9798a1b61a4a768f6406129f', class: {
                 loading: this.isLoading,
                 'flip-rtl': !!flipRtl,
                 'nano-icon': true,
@@ -16903,16 +16905,16 @@ class Img {
         const bgStyle = this.loadSrc
             ? { 'background-image': `url(${this.loadSrc})` }
             : {};
-        return (h(Host, { key: '640969f1b1d3872d0314b455fd602be4e68955cc', class: "nano-img" }, h("div", { key: 'fdc45639dabc5872b5a00e7db92865efd5a2ac77', class: "img" }, h("div", { key: '5b9cc3e0ef11e3941a6085625b1d9f5e9d6de56a', class: "img__loader n-loader-skeleton" }, "Loading"), !!this.background && (h("div", { key: 'd8c3a0f6bf742608335189f33ba076d70b08d4a9', class: {
+        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: {
                 loaded: this.hasLoaded,
                 img__bg: true,
                 'no-height': this.autoHeight === 'image',
-            }, style: bgStyle }, h("slot", { key: 'ec35744e264cb18d1ec97a4e9c84f0c7a2d80a3e' }))), h("img", { key: 'be687a80241f559f7df7567854e1a59812437624', class: {
+            }, style: bgStyle }, h("slot", { key: '29bab2a5c86b3dfe18db8936af77674c44d743d0' }))), h("img", { key: 'e6731b48ed137d97aa98e64dc55488d56724f672', 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: '62398606dab9cc346ffb2acbbb913458684030db', 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: '0f1ce7d8b82adc19bfa459ff2adae708a4263c6e', class: "img__observer", onNanoResizeStateChange: this.onResize, states: this.imgStates }))));
     }
     static get watchers() { return {
         "_src": ["_srcChanged"],
@@ -17842,7 +17844,7 @@ class IntersectionObserve {
         this.removeIO();
     }
     render() {
-        return (h(Host, { key: 'be24c77cb033ff3fdb33b37cd8414edd99785795', class: "nano-intersection-observe" }, h("slot", { key: 'e1cf1e9175a9249c6f6f5b202d27a3f9bf937bac', ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange })));
+        return (h(Host, { key: 'aadf019427b2d2c3020fd6e667d5932fd14aea45', class: "nano-intersection-observe" }, h("slot", { key: 'eae74417c304de7b8e377229b603d88468a5c7f5', ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange })));
     }
     static get watchers() { return {
         "root": ["handleRootChange"],
@@ -18187,7 +18189,7 @@ class MaskedOverflow {
         }
     }
     render() {
-        return (h(Host, { key: '5e3818d9ff886b75194db22fd7f42af484fe17d7', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: '991fa196ffc2eb42c907519bb8187f15c9868161', part: "base", class: {
+        return (h(Host, { key: '49485c7d6a96e8dd122f862abd2bd2f95b2343e7', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: 'acd0541992b9dda0c1ab6414e67cd8a71f429918', part: "base", class: {
                 onav: true,
                 [`onav--${this.orientation}`]: true,
                 'onav--has-scroll-controls': this.hasScrollControls,
@@ -18196,12 +18198,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: 'e6958d0060691af605afa2c6fd53194b4284f29d', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '167bb7fa1450371ceab4dc8467e5debbd672101f', part: "scroll-button scroll-button-prev", class: {
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'ba25b3551a2b6be4906d538cbaabf0ba8cb859f6', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '72ca6ae1ef0300fc91a95d347702bac94fec97ac', 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: '8d8d7c305c0c89738d9660aff6b75ca029506ab7', 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: 'fdd83d15c431538a2992887e58aed07e9393d411', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: 'a1fba6d2c2e62e05b5a062c563f22c8e2b0222a4', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: 'a6d602d437702479bd67d71bd5ac838d0ae02941', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: '30eae4cf86f7bead75734736b7192420255a64fc', part: "scroll-button scroll-button-next", class: {
+                : 'light/chevron-up' })), h("div", { key: '34893f5e055e8b44a78cb0706e974ee45261bdb8', 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: '19ea27abc4878c5ab034e8ac0ee7085f19607a92', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: '6cfdb83598367d649e6705fe709e89d8a8b505a6', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: '43f3164d6c962f951ac672f79d48943c44e0514e', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'eaa09e8faa9343fca660d1f2e0a4b5366b7c6668', 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'
@@ -18642,14 +18644,14 @@ class MenuDrawer {
     disconnectedCallback() {
     }
     render() {
-        return (h(Host, { key: '39da1804ff710702cacbbadf0d8bb1d47c2d732b', class: {
+        return (h(Host, { key: '4ad542c84da0045168bcee1df744cb94c2a1196e', 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: '90b0e1a831d49af7d81fe5ca2da977a697c08ee7', ref: (div) => (this.containerDiv = div), class: "container" }, h("div", { key: '37d6443befe1a93169e15a8becbefe974c8a8d1c', class: `content-wrap ${this.secondaryOpen ? 'secondary-open' : ''}` }, h("nav", { key: '7373abf5ec1ef567407abedc4b786ae3d51c9e93', ref: (div) => (this.contentDiv = div), class: "content" }, h("div", { key: '6f243a3de7b59072d43fac86c1d9c8acd62ec9d4', class: "head" }, h("button", { key: '6bf443330190314bf84583fc540cd2cb821f4f53', onClick: this.toggle, class: "collapse-btn" }, h("nano-icon", { key: '87025c0165c2e61bd51724ef15e8e1b110ded3e4', name: "light/arrow-right-to-line" }), h("span", { key: '6bfd0162936fc4ce0546194a227960ce9dd718a1', class: "visually-hidden" }, "collapse / expand menu"))), h("slot", { key: '07039af321133321dedceaaff462472bd22b4f12' }), this.slotCtrl.has('foot') && (h("div", { key: '252fe22caae99dc7ba850207a92f9390665bf3c0', class: "foot" }, h("slot", { key: 'f142bd0852c6fa01fcc3fba2de5528d1d96d03b7', name: "foot" }))))))));
+            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, h("div", { key: 'b00cad9c3696b9c373e8d98fcd1f86c2c7b23aa2', ref: (div) => (this.containerDiv = div), class: "container" }, h("div", { key: 'a7746088c4458802d386f1c3d092e0a386fe4bd6', class: `content-wrap ${this.secondaryOpen ? 'secondary-open' : ''}` }, h("nav", { key: '993f550de47fc9410aa04bf98d9d076a6290637c', ref: (div) => (this.contentDiv = div), class: "content" }, h("div", { key: '3da3d0268df95d3080938e33f6e80d659dce1525', class: "head" }, h("button", { key: 'af104da5e67aaf06194317086daa6a5d4c008b6a', onClick: this.toggle, class: "collapse-btn" }, h("nano-icon", { key: 'b6e85eb6690440da7ccd893ccd9feb082d7a4552', name: "light/arrow-right-to-line" }), h("span", { key: '443c2afa504892d6de2a75a126e09c484540c677', class: "visually-hidden" }, "collapse / expand menu"))), h("slot", { key: '275ab007d04f3bde8269f0b4927aec81d1e47ccd' }), this.slotCtrl.has('foot') && (h("div", { key: 'c0eb043b9447264d48ca65d6e51c986c05ba10eb', class: "foot" }, h("slot", { key: 'bee82590231f9cfffc15c22ba0fafb313298e232', name: "foot" }))))))));
     }
     static get watchers() { return {
         "open": ["openChange"]
@@ -18685,38 +18687,57 @@ class NanoAccordion {
         registerInstance(this, hostRef);
         this.nanoToggle = createEvent(this, "nanoToggle", 7);
     }
-    itemOpened;
+    indexOpened;
+    elementOpened;
     get el() { return getElement(this); }
+    /** Force one details element to always be open */
+    alwaysOpen = false;
     /** Fires when accordion elements toggle */
     nanoToggle;
     onToggleHandler(event) {
         if (event.target?.tagName !== 'NANO-DETAILS')
             return;
         event.stopPropagation();
-        const items = getDirectChildren(this.el, transformTag('nano-details')) ||
-            this.el.querySelectorAll(transformTag('nano-details'));
+        const items = getDirectChildren(this.el, transformTag('nano-details'));
         items.forEach((item, i) => {
             if (item !== event.target)
                 item.open = false;
-            else
-                this.itemOpened = i;
+            else if (item === event.target) {
+                this.indexOpened = i;
+            }
         });
-        this.nanoToggle.emit(event.target);
+        this.nanoToggle.emit({ element: event.target, index: this.indexOpened });
     }
     onClosedHandler(event) {
         event.stopPropagation();
-        this.itemOpened = null;
-        this.nanoToggle.emit();
+        if (this.alwaysOpen) {
+            let foundOpen;
+            const items = getDirectChildren(this.el, transformTag('nano-details'));
+            items.forEach((item) => {
+                if (item !== event.target && item.open) {
+                    foundOpen = true;
+                }
+            });
+            if (!foundOpen) {
+                event.preventDefault();
+                return;
+            }
+        }
+        if (this.elementOpened === event.target) {
+            this.elementOpened = null;
+            this.indexOpened = null;
+            this.nanoToggle.emit();
+        }
     }
     render() {
-        return h("slot", { key: 'ec9331ce0686c1234021e58af9a456aa267e9247' });
+        return h("slot", { key: 'a16b340b9312672847ee022b2beb6767fc0dfb86' });
     }
     static get style() { return accordionCss; }
     static get cmpMeta() { return {
         "$flags$": 265,
         "$tagName$": "nano-accordion",
         "$members$": {
-            "itemOpened": [32]
+            "alwaysOpen": [4, "always-open"]
         },
         "$listeners$": [[0, "nanoOpen", "onToggleHandler"], [0, "nanoClose", "onClosedHandler"]],
         "$lazyBundleId$": "-",
@@ -19194,6 +19215,20 @@ function cyrb53(str, seed = 0) {
     return 4294967296 * (2097151 & h2) + (h1 >>> 0);
 }
 
+function perMark(name, end = false) {
+    if (!performance || false)
+        return;
+    if (end) {
+        performance?.mark('end' + name);
+        performance?.measure(name, 'start' + name, 'end' + name);
+        const entries = performance?.getEntriesByName(name);
+        console.info(entries[entries.length ? entries.length - 1 : 0]);
+    }
+    else {
+        performance?.mark('start' + name);
+    }
+}
+
 const CSSNAMESPACE = 'nano-tbl';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -21364,6 +21399,7 @@ class NanoDataTable {
         const sortEvent = this.nanoTblBeforeSort.emit({ column: column, order });
         if (sortEvent.defaultPrevented)
             return;
+        perMark('sort');
         this.currentSort = order + ':' + column;
         // doesn't make sense to leave user in place for a sort
         this.scrollToTop(element);
@@ -21413,17 +21449,20 @@ class NanoDataTable {
             return { ...c, order: null };
         });
         this.nanoTblAfterSort.emit({ column: column, order });
+        perMark('sort', true);
     }
     async searchStart() {
         this._loading = true;
         const sortEvent = this.nanoTblBeforeSearch.emit({ term: this.searchTerm });
         if (sortEvent.defaultPrevented)
             return;
+        perMark('search');
         // doesn't make sense to leave user in place for a search
         this.scrollToTop();
         try {
             await storeSearch(this.host, this.searchTerm);
             this.nanoTblAfterSearch.emit({ term: this.searchTerm });
+            perMark('search', true);
         }
         catch (e) {
             console.warn('search failed', e);
@@ -21450,6 +21489,7 @@ class NanoDataTable {
         const sortEvent = this.nanoTblBeforeFilter.emit({ filters: this.filters });
         if (sortEvent.defaultPrevented)
             return;
+        perMark('filter');
         this.currentFilters = JSON.stringify(this.filters);
         // doesn't make sense to leave user in place for a search
         this.scrollToTop();
@@ -21504,6 +21544,7 @@ class NanoDataTable {
         });
         await storeFilter(this.host, this.filters);
         this.nanoTblAfterFilter.emit({ filters: this.filters });
+        perMark('filter', true);
     }
     /** Scrolls to the top immediately - used whilst sorting / filtering */
     scrollToTop(element) {
@@ -21539,6 +21580,7 @@ class NanoDataTable {
     setInitialBlockDimension() {
         if (!this.blockElements?.length)
             return;
+        perMark('blockDims');
         const testForDimensions = async () => {
             await this.setMeasureElement();
             if (this.unitHeight)
@@ -21564,6 +21606,8 @@ class NanoDataTable {
         });
         // we're all finished.
         dimensionsReady.then(() => {
+            perMark('blockDims', true);
+            perMark('init', true);
             requestAnimationFrame(() => (this.isReady = true));
         });
     }
@@ -21598,6 +21642,7 @@ class NanoDataTable {
             this.blocks = [];
             return;
         }
+        perMark('setBlocks');
         // this.ignoreIO = true;
         let i = 1;
         const l = this.virtualTotalItems > dRows.length
@@ -21620,6 +21665,7 @@ class NanoDataTable {
             blocks.push({ rows, __uuid: cyrb53(rows.map((b) => b.__uuid).join()) });
         }
         this.blocks = blocks;
+        perMark('setBlocks', true);
     }
     /**
      * Returns a block render height.
@@ -21669,6 +21715,7 @@ class NanoDataTable {
      */
     scrollHandler = () => {
         let scrollPos = 0;
+        perMark('scrollHandler');
         // don't listen if this table isn't in the viewport
         if (!this.store?.general.state.isActive || !this.rows)
             return;
@@ -21706,6 +21753,7 @@ class NanoDataTable {
                 }
                 blockIndex++;
             }
+            perMark('scrollHandler', true);
         });
     };
     /** Process slotted content */
@@ -21734,6 +21782,7 @@ class NanoDataTable {
     }
     // Component lifecycle
     async componentWillLoad() {
+        perMark('init');
         // setup stores
         this.store = await generateStore(this.host, this.columns, this.scrollParent, this.isReady);
         this.handleRowsChange();
@@ -21775,9 +21824,11 @@ class NanoDataTable {
             return false;
     }
     componentWillRender() {
+        perMark('render');
     }
     componentDidRender() {
         this.setMeasureElement().then(() => this.setBlockHeight());
+        perMark('render', true);
     }
     disconnectedCallback() {
         if (!this.activeWatcherIo)
@@ -22293,8 +22344,9 @@ const detailsCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{di
  * @part icon - the wrapper around both start and end icons
  * @part icon--start - the icon wrapper at the start of the ui control
  * @part icon--end - the icon wrapper at the end of the ui control
- * @part body - the wrapper around content
- * @part content - the main content wrapper
+ * @part body - the main body block
+ * @part content-wrapper - the wrapper around the content
+ * @part content - the main content
  */
 class NanoDetails {
     constructor(hostRef) {
@@ -22434,13 +22486,13 @@ class NanoDetails {
         }
     }
     render() {
-        return (h(Host, { key: '4109b3670c8ccd41ddac5eb03e799e1c149ad7c8', class: "nano-details" }, h("details", { key: '6af0af31042e2bb156e835604b4f79edad79b7ce', part: "base", ref: (d) => (this.detailsEl = d), class: {
+        return (h(Host, { key: '1cbedc078a3390a3ad82b99ac0f37e8ea0f8d480', class: "nano-details" }, h("details", { key: '22659218ba7d1ec936523ff33c7ed2a1efb2af74', part: "base", ref: (d) => (this.detailsEl = d), class: {
                 details: true,
                 disabled: this.disabled,
-            } }, h("summary", { key: '6589a9dd56e93246177f8c7b6f5e46f279e661c1', part: "header", "aria-controls": "content", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? '-1' : '0', id: "header", role: "button", class: "header", ref: (s) => (this.headerEl = s), onKeyDown: this.onKeyDown, onClick: this.onMouseDown }, this.slotCtrl.has('icon-start') && (h("span", { key: '7d794f0724f7c43bf4747edd1e402be32ec28129', part: "icon icon--start", class: "icon icon--start" }, h("slot", { key: '4e55292c3018d9bbcb4b65e2f69002bf0cb5ae43', name: "icon-start" }))), h("div", { key: 'd3ab36f253ae4f062fe2aa998c483648b382b7ca', part: "label", class: "label" }, this.label ? this.label : h("slot", { name: "label" })), h("span", { key: '6bd0a9630c2d657915811164bdcbf0696609d4e5', part: "icon icon--end", class: "icon icon--end" }, this.open ? (h("slot", { name: "icon-collapse" })) : (h("slot", { name: "icon-expand" })), h("slot", { key: 'b38f81f25f6d224da5afa1d701621993dba3d723', name: "icon-end" }, !this.slotCtrl.has('icon-start') &&
+            } }, h("summary", { key: '3a7cd64e7d8e2b5235b7c0f7d58c434cb2a52469', part: "header", "aria-controls": "content", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? '-1' : '0', id: "header", role: "button", class: "header", ref: (s) => (this.headerEl = s), onKeyDown: this.onKeyDown, onClick: this.onMouseDown }, this.slotCtrl.has('icon-start') && (h("span", { key: '4a8de08dca34823e162019e2d4dddef2ed2c123d', part: "icon icon--start", class: "icon icon--start" }, h("slot", { key: 'cf6ea31f1685afa4bde64a6cbdef43cb0d0a053a', name: "icon-start" }))), h("div", { key: '0b11c544cfbb5852dfeae66b482154f1780a2569', part: "label", class: "label" }, this.label ? this.label : h("slot", { name: "label" })), h("span", { key: '5470af7891318c513870c473a8ad1f501174f51b', part: "icon icon--end", class: "icon icon--end" }, this.open ? (h("slot", { name: "icon-collapse" })) : (h("slot", { name: "icon-expand" })), h("slot", { key: '45960716eeec5d5ad08b63fd536608fcd33ab8f2', name: "icon-end" }, !this.slotCtrl.has('icon-start') &&
             !this.slotCtrl.has('icon-end') &&
             !this.slotCtrl.has('icon-expand') &&
-            !this.slotCtrl.has('icon-collapse') && (h("nano-icon", { key: 'be8d56737badde36a3a88f797f411065e5a59ae4', class: "default-icon", name: "light/chevron-down" }))))), h("div", { key: '90d0bba50dc77e45c5861ac74188aba8005980fc', part: "body", class: "body", ref: (div) => (this.bodyEl = div), role: "region", "aria-labelledby": "header" }, h("div", { key: 'ecc6e416fb9bc20d0d2feb99c7ed899104338c1e', class: "content-wrapper" }, h("div", { key: '18115d6264604535817c700ab7eea7265f4d7b3b', part: "content", class: "content", id: "content" }, h("slot", { key: 'bfdb6bda88ba909bbedec0e000b6fef5c1d1895c' })))))));
+            !this.slotCtrl.has('icon-collapse') && (h("nano-icon", { key: '5357b61cb197dc4a1ceccf415a34defdfeb6b290', class: "default-icon", name: "light/chevron-down" }))))), h("div", { key: 'aa7f850c8415c2cd40fd7a965fba8eb98fca62b5', part: "body", class: "body", ref: (div) => (this.bodyEl = div), role: "region", "aria-labelledby": "header" }, h("div", { key: 'e98e6a68e4c15525b4377d4229fb4a1855650732', part: "content-wrapper", class: "content-wrapper" }, h("div", { key: '6710e302f7e2a5987ccd6703ea3c6cc0bf705d23', part: "content", class: "content", id: "content" }, h("slot", { key: '891525e66383979e621787f766bcfbcea78a9630' })))))));
     }
     static get watchers() { return {
         "open": ["toggleClick"]
@@ -22492,7 +22544,7 @@ class NanoFeatureBox {
     }; }
 }
 
-const footerCss = ":host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host {\n  --col-gap: var(--nano-spacing-l1-default);\n  --icon-gap-md: var(--nano-spacing-md);\n  --icon-gap-sm: var(--nano-spacing-sm);\n  --vertical-padding: var(--nano-spacing-l1-default);\n  --horizontal-padding: 0;\n  --header-margin: 0 0 var(--nano-spacing-l1-default) 0;\n  display: block;\n}\n:host .footer {\n  container-type: inline-size;\n  container-name: footer-container;\n  display: flex;\n  flex-direction: column;\n}\n@container footer-container (max-width: 768px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    --horizontal-padding: var(--nano-spacing-md);\n    --col-gap: var(--nano-spacing-l);\n    --vertical-padding: var(--nano-spacing-md);\n  }\n  :host .top-start,\n  :host .top-center,\n  :host .top-end {\n    --header-margin: 0 0 var(--nano-spacing-md) 0;\n  }\n}\n@container footer-container (max-width: 1023px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    --horizontal-padding: var(--nano-spacing-l);\n  }\n}\n@container footer-container (max-width: 1346px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    --horizontal-padding: var(--nano-spacing-l1-default);\n  }\n}\n:host .upper {\n  border-block-start: 1px solid var(--nano-color-neutral-200);\n}\n:host .lower {\n  background-color: var(--nano-color-basic-black);\n  color: var(--nano-color-basic-white);\n}\n:host .top,\n:host .middle,\n:host .bottom {\n  display: grid;\n  gap: var(--col-gap);\n  margin: 0 auto;\n  max-inline-size: 1266px;\n}\n:host .top,\n:host .middle {\n  grid-template-columns: repeat(3, 1fr);\n  padding: var(--vertical-padding) var(--horizontal-padding);\n}\n:host .bottom {\n  grid-template-columns: repeat(2, 1fr);\n  padding-inline: var(--horizontal-padding);\n  padding-block-end: var(--vertical-padding);\n}\n:host .middle-center a {\n  color: inherit;\n}\n:host .middle-center a:hover {\n  color: var(--nano-color-primary-1000);\n}\n:host .middle-center a:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n}\n:host .top-start,\n:host .top-center,\n:host .top-end {\n  flex-direction: column;\n}\n:host .middle-start,\n:host .middle-center,\n:host .middle-end {\n  align-items: center;\n}\n:host .middle-start {\n  display: flex;\n  justify-content: flex-start;\n}\n:host .middle-center {\n  display: flex;\n  justify-content: center;\n  gap: var(--icon-gap-md);\n  flex-wrap: nowrap;\n}\n:host .middle-end {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 20rem));\n  gap: var(--icon-gap-sm);\n  justify-content: end;\n}\n:host [slot=middle-end] {\n  inline-size: 100%;\n}\n:host .bottom-start p,\n:host .bottom-start ::slotted(p), .bottom-start :host::slotted(p) {\n  font-weight: var(--nano-font-weight-normal) !important;\n  font-size: var(--nano-font-size-xs) !important;\n  line-height: var(--nano-line-height-normal) !important;\n  letter-spacing: var(--nano-letter-spacing-loose) !important;\n  margin-block: 0 !important;\n}\n:host .bottom-end {\n  display: flex;\n  justify-content: flex-end;\n}\n:host .bottom-end ::slotted(*), .bottom-end :host::slotted(*) {\n  --input-font-size: var(--nano-font-size-2xs) !important;\n  max-inline-size: 9rem !important;\n}\n@container footer-container (max-width: 1200px) {\n  :host .top {\n    grid-template-columns: repeat(2, 1fr);\n    grid-template-rows: repeat(2, auto);\n  }\n  :host .top-end {\n    grid-row: 2;\n    grid-column: 1/-1;\n  }\n}\n@container footer-container (max-width: 912px) {\n  :host .middle,\n  :host .bottom {\n    grid-template-columns: 1fr;\n    grid-template-rows: 1fr;\n  }\n  :host .top {\n    display: flex;\n    flex-direction: column;\n  }\n  :host .middle-center {\n    flex-wrap: wrap;\n  }\n  :host .middle-end {\n    grid-template-columns: minmax(0, 6.6rem);\n  }\n  :host .bottom {\n    display: flex;\n    flex-direction: column-reverse;\n    align-items: center;\n  }\n  :host .middle-start,\n  :host .middle-center,\n  :host .middle-end {\n    justify-content: center;\n  }\n}";
+const footerCss = ":host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host {\n  --col-gap: var(--nano-spacing-l1-default);\n  --icon-gap-md: var(--nano-spacing-md);\n  --icon-gap-sm: var(--nano-spacing-sm);\n  --vertical-padding: var(--nano-spacing-l1-default);\n  --horizontal-padding: 0;\n  --header-margin: 0 0 var(--nano-spacing-l1-default) 0;\n  display: block;\n}\n:host .footer {\n  container-type: inline-size;\n  container-name: footer-container;\n  display: flex;\n  flex-direction: column;\n}\n@container footer-container (max-width: 768px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    --horizontal-padding: var(--nano-spacing-md);\n    --col-gap: var(--nano-spacing-l);\n    --vertical-padding: var(--nano-spacing-md);\n  }\n  :host .top-start,\n  :host .top-center,\n  :host .top-end {\n    --header-margin: 0 0 var(--nano-spacing-md) 0;\n  }\n}\n@container footer-container (max-width: 1023px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    --horizontal-padding: var(--nano-spacing-l);\n  }\n}\n@container footer-container (max-width: 1346px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    --horizontal-padding: var(--nano-spacing-l1-default);\n  }\n}\n:host .upper {\n  border-block-start: 1px solid var(--nano-color-neutral-200);\n}\n:host .lower {\n  background-color: var(--nano-color-basic-black);\n  color: var(--nano-color-basic-white);\n}\n:host .top,\n:host .middle,\n:host .bottom {\n  display: grid;\n  gap: var(--col-gap);\n  margin: 0 auto;\n  max-inline-size: 1266px;\n}\n:host .top,\n:host .middle {\n  grid-template-columns: repeat(3, 1fr);\n  padding: var(--vertical-padding) var(--horizontal-padding);\n}\n:host .bottom {\n  grid-template-columns: repeat(2, 1fr);\n  padding-inline: var(--horizontal-padding);\n  padding-block-end: var(--vertical-padding);\n}\n:host .middle-centre a {\n  color: inherit;\n}\n:host .middle-centre a:hover {\n  color: var(--nano-color-primary-1000);\n}\n:host .middle-centre a:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n}\n:host .top-start,\n:host .top-center,\n:host .top-end {\n  flex-direction: column;\n}\n:host .middle-start,\n:host .middle-centre,\n:host .middle-end {\n  align-items: center;\n}\n:host .middle-start {\n  display: flex;\n  justify-content: flex-start;\n}\n:host .middle-centre {\n  display: flex;\n  justify-content: center;\n  gap: var(--icon-gap-md);\n  flex-wrap: nowrap;\n}\n:host .middle-end {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 20rem));\n  gap: var(--icon-gap-sm);\n  justify-content: end;\n}\n:host [slot=middle-end] {\n  inline-size: 100%;\n}\n:host .bottom-start p,\n:host .bottom-start ::slotted(p), .bottom-start :host::slotted(p) {\n  font-weight: var(--nano-font-weight-normal) !important;\n  font-size: var(--nano-font-size-xs) !important;\n  line-height: var(--nano-line-height-normal) !important;\n  letter-spacing: var(--nano-letter-spacing-loose) !important;\n  margin-block: 0 !important;\n}\n:host .bottom-end {\n  display: flex;\n  justify-content: flex-end;\n}\n:host .bottom-end ::slotted(*), .bottom-end :host::slotted(*) {\n  --input-font-size: var(--nano-font-size-2xs) !important;\n  max-inline-size: 9rem !important;\n}\n@container footer-container (max-width: 1200px) {\n  :host .top {\n    grid-template-columns: repeat(2, 1fr);\n    grid-template-rows: repeat(2, auto);\n  }\n  :host .top-end {\n    grid-row: 2;\n    grid-column: 1/-1;\n  }\n}\n@container footer-container (max-width: 912px) {\n  :host .middle,\n  :host .bottom {\n    grid-template-columns: 1fr;\n    grid-template-rows: 1fr;\n  }\n  :host .top {\n    display: flex;\n    flex-direction: column;\n  }\n  :host .middle-centre {\n    flex-wrap: wrap;\n  }\n  :host .middle-end {\n    grid-template-columns: minmax(0, 6.6rem);\n  }\n  :host .bottom {\n    display: flex;\n    flex-direction: column-reverse;\n    align-items: center;\n  }\n  :host .middle-start,\n  :host .middle-centre,\n  :host .middle-end {\n    justify-content: center;\n  }\n}";
 
 /**
  * The footer is used to provide navigation, copyright info and links to social media platforms.
@@ -22503,6 +22555,7 @@ const footerCss = ":host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;
  * @slot top-center_content - The content for the top center (links) section.
  * @slot top-end_heading - The heading for the top right section.
  * @slot top-end_content - The content for the top right (links) section.
+ * @slot middle-centre - The content for the middle centre (socials) section.
  * @slot middle-end - The content for the middle end (certifications) section.
  * @slot bottom-start - The content for the bottom left section (copyright notice - optional).
  * @slot bottom-end - The content for the right side of the bottom section (language selector).
@@ -22520,7 +22573,7 @@ class NanoFooter {
     componentWillLoad() {
     }
     render() {
-        return (hAsync("footer", { key: 'ad9124b0506f07fdd015b9b9d83700361ab742cc', class: "footer" }, hAsync("div", { key: 'f09dfec1b8027ffcef0985fb6224c9b628dadc0c', class: "upper" }, hAsync("div", { key: '88add053d5be6c9759a42cab3404c603e41c1382', class: "top" }, hAsync("div", { key: '753a6033b2c4ae7309a606928ca8246d620875e0', class: "top-start" }, hAsync("slot", { key: 'eaf5f113d7c9c8a1ac8d9fd9846c85948ebe7d95', name: "top-start_heading" }), hAsync("slot", { key: '2ca260ad39092343a9c597b8fb5164a086532b8c', name: "top-start_content" })), hAsync("div", { key: '51e8419574d2039bda98bb4affadd485c8d4a3b6', class: "top-center" }, hAsync("slot", { key: '933a75ba455047d1f6ded2f5322d11ebd813c917', name: "top-center_heading" }), hAsync("slot", { key: 'f4442a6a9db8c8a587e25078ba2230a098cf590e', name: "top-center_content" })), hAsync("div", { key: '2ad9a3711ee3c75f1fb67d613529155c7d80a886', class: "top-end" }, hAsync("slot", { key: '6063e0c71f4c09fcd4a4e8719af0e80530e54f78', name: "top-end_heading" }), hAsync("slot", { key: '9865f409f081b9f9f3c369f136b30068abc00f83', name: "top-end_content" })))), hAsync("div", { key: '17792c4b0a7915da9c44b03189b23937c4d78d0f', class: "lower nano-theme-dark" }, hAsync("div", { key: '730c6c11af50c2eb2ccbd8346512523d13cd83a4', class: "middle" }, hAsync("div", { key: 'd1b4aa896e49b8439749877d62edc1d1f9a8ce60', class: "middle-start" }, hAsync("img", { key: '03d069e3c3f0117645b0b582986ef19421459db2', src: getAssetPath('../nano-assets/ont-logo-light.svg'), alt: "Oxford Nanopore Technologies logo. Featuring a stylised representation of a nanopore,\n          (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.", height: "46", part: "logo" })), hAsync("div", { key: '48913cfa80d310080e5b766cea5dc8a6a2153e95', class: "middle-center" }, hAsync("a", { key: '3aa82ee1f0c5443ff8a7ad81a50a8129383a5e4d', href: "https://x.com/nanopore", target: "_blank" }, hAsync("nano-icon", { key: 'fac32fab99baaa4476356610ac4649bac4ab30b1', name: "brands/x-twitter", size: "large", ariaLabel: "X (formerly Twitter)" })), hAsync("a", { key: '75021ad4cd6568683341b249acdb11e479c659b6', href: "https://bsky.app/profile/nanoporetech.com", target: "_blank" }, hAsync("nano-icon", { key: '1d6776dea11fa00bdd6a7fb0bd1a6e6ac76e5c63', name: "brands/bluesky", size: "large", ariaLabel: "Bluesky" })), hAsync("a", { key: '5ddc844307153f2ba6f58eb48696e9a02ff27e65', href: "https://www.youtube.com/channel/UC5yMlYjHSgFfZ37LYq-dzig", target: "_blank" }, hAsync("nano-icon", { key: 'ed29a8200eb47d4727cb0c06c72fe087e14a45ac', name: "brands/youtube", size: "large", ariaLabel: "YouTube" })), hAsync("a", { key: '63963d0675dd0908a4ed12ed3b3344d752642ec3', href: "https://www.facebook.com/Oxford-Nanopore-Technologies-251034380246/", target: "_blank" }, hAsync("nano-icon", { key: 'c540f5fcb0301514cff16158ecb3b03b2a0ceb9e', name: "brands/facebook", size: "large", ariaLabel: "Facebook" })), hAsync("a", { key: 'f36804cb9024d90be38d3e000ab944122034bbe3', href: "https://www.linkedin.com/company/oxford-nanopore-technologies", target: "_blank" }, hAsync("nano-icon", { key: 'afa1ac76dc98788f56782a6a560cd5be66cb1750', name: "brands/linkedin", size: "large", ariaLabel: "LinkedIn" })), hAsync("a", { key: '29f746cfb9777fc1ab3b3de41d1a3b5cb2874a28', href: "https://www.instagram.com/oxfordnanopore", target: "_blank" }, hAsync("nano-icon", { key: 'feb1b2e25e1989bf3da08c53aa1b788e2d426f22', name: "brands/instagram", size: "large", ariaLabel: "Instagram" }))), hAsync("div", { key: 'c4431c0068b75e71953a8aa3c0ec0b36a39abf80', class: "middle-end" }, hAsync("slot", { key: '245967e8c48df6297c2ab844c6062308ed03d826', name: "middle-end" }))), hAsync("div", { key: '38db00fa10bbc448ede2b1a04550e5f76601d18d', class: "bottom" }, hAsync("div", { key: '01da652b355b79369fcfe73d7014b3b4ded98394', class: "bottom-start" }, hAsync("slot", { key: '3257e79f443a60728c5e8fc412a4f93c4a20ca9b', name: "bottom-start" }, hAsync("p", { key: '1b333726f33b0dcc252107daed63623c4788d94d' }, "\u00A9 2008 - 2025 Oxford Nanopore Technologies plc. All rights reserved. Registered Office: Gosling Building, Edmund Halley Road, Oxford Science Park, OX4 4DQ, UK | Registered No. 05386273 | VAT No 336942382. Oxford Nanopore Technologies, the Wheel icon, EPI2ME, Flongle, GridION, Metrichor, MinION, MinIT, MinKNOW, Plongle, PromethION, SmidgION, Ubik and VolTRAX are registered trademarks of Oxford Nanopore Technologies plc in various countries. Oxford Nanopore Technologies products are not intended for use for health assessment or to diagnose, treat, mitigate, cure, or prevent any disease or condition."))), hAsync("div", { key: '20d927b82132f7ca382b4d5bb17056b8a8075d41', class: "bottom-end" }, hAsync("slot", { key: 'eab15c3956b4c9eef65736a4cf8eb623143579ca', name: "bottom-end" }))))));
+        return (hAsync("footer", { key: 'c2a8504a9eb51ed5b5ddd3da0adf06ae4c619155', class: "footer" }, hAsync("div", { key: 'd2aa1e0ca9d7a546f0a8ac53e3f2aee31b69c144', class: "upper" }, hAsync("div", { key: 'eff89342b051447e6518a89d4b8c4072ccacd9cc', class: "top" }, hAsync("div", { key: 'a3081f69348ca489e82fab5692caf3e530341394', class: "top-start" }, hAsync("slot", { key: '2b9197d57ca7914d86a640dae4297b3b73c58d04', name: "top-start_heading" }), hAsync("slot", { key: '0d48a29421927c55f73ae9e69c4ab9ac4c2f2c6a', name: "top-start_content" })), hAsync("div", { key: '42845d69fc0b65501f3d391c7d6a8f78815d892b', class: "top-center" }, hAsync("slot", { key: '47046cd14d811f78b3e750bd35df7d2cececbe2c', name: "top-center_heading" }), hAsync("slot", { key: '4ed1e887e7a7fa7d4be901cc26579691b1fd4aa0', name: "top-center_content" })), hAsync("div", { key: 'dcb140d7f5fda4530e90be3a9f9f8fcac914c508', class: "top-end" }, hAsync("slot", { key: '48f6027d5155383f1928408a47dd250250f2a841', name: "top-end_heading" }), hAsync("slot", { key: '83f5a9ad3568dd75bf84ad6532b2094244ed0d96', name: "top-end_content" })))), hAsync("div", { key: '3fc2df5976c5802f17338b601cc8162397385210', class: "lower nano-theme-dark" }, hAsync("div", { key: '97018136a4e7f65ffbbb706919e0f04cd693ee6e', class: "middle" }, hAsync("div", { key: '8d1090ea74fede921c3c657cf6b3d59d4d4099ea', class: "middle-start" }, hAsync("img", { key: 'd227c88e189f725042500884743ab8d5a3bdb47a', src: getAssetPath('../nano-assets/ont-logo-light.svg'), alt: "Oxford Nanopore Technologies logo. Featuring a stylised representation of a nanopore,\n          (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.", height: "46", part: "logo" })), hAsync("slot", { key: '3c2dfa7cb2e6a00715dfa51febb836f981fbf3f6', name: "middle-centre" }, hAsync("div", { key: '0bcf3ad9ff6d9cff398e5a69f69dc3eec7cef425', class: "middle-centre" }, hAsync("a", { key: '2046a3d31732c36c024b02f40b333c6e3e940ad9', href: "https://x.com/nanopore", target: "_blank" }, hAsync("nano-icon", { key: '3d2f8b00bcb23cf63cc0433244ab8e787ae58de1', name: "brands/x-twitter", size: "large", ariaLabel: "X (formerly Twitter)" })), hAsync("a", { key: '449625ca6b7866ac54d410871ef8dd48c0b921a4', href: "https://bsky.app/profile/nanoporetech.com", target: "_blank" }, hAsync("nano-icon", { key: '2bfa9fdae2df01571cf735b6a8621bf4591954ec', name: "brands/bluesky", size: "large", ariaLabel: "Bluesky" })), hAsync("a", { key: '92d9aa410759d7137bf76878820565e31783306f', href: "https://www.youtube.com/channel/UC5yMlYjHSgFfZ37LYq-dzig", target: "_blank" }, hAsync("nano-icon", { key: '294302355c16e5cd10d0958eeb6e5f82d486ec9a', name: "brands/youtube", size: "large", ariaLabel: "YouTube" })), hAsync("a", { key: 'a2e1f1a50e25e79e1a6f856941494fee1a5d9348', href: "https://www.facebook.com/Oxford-Nanopore-Technologies-251034380246/", target: "_blank" }, hAsync("nano-icon", { key: '5f755d6191da952039e4dd212790d73e44869689', name: "brands/facebook", size: "large", ariaLabel: "Facebook" })), hAsync("a", { key: 'ac1b66b957ac42cd31111d1ce1a19c603442f71b', href: "https://www.linkedin.com/company/oxford-nanopore-technologies", target: "_blank" }, hAsync("nano-icon", { key: '6c31573dd300a2f1f973b17e62ae5013cef0faa7', name: "brands/linkedin", size: "large", ariaLabel: "LinkedIn" })), hAsync("a", { key: '5c1738d75d98eab928d6e3331991f0f13a0a0a01', href: "https://www.instagram.com/oxfordnanopore", target: "_blank" }, hAsync("nano-icon", { key: 'bbfd2562b24bab2dd6b5ac0abda7d328be8b77f2', name: "brands/instagram", size: "large", ariaLabel: "Instagram" })))), hAsync("div", { key: '7fa7ce2a77355ef0e479db3d328c6c549ad0b0e0', class: "middle-end" }, hAsync("slot", { key: '25fb3c61e7c29211f94fa6ad18023273fda6bbee', name: "middle-end" }))), hAsync("div", { key: 'f6be28833e0a022e8918be48869d1655b19de781', class: "bottom" }, hAsync("div", { key: 'bf6d46ecf55c77e1e9c5de89438b73c747e7c228', class: "bottom-start" }, hAsync("slot", { key: '361dbfd8db399e50b300aab1bb4af8049b74f033', name: "bottom-start" }, hAsync("p", { key: '14ef6c21d9da97caf9d0181740fbf0e270beb9d3' }, "\u00A9 2008 - 2025 Oxford Nanopore Technologies plc. All rights reserved. Registered Office: Gosling Building, Edmund Halley Road, Oxford Science Park, OX4 4DQ, UK | Registered No. 05386273 | VAT No 336942382. Oxford Nanopore Technologies, the Wheel icon, EPI2ME, Flongle, GridION, Metrichor, MinION, MinIT, MinKNOW, Plongle, PromethION, SmidgION, Ubik and VolTRAX are registered trademarks of Oxford Nanopore Technologies plc in various countries. Oxford Nanopore Technologies products are not intended for use for health assessment or to diagnose, treat, mitigate, cure, or prevent any disease or condition."))), hAsync("div", { key: 'fd2a849f3bd442ef1b81f93c829aa6fc20741fe1', class: "bottom-end" }, hAsync("slot", { key: 'e6739d536a4075bcb14dbbb6c890f5927d71a869', name: "bottom-end" }))))));
     }
     static get style() { return footerCss; }
     static get cmpMeta() { return {
@@ -22626,7 +22679,7 @@ class NanoInPageNav {
         return node;
     }
     render() {
-        return (h(Host, { key: '5fc7993edd48363da225ffce7e8d3dad8689e761', class: "nano-in-page-nav" }, h("nav", { key: '4cc75849661bb1e2fd144ac075a693ce9e5af58f', part: "root" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (h("div", { key: '286df7a444423180967750017575414cce154b0d', class: "header" }, h("slot", { key: '255d81a0c2d26b0069a83a08e552e6afeb035295', name: "back" }), h("slot", { key: 'c939561b8be1b4a479e1f0c01684f5dd0a3014ce', name: "accessory" }))), h("div", { key: '411231a64e23575d76722f59446567f5cd68575e', class: "desktop-nav" }, h("slot", { key: '892a93de5de705e392b687ee62ab89c17bcc349a' })), h("nano-details", { key: '34d89f9f7927db1cb817124cf0d053f88963484c', label: "Menu", class: "details-wrapper mobile-nav", ref: (el) => (this.mobileNavWrapper = el) }))));
+        return (h(Host, { key: '8b88cd04f960c4c8ea7ae2dd79a6ec82694570e6', class: "nano-in-page-nav" }, h("nav", { key: '4df4a5ef8aecad356c6ad1acd9a6a886edce8139', part: "root" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (h("div", { key: 'ed1315ac689d77ffd4005df5a6eeb01f3fc9f599', class: "header" }, h("slot", { key: '0db0fb3919268a14fb924b292302c563181e87c0', name: "back" }), h("slot", { key: '95a5fafda43239ef7cc9208efc254fb335bc9f66', name: "accessory" }))), h("div", { key: '5a273c033b193efe7d4c72c3ccfdbf30b4442eae', class: "desktop-nav" }, h("slot", { key: '7d0cff62b54d21daa5b8e7d9551a9d0ed08cfe6f' })), h("nano-details", { key: 'c337ce8ac65560e5914f8566304f9382540316f2', label: "Menu", class: "details-wrapper mobile-nav", ref: (el) => (this.mobileNavWrapper = el) }))));
     }
     static get style() { return inPageNavCss; }
     static get cmpMeta() { return {
@@ -22711,7 +22764,7 @@ class NanoIncrement {
         this.handleSlotChange();
     }
     render() {
-        return (h(Host, { key: 'fab6b5bdecb8ccd3661d7054e08d66a46c2dd0a8', class: "nano-increment" }, h("div", { key: 'c064903981622ce66ac3a19efce6d595d59b7ed0', class: "root" }, h("div", { key: '447735cf16956d0ae172cc2bb1b3a7ffffd7fa0c', class: "minus" }, h("nano-icon-button", { key: '24e73eee061669ea0dd5423bae53886bed60478a', iconName: "light/minus", label: "Decrement", onClick: this.handleMinus })), h("slot", { key: '855358fe5a99004f52432dd42cf8c986f67afe69', onSlotchange: this.handleSlotChange }), h("div", { key: '17b1a5d9988023f4869489beffd697f4329a1d61', class: "plus" }, h("nano-icon-button", { key: '8b2e763e3f871355085e13b20a26f751c153a329', iconName: "light/plus", label: "Increment", onClick: this.handlePlus })))));
+        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 })))));
     }
     static get watchers() { return {
         "inputElement": ["inputElementChanged"]
@@ -22758,6 +22811,256 @@ class NanoOptionBox {
     }; }
 }
 
+const stepAccordionCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:block}.nano-details{--padding:0;--btn-bg-color--hover:transparent;--btn-bg-color--active:transparent;border:none;margin-block-end:var(--nano-spacing-sm)}.nano-details::part(base){display:grid;grid-template-rows:auto auto;grid-template-columns:auto 1fr;gap:var(--nano-spacing-sm) 1.625rem}.nano-details.step--grid-working::part(base)::before{content:\"\";display:block;grid-column:1;grid-row:2;inline-size:1rem;min-block-size:1rem;border-inline-end:2px solid var(--nano-color-neutral-300)}.nano-details.step--grid-working::part(base)::after{content:\"\";grid-column:1;grid-row:2;inline-size:0.4rem;block-size:0.4rem;place-self:end end;translate:-50% 0;inset-inline-start:calc(50% - 2.5px);position:relative;border-inline-end:2px solid var(--nano-color-neutral-300);border-block-end:2px solid var(--nano-color-neutral-300);rotate:45deg}.nano-details:last-of-type::part(base)::before{min-block-size:0}.nano-details:last-of-type::part(base)::after{display:none}.nano-details::part(header){grid-column:1/-1;grid-row:1;display:inline-flex;gap:var(--nano-spacing-sm)}.nano-details::part(body){grid-column:2;grid-row:2}.nano-details::part(content-wrapper){padding:1px}.nano-details.step--grid-not-working::part(header){padding-block-end:var(--nano-spacing-sm)}.nano-details.step--grid-not-working::part(body){padding:0 0 0 2.5625rem}.step .step-header{display:inline-flex;gap:var(--nano-spacing-sm);align-items:center}.step .step-icon{display:inline-flex;align-items:center;justify-content:center;inline-size:2rem;block-size:2rem;border-radius:var(--nano-border-radius-circle);background-color:transparent;color:var(--nano-color-neutral-1400);border:1px solid var(--nano-color-neutral-300)}.step.step--complete .step-icon{background-color:var(--nano-color-success-1000);color:var(--nano-color-base-0);border:none}.step[open] .step-icon{background-color:var(--nano-color-primary-1000);color:var(--nano-color-base-0);border:none}.step .step-change{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);text-decoration:underline;color:var(--nano-color-primary-1200)}";
+
+/**
+ * Presents an accordion interface for a multi-step process,
+ * allowing users to see their progress and navigate back to completed steps.
+ *
+ * @version 8.4.0
+ * @status new
+ *
+ * @slot - Dynamic slots. Use `slot="step-0"`, `slot="step-1"`, etc. for each step.
+ */
+class NanoStepAccordion {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.nanoStepActive = createEvent(this, "nanoStepActive", 7);
+    }
+    get host() { return getElement(this); }
+    nanoDetails;
+    gridWorking = true;
+    /** The currently active step, zero-based index */
+    activeStep = 0;
+    handleActiveStepChange(newValue, oldValue) {
+        if (!this.steps[newValue]?.enabled)
+            this.activeStep = oldValue;
+        else {
+            const event = this.nanoStepActive.emit({
+                index: newValue,
+                step: this.steps[newValue],
+            });
+            if (event.defaultPrevented) {
+                this.activeStep = oldValue;
+            }
+        }
+    }
+    _steps = [];
+    stepProxyHandler = {
+        set: (target, prop, value) => {
+            target[prop] = value;
+            return true;
+        },
+    };
+    /** An array of steps, each with a title, completion status, and enabled state */
+    get steps() {
+        return this._steps;
+    }
+    set steps(value) {
+        this._steps = [];
+        // improved devX - use a proxy to re-render when step properties change
+        value.forEach((step) => {
+            const proxyStep = new Proxy(step, this.stepProxyHandler);
+            this._steps.push(proxyStep);
+        });
+    }
+    /** Emitted when the active step changes. Prevent default to cancel the change */
+    nanoStepActive;
+    handleToggle(event) {
+        if (event.detail.index === this.activeStep)
+            return;
+        this.activeStep = event.detail.index;
+    }
+    // A dirty great hack for Firefox - it doesn't support grid layout in `<details>`
+    // so we use this to apply different styles based on whether grid is working or not
+    isDetailsGridWorking(detailsEl) {
+        // Create a test element with explicit grid placement
+        const testEl = document.createElement('div');
+        testEl.style.gridColumn = '2';
+        testEl.style.height = '1px';
+        testEl.style.width = '1px';
+        testEl.style.visibility = 'hidden';
+        detailsEl.appendChild(testEl);
+        const parentX = detailsEl.getBoundingClientRect().x;
+        const testX = testEl.getBoundingClientRect().x;
+        detailsEl.removeChild(testEl);
+        // If testEl moved horizontally, grid is in effect
+        return Math.abs(testX - parentX) > 1;
+    }
+    componentDidLoad() {
+        if (!this.nanoDetails)
+            return;
+        const detailsEl = this.nanoDetails.shadowRoot.querySelector('details');
+        if (detailsEl) {
+            this.gridWorking = this.isDetailsGridWorking(detailsEl);
+        }
+    }
+    render() {
+        return (h("nano-accordion", { key: 'd92d8997c0486e26c132793db92b12e04d46a384', 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,
+                'step--grid-working': this.gridWorking,
+                'step--grid-not-working': !this.gridWorking,
+                'step--disabled': !step.enabled,
+            }, ref: (el) => (this.nanoDetails = el) }, h("span", { class: "step-icon", slot: "icon-start" }, index + 1), h("div", { class: "step-header", slot: "label" }, h("span", { class: `step-title ${step.complete ? 'complete' : ''}` }, step.title), step.complete && (h(Fragment, null, h("span", null, " - "), h("span", { class: "step-change" }, "Change")))), h("span", { slot: "icon-end" }), h("div", { class: "step-content" }, h("slot", { name: `step-${index}` })))))));
+    }
+    static get watchers() { return {
+        "activeStep": ["handleActiveStepChange"]
+    }; }
+    static get style() { return stepAccordionCss; }
+    static get cmpMeta() { return {
+        "$flags$": 265,
+        "$tagName$": "nano-step-accordion",
+        "$members$": {
+            "activeStep": [1026, "active-step"],
+            "steps": [6160],
+            "gridWorking": [32]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
+const stepBreadcrumbCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:block;--background:var(--nano-color-base-0)}.step-wrapper{container-type:inline-size}.step-list.desktop{display:flex;flex-direction:row;align-items:center;justify-content:space-between;list-style:none;padding:0;margin:0;position:relative;z-index:1}.step-list.desktop::before{content:\"\";display:block;flex-grow:1;block-size:1px;background-color:var(--nano-color-neutral-300);position:absolute;inset-block-start:50%;z-index:-1;inset-inline-start:0;inline-size:100%}.step-item-wrapper{flex:0 1 auto;display:inline-flex;align-items:center;cursor:pointer}.step-item-wrapper:last-of-type{flex:0 1 auto}.step-item-wrapper:last-of-type .step-item{padding-inline-end:0}.step-item-wrapper:first-of-type::before{display:none}.step-item-wrapper:first-of-type .step-item{padding-inline-start:0}.step-item-wrapper::before{content:\"\";grid-column:2;grid-row:1;inline-size:0.4rem;block-size:0.4rem;place-self:center end;inset-block-start:0.5px;position:relative;border-inline-end:1px solid var(--nano-color-neutral-300);border-block-end:1px solid var(--nano-color-neutral-300);rotate:-45deg}:dir(rtl) .step-item-wrapper::after{rotate:45deg}.step-item{all:unset;display:inline-flex;align-items:center;gap:var(--nano-spacing-sm);background-color:var(--background);padding:0 var(--nano-spacing-sm);position:relative}.step-item:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset);z-index:1}.step-item.step-item--disabled{cursor:not-allowed}.step-item.step-item--disabled>*{opacity:0.5}.step-item-icon{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);display:inline-flex;align-items:center;justify-content:center;inline-size:1.5rem;block-size:1.5rem;border-radius:var(--nano-border-radius-circle);background-color:transparent;color:var(--nano-color-neutral-1400);border:1px solid var(--nano-color-neutral-300)}.step-item--complete .step-item-icon{background-color:var(--nano-color-success-1000);color:var(--nano-color-base-0);border:none}.step-item--active .step-item-icon{background-color:var(--nano-color-primary-1000);color:var(--nano-color-base-0);border:none}.step-dropdown{inline-size:100%;min-inline-size:300px}.step-trigger{all:unset;display:inline-flex;gap:var(--nano-spacing-md);align-items:center;inline-size:100%;cursor:pointer}.step-trigger-text{display:flex;flex-direction:column}.step-trigger-now{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-xl);line-height:var(--nano-line-height-denser);text-wrap:balance;color:var(--nano-color-neutral-1400)}.step-trigger-next{font-size:var(--nano-font-size-2xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);color:var(--nano-color-neutral-1000)}.step-trigger-icon{margin-inline-start:auto;color:var(--nano-color-primary-1000);transition:var(--nano-transition-x-fast) rotate}[open] .step-trigger-icon{rotate:180deg}.step-progress-circle{--size:64px;--thickness:4px;inline-size:var(--size);min-inline-size:var(--size);aspect-ratio:1/1;border-radius:50%;display:grid;place-items:center;position:relative}.step-progress-circle::before{content:\"\";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--nano-color-success-1000) calc(var(--value) / var(--max) * 360deg), var(--nano-color-neutral-100) 0);-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), black 90%);mask:radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), black 90%)}.step-progress-title{font-size:var(--nano-font-size-sm);line-height:var(--nano-line-height-normal);font-weight:var(--nano-font-weight-bold);white-space:nowrap;color:var(--nano-color-neutral-1000)}.step-progress-title strong{color:var(--nano-color-neutral-1400)}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+/**
+ * Presents a breadcrumb navigation for steps in a process, allowing users to see their progress and navigate back to completed steps.
+ *
+ * @version 8.4.0
+ * @status new
+ */
+class NanoStepBreadcrumb {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.nanoStepActive = createEvent(this, "nanoStepActive", 7);
+    }
+    get host() { return getElement(this); }
+    calculatedWidth;
+    cacheKey;
+    /** The currently active step, zero-based index */
+    activeStep = 0;
+    handleActiveStepChange(newValue, oldValue) {
+        if (!this.steps[newValue]?.enabled)
+            this.activeStep = oldValue;
+        else {
+            const event = this.nanoStepActive.emit({
+                index: newValue,
+                step: this.steps[newValue],
+            });
+            if (event.defaultPrevented) {
+                this.activeStep = oldValue;
+            }
+        }
+    }
+    /** Emitted when the active step changes. Prevent default to cancel the change */
+    nanoStepActive;
+    _steps = [];
+    stepProxyHandler = {
+        set: (target, prop, value) => {
+            target[prop] = value;
+            return true;
+        },
+    };
+    /** An array of steps, each with a title, completion status, and enabled state */
+    get steps() {
+        return this._steps;
+    }
+    set steps(value) {
+        this._steps = [];
+        // improved devX - use a proxy to re-render when step properties change
+        value.forEach((step) => {
+            const proxyStep = new Proxy(step, this.stepProxyHandler);
+            this._steps.push(proxyStep);
+        });
+    }
+    handleStepsChange() {
+        const numberOfSteps = this._steps.length;
+        const charLength = this._steps.reduce((acc, step) => acc + step.title.length, 0);
+        this.cacheKey = 'step-breadcrumb-' + numberOfSteps + charLength;
+        // text characters + icons (3 x 1.5rem) + arrows (2 x 1.875rem) + gaps (3 * 20px)
+        this.calculatedWidth = `calc(${charLength}ch + ${numberOfSteps * 1.5}rem + ${(numberOfSteps - 1) * 1.875}rem + ${numberOfSteps * 10}px)`;
+    }
+    styles = () => {
+        const css = /* css */ `@container (width > ${this.calculatedWidth}) {
+      .step-list.mobile.${this.cacheKey} { display: none; }
+      .step-list.desktop.${this.cacheKey} { display: flex; }
+    }
+    @container (width <= ${this.calculatedWidth}) {
+      .step-list.mobile.${this.cacheKey} { display: block; }
+      .step-list.desktop.${this.cacheKey} { display: none; }
+    }`;
+        return css;
+    };
+    componentWillLoad() {
+        this.handleStepsChange();
+    }
+    ControlTag = ({ step, index, }) => {
+        const Tag = step.enabled ? (step.href ? 'A' : 'BUTTON') : 'SPAN';
+        return (h(Tag, { href: step.href || undefined, class: {
+                'step-item': true,
+                'step-item--active': index === this.activeStep,
+                'step-item--complete': step.complete,
+                'step-item--disabled': !step.enabled,
+            }, onClick: () => {
+                if (step.enabled) {
+                    this.activeStep = index;
+                }
+            } }, h("span", { class: "step-item-icon", slot: "icon-start" }, index + 1), h("span", { class: "step-item-title" }, step.title)));
+    };
+    render() {
+        const Wrapper = this.steps.filter((step) => step.href).length > 0 ? 'nav' : 'div';
+        return (h(Host, { key: 'c4d0e767abe4ee65f8e70534844e7ff254455af0' }, h(Wrapper, { key: '6df94c5a9df7ae957b5ff243ecbe78e7c57233b3', class: "step-wrapper" }, h("ul", { key: 'ba1838191a0b888b630bfaba5125ae868f8aab38', 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: '64ae2c870494d376f4bb6484e97a5217dc4be311', class: `step-list mobile ${this.cacheKey}` }, h("nano-dropdown", { key: '08d3dc468d594177b922ae91fb1ff02ed79d282c', dialogTitle: "Steps", class: "step-dropdown" }, h("button", { key: '88ef0602628d800a3517da3c06e2eea1dad5a7dd', slot: "trigger", class: "step-trigger" }, h("div", { key: '9d60be986e00fdd6814a910641cf94ef97fb2eed', 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: '9e6eb88c9fc12f4228f55fe04cb2e1ce9a92e1f2', class: "step-progress-text" }, h("strong", { key: '5e999ae958a2c43f5d8998e9083e91b11ea9041d' }, this.activeStep + 1), " of", ' ', this.steps.length)), h("div", { key: 'ccb66003ef35b256ae8d0d34c8cad7535680d05b', class: "step-trigger-text" }, h("div", { key: '87f8a73802c33c289860b0eb530edae379fa5ebf', class: "step-trigger-now" }, this.steps[this.activeStep | 0]?.title || 'Select a step'), h("div", { key: '9b00c5ae99376028ec077e782f430b0346580119', class: "step-trigger-next" }, this.steps[this.activeStep + 1]?.title || 'Next step')), h("nano-icon", { key: '5073cf36a3a15599df7fa3816a62e72af257ab99', class: "step-trigger-icon", name: "light/chevron-down" })), h("nano-menu", { key: '18f15bb2439661286c019a6f20272db72a6ad1b1' }, 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,
+            }, disabled: !step.enabled, key: index, onClick: () => {
+                if (step.enabled) {
+                    this.activeStep = index;
+                }
+            } }, h("span", { class: "step-item-icon", slot: "icon-start" }, index + 1), h("span", { class: "step-item-title" }, step.title))))))))));
+    }
+    static get watchers() { return {
+        "activeStep": ["handleActiveStepChange"],
+        "steps": ["handleStepsChange"]
+    }; }
+    static get style() { return stepBreadcrumbCss; }
+    static get cmpMeta() { return {
+        "$flags$": 265,
+        "$tagName$": "nano-step-breadcrumb",
+        "$members$": {
+            "activeStep": [1026, "active-step"],
+            "steps": [6160],
+            "calculatedWidth": [32]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+__decorate([
+    ConstructibleStyle({ cacheKeyProperty: 'calculatedWidth' }),
+    __metadata("design:type", Object)
+], NanoStepBreadcrumb.prototype, "styles", void 0);
+
 const tabCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--border:2px solid var(--nano-color-neutral-300);--border-hover-color:var(--nano-color-primary-700);--border-active-color:var(--nano-color-primary-1000);--text-hover-color:var(--nano-color-primary-1000);--text-active-color:var(--nano-color-primary-1000);--padding:var(--nano-spacing-md);font-size:var(--nano-font-size-sm);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);display:inline-block;cursor:pointer;color:var(--nano-color-neutral-1400);border:var(--border);border-inline-end-width:0;border-inline-start-width:0;border-block-start-width:0;border-block-end:var(--border)}:host(:not([disabled]):hover){border-color:var(--border-hover-color);color:var(--text-hover-color)}:host(:not([disabled]):active),:host([active]){border-color:var(--border-active-color);color:var(--text-active-color)}:host(.nano-sortable__dragged){background:var(--nano-color-base-0);opacity:0.9 !important;box-shadow:var(--nano-shadow-l0) !important}.tab{padding:var(--padding);display:flex;white-space:nowrap;align-items:center;position:relative;gap:var(--nano-spacing-sm);justify-content:center}.tab.tab--disabled{opacity:0.5;cursor:not-allowed}.tab.tab--closable{padding-inline-end:calc(var(--padding) - var(--nano-spacing-sm))}.tab ::slotted(*),.tab::slotted(*){display:flex;align-items:center}.tab ::slotted(.nano-sortable__keyboard-handle){position:absolute;inset-inline-end:-1em;z-index:1}.tab:not(.tab--disabled):has(.tab__label:focus-visible){outline:var(--nano-focus-ring);outline-offset:-3px}.tab__label{display:flex;flex-direction:column;gap:var(--nano-spacing-sm);align-items:center}.tab__label:focus{outline:none}.tab__close-button{color:var(--nano-color-primary-1200);--hover-color:var(--nano-color-primary-700)}";
 
 let id$2 = 0;
@@ -22812,12 +23115,12 @@ class NanoTab {
         }
     };
     render() {
-        return (h(Host, { key: '7eca94a330509cbd3c6d232444fbcde422b755a6', id: this.host.id || this.tabId, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, h("div", { key: 'fca6ace8b5fc9c0142fcd04d70cb475323d8ef9d', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
+        return (h(Host, { key: '67fe232bda16bf41bf1268a1891cfeb6483ebd02', id: this.host.id || this.tabId, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, h("div", { key: '6f07d7d5a89071e094fe3deb19e88ec66a524f3d', 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,
-            } }, h("slot", { key: '3693ff8719b24c34db9018941daab7c840434502', name: "start" }), h("div", { key: 'c792fce22a28175e32f7e0b23a1a62f799016c76', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, h("slot", { key: '76b725cd050993d377bf5c7208ce5b7fdf224136' })), h("slot", { key: 'f7bd50a43bb64b67b2ce181bf9215ada4c0ccd12', name: "end" }), this.closable && !this.disabled && (h("nano-icon-button", { key: '96f6bddd3dee12d2e8adeb7a59f98d0cfe8b9c82', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
+            } }, h("slot", { key: '4c8dce458c8ae3ed526d4aed7332650be891510c', name: "start" }), h("div", { key: 'e71cced02347ffaa432b5711af54666ac0a6cfd6', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, h("slot", { key: '382f7f77b009e3a5cf3af3d3b94b02e639bf2934' })), h("slot", { key: '82a2c81ab573d3c78b7d913f4b7ab146e7c6d5b2', name: "end" }), this.closable && !this.disabled && (h("nano-icon-button", { key: '14e812f9acd5e081a1eba5014f6d4fe4b79371e2', 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 {
@@ -22863,10 +23166,10 @@ class NanoTabContent {
         requestAnimationFrame(() => (this.ready = true));
     }
     render() {
-        return (h(Host, { key: 'f182a99dab031220a40b2c5125d3229b8bacca1c', 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: '7afee777be86f5847c5ac4c8de6babae3199b01d', 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: '47b383859162b6a64518273a9057464de1d37479', part: "base", class: "nano-tab-content" }, h("slot", { key: '3f908fec081c956f9ffd8d7de5e0f45b5e193a8c' }))));
+            } }, h("div", { key: 'c316e2c15458eeb9fb6162d81060b81a1132e795', part: "base", class: "nano-tab-content" }, h("slot", { key: '532eedd714e732749cfe9b303b1f4c633e89491c' }))));
     }
     static get style() { return tabContentCss; }
     static get cmpMeta() { return {
@@ -23441,10 +23744,10 @@ class NanoTable {
         this.cleanUpObservers();
     }
     render() {
-        return (h(Host, { key: '61967ae8d9228be1374d9a4ee4e08b286cd4dd57', class: {
+        return (h(Host, { key: '3c45a2880bd20a771bcc682355452312340db56d', class: {
                 'nano-table': true,
                 'nano-table--props-ready': this.propsReady,
-            } }, this.scrollable && (h("nano-masked-overflow", { key: 'eca1991383ebca49f6032066078f02b62c839d6c', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: 'f3bcb6830439858393c1eda96d68c2c5ccadd15a', class: "nano-table__overflow" }))), h("slot", { key: '7662741dcb672f75bae03c16b5745ff4946f12f7' })));
+            } }, this.scrollable && (h("nano-masked-overflow", { key: '6b29ca4c8c64deae80def0d3958dc25c4d6cd1c0', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: '83dce90d6e5425b0fd2a2443d0d90b7acfc9c141', class: "nano-table__overflow" }))), h("slot", { key: 'cff62841c17cf20c2ff5872944dbd38bbe438369' })));
     }
     static get watchers() { return {
         "compact": ["handleCompactChange"],
@@ -24515,8 +24818,8 @@ let Rating$1 = class Rating {
         this.handleShowHideElements();
     }
     render() {
-        return (h(Host, { key: 'fbb60961810fe863ebebc729cbe4ecb955608c82', class: "nano-more-less" }, h("slot", { key: '6823f661e722640622d421c96244cd4a0eee1953', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
-            h("div", { key: '134fadd869470a34cbd21b06d9cc2c85fc4e614c', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: '62544d207ac12171da4905e3006e26113b1b0189', name: "less" }, h("button", { key: '54badba3d736faf5b2b686ec989998a4319c5001', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
+        return (h(Host, { key: 'cdfbe00c8ce785ad89f711c8488b514dba8f3fb6', class: "nano-more-less" }, h("slot", { key: '8c17f3540c587129feff6905e518e01f4866b90d', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
+            h("div", { key: 'fd937a181108336345a5278b4e2e230feb13f891', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: 'bd7c0630e06de922c8ed48e5efc0db640594c776', name: "less" }, h("button", { key: '8c924f74b1b7939d17a9defd02ccb41ecd403257', 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, ")")))) : (''),
         ]));
     }
@@ -24737,20 +25040,20 @@ class Rating {
         else {
             displayValue = this.isHovering ? this.hoverValue : this.value;
         }
-        return (h(Host, { key: 'df7dc8a018d6d786e47134a2b9896a4cf2e87074', class: "nano-rating" }, h("label", { key: '7d9861c77bd39e075b1d9f75b24a5390efcbb42e', class: `rating-label${this.hideLabel ? ' visually-hidden' : ''}`, part: "label", htmlFor: this.name }, h("slot", { key: 'f2406ae04779c885c9968513d4e33d1b00ca8bde', name: "label" }, this.label)), h("input", { key: '50b8e5c1ef6b55ae88b48e4cf3d3ef83bb6a33f6', 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: 'bacb1319a8119e09eb7223396c0fd308d8f1bcf0', class: "nano-rating" }, h("label", { key: 'e96dd3dc5d27aad666c9273fb48a0dde49b05bcd', class: `rating-label${this.hideLabel ? ' visually-hidden' : ''}`, part: "label", htmlFor: this.name }, h("slot", { key: 'a50e1bb855e58080b964cde932b6e850be44cff5', name: "label" }, this.label)), h("input", { key: 'c95ba7bf46db99df309030b4e7c9a006909e47a7', 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: '1089a70fecbf338efbf3b2f5a8624c2c3c5ce56c', class: "rating-wrap" }, h("div", { key: '6552b5f9466c1ec0df3e69d9543d693fa90829d4', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
+            } }), h("div", { key: 'a04e24da1bf879b551f31b3692e990e912739643', class: "rating-wrap" }, h("div", { key: '2686f949da578a7bcdbd3043f131edccc24f0f30', 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: '1a741e52552009d9fe705aac22abbfa63b49e196', 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: '890e0a8296994061f88cdfa42811ff61d1fbb2b2', 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: 'd6368fb64cac9837f38bc00a06b63f2ef3ad3a74', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
+            onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { key: 'fad1f1de103c1451d848a215c9c7b18084f172ce', 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,
@@ -25022,13 +25325,13 @@ class ResizeObserve {
         }
     }
     render() {
-        return (h(Host, { key: 'e5019ccd47c55fddcffd4fa5ff151b0d1db5465f', class: {
+        return (h(Host, { key: '3d1301e7d8a6c0f96188ea4dadddcc3f71a349cc', 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: '6117c97943bf1ca7368946dd17e356e2d866bbf3' }), !!this.notifyContentFit &&
+            } }, h("slot", { key: '363d69b62debe81c7d3d1790d4dead42538f7118' }), !!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" })),
@@ -25759,30 +26062,30 @@ class Select {
             disabled,
             clearControl: this.clearable,
         }))(this);
-        return (h(Host, { key: '83841b192717e301d098e3886cb3d44f7c517232', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
+        return (h(Host, { key: '0648eef02c3e5fc9891e3aee3baa81eae2fc2b5e', 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: 'c0a938ef46d167bbe5351913b1a73fcc39659b1d', ...wrapOptions, class: {
+            } }, h(FormControlWrap, { key: '36dcb0e4ef701eaf17ddf03f8f64cf83dee35b07', ...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: '704c73a69c5a3f661ed8926fc8980b952b9169be', ...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: 'ef05cb7727be6b7c0ab67c7e9ebb8d1387903eb3', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
-            this.mask && (h("div", { key: '3a58835bf8f059658238a717a8f71b896fe0b599', class: "select__mask" }, this.getLabel(this.value))),
-            h("input", { key: 'b74a7cedd698e6739ff3c81b4ef12710726b1a4d', 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: 'e7469592db6a1248d8cf32f2c8fd36364045ac49', 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: '6adbd4bf79d59de4a8d8f20c6dc287b9f70c9e5c', ...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: 'eaf182a6e691f3490a2e26522be8daef9f3c0e58', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
+            this.mask && (h("div", { key: 'd08b3d345fde15bd92a9d3237c9f0265b39a1cbb', class: "select__mask" }, this.getLabel(this.value))),
+            h("input", { key: '29eb562d57d5af570132b502652fbf0109563481', 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: 'c7135aca51ac7e0b3f23fc63b8e8fef3d5d0d4a8', 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: '50c0203767871b9a1dcf87d9b6e51a98cf62c72f', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: 'bfd78ea1f905f6d512e36f43c0e7bf417769d7ba', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: '67b82a4e86e472fb9bcf5c4173a9b202ea9402c5' }))), h("select", { key: 'e9a9ab79d35f38e1a20e98594ee1c0d11945eb1f', 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: 'c1bfe32d20443e5be164a400e5553e30488f26be', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: 'aad3f8699ac6e9538055437e30d040ba686b0c46', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: 'bbbc2b303f78dcdc9aaf19c78279099b389159c4' }))), h("select", { key: '87e9d612386dc3b0baf0a79b6de750d22043c967', 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 &&
@@ -25925,7 +26228,7 @@ let Slide$2 = class Slide {
         });
     }
     render() {
-        return (h(Host, { key: 'a426e75ad5b607ac12e53db8183e08f89a10057a', class: "nano-slide" }, h("slot", { key: '792f06fe463ae49d981d7beceb68e4b7b49beff3' })));
+        return (h(Host, { key: '3d5f03684b14b0944b06802a26955b035ae20a9f', class: "nano-slide" }, h("slot", { key: '5115d41ae13fb0980ae656c106b9105b5f14703b' })));
     }
     static get watchers() { return {
         "ready": ["readyChange"]
@@ -28904,15 +29207,15 @@ class Slides {
         this.destroyflickity();
     }
     render() {
-        return (h(Host, { key: '25fe656149129885383046b7f2cb81ecc965db13', class: "nano-slides" }, h("div", { key: '84d9f878b91454a12311ffc5203d49a243fb9c66', class: {
+        return (h(Host, { key: '905eab94c6853e11f8103ade8a2711515a957a88', class: "nano-slides" }, h("div", { key: 'a6ca3bf953dc8ad8643b5f196bbbb4cad5696739', class: {
                 slideshow: true,
                 ready: this.ready,
                 'not-ready': !this.ready,
-            }, part: "base" }, h("div", { key: 'b975dcadc6d7b7b5b7e915980527eba3bf740165', ref: (div) => (this.flickityEl = div), class: {
+            }, part: "base" }, h("div", { key: 'ebf38a42c8c0ee4a192e2c10c7e882f4953cf707', ref: (div) => (this.flickityEl = div), class: {
                 'flickity-container': true,
                 'slides-ready': this.slidesReady,
                 'slides-not-ready': !this.slidesReady,
-            }, part: "slide-container" }, h("slot", { key: 'a9b13e8e0c8808617c694953e3fef74a57d719a8' })), h("div", { key: '9caacd27973cc67740145365ab7a10c75ab44219', class: "ui-extras" }, h("slot", { key: 'ad80afb5ddbcc54b10310a4e115403fee8dda215', name: "ui" })))));
+            }, part: "slide-container" }, h("slot", { key: 'ac8e76e6ee701ef38a73a1f753cbf7ad30ef9c59' })), h("div", { key: 'e74cad0bd4ec8e2e15308b26550a697ff3dd4dcb', class: "ui-extras" }, h("slot", { key: '8b7b6cfb6ba0e531a8c7707f5f65cba334e8eba6', name: "ui" })))));
     }
     static get watchers() { return {
         "options": ["optionsChanged"],
@@ -29690,7 +29993,7 @@ class Sortable {
         }
     }
     render() {
-        return (h(Host, { key: 'd6d4f0ad6adf2a3f5e1d36b757e116b58e5b55b4', class: "nano-sortable" }, h("div", { key: 'd2cfcad28acfb052acbc6093dddfc247f5369bcf', 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: '079bc29ba8c2f26163b7e3a23f0107f78db7b3fb' })));
+        return (h(Host, { key: 'f9329f87a60f9b77ad917b9bbf0aa526f4779e82', class: "nano-sortable" }, h("div", { key: 'c30a6d47b7a932906b17f0cd0cec80e0c7ea38ef', 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: 'a377bb437eb590b3f77d10f105b2fa09e0d21cbd' })));
     }
     static get watchers() { return {
         "itemSelector": ["handleItemSelectorChange"],
@@ -30689,12 +30992,12 @@ class Sticker {
         this.hasBootstrapped = false;
     }
     render() {
-        return (h(Host, { key: 'f087d54cf3135fa7ba3d089f112157797efedaf2', 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: 'db32b41390349cec6975dfad25b6b99ddadf5758', class: {
+        return (h(Host, { key: 'd0e4e1b0cc7c63db0389ee67b999c30347f7e16b', 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: '6f9852e2cfeb2e203e5dde6f71e7a042a996dd86', 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: 'b1e54c375552b7460fb6991f1c476bf9f73c997f', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: 'a2ee69ba9e39d796d832340777f61deb21c2f5d1' })))));
+            }, ref: (div) => (this.sticker = div) }, h("div", { key: '1e54d0ebe57b52c95a64acbb6d46f8c9d9778dd3', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: 'e8359edd6c73c5006ff1c90a91ecafad07e5c915' })))));
     }
     static get watchers() { return {
         "trigger": ["updateTriggerOffset"],
@@ -30983,10 +31286,10 @@ class Tooltip {
             this.popover.destroy();
     }
     render() {
-        return (h(Host, { key: '88500e56b7cc79e344604bfb9ffc54f2c7884c16', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, h("slot", { key: '6ff00a2034648eb7cde6bb7e7ba1bc0dcf611238', onSlotchange: this.handleSlotChange }), h("div", { key: 'e278b67db89953ef0a174b50f5aa28e101e8e83d', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, h("div", { key: '226bc518e38502e1a864c26a265abb01cfdb918e', part: "base", ref: (el) => (this.tooltip = el), class: {
+        return (h(Host, { key: '94758bb18228b14884cf2be79228e554de84013f', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, h("slot", { key: '45589386e68d89c21abbb50513678152e8bce9d1', onSlotchange: this.handleSlotChange }), h("div", { key: '6a76c101c35d45458f0a680753a381cc95631b87', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, h("div", { key: 'd3b2cc9c9018c9a0a5dc4cef256c8b9c568cd0b4', 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: '6245d2904946b690c9c3ea4e902fa5d789473110', name: "content", onSlotchange: () => this.setLabel() }, this.content), h("div", { key: '8ddc4c34d70107ade21b7b53827d3c37e6744d2e', class: "tooltip-arrow", "data-popper-arrow": true })))));
+            }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { key: '1c51cdc6a7ec88107e3290b0b9750198e7176c20', name: "content", onSlotchange: () => this.setLabel() }, this.content), h("div", { key: '00f090eee000e6bba713dc21a1d53c348eb94a76', class: "tooltip-arrow", "data-popper-arrow": true })))));
     }
     static get watchers() { return {
         "content": ["setLabel"],
@@ -31061,6 +31364,8 @@ registerComponents([
   NanoInPageNav,
   NanoIncrement,
   NanoOptionBox,
+  NanoStepAccordion,
+  NanoStepBreadcrumb,
   NanoTab,
   NanoTabContent,
   NanoTabGroup,