@nordhealth/components 4.26.0 → 4.26.2

package/lib/Layout.js

@@ -1,4 +1,4 @@
-import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{l as t}from"./NavToggle-DzKbd-El.js";import{css as n,LitElement as a,html as o,nothing as i}from"lit";import{query as s,state as r,property as l,customElement as d}from"lit/decorators.js";import{classMap as h}from"lit/directives/class-map.js";import{styleMap as c}from"lit/directives/style-map.js";import{D as v}from"./DirectionController-ChvNGESZ.js";import{E as p}from"./EventController-BBOmvfLa.js";import{L as u}from"./LightDismissController-4pH8cdko.js";import{S as g}from"./SlotController-Z6eG7LSZ.js";import{o as b}from"./observe-D0n0zOfU.js";import{c as y}from"./cond-CI1KbneT.js";import{f as m}from"./fsm-Bq5jMQrK.js";import{c as f}from"./number-Dg2vCfGd.js";import{s as w}from"./storage-CGZ-YX4-.js";import{s as k}from"./Component-DSU3Qp0O.js";import{s as z}from"./Sticky-DqnqENYN.js";import x from"./Icon.js";import{NavOpenChangeEvent as S}from"./NavOpenChangeEvent.js";import{NavResizeEvent as N}from"./NavResizeEvent.js";import"./Tooltip.js";import"lit/directives/ref.js";import"./FocusableMixin-BlQLNPdJ.js";import"./LocalizeController.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./Button.js";import"./LightDomController-DIwtVelV.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";import"lit/directives/if-defined.js";import"./VisuallyHidden.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"./events-Bv6wNHwJ.js";import"./positioning-D-K8Mueq.js";const C=()=>!0;class _{constructor(e,t){e.addController(this),this.options={enabled:C,...t}}hostConnected(){"undefined"!=typeof BroadcastChannel&&(this.channel=new BroadcastChannel(this.options.channelName),this.channel.addEventListener("message",this))}hostDisconnected(){var e,t;null===(e=this.channel)||void 0===e||e.removeEventListener("message",this),null===(t=this.channel)||void 0===t||t.close()}handleEvent(e){this.options.enabled()&&this.options.onMessage(e.data)}post(e){var t;this.options.enabled()&&(null===(t=this.channel)||void 0===t||t.postMessage(e))}}const T=n`:host{--_n-layout-padding:var(--n-layout-padding, var(--n-space-l));--_n-layout-drawer-inline-size:var(--n-layout-drawer-inline-size, 320px);--_n-layout-drawer-min-inline-size:var(--n-layout-drawer-min-inline-size, 0px);--_n-layout-background-color:var(--n-layout-background-color, var(--n-color-background));--_n-layout-nav-border-color:var(--n-layout-nav-border-color, var(--n-color-border));--_n-layout-nav-transition-duration:var(--n-transition-mobile);--_n-layout-header-size:var(--n-layout-header-size, var(--n-space-xxl));--_n-layout-header-size-s:calc(var(--n-space-xl) + var(--n-space-m));--_n-layout-footer-size:var(--n-space-xxl);--n-layout-main-min-inline-size:0;background:var(--_n-layout-background-color);color:var(--n-color-text);min-block-size:100vh}.n-layout{block-size:calc(100vh - var(--n-sticky-top) - var(--n-layout-block-size-offset,0px))}.n-layout-main,.n-layout-nav{background:var(--_n-layout-background-color);min-block-size:100%}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--_n-layout-nav-width);z-index:var(--n-layout-nav-z-index,var(--n-index-top-bar));inset-block-start:0;inset-inline-start:0;inset-block-end:0;transform:translateX(var(--n-nav-transform));box-shadow:var(--n-box-shadow-nav)}.n-layout-main{position:relative}main{padding:var(--_n-layout-padding)}.n-has-top-bar{--_n-sticky-top:var(--_n-layout-header-size)}:host([sticky]) .n-has-header{--_n-sticky-size:var(--_n-layout-header-size)}:host([sticky-footer]) .n-has-footer slot[name=footer]::slotted(*){position:fixed;display:block;inset-inline-start:0!important;inset-inline-end:0;z-index:var(--n-layout-sticky-footer-z-index,calc(var(--n-index-top-bar,1000) + 1))}@media (min-width:768px){:host([sticky-footer]) .n-has-drawer.n-has-footer slot[name=footer]::slotted(*){--n-footer-padding-inline-end:calc(
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{l as t}from"./NavToggle-DzKbd-El.js";import{css as n,LitElement as a,html as o,nothing as i}from"lit";import{query as s,state as r,property as l,customElement as d}from"lit/decorators.js";import{classMap as h}from"lit/directives/class-map.js";import{styleMap as c}from"lit/directives/style-map.js";import{D as v}from"./DirectionController-ChvNGESZ.js";import{E as p}from"./EventController-BBOmvfLa.js";import{L as u}from"./LightDismissController-4pH8cdko.js";import{S as m}from"./SlotController-Z6eG7LSZ.js";import{o as y}from"./observe-D0n0zOfU.js";import{c as g}from"./cond-CI1KbneT.js";import{f as b}from"./fsm-Bq5jMQrK.js";import{c as f}from"./number-Dg2vCfGd.js";import{s as w}from"./storage-CGZ-YX4-.js";import{s as z}from"./Component-DSU3Qp0O.js";import{s as k}from"./Sticky-DqnqENYN.js";import x from"./Icon.js";import{NavOpenChangeEvent as S}from"./NavOpenChangeEvent.js";import{NavResizeEvent as N}from"./NavResizeEvent.js";import"./Tooltip.js";import"lit/directives/ref.js";import"./FocusableMixin-BlQLNPdJ.js";import"./LocalizeController.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./Button.js";import"./LightDomController-DIwtVelV.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";import"lit/directives/if-defined.js";import"./VisuallyHidden.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"./events-Bv6wNHwJ.js";import"./positioning-D-K8Mueq.js";const _=()=>!0;class C{constructor(e,t){e.addController(this),this.options={enabled:_,...t}}hostConnected(){"undefined"!=typeof BroadcastChannel&&(this.channel=new BroadcastChannel(this.options.channelName),this.channel.addEventListener("message",this))}hostDisconnected(){var e,t;null===(e=this.channel)||void 0===e||e.removeEventListener("message",this),null===(t=this.channel)||void 0===t||t.close()}handleEvent(e){this.options.enabled()&&this.options.onMessage(e.data)}post(e){var t;this.options.enabled()&&(null===(t=this.channel)||void 0===t||t.postMessage(e))}}const W=n`:host{--_n-layout-padding:var(--n-layout-padding, var(--n-space-l));--_n-layout-drawer-inline-size:var(--n-layout-drawer-inline-size, 320px);--_n-layout-drawer-min-inline-size:var(--n-layout-drawer-min-inline-size, 0px);--_n-layout-background-color:var(--n-layout-background-color, var(--n-color-background));--_n-layout-nav-border-color:var(--n-layout-nav-border-color, var(--n-color-border));--_n-layout-nav-transition-duration:var(--n-transition-mobile);--_n-layout-header-size:var(--n-layout-header-size, var(--n-space-xxl));--_n-layout-header-size-s:calc(var(--n-space-xl) + var(--n-space-m));--_n-layout-footer-size:var(--n-space-xxl);--n-layout-main-min-inline-size:0;background:var(--_n-layout-background-color);color:var(--n-color-text);min-block-size:100vh}.n-layout{block-size:calc(100vh - var(--n-sticky-top) - var(--n-layout-block-size-offset,0px))}.n-layout-main,.n-layout-nav{background:var(--_n-layout-background-color);min-block-size:100%}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--_n-layout-nav-width);z-index:var(--n-layout-nav-z-index,var(--n-index-top-bar));inset-block-start:0;inset-inline-start:0;inset-block-end:0;transform:translateX(var(--n-nav-transform));box-shadow:var(--n-box-shadow-nav)}[data-screen=wide][data-collapse-mode=hide]:is(:not([data-nav=opened],[data-nav=closed])) .n-layout-nav{inline-size:fit-content;min-inline-size:var(--_n-layout-nav-min-width);max-inline-size:min(var(--_n-layout-nav-max-width),100dvw)}[data-screen=wide][data-collapse-mode=hide]:is(:not([data-nav=opened],[data-nav=closed])) .n-layout-nav>slot[name=nav]::slotted(*){inline-size:100%}.n-layout-main{position:relative}main{padding:var(--_n-layout-padding)}.n-has-top-bar{--_n-sticky-top:var(--_n-layout-header-size)}:host([sticky]) .n-has-header{--_n-sticky-size:var(--_n-layout-header-size)}:host([sticky-footer]) .n-has-footer slot[name=footer]::slotted(*){position:fixed;display:block;inset-inline-start:0;inset-inline-end:0;z-index:var(--n-layout-sticky-footer-z-index,calc(var(--n-index-top-bar,1000) + 1))}:host([sticky-footer][nav-open]) .n-has-footer slot[name=footer]::slotted(*){inset-inline-start:250px!important}@media (min-width:768px){:host([sticky-footer]) .n-has-drawer.n-has-footer slot[name=footer]::slotted(*){--n-footer-padding-inline-end:calc(
       var(--n-footer-padding-inline, var(--n-space-l)) + var(--_n-layout-drawer-min-inline-size, 0px)
