@nordhealth/components 2.13.0 → 2.14.1

package/lib/Input.js

@@ -1,2 +1,2 @@
-import{i as n,y as t,b as e,_ as o,e as s,s as i}from"./query-assigned-elements-cf502539.js";import{e as r}from"./property-03f59dce.js";import{l as a}from"./if-defined-720964c0.js";import{o as d}from"./class-map-21152cee.js";import{n as l}from"./ref-c44e9f3c.js";import{F as c}from"./FocusableMixin-32631bff.js";import{F as p}from"./FormAssociatedMixin-f4da77a8.js";import{I as u}from"./InputMixin-7fa755e1.js";import{R as h,s as m}from"./TextField-ca819c35.js";import{A as b}from"./AutocompleteMixin-5163f8db.js";import{S as v}from"./SizeMixin-4d04817d.js";import{s as f}from"./Component-449e40fb.js";import{s as g}from"./FormField-413f22f5.js";import{S as w}from"./SlotController-d733c575.js";import{D as y}from"./DirectionController-8b298382.js";import{c as z}from"./cond-2da54107.js";import $ from"./Icon.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./events-731d0007.js";import"./VisuallyHidden.js";import"./state-70f38ceb.js";import"./observe-a9c6dfb6.js";var j=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',title:"navigation-search",tags:"nordicon navigation menu find search magnifying glass"});const x=n`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.n-input-container{font-size:var(--n-font-size-m);display:grid;grid-template-columns:max-content 1fr max-content}.n-input{grid-area:1/1/2/4}slot[name=end],slot[name=start]{pointer-events:none;display:flex;align-items:center;color:var(--n-color-icon)}slot[name=start]{grid-area:1/1/2/2;order:1}slot[name=end]{grid-area:1/3/2/4}.is-rtl slot[name=end],slot[name=start]{--n-button-border-radius:var(--n-border-radius-s) 0 0 var(--n-border-radius-s)}.is-rtl slot[name=start],slot[name=end]{--n-button-border-radius:0 var(--n-border-radius-s) var(--n-border-radius-s) 0}:is([name=start],[name=end])::slotted(:not(nord-button,nord-dropdown)),nord-icon{margin-inline-start:var(--n-space-m);margin-inline-end:var(--n-space-m)}:host([size="s"]) :is([name=start],[name=end])::slotted(:not(nord-button,nord-dropdown)),:host([size="s"]) nord-icon{margin-inline-start:var(--n-space-s);margin-inline-end:var(--n-space-s)}:host([size="l"]) :is([name=start],[name=end])::slotted(:not(nord-button,nord-dropdown)),:host([size="l"]) nord-icon{margin-inline-start:var(--n-space-m);margin-inline-end:var(--n-space-m)}.has-start .n-input{padding-inline-start:var(--n-space-xl)}.has-end .n-input{padding-inline-end:var(--n-space-xl)}:host([size="s"]) .has-start .n-input,:host([size="s"][type=search]) .n-input{padding-inline-start:var(--n-space-l)}:host([size="s"]) .has-end .n-input{padding-inline-end:var(--n-space-l)}:host([size="l"]) .has-start .n-input,:host([size="l"][type=search]) .n-input{padding-inline-start:calc(var(--n-space-xl) * 1.1)}:host([size="l"]) .has-end .n-input{padding-inline-end:calc(var(--n-space-xl) * 1.1)}::slotted(nord-button:not([disabled])),::slotted(nord-dropdown){pointer-events:auto;position:relative;--n-button-box-shadow:none}::slotted(nord-button:active),::slotted(nord-dropdown:active:not([open])){inset-block-start:-1px}::slotted(nord-button[disabled]){--n-button-background-color:transparent}.n-input-container:hover:not(:focus-within) ::slotted(:is(nord-button,nord-dropdown)),.n-label-container:hover~.n-input-container:not(:focus-within) ::slotted(:is(nord-button,nord-dropdown)){--n-button-border-color:var(--n-input-border-color, var(--n-color-border-hover))}.n-input-container:focus-within ::slotted(:is(nord-button,nord-dropdown:not([open]))){--n-button-border-color:var(--n-input-border-color, var(--n-color-accent))}:host([error]) .n-input-container ::slotted(:is(nord-button:not(:focus),nord-dropdown:not(:focus-within),nord-dropdown[open])){--n-button-border-color:var(--n-input-border-color, var(--n-color-status-danger))}.has-start-button .n-input{padding-inline-start:calc(var(--n-space-l) * 2)}.has-end-button .n-input{padding-inline-end:calc(var(--n-space-l) * 2)}:host([size="s"]) .has-start-button .n-input{padding-inline-start:calc(var(--n-space-m) * 2.5)}:host([size="s"]) .has-end-button .n-input{padding-inline-end:calc(var(--n-space-m) * 2.5)}:host([size="l"]) .has-start-button .n-input{padding-inline-start:calc(var(--n-space-l) * 2.5)}:host([size="l"]) .has-end-button .n-input{padding-inline-end:calc(var(--n-space-l) * 2.5)}:host([size="s"]) ::slotted(nord-button){--_n-button-padding-inline:calc(var(--n-space-s) * 1.4)}:host{--_n-input-icon-size:var(--n-size-icon-s)}:host([size="s"]){--_n-input-icon-size:var(--n-size-icon-xs)}:host([size="l"]){--_n-input-icon-size:var(--n-size-icon-m)}::slotted(nord-icon:not([size])),nord-icon{--_n-icon-size:var(--_n-input-icon-size)}`;$.registerIcon(j);const S=n=>null!==n&&("nord-button"===n.localName||"nord-dropdown"===n.localName);let k=class extends(v(p(b(h(u(c(i))))))){constructor(){super(...arguments),this.startSlot=new w(this,"start"),this.endSlot=new w(this,"end"),this.direction=new y(this),this.type="text",this.expand=!1,this.disallowPattern=void 0,this.handleInputChange=n=>{const t=n.target;this.disallowPattern&&function(n,t){const{value:e}=n,o=n.selectionStart,s=e.slice(0,o),i=e.slice(o,e.length),r=s.replace(t,""),a=r+i.replace(t,""),d=r.length;n.value=a,n.selectionStart=d,n.selectionEnd=d}(t,new RegExp(this.disallowPattern,"g")),this.handleInput(n)}}render(){var n;const o="search"===this.type||this.startSlot.hasContent,s="number"===this.type;return t`${this.renderLabel()}<div class="${d({"n-input-container":!0,"has-start":o,"has-end":this.endSlot.hasContent,"has-start-button":S(this.startSlot.content),"has-end-button":S(this.endSlot.content),"is-rtl":"rtl"===this.direction.dir})}"><slot name="${this.startSlot.slotName}" ?hidden="${!o}">${"search"===this.type?t`<nord-icon name="navigation-search"></nord-icon>`:e}</slot><input ${l(this.focusableRef)} id="${this.inputId}" class="n-input" type="${s?"text":this.type}" inputmode="${z(s,"numeric")}" pattern="${z(s,"[0-9]*")}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" name="${a(this.name)}" .value="${null!==(n=this.value)&&void 0!==n?n:""}" placeholder="${a(this.placeholder)}" @input="${this.handleInputChange}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" spellcheck="false" autocomplete="${this.autocomplete}"><slot name="${this.endSlot.slotName}" ?hidden="${this.endSlot.isEmpty}"></slot></div>${this.renderError()}`}handleKeydown(n){const{form:t}=this;if("Enter"===n.key&&t){const n=function(n){let t=n.querySelector('button[type="submit"]');!t&&n.id&&(t=n.getRootNode().querySelector(`button[form=${n.id}]`));return t}(t);setTimeout((()=>null==n?void 0:n.click()),0)}}};k.styles=[f,g,m,x],o([r({reflect:!0})],k.prototype,"type",void 0),o([r({reflect:!0,type:Boolean})],k.prototype,"expand",void 0),o([r({reflect:!0,attribute:"disallow-pattern"})],k.prototype,"disallowPattern",void 0),k=o([s("nord-input")],k);var _=k;export{_ as default};
+import{i as n,y as t,b as e,_ as o,e as s,s as i}from"./query-assigned-elements-cf502539.js";import{e as r}from"./property-03f59dce.js";import{l as a}from"./if-defined-720964c0.js";import{o as d}from"./class-map-21152cee.js";import{n as l}from"./ref-c44e9f3c.js";import{F as c}from"./FocusableMixin-32631bff.js";import{F as p}from"./FormAssociatedMixin-dc7ee1d9.js";import{I as u}from"./InputMixin-7fa755e1.js";import{R as h,s as m}from"./TextField-ca819c35.js";import{A as b}from"./AutocompleteMixin-5163f8db.js";import{S as v}from"./SizeMixin-4d04817d.js";import{s as f}from"./Component-449e40fb.js";import{s as g}from"./FormField-413f22f5.js";import{S as w}from"./SlotController-d733c575.js";import{D as y}from"./DirectionController-8b298382.js";import{c as z}from"./cond-2da54107.js";import j from"./Icon.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./events-5337a6d7.js";import"./VisuallyHidden.js";import"./state-70f38ceb.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";var $=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',title:"navigation-search",tags:"nordicon navigation menu find search magnifying glass"});const x=n`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.n-input-container{font-size:var(--n-font-size-m);display:grid;grid-template-columns:max-content 1fr max-content}.n-input{grid-area:1/1/2/4}slot[name=end],slot[name=start]{pointer-events:none;display:flex;align-items:center;color:var(--n-color-icon)}slot[name=start]{grid-area:1/1/2/2;order:1}slot[name=end]{grid-area:1/3/2/4}.is-rtl slot[name=end],slot[name=start]{--n-button-border-radius:var(--n-border-radius-s) 0 0 var(--n-border-radius-s)}.is-rtl slot[name=start],slot[name=end]{--n-button-border-radius:0 var(--n-border-radius-s) var(--n-border-radius-s) 0}:is([name=start],[name=end])::slotted(:not(nord-button,nord-dropdown)),nord-icon{margin-inline-start:var(--n-space-m);margin-inline-end:var(--n-space-m)}:host([size="s"]) :is([name=start],[name=end])::slotted(:not(nord-button,nord-dropdown)),:host([size="s"]) nord-icon{margin-inline-start:var(--n-space-s);margin-inline-end:var(--n-space-s)}:host([size="l"]) :is([name=start],[name=end])::slotted(:not(nord-button,nord-dropdown)),:host([size="l"]) nord-icon{margin-inline-start:var(--n-space-m);margin-inline-end:var(--n-space-m)}.has-start .n-input{padding-inline-start:var(--n-space-xl)}.has-end .n-input{padding-inline-end:var(--n-space-xl)}:host([size="s"]) .has-start .n-input,:host([size="s"][type=search]) .n-input{padding-inline-start:var(--n-space-l)}:host([size="s"]) .has-end .n-input{padding-inline-end:var(--n-space-l)}:host([size="l"]) .has-start .n-input,:host([size="l"][type=search]) .n-input{padding-inline-start:calc(var(--n-space-xl) * 1.1)}:host([size="l"]) .has-end .n-input{padding-inline-end:calc(var(--n-space-xl) * 1.1)}::slotted(nord-button:not([disabled])),::slotted(nord-dropdown){pointer-events:auto;position:relative;--n-button-box-shadow:none}::slotted(nord-button:active),::slotted(nord-dropdown:active:not([open])){inset-block-start:-1px}::slotted(nord-button[disabled]){--n-button-background-color:transparent}.n-input-container:hover:not(:focus-within) ::slotted(:is(nord-button,nord-dropdown)),.n-label-container:hover~.n-input-container:not(:focus-within) ::slotted(:is(nord-button,nord-dropdown)){--n-button-border-color:var(--n-input-border-color, var(--n-color-border-hover))}.n-input-container:focus-within ::slotted(:is(nord-button,nord-dropdown:not([open]))){--n-button-border-color:var(--n-input-border-color, var(--n-color-accent))}:host([error]) .n-input-container ::slotted(:is(nord-button:not(:focus),nord-dropdown:not(:focus-within),nord-dropdown[open])){--n-button-border-color:var(--n-input-border-color, var(--n-color-status-danger))}.has-start-button .n-input{padding-inline-start:calc(var(--n-space-l) * 2)}.has-end-button .n-input{padding-inline-end:calc(var(--n-space-l) * 2)}:host([size="s"]) .has-start-button .n-input{padding-inline-start:calc(var(--n-space-m) * 2.5)}:host([size="s"]) .has-end-button .n-input{padding-inline-end:calc(var(--n-space-m) * 2.5)}:host([size="l"]) .has-start-button .n-input{padding-inline-start:calc(var(--n-space-l) * 2.5)}:host([size="l"]) .has-end-button .n-input{padding-inline-end:calc(var(--n-space-l) * 2.5)}:host([size="s"]) ::slotted(nord-button){--_n-button-padding-inline:calc(var(--n-space-s) * 1.4)}:host{--_n-input-icon-size:var(--n-size-icon-s)}:host([size="s"]){--_n-input-icon-size:var(--n-size-icon-xs)}:host([size="l"]){--_n-input-icon-size:var(--n-size-icon-m)}::slotted(nord-icon:not([size])),nord-icon{--_n-icon-size:var(--_n-input-icon-size)}`;j.registerIcon($);const S=n=>null!==n&&("nord-button"===n.localName||"nord-dropdown"===n.localName);let k=class extends(v(p(b(h(u(c(i))))))){constructor(){super(...arguments),this.startSlot=new w(this,"start"),this.endSlot=new w(this,"end"),this.direction=new y(this),this.type="text",this.expand=!1,this.disallowPattern=void 0,this.handleInputChange=n=>{const t=n.target;this.disallowPattern&&function(n,t){const{value:e}=n,o=n.selectionStart,s=e.slice(0,o),i=e.slice(o,e.length),r=s.replace(t,""),a=r+i.replace(t,""),d=r.length;n.value=a,n.selectionStart=d,n.selectionEnd=d}(t,new RegExp(this.disallowPattern,"g")),this.handleInput(n)}}render(){var n;const o="search"===this.type||this.startSlot.hasContent,s="number"===this.type;return t`${this.renderLabel()}<div class="${d({"n-input-container":!0,"has-start":o,"has-end":this.endSlot.hasContent,"has-start-button":S(this.startSlot.content),"has-end-button":S(this.endSlot.content),"is-rtl":"rtl"===this.direction.dir})}"><slot name="${this.startSlot.slotName}" ?hidden="${!o}">${"search"===this.type?t`<nord-icon name="navigation-search"></nord-icon>`:e}</slot><input ${l(this.focusableRef)} id="${this.inputId}" class="n-input" type="${s?"text":this.type}" inputmode="${z(s,"numeric")}" pattern="${z(s,"[0-9]*")}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" name="${a(this.name)}" .value="${null!==(n=this.value)&&void 0!==n?n:""}" placeholder="${a(this.placeholder)}" @input="${this.handleInputChange}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" spellcheck="false" autocomplete="${this.autocomplete}"><slot name="${this.endSlot.slotName}" ?hidden="${this.endSlot.isEmpty}"></slot></div>${this.renderError()}`}handleKeydown(n){const{form:t}=this;if("Enter"===n.key&&t){const n=function(n){let t=n.querySelector('button[type="submit"]');!t&&n.id&&(t=n.getRootNode().querySelector(`button[form=${n.id}]`));return t}(t);setTimeout((()=>null==n?void 0:n.click()),0)}}};k.styles=[f,g,m,x],o([r({reflect:!0})],k.prototype,"type",void 0),o([r({reflect:!0,type:Boolean})],k.prototype,"expand",void 0),o([r({reflect:!0,attribute:"disallow-pattern"})],k.prototype,"disallowPattern",void 0),k=o([s("nord-input")],k);var _=k;export{_ as default};
 //# sourceMappingURL=Input.js.map

