@nordhealth/components 4.12.0 → 4.12.1

package/lib/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../src/radio/Radio.ts","../src/common/directives/wrapIf.ts"],"sourcesContent":["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\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.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 * Force reflow (and with it a repaint) of a radio button because of a macOS Safari rendering bug\n *\n * @see https://bugs.webkit.org/show_bug.cgi?id=249706\n */\nfunction forceReflow(radio: Radio) {\n  radio.style.display = \"none\"\n  // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions\n  radio.offsetHeight // no need to store this anywhere, the reference is enough\n  radio.style.display = \"inline-block\"\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 * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).\n */\n@customElement(\"nord-radio\")\nexport default class Radio extends SizeMixin(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: () => 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._formId)}\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 && radio.checked) {\n        radio.checked = false\n        forceReflow(radio)\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":["id","createId","suffix","Radio","SizeMixin","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","inputId","hintId","errorId","hintSlot","LightSlotController","slotName","render","hint","html","nothing","syncLightDom","element","labelSlot","label","localName","isLabel","console","warn","htmlFor","errorSlot","error","inputSlot","LightDomController","handleBlur","handleFocus","ref","focusableRef","cond","name","value","checked","disabled","required","getDescribedBy","getInvalid","_formId","e","stopPropagation","dispatchEvent","Event","bubbles","cancelable","formValue","handleChange","condition","hideLabel","inner","wrapper","content","hasHint","hasError","handleCheckedChange","previousChecked","uncheckSiblings","getRootNode","querySelectorAll","forEach","radio","style","display","offsetHeight","forceReflow","target","super","styles","componentStyle","formFieldStyle","__decorate","property","type","Boolean","reflect","prototype","observe","customElement"],"mappings":"29GAkBA,IAAIA,EAAK,EACT,MAAMC,EAAYC,GAAmB,cAAcA,KAAUF,MA+B9C,IAAMG,EAAN,cAAoBC,EAAUC,EAAoBC,EAAWC,EAAeC,OAA5E,WAAAC,uBAGMC,KAAAC,QAAUV,EAAS,SACnBS,KAAAE,OAASX,EAAS,QAClBS,KAAAG,QAAUZ,EAAS,SAKnBS,KAAAI,SAAW,IAAIC,EAAoBL,KAAM,CAC1DM,SAAU,OACVC,OAAQ,IAAOP,KAAKQ,KAAOC,CAAI,iCAAgCT,KAAKE,WAAUF,KAAKQ,aAAeE,EAClGC,aAAcC,IACZA,EAAQtB,GAAKU,KAAKE,MAAM,IAITF,KAAAa,UAAY,IAAIR,EAAoBL,KAAM,CAC3DM,SAAU,QACVC,OAAQ,IAAOP,KAAKc,MAAQL,CAAI,qCAAoCT,KAAKC,YAAWD,KAAKc,gBAAkBJ,EAC3GC,aAAcC,KAlDlB,SAAiBA,GACf,MAA6B,UAAtBA,EAAQG,SACjB,CAiDWC,CAAQJ,GAEXK,QAAQC,KAAK,yEAEbN,EAAQO,QAAUnB,KAAKC,OACxB,IAIcD,KAAAoB,UAAY,IAAIf,EAAoBL,KAAM,CAC3DM,SAAU,QACVC,OAAQ,IAAOP,KAAKqB,MAAQZ,CAAI,kCAAiCT,KAAKG,YAAWH,KAAKqB,cAAgBX,EACtGC,aAAcC,IACZA,EAAQtB,GAAKU,KAAKE,MAAM,IAIlBF,KAAAsB,UAAY,IAAIC,EAAmBvB,KAAM,CACjDO,OAAQ,IAAME,CAAI,8BAGNT,KAAKwB,uBACJxB,KAAKyB,gBACZC,EAAI1B,KAAK2B,qCAEN3B,KAAKC,+BAEH2B,EAAK5B,KAAK6B,kBACRD,EAAK5B,KAAK8B,qBACR9B,KAAK+B,uBACJ/B,KAAKgC,wBACLhC,KAAKiC,+BACEL,EAAK5B,KAAKkC,oCACdN,EAAK5B,KAAKmC,wBAClBP,EAAK5B,KAAKoC,eAcqBpC,KAAO+B,SAAY,EA6DvD/B,KAAAwB,WAAca,IACpBA,EAAEC,kBACFtC,KAAKuC,cAAc,IAAIC,MAAM,OAAQ,CAAEC,SAAS,EAAOC,YAAY,IAAQ,EAGrE1C,KAAAyB,YAAeY,IACrBA,EAAEC,kBACFtC,KAAKuC,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,EAAOC,YAAY,IAAQ,CAE/E,CA9EC,aAAuBC,GAGtB,CAOD,MAAApC,GACE,OAAOE,CAAI,+DAEkCT,KAAK4C,2CAE1C5C,KAAK+B,QAAUtB,CAAI,4BAA8BC,+DC3GpBmC,EDgH3B7C,KAAK8C,UChHsCC,EDiH3C,IAAMtC,CAAI,gECjHsDuC,EDqHhEC,GAAWxC,CAAI,yBAAyBwC,2BCpH7CJ,EAAYG,EAAQD,KAAWA,8CDsHa/C,KAAKkD,yIAKOlD,KAAKmD,gGC5H7BN,EAAgBE,EAAqBC,CDmI3E,CAGS,mBAAAI,CAAoBC,IAGvBA,GAAmBrD,KAAK+B,SAC3B/B,KAAKsD,iBAER,CAEO,eAAAA,GACOtD,KAAKuD,cAEbC,iBAAwB,oBAAoBxD,KAAK6B,UAAU4B,SAAQC,IAClEA,IAAU1D,MAAQ0D,EAAM3B,UAC1B2B,EAAM3B,SAAU,EAzIxB,SAAqB2B,GACnBA,EAAMC,MAAMC,QAAU,OAEtBF,EAAMG,aACNH,EAAMC,MAAMC,QAAU,cACxB,CAqIQE,CAAYJ,GACb,GAEJ,CAES,YAAAd,CAAaP,GACrBA,EAAEC,kBACF,MAAMyB,EAAS1B,EAAE0B,OAEjB/D,KAAK+B,QAAUgC,EAAOhC,QACtBiC,MAAMpB,aAAaP,EACpB,GAhIM5C,EAAMwE,OAAG,CAACC,EAAgBC,EAAgBR,GAqELS,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAgC/E,EAAAgF,UAAA,eAAA,GAkC1DL,EAAA,CADTM,EAAQ,YAORjF,EAAAgF,UAAA,sBAAA,MA9GkBhF,EAAK2E,EAAA,CADzBO,EAAc,eACMlF,SAAAA"}
+{"version":3,"file":"Radio.js","sources":["../src/radio/Radio.ts","../src/common/directives/wrapIf.ts"],"sourcesContent":["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'\nimport { SizeMixin } from '../common/mixins/SizeMixin.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 * Force reflow (and with it a repaint) of a radio button because of a macOS Safari rendering bug\n *\n * @see https://bugs.webkit.org/show_bug.cgi?id=249706\n */\nfunction forceReflow(radio: Radio) {\n  radio.style.display = 'none'\n  // eslint-disable-next-line ts/no-unused-expressions\n  radio.offsetHeight // no need to store this anywhere, the reference is enough\n  radio.style.display = 'inline-block'\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 * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).\n */\n@customElement('nord-radio')\nexport default class Radio extends SizeMixin(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        console.warn(`NORD: Only <label> elements should be placed in radio's \"label\" slot`)\n      }\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: () => 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._formId)}\n      />\n    `,\n  })\n\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 && radio.checked) {\n        radio.checked = false\n        forceReflow(radio)\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":["id","createId","suffix","Radio","SizeMixin","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","inputId","hintId","errorId","hintSlot","LightSlotController","slotName","render","hint","html","nothing","syncLightDom","element","labelSlot","label","localName","isLabel","console","warn","htmlFor","errorSlot","error","inputSlot","LightDomController","handleBlur","handleFocus","ref","focusableRef","cond","name","value","checked","disabled","required","getDescribedBy","getInvalid","_formId","e","stopPropagation","dispatchEvent","Event","bubbles","cancelable","formValue","handleChange","condition","hideLabel","inner","wrapper","content","hasHint","hasError","handleCheckedChange","previousChecked","uncheckSiblings","getRootNode","querySelectorAll","forEach","radio","style","display","offsetHeight","forceReflow","target","super","styles","componentStyle","formFieldStyle","__decorate","property","type","Boolean","reflect","prototype","observe","customElement"],"mappings":"q5GAkBA,IAAIA,EAAK,EACT,MAAMC,EAAYC,GAAmB,cAAcA,KAAUF,MA+B9C,IAAMG,EAAN,cAAoBC,EAAUC,EAAoBC,EAAWC,EAAeC,OAA5E,WAAAC,uBAGMC,KAAAC,QAAUV,EAAS,SACnBS,KAAAE,OAASX,EAAS,QAClBS,KAAAG,QAAUZ,EAAS,SAKnBS,KAAAI,SAAW,IAAIC,EAAoBL,KAAM,CAC1DM,SAAU,OACVC,OAAQ,IAAOP,KAAKQ,KAAOC,CAAI,iCAAgCT,KAAKE,WAAUF,KAAKQ,aAAeE,EAClGC,aAAeC,IACbA,EAAQtB,GAAKU,KAAKE,MAAM,IAITF,KAAAa,UAAY,IAAIR,EAAoBL,KAAM,CAC3DM,SAAU,QACVC,OAAQ,IAAOP,KAAKc,MAAQL,CAAI,qCAAoCT,KAAKC,YAAWD,KAAKc,gBAAkBJ,EAC3GC,aAAeC,KAlDnB,SAAiBA,GACf,MAA6B,UAAtBA,EAAQG,SACjB,CAiDWC,CAAQJ,GACXK,QAAQC,KAAK,yEAGbN,EAAQO,QAAUnB,KAAKC,OACxB,IAIcD,KAAAoB,UAAY,IAAIf,EAAoBL,KAAM,CAC3DM,SAAU,QACVC,OAAQ,IAAOP,KAAKqB,MAAQZ,CAAI,kCAAiCT,KAAKG,YAAWH,KAAKqB,cAAgBX,EACtGC,aAAeC,IACbA,EAAQtB,GAAKU,KAAKE,MAAM,IAIlBF,KAAAsB,UAAY,IAAIC,EAAmBvB,KAAM,CACjDO,OAAQ,IAAME,CAAI,8BAGNT,KAAKwB,uBACJxB,KAAKyB,gBACZC,EAAI1B,KAAK2B,qCAEN3B,KAAKC,+BAEH2B,EAAK5B,KAAK6B,kBACRD,EAAK5B,KAAK8B,qBACR9B,KAAK+B,uBACJ/B,KAAKgC,wBACLhC,KAAKiC,+BACEL,EAAK5B,KAAKkC,oCACdN,EAAK5B,KAAKmC,wBAClBP,EAAK5B,KAAKoC,eAaqBpC,KAAO+B,SAAY,EA6DvD/B,KAAAwB,WAAca,IACpBA,EAAEC,kBACFtC,KAAKuC,cAAc,IAAIC,MAAM,OAAQ,CAAEC,SAAS,EAAOC,YAAY,IAAQ,EAGrE1C,KAAAyB,YAAeY,IACrBA,EAAEC,kBACFtC,KAAKuC,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,EAAOC,YAAY,IAAQ,CAE/E,CA9EC,aAAuBC,GAGtB,CAOD,MAAApC,GACE,OAAOE,CAAI,+DAEkCT,KAAK4C,2CAE1C5C,KAAK+B,QAAUtB,CAAI,4BAA8BC,+DC1GpBmC,ED+G3B7C,KAAK8C,UC/GsCC,EDgH3C,IAAMtC,CAAI,gEChHsDuC,EDoHhEC,GAAWxC,CAAI,yBAAyBwC,2BCnH7CJ,EAAYG,EAAQD,KAAWA,8CDqHa/C,KAAKkD,yIAKOlD,KAAKmD,gGC3H7BN,EAAgBE,EAAqBC,CDkI3E,CAGS,mBAAAI,CAAoBC,IAGvBA,GAAmBrD,KAAK+B,SAC3B/B,KAAKsD,iBAER,CAEO,eAAAA,GACOtD,KAAKuD,cAEbC,iBAAwB,oBAAoBxD,KAAK6B,UAAU4B,SAASC,IACnEA,IAAU1D,MAAQ0D,EAAM3B,UAC1B2B,EAAM3B,SAAU,EAxIxB,SAAqB2B,GACnBA,EAAMC,MAAMC,QAAU,OAEtBF,EAAMG,aACNH,EAAMC,MAAMC,QAAU,cACxB,CAoIQE,CAAYJ,GACb,GAEJ,CAES,YAAAd,CAAaP,GACrBA,EAAEC,kBACF,MAAMyB,EAAS1B,EAAE0B,OAEjB/D,KAAK+B,QAAUgC,EAAOhC,QACtBiC,MAAMpB,aAAaP,EACpB,GA/HM5C,EAAMwE,OAAG,CAACC,EAAgBC,EAAgBR,GAoELS,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAgC/E,EAAAgF,UAAA,eAAA,GAkC1DL,EAAA,CADTM,EAAQ,YAORjF,EAAAgF,UAAA,sBAAA,MA7GkBhF,EAAK2E,EAAA,CADzBO,EAAc,eACMlF,SAAAA"}

package/lib/Range.js

@@ -1,2 +1,2 @@
-import{_ as r}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as n,LitElement as a}from"lit";import{ref as o}from"lit/directives/ref.js";import{classMap as t}from"lit/directives/class-map.js";import{property as i,customElement as s}from"lit/decorators.js";import{ifDefined as c}from"lit/directives/if-defined.js";import{N as l}from"./events-Bv6wNHwJ.js";import{F as d}from"./FocusableMixin-BlQLNPdJ.js";import{F as b}from"./FormAssociatedMixin-DFL7yabe.js";import{I as m}from"./InputMixin-LetXsCyv.js";import{R as g,s as u}from"./TextField-C5gYzfOp.js";import{A as h}from"./AutocompleteMixin-D8eiOxvO.js";import{D as p}from"./DirectionController-ChvNGESZ.js";import{s as v}from"./Component-DSU3Qp0O.js";import{s as f}from"./FormField-CUC_H-0e.js";import"./FormDataController-OUt5L5uC.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./VisuallyHidden.js";const _=e`: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 k=class extends(b(h(g(m(d(a)))))){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,e=Math.max(0,(r-this.min)/(this.max-this.min));return n`<div class="n-input-container">${this.renderLabel(n`<span class="n-range-output" aria-hidden="true">${r}</span>`)} <input ${o(this.focusableRef)} id="${this.inputId}" type="range" class="${t({"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*e}%`}" ?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"))}};k.styles=[v,f,u,_],r([i({reflect:!0,type:Number})],k.prototype,"min",void 0),r([i({reflect:!0,type:Number})],k.prototype,"max",void 0),r([i({reflect:!0,type:Number})],k.prototype,"step",void 0),r([i({reflect:!0,type:Boolean})],k.prototype,"expand",void 0),k=r([s("nord-range")],k);var z=k;export{z as default};
+import{_ as r}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as n,LitElement as a}from"lit";import{property as o,customElement as t}from"lit/decorators.js";import{classMap as i}from"lit/directives/class-map.js";import{ifDefined as s}from"lit/directives/if-defined.js";import{ref as l}from"lit/directives/ref.js";import{D as c}from"./DirectionController-ChvNGESZ.js";import{N as d}from"./events-Bv6wNHwJ.js";import{A as b}from"./AutocompleteMixin-D8eiOxvO.js";import{F as m}from"./FocusableMixin-BlQLNPdJ.js";import{F as g}from"./FormAssociatedMixin-DFL7yabe.js";import{I as u}from"./InputMixin-LetXsCyv.js";import{R as h,s as v}from"./TextField-BdEdZ0_b.js";import{s as p}from"./Component-DSU3Qp0O.js";import{s as _}from"./FormField--eLuhPue.js";import"./FormDataController-OUt5L5uC.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./VisuallyHidden.js";const f=e`: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{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;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(g(b(h(u(m(a)))))){constructor(){super(...arguments),this.direction=new c(this),this.min=0,this.max=10,this.step=1,this.expand=!1}render(){const r=Number(this.value)||0,e=Math.max(0,(r-this.min)/(this.max-this.min));return n`<div class="n-input-container">${this.renderLabel(n`<span class="n-range-output" aria-hidden="true">${r}</span>`)} <input ${l(this.focusableRef)} id="${this.inputId}" type="range" class="${i({"n-range":!0,"is-rtl":this.direction.isRTL})}" name="${s(this.name)}" min="${this.min}" step="${this.step}" max="${this.max}" style="${`--_n-range-progress: ${100*e}%`}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" .value="${this.value?this.value:"0"}" @input="${this.handleInput}" @change="${this.handleChange}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(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=[p,_,v,f],r([o({reflect:!0,type:Number})],z.prototype,"min",void 0),r([o({reflect:!0,type:Number})],z.prototype,"max",void 0),r([o({reflect:!0,type:Number})],z.prototype,"step",void 0),r([o({reflect:!0,type:Boolean})],z.prototype,"expand",void 0),z=r([t("nord-range")],z);var k=z;export{k as default};
 //# sourceMappingURL=Range.js.map

package/lib/Range.js.map

@@ -1 +1 @@
-{"version":3,"file":"Range.js","sources":["../src/range/Range.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { NordEvent } from \"../common/events.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 { DirectionController } from \"../common/controllers/DirectionController.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 \"./Range.css\"\n\n/**\n * Range input lets user specify a numeric value using a slider which\n * must be no less than a given value, and no more than another given value.\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 * @cssprop [--n-range-thumb-size=20px] - Controls the size of the thumb.\n * @cssprop [--n-range-track-color-active=var(--n-color-accent)] - Controls the color of the portion of the track that represents the current value.\n * @cssprop [--n-range-track-color-inactive=var(--n-color-border-strong)] - Controls the color of the portion of the track that represents the remaining value.\n * @cssprop [--n-range-track-size=3px] - Controls the height of the track.\n */\n@customElement(\"nord-range\")\nexport default class Range extends FormAssociatedMixin(\n  AutocompleteMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement))))\n) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  private direction = new DirectionController(this)\n\n  /**\n   * Minimum value for the range slider.\n   */\n  @property({ reflect: true, type: Number }) min: number = 0\n\n  /**\n   * Maximum value for the range slider.\n   */\n  @property({ reflect: true, type: Number }) max: number = 10\n\n  /**\n   * Step amount for the range slider.\n   */\n  @property({ reflect: true, type: Number }) step: number = 1\n\n  /**\n   * Controls whether the input expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  render() {\n    const value = Number(this.value) || 0\n    const percent = Math.max(0, (value - this.min) / (this.max - this.min))\n\n    return html`\n      <div class=\"n-input-container\">\n        ${this.renderLabel(html`<span class=\"n-range-output\" aria-hidden=\"true\">${value}</span>`)}\n\n        <input\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          type=\"range\"\n          class=${classMap({\n            \"n-range\": true,\n            \"is-rtl\": this.direction.isRTL,\n          })}\n          name=${ifDefined(this.name)}\n          min=${this.min}\n          step=${this.step}\n          max=${this.max}\n          style=${`--_n-range-progress: ${percent * 100}%`}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          ?readonly=${this.readonly}\n          .value=${this.value ? this.value : \"0\"}\n          @input=${this.handleInput}\n          @change=${this.handleChange}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n        />\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  protected handleInput(e: Event) {\n    e.stopPropagation()\n    const target = e.target as HTMLInputElement\n\n    if (this.readonly) {\n      e.preventDefault()\n      target.value = this.value\n      return\n    }\n\n    this.value = target.value\n\n    /**\n     * Fired as the user types into the input.\n     */\n    this.dispatchEvent(new NordEvent(\"input\"))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-range\": Range\n  }\n}\n"],"names":["Range","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","direction","DirectionController","min","max","step","expand","render","value","Number","percent","Math","html","renderLabel","ref","focusableRef","inputId","classMap","isRTL","ifDefined","name","disabled","required","readonly","handleInput","handleChange","getDescribedBy","getInvalid","renderError","e","stopPropagation","target","preventDefault","dispatchEvent","NordEvent","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","property","reflect","type","prototype","Boolean","customElement"],"mappings":"q4HAmCe,IAAMA,EAAN,cAAoBC,EACjCC,EAAkBC,EAAcC,EAAWC,EAAeC,QAD7C,WAAAC,uBAKLC,KAAAC,UAAY,IAAIC,EAAoBF,MAKDA,KAAGG,IAAW,EAKdH,KAAGI,IAAW,GAKdJ,KAAIK,KAAW,EAKdL,KAAMM,QAAG,CAuDtD,CArDC,MAAAC,GACE,MAAMC,EAAQC,OAAOT,KAAKQ,QAAU,EAC9BE,EAAUC,KAAKP,IAAI,GAAII,EAAQR,KAAKG,MAAQH,KAAKI,IAAMJ,KAAKG,MAElE,OAAOS,CAAI,kCAELZ,KAAKa,YAAYD,CAAI,mDAAmDJ,sBAGtEM,EAAId,KAAKe,qBACNf,KAAKgB,gCAEFC,EAAS,CACf,WAAW,EACX,SAAUjB,KAAKC,UAAUiB,kBAEpBC,EAAUnB,KAAKoB,eAChBpB,KAAKG,cACJH,KAAKK,cACNL,KAAKI,eACH,wBAAkC,IAAVM,oBACpBV,KAAKqB,wBACLrB,KAAKsB,wBACLtB,KAAKuB,qBACRvB,KAAKQ,MAAQR,KAAKQ,MAAQ,gBAC1BR,KAAKwB,yBACJxB,KAAKyB,mCACIN,EAAUnB,KAAK0B,oCACnBP,EAAUnB,KAAK2B,wBAIhC3B,KAAK4B,eAEV,CAES,WAAAJ,CAAYK,GACpBA,EAAEC,kBACF,MAAMC,EAASF,EAAEE,OAEjB,GAAI/B,KAAKuB,SAGP,OAFAM,EAAEG,sBACFD,EAAOvB,MAAQR,KAAKQ,OAItBR,KAAKQ,MAAQuB,EAAOvB,MAKpBR,KAAKiC,cAAc,IAAIC,EAAU,SAClC,GA5EM1C,EAAM2C,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBC,GAOtBC,EAAA,CAA1CC,EAAS,CAAEC,SAAS,EAAMC,KAAMlC,UAAyBjB,EAAAoD,UAAA,WAAA,GAKfJ,EAAA,CAA1CC,EAAS,CAAEC,SAAS,EAAMC,KAAMlC,UAA0BjB,EAAAoD,UAAA,WAAA,GAKhBJ,EAAA,CAA1CC,EAAS,CAAEC,SAAS,EAAMC,KAAMlC,UAA0BjB,EAAAoD,UAAA,YAAA,GAKfJ,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAME,WAAyBrD,EAAAoD,UAAA,cAAA,GAzBvCpD,EAAKgD,EAAA,CADzBM,EAAc,eACMtD,SAAAA"}
+{"version":3,"file":"Range.js","sources":["../src/range/Range.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { ref } from 'lit/directives/ref.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\n\nimport { NordEvent } from '../common/events.js'\nimport { AutocompleteMixin } from '../common/mixins/AutocompleteMixin.js'\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { FormAssociatedMixin } from '../common/mixins/FormAssociatedMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport { ReadonlyMixin } from '../common/mixins/ReadonlyMixin.js'\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 './Range.css'\n\n/**\n * Range input lets user specify a numeric value using a slider which\n * must be no less than a given value, and no more than another given value.\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 * @cssprop [--n-range-thumb-size=20px] - Controls the size of the thumb.\n * @cssprop [--n-range-track-color-active=var(--n-color-accent)] - Controls the color of the portion of the track that represents the current value.\n * @cssprop [--n-range-track-color-inactive=var(--n-color-border-strong)] - Controls the color of the portion of the track that represents the remaining value.\n * @cssprop [--n-range-track-size=3px] - Controls the height of the track.\n */\n@customElement('nord-range')\nexport default class Range extends FormAssociatedMixin(\n  AutocompleteMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement)))),\n) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  private direction = new DirectionController(this)\n\n  /**\n   * Minimum value for the range slider.\n   */\n  @property({ reflect: true, type: Number }) min: number = 0\n\n  /**\n   * Maximum value for the range slider.\n   */\n  @property({ reflect: true, type: Number }) max: number = 10\n\n  /**\n   * Step amount for the range slider.\n   */\n  @property({ reflect: true, type: Number }) step: number = 1\n\n  /**\n   * Controls whether the input expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  render() {\n    const value = Number(this.value) || 0\n    const percent = Math.max(0, (value - this.min) / (this.max - this.min))\n\n    return html`\n      <div class=\"n-input-container\">\n        ${this.renderLabel(html`<span class=\"n-range-output\" aria-hidden=\"true\">${value}</span>`)}\n\n        <input\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          type=\"range\"\n          class=${classMap({\n            'n-range': true,\n            'is-rtl': this.direction.isRTL,\n          })}\n          name=${ifDefined(this.name)}\n          min=${this.min}\n          step=${this.step}\n          max=${this.max}\n          style=${`--_n-range-progress: ${percent * 100}%`}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          ?readonly=${this.readonly}\n          .value=${this.value ? this.value : '0'}\n          @input=${this.handleInput}\n          @change=${this.handleChange}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n        />\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  protected handleInput(e: Event) {\n    e.stopPropagation()\n    const target = e.target as HTMLInputElement\n\n    if (this.readonly) {\n      e.preventDefault()\n      target.value = this.value\n      return\n    }\n\n    this.value = target.value\n\n    /**\n     * Fired as the user types into the input.\n     */\n    this.dispatchEvent(new NordEvent('input'))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-range': Range\n  }\n}\n"],"names":["Range","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","direction","DirectionController","min","max","step","expand","render","value","Number","percent","Math","html","renderLabel","ref","focusableRef","inputId","classMap","isRTL","ifDefined","name","disabled","required","readonly","handleInput","handleChange","getDescribedBy","getInvalid","renderError","e","stopPropagation","target","preventDefault","dispatchEvent","NordEvent","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","property","reflect","type","prototype","Boolean","customElement"],"mappings":"q2HAmCe,IAAMA,EAAN,cAAoBC,EACjCC,EAAkBC,EAAcC,EAAWC,EAAeC,QAD7C,WAAAC,uBAKLC,KAAAC,UAAY,IAAIC,EAAoBF,MAKDA,KAAGG,IAAW,EAKdH,KAAGI,IAAW,GAKdJ,KAAIK,KAAW,EAKdL,KAAMM,QAAG,CAuDtD,CArDC,MAAAC,GACE,MAAMC,EAAQC,OAAOT,KAAKQ,QAAU,EAC9BE,EAAUC,KAAKP,IAAI,GAAII,EAAQR,KAAKG,MAAQH,KAAKI,IAAMJ,KAAKG,MAElE,OAAOS,CAAI,kCAELZ,KAAKa,YAAYD,CAAI,mDAAmDJ,sBAGtEM,EAAId,KAAKe,qBACNf,KAAKgB,gCAEFC,EAAS,CACf,WAAW,EACX,SAAUjB,KAAKC,UAAUiB,kBAEpBC,EAAUnB,KAAKoB,eAChBpB,KAAKG,cACJH,KAAKK,cACNL,KAAKI,eACH,wBAAkC,IAAVM,oBACpBV,KAAKqB,wBACLrB,KAAKsB,wBACLtB,KAAKuB,qBACRvB,KAAKQ,MAAQR,KAAKQ,MAAQ,gBAC1BR,KAAKwB,yBACJxB,KAAKyB,mCACIN,EAAUnB,KAAK0B,oCACnBP,EAAUnB,KAAK2B,wBAIhC3B,KAAK4B,eAEV,CAES,WAAAJ,CAAYK,GACpBA,EAAEC,kBACF,MAAMC,EAASF,EAAEE,OAEjB,GAAI/B,KAAKuB,SAGP,OAFAM,EAAEG,sBACFD,EAAOvB,MAAQR,KAAKQ,OAItBR,KAAKQ,MAAQuB,EAAOvB,MAKpBR,KAAKiC,cAAc,IAAIC,EAAU,SAClC,GA5EM1C,EAAM2C,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBC,GAOtBC,EAAA,CAA1CC,EAAS,CAAEC,SAAS,EAAMC,KAAMlC,UAAyBjB,EAAAoD,UAAA,WAAA,GAKfJ,EAAA,CAA1CC,EAAS,CAAEC,SAAS,EAAMC,KAAMlC,UAA0BjB,EAAAoD,UAAA,WAAA,GAKhBJ,EAAA,CAA1CC,EAAS,CAAEC,SAAS,EAAMC,KAAMlC,UAA0BjB,EAAAoD,UAAA,YAAA,GAKfJ,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAME,WAAyBrD,EAAAoD,UAAA,cAAA,GAzBvCpD,EAAKgD,EAAA,CADzBM,EAAc,eACMtD,SAAAA"}

package/lib/ScrollbarController-BFC67Y2x.js

@@ -0,0 +1,2 @@
+class t{constructor(t){t.addController(this)}hostDisconnected(){this.unlockScroll()}lockScroll(){if(0===t.locks.size){const e=document.documentElement.clientWidth,s=Math.abs(window.innerWidth-e),o=getComputedStyle(document.body),l=Number.parseInt(o.paddingRight,10)||0;t.setStyle("--n-scrollbar-gutter",`${s+l}px`),t.setStyle("overflow","hidden"),t.setStyle("padding-right","var(--n-scrollbar-gutter)")}t.locks.add(this)}unlockScroll(){t.locks.delete(this),0===t.locks.size&&(t.resets.forEach((t=>t())),t.resets=[])}static setStyle(e,s){const{style:o}=document.body,l=o.getPropertyValue(e);o.setProperty(e,s),t.resets.push((()=>o.setProperty(e,l)))}}t.locks=new Set,t.resets=[];export{t as S};
+//# sourceMappingURL=ScrollbarController-BFC67Y2x.js.map

package/lib/ScrollbarController-BFC67Y2x.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollbarController-BFC67Y2x.js","sources":["../src/common/controllers/ScrollbarController.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit'\n\n/**\n * We can have any number of components open at a time, all of which lock scroll.\n * Consider multiple modals being open, plus some popouts, etc.\n *\n * So we need some bookkeeping to know when to unlock scroll...\n *\n * But we can't simply keep a count of how many components are open,\n * since a misbehaving component may call lockScroll() multiple times.\n *\n * Nor can we rely on the first component to call lockScroll() to be the last to unlockScroll(),\n * since we cannot guarantee order of operations.\n *\n * Therefore, we track instances of ScrollbarController in a Set,\n * and only unlock scroll when the set is empty.\n *\n * We also need to be careful to restore any styles that were there\n * before we locked scroll.\n */\nexport class ScrollbarController implements ReactiveController {\n  private static locks = new Set<ScrollbarController>()\n  private static resets: Array<() => void> = []\n\n  constructor(host: ReactiveControllerHost) {\n    host.addController(this)\n  }\n\n  hostDisconnected() {\n    this.unlockScroll()\n  }\n\n  lockScroll() {\n    if (ScrollbarController.locks.size === 0) {\n      const documentWidth = document.documentElement.clientWidth\n      const width = Math.abs(window.innerWidth - documentWidth)\n\n      const computedStyle = getComputedStyle(document.body)\n      const paddingRight = Number.parseInt(computedStyle.paddingRight, 10) || 0\n\n      // hiding the scrollbar slightly increases the width of the inner viewport.\n      // this is fine for the modal, since it is accounted for there. but it causes layout shift for any other fixed position components/elements.\n      // so we define a custom property here for the gutter value, since it can be inherited/used by any other component that has a fixed position e.g. toast-group.\n      ScrollbarController.setStyle('--n-scrollbar-gutter', `${width + paddingRight}px`)\n      ScrollbarController.setStyle('overflow', 'hidden')\n      // use physical padding property rather than the logical equivalent, since the scrollbar is on always right side of the viewport, even in RTL.\n      ScrollbarController.setStyle('padding-right', `var(--n-scrollbar-gutter)`)\n    }\n\n    ScrollbarController.locks.add(this)\n  }\n\n  unlockScroll() {\n    ScrollbarController.locks.delete(this)\n\n    if (ScrollbarController.locks.size === 0) {\n      ScrollbarController.resets.forEach(reset => reset())\n      ScrollbarController.resets = []\n    }\n  }\n\n  private static setStyle(property: string, value: string) {\n    const { style } = document.body\n\n    const previous = style.getPropertyValue(property)\n    style.setProperty(property, value)\n\n    ScrollbarController.resets.push(() => style.setProperty(property, previous))\n  }\n}\n"],"names":["ScrollbarController","constructor","host","addController","this","hostDisconnected","unlockScroll","lockScroll","locks","size","documentWidth","document","documentElement","clientWidth","width","Math","abs","window","innerWidth","computedStyle","getComputedStyle","body","paddingRight","Number","parseInt","setStyle","add","delete","resets","forEach","reset","property","value","style","previous","getPropertyValue","setProperty","push","Set"],"mappings":"MAoBaA,EAIX,WAAAC,CAAYC,GACVA,EAAKC,cAAcC,KACpB,CAED,gBAAAC,GACED,KAAKE,cACN,CAED,UAAAC,GACE,GAAuC,IAAnCP,EAAoBQ,MAAMC,KAAY,CACxC,MAAMC,EAAgBC,SAASC,gBAAgBC,YACzCC,EAAQC,KAAKC,IAAIC,OAAOC,WAAaR,GAErCS,EAAgBC,iBAAiBT,SAASU,MAC1CC,EAAeC,OAAOC,SAASL,EAAcG,aAAc,KAAO,EAKxEtB,EAAoByB,SAAS,uBAAwB,GAAGX,EAAQQ,OAChEtB,EAAoByB,SAAS,WAAY,UAEzCzB,EAAoByB,SAAS,gBAAiB,4BAC/C,CAEDzB,EAAoBQ,MAAMkB,IAAItB,KAC/B,CAED,YAAAE,GACEN,EAAoBQ,MAAMmB,OAAOvB,MAEM,IAAnCJ,EAAoBQ,MAAMC,OAC5BT,EAAoB4B,OAAOC,SAAQC,GAASA,MAC5C9B,EAAoB4B,OAAS,GAEhC,CAEO,eAAOH,CAASM,EAAkBC,GACxC,MAAMC,MAAEA,GAAUtB,SAASU,KAErBa,EAAWD,EAAME,iBAAiBJ,GACxCE,EAAMG,YAAYL,EAAUC,GAE5BhC,EAAoB4B,OAAOS,MAAK,IAAMJ,EAAMG,YAAYL,EAAUG,IACnE,EA/CclC,EAAAQ,MAAQ,IAAI8B,IACZtC,EAAM4B,OAAsB"}

package/lib/SegmentedControl.js

@@ -1,2 +1,2 @@
-import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as o,LitElement as r,html as t}from"lit";import{property as n,customElement as s}from"lit/decorators.js";import{classMap as d}from"lit/directives/class-map.js";import{S as l}from"./SlotController-Z6eG7LSZ.js";import{s as i}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";const a=o`:host{display:inline-block}:host([expand]){display:block}.n-segmented-control{border:1px solid var(--n-color-border);border-radius:var(--n-border-radius-s);background-color:var(--n-color-nav-hover);display:inline-flex;gap:1px}.n-disabled{opacity:.5;border-color:var(--n-color-border);background-color:var(--n-color-border)}::slotted(nord-segmented-control-item){inline-size:100%}::slotted(nord-segmented-control-item:not([checked]):first-of-type){--n-segmented-control-item-border-radius:calc(var(--n-border-radius-s) - 1px) 0 0 calc(var(--n-border-radius-s) - 1px)}::slotted(nord-segmented-control-item:not([checked]):last-of-type){--n-segmented-control-item-border-radius:0 calc(var(--n-border-radius-s) - 1px) calc(var(--n-border-radius-s) - 1px) 0}::slotted(nord-segmented-control-item)::after{content:"";background:var(--n-color-border);position:absolute;inline-size:1.5px;inset-block-start:27.5%;inset-inline-end:-1px;block-size:45%;z-index:var(--n-index-masked)}::slotted(nord-segmented-control-item:last-of-type)::after,::slotted(nord-segmented-control-item[checked])::after{display:none}:host([expand]) .n-segmented-control{--n-segmented-control-item-inline-size:100%;display:flex;flex-direction:row;align-items:stretch;gap:0}`;let c=class extends r{constructor(){super(...arguments),this.defaultSlot=new l(this),this.expand=!1}render(){const e=this.defaultSlot.assigned.every((e=>!!e.hasAttribute("disabled")));return t`<div class="${d({"n-segmented-control":!0,"n-disabled":e})}"><slot></slot></div>`}};c.styles=[i,a],e([n({reflect:!0,type:Boolean})],c.prototype,"expand",void 0),c=e([s("nord-segmented-control")],c);var m=c;export{m as default};
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as o,LitElement as r,html as t}from"lit";import{property as n,customElement as s}from"lit/decorators.js";import{classMap as d}from"lit/directives/class-map.js";import{S as l}from"./SlotController-Z6eG7LSZ.js";import{s as i}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";const a=o`:host{display:inline-block}:host([expand]){display:block}.n-segmented-control{border:1px solid var(--n-color-border);border-radius:var(--n-border-radius-s);background-color:var(--n-color-nav-hover);display:inline-flex;gap:1px}.n-disabled{opacity:.5;border-color:var(--n-color-border);background-color:var(--n-color-border)}::slotted(nord-segmented-control-item){inline-size:100%}::slotted(nord-segmented-control-item:not([checked]):first-of-type){--n-segmented-control-item-border-radius:calc(var(--n-border-radius-s) - 1px) 0 0 calc(var(--n-border-radius-s) - 1px)}::slotted(nord-segmented-control-item:not([checked]):last-of-type){--n-segmented-control-item-border-radius:0 calc(var(--n-border-radius-s) - 1px) calc(var(--n-border-radius-s) - 1px) 0}::slotted(nord-segmented-control-item)::after{content:'';background:var(--n-color-border);position:absolute;inline-size:1.5px;inset-block-start:27.5%;inset-inline-end:-1px;block-size:45%;z-index:var(--n-index-masked)}::slotted(nord-segmented-control-item:last-of-type)::after,::slotted(nord-segmented-control-item[checked])::after{display:none}:host([expand]) .n-segmented-control{--n-segmented-control-item-inline-size:100%;display:flex;flex-direction:row;align-items:stretch;gap:0}`;let c=class extends r{constructor(){super(...arguments),this.defaultSlot=new l(this),this.expand=!1}render(){const e=this.defaultSlot.assigned.every((e=>!!e.hasAttribute("disabled")));return t`<div class="${d({"n-segmented-control":!0,"n-disabled":e})}"><slot></slot></div>`}};c.styles=[i,a],e([n({reflect:!0,type:Boolean})],c.prototype,"expand",void 0),c=e([s("nord-segmented-control")],c);var m=c;export{m as default};
 //# sourceMappingURL=SegmentedControl.js.map

package/lib/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","sources":["../src/segmented-control/SegmentedControl.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./SegmentedControl.css\"\n\n/**\n * Segmented control is used to pick one choice from a set of\n * closely related choices, and immediately apply that selection.\n *\n * @status new\n * @category action\n * @slot - Default slot.\n *\n * @fires {NordEvent} change - Fired whenever a segmented control item has been checked.\n */\n@customElement(\"nord-segmented-control\")\nexport default class SegmentedControl extends LitElement {\n  static styles = [componentStyle, style]\n\n  private defaultSlot = new SlotController(this)\n\n  /**\n   * Controls whether the segmented control expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  render() {\n    const isDisabled = this.defaultSlot.assigned.every(node => {\n      if (node.hasAttribute(\"disabled\")) {\n        return true\n      }\n      return false\n    })\n\n    return html`<div\n      class=${classMap({\n        \"n-segmented-control\": true,\n        \"n-disabled\": isDisabled,\n      })}\n    >\n      <slot></slot>\n    </div>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-segmented-control\": SegmentedControl\n  }\n}\n"],"names":["SegmentedControl","LitElement","constructor","this","defaultSlot","SlotController","expand","render","isDisabled","assigned","every","node","hasAttribute","html","classMap","styles","componentStyle","style","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"yjDAmBe,IAAMA,EAAN,cAA+BC,EAA/B,WAAAC,uBAGLC,KAAAC,YAAc,IAAIC,EAAeF,MAKGA,KAAMG,QAAG,CAmBtD,CAjBC,MAAAC,GACE,MAAMC,EAAaL,KAAKC,YAAYK,SAASC,OAAMC,KAC7CA,EAAKC,aAAa,cAMxB,OAAOC,CAAI,eACDC,EAAS,CACf,uBAAuB,EACvB,aAAcN,0BAKnB,GAzBMR,EAAAe,OAAS,CAACC,EAAgBC,GAOWC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBtB,EAAAuB,UAAA,cAAA,GARvCvB,EAAgBkB,EAAA,CADpCM,EAAc,2BACMxB,SAAAA"}
+{"version":3,"file":"SegmentedControl.js","sources":["../src/segmented-control/SegmentedControl.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport style from './SegmentedControl.css'\n\n/**\n * Segmented control is used to pick one choice from a set of\n * closely related choices, and immediately apply that selection.\n *\n * @status new\n * @category action\n * @slot - Default slot.\n *\n * @fires {NordEvent} change - Fired whenever a segmented control item has been checked.\n */\n@customElement('nord-segmented-control')\nexport default class SegmentedControl extends LitElement {\n  static styles = [componentStyle, style]\n\n  private defaultSlot = new SlotController(this)\n\n  /**\n   * Controls whether the segmented control expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  render() {\n    const isDisabled = this.defaultSlot.assigned.every((node) => {\n      if (node.hasAttribute('disabled')) {\n        return true\n      }\n      return false\n    })\n\n    return html`<div\n      class=${classMap({\n        'n-segmented-control': true,\n        'n-disabled': isDisabled,\n      })}\n    >\n      <slot></slot>\n    </div>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-segmented-control': SegmentedControl\n  }\n}\n"],"names":["SegmentedControl","LitElement","constructor","this","defaultSlot","SlotController","expand","render","isDisabled","assigned","every","node","hasAttribute","html","classMap","styles","componentStyle","style","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"yjDAmBe,IAAMA,EAAN,cAA+BC,EAA/B,WAAAC,uBAGLC,KAAAC,YAAc,IAAIC,EAAeF,MAKGA,KAAMG,QAAG,CAmBtD,CAjBC,MAAAC,GACE,MAAMC,EAAaL,KAAKC,YAAYK,SAASC,OAAOC,KAC9CA,EAAKC,aAAa,cAMxB,OAAOC,CAAI,eACDC,EAAS,CACf,uBAAuB,EACvB,aAAcN,0BAKnB,GAzBMR,EAAAe,OAAS,CAACC,EAAgBC,GAOWC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBtB,EAAAuB,UAAA,cAAA,GARvCvB,EAAgBkB,EAAA,CADpCM,EAAc,2BACMxB,SAAAA"}

package/lib/SegmentedControlItem.js

@@ -1,2 +1,45 @@
-import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as t,html as n,nothing as o,LitElement as r}from"lit";import{property as i,customElement as a}from"lit/decorators.js";import{ref as s}from"lit/directives/ref.js";import{o as l}from"./observe-D0n0zOfU.js";import{c}from"./cond-CI1KbneT.js";import{L as m}from"./LightDomController-DIwtVelV.js";import{L as d}from"./LightSlotController-Coyy4nqS.js";import{N as g}from"./events-Bv6wNHwJ.js";import{F as p}from"./FocusableMixin-BlQLNPdJ.js";import{I as v}from"./InputMixin-LetXsCyv.js";import{s as h}from"./Component-DSU3Qp0O.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";const b=t`:host{--_n-segmented-control-item-gap:var(--n-segmented-control-item-gap, var(--n-space-xs));--_n-segmented-control-item-padding-inline:var(--n-segmented-control-item-padding-inline, calc(var(--n-space-m) / 1.2));--_n-segmented-control-item-min-block-size:var(--n-segmented-control-item-min-block-size, calc(var(--n-space-xl) - 2px));--_n-segmented-control-item-font-size:var(--n-segmented-control-item-font-size, var(--n-font-size-m));--_n-segmented-control-item-font-weight:var(--n-segmented-control-item-font-weight, var(--n-font-weight));--_n-segmented-control-item-gradient:var(--n-segmented-control-item-gradient, linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%));--_n-segmented-control-item-background-color:var(--n-segmented-control-item-background-color, var(--n-color-nav-hover));--_n-segmented-control-item-color:var(--n-segmented-control-item-color, var(--n-color-text-weaker));--_n-segmented-control-item-border-radius:var(--n-segmented-control-item-border-radius, 0);--_n-segmented-control-item-inline-size:var(--n-segmented-control-item-inline-size, auto);--_n-segmented-control-item-box-shadow:var(--n-segmented-control-item-box-shadow, none);--_n-segmented-control-item-icon-size:var(--n-size-icon-s);--_n-segmented-control-item-opacity:1;position:relative;flex:1}::slotted(label){--n-icon-size:var(--_n-segmented-control-item-icon-size);display:flex!important;align-items:center;justify-content:center;border-radius:var(--_n-segmented-control-item-border-radius)!important;transition:var(--n-transition-quickly)!important;transition-property:background-color,color,border-color!important;font-family:var(--n-font-family)!important;font-size:var(--_n-segmented-control-item-font-size)!important;font-feature-settings:var(--n-font-features);font-weight:var(--_n-segmented-control-item-font-weight)!important;line-height:var(--n-line-height-form)!important;color:var(--_n-segmented-control-item-color)!important;padding:calc(var(--n-space-xs) - 1px) var(--_n-segmented-control-item-padding-inline)!important;background-color:var(--_n-segmented-control-item-background-color)!important;box-shadow:var(--_n-segmented-control-item-box-shadow)!important;cursor:pointer;position:relative!important;gap:var(--_n-segmented-control-item-gap);white-space:nowrap!important;inline-size:var(--_n-segmented-control-item-inline-size);-webkit-user-select:none;user-select:none;border:0!important;opacity:var(--_n-segmented-control-item-opacity);min-block-size:var(--_n-segmented-control-item-min-block-size)!important}::slotted(input){position:absolute!important;appearance:none!important;background:0 0!important;border:0!important;transition:var(--n-transition-quickly)!important;transition-property:background-color,color,border-color,box-shadow!important;border-radius:var(--n-border-radius-s)!important;inset-block-start:0!important;inset-inline-start:0!important;inline-size:100%!important;block-size:100%!important;padding:0!important;margin:0!important}::slotted(input:focus-visible),:host([checked]){z-index:var(--n-index-mask)}:host([checked]) ::slotted(label){--_n-segmented-control-item-background-color:var(--n-segmented-control-item-background-color, var(--n-color-surface));--_n-segmented-control-item-color:var(--n-segmented-control-item-color, var(--n-color-text));--_n-segmented-control-item-border-radius:var(--n-segmented-control-item-border-radius, var(--n-border-radius-s));--_n-segmented-control-item-box-shadow:var(--n-segmented-control-item-box-shadow, 0 0 0 1px var(--n-color-border-strong), var(--n-box-shadow), var(--n-box-shadow));z-index:var(--n-index-mask)}:host([checked]) ::slotted(label)::after{content:"";position:absolute;background:0 0;background-image:var(--_n-segmented-control-item-gradient);border-radius:var(--n-border-radius-s);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}:host([checked]) ::slotted(label:hover){--_n-segmented-control-item-background-color:var(--n-segmented-control-item-background-color, var(--n-color-button-hover));--_n-segmented-control-item-color:var(--n-segmented-control-item-color, var(--n-color-text));--_n-segmented-control-item-box-shadow:var(--n-segmented-control-item-box-shadow, 0 0 0 1px var(--n-color-border-hover), var(--n-box-shadow), var(--n-box-shadow))}:host([disabled]){--_n-segmented-control-item-color:var(--n-segmented-control-item-color, var(--n-color-text-weak));pointer-events:none}:host([disabled]:not([checked])){--_n-segmented-control-item-background-color:var(--n-segmented-control-item-background-color, transparent)}::slotted(label:hover){--_n-segmented-control-item-background-color:var(--n-segmented-control-item-background-color, var(--n-color-surface-lowered));--_n-segmented-control-item-color:var(--n-segmented-control-item-color, var(--n-color-text))}::slotted(input:focus){outline:0}::slotted(input:focus-visible){box-shadow:0 0 0 2px var(--n-color-accent),var(--n-box-shadow)!important;z-index:calc(var(--n-index-mask) + 1)!important}::slotted(label:active){opacity:.8;transition:none}:host([size="s"]){--_n-segmented-control-item-gap:var(--n-segmented-control-item-gap, var(--n-space-xs));--_n-segmented-control-item-padding-inline:var(--n-segmented-control-item-padding-inline, calc(var(--n-space-s) + 1px));--_n-segmented-control-item-min-block-size:var(--n-segmented-control-item-min-block-size, calc(var(--n-space-l) + var(--n-space-xs) - 2px));--_n-segmented-control-item-font-size:var(--n-segmented-control-item-font-size, var(--n-font-size-s));--_n-segmented-control-item-icon-size:var(--n-size-icon-xs)}:host([size="l"]){--_n-segmented-control-item-gap:var(--n-segmented-control-item-gap, var(--n-space-s));--_n-segmented-control-item-padding-inline:var(--n-segmented-control-item-padding-inline, calc(var(--n-space-l) / 1.3));--_n-segmented-control-item-min-block-size:var(--n-segmented-control-item-min-block-size, calc(var(--n-space-xxl) - var(--n-space-l) - 2px));--_n-segmented-control-item-font-size:var(--n-segmented-control-item-font-size, var(--n-font-size-l));--_n-segmented-control-item-font-weight:var(--n-segmented-control-item-font-weight, var(--n-font-weight-active));--_n-segmented-control-item-icon-size:var(--n-size-icon-m)}`;let u=0;let f=class extends(v(p(r))){constructor(){super(...arguments),this.inputId=`nord-segmented-control-item-${"input"}-${u++}`,this.inputSlot=new m(this,{render:()=>n`<input slot="input" @blur="${this.handleBlur}" @focus="${this.handleFocus}" ${s(this.focusableRef)} id="${this.inputId}" type="radio" class="n-input" name="${c(this.name)}" .value="${c(this.value)}" .checked="${this.checked}" ?disabled="${this.disabled}" form="${c(this._formId)}">`}),this.labelSlot=new d(this,{slotName:"label",render:()=>this.label?n`<label slot="label-internal" for="${this.inputId}" class="n-segmented-control-item">${this.label}</label>`:o,syncLightDom:e=>{!function(e){return"label"===e.localName}(e)?console.warn('NORD: Only <label> elements should be placed in Segmented Control\'s "label" slot'):e.htmlFor=this.inputId}}),this.checked=!1,this.size="m",this.label="",this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new Event("blur",{bubbles:!1,cancelable:!0}))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new Event("focus",{bubbles:!1,cancelable:!0}))}}render(){return n`<div class="n-segmented-control-item" @change="${this.handleChange}"><slot name="input"></slot><slot name="label"></slot><slot name="label-internal"></slot></div>`}handleCheckedChange(e){!e&&this.checked&&this.uncheckSiblings()}uncheckSiblings(){this.getRootNode().querySelectorAll(`nord-segmented-control-item[name="${this.name}"]`).forEach((e=>{e!==this&&(e.checked=!1)}))}handleChange(e){const t=e.target;this.checked=t.checked,e.stopPropagation(),this.dispatchEvent(new g("change"))}handleInput(e){e.stopPropagation();const t=e.target;this.value=t.value,this.dispatchEvent(new g("input"))}};f.styles=[h,b],e([i({type:Boolean,reflect:!0})],f.prototype,"checked",void 0),e([i({reflect:!0})],f.prototype,"size",void 0),e([i({reflect:!0})],f.prototype,"label",void 0),e([l("checked")],f.prototype,"handleCheckedChange",null),f=e([a("nord-segmented-control-item")],f);var k=f;export{k as default};
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as t,html as n,nothing as o,LitElement as r}from"lit";import{property as i,customElement as a}from"lit/decorators.js";import{ref as s}from"lit/directives/ref.js";import{L as l}from"./LightDomController-DIwtVelV.js";import{L as c}from"./LightSlotController-Coyy4nqS.js";import{o as m}from"./observe-D0n0zOfU.js";import{c as d}from"./cond-CI1KbneT.js";import{N as g}from"./events-Bv6wNHwJ.js";import{F as p}from"./FocusableMixin-BlQLNPdJ.js";import{I as v}from"./InputMixin-LetXsCyv.js";import{s as h}from"./Component-DSU3Qp0O.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";const b=t`:host{--_n-segmented-control-item-gap:var(--n-segmented-control-item-gap, var(--n-space-xs));--_n-segmented-control-item-padding-inline:var(
+    --n-segmented-control-item-padding-inline,
+    calc(var(--n-space-m) / 1.2)
+  );--_n-segmented-control-item-min-block-size:var(
+    --n-segmented-control-item-min-block-size,
+    calc(var(--n-space-xl) - 2px)
+  );--_n-segmented-control-item-font-size:var(--n-segmented-control-item-font-size, var(--n-font-size-m));--_n-segmented-control-item-font-weight:var(--n-segmented-control-item-font-weight, var(--n-font-weight));--_n-segmented-control-item-gradient:var(
+    --n-segmented-control-item-gradient,
+    linear-gradient(to bottom, rgb(0, 0, 0, 0) 50%, rgb(0, 0, 0, 0.013) 100%)
+  );--_n-segmented-control-item-background-color:var(
+    --n-segmented-control-item-background-color,
+    var(--n-color-nav-hover)
+  );--_n-segmented-control-item-color:var(--n-segmented-control-item-color, var(--n-color-text-weaker));--_n-segmented-control-item-border-radius:var(--n-segmented-control-item-border-radius, 0);--_n-segmented-control-item-inline-size:var(--n-segmented-control-item-inline-size, auto);--_n-segmented-control-item-box-shadow:var(--n-segmented-control-item-box-shadow, none);--_n-segmented-control-item-icon-size:var(--n-size-icon-s);--_n-segmented-control-item-opacity:1;position:relative;flex:1}::slotted(label){--n-icon-size:var(--_n-segmented-control-item-icon-size);display:flex!important;align-items:center;justify-content:center;border-radius:var(--_n-segmented-control-item-border-radius)!important;transition:var(--n-transition-quickly)!important;transition-property:background-color,color,border-color!important;font-family:var(--n-font-family)!important;font-size:var(--_n-segmented-control-item-font-size)!important;font-feature-settings:var(--n-font-features);font-weight:var(--_n-segmented-control-item-font-weight)!important;line-height:var(--n-line-height-form)!important;color:var(--_n-segmented-control-item-color)!important;padding:calc(var(--n-space-xs) - 1px) var(--_n-segmented-control-item-padding-inline)!important;background-color:var(--_n-segmented-control-item-background-color)!important;box-shadow:var(--_n-segmented-control-item-box-shadow)!important;cursor:pointer;position:relative!important;gap:var(--_n-segmented-control-item-gap);white-space:nowrap!important;inline-size:var(--_n-segmented-control-item-inline-size);user-select:none;border:0!important;opacity:var(--_n-segmented-control-item-opacity);min-block-size:var(--_n-segmented-control-item-min-block-size)!important}::slotted(input){position:absolute!important;appearance:none!important;background:0 0!important;border:0!important;transition:var(--n-transition-quickly)!important;transition-property:background-color,color,border-color,box-shadow!important;border-radius:var(--n-border-radius-s)!important;inset-block-start:0!important;inset-inline-start:0!important;inline-size:100%!important;block-size:100%!important;padding:0!important;margin:0!important}::slotted(input:focus-visible),:host([checked]){z-index:var(--n-index-mask)}:host([checked]) ::slotted(label){--_n-segmented-control-item-background-color:var(
+    --n-segmented-control-item-background-color,
+    var(--n-color-surface)
+  );--_n-segmented-control-item-color:var(--n-segmented-control-item-color, var(--n-color-text));--_n-segmented-control-item-border-radius:var(--n-segmented-control-item-border-radius, var(--n-border-radius-s));--_n-segmented-control-item-box-shadow:var(
+    --n-segmented-control-item-box-shadow,
+    0 0 0 1px var(--n-color-border-strong),
+    var(--n-box-shadow),
+    var(--n-box-shadow)
+  );z-index:var(--n-index-mask)}:host([checked]) ::slotted(label)::after{content:'';position:absolute;background:0 0;background-image:var(--_n-segmented-control-item-gradient);border-radius:var(--n-border-radius-s);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}:host([checked]) ::slotted(label:hover){--_n-segmented-control-item-background-color:var(
+    --n-segmented-control-item-background-color,
+    var(--n-color-button-hover)
+  );--_n-segmented-control-item-color:var(--n-segmented-control-item-color, var(--n-color-text));--_n-segmented-control-item-box-shadow:var(
+    --n-segmented-control-item-box-shadow,
+    0 0 0 1px var(--n-color-border-hover),
+    var(--n-box-shadow),
+    var(--n-box-shadow)
+  )}:host([disabled]){--_n-segmented-control-item-color:var(--n-segmented-control-item-color, var(--n-color-text-weak));pointer-events:none}:host([disabled]:not([checked])){--_n-segmented-control-item-background-color:var(--n-segmented-control-item-background-color, transparent)}::slotted(label:hover){--_n-segmented-control-item-background-color:var(
+    --n-segmented-control-item-background-color,
+    var(--n-color-surface-lowered)
+  );--_n-segmented-control-item-color:var(--n-segmented-control-item-color, var(--n-color-text))}::slotted(input:focus){outline:0}::slotted(input:focus-visible){box-shadow:0 0 0 2px var(--n-color-accent),var(--n-box-shadow)!important;z-index:calc(var(--n-index-mask) + 1)!important}::slotted(label:active){opacity:.8;transition:none}:host([size='s']){--_n-segmented-control-item-gap:var(--n-segmented-control-item-gap, var(--n-space-xs));--_n-segmented-control-item-padding-inline:var(
+    --n-segmented-control-item-padding-inline,
+    calc(var(--n-space-s) + 1px)
+  );--_n-segmented-control-item-min-block-size:var(
+    --n-segmented-control-item-min-block-size,
+    calc(var(--n-space-l) + var(--n-space-xs) - 2px)
+  );--_n-segmented-control-item-font-size:var(--n-segmented-control-item-font-size, var(--n-font-size-s));--_n-segmented-control-item-icon-size:var(--n-size-icon-xs)}:host([size='l']){--_n-segmented-control-item-gap:var(--n-segmented-control-item-gap, var(--n-space-s));--_n-segmented-control-item-padding-inline:var(
+    --n-segmented-control-item-padding-inline,
+    calc(var(--n-space-l) / 1.3)
+  );--_n-segmented-control-item-min-block-size:var(
+    --n-segmented-control-item-min-block-size,
+    calc(var(--n-space-xxl) - var(--n-space-l) - 2px)
+  );--_n-segmented-control-item-font-size:var(--n-segmented-control-item-font-size, var(--n-font-size-l));--_n-segmented-control-item-font-weight:var(--n-segmented-control-item-font-weight, var(--n-font-weight-active));--_n-segmented-control-item-icon-size:var(--n-size-icon-m)}`;let u=0;let f=class extends(v(p(r))){constructor(){super(...arguments),this.inputId=`nord-segmented-control-item-${"input"}-${u++}`,this.inputSlot=new l(this,{render:()=>n`<input slot="input" @blur="${this.handleBlur}" @focus="${this.handleFocus}" ${s(this.focusableRef)} id="${this.inputId}" type="radio" class="n-input" name="${d(this.name)}" .value="${d(this.value)}" .checked="${this.checked}" ?disabled="${this.disabled}" form="${d(this._formId)}">`}),this.labelSlot=new c(this,{slotName:"label",render:()=>this.label?n`<label slot="label-internal" for="${this.inputId}" class="n-segmented-control-item">${this.label}</label>`:o,syncLightDom:e=>{!function(e){return"label"===e.localName}(e)?console.warn('NORD: Only <label> elements should be placed in Segmented Control\'s "label" slot'):e.htmlFor=this.inputId}}),this.checked=!1,this.size="m",this.label="",this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new Event("blur",{bubbles:!1,cancelable:!0}))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new Event("focus",{bubbles:!1,cancelable:!0}))}}render(){return n`<div class="n-segmented-control-item" @change="${this.handleChange}"><slot name="input"></slot><slot name="label"></slot><slot name="label-internal"></slot></div>`}handleCheckedChange(e){!e&&this.checked&&this.uncheckSiblings()}uncheckSiblings(){this.getRootNode().querySelectorAll(`nord-segmented-control-item[name="${this.name}"]`).forEach((e=>{e!==this&&(e.checked=!1)}))}handleChange(e){const t=e.target;this.checked=t.checked,e.stopPropagation(),this.dispatchEvent(new g("change"))}handleInput(e){e.stopPropagation();const t=e.target;this.value=t.value,this.dispatchEvent(new g("input"))}};f.styles=[h,b],e([i({type:Boolean,reflect:!0})],f.prototype,"checked",void 0),e([i({reflect:!0})],f.prototype,"size",void 0),e([i({reflect:!0})],f.prototype,"label",void 0),e([m("checked")],f.prototype,"handleCheckedChange",null),f=e([a("nord-segmented-control-item")],f);var k=f;export{k as default};
 //# sourceMappingURL=SegmentedControlItem.js.map

