@nordhealth/components 2.16.1 → 2.17.0

package/lib/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../src/common/controllers/LightSlotController.ts","../src/radio/Radio.ts","../src/common/directives/wrapIf.ts"],"sourcesContent":["import { nothing, ReactiveControllerHost } from \"lit\"\nimport { LightDomController } from \"./LightDomController.js\"\nimport { SlotController } from \"./SlotController.js\"\n\ntype LightSlotOptions = {\n  slotName: string\n  render: () => unknown\n  syncLightDom: (element: Element) => void\n}\n\n/**\n * Handles cases where a component needs to render to light DOM,\n * and potentially sync component properties to user-supplied content.\n */\nexport class LightSlotController extends SlotController {\n  private renderHook: Comment\n  private lightDom: LightDomController\n\n  constructor(host: ReactiveControllerHost & HTMLElement, private options: LightSlotOptions) {\n    super(host, options.slotName)\n\n    // we need a node to hook onto for rendering\n    // without this, multiple controllers rendering to the light DOM\n    // will overwrite each others' content\n    this.renderHook = document.createComment(this.slotName)\n\n    this.lightDom = new LightDomController(host, {\n      render: () => (this.hasContent ? nothing : this.options.render()),\n      renderOptions: { renderBefore: this.renderHook },\n    })\n  }\n\n  hostConnected() {\n    super.hostConnected()\n    this.host.appendChild(this.renderHook)\n    this.syncLightDom()\n  }\n\n  hostDisconnected() {\n    this.renderHook.remove()\n  }\n\n  protected override onChange = () => {\n    this.syncLightDom()\n  }\n\n  private syncLightDom() {\n    const node = this.content\n\n    if (node) {\n      this.options.syncLightDom(node)\n    }\n  }\n}\n","import { html, LitElement, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { LightDomController } from \"../common/controllers/LightDomController.js\"\nimport { LightSlotController } from \"../common/controllers/LightSlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { wrapIf } from \"../common/directives/wrapIf.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Radio.css\"\n\nlet id = 0\nconst createId = (suffix: string) => `nord-radio-${suffix}-${id++}`\n\nfunction isLabel(element: Element): element is HTMLLabelElement {\n  return element.localName === \"label\"\n}\n\n/**\n * Radio buttons are graphical user interface elements that allow user to choose only one option from\n * a predefined set of mutually exclusive options.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n */\n@customElement(\"nord-radio\")\nexport default class Radio extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  protected override inputId = createId(\"input\")\n  protected override hintId = createId(\"hint\")\n  protected override errorId = createId(\"error\")\n\n  /**\n   * For accessibility reasons, we render some parts of the component to the light DOM.\n   */\n  protected override hintSlot = new LightSlotController(this, {\n    slotName: \"hint\",\n    render: () => (this.hint ? html`<div slot=\"hint-internal\" id=${this.hintId}>${this.hint}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })\n\n  protected override labelSlot = new LightSlotController(this, {\n    slotName: \"label\",\n    render: () => (this.label ? html`<label slot=\"label-internal\" for=${this.inputId}>${this.label}</label>` : nothing),\n    syncLightDom: element => {\n      if (!isLabel(element)) {\n        // eslint-disable-next-line no-console\n        console.warn(`NORD: Only <label> elements should be placed in radio's \"label\" slot`)\n      } else {\n        element.htmlFor = this.inputId\n      }\n    },\n  })\n\n  protected override errorSlot = new LightSlotController(this, {\n    slotName: \"error\",\n    render: () => (this.error ? html`<div slot=\"error-internal\" id=${this.errorId}>${this.error}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })\n\n  protected inputSlot = new LightDomController(this, {\n    render: () =>\n      html`\n        <input\n          slot=\"input\"\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          ${ref(this.focusableRef)}\n          class=\"n-input\"\n          id=${this.inputId}\n          type=\"radio\"\n          name=${cond(this.name)}\n          .value=${cond(this.value)}\n          .checked=${this.checked}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          aria-describedby=${cond(this.getDescribedBy())}\n          aria-invalid=${cond(this.getInvalid())}\n          form=${cond(this.getAttribute(\"form\") || undefined)}\n        />\n      `,\n  })\n\n  // eslint-disable-next-line class-methods-use-this\n  protected override get formValue() {\n    // opt out of formdata event, since radio button is in light dom\n    return undefined\n  }\n\n  /**\n   * Controls whether the checkbox is checked or not.\n   */\n  @property({ type: Boolean, reflect: true }) checked: boolean = false\n\n  render() {\n    return html`\n      <div class=\"n-flex\">\n        <div class=\"n-input-container\" @change=${this.handleChange}>\n          <slot name=\"input\"></slot>\n          ${this.checked ? html`<div class=\"n-dot\"></div>` : nothing}\n        </div>\n        <div class=\"n-expand\">\n          <div class=\"n-label-container\">\n            ${wrapIf(\n              this.hideLabel,\n              () => html`\n                <slot name=\"label\"></slot>\n                <slot name=\"label-internal\"></slot>\n              `,\n              content => html`<nord-visually-hidden>${content}</nord-visually-hidden>`\n            )}\n            <div class=\"n-caption n-hint\" ?hidden=${!this.hasHint}>\n              <slot name=\"hint\"></slot>\n              <slot name=\"hint-internal\"></slot>\n            </div>\n          </div>\n          <div class=\"n-caption n-error\" role=\"alert\" ?hidden=${!this.hasError}>\n            <slot name=\"error\"></slot>\n            <slot name=\"error-internal\"></slot>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  @observe(\"checked\")\n  protected handleCheckedChange(previousChecked: boolean) {\n    // if this component was previous unchecked but is now checked,\n    // then we need to uncheck any radios in the same group\n    if (!previousChecked && this.checked) {\n      this.uncheckSiblings()\n    }\n  }\n\n  private uncheckSiblings() {\n    const root = this.getRootNode() as Document | ShadowRoot\n\n    root.querySelectorAll<Radio>(`nord-radio[name=\"${this.name}\"]`).forEach(radio => {\n      if (radio !== this) {\n        radio.checked = false\n      }\n    })\n  }\n\n  protected handleChange(e: Event): void {\n    e.stopPropagation()\n    const target = e.target as HTMLInputElement\n\n    this.checked = target.checked\n    super.handleChange(e)\n  }\n\n  private handleBlur = (e: Event) => {\n    e.stopPropagation()\n    this.dispatchEvent(new Event(\"blur\", { bubbles: false, cancelable: true }))\n  }\n\n  private handleFocus = (e: Event) => {\n    e.stopPropagation()\n    this.dispatchEvent(new Event(\"focus\", { bubbles: false, cancelable: true }))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-radio\": Radio\n  }\n}\n","// some clever typing so that TS knows what happens if you pass true/false values\nexport function wrapIf<TInner, TWrapper>(\n  condition: false,\n  inner: () => TInner,\n  wrapper: (inner: TInner) => TWrapper\n): TInner\nexport function wrapIf<TInner, TWrapper>(\n  condition: true,\n  inner: () => TInner,\n  wrapper: (inner: TInner) => TWrapper\n): TWrapper\nexport function wrapIf<TInner, TWrapper>(\n  condition: unknown,\n  inner: () => TInner,\n  wrapper: (inner: TInner) => TWrapper\n): TInner | TWrapper\n\n/**\n * @returns if condition is truthy, return result of wrapper, passing result of inner as arg. if falsy, return result of inner\n */\nexport function wrapIf<TInner, TWrapper>(condition: any, inner: () => TInner, wrapper: (innards: TInner) => TWrapper) {\n  return condition ? wrapper(inner()) : inner()\n}\n"],"names":["LightSlotController","SlotController","constructor","host","options","super","slotName","this","onChange","syncLightDom","renderHook","document","createComment","lightDom","LightDomController","render","hasContent","nothing","renderOptions","renderBefore","hostConnected","appendChild","hostDisconnected","remove","node","content","id","createId","suffix","Radio","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","inputId","hintId","errorId","hintSlot","hint","html","element","labelSlot","label","localName","isLabel","console","warn","htmlFor","errorSlot","error","inputSlot","handleBlur","handleFocus","ref","focusableRef","cond","name","value","checked","disabled","required","getDescribedBy","getInvalid","getAttribute","undefined","e","stopPropagation","dispatchEvent","Event","bubbles","cancelable","formValue","handleChange","condition","hideLabel","inner","wrapper","hasHint","hasError","handleCheckedChange","previousChecked","uncheckSiblings","getRootNode","querySelectorAll","forEach","radio","target","styles","componentStyle","formFieldStyle","style","__decorate","property","type","Boolean","reflect","prototype","observe","customElement"],"mappings":"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"}
+{"version":3,"file":"Radio.js","sources":["../src/common/controllers/LightSlotController.ts","../src/radio/Radio.ts","../src/common/directives/wrapIf.ts"],"sourcesContent":["import { nothing, ReactiveControllerHost } from \"lit\"\nimport { LightDomController } from \"./LightDomController.js\"\nimport { SlotController } from \"./SlotController.js\"\n\ntype LightSlotOptions = {\n  slotName: string\n  render: () => unknown\n  syncLightDom: (element: Element) => void\n}\n\n/**\n * Handles cases where a component needs to render to light DOM,\n * and potentially sync component properties to user-supplied content.\n */\nexport class LightSlotController extends SlotController {\n  private renderHook: Comment\n  private lightDom: LightDomController\n\n  constructor(host: ReactiveControllerHost & HTMLElement, private options: LightSlotOptions) {\n    super(host, options.slotName)\n\n    // we need a node to hook onto for rendering\n    // without this, multiple controllers rendering to the light DOM\n    // will overwrite each others' content\n    this.renderHook = document.createComment(this.slotName)\n\n    this.lightDom = new LightDomController(host, {\n      render: () => (this.hasContent ? nothing : this.options.render()),\n      renderOptions: { renderBefore: this.renderHook },\n    })\n  }\n\n  hostConnected() {\n    super.hostConnected()\n    this.host.appendChild(this.renderHook)\n    this.syncLightDom()\n  }\n\n  hostDisconnected() {\n    this.renderHook.remove()\n  }\n\n  protected override onChange = () => {\n    this.syncLightDom()\n  }\n\n  private syncLightDom() {\n    const node = this.content\n\n    if (node) {\n      this.options.syncLightDom(node)\n    }\n  }\n}\n","import { html, LitElement, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { LightDomController } from \"../common/controllers/LightDomController.js\"\nimport { LightSlotController } from \"../common/controllers/LightSlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { wrapIf } from \"../common/directives/wrapIf.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Radio.css\"\n\nlet id = 0\nconst createId = (suffix: string) => `nord-radio-${suffix}-${id++}`\n\nfunction isLabel(element: Element): element is HTMLLabelElement {\n  return element.localName === \"label\"\n}\n\n/**\n * Radio buttons are graphical user interface elements that allow user to choose only one option from\n * a predefined set of mutually exclusive options.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n */\n@customElement(\"nord-radio\")\nexport default class Radio extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  protected override inputId = createId(\"input\")\n  protected override hintId = createId(\"hint\")\n  protected override errorId = createId(\"error\")\n\n  /**\n   * For accessibility reasons, we render some parts of the component to the light DOM.\n   */\n  protected override hintSlot = new LightSlotController(this, {\n    slotName: \"hint\",\n    render: () => (this.hint ? html`<div slot=\"hint-internal\" id=${this.hintId}>${this.hint}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })\n\n  protected override labelSlot = new LightSlotController(this, {\n    slotName: \"label\",\n    render: () => (this.label ? html`<label slot=\"label-internal\" for=${this.inputId}>${this.label}</label>` : nothing),\n    syncLightDom: element => {\n      if (!isLabel(element)) {\n        // eslint-disable-next-line no-console\n        console.warn(`NORD: Only <label> elements should be placed in radio's \"label\" slot`)\n      } else {\n        element.htmlFor = this.inputId\n      }\n    },\n  })\n\n  protected override errorSlot = new LightSlotController(this, {\n    slotName: \"error\",\n    render: () => (this.error ? html`<div slot=\"error-internal\" id=${this.errorId}>${this.error}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })\n\n  protected inputSlot = new LightDomController(this, {\n    render: () =>\n      html`\n        <input\n          slot=\"input\"\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          ${ref(this.focusableRef)}\n          class=\"n-input\"\n          id=${this.inputId}\n          type=\"radio\"\n          name=${cond(this.name)}\n          .value=${cond(this.value)}\n          .checked=${this.checked}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          aria-describedby=${cond(this.getDescribedBy())}\n          aria-invalid=${cond(this.getInvalid())}\n          form=${cond(this.getAttribute(\"form\") || undefined)}\n        />\n      `,\n  })\n\n  // eslint-disable-next-line class-methods-use-this\n  protected override get formValue() {\n    // opt out of formdata event, since radio button is in light dom\n    return undefined\n  }\n\n  /**\n   * Controls whether the checkbox is checked or not.\n   */\n  @property({ type: Boolean, reflect: true }) checked: boolean = false\n\n  render() {\n    return html`\n      <div class=\"n-flex\">\n        <div class=\"n-input-container\" @change=${this.handleChange}>\n          <slot name=\"input\"></slot>\n          ${this.checked ? html`<div class=\"n-dot\"></div>` : nothing}\n        </div>\n        <div class=\"n-expand\">\n          <div class=\"n-label-container\">\n            ${wrapIf(\n              this.hideLabel,\n              () => html`\n                <slot name=\"label\"></slot>\n                <slot name=\"label-internal\"></slot>\n              `,\n              content => html`<nord-visually-hidden>${content}</nord-visually-hidden>`\n            )}\n            <div class=\"n-caption n-hint\" ?hidden=${!this.hasHint}>\n              <slot name=\"hint\"></slot>\n              <slot name=\"hint-internal\"></slot>\n            </div>\n          </div>\n          <div class=\"n-caption n-error\" role=\"alert\" ?hidden=${!this.hasError}>\n            <slot name=\"error\"></slot>\n            <slot name=\"error-internal\"></slot>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  @observe(\"checked\")\n  protected handleCheckedChange(previousChecked: boolean) {\n    // if this component was previous unchecked but is now checked,\n    // then we need to uncheck any radios in the same group\n    if (!previousChecked && this.checked) {\n      this.uncheckSiblings()\n    }\n  }\n\n  private uncheckSiblings() {\n    const root = this.getRootNode() as Document | ShadowRoot\n\n    root.querySelectorAll<Radio>(`nord-radio[name=\"${this.name}\"]`).forEach(radio => {\n      if (radio !== this) {\n        radio.checked = false\n      }\n    })\n  }\n\n  protected handleChange(e: Event): void {\n    e.stopPropagation()\n    const target = e.target as HTMLInputElement\n\n    this.checked = target.checked\n    super.handleChange(e)\n  }\n\n  private handleBlur = (e: Event) => {\n    e.stopPropagation()\n    this.dispatchEvent(new Event(\"blur\", { bubbles: false, cancelable: true }))\n  }\n\n  private handleFocus = (e: Event) => {\n    e.stopPropagation()\n    this.dispatchEvent(new Event(\"focus\", { bubbles: false, cancelable: true }))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-radio\": Radio\n  }\n}\n","// some clever typing so that TS knows what happens if you pass true/false values\nexport function wrapIf<TInner, TWrapper>(\n  condition: false,\n  inner: () => TInner,\n  wrapper: (inner: TInner) => TWrapper\n): TInner\nexport function wrapIf<TInner, TWrapper>(\n  condition: true,\n  inner: () => TInner,\n  wrapper: (inner: TInner) => TWrapper\n): TWrapper\nexport function wrapIf<TInner, TWrapper>(\n  condition: unknown,\n  inner: () => TInner,\n  wrapper: (inner: TInner) => TWrapper\n): TInner | TWrapper\n\n/**\n * @returns if condition is truthy, return result of wrapper, passing result of inner as arg. if falsy, return result of inner\n */\nexport function wrapIf<TInner, TWrapper>(condition: any, inner: () => TInner, wrapper: (innards: TInner) => TWrapper) {\n  return condition ? wrapper(inner()) : inner()\n}\n"],"names":["LightSlotController","SlotController","constructor","host","options","super","slotName","this","onChange","syncLightDom","renderHook","document","createComment","lightDom","LightDomController","render","hasContent","nothing","renderOptions","renderBefore","hostConnected","appendChild","hostDisconnected","remove","node","content","id","createId","suffix","Radio","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","inputId","hintId","errorId","hintSlot","hint","html","element","labelSlot","label","localName","isLabel","console","warn","htmlFor","errorSlot","error","inputSlot","handleBlur","handleFocus","ref","focusableRef","cond","name","value","checked","disabled","required","getDescribedBy","getInvalid","getAttribute","undefined","e","stopPropagation","dispatchEvent","Event","bubbles","cancelable","formValue","handleChange","condition","hideLabel","inner","wrapper","hasHint","hasError","handleCheckedChange","previousChecked","uncheckSiblings","getRootNode","querySelectorAll","forEach","radio","target","styles","componentStyle","formFieldStyle","style","__decorate","property","type","Boolean","reflect","prototype","observe","customElement"],"mappings":"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"}

package/lib/Range.js

