@nordhealth/components 4.12.0 → 4.12.2

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, isServer } from \"lit\"\n\nexport class ResizeController implements ReactiveController {\n  private observer?: ResizeObserver\n  private hadFirstUpdate = false\n  private borderBoxSize?: ResizeObserverSize\n\n  constructor(\n    host: ReactiveControllerHost,\n    private target: () => HTMLElement\n  ) {\n    host.addController(this)\n\n    if (!isServer) {\n      this.observer = new ResizeObserver(([entry]) => {\n        const [borderBoxSize] = entry.borderBoxSize\n        this.borderBoxSize = borderBoxSize\n        host.requestUpdate()\n      })\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 && this.observer) {\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 && this.observer) {\n      this.observer.observe(this.target())\n    }\n  }\n\n  hostDisconnected() {\n    if (this.observer) {\n      this.observer.disconnect()\n    }\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 { TextSelectableMixin } from \"../common/mixins/TextSelectableMixin.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\"\nimport { NordEvent } from \"../common/events.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 * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).\n */\n@customElement(\"nord-input\")\nexport default class Input extends SizeMixin(\n  FormAssociatedMixin(AutocompleteMixin(ReadonlyMixin(TextSelectableMixin(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:\n    | \"text\"\n    | \"email\"\n    | \"password\"\n    | \"tel\"\n    | \"url\"\n    | \"search\"\n    | \"number\"\n    | \"unit\"\n    | \"button\" = \"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.textSelectableRef)}\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          @select=${this.handleSelect}\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  protected handleSelect(e: Event) {\n    e.stopPropagation()\n\n    /**\n     * Fired when some text has been selected.\n     */\n    this.dispatchEvent(new NordEvent(\"select\"))\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","isServer","observer","ResizeObserver","entry","borderBoxSize","requestUpdate","inlineSize","_a","blockSize","hostUpdated","observe","hostConnected","hostDisconnected","disconnect","Icon","registerIcon","searchIcon","px","value","undefined","Input","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","TextSelectableMixin","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","textSelectableRef","focusableRef","inputId","cond","disabled","required","readonly","ifDefined","name","placeholder","handleChange","handleKeydown","handleSelect","getDescribedBy","getInvalid","autocomplete","renderError","key","form","button","querySelector","id","getRootNode","getSubmitButton","setTimeout","click","stopPropagation","dispatchEvent","NordEvent","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 type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport { isServer } from 'lit'\n\nexport class ResizeController implements ReactiveController {\n  private observer?: ResizeObserver\n  private hadFirstUpdate = false\n  private borderBoxSize?: ResizeObserverSize\n\n  constructor(\n    host: ReactiveControllerHost,\n    private target: () => HTMLElement,\n  ) {\n    host.addController(this)\n\n    if (!isServer) {\n      this.observer = new ResizeObserver(([entry]) => {\n        const [borderBoxSize] = entry.borderBoxSize\n        this.borderBoxSize = borderBoxSize\n        host.requestUpdate()\n      })\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 && this.observer) {\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 && this.observer) {\n      this.observer.observe(this.target())\n    }\n  }\n\n  hostDisconnected() {\n    if (this.observer) {\n      this.observer.disconnect()\n    }\n  }\n}\n","import * as searchIcon from '@nordhealth/icons/lib/assets/navigation-search.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { ref } from 'lit/directives/ref.js'\n\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { ResizeController } from '../common/controllers/ResizeController.js'\nimport { cond } from '../common/directives/cond.js'\nimport { NordEvent } from '../common/events.js'\nimport { getSubmitButton } from '../common/form.js'\nimport { cleanValue } from '../common/input.js'\nimport { AutocompleteMixin } from '../common/mixins/AutocompleteMixin.js'\n\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 { SizeMixin } from '../common/mixins/SizeMixin.js'\nimport { TextSelectableMixin } from '../common/mixins/TextSelectableMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport formFieldStyle from '../common/styles/FormField.css'\nimport textFieldStyle from '../common/styles/TextField.css'\nimport Icon from '../icon/Icon.js'\nimport style from './Input.css'\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 * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).\n */\n@customElement('nord-input')\nexport default class Input extends SizeMixin(\n  FormAssociatedMixin(AutocompleteMixin(ReadonlyMixin(TextSelectableMixin(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:\n    | 'text'\n    | 'email'\n    | 'password'\n    | 'tel'\n    | 'url'\n    | 'search'\n    | 'number'\n    | 'unit'\n    | 'button' = '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.textSelectableRef)}\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          @select=${this.handleSelect}\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  protected handleSelect(e: Event) {\n    e.stopPropagation()\n\n    /**\n     * Fired when some text has been selected.\n     */\n    this.dispatchEvent(new NordEvent('select'))\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","isServer","observer","ResizeObserver","entry","borderBoxSize","requestUpdate","inlineSize","_a","blockSize","hostUpdated","observe","hostConnected","hostDisconnected","disconnect","Icon","registerIcon","searchIcon","px","value","undefined","Input","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","TextSelectableMixin","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","textSelectableRef","focusableRef","inputId","cond","disabled","required","readonly","ifDefined","name","placeholder","handleChange","handleKeydown","handleSelect","getDescribedBy","getInvalid","autocomplete","renderError","key","form","button","querySelector","id","getRootNode","getSubmitButton","setTimeout","click","stopPropagation","dispatchEvent","NordEvent","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","property","reflect","Boolean","attribute","customElement"],"mappings":"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"}

package/lib/InputMixin-LetXsCyv.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputMixin-LetXsCyv.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({ reflect: true }) 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":"yFAeM,SAAUA,EAA8CC,GAC5D,MAAMC,UAAqBD,EAA3B,WAAAE,uBAM8CC,KAAQC,UAAG,EAU3CD,KAAKE,MAAW,GAEpBF,KAAYG,aAA2B,IA+BhD,CA7BC,QAAIC,CAAKC,GACP,MAAMC,EAASN,KAAKO,QACpBP,KAAKO,QAAUF,EACfL,KAAKQ,cAAc,OAAQF,EAC5B,CAOD,QAAIF,GACF,GAAIJ,KAAKO,QAAS,CAEhB,OADaP,KAAKS,cACNC,cAA+B,QAAQV,KAAKO,UACzD,CACD,OAAOP,KAAKG,YACb,CAED,iBAAAQ,GACEC,MAAMD,oBAENX,KAAKG,aAAeH,KAAKa,QAAQ,OAClC,CAED,oBAAAC,GACEF,MAAME,uBACNd,KAAKG,aAAe,IACrB,EAGH,OA7C8CY,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAwBrB,EAAAsB,UAAA,gBAAA,GAK/BL,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAAqBrB,EAAAsB,UAAA,YAAA,GAK9BL,EAAA,CAAXC,KAA6BlB,EAAAsB,UAAA,aAAA,GAe9BL,EAAA,CADCC,KAOAlB,EAAAsB,UAAA,OAAA,MAcItB,CACT"}
+{"version":3,"file":"InputMixin-LetXsCyv.js","sources":["../src/common/mixins/InputMixin.ts"],"sourcesContent":["import type { 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({ reflect: true }) 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":"yFAcM,SAAUA,EAA8CC,GAC5D,MAAMC,UAAqBD,EAA3B,WAAAE,uBAM8CC,KAAQC,UAAG,EAU3CD,KAAKE,MAAW,GAEpBF,KAAYG,aAA2B,IA+BhD,CA7BC,QAAIC,CAAKC,GACP,MAAMC,EAASN,KAAKO,QACpBP,KAAKO,QAAUF,EACfL,KAAKQ,cAAc,OAAQF,EAC5B,CAOD,QAAIF,GACF,GAAIJ,KAAKO,QAAS,CAEhB,OADaP,KAAKS,cACNC,cAA+B,QAAQV,KAAKO,UACzD,CACD,OAAOP,KAAKG,YACb,CAED,iBAAAQ,GACEC,MAAMD,oBAENX,KAAKG,aAAeH,KAAKa,QAAQ,OAClC,CAED,oBAAAC,GACEF,MAAME,uBACNd,KAAKG,aAAe,IACrB,EAGH,OA7C8CY,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAwBrB,EAAAsB,UAAA,gBAAA,GAK/BL,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAAqBrB,EAAAsB,UAAA,YAAA,GAK9BL,EAAA,CAAXC,KAA6BlB,EAAAsB,UAAA,aAAA,GAe9BL,EAAA,CADCC,KAOAlB,EAAAsB,UAAA,OAAA,MAcItB,CACT"}

package/lib/KeyboardController.js

@@ -1,2 +1,2 @@
-import{S as t}from"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";const o=t=>o=>{o.preventDefault(),t(o)};class r{constructor(r,s){this.host=r,r.addController(this),this.commandShortcuts=new t(r),this.globalShortcuts=new t(r,{"$mod+k":o(s.toggleOpen)}),this.navigationShortcuts=new t(r,{Enter:o(s.trigger),Backspace:s.goBack,End:o(s.end),Home:o(s.start),ArrowDown:o(s.next),ArrowUp:o(s.previous)},r)}registerCommandShortcuts(){const t={};for(const o of this.host.commands)o.shortcut&&(t[o.shortcut]=()=>{var t;return null===(t=o.handler)||void 0===t?void 0:t.call(o,this.host)});this.commandShortcuts.bind(t)}}export{r as KeyboardController};
+import{S as t}from"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";function o(t){return o=>{o.preventDefault(),t(o)}}class r{constructor(r,s){this.host=r,r.addController(this),this.commandShortcuts=new t(r),this.globalShortcuts=new t(r,{"$mod+k":o(s.toggleOpen)}),this.navigationShortcuts=new t(r,{Enter:o(s.trigger),Backspace:s.goBack,End:o(s.end),Home:o(s.start),ArrowDown:o(s.next),ArrowUp:o(s.previous)},r)}registerCommandShortcuts(){const t={};for(const o of this.host.commands)o.shortcut&&(t[o.shortcut]=()=>{var t;return null===(t=o.handler)||void 0===t?void 0:t.call(o,this.host)});this.commandShortcuts.bind(t)}}export{r as KeyboardController};
 //# sourceMappingURL=KeyboardController.js.map

package/lib/KeyboardController.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyboardController.js","sources":["../src/command-menu/KeyboardController.ts"],"sourcesContent":["import { ReactiveController } from \"lit\"\nimport CommandMenu from \"./CommandMenu.js\"\nimport { ShortcutController, ShortcutMap } from \"../common/controllers/ShortcutController.js\"\n\ntype KeyboardActions = {\n  trigger: () => void\n  goBack: () => void\n  start: () => void\n  end: () => void\n  next: () => void\n  previous: () => void\n  toggleOpen: () => void\n}\n\nconst preventDefault = (fn: (e: Event) => void) => (e: Event) => {\n  e.preventDefault()\n  fn(e)\n}\n\nexport class KeyboardController {\n  private globalShortcuts: ShortcutController\n  private navigationShortcuts: ShortcutController\n  private commandShortcuts: ShortcutController\n\n  constructor(\n    private host: CommandMenu,\n    actions: KeyboardActions\n  ) {\n    host.addController(this as ReactiveController)\n\n    this.commandShortcuts = new ShortcutController(host)\n    this.globalShortcuts = new ShortcutController(host, { \"$mod+k\": preventDefault(actions.toggleOpen) })\n    this.navigationShortcuts = new ShortcutController(\n      host,\n      {\n        Enter: preventDefault(actions.trigger),\n        Backspace: actions.goBack, // we don't want to prevent default, since that would stop backspace deleting chars\n        End: preventDefault(actions.end),\n        Home: preventDefault(actions.start),\n        ArrowDown: preventDefault(actions.next),\n        ArrowUp: preventDefault(actions.previous),\n      },\n      host\n    )\n  }\n\n  registerCommandShortcuts() {\n    const shortcuts: ShortcutMap = {}\n\n    for (const command of this.host.commands) {\n      if (command.shortcut) {\n        shortcuts[command.shortcut] = () => command.handler?.(this.host)\n      }\n    }\n\n    this.commandShortcuts.bind(shortcuts)\n  }\n}\n"],"names":["preventDefault","fn","e","KeyboardController","constructor","host","actions","this","addController","commandShortcuts","ShortcutController","globalShortcuts","toggleOpen","navigationShortcuts","Enter","trigger","Backspace","goBack","End","end","Home","start","ArrowDown","next","ArrowUp","previous","registerCommandShortcuts","shortcuts","command","commands","shortcut","_a","handler","call","bind"],"mappings":"2FAcA,MAAMA,EAAkBC,GAA4BC,IAClDA,EAAEF,iBACFC,EAAGC,EAAE,QAGMC,EAKX,WAAAC,CACUC,EACRC,GADQC,KAAIF,KAAJA,EAGRA,EAAKG,cAAcD,MAEnBA,KAAKE,iBAAmB,IAAIC,EAAmBL,GAC/CE,KAAKI,gBAAkB,IAAID,EAAmBL,EAAM,CAAE,SAAUL,EAAeM,EAAQM,cACvFL,KAAKM,oBAAsB,IAAIH,EAC7BL,EACA,CACES,MAAOd,EAAeM,EAAQS,SAC9BC,UAAWV,EAAQW,OACnBC,IAAKlB,EAAeM,EAAQa,KAC5BC,KAAMpB,EAAeM,EAAQe,OAC7BC,UAAWtB,EAAeM,EAAQiB,MAClCC,QAASxB,EAAeM,EAAQmB,WAElCpB,EAEH,CAED,wBAAAqB,GACE,MAAMC,EAAyB,CAAA,EAE/B,IAAK,MAAMC,KAAWrB,KAAKF,KAAKwB,SAC1BD,EAAQE,WACVH,EAAUC,EAAQE,UAAY,KAAM,IAAAC,EAAA,OAAkB,UAAlBH,EAAQI,eAAU,IAAAD,OAAA,EAAAA,EAAAE,KAAAL,EAAArB,KAAKF,KAAK,GAIpEE,KAAKE,iBAAiByB,KAAKP,EAC5B"}
+{"version":3,"file":"KeyboardController.js","sources":["../src/command-menu/KeyboardController.ts"],"sourcesContent":["import type { ReactiveController } from 'lit'\nimport type { ShortcutMap } from '../common/controllers/ShortcutController.js'\nimport type CommandMenu from './CommandMenu.js'\nimport { ShortcutController } from '../common/controllers/ShortcutController.js'\n\ninterface KeyboardActions {\n  trigger: () => void\n  goBack: () => void\n  start: () => void\n  end: () => void\n  next: () => void\n  previous: () => void\n  toggleOpen: () => void\n}\n\nfunction preventDefault(fn: (e: Event) => void) {\n  return (e: Event) => {\n    e.preventDefault()\n    fn(e)\n  }\n}\n\nexport class KeyboardController {\n  private globalShortcuts: ShortcutController\n  private navigationShortcuts: ShortcutController\n  private commandShortcuts: ShortcutController\n\n  constructor(\n    private host: CommandMenu,\n    actions: KeyboardActions,\n  ) {\n    host.addController(this as ReactiveController)\n\n    this.commandShortcuts = new ShortcutController(host)\n    this.globalShortcuts = new ShortcutController(host, { '$mod+k': preventDefault(actions.toggleOpen) })\n    this.navigationShortcuts = new ShortcutController(\n      host,\n      {\n        Enter: preventDefault(actions.trigger),\n        Backspace: actions.goBack, // we don't want to prevent default, since that would stop backspace deleting chars\n        End: preventDefault(actions.end),\n        Home: preventDefault(actions.start),\n        ArrowDown: preventDefault(actions.next),\n        ArrowUp: preventDefault(actions.previous),\n      },\n      host,\n    )\n  }\n\n  registerCommandShortcuts() {\n    const shortcuts: ShortcutMap = {}\n\n    for (const command of this.host.commands) {\n      if (command.shortcut) {\n        shortcuts[command.shortcut] = () => command.handler?.(this.host)\n      }\n    }\n\n    this.commandShortcuts.bind(shortcuts)\n  }\n}\n"],"names":["preventDefault","fn","e","KeyboardController","constructor","host","actions","this","addController","commandShortcuts","ShortcutController","globalShortcuts","toggleOpen","navigationShortcuts","Enter","trigger","Backspace","goBack","End","end","Home","start","ArrowDown","next","ArrowUp","previous","registerCommandShortcuts","shortcuts","command","commands","shortcut","_a","handler","call","bind"],"mappings":"2FAeA,SAASA,EAAeC,GACtB,OAAQC,IACNA,EAAEF,iBACFC,EAAGC,EAAE,CAET,OAEaC,EAKX,WAAAC,CACUC,EACRC,GADQC,KAAIF,KAAJA,EAGRA,EAAKG,cAAcD,MAEnBA,KAAKE,iBAAmB,IAAIC,EAAmBL,GAC/CE,KAAKI,gBAAkB,IAAID,EAAmBL,EAAM,CAAE,SAAUL,EAAeM,EAAQM,cACvFL,KAAKM,oBAAsB,IAAIH,EAC7BL,EACA,CACES,MAAOd,EAAeM,EAAQS,SAC9BC,UAAWV,EAAQW,OACnBC,IAAKlB,EAAeM,EAAQa,KAC5BC,KAAMpB,EAAeM,EAAQe,OAC7BC,UAAWtB,EAAeM,EAAQiB,MAClCC,QAASxB,EAAeM,EAAQmB,WAElCpB,EAEH,CAED,wBAAAqB,GACE,MAAMC,EAAyB,CAAA,EAE/B,IAAK,MAAMC,KAAWrB,KAAKF,KAAKwB,SAC1BD,EAAQE,WACVH,EAAUC,EAAQE,UAAY,KAAM,IAAAC,EAAA,OAAkB,UAAlBH,EAAQI,eAAU,IAAAD,OAAA,EAAAA,EAAAE,KAAAL,EAAArB,KAAKF,KAAK,GAIpEE,KAAKE,iBAAiByB,KAAKP,EAC5B"}

