@nordhealth/components 4.26.2 → 5.0.0

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 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\ntype InputMode = 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'\nconst defaultInputmodeMap: Record<string, InputMode> = {\n  number: 'numeric',\n  email: 'email',\n  tel: 'tel',\n  url: 'url',\n  search: 'search',\n}\n\n/**\n * Inputs are used to allow users to provide text input when the expected input is short.\n * As well as plain text, Input supports various types of text, including passwords and numbers.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n * @slot start - Optional slot used to place an icon or prefix at the start of the input.\n * @slot end - Optional slot used to place an icon or suffix at the end of the input.\n *\n * @cssprop [--n-input-inline-size=240px] - Controls the inline size, or width, of the input.\n * @cssprop [--n-input-background=var(--n-color-surface)] - 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  /**\n   * The inputmode attribute provides a hint to the browser about what type of keyboard to open on mobile devices.\n   * Valid values: none, text, decimal, numeric, tel, search, email, url\n   * When not explicitly set, defaults based on input type:\n   * - type=\"number\" → inputmode=\"numeric\"\n   * - type=\"email\" → inputmode=\"email\"\n   * - type=\"tel\" → inputmode=\"tel\"\n   * - type=\"url\" → inputmode=\"url\"\n   * - type=\"search\" → inputmode=\"search\"\n   * Can be explicitly overridden for any type.\n   */\n  @property({ reflect: true }) inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url' = undefined\n\n  render() {\n    const isNumber = this.type === 'number'\n\n    const inputmodeValue = this.inputmode || defaultInputmodeMap[this.type]\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=${ifDefined(inputmodeValue)}\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      ${this.isHintBelow ? this.renderHint() : nothing}\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","defaultInputmodeMap","number","email","tel","url","search","Input","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","TextSelectableMixin","InputMixin","FocusableMixin","LitElement","startObserver","startSlot","endObserver","endSlot","direction","DirectionController","type","expand","disallowPattern","inputmode","handleInputChange","e","inputEl","regex","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","RegExp","handleInput","render","isNumber","inputmodeValue","html","renderLabel","classMap","dir","styleMap","nothing","ref","textSelectableRef","focusableRef","inputId","ifDefined","cond","disabled","required","readonly","name","placeholder","handleChange","handleKeydown","handleSelect","getDescribedBy","getInvalid","autocomplete","renderError","isHintBelow","renderHint","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":["../src/input/Input.ts","../src/common/input.ts","../src/common/form.ts"],"sourcesContent":["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\ntype InputMode = 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'\nconst defaultInputmodeMap: Record<string, InputMode> = {\n  number: 'numeric',\n  email: 'email',\n  tel: 'tel',\n  url: 'url',\n  search: 'search',\n}\n\n/**\n * Inputs are used to allow users to provide text input when the expected input is short.\n * As well as plain text, Input supports various types of text, including passwords and numbers.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n * @slot start - Optional slot used to place an icon or prefix at the start of the input.\n * @slot end - Optional slot used to place an icon or suffix at the end of the input.\n *\n * @cssprop [--n-input-inline-size=240px] - Controls the inline size, or width, of the input.\n * @cssprop [--n-input-block-size=var(--n-space-xl)] - Controls the block size, or height, of the input using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-input-background=var(--n-color-surface)] - 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    | 'date'\n    | 'time'\n    | 'datetime-local'\n    | 'file'\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  /**\n   * The inputmode attribute provides a hint to the browser about what type of keyboard to open on mobile devices.\n   * Valid values: none, text, decimal, numeric, tel, search, email, url\n   * When not explicitly set, defaults based on input type:\n   * - type=\"number\" → inputmode=\"numeric\"\n   * - type=\"email\" → inputmode=\"email\"\n   * - type=\"tel\" → inputmode=\"tel\"\n   * - type=\"url\" → inputmode=\"url\"\n   * - type=\"search\" → inputmode=\"search\"\n   * Can be explicitly overridden for any type.\n   */\n  @property({ reflect: true }) inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url' = undefined\n\n  render() {\n    const isNumber = this.type === 'number'\n\n    const inputmodeValue = this.inputmode || defaultInputmodeMap[this.type]\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=${ifDefined(inputmodeValue)}\n          pattern=${cond(isNumber, '[0-9]*')}\n          ?disabled=${this.effectiveDisabled}\n          ?required=${this.required}\n          ?readonly=${this.readonly}\n          name=${ifDefined(this.name)}\n          .value=${this.type === 'file' ? '' : (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-label=${ifDefined(this.controlAriaLabel)}\n          aria-describedby=${ifDefined(this.controlAriaDescribedby)}\n          aria-invalid=${ifDefined(this.controlAriaInvalid)}\n          spellcheck=\"false\"\n          autocomplete=${this.autocomplete as any}\n        />\n        <slot name=\"end\"></slot>\n      </div>\n\n      ${this.renderError()}\n      ${this.isHintBelow ? this.renderHint() : nothing}\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":["Icon","registerIcon","searchIcon","px","value","undefined","defaultInputmodeMap","number","email","tel","url","search","Input","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","TextSelectableMixin","InputMixin","FocusableMixin","LitElement","constructor","this","startObserver","ResizeController","startSlot","endObserver","endSlot","direction","DirectionController","type","expand","disallowPattern","inputmode","handleInputChange","e","target","inputEl","regex","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","RegExp","handleInput","render","isNumber","inputmodeValue","html","renderLabel","classMap","dir","styleMap","inlineSize","nothing","ref","textSelectableRef","focusableRef","inputId","ifDefined","cond","effectiveDisabled","required","readonly","name","_a","placeholder","handleChange","handleKeydown","handleSelect","controlAriaLabel","controlAriaDescribedby","controlAriaInvalid","autocomplete","renderError","isHintBelow","renderHint","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/Item.js

@@ -0,0 +1,2 @@
+import{_ as r}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as o}from"lit";import{property as a,customElement as n}from"lit/decorators.js";import{i as t}from"./light-dom-styles-DXsbiKU9.js";import{D as i}from"./DraftComponentMixin-4qug5Rky.js";const s=e`nord-item{--_n-item-gap:var(--n-item-gap,var(--n-space-m));--_n-item-padding:var(--n-item-padding,var(--n-space-m));--_n-item-border-radius:var(--n-item-border-radius,var(--n-border-radius-s));align-items:center;border:1px solid #0000;border-radius:var(--_n-item-border-radius);color:var(--n-color-text);display:flex;flex-wrap:wrap;font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--n-font-size-s);gap:var(--_n-item-gap);line-height:var(--n-line-height);padding:var(--_n-item-padding);transition:background-color var(--n-transition-quickly)}nord-item,nord-item *,nord-item :after,nord-item :before{box-sizing:border-box}nord-item[variant=outline]{border-color:var(--n-color-border)}nord-item[variant=muted]{background-color:var(--n-color-surface-lowered)}nord-item[size=s]{--_n-item-gap:var(--n-item-gap,var(--n-space-s));--_n-item-padding:var(--n-item-padding,var(--n-space-s))}nord-item[size=xs]{--_n-item-gap:var(--n-item-gap,var(--n-space-xs));--_n-item-padding:var(--n-item-padding,var(--n-space-xs))}a:has(>nord-item){color:inherit;text-decoration:none}a:hover>nord-item{background-color:var(--n-color-surface-lowered)}a:focus-visible{outline:none}a:focus-visible>nord-item{border-color:var(--n-color-accent);outline:2px solid var(--n-color-accent);outline-offset:1px}`;let d=class extends(i(o)){constructor(){super(...arguments),this.variant="default",this.size="s"}connectedCallback(){super.connectedCallback(),t(this,s)}createRenderRoot(){return this}};r([a({reflect:!0})],d.prototype,"variant",void 0),r([a({reflect:!0})],d.prototype,"size",void 0),d=r([n("nord-item")],d);var m=d;export{m as default};
+//# sourceMappingURL=Item.js.map

package/lib/Item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Item.js","sources":["../src/item/Item.ts"],"sourcesContent":["import { LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { injectLightDomStyles } from '../common/light-dom-styles.js'\nimport { DraftComponentMixin } from '../common/mixins/DraftComponentMixin.js'\nimport style from './Item.css'\n\n/**\n * Item is a flexible, composable row used to display a piece of content such as\n * a person, a file or a setting. Combine it with [Item Media](/components/item-media/),\n * [Item Content](/components/item-content/), [Item Title](/components/item-title/),\n * [Item Description](/components/item-description/) and [Item Actions](/components/item-actions/)\n * to build rich list rows. Stack several together with [Item Group](/components/item-group/).\n *\n * To make a whole Item act as a link, wrap it in an `<a>` element. The row\n * highlights on hover when wrapped this way.\n *\n * @status draft\n * @category list\n * @lightDom true\n *\n * @slot - Default slot for the item parts (media, content, actions, header, footer).\n *\n * @cssprop [--n-item-gap] - Controls the spacing between the item parts, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-item-padding] - Controls the inner padding of the item, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-item-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are.\n */\n@customElement('nord-item')\nexport default class Item extends DraftComponentMixin(LitElement) {\n  /**\n   * The visual style of the item.\n   *\n   * - `default` has a transparent background and no border.\n   * - `outline` adds a visible border.\n   * - `muted` uses a subtle filled background for secondary content.\n   */\n  @property({ reflect: true }) variant: 'default' | 'outline' | 'muted' = 'default'\n\n  /**\n   * The size of the item, controlling its padding and gap.\n   */\n  @property({ reflect: true }) size: 'xs' | 's' | 'm' = 's'\n\n  connectedCallback() {\n    super.connectedCallback()\n    injectLightDomStyles(this, style)\n  }\n\n  // Render in the light DOM so the composed parts are the element's own content\n  // and are styled by the injected stylesheet (no shadow boundary, like Table).\n  protected createRenderRoot() {\n    return this\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-item': Item\n  }\n}\n"],"names":["Item","DraftComponentMixin","LitElement","constructor","this","variant","size","connectedCallback","super","injectLightDomStyles","style","createRenderRoot","__decorate","property","reflect","prototype","customElement"],"mappings":"gjDA4Be,IAAMA,EAAN,cAAmBC,EAAoBC,IAAvC,WAAAC,uBAQgBC,KAAOC,QAAoC,UAK3CD,KAAIE,KAAqB,GAYvD,CAVC,iBAAAC,GACEC,MAAMD,oBACNE,EAAqBL,KAAMM,EAC5B,CAIS,gBAAAC,GACR,OAAOP,IACR,GAhB4BQ,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA4Dd,EAAAe,UAAA,eAAA,GAKpDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAoCd,EAAAe,UAAA,YAAA,GAbtCf,EAAIY,EAAA,CADxBI,EAAc,cACMhB,SAAAA"}

package/lib/ItemActions.js

@@ -0,0 +1,2 @@
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as i,LitElement as o}from"lit";import{customElement as s}from"lit/decorators.js";import{i as n}from"./light-dom-styles-DXsbiKU9.js";const r=i`nord-item-actions{align-items:center;box-sizing:border-box;display:flex;flex-shrink:0;gap:var(--n-space-s)}nord-item-actions nord-icon,nord-item-actions svg{--n-icon-size:var(--n-size-icon-s);block-size:var(--n-size-icon-s);color:var(--n-color-text-weaker);flex-shrink:0;inline-size:var(--n-size-icon-s)}`;let t=class extends o{connectedCallback(){super.connectedCallback(),n(this,r)}createRenderRoot(){return this}};t=e([s("nord-item-actions")],t);var a=t;export{a as default};
+//# sourceMappingURL=ItemActions.js.map

package/lib/ItemActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemActions.js","sources":["../src/item/ItemActions.ts"],"sourcesContent":["import { LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { injectLightDomStyles } from '../common/light-dom-styles.js'\nimport style from './ItemActions.css'\n\n/**\n * Item Actions holds the trailing controls of an [Item](/components/item/),\n * such as buttons or a chevron.\n *\n * @status draft\n * @category list\n * @lightDom true\n *\n * @slot - Default slot for the actions, such as buttons or an icon.\n */\n@customElement('nord-item-actions')\nexport default class ItemActions extends LitElement {\n  connectedCallback() {\n    super.connectedCallback()\n    injectLightDomStyles(this, style)\n  }\n\n  protected createRenderRoot() {\n    return this\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-item-actions': ItemActions\n  }\n}\n"],"names":["ItemActions","LitElement","connectedCallback","super","injectLightDomStyles","this","style","createRenderRoot","__decorate","customElement"],"mappings":"ufAiBe,IAAMA,EAAN,cAA0BC,EACvC,iBAAAC,GACEC,MAAMD,oBACNE,EAAqBC,KAAMC,EAC5B,CAES,gBAAAC,GACR,OAAOF,IACR,GARkBL,EAAWQ,EAAA,CAD/BC,EAAc,sBACMT,SAAAA"}

package/lib/ItemContent.js

@@ -0,0 +1,2 @@
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as o}from"lit";import{customElement as n}from"lit/decorators.js";import{i as r}from"./light-dom-styles-DXsbiKU9.js";const s=e`nord-item-content{box-sizing:border-box;display:flex;flex:1;flex-direction:column;gap:var(--n-space-xs)}nord-item-content+nord-item-content{flex:none}`;let i=class extends o{connectedCallback(){super.connectedCallback(),r(this,s)}createRenderRoot(){return this}};i=t([n("nord-item-content")],i);var l=i;export{l as default};
+//# sourceMappingURL=ItemContent.js.map

package/lib/ItemContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemContent.js","sources":["../src/item/ItemContent.ts"],"sourcesContent":["import { LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { injectLightDomStyles } from '../common/light-dom-styles.js'\nimport style from './ItemContent.css'\n\n/**\n * Item Content holds the textual content of an [Item](/components/item/),\n * typically an [Item Title](/components/item-title/) and an\n * [Item Description](/components/item-description/). It grows to fill the\n * available space.\n *\n * @status draft\n * @category list\n * @lightDom true\n *\n * @slot - Default slot for the content, such as a title and description.\n */\n@customElement('nord-item-content')\nexport default class ItemContent extends LitElement {\n  connectedCallback() {\n    super.connectedCallback()\n    injectLightDomStyles(this, style)\n  }\n\n  protected createRenderRoot() {\n    return this\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-item-content': ItemContent\n  }\n}\n"],"names":["ItemContent","LitElement","connectedCallback","super","injectLightDomStyles","this","style","createRenderRoot","__decorate","customElement"],"mappings":"6VAmBe,IAAMA,EAAN,cAA0BC,EACvC,iBAAAC,GACEC,MAAMD,oBACNE,EAAqBC,KAAMC,EAC5B,CAES,gBAAAC,GACR,OAAOF,IACR,GARkBL,EAAWQ,EAAA,CAD/BC,EAAc,sBACMT,SAAAA"}

package/lib/ItemDescription.js

@@ -0,0 +1,2 @@
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as t,LitElement as o}from"lit";import{customElement as i}from"lit/decorators.js";import{i as r}from"./light-dom-styles-DXsbiKU9.js";const n=t`nord-item-description{box-sizing:border-box;color:var(--n-color-text-weaker);display:-webkit-box;font-size:var(--n-font-size-s);font-weight:var(--n-font-weight);line-height:var(--n-line-height);overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical}nord-item-description a{color:var(--n-color-text-link);text-decoration:underline;text-underline-offset:2px}`;let l=class extends o{connectedCallback(){super.connectedCallback(),r(this,n)}createRenderRoot(){return this}};l=e([i("nord-item-description")],l);var s=l;export{s as default};
+//# sourceMappingURL=ItemDescription.js.map

package/lib/ItemDescription.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemDescription.js","sources":["../src/item/ItemDescription.ts"],"sourcesContent":["import { LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { injectLightDomStyles } from '../common/light-dom-styles.js'\nimport style from './ItemDescription.css'\n\n/**\n * Item Description is the secondary, muted line of text in an\n * [Item](/components/item/). It is clamped to two lines.\n *\n * @status draft\n * @category list\n * @lightDom true\n *\n * @slot - Default slot for the description text.\n */\n@customElement('nord-item-description')\nexport default class ItemDescription extends LitElement {\n  connectedCallback() {\n    super.connectedCallback()\n    injectLightDomStyles(this, style)\n  }\n\n  protected createRenderRoot() {\n    return this\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-item-description': ItemDescription\n  }\n}\n"],"names":["ItemDescription","LitElement","connectedCallback","super","injectLightDomStyles","this","style","createRenderRoot","__decorate","customElement"],"mappings":"4kBAiBe,IAAMA,EAAN,cAA8BC,EAC3C,iBAAAC,GACEC,MAAMD,oBACNE,EAAqBC,KAAMC,EAC5B,CAES,gBAAAC,GACR,OAAOF,IACR,GARkBL,EAAeQ,EAAA,CADnCC,EAAc,0BACMT,SAAAA"}

package/lib/ItemFooter.js

@@ -0,0 +1,2 @@
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as t,LitElement as o}from"lit";import{customElement as s}from"lit/decorators.js";import{i as r}from"./light-dom-styles-DXsbiKU9.js";const i=t`nord-item-footer{align-items:center;box-sizing:border-box;display:flex;flex-basis:100%;gap:var(--n-space-s);justify-content:space-between}`;let a=class extends o{connectedCallback(){super.connectedCallback(),r(this,i)}createRenderRoot(){return this}};a=e([s("nord-item-footer")],a);var n=a;export{n as default};
+//# sourceMappingURL=ItemFooter.js.map

package/lib/ItemFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemFooter.js","sources":["../src/item/ItemFooter.ts"],"sourcesContent":["import { LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { injectLightDomStyles } from '../common/light-dom-styles.js'\nimport style from './ItemFooter.css'\n\n/**\n * Item Footer spans the full width at the bottom of an [Item](/components/item/),\n * useful for a row of metadata or trailing actions.\n *\n * @status draft\n * @category list\n * @lightDom true\n *\n * @slot - Default slot for the footer content.\n */\n@customElement('nord-item-footer')\nexport default class ItemFooter extends LitElement {\n  connectedCallback() {\n    super.connectedCallback()\n    injectLightDomStyles(this, style)\n  }\n\n  protected createRenderRoot() {\n    return this\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-item-footer': ItemFooter\n  }\n}\n"],"names":["ItemFooter","LitElement","connectedCallback","super","injectLightDomStyles","this","style","createRenderRoot","__decorate","customElement"],"mappings":"iVAiBe,IAAMA,EAAN,cAAyBC,EACtC,iBAAAC,GACEC,MAAMD,oBACNE,EAAqBC,KAAMC,EAC5B,CAES,gBAAAC,GACR,OAAOF,IACR,GARkBL,EAAUQ,EAAA,CAD9BC,EAAc,qBACMT,SAAAA"}

package/lib/ItemGroup.js

@@ -0,0 +1,2 @@
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as r}from"lit";import{customElement as o}from"lit/decorators.js";import{i as s}from"./light-dom-styles-DXsbiKU9.js";const i=e`nord-item-group{box-sizing:border-box;display:flex;flex-direction:column;font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);gap:var(--n-space-m)}nord-item-group:has(nord-item[size=s]),nord-item-group:has(nord-item[size=xs]){gap:var(--n-space-s)}nord-item-group *,nord-item-group :after,nord-item-group :before{box-sizing:border-box}`;let n=class extends r{connectedCallback(){super.connectedCallback(),s(this,i),this.hasAttribute("role")||this.setAttribute("role","list")}createRenderRoot(){return this}firstUpdated(){for(const t of this.querySelectorAll(":scope > nord-item"))t.hasAttribute("role")||t.setAttribute("role","listitem")}};n=t([o("nord-item-group")],n);var a=n;export{a as default};
+//# sourceMappingURL=ItemGroup.js.map

package/lib/ItemGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemGroup.js","sources":["../src/item/ItemGroup.ts"],"sourcesContent":["import { LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { injectLightDomStyles } from '../common/light-dom-styles.js'\nimport style from './ItemGroup.css'\n\n/**\n * Item Group stacks a set of [Item](/components/item/) rows vertically and\n * exposes them to assistive technology as a list. Separate individual items\n * with [Item Separator](/components/item-separator/).\n *\n * @status draft\n * @category list\n * @lightDom true\n *\n * @slot - Default slot for [Item](/components/item/) elements.\n */\n@customElement('nord-item-group')\nexport default class ItemGroup extends LitElement {\n  connectedCallback() {\n    super.connectedCallback()\n    injectLightDomStyles(this, style)\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'list')\n    }\n  }\n\n  protected createRenderRoot() {\n    return this\n  }\n\n  protected firstUpdated() {\n    // Expose direct child items as list items so the list role has the\n    // required children. Mirrors the `role=\"listitem\"` the React demos add.\n    for (const item of this.querySelectorAll(':scope > nord-item')) {\n      if (!item.hasAttribute('role')) {\n        item.setAttribute('role', 'listitem')\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-item-group': ItemGroup\n  }\n}\n"],"names":["ItemGroup","LitElement","connectedCallback","super","injectLightDomStyles","this","style","hasAttribute","setAttribute","createRenderRoot","firstUpdated","item","querySelectorAll","__decorate","customElement"],"mappings":"8iBAkBe,IAAMA,EAAN,cAAwBC,EACrC,iBAAAC,GACEC,MAAMD,oBACNE,EAAqBC,KAAMC,GACtBD,KAAKE,aAAa,SACrBF,KAAKG,aAAa,OAAQ,OAE7B,CAES,gBAAAC,GACR,OAAOJ,IACR,CAES,YAAAK,GAGR,IAAK,MAAMC,KAAQN,KAAKO,iBAAiB,sBAClCD,EAAKJ,aAAa,SACrBI,EAAKH,aAAa,OAAQ,WAG/B,GArBkBR,EAASa,EAAA,CAD7BC,EAAc,oBACMd,SAAAA"}

package/lib/ItemHeader.js

@@ -0,0 +1,2 @@
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as t}from"lit";import{customElement as s}from"lit/decorators.js";import{i}from"./light-dom-styles-DXsbiKU9.js";const o=r`nord-item-header{align-items:center;box-sizing:border-box;display:flex;flex-basis:100%;gap:var(--n-space-s);justify-content:space-between}nord-item-header img{aspect-ratio:1/1;border-radius:var(--n-border-radius-s);inline-size:100%;object-fit:cover}`;let a=class extends t{connectedCallback(){super.connectedCallback(),i(this,o)}createRenderRoot(){return this}};a=e([s("nord-item-header")],a);var n=a;export{n as default};
+//# sourceMappingURL=ItemHeader.js.map

package/lib/ItemHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemHeader.js","sources":["../src/item/ItemHeader.ts"],"sourcesContent":["import { LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { injectLightDomStyles } from '../common/light-dom-styles.js'\nimport style from './ItemHeader.css'\n\n/**\n * Item Header spans the full width at the top of an [Item](/components/item/),\n * useful for a leading image or a row of metadata.\n *\n * @status draft\n * @category list\n * @lightDom true\n *\n * @slot - Default slot for the header content.\n */\n@customElement('nord-item-header')\nexport default class ItemHeader extends LitElement {\n  connectedCallback() {\n    super.connectedCallback()\n    injectLightDomStyles(this, style)\n  }\n\n  protected createRenderRoot() {\n    return this\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-item-header': ItemHeader\n  }\n}\n"],"names":["ItemHeader","LitElement","connectedCallback","super","injectLightDomStyles","this","style","createRenderRoot","__decorate","customElement"],"mappings":"2bAiBe,IAAMA,EAAN,cAAyBC,EACtC,iBAAAC,GACEC,MAAMD,oBACNE,EAAqBC,KAAMC,EAC5B,CAES,gBAAAC,GACR,OAAOF,IACR,GARkBL,EAAUQ,EAAA,CAD9BC,EAAc,qBACMT,SAAAA"}

package/lib/ItemMedia.js

@@ -0,0 +1,2 @@
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as i,LitElement as r}from"lit";import{property as n,customElement as o}from"lit/decorators.js";import{i as a}from"./light-dom-styles-DXsbiKU9.js";const s=i`nord-item-media{align-items:center;box-sizing:border-box;display:flex;flex-shrink:0;gap:var(--n-space-s);justify-content:center}nord-item-media nord-icon,nord-item-media svg{pointer-events:none}nord-item-media[variant=icon]{background-color:var(--n-color-surface-lowered);block-size:calc(var(--n-size-icon-m) + var(--n-space-s)*2);border:1px solid var(--n-color-border);border-radius:var(--n-border-radius-s);inline-size:calc(var(--n-size-icon-m) + var(--n-space-s)*2)}nord-item-media[variant=icon] nord-icon,nord-item-media[variant=icon] svg{--n-icon-size:var(--n-size-icon-s);block-size:var(--n-size-icon-s);inline-size:var(--n-size-icon-s)}nord-item-media[variant=image]{block-size:calc(var(--n-size-icon-l) + var(--n-space-s)*2);border-radius:var(--n-border-radius-s);inline-size:calc(var(--n-size-icon-l) + var(--n-space-s)*2);overflow:hidden}nord-item-media[variant=image] img{block-size:100%;inline-size:100%;object-fit:cover}`;let t=class extends r{constructor(){super(...arguments),this.variant="default"}connectedCallback(){super.connectedCallback(),a(this,s)}createRenderRoot(){return this}};e([n({reflect:!0})],t.prototype,"variant",void 0),t=e([o("nord-item-media")],t);var c=t;export{c as default};
+//# sourceMappingURL=ItemMedia.js.map

package/lib/ItemMedia.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemMedia.js","sources":["../src/item/ItemMedia.ts"],"sourcesContent":["import { LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { injectLightDomStyles } from '../common/light-dom-styles.js'\nimport style from './ItemMedia.css'\n\n/**\n * Item Media holds the leading visual of an [Item](/components/item/), such as\n * an icon, an avatar or an image.\n *\n * @status draft\n * @category list\n * @lightDom true\n *\n * @slot - Default slot for the media content (an icon, avatar or image).\n */\n@customElement('nord-item-media')\nexport default class ItemMedia extends LitElement {\n  /**\n   * The visual style of the media container.\n   *\n   * - `default` simply centers its content.\n   * - `icon` renders a small bordered, muted square that centers an icon.\n   * - `image` renders a rounded square that clips an image to a cover fit.\n   */\n  @property({ reflect: true }) variant: 'default' | 'icon' | 'image' = 'default'\n\n  connectedCallback() {\n    super.connectedCallback()\n    injectLightDomStyles(this, style)\n  }\n\n  protected createRenderRoot() {\n    return this\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-item-media': ItemMedia\n  }\n}\n"],"names":["ItemMedia","LitElement","constructor","this","variant","connectedCallback","super","injectLightDomStyles","style","createRenderRoot","__decorate","property","reflect","prototype","customElement"],"mappings":"0nCAiBe,IAAMA,EAAN,cAAwBC,EAAxB,WAAAC,uBAQgBC,KAAOC,QAAiC,SAUtE,CARC,iBAAAC,GACEC,MAAMD,oBACNE,EAAqBJ,KAAMK,EAC5B,CAES,gBAAAC,GACR,OAAON,IACR,GAT4BO,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyDZ,EAAAa,UAAA,eAAA,GAR3Db,EAASU,EAAA,CAD7BI,EAAc,oBACMd,SAAAA"}

package/lib/ItemSeparator.js

@@ -0,0 +1,2 @@
+import{_ as r}from"./tslib.es6-CmLYFWVC.js";import{css as t,LitElement as e,html as o}from"lit";import{customElement as s}from"lit/decorators.js";import{i as a}from"./light-dom-styles-DXsbiKU9.js";const i=t`nord-item-separator{box-sizing:border-box;display:block}nord-item-separator hr{block-size:0;border:none;border-block-start:1px solid var(--n-color-border);margin:0}`;let d=class extends e{connectedCallback(){super.connectedCallback(),a(this,i),this.hasAttribute("aria-hidden")||this.setAttribute("aria-hidden","true")}createRenderRoot(){return this}render(){return o`<hr part="separator">`}};d=r([s("nord-item-separator")],d);var n=d;export{n as default};
+//# sourceMappingURL=ItemSeparator.js.map

package/lib/ItemSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemSeparator.js","sources":["../src/item/ItemSeparator.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { injectLightDomStyles } from '../common/light-dom-styles.js'\nimport style from './ItemSeparator.css'\n\n/**\n * Item Separator draws a horizontal divider between [Item](/components/item/)\n * rows inside an [Item Group](/components/item-group/).\n *\n * @status draft\n * @category list\n * @lightDom true\n *\n * @part separator - The dividing line.\n */\n@customElement('nord-item-separator')\nexport default class ItemSeparator extends LitElement {\n  connectedCallback() {\n    super.connectedCallback()\n    injectLightDomStyles(this, style)\n    // The separator is a purely visual divider between items. Hide it from\n    // assistive technology so it can sit inside a `list` (whose only allowed\n    // children are list items) without breaking required-children rules.\n    if (!this.hasAttribute('aria-hidden')) {\n      this.setAttribute('aria-hidden', 'true')\n    }\n  }\n\n  // Renders its own divider markup; there are no user children to preserve.\n  protected createRenderRoot() {\n    return this\n  }\n\n  render() {\n    return html`<hr part=\"separator\" />`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-item-separator': ItemSeparator\n  }\n}\n"],"names":["ItemSeparator","LitElement","connectedCallback","super","injectLightDomStyles","this","style","hasAttribute","setAttribute","createRenderRoot","render","html","__decorate","customElement"],"mappings":"qXAiBe,IAAMA,EAAN,cAA4BC,EACzC,iBAAAC,GACEC,MAAMD,oBACNE,EAAqBC,KAAMC,GAItBD,KAAKE,aAAa,gBACrBF,KAAKG,aAAa,cAAe,OAEpC,CAGS,gBAAAC,GACR,OAAOJ,IACR,CAED,MAAAK,GACE,OAAOC,CAAI,uBACZ,GAnBkBX,EAAaY,EAAA,CADjCC,EAAc,wBACMb,SAAAA"}

package/lib/ItemTitle.js

@@ -0,0 +1,2 @@
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as i,LitElement as t}from"lit";import{customElement as n}from"lit/decorators.js";import{i as o}from"./light-dom-styles-DXsbiKU9.js";const s=i`nord-item-title{align-items:center;box-sizing:border-box;color:var(--n-color-text);display:flex;font-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);gap:var(--n-space-s);inline-size:fit-content;line-height:var(--n-line-height-tight)}nord-item-title nord-icon,nord-item-title svg{--n-icon-size:var(--n-size-icon-s);block-size:var(--n-size-icon-s);flex-shrink:0;inline-size:var(--n-size-icon-s)}`;let r=class extends t{connectedCallback(){super.connectedCallback(),o(this,s)}createRenderRoot(){return this}};r=e([n("nord-item-title")],r);var l=r;export{l as default};
+//# sourceMappingURL=ItemTitle.js.map

package/lib/ItemTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemTitle.js","sources":["../src/item/ItemTitle.ts"],"sourcesContent":["import { LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { injectLightDomStyles } from '../common/light-dom-styles.js'\nimport style from './ItemTitle.css'\n\n/**\n * Item Title is the primary line of text in an [Item](/components/item/).\n *\n * @status draft\n * @category list\n * @lightDom true\n *\n * @slot - Default slot for the title text (and optionally an inline icon).\n */\n@customElement('nord-item-title')\nexport default class ItemTitle extends LitElement {\n  connectedCallback() {\n    super.connectedCallback()\n    injectLightDomStyles(this, style)\n  }\n\n  protected createRenderRoot() {\n    return this\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-item-title': ItemTitle\n  }\n}\n"],"names":["ItemTitle","LitElement","connectedCallback","super","injectLightDomStyles","this","style","createRenderRoot","__decorate","customElement"],"mappings":"kmBAgBe,IAAMA,EAAN,cAAwBC,EACrC,iBAAAC,GACEC,MAAMD,oBACNE,EAAqBC,KAAMC,EAC5B,CAES,gBAAAC,GACR,OAAOF,IACR,GARkBL,EAASQ,EAAA,CAD7BC,EAAc,oBACMT,SAAAA"}

package/lib/Kbd.js

@@ -0,0 +1,2 @@
+import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as n,LitElement as r}from"lit";import{property as d,customElement as a}from"lit/decorators.js";import{i as e}from"./light-dom-styles-DXsbiKU9.js";import{D as i}from"./DraftComponentMixin-4qug5Rky.js";const b=n`nord-kbd{--_n-kbd-color:var(--n-kbd-color,var(--n-color-icon));--_n-kbd-background-color:var(--n-kbd-background-color,var(--n-color-button));--_n-kbd-border-radius:var(--n-kbd-border-radius,var(--n-border-radius-s));--_n-kbd-padding-block:var(--n-kbd-padding-block,0.227em);--_n-kbd-padding-inline:var(--n-kbd-padding-inline,calc(var(--n-space-xs)/0.9));--_n-kbd-font-size:var(--n-kbd-font-size,var(--n-font-size-m));--_n-kbd-border-width:var(--n-kbd-border-width,1px);--_n-kbd-border-color:var(--n-kbd-border-color,var(--n-color-border-strong));--_n-kbd-box-shadow:var(--n-kbd-box-shadow,var(--n-box-shadow));box-sizing:border-box;display:inline-block;font-family:var(--n-font-family);font-size:var(--_n-kbd-font-size);font-weight:var(--n-font-weight);line-height:var(--n-line-height-tightest);padding-block:var(--_n-kbd-padding-block);padding-inline:var(--_n-kbd-padding-inline);text-align:center;text-transform:capitalize;vertical-align:middle;white-space:nowrap;text-box:trim-both cap alphabetic;align-self:center;background-color:var(--_n-kbd-background-color);border:var(--_n-kbd-border-width) solid var(--_n-kbd-border-color);border-radius:var(--_n-kbd-border-radius);box-shadow:var(--_n-kbd-box-shadow);color:var(--_n-kbd-color);pointer-events:none;user-select:none}nord-kbd nord-icon,nord-kbd svg{--_n-icon-size:var(--n-size-icon-xs);block-size:var(--n-size-icon-xs);inline-size:var(--n-size-icon-xs);vertical-align:middle}nord-kbd[size=xs]{--_n-kbd-padding-inline:var(--n-kbd-padding-inline,calc(var(--n-space-xs)/1.1));--_n-kbd-font-size:var(--n-kbd-font-size,var(--n-font-size-xs))}nord-kbd[size=s]{--_n-kbd-padding-inline:var(--n-kbd-padding-inline,var(--n-space-xs));--_n-kbd-font-size:var(--n-kbd-font-size,var(--n-font-size-s))}nord-kbd[size=l]{--_n-kbd-padding-inline:var(--n-kbd-padding-inline,calc(var(--n-space-xs)/0.8));--_n-kbd-font-size:var(--n-kbd-font-size,var(--n-font-size-l))}@supports (text-box:trim-both cap alphabetic){nord-kbd{--_n-kbd-padding-block:var(--n-kbd-padding-block,0.375em)}}nord-kbd[variant=light]{--_n-kbd-color:var(--n-kbd-color,#667680);--_n-kbd-background-color:var(--n-kbd-background-color,#fff);--_n-kbd-border-color:var(--n-kbd-border-color,#bcc5cc);--_n-kbd-box-shadow:var(--n-kbd-box-shadow,0 1px 3px #0c0c0c17)}nord-kbd[variant=dark]{--_n-kbd-color:var(--n-kbd-color,#fff);--_n-kbd-background-color:var(--n-kbd-background-color,#363636);--_n-kbd-border-color:var(--n-kbd-border-color,#ffffff08);--_n-kbd-box-shadow:var(--n-kbd-box-shadow,0 1px 5px 0 #0c0c0c0d,0 0 40px 0 #0c0c0c05)}nord-kbd[emphasize]{--_n-kbd-color:var(--n-kbd-color,var(--n-color-text))}nord-kbd[variant=light][emphasize]{--_n-kbd-color:var(--n-kbd-color,#0c1a3d)}nord-kbd[variant=dark][emphasize]{--_n-kbd-color:var(--n-kbd-color,#fff)}nord-kbd[borderless]{border:none;box-shadow:none}`;let t=class extends(i(r)){constructor(){super(...arguments),this.size="m",this.variant="default",this.borderless=!1,this.emphasize=!1}connectedCallback(){super.connectedCallback(),e(this,b)}createRenderRoot(){return this}};o([d({reflect:!0})],t.prototype,"size",void 0),o([d({reflect:!0})],t.prototype,"variant",void 0),o([d({reflect:!0,type:Boolean})],t.prototype,"borderless",void 0),o([d({reflect:!0,type:Boolean})],t.prototype,"emphasize",void 0),t=o([a("nord-kbd")],t);var s=t;export{s as default};
+//# sourceMappingURL=Kbd.js.map

package/lib/Kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kbd.js","sources":["../src/kbd/Kbd.ts"],"sourcesContent":["import { LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { injectLightDomStyles } from '../common/light-dom-styles.js'\nimport { DraftComponentMixin } from '../common/mixins/DraftComponentMixin.js'\nimport style from './Kbd.css'\n\n/**\n * Kbd is used to display a keyboard key, such as a shortcut or a key the user\n * should press. Group related keys together with [Kbd Group](/components/kbd-group/).\n *\n * @status draft\n * @category content\n * @lightDom true\n *\n * @slot - Default slot for the key label (text or an icon).\n *\n * @cssprop [--n-kbd-color=var(--n-color-icon)] - Controls the text color of the key.\n * @cssprop [--n-kbd-background-color=var(--n-color-button)] - Controls the background color of the key.\n * @cssprop [--n-kbd-padding-block] - Controls the block padding of the key. Overrides the size default.\n * @cssprop [--n-kbd-padding-inline] - Controls the inline padding of the key. Overrides the size default.\n * @cssprop [--n-kbd-font-size] - Controls the font size of the key. Overrides the size default.\n * @cssprop [--n-kbd-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are.\n * @cssprop [--n-kbd-border-width=1px] - Controls the border width of the key.\n * @cssprop [--n-kbd-border-color] - Controls the border color of the key. Overrides the variant default.\n * @cssprop [--n-kbd-box-shadow] - Controls the box shadow of the key. Overrides the variant default.\n */\n@customElement('nord-kbd')\nexport default class Kbd extends DraftComponentMixin(LitElement) {\n  /**\n   * The size of the key. Each value maps to the matching font-size token\n   * (`xs`→`--n-font-size-xs` … `l`→`--n-font-size-l`); `xs` suits dense\n   * surfaces like dark tooltips, `l` is for more prominent keys.\n   */\n  @property({ reflect: true }) size: 'xs' | 's' | 'm' | 'l' = 'm'\n\n  /**\n   * The colour variant. `default` follows the active layout theme; `light` and\n   * `dark` pin the key to fixed light/dark colours regardless of the theme\n   * (e.g. a dark key on a dark tooltip).\n   */\n  @property({ reflect: true }) variant: 'default' | 'light' | 'dark' = 'default'\n\n  /**\n   * Removes the border and drop shadow, for a flat key with no outline.\n   */\n  @property({ reflect: true, type: Boolean }) borderless = false\n\n  /**\n   * Raises the text contrast — the theme's main text colour (`--n-color-text`)\n   * on the `default` variant, or the pinned high-contrast colour (dark text /\n   * white) on the fixed `light` / `dark` variants.\n   */\n  @property({ reflect: true, type: Boolean }) emphasize = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    injectLightDomStyles(this, style)\n  }\n\n  // Render in the light DOM so the key label is the element's own content and\n  // is styled by the injected stylesheet (no shadow boundary, like Table).\n  protected createRenderRoot() {\n    return this\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-kbd': Kbd\n  }\n}\n"],"names":["Kbd","DraftComponentMixin","LitElement","constructor","this","size","variant","borderless","emphasize","connectedCallback","super","injectLightDomStyles","style","createRenderRoot","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"ogGA4Be,IAAMA,EAAN,cAAkBC,EAAoBC,IAAtC,WAAAC,uBAMgBC,KAAIC,KAA2B,IAO/BD,KAAOE,QAAiC,UAKzBF,KAAUG,YAAG,EAObH,KAASI,WAAG,CAYzD,CAVC,iBAAAC,GACEC,MAAMD,oBACNE,EAAqBP,KAAMQ,EAC5B,CAIS,gBAAAC,GACR,OAAOT,IACR,GA9B4BU,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA0ChB,EAAAiB,UAAA,YAAA,GAOlCH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyDhB,EAAAiB,UAAA,eAAA,GAKlCH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAA6BnB,EAAAiB,UAAA,kBAAA,GAOlBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAA4BnB,EAAAiB,UAAA,iBAAA,GAzB1CjB,EAAGc,EAAA,CADvBM,EAAc,aACMpB,SAAAA"}

package/lib/KbdGroup.js

@@ -0,0 +1,2 @@
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as r}from"lit";import{customElement as i}from"lit/decorators.js";import{i as o}from"./light-dom-styles-DXsbiKU9.js";import{D as s}from"./DraftComponentMixin-4qug5Rky.js";const a=e`nord-kbd-group{align-items:center;display:inline-flex;gap:var(--n-space-xs);line-height:var(--n-line-height-tight);vertical-align:middle}`;let n=class extends(s(r)){connectedCallback(){super.connectedCallback(),o(this,a)}createRenderRoot(){return this}};n=t([i("nord-kbd-group")],n);var l=n;export{l as default};
+//# sourceMappingURL=KbdGroup.js.map

package/lib/KbdGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KbdGroup.js","sources":["../src/kbd/KbdGroup.ts"],"sourcesContent":["import { LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { injectLightDomStyles } from '../common/light-dom-styles.js'\nimport { DraftComponentMixin } from '../common/mixins/DraftComponentMixin.js'\nimport style from './KbdGroup.css'\n\n/**\n * Kbd Group lays out a set of [Kbd](/components/kbd/) keys together, for example\n * to represent a multi-key shortcut such as <kbd>Ctrl</kbd> <kbd>K</kbd>.\n *\n * @status draft\n * @category content\n * @lightDom true\n *\n * @slot - Default slot for [Kbd](/components/kbd/) elements.\n */\n@customElement('nord-kbd-group')\nexport default class KbdGroup extends DraftComponentMixin(LitElement) {\n  connectedCallback() {\n    super.connectedCallback()\n    injectLightDomStyles(this, style)\n  }\n\n  protected createRenderRoot() {\n    return this\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-kbd-group': KbdGroup\n  }\n}\n"],"names":["KbdGroup","DraftComponentMixin","LitElement","connectedCallback","super","injectLightDomStyles","this","style","createRenderRoot","__decorate","customElement"],"mappings":"sYAkBe,IAAMA,EAAN,cAAuBC,EAAoBC,IACxD,iBAAAC,GACEC,MAAMD,oBACNE,EAAqBC,KAAMC,EAC5B,CAES,gBAAAC,GACR,OAAOF,IACR,GARkBN,EAAQS,EAAA,CAD5BC,EAAc,mBACMV,SAAAA"}

package/lib/KeyboardController.js

@@ -1,2 +1,2 @@
-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]=t=>{var r;o.forceShortcut&&t.preventDefault(),null===(r=o.handler)||void 0===r||r.call(o,this.host)});this.commandShortcuts.bind(t)}}export{r as KeyboardController};
+import{S as t}from"./ShortcutController-CV5b0BZl.js";import"./tinykeys-DwvDXsEb.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]=t=>{var r;o.forceShortcut&&t.preventDefault(),null===(r=o.handler)||void 0===r||r.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 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] = (event: Event) => {\n          // The handler always fires. Only override the browser default when the\n          // command explicitly opts in via `forceShortcut`, acknowledging it is\n          // reclaiming a combo the browser may reserve (e.g. Alt+D = address bar).\n          if (command.forceShortcut) {\n            event.preventDefault()\n          }\n          command.handler?.(this.host)\n        }\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","event","forceShortcut","_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,UAAaC,UAIzBH,EAAQI,eACVD,EAAM/B,iBAEO,QAAfiC,EAAAL,EAAQM,eAAO,IAAAD,GAAAA,EAAAE,KAAAP,EAAGrB,KAAKF,KAAK,GAKlCE,KAAKE,iBAAiB2B,KAAKT,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] = (event: Event) => {\n          // The handler always fires. Only override the browser default when the\n          // command explicitly opts in via `forceShortcut`, acknowledging it is\n          // reclaiming a combo the browser may reserve (e.g. Alt+D = address bar).\n          if (command.forceShortcut) {\n            event.preventDefault()\n          }\n          command.handler?.(this.host)\n        }\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","event","forceShortcut","_a","handler","call","bind"],"mappings":"oFAeA,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,UAAaC,UAIzBH,EAAQI,eACVD,EAAM/B,iBAEO,QAAfiC,EAAAL,EAAQM,eAAO,IAAAD,GAAAA,EAAAE,KAAAP,EAAGrB,KAAKF,KAAK,GAKlCE,KAAKE,iBAAiB2B,KAAKT,EAC5B"}

package/lib/Layout.js

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