@@ -1,2 +1,2 @@
-import{i as r,y as e,_ as n,e as a,s as o}from"./query-assigned-elements-89f41e17.js";import{n as t}from"./ref-4265fcf9.js";import{o as i}from"./class-map-1bc3148f.js";import{e as s}from"./property-03f59dce.js";import{l as c}from"./if-defined-718a58b2.js";import{N as d}from"./events-5337a6d7.js";import{F as l}from"./FocusableMixin-fc1e2a13.js";import{F as b}from"./FormAssociatedMixin-ad4d6c08.js";import{I as g}from"./InputMixin-1564ca2a.js";import{R as m,s as u}from"./TextField-6a272cd7.js";import{A as h}from"./AutocompleteMixin-c8018288.js";import{D as p}from"./DirectionController-8b298382.js";import{s as v}from"./Component-d4d6fa77.js";import{s as f}from"./FormField-c733b196.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-d733c575.js";import"./VisuallyHidden.js";const _=r`:host{--_n-range-progress:0%;--_n-range-thumb-focus-ring:0 0 0 1px var(--n-color-accent);--_n-range-thumb-color:var(--n-color-text-on-accent);--_n-range-thumb-border-size:1px;--_n-range-thumb-border-color:var(--n-color-border-strong);--_n-range-gradient-direction:right;--_n-range-thumb-size:var(--n-range-thumb-size, 20px);--_n-range-track-color-active:var(--n-range-track-color-active, var(--n-color-accent));--_n-range-track-color-inactive:var(--n-range-track-color-inactive, var(--n-color-border-strong));--_n-range-track-size:var(--n-range-track-size, 3px)}.n-range{-webkit-appearance:none;appearance:none;inline-size:100%;background:linear-gradient(to var(--_n-range-gradient-direction),var(--_n-range-track-color-active) 0,var(--_n-range-track-color-active) var(--_n-range-progress),var(--_n-range-track-color-inactive) var(--_n-range-progress));border-radius:var(--n-border-radius-s)}.n-range.is-rtl{--_n-range-gradient-direction:left}.n-range::-webkit-slider-runnable-track{inline-size:100%;block-size:var(--_n-range-track-size)}.n-range::-webkit-slider-thumb{block-size:var(--_n-range-thumb-size);inline-size:var(--_n-range-thumb-size);box-shadow:var(--n-box-shadow),var(--n-box-shadow);border-radius:var(--n-border-radius-circle);background:var(--_n-range-thumb-color);border:var(--_n-range-thumb-border-size) solid var(--_n-range-thumb-border-color);cursor:pointer;-webkit-appearance:none;margin-block-start:calc(calc(var(--_n-range-thumb-size) - var(--_n-range-track-size))/ 2 * -1)}.n-range::-moz-range-track{border:var(--n-space-s) solid var(--n-color-surface);inline-size:100%;block-size:var(--_n-range-track-size)}.n-range::-moz-range-thumb{block-size:var(--_n-range-thumb-size);inline-size:var(--_n-range-thumb-size);box-shadow:var(--n-box-shadow);border-radius:var(--n-border-radius-circle);background:var(--_n-range-thumb-color);border:var(--_n-range-thumb-border-size) solid var(--_n-range-thumb-border-color);cursor:pointer;appearance:none;margin-block-start:calc(calc(var(--_n-range-thumb-size) - var(--_n-range-track-size))/ 2 * -1)}.n-label-container{margin-block-end:0;inline-size:100%}label{display:flex!important}.n-range-output{font-weight:var(--n-font-weight);color:var(--n-color-text-weaker);font-size:var(--n-font-size-m);margin-inline-start:auto}.n-range:focus{outline:0}.n-label-container:hover+.n-input-container .n-input:disabled,.n-range:disabled{opacity:.5}.n-range:disabled::-webkit-slider-thumb,.n-range[readonly]::-webkit-slider-thumb{--_n-range-thumb-color:var(--n-color-border);--_n-range-thumb-border-color:var(--n-color-border);box-shadow:none;cursor:default}.n-range:disabled::-moz-range-thumb,.n-range[readonly]::-moz-range-thumb{--_n-range-thumb-color:var(--n-color-border);--_n-range-thumb-border-color:var(--n-color-border);box-shadow:none;cursor:default}.n-range:focus::-webkit-slider-thumb{--_n-range-thumb-border-color:var(--n-color-accent);box-shadow:var(--_n-range-thumb-focus-ring)}.n-range:focus::-moz-range-thumb{--_n-range-thumb-border-color:var(--n-color-accent);box-shadow:var(--_n-range-thumb-focus-ring)}`;let z=class extends(b(h(m(g(l(o)))))){constructor(){super(...arguments),this.direction=new p(this),this.min=0,this.max=10,this.step=1,this.expand=!1}render(){const r=Number(this.value)||0,n=Math.max(0,(r-this.min)/(this.max-this.min));return e`<div class="n-input-container">${this.renderLabel(e`<span class="n-range-output" aria-hidden="true">${r}</span>`)} <input ${t(this.focusableRef)} id="${this.inputId}" type="range" class="${i({"n-range":!0,"is-rtl":this.direction.isRTL})}" name="${c(this.name)}" min="${this.min}" step="${this.step}" max="${this.max}" style="${`--_n-range-progress: ${100*n}%`}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" .value="${this.value?this.value:"0"}" @input="${this.handleInput}" @change="${this.handleChange}" aria-describedby="${c(this.getDescribedBy())}" aria-invalid="${c(this.getInvalid())}"></div>${this.renderError()}`}handleInput(r){r.stopPropagation();const e=r.target;if(this.readonly)return r.preventDefault(),void(e.value=this.value);this.value=e.value,this.dispatchEvent(new d("input"))}};z.styles=[v,f,u,_],n([s()],z.prototype,"min",void 0),n([s()],z.prototype,"max",void 0),n([s()],z.prototype,"step",void 0),n([s({reflect:!0,type:Boolean})],z.prototype,"expand",void 0),z=n([a("nord-range")],z);var k=z;export{k as default};
+import{i as r,y as e,_ as n,e as a,s as o}from"./query-assigned-elements-cf502539.js";import{n as t}from"./ref-c44e9f3c.js";import{o as i}from"./class-map-21152cee.js";import{e as s}from"./property-03f59dce.js";import{l as c}from"./if-defined-720964c0.js";import{N as l}from"./events-d9666e88.js";import{F as d}from"./FocusableMixin-32631bff.js";import{F as b}from"./FormAssociatedMixin-9e798802.js";import{I as g}from"./InputMixin-7fa755e1.js";import{R as m,s as u}from"./TextField-55a08df5.js";import{A as h}from"./AutocompleteMixin-5163f8db.js";import{D as p}from"./DirectionController-8b298382.js";import{s as v}from"./Component-449e40fb.js";import{s as f}from"./FormField-3f772bad.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-d733c575.js";import"./VisuallyHidden.js";const _=r`:host{--_n-range-progress:0%;--_n-range-thumb-focus-ring:0 0 0 1px var(--n-color-accent);--_n-range-thumb-color:var(--n-color-text-on-accent);--_n-range-thumb-border-size:1px;--_n-range-thumb-border-color:var(--n-color-border-strong);--_n-range-gradient-direction:right;--_n-range-thumb-size:var(--n-range-thumb-size, 20px);--_n-range-track-color-active:var(--n-range-track-color-active, var(--n-color-accent));--_n-range-track-color-inactive:var(--n-range-track-color-inactive, var(--n-color-border-strong));--_n-range-track-size:var(--n-range-track-size, 3px)}.n-range{-webkit-appearance:none;appearance:none;inline-size:100%;background:linear-gradient(to var(--_n-range-gradient-direction),var(--_n-range-track-color-active) 0,var(--_n-range-track-color-active) var(--_n-range-progress),var(--_n-range-track-color-inactive) var(--_n-range-progress));border-radius:var(--n-border-radius-s)}.n-range.is-rtl{--_n-range-gradient-direction:left}.n-range::-webkit-slider-runnable-track{inline-size:100%;block-size:var(--_n-range-track-size)}.n-range::-webkit-slider-thumb{block-size:var(--_n-range-thumb-size);inline-size:var(--_n-range-thumb-size);box-shadow:var(--n-box-shadow),var(--n-box-shadow);border-radius:var(--n-border-radius-circle);background:var(--_n-range-thumb-color);border:var(--_n-range-thumb-border-size) solid var(--_n-range-thumb-border-color);cursor:pointer;-webkit-appearance:none;margin-block-start:calc(calc(var(--_n-range-thumb-size) - var(--_n-range-track-size))/ 2 * -1)}.n-range::-moz-range-track{border:var(--n-space-s) solid var(--n-color-surface);inline-size:100%;block-size:var(--_n-range-track-size)}.n-range::-moz-range-thumb{block-size:var(--_n-range-thumb-size);inline-size:var(--_n-range-thumb-size);box-shadow:var(--n-box-shadow);border-radius:var(--n-border-radius-circle);background:var(--_n-range-thumb-color);border:var(--_n-range-thumb-border-size) solid var(--_n-range-thumb-border-color);cursor:pointer;appearance:none;margin-block-start:calc(calc(var(--_n-range-thumb-size) - var(--_n-range-track-size))/ 2 * -1)}.n-label-container{margin-block-end:0;inline-size:100%}label{display:flex!important}.n-range-output{font-weight:var(--n-font-weight);color:var(--n-color-text-weaker);font-size:var(--n-font-size-m);margin-inline-start:auto}.n-range:focus{outline:0}.n-label-container:hover+.n-input-container .n-input:disabled,.n-range:disabled{opacity:.5}.n-range:disabled::-webkit-slider-thumb,.n-range[readonly]::-webkit-slider-thumb{--_n-range-thumb-color:var(--n-color-border);--_n-range-thumb-border-color:var(--n-color-border);box-shadow:none;cursor:default}.n-range:disabled::-moz-range-thumb,.n-range[readonly]::-moz-range-thumb{--_n-range-thumb-color:var(--n-color-border);--_n-range-thumb-border-color:var(--n-color-border);box-shadow:none;cursor:default}.n-range:focus::-webkit-slider-thumb{--_n-range-thumb-border-color:var(--n-color-accent);box-shadow:var(--_n-range-thumb-focus-ring)}.n-range:focus::-moz-range-thumb{--_n-range-thumb-border-color:var(--n-color-accent);box-shadow:var(--_n-range-thumb-focus-ring)}`;let z=class extends(b(h(m(g(d(o)))))){constructor(){super(...arguments),this.direction=new p(this),this.min=0,this.max=10,this.step=1,this.expand=!1}render(){const r=Number(this.value)||0,n=Math.max(0,(r-this.min)/(this.max-this.min));return e`<div class="n-input-container">${this.renderLabel(e`<span class="n-range-output" aria-hidden="true">${r}</span>`)} <input ${t(this.focusableRef)} id="${this.inputId}" type="range" class="${i({"n-range":!0,"is-rtl":this.direction.isRTL})}" name="${c(this.name)}" min="${this.min}" step="${this.step}" max="${this.max}" style="${`--_n-range-progress: ${100*n}%`}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" .value="${this.value?this.value:"0"}" @input="${this.handleInput}" @change="${this.handleChange}" aria-describedby="${c(this.getDescribedBy())}" aria-invalid="${c(this.getInvalid())}"></div>${this.renderError()}`}handleInput(r){r.stopPropagation();const e=r.target;if(this.readonly)return r.preventDefault(),void(e.value=this.value);this.value=e.value,this.dispatchEvent(new l("input"))}};z.styles=[v,f,u,_],n([s()],z.prototype,"min",void 0),n([s()],z.prototype,"max",void 0),n([s()],z.prototype,"step",void 0),n([s({reflect:!0,type:Boolean})],z.prototype,"expand",void 0),z=n([a("nord-range")],z);var k=z;export{k as default};
 //# sourceMappingURL=Range.js.map

package/lib/Select.js