-    )}}aside{position:fixed;z-index:var(--n-index-nav);inset-block:0;inset-inline-end:0;inline-size:var(--_n-layout-drawer-inline-size);max-inline-size:100%;background:var(--n-layout-drawer-background-color,var(--n-color-surface));box-shadow:var(--n-layout-drawer-box-shadow,var(--n-box-shadow-nav))}:host([sticky-footer]) .n-has-footer aside{inset-block-end:var(--n-layout-footer-block-size,var(--_n-layout-footer-size))}.n-has-drawer .n-layout-content{margin-inline-end:var(--_n-layout-drawer-min-inline-size)}@media (min-width:1240px){:host{--n-layout-main-min-inline-size:600px}.n-has-drawer .n-layout-content{margin-inline-end:var(--_n-layout-drawer-inline-size)}aside{box-shadow:var(--n-layout-drawer-box-shadow-wide,var(--n-box-shadow-header));border-inline-start:var(--n-layout-drawer-border-inline-start-width,0) solid var(--n-layout-drawer-border-inline-start-color,var(--n-color-border))}}slot[name=drawer]::slotted(*){block-size:100%!important}.n-has-top-bar aside{inset-block-start:var(--_n-layout-header-size)}:is(.n-has-top-bar,.n-has-header) ::slotted(nord-notification-group){inset-block-start:var(--_n-layout-header-size)}:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(-110%)}.n-rtl:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(110%)}[data-screen=wide][data-collapse-mode=rail]:is([data-nav=closed],[data-nav=peek],[data-nav=unpeek],[data-nav=wait]) .n-layout-nav{transform:none;inline-size:var(--_n-layout-nav-rail-width);inset-block:0;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:1px solid var(--_n-layout-nav-border-color);box-shadow:none;overflow:visible}[data-screen=wide][data-collapse-mode=rail]:not([data-nav=opened]) .n-layout-main{margin-inline-start:var(--_n-layout-nav-rail-width)}[data-screen=wide][data-collapse-mode=rail]:not([data-nav=opened]) .n-top-bar-container{inset-inline-start:var(--_n-layout-nav-rail-width)}[data-screen=wide][data-collapse-mode=rail]:not([data-nav=opened]) slot[name=footer]::slotted(*){inset-inline-start:var(--_n-layout-nav-rail-width)}[data-screen=wide][data-collapse-mode=rail]:not([data-nav=opened]) .n-collapse-btn{display:flex}[data-screen=wide][data-collapse-mode=rail]:not([data-nav=opened]) .n-collapse-btn nord-icon{transform:rotate(0)}.n-rtl[data-screen=wide][data-collapse-mode=rail]:not([data-nav=opened]) .n-collapse-btn nord-icon{transform:rotate(180deg)}[data-screen=narrow] .n-layout-nav{z-index:var(--n-index-popout);transition:transform var(--_n-layout-nav-transition-duration)}[data-screen=wide]:is(:not([data-nav=opened],[data-nav=closed])) .n-layout-nav{transition:transform var(--_n-layout-nav-transition-duration);border-start-end-radius:var(--n-border-radius);border-end-end-radius:var(--n-border-radius);min-block-size:0;inset-block-start:calc(var(--n-space-m) * 4);inset-block-end:var(--n-space-l)}[data-screen=wide][data-nav=opened] .n-layout-nav{border-inline-end:1px solid var(--_n-layout-nav-border-color);box-shadow:none}[data-screen=wide][data-nav=opened]:not(.n-has-top-bar) .n-layout-nav{--n-navigation-header-padding-inline:calc(var(--n-space-l) / 1.5)}.n-has-top-bar[data-screen=wide][data-nav=opened] .n-layout-nav{--n-navigation-header-background:var(--n-color-accent-secondary);--n-navigation-header-color:var(--n-color-text-on-accent);--n-navigation-header-divider:none;--n-navigation-header-toggle-icon-color:rgb(255, 255, 255, 0.85);--n-navigation-header-focus-style:0 0 0 1px #fff inset,inset 0 0 0 100px rgb(255, 255, 255, 0.2);border-color:transparent;border-image-slice:1;border-image-source:linear-gradient(to bottom,rgb(255,255,255,.16) calc(var(--_n-layout-header-size) + 1px),var(--_n-layout-nav-border-color) calc(var(--_n-layout-header-size) + 1px));background:var(--n-color-accent-secondary);box-shadow:0 0 transparent}[data-screen=wide]:not([data-nav=opened]) .n-layout-nav{--n-navigation-header-block-size:var(--_n-layout-header-size-s);overflow:hidden}[data-screen=wide][data-nav=opened] .n-layout-main{margin-inline-start:var(--_n-layout-nav-width)}[data-screen=narrow] .n-layout-main::after{content:'';position:fixed;inset:0;z-index:var(--n-index-overlay);transition:opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);background:var(--n-color-overlay)}[data-screen=narrow]:not([data-nav=opened],[data-nav=peek],[data-nav=blocked]) .n-layout-main::after{visibility:hidden;opacity:0}.n-resize{touch-action:none;position:absolute;block-size:var(--n-layout-resize-block-size,100%);inset-block:0;margin-block:auto;inset-inline-end:-8px;inline-size:10px;background:0 0}[data-nav=opened] .n-resize,[data-screen=wide][data-collapse-mode=rail]:not([data-nav=opened]) .n-resize{cursor:col-resize}.n-resize::after{content:'';position:absolute;z-index:var(--n-index-sticky);inset-block:0;inset-inline-end:5px;inline-size:3px;background:var(--n-layout-resize-color,var(--n-color-accent));transition:opacity var(--n-transition-slowly);opacity:0}.n-resize:focus{outline:0}.n-dragging .n-resize::after,.n-resize:focus::after,[data-nav=opened] .n-resize:hover::after,[data-screen=wide][data-collapse-mode=rail]:not([data-nav=opened]) .n-resize:hover::after{opacity:1;transition-delay:.15s}@supports selector(:focus-visible){.n-resize:focus::after{opacity:0}.n-resize:focus-visible::after{opacity:1}}.n-dragging{cursor:col-resize!important;user-select:none}.n-resize-tooltip{transform:translateY(var(--n-resize-tooltip-y,0))}.n-dragging .n-resize-tooltip{visibility:hidden!important;opacity:0!important}:host([padding=none]){--_n-layout-padding:var(--n-layout-padding, 0)}.n-top-bar-container{position:fixed;inset-inline-start:var(--_n-layout-nav-width);inset-inline-end:0;inset-block-start:0;z-index:var(--n-index-top-bar)}[data-screen=narrow] .n-top-bar-container,[data-screen=wide]:not([data-nav=opened]) .n-top-bar-container{inset-inline-start:0}.n-has-top-bar{--_n-layout-header-size:var(--_n-layout-header-size-s);--n-navigation-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar :is([name=header],[name=drawer])::slotted(*){--n-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar .n-layout-main{inset-block-start:var(--_n-layout-header-size)}.n-nav-toggle-container{position:absolute;padding-inline-start:var(--n-space-s);block-size:var(--_n-layout-header-size);display:flex;align-items:center;z-index:calc(var(--n-index-top-bar) + 1)}[data-screen=narrow] .n-nav-toggle-container{padding-inline-start:var(--n-space-xs)}.n-has-top-bar .n-nav-toggle-container,:host([sticky]) .n-nav-toggle-container{position:fixed;inset-block-start:0}[data-screen=wide][data-nav=opened] .n-nav-toggle-container{display:none}:host(:not([hide-default-nav-toggle])) .n-has-nav[data-screen=wide]:not([data-nav=opened]) ::slotted(nord-top-bar),:host(:not([hide-default-nav-toggle])) .n-has-nav[data-screen=wide]:not([data-nav=opened],.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:calc(var(--n-space-l) * 1.8)}:host(:not([hide-default-nav-toggle])) .n-has-nav[data-screen=narrow] ::slotted(nord-top-bar),:host(:not([hide-default-nav-toggle])) .n-has-nav[data-screen=narrow]:not(.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:var(--n-space-xl)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)){--n-button-background-color:transparent;color:rgb(255,255,255,.85)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)):focus{--n-button-background-color:rgb(0, 0, 0, 0.2)}.n-collapse-btn{--_n-collapse-btn-size:var(--n-space-l);position:fixed;inset-inline-start:calc(var(--_n-layout-nav-width) - (var(--_n-collapse-btn-size)/ 2));inset-block-start:calc(var(--_n-layout-header-size) + (var(--_n-layout-header-size) - var(--_n-collapse-btn-size))/ 2);border-radius:var(--n-border-radius-circle);block-size:var(--_n-collapse-btn-size);inline-size:var(--_n-collapse-btn-size);display:flex;align-items:center;justify-content:center;color:var(--n-color-icon);background:var(--n-color-button);box-shadow:var(--n-box-shadow-card);border:0;z-index:var(--n-index-sticky);cursor:pointer;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly),background-color var(--n-transition-quickly),color var(--n-transition-quickly)}.n-collapse-btn:hover{background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-collapse-btn:focus{outline:0;box-shadow:0 0 0 2px var(--n-color-accent),var(--n-box-shadow)}[data-screen=narrow] .n-collapse-btn,[data-screen=wide]:not([data-nav=opened]) .n-collapse-btn{display:none}@media (hover:hover) and (pointer:fine){.n-collapse-btn{opacity:0;visibility:hidden}.n-collapse-btn:focus,.n-layout-nav:hover .n-collapse-btn{opacity:1;visibility:visible}}.n-collapse-btn nord-icon{transform:rotate(180deg)}.n-rtl .n-collapse-btn nord-icon{transform:rotate(0)}slot[name=footer]::slotted(*){inset-inline-start:var(--_n-layout-nav-width);inset-inline-end:0;inset-block-end:0}@media (min-width:1240px){.n-has-drawer slot[name=footer]::slotted(*){inset-inline-end:var(--_n-layout-drawer-inline-size)}}[data-screen=narrow] slot[name=footer]::slotted(*),[data-screen=wide]:not([data-nav=opened]) slot[name=footer]::slotted(*){inset-inline-start:0}:host([sticky-footer]) .n-has-footer .n-layout-content{padding-block-end:var(--_n-layout-footer-size)}@media (max-width:767px){:host([data-narrow-floating-drawer]) aside,:host([data-narrow-rail-bottom]) aside{inline-size:0;pointer-events:none;z-index:var(--n-layout-aside-narrow-z-index,calc(var(--n-index-top-bar,1000) + 5))}:host([sticky-footer][data-narrow-rail-bottom]) .n-has-footer slot[name=footer]::slotted(*){inset-block-end:var(--n-aside-rail-narrow-block-size,56px)}:host([data-narrow-rail-bottom]) .n-layout-content{padding-block-end:var(--n-aside-rail-narrow-block-size,56px)}:host([sticky-footer][data-narrow-rail-bottom]) .n-layout-content{padding-block-end:calc(var(--n-aside-rail-narrow-block-size,56px) + var(--n-layout-footer-block-size,var(--_n-layout-footer-size,0px)))}}`;x.registerIcon(t);let W=0;const E=250,j="undefined"!=typeof matchMedia?matchMedia("(min-width: 768px)"):{matches:!1,addEventListener(){}},M=w("nord-layout.navWidth",E),O=w("nord-layout.navWidthDefault",E),D=w("nord-layout.navOpen",!0);function $(e){for(const t of e)if(t instanceof HTMLElement&&"nord-nav-toggle"===t.localName)return t;return null}function L(e){return null!==$(e.composedPath())}const R=m({opened:{toggle:"closed",close:"closed"},closed:{toggle:"opened",open:"opened",focusin:"peek",pointerenter:"peek"},peek:{toggle:"opened",focusout:"unpeek",pointerleave:"wait",dropdownOpen:"blocked",click:"unpeek",open:"opened"},blocked:{dropdownClose:"peek",open:"opened"},wait:{toggle:"opened",focusin:"peek",pointerenter:"peek",timeout:"unpeek"},unpeek:{toggle:"opened",focusin:"peek",pointerenter:"peek",transitionend:"closed"}});let H=class extends a{constructor(){super(...arguments),this.resizeTooltipId="n-layout-resize-tip-"+ ++W,this.navSlot=new g(this,"nav"),this.drawerSlot=new g(this,"drawer"),this.topBarSlot=new g(this,"top-bar"),this.headerSlot=new g(this,"header"),this.footerSlot=new g(this,"footer"),this.dividerTooltipSlot=new g(this,"tooltip-divider"),this.direction=new v(this),this.events=new p(this),this.lightDismiss=new u(this,{isOpen:()=>"opened"===this.navState&&!this.wideScreen,onDismiss:()=>this.navTransition("close"),isDismissible:e=>e!==this.navEl}),this.applyingRemote=!1,this.broadcast=new _(this,{channelName:"nord-layout-nav-state",enabled:()=>this.syncNavState&&this.wideScreen,onMessage:e=>{this.applyingRemote=!0,"navOpen"in e&&(this.navOpen=e.navOpen),"navWidth"in e&&(this.navWidth=e.navWidth),this.updateComplete.then((()=>{this.applyingRemote=!1}))}}),this.navWidth=M.value,this.isDragging=!1,this.wideScreen=j.matches,this.persistNavState=!1,this.syncNavState=!1,this.defaultNavWidth=E,this.minNavWidth=220,this.maxNavWidth=400,this.navRailWidth=64,this.padding="m",this.sticky=!1,this.stickyFooter=!1,this.hideDefaultNavToggle=!1,this.hideCollapseButton=!1,this.toggleOnResizeClick=!1,this.collapseMode="hide",this.handleFooterSlotChange=()=>{var e,t;const n=null===(e=this.footerSlotEl)||void 0===e?void 0:e.assignedElements({flatten:!0})[0];n!==this.observedFooterElement&&(null===(t=this.footerSizeObserver)||void 0===t||t.disconnect(),this.observedFooterElement=n,n?(this.footerSizeObserver=new ResizeObserver((()=>this.publishFooterSize())),this.footerSizeObserver.observe(n),this.publishFooterSize()):this.style.removeProperty("--n-layout-footer-block-size"))},this.handleMediaQueryChange=()=>{this.wideScreen=j.matches,this.navTransition(this.wideScreen?"open":"close")},this.handleToggleClick=e=>{L(e)||this.navTransition("toggle")},this.handleHostClick=e=>{L(e)&&this.navTransition("toggle")},this.handleHostMouseOver=e=>{const t=$(e.composedPath());t&&(e.relatedTarget instanceof Node&&t.contains(e.relatedTarget)||this.handleMouseEnter())},this.handleHostMouseOut=e=>{const t=$(e.composedPath());t&&(e.relatedTarget instanceof Node&&t.contains(e.relatedTarget)||this.handleMouseLeave())},this.handleNavFocus=()=>{this.wideScreen&&"rail"===this.collapseMode||this.navTransition("focusin")},this.handleMainFocus=()=>{this.navTransition("focusout")},this.handleMouseEnter=()=>{this.wideScreen&&"rail"!==this.collapseMode&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.wideScreen&&"rail"===this.collapseMode||this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")},this.dragStartX=0,this.hasDragged=!1,this.handleResizeHoverMove=e=>{const t=e.currentTarget;if(!t||!this.resizeTooltipEl)return;const n=t.getBoundingClientRect(),a=e.clientY-(n.top+n.height/2);this.resizeTooltipEl.style.setProperty("--n-resize-tooltip-y",`${a}px`)},this.handleResizePointerLeave=()=>{var e;this.stopDragging(),null===(e=this.resizeTooltipEl)||void 0===e||e.style.removeProperty("--n-resize-tooltip-y")}}get isNarrow(){return!this.wideScreen}connectedCallback(){super.connectedCallback(),this.events.listen(j,"change",this.handleMediaQueryChange),this.addEventListener("click",this.handleHostClick),this.addEventListener("mouseover",this.handleHostMouseOver),this.addEventListener("mouseout",this.handleHostMouseOut)}disconnectedCallback(){var e,t;super.disconnectedCallback(),this.removeEventListener("click",this.handleHostClick),this.removeEventListener("mouseover",this.handleHostMouseOver),this.removeEventListener("mouseout",this.handleHostMouseOut),null===(e=this.headerSizeObserver)||void 0===e||e.disconnect(),this.headerSizeObserver=void 0,null===(t=this.footerSizeObserver)||void 0===t||t.disconnect(),this.footerSizeObserver=void 0,this.observedFooterElement=void 0,this.style.removeProperty("--n-layout-header-block-size"),this.style.removeProperty("--n-layout-footer-block-size")}firstUpdated(){"undefined"!=typeof ResizeObserver&&(this.stickyHeaderEl&&(this.headerSizeObserver=new ResizeObserver((()=>this.publishHeaderSize())),this.headerSizeObserver.observe(this.stickyHeaderEl),this.publishHeaderSize()),this.footerSlotEl&&(this.footerSlotEl.addEventListener("slotchange",this.handleFooterSlotChange),this.handleFooterSlotChange()))}publishHeaderSize(){var e,t;const n=null!==(t=null===(e=this.stickyHeaderEl)||void 0===e?void 0:e.getBoundingClientRect().height)&&void 0!==t?t:0;n>0?this.style.setProperty("--n-layout-header-block-size",`${n}px`):this.style.removeProperty("--n-layout-header-block-size")}publishFooterSize(){var e,t;const n=null!==(t=null===(e=this.observedFooterElement)||void 0===e?void 0:e.getBoundingClientRect().height)&&void 0!==t?t:0;n>0?this.style.setProperty("--n-layout-footer-block-size",`${n}px`):this.style.removeProperty("--n-layout-footer-block-size")}willUpdate(){this.hasUpdated||(Number.isFinite(this.defaultNavWidth)||(this.defaultNavWidth=E),Number.isFinite(this.minNavWidth)||(this.minNavWidth=220),Number.isFinite(this.maxNavWidth)||(this.maxNavWidth=400),O.value!==this.defaultNavWidth?(this.setNavWidth(this.defaultNavWidth),M.value=this.navWidth,O.value=this.defaultNavWidth):this.setNavWidth(this.navWidth),this.isNarrow||this.persistNavState&&!1===D.value?this.navState="closed":this.navState="opened")}render(){const{navWidth:e,navState:t,navSlot:n,headerSlot:a,footerSlot:s,topBarSlot:r,drawerSlot:l,isDragging:d,direction:v}=this,p=this.wideScreen&&"rail"===this.collapseMode&&"opened"!==t,u="opened"===t&&this.wideScreen?e:p?64:this.defaultNavWidth;return o`<div class="${h({"n-layout":!0,"n-rtl":v.isRTL,"n-dragging":d,"n-has-header":a.hasContent,"n-has-footer":s.hasContent,"n-has-top-bar":r.hasContent,"n-has-drawer":l.hasContent,"n-has-nav":n.hasContent})}" style="${c({"--_n-layout-nav-width":`${u}px`,"--_n-layout-nav-rail-width":`var(--n-layout-nav-rail-width, ${this.navRailWidth}px)`})}" data-nav="${n.hasContent?t:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}" data-collapse-mode="${this.collapseMode}"><div class="n-layout-nav" ?hidden="${n.isEmpty}" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav" @click="${this.handleNavClick}"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" aria-describedby="${y(this.dividerTooltipSlot.hasContent&&!d,this.resizeTooltipId)}" @pointerdown="${y("opened"===t||p,this.startDragging)}" @pointermove="${d?this.handleDrag:this.handleResizeHoverMove}" @pointerleave="${this.handleResizePointerLeave}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}" ?hidden="${this.isNarrow}"></div>${this.dividerTooltipSlot.hasContent?o`<nord-tooltip id="${this.resizeTooltipId}" position="inline-end" class="n-resize-tooltip"><slot name="tooltip-divider"></slot></nord-tooltip>`:i} ${this.hideCollapseButton?i:this.renderNavCollapse()}</div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleMainClick}">${n.hasContent&&!this.hideDefaultNavToggle?this.renderNavToggle():i}<div class="n-top-bar-container"><slot name="top-bar"></slot></div><div class="n-layout-content"><div class="n-sticky"><slot name="header"></slot></div><main><slot></slot></main><slot name="footer"></slot></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}renderNavToggle(){return o`<div class="n-nav-toggle-container"><slot name="nav-toggle" @click="${this.handleToggleClick}" @mouseover="${this.handleMouseEnter}" @mouseout="${this.handleMouseLeave}"><nord-nav-toggle></nord-nav-toggle></slot></div>`}renderNavCollapse(){return o`<button class="n-collapse-btn" @click="${this.handleToggleClick}"><nord-icon name="navigation-toggle-lock" size="s"></nord-icon></button>`}handleNavWidthChange(e){if(M.value=this.navWidth,null!=e){const e=this.navWidth;this.dispatchEvent(new N(e))}}handleNavStateChange(e){switch("wait"===e&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===e&&this.navEl.removeEventListener("transitionend",this.handleTransitionEnd),this.navState){case"closed":this.navOpen=!1;break;case"opened":this.navOpen=!0;break;case"wait":this.peekTimeoutId=setTimeout((()=>this.navTransition("timeout")),300);break;case"unpeek":this.navEl.addEventListener("transitionend",this.handleTransitionEnd,{once:!0})}}handleOpenChange(e){if(this.isDragging||this.setNavWidth(Math.max(this.navWidth,this.defaultNavWidth)),this.navTransition(this.navOpen?"open":"close"),this.persistNavState&&(D.value=this.navOpen),null!=e){const e=this.navOpen;this.applyingRemote||this.broadcast.post({navOpen:e}),this.dispatchEvent(new S(e))}}navTransition(e){this.navState=R.transition(this.navState,e)}handleNavClick(e){if(!e.defaultPrevented&&!this.wideScreen){const n=e.target;(e=>"nord-nav-item"===e.localName)(t=n)&&!t.hasSubNav&&this.navTransition("close")}var t}handleMainClick(){this.navTransition("click")}handleDropdownOpen(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(e){const{navWidth:t,direction:{isLTR:n}}=this;switch(e.key){case"ArrowLeft":this.setNavWidth(t+(n?-30:30));break;case"ArrowRight":this.setNavWidth(t+(n?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(this.minNavWidth);break;case"End":this.setNavWidth(this.maxNavWidth);break;default:return}this.broadcast.post({navWidth:this.navWidth}),e.preventDefault()}setNavWidth(e){this.navWidth=f(Math.round(e),this.minNavWidth,this.maxNavWidth)}startDragging(e){if(0===e.button){e.target.setPointerCapture(e.pointerId),this.isDragging=!0,this.dragStartX=e.clientX,this.hasDragged=!1}}stopDragging(){this.isDragging&&this.toggleOnResizeClick&&!this.hasDragged&&this.navTransition("toggle"),this.isDragging=!1,this.hasDragged=!1,this.broadcast.post({navWidth:this.navWidth})}handleDrag(e){if(!this.hasDragged&&Math.abs(e.clientX-this.dragStartX)<4)return;this.hasDragged=!0;const t=this.direction.isRTL?this.clientWidth-e.clientX:e.clientX;this.setNavWidth(t),this.navTransition(t>=100?"open":"close")}};H.styles=[k,z,T],e([s(".n-layout-nav",!0)],H.prototype,"navEl",void 0),e([s(".n-resize-tooltip")],H.prototype,"resizeTooltipEl",void 0),e([s(".n-sticky")],H.prototype,"stickyHeaderEl",void 0),e([s('slot[name="footer"]')],H.prototype,"footerSlotEl",void 0),e([r()],H.prototype,"navWidth",void 0),e([r()],H.prototype,"isDragging",void 0),e([r()],H.prototype,"navState",void 0),e([r()],H.prototype,"wideScreen",void 0),e([l({reflect:!0,type:Boolean,attribute:"nav-open"})],H.prototype,"navOpen",void 0),e([l({reflect:!0,type:Boolean,attribute:"persist-nav-state"})],H.prototype,"persistNavState",void 0),e([l({type:Boolean,reflect:!0,attribute:"sync-nav-state"})],H.prototype,"syncNavState",void 0),e([l({type:Number,reflect:!0,attribute:"default-nav-width"})],H.prototype,"defaultNavWidth",void 0),e([l({type:Number,reflect:!0,attribute:"min-nav-width"})],H.prototype,"minNavWidth",void 0),e([l({type:Number,reflect:!0,attribute:"max-nav-width"})],H.prototype,"maxNavWidth",void 0),e([l({type:Number,reflect:!0,attribute:"nav-rail-width"})],H.prototype,"navRailWidth",void 0),e([l({reflect:!0})],H.prototype,"padding",void 0),e([l({type:Boolean,reflect:!0})],H.prototype,"sticky",void 0),e([l({type:Boolean,reflect:!0,attribute:"sticky-footer"})],H.prototype,"stickyFooter",void 0),e([l({type:Boolean,reflect:!0,attribute:"hide-default-nav-toggle"})],H.prototype,"hideDefaultNavToggle",void 0),e([l({type:Boolean,reflect:!0,attribute:"hide-collapse-button"})],H.prototype,"hideCollapseButton",void 0),e([l({type:Boolean,reflect:!0,attribute:"toggle-on-resize-click"})],H.prototype,"toggleOnResizeClick",void 0),e([l({reflect:!0,attribute:"collapse-mode"})],H.prototype,"collapseMode",void 0),e([b("navWidth","updated")],H.prototype,"handleNavWidthChange",null),e([b("navState")],H.prototype,"handleNavStateChange",null),e([b("navOpen","updated")],H.prototype,"handleOpenChange",null),H=e([d("nord-layout")],H);var B=H;export{B as default};
+    )}}aside{position:fixed;z-index:var(--n-index-nav);inset-block:0;inset-inline-end:0;inline-size:var(--_n-layout-drawer-inline-size);max-inline-size:100%;background:var(--n-layout-drawer-background-color,var(--n-color-surface));box-shadow:var(--n-layout-drawer-box-shadow,var(--n-box-shadow-nav))}:host([sticky-footer]) .n-has-footer aside{inset-block-end:var(--n-layout-footer-block-size,var(--_n-layout-footer-size))}.n-has-drawer .n-layout-content{margin-inline-end:var(--_n-layout-drawer-min-inline-size)}@media (min-width:1240px){:host{--n-layout-main-min-inline-size:600px}.n-has-drawer .n-layout-content{margin-inline-end:var(--_n-layout-drawer-inline-size)}aside{box-shadow:var(--n-layout-drawer-box-shadow-wide,var(--n-box-shadow-header));border-inline-start:var(--n-layout-drawer-border-inline-start-width,0) solid var(--n-layout-drawer-border-inline-start-color,var(--n-color-border))}}slot[name=drawer]::slotted(*){block-size:100%!important}.n-has-top-bar aside{inset-block-start:var(--_n-layout-header-size)}:is(.n-has-top-bar,.n-has-header) ::slotted(nord-notification-group){inset-block-start:var(--_n-layout-header-size)}:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(-110%)}.n-rtl:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(110%)}[data-screen=wide][data-collapse-mode=rail]:is([data-nav=closed],[data-nav=peek],[data-nav=unpeek],[data-nav=wait]) .n-layout-nav{transform:none;inline-size:var(--_n-layout-nav-rail-width);inset-block:0;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:1px solid var(--_n-layout-nav-border-color);box-shadow:none;overflow:visible}[data-screen=wide][data-collapse-mode=rail]:not([data-nav=opened]) .n-layout-main{margin-inline-start:var(--_n-layout-nav-rail-width)}[data-screen=wide][data-collapse-mode=rail]:not([data-nav=opened]) .n-top-bar-container{inset-inline-start:var(--_n-layout-nav-rail-width)}[data-screen=wide][data-collapse-mode=rail]:not([data-nav=opened]) slot[name=footer]::slotted(*){inset-inline-start:var(--_n-layout-nav-rail-width)}[data-screen=wide][data-collapse-mode=rail]:not([data-nav=opened]) .n-collapse-btn{display:flex}[data-screen=wide][data-collapse-mode=rail]:not([data-nav=opened]) .n-collapse-btn nord-icon{transform:rotate(0)}.n-rtl[data-screen=wide][data-collapse-mode=rail]:not([data-nav=opened]) .n-collapse-btn nord-icon{transform:rotate(180deg)}[data-screen=narrow] .n-layout-nav{z-index:var(--n-index-popout);transition:transform var(--_n-layout-nav-transition-duration)}[data-screen=wide]:is(:not([data-nav=opened],[data-nav=closed])) .n-layout-nav{transition:transform var(--_n-layout-nav-transition-duration);border-start-end-radius:var(--n-border-radius);border-end-end-radius:var(--n-border-radius);min-block-size:0;inset-block-start:calc(var(--n-space-m) * 4);inset-block-end:var(--n-space-l)}[data-screen=wide][data-nav=opened] .n-layout-nav{border-inline-end:1px solid var(--_n-layout-nav-border-color);box-shadow:none}[data-screen=wide][data-nav=opened]:not(.n-has-top-bar) .n-layout-nav{--n-navigation-header-padding-inline:calc(var(--n-space-l) / 1.5)}.n-has-top-bar[data-screen=wide][data-nav=opened] .n-layout-nav{--n-navigation-header-background:var(--n-color-accent-secondary);--n-navigation-header-color:var(--n-color-text-on-accent);--n-navigation-header-divider:none;--n-navigation-header-toggle-icon-color:rgb(255, 255, 255, 0.85);--n-navigation-header-focus-style:0 0 0 1px #fff inset,inset 0 0 0 100px rgb(255, 255, 255, 0.2);border-color:transparent;border-image-slice:1;border-image-source:linear-gradient(to bottom,rgb(255,255,255,.16) calc(var(--_n-layout-header-size) + 1px),var(--_n-layout-nav-border-color) calc(var(--_n-layout-header-size) + 1px));background:var(--n-color-accent-secondary);box-shadow:0 0 transparent}[data-screen=wide]:not([data-nav=opened]) .n-layout-nav{--n-navigation-header-block-size:var(--_n-layout-header-size-s);overflow:hidden}[data-screen=wide][data-nav=opened] .n-layout-main{margin-inline-start:var(--_n-layout-nav-width)}[data-screen=narrow] .n-layout-main::after{content:'';position:fixed;inset:0;z-index:var(--n-index-overlay);transition:opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);background:var(--n-color-overlay)}[data-screen=narrow]:not([data-nav=opened],[data-nav=peek],[data-nav=blocked]) .n-layout-main::after{visibility:hidden;opacity:0}.n-resize{touch-action:none;position:absolute;block-size:var(--n-layout-resize-block-size,100%);inset-block:0;margin-block:auto;inset-inline-end:-8px;inline-size:10px;background:0 0}[data-nav=opened] .n-resize,[data-screen=wide][data-collapse-mode=rail]:not([data-nav=opened]) .n-resize{cursor:col-resize}.n-resize::after{content:'';position:absolute;z-index:var(--n-index-sticky);inset-block:0;inset-inline-end:5px;inline-size:3px;background:var(--n-layout-resize-color,var(--n-color-accent));transition:opacity var(--n-transition-slowly);opacity:0}.n-resize:focus{outline:0}.n-dragging .n-resize::after,.n-resize:focus::after,[data-nav=opened] .n-resize:hover::after,[data-screen=wide][data-collapse-mode=rail]:not([data-nav=opened]) .n-resize:hover::after{opacity:1;transition-delay:.15s}@supports selector(:focus-visible){.n-resize:focus::after{opacity:0}.n-resize:focus-visible::after{opacity:1}}.n-dragging{cursor:col-resize!important;user-select:none}.n-resize-tooltip{transform:translateY(var(--n-resize-tooltip-y,0))}.n-dragging .n-resize-tooltip{visibility:hidden!important;opacity:0!important}:host([padding=none]){--_n-layout-padding:var(--n-layout-padding, 0)}.n-top-bar-container{position:fixed;inset-inline-start:var(--_n-layout-nav-width);inset-inline-end:0;inset-block-start:0;z-index:var(--n-index-top-bar)}[data-screen=narrow] .n-top-bar-container,[data-screen=wide]:not([data-nav=opened]) .n-top-bar-container{inset-inline-start:0}.n-has-top-bar{--_n-layout-header-size:var(--_n-layout-header-size-s);--n-navigation-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar :is([name=header],[name=drawer])::slotted(*){--n-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar .n-layout-main{inset-block-start:var(--_n-layout-header-size)}.n-nav-toggle-container{position:absolute;padding-inline-start:var(--n-space-s);block-size:var(--_n-layout-header-size);display:flex;align-items:center;z-index:calc(var(--n-index-top-bar) + 1)}[data-screen=narrow] .n-nav-toggle-container{padding-inline-start:var(--n-space-xs)}.n-has-top-bar .n-nav-toggle-container,:host([sticky]) .n-nav-toggle-container{position:fixed;inset-block-start:0}[data-screen=wide][data-nav=opened] .n-nav-toggle-container{display:none}:host(:not([hide-default-nav-toggle])) .n-has-nav[data-screen=wide]:not([data-nav=opened]) ::slotted(nord-top-bar),:host(:not([hide-default-nav-toggle])) .n-has-nav[data-screen=wide]:not([data-nav=opened],.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:calc(var(--n-space-l) * 1.8)}:host(:not([hide-default-nav-toggle])) .n-has-nav[data-screen=narrow] ::slotted(nord-top-bar),:host(:not([hide-default-nav-toggle])) .n-has-nav[data-screen=narrow]:not(.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:var(--n-space-xl)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)){--n-button-background-color:transparent;color:rgb(255,255,255,.85)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)):focus{--n-button-background-color:rgb(0, 0, 0, 0.2)}.n-collapse-btn{--_n-collapse-btn-size:var(--n-space-l);position:fixed;inset-inline-start:calc(var(--_n-layout-nav-width) - (var(--_n-collapse-btn-size)/ 2));inset-block-start:calc(var(--_n-layout-header-size) + (var(--_n-layout-header-size) - var(--_n-collapse-btn-size))/ 2);border-radius:var(--n-border-radius-circle);block-size:var(--_n-collapse-btn-size);inline-size:var(--_n-collapse-btn-size);display:flex;align-items:center;justify-content:center;color:var(--n-color-icon);background:var(--n-color-button);box-shadow:var(--n-box-shadow-card);border:0;z-index:var(--n-index-sticky);cursor:pointer;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly),background-color var(--n-transition-quickly),color var(--n-transition-quickly)}.n-collapse-btn:hover{background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-collapse-btn:focus{outline:0;box-shadow:0 0 0 2px var(--n-color-accent),var(--n-box-shadow)}[data-screen=narrow] .n-collapse-btn,[data-screen=wide]:not([data-nav=opened]) .n-collapse-btn{display:none}@media (hover:hover) and (pointer:fine){.n-collapse-btn{opacity:0;visibility:hidden}.n-collapse-btn:focus,.n-layout-nav:hover .n-collapse-btn{opacity:1;visibility:visible}}.n-collapse-btn nord-icon{transform:rotate(180deg)}.n-rtl .n-collapse-btn nord-icon{transform:rotate(0)}slot[name=footer]::slotted(*){inset-inline-start:var(--_n-layout-nav-width);inset-inline-end:0;inset-block-end:0}@media (min-width:1240px){.n-has-drawer slot[name=footer]::slotted(*){inset-inline-end:var(--_n-layout-drawer-inline-size)}}[data-screen=narrow] slot[name=footer]::slotted(*),[data-screen=wide]:not([data-nav=opened]) slot[name=footer]::slotted(*){inset-inline-start:0}:host([sticky-footer]) .n-has-footer .n-layout-content{padding-block-end:var(--_n-layout-footer-size)}@media (max-width:767px){:host([data-narrow-floating-drawer]) aside,:host([data-narrow-rail-bottom]) aside{inline-size:0;pointer-events:none;z-index:var(--n-layout-aside-narrow-z-index,calc(var(--n-index-top-bar,1000) + 5))}:host([sticky-footer][data-narrow-rail-bottom]) .n-has-footer slot[name=footer]::slotted(*){inset-block-end:var(--n-aside-rail-narrow-block-size,56px)}:host([data-narrow-rail-bottom]) .n-layout-content{padding-block-end:var(--n-aside-rail-narrow-block-size,56px)}:host([sticky-footer][data-narrow-rail-bottom]) .n-layout-content{padding-block-end:calc(var(--n-aside-rail-narrow-block-size,56px) + var(--n-layout-footer-block-size,var(--_n-layout-footer-size,0px)))}}`;x.registerIcon(t);let T=0;const E=250,j="undefined"!=typeof matchMedia?matchMedia("(min-width: 768px)"):{matches:!1,addEventListener(){}},M=w("nord-layout.navWidth",E),O=w("nord-layout.navWidthDefault",E),D=w("nord-layout.navOpen",!0);function $(e){for(const t of e)if(t instanceof HTMLElement&&"nord-nav-toggle"===t.localName)return t;return null}function L(e){return null!==$(e.composedPath())}const R=b({opened:{toggle:"closed",close:"closed"},closed:{toggle:"opened",open:"opened",focusin:"peek",pointerenter:"peek"},peek:{toggle:"opened",focusout:"unpeek",pointerleave:"wait",dropdownOpen:"blocked",click:"unpeek",open:"opened"},blocked:{dropdownClose:"peek",open:"opened"},wait:{toggle:"opened",focusin:"peek",pointerenter:"peek",timeout:"unpeek"},unpeek:{toggle:"opened",focusin:"peek",pointerenter:"peek",transitionend:"closed"}});let H=class extends a{constructor(){super(...arguments),this.resizeTooltipId="n-layout-resize-tip-"+ ++T,this.navSlot=new m(this,"nav"),this.drawerSlot=new m(this,"drawer"),this.topBarSlot=new m(this,"top-bar"),this.headerSlot=new m(this,"header"),this.footerSlot=new m(this,"footer"),this.dividerTooltipSlot=new m(this,"tooltip-divider"),this.direction=new v(this),this.events=new p(this),this.lightDismiss=new u(this,{isOpen:()=>"opened"===this.navState&&!this.wideScreen,onDismiss:()=>this.navTransition("close"),isDismissible:e=>e!==this.navEl}),this.applyingRemote=!1,this.broadcast=new C(this,{channelName:"nord-layout-nav-state",enabled:()=>this.syncNavState&&this.wideScreen,onMessage:e=>{this.applyingRemote=!0,"navOpen"in e&&(this.navOpen=e.navOpen),"navWidth"in e&&(this.navWidth=e.navWidth),this.updateComplete.then((()=>{this.applyingRemote=!1}))}}),this.navWidth=M.value,this.isDragging=!1,this.wideScreen=j.matches,this.persistNavState=!1,this.syncNavState=!1,this.defaultNavWidth=E,this.minNavWidth=220,this.maxNavWidth=400,this.navRailWidth=64,this.padding="m",this.sticky=!1,this.stickyFooter=!1,this.hideDefaultNavToggle=!1,this.hideCollapseButton=!1,this.toggleOnResizeClick=!1,this.collapseMode="hide",this.handleFooterSlotChange=()=>{var e,t;const n=null===(e=this.footerSlotEl)||void 0===e?void 0:e.assignedElements({flatten:!0})[0];n!==this.observedFooterElement&&(null===(t=this.footerSizeObserver)||void 0===t||t.disconnect(),this.observedFooterElement=n,n?(this.footerSizeObserver=new ResizeObserver((()=>this.publishFooterSize())),this.footerSizeObserver.observe(n),this.publishFooterSize()):this.style.removeProperty("--n-layout-footer-block-size"))},this.handleMediaQueryChange=()=>{this.wideScreen=j.matches,this.navTransition(this.wideScreen?"open":"close")},this.handleToggleClick=e=>{L(e)||this.navTransition("toggle")},this.handleHostClick=e=>{L(e)&&this.navTransition("toggle")},this.handleHostMouseOver=e=>{const t=$(e.composedPath());t&&(e.relatedTarget instanceof Node&&t.contains(e.relatedTarget)||this.handleMouseEnter())},this.handleHostMouseOut=e=>{const t=$(e.composedPath());t&&(e.relatedTarget instanceof Node&&t.contains(e.relatedTarget)||this.handleMouseLeave())},this.handleNavFocus=()=>{this.wideScreen&&"rail"===this.collapseMode||this.navTransition("focusin")},this.handleMainFocus=()=>{this.navTransition("focusout")},this.handleMouseEnter=()=>{this.wideScreen&&"rail"!==this.collapseMode&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.wideScreen&&"rail"===this.collapseMode||this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")},this.dragStartX=0,this.hasDragged=!1,this.handleResizeHoverMove=e=>{const t=e.currentTarget;if(!t||!this.resizeTooltipEl)return;const n=t.getBoundingClientRect(),a=e.clientY-(n.top+n.height/2);this.resizeTooltipEl.style.setProperty("--n-resize-tooltip-y",`${a}px`)},this.handleResizePointerLeave=()=>{var e;this.stopDragging(),null===(e=this.resizeTooltipEl)||void 0===e||e.style.removeProperty("--n-resize-tooltip-y")}}get isNarrow(){return!this.wideScreen}connectedCallback(){super.connectedCallback(),this.events.listen(j,"change",this.handleMediaQueryChange),this.addEventListener("click",this.handleHostClick),this.addEventListener("mouseover",this.handleHostMouseOver),this.addEventListener("mouseout",this.handleHostMouseOut)}disconnectedCallback(){var e,t;super.disconnectedCallback(),this.removeEventListener("click",this.handleHostClick),this.removeEventListener("mouseover",this.handleHostMouseOver),this.removeEventListener("mouseout",this.handleHostMouseOut),null===(e=this.headerSizeObserver)||void 0===e||e.disconnect(),this.headerSizeObserver=void 0,null===(t=this.footerSizeObserver)||void 0===t||t.disconnect(),this.footerSizeObserver=void 0,this.observedFooterElement=void 0,this.style.removeProperty("--n-layout-header-block-size"),this.style.removeProperty("--n-layout-footer-block-size")}firstUpdated(){"undefined"!=typeof ResizeObserver&&(this.stickyHeaderEl&&(this.headerSizeObserver=new ResizeObserver((()=>this.publishHeaderSize())),this.headerSizeObserver.observe(this.stickyHeaderEl),this.publishHeaderSize()),this.footerSlotEl&&(this.footerSlotEl.addEventListener("slotchange",this.handleFooterSlotChange),this.handleFooterSlotChange()))}publishHeaderSize(){var e,t;const n=null!==(t=null===(e=this.stickyHeaderEl)||void 0===e?void 0:e.getBoundingClientRect().height)&&void 0!==t?t:0;n>0?this.style.setProperty("--n-layout-header-block-size",`${n}px`):this.style.removeProperty("--n-layout-header-block-size")}publishFooterSize(){var e,t;const n=null!==(t=null===(e=this.observedFooterElement)||void 0===e?void 0:e.getBoundingClientRect().height)&&void 0!==t?t:0;n>0?this.style.setProperty("--n-layout-footer-block-size",`${n}px`):this.style.removeProperty("--n-layout-footer-block-size")}willUpdate(){this.hasUpdated||(Number.isFinite(this.defaultNavWidth)||(this.defaultNavWidth=E),Number.isFinite(this.minNavWidth)||(this.minNavWidth=220),Number.isFinite(this.maxNavWidth)||(this.maxNavWidth=400),O.value!==this.defaultNavWidth?(this.setNavWidth(this.defaultNavWidth),M.value=this.navWidth,O.value=this.defaultNavWidth):this.setNavWidth(this.navWidth),this.isNarrow||this.persistNavState&&!1===D.value?this.navState="closed":this.navState="opened")}render(){const{navWidth:e,navState:t,navSlot:n,headerSlot:a,footerSlot:s,topBarSlot:r,drawerSlot:l,isDragging:d,direction:v}=this,p=this.wideScreen&&"rail"===this.collapseMode&&"opened"!==t,u="opened"===t&&this.wideScreen?e:p?64:this.defaultNavWidth;return o`<div class="${h({"n-layout":!0,"n-rtl":v.isRTL,"n-dragging":d,"n-has-header":a.hasContent,"n-has-footer":s.hasContent,"n-has-top-bar":r.hasContent,"n-has-drawer":l.hasContent,"n-has-nav":n.hasContent})}" style="${c({"--_n-layout-nav-width":`${u}px`,"--_n-layout-nav-rail-width":`var(--n-layout-nav-rail-width, ${this.navRailWidth}px)`,"--_n-layout-nav-min-width":`${this.minNavWidth}px`,"--_n-layout-nav-max-width":`${this.maxNavWidth}px`})}" data-nav="${n.hasContent?t:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}" data-collapse-mode="${this.collapseMode}"><div class="n-layout-nav" ?hidden="${n.isEmpty}" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav" @click="${this.handleNavClick}"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" aria-describedby="${g(this.dividerTooltipSlot.hasContent&&!d,this.resizeTooltipId)}" @pointerdown="${g("opened"===t||p,this.startDragging)}" @pointermove="${d?this.handleDrag:this.handleResizeHoverMove}" @pointerleave="${this.handleResizePointerLeave}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}" ?hidden="${this.isNarrow}"></div>${this.dividerTooltipSlot.hasContent?o`<nord-tooltip id="${this.resizeTooltipId}" position="inline-end" class="n-resize-tooltip"><slot name="tooltip-divider"></slot></nord-tooltip>`:i} ${this.hideCollapseButton?i:this.renderNavCollapse()}</div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleMainClick}">${n.hasContent&&!this.hideDefaultNavToggle?this.renderNavToggle():i}<div class="n-top-bar-container"><slot name="top-bar"></slot></div><div class="n-layout-content"><div class="n-sticky"><slot name="header"></slot></div><main><slot></slot></main><slot name="footer"></slot></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}renderNavToggle(){return o`<div class="n-nav-toggle-container"><slot name="nav-toggle" @click="${this.handleToggleClick}" @mouseover="${this.handleMouseEnter}" @mouseout="${this.handleMouseLeave}"><nord-nav-toggle></nord-nav-toggle></slot></div>`}renderNavCollapse(){return o`<button class="n-collapse-btn" @click="${this.handleToggleClick}"><nord-icon name="navigation-toggle-lock" size="s"></nord-icon></button>`}handleNavWidthChange(e){if(M.value=this.navWidth,null!=e){const e=this.navWidth;this.dispatchEvent(new N(e))}}handleNavStateChange(e){switch("wait"===e&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===e&&this.navEl.removeEventListener("transitionend",this.handleTransitionEnd),this.navState){case"closed":this.navOpen=!1;break;case"opened":this.navOpen=!0;break;case"wait":this.peekTimeoutId=setTimeout((()=>this.navTransition("timeout")),300);break;case"unpeek":this.navEl.addEventListener("transitionend",this.handleTransitionEnd,{once:!0})}}handleOpenChange(e){if(this.isDragging||this.setNavWidth(Math.max(this.navWidth,this.defaultNavWidth)),this.navTransition(this.navOpen?"open":"close"),this.persistNavState&&(D.value=this.navOpen),null!=e){const e=this.navOpen;this.applyingRemote||this.broadcast.post({navOpen:e}),this.dispatchEvent(new S(e))}}navTransition(e){this.navState=R.transition(this.navState,e)}handleNavClick(e){if(!e.defaultPrevented&&!this.wideScreen){const n=e.target;(e=>"nord-nav-item"===e.localName)(t=n)&&!t.hasSubNav&&this.navTransition("close")}var t}handleMainClick(){this.navTransition("click")}handleDropdownOpen(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(e){const{navWidth:t,direction:{isLTR:n}}=this;switch(e.key){case"ArrowLeft":this.setNavWidth(t+(n?-30:30));break;case"ArrowRight":this.setNavWidth(t+(n?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(this.minNavWidth);break;case"End":this.setNavWidth(this.maxNavWidth);break;default:return}this.broadcast.post({navWidth:this.navWidth}),e.preventDefault()}setNavWidth(e){this.navWidth=f(Math.round(e),this.minNavWidth,this.maxNavWidth)}startDragging(e){if(0===e.button){e.target.setPointerCapture(e.pointerId),this.isDragging=!0,this.dragStartX=e.clientX,this.hasDragged=!1}}stopDragging(){this.isDragging&&this.toggleOnResizeClick&&!this.hasDragged&&this.navTransition("toggle"),this.isDragging=!1,this.hasDragged=!1,this.broadcast.post({navWidth:this.navWidth})}handleDrag(e){if(!this.hasDragged&&Math.abs(e.clientX-this.dragStartX)<4)return;this.hasDragged=!0;const t=this.direction.isRTL?this.clientWidth-e.clientX:e.clientX;this.setNavWidth(t),this.navTransition(t>=100?"open":"close")}};H.styles=[z,k,W],e([s(".n-layout-nav",!0)],H.prototype,"navEl",void 0),e([s(".n-resize-tooltip")],H.prototype,"resizeTooltipEl",void 0),e([s(".n-sticky")],H.prototype,"stickyHeaderEl",void 0),e([s('slot[name="footer"]')],H.prototype,"footerSlotEl",void 0),e([r()],H.prototype,"navWidth",void 0),e([r()],H.prototype,"isDragging",void 0),e([r()],H.prototype,"navState",void 0),e([r()],H.prototype,"wideScreen",void 0),e([l({reflect:!0,type:Boolean,attribute:"nav-open"})],H.prototype,"navOpen",void 0),e([l({reflect:!0,type:Boolean,attribute:"persist-nav-state"})],H.prototype,"persistNavState",void 0),e([l({type:Boolean,reflect:!0,attribute:"sync-nav-state"})],H.prototype,"syncNavState",void 0),e([l({type:Number,reflect:!0,attribute:"default-nav-width"})],H.prototype,"defaultNavWidth",void 0),e([l({type:Number,reflect:!0,attribute:"min-nav-width"})],H.prototype,"minNavWidth",void 0),e([l({type:Number,reflect:!0,attribute:"max-nav-width"})],H.prototype,"maxNavWidth",void 0),e([l({type:Number,reflect:!0,attribute:"nav-rail-width"})],H.prototype,"navRailWidth",void 0),e([l({reflect:!0})],H.prototype,"padding",void 0),e([l({type:Boolean,reflect:!0})],H.prototype,"sticky",void 0),e([l({type:Boolean,reflect:!0,attribute:"sticky-footer"})],H.prototype,"stickyFooter",void 0),e([l({type:Boolean,reflect:!0,attribute:"hide-default-nav-toggle"})],H.prototype,"hideDefaultNavToggle",void 0),e([l({type:Boolean,reflect:!0,attribute:"hide-collapse-button"})],H.prototype,"hideCollapseButton",void 0),e([l({type:Boolean,reflect:!0,attribute:"toggle-on-resize-click"})],H.prototype,"toggleOnResizeClick",void 0),e([l({reflect:!0,attribute:"collapse-mode"})],H.prototype,"collapseMode",void 0),e([y("navWidth","updated")],H.prototype,"handleNavWidthChange",null),e([y("navState")],H.prototype,"handleNavStateChange",null),e([y("navOpen","updated")],H.prototype,"handleOpenChange",null),H=e([d("nord-layout")],H);var B=H;export{B as default};
 //# sourceMappingURL=Layout.js.map

package/lib/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","sources":["../src/common/controllers/BroadcastChannelController.ts","../src/layout/Layout.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit'\n\ninterface Options<T> {\n  channelName: string\n  onMessage: (message: T) => void\n  enabled?: () => boolean\n}\n\nconst defaultEnabled = () => true\n\nexport class BroadcastChannelController<T> implements ReactiveController {\n  private channel?: BroadcastChannel\n  private options: Required<Options<T>>\n\n  constructor(host: ReactiveControllerHost, options: Options<T>) {\n    host.addController(this)\n    this.options = { enabled: defaultEnabled, ...options }\n  }\n\n  hostConnected(): void {\n    if (typeof BroadcastChannel !== 'undefined') {\n      this.channel = new BroadcastChannel(this.options.channelName)\n      this.channel.addEventListener('message', this)\n    }\n  }\n\n  hostDisconnected(): void {\n    this.channel?.removeEventListener('message', this)\n    this.channel?.close()\n  }\n\n  handleEvent(event: MessageEvent<T>) {\n    if (this.options.enabled()) {\n      this.options.onMessage(event.data)\n    }\n  }\n\n  post(message: T) {\n    if (this.options.enabled()) {\n      this.channel?.postMessage(message)\n    }\n  }\n}\n","import type { Events, States } from '../common/fsm.js'\nimport type NavItem from '../nav-item/NavItem.js'\nimport * as lockIcon from '@nordhealth/icons/lib/assets/navigation-toggle-lock.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { BroadcastChannelController } from '../common/controllers/BroadcastChannelController.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport { LightDismissController } from '../common/controllers/LightDismissController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { cond } from '../common/directives/cond.js'\nimport { fsm } from '../common/fsm.js'\nimport { clamp } from '../common/number.js'\nimport { storage } from '../common/storage.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport stickyStyle from '../common/styles/Sticky.css'\n\nimport Icon from '../icon/Icon.js'\nimport style from './Layout.css'\nimport { NavOpenChangeEvent } from './NavOpenChangeEvent.js'\nimport { NavResizeEvent } from './NavResizeEvent.js'\nimport '../nav-toggle/NavToggle.js'\nimport '../tooltip/Tooltip.js'\n\nIcon.registerIcon(lockIcon)\n\nlet resizeTooltipIdCounter = 0\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RAIL_WIDTH = 64\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\nconst NAV_RESIZE_DRAG_THRESHOLD = 4\n\nconst mediaQuery\n  = typeof matchMedia !== 'undefined'\n    ? matchMedia('(min-width: 768px)')\n    : ({\n        matches: false,\n        addEventListener() {\n          /* noop */\n        },\n      } as unknown as MediaQueryList)\n\nconst navWidthStore = storage('nord-layout.navWidth', NAV_DEFAULT_WIDTH)\n// Tracks the last `default-nav-width` we wrote, so we can re-seed the\n// stored width when consumers change the default between loads.\n// Initial default matches NAV_DEFAULT_WIDTH so existing consumers that\n// never set `default-nav-width` get no re-seed on upgrade — their users'\n// persisted widths are preserved.\nconst navWidthDefaultStore = storage('nord-layout.navWidthDefault', NAV_DEFAULT_WIDTH)\nconst navOpenStore = storage('nord-layout.navOpen', true)\n\nfunction findNavToggleInPath(path: EventTarget[]): HTMLElement | null {\n  for (const target of path) {\n    if (target instanceof HTMLElement && target.localName === 'nord-nav-toggle') {\n      return target\n    }\n  }\n  return null\n}\n\nfunction isNavToggleClick(e: Event): boolean {\n  return findNavToggleInPath(e.composedPath()) !== null\n}\n\nconst navMachine = fsm({\n  opened: {\n    toggle: 'closed',\n    close: 'closed',\n  },\n  closed: {\n    toggle: 'opened',\n    open: 'opened',\n    focusin: 'peek',\n    pointerenter: 'peek',\n  },\n  peek: {\n    toggle: 'opened',\n    focusout: 'unpeek',\n    pointerleave: 'wait',\n    dropdownOpen: 'blocked',\n    click: 'unpeek',\n    open: 'opened',\n  },\n  blocked: {\n    dropdownClose: 'peek',\n    open: 'opened',\n  },\n  wait: {\n    toggle: 'opened',\n    focusin: 'peek',\n    pointerenter: 'peek',\n    timeout: 'unpeek',\n  },\n  unpeek: {\n    toggle: 'opened',\n    focusin: 'peek',\n    pointerenter: 'peek',\n    transitionend: 'closed',\n  },\n})\n\ntype NavState = States<typeof navMachine>\ntype NavEvent = Events<typeof navMachine>\n\nconst isNavItem = (el: HTMLElement): el is NavItem => el.localName === 'nord-nav-item'\nconst isNavItemLeaf = (el: HTMLElement) => isNavItem(el) && !el.hasSubNav\n\n/**\n * Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n *\n * @status ready\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot top-bar - Used to place the [Top Bar](../top-bar/) component.\n * @slot header - Used to place content inside the header section. This slot can be made sticky by utilizing the `sticky` property on the layout component.\n * @slot footer - Used to place content inside the footer section. This slot can be made sticky by utilizing the `stickyFooter` property on the layout component.\n * @slot drawer - Used to place additional content/details relating to a selected item.\n * @slot nav-toggle - Used to place a own nav-toggle component, for cases where you might need to add a tooltip. As an alternative, `<nord-nav-toggle>` can be placed anywhere inside `<nord-layout>` (e.g. inside a `<nord-header>`) — the layout listens for clicks and hover on any descendant `<nord-nav-toggle>` and drives toggle / peek behaviour accordingly. When using that placement, set `hide-default-nav-toggle` to suppress the layout's built-in fallback toggle.\n *\n * @fires {NavOpenChangeEvent} nav-open-change - Dispatched when the navigation open state changes, regardless of the trigger (user toggle, peek, focus, programmatic). The event's `navOpen` property contains the new state.\n * @fires {NavResizeEvent} nav-resize - Dispatched when the navigation sidebar width changes. The event's `width` property contains the new width in pixels.\n *\n * @cssprop [--n-layout-padding=var(--n-space-l)] - Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-layout-drawer-inline-size=320px] - Controls the width of the drawer area, when used.\n * @cssprop [--n-layout-background-color=var(--n-color-background)] - Controls the background color of the layout, using [color tokens](/tokens/#color).\n * @cssprop [--n-layout-nav-border-color=var(--n-color-border)] - Controls the color of the border between the navigation and the main content area when the nav is open on wide screens.\n * @cssprop [--n-layout-resize-color=var(--n-color-accent)] - Controls the colour of the resize handle's accent bar (shown on hover, focus, and while dragging).\n * @cssprop [--n-layout-resize-block-size=100%] - Controls the block-axis (vertical) size of the resize handle. Set to a fixed length (e.g. `200px`) to constrain the handle so it doesn't span the full nav height.\n * @cssprop [--n-layout-resize-inset-inline-end=5px] - Controls the inline-end offset of the resize handle's accent bar (the visible vertical line shown on hover/focus/drag).\n * @cssprop [--n-layout-nav-rail-width=64px] - Controls the width of the navigation column when `collapse-mode=\"rail\"` is active and the nav is closed. Equivalent to the `nav-rail-width` attribute / `navRailWidth` property; the CSS custom property takes precedence when set.\n * @cssprop [--n-layout-header-size=var(--n-space-xxl)] - Controls the block-axis (height) of the layout's header area. Also drives the size of the nav-toggle container and sticky-positioning offsets.\n * @cssprop [--n-layout-drawer-box-shadow=var(--n-box-shadow-nav)] - Controls the box-shadow applied to the drawer (aside) on narrow viewports.\n * @cssprop [--n-layout-drawer-box-shadow-wide=var(--n-box-shadow-header)] - Controls the box-shadow applied to the drawer (aside) on wide viewports (≥1240px).\n * @cssprop [--n-layout-drawer-border-inline-start-width=1px] - Controls the inline-start border width of the drawer on wide viewports.\n * @cssprop [--n-layout-drawer-border-inline-start-color=var(--n-color-border)] - Controls the inline-start border color of the drawer on wide viewports.\n */\n@customElement('nord-layout')\nexport default class Layout extends LitElement {\n  static styles = [componentStyle, stickyStyle, style]\n\n  private peekTimeoutId?: ReturnType<typeof setTimeout>\n  private readonly resizeTooltipId = `n-layout-resize-tip-${++resizeTooltipIdCounter}`\n\n  private navSlot = new SlotController(this, 'nav')\n  private drawerSlot = new SlotController(this, 'drawer')\n  private topBarSlot = new SlotController(this, 'top-bar')\n  private headerSlot = new SlotController(this, 'header')\n  private footerSlot = new SlotController(this, 'footer')\n  private dividerTooltipSlot = new SlotController(this, 'tooltip-divider')\n  private direction = new DirectionController(this)\n  private events = new EventController(this)\n  private lightDismiss = new LightDismissController(this, {\n    isOpen: () => this.navState === 'opened' && !this.wideScreen,\n    onDismiss: () => this.navTransition('close'),\n    isDismissible: node => node !== this.navEl,\n  })\n\n  // Set while applying an incoming BroadcastChannel message. The navOpen\n  // observer checks this and skips re-broadcasting so that received changes\n  // don't echo back across tabs. Without this gate the two tabs ping-pong\n  // on Safari, where microtask scheduling lets their updates interleave\n  // past Lit's property equality check.\n  private applyingRemote = false\n\n  private broadcast = new BroadcastChannelController<{ navOpen: boolean } | { navWidth: number }>(this, {\n    channelName: 'nord-layout-nav-state',\n    enabled: () => this.syncNavState && this.wideScreen,\n    onMessage: (data) => {\n      this.applyingRemote = true\n      if ('navOpen' in data) {\n        this.navOpen = data.navOpen\n      }\n      if ('navWidth' in data) {\n        this.navWidth = data.navWidth\n      }\n      this.updateComplete.then(() => {\n        this.applyingRemote = false\n      })\n    },\n  })\n\n  @query('.n-layout-nav', true) private navEl!: HTMLDivElement\n  @query('.n-resize-tooltip') private resizeTooltipEl?: HTMLElement\n  @query('.n-sticky') private stickyHeaderEl?: HTMLElement\n  @query('slot[name=\"footer\"]') private footerSlotEl?: HTMLSlotElement\n\n  // Track the actual rendered block-size of header/footer so consumers\n  // (e.g. <nord-aside>) can offset overlay positioning against the real\n  // values, not just the static defaults. Single ResizeObserver per\n  // dimension, written as public CSS custom properties on the host.\n  private headerSizeObserver?: ResizeObserver\n  private footerSizeObserver?: ResizeObserver\n  private observedFooterElement?: Element\n\n  @state() private navWidth = navWidthStore.value\n  @state() private isDragging = false\n  @state() private navState!: NavState\n  @state() private wideScreen = mediaQuery.matches\n\n  /**\n   * Controls whether the navigation is hidden off-screen or not.\n   * Defaults to `true` for wide viewports, and `false` otherwise.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'nav-open' }) navOpen!: boolean\n\n  /**\n   * Controls whether the navigation's open/closed state is persisted across page loads.\n   * This is useful for multi-page apps, where clicks on links trigger a full page load.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'persist-nav-state' }) persistNavState = false\n\n  /**\n   * Controls whether the navigation's open/closed state and width is synced across tabs/windows on the same origin.\n   * This is useful for long-lived app sessions where you may have multiple tabs/windows open at once.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'sync-nav-state' }) syncNavState = false\n\n  /**\n   * Initial width (in pixels) of the navigation sidebar when no value has been persisted.\n   * Changing this value between loads also re-seeds the persisted width for existing users,\n   * so design changes propagate without manual localStorage resets.\n   */\n  @property({ type: Number, reflect: true, attribute: 'default-nav-width' }) defaultNavWidth = NAV_DEFAULT_WIDTH\n\n  /**\n   * Minimum width (in pixels) the navigation sidebar can be resized to via drag or keyboard.\n   */\n  @property({ type: Number, reflect: true, attribute: 'min-nav-width' }) minNavWidth = NAV_MIN_WIDTH\n\n  /**\n   * Maximum width (in pixels) the navigation sidebar can be resized to via drag or keyboard.\n   */\n  @property({ type: Number, reflect: true, attribute: 'max-nav-width' }) maxNavWidth = NAV_MAX_WIDTH\n\n  /**\n   * Width (in pixels) of the rail column when `collapse-mode=\"rail\"` is active\n   * and the nav is closed. Default 64.\n   */\n  @property({ type: Number, reflect: true, attribute: 'nav-rail-width' }) navRailWidth = NAV_RAIL_WIDTH\n\n  /**\n   * Controls the padding of the default main section slot. When set to “none”,\n   * the nav and header slots will still have padding.\n   */\n  @property({ reflect: true }) padding: 'm' | 'none' = 'm'\n\n  /**\n   * Controls whether the layout's header has sticky positioning.\n   */\n  @property({ type: Boolean, reflect: true }) sticky: boolean = false\n\n  /**\n   * Controls whether the layout's footer has sticky positioning.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'sticky-footer' }) stickyFooter: boolean = false\n\n  /**\n   * Suppresses the built-in `<nord-nav-toggle>` rendered as the fallback for\n   * the `nav-toggle` slot. Set this when you've placed your own\n   * `<nord-nav-toggle>` elsewhere inside the layout (e.g. inside\n   * `<nord-header>`) and want the layout's default one hidden.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-default-nav-toggle' })\n  hideDefaultNavToggle: boolean = false\n\n  /**\n   * Suppresses the built-in collapse button rendered inside the nav (the\n   * lock-icon button that toggles the sidebar between opened and the\n   * collapsed state defined by `collapse-mode`). Set this when you've\n   * placed your own collapse control elsewhere.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-collapse-button' })\n  hideCollapseButton: boolean = false\n\n  /**\n   * When set, clicking the resize handle (without dragging) toggles the\n   * nav between opened and the collapsed state defined by `collapse-mode`.\n   * Dragging the handle still resizes the sidebar as usual; the click\n   * behaviour only fires when the pointer barely moves between down and up.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'toggle-on-resize-click' })\n  toggleOnResizeClick: boolean = false\n\n  /**\n   * Controls how the navigation renders when closed on wide viewports.\n   * `hide` (default) slides the nav off-screen entirely. `rail` keeps a\n   * narrow icon-only column visible, with tooltips for labels and flyout\n   * popovers for items that have a `subnav` slot.\n   *\n   * Narrow viewports always use the off-screen behaviour regardless of\n   * this setting.\n   */\n  @property({ reflect: true, attribute: 'collapse-mode' }) collapseMode: 'hide' | 'rail' = 'hide'\n\n  /**\n   * A getter whose values reflects whether the layout component considers the viewport to be narrow or not.\n   * A narrow viewport is considered to be less than 768px wide.\n   */\n  get isNarrow(): boolean {\n    return !this.wideScreen\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    this.events.listen(mediaQuery, 'change', this.handleMediaQueryChange)\n    this.addEventListener('click', this.handleHostClick)\n    this.addEventListener('mouseover', this.handleHostMouseOver)\n    this.addEventListener('mouseout', this.handleHostMouseOut)\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.removeEventListener('click', this.handleHostClick)\n    this.removeEventListener('mouseover', this.handleHostMouseOver)\n    this.removeEventListener('mouseout', this.handleHostMouseOut)\n    this.headerSizeObserver?.disconnect()\n    this.headerSizeObserver = undefined\n    this.footerSizeObserver?.disconnect()\n    this.footerSizeObserver = undefined\n    this.observedFooterElement = undefined\n    this.style.removeProperty('--n-layout-header-block-size')\n    this.style.removeProperty('--n-layout-footer-block-size')\n  }\n\n  protected firstUpdated() {\n    if (typeof ResizeObserver === 'undefined')\n      return\n    if (this.stickyHeaderEl) {\n      this.headerSizeObserver = new ResizeObserver(() => this.publishHeaderSize())\n      this.headerSizeObserver.observe(this.stickyHeaderEl)\n      this.publishHeaderSize()\n    }\n    if (this.footerSlotEl) {\n      this.footerSlotEl.addEventListener('slotchange', this.handleFooterSlotChange)\n      this.handleFooterSlotChange()\n    }\n  }\n\n  private publishHeaderSize() {\n    const size = this.stickyHeaderEl?.getBoundingClientRect().height ?? 0\n    if (size > 0)\n      this.style.setProperty('--n-layout-header-block-size', `${size}px`)\n    else\n      this.style.removeProperty('--n-layout-header-block-size')\n  }\n\n  private handleFooterSlotChange = () => {\n    const next = this.footerSlotEl?.assignedElements({ flatten: true })[0]\n    if (next === this.observedFooterElement)\n      return\n    this.footerSizeObserver?.disconnect()\n    this.observedFooterElement = next\n    if (!next) {\n      this.style.removeProperty('--n-layout-footer-block-size')\n      return\n    }\n    this.footerSizeObserver = new ResizeObserver(() => this.publishFooterSize())\n    this.footerSizeObserver.observe(next)\n    this.publishFooterSize()\n  }\n\n  private publishFooterSize() {\n    const size = this.observedFooterElement?.getBoundingClientRect().height ?? 0\n    if (size > 0)\n      this.style.setProperty('--n-layout-footer-block-size', `${size}px`)\n    else\n      this.style.removeProperty('--n-layout-footer-block-size')\n  }\n\n  willUpdate() {\n    // we only want this logic to run once, before first render\n    if (this.hasUpdated) {\n      return\n    }\n\n    // fall back to the built-in constants when consumer-provided attributes\n    // are non-numeric (e.g. `min-nav-width=\"abc\"` produces NaN). reflect:true\n    // also rewrites the attribute in the DOM to the sanitized value\n    if (!Number.isFinite(this.defaultNavWidth)) {\n      this.defaultNavWidth = NAV_DEFAULT_WIDTH\n    }\n    if (!Number.isFinite(this.minNavWidth)) {\n      this.minNavWidth = NAV_MIN_WIDTH\n    }\n    if (!Number.isFinite(this.maxNavWidth)) {\n      this.maxNavWidth = NAV_MAX_WIDTH\n    }\n\n    // re-seed persisted width when the consumer-provided default-nav-width\n    // differs from the last default we applied. This lets apps roll out a\n    // new sidebar default without manual localStorage migrations.\n    if (navWidthDefaultStore.value !== this.defaultNavWidth) {\n      this.setNavWidth(this.defaultNavWidth)\n      navWidthStore.value = this.navWidth\n      // store the raw consumer-provided default so mismatch detection is\n      // independent of the min/max clamp\n      navWidthDefaultStore.value = this.defaultNavWidth\n    }\n    else {\n      // ensure a previously-persisted width still respects current min/max\n      this.setNavWidth(this.navWidth)\n    }\n\n    // on mobile it should always start closed\n    if (this.isNarrow) {\n      this.navState = 'closed'\n    }\n    // if nav state is persisted, and it was previously closed, start closed\n    else if (this.persistNavState && navOpenStore.value === false) {\n      this.navState = 'closed'\n    }\n    // otherwise start open\n    else {\n      this.navState = 'opened'\n    }\n  }\n\n  render() {\n    const { navWidth, navState, navSlot, headerSlot, footerSlot, topBarSlot, drawerSlot, isDragging, direction } = this\n    const isRailCollapsed = this.wideScreen && this.collapseMode === 'rail' && navState !== 'opened'\n    const adjustedNavWidth = navState === 'opened' && this.wideScreen\n      ? navWidth\n      : isRailCollapsed\n        ? NAV_RAIL_WIDTH\n        : this.defaultNavWidth\n\n    return html`\n      <div\n        class=${classMap({\n          'n-layout': true,\n          'n-rtl': direction.isRTL,\n          'n-dragging': isDragging,\n          'n-has-header': headerSlot.hasContent,\n          'n-has-footer': footerSlot.hasContent,\n          'n-has-top-bar': topBarSlot.hasContent,\n          'n-has-drawer': drawerSlot.hasContent,\n          'n-has-nav': navSlot.hasContent,\n        })}\n        style=${styleMap({\n          '--_n-layout-nav-width': `${adjustedNavWidth}px`,\n          '--_n-layout-nav-rail-width': `var(--n-layout-nav-rail-width, ${this.navRailWidth}px)`,\n        })}\n        data-nav=${navSlot.hasContent ? navState : 'closed'}\n        data-screen=${this.wideScreen ? 'wide' : 'narrow'}\n        data-collapse-mode=${this.collapseMode}\n      >\n        <div\n          class=\"n-layout-nav\"\n          ?hidden=${navSlot.isEmpty}\n          @focusin=${this.handleNavFocus}\n          @mouseenter=${this.handleMouseEnter}\n          @mouseleave=${this.handleMouseLeave}\n          @open=${this.handleDropdownOpen}\n          @close=${this.handleDropdownClose}\n        >\n          <slot name=\"nav\" @click=${this.handleNavClick}></slot>\n          <div\n            class=\"n-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            aria-describedby=${cond(this.dividerTooltipSlot.hasContent && !isDragging, this.resizeTooltipId)}\n            @pointerdown=${cond(navState === 'opened' || isRailCollapsed, this.startDragging)}\n            @pointermove=${isDragging ? this.handleDrag : this.handleResizeHoverMove}\n            @pointerleave=${this.handleResizePointerLeave}\n            @pointerup=${this.stopDragging}\n            @keydown=${this.handleKeyboardResize}\n            ?hidden=${this.isNarrow}\n          ></div>\n          ${this.dividerTooltipSlot.hasContent\n            ? html`\n                <nord-tooltip id=${this.resizeTooltipId} position=\"inline-end\" class=\"n-resize-tooltip\">\n                  <slot name=\"tooltip-divider\"></slot>\n                </nord-tooltip>\n              `\n            : nothing}\n          ${this.hideCollapseButton ? nothing : this.renderNavCollapse()}\n        </div>\n\n        <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleMainClick}>\n          ${navSlot.hasContent && !this.hideDefaultNavToggle ? this.renderNavToggle() : nothing}\n\n          <div class=\"n-top-bar-container\">\n            <slot name=\"top-bar\"></slot>\n          </div>\n\n          <div class=\"n-layout-content\">\n            <div class=\"n-sticky\">\n              <slot name=\"header\"></slot>\n            </div>\n            <main>\n              <slot></slot>\n            </main>\n            <slot name=\"footer\"></slot>\n          </div>\n\n          <aside ?hidden=${this.drawerSlot.isEmpty}>\n            <slot name=\"drawer\"></slot>\n          </aside>\n        </div>\n      </div>\n    `\n  }\n\n  private renderNavToggle() {\n    return html`\n      <div class=\"n-nav-toggle-container\">\n        <slot\n          name=\"nav-toggle\"\n          @click=${this.handleToggleClick}\n          @mouseover=${this.handleMouseEnter}\n          @mouseout=${this.handleMouseLeave}\n        >\n          <nord-nav-toggle></nord-nav-toggle>\n        </slot>\n      </div>\n    `\n  }\n\n  private renderNavCollapse() {\n    return html`\n      <button class=\"n-collapse-btn\" @click=${this.handleToggleClick}>\n        <nord-icon name=\"navigation-toggle-lock\" size=\"s\"></nord-icon>\n      </button>\n    `\n  }\n\n  @observe('navWidth', 'updated')\n  protected handleNavWidthChange(prev: number) {\n    navWidthStore.value = this.navWidth\n    if (prev != null) {\n      const navWidth = this.navWidth\n      this.dispatchEvent(new NavResizeEvent(navWidth))\n    }\n  }\n\n  @observe('navState')\n  protected handleNavStateChange(prev: NavState) {\n    if (prev === 'wait' && this.peekTimeoutId) {\n      clearTimeout(this.peekTimeoutId)\n    }\n    if (prev === 'unpeek') {\n      this.navEl.removeEventListener('transitionend', this.handleTransitionEnd)\n    }\n\n    switch (this.navState) {\n      case 'closed':\n        this.navOpen = false\n        break\n      case 'opened':\n        this.navOpen = true\n        break\n      case 'wait':\n        this.peekTimeoutId = setTimeout(() => this.navTransition('timeout'), NAV_PEEK_DELAY)\n        break\n      case 'unpeek':\n        this.navEl.addEventListener('transitionend', this.handleTransitionEnd, { once: true })\n        break\n      default:\n        break\n    }\n  }\n\n  @observe('navOpen', 'updated')\n  protected handleOpenChange(prev: boolean) {\n    if (!this.isDragging) {\n      // when opening nav, it should restore to default width (or larger).\n      // unless it is being dragged, in which case the drag width wins\n      this.setNavWidth(Math.max(this.navWidth, this.defaultNavWidth))\n    }\n\n    this.navTransition(this.navOpen ? 'open' : 'close')\n\n    if (this.persistNavState) {\n      navOpenStore.value = this.navOpen\n    }\n\n    // skip first update, we only want subsequent changes\n    if (prev != null) {\n      // Bind to a local so the custom-elements-manifest analyzer can infer\n      // the event name from this constructor call site (it reads the bare\n      // identifier passed to `new NavOpenChangeEvent(...)`; a `this.x`\n      // member access defeats that heuristic and leaves the event nameless,\n      // which then crashes `scripts/build-react-types.mjs` on sort).\n      const navOpen = this.navOpen\n      // Suppress the broadcast when the change came from a received message,\n      // otherwise tabs would echo every update back at each other. See the\n      // `applyingRemote` field for the full rationale.\n      if (!this.applyingRemote) {\n        this.broadcast.post({ navOpen })\n      }\n      this.dispatchEvent(new NavOpenChangeEvent(navOpen))\n    }\n  }\n\n  /* ---------------------------------------------\n  / NAVIGATION OPEN/CLOSE LOGIC\n  / --------------------------------------------- */\n\n  private navTransition(event: NavEvent) {\n    this.navState = navMachine.transition(this.navState, event)\n  }\n\n  private handleNavClick(e: Event) {\n    if (!e.defaultPrevented && !this.wideScreen) {\n      const target = e.target as HTMLElement\n\n      if (isNavItemLeaf(target)) {\n        this.navTransition('close')\n      }\n    }\n  }\n\n  private handleMainClick() {\n    this.navTransition('click')\n  }\n\n  private handleDropdownOpen(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === 'nord-dropdown') {\n      this.navTransition('dropdownOpen')\n    }\n  }\n\n  private handleDropdownClose(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === 'nord-dropdown') {\n      this.navTransition('dropdownClose')\n    }\n  }\n\n  private handleMediaQueryChange = () => {\n    this.wideScreen = mediaQuery.matches\n    this.navTransition(this.wideScreen ? 'open' : 'close')\n  }\n\n  private handleToggleClick = (e: Event) => {\n    // Skip when a `<nord-nav-toggle>` is in the click path — `handleHostClick`\n    // will fire for it. Without this guard, an in-slot `<nord-nav-toggle>`\n    // would toggle twice (once via the slot handler, once via the host one).\n    if (isNavToggleClick(e)) {\n      return\n    }\n    this.navTransition('toggle')\n  }\n\n  // Allow `<nord-nav-toggle>` to be placed anywhere inside the layout, not\n  // just in the `nav-toggle` slot. Clicks on the host bubble up through the\n  // light-DOM subtree; if the composed path contains a `<nord-nav-toggle>`,\n  // we treat that as a toggle request.\n  private handleHostClick = (e: Event) => {\n    if (isNavToggleClick(e)) {\n      this.navTransition('toggle')\n    }\n  }\n\n  // Same delegation pattern as `handleHostClick`, but for hover-to-peek.\n  // `relatedTarget` filtering avoids re-firing as the cursor moves between\n  // children inside the same `<nord-nav-toggle>`.\n  private handleHostMouseOver = (e: MouseEvent) => {\n    const toggle = findNavToggleInPath(e.composedPath())\n    if (!toggle) {\n      return\n    }\n    if (e.relatedTarget instanceof Node && toggle.contains(e.relatedTarget)) {\n      return\n    }\n    this.handleMouseEnter()\n  }\n\n  private handleHostMouseOut = (e: MouseEvent) => {\n    const toggle = findNavToggleInPath(e.composedPath())\n    if (!toggle) {\n      return\n    }\n    if (e.relatedTarget instanceof Node && toggle.contains(e.relatedTarget)) {\n      return\n    }\n    this.handleMouseLeave()\n  }\n\n  private handleNavFocus = () => {\n    // In rail mode, the icons are already visible — focus inside the\n    // rail should not trigger a peek that re-expands the full sidebar.\n    if (this.wideScreen && this.collapseMode === 'rail') {\n      return\n    }\n    this.navTransition('focusin')\n  }\n\n  private handleMainFocus = () => {\n    this.navTransition('focusout')\n  }\n\n  private handleMouseEnter = () => {\n    if (!this.wideScreen) {\n      return\n    }\n    if (this.collapseMode === 'rail') {\n      return\n    }\n    this.navTransition('pointerenter')\n  }\n\n  private handleMouseLeave = () => {\n    if (this.wideScreen && this.collapseMode === 'rail') {\n      return\n    }\n    this.navTransition('pointerleave')\n  }\n\n  private handleTransitionEnd = () => {\n    this.navTransition('transitionend')\n  }\n\n  /* ---------------------------------------------\n  / RESIZE LOGIC\n  / --------------------------------------------- */\n\n  private handleKeyboardResize(e: KeyboardEvent) {\n    const {\n      navWidth,\n      direction: { isLTR },\n    } = this\n\n    switch (e.key) {\n      case 'ArrowLeft':\n        this.setNavWidth(navWidth + (isLTR ? -NAV_RESIZE_STEP : NAV_RESIZE_STEP))\n        break\n      case 'ArrowRight':\n        this.setNavWidth(navWidth + (isLTR ? NAV_RESIZE_STEP : -NAV_RESIZE_STEP))\n        break\n      case 'Enter':\n        this.navTransition('toggle')\n        break\n      case 'Home':\n        this.setNavWidth(this.minNavWidth)\n        break\n      case 'End':\n        this.setNavWidth(this.maxNavWidth)\n        break\n      default:\n        return\n    }\n\n    this.broadcast.post({ navWidth: this.navWidth })\n    e.preventDefault()\n  }\n\n  private setNavWidth(width: number) {\n    this.navWidth = clamp(Math.round(width), this.minNavWidth, this.maxNavWidth)\n  }\n\n  private dragStartX = 0\n  private hasDragged = false\n\n  private startDragging(e: PointerEvent) {\n    if (e.button === 0) {\n      const target = e.target as Element\n      target.setPointerCapture(e.pointerId)\n      this.isDragging = true\n      this.dragStartX = e.clientX\n      this.hasDragged = false\n    }\n  }\n\n  private stopDragging() {\n    if (this.isDragging && this.toggleOnResizeClick && !this.hasDragged) {\n      this.navTransition('toggle')\n    }\n    this.isDragging = false\n    this.hasDragged = false\n    this.broadcast.post({ navWidth: this.navWidth })\n  }\n\n  private handleResizeHoverMove = (e: PointerEvent) => {\n    const target = e.currentTarget as HTMLElement | null\n    if (!target || !this.resizeTooltipEl)\n      return\n\n    const rect = target.getBoundingClientRect()\n    const offset = e.clientY - (rect.top + rect.height / 2)\n    this.resizeTooltipEl.style.setProperty('--n-resize-tooltip-y', `${offset}px`)\n  }\n\n  private handleResizePointerLeave = () => {\n    this.stopDragging()\n    this.resizeTooltipEl?.style.removeProperty('--n-resize-tooltip-y')\n  }\n\n  private handleDrag(e: PointerEvent) {\n    if (!this.hasDragged && Math.abs(e.clientX - this.dragStartX) < NAV_RESIZE_DRAG_THRESHOLD) {\n      return\n    }\n    this.hasDragged = true\n\n    const width = this.direction.isRTL ? this.clientWidth - e.clientX : e.clientX\n\n    this.setNavWidth(width)\n    this.navTransition(width >= NAV_COLLAPSE_WIDTH ? 'open' : 'close')\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-layout': Layout\n  }\n}\n"],"names":["defaultEnabled","BroadcastChannelController","constructor","host","options","addController","this","enabled","hostConnected","BroadcastChannel","channel","channelName","addEventListener","hostDisconnected","_a","removeEventListener","_b","close","handleEvent","event","onMessage","data","post","message","postMessage","Icon","registerIcon","lockIcon","resizeTooltipIdCounter","NAV_DEFAULT_WIDTH","mediaQuery","matchMedia","matches","navWidthStore","storage","navWidthDefaultStore","navOpenStore","findNavToggleInPath","path","target","HTMLElement","localName","isNavToggleClick","e","composedPath","navMachine","fsm","opened","toggle","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","resizeTooltipId","navSlot","SlotController","drawerSlot","topBarSlot","headerSlot","footerSlot","dividerTooltipSlot","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","wideScreen","onDismiss","navTransition","isDismissible","node","navEl","applyingRemote","broadcast","syncNavState","navOpen","navWidth","updateComplete","then","value","isDragging","persistNavState","defaultNavWidth","minNavWidth","maxNavWidth","navRailWidth","padding","sticky","stickyFooter","hideDefaultNavToggle","hideCollapseButton","toggleOnResizeClick","collapseMode","handleFooterSlotChange","next","footerSlotEl","assignedElements","flatten","observedFooterElement","footerSizeObserver","disconnect","ResizeObserver","publishFooterSize","observe","style","removeProperty","handleMediaQueryChange","handleToggleClick","handleHostClick","handleHostMouseOver","relatedTarget","Node","contains","handleMouseEnter","handleHostMouseOut","handleMouseLeave","handleNavFocus","handleMainFocus","handleTransitionEnd","dragStartX","hasDragged","handleResizeHoverMove","currentTarget","resizeTooltipEl","rect","getBoundingClientRect","offset","clientY","top","height","setProperty","handleResizePointerLeave","stopDragging","isNarrow","connectedCallback","super","listen","disconnectedCallback","headerSizeObserver","undefined","firstUpdated","stickyHeaderEl","publishHeaderSize","size","willUpdate","hasUpdated","Number","isFinite","setNavWidth","render","isRailCollapsed","adjustedNavWidth","html","classMap","isRTL","hasContent","styleMap","isEmpty","handleDropdownOpen","handleDropdownClose","handleNavClick","cond","startDragging","handleDrag","handleKeyboardResize","nothing","renderNavCollapse","handleMainClick","renderNavToggle","handleNavWidthChange","prev","dispatchEvent","NavResizeEvent","handleNavStateChange","peekTimeoutId","clearTimeout","setTimeout","once","handleOpenChange","Math","max","NavOpenChangeEvent","transition","defaultPrevented","el","isNavItem","hasSubNav","isLTR","key","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientX","abs","clientWidth","styles","componentStyle","stickyStyle","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","customElement"],"mappings":"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"}
+{"version":3,"file":"Layout.js","sources":["../src/common/controllers/BroadcastChannelController.ts","../src/layout/Layout.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit'\n\ninterface Options<T> {\n  channelName: string\n  onMessage: (message: T) => void\n  enabled?: () => boolean\n}\n\nconst defaultEnabled = () => true\n\nexport class BroadcastChannelController<T> implements ReactiveController {\n  private channel?: BroadcastChannel\n  private options: Required<Options<T>>\n\n  constructor(host: ReactiveControllerHost, options: Options<T>) {\n    host.addController(this)\n    this.options = { enabled: defaultEnabled, ...options }\n  }\n\n  hostConnected(): void {\n    if (typeof BroadcastChannel !== 'undefined') {\n      this.channel = new BroadcastChannel(this.options.channelName)\n      this.channel.addEventListener('message', this)\n    }\n  }\n\n  hostDisconnected(): void {\n    this.channel?.removeEventListener('message', this)\n    this.channel?.close()\n  }\n\n  handleEvent(event: MessageEvent<T>) {\n    if (this.options.enabled()) {\n      this.options.onMessage(event.data)\n    }\n  }\n\n  post(message: T) {\n    if (this.options.enabled()) {\n      this.channel?.postMessage(message)\n    }\n  }\n}\n","import type { Events, States } from '../common/fsm.js'\nimport type NavItem from '../nav-item/NavItem.js'\nimport * as lockIcon from '@nordhealth/icons/lib/assets/navigation-toggle-lock.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { BroadcastChannelController } from '../common/controllers/BroadcastChannelController.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport { LightDismissController } from '../common/controllers/LightDismissController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { cond } from '../common/directives/cond.js'\nimport { fsm } from '../common/fsm.js'\nimport { clamp } from '../common/number.js'\nimport { storage } from '../common/storage.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport stickyStyle from '../common/styles/Sticky.css'\n\nimport Icon from '../icon/Icon.js'\nimport style from './Layout.css'\nimport { NavOpenChangeEvent } from './NavOpenChangeEvent.js'\nimport { NavResizeEvent } from './NavResizeEvent.js'\nimport '../nav-toggle/NavToggle.js'\nimport '../tooltip/Tooltip.js'\n\nIcon.registerIcon(lockIcon)\n\nlet resizeTooltipIdCounter = 0\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RAIL_WIDTH = 64\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\nconst NAV_RESIZE_DRAG_THRESHOLD = 4\n\nconst mediaQuery\n  = typeof matchMedia !== 'undefined'\n    ? matchMedia('(min-width: 768px)')\n    : ({\n        matches: false,\n        addEventListener() {\n          /* noop */\n        },\n      } as unknown as MediaQueryList)\n\nconst navWidthStore = storage('nord-layout.navWidth', NAV_DEFAULT_WIDTH)\n// Tracks the last `default-nav-width` we wrote, so we can re-seed the\n// stored width when consumers change the default between loads.\n// Initial default matches NAV_DEFAULT_WIDTH so existing consumers that\n// never set `default-nav-width` get no re-seed on upgrade — their users'\n// persisted widths are preserved.\nconst navWidthDefaultStore = storage('nord-layout.navWidthDefault', NAV_DEFAULT_WIDTH)\nconst navOpenStore = storage('nord-layout.navOpen', true)\n\nfunction findNavToggleInPath(path: EventTarget[]): HTMLElement | null {\n  for (const target of path) {\n    if (target instanceof HTMLElement && target.localName === 'nord-nav-toggle') {\n      return target\n    }\n  }\n  return null\n}\n\nfunction isNavToggleClick(e: Event): boolean {\n  return findNavToggleInPath(e.composedPath()) !== null\n}\n\nconst navMachine = fsm({\n  opened: {\n    toggle: 'closed',\n    close: 'closed',\n  },\n  closed: {\n    toggle: 'opened',\n    open: 'opened',\n    focusin: 'peek',\n    pointerenter: 'peek',\n  },\n  peek: {\n    toggle: 'opened',\n    focusout: 'unpeek',\n    pointerleave: 'wait',\n    dropdownOpen: 'blocked',\n    click: 'unpeek',\n    open: 'opened',\n  },\n  blocked: {\n    dropdownClose: 'peek',\n    open: 'opened',\n  },\n  wait: {\n    toggle: 'opened',\n    focusin: 'peek',\n    pointerenter: 'peek',\n    timeout: 'unpeek',\n  },\n  unpeek: {\n    toggle: 'opened',\n    focusin: 'peek',\n    pointerenter: 'peek',\n    transitionend: 'closed',\n  },\n})\n\ntype NavState = States<typeof navMachine>\ntype NavEvent = Events<typeof navMachine>\n\nconst isNavItem = (el: HTMLElement): el is NavItem => el.localName === 'nord-nav-item'\nconst isNavItemLeaf = (el: HTMLElement) => isNavItem(el) && !el.hasSubNav\n\n/**\n * Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n *\n * @status ready\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot top-bar - Used to place the [Top Bar](../top-bar/) component.\n * @slot header - Used to place content inside the header section. This slot can be made sticky by utilizing the `sticky` property on the layout component.\n * @slot footer - Used to place content inside the footer section. This slot can be made sticky by utilizing the `stickyFooter` property on the layout component.\n * @slot drawer - Used to place additional content/details relating to a selected item.\n * @slot nav-toggle - Used to place a own nav-toggle component, for cases where you might need to add a tooltip. As an alternative, `<nord-nav-toggle>` can be placed anywhere inside `<nord-layout>` (e.g. inside a `<nord-header>`) — the layout listens for clicks and hover on any descendant `<nord-nav-toggle>` and drives toggle / peek behaviour accordingly. When using that placement, set `hide-default-nav-toggle` to suppress the layout's built-in fallback toggle.\n *\n * @fires {NavOpenChangeEvent} nav-open-change - Dispatched when the navigation open state changes, regardless of the trigger (user toggle, peek, focus, programmatic). The event's `navOpen` property contains the new state.\n * @fires {NavResizeEvent} nav-resize - Dispatched when the navigation sidebar width changes. The event's `width` property contains the new width in pixels.\n *\n * @cssprop [--n-layout-padding=var(--n-space-l)] - Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-layout-drawer-inline-size=320px] - Controls the width of the drawer area, when used.\n * @cssprop [--n-layout-background-color=var(--n-color-background)] - Controls the background color of the layout, using [color tokens](/tokens/#color).\n * @cssprop [--n-layout-nav-border-color=var(--n-color-border)] - Controls the color of the border between the navigation and the main content area when the nav is open on wide screens.\n * @cssprop [--n-layout-resize-color=var(--n-color-accent)] - Controls the colour of the resize handle's accent bar (shown on hover, focus, and while dragging).\n * @cssprop [--n-layout-resize-block-size=100%] - Controls the block-axis (vertical) size of the resize handle. Set to a fixed length (e.g. `200px`) to constrain the handle so it doesn't span the full nav height.\n * @cssprop [--n-layout-resize-inset-inline-end=5px] - Controls the inline-end offset of the resize handle's accent bar (the visible vertical line shown on hover/focus/drag).\n * @cssprop [--n-layout-nav-rail-width=64px] - Controls the width of the navigation column when `collapse-mode=\"rail\"` is active and the nav is closed. Equivalent to the `nav-rail-width` attribute / `navRailWidth` property; the CSS custom property takes precedence when set.\n * @cssprop [--n-layout-header-size=var(--n-space-xxl)] - Controls the block-axis (height) of the layout's header area. Also drives the size of the nav-toggle container and sticky-positioning offsets.\n * @cssprop [--n-layout-drawer-box-shadow=var(--n-box-shadow-nav)] - Controls the box-shadow applied to the drawer (aside) on narrow viewports.\n * @cssprop [--n-layout-drawer-box-shadow-wide=var(--n-box-shadow-header)] - Controls the box-shadow applied to the drawer (aside) on wide viewports (≥1240px).\n * @cssprop [--n-layout-drawer-border-inline-start-width=1px] - Controls the inline-start border width of the drawer on wide viewports.\n * @cssprop [--n-layout-drawer-border-inline-start-color=var(--n-color-border)] - Controls the inline-start border color of the drawer on wide viewports.\n */\n@customElement('nord-layout')\nexport default class Layout extends LitElement {\n  static styles = [componentStyle, stickyStyle, style]\n\n  private peekTimeoutId?: ReturnType<typeof setTimeout>\n  private readonly resizeTooltipId = `n-layout-resize-tip-${++resizeTooltipIdCounter}`\n\n  private navSlot = new SlotController(this, 'nav')\n  private drawerSlot = new SlotController(this, 'drawer')\n  private topBarSlot = new SlotController(this, 'top-bar')\n  private headerSlot = new SlotController(this, 'header')\n  private footerSlot = new SlotController(this, 'footer')\n  private dividerTooltipSlot = new SlotController(this, 'tooltip-divider')\n  private direction = new DirectionController(this)\n  private events = new EventController(this)\n  private lightDismiss = new LightDismissController(this, {\n    isOpen: () => this.navState === 'opened' && !this.wideScreen,\n    onDismiss: () => this.navTransition('close'),\n    isDismissible: node => node !== this.navEl,\n  })\n\n  // Set while applying an incoming BroadcastChannel message. The navOpen\n  // observer checks this and skips re-broadcasting so that received changes\n  // don't echo back across tabs. Without this gate the two tabs ping-pong\n  // on Safari, where microtask scheduling lets their updates interleave\n  // past Lit's property equality check.\n  private applyingRemote = false\n\n  private broadcast = new BroadcastChannelController<{ navOpen: boolean } | { navWidth: number }>(this, {\n    channelName: 'nord-layout-nav-state',\n    enabled: () => this.syncNavState && this.wideScreen,\n    onMessage: (data) => {\n      this.applyingRemote = true\n      if ('navOpen' in data) {\n        this.navOpen = data.navOpen\n      }\n      if ('navWidth' in data) {\n        this.navWidth = data.navWidth\n      }\n      this.updateComplete.then(() => {\n        this.applyingRemote = false\n      })\n    },\n  })\n\n  @query('.n-layout-nav', true) private navEl!: HTMLDivElement\n  @query('.n-resize-tooltip') private resizeTooltipEl?: HTMLElement\n  @query('.n-sticky') private stickyHeaderEl?: HTMLElement\n  @query('slot[name=\"footer\"]') private footerSlotEl?: HTMLSlotElement\n\n  // Track the actual rendered block-size of header/footer so consumers\n  // (e.g. <nord-aside>) can offset overlay positioning against the real\n  // values, not just the static defaults. Single ResizeObserver per\n  // dimension, written as public CSS custom properties on the host.\n  private headerSizeObserver?: ResizeObserver\n  private footerSizeObserver?: ResizeObserver\n  private observedFooterElement?: Element\n\n  @state() private navWidth = navWidthStore.value\n  @state() private isDragging = false\n  @state() private navState!: NavState\n  @state() private wideScreen = mediaQuery.matches\n\n  /**\n   * Controls whether the navigation is hidden off-screen or not.\n   * Defaults to `true` for wide viewports, and `false` otherwise.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'nav-open' }) navOpen!: boolean\n\n  /**\n   * Controls whether the navigation's open/closed state is persisted across page loads.\n   * This is useful for multi-page apps, where clicks on links trigger a full page load.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'persist-nav-state' }) persistNavState = false\n\n  /**\n   * Controls whether the navigation's open/closed state and width is synced across tabs/windows on the same origin.\n   * This is useful for long-lived app sessions where you may have multiple tabs/windows open at once.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'sync-nav-state' }) syncNavState = false\n\n  /**\n   * Initial width (in pixels) of the navigation sidebar when no value has been persisted.\n   * Changing this value between loads also re-seeds the persisted width for existing users,\n   * so design changes propagate without manual localStorage resets.\n   */\n  @property({ type: Number, reflect: true, attribute: 'default-nav-width' }) defaultNavWidth = NAV_DEFAULT_WIDTH\n\n  /**\n   * Minimum width (in pixels) the navigation sidebar can be resized to via drag or keyboard.\n   */\n  @property({ type: Number, reflect: true, attribute: 'min-nav-width' }) minNavWidth = NAV_MIN_WIDTH\n\n  /**\n   * Maximum width (in pixels) the navigation sidebar can be resized to via drag or keyboard.\n   */\n  @property({ type: Number, reflect: true, attribute: 'max-nav-width' }) maxNavWidth = NAV_MAX_WIDTH\n\n  /**\n   * Width (in pixels) of the rail column when `collapse-mode=\"rail\"` is active\n   * and the nav is closed. Default 64.\n   */\n  @property({ type: Number, reflect: true, attribute: 'nav-rail-width' }) navRailWidth = NAV_RAIL_WIDTH\n\n  /**\n   * Controls the padding of the default main section slot. When set to “none”,\n   * the nav and header slots will still have padding.\n   */\n  @property({ reflect: true }) padding: 'm' | 'none' = 'm'\n\n  /**\n   * Controls whether the layout's header has sticky positioning.\n   */\n  @property({ type: Boolean, reflect: true }) sticky: boolean = false\n\n  /**\n   * Controls whether the layout's footer has sticky positioning.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'sticky-footer' }) stickyFooter: boolean = false\n\n  /**\n   * Suppresses the built-in `<nord-nav-toggle>` rendered as the fallback for\n   * the `nav-toggle` slot. Set this when you've placed your own\n   * `<nord-nav-toggle>` elsewhere inside the layout (e.g. inside\n   * `<nord-header>`) and want the layout's default one hidden.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-default-nav-toggle' })\n  hideDefaultNavToggle: boolean = false\n\n  /**\n   * Suppresses the built-in collapse button rendered inside the nav (the\n   * lock-icon button that toggles the sidebar between opened and the\n   * collapsed state defined by `collapse-mode`). Set this when you've\n   * placed your own collapse control elsewhere.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-collapse-button' })\n  hideCollapseButton: boolean = false\n\n  /**\n   * When set, clicking the resize handle (without dragging) toggles the\n   * nav between opened and the collapsed state defined by `collapse-mode`.\n   * Dragging the handle still resizes the sidebar as usual; the click\n   * behaviour only fires when the pointer barely moves between down and up.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'toggle-on-resize-click' })\n  toggleOnResizeClick: boolean = false\n\n  /**\n   * Controls how the navigation renders when closed on wide viewports.\n   * `hide` (default) slides the nav off-screen entirely. `rail` keeps a\n   * narrow icon-only column visible, with tooltips for labels and flyout\n   * popovers for items that have a `subnav` slot.\n   *\n   * Narrow viewports always use the off-screen behaviour regardless of\n   * this setting.\n   */\n  @property({ reflect: true, attribute: 'collapse-mode' }) collapseMode: 'hide' | 'rail' = 'hide'\n\n  /**\n   * A getter whose values reflects whether the layout component considers the viewport to be narrow or not.\n   * A narrow viewport is considered to be less than 768px wide.\n   */\n  get isNarrow(): boolean {\n    return !this.wideScreen\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    this.events.listen(mediaQuery, 'change', this.handleMediaQueryChange)\n    this.addEventListener('click', this.handleHostClick)\n    this.addEventListener('mouseover', this.handleHostMouseOver)\n    this.addEventListener('mouseout', this.handleHostMouseOut)\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.removeEventListener('click', this.handleHostClick)\n    this.removeEventListener('mouseover', this.handleHostMouseOver)\n    this.removeEventListener('mouseout', this.handleHostMouseOut)\n    this.headerSizeObserver?.disconnect()\n    this.headerSizeObserver = undefined\n    this.footerSizeObserver?.disconnect()\n    this.footerSizeObserver = undefined\n    this.observedFooterElement = undefined\n    this.style.removeProperty('--n-layout-header-block-size')\n    this.style.removeProperty('--n-layout-footer-block-size')\n  }\n\n  protected firstUpdated() {\n    if (typeof ResizeObserver === 'undefined')\n      return\n    if (this.stickyHeaderEl) {\n      this.headerSizeObserver = new ResizeObserver(() => this.publishHeaderSize())\n      this.headerSizeObserver.observe(this.stickyHeaderEl)\n      this.publishHeaderSize()\n    }\n    if (this.footerSlotEl) {\n      this.footerSlotEl.addEventListener('slotchange', this.handleFooterSlotChange)\n      this.handleFooterSlotChange()\n    }\n  }\n\n  private publishHeaderSize() {\n    const size = this.stickyHeaderEl?.getBoundingClientRect().height ?? 0\n    if (size > 0)\n      this.style.setProperty('--n-layout-header-block-size', `${size}px`)\n    else\n      this.style.removeProperty('--n-layout-header-block-size')\n  }\n\n  private handleFooterSlotChange = () => {\n    const next = this.footerSlotEl?.assignedElements({ flatten: true })[0]\n    if (next === this.observedFooterElement)\n      return\n    this.footerSizeObserver?.disconnect()\n    this.observedFooterElement = next\n    if (!next) {\n      this.style.removeProperty('--n-layout-footer-block-size')\n      return\n    }\n    this.footerSizeObserver = new ResizeObserver(() => this.publishFooterSize())\n    this.footerSizeObserver.observe(next)\n    this.publishFooterSize()\n  }\n\n  private publishFooterSize() {\n    const size = this.observedFooterElement?.getBoundingClientRect().height ?? 0\n    if (size > 0)\n      this.style.setProperty('--n-layout-footer-block-size', `${size}px`)\n    else\n      this.style.removeProperty('--n-layout-footer-block-size')\n  }\n\n  willUpdate() {\n    // we only want this logic to run once, before first render\n    if (this.hasUpdated) {\n      return\n    }\n\n    // fall back to the built-in constants when consumer-provided attributes\n    // are non-numeric (e.g. `min-nav-width=\"abc\"` produces NaN). reflect:true\n    // also rewrites the attribute in the DOM to the sanitized value\n    if (!Number.isFinite(this.defaultNavWidth)) {\n      this.defaultNavWidth = NAV_DEFAULT_WIDTH\n    }\n    if (!Number.isFinite(this.minNavWidth)) {\n      this.minNavWidth = NAV_MIN_WIDTH\n    }\n    if (!Number.isFinite(this.maxNavWidth)) {\n      this.maxNavWidth = NAV_MAX_WIDTH\n    }\n\n    // re-seed persisted width when the consumer-provided default-nav-width\n    // differs from the last default we applied. This lets apps roll out a\n    // new sidebar default without manual localStorage migrations.\n    if (navWidthDefaultStore.value !== this.defaultNavWidth) {\n      this.setNavWidth(this.defaultNavWidth)\n      navWidthStore.value = this.navWidth\n      // store the raw consumer-provided default so mismatch detection is\n      // independent of the min/max clamp\n      navWidthDefaultStore.value = this.defaultNavWidth\n    }\n    else {\n      // ensure a previously-persisted width still respects current min/max\n      this.setNavWidth(this.navWidth)\n    }\n\n    // on mobile it should always start closed\n    if (this.isNarrow) {\n      this.navState = 'closed'\n    }\n    // if nav state is persisted, and it was previously closed, start closed\n    else if (this.persistNavState && navOpenStore.value === false) {\n      this.navState = 'closed'\n    }\n    // otherwise start open\n    else {\n      this.navState = 'opened'\n    }\n  }\n\n  render() {\n    const { navWidth, navState, navSlot, headerSlot, footerSlot, topBarSlot, drawerSlot, isDragging, direction } = this\n    const isRailCollapsed = this.wideScreen && this.collapseMode === 'rail' && navState !== 'opened'\n    const adjustedNavWidth = navState === 'opened' && this.wideScreen\n      ? navWidth\n      : isRailCollapsed\n        ? NAV_RAIL_WIDTH\n        : this.defaultNavWidth\n\n    return html`\n      <div\n        class=${classMap({\n          'n-layout': true,\n          'n-rtl': direction.isRTL,\n          'n-dragging': isDragging,\n          'n-has-header': headerSlot.hasContent,\n          'n-has-footer': footerSlot.hasContent,\n          'n-has-top-bar': topBarSlot.hasContent,\n          'n-has-drawer': drawerSlot.hasContent,\n          'n-has-nav': navSlot.hasContent,\n        })}\n        style=${styleMap({\n          '--_n-layout-nav-width': `${adjustedNavWidth}px`,\n          '--_n-layout-nav-rail-width': `var(--n-layout-nav-rail-width, ${this.navRailWidth}px)`,\n          // Mirror the min/max nav-width props as px so the hide-mode peek\n          // flyout can clamp its intrinsic (`fit-content`) width in CSS.\n          '--_n-layout-nav-min-width': `${this.minNavWidth}px`,\n          '--_n-layout-nav-max-width': `${this.maxNavWidth}px`,\n        })}\n        data-nav=${navSlot.hasContent ? navState : 'closed'}\n        data-screen=${this.wideScreen ? 'wide' : 'narrow'}\n        data-collapse-mode=${this.collapseMode}\n      >\n        <div\n          class=\"n-layout-nav\"\n          ?hidden=${navSlot.isEmpty}\n          @focusin=${this.handleNavFocus}\n          @mouseenter=${this.handleMouseEnter}\n          @mouseleave=${this.handleMouseLeave}\n          @open=${this.handleDropdownOpen}\n          @close=${this.handleDropdownClose}\n        >\n          <slot name=\"nav\" @click=${this.handleNavClick}></slot>\n          <div\n            class=\"n-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            aria-describedby=${cond(this.dividerTooltipSlot.hasContent && !isDragging, this.resizeTooltipId)}\n            @pointerdown=${cond(navState === 'opened' || isRailCollapsed, this.startDragging)}\n            @pointermove=${isDragging ? this.handleDrag : this.handleResizeHoverMove}\n            @pointerleave=${this.handleResizePointerLeave}\n            @pointerup=${this.stopDragging}\n            @keydown=${this.handleKeyboardResize}\n            ?hidden=${this.isNarrow}\n          ></div>\n          ${this.dividerTooltipSlot.hasContent\n            ? html`\n                <nord-tooltip id=${this.resizeTooltipId} position=\"inline-end\" class=\"n-resize-tooltip\">\n                  <slot name=\"tooltip-divider\"></slot>\n                </nord-tooltip>\n              `\n            : nothing}\n          ${this.hideCollapseButton ? nothing : this.renderNavCollapse()}\n        </div>\n\n        <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleMainClick}>\n          ${navSlot.hasContent && !this.hideDefaultNavToggle ? this.renderNavToggle() : nothing}\n\n          <div class=\"n-top-bar-container\">\n            <slot name=\"top-bar\"></slot>\n          </div>\n\n          <div class=\"n-layout-content\">\n            <div class=\"n-sticky\">\n              <slot name=\"header\"></slot>\n            </div>\n            <main>\n              <slot></slot>\n            </main>\n            <slot name=\"footer\"></slot>\n          </div>\n\n          <aside ?hidden=${this.drawerSlot.isEmpty}>\n            <slot name=\"drawer\"></slot>\n          </aside>\n        </div>\n      </div>\n    `\n  }\n\n  private renderNavToggle() {\n    return html`\n      <div class=\"n-nav-toggle-container\">\n        <slot\n          name=\"nav-toggle\"\n          @click=${this.handleToggleClick}\n          @mouseover=${this.handleMouseEnter}\n          @mouseout=${this.handleMouseLeave}\n        >\n          <nord-nav-toggle></nord-nav-toggle>\n        </slot>\n      </div>\n    `\n  }\n\n  private renderNavCollapse() {\n    return html`\n      <button class=\"n-collapse-btn\" @click=${this.handleToggleClick}>\n        <nord-icon name=\"navigation-toggle-lock\" size=\"s\"></nord-icon>\n      </button>\n    `\n  }\n\n  @observe('navWidth', 'updated')\n  protected handleNavWidthChange(prev: number) {\n    navWidthStore.value = this.navWidth\n    if (prev != null) {\n      const navWidth = this.navWidth\n      this.dispatchEvent(new NavResizeEvent(navWidth))\n    }\n  }\n\n  @observe('navState')\n  protected handleNavStateChange(prev: NavState) {\n    if (prev === 'wait' && this.peekTimeoutId) {\n      clearTimeout(this.peekTimeoutId)\n    }\n    if (prev === 'unpeek') {\n      this.navEl.removeEventListener('transitionend', this.handleTransitionEnd)\n    }\n\n    switch (this.navState) {\n      case 'closed':\n        this.navOpen = false\n        break\n      case 'opened':\n        this.navOpen = true\n        break\n      case 'wait':\n        this.peekTimeoutId = setTimeout(() => this.navTransition('timeout'), NAV_PEEK_DELAY)\n        break\n      case 'unpeek':\n        this.navEl.addEventListener('transitionend', this.handleTransitionEnd, { once: true })\n        break\n      default:\n        break\n    }\n  }\n\n  @observe('navOpen', 'updated')\n  protected handleOpenChange(prev: boolean) {\n    if (!this.isDragging) {\n      // when opening nav, it should restore to default width (or larger).\n      // unless it is being dragged, in which case the drag width wins\n      this.setNavWidth(Math.max(this.navWidth, this.defaultNavWidth))\n    }\n\n    this.navTransition(this.navOpen ? 'open' : 'close')\n\n    if (this.persistNavState) {\n      navOpenStore.value = this.navOpen\n    }\n\n    // skip first update, we only want subsequent changes\n    if (prev != null) {\n      // Bind to a local so the custom-elements-manifest analyzer can infer\n      // the event name from this constructor call site (it reads the bare\n      // identifier passed to `new NavOpenChangeEvent(...)`; a `this.x`\n      // member access defeats that heuristic and leaves the event nameless,\n      // which then crashes `scripts/build-react-types.mjs` on sort).\n      const navOpen = this.navOpen\n      // Suppress the broadcast when the change came from a received message,\n      // otherwise tabs would echo every update back at each other. See the\n      // `applyingRemote` field for the full rationale.\n      if (!this.applyingRemote) {\n        this.broadcast.post({ navOpen })\n      }\n      this.dispatchEvent(new NavOpenChangeEvent(navOpen))\n    }\n  }\n\n  /* ---------------------------------------------\n  / NAVIGATION OPEN/CLOSE LOGIC\n  / --------------------------------------------- */\n\n  private navTransition(event: NavEvent) {\n    this.navState = navMachine.transition(this.navState, event)\n  }\n\n  private handleNavClick(e: Event) {\n    if (!e.defaultPrevented && !this.wideScreen) {\n      const target = e.target as HTMLElement\n\n      if (isNavItemLeaf(target)) {\n        this.navTransition('close')\n      }\n    }\n  }\n\n  private handleMainClick() {\n    this.navTransition('click')\n  }\n\n  private handleDropdownOpen(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === 'nord-dropdown') {\n      this.navTransition('dropdownOpen')\n    }\n  }\n\n  private handleDropdownClose(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === 'nord-dropdown') {\n      this.navTransition('dropdownClose')\n    }\n  }\n\n  private handleMediaQueryChange = () => {\n    this.wideScreen = mediaQuery.matches\n    this.navTransition(this.wideScreen ? 'open' : 'close')\n  }\n\n  private handleToggleClick = (e: Event) => {\n    // Skip when a `<nord-nav-toggle>` is in the click path — `handleHostClick`\n    // will fire for it. Without this guard, an in-slot `<nord-nav-toggle>`\n    // would toggle twice (once via the slot handler, once via the host one).\n    if (isNavToggleClick(e)) {\n      return\n    }\n    this.navTransition('toggle')\n  }\n\n  // Allow `<nord-nav-toggle>` to be placed anywhere inside the layout, not\n  // just in the `nav-toggle` slot. Clicks on the host bubble up through the\n  // light-DOM subtree; if the composed path contains a `<nord-nav-toggle>`,\n  // we treat that as a toggle request.\n  private handleHostClick = (e: Event) => {\n    if (isNavToggleClick(e)) {\n      this.navTransition('toggle')\n    }\n  }\n\n  // Same delegation pattern as `handleHostClick`, but for hover-to-peek.\n  // `relatedTarget` filtering avoids re-firing as the cursor moves between\n  // children inside the same `<nord-nav-toggle>`.\n  private handleHostMouseOver = (e: MouseEvent) => {\n    const toggle = findNavToggleInPath(e.composedPath())\n    if (!toggle) {\n      return\n    }\n    if (e.relatedTarget instanceof Node && toggle.contains(e.relatedTarget)) {\n      return\n    }\n    this.handleMouseEnter()\n  }\n\n  private handleHostMouseOut = (e: MouseEvent) => {\n    const toggle = findNavToggleInPath(e.composedPath())\n    if (!toggle) {\n      return\n    }\n    if (e.relatedTarget instanceof Node && toggle.contains(e.relatedTarget)) {\n      return\n    }\n    this.handleMouseLeave()\n  }\n\n  private handleNavFocus = () => {\n    // In rail mode, the icons are already visible — focus inside the\n    // rail should not trigger a peek that re-expands the full sidebar.\n    if (this.wideScreen && this.collapseMode === 'rail') {\n      return\n    }\n    this.navTransition('focusin')\n  }\n\n  private handleMainFocus = () => {\n    this.navTransition('focusout')\n  }\n\n  private handleMouseEnter = () => {\n    if (!this.wideScreen) {\n      return\n    }\n    if (this.collapseMode === 'rail') {\n      return\n    }\n    this.navTransition('pointerenter')\n  }\n\n  private handleMouseLeave = () => {\n    if (this.wideScreen && this.collapseMode === 'rail') {\n      return\n    }\n    this.navTransition('pointerleave')\n  }\n\n  private handleTransitionEnd = () => {\n    this.navTransition('transitionend')\n  }\n\n  /* ---------------------------------------------\n  / RESIZE LOGIC\n  / --------------------------------------------- */\n\n  private handleKeyboardResize(e: KeyboardEvent) {\n    const {\n      navWidth,\n      direction: { isLTR },\n    } = this\n\n    switch (e.key) {\n      case 'ArrowLeft':\n        this.setNavWidth(navWidth + (isLTR ? -NAV_RESIZE_STEP : NAV_RESIZE_STEP))\n        break\n      case 'ArrowRight':\n        this.setNavWidth(navWidth + (isLTR ? NAV_RESIZE_STEP : -NAV_RESIZE_STEP))\n        break\n      case 'Enter':\n        this.navTransition('toggle')\n        break\n      case 'Home':\n        this.setNavWidth(this.minNavWidth)\n        break\n      case 'End':\n        this.setNavWidth(this.maxNavWidth)\n        break\n      default:\n        return\n    }\n\n    this.broadcast.post({ navWidth: this.navWidth })\n    e.preventDefault()\n  }\n\n  private setNavWidth(width: number) {\n    this.navWidth = clamp(Math.round(width), this.minNavWidth, this.maxNavWidth)\n  }\n\n  private dragStartX = 0\n  private hasDragged = false\n\n  private startDragging(e: PointerEvent) {\n    if (e.button === 0) {\n      const target = e.target as Element\n      target.setPointerCapture(e.pointerId)\n      this.isDragging = true\n      this.dragStartX = e.clientX\n      this.hasDragged = false\n    }\n  }\n\n  private stopDragging() {\n    if (this.isDragging && this.toggleOnResizeClick && !this.hasDragged) {\n      this.navTransition('toggle')\n    }\n    this.isDragging = false\n    this.hasDragged = false\n    this.broadcast.post({ navWidth: this.navWidth })\n  }\n\n  private handleResizeHoverMove = (e: PointerEvent) => {\n    const target = e.currentTarget as HTMLElement | null\n    if (!target || !this.resizeTooltipEl)\n      return\n\n    const rect = target.getBoundingClientRect()\n    const offset = e.clientY - (rect.top + rect.height / 2)\n    this.resizeTooltipEl.style.setProperty('--n-resize-tooltip-y', `${offset}px`)\n  }\n\n  private handleResizePointerLeave = () => {\n    this.stopDragging()\n    this.resizeTooltipEl?.style.removeProperty('--n-resize-tooltip-y')\n  }\n\n  private handleDrag(e: PointerEvent) {\n    if (!this.hasDragged && Math.abs(e.clientX - this.dragStartX) < NAV_RESIZE_DRAG_THRESHOLD) {\n      return\n    }\n    this.hasDragged = true\n\n    const width = this.direction.isRTL ? this.clientWidth - e.clientX : e.clientX\n\n    this.setNavWidth(width)\n    this.navTransition(width >= NAV_COLLAPSE_WIDTH ? 'open' : 'close')\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-layout': Layout\n  }\n}\n"],"names":["defaultEnabled","BroadcastChannelController","constructor","host","options","addController","this","enabled","hostConnected","BroadcastChannel","channel","channelName","addEventListener","hostDisconnected","_a","removeEventListener","_b","close","handleEvent","event","onMessage","data","post","message","postMessage","Icon","registerIcon","lockIcon","resizeTooltipIdCounter","NAV_DEFAULT_WIDTH","mediaQuery","matchMedia","matches","navWidthStore","storage","navWidthDefaultStore","navOpenStore","findNavToggleInPath","path","target","HTMLElement","localName","isNavToggleClick","e","composedPath","navMachine","fsm","opened","toggle","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","resizeTooltipId","navSlot","SlotController","drawerSlot","topBarSlot","headerSlot","footerSlot","dividerTooltipSlot","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","wideScreen","onDismiss","navTransition","isDismissible","node","navEl","applyingRemote","broadcast","syncNavState","navOpen","navWidth","updateComplete","then","value","isDragging","persistNavState","defaultNavWidth","minNavWidth","maxNavWidth","navRailWidth","padding","sticky","stickyFooter","hideDefaultNavToggle","hideCollapseButton","toggleOnResizeClick","collapseMode","handleFooterSlotChange","next","footerSlotEl","assignedElements","flatten","observedFooterElement","footerSizeObserver","disconnect","ResizeObserver","publishFooterSize","observe","style","removeProperty","handleMediaQueryChange","handleToggleClick","handleHostClick","handleHostMouseOver","relatedTarget","Node","contains","handleMouseEnter","handleHostMouseOut","handleMouseLeave","handleNavFocus","handleMainFocus","handleTransitionEnd","dragStartX","hasDragged","handleResizeHoverMove","currentTarget","resizeTooltipEl","rect","getBoundingClientRect","offset","clientY","top","height","setProperty","handleResizePointerLeave","stopDragging","isNarrow","connectedCallback","super","listen","disconnectedCallback","headerSizeObserver","undefined","firstUpdated","stickyHeaderEl","publishHeaderSize","size","willUpdate","hasUpdated","Number","isFinite","setNavWidth","render","isRailCollapsed","adjustedNavWidth","html","classMap","isRTL","hasContent","styleMap","isEmpty","handleDropdownOpen","handleDropdownClose","handleNavClick","cond","startDragging","handleDrag","handleKeyboardResize","nothing","renderNavCollapse","handleMainClick","renderNavToggle","handleNavWidthChange","prev","dispatchEvent","NavResizeEvent","handleNavStateChange","peekTimeoutId","clearTimeout","setTimeout","once","handleOpenChange","Math","max","NavOpenChangeEvent","transition","defaultPrevented","el","isNavItem","hasSubNav","isLTR","key","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientX","abs","clientWidth","styles","componentStyle","stickyStyle","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","customElement"],"mappings":"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"}

package/lib/NavItem.js

@@ -1,2 +1,2 @@
-import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as t,nothing as a,LitElement as i}from"lit";import{query as o,state as r,property as s,customElement as l}from"lit/decorators.js";import{classMap as d}from"lit/directives/class-map.js";import{ref as v}from"lit/directives/ref.js";import{D as c}from"./DirectionController-ChvNGESZ.js";import{S as p}from"./SlotController-Z6eG7LSZ.js";import{o as h}from"./observe-D0n0zOfU.js";import{c as b}from"./cond-CI1KbneT.js";import{N as u}from"./events-Bv6wNHwJ.js";import{F as m}from"./FocusableMixin-BlQLNPdJ.js";import{s as g}from"./Component-DSU3Qp0O.js";import"./Popout-DtEL0HZ0.js";import"./Tooltip.js";import"./EventController-BBOmvfLa.js";import"./positioning-D-K8Mueq.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-BFC67Y2x.js";import"./fsm-Bq5jMQrK.js";const f=e`:host{--_n-nav-item-box-shadow:none;--n-nav-item-color:var(--n-color-text-weak);--n-nav-item-background:transparent;--n-nav-item-border-radius:var(--n-border-radius-s);--n-nav-item-padding-block:var(--n-space-s);--n-nav-item-padding-inline:var(--n-space-s);--n-nav-item-line-height:var(--n-line-height-tight);--n-nav-item-icon-gap:calc(var(--n-space-s) * 1.4);--n-nav-item-color-hover:var(--n-color-text);--n-nav-item-background-hover:var(--n-color-nav-hover);--n-nav-item-color-active:var(--n-color-text-on-accent);--n-nav-item-background-active:var(--n-color-accent);--n-nav-item-color-expanded:var(--n-color-text-weak);--n-nav-item-background-expanded:var(--n-color-accent);--n-nav-item-expanded-overlay-opacity:0.12;--n-nav-item-expanded-overlay-filter:brightness(150%)}.n-nav-item{user-select:none;display:flex;align-items:center;font-family:inherit;font-size:inherit;line-height:var(--n-nav-item-line-height);appearance:none;color:var(--n-nav-item-color);padding-block-start:var(--n-nav-item-padding-block);padding-block-end:var(--n-nav-item-padding-block);padding-inline-start:var(--n-nav-item-padding-inline);padding-inline-end:var(--n-nav-item-padding-inline);min-block-size:32px;margin-block-end:1px;border-radius:var(--n-nav-item-border-radius);text-decoration:none;inline-size:100%;max-inline-size:100%;background:var(--n-nav-item-background);cursor:pointer;border:0;text-align:start;box-shadow:var(--_n-nav-item-box-shadow);position:relative;z-index:var(--n-index-default)}.n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}@supports selector(:focus-visible){.n-nav-item:focus{--_n-nav-item-box-shadow:none}.n-nav-item:focus-visible{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent)}}.n-nav-item:hover{background:var(--n-nav-item-background-hover);color:var(--n-nav-item-color-hover)}.n-nav-item:active{opacity:.7}.n-nav-content{display:flex;align-items:center;flex:1;min-inline-size:0}.n-nav-label{flex:1;min-inline-size:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([active]) .n-nav-item{--_n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-nav-item-background-active);color:var(--n-nav-item-color-active);font-weight:var(--n-font-weight-active)}:host([active]) .n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) nord-icon{color:currentColor}.n-toggle-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s);margin-inline-start:var(--n-space-s)}.n-toggle-icon.n-rtl{transform:rotate(-180deg)}[aria-expanded=true] .n-toggle-icon{transform:rotate(90deg)}:host([active]) .n-nav-item[aria-expanded]{--_n-nav-item-box-shadow:none;color:var(--n-nav-item-color-expanded);font-weight:var(--n-font-weight);background:0 0}:host([active]) .n-nav-item[aria-expanded]:focus-visible{--_n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) .n-nav-item[aria-expanded]::after{content:'';position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--n-index-deep);border-radius:var(--n-nav-item-border-radius);block-size:100%;inline-size:100%;opacity:var(--n-nav-item-expanded-overlay-opacity);background:var(--n-nav-item-background-expanded);filter:var(--n-nav-item-expanded-overlay-filter)}.n-nav-icon{margin-inline-end:var(--n-nav-item-icon-gap);flex-shrink:0}slot.n-nav-icon{display:inline-flex;align-items:center}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + calc(var(--n-space-s) * 1.3))}.n-rail-host{position:relative}.n-rail-item{--_n-rail-size:32px;inline-size:var(--_n-rail-size);min-inline-size:var(--_n-rail-size);block-size:var(--_n-rail-size);padding:0;justify-content:center}.n-rail-item .n-nav-icon{margin-inline-end:0}.n-rail-fallback{font-weight:var(--n-font-weight-active)}.n-rail-subnav-indicator{position:absolute;inset-block-end:calc(var(--n-space-xs)/ 2);inset-inline-end:calc(var(--n-space-xs)/ 2);inline-size:5px;block-size:5px;color:var(--n-rail-subnav-indicator-color,var(--n-color-border-strong));pointer-events:none}.n-rtl .n-rail-subnav-indicator{transform:scaleX(-1)}.n-rail-host:hover .n-rail-subnav-indicator{color:var(--n-rail-subnav-indicator-color,var(--n-color-border-strong))}.n-rail-host:has(nord-popout[open]) .n-rail-subnav-indicator{color:var(--n-rail-subnav-indicator-color-active,var(--n-color-border-hover))}.n-rail-host:has(nord-popout[open]) .n-rail-item{background:var(--n-nav-item-background-expanded)}.n-nav-badge.n-rail-badge{position:absolute;inset-block-start:3px;inset-inline-end:2px;margin:0;padding:0;min-inline-size:var(--n-rail-badge-size,5px);inline-size:var(--n-rail-badge-size,5px);block-size:var(--n-rail-badge-size,5px);font-size:0;color:transparent;overflow:hidden}.n-rail-slotted-end{position:absolute;inset-block-start:0;inset-inline-end:8px;pointer-events:none}.n-rail-flyout-body{min-inline-size:var(--n-rail-flyout-min-inline-size,220px);padding:var(--n-rail-flyout-padding,var(--n-space-s));background:var(--n-rail-flyout-background,var(--n-color-surface));border-radius:var(--n-border-radius-s);box-shadow:var(--n-rail-flyout-box-shadow,var(--n-box-shadow-popout))}.n-rail-host nord-popout{--n-color-surface:transparent;--n-box-shadow-popout:none;transform:translate(var(--n-rail-flyout-offset-inline,0),var(--n-rail-flyout-offset-block,0))}.n-rtl .n-rail-host nord-popout{transform:translate(calc(var(--n-rail-flyout-offset-inline,0) * -1),var(--n-rail-flyout-offset-block,0))}.n-rail-flyout-body ::slotted(nord-nav-group){margin-inline-start:0}.n-nav-badge{display:inline-block;margin-inline-start:var(--n-nav-badge-margin-inline-start,var(--n-space-xs));border-radius:var(--n-nav-badge-border-radius,var(--n-border-radius-pill));background:var(--n-nav-badge-background,var(--n-color-status-notification));color:var(--n-nav-badge-color,#fff);font-weight:var(--n-nav-badge-font-weight,var(--n-font-weight));font-feature-settings:var(--n-font-features-reduced);padding-block-start:var(--n-nav-badge-padding-block,var(--n-space-xs));padding-block-end:var(--n-nav-badge-padding-block,var(--n-space-xs));padding-inline-start:var(--n-nav-badge-padding-inline,calc(var(--n-space-s)/ 2));padding-inline-end:var(--n-nav-badge-padding-inline,calc(var(--n-space-s)/ 2));text-align:center;min-inline-size:var(--n-nav-badge-min-inline-size,20px);font-size:var(--n-nav-badge-font-size,var(--n-font-size-xs));line-height:var(--n-nav-badge-line-height,1)}`;let x=0,y=0;const k="undefined"!=typeof matchMedia?matchMedia("(min-width: 768px)"):{matches:!1,addEventListener(){},removeEventListener(){}};let w=class extends(m(i)){constructor(){super(...arguments),this.subnavSlot=new p(this,"subnav"),this.iconSlot=new p(this,"icon"),this.railTooltipSlot=new p(this,"rail-tooltip"),this.direction=new c(this),this.tooltipId="n-nav-rail-tip-"+ ++x,this.popoutId="n-nav-rail-pop-"+ ++y,this.railCollapsed=!1,this.active=!1,this.open=!1,this.handleViewportChange=()=>this.updateRailState()}get hasSubNav(){return this.subnavSlot.hasContent}connectedCallback(){super.connectedCallback(),this.startObservingLayout(),k.addEventListener("change",this.handleViewportChange)}disconnectedCallback(){super.disconnectedCallback(),this.stopObservingLayout(),k.removeEventListener("change",this.handleViewportChange)}startObservingLayout(){this.observedLayout=this.closest("nord-layout"),this.observedLayout&&(this.updateRailState(),this.layoutObserver=new MutationObserver((()=>this.updateRailState())),this.layoutObserver.observe(this.observedLayout,{attributes:!0,attributeFilter:["nav-open","collapse-mode"]}))}stopObservingLayout(){var n,e;null===(n=this.layoutObserver)||void 0===n||n.disconnect(),this.layoutObserver=void 0,this.observedLayout=void 0,this.railCollapsed=!1,null===(e=this.popoutEl)||void 0===e||e.hide()}updateRailState(){var n,e;if(!this.observedLayout)return;const t=!!!(null===(n=this.parentElement)||void 0===n?void 0:n.closest("nord-nav-item"))&&k.matches&&"rail"===this.observedLayout.getAttribute("collapse-mode")&&!this.observedLayout.hasAttribute("nav-open");t||null===(e=this.popoutEl)||void 0===e||e.hide(),this.railCollapsed=t}render(){if(this.railCollapsed)return this.renderRail();const n=t`${this.renderLeadingIcon()}<div class="n-nav-content"><span class="n-nav-label"><slot></slot></span>${this.badge?t`<span class="n-nav-badge">${this.badge}</span>`:a}<slot name="end"></slot></div>`;let e;return e=this.subnavSlot.hasContent?this.renderToggle(n):this.href?this.renderLink(n):this.renderButton(n),t`<div role="listitem">${e}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLeadingIcon(){return this.iconSlot.hasContent?t`<slot name="icon" class="n-nav-icon"></slot>`:this.icon?t`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:a}renderRail(){const n=this.renderLeadingIcon(),e=n===a?t`<span class="n-rail-fallback">${this.textInitial}</span>`:n,i=this.badge?t`<span class="n-nav-badge n-rail-badge">${this.badge}</span>`:a;return this.subnavSlot.hasContent?this.renderRailFlyout(e,i):t`<div role="listitem" class="n-rail-host">${this.href?t`<a class="n-nav-item n-rail-item" ${v(this.focusableRef)} aria-current="${b(this.active,"page")}" aria-describedby="${this.tooltipId}" href="${this.href}">${e}${i}</a>`:t`<button class="n-nav-item n-rail-item" ${v(this.focusableRef)} aria-describedby="${this.tooltipId}">${e}${i}</button>`}<slot name="end" class="n-rail-slotted-end"></slot><nord-tooltip id="${this.tooltipId}" position="inline-end">${this.railTooltipSlot.hasContent?t`<slot name="rail-tooltip"></slot>`:t`<slot></slot>`}</nord-tooltip></div>`}renderRailFlyout(n,e){return t`<div role="listitem" class="n-rail-host"><button class="n-nav-item n-rail-item" ${v(this.focusableRef)} aria-controls="${this.popoutId}" aria-describedby="${this.tooltipId}">${n}${e} <svg class="n-rail-subnav-indicator" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="5" height="5" viewBox="0 0 5 5" fill="none"><path d="M4.29388 3.79388V0.500991C4.29388 0.0555387 3.75531 -0.167545 3.44033 0.147438L0.147437 3.44033C-0.167545 3.75531 0.0555386 4.29388 0.500991 4.29388H3.79388C4.07003 4.29388 4.29388 4.07003 4.29388 3.79388Z" fill="currentColor"/></svg></button><slot name="end" class="n-rail-slotted-end"></slot><nord-tooltip id="${this.tooltipId}" position="inline-end">${this.railTooltipSlot.hasContent?t`<slot name="rail-tooltip"></slot>`:t`<slot></slot>`}</nord-tooltip><nord-popout id="${this.popoutId}" position="inline-end" always-floating><div class="n-rail-flyout-body"><slot name="${this.subnavSlot.slotName}"></slot></div></nord-popout></div>`}get textInitial(){var n,e;return(null!==(e=null===(n=this.textContent)||void 0===n?void 0:n.trim())&&void 0!==e?e:"").charAt(0).toUpperCase()}renderLink(n){return t`<a class="n-nav-item" ${v(this.focusableRef)} aria-current="${b(this.active,"page")}" href="${this.href||""}">${n}</a>`}renderToggle(n){return t`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${v(this.focusableRef)}>${n}<nord-icon size="xxs" class="${d({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(n){return t`<button class="n-nav-item" ${v(this.focusableRef)}>${n}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new u("toggle"))}handleActiveChange(){this.active&&!this.hasSubNav&&this.dispatchEvent(new u("activate"))}};w.styles=[g,f],n([o("nord-popout")],w.prototype,"popoutEl",void 0),n([r()],w.prototype,"railCollapsed",void 0),n([s({type:Boolean,reflect:!0})],w.prototype,"active",void 0),n([s({reflect:!0})],w.prototype,"icon",void 0),n([s({reflect:!0})],w.prototype,"href",void 0),n([s({reflect:!0})],w.prototype,"badge",void 0),n([s({reflect:!0,type:Boolean})],w.prototype,"open",void 0),n([h("active","updated")],w.prototype,"handleActiveChange",null),w=n([l("nord-nav-item")],w);var $=w;export{$ as default};
+import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as t,nothing as a,LitElement as i}from"lit";import{query as o,state as r,property as s,customElement as l}from"lit/decorators.js";import{classMap as d}from"lit/directives/class-map.js";import{ref as v}from"lit/directives/ref.js";import{D as c}from"./DirectionController-ChvNGESZ.js";import{S as p}from"./SlotController-Z6eG7LSZ.js";import{o as h}from"./observe-D0n0zOfU.js";import{c as b}from"./cond-CI1KbneT.js";import{N as u}from"./events-Bv6wNHwJ.js";import{F as m}from"./FocusableMixin-BlQLNPdJ.js";import{s as g}from"./Component-DSU3Qp0O.js";import"./Popout-CYqn_dZu.js";import"./Tooltip.js";import"./EventController-BBOmvfLa.js";import"./positioning-D-K8Mueq.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-BFC67Y2x.js";import"./fsm-Bq5jMQrK.js";const f=e`:host{--_n-nav-item-box-shadow:none;--n-nav-item-color:var(--n-color-text-weak);--n-nav-item-background:transparent;--n-nav-item-border-radius:var(--n-border-radius-s);--n-nav-item-padding-block:var(--n-space-s);--n-nav-item-padding-inline:var(--n-space-s);--n-nav-item-line-height:var(--n-line-height-tight);--n-nav-item-icon-gap:calc(var(--n-space-s) * 1.4);--n-nav-item-color-hover:var(--n-color-text);--n-nav-item-background-hover:var(--n-color-nav-hover);--n-nav-item-color-active:var(--n-color-text-on-accent);--n-nav-item-background-active:var(--n-color-accent);--n-nav-item-color-expanded:var(--n-color-text-weak);--n-nav-item-background-expanded:var(--n-color-accent);--n-nav-item-expanded-overlay-opacity:0.12;--n-nav-item-expanded-overlay-filter:brightness(150%)}.n-nav-item{user-select:none;display:flex;align-items:center;font-family:inherit;font-size:inherit;line-height:var(--n-nav-item-line-height);appearance:none;color:var(--n-nav-item-color);padding-block-start:var(--n-nav-item-padding-block);padding-block-end:var(--n-nav-item-padding-block);padding-inline-start:var(--n-nav-item-padding-inline);padding-inline-end:var(--n-nav-item-padding-inline);min-block-size:32px;margin-block-end:1px;border-radius:var(--n-nav-item-border-radius);text-decoration:none;inline-size:100%;max-inline-size:100%;background:var(--n-nav-item-background);cursor:pointer;border:0;text-align:start;box-shadow:var(--_n-nav-item-box-shadow);position:relative;z-index:var(--n-index-default)}.n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}@supports selector(:focus-visible){.n-nav-item:focus{--_n-nav-item-box-shadow:none}.n-nav-item:focus-visible{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent)}}.n-nav-item:hover{background:var(--n-nav-item-background-hover);color:var(--n-nav-item-color-hover)}.n-nav-item:active{opacity:.7}.n-nav-content{display:flex;align-items:center;flex:1;min-inline-size:0}.n-nav-label{flex:1;min-inline-size:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([active]) .n-nav-item{--_n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-nav-item-background-active);color:var(--n-nav-item-color-active);font-weight:var(--n-font-weight-active)}:host([active]) .n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) nord-icon{color:currentColor}.n-toggle-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s);margin-inline-start:var(--n-space-s)}.n-toggle-icon.n-rtl{transform:rotate(-180deg)}[aria-expanded=true] .n-toggle-icon{transform:rotate(90deg)}:host([active]) .n-nav-item[aria-expanded]{--_n-nav-item-box-shadow:none;color:var(--n-nav-item-color-expanded);font-weight:var(--n-font-weight);background:0 0}:host([active]) .n-nav-item[aria-expanded]:focus-visible{--_n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) .n-nav-item[aria-expanded]::after{content:'';position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--n-index-deep);border-radius:var(--n-nav-item-border-radius);block-size:100%;inline-size:100%;opacity:var(--n-nav-item-expanded-overlay-opacity);background:var(--n-nav-item-background-expanded);filter:var(--n-nav-item-expanded-overlay-filter)}.n-nav-icon{margin-inline-end:var(--n-nav-item-icon-gap);flex-shrink:0}slot.n-nav-icon{display:inline-flex;align-items:center}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + calc(var(--n-space-s) * 1.3))}.n-rail-host{position:relative}.n-rail-item{--_n-rail-size:32px;inline-size:var(--_n-rail-size);min-inline-size:var(--_n-rail-size);block-size:var(--_n-rail-size);padding:0;justify-content:center}.n-rail-item .n-nav-icon{margin-inline-end:0}.n-rail-fallback{font-weight:var(--n-font-weight-active)}.n-rail-subnav-indicator{position:absolute;inset-block-end:calc(var(--n-space-xs)/ 2);inset-inline-end:calc(var(--n-space-xs)/ 2);inline-size:5px;block-size:5px;color:var(--n-rail-subnav-indicator-color,var(--n-color-border-strong));pointer-events:none}.n-rtl .n-rail-subnav-indicator{transform:scaleX(-1)}.n-rail-host:hover .n-rail-subnav-indicator{color:var(--n-rail-subnav-indicator-color,var(--n-color-border-strong))}.n-rail-host:has(nord-popout[open]) .n-rail-subnav-indicator{color:var(--n-rail-subnav-indicator-color-active,var(--n-color-border-hover))}.n-rail-host:has(nord-popout[open]) .n-rail-item{background:var(--n-nav-item-background-expanded)}.n-nav-badge.n-rail-badge{position:absolute;inset-block-start:3px;inset-inline-end:2px;margin:0;padding:0;min-inline-size:var(--n-rail-badge-size,5px);inline-size:var(--n-rail-badge-size,5px);block-size:var(--n-rail-badge-size,5px);font-size:0;color:transparent;overflow:hidden}.n-rail-slotted-end{position:absolute;inset-block-start:0;inset-inline-end:8px;pointer-events:none}.n-rail-flyout-body{min-inline-size:var(--n-rail-flyout-min-inline-size,220px);padding:var(--n-rail-flyout-padding,var(--n-space-s));background:var(--n-rail-flyout-background,var(--n-color-surface));border-radius:var(--n-border-radius-s);box-shadow:var(--n-rail-flyout-box-shadow,var(--n-box-shadow-popout))}.n-rail-host nord-popout{--n-popout-background:transparent;--n-popout-box-shadow:none;transform:translate(var(--n-rail-flyout-offset-inline,0),var(--n-rail-flyout-offset-block,0))}.n-rtl .n-rail-host nord-popout{transform:translate(calc(var(--n-rail-flyout-offset-inline,0) * -1),var(--n-rail-flyout-offset-block,0))}.n-rail-flyout-body ::slotted(nord-nav-group){margin-inline-start:0}.n-nav-badge{display:inline-block;margin-inline-start:var(--n-nav-badge-margin-inline-start,var(--n-space-xs));border-radius:var(--n-nav-badge-border-radius,var(--n-border-radius-pill));background:var(--n-nav-badge-background,var(--n-color-status-notification));color:var(--n-nav-badge-color,#fff);font-weight:var(--n-nav-badge-font-weight,var(--n-font-weight));font-feature-settings:var(--n-font-features-reduced);padding-block-start:var(--n-nav-badge-padding-block,var(--n-space-xs));padding-block-end:var(--n-nav-badge-padding-block,var(--n-space-xs));padding-inline-start:var(--n-nav-badge-padding-inline,calc(var(--n-space-s)/ 2));padding-inline-end:var(--n-nav-badge-padding-inline,calc(var(--n-space-s)/ 2));text-align:center;min-inline-size:var(--n-nav-badge-min-inline-size,20px);font-size:var(--n-nav-badge-font-size,var(--n-font-size-xs));line-height:var(--n-nav-badge-line-height,1)}`;let x=0,y=0;const k="undefined"!=typeof matchMedia?matchMedia("(min-width: 768px)"):{matches:!1,addEventListener(){},removeEventListener(){}};let w=class extends(m(i)){constructor(){super(...arguments),this.subnavSlot=new p(this,"subnav"),this.iconSlot=new p(this,"icon"),this.railTooltipSlot=new p(this,"rail-tooltip"),this.direction=new c(this),this.tooltipId="n-nav-rail-tip-"+ ++x,this.popoutId="n-nav-rail-pop-"+ ++y,this.railCollapsed=!1,this.active=!1,this.open=!1,this.handleViewportChange=()=>this.updateRailState()}get hasSubNav(){return this.subnavSlot.hasContent}connectedCallback(){super.connectedCallback(),this.startObservingLayout(),k.addEventListener("change",this.handleViewportChange)}disconnectedCallback(){super.disconnectedCallback(),this.stopObservingLayout(),k.removeEventListener("change",this.handleViewportChange)}startObservingLayout(){this.observedLayout=this.closest("nord-layout"),this.observedLayout&&(this.updateRailState(),this.layoutObserver=new MutationObserver((()=>this.updateRailState())),this.layoutObserver.observe(this.observedLayout,{attributes:!0,attributeFilter:["nav-open","collapse-mode"]}))}stopObservingLayout(){var n,e;null===(n=this.layoutObserver)||void 0===n||n.disconnect(),this.layoutObserver=void 0,this.observedLayout=void 0,this.railCollapsed=!1,null===(e=this.popoutEl)||void 0===e||e.hide()}updateRailState(){var n,e;if(!this.observedLayout)return;const t=!!!(null===(n=this.parentElement)||void 0===n?void 0:n.closest("nord-nav-item"))&&k.matches&&"rail"===this.observedLayout.getAttribute("collapse-mode")&&!this.observedLayout.hasAttribute("nav-open");t||null===(e=this.popoutEl)||void 0===e||e.hide(),this.railCollapsed=t}render(){if(this.railCollapsed)return this.renderRail();const n=t`${this.renderLeadingIcon()}<div class="n-nav-content"><span class="n-nav-label"><slot></slot></span>${this.badge?t`<span class="n-nav-badge">${this.badge}</span>`:a}<slot name="end"></slot></div>`;let e;return e=this.subnavSlot.hasContent?this.renderToggle(n):this.href?this.renderLink(n):this.renderButton(n),t`<div role="listitem">${e}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLeadingIcon(){return this.iconSlot.hasContent?t`<slot name="icon" class="n-nav-icon"></slot>`:this.icon?t`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:a}renderRail(){const n=this.renderLeadingIcon(),e=n===a?t`<span class="n-rail-fallback">${this.textInitial}</span>`:n,i=this.badge?t`<span class="n-nav-badge n-rail-badge">${this.badge}</span>`:a;return this.subnavSlot.hasContent?this.renderRailFlyout(e,i):t`<div role="listitem" class="n-rail-host">${this.href?t`<a class="n-nav-item n-rail-item" ${v(this.focusableRef)} aria-current="${b(this.active,"page")}" aria-describedby="${this.tooltipId}" href="${this.href}">${e}${i}</a>`:t`<button class="n-nav-item n-rail-item" ${v(this.focusableRef)} aria-describedby="${this.tooltipId}">${e}${i}</button>`}<slot name="end" class="n-rail-slotted-end"></slot><nord-tooltip id="${this.tooltipId}" position="inline-end">${this.railTooltipSlot.hasContent?t`<slot name="rail-tooltip"></slot>`:t`<slot></slot>`}</nord-tooltip></div>`}renderRailFlyout(n,e){return t`<div role="listitem" class="n-rail-host"><button class="n-nav-item n-rail-item" ${v(this.focusableRef)} aria-controls="${this.popoutId}" aria-describedby="${this.tooltipId}">${n}${e} <svg class="n-rail-subnav-indicator" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="5" height="5" viewBox="0 0 5 5" fill="none"><path d="M4.29388 3.79388V0.500991C4.29388 0.0555387 3.75531 -0.167545 3.44033 0.147438L0.147437 3.44033C-0.167545 3.75531 0.0555386 4.29388 0.500991 4.29388H3.79388C4.07003 4.29388 4.29388 4.07003 4.29388 3.79388Z" fill="currentColor"/></svg></button><slot name="end" class="n-rail-slotted-end"></slot><nord-tooltip id="${this.tooltipId}" position="inline-end">${this.railTooltipSlot.hasContent?t`<slot name="rail-tooltip"></slot>`:t`<slot></slot>`}</nord-tooltip><nord-popout id="${this.popoutId}" position="inline-end" always-floating><div class="n-rail-flyout-body"><slot name="${this.subnavSlot.slotName}"></slot></div></nord-popout></div>`}get textInitial(){var n,e;return(null!==(e=null===(n=this.textContent)||void 0===n?void 0:n.trim())&&void 0!==e?e:"").charAt(0).toUpperCase()}renderLink(n){return t`<a class="n-nav-item" ${v(this.focusableRef)} aria-current="${b(this.active,"page")}" href="${this.href||""}">${n}</a>`}renderToggle(n){return t`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${v(this.focusableRef)}>${n}<nord-icon size="xxs" class="${d({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(n){return t`<button class="n-nav-item" ${v(this.focusableRef)}>${n}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new u("toggle"))}handleActiveChange(){this.active&&!this.hasSubNav&&this.dispatchEvent(new u("activate"))}};w.styles=[g,f],n([o("nord-popout")],w.prototype,"popoutEl",void 0),n([r()],w.prototype,"railCollapsed",void 0),n([s({type:Boolean,reflect:!0})],w.prototype,"active",void 0),n([s({reflect:!0})],w.prototype,"icon",void 0),n([s({reflect:!0})],w.prototype,"href",void 0),n([s({reflect:!0})],w.prototype,"badge",void 0),n([s({reflect:!0,type:Boolean})],w.prototype,"open",void 0),n([h("active","updated")],w.prototype,"handleActiveChange",null),w=n([l("nord-nav-item")],w);var $=w;export{$ as default};
 //# sourceMappingURL=NavItem.js.map

