@nordhealth/components 4.21.0 → 4.23.0

package/lib/Card.js

@@ -1,2 +1,2 @@
-import{_ as r}from"./tslib.es6-CmLYFWVC.js";import{css as a,LitElement as d,html as e}from"lit";import{property as o,customElement as n}from"lit/decorators.js";import{S as t}from"./SlotController-Z6eG7LSZ.js";import{s}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";const i=a`:host{--_n-card-padding:var(--n-card-padding, var(--n-space-m));--_n-card-slot-padding:var(--n-card-slot-padding, var(--n-space-m));--_n-card-box-shadow:var(--n-card-box-shadow, var(--n-box-shadow-card));--_n-card-border-radius:var(--n-card-border-radius, var(--n-border-radius));--_n-card-header-background:var(--n-card-header-background, transparent);--_n-card-border-color:var(--n-card-border-color, var(--n-color-border));--_n-card-header-padding-block:var(--n-card-header-padding-block, var(--n-space-m));--_n-card-header-padding-inline:var(--n-card-header-padding-inline, var(--_n-card-slot-padding));--_n-card-header-flex-wrap:var(--n-card-header-flex-wrap, wrap);--_n-card-header-slot-flex-grow:var(--n-card-header-slot-flex-grow, 0);color:var(--n-color-text);display:block;inline-size:100%}.n-card{--n-color-border:var(--_n-card-border-color);background:var(--n-color-surface);border-radius:var(--_n-card-border-radius);box-shadow:var(--_n-card-box-shadow);block-size:100%;display:flex;flex-direction:column}.header{background-color:var(--_n-card-header-background);border-block-end:1px solid var(--_n-card-border-color);border-start-start-radius:var(--_n-card-border-radius);border-start-end-radius:var(--_n-card-border-radius);padding-block:var(--_n-card-header-padding-block);padding-inline:var(--_n-card-header-padding-inline);display:flex;gap:var(--n-space-s);align-items:center;justify-content:space-between;flex-wrap:var(--_n-card-header-flex-wrap)}:host([padding='l']){--_n-card-padding:var(--n-card-padding, var(--n-space-l));--_n-card-slot-padding:var(--n-card-slot-padding, var(--n-space-l))}:host([padding=none]){--_n-card-padding:var(--n-card-padding, 0)}slot{display:block}slot:not([name]){padding:var(--_n-card-padding);flex:1}slot[name=header]{flex-grow:var(--_n-card-header-slot-flex-grow);min-inline-size:0}slot[name=footer]{padding:var(--_n-card-slot-padding);white-space:nowrap}:host(:not([footer-divider])) slot[name=footer]{padding-block-start:0}:host([footer-divider]) slot[name=footer]{border-block-start:1px solid var(--_n-card-border-color)}::slotted([slot=header-end]){--n-stack-gap:var(--n-space-s);display:flex;gap:var(--n-stack-gap);align-items:center;flex-wrap:wrap;min-inline-size:0;margin-block-start:calc(var(--n-space-xs) * -1)!important;margin-block-end:calc(var(--n-space-xs) * -1)!important}::slotted([slot=header]){font-size:var(--n-font-size-m)!important;font-weight:var(--n-font-weight-heading)!important;margin:0}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}`;let l=class extends d{constructor(){super(...arguments),this.headerSlot=new t(this,"header"),this.headerEndSlot=new t(this,"header-end"),this.footerSlot=new t(this,"footer"),this.padding="m",this.footerDivider=!1}render(){return e`<div class="n-card"><div class="header" ?hidden="${this.headerSlot.isEmpty&&this.headerEndSlot.isEmpty}"><slot name="${this.headerSlot.slotName}"></slot><slot name="${this.headerEndSlot.slotName}"></slot></div><slot></slot><slot name="${this.footerSlot.slotName}" ?hidden="${this.footerSlot.isEmpty}"></slot></div>`}};l.styles=[s,i],r([o({reflect:!0})],l.prototype,"padding",void 0),r([o({type:Boolean,reflect:!0,attribute:"footer-divider"})],l.prototype,"footerDivider",void 0),l=r([n("nord-card")],l);var c=l;export{c as default};
+import{_ as r}from"./tslib.es6-CmLYFWVC.js";import{css as a,LitElement as d,html as o}from"lit";import{property as e,customElement as n}from"lit/decorators.js";import{S as t}from"./SlotController-Z6eG7LSZ.js";import{s}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";const i=a`:host{--_n-card-padding:var(--n-card-padding, var(--n-space-m));--_n-card-slot-padding:var(--n-card-slot-padding, var(--n-space-m));--_n-card-background-color:var(--n-card-background-color, var(--n-color-surface));--_n-card-box-shadow:var(--n-card-box-shadow, var(--n-box-shadow-card));--_n-card-border-radius:var(--n-card-border-radius, var(--n-border-radius));--_n-card-header-background:var(--n-card-header-background, transparent);--_n-card-border-color:var(--n-card-border-color, var(--n-color-border));--_n-card-header-padding-block:var(--n-card-header-padding-block, var(--n-space-m));--_n-card-header-padding-inline:var(--n-card-header-padding-inline, var(--_n-card-slot-padding));--_n-card-header-flex-wrap:var(--n-card-header-flex-wrap, wrap);--_n-card-header-slot-flex-grow:var(--n-card-header-slot-flex-grow, 0);color:var(--n-color-text);display:block;inline-size:100%}.n-card{--n-color-border:var(--_n-card-border-color);background:var(--_n-card-background-color);border-radius:var(--_n-card-border-radius);box-shadow:var(--_n-card-box-shadow);block-size:100%;display:flex;flex-direction:column}.header{background-color:var(--_n-card-header-background);border-block-end:1px solid var(--_n-card-border-color);border-start-start-radius:var(--_n-card-border-radius);border-start-end-radius:var(--_n-card-border-radius);padding-block:var(--_n-card-header-padding-block);padding-inline:var(--_n-card-header-padding-inline);display:flex;gap:var(--n-space-s);align-items:center;justify-content:space-between;flex-wrap:var(--_n-card-header-flex-wrap)}:host([padding='l']){--_n-card-padding:var(--n-card-padding, var(--n-space-l));--_n-card-slot-padding:var(--n-card-slot-padding, var(--n-space-l))}:host([padding=none]){--_n-card-padding:var(--n-card-padding, 0)}slot{display:block}slot:not([name]){padding:var(--_n-card-padding);flex:1}slot[name=header]{flex-grow:var(--_n-card-header-slot-flex-grow);min-inline-size:0}slot[name=footer]{padding:var(--_n-card-slot-padding);white-space:nowrap}:host(:not([footer-divider])) slot[name=footer]{padding-block-start:0}:host([footer-divider]) slot[name=footer]{border-block-start:1px solid var(--_n-card-border-color)}::slotted([slot=header-end]){--n-stack-gap:var(--n-space-s);display:flex;gap:var(--n-stack-gap);align-items:center;flex-wrap:wrap;min-inline-size:0;margin-block-start:calc(var(--n-space-xs) * -1)!important;margin-block-end:calc(var(--n-space-xs) * -1)!important}::slotted([slot=header]){font-size:var(--n-font-size-m)!important;font-weight:var(--n-font-weight-heading)!important;margin:0}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}`;let l=class extends d{constructor(){super(...arguments),this.headerSlot=new t(this,"header"),this.headerEndSlot=new t(this,"header-end"),this.footerSlot=new t(this,"footer"),this.padding="m",this.footerDivider=!1}render(){return o`<div class="n-card"><div class="header" ?hidden="${this.headerSlot.isEmpty&&this.headerEndSlot.isEmpty}"><slot name="${this.headerSlot.slotName}"></slot><slot name="${this.headerEndSlot.slotName}"></slot></div><slot></slot><slot name="${this.footerSlot.slotName}" ?hidden="${this.footerSlot.isEmpty}"></slot></div>`}};l.styles=[s,i],r([e({reflect:!0})],l.prototype,"padding",void 0),r([e({type:Boolean,reflect:!0,attribute:"footer-divider"})],l.prototype,"footerDivider",void 0),l=r([n("nord-card")],l);var c=l;export{c as default};
 //# sourceMappingURL=Card.js.map

