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

package/dist/cjs/nano-grid_2.cjs.entry.js

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-BlC8UV0T.js');
-var renderer = require('./renderer-BjTjwe8d.js');
+var index = require('./index-trCnMfo7.js');
+var renderer = require('./renderer-W7BRtd3i.js');
 
 // import type { VNode, HTMLStencilElement } from "@stencil/core";
 const supportsConstructibleStylesheets = (() => {
@@ -131,7 +131,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);--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}";
+const gridCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--grid-col-gap:var(--nano-spacing-md);--grid-row-gap:var(--nano-spacing-md);--grid-align-items:start;--grid-justify-items: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);justify-items:var(--grid-justify-items)}:host([show-helper]:not([show-helper=false])){position:relative}:host([show-helper]:not([show-helper=false])) .grid--helper{position:absolute;inset:0;pointer-events:none;display:grid !important;overflow:hidden}:host([show-helper]:not([show-helper=false])) .grid--helper::before{content:var(--current-grid-size);font-size:30px;position:absolute;inline-size:100%;inset-inline-start:0;text-align:center;inset-block-start:50%;transform:translateY(-50%);color:rgba(0, 0, 0, 0.2);text-transform:uppercase;z-index:99;pointer-events:none}:host([show-helper]:not([show-helper=false])) .grid__helper-item{background:hsla(204, 80%, 72%, 0.25);block-size:100vh}";
 
 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;
