@nordhealth/components 3.1.1 → 3.1.2

package/lib/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../node_modules/lit-html/directives/unsafe-html.js","../src/icon/Icon.ts"],"sourcesContent":["import{nothing as t,noChange as i}from\"../lit-html.js\";import{Directive as r,PartType as s,directive as n}from\"../directive.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */class e extends r{constructor(i){if(super(i),this.et=t,i.type!==s.CHILD)throw Error(this.constructor.directiveName+\"() can only be used in child bindings\")}render(r){if(r===t||null==r)return this.ft=void 0,this.et=r;if(r===i)return r;if(\"string\"!=typeof r)throw Error(this.constructor.directiveName+\"() called with a non-string value\");if(r===this.et)return this.ft;this.et=r;const s=[r];return s.raw=s,this.ft={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName=\"unsafeHTML\",e.resultType=1;const o=n(e);export{e as UnsafeHTMLDirective,o as unsafeHTML};\n//# sourceMappingURL=unsafe-html.js.map\n","import { html, LitElement } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { IconManager, IconResolver } from \"./IconManager.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Icon.css\"\nimport { observe } from \"../common/decorators/observe.js\"\n\n/**\n * Icons are used to provide additional meaning or in places where text label doesn’t fit.\n * Icon component allows you to display an icon from the Nordicons library.\n *\n * @status ready\n * @category image\n * @slot - The default slot used for placing a custom SVG icon.\n */\n@customElement(\"nord-icon\")\nexport default class Icon extends LitElement {\n  static styles = [componentStyle, style]\n\n  private static manager = new IconManager()\n\n  /**\n   * Register a custom icon resolver, which accepts the icon name as an parameter, and returns an SVG string.\n   * Can return a string synchronously, or a promise of a string.\n   * By default, will load icons from the Nord CDN.\n   * @param resolver The resolver function to register.\n   */\n  static registerResolver(resolver: IconResolver) {\n    this.manager.resolver = resolver\n  }\n\n  /**\n   * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n   * @param icon An object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\n   * This is intended to be used in cases where you import an icon's entire ES module and register it directly.\n   */\n  static registerIcon(icon: { title: string; default: string }): void\n\n  /**\n   * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n   * @param name The name of the icon to be registered.\n   * @param icon The SVG string for the icon.\n   */\n  static registerIcon(name: string, icon: string): void\n\n  /**\n   * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n   * @param iconOrName The name of the icon to be registered or an object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\n   * @param icon The SVG string for the icon.\n   */\n  static registerIcon(iconOrName: string | { title: string; default: string }, icon?: string) {\n    return this.manager.registerIcon(iconOrName, icon)\n  }\n\n  /**\n   * The name of the icon to display, as defined by [nordicons](/nordicons/).\n   */\n  @property({ reflect: true }) name: string = \"\"\n\n  /**\n   * The size of the icon.\n   * @default \"m\"\n   */\n  @property({ reflect: true }) size?: \"xxs\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\"\n\n  /**\n   * The color of the icon.\n   * Can accept any valid CSS color value, including custom properties.\n   */\n  @property({ reflect: true }) color?: string\n\n  /**\n   * An accessible label for the icon.\n   * If no label is supplied, the icon is hidden from assistive technology.\n   */\n  @property({ reflect: true }) label?: string\n\n  @state() private svg: string = \"\"\n\n  render() {\n    // if a label is supplied, we give the div a role of img.\n    // without this we could not use aria-label, since it is only valid on elements of certain roles.\n    // we always hide the inner svg, since the svg does not have any text/title/label itself.\n    return html`\n      <div\n        role=${cond(this.label, \"img\")}\n        style=${cond(this.color, `color:${this.color}`)}\n        aria-label=${ifDefined(this.label)}\n      >\n        <slot aria-hidden=\"true\"></slot>\n        <div aria-hidden=\"true\">${unsafeHTML(this.svg)}</div>\n      </div>\n    `\n  }\n\n  @observe(\"name\")\n  protected handleNameChange() {\n    if (!this.name) {\n      this.svg = \"\"\n      return\n    }\n\n    Icon.manager.resolve(this.name, svg => {\n      this.svg = svg\n    })\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-icon\": Icon\n  }\n}\n"],"names":["e","r","constructor","i","super","this","et","t","type","s","CHILD","Error","directiveName","render","ft","raw","_$litType$","resultType","strings","values","o","n","Icon","Icon_1","LitElement","name","svg","static","resolver","manager","iconOrName","icon","registerIcon","html","cond","label","color","ifDefined","unsafeHTML","handleNameChange","resolve","styles","componentStyle","style","IconManager","__decorate","property","reflect","prototype","state","observe","customElement"],"mappings":";;;;;GAKG,MAAMA,UAAUC,EAAEC,YAAYC,GAAG,GAAGC,MAAMD,GAAGE,KAAKC,GAAGC,EAAEJ,EAAEK,OAAOC,EAAEC,MAAM,MAAMC,MAAMN,KAAKH,YAAYU,cAAc,wCAAwC,CAACC,OAAOZ,GAAG,GAAGA,IAAIM,GAAG,MAAMN,EAAE,OAAOI,KAAKS,QAAG,EAAOT,KAAKC,GAAGL,EAAE,GAAGA,IAAIE,EAAE,OAAOF,EAAE,GAAG,iBAAiBA,EAAE,MAAMU,MAAMN,KAAKH,YAAYU,cAAc,qCAAqC,GAAGX,IAAII,KAAKC,GAAG,OAAOD,KAAKS,GAAGT,KAAKC,GAAGL,EAAE,MAAMQ,EAAE,CAACR,GAAG,OAAOQ,EAAEM,IAAIN,EAAEJ,KAAKS,GAAG,CAACE,WAAWX,KAAKH,YAAYe,WAAWC,QAAQT,EAAEU,OAAO,GAAG,EAAEnB,EAAEY,cAAc,aAAaZ,EAAEiB,WAAW,EAAE,MAAMG,EAAEC,EAAErB,iiBCelhB,IAAqBsB,EAAIC,EAAzB,cAAkCC,EAAlCtB,kCAyC+BG,KAAIoB,KAAW,GAoB3BpB,KAAGqB,IAAW,EA6BhC,CA/ECC,wBAAwBC,GACtBvB,KAAKwB,QAAQD,SAAWA,CACzB,CAqBDD,oBAAoBG,EAAyDC,GAC3E,OAAO1B,KAAKwB,QAAQG,aAAaF,EAAYC,EAC9C,CA2BDlB,SAIE,OAAOoB,CAAI,cAEAC,EAAK7B,KAAK8B,MAAO,kBAChBD,EAAK7B,KAAK+B,MAAO,SAAS/B,KAAK+B,yBAC1BC,EAAUhC,KAAK8B,mEAGFG,EAAWjC,KAAKqB,kBAG/C,CAGSa,mBACHlC,KAAKoB,KAKVF,EAAKM,QAAQW,QAAQnC,KAAKoB,MAAMC,IAC9BrB,KAAKqB,IAAMA,CAAG,IALdrB,KAAKqB,IAAM,EAOd,GAxFMJ,EAAAmB,OAAS,CAACC,EAAgBC,GAElBrB,EAAAO,QAAU,IAAIe,EAsCAC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyBzB,EAAA0B,UAAA,YAAA,GAMjBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA4DzB,EAAA0B,UAAA,YAAA,GAMpDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsBzB,EAAA0B,UAAA,aAAA,GAMdH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsBzB,EAAA0B,UAAA,aAAA,GAE1BH,EAAA,CAAhBI,KAAgC3B,EAAA0B,UAAA,WAAA,GAmBvBH,EAAA,CADTK,EAAQ,SAUR5B,EAAA0B,UAAA,mBAAA,MAzFkB1B,EAAIC,EAAAsB,EAAA,CADxBM,EAAc,cACM7B,SAAAA"}
+{"version":3,"file":"Icon.js","sources":["../node_modules/lit-html/directives/unsafe-html.js","../src/icon/Icon.ts"],"sourcesContent":["import{nothing as t,noChange as i}from\"../lit-html.js\";import{Directive as r,PartType as s,directive as n}from\"../directive.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */class e extends r{constructor(i){if(super(i),this.et=t,i.type!==s.CHILD)throw Error(this.constructor.directiveName+\"() can only be used in child bindings\")}render(r){if(r===t||null==r)return this.ft=void 0,this.et=r;if(r===i)return r;if(\"string\"!=typeof r)throw Error(this.constructor.directiveName+\"() called with a non-string value\");if(r===this.et)return this.ft;this.et=r;const s=[r];return s.raw=s,this.ft={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName=\"unsafeHTML\",e.resultType=1;const o=n(e);export{e as UnsafeHTMLDirective,o as unsafeHTML};\n//# sourceMappingURL=unsafe-html.js.map\n","import { html, LitElement } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { IconManager, IconResolver } from \"./IconManager.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Icon.css\"\nimport { observe } from \"../common/decorators/observe.js\"\n\n/**\n * Icons are used to provide additional meaning or in places where text label doesn’t fit.\n * Icon component allows you to display an icon from the Nordicons library.\n *\n * @status ready\n * @category image\n * @slot - The default slot used for placing a custom SVG icon.\n */\n@customElement(\"nord-icon\")\nexport default class Icon extends LitElement {\n  static styles = [componentStyle, style]\n\n  private static manager = new IconManager()\n\n  /**\n   * Register a custom icon resolver, which accepts the icon name as an parameter, and returns an SVG string.\n   * Can return a string synchronously, or a promise of a string.\n   * By default, will load icons from the Nord CDN.\n   * @param resolver The resolver function to register.\n   */\n  static registerResolver(resolver: IconResolver) {\n    this.manager.resolver = resolver\n  }\n\n  /**\n   * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n   * @param icon An object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\n   * This is intended to be used in cases where you import an icon's entire ES module and register it directly.\n   */\n  static registerIcon(icon: { title: string; default: string }): void\n\n  /**\n   * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n   * @param name The name of the icon to be registered.\n   * @param icon The SVG string for the icon.\n   */\n  static registerIcon(name: string, icon: string): void\n\n  /**\n   * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n   * @param iconOrName The name of the icon to be registered or an object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\n   * @param icon The SVG string for the icon.\n   */\n  static registerIcon(iconOrName: string | { title: string; default: string }, icon?: string) {\n    return this.manager.registerIcon(iconOrName, icon)\n  }\n\n  /**\n   * The name of the icon to display, as defined by [nordicons](/nordicons/).\n   */\n  @property({ reflect: true }) name: string = \"\"\n\n  /**\n   * The size of the icon.\n   * @default \"m\"\n   */\n  @property({ reflect: true }) size?: \"xxs\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\"\n\n  /**\n   * The color of the icon.\n   * Can accept any valid CSS color value, including custom properties.\n   */\n  @property({ reflect: true }) color?: string\n\n  /**\n   * An accessible label for the icon.\n   * If no label is supplied, the icon is hidden from assistive technology.\n   */\n  @property({ reflect: true }) label?: string\n\n  @state() private svg: string = \"\"\n\n  render() {\n    // if a label is supplied, we give the div a role of img.\n    // without this we could not use aria-label, since it is only valid on elements of certain roles.\n    // we always hide the inner svg, since the svg does not have any text/title/label itself.\n    return html`\n      <div\n        role=${cond(this.label, \"img\")}\n        style=${cond(this.color, `color:${this.color}`)}\n        aria-label=${ifDefined(this.label)}\n      >\n        <slot aria-hidden=\"true\"></slot>\n        <div aria-hidden=\"true\">${unsafeHTML(this.svg)}</div>\n      </div>\n    `\n  }\n\n  @observe(\"name\")\n  protected handleNameChange() {\n    if (!this.name) {\n      this.svg = \"\"\n      return\n    }\n\n    Icon.manager.resolve(this.name, svg => {\n      this.svg = svg\n    })\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-icon\": Icon\n  }\n}\n"],"names":["e","r","constructor","i","super","this","et","t","type","s","CHILD","Error","directiveName","render","ft","raw","_$litType$","resultType","strings","values","o","n","Icon","Icon_1","LitElement","name","svg","static","resolver","manager","iconOrName","icon","registerIcon","html","cond","label","color","ifDefined","unsafeHTML","handleNameChange","resolve","styles","componentStyle","style","IconManager","__decorate","property","reflect","prototype","state","observe","customElement"],"mappings":";;;;;GAKG,MAAMA,UAAUC,EAAEC,YAAYC,GAAG,GAAGC,MAAMD,GAAGE,KAAKC,GAAGC,EAAEJ,EAAEK,OAAOC,EAAEC,MAAM,MAAMC,MAAMN,KAAKH,YAAYU,cAAc,wCAAwC,CAACC,OAAOZ,GAAG,GAAGA,IAAIM,GAAG,MAAMN,EAAE,OAAOI,KAAKS,QAAG,EAAOT,KAAKC,GAAGL,EAAE,GAAGA,IAAIE,EAAE,OAAOF,EAAE,GAAG,iBAAiBA,EAAE,MAAMU,MAAMN,KAAKH,YAAYU,cAAc,qCAAqC,GAAGX,IAAII,KAAKC,GAAG,OAAOD,KAAKS,GAAGT,KAAKC,GAAGL,EAAE,MAAMQ,EAAE,CAACR,GAAG,OAAOQ,EAAEM,IAAIN,EAAEJ,KAAKS,GAAG,CAACE,WAAWX,KAAKH,YAAYe,WAAWC,QAAQT,EAAEU,OAAO,GAAG,EAAEnB,EAAEY,cAAc,aAAaZ,EAAEiB,WAAW,EAAE,MAAMG,EAAEC,EAAErB,iiBCengB,IAAMsB,EAAIC,EAAV,cAAmBC,EAAnBtB,kCAyCgBG,KAAIoB,KAAW,GAoB3BpB,KAAGqB,IAAW,EA6BhC,CA/ECC,wBAAwBC,GACtBvB,KAAKwB,QAAQD,SAAWA,CACzB,CAqBDD,oBAAoBG,EAAyDC,GAC3E,OAAO1B,KAAKwB,QAAQG,aAAaF,EAAYC,EAC9C,CA2BDlB,SAIE,OAAOoB,CAAI,cAEAC,EAAK7B,KAAK8B,MAAO,kBAChBD,EAAK7B,KAAK+B,MAAO,SAAS/B,KAAK+B,yBAC1BC,EAAUhC,KAAK8B,mEAGFG,EAAWjC,KAAKqB,kBAG/C,CAGSa,mBACHlC,KAAKoB,KAKVF,EAAKM,QAAQW,QAAQnC,KAAKoB,MAAMC,IAC9BrB,KAAKqB,IAAMA,CAAG,IALdrB,KAAKqB,IAAM,EAOd,GAxFMJ,EAAAmB,OAAS,CAACC,EAAgBC,GAElBrB,EAAAO,QAAU,IAAIe,EAsCAC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyBzB,EAAA0B,UAAA,YAAA,GAMjBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA4DzB,EAAA0B,UAAA,YAAA,GAMpDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsBzB,EAAA0B,UAAA,aAAA,GAMdH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsBzB,EAAA0B,UAAA,aAAA,GAE1BH,EAAA,CAAhBI,KAAgC3B,EAAA0B,UAAA,WAAA,GAmBvBH,EAAA,CADTK,EAAQ,SAUR5B,EAAA0B,UAAA,mBAAA,MAzFkB1B,EAAIC,EAAAsB,EAAA,CADxBM,EAAc,cACM7B,SAAAA"}