package/lib/SegmentedControlItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlItem.js","sources":["../src/segmented-control-item/SegmentedControlItem.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { LightDomController } from \"../common/controllers/LightDomController.js\"\nimport { LightSlotController } from \"../common/controllers/LightSlotController.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./SegmentedControlItem.css\"\n\nlet id = 0\nconst createId = (suffix: string) => `nord-segmented-control-item-${suffix}-${id++}`\n\nfunction isLabel(element: Element): element is HTMLLabelElement {\n  return element.localName === \"label\"\n}\n\ntype NativeInputElement = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement\n\n/**\n * Segmented control items populate a segmented control with options.\n * Every item should be placed inside a segmented control.\n *\n * @status new\n * @category action\n * @slot label - Use when a label requires more than plain text.\n *\n * @cssprop [--n-segmented-control-item-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the item, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-segmented-control-item-gap=var(--n-space-xs)] - Controls the spacing between elements within the item, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-segmented-control-item-gradient=linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))] - Controls the overlayed gradient background on the item.\n * @cssprop [--n-segmented-control-item-background-color=var(--n-color-nav-hover)] - Controls the background color of the item, using our [color tokens](/tokens/#color).\n * @cssprop [--n-segmented-control-item-color=var(--n-color-text-weaker)] - Controls the color of the text within the item, using our [color tokens](/tokens/#color).\n * @cssprop [--n-segmented-control-item-padding-inline=calc(var(--n-space-m) / 1.2)] - Controls the inline, or left and right, padding of the item.\n * @cssprop [--n-segmented-control-item-box-shadow=none] - Controls the surrounding shadow, using our [box shadow tokens](/tokens/#box-shadow).\n * @cssprop [--n-segmented-control-item-font-size=var(--n-font-size-m)] - Controls the size of the text within the item, using our [font tokens](/tokens/#font).\n * @cssprop [--n-segmented-control-item-font-weight=var(--n-font-weight)] - Controls the weight of the text within the item, using our [font tokens](/tokens/#font).\n * @cssprop [--n-segmented-control-item-min-block-size=calc(var(--n-space-xl) - 2px)] - Controls the minimum block size, or height, of the item using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-segmented-control-item-inline-size=auto] - Controls the inline size of the item.\n */\n@customElement(\"nord-segmented-control-item\")\nexport default class SegmentedControlItem extends InputMixin(FocusableMixin(LitElement)) {\n  static styles = [componentStyle, style]\n\n  protected inputId = createId(\"input\")\n\n  /**\n   * For accessibility reasons, we render the form parts of the component to the light DOM.\n   */\n  protected inputSlot = new LightDomController(this, {\n    render: () => html`\n      <input\n        slot=\"input\"\n        @blur=${this.handleBlur}\n        @focus=${this.handleFocus}\n        ${ref(this.focusableRef)}\n        id=${this.inputId}\n        type=\"radio\"\n        class=\"n-input\"\n        name=${cond(this.name)}\n        .value=${cond(this.value)}\n        .checked=${this.checked}\n        ?disabled=${this.disabled}\n        form=${cond(this._formId)}\n      />\n    `,\n  })\n\n  protected labelSlot = new LightSlotController(this, {\n    slotName: \"label\",\n    render: () =>\n      this.label\n        ? html`<label slot=\"label-internal\" for=${this.inputId} class=\"n-segmented-control-item\">${this.label}</label>`\n        : 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 Segmented Control's \"label\" slot`)\n      } else {\n        element.htmlFor = this.inputId\n      }\n    },\n  })\n\n  /**\n   * Controls whether the segmented control item is checked or not.\n   */\n  @property({ type: Boolean, reflect: true }) checked: boolean = false\n\n  /**\n   * The size of the segmented control item.\n   * This affects font-size and padding.\n   */\n  @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n\n  /**\n   * Label for the segmented control item.\n   */\n  @property({ reflect: true }) label: string = \"\"\n\n  render() {\n    return html`<div class=\"n-segmented-control-item\" @change=${this.handleChange}>\n      <slot name=\"input\"></slot>\n      <slot name=\"label\"></slot>\n      <slot name=\"label-internal\"></slot>\n    </div>`\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 items 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\n      .querySelectorAll<SegmentedControlItem>(`nord-segmented-control-item[name=\"${this.name}\"]`)\n      .forEach(segmentedControlItem => {\n        if (segmentedControlItem !== this) {\n          segmentedControlItem.checked = false\n        }\n      })\n  }\n\n  protected handleChange(e: Event): void {\n    const target = e.target as HTMLInputElement\n    this.checked = target.checked\n\n    e.stopPropagation()\n\n    /**\n     * Fired whenever the segmented control item has been checked.\n     */\n    this.dispatchEvent(new NordEvent(\"change\"))\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  protected handleInput(e: Event) {\n    e.stopPropagation()\n    const target = e.target as NativeInputElement\n    this.value = target.value\n\n    /**\n     * Fired as the user types into the input.\n     */\n    this.dispatchEvent(new NordEvent(\"input\"))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-segmented-control-item\": SegmentedControlItem\n  }\n}\n"],"names":["id","SegmentedControlItem","InputMixin","FocusableMixin","LitElement","constructor","this","inputId","inputSlot","LightDomController","render","html","handleBlur","handleFocus","ref","focusableRef","cond","name","value","checked","disabled","_formId","labelSlot","LightSlotController","slotName","label","nothing","syncLightDom","element","localName","isLabel","console","warn","htmlFor","size","e","stopPropagation","dispatchEvent","Event","bubbles","cancelable","handleChange","handleCheckedChange","previousChecked","uncheckSiblings","getRootNode","querySelectorAll","forEach","segmentedControlItem","target","NordEvent","handleInput","styles","componentStyle","style","__decorate","property","type","Boolean","reflect","prototype","observe","customElement"],"mappings":"kvNAeA,IAAIA,EAAK,EA8BM,IAAMC,EAAN,cAAmCC,EAAWC,EAAeC,KAA7D,WAAAC,uBAGHC,KAAAC,QAhCyB,+BAgCN,WAhC+CP,MAqClEM,KAAAE,UAAY,IAAIC,EAAmBH,KAAM,CACjDI,OAAQ,IAAMC,CAAI,8BAGNL,KAAKM,uBACJN,KAAKO,gBACZC,EAAIR,KAAKS,qBACNT,KAAKC,+CAGHS,EAAKV,KAAKW,kBACRD,EAAKV,KAAKY,qBACRZ,KAAKa,uBACJb,KAAKc,mBACVJ,EAAKV,KAAKe,eAKbf,KAAAgB,UAAY,IAAIC,EAAoBjB,KAAM,CAClDkB,SAAU,QACVd,OAAQ,IACNJ,KAAKmB,MACDd,CAAI,qCAAoCL,KAAKC,6CAA4CD,KAAKmB,gBAC9FC,EACNC,aAAcC,KA5DlB,SAAiBA,GACf,MAA6B,UAAtBA,EAAQC,SACjB,CA2DWC,CAAQF,GAEXG,QAAQC,KAAK,qFAEbJ,EAAQK,QAAU3B,KAAKC,OACxB,IAOuCD,KAAOa,SAAY,EAMlCb,KAAI4B,KAAoB,IAKxB5B,KAAKmB,MAAW,GA2CrCnB,KAAAM,WAAcuB,IACpBA,EAAEC,kBACF9B,KAAK+B,cAAc,IAAIC,MAAM,OAAQ,CAAEC,SAAS,EAAOC,YAAY,IAAQ,EAGrElC,KAAAO,YAAesB,IACrBA,EAAEC,kBACF9B,KAAK+B,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,EAAOC,YAAY,IAAQ,CAa/E,CA7DC,MAAA9B,GACE,OAAOC,CAAI,kDAAiDL,KAAKmC,6GAKlE,CAGS,mBAAAC,CAAoBC,IAGvBA,GAAmBrC,KAAKa,SAC3Bb,KAAKsC,iBAER,CAEO,eAAAA,GACOtC,KAAKuC,cAGfC,iBAAuC,qCAAqCxC,KAAKW,UACjF8B,SAAQC,IACHA,IAAyB1C,OAC3B0C,EAAqB7B,SAAU,EAChC,GAEN,CAES,YAAAsB,CAAaN,GACrB,MAAMc,EAASd,EAAEc,OACjB3C,KAAKa,QAAU8B,EAAO9B,QAEtBgB,EAAEC,kBAKF9B,KAAK+B,cAAc,IAAIa,EAAU,UAClC,CAYS,WAAAC,CAAYhB,GACpBA,EAAEC,kBACF,MAAMa,EAASd,EAAEc,OACjB3C,KAAKY,MAAQ+B,EAAO/B,MAKpBZ,KAAK+B,cAAc,IAAIa,EAAU,SAClC,GAtHMjD,EAAAmD,OAAS,CAACC,EAAgBC,GA6CWC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAgC1D,EAAA2D,UAAA,eAAA,GAMvCL,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAAmC1D,EAAA2D,UAAA,YAAA,GAK3BL,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAA0B1D,EAAA2D,UAAA,aAAA,GAWrCL,EAAA,CADTM,EAAQ,YAOR5D,EAAA2D,UAAA,sBAAA,MA1EkB3D,EAAoBsD,EAAA,CADxCO,EAAc,gCACM7D,SAAAA"}
+{"version":3,"file":"SegmentedControlItem.js","sources":["../src/segmented-control-item/SegmentedControlItem.ts"],"sourcesContent":["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 { NordEvent } from '../common/events.js'\n\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport style from './SegmentedControlItem.css'\n\nlet id = 0\nconst createId = (suffix: string) => `nord-segmented-control-item-${suffix}-${id++}`\n\nfunction isLabel(element: Element): element is HTMLLabelElement {\n  return element.localName === 'label'\n}\n\ntype NativeInputElement = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement\n\n/**\n * Segmented control items populate a segmented control with options.\n * Every item should be placed inside a segmented control.\n *\n * @status new\n * @category action\n * @slot label - Use when a label requires more than plain text.\n *\n * @cssprop [--n-segmented-control-item-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the item, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-segmented-control-item-gap=var(--n-space-xs)] - Controls the spacing between elements within the item, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-segmented-control-item-gradient=linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))] - Controls the overlayed gradient background on the item.\n * @cssprop [--n-segmented-control-item-background-color=var(--n-color-nav-hover)] - Controls the background color of the item, using our [color tokens](/tokens/#color).\n * @cssprop [--n-segmented-control-item-color=var(--n-color-text-weaker)] - Controls the color of the text within the item, using our [color tokens](/tokens/#color).\n * @cssprop [--n-segmented-control-item-padding-inline=calc(var(--n-space-m) / 1.2)] - Controls the inline, or left and right, padding of the item.\n * @cssprop [--n-segmented-control-item-box-shadow=none] - Controls the surrounding shadow, using our [box shadow tokens](/tokens/#box-shadow).\n * @cssprop [--n-segmented-control-item-font-size=var(--n-font-size-m)] - Controls the size of the text within the item, using our [font tokens](/tokens/#font).\n * @cssprop [--n-segmented-control-item-font-weight=var(--n-font-weight)] - Controls the weight of the text within the item, using our [font tokens](/tokens/#font).\n * @cssprop [--n-segmented-control-item-min-block-size=calc(var(--n-space-xl) - 2px)] - Controls the minimum block size, or height, of the item using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-segmented-control-item-inline-size=auto] - Controls the inline size of the item.\n */\n@customElement('nord-segmented-control-item')\nexport default class SegmentedControlItem extends InputMixin(FocusableMixin(LitElement)) {\n  static styles = [componentStyle, style]\n\n  protected inputId = createId('input')\n\n  /**\n   * For accessibility reasons, we render the form parts of the component to the light DOM.\n   */\n  protected inputSlot = new LightDomController(this, {\n    render: () => html`\n      <input\n        slot=\"input\"\n        @blur=${this.handleBlur}\n        @focus=${this.handleFocus}\n        ${ref(this.focusableRef)}\n        id=${this.inputId}\n        type=\"radio\"\n        class=\"n-input\"\n        name=${cond(this.name)}\n        .value=${cond(this.value)}\n        .checked=${this.checked}\n        ?disabled=${this.disabled}\n        form=${cond(this._formId)}\n      />\n    `,\n  })\n\n  protected labelSlot = new LightSlotController(this, {\n    slotName: 'label',\n    render: () =>\n      this.label\n        ? html`<label slot=\"label-internal\" for=${this.inputId} class=\"n-segmented-control-item\">${this.label}</label>`\n        : nothing,\n    syncLightDom: (element) => {\n      if (!isLabel(element)) {\n        console.warn(`NORD: Only <label> elements should be placed in Segmented Control's \"label\" slot`)\n      }\n      else {\n        element.htmlFor = this.inputId\n      }\n    },\n  })\n\n  /**\n   * Controls whether the segmented control item is checked or not.\n   */\n  @property({ type: Boolean, reflect: true }) checked: boolean = false\n\n  /**\n   * The size of the segmented control item.\n   * This affects font-size and padding.\n   */\n  @property({ reflect: true }) size: 's' | 'm' | 'l' = 'm'\n\n  /**\n   * Label for the segmented control item.\n   */\n  @property({ reflect: true }) label: string = ''\n\n  render() {\n    return html`<div class=\"n-segmented-control-item\" @change=${this.handleChange}>\n      <slot name=\"input\"></slot>\n      <slot name=\"label\"></slot>\n      <slot name=\"label-internal\"></slot>\n    </div>`\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 items 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\n      .querySelectorAll<SegmentedControlItem>(`nord-segmented-control-item[name=\"${this.name}\"]`)\n      .forEach((segmentedControlItem) => {\n        if (segmentedControlItem !== this) {\n          segmentedControlItem.checked = false\n        }\n      })\n  }\n\n  protected handleChange(e: Event): void {\n    const target = e.target as HTMLInputElement\n    this.checked = target.checked\n\n    e.stopPropagation()\n\n    /**\n     * Fired whenever the segmented control item has been checked.\n     */\n    this.dispatchEvent(new NordEvent('change'))\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  protected handleInput(e: Event) {\n    e.stopPropagation()\n    const target = e.target as NativeInputElement\n    this.value = target.value\n\n    /**\n     * Fired as the user types into the input.\n     */\n    this.dispatchEvent(new NordEvent('input'))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-segmented-control-item': SegmentedControlItem\n  }\n}\n"],"names":["id","SegmentedControlItem","InputMixin","FocusableMixin","LitElement","constructor","this","inputId","inputSlot","LightDomController","render","html","handleBlur","handleFocus","ref","focusableRef","cond","name","value","checked","disabled","_formId","labelSlot","LightSlotController","slotName","label","nothing","syncLightDom","element","localName","isLabel","console","warn","htmlFor","size","e","stopPropagation","dispatchEvent","Event","bubbles","cancelable","handleChange","handleCheckedChange","previousChecked","uncheckSiblings","getRootNode","querySelectorAll","forEach","segmentedControlItem","target","NordEvent","handleInput","styles","componentStyle","style","__decorate","property","type","Boolean","reflect","prototype","observe","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wRAeA,IAAIA,EAAK,EA8BM,IAAMC,EAAN,cAAmCC,EAAWC,EAAeC,KAA7D,WAAAC,uBAGHC,KAAAC,QAhCyB,+BAgCN,WAhC+CP,MAqClEM,KAAAE,UAAY,IAAIC,EAAmBH,KAAM,CACjDI,OAAQ,IAAMC,CAAI,8BAGNL,KAAKM,uBACJN,KAAKO,gBACZC,EAAIR,KAAKS,qBACNT,KAAKC,+CAGHS,EAAKV,KAAKW,kBACRD,EAAKV,KAAKY,qBACRZ,KAAKa,uBACJb,KAAKc,mBACVJ,EAAKV,KAAKe,eAKbf,KAAAgB,UAAY,IAAIC,EAAoBjB,KAAM,CAClDkB,SAAU,QACVd,OAAQ,IACNJ,KAAKmB,MACDd,CAAI,qCAAoCL,KAAKC,6CAA4CD,KAAKmB,gBAC9FC,EACNC,aAAeC,KA5DnB,SAAiBA,GACf,MAA6B,UAAtBA,EAAQC,SACjB,CA2DWC,CAAQF,GACXG,QAAQC,KAAK,qFAGbJ,EAAQK,QAAU3B,KAAKC,OACxB,IAOuCD,KAAOa,SAAY,EAMlCb,KAAI4B,KAAoB,IAKxB5B,KAAKmB,MAAW,GA2CrCnB,KAAAM,WAAcuB,IACpBA,EAAEC,kBACF9B,KAAK+B,cAAc,IAAIC,MAAM,OAAQ,CAAEC,SAAS,EAAOC,YAAY,IAAQ,EAGrElC,KAAAO,YAAesB,IACrBA,EAAEC,kBACF9B,KAAK+B,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,EAAOC,YAAY,IAAQ,CAa/E,CA7DC,MAAA9B,GACE,OAAOC,CAAI,kDAAiDL,KAAKmC,6GAKlE,CAGS,mBAAAC,CAAoBC,IAGvBA,GAAmBrC,KAAKa,SAC3Bb,KAAKsC,iBAER,CAEO,eAAAA,GACOtC,KAAKuC,cAGfC,iBAAuC,qCAAqCxC,KAAKW,UACjF8B,SAASC,IACJA,IAAyB1C,OAC3B0C,EAAqB7B,SAAU,EAChC,GAEN,CAES,YAAAsB,CAAaN,GACrB,MAAMc,EAASd,EAAEc,OACjB3C,KAAKa,QAAU8B,EAAO9B,QAEtBgB,EAAEC,kBAKF9B,KAAK+B,cAAc,IAAIa,EAAU,UAClC,CAYS,WAAAC,CAAYhB,GACpBA,EAAEC,kBACF,MAAMa,EAASd,EAAEc,OACjB3C,KAAKY,MAAQ+B,EAAO/B,MAKpBZ,KAAK+B,cAAc,IAAIa,EAAU,SAClC,GAtHMjD,EAAAmD,OAAS,CAACC,EAAgBC,GA6CWC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAgC1D,EAAA2D,UAAA,eAAA,GAMvCL,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAAmC1D,EAAA2D,UAAA,YAAA,GAK3BL,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAA0B1D,EAAA2D,UAAA,aAAA,GAWrCL,EAAA,CADTM,EAAQ,YAOR5D,EAAA2D,UAAA,sBAAA,MA1EkB3D,EAAoBsD,EAAA,CADxCO,EAAc,gCACM7D,SAAAA"}

package/lib/Select.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as o,isServer as n,LitElement as r}from"lit";import{property as i,customElement as s}from"lit/decorators.js";import{ifDefined as l}from"lit/directives/if-defined.js";import{ref as a}from"lit/directives/ref.js";import"./Button.js";import c from"./Icon.js";import{I as d}from"./InputMixin-LetXsCyv.js";import{F as p}from"./FocusableMixin-BlQLNPdJ.js";import{F as u}from"./FormAssociatedMixin-DFL7yabe.js";import{A as b}from"./AutocompleteMixin-D8eiOxvO.js";import{S as v}from"./SizeMixin-CU9cLbLC.js";import{s as h}from"./Component-DSU3Qp0O.js";import{s as m}from"./FormField-CUC_H-0e.js";import{S as f}from"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./LightDomController-DIwtVelV.js";import"./cond-CI1KbneT.js";import"./Spinner.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"./observe-D0n0zOfU.js";import"./FormDataController-OUt5L5uC.js";import"./events-Bv6wNHwJ.js";import"./VisuallyHidden.js";var x=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>',tags:"nordicon small interface dropdown select arrow up down caret triangle chevron",title:"interface-dropdown-small"});const g=e`:host{--_n-select-inline-size:var(--n-select-inline-size, fit-content);--_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-button:not([expand]){--_n-button-inline-size:var(--_n-select-inline-size)}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))}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)}`;c.registerIcon(x);let j=class extends(v(u(b(d(p(r)))))){constructor(){super(...arguments),this.defaultSlot=new f(this),this.inputId="select",this.expand=!1}get formValue(){return this.value||void 0}firstUpdated(){this.setupOptionObserver()}connectedCallback(){super.connectedCallback(),this.hasUpdated&&!this.optionObserver&&this.setupOptionObserver()}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.optionObserver)||void 0===t||t.disconnect(),this.optionObserver=void 0}setupOptionObserver(){this.optionObserver||(this.optionObserver=new MutationObserver((()=>this.requestUpdate())),this.optionObserver.observe(this,{subtree:!0,childList:!0,characterData:!0}))}render(){const t=this.options,e=this.getButtonText(t);return o`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${a(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${l(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${l(this.getDescribedBy())}" aria-invalid="${l(this.getInvalid())}" autocomplete="${this.autocomplete}">${this.placeholder&&o`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${t.map((t=>this.renderOption(t)))}</select><nord-button size="${this.size}" ?disabled="${this.disabled}" ?expand="${this.expand}" type="button" inert><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 n?[]:Array.from(this.querySelectorAll("option"))}getButtonText(t){const e=t.find((t=>t.value===this.value.toString()));return e?e.text:this.placeholder?this.placeholder:t[0]?t[0].text:""}renderOption(t){return o`<option value="${l(t.value)}" ?disabled="${t.disabled}" .selected="${t.value===this.value.toString()}">${t.text}</option>`}};j.styles=[h,m,g],t([i({reflect:!0,type:Boolean})],j.prototype,"expand",void 0),j=t([s("nord-select")],j);var $=j;export{$ as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as o,isServer as n,LitElement as r}from"lit";import{property as i,customElement as s}from"lit/decorators.js";import{ifDefined as l}from"lit/directives/if-defined.js";import{ref as a}from"lit/directives/ref.js";import{S as c}from"./SlotController-Z6eG7LSZ.js";import{A as d}from"./AutocompleteMixin-D8eiOxvO.js";import{F as p}from"./FocusableMixin-BlQLNPdJ.js";import{F as u}from"./FormAssociatedMixin-DFL7yabe.js";import{I as b}from"./InputMixin-LetXsCyv.js";import{S as v}from"./SizeMixin-CU9cLbLC.js";import{s as h}from"./Component-DSU3Qp0O.js";import{s as m}from"./FormField--eLuhPue.js";import f from"./Icon.js";import"./Button.js";import"./EventController-BBOmvfLa.js";import"./FormDataController-OUt5L5uC.js";import"./events-Bv6wNHwJ.js";import"./VisuallyHidden.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";var x=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>',tags:"nordicon small interface dropdown select arrow up down caret triangle chevron",title:"interface-dropdown-small"});const j=e`:host{--_n-select-inline-size:var(--n-select-inline-size, fit-content);--_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{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-button:not([expand]){--_n-button-inline-size:var(--_n-select-inline-size)}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))}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)}`;f.registerIcon(x);let g=class extends(v(u(d(b(p(r)))))){constructor(){super(...arguments),this.defaultSlot=new c(this),this.inputId="select",this.expand=!1}get formValue(){return this.value||void 0}firstUpdated(){this.setupOptionObserver()}connectedCallback(){super.connectedCallback(),this.hasUpdated&&!this.optionObserver&&this.setupOptionObserver()}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.optionObserver)||void 0===t||t.disconnect(),this.optionObserver=void 0}setupOptionObserver(){this.optionObserver||(this.optionObserver=new MutationObserver((()=>this.requestUpdate())),this.optionObserver.observe(this,{subtree:!0,childList:!0,characterData:!0}))}render(){const t=this.options,e=this.getButtonText(t);return o`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${a(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${l(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${l(this.getDescribedBy())}" aria-invalid="${l(this.getInvalid())}" autocomplete="${this.autocomplete}">${this.placeholder&&o`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${t.map((t=>this.renderOption(t)))}</select><nord-button size="${this.size}" ?disabled="${this.disabled}" ?expand="${this.expand}" type="button" inert><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 n?[]:Array.from(this.querySelectorAll("option"))}getButtonText(t){const e=t.find((t=>t.value===this.value.toString()));return e?e.text:this.placeholder?this.placeholder:t[0]?t[0].text:""}renderOption(t){return o`<option value="${l(t.value)}" ?disabled="${t.disabled}" .selected="${t.value===this.value.toString()}">${t.text}</option>`}};g.styles=[h,m,j],t([i({reflect:!0,type:Boolean})],g.prototype,"expand",void 0),g=t([s("nord-select")],g);var $=g;export{$ as default};
 //# sourceMappingURL=Select.js.map

package/lib/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../icons/lib/assets/interface-dropdown-small.js","../src/select/Select.ts"],"sourcesContent":["export 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>'\nexport const title = \"interface-dropdown-small\"\nexport const tags = \"nordicon small interface dropdown select arrow up down caret triangle chevron\"\n","/* eslint-disable lit-a11y/no-invalid-change-handler */\nimport { LitElement, html, isServer } 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 * as dropdownIcon from \"@nordhealth/icons/lib/assets/interface-dropdown-small.js\"\n\nimport \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\n\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.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 style from \"./Select.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\nIcon.registerIcon(dropdownIcon)\n\n/**\n * Select lets users choose one option from an options menu.\n * Consider using select when you have 5 or more options to choose from.\n *\n * @status ready\n * @category form\n * @slot - Default slot for holding <option> elements.\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Use when a hint requires more than plain text.\n * @slot error - Optional slot that holds error text for the input.\n * @slot icon - Used to place an icon at the start of select.\n *\n * @cssprop [--n-select-block-size=var(--n-space-xl)] - Controls the block size, or height, of the select using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-select-inline-size=fit-content] - Controls the inline size, or width, of the select.\n * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).\n */\n@customElement(\"nord-select\")\nexport default class Select extends SizeMixin(\n  FormAssociatedMixin(AutocompleteMixin(InputMixin(FocusableMixin(LitElement))))\n) {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  protected override get formValue() {\n    return this.value || undefined\n  }\n\n  private defaultSlot = new SlotController(this)\n  private optionObserver?: MutationObserver\n\n  protected inputId = \"select\"\n\n  firstUpdated() {\n    this.setupOptionObserver()\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    // Re-setup observer after reconnection (firstUpdated only runs once per instance)\n    if (this.hasUpdated && !this.optionObserver) {\n      this.setupOptionObserver()\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    // Clean up observer to prevent memory leaks\n    this.optionObserver?.disconnect()\n    this.optionObserver = undefined\n  }\n\n  private setupOptionObserver() {\n    // Avoid creating multiple observers\n    if (this.optionObserver) {\n      return\n    }\n\n    // Set up observer to watch for changes to slotted option content\n    this.optionObserver = new MutationObserver(() => this.requestUpdate())\n    this.optionObserver.observe(this, {\n      subtree: true,\n      childList: true,\n      characterData: true,\n    })\n  }\n\n  /**\n   * Controls whether the select expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  render() {\n    const slottedOptions = this.options\n    const buttonText = this.getButtonText(slottedOptions)\n\n    return html`\n      <slot></slot>\n      ${this.renderLabel()}\n\n      <div class=\"n-select-container\">\n        <select\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\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        >\n          ${this.placeholder && html`<option value=\"\" disabled ?selected=${!this.value}>${this.placeholder}</option>`}\n          ${slottedOptions.map(option => this.renderOption(option))}\n        </select>\n\n        <nord-button size=${this.size} ?disabled=${this.disabled} ?expand=${this.expand} type=\"button\" inert>\n          <slot slot=\"start\" name=\"icon\"></slot>\n          ${buttonText}\n          <nord-icon slot=\"end\" name=\"interface-dropdown-small\"></nord-icon>\n        </nord-button>\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  private get options() {\n    if (isServer) {\n      return []\n    }\n\n    return Array.from(this.querySelectorAll(\"option\"))\n  }\n\n  private getButtonText(options: HTMLOptionElement[]): string {\n    const selected = options.find(option => option.value === this.value.toString())\n\n    if (selected) {\n      return selected.text\n    }\n\n    if (this.placeholder) {\n      return this.placeholder\n    }\n\n    if (options[0]) {\n      return options[0].text\n    }\n\n    return \"\"\n  }\n\n  private renderOption(option: HTMLOptionElement) {\n    return html`\n      <option\n        value=${ifDefined(option.value)}\n        ?disabled=${option.disabled}\n        .selected=${option.value === this.value.toString()}\n      >\n        ${option.text}\n      </option>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-select\": Select\n  }\n}\n"],"names":["Icon","registerIcon","dropdownIcon","Select","SizeMixin","FormAssociatedMixin","AutocompleteMixin","InputMixin","FocusableMixin","LitElement","constructor","this","defaultSlot","SlotController","inputId","expand","formValue","value","undefined","firstUpdated","setupOptionObserver","connectedCallback","super","hasUpdated","optionObserver","disconnectedCallback","_a","disconnect","MutationObserver","requestUpdate","observe","subtree","childList","characterData","render","slottedOptions","options","buttonText","getButtonText","html","renderLabel","ref","focusableRef","disabled","required","ifDefined","name","handleChange","handleInput","getDescribedBy","getInvalid","autocomplete","placeholder","map","option","renderOption","size","renderError","isServer","Array","from","querySelectorAll","selected","find","toString","text","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"uiCAAe,uaAEK,sFADC,6nDCoBrBA,EAAKC,aAAaC,GAmBH,IAAMC,EAAN,cAAqBC,EAClCC,EAAoBC,EAAkBC,EAAWC,EAAeC,QADnD,WAAAC,uBASLC,KAAAC,YAAc,IAAIC,EAAeF,MAG/BA,KAAOG,QAAG,SAuCwBH,KAAMI,QAAG,CA2EtD,CAzHC,aAAuBC,GACrB,OAAOL,KAAKM,YAASC,CACtB,CAOD,YAAAC,GACER,KAAKS,qBACN,CAED,iBAAAC,GACEC,MAAMD,oBAEFV,KAAKY,aAAeZ,KAAKa,gBAC3Bb,KAAKS,qBAER,CAED,oBAAAK,SACEH,MAAMG,uBAEe,QAArBC,EAAAf,KAAKa,sBAAgB,IAAAE,GAAAA,EAAAC,aACrBhB,KAAKa,oBAAiBN,CACvB,CAEO,mBAAAE,GAEFT,KAAKa,iBAKTb,KAAKa,eAAiB,IAAII,kBAAiB,IAAMjB,KAAKkB,kBACtDlB,KAAKa,eAAeM,QAAQnB,KAAM,CAChCoB,SAAS,EACTC,WAAW,EACXC,eAAe,IAElB,CAOD,MAAAC,GACE,MAAMC,EAAiBxB,KAAKyB,QACtBC,EAAa1B,KAAK2B,cAAcH,GAEtC,OAAOI,CAAI,gBAEP5B,KAAK6B,wDAIDC,EAAI9B,KAAK+B,qBACN/B,KAAKG,uBACEH,KAAKgC,wBACLhC,KAAKiC,mBACVC,EAAUlC,KAAKmC,mBACZnC,KAAKoC,yBACNpC,KAAKqC,kCACKH,EAAUlC,KAAKsC,oCACnBJ,EAAUlC,KAAKuC,gCACfvC,KAAKwC,iBAElBxC,KAAKyC,aAAeb,CAAI,oDAAwC5B,KAAKM,UAASN,KAAKyC,0BACnFjB,EAAekB,KAAIC,GAAU3C,KAAK4C,aAAaD,mCAG/B3C,KAAK6C,oBAAkB7C,KAAKgC,sBAAoBhC,KAAKI,qEAErEsB,0FAKJ1B,KAAK8C,eAEV,CAED,WAAYrB,GACV,OAAIsB,EACK,GAGFC,MAAMC,KAAKjD,KAAKkD,iBAAiB,UACzC,CAEO,aAAAvB,CAAcF,GACpB,MAAM0B,EAAW1B,EAAQ2B,MAAKT,GAAUA,EAAOrC,QAAUN,KAAKM,MAAM+C,aAEpE,OAAIF,EACKA,EAASG,KAGdtD,KAAKyC,YACAzC,KAAKyC,YAGVhB,EAAQ,GACHA,EAAQ,GAAG6B,KAGb,EACR,CAEO,YAAAV,CAAaD,GACnB,OAAOf,CAAI,kBAECM,EAAUS,EAAOrC,sBACbqC,EAAOX,wBACPW,EAAOrC,QAAUN,KAAKM,MAAM+C,eAEtCV,EAAOW,eAGd,GA1HM9D,EAAM+D,OAAG,CAACC,EAAgBC,EAAgBC,GAgDLC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBvE,EAAAwE,UAAA,cAAA,GAnDvCxE,EAAMmE,EAAA,CAD1BM,EAAc,gBACMzE,SAAAA"}
+{"version":3,"file":"Select.js","sources":["../../icons/lib/assets/interface-dropdown-small.js","../src/select/Select.ts"],"sourcesContent":["export 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>';\nexport const title = \"interface-dropdown-small\";\nexport const tags =\n  \"nordicon small interface dropdown select arrow up down caret triangle chevron\";\n","import * as dropdownIcon from '@nordhealth/icons/lib/assets/interface-dropdown-small.js'\nimport { html, isServer, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { ref } from 'lit/directives/ref.js'\n\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { AutocompleteMixin } from '../common/mixins/AutocompleteMixin.js'\n\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { FormAssociatedMixin } from '../common/mixins/FormAssociatedMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport { SizeMixin } from '../common/mixins/SizeMixin.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport formFieldStyle from '../common/styles/FormField.css'\nimport Icon from '../icon/Icon.js'\nimport style from './Select.css'\nimport '../button/Button.js'\n\nIcon.registerIcon(dropdownIcon)\n\n/**\n * Select lets users choose one option from an options menu.\n * Consider using select when you have 5 or more options to choose from.\n *\n * @status ready\n * @category form\n * @slot - Default slot for holding <option> elements.\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Use when a hint requires more than plain text.\n * @slot error - Optional slot that holds error text for the input.\n * @slot icon - Used to place an icon at the start of select.\n *\n * @cssprop [--n-select-block-size=var(--n-space-xl)] - Controls the block size, or height, of the select using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-select-inline-size=fit-content] - Controls the inline size, or width, of the select.\n * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).\n */\n@customElement('nord-select')\nexport default class Select extends SizeMixin(\n  FormAssociatedMixin(AutocompleteMixin(InputMixin(FocusableMixin(LitElement)))),\n) {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  protected override get formValue() {\n    return this.value || undefined\n  }\n\n  private defaultSlot = new SlotController(this)\n  private optionObserver?: MutationObserver\n\n  protected inputId = 'select'\n\n  firstUpdated() {\n    this.setupOptionObserver()\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    // Re-setup observer after reconnection (firstUpdated only runs once per instance)\n    if (this.hasUpdated && !this.optionObserver) {\n      this.setupOptionObserver()\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    // Clean up observer to prevent memory leaks\n    this.optionObserver?.disconnect()\n    this.optionObserver = undefined\n  }\n\n  private setupOptionObserver() {\n    // Avoid creating multiple observers\n    if (this.optionObserver) {\n      return\n    }\n\n    // Set up observer to watch for changes to slotted option content\n    this.optionObserver = new MutationObserver(() => this.requestUpdate())\n    this.optionObserver.observe(this, {\n      subtree: true,\n      childList: true,\n      characterData: true,\n    })\n  }\n\n  /**\n   * Controls whether the select expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  render() {\n    const slottedOptions = this.options\n    const buttonText = this.getButtonText(slottedOptions)\n\n    return html`\n      <slot></slot>\n      ${this.renderLabel()}\n\n      <div class=\"n-select-container\">\n        <select\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\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        >\n          ${this.placeholder && html`<option value=\"\" disabled ?selected=${!this.value}>${this.placeholder}</option>`}\n          ${slottedOptions.map(option => this.renderOption(option))}\n        </select>\n\n        <nord-button size=${this.size} ?disabled=${this.disabled} ?expand=${this.expand} type=\"button\" inert>\n          <slot slot=\"start\" name=\"icon\"></slot>\n          ${buttonText}\n          <nord-icon slot=\"end\" name=\"interface-dropdown-small\"></nord-icon>\n        </nord-button>\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  private get options() {\n    if (isServer) {\n      return []\n    }\n\n    return Array.from(this.querySelectorAll('option'))\n  }\n\n  private getButtonText(options: HTMLOptionElement[]): string {\n    const selected = options.find(option => option.value === this.value.toString())\n\n    if (selected) {\n      return selected.text\n    }\n\n    if (this.placeholder) {\n      return this.placeholder\n    }\n\n    if (options[0]) {\n      return options[0].text\n    }\n\n    return ''\n  }\n\n  private renderOption(option: HTMLOptionElement) {\n    return html`\n      <option\n        value=${ifDefined(option.value)}\n        ?disabled=${option.disabled}\n        .selected=${option.value === this.value.toString()}\n      >\n        ${option.text}\n      </option>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-select': Select\n  }\n}\n"],"names":["Icon","registerIcon","dropdownIcon","Select","SizeMixin","FormAssociatedMixin","AutocompleteMixin","InputMixin","FocusableMixin","LitElement","constructor","this","defaultSlot","SlotController","inputId","expand","formValue","value","undefined","firstUpdated","setupOptionObserver","connectedCallback","super","hasUpdated","optionObserver","disconnectedCallback","_a","disconnect","MutationObserver","requestUpdate","observe","subtree","childList","characterData","render","slottedOptions","options","buttonText","getButtonText","html","renderLabel","ref","focusableRef","disabled","required","ifDefined","name","handleChange","handleInput","getDescribedBy","getInvalid","autocomplete","placeholder","map","option","renderOption","size","renderError","isServer","Array","from","querySelectorAll","selected","find","toString","text","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"uiCAAe,uaAGb,sFAFmB,qmDCmBrBA,EAAKC,aAAaC,GAmBH,IAAMC,EAAN,cAAqBC,EAClCC,EAAoBC,EAAkBC,EAAWC,EAAeC,QADnD,WAAAC,uBASLC,KAAAC,YAAc,IAAIC,EAAeF,MAG/BA,KAAOG,QAAG,SAuCwBH,KAAMI,QAAG,CA2EtD,CAzHC,aAAuBC,GACrB,OAAOL,KAAKM,YAASC,CACtB,CAOD,YAAAC,GACER,KAAKS,qBACN,CAED,iBAAAC,GACEC,MAAMD,oBAEFV,KAAKY,aAAeZ,KAAKa,gBAC3Bb,KAAKS,qBAER,CAED,oBAAAK,SACEH,MAAMG,uBAEe,QAArBC,EAAAf,KAAKa,sBAAgB,IAAAE,GAAAA,EAAAC,aACrBhB,KAAKa,oBAAiBN,CACvB,CAEO,mBAAAE,GAEFT,KAAKa,iBAKTb,KAAKa,eAAiB,IAAII,kBAAiB,IAAMjB,KAAKkB,kBACtDlB,KAAKa,eAAeM,QAAQnB,KAAM,CAChCoB,SAAS,EACTC,WAAW,EACXC,eAAe,IAElB,CAOD,MAAAC,GACE,MAAMC,EAAiBxB,KAAKyB,QACtBC,EAAa1B,KAAK2B,cAAcH,GAEtC,OAAOI,CAAI,gBAEP5B,KAAK6B,wDAIDC,EAAI9B,KAAK+B,qBACN/B,KAAKG,uBACEH,KAAKgC,wBACLhC,KAAKiC,mBACVC,EAAUlC,KAAKmC,mBACZnC,KAAKoC,yBACNpC,KAAKqC,kCACKH,EAAUlC,KAAKsC,oCACnBJ,EAAUlC,KAAKuC,gCACfvC,KAAKwC,iBAElBxC,KAAKyC,aAAeb,CAAI,oDAAwC5B,KAAKM,UAASN,KAAKyC,0BACnFjB,EAAekB,KAAIC,GAAU3C,KAAK4C,aAAaD,mCAG/B3C,KAAK6C,oBAAkB7C,KAAKgC,sBAAoBhC,KAAKI,qEAErEsB,0FAKJ1B,KAAK8C,eAEV,CAED,WAAYrB,GACV,OAAIsB,EACK,GAGFC,MAAMC,KAAKjD,KAAKkD,iBAAiB,UACzC,CAEO,aAAAvB,CAAcF,GACpB,MAAM0B,EAAW1B,EAAQ2B,MAAKT,GAAUA,EAAOrC,QAAUN,KAAKM,MAAM+C,aAEpE,OAAIF,EACKA,EAASG,KAGdtD,KAAKyC,YACAzC,KAAKyC,YAGVhB,EAAQ,GACHA,EAAQ,GAAG6B,KAGb,EACR,CAEO,YAAAV,CAAaD,GACnB,OAAOf,CAAI,kBAECM,EAAUS,EAAOrC,sBACbqC,EAAOX,wBACPW,EAAOrC,QAAUN,KAAKM,MAAM+C,eAEtCV,EAAOW,eAGd,GA1HM9D,EAAM+D,OAAG,CAACC,EAAgBC,EAAgBC,GAgDLC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBvE,EAAAwE,UAAA,cAAA,GAnDvCxE,EAAMmE,EAAA,CAD1BM,EAAc,gBACMzE,SAAAA"}

package/lib/SelectEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectEvent.js","sources":["../src/command-menu/SelectEvent.ts"],"sourcesContent":["import { NordEvent } from \"../common/events.js\"\nimport { ICommandMenuAction } from \"./ICommandMenuAction.js\"\n\nexport class SelectEvent extends NordEvent {\n  static eventName = \"nord-select\"\n\n  constructor(public command: ICommandMenuAction) {\n    super(SelectEvent.eventName)\n  }\n}\n"],"names":["SelectEvent","NordEvent","constructor","command","super","eventName","this"],"mappings":"yCAGM,MAAOA,UAAoBC,EAG/B,WAAAC,CAAmBC,GACjBC,MAAMJ,EAAYK,WADDC,KAAOH,QAAPA,CAElB,EAJMH,EAASK,UAAG"}
+{"version":3,"file":"SelectEvent.js","sources":["../src/command-menu/SelectEvent.ts"],"sourcesContent":["import type { ICommandMenuAction } from './ICommandMenuAction.js'\nimport { NordEvent } from '../common/events.js'\n\nexport class SelectEvent extends NordEvent {\n  static eventName = 'nord-select'\n\n  constructor(public command: ICommandMenuAction) {\n    super(SelectEvent.eventName)\n  }\n}\n"],"names":["SelectEvent","NordEvent","constructor","command","super","eventName","this"],"mappings":"yCAGM,MAAOA,UAAoBC,EAG/B,WAAAC,CAAmBC,GACjBC,MAAMJ,EAAYK,WADDC,KAAOH,QAAPA,CAElB,EAJMH,EAASK,UAAG"}

package/lib/ShortcutController-BIb3WGzH.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShortcutController-BIb3WGzH.js","sources":["../src/common/controllers/ShortcutController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport type { KeyBindingMap } from \"tinykeys\"\nimport tinykeys from \"tinykeys\"\n\ntype ShortcutTarget = Parameters<typeof tinykeys>[0]\n\nconst ARROW_RE = /Arrow(Up|Down|Left|Right)/g\nconst ESC_RE = /Escape/g\n\nfunction normalise(shortcuts: KeyBindingMap) {\n  const normalised: KeyBindingMap = {}\n\n  Object.keys(shortcuts).forEach(keybinding => {\n    normalised[keybinding] = shortcuts[keybinding]\n\n    // Arrow and Escape keys in IE/Edge have different names\n    if (ARROW_RE.test(keybinding)) {\n      const mapped = keybinding.replace(ARROW_RE, (_match, capture) => capture)\n      normalised[mapped] = normalised[keybinding]\n    }\n    if (ESC_RE.test(keybinding)) {\n      const mapped = keybinding.replace(ESC_RE, () => \"Esc\")\n      normalised[mapped] = normalised[keybinding]\n    }\n  })\n\n  return normalised\n}\n\nexport class ShortcutController implements ReactiveController {\n  private unregister?: ReturnType<typeof tinykeys>\n\n  constructor(\n    host: ReactiveControllerHost,\n    private shortcuts?: KeyBindingMap,\n    private target?: ShortcutTarget\n  ) {\n    host.addController(this)\n  }\n\n  hostConnected() {\n    if (this.shortcuts) {\n      this.bind(this.shortcuts)\n    }\n  }\n\n  hostDisconnected() {\n    this.unbind()\n  }\n\n  unbind() {\n    this.unregister?.()\n  }\n\n  bind(shortcuts: KeyBindingMap) {\n    this.unbind()\n    this.shortcuts = shortcuts\n    this.unregister = tinykeys(this.target ?? window, normalise(this.shortcuts))\n  }\n}\n\nexport type { KeyBindingMap as ShortcutMap }\n"],"names":["ARROW_RE","ESC_RE","ShortcutController","constructor","host","shortcuts","target","this","addController","hostConnected","bind","hostDisconnected","unbind","_a","unregister","call","tinykeys","window","normalised","Object","keys","forEach","keybinding","test","mapped","replace","_match","capture","normalise"],"mappings":"kDAMA,MAAMA,EAAW,6BACXC,EAAS,gBAsBFC,EAGX,WAAAC,CACEC,EACQC,EACAC,GADAC,KAASF,UAATA,EACAE,KAAMD,OAANA,EAERF,EAAKI,cAAcD,KACpB,CAED,aAAAE,GACMF,KAAKF,WACPE,KAAKG,KAAKH,KAAKF,UAElB,CAED,gBAAAM,GACEJ,KAAKK,QACN,CAED,MAAAA,SACiB,QAAfC,EAAAN,KAAKO,kBAAU,IAAAD,GAAAA,EAAAE,KAAAR,KAChB,CAED,IAAAG,CAAKL,SACHE,KAAKK,SACLL,KAAKF,UAAYA,EACjBE,KAAKO,WAAaE,UAASH,EAAAN,KAAKD,sBAAUW,OAhD9C,SAAmBZ,GACjB,MAAMa,EAA4B,CAAA,EAgBlC,OAdAC,OAAOC,KAAKf,GAAWgB,SAAQC,IAI7B,GAHAJ,EAAWI,GAAcjB,EAAUiB,GAG/BtB,EAASuB,KAAKD,GAAa,CAC7B,MAAME,EAASF,EAAWG,QAAQzB,GAAU,CAAC0B,EAAQC,IAAYA,IACjET,EAAWM,GAAUN,EAAWI,EACjC,CACD,GAAIrB,EAAOsB,KAAKD,GAAa,CAC3B,MAAME,EAASF,EAAWG,QAAQxB,GAAQ,IAAM,QAChDiB,EAAWM,GAAUN,EAAWI,EACjC,KAGIJ,CACT,CA8BsDU,CAAUrB,KAAKF,WAClE"}
+{"version":3,"file":"ShortcutController-BIb3WGzH.js","sources":["../src/common/controllers/ShortcutController.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport type { KeyBindingMap } from 'tinykeys'\nimport tinykeys from 'tinykeys'\n\ntype ShortcutTarget = Parameters<typeof tinykeys>[0]\n\nconst ARROW_RE = /Arrow(Up|Down|Left|Right)/g\nconst ESC_RE = /Escape/g\n\nfunction normalise(shortcuts: KeyBindingMap) {\n  const normalised: KeyBindingMap = {}\n\n  Object.keys(shortcuts).forEach((keybinding) => {\n    normalised[keybinding] = shortcuts[keybinding]\n\n    // Arrow and Escape keys in IE/Edge have different names\n    if (ARROW_RE.test(keybinding)) {\n      const mapped = keybinding.replace(ARROW_RE, (_match, capture) => capture)\n      normalised[mapped] = normalised[keybinding]\n    }\n    if (ESC_RE.test(keybinding)) {\n      const mapped = keybinding.replace(ESC_RE, () => 'Esc')\n      normalised[mapped] = normalised[keybinding]\n    }\n  })\n\n  return normalised\n}\n\nexport class ShortcutController implements ReactiveController {\n  private unregister?: ReturnType<typeof tinykeys>\n\n  constructor(\n    host: ReactiveControllerHost,\n    private shortcuts?: KeyBindingMap,\n    private target?: ShortcutTarget,\n  ) {\n    host.addController(this)\n  }\n\n  hostConnected() {\n    if (this.shortcuts) {\n      this.bind(this.shortcuts)\n    }\n  }\n\n  hostDisconnected() {\n    this.unbind()\n  }\n\n  unbind() {\n    this.unregister?.()\n  }\n\n  bind(shortcuts: KeyBindingMap) {\n    this.unbind()\n    this.shortcuts = shortcuts\n    this.unregister = tinykeys(this.target ?? window, normalise(this.shortcuts))\n  }\n}\n\nexport type { KeyBindingMap as ShortcutMap }\n"],"names":["ARROW_RE","ESC_RE","ShortcutController","constructor","host","shortcuts","target","this","addController","hostConnected","bind","hostDisconnected","unbind","_a","unregister","call","tinykeys","window","normalised","Object","keys","forEach","keybinding","test","mapped","replace","_match","capture","normalise"],"mappings":"kDAMA,MAAMA,EAAW,6BACXC,EAAS,gBAsBFC,EAGX,WAAAC,CACEC,EACQC,EACAC,GADAC,KAASF,UAATA,EACAE,KAAMD,OAANA,EAERF,EAAKI,cAAcD,KACpB,CAED,aAAAE,GACMF,KAAKF,WACPE,KAAKG,KAAKH,KAAKF,UAElB,CAED,gBAAAM,GACEJ,KAAKK,QACN,CAED,MAAAA,SACiB,QAAfC,EAAAN,KAAKO,kBAAU,IAAAD,GAAAA,EAAAE,KAAAR,KAChB,CAED,IAAAG,CAAKL,SACHE,KAAKK,SACLL,KAAKF,UAAYA,EACjBE,KAAKO,WAAaE,UAASH,EAAAN,KAAKD,sBAAUW,OAhD9C,SAAmBZ,GACjB,MAAMa,EAA4B,CAAA,EAgBlC,OAdAC,OAAOC,KAAKf,GAAWgB,SAASC,IAI9B,GAHAJ,EAAWI,GAAcjB,EAAUiB,GAG/BtB,EAASuB,KAAKD,GAAa,CAC7B,MAAME,EAASF,EAAWG,QAAQzB,GAAU,CAAC0B,EAAQC,IAAYA,IACjET,EAAWM,GAAUN,EAAWI,EACjC,CACD,GAAIrB,EAAOsB,KAAKD,GAAa,CAC3B,MAAME,EAASF,EAAWG,QAAQxB,GAAQ,IAAM,QAChDiB,EAAWM,GAAUN,EAAWI,EACjC,KAGIJ,CACT,CA8BsDU,CAAUrB,KAAKF,WAClE"}

package/lib/SizeMixin-CU9cLbLC.js.map

@@ -1 +1 @@
-{"version":3,"file":"SizeMixin-CU9cLbLC.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":"yFAUM,SAAUA,EAA6CC,GAC3D,MAAMC,UAAoBD,EAA1B,WAAAE,uBAI+BC,KAAIC,KAAoB,GACtD,EAED,OAH+BC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAmCN,EAAAO,UAAA,YAAA,GAGnDP,CACT"}
+{"version":3,"file":"SizeMixin-CU9cLbLC.js","sources":["../src/common/mixins/SizeMixin.ts"],"sourcesContent":["import type { LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class 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":"yFASM,SAAUA,EAA6CC,GAC3D,MAAMC,UAAoBD,EAA1B,WAAAE,uBAI+BC,KAAIC,KAAoB,GACtD,EAED,OAH+BC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAmCN,EAAAO,UAAA,YAAA,GAGnDP,CACT"}

package/lib/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sources":["../src/skeleton/Skeleton.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Skeleton.css\"\n\n/**\n * Skeletons are used to provide a low fidelity representation of content\n * before it appears in a view. This improves the perceived loading time\n * for our users.\n *\n * @status ready\n * @category feedback\n *\n * @cssprop [--n-skeleton-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-skeleton-color=var(--n-color-border)] - Controls the main color of the skeleton, using our [color tokens](/tokens/#color).\n * @cssprop [--n-skeleton-sheen-color=var(--n-color-border-strong)] - Controls the sheen color of the skeleton, using our [color tokens](/tokens/#color).\n */\n@customElement(\"nord-skeleton\")\nexport default class Skeleton extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * Determines which animation effect the skeleton will use.\n   * The default is no animation.\n   */\n  @property({ reflect: true }) effect?: \"pulse\" | \"sheen\"\n\n  render() {\n    return html`\n      <div class=\"n-skeleton\" aria-hidden=\"true\">\n        <div class=\"n-skeleton-indicator\"></div>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-skeleton\": Skeleton\n  }\n}\n"],"names":["Skeleton","LitElement","render","html","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"gyCAmBe,IAAMA,EAAN,cAAuBC,EASpC,MAAAC,GACE,OAAOC,CAAI,2FAKZ,GAdMH,EAAAI,OAAS,CAACC,EAAgBC,GAMJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAkCT,EAAAU,UAAA,cAAA,GAPpCV,EAAQO,EAAA,CAD5BI,EAAc,kBACMX,SAAAA"}
+{"version":3,"file":"Skeleton.js","sources":["../src/skeleton/Skeleton.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Skeleton.css'\n\n/**\n * Skeletons are used to provide a low fidelity representation of content\n * before it appears in a view. This improves the perceived loading time\n * for our users.\n *\n * @status ready\n * @category feedback\n *\n * @cssprop [--n-skeleton-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-skeleton-color=var(--n-color-border)] - Controls the main color of the skeleton, using our [color tokens](/tokens/#color).\n * @cssprop [--n-skeleton-sheen-color=var(--n-color-border-strong)] - Controls the sheen color of the skeleton, using our [color tokens](/tokens/#color).\n */\n@customElement('nord-skeleton')\nexport default class Skeleton extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * Determines which animation effect the skeleton will use.\n   * The default is no animation.\n   */\n  @property({ reflect: true }) effect?: 'pulse' | 'sheen'\n\n  render() {\n    return html`\n      <div class=\"n-skeleton\" aria-hidden=\"true\">\n        <div class=\"n-skeleton-indicator\"></div>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-skeleton': Skeleton\n  }\n}\n"],"names":["Skeleton","LitElement","render","html","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"gyCAmBe,IAAMA,EAAN,cAAuBC,EASpC,MAAAC,GACE,OAAOC,CAAI,2FAKZ,GAdMH,EAAAI,OAAS,CAACC,EAAgBC,GAMJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAkCT,EAAAU,UAAA,cAAA,GAPpCV,EAAQO,EAAA,CAD5BI,EAAc,kBACMX,SAAAA"}

package/lib/SlotController-Z6eG7LSZ.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlotController-Z6eG7LSZ.js","sources":["../src/common/controllers/SlotController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost, isServer } from \"lit\"\nimport { EventController } from \"./EventController.js\"\n\nexport class SlotController implements ReactiveController {\n  private events: EventController\n  private selector: string\n\n  constructor(\n    protected host: ReactiveControllerHost & HTMLElement,\n    public slotName: string = \"\"\n  ) {\n    host.addController(this)\n    this.events = new EventController(host)\n    this.selector = slotName ? `:scope > [slot=\"${slotName}\"]` : `:scope > :not([slot])`\n  }\n\n  hostConnected() {\n    if (this.host.shadowRoot) {\n      this.events.listen(this.host.shadowRoot, \"slotchange\", this.handleSlotChange)\n    }\n  }\n\n  get hasContent() {\n    return this.content != null\n  }\n\n  get isEmpty() {\n    return !this.hasContent\n  }\n\n  get content() {\n    if (isServer) {\n      return null\n    }\n\n    return this.host.querySelector(this.selector)\n  }\n\n  get assigned() {\n    if (isServer) {\n      return []\n    }\n\n    return Array.from(this.host.querySelectorAll(this.selector))\n  }\n\n  private handleSlotChange = (e: Event) => {\n    const slot = e.target as HTMLSlotElement\n\n    if (slot.name === this.slotName) {\n      this.onChange(e)\n    }\n  }\n\n  protected onChange(_e: Event) {\n    this.host.requestUpdate()\n  }\n}\n"],"names":["SlotController","constructor","host","slotName","this","handleSlotChange","e","target","name","onChange","addController","events","EventController","selector","hostConnected","shadowRoot","listen","hasContent","content","isEmpty","isServer","querySelector","assigned","Array","from","querySelectorAll","_e","requestUpdate"],"mappings":"uFAGaA,EAIX,WAAAC,CACYC,EACHC,EAAmB,IADhBC,KAAIF,KAAJA,EACHE,KAAQD,SAARA,EAqCDC,KAAAC,iBAAoBC,IACbA,EAAEC,OAENC,OAASJ,KAAKD,UACrBC,KAAKK,SAASH,EACf,EAxCDJ,EAAKQ,cAAcN,MACnBA,KAAKO,OAAS,IAAIC,EAAgBV,GAClCE,KAAKS,SAAWV,EAAW,mBAAmBA,MAAe,uBAC9D,CAED,aAAAW,GACMV,KAAKF,KAAKa,YACZX,KAAKO,OAAOK,OAAOZ,KAAKF,KAAKa,WAAY,aAAcX,KAAKC,iBAE/D,CAED,cAAIY,GACF,OAAuB,MAAhBb,KAAKc,OACb,CAED,WAAIC,GACF,OAAQf,KAAKa,UACd,CAED,WAAIC,GACF,OAAIE,EACK,KAGFhB,KAAKF,KAAKmB,cAAcjB,KAAKS,SACrC,CAED,YAAIS,GACF,OAAIF,EACK,GAGFG,MAAMC,KAAKpB,KAAKF,KAAKuB,iBAAiBrB,KAAKS,UACnD,CAUS,QAAAJ,CAASiB,GACjBtB,KAAKF,KAAKyB,eACX"}
+{"version":3,"file":"SlotController-Z6eG7LSZ.js","sources":["../src/common/controllers/SlotController.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport { isServer } from 'lit'\nimport { EventController } from './EventController.js'\n\nexport class SlotController implements ReactiveController {\n  private events: EventController\n  private selector: string\n\n  constructor(\n    protected host: ReactiveControllerHost & HTMLElement,\n    public slotName: string = '',\n  ) {\n    host.addController(this)\n    this.events = new EventController(host)\n    this.selector = slotName ? `:scope > [slot=\"${slotName}\"]` : `:scope > :not([slot])`\n  }\n\n  hostConnected() {\n    if (this.host.shadowRoot) {\n      this.events.listen(this.host.shadowRoot, 'slotchange', this.handleSlotChange)\n    }\n  }\n\n  get hasContent() {\n    return this.content != null\n  }\n\n  get isEmpty() {\n    return !this.hasContent\n  }\n\n  get content() {\n    if (isServer) {\n      return null\n    }\n\n    return this.host.querySelector(this.selector)\n  }\n\n  get assigned() {\n    if (isServer) {\n      return []\n    }\n\n    return Array.from(this.host.querySelectorAll(this.selector))\n  }\n\n  private handleSlotChange = (e: Event) => {\n    const slot = e.target as HTMLSlotElement\n\n    if (slot.name === this.slotName) {\n      this.onChange(e)\n    }\n  }\n\n  protected onChange(_e: Event) {\n    this.host.requestUpdate()\n  }\n}\n"],"names":["SlotController","constructor","host","slotName","this","handleSlotChange","e","target","name","onChange","addController","events","EventController","selector","hostConnected","shadowRoot","listen","hasContent","content","isEmpty","isServer","querySelector","assigned","Array","from","querySelectorAll","_e","requestUpdate"],"mappings":"uFAIaA,EAIX,WAAAC,CACYC,EACHC,EAAmB,IADhBC,KAAIF,KAAJA,EACHE,KAAQD,SAARA,EAqCDC,KAAAC,iBAAoBC,IACbA,EAAEC,OAENC,OAASJ,KAAKD,UACrBC,KAAKK,SAASH,EACf,EAxCDJ,EAAKQ,cAAcN,MACnBA,KAAKO,OAAS,IAAIC,EAAgBV,GAClCE,KAAKS,SAAWV,EAAW,mBAAmBA,MAAe,uBAC9D,CAED,aAAAW,GACMV,KAAKF,KAAKa,YACZX,KAAKO,OAAOK,OAAOZ,KAAKF,KAAKa,WAAY,aAAcX,KAAKC,iBAE/D,CAED,cAAIY,GACF,OAAuB,MAAhBb,KAAKc,OACb,CAED,WAAIC,GACF,OAAQf,KAAKa,UACd,CAED,WAAIC,GACF,OAAIE,EACK,KAGFhB,KAAKF,KAAKmB,cAAcjB,KAAKS,SACrC,CAED,YAAIS,GACF,OAAIF,EACK,GAGFG,MAAMC,KAAKpB,KAAKF,KAAKuB,iBAAiBrB,KAAKS,UACnD,CAUS,QAAAJ,CAASiB,GACjBtB,KAAKF,KAAKyB,eACX"}

package/lib/Spinner.js

@@ -1,2 +1,2 @@
-import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as e,html as i}from"lit";import{property as s,customElement as o}from"lit/decorators.js";import{ifDefined as t}from"lit/directives/if-defined.js";import{c as a}from"./cond-CI1KbneT.js";import{s as l}from"./Component-DSU3Qp0O.js";const p=r`:host{--_n-spinner-color:var(--n-spinner-color, var(--n-color-accent));--_n-spinner-size:var(--n-size-icon-m);--_n-spinner-border-width:calc(var(--_n-spinner-size) * 0.18);--_n-spinner-duration:0.66s;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;z-index:var(--n-index-spinner);border-radius:var(--n-border-radius-circle);border:var(--_n-spinner-border-width) solid}.n-spinner{inset:0;border-color:transparent;border-block-end-color:var(--_n-spinner-color);animation:nRotate var(--_n-spinner-duration) linear infinite}.n-spinner::after{content:"";inset:calc(var(--_n-spinner-border-width) * -1);opacity:.3;border-color:var(--_n-spinner-color);border-block-end-color:transparent}@keyframes nRotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}`;let c=class extends e{constructor(){super(...arguments),this.size="m"}render(){return i`<div class="n-spinner" role="${a(this.label,"img")}" aria-label="${t(this.label)}" style="${a(this.color,`--_n-spinner-color:${this.color}`)}"></div>`}};c.styles=[l,p],n([s({reflect:!0})],c.prototype,"size",void 0),n([s({reflect:!0})],c.prototype,"color",void 0),n([s({reflect:!0})],c.prototype,"label",void 0),c=n([o("nord-spinner")],c);var d=c;export{d as default};
+import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as e,html as i}from"lit";import{property as s,customElement as o}from"lit/decorators.js";import{ifDefined as t}from"lit/directives/if-defined.js";import{c as a}from"./cond-CI1KbneT.js";import{s as l}from"./Component-DSU3Qp0O.js";const p=r`:host{--_n-spinner-color:var(--n-spinner-color, var(--n-color-accent));--_n-spinner-size:var(--n-size-icon-m);--_n-spinner-border-width:calc(var(--_n-spinner-size) * 0.18);--_n-spinner-duration:0.66s;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;z-index:var(--n-index-spinner);border-radius:var(--n-border-radius-circle);border:var(--_n-spinner-border-width) solid}.n-spinner{inset:0;border-color:transparent;border-block-end-color:var(--_n-spinner-color);animation:nRotate var(--_n-spinner-duration) linear infinite}.n-spinner::after{content:'';inset:calc(var(--_n-spinner-border-width) * -1);opacity:.3;border-color:var(--_n-spinner-color);border-block-end-color:transparent}@keyframes nRotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}`;let c=class extends e{constructor(){super(...arguments),this.size="m"}render(){return i`<div class="n-spinner" role="${a(this.label,"img")}" aria-label="${t(this.label)}" style="${a(this.color,`--_n-spinner-color:${this.color}`)}"></div>`}};c.styles=[l,p],n([s({reflect:!0})],c.prototype,"size",void 0),n([s({reflect:!0})],c.prototype,"color",void 0),n([s({reflect:!0})],c.prototype,"label",void 0),c=n([o("nord-spinner")],c);var d=c;export{d as default};
 //# sourceMappingURL=Spinner.js.map