@@ -1,2 +1,2 @@
-import{i as o,y as t,_ as e,e as n,s as r}from"./query-assigned-elements-89f41e17.js";import{e as i}from"./property-03f59dce.js";import{l as s}from"./if-defined-718a58b2.js";import{n as a}from"./ref-4265fcf9.js";import"./Button.js";import l from"./Icon.js";import{I as c}from"./InputMixin-1564ca2a.js";import{F as d}from"./FocusableMixin-fc1e2a13.js";import{F as p}from"./FormAssociatedMixin-ad4d6c08.js";import{A as u}from"./AutocompleteMixin-c8018288.js";import{S as b}from"./SizeMixin-9da6dc81.js";import{s as m}from"./Component-d4d6fa77.js";import{s as h}from"./FormField-c733b196.js";import{S as v}from"./SlotController-d733c575.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./LightDomController-3b7b1f44.js";import"./cond-8e7df9cf.js";import"./Spinner.js";import"./state-70f38ceb.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";import"./events-5337a6d7.js";import"./VisuallyHidden.js";var f=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m14.0864 12.0402 1.8138 1.8137-4.7724 4.7724c-.2573.2573-.5789.373-.9133.373-.33447 0-.65606-.1286-.91333-.373l-4.77238-4.7724 1.81377-1.8137 3.85904 3.859 3.8591-3.859zm-3.859-7.93687 3.859 3.85907 1.8138-1.81376-4.7724-4.77238c-.5017-.50168-1.31208-.50168-1.81376 0l-4.77238 4.77238 1.81376 1.81376 3.85908-3.85907z" fill="currentColor"/></svg>',title:"interface-dropdown-small",tags:"nordicon small interface dropdown select arrow up down caret triangle chevron"});const x=o`:host{--_n-select-block-size:var(--n-select-block-size, var(--n-space-xl))}.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--_n-select-block-size);inset-block-end:0;inset-inline-start:0;z-index:var(--n-index-default)}option{color:initial}nord-button{--n-button-text-align:start}nord-icon{color:var(--n-color-icon)}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button-hover))}.n-label-container:hover+.n-select-container nord-button nord-icon,select:hover+nord-button nord-icon{color:var(--n-color-icon-hover)}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}:host([disabled]) nord-button{--n-input-border-color:var(--n-color-active);--_n-button-color:var(--n-color-text-weakest);--_n-button-background-color:var(--n-color-active);--_n-button-opacity:1}:host([disabled]) nord-icon{color:var(--n-color-text-weakest)}::slotted(:not([slot])){display:none}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;l.registerIcon(f);let g=class extends(b(p(u(c(d(r)))))){constructor(){super(...arguments),this.defaultSlot=new v(this),this.inputId="select",this.expand=!1}get formValue(){return this.value||void 0}render(){const o=this.options,e=this.getButtonText(o);return t`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${a(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${s(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" autocomplete="${this.autocomplete}">${this.placeholder&&t`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${o.map((o=>this.renderOption(o)))}</select><nord-button size="${this.size}" tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="start" name="icon"></slot>${e}<nord-icon slot="end" name="interface-dropdown-small"></nord-icon></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(o){const t=o.find((o=>o.value===this.value.toString()));return t?t.text:this.placeholder?this.placeholder:o[0]?o[0].text:""}renderOption(o){return t`<option value="${s(o.value)}" ?disabled="${o.disabled}" .selected="${o.value===this.value.toString()}">${o.text}</option>`}};g.styles=[m,h,x],e([i({reflect:!0,type:Boolean})],g.prototype,"expand",void 0),g=e([n("nord-select")],g);var j=g;export{j as default};
+import{i as o,y as t,_ as e,e as n,s as r}from"./query-assigned-elements-cf502539.js";import{e as i}from"./property-03f59dce.js";import{l as s}from"./if-defined-720964c0.js";import{n as a}from"./ref-c44e9f3c.js";import"./Button.js";import l from"./Icon.js";import{I as d}from"./InputMixin-7fa755e1.js";import{F as c}from"./FocusableMixin-32631bff.js";import{F as p}from"./FormAssociatedMixin-9e798802.js";import{A as u}from"./AutocompleteMixin-5163f8db.js";import{S as b}from"./SizeMixin-4d04817d.js";import{s as m}from"./Component-449e40fb.js";import{s as h}from"./FormField-3f772bad.js";import{S as v}from"./SlotController-d733c575.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./LightDomController-052f446a.js";import"./cond-2da54107.js";import"./Spinner.js";import"./state-70f38ceb.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";var f=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m14.0864 12.0402 1.8138 1.8137-4.7724 4.7724c-.2573.2573-.5789.373-.9133.373-.33447 0-.65606-.1286-.91333-.373l-4.77238-4.7724 1.81377-1.8137 3.85904 3.859 3.8591-3.859zm-3.859-7.93687 3.859 3.85907 1.8138-1.81376-4.7724-4.77238c-.5017-.50168-1.31208-.50168-1.81376 0l-4.77238 4.77238 1.81376 1.81376 3.85908-3.85907z" fill="currentColor"/></svg>',title:"interface-dropdown-small",tags:"nordicon small interface dropdown select arrow up down caret triangle chevron"});const x=o`:host{--_n-select-block-size:var(--n-select-block-size, var(--n-space-xl))}.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--_n-select-block-size);inset-block-end:0;inset-inline-start:0;z-index:var(--n-index-default)}option{color:initial}nord-button{--n-button-text-align:start}nord-icon{color:var(--n-color-icon)}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button-hover))}.n-label-container:hover+.n-select-container nord-button nord-icon,select:hover+nord-button nord-icon{color:var(--n-color-icon-hover)}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}:host([disabled]) nord-button{--n-input-border-color:var(--n-color-active);--_n-button-color:var(--n-color-text-weakest);--_n-button-background-color:var(--n-color-active);--_n-button-opacity:1}:host([disabled]) nord-icon{color:var(--n-color-text-weakest)}::slotted(:not([slot])){display:none}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;l.registerIcon(f);let g=class extends(b(p(u(d(c(r)))))){constructor(){super(...arguments),this.defaultSlot=new v(this),this.inputId="select",this.expand=!1}get formValue(){return this.value||void 0}render(){const o=this.options,e=this.getButtonText(o);return t`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${a(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${s(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" autocomplete="${this.autocomplete}">${this.placeholder&&t`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${o.map((o=>this.renderOption(o)))}</select><nord-button size="${this.size}" tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="start" name="icon"></slot>${e}<nord-icon slot="end" name="interface-dropdown-small"></nord-icon></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(o){const t=o.find((o=>o.value===this.value.toString()));return t?t.text:this.placeholder?this.placeholder:o[0]?o[0].text:""}renderOption(o){return t`<option value="${s(o.value)}" ?disabled="${o.disabled}" .selected="${o.value===this.value.toString()}">${o.text}</option>`}};g.styles=[m,h,x],e([i({reflect:!0,type:Boolean})],g.prototype,"expand",void 0),g=e([n("nord-select")],g);var j=g;export{j as default};
 //# sourceMappingURL=Select.js.map

package/lib/SelectEvent.js

@@ -1,2 +1,2 @@
-import{N as e}from"./events-5337a6d7.js";class s extends e{constructor(e){super(s.eventName),this.command=e}}s.eventName="nord-select";export{s as SelectEvent};
+import{N as e}from"./events-d9666e88.js";class s extends e{constructor(e){super(s.eventName),this.command=e}}s.eventName="nord-select";export{s as SelectEvent};
 //# sourceMappingURL=SelectEvent.js.map

package/lib/{SizeMixin-9da6dc81.js → SizeMixin-4d04817d.js}

@@ -1,2 +1,2 @@
-import{_ as e}from"./query-assigned-elements-89f41e17.js";import{e as r}from"./property-03f59dce.js";function s(s){class t extends s{constructor(){super(...arguments),this.size="m"}}return e([r({reflect:!0})],t.prototype,"size",void 0),t}export{s as S};
-//# sourceMappingURL=SizeMixin-9da6dc81.js.map
+import{_ as e}from"./query-assigned-elements-cf502539.js";import{e as r}from"./property-03f59dce.js";function s(s){class t extends s{constructor(){super(...arguments),this.size="m"}}return e([r({reflect:!0})],t.prototype,"size",void 0),t}export{s as S};
+//# sourceMappingURL=SizeMixin-4d04817d.js.map

package/lib/{SizeMixin-9da6dc81.js.map → SizeMixin-4d04817d.js.map}

@@ -1 +1 @@
-{"version":3,"file":"SizeMixin-9da6dc81.js","sources":["../src/common/mixins/SizeMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { LitElement } from \"lit\"\nimport { property } from \"lit/decorators.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class SizeMixinInterface {\n  size: \"s\" | \"m\" | \"l\"\n}\n\nexport function SizeMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<SizeMixinInterface> & T {\n  class SizeElement extends superClass {\n    /**\n     * The size of the component.\n     */\n    @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n  }\n\n  return SizeElement\n}\n"],"names":["SizeMixin","superClass","SizeElement","constructor","this","size","__decorate","property","reflect","prototype"],"mappings":"qGAUM,SAAUA,EAA6CC,GAC3D,MAAMC,UAAoBD,EAA1BE,kCAI+BC,KAAIC,KAAoB,GACtD,EAED,OAH+BC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAmCN,EAAAO,UAAA,YAAA,GAGnDP,CACT"}
+{"version":3,"file":"SizeMixin-4d04817d.js","sources":["../src/common/mixins/SizeMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { LitElement } from \"lit\"\nimport { property } from \"lit/decorators.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class SizeMixinInterface {\n  size: \"s\" | \"m\" | \"l\"\n}\n\nexport function SizeMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<SizeMixinInterface> & T {\n  class SizeElement extends superClass {\n    /**\n     * The size of the component.\n     */\n    @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n  }\n\n  return SizeElement\n}\n"],"names":["SizeMixin","superClass","SizeElement","constructor","this","size","__decorate","property","reflect","prototype"],"mappings":"qGAUM,SAAUA,EAA6CC,GAC3D,MAAMC,UAAoBD,EAA1BE,kCAI+BC,KAAIC,KAAoB,GACtD,EAED,OAH+BC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAmCN,EAAAO,UAAA,YAAA,GAGnDP,CACT"}

package/lib/Skeleton.js

@@ -1,2 +1,2 @@
-import{i as e,_ as n,s as o,y as r,e as s}from"./query-assigned-elements-89f41e17.js";import{e as t}from"./property-03f59dce.js";import{s as a}from"./Component-d4d6fa77.js";const i=e`:host{--_n-skeleton-border-radius:var(--n-skeleton-border-radius, var(--n-border-radius));--_n-skeleton-color:var(--n-skeleton-color, var(--n-color-border));--_n-skeleton-sheen-color:var(--n-skeleton-sheen-color, var(--n-color-border-strong));--_n-skeleton-animation:none;position:relative}.n-skeleton{display:flex;inline-size:100%;block-size:100%;min-block-size:var(--n-space-m)}.n-skeleton-indicator{flex:1 1 auto;background:var(--_n-skeleton-color);border-radius:var(--_n-skeleton-border-radius);opacity:.6;animation:var(--_n-skeleton-animation)}:host([effect=sheen]) .n-skeleton-indicator{background:linear-gradient(270deg,var(--_n-skeleton-sheen-color),var(--_n-skeleton-color),var(--_n-skeleton-color),var(--_n-skeleton-sheen-color));background-position:200% 0;background-size:400% 100%}@media (prefers-reduced-motion:no-preference){:host([effect=pulse]){--_n-skeleton-animation:n-pulse 1s ease-in-out 0.5s infinite alternate}:host([effect=sheen]){--_n-skeleton-animation:n-sheen 5s ease-in-out infinite}}@keyframes n-pulse{to{opacity:.2}}@keyframes n-sheen{to{background-position:-200% 0}}`;let l=class extends o{render(){return r`<div class="n-skeleton" aria-hidden="true"><div class="n-skeleton-indicator"></div></div>`}};l.styles=[a,i],n([t({reflect:!0})],l.prototype,"effect",void 0),l=n([s("nord-skeleton")],l);var d=l;export{d as default};
+import{i as e,_ as n,s as o,y as r,e as s}from"./query-assigned-elements-cf502539.js";import{e as t}from"./property-03f59dce.js";import{s as a}from"./Component-449e40fb.js";const i=e`:host{--_n-skeleton-border-radius:var(--n-skeleton-border-radius, var(--n-border-radius));--_n-skeleton-color:var(--n-skeleton-color, var(--n-color-border));--_n-skeleton-sheen-color:var(--n-skeleton-sheen-color, var(--n-color-border-strong));--_n-skeleton-animation:none;position:relative}.n-skeleton{display:flex;inline-size:100%;block-size:100%;min-block-size:var(--n-space-m)}.n-skeleton-indicator{flex:1 1 auto;background:var(--_n-skeleton-color);border-radius:var(--_n-skeleton-border-radius);opacity:.6;animation:var(--_n-skeleton-animation)}:host([effect=sheen]) .n-skeleton-indicator{background:linear-gradient(270deg,var(--_n-skeleton-sheen-color),var(--_n-skeleton-color),var(--_n-skeleton-color),var(--_n-skeleton-sheen-color));background-position:200% 0;background-size:400% 100%}@media (prefers-reduced-motion:no-preference){:host([effect=pulse]){--_n-skeleton-animation:n-pulse 1s ease-in-out 0.5s infinite alternate}:host([effect=sheen]){--_n-skeleton-animation:n-sheen 5s ease-in-out infinite}}@keyframes n-pulse{to{opacity:.2}}@keyframes n-sheen{to{background-position:-200% 0}}`;let l=class extends o{render(){return r`<div class="n-skeleton" aria-hidden="true"><div class="n-skeleton-indicator"></div></div>`}};l.styles=[a,i],n([t({reflect:!0})],l.prototype,"effect",void 0),l=n([s("nord-skeleton")],l);var d=l;export{d as default};
 //# sourceMappingURL=Skeleton.js.map

package/lib/Spinner.js

@@ -1,2 +1,2 @@
-import{i as e,_ as n,s as r,y as s,e as i}from"./query-assigned-elements-89f41e17.js";import{e as o}from"./property-03f59dce.js";import{l as t}from"./if-defined-718a58b2.js";import{c as a}from"./cond-8e7df9cf.js";import{s as l}from"./Component-d4d6fa77.js";const c=e`:host{--_n-spinner-size:var(--n-size-icon-m);inline-size:var(--_n-spinner-size);block-size:var(--_n-spinner-size);display:inline-flex;position:relative;color:inherit}:host([size=xs]){--_n-spinner-size:var(--n-size-icon-xs)}:host([size="s"]){--_n-spinner-size:var(--n-size-icon-s)}:host([size="l"]){--_n-spinner-size:var(--n-size-icon-l)}:host([size=xl]){--_n-spinner-size:var(--n-size-icon-xl)}:host([size=xxl]){--_n-spinner-size:var(--n-size-icon-xxl)}.n-spinner,.n-spinner::after{position:absolute;inset-block-start:50%;inset-inline-start:50%;z-index:var(--n-index-spinner);transform:translateZ(0) translateX(-50%) translateY(-50%);transform-origin:0 0}.n-spinner{block-size:var(--_n-spinner-size);inline-size:var(--_n-spinner-size);font-size:var(--_n-spinner-size);color:var(--n-color-accent);border:.18em solid transparent;border-inline-start:.18em solid currentColor;border-radius:var(--n-border-radius-circle);animation:nRotate .66s linear infinite}.n-spinner::after{box-sizing:content-box;inline-size:100%;block-size:100%;overflow:hidden;content:"";border:.18em solid currentColor;border-radius:var(--n-border-radius-circle);opacity:.3}@keyframes nRotate{0%{transform:translateZ(0) rotate(0) translateX(-50%) translateY(-50%)}100%{transform:translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%)}}`;let p=class extends r{constructor(){super(...arguments),this.size="m"}render(){return s`<div class="n-spinner" role="${a(this.label,"img")}" aria-label="${t(this.label)}" style="${a(this.color,`color:${this.color}`)}"></div>`}};p.styles=[l,c],n([o({reflect:!0})],p.prototype,"size",void 0),n([o({reflect:!0})],p.prototype,"color",void 0),n([o({reflect:!0})],p.prototype,"label",void 0),p=n([i("nord-spinner")],p);var d=p;export{d as default};
+import{i as e,_ as n,s as r,y as s,e as i}from"./query-assigned-elements-cf502539.js";import{e as o}from"./property-03f59dce.js";import{l as t}from"./if-defined-720964c0.js";import{c as a}from"./cond-2da54107.js";import{s as l}from"./Component-449e40fb.js";const c=e`:host{--_n-spinner-size:var(--n-size-icon-m);inline-size:var(--_n-spinner-size);block-size:var(--_n-spinner-size);display:inline-flex;position:relative;color:inherit}:host([size=xs]){--_n-spinner-size:var(--n-size-icon-xs)}:host([size="s"]){--_n-spinner-size:var(--n-size-icon-s)}:host([size="l"]){--_n-spinner-size:var(--n-size-icon-l)}:host([size=xl]){--_n-spinner-size:var(--n-size-icon-xl)}:host([size=xxl]){--_n-spinner-size:var(--n-size-icon-xxl)}.n-spinner,.n-spinner::after{position:absolute;inset-block-start:50%;inset-inline-start:50%;z-index:var(--n-index-spinner);transform:translateZ(0) translateX(-50%) translateY(-50%);transform-origin:0 0}.n-spinner{block-size:var(--_n-spinner-size);inline-size:var(--_n-spinner-size);font-size:var(--_n-spinner-size);color:var(--n-color-accent);border:.18em solid transparent;border-inline-start:.18em solid currentColor;border-radius:var(--n-border-radius-circle);animation:nRotate .66s linear infinite}.n-spinner::after{box-sizing:content-box;inline-size:100%;block-size:100%;overflow:hidden;content:"";border:.18em solid currentColor;border-radius:var(--n-border-radius-circle);opacity:.3}@keyframes nRotate{0%{transform:translateZ(0) rotate(0) translateX(-50%) translateY(-50%)}100%{transform:translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%)}}`;let p=class extends r{constructor(){super(...arguments),this.size="m"}render(){return s`<div class="n-spinner" role="${a(this.label,"img")}" aria-label="${t(this.label)}" style="${a(this.color,`color:${this.color}`)}"></div>`}};p.styles=[l,c],n([o({reflect:!0})],p.prototype,"size",void 0),n([o({reflect:!0})],p.prototype,"color",void 0),n([o({reflect:!0})],p.prototype,"label",void 0),p=n([i("nord-spinner")],p);var d=p;export{d as default};
 //# sourceMappingURL=Spinner.js.map

package/lib/Stack.js

@@ -1,2 +1,2 @@
-import{i as t,_ as e,s,y as n,e as a}from"./query-assigned-elements-89f41e17.js";import{e as o}from"./property-03f59dce.js";import{s as i}from"./Component-d4d6fa77.js";const r=t`:host{--_n-stack-gap:var(--n-stack-gap, var(--n-space-m));display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;color:var(--n-color-text);gap:var(--_n-stack-gap);max-inline-size:100%;inline-size:100%}:host([direction=horizontal]){flex-direction:row}:host([wrap]){flex-wrap:wrap}@media (max-width:768px){:host([responsive]){flex-direction:column!important}}:host([align-items=center]){align-items:center}:host([align-items=start]){align-items:flex-start}:host([align-items=end]){align-items:flex-end}:host([justify-content=center]){justify-content:center}:host([justify-content=start]){justify-content:flex-start}:host([justify-content=end]){justify-content:flex-end}:host([justify-content=space-between]){justify-content:space-between}:host([justify-content=space-evenly]){justify-content:space-evenly}:host([justify-content=space-around]){justify-content:space-around}::slotted(*){margin:0!important;min-inline-size:0;max-inline-size:100%}:host([gap=none]){--_n-stack-gap:var(--n-stack-gap, 0)}:host([gap="s"]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-s))}:host([gap="m"]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-m))}:host([gap="l"]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-l))}:host([gap=xl]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-xl))}:host([gap=xxl]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-xxl))}`;let c=class extends s{constructor(){super(...arguments),this.gap="m",this.direction="vertical",this.alignItems="stretch",this.responsive=!1,this.wrap=!1}render(){return n`<slot></slot>`}};c.styles=[i,r],e([o({reflect:!0})],c.prototype,"gap",void 0),e([o({reflect:!0})],c.prototype,"direction",void 0),e([o({reflect:!0,attribute:"align-items"})],c.prototype,"alignItems",void 0),e([o({reflect:!0,type:Boolean})],c.prototype,"responsive",void 0),e([o({reflect:!0,type:Boolean})],c.prototype,"wrap",void 0),e([o({reflect:!0,attribute:"justify-content"})],c.prototype,"justifyContent",void 0),c=e([a("nord-stack")],c);var p=c;export{p as default};
+import{i as t,_ as e,s,y as n,e as a}from"./query-assigned-elements-cf502539.js";import{e as o}from"./property-03f59dce.js";import{s as i}from"./Component-449e40fb.js";const r=t`:host{--_n-stack-gap:var(--n-stack-gap, var(--n-space-m));display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;color:var(--n-color-text);gap:var(--_n-stack-gap);max-inline-size:100%;inline-size:100%}:host([direction=horizontal]){flex-direction:row}:host([wrap]){flex-wrap:wrap}@media (max-width:768px){:host([responsive]){flex-direction:column!important}}:host([align-items=center]){align-items:center}:host([align-items=start]){align-items:flex-start}:host([align-items=end]){align-items:flex-end}:host([justify-content=center]){justify-content:center}:host([justify-content=start]){justify-content:flex-start}:host([justify-content=end]){justify-content:flex-end}:host([justify-content=space-between]){justify-content:space-between}:host([justify-content=space-evenly]){justify-content:space-evenly}:host([justify-content=space-around]){justify-content:space-around}::slotted(*){margin:0!important;min-inline-size:0;max-inline-size:100%}:host([gap=none]){--_n-stack-gap:var(--n-stack-gap, 0)}:host([gap="s"]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-s))}:host([gap="m"]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-m))}:host([gap="l"]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-l))}:host([gap=xl]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-xl))}:host([gap=xxl]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-xxl))}`;let c=class extends s{constructor(){super(...arguments),this.gap="m",this.direction="vertical",this.alignItems="stretch",this.responsive=!1,this.wrap=!1}render(){return n`<slot></slot>`}};c.styles=[i,r],e([o({reflect:!0})],c.prototype,"gap",void 0),e([o({reflect:!0})],c.prototype,"direction",void 0),e([o({reflect:!0,attribute:"align-items"})],c.prototype,"alignItems",void 0),e([o({reflect:!0,type:Boolean})],c.prototype,"responsive",void 0),e([o({reflect:!0,type:Boolean})],c.prototype,"wrap",void 0),e([o({reflect:!0,attribute:"justify-content"})],c.prototype,"justifyContent",void 0),c=e([a("nord-stack")],c);var p=c;export{p as default};
 //# sourceMappingURL=Stack.js.map

package/lib/{Sticky-64b0b58a.js → Sticky-c4cf185e.js}

@@ -1,2 +1,2 @@
-import{i as t}from"./query-assigned-elements-89f41e17.js";const s=t`:host{--_n-sticky-size:0px;--_n-sticky-top:var(--n-sticky-top, 0px);--_n-sticky-index:var(--n-sticky-index, var(--n-index-sticky))}:host([sticky]) .n-sticky{position:sticky;inset-block-start:var(--_n-sticky-top);z-index:var(--_n-sticky-index)}:host([sticky])>*{--n-sticky-top:calc(var(--_n-sticky-top) + var(--_n-sticky-size));--n-sticky-index:calc(var(--_n-sticky-index) - 1)}`;export{s};
-//# sourceMappingURL=Sticky-64b0b58a.js.map
+import{i as t}from"./query-assigned-elements-cf502539.js";const s=t`:host{--_n-sticky-size:0px;--_n-sticky-top:var(--n-sticky-top, 0px);--_n-sticky-index:var(--n-sticky-index, var(--n-index-sticky))}:host([sticky]) .n-sticky{position:sticky;inset-block-start:var(--_n-sticky-top);z-index:var(--_n-sticky-index)}:host([sticky])>*{--n-sticky-top:calc(var(--_n-sticky-top) + var(--_n-sticky-size));--n-sticky-index:calc(var(--_n-sticky-index) - 1)}`;export{s};
+//# sourceMappingURL=Sticky-c4cf185e.js.map

package/lib/Sticky-c4cf185e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sticky-c4cf185e.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/lib/Tab.js

@@ -1,2 +1,2 @@
-import{i as t,_ as e,s as a,y as o,e as n}from"./query-assigned-elements-89f41e17.js";import{e as r}from"./property-03f59dce.js";import{o as s}from"./observe-a9c6dfb6.js";import{S as i}from"./SlotController-d733c575.js";import{s as l}from"./Component-d4d6fa77.js";import"./EventController-d99ebeef.js";const c=t`:host{--_n-tab-color:var(--n-tab-color, var(--n-color-text-weak));--_n-tab-font-weight:var(--n-tab-font-weight, var(--n-font-weight));--_n-tab-border:1px solid transparent;-webkit-user-select:none;user-select:none;cursor:pointer;padding:calc(var(--n-space-l)/ 2) calc(var(--n-space-s)/ 2);border-block-end:var(--_n-tab-border);transition:border var(--n-transition-quickly) ease}.n-tab{color:var(--_n-tab-color);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--n-font-size-m);font-weight:var(--_n-tab-font-weight);line-height:var(--n-line-height-form);border-radius:var(--n-border-radius-sharp);white-space:nowrap}.n-tab,.n-tab[data-text]:not([data-text=""])::before{font-weight:var(--_n-tab-font-weight)}.n-tab[data-text=""]{display:flex;gap:var(--n-space-s);align-items:center}.n-tab[data-text]:not([data-text=""]){text-align:center}.n-tab[data-text]:not([data-text=""])::before{content:attr(data-text);display:block;block-size:0;visibility:hidden}:host(:hover){--_n-tab-color:var(--n-tab-color, var(--n-color-text))}.n-tab[data-text]:not([data-text=""])::before,:host([aria-selected=true]){--_n-tab-color:var(--n-tab-color, var(--n-color-text-link));--_n-tab-font-weight:var(--n-tab-font-weight, var(--n-font-weight-active));--_n-tab-border:2px solid var(--n-color-text-link)}:host(:active){opacity:.8;transform:translateY(1px)}:host(:focus) .n-tab{box-shadow:0 0 0 2px var(--n-color-background),0 0 0 4px var(--n-color-text-link);outline:0}@supports selector(:focus-visible){:host(:focus) .n-tab{box-shadow:none}:host(:focus-visible) .n-tab{box-shadow:0 0 0 2px var(--n-color-background),0 0 0 4px var(--n-color-text-link)}}`;let d=class extends a{constructor(){super(...arguments),this.defaultSlot=new i(this),this.selected=!1}render(){return o`<div class="n-tab" data-text="${this.defaultSlot.isEmpty?this.textContent:""}"><slot></slot></div>`}handleSelectionChange(){this.setAttribute("aria-selected",`${this.selected}`),this.setAttribute("tabindex",this.selected?"0":"-1")}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tab")}};d.styles=[l,c],e([r({reflect:!0,type:Boolean})],d.prototype,"selected",void 0),e([s("selected")],d.prototype,"handleSelectionChange",null),d=e([n("nord-tab")],d);var b=d;export{b as default};
+import{i as t,_ as e,s as o,y as a,e as n}from"./query-assigned-elements-cf502539.js";import{e as r}from"./property-03f59dce.js";import{o as s}from"./observe-a9c6dfb6.js";import{S as i}from"./SlotController-d733c575.js";import{s as l}from"./Component-449e40fb.js";import"./EventController-d99ebeef.js";const c=t`:host{--_n-tab-color:var(--n-tab-color, var(--n-color-text-weak));--_n-tab-font-weight:var(--n-tab-font-weight, var(--n-font-weight));--_n-tab-border:1px solid transparent;-webkit-user-select:none;user-select:none;cursor:pointer;padding:calc(var(--n-space-l)/ 2) var(--n-space-xs);border-block-end:var(--_n-tab-border);transition:border var(--n-transition-quickly) ease}.n-tab{color:var(--_n-tab-color);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--n-font-size-m);font-weight:var(--_n-tab-font-weight);line-height:var(--n-line-height-form);border-radius:var(--n-border-radius-sharp);white-space:nowrap}.n-tab,.n-tab[data-text]:not([data-text=""])::before{font-weight:var(--_n-tab-font-weight)}.n-tab[data-text=""]{display:flex;gap:var(--n-space-s);align-items:center}.n-tab[data-text]:not([data-text=""]){text-align:center}.n-tab[data-text]:not([data-text=""])::before{content:attr(data-text);display:block;block-size:0;visibility:hidden}:host(:hover){--_n-tab-color:var(--n-tab-color, var(--n-color-text))}.n-tab[data-text]:not([data-text=""])::before,:host([aria-selected=true]){--_n-tab-color:var(--n-tab-color, var(--n-color-text-link));--_n-tab-font-weight:var(--n-tab-font-weight, var(--n-font-weight-active));--_n-tab-border:2px solid var(--n-color-text-link)}:host(:active){opacity:.8;transform:translateY(1px)}:host(:focus) .n-tab{box-shadow:0 0 0 2px var(--n-color-background),0 0 0 4px var(--n-color-text-link);outline:0}@supports selector(:focus-visible){:host(:focus) .n-tab{box-shadow:none}:host(:focus-visible) .n-tab{box-shadow:0 0 0 2px var(--n-color-background),0 0 0 4px var(--n-color-text-link)}}`;let b=class extends o{constructor(){super(...arguments),this.defaultSlot=new i(this),this.selected=!1}render(){return a`<div class="n-tab" data-text="${this.defaultSlot.isEmpty?this.textContent:""}"><slot></slot></div>`}handleSelectionChange(){this.setAttribute("aria-selected",`${this.selected}`),this.setAttribute("tabindex",this.selected?"0":"-1")}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tab")}};b.styles=[l,c],e([r({reflect:!0,type:Boolean})],b.prototype,"selected",void 0),e([s("selected")],b.prototype,"handleSelectionChange",null),b=e([n("nord-tab")],b);var d=b;export{d as default};
 //# sourceMappingURL=Tab.js.map

package/lib/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../src/tab/Tab.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Tab.css\"\n\n/**\n * The interactive tab button for use within the tab group component.\n *\n * @status ready\n * @category navigation\n * @slot - The tab button content.\n *\n * @cssprop [--n-tab-color=var(--n-color-text-weak)] - Controls the text color of the tab, using our [color tokens](/tokens/#color).\n * @cssprop [--n-tab-font-weight=var(--n-font-weight)] - Controls the font weight of the tab, using our [font tokens](/tokens/#font).\n */\n@customElement(\"nord-tab\")\nexport default class Tab extends LitElement {\n  static styles = [componentStyle, style]\n\n  private defaultSlot = new SlotController(this)\n\n  /**\n   * Whether the tab item is selected\n   */\n  @property({ reflect: true, type: Boolean }) selected: boolean = false\n\n  render() {\n    return html`<div class=\"n-tab\" data-text=\"${this.defaultSlot.isEmpty ? this.textContent : \"\"}\">\n      <slot></slot>\n    </div>`\n  }\n\n  /**\n   * Apply accessible attributes and values to the tab button.\n   * Observe the selected property if it changes\n   */\n  @observe(\"selected\")\n  protected handleSelectionChange() {\n    this.setAttribute(\"aria-selected\", `${this.selected}`)\n    this.setAttribute(\"tabindex\", this.selected ? \"0\" : \"-1\")\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute(\"role\", \"tab\")\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-tab\": Tab\n  }\n}\n"],"names":["Tab","LitElement","constructor","this","defaultSlot","SlotController","selected","render","html","isEmpty","textContent","handleSelectionChange","setAttribute","connectedCallback","super","styles","componentStyle","style","__decorate","property","reflect","type","Boolean","prototype","observe","customElement"],"mappings":"k8DAmBA,IAAqBA,EAArB,cAAiCC,EAAjCC,kCAGUC,KAAAC,YAAc,IAAIC,EAAeF,MAKGA,KAAQG,UAAY,CAsBjE,CApBCC,SACE,OAAOC,CAAI,iCAAiCL,KAAKC,YAAYK,QAAUN,KAAKO,YAAc,yBAG3F,CAOSC,wBACRR,KAAKS,aAAa,gBAAiB,GAAGT,KAAKG,YAC3CH,KAAKS,aAAa,WAAYT,KAAKG,SAAW,IAAM,KACrD,CAEDO,oBACEC,MAAMD,oBACNV,KAAKS,aAAa,OAAQ,MAC3B,GA5BMZ,EAAAe,OAAS,CAACC,EAAgBC,GAOWC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAoCtB,EAAAuB,UAAA,gBAAA,GAarEL,EAAA,CADCM,EAAQ,aAIRxB,EAAAuB,UAAA,wBAAA,MAxBkBvB,EAAGkB,EAAA,CADvBO,EAAc,aACMzB,SAAAA"}
+{"version":3,"file":"Tab.js","sources":["../src/tab/Tab.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Tab.css\"\n\n/**\n * The interactive tab button for use within the tab group component.\n *\n * @status ready\n * @category navigation\n * @slot - The tab button content.\n *\n * @cssprop [--n-tab-color=var(--n-color-text-weak)] - Controls the text color of the tab, using our [color tokens](/tokens/#color).\n * @cssprop [--n-tab-font-weight=var(--n-font-weight)] - Controls the font weight of the tab, using our [font tokens](/tokens/#font).\n */\n@customElement(\"nord-tab\")\nexport default class Tab extends LitElement {\n  static styles = [componentStyle, style]\n\n  private defaultSlot = new SlotController(this)\n\n  /**\n   * Whether the tab item is selected\n   */\n  @property({ reflect: true, type: Boolean }) selected: boolean = false\n\n  render() {\n    return html`<div class=\"n-tab\" data-text=\"${this.defaultSlot.isEmpty ? this.textContent : \"\"}\">\n      <slot></slot>\n    </div>`\n  }\n\n  /**\n   * Apply accessible attributes and values to the tab button.\n   * Observe the selected property if it changes\n   */\n  @observe(\"selected\")\n  protected handleSelectionChange() {\n    this.setAttribute(\"aria-selected\", `${this.selected}`)\n    this.setAttribute(\"tabindex\", this.selected ? \"0\" : \"-1\")\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute(\"role\", \"tab\")\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-tab\": Tab\n  }\n}\n"],"names":["Tab","LitElement","constructor","this","defaultSlot","SlotController","selected","render","html","isEmpty","textContent","handleSelectionChange","setAttribute","connectedCallback","super","styles","componentStyle","style","__decorate","property","reflect","type","Boolean","prototype","observe","customElement"],"mappings":"07DAmBA,IAAqBA,EAArB,cAAiCC,EAAjCC,kCAGUC,KAAAC,YAAc,IAAIC,EAAeF,MAKGA,KAAQG,UAAY,CAsBjE,CApBCC,SACE,OAAOC,CAAI,iCAAiCL,KAAKC,YAAYK,QAAUN,KAAKO,YAAc,yBAG3F,CAOSC,wBACRR,KAAKS,aAAa,gBAAiB,GAAGT,KAAKG,YAC3CH,KAAKS,aAAa,WAAYT,KAAKG,SAAW,IAAM,KACrD,CAEDO,oBACEC,MAAMD,oBACNV,KAAKS,aAAa,OAAQ,MAC3B,GA5BMZ,EAAAe,OAAS,CAACC,EAAgBC,GAOWC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAoCtB,EAAAuB,UAAA,gBAAA,GAarEL,EAAA,CADCM,EAAQ,aAIRxB,EAAAuB,UAAA,wBAAA,MAxBkBvB,EAAGkB,EAAA,CADvBO,EAAc,aACMzB,SAAAA"}

package/lib/TabGroup.js

@@ -1,2 +1,2 @@
-import{i as t,_ as e,s as r,y as a,e as s}from"./query-assigned-elements-89f41e17.js";import{e as o}from"./property-03f59dce.js";import{t as i}from"./state-70f38ceb.js";import{s as n}from"./Component-d4d6fa77.js";import{s as l}from"./Sticky-64b0b58a.js";import d from"./Tab.js";import{D as b}from"./DirectionController-8b298382.js";import"./observe-a9c6dfb6.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";const c=t`:host{--_n-tab-group-padding:var(--n-tab-group-padding, 0);--_n-tab-group-list-background:var(--n-color-background);--_n-tab-group-list-border:inset 0 -1px 0 0 var(--n-color-border);--_n-tab-group-list-shadow:var(--n-box-shadow-header);--_n-sticky-size:46px;border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}.n-tab-group-list{list-style:none;display:flex;overflow-x:auto;overflow-y:hidden;overscroll-behavior:none;box-shadow:var(--_n-tab-group-list-border);border-radius:var(--n-border-radius) var(--n-border-radius) 0 0;gap:var(--n-space-s);background-color:var(--_n-tab-group-list-background);background-image:radial-gradient(ellipse farthest-side at 0 50%,var(--n-color-border-strong) 0,var(--_n-tab-group-list-background)),radial-gradient(ellipse farthest-side at 100% 50%,var(--n-color-border-strong) 0,var(--_n-tab-group-list-background));background-repeat:no-repeat;background-position:0 calc(var(--n-space-s)/ 2),100% calc(var(--n-space-s)/ 2);background-size:var(--n-space-s) var(--n-space-xl),var(--n-space-s) var(--n-space-xl)}.n-tab-group-list::after,.n-tab-group-list::before{content:"";box-sizing:content-box;align-self:stretch;min-inline-size:var(--n-space-l);margin-block-end:1px}.n-tab-group-list::before{margin-inline-end:calc(-1 * (var(--n-space-l) + var(--n-space-s)));padding-inline-start:var(--_n-tab-group-padding)}.n-tab-group-list::after{margin-inline-start:calc(-1 * (var(--n-space-l) + var(--n-space-s)));padding-inline-end:var(--_n-tab-group-padding);flex:1}.n-tab-group-list::before,.n-tab-group.is-rtl .n-tab-group-list::after{box-shadow:inset var(--n-space-l) 0 var(--n-space-s) calc(-1 * var(--n-space-s)) var(--_n-tab-group-list-background)}.n-tab-group-list::after,.n-tab-group.is-rtl .n-tab-group-list::before{box-shadow:inset calc(-1 * var(--n-space-l)) 0 var(--n-space-s) calc(-1 * var(--n-space-s)) var(--_n-tab-group-list-background)}::slotted(nord-tab-panel){display:none;padding:var(--_n-tab-group-padding)}::slotted(nord-tab-panel[aria-hidden=false]){display:block}::slotted(nord-tab){z-index:var(--n-index-default)}:host([padding="m"]){--_n-tab-group-padding:var(--n-tab-group-padding, var(--n-space-m))}:host([padding="l"]){--_n-tab-group-padding:var(--n-tab-group-padding, var(--n-space-l))}:host([sticky]) .n-sticky{box-shadow:var(--_n-tab-group-list-border),var(--_n-tab-group-list-shadow);inset-inline:0;inset-block-end:auto}`;var p;let u=1,g=p=class extends r{constructor(){super(...arguments),this.direction=new b(this),this.tabGroupId="nord-tab-group-"+u++,this.label="",this.padding="m",this.sticky=!1,this.selectedTab=this.initialSelectedTab,this.handleMutation=t=>{t.forEach((t=>{var e,r;if("selected"===t.attributeName&&null===t.oldValue){const a=t.target;null===(e=this.observer)||void 0===e||e.disconnect(),this.updateSelectedTab(a),null===(r=this.observer)||void 0===r||r.observe(this,p.observerOptions)}}))}}render(){return a`<div class="n-tab-group is-${this.direction.dir}"><div class="n-tab-group-list n-sticky" role="tablist" aria-label="${this.label}" @click="${this.handleTabChange}" @keydown="${this.handleKeydown}"><slot name="tab"></slot></div><slot></slot></div>`}connectedCallback(){super.connectedCallback(),this.updateSlots()}updateSlots(){this.setupTabs(),this.setupPanels()}firstUpdated(){var t;this.observer=new MutationObserver(this.handleMutation),null===(t=this.observer)||void 0===t||t.observe(this,p.observerOptions)}get initialSelectedTab(){return this.querySelector("nord-tab[selected]")||this.querySelector("nord-tab")}setupTabs(){this.querySelectorAll("nord-tab").forEach(((t,e)=>{t.setAttribute("id",`${this.tabGroupId}-tab-${e+1}`),t.setAttribute("aria-controls",`${this.tabGroupId}-panel-${e+1}`),t.toggleAttribute("selected",t===this.selectedTab)}))}setupPanels(){var t;const e=this.querySelectorAll("nord-tab-panel"),r=null===(t=this.selectedTab)||void 0===t?void 0:t.getAttribute("aria-controls");e.forEach(((t,e)=>{t.setAttribute("id",`${this.tabGroupId}-panel-${e+1}`),t.setAttribute("aria-labelledby",`${this.tabGroupId}-tab-${e+1}`),t.setAttribute("aria-hidden",`${t.getAttribute("id")!==r}`)}))}handleTabChange(t){this.scrollTo({top:0}),t.target instanceof d&&t.target!==this.selectedTab&&this.updateSelectedTab(t.target)}previousTab(t){const e=[...this.querySelectorAll("nord-tab")],r=e.indexOf(t);return e[r-1]}handleKeydown(t){const e=t.target,r=this.querySelector("nord-tab:first-of-type"),a=this.querySelector("nord-tab:last-of-type"),s=this.querySelector(`#${e.getAttribute("id")} ~ nord-tab`)||r,o=this.previousTab(e)||a,i=(t,e)=>{e.preventDefault(),this.scrollTo({top:0}),this.updateSelectedTab(t)};switch(t.key){case"ArrowLeft":case"ArrowUp":i(this.direction.isLTR?o:s,t);break;case"ArrowRight":case"ArrowDown":i(this.direction.isLTR?s:o,t);break;case"Home":i(r,t);break;case"End":i(a,t)}}updateSelectedTab(t){const e=this.querySelector(`#${t.getAttribute("aria-controls")}`);t!==this.selectedTab&&(this.querySelectorAll("nord-tab").forEach((e=>{e.removeAttribute("selected"),e===t&&(e.setAttribute("selected",""),e.focus(),e.scrollIntoView({block:"nearest",inline:"nearest"}),this.selectedTab=e)})),this.querySelectorAll("nord-tab-panel").forEach((t=>{t.setAttribute("aria-hidden",`${t!==e}`)})))}};g.styles=[n,l,c],g.observerOptions={attributes:!0,subtree:!0,attributeFilter:["selected"],attributeOldValue:!0},e([o({reflect:!0})],g.prototype,"label",void 0),e([o({reflect:!0})],g.prototype,"padding",void 0),e([o({reflect:!0,type:Boolean})],g.prototype,"sticky",void 0),e([i()],g.prototype,"selectedTab",void 0),g=p=e([s("nord-tab-group")],g);var h=g;export{h as default};
+import{i as t,_ as e,s as r,y as a,e as s}from"./query-assigned-elements-cf502539.js";import{e as o}from"./property-03f59dce.js";import{t as i}from"./state-70f38ceb.js";import{s as n}from"./Component-449e40fb.js";import{s as l}from"./Sticky-c4cf185e.js";import d from"./Tab.js";import{D as b}from"./DirectionController-8b298382.js";import"./observe-a9c6dfb6.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";const c=t`:host{--_n-tab-group-padding:var(--n-tab-group-padding, 0);--_n-tab-group-list-background:var(--n-color-background);--_n-tab-group-list-border:inset 0 -1px 0 0 var(--n-color-border);--_n-tab-group-list-shadow:var(--n-box-shadow-header);--_n-sticky-size:46px;border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}.n-tab-group-list{list-style:none;display:flex;overflow-x:auto;overflow-y:hidden;overscroll-behavior:none;box-shadow:var(--_n-tab-group-list-border);border-radius:var(--n-border-radius) var(--n-border-radius) 0 0;gap:var(--n-space-s);background-color:var(--_n-tab-group-list-background);background-image:radial-gradient(ellipse farthest-side at 0 50%,var(--n-color-border-strong) 0,var(--_n-tab-group-list-background)),radial-gradient(ellipse farthest-side at 100% 50%,var(--n-color-border-strong) 0,var(--_n-tab-group-list-background));background-repeat:no-repeat;background-position:0 var(--n-space-xs),100% var(--n-space-xs);background-size:var(--n-space-s) var(--n-space-xl),var(--n-space-s) var(--n-space-xl)}.n-tab-group-list::after,.n-tab-group-list::before{content:"";box-sizing:content-box;align-self:stretch;min-inline-size:var(--n-space-l);margin-block-end:1px}.n-tab-group-list::before{margin-inline-end:calc(-1 * (var(--n-space-l) + var(--n-space-s)));padding-inline-start:var(--_n-tab-group-padding)}.n-tab-group-list::after{margin-inline-start:calc(-1 * (var(--n-space-l) + var(--n-space-s)));padding-inline-end:var(--_n-tab-group-padding);flex:1}.n-tab-group-list::before,.n-tab-group.is-rtl .n-tab-group-list::after{box-shadow:inset var(--n-space-l) 0 var(--n-space-s) calc(-1 * var(--n-space-s)) var(--_n-tab-group-list-background)}.n-tab-group-list::after,.n-tab-group.is-rtl .n-tab-group-list::before{box-shadow:inset calc(-1 * var(--n-space-l)) 0 var(--n-space-s) calc(-1 * var(--n-space-s)) var(--_n-tab-group-list-background)}::slotted(nord-tab-panel){display:none;padding:var(--_n-tab-group-padding)}::slotted(nord-tab-panel[aria-hidden=false]){display:block}::slotted(nord-tab){z-index:var(--n-index-default)}:host([padding="m"]){--_n-tab-group-padding:var(--n-tab-group-padding, var(--n-space-m))}:host([padding="l"]){--_n-tab-group-padding:var(--n-tab-group-padding, var(--n-space-l))}:host([sticky]) .n-sticky{box-shadow:var(--_n-tab-group-list-border),var(--_n-tab-group-list-shadow);inset-inline:0;inset-block-end:auto}`;var p;let u=1,g=p=class extends r{constructor(){super(...arguments),this.direction=new b(this),this.tabGroupId="nord-tab-group-"+u++,this.label="",this.padding="m",this.sticky=!1,this.selectedTab=this.initialSelectedTab,this.handleMutation=t=>{t.forEach((t=>{var e,r;if("selected"===t.attributeName&&null===t.oldValue){const a=t.target;null===(e=this.observer)||void 0===e||e.disconnect(),this.updateSelectedTab(a),null===(r=this.observer)||void 0===r||r.observe(this,p.observerOptions)}}))}}render(){return a`<div class="n-tab-group is-${this.direction.dir}"><div class="n-tab-group-list n-sticky" role="tablist" aria-label="${this.label}" @click="${this.handleTabChange}" @keydown="${this.handleKeydown}"><slot name="tab"></slot></div><slot></slot></div>`}connectedCallback(){super.connectedCallback(),this.updateSlots()}updateSlots(){this.setupTabs(),this.setupPanels()}firstUpdated(){var t;this.observer=new MutationObserver(this.handleMutation),null===(t=this.observer)||void 0===t||t.observe(this,p.observerOptions)}get initialSelectedTab(){return this.querySelector("nord-tab[selected]")||this.querySelector("nord-tab")}setupTabs(){this.querySelectorAll("nord-tab").forEach(((t,e)=>{t.setAttribute("id",`${this.tabGroupId}-tab-${e+1}`),t.setAttribute("aria-controls",`${this.tabGroupId}-panel-${e+1}`),t.toggleAttribute("selected",t===this.selectedTab)}))}setupPanels(){var t;const e=this.querySelectorAll("nord-tab-panel"),r=null===(t=this.selectedTab)||void 0===t?void 0:t.getAttribute("aria-controls");e.forEach(((t,e)=>{t.setAttribute("id",`${this.tabGroupId}-panel-${e+1}`),t.setAttribute("aria-labelledby",`${this.tabGroupId}-tab-${e+1}`),t.setAttribute("aria-hidden",`${t.getAttribute("id")!==r}`)}))}handleTabChange(t){this.scrollTo({top:0}),t.target instanceof d&&t.target!==this.selectedTab&&this.updateSelectedTab(t.target)}previousTab(t){const e=[...this.querySelectorAll("nord-tab")],r=e.indexOf(t);return e[r-1]}handleKeydown(t){const e=t.target,r=this.querySelector("nord-tab:first-of-type"),a=this.querySelector("nord-tab:last-of-type"),s=this.querySelector(`#${e.getAttribute("id")} ~ nord-tab`)||r,o=this.previousTab(e)||a,i=(t,e)=>{e.preventDefault(),this.scrollTo({top:0}),this.updateSelectedTab(t)};switch(t.key){case"ArrowLeft":case"ArrowUp":i(this.direction.isLTR?o:s,t);break;case"ArrowRight":case"ArrowDown":i(this.direction.isLTR?s:o,t);break;case"Home":i(r,t);break;case"End":i(a,t)}}updateSelectedTab(t){const e=this.querySelector(`#${t.getAttribute("aria-controls")}`);t!==this.selectedTab&&(this.querySelectorAll("nord-tab").forEach((e=>{e.removeAttribute("selected"),e===t&&(e.setAttribute("selected",""),e.focus(),e.scrollIntoView({block:"nearest",inline:"nearest"}),this.selectedTab=e)})),this.querySelectorAll("nord-tab-panel").forEach((t=>{t.setAttribute("aria-hidden",`${t!==e}`)})))}};g.styles=[n,l,c],g.observerOptions={attributes:!0,subtree:!0,attributeFilter:["selected"],attributeOldValue:!0},e([o({reflect:!0})],g.prototype,"label",void 0),e([o({reflect:!0})],g.prototype,"padding",void 0),e([o({reflect:!0,type:Boolean})],g.prototype,"sticky",void 0),e([i()],g.prototype,"selectedTab",void 0),g=p=e([s("nord-tab-group")],g);var h=g;export{h as default};
 //# sourceMappingURL=TabGroup.js.map

package/lib/TabGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabGroup.js","sources":["../src/tab-group/TabGroup.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport stickyStyle from \"../common/styles/Sticky.css\"\nimport style from \"./TabGroup.css\"\nimport Tab from \"../tab/Tab.js\"\n\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\n\nlet tabGroupCount = 1\n\n/**\n * Tab Group allows multiple panels to be contained within a single window,\n * using tabs as a navigational element.\n *\n * @status ready\n * @category navigation\n * @slot - The element which contains the content to be revealed.\n * @slot tab - The element which contains all tabs to reveal tabbed content.\n *\n * @cssprop [--n-tab-group-padding=0] - Controls the padding around the tab group (including the tab list), using our [spacing tokens](/tokens/#space).\n */\n@customElement(\"nord-tab-group\")\nexport default class TabGroup extends LitElement {\n  static styles = [componentStyle, stickyStyle, style]\n\n  private direction = new DirectionController(this)\n\n  private observer?: MutationObserver\n\n  private static observerOptions = {\n    attributes: true,\n    subtree: true,\n    attributeFilter: [\"selected\"],\n    attributeOldValue: true,\n  }\n\n  /**\n   * Unique ID for each tab group component present.\n   */\n  private tabGroupId = `nord-tab-group-${tabGroupCount++}`\n\n  /**\n   * Adds an accessible label to the tab list container.\n   */\n  @property({ reflect: true }) label: string = \"\"\n\n  /**\n   * Controls the padding of the tab group component.\n   */\n  @property({ reflect: true }) padding?: \"m\" | \"l\" | \"none\" = \"m\"\n\n  /**\n   * Whether the tab list sticks to the top of the tab group as you scroll.\n   */\n  @property({ reflect: true, type: Boolean }) sticky: boolean = false\n\n  /**\n   * The current tab node selected in the tab group.\n   */\n  @state() private selectedTab = this.initialSelectedTab\n\n  render() {\n    return html`\n      <div class=\"n-tab-group is-${this.direction.dir}\">\n        <div\n          class=\"n-tab-group-list n-sticky\"\n          role=\"tablist\"\n          aria-label=\"${this.label}\"\n          @click=${this.handleTabChange}\n          @keydown=${this.handleKeydown}\n        >\n          <slot name=\"tab\"></slot>\n        </div>\n        <slot></slot>\n      </div>\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.updateSlots()\n  }\n\n  private updateSlots() {\n    this.setupTabs()\n    this.setupPanels()\n  }\n\n  firstUpdated() {\n    this.observer = new MutationObserver(this.handleMutation)\n    this.observer?.observe(this, TabGroup.observerOptions)\n  }\n\n  /**\n   * If the selected tab is selected programmatically update all the tabs.\n   */\n  private handleMutation = (mutations: MutationRecord[]) => {\n    mutations.forEach(mutation => {\n      if (mutation.attributeName === \"selected\" && mutation.oldValue === null) {\n        const selectedTab = <Tab>mutation.target\n        this.observer?.disconnect()\n        this.updateSelectedTab(selectedTab)\n        this.observer?.observe(this, TabGroup.observerOptions)\n      }\n    })\n  }\n\n  /**\n   * Get the selected tab button, or the first tab button.\n   */\n  private get initialSelectedTab() {\n    return this.querySelector(\"nord-tab[selected]\") || this.querySelector(\"nord-tab\")\n  }\n\n  /**\n   * Apply accessible attributes and values to the tab buttons.\n   */\n  private setupTabs() {\n    const tabs = this.querySelectorAll(\"nord-tab\")\n\n    tabs.forEach((tab, index) => {\n      tab.setAttribute(\"id\", `${this.tabGroupId}-tab-${index + 1}`)\n      tab.setAttribute(\"aria-controls\", `${this.tabGroupId}-panel-${index + 1}`)\n      tab.toggleAttribute(\"selected\", tab === this.selectedTab)\n    })\n  }\n\n  /**\n   * Apply accessible attributes and values to the tab panels.\n   */\n  private setupPanels() {\n    const panels = this.querySelectorAll(\"nord-tab-panel\")\n    const selectedPanelId = this.selectedTab?.getAttribute(\"aria-controls\")\n\n    panels.forEach((panel, index) => {\n      panel.setAttribute(\"id\", `${this.tabGroupId}-panel-${index + 1}`)\n      panel.setAttribute(\"aria-labelledby\", `${this.tabGroupId}-tab-${index + 1}`)\n      panel.setAttribute(\"aria-hidden\", `${panel.getAttribute(\"id\") !== selectedPanelId}`)\n    })\n  }\n\n  private handleTabChange(event: Event) {\n    // Always reset the scroll when a tab is selected.\n    this.scrollTo({ top: 0 })\n\n    /**\n     * Return handler if it's not a tab or if it's already selected\n     */\n    if (!(event.target instanceof Tab) || event.target === this.selectedTab) return\n\n    this.updateSelectedTab(event.target)\n  }\n\n  /**\n   * Get the previous tab button in the tab group\n   */\n  private previousTab(tab: Tab) {\n    const tabs = [...this.querySelectorAll(\"nord-tab\")]\n    const selectedTabIndex = tabs.indexOf(tab)\n    return tabs[selectedTabIndex - 1]\n  }\n\n  /**\n   * Handle keyboard accessible controls.\n   */\n  private handleKeydown(event: KeyboardEvent) {\n    const tab = <Tab>event.target\n\n    const firstTab = <Tab>this.querySelector(\"nord-tab:first-of-type\")\n    const lastTab = <Tab>this.querySelector(\"nord-tab:last-of-type\")\n    const nextTab = <Tab>this.querySelector(`#${tab.getAttribute(\"id\")} ~ nord-tab`) || firstTab\n    const previousTab = <Tab>this.previousTab(tab) || lastTab\n\n    const updateTab = (selectedTab: Tab, keyEvent: Event) => {\n      keyEvent.preventDefault()\n\n      // Always reset the scroll when a tab is selected.\n      this.scrollTo({ top: 0 })\n      this.updateSelectedTab(selectedTab)\n    }\n\n    switch (event.key) {\n      case \"ArrowLeft\":\n      case \"ArrowUp\":\n        updateTab(this.direction.isLTR ? previousTab : nextTab, event)\n        break\n\n      case \"ArrowRight\":\n      case \"ArrowDown\":\n        updateTab(this.direction.isLTR ? nextTab : previousTab, event)\n        break\n\n      case \"Home\":\n        updateTab(firstTab, event)\n        break\n\n      case \"End\":\n        updateTab(lastTab, event)\n        break\n\n      default:\n        break\n    }\n  }\n\n  /**\n   * Update the selected tab button with attributes and values.\n   * Update the tab group state.\n   */\n  private updateSelectedTab(selectedTab: Tab) {\n    const selectedPanel = this.querySelector(`#${selectedTab.getAttribute(\"aria-controls\")}`)\n\n    if (selectedTab === this.selectedTab) return\n\n    /**\n     * Reset all the selected state of the tabs, and select the clicked tab\n     */\n    this.querySelectorAll(\"nord-tab\").forEach(tab => {\n      tab.removeAttribute(\"selected\")\n      if (tab === selectedTab) {\n        tab.setAttribute(\"selected\", \"\")\n        tab.focus()\n        tab.scrollIntoView({ block: \"nearest\", inline: \"nearest\" })\n        this.selectedTab = tab\n      }\n    })\n\n    /**\n     * Reset all the visibility of the panels,\n     * and show the panel related to the selected tab\n     */\n    this.querySelectorAll(\"nord-tab-panel\").forEach(panel => {\n      panel.setAttribute(\"aria-hidden\", `${panel !== selectedPanel}`)\n    })\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-tab-group\": TabGroup\n  }\n}\n"],"names":["tabGroupCount","TabGroup","TabGroup_1","LitElement","constructor","this","direction","DirectionController","tabGroupId","label","padding","sticky","selectedTab","initialSelectedTab","handleMutation","mutations","forEach","mutation","attributeName","oldValue","target","_a","observer","disconnect","updateSelectedTab","_b","observe","observerOptions","render","html","dir","handleTabChange","handleKeydown","connectedCallback","super","updateSlots","setupTabs","setupPanels","firstUpdated","MutationObserver","querySelector","querySelectorAll","tab","index","setAttribute","toggleAttribute","panels","selectedPanelId","getAttribute","panel","event","scrollTo","top","Tab","previousTab","tabs","selectedTabIndex","indexOf","firstTab","lastTab","nextTab","updateTab","keyEvent","preventDefault","key","isLTR","selectedPanel","removeAttribute","focus","scrollIntoView","block","inline","styles","componentStyle","stickyStyle","style","attributes","subtree","attributeFilter","attributeOldValue","__decorate","property","reflect","prototype","type","Boolean","state","customElement"],"mappings":"0xFAUA,IAAIA,EAAgB,EAcCC,EAAQC,EAA7B,cAAsCC,EAAtCC,kCAGUC,KAAAC,UAAY,IAAIC,EAAoBF,MAcpCA,KAAAG,WAAa,kBAAkBR,IAKVK,KAAKI,MAAW,GAKhBJ,KAAOK,QAAwB,IAKhBL,KAAMM,QAAY,EAK7CN,KAAAO,YAAcP,KAAKQ,mBAqC5BR,KAAAS,eAAkBC,IACxBA,EAAUC,SAAQC,YAChB,GAA+B,aAA3BA,EAASC,eAAsD,OAAtBD,EAASE,SAAmB,CACvE,MAAMP,EAAmBK,EAASG,OACnB,QAAfC,EAAAhB,KAAKiB,gBAAU,IAAAD,GAAAA,EAAAE,aACflB,KAAKmB,kBAAkBZ,GACV,QAAba,EAAApB,KAAKiB,gBAAQ,IAAAG,GAAAA,EAAEC,QAAQrB,KAAMH,EAASyB,gBACvC,IACD,CAmIL,CA9KCC,SACE,OAAOC,CAAI,8BACoBxB,KAAKC,UAAUwB,0EAI1BzB,KAAKI,kBACVJ,KAAK0B,8BACH1B,KAAK2B,kEAOvB,CAEDC,oBACEC,MAAMD,oBACN5B,KAAK8B,aACN,CAEOA,cACN9B,KAAK+B,YACL/B,KAAKgC,aACN,CAEDC,qBACEjC,KAAKiB,SAAW,IAAIiB,iBAAiBlC,KAAKS,gBAC7B,QAAbO,EAAAhB,KAAKiB,gBAAQ,IAAAD,GAAAA,EAAEK,QAAQrB,KAAMH,EAASyB,gBACvC,CAmBWd,yBACV,OAAOR,KAAKmC,cAAc,uBAAyBnC,KAAKmC,cAAc,WACvE,CAKOJ,YACO/B,KAAKoC,iBAAiB,YAE9BzB,SAAQ,CAAC0B,EAAKC,KACjBD,EAAIE,aAAa,KAAM,GAAGvC,KAAKG,kBAAkBmC,EAAQ,KACzDD,EAAIE,aAAa,gBAAiB,GAAGvC,KAAKG,oBAAoBmC,EAAQ,KACtED,EAAIG,gBAAgB,WAAYH,IAAQrC,KAAKO,YAAY,GAE5D,CAKOyB,oBACN,MAAMS,EAASzC,KAAKoC,iBAAiB,kBAC/BM,EAAkC,QAAhB1B,EAAAhB,KAAKO,mBAAW,IAAAS,OAAA,EAAAA,EAAE2B,aAAa,iBAEvDF,EAAO9B,SAAQ,CAACiC,EAAON,KACrBM,EAAML,aAAa,KAAM,GAAGvC,KAAKG,oBAAoBmC,EAAQ,KAC7DM,EAAML,aAAa,kBAAmB,GAAGvC,KAAKG,kBAAkBmC,EAAQ,KACxEM,EAAML,aAAa,cAAe,GAAGK,EAAMD,aAAa,QAAUD,IAAkB,GAEvF,CAEOhB,gBAAgBmB,GAEtB7C,KAAK8C,SAAS,CAAEC,IAAK,IAKfF,EAAM9B,kBAAkBiC,GAAQH,EAAM9B,SAAWf,KAAKO,aAE5DP,KAAKmB,kBAAkB0B,EAAM9B,OAC9B,CAKOkC,YAAYZ,GAClB,MAAMa,EAAO,IAAIlD,KAAKoC,iBAAiB,aACjCe,EAAmBD,EAAKE,QAAQf,GACtC,OAAOa,EAAKC,EAAmB,EAChC,CAKOxB,cAAckB,GACpB,MAAMR,EAAWQ,EAAM9B,OAEjBsC,EAAgBrD,KAAKmC,cAAc,0BACnCmB,EAAetD,KAAKmC,cAAc,yBAClCoB,EAAevD,KAAKmC,cAAc,IAAIE,EAAIM,aAAa,qBAAuBU,EAC9EJ,EAAmBjD,KAAKiD,YAAYZ,IAAQiB,EAE5CE,EAAY,CAACjD,EAAkBkD,KACnCA,EAASC,iBAGT1D,KAAK8C,SAAS,CAAEC,IAAK,IACrB/C,KAAKmB,kBAAkBZ,EAAY,EAGrC,OAAQsC,EAAMc,KACZ,IAAK,YACL,IAAK,UACHH,EAAUxD,KAAKC,UAAU2D,MAAQX,EAAcM,EAASV,GACxD,MAEF,IAAK,aACL,IAAK,YACHW,EAAUxD,KAAKC,UAAU2D,MAAQL,EAAUN,EAAaJ,GACxD,MAEF,IAAK,OACHW,EAAUH,EAAUR,GACpB,MAEF,IAAK,MACHW,EAAUF,EAAST,GAMxB,CAMO1B,kBAAkBZ,GACxB,MAAMsD,EAAgB7D,KAAKmC,cAAc,IAAI5B,EAAYoC,aAAa,oBAElEpC,IAAgBP,KAAKO,cAKzBP,KAAKoC,iBAAiB,YAAYzB,SAAQ0B,IACxCA,EAAIyB,gBAAgB,YAChBzB,IAAQ9B,IACV8B,EAAIE,aAAa,WAAY,IAC7BF,EAAI0B,QACJ1B,EAAI2B,eAAe,CAAEC,MAAO,UAAWC,OAAQ,YAC/ClE,KAAKO,YAAc8B,EACpB,IAOHrC,KAAKoC,iBAAiB,kBAAkBzB,SAAQiC,IAC9CA,EAAML,aAAa,cAAe,GAAGK,IAAUiB,IAAgB,IAElE,GAnNMjE,EAAMuE,OAAG,CAACC,EAAgBC,EAAaC,GAM/B1E,EAAA0B,gBAAkB,CAC/BiD,YAAY,EACZC,SAAS,EACTC,gBAAiB,CAAC,YAClBC,mBAAmB,GAWQC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA0BjF,EAAAkF,UAAA,aAAA,GAKlBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA0CjF,EAAAkF,UAAA,eAAA,GAKnBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAkCpF,EAAAkF,UAAA,cAAA,GAK1DH,EAAA,CAARM,KAAqDrF,EAAAkF,UAAA,mBAAA,GArCnClF,EAAQC,EAAA8E,EAAA,CAD5BO,EAAc,mBACMtF,SAAAA"}
+{"version":3,"file":"TabGroup.js","sources":["../src/tab-group/TabGroup.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport stickyStyle from \"../common/styles/Sticky.css\"\nimport style from \"./TabGroup.css\"\nimport Tab from \"../tab/Tab.js\"\n\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\n\nlet tabGroupCount = 1\n\n/**\n * Tab Group allows multiple panels to be contained within a single window,\n * using tabs as a navigational element.\n *\n * @status ready\n * @category navigation\n * @slot - The element which contains the content to be revealed.\n * @slot tab - The element which contains all tabs to reveal tabbed content.\n *\n * @cssprop [--n-tab-group-padding=0] - Controls the padding around the tab group (including the tab list), using our [spacing tokens](/tokens/#space).\n */\n@customElement(\"nord-tab-group\")\nexport default class TabGroup extends LitElement {\n  static styles = [componentStyle, stickyStyle, style]\n\n  private direction = new DirectionController(this)\n\n  private observer?: MutationObserver\n\n  private static observerOptions = {\n    attributes: true,\n    subtree: true,\n    attributeFilter: [\"selected\"],\n    attributeOldValue: true,\n  }\n\n  /**\n   * Unique ID for each tab group component present.\n   */\n  private tabGroupId = `nord-tab-group-${tabGroupCount++}`\n\n  /**\n   * Adds an accessible label to the tab list container.\n   */\n  @property({ reflect: true }) label: string = \"\"\n\n  /**\n   * Controls the padding of the tab group component.\n   */\n  @property({ reflect: true }) padding?: \"m\" | \"l\" | \"none\" = \"m\"\n\n  /**\n   * Whether the tab list sticks to the top of the tab group as you scroll.\n   */\n  @property({ reflect: true, type: Boolean }) sticky: boolean = false\n\n  /**\n   * The current tab node selected in the tab group.\n   */\n  @state() private selectedTab = this.initialSelectedTab\n\n  render() {\n    return html`\n      <div class=\"n-tab-group is-${this.direction.dir}\">\n        <div\n          class=\"n-tab-group-list n-sticky\"\n          role=\"tablist\"\n          aria-label=\"${this.label}\"\n          @click=${this.handleTabChange}\n          @keydown=${this.handleKeydown}\n        >\n          <slot name=\"tab\"></slot>\n        </div>\n        <slot></slot>\n      </div>\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.updateSlots()\n  }\n\n  private updateSlots() {\n    this.setupTabs()\n    this.setupPanels()\n  }\n\n  firstUpdated() {\n    this.observer = new MutationObserver(this.handleMutation)\n    this.observer?.observe(this, TabGroup.observerOptions)\n  }\n\n  /**\n   * If the selected tab is selected programmatically update all the tabs.\n   */\n  private handleMutation = (mutations: MutationRecord[]) => {\n    mutations.forEach(mutation => {\n      if (mutation.attributeName === \"selected\" && mutation.oldValue === null) {\n        const selectedTab = <Tab>mutation.target\n        this.observer?.disconnect()\n        this.updateSelectedTab(selectedTab)\n        this.observer?.observe(this, TabGroup.observerOptions)\n      }\n    })\n  }\n\n  /**\n   * Get the selected tab button, or the first tab button.\n   */\n  private get initialSelectedTab() {\n    return this.querySelector(\"nord-tab[selected]\") || this.querySelector(\"nord-tab\")\n  }\n\n  /**\n   * Apply accessible attributes and values to the tab buttons.\n   */\n  private setupTabs() {\n    const tabs = this.querySelectorAll(\"nord-tab\")\n\n    tabs.forEach((tab, index) => {\n      tab.setAttribute(\"id\", `${this.tabGroupId}-tab-${index + 1}`)\n      tab.setAttribute(\"aria-controls\", `${this.tabGroupId}-panel-${index + 1}`)\n      tab.toggleAttribute(\"selected\", tab === this.selectedTab)\n    })\n  }\n\n  /**\n   * Apply accessible attributes and values to the tab panels.\n   */\n  private setupPanels() {\n    const panels = this.querySelectorAll(\"nord-tab-panel\")\n    const selectedPanelId = this.selectedTab?.getAttribute(\"aria-controls\")\n\n    panels.forEach((panel, index) => {\n      panel.setAttribute(\"id\", `${this.tabGroupId}-panel-${index + 1}`)\n      panel.setAttribute(\"aria-labelledby\", `${this.tabGroupId}-tab-${index + 1}`)\n      panel.setAttribute(\"aria-hidden\", `${panel.getAttribute(\"id\") !== selectedPanelId}`)\n    })\n  }\n\n  private handleTabChange(event: Event) {\n    // Always reset the scroll when a tab is selected.\n    this.scrollTo({ top: 0 })\n\n    /**\n     * Return handler if it's not a tab or if it's already selected\n     */\n    if (!(event.target instanceof Tab) || event.target === this.selectedTab) return\n\n    this.updateSelectedTab(event.target)\n  }\n\n  /**\n   * Get the previous tab button in the tab group\n   */\n  private previousTab(tab: Tab) {\n    const tabs = [...this.querySelectorAll(\"nord-tab\")]\n    const selectedTabIndex = tabs.indexOf(tab)\n    return tabs[selectedTabIndex - 1]\n  }\n\n  /**\n   * Handle keyboard accessible controls.\n   */\n  private handleKeydown(event: KeyboardEvent) {\n    const tab = <Tab>event.target\n\n    const firstTab = <Tab>this.querySelector(\"nord-tab:first-of-type\")\n    const lastTab = <Tab>this.querySelector(\"nord-tab:last-of-type\")\n    const nextTab = <Tab>this.querySelector(`#${tab.getAttribute(\"id\")} ~ nord-tab`) || firstTab\n    const previousTab = <Tab>this.previousTab(tab) || lastTab\n\n    const updateTab = (selectedTab: Tab, keyEvent: Event) => {\n      keyEvent.preventDefault()\n\n      // Always reset the scroll when a tab is selected.\n      this.scrollTo({ top: 0 })\n      this.updateSelectedTab(selectedTab)\n    }\n\n    switch (event.key) {\n      case \"ArrowLeft\":\n      case \"ArrowUp\":\n        updateTab(this.direction.isLTR ? previousTab : nextTab, event)\n        break\n\n      case \"ArrowRight\":\n      case \"ArrowDown\":\n        updateTab(this.direction.isLTR ? nextTab : previousTab, event)\n        break\n\n      case \"Home\":\n        updateTab(firstTab, event)\n        break\n\n      case \"End\":\n        updateTab(lastTab, event)\n        break\n\n      default:\n        break\n    }\n  }\n\n  /**\n   * Update the selected tab button with attributes and values.\n   * Update the tab group state.\n   */\n  private updateSelectedTab(selectedTab: Tab) {\n    const selectedPanel = this.querySelector(`#${selectedTab.getAttribute(\"aria-controls\")}`)\n\n    if (selectedTab === this.selectedTab) return\n\n    /**\n     * Reset all the selected state of the tabs, and select the clicked tab\n     */\n    this.querySelectorAll(\"nord-tab\").forEach(tab => {\n      tab.removeAttribute(\"selected\")\n      if (tab === selectedTab) {\n        tab.setAttribute(\"selected\", \"\")\n        tab.focus()\n        tab.scrollIntoView({ block: \"nearest\", inline: \"nearest\" })\n        this.selectedTab = tab\n      }\n    })\n\n    /**\n     * Reset all the visibility of the panels,\n     * and show the panel related to the selected tab\n     */\n    this.querySelectorAll(\"nord-tab-panel\").forEach(panel => {\n      panel.setAttribute(\"aria-hidden\", `${panel !== selectedPanel}`)\n    })\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-tab-group\": TabGroup\n  }\n}\n"],"names":["tabGroupCount","TabGroup","TabGroup_1","LitElement","constructor","this","direction","DirectionController","tabGroupId","label","padding","sticky","selectedTab","initialSelectedTab","handleMutation","mutations","forEach","mutation","attributeName","oldValue","target","_a","observer","disconnect","updateSelectedTab","_b","observe","observerOptions","render","html","dir","handleTabChange","handleKeydown","connectedCallback","super","updateSlots","setupTabs","setupPanels","firstUpdated","MutationObserver","querySelector","querySelectorAll","tab","index","setAttribute","toggleAttribute","panels","selectedPanelId","getAttribute","panel","event","scrollTo","top","Tab","previousTab","tabs","selectedTabIndex","indexOf","firstTab","lastTab","nextTab","updateTab","keyEvent","preventDefault","key","isLTR","selectedPanel","removeAttribute","focus","scrollIntoView","block","inline","styles","componentStyle","stickyStyle","style","attributes","subtree","attributeFilter","attributeOldValue","__decorate","property","reflect","prototype","type","Boolean","state","customElement"],"mappings":"0wFAUA,IAAIA,EAAgB,EAcCC,EAAQC,EAA7B,cAAsCC,EAAtCC,kCAGUC,KAAAC,UAAY,IAAIC,EAAoBF,MAcpCA,KAAAG,WAAa,kBAAkBR,IAKVK,KAAKI,MAAW,GAKhBJ,KAAOK,QAAwB,IAKhBL,KAAMM,QAAY,EAK7CN,KAAAO,YAAcP,KAAKQ,mBAqC5BR,KAAAS,eAAkBC,IACxBA,EAAUC,SAAQC,YAChB,GAA+B,aAA3BA,EAASC,eAAsD,OAAtBD,EAASE,SAAmB,CACvE,MAAMP,EAAmBK,EAASG,OACnB,QAAfC,EAAAhB,KAAKiB,gBAAU,IAAAD,GAAAA,EAAAE,aACflB,KAAKmB,kBAAkBZ,GACV,QAAba,EAAApB,KAAKiB,gBAAQ,IAAAG,GAAAA,EAAEC,QAAQrB,KAAMH,EAASyB,gBACvC,IACD,CAmIL,CA9KCC,SACE,OAAOC,CAAI,8BACoBxB,KAAKC,UAAUwB,0EAI1BzB,KAAKI,kBACVJ,KAAK0B,8BACH1B,KAAK2B,kEAOvB,CAEDC,oBACEC,MAAMD,oBACN5B,KAAK8B,aACN,CAEOA,cACN9B,KAAK+B,YACL/B,KAAKgC,aACN,CAEDC,qBACEjC,KAAKiB,SAAW,IAAIiB,iBAAiBlC,KAAKS,gBAC7B,QAAbO,EAAAhB,KAAKiB,gBAAQ,IAAAD,GAAAA,EAAEK,QAAQrB,KAAMH,EAASyB,gBACvC,CAmBWd,yBACV,OAAOR,KAAKmC,cAAc,uBAAyBnC,KAAKmC,cAAc,WACvE,CAKOJ,YACO/B,KAAKoC,iBAAiB,YAE9BzB,SAAQ,CAAC0B,EAAKC,KACjBD,EAAIE,aAAa,KAAM,GAAGvC,KAAKG,kBAAkBmC,EAAQ,KACzDD,EAAIE,aAAa,gBAAiB,GAAGvC,KAAKG,oBAAoBmC,EAAQ,KACtED,EAAIG,gBAAgB,WAAYH,IAAQrC,KAAKO,YAAY,GAE5D,CAKOyB,oBACN,MAAMS,EAASzC,KAAKoC,iBAAiB,kBAC/BM,EAAkC,QAAhB1B,EAAAhB,KAAKO,mBAAW,IAAAS,OAAA,EAAAA,EAAE2B,aAAa,iBAEvDF,EAAO9B,SAAQ,CAACiC,EAAON,KACrBM,EAAML,aAAa,KAAM,GAAGvC,KAAKG,oBAAoBmC,EAAQ,KAC7DM,EAAML,aAAa,kBAAmB,GAAGvC,KAAKG,kBAAkBmC,EAAQ,KACxEM,EAAML,aAAa,cAAe,GAAGK,EAAMD,aAAa,QAAUD,IAAkB,GAEvF,CAEOhB,gBAAgBmB,GAEtB7C,KAAK8C,SAAS,CAAEC,IAAK,IAKfF,EAAM9B,kBAAkBiC,GAAQH,EAAM9B,SAAWf,KAAKO,aAE5DP,KAAKmB,kBAAkB0B,EAAM9B,OAC9B,CAKOkC,YAAYZ,GAClB,MAAMa,EAAO,IAAIlD,KAAKoC,iBAAiB,aACjCe,EAAmBD,EAAKE,QAAQf,GACtC,OAAOa,EAAKC,EAAmB,EAChC,CAKOxB,cAAckB,GACpB,MAAMR,EAAWQ,EAAM9B,OAEjBsC,EAAgBrD,KAAKmC,cAAc,0BACnCmB,EAAetD,KAAKmC,cAAc,yBAClCoB,EAAevD,KAAKmC,cAAc,IAAIE,EAAIM,aAAa,qBAAuBU,EAC9EJ,EAAmBjD,KAAKiD,YAAYZ,IAAQiB,EAE5CE,EAAY,CAACjD,EAAkBkD,KACnCA,EAASC,iBAGT1D,KAAK8C,SAAS,CAAEC,IAAK,IACrB/C,KAAKmB,kBAAkBZ,EAAY,EAGrC,OAAQsC,EAAMc,KACZ,IAAK,YACL,IAAK,UACHH,EAAUxD,KAAKC,UAAU2D,MAAQX,EAAcM,EAASV,GACxD,MAEF,IAAK,aACL,IAAK,YACHW,EAAUxD,KAAKC,UAAU2D,MAAQL,EAAUN,EAAaJ,GACxD,MAEF,IAAK,OACHW,EAAUH,EAAUR,GACpB,MAEF,IAAK,MACHW,EAAUF,EAAST,GAMxB,CAMO1B,kBAAkBZ,GACxB,MAAMsD,EAAgB7D,KAAKmC,cAAc,IAAI5B,EAAYoC,aAAa,oBAElEpC,IAAgBP,KAAKO,cAKzBP,KAAKoC,iBAAiB,YAAYzB,SAAQ0B,IACxCA,EAAIyB,gBAAgB,YAChBzB,IAAQ9B,IACV8B,EAAIE,aAAa,WAAY,IAC7BF,EAAI0B,QACJ1B,EAAI2B,eAAe,CAAEC,MAAO,UAAWC,OAAQ,YAC/ClE,KAAKO,YAAc8B,EACpB,IAOHrC,KAAKoC,iBAAiB,kBAAkBzB,SAAQiC,IAC9CA,EAAML,aAAa,cAAe,GAAGK,IAAUiB,IAAgB,IAElE,GAnNMjE,EAAMuE,OAAG,CAACC,EAAgBC,EAAaC,GAM/B1E,EAAA0B,gBAAkB,CAC/BiD,YAAY,EACZC,SAAS,EACTC,gBAAiB,CAAC,YAClBC,mBAAmB,GAWQC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA0BjF,EAAAkF,UAAA,aAAA,GAKlBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA0CjF,EAAAkF,UAAA,eAAA,GAKnBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAkCpF,EAAAkF,UAAA,cAAA,GAK1DH,EAAA,CAARM,KAAqDrF,EAAAkF,UAAA,mBAAA,GArCnClF,EAAQC,EAAA8E,EAAA,CAD5BO,EAAc,mBACMtF,SAAAA"}