package/lib/Input.js

@@ -1,2 +1,2 @@
-import{i as t,x as n,A as e,_ as o,e as i,s as r}from"./query-assigned-elements-2f8275b7.js";import{e as s}from"./property-03f59dce.js";import{i as a}from"./query-2d22378e.js";import{l as d}from"./if-defined-10508457.js";import{o as l}from"./class-map-4a0dec4a.js";import{n as c}from"./ref-f75a30b7.js";import{o as p}from"./style-map-75ce20b3.js";import{F as u}from"./FocusableMixin-003e1094.js";import{F as m}from"./FormAssociatedMixin-895cf600.js";import{I as h}from"./InputMixin-e15dd8f7.js";import{R as b,s as v}from"./TextField-b455a6dd.js";import{A as f}from"./AutocompleteMixin-60503685.js";import{S as g}from"./SizeMixin-bc2098f4.js";import{s as w}from"./Component-253ecb24.js";import{s as y}from"./FormField-0783cb5a.js";import{D as z}from"./DirectionController-f35f5476.js";import{c as x}from"./cond-77258def.js";import j from"./Icon.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-d733c575.js";import"./events-d9666e88.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 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m16.03 14.61c1.23-1.54 1.97-3.49 1.97-5.61 0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.12 0 4.07-.74 5.61-1.97l3.97 3.97 1.41-1.41-3.97-3.97zm-7.03 1.39c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z" fill="currentColor"/></svg>',title:"navigation-search",tags:"nordicon navigation menu find search magnifying glass"});const $=t`.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;padding-inline-start:var(--_n-input-start-inline-size,var(--_n-input-padding-inline));padding-inline-end:var(--_n-input-end-inline-size,var(--_n-input-padding-inline))}slot[name=end],slot[name=start]{pointer-events:none;display:flex;align-items:center;color:var(--n-color-icon)}:host([disabled]) slot:is([name=start],[name=end]){color:var(--n-color-text-weakest)}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(*){font-size:var(--_n-input-font-size)}[name=start]::slotted(*),nord-icon{margin-inline-start:var(--_n-input-padding-inline)!important;margin-inline-end:calc(var(--_n-input-padding-inline)/ 2)!important}[name=end]::slotted(*){margin-inline-start:calc(var(--_n-input-padding-inline)/ 2)!important;margin-inline-end:var(--_n-input-padding-inline)!important}[name=start]::slotted(:is(nord-button, nord-dropdown)){margin-inline-start:0!important}[name=end]::slotted(:is(nord-button, nord-dropdown)){margin-inline-end:0!important}nord-icon{--_n-input-icon-color:var(--n-input-icon-color, var(--n-color-icon));color:var(--_n-input-icon-color)}::slotted(:is(nord-button:not([disabled]), nord-dropdown)){pointer-events:auto;position:relative}::slotted(nord-button:not([disabled],:focus)),::slotted(nord-dropdown:not(:focus-within)){--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-color:var(--n-color-text-weaker);-webkit-text-fill-color:var(--n-button-color);opacity:.8}.n-input-container:hover:not(:focus-within) ::slotted(:is(nord-button:not([disabled]),nord-dropdown)),.n-label-container:hover~.n-input-container:not(:focus-within) ::slotted(:is(nord-button:not([disabled]),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))}: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)}:host([type=unit]) :is(.n-input-container,.n-input){--_n-input-text-align:var(--n-input-text-align, end);font-family:var(--n-font-family-code)!important}`;class S{constructor(t,n){this.target=n,this.hadFirstUpdate=!1,t.addController(this),this.observer=new ResizeObserver((([n])=>{const[e]=n.borderBoxSize;this.borderBoxSize=e,t.requestUpdate()}))}get inlineSize(){var t;return null===(t=this.borderBoxSize)||void 0===t?void 0:t.inlineSize}get blockSize(){var t;return null===(t=this.borderBoxSize)||void 0===t?void 0:t.blockSize}hostUpdated(){this.hadFirstUpdate||(this.observer.observe(this.target()),this.hadFirstUpdate=!0)}hostConnected(){this.hadFirstUpdate&&this.observer.observe(this.target())}hostDisconnected(){this.observer.disconnect()}}j.registerIcon(_);const k=t=>t?`${t}px`:void 0;let F=class extends(g(m(f(b(h(u(r))))))){constructor(){super(...arguments),this.startObserver=new S(this,(()=>this.startSlot)),this.endObserver=new S(this,(()=>this.endSlot)),this.direction=new z(this),this.type="text",this.expand=!1,this.disallowPattern=void 0,this.handleInputChange=t=>{const n=t.target;this.disallowPattern&&function(t,n){const{value:e}=t,o=t.selectionStart,i=e.slice(0,o),r=e.slice(o,e.length),s=i.replace(n,""),a=s+r.replace(n,""),d=s.length;t.value=a,t.selectionStart=d,t.selectionEnd=d}(n,new RegExp(this.disallowPattern,"g")),this.handleInput(t)}}render(){var t;const o="number"===this.type;return n`${this.renderLabel()}<div class="${l({"n-input-container":!0,"is-rtl":"rtl"===this.direction.dir})}" style="${p({"--_n-input-start-inline-size":k(this.startObserver.inlineSize),"--_n-input-end-inline-size":k(this.endObserver.inlineSize)})}"><slot name="start">${"search"===this.type?n`<nord-icon name="navigation-search"></nord-icon>`:e}</slot><input ${c(this.focusableRef)} id="${this.inputId}" class="n-input" type="${o?"text":this.type}" inputmode="${x(o,"numeric")}" pattern="${x(o,"[0-9]*")}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" name="${d(this.name)}" .value="${null!==(t=this.value)&&void 0!==t?t:""}" placeholder="${d(this.placeholder)}" @input="${this.handleInputChange}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" aria-describedby="${d(this.getDescribedBy())}" aria-invalid="${d(this.getInvalid())}" spellcheck="false" autocomplete="${this.autocomplete}"><slot name="end"></slot></div>${this.renderError()}`}handleKeydown(t){const{form:n}=this;if("Enter"===t.key&&n){const t=function(t){let n=t.querySelector('button[type="submit"]');!n&&t.id&&(n=t.getRootNode().querySelector(`button[form=${t.id}]`));return n}(n);setTimeout((()=>null==t?void 0:t.click()),0)}}};F.styles=[w,y,v,$],o([a("slot[name='start']")],F.prototype,"startSlot",void 0),o([a("slot[name='end']")],F.prototype,"endSlot",void 0),o([s({reflect:!0})],F.prototype,"type",void 0),o([s({reflect:!0,type:Boolean})],F.prototype,"expand",void 0),o([s({reflect:!0,attribute:"disallow-pattern"})],F.prototype,"disallowPattern",void 0),F=o([i("nord-input")],F);var C=F;export{C as default};
+import{i as t,x as n,A as e,_ as o,e as i,s as r}from"./query-assigned-elements-822fe360.js";import{e as s}from"./property-03f59dce.js";import{i as a}from"./query-2d22378e.js";import{l as d}from"./if-defined-8a007930.js";import{o as l}from"./class-map-c0d8e1e5.js";import{n as c}from"./ref-6b46e5ea.js";import{o as p}from"./style-map-5b757428.js";import{F as u}from"./FocusableMixin-186c69a2.js";import{F as m}from"./FormAssociatedMixin-5fedde68.js";import{I as h}from"./InputMixin-d50cb41a.js";import{R as v,s as b}from"./TextField-3f901ec8.js";import{A as f}from"./AutocompleteMixin-a98ada34.js";import{S as g}from"./SizeMixin-f04ac402.js";import{s as w}from"./Component-1f694235.js";import{s as y}from"./FormField-3226fb17.js";import{D as z}from"./DirectionController-f35f5476.js";import{c as x}from"./cond-09498763.js";import j from"./Icon.js";import"./directive-de55b00a.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";import"./events-d9666e88.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 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m16.03 14.61c1.23-1.54 1.97-3.49 1.97-5.61 0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.12 0 4.07-.74 5.61-1.97l3.97 3.97 1.41-1.41-3.97-3.97zm-7.03 1.39c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z" fill="currentColor"/></svg>',title:"navigation-search",tags:"nordicon navigation menu find search magnifying glass"});const $=t`.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;padding-inline-start:var(--_n-input-start-inline-size,var(--_n-input-padding-inline));padding-inline-end:var(--_n-input-end-inline-size,var(--_n-input-padding-inline))}slot[name=end],slot[name=start]{pointer-events:none;display:flex;align-items:center;color:var(--n-color-icon)}:host([disabled]) slot:is([name=start],[name=end]){color:var(--n-color-text-weakest)}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(*){font-size:var(--_n-input-font-size)}[name=start]::slotted(*),nord-icon{margin-inline-start:var(--_n-input-padding-inline)!important;margin-inline-end:calc(var(--_n-input-padding-inline)/ 2)!important}[name=end]::slotted(*){margin-inline-start:calc(var(--_n-input-padding-inline)/ 2)!important;margin-inline-end:var(--_n-input-padding-inline)!important}[name=start]::slotted(:is(nord-button, nord-dropdown)){margin-inline-start:0!important}[name=end]::slotted(:is(nord-button, nord-dropdown)){margin-inline-end:0!important}nord-icon{--_n-input-icon-color:var(--n-input-icon-color, var(--n-color-icon));color:var(--_n-input-icon-color)}::slotted(:is(nord-button:not([disabled]), nord-dropdown)){pointer-events:auto;position:relative}::slotted(nord-button:not([disabled],:focus)),::slotted(nord-dropdown:not(:focus-within)){--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-color:var(--n-color-text-weaker);-webkit-text-fill-color:var(--n-button-color);opacity:.8}.n-input-container:hover:not(:focus-within) ::slotted(:is(nord-button:not([disabled]),nord-dropdown)),.n-label-container:hover~.n-input-container:not(:focus-within) ::slotted(:is(nord-button:not([disabled]),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))}: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)}:host([type=unit]) :is(.n-input-container,.n-input){--_n-input-text-align:var(--n-input-text-align, end);font-family:var(--n-font-family-code)!important}`;class S{constructor(t,n){this.target=n,this.hadFirstUpdate=!1,t.addController(this),this.observer=new ResizeObserver((([n])=>{const[e]=n.borderBoxSize;this.borderBoxSize=e,t.requestUpdate()}))}get inlineSize(){var t;return null===(t=this.borderBoxSize)||void 0===t?void 0:t.inlineSize}get blockSize(){var t;return null===(t=this.borderBoxSize)||void 0===t?void 0:t.blockSize}hostUpdated(){this.hadFirstUpdate||(this.observer.observe(this.target()),this.hadFirstUpdate=!0)}hostConnected(){this.hadFirstUpdate&&this.observer.observe(this.target())}hostDisconnected(){this.observer.disconnect()}}j.registerIcon(_);const k=t=>t?`${t}px`:void 0;let F=class extends(g(m(f(v(h(u(r))))))){constructor(){super(...arguments),this.startObserver=new S(this,(()=>this.startSlot)),this.endObserver=new S(this,(()=>this.endSlot)),this.direction=new z(this),this.type="text",this.expand=!1,this.disallowPattern=void 0,this.handleInputChange=t=>{const n=t.target;this.disallowPattern&&function(t,n){const{value:e}=t,o=t.selectionStart,i=e.slice(0,o),r=e.slice(o,e.length),s=i.replace(n,""),a=s+r.replace(n,""),d=s.length;t.value=a,t.selectionStart=d,t.selectionEnd=d}(n,new RegExp(this.disallowPattern,"g")),this.handleInput(t)}}render(){var t;const o="number"===this.type;return n`${this.renderLabel()}<div class="${l({"n-input-container":!0,"is-rtl":"rtl"===this.direction.dir})}" style="${p({"--_n-input-start-inline-size":k(this.startObserver.inlineSize),"--_n-input-end-inline-size":k(this.endObserver.inlineSize)})}"><slot name="start">${"search"===this.type?n`<nord-icon name="navigation-search"></nord-icon>`:e}</slot><input ${c(this.focusableRef)} id="${this.inputId}" class="n-input" type="${o||"unit"===this.type?"text":this.type}" inputmode="${x(o,"numeric")}" pattern="${x(o,"[0-9]*")}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" name="${d(this.name)}" .value="${null!==(t=this.value)&&void 0!==t?t:""}" placeholder="${d(this.placeholder)}" @input="${this.handleInputChange}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" aria-describedby="${d(this.getDescribedBy())}" aria-invalid="${d(this.getInvalid())}" spellcheck="false" autocomplete="${this.autocomplete}"><slot name="end"></slot></div>${this.renderError()}`}handleKeydown(t){if("Enter"!==t.key)return;const{form:n}=this;if(n){const t=function(t){let n=t.querySelector('button[type="submit"]');!n&&t.id&&(n=t.getRootNode().querySelector(`button[form=${t.id}]`));return n}(n);setTimeout((()=>null==t?void 0:t.click()),0)}}};F.styles=[w,y,b,$],o([a("slot[name='start']")],F.prototype,"startSlot",void 0),o([a("slot[name='end']")],F.prototype,"endSlot",void 0),o([s({reflect:!0})],F.prototype,"type",void 0),o([s({reflect:!0,type:Boolean})],F.prototype,"expand",void 0),o([s({reflect:!0,attribute:"disallow-pattern"})],F.prototype,"disallowPattern",void 0),F=o([i("nord-input")],F);var C=F;export{C 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/common/controllers/ResizeController.ts","../src/input/Input.ts","../src/common/input.ts","../src/common/form.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m16.03 14.61c1.23-1.54 1.97-3.49 1.97-5.61 0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.12 0 4.07-.74 5.61-1.97l3.97 3.97 1.41-1.41-3.97-3.97zm-7.03 1.39c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z\" fill=\"currentColor\"/></svg>'\nexport const title = \"navigation-search\"\nexport const tags = \"nordicon navigation menu find search magnifying glass\"\n","import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\nexport class ResizeController implements ReactiveController {\n  private observer: ResizeObserver\n  private hadFirstUpdate = false\n  private borderBoxSize?: ResizeObserverSize\n\n  constructor(host: ReactiveControllerHost, private target: () => HTMLElement) {\n    host.addController(this)\n\n    this.observer = new ResizeObserver(([entry]) => {\n      const [borderBoxSize] = entry.borderBoxSize\n      this.borderBoxSize = borderBoxSize\n      host.requestUpdate()\n    })\n  }\n\n  get inlineSize() {\n    return this.borderBoxSize?.inlineSize\n  }\n\n  get blockSize() {\n    return this.borderBoxSize?.blockSize\n  }\n\n  hostUpdated() {\n    if (!this.hadFirstUpdate) {\n      this.observer.observe(this.target())\n      this.hadFirstUpdate = true\n    }\n  }\n\n  hostConnected() {\n    // in case the host has rendered, disconnected, and is now reconnected\n    if (this.hadFirstUpdate) {\n      this.observer.observe(this.target())\n    }\n  }\n\n  hostDisconnected() {\n    this.observer.disconnect()\n  }\n}\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query } 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\"\nimport { styleMap } from \"lit/directives/style-map.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 { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { ResizeController } from \"../common/controllers/ResizeController.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\nIcon.registerIcon(searchIcon)\n\nconst px = (value?: number) => (value ? `${value}px` : undefined)\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 * @cssprop [--n-input-text-align=start] - Controls the alignment of text within the input itself.\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  @query(\"slot[name='start']\") private startSlot!: HTMLSlotElement\n  @query(\"slot[name='end']\") private endSlot!: HTMLSlotElement\n  private startObserver = new ResizeController(this, () => this.startSlot)\n  private endObserver = new ResizeController(this, () => this.endSlot)\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\" | \"unit\" =\n    \"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 isNumber = this.type === \"number\"\n\n    return html`\n      ${this.renderLabel()}\n\n      <div\n        class=${classMap({\n          \"n-input-container\": true,\n          \"is-rtl\": this.direction.dir === \"rtl\",\n        })}\n        style=${styleMap({\n          \"--_n-input-start-inline-size\": px(this.startObserver.inlineSize),\n          \"--_n-input-end-inline-size\": px(this.endObserver.inlineSize),\n        })}\n      >\n        <slot name=\"start\">\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=\"end\"></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":["ResizeController","constructor","host","target","this","hadFirstUpdate","addController","observer","ResizeObserver","entry","borderBoxSize","requestUpdate","inlineSize","_a","blockSize","hostUpdated","observe","hostConnected","hostDisconnected","disconnect","Icon","registerIcon","searchIcon","px","value","undefined","Input","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","startObserver","startSlot","endObserver","endSlot","direction","DirectionController","type","expand","disallowPattern","handleInputChange","e","inputEl","regex","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","RegExp","handleInput","render","isNumber","html","renderLabel","classMap","dir","styleMap","nothing","ref","focusableRef","inputId","cond","disabled","required","readonly","ifDefined","name","placeholder","handleChange","handleKeydown","getDescribedBy","getInvalid","autocomplete","renderError","form","key","button","querySelector","id","getRootNode","getSubmitButton","setTimeout","click","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","property","reflect","Boolean","attribute","customElement"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../../icons/lib/assets/navigation-search.js","../src/common/controllers/ResizeController.ts","../src/input/Input.ts","../src/common/input.ts","../src/common/form.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m16.03 14.61c1.23-1.54 1.97-3.49 1.97-5.61 0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.12 0 4.07-.74 5.61-1.97l3.97 3.97 1.41-1.41-3.97-3.97zm-7.03 1.39c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z\" fill=\"currentColor\"/></svg>'\nexport const title = \"navigation-search\"\nexport const tags = \"nordicon navigation menu find search magnifying glass\"\n","import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\nexport class ResizeController implements ReactiveController {\n  private observer: ResizeObserver\n  private hadFirstUpdate = false\n  private borderBoxSize?: ResizeObserverSize\n\n  constructor(host: ReactiveControllerHost, private target: () => HTMLElement) {\n    host.addController(this)\n\n    this.observer = new ResizeObserver(([entry]) => {\n      const [borderBoxSize] = entry.borderBoxSize\n      this.borderBoxSize = borderBoxSize\n      host.requestUpdate()\n    })\n  }\n\n  get inlineSize() {\n    return this.borderBoxSize?.inlineSize\n  }\n\n  get blockSize() {\n    return this.borderBoxSize?.blockSize\n  }\n\n  hostUpdated() {\n    if (!this.hadFirstUpdate) {\n      this.observer.observe(this.target())\n      this.hadFirstUpdate = true\n    }\n  }\n\n  hostConnected() {\n    // in case the host has rendered, disconnected, and is now reconnected\n    if (this.hadFirstUpdate) {\n      this.observer.observe(this.target())\n    }\n  }\n\n  hostDisconnected() {\n    this.observer.disconnect()\n  }\n}\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query } 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\"\nimport { styleMap } from \"lit/directives/style-map.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 { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { ResizeController } from \"../common/controllers/ResizeController.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\nIcon.registerIcon(searchIcon)\n\nconst px = (value?: number) => (value ? `${value}px` : undefined)\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 * @cssprop [--n-input-text-align=start] - Controls the alignment of text within the input itself.\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  @query(\"slot[name='start']\") private startSlot!: HTMLSlotElement\n  @query(\"slot[name='end']\") private endSlot!: HTMLSlotElement\n  private startObserver = new ResizeController(this, () => this.startSlot)\n  private endObserver = new ResizeController(this, () => this.endSlot)\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\" | \"unit\" =\n    \"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 isNumber = this.type === \"number\"\n\n    return html`\n      ${this.renderLabel()}\n\n      <div\n        class=${classMap({\n          \"n-input-container\": true,\n          \"is-rtl\": this.direction.dir === \"rtl\",\n        })}\n        style=${styleMap({\n          \"--_n-input-start-inline-size\": px(this.startObserver.inlineSize),\n          \"--_n-input-end-inline-size\": px(this.endObserver.inlineSize),\n        })}\n      >\n        <slot name=\"start\">\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 || this.type === \"unit\" ? \"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=\"end\"></slot>\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  private handleKeydown(e: KeyboardEvent) {\n    if (e.key !== \"Enter\") {\n      return\n    }\n\n    const { form } = this\n\n    if (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":["ResizeController","constructor","host","target","this","hadFirstUpdate","addController","observer","ResizeObserver","entry","borderBoxSize","requestUpdate","inlineSize","_a","blockSize","hostUpdated","observe","hostConnected","hostDisconnected","disconnect","Icon","registerIcon","searchIcon","px","value","undefined","Input","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","startObserver","startSlot","endObserver","endSlot","direction","DirectionController","type","expand","disallowPattern","handleInputChange","e","inputEl","regex","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","RegExp","handleInput","render","isNumber","html","renderLabel","classMap","dir","styleMap","nothing","ref","focusableRef","inputId","cond","disabled","required","readonly","ifDefined","name","placeholder","handleChange","handleKeydown","getDescribedBy","getInvalid","autocomplete","renderError","key","form","button","querySelector","id","getRootNode","getSubmitButton","setTimeout","click","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","property","reflect","Boolean","attribute","customElement"],"mappings":"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"}