package/lib/Layout.js

@@ -1,2 +1,2 @@
-import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as t,html as a,nothing as o}from"lit";import{query as i,state as s,property as r,customElement as l}from"lit/decorators.js";import{classMap as d}from"lit/directives/class-map.js";import{styleMap as c}from"lit/directives/style-map.js";import{l as h}from"./NavToggle-D-udBTou.js";import{D as v}from"./DirectionController-ChvNGESZ.js";import{E as p}from"./EventController-BBOmvfLa.js";import{L as u}from"./LightDismissController-4pH8cdko.js";import{S as g}from"./SlotController-Z6eG7LSZ.js";import{o as b}from"./observe-D0n0zOfU.js";import{c as m}from"./cond-CI1KbneT.js";import{f as y}from"./fsm-Bq5jMQrK.js";import{c as k}from"./number-Dg2vCfGd.js";import f from"./Icon.js";import{s as w}from"./Component-DSU3Qp0O.js";import{s as z}from"./Sticky-DqnqENYN.js";import"lit/directives/ref.js";import"./LocalizeController.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./FocusableMixin-BlQLNPdJ.js";import"./Button.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";import"lit/directives/if-defined.js";import"./InputMixin-LetXsCyv.js";import"./VisuallyHidden.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";const x=()=>!0;class S{constructor(n,e){n.addController(this),this.options={enabled:x,...e}}hostConnected(){"undefined"!=typeof BroadcastChannel&&(this.channel=new BroadcastChannel(this.options.channelName),this.channel.addEventListener("message",this))}hostDisconnected(){var n,e;null===(n=this.channel)||void 0===n||n.removeEventListener("message",this),null===(e=this.channel)||void 0===e||e.close()}handleEvent(n){this.options.enabled()&&this.options.onMessage(n.data)}post(n){var e;this.options.enabled()&&(null===(e=this.channel)||void 0===e||e.postMessage(n))}}function _(n,e,t=JSON.stringify,a=JSON.parse){return{get value(){try{const t=localStorage.getItem(n);return t?a(t):e}catch(n){return e}},set value(e){try{localStorage.setItem(n,t(e))}catch(n){}}}}const C=e`:host{--_n-layout-padding:var(--n-layout-padding, var(--n-space-l));--_n-layout-drawer-inline-size:var(--n-layout-drawer-inline-size, 320px);--_n-layout-background-color:var(--n-layout-background-color, var(--n-color-background));--_n-layout-nav-transition-duration:var(--n-transition-mobile);--_n-layout-header-size:var(--n-space-xxl);--_n-layout-header-size-s:calc(var(--n-space-xl) + var(--n-space-m));--_n-layout-footer-size:var(--n-space-xxl);background:var(--_n-layout-background-color);color:var(--n-color-text);min-block-size:100vh}.n-layout{block-size:calc(100vh - var(--n-sticky-top))}.n-layout-main,.n-layout-nav{background:var(--_n-layout-background-color);min-block-size:100%}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--_n-layout-nav-width);z-index:var(--n-index-nav);inset-block-start:0;inset-inline-start:0;inset-block-end:0;transform:translateX(var(--n-nav-transform));box-shadow:var(--n-box-shadow-nav)}.n-layout-main{position:relative}main{padding:var(--_n-layout-padding)}.n-has-top-bar{--_n-sticky-top:var(--_n-layout-header-size)}:host([sticky]) .n-has-header{--_n-sticky-size:var(--_n-layout-header-size)}:host([sticky-footer]) .n-has-footer slot[name=footer]::slotted(*){position:fixed}aside{position:fixed;z-index:var(--n-index-nav);inset-block:0;inset-inline-end:0;inline-size:var(--_n-layout-drawer-inline-size);max-inline-size:100%;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-nav)}@media (min-width:1240px){.n-has-drawer .n-layout-content{margin-inline-end:var(--_n-layout-drawer-inline-size)}aside{box-shadow:var(--n-box-shadow-header);border-inline-start:1px solid var(--n-color-border)}}slot[name=drawer]::slotted(*){block-size:100%!important}.n-has-top-bar aside{inset-block-start:var(--_n-layout-header-size)}:is(.n-has-top-bar,.n-has-header) ::slotted(nord-notification-group){inset-block-start:var(--_n-layout-header-size)}:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(-110%)}.n-rtl:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(110%)}[data-screen=narrow] .n-layout-nav{z-index:var(--n-index-popout);transition:transform var(--_n-layout-nav-transition-duration)}[data-screen=wide]:is(:not([data-nav=opened],[data-nav=closed])) .n-layout-nav{transition:transform var(--_n-layout-nav-transition-duration);border-start-end-radius:var(--n-border-radius);border-end-end-radius:var(--n-border-radius);min-block-size:0;inset-block-start:calc(var(--n-space-m) * 4);inset-block-end:var(--n-space-l)}[data-screen=wide][data-nav=opened] .n-layout-nav{border-inline-end:1px solid var(--n-color-border);box-shadow:none}[data-screen=wide][data-nav=opened]:not(.n-has-top-bar) .n-layout-nav{--n-navigation-header-padding-inline:calc(var(--n-space-l) / 1.5)}.n-has-top-bar[data-screen=wide][data-nav=opened] .n-layout-nav{--n-navigation-header-background:var(--n-color-accent-secondary);--n-navigation-header-color:var(--n-color-text-on-accent);--n-navigation-header-divider:none;--n-navigation-header-toggle-icon-color: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:fixed;inset-inline-start:var(--_n-layout-nav-width);inset-inline-end:0;inset-block-start:0;z-index:var(--n-index-top-bar)}[data-screen=narrow] .n-top-bar-container,[data-screen=wide]:not([data-nav=opened]) .n-top-bar-container{inset-inline-start:0}.n-has-top-bar{--_n-layout-header-size:var(--_n-layout-header-size-s);--n-navigation-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar :is([name=header],[name=drawer])::slotted(*){--n-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar .n-layout-main{inset-block-start:var(--_n-layout-header-size)}.n-nav-toggle-container{position:absolute;padding-inline-start:var(--n-space-s);block-size:var(--_n-layout-header-size);display:flex;align-items:center;z-index:calc(var(--n-index-top-bar) + 1)}[data-screen=narrow] .n-nav-toggle-container{padding-inline-start:var(--n-space-xs)}.n-has-top-bar .n-nav-toggle-container,:host([sticky]) .n-nav-toggle-container{position:fixed;inset-block-start:0}[data-screen=wide][data-nav=opened] .n-nav-toggle-container{display:none}.n-has-nav[data-screen=wide]:not([data-nav=opened]) ::slotted(nord-top-bar),.n-has-nav[data-screen=wide]:not([data-nav=opened],.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:calc(var(--n-space-l) * 1.8)}.n-has-nav[data-screen=narrow] ::slotted(nord-top-bar),.n-has-nav[data-screen=narrow]:not(.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:var(--n-space-xl)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)){--n-button-background-color:transparent;color: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);cursor:pointer;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly),background-color var(--n-transition-quickly),color var(--n-transition-quickly)}.n-collapse-btn:hover{background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-collapse-btn:focus{outline:0;box-shadow:0 0 0 2px var(--n-color-accent),var(--n-box-shadow)}[data-screen=narrow] .n-collapse-btn,[data-screen=wide]:not([data-nav=opened]) .n-collapse-btn{display:none}@media (hover:hover) and (pointer:fine){.n-collapse-btn{opacity:0;visibility:hidden}.n-collapse-btn:focus,.n-layout-nav:hover .n-collapse-btn{opacity:1;visibility:visible}}.n-collapse-btn nord-icon{transform:rotate(180deg)}.n-rtl .n-collapse-btn nord-icon{transform:rotate(0)}slot[name=footer]::slotted(*){inset-inline-start:var(--_n-layout-nav-width);inset-inline-end:0;inset-block-end:0}@media (min-width:1240px){.n-has-drawer slot[name=footer]::slotted(*){inset-inline-end:var(--_n-layout-drawer-inline-size)}}[data-screen=narrow] slot[name=footer]::slotted(*),[data-screen=wide]:not([data-nav=opened]) slot[name=footer]::slotted(*){inset-inline-start:0}:host([sticky-footer]) .n-has-footer .n-layout-content{padding-block-end:var(--_n-layout-footer-size)}`;f.registerIcon(h);const j="undefined"!=typeof matchMedia?matchMedia("(min-width: 768px)"):{matches:!1,addEventListener(){}},N=_("nord-layout.navWidth",250),T=_("nord-layout.navOpen",!0),$=y({opened:{toggle:"closed",close:"closed"},closed:{toggle:"opened",open:"opened",focusin:"peek",pointerenter:"peek"},peek:{toggle:"opened",focusout:"unpeek",pointerleave:"wait",dropdownOpen:"blocked",click:"unpeek",open:"opened"},blocked:{dropdownClose:"peek",open:"opened"},wait:{toggle:"opened",focusin:"peek",pointerenter:"peek",timeout:"unpeek"},unpeek:{toggle:"opened",focusin:"peek",pointerenter:"peek",transitionend:"closed"}});let D=class extends t{constructor(){super(...arguments),this.navSlot=new g(this,"nav"),this.drawerSlot=new g(this,"drawer"),this.topBarSlot=new g(this,"top-bar"),this.headerSlot=new g(this,"header"),this.footerSlot=new g(this,"footer"),this.direction=new v(this),this.events=new p(this),this.lightDismiss=new u(this,{isOpen:()=>"opened"===this.navState&&!this.wideScreen,onDismiss:()=>this.navTransition("close"),isDismissible:n=>n!==this.navEl}),this.broadcast=new S(this,{channelName:"nord-layout-nav-state",enabled:()=>this.syncNavState&&this.wideScreen,onMessage:n=>{"navOpen"in n&&(this.navOpen=n.navOpen),"navWidth"in n&&(this.navWidth=n.navWidth)}}),this.navWidth=N.value,this.isDragging=!1,this.wideScreen=j.matches,this.persistNavState=!1,this.syncNavState=!1,this.padding="m",this.sticky=!1,this.stickyFooter=!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)}willUpdate(){this.hasUpdated||(this.isNarrow||this.persistNavState&&!1===T.value?this.navState="closed":this.navState="opened")}render(){const{navWidth:n,navState:e,navSlot:t,headerSlot:i,footerSlot:s,topBarSlot:r,drawerSlot:l,isDragging:h,direction:v}=this,p="opened"===e&&this.wideScreen?n:250;return a`<div class="${d({"n-layout":!0,"n-rtl":v.isRTL,"n-dragging":h,"n-has-header":i.hasContent,"n-has-footer":s.hasContent,"n-has-top-bar":r.hasContent,"n-has-drawer":l.hasContent,"n-has-nav":t.hasContent})}" style="${c({"--_n-layout-nav-width":`${p}px`})}" data-nav="${t.hasContent?e:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}"><div class="n-layout-nav" ?hidden="${t.isEmpty}" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav" @click="${this.handleNavClick}"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" @pointerdown="${m("opened"===e,this.startDragging)}" @pointermove="${m(h,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}">${t.hasContent?this.renderNavToggle():o}<div class="n-top-bar-container"><slot name="top-bar"></slot></div><div class="n-layout-content"><div class="n-sticky"><slot name="header"></slot></div><main><slot></slot></main><slot name="footer"></slot></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}renderNavToggle(){return a`<div class="n-nav-toggle-container"><slot name="nav-toggle" @click="${this.handleToggleClick}" @mouseover="${this.handleMouseEnter}" @mouseout="${this.handleMouseLeave}"><nord-nav-toggle></nord-nav-toggle></slot></div>`}renderNavCollapse(){return a`<button class="n-collapse-btn" @click="${this.handleToggleClick}"><nord-icon name="navigation-toggle-lock" size="s"></nord-icon></button>`}handleNavWidthChange(){N.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(n){this.isDragging||this.setNavWidth(Math.max(this.navWidth,250)),this.navTransition(this.navOpen?"open":"close"),this.persistNavState&&(T.value=this.navOpen),null!=n&&this.broadcast.post({navOpen:this.navOpen})}navTransition(n){this.navState=$.transition(this.navState,n)}handleNavClick(n){if(!n.defaultPrevented&&!this.wideScreen){const t=n.target;(n=>"nord-nav-item"===n.localName)(e=t)&&!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:t}}=this;switch(n.key){case"ArrowLeft":this.setNavWidth(e+(t?-30:30));break;case"ArrowRight":this.setNavWidth(e+(t?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}this.broadcast.post({navWidth:this.navWidth}),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,this.broadcast.post({navWidth:this.navWidth})}handleDrag(n){const e=this.direction.isRTL?this.clientWidth-n.clientX:n.clientX;this.setNavWidth(e),this.navTransition(e>=100?"open":"close")}};D.styles=[w,z,C],n([i(".n-layout-nav",!0)],D.prototype,"navEl",void 0),n([s()],D.prototype,"navWidth",void 0),n([s()],D.prototype,"isDragging",void 0),n([s()],D.prototype,"navState",void 0),n([s()],D.prototype,"wideScreen",void 0),n([r({reflect:!0,type:Boolean,attribute:"nav-open"})],D.prototype,"navOpen",void 0),n([r({reflect:!0,type:Boolean,attribute:"persist-nav-state"})],D.prototype,"persistNavState",void 0),n([r({type:Boolean,reflect:!0,attribute:"sync-nav-state"})],D.prototype,"syncNavState",void 0),n([r({reflect:!0})],D.prototype,"padding",void 0),n([r({type:Boolean,reflect:!0})],D.prototype,"sticky",void 0),n([r({type:Boolean,reflect:!0,attribute:"sticky-footer"})],D.prototype,"stickyFooter",void 0),n([b("navWidth","updated")],D.prototype,"handleNavWidthChange",null),n([b("navState")],D.prototype,"handleNavStateChange",null),n([b("navOpen","updated")],D.prototype,"handleOpenChange",null),D=n([l("nord-layout")],D);var W=D;export{W as default};
+import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{l as e}from"./NavToggle-DL74d1aQ.js";import{css as t,LitElement as a,html as o,nothing as i}from"lit";import{query as s,state as r,property as l,customElement as d}from"lit/decorators.js";import{classMap as c}from"lit/directives/class-map.js";import{styleMap as h}from"lit/directives/style-map.js";import{D as v}from"./DirectionController-ChvNGESZ.js";import{E as p}from"./EventController-BBOmvfLa.js";import{L as u}from"./LightDismissController-4pH8cdko.js";import{S as g}from"./SlotController-Z6eG7LSZ.js";import{o as b}from"./observe-D0n0zOfU.js";import{c as m}from"./cond-CI1KbneT.js";import{f as y}from"./fsm-Bq5jMQrK.js";import{c as k}from"./number-Dg2vCfGd.js";import{s as f}from"./Component-DSU3Qp0O.js";import{s as w}from"./Sticky-DqnqENYN.js";import z from"./Icon.js";import"lit/directives/ref.js";import"./FocusableMixin-BlQLNPdJ.js";import"./LocalizeController.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./Button.js";import"./LightDomController-DIwtVelV.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";import"lit/directives/if-defined.js";import"./VisuallyHidden.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";const x=()=>!0;class S{constructor(n,e){n.addController(this),this.options={enabled:x,...e}}hostConnected(){"undefined"!=typeof BroadcastChannel&&(this.channel=new BroadcastChannel(this.options.channelName),this.channel.addEventListener("message",this))}hostDisconnected(){var n,e;null===(n=this.channel)||void 0===n||n.removeEventListener("message",this),null===(e=this.channel)||void 0===e||e.close()}handleEvent(n){this.options.enabled()&&this.options.onMessage(n.data)}post(n){var e;this.options.enabled()&&(null===(e=this.channel)||void 0===e||e.postMessage(n))}}function _(n,e,t=JSON.stringify,a=JSON.parse){return{get value(){try{const t=localStorage.getItem(n);return t?a(t):e}catch(n){return e}},set value(e){try{localStorage.setItem(n,t(e))}catch(n){}}}}const C=t`:host{--_n-layout-padding:var(--n-layout-padding, var(--n-space-l));--_n-layout-drawer-inline-size:var(--n-layout-drawer-inline-size, 320px);--_n-layout-background-color:var(--n-layout-background-color, var(--n-color-background));--_n-layout-nav-transition-duration:var(--n-transition-mobile);--_n-layout-header-size:var(--n-space-xxl);--_n-layout-header-size-s:calc(var(--n-space-xl) + var(--n-space-m));--_n-layout-footer-size:var(--n-space-xxl);background:var(--_n-layout-background-color);color:var(--n-color-text);min-block-size:100vh}.n-layout{block-size:calc(100vh - var(--n-sticky-top))}.n-layout-main,.n-layout-nav{background:var(--_n-layout-background-color);min-block-size:100%}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--_n-layout-nav-width);z-index:var(--n-index-nav);inset-block-start:0;inset-inline-start:0;inset-block-end:0;transform:translateX(var(--n-nav-transform));box-shadow:var(--n-box-shadow-nav)}.n-layout-main{position:relative}main{padding:var(--_n-layout-padding)}.n-has-top-bar{--_n-sticky-top:var(--_n-layout-header-size)}:host([sticky]) .n-has-header{--_n-sticky-size:var(--_n-layout-header-size)}:host([sticky-footer]) .n-has-footer slot[name=footer]::slotted(*){position:fixed}aside{position:fixed;z-index:var(--n-index-nav);inset-block:0;inset-inline-end:0;inline-size:var(--_n-layout-drawer-inline-size);max-inline-size:100%;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-nav)}@media (min-width:1240px){.n-has-drawer .n-layout-content{margin-inline-end:var(--_n-layout-drawer-inline-size)}aside{box-shadow:var(--n-box-shadow-header);border-inline-start:1px solid var(--n-color-border)}}slot[name=drawer]::slotted(*){block-size:100%!important}.n-has-top-bar aside{inset-block-start:var(--_n-layout-header-size)}:is(.n-has-top-bar,.n-has-header) ::slotted(nord-notification-group){inset-block-start:var(--_n-layout-header-size)}:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(-110%)}.n-rtl:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(110%)}[data-screen=narrow] .n-layout-nav{z-index:var(--n-index-popout);transition:transform var(--_n-layout-nav-transition-duration)}[data-screen=wide]:is(:not([data-nav=opened],[data-nav=closed])) .n-layout-nav{transition:transform var(--_n-layout-nav-transition-duration);border-start-end-radius:var(--n-border-radius);border-end-end-radius:var(--n-border-radius);min-block-size:0;inset-block-start:calc(var(--n-space-m) * 4);inset-block-end:var(--n-space-l)}[data-screen=wide][data-nav=opened] .n-layout-nav{border-inline-end:1px solid var(--n-color-border);box-shadow:none}[data-screen=wide][data-nav=opened]:not(.n-has-top-bar) .n-layout-nav{--n-navigation-header-padding-inline:calc(var(--n-space-l) / 1.5)}.n-has-top-bar[data-screen=wide][data-nav=opened] .n-layout-nav{--n-navigation-header-background:var(--n-color-accent-secondary);--n-navigation-header-color:var(--n-color-text-on-accent);--n-navigation-header-divider:none;--n-navigation-header-toggle-icon-color:rgb(255, 255, 255, 0.85);--n-navigation-header-focus-style:0 0 0 1px #fff inset,inset 0 0 0 100px rgb(255, 255, 255, 0.2);border-color:transparent;border-image-slice:1;border-image-source:linear-gradient(to bottom,rgb(255,255,255,.16) calc(var(--_n-layout-header-size) + 1px),var(--n-color-border) calc(var(--_n-layout-header-size) + 1px));background:var(--n-color-accent-secondary);box-shadow:0 0 transparent}[data-screen=wide]:not([data-nav=opened]) .n-layout-nav{--n-navigation-header-block-size:var(--_n-layout-header-size-s);overflow:hidden}[data-screen=wide][data-nav=opened] .n-layout-main{margin-inline-start:var(--_n-layout-nav-width)}[data-screen=narrow] .n-layout-main::after{content:'';position:fixed;inset:0;z-index:var(--n-index-overlay);transition:opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);background:var(--n-color-overlay)}[data-screen=narrow]:not([data-nav=opened],[data-nav=peek],[data-nav=blocked]) .n-layout-main::after{visibility:hidden;opacity:0}.n-resize{touch-action:none;position:absolute;min-block-size:100%;inset-block:0;inset-inline-end:-8px;inline-size:10px;background:0 0}[data-nav=opened] .n-resize{cursor:col-resize}.n-resize::after{content:'';position:absolute;z-index:var(--n-index-sticky);inset-block:0;inset-inline-end:5px;inline-size:3px;background:var(--n-color-accent);transition:opacity var(--n-transition-slowly);opacity:0}.n-resize:focus{outline:0}.n-dragging .n-resize::after,.n-resize:focus::after,[data-nav=opened] .n-resize:hover::after{opacity:1;transition-delay:.15s}@supports selector(:focus-visible){.n-resize:focus::after{opacity:0}.n-resize:focus-visible::after{opacity:1}}.n-dragging{cursor:col-resize!important;user-select:none}:host([padding=none]){--_n-layout-padding:var(--n-layout-padding, 0)}.n-top-bar-container{position:fixed;inset-inline-start:var(--_n-layout-nav-width);inset-inline-end:0;inset-block-start:0;z-index:var(--n-index-top-bar)}[data-screen=narrow] .n-top-bar-container,[data-screen=wide]:not([data-nav=opened]) .n-top-bar-container{inset-inline-start:0}.n-has-top-bar{--_n-layout-header-size:var(--_n-layout-header-size-s);--n-navigation-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar :is([name=header],[name=drawer])::slotted(*){--n-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar .n-layout-main{inset-block-start:var(--_n-layout-header-size)}.n-nav-toggle-container{position:absolute;padding-inline-start:var(--n-space-s);block-size:var(--_n-layout-header-size);display:flex;align-items:center;z-index:calc(var(--n-index-top-bar) + 1)}[data-screen=narrow] .n-nav-toggle-container{padding-inline-start:var(--n-space-xs)}.n-has-top-bar .n-nav-toggle-container,:host([sticky]) .n-nav-toggle-container{position:fixed;inset-block-start:0}[data-screen=wide][data-nav=opened] .n-nav-toggle-container{display:none}.n-has-nav[data-screen=wide]:not([data-nav=opened]) ::slotted(nord-top-bar),.n-has-nav[data-screen=wide]:not([data-nav=opened],.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:calc(var(--n-space-l) * 1.8)}.n-has-nav[data-screen=narrow] ::slotted(nord-top-bar),.n-has-nav[data-screen=narrow]:not(.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:var(--n-space-xl)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)){--n-button-background-color:transparent;color:rgb(255,255,255,.85)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)):focus{--n-button-background-color:rgb(0, 0, 0, 0.2)}.n-collapse-btn{--_n-collapse-btn-size:var(--n-space-l);position:fixed;inset-inline-start:calc(var(--_n-layout-nav-width) - (var(--_n-collapse-btn-size)/ 2));inset-block-start:calc(var(--_n-layout-header-size) + (var(--_n-layout-header-size) - var(--_n-collapse-btn-size))/ 2);border-radius:var(--n-border-radius-circle);block-size:var(--_n-collapse-btn-size);inline-size:var(--_n-collapse-btn-size);display:flex;align-items:center;justify-content:center;color:var(--n-color-icon);background:var(--n-color-button);box-shadow:var(--n-box-shadow-card);border:0;z-index:var(--n-index-sticky);cursor:pointer;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly),background-color var(--n-transition-quickly),color var(--n-transition-quickly)}.n-collapse-btn:hover{background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-collapse-btn:focus{outline:0;box-shadow:0 0 0 2px var(--n-color-accent),var(--n-box-shadow)}[data-screen=narrow] .n-collapse-btn,[data-screen=wide]:not([data-nav=opened]) .n-collapse-btn{display:none}@media (hover:hover) and (pointer:fine){.n-collapse-btn{opacity:0;visibility:hidden}.n-collapse-btn:focus,.n-layout-nav:hover .n-collapse-btn{opacity:1;visibility:visible}}.n-collapse-btn nord-icon{transform:rotate(180deg)}.n-rtl .n-collapse-btn nord-icon{transform:rotate(0)}slot[name=footer]::slotted(*){inset-inline-start:var(--_n-layout-nav-width);inset-inline-end:0;inset-block-end:0}@media (min-width:1240px){.n-has-drawer slot[name=footer]::slotted(*){inset-inline-end:var(--_n-layout-drawer-inline-size)}}[data-screen=narrow] slot[name=footer]::slotted(*),[data-screen=wide]:not([data-nav=opened]) slot[name=footer]::slotted(*){inset-inline-start:0}:host([sticky-footer]) .n-has-footer .n-layout-content{padding-block-end:var(--_n-layout-footer-size)}`;z.registerIcon(e);const j="undefined"!=typeof matchMedia?matchMedia("(min-width: 768px)"):{matches:!1,addEventListener(){}},N=_("nord-layout.navWidth",250),T=_("nord-layout.navOpen",!0),$=y({opened:{toggle:"closed",close:"closed"},closed:{toggle:"opened",open:"opened",focusin:"peek",pointerenter:"peek"},peek:{toggle:"opened",focusout:"unpeek",pointerleave:"wait",dropdownOpen:"blocked",click:"unpeek",open:"opened"},blocked:{dropdownClose:"peek",open:"opened"},wait:{toggle:"opened",focusin:"peek",pointerenter:"peek",timeout:"unpeek"},unpeek:{toggle:"opened",focusin:"peek",pointerenter:"peek",transitionend:"closed"}});let D=class extends a{constructor(){super(...arguments),this.navSlot=new g(this,"nav"),this.drawerSlot=new g(this,"drawer"),this.topBarSlot=new g(this,"top-bar"),this.headerSlot=new g(this,"header"),this.footerSlot=new g(this,"footer"),this.direction=new v(this),this.events=new p(this),this.lightDismiss=new u(this,{isOpen:()=>"opened"===this.navState&&!this.wideScreen,onDismiss:()=>this.navTransition("close"),isDismissible:n=>n!==this.navEl}),this.broadcast=new S(this,{channelName:"nord-layout-nav-state",enabled:()=>this.syncNavState&&this.wideScreen,onMessage:n=>{"navOpen"in n&&(this.navOpen=n.navOpen),"navWidth"in n&&(this.navWidth=n.navWidth)}}),this.navWidth=N.value,this.isDragging=!1,this.wideScreen=j.matches,this.persistNavState=!1,this.syncNavState=!1,this.padding="m",this.sticky=!1,this.stickyFooter=!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)}willUpdate(){this.hasUpdated||(this.isNarrow||this.persistNavState&&!1===T.value?this.navState="closed":this.navState="opened")}render(){const{navWidth:n,navState:e,navSlot:t,headerSlot:a,footerSlot:s,topBarSlot:r,drawerSlot:l,isDragging:d,direction:v}=this,p="opened"===e&&this.wideScreen?n:250;return o`<div class="${c({"n-layout":!0,"n-rtl":v.isRTL,"n-dragging":d,"n-has-header":a.hasContent,"n-has-footer":s.hasContent,"n-has-top-bar":r.hasContent,"n-has-drawer":l.hasContent,"n-has-nav":t.hasContent})}" style="${h({"--_n-layout-nav-width":`${p}px`})}" data-nav="${t.hasContent?e:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}"><div class="n-layout-nav" ?hidden="${t.isEmpty}" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav" @click="${this.handleNavClick}"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" @pointerdown="${m("opened"===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}">${t.hasContent?this.renderNavToggle():i}<div class="n-top-bar-container"><slot name="top-bar"></slot></div><div class="n-layout-content"><div class="n-sticky"><slot name="header"></slot></div><main><slot></slot></main><slot name="footer"></slot></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}renderNavToggle(){return o`<div class="n-nav-toggle-container"><slot name="nav-toggle" @click="${this.handleToggleClick}" @mouseover="${this.handleMouseEnter}" @mouseout="${this.handleMouseLeave}"><nord-nav-toggle></nord-nav-toggle></slot></div>`}renderNavCollapse(){return o`<button class="n-collapse-btn" @click="${this.handleToggleClick}"><nord-icon name="navigation-toggle-lock" size="s"></nord-icon></button>`}handleNavWidthChange(){N.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(n){this.isDragging||this.setNavWidth(Math.max(this.navWidth,250)),this.navTransition(this.navOpen?"open":"close"),this.persistNavState&&(T.value=this.navOpen),null!=n&&this.broadcast.post({navOpen:this.navOpen})}navTransition(n){this.navState=$.transition(this.navState,n)}handleNavClick(n){if(!n.defaultPrevented&&!this.wideScreen){const t=n.target;(n=>"nord-nav-item"===n.localName)(e=t)&&!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:t}}=this;switch(n.key){case"ArrowLeft":this.setNavWidth(e+(t?-30:30));break;case"ArrowRight":this.setNavWidth(e+(t?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}this.broadcast.post({navWidth:this.navWidth}),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,this.broadcast.post({navWidth:this.navWidth})}handleDrag(n){const e=this.direction.isRTL?this.clientWidth-n.clientX:n.clientX;this.setNavWidth(e),this.navTransition(e>=100?"open":"close")}};D.styles=[f,w,C],n([s(".n-layout-nav",!0)],D.prototype,"navEl",void 0),n([r()],D.prototype,"navWidth",void 0),n([r()],D.prototype,"isDragging",void 0),n([r()],D.prototype,"navState",void 0),n([r()],D.prototype,"wideScreen",void 0),n([l({reflect:!0,type:Boolean,attribute:"nav-open"})],D.prototype,"navOpen",void 0),n([l({reflect:!0,type:Boolean,attribute:"persist-nav-state"})],D.prototype,"persistNavState",void 0),n([l({type:Boolean,reflect:!0,attribute:"sync-nav-state"})],D.prototype,"syncNavState",void 0),n([l({reflect:!0})],D.prototype,"padding",void 0),n([l({type:Boolean,reflect:!0})],D.prototype,"sticky",void 0),n([l({type:Boolean,reflect:!0,attribute:"sticky-footer"})],D.prototype,"stickyFooter",void 0),n([b("navWidth","updated")],D.prototype,"handleNavWidthChange",null),n([b("navState")],D.prototype,"handleNavStateChange",null),n([b("navOpen","updated")],D.prototype,"handleOpenChange",null),D=n([d("nord-layout")],D);var W=D;export{W as default};
 //# sourceMappingURL=Layout.js.map

package/lib/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","sources":["../src/common/controllers/BroadcastChannelController.ts","../src/common/storage.ts","../src/layout/Layout.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\ntype Options<T> = {\n  channelName: string\n  onMessage: (message: T) => void\n  enabled?: () => boolean\n}\n\nconst defaultEnabled = () => true\n\nexport class BroadcastChannelController<T> implements ReactiveController {\n  private channel?: BroadcastChannel\n  private options: Required<Options<T>>\n\n  constructor(host: ReactiveControllerHost, options: Options<T>) {\n    host.addController(this)\n    this.options = { enabled: defaultEnabled, ...options }\n  }\n\n  hostConnected(): void {\n    if (typeof BroadcastChannel !== \"undefined\") {\n      this.channel = new BroadcastChannel(this.options.channelName)\n      this.channel.addEventListener(\"message\", this)\n    }\n  }\n\n  hostDisconnected(): void {\n    this.channel?.removeEventListener(\"message\", this)\n    this.channel?.close()\n  }\n\n  handleEvent(event: MessageEvent<T>) {\n    if (this.options.enabled()) {\n      this.options.onMessage(event.data)\n    }\n  }\n\n  post(message: T) {\n    if (this.options.enabled()) {\n      this.channel?.postMessage(message)\n    }\n  }\n}\n","/**\n * Thin wrapper around local storage which simplifies (de)serialization and default values.\n * By default, (de)serializes as JSON.\n */\nexport function storage<T>(\n  key: string,\n  defaultValue: T,\n  serialize: (value: T) => string = JSON.stringify,\n  deserialize: (value: string) => T = JSON.parse\n) {\n  return {\n    get value(): T {\n      try {\n        const value = localStorage.getItem(key)\n        return value ? deserialize(value) : defaultValue\n      } 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","/* 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 { BroadcastChannelController } from \"../common/controllers/BroadcastChannelController.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 =\n  typeof matchMedia !== \"undefined\"\n    ? matchMedia(\"(min-width: 768px)\")\n    : ({\n        matches: false,\n        addEventListener() {\n          /* noop */\n        },\n      } as unknown as MediaQueryList)\n\nconst navWidthStore = storage(\"nord-layout.navWidth\", NAV_DEFAULT_WIDTH)\nconst navOpenStore = storage(\"nord-layout.navOpen\", true)\n\nconst navMachine = fsm({\n  opened: {\n    toggle: \"closed\",\n    close: \"closed\",\n  },\n  closed: {\n    toggle: \"opened\",\n    open: \"opened\",\n    focusin: \"peek\",\n    pointerenter: \"peek\",\n  },\n  peek: {\n    toggle: \"opened\",\n    focusout: \"unpeek\",\n    pointerleave: \"wait\",\n    dropdownOpen: \"blocked\",\n    click: \"unpeek\",\n    open: \"opened\",\n  },\n  blocked: {\n    dropdownClose: \"peek\",\n    open: \"opened\",\n  },\n  wait: {\n    toggle: \"opened\",\n    focusin: \"peek\",\n    pointerenter: \"peek\",\n    timeout: \"unpeek\",\n  },\n  unpeek: {\n    toggle: \"opened\",\n    focusin: \"peek\",\n    pointerenter: \"peek\",\n    transitionend: \"closed\",\n  },\n})\n\ntype NavState = States<typeof navMachine>\ntype NavEvent = Events<typeof navMachine>\n\nconst isNavItem = (el: HTMLElement): el is NavItem => el.localName === \"nord-nav-item\"\nconst isNavItemLeaf = (el: HTMLElement) => isNavItem(el) && !el.hasSubNav\n\n/**\n * Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n *\n * @status ready\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot top-bar - Used to place the [Top Bar](../top-bar/) component.\n * @slot header - Used to place content inside the header section. This slot can be made sticky by utilizing the `sticky` property on the layout component.\n * @slot footer - Used to place content inside the footer section. This slot can be made sticky by utilizing the `stickyFooter` property on the layout component.\n * @slot drawer - Used to place additional content/details relating to a selected item.\n * @slot nav-toggle - Used to place a own nav-toggle component, for cases where you might need to add a tooltip.\n *\n * @cssprop [--n-layout-padding=var(--n-space-l)] - Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-layout-drawer-inline-size=320px] - Controls the width of the drawer area, when used.\n * @cssprop [--n-layout-background-color=var(--n-color-background)] - Controls the background color of the layout, using [color tokens](/tokens/#color).\n */\n@customElement(\"nord-layout\")\nexport default class Layout extends LitElement {\n  static styles = [componentStyle, stickyStyle, style]\n\n  private peekTimeoutId?: ReturnType<typeof setTimeout>\n\n  private navSlot = new SlotController(this, \"nav\")\n  private drawerSlot = new SlotController(this, \"drawer\")\n  private topBarSlot = new SlotController(this, \"top-bar\")\n  private headerSlot = new SlotController(this, \"header\")\n  private footerSlot = new SlotController(this, \"footer\")\n  private direction = new DirectionController(this)\n  private events = new EventController(this)\n  private lightDismiss = new LightDismissController(this, {\n    isOpen: () => this.navState === \"opened\" && !this.wideScreen,\n    onDismiss: () => this.navTransition(\"close\"),\n    isDismissible: node => node !== this.navEl,\n  })\n\n  private broadcast = new BroadcastChannelController<{ navOpen: boolean } | { navWidth: number }>(this, {\n    channelName: \"nord-layout-nav-state\",\n    enabled: () => this.syncNavState && this.wideScreen,\n    onMessage: data => {\n      if (\"navOpen\" in data) {\n        this.navOpen = data.navOpen\n      }\n      if (\"navWidth\" in data) {\n        this.navWidth = data.navWidth\n      }\n    },\n  })\n\n  @query(\".n-layout-nav\", true) private navEl!: HTMLDivElement\n\n  @state() private navWidth = navWidthStore.value\n  @state() private isDragging = false\n  @state() private navState!: NavState\n  @state() private wideScreen = mediaQuery.matches\n\n  /**\n   * Controls whether the navigation is hidden off-screen or not.\n   * Defaults to `true` for wide viewports, and `false` otherwise.\n   */\n  @property({ reflect: true, type: Boolean, attribute: \"nav-open\" }) navOpen!: boolean\n\n  /**\n   * Controls whether the navigation's open/closed state is persisted across page loads.\n   * This is useful for multi-page apps, where clicks on links trigger a full page load.\n   */\n  @property({ reflect: true, type: Boolean, attribute: \"persist-nav-state\" }) persistNavState = false\n\n  /**\n   * Controls whether the navigation's open/closed state and width is synced across tabs/windows on the same origin.\n   * This is useful for long-lived app sessions where you may have multiple tabs/windows open at once.\n   */\n  @property({ type: Boolean, reflect: true, attribute: \"sync-nav-state\" }) syncNavState = false\n\n  /**\n   * Controls the padding of the default main section slot. When set to “none”,\n   * the nav and header slots will still have padding.\n   */\n  @property({ reflect: true }) padding: \"m\" | \"none\" = \"m\"\n\n  /**\n   * Controls whether the layout's header has sticky positioning.\n   */\n  @property({ type: Boolean, reflect: true }) sticky: boolean = false\n\n  /**\n   * Controls whether the layout's footer has sticky positioning.\n   */\n  @property({ type: Boolean, reflect: true, attribute: \"sticky-footer\" }) stickyFooter: boolean = false\n\n  /**\n   * A getter whose values reflects whether the layout component considers the viewport to be narrow or not.\n   * A narrow viewport is considered to be less than 768px wide.\n   */\n  get isNarrow(): boolean {\n    return !this.wideScreen\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n  }\n\n  willUpdate() {\n    // we only want this logic to run once, before first render\n    if (this.hasUpdated) {\n      return\n    }\n\n    // on mobile it should always start closed\n    if (this.isNarrow) {\n      this.navState = \"closed\"\n    }\n    // if nav state is persisted, and it was previously closed, start closed\n    else if (this.persistNavState && navOpenStore.value === false) {\n      this.navState = \"closed\"\n    }\n    // otherwise start open\n    else {\n      this.navState = \"opened\"\n    }\n  }\n\n  render() {\n    const { navWidth, navState, navSlot, headerSlot, footerSlot, topBarSlot, drawerSlot, isDragging, direction } = this\n    const adjustedNavWidth = navState === \"opened\" && this.wideScreen ? navWidth : 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-footer\": footerSlot.hasContent,\n          \"n-has-top-bar\": topBarSlot.hasContent,\n          \"n-has-drawer\": drawerSlot.hasContent,\n          \"n-has-nav\": navSlot.hasContent,\n        })}\n        style=${styleMap({\n          \"--_n-layout-nav-width\": `${adjustedNavWidth}px`,\n        })}\n        data-nav=${navSlot.hasContent ? navState : \"closed\"}\n        data-screen=${this.wideScreen ? \"wide\" : \"narrow\"}\n      >\n        <div\n          class=\"n-layout-nav\"\n          ?hidden=${navSlot.isEmpty}\n          @focusin=${this.handleNavFocus}\n          @mouseenter=${this.handleMouseEnter}\n          @mouseleave=${this.handleMouseLeave}\n          @open=${this.handleDropdownOpen}\n          @close=${this.handleDropdownClose}\n        >\n          <slot name=\"nav\" @click=${this.handleNavClick}></slot>\n          <div\n            class=\"n-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            @pointerdown=${cond(navState === \"opened\", this.startDragging)}\n            @pointermove=${cond(isDragging, this.handleDrag)}\n            @pointerleave=${this.stopDragging}\n            @pointerup=${this.stopDragging}\n            @keydown=${this.handleKeyboardResize}\n            ?hidden=${this.isNarrow}\n          ></div>\n          ${this.renderNavCollapse()}\n        </div>\n\n        <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleMainClick}>\n          ${navSlot.hasContent ? this.renderNavToggle() : nothing}\n\n          <div class=\"n-top-bar-container\">\n            <slot name=\"top-bar\"></slot>\n          </div>\n\n          <div class=\"n-layout-content\">\n            <div class=\"n-sticky\">\n              <slot name=\"header\"></slot>\n            </div>\n            <main>\n              <slot></slot>\n            </main>\n            <slot name=\"footer\"></slot>\n          </div>\n\n          <aside ?hidden=${this.drawerSlot.isEmpty}>\n            <slot name=\"drawer\"></slot>\n          </aside>\n        </div>\n      </div>\n    `\n  }\n\n  private renderNavToggle() {\n    /* 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    navWidthStore.value = this.navWidth\n  }\n\n  @observe(\"navState\")\n  protected handleNavStateChange(prev: NavState) {\n    if (prev === \"wait\" && this.peekTimeoutId) {\n      clearTimeout(this.peekTimeoutId)\n    }\n    if (prev === \"unpeek\") {\n      this.navEl.removeEventListener(\"transitionend\", this.handleTransitionEnd)\n    }\n\n    switch (this.navState) {\n      case \"closed\":\n        this.navOpen = false\n        break\n      case \"opened\":\n        this.navOpen = true\n        break\n      case \"wait\":\n        this.peekTimeoutId = setTimeout(() => this.navTransition(\"timeout\"), NAV_PEEK_DELAY)\n        break\n      case \"unpeek\":\n        this.navEl.addEventListener(\"transitionend\", this.handleTransitionEnd, { once: true })\n        break\n      default:\n        break\n    }\n  }\n\n  @observe(\"navOpen\", \"updated\")\n  protected handleOpenChange(prev: boolean) {\n    if (!this.isDragging) {\n      // when opening nav, it should restore to default width (or larger).\n      // unless it is being dragged, in which case the drag width wins\n      this.setNavWidth(Math.max(this.navWidth, NAV_DEFAULT_WIDTH))\n    }\n\n    this.navTransition(this.navOpen ? \"open\" : \"close\")\n\n    if (this.persistNavState) {\n      navOpenStore.value = this.navOpen\n    }\n\n    // skip first update, we only want subsequent changes\n    if (prev != null) {\n      this.broadcast.post({ navOpen: this.navOpen })\n    }\n  }\n\n  /* ---------------------------------------------\n  / NAVIGATION OPEN/CLOSE LOGIC\n  / --------------------------------------------- */\n\n  private navTransition(event: NavEvent) {\n    this.navState = navMachine.transition(this.navState, event)\n  }\n\n  private handleNavClick(e: Event) {\n    if (!e.defaultPrevented && !this.wideScreen) {\n      const target = e.target as HTMLElement\n\n      if (isNavItemLeaf(target)) {\n        this.navTransition(\"close\")\n      }\n    }\n  }\n\n  private handleMainClick() {\n    this.navTransition(\"click\")\n  }\n\n  private handleDropdownOpen(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === \"nord-dropdown\") {\n      this.navTransition(\"dropdownOpen\")\n    }\n  }\n\n  private handleDropdownClose(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === \"nord-dropdown\") {\n      this.navTransition(\"dropdownClose\")\n    }\n  }\n\n  private handleMediaQueryChange = () => {\n    this.wideScreen = mediaQuery.matches\n    this.navTransition(this.wideScreen ? \"open\" : \"close\")\n  }\n\n  private handleToggleClick = () => {\n    this.navTransition(\"toggle\")\n  }\n\n  private handleNavFocus = () => {\n    this.navTransition(\"focusin\")\n  }\n\n  private handleMainFocus = () => {\n    this.navTransition(\"focusout\")\n  }\n\n  private handleMouseEnter = () => {\n    if (this.wideScreen) {\n      this.navTransition(\"pointerenter\")\n    }\n  }\n\n  private handleMouseLeave = () => {\n    this.navTransition(\"pointerleave\")\n  }\n\n  private handleTransitionEnd = () => {\n    this.navTransition(\"transitionend\")\n  }\n\n  /* ---------------------------------------------\n  / RESIZE LOGIC\n  / --------------------------------------------- */\n\n  private handleKeyboardResize(e: KeyboardEvent) {\n    const {\n      navWidth,\n      direction: { isLTR },\n    } = this\n\n    switch (e.key) {\n      case \"ArrowLeft\":\n        this.setNavWidth(navWidth + (isLTR ? -NAV_RESIZE_STEP : NAV_RESIZE_STEP))\n        break\n      case \"ArrowRight\":\n        this.setNavWidth(navWidth + (isLTR ? NAV_RESIZE_STEP : -NAV_RESIZE_STEP))\n        break\n      case \"Enter\":\n        this.navTransition(\"toggle\")\n        break\n      case \"Home\":\n        this.setNavWidth(NAV_MIN_WIDTH)\n        break\n      case \"End\":\n        this.setNavWidth(NAV_MAX_WIDTH)\n        break\n      default:\n        return\n    }\n\n    this.broadcast.post({ navWidth: this.navWidth })\n    e.preventDefault()\n  }\n\n  private setNavWidth(width: number) {\n    this.navWidth = clamp(Math.round(width), 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    this.broadcast.post({ navWidth: this.navWidth })\n  }\n\n  private handleDrag(e: PointerEvent) {\n    const width = this.direction.isRTL ? this.clientWidth - e.clientX : e.clientX\n\n    this.setNavWidth(width)\n    this.navTransition(width >= NAV_COLLAPSE_WIDTH ? \"open\" : \"close\")\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-layout\": Layout\n  }\n}\n"],"names":["defaultEnabled","BroadcastChannelController","constructor","host","options","addController","this","enabled","hostConnected","BroadcastChannel","channel","channelName","addEventListener","hostDisconnected","_a","removeEventListener","_b","close","handleEvent","event","onMessage","data","post","message","postMessage","storage","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","setItem","Icon","registerIcon","lockIcon","mediaQuery","matchMedia","matches","navWidthStore","navOpenStore","navMachine","fsm","opened","toggle","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","navSlot","SlotController","drawerSlot","topBarSlot","headerSlot","footerSlot","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","wideScreen","onDismiss","navTransition","isDismissible","node","navEl","broadcast","syncNavState","navOpen","navWidth","isDragging","persistNavState","padding","sticky","stickyFooter","handleMediaQueryChange","handleToggleClick","handleNavFocus","handleMainFocus","handleMouseEnter","handleMouseLeave","handleTransitionEnd","isNarrow","connectedCallback","super","listen","willUpdate","hasUpdated","render","adjustedNavWidth","html","classMap","isRTL","hasContent","styleMap","isEmpty","handleDropdownOpen","handleDropdownClose","handleNavClick","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","renderNavCollapse","handleMainClick","renderNavToggle","nothing","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","setTimeout","once","handleOpenChange","setNavWidth","Math","max","transition","e","defaultPrevented","target","el","localName","isNavItem","hasSubNav","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","stickyStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"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"}
+{"version":3,"file":"Layout.js","sources":["../src/common/controllers/BroadcastChannelController.ts","../src/common/storage.ts","../src/layout/Layout.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit'\n\ninterface Options<T> {\n  channelName: string\n  onMessage: (message: T) => void\n  enabled?: () => boolean\n}\n\nconst defaultEnabled = () => true\n\nexport class BroadcastChannelController<T> implements ReactiveController {\n  private channel?: BroadcastChannel\n  private options: Required<Options<T>>\n\n  constructor(host: ReactiveControllerHost, options: Options<T>) {\n    host.addController(this)\n    this.options = { enabled: defaultEnabled, ...options }\n  }\n\n  hostConnected(): void {\n    if (typeof BroadcastChannel !== 'undefined') {\n      this.channel = new BroadcastChannel(this.options.channelName)\n      this.channel.addEventListener('message', this)\n    }\n  }\n\n  hostDisconnected(): void {\n    this.channel?.removeEventListener('message', this)\n    this.channel?.close()\n  }\n\n  handleEvent(event: MessageEvent<T>) {\n    if (this.options.enabled()) {\n      this.options.onMessage(event.data)\n    }\n  }\n\n  post(message: T) {\n    if (this.options.enabled()) {\n      this.channel?.postMessage(message)\n    }\n  }\n}\n","/**\n * Thin wrapper around local storage which simplifies (de)serialization and default values.\n * By default, (de)serializes as JSON.\n */\nexport function storage<T>(\n  key: string,\n  defaultValue: T,\n  serialize: (value: T) => string = JSON.stringify,\n  deserialize: (value: string) => T = JSON.parse,\n) {\n  return {\n    get value(): T {\n      try {\n        const value = localStorage.getItem(key)\n        return value ? deserialize(value) : defaultValue\n      }\n      catch {\n        return defaultValue\n      }\n    },\n\n    set value(value: T) {\n      try {\n        localStorage.setItem(key, serialize(value))\n      }\n      catch {\n        //  nothing we can do here\n      }\n    },\n  }\n}\n","import type { Events, States } from '../common/fsm.js'\nimport type NavItem from '../nav-item/NavItem.js'\nimport * as lockIcon from '@nordhealth/icons/lib/assets/navigation-toggle-lock.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { BroadcastChannelController } from '../common/controllers/BroadcastChannelController.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport { LightDismissController } from '../common/controllers/LightDismissController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { cond } from '../common/directives/cond.js'\nimport { fsm } from '../common/fsm.js'\nimport { clamp } from '../common/number.js'\nimport { storage } from '../common/storage.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport stickyStyle from '../common/styles/Sticky.css'\n\nimport Icon from '../icon/Icon.js'\nimport style from './Layout.css'\nimport '../nav-toggle/NavToggle.js'\n\nIcon.registerIcon(lockIcon)\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\n\nconst mediaQuery\n  = typeof matchMedia !== 'undefined'\n    ? matchMedia('(min-width: 768px)')\n    : ({\n        matches: false,\n        addEventListener() {\n          /* noop */\n        },\n      } as unknown as MediaQueryList)\n\nconst navWidthStore = storage('nord-layout.navWidth', NAV_DEFAULT_WIDTH)\nconst navOpenStore = storage('nord-layout.navOpen', true)\n\nconst navMachine = fsm({\n  opened: {\n    toggle: 'closed',\n    close: 'closed',\n  },\n  closed: {\n    toggle: 'opened',\n    open: 'opened',\n    focusin: 'peek',\n    pointerenter: 'peek',\n  },\n  peek: {\n    toggle: 'opened',\n    focusout: 'unpeek',\n    pointerleave: 'wait',\n    dropdownOpen: 'blocked',\n    click: 'unpeek',\n    open: 'opened',\n  },\n  blocked: {\n    dropdownClose: 'peek',\n    open: 'opened',\n  },\n  wait: {\n    toggle: 'opened',\n    focusin: 'peek',\n    pointerenter: 'peek',\n    timeout: 'unpeek',\n  },\n  unpeek: {\n    toggle: 'opened',\n    focusin: 'peek',\n    pointerenter: 'peek',\n    transitionend: 'closed',\n  },\n})\n\ntype NavState = States<typeof navMachine>\ntype NavEvent = Events<typeof navMachine>\n\nconst isNavItem = (el: HTMLElement): el is NavItem => el.localName === 'nord-nav-item'\nconst isNavItemLeaf = (el: HTMLElement) => isNavItem(el) && !el.hasSubNav\n\n/**\n * Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n *\n * @status ready\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot top-bar - Used to place the [Top Bar](../top-bar/) component.\n * @slot header - Used to place content inside the header section. This slot can be made sticky by utilizing the `sticky` property on the layout component.\n * @slot footer - Used to place content inside the footer section. This slot can be made sticky by utilizing the `stickyFooter` property on the layout component.\n * @slot drawer - Used to place additional content/details relating to a selected item.\n * @slot nav-toggle - Used to place a own nav-toggle component, for cases where you might need to add a tooltip.\n *\n * @cssprop [--n-layout-padding=var(--n-space-l)] - Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-layout-drawer-inline-size=320px] - Controls the width of the drawer area, when used.\n * @cssprop [--n-layout-background-color=var(--n-color-background)] - Controls the background color of the layout, using [color tokens](/tokens/#color).\n */\n@customElement('nord-layout')\nexport default class Layout extends LitElement {\n  static styles = [componentStyle, stickyStyle, style]\n\n  private peekTimeoutId?: ReturnType<typeof setTimeout>\n\n  private navSlot = new SlotController(this, 'nav')\n  private drawerSlot = new SlotController(this, 'drawer')\n  private topBarSlot = new SlotController(this, 'top-bar')\n  private headerSlot = new SlotController(this, 'header')\n  private footerSlot = new SlotController(this, 'footer')\n  private direction = new DirectionController(this)\n  private events = new EventController(this)\n  private lightDismiss = new LightDismissController(this, {\n    isOpen: () => this.navState === 'opened' && !this.wideScreen,\n    onDismiss: () => this.navTransition('close'),\n    isDismissible: node => node !== this.navEl,\n  })\n\n  private broadcast = new BroadcastChannelController<{ navOpen: boolean } | { navWidth: number }>(this, {\n    channelName: 'nord-layout-nav-state',\n    enabled: () => this.syncNavState && this.wideScreen,\n    onMessage: (data) => {\n      if ('navOpen' in data) {\n        this.navOpen = data.navOpen\n      }\n      if ('navWidth' in data) {\n        this.navWidth = data.navWidth\n      }\n    },\n  })\n\n  @query('.n-layout-nav', true) private navEl!: HTMLDivElement\n\n  @state() private navWidth = navWidthStore.value\n  @state() private isDragging = false\n  @state() private navState!: NavState\n  @state() private wideScreen = mediaQuery.matches\n\n  /**\n   * Controls whether the navigation is hidden off-screen or not.\n   * Defaults to `true` for wide viewports, and `false` otherwise.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'nav-open' }) navOpen!: boolean\n\n  /**\n   * Controls whether the navigation's open/closed state is persisted across page loads.\n   * This is useful for multi-page apps, where clicks on links trigger a full page load.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'persist-nav-state' }) persistNavState = false\n\n  /**\n   * Controls whether the navigation's open/closed state and width is synced across tabs/windows on the same origin.\n   * This is useful for long-lived app sessions where you may have multiple tabs/windows open at once.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'sync-nav-state' }) syncNavState = false\n\n  /**\n   * Controls the padding of the default main section slot. When set to “none”,\n   * the nav and header slots will still have padding.\n   */\n  @property({ reflect: true }) padding: 'm' | 'none' = 'm'\n\n  /**\n   * Controls whether the layout's header has sticky positioning.\n   */\n  @property({ type: Boolean, reflect: true }) sticky: boolean = false\n\n  /**\n   * Controls whether the layout's footer has sticky positioning.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'sticky-footer' }) stickyFooter: boolean = false\n\n  /**\n   * A getter whose values reflects whether the layout component considers the viewport to be narrow or not.\n   * A narrow viewport is considered to be less than 768px wide.\n   */\n  get isNarrow(): boolean {\n    return !this.wideScreen\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    this.events.listen(mediaQuery, 'change', this.handleMediaQueryChange)\n  }\n\n  willUpdate() {\n    // we only want this logic to run once, before first render\n    if (this.hasUpdated) {\n      return\n    }\n\n    // on mobile it should always start closed\n    if (this.isNarrow) {\n      this.navState = 'closed'\n    }\n    // if nav state is persisted, and it was previously closed, start closed\n    else if (this.persistNavState && navOpenStore.value === false) {\n      this.navState = 'closed'\n    }\n    // otherwise start open\n    else {\n      this.navState = 'opened'\n    }\n  }\n\n  render() {\n    const { navWidth, navState, navSlot, headerSlot, footerSlot, topBarSlot, drawerSlot, isDragging, direction } = this\n    const adjustedNavWidth = navState === 'opened' && this.wideScreen ? navWidth : 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-footer': footerSlot.hasContent,\n          'n-has-top-bar': topBarSlot.hasContent,\n          'n-has-drawer': drawerSlot.hasContent,\n          'n-has-nav': navSlot.hasContent,\n        })}\n        style=${styleMap({\n          '--_n-layout-nav-width': `${adjustedNavWidth}px`,\n        })}\n        data-nav=${navSlot.hasContent ? navState : 'closed'}\n        data-screen=${this.wideScreen ? 'wide' : 'narrow'}\n      >\n        <div\n          class=\"n-layout-nav\"\n          ?hidden=${navSlot.isEmpty}\n          @focusin=${this.handleNavFocus}\n          @mouseenter=${this.handleMouseEnter}\n          @mouseleave=${this.handleMouseLeave}\n          @open=${this.handleDropdownOpen}\n          @close=${this.handleDropdownClose}\n        >\n          <slot name=\"nav\" @click=${this.handleNavClick}></slot>\n          <div\n            class=\"n-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            @pointerdown=${cond(navState === 'opened', this.startDragging)}\n            @pointermove=${cond(isDragging, this.handleDrag)}\n            @pointerleave=${this.stopDragging}\n            @pointerup=${this.stopDragging}\n            @keydown=${this.handleKeyboardResize}\n            ?hidden=${this.isNarrow}\n          ></div>\n          ${this.renderNavCollapse()}\n        </div>\n\n        <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleMainClick}>\n          ${navSlot.hasContent ? this.renderNavToggle() : nothing}\n\n          <div class=\"n-top-bar-container\">\n            <slot name=\"top-bar\"></slot>\n          </div>\n\n          <div class=\"n-layout-content\">\n            <div class=\"n-sticky\">\n              <slot name=\"header\"></slot>\n            </div>\n            <main>\n              <slot></slot>\n            </main>\n            <slot name=\"footer\"></slot>\n          </div>\n\n          <aside ?hidden=${this.drawerSlot.isEmpty}>\n            <slot name=\"drawer\"></slot>\n          </aside>\n        </div>\n      </div>\n    `\n  }\n\n  private renderNavToggle() {\n    return html`\n      <div class=\"n-nav-toggle-container\">\n        <slot\n          name=\"nav-toggle\"\n          @click=${this.handleToggleClick}\n          @mouseover=${this.handleMouseEnter}\n          @mouseout=${this.handleMouseLeave}\n        >\n          <nord-nav-toggle></nord-nav-toggle>\n        </slot>\n      </div>\n    `\n  }\n\n  private renderNavCollapse() {\n    return html`\n      <button class=\"n-collapse-btn\" @click=${this.handleToggleClick}>\n        <nord-icon name=\"navigation-toggle-lock\" size=\"s\"></nord-icon>\n      </button>\n    `\n  }\n\n  @observe('navWidth', 'updated')\n  protected handleNavWidthChange() {\n    navWidthStore.value = this.navWidth\n  }\n\n  @observe('navState')\n  protected handleNavStateChange(prev: NavState) {\n    if (prev === 'wait' && this.peekTimeoutId) {\n      clearTimeout(this.peekTimeoutId)\n    }\n    if (prev === 'unpeek') {\n      this.navEl.removeEventListener('transitionend', this.handleTransitionEnd)\n    }\n\n    switch (this.navState) {\n      case 'closed':\n        this.navOpen = false\n        break\n      case 'opened':\n        this.navOpen = true\n        break\n      case 'wait':\n        this.peekTimeoutId = setTimeout(() => this.navTransition('timeout'), NAV_PEEK_DELAY)\n        break\n      case 'unpeek':\n        this.navEl.addEventListener('transitionend', this.handleTransitionEnd, { once: true })\n        break\n      default:\n        break\n    }\n  }\n\n  @observe('navOpen', 'updated')\n  protected handleOpenChange(prev: boolean) {\n    if (!this.isDragging) {\n      // when opening nav, it should restore to default width (or larger).\n      // unless it is being dragged, in which case the drag width wins\n      this.setNavWidth(Math.max(this.navWidth, NAV_DEFAULT_WIDTH))\n    }\n\n    this.navTransition(this.navOpen ? 'open' : 'close')\n\n    if (this.persistNavState) {\n      navOpenStore.value = this.navOpen\n    }\n\n    // skip first update, we only want subsequent changes\n    if (prev != null) {\n      this.broadcast.post({ navOpen: this.navOpen })\n    }\n  }\n\n  /* ---------------------------------------------\n  / NAVIGATION OPEN/CLOSE LOGIC\n  / --------------------------------------------- */\n\n  private navTransition(event: NavEvent) {\n    this.navState = navMachine.transition(this.navState, event)\n  }\n\n  private handleNavClick(e: Event) {\n    if (!e.defaultPrevented && !this.wideScreen) {\n      const target = e.target as HTMLElement\n\n      if (isNavItemLeaf(target)) {\n        this.navTransition('close')\n      }\n    }\n  }\n\n  private handleMainClick() {\n    this.navTransition('click')\n  }\n\n  private handleDropdownOpen(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === 'nord-dropdown') {\n      this.navTransition('dropdownOpen')\n    }\n  }\n\n  private handleDropdownClose(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === 'nord-dropdown') {\n      this.navTransition('dropdownClose')\n    }\n  }\n\n  private handleMediaQueryChange = () => {\n    this.wideScreen = mediaQuery.matches\n    this.navTransition(this.wideScreen ? 'open' : 'close')\n  }\n\n  private handleToggleClick = () => {\n    this.navTransition('toggle')\n  }\n\n  private handleNavFocus = () => {\n    this.navTransition('focusin')\n  }\n\n  private handleMainFocus = () => {\n    this.navTransition('focusout')\n  }\n\n  private handleMouseEnter = () => {\n    if (this.wideScreen) {\n      this.navTransition('pointerenter')\n    }\n  }\n\n  private handleMouseLeave = () => {\n    this.navTransition('pointerleave')\n  }\n\n  private handleTransitionEnd = () => {\n    this.navTransition('transitionend')\n  }\n\n  /* ---------------------------------------------\n  / RESIZE LOGIC\n  / --------------------------------------------- */\n\n  private handleKeyboardResize(e: KeyboardEvent) {\n    const {\n      navWidth,\n      direction: { isLTR },\n    } = this\n\n    switch (e.key) {\n      case 'ArrowLeft':\n        this.setNavWidth(navWidth + (isLTR ? -NAV_RESIZE_STEP : NAV_RESIZE_STEP))\n        break\n      case 'ArrowRight':\n        this.setNavWidth(navWidth + (isLTR ? NAV_RESIZE_STEP : -NAV_RESIZE_STEP))\n        break\n      case 'Enter':\n        this.navTransition('toggle')\n        break\n      case 'Home':\n        this.setNavWidth(NAV_MIN_WIDTH)\n        break\n      case 'End':\n        this.setNavWidth(NAV_MAX_WIDTH)\n        break\n      default:\n        return\n    }\n\n    this.broadcast.post({ navWidth: this.navWidth })\n    e.preventDefault()\n  }\n\n  private setNavWidth(width: number) {\n    this.navWidth = clamp(Math.round(width), 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    this.broadcast.post({ navWidth: this.navWidth })\n  }\n\n  private handleDrag(e: PointerEvent) {\n    const width = this.direction.isRTL ? this.clientWidth - e.clientX : e.clientX\n\n    this.setNavWidth(width)\n    this.navTransition(width >= NAV_COLLAPSE_WIDTH ? 'open' : 'close')\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-layout': Layout\n  }\n}\n"],"names":["defaultEnabled","BroadcastChannelController","constructor","host","options","addController","this","enabled","hostConnected","BroadcastChannel","channel","channelName","addEventListener","hostDisconnected","_a","removeEventListener","_b","close","handleEvent","event","onMessage","data","post","message","postMessage","storage","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","setItem","Icon","registerIcon","lockIcon","mediaQuery","matchMedia","matches","navWidthStore","navOpenStore","navMachine","fsm","opened","toggle","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","navSlot","SlotController","drawerSlot","topBarSlot","headerSlot","footerSlot","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","wideScreen","onDismiss","navTransition","isDismissible","node","navEl","broadcast","syncNavState","navOpen","navWidth","isDragging","persistNavState","padding","sticky","stickyFooter","handleMediaQueryChange","handleToggleClick","handleNavFocus","handleMainFocus","handleMouseEnter","handleMouseLeave","handleTransitionEnd","isNarrow","connectedCallback","super","listen","willUpdate","hasUpdated","render","adjustedNavWidth","html","classMap","isRTL","hasContent","styleMap","isEmpty","handleDropdownOpen","handleDropdownClose","handleNavClick","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","renderNavCollapse","handleMainClick","renderNavToggle","nothing","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","setTimeout","once","handleOpenChange","setNavWidth","Math","max","transition","e","defaultPrevented","target","el","localName","isNavItem","hasSubNav","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","stickyStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"ggDAQA,MAAMA,EAAiB,KAAM,QAEhBC,EAIX,WAAAC,CAAYC,EAA8BC,GACxCD,EAAKE,cAAcC,MACnBA,KAAKF,QAAU,CAAEG,QAASP,KAAmBI,EAC9C,CAED,aAAAI,GACkC,oBAArBC,mBACTH,KAAKI,QAAU,IAAID,iBAAiBH,KAAKF,QAAQO,aACjDL,KAAKI,QAAQE,iBAAiB,UAAWN,MAE5C,CAED,gBAAAO,WACgB,QAAdC,EAAAR,KAAKI,eAAS,IAAAI,GAAAA,EAAAC,oBAAoB,UAAWT,MAC/B,QAAdU,EAAAV,KAAKI,eAAS,IAAAM,GAAAA,EAAAC,OACf,CAED,WAAAC,CAAYC,GACNb,KAAKF,QAAQG,WACfD,KAAKF,QAAQgB,UAAUD,EAAME,KAEhC,CAED,IAAAC,CAAKC,SACCjB,KAAKF,QAAQG,YACH,QAAZO,EAAAR,KAAKI,eAAO,IAAAI,GAAAA,EAAEU,YAAYD,GAE7B,ECrCa,SAAAE,EACdC,EACAC,EACAC,EAAkCC,KAAKC,UACvCC,EAAoCF,KAAKG,OAEzC,MAAO,CACL,SAAIC,GACF,IACE,MAAMA,EAAQC,aAAaC,QAAQT,GACnC,OAAOO,EAAQF,EAAYE,GAASN,CACrC,CACD,MAAAb,GACE,OAAOa,CACR,CACF,EAED,SAAIM,CAAMA,GACR,IACEC,aAAaE,QAAQV,EAAKE,EAAUK,GACrC,CACD,MAAAnB,GAEC,CACF,EAEL,6qQCLAuB,EAAKC,aAAaC,GAElB,MAOMC,EACoB,oBAAfC,WACLA,WAAW,sBACV,CACCC,SAAS,EACT,gBAAA9B,GAEC,GAGH+B,EAAgBlB,EAAQ,uBAjBJ,KAkBpBmB,EAAenB,EAAQ,uBAAuB,GAE9CoB,EAAaC,EAAI,CACrBC,OAAQ,CACNC,OAAQ,SACR/B,MAAO,UAETgC,OAAQ,CACND,OAAQ,SACRE,KAAM,SACNC,QAAS,OACTC,aAAc,QAEhBC,KAAM,CACJL,OAAQ,SACRM,SAAU,SACVC,aAAc,OACdC,aAAc,UACdC,MAAO,SACPP,KAAM,UAERQ,QAAS,CACPC,cAAe,OACfT,KAAM,UAERU,KAAM,CACJZ,OAAQ,SACRG,QAAS,OACTC,aAAc,OACdS,QAAS,UAEXC,OAAQ,CACNd,OAAQ,SACRG,QAAS,OACTC,aAAc,OACdW,cAAe,YA6BJ,IAAMC,EAAN,cAAqBC,EAArB,WAAA/D,uBAKLI,KAAO4D,QAAG,IAAIC,EAAe7D,KAAM,OACnCA,KAAU8D,WAAG,IAAID,EAAe7D,KAAM,UACtCA,KAAU+D,WAAG,IAAIF,EAAe7D,KAAM,WACtCA,KAAUgE,WAAG,IAAIH,EAAe7D,KAAM,UACtCA,KAAUiE,WAAG,IAAIJ,EAAe7D,KAAM,UACtCA,KAAAkE,UAAY,IAAIC,EAAoBnE,MACpCA,KAAAoE,OAAS,IAAIC,EAAgBrE,MAC7BA,KAAAsE,aAAe,IAAIC,EAAuBvE,KAAM,CACtDwE,OAAQ,IAAwB,WAAlBxE,KAAKyE,WAA0BzE,KAAK0E,WAClDC,UAAW,IAAM3E,KAAK4E,cAAc,SACpCC,cAAeC,GAAQA,IAAS9E,KAAK+E,QAG/B/E,KAAAgF,UAAY,IAAIrF,EAAwEK,KAAM,CACpGK,YAAa,wBACbJ,QAAS,IAAMD,KAAKiF,cAAgBjF,KAAK0E,WACzC5D,UAAYC,IACN,YAAaA,IACff,KAAKkF,QAAUnE,EAAKmE,SAElB,aAAcnE,IAChBf,KAAKmF,SAAWpE,EAAKoE,SACtB,IAMYnF,KAAAmF,SAAW9C,EAAcV,MACzB3B,KAAUoF,YAAG,EAEbpF,KAAA0E,WAAaxC,EAAWE,QAYmCpC,KAAeqF,iBAAG,EAMrBrF,KAAYiF,cAAG,EAM3DjF,KAAOsF,QAAiB,IAKTtF,KAAMuF,QAAY,EAKUvF,KAAYwF,cAAY,EA4NxFxF,KAAsByF,uBAAG,KAC/BzF,KAAK0E,WAAaxC,EAAWE,QAC7BpC,KAAK4E,cAAc5E,KAAK0E,WAAa,OAAS,QAAQ,EAGhD1E,KAAiB0F,kBAAG,KAC1B1F,KAAK4E,cAAc,SAAS,EAGtB5E,KAAc2F,eAAG,KACvB3F,KAAK4E,cAAc,UAAU,EAGvB5E,KAAe4F,gBAAG,KACxB5F,KAAK4E,cAAc,WAAW,EAGxB5E,KAAgB6F,iBAAG,KACrB7F,KAAK0E,YACP1E,KAAK4E,cAAc,eACpB,EAGK5E,KAAgB8F,iBAAG,KACzB9F,KAAK4E,cAAc,eAAe,EAG5B5E,KAAmB+F,oBAAG,KAC5B/F,KAAK4E,cAAc,gBAAgB,CA4DtC,CA9SC,YAAIoB,GACF,OAAQhG,KAAK0E,UACd,CAED,iBAAAuB,GACEC,MAAMD,oBACNjG,KAAKoE,OAAO+B,OAAOjE,EAAY,SAAUlC,KAAKyF,uBAC/C,CAED,UAAAW,GAEMpG,KAAKqG,aAKLrG,KAAKgG,UAIAhG,KAAKqF,kBAA0C,IAAvB/C,EAAaX,MAH5C3B,KAAKyE,SAAW,SAQhBzE,KAAKyE,SAAW,SAEnB,CAED,MAAA6B,GACE,MAAMnB,SAAEA,EAAQV,SAAEA,EAAQb,QAAEA,EAAOI,WAAEA,EAAUC,WAAEA,EAAUF,WAAEA,EAAUD,WAAEA,EAAUsB,WAAEA,EAAUlB,UAAEA,GAAclE,KACzGuG,EAAgC,WAAb9B,GAAyBzE,KAAK0E,WAAaS,EA7L9C,IA+LtB,OAAOqB,CAAI,eAECC,EAAS,CACf,YAAY,EACZ,QAASvC,EAAUwC,MACnB,aAActB,EACd,eAAgBpB,EAAW2C,WAC3B,eAAgB1C,EAAW0C,WAC3B,gBAAiB5C,EAAW4C,WAC5B,eAAgB7C,EAAW6C,WAC3B,YAAa/C,EAAQ+C,wBAEfC,EAAS,CACf,wBAAyB,GAAGL,sBAEnB3C,EAAQ+C,WAAalC,EAAW,0BAC7BzE,KAAK0E,WAAa,OAAS,gDAI7Bd,EAAQiD,sBACP7G,KAAK2F,gCACF3F,KAAK6F,kCACL7F,KAAK8F,4BACX9F,KAAK8G,+BACJ9G,KAAK+G,iDAEY/G,KAAKgH,wHAMdC,EAAkB,WAAbxC,EAAuBzE,KAAKkH,iCACjCD,EAAK7B,EAAYpF,KAAKmH,+BACrBnH,KAAKoH,6BACRpH,KAAKoH,2BACPpH,KAAKqH,kCACNrH,KAAKgG,mBAEfhG,KAAKsH,iEAG6BtH,KAAK4F,4BAA0B5F,KAAKuH,oBACtE3D,EAAQ+C,WAAa3G,KAAKwH,kBAAoBC,uOAgB/BzH,KAAK8D,WAAW+C,0DAMxC,CAEO,eAAAW,GACN,OAAOhB,CAAI,uEAIIxG,KAAK0F,kCACD1F,KAAK6F,gCACN7F,KAAK8F,oEAMxB,CAEO,iBAAAwB,GACN,OAAOd,CAAI,0CAC+BxG,KAAK0F,4FAIhD,CAGS,oBAAAgC,GACRrF,EAAcV,MAAQ3B,KAAKmF,QAC5B,CAGS,oBAAAwC,CAAqBC,GAQ7B,OAPa,SAATA,GAAmB5H,KAAK6H,eAC1BC,aAAa9H,KAAK6H,eAEP,WAATD,GACF5H,KAAK+E,MAAMtE,oBAAoB,gBAAiBT,KAAK+F,qBAG/C/F,KAAKyE,UACX,IAAK,SACHzE,KAAKkF,SAAU,EACf,MACF,IAAK,SACHlF,KAAKkF,SAAU,EACf,MACF,IAAK,OACHlF,KAAK6H,cAAgBE,YAAW,IAAM/H,KAAK4E,cAAc,YA3S1C,KA4Sf,MACF,IAAK,SACH5E,KAAK+E,MAAMzE,iBAAiB,gBAAiBN,KAAK+F,oBAAqB,CAAEiC,MAAM,IAKpF,CAGS,gBAAAC,CAAiBL,GACpB5H,KAAKoF,YAGRpF,KAAKkI,YAAYC,KAAKC,IAAIpI,KAAKmF,SA/TX,MAkUtBnF,KAAK4E,cAAc5E,KAAKkF,QAAU,OAAS,SAEvClF,KAAKqF,kBACP/C,EAAaX,MAAQ3B,KAAKkF,SAIhB,MAAR0C,GACF5H,KAAKgF,UAAUhE,KAAK,CAAEkE,QAASlF,KAAKkF,SAEvC,CAMO,aAAAN,CAAc/D,GACpBb,KAAKyE,SAAWlC,EAAW8F,WAAWrI,KAAKyE,SAAU5D,EACtD,CAEO,cAAAmG,CAAesB,GACrB,IAAKA,EAAEC,mBAAqBvI,KAAK0E,WAAY,CAC3C,MAAM8D,EAASF,EAAEE,OA5RL,CAACC,GAAoD,kBAAjBA,EAAGC,UACdC,CAApBF,EA6RCD,KA7RqCC,EAAGG,WA8RxD5I,KAAK4E,cAAc,QAEtB,CAhSiB,IAAC6D,CAiSpB,CAEO,eAAAlB,GACNvH,KAAK4E,cAAc,QACpB,CAEO,kBAAAkC,CAAmBwB,GAGA,kBAFVA,EAAEE,OAENE,WACT1I,KAAK4E,cAAc,eAEtB,CAEO,mBAAAmC,CAAoBuB,GAGD,kBAFVA,EAAEE,OAENE,WACT1I,KAAK4E,cAAc,gBAEtB,CAqCO,oBAAAyC,CAAqBiB,GAC3B,MAAMnD,SACJA,EACAjB,WAAW2E,MAAEA,IACX7I,KAEJ,OAAQsI,EAAElH,KACR,IAAK,YACHpB,KAAKkI,YAAY/C,GAAY0D,GA3Zb,QA4ZhB,MACF,IAAK,aACH7I,KAAKkI,YAAY/C,GAAY0D,EA9Zb,SA+ZhB,MACF,IAAK,QACH7I,KAAK4E,cAAc,UACnB,MACF,IAAK,OACH5E,KAAKkI,YAvaS,KAwad,MACF,IAAK,MACHlI,KAAKkI,YAzaS,KA0ad,MACF,QACE,OAGJlI,KAAKgF,UAAUhE,KAAK,CAAEmE,SAAUnF,KAAKmF,WACrCmD,EAAEQ,gBACH,CAEO,WAAAZ,CAAYa,GAClB/I,KAAKmF,SAAW6D,EAAMb,KAAKc,MAAMF,GArbf,IACA,IAqbnB,CAEO,aAAA7B,CAAcoB,GACpB,GAAiB,IAAbA,EAAEY,OAAc,CACHZ,EAAEE,OACVW,kBAAkBb,EAAEc,WAC3BpJ,KAAKoF,YAAa,CACnB,CACF,CAEO,YAAAgC,GACNpH,KAAKoF,YAAa,EAClBpF,KAAKgF,UAAUhE,KAAK,CAAEmE,SAAUnF,KAAKmF,UACtC,CAEO,UAAAgC,CAAWmB,GACjB,MAAMS,EAAQ/I,KAAKkE,UAAUwC,MAAQ1G,KAAKqJ,YAAcf,EAAEgB,QAAUhB,EAAEgB,QAEtEtJ,KAAKkI,YAAYa,GACjB/I,KAAK4E,cAAcmE,GAvcI,IAuc0B,OAAS,QAC3D,GAxXMrF,EAAM6F,OAAG,CAACC,EAAgBC,EAAaC,GA8BRC,EAAA,CAArCC,EAAM,iBAAiB,IAAoClG,EAAAmG,UAAA,aAAA,GAE3CF,EAAA,CAAhBG,KAA8CpG,EAAAmG,UAAA,gBAAA,GAC9BF,EAAA,CAAhBG,KAAkCpG,EAAAmG,UAAA,kBAAA,GAClBF,EAAA,CAAhBG,KAAmCpG,EAAAmG,UAAA,gBAAA,GACnBF,EAAA,CAAhBG,KAA+CpG,EAAAmG,UAAA,kBAAA,GAMmBF,EAAA,CAAlEI,EAAS,CAAEC,SAAS,EAAMC,KAAMC,QAASC,UAAW,cAA+BzG,EAAAmG,UAAA,eAAA,GAMRF,EAAA,CAA3EI,EAAS,CAAEC,SAAS,EAAMC,KAAMC,QAASC,UAAW,uBAA8CzG,EAAAmG,UAAA,uBAAA,GAM1BF,EAAA,CAAxEI,EAAS,CAAEE,KAAMC,QAASF,SAAS,EAAMG,UAAW,oBAAwCzG,EAAAmG,UAAA,oBAAA,GAMhEF,EAAA,CAA5BI,EAAS,CAAEC,SAAS,KAAmCtG,EAAAmG,UAAA,eAAA,GAKZF,EAAA,CAA3CI,EAAS,CAAEE,KAAMC,QAASF,SAAS,KAA+BtG,EAAAmG,UAAA,cAAA,GAKKF,EAAA,CAAvEI,EAAS,CAAEE,KAAMC,QAASF,SAAS,EAAMG,UAAW,mBAAgDzG,EAAAmG,UAAA,oBAAA,GAmI3FF,EAAA,CADTS,EAAQ,WAAY,YAGpB1G,EAAAmG,UAAA,uBAAA,MAGSF,EAAA,CADTS,EAAQ,aAyBR1G,EAAAmG,UAAA,uBAAA,MAGSF,EAAA,CADTS,EAAQ,UAAW,YAkBnB1G,EAAAmG,UAAA,mBAAA,MA1PkBnG,EAAMiG,EAAA,CAD1BU,EAAc,gBACM3G,SAAAA"}

package/lib/LightDismissController-4pH8cdko.js.map

@@ -1 +1 @@
-{"version":3,"file":"LightDismissController-4pH8cdko.js","sources":["../src/common/controllers/LightDismissController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { EventController } from \"./EventController.js\"\nimport { ShortcutController } from \"./ShortcutController.js\"\n\nexport type LightDismissOptions = {\n  isOpen: () => boolean\n  onDismiss: EventListener\n  isDismissible?: (node: EventTarget) => boolean\n}\n\nexport class LightDismissController implements ReactiveController {\n  private shortcut: ShortcutController\n  private events: EventController\n\n  private isMouseDownOutside = false\n\n  constructor(\n    private host: ReactiveControllerHost & Element,\n    private options: LightDismissOptions\n  ) {\n    host.addController(this)\n    this.shortcut = new ShortcutController(host, { Escape: this.handleEsc })\n    this.events = new EventController(host)\n  }\n\n  hostConnected() {\n    this.events.listen(document, \"mousedown\", this.handleMouseDown, true)\n    this.events.listen(document, \"click\", this.handleClick, true)\n  }\n\n  private handleEsc = (e: KeyboardEvent) => {\n    if (!this.options.isOpen()) {\n      return\n    }\n\n    this.options.onDismiss(e)\n  }\n\n  private handleMouseDown = (e: MouseEvent) => {\n    if (!this.options.isOpen()) {\n      return\n    }\n\n    const predicate: LightDismissOptions[\"isDismissible\"] = this.options.isDismissible ?? (node => node !== this.host)\n    this.isMouseDownOutside = e.composedPath().every(predicate)\n  }\n\n  private handleClick = (e: MouseEvent) => {\n    if (!this.options.isOpen()) {\n      return\n    }\n\n    const predicate: LightDismissOptions[\"isDismissible\"] = this.options.isDismissible ?? (node => node !== this.host)\n    const isClickOutside = e.composedPath().every(predicate)\n\n    const shouldDismiss = isClickOutside && this.isMouseDownOutside\n\n    if (shouldDismiss) {\n      this.options.onDismiss(e)\n    }\n  }\n}\n"],"names":["LightDismissController","constructor","host","options","this","isMouseDownOutside","handleEsc","e","isOpen","onDismiss","handleMouseDown","predicate","_a","isDismissible","node","composedPath","every","handleClick","addController","shortcut","ShortcutController","Escape","events","EventController","hostConnected","listen","document"],"mappings":"6GAUaA,EAMX,WAAAC,CACUC,EACAC,GADAC,KAAIF,KAAJA,EACAE,KAAOD,QAAPA,EAJFC,KAAkBC,oBAAG,EAgBrBD,KAAAE,UAAaC,IACdH,KAAKD,QAAQK,UAIlBJ,KAAKD,QAAQM,UAAUF,EAAE,EAGnBH,KAAAM,gBAAmBH,UACzB,IAAKH,KAAKD,QAAQK,SAChB,OAGF,MAAMG,EAAgF,QAA9BC,EAAAR,KAAKD,QAAQU,qBAAiB,IAAAD,EAAAA,EAACE,GAAQA,IAASV,KAAKF,KAC7GE,KAAKC,mBAAqBE,EAAEQ,eAAeC,MAAML,EAAU,EAGrDP,KAAAa,YAAeV,UACrB,IAAKH,KAAKD,QAAQK,SAChB,OAGF,MAAMG,EAAgF,QAA9BC,EAAAR,KAAKD,QAAQU,qBAAiB,IAAAD,EAAAA,EAACE,GAAQA,IAASV,KAAKF,KACtFK,EAAEQ,eAAeC,MAAML,IAENP,KAAKC,oBAG3CD,KAAKD,QAAQM,UAAUF,EACxB,EAvCDL,EAAKgB,cAAcd,MACnBA,KAAKe,SAAW,IAAIC,EAAmBlB,EAAM,CAAEmB,OAAQjB,KAAKE,YAC5DF,KAAKkB,OAAS,IAAIC,EAAgBrB,EACnC,CAED,aAAAsB,GACEpB,KAAKkB,OAAOG,OAAOC,SAAU,YAAatB,KAAKM,iBAAiB,GAChEN,KAAKkB,OAAOG,OAAOC,SAAU,QAAStB,KAAKa,aAAa,EACzD"}
+{"version":3,"file":"LightDismissController-4pH8cdko.js","sources":["../src/common/controllers/LightDismissController.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport { EventController } from './EventController.js'\nimport { ShortcutController } from './ShortcutController.js'\n\nexport interface LightDismissOptions {\n  isOpen: () => boolean\n  onDismiss: EventListener\n  isDismissible?: (node: EventTarget) => boolean\n}\n\nexport class LightDismissController implements ReactiveController {\n  private shortcut: ShortcutController\n  private events: EventController\n\n  private isMouseDownOutside = false\n\n  constructor(\n    private host: ReactiveControllerHost & Element,\n    private options: LightDismissOptions,\n  ) {\n    host.addController(this)\n    this.shortcut = new ShortcutController(host, { Escape: this.handleEsc })\n    this.events = new EventController(host)\n  }\n\n  hostConnected() {\n    this.events.listen(document, 'mousedown', this.handleMouseDown, true)\n    this.events.listen(document, 'click', this.handleClick, true)\n  }\n\n  private handleEsc = (e: KeyboardEvent) => {\n    if (!this.options.isOpen()) {\n      return\n    }\n\n    this.options.onDismiss(e)\n  }\n\n  private handleMouseDown = (e: MouseEvent) => {\n    if (!this.options.isOpen()) {\n      return\n    }\n\n    const predicate: LightDismissOptions['isDismissible'] = this.options.isDismissible ?? (node => node !== this.host)\n    this.isMouseDownOutside = e.composedPath().every(predicate)\n  }\n\n  private handleClick = (e: MouseEvent) => {\n    if (!this.options.isOpen()) {\n      return\n    }\n\n    const predicate: LightDismissOptions['isDismissible'] = this.options.isDismissible ?? (node => node !== this.host)\n    const isClickOutside = e.composedPath().every(predicate)\n\n    const shouldDismiss = isClickOutside && this.isMouseDownOutside\n\n    if (shouldDismiss) {\n      this.options.onDismiss(e)\n    }\n  }\n}\n"],"names":["LightDismissController","constructor","host","options","this","isMouseDownOutside","handleEsc","e","isOpen","onDismiss","handleMouseDown","predicate","_a","isDismissible","node","composedPath","every","handleClick","addController","shortcut","ShortcutController","Escape","events","EventController","hostConnected","listen","document"],"mappings":"6GAUaA,EAMX,WAAAC,CACUC,EACAC,GADAC,KAAIF,KAAJA,EACAE,KAAOD,QAAPA,EAJFC,KAAkBC,oBAAG,EAgBrBD,KAAAE,UAAaC,IACdH,KAAKD,QAAQK,UAIlBJ,KAAKD,QAAQM,UAAUF,EAAE,EAGnBH,KAAAM,gBAAmBH,UACzB,IAAKH,KAAKD,QAAQK,SAChB,OAGF,MAAMG,EAAgF,QAA9BC,EAAAR,KAAKD,QAAQU,qBAAiB,IAAAD,EAAAA,EAACE,GAAQA,IAASV,KAAKF,KAC7GE,KAAKC,mBAAqBE,EAAEQ,eAAeC,MAAML,EAAU,EAGrDP,KAAAa,YAAeV,UACrB,IAAKH,KAAKD,QAAQK,SAChB,OAGF,MAAMG,EAAgF,QAA9BC,EAAAR,KAAKD,QAAQU,qBAAiB,IAAAD,EAAAA,EAACE,GAAQA,IAASV,KAAKF,KACtFK,EAAEQ,eAAeC,MAAML,IAENP,KAAKC,oBAG3CD,KAAKD,QAAQM,UAAUF,EACxB,EAvCDL,EAAKgB,cAAcd,MACnBA,KAAKe,SAAW,IAAIC,EAAmBlB,EAAM,CAAEmB,OAAQjB,KAAKE,YAC5DF,KAAKkB,OAAS,IAAIC,EAAgBrB,EACnC,CAED,aAAAsB,GACEpB,KAAKkB,OAAOG,OAAOC,SAAU,YAAatB,KAAKM,iBAAiB,GAChEN,KAAKkB,OAAOG,OAAOC,SAAU,QAAStB,KAAKa,aAAa,EACzD"}

package/lib/LightDomController-DIwtVelV.js.map

@@ -1 +1 @@
-{"version":3,"file":"LightDomController-DIwtVelV.js","sources":["../src/common/controllers/LightDomController.ts"],"sourcesContent":["import { 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(\n    private host: ReactiveControllerHost & HTMLElement,\n    private options: LightDomOptions\n  ) {\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  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","renderOptions"],"mappings":"mCAQaA,EACX,WAAAC,CACUC,EACAC,GADAC,KAAIF,KAAJA,EACAE,KAAOD,QAAPA,EAERD,EAAKG,cAAcD,KACpB,CAED,aAAYE,GACV,OAAOF,KAAKD,QAAQG,WAAaF,KAAKF,IACvC,CAED,WAAAK,GACEH,KAAKI,QACN,CAEO,MAAAA,GACNA,EAAOJ,KAAKD,QAAQK,SAAUJ,KAAKE,UAAWF,KAAKD,QAAQM,cAC5D"}
+{"version":3,"file":"LightDomController-DIwtVelV.js","sources":["../src/common/controllers/LightDomController.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost, RenderOptions } from 'lit'\nimport { render } from 'lit'\n\ninterface LightDomOptions {\n  render: () => unknown\n  renderOptions?: RenderOptions\n  container?: HTMLElement\n}\n\nexport class LightDomController implements ReactiveController {\n  constructor(\n    private host: ReactiveControllerHost & HTMLElement,\n    private options: LightDomOptions,\n  ) {\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  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","renderOptions"],"mappings":"mCASaA,EACX,WAAAC,CACUC,EACAC,GADAC,KAAIF,KAAJA,EACAE,KAAOD,QAAPA,EAERD,EAAKG,cAAcD,KACpB,CAED,aAAYE,GACV,OAAOF,KAAKD,QAAQG,WAAaF,KAAKF,IACvC,CAED,WAAAK,GACEH,KAAKI,QACN,CAEO,MAAAA,GACNA,EAAOJ,KAAKD,QAAQK,SAAUJ,KAAKE,UAAWF,KAAKD,QAAQM,cAC5D"}

package/lib/LightSlotController-Coyy4nqS.js.map

@@ -1 +1 @@
-{"version":3,"file":"LightSlotController-Coyy4nqS.js","sources":["../src/common/controllers/LightSlotController.ts"],"sourcesContent":["import { nothing, ReactiveControllerHost, isServer } from \"lit\"\nimport { LightDomController } from \"./LightDomController.js\"\nimport { SlotController } from \"./SlotController.js\"\n\ntype LightSlotOptions = {\n  slotName: string\n  render: () => unknown\n  syncLightDom: (element: Element) => void\n}\n\n/**\n * Handles cases where a component needs to render to light DOM,\n * and potentially sync component properties to user-supplied content.\n */\nexport class LightSlotController extends SlotController {\n  private renderHook?: Comment\n  private lightDom?: LightDomController\n\n  constructor(\n    host: ReactiveControllerHost & HTMLElement,\n    private options: LightSlotOptions\n  ) {\n    super(host, options.slotName)\n\n    if (isServer) {\n      return\n    }\n\n    // we need a node to hook onto for rendering\n    // without this, multiple controllers rendering to the light DOM\n    // will overwrite each others' content\n    this.renderHook = document.createComment(this.slotName)\n\n    this.lightDom = new LightDomController(host, {\n      render: () => (this.hasContent ? nothing : this.options.render()),\n      renderOptions: { renderBefore: this.renderHook },\n    })\n  }\n\n  hostConnected() {\n    super.hostConnected()\n\n    if (this.renderHook) {\n      this.host.appendChild(this.renderHook)\n      this.syncLightDom()\n    }\n  }\n\n  protected override onChange = () => {\n    this.syncLightDom()\n  }\n\n  private syncLightDom() {\n    const node = this.content\n\n    if (node) {\n      this.options.syncLightDom(node)\n    }\n  }\n}\n"],"names":["LightSlotController","SlotController","constructor","host","options","super","slotName","this","onChange","syncLightDom","isServer","renderHook","document","createComment","lightDom","LightDomController","render","hasContent","nothing","renderOptions","renderBefore","hostConnected","appendChild","node","content"],"mappings":"kJAcM,MAAOA,UAA4BC,EAIvC,WAAAC,CACEC,EACQC,GAERC,MAAMF,EAAMC,EAAQE,UAFZC,KAAOH,QAAPA,EA4BSG,KAAQC,SAAG,KAC5BD,KAAKE,cAAc,EAzBfC,IAOJH,KAAKI,WAAaC,SAASC,cAAcN,KAAKD,UAE9CC,KAAKO,SAAW,IAAIC,EAAmBZ,EAAM,CAC3Ca,OAAQ,IAAOT,KAAKU,WAAaC,EAAUX,KAAKH,QAAQY,SACxDG,cAAe,CAAEC,aAAcb,KAAKI,cAEvC,CAED,aAAAU,GACEhB,MAAMgB,gBAEFd,KAAKI,aACPJ,KAAKJ,KAAKmB,YAAYf,KAAKI,YAC3BJ,KAAKE,eAER,CAMO,YAAAA,GACN,MAAMc,EAAOhB,KAAKiB,QAEdD,GACFhB,KAAKH,QAAQK,aAAac,EAE7B"}
+{"version":3,"file":"LightSlotController-Coyy4nqS.js","sources":["../src/common/controllers/LightSlotController.ts"],"sourcesContent":["import type { ReactiveControllerHost } from 'lit'\nimport { isServer, nothing } from 'lit'\nimport { LightDomController } from './LightDomController.js'\nimport { SlotController } from './SlotController.js'\n\ninterface LightSlotOptions {\n  slotName: string\n  render: () => unknown\n  syncLightDom: (element: Element) => void\n}\n\n/**\n * Handles cases where a component needs to render to light DOM,\n * and potentially sync component properties to user-supplied content.\n */\nexport class LightSlotController extends SlotController {\n  private renderHook?: Comment\n  private lightDom?: LightDomController\n\n  constructor(\n    host: ReactiveControllerHost & HTMLElement,\n    private options: LightSlotOptions,\n  ) {\n    super(host, options.slotName)\n\n    if (isServer) {\n      return\n    }\n\n    // we need a node to hook onto for rendering\n    // without this, multiple controllers rendering to the light DOM\n    // will overwrite each others' content\n    this.renderHook = document.createComment(this.slotName)\n\n    this.lightDom = new LightDomController(host, {\n      render: () => (this.hasContent ? nothing : this.options.render()),\n      renderOptions: { renderBefore: this.renderHook },\n    })\n  }\n\n  hostConnected() {\n    super.hostConnected()\n\n    if (this.renderHook) {\n      this.host.appendChild(this.renderHook)\n      this.syncLightDom()\n    }\n  }\n\n  protected override onChange = () => {\n    this.syncLightDom()\n  }\n\n  private syncLightDom() {\n    const node = this.content\n\n    if (node) {\n      this.options.syncLightDom(node)\n    }\n  }\n}\n"],"names":["LightSlotController","SlotController","constructor","host","options","super","slotName","this","onChange","syncLightDom","isServer","renderHook","document","createComment","lightDom","LightDomController","render","hasContent","nothing","renderOptions","renderBefore","hostConnected","appendChild","node","content"],"mappings":"kJAeM,MAAOA,UAA4BC,EAIvC,WAAAC,CACEC,EACQC,GAERC,MAAMF,EAAMC,EAAQE,UAFZC,KAAOH,QAAPA,EA4BSG,KAAQC,SAAG,KAC5BD,KAAKE,cAAc,EAzBfC,IAOJH,KAAKI,WAAaC,SAASC,cAAcN,KAAKD,UAE9CC,KAAKO,SAAW,IAAIC,EAAmBZ,EAAM,CAC3Ca,OAAQ,IAAOT,KAAKU,WAAaC,EAAUX,KAAKH,QAAQY,SACxDG,cAAe,CAAEC,aAAcb,KAAKI,cAEvC,CAED,aAAAU,GACEhB,MAAMgB,gBAEFd,KAAKI,aACPJ,KAAKJ,KAAKmB,YAAYf,KAAKI,YAC3BJ,KAAKE,eAER,CAMO,YAAAA,GACN,MAAMc,EAAOhB,KAAKiB,QAEdD,GACFhB,KAAKH,QAAQK,aAAac,EAE7B"}

package/lib/LocalizeController.js

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

package/lib/LocalizeController.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocalizeController.js","sources":["../src/localization/LocalizeController.ts"],"sourcesContent":["import { isServer } from \"lit\"\nimport type { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport {\n  subscribeToDocumentLang,\n  subscribeToTranslationRegistration,\n  resolveTranslation,\n  Translation,\n  WellKnownKeys,\n  fallback,\n} 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 unsubscribeDocumentLang?: ReturnType<typeof subscribeToDocumentLang>\n  private unsubscribeTranslationRegistration?: ReturnType<typeof subscribeToTranslationRegistration>\n  private observer?: MutationObserver\n  private resolvedTranslation: Translation\n\n  constructor(\n    private host: ReactiveControllerHost & HTMLElement,\n    private options = { onLangChange: noop }\n  ) {\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    if (isServer) {\n      return this.host.lang || \"en-US\"\n    }\n\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    // Always subscribe to translation registration changes (for when new translations are registered)\n    this.unsubscribeTranslationRegistration = subscribeToTranslationRegistration(this.handleLangChange)\n\n    // Re-resolve translation now that the host is connected and attributes are set\n    // This handles cases where the lang attribute is set after the constructor runs (e.g., in Vue)\n    const resolved = resolveTranslation(this.lang)\n    if (this.resolvedTranslation !== resolved) {\n      this.resolvedTranslation = resolved\n    }\n\n    // If the host has its own `lang` attribute, create a local observer to watch for changes to that attribute\n    if (this.host.getAttribute(\"lang\")) {\n      this.observer = new MutationObserver(this.handleLangChange)\n      this.observer.observe(this.host, {\n        attributes: true,\n        attributeFilter: [\"lang\"],\n      })\n    } else {\n      // Otherwise, also subscribe to document language changes\n      this.unsubscribeDocumentLang = subscribeToDocumentLang(this.handleLangChange)\n    }\n\n    this.options.onLangChange()\n  }\n\n  hostDisconnected() {\n    this.unsubscribeDocumentLang?.()\n    this.unsubscribeTranslationRegistration?.()\n    this.observer?.disconnect()\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","isServer","document","documentElement","resolvedLang","$lang","hostConnected","unsubscribeTranslationRegistration","subscribeToTranslationRegistration","getAttribute","observer","MutationObserver","observe","attributes","attributeFilter","unsubscribeDocumentLang","subscribeToDocumentLang","hostDisconnected","_a","call","_b","_c","disconnect","term","key","args","component","localName","console","warn","String","t","fallback"],"mappings":"saAsBA,MAAMA,EAAO,aAIAC,EAQX,WAAAC,CACUC,EACAC,EAAU,CAAEC,aAAcL,IAD1BM,KAAIH,KAAJA,EACAG,KAAOF,QAAPA,EA8EFE,KAAgBC,iBAAG,KACzB,MAAMC,EAAWC,EAAmBH,KAAKI,MAErCJ,KAAKK,sBAAwBH,IAC/BF,KAAKK,oBAAsBH,EAE3BF,KAAKF,QAAQC,eACbC,KAAKH,KAAKS,gBACX,EApFDT,EAAKU,cAAcP,MACnBA,KAAKK,oBAAsBF,EAAmBH,KAAKI,KACpD,CAKD,QAAIA,GACF,OAAII,EACKR,KAAKH,KAAKO,MAAQ,QAGpBJ,KAAKH,KAAKO,MAAQK,SAASC,gBAAgBN,IACnD,CAMD,gBAAIO,GACF,OAAOX,KAAKK,oBAAoBO,KACjC,CAED,aAAAC,GAEEb,KAAKc,mCAAqCC,EAAmCf,KAAKC,kBAIlF,MAAMC,EAAWC,EAAmBH,KAAKI,MACrCJ,KAAKK,sBAAwBH,IAC/BF,KAAKK,oBAAsBH,GAIzBF,KAAKH,KAAKmB,aAAa,SACzBhB,KAAKiB,SAAW,IAAIC,iBAAiBlB,KAAKC,kBAC1CD,KAAKiB,SAASE,QAAQnB,KAAKH,KAAM,CAC/BuB,YAAY,EACZC,gBAAiB,CAAC,WAIpBrB,KAAKsB,wBAA0BC,EAAwBvB,KAAKC,kBAG9DD,KAAKF,QAAQC,cACd,CAED,gBAAAyB,aAC8B,QAA5BC,EAAAzB,KAAKsB,+BAAuB,IAAAG,GAAAA,EAAAC,KAAA1B,MACW,QAAvC2B,EAAA3B,KAAKc,0CAAkC,IAAAa,GAAAA,EAAAD,KAAA1B,MACxB,QAAf4B,EAAA5B,KAAKiB,gBAAU,IAAAW,GAAAA,EAAAC,YAChB,CAED,IAAAC,CACEC,KACGC,WAEH,MAAM3B,oBAAEA,EAAmBM,aAAEA,GAAiBX,KACxCiC,EAAYjC,KAAKH,KAAKqC,UAGU,MAAlC7B,EAAoB4B,GACtBE,QAAQC,KAAK,8CAA8CH,kBAA0BtB,OACrC,MAAvCN,EAAoB4B,GAAWF,IACxCI,QAAQC,KACN,mCAAmCC,OAAON,wBAA0BE,iBAAyBtB,OAKjG,MAAM2B,EAAyC,QAArCX,EAA8B,UAA9BtB,EAAoB4B,UAAU,IAAAR,OAAA,EAAAA,EAAGM,UAAI,IAAAJ,EAAAA,EAAIY,EAASN,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 type {\n  Translation,\n  WellKnownKeys,\n} from './translation.js'\nimport { isServer } from 'lit'\nimport {\n  fallback,\n  resolveTranslation,\n  subscribeToDocumentLang,\n  subscribeToTranslationRegistration,\n} 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\nfunction noop() {\n  // this function is intentionally left blank\n}\n\nexport class LocalizeController<TComponentName extends Exclude<keyof Translation, WellKnownKeys>>\nimplements ReactiveController {\n  private unsubscribeDocumentLang?: ReturnType<typeof subscribeToDocumentLang>\n  private unsubscribeTranslationRegistration?: ReturnType<typeof subscribeToTranslationRegistration>\n  private observer?: MutationObserver\n  private resolvedTranslation: Translation\n\n  constructor(\n    private host: ReactiveControllerHost & HTMLElement,\n    private options = { onLangChange: noop },\n  ) {\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    if (isServer) {\n      return this.host.lang || 'en-US'\n    }\n\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    // Always subscribe to translation registration changes (for when new translations are registered)\n    this.unsubscribeTranslationRegistration = subscribeToTranslationRegistration(this.handleLangChange)\n\n    // Re-resolve translation now that the host is connected and attributes are set\n    // This handles cases where the lang attribute is set after the constructor runs (e.g., in Vue)\n    const resolved = resolveTranslation(this.lang)\n    if (this.resolvedTranslation !== resolved) {\n      this.resolvedTranslation = resolved\n    }\n\n    // If the host has its own `lang` attribute, create a local observer to watch for changes to that attribute\n    if (this.host.getAttribute('lang')) {\n      this.observer = new MutationObserver(this.handleLangChange)\n      this.observer.observe(this.host, {\n        attributes: true,\n        attributeFilter: ['lang'],\n      })\n    }\n    else {\n      // Otherwise, also subscribe to document language changes\n      this.unsubscribeDocumentLang = subscribeToDocumentLang(this.handleLangChange)\n    }\n\n    this.options.onLangChange()\n  }\n\n  hostDisconnected() {\n    this.unsubscribeDocumentLang?.()\n    this.unsubscribeTranslationRegistration?.()\n    this.observer?.disconnect()\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    if (resolvedTranslation[component] == null) {\n      console.warn(`NORD: Missing translations for component \\`${component}\\` in lang: \\`${resolvedLang}\\``)\n    }\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\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","isServer","document","documentElement","resolvedLang","$lang","hostConnected","unsubscribeTranslationRegistration","subscribeToTranslationRegistration","getAttribute","observer","MutationObserver","observe","attributes","attributeFilter","unsubscribeDocumentLang","subscribeToDocumentLang","hostDisconnected","_a","call","_b","_c","disconnect","term","key","args","component","localName","console","warn","String","t","fallback"],"mappings":"saAwBA,SAASA,IAET,OAEaC,EAOX,WAAAC,CACUC,EACAC,EAAU,CAAEC,aAAcL,IAD1BM,KAAIH,KAAJA,EACAG,KAAOF,QAAPA,EA8EFE,KAAgBC,iBAAG,KACzB,MAAMC,EAAWC,EAAmBH,KAAKI,MAErCJ,KAAKK,sBAAwBH,IAC/BF,KAAKK,oBAAsBH,EAE3BF,KAAKF,QAAQC,eACbC,KAAKH,KAAKS,gBACX,EApFDT,EAAKU,cAAcP,MACnBA,KAAKK,oBAAsBF,EAAmBH,KAAKI,KACpD,CAKD,QAAIA,GACF,OAAII,EACKR,KAAKH,KAAKO,MAAQ,QAGpBJ,KAAKH,KAAKO,MAAQK,SAASC,gBAAgBN,IACnD,CAMD,gBAAIO,GACF,OAAOX,KAAKK,oBAAoBO,KACjC,CAED,aAAAC,GAEEb,KAAKc,mCAAqCC,EAAmCf,KAAKC,kBAIlF,MAAMC,EAAWC,EAAmBH,KAAKI,MACrCJ,KAAKK,sBAAwBH,IAC/BF,KAAKK,oBAAsBH,GAIzBF,KAAKH,KAAKmB,aAAa,SACzBhB,KAAKiB,SAAW,IAAIC,iBAAiBlB,KAAKC,kBAC1CD,KAAKiB,SAASE,QAAQnB,KAAKH,KAAM,CAC/BuB,YAAY,EACZC,gBAAiB,CAAC,WAKpBrB,KAAKsB,wBAA0BC,EAAwBvB,KAAKC,kBAG9DD,KAAKF,QAAQC,cACd,CAED,gBAAAyB,aAC8B,QAA5BC,EAAAzB,KAAKsB,+BAAuB,IAAAG,GAAAA,EAAAC,KAAA1B,MACW,QAAvC2B,EAAA3B,KAAKc,0CAAkC,IAAAa,GAAAA,EAAAD,KAAA1B,MACxB,QAAf4B,EAAA5B,KAAKiB,gBAAU,IAAAW,GAAAA,EAAAC,YAChB,CAED,IAAAC,CACEC,KACGC,WAEH,MAAM3B,oBAAEA,EAAmBM,aAAEA,GAAiBX,KACxCiC,EAAYjC,KAAKH,KAAKqC,UAEU,MAAlC7B,EAAoB4B,GACtBE,QAAQC,KAAK,8CAA8CH,kBAA0BtB,OAEvC,MAAvCN,EAAoB4B,GAAWF,IACtCI,QAAQC,KACN,mCAAmCC,OAAON,wBAA0BE,iBAAyBtB,OAIjG,MAAM2B,EAAyC,QAArCX,EAA8B,UAA9BtB,EAAoB4B,UAAU,IAAAR,OAAA,EAAAA,EAAGM,UAAI,IAAAJ,EAAAA,EAAIY,EAASN,GAAWF,GACvE,MAAoB,mBAANO,EAAmBA,KAAKN,GAAQM,CAC/C"}

package/lib/Message.js

@@ -1,2 +1,2 @@
-import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as r,LitElement as t}from"lit";import{property as i,customElement as n}from"lit/decorators.js";import{ifDefined as s}from"lit/directives/if-defined.js";import{ref as a}from"lit/directives/ref.js";import{F as l}from"./FocusableMixin-BlQLNPdJ.js";import{s as c}from"./Component-DSU3Qp0O.js";import{s as d}from"./DropdownItem-BheCmR9u.js";import{LocalizeController as m}from"./LocalizeController.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";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}.n-message:hover{color:var(--n-color-text-on-accent)}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(t)){constructor(){super(...arguments),this.localize=new m(this)}render(){return(this.href?o=>r`<a href="${s(this.href)}" ${a(this.focusableRef)} class="n-dropdown-item n-message">${o}</a>`:o=>r`<button ${a(this.focusableRef)} class="n-dropdown-item n-message">${o}</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([i({reflect:!0})],f.prototype,"href",void 0),o([i({reflect:!0,type:Boolean})],f.prototype,"highlight",void 0),o([i({reflect:!0,type:Boolean})],f.prototype,"unread",void 0),f=o([n("nord-message")],f);var h=f;export{h as default};
+import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as r,LitElement as t}from"lit";import{property as i,customElement as n}from"lit/decorators.js";import{ifDefined as s}from"lit/directives/if-defined.js";import{ref as a}from"lit/directives/ref.js";import{F as l}from"./FocusableMixin-BlQLNPdJ.js";import{s as c}from"./Component-DSU3Qp0O.js";import{s as d}from"./DropdownItem-Cy6lHtoG.js";import{LocalizeController as m}from"./LocalizeController.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";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}.n-message:hover{color:var(--n-color-text-on-accent)}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(t)){constructor(){super(...arguments),this.localize=new m(this)}render(){return(this.href?o=>r`<a href="${s(this.href)}" ${a(this.focusableRef)} class="n-dropdown-item n-message">${o}</a>`:o=>r`<button ${a(this.focusableRef)} class="n-dropdown-item n-message">${o}</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([i({reflect:!0})],f.prototype,"href",void 0),o([i({reflect:!0,type:Boolean})],f.prototype,"highlight",void 0),o([i({reflect:!0,type:Boolean})],f.prototype,"unread",void 0),f=o([n("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 ready\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":"m/DA0Be,IAAMA,EAAN,cAAsBC,EAAeC,IAArC,WAAAC,uBAGLC,KAAAC,SAAW,IAAIC,EAAmCF,KAqC3D,CAdC,MAAAG,GAQE,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 type { TemplateResult } from 'lit'\nimport { html, LitElement } 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 { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './Message.css'\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 ready\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":"m/DA2Be,IAAMA,EAAN,cAAsBC,EAAeC,IAArC,WAAAC,uBAGLC,KAAAC,SAAW,IAAIC,EAAmCF,KAqC3D,CAdC,MAAAG,GAQE,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{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as n,LitElement as e,html as i}from"lit";import{query as t,property as a,customElement as l}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{c as r}from"./interface-close-small-CnpAFMO3.js";import d from"./Icon.js";import{S as p}from"./SlotController-Z6eG7LSZ.js";import{o as c}from"./observe-D0n0zOfU.js";import{N as m}from"./events-Bv6wNHwJ.js";import{s as h}from"./Component-DSU3Qp0O.js";import{LocalizeController as v}from"./LocalizeController.js";import{ModalController as u}from"./ModalController.js";import"./Footer.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./EventController-BBOmvfLa.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-C5CMxfb3.js";const f=n`: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{--n-footer-padding-inline:var(--_n-modal-padding-inline);--n-footer-background-color:transparent;--n-footer-box-shadow:none;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-overflow-hidden{overflow:hidden}.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-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, 940px)}:host([size=xl]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, none)}}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;inline-size:100%}slot[name=footer]::slotted(nord-button-group){--_n-button-group-flex-direction:column;--_n-button-group-max-inline-size:100%}@media (min-width:489px){slot[name=footer]{gap:var(--n-space-s);flex-direction:row;justify-content:flex-end;align-items:center}slot[name=footer]::slotted(nord-button-group){--_n-button-group-flex-direction:row;--_n-button-group-max-inline-size:max-content}}slot[name=feature]{overflow:hidden}slot[name=feature]::slotted(*){inline-size:100%;block-size:auto}`;d.registerIcon(r);let b=class extends e{constructor(){super(...arguments),this.defaultSlot=new p(this),this.headerSlot=new p(this,"header"),this.featureSlot=new p(this,"feature"),this.footerSlot=new p(this,"footer"),this.localize=new v(this),this.modalController=new u(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")}showModal(){this.open=!0}close(o){this.open=!1,null!=o&&(this.returnValue=o),this.dispatchEvent(new m("close"))}focus(o){this.modal.focus({preventScroll:!0,...o})}render(){return i`<div class="n-modal-backdrop"><div class="${s({"n-modal":!0,"n-overflow-hidden":this.featureSlot.hasContent&&this.defaultSlot.isEmpty&&this.footerSlot.isEmpty})}" 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="${this.defaultSlot.isEmpty?"":"n-body-padded"}"></slot></div><nord-footer ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></nord-footer></div></div>`}handleOpenUpdated(o){this.open?this.modalController.block():!0===o&&this.modalController.unblock()}handleDismiss(){this.dispatchEvent(new m("cancel",{cancelable:!0}))&&this.close()}};b.styles=[h,f],o([t(".n-modal",!0)],b.prototype,"modal",void 0),o([t(".n-modal-backdrop",!0)],b.prototype,"backdrop",void 0),o([a({type:Boolean,reflect:!0})],b.prototype,"open",void 0),o([a({reflect:!0})],b.prototype,"size",void 0),o([a({attribute:!1})],b.prototype,"returnValue",void 0),o([a({type:Boolean,reflect:!0})],b.prototype,"scrollable",void 0),o([c("open","updated")],b.prototype,"handleOpenUpdated",null),b=o([l("nord-modal")],b);var x=b;export{x as default};
+import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{c as n}from"./interface-close-small-CnpAFMO3.js";import{css as e,LitElement as i,html as t}from"lit";import{query as a,property as l,customElement as r}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{S as d}from"./SlotController-Z6eG7LSZ.js";import{o as p}from"./observe-D0n0zOfU.js";import{N as c}from"./events-Bv6wNHwJ.js";import{s as m}from"./Component-DSU3Qp0O.js";import h from"./Icon.js";import{LocalizeController as v}from"./LocalizeController.js";import{ModalController as u}from"./ModalController.js";import"./Footer.js";import"./EventController-BBOmvfLa.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-BFC67Y2x.js";const f=e`: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{--n-footer-padding-inline:var(--_n-modal-padding-inline);--n-footer-background-color:transparent;--n-footer-box-shadow:none;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-overflow-hidden{overflow:hidden}.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-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, 940px)}:host([size=xl]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, none)}}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;inline-size:100%}slot[name=footer]::slotted(nord-button-group){--_n-button-group-flex-direction:column;--_n-button-group-max-inline-size:100%}@media (min-width:489px){slot[name=footer]{gap:var(--n-space-s);flex-direction:row;justify-content:flex-end;align-items:center}slot[name=footer]::slotted(nord-button-group){--_n-button-group-flex-direction:row;--_n-button-group-max-inline-size:max-content}}slot[name=feature]{overflow:hidden}slot[name=feature]::slotted(*){inline-size:100%;block-size:auto}`;h.registerIcon(n);let b=class extends i{constructor(){super(...arguments),this.defaultSlot=new d(this),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 u(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")}showModal(){this.open=!0}close(o){this.open=!1,null!=o&&(this.returnValue=o),this.dispatchEvent(new c("close"))}focus(o){this.modal.focus({preventScroll:!0,...o})}render(){return t`<div class="n-modal-backdrop"><div class="${s({"n-modal":!0,"n-overflow-hidden":this.featureSlot.hasContent&&this.defaultSlot.isEmpty&&this.footerSlot.isEmpty})}" 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="${this.defaultSlot.isEmpty?"":"n-body-padded"}"></slot></div><nord-footer ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></nord-footer></div></div>`}handleOpenUpdated(o){this.open?this.modalController.block():!0===o&&this.modalController.unblock()}handleDismiss(){this.dispatchEvent(new c("cancel",{cancelable:!0}))&&this.close()}};b.styles=[m,f],o([a(".n-modal",!0)],b.prototype,"modal",void 0),o([a(".n-modal-backdrop",!0)],b.prototype,"backdrop",void 0),o([l({type:Boolean,reflect:!0})],b.prototype,"open",void 0),o([l({reflect:!0})],b.prototype,"size",void 0),o([l({attribute:!1})],b.prototype,"returnValue",void 0),o([l({type:Boolean,reflect:!0})],b.prototype,"scrollable",void 0),o([p("open","updated")],b.prototype,"handleOpenUpdated",null),b=o([r("nord-modal")],b);var x=b;export{x as default};
 //# sourceMappingURL=Modal.js.map