package/lib/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../src/card/Card.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Card.css'\n\n/**\n * Cards are shadowed surfaces that display content and actions on a\n * single topic. They should be easy to scan for relevant and\n * actionable information.\n *\n * @status ready\n * @category structure\n * @slot - The card content.\n * @slot header - Optional slot that holds a header for the card.\n * @slot header-end - Optional slot that positions content at the end of the header. Useful for actions or additional info.\n * @slot footer - Optional slot that holds footer content for the card.\n *\n * @cssprop [--n-card-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-card-box-shadow=var(--n-box-shadow-popout)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n * @cssprop [--n-card-padding=var(--n-space-m)] - Controls the padding on all sides of the card.\n * @cssprop [--n-card-slot-padding=var(--n-space-m)] - Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.\n * @cssprop [--n-card-header-background=transparent] - Controls the background color of the card header.\n * @cssprop [--n-card-border-color=var(--n-color-border)] - Controls the border color of the card header and footer divider.\n * @cssprop [--n-card-header-padding-block=var(--n-space-m)] - Controls the block (top and bottom) padding of the card header.\n * @cssprop [--n-card-header-padding-inline=var(--n-card-slot-padding)] - Controls the inline (left and right) padding of the card header.\n * @cssprop [--n-card-header-slot-flex-grow=0] - Controls the flex-grow value of the header slot.\n */\n@customElement('nord-card')\nexport default class Card extends LitElement {\n  static styles = [componentStyle, style]\n\n  private headerSlot = new SlotController(this, 'header')\n  private headerEndSlot = new SlotController(this, 'header-end')\n  private footerSlot = new SlotController(this, 'footer')\n\n  /**\n   * Controls the padding of the card component. When set to “none”,\n   * the header and footer slots will still have padding.\n   */\n  @property({ reflect: true }) padding: 'm' | 'l' | 'none' = 'm'\n\n  /**\n   * When set, adds a divider border above the footer slot.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'footer-divider' }) footerDivider = false\n\n  render() {\n    return html`\n      <div class=\"n-card\">\n        <div class=\"header\" ?hidden=${this.headerSlot.isEmpty && this.headerEndSlot.isEmpty}>\n          <slot name=${this.headerSlot.slotName}></slot>\n          <slot name=${this.headerEndSlot.slotName}></slot>\n        </div>\n        <slot></slot>\n        <slot name=${this.footerSlot.slotName} ?hidden=${this.footerSlot.isEmpty}></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-card': Card\n  }\n}\n"],"names":["Card","LitElement","constructor","this","headerSlot","SlotController","headerEndSlot","footerSlot","padding","footerDivider","render","html","isEmpty","slotName","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","attribute","customElement"],"mappings":"wzFA6Be,IAAMA,EAAN,cAAmBC,EAAnB,WAAAC,uBAGLC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAaG,cAAG,IAAID,EAAeF,KAAM,cACzCA,KAAUI,WAAG,IAAIF,EAAeF,KAAM,UAMjBA,KAAOK,QAAuB,IAKcL,KAAaM,eAAG,CAc1F,CAZC,MAAAC,GACE,OAAOC,CAAI,oDAEuBR,KAAKC,WAAWQ,SAAWT,KAAKG,cAAcM,wBAC7DT,KAAKC,WAAWS,gCAChBV,KAAKG,cAAcO,mDAGrBV,KAAKI,WAAWM,sBAAoBV,KAAKI,WAAWK,wBAGtE,GA5BMZ,EAAAc,OAAS,CAACC,EAAgBC,GAUJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyCnB,EAAAoB,UAAA,eAAA,GAKWH,EAAA,CAAxEC,EAAS,CAAEG,KAAMC,QAASH,SAAS,EAAMI,UAAW,oBAAyCvB,EAAAoB,UAAA,qBAAA,GAhB3EpB,EAAIiB,EAAA,CADxBO,EAAc,cACMxB,SAAAA"}
+{"version":3,"file":"Card.js","sources":["../src/card/Card.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Card.css'\n\n/**\n * Cards are shadowed surfaces that display content and actions on a\n * single topic. They should be easy to scan for relevant and\n * actionable information.\n *\n * @status ready\n * @category structure\n * @slot - The card content.\n * @slot header - Optional slot that holds a header for the card.\n * @slot header-end - Optional slot that positions content at the end of the header. Useful for actions or additional info.\n * @slot footer - Optional slot that holds footer content for the card.\n *\n * @cssprop [--n-card-background-color=var(--n-color-surface)] - Controls the background color of the card.\n * @cssprop [--n-card-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-card-box-shadow=var(--n-box-shadow-popout)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n * @cssprop [--n-card-padding=var(--n-space-m)] - Controls the padding on all sides of the card.\n * @cssprop [--n-card-slot-padding=var(--n-space-m)] - Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.\n * @cssprop [--n-card-header-background=transparent] - Controls the background color of the card header.\n * @cssprop [--n-card-border-color=var(--n-color-border)] - Controls the border color of the card header and footer divider.\n * @cssprop [--n-card-header-padding-block=var(--n-space-m)] - Controls the block (top and bottom) padding of the card header.\n * @cssprop [--n-card-header-padding-inline=var(--n-card-slot-padding)] - Controls the inline (left and right) padding of the card header.\n * @cssprop [--n-card-header-slot-flex-grow=0] - Controls the flex-grow value of the header slot.\n */\n@customElement('nord-card')\nexport default class Card extends LitElement {\n  static styles = [componentStyle, style]\n\n  private headerSlot = new SlotController(this, 'header')\n  private headerEndSlot = new SlotController(this, 'header-end')\n  private footerSlot = new SlotController(this, 'footer')\n\n  /**\n   * Controls the padding of the card component. When set to “none”,\n   * the header and footer slots will still have padding.\n   */\n  @property({ reflect: true }) padding: 'm' | 'l' | 'none' = 'm'\n\n  /**\n   * When set, adds a divider border above the footer slot.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'footer-divider' }) footerDivider = false\n\n  render() {\n    return html`\n      <div class=\"n-card\">\n        <div class=\"header\" ?hidden=${this.headerSlot.isEmpty && this.headerEndSlot.isEmpty}>\n          <slot name=${this.headerSlot.slotName}></slot>\n          <slot name=${this.headerEndSlot.slotName}></slot>\n        </div>\n        <slot></slot>\n        <slot name=${this.footerSlot.slotName} ?hidden=${this.footerSlot.isEmpty}></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-card': Card\n  }\n}\n"],"names":["Card","LitElement","constructor","this","headerSlot","SlotController","headerEndSlot","footerSlot","padding","footerDivider","render","html","isEmpty","slotName","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","attribute","customElement"],"mappings":"m5FA8Be,IAAMA,EAAN,cAAmBC,EAAnB,WAAAC,uBAGLC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAaG,cAAG,IAAID,EAAeF,KAAM,cACzCA,KAAUI,WAAG,IAAIF,EAAeF,KAAM,UAMjBA,KAAOK,QAAuB,IAKcL,KAAaM,eAAG,CAc1F,CAZC,MAAAC,GACE,OAAOC,CAAI,oDAEuBR,KAAKC,WAAWQ,SAAWT,KAAKG,cAAcM,wBAC7DT,KAAKC,WAAWS,gCAChBV,KAAKG,cAAcO,mDAGrBV,KAAKI,WAAWM,sBAAoBV,KAAKI,WAAWK,wBAGtE,GA5BMZ,EAAAc,OAAS,CAACC,EAAgBC,GAUJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyCnB,EAAAoB,UAAA,eAAA,GAKWH,EAAA,CAAxEC,EAAS,CAAEG,KAAMC,QAASH,SAAS,EAAMI,UAAW,oBAAyCvB,EAAAoB,UAAA,qBAAA,GAhB3EpB,EAAIiB,EAAA,CADxBO,EAAc,cACMxB,SAAAA"}