package/lib/InputMixin-d50cb41a.js

@@ -0,0 +1,2 @@
+import{_ as e}from"./query-assigned-elements-822fe360.js";import{e as t}from"./property-03f59dce.js";function o(o){class r extends o{constructor(){super(...arguments),this.disabled=!1,this.value="",this.formAncestor=null}set form(e){const t=this._formId;this._formId=e,this.requestUpdate("form",t)}get form(){if(this._formId){return this.getRootNode().querySelector(`form#${this._formId}`)}return this.formAncestor}connectedCallback(){super.connectedCallback(),this.formAncestor=this.closest("form")}disconnectedCallback(){super.disconnectedCallback(),this.formAncestor=null}}return e([t({type:Boolean,reflect:!0})],r.prototype,"disabled",void 0),e([t()],r.prototype,"name",void 0),e([t()],r.prototype,"value",void 0),e([t()],r.prototype,"form",null),r}export{o as I};
+//# sourceMappingURL=InputMixin-d50cb41a.js.map

package/lib/InputMixin-d50cb41a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputMixin-d50cb41a.js","sources":["../src/common/mixins/InputMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { LitElement } from \"lit\"\nimport { property } from \"lit/decorators.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class InputMixinInterface {\n  name?: string\n  value: string\n  disabled: boolean\n  protected _formId?: string\n  set form(id: string)\n  get form(): HTMLFormElement | null\n}\n\nexport function InputMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<InputMixinInterface> & T {\n  class InputElement extends superClass {\n    /**\n     * Makes the component disabled. This prevents users from\n     * being able to interact with the component, and conveys\n     * its inactive state to assistive technologies.\n     */\n    @property({ type: Boolean, reflect: true }) disabled = false\n\n    /**\n     * The name of the form component.\n     */\n    @property() name?: string\n\n    /**\n     * The value of the form component.\n     */\n    @property() value: string = \"\"\n\n    private formAncestor: HTMLFormElement | null = null\n    protected _formId?: string\n    set form(id: string) {\n      const oldVal = this._formId\n      this._formId = id\n      this.requestUpdate(\"form\", oldVal)\n    }\n\n    /**\n     * Gets the form, if any, associated with the form element.\n     * The setter accepts a string, which is the id of the form.\n     */\n    @property()\n    get form(): HTMLFormElement | null {\n      if (this._formId) {\n        const root = this.getRootNode() as ShadowRoot | Document\n        return root.querySelector<HTMLFormElement>(`form#${this._formId}`)\n      }\n      return this.formAncestor\n    }\n\n    connectedCallback() {\n      super.connectedCallback()\n      // we can cache this, since it will only change if the element is (re)connected\n      this.formAncestor = this.closest(\"form\")\n    }\n\n    disconnectedCallback() {\n      super.disconnectedCallback()\n      this.formAncestor = null\n    }\n  }\n\n  return InputElement as unknown as Constructor<InputMixinInterface> & T\n}\n"],"names":["InputMixin","superClass","InputElement","constructor","this","disabled","value","formAncestor","form","id","oldVal","_formId","requestUpdate","getRootNode","querySelector","connectedCallback","super","closest","disconnectedCallback","__decorate","property","type","Boolean","reflect","prototype"],"mappings":"qGAeM,SAAUA,EAA8CC,GAC5D,MAAMC,UAAqBD,EAA3BE,kCAM8CC,KAAQC,UAAG,EAU3CD,KAAKE,MAAW,GAEpBF,KAAYG,aAA2B,IA+BhD,CA7BKC,SAAKC,GACP,MAAMC,EAASN,KAAKO,QACpBP,KAAKO,QAAUF,EACfL,KAAKQ,cAAc,OAAQF,EAC5B,CAOGF,WACF,GAAIJ,KAAKO,QAAS,CAEhB,OADaP,KAAKS,cACNC,cAA+B,QAAQV,KAAKO,UACzD,CACD,OAAOP,KAAKG,YACb,CAEDQ,oBACEC,MAAMD,oBAENX,KAAKG,aAAeH,KAAKa,QAAQ,OAClC,CAEDC,uBACEF,MAAME,uBACNd,KAAKG,aAAe,IACrB,EAGH,OA7C8CY,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAwBrB,EAAAsB,UAAA,gBAAA,GAKhDL,EAAA,CAAXC,KAAwBlB,EAAAsB,UAAA,YAAA,GAKbL,EAAA,CAAXC,KAA6BlB,EAAAsB,UAAA,aAAA,GAe9BL,EAAA,CADCC,KAOAlB,EAAAsB,UAAA,OAAA,MAcItB,CACT"}