package/lib/TabPanel.js

@@ -1,2 +1,2 @@
-import{i as t,_ as e,s,y as a,e as n}from"./query-assigned-elements-89f41e17.js";import{s as o}from"./Component-d4d6fa77.js";const r=t`.n-tab-panel{font-size:var(--n-font-size-m);color:var(--n-color-text)}::slotted(*){margin:0}`;let l=class extends s{render(){return a`<div class="n-tab-panel"><slot></slot></div>`}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tabpanel"),this.setAttribute("tabindex","0")}};l.styles=[o,r],l=e([n("nord-tab-panel")],l);var d=l;export{d as default};
+import{i as t,_ as e,s,y as n,e as a}from"./query-assigned-elements-cf502539.js";import{s as o}from"./Component-449e40fb.js";const r=t`.n-tab-panel{font-size:var(--n-font-size-m);color:var(--n-color-text)}::slotted(*){margin:0}`;let l=class extends s{render(){return n`<div class="n-tab-panel"><slot></slot></div>`}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tabpanel"),this.setAttribute("tabindex","0")}};l.styles=[o,r],l=e([a("nord-tab-panel")],l);var i=l;export{i as default};
 //# sourceMappingURL=TabPanel.js.map

package/lib/Table.js

@@ -1,2 +1,2 @@
-import{i as r,_ as t,s as e,Z as a,e as o,y as n}from"./query-assigned-elements-89f41e17.js";import{e as d}from"./property-03f59dce.js";const l=r`nord-table{--_n-table-td-padding:var(--n-table-td-padding, calc(var(--n-space-m) * 0.8));--_n-table-border-radius:var(--n-table-border-radius, var(--n-border-radius));all:unset;color:var(--n-color-text);-webkit-user-select:inherit;user-select:inherit;display:block;max-inline-size:100%;overflow-x:auto}nord-table table{inline-size:100%;font-size:var(--n-font-size-m);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);line-height:var(--n-line-height-tight);text-align:start;border-spacing:0;border-collapse:separate;color:var(--n-color-text);font-variant-numeric:tabular-nums}nord-table th{border-block-end:1px solid var(--n-color-border);font-weight:var(--n-font-weight-active);font-size:var(--n-font-size-s);color:var(--n-color-text-weaker);text-align:start;background:var(--n-color-surface-raised)}nord-table td{border-block-end:1px solid var(--n-color-border);white-space:nowrap}nord-table :is(td, th){padding:var(--_n-table-td-padding) var(--n-space-s)}nord-table :is(td,th):first-child{padding-inline-start:var(--n-space-m)}nord-table :is(td,th):last-child{padding-inline-end:var(--n-space-m)}nord-table tbody tr:hover{background:var(--n-color-active)}nord-table tbody :is(.n-row-selected, .n-row-selected:hover){background:var(--n-color-active);color:var(--n-color-text);opacity:1;cursor:default}nord-table tbody :is(tr:hover,.n-row-selected) td{color:var(--n-color-text)}nord-table th[aria-sort]{cursor:pointer}nord-table th[aria-sort]:not([aria-sort=none]){color:var(--n-color-text)}nord-table[density=condensed]{--_n-table-td-padding:var(--n-table-td-padding, calc(var(--n-space-m) * 0.5))}nord-table[density=relaxed]{--_n-table-td-padding:var(--n-table-td-padding, calc(var(--n-space-m) * 1.1))}nord-card nord-table tbody tr:last-child td{border-block-end-color:transparent}nord-card nord-table th:first-child{border-start-start-radius:var(--_n-table-border-radius)}nord-card nord-table th:last-child{border-start-end-radius:var(--_n-table-border-radius)}nord-card [slot=header]~nord-table th:is(:first-child, :last-child){border-radius:0}nord-card nord-table tbody tr:last-child td:first-child{border-end-start-radius:var(--_n-table-border-radius)}nord-card nord-table tbody tr:last-child td:last-child{border-end-end-radius:var(--_n-table-border-radius)}nord-table[scroll-snap]{scroll-snap-type:inline mandatory;scroll-behavior:smooth}nord-table[scroll-snap] :is(th, td){scroll-snap-align:start}nord-table:where([striped]) tbody tr:where(:nth-child(even)){background:var(--n-color-surface-raised)}nord-table .n-table-ellipsis{max-inline-size:0;inline-size:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nord-table .n-table-align-right{text-align:end}nord-table .n-table-actions{display:flex;justify-content:center}nord-table .n-table-actions nord-button{margin-block:-10px}`;let s=class extends e{constructor(){super(...arguments),this.density="default",this.scrollSnap=!1,this.striped=!1}connectedCallback(){super.connectedCallback(),this.renderStyles()}renderStyles(){const r=this.getRootNode(),t=r.nodeType===Node.DOCUMENT_NODE?r.head:r;const e=this.localName;if(r.querySelector(`style[data-component=${e}]`))return;const o=document.createDocumentFragment();a(n`<style data-component="${e}">${l}</style>`,o),t.appendChild(o)}createRenderRoot(){return this}};t([d({reflect:!0})],s.prototype,"density",void 0),t([d({reflect:!0,type:Boolean,attribute:"scroll-snap"})],s.prototype,"scrollSnap",void 0),t([d({type:Boolean,reflect:!0})],s.prototype,"striped",void 0),s=t([o("nord-table")],s);var i=s;export{i as default};
+import{i as r,_ as t,s as e,A as a,e as o,y as n}from"./query-assigned-elements-cf502539.js";import{e as d}from"./property-03f59dce.js";const l=r`nord-table{--_n-table-td-padding:var(--n-table-td-padding, calc(var(--n-space-m) * 0.8));--_n-table-border-radius:var(--n-table-border-radius, var(--n-border-radius));all:unset;color:var(--n-color-text);-webkit-user-select:inherit;user-select:inherit;display:block;max-inline-size:100%;overflow-x:auto}nord-table table{inline-size:100%;font-size:var(--n-font-size-m);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);line-height:var(--n-line-height-tight);text-align:start;border-spacing:0;border-collapse:separate;color:var(--n-color-text);font-variant-numeric:tabular-nums}nord-table th{border-block-end:1px solid var(--n-color-border);font-weight:var(--n-font-weight-active);font-size:var(--n-font-size-s);color:var(--n-color-text-weaker);text-align:start;background:var(--n-color-surface-raised)}nord-table td{border-block-end:1px solid var(--n-color-border);white-space:nowrap}nord-table :is(td, th){padding:var(--_n-table-td-padding) var(--n-space-s)}nord-table :is(td,th):first-child{padding-inline-start:var(--n-space-m)}nord-table :is(td,th):last-child{padding-inline-end:var(--n-space-m)}nord-table tbody tr:hover{background:var(--n-color-active)}nord-table tbody :is(.n-row-selected, .n-row-selected:hover){background:var(--n-color-active);color:var(--n-color-text);opacity:1;cursor:default}nord-table tbody :is(tr:hover,.n-row-selected) td{color:var(--n-color-text)}nord-table th[aria-sort]{cursor:pointer}nord-table th[aria-sort]:not([aria-sort=none]){color:var(--n-color-text)}nord-table[density=condensed]{--_n-table-td-padding:var(--n-table-td-padding, calc(var(--n-space-m) * 0.5))}nord-table[density=relaxed]{--_n-table-td-padding:var(--n-table-td-padding, calc(var(--n-space-m) * 1.1))}nord-card nord-table tbody tr:last-child td{border-block-end-color:transparent}nord-card nord-table th:first-child{border-start-start-radius:var(--_n-table-border-radius)}nord-card nord-table th:last-child{border-start-end-radius:var(--_n-table-border-radius)}nord-card [slot=header]~nord-table th:is(:first-child, :last-child){border-radius:0}nord-card nord-table tbody tr:last-child td:first-child{border-end-start-radius:var(--_n-table-border-radius)}nord-card nord-table tbody tr:last-child td:last-child{border-end-end-radius:var(--_n-table-border-radius)}nord-table[scroll-snap]{scroll-snap-type:inline mandatory;scroll-behavior:smooth}nord-table[scroll-snap] :is(th, td){scroll-snap-align:start}nord-table:where([striped]) tbody tr:where(:nth-child(even)){background:var(--n-color-surface-raised)}nord-table .n-table-ellipsis{max-inline-size:0;inline-size:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nord-table .n-table-align-right{text-align:end}nord-table .n-table-actions{display:flex;justify-content:center}nord-table .n-table-actions nord-button{margin-block:-10px}`;let s=class extends e{constructor(){super(...arguments),this.density="default",this.scrollSnap=!1,this.striped=!1}connectedCallback(){super.connectedCallback(),this.renderStyles()}renderStyles(){const r=this.getRootNode(),t=r.nodeType===Node.DOCUMENT_NODE?r.head:r;const e=this.localName;if(r.querySelector(`style[data-component=${e}]`))return;const o=document.createDocumentFragment();a(n`<style data-component="${e}">${l}</style>`,o),t.appendChild(o)}createRenderRoot(){return this}};t([d({reflect:!0})],s.prototype,"density",void 0),t([d({reflect:!0,type:Boolean,attribute:"scroll-snap"})],s.prototype,"scrollSnap",void 0),t([d({type:Boolean,reflect:!0})],s.prototype,"striped",void 0),s=t([o("nord-table")],s);var i=s;export{i as default};
 //# sourceMappingURL=Table.js.map

package/lib/TextField-55a08df5.js

@@ -0,0 +1,2 @@
+import{_ as n,i as r}from"./query-assigned-elements-cf502539.js";import{e as o}from"./property-03f59dce.js";function i(r){class i extends r{constructor(){super(...arguments),this.readonly=!1}}return n([o({type:Boolean,reflect:!0})],i.prototype,"readonly",void 0),i}const t=r`:host{--_n-input-inline-size:var(--n-input-inline-size, 240px);--_n-input-background:var(--n-input-background, var(--n-color-active));--_n-input-color:var(--n-input-color, var(--n-color-text));--_n-input-border-color:var(--n-input-border-color, var(--n-color-border-strong));--_n-input-border-radius:var(--n-input-border-radius, var(--n-border-radius-s));--_n-input-text-align:var(--n-input-text-align, start)}.n-input-container{position:relative;inline-size:var(--_n-input-inline-size)}.n-input{background:var(--_n-input-background);color:var(--_n-input-color);padding:calc(var(--n-space-s) - 1px) calc(var(--n-space-s) * 1.6);border-radius:var(--_n-input-border-radius);border:1px solid var(--_n-input-border-color);font-family:var(--n-font-family);font-size:var(--n-font-size-m);line-height:var(--n-line-height-form);inline-size:100%;transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly);text-align:var(--_n-input-text-align)}@media (max-width:480px){.n-input{font-size:var(--n-font-size-l)}}:host([expand]){--_n-input-inline-size:100%;inline-size:100%}.n-input:hover,.n-label-container:hover+.n-input-container{--_n-input-border-color:var(--n-input-border-color, var(--n-color-border-hover))}.n-input:focus{--_n-input-border-color:var(--n-input-border-color, var(--n-color-accent));--_n-input-background:var(--n-input-background, var(--n-color-surface));outline:0;box-shadow:0 0 0 1px var(--_n-input-border-color)}.n-input::placeholder{color:var(--n-color-text-weakest)}.n-input[aria-invalid=true]{--_n-input-border-color:var(--n-input-border-color, var(--n-color-status-danger))!important}.n-input:disabled,.n-input[readonly],.n-label-container:hover+.n-input-container .n-input:disabled,.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-border-color:var(--n-input-border-color, var(--n-color-active));--_n-input-color:var(--n-input-color, var(--n-color-text-weakest))}.n-input[readonly],.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-color:var(--n-input-color, var(--n-color-text-weak))}.n-input[readonly]:focus{--_n-input-border-color:var(--n-input-border-color, var(--n-color-accent))}:host([size="s"]) :is(.n-input-container, .n-input){font-size:var(--n-font-size-s)}:host([size="s"]) .n-input{padding:calc(var(--n-space-xs) - 2px) calc(var(--n-space-xs) * 1.6)}:host([size="l"]) :is(.n-input-container, .n-input){font-size:var(--n-font-size-l)}:host([size="l"]) .n-input{padding-block-start:calc(var(--n-space-m)/ 1.25);padding-block-end:calc(var(--n-space-m)/ 1.25)}`;export{i as R,t as s};
+//# sourceMappingURL=TextField-55a08df5.js.map

package/lib/{TextField-6a272cd7.js.map → TextField-55a08df5.js.map}

@@ -1 +1 @@
-{"version":3,"file":"TextField-6a272cd7.js","sources":["../src/common/mixins/ReadonlyMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { LitElement } from \"lit\"\nimport { property } from \"lit/decorators.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class ReadonlyMixinInterface {\n  readonly: boolean\n}\n\nexport function ReadonlyMixin<T extends Constructor<LitElement>>(\n  superClass: T\n): Constructor<ReadonlyMixinInterface> & T {\n  class ReadonlyElement extends superClass {\n    /**\n     * Makes the component readonly, so that it is not editable.\n     * Readonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.\n     */\n    @property({ type: Boolean, reflect: true }) readonly = false\n  }\n\n  return ReadonlyElement\n}\n"],"names":["ReadonlyMixin","superClass","ReadonlyElement","constructor","this","readonly","__decorate","property","type","Boolean","reflect","prototype"],"mappings":"4GAUM,SAAUA,EACdC,GAEA,MAAMC,UAAwBD,EAA9BE,kCAK8CC,KAAQC,UAAG,CACxD,EAED,OAH8CC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAwBR,EAAAS,UAAA,gBAAA,GAGvDT,CACT"}
+{"version":3,"file":"TextField-55a08df5.js","sources":["../src/common/mixins/ReadonlyMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { LitElement } from \"lit\"\nimport { property } from \"lit/decorators.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class ReadonlyMixinInterface {\n  readonly: boolean\n}\n\nexport function ReadonlyMixin<T extends Constructor<LitElement>>(\n  superClass: T\n): Constructor<ReadonlyMixinInterface> & T {\n  class ReadonlyElement extends superClass {\n    /**\n     * Makes the component readonly, so that it is not editable.\n     * Readonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.\n     */\n    @property({ type: Boolean, reflect: true }) readonly = false\n  }\n\n  return ReadonlyElement\n}\n"],"names":["ReadonlyMixin","superClass","ReadonlyElement","constructor","this","readonly","__decorate","property","type","Boolean","reflect","prototype"],"mappings":"4GAUM,SAAUA,EACdC,GAEA,MAAMC,UAAwBD,EAA9BE,kCAK8CC,KAAQC,UAAG,CACxD,EAED,OAH8CC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAwBR,EAAAS,UAAA,gBAAA,GAGvDT,CACT"}

package/lib/Textarea.js

@@ -1,2 +1,2 @@
-import{i as e,y as r,b as t,_ as n,e as o,s as a}from"./query-assigned-elements-89f41e17.js";import{e as i}from"./property-03f59dce.js";import{l as s}from"./if-defined-718a58b2.js";import{n as l}from"./ref-4265fcf9.js";import{o as c}from"./observe-a9c6dfb6.js";import{F as d}from"./FocusableMixin-fc1e2a13.js";import{F as p}from"./FormAssociatedMixin-ad4d6c08.js";import{I as u}from"./InputMixin-1564ca2a.js";import{R as h,s as v}from"./TextField-6a272cd7.js";import{A as m}from"./AutocompleteMixin-c8018288.js";import{S as b}from"./SizeMixin-9da6dc81.js";import{s as x}from"./Component-d4d6fa77.js";import{s as f}from"./FormField-c733b196.js";import{LocalizeController as g}from"./LocalizeController.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-d733c575.js";import"./events-5337a6d7.js";import"./VisuallyHidden.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";const y=e`:host{--_n-textarea-inline-size:var(--n-textarea-inline-size, 240px);--_n-textarea-block-size:var(--n-textarea-block-size, 76px);--_n-input-background:var(--n-textarea-background, var(--n-color-active));--_n-input-color:var(--n-textarea-color, var(--n-color-text));--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-border-strong));--_n-input-border-radius:var(--n-textarea-border-radius, var(--n-border-radius-s))}.n-input-container{position:relative;inline-size:var(--_n-textarea-inline-size)}.n-input{min-block-size:var(--_n-textarea-block-size);transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly);display:block;resize:vertical}:host([resize=auto]) .n-input{resize:none;overflow:hidden}:host([expand]){--_n-textarea-inline-size:100%}.n-character-counter{margin-block-start:calc(var(--n-space-s)/ 2);color:var(--n-color-text-weaker)}.n-input:hover,.n-label-container:hover+.n-input-container .n-input{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-border-hover))}.n-input:focus{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-accent));--_n-input-background:var(--n-textarea-background, var(--n-color-surface))}.n-input[aria-invalid=true]{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-status-danger))!important}.n-input:disabled,.n-input[readonly],.n-label-container:hover+.n-input-container .n-input:disabled,.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-active));--_n-input-color:var(--n-textarea-color, var(--n-color-text-weakest))}.n-input[readonly],.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-color:var(--n-textarea-color, var(--n-color-text-weak))}.n-input[readonly]:focus{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-accent))}`;let z=class extends(b(p(m(h(u(d(a))))))){constructor(){super(...arguments),this.inputId="textarea",this.localize=new g(this,{onLangChange:()=>this.handleLangChange()}),this.resize="vertical",this.expand=!1,this.characterCounter=!1}render(){var e;return r`${this.renderLabel()}<div class="n-input-container"><textarea ${l(this.focusableRef)} id="${this.inputId}" class="n-input" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" name="${s(this.name)}" maxlength="${s(this.maxLength)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${s(this.placeholder)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" autocomplete="${this.autocomplete}"></textarea> ${this.characterCounter?this.renderCharacterCounter():t}</div>${this.renderError()}`}renderCharacterCounter(){const{value:e,maxLength:t}=this,n="string"==typeof e?this.lengthMeasurer(e):0,o=t?t-n:null,a=t?`${n}/${t}`:n;return r`<nord-visually-hidden aria-live="polite" aria-atomic="true">${null!=o&&o<=10?this.localize.term("remainingCharacters",o):""}</nord-visually-hidden><div class="n-character-counter">${a}</div>`}handleLangChange(){const e=this.localize.resolvedLang;this.lengthMeasurer=function(e){if(Intl.Segmenter){const r=new Intl.Segmenter(e);return e=>[...r.segment(e)].length}return e=>e.length}(e)}resizeToFitContent(){const e=this.focusableRef.value;e&&("auto"===this.resize?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height="")}};z.styles=[x,f,v,y],n([i({reflect:!0})],z.prototype,"resize",void 0),n([i({reflect:!0,type:Boolean})],z.prototype,"expand",void 0),n([i({attribute:"maxlength",type:Number})],z.prototype,"maxLength",void 0),n([i({type:Boolean,attribute:"character-counter"})],z.prototype,"characterCounter",void 0),n([c("resize","updated"),c("value","updated")],z.prototype,"resizeToFitContent",null),z=n([o("nord-textarea")],z);var j=z;export{j as default};
+import{i as e,y as r,b as t,_ as n,e as o,s as a}from"./query-assigned-elements-cf502539.js";import{e as i}from"./property-03f59dce.js";import{l as s}from"./if-defined-720964c0.js";import{n as l}from"./ref-c44e9f3c.js";import{o as c}from"./observe-a9c6dfb6.js";import{F as d}from"./FocusableMixin-32631bff.js";import{F as p}from"./FormAssociatedMixin-9e798802.js";import{I as u}from"./InputMixin-7fa755e1.js";import{R as h,s as v}from"./TextField-55a08df5.js";import{A as m}from"./AutocompleteMixin-5163f8db.js";import{S as b}from"./SizeMixin-4d04817d.js";import{s as x}from"./Component-449e40fb.js";import{s as f}from"./FormField-3f772bad.js";import{LocalizeController as g}from"./LocalizeController.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-d733c575.js";import"./events-d9666e88.js";import"./VisuallyHidden.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";const y=e`:host{--_n-textarea-inline-size:var(--n-textarea-inline-size, 240px);--_n-textarea-block-size:var(--n-textarea-block-size, 76px);--_n-input-background:var(--n-textarea-background, var(--n-color-active));--_n-input-color:var(--n-textarea-color, var(--n-color-text));--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-border-strong));--_n-input-border-radius:var(--n-textarea-border-radius, var(--n-border-radius-s))}.n-input-container{position:relative;inline-size:var(--_n-textarea-inline-size)}.n-input{min-block-size:var(--_n-textarea-block-size);transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly);display:block;resize:vertical}:host([resize=auto]) .n-input{resize:none;overflow:hidden}:host([expand]){--_n-textarea-inline-size:100%}.n-character-counter{margin-block-start:var(--n-space-xs);color:var(--n-color-text-weaker)}.n-input:hover,.n-label-container:hover+.n-input-container .n-input{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-border-hover))}.n-input:focus{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-accent));--_n-input-background:var(--n-textarea-background, var(--n-color-surface))}.n-input[aria-invalid=true]{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-status-danger))!important}.n-input:disabled,.n-input[readonly],.n-label-container:hover+.n-input-container .n-input:disabled,.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-active));--_n-input-color:var(--n-textarea-color, var(--n-color-text-weakest))}.n-input[readonly],.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-color:var(--n-textarea-color, var(--n-color-text-weak))}.n-input[readonly]:focus{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-accent))}`;let z=class extends(b(p(m(h(u(d(a))))))){constructor(){super(...arguments),this.inputId="textarea",this.localize=new g(this,{onLangChange:()=>this.handleLangChange()}),this.resize="vertical",this.expand=!1,this.characterCounter=!1}render(){var e;return r`${this.renderLabel()}<div class="n-input-container"><textarea ${l(this.focusableRef)} id="${this.inputId}" class="n-input" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" name="${s(this.name)}" maxlength="${s(this.maxLength)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${s(this.placeholder)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" autocomplete="${this.autocomplete}"></textarea> ${this.characterCounter?this.renderCharacterCounter():t}</div>${this.renderError()}`}renderCharacterCounter(){const{value:e,maxLength:t}=this,n="string"==typeof e?this.lengthMeasurer(e):0,o=t?t-n:null,a=t?`${n}/${t}`:n;return r`<nord-visually-hidden aria-live="polite" aria-atomic="true">${null!=o&&o<=10?this.localize.term("remainingCharacters",o):""}</nord-visually-hidden><div class="n-character-counter">${a}</div>`}handleLangChange(){const e=this.localize.resolvedLang;this.lengthMeasurer=function(e){if(Intl.Segmenter){const r=new Intl.Segmenter(e);return e=>[...r.segment(e)].length}return e=>e.length}(e)}resizeToFitContent(){const e=this.focusableRef.value;e&&("auto"===this.resize?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height="")}};z.styles=[x,f,v,y],n([i({reflect:!0})],z.prototype,"resize",void 0),n([i({reflect:!0,type:Boolean})],z.prototype,"expand",void 0),n([i({attribute:"maxlength",type:Number})],z.prototype,"maxLength",void 0),n([i({type:Boolean,attribute:"character-counter"})],z.prototype,"characterCounter",void 0),n([c("resize","updated"),c("value","updated")],z.prototype,"resizeToFitContent",null),z=n([o("nord-textarea")],z);var j=z;export{j as default};
 //# sourceMappingURL=Textarea.js.map

package/lib/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../src/textarea/Textarea.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { ReadonlyMixin } from \"../common/mixins/ReadonlyMixin.js\"\nimport { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Textarea.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\nfunction createLengthMeasurer(locale: string) {\n  if (Intl.Segmenter) {\n    const segmenter = new Intl.Segmenter(locale)\n    return (value: string) => [...segmenter.segment(value)].length\n  }\n\n  return (value: string) => value.length\n}\n\n/**\n * Textarea is a component that allows user to write text over\n * multiple rows. Used when the expected user input is long.\n * For shorter input, use the Input component.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the textarea.\n * @slot error - Optional slot that holds error text for the textarea.\n *\n * @cssprop [--n-textarea-inline-size=240px] - Controls the inline size, or width, of the textarea.\n * @cssprop [--n-textarea-block-size=76px] - Controls the block size, or height, of the textarea.\n * @cssprop [--n-textarea-background=var(--n-color-active)] - Controls the background of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-color=var(--n-color-text)] - Controls the text color of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-border-color=var(--n-color-border-strong)] - Controls the border color of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n *\n * @localization remainingCharacters - A function which receives the number of remaining characters and returns a string to be used as the aria-live message.\n */\n@customElement(\"nord-textarea\")\nexport default class Textarea extends SizeMixin(\n  FormAssociatedMixin(AutocompleteMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement)))))\n) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  protected inputId = \"textarea\"\n\n  private lengthMeasurer!: (value: string) => number\n  private localize = new LocalizeController<\"nord-textarea\">(this, {\n    onLangChange: () => this.handleLangChange(),\n  })\n\n  /**\n   * Controls whether the textarea is resizable.\n   * By default is manually resizable vertically.\n   * Set to \"auto\" to enable auto-resizing as content grows.\n   */\n  @property({ reflect: true }) resize: \"vertical\" | \"auto\" = \"vertical\"\n\n  /**\n   * Controls whether the textarea expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  /**\n   * Controls the max allowed length for the textarea.\n   */\n  @property({ attribute: \"maxlength\", type: Number }) maxLength?: number\n\n  /**\n   * Controls whether to show a count of the number of characters in the textarea.\n   * When combined with `maxlength`, both the count and the max length are shown.\n   */\n  @property({ type: Boolean, attribute: \"character-counter\" }) characterCounter = false\n\n  render() {\n    return html`\n      ${this.renderLabel()}\n\n      <div class=\"n-input-container\">\n        <textarea\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          class=\"n-input\"\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\n          maxlength=${ifDefined(this.maxLength)}\n          .value=${this.value ?? \"\"}\n          placeholder=${ifDefined(this.placeholder)}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n          autocomplete=${this.autocomplete as any}\n        ></textarea>\n\n        ${this.characterCounter ? this.renderCharacterCounter() : nothing}\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  private renderCharacterCounter() {\n    const { value, maxLength } = this\n    const length = typeof value === \"string\" ? this.lengthMeasurer(value) : 0\n\n    const remainder = maxLength ? maxLength - length : null\n    const counter = maxLength ? `${length}/${maxLength}` : length\n\n    return html`\n      <nord-visually-hidden aria-live=\"polite\" aria-atomic=\"true\">\n        ${remainder != null && remainder <= 10 ? this.localize.term(\"remainingCharacters\", remainder) : \"\"}\n      </nord-visually-hidden>\n      <div class=\"n-character-counter\">${counter}</div>\n    `\n  }\n\n  private handleLangChange() {\n    const lang = this.localize.resolvedLang\n    this.lengthMeasurer = createLengthMeasurer(lang)\n  }\n\n  @observe(\"resize\", \"updated\")\n  @observe(\"value\", \"updated\")\n  protected resizeToFitContent() {\n    const textarea = this.focusableRef.value\n\n    if (!textarea) {\n      return\n    }\n\n    if (this.resize === \"auto\") {\n      textarea.style.height = \"auto\"\n      textarea.style.height = `${textarea.scrollHeight}px`\n    } else {\n      textarea.style.height = \"\"\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-textarea\": Textarea\n  }\n}\n"],"names":["Textarea","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","inputId","localize","LocalizeController","onLangChange","handleLangChange","resize","expand","characterCounter","render","html","renderLabel","ref","focusableRef","disabled","readonly","required","ifDefined","name","maxLength","_a","value","placeholder","handleChange","handleInput","getDescribedBy","getInvalid","autocomplete","renderCharacterCounter","nothing","renderError","length","lengthMeasurer","remainder","counter","term","lang","resolvedLang","locale","Intl","Segmenter","segmenter","segment","createLengthMeasurer","resizeToFitContent","textarea","style","height","scrollHeight","styles","componentStyle","formFieldStyle","textFieldStyle","__decorate","property","reflect","prototype","type","Boolean","attribute","Number","observe","customElement"],"mappings":"q8FAiDA,IAAqBA,EAArB,cAAsCC,EACpCC,EAAoBC,EAAkBC,EAAcC,EAAWC,EAAeC,SADhFC,kCAKYC,KAAOC,QAAG,WAGZD,KAAAE,SAAW,IAAIC,EAAoCH,KAAM,CAC/DI,aAAc,IAAMJ,KAAKK,qBAQEL,KAAMM,OAAwB,WAKfN,KAAMO,QAAG,EAWQP,KAAgBQ,kBAAG,CAoEjF,CAlECC,eACE,OAAOC,CAAI,GACPV,KAAKW,yDAIDC,EAAIZ,KAAKa,qBACNb,KAAKC,uCAEED,KAAKc,wBACLd,KAAKe,wBACLf,KAAKgB,mBACVC,EAAUjB,KAAKkB,qBACVD,EAAUjB,KAAKmB,uBACR,QAAVC,EAAApB,KAAKqB,aAAK,IAAAD,EAAAA,EAAI,oBACTH,EAAUjB,KAAKsB,0BACnBtB,KAAKuB,yBACNvB,KAAKwB,kCACKP,EAAUjB,KAAKyB,oCACnBR,EAAUjB,KAAK0B,gCACf1B,KAAK2B,6BAGpB3B,KAAKQ,iBAAmBR,KAAK4B,yBAA2BC,UAG1D7B,KAAK8B,eAEV,CAEOF,yBACN,MAAMP,MAAEA,EAAKF,UAAEA,GAAcnB,KACvB+B,EAA0B,iBAAVV,EAAqBrB,KAAKgC,eAAeX,GAAS,EAElEY,EAAYd,EAAYA,EAAYY,EAAS,KAC7CG,EAAUf,EAAY,GAAGY,KAAUZ,IAAcY,EAEvD,OAAOrB,CAAI,+DAEQ,MAAbuB,GAAqBA,GAAa,GAAKjC,KAAKE,SAASiC,KAAK,sBAAuBF,GAAa,6DAE/DC,SAEtC,CAEO7B,mBACN,MAAM+B,EAAOpC,KAAKE,SAASmC,aAC3BrC,KAAKgC,eAhHT,SAA8BM,GAC5B,GAAIC,KAAKC,UAAW,CAClB,MAAMC,EAAY,IAAIF,KAAKC,UAAUF,GACrC,OAAQjB,GAAkB,IAAIoB,EAAUC,QAAQrB,IAAQU,MACzD,CAED,OAAQV,GAAkBA,EAAMU,MAClC,CAyG0BY,CAAqBP,EAC5C,CAISQ,qBACR,MAAMC,EAAW7C,KAAKa,aAAaQ,MAE9BwB,IAIe,SAAhB7C,KAAKM,QACPuC,EAASC,MAAMC,OAAS,OACxBF,EAASC,MAAMC,OAAS,GAAGF,EAASG,kBAEpCH,EAASC,MAAMC,OAAS,GAE3B,GAjGMxD,EAAM0D,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBN,GAcpCO,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAgDhE,EAAAiE,UAAA,cAAA,GAKzBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAyBnE,EAAAiE,UAAA,cAAA,GAKNH,EAAA,CAAnDC,EAAS,CAAEK,UAAW,YAAaF,KAAMG,UAA4BrE,EAAAiE,UAAA,iBAAA,GAMTH,EAAA,CAA5DC,EAAS,CAAEG,KAAMC,QAASC,UAAW,uBAA+CpE,EAAAiE,UAAA,wBAAA,GAsDrFH,EAAA,CAFCQ,EAAQ,SAAU,WAClBA,EAAQ,QAAS,YAcjBtE,EAAAiE,UAAA,qBAAA,MApGkBjE,EAAQ8D,EAAA,CAD5BS,EAAc,kBACMvE,SAAAA"}
+{"version":3,"file":"Textarea.js","sources":["../src/textarea/Textarea.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { ReadonlyMixin } from \"../common/mixins/ReadonlyMixin.js\"\nimport { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Textarea.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\nfunction createLengthMeasurer(locale: string) {\n  if (Intl.Segmenter) {\n    const segmenter = new Intl.Segmenter(locale)\n    return (value: string) => [...segmenter.segment(value)].length\n  }\n\n  return (value: string) => value.length\n}\n\n/**\n * Textarea is a component that allows user to write text over\n * multiple rows. Used when the expected user input is long.\n * For shorter input, use the Input component.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the textarea.\n * @slot error - Optional slot that holds error text for the textarea.\n *\n * @cssprop [--n-textarea-inline-size=240px] - Controls the inline size, or width, of the textarea.\n * @cssprop [--n-textarea-block-size=76px] - Controls the block size, or height, of the textarea.\n * @cssprop [--n-textarea-background=var(--n-color-active)] - Controls the background of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-color=var(--n-color-text)] - Controls the text color of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-border-color=var(--n-color-border-strong)] - Controls the border color of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n *\n * @localization remainingCharacters - A function which receives the number of remaining characters and returns a string to be used as the aria-live message.\n */\n@customElement(\"nord-textarea\")\nexport default class Textarea extends SizeMixin(\n  FormAssociatedMixin(AutocompleteMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement)))))\n) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  protected inputId = \"textarea\"\n\n  private lengthMeasurer!: (value: string) => number\n  private localize = new LocalizeController<\"nord-textarea\">(this, {\n    onLangChange: () => this.handleLangChange(),\n  })\n\n  /**\n   * Controls whether the textarea is resizable.\n   * By default is manually resizable vertically.\n   * Set to \"auto\" to enable auto-resizing as content grows.\n   */\n  @property({ reflect: true }) resize: \"vertical\" | \"auto\" = \"vertical\"\n\n  /**\n   * Controls whether the textarea expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  /**\n   * Controls the max allowed length for the textarea.\n   */\n  @property({ attribute: \"maxlength\", type: Number }) maxLength?: number\n\n  /**\n   * Controls whether to show a count of the number of characters in the textarea.\n   * When combined with `maxlength`, both the count and the max length are shown.\n   */\n  @property({ type: Boolean, attribute: \"character-counter\" }) characterCounter = false\n\n  render() {\n    return html`\n      ${this.renderLabel()}\n\n      <div class=\"n-input-container\">\n        <textarea\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          class=\"n-input\"\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\n          maxlength=${ifDefined(this.maxLength)}\n          .value=${this.value ?? \"\"}\n          placeholder=${ifDefined(this.placeholder)}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n          autocomplete=${this.autocomplete as any}\n        ></textarea>\n\n        ${this.characterCounter ? this.renderCharacterCounter() : nothing}\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  private renderCharacterCounter() {\n    const { value, maxLength } = this\n    const length = typeof value === \"string\" ? this.lengthMeasurer(value) : 0\n\n    const remainder = maxLength ? maxLength - length : null\n    const counter = maxLength ? `${length}/${maxLength}` : length\n\n    return html`\n      <nord-visually-hidden aria-live=\"polite\" aria-atomic=\"true\">\n        ${remainder != null && remainder <= 10 ? this.localize.term(\"remainingCharacters\", remainder) : \"\"}\n      </nord-visually-hidden>\n      <div class=\"n-character-counter\">${counter}</div>\n    `\n  }\n\n  private handleLangChange() {\n    const lang = this.localize.resolvedLang\n    this.lengthMeasurer = createLengthMeasurer(lang)\n  }\n\n  @observe(\"resize\", \"updated\")\n  @observe(\"value\", \"updated\")\n  protected resizeToFitContent() {\n    const textarea = this.focusableRef.value\n\n    if (!textarea) {\n      return\n    }\n\n    if (this.resize === \"auto\") {\n      textarea.style.height = \"auto\"\n      textarea.style.height = `${textarea.scrollHeight}px`\n    } else {\n      textarea.style.height = \"\"\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-textarea\": Textarea\n  }\n}\n"],"names":["Textarea","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","inputId","localize","LocalizeController","onLangChange","handleLangChange","resize","expand","characterCounter","render","html","renderLabel","ref","focusableRef","disabled","readonly","required","ifDefined","name","maxLength","_a","value","placeholder","handleChange","handleInput","getDescribedBy","getInvalid","autocomplete","renderCharacterCounter","nothing","renderError","length","lengthMeasurer","remainder","counter","term","lang","resolvedLang","locale","Intl","Segmenter","segmenter","segment","createLengthMeasurer","resizeToFitContent","textarea","style","height","scrollHeight","styles","componentStyle","formFieldStyle","textFieldStyle","__decorate","property","reflect","prototype","type","Boolean","attribute","Number","observe","customElement"],"mappings":"w9FAiDA,IAAqBA,EAArB,cAAsCC,EACpCC,EAAoBC,EAAkBC,EAAcC,EAAWC,EAAeC,SADhFC,kCAKYC,KAAOC,QAAG,WAGZD,KAAAE,SAAW,IAAIC,EAAoCH,KAAM,CAC/DI,aAAc,IAAMJ,KAAKK,qBAQEL,KAAMM,OAAwB,WAKfN,KAAMO,QAAG,EAWQP,KAAgBQ,kBAAG,CAoEjF,CAlECC,eACE,OAAOC,CAAI,GACPV,KAAKW,yDAIDC,EAAIZ,KAAKa,qBACNb,KAAKC,uCAEED,KAAKc,wBACLd,KAAKe,wBACLf,KAAKgB,mBACVC,EAAUjB,KAAKkB,qBACVD,EAAUjB,KAAKmB,uBACR,QAAVC,EAAApB,KAAKqB,aAAK,IAAAD,EAAAA,EAAI,oBACTH,EAAUjB,KAAKsB,0BACnBtB,KAAKuB,yBACNvB,KAAKwB,kCACKP,EAAUjB,KAAKyB,oCACnBR,EAAUjB,KAAK0B,gCACf1B,KAAK2B,6BAGpB3B,KAAKQ,iBAAmBR,KAAK4B,yBAA2BC,UAG1D7B,KAAK8B,eAEV,CAEOF,yBACN,MAAMP,MAAEA,EAAKF,UAAEA,GAAcnB,KACvB+B,EAA0B,iBAAVV,EAAqBrB,KAAKgC,eAAeX,GAAS,EAElEY,EAAYd,EAAYA,EAAYY,EAAS,KAC7CG,EAAUf,EAAY,GAAGY,KAAUZ,IAAcY,EAEvD,OAAOrB,CAAI,+DAEQ,MAAbuB,GAAqBA,GAAa,GAAKjC,KAAKE,SAASiC,KAAK,sBAAuBF,GAAa,6DAE/DC,SAEtC,CAEO7B,mBACN,MAAM+B,EAAOpC,KAAKE,SAASmC,aAC3BrC,KAAKgC,eAhHT,SAA8BM,GAC5B,GAAIC,KAAKC,UAAW,CAClB,MAAMC,EAAY,IAAIF,KAAKC,UAAUF,GACrC,OAAQjB,GAAkB,IAAIoB,EAAUC,QAAQrB,IAAQU,MACzD,CAED,OAAQV,GAAkBA,EAAMU,MAClC,CAyG0BY,CAAqBP,EAC5C,CAISQ,qBACR,MAAMC,EAAW7C,KAAKa,aAAaQ,MAE9BwB,IAIe,SAAhB7C,KAAKM,QACPuC,EAASC,MAAMC,OAAS,OACxBF,EAASC,MAAMC,OAAS,GAAGF,EAASG,kBAEpCH,EAASC,MAAMC,OAAS,GAE3B,GAjGMxD,EAAM0D,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBN,GAcpCO,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAgDhE,EAAAiE,UAAA,cAAA,GAKzBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAyBnE,EAAAiE,UAAA,cAAA,GAKNH,EAAA,CAAnDC,EAAS,CAAEK,UAAW,YAAaF,KAAMG,UAA4BrE,EAAAiE,UAAA,iBAAA,GAMTH,EAAA,CAA5DC,EAAS,CAAEG,KAAMC,QAASC,UAAW,uBAA+CpE,EAAAiE,UAAA,wBAAA,GAsDrFH,EAAA,CAFCQ,EAAQ,SAAU,WAClBA,EAAQ,QAAS,YAcjBtE,EAAAiE,UAAA,qBAAA,MApGkBjE,EAAQ8D,EAAA,CAD5BS,EAAc,kBACMvE,SAAAA"}

