@nordhealth/components 3.10.0 → 3.11.0

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 new\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":"y2HAmCe,IAAMA,EAAN,cAAoBC,EACjCC,EAAkBC,EAAcC,EAAWC,EAAeC,QAD7CC,kCAKLC,KAAAC,UAAY,IAAIC,EAAoBF,MAKDA,KAAGG,IAAW,EAKdH,KAAGI,IAAW,GAKdJ,KAAIK,KAAW,EAKdL,KAAMM,QAAG,CAuDtD,CArDCC,SACE,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,CAESJ,YAAYK,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 { 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 new\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":"y2HAmCe,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-773c79f4.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollbarController-773c79f4.js","sources":["../src/common/controllers/ScrollbarController.ts"],"sourcesContent":["import { 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 = 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","parseInt","setStyle","add","delete","resets","forEach","reset","static","property","value","style","previous","getPropertyValue","setProperty","push","Set"],"mappings":"MAoBaA,EAIXC,YAAYC,GACVA,EAAKC,cAAcC,KACpB,CAEDC,mBACED,KAAKE,cACN,CAEDC,aACE,GAAuC,IAAnCP,EAAoBQ,MAAMC,KAAY,CACxC,MAAMC,EAAgBC,SAASC,gBAAgBC,YACzCC,EAAQC,KAAKC,IAAIC,OAAOC,WAAaR,GAErCS,EAAgBC,iBAAiBT,SAASU,MAC1CC,EAAeC,SAASJ,EAAcG,aAAc,KAAO,EAKjEtB,EAAoBwB,SAAS,uBAAwB,GAAGV,EAAQQ,OAChEtB,EAAoBwB,SAAS,WAAY,UAEzCxB,EAAoBwB,SAAS,gBAAiB,4BAC/C,CAEDxB,EAAoBQ,MAAMiB,IAAIrB,KAC/B,CAEDE,eACEN,EAAoBQ,MAAMkB,OAAOtB,MAEM,IAAnCJ,EAAoBQ,MAAMC,OAC5BT,EAAoB2B,OAAOC,SAAQC,GAASA,MAC5C7B,EAAoB2B,OAAS,GAEhC,CAEOG,gBAAgBC,EAAkBC,GACxC,MAAMC,MAAEA,GAAUtB,SAASU,KAErBa,EAAWD,EAAME,iBAAiBJ,GACxCE,EAAMG,YAAYL,EAAUC,GAE5BhC,EAAoB2B,OAAOU,MAAK,IAAMJ,EAAMG,YAAYL,EAAUG,IACnE,EA/CclC,EAAAQ,MAAQ,IAAI8B,IACZtC,EAAM2B,OAAsB"}
+{"version":3,"file":"ScrollbarController-773c79f4.js","sources":["../src/common/controllers/ScrollbarController.ts"],"sourcesContent":["import { 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 = 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","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,SAASJ,EAAcG,aAAc,KAAO,EAKjEtB,EAAoBwB,SAAS,uBAAwB,GAAGV,EAAQQ,OAChEtB,EAAoBwB,SAAS,WAAY,UAEzCxB,EAAoBwB,SAAS,gBAAiB,4BAC/C,CAEDxB,EAAoBQ,MAAMiB,IAAIrB,KAC/B,CAED,YAAAE,GACEN,EAAoBQ,MAAMkB,OAAOtB,MAEM,IAAnCJ,EAAoBQ,MAAMC,OAC5BT,EAAoB2B,OAAOC,SAAQC,GAASA,MAC5C7B,EAAoB2B,OAAS,GAEhC,CAEO,eAAOH,CAASM,EAAkBC,GACxC,MAAMC,MAAEA,GAAUrB,SAASU,KAErBY,EAAWD,EAAME,iBAAiBJ,GACxCE,EAAMG,YAAYL,EAAUC,GAE5B/B,EAAoB2B,OAAOS,MAAK,IAAMJ,EAAMG,YAAYL,EAAUG,IACnE,EA/CcjC,EAAAQ,MAAQ,IAAI6B,IACZrC,EAAM2B,OAAsB"}

package/lib/Select.js

@@ -1,2 +1,2 @@
-import{i as o,x as t,_ as e,e as n,s as r}from"./query-assigned-elements-15485e3d.js";import{e as i}from"./property-03f59dce.js";import{l as s}from"./if-defined-9b177db4.js";import{n as a}from"./ref-5526fb07.js";import"./Button.js";import l from"./Icon.js";import{I as d}from"./InputMixin-f9fb4034.js";import{F as c}from"./FocusableMixin-4300e44e.js";import{F as p}from"./FormAssociatedMixin-6f1c13ac.js";import{A as b}from"./AutocompleteMixin-3cf61f49.js";import{S as u}from"./SizeMixin-fb379434.js";import{s as m}from"./Component-420bbc41.js";import{s as h}from"./FormField-cbfebb3f.js";import{S as v}from"./SlotController-d733c575.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./LightDomController-3d3edb76.js";import"./cond-44672025.js";import"./Spinner.js";import"./state-70f38ceb.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";import"./FormDataController-592ff3dd.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";var f=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m14.0864 12.0402 1.8138 1.8137-4.7724 4.7724c-.2573.2573-.5789.373-.9133.373-.33447 0-.65606-.1286-.91333-.373l-4.77238-4.7724 1.81377-1.8137 3.85904 3.859 3.8591-3.859zm-3.859-7.93687 3.859 3.85907 1.8138-1.81376-4.7724-4.77238c-.5017-.50168-1.31208-.50168-1.81376 0l-4.77238 4.77238 1.81376 1.81376 3.85908-3.85907z" fill="currentColor"/></svg>',title:"interface-dropdown-small",tags:"nordicon small interface dropdown select arrow up down caret triangle chevron"});const x=o`:host{--_n-select-block-size:var(--n-select-block-size, var(--n-space-xl))}.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--_n-select-block-size);inset-block-end:0;inset-inline-start:0;z-index:var(--n-index-default)}option{color:initial}nord-button{--n-button-text-align:start}nord-icon{color:var(--n-color-icon)}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button-hover))}.n-label-container:hover+.n-select-container nord-button nord-icon,select:hover+nord-button nord-icon{color:var(--n-color-icon-hover)}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}:host([disabled]) nord-button{--n-input-border-color:var(--n-color-active);--_n-button-color:var(--n-color-text-weakest);--_n-button-background-color:var(--n-color-active);--_n-button-opacity:1}:host([disabled]) nord-icon{color:var(--n-color-text-weakest)}::slotted(:not([slot])){display:none}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;l.registerIcon(f);let g=class extends(u(p(b(d(c(r)))))){constructor(){super(...arguments),this.defaultSlot=new v(this),this.inputId="select",this.expand=!1}get formValue(){return this.value||void 0}render(){const o=this.options,e=this.getButtonText(o);return t`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${a(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${s(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" autocomplete="${this.autocomplete}">${this.placeholder&&t`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${o.map((o=>this.renderOption(o)))}</select><nord-button size="${this.size}" tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="start" name="icon"></slot>${e}<nord-icon slot="end" name="interface-dropdown-small"></nord-icon></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(o){const t=o.find((o=>o.value===this.value.toString()));return t?t.text:this.placeholder?this.placeholder:o[0]?o[0].text:""}renderOption(o){return t`<option value="${s(o.value)}" ?disabled="${o.disabled}" .selected="${o.value===this.value.toString()}">${o.text}</option>`}};g.styles=[m,h,x],e([i({reflect:!0,type:Boolean})],g.prototype,"expand",void 0),g=e([n("nord-select")],g);var j=g;export{j as default};
+import{i as o,x as t,_ as e,e as n,s as r}from"./query-assigned-elements-92ce7494.js";import{n as i}from"./property-c78323b1.js";import{l as s}from"./if-defined-cccde88f.js";import{n as a}from"./ref-99418ab4.js";import"./Button.js";import l from"./Icon.js";import{I as d}from"./InputMixin-83b5bd46.js";import{F as c}from"./FocusableMixin-d30213b4.js";import{F as p}from"./FormAssociatedMixin-3fa55d53.js";import{A as b}from"./AutocompleteMixin-5a7e10b2.js";import{S as u}from"./SizeMixin-ab074eff.js";import{s as m}from"./Component-2253424f.js";import{s as h}from"./FormField-87551be2.js";import{S as v}from"./SlotController-d733c575.js";import"./directive-e9ce14b4.js";import"./EventController-d99ebeef.js";import"./LightDomController-5388d84c.js";import"./cond-bb9ee891.js";import"./Spinner.js";import"./state-d31c6912.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";import"./FormDataController-592ff3dd.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";var f=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m14.0864 12.0402 1.8138 1.8137-4.7724 4.7724c-.2573.2573-.5789.373-.9133.373-.33447 0-.65606-.1286-.91333-.373l-4.77238-4.7724 1.81377-1.8137 3.85904 3.859 3.8591-3.859zm-3.859-7.93687 3.859 3.85907 1.8138-1.81376-4.7724-4.77238c-.5017-.50168-1.31208-.50168-1.81376 0l-4.77238 4.77238 1.81376 1.81376 3.85908-3.85907z" fill="currentColor"/></svg>',title:"interface-dropdown-small",tags:"nordicon small interface dropdown select arrow up down caret triangle chevron"});const x=o`:host{--_n-select-block-size:var(--n-select-block-size, var(--n-space-xl))}.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--_n-select-block-size);inset-block-end:0;inset-inline-start:0;z-index:var(--n-index-default)}option{color:initial}nord-button{--n-button-text-align:start}nord-icon{color:var(--n-color-icon)}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button-hover))}.n-label-container:hover+.n-select-container nord-button nord-icon,select:hover+nord-button nord-icon{color:var(--n-color-icon-hover)}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}:host([disabled]) nord-button{--n-input-border-color:var(--n-color-active);--_n-button-color:var(--n-color-text-weakest);--_n-button-background-color:var(--n-color-active);--_n-button-opacity:1}:host([disabled]) nord-icon{color:var(--n-color-text-weakest)}::slotted(:not([slot])){display:none}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;l.registerIcon(f);let g=class extends(u(p(b(d(c(r)))))){constructor(){super(...arguments),this.defaultSlot=new v(this),this.inputId="select",this.expand=!1}get formValue(){return this.value||void 0}render(){const o=this.options,e=this.getButtonText(o);return t`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${a(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${s(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" autocomplete="${this.autocomplete}">${this.placeholder&&t`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${o.map((o=>this.renderOption(o)))}</select><nord-button size="${this.size}" tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="start" name="icon"></slot>${e}<nord-icon slot="end" name="interface-dropdown-small"></nord-icon></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(o){const t=o.find((o=>o.value===this.value.toString()));return t?t.text:this.placeholder?this.placeholder:o[0]?o[0].text:""}renderOption(o){return t`<option value="${s(o.value)}" ?disabled="${o.disabled}" .selected="${o.value===this.value.toString()}">${o.text}</option>`}};g.styles=[m,h,x],e([i({reflect:!0,type:Boolean})],g.prototype,"expand",void 0),g=e([n("nord-select")],g);var j=g;export{j as default};
 //# sourceMappingURL=Select.js.map

package/lib/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 } 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 */\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\n  protected inputId = \"select\"\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\n          size=${this.size}\n          tabindex=\"-1\"\n          ?disabled=${this.disabled}\n          ?expand=${this.expand}\n          aria-hidden=\"true\"\n          type=\"button\"\n        >\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    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","render","slottedOptions","options","buttonText","getButtonText","html","renderLabel","ref","focusableRef","disabled","required","ifDefined","name","handleChange","handleInput","getDescribedBy","getInvalid","autocomplete","placeholder","map","option","renderOption","size","renderError","Array","from","querySelectorAll","selected","find","toString","text","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"8/BAAe,waACM,gCACD,wqDCmBpBA,EAAKC,aAAaC,GAiBH,IAAMC,EAAN,cAAqBC,EAClCC,EAAoBC,EAAkBC,EAAWC,EAAeC,QADnDC,kCASLC,KAAAC,YAAc,IAAIC,EAAeF,MAE/BA,KAAOG,QAAG,SAKwBH,KAAMI,QAAG,CA8EtD,CAzFwBC,gBACrB,OAAOL,KAAKM,YAASC,CACtB,CAWDC,SACE,MAAMC,EAAiBT,KAAKU,QACtBC,EAAaX,KAAKY,cAAcH,GAEtC,OAAOI,CAAI,gBAEPb,KAAKc,wDAIDC,EAAIf,KAAKgB,qBACNhB,KAAKG,uBACEH,KAAKiB,wBACLjB,KAAKkB,mBACVC,EAAUnB,KAAKoB,mBACZpB,KAAKqB,yBACNrB,KAAKsB,kCACKH,EAAUnB,KAAKuB,oCACnBJ,EAAUnB,KAAKwB,gCACfxB,KAAKyB,iBAElBzB,KAAK0B,aAAeb,CAAI,oDAAwCb,KAAKM,UAASN,KAAK0B,0BACnFjB,EAAekB,KAAIC,GAAU5B,KAAK6B,aAAaD,mCAI1C5B,KAAK8B,kCAEA9B,KAAKiB,sBACPjB,KAAKI,kFAKbO,0FAKJX,KAAK+B,eAEV,CAEWrB,cACV,OAAOsB,MAAMC,KAAKjC,KAAKkC,iBAAiB,UACzC,CAEOtB,cAAcF,GACpB,MAAMyB,EAAWzB,EAAQ0B,MAAKR,GAAUA,EAAOtB,QAAUN,KAAKM,MAAM+B,aAEpE,OAAIF,EACKA,EAASG,KAGdtC,KAAK0B,YACA1B,KAAK0B,YAGVhB,EAAQ,GACHA,EAAQ,GAAG4B,KAGb,EACR,CAEOT,aAAaD,GACnB,OAAOf,CAAI,kBAECM,EAAUS,EAAOtB,sBACbsB,EAAOX,wBACPW,EAAOtB,QAAUN,KAAKM,MAAM+B,eAEtCT,EAAOU,eAGd,GA1FM9C,EAAM+C,OAAG,CAACC,EAAgBC,EAAgBC,GAaLC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBvD,EAAAwD,UAAA,cAAA,GAhBvCxD,EAAMmD,EAAA,CAD1BM,EAAc,gBACMzD,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 = \"nordicon small interface dropdown select arrow up down caret triangle chevron\"\n","/* eslint-disable lit-a11y/no-invalid-change-handler */\nimport { LitElement, html } 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 */\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\n  protected inputId = \"select\"\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\n          size=${this.size}\n          tabindex=\"-1\"\n          ?disabled=${this.disabled}\n          ?expand=${this.expand}\n          aria-hidden=\"true\"\n          type=\"button\"\n        >\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    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","render","slottedOptions","options","buttonText","getButtonText","html","renderLabel","ref","focusableRef","disabled","required","ifDefined","name","handleChange","handleInput","getDescribedBy","getInvalid","autocomplete","placeholder","map","option","renderOption","size","renderError","Array","from","querySelectorAll","selected","find","toString","text","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"8/BAAe,waACM,gCACD,wqDCmBpBA,EAAKC,aAAaC,GAiBH,IAAMC,EAAN,cAAqBC,EAClCC,EAAoBC,EAAkBC,EAAWC,EAAeC,QADnD,WAAAC,uBASLC,KAAAC,YAAc,IAAIC,EAAeF,MAE/BA,KAAOG,QAAG,SAKwBH,KAAMI,QAAG,CA8EtD,CAzFC,aAAuBC,GACrB,OAAOL,KAAKM,YAASC,CACtB,CAWD,MAAAC,GACE,MAAMC,EAAiBT,KAAKU,QACtBC,EAAaX,KAAKY,cAAcH,GAEtC,OAAOI,CAAI,gBAEPb,KAAKc,wDAIDC,EAAIf,KAAKgB,qBACNhB,KAAKG,uBACEH,KAAKiB,wBACLjB,KAAKkB,mBACVC,EAAUnB,KAAKoB,mBACZpB,KAAKqB,yBACNrB,KAAKsB,kCACKH,EAAUnB,KAAKuB,oCACnBJ,EAAUnB,KAAKwB,gCACfxB,KAAKyB,iBAElBzB,KAAK0B,aAAeb,CAAI,oDAAwCb,KAAKM,UAASN,KAAK0B,0BACnFjB,EAAekB,KAAIC,GAAU5B,KAAK6B,aAAaD,mCAI1C5B,KAAK8B,kCAEA9B,KAAKiB,sBACPjB,KAAKI,kFAKbO,0FAKJX,KAAK+B,eAEV,CAED,WAAYrB,GACV,OAAOsB,MAAMC,KAAKjC,KAAKkC,iBAAiB,UACzC,CAEO,aAAAtB,CAAcF,GACpB,MAAMyB,EAAWzB,EAAQ0B,MAAKR,GAAUA,EAAOtB,QAAUN,KAAKM,MAAM+B,aAEpE,OAAIF,EACKA,EAASG,KAGdtC,KAAK0B,YACA1B,KAAK0B,YAGVhB,EAAQ,GACHA,EAAQ,GAAG4B,KAGb,EACR,CAEO,YAAAT,CAAaD,GACnB,OAAOf,CAAI,kBAECM,EAAUS,EAAOtB,sBACbsB,EAAOX,wBACPW,EAAOtB,QAAUN,KAAKM,MAAM+B,eAEtCT,EAAOU,eAGd,GA1FM9C,EAAM+C,OAAG,CAACC,EAAgBC,EAAgBC,GAaLC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBvD,EAAAwD,UAAA,cAAA,GAhBvCxD,EAAMmD,EAAA,CAD1BM,EAAc,gBACMzD,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/BC,YAAmBC,GACjBC,MAAMJ,EAAYK,WADDC,KAAOH,QAAPA,CAElB,EAJMH,EAASK,UAAG"}
+{"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"}