package/lib/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Spinner.css\"\n\n/**\n * Spinner component is used to indicate users that their action is being\n * processed. You can customize the size and color of the spinner with the\n * provided properties.\n *\n * @status ready\n * @category feedback\n * @cssprop [--n-spinner-color=var(--n-color-accent)] - Controls the color the spinner.\n */\n@customElement(\"nord-spinner\")\nexport default class Spinner extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * The size of the spinner.\n   */\n  @property({ reflect: true }) size: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" = \"m\"\n\n  /**\n   * The color of the spinner.\n   * Can accept any valid CSS color value, including custom properties.\n   * Takes precedence over the `--n-spinner-color` CSS custom property.\n   */\n  @property({ reflect: true }) color?: string\n\n  /**\n   * An accessible label for the spinner.\n   * If no label is supplied, the spinner is hidden from assistive technology.\n   */\n  @property({ reflect: true }) label?: string\n\n  render() {\n    // if a label is supplied, we give the div a role of img.\n    // without this we could not use aria-label, since it is only valid on elements of certain roles.\n    return html`\n      <div\n        class=\"n-spinner\"\n        role=${cond(this.label, \"img\")}\n        aria-label=${ifDefined(this.label)}\n        style=${cond(this.color, `--_n-spinner-color:${this.color}`)}\n      ></div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-spinner\": Spinner\n  }\n}\n"],"names":["Spinner","LitElement","constructor","this","size","render","html","cond","label","ifDefined","color","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"+7CAiBe,IAAMA,EAAN,cAAsBC,EAAtB,WAAAC,uBAMgBC,KAAIC,KAA0C,GA2B5E,CAZC,MAAAC,GAGE,OAAOC,CAAI,gCAGAC,EAAKJ,KAAKK,MAAO,uBACXC,EAAUN,KAAKK,kBACpBD,EAAKJ,KAAKO,MAAO,sBAAsBP,KAAKO,kBAGzD,GA/BMV,EAAAW,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyDhB,EAAAiB,UAAA,YAAA,GAOjDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsBhB,EAAAiB,UAAA,aAAA,GAMdH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsBhB,EAAAiB,UAAA,aAAA,GAnBxBjB,EAAOc,EAAA,CAD3BI,EAAc,iBACMlB,SAAAA"}
+{"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { cond } from '../common/directives/cond.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Spinner.css'\n\n/**\n * Spinner component is used to indicate users that their action is being\n * processed. You can customize the size and color of the spinner with the\n * provided properties.\n *\n * @status ready\n * @category feedback\n * @cssprop [--n-spinner-color=var(--n-color-accent)] - Controls the color the spinner.\n */\n@customElement('nord-spinner')\nexport default class Spinner extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * The size of the spinner.\n   */\n  @property({ reflect: true }) size: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' = 'm'\n\n  /**\n   * The color of the spinner.\n   * Can accept any valid CSS color value, including custom properties.\n   * Takes precedence over the `--n-spinner-color` CSS custom property.\n   */\n  @property({ reflect: true }) color?: string\n\n  /**\n   * An accessible label for the spinner.\n   * If no label is supplied, the spinner is hidden from assistive technology.\n   */\n  @property({ reflect: true }) label?: string\n\n  render() {\n    // if a label is supplied, we give the div a role of img.\n    // without this we could not use aria-label, since it is only valid on elements of certain roles.\n    return html`\n      <div\n        class=\"n-spinner\"\n        role=${cond(this.label, 'img')}\n        aria-label=${ifDefined(this.label)}\n        style=${cond(this.color, `--_n-spinner-color:${this.color}`)}\n      ></div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-spinner': Spinner\n  }\n}\n"],"names":["Spinner","LitElement","constructor","this","size","render","html","cond","label","ifDefined","color","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"+7CAiBe,IAAMA,EAAN,cAAsBC,EAAtB,WAAAC,uBAMgBC,KAAIC,KAA0C,GA2B5E,CAZC,MAAAC,GAGE,OAAOC,CAAI,gCAGAC,EAAKJ,KAAKK,MAAO,uBACXC,EAAUN,KAAKK,kBACpBD,EAAKJ,KAAKO,MAAO,sBAAsBP,KAAKO,kBAGzD,GA/BMV,EAAAW,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyDhB,EAAAiB,UAAA,YAAA,GAOjDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsBhB,EAAAiB,UAAA,aAAA,GAMdH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsBhB,EAAAiB,UAAA,aAAA,GAnBxBjB,EAAOc,EAAA,CAD3BI,EAAc,iBACMlB,SAAAA"}

package/lib/Stack.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as s,html as a}from"lit";import{property as n,customElement as i}from"lit/decorators.js";import{s as o}from"./Component-DSU3Qp0O.js";const r=e`:host{--_n-stack-gap:var(--n-stack-gap, var(--n-space-m));display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:var(--_n-stack-gap);max-inline-size:100%;inline-size:100%}:host([direction=horizontal]){flex-direction:row}:host([wrap]){flex-wrap:wrap}:host([align-items=center]){align-items:center}:host([align-items=start]){align-items:flex-start}:host([align-items=end]){align-items:flex-end}:host([align-items=baseline]){align-items:baseline}: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=xs]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-xs))}: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.wrap=!1}render(){return a`<slot></slot>`}};c.styles=[o,r],t([n({reflect:!0})],c.prototype,"gap",void 0),t([n({reflect:!0})],c.prototype,"direction",void 0),t([n({reflect:!0,attribute:"align-items"})],c.prototype,"alignItems",void 0),t([n({reflect:!0,type:Boolean})],c.prototype,"wrap",void 0),t([n({reflect:!0,attribute:"justify-content"})],c.prototype,"justifyContent",void 0),c=t([i("nord-stack")],c);var p=c;export{p as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as s,html as a}from"lit";import{property as n,customElement as i}from"lit/decorators.js";import{s as o}from"./Component-DSU3Qp0O.js";const r=e`:host{--_n-stack-gap:var(--n-stack-gap, var(--n-space-m));display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:var(--_n-stack-gap);max-inline-size:100%;inline-size:100%}:host([direction=horizontal]){flex-direction:row}:host([wrap]){flex-wrap:wrap}:host([align-items=center]){align-items:center}:host([align-items=start]){align-items:flex-start}:host([align-items=end]){align-items:flex-end}:host([align-items=baseline]){align-items:baseline}: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=xs]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-xs))}: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.wrap=!1}render(){return a`<slot></slot>`}};c.styles=[o,r],t([n({reflect:!0})],c.prototype,"gap",void 0),t([n({reflect:!0})],c.prototype,"direction",void 0),t([n({reflect:!0,attribute:"align-items"})],c.prototype,"alignItems",void 0),t([n({reflect:!0,type:Boolean})],c.prototype,"wrap",void 0),t([n({reflect:!0,attribute:"justify-content"})],c.prototype,"justifyContent",void 0),c=t([i("nord-stack")],c);var p=c;export{p as default};
 //# sourceMappingURL=Stack.js.map