package/lib/Toast.js

@@ -1,2 +1,2 @@
-import{i as s,_ as o,s as t,y as i,e}from"./query-assigned-elements-89f41e17.js";import{o as r}from"./class-map-1bc3148f.js";import{e as n}from"./property-03f59dce.js";import{t as a}from"./state-70f38ceb.js";import{i as c}from"./query-2d22378e.js";import d from"./Icon.js";import{s as l}from"./Component-d4d6fa77.js";import{N as m}from"./events-5337a6d7.js";import{E as p}from"./EventController-d99ebeef.js";import{o as u}from"./observe-a9c6dfb6.js";import"./directive-de55b00a.js";import"./if-defined-718a58b2.js";import"./cond-8e7df9cf.js";import"./IconManager.js";var f=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.41 10 8.29 8.29-1.41 1.41-8.29-8.29-8.28996 8.3-1.410001-1.41 8.290001-8.3-8.300001-8.28996 1.420001-1.420001 8.28996 8.300001 8.29-8.300001 1.41 1.410001z" fill="currentColor"/></svg>',title:"interface-close",tags:"nordicon interface close cross remove delete erase symbol"});const v=s`:host{--_n-toast-color:var(--n-color-surface);--_n-toast-background-color:var(--n-color-text)}.n-toast{display:flex;gap:var(--n-space-l);align-items:flex-start;background-color:var(--_n-toast-background-color);color:var(--_n-toast-color);border-radius:var(--n-border-radius);animation:n-enter var(--n-transition-slowly) forwards 1;z-index:var(--n-index-toast);box-shadow:var(--n-box-shadow-popout)}.n-dismissed{animation-name:n-exit}@keyframes n-enter{from{transform:translateY(50%);opacity:0}}@keyframes n-exit{to{transform:scale(.97);opacity:0}}.n-toast-inner{padding:var(--n-space-m);flex:1}.n-dismiss{--_n-toast-focus-ring:0 0 0 2px var(--n-color-accent);border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);position:relative;inset-inline-end:var(--n-space-s);inset-block-start:var(--n-space-s);background-color:transparent;border-radius:var(--n-border-radius);cursor:pointer}.n-dismiss::after,.n-dismiss::before{content:"";position:absolute;display:block;border-radius:var(--n-border-radius)}.n-dismiss::before{inset:0;background:var(--_n-toast-color);transition:opacity var(--n-transition-quickly);opacity:0}.n-dismiss:is(:hover,:focus)::before{opacity:.06}.n-dismiss::after{inset:calc(var(--n-space-s) * -1)}.n-dismiss:active{transform:translateY(1px)}.n-dismiss:focus{outline:0;box-shadow:var(--_n-toast-focus-ring)}@supports selector(:focus-visible){.n-dismiss:focus{box-shadow:none}.n-dismiss:focus-visible{box-shadow:var(--_n-toast-focus-ring)}}.n-dismiss nord-icon{opacity:.53;transition:opacity var(--n-transition-quickly);color:var(--_n-toast-color)}.n-dismiss:is(:hover,:focus) nord-icon{opacity:1}:host([variant=danger]){--_n-toast-background-color:var(--n-color-status-danger);--_n-toast-color:var(--n-color-text-on-accent)}`;d.registerIcon(f);let b=class extends t{constructor(){super(...arguments),this.events=new p(this),this.dismissed=!1,this.variant="default",this.autoDismiss=1e4}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.timeoutId)}dismiss(){return this.dismissed=!0,clearTimeout(this.timeoutId),new Promise((s=>{this.events.listen(this.toast,"animationend",(()=>{this.dispatchEvent(new m("dismiss")),s()}),{once:!0})}))}render(){return i`<div class="${r({"n-toast":!0,"n-dismissed":this.dismissed})}"><div class="n-toast-inner"><slot></slot></div><button class="n-dismiss" @click="${this.dismiss}" aria-hidden="true"><nord-icon name="interface-close" size="s"></nord-icon></button></div>`}handleAutoDismissChange(){clearTimeout(this.timeoutId),null!=this.autoDismiss&&this.autoDismiss>=0&&setTimeout((()=>this.dismiss()),this.autoDismiss)}};b.styles=[l,v],o([c(".n-toast",!0)],b.prototype,"toast",void 0),o([a()],b.prototype,"dismissed",void 0),o([n({reflect:!0})],b.prototype,"variant",void 0),o([n({type:Number,attribute:"auto-dismiss"})],b.prototype,"autoDismiss",void 0),o([u("autoDismiss")],b.prototype,"handleAutoDismissChange",null),b=o([e("nord-toast")],b);var h=b;export{h as default};
+import{i as s,y as o,_ as t,e as i,s as r}from"./query-assigned-elements-cf502539.js";import{o as e}from"./class-map-21152cee.js";import{e as a}from"./property-03f59dce.js";import{n}from"./ref-c44e9f3c.js";import{N as c}from"./NotificationMixin-86b09bcd.js";import{o as d}from"./observe-a9c6dfb6.js";import l from"./Icon.js";import{s as m}from"./Component-449e40fb.js";import"./directive-de55b00a.js";import"./state-70f38ceb.js";import"./events-d9666e88.js";import"./if-defined-720964c0.js";import"./cond-2da54107.js";import"./IconManager.js";var u=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.41 10 8.29 8.29-1.41 1.41-8.29-8.29-8.28996 8.3-1.410001-1.41 8.290001-8.3-8.300001-8.28996 1.420001-1.420001 8.28996 8.300001 8.29-8.300001 1.41 1.410001z" fill="currentColor"/></svg>',title:"interface-close",tags:"nordicon interface close cross remove delete erase symbol"});const p=s`:host{--_n-toast-color:var(--n-color-surface);--_n-toast-background-color:var(--n-color-text)}.n-toast{display:flex;gap:var(--n-space-l);align-items:flex-start;background-color:var(--_n-toast-background-color);color:var(--_n-toast-color);border-radius:var(--n-border-radius);animation:n-enter var(--n-transition-slowly) forwards 1;z-index:var(--n-index-toast);box-shadow:var(--n-box-shadow-popout)}.n-dismissed{animation-name:n-exit}@keyframes n-enter{from{transform:translateY(50%);opacity:0}}@keyframes n-exit{to{transform:scale(.97);opacity:0}}.n-toast-inner{padding:var(--n-space-m);flex:1}.n-dismiss{--_n-toast-focus-ring:0 0 0 2px var(--n-color-accent);border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);position:relative;inset-inline-end:var(--n-space-s);inset-block-start:var(--n-space-s);background-color:transparent;border-radius:var(--n-border-radius);cursor:pointer}.n-dismiss::after,.n-dismiss::before{content:"";position:absolute;display:block;border-radius:var(--n-border-radius)}.n-dismiss::before{inset:0;background:var(--_n-toast-color);transition:opacity var(--n-transition-quickly);opacity:0}.n-dismiss:is(:hover,:focus)::before{opacity:.06}.n-dismiss::after{inset:calc(var(--n-space-s) * -1)}.n-dismiss:active{transform:translateY(1px)}.n-dismiss:focus{outline:0;box-shadow:var(--_n-toast-focus-ring)}@supports selector(:focus-visible){.n-dismiss:focus{box-shadow:none}.n-dismiss:focus-visible{box-shadow:var(--_n-toast-focus-ring)}}.n-dismiss nord-icon{opacity:.53;transition:opacity var(--n-transition-quickly);color:var(--_n-toast-color)}.n-dismiss:is(:hover,:focus) nord-icon{opacity:1}:host([variant=danger]){--_n-toast-background-color:var(--n-color-status-danger);--_n-toast-color:var(--n-color-text-on-accent)}`;l.registerIcon(u);let f=class extends(c(r)){constructor(){super(...arguments),this.variant="default",this.autoDismiss=1e4}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.timeoutId)}async dismiss(){return clearTimeout(this.timeoutId),super.dismiss()}render(){return o`<div ${n(this.notificationRef)} class="${e({"n-toast":!0,"n-dismissed":this.dismissed})}"><div class="n-toast-inner"><slot></slot></div><button class="n-dismiss" @click="${this.dismiss}" aria-hidden="true"><nord-icon name="interface-close" size="s"></nord-icon></button></div>`}handleAutoDismissChange(){clearTimeout(this.timeoutId),null!=this.autoDismiss&&this.autoDismiss>=0&&setTimeout((()=>this.dismiss()),this.autoDismiss)}};f.styles=[m,p],t([a({reflect:!0})],f.prototype,"variant",void 0),t([a({type:Number,attribute:"auto-dismiss"})],f.prototype,"autoDismiss",void 0),t([d("autoDismiss")],f.prototype,"handleAutoDismissChange",null),f=t([i("nord-toast")],f);var v=f;export{v as default};
 //# sourceMappingURL=Toast.js.map

