@nordhealth/components 5.0.0 → 5.0.2

package/lib/FilterField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterField.js","sources":["../src/filter-field/FilterField.ts"],"sourcesContent":["import * as closeIcon from '@nordhealth/icons/lib/assets/interface-close-small.js'\nimport * as filterIcon from '@nordhealth/icons/lib/assets/interface-filter.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { injectLightDomStyles } from '../common/light-dom-styles.js'\nimport { DraftComponentMixin } from '../common/mixins/DraftComponentMixin.js'\nimport chipStyle from '../common/styles/filter-chip.css'\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport { FilterFieldClearEvent, FilterFieldRemoveEvent } from './FilterFieldEvents.js'\nimport '../button/Button.js'\nimport '../button-group/ButtonGroup.js'\nimport '../visually-hidden/VisuallyHidden.js'\n\nIcon.registerIcon(closeIcon)\nIcon.registerIcon(filterIcon)\n\nexport { FilterFieldClearEvent, FilterFieldRemoveEvent } from './FilterFieldEvents.js'\n\n/** Popup ARIA a host sets on this element; mirrored onto the focusable trigger. */\nconst FORWARDED_ARIA = ['aria-controls', 'aria-haspopup', 'aria-expanded'] as const\n\n/**\n * Filter Field is the presentation-only filter **chip**: a joined pill showing a\n * leading icon, the filter's `label`, the active selection summary (`value`) and\n * a clear or remove affordance, dashed while inactive. It is the shared chip used\n * across the filter family and the building block for custom filters.\n *\n * It owns no popout and tracks no value — drop it into a popout-owning control as\n * its `slot=\"trigger\"` (the host opens/positions the popout and sets\n * `aria-controls`/`aria-haspopup`/`aria-expanded` on this element). Show the\n * active selection with `value`, reset it in response to `clear`, and remove the\n * whole field in response to `remove`. Your app owns the active filters and any\n * URL/query state.\n *\n * @status draft\n * @category form\n * @lightDom true\n *\n * @fires {FilterFieldClearEvent} clear - Dispatched when the clear affordance is pressed.\n * @fires {FilterFieldRemoveEvent} remove - Dispatched when the remove affordance is pressed.\n *\n * @localization filterIconLabel - Accessible label for the leading filter icon.\n * @localization selectionLabel - The chip prefix shown before the highlighted value (e.g. \"Status is\").\n * @localization clearLabel - Accessible label for the clear button.\n * @localization removeLabel - Accessible label for the remove button.\n *\n * @parent FilterBar\n */\n@customElement('nord-filter-field')\nexport default class FilterField extends DraftComponentMixin(LitElement) {\n  private localize = new LocalizeController<'nord-filter-field'>(this)\n\n  @query('.n-filter-field-trigger') private triggerButton?: HTMLElement\n\n  private ariaObserver?: MutationObserver\n\n  /** The label naming what this filter targets, shown on the chip. */\n  @property({ reflect: true }) label = ''\n\n  /**\n   * A short summary of the active selection (e.g. the selected option's label,\n   * or \"3 selected\"). When set the chip is shown as active and the clear button\n   * appears; leave it empty for an inactive filter. The chip does not derive this\n   * — set it from your app's state.\n   */\n  @property({ reflect: true }) value = ''\n\n  /**\n   * Forces the active (solid) treatment without a `value` summary, for filters\n   * that are on but have nothing short to show.\n   */\n  @property({ reflect: true, type: Boolean }) active = false\n\n  /**\n   * Shows a clear (✕) button while the chip is active. Defaults to `true`. Has no\n   * effect when `removable` is set.\n   */\n  @property({ reflect: true, type: Boolean }) clearable = true\n\n  /** The leading icon shown on the chip. */\n  @property({ reflect: true }) icon = 'interface-filter'\n\n  /** Identifies the filter (e.g. for your app's active-filter state). */\n  @property({ reflect: true }) name = ''\n\n  /**\n   * Whether the whole field can be removed. When `true` the trailing affordance\n   * is a remove button that fires `remove`; otherwise it is a clear button (shown\n   * only when there is a value) that fires `clear`.\n   */\n  @property({ reflect: true, type: Boolean }) removable = false\n\n  /**\n   * Makes the component disabled. This prevents users from being able to\n   * interact with it and conveys its inactive state to assistive technologies.\n   */\n  @property({ reflect: true, type: Boolean }) disabled = false\n\n  /** The size of the chip controls. */\n  @property({ reflect: true }) size: 's' | 'm' | 'l' = 's'\n\n  connectedCallback() {\n    super.connectedCallback()\n    injectLightDomStyles(this, chipStyle, 'nord-filter-chip')\n    // A host (e.g. nord-filter-date-range, or a consumer's popout) sets the popup\n    // ARIA on this element; mirror it onto the focusable trigger button.\n    this.ariaObserver = new MutationObserver(() => this.forwardAria())\n    this.ariaObserver.observe(this, { attributes: true, attributeFilter: [...FORWARDED_ARIA] })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.ariaObserver?.disconnect()\n  }\n\n  protected createRenderRoot() {\n    return this\n  }\n\n  protected updated() {\n    this.forwardAria()\n  }\n\n  private forwardAria() {\n    const button = this.triggerButton\n    if (!button) {\n      return\n    }\n    for (const attr of FORWARDED_ARIA) {\n      const value = this.getAttribute(attr)\n      if (value == null) {\n        button.removeAttribute(attr)\n      }\n      else {\n        button.setAttribute(attr, value)\n      }\n    }\n  }\n\n  /** Whether the filter currently has an active selection. */\n  private get isActive(): boolean {\n    return this.active || this.value.length > 0\n  }\n\n  private handleClear = (e: Event) => {\n    // Stop the click reaching the host so clearing doesn't also open the popout.\n    e.stopPropagation()\n\n    /** Dispatched when the clear affordance is pressed. */\n    this.dispatchEvent(new FilterFieldClearEvent())\n  }\n\n  private handleRemove = (e: Event) => {\n    e.stopPropagation()\n\n    /** Dispatched when the remove affordance is pressed. */\n    this.dispatchEvent(new FilterFieldRemoveEvent())\n  }\n\n  render() {\n    const active = this.isActive\n\n    return html`\n      <nord-button-group>\n        <nord-button\n          class=\"n-filter-field-trigger\"\n          type=\"button\"\n          size=${this.size}\n          variant=${active ? nothing : 'dashed'}\n          ?disabled=${this.disabled}\n        >\n          <nord-icon slot=\"start\" name=${this.icon} label=${this.localize.term('filterIconLabel')}></nord-icon>\n          ${active && this.value\n            ? html`\n                <span class=\"n-filter-field-label\">${this.localize.term('selectionLabel', this.label)}</span>\n                <span class=\"n-filter-field-value\">${this.value}</span>\n              `\n            : html`<span class=\"n-filter-field-label\">${this.label}</span>`}\n        </nord-button>\n\n        ${this.removable\n          ? html`\n              <nord-button\n                class=\"n-filter-field-remove\"\n                type=\"button\"\n                size=${this.size}\n                square\n                variant=${active ? nothing : 'dashed'}\n                ?disabled=${this.disabled}\n                @click=${this.handleRemove}\n              >\n                <nord-icon name=\"interface-close-small\" size=\"xs\"></nord-icon>\n                <nord-visually-hidden>${this.localize.term('removeLabel')}</nord-visually-hidden>\n              </nord-button>\n            `\n          : active && this.clearable\n            ? html`\n                <nord-button\n                  class=\"n-filter-field-clear\"\n                  type=\"button\"\n                  size=${this.size}\n                  square\n                  ?disabled=${this.disabled}\n                  @click=${this.handleClear}\n                >\n                  <nord-icon name=\"interface-close-small\" size=\"xs\"></nord-icon>\n                  <nord-visually-hidden>${this.localize.term('clearLabel')}</nord-visually-hidden>\n                </nord-button>\n              `\n            : nothing}\n      </nord-button-group>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-filter-field': FilterField\n  }\n}\n"],"names":["Icon","registerIcon","closeIcon","filterIcon","FORWARDED_ARIA","FilterField","DraftComponentMixin","LitElement","constructor","this","localize","LocalizeController","label","value","active","clearable","icon","name","removable","disabled","size","handleClear","e","stopPropagation","dispatchEvent","FilterFieldClearEvent","handleRemove","FilterFieldRemoveEvent","connectedCallback","super","injectLightDomStyles","chipStyle","ariaObserver","MutationObserver","forwardAria","observe","attributes","attributeFilter","disconnectedCallback","_a","disconnect","createRenderRoot","updated","button","triggerButton","attr","getAttribute","removeAttribute","setAttribute","isActive","length","render","html","nothing","term","__decorate","query","prototype","property","reflect","type","Boolean","customElement"],"mappings":"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"}
+{"version":3,"file":"FilterField.js","sources":["../src/filter-field/FilterField.ts"],"sourcesContent":["import * as closeIcon from '@nordhealth/icons/lib/assets/interface-close-small.js'\nimport * as filterIcon from '@nordhealth/icons/lib/assets/interface-filter.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { injectLightDomStyles } from '../common/light-dom-styles.js'\nimport { DraftComponentMixin } from '../common/mixins/DraftComponentMixin.js'\nimport chipStyle from '../common/styles/filter-chip.css'\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport { FilterFieldClearEvent, FilterFieldRemoveEvent } from './FilterFieldEvents.js'\nimport '../button/Button.js'\nimport '../button-group/ButtonGroup.js'\nimport '../visually-hidden/VisuallyHidden.js'\n\nIcon.registerIcon(closeIcon)\nIcon.registerIcon(filterIcon)\n\nexport { FilterFieldClearEvent, FilterFieldRemoveEvent } from './FilterFieldEvents.js'\n\n/** Popup ARIA a host sets on this element; mirrored onto the focusable trigger. */\nconst FORWARDED_ARIA = ['aria-controls', 'aria-haspopup', 'aria-expanded'] as const\n\n/**\n * Filter Field is the presentation-only filter **chip**: a joined pill showing a\n * leading icon, the filter's `label`, the active selection summary (`value`) and\n * a clear or remove affordance, dashed while inactive. It is the shared chip used\n * across the filter family and the building block for custom filters.\n *\n * It owns no popout and tracks no value — drop it into a popout-owning control as\n * its `slot=\"trigger\"` (the host opens/positions the popout and sets\n * `aria-controls`/`aria-haspopup`/`aria-expanded` on this element). Show the\n * active selection with `value`, reset it in response to `clear`, and remove the\n * whole field in response to `remove`. Your app owns the active filters and any\n * URL/query state.\n *\n * @status draft\n * @category form\n * @lightDom true\n *\n * @fires {FilterFieldClearEvent} clear - Dispatched when the clear affordance is pressed.\n * @fires {FilterFieldRemoveEvent} remove - Dispatched when the remove affordance is pressed.\n *\n * @localization filterIconLabel - Accessible label for the leading filter icon.\n * @localization selectionLabel - The chip prefix shown before the highlighted value (e.g. \"Status is\").\n * @localization clearLabel - Accessible label for the clear button.\n * @localization removeLabel - Accessible label for the remove button.\n *\n * @parent FilterBar\n */\n@customElement('nord-filter-field')\nexport default class FilterField extends DraftComponentMixin(LitElement) {\n  private localize = new LocalizeController<'nord-filter-field'>(this)\n\n  @query('.n-filter-field-trigger') private triggerButton?: HTMLElement\n\n  private ariaObserver?: MutationObserver\n\n  /** The label naming what this filter targets, shown on the chip. */\n  @property({ reflect: true }) label = ''\n\n  /**\n   * A short summary of the active selection (e.g. the selected option's label,\n   * or \"3 selected\"). When set the chip is shown as active and the clear button\n   * appears; leave it empty for an inactive filter. The chip does not derive this\n   * — set it from your app's state.\n   */\n  @property({ reflect: true }) value = ''\n\n  /**\n   * Forces the active (solid) treatment without a `value` summary, for filters\n   * that are on but have nothing short to show.\n   */\n  @property({ reflect: true, type: Boolean }) active = false\n\n  /**\n   * Shows a clear (✕) button while the chip is active. Defaults to `true`. Has no\n   * effect when `removable` is set.\n   */\n  @property({ reflect: true, type: Boolean }) clearable = true\n\n  /** The leading icon shown on the chip. */\n  @property({ reflect: true }) icon = 'interface-filter'\n\n  /** Identifies the filter (e.g. for your app's active-filter state). */\n  @property({ reflect: true }) name = ''\n\n  /**\n   * Whether the whole field can be removed. When `true` the trailing affordance\n   * is a remove button that fires `remove`; otherwise it is a clear button (shown\n   * only when there is a value) that fires `clear`.\n   */\n  @property({ reflect: true, type: Boolean }) removable = false\n\n  /**\n   * Makes the component disabled. This prevents users from being able to\n   * interact with it and conveys its inactive state to assistive technologies.\n   */\n  @property({ reflect: true, type: Boolean }) disabled = false\n\n  /** The size of the chip controls. */\n  @property({ reflect: true }) size: 's' | 'm' | 'l' = 's'\n\n  connectedCallback() {\n    super.connectedCallback()\n    injectLightDomStyles(this, chipStyle, 'nord-filter-chip')\n    // A host (e.g. nord-filter-date-range, or a consumer's popout) sets the popup\n    // ARIA on this element; mirror it onto the focusable trigger button.\n    this.ariaObserver = new MutationObserver(() => this.forwardAria())\n    this.ariaObserver.observe(this, { attributes: true, attributeFilter: [...FORWARDED_ARIA] })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.ariaObserver?.disconnect()\n  }\n\n  protected createRenderRoot() {\n    return this\n  }\n\n  protected updated() {\n    this.forwardAria()\n  }\n\n  private forwardAria() {\n    const button = this.triggerButton\n    if (!button) {\n      return\n    }\n    for (const attr of FORWARDED_ARIA) {\n      const value = this.getAttribute(attr)\n      if (value == null) {\n        button.removeAttribute(attr)\n      }\n      else {\n        button.setAttribute(attr, value)\n      }\n    }\n  }\n\n  /** Whether the filter currently has an active selection. */\n  private get isActive(): boolean {\n    return this.active || this.value.length > 0\n  }\n\n  private handleClear = (e: Event) => {\n    // Stop the click reaching the host so clearing doesn't also open the popout.\n    e.stopPropagation()\n\n    /** Dispatched when the clear affordance is pressed. */\n    this.dispatchEvent(new FilterFieldClearEvent())\n  }\n\n  private handleRemove = (e: Event) => {\n    e.stopPropagation()\n\n    /** Dispatched when the remove affordance is pressed. */\n    this.dispatchEvent(new FilterFieldRemoveEvent())\n  }\n\n  render() {\n    const active = this.isActive\n\n    return html`\n      <nord-button-group>\n        <nord-button\n          class=\"n-filter-field-trigger\"\n          type=\"button\"\n          size=${this.size}\n          variant=${active ? nothing : 'dashed'}\n          ?disabled=${this.disabled}\n        >\n          <nord-icon slot=\"start\" name=${this.icon} label=${this.localize.term('filterIconLabel')}></nord-icon>\n          ${active && this.value\n            ? html`\n                <span class=\"n-filter-field-label\">${this.localize.term('selectionLabel', this.label)}</span>\n                <span class=\"n-filter-field-value\">${this.value}</span>\n              `\n            : html`<span class=\"n-filter-field-label\">${this.label}</span>`}\n        </nord-button>\n\n        ${this.removable\n          ? html`\n              <nord-button\n                class=\"n-filter-field-remove\"\n                type=\"button\"\n                size=${this.size}\n                square\n                variant=${active ? nothing : 'dashed'}\n                ?disabled=${this.disabled}\n                @click=${this.handleRemove}\n              >\n                <nord-icon name=\"interface-close-small\" size=\"xs\"></nord-icon>\n                <nord-visually-hidden>${this.localize.term('removeLabel')}</nord-visually-hidden>\n              </nord-button>\n            `\n          : active && this.clearable\n            ? html`\n                <nord-button\n                  class=\"n-filter-field-clear\"\n                  type=\"button\"\n                  size=${this.size}\n                  square\n                  ?disabled=${this.disabled}\n                  @click=${this.handleClear}\n                >\n                  <nord-icon name=\"interface-close-small\" size=\"xs\"></nord-icon>\n                  <nord-visually-hidden>${this.localize.term('clearLabel')}</nord-visually-hidden>\n                </nord-button>\n              `\n            : nothing}\n      </nord-button-group>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-filter-field': FilterField\n  }\n}\n"],"names":["Icon","registerIcon","closeIcon","filterIcon","FORWARDED_ARIA","FilterField","DraftComponentMixin","LitElement","constructor","this","localize","LocalizeController","label","value","active","clearable","icon","name","removable","disabled","size","handleClear","e","stopPropagation","dispatchEvent","FilterFieldClearEvent","handleRemove","FilterFieldRemoveEvent","connectedCallback","super","injectLightDomStyles","chipStyle","ariaObserver","MutationObserver","forwardAria","observe","attributes","attributeFilter","disconnectedCallback","_a","disconnect","createRenderRoot","updated","button","triggerButton","attr","getAttribute","removeAttribute","setAttribute","isActive","length","render","html","nothing","term","__decorate","query","prototype","property","reflect","type","Boolean","customElement"],"mappings":"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"}