package/lib/ShortcutController-87615e31.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShortcutController-87615e31.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 = window\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, normalise(this.shortcuts))\n  }\n}\n\nexport type { KeyBindingMap as ShortcutMap }\n"],"names":["ARROW_RE","ESC_RE","ShortcutController","constructor","host","shortcuts","target","window","this","addController","hostConnected","bind","hostDisconnected","unbind","_a","unregister","call","tinykeys","normalised","Object","keys","forEach","keybinding","test","mapped","replace","_match","capture","normalise"],"mappings":"kDAMA,MAAMA,EAAW,6BACXC,EAAS,gBAsBFC,EAGXC,YACEC,EACQC,EACAC,EAAyBC,QADzBC,KAASH,UAATA,EACAG,KAAMF,OAANA,EAERF,EAAKK,cAAcD,KACpB,CAEDE,gBACMF,KAAKH,WACPG,KAAKG,KAAKH,KAAKH,UAElB,CAEDO,mBACEJ,KAAKK,QACN,CAEDA,eACiB,QAAfC,EAAAN,KAAKO,kBAAU,IAAAD,GAAAA,EAAAE,KAAAR,KAChB,CAEDG,KAAKN,GACHG,KAAKK,SACLL,KAAKH,UAAYA,EACjBG,KAAKO,WAAaE,EAAST,KAAKF,OAhDpC,SAAmBD,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,CA8B4CU,CAAUpB,KAAKH,WACxD"}
+{"version":3,"file":"ShortcutController-87615e31.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 = window\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, normalise(this.shortcuts))\n  }\n}\n\nexport type { KeyBindingMap as ShortcutMap }\n"],"names":["ARROW_RE","ESC_RE","ShortcutController","constructor","host","shortcuts","target","window","this","addController","hostConnected","bind","hostDisconnected","unbind","_a","unregister","call","tinykeys","normalised","Object","keys","forEach","keybinding","test","mapped","replace","_match","capture","normalise"],"mappings":"kDAMA,MAAMA,EAAW,6BACXC,EAAS,gBAsBFC,EAGX,WAAAC,CACEC,EACQC,EACAC,EAAyBC,QADzBC,KAASH,UAATA,EACAG,KAAMF,OAANA,EAERF,EAAKK,cAAcD,KACpB,CAED,aAAAE,GACMF,KAAKH,WACPG,KAAKG,KAAKH,KAAKH,UAElB,CAED,gBAAAO,GACEJ,KAAKK,QACN,CAED,MAAAA,SACiB,QAAfC,EAAAN,KAAKO,kBAAU,IAAAD,GAAAA,EAAAE,KAAAR,KAChB,CAED,IAAAG,CAAKN,GACHG,KAAKK,SACLL,KAAKH,UAAYA,EACjBG,KAAKO,WAAaE,EAAST,KAAKF,OAhDpC,SAAmBD,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,CA8B4CU,CAAUpB,KAAKH,WACxD"}