package/lib/Stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.js","sources":["../src/stack/Stack.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Stack.css\"\n\n/**\n * Stack component manages layout of immediate children along the\n * vertical or horizontal axis with optional spacing between each child.\n *\n * @status ready\n * @category structure\n * @slot - The stack content.\n *\n * @cssprop [--n-stack-gap=var(--n-space-m)] - Controls the spacing between items, using our [spacing tokens](/tokens/#space).\n */\n@customElement(\"nord-stack\")\nexport default class Stack extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * The space injected between components.\n   */\n  @property({ reflect: true }) gap: \"none\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" = \"m\"\n\n  /**\n   * The direction of the stack.\n   */\n  @property({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\"\n\n  /**\n   * How to align the child items inside the stack.\n   */\n  @property({ reflect: true, attribute: \"align-items\" }) alignItems?:\n    | \"center\"\n    | \"start\"\n    | \"end\"\n    | \"baseline\"\n    | \"stretch\" = \"stretch\"\n\n  /**\n   * Defines whether the Stack items are forced in a single line\n   * or can be flowed into multiple lines.\n   */\n  @property({ reflect: true, type: Boolean }) wrap = false\n\n  /**\n   * How to justify the child items inside the stack.\n   */\n  @property({ reflect: true, attribute: \"justify-content\" }) justifyContent?:\n    | \"center\"\n    | \"start\"\n    | \"end\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\"\n\n  render() {\n    return html`<slot></slot>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-stack\": Stack\n  }\n}\n"],"names":["Stack","LitElement","constructor","this","gap","direction","alignItems","wrap","render","html","styles","componentStyle","style","__decorate","property","reflect","prototype","attribute","type","Boolean","customElement"],"mappings":"kkDAgBe,IAAMA,EAAN,cAAoBC,EAApB,WAAAC,uBAMgBC,KAAGC,IAAmD,IAKtDD,KAASE,UAA8B,WAKbF,KAAUG,WAKjD,UAM4BH,KAAII,MAAG,CAgBpD,CAHC,MAAAC,GACE,OAAOC,CAAI,eACZ,GAzCMT,EAAAU,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAiEf,EAAAgB,UAAA,WAAA,GAKzDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyDf,EAAAgB,UAAA,iBAAA,GAKvBH,EAAA,CAAtDC,EAAS,CAAEC,SAAS,EAAME,UAAW,iBAKbjB,EAAAgB,UAAA,kBAAA,GAMmBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMG,KAAMC,WAAuBnB,EAAAgB,UAAA,YAAA,GAKGH,EAAA,CAA1DC,EAAS,CAAEC,SAAS,EAAME,UAAW,qBAMpBjB,EAAAgB,UAAA,sBAAA,GAtCChB,EAAKa,EAAA,CADzBO,EAAc,eACMpB,SAAAA"}
+{"version":3,"file":"Stack.js","sources":["../src/stack/Stack.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Stack.css'\n\n/**\n * Stack component manages layout of immediate children along the\n * vertical or horizontal axis with optional spacing between each child.\n *\n * @status ready\n * @category structure\n * @slot - The stack content.\n *\n * @cssprop [--n-stack-gap=var(--n-space-m)] - Controls the spacing between items, using our [spacing tokens](/tokens/#space).\n */\n@customElement('nord-stack')\nexport default class Stack extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * The space injected between components.\n   */\n  @property({ reflect: true }) gap: 'none' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' = 'm'\n\n  /**\n   * The direction of the stack.\n   */\n  @property({ reflect: true }) direction: 'vertical' | 'horizontal' = 'vertical'\n\n  /**\n   * How to align the child items inside the stack.\n   */\n  @property({ reflect: true, attribute: 'align-items' }) alignItems?:\n    | 'center'\n    | 'start'\n    | 'end'\n    | 'baseline'\n    | 'stretch' = 'stretch'\n\n  /**\n   * Defines whether the Stack items are forced in a single line\n   * or can be flowed into multiple lines.\n   */\n  @property({ reflect: true, type: Boolean }) wrap = false\n\n  /**\n   * How to justify the child items inside the stack.\n   */\n  @property({ reflect: true, attribute: 'justify-content' }) justifyContent?:\n    | 'center'\n    | 'start'\n    | 'end'\n    | 'space-between'\n    | 'space-around'\n    | 'space-evenly'\n\n  render() {\n    return html`<slot></slot>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-stack': Stack\n  }\n}\n"],"names":["Stack","LitElement","constructor","this","gap","direction","alignItems","wrap","render","html","styles","componentStyle","style","__decorate","property","reflect","prototype","attribute","type","Boolean","customElement"],"mappings":"kkDAgBe,IAAMA,EAAN,cAAoBC,EAApB,WAAAC,uBAMgBC,KAAGC,IAAmD,IAKtDD,KAASE,UAA8B,WAKbF,KAAUG,WAKjD,UAM4BH,KAAII,MAAG,CAgBpD,CAHC,MAAAC,GACE,OAAOC,CAAI,eACZ,GAzCMT,EAAAU,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAiEf,EAAAgB,UAAA,WAAA,GAKzDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyDf,EAAAgB,UAAA,iBAAA,GAKvBH,EAAA,CAAtDC,EAAS,CAAEC,SAAS,EAAME,UAAW,iBAKbjB,EAAAgB,UAAA,kBAAA,GAMmBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMG,KAAMC,WAAuBnB,EAAAgB,UAAA,YAAA,GAKGH,EAAA,CAA1DC,EAAS,CAAEC,SAAS,EAAME,UAAW,qBAMpBjB,EAAAgB,UAAA,sBAAA,GAtCChB,EAAKa,EAAA,CADzBO,EAAc,eACMpB,SAAAA"}

package/lib/Tab.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as o,html as a}from"lit";import{property as r,customElement as n}from"lit/decorators.js";import{o as s}from"./observe-D0n0zOfU.js";import{S as i}from"./SlotController-Z6eG7LSZ.js";import{s as l}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";const c=e`: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-accent);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-accent)}}`;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],t([r({reflect:!0,type:Boolean})],b.prototype,"selected",void 0),t([s("selected")],b.prototype,"handleSelectionChange",null),b=t([n("nord-tab")],b);var d=b;export{d as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as o,html as a}from"lit";import{property as r,customElement as n}from"lit/decorators.js";import{S as s}from"./SlotController-Z6eG7LSZ.js";import{o as i}from"./observe-D0n0zOfU.js";import{s as l}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";const c=e`: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;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-accent);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-accent)}}`;let b=class extends o{constructor(){super(...arguments),this.defaultSlot=new s(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],t([r({reflect:!0,type:Boolean})],b.prototype,"selected",void 0),t([i("selected")],b.prototype,"handleSelectionChange",null),b=t([n("nord-tab")],b);var d=b;export{d as default};
 //# sourceMappingURL=Tab.js.map