package/lib/FilterInput.js

@@ -1,2 +1,2 @@
-import{_ as i}from"./tslib.es6-CmLYFWVC.js";import{c as t}from"./interface-close-small-CnpAFMO3.js";import{f as e}from"./interface-filter-CCsx9-u6.js";import{s as n}from"./navigation-search-CBbIGzo2.js";import{css as o,isServer as r,html as l,nothing as s,LitElement as a}from"lit";import{query as p,property as c,customElement as d}from"lit/decorators.js";import{ifDefined as u}from"lit/directives/if-defined.js";import{ref as f}from"lit/directives/ref.js";import{L as m}from"./LightDismissController-wcL1ziJa.js";import{O as h}from"./OpenStateController-CCnZ7up6.js";import{N as v}from"./events-Bv6wNHwJ.js";import{i as b}from"./light-dom-styles-DXsbiKU9.js";import{D as z}from"./DraftComponentMixin-4qug5Rky.js";import{F as j}from"./FocusableMixin-BlQLNPdJ.js";import{F as g}from"./FormAssociatedMixin-D9aPREgv.js";import{I as x}from"./InputMixin-LetXsCyv.js";import{R as y}from"./ReadonlyMixin-BdJPGtQ3.js";import{S as k}from"./SizeMixin-CU9cLbLC.js";import $ from"./Icon.js";import{LocalizeController as C}from"./LocalizeController.js";import"./Button.js";import"./Popout-CFtFoCaA.js";import"./EventController-BBOmvfLa.js";import"./ShortcutController-CV5b0BZl.js";import"./tinykeys-DwvDXsEb.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./SlotController-Z6eG7LSZ.js";import"./VisuallyHidden.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./Component-BJ5O5n8k.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./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"./LightDomController-DIwtVelV.js";import"./Spinner.js";import"./positioning-D-K8Mueq.js";import"./DirectionController-ChvNGESZ.js";import"./ScrollbarController-BFC67Y2x.js";const _=o`nord-filter-input,nord-filter-input *,nord-filter-input :after,nord-filter-input :before{box-sizing:border-box}nord-filter-input{--_n-filter-input-inline-size:var(--n-filter-input-inline-size,16rem);--_n-filter-input-background:var(--n-input-background,var(--n-color-surface));--_n-filter-input-border-color:var(--n-input-border-color,var(--n-color-border-strong));--_n-filter-input-border-radius:var(--n-input-border-radius,var(--n-border-radius-s));--_n-filter-input-block-size:calc(var(--n-space-l) + var(--n-space-xs));--_n-filter-input-padding-inline:var(--n-space-s);--_n-filter-input-font-size:var(--n-font-size-s);display:inline-flex;inline-size:var(--_n-filter-input-inline-size);max-inline-size:100%}nord-filter-input[size=m]{--_n-filter-input-block-size:var(--n-space-xl);--_n-filter-input-font-size:var(--n-font-size-m)}nord-filter-input[size=l]{--_n-filter-input-block-size:calc(var(--n-space-xxl) - var(--n-space-l));--_n-filter-input-font-size:var(--n-font-size-l)}nord-filter-input[mode=chip]{inline-size:auto}nord-filter-input .n-filter-input-root{display:contents}nord-filter-input .n-filter-input-control{align-items:center;background:var(--_n-filter-input-background);block-size:var(--_n-filter-input-block-size);border:1px solid var(--_n-filter-input-border-color);border-radius:var(--_n-filter-input-border-radius);display:flex;inline-size:100%;position:relative}nord-filter-input .n-filter-input-control:focus-within{border-color:var(--n-color-accent);box-shadow:0 0 0 1px var(--n-color-accent)}nord-filter-input .n-filter-input-slot{align-items:center;color:var(--n-color-icon);display:inline-flex;flex:0 0 auto}nord-filter-input .n-filter-input-slot-start{margin-inline-start:var(--_n-filter-input-padding-inline)}nord-filter-input .n-filter-input-slot-end:not(:empty){margin-inline-end:var(--n-space-xs)}nord-filter-input .n-filter-input-default-icon{--_n-icon-color:var(--n-color-text-weaker);color:var(--n-color-text-weaker)}nord-filter-input .n-filter-input-slot-start:has([slot=start]) .n-filter-input-default-icon{display:none}nord-filter-input .n-filter-input-slot nord-icon{--_n-icon-size:var(--n-size-icon-s)}nord-filter-input[disabled] .n-filter-input-slot{color:var(--n-color-text-weakest)}nord-filter-input .n-filter-input-control .n-filter-input-label{align-items:center;align-self:stretch;border-inline-end:1px solid var(--_n-filter-input-border-color);color:var(--n-color-text-weaker);display:inline-flex;flex:0 0 auto;font-family:var(--n-font-family);font-size:var(--_n-filter-input-font-size);font-weight:var(--n-font-weight);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s);white-space:nowrap}nord-filter-input .n-filter-input-field{appearance:none;background:#0000;block-size:100%;border:0;color:var(--n-color-text);flex:1 1 auto;font-family:var(--n-font-family);font-size:var(--_n-filter-input-font-size);inline-size:100%;min-inline-size:0;outline:none;padding-block:0;padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s)}nord-filter-input .n-filter-input-field::placeholder{color:var(--n-color-text-weaker)}nord-filter-input .n-filter-input-field::-webkit-search-cancel-button{appearance:none}nord-filter-input .n-filter-input-clear{align-items:center;background:#0000;border:0;border-radius:var(--n-border-radius-s);color:var(--n-color-text-weaker);cursor:pointer;display:inline-flex;flex:0 0 auto;justify-content:center;margin-inline-end:var(--n-space-xs);padding:var(--n-space-xs)}nord-filter-input .n-filter-input-clear:hover{color:var(--n-color-text)}nord-filter-input .n-filter-input-clear nord-icon{--_n-icon-size:var(--n-size-icon-s);block-size:var(--n-size-icon-s);inline-size:var(--n-size-icon-s)}nord-filter-input .n-filter-input-popout{inline-size:var(--_n-filter-input-inline-size);max-inline-size:100%;padding-block-end:var(--n-space-s);padding-block-start:var(--n-space-s);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s)}nord-filter-input .n-filter-input-popout .n-filter-input-control{block-size:var(--n-space-xl)}`;$.registerIcon(t),$.registerIcon(e),$.registerIcon(n);let w=1,I=class extends(z(k(g(y(x(j(a))))))){constructor(){super(...arguments),this.filterInputId="nord-filter-input-"+w++,this.localize=new C(this),this.dismiss=new m(this,{isOpen:()=>this.open,onDismiss:()=>this.hide(),isDismissible:i=>i!==this}),this.openState=new h(this,{isOpen:()=>this.open,setOpen:i=>{this.open=i},popout:()=>this.popout,isInert:()=>this.disabled||this.readonly||"chip"!==this.mode,onOpen:()=>this.focus()}),this.mode="inline",this.open=!1,this.size="s",this.clearable=!1,this.handleTriggerClick=()=>{this.openState.toggle()},this.handleClear=i=>{i.stopPropagation(),this.value="",this.dispatchEvent(new v("input")),this.dispatchEvent(new v("change")),this.focus()}}connectedCallback(){var i;super.connectedCallback(),b(this,_),null!==(i=this.slotObserver)&&void 0!==i||(this.slotObserver=new MutationObserver((()=>this.requestUpdate()))),this.slotObserver.observe(this,{childList:!0})}disconnectedCallback(){var i;super.disconnectedCallback(),null===(i=this.slotObserver)||void 0===i||i.disconnect(),this.slotObserver=void 0}createRenderRoot(){if(r)return this;const i=document.createElement("div");return i.className="n-filter-input-root",this.appendChild(i),i}relocateSlots(){if(r)return;const i=(i,t)=>{if(t)for(const e of Array.from(this.children))e.getAttribute("slot")===i&&e.parentElement!==t&&t.appendChild(e)};i("start",this.startZone),i("end",this.endZone)}updated(i){super.updated(i),this.relocateSlots()}get inputAccessibleName(){return this.controlAriaLabel||this.getAttribute("aria-label")||this.label||this.localize.term("searchLabel")}show(){this.openState.show()}hide(){this.openState.hide()}renderInput(){var i;const t=this.clearable&&Boolean(this.value)&&!this.disabled,e=Boolean(this.label)&&!this.hideLabel;return l`<div class="n-filter-input-control">${e?l`<label class="n-filter-input-label" for="${this.filterInputId}-input">${this.label}</label>`:l`<span class="n-filter-input-slot n-filter-input-slot-start"><nord-icon class="n-filter-input-default-icon" name="navigation-search" aria-hidden="true"></nord-icon></span>`} <input ${f(this.focusableRef)} class="n-filter-input-field" type="search" id="${this.filterInputId}-input" .value="${null!==(i=this.value)&&void 0!==i?i:""}" placeholder="${u(this.placeholder)}" aria-label="${e?s:this.inputAccessibleName}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" autocomplete="off" autocapitalize="off" spellcheck="false" @input="${this.handleInput}" @change="${this.handleChange}"> <span class="n-filter-input-slot n-filter-input-slot-end"></span> ${t?l`<button class="n-filter-input-clear" type="button" tabindex="-1" aria-label="${this.localize.term("clearLabel")}" ?disabled="${this.disabled}" @click="${this.handleClear}"><nord-icon name="interface-close-small"></nord-icon></button>`:s}</div>`}render(){if("chip"!==this.mode)return this.renderInput();const i=`${this.filterInputId}-popout`,t=Boolean(this.value);return l`<nord-button class="n-filter-input-trigger" type="button" size="${this.size}" variant="${t?s:"dashed"}" aria-controls="${i}" aria-haspopup="dialog" aria-expanded="${this.open?"true":"false"}" ?disabled="${this.disabled}" @click="${this.handleTriggerClick}"><nord-icon slot="start" name="interface-filter" label="${this.inputAccessibleName}"></nord-icon>${t?this.value:this.label||this.localize.term("searchLabel")}</nord-button><nord-popout id="${i}" controlled always-floating @open="${this.openState.onPopoutOpen}" @close="${this.openState.onPopoutClose}"><div class="n-filter-input-popout">${this.renderInput()}</div></nord-popout>`}};i([p("nord-popout",!0)],I.prototype,"popout",void 0),i([p(".n-filter-input-slot-start")],I.prototype,"startZone",void 0),i([p(".n-filter-input-slot-end")],I.prototype,"endZone",void 0),i([c({reflect:!0})],I.prototype,"mode",void 0),i([c({reflect:!0,type:Boolean})],I.prototype,"open",void 0),i([c({reflect:!0})],I.prototype,"size",void 0),i([c({reflect:!0,type:Boolean})],I.prototype,"clearable",void 0),I=i([d("nord-filter-input")],I);var S=I;export{S as default};
+import{_ as i}from"./tslib.es6-CmLYFWVC.js";import{c as t}from"./interface-close-small-CnpAFMO3.js";import{f as e}from"./interface-filter-CCsx9-u6.js";import{s as n}from"./navigation-search-CBbIGzo2.js";import{css as o,isServer as r,html as l,nothing as s,LitElement as a}from"lit";import{query as p,property as c,customElement as d}from"lit/decorators.js";import{ifDefined as u}from"lit/directives/if-defined.js";import{ref as f}from"lit/directives/ref.js";import{L as m}from"./LightDismissController-wcL1ziJa.js";import{O as h}from"./OpenStateController-CCnZ7up6.js";import{N as v}from"./events-Bv6wNHwJ.js";import{i as b}from"./light-dom-styles-DXsbiKU9.js";import{D as z}from"./DraftComponentMixin-4qug5Rky.js";import{F as j}from"./FocusableMixin-BlQLNPdJ.js";import{F as g}from"./FormAssociatedMixin-D9aPREgv.js";import{I as x}from"./InputMixin-LetXsCyv.js";import{R as y}from"./ReadonlyMixin-BdJPGtQ3.js";import{S as k}from"./SizeMixin-CU9cLbLC.js";import $ from"./Icon.js";import{LocalizeController as C}from"./LocalizeController.js";import"./Button.js";import"./Popout-B6Hirj3y.js";import"./EventController-BBOmvfLa.js";import"./ShortcutController-CV5b0BZl.js";import"./tinykeys-DwvDXsEb.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./SlotController-Z6eG7LSZ.js";import"./VisuallyHidden.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./Component-BJ5O5n8k.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./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"./localization24.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";import"./positioning-D-K8Mueq.js";import"./DirectionController-ChvNGESZ.js";import"./ScrollbarController-BFC67Y2x.js";const _=o`nord-filter-input,nord-filter-input *,nord-filter-input :after,nord-filter-input :before{box-sizing:border-box}nord-filter-input{--_n-filter-input-inline-size:var(--n-filter-input-inline-size,16rem);--_n-filter-input-background:var(--n-input-background,var(--n-color-surface));--_n-filter-input-border-color:var(--n-input-border-color,var(--n-color-border-strong));--_n-filter-input-border-radius:var(--n-input-border-radius,var(--n-border-radius-s));--_n-filter-input-block-size:calc(var(--n-space-l) + var(--n-space-xs));--_n-filter-input-padding-inline:var(--n-space-s);--_n-filter-input-font-size:var(--n-font-size-s);display:inline-flex;inline-size:var(--_n-filter-input-inline-size);max-inline-size:100%}nord-filter-input[size=m]{--_n-filter-input-block-size:var(--n-space-xl);--_n-filter-input-font-size:var(--n-font-size-m)}nord-filter-input[size=l]{--_n-filter-input-block-size:calc(var(--n-space-xxl) - var(--n-space-l));--_n-filter-input-font-size:var(--n-font-size-l)}nord-filter-input[mode=chip]{inline-size:auto}nord-filter-input .n-filter-input-root{display:contents}nord-filter-input .n-filter-input-control{align-items:center;background:var(--_n-filter-input-background);block-size:var(--_n-filter-input-block-size);border:1px solid var(--_n-filter-input-border-color);border-radius:var(--_n-filter-input-border-radius);display:flex;inline-size:100%;position:relative}nord-filter-input .n-filter-input-control:focus-within{border-color:var(--n-color-accent);box-shadow:0 0 0 1px var(--n-color-accent)}nord-filter-input .n-filter-input-slot{align-items:center;color:var(--n-color-icon);display:inline-flex;flex:0 0 auto}nord-filter-input .n-filter-input-slot-start{margin-inline-start:var(--_n-filter-input-padding-inline)}nord-filter-input .n-filter-input-slot-end:not(:empty){margin-inline-end:var(--n-space-xs)}nord-filter-input .n-filter-input-default-icon{--_n-icon-color:var(--n-color-text-weaker);color:var(--n-color-text-weaker)}nord-filter-input .n-filter-input-slot-start:has([slot=start]) .n-filter-input-default-icon{display:none}nord-filter-input .n-filter-input-slot nord-icon{--_n-icon-size:var(--n-size-icon-s)}nord-filter-input[disabled] .n-filter-input-slot{color:var(--n-color-text-weakest)}nord-filter-input .n-filter-input-control .n-filter-input-label{align-items:center;align-self:stretch;border-inline-end:1px solid var(--_n-filter-input-border-color);color:var(--n-color-text-weaker);display:inline-flex;flex:0 0 auto;font-family:var(--n-font-family);font-size:var(--_n-filter-input-font-size);font-weight:var(--n-font-weight);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s);white-space:nowrap}nord-filter-input .n-filter-input-field{appearance:none;background:#0000;block-size:100%;border:0;color:var(--n-color-text);flex:1 1 auto;font-family:var(--n-font-family);font-size:var(--_n-filter-input-font-size);inline-size:100%;min-inline-size:0;outline:none;padding-block:0;padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s)}nord-filter-input .n-filter-input-field::placeholder{color:var(--n-color-text-weaker)}nord-filter-input .n-filter-input-field::-webkit-search-cancel-button{appearance:none}nord-filter-input .n-filter-input-clear{align-items:center;background:#0000;border:0;border-radius:var(--n-border-radius-s);color:var(--n-color-text-weaker);cursor:pointer;display:inline-flex;flex:0 0 auto;justify-content:center;margin-inline-end:var(--n-space-xs);padding:var(--n-space-xs)}nord-filter-input .n-filter-input-clear:hover{color:var(--n-color-text)}nord-filter-input .n-filter-input-clear nord-icon{--_n-icon-size:var(--n-size-icon-s);block-size:var(--n-size-icon-s);inline-size:var(--n-size-icon-s)}nord-filter-input .n-filter-input-popout{inline-size:var(--_n-filter-input-inline-size);max-inline-size:100%;padding-block-end:var(--n-space-s);padding-block-start:var(--n-space-s);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s)}nord-filter-input .n-filter-input-popout .n-filter-input-control{block-size:var(--n-space-xl)}`;$.registerIcon(t),$.registerIcon(e),$.registerIcon(n);let w=1,I=class extends(z(k(g(y(x(j(a))))))){constructor(){super(...arguments),this.filterInputId="nord-filter-input-"+w++,this.localize=new C(this),this.dismiss=new m(this,{isOpen:()=>this.open,onDismiss:()=>this.hide(),isDismissible:i=>i!==this}),this.openState=new h(this,{isOpen:()=>this.open,setOpen:i=>{this.open=i},popout:()=>this.popout,isInert:()=>this.disabled||this.readonly||"chip"!==this.mode,onOpen:()=>this.focus()}),this.mode="inline",this.open=!1,this.size="s",this.clearable=!1,this.handleTriggerClick=()=>{this.openState.toggle()},this.handleClear=i=>{i.stopPropagation(),this.value="",this.dispatchEvent(new v("input")),this.dispatchEvent(new v("change")),this.focus()}}connectedCallback(){var i;super.connectedCallback(),b(this,_),null!==(i=this.slotObserver)&&void 0!==i||(this.slotObserver=new MutationObserver((()=>this.requestUpdate()))),this.slotObserver.observe(this,{childList:!0})}disconnectedCallback(){var i;super.disconnectedCallback(),null===(i=this.slotObserver)||void 0===i||i.disconnect(),this.slotObserver=void 0}createRenderRoot(){if(r)return this;const i=document.createElement("div");return i.className="n-filter-input-root",this.appendChild(i),i}relocateSlots(){if(r)return;const i=(i,t)=>{if(t)for(const e of Array.from(this.children))e.getAttribute("slot")===i&&e.parentElement!==t&&t.appendChild(e)};i("start",this.startZone),i("end",this.endZone)}updated(i){super.updated(i),this.relocateSlots()}get inputAccessibleName(){return this.controlAriaLabel||this.getAttribute("aria-label")||this.label||this.localize.term("searchLabel")}show(){this.openState.show()}hide(){this.openState.hide()}renderInput(){var i;const t=this.clearable&&Boolean(this.value)&&!this.disabled,e=Boolean(this.label)&&!this.hideLabel;return l`<div class="n-filter-input-control">${e?l`<label class="n-filter-input-label" for="${this.filterInputId}-input">${this.label}</label>`:l`<span class="n-filter-input-slot n-filter-input-slot-start"><nord-icon class="n-filter-input-default-icon" name="navigation-search" aria-hidden="true"></nord-icon></span>`} <input ${f(this.focusableRef)} class="n-filter-input-field" type="search" id="${this.filterInputId}-input" .value="${null!==(i=this.value)&&void 0!==i?i:""}" placeholder="${u(this.placeholder)}" aria-label="${e?s:this.inputAccessibleName}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" autocomplete="off" autocapitalize="off" spellcheck="false" @input="${this.handleInput}" @change="${this.handleChange}"> <span class="n-filter-input-slot n-filter-input-slot-end"></span> ${t?l`<button class="n-filter-input-clear" type="button" tabindex="-1" aria-label="${this.localize.term("clearLabel")}" ?disabled="${this.disabled}" @click="${this.handleClear}"><nord-icon name="interface-close-small"></nord-icon></button>`:s}</div>`}render(){if("chip"!==this.mode)return this.renderInput();const i=`${this.filterInputId}-popout`,t=Boolean(this.value);return l`<nord-button class="n-filter-input-trigger" type="button" size="${this.size}" variant="${t?s:"dashed"}" aria-controls="${i}" aria-haspopup="dialog" aria-expanded="${this.open?"true":"false"}" ?disabled="${this.disabled}" @click="${this.handleTriggerClick}"><nord-icon slot="start" name="interface-filter" label="${this.inputAccessibleName}"></nord-icon>${t?this.value:this.label||this.localize.term("searchLabel")}</nord-button><nord-popout id="${i}" controlled always-floating @open="${this.openState.onPopoutOpen}" @close="${this.openState.onPopoutClose}"><div class="n-filter-input-popout">${this.renderInput()}</div></nord-popout>`}};i([p("nord-popout",!0)],I.prototype,"popout",void 0),i([p(".n-filter-input-slot-start")],I.prototype,"startZone",void 0),i([p(".n-filter-input-slot-end")],I.prototype,"endZone",void 0),i([c({reflect:!0})],I.prototype,"mode",void 0),i([c({reflect:!0,type:Boolean})],I.prototype,"open",void 0),i([c({reflect:!0})],I.prototype,"size",void 0),i([c({reflect:!0,type:Boolean})],I.prototype,"clearable",void 0),I=i([d("nord-filter-input")],I);var S=I;export{S as default};
 //# sourceMappingURL=FilterInput.js.map