package/lib/Layout.js

@@ -1,2 +1,2 @@
-import{i as n,_ as e,s as a,x as t,A as o,e as i}from"./query-assigned-elements-2f8275b7.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{i as d}from"./query-2d22378e.js";import{o as l}from"./class-map-4a0dec4a.js";import{o as c}from"./style-map-75ce20b3.js";import{l as v}from"./NavToggle-188fb220.js";import{D as p}from"./DirectionController-f35f5476.js";import{E as h}from"./EventController-d99ebeef.js";import{L as u}from"./LightDismissController-a2645ae6.js";import{S as g}from"./SlotController-d733c575.js";import{o as b}from"./observe-a9c6dfb6.js";import{c as m}from"./cond-77258def.js";import{f as y}from"./fsm-50373df9.js";import{c as k}from"./number-c3ab3e95.js";import f from"./Icon.js";import{s as w}from"./Component-253ecb24.js";import{s as z}from"./Sticky-220280e0.js";import"./directive-de55b00a.js";import"./ref-f75a30b7.js";import"./LocalizeController.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./FocusableMixin-003e1094.js";import"./Button.js";import"./LightDomController-5c53b3f4.js";import"./Spinner.js";import"./if-defined-10508457.js";import"./InputMixin-e15dd8f7.js";import"./VisuallyHidden.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./IconManager.js";const x=n`:host{--_n-layout-padding:var(--n-layout-padding, var(--n-space-l));--_n-layout-drawer-inline-size:var(--n-layout-drawer-inline-size, 320px);--_n-layout-background-color:var(--n-layout-background-color, var(--n-color-background));--_n-layout-nav-transition-duration:var(--n-transition-mobile);--_n-layout-header-size:var(--n-space-xxl);--_n-layout-header-size-s:calc(var(--n-space-xl) + var(--n-space-m));background:var(--_n-layout-background-color);color:var(--n-color-text);min-block-size:100vh}.n-layout-main,.n-layout-nav{background:var(--_n-layout-background-color);min-block-size:100%}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--_n-layout-nav-width);z-index:var(--n-index-nav);inset-block-start:0;inset-inline-start:0;inset-block-end:0;transform:translateX(var(--n-nav-transform));box-shadow:var(--n-box-shadow-nav)}.n-layout-main{position:relative}main{padding:var(--_n-layout-padding)}.n-has-top-bar{--_n-sticky-top:var(--_n-layout-header-size)}:host([sticky]) .n-has-header{--_n-sticky-size:var(--_n-layout-header-size)}aside{position:fixed;z-index:var(--n-index-nav);inset-block:0;inset-inline-end:0;inline-size:var(--_n-layout-drawer-inline-size);max-inline-size:100%;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-nav)}@media (min-width:1240px){.n-has-drawer .n-layout-content{margin-inline-end:var(--_n-layout-drawer-inline-size)}aside{box-shadow:var(--n-box-shadow-header);border-inline-start:1px solid var(--n-color-border)}}slot[name=drawer]::slotted(*){block-size:100%!important}.n-has-top-bar aside{inset-block-start:var(--_n-layout-header-size)}:is(.n-has-top-bar,.n-has-header) ::slotted(nord-notification-group){inset-block-start:var(--_n-layout-header-size)}:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(-110%)}.n-rtl:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(110%)}[data-screen=narrow] .n-layout-nav{z-index:var(--n-index-popout);transition:transform var(--_n-layout-nav-transition-duration)}[data-screen=wide]:is(:not([data-nav=opened],[data-nav=closed])) .n-layout-nav{transition:transform var(--_n-layout-nav-transition-duration);border-start-end-radius:var(--n-border-radius);border-end-end-radius:var(--n-border-radius);min-block-size:0;inset-block-start:calc(var(--n-space-m) * 4);inset-block-end:var(--n-space-l)}[data-screen=wide][data-nav=opened] .n-layout-nav{border-inline-end:1px solid var(--n-color-border);box-shadow:none}[data-screen=wide][data-nav=opened]:not(.n-has-top-bar) .n-layout-nav{--n-navigation-header-padding-inline:calc(var(--n-space-l) / 1.5)}.n-has-top-bar[data-screen=wide][data-nav=opened] .n-layout-nav{--n-navigation-header-background:var(--n-color-accent-secondary);--n-navigation-header-color:var(--n-color-text-on-accent);--n-navigation-header-divider:none;--n-navigation-header-toggle-icon-color:rgba(255, 255, 255, 0.85);--n-navigation-header-focus-style:0 0 0 1px #fff inset,inset 0 0 0 100px rgba(255, 255, 255, 0.2);border-color:transparent;border-image-slice:1;border-image-source:linear-gradient(to bottom,rgba(255,255,255,.16) calc(var(--_n-layout-header-size) + 1px),var(--n-color-border) calc(var(--_n-layout-header-size) + 1px));background:var(--n-color-accent-secondary);box-shadow:0 0 transparent}[data-screen=wide]:not([data-nav=opened]) .n-layout-nav{--n-navigation-header-block-size:var(--_n-layout-header-size-s);overflow:hidden}[data-screen=wide][data-nav=opened] .n-layout-main{margin-inline-start:var(--_n-layout-nav-width)}[data-screen=narrow] .n-layout-main::after{content:"";position:fixed;inset:0;z-index:var(--n-index-overlay);transition:opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);background:var(--n-color-overlay)}[data-screen=narrow]:not([data-nav=opened],[data-nav=peek],[data-nav=blocked]) .n-layout-main::after{visibility:hidden;opacity:0}.n-resize{touch-action:none;position:absolute;min-block-size:100%;inset-block:0;inset-inline-end:-8px;inline-size:10px;background:0 0}[data-nav=opened] .n-resize{cursor:col-resize}.n-resize::after{content:"";position:absolute;z-index:var(--n-index-sticky);inset-block:0;inset-inline-end:5px;inline-size:3px;background:var(--n-color-accent);transition:opacity var(--n-transition-slowly);opacity:0}.n-resize:focus{outline:0}.n-dragging .n-resize::after,.n-resize:focus::after,[data-nav=opened] .n-resize:hover::after{opacity:1;transition-delay:.15s}@supports selector(:focus-visible){.n-resize:focus::after{opacity:0}.n-resize:focus-visible::after{opacity:1}}.n-dragging{cursor:col-resize!important;-webkit-user-select:none;user-select:none}:host([padding=none]){--_n-layout-padding:var(--n-layout-padding, 0)}.n-top-bar-container{position:sticky;inset-block-start:0;z-index:var(--n-index-top-bar)}.n-has-top-bar{--_n-layout-header-size:var(--_n-layout-header-size-s);--n-navigation-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar :is([name=header],[name=drawer])::slotted(*){--n-header-block-size:var(--_n-layout-header-size)}.n-nav-toggle-container{position:absolute;padding-inline-start:var(--n-space-s);block-size:var(--_n-layout-header-size);display:flex;align-items:center;z-index:calc(var(--n-index-top-bar) + 1)}[data-screen=narrow] .n-nav-toggle-container{padding-inline-start:var(--n-space-xs)}.n-has-top-bar .n-nav-toggle-container,:host([sticky]) .n-nav-toggle-container{position:fixed}[data-screen=wide][data-nav=opened] .n-nav-toggle-container{display:none}.n-has-nav[data-screen=wide]:not([data-nav=opened]) ::slotted(nord-top-bar),.n-has-nav[data-screen=wide]:not([data-nav=opened],.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:calc(var(--n-space-l) * 1.8)}.n-has-nav[data-screen=narrow] ::slotted(nord-top-bar),.n-has-nav[data-screen=narrow]:not(.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:var(--n-space-xl)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)){--n-button-background-color:transparent;color:rgba(255,255,255,.85)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)):focus{--n-button-background-color:rgba(0, 0, 0, 0.2)}.n-collapse-btn{--_n-collapse-btn-size:var(--n-space-l);position:fixed;inset-inline-start:calc(var(--_n-layout-nav-width) - (var(--_n-collapse-btn-size)/ 2));inset-block-start:calc(var(--_n-layout-header-size) + (var(--_n-layout-header-size) - var(--_n-collapse-btn-size))/ 2);border-radius:var(--n-border-radius-circle);block-size:var(--_n-collapse-btn-size);inline-size:var(--_n-collapse-btn-size);display:flex;align-items:center;justify-content:center;color:var(--n-color-icon);background:var(--n-color-button);box-shadow:var(--n-box-shadow-card);border:0;z-index:var(--n-index-sticky);opacity:0;visibility:hidden;cursor:pointer;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly),background-color var(--n-transition-quickly),color var(--n-transition-quickly)}.n-collapse-btn:hover{background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-collapse-btn:focus{outline:0;box-shadow:0 0 0 2px var(--n-color-accent),var(--n-box-shadow)}[data-screen=narrow] .n-collapse-btn,[data-screen=wide]:not([data-nav=opened]) .n-collapse-btn{display:none}.n-collapse-btn:focus,.n-layout-nav:hover .n-collapse-btn{opacity:1;visibility:visible}.n-collapse-btn nord-icon{transform:rotate(180deg)}.n-rtl .n-collapse-btn nord-icon{transform:rotate(0)}`;f.registerIcon(v);const j=matchMedia("(min-width: 768px)"),_=function(n,e,a=JSON.stringify,t=JSON.parse){return{get value(){try{const a=localStorage.getItem(n);return a?t(a):e}catch(n){return e}},set value(e){try{localStorage.setItem(n,a(e))}catch(n){}}}}("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 C=class extends a{constructor(){super(...arguments),this.navSlot=new g(this,"nav"),this.drawerSlot=new g(this,"drawer"),this.topBarSlot=new g(this,"top-bar"),this.headerSlot=new g(this,"header"),this.direction=new p(this),this.events=new h(this),this.lightDismiss=new u(this,{isOpen:()=>"opened"===this.navState&&!this.wideScreen,onDismiss:()=>this.navTransition("close"),isDismissible:n=>n!==this.navEl}),this.navWidth=_.value,this.isDragging=!1,this.navState=j.matches?"opened":"closed",this.wideScreen=j.matches,this.navOpen="opened"===this.navState,this.padding="m",this.sticky=!1,this.handleMediaQueryChange=()=>{this.wideScreen=j.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(j,"change",this.handleMediaQueryChange)}render(){const{navWidth:n,navState:e,navSlot:a,headerSlot:i,topBarSlot:r,drawerSlot:s,isDragging:d,direction:v}=this,p="opened"===e&&this.wideScreen?n:250;return t`<div class="${l({"n-layout":!0,"n-rtl":v.isRTL,"n-dragging":d,"n-has-header":i.hasContent,"n-has-top-bar":r.hasContent,"n-has-drawer":s.hasContent,"n-has-nav":a.hasContent})}" style="${c({"--_n-layout-nav-width":`${p}px`})}" data-nav="${a.hasContent?e:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}"><div class="n-layout-nav" ?hidden="${a.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"===e,this.startDragging)}" @pointermove="${m(d,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}" ?hidden="${this.isNarrow}"></div>${this.renderNavCollapse()}</div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleMainClick}">${a.hasContent?this.renderNavToggle():o}<div class="n-top-bar-container"><slot name="top-bar"></slot></div><div class="n-layout-content"><div class="n-sticky"><slot name="header"></slot></div><main><slot></slot></main></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}renderNavToggle(){return t`<div class="n-nav-toggle-container"><slot name="nav-toggle" @click="${this.handleToggleClick}" @mouseover="${this.handleMouseEnter}" @mouseout="${this.handleMouseLeave}"><nord-nav-toggle></nord-nav-toggle></slot></div>`}renderNavCollapse(){return t`<button class="n-collapse-btn" @click="${this.handleToggleClick}"><nord-icon name="navigation-toggle-lock" size="s"></nord-icon></button>`}handleNavWidthChange(){_.value=this.navWidth}handleNavStateChange(n){switch("wait"===n&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===n&&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(n){this.navState=S.transition(this.navState,n)}handleNavClick(n){if(!n.defaultPrevented&&!this.wideScreen){const a=n.target;(n=>"nord-nav-item"===n.localName)(e=a)&&!e.hasSubNav&&this.navTransition("close")}var e}handleMainClick(){this.navTransition("click")}handleDropdownOpen(n){"nord-dropdown"===n.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(n){"nord-dropdown"===n.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(n){const{navWidth:e,direction:{isLTR:a}}=this;switch(n.key){case"ArrowLeft":this.setNavWidth(e+(a?-30:30));break;case"ArrowRight":this.setNavWidth(e+(a?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}n.preventDefault()}setNavWidth(n){this.navWidth=k(Math.round(n),220,400)}startDragging(n){if(0===n.button){n.target.setPointerCapture(n.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1}handleDrag(n){const e=this.direction.isRTL?this.clientWidth-n.clientX:n.clientX;this.setNavWidth(e),this.navTransition(e>=100?"open":"close")}};C.styles=[w,z,x],e([d(".n-layout-nav",!0)],C.prototype,"navEl",void 0),e([s()],C.prototype,"navWidth",void 0),e([s()],C.prototype,"isDragging",void 0),e([s()],C.prototype,"navState",void 0),e([s()],C.prototype,"wideScreen",void 0),e([r({reflect:!0,type:Boolean,attribute:"nav-open"})],C.prototype,"navOpen",void 0),e([r({reflect:!0})],C.prototype,"padding",void 0),e([r({type:Boolean,reflect:!0})],C.prototype,"sticky",void 0),e([b("navWidth","updated")],C.prototype,"handleNavWidthChange",null),e([b("navState")],C.prototype,"handleNavStateChange",null),e([b("navOpen","updated")],C.prototype,"handleOpenChange",null),C=e([i("nord-layout")],C);var T=C;export{T as default};
+import{i as n,_ as e,s as a,x as t,A as o,e as i}from"./query-assigned-elements-822fe360.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{i as d}from"./query-2d22378e.js";import{o as l}from"./class-map-c0d8e1e5.js";import{o as c}from"./style-map-5b757428.js";import{l as v}from"./NavToggle-5d3f0605.js";import{D as p}from"./DirectionController-f35f5476.js";import{E as h}from"./EventController-d99ebeef.js";import{L as u}from"./LightDismissController-a2645ae6.js";import{S as g}from"./SlotController-d733c575.js";import{o as b}from"./observe-a9c6dfb6.js";import{c as m}from"./cond-09498763.js";import{f as y}from"./fsm-50373df9.js";import{c as k}from"./number-c3ab3e95.js";import w from"./Icon.js";import{s as f}from"./Component-1f694235.js";import{s as z}from"./Sticky-b4e6c315.js";import"./directive-de55b00a.js";import"./ref-6b46e5ea.js";import"./LocalizeController.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./FocusableMixin-186c69a2.js";import"./Button.js";import"./LightDomController-8a770234.js";import"./Spinner.js";import"./if-defined-8a007930.js";import"./InputMixin-d50cb41a.js";import"./VisuallyHidden.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./IconManager.js";const x=n`:host{--_n-layout-padding:var(--n-layout-padding, var(--n-space-l));--_n-layout-drawer-inline-size:var(--n-layout-drawer-inline-size, 320px);--_n-layout-background-color:var(--n-layout-background-color, var(--n-color-background));--_n-layout-nav-transition-duration:var(--n-transition-mobile);--_n-layout-header-size:var(--n-space-xxl);--_n-layout-header-size-s:calc(var(--n-space-xl) + var(--n-space-m));background:var(--_n-layout-background-color);color:var(--n-color-text);min-block-size:100vh}.n-layout-main,.n-layout-nav{background:var(--_n-layout-background-color);min-block-size:100%}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--_n-layout-nav-width);z-index:var(--n-index-nav);inset-block-start:0;inset-inline-start:0;inset-block-end:0;transform:translateX(var(--n-nav-transform));box-shadow:var(--n-box-shadow-nav)}.n-layout-main{position:relative}main{padding:var(--_n-layout-padding)}.n-has-top-bar{--_n-sticky-top:var(--_n-layout-header-size)}:host([sticky]) .n-has-header{--_n-sticky-size:var(--_n-layout-header-size)}aside{position:fixed;z-index:var(--n-index-nav);inset-block:0;inset-inline-end:0;inline-size:var(--_n-layout-drawer-inline-size);max-inline-size:100%;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-nav)}@media (min-width:1240px){.n-has-drawer .n-layout-content{margin-inline-end:var(--_n-layout-drawer-inline-size)}aside{box-shadow:var(--n-box-shadow-header);border-inline-start:1px solid var(--n-color-border)}}slot[name=drawer]::slotted(*){block-size:100%!important}.n-has-top-bar aside{inset-block-start:var(--_n-layout-header-size)}:is(.n-has-top-bar,.n-has-header) ::slotted(nord-notification-group){inset-block-start:var(--_n-layout-header-size)}:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(-110%)}.n-rtl:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(110%)}[data-screen=narrow] .n-layout-nav{z-index:var(--n-index-popout);transition:transform var(--_n-layout-nav-transition-duration)}[data-screen=wide]:is(:not([data-nav=opened],[data-nav=closed])) .n-layout-nav{transition:transform var(--_n-layout-nav-transition-duration);border-start-end-radius:var(--n-border-radius);border-end-end-radius:var(--n-border-radius);min-block-size:0;inset-block-start:calc(var(--n-space-m) * 4);inset-block-end:var(--n-space-l)}[data-screen=wide][data-nav=opened] .n-layout-nav{border-inline-end:1px solid var(--n-color-border);box-shadow:none}[data-screen=wide][data-nav=opened]:not(.n-has-top-bar) .n-layout-nav{--n-navigation-header-padding-inline:calc(var(--n-space-l) / 1.5)}.n-has-top-bar[data-screen=wide][data-nav=opened] .n-layout-nav{--n-navigation-header-background:var(--n-color-accent-secondary);--n-navigation-header-color:var(--n-color-text-on-accent);--n-navigation-header-divider:none;--n-navigation-header-toggle-icon-color:rgba(255, 255, 255, 0.85);--n-navigation-header-focus-style:0 0 0 1px #fff inset,inset 0 0 0 100px rgba(255, 255, 255, 0.2);border-color:transparent;border-image-slice:1;border-image-source:linear-gradient(to bottom,rgba(255,255,255,.16) calc(var(--_n-layout-header-size) + 1px),var(--n-color-border) calc(var(--_n-layout-header-size) + 1px));background:var(--n-color-accent-secondary);box-shadow:0 0 transparent}[data-screen=wide]:not([data-nav=opened]) .n-layout-nav{--n-navigation-header-block-size:var(--_n-layout-header-size-s);overflow:hidden}[data-screen=wide][data-nav=opened] .n-layout-main{margin-inline-start:var(--_n-layout-nav-width)}[data-screen=narrow] .n-layout-main::after{content:"";position:fixed;inset:0;z-index:var(--n-index-overlay);transition:opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);background:var(--n-color-overlay)}[data-screen=narrow]:not([data-nav=opened],[data-nav=peek],[data-nav=blocked]) .n-layout-main::after{visibility:hidden;opacity:0}.n-resize{touch-action:none;position:absolute;min-block-size:100%;inset-block:0;inset-inline-end:-8px;inline-size:10px;background:0 0}[data-nav=opened] .n-resize{cursor:col-resize}.n-resize::after{content:"";position:absolute;z-index:var(--n-index-sticky);inset-block:0;inset-inline-end:5px;inline-size:3px;background:var(--n-color-accent);transition:opacity var(--n-transition-slowly);opacity:0}.n-resize:focus{outline:0}.n-dragging .n-resize::after,.n-resize:focus::after,[data-nav=opened] .n-resize:hover::after{opacity:1;transition-delay:.15s}@supports selector(:focus-visible){.n-resize:focus::after{opacity:0}.n-resize:focus-visible::after{opacity:1}}.n-dragging{cursor:col-resize!important;-webkit-user-select:none;user-select:none}:host([padding=none]){--_n-layout-padding:var(--n-layout-padding, 0)}.n-top-bar-container{position:sticky;inset-block-start:0;z-index:var(--n-index-top-bar)}.n-has-top-bar{--_n-layout-header-size:var(--_n-layout-header-size-s);--n-navigation-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar :is([name=header],[name=drawer])::slotted(*){--n-header-block-size:var(--_n-layout-header-size)}.n-nav-toggle-container{position:absolute;padding-inline-start:var(--n-space-s);block-size:var(--_n-layout-header-size);display:flex;align-items:center;z-index:calc(var(--n-index-top-bar) + 1)}[data-screen=narrow] .n-nav-toggle-container{padding-inline-start:var(--n-space-xs)}.n-has-top-bar .n-nav-toggle-container,:host([sticky]) .n-nav-toggle-container{position:fixed}[data-screen=wide][data-nav=opened] .n-nav-toggle-container{display:none}.n-has-nav[data-screen=wide]:not([data-nav=opened]) ::slotted(nord-top-bar),.n-has-nav[data-screen=wide]:not([data-nav=opened],.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:calc(var(--n-space-l) * 1.8)}.n-has-nav[data-screen=narrow] ::slotted(nord-top-bar),.n-has-nav[data-screen=narrow]:not(.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:var(--n-space-xl)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)){--n-button-background-color:transparent;color:rgba(255,255,255,.85)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)):focus{--n-button-background-color:rgba(0, 0, 0, 0.2)}.n-collapse-btn{--_n-collapse-btn-size:var(--n-space-l);position:fixed;inset-inline-start:calc(var(--_n-layout-nav-width) - (var(--_n-collapse-btn-size)/ 2));inset-block-start:calc(var(--_n-layout-header-size) + (var(--_n-layout-header-size) - var(--_n-collapse-btn-size))/ 2);border-radius:var(--n-border-radius-circle);block-size:var(--_n-collapse-btn-size);inline-size:var(--_n-collapse-btn-size);display:flex;align-items:center;justify-content:center;color:var(--n-color-icon);background:var(--n-color-button);box-shadow:var(--n-box-shadow-card);border:0;z-index:var(--n-index-sticky);opacity:0;visibility:hidden;cursor:pointer;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly),background-color var(--n-transition-quickly),color var(--n-transition-quickly)}.n-collapse-btn:hover{background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-collapse-btn:focus{outline:0;box-shadow:0 0 0 2px var(--n-color-accent),var(--n-box-shadow)}[data-screen=narrow] .n-collapse-btn,[data-screen=wide]:not([data-nav=opened]) .n-collapse-btn{display:none}.n-collapse-btn:focus,.n-layout-nav:hover .n-collapse-btn{opacity:1;visibility:visible}.n-collapse-btn nord-icon{transform:rotate(180deg)}.n-rtl .n-collapse-btn nord-icon{transform:rotate(0)}`;w.registerIcon(v);const j=matchMedia("(min-width: 768px)"),_=function(n,e,a=JSON.stringify,t=JSON.parse){return{get value(){try{const a=localStorage.getItem(n);return a?t(a):e}catch(n){return e}},set value(e){try{localStorage.setItem(n,a(e))}catch(n){}}}}("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 C=class extends a{constructor(){super(...arguments),this.navSlot=new g(this,"nav"),this.drawerSlot=new g(this,"drawer"),this.topBarSlot=new g(this,"top-bar"),this.headerSlot=new g(this,"header"),this.direction=new p(this),this.events=new h(this),this.lightDismiss=new u(this,{isOpen:()=>"opened"===this.navState&&!this.wideScreen,onDismiss:()=>this.navTransition("close"),isDismissible:n=>n!==this.navEl}),this.navWidth=_.value,this.isDragging=!1,this.navState=j.matches?"opened":"closed",this.wideScreen=j.matches,this.navOpen="opened"===this.navState,this.padding="m",this.sticky=!1,this.handleMediaQueryChange=()=>{this.wideScreen=j.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(j,"change",this.handleMediaQueryChange)}render(){const{navWidth:n,navState:e,navSlot:a,headerSlot:i,topBarSlot:r,drawerSlot:s,isDragging:d,direction:v}=this,p="opened"===e&&this.wideScreen?n:250;return t`<div class="${l({"n-layout":!0,"n-rtl":v.isRTL,"n-dragging":d,"n-has-header":i.hasContent,"n-has-top-bar":r.hasContent,"n-has-drawer":s.hasContent,"n-has-nav":a.hasContent})}" style="${c({"--_n-layout-nav-width":`${p}px`})}" data-nav="${a.hasContent?e:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}"><div class="n-layout-nav" ?hidden="${a.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"===e,this.startDragging)}" @pointermove="${m(d,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}" ?hidden="${this.isNarrow}"></div>${this.renderNavCollapse()}</div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleMainClick}">${a.hasContent?this.renderNavToggle():o}<div class="n-top-bar-container"><slot name="top-bar"></slot></div><div class="n-layout-content"><div class="n-sticky"><slot name="header"></slot></div><main><slot></slot></main></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}renderNavToggle(){return t`<div class="n-nav-toggle-container"><slot name="nav-toggle" @click="${this.handleToggleClick}" @mouseover="${this.handleMouseEnter}" @mouseout="${this.handleMouseLeave}"><nord-nav-toggle></nord-nav-toggle></slot></div>`}renderNavCollapse(){return t`<button class="n-collapse-btn" @click="${this.handleToggleClick}"><nord-icon name="navigation-toggle-lock" size="s"></nord-icon></button>`}handleNavWidthChange(){_.value=this.navWidth}handleNavStateChange(n){switch("wait"===n&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===n&&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(n){this.navState=S.transition(this.navState,n)}handleNavClick(n){if(!n.defaultPrevented&&!this.wideScreen){const a=n.target;(n=>"nord-nav-item"===n.localName)(e=a)&&!e.hasSubNav&&this.navTransition("close")}var e}handleMainClick(){this.navTransition("click")}handleDropdownOpen(n){"nord-dropdown"===n.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(n){"nord-dropdown"===n.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(n){const{navWidth:e,direction:{isLTR:a}}=this;switch(n.key){case"ArrowLeft":this.setNavWidth(e+(a?-30:30));break;case"ArrowRight":this.setNavWidth(e+(a?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}n.preventDefault()}setNavWidth(n){this.navWidth=k(Math.round(n),220,400)}startDragging(n){if(0===n.button){n.target.setPointerCapture(n.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1}handleDrag(n){const e=this.direction.isRTL?this.clientWidth-n.clientX:n.clientX;this.setNavWidth(e),this.navTransition(e>=100?"open":"close")}};C.styles=[f,z,x],e([d(".n-layout-nav",!0)],C.prototype,"navEl",void 0),e([s()],C.prototype,"navWidth",void 0),e([s()],C.prototype,"isDragging",void 0),e([s()],C.prototype,"navState",void 0),e([s()],C.prototype,"wideScreen",void 0),e([r({reflect:!0,type:Boolean,attribute:"nav-open"})],C.prototype,"navOpen",void 0),e([r({reflect:!0})],C.prototype,"padding",void 0),e([r({type:Boolean,reflect:!0})],C.prototype,"sticky",void 0),e([b("navWidth","updated")],C.prototype,"handleNavWidthChange",null),e([b("navState")],C.prototype,"handleNavStateChange",null),e([b("navOpen","updated")],C.prototype,"handleOpenChange",null),C=e([i("nord-layout")],C);var T=C;export{T 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 * as lockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle-lock.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 Icon from \"../icon/Icon.js\"\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\nIcon.registerIcon(lockIcon)\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\n\nconst mediaQuery = 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 isNavItem = (el: HTMLElement): el is NavItem => el.localName === \"nord-nav-item\"\nconst isNavItemLeaf = (el: HTMLElement) => isNavItem(el) && !el.hasSubNav\n\n/**\n * Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n *\n * @status ready\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot top-bar - Used to place the [Top Bar](../top-bar/) component.\n * @slot header - Used to place content inside the header section.\n * @slot drawer - Used to place additional content/details relating to a selected item.\n * @slot nav-toggle - Used to place a own nav-toggle component, for cases where you might need to add a tooltip.\n *\n * @cssprop [--n-layout-padding=var(--n-space-l)] - Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-layout-drawer-inline-size=320px] - Controls the width of the drawer area, when used.\n * @cssprop [--n-layout-background-color=var(--n-color-background)] - Controls the background color of the layout, using [color tokens](/tokens/#color).\n */\n@customElement(\"nord-layout\")\nexport default class Layout extends LitElement {\n  static styles = [componentStyle, stickyStyle, style]\n\n  private peekTimeoutId?: ReturnType<typeof setTimeout>\n\n  private navSlot = new SlotController(this, \"nav\")\n  private drawerSlot = new SlotController(this, \"drawer\")\n  private topBarSlot = new SlotController(this, \"top-bar\")\n  private headerSlot = new SlotController(this, \"header\")\n  private 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-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\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   * 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    this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n  }\n\n  render() {\n    const { navWidth, navState, navSlot, headerSlot, topBarSlot, drawerSlot, isDragging, direction } = this\n    const adjustedNavWidth = navState === \"opened\" && this.wideScreen ? navWidth : NAV_DEFAULT_WIDTH\n\n    return html`\n      <div\n        class=${classMap({\n          \"n-layout\": true,\n          \"n-rtl\": direction.isRTL,\n          \"n-dragging\": isDragging,\n          \"n-has-header\": headerSlot.hasContent,\n          \"n-has-top-bar\": topBarSlot.hasContent,\n          \"n-has-drawer\": drawerSlot.hasContent,\n          \"n-has-nav\": navSlot.hasContent,\n        })}\n        style=${styleMap({\n          \"--_n-layout-nav-width\": `${adjustedNavWidth}px`,\n        })}\n        data-nav=${navSlot.hasContent ? navState : \"closed\"}\n        data-screen=${this.wideScreen ? \"wide\" : \"narrow\"}\n      >\n        <div\n          class=\"n-layout-nav\"\n          ?hidden=${navSlot.isEmpty}\n          @focusin=${this.handleNavFocus}\n          @mouseenter=${this.handleMouseEnter}\n          @mouseleave=${this.handleMouseLeave}\n          @open=${this.handleDropdownOpen}\n          @close=${this.handleDropdownClose}\n        >\n          <slot name=\"nav\" @click=${this.handleNavClick}></slot>\n          <div\n            class=\"n-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            @pointerdown=${cond(navState === \"opened\", this.startDragging)}\n            @pointermove=${cond(isDragging, this.handleDrag)}\n            @pointerleave=${this.stopDragging}\n            @pointerup=${this.stopDragging}\n            @keydown=${this.handleKeyboardResize}\n            ?hidden=${this.isNarrow}\n          ></div>\n          ${this.renderNavCollapse()}\n        </div>\n\n        <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleMainClick}>\n          ${navSlot.hasContent ? this.renderNavToggle() : nothing}\n\n          <div class=\"n-top-bar-container\">\n            <slot name=\"top-bar\"></slot>\n          </div>\n\n          <div class=\"n-layout-content\">\n            <div class=\"n-sticky\">\n              <slot name=\"header\"></slot>\n            </div>\n            <main>\n              <slot></slot>\n            </main>\n          </div>\n\n          <aside ?hidden=${this.drawerSlot.isEmpty}>\n            <slot name=\"drawer\"></slot>\n          </aside>\n        </div>\n      </div>\n    `\n  }\n\n  private renderNavToggle() {\n    /* 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  private renderNavCollapse() {\n    return html`\n      <button class=\"n-collapse-btn\" @click=${this.handleToggleClick}>\n        <nord-icon name=\"navigation-toggle-lock\" size=\"s\"></nord-icon>\n      </button>\n    `\n  }\n\n  @observe(\"navWidth\", \"updated\")\n  protected handleNavWidthChange() {\n    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  /* ---------------------------------------------\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":["Icon","registerIcon","lockIcon","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","navSlot","SlotController","drawerSlot","topBarSlot","headerSlot","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","render","adjustedNavWidth","html","classMap","isRTL","hasContent","styleMap","isEmpty","handleDropdownOpen","handleDropdownClose","handleNavClick","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","renderNavCollapse","handleMainClick","renderNavToggle","nothing","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","removeEventListener","setTimeout","addEventListener","once","handleOpenChange","setNavWidth","Math","max","event","transition","e","defaultPrevented","target","el","localName","isNavItem","hasSubNav","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","stickyStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"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"}
+{"version":3,"file":"Layout.js","sources":["../src/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 * as lockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle-lock.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 Icon from \"../icon/Icon.js\"\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\nIcon.registerIcon(lockIcon)\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\n\nconst mediaQuery = 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 isNavItem = (el: HTMLElement): el is NavItem => el.localName === \"nord-nav-item\"\nconst isNavItemLeaf = (el: HTMLElement) => isNavItem(el) && !el.hasSubNav\n\n/**\n * Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n *\n * @status ready\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot top-bar - Used to place the [Top Bar](../top-bar/) component.\n * @slot header - Used to place content inside the header section.\n * @slot drawer - Used to place additional content/details relating to a selected item.\n * @slot nav-toggle - Used to place a own nav-toggle component, for cases where you might need to add a tooltip.\n *\n * @cssprop [--n-layout-padding=var(--n-space-l)] - Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-layout-drawer-inline-size=320px] - Controls the width of the drawer area, when used.\n * @cssprop [--n-layout-background-color=var(--n-color-background)] - Controls the background color of the layout, using [color tokens](/tokens/#color).\n */\n@customElement(\"nord-layout\")\nexport default class Layout extends LitElement {\n  static styles = [componentStyle, stickyStyle, style]\n\n  private peekTimeoutId?: ReturnType<typeof setTimeout>\n\n  private navSlot = new SlotController(this, \"nav\")\n  private drawerSlot = new SlotController(this, \"drawer\")\n  private topBarSlot = new SlotController(this, \"top-bar\")\n  private headerSlot = new SlotController(this, \"header\")\n  private 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-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\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   * 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    this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n  }\n\n  render() {\n    const { navWidth, navState, navSlot, headerSlot, topBarSlot, drawerSlot, isDragging, direction } = this\n    const adjustedNavWidth = navState === \"opened\" && this.wideScreen ? navWidth : NAV_DEFAULT_WIDTH\n\n    return html`\n      <div\n        class=${classMap({\n          \"n-layout\": true,\n          \"n-rtl\": direction.isRTL,\n          \"n-dragging\": isDragging,\n          \"n-has-header\": headerSlot.hasContent,\n          \"n-has-top-bar\": topBarSlot.hasContent,\n          \"n-has-drawer\": drawerSlot.hasContent,\n          \"n-has-nav\": navSlot.hasContent,\n        })}\n        style=${styleMap({\n          \"--_n-layout-nav-width\": `${adjustedNavWidth}px`,\n        })}\n        data-nav=${navSlot.hasContent ? navState : \"closed\"}\n        data-screen=${this.wideScreen ? \"wide\" : \"narrow\"}\n      >\n        <div\n          class=\"n-layout-nav\"\n          ?hidden=${navSlot.isEmpty}\n          @focusin=${this.handleNavFocus}\n          @mouseenter=${this.handleMouseEnter}\n          @mouseleave=${this.handleMouseLeave}\n          @open=${this.handleDropdownOpen}\n          @close=${this.handleDropdownClose}\n        >\n          <slot name=\"nav\" @click=${this.handleNavClick}></slot>\n          <div\n            class=\"n-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            @pointerdown=${cond(navState === \"opened\", this.startDragging)}\n            @pointermove=${cond(isDragging, this.handleDrag)}\n            @pointerleave=${this.stopDragging}\n            @pointerup=${this.stopDragging}\n            @keydown=${this.handleKeyboardResize}\n            ?hidden=${this.isNarrow}\n          ></div>\n          ${this.renderNavCollapse()}\n        </div>\n\n        <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleMainClick}>\n          ${navSlot.hasContent ? this.renderNavToggle() : nothing}\n\n          <div class=\"n-top-bar-container\">\n            <slot name=\"top-bar\"></slot>\n          </div>\n\n          <div class=\"n-layout-content\">\n            <div class=\"n-sticky\">\n              <slot name=\"header\"></slot>\n            </div>\n            <main>\n              <slot></slot>\n            </main>\n          </div>\n\n          <aside ?hidden=${this.drawerSlot.isEmpty}>\n            <slot name=\"drawer\"></slot>\n          </aside>\n        </div>\n      </div>\n    `\n  }\n\n  private renderNavToggle() {\n    /* 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  private renderNavCollapse() {\n    return html`\n      <button class=\"n-collapse-btn\" @click=${this.handleToggleClick}>\n        <nord-icon name=\"navigation-toggle-lock\" size=\"s\"></nord-icon>\n      </button>\n    `\n  }\n\n  @observe(\"navWidth\", \"updated\")\n  protected handleNavWidthChange() {\n    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  /* ---------------------------------------------\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":["Icon","registerIcon","lockIcon","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","navSlot","SlotController","drawerSlot","topBarSlot","headerSlot","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","render","adjustedNavWidth","html","classMap","isRTL","hasContent","styleMap","isEmpty","handleDropdownOpen","handleDropdownClose","handleNavClick","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","renderNavCollapse","handleMainClick","renderNavToggle","nothing","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","removeEventListener","setTimeout","addEventListener","once","handleOpenChange","setNavWidth","Math","max","event","transition","e","defaultPrevented","target","el","localName","isNavItem","hasSubNav","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","stickyStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"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"}

package/lib/{LightDomController-5c53b3f4.js → LightDomController-8a770234.js}

@@ -1,2 +1,2 @@
-import{B as t,A as s}from"./query-assigned-elements-2f8275b7.js";class o{constructor(t,s){this.host=t,this.options=s,t.addController(this)}get container(){return this.options.container||this.host}hostUpdated(){this.render()}hostDisconnected(){t(s,this.container,this.options.renderOptions)}render(){t(this.options.render(),this.container,this.options.renderOptions)}}export{o as L};
-//# sourceMappingURL=LightDomController-5c53b3f4.js.map
+import{B as t,A as s}from"./query-assigned-elements-822fe360.js";class o{constructor(t,s){this.host=t,this.options=s,t.addController(this)}get container(){return this.options.container||this.host}hostUpdated(){this.render()}hostDisconnected(){t(s,this.container,this.options.renderOptions)}render(){t(this.options.render(),this.container,this.options.renderOptions)}}export{o as L};
+//# sourceMappingURL=LightDomController-8a770234.js.map

package/lib/{LightDomController-5c53b3f4.js.map → LightDomController-8a770234.js.map}

@@ -1 +1 @@
-{"version":3,"file":"LightDomController-5c53b3f4.js","sources":["../src/common/controllers/LightDomController.ts"],"sourcesContent":["import { nothing, ReactiveController, ReactiveControllerHost, render, RenderOptions } from \"lit\"\n\ntype LightDomOptions = {\n  render: () => unknown\n  renderOptions?: RenderOptions\n  container?: HTMLElement\n}\n\nexport class LightDomController implements ReactiveController {\n  constructor(private host: ReactiveControllerHost & HTMLElement, private options: LightDomOptions) {\n    host.addController(this)\n  }\n\n  private get container(): HTMLElement {\n    return this.options.container || this.host\n  }\n\n  hostUpdated() {\n    this.render()\n  }\n\n  hostDisconnected() {\n    render(nothing, this.container, this.options.renderOptions)\n  }\n\n  private render() {\n    render(this.options.render(), this.container, this.options.renderOptions)\n  }\n}\n"],"names":["LightDomController","constructor","host","options","this","addController","container","hostUpdated","render","hostDisconnected","nothing","renderOptions"],"mappings":"uEAQaA,EACXC,YAAoBC,EAAoDC,GAApDC,KAAIF,KAAJA,EAAoDE,KAAOD,QAAPA,EACtED,EAAKG,cAAcD,KACpB,CAEWE,gBACV,OAAOF,KAAKD,QAAQG,WAAaF,KAAKF,IACvC,CAEDK,cACEH,KAAKI,QACN,CAEDC,mBACED,EAAOE,EAASN,KAAKE,UAAWF,KAAKD,QAAQQ,cAC9C,CAEOH,SACNA,EAAOJ,KAAKD,QAAQK,SAAUJ,KAAKE,UAAWF,KAAKD,QAAQQ,cAC5D"}
+{"version":3,"file":"LightDomController-8a770234.js","sources":["../src/common/controllers/LightDomController.ts"],"sourcesContent":["import { nothing, ReactiveController, ReactiveControllerHost, render, RenderOptions } from \"lit\"\n\ntype LightDomOptions = {\n  render: () => unknown\n  renderOptions?: RenderOptions\n  container?: HTMLElement\n}\n\nexport class LightDomController implements ReactiveController {\n  constructor(private host: ReactiveControllerHost & HTMLElement, private options: LightDomOptions) {\n    host.addController(this)\n  }\n\n  private get container(): HTMLElement {\n    return this.options.container || this.host\n  }\n\n  hostUpdated() {\n    this.render()\n  }\n\n  hostDisconnected() {\n    render(nothing, this.container, this.options.renderOptions)\n  }\n\n  private render() {\n    render(this.options.render(), this.container, this.options.renderOptions)\n  }\n}\n"],"names":["LightDomController","constructor","host","options","this","addController","container","hostUpdated","render","hostDisconnected","nothing","renderOptions"],"mappings":"uEAQaA,EACXC,YAAoBC,EAAoDC,GAApDC,KAAIF,KAAJA,EAAoDE,KAAOD,QAAPA,EACtED,EAAKG,cAAcD,KACpB,CAEWE,gBACV,OAAOF,KAAKD,QAAQG,WAAaF,KAAKF,IACvC,CAEDK,cACEH,KAAKI,QACN,CAEDC,mBACED,EAAOE,EAASN,KAAKE,UAAWF,KAAKD,QAAQQ,cAC9C,CAEOH,SACNA,EAAOJ,KAAKD,QAAQK,SAAUJ,KAAKE,UAAWF,KAAKD,QAAQQ,cAC5D"}

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, 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":"sTAcA,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"}
+{"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]> : []\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":"sTAcA,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/Message.js

@@ -1,2 +1,2 @@
-import{i as e,_ as o,x as r,e as t,s as i}from"./query-assigned-elements-2f8275b7.js";import{e as n}from"./property-03f59dce.js";import{l as s}from"./if-defined-10508457.js";import{n as a}from"./ref-f75a30b7.js";import{F as l}from"./FocusableMixin-003e1094.js";import{s as c}from"./Component-253ecb24.js";import{s as d}from"./DropdownItem-75a2468a.js";import{LocalizeController as m}from"./LocalizeController.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"./localization7.js";import"./localization8.js";const p=e`:host{--_n-message-border-color:var(--n-message-border-color, var(--n-color-border));padding:var(--n-space-s);border-block-end:1px solid var(--_n-message-border-color)}.n-message{flex-direction:column;gap:var(--n-space-xs);align-items:flex-start;padding-inline-start:var(--n-space-xl);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);line-height:var(--n-line-height-heading);margin:0;color:var(--n-color-text);position:relative}slot[name=footer]{font-size:var(--n-font-size-s);font-weight:var(--n-font-weight);color:var(--n-color-text-weaker);line-height:var(--n-line-height-heading)}:host([highlight]) .n-message::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--n-index-deep);border-radius:var(--n-border-radius-s);block-size:100%;inline-size:100%;opacity:.15;background:var(--n-color-accent);filter:brightness(150%)}.n-unread{position:absolute;min-inline-size:var(--n-size-icon-xxs);min-block-size:var(--n-size-icon-xxs);inset-block-start:calc(var(--n-space-s) + var(--n-space-xs));inset-inline-start:var(--n-space-m);background:var(--n-color-accent);border-radius:var(--n-border-radius-circle)}.n-message:hover .n-unread{background:var(--n-color-text-on-accent)}`;let f=class extends(l(i)){constructor(){super(...arguments),this.localize=new m(this)}render(){return(this.href?e=>r`<a href="${s(this.href)}" ${a(this.focusableRef)} class="n-dropdown-item n-message">${e}</a>`:e=>r`<button ${a(this.focusableRef)} class="n-dropdown-item n-message">${e}</button>`)(r`<div role="img" class="n-unread" aria-label="${this.localize.term("unreadLabel")}" ?hidden="${!this.unread}"></div><slot></slot><slot name="footer"></slot>`)}};f.styles=[c,d,p],o([n({reflect:!0})],f.prototype,"href",void 0),o([n({reflect:!0,type:Boolean})],f.prototype,"highlight",void 0),o([n({reflect:!0,type:Boolean})],f.prototype,"unread",void 0),f=o([t("nord-message")],f);var h=f;export{h as default};
+import{i as e,_ as o,x as r,e as t,s as i}from"./query-assigned-elements-822fe360.js";import{e as n}from"./property-03f59dce.js";import{l as s}from"./if-defined-8a007930.js";import{n as a}from"./ref-6b46e5ea.js";import{F as l}from"./FocusableMixin-186c69a2.js";import{s as c}from"./Component-1f694235.js";import{s as d}from"./DropdownItem-4a02675f.js";import{LocalizeController as m}from"./LocalizeController.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"./localization7.js";import"./localization8.js";const p=e`:host{--_n-message-border-color:var(--n-message-border-color, var(--n-color-border));padding:var(--n-space-s);border-block-end:1px solid var(--_n-message-border-color)}.n-message{flex-direction:column;gap:var(--n-space-xs);align-items:flex-start;padding-inline-start:var(--n-space-xl);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);line-height:var(--n-line-height-heading);margin:0;color:var(--n-color-text);position:relative}slot[name=footer]{font-size:var(--n-font-size-s);font-weight:var(--n-font-weight);color:var(--n-color-text-weaker);line-height:var(--n-line-height-heading)}:host([highlight]) .n-message::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--n-index-deep);border-radius:var(--n-border-radius-s);block-size:100%;inline-size:100%;opacity:.15;background:var(--n-color-accent);filter:brightness(150%)}.n-unread{position:absolute;min-inline-size:var(--n-size-icon-xxs);min-block-size:var(--n-size-icon-xxs);inset-block-start:calc(var(--n-space-s) + var(--n-space-xs));inset-inline-start:var(--n-space-m);background:var(--n-color-accent);border-radius:var(--n-border-radius-circle)}.n-message:hover .n-unread{background:var(--n-color-text-on-accent)}`;let f=class extends(l(i)){constructor(){super(...arguments),this.localize=new m(this)}render(){return(this.href?e=>r`<a href="${s(this.href)}" ${a(this.focusableRef)} class="n-dropdown-item n-message">${e}</a>`:e=>r`<button ${a(this.focusableRef)} class="n-dropdown-item n-message">${e}</button>`)(r`<div role="img" class="n-unread" aria-label="${this.localize.term("unreadLabel")}" ?hidden="${!this.unread}"></div><slot></slot><slot name="footer"></slot>`)}};f.styles=[c,d,p],o([n({reflect:!0})],f.prototype,"href",void 0),o([n({reflect:!0,type:Boolean})],f.prototype,"highlight",void 0),o([n({reflect:!0,type:Boolean})],f.prototype,"unread",void 0),f=o([t("nord-message")],f);var h=f;export{h as default};
 //# sourceMappingURL=Message.js.map

package/lib/Message.js.map

@@ -1 +1 @@
-{"version":3,"file":"Message.js","sources":["../src/message/Message.ts"],"sourcesContent":["import { LitElement, html, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport itemStyle from \"../dropdown-item/DropdownItem.css\"\nimport style from \"./Message.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\n/**\n * Message represents a specific item within a collection,\n * such as notifications, tasks or conversations. Message\n * can be placed directly inside a dropdown component.\n *\n * @status draft\n * @category action\n * @slot - The message content.\n * @slot footer - Used to place content after the message. Typically used for a timestamp.\n *\n * @cssprop [--n-message-border-color=var(--n-color-border)] - Controls the border color of the message, using our [color tokens](/tokens/#color).\n *\n * @localization unreadLabel - Label for the unread messages.\n */\n@customElement(\"nord-message\")\nexport default class Message extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, itemStyle, style]\n\n  private localize = new LocalizeController<\"nord-message\">(this)\n\n  /**\n   * The url the message should link to.\n   */\n  @property({ reflect: true }) href?: string\n\n  /**\n   * Highlight the message visually. This is meant for highlighting\n   * a new message that just appeared. Highlight style should be removed\n   * after the user has seen the message and there’s been a timeout of\n   * e.g. 30 seconds.\n   */\n  @property({ reflect: true, type: Boolean }) highlight?: boolean\n\n  /**\n   * Mark the message as unread. By default messages are read.\n   */\n  @property({ reflect: true, type: Boolean }) unread?: boolean\n\n  // TODO: dropdown-item and message component have the same logic\n  // for determining if it renders a link vs button. Perhaps we\n  // can later see if both can use a mixin or similar instead?\n  render() {\n    const link = (content: TemplateResult) =>\n      html`<a href=${ifDefined(this.href)} ${ref(this.focusableRef)} class=\"n-dropdown-item n-message\">${content}</a>`\n    const button = (content: TemplateResult) =>\n      html`<button ${ref(this.focusableRef)} class=\"n-dropdown-item n-message\">${content}</button>`\n\n    const container = this.href ? link : button\n\n    return container(html`\n      <div role=\"img\" class=\"n-unread\" aria-label=${this.localize.term(\"unreadLabel\")} ?hidden=${!this.unread}></div>\n      <slot></slot>\n      <slot name=\"footer\"></slot>\n    `)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-message\": Message\n  }\n}\n"],"names":["Message","FocusableMixin","LitElement","constructor","this","localize","LocalizeController","render","href","content","html","ifDefined","ref","focusableRef","term","unread","styles","componentStyle","itemStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"k5DA0BA,IAAqBA,EAArB,cAAqCC,EAAeC,IAApDC,kCAGUC,KAAAC,SAAW,IAAIC,EAAmCF,KAqC3D,CAdCG,SAQE,OAFkBH,KAAKI,KALTC,GACZC,CAAI,YAAWC,EAAUP,KAAKI,UAASI,EAAIR,KAAKS,mDAAmDJ,QACrFA,GACdC,CAAI,WAAWE,EAAIR,KAAKS,mDAAmDJ,cAI5DC,CAAI,gDAC2BN,KAAKC,SAASS,KAAK,6BAA2BV,KAAKW,yDAIpG,GAtCMf,EAAMgB,OAAG,CAACC,EAAgBC,EAAWC,GAOfC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAqBtB,EAAAuB,UAAA,YAAA,GAQEH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAA8BzB,EAAAuB,UAAA,iBAAA,GAKnBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAA2BzB,EAAAuB,UAAA,cAAA,GArBzCvB,EAAOoB,EAAA,CAD3BM,EAAc,iBACM1B,SAAAA"}
+{"version":3,"file":"Message.js","sources":["../src/message/Message.ts"],"sourcesContent":["import { LitElement, html, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport itemStyle from \"../dropdown-item/DropdownItem.css\"\nimport style from \"./Message.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\n/**\n * Message represents a specific item within a collection,\n * such as notifications, tasks or conversations. Message\n * can be placed directly inside a dropdown component.\n *\n * @status draft\n * @category action\n * @slot - The message content.\n * @slot footer - Used to place content after the message. Typically used for a timestamp.\n *\n * @cssprop [--n-message-border-color=var(--n-color-border)] - Controls the border color of the message, using our [color tokens](/tokens/#color).\n *\n * @localization unreadLabel - Label for the unread messages.\n */\n@customElement(\"nord-message\")\nexport default class Message extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, itemStyle, style]\n\n  private localize = new LocalizeController<\"nord-message\">(this)\n\n  /**\n   * The url the message should link to.\n   */\n  @property({ reflect: true }) href?: string\n\n  /**\n   * Highlight the message visually. This is meant for highlighting\n   * a new message that just appeared. Highlight style should be removed\n   * after the user has seen the message and there’s been a timeout of\n   * e.g. 30 seconds.\n   */\n  @property({ reflect: true, type: Boolean }) highlight?: boolean\n\n  /**\n   * Mark the message as unread. By default messages are read.\n   */\n  @property({ reflect: true, type: Boolean }) unread?: boolean\n\n  // TODO: dropdown-item and message component have the same logic\n  // for determining if it renders a link vs button. Perhaps we\n  // can later see if both can use a mixin or similar instead?\n  render() {\n    const link = (content: TemplateResult) =>\n      html`<a href=${ifDefined(this.href)} ${ref(this.focusableRef)} class=\"n-dropdown-item n-message\">${content}</a>`\n    const button = (content: TemplateResult) =>\n      html`<button ${ref(this.focusableRef)} class=\"n-dropdown-item n-message\">${content}</button>`\n\n    const container = this.href ? link : button\n\n    return container(html`\n      <div role=\"img\" class=\"n-unread\" aria-label=${this.localize.term(\"unreadLabel\")} ?hidden=${!this.unread}></div>\n      <slot></slot>\n      <slot name=\"footer\"></slot>\n    `)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-message\": Message\n  }\n}\n"],"names":["Message","FocusableMixin","LitElement","constructor","this","localize","LocalizeController","render","href","content","html","ifDefined","ref","focusableRef","term","unread","styles","componentStyle","itemStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"k5DA0Be,IAAMA,EAAN,cAAsBC,EAAeC,IAArCC,kCAGLC,KAAAC,SAAW,IAAIC,EAAmCF,KAqC3D,CAdCG,SAQE,OAFkBH,KAAKI,KALTC,GACZC,CAAI,YAAWC,EAAUP,KAAKI,UAASI,EAAIR,KAAKS,mDAAmDJ,QACrFA,GACdC,CAAI,WAAWE,EAAIR,KAAKS,mDAAmDJ,cAI5DC,CAAI,gDAC2BN,KAAKC,SAASS,KAAK,6BAA2BV,KAAKW,yDAIpG,GAtCMf,EAAMgB,OAAG,CAACC,EAAgBC,EAAWC,GAOfC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAqBtB,EAAAuB,UAAA,YAAA,GAQEH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAA8BzB,EAAAuB,UAAA,iBAAA,GAKnBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAA2BzB,EAAAuB,UAAA,cAAA,GArBzCvB,EAAOoB,EAAA,CAD3BM,EAAc,iBACM1B,SAAAA"}

package/lib/Modal.js

@@ -1,2 +1,2 @@
-import{i as o,s as e,_ as a,x as n,e as i}from"./query-assigned-elements-2f8275b7.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-f26b0299.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-d9666e88.js";import{s as m}from"./Component-253ecb24.js";import{LocalizeController as v}from"./LocalizeController.js";import{ModalController as h}from"./ModalController.js";import"./state-70f38ceb.js";import"./if-defined-10508457.js";import"./directive-de55b00a.js";import"./cond-77258def.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"./localization7.js";import"./localization8.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-modal)}: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-header);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:var(--n-space-xs);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,x as n,e as i}from"./query-assigned-elements-822fe360.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-f26b0299.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-d9666e88.js";import{s as m}from"./Component-1f694235.js";import{LocalizeController as v}from"./LocalizeController.js";import{ModalController as h}from"./ModalController.js";import"./state-70f38ceb.js";import"./if-defined-8a007930.js";import"./directive-de55b00a.js";import"./cond-09498763.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"./localization7.js";import"./localization8.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-modal)}: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-header);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:var(--n-space-xs);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 * @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":"qoJAcAA,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,EAAA6C,kBAAoB,IAAK5C,EAAW4C,kBAAmBC,gBAAgB,GAE7CC,EAAA,CAAhCC,EAAM,YAAY,IAAoChD,EAAAiD,UAAA,aAAA,GACbF,EAAA,CAAzCC,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,GAoEpDF,EAAA,CADTQ,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":"qoJAcAA,EAAKC,aAAaC,GAsBH,IAAMC,EAAN,cAAoBC,EAApBC,kCAcLC,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,EAAA6C,kBAAoB,IAAK5C,EAAW4C,kBAAmBC,gBAAgB,GAE7CC,EAAA,CAAhCC,EAAM,YAAY,IAAoChD,EAAAiD,UAAA,aAAA,GACbF,EAAA,CAAzCC,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,GAoEpDF,EAAA,CADTQ,EAAQ,OAAQ,YAOhBvD,EAAAiD,UAAA,oBAAA,MA5HkBjD,EAAK+C,EAAA,CADzBS,EAAc,eACMxD,SAAAA"}