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

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,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 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;background-color:var(--main-menu-bar-bg-color)}.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;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 {
@@ -142,6 +142,14 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLE
         this._mainMenuBar = el;
         this.addMainmenuRo();
     }
+    /**
+     * Manually triggers the main menu bar resize behaviour.
+     * This can be useful if you append new children to the global-nav
+     */
+    async triggerResize() {
+        this.shouldResize = true;
+        this.breakpoint = 0;
+    }
     shouldResize = true;
     breakpoint = 0;
     breakpointChanged() {
@@ -490,20 +498,20 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLE
     }
     render() {
         const bpps = this.bpPartials;
-        return (h(Host, { key: '66132ed8841605602bff8c2c750a657ec4d6d83a', class: {
+        return (h(Host, { key: '00499c2d65244ee4bba6b85c830c7f586ac3dbb9', class: {
                 'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
                 'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
                 'nano-global-nav': true,
-            } }, h("div", { key: 'c8dfcf4b405c72a14f576fb7b14ce41e8ff49b83', class: {
+            } }, h("div", { key: '56a6a9c2521b37bd2273ca8919bf74b572b5ca22', class: {
                 gn: true,
                 'gn__search-open': this.searchBarShown,
-            } }, h("nano-drawer", { key: '741e6dc6df0253450f65e792f45fe2a337bb007d', 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: 'b8d197424ed2d4dff32234457b7836507d9777ba', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: '36ef3c9a323078bfbf4f28682afd4b33475c6d1d', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
+            } }, h("nano-drawer", { key: 'bc4b0680aa33d9084668eaa40ca867cdd039375b', 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: '03a2d6fed3ac78527aefb80a881f270b6fad48a2', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: '0b1fb1192dd02f22944f40a772ffa8a88ba39e8c', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
             ? bpps.mainMenu.tpl()
-            : '', h("slot", { key: '569277672e49d95702583537c90db8de51d89a35', name: "overflow" }))), h("div", { key: '367e4bfffe6a8359bf49e6a4ea7a69dfdd20e6af', class: "gn__menu-bar-wrapper" }, h("div", { key: 'aca6cb95a4b03c46509cfd6d0a55e722976200e9', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: '8c56fcfde4d896b30a277a00f79de3dfb75d93ef', 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: 'fb8ca915d6460ee871a0a357b8a25d2e720620ac', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '96962d7ccd0d55f5c054dae0e8480398e7ea1415', name: "logo" }, h("a", { key: 'dcfa5d446ef38afb07285172dd5c0269da604d44', 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: '8a5c53acab83acf5055bbb893400bdee271f55e2', name: "overflow" }))), h("div", { key: '83b09941ac6af91ed7eee1537597bb73d0be8f78', class: "gn__menu-bar-wrapper" }, h("div", { key: '65c85c1b34a5c3e687797ac88bc480356a348a99', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: '7ebee46ce5c2e5b5c5226ebefb082c64cc54aa61', 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: 'c8d58d9ed7c74d7044a42544a638520efa199a84', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '1239a8949b63a740eca77ddf9d2a894571c1099c', name: "logo" }, h("a", { key: 'dd3c247f271d0c62aca93033d9ae5f9f1580be61', 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: 'c4e2a7166c5766eede74e6f9e5763e157c47ac74', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: 'e6bb457db190019f21c1c712bb8c9bab5abec91b', class: "gn__main-menu-actions" }, h("nano-dropdown", { key: 'd46c596a07189f129a1644118560590e70101a2b', 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: '00df8fe73a5c1e5b0e3263ee584549c1b450675f', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), !!this.searchIndices.length && (h("form", { key: 'b03a0c3f58a7a50939ec09258dda85a49157cf48', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '367ed61df9546497f9cef04d833e86f59389f48a', 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: 'd8013a6f1cd8953bc63ba6f518367a4b278197bd', 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: 'f8704085d6b7013c96ea922d783e4117fdd1a085', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '9b056f95508275dd70aa7626396795ab348beb02', class: "gn__main-menu-actions" }, h("nano-dropdown", { key: '8ae5f8986cfa43e035570c0af6e01b63d2a41ec3', 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: '6026bb1da1649da1bfa8fdd0aca64637768e264d', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), !!this.searchIndices.length && (h("form", { key: '7a662aeeae84bea4e73a907c185933ef40239061', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: 'e047a10dcabdde6ea485f08a03f3b92d12109846', 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: '94f69085cc0aad1a16cd37c34edb08bec7ddfa07', 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: 'fe62a269a2f3ca318ad1e071404f693c9540317b', slot: "end", name: "light/magnifying-glass" }), h("nano-datalist", { key: '87d39b1dc2be07a66b546ba53eea56351bb103ec', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: 'fade49b478eddeb181f332b8db31b0f88c98305f', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: 'e7c946dc5ec1ee76d115fd2575b1288f95d71c43' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
+            }, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: 'cbf4fe8934165e90ea788e51994471120886343b', slot: "end", name: "light/magnifying-glass" }), h("nano-datalist", { key: '066d8efa608ce3de3f55c0d4acc9db4c236e8e79', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '2cf9e1520de0e89ced9eee012990034b4602cfe5', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: '76da20f849a0d244a3127c937a08ee0e06381922' }, "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,
@@ -513,10 +521,10 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLE
                         positions: [i + 1],
                     });
                 } }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
-            h("nano-option", { key: '74852e060130852064b4987f1de0c8f0fa2a395e', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
-        ]))))), h("div", { key: 'e66b10d8ce1de533d772bfd66bf7c73511f338ff', class: "gn__cart" }, h("nano-icon-button", { key: '47b8fc7ad91f5ea1048a670407ad602d29eb347f', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }), !!this.cartCount && (h("nano-badge", { key: '75c8ffb6264bd4a390ad77d15c408105d6f77393', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount))), this.breakpoint <= bpps.contact.breakpoint
+            h("nano-option", { key: '59565a179d237c35d5528e4527b92372d2088b18', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
+        ]))))), h("div", { key: '33cc9bf94208059a733ef7c3abf2fda237f7193c', class: "gn__cart" }, h("nano-icon-button", { key: '62158360ce5c519c5d49246897cd3768831bea60', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }), !!this.cartCount && (h("nano-badge", { key: '668b68f55175618acfdbf787373fdc05ca6c6586', 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: '798ee16df74983e3d5689639f3320198bd1fe14d', class: "gn__site", part: "site-wrapper" }, h("nano-global-search-results", { key: 'a51edbf9c6bc9b0e34e207e21b4341704032e82f', part: "site-search-results" }, h("slot", { key: '4ae65a7bc4d8897d95e43692b87830cf9f9d8a8f' }))))));
+            : '', this.isLoggedIn ? (h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, h("nano-icon", { name: "light/user" }), h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login"))))))), h("nano-global-search-results", { key: '46f38c9e68b64668a7dc28cf98ae772bae059fb5', part: "site-search-results" }, h("div", { key: '5be5030d0eaaa992f334e818be155683b7f282e6', class: "gn__site", part: "site-wrapper" }, h("slot", { key: 'b144415e3e26914d026c403052d65237c693db2a' }))))));
     }
     static get assetsDirs() { return ["assets"]; }
     static get watchers() { return {
@@ -553,6 +561,7 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLE
         "_searchValue": [32],
         "openOverflowMenu": [64],
         "closeOverflowMenu": [64],
+        "triggerResize": [64],
         "submitSearch": [64]
     }, undefined, {
         "myAccountUrl": ["handleMyAccountUrl"],

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

@@ -20,14 +20,15 @@ const NanoInPageNav$1 = /*@__PURE__*/ proxyCustomElement(class NanoInPageNav ext
     /** Whether the headers should be sticky (small screen only). Defaults to true */
     stickyHeaders = true;
     get el() { return this; }
-    isMobile = window.innerWidth <= this.breakpoint;
+    isMobile = false;
     stickyClass = 'sticky';
     stuckClass = 'stuck';
     stickyObserver;
     slotCtrl = new HasSlotController(this, '[default]', 'mobile', 'back', 'accessory');
     componentDidLoad() {
-        this.updateNavForBreakpoint();
-        window.addEventListener('resize', this.updateNavForBreakpoint);
+        if (Build.isBrowser) {
+            this.updateNavForBreakpoint();
+        }
     }
     /**
      * Checks if the current screen width is less than or equal to the breakpoint.
@@ -35,6 +36,8 @@ const NanoInPageNav$1 = /*@__PURE__*/ proxyCustomElement(class NanoInPageNav ext
      * If not, it transforms the mobile navigation back into a desktop one.
      */
     updateNavForBreakpoint = () => {
+        if (Build.isServer)
+            return;
         this.isMobile = window.innerWidth <= this.breakpoint;
         if (this.isMobile) {
             // if the mobile slot is not there, we need to transform the desktop nav into a mobile one
@@ -51,6 +54,8 @@ const NanoInPageNav$1 = /*@__PURE__*/ proxyCustomElement(class NanoInPageNav ext
     };
     // make nano-details headers sticky
     initStickiness() {
+        if (Build.isServer)
+            return;
         let lastScrollTop = 0;
         // shadowRoot for mobile slot, light DOM for default nav
         const nanoDetails = this.isMobile && this.slotCtrl.has('mobile')
@@ -92,11 +97,16 @@ const NanoInPageNav$1 = /*@__PURE__*/ proxyCustomElement(class NanoInPageNav ext
             this.stickyObserver.observe(details);
         });
     }
+    connectedCallback() {
+        if (Build.isBrowser) {
+            window.addEventListener('resize', this.updateNavForBreakpoint);
+        }
+    }
     disconnectedCallback() {
         if (this.stickyObserver) {
             this.stickyObserver.disconnect();
         }
-        if (this.updateNavForBreakpoint) {
+        if (Build.isBrowser) {
             window.removeEventListener('resize', this.updateNavForBreakpoint);
         }
     }
@@ -206,7 +216,7 @@ const NanoInPageNav$1 = /*@__PURE__*/ proxyCustomElement(class NanoInPageNav ext
         });
     }
     render() {
-        return (h(Host, { key: '92552373d8a09fb223e32246547a8d134cb09da2', class: "nano-in-page-nav" }, h("nav", { key: '6fa0d66432e09b4a3e744f2d9e6c90d2d589f1b2', part: "root" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (h("div", { key: '1c596d58e78b17a8ba5e408a5156a6be59cf1765', class: "header" }, h("slot", { key: '9d6b924c2a24e85681564744a3667eb23692ae07', name: "back" }), h("slot", { key: 'c3f9a3a6f2879054df7b50074872a3341d02f0f5', name: "accessory" }))), this.slotCtrl.has('mobile') && this.isMobile ? (h("nano-details", { label: "Menu", class: this.stickyHeaders
+        return (h(Host, { key: 'fd3f27b1f30fa2e769abff0f6f28d95a09a9573c', class: "nano-in-page-nav" }, h("nav", { key: '56bb0757c62664ca08d55f12d5be0461c8333363', part: "root" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (h("div", { key: 'd1ec827847505fcef24412a84b47a9816c06b117', class: "header" }, h("slot", { key: 'edf50c9a0f9968dd7b224f919f800634f0b49ece', name: "back" }), h("slot", { key: '09e6a97a71aebda4e1217f3d7bfad9ae1264a9cc', name: "accessory" }))), this.slotCtrl.has('mobile') && this.isMobile ? (h("nano-details", { label: "Menu", class: this.stickyHeaders
                 ? `details-wrapper ${this.stickyClass}`
                 : 'details-wrapper' }, h("slot", { name: "mobile" }))) : (h("slot", null)))));
     }

package/dist/components/nano-menu-drawer.js

@@ -1,12 +1,13 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { proxyCustomElement, HTMLElement, writeTask, Build, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, Build, writeTask, Host } from '@stencil/core/internal/client';
 import { c as closestElement } from './dom.js';
 import { t as transformTag, h } from './renderer.js';
+import { H as HasSlotController } from './slot.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const menuDrawerCss = ":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{--padding-top:13px;--padding-end:12px;--padding-bottom:13px;--padding-start:12px;--icon-size:19px;--font-size:11px;--global-nav-height:79px;--bg-color:#001a21;--bg-color-hover:rgb(28 62 72 / 80%);--bg-color-selected:#274048;--bg-color-focus:rgb(28 62 72 / 80%);--focus-outline:none;--content-color:#fff;--secondary-bg-color:rgb(28 62 72);font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:block;z-index:1;background:var(--bg-color)}:host ::slotted(.nano-nav-item){--secondary-padding-top:var(--global-nav-height);--nano-icon-size:var(--icon-size);color:var(--content-color);font-size:var(--font-size);text-decoration:none;box-sizing:border-box}:host *,:host *::before,:host *::after{box-sizing:border-box}:host(.hide){display:none}:host(.has-global-nav) .content-wrap{padding-block-start:var(--global-nav-height);margin-block-start:calc(var(--global-nav-height) * -1)}.container{inset-inline-end:auto;flex:0 0 calc(var(--padding-end, 1em) * 2 + var(--icon-size));background:var(--bg-color);color:var(--content-color);z-index:1;inline-size:calc(var(--padding-end, 1em) * 2 + var(--icon-size));block-size:100%}:host(.open) .container{inline-size:auto}:host(:not(.loading)) .container{transition:inline-size 0.3s ease}.content-wrap{inset-inline-start:0;inset-block-start:0;inline-size:inherit;max-inline-size:inherit;background:var(--bg-color);color:#fff;position:sticky;font-size:var(--icon-size);line-height:1;display:flex;min-block-size:calc(100vh - 79px);min-block-size:calc(var(--vh, 1vh) * 100 - 79px);z-index:1}.content{inline-size:auto;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-color);flex:1}.content::after{content:\"\";position:absolute;inset-block-start:0;inset-inline:0;background:var(--bg-color);z-index:-1;block-size:100vh}.collapse-btn{background:var(--bg-color-selected);border:none;color:inherit;font-size:var(--icon-size);margin-block:var(--padding-top) var(--padding-bottom);margin-inline:calc(var(--padding-start) / 2) 0;border-radius:4px;padding-block:6px;padding-inline:5px;display:flex;align-content:center;inline-size:30px;flex:0 0 auto}.collapse-btn .nano-icon{font-size:var(--icon-size);transition:0.2s transform ease-in-out;transform:translateZ(0) rotate(0deg)}:host(.open) .collapse-btn .nano-icon{transform:translateZ(0) rotate(180deg)}.foot{margin-block-start:auto}.measure-ele{block-size:1px}";
+const menuDrawerCss = ":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{--padding-top:13px;--padding-end:13px;--padding-bottom:13px;--padding-start:13px;--icon-size:19px;--font-size:var(--nano-font-size-xs);--bg-color:var(--nano-color-grey-mono-1600);--bg-color-hover:var(--nano-color-grey-mono-1400);--bg-color-selected:var(--nano-color-grey-mono-1200);--bg-color-open:var(--nano-color-grey-mono-1500);--content-color:var(--nano-color-basic-white);--global-nav-height:76px;--menu-width:calc((var(--padding-end) + var(--padding-start)) + var(--icon-size));color-scheme:dark;display:block;z-index:1;background:var(--bg-color);color:var(--content-color);min-height:100%}:host(.hide){display:none}.head{border-bottom:var(--nano-color-grey-mono-1400) 1px solid}.container{inset-inline-end:auto;color:var(--content-color);inline-size:var(--menu-width);transition:inline-size 0.3s ease;top:var(--global-nav-height);position:sticky}:host(.open) .container{inline-size:auto}.content-wrap{inset-inline-start:0;inset-block-start:0;inline-size:inherit;background:var(--bg-color);font-size:var(--font-size);line-height:1;display:flex}.content-wrap::after{content:\"\";position:absolute;inset:calc(var(--global-nav-height) * -1) 0 0 0;background-color:var(--bg-color);z-index:-1}.content{max-height:100%;inline-size:auto;display:flex;flex-direction:column;overflow:hidden;flex:1 1 0%}.content:has(.foot){height:calc(100vh - var(--global-nav-height))}.collapse-btn{all:unset;padding-block:6px;padding-inline:var(--padding-start) var(--padding-end);width:100%;display:flex;justify-items:flex-start;background-color:var(--bg-color);appearance:none;cursor:pointer;font-size:var(--icon-size)}.collapse-btn:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.collapse-btn:hover{background-color:var(--bg-color-hover)}.collapse-btn:active{background-color:var(--bg-color-selected)}.collapse-btn .nano-icon{transition:var(--nano-transition-x-fast) rotate ease-in-out;rotate:0deg}:host(.open) .collapse-btn .nano-icon{rotate:180deg}.visually-hidden{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.foot{margin-block-start:auto;margin-block-end:var(--padding-bottom)}";
 
 const MenuDrawer = /*@__PURE__*/ proxyCustomElement(class MenuDrawer extends HTMLElement {
     constructor() {
@@ -16,15 +17,12 @@ const MenuDrawer = /*@__PURE__*/ proxyCustomElement(class MenuDrawer extends HTM
     }
     containerDiv;
     contentDiv;
-    measureEle;
     globalNav;
     children = [];
-    io;
-    currHeight = window.innerHeight;
+    ro;
+    slotCtrl = new HasSlotController(this, 'foot');
     get el() { return this; }
     reset = false;
-    widthOk = true;
-    heightOk = true;
     isLoading = true;
     hide = false;
     /**
@@ -32,60 +30,52 @@ const MenuDrawer = /*@__PURE__*/ proxyCustomElement(class MenuDrawer extends HTM
      */
     open = true;
     /**
-     * Save open state to localStorage
-     */
-    saveState = true;
-    /**
-     * Screen width to hide the menu drawer and move the items into the nano-global-nav
+     * Global-nav width to hide the menu drawer and move the items into the nano-global-nav
      */
     hideWidth = 576;
-    /**
-     * Should element hide and move items into the nano-global-nav when items are cut off
-     * (this will only work when nano-menu-drawer is displayed at full screen)
-     */
-    hideHeight = true;
     cancelNavItemEvents(ev) {
         if (!ev.detail.secondaryMenu)
             return;
         ev.stopPropagation();
     }
     openChange() {
-        if (this.saveState)
+        if (Build.isBrowser) {
             localStorage.setItem('nanoMenuDrawerOpen', this.open.toString());
-        if (this.containerDiv) {
-            if (this.open)
-                writeTask(() => (this.containerDiv.style.width = this.contentDiv.scrollWidth + 'px'));
-            else
-                writeTask(() => (this.containerDiv.style.width = null));
         }
-    }
-    widthChange() {
-        if (this.widthOk)
-            this.moveItemsToDrawer();
-        else
-            this.moveItemsToGlobalNav();
-    }
-    hideHeightChange() {
-        if (this.hideHeight && !this.io)
-            this.attachIO();
-        else if (!this.hideHeight && this.io) {
-            this.io.disconnect();
-            this.io = undefined;
+        if (this.containerDiv) {
+            const documentWidth = document.documentElement.clientWidth;
+            const scrollbarWidth = Math.abs(window.innerWidth - documentWidth);
+            if (this.open) {
+                const menuWidth = this.contentDiv.scrollWidth;
+                writeTask(() => {
+                    this.containerDiv.style.width = menuWidth + 'px';
+                    this.containerDiv.style.setProperty('--menu-width', (menuWidth) + 'px');
+                    this.containerDiv.style.setProperty('--scrollbar-width', scrollbarWidth + 'px');
+                });
+            }
+            else {
+                writeTask(() => {
+                    this.containerDiv.style.width = null;
+                    this.containerDiv.style.removeProperty('--menu-width');
+                    this.containerDiv.style.setProperty('--scrollbar-width', scrollbarWidth + 'px');
+                });
+            }
         }
     }
     moveItemsToGlobalNav() {
-        const currNavItems = this.el.querySelectorAll(transformTag('nano-nav-item'));
         // dimensions not cool - move items out of element and into global nav
+        const currNavItems = this.el.querySelectorAll(transformTag('nano-nav-item'));
+        this.hide = true;
+        this.globalNav.triggerResize();
         currNavItems.forEach((element) => {
             this.children.push({
                 slot: element.getAttribute('slot'),
                 element: element,
             });
-            element.setAttribute('slot', 'overflow');
+            element.setAttribute('slot', 'menu');
             element.classList.add('nano-global-nav-menu');
             this.globalNav.appendChild(element);
         });
-        this.hide = true;
     }
     moveItemsToDrawer() {
         if (!this.children || !this.children.length)
@@ -99,108 +89,77 @@ const MenuDrawer = /*@__PURE__*/ proxyCustomElement(class MenuDrawer extends HTM
         });
         this.children = [];
         this.hide = false;
-        if (!this.io)
-            this.attachIO();
     }
-    onWindowResize = () => {
-        if (window.innerWidth > this.hideWidth)
-            this.widthOk = true;
-        else
-            this.widthOk = false;
-        const vh = window.innerHeight * 0.01;
-        this.el.style.setProperty('--vh', `${vh}px`);
-        if (window.innerHeight > this.currHeight &&
-            this.widthOk &&
-            !this.heightOk) {
+    onResize = () => {
+        if (!this.globalNav || !Build.isBrowser)
+            return;
+        const { width } = this.globalNav.getBoundingClientRect();
+        if (width > this.hideWidth) {
             this.moveItemsToDrawer();
         }
-        this.currHeight = window.innerHeight;
+        else {
+            this.moveItemsToGlobalNav();
+        }
     };
     toggle = (e) => {
         e.preventDefault();
         this.open = !this.open;
     };
-    onToggleKeyDown = (ev) => {
-        switch (ev.key) {
-            case 'Enter':
-            case ' ':
-                this.open = !this.open;
-                break;
-        }
-    };
-    attachIO() {
-        if (!this.hideHeight)
-            return;
-        const io = (this.io = new window.IntersectionObserver((data) => {
-            this.heightOk = data[0].intersectionRatio !== 0;
-            if (!this.heightOk) {
-                this.moveItemsToGlobalNav();
-                this.io.disconnect();
-                this.io = undefined;
-            }
-        }, { threshold: 1 }));
-        io.observe(this.measureEle);
-    }
-    handleGlobalNavReady(e) {
-        if (e.target.tagName.toLowerCase() !== transformTag('nano-global-nav'))
+    attachRO() {
+        if (!Build.isBrowser || this.ro)
             return;
-        setTimeout(() => {
-            this.attachIO();
-            this.openChange();
-            this.onWindowResize();
-            this.isLoading = false;
-        }, 500);
+        this.ro = new ResizeObserver(() => {
+            this.onResize();
+        });
+        this.ro.observe(this.globalNav);
     }
     componentWillLoad() {
         this.globalNav = closestElement(transformTag('nano-global-nav'), this.el);
-        this.widthOk = window.innerWidth > this.hideWidth;
-        this.currHeight = window.innerHeight;
-        if (this.saveState) {
+        if (!this.globalNav) {
+            console.warn('nano-menu-drawer: no nano-global-nav found in the document. nano-global-nav is required to use nano-menu-drawer.');
+        }
+        if (Build.isBrowser) {
             const localState = localStorage.getItem('nanoMenuDrawerOpen');
-            this.open = localState ? localState === 'true' : this.open;
+            this.open = localState ? (localState === 'true' ? true : false) : this.open;
+            this.globalNav.componentOnReady().then(() => {
+                this.openChange();
+            });
         }
     }
+    connectedCallback() {
+        this.onResize();
+    }
     componentDidLoad() {
-        if (Build.isBrowser) {
-            window.addEventListener('resize', this.onWindowResize);
-        }
+        if (Build.isBrowser)
+            this.attachRO();
     }
     disconnectedCallback() {
-        window.removeEventListener('resize', this.onWindowResize);
-        if (this.io) {
-            this.io.disconnect();
-            this.io = null;
+        if (Build.isBrowser) {
+            this.ro?.disconnect();
+            this.ro = undefined;
         }
     }
     render() {
-        return (h(Host, { key: 'ce58d5db4ed3a23557189fbc3eb2cf0a0ad32edd', class: {
+        return (h(Host, { key: 'fe9f1c17828f6884f663a0990851f66cbb9ff026', class: {
                 open: this.open,
                 hide: this.hide,
                 loading: this.isLoading,
                 'has-global-nav': !!this.globalNav,
                 'nano-menu-drawer': true,
-            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, h("div", { key: 'a68d7698be7747a6a191a44364b615c3866f8160', ref: (div) => (this.containerDiv = div), class: "container" }, h("div", { key: 'f6c92461b79e0b3e44f138736ef65089680101a8', class: "content-wrap" }, h("nav", { key: '51ce192b7cbb38233baced954f4228e756052026', ref: (div) => (this.contentDiv = div), class: "content" }, h("button", { key: '5662329d6320ef44d837afc823c09beb1563c0fe', onMouseDown: this.toggle, onKeyDown: this.onToggleKeyDown, class: "collapse-btn" }, h("nano-icon", { key: '77d0e152d06593f3999072a1b557673a8ddc8a72', name: "light/right-to-line", "aria-label": "collapse / expand" })), h("slot", { key: '8369d8882e41547e088ec41401cc2273efb2b59a' }), h("div", { key: '90c996a4d1debfd4965353e5e60548605418dfbd', class: "foot" }, h("div", { key: '3ca7e34bde41f742d20edbef571400c875179858', class: "measure-ele", ref: (div) => (this.measureEle = div) }), h("slot", { key: '1b5d32415c0e727788186bd9011de394cb7b5759', name: "foot" })))))));
+            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, h("div", { key: '62bcaa0a299c8887479ec83a067eb8e2ff188de8', ref: (div) => (this.containerDiv = div), class: "container" }, h("div", { key: 'a20706de787a6e6e3b3f1ee4a5a079ed601ac2d2', class: "content-wrap" }, h("nav", { key: 'd487b8709b36b54d207f1a257564b98d12722c09', ref: (div) => (this.contentDiv = div), class: "content" }, h("div", { key: 'e1fb80d26a27fc35d2999908a3d3f264f9bb15af', class: "head" }, h("button", { key: '0778e6742189405de47c34cbe9e346c6fec4de63', onClick: this.toggle, class: "collapse-btn" }, h("nano-icon", { key: '5b53c2819fdf51f6b611d11b6ce9c8d621339308', name: "light/arrow-right-to-line" }), h("span", { key: 'b2eff692e0251e2a05a64cc93ed0635ff8659084', class: "visually-hidden" }, "collapse / expand menu"))), h("slot", { key: '7a65ca13555e4706728916e116af51cb05263ed2' }), this.slotCtrl.has('foot') && (h("div", { key: '40794aacb4185b8020e94c79dc9d47e65a637fcc', class: "foot" }, h("slot", { key: 'f5b7d990d47e336ad725b0c3c3726d65f8143122', name: "foot" }))))))));
     }
     static get watchers() { return {
-        "open": ["openChange"],
-        "widthOk": ["widthChange"],
-        "hideHeight": ["hideHeightChange"]
+        "open": ["openChange"]
     }; }
     static get style() { return menuDrawerCss; }
 }, [1, "nano-menu-drawer", {
         "open": [1028],
-        "saveState": [4, "save-state"],
         "hideWidth": [2, "hide-width"],
-        "hideHeight": [4, "hide-height"],
         "reset": [32],
-        "widthOk": [32],
-        "heightOk": [32],
         "isLoading": [32],
         "hide": [32]
-    }, [[0, "nanoOpen", "cancelNavItemEvents"], [0, "nanoClose", "cancelNavItemEvents"], [16, "nanoIsReady", "handleGlobalNavReady"]], {
-        "open": ["openChange"],
-        "widthOk": ["widthChange"],
-        "hideHeight": ["hideHeightChange"]
+    }, [[0, "nanoOpen", "cancelNavItemEvents"], [0, "nanoClose", "cancelNavItemEvents"]], {
+        "open": ["openChange"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

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

@@ -54,8 +54,8 @@ const Rating = /*@__PURE__*/ proxyCustomElement(class Rating extends HTMLElement
         this.handleShowHideElements();
     }
     render() {
-        return (h(Host, { key: '49834d5d379bcc71bfd228cbad3becf4343160ac', class: "nano-more-less" }, h("slot", { key: '4cbea5f74ddd512cacfc2c65c35ce0cd9fbfee00', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
-            h("div", { key: 'd8b9b8135f3789705f18793dd8262bcebb38f2cb', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: '564f67099d59d520fbf9a5c40f6f14e681346eff', name: "less" }, h("button", { key: 'a5aa9c0a0eda6b6dda1c72288b18668d4028eec5', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
+        return (h(Host, { key: '3bde961caf3acbf1db08892d2131e8afdc457681', class: "nano-more-less" }, h("slot", { key: 'bc9a9c15a5e0ae53735602b23fbb248e8e51649d', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
+            h("div", { key: '500e8c63e9ef6e0b80318d904388c8cecce8f66f', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: '411cfccdaf9eaa3c6443841100791fd656fc71fe', name: "less" }, h("button", { key: '9001e6086687793575b8e3e62529e1c15846aa4e', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
             !this.noHideBtn ? (h("div", { style: { display: this.show ? 'contents' : 'none' }, class: "button-wrapper", part: "button-wrapper button-wrapper--more", onClick: (e) => this.handleClick(e) }, h("slot", { name: "more" }, h("button", { part: "button button--more" }, "Show less (-", this.children.length - this.maxToShow, ")")))) : (''),
         ]));
     }

package/dist/components/nano-rating.js

@@ -173,23 +173,23 @@ const Rating = /*@__PURE__*/ proxyCustomElement(class Rating extends HTMLElement
         else {
             displayValue = this.isHovering ? this.hoverValue : this.value;
         }
-        return (h(Host, { key: '1f1a4c5f6b8dea2419e75be53db6e74d4455c3c5', class: "nano-rating" }, h("div", { key: '6898eef81bc7e3d634b3054a4694f49db79929c8', class: "rating-wrap" }, h("div", { key: 'bbad068f69e99c12083bb53c00a25b2dff02ddb7', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
+        return (h(Host, { key: '3c6a6a92555b16420e5a5401f6020a6c2bc66b50', class: "nano-rating" }, h("div", { key: '2ccf681ef28c0f2b804da2c98416c7ea384de6fa', class: "rating-wrap" }, h("div", { key: '529d5315867405bc0b50ebe4e1ee3c38c88002ef', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
                 rating: true,
                 'rating--readonly': this.readonly,
                 'rating--disabled': this.disabled,
-            }, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("span", { key: 'd2518d1ec73803cdc284c64ff4fcee9c86f6077d', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (h("span", { class: {
+            }, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("span", { key: '81cefbe9454eed12d1689cc7e0e2d525a760a5b2', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (h("span", { class: {
                 rating__symbol: true,
                 'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
             },
             // Users can click the current value to clear the rating. When this happens, we set this.isHovering to
             // false to prevent the hover state from confusing them as they move the mouse out of the control. This
             // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.
-            onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { key: '046a97718d174445372c909eee0d061c4effd770', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
+            onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { key: '418807cc26fddef01c6f9ea63def433e9b9d71e9', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
                 clip: this.clip(displayValue),
             } }, counter.map((index) => (h("span", { class: {
                 rating__symbol: true,
                 'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
-            }, innerHTML: this.symbol(index + 1) })))), h("input", { key: '8a0a62b7419a719e2a2cf08e361aae299dea7d65', type: "hidden", name: this.name, value: this.value, disabled: this.disabled || this.readonly })))));
+            }, innerHTML: this.symbol(index + 1) })))), h("input", { key: '7c759836e1c59f34140097b9e0026e99fda9abe5', type: "hidden", name: this.name, value: this.value, disabled: this.disabled || this.readonly })))));
     }
     static get watchers() { return {
         "value": ["handleValueChange"],

package/dist/components/nano-slide.js

@@ -39,7 +39,7 @@ const Slide = /*@__PURE__*/ proxyCustomElement(class Slide extends HTMLElement {
         });
     }
     render() {
-        return (h(Host, { key: 'ef8511e766273878ebc0ceaa121199bd86130bbb', class: "nano-slide" }, h("slot", { key: '4b783b4c3df8662fb590a52ed17df975681d44bc' })));
+        return (h(Host, { key: '3c6b1d8ac380c330925fdd1688ca54161afa5033', class: "nano-slide" }, h("slot", { key: 'c9befdfd0d120aa6c773ba9ed24d97fcde7f8ce7' })));
     }
     static get watchers() { return {
         "ready": ["readyChange"]

package/dist/components/nano-sortable.js

@@ -731,7 +731,7 @@ const Sortable = /*@__PURE__*/ proxyCustomElement(class Sortable extends HTMLEle
         }
     }
     render() {
-        return (h(Host, { key: '108dd7db53821adef114521be6a825561c974137', class: "nano-sortable" }, h("div", { key: '7b23e9a51e5cb366676fb61163b031c0ba693599', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (h("div", null, str)))), h("slot", { key: 'a61fca55dd0de8a4dd1611ada70101ca19906528' })));
+        return (h(Host, { key: 'bf0691e59a5832ca8249a7d1253232399f6dcd08', class: "nano-sortable" }, h("div", { key: '5ff7d9c08e496fbfffb5df836dd6834d339106fc', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (h("div", null, str)))), h("slot", { key: '6419b77cd7e962726d7b2c5b88997b73b1bc9a3f' })));
     }
     static get watchers() { return {
         "itemSelector": ["handleItemSelectorChange"],

package/dist/components/nano-tab-content.js

@@ -24,10 +24,10 @@ const NanoTabContent$1 = /*@__PURE__*/ proxyCustomElement(class NanoTabContent e
         requestAnimationFrame(() => (this.ready = true));
     }
     render() {
-        return (h(Host, { key: 'd75249c18948a3c52f1163cf036cbde27e64ef2c', id: this.host.id || this.tabContentId, style: { display: this.active ? 'block' : 'none' }, role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true', class: {
+        return (h(Host, { key: 'e77e802472984dd6997e5dbea3b807853c530f9a', id: this.host.id || this.tabContentId, style: { display: this.active ? 'block' : 'none' }, role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true', class: {
                 ready: this.ready,
                 'nano-tab-content': true,
-            } }, h("div", { key: '11c33106eb61433952881ae701d68e5a0bc738c5', part: "base", class: "nano-tab-content" }, h("slot", { key: 'a9e9ed4679fb0ab7d90ee45dddb3c482e2598242' }))));
+            } }, h("div", { key: '9c642ced7beec01c0cbaa333b977ee23ef83981a', part: "base", class: "nano-tab-content" }, h("slot", { key: 'fcafb5cedc796e0f3661519ccdb1d9374568d59e' }))));
     }
     static get style() { return tabContentCss; }
 }, [1, "nano-tab-content", {

package/dist/components/nano-tab-group.js

@@ -293,7 +293,7 @@ const NanoTabGroup$1 = /*@__PURE__*/ proxyCustomElement(class NanoTabGroup exten
                     const storedTab = store.retrieve()?.tab;
                     // if a tab is in storage, set it as active now
                     if (storedTab && storedTab !== store.initialState?.tab) {
-                        this.getAllActiveTabs.forEach(element => {
+                        this.getAllActiveTabs.forEach((element) => {
                             if (element.panel === storedTab) {
                                 element.active = true;
                             }

package/dist/components/nano-tab.js

@@ -49,12 +49,12 @@ const NanoTab$1 = /*@__PURE__*/ proxyCustomElement(class NanoTab extends HTMLEle
         }
     };
     render() {
-        return (h(Host, { key: 'be35131ea184b6644288e79d3e0bd1ea8c8668dc', id: this.host.id || this.tabId, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, h("div", { key: '24c2a9b88b258d4332a8fc15e7687ec9b0e2a54e', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
+        return (h(Host, { key: '42d49d8148bac6792761ca027917184992ac9787', id: this.host.id || this.tabId, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, h("div", { key: 'a5c816c6faab721c3c8896083f87ead5dd06abd1', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
                 tab: true,
                 'tab--active': this.active,
                 'tab--disabled': this.disabled,
                 'tab--closable': this.closable,
-            } }, h("slot", { key: '80ab0aa015352e67446cee86a340db6a8b6ed6ee', name: "start" }), h("div", { key: '008484dda3003b4baa4c603ea43ce8ea15c4f688', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, h("slot", { key: '5ee9fe66f2a58e0c06fafe1eb8ba0941ff0ca082' })), h("slot", { key: 'b3ef36e571ef16ecc40a2983faf5ade9e3a47a9f', name: "end" }), this.closable && !this.disabled && (h("nano-icon-button", { key: 'ba51a18677145770de7b18974a28448fccb593cf', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
+            } }, h("slot", { key: 'c1aa8a3a0239d501a65b5db2c263b5ad777360e0', name: "start" }), h("div", { key: '508bd62a360aa2c6ba195f7dbaa2e8503bc79771', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, h("slot", { key: '48d789df0212ed3fcb91b169336540027aa182be' })), h("slot", { key: '29f8662c82ee362daf86d2fda096f1d95b9e80a1', name: "end" }), this.closable && !this.disabled && (h("nano-icon-button", { key: 'bd37054c27603d7cf012c88c99ad472973539e3e', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
     }
     static get style() { return tabCss; }
 }, [1, "nano-tab", {

package/dist/components/nano-table.js

@@ -229,10 +229,10 @@ const NanoTable$1 = /*@__PURE__*/ proxyCustomElement(class NanoTable extends HTM
         this.cleanUpObservers();
     }
     render() {
-        return (h(Host, { key: 'e968dfa9cd63226118a11fe73f142236e008b489', class: {
+        return (h(Host, { key: 'a976d3c4d360aa37eeccf025c4948b8bcf9a6a05', class: {
                 'nano-table': true,
                 'nano-table--props-ready': this.propsReady,
-            } }, this.scrollable && (h("nano-masked-overflow", { key: '5dbe429e48270fc449057dee7d7c2090ad35e5e2', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: '5e32115ed739865a4452f74ab19c01f7f63aa763', class: "nano-table__overflow" }))), h("slot", { key: '42bfc9215be8ca00a5d6aa5232475544cff4b2b7' })));
+            } }, this.scrollable && (h("nano-masked-overflow", { key: '6d78f909c2fd7ebd1b478e9b399ac97f5202acb5', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: '9a2246d08f3f82efee4a6a6c7aec6002b159b9bc', class: "nano-table__overflow" }))), h("slot", { key: '21fad37f4eda294cd90b11175b8650b63dfe4ab0' })));
     }
     static get watchers() { return {
         "compact": ["handleCompactChange"],