package/lib/SizeMixin-ab074eff.js

@@ -0,0 +1,2 @@
+import{_ as e}from"./query-assigned-elements-92ce7494.js";import{n as r}from"./property-c78323b1.js";function s(s){class t extends s{constructor(){super(...arguments),this.size="m"}}return e([r({reflect:!0})],t.prototype,"size",void 0),t}export{s as S};
+//# sourceMappingURL=SizeMixin-ab074eff.js.map

package/lib/{SizeMixin-fb379434.js.map → SizeMixin-ab074eff.js.map}

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

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

package/lib/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 new\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":"iwCAmBe,IAAMA,EAAN,cAAuBC,EASpCC,SACE,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 { 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 new\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":"iwCAmBe,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-d733c575.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlotController-d733c575.js","sources":["../src/common/controllers/SlotController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { EventController } from \"./EventController.js\"\n\nexport class SlotController implements ReactiveController {\n  private events: EventController\n  private selector: string\n\n  constructor(protected host: ReactiveControllerHost & HTMLElement, public slotName: string = \"\") {\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    return this.host.querySelector(this.selector)\n  }\n\n  get assigned() {\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","querySelector","assigned","Array","from","querySelectorAll","_e","requestUpdate"],"mappings":"wDAGaA,EAIXC,YAAsBC,EAAmDC,EAAmB,IAAtEC,KAAIF,KAAJA,EAAmDE,KAAQD,SAARA,EA4BjEC,KAAAC,iBAAoBC,IACbA,EAAEC,OAENC,OAASJ,KAAKD,UACrBC,KAAKK,SAASH,EACf,EAhCDJ,EAAKQ,cAAcN,MACnBA,KAAKO,OAAS,IAAIC,EAAgBV,GAClCE,KAAKS,SAAWV,EAAW,mBAAmBA,MAAe,uBAC9D,CAEDW,gBACMV,KAAKF,KAAKa,YACZX,KAAKO,OAAOK,OAAOZ,KAAKF,KAAKa,WAAY,aAAcX,KAAKC,iBAE/D,CAEGY,iBACF,OAAuB,MAAhBb,KAAKc,OACb,CAEGC,cACF,OAAQf,KAAKa,UACd,CAEGC,cACF,OAAOd,KAAKF,KAAKkB,cAAchB,KAAKS,SACrC,CAEGQ,eACF,OAAOC,MAAMC,KAAKnB,KAAKF,KAAKsB,iBAAiBpB,KAAKS,UACnD,CAUSJ,SAASgB,GACjBrB,KAAKF,KAAKwB,eACX"}
+{"version":3,"file":"SlotController-d733c575.js","sources":["../src/common/controllers/SlotController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { EventController } from \"./EventController.js\"\n\nexport class SlotController implements ReactiveController {\n  private events: EventController\n  private selector: string\n\n  constructor(protected host: ReactiveControllerHost & HTMLElement, public slotName: string = \"\") {\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    return this.host.querySelector(this.selector)\n  }\n\n  get assigned() {\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","querySelector","assigned","Array","from","querySelectorAll","_e","requestUpdate"],"mappings":"wDAGaA,EAIX,WAAAC,CAAsBC,EAAmDC,EAAmB,IAAtEC,KAAIF,KAAJA,EAAmDE,KAAQD,SAARA,EA4BjEC,KAAAC,iBAAoBC,IACbA,EAAEC,OAENC,OAASJ,KAAKD,UACrBC,KAAKK,SAASH,EACf,EAhCDJ,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,OAAOd,KAAKF,KAAKkB,cAAchB,KAAKS,SACrC,CAED,YAAIQ,GACF,OAAOC,MAAMC,KAAKnB,KAAKF,KAAKsB,iBAAiBpB,KAAKS,UACnD,CAUS,QAAAJ,CAASgB,GACjBrB,KAAKF,KAAKwB,eACX"}