package/lib/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../icons/lib/assets/navigation-search.js","../src/input/Input.ts","../src/common/input.ts","../src/common/form.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"navigation-search\"\nexport const tags = \"nordicon navigation menu find search magnifying glass\"\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\n\nimport * as searchIcon from \"@nordhealth/icons/lib/assets/navigation-search.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { ReadonlyMixin } from \"../common/mixins/ReadonlyMixin.js\"\nimport { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Input.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { getSubmitButton } from \"../common/form.js\"\nimport { cleanValue } from \"../common/input.js\"\nimport Icon from \"../icon/Icon.js\"\n\nimport type Dropdown from \"../dropdown/Dropdown.js\"\nimport type Button from \"../button/Button.js\"\n\nIcon.registerIcon(searchIcon)\n\nconst isButtonOrDropdown = (el: Element | null): el is Button | Dropdown => {\n  if (el === null) return false\n  return el.localName === \"nord-button\" || el.localName === \"nord-dropdown\"\n}\n\n/**\n * Inputs are used to allow users to provide text input when the expected input is short.\n * As well as plain text, Input supports various types of text, including passwords and numbers.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n * @slot start - Optional slot used to place an icon or prefix at the start of the input.\n * @slot end - Optional slot used to place an icon or suffix at the end of the input.\n *\n * @cssprop [--n-input-inline-size=240px] - Controls the inline size, or width, of the input.\n * @cssprop [--n-input-background=var(--n-color-active)] - Controls the background of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-color=var(--n-color-text)] - Controls the text color of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-border-color=var(--n-color-border-strong)] - Controls the border color of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n */\n@customElement(\"nord-input\")\nexport default class Input extends SizeMixin(\n  FormAssociatedMixin(AutocompleteMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement)))))\n) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  private startSlot = new SlotController(this, \"start\")\n  private endSlot = new SlotController(this, \"end\")\n  private direction = new DirectionController(this)\n\n  /**\n   * The type of the input.\n   */\n  @property({ reflect: true }) type: \"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" = \"text\"\n\n  /**\n   * Controls whether the input expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  /**\n   * Optionally disallow certain characters from being used inside the input, using a regex pattern.\n   */\n  @property({ reflect: true, attribute: \"disallow-pattern\" }) disallowPattern?: string = undefined\n\n  render() {\n    const startSlotHasContent = this.type === \"search\" || this.startSlot.hasContent\n    const isNumber = this.type === \"number\"\n\n    return html`\n      ${this.renderLabel()}\n\n      <div\n        class=${classMap({\n          \"n-input-container\": true,\n          \"has-start\": startSlotHasContent,\n          \"has-end\": this.endSlot.hasContent,\n          \"has-start-button\": isButtonOrDropdown(this.startSlot.content),\n          \"has-end-button\": isButtonOrDropdown(this.endSlot.content),\n          \"is-rtl\": this.direction.dir === \"rtl\",\n        })}\n      >\n        <slot name=${this.startSlot.slotName} ?hidden=${!startSlotHasContent}>\n          ${this.type === \"search\" ? html`<nord-icon name=\"navigation-search\"></nord-icon>` : nothing}\n        </slot>\n        <input\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          class=\"n-input\"\n          type=${isNumber ? \"text\" : this.type}\n          inputmode=${cond(isNumber, \"numeric\")}\n          pattern=${cond(isNumber, \"[0-9]*\")}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          ?readonly=${this.readonly}\n          name=${ifDefined(this.name)}\n          .value=${this.value ?? \"\"}\n          placeholder=${ifDefined(this.placeholder)}\n          @input=${this.handleInputChange}\n          @change=${this.handleChange}\n          @keydown=${this.handleKeydown}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n          spellcheck=\"false\"\n          autocomplete=${this.autocomplete as any}\n        />\n        <slot name=${this.endSlot.slotName} ?hidden=${this.endSlot.isEmpty}></slot>\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  private handleKeydown(e: KeyboardEvent) {\n    const { form } = this\n\n    if (e.key === \"Enter\" && form) {\n      const button = getSubmitButton(form)\n      setTimeout(() => button?.click(), 0)\n    }\n  }\n\n  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement\n\n    // clean up any invalid characters\n    if (this.disallowPattern) {\n      cleanValue(target, new RegExp(this.disallowPattern, \"g\"))\n    }\n    this.handleInput(e)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-input\": Input\n  }\n}\n","export function cleanValue(inputEl: HTMLInputElement, regex: RegExp): string {\n  const { value } = inputEl\n  const cursor = inputEl.selectionStart as number\n\n  const beforeCursor = value.slice(0, cursor)\n  const afterCursor = value.slice(cursor, value.length)\n\n  const filteredBeforeCursor = beforeCursor.replace(regex, \"\")\n  const filterAfterCursor = afterCursor.replace(regex, \"\")\n\n  const newValue = filteredBeforeCursor + filterAfterCursor\n  const newCursor = filteredBeforeCursor.length\n\n  inputEl.value = newValue\n  inputEl.selectionStart = newCursor\n  inputEl.selectionEnd = newCursor\n\n  return newValue\n}\n","/**\n * Finds a form's submit button. First looking for a button inside form,\n * and then looking for a button whose form attribute is equal to the ID of the form.\n */\nexport function getSubmitButton(form: HTMLFormElement): HTMLButtonElement | null {\n  // we can get away with just looking for native <button> elements,\n  // rather than our component, since our button component renders one to light dom.\n  let button = form.querySelector<HTMLButtonElement>(`button[type=\"submit\"]`)\n\n  if (!button && form.id) {\n    const root = form.getRootNode() as ShadowRoot | Document\n    button = root.querySelector<HTMLButtonElement>(`button[form=${form.id}]`)\n  }\n\n  return button\n}\n"],"names":["Icon","registerIcon","searchIcon","isButtonOrDropdown","el","localName","Input","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","startSlot","SlotController","endSlot","direction","DirectionController","type","expand","disallowPattern","undefined","handleInputChange","e","target","inputEl","regex","value","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","RegExp","handleInput","render","startSlotHasContent","hasContent","isNumber","html","renderLabel","classMap","content","dir","slotName","nothing","ref","focusableRef","inputId","cond","disabled","required","readonly","ifDefined","name","_a","placeholder","handleChange","handleKeydown","getDescribedBy","getInvalid","autocomplete","isEmpty","renderError","form","key","button","querySelector","id","getRootNode","getSubmitButton","setTimeout","click","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","property","reflect","prototype","Boolean","attribute","customElement"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../../icons/lib/assets/navigation-search.js","../src/input/Input.ts","../src/common/input.ts","../src/common/form.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"navigation-search\"\nexport const tags = \"nordicon navigation menu find search magnifying glass\"\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\n\nimport * as searchIcon from \"@nordhealth/icons/lib/assets/navigation-search.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { ReadonlyMixin } from \"../common/mixins/ReadonlyMixin.js\"\nimport { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Input.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { getSubmitButton } from \"../common/form.js\"\nimport { cleanValue } from \"../common/input.js\"\nimport Icon from \"../icon/Icon.js\"\n\nimport type Dropdown from \"../dropdown/Dropdown.js\"\nimport type Button from \"../button/Button.js\"\n\nIcon.registerIcon(searchIcon)\n\nconst isButtonOrDropdown = (el: Element | null): el is Button | Dropdown => {\n  if (el === null) return false\n  return el.localName === \"nord-button\" || el.localName === \"nord-dropdown\"\n}\n\n/**\n * Inputs are used to allow users to provide text input when the expected input is short.\n * As well as plain text, Input supports various types of text, including passwords and numbers.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n * @slot start - Optional slot used to place an icon or prefix at the start of the input.\n * @slot end - Optional slot used to place an icon or suffix at the end of the input.\n *\n * @cssprop [--n-input-inline-size=240px] - Controls the inline size, or width, of the input.\n * @cssprop [--n-input-background=var(--n-color-active)] - Controls the background of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-color=var(--n-color-text)] - Controls the text color of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-border-color=var(--n-color-border-strong)] - Controls the border color of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n */\n@customElement(\"nord-input\")\nexport default class Input extends SizeMixin(\n  FormAssociatedMixin(AutocompleteMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement)))))\n) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  private startSlot = new SlotController(this, \"start\")\n  private endSlot = new SlotController(this, \"end\")\n  private direction = new DirectionController(this)\n\n  /**\n   * The type of the input.\n   */\n  @property({ reflect: true }) type: \"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" = \"text\"\n\n  /**\n   * Controls whether the input expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  /**\n   * Optionally disallow certain characters from being used inside the input, using a regex pattern.\n   */\n  @property({ reflect: true, attribute: \"disallow-pattern\" }) disallowPattern?: string = undefined\n\n  render() {\n    const startSlotHasContent = this.type === \"search\" || this.startSlot.hasContent\n    const isNumber = this.type === \"number\"\n\n    return html`\n      ${this.renderLabel()}\n\n      <div\n        class=${classMap({\n          \"n-input-container\": true,\n          \"has-start\": startSlotHasContent,\n          \"has-end\": this.endSlot.hasContent,\n          \"has-start-button\": isButtonOrDropdown(this.startSlot.content),\n          \"has-end-button\": isButtonOrDropdown(this.endSlot.content),\n          \"is-rtl\": this.direction.dir === \"rtl\",\n        })}\n      >\n        <slot name=${this.startSlot.slotName} ?hidden=${!startSlotHasContent}>\n          ${this.type === \"search\" ? html`<nord-icon name=\"navigation-search\"></nord-icon>` : nothing}\n        </slot>\n        <input\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          class=\"n-input\"\n          type=${isNumber ? \"text\" : this.type}\n          inputmode=${cond(isNumber, \"numeric\")}\n          pattern=${cond(isNumber, \"[0-9]*\")}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          ?readonly=${this.readonly}\n          name=${ifDefined(this.name)}\n          .value=${this.value ?? \"\"}\n          placeholder=${ifDefined(this.placeholder)}\n          @input=${this.handleInputChange}\n          @change=${this.handleChange}\n          @keydown=${this.handleKeydown}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n          spellcheck=\"false\"\n          autocomplete=${this.autocomplete as any}\n        />\n        <slot name=${this.endSlot.slotName} ?hidden=${this.endSlot.isEmpty}></slot>\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  private handleKeydown(e: KeyboardEvent) {\n    const { form } = this\n\n    if (e.key === \"Enter\" && form) {\n      const button = getSubmitButton(form)\n      setTimeout(() => button?.click(), 0)\n    }\n  }\n\n  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement\n\n    // clean up any invalid characters\n    if (this.disallowPattern) {\n      cleanValue(target, new RegExp(this.disallowPattern, \"g\"))\n    }\n    this.handleInput(e)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-input\": Input\n  }\n}\n","export function cleanValue(inputEl: HTMLInputElement, regex: RegExp): string {\n  const { value } = inputEl\n  const cursor = inputEl.selectionStart as number\n\n  const beforeCursor = value.slice(0, cursor)\n  const afterCursor = value.slice(cursor, value.length)\n\n  const filteredBeforeCursor = beforeCursor.replace(regex, \"\")\n  const filterAfterCursor = afterCursor.replace(regex, \"\")\n\n  const newValue = filteredBeforeCursor + filterAfterCursor\n  const newCursor = filteredBeforeCursor.length\n\n  inputEl.value = newValue\n  inputEl.selectionStart = newCursor\n  inputEl.selectionEnd = newCursor\n\n  return newValue\n}\n","/**\n * Finds a form's submit button. First looking for a button inside form,\n * and then looking for a button whose form attribute is equal to the ID of the form.\n */\nexport function getSubmitButton(form: HTMLFormElement): HTMLButtonElement | null {\n  // we can get away with just looking for native <button> elements,\n  // rather than our component, since our button component renders one to light dom.\n  let button = form.querySelector<HTMLButtonElement>(`button[type=\"submit\"]`)\n\n  if (!button && form.id) {\n    const root = form.getRootNode() as ShadowRoot | Document\n    button = root.querySelector<HTMLButtonElement>(`button[form=${form.id}]`)\n  }\n\n  return button\n}\n"],"names":["Icon","registerIcon","searchIcon","isButtonOrDropdown","el","localName","Input","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","startSlot","SlotController","endSlot","direction","DirectionController","type","expand","disallowPattern","undefined","handleInputChange","e","target","inputEl","regex","value","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","RegExp","handleInput","render","startSlotHasContent","hasContent","isNumber","html","renderLabel","classMap","content","dir","slotName","nothing","ref","focusableRef","inputId","cond","disabled","required","readonly","ifDefined","name","_a","placeholder","handleChange","handleKeydown","getDescribedBy","getInvalid","autocomplete","isEmpty","renderError","form","key","button","querySelector","id","getRootNode","getSubmitButton","setTimeout","click","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","property","reflect","prototype","Boolean","attribute","customElement"],"mappings":"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"}

package/lib/Layout.js