package/lib/FilterInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterInput.js","sources":["../src/filter-input/FilterInput.ts"],"sourcesContent":["import type { PropertyValues } from 'lit'\nimport * as closeIcon from '@nordhealth/icons/lib/assets/interface-close-small.js'\nimport * as filterIcon from '@nordhealth/icons/lib/assets/interface-filter.js'\nimport * as searchIcon from '@nordhealth/icons/lib/assets/navigation-search.js'\nimport { html, isServer, LitElement, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { ref } from 'lit/directives/ref.js'\n\nimport { LightDismissController } from '../common/controllers/LightDismissController.js'\nimport { OpenStateController } from '../common/controllers/OpenStateController.js'\nimport { NordEvent } from '../common/events.js'\nimport { injectLightDomStyles } from '../common/light-dom-styles.js'\nimport { DraftComponentMixin } from '../common/mixins/DraftComponentMixin.js'\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { FormAssociatedMixin } from '../common/mixins/FormAssociatedMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport { ReadonlyMixin } from '../common/mixins/ReadonlyMixin.js'\nimport { SizeMixin } from '../common/mixins/SizeMixin.js'\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './FilterInput.css'\nimport '../button/Button.js'\nimport '../popout/Popout.js'\n\nIcon.registerIcon(closeIcon)\nIcon.registerIcon(filterIcon)\nIcon.registerIcon(searchIcon)\n\n/** Per-instance counter so the light-DOM ids stay unique. */\nlet filterInputCount = 1\n\n/**\n * Filter Input is a compact search/text field for filtering a collection. It\n * replaces the small ad-hoc search inputs that sit in toolbars and table\n * headers. By default it renders inline as a small search field with a leading\n * search icon; set `mode=\"chip\"` to collapse it behind a chip button that opens\n * the input in a popout, which is handy in a crowded [Filter Bar](/components/filter-bar/).\n *\n * It emits intent only: `input` as the user types and `change` when the value is\n * committed. Your app owns the active filters and any URL/query state — read the\n * value from the event target (or bind `value`) and filter accordingly.\n *\n * It is a control only, like [Combobox](/components/combobox/): compose it inside\n * a [Field](/components/field/) for a visible label, or set `label` for an\n * accessible name when used standalone.\n *\n * @status draft\n * @category form\n * @lightDom true\n *\n * @fires {NordEvent} input - Dispatched as the user types into the input.\n * @fires {NordEvent} change - Dispatched when the value is committed.\n * @fires {NordEvent} open - Dispatched when the chip-mode popout is opened.\n * @fires {NordEvent} close - Dispatched when the chip-mode popout is closed.\n *\n * @slot start - Leading icon/content; defaults to a search icon.\n * @slot end - Trailing icon/content before the clear button.\n *\n * @localization searchLabel - Default accessible label for the input when no `label` is set.\n * @localization clearLabel - Accessible label for the clear button.\n *\n * @cssprop [--n-filter-input-inline-size] - Controls the inline size, or width, of the inline input.\n *\n * @parent FilterBar\n */\n@customElement('nord-filter-input')\nexport default class FilterInput extends DraftComponentMixin(\n  SizeMixin(FormAssociatedMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement))))),\n) {\n  private filterInputId = `nord-filter-input-${filterInputCount++}`\n\n  private localize = new LocalizeController<'nord-filter-input'>(this)\n\n  @query('nord-popout', true) private popout?: HTMLElement & {\n    show: () => Promise<unknown>\n    hide: (moveFocusToButton?: boolean) => Promise<unknown>\n  }\n\n  // Landing zones for relocated `slot=\"start\"`/`slot=\"end\"` host children. The\n  // control renders into light DOM, so real `<slot>` projection isn't available.\n  @query('.n-filter-input-slot-start') private startZone?: HTMLElement\n  @query('.n-filter-input-slot-end') private endZone?: HTMLElement\n\n  // Watches for `slot=\"start\"`/`slot=\"end\"` children being added or removed so\n  // they get relocated into their landing zones on the next render.\n  private slotObserver?: MutationObserver\n\n  private dismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.hide(),\n    isDismissible: node => node !== this,\n  })\n\n  // Coordinates the chip popout's open state. Only opens in chip mode, and not\n  // while disabled or read-only; focuses the input once opened.\n  private openState = new OpenStateController(this, {\n    isOpen: () => this.open,\n    setOpen: (open) => { this.open = open },\n    popout: () => this.popout,\n    isInert: () => this.disabled || this.readonly || this.mode !== 'chip',\n    onOpen: () => this.focus(),\n  })\n\n  /**\n   * How the input is presented.\n   *\n   * - `inline` (default) renders the search field directly.\n   * - `chip` collapses the field behind a chip button that opens a popout\n   *   containing the input.\n   */\n  @property({ reflect: true }) mode: 'inline' | 'chip' = 'inline'\n\n  /**\n   * Whether the chip-mode popout is open. Only meaningful with `mode=\"chip\"`.\n   */\n  @property({ reflect: true, type: Boolean }) open = false\n\n  /**\n   * The size of the search control. Defaults to `s` to match the other filter\n   * controls in a compact filter bar; set `m` or `l` to enlarge it.\n   */\n  @property({ reflect: true }) override size: 's' | 'm' | 'l' = 's'\n\n  /**\n   * Whether to show a clear (✕) button while there is a value. Clearing resets\n   * the value to `''`, then fires `input` and `change`.\n   */\n  @property({ reflect: true, type: Boolean }) clearable = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    injectLightDomStyles(this, style)\n\n    this.slotObserver ??= new MutationObserver(() => this.requestUpdate())\n    this.slotObserver.observe(this, { childList: true })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.slotObserver?.disconnect()\n    this.slotObserver = undefined\n  }\n\n  // Render in the light DOM (form labelling, Tailwind) like the other new Nord\n  // components, but into a layout-transparent (`display: contents`) wrapper\n  // rather than the host itself, so slotted `slot=\"start\"`/`slot=\"end\"` children\n  // can live as untouched siblings instead of being wiped by this element's own\n  // render (mirrors `nord-combobox`).\n  protected createRenderRoot() {\n    if (isServer) {\n      return this\n    }\n    const root = document.createElement('div')\n    root.className = 'n-filter-input-root'\n    this.appendChild(root)\n    return root\n  }\n\n  /**\n   * Relocates the host's `slot=\"start\"`/`slot=\"end\"` children into the matching\n   * landing zone inside the control. Only direct host children are considered,\n   * and a child already sitting in its zone is left untouched, so repeated\n   * updates are idempotent and don't disturb focus or pointer state.\n   */\n  private relocateSlots() {\n    if (isServer) {\n      return\n    }\n\n    const move = (name: 'start' | 'end', target?: HTMLElement) => {\n      if (!target) {\n        return\n      }\n      for (const child of Array.from(this.children)) {\n        if (child.getAttribute('slot') === name && child.parentElement !== target) {\n          target.appendChild(child)\n        }\n      }\n    }\n\n    move('start', this.startZone)\n    move('end', this.endZone)\n  }\n\n  protected updated(changed: PropertyValues) {\n    super.updated(changed)\n\n    // Move any `slot=\"start\"`/`slot=\"end\"` host children into their landing\n    // zones inside the control. The control is light DOM, so real `<slot>`\n    // projection isn't available; relocating keeps the public API like `nord-input`.\n    this.relocateSlots()\n  }\n\n  /**\n   * The accessible name for the input: the enclosing Field's label, the host\n   * `aria-label`, the `label` prop, or the default term.\n   */\n  private get inputAccessibleName(): string {\n    return (\n      this.controlAriaLabel || this.getAttribute('aria-label') || this.label || this.localize.term('searchLabel')\n    )\n  }\n\n  /** Open the chip popout. */\n  show() {\n    this.openState.show()\n  }\n\n  /** Close the chip popout. */\n  hide() {\n    this.openState.hide()\n  }\n\n  private handleTriggerClick = () => {\n    this.openState.toggle()\n  }\n\n  private handleClear = (e: Event) => {\n    e.stopPropagation()\n    this.value = ''\n\n    /** Fired as the user types into the input — also on clear. */\n    this.dispatchEvent(new NordEvent('input'))\n    /** Fired whenever the value is committed — also on clear. */\n    this.dispatchEvent(new NordEvent('change'))\n    this.focus()\n  }\n\n  /** The search field itself, shared by both modes. */\n  private renderInput() {\n    const showClear = this.clearable && Boolean(this.value) && !this.disabled\n    // A visible, connected label shows when `label` is set and not hidden; the\n    // input is then named by it. Otherwise the input falls back to `aria-label`\n    // (so `hide-label` keeps the accessible name without showing the text).\n    const showLabel = Boolean(this.label) && !this.hideLabel\n\n    return html`\n      <div class=\"n-filter-input-control\">\n        ${showLabel\n          ? html`<label class=\"n-filter-input-label\" for=\"${this.filterInputId}-input\">${this.label}</label>`\n          : html`<span class=\"n-filter-input-slot n-filter-input-slot-start\"\n              ><nord-icon\n                class=\"n-filter-input-default-icon\"\n                name=\"navigation-search\"\n                aria-hidden=\"true\"\n              ></nord-icon\n            ></span>`}\n        <input\n          ${ref(this.focusableRef)}\n          class=\"n-filter-input-field\"\n          type=\"search\"\n          id=\"${this.filterInputId}-input\"\n          .value=${this.value ?? ''}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-label=${showLabel ? nothing : this.inputAccessibleName}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          autocomplete=\"off\"\n          autocapitalize=\"off\"\n          spellcheck=\"false\"\n          @input=${this.handleInput}\n          @change=${this.handleChange}\n        />\n        <span class=\"n-filter-input-slot n-filter-input-slot-end\"></span>\n        ${showClear\n          ? html`\n              <button\n                class=\"n-filter-input-clear\"\n                type=\"button\"\n                tabindex=\"-1\"\n                aria-label=${this.localize.term('clearLabel')}\n                ?disabled=${this.disabled}\n                @click=${this.handleClear}\n              >\n                <nord-icon name=\"interface-close-small\"></nord-icon>\n              </button>\n            `\n          : nothing}\n      </div>\n    `\n  }\n\n  render() {\n    if (this.mode !== 'chip') {\n      return this.renderInput()\n    }\n\n    const popoutId = `${this.filterInputId}-popout`\n    const active = Boolean(this.value)\n\n    return html`\n      <nord-button\n        class=\"n-filter-input-trigger\"\n        type=\"button\"\n        size=${this.size}\n        variant=${active ? nothing : 'dashed'}\n        aria-controls=${popoutId}\n        aria-haspopup=\"dialog\"\n        aria-expanded=${this.open ? 'true' : 'false'}\n        ?disabled=${this.disabled}\n        @click=${this.handleTriggerClick}\n      >\n        <nord-icon\n          slot=\"start\"\n          name=\"interface-filter\"\n          label=${this.inputAccessibleName}\n        ></nord-icon>\n        ${active ? this.value : this.label || this.localize.term('searchLabel')}\n      </nord-button>\n\n      <nord-popout\n        id=${popoutId}\n        controlled\n        always-floating\n        @open=${this.openState.onPopoutOpen}\n        @close=${this.openState.onPopoutClose}\n      >\n        <div class=\"n-filter-input-popout\">${this.renderInput()}</div>\n      </nord-popout>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-filter-input': FilterInput\n  }\n}\n"],"names":["Icon","registerIcon","closeIcon","filterIcon","searchIcon","filterInputCount","FilterInput","DraftComponentMixin","SizeMixin","FormAssociatedMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","filterInputId","localize","LocalizeController","dismiss","LightDismissController","isOpen","open","onDismiss","hide","isDismissible","node","openState","OpenStateController","setOpen","popout","isInert","disabled","readonly","mode","onOpen","focus","size","clearable","handleTriggerClick","toggle","handleClear","e","stopPropagation","value","dispatchEvent","NordEvent","connectedCallback","super","injectLightDomStyles","style","_a","slotObserver","MutationObserver","requestUpdate","observe","childList","disconnectedCallback","disconnect","undefined","createRenderRoot","isServer","root","document","createElement","className","appendChild","relocateSlots","move","name","target","child","Array","from","children","getAttribute","parentElement","startZone","endZone","updated","changed","inputAccessibleName","controlAriaLabel","label","term","show","renderInput","showClear","Boolean","showLabel","hideLabel","html","ref","focusableRef","ifDefined","placeholder","nothing","required","handleInput","handleChange","render","popoutId","active","onPopoutOpen","onPopoutClose","__decorate","query","prototype","property","reflect","type","customElement"],"mappings":"m6MAyBAA,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAClBH,EAAKC,aAAaG,GAGlB,IAAIC,EAAmB,EAqCFC,EAAN,cAA0BC,EACvCC,EAAUC,EAAoBC,EAAcC,EAAWC,EAAeC,SADzD,WAAAC,uBAGLC,KAAAC,cAAgB,qBAAqBX,IAErCU,KAAAE,SAAW,IAAIC,EAAwCH,MAgBvDA,KAAAI,QAAU,IAAIC,EAAuBL,KAAM,CACjDM,OAAQ,IAAMN,KAAKO,KACnBC,UAAW,IAAMR,KAAKS,OACtBC,cAAeC,GAAQA,IAASX,OAK1BA,KAAAY,UAAY,IAAIC,EAAoBb,KAAM,CAChDM,OAAQ,IAAMN,KAAKO,KACnBO,QAAUP,IAAWP,KAAKO,KAAOA,CAAI,EACrCQ,OAAQ,IAAMf,KAAKe,OACnBC,QAAS,IAAMhB,KAAKiB,UAAYjB,KAAKkB,UAA0B,SAAdlB,KAAKmB,KACtDC,OAAQ,IAAMpB,KAAKqB,UAUQrB,KAAImB,KAAsB,SAKXnB,KAAIO,MAAG,EAMbP,KAAIsB,KAAoB,IAMlBtB,KAASuB,WAAG,EAsFhDvB,KAAkBwB,mBAAG,KAC3BxB,KAAKY,UAAUa,QAAQ,EAGjBzB,KAAA0B,YAAeC,IACrBA,EAAEC,kBACF5B,KAAK6B,MAAQ,GAGb7B,KAAK8B,cAAc,IAAIC,EAAU,UAEjC/B,KAAK8B,cAAc,IAAIC,EAAU,WACjC/B,KAAKqB,OAAO,CAiGf,CAjMC,iBAAAW,SACEC,MAAMD,oBACNE,EAAqBlC,KAAMmC,WAE3BC,EAAApC,KAAKqC,4BAALrC,KAAKqC,aAAiB,IAAIC,kBAAiB,IAAMtC,KAAKuC,mBACtDvC,KAAKqC,aAAaG,QAAQxC,KAAM,CAAEyC,WAAW,GAC9C,CAED,oBAAAC,SACET,MAAMS,uBACa,QAAnBN,EAAApC,KAAKqC,oBAAc,IAAAD,GAAAA,EAAAO,aACnB3C,KAAKqC,kBAAeO,CACrB,CAOS,gBAAAC,GACR,GAAIC,EACF,OAAO9C,KAET,MAAM+C,EAAOC,SAASC,cAAc,OAGpC,OAFAF,EAAKG,UAAY,sBACjBlD,KAAKmD,YAAYJ,GACVA,CACR,CAQO,aAAAK,GACN,GAAIN,EACF,OAGF,MAAMO,EAAO,CAACC,EAAuBC,KACnC,GAAKA,EAGL,IAAK,MAAMC,KAASC,MAAMC,KAAK1D,KAAK2D,UAC9BH,EAAMI,aAAa,UAAYN,GAAQE,EAAMK,gBAAkBN,GACjEA,EAAOJ,YAAYK,EAEtB,EAGHH,EAAK,QAASrD,KAAK8D,WACnBT,EAAK,MAAOrD,KAAK+D,QAClB,CAES,OAAAC,CAAQC,GAChBhC,MAAM+B,QAAQC,GAKdjE,KAAKoD,eACN,CAMD,uBAAYc,GACV,OACElE,KAAKmE,kBAAoBnE,KAAK4D,aAAa,eAAiB5D,KAAKoE,OAASpE,KAAKE,SAASmE,KAAK,cAEhG,CAGD,IAAAC,GACEtE,KAAKY,UAAU0D,MAChB,CAGD,IAAA7D,GACET,KAAKY,UAAUH,MAChB,CAkBO,WAAA8D,SACN,MAAMC,EAAYxE,KAAKuB,WAAakD,QAAQzE,KAAK6B,SAAW7B,KAAKiB,SAI3DyD,EAAYD,QAAQzE,KAAKoE,SAAWpE,KAAK2E,UAE/C,OAAOC,CAAI,uCAELF,EACEE,CAAI,4CAA4C5E,KAAKC,wBAAwBD,KAAKoE,gBAClFQ,CAAI,uLAQJC,EAAI7E,KAAK8E,gEAGL9E,KAAKC,gCACQ,QAAVmC,EAAApC,KAAK6B,aAAK,IAAAO,EAAAA,EAAI,oBACT2C,EAAU/E,KAAKgF,6BAChBN,EAAYO,EAAUjF,KAAKkE,mCAC5BlE,KAAKiB,wBACLjB,KAAKkB,wBACLlB,KAAKkF,gFAIRlF,KAAKmF,yBACJnF,KAAKoF,oFAGfZ,EACEI,CAAI,gFAKa5E,KAAKE,SAASmE,KAAK,6BACpBrE,KAAKiB,qBACRjB,KAAK0B,6EAKlBuD,SAGT,CAED,MAAAI,GACE,GAAkB,SAAdrF,KAAKmB,KACP,OAAOnB,KAAKuE,cAGd,MAAMe,EAAW,GAAGtF,KAAKC,uBACnBsF,EAASd,QAAQzE,KAAK6B,OAE5B,OAAO+C,CAAI,mEAIA5E,KAAKsB,kBACFiE,EAASN,EAAU,4BACbK,4CAEAtF,KAAKO,KAAO,OAAS,uBACzBP,KAAKiB,qBACRjB,KAAKwB,8EAKJxB,KAAKkE,oCAEbqB,EAASvF,KAAK6B,MAAQ7B,KAAKoE,OAASpE,KAAKE,SAASmE,KAAK,gDAIpDiB,wCAGGtF,KAAKY,UAAU4E,yBACdxF,KAAKY,UAAU6E,qDAEazF,KAAKuE,mCAG/C,GAxPmCmB,EAAA,CAAnCC,EAAM,eAAe,IAGrBpG,EAAAqG,UAAA,cAAA,GAI4CF,EAAA,CAA5CC,EAAM,+BAA6DpG,EAAAqG,UAAA,iBAAA,GACzBF,EAAA,CAA1CC,EAAM,6BAAyDpG,EAAAqG,UAAA,eAAA,GA6BnCF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAA0CvG,EAAAqG,UAAA,YAAA,GAKnBF,EAAA,CAA3CG,EAAS,CAAEC,SAAS,EAAMC,KAAMtB,WAAuBlF,EAAAqG,UAAA,YAAA,GAMlBF,EAAA,CAArCG,EAAS,CAAEC,SAAS,KAA4CvG,EAAAqG,UAAA,YAAA,GAMrBF,EAAA,CAA3CG,EAAS,CAAEC,SAAS,EAAMC,KAAMtB,WAA4BlF,EAAAqG,UAAA,iBAAA,GA7D1CrG,EAAWmG,EAAA,CAD/BM,EAAc,sBACMzG,SAAAA"}
+{"version":3,"file":"FilterInput.js","sources":["../src/filter-input/FilterInput.ts"],"sourcesContent":["import type { PropertyValues } from 'lit'\nimport * as closeIcon from '@nordhealth/icons/lib/assets/interface-close-small.js'\nimport * as filterIcon from '@nordhealth/icons/lib/assets/interface-filter.js'\nimport * as searchIcon from '@nordhealth/icons/lib/assets/navigation-search.js'\nimport { html, isServer, LitElement, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { ref } from 'lit/directives/ref.js'\n\nimport { LightDismissController } from '../common/controllers/LightDismissController.js'\nimport { OpenStateController } from '../common/controllers/OpenStateController.js'\nimport { NordEvent } from '../common/events.js'\nimport { injectLightDomStyles } from '../common/light-dom-styles.js'\nimport { DraftComponentMixin } from '../common/mixins/DraftComponentMixin.js'\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { FormAssociatedMixin } from '../common/mixins/FormAssociatedMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport { ReadonlyMixin } from '../common/mixins/ReadonlyMixin.js'\nimport { SizeMixin } from '../common/mixins/SizeMixin.js'\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './FilterInput.css'\nimport '../button/Button.js'\nimport '../popout/Popout.js'\n\nIcon.registerIcon(closeIcon)\nIcon.registerIcon(filterIcon)\nIcon.registerIcon(searchIcon)\n\n/** Per-instance counter so the light-DOM ids stay unique. */\nlet filterInputCount = 1\n\n/**\n * Filter Input is a compact search/text field for filtering a collection. It\n * replaces the small ad-hoc search inputs that sit in toolbars and table\n * headers. By default it renders inline as a small search field with a leading\n * search icon; set `mode=\"chip\"` to collapse it behind a chip button that opens\n * the input in a popout, which is handy in a crowded [Filter Bar](/components/filter-bar/).\n *\n * It emits intent only: `input` as the user types and `change` when the value is\n * committed. Your app owns the active filters and any URL/query state — read the\n * value from the event target (or bind `value`) and filter accordingly.\n *\n * It is a control only, like [Combobox](/components/combobox/): compose it inside\n * a [Field](/components/field/) for a visible label, or set `label` for an\n * accessible name when used standalone.\n *\n * @status draft\n * @category form\n * @lightDom true\n *\n * @fires {NordEvent} input - Dispatched as the user types into the input.\n * @fires {NordEvent} change - Dispatched when the value is committed.\n * @fires {NordEvent} open - Dispatched when the chip-mode popout is opened.\n * @fires {NordEvent} close - Dispatched when the chip-mode popout is closed.\n *\n * @slot start - Leading icon/content; defaults to a search icon.\n * @slot end - Trailing icon/content before the clear button.\n *\n * @localization searchLabel - Default accessible label for the input when no `label` is set.\n * @localization clearLabel - Accessible label for the clear button.\n *\n * @cssprop [--n-filter-input-inline-size] - Controls the inline size, or width, of the inline input.\n *\n * @parent FilterBar\n */\n@customElement('nord-filter-input')\nexport default class FilterInput extends DraftComponentMixin(\n  SizeMixin(FormAssociatedMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement))))),\n) {\n  private filterInputId = `nord-filter-input-${filterInputCount++}`\n\n  private localize = new LocalizeController<'nord-filter-input'>(this)\n\n  @query('nord-popout', true) private popout?: HTMLElement & {\n    show: () => Promise<unknown>\n    hide: (moveFocusToButton?: boolean) => Promise<unknown>\n  }\n\n  // Landing zones for relocated `slot=\"start\"`/`slot=\"end\"` host children. The\n  // control renders into light DOM, so real `<slot>` projection isn't available.\n  @query('.n-filter-input-slot-start') private startZone?: HTMLElement\n  @query('.n-filter-input-slot-end') private endZone?: HTMLElement\n\n  // Watches for `slot=\"start\"`/`slot=\"end\"` children being added or removed so\n  // they get relocated into their landing zones on the next render.\n  private slotObserver?: MutationObserver\n\n  private dismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.hide(),\n    isDismissible: node => node !== this,\n  })\n\n  // Coordinates the chip popout's open state. Only opens in chip mode, and not\n  // while disabled or read-only; focuses the input once opened.\n  private openState = new OpenStateController(this, {\n    isOpen: () => this.open,\n    setOpen: (open) => { this.open = open },\n    popout: () => this.popout,\n    isInert: () => this.disabled || this.readonly || this.mode !== 'chip',\n    onOpen: () => this.focus(),\n  })\n\n  /**\n   * How the input is presented.\n   *\n   * - `inline` (default) renders the search field directly.\n   * - `chip` collapses the field behind a chip button that opens a popout\n   *   containing the input.\n   */\n  @property({ reflect: true }) mode: 'inline' | 'chip' = 'inline'\n\n  /**\n   * Whether the chip-mode popout is open. Only meaningful with `mode=\"chip\"`.\n   */\n  @property({ reflect: true, type: Boolean }) open = false\n\n  /**\n   * The size of the search control. Defaults to `s` to match the other filter\n   * controls in a compact filter bar; set `m` or `l` to enlarge it.\n   */\n  @property({ reflect: true }) override size: 's' | 'm' | 'l' = 's'\n\n  /**\n   * Whether to show a clear (✕) button while there is a value. Clearing resets\n   * the value to `''`, then fires `input` and `change`.\n   */\n  @property({ reflect: true, type: Boolean }) clearable = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    injectLightDomStyles(this, style)\n\n    this.slotObserver ??= new MutationObserver(() => this.requestUpdate())\n    this.slotObserver.observe(this, { childList: true })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.slotObserver?.disconnect()\n    this.slotObserver = undefined\n  }\n\n  // Render in the light DOM (form labelling, Tailwind) like the other new Nord\n  // components, but into a layout-transparent (`display: contents`) wrapper\n  // rather than the host itself, so slotted `slot=\"start\"`/`slot=\"end\"` children\n  // can live as untouched siblings instead of being wiped by this element's own\n  // render (mirrors `nord-combobox`).\n  protected createRenderRoot() {\n    if (isServer) {\n      return this\n    }\n    const root = document.createElement('div')\n    root.className = 'n-filter-input-root'\n    this.appendChild(root)\n    return root\n  }\n\n  /**\n   * Relocates the host's `slot=\"start\"`/`slot=\"end\"` children into the matching\n   * landing zone inside the control. Only direct host children are considered,\n   * and a child already sitting in its zone is left untouched, so repeated\n   * updates are idempotent and don't disturb focus or pointer state.\n   */\n  private relocateSlots() {\n    if (isServer) {\n      return\n    }\n\n    const move = (name: 'start' | 'end', target?: HTMLElement) => {\n      if (!target) {\n        return\n      }\n      for (const child of Array.from(this.children)) {\n        if (child.getAttribute('slot') === name && child.parentElement !== target) {\n          target.appendChild(child)\n        }\n      }\n    }\n\n    move('start', this.startZone)\n    move('end', this.endZone)\n  }\n\n  protected updated(changed: PropertyValues) {\n    super.updated(changed)\n\n    // Move any `slot=\"start\"`/`slot=\"end\"` host children into their landing\n    // zones inside the control. The control is light DOM, so real `<slot>`\n    // projection isn't available; relocating keeps the public API like `nord-input`.\n    this.relocateSlots()\n  }\n\n  /**\n   * The accessible name for the input: the enclosing Field's label, the host\n   * `aria-label`, the `label` prop, or the default term.\n   */\n  private get inputAccessibleName(): string {\n    return (\n      this.controlAriaLabel || this.getAttribute('aria-label') || this.label || this.localize.term('searchLabel')\n    )\n  }\n\n  /** Open the chip popout. */\n  show() {\n    this.openState.show()\n  }\n\n  /** Close the chip popout. */\n  hide() {\n    this.openState.hide()\n  }\n\n  private handleTriggerClick = () => {\n    this.openState.toggle()\n  }\n\n  private handleClear = (e: Event) => {\n    e.stopPropagation()\n    this.value = ''\n\n    /** Fired as the user types into the input — also on clear. */\n    this.dispatchEvent(new NordEvent('input'))\n    /** Fired whenever the value is committed — also on clear. */\n    this.dispatchEvent(new NordEvent('change'))\n    this.focus()\n  }\n\n  /** The search field itself, shared by both modes. */\n  private renderInput() {\n    const showClear = this.clearable && Boolean(this.value) && !this.disabled\n    // A visible, connected label shows when `label` is set and not hidden; the\n    // input is then named by it. Otherwise the input falls back to `aria-label`\n    // (so `hide-label` keeps the accessible name without showing the text).\n    const showLabel = Boolean(this.label) && !this.hideLabel\n\n    return html`\n      <div class=\"n-filter-input-control\">\n        ${showLabel\n          ? html`<label class=\"n-filter-input-label\" for=\"${this.filterInputId}-input\">${this.label}</label>`\n          : html`<span class=\"n-filter-input-slot n-filter-input-slot-start\"\n              ><nord-icon\n                class=\"n-filter-input-default-icon\"\n                name=\"navigation-search\"\n                aria-hidden=\"true\"\n              ></nord-icon\n            ></span>`}\n        <input\n          ${ref(this.focusableRef)}\n          class=\"n-filter-input-field\"\n          type=\"search\"\n          id=\"${this.filterInputId}-input\"\n          .value=${this.value ?? ''}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-label=${showLabel ? nothing : this.inputAccessibleName}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          autocomplete=\"off\"\n          autocapitalize=\"off\"\n          spellcheck=\"false\"\n          @input=${this.handleInput}\n          @change=${this.handleChange}\n        />\n        <span class=\"n-filter-input-slot n-filter-input-slot-end\"></span>\n        ${showClear\n          ? html`\n              <button\n                class=\"n-filter-input-clear\"\n                type=\"button\"\n                tabindex=\"-1\"\n                aria-label=${this.localize.term('clearLabel')}\n                ?disabled=${this.disabled}\n                @click=${this.handleClear}\n              >\n                <nord-icon name=\"interface-close-small\"></nord-icon>\n              </button>\n            `\n          : nothing}\n      </div>\n    `\n  }\n\n  render() {\n    if (this.mode !== 'chip') {\n      return this.renderInput()\n    }\n\n    const popoutId = `${this.filterInputId}-popout`\n    const active = Boolean(this.value)\n\n    return html`\n      <nord-button\n        class=\"n-filter-input-trigger\"\n        type=\"button\"\n        size=${this.size}\n        variant=${active ? nothing : 'dashed'}\n        aria-controls=${popoutId}\n        aria-haspopup=\"dialog\"\n        aria-expanded=${this.open ? 'true' : 'false'}\n        ?disabled=${this.disabled}\n        @click=${this.handleTriggerClick}\n      >\n        <nord-icon\n          slot=\"start\"\n          name=\"interface-filter\"\n          label=${this.inputAccessibleName}\n        ></nord-icon>\n        ${active ? this.value : this.label || this.localize.term('searchLabel')}\n      </nord-button>\n\n      <nord-popout\n        id=${popoutId}\n        controlled\n        always-floating\n        @open=${this.openState.onPopoutOpen}\n        @close=${this.openState.onPopoutClose}\n      >\n        <div class=\"n-filter-input-popout\">${this.renderInput()}</div>\n      </nord-popout>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-filter-input': FilterInput\n  }\n}\n"],"names":["Icon","registerIcon","closeIcon","filterIcon","searchIcon","filterInputCount","FilterInput","DraftComponentMixin","SizeMixin","FormAssociatedMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","filterInputId","localize","LocalizeController","dismiss","LightDismissController","isOpen","open","onDismiss","hide","isDismissible","node","openState","OpenStateController","setOpen","popout","isInert","disabled","readonly","mode","onOpen","focus","size","clearable","handleTriggerClick","toggle","handleClear","e","stopPropagation","value","dispatchEvent","NordEvent","connectedCallback","super","injectLightDomStyles","style","_a","slotObserver","MutationObserver","requestUpdate","observe","childList","disconnectedCallback","disconnect","undefined","createRenderRoot","isServer","root","document","createElement","className","appendChild","relocateSlots","move","name","target","child","Array","from","children","getAttribute","parentElement","startZone","endZone","updated","changed","inputAccessibleName","controlAriaLabel","label","term","show","renderInput","showClear","Boolean","showLabel","hideLabel","html","ref","focusableRef","ifDefined","placeholder","nothing","required","handleInput","handleChange","render","popoutId","active","onPopoutOpen","onPopoutClose","__decorate","query","prototype","property","reflect","type","customElement"],"mappings":"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"}

package/lib/FilterResetButton.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{c as o}from"./interface-close-BvKnv9eh.js";import{css as i,html as r,LitElement as l}from"lit";import{property as s,customElement as e}from"lit/decorators.js";import{N as n}from"./events-Bv6wNHwJ.js";import{i as a}from"./light-dom-styles-DXsbiKU9.js";import{D as c}from"./DraftComponentMixin-4qug5Rky.js";import m from"./Icon.js";import{LocalizeController as p}from"./LocalizeController.js";import"./Button.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./Component-BJ5O5n8k.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./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"lit/directives/ref.js";import"./EventController-BBOmvfLa.js";import"./LightDomController-DIwtVelV.js";import"./SlotController-Z6eG7LSZ.js";import"./FocusableMixin-BlQLNPdJ.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";const j=i`nord-filter-reset-button{--_n-filter-reset-button-color:var(--n-filter-reset-button-color,var(--n-color-text-highlight));display:inline-flex}nord-filter-reset-button .n-filter-reset-button:not([disabled]){--n-button-color:var(--_n-filter-reset-button-color);--n-color-icon:var(--_n-filter-reset-button-color)}`;m.registerIcon(o);let d=class extends(c(l)){constructor(){super(...arguments),this.localize=new p(this),this.disabled=!1,this.size="s",this.handleClick=()=>{this.disabled||this.dispatchEvent(new n("reset"))}}connectedCallback(){super.connectedCallback(),a(this,j)}createRenderRoot(){return this}render(){return r`<nord-button class="n-filter-reset-button" type="button" variant="plain" size="${this.size}" ?disabled="${this.disabled}" @click="${this.handleClick}"><nord-icon slot="start" name="interface-close" size="xs"></nord-icon>${this.localize.term("label")}</nord-button>`}};t([s({reflect:!0,type:Boolean})],d.prototype,"disabled",void 0),t([s({reflect:!0})],d.prototype,"size",void 0),d=t([e("nord-filter-reset-button")],d);var z=d;export{z as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{c as o}from"./interface-close-BvKnv9eh.js";import{css as i,html as r,LitElement as l}from"lit";import{property as s,customElement as e}from"lit/decorators.js";import{N as n}from"./events-Bv6wNHwJ.js";import{i as a}from"./light-dom-styles-DXsbiKU9.js";import{D as c}from"./DraftComponentMixin-4qug5Rky.js";import m from"./Icon.js";import{LocalizeController as p}from"./LocalizeController.js";import"./Button.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./Component-BJ5O5n8k.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./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"./localization24.js";import"lit/directives/ref.js";import"./EventController-BBOmvfLa.js";import"./LightDomController-DIwtVelV.js";import"./SlotController-Z6eG7LSZ.js";import"./FocusableMixin-BlQLNPdJ.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";const j=i`nord-filter-reset-button{--_n-filter-reset-button-color:var(--n-filter-reset-button-color,var(--n-color-text-highlight));display:inline-flex}nord-filter-reset-button .n-filter-reset-button:not([disabled]){--n-button-color:var(--_n-filter-reset-button-color);--n-color-icon:var(--_n-filter-reset-button-color)}`;m.registerIcon(o);let d=class extends(c(l)){constructor(){super(...arguments),this.localize=new p(this),this.disabled=!1,this.size="s",this.handleClick=()=>{this.disabled||this.dispatchEvent(new n("reset"))}}connectedCallback(){super.connectedCallback(),a(this,j)}createRenderRoot(){return this}render(){return r`<nord-button class="n-filter-reset-button" type="button" variant="plain" size="${this.size}" ?disabled="${this.disabled}" @click="${this.handleClick}"><nord-icon slot="start" name="interface-close" size="xs"></nord-icon>${this.localize.term("label")}</nord-button>`}};t([s({reflect:!0,type:Boolean})],d.prototype,"disabled",void 0),t([s({reflect:!0})],d.prototype,"size",void 0),d=t([e("nord-filter-reset-button")],d);var z=d;export{z as default};
 //# sourceMappingURL=FilterResetButton.js.map

package/lib/FilterResetButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterResetButton.js","sources":["../src/filter-reset-button/FilterResetButton.ts"],"sourcesContent":["import * as closeIcon from '@nordhealth/icons/lib/assets/interface-close.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { NordEvent } from '../common/events.js'\nimport { injectLightDomStyles } from '../common/light-dom-styles.js'\nimport { DraftComponentMixin } from '../common/mixins/DraftComponentMixin.js'\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './FilterResetButton.css'\nimport '../button/Button.js'\n\nIcon.registerIcon(closeIcon)\n\n/**\n * Filter Reset Button clears every active filter at once. It is a thin,\n * intent-only control: it renders a plain button and dispatches a `reset` event\n * when pressed. Your app owns the active filters and is responsible for clearing\n * them (and any URL/query state) in the handler — the button holds no state of\n * its own.\n *\n * Disable it while there is nothing to reset by binding `disabled` to whether any\n * filter is active (e.g. `?disabled=${!hasFilters}`). Mirrors the Provet Cloud\n * filter reset button.\n *\n * @status draft\n * @category form\n * @lightDom true\n *\n * @fires {NordEvent} reset - Dispatched when the button is pressed to clear all active filters.\n *\n * @localization label - The text label for the reset button.\n *\n * @cssprop [--n-filter-reset-button-color=var(--n-color-text-highlight)] - Controls the text and icon color while the button is enabled.\n *\n * @parent FilterBar\n */\n@customElement('nord-filter-reset-button')\nexport default class FilterResetButton extends DraftComponentMixin(LitElement) {\n  private localize = new LocalizeController<'nord-filter-reset-button'>(this)\n\n  /**\n   * Makes the component disabled. This prevents users from being able to\n   * interact with it and conveys its inactive state to assistive technologies.\n   * Bind it to whether any filter is active so the control is only enabled when\n   * there is something to reset.\n   */\n  @property({ reflect: true, type: Boolean }) disabled = false\n\n  /**\n   * The size of the button.\n   */\n  @property({ reflect: true }) size: 's' | 'm' | 'l' = 's'\n\n  connectedCallback() {\n    super.connectedCallback()\n    injectLightDomStyles(this, style)\n  }\n\n  protected createRenderRoot() {\n    return this\n  }\n\n  private handleClick = () => {\n    if (this.disabled) {\n      return\n    }\n\n    /**\n     * Dispatched when the button is pressed to clear all active filters.\n     */\n    this.dispatchEvent(new NordEvent('reset'))\n  }\n\n  render() {\n    return html`\n      <nord-button\n        class=\"n-filter-reset-button\"\n        type=\"button\"\n        variant=\"plain\"\n        size=${this.size}\n        ?disabled=${this.disabled}\n        @click=${this.handleClick}\n      >\n        <nord-icon slot=\"start\" name=\"interface-close\" size=\"xs\"></nord-icon>\n        ${this.localize.term('label')}\n      </nord-button>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-filter-reset-button': FilterResetButton\n  }\n}\n"],"names":["Icon","registerIcon","closeIcon","FilterResetButton","DraftComponentMixin","LitElement","constructor","this","localize","LocalizeController","disabled","size","handleClick","dispatchEvent","NordEvent","connectedCallback","super","injectLightDomStyles","style","createRenderRoot","render","html","term","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"+1DAYAA,EAAKC,aAAaC,GA0BH,IAAMC,EAAN,cAAgCC,EAAoBC,IAApD,WAAAC,uBACLC,KAAAC,SAAW,IAAIC,EAA+CF,MAQ1BA,KAAQG,UAAG,EAK1BH,KAAII,KAAoB,IAW7CJ,KAAWK,YAAG,KAChBL,KAAKG,UAOTH,KAAKM,cAAc,IAAIC,EAAU,SAAS,CAkB7C,CAnCC,iBAAAC,GACEC,MAAMD,oBACNE,EAAqBV,KAAMW,EAC5B,CAES,gBAAAC,GACR,OAAOZ,IACR,CAaD,MAAAa,GACE,OAAOC,CAAI,kFAKAd,KAAKI,oBACAJ,KAAKG,qBACRH,KAAKK,qFAGZL,KAAKC,SAASc,KAAK,wBAG1B,GAzC2CC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAA2BxB,EAAAyB,UAAA,gBAAA,GAK/BL,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAmCtB,EAAAyB,UAAA,YAAA,GAdrCzB,EAAiBoB,EAAA,CADrCM,EAAc,6BACM1B,SAAAA"}
+{"version":3,"file":"FilterResetButton.js","sources":["../src/filter-reset-button/FilterResetButton.ts"],"sourcesContent":["import * as closeIcon from '@nordhealth/icons/lib/assets/interface-close.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { NordEvent } from '../common/events.js'\nimport { injectLightDomStyles } from '../common/light-dom-styles.js'\nimport { DraftComponentMixin } from '../common/mixins/DraftComponentMixin.js'\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './FilterResetButton.css'\nimport '../button/Button.js'\n\nIcon.registerIcon(closeIcon)\n\n/**\n * Filter Reset Button clears every active filter at once. It is a thin,\n * intent-only control: it renders a plain button and dispatches a `reset` event\n * when pressed. Your app owns the active filters and is responsible for clearing\n * them (and any URL/query state) in the handler — the button holds no state of\n * its own.\n *\n * Disable it while there is nothing to reset by binding `disabled` to whether any\n * filter is active (e.g. `?disabled=${!hasFilters}`). Mirrors the Provet Cloud\n * filter reset button.\n *\n * @status draft\n * @category form\n * @lightDom true\n *\n * @fires {NordEvent} reset - Dispatched when the button is pressed to clear all active filters.\n *\n * @localization label - The text label for the reset button.\n *\n * @cssprop [--n-filter-reset-button-color=var(--n-color-text-highlight)] - Controls the text and icon color while the button is enabled.\n *\n * @parent FilterBar\n */\n@customElement('nord-filter-reset-button')\nexport default class FilterResetButton extends DraftComponentMixin(LitElement) {\n  private localize = new LocalizeController<'nord-filter-reset-button'>(this)\n\n  /**\n   * Makes the component disabled. This prevents users from being able to\n   * interact with it and conveys its inactive state to assistive technologies.\n   * Bind it to whether any filter is active so the control is only enabled when\n   * there is something to reset.\n   */\n  @property({ reflect: true, type: Boolean }) disabled = false\n\n  /**\n   * The size of the button.\n   */\n  @property({ reflect: true }) size: 's' | 'm' | 'l' = 's'\n\n  connectedCallback() {\n    super.connectedCallback()\n    injectLightDomStyles(this, style)\n  }\n\n  protected createRenderRoot() {\n    return this\n  }\n\n  private handleClick = () => {\n    if (this.disabled) {\n      return\n    }\n\n    /**\n     * Dispatched when the button is pressed to clear all active filters.\n     */\n    this.dispatchEvent(new NordEvent('reset'))\n  }\n\n  render() {\n    return html`\n      <nord-button\n        class=\"n-filter-reset-button\"\n        type=\"button\"\n        variant=\"plain\"\n        size=${this.size}\n        ?disabled=${this.disabled}\n        @click=${this.handleClick}\n      >\n        <nord-icon slot=\"start\" name=\"interface-close\" size=\"xs\"></nord-icon>\n        ${this.localize.term('label')}\n      </nord-button>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-filter-reset-button': FilterResetButton\n  }\n}\n"],"names":["Icon","registerIcon","closeIcon","FilterResetButton","DraftComponentMixin","LitElement","constructor","this","localize","LocalizeController","disabled","size","handleClick","dispatchEvent","NordEvent","connectedCallback","super","injectLightDomStyles","style","createRenderRoot","render","html","term","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"23DAYAA,EAAKC,aAAaC,GA0BH,IAAMC,EAAN,cAAgCC,EAAoBC,IAApD,WAAAC,uBACLC,KAAAC,SAAW,IAAIC,EAA+CF,MAQ1BA,KAAQG,UAAG,EAK1BH,KAAII,KAAoB,IAW7CJ,KAAWK,YAAG,KAChBL,KAAKG,UAOTH,KAAKM,cAAc,IAAIC,EAAU,SAAS,CAkB7C,CAnCC,iBAAAC,GACEC,MAAMD,oBACNE,EAAqBV,KAAMW,EAC5B,CAES,gBAAAC,GACR,OAAOZ,IACR,CAaD,MAAAa,GACE,OAAOC,CAAI,kFAKAd,KAAKI,oBACAJ,KAAKG,qBACRH,KAAKK,qFAGZL,KAAKC,SAASc,KAAK,wBAG1B,GAzC2CC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAA2BxB,EAAAyB,UAAA,gBAAA,GAK/BL,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAmCtB,EAAAyB,UAAA,YAAA,GAdrCzB,EAAiBoB,EAAA,CADrCM,EAAc,6BACM1B,SAAAA"}

package/lib/Header.js

@@ -1,2 +1,2 @@
-import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as a,html as n}from"lit";import{property as o,customElement as d}from"lit/decorators.js";import{S as s}from"./SlotController-Z6eG7LSZ.js";import{s as t}from"./Component-BJ5O5n8k.js";import"./EventController-BBOmvfLa.js";const i=r`:host{--_n-header-box-shadow:var(--n-box-shadow-header);--_n-header-block-size:var(--n-header-block-size,var(--n-space-xxl));--_n-header-padding-block:var(--n-space-m);--_n-header-padding-inline:var(--n-header-padding-inline,var(--n-space-l));--_n-header-background-color:var(--n-header-background-color,var(--n-color-surface));color:var(--n-color-text)}::slotted(*){margin:0!important}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}.n-header,.n-header-end{align-items:center;display:flex;flex-flow:row;gap:var(--n-space-m)}.n-header{background-color:var(--_n-header-background-color);block-size:var(--_n-header-block-size);border-block-end:1px solid var(--n-color-border);box-shadow:var(--_n-header-box-shadow);padding:var(--_n-header-padding-block) var(--_n-header-padding-inline);padding-inline-start:calc(var(--_n-header-padding-inline) + var(--_n-header-gutter, 0px))}.n-header-end{gap:var(--n-space-s);margin-inline-start:auto}:host([size=s]){--_n-header-block-size:var(--n-size-top-bar);--_n-header-padding-block:var(--n-space-s)}:host([size=xs]){--_n-header-block-size:45px;--_n-header-padding-block:var(--n-space-xs)}`;let l=class extends a{constructor(){super(...arguments),this.endSlot=new s(this,"end"),this.size="m"}render(){return n`<header class="n-header"><slot></slot><div class="n-header-end" ?hidden="${this.endSlot.isEmpty}"><slot name="end"></slot></div></header>`}};l.styles=[t,i],e([o({reflect:!0})],l.prototype,"size",void 0),l=e([d("nord-header")],l);var c=l;export{c as default};
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as a,html as n}from"lit";import{property as o,customElement as d}from"lit/decorators.js";import{S as s}from"./SlotController-Z6eG7LSZ.js";import{s as t}from"./Component-BJ5O5n8k.js";import"./EventController-BBOmvfLa.js";const i=r`:host{--_n-header-box-shadow:var(--n-box-shadow-header);--_n-header-block-size:var(--n-header-block-size,var(--n-space-xxl));--_n-header-padding-block:var(--n-space-m);--_n-header-padding-inline:var(--n-header-padding-inline,var(--n-space-l));--_n-header-background-color:var(--n-header-background-color,var(--n-color-surface));color:var(--n-color-text)}::slotted(*){margin:0!important}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}.n-header,.n-header-end{align-items:center;display:flex;flex-flow:row;gap:var(--n-space-m)}.n-header{background-color:var(--_n-header-background-color);block-size:var(--_n-header-block-size);border-block-end:1px solid var(--n-color-border);box-shadow:var(--_n-header-box-shadow);padding-block:var(--_n-header-padding-block);padding-inline:var(--_n-header-padding-inline);padding-inline-start:calc(var(--_n-header-padding-inline) + var(--_n-header-gutter, 0px))}.n-header-end{gap:var(--n-space-s);margin-inline-start:auto}:host([size=s]){--_n-header-block-size:var(--n-size-top-bar);--_n-header-padding-block:var(--n-space-s)}:host([size=xs]){--_n-header-block-size:45px;--_n-header-padding-block:var(--n-space-xs)}`;let l=class extends a{constructor(){super(...arguments),this.endSlot=new s(this,"end"),this.size="m"}render(){return n`<header class="n-header"><slot></slot><div class="n-header-end" ?hidden="${this.endSlot.isEmpty}"><slot name="end"></slot></div></header>`}};l.styles=[t,i],e([o({reflect:!0})],l.prototype,"size",void 0),l=e([d("nord-header")],l);var c=l;export{c as default};
 //# sourceMappingURL=Header.js.map