package/lib/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../icons/lib/assets/interface-close.js","../src/toast/Toast.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.41 10 8.29 8.29-1.41 1.41-8.29-8.29-8.28996 8.3-1.410001-1.41 8.290001-8.3-8.300001-8.28996 1.420001-1.420001 8.28996 8.300001 8.29-8.300001 1.41 1.410001z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-close\"\nexport const tags = \"nordicon interface close cross remove delete erase symbol\"\n","import { LitElement, html } from \"lit\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Toast.css\"\nimport { NordEvent } from \"../common/events.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\nIcon.registerIcon(closeIcon)\n\n/**\n * Toasts are non-disruptive messages that appear in the interface\n * to provide quick, at-a-glance feedback on the outcome of an action.\n *\n * @status ready\n * @category feedback\n * @slot - Default slot used for the toast text/message.\n * @fires dismiss - Fired when the toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.\n */\n@customElement(\"nord-toast\")\nexport default class Toast extends LitElement {\n  static styles = [componentStyle, style]\n\n  private timeoutId?: ReturnType<typeof setTimeout>\n  private events = new EventController(this)\n\n  @query(\".n-toast\", true) private toast!: HTMLElement\n  @state() private dismissed = false\n\n  /**\n   * The style variant of the toast.\n   */\n  @property({ reflect: true }) variant: \"default\" | \"danger\" = \"default\"\n\n  /**\n   * Timeout in milliseconds before the toast is automatically dismissed.\n   */\n  @property({ type: Number, attribute: \"auto-dismiss\" }) autoDismiss? = 10000\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    clearTimeout(this.timeoutId)\n  }\n\n  /**\n   * Programmatically dismiss the toast.\n   * The returned promise resolves when toast's exit animation is complete.\n   */\n  dismiss() {\n    this.dismissed = true\n    clearTimeout(this.timeoutId)\n\n    return new Promise<void>(resolve => {\n      this.events.listen(\n        this.toast,\n        \"animationend\",\n        () => {\n          this.dispatchEvent(new NordEvent(\"dismiss\"))\n          resolve()\n        },\n        { once: true }\n      )\n    })\n  }\n\n  render() {\n    return html`\n      <div class=${classMap({ \"n-toast\": true, \"n-dismissed\": this.dismissed })}>\n        <div class=\"n-toast-inner\">\n          <slot></slot>\n        </div>\n\n        <button class=\"n-dismiss\" @click=${this.dismiss} aria-hidden=\"true\">\n          <nord-icon name=\"interface-close\" size=\"s\"></nord-icon>\n        </button>\n      </div>\n    `\n  }\n\n  @observe(\"autoDismiss\")\n  protected handleAutoDismissChange() {\n    clearTimeout(this.timeoutId)\n\n    if (this.autoDismiss != null && this.autoDismiss >= 0) {\n      setTimeout(() => this.dismiss(), this.autoDismiss)\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-toast\": Toast\n  }\n}\n"],"names":["Icon","registerIcon","closeIcon","Toast","LitElement","constructor","this","events","EventController","dismissed","variant","autoDismiss","disconnectedCallback","super","clearTimeout","timeoutId","dismiss","Promise","resolve","listen","toast","dispatchEvent","NordEvent","once","render","html","classMap","handleAutoDismissChange","setTimeout","styles","componentStyle","style","__decorate","query","prototype","state","property","reflect","type","Number","attribute","observe","customElement"],"mappings":"mmBAAe,0QACM,uBACD,g2DCUpBA,EAAKC,aAAaC,GAYlB,IAAqBC,EAArB,cAAmCC,EAAnCC,kCAIUC,KAAAC,OAAS,IAAIC,EAAgBF,MAGpBA,KAASG,WAAG,EAKAH,KAAOI,QAAyB,UAKNJ,KAAWK,YAAI,GAkDvE,CAhDCC,uBACEC,MAAMD,uBACNE,aAAaR,KAAKS,UACnB,CAMDC,UAIE,OAHAV,KAAKG,WAAY,EACjBK,aAAaR,KAAKS,WAEX,IAAIE,SAAcC,IACvBZ,KAAKC,OAAOY,OACVb,KAAKc,MACL,gBACA,KACEd,KAAKe,cAAc,IAAIC,EAAU,YACjCJ,GAAS,GAEX,CAAEK,MAAM,GACT,GAEJ,CAEDC,SACE,OAAOC,CAAI,eACIC,EAAS,CAAE,WAAW,EAAM,cAAepB,KAAKG,gGAKxBH,KAAKU,oGAK7C,CAGSW,0BACRb,aAAaR,KAAKS,WAEM,MAApBT,KAAKK,aAAuBL,KAAKK,aAAe,GAClDiB,YAAW,IAAMtB,KAAKU,WAAWV,KAAKK,YAEzC,GAjEMR,EAAA0B,OAAS,CAACC,EAAgBC,GAKRC,EAAA,CAAxBC,EAAM,YAAY,IAAiC9B,EAAA+B,UAAA,aAAA,GAC3CF,EAAA,CAARG,KAAiChC,EAAA+B,UAAA,iBAAA,GAKLF,EAAA,CAA5BI,EAAS,CAAEC,SAAS,KAAiDlC,EAAA+B,UAAA,eAAA,GAKfF,EAAA,CAAtDI,EAAS,CAAEE,KAAMC,OAAQC,UAAW,kBAAsCrC,EAAA+B,UAAA,mBAAA,GA2C3EF,EAAA,CADCS,EAAQ,gBAORtC,EAAA+B,UAAA,0BAAA,MAlEkB/B,EAAK6B,EAAA,CADzBU,EAAc,eACMvC,SAAAA"}
+{"version":3,"file":"Toast.js","sources":["../../icons/lib/assets/interface-close.js","../src/toast/Toast.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.41 10 8.29 8.29-1.41 1.41-8.29-8.29-8.28996 8.3-1.410001-1.41 8.290001-8.3-8.300001-8.28996 1.420001-1.420001 8.28996 8.300001 8.29-8.300001 1.41 1.410001z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-close\"\nexport const tags = \"nordicon interface close cross remove delete erase symbol\"\n","import { LitElement, html } from \"lit\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close.js\"\nimport { ref } from \"lit/directives/ref.js\"\n\nimport { NotificationMixin } from \"../common/mixins/NotificationMixin.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport Icon from \"../icon/Icon.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Toast.css\"\n\nIcon.registerIcon(closeIcon)\n\n/**\n * Toasts are non-disruptive messages that appear in the interface\n * to provide quick, at-a-glance feedback on the outcome of an action.\n *\n * @status ready\n * @category feedback\n * @slot - Default slot used for the toast text/message.\n * @fires dismiss - Fired when the toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.\n */\n@customElement(\"nord-toast\")\nexport default class Toast extends NotificationMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private timeoutId?: ReturnType<typeof setTimeout>\n\n  /**\n   * The style variant of the toast.\n   */\n  @property({ reflect: true }) variant: \"default\" | \"danger\" = \"default\"\n\n  /**\n   * Timeout in milliseconds before the toast is automatically dismissed.\n   */\n  @property({ type: Number, attribute: \"auto-dismiss\" }) autoDismiss? = 10000\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    clearTimeout(this.timeoutId)\n  }\n\n  /**\n   * Programmatically dismiss the toast.\n   * The returned promise resolves when toast's exit animation is complete.\n   */\n  async dismiss() {\n    clearTimeout(this.timeoutId)\n    return super.dismiss()\n  }\n\n  render() {\n    return html`\n      <div ${ref(this.notificationRef)} class=${classMap({ \"n-toast\": true, \"n-dismissed\": this.dismissed })}>\n        <div class=\"n-toast-inner\">\n          <slot></slot>\n        </div>\n\n        <button class=\"n-dismiss\" @click=${this.dismiss} aria-hidden=\"true\">\n          <nord-icon name=\"interface-close\" size=\"s\"></nord-icon>\n        </button>\n      </div>\n    `\n  }\n\n  @observe(\"autoDismiss\")\n  protected handleAutoDismissChange() {\n    clearTimeout(this.timeoutId)\n\n    if (this.autoDismiss != null && this.autoDismiss >= 0) {\n      setTimeout(() => this.dismiss(), this.autoDismiss)\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-toast\": Toast\n  }\n}\n"],"names":["Icon","registerIcon","closeIcon","Toast","NotificationMixin","LitElement","constructor","this","variant","autoDismiss","disconnectedCallback","super","clearTimeout","timeoutId","async","dismiss","render","html","ref","notificationRef","classMap","dismissed","handleAutoDismissChange","setTimeout","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Number","attribute","observe","customElement"],"mappings":"2kBAAe,0QACM,uBACD,g2DCUpBA,EAAKC,aAAaC,GAYlB,IAAqBC,EAArB,cAAmCC,EAAkBC,IAArDC,kCAQ+BC,KAAOC,QAAyB,UAKND,KAAWE,YAAI,GAsCvE,CApCCC,uBACEC,MAAMD,uBACNE,aAAaL,KAAKM,UACnB,CAMDC,gBAEE,OADAF,aAAaL,KAAKM,WACXF,MAAMI,SACd,CAEDC,SACE,OAAOC,CAAI,QACFC,EAAIX,KAAKY,2BAA0BC,EAAS,CAAE,WAAW,EAAM,cAAeb,KAAKc,gGAKrDd,KAAKQ,oGAK7C,CAGSO,0BACRV,aAAaL,KAAKM,WAEM,MAApBN,KAAKE,aAAuBF,KAAKE,aAAe,GAClDc,YAAW,IAAMhB,KAAKQ,WAAWR,KAAKE,YAEzC,GAjDMN,EAAAqB,OAAS,CAACC,EAAgBC,GAOJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAiD1B,EAAA2B,UAAA,eAAA,GAKfH,EAAA,CAAtDC,EAAS,CAAEG,KAAMC,OAAQC,UAAW,kBAAsC9B,EAAA2B,UAAA,mBAAA,GA+B3EH,EAAA,CADCO,EAAQ,gBAOR/B,EAAA2B,UAAA,0BAAA,MAlDkB3B,EAAKwB,EAAA,CADzBQ,EAAc,eACMhC,SAAAA"}