@@ -1,2 +1,2 @@
-import{i as e,_ as n,s as t,y as a,b as i,e as o}from"./query-assigned-elements-cf502539.js";import{e as s}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{i as d}from"./query-2d22378e.js";import{o as l}from"./class-map-21152cee.js";import{i as c}from"./style-map-2e8fcab6.js";import{D as h}from"./DirectionController-8b298382.js";import{E as v}from"./EventController-d99ebeef.js";import{L as p}from"./LightDismissController-a2645ae6.js";import{S as u}from"./SlotController-d733c575.js";import{o as g}from"./observe-a9c6dfb6.js";import{c as m}from"./cond-2da54107.js";import{f as y}from"./fsm-50373df9.js";import{c as b}from"./number-c3ab3e95.js";import"./NavToggle.js";import{s as k}from"./Component-449e40fb.js";import{s as f}from"./Sticky-c4cf185e.js";import"./directive-de55b00a.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./ref-c44e9f3c.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"./FocusableMixin-32631bff.js";import"./Button.js";import"./LightDomController-052f446a.js";import"./Spinner.js";import"./if-defined-720964c0.js";import"./InputMixin-7fa755e1.js";import"./Icon.js";import"./VisuallyHidden.js";const w=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);background:var(--_n-layout-background-color);color:var(--n-color-text)}.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)}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{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}: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([data-nav=peek],[data-nav=wait],[data-nav=unpeek],[data-nav=blocked]) .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]:not([data-nav=opened]) .n-layout-nav{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]) .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;-webkit-user-select:none;user-select:none}:host([padding=none]){--_n-layout-padding:var(--n-layout-padding, 0)}.n-nav-toggle-container{position:absolute;padding:var(--n-space-m) var(--n-space-l);min-block-size:calc(var(--n-space-xxl) - var(--n-space-s)/ 2);display:flex;align-items:center}[data-screen=wide][data-nav=opened] .n-nav-toggle-container{display:none}:is([data-screen=wide]:not([data-nav=opened]),[data-screen=narrow]) .n-has-own-nav-toggle slot[name=header]::slotted(nord-header){--_n-header-gutter:calc(var(--n-space-l) * 3)}`,z=matchMedia("(min-width: 768px)"),x=function(e,n,t=JSON.stringify,a=JSON.parse){return{get value(){try{const t=localStorage.getItem(e);return t?a(t):n}catch(e){return n}},set value(n){try{localStorage.setItem(e,t(n))}catch(e){}}}}("nord-layout.navWidth",250),S=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 T=class extends t{constructor(){super(...arguments),this.resizeObserver=new ResizeObserver((e=>{this.stickySize=Math.round(e[0].borderBoxSize[0].blockSize)})),this.navSlot=new u(this,"nav"),this.drawerSlot=new u(this,"drawer"),this.direction=new h(this),this.events=new v(this),this.lightDismiss=new p(this,{isOpen:()=>"opened"===this.navState&&!this.wideScreen,onDismiss:()=>this.navTransition("close"),isDismissible:e=>e!==this.navEl}),this.navWidth=x.value,this.isDragging=!1,this.navState=z.matches?"opened":"closed",this.wideScreen=z.matches,this.stickySize=0,this.navOpen="opened"===this.navState,this.padding="m",this.sticky=!1,this.handleMediaQueryChange=()=>{this.wideScreen=z.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")}}connectedCallback(){super.connectedCallback(),this.events.listen(z,"change",this.handleMediaQueryChange),this.events.listen(this,"click",(e=>{this.isNavToggle(e.target)&&this.handleToggleClick()})),this.events.listen(this,"mouseover",(e=>{this.isNavToggle(e.target)&&this.handleMouseEnter()})),this.events.listen(this,"mouseout",(e=>{this.isNavToggle(e.target)&&this.handleMouseLeave()}))}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.disconnect()}render(){const{navWidth:e,navState:n,navSlot:t,isDragging:o,direction:s}=this,r="opened"===n&&this.wideScreen?e:250,d=t.hasContent&&!this.navToggle;return a`<div class="${l({"n-layout":!0,"n-rtl":s.isRTL,"n-dragging":o})}" style="${c({"--_n-layout-nav-width":`${r}px`,"--_n-sticky-size":"number"==typeof this.stickySize?`${this.stickySize}px`:null})}" data-nav="${t.hasContent?n:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}"><div class="n-layout-nav" ?hidden="${t.isEmpty}" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" @pointerdown="${m("opened"===n,this.startDragging)}" @pointermove="${m(o,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}"></div></div><div class="${l({"n-layout-main":!0,"n-has-own-nav-toggle":d})}" @focusin="${this.handleMainFocus}" @click="${this.handleClick}"><div class="${l({"n-has-drawer":this.drawerSlot.hasContent})}"><div class="n-layout-header n-sticky">${d?this.renderNavToggle():i}<slot name="header"></slot></div><main><slot></slot></main></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}renderNavToggle(){return a`<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>`}handleStickyChange(e){!0===this.sticky?this.resizeObserver.observe(this.stickyElement,{box:"border-box"}):!0===e&&!1===this.sticky&&(this.resizeObserver.unobserve(this.stickyElement),this.stickySize=null)}handleNavWidthChange(){x.value=this.navWidth}handleNavStateChange(e){switch("wait"===e&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===e&&this.navEl.removeEventListener("transitionend",this.handleTransitionEnd),this.navState){case"closed":this.navOpen=!1;break;case"opened":this.navOpen=!0;break;case"wait":this.peekTimeoutId=setTimeout((()=>this.navTransition("timeout")),300);break;case"unpeek":this.navEl.addEventListener("transitionend",this.handleTransitionEnd,{once:!0})}}handleOpenChange(){this.isDragging||this.setNavWidth(Math.max(this.navWidth,250)),this.navTransition(this.navOpen?"open":"close")}navTransition(e){this.navState=S.transition(this.navState,e)}handleClick(){this.navTransition("click")}handleDropdownOpen(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownClose")}isNavToggle(e){return Boolean(this.navToggle)&&(null!=(n=e)&&n.nodeType===Node.ELEMENT_NODE)&&e.id===this.navToggle;var n}handleKeyboardResize(e){const{navWidth:n,direction:{isLTR:t}}=this;switch(e.key){case"ArrowLeft":this.setNavWidth(n+(t?-30:30));break;case"ArrowRight":this.setNavWidth(n+(t?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}e.preventDefault()}setNavWidth(e){this.navWidth=b(Math.round(e),220,400)}startDragging(e){if(0===e.button){e.target.setPointerCapture(e.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1}handleDrag(e){const n=this.direction.isRTL?this.clientWidth-e.clientX:e.clientX;this.setNavWidth(n),this.navTransition(n>=100?"open":"close")}};T.styles=[k,f,w],n([d(".n-sticky",!0)],T.prototype,"stickyElement",void 0),n([d(".n-layout-nav",!0)],T.prototype,"navEl",void 0),n([r()],T.prototype,"navWidth",void 0),n([r()],T.prototype,"isDragging",void 0),n([r()],T.prototype,"navState",void 0),n([r()],T.prototype,"wideScreen",void 0),n([r()],T.prototype,"stickySize",void 0),n([s({reflect:!0,type:Boolean,attribute:"nav-open"})],T.prototype,"navOpen",void 0),n([s({attribute:"nav-toggle"})],T.prototype,"navToggle",void 0),n([s({reflect:!0})],T.prototype,"padding",void 0),n([s({type:Boolean,reflect:!0})],T.prototype,"sticky",void 0),n([g("sticky","updated")],T.prototype,"handleStickyChange",null),n([g("navWidth","updated")],T.prototype,"handleNavWidthChange",null),n([g("navState")],T.prototype,"handleNavStateChange",null),n([g("navOpen","updated")],T.prototype,"handleOpenChange",null),T=n([o("nord-layout")],T);var j=T;export{j as default};
+import{i as e,_ as n,s as t,y as a,b as i,e as o}from"./query-assigned-elements-cf502539.js";import{e as s}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{i as d}from"./query-2d22378e.js";import{o as l}from"./class-map-21152cee.js";import{i as c}from"./style-map-2e8fcab6.js";import{D as h}from"./DirectionController-8b298382.js";import{E as v}from"./EventController-d99ebeef.js";import{L as p}from"./LightDismissController-a2645ae6.js";import{S as u}from"./SlotController-d733c575.js";import{o as g}from"./observe-a9c6dfb6.js";import{c as m}from"./cond-2da54107.js";import{f as y}from"./fsm-50373df9.js";import{c as k}from"./number-c3ab3e95.js";import"./NavToggle.js";import{s as b}from"./Component-449e40fb.js";import{s as f}from"./Sticky-c4cf185e.js";import"./directive-de55b00a.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./ref-c44e9f3c.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"./FocusableMixin-32631bff.js";import"./Button.js";import"./LightDomController-052f446a.js";import"./Spinner.js";import"./if-defined-720964c0.js";import"./InputMixin-7fa755e1.js";import"./Icon.js";import"./IconManager.js";import"./VisuallyHidden.js";const w=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);background:var(--_n-layout-background-color);color:var(--n-color-text)}.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)}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{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}: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([data-nav=peek],[data-nav=wait],[data-nav=unpeek],[data-nav=blocked]) .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]:not([data-nav=opened]) .n-layout-nav{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;-webkit-user-select:none;user-select:none}:host([padding=none]){--_n-layout-padding:var(--n-layout-padding, 0)}.n-nav-toggle-container{position:absolute;padding:var(--n-space-m) var(--n-space-l);min-block-size:calc(var(--n-space-xxl) - var(--n-space-s)/ 2);display:flex;align-items:center}[data-screen=wide][data-nav=opened] .n-nav-toggle-container{display:none}:is([data-screen=wide]:not([data-nav=opened]),[data-screen=narrow]) .n-has-own-nav-toggle slot[name=header]::slotted(nord-header){--_n-header-gutter:calc(var(--n-space-l) * 3)}`,z=matchMedia("(min-width: 768px)"),S=function(e,n,t=JSON.stringify,a=JSON.parse){return{get value(){try{const t=localStorage.getItem(e);return t?a(t):n}catch(e){return n}},set value(n){try{localStorage.setItem(e,t(n))}catch(e){}}}}("nord-layout.navWidth",250),x=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 T=class extends t{constructor(){super(...arguments),this.resizeObserver=new ResizeObserver((e=>{this.stickySize=Math.round(e[0].borderBoxSize[0].blockSize)})),this.navSlot=new u(this,"nav"),this.drawerSlot=new u(this,"drawer"),this.direction=new h(this),this.events=new v(this),this.lightDismiss=new p(this,{isOpen:()=>"opened"===this.navState&&!this.wideScreen,onDismiss:()=>this.navTransition("close"),isDismissible:e=>e!==this.navEl}),this.navWidth=S.value,this.isDragging=!1,this.navState=z.matches?"opened":"closed",this.wideScreen=z.matches,this.stickySize=0,this.navOpen="opened"===this.navState,this.padding="m",this.sticky=!1,this.handleMediaQueryChange=()=>{this.wideScreen=z.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(z,"change",this.handleMediaQueryChange),this.events.listen(this,"click",(e=>{this.isNavToggle(e.target)&&this.handleToggleClick()})),this.events.listen(this,"mouseover",(e=>{this.isNavToggle(e.target)&&this.handleMouseEnter()})),this.events.listen(this,"mouseout",(e=>{this.isNavToggle(e.target)&&this.handleMouseLeave()}))}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.disconnect()}render(){const{navWidth:e,navState:n,navSlot:t,isDragging:o,direction:s}=this,r="opened"===n&&this.wideScreen?e:250,d=t.hasContent&&!this.navToggle;return a`<div class="${l({"n-layout":!0,"n-rtl":s.isRTL,"n-dragging":o})}" style="${c({"--_n-layout-nav-width":`${r}px`,"--_n-sticky-size":"number"==typeof this.stickySize?`${this.stickySize}px`:null})}" data-nav="${t.hasContent?n:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}"><div class="n-layout-nav" ?hidden="${t.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="${m("opened"===n,this.startDragging)}" @pointermove="${m(o,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}"></div></div><div class="${l({"n-layout-main":!0,"n-has-own-nav-toggle":d})}" @focusin="${this.handleMainFocus}" @click="${this.handleMainClick}"><div class="${l({"n-has-drawer":this.drawerSlot.hasContent})}"><div class="n-layout-header n-sticky">${d?this.renderNavToggle():i}<slot name="header"></slot></div><main><slot></slot></main></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}renderNavToggle(){return a`<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>`}handleStickyChange(e){!0===this.sticky?this.resizeObserver.observe(this.stickyElement,{box:"border-box"}):!0===e&&!1===this.sticky&&(this.resizeObserver.unobserve(this.stickyElement),this.stickySize=null)}handleNavWidthChange(){S.value=this.navWidth}handleNavStateChange(e){switch("wait"===e&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===e&&this.navEl.removeEventListener("transitionend",this.handleTransitionEnd),this.navState){case"closed":this.navOpen=!1;break;case"opened":this.navOpen=!0;break;case"wait":this.peekTimeoutId=setTimeout((()=>this.navTransition("timeout")),300);break;case"unpeek":this.navEl.addEventListener("transitionend",this.handleTransitionEnd,{once:!0})}}handleOpenChange(){this.isDragging||this.setNavWidth(Math.max(this.navWidth,250)),this.navTransition(this.navOpen?"open":"close")}navTransition(e){this.navState=x.transition(this.navState,e)}handleNavClick(e){if(!e.defaultPrevented&&!this.wideScreen){const t=e.target;(e=>"nord-nav-item"===e.localName)(n=t)&&!n.hasSubNav&&this.navTransition("close")}var n}handleMainClick(){this.navTransition("click")}handleDropdownOpen(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownClose")}isNavToggle(e){return Boolean(this.navToggle)&&(null!=(n=e)&&n.nodeType===Node.ELEMENT_NODE)&&e.id===this.navToggle;var n}handleKeyboardResize(e){const{navWidth:n,direction:{isLTR:t}}=this;switch(e.key){case"ArrowLeft":this.setNavWidth(n+(t?-30:30));break;case"ArrowRight":this.setNavWidth(n+(t?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}e.preventDefault()}setNavWidth(e){this.navWidth=k(Math.round(e),220,400)}startDragging(e){if(0===e.button){e.target.setPointerCapture(e.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1}handleDrag(e){const n=this.direction.isRTL?this.clientWidth-e.clientX:e.clientX;this.setNavWidth(n),this.navTransition(n>=100?"open":"close")}};T.styles=[b,f,w],n([d(".n-sticky",!0)],T.prototype,"stickyElement",void 0),n([d(".n-layout-nav",!0)],T.prototype,"navEl",void 0),n([r()],T.prototype,"navWidth",void 0),n([r()],T.prototype,"isDragging",void 0),n([r()],T.prototype,"navState",void 0),n([r()],T.prototype,"wideScreen",void 0),n([r()],T.prototype,"stickySize",void 0),n([s({reflect:!0,type:Boolean,attribute:"nav-open"})],T.prototype,"navOpen",void 0),n([s({attribute:"nav-toggle"})],T.prototype,"navToggle",void 0),n([s({reflect:!0})],T.prototype,"padding",void 0),n([s({type:Boolean,reflect:!0})],T.prototype,"sticky",void 0),n([g("sticky","updated")],T.prototype,"handleStickyChange",null),n([g("navWidth","updated")],T.prototype,"handleNavWidthChange",null),n([g("navState")],T.prototype,"handleNavStateChange",null),n([g("navOpen","updated")],T.prototype,"handleOpenChange",null),T=n([o("nord-layout")],T);var j=T;export{j as default};
 //# sourceMappingURL=Layout.js.map

package/lib/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","sources":["../src/layout/Layout.ts","../src/common/storage.ts"],"sourcesContent":["/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { LitElement, html, 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 { 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 { Events, fsm, States } from \"../common/fsm.js\"\nimport { clamp } from \"../common/number.js\"\nimport { storage } from \"../common/storage.js\"\n\nimport \"../nav-toggle/NavToggle.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport stickyStyle from \"../common/styles/Sticky.css\"\nimport style from \"./Layout.css\"\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 = matchMedia(\"(min-width: 768px)\")\nconst store = storage(\"nord-layout.navWidth\", NAV_DEFAULT_WIDTH)\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\nfunction isElement(el: any): el is Element {\n  return el != null && el.nodeType === Node.ELEMENT_NODE\n}\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 header - Used to place content inside the header section.\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  private resizeObserver = new ResizeObserver(entries => {\n    this.stickySize = Math.round(entries[0].borderBoxSize[0].blockSize)\n  })\n\n  private navSlot = new SlotController(this, \"nav\")\n  private drawerSlot = new SlotController(this, \"drawer\")\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  @query(\".n-sticky\", true) private stickyElement!: HTMLDivElement\n  @query(\".n-layout-nav\", true) private navEl!: HTMLDivElement\n\n  @state() private navWidth = store.value\n  @state() private isDragging = false\n  @state() private navState: NavState = mediaQuery.matches ? \"opened\" : \"closed\"\n  @state() private wideScreen = mediaQuery.matches\n  @state() private stickySize: number | null = 0\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 = this.navState === \"opened\"\n\n  /**\n   * ID reference of element used to toggle the navigation.\n   * This is deprecated, the layout component will now render its own nav toggle to simplify usage.\n   * @deprecated\n   */\n  @property({ attribute: \"nav-toggle\" }) navToggle?: string\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  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n\n    this.events.listen(this, \"click\", e => {\n      if (this.isNavToggle(e.target)) {\n        this.handleToggleClick()\n      }\n    })\n    this.events.listen(this, \"mouseover\", e => {\n      if (this.isNavToggle(e.target)) {\n        this.handleMouseEnter()\n      }\n    })\n    this.events.listen(this, \"mouseout\", e => {\n      if (this.isNavToggle(e.target)) {\n        this.handleMouseLeave()\n      }\n    })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.resizeObserver.disconnect()\n  }\n\n  render() {\n    const { navWidth, navState, navSlot, isDragging, direction } = this\n    const adjustedNavWidth = navState === \"opened\" && this.wideScreen ? navWidth : NAV_DEFAULT_WIDTH\n    const shouldRenderOwnNavToggle = navSlot.hasContent && !this.navToggle\n\n    return html`\n      <div\n        class=${classMap({\n          \"n-layout\": true,\n          \"n-rtl\": direction.isRTL,\n          \"n-dragging\": isDragging,\n        })}\n        style=${styleMap({\n          \"--_n-layout-nav-width\": `${adjustedNavWidth}px`,\n          \"--_n-sticky-size\": typeof this.stickySize === \"number\" ? `${this.stickySize}px` : null,\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\"></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          ></div>\n        </div>\n\n        <div\n          class=${classMap({ \"n-layout-main\": true, \"n-has-own-nav-toggle\": shouldRenderOwnNavToggle })}\n          @focusin=${this.handleMainFocus}\n          @click=${this.handleClick}\n        >\n          <div class=${classMap({ \"n-has-drawer\": this.drawerSlot.hasContent })}>\n            <div class=\"n-layout-header n-sticky\">\n              ${shouldRenderOwnNavToggle ? this.renderNavToggle() : nothing}\n              <slot name=\"header\"></slot>\n            </div>\n            <main>\n              <slot></slot>\n            </main>\n          </div>\n          <aside ?hidden=${this.drawerSlot.isEmpty}>\n            <slot name=\"drawer\"></slot>\n          </aside>\n        </div>\n      </div>\n    `\n  }\n\n  private renderNavToggle() {\n    /* eslint-disable lit-a11y/mouse-events-have-key-events */\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    /* eslint-enable lit-a11y/mouse-events-have-key-events */\n  }\n\n  @observe(\"sticky\", \"updated\")\n  protected handleStickyChange(prev: boolean) {\n    if (this.sticky === true) {\n      this.resizeObserver.observe(this.stickyElement, { box: \"border-box\" })\n    } else if (prev === true && this.sticky === false) {\n      this.resizeObserver.unobserve(this.stickyElement)\n      this.stickySize = null\n    }\n  }\n\n  @observe(\"navWidth\", \"updated\")\n  protected handleNavWidthChange() {\n    store.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() {\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, NAV_DEFAULT_WIDTH))\n    }\n\n    this.navTransition(this.navOpen ? \"open\" : \"close\")\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 handleClick() {\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  private isNavToggle(node: EventTarget | null) {\n    return Boolean(this.navToggle) && isElement(node) && node.id === this.navToggle\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(NAV_MIN_WIDTH)\n        break\n      case \"End\":\n        this.setNavWidth(NAV_MAX_WIDTH)\n        break\n      default:\n        return\n    }\n\n    e.preventDefault()\n  }\n\n  private setNavWidth(width: number) {\n    this.navWidth = clamp(Math.round(width), NAV_MIN_WIDTH, NAV_MAX_WIDTH)\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  }\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","/**\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      } catch {\n        return defaultValue\n      }\n    },\n\n    set value(value: T) {\n      try {\n        localStorage.setItem(key, serialize(value))\n      } catch {\n        //  nothing we can do here\n      }\n    },\n  }\n}\n"],"names":["mediaQuery","matchMedia","store","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","_a","setItem","storage","navMachine","fsm","opened","toggle","close","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","constructor","this","resizeObserver","ResizeObserver","entries","stickySize","Math","round","borderBoxSize","blockSize","navSlot","SlotController","drawerSlot","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","wideScreen","onDismiss","navTransition","isDismissible","node","navEl","navWidth","isDragging","matches","navOpen","padding","sticky","handleMediaQueryChange","handleToggleClick","handleNavFocus","handleMainFocus","handleMouseEnter","handleMouseLeave","handleTransitionEnd","connectedCallback","super","listen","e","isNavToggle","target","disconnectedCallback","disconnect","render","adjustedNavWidth","shouldRenderOwnNavToggle","hasContent","navToggle","html","classMap","isRTL","styleMap","isEmpty","handleDropdownOpen","handleDropdownClose","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","handleClick","renderNavToggle","nothing","handleStickyChange","prev","observe","stickyElement","box","unobserve","handleNavWidthChange","handleNavStateChange","peekTimeoutId","clearTimeout","removeEventListener","setTimeout","addEventListener","once","handleOpenChange","setNavWidth","max","event","transition","localName","Boolean","el","nodeType","Node","ELEMENT_NODE","id","isLTR","preventDefault","width","clamp","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","stickyStyle","style","__decorate","query","prototype","state","property","reflect","type","attribute","customElement"],"mappings":"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"}
+{"version":3,"file":"Layout.js","sources":["../src/layout/Layout.ts","../src/common/storage.ts"],"sourcesContent":["/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { LitElement, html, 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 { 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 { Events, fsm, States } from \"../common/fsm.js\"\nimport { clamp } from \"../common/number.js\"\nimport { storage } from \"../common/storage.js\"\nimport type NavItem from \"../nav-item/NavItem.js\"\n\nimport \"../nav-toggle/NavToggle.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport stickyStyle from \"../common/styles/Sticky.css\"\nimport style from \"./Layout.css\"\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 = matchMedia(\"(min-width: 768px)\")\nconst store = storage(\"nord-layout.navWidth\", NAV_DEFAULT_WIDTH)\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 isElement = (el: any): el is Element => el != null && el.nodeType === Node.ELEMENT_NODE\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 header - Used to place content inside the header section.\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  private resizeObserver = new ResizeObserver(entries => {\n    this.stickySize = Math.round(entries[0].borderBoxSize[0].blockSize)\n  })\n\n  private navSlot = new SlotController(this, \"nav\")\n  private drawerSlot = new SlotController(this, \"drawer\")\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  @query(\".n-sticky\", true) private stickyElement!: HTMLDivElement\n  @query(\".n-layout-nav\", true) private navEl!: HTMLDivElement\n\n  @state() private navWidth = store.value\n  @state() private isDragging = false\n  @state() private navState: NavState = mediaQuery.matches ? \"opened\" : \"closed\"\n  @state() private wideScreen = mediaQuery.matches\n  @state() private stickySize: number | null = 0\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 = this.navState === \"opened\"\n\n  /**\n   * ID reference of element used to toggle the navigation.\n   * This is deprecated, the layout component will now render its own nav toggle to simplify usage.\n   * @deprecated\n   */\n  @property({ attribute: \"nav-toggle\" }) navToggle?: string\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   * 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\n    this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n\n    this.events.listen(this, \"click\", e => {\n      if (this.isNavToggle(e.target)) {\n        this.handleToggleClick()\n      }\n    })\n    this.events.listen(this, \"mouseover\", e => {\n      if (this.isNavToggle(e.target)) {\n        this.handleMouseEnter()\n      }\n    })\n    this.events.listen(this, \"mouseout\", e => {\n      if (this.isNavToggle(e.target)) {\n        this.handleMouseLeave()\n      }\n    })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.resizeObserver.disconnect()\n  }\n\n  render() {\n    const { navWidth, navState, navSlot, isDragging, direction } = this\n    const adjustedNavWidth = navState === \"opened\" && this.wideScreen ? navWidth : NAV_DEFAULT_WIDTH\n    const shouldRenderOwnNavToggle = navSlot.hasContent && !this.navToggle\n\n    return html`\n      <div\n        class=${classMap({\n          \"n-layout\": true,\n          \"n-rtl\": direction.isRTL,\n          \"n-dragging\": isDragging,\n        })}\n        style=${styleMap({\n          \"--_n-layout-nav-width\": `${adjustedNavWidth}px`,\n          \"--_n-sticky-size\": typeof this.stickySize === \"number\" ? `${this.stickySize}px` : null,\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          ></div>\n        </div>\n\n        <div\n          class=${classMap({ \"n-layout-main\": true, \"n-has-own-nav-toggle\": shouldRenderOwnNavToggle })}\n          @focusin=${this.handleMainFocus}\n          @click=${this.handleMainClick}\n        >\n          <div class=${classMap({ \"n-has-drawer\": this.drawerSlot.hasContent })}>\n            <div class=\"n-layout-header n-sticky\">\n              ${shouldRenderOwnNavToggle ? this.renderNavToggle() : nothing}\n              <slot name=\"header\"></slot>\n            </div>\n            <main>\n              <slot></slot>\n            </main>\n          </div>\n          <aside ?hidden=${this.drawerSlot.isEmpty}>\n            <slot name=\"drawer\"></slot>\n          </aside>\n        </div>\n      </div>\n    `\n  }\n\n  private renderNavToggle() {\n    /* eslint-disable lit-a11y/mouse-events-have-key-events */\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    /* eslint-enable lit-a11y/mouse-events-have-key-events */\n  }\n\n  @observe(\"sticky\", \"updated\")\n  protected handleStickyChange(prev: boolean) {\n    if (this.sticky === true) {\n      this.resizeObserver.observe(this.stickyElement, { box: \"border-box\" })\n    } else if (prev === true && this.sticky === false) {\n      this.resizeObserver.unobserve(this.stickyElement)\n      this.stickySize = null\n    }\n  }\n\n  @observe(\"navWidth\", \"updated\")\n  protected handleNavWidthChange() {\n    store.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() {\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, NAV_DEFAULT_WIDTH))\n    }\n\n    this.navTransition(this.navOpen ? \"open\" : \"close\")\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  private isNavToggle(node: EventTarget | null) {\n    return Boolean(this.navToggle) && isElement(node) && node.id === this.navToggle\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(NAV_MIN_WIDTH)\n        break\n      case \"End\":\n        this.setNavWidth(NAV_MAX_WIDTH)\n        break\n      default:\n        return\n    }\n\n    e.preventDefault()\n  }\n\n  private setNavWidth(width: number) {\n    this.navWidth = clamp(Math.round(width), NAV_MIN_WIDTH, NAV_MAX_WIDTH)\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  }\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","/**\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      } catch {\n        return defaultValue\n      }\n    },\n\n    set value(value: T) {\n      try {\n        localStorage.setItem(key, serialize(value))\n      } catch {\n        //  nothing we can do here\n      }\n    },\n  }\n}\n"],"names":["mediaQuery","matchMedia","store","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","_a","setItem","storage","navMachine","fsm","opened","toggle","close","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","constructor","this","resizeObserver","ResizeObserver","entries","stickySize","Math","round","borderBoxSize","blockSize","navSlot","SlotController","drawerSlot","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","wideScreen","onDismiss","navTransition","isDismissible","node","navEl","navWidth","isDragging","matches","navOpen","padding","sticky","handleMediaQueryChange","handleToggleClick","handleNavFocus","handleMainFocus","handleMouseEnter","handleMouseLeave","handleTransitionEnd","isNarrow","connectedCallback","super","listen","e","isNavToggle","target","disconnectedCallback","disconnect","render","adjustedNavWidth","shouldRenderOwnNavToggle","hasContent","navToggle","html","classMap","isRTL","styleMap","isEmpty","handleDropdownOpen","handleDropdownClose","handleNavClick","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","handleMainClick","renderNavToggle","nothing","handleStickyChange","prev","observe","stickyElement","box","unobserve","handleNavWidthChange","handleNavStateChange","peekTimeoutId","clearTimeout","removeEventListener","setTimeout","addEventListener","once","handleOpenChange","setNavWidth","max","event","transition","defaultPrevented","el","localName","isNavItem","hasSubNav","Boolean","nodeType","Node","ELEMENT_NODE","id","isLTR","preventDefault","width","clamp","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","stickyStyle","style","__decorate","query","prototype","state","property","reflect","type","attribute","customElement"],"mappings":"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"}

package/lib/LocalizeController.js

@@ -1,2 +1,2 @@
-import{resolveTranslation as t,subscribe as n}from"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";const o=()=>{};class s{constructor(n,s={onLangChange:o}){this.host=n,this.options=s,this.handleLangChange=()=>{const n=t(this.lang);this.resolvedTranslation!==n&&(this.resolvedTranslation=n,this.options.onLangChange(),this.host.requestUpdate())},n.addController(this),this.resolvedTranslation=t(this.lang)}get lang(){return this.host.lang||document.documentElement.lang}get resolvedLang(){return this.resolvedTranslation.$lang}hostConnected(){this.unsubscribe=n(this.handleLangChange),this.options.onLangChange()}hostDisconnected(){var t;null===(t=this.unsubscribe)||void 0===t||t.call(this)}term(t,...n){const o=this.host.localName,s=this.resolvedTranslation[o][t];return"function"==typeof s?s(...n):s}}export{s as LocalizeController};
+import{resolveTranslation as n,subscribe as o}from"./translation.js";import t from"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";const s=()=>{};class i{constructor(o,t={onLangChange:s}){this.host=o,this.options=t,this.handleLangChange=()=>{const o=n(this.lang);this.resolvedTranslation!==o&&(this.resolvedTranslation=o,this.options.onLangChange(),this.host.requestUpdate())},o.addController(this),this.resolvedTranslation=n(this.lang)}get lang(){return this.host.lang||document.documentElement.lang}get resolvedLang(){return this.resolvedTranslation.$lang}hostConnected(){this.unsubscribe=o(this.handleLangChange),this.options.onLangChange()}hostDisconnected(){var n;null===(n=this.unsubscribe)||void 0===n||n.call(this)}term(n,...o){var s,i;const{resolvedTranslation:a,resolvedLang:l}=this,e=this.host.localName;null==a[e]?console.warn(`NORD: Missing translations for component \`${e}\` in lang: \`${l}\``):null==a[e][n]&&console.warn(`NORD: Missing translation key \`${String(n)}\` for component \`${e}\` in lang \`${l}\``);const r=null!==(i=null===(s=a[e])||void 0===s?void 0:s[n])&&void 0!==i?i:t[e][n];return"function"==typeof r?r(...o):r}}export{i as LocalizeController};
 //# sourceMappingURL=LocalizeController.js.map

package/lib/LocalizeController.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocalizeController.js","sources":["../src/localization/LocalizeController.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { subscribe, resolveTranslation, Translation, WellKnownKeys } from \"./translation.js\"\n\n// helper types...\n\n// used to match any function\ntype Func = (...args: any[]) => any\n\n// if object property is function, use return type, else value type\ntype Result<Type, Key extends keyof Type> = Type[Key] extends Func ? ReturnType<Type[Key]> : Type[Key]\n\n// if object property is function,\ntype FuncParams<Type, K extends keyof Type> = Type[K] extends Func ? Parameters<Type[K]> : never\n\nconst noop = () => {\n  // this function is intentionally left blank\n}\n\nexport class LocalizeController<TComponentName extends Exclude<keyof Translation, WellKnownKeys>>\n  implements ReactiveController\n{\n  private unsubscribe?: ReturnType<typeof subscribe>\n  private resolvedTranslation: Translation\n\n  constructor(private host: ReactiveControllerHost & HTMLElement, private options = { onLangChange: noop }) {\n    host.addController(this)\n    this.resolvedTranslation = resolveTranslation(this.lang)\n  }\n\n  /**\n   * The lang of the document or element, with element taking precedence\n   */\n  get lang() {\n    return this.host.lang || document.documentElement.lang\n  }\n\n  /**\n   * The lang of the translation being applied.\n   * This may not match the document/element lang, in case of fallback translation\n   */\n  get resolvedLang() {\n    return this.resolvedTranslation.$lang\n  }\n\n  hostConnected() {\n    this.unsubscribe = subscribe(this.handleLangChange)\n    this.options.onLangChange()\n  }\n\n  hostDisconnected() {\n    this.unsubscribe?.()\n  }\n\n  term<Key extends keyof Translation[TComponentName]>(\n    key: Key,\n    ...args: FuncParams<Translation[TComponentName], Key>\n  ): Result<Translation[TComponentName], Key> {\n    const componentName = this.host.localName as TComponentName\n    const translation = this.resolvedTranslation[componentName]\n\n    const t = translation[key]\n    return typeof t === \"function\" ? t(...args) : t\n  }\n\n  private handleLangChange = () => {\n    const resolved = resolveTranslation(this.lang)\n\n    if (this.resolvedTranslation !== resolved) {\n      this.resolvedTranslation = resolved\n\n      this.options.onLangChange()\n      this.host.requestUpdate()\n    }\n  }\n}\n"],"names":["noop","LocalizeController","constructor","host","options","onLangChange","this","handleLangChange","resolved","resolveTranslation","lang","resolvedTranslation","requestUpdate","addController","document","documentElement","resolvedLang","$lang","hostConnected","unsubscribe","subscribe","hostDisconnected","_a","call","term","key","args","componentName","localName","t"],"mappings":"yPAcA,MAAMA,EAAO,aAIAC,EAMXC,YAAoBC,EAAoDC,EAAU,CAAEC,aAAcL,IAA9EM,KAAIH,KAAJA,EAAoDG,KAAOF,QAAPA,EAwChEE,KAAgBC,iBAAG,KACzB,MAAMC,EAAWC,EAAmBH,KAAKI,MAErCJ,KAAKK,sBAAwBH,IAC/BF,KAAKK,oBAAsBH,EAE3BF,KAAKF,QAAQC,eACbC,KAAKH,KAAKS,gBACX,EA/CDT,EAAKU,cAAcP,MACnBA,KAAKK,oBAAsBF,EAAmBH,KAAKI,KACpD,CAKGA,WACF,OAAOJ,KAAKH,KAAKO,MAAQI,SAASC,gBAAgBL,IACnD,CAMGM,mBACF,OAAOV,KAAKK,oBAAoBM,KACjC,CAEDC,gBACEZ,KAAKa,YAAcC,EAAUd,KAAKC,kBAClCD,KAAKF,QAAQC,cACd,CAEDgB,yBACkB,QAAhBC,EAAAhB,KAAKa,mBAAW,IAAAG,GAAAA,EAAAC,KAAAjB,KACjB,CAEDkB,KACEC,KACGC,GAEH,MAAMC,EAAgBrB,KAAKH,KAAKyB,UAG1BC,EAFcvB,KAAKK,oBAAoBgB,GAEvBF,GACtB,MAAoB,mBAANI,EAAmBA,KAAKH,GAAQG,CAC/C"}
+{"version":3,"file":"LocalizeController.js","sources":["../src/localization/LocalizeController.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { subscribe, resolveTranslation, Translation, WellKnownKeys, fallback } from \"./translation.js\"\n\n// helper types...\n\n// used to match any function\ntype Func = (...args: any[]) => any\n\n// if object property is function, use return type, else value type\ntype Result<Type, Key extends keyof Type> = Type[Key] extends Func ? ReturnType<Type[Key]> : Type[Key]\n\n// if object property is function,\ntype FuncParams<Type, K extends keyof Type> = Type[K] extends Func ? Parameters<Type[K]> : never\n\nconst noop = () => {\n  // this function is intentionally left blank\n}\n\nexport class LocalizeController<TComponentName extends Exclude<keyof Translation, WellKnownKeys>>\n  implements ReactiveController\n{\n  private unsubscribe?: ReturnType<typeof subscribe>\n  private resolvedTranslation: Translation\n\n  constructor(private host: ReactiveControllerHost & HTMLElement, private options = { onLangChange: noop }) {\n    host.addController(this)\n    this.resolvedTranslation = resolveTranslation(this.lang)\n  }\n\n  /**\n   * The lang of the document or element, with element taking precedence\n   */\n  get lang() {\n    return this.host.lang || document.documentElement.lang\n  }\n\n  /**\n   * The lang of the translation being applied.\n   * This may not match the document/element lang, in case of fallback translation\n   */\n  get resolvedLang() {\n    return this.resolvedTranslation.$lang\n  }\n\n  hostConnected() {\n    this.unsubscribe = subscribe(this.handleLangChange)\n    this.options.onLangChange()\n  }\n\n  hostDisconnected() {\n    this.unsubscribe?.()\n  }\n\n  term<Key extends keyof Translation[TComponentName]>(\n    key: Key,\n    ...args: FuncParams<Translation[TComponentName], Key>\n  ): Result<Translation[TComponentName], Key> {\n    const { resolvedTranslation, resolvedLang } = this\n    const component = this.host.localName as TComponentName\n\n    /* eslint-disable no-console */\n    if (resolvedTranslation[component] == null) {\n      console.warn(`NORD: Missing translations for component \\`${component}\\` in lang: \\`${resolvedLang}\\``)\n    } else if (resolvedTranslation[component][key] == null) {\n      console.warn(\n        `NORD: Missing translation key \\`${String(key)}\\` for component \\`${component}\\` in lang \\`${resolvedLang}\\``\n      )\n    }\n    /* eslint-enable no-console */\n\n    const t = resolvedTranslation[component]?.[key] ?? fallback[component][key]\n    return typeof t === \"function\" ? t(...args) : t\n  }\n\n  private handleLangChange = () => {\n    const resolved = resolveTranslation(this.lang)\n\n    if (this.resolvedTranslation !== resolved) {\n      this.resolvedTranslation = resolved\n\n      this.options.onLangChange()\n      this.host.requestUpdate()\n    }\n  }\n}\n"],"names":["noop","LocalizeController","constructor","host","options","onLangChange","this","handleLangChange","resolved","resolveTranslation","lang","resolvedTranslation","requestUpdate","addController","document","documentElement","resolvedLang","$lang","hostConnected","unsubscribe","subscribe","hostDisconnected","_a","call","term","key","args","component","localName","console","warn","String","t","_b","fallback"],"mappings":"gQAcA,MAAMA,EAAO,aAIAC,EAMXC,YAAoBC,EAAoDC,EAAU,CAAEC,aAAcL,IAA9EM,KAAIH,KAAJA,EAAoDG,KAAOF,QAAPA,EAkDhEE,KAAgBC,iBAAG,KACzB,MAAMC,EAAWC,EAAmBH,KAAKI,MAErCJ,KAAKK,sBAAwBH,IAC/BF,KAAKK,oBAAsBH,EAE3BF,KAAKF,QAAQC,eACbC,KAAKH,KAAKS,gBACX,EAzDDT,EAAKU,cAAcP,MACnBA,KAAKK,oBAAsBF,EAAmBH,KAAKI,KACpD,CAKGA,WACF,OAAOJ,KAAKH,KAAKO,MAAQI,SAASC,gBAAgBL,IACnD,CAMGM,mBACF,OAAOV,KAAKK,oBAAoBM,KACjC,CAEDC,gBACEZ,KAAKa,YAAcC,EAAUd,KAAKC,kBAClCD,KAAKF,QAAQC,cACd,CAEDgB,yBACkB,QAAhBC,EAAAhB,KAAKa,mBAAW,IAAAG,GAAAA,EAAAC,KAAAjB,KACjB,CAEDkB,KACEC,KACGC,WAEH,MAAMf,oBAAEA,EAAmBK,aAAEA,GAAiBV,KACxCqB,EAAYrB,KAAKH,KAAKyB,UAGU,MAAlCjB,EAAoBgB,GACtBE,QAAQC,KAAK,8CAA8CH,kBAA0BX,OACrC,MAAvCL,EAAoBgB,GAAWF,IACxCI,QAAQC,KACN,mCAAmCC,OAAON,wBAA0BE,iBAAyBX,OAKjG,MAAMgB,EAAyC,QAArCC,EAA8B,UAA9BtB,EAAoBgB,UAAU,IAAAL,OAAA,EAAAA,EAAGG,UAAI,IAAAQ,EAAAA,EAAIC,EAASP,GAAWF,GACvE,MAAoB,mBAANO,EAAmBA,KAAKN,GAAQM,CAC/C"}

package/lib/Modal.js

@@ -1,2 +1,2 @@
-import{i as o,s as e,_ as a,y as n,e as i}from"./query-assigned-elements-cf502539.js";import{e as t}from"./property-03f59dce.js";import{i as s}from"./query-2d22378e.js";import{c as l}from"./interface-close-small-44ababc3.js";import r from"./Icon.js";import{S as d}from"./SlotController-d733c575.js";import{o as c}from"./observe-a9c6dfb6.js";import{N as p}from"./events-731d0007.js";import{s as m}from"./Component-449e40fb.js";import{LocalizeController as v}from"./LocalizeController.js";import{ModalController as h}from"./ModalController.js";import"./state-70f38ceb.js";import"./if-defined-720964c0.js";import"./directive-de55b00a.js";import"./cond-2da54107.js";import"./EventController-d99ebeef.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"./LightDismissController-a2645ae6.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./ScrollbarController-773c79f4.js";const b=o`:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-padding-block:var(--n-modal-padding-block, var(--n-space-m));--_n-modal-focus-ring:0 0 0 2px var(--n-color-accent);--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 620px);color:var(--n-color-text);position:fixed;inset:0;visibility:hidden;transition:visibility var(--n-transition-slowly);z-index:var(--n-index-overlay)}:host([open]){transition-property:none;visibility:visible}.n-modal-backdrop{position:fixed;inset:0;background:var(--n-color-overlay);transition:opacity var(--n-transition-slowly);padding:var(--n-space-l);padding-block-start:clamp(var(--n-space-l),min(10vh,10vw) - 1em,calc(var(--n-space-xxl) + var(--n-space-s)));overflow-y:auto}:host(:not([open])) .n-modal-backdrop{opacity:0}.n-modal{position:relative;display:flex;flex-direction:column;inline-size:100%;max-inline-size:var(--_n-modal-max-inline-size);margin:auto;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-modal);border-radius:var(--n-border-radius);transition:opacity var(--n-transition-slowly),transform var(--n-transition-slowly)}.n-rounded-top{border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}:host(:not([open])) .n-modal{transform:translateY(-10px) scale(.97);opacity:0}.n-modal:focus{outline:0}.n-modal-body{flex:1}.n-body-padded{display:block;padding:var(--n-space-l) var(--_n-modal-padding-inline) var(--n-space-xl)}.n-modal-header{display:flex;gap:var(--n-space-m);align-items:start;background:var(--n-color-nav-surface);border-block-end:1px solid var(--n-color-border)}.n-modal-footer{border-block-start:1px solid var(--n-color-border)}.n-padded{padding:var(--_n-modal-padding-block) var(--_n-modal-padding-inline)}.n-close{border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);background-color:transparent;border-radius:var(--n-border-radius);inset-block-start:var(--n-space-s);inset-inline-end:var(--n-space-s);color:var(--n-color-text);cursor:pointer;transition:color var(--n-transition-quickly);position:relative}.n-close::after{content:"";position:absolute;display:block;inset:calc(var(--n-space-s) * -1);border-radius:var(--n-border-radius)}.n-close:not(:hover){color:var(--n-color-icon)}.n-close:active{transform:translateY(1px)}.n-close:focus{outline:0;box-shadow:var(--_n-modal-focus-ring)}@supports selector(:focus-visible){.n-close:focus{box-shadow:none}.n-close:focus-visible{box-shadow:var(--_n-modal-focus-ring)}}:host([scrollable]) .n-modal{max-block-size:100%}:host([scrollable]) .n-modal-body{overflow-y:auto}@media (min-width:489px){:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l))}:host([size="s"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 440px)}:host([size="l"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 1320px)}}slot[name]{display:flex}slot[name=header]{flex:1}slot[name=header]::slotted(*){margin:0!important;padding:0!important;font-size:var(--n-font-size-l)!important;font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading)!important}slot[name=footer]{gap:calc(var(--n-space-s)/ 2);flex-direction:column}@media (min-width:489px){slot[name=footer]{gap:var(--n-space-s);flex-direction:row;justify-content:flex-end;align-items:center}}slot[name=feature]{overflow:hidden}slot[name=feature]::slotted(*){inline-size:100%;block-size:auto}`;r.registerIcon(l);let f=class extends e{constructor(){super(...arguments),this.headerSlot=new d(this,"header"),this.featureSlot=new d(this,"feature"),this.footerSlot=new d(this,"footer"),this.localize=new v(this),this.modalController=new h(this,{isOpen:()=>this.open,onDismiss:()=>this.handleDismiss(),dialog:()=>this.modal,backdrop:()=>this.backdrop,close:o=>this.close(o)}),this.open=!1,this.size="m",this.returnValue="",this.scrollable=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog"),this.setAttribute("aria-modal","true")}showModal(){this.open=!0}close(o){this.open=!1,null!=o&&(this.returnValue=o),this.dispatchEvent(new p("close"))}focus(o){this.modal.focus({preventScroll:!0,...o})}render(){return n`<div class="n-modal-backdrop"><div class="n-modal" tabindex="0"><div class="n-modal-header n-rounded-top" ?hidden="${this.headerSlot.isEmpty}"><slot class="n-padded" name="${this.headerSlot.slotName}"></slot><button class="n-close" @click="${this.handleDismiss}"><nord-icon name="interface-close-small" size="s" label="${this.localize.term("closeLabel")}"></nord-icon></button></div><div class="n-modal-body"><slot name="${this.featureSlot.slotName}" class="${this.headerSlot.isEmpty?"n-rounded-top":""}" ?hidden="${this.featureSlot.isEmpty}"></slot><slot class="n-body-padded"></slot></div><div class="n-modal-footer n-padded" ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></div></div></div>`}handleOpenUpdated(o){this.open?this.modalController.block():!0===o&&this.modalController.unblock()}handleDismiss(){this.dispatchEvent(new p("cancel",{cancelable:!0}))&&this.close()}};f.styles=[m,b],f.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},a([s(".n-modal",!0)],f.prototype,"modal",void 0),a([s(".n-modal-backdrop",!0)],f.prototype,"backdrop",void 0),a([t({type:Boolean,reflect:!0})],f.prototype,"open",void 0),a([t({reflect:!0})],f.prototype,"size",void 0),a([t({attribute:!1})],f.prototype,"returnValue",void 0),a([t({type:Boolean,reflect:!0})],f.prototype,"scrollable",void 0),a([c("open","updated")],f.prototype,"handleOpenUpdated",null),f=a([i("nord-modal")],f);var u=f;export{u as default};
+import{i as o,s as e,_ as a,y as n,e as i}from"./query-assigned-elements-cf502539.js";import{e as t}from"./property-03f59dce.js";import{i as s}from"./query-2d22378e.js";import{c as l}from"./interface-close-small-44ababc3.js";import r from"./Icon.js";import{S as d}from"./SlotController-d733c575.js";import{o as c}from"./observe-a9c6dfb6.js";import{N as p}from"./events-5337a6d7.js";import{s as m}from"./Component-449e40fb.js";import{LocalizeController as v}from"./LocalizeController.js";import{ModalController as h}from"./ModalController.js";import"./state-70f38ceb.js";import"./if-defined-720964c0.js";import"./directive-de55b00a.js";import"./cond-2da54107.js";import"./IconManager.js";import"./EventController-d99ebeef.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"./LightDismissController-a2645ae6.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./ScrollbarController-773c79f4.js";const b=o`:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-padding-block:var(--n-modal-padding-block, var(--n-space-m));--_n-modal-focus-ring:0 0 0 2px var(--n-color-accent);--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 620px);color:var(--n-color-text);position:fixed;inset:0;visibility:hidden;transition:visibility var(--n-transition-slowly);z-index:var(--n-index-overlay)}:host([open]){transition-property:none;visibility:visible}.n-modal-backdrop{position:fixed;inset:0;background:var(--n-color-overlay);transition:opacity var(--n-transition-slowly);padding:var(--n-space-l);padding-block-start:clamp(var(--n-space-l),min(10vh,10vw) - 1em,calc(var(--n-space-xxl) + var(--n-space-s)));overflow-y:auto}:host(:not([open])) .n-modal-backdrop{opacity:0}.n-modal{position:relative;display:flex;flex-direction:column;inline-size:100%;max-inline-size:var(--_n-modal-max-inline-size);margin:auto;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-modal);border-radius:var(--n-border-radius);transition:opacity var(--n-transition-slowly),transform var(--n-transition-slowly)}.n-rounded-top{border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}:host(:not([open])) .n-modal{transform:translateY(-10px) scale(.97);opacity:0}.n-modal:focus{outline:0}.n-modal-body{flex:1}.n-body-padded{display:block;padding:var(--n-space-l) var(--_n-modal-padding-inline) var(--n-space-xl)}.n-modal-header{display:flex;gap:var(--n-space-m);align-items:start;background:var(--n-color-nav-surface);border-block-end:1px solid var(--n-color-border)}.n-modal-footer{border-block-start:1px solid var(--n-color-border)}.n-padded{padding:var(--_n-modal-padding-block) var(--_n-modal-padding-inline)}.n-close{border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);background-color:transparent;border-radius:var(--n-border-radius);inset-block-start:var(--n-space-s);inset-inline-end:var(--n-space-s);color:var(--n-color-text);cursor:pointer;transition:color var(--n-transition-quickly);position:relative}.n-close::after{content:"";position:absolute;display:block;inset:calc(var(--n-space-s) * -1);border-radius:var(--n-border-radius)}.n-close:not(:hover){color:var(--n-color-icon)}.n-close:active{transform:translateY(1px)}.n-close:focus{outline:0;box-shadow:var(--_n-modal-focus-ring)}@supports selector(:focus-visible){.n-close:focus{box-shadow:none}.n-close:focus-visible{box-shadow:var(--_n-modal-focus-ring)}}:host([scrollable]) .n-modal{max-block-size:100%}:host([scrollable]) .n-modal-body{overflow-y:auto}@media (min-width:489px){:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l))}:host([size="s"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 440px)}:host([size="l"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 1320px)}}slot[name]{display:flex}slot[name=header]{flex:1}slot[name=header]::slotted(*){margin:0!important;padding:0!important;font-size:var(--n-font-size-l)!important;font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading)!important}slot[name=footer]{gap:calc(var(--n-space-s)/ 2);flex-direction:column}@media (min-width:489px){slot[name=footer]{gap:var(--n-space-s);flex-direction:row;justify-content:flex-end;align-items:center}}slot[name=feature]{overflow:hidden}slot[name=feature]::slotted(*){inline-size:100%;block-size:auto}`;r.registerIcon(l);let f=class extends e{constructor(){super(...arguments),this.headerSlot=new d(this,"header"),this.featureSlot=new d(this,"feature"),this.footerSlot=new d(this,"footer"),this.localize=new v(this),this.modalController=new h(this,{isOpen:()=>this.open,onDismiss:()=>this.handleDismiss(),dialog:()=>this.modal,backdrop:()=>this.backdrop,close:o=>this.close(o)}),this.open=!1,this.size="m",this.returnValue="",this.scrollable=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog"),this.setAttribute("aria-modal","true")}showModal(){this.open=!0}close(o){this.open=!1,null!=o&&(this.returnValue=o),this.dispatchEvent(new p("close"))}focus(o){this.modal.focus({preventScroll:!0,...o})}render(){return n`<div class="n-modal-backdrop"><div class="n-modal" tabindex="0"><div class="n-modal-header n-rounded-top" ?hidden="${this.headerSlot.isEmpty}"><slot class="n-padded" name="${this.headerSlot.slotName}"></slot><button class="n-close" @click="${this.handleDismiss}"><nord-icon name="interface-close-small" size="s" label="${this.localize.term("closeLabel")}"></nord-icon></button></div><div class="n-modal-body"><slot name="${this.featureSlot.slotName}" class="${this.headerSlot.isEmpty?"n-rounded-top":""}" ?hidden="${this.featureSlot.isEmpty}"></slot><slot class="n-body-padded"></slot></div><div class="n-modal-footer n-padded" ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></div></div></div>`}handleOpenUpdated(o){this.open?this.modalController.block():!0===o&&this.modalController.unblock()}handleDismiss(){this.dispatchEvent(new p("cancel",{cancelable:!0}))&&this.close()}};f.styles=[m,b],f.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},a([s(".n-modal",!0)],f.prototype,"modal",void 0),a([s(".n-modal-backdrop",!0)],f.prototype,"backdrop",void 0),a([t({type:Boolean,reflect:!0})],f.prototype,"open",void 0),a([t({reflect:!0})],f.prototype,"size",void 0),a([t({attribute:!1})],f.prototype,"returnValue",void 0),a([t({type:Boolean,reflect:!0})],f.prototype,"scrollable",void 0),a([c("open","updated")],f.prototype,"handleOpenUpdated",null),f=a([i("nord-modal")],f);var u=f;export{u as default};
 //# sourceMappingURL=Modal.js.map