package/lib/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import type { TemplateResult } from 'lit'\nimport type Popout from '../popout/Popout.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ref } from 'lit/directives/ref.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { cond } from '../common/directives/cond.js'\nimport { NordEvent } from '../common/events.js'\n\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './NavItem.css'\n\nimport '../popout/Popout.js'\nimport '../tooltip/Tooltip.js'\n\nlet railTooltipIdCounter = 0\nlet railPopoutIdCounter = 0\n\n// Mirrors the layout's wide-viewport breakpoint so nav items only\n// switch to icon-only rendering when the layout actually shows the rail.\nconst railMediaQuery\n  = typeof matchMedia !== 'undefined'\n    ? matchMedia('(min-width: 768px)')\n    : ({\n        matches: false,\n        addEventListener() {\n          /* noop */\n        },\n        removeEventListener() {\n          /* noop */\n        },\n      } as unknown as MediaQueryList)\n\n/**\n * Navigation item populates sidebar navigation with links.\n * Every item should be placed inside a navigation group.\n *\n * @status ready\n * @category navigation\n * @slot - The default slot used for the nav item's text.\n * @slot icon - Slot for a custom leading icon element. Use when the `icon` attribute isn't enough — for example, an icon wrapped in a styled badge or circular frame. When set, it takes priority over the `icon` attribute and is shown in both the expanded nav and the collapsed rail.\n * @slot end - Trailing content rendered after the label inside the item's flex row. The slotted element flows naturally — it claims its real width and the label flex-shrinks to make room. Use for a custom badge, count pill, action icon, etc. when the `badge` attribute's plain text isn't enough.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n * @slot rail-tooltip - Full content of the rail-mode tooltip. When provided, it replaces the default label projection — write the tooltip's content directly (label + count + keyboard shortcut etc., bound to whatever reactive state you like). When absent, the tooltip falls back to the item's default-slot label. Only rendered in rail mode.\n *\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires activate - Dispatched whenever a nav item has been marked as active\n *\n * @cssprop [--n-nav-item-color=var(--n-color-text-weak)] - Text color in the default state.\n * @cssprop [--n-nav-item-background=transparent] - Background color in the default state.\n * @cssprop [--n-nav-item-border-radius=var(--n-border-radius-s)] - Border radius of the item and its active-parent overlay.\n * @cssprop [--n-nav-item-padding-block=var(--n-space-s)] - Block-axis (top/bottom) padding.\n * @cssprop [--n-nav-item-padding-inline=var(--n-space-s)] - Inline-axis (start/end) padding.\n * @cssprop [--n-nav-item-line-height=var(--n-line-height-tight)] - Line height of the item's text.\n * @cssprop [--n-nav-item-icon-gap=calc(var(--n-space-s) * 1.4)] - Inline gap between the leading icon (the `icon` attribute or `icon` slot) and the item's text.\n * @cssprop [--n-nav-item-color-hover=var(--n-color-text)] - Text color on hover.\n * @cssprop [--n-nav-item-background-hover=var(--n-color-nav-hover)] - Background color on hover.\n * @cssprop [--n-nav-item-color-active=var(--n-color-text-on-accent)] - Text color when the item is `active`.\n * @cssprop [--n-nav-item-background-active=var(--n-color-accent)] - Background color when the item is `active`.\n * @cssprop [--n-nav-item-color-expanded=var(--n-color-text-weak)] - Text color when the item is an active parent (its subnav is expanded).\n * @cssprop [--n-nav-item-background-expanded=var(--n-color-accent)] - Background color of the overlay drawn behind an active-parent item.\n * @cssprop [--n-nav-item-expanded-overlay-opacity=0.12] - Opacity of the active-parent overlay. Set to `1` for a solid background.\n * @cssprop [--n-nav-item-expanded-overlay-filter=brightness(150%)] - Filter applied to the active-parent overlay. Set to `none` to disable.\n * @cssprop [--n-rail-flyout-background=var(--n-color-surface)] - Background colour of the rail-mode subnav flyout container.\n * @cssprop [--n-rail-flyout-box-shadow=var(--n-box-shadow-popout)] - Box-shadow of the rail-mode subnav flyout container.\n * @cssprop [--n-rail-flyout-min-inline-size=220px] - Minimum inline size (width in LTR) of the rail-mode subnav flyout body.\n * @cssprop [--n-rail-flyout-padding=var(--n-space-s)] - Padding of the rail-mode subnav flyout body.\n * @cssprop [--n-rail-flyout-offset-inline=0] - Extra inline-axis offset applied to the rail flyout (positive values push it away from the rail in LTR; mirrored in RTL).\n * @cssprop [--n-rail-flyout-offset-block=0] - Extra block-axis offset applied to the rail flyout (positive values push it downward).\n * @cssprop [--n-rail-subnav-indicator-color=var(--n-color-border-strong)] - Colour of the small triangle indicator drawn in the bottom-inline-end corner of rail items that have a subnav (default + hover state).\n * @cssprop [--n-rail-subnav-indicator-color-active=var(--n-color-border-hover)] - Colour of the triangle indicator while the item's flyout popout is open.\n * @cssprop [--n-nav-badge-background=var(--n-color-status-notification)] - Background colour of the built-in `badge` attribute pill (`.n-nav-badge`).\n * @cssprop [--n-nav-badge-color=#fff] - Text colour of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-font-size=var(--n-font-size-xs)] - Font size of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-font-weight=var(--n-font-weight)] - Font weight of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-line-height=1] - Line height of the built-in `badge` attribute pill. Combined with `--n-nav-badge-padding-block` this controls the pill's effective block size.\n * @cssprop [--n-nav-badge-padding-block=var(--n-space-xs)] - Block-axis padding of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-padding-inline=calc(var(--n-space-s) / 2)] - Inline-axis padding of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-border-radius=var(--n-border-radius-pill)] - Border radius of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-min-inline-size=20px] - Minimum inline size (width in LTR) of the built-in `badge` attribute pill — sets a visual floor for single-digit counts.\n * @cssprop [--n-nav-badge-margin-inline-start=var(--n-space-xs)] - Inline-start margin separating the badge from the preceding label inside the nav-item's flex row.\n * @cssprop [--n-rail-badge-size=5px] - Diameter of the rail-mode dot the badge collapses into when the layout is in `collapse-mode=\"rail\"` and not `nav-open`.\n */\n@customElement('nord-nav-item')\nexport default class NavItem extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private subnavSlot = new SlotController(this, 'subnav')\n  private iconSlot = new SlotController(this, 'icon')\n  private railTooltipSlot = new SlotController(this, 'rail-tooltip')\n  private direction = new DirectionController(this)\n\n  private layoutObserver?: MutationObserver\n  private observedLayout?: HTMLElement | null\n  private readonly tooltipId = `n-nav-rail-tip-${++railTooltipIdCounter}`\n  private readonly popoutId = `n-nav-rail-pop-${++railPopoutIdCounter}`\n\n  @query('nord-popout') private popoutEl?: Popout\n\n  /**\n   * Reflects whether the ancestor layout is in rail-collapsed state\n   * (i.e. `collapse-mode=\"rail\"` and `nav-open` is absent).\n   * @internal\n   */\n  @state() private railCollapsed = false\n\n  /**\n   * Used for indicating the current page. This gives a prominent background to the nav item,\n   * and marks the item as the current page for assistive technology.\n   */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /**\n   * The name of an icon from Nordicons to display for the nav item.\n   */\n  @property({ reflect: true }) icon?: string\n\n  /**\n   * The url the nav item should link to.\n   * Note: this is not used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ reflect: true }) href?: string\n\n  /**\n   * Allows you to add a notification badge with a number next to the nav item.\n   */\n  @property({ reflect: true }) badge?: string\n\n  /**\n   * When the nav items contains a subnav, controls whether the section is expanded or not.\n   * Note: this is only used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ reflect: true, type: Boolean }) open = false\n\n  /**\n   * @internal\n   */\n  get hasSubNav() {\n    return this.subnavSlot.hasContent\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.startObservingLayout()\n    railMediaQuery.addEventListener('change', this.handleViewportChange)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.stopObservingLayout()\n    railMediaQuery.removeEventListener('change', this.handleViewportChange)\n  }\n\n  private handleViewportChange = () => this.updateRailState()\n\n  private startObservingLayout() {\n    this.observedLayout = this.closest<HTMLElement>('nord-layout')\n    if (!this.observedLayout) {\n      return\n    }\n    this.updateRailState()\n    this.layoutObserver = new MutationObserver(() => this.updateRailState())\n    this.layoutObserver.observe(this.observedLayout, {\n      attributes: true,\n      attributeFilter: ['nav-open', 'collapse-mode'],\n    })\n  }\n\n  private stopObservingLayout() {\n    this.layoutObserver?.disconnect()\n    this.layoutObserver = undefined\n    this.observedLayout = undefined\n    this.railCollapsed = false\n    this.popoutEl?.hide()\n  }\n\n  private updateRailState() {\n    if (!this.observedLayout) {\n      return\n    }\n    // Subnav children render inside a flyout popover when rail-collapsed;\n    // they should keep their full layout, not collapse to icons themselves.\n    const isNested = !!this.parentElement?.closest('nord-nav-item')\n    const next = !isNested\n      && railMediaQuery.matches\n      && this.observedLayout.getAttribute('collapse-mode') === 'rail'\n      && !this.observedLayout.hasAttribute('nav-open')\n    if (!next) {\n      this.popoutEl?.hide()\n    }\n    this.railCollapsed = next\n  }\n\n  render() {\n    if (this.railCollapsed) {\n      return this.renderRail()\n    }\n\n    const innards = html`\n      ${this.renderLeadingIcon()}\n      <div class=\"n-nav-content\">\n        <span class=\"n-nav-label\"><slot></slot></span>\n        ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n        <slot name=\"end\"></slot>\n      </div>\n    `\n    let element: TemplateResult\n\n    if (this.subnavSlot.hasContent) {\n      element = this.renderToggle(innards)\n    }\n    else if (this.href) {\n      element = this.renderLink(innards)\n    }\n    else {\n      element = this.renderButton(innards)\n    }\n\n    return html`\n      <div role=\"listitem\">\n        ${element}\n        <slot name=${this.subnavSlot.slotName} ?hidden=${!this.open}></slot>\n      </div>\n    `\n  }\n\n  // Resolves the leading icon shown in both the expanded nav and the rail:\n  // a slotted custom icon wins over the `icon` attribute, which wins over nothing.\n  private renderLeadingIcon(): TemplateResult | typeof nothing {\n    if (this.iconSlot.hasContent) {\n      return html`<slot name=\"icon\" class=\"n-nav-icon\"></slot>`\n    }\n    if (this.icon) {\n      return html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>`\n    }\n    return nothing\n  }\n\n  private renderRail(): TemplateResult {\n    const leadingIcon = this.renderLeadingIcon()\n    // Rail is icon-only, so when there's no icon at all we fall back to the\n    // first letter of the label rather than rendering an empty button.\n    const iconEl = leadingIcon === nothing\n      ? html`<span class=\"n-rail-fallback\">${this.textInitial}</span>`\n      : leadingIcon\n    const badge = this.badge ? html`<span class=\"n-nav-badge n-rail-badge\">${this.badge}</span>` : nothing\n\n    if (this.subnavSlot.hasContent) {\n      return this.renderRailFlyout(iconEl, badge)\n    }\n\n    return html`\n      <div role=\"listitem\" class=\"n-rail-host\">\n        ${this.href\n          ? html`\n              <a\n                class=\"n-nav-item n-rail-item\"\n                ${ref(this.focusableRef)}\n                aria-current=${cond(this.active, 'page')}\n                aria-describedby=${this.tooltipId}\n                href=${this.href}\n              >\n                ${iconEl}${badge}\n              </a>\n            `\n          : html`\n              <button\n                class=\"n-nav-item n-rail-item\"\n                ${ref(this.focusableRef)}\n                aria-describedby=${this.tooltipId}\n              >\n                ${iconEl}${badge}\n              </button>\n            `}\n        <slot name=\"end\" class=\"n-rail-slotted-end\"></slot>\n        <nord-tooltip id=${this.tooltipId} position=\"inline-end\">\n          ${this.railTooltipSlot.hasContent\n            ? html`<slot name=\"rail-tooltip\"></slot>`\n            : html`<slot></slot>`}\n        </nord-tooltip>\n      </div>\n    `\n  }\n\n  private renderRailFlyout(iconEl: TemplateResult, badge: TemplateResult | typeof nothing): TemplateResult {\n    // Click-only: nord-popout's getToggle() listens for click on the\n    // [aria-controls={popoutId}] target. Hover used to open as well, but\n    // that conflicted with the popout's click-to-toggle (hover opened, then\n    // the click was treated as a close).\n    // The tooltip still shows on hover so the icon has an accessible label\n    // — nord-tooltip listens for mouseover/focusin on [aria-describedby].\n    return html`\n      <div role=\"listitem\" class=\"n-rail-host\">\n        <button\n          class=\"n-nav-item n-rail-item\"\n          ${ref(this.focusableRef)}\n          aria-controls=${this.popoutId}\n          aria-describedby=${this.tooltipId}\n        >\n          ${iconEl}${badge}\n          <svg\n            class=\"n-rail-subnav-indicator\"\n            aria-hidden=\"true\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"5\"\n            height=\"5\"\n            viewBox=\"0 0 5 5\"\n            fill=\"none\"\n          >\n            <path\n              d=\"M4.29388 3.79388V0.500991C4.29388 0.0555387 3.75531 -0.167545 3.44033 0.147438L0.147437 3.44033C-0.167545 3.75531 0.0555386 4.29388 0.500991 4.29388H3.79388C4.07003 4.29388 4.29388 4.07003 4.29388 3.79388Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </button>\n        <slot name=\"end\" class=\"n-rail-slotted-end\"></slot>\n        <nord-tooltip id=${this.tooltipId} position=\"inline-end\">\n          ${this.railTooltipSlot.hasContent\n            ? html`<slot name=\"rail-tooltip\"></slot>`\n            : html`<slot></slot>`}\n        </nord-tooltip>\n        <nord-popout id=${this.popoutId} position=\"inline-end\" always-floating>\n          <div class=\"n-rail-flyout-body\">\n            <slot name=${this.subnavSlot.slotName}></slot>\n          </div>\n        </nord-popout>\n      </div>\n    `\n  }\n\n  private get textInitial(): string {\n    const text = this.textContent?.trim() ?? ''\n    return text.charAt(0).toUpperCase()\n  }\n\n  private renderLink(innards: TemplateResult) {\n    return html`\n      <a class=\"n-nav-item\" ${ref(this.focusableRef)} aria-current=${cond(this.active, 'page')} href=${this.href || ''}>\n        ${innards}\n      </a>\n    `\n  }\n\n  private renderToggle(innards: TemplateResult) {\n    return html`\n      <button\n        class=\"n-nav-item\"\n        @click=${this.toggleOpen}\n        aria-expanded=${this.open ? 'true' : 'false'}\n        ${ref(this.focusableRef)}\n      >\n        ${innards}\n\n        <nord-icon\n          size=\"xxs\"\n          class=${classMap({ 'n-toggle-icon': true, 'n-rtl': this.direction.isRTL })}\n          name=\"arrow-expand-right-small\"\n        ></nord-icon>\n      </button>\n    `\n  }\n\n  private renderButton(innards: TemplateResult) {\n    return html`<button class=\"n-nav-item\" ${ref(this.focusableRef)}>${innards}</button>`\n  }\n\n  private toggleOpen() {\n    this.open = !this.open\n    this.dispatchEvent(new NordEvent('toggle'))\n  }\n\n  @observe('active', 'updated')\n  protected handleActiveChange() {\n    if (this.active && !this.hasSubNav) {\n      this.dispatchEvent(new NordEvent('activate'))\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-nav-item': NavItem\n  }\n}\n"],"names":["railTooltipIdCounter","railPopoutIdCounter","railMediaQuery","matchMedia","matches","addEventListener","removeEventListener","NavItem","FocusableMixin","LitElement","constructor","this","subnavSlot","SlotController","iconSlot","railTooltipSlot","direction","DirectionController","tooltipId","popoutId","railCollapsed","active","open","handleViewportChange","updateRailState","hasSubNav","hasContent","connectedCallback","super","startObservingLayout","disconnectedCallback","stopObservingLayout","observedLayout","closest","layoutObserver","MutationObserver","observe","attributes","attributeFilter","_a","disconnect","undefined","_b","popoutEl","hide","next","parentElement","getAttribute","hasAttribute","render","renderRail","innards","html","renderLeadingIcon","badge","nothing","element","renderToggle","href","renderLink","renderButton","slotName","icon","leadingIcon","iconEl","textInitial","renderRailFlyout","ref","focusableRef","cond","textContent","trim","charAt","toUpperCase","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","handleActiveChange","styles","componentStyle","style","__decorate","query","prototype","state","property","type","Boolean","reflect","customElement"],"mappings":"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"}
+{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import type { TemplateResult } from 'lit'\nimport type Popout from '../popout/Popout.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ref } from 'lit/directives/ref.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { cond } from '../common/directives/cond.js'\nimport { NordEvent } from '../common/events.js'\n\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './NavItem.css'\n\nimport '../popout/Popout.js'\nimport '../tooltip/Tooltip.js'\n\nlet railTooltipIdCounter = 0\nlet railPopoutIdCounter = 0\n\n// Mirrors the layout's wide-viewport breakpoint so nav items only\n// switch to icon-only rendering when the layout actually shows the rail.\nconst railMediaQuery\n  = typeof matchMedia !== 'undefined'\n    ? matchMedia('(min-width: 768px)')\n    : ({\n        matches: false,\n        addEventListener() {\n          /* noop */\n        },\n        removeEventListener() {\n          /* noop */\n        },\n      } as unknown as MediaQueryList)\n\n/**\n * Navigation item populates sidebar navigation with links.\n * Every item should be placed inside a navigation group.\n *\n * @status ready\n * @category navigation\n * @slot - The default slot used for the nav item's text.\n * @slot icon - Slot for a custom leading icon element. Use when the `icon` attribute isn't enough — for example, an icon wrapped in a styled badge or circular frame. When set, it takes priority over the `icon` attribute and is shown in both the expanded nav and the collapsed rail.\n * @slot end - Trailing content rendered after the label inside the item's flex row. The slotted element flows naturally — it claims its real width and the label flex-shrinks to make room. Use for a custom badge, count pill, action icon, etc. when the `badge` attribute's plain text isn't enough.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n * @slot rail-tooltip - Full content of the rail-mode tooltip. When provided, it replaces the default label projection — write the tooltip's content directly (label + count + keyboard shortcut etc., bound to whatever reactive state you like). When absent, the tooltip falls back to the item's default-slot label. Only rendered in rail mode.\n *\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires activate - Dispatched whenever a nav item has been marked as active\n *\n * @cssprop [--n-nav-item-color=var(--n-color-text-weak)] - Text color in the default state.\n * @cssprop [--n-nav-item-background=transparent] - Background color in the default state.\n * @cssprop [--n-nav-item-border-radius=var(--n-border-radius-s)] - Border radius of the item and its active-parent overlay.\n * @cssprop [--n-nav-item-padding-block=var(--n-space-s)] - Block-axis (top/bottom) padding.\n * @cssprop [--n-nav-item-padding-inline=var(--n-space-s)] - Inline-axis (start/end) padding.\n * @cssprop [--n-nav-item-line-height=var(--n-line-height-tight)] - Line height of the item's text.\n * @cssprop [--n-nav-item-icon-gap=calc(var(--n-space-s) * 1.4)] - Inline gap between the leading icon (the `icon` attribute or `icon` slot) and the item's text.\n * @cssprop [--n-nav-item-color-hover=var(--n-color-text)] - Text color on hover.\n * @cssprop [--n-nav-item-background-hover=var(--n-color-nav-hover)] - Background color on hover.\n * @cssprop [--n-nav-item-color-active=var(--n-color-text-on-accent)] - Text color when the item is `active`.\n * @cssprop [--n-nav-item-background-active=var(--n-color-accent)] - Background color when the item is `active`.\n * @cssprop [--n-nav-item-color-expanded=var(--n-color-text-weak)] - Text color when the item is an active parent (its subnav is expanded).\n * @cssprop [--n-nav-item-background-expanded=var(--n-color-accent)] - Background color of the overlay drawn behind an active-parent item.\n * @cssprop [--n-nav-item-expanded-overlay-opacity=0.12] - Opacity of the active-parent overlay. Set to `1` for a solid background.\n * @cssprop [--n-nav-item-expanded-overlay-filter=brightness(150%)] - Filter applied to the active-parent overlay. Set to `none` to disable.\n * @cssprop [--n-rail-flyout-background=var(--n-color-surface)] - Background colour of the rail-mode subnav flyout container.\n * @cssprop [--n-rail-flyout-box-shadow=var(--n-box-shadow-popout)] - Box-shadow of the rail-mode subnav flyout container.\n * @cssprop [--n-rail-flyout-min-inline-size=220px] - Minimum inline size (width in LTR) of the rail-mode subnav flyout body.\n * @cssprop [--n-rail-flyout-padding=var(--n-space-s)] - Padding of the rail-mode subnav flyout body.\n * @cssprop [--n-rail-flyout-offset-inline=0] - Extra inline-axis offset applied to the rail flyout (positive values push it away from the rail in LTR; mirrored in RTL).\n * @cssprop [--n-rail-flyout-offset-block=0] - Extra block-axis offset applied to the rail flyout (positive values push it downward).\n * @cssprop [--n-rail-subnav-indicator-color=var(--n-color-border-strong)] - Colour of the small triangle indicator drawn in the bottom-inline-end corner of rail items that have a subnav (default + hover state).\n * @cssprop [--n-rail-subnav-indicator-color-active=var(--n-color-border-hover)] - Colour of the triangle indicator while the item's flyout popout is open.\n * @cssprop [--n-nav-badge-background=var(--n-color-status-notification)] - Background colour of the built-in `badge` attribute pill (`.n-nav-badge`).\n * @cssprop [--n-nav-badge-color=#fff] - Text colour of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-font-size=var(--n-font-size-xs)] - Font size of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-font-weight=var(--n-font-weight)] - Font weight of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-line-height=1] - Line height of the built-in `badge` attribute pill. Combined with `--n-nav-badge-padding-block` this controls the pill's effective block size.\n * @cssprop [--n-nav-badge-padding-block=var(--n-space-xs)] - Block-axis padding of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-padding-inline=calc(var(--n-space-s) / 2)] - Inline-axis padding of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-border-radius=var(--n-border-radius-pill)] - Border radius of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-min-inline-size=20px] - Minimum inline size (width in LTR) of the built-in `badge` attribute pill — sets a visual floor for single-digit counts.\n * @cssprop [--n-nav-badge-margin-inline-start=var(--n-space-xs)] - Inline-start margin separating the badge from the preceding label inside the nav-item's flex row.\n * @cssprop [--n-rail-badge-size=5px] - Diameter of the rail-mode dot the badge collapses into when the layout is in `collapse-mode=\"rail\"` and not `nav-open`.\n */\n@customElement('nord-nav-item')\nexport default class NavItem extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private subnavSlot = new SlotController(this, 'subnav')\n  private iconSlot = new SlotController(this, 'icon')\n  private railTooltipSlot = new SlotController(this, 'rail-tooltip')\n  private direction = new DirectionController(this)\n\n  private layoutObserver?: MutationObserver\n  private observedLayout?: HTMLElement | null\n  private readonly tooltipId = `n-nav-rail-tip-${++railTooltipIdCounter}`\n  private readonly popoutId = `n-nav-rail-pop-${++railPopoutIdCounter}`\n\n  @query('nord-popout') private popoutEl?: Popout\n\n  /**\n   * Reflects whether the ancestor layout is in rail-collapsed state\n   * (i.e. `collapse-mode=\"rail\"` and `nav-open` is absent).\n   * @internal\n   */\n  @state() private railCollapsed = false\n\n  /**\n   * Used for indicating the current page. This gives a prominent background to the nav item,\n   * and marks the item as the current page for assistive technology.\n   */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /**\n   * The name of an icon from Nordicons to display for the nav item.\n   */\n  @property({ reflect: true }) icon?: string\n\n  /**\n   * The url the nav item should link to.\n   * Note: this is not used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ reflect: true }) href?: string\n\n  /**\n   * Allows you to add a notification badge with a number next to the nav item.\n   */\n  @property({ reflect: true }) badge?: string\n\n  /**\n   * When the nav items contains a subnav, controls whether the section is expanded or not.\n   * Note: this is only used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ reflect: true, type: Boolean }) open = false\n\n  /**\n   * @internal\n   */\n  get hasSubNav() {\n    return this.subnavSlot.hasContent\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.startObservingLayout()\n    railMediaQuery.addEventListener('change', this.handleViewportChange)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.stopObservingLayout()\n    railMediaQuery.removeEventListener('change', this.handleViewportChange)\n  }\n\n  private handleViewportChange = () => this.updateRailState()\n\n  private startObservingLayout() {\n    this.observedLayout = this.closest<HTMLElement>('nord-layout')\n    if (!this.observedLayout) {\n      return\n    }\n    this.updateRailState()\n    this.layoutObserver = new MutationObserver(() => this.updateRailState())\n    this.layoutObserver.observe(this.observedLayout, {\n      attributes: true,\n      attributeFilter: ['nav-open', 'collapse-mode'],\n    })\n  }\n\n  private stopObservingLayout() {\n    this.layoutObserver?.disconnect()\n    this.layoutObserver = undefined\n    this.observedLayout = undefined\n    this.railCollapsed = false\n    this.popoutEl?.hide()\n  }\n\n  private updateRailState() {\n    if (!this.observedLayout) {\n      return\n    }\n    // Subnav children render inside a flyout popover when rail-collapsed;\n    // they should keep their full layout, not collapse to icons themselves.\n    const isNested = !!this.parentElement?.closest('nord-nav-item')\n    const next = !isNested\n      && railMediaQuery.matches\n      && this.observedLayout.getAttribute('collapse-mode') === 'rail'\n      && !this.observedLayout.hasAttribute('nav-open')\n    if (!next) {\n      this.popoutEl?.hide()\n    }\n    this.railCollapsed = next\n  }\n\n  render() {\n    if (this.railCollapsed) {\n      return this.renderRail()\n    }\n\n    const innards = html`\n      ${this.renderLeadingIcon()}\n      <div class=\"n-nav-content\">\n        <span class=\"n-nav-label\"><slot></slot></span>\n        ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n        <slot name=\"end\"></slot>\n      </div>\n    `\n    let element: TemplateResult\n\n    if (this.subnavSlot.hasContent) {\n      element = this.renderToggle(innards)\n    }\n    else if (this.href) {\n      element = this.renderLink(innards)\n    }\n    else {\n      element = this.renderButton(innards)\n    }\n\n    return html`\n      <div role=\"listitem\">\n        ${element}\n        <slot name=${this.subnavSlot.slotName} ?hidden=${!this.open}></slot>\n      </div>\n    `\n  }\n\n  // Resolves the leading icon shown in both the expanded nav and the rail:\n  // a slotted custom icon wins over the `icon` attribute, which wins over nothing.\n  private renderLeadingIcon(): TemplateResult | typeof nothing {\n    if (this.iconSlot.hasContent) {\n      return html`<slot name=\"icon\" class=\"n-nav-icon\"></slot>`\n    }\n    if (this.icon) {\n      return html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>`\n    }\n    return nothing\n  }\n\n  private renderRail(): TemplateResult {\n    const leadingIcon = this.renderLeadingIcon()\n    // Rail is icon-only, so when there's no icon at all we fall back to the\n    // first letter of the label rather than rendering an empty button.\n    const iconEl = leadingIcon === nothing\n      ? html`<span class=\"n-rail-fallback\">${this.textInitial}</span>`\n      : leadingIcon\n    const badge = this.badge ? html`<span class=\"n-nav-badge n-rail-badge\">${this.badge}</span>` : nothing\n\n    if (this.subnavSlot.hasContent) {\n      return this.renderRailFlyout(iconEl, badge)\n    }\n\n    return html`\n      <div role=\"listitem\" class=\"n-rail-host\">\n        ${this.href\n          ? html`\n              <a\n                class=\"n-nav-item n-rail-item\"\n                ${ref(this.focusableRef)}\n                aria-current=${cond(this.active, 'page')}\n                aria-describedby=${this.tooltipId}\n                href=${this.href}\n              >\n                ${iconEl}${badge}\n              </a>\n            `\n          : html`\n              <button\n                class=\"n-nav-item n-rail-item\"\n                ${ref(this.focusableRef)}\n                aria-describedby=${this.tooltipId}\n              >\n                ${iconEl}${badge}\n              </button>\n            `}\n        <slot name=\"end\" class=\"n-rail-slotted-end\"></slot>\n        <nord-tooltip id=${this.tooltipId} position=\"inline-end\">\n          ${this.railTooltipSlot.hasContent\n            ? html`<slot name=\"rail-tooltip\"></slot>`\n            : html`<slot></slot>`}\n        </nord-tooltip>\n      </div>\n    `\n  }\n\n  private renderRailFlyout(iconEl: TemplateResult, badge: TemplateResult | typeof nothing): TemplateResult {\n    // Click-only: nord-popout's getToggle() listens for click on the\n    // [aria-controls={popoutId}] target. Hover used to open as well, but\n    // that conflicted with the popout's click-to-toggle (hover opened, then\n    // the click was treated as a close).\n    // The tooltip still shows on hover so the icon has an accessible label\n    // — nord-tooltip listens for mouseover/focusin on [aria-describedby].\n    return html`\n      <div role=\"listitem\" class=\"n-rail-host\">\n        <button\n          class=\"n-nav-item n-rail-item\"\n          ${ref(this.focusableRef)}\n          aria-controls=${this.popoutId}\n          aria-describedby=${this.tooltipId}\n        >\n          ${iconEl}${badge}\n          <svg\n            class=\"n-rail-subnav-indicator\"\n            aria-hidden=\"true\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"5\"\n            height=\"5\"\n            viewBox=\"0 0 5 5\"\n            fill=\"none\"\n          >\n            <path\n              d=\"M4.29388 3.79388V0.500991C4.29388 0.0555387 3.75531 -0.167545 3.44033 0.147438L0.147437 3.44033C-0.167545 3.75531 0.0555386 4.29388 0.500991 4.29388H3.79388C4.07003 4.29388 4.29388 4.07003 4.29388 3.79388Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </button>\n        <slot name=\"end\" class=\"n-rail-slotted-end\"></slot>\n        <nord-tooltip id=${this.tooltipId} position=\"inline-end\">\n          ${this.railTooltipSlot.hasContent\n            ? html`<slot name=\"rail-tooltip\"></slot>`\n            : html`<slot></slot>`}\n        </nord-tooltip>\n        <nord-popout id=${this.popoutId} position=\"inline-end\" always-floating>\n          <div class=\"n-rail-flyout-body\">\n            <slot name=${this.subnavSlot.slotName}></slot>\n          </div>\n        </nord-popout>\n      </div>\n    `\n  }\n\n  private get textInitial(): string {\n    const text = this.textContent?.trim() ?? ''\n    return text.charAt(0).toUpperCase()\n  }\n\n  private renderLink(innards: TemplateResult) {\n    return html`\n      <a class=\"n-nav-item\" ${ref(this.focusableRef)} aria-current=${cond(this.active, 'page')} href=${this.href || ''}>\n        ${innards}\n      </a>\n    `\n  }\n\n  private renderToggle(innards: TemplateResult) {\n    return html`\n      <button\n        class=\"n-nav-item\"\n        @click=${this.toggleOpen}\n        aria-expanded=${this.open ? 'true' : 'false'}\n        ${ref(this.focusableRef)}\n      >\n        ${innards}\n\n        <nord-icon\n          size=\"xxs\"\n          class=${classMap({ 'n-toggle-icon': true, 'n-rtl': this.direction.isRTL })}\n          name=\"arrow-expand-right-small\"\n        ></nord-icon>\n      </button>\n    `\n  }\n\n  private renderButton(innards: TemplateResult) {\n    return html`<button class=\"n-nav-item\" ${ref(this.focusableRef)}>${innards}</button>`\n  }\n\n  private toggleOpen() {\n    this.open = !this.open\n    this.dispatchEvent(new NordEvent('toggle'))\n  }\n\n  @observe('active', 'updated')\n  protected handleActiveChange() {\n    if (this.active && !this.hasSubNav) {\n      this.dispatchEvent(new NordEvent('activate'))\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-nav-item': NavItem\n  }\n}\n"],"names":["railTooltipIdCounter","railPopoutIdCounter","railMediaQuery","matchMedia","matches","addEventListener","removeEventListener","NavItem","FocusableMixin","LitElement","constructor","this","subnavSlot","SlotController","iconSlot","railTooltipSlot","direction","DirectionController","tooltipId","popoutId","railCollapsed","active","open","handleViewportChange","updateRailState","hasSubNav","hasContent","connectedCallback","super","startObservingLayout","disconnectedCallback","stopObservingLayout","observedLayout","closest","layoutObserver","MutationObserver","observe","attributes","attributeFilter","_a","disconnect","undefined","_b","popoutEl","hide","next","parentElement","getAttribute","hasAttribute","render","renderRail","innards","html","renderLeadingIcon","badge","nothing","element","renderToggle","href","renderLink","renderButton","slotName","icon","leadingIcon","iconEl","textInitial","renderRailFlyout","ref","focusableRef","cond","textContent","trim","charAt","toUpperCase","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","handleActiveChange","styles","componentStyle","style","__decorate","query","prototype","state","property","type","Boolean","reflect","customElement"],"mappings":"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"}