package/lib/Spinner.js

@@ -1,2 +1,2 @@
-import{i as n,_ as r,s as e,x as i,e as s}from"./query-assigned-elements-15485e3d.js";import{e as o}from"./property-03f59dce.js";import{l as t}from"./if-defined-9b177db4.js";import{c as a}from"./cond-44672025.js";import{s as l}from"./Component-420bbc41.js";const p=n`: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],r([o({reflect:!0})],c.prototype,"size",void 0),r([o({reflect:!0})],c.prototype,"color",void 0),r([o({reflect:!0})],c.prototype,"label",void 0),c=r([s("nord-spinner")],c);var d=c;export{d as default};
+import{i as n,_ as r,s as e,x as i,e as s}from"./query-assigned-elements-92ce7494.js";import{n as o}from"./property-c78323b1.js";import{l as t}from"./if-defined-cccde88f.js";import{c as a}from"./cond-bb9ee891.js";import{s as l}from"./Component-2253424f.js";const c=n`: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 p=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>`}};p.styles=[l,c],r([o({reflect:!0})],p.prototype,"size",void 0),r([o({reflect:!0})],p.prototype,"color",void 0),r([o({reflect:!0})],p.prototype,"label",void 0),p=r([s("nord-spinner")],p);var d=p;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":"o5CAiBe,IAAMA,EAAN,cAAsBC,EAAtBC,kCAMgBC,KAAIC,KAA0C,GA2B5E,CAZCC,SAGE,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 { 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":"o5CAiBe,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{i as t,_ as e,s,x as a,e as n}from"./query-assigned-elements-15485e3d.js";import{e as o}from"./property-03f59dce.js";import{s as i}from"./Component-420bbc41.js";const r=t`:host{--_n-stack-gap:var(--n-stack-gap, var(--n-space-m));display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;color:var(--n-color-text);gap:var(--_n-stack-gap);max-inline-size:100%;inline-size:100%}:host([direction=horizontal]){flex-direction:row}:host([wrap]){flex-wrap:wrap}:host([align-items=center]){align-items:center}:host([align-items=start]){align-items:flex-start}:host([align-items=end]){align-items:flex-end}:host([justify-content=center]){justify-content:center}:host([justify-content=start]){justify-content:flex-start}:host([justify-content=end]){justify-content:flex-end}:host([justify-content=space-between]){justify-content:space-between}:host([justify-content=space-evenly]){justify-content:space-evenly}:host([justify-content=space-around]){justify-content:space-around}::slotted(*){margin:0!important;min-inline-size:0;max-inline-size:100%}:host([gap=none]){--_n-stack-gap:var(--n-stack-gap, 0)}:host([gap="s"]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-s))}:host([gap="m"]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-m))}:host([gap="l"]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-l))}:host([gap=xl]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-xl))}:host([gap=xxl]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-xxl))}`;let c=class extends s{constructor(){super(...arguments),this.gap="m",this.direction="vertical",this.alignItems="stretch",this.wrap=!1}render(){return a`<slot></slot>`}};c.styles=[i,r],e([o({reflect:!0})],c.prototype,"gap",void 0),e([o({reflect:!0})],c.prototype,"direction",void 0),e([o({reflect:!0,attribute:"align-items"})],c.prototype,"alignItems",void 0),e([o({reflect:!0,type:Boolean})],c.prototype,"wrap",void 0),e([o({reflect:!0,attribute:"justify-content"})],c.prototype,"justifyContent",void 0),c=e([n("nord-stack")],c);var p=c;export{p as default};
+import{i as t,_ as e,s,x as n,e as a}from"./query-assigned-elements-92ce7494.js";import{n as o}from"./property-c78323b1.js";import{s as i}from"./Component-2253424f.js";const r=t`:host{--_n-stack-gap:var(--n-stack-gap, var(--n-space-m));display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;color:var(--n-color-text);gap:var(--_n-stack-gap);max-inline-size:100%;inline-size:100%}:host([direction=horizontal]){flex-direction:row}:host([wrap]){flex-wrap:wrap}:host([align-items=center]){align-items:center}:host([align-items=start]){align-items:flex-start}:host([align-items=end]){align-items:flex-end}:host([justify-content=center]){justify-content:center}:host([justify-content=start]){justify-content:flex-start}:host([justify-content=end]){justify-content:flex-end}:host([justify-content=space-between]){justify-content:space-between}:host([justify-content=space-evenly]){justify-content:space-evenly}:host([justify-content=space-around]){justify-content:space-around}::slotted(*){margin:0!important;min-inline-size:0;max-inline-size:100%}:host([gap=none]){--_n-stack-gap:var(--n-stack-gap, 0)}:host([gap="s"]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-s))}:host([gap="m"]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-m))}:host([gap="l"]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-l))}:host([gap=xl]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-xl))}:host([gap=xxl]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-xxl))}`;let c=class extends s{constructor(){super(...arguments),this.gap="m",this.direction="vertical",this.alignItems="stretch",this.wrap=!1}render(){return n`<slot></slot>`}};c.styles=[i,r],e([o({reflect:!0})],c.prototype,"gap",void 0),e([o({reflect:!0})],c.prototype,"direction",void 0),e([o({reflect:!0,attribute:"align-items"})],c.prototype,"alignItems",void 0),e([o({reflect:!0,type:Boolean})],c.prototype,"wrap",void 0),e([o({reflect:!0,attribute:"justify-content"})],c.prototype,"justifyContent",void 0),c=e([a("nord-stack")],c);var p=c;export{p as default};
 //# sourceMappingURL=Stack.js.map

package/lib/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\" | \"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?: \"center\" | \"start\" | \"end\" | \"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    | \"baseline\"\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":"g8CAgBe,IAAMA,EAAN,cAAoBC,EAApBC,kCAMgBC,KAAGC,IAA4C,IAK/CD,KAASE,UAA8B,WAKbF,KAAUG,WAA4C,UAMjEH,KAAII,MAAG,CAiBpD,CAHCC,SACE,OAAOC,CAAI,eACZ,GArCMT,EAAAU,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA0Df,EAAAgB,UAAA,WAAA,GAKlDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyDf,EAAAgB,UAAA,iBAAA,GAKvBH,EAAA,CAAtDC,EAAS,CAAEC,SAAS,EAAME,UAAW,iBAAgFjB,EAAAgB,UAAA,kBAAA,GAM1EH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMG,KAAMC,WAAuBnB,EAAAgB,UAAA,YAAA,GAKGH,EAAA,CAA1DC,EAAS,CAAEC,SAAS,EAAME,UAAW,qBAOpBjB,EAAAgB,UAAA,sBAAA,GAlCChB,EAAKa,EAAA,CADzBO,EAAc,eACMpB,SAAAA"}
+{"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\" | \"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?: \"center\" | \"start\" | \"end\" | \"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    | \"baseline\"\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":"g8CAgBe,IAAMA,EAAN,cAAoBC,EAApB,WAAAC,uBAMgBC,KAAGC,IAA4C,IAK/CD,KAASE,UAA8B,WAKbF,KAAUG,WAA4C,UAMjEH,KAAII,MAAG,CAiBpD,CAHC,MAAAC,GACE,OAAOC,CAAI,eACZ,GArCMT,EAAAU,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA0Df,EAAAgB,UAAA,WAAA,GAKlDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyDf,EAAAgB,UAAA,iBAAA,GAKvBH,EAAA,CAAtDC,EAAS,CAAEC,SAAS,EAAME,UAAW,iBAAgFjB,EAAAgB,UAAA,kBAAA,GAM1EH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMG,KAAMC,WAAuBnB,EAAAgB,UAAA,YAAA,GAKGH,EAAA,CAA1DC,EAAS,CAAEC,SAAS,EAAME,UAAW,qBAOpBjB,EAAAgB,UAAA,sBAAA,GAlCChB,EAAKa,EAAA,CADzBO,EAAc,eACMpB,SAAAA"}

package/lib/{Sticky-acc92284.js → Sticky-c34c9b12.js}

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

package/lib/Sticky-c34c9b12.js.map

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

package/lib/Tab.js

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

package/lib/Tab.js.map

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

package/lib/TabGroup.js

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

package/lib/TabGroup.js.map

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

package/lib/TabPanel.js

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

package/lib/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sources":["../src/tab-panel/TabPanel.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./TabPanel.css\"\n\n/**\n * The panel which contains content that can be revealed using a tab\n * in the tab group component.\n *\n * @status ready\n * @category navigation\n * @slot - The tab panel content.\n */\n@customElement(\"nord-tab-panel\")\nexport default class TabPanel extends LitElement {\n  static styles = [componentStyle, style]\n\n  render() {\n    return html`<div class=\"n-tab-panel\"><slot></slot></div>`\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    /**\n     * Apply accessible attributes and values to the tab panel.\n     */\n    this.setAttribute(\"role\", \"tabpanel\")\n    this.setAttribute(\"tabindex\", \"0\")\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-tab-panel\": TabPanel\n  }\n}\n"],"names":["TabPanel","LitElement","render","html","connectedCallback","super","this","setAttribute","styles","componentStyle","style","__decorate","customElement"],"mappings":"qOAee,IAAMA,EAAN,cAAuBC,EAGpCC,SACE,OAAOC,CAAI,8CACZ,CAEDC,oBACEC,MAAMD,oBAKNE,KAAKC,aAAa,OAAQ,YAC1BD,KAAKC,aAAa,WAAY,IAC/B,GAdMP,EAAAQ,OAAS,CAACC,EAAgBC,GADdV,EAAQW,EAAA,CAD5BC,EAAc,mBACMZ,SAAAA"}
+{"version":3,"file":"TabPanel.js","sources":["../src/tab-panel/TabPanel.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./TabPanel.css\"\n\n/**\n * The panel which contains content that can be revealed using a tab\n * in the tab group component.\n *\n * @status ready\n * @category navigation\n * @slot - The tab panel content.\n */\n@customElement(\"nord-tab-panel\")\nexport default class TabPanel extends LitElement {\n  static styles = [componentStyle, style]\n\n  render() {\n    return html`<div class=\"n-tab-panel\"><slot></slot></div>`\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    /**\n     * Apply accessible attributes and values to the tab panel.\n     */\n    this.setAttribute(\"role\", \"tabpanel\")\n    this.setAttribute(\"tabindex\", \"0\")\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-tab-panel\": TabPanel\n  }\n}\n"],"names":["TabPanel","LitElement","render","html","connectedCallback","super","this","setAttribute","styles","componentStyle","style","__decorate","customElement"],"mappings":"qOAee,IAAMA,EAAN,cAAuBC,EAGpC,MAAAC,GACE,OAAOC,CAAI,8CACZ,CAED,iBAAAC,GACEC,MAAMD,oBAKNE,KAAKC,aAAa,OAAQ,YAC1BD,KAAKC,aAAa,WAAY,IAC/B,GAdMP,EAAAQ,OAAS,CAACC,EAAgBC,GADdV,EAAQW,EAAA,CAD5BC,EAAc,mBACMZ,SAAAA"}