package/lib/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../src/modal/Modal.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport style from \"./Modal.css\"\nimport { ModalController } from \"./ModalController.js\"\n\nIcon.registerIcon(closeIcon)\n\n/**\n * Modal component is used to display content that temporarily blocks interactions\n * with the main view of an application. Modal should be used sparingly and\n * only when necessary.\n *\n * @status ready\n * @category overlay\n * @slot - Default slot\n * @slot header - Slot which holds the header of the modal, positioned next to the close button.\n * @slot footer - Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.\n * @fires cancel - Dispatched before the modal has closed when a user attempts to dismiss a modal. Call `preventDefault()` on the event to prevent the modal closing.\n * @fires close - Dispatched when a modal is closed for any reason.\n *\n * @cssprop [--n-modal-padding-inline=var(--n-space-m)] - Controls the padding on the sides of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-padding-block=var(--n-space-m)] - Controls the padding above and below the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-max-inline-size=620px] - Controls the width of the modal.\n */\n@customElement(\"nord-modal\")\nexport default class Modal extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * @internal\n   * ensures clicking on the backdrop does not move focus to <body>,\n   * which can causes issues with focus trapping, and returning focus on modal close,\n   * when there are multiple modals.\n   */\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n\n  @query(\".n-modal\", true) private modal!: HTMLDivElement\n  @query(\".n-modal-backdrop\", true) private backdrop!: HTMLDivElement\n\n  private headerSlot = new SlotController(this, \"header\")\n  private featureSlot = new SlotController(this, \"feature\")\n  private footerSlot = new SlotController(this, \"footer\")\n\n  private localize = new LocalizeController<\"nord-modal\">(this)\n  private modalController = new ModalController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.handleDismiss(),\n    dialog: () => this.modal,\n    backdrop: () => this.backdrop,\n    close: returnValue => this.close(returnValue),\n  })\n\n  /**\n   * Controls whether the modal is open or not.\n   */\n  @property({ type: Boolean, reflect: true }) open = false\n\n  /**\n   * Controls the max-width of the modal when open.\n   */\n  @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n\n  /**\n   * The reason why the modal was closed. This typically indicates\n   * which button the user pressed to close the modal, though any value\n   * can be supplied if the modal is programmatically closed.\n   */\n  @property({ attribute: false }) returnValue: string = \"\"\n\n  /**\n   * By default if a modal is too big for the browser window,\n   * the entire modal will scroll. This setting changes that behavior\n   * so that the body of the modal scrolls instead, with the modal\n   * itself remaining fixed.\n   */\n  @property({ type: Boolean, reflect: true }) scrollable = false\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.setAttribute(\"role\", \"dialog\")\n    this.setAttribute(\"aria-modal\", \"true\")\n  }\n\n  /**\n   * Show the modal, automatically moving focus to the modal or a child\n   * element with an `autofocus` attribute.\n   */\n  showModal() {\n    this.open = true\n  }\n\n  /**\n   * Programmatically close the modal.\n   * @param returnValue An optional value to indicate why the modal was closed.\n   */\n  close(returnValue?: string) {\n    this.open = false\n\n    if (returnValue != null) {\n      this.returnValue = returnValue\n    }\n\n    this.dispatchEvent(new NordEvent(\"close\"))\n  }\n\n  /**\n   * Programmatically focus the modal.\n   * @param options An object which controls aspects of the focusing process.\n   */\n  focus(options?: FocusOptions) {\n    this.modal.focus({ preventScroll: true, ...options })\n  }\n\n  render() {\n    return html`\n      <div class=\"n-modal-backdrop\">\n        <div class=\"n-modal\" tabindex=\"0\">\n          <div class=\"n-modal-header n-rounded-top\" ?hidden=${this.headerSlot.isEmpty}>\n            <slot class=\"n-padded\" name=${this.headerSlot.slotName}></slot>\n            <button class=\"n-close\" @click=${this.handleDismiss}>\n              <nord-icon name=\"interface-close-small\" size=\"s\" label=${this.localize.term(\"closeLabel\")}></nord-icon>\n            </button>\n          </div>\n\n          <div class=\"n-modal-body\">\n            <slot\n              name=${this.featureSlot.slotName}\n              class=${this.headerSlot.isEmpty ? \"n-rounded-top\" : \"\"}\n              ?hidden=${this.featureSlot.isEmpty}\n            ></slot>\n            <slot class=\"n-body-padded\"></slot>\n          </div>\n\n          <div class=\"n-modal-footer n-padded\" ?hidden=${this.footerSlot.isEmpty}>\n            <slot name=${this.footerSlot.slotName}></slot>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  @observe(\"open\", \"updated\")\n  protected handleOpenUpdated(prev: boolean) {\n    if (this.open) {\n      this.modalController.block()\n    } else if (prev === true) {\n      this.modalController.unblock()\n    }\n  }\n\n  private handleDismiss() {\n    // allow cancelling of close\n    const allowed = this.dispatchEvent(new NordEvent(\"cancel\", { cancelable: true }))\n\n    if (allowed) {\n      this.close()\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-modal\": Modal\n  }\n}\n"],"names":["Icon","registerIcon","closeIcon","Modal","LitElement","constructor","this","headerSlot","SlotController","featureSlot","footerSlot","localize","LocalizeController","modalController","ModalController","isOpen","open","onDismiss","handleDismiss","dialog","modal","backdrop","close","returnValue","size","scrollable","connectedCallback","super","setAttribute","showModal","dispatchEvent","NordEvent","focus","options","preventScroll","render","html","isEmpty","slotName","term","handleOpenUpdated","prev","block","unblock","cancelable","styles","componentStyle","style","shadowRootOptions","delegatesFocus","__decorate","query","prototype","property","type","Boolean","reflect","attribute","observe","customElement"],"mappings":"qkJAcAA,EAAKC,aAAaC,GAoBlB,IAAqBC,EAArB,cAAmCC,EAAnCC,kCAcUC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAWG,YAAG,IAAID,EAAeF,KAAM,WACvCA,KAAUI,WAAG,IAAIF,EAAeF,KAAM,UAEtCA,KAAAK,SAAW,IAAIC,EAAiCN,MAChDA,KAAAO,gBAAkB,IAAIC,EAAgBR,KAAM,CAClDS,OAAQ,IAAMT,KAAKU,KACnBC,UAAW,IAAMX,KAAKY,gBACtBC,OAAQ,IAAMb,KAAKc,MACnBC,SAAU,IAAMf,KAAKe,SACrBC,MAAOC,GAAejB,KAAKgB,MAAMC,KAMSjB,KAAIU,MAAG,EAKtBV,KAAIkB,KAAoB,IAOrBlB,KAAWiB,YAAW,GAQVjB,KAAUmB,YAAG,CAoF1D,CAlFCC,oBACEC,MAAMD,oBAENpB,KAAKsB,aAAa,OAAQ,UAC1BtB,KAAKsB,aAAa,aAAc,OACjC,CAMDC,YACEvB,KAAKU,MAAO,CACb,CAMDM,MAAMC,GACJjB,KAAKU,MAAO,EAEO,MAAfO,IACFjB,KAAKiB,YAAcA,GAGrBjB,KAAKwB,cAAc,IAAIC,EAAU,SAClC,CAMDC,MAAMC,GACJ3B,KAAKc,MAAMY,MAAM,CAAEE,eAAe,KAASD,GAC5C,CAEDE,SACE,OAAOC,CAAI,sHAG+C9B,KAAKC,WAAW8B,yCACpC/B,KAAKC,WAAW+B,oDACbhC,KAAKY,0EACqBZ,KAAKK,SAAS4B,KAAK,mFAMrEjC,KAAKG,YAAY6B,oBAChBhC,KAAKC,WAAW8B,QAAU,gBAAkB,gBAC1C/B,KAAKG,YAAY4B,0GAKgB/B,KAAKI,WAAW2B,wBAChD/B,KAAKI,WAAW4B,qCAKtC,CAGSE,kBAAkBC,GACtBnC,KAAKU,KACPV,KAAKO,gBAAgB6B,SACH,IAATD,GACTnC,KAAKO,gBAAgB8B,SAExB,CAEOzB,gBAEUZ,KAAKwB,cAAc,IAAIC,EAAU,SAAU,CAAEa,YAAY,MAGvEtC,KAAKgB,OAER,GApIMnB,EAAA0C,OAAS,CAACC,EAAgBC,GAQ1B5C,EAAiB6C,kBAAG,IAAK5C,EAAW4C,kBAAmBC,gBAAgB,GAErDC,EAAA,CAAxBC,EAAM,YAAY,IAAoChD,EAAAiD,UAAA,aAAA,GACrBF,EAAA,CAAjCC,EAAM,qBAAqB,IAAuChD,EAAAiD,UAAA,gBAAA,GAkBvBF,EAAA,CAA3CG,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAoBrD,EAAAiD,UAAA,YAAA,GAK3BF,EAAA,CAA5BG,EAAS,CAAEG,SAAS,KAAmCrD,EAAAiD,UAAA,YAAA,GAOxBF,EAAA,CAA/BG,EAAS,CAAEI,WAAW,KAAiCtD,EAAAiD,UAAA,mBAAA,GAQZF,EAAA,CAA3CG,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAA0BrD,EAAAiD,UAAA,kBAAA,GAoE9DF,EAAA,CADCQ,EAAQ,OAAQ,YAOhBvD,EAAAiD,UAAA,oBAAA,MA5HkBjD,EAAK+C,EAAA,CADzBS,EAAc,eACMxD,SAAAA"}
+{"version":3,"file":"Modal.js","sources":["../src/modal/Modal.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport style from \"./Modal.css\"\nimport { ModalController } from \"./ModalController.js\"\n\nIcon.registerIcon(closeIcon)\n\n/**\n * Modal component is used to display content that temporarily blocks interactions\n * with the main view of an application. Modal should be used sparingly and\n * only when necessary.\n *\n * @status ready\n * @category overlay\n * @slot - Default slot\n * @slot header - Slot which holds the header of the modal, positioned next to the close button.\n * @slot footer - Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.\n * @fires cancel - Dispatched before the modal has closed when a user attempts to dismiss a modal. Call `preventDefault()` on the event to prevent the modal closing.\n * @fires close - Dispatched when a modal is closed for any reason.\n *\n * @cssprop [--n-modal-padding-inline=var(--n-space-m)] - Controls the padding on the sides of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-padding-block=var(--n-space-m)] - Controls the padding above and below the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-max-inline-size=620px] - Controls the width of the modal.\n *\n * @localization closeLabel - Accessible label for the close button.\n */\n@customElement(\"nord-modal\")\nexport default class Modal extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * @internal\n   * ensures clicking on the backdrop does not move focus to <body>,\n   * which can causes issues with focus trapping, and returning focus on modal close,\n   * when there are multiple modals.\n   */\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n\n  @query(\".n-modal\", true) private modal!: HTMLDivElement\n  @query(\".n-modal-backdrop\", true) private backdrop!: HTMLDivElement\n\n  private headerSlot = new SlotController(this, \"header\")\n  private featureSlot = new SlotController(this, \"feature\")\n  private footerSlot = new SlotController(this, \"footer\")\n\n  private localize = new LocalizeController<\"nord-modal\">(this)\n  private modalController = new ModalController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.handleDismiss(),\n    dialog: () => this.modal,\n    backdrop: () => this.backdrop,\n    close: returnValue => this.close(returnValue),\n  })\n\n  /**\n   * Controls whether the modal is open or not.\n   */\n  @property({ type: Boolean, reflect: true }) open = false\n\n  /**\n   * Controls the max-width of the modal when open.\n   */\n  @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n\n  /**\n   * The reason why the modal was closed. This typically indicates\n   * which button the user pressed to close the modal, though any value\n   * can be supplied if the modal is programmatically closed.\n   */\n  @property({ attribute: false }) returnValue: string = \"\"\n\n  /**\n   * By default if a modal is too big for the browser window,\n   * the entire modal will scroll. This setting changes that behavior\n   * so that the body of the modal scrolls instead, with the modal\n   * itself remaining fixed.\n   */\n  @property({ type: Boolean, reflect: true }) scrollable = false\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.setAttribute(\"role\", \"dialog\")\n    this.setAttribute(\"aria-modal\", \"true\")\n  }\n\n  /**\n   * Show the modal, automatically moving focus to the modal or a child\n   * element with an `autofocus` attribute.\n   */\n  showModal() {\n    this.open = true\n  }\n\n  /**\n   * Programmatically close the modal.\n   * @param returnValue An optional value to indicate why the modal was closed.\n   */\n  close(returnValue?: string) {\n    this.open = false\n\n    if (returnValue != null) {\n      this.returnValue = returnValue\n    }\n\n    this.dispatchEvent(new NordEvent(\"close\"))\n  }\n\n  /**\n   * Programmatically focus the modal.\n   * @param options An object which controls aspects of the focusing process.\n   */\n  focus(options?: FocusOptions) {\n    this.modal.focus({ preventScroll: true, ...options })\n  }\n\n  render() {\n    return html`\n      <div class=\"n-modal-backdrop\">\n        <div class=\"n-modal\" tabindex=\"0\">\n          <div class=\"n-modal-header n-rounded-top\" ?hidden=${this.headerSlot.isEmpty}>\n            <slot class=\"n-padded\" name=${this.headerSlot.slotName}></slot>\n            <button class=\"n-close\" @click=${this.handleDismiss}>\n              <nord-icon name=\"interface-close-small\" size=\"s\" label=${this.localize.term(\"closeLabel\")}></nord-icon>\n            </button>\n          </div>\n\n          <div class=\"n-modal-body\">\n            <slot\n              name=${this.featureSlot.slotName}\n              class=${this.headerSlot.isEmpty ? \"n-rounded-top\" : \"\"}\n              ?hidden=${this.featureSlot.isEmpty}\n            ></slot>\n            <slot class=\"n-body-padded\"></slot>\n          </div>\n\n          <div class=\"n-modal-footer n-padded\" ?hidden=${this.footerSlot.isEmpty}>\n            <slot name=${this.footerSlot.slotName}></slot>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  @observe(\"open\", \"updated\")\n  protected handleOpenUpdated(prev: boolean) {\n    if (this.open) {\n      this.modalController.block()\n    } else if (prev === true) {\n      this.modalController.unblock()\n    }\n  }\n\n  private handleDismiss() {\n    // allow cancelling of close\n    const allowed = this.dispatchEvent(new NordEvent(\"cancel\", { cancelable: true }))\n\n    if (allowed) {\n      this.close()\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-modal\": Modal\n  }\n}\n"],"names":["Icon","registerIcon","closeIcon","Modal","LitElement","constructor","this","headerSlot","SlotController","featureSlot","footerSlot","localize","LocalizeController","modalController","ModalController","isOpen","open","onDismiss","handleDismiss","dialog","modal","backdrop","close","returnValue","size","scrollable","connectedCallback","super","setAttribute","showModal","dispatchEvent","NordEvent","focus","options","preventScroll","render","html","isEmpty","slotName","term","handleOpenUpdated","prev","block","unblock","cancelable","styles","componentStyle","style","shadowRootOptions","delegatesFocus","__decorate","query","prototype","property","type","Boolean","reflect","attribute","observe","customElement"],"mappings":"8lJAcAA,EAAKC,aAAaC,GAsBlB,IAAqBC,EAArB,cAAmCC,EAAnCC,kCAcUC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAWG,YAAG,IAAID,EAAeF,KAAM,WACvCA,KAAUI,WAAG,IAAIF,EAAeF,KAAM,UAEtCA,KAAAK,SAAW,IAAIC,EAAiCN,MAChDA,KAAAO,gBAAkB,IAAIC,EAAgBR,KAAM,CAClDS,OAAQ,IAAMT,KAAKU,KACnBC,UAAW,IAAMX,KAAKY,gBACtBC,OAAQ,IAAMb,KAAKc,MACnBC,SAAU,IAAMf,KAAKe,SACrBC,MAAOC,GAAejB,KAAKgB,MAAMC,KAMSjB,KAAIU,MAAG,EAKtBV,KAAIkB,KAAoB,IAOrBlB,KAAWiB,YAAW,GAQVjB,KAAUmB,YAAG,CAoF1D,CAlFCC,oBACEC,MAAMD,oBAENpB,KAAKsB,aAAa,OAAQ,UAC1BtB,KAAKsB,aAAa,aAAc,OACjC,CAMDC,YACEvB,KAAKU,MAAO,CACb,CAMDM,MAAMC,GACJjB,KAAKU,MAAO,EAEO,MAAfO,IACFjB,KAAKiB,YAAcA,GAGrBjB,KAAKwB,cAAc,IAAIC,EAAU,SAClC,CAMDC,MAAMC,GACJ3B,KAAKc,MAAMY,MAAM,CAAEE,eAAe,KAASD,GAC5C,CAEDE,SACE,OAAOC,CAAI,sHAG+C9B,KAAKC,WAAW8B,yCACpC/B,KAAKC,WAAW+B,oDACbhC,KAAKY,0EACqBZ,KAAKK,SAAS4B,KAAK,mFAMrEjC,KAAKG,YAAY6B,oBAChBhC,KAAKC,WAAW8B,QAAU,gBAAkB,gBAC1C/B,KAAKG,YAAY4B,0GAKgB/B,KAAKI,WAAW2B,wBAChD/B,KAAKI,WAAW4B,qCAKtC,CAGSE,kBAAkBC,GACtBnC,KAAKU,KACPV,KAAKO,gBAAgB6B,SACH,IAATD,GACTnC,KAAKO,gBAAgB8B,SAExB,CAEOzB,gBAEUZ,KAAKwB,cAAc,IAAIC,EAAU,SAAU,CAAEa,YAAY,MAGvEtC,KAAKgB,OAER,GApIMnB,EAAA0C,OAAS,CAACC,EAAgBC,GAQ1B5C,EAAiB6C,kBAAG,IAAK5C,EAAW4C,kBAAmBC,gBAAgB,GAErDC,EAAA,CAAxBC,EAAM,YAAY,IAAoChD,EAAAiD,UAAA,aAAA,GACrBF,EAAA,CAAjCC,EAAM,qBAAqB,IAAuChD,EAAAiD,UAAA,gBAAA,GAkBvBF,EAAA,CAA3CG,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAoBrD,EAAAiD,UAAA,YAAA,GAK3BF,EAAA,CAA5BG,EAAS,CAAEG,SAAS,KAAmCrD,EAAAiD,UAAA,YAAA,GAOxBF,EAAA,CAA/BG,EAAS,CAAEI,WAAW,KAAiCtD,EAAAiD,UAAA,mBAAA,GAQZF,EAAA,CAA3CG,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAA0BrD,EAAAiD,UAAA,kBAAA,GAoE9DF,EAAA,CADCQ,EAAQ,OAAQ,YAOhBvD,EAAAiD,UAAA,oBAAA,MA5HkBjD,EAAK+C,EAAA,CADzBS,EAAc,eACMxD,SAAAA"}