@@ -295,7 +295,7 @@ const Grid = class {
         this.constructSizeArray();
     }
     render() {
-        return (renderer.h(index.Host, { key: '410e2e3fce3867216adb0f9bf0501f8d40514bce', class: "nano-grid" }, renderer.h("div", { key: '424f6da1b39d37ef70912e87e5d61320b5ff8d11', part: "grid", class: "grid", "cache-key": this.cacheKey }, renderer.h("slot", { key: '051bdae40a3d63dfdb744a980c74a42c2ac9c05f' })), this.showHelper && (renderer.h("div", { key: 'b24395cdacf9d7ba3a15b1a9b064a2a97f3afac1', class: "grid grid--helper", part: "helper", "cache-key": this.cacheKey }, [...Array(24)].map(() => (renderer.h("div", { class: "grid__helper-item" })))))));
+        return (renderer.h(index.Host, { key: '74b98156bf6fbb3bf105135be4f461737d7774ac', class: "nano-grid" }, renderer.h("div", { key: 'dda06ec152c7d25ee0e6090e6c301bc8e5e81aac', part: "grid", class: "grid", "cache-key": this.cacheKey }, renderer.h("slot", { key: '175e120e0198bfad25600316aa8a8becf9390866' })), this.showHelper && (renderer.h("div", { key: '773d0ca81af12cc416550578e4df88f08b7af3cd', class: "grid grid--helper", part: "helper", "cache-key": this.cacheKey }, [...Array(24)].map(() => (renderer.h("div", { class: "grid__helper-item" })))))));
     }
     static get watchers() { return {
         "sTpl": ["constructSizeArray"],

package/dist/cjs/nano-hero.cjs.entry.js

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-BlC8UV0T.js');
-var renderer = require('./renderer-BjTjwe8d.js');
+var index = require('./index-trCnMfo7.js');
+var renderer = require('./renderer-W7BRtd3i.js');
 
 const heroCss = ":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 --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n   * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n   * @prop --theme-color: Text color. Default depends on theme;\n   * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #90c6e7;\n   * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n   * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n   * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n   * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n   * @prop --quote-size: Font size of the quote. Defaults to 1.3em and grows to 3rem on the xl breakpoint;\n  */\n  --nano-loader-base: #4a4a4a;\n  --nano-loader-tint: #7d7d7d;\n  --theme-color: #fff;\n  --theme-tint-color: #90c6e7;\n  --scrim-color: 0 0 0;\n  --scrim-direction: 90deg;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 0.7;\n  --padding: 0;\n  --quote-size: 1.3rem;\n  color: var(--theme-color);\n  display: block;\n  container-type: inline-size;\n}\n\n:host([theme=light]) {\n  --nano-loader-base: #fff;\n  --nano-loader-tint: white;\n  --theme-color: #4a4a4a;\n  --scrim-color: 255 255 255;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 1;\n  --scrim-direction: 270deg;\n  color: var(--theme-color);\n}\n:host([theme=light]) .hero__primary-content {\n  --color: #4a4a4a;\n}\n\n.hero {\n  position: relative;\n}\n@container (min-width: 800px) {\n  .hero {\n    --quote-size: 3rem;\n  }\n}\n.hero--rtl {\n  --scrim-direction: 270deg;\n}\n.hero--secondary:not(.hero--iconbox) {\n  --scrim-direction: 0deg;\n}\n.hero__bg-wrap {\n  overflow: hidden;\n}\n.hero__bg-slot {\n  position: absolute;\n  inset: 0;\n}\n.hero__ctas {\n  display: flex;\n  justify-content: flex-end;\n  padding-block: 32px 0;\n  padding-inline: 32px;\n  margin-block-end: -64px;\n  position: relative;\n  z-index: 1;\n}\n@media (width <= 52em) {\n  .hero__ctas {\n    display: none;\n  }\n}\n@media (width <= 58em) {\n  .hero__ctas {\n    margin-block-end: -48px;\n  }\n}\n.hero__ctas ::slotted(a.button[slot=secondary-ctas]) {\n  padding-inline: 0.5rem !important;\n  font-size: 0.875rem !important;\n  margin-block: 0 !important;\n  margin-inline: 0.25rem !important;\n}\n.hero__img {\n  display: block;\n  --padding: inherit;\n}\n.hero__breadcrumbs {\n  display: none;\n  margin-block: 20px 0;\n  margin-inline: 14px;\n  line-height: 14px;\n}\n.hero--breadcrumb .hero__breadcrumbs {\n  display: block;\n}\n@container (min-width: 800px) {\n  .hero__breadcrumbs {\n    margin-block: 0;\n    margin-inline: 50px;\n    max-inline-size: 50%;\n  }\n}\n@container (min-width: 900px) {\n  .hero__breadcrumbs {\n    margin-block: 0;\n    margin-inline: 83px;\n  }\n}\n.hero__breadcrumbs ::slotted(*[slot=breadcrumb]) {\n  font-size: 0.85rem;\n  text-transform: uppercase;\n  letter-spacing: 1.5px;\n  font-weight: 600;\n  font-stretch: 125%;\n  display: inline-block;\n  margin-block-end: 16px;\n  position: relative;\n  z-index: 2;\n}\n.hero--hasbg .hero__breadcrumbs ::slotted(*[slot=breadcrumb]) {\n  text-shadow: 1px 1px rgba(0, 0, 0, 0.15);\n}\n.hero__breadcrumbs ::slotted(a[slot=breadcrumb]) {\n  color: var(--theme-tint-color) !important;\n  cursor: pointer;\n}\n.hero__breadcrumbs ::slotted(.slash[slot=breadcrumb]) {\n  color: var(--theme-color);\n  position: relative;\n  margin-block: 0;\n  margin-inline: 0.5rem;\n  display: inline-block;\n}\n.hero__scrim {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  background: linear-gradient(var(--scrim-direction), rgb(var(--scrim-color)/var(--scrim-opacity-from)) 0%, rgb(var(--scrim-color)/var(--scrim-opacity-to)) 100%);\n}\n.hero--scrim .hero__scrim {\n  background: none;\n}\n.hero__content {\n  max-inline-size: 1440px;\n  display: block;\n  --grid-row-gap: 0;\n  margin-block: 0;\n  margin-inline: auto;\n  position: relative;\n}\n@container (min-width: 800px) {\n  .hero__content {\n    margin-block: 50px 0 !important;\n    max-inline-size: 1540px !important;\n  }\n}\n@container (min-width: 900px) {\n  .hero__content {\n    margin-block: 83px 0 !important;\n    max-inline-size: 1606px !important;\n  }\n}\n.hero__primary {\n  margin: 16px;\n}\n.hero--breadcrumb .hero__primary {\n  margin-block: 0;\n  margin-inline: 16px;\n}\n.hero--backbtn .hero__primary {\n  margin-inline-start: 0;\n}\n.hero__primary ::slotted(.nano-icon-button[slot=back-btn]) {\n  font-size: 2rem;\n}\n@container (min-width: 800px) {\n  .hero__primary {\n    margin-block: 0 50px !important;\n    margin-inline: 50px 0 !important;\n  }\n  .hero__primary ::slotted(.nano-icon-button[slot=back-btn]) {\n    margin-block: 0 !important;\n    margin-inline: -3rem 0 !important;\n  }\n}\n@container (min-width: 900px) {\n  .hero__primary {\n    margin-block: 0 83px !important;\n    margin-inline: 83px 0 !important;\n  }\n}\n.hero__primary-content {\n  max-inline-size: 45rem;\n  --color: #fff;\n  display: flex;\n}\n.hero--backbtn .hero__primary-content > div {\n  padding-block: 10px 0;\n  padding-inline: 0;\n}\n.hero__primary-content ::slotted(h1[slot=primary-content]) {\n  line-height: 26px !important;\n  margin-block: 0 18px !important;\n  font-size: 2rem !important;\n}\n@container (min-width: 800px) {\n  .hero__primary-content ::slotted(h1[slot=primary-content]) {\n    line-height: 31px !important;\n    margin-block-end: 30px !important;\n  }\n  .hero__primary-content ::slotted(.button[slot=primary-content]) {\n    margin-block-start: 20px !important;\n  }\n}\n.hero__secondary {\n  display: none;\n  block-size: 100%;\n  padding-block: 0 20px;\n  padding-inline: 14px;\n}\n.hero--secondary .hero__secondary {\n  display: flex;\n  align-items: center;\n}\n@container (min-width: 800px) {\n  .hero__secondary {\n    padding-block: 0 50px;\n    padding-inline: 50px;\n    justify-content: flex-end;\n  }\n}\n@container (min-width: 900px) {\n  .hero__secondary {\n    padding-block: 0 83px;\n    padding-inline: 83px;\n  }\n}\n.hero__icon-box {\n  background: rgba(0, 0, 0, 0.7);\n  padding: 24px;\n  inline-size: 100%;\n  margin-block-end: auto;\n  display: flex;\n  flex-direction: column;\n  color: white;\n}\n@container (min-width: 800px) {\n  .hero__icon-box {\n    max-inline-size: 410px;\n    flex: 0 1 410px;\n  }\n}\n.hero__icon-box ::slotted([slot=icon-box-item]) {\n  --nano-color-base: var(--theme-tint-color);\n  --nano-icon-size: 32px;\n  --nano-icon-margin-end: 20px;\n  display: flex;\n  align-items: center;\n  font-size: 0.8125rem;\n  margin-block-end: 20px;\n}\n.hero__icon-box ::slotted(.last[slot=icon-box-item]) {\n  margin-block-end: 0;\n}\n.hero__quote-content {\n  margin-block-start: auto;\n  text-align: center;\n  inline-size: 100%;\n}\n@container (min-width: 800px) {\n  .hero__quote-content {\n    max-inline-size: 500px;\n    flex: 0 1 500px;\n    text-align: initial;\n  }\n}\n.hero__quote::before, .hero__quote::after {\n  content: '\"';\n  font-size: var(--quote-size);\n  font-weight: 600;\n  font-style: italic;\n  line-height: 0;\n  color: #abb6b8;\n  display: inline;\n  position: relative;\n}\n.hero__quote ::slotted([slot=quote]) {\n  font-size: var(--quote-size);\n  font-weight: 200;\n  display: inline;\n}\n.hero__quote-author {\n  text-align: end;\n  font-size: 1rem;\n  opacity: 0.8;\n}\n@container (min-width: 800px) {\n  .hero--sub .hero__content {\n    margin-block-start: 40px;\n  }\n  .hero--sub .hero__content .hero__primary {\n    margin-block: 0 40px;\n    margin-inline: 50px 0;\n  }\n  .hero--sub .hero__content .hero__secondary {\n    padding-block: 0 50px;\n    padding-inline: 40px 50px;\n  }\n  .hero--sub .hero__content ::slotted(.button[slot=primary-content]) {\n    margin-block-start: 8px !important;\n  }\n  .hero--sub .hero__content ::slotted(h1[slot=primary-content]) {\n    margin-block-end: 18px !important;\n  }\n}\n@container (min-width: 900px) {\n  .hero--sub .hero__content .hero__primary {\n    margin-block: 0 40px;\n    margin-inline: 83px 0;\n  }\n  .hero--sub .hero__content .hero__secondary {\n    padding-block: 0 83px;\n    padding-inline: 40px 83px;\n  }\n}";
 

package/dist/cjs/nano-icon-item.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-BlC8UV0T.js');
+var index = require('./index-trCnMfo7.js');
 
 const iconItemCss = ":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}}";
 

package/dist/cjs/nano-icon_3.cjs.entry.js

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-BlC8UV0T.js');
-var renderer = require('./renderer-BjTjwe8d.js');
+var index = require('./index-trCnMfo7.js');
+var renderer = require('./renderer-W7BRtd3i.js');
 var popover = require('./popover-CpIMxMWJ.js');
 
 let CACHED_MAP;
@@ -638,10 +638,10 @@ const Tooltip = class {
             this.popover.destroy();
     }
     render() {
-        return (renderer.h(index.Host, { key: '11084ad6ae4888255ad9118d9f230eb8d6f7f582', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, renderer.h("slot", { key: '04718a12adc5a00cd2a467d1f5eada0efb10b4aa', onSlotchange: this.handleSlotChange }), renderer.h("div", { key: 'c010b4767a12f50a3004a403f7f905a1b32be517', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, renderer.h("div", { key: 'b3923b2b512bbcb962f19066456a5f739cf6030e', part: "base", ref: (el) => (this.tooltip = el), class: {
+        return (renderer.h(index.Host, { key: 'bae7fd3006e859e7aabcf7d6c4358de59a345c44', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, renderer.h("slot", { key: '1c28d3ce46378a6add85ac596d8e561f431c0913', onSlotchange: this.handleSlotChange }), renderer.h("div", { key: '18262c8b0048dbb1a630dd046b348b97827ad80a', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, renderer.h("div", { key: 'd17d63c777bb90a70223fe012b670eed8af06a2d', part: "base", ref: (el) => (this.tooltip = el), class: {
                 tooltip: true,
                 'tooltip--open': this.open,
-            }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, renderer.h("slot", { key: '1eb8412dcf8f2517a9e2c0786844492acf97e77c', name: "content", onSlotchange: () => this.setLabel() }, this.content), renderer.h("div", { key: '89e9f4859aefcee96afe6a3099a03ef1c544d7c7', class: "tooltip-arrow", "data-popper-arrow": true })))));
+            }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, renderer.h("slot", { key: 'a4dd740342d39075c4ba50e2b1ec6c6a231c905b', name: "content", onSlotchange: () => this.setLabel() }, this.content), renderer.h("div", { key: '772a967f357113294c4e9f9f5e93da2845063875', class: "tooltip-arrow", "data-popper-arrow": true })))));
     }
     static get watchers() { return {
         "content": ["setLabel"],

package/dist/cjs/nano-in-page-nav.cjs.entry.js

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-var index = require('./index-BlC8UV0T.js');
-var renderer = require('./renderer-BjTjwe8d.js');
-var slot = require('./slot-CoMwYflw.js');
+var index = require('./index-trCnMfo7.js');
+var renderer = require('./renderer-W7BRtd3i.js');
+var slot = require('./slot-CppKo1Tn.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){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)}";
 
@@ -18,14 +18,15 @@ const NanoInPageNav = class {
     /** Whether the headers should be sticky (small screen only). Defaults to true */
     stickyHeaders = true;
     get el() { return index.getElement(this); }
-    isMobile = window.innerWidth <= this.breakpoint;
+    isMobile = false;
     stickyClass = 'sticky';
     stuckClass = 'stuck';
     stickyObserver;
     slotCtrl = new slot.HasSlotController(this, '[default]', 'mobile', 'back', 'accessory');
     componentDidLoad() {
-        this.updateNavForBreakpoint();
-        window.addEventListener('resize', this.updateNavForBreakpoint);
+        {
+            this.updateNavForBreakpoint();
+        }
     }
     /**
      * Checks if the current screen width is less than or equal to the breakpoint.
@@ -90,11 +91,16 @@ const NanoInPageNav = class {
             this.stickyObserver.observe(details);
         });
     }
+    connectedCallback() {
+        {
+            window.addEventListener('resize', this.updateNavForBreakpoint);
+        }
+    }
     disconnectedCallback() {
         if (this.stickyObserver) {
             this.stickyObserver.disconnect();
         }
-        if (this.updateNavForBreakpoint) {
+        {
             window.removeEventListener('resize', this.updateNavForBreakpoint);
         }
     }
@@ -202,7 +208,7 @@ const NanoInPageNav = class {
         });
     }
     render() {
-        return (renderer.h(index.Host, { key: '92552373d8a09fb223e32246547a8d134cb09da2', class: "nano-in-page-nav" }, renderer.h("nav", { key: '6fa0d66432e09b4a3e744f2d9e6c90d2d589f1b2', part: "root" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (renderer.h("div", { key: '1c596d58e78b17a8ba5e408a5156a6be59cf1765', class: "header" }, renderer.h("slot", { key: '9d6b924c2a24e85681564744a3667eb23692ae07', name: "back" }), renderer.h("slot", { key: 'c3f9a3a6f2879054df7b50074872a3341d02f0f5', name: "accessory" }))), this.slotCtrl.has('mobile') && this.isMobile ? (renderer.h("nano-details", { label: "Menu", class: this.stickyHeaders
+        return (renderer.h(index.Host, { key: 'fd3f27b1f30fa2e769abff0f6f28d95a09a9573c', class: "nano-in-page-nav" }, renderer.h("nav", { key: '56bb0757c62664ca08d55f12d5be0461c8333363', part: "root" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (renderer.h("div", { key: 'd1ec827847505fcef24412a84b47a9816c06b117', class: "header" }, renderer.h("slot", { key: 'edf50c9a0f9968dd7b224f919f800634f0b49ece', name: "back" }), renderer.h("slot", { key: '09e6a97a71aebda4e1217f3d7bfad9ae1264a9cc', name: "accessory" }))), this.slotCtrl.has('mobile') && this.isMobile ? (renderer.h("nano-details", { label: "Menu", class: this.stickyHeaders
                 ? `details-wrapper ${this.stickyClass}`
                 : 'details-wrapper' }, renderer.h("slot", { name: "mobile" }))) : (renderer.h("slot", null)))));
     }

package/dist/cjs/nano-intersection-observe.cjs.entry.js

@@ -3,10 +3,10 @@
  */
 'use strict';
 
-var index = require('./index-BlC8UV0T.js');
-var renderer = require('./renderer-BjTjwe8d.js');
-var scroll = require('./scroll-CtgMHKrt.js');
-require('./dom-B0-coRX2.js');
+var index = require('./index-trCnMfo7.js');
+var renderer = require('./renderer-W7BRtd3i.js');
+var scroll = require('./scroll-33Y1FRj4.js');
+require('./dom-DM4lO0bS.js');
 
 const IntersectionObserve = class {
     constructor(hostRef) {

package/dist/cjs/nano-masked-overflow.cjs.entry.js

@@ -3,11 +3,11 @@
  */
 'use strict';
 
-var index = require('./index-BlC8UV0T.js');
-var renderer = require('./renderer-BjTjwe8d.js');
-var dom = require('./dom-B0-coRX2.js');
+var index = require('./index-trCnMfo7.js');
+var renderer = require('./renderer-W7BRtd3i.js');
+var dom = require('./dom-DM4lO0bS.js');
 var throttle = require('./throttle-CrRDOkln.js');
-var scroll = require('./scroll-CtgMHKrt.js');
+var scroll = require('./scroll-33Y1FRj4.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}.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}";
 
@@ -317,7 +317,7 @@ const MaskedOverflow = class {
         }
     }
     render() {
-        return (renderer.h(index.Host, { key: '4f88bf0a4cd8f01c745685afe7b0c5f9fc9b26b2', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, renderer.h("div", { key: 'b7894467af4981a53bb0540998f9fdee3b5e4db7', part: "base", class: {
+        return (renderer.h(index.Host, { key: 'ce255683796d356286e4c9cbd7f7ea34db77190b', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, renderer.h("div", { key: 'd1ed2c18f2b317721e2cab42694a1f203d5d807a', part: "base", class: {
                 onav: true,
                 [`onav--${this.orientation}`]: true,
                 'onav--has-scroll-controls': this.hasScrollControls,
@@ -326,12 +326,12 @@ const MaskedOverflow = class {
                 'onav--no-transitions': this.instantReCalc,
                 'onnav--has-indicator': this.showIndicator,
                 'onnav--hide-scrollbars': this.hideScrollbars && this.hideScrollbars !== 'false',
-            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, renderer.h("div", { key: 'c12e39f98ea4750a0709c822f1827fd3a4580ca5', class: "onav__nav" }, this.scrollControls && (renderer.h("nano-icon-button", { key: '9f45887d61630f41398e872bb7d3538f87fcc7c0', part: "scroll-button scroll-button-prev", class: {
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, renderer.h("div", { key: 'e1acd4b76844e48ef2700500977fcc227323fa92', class: "onav__nav" }, this.scrollControls && (renderer.h("nano-icon-button", { key: '30e8801e0b1ba96675ab129e5371eb6e1edff420', part: "scroll-button scroll-button-prev", class: {
                 'onav__scroll-button': true,
                 'onav__scroll-button--start': true,
             }, ref: (btn) => (this.startBtn = btn), onClick: () => this.handleBtnClick(false), label: "Click to scroll", iconName: this.orientation === 'horizontal'
                 ? 'light/chevron-left'
-                : 'light/chevron-up' })), renderer.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 }, renderer.h("div", { key: '1018eef93e68d13faf4c7898a69f6723e772ec3c', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (renderer.h("div", { key: 'ab21bd04d6bb661f716d835ee4bc0d111fed863f', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), renderer.h("slot", { key: 'bb66cabd059551b392e5049eb8d18f83de8eb818', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (renderer.h("nano-icon-button", { key: 'bd48cb7171ee606a9c368a36090cefb3e61337bd', part: "scroll-button scroll-button-next", class: {
+                : 'light/chevron-up' })), renderer.h("div", { key: '494da67346cf9ec3217eb46aad8e0bbfca7e5842', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, renderer.h("div", { key: '98e0cc7a8b0ab82440b0110e8f4d018b02612901', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (renderer.h("div", { key: '9f1622b178b5cfcf0c44cacb9f5dd3465306b9f8', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), renderer.h("slot", { key: 'd11134d63b8a733b7d9e0e74283eb463be032c82', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (renderer.h("nano-icon-button", { key: '2630de597a4c38e555eb95dfc19033a517ccdee2', part: "scroll-button scroll-button-next", class: {
                 'onav__scroll-button': true,
                 'onav__scroll-button--end': true,
             }, ref: (btn) => (this.endBtn = btn), onClick: () => this.handleBtnClick(true), label: "Click to scroll", iconName: this.orientation === 'horizontal'

package/dist/cjs/nano-menu-drawer.cjs.entry.js

@@ -3,11 +3,12 @@
  */
 'use strict';
 
-var index = require('./index-BlC8UV0T.js');
-var dom = require('./dom-B0-coRX2.js');
-var renderer = require('./renderer-BjTjwe8d.js');
+var index = require('./index-trCnMfo7.js');
+var dom = require('./dom-DM4lO0bS.js');
+var renderer = require('./renderer-W7BRtd3i.js');
+var slot = require('./slot-CppKo1Tn.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 = class {
     constructor(hostRef) {
@@ -15,15 +16,12 @@ const MenuDrawer = class {
     }
     containerDiv;
     contentDiv;
-    measureEle;
     globalNav;
     children = [];
-    io;
-    currHeight = window.innerHeight;
+    ro;
+    slotCtrl = new slot.HasSlotController(this, 'foot');
     get el() { return index.getElement(this); }
     reset = false;
-    widthOk = true;
-    heightOk = true;
     isLoading = true;
     hide = false;
     /**
@@ -31,60 +29,52 @@ const MenuDrawer = class {
      */
     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)
+        {
             localStorage.setItem('nanoMenuDrawerOpen', this.open.toString());
-        if (this.containerDiv) {
-            if (this.open)
-                index.writeTask(() => (this.containerDiv.style.width = this.contentDiv.scrollWidth + 'px'));
-            else
-                index.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;
+                index.writeTask(() => {
+                    this.containerDiv.style.width = menuWidth + 'px';
+                    this.containerDiv.style.setProperty('--menu-width', (menuWidth) + 'px');
+                    this.containerDiv.style.setProperty('--scrollbar-width', scrollbarWidth + 'px');
+                });
+            }
+            else {
+                index.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(renderer.transformTag('nano-nav-item'));
         // dimensions not cool - move items out of element and into global nav
+        const currNavItems = this.el.querySelectorAll(renderer.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)
@@ -98,92 +88,66 @@ const MenuDrawer = class {
         });
         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 || false)
+            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() !== renderer.transformTag('nano-global-nav'))
+    attachRO() {
+        if (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 = dom.closestElement(renderer.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.');
+        }
+        {
             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() {
-        {
-            window.addEventListener('resize', this.onWindowResize);
-        }
+        this.attachRO();
     }
     disconnectedCallback() {
-        window.removeEventListener('resize', this.onWindowResize);
-        if (this.io) {
-            this.io.disconnect();
-            this.io = null;
+        {
+            this.ro?.disconnect();
+            this.ro = undefined;
         }
     }
     render() {
-        return (renderer.h(index.Host, { key: 'ce58d5db4ed3a23557189fbc3eb2cf0a0ad32edd', class: {
+        return (renderer.h(index.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 }, renderer.h("div", { key: 'a68d7698be7747a6a191a44364b615c3866f8160', ref: (div) => (this.containerDiv = div), class: "container" }, renderer.h("div", { key: 'f6c92461b79e0b3e44f138736ef65089680101a8', class: "content-wrap" }, renderer.h("nav", { key: '51ce192b7cbb38233baced954f4228e756052026', ref: (div) => (this.contentDiv = div), class: "content" }, renderer.h("button", { key: '5662329d6320ef44d837afc823c09beb1563c0fe', onMouseDown: this.toggle, onKeyDown: this.onToggleKeyDown, class: "collapse-btn" }, renderer.h("nano-icon", { key: '77d0e152d06593f3999072a1b557673a8ddc8a72', name: "light/right-to-line", "aria-label": "collapse / expand" })), renderer.h("slot", { key: '8369d8882e41547e088ec41401cc2273efb2b59a' }), renderer.h("div", { key: '90c996a4d1debfd4965353e5e60548605418dfbd', class: "foot" }, renderer.h("div", { key: '3ca7e34bde41f742d20edbef571400c875179858', class: "measure-ele", ref: (div) => (this.measureEle = div) }), renderer.h("slot", { key: '1b5d32415c0e727788186bd9011de394cb7b5759', name: "foot" })))))));
+            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, renderer.h("div", { key: '62bcaa0a299c8887479ec83a067eb8e2ff188de8', ref: (div) => (this.containerDiv = div), class: "container" }, renderer.h("div", { key: 'a20706de787a6e6e3b3f1ee4a5a079ed601ac2d2', class: "content-wrap" }, renderer.h("nav", { key: 'd487b8709b36b54d207f1a257564b98d12722c09', ref: (div) => (this.contentDiv = div), class: "content" }, renderer.h("div", { key: 'e1fb80d26a27fc35d2999908a3d3f264f9bb15af', class: "head" }, renderer.h("button", { key: '0778e6742189405de47c34cbe9e346c6fec4de63', onClick: this.toggle, class: "collapse-btn" }, renderer.h("nano-icon", { key: '5b53c2819fdf51f6b611d11b6ce9c8d621339308', name: "light/arrow-right-to-line" }), renderer.h("span", { key: 'b2eff692e0251e2a05a64cc93ed0635ff8659084', class: "visually-hidden" }, "collapse / expand menu"))), renderer.h("slot", { key: '7a65ca13555e4706728916e116af51cb05263ed2' }), this.slotCtrl.has('foot') && (renderer.h("div", { key: '40794aacb4185b8020e94c79dc9d47e65a637fcc', class: "foot" }, renderer.h("slot", { key: 'f5b7d990d47e336ad725b0c3c3726d65f8143122', name: "foot" }))))))));
     }
     static get watchers() { return {
-        "open": ["openChange"],
-        "widthOk": ["widthChange"],
-        "hideHeight": ["hideHeightChange"]
+        "open": ["openChange"]
     }; }
 };
 MenuDrawer.style = menuDrawerCss;

package/dist/cjs/nano-more-less.cjs.entry.js

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

package/dist/cjs/nano-nav-item.cjs.entry.js

@@ -3,11 +3,11 @@
  */
 'use strict';
 
-var index = require('./index-BlC8UV0T.js');
-var dom = require('./dom-B0-coRX2.js');
-var tabbable = require('./tabbable-D33Xh_1b.js');
-var renderer = require('./renderer-BjTjwe8d.js');
-var slot = require('./slot-CoMwYflw.js');
+var index = require('./index-trCnMfo7.js');
+var dom = require('./dom-DM4lO0bS.js');
+var tabbable = require('./tabbable-CQ4-mXv0.js');
+var renderer = require('./renderer-W7BRtd3i.js');
+var slot = require('./slot-CppKo1Tn.js');
 var activeElement = require('./active-element-DB7WRcF-.js');
 
 /**
@@ -82,7 +82,7 @@ const displayTransition = (el, options) => {
     });
 };
 
-const navItemCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:contents}.navitem{background:inherit;color:inherit}a,button{all:unset;color:inherit;text-decoration:inherit;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:var(--padding);gap:var(--nano-spacing-md);inline-size:100%;box-sizing:border-box;background:inherit}a:hover,a:focus,a:active,button:hover,button:focus,button:active{color:inherit}a:focus-visible,button:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}a[disabled],button[disabled]{opacity:0.5;cursor:not-allowed}.navitem__label{margin-inline-end:auto}.navitem__modal{all:unset;display:none;position:absolute;color:initial;opacity:0;transition:var(--nano-transition-fast) ease}.navitem--open .navitem__modal{opacity:1}::slotted([slot=close-button]){all:unset}::slotted([slot=close-button]):focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{padding-block:calc(var(--padding-top) / 2) calc(var(--padding-bottom) / 2);padding-inline:var(--padding-start) 0;display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;inline-size:100%}:host(.nano-menu-drawer) .navitem__label{padding-inline:0 var(--padding-end);text-align:start;flex:0 1 auto;min-inline-size:130px;inline-size:130px}:host(.nano-menu-drawer)::slotted(.nano-icon[slot=icon-start]),:host(.nano-menu-drawer) ::slotted(.nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0;font-size:var(--icon-size);inline-size:var(--icon-size);flex:0 0 var(--icon-size)}:host(.nano-menu-drawer)::slotted(.nano-icon[slot=icon-end]),:host(.nano-menu-drawer) ::slotted(.nano-icon[slot=icon-end]){padding:0 var(--padding-end) 0 0;font-size:10px;flex:0 0 20px;min-inline-size:20px}:host(.nano-menu-drawer) .navitem__modal{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);block-size:100vh;inset-inline:auto 0;inset-block:0;transform:translateX(0);z-index:-1;transition:transform 0.3s ease, opacity 0.2s ease;overflow-y:auto;inline-size:var(--secondary-width, 400px);max-inline-size:62vw;opacity:1;padding-inline:var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));padding-block:var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom))}:host(.nano-menu-drawer) .navitem__modal:focus{outline:none}.navitem--open :host(.nano-menu-drawer) .navitem__modal{transform:translateX(100%)}:host(.nano-menu-drawer) .notification{position:relative}:host(.nano-menu-drawer) .notification::after{content:\"\";display:block;position:absolute;inline-size:6px;block-size:6px;background-color:#ef4135;inset-inline-start:10px;inset-block-start:7px;border-radius:50%}@media (width >= 52em){:host(.nano-menu-drawer) .notification::after{inline-size:7px;block-size:7px;inset-inline-start:8px;inset-block-start:5px}}:host(.nano-menu-drawer[dir=rtl]) .navitem__modal{transform:translateX(0%)}.navitem--open :host(.nano-menu-drawer[dir=rtl]) .navitem__modal{transform:translateX(-100%);opacity:1}";
+const navItemCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:contents}.navitem{background:inherit;color:inherit}a,button{all:unset;color:inherit;text-decoration:inherit;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:var(--padding);gap:var(--nano-spacing-md);inline-size:100%;box-sizing:border-box;background:inherit}a:hover,a:focus,a:active,button:hover,button:focus,button:active{color:inherit}a:focus-visible,button:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}a[disabled],button[disabled]{opacity:0.5;cursor:not-allowed}.navitem__label{margin-inline-end:auto}.navitem__modal{all:unset;display:none;position:absolute;color:initial;opacity:0;transition:var(--nano-transition-fast) ease}.navitem--open .navitem__modal{opacity:1}::slotted([slot=close-button]){all:unset}::slotted([slot=close-button]):focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}";
 
 const NavItem = class {
     constructor(hostRef) {
@@ -112,8 +112,6 @@ const NavItem = class {
     checkbox = false;
     /** Whether secondary menus should close on blur */
     closeOnBlur = true;
-    /** Will show an indicator badge - only when placed in a nano-menu-draw */
-    notification = false;
     /** Emitted when the nav item closes it's secondary navigation. */
     nanoClose;
     /** Emitted when the nav item opens it's secondary navigation. */
@@ -242,24 +240,22 @@ const NavItem = class {
         this.openChange();
     }
     render() {
-        return (renderer.h(index.Host, { key: '7554eb7a4a66fc4f899b40b35265245a3be931f8', class: {
+        return (renderer.h(index.Host, { key: '815fb74d8f91f3efb7c2582439b1e8f4f4aa905d', class: {
                 'nano-menu-drawer': this.isInMenuDrawer,
                 'nano-nav-item': true,
                 disabled: this.disabled,
-            }, role: this.host.closest('[role="menu"]') ? 'menuitem' : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, renderer.h("div", { key: '4bf288ec9f9162bb746b70b085fde42b871f93fb', class: {
+            }, role: this.host.closest('[role="menu"]') ? 'menuitem' : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, renderer.h("div", { key: '63a0f2086fd81b4cbea08c385de2e493d7c8f926', class: {
                 navitem: true,
                 'navitem--open': this.open,
                 'navitem--active': this.selected,
-            }, part: "trigger-wrapper" }, this.href && !this.disabled && (renderer.h("a", { key: 'a9bf5adf3da060452ed58e2c6e1eba45168815a3', part: "trigger trigger--anchor", target: this.target, ref: (a) => (this.controlElement = a), href: this.href, class: {
+            }, part: "trigger-wrapper" }, this.href && !this.disabled && (renderer.h("a", { key: 'e50cab85eba47cba80ff30a07bcab83c00595915', part: "trigger trigger--anchor", target: this.target, ref: (a) => (this.controlElement = a), href: this.href, class: {
                 navitem__trigger: true,
-                notification: this.notification,
-            } }, renderer.h("slot", { key: '47cdd2e84dd51f236675351c599d8e9f9bf66ede', name: "icon-start" }), renderer.h("span", { key: 'a15d804a252ed532501fb08536ed5ce8a3b42e47', class: "navitem__label", part: "label" }, renderer.h("slot", { key: 'ea37d813d0fd15bd457930b61d06cd97d64fce35', onSlotchange: this.handleDefaultSlotChange })), renderer.h("slot", { key: '384a3212fba3d0cc3d488974dcaf53c23c3942e1', name: "icon-end" }))), (!this.href || this.disabled) && (renderer.h("button", { key: '698c4beb9cddb3b2037db40b5c9e33a276dad060', role: this.checkbox ? 'checkbox' : undefined, "aria-checked": this.checkbox ? this.selected.toString() : undefined, part: "trigger trigger--button", ref: (btn) => (this.controlElement = btn), onClick: this.handleClick, disabled: this.disabled, class: {
+            } }, renderer.h("slot", { key: '2fc43a8c964c8e34e045e0df85d5bf355b3e9b26', name: "icon-start" }), renderer.h("span", { key: '6aed9dea66e87ef15edb69971b1c97fd8d2fbe29', class: "navitem__label", part: "label" }, renderer.h("slot", { key: '96f26809714cbe44effe57851814e1e24a6ad851', onSlotchange: this.handleDefaultSlotChange })), renderer.h("slot", { key: 'f43de3bfdb6cdea0f93fe248d873c73062a3034b', name: "icon-end" }))), (!this.href || this.disabled) && (renderer.h("button", { key: '9db35da35c662d588729976d1be17a07ed855642', role: this.checkbox ? 'checkbox' : undefined, "aria-checked": this.checkbox ? this.selected.toString() : undefined, part: "trigger trigger--button", ref: (btn) => (this.controlElement = btn), onClick: this.handleClick, disabled: this.disabled, class: {
                 navitem__trigger: true,
-                notification: this.notification,
-            } }, renderer.h("slot", { key: 'c01a71dfaeb867d2792146110fdde1dd134b7f71', name: "icon-start" }), renderer.h("span", { key: '6a48071ba10f1407350e87958ed491f704714ea8', class: "navitem__label", part: "label" }, renderer.h("slot", { key: '246f807c0a03a8805fea87023f48de2f5fa7a7a0', onSlotchange: this.handleDefaultSlotChange })), renderer.h("slot", { key: '6a246213800a4425464ac41aefe9362e327d412f', name: "icon-end" }))), this.slotCtrl.has('secondary') && !this.disabled && (renderer.h("div", { key: '8928988fd43de734785801c9fc7707fb7efa33c3', part: "modal", class: {
+            } }, renderer.h("slot", { key: '394a189a9d5d8b65607bd6089c9a08cdeed8e48a', name: "icon-start" }), renderer.h("span", { key: '28b56da5d700f7654c2d42fda996babff390f92e', class: "navitem__label", part: "label" }, renderer.h("slot", { key: '13a35382772f7ee79af116c500eba5d4fd4a25ad', onSlotchange: this.handleDefaultSlotChange })), renderer.h("slot", { key: '158f3590fcf2025c3c53bd3d3f9dbeddbd2829ba', name: "icon-end" }))), this.slotCtrl.has('secondary') && !this.disabled && (renderer.h("div", { key: '44ab1a0d6930f5d60b8540157911d365821f611c', part: "modal", class: {
                 navitem__modal: true,
                 'navitem__modal--open': this.didOpen,
-            }, ref: (div) => (this.secondaryDiv = div), tabIndex: -1 }, renderer.h("div", { key: 'eca197afa8cb297eeafc4b7a55ffb6fb288c498c', class: "navitem__modal-content", part: `modal-content ${this.didOpen ? 'modal-content--open' : ''}` }, this.slotCtrl.has('close-button') && (renderer.h("div", { key: '5a774cf15677b3848f80c0cf5bee87da44e3ca04', part: "close-button", onClick: this.closeSecondary }, renderer.h("slot", { key: '57a08ef1239b6c29241524e3c7ac977c78c910d5', name: "close-button" }))), renderer.h("slot", { key: '6c35ed89b61461fcc294cddc022c57255558a63b', name: "secondary" })), renderer.h("div", { key: '163003649197f1ed341836e73e7acd50c7abc640', class: "navitem__modal-mask", onClick: this.closeSecondary, part: `modal-mask ${this.didOpen ? 'modal-mask--open' : ''}` }))))));
+            }, ref: (div) => (this.secondaryDiv = div), tabIndex: -1 }, renderer.h("div", { key: '758dc3ed99502ff459b187fb42dc6f1c83f335e8', class: "navitem__modal-content", part: `modal-content ${this.didOpen ? 'modal-content--open' : ''}` }, this.slotCtrl.has('close-button') && (renderer.h("div", { key: 'fb30657f31352b234b8f5f9f7dea697b663dc05d', part: "close-button", onClick: this.closeSecondary }, renderer.h("slot", { key: 'de6bdeb04bf0543c2200cca7a7a1d8d70032d0ed', name: "close-button" }))), renderer.h("slot", { key: '45c2c6ce36042b43c8177343e238392193a16367', name: "secondary" })), renderer.h("div", { key: 'd9ccc26e9f2675dcf5fc9000bc2759fd48247fe2', class: "navitem__modal-mask", onClick: this.closeSecondary, part: `modal-mask ${this.didOpen ? 'modal-mask--open' : ''}` }))))));
     }
     static get watchers() { return {
         "open": ["openChange"],