package/lib/ToastGroup.js

@@ -1,2 +1,2 @@
-import{i as t,_ as e,s as n,y as s,e as a}from"./query-assigned-elements-89f41e17.js";import{s as o}from"./Component-d4d6fa77.js";const i=t`.n-toast-group{display:flex;flex-direction:column;gap:var(--n-space-s);position:fixed;z-index:var(--n-index-toast);inset:0;inset-block-start:auto;inset-inline-end:var(--n-scrollbar-gutter,0);margin:1em;pointer-events:none}::slotted(nord-toast){max-inline-size:calc(var(--n-space-xxl) * 5);inline-size:100%;margin-inline:auto;pointer-events:auto}`;let r=class extends n{render(){return s`<div class="n-toast-group" role="log" aria-relevant="additions"><slot></slot></div>`}addToast(t,e={}){const{variant:n,autoDismiss:s}=e,a=document.createElement("nord-toast");return n&&(a.variant=n),null!=s&&(a.autoDismiss=s),a.textContent=t,this.appendChild(a),a}};r.styles=[o,i],r=e([a("nord-toast-group")],r);var l=r;export{l as default};
+import{i as t,_ as e,s as n,y as s,e as a}from"./query-assigned-elements-cf502539.js";import{s as o}from"./Component-449e40fb.js";const i=t`.n-toast-group{display:flex;flex-direction:column;gap:var(--n-space-s);position:fixed;z-index:var(--n-index-toast);inset:0;inset-block-start:auto;inset-inline-end:var(--n-scrollbar-gutter,0);margin:1em;pointer-events:none}::slotted(nord-toast){max-inline-size:calc(var(--n-space-xxl) * 5);inline-size:100%;margin-inline:auto;pointer-events:auto}`;let r=class extends n{render(){return s`<div class="n-toast-group" role="log" aria-relevant="additions"><slot></slot></div>`}addToast(t,e={}){const{variant:n,autoDismiss:s}=e,a=document.createElement("nord-toast");return n&&(a.variant=n),null!=s&&(a.autoDismiss=s),a.textContent=t,this.appendChild(a),a}};r.styles=[o,i],r=e([a("nord-toast-group")],r);var l=r;export{l as default};
 //# sourceMappingURL=ToastGroup.js.map