package/lib/NavGroup.js

@@ -1,2 +1,2 @@
-import{i as e,_ as i,s as n,y as t,b as o,e as r}from"./query-assigned-elements-cf502539.js";import{e as a}from"./property-03f59dce.js";import"./Icon.js";import"./state-70f38ceb.js";import"./if-defined-720964c0.js";import"./directive-de55b00a.js";import"./observe-a9c6dfb6.js";import"./cond-2da54107.js";import"./Component-449e40fb.js";const s=e`:host{color:var(--n-color-text-weak);font-weight:var(--n-font-weight);line-height:var(--n-line-height-tight);white-space:nowrap;text-overflow:ellipsis;user-select:none;all:unset;display:block;font-family:var(--n-font-family);font-size:var(--n-font-size-m)}*,::after,::before{box-sizing:border-box}[role=list]{margin-block-end:var(--n-space-m);min-inline-size:100%;list-style:none;appearance:none;border:0;box-sizing:border-box;margin:0;padding:0}.n-heading{min-inline-size:100%;color:var(--n-color-nav-heading);font-weight:var(--n-font-weight-active);line-height:var(--n-line-height-tight);padding-inline-start:var(--n-space-s);margin-block-end:var(--n-space-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;let l=class extends n{render(){return t`${this.heading?t`<p id="heading" aria-hidden="true" class="n-heading">${this.heading}</p>`:o}<div role="list" aria-labelledby="${this.heading?"heading":o}"><slot></slot></div>`}};l.styles=s,i([a()],l.prototype,"heading",void 0),l=i([r("nord-nav-group")],l);var d=l;export{d as default};
+import{i as e,_ as i,s as n,y as t,b as o,e as r}from"./query-assigned-elements-cf502539.js";import{e as a}from"./property-03f59dce.js";import"./Icon.js";import"./state-70f38ceb.js";import"./if-defined-720964c0.js";import"./directive-de55b00a.js";import"./cond-2da54107.js";import"./IconManager.js";import"./Component-449e40fb.js";import"./observe-a9c6dfb6.js";const s=e`:host{color:var(--n-color-text-weak);font-weight:var(--n-font-weight);line-height:var(--n-line-height-tight);white-space:nowrap;text-overflow:ellipsis;user-select:none;all:unset;display:block;font-family:var(--n-font-family);font-size:var(--n-font-size-m)}*,::after,::before{box-sizing:border-box}[role=list]{margin-block-end:var(--n-space-m);min-inline-size:100%;list-style:none;appearance:none;border:0;box-sizing:border-box;margin:0;padding:0}.n-heading{min-inline-size:100%;color:var(--n-color-nav-heading);font-weight:var(--n-font-weight-active);line-height:var(--n-line-height-tight);padding-inline-start:var(--n-space-s);margin-block-end:var(--n-space-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;let l=class extends n{render(){return t`${this.heading?t`<p id="heading" aria-hidden="true" class="n-heading">${this.heading}</p>`:o}<div role="list" aria-labelledby="${this.heading?"heading":o}"><slot></slot></div>`}};l.styles=s,i([a()],l.prototype,"heading",void 0),l=i([r("nord-nav-group")],l);var d=l;export{d as default};
 //# sourceMappingURL=NavGroup.js.map

package/lib/NavGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavGroup.js","sources":["../src/nav-group/NavGroup.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport \"../icon/Icon.js\"\n\nimport style from \"./NavGroup.css\"\n\n/**\n * Navigation group includes all the actions or items in a single\n * group and is used for grouping items into related categories.\n *\n * @category navigation\n * @status ready\n * @slot - The default slot used for the nav items.\n */\n@customElement(\"nord-nav-group\")\nexport default class NavGroup extends LitElement {\n  static styles = style\n\n  /**\n   * Heading and accessible label for the nav group\n   */\n  @property() heading?: string\n\n  render() {\n    return html`\n      ${this.heading ? html`<p id=\"heading\" aria-hidden=\"true\" class=\"n-heading\">${this.heading}</p>` : nothing}\n      <div role=\"list\" aria-labelledby=${this.heading ? \"heading\" : nothing}>\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-group\": NavGroup\n  }\n}\n"],"names":["NavGroup","LitElement","render","html","this","heading","nothing","styles","style","__decorate","property","prototype","customElement"],"mappings":"4iCAeA,IAAqBA,EAArB,cAAsCC,EAQpCC,SACE,OAAOC,CAAI,GACPC,KAAKC,QAAUF,CAAI,wDAAwDC,KAAKC,cAAgBC,sCAC/DF,KAAKC,QAAU,UAAYC,wBAIjE,GAdMN,EAAMO,OAAGC,EAKJC,EAAA,CAAXC,KAA2BV,EAAAW,UAAA,eAAA,GANTX,EAAQS,EAAA,CAD5BG,EAAc,mBACMZ,SAAAA"}
+{"version":3,"file":"NavGroup.js","sources":["../src/nav-group/NavGroup.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport \"../icon/Icon.js\"\n\nimport style from \"./NavGroup.css\"\n\n/**\n * Navigation group includes all the actions or items in a single\n * group and is used for grouping items into related categories.\n *\n * @category navigation\n * @status ready\n * @slot - The default slot used for the nav items.\n */\n@customElement(\"nord-nav-group\")\nexport default class NavGroup extends LitElement {\n  static styles = style\n\n  /**\n   * Heading and accessible label for the nav group\n   */\n  @property() heading?: string\n\n  render() {\n    return html`\n      ${this.heading ? html`<p id=\"heading\" aria-hidden=\"true\" class=\"n-heading\">${this.heading}</p>` : nothing}\n      <div role=\"list\" aria-labelledby=${this.heading ? \"heading\" : nothing}>\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-group\": NavGroup\n  }\n}\n"],"names":["NavGroup","LitElement","render","html","this","heading","nothing","styles","style","__decorate","property","prototype","customElement"],"mappings":"qkCAeA,IAAqBA,EAArB,cAAsCC,EAQpCC,SACE,OAAOC,CAAI,GACPC,KAAKC,QAAUF,CAAI,wDAAwDC,KAAKC,cAAgBC,sCAC/DF,KAAKC,QAAU,UAAYC,wBAIjE,GAdMN,EAAMO,OAAGC,EAKJC,EAAA,CAAXC,KAA2BV,EAAAW,UAAA,eAAA,GANTX,EAAQS,EAAA,CAD5BG,EAAc,mBACMZ,SAAAA"}