package/lib/Layout.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{l as n}from"./NavToggle-DL74d1aQ.js";import{css as e,LitElement as a,html as i,nothing as o}from"lit";import{query as s,state as r,property as d,customElement as l}from"lit/decorators.js";import{classMap as c}from"lit/directives/class-map.js";import{styleMap as h}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 m}from"./observe-D0n0zOfU.js";import{c as b}from"./cond-CI1KbneT.js";import{f as y}from"./fsm-Bq5jMQrK.js";import{c as f}from"./number-Dg2vCfGd.js";import{s as k}from"./Component-DSU3Qp0O.js";import{s as w}from"./Sticky-DqnqENYN.js";import z from"./Icon.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";const x=()=>!0;class N{constructor(t,n){t.addController(this),this.options={enabled:x,...n}}hostConnected(){"undefined"!=typeof BroadcastChannel&&(this.channel=new BroadcastChannel(this.options.channelName),this.channel.addEventListener("message",this))}hostDisconnected(){var t,n;null===(t=this.channel)||void 0===t||t.removeEventListener("message",this),null===(n=this.channel)||void 0===n||n.close()}handleEvent(t){this.options.enabled()&&this.options.onMessage(t.data)}post(t){var n;this.options.enabled()&&(null===(n=this.channel)||void 0===n||n.postMessage(t))}}function W(t,n,e=JSON.stringify,a=JSON.parse){return{get value(){try{const e=localStorage.getItem(t);return e?a(e):n}catch(t){return n}},set value(n){try{localStorage.setItem(t,e(n))}catch(t){}}}}const S=e`: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-background-color:var(--n-layout-background-color, var(--n-color-background));--_n-layout-nav-transition-duration:var(--n-transition-mobile);--_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);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))}.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-index-nav);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}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-color-surface);box-shadow:var(--n-box-shadow-nav)}@media (min-width:1240px){.n-has-drawer .n-layout-content{margin-inline-end:var(--_n-layout-drawer-inline-size)}aside{box-shadow:var(--n-box-shadow-header);border-inline-start:1px solid 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=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-color-border);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-color-border) 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;min-block-size:100%;inset-block:0;inset-inline-end:-8px;inline-size:10px;background:0 0}[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-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{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}: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}.n-has-nav[data-screen=wide]:not([data-nav=opened]) ::slotted(nord-top-bar),.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)}.n-has-nav[data-screen=narrow] ::slotted(nord-top-bar),.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)}`;z.registerIcon(n);const _=250,C="undefined"!=typeof matchMedia?matchMedia("(min-width: 768px)"):{matches:!1,addEventListener(){}},j=W("nord-layout.navWidth",_),T=W("nord-layout.navWidthDefault",_),D=W("nord-layout.navOpen",!0),$=y({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 E=class extends a{constructor(){super(...arguments),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.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:t=>t!==this.navEl}),this.broadcast=new N(this,{channelName:"nord-layout-nav-state",enabled:()=>this.syncNavState&&this.wideScreen,onMessage:t=>{"navOpen"in t&&(this.navOpen=t.navOpen),"navWidth"in t&&(this.navWidth=t.navWidth)}}),this.navWidth=j.value,this.isDragging=!1,this.wideScreen=C.matches,this.persistNavState=!1,this.syncNavState=!1,this.defaultNavWidth=_,this.minNavWidth=220,this.maxNavWidth=400,this.padding="m",this.sticky=!1,this.stickyFooter=!1,this.handleMediaQueryChange=()=>{this.wideScreen=C.matches,this.navTransition(this.wideScreen?"open":"close")},this.handleToggleClick=()=>{this.navTransition("toggle")},this.handleNavFocus=()=>{this.navTransition("focusin")},this.handleMainFocus=()=>{this.navTransition("focusout")},this.handleMouseEnter=()=>{this.wideScreen&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")}}get isNarrow(){return!this.wideScreen}connectedCallback(){super.connectedCallback(),this.events.listen(C,"change",this.handleMediaQueryChange)}willUpdate(){this.hasUpdated||(Number.isFinite(this.defaultNavWidth)||(this.defaultNavWidth=_),Number.isFinite(this.minNavWidth)||(this.minNavWidth=220),Number.isFinite(this.maxNavWidth)||(this.maxNavWidth=400),T.value!==this.defaultNavWidth?(this.setNavWidth(this.defaultNavWidth),j.value=this.navWidth,T.value=this.defaultNavWidth):this.setNavWidth(this.navWidth),this.isNarrow||this.persistNavState&&!1===D.value?this.navState="closed":this.navState="opened")}render(){const{navWidth:t,navState:n,navSlot:e,headerSlot:a,footerSlot:s,topBarSlot:r,drawerSlot:d,isDragging:l,direction:v}=this,p="opened"===n&&this.wideScreen?t:this.defaultNavWidth;return i`<div class="${c({"n-layout":!0,"n-rtl":v.isRTL,"n-dragging":l,"n-has-header":a.hasContent,"n-has-footer":s.hasContent,"n-has-top-bar":r.hasContent,"n-has-drawer":d.hasContent,"n-has-nav":e.hasContent})}" style="${h({"--_n-layout-nav-width":`${p}px`})}" data-nav="${e.hasContent?n:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}"><div class="n-layout-nav" ?hidden="${e.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" @pointerdown="${b("opened"===n,this.startDragging)}" @pointermove="${b(l,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}" ?hidden="${this.isNarrow}"></div>${this.renderNavCollapse()}</div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleMainClick}">${e.hasContent?this.renderNavToggle():o}<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 i`<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 i`<button class="n-collapse-btn" @click="${this.handleToggleClick}"><nord-icon name="navigation-toggle-lock" size="s"></nord-icon></button>`}handleNavWidthChange(){j.value=this.navWidth}handleNavStateChange(t){switch("wait"===t&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===t&&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(t){this.isDragging||this.setNavWidth(Math.max(this.navWidth,this.defaultNavWidth)),this.navTransition(this.navOpen?"open":"close"),this.persistNavState&&(D.value=this.navOpen),null!=t&&this.broadcast.post({navOpen:this.navOpen})}navTransition(t){this.navState=$.transition(this.navState,t)}handleNavClick(t){if(!t.defaultPrevented&&!this.wideScreen){const e=t.target;(t=>"nord-nav-item"===t.localName)(n=e)&&!n.hasSubNav&&this.navTransition("close")}var n}handleMainClick(){this.navTransition("click")}handleDropdownOpen(t){"nord-dropdown"===t.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(t){"nord-dropdown"===t.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(t){const{navWidth:n,direction:{isLTR:e}}=this;switch(t.key){case"ArrowLeft":this.setNavWidth(n+(e?-30:30));break;case"ArrowRight":this.setNavWidth(n+(e?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}),t.preventDefault()}setNavWidth(t){this.navWidth=f(Math.round(t),this.minNavWidth,this.maxNavWidth)}startDragging(t){if(0===t.button){t.target.setPointerCapture(t.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1,this.broadcast.post({navWidth:this.navWidth})}handleDrag(t){const n=this.direction.isRTL?this.clientWidth-t.clientX:t.clientX;this.setNavWidth(n),this.navTransition(n>=100?"open":"close")}};E.styles=[k,w,S],t([s(".n-layout-nav",!0)],E.prototype,"navEl",void 0),t([r()],E.prototype,"navWidth",void 0),t([r()],E.prototype,"isDragging",void 0),t([r()],E.prototype,"navState",void 0),t([r()],E.prototype,"wideScreen",void 0),t([d({reflect:!0,type:Boolean,attribute:"nav-open"})],E.prototype,"navOpen",void 0),t([d({reflect:!0,type:Boolean,attribute:"persist-nav-state"})],E.prototype,"persistNavState",void 0),t([d({type:Boolean,reflect:!0,attribute:"sync-nav-state"})],E.prototype,"syncNavState",void 0),t([d({type:Number,reflect:!0,attribute:"default-nav-width"})],E.prototype,"defaultNavWidth",void 0),t([d({type:Number,reflect:!0,attribute:"min-nav-width"})],E.prototype,"minNavWidth",void 0),t([d({type:Number,reflect:!0,attribute:"max-nav-width"})],E.prototype,"maxNavWidth",void 0),t([d({reflect:!0})],E.prototype,"padding",void 0),t([d({type:Boolean,reflect:!0})],E.prototype,"sticky",void 0),t([d({type:Boolean,reflect:!0,attribute:"sticky-footer"})],E.prototype,"stickyFooter",void 0),t([m("navWidth","updated")],E.prototype,"handleNavWidthChange",null),t([m("navState")],E.prototype,"handleNavStateChange",null),t([m("navOpen","updated")],E.prototype,"handleOpenChange",null),E=t([l("nord-layout")],E);var M=E;export{M as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{l as e}from"./NavToggle-QzUt-7lX.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 d,customElement as l}from"lit/decorators.js";import{classMap as c}from"lit/directives/class-map.js";import{styleMap as h}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 m}from"./observe-D0n0zOfU.js";import{c as b}from"./cond-CI1KbneT.js";import{f as y}from"./fsm-Bq5jMQrK.js";import{c as f}from"./number-Dg2vCfGd.js";import{s as k}from"./Component-DSU3Qp0O.js";import{s as w}from"./Sticky-DqnqENYN.js";import z from"./Icon.js";import{NavOpenChangeEvent as x}from"./NavOpenChangeEvent.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";const N=()=>!0;class W{constructor(t,e){t.addController(this),this.options={enabled:N,...e}}hostConnected(){"undefined"!=typeof BroadcastChannel&&(this.channel=new BroadcastChannel(this.options.channelName),this.channel.addEventListener("message",this))}hostDisconnected(){var t,e;null===(t=this.channel)||void 0===t||t.removeEventListener("message",this),null===(e=this.channel)||void 0===e||e.close()}handleEvent(t){this.options.enabled()&&this.options.onMessage(t.data)}post(t){var e;this.options.enabled()&&(null===(e=this.channel)||void 0===e||e.postMessage(t))}}function _(t,e,n=JSON.stringify,a=JSON.parse){return{get value(){try{const n=localStorage.getItem(t);return n?a(n):e}catch(t){return e}},set value(e){try{localStorage.setItem(t,n(e))}catch(t){}}}}const S=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-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-space-xxl);--_n-layout-header-size-s:calc(var(--n-space-xl) + var(--n-space-m));--_n-layout-footer-size:var(--n-space-xxl);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))}.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-index-nav);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}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-color-surface);box-shadow:var(--n-box-shadow-nav)}@media (min-width:1240px){.n-has-drawer .n-layout-content{margin-inline-end:var(--_n-layout-drawer-inline-size)}aside{box-shadow:var(--n-box-shadow-header);border-inline-start:1px solid 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=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;min-block-size:100%;inset-block:0;inset-inline-end:-8px;inline-size:10px;background:0 0}[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-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{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}: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)}`;z.registerIcon(e);const C=250,j="undefined"!=typeof matchMedia?matchMedia("(min-width: 768px)"):{matches:!1,addEventListener(){}},T=_("nord-layout.navWidth",C),E=_("nord-layout.navWidthDefault",C),M=_("nord-layout.navOpen",!0);function D(t){for(const e of t)if(e instanceof HTMLElement&&"nord-nav-toggle"===e.localName)return e;return null}function O(t){return null!==D(t.composedPath())}const $=y({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 L=class extends a{constructor(){super(...arguments),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.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:t=>t!==this.navEl}),this.broadcast=new W(this,{channelName:"nord-layout-nav-state",enabled:()=>this.syncNavState&&this.wideScreen,onMessage:t=>{"navOpen"in t&&(this.navOpen=t.navOpen),"navWidth"in t&&(this.navWidth=t.navWidth)}}),this.navWidth=T.value,this.isDragging=!1,this.wideScreen=j.matches,this.persistNavState=!1,this.syncNavState=!1,this.defaultNavWidth=C,this.minNavWidth=220,this.maxNavWidth=400,this.padding="m",this.sticky=!1,this.stickyFooter=!1,this.hideDefaultNavToggle=!1,this.handleMediaQueryChange=()=>{this.wideScreen=j.matches,this.navTransition(this.wideScreen?"open":"close")},this.handleToggleClick=t=>{O(t)||this.navTransition("toggle")},this.handleHostClick=t=>{O(t)&&this.navTransition("toggle")},this.handleHostMouseOver=t=>{const e=D(t.composedPath());e&&(t.relatedTarget instanceof Node&&e.contains(t.relatedTarget)||this.handleMouseEnter())},this.handleHostMouseOut=t=>{const e=D(t.composedPath());e&&(t.relatedTarget instanceof Node&&e.contains(t.relatedTarget)||this.handleMouseLeave())},this.handleNavFocus=()=>{this.navTransition("focusin")},this.handleMainFocus=()=>{this.navTransition("focusout")},this.handleMouseEnter=()=>{this.wideScreen&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")}}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(){super.disconnectedCallback(),this.removeEventListener("click",this.handleHostClick),this.removeEventListener("mouseover",this.handleHostMouseOver),this.removeEventListener("mouseout",this.handleHostMouseOut)}willUpdate(){this.hasUpdated||(Number.isFinite(this.defaultNavWidth)||(this.defaultNavWidth=C),Number.isFinite(this.minNavWidth)||(this.minNavWidth=220),Number.isFinite(this.maxNavWidth)||(this.maxNavWidth=400),E.value!==this.defaultNavWidth?(this.setNavWidth(this.defaultNavWidth),T.value=this.navWidth,E.value=this.defaultNavWidth):this.setNavWidth(this.navWidth),this.isNarrow||this.persistNavState&&!1===M.value?this.navState="closed":this.navState="opened")}render(){const{navWidth:t,navState:e,navSlot:n,headerSlot:a,footerSlot:s,topBarSlot:r,drawerSlot:d,isDragging:l,direction:v}=this,p="opened"===e&&this.wideScreen?t:this.defaultNavWidth;return o`<div class="${c({"n-layout":!0,"n-rtl":v.isRTL,"n-dragging":l,"n-has-header":a.hasContent,"n-has-footer":s.hasContent,"n-has-top-bar":r.hasContent,"n-has-drawer":d.hasContent,"n-has-nav":n.hasContent})}" style="${h({"--_n-layout-nav-width":`${p}px`})}" data-nav="${n.hasContent?e:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}"><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" @pointerdown="${b("opened"===e,this.startDragging)}" @pointermove="${b(l,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}" ?hidden="${this.isNarrow}"></div>${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(){T.value=this.navWidth}handleNavStateChange(t){switch("wait"===t&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===t&&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(t){if(this.isDragging||this.setNavWidth(Math.max(this.navWidth,this.defaultNavWidth)),this.navTransition(this.navOpen?"open":"close"),this.persistNavState&&(M.value=this.navOpen),null!=t){const t=this.navOpen;this.broadcast.post({navOpen:t}),this.dispatchEvent(new x(t))}}navTransition(t){this.navState=$.transition(this.navState,t)}handleNavClick(t){if(!t.defaultPrevented&&!this.wideScreen){const n=t.target;(t=>"nord-nav-item"===t.localName)(e=n)&&!e.hasSubNav&&this.navTransition("close")}var e}handleMainClick(){this.navTransition("click")}handleDropdownOpen(t){"nord-dropdown"===t.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(t){"nord-dropdown"===t.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(t){const{navWidth:e,direction:{isLTR:n}}=this;switch(t.key){case"ArrowLeft":this.setNavWidth(e+(n?-30:30));break;case"ArrowRight":this.setNavWidth(e+(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}),t.preventDefault()}setNavWidth(t){this.navWidth=f(Math.round(t),this.minNavWidth,this.maxNavWidth)}startDragging(t){if(0===t.button){t.target.setPointerCapture(t.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1,this.broadcast.post({navWidth:this.navWidth})}handleDrag(t){const e=this.direction.isRTL?this.clientWidth-t.clientX:t.clientX;this.setNavWidth(e),this.navTransition(e>=100?"open":"close")}};L.styles=[k,w,S],t([s(".n-layout-nav",!0)],L.prototype,"navEl",void 0),t([r()],L.prototype,"navWidth",void 0),t([r()],L.prototype,"isDragging",void 0),t([r()],L.prototype,"navState",void 0),t([r()],L.prototype,"wideScreen",void 0),t([d({reflect:!0,type:Boolean,attribute:"nav-open"})],L.prototype,"navOpen",void 0),t([d({reflect:!0,type:Boolean,attribute:"persist-nav-state"})],L.prototype,"persistNavState",void 0),t([d({type:Boolean,reflect:!0,attribute:"sync-nav-state"})],L.prototype,"syncNavState",void 0),t([d({type:Number,reflect:!0,attribute:"default-nav-width"})],L.prototype,"defaultNavWidth",void 0),t([d({type:Number,reflect:!0,attribute:"min-nav-width"})],L.prototype,"minNavWidth",void 0),t([d({type:Number,reflect:!0,attribute:"max-nav-width"})],L.prototype,"maxNavWidth",void 0),t([d({reflect:!0})],L.prototype,"padding",void 0),t([d({type:Boolean,reflect:!0})],L.prototype,"sticky",void 0),t([d({type:Boolean,reflect:!0,attribute:"sticky-footer"})],L.prototype,"stickyFooter",void 0),t([d({type:Boolean,reflect:!0,attribute:"hide-default-nav-toggle"})],L.prototype,"hideDefaultNavToggle",void 0),t([m("navWidth","updated")],L.prototype,"handleNavWidthChange",null),t([m("navState")],L.prototype,"handleNavStateChange",null),t([m("navOpen","updated")],L.prototype,"handleOpenChange",null),L=t([l("nord-layout")],L);var H=L;export{H 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/common/storage.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","/**\n * Thin wrapper around local storage which simplifies (de)serialization and default values.\n * By default, (de)serializes as JSON.\n */\nexport function storage<T>(\n  key: string,\n  defaultValue: T,\n  serialize: (value: T) => string = JSON.stringify,\n  deserialize: (value: string) => T = JSON.parse,\n) {\n  return {\n    get value(): T {\n      try {\n        const value = localStorage.getItem(key)\n        return value ? deserialize(value) : defaultValue\n      }\n      catch {\n        return defaultValue\n      }\n    },\n\n    set value(value: T) {\n      try {\n        localStorage.setItem(key, serialize(value))\n      }\n      catch {\n        //  nothing we can do here\n      }\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 '../nav-toggle/NavToggle.js'\n\nIcon.registerIcon(lockIcon)\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\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\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.\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 */\n@customElement('nord-layout')\nexport default class Layout extends LitElement {\n  static styles = [componentStyle, stickyStyle, style]\n\n  private peekTimeoutId?: ReturnType<typeof setTimeout>\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 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  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      if ('navOpen' in data) {\n        this.navOpen = data.navOpen\n      }\n      if ('navWidth' in data) {\n        this.navWidth = data.navWidth\n      }\n    },\n  })\n\n  @query('.n-layout-nav', true) private navEl!: HTMLDivElement\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   * 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   * 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  }\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 adjustedNavWidth = navState === 'opened' && this.wideScreen ? navWidth : 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        data-nav=${navSlot.hasContent ? navState : 'closed'}\n        data-screen=${this.wideScreen ? 'wide' : 'narrow'}\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            @pointerdown=${cond(navState === 'opened', this.startDragging)}\n            @pointermove=${cond(isDragging, this.handleDrag)}\n            @pointerleave=${this.stopDragging}\n            @pointerup=${this.stopDragging}\n            @keydown=${this.handleKeyboardResize}\n            ?hidden=${this.isNarrow}\n          ></div>\n          ${this.renderNavCollapse()}\n        </div>\n\n        <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleMainClick}>\n          ${navSlot.hasContent ? 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() {\n    navWidthStore.value = this.navWidth\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      this.broadcast.post({ navOpen: this.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 = () => {\n    this.navTransition('toggle')\n  }\n\n  private handleNavFocus = () => {\n    this.navTransition('focusin')\n  }\n\n  private handleMainFocus = () => {\n    this.navTransition('focusout')\n  }\n\n  private handleMouseEnter = () => {\n    if (this.wideScreen) {\n      this.navTransition('pointerenter')\n    }\n  }\n\n  private handleMouseLeave = () => {\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 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    }\n  }\n\n  private stopDragging() {\n    this.isDragging = false\n    this.broadcast.post({ navWidth: this.navWidth })\n  }\n\n  private handleDrag(e: PointerEvent) {\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","storage","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","setItem","Icon","registerIcon","lockIcon","NAV_DEFAULT_WIDTH","mediaQuery","matchMedia","matches","navWidthStore","navWidthDefaultStore","navOpenStore","navMachine","fsm","opened","toggle","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","navSlot","SlotController","drawerSlot","topBarSlot","headerSlot","footerSlot","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","wideScreen","onDismiss","navTransition","isDismissible","node","navEl","broadcast","syncNavState","navOpen","navWidth","isDragging","persistNavState","defaultNavWidth","minNavWidth","maxNavWidth","padding","sticky","stickyFooter","handleMediaQueryChange","handleToggleClick","handleNavFocus","handleMainFocus","handleMouseEnter","handleMouseLeave","handleTransitionEnd","isNarrow","connectedCallback","super","listen","willUpdate","hasUpdated","Number","isFinite","setNavWidth","render","adjustedNavWidth","html","classMap","isRTL","hasContent","styleMap","isEmpty","handleDropdownOpen","handleDropdownClose","handleNavClick","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","renderNavCollapse","handleMainClick","renderNavToggle","nothing","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","setTimeout","once","handleOpenChange","Math","max","transition","e","defaultPrevented","target","el","localName","isNavItem","hasSubNav","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","stickyStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"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"}
+{"version":3,"file":"Layout.js","sources":["../src/common/controllers/BroadcastChannelController.ts","../src/common/storage.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","/**\n * Thin wrapper around local storage which simplifies (de)serialization and default values.\n * By default, (de)serializes as JSON.\n */\nexport function storage<T>(\n  key: string,\n  defaultValue: T,\n  serialize: (value: T) => string = JSON.stringify,\n  deserialize: (value: string) => T = JSON.parse,\n) {\n  return {\n    get value(): T {\n      try {\n        const value = localStorage.getItem(key)\n        return value ? deserialize(value) : defaultValue\n      }\n      catch {\n        return defaultValue\n      }\n    },\n\n    set value(value: T) {\n      try {\n        localStorage.setItem(key, serialize(value))\n      }\n      catch {\n        //  nothing we can do here\n      }\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 '../nav-toggle/NavToggle.js'\n\nIcon.registerIcon(lockIcon)\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\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 *\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 */\n@customElement('nord-layout')\nexport default class Layout extends LitElement {\n  static styles = [componentStyle, stickyStyle, style]\n\n  private peekTimeoutId?: ReturnType<typeof setTimeout>\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 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  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      if ('navOpen' in data) {\n        this.navOpen = data.navOpen\n      }\n      if ('navWidth' in data) {\n        this.navWidth = data.navWidth\n      }\n    },\n  })\n\n  @query('.n-layout-nav', true) private navEl!: HTMLDivElement\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   * 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   * 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  }\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 adjustedNavWidth = navState === 'opened' && this.wideScreen ? navWidth : 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        data-nav=${navSlot.hasContent ? navState : 'closed'}\n        data-screen=${this.wideScreen ? 'wide' : 'narrow'}\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            @pointerdown=${cond(navState === 'opened', this.startDragging)}\n            @pointermove=${cond(isDragging, this.handleDrag)}\n            @pointerleave=${this.stopDragging}\n            @pointerup=${this.stopDragging}\n            @keydown=${this.handleKeyboardResize}\n            ?hidden=${this.isNarrow}\n          ></div>\n          ${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() {\n    navWidthStore.value = this.navWidth\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      const navOpen = this.navOpen\n      this.broadcast.post({ navOpen })\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    this.navTransition('focusin')\n  }\n\n  private handleMainFocus = () => {\n    this.navTransition('focusout')\n  }\n\n  private handleMouseEnter = () => {\n    if (this.wideScreen) {\n      this.navTransition('pointerenter')\n    }\n  }\n\n  private handleMouseLeave = () => {\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 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    }\n  }\n\n  private stopDragging() {\n    this.isDragging = false\n    this.broadcast.post({ navWidth: this.navWidth })\n  }\n\n  private handleDrag(e: PointerEvent) {\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","storage","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","setItem","Icon","registerIcon","lockIcon","NAV_DEFAULT_WIDTH","mediaQuery","matchMedia","matches","navWidthStore","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","navSlot","SlotController","drawerSlot","topBarSlot","headerSlot","footerSlot","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","wideScreen","onDismiss","navTransition","isDismissible","node","navEl","broadcast","syncNavState","navOpen","navWidth","isDragging","persistNavState","defaultNavWidth","minNavWidth","maxNavWidth","padding","sticky","stickyFooter","hideDefaultNavToggle","handleMediaQueryChange","handleToggleClick","handleHostClick","handleHostMouseOver","relatedTarget","Node","contains","handleMouseEnter","handleHostMouseOut","handleMouseLeave","handleNavFocus","handleMainFocus","handleTransitionEnd","isNarrow","connectedCallback","super","listen","disconnectedCallback","willUpdate","hasUpdated","Number","isFinite","setNavWidth","render","adjustedNavWidth","html","classMap","isRTL","hasContent","styleMap","isEmpty","handleDropdownOpen","handleDropdownClose","handleNavClick","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","renderNavCollapse","handleMainClick","renderNavToggle","nothing","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","setTimeout","once","handleOpenChange","Math","max","dispatchEvent","NavOpenChangeEvent","transition","defaultPrevented","el","isNavItem","hasSubNav","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","stickyStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"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"}

package/lib/NavOpenChangeEvent.js

@@ -0,0 +1,2 @@
+import{N as e}from"./events-Bv6wNHwJ.js";class n extends e{constructor(e){super("nav-open-change"),Object.defineProperty(this,"navOpen",{value:e,enumerable:!0,writable:!1})}}export{n as NavOpenChangeEvent};
+//# sourceMappingURL=NavOpenChangeEvent.js.map

package/lib/NavOpenChangeEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavOpenChangeEvent.js","sources":["../src/layout/NavOpenChangeEvent.ts"],"sourcesContent":["import { NordEvent } from '../common/events.js'\n\n/**\n * Event dispatched when the layout's navigation open state changes.\n * The `navOpen` property contains the new state — `true` when opened, `false` when closed.\n */\nexport class NavOpenChangeEvent extends NordEvent {\n  declare navOpen: boolean\n\n  constructor(navOpen: boolean) {\n    super('nav-open-change')\n    Object.defineProperty(this, 'navOpen', {\n      value: navOpen,\n      enumerable: true,\n      writable: false,\n    })\n  }\n}\n\ndeclare global {\n  interface HTMLElementEventMap {\n    'nav-open-change': NavOpenChangeEvent\n  }\n  interface DocumentEventMap {\n    'nav-open-change': NavOpenChangeEvent\n  }\n  interface WindowEventMap {\n    'nav-open-change': NavOpenChangeEvent\n  }\n}\n"],"names":["NavOpenChangeEvent","NordEvent","constructor","navOpen","super","Object","defineProperty","this","value","enumerable","writable"],"mappings":"yCAMM,MAAOA,UAA2BC,EAGtC,WAAAC,CAAYC,GACVC,MAAM,mBACNC,OAAOC,eAAeC,KAAM,UAAW,CACrCC,MAAOL,EACPM,YAAY,EACZC,UAAU,GAEb"}

package/lib/NavToggle-QzUt-7lX.js

@@ -0,0 +1,2 @@
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as o,html as i,LitElement as e}from"lit";import{property as r,state as n,customElement as s}from"lit/decorators.js";import{classMap as a}from"lit/directives/class-map.js";import{ref as l}from"lit/directives/ref.js";import{D as d}from"./DirectionController-ChvNGESZ.js";import{F as c}from"./FocusableMixin-BlQLNPdJ.js";import{s as u}from"./Component-DSU3Qp0O.js";import h from"./Icon.js";import{LocalizeController as v}from"./LocalizeController.js";import"./Button.js";import"./VisuallyHidden.js";const p="navigation-toggle-lock";var m=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m19.7188 10.71-8 8-1.41-1.41 7.29-7.29-7.3-7.29996 1.41-1.41 8 8c.39.39.39 1.01996 0 1.40996zm-8-1.40996-7.99997-8.01-1.41 1.41 7.29 7.29-7.3 7.29996 1.41 1.41 8.00997-7.99c.39-.39.39-1.01996 0-1.40996z" fill="currentColor"/></svg>',tags:"nordicon navigation hamburger menu toggle navigation arrow right double lock triangle chevron",title:p});const g="navigation-toggle";var b=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18.9988 3v2h-16.00002v-2zm-16.00002 8h16.00002v-2h-16.00002zm0 6h16.00002v-2h-16.00002z" fill="currentColor"/></svg>',tags:"nordicon navigation hamburger menu toggle navigation three lines",title:g});const f=o`:host{color:var(--n-color-icon);display:inline-flex}@media (min-width:768px){:host([data-auto-hidden]){display:none}}nord-button{--n-button-color:currentColor}nord-icon{display:block;transform:translateX(-1px);color:currentColor}.icon-active{display:none}.is-rtl .icon-active{transform:rotate(180deg)}@media (min-width:768px){:host(:is(:hover,:focus-within)) .icon-active{display:block}:host(:is(:hover,:focus-within)) .icon-default{display:none}}`;h.registerIcon(b),h.registerIcon(m);let y=class extends(c(e)){constructor(){super(...arguments),this.direction=new d(this),this.localization=new v(this),this.icon=g,this.iconActive=p,this.autoHide=!1,this.autoHidden=!1}connectedCallback(){super.connectedCallback(),this.startAutoHide()}disconnectedCallback(){super.disconnectedCallback(),this.stopAutoHide()}updated(t){var o;null===(o=super.updated)||void 0===o||o.call(this,t),t.has("autoHide")&&(this.stopAutoHide(),this.startAutoHide()),t.has("autoHidden")&&this.toggleAttribute("data-auto-hidden",this.autoHidden)}startAutoHide(){if(!this.autoHide)return;const t=this.closest("nord-layout");t&&(this.observedLayout=t,this.autoHidden=t.hasAttribute("nav-open"),this.layoutObserver=new MutationObserver((()=>{this.autoHidden=t.hasAttribute("nav-open")})),this.layoutObserver.observe(t,{attributes:!0,attributeFilter:["nav-open"]}))}stopAutoHide(){var t;null===(t=this.layoutObserver)||void 0===t||t.disconnect(),this.layoutObserver=void 0,this.observedLayout=void 0,this.autoHidden=!1}render(){return i`<nord-button variant="plain" ${l(this.focusableRef)} class="${a({"is-rtl":this.direction.isRTL})}"><nord-visually-hidden>${this.localization.term("label")}</nord-visually-hidden><nord-icon size="m" class="icon-default" name="${this.icon}"></nord-icon><nord-icon size="m" class="icon-active" name="${this.iconActive}"></nord-icon></nord-button>`}};y.styles=[u,f],t([r({reflect:!0})],y.prototype,"icon",void 0),t([r({reflect:!0,attribute:"icon-active"})],y.prototype,"iconActive",void 0),t([r({type:Boolean,reflect:!0,attribute:"auto-hide"})],y.prototype,"autoHide",void 0),t([n()],y.prototype,"autoHidden",void 0),y=t([s("nord-nav-toggle")],y);var w=y;export{w as N,m as l};
+//# sourceMappingURL=NavToggle-QzUt-7lX.js.map

package/lib/NavToggle-QzUt-7lX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavToggle-QzUt-7lX.js","sources":["../../icons/lib/assets/navigation-toggle-lock.js","../../icons/lib/assets/navigation-toggle.js","../src/nav-toggle/NavToggle.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m19.7188 10.71-8 8-1.41-1.41 7.29-7.29-7.3-7.29996 1.41-1.41 8 8c.39.39.39 1.01996 0 1.40996zm-8-1.40996-7.99997-8.01-1.41 1.41 7.29 7.29-7.3 7.29996 1.41 1.41 8.00997-7.99c.39-.39.39-1.01996 0-1.40996z\" fill=\"currentColor\"/></svg>';\nexport const title = \"navigation-toggle-lock\";\nexport const tags =\n  \"nordicon navigation hamburger menu toggle navigation arrow right double lock triangle chevron\";\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18.9988 3v2h-16.00002v-2zm-16.00002 8h16.00002v-2h-16.00002zm0 6h16.00002v-2h-16.00002z\" fill=\"currentColor\"/></svg>';\nexport const title = \"navigation-toggle\";\nexport const tags =\n  \"nordicon navigation hamburger menu toggle navigation three lines\";\n","import * as lockIcon from '@nordhealth/icons/lib/assets/navigation-toggle-lock.js'\nimport * as unlockIcon from '@nordhealth/icons/lib/assets/navigation-toggle.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ref } from 'lit/directives/ref.js'\n\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './NavToggle.css'\n\nimport '../button/Button.js'\nimport '../visually-hidden/VisuallyHidden.js'\n\nIcon.registerIcon(unlockIcon)\nIcon.registerIcon(lockIcon)\n\n/**\n * Nav toggle is meant for hiding and showing the primary navigation.\n *\n * Used internally by `<nord-layout>` as the default contents of its\n * `nav-toggle` slot. Can also be placed **anywhere inside `<nord-layout>`**\n * (e.g. inside a `<nord-header>` next to the page title) — the layout\n * listens for clicks on any descendant `<nord-nav-toggle>` and toggles the\n * navigation accordingly. Outside of a `<nord-layout>` it renders as a\n * presentational button with no behaviour.\n *\n * The two displayed icons can be customised via the `icon` and\n * `icon-active` attributes. The first is shown in the resting state; the\n * second replaces it on hover/focus (≥ 768px).\n *\n * Set `auto-hide` to have the toggle disappear automatically when the\n * ancestor `<nord-layout>`'s nav is open (on wide viewports), mirroring\n * the built-in fallback toggle's behaviour.\n *\n * @status ready\n * @category action\n *\n * @localization label - Accessible label for the nav toggle button.\n */\n@customElement('nord-nav-toggle')\nexport default class NavToggle extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private direction = new DirectionController(this)\n  private localization = new LocalizeController<'nord-nav-toggle'>(this)\n  private layoutObserver?: MutationObserver\n  private observedLayout?: HTMLElement\n\n  /**\n   * Icon shown in the resting state. Accepts any registered icon name.\n   * Defaults to `navigation-toggle`.\n   */\n  @property({ reflect: true }) icon: string = unlockIcon.title\n\n  /**\n   * Icon shown on hover/focus (≥ 768px), swapping in for `icon`.\n   * Defaults to `navigation-toggle-lock`.\n   */\n  @property({ reflect: true, attribute: 'icon-active' }) iconActive: string = lockIcon.title\n\n  /**\n   * When set, the toggle finds its ancestor `<nord-layout>` and hides\n   * itself on wide viewports while the layout's nav is open. Useful when\n   * placing the toggle outside the `nav-toggle` slot.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'auto-hide' }) autoHide: boolean = false\n\n  /**\n   * Reflects whether `auto-hide` is engaged (i.e. the ancestor layout\n   * currently has `nav-open`). The CSS hides the host based on this.\n   */\n  @state() private autoHidden: boolean = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.startAutoHide()\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.stopAutoHide()\n  }\n\n  protected updated(changed: Map<string, unknown>) {\n    super.updated?.(changed)\n    if (changed.has('autoHide')) {\n      this.stopAutoHide()\n      this.startAutoHide()\n    }\n    if (changed.has('autoHidden')) {\n      this.toggleAttribute('data-auto-hidden', this.autoHidden)\n    }\n  }\n\n  private startAutoHide() {\n    if (!this.autoHide) {\n      return\n    }\n    const layout = this.closest<HTMLElement>('nord-layout')\n    if (!layout) {\n      return\n    }\n    this.observedLayout = layout\n    this.autoHidden = layout.hasAttribute('nav-open')\n    this.layoutObserver = new MutationObserver(() => {\n      this.autoHidden = layout.hasAttribute('nav-open')\n    })\n    this.layoutObserver.observe(layout, {\n      attributes: true,\n      attributeFilter: ['nav-open'],\n    })\n  }\n\n  private stopAutoHide() {\n    this.layoutObserver?.disconnect()\n    this.layoutObserver = undefined\n    this.observedLayout = undefined\n    this.autoHidden = false\n  }\n\n  render() {\n    return html`\n      <nord-button variant=\"plain\" ${ref(this.focusableRef)} class=${classMap({ 'is-rtl': this.direction.isRTL })}>\n        <nord-visually-hidden>${this.localization.term('label')}</nord-visually-hidden>\n        <nord-icon size=\"m\" class=\"icon-default\" name=${this.icon}></nord-icon>\n        <nord-icon size=\"m\" class=\"icon-active\" name=${this.iconActive}></nord-icon>\n      </nord-button>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-nav-toggle': NavToggle\n  }\n}\n"],"names":["title","Icon","registerIcon","unlockIcon","lockIcon","NavToggle","FocusableMixin","LitElement","constructor","this","direction","DirectionController","localization","LocalizeController","icon","unlockIcon.title","iconActive","lockIcon.title","autoHide","autoHidden","connectedCallback","super","startAutoHide","disconnectedCallback","stopAutoHide","updated","changed","_a","call","has","toggleAttribute","layout","closest","observedLayout","hasAttribute","layoutObserver","MutationObserver","observe","attributes","attributeFilter","disconnect","undefined","render","html","ref","focusableRef","classMap","isRTL","term","styles","componentStyle","style","__decorate","property","reflect","prototype","attribute","type","Boolean","state","customElement"],"mappings":"uiBACO,MAAMA,EAAQ,qEADN,oTAGb,0GCFK,MAAMA,EAAQ,gEADN,kMAGb,whBCeFC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GA0BH,IAAMC,EAAN,cAAwBC,EAAeC,IAAvC,WAAAC,uBAGLC,KAAAC,UAAY,IAAIC,EAAoBF,MACpCA,KAAAG,aAAe,IAAIC,EAAsCJ,MAQpCA,KAAAK,KAAeC,EAMWN,KAAAO,WAAqBC,EAORR,KAAQS,UAAY,EAMvET,KAAUU,YAAY,CA0DxC,CAxDC,iBAAAC,GACEC,MAAMD,oBACNX,KAAKa,eACN,CAED,oBAAAC,GACEF,MAAME,uBACNd,KAAKe,cACN,CAES,OAAAC,CAAQC,SACA,QAAhBC,EAAAN,MAAMI,eAAU,IAAAE,GAAAA,EAAAC,KAAAnB,KAAAiB,GACZA,EAAQG,IAAI,cACdpB,KAAKe,eACLf,KAAKa,iBAEHI,EAAQG,IAAI,eACdpB,KAAKqB,gBAAgB,mBAAoBrB,KAAKU,WAEjD,CAEO,aAAAG,GACN,IAAKb,KAAKS,SACR,OAEF,MAAMa,EAAStB,KAAKuB,QAAqB,eACpCD,IAGLtB,KAAKwB,eAAiBF,EACtBtB,KAAKU,WAAaY,EAAOG,aAAa,YACtCzB,KAAK0B,eAAiB,IAAIC,kBAAiB,KACzC3B,KAAKU,WAAaY,EAAOG,aAAa,WAAW,IAEnDzB,KAAK0B,eAAeE,QAAQN,EAAQ,CAClCO,YAAY,EACZC,gBAAiB,CAAC,cAErB,CAEO,YAAAf,SACe,QAArBG,EAAAlB,KAAK0B,sBAAgB,IAAAR,GAAAA,EAAAa,aACrB/B,KAAK0B,oBAAiBM,EACtBhC,KAAKwB,oBAAiBQ,EACtBhC,KAAKU,YAAa,CACnB,CAED,MAAAuB,GACE,OAAOC,CAAI,gCACsBC,EAAInC,KAAKoC,wBAAuBC,EAAS,CAAE,SAAUrC,KAAKC,UAAUqC,kCACzEtC,KAAKG,aAAaoC,KAAK,iFACCvC,KAAKK,mEACNL,KAAKO,wCAGzD,GAvFMX,EAAA4C,OAAS,CAACC,EAAgBC,GAWJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAuCjD,EAAAkD,UAAA,YAAA,GAMLH,EAAA,CAAtDC,EAAS,CAAEC,SAAS,EAAME,UAAW,iBAAoDnD,EAAAkD,UAAA,kBAAA,GAOtBH,EAAA,CAAnEC,EAAS,CAAEI,KAAMC,QAASJ,SAAS,EAAME,UAAW,eAAwCnD,EAAAkD,UAAA,gBAAA,GAM5EH,EAAA,CAAhBO,KAA2CtD,EAAAkD,UAAA,kBAAA,GA/BzBlD,EAAS+C,EAAA,CAD7BQ,EAAc,oBACMvD,SAAAA"}

package/lib/NavToggle.js

@@ -1,2 +1,2 @@
-import"./tslib.es6-CmLYFWVC.js";export{N as default}from"./NavToggle-DL74d1aQ.js";import"lit";import"lit/decorators.js";import"lit/directives/class-map.js";import"lit/directives/ref.js";import"./DirectionController-ChvNGESZ.js";import"./FocusableMixin-BlQLNPdJ.js";import"./Component-DSU3Qp0O.js";import"./Icon.js";import"./LocalizeController.js";import"./Button.js";import"./VisuallyHidden.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.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"./EventController-BBOmvfLa.js";import"./LightDomController-DIwtVelV.js";import"./SlotController-Z6eG7LSZ.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";
+import"./tslib.es6-CmLYFWVC.js";export{N as default}from"./NavToggle-QzUt-7lX.js";import"lit";import"lit/decorators.js";import"lit/directives/class-map.js";import"lit/directives/ref.js";import"./DirectionController-ChvNGESZ.js";import"./FocusableMixin-BlQLNPdJ.js";import"./Component-DSU3Qp0O.js";import"./Icon.js";import"./LocalizeController.js";import"./Button.js";import"./VisuallyHidden.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.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"./EventController-BBOmvfLa.js";import"./LightDomController-DIwtVelV.js";import"./SlotController-Z6eG7LSZ.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";
 //# sourceMappingURL=NavToggle.js.map