package/lib/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../src/header/Header.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Header.css'\n\n/**\n * The header is a block of designated space for labelling the currently\n * viewed context as well as providing primary actions.\n *\n * @status ready\n * @category layout\n * @slot - The header content.\n * @slot end - Optional slot for buttons, toggles, etc.\n *\n * @cssprop [--n-header-background-color=var(--n-color-surface)] - Background color of the header.\n */\n@customElement('nord-header')\nexport default class Header extends LitElement {\n  static styles = [componentStyle, style]\n\n  private endSlot = new SlotController(this, 'end')\n\n  /**\n   * Controls the size of the header component.\n   */\n  @property({ reflect: true }) size: 'm' | 's' | 'xs' = 'm'\n\n  render() {\n    return html`\n      <header class=\"n-header\">\n        <slot></slot>\n        <div class=\"n-header-end\" ?hidden=${this.endSlot.isEmpty}>\n          <slot name=\"end\"></slot>\n        </div>\n      </header>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-header': Header\n  }\n}\n"],"names":["Header","LitElement","constructor","this","endSlot","SlotController","size","render","html","isEmpty","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"o9CAkBe,IAAMA,EAAN,cAAqBC,EAArB,WAAAC,uBAGLC,KAAOC,QAAG,IAAIC,EAAeF,KAAM,OAKdA,KAAIG,KAAqB,GAYvD,CAVC,MAAAC,GACE,OAAOC,CAAI,4EAG6BL,KAAKC,QAAQK,kDAKtD,GAlBMT,EAAAU,OAAS,CAACC,EAAgBC,GAOJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAoCf,EAAAgB,UAAA,YAAA,GARtChB,EAAMa,EAAA,CAD1BI,EAAc,gBACMjB,SAAAA"}
+{"version":3,"file":"Header.js","sources":["../src/header/Header.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Header.css'\n\n/**\n * The header is a block of designated space for labelling the currently\n * viewed context as well as providing primary actions.\n *\n * @status ready\n * @category layout\n * @slot - The header content.\n * @slot end - Optional slot for buttons, toggles, etc.\n *\n * @cssprop [--n-header-background-color=var(--n-color-surface)] - Background color of the header.\n */\n@customElement('nord-header')\nexport default class Header extends LitElement {\n  static styles = [componentStyle, style]\n\n  private endSlot = new SlotController(this, 'end')\n\n  /**\n   * Controls the size of the header component.\n   */\n  @property({ reflect: true }) size: 'm' | 's' | 'xs' = 'm'\n\n  render() {\n    return html`\n      <header class=\"n-header\">\n        <slot></slot>\n        <div class=\"n-header-end\" ?hidden=${this.endSlot.isEmpty}>\n          <slot name=\"end\"></slot>\n        </div>\n      </header>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-header': Header\n  }\n}\n"],"names":["Header","LitElement","constructor","this","endSlot","SlotController","size","render","html","isEmpty","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"y+CAkBe,IAAMA,EAAN,cAAqBC,EAArB,WAAAC,uBAGLC,KAAOC,QAAG,IAAIC,EAAeF,KAAM,OAKdA,KAAIG,KAAqB,GAYvD,CAVC,MAAAC,GACE,OAAOC,CAAI,4EAG6BL,KAAKC,QAAQK,kDAKtD,GAlBMT,EAAAU,OAAS,CAACC,EAAgBC,GAOJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAoCf,EAAAgB,UAAA,YAAA,GARtChB,EAAMa,EAAA,CAD1BI,EAAc,gBACMjB,SAAAA"}

package/lib/IconManager.js

@@ -1,2 +1,2 @@
-const e=e=>fetch(`https://nordcdn.net/ds/icons/3.17.0/assets/${e}.svg`).then((t=>{if(!t.ok)throw new TypeError(`NORD: unknown icon: '${e}'`);return t.text()}));class t{constructor(){this.cache=new Map,this.resolver=e}resolve(e,t){let r=this.cache.get(e);"string"!=typeof r?(r||(r=this.resolver(e).catch((()=>"")).then((t=>(this.cache.set(e,t),t))),this.cache.set(e,r)),r.then(t)):t(r)}registerIcon(e,t){let r,s;if("string"==typeof e?(r=e,s=t):(r=e.title,s=e.default),!r)throw new Error("name is required when registering an icon");if(!s)throw new Error("icon must not be empty");this.cache.set(r,s)}clear(){this.cache.clear()}}export{t as IconManager};
+const e=e=>fetch(`https://nordcdn.net/ds/icons/3.17.1/assets/${e}.svg`).then((t=>{if(!t.ok)throw new TypeError(`NORD: unknown icon: '${e}'`);return t.text()}));class t{constructor(){this.cache=new Map,this.resolver=e}resolve(e,t){let r=this.cache.get(e);"string"!=typeof r?(r||(r=this.resolver(e).catch((()=>"")).then((t=>(this.cache.set(e,t),t))),this.cache.set(e,r)),r.then(t)):t(r)}registerIcon(e,t){let r,s;if("string"==typeof e?(r=e,s=t):(r=e.title,s=e.default),!r)throw new Error("name is required when registering an icon");if(!s)throw new Error("icon must not be empty");this.cache.set(r,s)}clear(){this.cache.clear()}}export{t as IconManager};
 //# sourceMappingURL=IconManager.js.map

package/lib/Input.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{s as n}from"./navigation-search-CBbIGzo2.js";import{css as e,html as i,nothing as o,LitElement as r}from"lit";import{query as s,property as a,customElement as d}from"lit/decorators.js";import{classMap as l}from"lit/directives/class-map.js";import{ifDefined as p}from"lit/directives/if-defined.js";import{ref as c}from"lit/directives/ref.js";import{styleMap as u}from"lit/directives/style-map.js";import{D as m}from"./DirectionController-ChvNGESZ.js";import{R as h}from"./ResizeController-14PUwRQy.js";import{c as v}from"./cond-CI1KbneT.js";import{N as b}from"./events-Bv6wNHwJ.js";import{A as f}from"./AutocompleteMixin-D8eiOxvO.js";import{F as g}from"./FocusableMixin-BlQLNPdJ.js";import{F as y}from"./FormAssociatedMixin-D9aPREgv.js";import{I as w}from"./InputMixin-LetXsCyv.js";import{R as x}from"./ReadonlyMixin-BdJPGtQ3.js";import{S as j}from"./SizeMixin-CU9cLbLC.js";import{T as $}from"./TextSelectableMixin-Cfv__lHS.js";import{s as z}from"./Component-BJ5O5n8k.js";import{s as _}from"./FormField-CMgEFZCK.js";import{s as k}from"./TextField-CSKvieoG.js";import S from"./Icon.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./light-dom-styles-DXsbiKU9.js";import"./VisuallyHidden.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./IconManager.js";const I=e`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{appearance:none}.n-input-container{display:grid;font-size:var(--n-font-size-m);grid-template-columns:max-content 1fr max-content}.n-input{grid-area:1/1/2/4;padding-inline-end:var(--_n-input-end-inline-size,var(--_n-input-padding-inline));padding-inline-start:var(--_n-input-start-inline-size,var(--_n-input-padding-inline))}slot[name=end],slot[name=start]{align-items:center;color:var(--n-color-icon);display:flex;pointer-events:none}:host([disabled]) slot:is([name=start],[name=end]){color:var(--n-color-text-weakest)}:host([readonly]) slot:is([name=start],[name=end]){color:var(--n-color-text)}slot[name=start]{grid-area:1/1/2/2;order:1}slot[name=end]{grid-area:1/3/2/4}.is-rtl slot[name=end],slot[name=start]{--n-button-border-radius:var(--n-border-radius-s) 0 0 var(--n-border-radius-s)}.is-rtl slot[name=start],slot[name=end]{--n-button-border-radius:0 var(--n-border-radius-s) var(--n-border-radius-s) 0}:is([name=start],[name=end])::slotted(*){font-size:var(--_n-input-font-size)}[name=start]::slotted(*),nord-icon{margin-inline-end:calc(var(--_n-input-padding-inline)/2)!important;margin-inline-start:var(--_n-input-padding-inline)!important}[name=end]::slotted(*){margin-inline-end:var(--_n-input-padding-inline)!important;margin-inline-start:calc(var(--_n-input-padding-inline)/2)!important}[name=start]::slotted(:is(nord-button,nord-dropdown)){margin-inline-start:0!important}[name=end]::slotted(:is(nord-button,nord-dropdown)){margin-inline-end:0!important}nord-icon{--_n-input-icon-color:var(--n-input-icon-color,var(--n-color-icon));color:var(--_n-input-icon-color)}::slotted(:is(nord-button:not([disabled]),nord-dropdown)){pointer-events:auto;position:relative}::slotted(nord-button:not([disabled],:focus)),::slotted(nord-dropdown:not(:focus-within)){--n-button-box-shadow:none}::slotted(nord-button:active),::slotted(nord-dropdown:active:not([open])){inset-block-start:-1px}::slotted(nord-button[disabled]){--n-button-color:var(--n-color-text-weaker);-webkit-text-fill-color:var(--n-button-color);opacity:.8}.n-input-container:hover:not(:focus-within) ::slotted(:is(nord-button:not([disabled]),nord-dropdown)),.n-label-container:hover~.n-input-container:not(:focus-within) ::slotted(:is(nord-button:not([disabled]),nord-dropdown)){--n-button-border-color:var(--n-input-border-color,var(--n-color-border-hover))}.n-input-container:focus-within ::slotted(:is(nord-button,nord-dropdown:not([open]))){--n-button-border-color:var(--n-input-border-color,var(--n-color-accent))}:host([error]) .n-input-container ::slotted(:is(nord-button:not(:focus),nord-dropdown:not(:focus-within),nord-dropdown[open])){--n-button-border-color:var(--n-input-border-color,var(--n-color-status-danger))}:host([size=s]) ::slotted(nord-button){--_n-button-padding-inline:calc(var(--n-space-s)*1.4)}:host{--_n-input-icon-size:var(--n-size-icon-s)}:host([size=s]){--_n-input-icon-size:var(--n-size-icon-xs)}:host([size=l]){--_n-input-icon-size:var(--n-size-icon-m)}::slotted(nord-icon:not([size])),nord-icon{--_n-icon-size:var(--_n-input-icon-size)}:host([type=unit]) :is(.n-input-container,.n-input){--_n-input-text-align:var(--n-input-text-align,end);font-family:var(--n-font-family-code)!important}:host([type=button]) :is(.n-input-container,.n-input){cursor:pointer}:host(:is([type=date],[type=time],[type=datetime-local])) .n-input{block-size:calc(var(--n-line-height-form) + var(--_n-input-padding-block)*2 + 2px)}.n-input::-webkit-calendar-picker-indicator{border-radius:var(--n-border-radius-s);cursor:pointer;display:var(--n-input-picker-indicator-display,revert)}.n-input::-webkit-calendar-picker-indicator:hover{background:var(--n-color-surface-lowered)}.n-input::-webkit-inner-spin-button{display:var(--n-input-picker-indicator-display,revert)}.n-input::-webkit-datetime-edit{color:var(--_n-input-color)}:host([type=file]) .n-input{cursor:pointer}.n-input::file-selector-button{background:#0000;border:0;color:var(--n-color-text);cursor:pointer;font:inherit;font-weight:var(--n-font-weight-active);margin-inline-end:var(--_n-input-padding-inline);padding:0}`;S.registerIcon(n);const C=t=>t?`${t}px`:void 0,M={number:"numeric",email:"email",tel:"tel",url:"url",search:"search"};let F=class extends(j(y(f(x($(w(g(r)))))))){constructor(){super(...arguments),this.startObserver=new h(this,(()=>this.startSlot)),this.endObserver=new h(this,(()=>this.endSlot)),this.direction=new m(this),this.type="text",this.expand=!1,this.disallowPattern=void 0,this.inputmode=void 0,this.handleInputChange=t=>{const n=t.target;this.disallowPattern&&function(t,n){const{value:e}=t,i=t.selectionStart,o=e.slice(0,i),r=e.slice(i,e.length),s=o.replace(n,""),a=s+r.replace(n,""),d=s.length;t.value=a,t.selectionStart=d,t.selectionEnd=d}(n,new RegExp(this.disallowPattern,"g")),this.handleInput(t)}}render(){var t;const n="number"===this.type,e=this.inputmode||M[this.type];return i`${this.renderLabel()}<div class="${l({"n-input-container":!0,"is-rtl":"rtl"===this.direction.dir})}" style="${u({"--_n-input-start-inline-size":C(this.startObserver.inlineSize),"--_n-input-end-inline-size":C(this.endObserver.inlineSize)})}"><slot name="start">${"search"===this.type?i`<nord-icon name="navigation-search"></nord-icon>`:o}</slot><input ${c(this.textSelectableRef)} ${c(this.focusableRef)} id="${this.inputId}" class="n-input" type="${n||"unit"===this.type?"text":this.type}" inputmode="${p(e)}" pattern="${v(n,"[0-9]*")}" ?disabled="${this.effectiveDisabled}" ?required="${this.required}" ?readonly="${this.readonly}" name="${p(this.name)}" .value="${"file"===this.type?"":null!==(t=this.value)&&void 0!==t?t:""}" placeholder="${p(this.placeholder)}" @input="${this.handleInputChange}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" @select="${this.handleSelect}" aria-label="${p(this.controlAriaLabel)}" aria-describedby="${p(this.controlAriaDescribedby)}" aria-invalid="${p(this.controlAriaInvalid)}" spellcheck="false" autocomplete="${this.autocomplete}"><slot name="end"></slot></div>${this.renderError()} ${this.isHintBelow?this.renderHint():o}`}handleKeydown(t){if("Enter"!==t.key)return;const{form:n}=this;if(n){const t=function(t){let n=t.querySelector('button[type="submit"]');!n&&t.id&&(n=t.getRootNode().querySelector(`button[form=${t.id}]`));return n}(n);setTimeout((()=>null==t?void 0:t.click()),0)}}handleSelect(t){t.stopPropagation(),this.dispatchEvent(new b("select"))}};F.styles=[z,_,k,I],t([s("slot[name='start']")],F.prototype,"startSlot",void 0),t([s("slot[name='end']")],F.prototype,"endSlot",void 0),t([a({reflect:!0})],F.prototype,"type",void 0),t([a({reflect:!0,type:Boolean})],F.prototype,"expand",void 0),t([a({reflect:!0,attribute:"disallow-pattern"})],F.prototype,"disallowPattern",void 0),t([a({reflect:!0})],F.prototype,"inputmode",void 0),F=t([d("nord-input")],F);var R=F;export{R as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{s as n}from"./navigation-search-CBbIGzo2.js";import{css as e,html as i,nothing as o,LitElement as r}from"lit";import{query as s,property as a,customElement as d}from"lit/decorators.js";import{classMap as l}from"lit/directives/class-map.js";import{ifDefined as p}from"lit/directives/if-defined.js";import{ref as c}from"lit/directives/ref.js";import{styleMap as u}from"lit/directives/style-map.js";import{D as m}from"./DirectionController-ChvNGESZ.js";import{R as h}from"./ResizeController-14PUwRQy.js";import{c as v}from"./cond-CI1KbneT.js";import{N as b}from"./events-Bv6wNHwJ.js";import{A as f}from"./AutocompleteMixin-D8eiOxvO.js";import{F as g}from"./FocusableMixin-BlQLNPdJ.js";import{F as y}from"./FormAssociatedMixin-D9aPREgv.js";import{I as w}from"./InputMixin-LetXsCyv.js";import{R as x}from"./ReadonlyMixin-BdJPGtQ3.js";import{S as j}from"./SizeMixin-CU9cLbLC.js";import{T as $}from"./TextSelectableMixin-Cfv__lHS.js";import{s as z}from"./Component-BJ5O5n8k.js";import{s as _}from"./FormField-CMgEFZCK.js";import{s as k}from"./TextField-BYSciLeB.js";import S from"./Icon.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./light-dom-styles-DXsbiKU9.js";import"./VisuallyHidden.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./IconManager.js";const I=e`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{appearance:none}.n-input-container{display:grid;font-size:var(--n-font-size-m);grid-template-columns:max-content 1fr max-content}.n-input{grid-area:1/1/2/4;padding-inline-end:var(--_n-input-end-inline-size,var(--_n-input-padding-inline));padding-inline-start:var(--_n-input-start-inline-size,var(--_n-input-padding-inline))}slot[name=end],slot[name=start]{align-items:center;color:var(--n-color-icon);display:flex;pointer-events:none}:host([disabled]) slot:is([name=start],[name=end]){color:var(--n-color-text-weakest)}:host([readonly]) slot:is([name=start],[name=end]){color:var(--n-color-text)}slot[name=start]{grid-area:1/1/2/2;order:1}slot[name=end]{grid-area:1/3/2/4}.is-rtl slot[name=end],slot[name=start]{--n-button-border-radius:var(--n-border-radius-s) 0 0 var(--n-border-radius-s)}.is-rtl slot[name=start],slot[name=end]{--n-button-border-radius:0 var(--n-border-radius-s) var(--n-border-radius-s) 0}:is([name=start],[name=end])::slotted(*){font-size:var(--_n-input-font-size)}[name=start]::slotted(*),nord-icon{margin-inline-end:calc(var(--_n-input-padding-inline)/2)!important;margin-inline-start:var(--_n-input-padding-inline)!important}[name=end]::slotted(*){margin-inline-end:var(--_n-input-padding-inline)!important;margin-inline-start:calc(var(--_n-input-padding-inline)/2)!important}[name=start]::slotted(:is(nord-button,nord-dropdown)){margin-inline-start:0!important}[name=end]::slotted(:is(nord-button,nord-dropdown)){margin-inline-end:0!important}nord-icon{--_n-input-icon-color:var(--n-input-icon-color,var(--n-color-icon));color:var(--_n-input-icon-color)}::slotted(:is(nord-button:not([disabled]),nord-dropdown)){pointer-events:auto;position:relative}::slotted(nord-button:not([disabled],:focus)),::slotted(nord-dropdown:not(:focus-within)){--n-button-box-shadow:none}::slotted(nord-button:active),::slotted(nord-dropdown:active:not([open])){inset-block-start:-1px}::slotted(nord-button[disabled]){--n-button-color:var(--n-color-text-weaker);-webkit-text-fill-color:var(--n-button-color);opacity:.8}.n-input-container:hover:not(:focus-within) ::slotted(:is(nord-button:not([disabled]),nord-dropdown)),.n-label-container:hover~.n-input-container:not(:focus-within) ::slotted(:is(nord-button:not([disabled]),nord-dropdown)){--n-button-border-color:var(--n-input-border-color,var(--n-color-border-hover))}.n-input-container:focus-within ::slotted(:is(nord-button,nord-dropdown:not([open]))){--n-button-border-color:var(--n-input-border-color,var(--n-color-accent))}:host([error]) .n-input-container ::slotted(:is(nord-button:not(:focus),nord-dropdown:not(:focus-within),nord-dropdown[open])){--n-button-border-color:var(--n-input-border-color,var(--n-color-status-danger))}:host([size=s]) ::slotted(nord-button){--_n-button-padding-inline:calc(var(--n-space-s)*1.4)}:host{--_n-input-icon-size:var(--n-size-icon-s)}:host([size=s]){--_n-input-icon-size:var(--n-size-icon-xs)}:host([size=l]){--_n-input-icon-size:var(--n-size-icon-m)}::slotted(nord-icon:not([size])),nord-icon{--_n-icon-size:var(--_n-input-icon-size)}:host([type=unit]) :is(.n-input-container,.n-input){--_n-input-text-align:var(--n-input-text-align,end);font-family:var(--n-font-family-code)!important}:host([type=button]) :is(.n-input-container,.n-input){cursor:pointer}:host(:is([type=date],[type=time],[type=datetime-local])) .n-input{block-size:calc(var(--n-line-height-form) + var(--_n-input-padding-block)*2 + 2px)}.n-input::-webkit-calendar-picker-indicator{border-radius:var(--n-border-radius-s);cursor:pointer;display:var(--n-input-picker-indicator-display,revert)}.n-input::-webkit-calendar-picker-indicator:hover{background:var(--n-color-surface-lowered)}.n-input::-webkit-inner-spin-button{display:var(--n-input-picker-indicator-display,revert)}.n-input::-webkit-datetime-edit{color:var(--_n-input-color)}:host([type=file]) .n-input{cursor:pointer}.n-input::file-selector-button{background:#0000;border:0;color:var(--n-color-text);cursor:pointer;font:inherit;font-weight:var(--n-font-weight-active);margin-inline-end:var(--_n-input-padding-inline);padding:0}`;S.registerIcon(n);const C=t=>t?`${t}px`:void 0,M={number:"numeric",email:"email",tel:"tel",url:"url",search:"search"};let F=class extends(j(y(f(x($(w(g(r)))))))){constructor(){super(...arguments),this.startObserver=new h(this,(()=>this.startSlot)),this.endObserver=new h(this,(()=>this.endSlot)),this.direction=new m(this),this.type="text",this.expand=!1,this.disallowPattern=void 0,this.inputmode=void 0,this.handleInputChange=t=>{const n=t.target;this.disallowPattern&&function(t,n){const{value:e}=t,i=t.selectionStart,o=e.slice(0,i),r=e.slice(i,e.length),s=o.replace(n,""),a=s+r.replace(n,""),d=s.length;t.value=a,t.selectionStart=d,t.selectionEnd=d}(n,new RegExp(this.disallowPattern,"g")),this.handleInput(t)}}render(){var t;const n="number"===this.type,e=this.inputmode||M[this.type];return i`${this.renderLabel()}<div class="${l({"n-input-container":!0,"is-rtl":"rtl"===this.direction.dir})}" style="${u({"--_n-input-start-inline-size":C(this.startObserver.inlineSize),"--_n-input-end-inline-size":C(this.endObserver.inlineSize)})}"><slot name="start">${"search"===this.type?i`<nord-icon name="navigation-search"></nord-icon>`:o}</slot><input ${c(this.textSelectableRef)} ${c(this.focusableRef)} id="${this.inputId}" class="n-input" type="${n||"unit"===this.type?"text":this.type}" inputmode="${p(e)}" pattern="${v(n,"[0-9]*")}" ?disabled="${this.effectiveDisabled}" ?required="${this.required}" ?readonly="${this.readonly}" name="${p(this.name)}" .value="${"file"===this.type?"":null!==(t=this.value)&&void 0!==t?t:""}" placeholder="${p(this.placeholder)}" @input="${this.handleInputChange}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" @select="${this.handleSelect}" aria-label="${p(this.controlAriaLabel)}" aria-describedby="${p(this.controlAriaDescribedby)}" aria-invalid="${p(this.controlAriaInvalid)}" spellcheck="false" autocomplete="${this.autocomplete}"><slot name="end"></slot></div>${this.renderError()} ${this.isHintBelow?this.renderHint():o}`}handleKeydown(t){if("Enter"!==t.key)return;const{form:n}=this;if(n){const t=function(t){let n=t.querySelector('button[type="submit"]');!n&&t.id&&(n=t.getRootNode().querySelector(`button[form=${t.id}]`));return n}(n);setTimeout((()=>null==t?void 0:t.click()),0)}}handleSelect(t){t.stopPropagation(),this.dispatchEvent(new b("select"))}};F.styles=[z,_,k,I],t([s("slot[name='start']")],F.prototype,"startSlot",void 0),t([s("slot[name='end']")],F.prototype,"endSlot",void 0),t([a({reflect:!0})],F.prototype,"type",void 0),t([a({reflect:!0,type:Boolean})],F.prototype,"expand",void 0),t([a({reflect:!0,attribute:"disallow-pattern"})],F.prototype,"disallowPattern",void 0),t([a({reflect:!0})],F.prototype,"inputmode",void 0),F=t([d("nord-input")],F);var R=F;export{R as default};
 //# sourceMappingURL=Input.js.map

package/lib/Item.js

@@ -1,2 +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};
+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:has(>nord-item):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

@@ -1 +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"}
+{"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":"gkDA4Be,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/Layout.js

@@ -1,2 +1,2 @@
-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};
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{l as t}from"./NavToggle-ROsuaJkW.js";import{css as a,LitElement as n,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{LocalizeController as N}from"./LocalizeController.js";import{NavOpenChangeEvent as S}from"./NavOpenChangeEvent.js";import{NavResizeEvent as _}from"./NavResizeEvent.js";import"./Tooltip.js";import"lit/directives/ref.js";import"./FocusableMixin-BlQLNPdJ.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"./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"./localization24.js";import"./events-Bv6wNHwJ.js";import"./positioning-D-K8Mueq.js";const C=()=>!0;class W{constructor(e,t){e.addController(this),this.options={enabled:C,...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=a`: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 T=0;const E=250,M="undefined"!=typeof matchMedia?matchMedia("(min-width: 768px)"):{matches:!1,addEventListener(){}},$=z("nord-layout.navWidth",E),O=z("nord-layout.navWidthDefault",E),D=z("nord-layout.navOpen",!0);function L(e){for(const t of e)if(t instanceof HTMLElement&&"nord-nav-toggle"===t.localName)return t;return null}function R(e){return null!==L(e.composedPath())}const H=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 B=class extends n{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.localization=new N(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 W(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=$.value,this.isDragging=!1,this.wideScreen=M.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 a=null===(e=this.footerSlotEl)||void 0===e?void 0:e.assignedElements({flatten:!0})[0];a!==this.observedFooterElement&&(null===(t=this.footerSizeObserver)||void 0===t||t.disconnect(),this.observedFooterElement=a,a?(this.footerSizeObserver=new ResizeObserver((()=>this.publishFooterSize())),this.footerSizeObserver.observe(a),this.publishFooterSize()):this.style.removeProperty("--n-layout-footer-block-size"))},this.handleMediaQueryChange=()=>{this.wideScreen=M.matches,this.navTransition(this.wideScreen?"open":"close")},this.handleToggleClick=e=>{R(e)||this.navTransition("toggle")},this.handleHostClick=e=>{R(e)&&this.navTransition("toggle")},this.handleHostMouseOver=e=>{const t=L(e.composedPath());t&&(e.relatedTarget instanceof Node&&t.contains(e.relatedTarget)||this.handleMouseEnter())},this.handleHostMouseOut=e=>{const t=L(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 a=t.getBoundingClientRect(),n=e.clientY-(a.top+a.height/2);this.resizeTooltipEl.style.setProperty("--n-resize-tooltip-y",`${n}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(M,"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 a=null!==(t=null===(e=this.stickyHeaderEl)||void 0===e?void 0:e.getBoundingClientRect().height)&&void 0!==t?t:0;a>0?this.style.setProperty("--n-layout-header-block-size",`${a}px`):this.style.removeProperty("--n-layout-header-block-size")}publishFooterSize(){var e,t;const a=null!==(t=null===(e=this.observedFooterElement)||void 0===e?void 0:e.getBoundingClientRect().height)&&void 0!==t?t:0;a>0?this.style.setProperty("--n-layout-footer-block-size",`${a}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),$.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:a,headerSlot:n,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":n.hasContent,"n-has-footer":s.hasContent,"n-has-top-bar":r.hasContent,"n-has-drawer":l.hasContent,"n-has-nav":a.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="${a.hasContent?t:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}" data-collapse-mode="${this.collapseMode}"><div id="n-layout-nav" class="n-layout-nav" ?hidden="${a.isEmpty}" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav" @click="${this.handleNavClick}"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" aria-label="${this.localization.term("resizeNavigation")}" aria-controls="n-layout-nav" aria-valuemin="${this.minNavWidth}" aria-valuemax="${this.maxNavWidth}" aria-valuenow="${this.resizeValueNow}" aria-valuetext="${g("opened"!==t,this.localization.term("navigationCollapsed"))}" 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}">${a.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($.value=this.navWidth,null!=e){const e=this.navWidth;this.dispatchEvent(new _(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=H.transition(this.navState,e)}handleNavClick(e){if(!e.defaultPrevented&&!this.wideScreen){const a=e.target;(e=>"nord-nav-item"===e.localName)(t=a)&&!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")}get resizeValueNow(){return"opened"!==this.navState?this.minNavWidth:f(Math.round(this.navWidth),this.minNavWidth,this.maxNavWidth)}handleKeyboardResize(e){const{navWidth:t,direction:{isLTR:a}}=this;switch(e.key){case"ArrowLeft":this.setNavWidth(t+(a?-30:30));break;case"ArrowRight":this.setNavWidth(t+(a?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")}};B.styles=[w,k,j],e([s(".n-layout-nav",!0)],B.prototype,"navEl",void 0),e([s(".n-resize-tooltip")],B.prototype,"resizeTooltipEl",void 0),e([s(".n-sticky")],B.prototype,"stickyHeaderEl",void 0),e([s('slot[name="footer"]')],B.prototype,"footerSlotEl",void 0),e([r()],B.prototype,"navWidth",void 0),e([r()],B.prototype,"isDragging",void 0),e([r()],B.prototype,"navState",void 0),e([r()],B.prototype,"wideScreen",void 0),e([l({reflect:!0,type:Boolean,attribute:"nav-open"})],B.prototype,"navOpen",void 0),e([l({reflect:!0,type:Boolean,attribute:"persist-nav-state"})],B.prototype,"persistNavState",void 0),e([l({type:Boolean,reflect:!0,attribute:"sync-nav-state"})],B.prototype,"syncNavState",void 0),e([l({type:Number,reflect:!0,attribute:"default-nav-width"})],B.prototype,"defaultNavWidth",void 0),e([l({type:Number,reflect:!0,attribute:"min-nav-width"})],B.prototype,"minNavWidth",void 0),e([l({type:Number,reflect:!0,attribute:"max-nav-width"})],B.prototype,"maxNavWidth",void 0),e([l({type:Number,reflect:!0,attribute:"nav-rail-width"})],B.prototype,"navRailWidth",void 0),e([l({reflect:!0})],B.prototype,"padding",void 0),e([l({type:Boolean,reflect:!0})],B.prototype,"sticky",void 0),e([l({type:Boolean,reflect:!0,attribute:"sticky-footer"})],B.prototype,"stickyFooter",void 0),e([l({type:Boolean,reflect:!0,attribute:"hide-default-nav-toggle"})],B.prototype,"hideDefaultNavToggle",void 0),e([l({type:Boolean,reflect:!0,attribute:"hide-collapse-button"})],B.prototype,"hideCollapseButton",void 0),e([l({type:Boolean,reflect:!0,attribute:"toggle-on-resize-click"})],B.prototype,"toggleOnResizeClick",void 0),e([l({reflect:!0,attribute:"collapse-mode"})],B.prototype,"collapseMode",void 0),e([y("navWidth","updated")],B.prototype,"handleNavWidthChange",null),e([y("navState")],B.prototype,"handleNavStateChange",null),e([y("navOpen","updated")],B.prototype,"handleOpenChange",null),B=e([d("nord-layout")],B);var F=B;export{F as default};
 //# sourceMappingURL=Layout.js.map