package/lib/NavItem.js

@@ -1,2 +1,2 @@
-import{i as e,_ as n,y as o,b as t,e as a,s as i}from"./query-assigned-elements-cf502539.js";import{e as r}from"./property-03f59dce.js";import{o as s}from"./class-map-21152cee.js";import{n as c}from"./ref-c44e9f3c.js";import{D as l}from"./DirectionController-8b298382.js";import{S as d}from"./SlotController-d733c575.js";import{c as v}from"./cond-2da54107.js";import{N as p}from"./events-731d0007.js";import{F as m}from"./FocusableMixin-32631bff.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";const h=e`:host{--_n-nav-item-box-shadow:none;all:unset;display:block;font-feature-settings:var(--n-font-features);font-family:var(--n-font-family)}*,::after,::before{box-sizing:border-box}.n-nav-item{-webkit-user-select:none;user-select:none;display:flex;align-items:center;font-family:inherit;font-size:inherit;line-height:var(--n-line-height-tight);-webkit-appearance:none;appearance:none;color:var(--n-color-text-weak);padding:var(--n-space-s);min-block-size:28px;margin-block-end:1px;border-radius:var(--n-border-radius-s);text-decoration:none;inline-size:100%;max-inline-size:100%;background:0 0;cursor:pointer;border:0;text-align:start;box-shadow:var(--_n-nav-item-box-shadow);position:relative}.n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}@supports selector(:focus-visible){.n-nav-item:focus{--_n-nav-item-box-shadow:none}.n-nav-item:focus-visible{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent)}}.n-nav-item:hover{background:var(--n-color-nav-hover);color:var(--n-color-text)}.n-nav-item:active{opacity:.7}.n-nav-content{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([badge]) .n-nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-inline-size:calc(100% - calc(var(--n-space-m) + var(--n-space-m)));margin-block-end:-3px}:host([active]) .n-nav-item{--_n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-color-accent);color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active)}:host([active]) .n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) nord-icon{color:currentColor}.n-toggle-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s);margin-inline-start:var(--n-space-s)}.n-toggle-icon.n-rtl{transform:rotate(-180deg)}[aria-expanded=true] .n-toggle-icon{transform:rotate(90deg)}.n-nav-icon{margin-inline-end:calc(var(--n-space-s) * 1.4);flex-shrink:0}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + calc(var(--n-space-s) * 1.3))}.n-nav-badge{border-radius:var(--n-border-radius-pill);background:var(--n-color-status-warning);color:rgba(0,0,0,.8);font-weight:var(--n-font-weight);font-feature-settings:var(--n-font-features-reduced);padding:4px 6px;text-align:center;min-inline-size:20px;position:absolute;margin-block-start:-2px;margin-inline-start:calc(var(--n-space-s)/ 1.5);font-size:var(--n-font-size-xs);display:inline-block}`;let f=class extends(m(i)){constructor(){super(...arguments),this.subnavSlot=new d(this,"subnav"),this.direction=new l(this),this.active=!1,this.open=!1}connectedCallback(){super.connectedCallback(),this.querySelector("nord-nav-item[active]")&&(this.open=!0)}render(){const e=o`${this.icon?o`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:t}<div class="n-nav-content"><span class="n-nav-label"><slot></slot></span>${this.badge?o`<span class="n-nav-badge">${this.badge}</span>`:t}</div>`;let n;return n=this.subnavSlot.hasContent?this.renderToggle(e):this.href?this.renderLink(e):this.renderButton(e),o`<div role="listitem">${n}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLink(e){return o`<a class="n-nav-item" ${c(this.focusableRef)} aria-current="${v(this.active,"page")}" href="${this.href||""}">${e}</a>`}renderToggle(e){return o`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${c(this.focusableRef)}>${e}<nord-icon size="xxs" class="${s({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(e){return o`<button class="n-nav-item" ${c(this.focusableRef)}>${e}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new p("toggle"))}};f.styles=h,n([r({type:Boolean,reflect:!0})],f.prototype,"active",void 0),n([r()],f.prototype,"icon",void 0),n([r()],f.prototype,"href",void 0),n([r()],f.prototype,"badge",void 0),n([r({type:Boolean})],f.prototype,"open",void 0),f=n([a("nord-nav-item")],f);var b=f;export{b as default};
+import{i as e,_ as n,y as t,b as o,e as a,s as i}from"./query-assigned-elements-cf502539.js";import{e as r}from"./property-03f59dce.js";import{o as s}from"./class-map-21152cee.js";import{n as c}from"./ref-c44e9f3c.js";import{D as l}from"./DirectionController-8b298382.js";import{S as v}from"./SlotController-d733c575.js";import{c as d}from"./cond-2da54107.js";import{N as p}from"./events-5337a6d7.js";import{F as h}from"./FocusableMixin-32631bff.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";const m=e`:host{--_n-nav-item-box-shadow:none;all:unset;display:block;font-feature-settings:var(--n-font-features);font-family:var(--n-font-family)}*,::after,::before{box-sizing:border-box}.n-nav-item{-webkit-user-select:none;user-select:none;display:flex;align-items:center;font-family:inherit;font-size:inherit;line-height:var(--n-line-height-tight);-webkit-appearance:none;appearance:none;color:var(--n-color-text-weak);padding:var(--n-space-s);min-block-size:28px;margin-block-end:1px;border-radius:var(--n-border-radius-s);text-decoration:none;inline-size:100%;max-inline-size:100%;background:0 0;cursor:pointer;border:0;text-align:start;box-shadow:var(--_n-nav-item-box-shadow);position:relative}.n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}@supports selector(:focus-visible){.n-nav-item:focus{--_n-nav-item-box-shadow:none}.n-nav-item:focus-visible{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent)}}.n-nav-item:hover{background:var(--n-color-nav-hover);color:var(--n-color-text)}.n-nav-item:active{opacity:.7}.n-nav-content{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([badge]) .n-nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-inline-size:calc(100% - calc(var(--n-space-m) + var(--n-space-m)));margin-block-end:-3px}:host([active]) .n-nav-item{--_n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-color-accent);color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active)}:host([active]) .n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) nord-icon{color:currentColor}.n-toggle-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s);margin-inline-start:var(--n-space-s)}.n-toggle-icon.n-rtl{transform:rotate(-180deg)}[aria-expanded=true] .n-toggle-icon{transform:rotate(90deg)}.n-nav-icon{margin-inline-end:calc(var(--n-space-s) * 1.4);flex-shrink:0}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + calc(var(--n-space-s) * 1.3))}.n-nav-badge{border-radius:var(--n-border-radius-pill);background:var(--n-color-status-warning);color:rgba(0,0,0,.8);font-weight:var(--n-font-weight);font-feature-settings:var(--n-font-features-reduced);padding:4px 6px;text-align:center;min-inline-size:20px;position:absolute;margin-block-start:-2px;margin-inline-start:calc(var(--n-space-s)/ 1.5);font-size:var(--n-font-size-xs);display:inline-block}`;let f=class extends(h(i)){constructor(){super(...arguments),this.subnavSlot=new v(this,"subnav"),this.direction=new l(this),this.active=!1,this.open=!1}get hasSubNav(){return this.subnavSlot.hasContent}connectedCallback(){super.connectedCallback(),this.querySelector("nord-nav-item[active]")&&(this.open=!0)}render(){const e=t`${this.icon?t`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:o}<div class="n-nav-content"><span class="n-nav-label"><slot></slot></span>${this.badge?t`<span class="n-nav-badge">${this.badge}</span>`:o}</div>`;let n;return n=this.subnavSlot.hasContent?this.renderToggle(e):this.href?this.renderLink(e):this.renderButton(e),t`<div role="listitem">${n}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLink(e){return t`<a class="n-nav-item" ${c(this.focusableRef)} aria-current="${d(this.active,"page")}" href="${this.href||""}">${e}</a>`}renderToggle(e){return t`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${c(this.focusableRef)}>${e}<nord-icon size="xxs" class="${s({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(e){return t`<button class="n-nav-item" ${c(this.focusableRef)}>${e}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new p("toggle"))}};f.styles=m,n([r({type:Boolean,reflect:!0})],f.prototype,"active",void 0),n([r()],f.prototype,"icon",void 0),n([r()],f.prototype,"href",void 0),n([r()],f.prototype,"badge",void 0),n([r({type:Boolean})],f.prototype,"open",void 0),f=n([a("nord-nav-item")],f);var b=f;export{b as default};
 //# sourceMappingURL=NavItem.js.map

