@nanoporetech-digital/components 8.0.0-alpha.0 → 8.0.0-alpha.2

package/dist/components/datalist.js

@@ -520,22 +520,23 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
             this.mo.disconnect();
             this.mo = undefined;
         }
-        if (this.connectedInput)
-            this.removeEventListeners(this.connectedInput);
+        if (this.connectedInput) {
+            this.connectedInput = undefined;
+        }
     }
     render() {
-        return (h(Host, { key: '0e0725581517a0a58fbaf04bfd5dba2d4362f71d', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
+        return (h(Host, { key: 'c869f626deae72020846edf761d0d8f1b59c34e7', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
                 ? 'Select options from the list below'
-                : undefined }, h("nano-dropdown", { key: '5b0a39513e9c0717bf3240c250f703c6997b8a23', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
+                : undefined }, h("nano-dropdown", { key: '8fa52dc246705c9af636b1c96ee37df8b6bd746d', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
                 dlist__dropdown: true,
                 'dlist--isfiltered': this.isFiltered,
-            }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: 'a6c4229eda26e59f8cf37602bcb0fa61e80ee2e5', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
+            }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '998896a220e3cf3f010bda3354bb530ac0cc9296', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
                 dlist__menu: true,
                 'dlist__menu--open': this.dropwdownOpen,
-            }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: 'c96ff0ec6819c41954f073fb07799a3e30c50101', name: "list-top" }), h("slot", { key: 'da56d581d05587674da3371088280ed98f837af1' }), h("slot", { key: '0f372b97c431d484e9ffc87594660e4ca5d2bba6', name: "internal-opts" }), h("slot", { key: 'e51e02accb72f3ac43386dba8e240470695efa1c', name: "list-bottom" })), h("nano-menu", { key: 'df93b22751834dfbbf6e23a9bdaad5a8086355ec', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
+            }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '8f585edd48ec29a847818d1e9af8baf0bc4b4ddf', name: "list-top" }), h("slot", { key: '3bdd8c0a51d63b6fcf3a25d630212db4ba7d8a9b' }), h("slot", { key: 'a7b997daebd6a1e25f1a4a97e4354b966ceeebd6', name: "internal-opts" }), h("slot", { key: '41ebc4da7244b1e4fb532a2fbb0356ea51eb865a', name: "list-bottom" })), h("nano-menu", { key: 'd5d360f4e8d3c78780477572d385daaa4bb12c15', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
                 dlist__menu: true,
                 'dlist__menu--open': this.dropwdownOpen,
-            } }, h("slot", { key: '785156311b41d90eecb951782342fd1b8d706ff1', name: "no-result" })), !!this.actvOptEles && (h("div", { key: 'b57c146e650ef55c51fa445c097fc1e10845efc9', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
+            } }, h("slot", { key: '3cc55519054da79e57dc70ecc936c0e67e7e3949', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '0662bfdc4056f2111647550d9aba6a331653d2f3', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
     }
     static get watchers() { return {
         "open": ["openWatcher"],
@@ -557,7 +558,7 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
         "input": [1],
         "type": [1],
         "activeOptions": [2064, "active-options"],
-        "open": [1028],
+        "open": [1540],
         "disableFilter": [4, "disable-filter"],
         "disabled": [4],
         "actvOptEles": [32],

package/dist/components/details.js

@@ -144,6 +144,9 @@ const NanoDetails = /*@__PURE__*/ proxyCustomElement(class NanoDetails extends H
         this.attachMo();
     }
     connectedCallback() {
+        if (this.bodyEl) {
+            this.bodyEl.addEventListener('transitionend', this.handleTransitionEnd);
+        }
         this.attachMo();
     }
     disconnectedCallback() {
@@ -156,13 +159,13 @@ const NanoDetails = /*@__PURE__*/ proxyCustomElement(class NanoDetails extends H
         }
     }
     render() {
-        return (h(Host, { key: 'dfe08b9736512e4f2e7e77b6e08f391e570f7d35', class: "nano-details" }, h("details", { key: 'aee47095a745ec92d97e3eb2a09f1765fbad251d', part: "base", ref: (d) => (this.detailsEl = d), class: {
+        return (h(Host, { key: '6bd0b907e8036bffdc232f11520fc7e7ecbd5274', class: "nano-details" }, h("details", { key: 'a375256a375ffa1c52f7e425328add65396d79ae', part: "base", ref: (d) => (this.detailsEl = d), class: {
                 details: true,
                 disabled: this.disabled,
-            } }, h("summary", { key: 'b15a83c3386171f212a68cf456eb9ba6296917c2', 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: 'c29db27dc0c74a8053c035421b0738eee1d72945', part: "icon icon--start", class: "icon icon--start" }, h("slot", { key: '99381aa8452aac30498cfb27148c9e507e07989e', name: "icon-start" }))), h("div", { key: '59068fae315b9cd0427987eb59e03f2cd219e45a', part: "label", class: "label" }, this.label ? this.label : h("slot", { name: "label" })), h("span", { key: '8eb4304e5c0da199ef6ad7a9730f92130072afd8', part: "icon icon--end", class: "icon icon--end" }, this.open ? (h("slot", { name: "icon-collapse" })) : (h("slot", { name: "icon-expand" })), h("slot", { key: 'a8c2b9213b96787007a85faf64d42436729bc6e4', name: "icon-end" }, !this.slotCtrl.has('icon-start') &&
+            } }, h("summary", { key: '6532629e3d2258dd7b35aa9c088c290cfd586111', 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: '2a91b1368bfb4120d3356c59a6c277a2608f1ff9', part: "icon icon--start", class: "icon icon--start" }, h("slot", { key: '6ec67523e758f1f189a9c2339e48116f19423a87', name: "icon-start" }))), h("div", { key: '83c975864586f752a86bd13b78ba7a2329f3a484', part: "label", class: "label" }, this.label ? this.label : h("slot", { name: "label" })), h("span", { key: '538494f4cd43b12143151ce1523533efb70800b7', part: "icon icon--end", class: "icon icon--end" }, this.open ? (h("slot", { name: "icon-collapse" })) : (h("slot", { name: "icon-expand" })), h("slot", { key: '9cd7a3d39754029ad70d3b8976545513a7d6f77b', 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: 'bfb3677f307b23b4947c80d7173b63ce51b83c70', class: "default-icon", name: "light/chevron-down" }))))), h("div", { key: 'dad8f7fbf316facfc2a505edf0041fb259d78d5b', part: "body", class: "body", ref: (div) => (this.bodyEl = div), role: "region", "aria-labelledby": "header" }, h("div", { key: '988b4a6201029002ab76004375955eaa87542ed9', class: "content-wrapper" }, h("div", { key: '159483b132abfc6d7edf87771af0f3c2c0e077bd', part: "content", class: "content", id: "content" }, h("slot", { key: '8bb9bbca225bca84bc1efd2c617372f490985bc1' })))))));
+            !this.slotCtrl.has('icon-collapse') && (h("nano-icon", { key: '0321927f47cbc530e8044598fec3370dfedbb325', class: "default-icon", name: "light/chevron-down" }))))), h("div", { key: 'a7366fb51de087f7c6f5d7da59e761050b2ab231', part: "body", class: "body", ref: (div) => (this.bodyEl = div), role: "region", "aria-labelledby": "header" }, h("div", { key: 'dd888954cdfba45da62a01d10f7b010a0277b7ec', class: "content-wrapper" }, h("div", { key: 'eff6dbb8d4a41d9957d135e2f1e7470e37615255', part: "content", class: "content", id: "content" }, h("slot", { key: '9b2fd79fc46ad9b9c5c7c6a39a856b20b87bca6a' })))))));
     }
     static get watchers() { return {
         "open": ["toggleClick"]

package/dist/components/form-control.js

@@ -35,7 +35,7 @@ const FormControlWrap = (props, children) => {
             'has-float-label': label !== null && floatLabel,
             'has-helper-end': hasHelperEndSlot,
             rtl,
-            [props.class]: true,
+            [props.class]: !!props.class,
         } },
         h("div", { class: "form-ctrl__wrapper" },
             !floatLabel ? renderLabel({ ...props }) : '',

package/dist/components/grid.js

@@ -129,7 +129,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-medium, 16px);--grid-row-gap:var(--nano-spacing-medium, 16px);--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}: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}";
+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-medium, 16px);--grid-row-gap:var(--nano-spacing-medium, 16px);--grid-align-items:start;--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;align-items:var(--grid-align-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}";
 
 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;

package/dist/components/index.js

@@ -8,36 +8,7 @@ export { g as getTagPrefix } from './renderer.js';
 export { d as nanoDebounce, t as nanoThrottle } from './throttle.js';
 export { g as nanoGetTabElements } from './tabbable.js';
 
-var appGlobalScript = async () => {
-    if (globalThis.window &&
-        'MutationObserver' in globalThis.window &&
-        globalThis['document']) {
-        // fire global 'ready' event when everything is hydrated
-        const docEle = document.documentElement;
-        window.addEventListener('appload', () => {
-            docEle.classList.add('hydrated');
-        });
-        const docIsReady = () => {
-            if (!docEle.classList.contains('hydrated'))
-                return false;
-            docEle.dispatchEvent(new CustomEvent('nanoComponentsReady'));
-            return true;
-        };
-        if (!docIsReady()) {
-            let mutationO = new MutationObserver((_) => {
-                if (!docIsReady())
-                    return;
-                mutationO.disconnect();
-                mutationO = null;
-            });
-            mutationO.observe(docEle, {
-                childList: false,
-                subtree: false,
-                attributes: true,
-            });
-        }
-    }
-};
+var appGlobalScript = async () => { };
 
 const globalScripts = appGlobalScript;
 