package/lib/Table.js

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

package/lib/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../src/table/Table.ts"],"sourcesContent":["import { LitElement, html, render } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport style from \"./Table.css\"\n\nfunction isDocument(node: Node): node is Document {\n  return node.nodeType === Node.DOCUMENT_NODE\n}\n\n/**\n * Table is used to organize and display information from a data set.\n * Provides table styles in addition to features like sticky\n * headers and support for narrow viewports.\n *\n * @status ready\n * @category list\n * @slot - Default slot which holds the HTML `<table>` element.\n *\n * @cssprop [--n-table-td-padding=calc(var(--n-space-m) * 0.95)] - Controls the padding around the table cells.\n * @cssprop [--n-table-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n *\n * @usage https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-react-tanstack-table?embed=1&file=src/DataTable/DataTable.tsx&hideNavigation=1&view=preview - with react and tanstack table\n * @usage https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-react-ag-grid?embed=1&file=src/DataTable/DataTable.tsx&hideNavigation=1&view=preview - with react and ag grid\n * @usage https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-vue-tanstack-table?embed=1&file=src/components/DataTable/DataTable.vue&hideNavigation=1&view=preview - with vue and tanstack table\n * @usage https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-vue-ag-grid?embed=1&file=src/components/DataTable/DataTable.vue&hideNavigation=1&view=preview - with vue and ag grid\n */\n@customElement(\"nord-table\")\nexport default class Table extends LitElement {\n  /**\n   * Controls the density of the table's rows and headers.\n   * Relaxed increases space, condensed reduces space.\n   */\n  @property({ reflect: true }) density: \"condensed\" | \"default\" | \"relaxed\" = \"default\"\n\n  /**\n   * Enables scroll-snapping, meaning the scroll position is always column-aligned.\n   */\n  @property({ reflect: true, type: Boolean, attribute: \"scroll-snap\" }) scrollSnap = false\n\n  /**\n   * Controls whether to use zebra striping on tables, which can improve readability.\n   */\n  @property({ type: Boolean, reflect: true }) striped = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.renderStyles()\n  }\n\n  /**\n   * renders table styles into nearest root.\n   * this is necessary since we do not use shadow dom.\n   */\n  private renderStyles() {\n    const rootNode = this.getRootNode() as Document | ShadowRoot\n    const renderTarget = isDocument(rootNode) ? rootNode.head : rootNode\n    const tagName = this.localName\n\n    const componentStyles = rootNode.querySelector(`style[data-component=${tagName}]`)\n    if (componentStyles) {\n      return\n    }\n\n    const fragment = document.createDocumentFragment()\n    render(\n      html`\n        <style data-component=${tagName}>\n          ${style}\n        </style>\n      `,\n      fragment\n    )\n    renderTarget.appendChild(fragment)\n  }\n\n  /**\n   * opt out of shadow dom\n   */\n  protected createRenderRoot() {\n    return this\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-table\": Table\n  }\n}\n"],"names":["Table","LitElement","constructor","this","density","scrollSnap","striped","connectedCallback","super","renderStyles","rootNode","getRootNode","renderTarget","nodeType","Node","DOCUMENT_NODE","head","tagName","localName","querySelector","fragment","document","createDocumentFragment","render","html","style","appendChild","createRenderRoot","__decorate","property","reflect","prototype","type","Boolean","attribute","customElement"],"mappings":"g6FA0Be,IAAMA,EAAN,cAAoBC,EAApBC,kCAKgBC,KAAOC,QAAwC,UAKND,KAAUE,YAAG,EAKvCF,KAAOG,SAAG,CAuCvD,CArCCC,oBACEC,MAAMD,oBACNJ,KAAKM,cACN,CAMOA,eACN,MAAMC,EAAWP,KAAKQ,cAChBC,EAA0BF,EAjDtBG,WAAaC,KAAKC,cAiDgBL,EAASM,KAAON,EAC5D,MAAMO,EAAUd,KAAKe,UAGrB,GADwBR,EAASS,cAAc,wBAAwBF,MAErE,OAGF,MAAMG,EAAWC,SAASC,yBAC1BC,EACEC,CAAI,0BACsBP,MACpBQ,YAGNL,GAEFR,EAAac,YAAYN,EAC1B,CAKSO,mBACR,OAAOxB,IACR,GAhD4ByB,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAgE9B,EAAA+B,UAAA,eAAA,GAKfH,EAAA,CAArEC,EAAS,CAAEC,SAAS,EAAME,KAAMC,QAASC,UAAW,iBAAmClC,EAAA+B,UAAA,kBAAA,GAK5CH,EAAA,CAA3CC,EAAS,CAAEG,KAAMC,QAASH,SAAS,KAAuB9B,EAAA+B,UAAA,eAAA,GAfxC/B,EAAK4B,EAAA,CADzBO,EAAc,eACMnC,SAAAA"}
+{"version":3,"file":"Table.js","sources":["../src/table/Table.ts"],"sourcesContent":["import { LitElement, html, render } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport style from \"./Table.css\"\n\nfunction isDocument(node: Node): node is Document {\n  return node.nodeType === Node.DOCUMENT_NODE\n}\n\n/**\n * Table is used to organize and display information from a data set.\n * Provides table styles in addition to features like sticky\n * headers and support for narrow viewports.\n *\n * @status ready\n * @category list\n * @slot - Default slot which holds the HTML `<table>` element.\n *\n * @cssprop [--n-table-td-padding=calc(var(--n-space-m) * 0.95)] - Controls the padding around the table cells.\n * @cssprop [--n-table-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n *\n * @usage https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-react-tanstack-table?embed=1&file=src/DataTable/DataTable.tsx&hideNavigation=1&view=preview - with react and tanstack table\n * @usage https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-react-ag-grid?embed=1&file=src/DataTable/DataTable.tsx&hideNavigation=1&view=preview - with react and ag grid\n * @usage https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-vue-tanstack-table?embed=1&file=src/components/DataTable/DataTable.vue&hideNavigation=1&view=preview - with vue and tanstack table\n * @usage https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-vue-ag-grid?embed=1&file=src/components/DataTable/DataTable.vue&hideNavigation=1&view=preview - with vue and ag grid\n */\n@customElement(\"nord-table\")\nexport default class Table extends LitElement {\n  /**\n   * Controls the density of the table's rows and headers.\n   * Relaxed increases space, condensed reduces space.\n   */\n  @property({ reflect: true }) density: \"condensed\" | \"default\" | \"relaxed\" = \"default\"\n\n  /**\n   * Enables scroll-snapping, meaning the scroll position is always column-aligned.\n   */\n  @property({ reflect: true, type: Boolean, attribute: \"scroll-snap\" }) scrollSnap = false\n\n  /**\n   * Controls whether to use zebra striping on tables, which can improve readability.\n   */\n  @property({ type: Boolean, reflect: true }) striped = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.renderStyles()\n  }\n\n  /**\n   * renders table styles into nearest root.\n   * this is necessary since we do not use shadow dom.\n   */\n  private renderStyles() {\n    const rootNode = this.getRootNode() as Document | ShadowRoot\n    const renderTarget = isDocument(rootNode) ? rootNode.head : rootNode\n    const tagName = this.localName\n\n    const componentStyles = rootNode.querySelector(`style[data-component=${tagName}]`)\n    if (componentStyles) {\n      return\n    }\n\n    const fragment = document.createDocumentFragment()\n    render(\n      html`\n        <style data-component=${tagName}>\n          ${style}\n        </style>\n      `,\n      fragment\n    )\n    renderTarget.appendChild(fragment)\n  }\n\n  /**\n   * opt out of shadow dom\n   */\n  protected createRenderRoot() {\n    return this\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-table\": Table\n  }\n}\n"],"names":["Table","LitElement","constructor","this","density","scrollSnap","striped","connectedCallback","super","renderStyles","rootNode","getRootNode","renderTarget","nodeType","Node","DOCUMENT_NODE","head","tagName","localName","querySelector","fragment","document","createDocumentFragment","render","html","style","appendChild","createRenderRoot","__decorate","property","reflect","prototype","type","Boolean","attribute","customElement"],"mappings":"g6FA0Be,IAAMA,EAAN,cAAoBC,EAApB,WAAAC,uBAKgBC,KAAOC,QAAwC,UAKND,KAAUE,YAAG,EAKvCF,KAAOG,SAAG,CAuCvD,CArCC,iBAAAC,GACEC,MAAMD,oBACNJ,KAAKM,cACN,CAMO,YAAAA,GACN,MAAMC,EAAWP,KAAKQ,cAChBC,EAA0BF,EAjDtBG,WAAaC,KAAKC,cAiDgBL,EAASM,KAAON,EAC5D,MAAMO,EAAUd,KAAKe,UAGrB,GADwBR,EAASS,cAAc,wBAAwBF,MAErE,OAGF,MAAMG,EAAWC,SAASC,yBAC1BC,EACEC,CAAI,0BACsBP,MACpBQ,YAGNL,GAEFR,EAAac,YAAYN,EAC1B,CAKS,gBAAAO,GACR,OAAOxB,IACR,GAhD4ByB,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAgE9B,EAAA+B,UAAA,eAAA,GAKfH,EAAA,CAArEC,EAAS,CAAEC,SAAS,EAAME,KAAMC,QAASC,UAAW,iBAAmClC,EAAA+B,UAAA,kBAAA,GAK5CH,EAAA,CAA3CC,EAAS,CAAEG,KAAMC,QAASH,SAAS,KAAuB9B,EAAA+B,UAAA,eAAA,GAfxC/B,EAAK4B,EAAA,CADzBO,EAAc,eACMnC,SAAAA"}