package/lib/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport style from \"./NavItem.css\"\n\n/**\n * Navigation item populates sidebar navigation with links.\n * Every item should be placed inside a navigation group.\n *\n * @status ready\n * @category navigation\n * @slot - The default slot used for the nav item's text.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n */\n@customElement(\"nord-nav-item\")\nexport default class NavItem extends FocusableMixin(LitElement) {\n  static styles = style\n\n  private subnavSlot = new SlotController(this, \"subnav\")\n  private direction = new DirectionController(this)\n\n  /**\n   * Used for indicating the current page. This gives a prominent background to the nav item,\n   * and marks the item as the current page for assistive technology.\n   */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /**\n   * The name of an icon from Nordicons to display for the nav item.\n   */\n  @property() icon?: string\n\n  /**\n   * The url the nav item should link to.\n   * Note: this is not used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property() href?: string\n\n  /**\n   * Allows you to add a notification badge with a number next to the nav item.\n   */\n  @property() badge?: string\n\n  /**\n   * When the nav items contains a subnav, controls whether the section is expanded or not.\n   * Note: this is only used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ type: Boolean }) open = false\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    // in cases where there is nested nav, and one of the items is active\n    // we should auto-open the nav item for developer convenience\n    if (this.querySelector(`nord-nav-item[active]`)) {\n      this.open = true\n    }\n  }\n\n  render() {\n    const innards = html`\n      ${this.icon ? html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>` : nothing}\n      <div class=\"n-nav-content\">\n        <span class=\"n-nav-label\"><slot></slot></span>\n        ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n      </div>\n    `\n    let element: TemplateResult\n\n    if (this.subnavSlot.hasContent) {\n      element = this.renderToggle(innards)\n    } else if (this.href) {\n      element = this.renderLink(innards)\n    } else {\n      element = this.renderButton(innards)\n    }\n\n    return html`\n      <div role=\"listitem\">\n        ${element}\n        <slot name=${this.subnavSlot.slotName} ?hidden=${!this.open}></slot>\n      </div>\n    `\n  }\n\n  private renderLink(innards: TemplateResult) {\n    return html`\n      <a class=\"n-nav-item\" ${ref(this.focusableRef)} aria-current=${cond(this.active, \"page\")} href=${this.href || \"\"}>\n        ${innards}\n      </a>\n    `\n  }\n\n  private renderToggle(innards: TemplateResult) {\n    return html`\n      <button\n        class=\"n-nav-item\"\n        @click=${this.toggleOpen}\n        aria-expanded=${this.open ? \"true\" : \"false\"}\n        ${ref(this.focusableRef)}\n      >\n        ${innards}\n\n        <nord-icon\n          size=\"xxs\"\n          class=${classMap({ \"n-toggle-icon\": true, \"n-rtl\": this.direction.isRTL })}\n          name=\"arrow-expand-right-small\"\n        ></nord-icon>\n      </button>\n    `\n  }\n\n  private renderButton(innards: TemplateResult) {\n    return html`<button class=\"n-nav-item\" ${ref(this.focusableRef)}>${innards}</button>`\n  }\n\n  private toggleOpen() {\n    this.open = !this.open\n    this.dispatchEvent(new NordEvent(\"toggle\"))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-item\": NavItem\n  }\n}\n"],"names":["NavItem","FocusableMixin","LitElement","constructor","this","subnavSlot","SlotController","direction","DirectionController","active","open","connectedCallback","super","querySelector","render","innards","html","icon","nothing","badge","element","hasContent","renderToggle","href","renderLink","renderButton","slotName","ref","focusableRef","cond","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","styles","style","__decorate","property","type","Boolean","reflect","prototype","customElement"],"mappings":"u/FAuBA,IAAqBA,EAArB,cAAqCC,EAAeC,IAApDC,kCAGUC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,UAAY,IAAIC,EAAoBJ,MAMAA,KAAMK,QAAG,EAsBxBL,KAAIM,MAAG,CAyErC,CAvECC,oBACEC,MAAMD,oBAIFP,KAAKS,cAAc,2BACrBT,KAAKM,MAAO,EAEf,CAEDI,SACE,MAAMC,EAAUC,CAAI,GAChBZ,KAAKa,KAAOD,CAAI,uCAAsCZ,KAAKa,8BAA+BC,6EAGxFd,KAAKe,MAAQH,CAAI,6BAA6BZ,KAAKe,eAAiBD,UAG1E,IAAIE,EAUJ,OAPEA,EADEhB,KAAKC,WAAWgB,WACRjB,KAAKkB,aAAaP,GACnBX,KAAKmB,KACJnB,KAAKoB,WAAWT,GAEhBX,KAAKqB,aAAaV,GAGvBC,CAAI,wBAELI,gBACWhB,KAAKC,WAAWqB,uBAAqBtB,KAAKM,qBAG5D,CAEOc,WAAWT,GACjB,OAAOC,CAAI,yBACeW,EAAIvB,KAAKwB,+BAA8BC,EAAKzB,KAAKK,OAAQ,kBAAgBL,KAAKmB,MAAQ,OAC1GR,OAGP,CAEOO,aAAaP,GACnB,OAAOC,CAAI,sCAGEZ,KAAK0B,8BACE1B,KAAKM,KAAO,OAAS,YACnCiB,EAAIvB,KAAKwB,iBAETb,iCAIQgB,EAAS,CAAE,iBAAiB,EAAM,QAAS3B,KAAKG,UAAUyB,gEAKzE,CAEOP,aAAaV,GACnB,OAAOC,CAAI,8BAA8BW,EAAIvB,KAAKwB,iBAAiBb,YACpE,CAEOe,aACN1B,KAAKM,MAAQN,KAAKM,KAClBN,KAAK6B,cAAc,IAAIC,EAAU,UAClC,GAvGMlC,EAAMmC,OAAGC,EAS4BC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAsBzC,EAAA0C,UAAA,cAAA,GAK9CL,EAAA,CAAXC,KAAwBtC,EAAA0C,UAAA,YAAA,GAMbL,EAAA,CAAXC,KAAwBtC,EAAA0C,UAAA,YAAA,GAKbL,EAAA,CAAXC,KAAyBtC,EAAA0C,UAAA,aAAA,GAMGL,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAuBxC,EAAA0C,UAAA,YAAA,GAhCtB1C,EAAOqC,EAAA,CAD3BM,EAAc,kBACM3C,SAAAA"}
+{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport style from \"./NavItem.css\"\n\n/**\n * Navigation item populates sidebar navigation with links.\n * Every item should be placed inside a navigation group.\n *\n * @status ready\n * @category navigation\n * @slot - The default slot used for the nav item's text.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n */\n@customElement(\"nord-nav-item\")\nexport default class NavItem extends FocusableMixin(LitElement) {\n  static styles = style\n\n  private subnavSlot = new SlotController(this, \"subnav\")\n  private direction = new DirectionController(this)\n\n  /**\n   * Used for indicating the current page. This gives a prominent background to the nav item,\n   * and marks the item as the current page for assistive technology.\n   */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /**\n   * The name of an icon from Nordicons to display for the nav item.\n   */\n  @property() icon?: string\n\n  /**\n   * The url the nav item should link to.\n   * Note: this is not used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property() href?: string\n\n  /**\n   * Allows you to add a notification badge with a number next to the nav item.\n   */\n  @property() badge?: string\n\n  /**\n   * When the nav items contains a subnav, controls whether the section is expanded or not.\n   * Note: this is only used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ type: Boolean }) open = false\n\n  /**\n   * @internal\n   */\n  get hasSubNav() {\n    return this.subnavSlot.hasContent\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    // in cases where there is nested nav, and one of the items is active\n    // we should auto-open the nav item for developer convenience\n    if (this.querySelector(`nord-nav-item[active]`)) {\n      this.open = true\n    }\n  }\n\n  render() {\n    const innards = html`\n      ${this.icon ? html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>` : nothing}\n      <div class=\"n-nav-content\">\n        <span class=\"n-nav-label\"><slot></slot></span>\n        ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n      </div>\n    `\n    let element: TemplateResult\n\n    if (this.subnavSlot.hasContent) {\n      element = this.renderToggle(innards)\n    } else if (this.href) {\n      element = this.renderLink(innards)\n    } else {\n      element = this.renderButton(innards)\n    }\n\n    return html`\n      <div role=\"listitem\">\n        ${element}\n        <slot name=${this.subnavSlot.slotName} ?hidden=${!this.open}></slot>\n      </div>\n    `\n  }\n\n  private renderLink(innards: TemplateResult) {\n    return html`\n      <a class=\"n-nav-item\" ${ref(this.focusableRef)} aria-current=${cond(this.active, \"page\")} href=${this.href || \"\"}>\n        ${innards}\n      </a>\n    `\n  }\n\n  private renderToggle(innards: TemplateResult) {\n    return html`\n      <button\n        class=\"n-nav-item\"\n        @click=${this.toggleOpen}\n        aria-expanded=${this.open ? \"true\" : \"false\"}\n        ${ref(this.focusableRef)}\n      >\n        ${innards}\n\n        <nord-icon\n          size=\"xxs\"\n          class=${classMap({ \"n-toggle-icon\": true, \"n-rtl\": this.direction.isRTL })}\n          name=\"arrow-expand-right-small\"\n        ></nord-icon>\n      </button>\n    `\n  }\n\n  private renderButton(innards: TemplateResult) {\n    return html`<button class=\"n-nav-item\" ${ref(this.focusableRef)}>${innards}</button>`\n  }\n\n  private toggleOpen() {\n    this.open = !this.open\n    this.dispatchEvent(new NordEvent(\"toggle\"))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-item\": NavItem\n  }\n}\n"],"names":["NavItem","FocusableMixin","LitElement","constructor","this","subnavSlot","SlotController","direction","DirectionController","active","open","hasSubNav","hasContent","connectedCallback","super","querySelector","render","innards","html","icon","nothing","badge","element","renderToggle","href","renderLink","renderButton","slotName","ref","focusableRef","cond","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","styles","style","__decorate","property","type","Boolean","reflect","prototype","customElement"],"mappings":"u/FAuBA,IAAqBA,EAArB,cAAqCC,EAAeC,IAApDC,kCAGUC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,UAAY,IAAIC,EAAoBJ,MAMAA,KAAMK,QAAG,EAsBxBL,KAAIM,MAAG,CAgFrC,CA3EKC,gBACF,OAAOP,KAAKC,WAAWO,UACxB,CAEDC,oBACEC,MAAMD,oBAIFT,KAAKW,cAAc,2BACrBX,KAAKM,MAAO,EAEf,CAEDM,SACE,MAAMC,EAAUC,CAAI,GAChBd,KAAKe,KAAOD,CAAI,uCAAsCd,KAAKe,8BAA+BC,6EAGxFhB,KAAKiB,MAAQH,CAAI,6BAA6Bd,KAAKiB,eAAiBD,UAG1E,IAAIE,EAUJ,OAPEA,EADElB,KAAKC,WAAWO,WACRR,KAAKmB,aAAaN,GACnBb,KAAKoB,KACJpB,KAAKqB,WAAWR,GAEhBb,KAAKsB,aAAaT,GAGvBC,CAAI,wBAELI,gBACWlB,KAAKC,WAAWsB,uBAAqBvB,KAAKM,qBAG5D,CAEOe,WAAWR,GACjB,OAAOC,CAAI,yBACeU,EAAIxB,KAAKyB,+BAA8BC,EAAK1B,KAAKK,OAAQ,kBAAgBL,KAAKoB,MAAQ,OAC1GP,OAGP,CAEOM,aAAaN,GACnB,OAAOC,CAAI,sCAGEd,KAAK2B,8BACE3B,KAAKM,KAAO,OAAS,YACnCkB,EAAIxB,KAAKyB,iBAETZ,iCAIQe,EAAS,CAAE,iBAAiB,EAAM,QAAS5B,KAAKG,UAAU0B,gEAKzE,CAEOP,aAAaT,GACnB,OAAOC,CAAI,8BAA8BU,EAAIxB,KAAKyB,iBAAiBZ,YACpE,CAEOc,aACN3B,KAAKM,MAAQN,KAAKM,KAClBN,KAAK8B,cAAc,IAAIC,EAAU,UAClC,GA9GMnC,EAAMoC,OAAGC,EAS4BC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAsB1C,EAAA2C,UAAA,cAAA,GAK9CL,EAAA,CAAXC,KAAwBvC,EAAA2C,UAAA,YAAA,GAMbL,EAAA,CAAXC,KAAwBvC,EAAA2C,UAAA,YAAA,GAKbL,EAAA,CAAXC,KAAyBvC,EAAA2C,UAAA,aAAA,GAMGL,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAuBzC,EAAA2C,UAAA,YAAA,GAhCtB3C,EAAOsC,EAAA,CAD3BM,EAAc,kBACM5C,SAAAA"}