package/lib/Toggle.js

@@ -1,2 +1,2 @@
-import{i as e,y as n,_ as i,e as r,s as t}from"./query-assigned-elements-89f41e17.js";import{e as o}from"./property-03f59dce.js";import{l as a}from"./if-defined-718a58b2.js";import{n as s}from"./ref-4265fcf9.js";import{F as l}from"./FocusableMixin-fc1e2a13.js";import{F as c}from"./FormAssociatedMixin-ad4d6c08.js";import{I as d}from"./InputMixin-1564ca2a.js";import{s as g}from"./Component-d4d6fa77.js";import{s as p}from"./FormField-c733b196.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-d733c575.js";import"./events-5337a6d7.js";import"./VisuallyHidden.js";const h=e`:host{--_n-toggle-block-size:calc(var(--_n-toggle-inline-size) / 1.6);--_n-toggle-inline-size:3.2143em;--_n-toggle-thumb-margin:0.35em;display:inline-block;font-size:var(--n-font-size-m)}.n-flex{display:flex}.n-expand{flex:1;display:flex;justify-content:center;align-items:flex-start;flex-direction:column;min-block-size:100%}.n-input-container{position:relative}.n-toggle{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;inline-size:var(--_n-toggle-inline-size);block-size:var(--_n-toggle-block-size);border-radius:var(--n-border-radius-pill);background:var(--_n-toggle-background,var(--n-color-border-strong));cursor:pointer;transition:background var(--n-transition-slowly);font-size:var(--_n-toggle-size,var(--n-font-size-m))}.n-toggle::before{content:"";display:block;aspect-ratio:1/1;block-size:calc(100% - 2 * var(--_n-toggle-thumb-margin));background:var(--n-color-text-on-accent);border-radius:var(--n-border-radius-circle);transition:margin;transition-duration:inherit;margin-inline-start:var(--_n-toggle-thumb-margin);box-shadow:var(--n-box-shadow)}input:checked{--_n-toggle-background:var(--n-color-text-link)}input:checked::before{margin-inline-start:calc(var(--_n-toggle-inline-size) - var(--_n-toggle-block-size) + var(--_n-toggle-thumb-margin))}input:checked[aria-invalid]{--_n-toggle-background:var(--n-color-status-danger)}input:focus{outline:0;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{opacity:.3;cursor:not-allowed}.n-label-container{margin-block-end:0}label{-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:calc(var(--n-space-s)/ 2);padding-inline-start:var(--n-space-s)}:host([reverse]) .n-error,:host([reverse]) .n-hint,:host([reverse]) label{padding-inline-start:0;padding-inline-end:var(--n-space-s)}:host([size="s"]) .n-toggle{--_n-toggle-size:var(--n-font-size-xs)}:host([size="l"]) .n-toggle{--_n-toggle-size:var(--n-font-size-xl)}`;let v=class extends(c(d(l(t)))){constructor(){super(...arguments),this.checked=!1,this.reverse=!1,this.size="m"}get formValue(){return this.checked?this.value||"on":void 0}render(){const e=n`<div class="n-expand">${this.renderLabel()} ${this.renderError()}</div>`,i=n`<div class="n-input-container"><input ${s(this.focusableRef)} class="n-toggle" id="${this.inputId}" type="checkbox" role="switch" name="${a(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" @change="${this.handleChange}"></div>`;return n`<div class="n-flex">${this.reverse?[e,i]:[i,e]}</div>`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};v.styles=[g,p,h],i([o({type:Boolean})],v.prototype,"checked",void 0),i([o({type:Boolean})],v.prototype,"reverse",void 0),i([o({reflect:!0})],v.prototype,"size",void 0),v=i([r("nord-toggle")],v);var u=v;export{u as default};
+import{i as e,y as n,_ as i,e as r,s as t}from"./query-assigned-elements-cf502539.js";import{e as o}from"./property-03f59dce.js";import{l as s}from"./if-defined-720964c0.js";import{n as a}from"./ref-c44e9f3c.js";import{F as l}from"./FocusableMixin-32631bff.js";import{F as c}from"./FormAssociatedMixin-9e798802.js";import{I as d}from"./InputMixin-7fa755e1.js";import{s as g}from"./Component-449e40fb.js";import{s as p}from"./FormField-3f772bad.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-d733c575.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";const h=e`:host{--_n-toggle-block-size:calc(var(--_n-toggle-inline-size) / 1.6);--_n-toggle-inline-size:3.2143em;--_n-toggle-thumb-margin:0.35em;display:inline-block;font-size:var(--n-font-size-m)}.n-flex{display:flex}.n-expand{flex:1;display:flex;justify-content:center;align-items:flex-start;flex-direction:column;min-block-size:100%}.n-input-container{position:relative}.n-toggle{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;inline-size:var(--_n-toggle-inline-size);block-size:var(--_n-toggle-block-size);border-radius:var(--n-border-radius-pill);background:var(--_n-toggle-background,var(--n-color-border-strong));cursor:pointer;transition:background var(--n-transition-slowly);font-size:var(--_n-toggle-size,var(--n-font-size-m))}.n-toggle::before{content:"";display:block;aspect-ratio:1/1;block-size:calc(100% - 2 * var(--_n-toggle-thumb-margin));background:var(--n-color-text-on-accent);border-radius:var(--n-border-radius-circle);transition:margin;transition-duration:inherit;margin-inline-start:var(--_n-toggle-thumb-margin);box-shadow:var(--n-box-shadow)}input:checked{--_n-toggle-background:var(--n-color-text-link)}input:checked::before{margin-inline-start:calc(var(--_n-toggle-inline-size) - var(--_n-toggle-block-size) + var(--_n-toggle-thumb-margin))}input:checked[aria-invalid]{--_n-toggle-background:var(--n-color-status-danger)}input:focus{outline:0;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{opacity:.3;cursor:not-allowed}.n-label-container{margin-block-end:0}label{-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:var(--n-space-xs);padding-inline-start:var(--n-space-s)}:host([reverse]) .n-error,:host([reverse]) .n-hint,:host([reverse]) label{padding-inline-start:0;padding-inline-end:var(--n-space-s)}:host([size="s"]) .n-toggle{--_n-toggle-size:var(--n-font-size-xs)}:host([size="l"]) .n-toggle{--_n-toggle-size:var(--n-font-size-xl)}`;let v=class extends(c(d(l(t)))){constructor(){super(...arguments),this.checked=!1,this.reverse=!1,this.size="m"}get formValue(){return this.checked?this.value||"on":void 0}render(){const e=n`<div class="n-expand">${this.renderLabel()} ${this.renderError()}</div>`,i=n`<div class="n-input-container"><input ${a(this.focusableRef)} class="n-toggle" id="${this.inputId}" type="checkbox" role="switch" name="${s(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" @change="${this.handleChange}"></div>`;return n`<div class="n-flex">${this.reverse?[e,i]:[i,e]}</div>`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};v.styles=[g,p,h],i([o({type:Boolean})],v.prototype,"checked",void 0),i([o({type:Boolean})],v.prototype,"reverse",void 0),i([o({reflect:!0})],v.prototype,"size",void 0),v=i([r("nord-toggle")],v);var u=v;export{u as default};
 //# sourceMappingURL=Toggle.js.map