package/lib/Tag.js

@@ -1,2 +1,2 @@
-import{i as o,x as e,_ as n,e as r,s as t}from"./query-assigned-elements-15485e3d.js";import{e as a}from"./property-03f59dce.js";import{l as i}from"./if-defined-9b177db4.js";import{n as c}from"./ref-5526fb07.js";import{c as s}from"./interface-checked-small-07292940.js";import{c as l}from"./interface-close-small-f26b0299.js";import d from"./Icon.js";import{I as b}from"./InputMixin-f9fb4034.js";import{F as v}from"./FocusableMixin-4300e44e.js";import{N as p}from"./events-d9666e88.js";import{F as h}from"./FormDataController-592ff3dd.js";import{LocalizeController as u}from"./LocalizeController.js";import{s as m}from"./Component-420bbc41.js";import"./directive-de55b00a.js";import"./state-70f38ceb.js";import"./cond-44672025.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";const g=o`:host{--_n-tag-background-color:var(--n-color-nav-hover);--_n-tag-border-color:var(--n-color-border-neutral);--_n-tag-checkbox-size:var(--n-size-icon-s);--_n-tag-checkbox-accent-color:var(--n-color-accent);--_n-tag-checkbox-border-color:var(--n-color-border-hover);--_n-tag-font-size:var(--n-font-size-m);display:inline;vertical-align:middle}.n-expand{flex:1}.n-tag{border-radius:var(--n-border-radius-s);border:1px solid var(--_n-tag-border-color);background:var(--_n-tag-background-color);font-size:var(--_n-tag-font-size);font-family:var(--n-font-family);font-weight:var(--n-font-weight);font-feature-settings:var(--n-font-features);line-height:var(--n-line-height-tight);letter-spacing:0;min-block-size:1.75rem;padding:0 var(--n-space-s);color:var(--n-color-text);gap:calc(var(--n-space-xs) * 1.5);align-items:center;display:inline-flex;white-space:nowrap;position:relative}.n-input-container{position:relative}input{appearance:none;background:var(--n-color-active);border:1px solid var(--_n-tag-checkbox-border-color);border-radius:var(--n-border-radius-s);display:block;inline-size:var(--_n-tag-checkbox-size);block-size:var(--_n-tag-checkbox-size);cursor:pointer}:host(:is([variant=selectable],[variant=removable])) .n-tag{--_n-tag-border-color:var(--n-color-border-strong);box-shadow:var(--n-box-shadow)}:host([variant=selectable]) .n-tag:hover{--_n-tag-border-color:var(--n-color-border-hover)}.n-tag:has(input:checked){--_n-tag-background-color:var(--n-color-button)}input:checked{--_n-tag-checkbox-border-color:var(--n-color-accent);background:var(--_n-tag-checkbox-accent-color)}input:focus-visible{outline:0!important}input:focus{outline:0!important}:host([variant=selectable]:focus-within) .n-tag{box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}:host(:not([disabled])) label:active{opacity:.8;transform:translateY(1px);transition:none}nord-icon.icon-checked{--_n-icon-size:var(--n-size-icon-xxs);display:none;position:absolute;color:var(--n-color-text-on-accent);inset:calc(var(--n-space-xs)/ 2);z-index:var(--n-index-default);pointer-events:none}input:checked~nord-icon.icon-checked{display:block}label{-webkit-user-select:none;user-select:none;cursor:pointer}.n-remove-button{-webkit-appearance:none;appearance:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border:0;color:var(--n-color-text);border-radius:calc(var(--n-border-radius-s) - 1px);background:0 0;margin-block-start:calc(var(--n-space-xs) * -1);margin-block-end:calc(var(--n-space-xs) * -1);margin-inline-start:0;margin-inline-end:calc(var(--n-space-s) * -1);padding:calc(var(--n-space-s) + 1px)}.n-remove-button nord-icon{--_n-icon-size:var(--n-size-icon-xxs);color:var(--n-color-icon)}.n-remove-button:hover{background:var(--n-color-surface-lowered)}.n-remove-button:hover nord-icon{color:var(--n-color-icon-hover)}.n-remove-button:focus-visible{outline:0!important}.n-remove-button:focus{outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}:host(:not([disabled])) .n-remove-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([disabled]:not([variant=default])) .n-tag{--_n-tag-background-color:var(--n-color-surface-lowered);--_n-tag-border-color:var(--_n-tag-background-color);color:var(--n-color-text-weaker);cursor:default;opacity:.5}:host([disabled]) input{background:var(--_n-tag-checkbox-accent-color);cursor:default;opacity:1}:host([disabled]) input:not(:checked){--_n-tag-checkbox-accent-color:var(--n-color-background);--_n-tag-checkbox-border-color:var(--n-color-border-hover)}:host([disabled]) .n-remove-button{cursor:default}:host([disabled]) .n-remove-button:hover{background:0 0}:host([disabled]) .n-remove-button:hover nord-icon{color:var(--n-color-icon)}:host([disabled]:is([variant=selectable],[variant=removable])) .n-tag{box-shadow:none}:host([size="s"]) .n-tag{--_n-tag-font-size:var(--n-font-size-s)}`;d.registerIcon(s),d.registerIcon(l);let f=class extends(function(o){class e extends o{connectedCallback(){super.connectedCallback(),e._warningLogged||(console.warn(`NORD: %c${this.localName}%c should not be used in production, as it is in draft status.`,"font-weight:bold","font-weight:normal"),e._warningLogged=!0)}}return e._warningLogged=!1,e}(b(v(t)))){constructor(){super(...arguments),this.localize=new u(this),this.formData=new h(this,{value:()=>this.formValue}),this.inputId="input",this.variant="default",this.checked=!1,this.size="m"}get formValue(){return"selectable"===this.variant&&this.checked?this.value||"on":void 0}handleChange(o){const e=o.target;this.checked=e.checked,o.stopPropagation(),this.dispatchEvent(new p("change"))}handleRemove(){this.dispatchEvent(new p("remove"))}render(){switch(this.variant){case"selectable":return this.renderSelectableTag();case"removable":return this.renderRemovableTag();default:return this.renderStaticTag()}}renderStaticTag(){return e`<div class="n-tag"><slot></slot></div>`}renderRemovableTag(){return e`<div class="n-tag"><slot></slot><button class="n-remove-button" @click="${this.handleRemove}" ?disabled="${this.disabled}"><nord-icon name="interface-close-small" label="${this.localize.term("removeLabel")}"></nord-icon></button></div>`}renderSelectableTag(){return e`<label for="${this.inputId}" class="n-tag"><div class="n-input-container"><input ${c(this.focusableRef)} class="n-input" id="${this.inputId}" type="checkbox" name="${i(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" @change="${this.handleChange}"><nord-icon class="icon-checked" name="interface-checked-small"></nord-icon></div><div class="n-expand"><slot></slot></div></label>`}};f.styles=[m,g],n([a({reflect:!0})],f.prototype,"variant",void 0),n([a({reflect:!0,type:Boolean})],f.prototype,"checked",void 0),n([a({reflect:!0})],f.prototype,"size",void 0),f=n([r("nord-tag")],f);var k=f;export{k as default};
+import{i as o,x as e,_ as n,e as r,s as t}from"./query-assigned-elements-92ce7494.js";import{n as a}from"./property-c78323b1.js";import{l as i}from"./if-defined-cccde88f.js";import{n as c}from"./ref-99418ab4.js";import{c as s}from"./interface-checked-small-07292940.js";import{c as l}from"./interface-close-small-f26b0299.js";import d from"./Icon.js";import{I as b}from"./InputMixin-83b5bd46.js";import{F as v}from"./FocusableMixin-d30213b4.js";import{N as p}from"./events-d9666e88.js";import{F as h}from"./FormDataController-592ff3dd.js";import{LocalizeController as u}from"./LocalizeController.js";import{s as m}from"./Component-2253424f.js";import"./directive-e9ce14b4.js";import"./state-d31c6912.js";import"./cond-bb9ee891.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";const g=o`:host{--_n-tag-background-color:var(--n-color-nav-hover);--_n-tag-border-color:var(--n-color-border-neutral);--_n-tag-checkbox-size:var(--n-size-icon-s);--_n-tag-checkbox-accent-color:var(--n-color-accent);--_n-tag-checkbox-border-color:var(--n-color-border-hover);--_n-tag-font-size:var(--n-font-size-m);display:inline;vertical-align:middle}.n-expand{flex:1}.n-tag{border-radius:var(--n-border-radius-s);border:1px solid var(--_n-tag-border-color);background:var(--_n-tag-background-color);font-size:var(--_n-tag-font-size);font-family:var(--n-font-family);font-weight:var(--n-font-weight);font-feature-settings:var(--n-font-features);line-height:var(--n-line-height-tight);letter-spacing:0;min-block-size:1.75rem;padding:0 var(--n-space-s);color:var(--n-color-text);gap:calc(var(--n-space-xs) * 1.5);align-items:center;display:inline-flex;white-space:nowrap;position:relative}.n-input-container{position:relative}input{appearance:none;background:var(--n-color-active);border:1px solid var(--_n-tag-checkbox-border-color);border-radius:var(--n-border-radius-s);display:block;inline-size:var(--_n-tag-checkbox-size);block-size:var(--_n-tag-checkbox-size);cursor:pointer}:host(:is([variant=selectable],[variant=removable])) .n-tag{--_n-tag-border-color:var(--n-color-border-strong);box-shadow:var(--n-box-shadow)}:host([variant=selectable]) .n-tag:hover{--_n-tag-border-color:var(--n-color-border-hover)}.n-tag:has(input:checked){--_n-tag-background-color:var(--n-color-button)}input:checked{--_n-tag-checkbox-border-color:var(--n-color-accent);background:var(--_n-tag-checkbox-accent-color)}input:focus-visible{outline:0!important}input:focus{outline:0!important}:host([variant=selectable]:focus-within) .n-tag{box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}:host(:not([disabled])) label:active{opacity:.8;transform:translateY(1px);transition:none}nord-icon.icon-checked{--_n-icon-size:var(--n-size-icon-xxs);display:none;position:absolute;color:var(--n-color-text-on-accent);inset:calc(var(--n-space-xs)/ 2);z-index:var(--n-index-default);pointer-events:none}input:checked~nord-icon.icon-checked{display:block}label{-webkit-user-select:none;user-select:none;cursor:pointer}.n-remove-button{-webkit-appearance:none;appearance:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border:0;color:var(--n-color-text);border-radius:calc(var(--n-border-radius-s) - 1px);background:0 0;margin-block-start:calc(var(--n-space-xs) * -1);margin-block-end:calc(var(--n-space-xs) * -1);margin-inline-start:0;margin-inline-end:calc(var(--n-space-s) * -1);padding:calc(var(--n-space-s) + 1px)}.n-remove-button nord-icon{--_n-icon-size:var(--n-size-icon-xxs);color:var(--n-color-icon)}.n-remove-button:hover{background:var(--n-color-surface-lowered)}.n-remove-button:hover nord-icon{color:var(--n-color-icon-hover)}.n-remove-button:focus-visible{outline:0!important}.n-remove-button:focus{outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}:host(:not([disabled])) .n-remove-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([disabled]:not([variant=default])) .n-tag{--_n-tag-background-color:var(--n-color-surface-lowered);--_n-tag-border-color:var(--_n-tag-background-color);color:var(--n-color-text-weaker);cursor:default;opacity:.5}:host([disabled]) input{background:var(--_n-tag-checkbox-accent-color);cursor:default;opacity:1}:host([disabled]) input:not(:checked){--_n-tag-checkbox-accent-color:var(--n-color-background);--_n-tag-checkbox-border-color:var(--n-color-border-hover)}:host([disabled]) .n-remove-button{cursor:default}:host([disabled]) .n-remove-button:hover{background:0 0}:host([disabled]) .n-remove-button:hover nord-icon{color:var(--n-color-icon)}:host([disabled]:is([variant=selectable],[variant=removable])) .n-tag{box-shadow:none}:host([size="s"]) .n-tag{--_n-tag-font-size:var(--n-font-size-s)}`;d.registerIcon(s),d.registerIcon(l);let f=class extends(function(o){class e extends o{connectedCallback(){super.connectedCallback(),e._warningLogged||(console.warn(`NORD: %c${this.localName}%c should not be used in production, as it is in draft status.`,"font-weight:bold","font-weight:normal"),e._warningLogged=!0)}}return e._warningLogged=!1,e}(b(v(t)))){constructor(){super(...arguments),this.localize=new u(this),this.formData=new h(this,{value:()=>this.formValue}),this.inputId="input",this.variant="default",this.checked=!1,this.size="m"}get formValue(){return"selectable"===this.variant&&this.checked?this.value||"on":void 0}handleChange(o){const e=o.target;this.checked=e.checked,o.stopPropagation(),this.dispatchEvent(new p("change"))}handleRemove(){this.dispatchEvent(new p("remove"))}render(){switch(this.variant){case"selectable":return this.renderSelectableTag();case"removable":return this.renderRemovableTag();default:return this.renderStaticTag()}}renderStaticTag(){return e`<div class="n-tag"><slot></slot></div>`}renderRemovableTag(){return e`<div class="n-tag"><slot></slot><button class="n-remove-button" @click="${this.handleRemove}" ?disabled="${this.disabled}"><nord-icon name="interface-close-small" label="${this.localize.term("removeLabel")}"></nord-icon></button></div>`}renderSelectableTag(){return e`<label for="${this.inputId}" class="n-tag"><div class="n-input-container"><input ${c(this.focusableRef)} class="n-input" id="${this.inputId}" type="checkbox" name="${i(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" @change="${this.handleChange}"><nord-icon class="icon-checked" name="interface-checked-small"></nord-icon></div><div class="n-expand"><slot></slot></div></label>`}};f.styles=[m,g],n([a({reflect:!0})],f.prototype,"variant",void 0),n([a({reflect:!0,type:Boolean})],f.prototype,"checked",void 0),n([a({reflect:!0})],f.prototype,"size",void 0),f=n([r("nord-tag")],f);var k=f;export{k as default};
 //# sourceMappingURL=Tag.js.map