package/lib/NavToggle.js

@@ -1,2 +1,2 @@
-import{i as o,_ as i,y as t,e as n,s as r}from"./query-assigned-elements-cf502539.js";import{n as e}from"./ref-c44e9f3c.js";import{o as s}from"./class-map-21152cee.js";import{LocalizeController as a}from"./LocalizeController.js";import{D as l}from"./DirectionController-8b298382.js";import{F as c}from"./FocusableMixin-32631bff.js";import"./Button.js";import m from"./Icon.js";import"./VisuallyHidden.js";import{s as d}from"./Component-449e40fb.js";import"./directive-de55b00a.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"./property-03f59dce.js";import"./EventController-d99ebeef.js";import"./LightDomController-052f446a.js";import"./cond-2da54107.js";import"./Spinner.js";import"./if-defined-720964c0.js";import"./InputMixin-7fa755e1.js";import"./SlotController-d733c575.js";import"./state-70f38ceb.js";import"./observe-a9c6dfb6.js";var p=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 21h126M7 70h126M7 119h126" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',title:"navigation-toggle",tags:"nordicon navigation hamburger menu toggle navigation three lines"});const g="navigation-toggle-lock";var v=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="14"><path d="m70 133 60.956-58.044a7 7 0 0 0 0-9.912L70 7"/><path d="m7 133 60.956-58.044a7 7 0 0 0 0-9.912L7 7"/></g></svg>',title:g,tags:"nordicon navigation hamburger menu toggle navigation arrow right double lock triangle chevron"});const f=o`:host{display:inline-flex}nord-icon{display:block}nord-icon[name=navigation-toggle-lock]{display:none}.is-rtl nord-icon[name=navigation-toggle-lock]{transform:rotate(180deg)}@media (min-width:768px){:host(:is(:hover,:focus-within)) nord-icon[name=navigation-toggle-lock]{display:block}:host(:is(:hover,:focus-within)) nord-icon[name=navigation-toggle]{display:none}}`;m.registerIcon(p),m.registerIcon(v);let h=class extends(c(r)){constructor(){super(...arguments),this.direction=new l(this),this.localization=new a(this)}render(){return t`<nord-button variant="plain" size="s" ${e(this.focusableRef)} class="${s({"is-rtl":this.direction.isRTL})}"><nord-visually-hidden>${this.localization.term("label")}</nord-visually-hidden><nord-icon size="m" color="var(--n-color-icon)" name="${"navigation-toggle"}" class="nav-unlock"></nord-icon><nord-icon size="m" color="var(--n-color-text)" name="${g}" class="nav-lock"></nord-icon></nord-button>`}};h.styles=[d,f],h=i([n("nord-nav-toggle")],h);var j=h;export{j as default};
+import{i as o,_ as i,y as t,e as n,s as r}from"./query-assigned-elements-cf502539.js";import{n as e}from"./ref-c44e9f3c.js";import{o as s}from"./class-map-21152cee.js";import{LocalizeController as a}from"./LocalizeController.js";import{D as l}from"./DirectionController-8b298382.js";import{F as c}from"./FocusableMixin-32631bff.js";import"./Button.js";import m from"./Icon.js";import"./VisuallyHidden.js";import{s as d}from"./Component-449e40fb.js";import"./directive-de55b00a.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"./property-03f59dce.js";import"./EventController-d99ebeef.js";import"./LightDomController-052f446a.js";import"./cond-2da54107.js";import"./Spinner.js";import"./if-defined-720964c0.js";import"./InputMixin-7fa755e1.js";import"./SlotController-d733c575.js";import"./state-70f38ceb.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";var p=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 21h126M7 70h126M7 119h126" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',title:"navigation-toggle",tags:"nordicon navigation hamburger menu toggle navigation three lines"});const g="navigation-toggle-lock";var v=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="14"><path d="m70 133 60.956-58.044a7 7 0 0 0 0-9.912L70 7"/><path d="m7 133 60.956-58.044a7 7 0 0 0 0-9.912L7 7"/></g></svg>',title:g,tags:"nordicon navigation hamburger menu toggle navigation arrow right double lock triangle chevron"});const f=o`:host{display:inline-flex}nord-icon{display:block}nord-icon[name=navigation-toggle-lock]{display:none}.is-rtl nord-icon[name=navigation-toggle-lock]{transform:rotate(180deg)}@media (min-width:768px){:host(:is(:hover,:focus-within)) nord-icon[name=navigation-toggle-lock]{display:block}:host(:is(:hover,:focus-within)) nord-icon[name=navigation-toggle]{display:none}}`;m.registerIcon(p),m.registerIcon(v);let j=class extends(c(r)){constructor(){super(...arguments),this.direction=new l(this),this.localization=new a(this)}render(){return t`<nord-button variant="plain" size="s" ${e(this.focusableRef)} class="${s({"is-rtl":this.direction.isRTL})}"><nord-visually-hidden>${this.localization.term("label")}</nord-visually-hidden><nord-icon size="m" color="var(--n-color-icon)" name="${"navigation-toggle"}" class="nav-unlock"></nord-icon><nord-icon size="m" color="var(--n-color-text)" name="${g}" class="nav-lock"></nord-icon></nord-button>`}};j.styles=[d,f],j=i([n("nord-nav-toggle")],j);var h=j;export{h as default};
 //# sourceMappingURL=NavToggle.js.map

package/lib/NavToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavToggle.js","sources":["../../icons/lib/assets/navigation-toggle.js","../../icons/lib/assets/navigation-toggle-lock.js","../src/nav-toggle/NavToggle.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 21h126M7 70h126M7 119h126\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"navigation-toggle\"\nexport const tags = \"nordicon navigation hamburger menu toggle navigation three lines\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"14\"><path d=\"m70 133 60.956-58.044a7 7 0 0 0 0-9.912L70 7\"/><path d=\"m7 133 60.956-58.044a7 7 0 0 0 0-9.912L7 7\"/></g></svg>'\nexport const title = \"navigation-toggle-lock\"\nexport const tags = \"nordicon navigation hamburger menu toggle navigation arrow right double lock triangle chevron\"\n","import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport * as unlockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle.js\"\nimport * as lockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle-lock.js\"\n\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./NavToggle.css\"\n\nIcon.registerIcon(unlockIcon)\nIcon.registerIcon(lockIcon)\n\n/**\n * Nav toggle is meant for hiding and showing the primary navigation.\n * This component is used internally in the Layout component, but can also be\n * used separate to further customize the behaviour.\n *\n * @status new\n * @category action\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\n  render() {\n    return html`\n      <nord-button\n        variant=\"plain\"\n        size=\"s\"\n        ${ref(this.focusableRef)}\n        class=${classMap({ \"is-rtl\": this.direction.isRTL })}\n      >\n        <nord-visually-hidden>${this.localization.term(\"label\")}</nord-visually-hidden>\n        <nord-icon size=\"m\" color=\"var(--n-color-icon)\" name=${unlockIcon.title} class=\"nav-unlock\"></nord-icon>\n        <nord-icon size=\"m\" color=\"var(--n-color-text)\" name=${lockIcon.title} class=\"nav-lock\"></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","render","html","ref","focusableRef","classMap","isRTL","term","lockIcon.title","styles","componentStyle","style","__decorate","customElement"],"mappings":"yhCAAe,wNACM,yBACD,qECDb,MAAMA,EAAQ,qEADN,4SAEK,4dCgBpBC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAWlB,IAAqBC,EAArB,cAAuCC,EAAeC,IAAtDC,kCAGUC,KAAAC,UAAY,IAAIC,EAAoBF,MACpCA,KAAAG,aAAe,IAAIC,EAAsCJ,KAgBlE,CAdCK,SACE,OAAOC,CAAI,yCAILC,EAAIP,KAAKQ,wBACHC,EAAS,CAAE,SAAUT,KAAKC,UAAUS,kCAEpBV,KAAKG,aAAaQ,KAAK,wFF3ClC,6GE6C0CC,gDAG5D,GAlBMhB,EAAAiB,OAAS,CAACC,EAAgBC,GADdnB,EAASoB,EAAA,CAD7BC,EAAc,oBACMrB,SAAAA"}
+{"version":3,"file":"NavToggle.js","sources":["../../icons/lib/assets/navigation-toggle.js","../../icons/lib/assets/navigation-toggle-lock.js","../src/nav-toggle/NavToggle.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 21h126M7 70h126M7 119h126\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"navigation-toggle\"\nexport const tags = \"nordicon navigation hamburger menu toggle navigation three lines\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"14\"><path d=\"m70 133 60.956-58.044a7 7 0 0 0 0-9.912L70 7\"/><path d=\"m7 133 60.956-58.044a7 7 0 0 0 0-9.912L7 7\"/></g></svg>'\nexport const title = \"navigation-toggle-lock\"\nexport const tags = \"nordicon navigation hamburger menu toggle navigation arrow right double lock triangle chevron\"\n","import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport * as unlockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle.js\"\nimport * as lockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle-lock.js\"\n\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./NavToggle.css\"\n\nIcon.registerIcon(unlockIcon)\nIcon.registerIcon(lockIcon)\n\n/**\n * Nav toggle is meant for hiding and showing the primary navigation.\n * This component is used internally in the Layout component, but can also be\n * used separate to further customize the behaviour.\n *\n * @status new\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\n  render() {\n    return html`\n      <nord-button\n        variant=\"plain\"\n        size=\"s\"\n        ${ref(this.focusableRef)}\n        class=${classMap({ \"is-rtl\": this.direction.isRTL })}\n      >\n        <nord-visually-hidden>${this.localization.term(\"label\")}</nord-visually-hidden>\n        <nord-icon size=\"m\" color=\"var(--n-color-icon)\" name=${unlockIcon.title} class=\"nav-unlock\"></nord-icon>\n        <nord-icon size=\"m\" color=\"var(--n-color-text)\" name=${lockIcon.title} class=\"nav-lock\"></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","render","html","ref","focusableRef","classMap","isRTL","term","lockIcon.title","styles","componentStyle","style","__decorate","customElement"],"mappings":"kjCAAe,wNACM,yBACD,qECDb,MAAMA,EAAQ,qEADN,4SAEK,4dCgBpBC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAalB,IAAqBC,EAArB,cAAuCC,EAAeC,IAAtDC,kCAGUC,KAAAC,UAAY,IAAIC,EAAoBF,MACpCA,KAAAG,aAAe,IAAIC,EAAsCJ,KAgBlE,CAdCK,SACE,OAAOC,CAAI,yCAILC,EAAIP,KAAKQ,wBACHC,EAAS,CAAE,SAAUT,KAAKC,UAAUS,kCAEpBV,KAAKG,aAAaQ,KAAK,wFF7ClC,6GE+C0CC,gDAG5D,GAlBMhB,EAAAiB,OAAS,CAACC,EAAgBC,GADdnB,EAASoB,EAAA,CAD7BC,EAAc,oBACMrB,SAAAA"}