package/dist/components/masked-overflow.js

@@ -10,7 +10,7 @@ import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './icon-button.js';
 import { d as defineCustomElement$1 } from './tooltip.js';
 
-const maskedOverflowCss = ":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{--indicator-transition:var(--nano-transition-fast);--indicator-color:var(--nano-color-primary-1000);--indicator-size:3px;--indicator-track-color:var(--nano-color-neutral-300);--indicator-track-size:var(--indicator-size);--scroll-btn-color:var(--nano-color-primary-1200);--scroll-btn-size:1rem;--fade-size:100px;position:relative;z-index:var(--nano-z-index-raised)}:host([orientation=horizontal]){display:block}:host([orientation=vertical]){display:flex}.onav--no-transitions *{transition-duration:0s !important}.onav__nav:has(.onav__scroller:focus-visible){outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.onav__scroller{scrollbar-width:thin;overflow:auto;display:flex;transition:var(--nano-transition-fast) ease}.onav__scroller:focus{outline:none}.onnav--hide-scrollbars .onav__scroller{scrollbar-width:none;-ms-overflow-style:none}.onnav--hide-scrollbars .onav__scroller::-webkit-scrollbar{inline-size:0;block-size:0}.onav__items{flex:1 1 auto;position:relative;inline-size:auto;flex-wrap:nowrap;display:flex}.onnav--has-indicator .onav__items::before{content:\"\";background:var(--indicator-track-color);display:block;position:absolute;z-index:1}.onav__active-indicator{position:absolute;z-index:10;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease, var(--indicator-transition) height ease}.nano-icon-button.onav__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;border:unset;z-index:2;transition:var(--nano-transition-fast) ease opacity;opacity:0;color:var(--scroll-btn-color);font-size:var(--scroll-btn-size);pointer-events:none}.nano-icon-button.onav__scroll-button.is-shown{opacity:1;pointer-events:all}.onav--horizontal.onav--has-scroll-controls .onav__scroller{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%);mask-image:linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%)}.onav--horizontal.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--horizontal.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:calc(var(--fade-size) * -2) 0;mask-position:calc(var(--fade-size) * -2) 0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--horizontal.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100%;mask-size:100%}.onav--horizontal .onav__items{flex-direction:row}.onnav--has-indicator .onav--horizontal .onav__items::before{content:\"\";inline-size:100%;block-size:var(--indicator-track-size);inset-block-end:0}.onav--horizontal .onav__active-indicator{inset-block-end:0;border-block-end:solid var(--indicator-size) var(--indicator-color)}.onav--horizontal .onav__scroll-button{inset-block:0}.onav--horizontal .onav__scroll-button--start{inset-inline-start:0}.onav--horizontal .onav__scroll-button--end{inset-inline-end:0}.onav--vertical{--fade-size:70px;inline-size:100%;display:flex}.onav--vertical .onav__nav{max-block-size:100%;display:flex}.onav--vertical .onav__scroller{inline-size:100%;flex-direction:column}.onav--vertical.onav--has-scroll-controls .onav__scroller{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%);mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%)}.onav--vertical.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% calc(100% + var(--fade-size) * 2);mask-size:100% calc(100% + var(--fade-size) * 2)}.onav--vertical.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:0 calc(var(--fade-size) * -2);mask-position:0 calc(var(--fade-size) * -2);-webkit-mask-size:100% calc(100% + var(--fade-size) * 2);mask-size:100% calc(100% + var(--fade-size) * 2)}.onav--vertical.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% 100%;mask-size:100% 100%}.onav--vertical .onav__items{flex-direction:column;inline-size:fit-content}.onnav--has-indicator .onav--vertical .onav__items::before{content:\"\";block-size:100%;inline-size:var(--indicator-track-size);inset-inline-start:0}.onav--vertical .onav__active-indicator{inset-inline-start:0;border-inline-start:solid var(--indicator-size) var(--indicator-color)}.onav--vertical .onav__scroll-button{inset-inline:0}.onav--vertical .onav__scroll-button--start{inset-block-start:0}.onav--vertical .onav__scroll-button--end{inset-block-end:0}";
+const maskedOverflowCss = ":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{--indicator-transition:var(--nano-transition-fast);--indicator-color:var(--nano-color-primary-1000);--indicator-size:3px;--indicator-track-color:var(--nano-color-neutral-300);--indicator-track-size:var(--indicator-size);--scroll-btn-color:var(--nano-color-primary-1200);--scroll-btn-size:1rem;--fade-size:100px;position:relative;z-index:var(--nano-z-index-raised)}:host([orientation=horizontal]){display:block}:host([orientation=vertical]){display:flex}.onav--no-transitions *{transition-duration:0s !important}.onav__nav:has(.onav__scroller:focus-visible){outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.onav__scroller{scrollbar-width:thin;overflow:auto;display:flex;transition:var(--nano-transition-fast) ease}.onav__scroller:focus{outline:none}.onnav--hide-scrollbars .onav__scroller{scrollbar-width:none;-ms-overflow-style:none}.onnav--hide-scrollbars .onav__scroller::-webkit-scrollbar{inline-size:0;block-size:0}.onav__items{flex:1 1 auto;position:relative;inline-size:auto;flex-wrap:nowrap;display:flex}.onnav--has-indicator .onav__items::before{content:\"\";background:var(--indicator-track-color);display:block;position:absolute;z-index:1}.onav__active-indicator{position:absolute;z-index:10;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease, var(--indicator-transition) height ease}.nano-icon-button.onav__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;border:unset;z-index:2;transition:var(--nano-transition-fast) ease opacity;opacity:0;color:var(--scroll-btn-color);font-size:var(--scroll-btn-size);pointer-events:none}.nano-icon-button.onav__scroll-button.is-shown{opacity:1;pointer-events:all}.onav--horizontal.onav--has-scroll-controls .onav__scroller{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%);mask-image:linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%)}.onav--horizontal.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--horizontal.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:calc(var(--fade-size) * -2) 0;mask-position:calc(var(--fade-size) * -2) 0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--horizontal.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100%;mask-size:100%}.onav--horizontal .onav__items{flex-direction:row}.onav--horizontal .onav__items::before{inline-size:100%;block-size:var(--indicator-track-size);inset-block-end:0}.onav--horizontal .onav__active-indicator{inset-block-end:0;border-block-end:solid var(--indicator-size) var(--indicator-color)}.onav--horizontal .onav__scroll-button{inset-block:0}.onav--horizontal .onav__scroll-button--start{inset-inline-start:0}.onav--horizontal .onav__scroll-button--end{inset-inline-end:0}.onav--vertical{--fade-size:70px;inline-size:100%;display:flex}.onav--vertical .onav__nav{max-block-size:100%;min-inline-size:100%;display:flex}.onav--vertical .onav__scroller{inline-size:100%;flex-direction:column}.onav--vertical.onav--has-scroll-controls .onav__scroller{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%);mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%)}.onav--vertical.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% calc(100% + var(--fade-size) * 2);mask-size:100% calc(100% + var(--fade-size) * 2)}.onav--vertical.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:0 calc(var(--fade-size) * -2);mask-position:0 calc(var(--fade-size) * -2);-webkit-mask-size:100% calc(100% + var(--fade-size) * 2);mask-size:100% calc(100% + var(--fade-size) * 2)}.onav--vertical.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% 100%;mask-size:100% 100%}.onav--vertical .onav__items{flex-direction:column;inline-size:fit-content}.onav--vertical .onav__items::before{block-size:100%;inline-size:var(--indicator-track-size);inset-inline-start:0}.onav--vertical .onav__active-indicator{inset-inline-start:0;border-inline-start:solid var(--indicator-size) var(--indicator-color)}.onav--vertical .onav__scroll-button{inset-inline:0}.onav--vertical .onav__scroll-button--start{inset-block-start:0}.onav--vertical .onav__scroll-button--end{inset-block-end:0}";
 
 const MaskedOverflow = /*@__PURE__*/ proxyCustomElement(class MaskedOverflow extends HTMLElement {
     // public surface
@@ -320,7 +320,7 @@ const MaskedOverflow = /*@__PURE__*/ proxyCustomElement(class MaskedOverflow ext
         }
     }
     render() {
-        return (h(Host, { key: '95eee57fdc7f8527fbbe4b6d9fbf6f48d5764ac8', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: 'fb8fb3b5946a4ce7b8b144df89541012c44d9aff', part: "base", class: {
+        return (h(Host, { key: '4f88bf0a4cd8f01c745685afe7b0c5f9fc9b26b2', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: 'b7894467af4981a53bb0540998f9fdee3b5e4db7', part: "base", class: {
                 onav: true,
                 [`onav--${this.orientation}`]: true,
                 'onav--has-scroll-controls': this.hasScrollControls,
@@ -328,13 +328,13 @@ const MaskedOverflow = /*@__PURE__*/ proxyCustomElement(class MaskedOverflow ext
                 'onav--has-scroll-controls-end': !this.hideControlEnd,
                 'onav--no-transitions': this.instantReCalc,
                 'onnav--has-indicator': this.showIndicator,
-                'onnav--hide-scrollbars': this.hideScrollbars,
-            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '23da0af8abf895a7bb2b158965f9ef955e798e0c', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '28573455243fe42c090dbcdb569d376a7f9d5eb3', part: "scroll-button scroll-button-prev", class: {
+                'onnav--hide-scrollbars': this.hideScrollbars && this.hideScrollbars !== 'false',
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'c12e39f98ea4750a0709c822f1827fd3a4580ca5', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '9f45887d61630f41398e872bb7d3538f87fcc7c0', part: "scroll-button scroll-button-prev", class: {
                 '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: 'b1c4626550336c2723ef68df1f4b5a3034c383d5', 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: 'c751fd48b83e957c156448841939df286dff0c37', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: '059962178e1c122d95ebbcfb8b98114b0507d3df', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: '6cc5fe32c97aa75700feea39cd6d77d18c968c80', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'fe8b6ee6f86a8d96a2ed8a79f2ebd292a6432e95', part: "scroll-button scroll-button-next", class: {
+                : 'light/chevron-up' })), h("div", { key: '1b6402869156bb7d6f3ddaf5b6b9e1ba80e94104', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, h("div", { key: '1018eef93e68d13faf4c7898a69f6723e772ec3c', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: 'ab21bd04d6bb661f716d835ee4bc0d111fed863f', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: 'bb66cabd059551b392e5049eb8d18f83de8eb818', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'bd48cb7171ee606a9c368a36090cefb3e61337bd', part: "scroll-button scroll-button-next", class: {
                 'onav__scroll-button': true,
                 'onav__scroll-button--end': true,
             }, ref: (btn) => (this.endBtn = btn), onClick: () => this.handleBtnClick(true), label: "Click to scroll", iconName: this.orientation === 'horizontal'

package/dist/components/menu.js

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { proxyCustomElement, HTMLElement, createEvent, Build, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { t as transformTag, h } from './renderer.js';
 import { g as getActiveElement } from './active-element.js';
 import { g as getDirectChildren } from './dom.js';
@@ -221,8 +221,6 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
         }
     };
     handleSlotContent = () => {
-        if (!Build.isBrowser)
-            return;
         this._type = this.type || null;
         if (!this._type) {
             let linkCount, btnCount = 0;
@@ -263,11 +261,11 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
         this.handleSlotContent();
     }
     render() {
-        return (h(Host, { key: 'f3908b74fc21b630402f06fac95a75f5a6b2ff27', role: this._type === 'listbox' ? 'group' : this._type, class: "nano-menu" }, h("div", { key: '451b5fb6151135ab4cb73d9141086be43d9eaf93', onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onFocus: this.handleFocus, "aria-label": this.label ? this.label : undefined, ref: (el) => (this.menu = el), part: "base", class: {
+        return (h(Host, { key: 'f7c0e55c16e5607f25a4a75847c0defd4b860e17', role: this._type === 'listbox' ? 'group' : this._type, class: "nano-menu" }, h("div", { key: '3a19c91258abaa6b0a6333a35809172aabf4db43', onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onFocus: this.handleFocus, "aria-label": this.label ? this.label : undefined, ref: (el) => (this.menu = el), part: "base", class: {
                 menu: true,
                 ['menu--' + this._type]: true,
                 'menu--has-focus': this.hasFocus,
-            }, tabIndex: -1, role: "group" }, h("slot", { key: '37f40b06d1dc66c46130468c3de79dfeeb38c29c', onSlotchange: this.handleSlotContent }))));
+            }, tabIndex: -1, role: "group" }, h("slot", { key: '75c213c4a744e7edd1826d88a8e391e16bdc091b', onSlotchange: this.handleSlotContent }))));
     }
     static get style() { return menuCss; }
 }, [1, "nano-menu", {

package/dist/components/nano-animation.js

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, Build, Host } from '@stencil/core/internal/client';
 import { h } from './renderer.js';
 
 const bounce = [
@@ -1138,7 +1138,7 @@ const NanoAnimation$1 = /*@__PURE__*/ proxyCustomElement(class NanoAnimation ext
         this.createAnimation();
     };
     async createAnimation() {
-        if (!this.defaultSlot)
+        if (!this.defaultSlot || Build.isServer)
             return;
         const easing = easings[this.easing] ?? this.easing;
         const keyframes = this.keyframes ??
@@ -1212,7 +1212,7 @@ const NanoAnimation$1 = /*@__PURE__*/ proxyCustomElement(class NanoAnimation ext
         this.animation?.finish();
     }
     render() {
-        return (h(Host, { key: '69ede16e4ecb0155cdfc63a56e04ca38c5e56412', class: "nano-animation" }, h("slot", { key: '73a9ec636c4fe8b72570906bce645529b4343606', ref: (slot) => {
+        return (h(Host, { key: 'a71dc9c9b6505aa5ad8cdaefb32cadc0ca37fbb5', class: "nano-animation" }, h("slot", { key: 'a01cc1638ec3b57d56deb0f91d2421be4874d212', ref: (slot) => {
                 this.defaultSlot = slot;
             }, onSlotchange: this.handleSlotChange })));
     }

package/dist/components/nano-breadcrumb.js

@@ -8,7 +8,7 @@ import { d as defineCustomElement$4 } from './icon.js';
 import { d as defineCustomElement$3 } from './menu.js';
 import { d as defineCustomElement$2 } from './nav-item.js';
 
-const breadcrumbCss = ":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  /**\n  * @prop {string} --text-color - The base color of the text. Defaults to var(--nano-color-primary-1000).\n  * @prop {string} --text-color-hover - The hover colour of the text. Defaults to var(--nano-color-primary-1200).\n  * @prop {string} --text-color-secondary - The secondary colour (& inactive colour) of the text. Defaults to var(--nano-color-neutral-1400).\n  * @prop {string} --text-color-disabled - The disabled colour of the text. Defaults to var(--nano-color-neutral-1000).\n  * @prop {string} --border-color - The colour of the border & divider. Defaults to var(--nano-color-neutral-400).\n  * @prop {string} --trigger-bg-color - The background colour of the trigger button. Defaults to var(--nano-color-base-0).\n  */\n  --text-color: var(--nano-color-primary-1000);\n  --text-color-hover: var(--nano-color-primary-1200);\n  --text-color-secondary: var(--nano-color-neutral-1400);\n  --text-color-disabled: var(--nano-color-neutral-1000);\n  --border-color: var(--nano-color-neutral-400);\n  --trigger-bg-color: var(--nano-color-base-0);\n}\n:host .breadcrumbs {\n  container-type: inline-size;\n  container-name: breadcrumbs;\n  inline-size: 100%;\n  max-inline-size: 1346px;\n}\n:host nano-menu::part(base), :host nano-menu [part~=\"base\"] {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  flex-direction: row;\n}\n:host li,\n:host nano-nav-item {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  font-size: var(--nano-font-size-xs);\n  line-height: var(--nano-line-height-normal);\n  text-wrap: nowrap;\n  margin-block-end: 0;\n}\n:host li:not(.return-only li)::after,\n:host nano-nav-item::after {\n  content: \"/\";\n  margin: 0 var(--nano-spacing-xs);\n  color: var(--border-color);\n}\n:host a.link {\n  color: var(--text-color);\n}\n:host a:not(.link) {\n  color: var(--text-color-secondary);\n}\n:host a:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n  z-index: 1;\n}\n:host a.link:hover {\n  color: var(--text-color-hover);\n}\n:host a.return.link {\n  display: flex;\n  align-items: center;\n  gap: calc(var(--nano-spacing-sm) / 2);\n}\n:host nano-dropdown {\n  inline-size: 100%;\n  display: none;\n}\n:host nano-dropdown[open]::part(trigger), :host nano-dropdown[open] [part~=\"trigger\"] {\n  box-shadow: var(--nano-shadow-l1);\n}\n:host nano-dropdown[open]::part(panel), :host nano-dropdown[open] [part~=\"panel\"] {\n  box-shadow: var(--nano-shadow-l1);\n}\n:host .trigger-button {\n  inline-size: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--nano-spacing-l3) var(--nano-spacing-l2);\n  color: var(--text-color);\n  background-color: var(--trigger-bg-color);\n  cursor: pointer;\n  text-align: start;\n  border: none;\n  font-size: var(--nano-font-size-xs);\n}\n:host .trigger-button .trigger-button_label {\n  text-decoration: underline;\n}\n:host .trigger-button .trigger-button_label::after {\n  content: \"/\";\n  margin: 0 var(--nano-spacing-xs);\n  color: var(--border-color);\n}\n:host .trigger-button:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n}\n:host .trigger-icon {\n  transform: rotate(0deg);\n  transition: var(--nano-transition-x-fast) ease transform;\n}\n:host .trigger-icon--open {\n  transform: rotate(180deg);\n}\n@container breadcrumbs (max-width: 768px) {\n  :host .main {\n    display: none;\n  }\n  :host nano-dropdown {\n    display: block;\n  }\n  :host nano-menu::part(base), :host nano-menu [part~=\"base\"] {\n    flex-direction: column;\n  }\n  :host nano-nav-item::after {\n    display: none;\n  }\n  :host .trigger-button_label::after {\n    display: inline-block;\n  }\n  :host .return-only {\n    padding: var(--nano-spacing-l3) var(--nano-spacing-l2);\n  }\n  :host nano-nav-item::part(trigger), :host nano-nav-item [part~=\"trigger\"] {\n    text-decoration: none;\n    color: var(--text-color-secondary);\n  }\n}";
+const breadcrumbCss = ":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  /**\n  * @prop {string} --text-color - The base color of the text. Defaults to var(--nano-color-primary-1000).\n  * @prop {string} --text-color-hover - The hover colour of the text. Defaults to var(--nano-color-primary-1200).\n  * @prop {string} --text-color-secondary - The secondary colour (& inactive colour) of the text. Defaults to var(--nano-color-neutral-1400).\n  * @prop {string} --text-color-disabled - The disabled colour of the text. Defaults to var(--nano-color-neutral-1000).\n  * @prop {string} --border-color - The colour of the border & divider. Defaults to var(--nano-color-neutral-400).\n  * @prop {string} --trigger-bg-color - The background colour of the trigger button. Defaults to var(--nano-color-base-0).\n  */\n  --text-color: var(--nano-color-primary-1000);\n  --text-color-hover: var(--nano-color-primary-1200);\n  --text-color-secondary: var(--nano-color-neutral-1400);\n  --text-color-disabled: var(--nano-color-neutral-1000);\n  --border-color: var(--nano-color-neutral-400);\n  --trigger-bg-color: var(--nano-color-base-0);\n}\n:host .breadcrumbs {\n  container-type: inline-size;\n  container-name: breadcrumbs;\n  inline-size: 100%;\n  max-inline-size: 1346px;\n}\n:host ol,\n:host nano-menu::part(base) {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  flex-direction: row;\n}\n:host li,\n:host nano-nav-item {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  font-size: var(--nano-font-size-xs);\n  line-height: var(--nano-line-height-normal);\n  text-wrap: nowrap;\n  margin-block-end: 0;\n}\n:host li:not(.return-only li)::after,\n:host nano-nav-item::after {\n  content: \"/\";\n  margin: 0 var(--nano-spacing-xs);\n  color: var(--border-color);\n}\n:host a.link {\n  color: var(--text-color);\n}\n:host a:not(.link) {\n  color: var(--text-color-secondary);\n}\n:host a:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n  z-index: 1;\n}\n:host a.link:hover {\n  color: var(--text-color-hover);\n}\n:host a.return.link {\n  display: flex;\n  align-items: center;\n  gap: calc(var(--nano-spacing-sm) / 2);\n}\n:host nano-dropdown {\n  inline-size: 100%;\n  display: none;\n}\n:host nano-dropdown[open]::part(trigger) {\n  box-shadow: var(--nano-shadow-l1);\n}\n:host nano-dropdown[open]::part(panel) {\n  box-shadow: var(--nano-shadow-l1);\n}\n:host .trigger-button {\n  inline-size: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--nano-spacing-l3) var(--nano-spacing-l2);\n  color: var(--text-color);\n  background-color: var(--trigger-bg-color);\n  cursor: pointer;\n  text-align: start;\n  border: none;\n  font-size: var(--nano-font-size-xs);\n}\n:host .trigger-button .trigger-button_label {\n  text-decoration: underline;\n}\n:host .trigger-button .trigger-button_label::after {\n  content: \"/\";\n  margin: 0 var(--nano-spacing-xs);\n  color: var(--border-color);\n}\n:host .trigger-button:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n}\n:host .trigger-icon {\n  transform: rotate(0deg);\n  transition: var(--nano-transition-x-fast) ease transform;\n}\n:host .trigger-icon--open {\n  transform: rotate(180deg);\n}\n@container breadcrumbs (max-width: 768px) {\n  :host .main {\n    display: none;\n  }\n  :host nano-dropdown {\n    display: block;\n  }\n  :host nano-menu::part(base) {\n    flex-direction: column;\n  }\n  :host nano-nav-item::after {\n    display: none;\n  }\n  :host .trigger-button_label::after {\n    display: inline-block;\n  }\n  :host .return-only {\n    padding: var(--nano-spacing-l3) var(--nano-spacing-l2);\n  }\n  :host nano-nav-item::part(trigger) {\n    text-decoration: none;\n    color: var(--text-color-secondary);\n  }\n}";
 
 const NanoBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class NanoBreadcrumb extends HTMLElement {
     constructor() {

package/dist/components/nano-card-carousel.js

@@ -5,7 +5,7 @@ import { proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/cl
 import { h } from './renderer.js';
 import { d as defineCustomElement$2 } from './slides.js';
 
-const cardCarouselCss = ":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  }/** Typography */\n:host {\n  /**\n   * @prop --bleed: A portion of the Image of the next card is displayed outside the parent width boundary. \n   * Generally should be the parent's `padding-inline-end` (or `padding-right`). Defaults to 0px;\n   * @prop --gap: gap between the slides. Defaults to var(--nano-spacing-xl) on large screens, var(--nano-spacing-md) on small screens;\n   * @prop --pagination-button-color: The color of the pagination button. Defaults to var(--nano-color-neutral-400);\n   * @prop --pagination-button-active: Active color of the pagination button. Defaults to var(--nano-color-primary-1000);\n   */\n  --bleed: 0px;\n  --gap: var(--nano-spacing-xl);\n  --pagination-button-color: var(--nano-color-neutral-400);\n  --pagination-button-hover: var(--nano-color-primary-700);\n  --pagination-button-active: var(--nano-color-primary-1000);\n  --peek: calc(var(--bleed) / 2);\n  display: block;\n  position: relative;\n  margin-inline: 0 calc(var(--bleed) * -1);\n  container-type: inline-size;\n}\n\n.base ::slotted(nano-slide), .base::slotted(nano-slide) {\n  --img-opacity: calc(1 - max((var(--distance) - 50) / 30, 0));\n  --text-opacity: calc(1 - max((var(--distance) - 50) / 15, 0));\n  display: block;\n  text-align: unset;\n  min-block-size: auto;\n  inline-size: calc(50% + var(--gap) / 2 - var(--peek));\n  padding-inline-end: var(--gap);\n}\n.base nano-slides[ready]::part(slide-container), .base nano-slides[ready] [part~=\"slide-container\"] {\n  flex-flow: column wrap;\n  justify-content: flex-start;\n}\n.base nano-slides::part(slide-viewport), .base nano-slides [part~=\"slide-viewport\"] {\n  flex: auto;\n}\n.base nano-slides::part(navigation-button--previous), .base nano-slides [part~=\"navigation-button--previous\"] {\n  display: none;\n}\n.base nano-slides::part(navigation-button--next), .base nano-slides [part~=\"navigation-button--next\"] {\n  transform: none;\n  block-size: 100%;\n  inline-size: var(--bleed);\n  inset-inline-end: 0;\n  inset-block-start: 0;\n  border-radius: 0;\n  margin: 0;\n  padding: 0;\n  opacity: 0;\n}\n.base .header {\n  max-inline-size: calc(100% - var(--bleed));\n  display: flex;\n  gap: var(--nano-spacing-md);\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  margin-block-end: var(--gap);\n}\n.base .title {\n  font-weight: var(--nano-font-weight-normal);\n  font-size: var(--nano-font-size-xl);\n  line-height: var(--nano-line-height-denser);\n  line-height: 1;\n}\n.base .pagination {\n  display: inline-flex;\n  gap: var(--nano-spacing-md);\n}\n.base .pagination-btn {\n  all: unset;\n  inline-size: 1.25rem;\n  block-size: 0.375rem;\n  margin-block: 0;\n  cursor: pointer;\n  background: var(--pagination-button-color);\n  position: relative;\n}\n.base .pagination-btn::after {\n  content: \"\";\n  position: absolute;\n  inset: -1rem -0.625rem;\n}\n.base .pagination-btn:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n  z-index: 1;\n}\n.base .pagination-btn:hover {\n  background: var(--pagination-button-hover);\n}\n.base .pagination-btn:active {\n  background: var(--pagination-button-active);\n}\n.base .pagination-btn__label {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  overflow: hidden;\n  pointer-events: none;\n  visibility: hidden;\n}\n.base .pagination-btn--active {\n  background: var(--pagination-button-active);\n}\n.base nano-slides {\n  overflow: visible;\n}\n@container (width < 615px) {\n  .base {\n    --gap: var(--nano-spacing-md);\n    --peek: var(--bleed);\n  }\n  .base ::slotted(nano-slide), .base::slotted(nano-slide) {\n    --img-opacity: calc(1 - max((var(--distance) - 30) / 5, 0));\n    --text-opacity: calc(1 - max((var(--distance) - 30) / 3, 0));\n    inline-size: calc(100% + var(--gap) - var(--peek));\n  }\n  .base .header {\n    flex-direction: column;\n    align-items: start;\n  }\n  .base .pagination {\n    transform: translateY(-50%);\n  }\n}";
+const cardCarouselCss = ":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  }/** Typography */\n:host {\n  /**\n   * @prop --bleed: A portion of the Image of the next card is displayed outside the parent width boundary. \n   * Generally should be the parent's `padding-inline-end` (or `padding-right`). Defaults to 0px;\n   * @prop --gap: gap between the slides. Defaults to var(--nano-spacing-xl) on large screens, var(--nano-spacing-md) on small screens;\n   * @prop --pagination-button-color: The color of the pagination button. Defaults to var(--nano-color-neutral-400);\n   * @prop --pagination-button-active: Active color of the pagination button. Defaults to var(--nano-color-primary-1000);\n   */\n  --bleed: 0px;\n  --gap: var(--nano-spacing-xl);\n  --pagination-button-color: var(--nano-color-neutral-400);\n  --pagination-button-hover: var(--nano-color-primary-700);\n  --pagination-button-active: var(--nano-color-primary-1000);\n  --peek: calc(var(--bleed) / 2);\n  display: block;\n  position: relative;\n  margin-inline: 0 calc(var(--bleed) * -1);\n  container-type: inline-size;\n}\n\n.base ::slotted(nano-slide), .base::slotted(nano-slide) {\n  --img-opacity: calc(1 - max((var(--distance) - 50) / 30, 0));\n  --text-opacity: calc(1 - max((var(--distance) - 50) / 15, 0));\n  display: block;\n  text-align: unset;\n  min-block-size: auto;\n  inline-size: calc(50% + var(--gap) / 2 - var(--peek));\n  padding-inline-end: var(--gap);\n}\n.base nano-slides[ready]::part(slide-container) {\n  flex-flow: column wrap;\n  justify-content: flex-start;\n}\n.base nano-slides::part(slide-viewport) {\n  flex: auto;\n}\n.base nano-slides::part(navigation-button--previous) {\n  display: none;\n}\n.base nano-slides::part(navigation-button--next) {\n  transform: none;\n  block-size: 100%;\n  inline-size: var(--bleed);\n  inset-inline-end: 0;\n  inset-block-start: 0;\n  border-radius: 0;\n  margin: 0;\n  padding: 0;\n  opacity: 0;\n}\n.base .header {\n  max-inline-size: calc(100% - var(--bleed));\n  display: flex;\n  gap: var(--nano-spacing-md);\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  margin-block-end: var(--gap);\n}\n.base .title {\n  font-weight: var(--nano-font-weight-normal);\n  font-size: var(--nano-font-size-xl);\n  line-height: var(--nano-line-height-denser);\n  line-height: 1;\n}\n.base .pagination {\n  display: inline-flex;\n  gap: var(--nano-spacing-md);\n}\n.base .pagination-btn {\n  all: unset;\n  inline-size: 1.25rem;\n  block-size: 0.375rem;\n  margin-block: 0;\n  cursor: pointer;\n  background: var(--pagination-button-color);\n  position: relative;\n}\n.base .pagination-btn::after {\n  content: \"\";\n  position: absolute;\n  inset: -1rem -0.625rem;\n}\n.base .pagination-btn:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n  z-index: 1;\n}\n.base .pagination-btn:hover {\n  background: var(--pagination-button-hover);\n}\n.base .pagination-btn:active {\n  background: var(--pagination-button-active);\n}\n.base .pagination-btn__label {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  overflow: hidden;\n  pointer-events: none;\n  visibility: hidden;\n}\n.base .pagination-btn--active {\n  background: var(--pagination-button-active);\n}\n.base nano-slides {\n  overflow: visible;\n}\n@container (width < 615px) {\n  .base {\n    --gap: var(--nano-spacing-md);\n    --peek: var(--bleed);\n  }\n  .base ::slotted(nano-slide), .base::slotted(nano-slide) {\n    --img-opacity: calc(1 - max((var(--distance) - 30) / 5, 0));\n    --text-opacity: calc(1 - max((var(--distance) - 30) / 3, 0));\n    inline-size: calc(100% + var(--gap) - var(--peek));\n  }\n  .base .header {\n    flex-direction: column;\n    align-items: start;\n  }\n  .base .pagination {\n    transform: translateY(-50%);\n  }\n}";
 
 const ContentCarousel = /*@__PURE__*/ proxyCustomElement(class ContentCarousel extends HTMLElement {
     constructor() {

package/dist/components/nano-checkbox.js

@@ -23,7 +23,7 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
     }
     set slotWrapper(value) {
         this._slotWrapper = value;
-        this.hasLabel = !!value.querySelectorAll('*').length || !!this.label;
+        this.hasLabel = !!value?.querySelectorAll('*').length || !!this.label;
     }
     get host() { return this; }
     inputType = 'checkbox';
@@ -231,7 +231,7 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
     }
     render() {
         const labelId = this.inputId + '-lbl';
-        return (h(Host, { key: 'ca41f256a304b8ec19dba81fbe0dcd30eefd63fe' }, h("label", { key: '31254b867b036d7703939e7b19f4f483f00af844', class: {
+        return (h(Host, { key: 'd1c462c6850bad6dd37696c1edc61d1413613908' }, h("label", { key: 'e45bce2bffd58378e79606d848b8dc4b2a023fb2', class: {
                 nanocb: true,
                 'nanocb--checked': this.checked,
                 'nanocb--invalid': this.invalid,
@@ -239,11 +239,11 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
                 'nanocb--focused': this.hasFocus,
                 'nanocb--indeterminate': this.indeterminate,
                 ['nanocb__' + this.type]: true,
-            }, htmlFor: this.inputId }, h("input", { key: 'd46202d25ee15a0274766d845510608ed5af88f4', type: this.inputType, name: this.name, form: this.form, required: this.required, checked: this.checked, disabled: this.disabled, value: this.value, "aria-labelledby": this.hasLabel ? labelId : undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onChange: this.handleChange, ref: (input) => (this.input = input), id: this.inputId, onInvalid: this.handleInvalid }), h("span", { key: '0f3c9134ab08ce653a58d71d681495349536e211', class: 'nanocb__input' }), this.hasLabel && (h("div", { key: 'e4315662f387dc17f3406f22931535061756cca6', id: labelId, class: {
+            }, htmlFor: this.inputId }, h("input", { key: '732c982c1613eed2075857fff33a869378ce2356', type: this.inputType, name: this.name, form: this.form, required: this.required, checked: this.checked, disabled: this.disabled, value: this.value, "aria-labelledby": this.hasLabel ? labelId : undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onChange: this.handleChange, ref: (input) => (this.input = input), id: this.inputId, onInvalid: this.handleInvalid }), h("span", { key: '7299bc0cca8ea4230d4317ad1a5e9ec5c72fd58d', class: 'nanocb__input' }), this.hasLabel && (h("div", { key: 'daa0fd8b2b63796e96ea40e843390ca62c41c968', id: labelId, class: {
                 nanocb__label: true,
                 [`nanocb__label--${this.type}`]: true,
                 'nanocb__label--hidden': this.hideLabel,
-            } }, this.label && !!this.label.length && h("span", { key: '05716b3189e0a489c530c2539944eaaae74e0e08' }, this.label), h("span", { key: '026a9bbb2f50332d184a29a03a58e6cb287d7f8c', hidden: this.label && !!this.label.length, ref: (s) => (this.slotWrapper = s) }, h("slot", { key: '62b0ab184d32167780d52aa90dddcdc25977548c' })))))));
+            } }, this.label && !!this.label.length && h("span", { key: 'cdcdf9528ee8f39f22ddd9f61c490d4c02f910e4' }, this.label), h("span", { key: '021ecfc889a1bc89df711343cad337d847d93191', hidden: this.label && !!this.label.length, ref: (s) => (this.slotWrapper = s) }, h("slot", { key: 'da6bb8cfd800f4f423aaa7be538b1e33af73f5bc' })))))));
     }
     static get watchers() { return {
         "checked": ["handleCheckedChange"],

package/dist/components/nano-global-nav.js

@@ -25,7 +25,7 @@ import { d as defineCustomElement$4 } from './sticker.js';
 import { d as defineCustomElement$3 } from './tag.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
-const globalNavCss = ":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{--main-menu-bar-bg-color:var(--nano-color-base-0);--main-menu-text-color:var(--nano-color-base-1000);--main-menu-hover-text-color:var(--nano-color-primary-1000);--main-menu-active-text-color:var(--nano-color-primary-1200);--main-menu-active-border-color:var(--nano-color-primary-1000);--overflow-bg-color:var(--nano-color-grey-mono-1600);--overflow-text-color:var(--nano-color-basic-white);--overflow-hover-text-color:var(--nano-color-blue-cerulean-700);--overflow-active-text-color:var(--nano-color-blue-cerulean-300);display:block;color:var(--main-menu-text-color)}img{max-inline-size:none;display:block}::slotted(a),:host::slotted(a),a{text-decoration:none}a:has(img){display:inline-block}a:focus{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}nano-drawer:not(:defined){display:none}nano-badge{position:absolute;font-size:0.5625rem;pointer-events:none}.gn__cart{position:relative}.gn__cart nano-badge{inset-block-start:-0.35rem;inset-inline-end:-0.4rem}.gn__login-cta{--bg:transparent}.gn__menu-bar-wrapper{z-index:var(--nano-z-index-menubar);position:relative}.gn__menu-bar-wrapper::after{content:\"\";position:absolute;block-size:1px;inline-size:100%;inset-inline:0;inset-block-end:-1px;z-index:-3;background-color:var(--nano-color-neutral-200)}.gn__menu-bar{inline-size:100%;overflow:clip}.gn__menu-bar a{color:var(--main-menu-text-color)}.gn__menu-bar a:hover{color:var(--main-menu-hover-text-color)}.gn__menu-bar a:active{color:var(--main-menu-active-text-color)}.gn__main-menu{display:inline-flex;align-items:center;background-color:var(--main-menu-bar-bg-color);min-inline-size:100%;padding:var(--nano-spacing-md);transition:opacity var(--nano-transition-x-fast) ease;opacity:1}.gn__main-menu.resizing{transition:none;opacity:0}.gn__main-menu>*{margin-inline-end:var(--nano-spacing-xl)}.gn__main-menu>*:is(slot){display:flex}.gn__main-menu>*:last-child{margin-inline-end:0}.gn__overflow-button{--padding:0.5rem 0.875rem 0.5rem 0;margin-inline-end:0.875rem;font-size:1.125rem;position:relative}.gn__overflow-button::after{content:\"\";position:absolute;inline-size:1px;block-size:100%;inset-inline-end:0;background-color:var(--nano-color-neutral-300);opacity:0.7;inset-block-start:0}.gn__main-menu-links,.gn__main-menu-actions{display:inline-flex;align-items:center}.gn__main-menu-links .nano-icon,.gn__main-menu-links .nano-icon-button,.gn__main-menu-actions .nano-icon,.gn__main-menu-actions .nano-icon-button{--active-color:var(--main-menu-active-text-color);--hover-color:var(--main-menu-hover-text-color);font-size:1rem}.gn__main-menu-links .nano-icon-button:hover,.gn__main-menu-actions .nano-icon-button:hover{color:var(--main-menu-hover-text-color)}.gn__main-menu-links{gap:var(--nano-spacing-xl)}.gn__main-menu-links ::slotted(a),.gn__main-menu-links::slotted(a){color:var(--main-menu-text-color)}.gn__main-menu-links ::slotted(a:hover){color:var(--main-menu-hover-text-color)}.gn__main-menu-links ::slotted(*:active){color:var(--main-menu-active-text-color)}.gn__main-menu-actions{margin-inline-start:auto;font-size:0.9375rem;gap:var(--nano-spacing-md)}.gn__search-dropdown{--overflow:visible;--padding:0;--background:transparent}.gn__search-dropdown .nano-icon-button{position:relative}.gn__search-dropdown .nano-icon-button::before{content:\"\";position:absolute;background-color:var(--main-menu-active-border-color);block-size:4px;inset-inline:5px 2px;inset-block-end:-1.5625rem;transform:translateZ(0) scaleX(0);transform-origin:0 center;transition:transform var(--nano-transition-x-fast) ease-in-out}.gn__search-open .gn__search-dropdown .nano-icon-button::before{transform:translateZ(0) scaleX(1)}.gn__search-form{display:inline-flex;max-inline-size:100vw;inline-size:30.625rem}.gn__search-form .nano-select{--input-bg-color:var(--nano-color-neutral-200);flex:0}.gn__search-form .nano-select:focus-within{z-index:1}.gn__search-form .nano-select .form-ctrl__input{border-inline-end:none}.gn__search-form .nano-input{flex:1}.gn__search-results{--padding-start:var(--nano-spacing-md);--padding-top:var(--nano-spacing-sm);--padding-bottom:var(--nano-spacing-sm);font-size:var(--nano-font-size-2xs)}.gn__search-loading{display:flex;justify-content:center}.gn__search-result{--padding-start:0.3125rem;--padding-top:var(--nano-spacing-sm);--padding-bottom:var(--nano-spacing-sm);--bg-focus:var(--nano-color-primary-300);--color-focus:var(--nano-color-neutral-1400);--color:var(--nano-color-neutral-1400);font-size:var(--nano-font-size-2xs)}.gn__search-result .search__highlight{font-style:normal;background:var(--nano-color-highlight)}.gn__search-viewall{--bg-focus:var(--nano-color-primary-300);--color-focus:var(--nano-color-neutral-1400);--color:var(--nano-color-primary-1200)}.gn__search-viewall::part(label),.gn__search-viewall [part~=\"label\"]{justify-content:flex-end;text-decoration:underline}.gn__user-dropdown-trigger{all:unset;cursor:pointer;color:var(--nano-color-primary-1200);display:flex;white-space:nowrap;gap:var(--nano-spacing-xs);align-items:center;position:relative;padding-inline-start:var(--nano-spacing-md)}.gn__user-dropdown-trigger:hover{color:var(--main-menu-hover-text-color)}.gn__user-dropdown-trigger:active{color:var(--main-menu-active-text-color)}.gn__user-dropdown-trigger:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.gn__user-dropdown-trigger::before{content:\"\";position:absolute;inline-size:1px;block-size:100%;inset-inline-start:0;background-color:var(--nano-color-neutral-300);opacity:0.7;inset-block-start:0}.gn__user-dropdown-trigger .gn__user-dropdown-chevron{transition:rotate var(--nano-transition-x-fast) linear}[open] .gn__user-dropdown-trigger .gn__user-dropdown-chevron{rotate:180deg}.gn__user-dropdown-trigger nano-badge{inset-block-start:-0.7rem;inset-inline-end:-0.7rem}.gn__user-dropdown{--background:var(--overflow-bg-color);--padding:0;--overflow:visible}.gn__user-panel{inline-size:21.25rem;max-inline-size:21.25rem;color:var(--overflow-text-color);padding:var(--nano-spacing-md)}.gn__user-panel a{color:var(--overflow-text-color)}.gn__user-panel a:hover{text-decoration:underline;color:var(--overflow-hover-text-color)}.gn__user-panel-head{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);padding-block-end:var(--nano-spacing-md);display:flex;align-items:center;gap:var(--nano-spacing-sm);font-size:var(--nano-font-size-xs)}.gn__user-panel-head .gn__user-avatar nano-icon{font-size:2.5rem}.gn__user-panel-body{display:flex;flex-direction:column}.gn__user-panel-body a{position:relative;border-block-end:1px solid rgb(var(--nano-color-base-rgb-1000)/10%);padding-block:var(--nano-spacing-md)}.gn__user-panel-body a:first-child{border-block-start:1px solid rgb(var(--nano-color-base-rgb-1000)/10%)}.gn__user-panel-foot{padding-block-start:var(--nano-spacing-md);display:flex;align-items:center;justify-content:space-between;gap:var(--nano-spacing-md)}.gn__drawer{--panel-background:var(--overflow-bg-color);--header-button-color:var(--overflow-text-color);--body-spacing:0;--header-spacing:var(--nano-spacing-md) 0;--footer-spacing:var(--nano-spacing-md)}.gn__drawer::part(title),.gn__drawer [part~=\"title\"]{display:flex;justify-content:flex-end}.gn__drawer::part(header-actions),.gn__drawer [part~=\"header-actions\"]{order:-1}.gn__drawer-header{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.gn__drawer-menu{display:flex;flex-direction:column;margin:0 var(--nano-spacing-md);padding-block-end:var(--nano-spacing-md);color:var(--overflow-text-color);border-block-start:1px solid rgb(var(--nano-color-base-rgb-1000)/10%);position:relative}.gn__drawer-menu ::slotted(a),.gn__drawer-menu::slotted(a){padding:var(--nano-spacing-md) 0}.gn__drawer-menu ::slotted(a),.gn__drawer-menu ::slotted(.nano-nav-item),.gn__drawer-menu::slotted(a),.gn__drawer-menu::slotted(.nano-nav-item){--padding:var(--nano-spacing-md) 0;display:block;color:inherit !important;border-block-end:1px solid rgb(var(--nano-color-base-rgb-1000)/10%)}.gn__drawer-menu ::slotted(a:hover),.gn__drawer-menu ::slotted(.nano-nav-item:hover){text-decoration:underline;color:var(--overflow-hover-text-color) !important}";
+const globalNavCss = ":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{--main-menu-bar-bg-color:var(--nano-color-base-0);--main-menu-text-color:var(--nano-color-base-1000);--main-menu-hover-text-color:var(--nano-color-primary-1000);--main-menu-active-text-color:var(--nano-color-primary-1200);--main-menu-active-border-color:var(--nano-color-primary-1000);--overflow-bg-color:var(--nano-color-grey-mono-1600);--overflow-text-color:var(--nano-color-basic-white);--overflow-hover-text-color:var(--nano-color-blue-cerulean-700);--overflow-active-text-color:var(--nano-color-blue-cerulean-300);display:block;color:var(--main-menu-text-color)}img{max-inline-size:none;display:block}::slotted(a),:host::slotted(a),a{text-decoration:none}a:has(img){display:inline-block}a:focus{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}nano-drawer:not(:defined){display:none}nano-badge{position:absolute;font-size:0.5625rem;pointer-events:none}.gn__cart{position:relative}.gn__cart nano-badge{inset-block-start:-0.35rem;inset-inline-end:-0.4rem}.gn__login-cta{--bg:transparent}.gn__menu-bar-wrapper{z-index:var(--nano-z-index-menubar);position:relative}.gn__menu-bar-wrapper::after{content:\"\";position:absolute;block-size:1px;inline-size:100%;inset-inline:0;inset-block-end:-1px;z-index:-3;background-color:var(--nano-color-neutral-200)}.gn__menu-bar{inline-size:100%;overflow:clip}.gn__menu-bar a{color:var(--main-menu-text-color)}.gn__menu-bar a:hover{color:var(--main-menu-hover-text-color)}.gn__menu-bar a:active{color:var(--main-menu-active-text-color)}.gn__main-menu{display:inline-flex;align-items:center;background-color:var(--main-menu-bar-bg-color);min-inline-size:100%;padding:var(--nano-spacing-md);transition:opacity var(--nano-transition-x-fast) ease;opacity:1}.gn__main-menu.resizing{transition:none;opacity:0}.gn__main-menu>*{margin-inline-end:var(--nano-spacing-xl)}.gn__main-menu>*:is(slot,slot-fb){display:flex}.gn__main-menu>*:last-child{margin-inline-end:0}.gn__overflow-button{--padding:0.5rem 0.875rem 0.5rem 0;margin-inline-end:0.875rem;font-size:1.125rem;position:relative}.gn__overflow-button::after{content:\"\";position:absolute;inline-size:1px;block-size:100%;inset-inline-end:0;background-color:var(--nano-color-neutral-300);opacity:0.7;inset-block-start:0}.gn__main-menu-links,.gn__main-menu-actions{display:inline-flex;align-items:center}.gn__main-menu-links .nano-icon,.gn__main-menu-links .nano-icon-button,.gn__main-menu-actions .nano-icon,.gn__main-menu-actions .nano-icon-button{--active-color:var(--main-menu-active-text-color);--hover-color:var(--main-menu-hover-text-color);font-size:1rem}.gn__main-menu-links .nano-icon-button:hover,.gn__main-menu-actions .nano-icon-button:hover{color:var(--main-menu-hover-text-color)}.gn__main-menu-links{gap:var(--nano-spacing-xl)}.gn__main-menu-links ::slotted(a),.gn__main-menu-links::slotted(a){color:var(--main-menu-text-color)}.gn__main-menu-links ::slotted(a:hover){color:var(--main-menu-hover-text-color)}.gn__main-menu-links ::slotted(*:active){color:var(--main-menu-active-text-color)}.gn__main-menu-actions{margin-inline-start:auto;font-size:0.9375rem;gap:var(--nano-spacing-md)}.gn__search-dropdown{--overflow:visible;--padding:0;--background:transparent}.gn__search-dropdown .nano-icon-button{position:relative}.gn__search-dropdown .nano-icon-button::before{content:\"\";position:absolute;background-color:var(--main-menu-active-border-color);block-size:4px;inset-inline:5px 2px;inset-block-end:-1.5625rem;transform:translateZ(0) scaleX(0);transform-origin:0 center;transition:transform var(--nano-transition-x-fast) ease-in-out}.gn__search-open .gn__search-dropdown .nano-icon-button::before{transform:translateZ(0) scaleX(1)}.gn__search-form{display:inline-flex;max-inline-size:100vw;inline-size:30.625rem}.gn__search-form .nano-select{--input-bg-color:var(--nano-color-neutral-200);flex:0}.gn__search-form .nano-select:focus-within{z-index:1}.gn__search-form .nano-select .form-ctrl__input{border-inline-end:none}.gn__search-form .nano-input{flex:1}.gn__search-results{--padding-start:var(--nano-spacing-md);--padding-top:var(--nano-spacing-sm);--padding-bottom:var(--nano-spacing-sm);font-size:var(--nano-font-size-2xs)}.gn__search-loading{display:flex;justify-content:center}.gn__search-result{--padding-start:0.3125rem;--padding-top:var(--nano-spacing-sm);--padding-bottom:var(--nano-spacing-sm);--bg-focus:var(--nano-color-primary-300);--color-focus:var(--nano-color-neutral-1400);--color:var(--nano-color-neutral-1400);font-size:var(--nano-font-size-2xs)}.gn__search-result .search__highlight{font-style:normal;background:var(--nano-color-highlight)}.gn__search-viewall{--bg-focus:var(--nano-color-primary-300);--color-focus:var(--nano-color-neutral-1400);--color:var(--nano-color-primary-1200)}.gn__search-viewall::part(label){justify-content:flex-end;text-decoration:underline}.gn__user-dropdown-trigger{all:unset;cursor:pointer;color:var(--nano-color-primary-1200);display:flex;white-space:nowrap;gap:var(--nano-spacing-xs);align-items:center;position:relative;padding-inline-start:var(--nano-spacing-md)}.gn__user-dropdown-trigger:hover{color:var(--main-menu-hover-text-color)}.gn__user-dropdown-trigger:active{color:var(--main-menu-active-text-color)}.gn__user-dropdown-trigger:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.gn__user-dropdown-trigger::before{content:\"\";position:absolute;inline-size:1px;block-size:100%;inset-inline-start:0;background-color:var(--nano-color-neutral-300);opacity:0.7;inset-block-start:0}.gn__user-dropdown-trigger .gn__user-dropdown-chevron{transition:rotate var(--nano-transition-x-fast) linear}[open] .gn__user-dropdown-trigger .gn__user-dropdown-chevron{rotate:180deg}.gn__user-dropdown-trigger nano-badge{inset-block-start:-0.7rem;inset-inline-end:-0.7rem}.gn__user-dropdown{--background:var(--overflow-bg-color);--padding:0;--overflow:visible}.gn__user-panel{inline-size:21.25rem;max-inline-size:21.25rem;color:var(--overflow-text-color);padding:var(--nano-spacing-md)}.gn__user-panel a{color:var(--overflow-text-color)}.gn__user-panel a:hover{text-decoration:underline;color:var(--overflow-hover-text-color)}.gn__user-panel-head{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);padding-block-end:var(--nano-spacing-md);display:flex;align-items:center;gap:var(--nano-spacing-sm);font-size:var(--nano-font-size-xs)}.gn__user-panel-head .gn__user-avatar nano-icon{font-size:2.5rem}.gn__user-panel-body{display:flex;flex-direction:column}.gn__user-panel-body a{position:relative;border-block-end:1px solid rgb(var(--nano-color-base-rgb-1000)/10%);padding-block:var(--nano-spacing-md)}.gn__user-panel-body a:first-child{border-block-start:1px solid rgb(var(--nano-color-base-rgb-1000)/10%)}.gn__user-panel-foot{padding-block-start:var(--nano-spacing-md);display:flex;align-items:center;justify-content:space-between;gap:var(--nano-spacing-md)}.gn__drawer{--panel-background:var(--overflow-bg-color);--header-button-color:var(--overflow-text-color);--body-spacing:0;--header-spacing:var(--nano-spacing-md) 0;--footer-spacing:var(--nano-spacing-md)}.gn__drawer::part(title){display:flex;justify-content:flex-end}.gn__drawer::part(header-actions){order:-1}.gn__drawer-header{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.gn__drawer-menu{display:flex;flex-direction:column;margin:0 var(--nano-spacing-md);padding-block-end:var(--nano-spacing-md);color:var(--overflow-text-color);border-block-start:1px solid rgb(var(--nano-color-base-rgb-1000)/10%);position:relative}.gn__drawer-menu ::slotted(a),.gn__drawer-menu::slotted(a){padding:var(--nano-spacing-md) 0}.gn__drawer-menu ::slotted(a),.gn__drawer-menu ::slotted(.nano-nav-item),.gn__drawer-menu::slotted(a),.gn__drawer-menu::slotted(.nano-nav-item){--padding:var(--nano-spacing-md) 0;display:block;color:inherit !important;border-block-end:1px solid rgb(var(--nano-color-base-rgb-1000)/10%)}.gn__drawer-menu ::slotted(a:hover),.gn__drawer-menu ::slotted(.nano-nav-item:hover){text-decoration:underline;color:var(--overflow-hover-text-color) !important}";
 
 const MIN_SEARCH_LENGTH = 3;
 const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLElement {
@@ -56,9 +56,13 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLE
     cartCount = 0;
     /** MyAccount un-read message count. */
     msgCount = 0;
-    /** Manually toggle open or close the overflow menu */
-    async toggleOverflowMenu() {
-        this.overflowOpen = !this.overflowOpen;
+    /** Manually open the overflow menu */
+    async openOverflowMenu() {
+        this.overflowOpen = true;
+    }
+    /** Manually close the overflow menu */
+    async closeOverflowMenu() {
+        this.overflowOpen = false;
     }
     /// MY-ACCOUNT - start ///
     /** A base url to retrieve global nav / sso data. `nav_bar_data.json` will be appended to this url */
@@ -485,20 +489,20 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLE
     }
     render() {
         const bpps = this.bpPartials;
-        return (h(Host, { key: 'c968c75746e8b8211210b47c595cff25f0af8933', class: {
+        return (h(Host, { key: '184e0e7a9468ebb9d60cfac752d955358a4fe0fe', class: {
                 'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
                 'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
                 'nano-global-nav': true,
-            } }, h("div", { key: 'edeec7490c6a32e2a44f3a8109f5d3f18c9d6101', class: {
+            } }, h("div", { key: '8eaa12e98b9a38721b9f03e2d646d20add74b3e6', class: {
                 gn: true,
                 'gn__search-open': this.searchBarShown,
-            } }, h("nano-drawer", { key: '56df68664885f1ed133b75e7f290405eb32bed67', 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: 'da5e97e862497b1af8f0d0b3ed67e0dd03761f28', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: '3336390377aba9b2f127a7e1056fb80ba7d1ec75', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
+            } }, h("nano-drawer", { key: 'b874e6c5aa026ed4c266601c52d41859857f38b5', 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: '29e9160530cb0bfbc335cbae26a22a4a3fecdff7', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: '0b09f539037bd906065f5cf2cc6e806173d97b66', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
             ? bpps.mainMenu.tpl()
-            : '', h("slot", { key: '8c29d087282917c213beeadf719840c44b0f5494', name: "overflow" }))), h("div", { key: '6f07398ab8cd7d5f5fadafdb1d1f29ee9917efc3', class: "gn__menu-bar-wrapper" }, h("div", { key: '58546b45ca7ba896a9f0e1c5e528e191602e64a8', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: 'dd3d1cf935f2231e280cb0c7697c55470887c949', 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: 'aa31d9a9cc0e1ad0d4db76ca9f4add388cef95bd', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '02abef6f7550594481eff44ae5e332d74ba61138', name: "logo" }, h("a", { key: '084b9f9f88c68933f0d038b655833c5ba0117498', 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: '197989ea9849d9143024538c26b2678c6220e6d4', name: "overflow" }))), h("div", { key: 'ce2b19cb76ff12eda8c4589ac188749ba3684c9f', class: "gn__menu-bar-wrapper" }, h("div", { key: '11c7745248090f0163a2a505fb5a20f56fdd11d2', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: 'a797355c5204357100884bf865d5ffb58967028e', 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: '0bf6477cd3dac4dd6cb0f55dd3ff3a313b55fb84', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '8dbb4a02f736efcddc019aa602953ff41c5eb15e', name: "logo" }, h("a", { key: '5d60a835f364ada7ae8d8ee7b608df9b75443c26', 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: '130b8ce4dfd708a8a884aa172a6b7c1a7defa204', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: 'e4f69fca3d5a6700de16f8102dbf916a0b0e4d77', class: "gn__main-menu-actions" }, h("nano-dropdown", { key: '40033ff956c6f0b59ef5f569a00e56efc8e0f8df', 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: '32b4e3be46dae8578c4adf038bda844d3bf4b8b9', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), !!this.searchIndices.length && (h("form", { key: '17ee6f5b011997b09148d8a09749931ae0e681f0', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '800b2d3b1343a6d09a8951b753742e6eb5731648', 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: 'a8eb120a2268645e17935d5dd86e8cf9de550866', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, onNanoChange: (e) => {
+                            (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: '4270c5dc3e334ca906debe763771acc1dc4dd82b', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '7f39cd0f1338a1124a6c59c18774c62d7b3e36e7', class: "gn__main-menu-actions" }, h("nano-dropdown", { key: '503d51cd5f72ad19203bab7939230f8f7a7f4bd3', 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: '0a82c9022cb41265d8cb969057404ad32d7179f2', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), !!this.searchIndices.length && (h("form", { key: 'ee9b0742d2e8e6c3e51d35de68141bedb3677081', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: 'df0da7c60f0ced0d52eeb84360a7215d7247a5e7', 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: '83bdee0aca807f594505c657a4b1aeaabdb8a3d0', 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: '33472cd1d86a17143253aed1a7924b05343614a7', slot: "end", name: "light/magnifying-glass" }), h("nano-datalist", { key: 'f88f3bcef70a7a29410d77ba849862ffc9db6562', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '075a4615d1715d941bd2368db97375f614867477', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: '5194af389122625d1209e25208de761fa15dd7e3' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
+            }, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: '2f7a3e620d015b8d56044d048ed49ee6a6e29ba4', slot: "end", name: "light/magnifying-glass" }), h("nano-datalist", { key: '528da1d7293b7589ce34a00007e83cf00ac71547', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: 'f1556946842927cd1aa65a97346bc3ce1886311e', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: 'b7d9e741bdbcde586cb1734961b628de31aca103' }, "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,
@@ -508,10 +512,10 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLE
                         positions: [i + 1],
                     });
                 } }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
-            h("nano-option", { key: 'c9dec204a82019869cc9b8086f07cfbfdf309f15', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
-        ]))))), h("div", { key: '986773d6af8b1b50000db8c428c2f25f07298a3c', class: "gn__cart" }, h("nano-icon-button", { key: '0afee86e684d4136e729955d28444a6c8a27838f', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }), !!this.cartCount && (h("nano-badge", { key: '6305ad69d802aeda9a132ca204baf8b7b3aa17be', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount))), this.breakpoint <= bpps.contact.breakpoint
+            h("nano-option", { key: '88e617068d30bfa4ca09f6b122109d9a3539088b', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
+        ]))))), h("div", { key: 'acceaf54481ab87951bbd9384f079c9d37fa0663', class: "gn__cart" }, h("nano-icon-button", { key: '6bed2b6a26492c9e7e4fe205b9ef94845360327d', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }), !!this.cartCount && (h("nano-badge", { key: '4034d7828876c1237b1869abeb977e258d55006b', 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("div", { key: '7c8b5194019e9b8346f6e0e927cff22ccf8b3e2e', class: "gn__site", part: "site-wrapper" }, h("nano-global-search-results", { key: '213396f31494cb46551fd6839b95bf4155982a57', part: "site-search-results" }, h("slot", { key: 'd9471b1379c08106453aef43c0e590cf272a425f' }))))));
+            : '', 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("div", { key: 'f52e45cccc15b745f54978bc140816847dc66560', class: "gn__site", part: "site-wrapper" }, h("nano-global-search-results", { key: '0dd16b2bb789a66f3ef5b214ea54609aedad3ae4', part: "site-search-results" }, h("slot", { key: '3a86b5ee10f5da29d3da8d06b2b6ad36f27e725c' }))))));
     }
     static get assetsDirs() { return ["assets"]; }
     static get watchers() { return {
@@ -546,7 +550,8 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLE
         "searchBarShown": [32],
         "searchLoading": [32],
         "_searchValue": [32],
-        "toggleOverflowMenu": [64],
+        "openOverflowMenu": [64],
+        "closeOverflowMenu": [64],
         "submitSearch": [64]
     }, undefined, {
         "myAccountUrl": ["handleMyAccountUrl"],

package/dist/components/nano-in-page-nav.js

@@ -7,7 +7,7 @@ import { H as HasSlotController } from './slot.js';
 import { d as defineCustomElement$3 } from './details.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const inPageNavCss = ":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 nav{background-color:var(--color-bg);padding:0}:host nav:has(nano-details){padding:0}:host .details-wrapper{--padding:0;--btn-bg-color:transparent;--btn-bg-color--hover:transparent;--btn-text-color:var(--color-text);border:none}:host .details-wrapper::part(header),:host .details-wrapper [part~=\"header\"]{font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);padding:var(--spacing-l2)}:host .details-wrapper[open]::part(header),:host .details-wrapper[open] [part~=\"header\"]{background-color:var(--nano-color-primary-75)}:host .details-wrapper::part(content),:host .details-wrapper [part~=\"content\"]{padding:0}:host .details-wrapper::part(body),:host .details-wrapper [part~=\"body\"]{padding:0}:host .header{padding:var(--spacing-l2) var(--spacing-l2) 0;display:flex;flex-direction:column;gap:var(--spacing-l2);font-size:var(--font-size)}:host .header ::slotted(a[slot=back]),:host .header::slotted(a[slot=back]){display:flex !important;align-items:center !important;padding:0 !important;margin:0;gap:var(--spacing-l3) !important;cursor:pointer}:host .header ::slotted(a[slot=back])::before,:host .header::slotted(a[slot=back])::before{content:\"\";display:inline-block;background-size:cover;inline-size:1rem;block-size:1rem;background-color:var(--color-primary);-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transform-origin:center;rotate:calc(180deg * var(--flip-icon-ltr))}:host nav:has(.details-wrapper[open]){box-shadow:var(--nano-shadow-l1)}:host .details-wrapper.sticky.stuck[open]::part(header),:host .details-wrapper.sticky.stuck[open] [part~=\"header\"]{z-index:var(--nano-z-index-menubar);inset-block-start:0;position:sticky;box-shadow:var(--nano-shadow-l1);padding:var(--spacing-l2)}";
+const inPageNavCss = ":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 nav{background-color:var(--color-bg);padding:0}:host nav:has(nano-details){padding:0}:host .details-wrapper{--padding:0;--btn-bg-color:transparent;--btn-bg-color--hover:transparent;--btn-text-color:var(--color-text);border:none}:host .details-wrapper::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);padding:var(--spacing-l2)}:host .details-wrapper[open]::part(header){background-color:var(--nano-color-primary-75)}:host .details-wrapper::part(content){padding:0}:host .details-wrapper::part(body){padding:0}:host .header{padding:var(--spacing-l2) var(--spacing-l2) 0;display:flex;flex-direction:column;gap:var(--spacing-l2);font-size:var(--font-size)}:host .header ::slotted(a[slot=back]),:host .header::slotted(a[slot=back]){display:flex !important;align-items:center !important;padding:0 !important;margin:0;gap:var(--spacing-l3) !important;cursor:pointer}:host .header ::slotted(a[slot=back])::before,:host .header::slotted(a[slot=back])::before{content:\"\";display:inline-block;background-size:cover;inline-size:1rem;block-size:1rem;background-color:var(--color-primary);-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transform-origin:center;rotate:calc(180deg * var(--flip-icon-ltr))}:host nav:has(.details-wrapper[open]){box-shadow:var(--nano-shadow-l1)}:host .details-wrapper.sticky.stuck[open]::part(header){z-index:var(--nano-z-index-menubar);inset-block-start:0;position:sticky;box-shadow:var(--nano-shadow-l1);padding:var(--spacing-l2)}";
 
 const NanoInPageNav$1 = /*@__PURE__*/ proxyCustomElement(class NanoInPageNav extends HTMLElement {
     constructor() {

package/dist/components/nano-intersection-observe.js

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, Build, Host } from '@stencil/core/internal/client';
 import { h } from './renderer.js';
 import { f as findScrollParent } from './scroll.js';
 
@@ -43,11 +43,9 @@ const IntersectionObserve = /*@__PURE__*/ proxyCustomElement(class IntersectionO
      * Defaults to an automatic check for ancestors that `overflow: auto` or otherwise the `Document`. */
     root = 'auto';
     handleRootChange() {
-        if (!this.root) {
-            this._root = undefined;
-            this.removeIO();
+        this.removeIO();
+        if (!this.root)
             return;
-        }
         let newRoot;
         if (this.root === 'auto') {
             // try to find nearest scrolling parent
@@ -72,7 +70,7 @@ const IntersectionObserve = /*@__PURE__*/ proxyCustomElement(class IntersectionO
         if (newRoot === document.documentElement)
             newRoot = undefined;
         // if new root is what we already have - ignore
-        if (newRoot === this._root)
+        if (newRoot === this._root && this.io)
             return;
         // cache and setup io
         this._root = newRoot;
@@ -123,7 +121,7 @@ const IntersectionObserve = /*@__PURE__*/ proxyCustomElement(class IntersectionO
         this.addIO();
     };
     addIO() {
-        if (!window['IntersectionObserver'] || !this.elements?.length)
+        if (Build.isServer || !this.elements?.length)
             return;
         if (this.io)
             this.removeIO();
@@ -144,10 +142,9 @@ const IntersectionObserve = /*@__PURE__*/ proxyCustomElement(class IntersectionO
     }
     disconnectedCallback() {
         this.removeIO();
-        this.root = this._root = undefined;
     }
     render() {
-        return (h(Host, { key: '4bd6cf4cc8888421ec7879e22fc24886838bd091', class: "nano-intersection-observe" }, h("slot", { key: 'afc52867f75d9f3679470f016c49eb9c4af6f6db', ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange })));
+        return (h(Host, { key: 'abd4c2df3455d52b6c9df1fcec2ba6f715cca32d', class: "nano-intersection-observe" }, h("slot", { key: 'e91b2a33b11abfa42411b996a0ba2e71892ab5d1', ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange })));
     }
     static get watchers() { return {
         "root": ["handleRootChange"],