@nordhealth/components 1.12.0 → 1.14.0

package/lib/Stack.js

@@ -1,2 +1,2 @@
-import{_ as t,n as e}from"./query-assigned-elements-ef860822.js";import{r as s,s as n,$ as o}from"./lit-element-67e6cd99.js";import{e as a}from"./property-03f59dce.js";import{s as i}from"./Component-5a0a26a0.js";const r=s`:host{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;color:var(--n-color-text);gap:var(--n-stack-gap,var(--n-space-m));max-inline-size:100%;inline-size:100%}:host([direction=horizontal]){flex-direction:row}:host([wrap]){flex-wrap:wrap}@media (max-width:768px){:host([responsive]){flex-direction:column!important}}:host([align-items=center]){align-items:center}:host([align-items=start]){align-items:flex-start}:host([align-items=end]){align-items:flex-end}:host([justify-content=center]){justify-content:center}:host([justify-content=start]){justify-content:flex-start}:host([justify-content=end]){justify-content:flex-end}:host([justify-content=space-between]){justify-content:space-between}:host([justify-content=space-evenly]){justify-content:space-evenly}:host([justify-content=space-around]){justify-content:space-around}::slotted(*){margin:0!important;min-inline-size:0;max-inline-size:100%}:host([gap=none]){--n-stack-gap:0}:host([gap="s"]){--n-stack-gap:var(--n-space-s)}:host([gap="m"]){--n-stack-gap:var(--n-space-m)}:host([gap="l"]){--n-stack-gap:var(--n-space-l)}:host([gap=xl]){--n-stack-gap:var(--n-space-xl)}:host([gap=xxl]){--n-stack-gap:var(--n-space-xxl)}`;let c=class extends n{constructor(){super(...arguments),this.gap="m",this.direction="vertical",this.alignItems="stretch",this.responsive=!1,this.wrap=!1}render(){return o`<slot></slot>`}};c.styles=[i,r],t([a({reflect:!0})],c.prototype,"gap",void 0),t([a({reflect:!0})],c.prototype,"direction",void 0),t([a({reflect:!0,attribute:"align-items"})],c.prototype,"alignItems",void 0),t([a({reflect:!0,type:Boolean})],c.prototype,"responsive",void 0),t([a({reflect:!0,type:Boolean})],c.prototype,"wrap",void 0),t([a({reflect:!0,attribute:"justify-content"})],c.prototype,"justifyContent",void 0),c=t([e("nord-stack")],c);var p=c;export{p as default};
+import{_ as t,e}from"./query-assigned-elements-e6cbac30.js";import{i as s,s as n,y as o}from"./lit-element-79bc2e0e.js";import{e as a}from"./property-03f59dce.js";import{s as i}from"./Component-49a41387.js";const r=s`:host{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;color:var(--n-color-text);gap:var(--n-stack-gap,var(--n-space-m));max-inline-size:100%;inline-size:100%}:host([direction=horizontal]){flex-direction:row}:host([wrap]){flex-wrap:wrap}@media (max-width:768px){:host([responsive]){flex-direction:column!important}}:host([align-items=center]){align-items:center}:host([align-items=start]){align-items:flex-start}:host([align-items=end]){align-items:flex-end}:host([justify-content=center]){justify-content:center}:host([justify-content=start]){justify-content:flex-start}:host([justify-content=end]){justify-content:flex-end}:host([justify-content=space-between]){justify-content:space-between}:host([justify-content=space-evenly]){justify-content:space-evenly}:host([justify-content=space-around]){justify-content:space-around}::slotted(*){margin:0!important;min-inline-size:0;max-inline-size:100%}:host([gap=none]){--n-stack-gap:0}:host([gap="s"]){--n-stack-gap:var(--n-space-s)}:host([gap="m"]){--n-stack-gap:var(--n-space-m)}:host([gap="l"]){--n-stack-gap:var(--n-space-l)}:host([gap=xl]){--n-stack-gap:var(--n-space-xl)}:host([gap=xxl]){--n-stack-gap:var(--n-space-xxl)}`;let c=class extends n{constructor(){super(...arguments),this.gap="m",this.direction="vertical",this.alignItems="stretch",this.responsive=!1,this.wrap=!1}render(){return o`<slot></slot>`}};c.styles=[i,r],t([a({reflect:!0})],c.prototype,"gap",void 0),t([a({reflect:!0})],c.prototype,"direction",void 0),t([a({reflect:!0,attribute:"align-items"})],c.prototype,"alignItems",void 0),t([a({reflect:!0,type:Boolean})],c.prototype,"responsive",void 0),t([a({reflect:!0,type:Boolean})],c.prototype,"wrap",void 0),t([a({reflect:!0,attribute:"justify-content"})],c.prototype,"justifyContent",void 0),c=t([e("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@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   * This property is deprecated and will be removed in a future version. We recommend using standard [CSS media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) over this property. Please see the [updated usage example](/components/stack/?example=using+responsive+media+query).\n   * @deprecated\n   */\n  @property({ reflect: true, type: Boolean }) responsive = false\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","responsive","wrap","render","html","styles","componentStyle","style","__decorate","property","reflect","prototype","attribute","type","Boolean","customElement"],"mappings":"w5CAcA,IAAqBA,EAArB,cAAmCC,EAAnCC,kCAM+BC,KAAGC,IAA4C,IAK/CD,KAASE,UAA8B,WAKbF,KAAUG,WAA4C,UAMjEH,KAAUI,YAAG,EAMbJ,KAAIK,MAAG,EAcnDC,SACE,OAAOC,CAAI,kBA1CNV,EAAAW,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA0DhB,EAAAiB,UAAA,WAAA,GAKlDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyDhB,EAAAiB,UAAA,iBAAA,GAKvBH,EAAA,CAAtDC,EAAS,CAAEC,SAAS,EAAME,UAAW,iBAAgFlB,EAAAiB,UAAA,kBAAA,GAM1EH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMG,KAAMC,WAA6BpB,EAAAiB,UAAA,kBAAA,GAMlBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMG,KAAMC,WAAuBpB,EAAAiB,UAAA,YAAA,GAKGH,EAAA,CAA1DC,EAAS,CAAEC,SAAS,EAAME,UAAW,qBAOpBlB,EAAAiB,UAAA,sBAAA,GAxCCjB,EAAKc,EAAA,CADzBO,EAAc,eACMrB,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@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   * This property is deprecated and will be removed in a future version. We recommend using standard [CSS media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) over this property. Please see the [updated usage example](/components/stack/?example=using+responsive+media+query).\n   * @deprecated\n   */\n  @property({ reflect: true, type: Boolean }) responsive = false\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","responsive","wrap","render","html","styles","componentStyle","style","__decorate","property","reflect","prototype","attribute","type","Boolean","customElement"],"mappings":"m5CAcA,IAAqBA,EAArB,cAAmCC,EAAnCC,kCAM+BC,KAAGC,IAA4C,IAK/CD,KAASE,UAA8B,WAKbF,KAAUG,WAA4C,UAMjEH,KAAUI,YAAG,EAMbJ,KAAIK,MAAG,CAiBpD,CAHCC,SACE,OAAOC,CAAI,eACZ,GA3CMV,EAAAW,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA0DhB,EAAAiB,UAAA,WAAA,GAKlDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyDhB,EAAAiB,UAAA,iBAAA,GAKvBH,EAAA,CAAtDC,EAAS,CAAEC,SAAS,EAAME,UAAW,iBAAgFlB,EAAAiB,UAAA,kBAAA,GAM1EH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMG,KAAMC,WAA6BpB,EAAAiB,UAAA,kBAAA,GAMlBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMG,KAAMC,WAAuBpB,EAAAiB,UAAA,YAAA,GAKGH,EAAA,CAA1DC,EAAS,CAAEC,SAAS,EAAME,UAAW,qBAOpBlB,EAAAiB,UAAA,sBAAA,GAxCCjB,EAAKc,EAAA,CADzBO,EAAc,eACMrB,SAAAA"}

package/lib/Tab.js

@@ -1,2 +1,2 @@
-import{_ as t,n as e}from"./query-assigned-elements-ef860822.js";import{r as o,$ as a,s as n}from"./lit-element-67e6cd99.js";import{e as r}from"./property-03f59dce.js";import{D as s}from"./DraftComponentMixin-9e4b7b34.js";import{o as i}from"./observe-a9c6dfb6.js";import{S as l}from"./SlotController-ea6eff46.js";import{s as c}from"./Component-5a0a26a0.js";import"./EventController-d99ebeef.js";const d=o`:host{--n-tab-color:var(--n-color-text-weak);--n-tab-border:1px solid transparent;--n-tab-font-weight:var(--n-font-weight);-webkit-user-select:none;user-select:none;cursor:pointer;padding:calc(var(--n-space-l)/ 2) calc(var(--n-space-s)/ 2);border-block-end:var(--n-tab-border);transition:border var(--n-transition-quickly) ease}.n-tab{color:var(--n-tab-color);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--n-font-size-m);font-weight:var(--n-tab-font-weight);line-height:var(--n-line-height-form);border-radius:var(--n-border-radius-sharp);white-space:nowrap}.n-tab,.n-tab[data-text]:not([data-text=""])::before{font-weight:var(--n-tab-font-weight)}.n-tab[data-text=""]{display:flex;gap:var(--n-space-s);align-items:center}.n-tab[data-text]:not([data-text=""]){text-align:center}.n-tab[data-text]:not([data-text=""])::before{content:attr(data-text);display:block;block-size:0;visibility:hidden}:host(:hover){--n-tab-color:var(--n-color-text)}.n-tab[data-text]:not([data-text=""])::before,:host([aria-selected=true]){--n-tab-color:var(--n-color-text-link);--n-tab-border:2px solid var(--n-color-text-link);--n-tab-font-weight:var(--n-font-weight-active)}:host(:active){opacity:.8;transform:translateY(1px)}:host(:focus) .n-tab{box-shadow:0 0 0 2px var(--n-color-background),0 0 0 4px var(--n-color-text-link);outline:0}@supports selector(:focus-visible){:host(:focus) .n-tab{box-shadow:none}:host(:focus-visible) .n-tab{box-shadow:0 0 0 2px var(--n-color-background),0 0 0 4px var(--n-color-text-link)}}`;let b=class extends(s(n)){constructor(){super(...arguments),this.defaultSlot=new l(this),this.selected=!1}render(){return a`<div class="n-tab" data-text="${this.defaultSlot.isEmpty?this.textContent:""}"><slot></slot></div>`}handleSelectionChange(){this.setAttribute("aria-selected",`${this.selected}`),this.setAttribute("tabindex",this.selected?"0":"-1")}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tab")}};b.styles=[c,d],t([r({reflect:!0,type:Boolean})],b.prototype,"selected",void 0),t([i("selected")],b.prototype,"handleSelectionChange",null),b=t([e("nord-tab")],b);var f=b;export{f as default};
+import{_ as t,e}from"./query-assigned-elements-e6cbac30.js";import{i as o,s as a,y as n}from"./lit-element-79bc2e0e.js";import{e as r}from"./property-03f59dce.js";import{o as s}from"./observe-a9c6dfb6.js";import{S as i}from"./SlotController-ea6eff46.js";import{s as l}from"./Component-49a41387.js";import"./EventController-d99ebeef.js";const c=o`:host{--n-tab-color:var(--n-color-text-weak);--n-tab-border:1px solid transparent;--n-tab-font-weight:var(--n-font-weight);-webkit-user-select:none;user-select:none;cursor:pointer;padding:calc(var(--n-space-l)/ 2) calc(var(--n-space-s)/ 2);border-block-end:var(--n-tab-border);transition:border var(--n-transition-quickly) ease}.n-tab{color:var(--n-tab-color);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--n-font-size-m);font-weight:var(--n-tab-font-weight);line-height:var(--n-line-height-form);border-radius:var(--n-border-radius-sharp);white-space:nowrap}.n-tab,.n-tab[data-text]:not([data-text=""])::before{font-weight:var(--n-tab-font-weight)}.n-tab[data-text=""]{display:flex;gap:var(--n-space-s);align-items:center}.n-tab[data-text]:not([data-text=""]){text-align:center}.n-tab[data-text]:not([data-text=""])::before{content:attr(data-text);display:block;block-size:0;visibility:hidden}:host(:hover){--n-tab-color:var(--n-color-text)}.n-tab[data-text]:not([data-text=""])::before,:host([aria-selected=true]){--n-tab-color:var(--n-color-text-link);--n-tab-border:2px solid var(--n-color-text-link);--n-tab-font-weight:var(--n-font-weight-active)}:host(:active){opacity:.8;transform:translateY(1px)}:host(:focus) .n-tab{box-shadow:0 0 0 2px var(--n-color-background),0 0 0 4px var(--n-color-text-link);outline:0}@supports selector(:focus-visible){:host(:focus) .n-tab{box-shadow:none}:host(:focus-visible) .n-tab{box-shadow:0 0 0 2px var(--n-color-background),0 0 0 4px var(--n-color-text-link)}}`;let d=class extends a{constructor(){super(...arguments),this.defaultSlot=new i(this),this.selected=!1}render(){return n`<div class="n-tab" data-text="${this.defaultSlot.isEmpty?this.textContent:""}"><slot></slot></div>`}handleSelectionChange(){this.setAttribute("aria-selected",`${this.selected}`),this.setAttribute("tabindex",this.selected?"0":"-1")}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tab")}};d.styles=[l,c],t([r({reflect:!0,type:Boolean})],d.prototype,"selected",void 0),t([s("selected")],d.prototype,"handleSelectionChange",null),d=t([e("nord-tab")],d);var b=d;export{b 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 { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.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 draft\n * @category navigation\n * @slot - The tab button content.\n */\n@customElement(\"nord-tab\")\nexport default class Tab extends DraftComponentMixin(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","DraftComponentMixin","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":"o6DAiBA,IAAqBA,EAArB,cAAiCC,EAAoBC,IAArDC,kCAGUC,KAAAC,YAAc,IAAIC,EAAeF,MAKGA,KAAQG,UAAY,EAEhEC,SACE,OAAOC,CAAI,iCAAiCL,KAAKC,YAAYK,QAAUN,KAAKO,YAAc,0BAUlFC,wBACRR,KAAKS,aAAa,gBAAiB,GAAGT,KAAKG,YAC3CH,KAAKS,aAAa,WAAYT,KAAKG,SAAW,IAAM,MAGtDO,oBACEC,MAAMD,oBACNV,KAAKS,aAAa,OAAQ,SA3BrBb,EAAAgB,OAAS,CAACC,EAAgBC,GAOWC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAoCvB,EAAAwB,UAAA,gBAAA,GAarEL,EAAA,CADCM,EAAQ,aAIRzB,EAAAwB,UAAA,wBAAA,MAxBkBxB,EAAGmB,EAAA,CADvBO,EAAc,aACM1B,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 new\n * @category navigation\n * @slot - The tab button content.\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":"y2DAgBA,IAAqBA,EAArB,cAAiCC,EAAjCC,kCAGUC,KAAAC,YAAc,IAAIC,EAAeF,MAKGA,KAAQG,UAAY,CAsBjE,CApBCC,SACE,OAAOC,CAAI,iCAAiCL,KAAKC,YAAYK,QAAUN,KAAKO,YAAc,yBAG3F,CAOSC,wBACRR,KAAKS,aAAa,gBAAiB,GAAGT,KAAKG,YAC3CH,KAAKS,aAAa,WAAYT,KAAKG,SAAW,IAAM,KACrD,CAEDO,oBACEC,MAAMD,oBACNV,KAAKS,aAAa,OAAQ,MAC3B,GA5BMZ,EAAAe,OAAS,CAACC,EAAgBC,GAOWC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAoCtB,EAAAuB,UAAA,gBAAA,GAarEL,EAAA,CADCM,EAAQ,aAIRxB,EAAAuB,UAAA,wBAAA,MAxBkBvB,EAAGkB,EAAA,CADvBO,EAAc,aACMzB,SAAAA"}

package/lib/TabGroup.js

@@ -1,2 +1,2 @@
-import{_ as t,n as e}from"./query-assigned-elements-ef860822.js";import{r,$ as a,s}from"./lit-element-67e6cd99.js";import{e as o}from"./property-03f59dce.js";import{t as i}from"./state-70f38ceb.js";import{D as n}from"./DraftComponentMixin-9e4b7b34.js";import{s as l}from"./Component-5a0a26a0.js";import d from"./Tab.js";import{D as b}from"./DirectionController-8b298382.js";import"./observe-a9c6dfb6.js";import"./SlotController-ea6eff46.js";import"./EventController-d99ebeef.js";const c=r`:host{--n-tab-group-padding:0;--n-tab-list-background:var(--n-color-background);--n-tab-list-border:inset 0 -1px 0 0 var(--n-color-border);--n-tab-list-shadow:var(--n-box-shadow-header);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-list-border);border-radius:var(--n-border-radius) var(--n-border-radius) 0 0;gap:var(--n-space-s);background-color:var(--n-tab-list-background);background-image:radial-gradient(ellipse farthest-side at 0 50%,var(--n-color-border-strong) 0,var(--n-tab-list-background)),radial-gradient(ellipse farthest-side at 100% 50%,var(--n-color-border-strong) 0,var(--n-tab-list-background));background-repeat:no-repeat;background-position:0 calc(var(--n-space-s)/ 2),100% calc(var(--n-space-s)/ 2);background-size:var(--n-space-s) var(--n-space-xl),var(--n-space-s) var(--n-space-xl)}.n-tab-group-list::after,.n-tab-group-list::before{content:"";box-sizing:content-box;align-self:stretch;min-inline-size:var(--n-space-l);margin-block-end:1px}.n-tab-group-list::before{margin-inline-end:calc(-1 * (var(--n-space-l) + var(--n-space-s)));padding-inline-start:var(--n-tab-group-padding)}.n-tab-group-list::after{margin-inline-start:calc(-1 * (var(--n-space-l) + var(--n-space-s)));padding-inline-end:var(--n-tab-group-padding);flex:1}.n-tab-group-list::before,.n-tab-group.is-rtl .n-tab-group-list::after{box-shadow:inset var(--n-space-l) 0 var(--n-space-s) calc(-1 * var(--n-space-s)) var(--n-tab-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-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-space-m)}:host([padding="l"]){--n-tab-group-padding:var(--n-space-l)}:host([sticky]) .n-tab-group-list{box-shadow:var(--n-tab-list-border),var(--n-tab-list-shadow);position:sticky;inset:0 0 auto 0;z-index:var(--n-index-sticky);inset-block-start:0}`;var p;let u=1,h=p=class extends(n(s)){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" 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":i(this.direction.isLTR?o:s,t);break;case"ArrowRight":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}`)})))}};h.styles=[l,c],h.observerOptions={attributes:!0,subtree:!0,attributeFilter:["selected"],attributeOldValue:!0},t([o({reflect:!0})],h.prototype,"label",void 0),t([o({reflect:!0})],h.prototype,"padding",void 0),t([o({reflect:!0,type:Boolean})],h.prototype,"sticky",void 0),t([i()],h.prototype,"selectedTab",void 0),h=p=t([e("nord-tab-group")],h);var v=h;export{v as default};
+import{_ as t,e}from"./query-assigned-elements-e6cbac30.js";import{i as r,s as a,y as s}from"./lit-element-79bc2e0e.js";import{e as o}from"./property-03f59dce.js";import{t as i}from"./state-70f38ceb.js";import{s as n}from"./Component-49a41387.js";import l from"./Tab.js";import{D as d}from"./DirectionController-8b298382.js";import"./observe-a9c6dfb6.js";import"./SlotController-ea6eff46.js";import"./EventController-d99ebeef.js";const b=r`:host{--n-tab-group-padding:0;--n-tab-list-background:var(--n-color-background);--n-tab-list-border:inset 0 -1px 0 0 var(--n-color-border);--n-tab-list-shadow:var(--n-box-shadow-header);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-list-border);border-radius:var(--n-border-radius) var(--n-border-radius) 0 0;gap:var(--n-space-s);background-color:var(--n-tab-list-background);background-image:radial-gradient(ellipse farthest-side at 0 50%,var(--n-color-border-strong) 0,var(--n-tab-list-background)),radial-gradient(ellipse farthest-side at 100% 50%,var(--n-color-border-strong) 0,var(--n-tab-list-background));background-repeat:no-repeat;background-position:0 calc(var(--n-space-s)/ 2),100% calc(var(--n-space-s)/ 2);background-size:var(--n-space-s) var(--n-space-xl),var(--n-space-s) var(--n-space-xl)}.n-tab-group-list::after,.n-tab-group-list::before{content:"";box-sizing:content-box;align-self:stretch;min-inline-size:var(--n-space-l);margin-block-end:1px}.n-tab-group-list::before{margin-inline-end:calc(-1 * (var(--n-space-l) + var(--n-space-s)));padding-inline-start:var(--n-tab-group-padding)}.n-tab-group-list::after{margin-inline-start:calc(-1 * (var(--n-space-l) + var(--n-space-s)));padding-inline-end:var(--n-tab-group-padding);flex:1}.n-tab-group-list::before,.n-tab-group.is-rtl .n-tab-group-list::after{box-shadow:inset var(--n-space-l) 0 var(--n-space-s) calc(-1 * var(--n-space-s)) var(--n-tab-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-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-space-m)}:host([padding="l"]){--n-tab-group-padding:var(--n-space-l)}:host([sticky]) .n-tab-group-list{box-shadow:var(--n-tab-list-border),var(--n-tab-list-shadow);position:sticky;inset:0 0 auto 0;z-index:var(--n-index-sticky);inset-block-start:0}`;var c;let p=1,u=c=class extends a{constructor(){super(...arguments),this.direction=new d(this),this.tabGroupId="nord-tab-group-"+p++,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,c.observerOptions)}}))}}render(){return s`<div class="n-tab-group is-${this.direction.dir}"><div class="n-tab-group-list" 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,c.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 l&&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":i(this.direction.isLTR?o:s,t);break;case"ArrowRight":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}`)})))}};u.styles=[n,b],u.observerOptions={attributes:!0,subtree:!0,attributeFilter:["selected"],attributeOldValue:!0},t([o({reflect:!0})],u.prototype,"label",void 0),t([o({reflect:!0})],u.prototype,"padding",void 0),t([o({reflect:!0,type:Boolean})],u.prototype,"sticky",void 0),t([i()],u.prototype,"selectedTab",void 0),u=c=t([e("nord-tab-group")],u);var h=u;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\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.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 draft\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@customElement(\"nord-tab-group\")\nexport default class TabGroup extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, 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          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        updateTab(this.direction.isLTR ? previousTab : nextTab, event)\n        break\n\n      case \"ArrowRight\":\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","DraftComponentMixin","LitElement","constructor","this","direction","DirectionController","tabGroupId","label","padding","sticky","selectedTab","initialSelectedTab","handleMutation","mutations","forEach","mutation","attributeName","oldValue","target","_a","observer","disconnect","updateSelectedTab","_b","observe","TabGroup_1","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","style","attributes","subtree","attributeFilter","attributeOldValue","__decorate","property","reflect","prototype","type","Boolean","state","customElement"],"mappings":"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"}
+{"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 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 new\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@customElement(\"nord-tab-group\")\nexport default class TabGroup extends LitElement {\n  static styles = [componentStyle, 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          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        updateTab(this.direction.isLTR ? previousTab : nextTab, event)\n        break\n\n      case \"ArrowRight\":\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","style","attributes","subtree","attributeFilter","attributeOldValue","__decorate","property","reflect","prototype","type","Boolean","state","customElement"],"mappings":"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"}

package/lib/TabPanel.js

@@ -1,2 +1,2 @@
-import{_ as t,n as e}from"./query-assigned-elements-ef860822.js";import{r as s,$ as a,s as n}from"./lit-element-67e6cd99.js";import{D as o}from"./DraftComponentMixin-9e4b7b34.js";import{s as r}from"./Component-5a0a26a0.js";const l=s`.n-tab-panel{font-size:var(--n-font-size-m);color:var(--n-color-text)}::slotted(*){margin:0}`;let i=class extends(o(n)){render(){return a`<div class="n-tab-panel"><slot></slot></div>`}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tabpanel"),this.setAttribute("tabindex","0")}};i.styles=[r,l],i=t([e("nord-tab-panel")],i);var m=i;export{m as default};
+import{_ as e,e as t}from"./query-assigned-elements-e6cbac30.js";import{i as s,s as a,y as n}from"./lit-element-79bc2e0e.js";import{s as o}from"./Component-49a41387.js";const r=s`.n-tab-panel{font-size:var(--n-font-size-m);color:var(--n-color-text)}::slotted(*){margin:0}`;let l=class extends a{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([t("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\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.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 draft\n * @category navigation\n * @slot - The tab panel content.\n */\n@customElement(\"nord-tab-panel\")\nexport default class TabPanel extends DraftComponentMixin(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","DraftComponentMixin","LitElement","render","html","connectedCallback","super","this","setAttribute","styles","componentStyle","style","__decorate","customElement"],"mappings":"uUAgBA,IAAqBA,EAArB,cAAsCC,EAAoBC,IAGxDC,SACE,OAAOC,CAAI,+CAGbC,oBACEC,MAAMD,oBAKNE,KAAKC,aAAa,OAAQ,YAC1BD,KAAKC,aAAa,WAAY,OAbzBR,EAAAS,OAAS,CAACC,EAAgBC,GADdX,EAAQY,EAAA,CAD5BC,EAAc,mBACMb,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 new\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":"iRAeA,IAAqBA,EAArB,cAAsCC,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"}

package/lib/Table.js

@@ -1,2 +1,2 @@
-import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{r,s as o,x as n,$ as a}from"./lit-element-67e6cd99.js";import{e as l}from"./property-03f59dce.js";const d=r`nord-table{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);position:-webkit-sticky;position:sticky;inset-block-start:0;z-index:calc(var(--n-index-sticky) - 1)}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 tbody :is(tr:hover,.n-row-selected) nord-badge{--n-badge-color:var(--n-color-text)}nord-table[density=condensed]{--n-table-td-padding:calc(var(--n-space-m) * 0.5)}nord-table[density=default]{--n-table-td-padding:calc(var(--n-space-m) * 0.95)}nord-table[density=relaxed]{--n-table-td-padding:calc(var(--n-space-m) * 1.2);--n-table-th-padding:var(--n-space-m)}nord-card nord-table tbody tr:last-child td{border-block-end-color:transparent}nord-card nord-table tbody tr:last-child td:is(:first-child, :last-child){border-end-start-radius:var(--n-border-radius);border-end-end-radius:var(--n-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 o{constructor(){super(...arguments),this.density="default",this.scrollSnap=!1,this.striped=!1}connectedCallback(){super.connectedCallback(),this.renderStyles()}renderStyles(){const e=this.getRootNode(),t=e.nodeType===Node.DOCUMENT_NODE?e.head:e;const r=this.localName;e.querySelector(`style[data-component=${r}]`)||n(a`<style data-component="${r}">${d}</style>`,t)}createRenderRoot(){return this}};e([l({reflect:!0})],s.prototype,"density",void 0),e([l({reflect:!0,type:Boolean,attribute:"scroll-snap"})],s.prototype,"scrollSnap",void 0),e([l({type:Boolean,reflect:!0})],s.prototype,"striped",void 0),s=e([t("nord-table")],s);var i=s;export{i as default};
+import{_ as e,e as t}from"./query-assigned-elements-e6cbac30.js";import{i as r,s as o,A as n,y as a}from"./lit-element-79bc2e0e.js";import{e as l}from"./property-03f59dce.js";const d=r`nord-table{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);position:-webkit-sticky;position:sticky;inset-block-start:0;z-index:calc(var(--n-index-sticky) - 1)}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 tbody :is(tr:hover,.n-row-selected) nord-badge{--n-badge-color:var(--n-color-text)}nord-table[density=condensed]{--n-table-td-padding:calc(var(--n-space-m) * 0.5)}nord-table[density=default]{--n-table-td-padding:calc(var(--n-space-m) * 0.95)}nord-table[density=relaxed]{--n-table-td-padding:calc(var(--n-space-m) * 1.2);--n-table-th-padding:var(--n-space-m)}nord-card nord-table tbody tr:last-child td{border-block-end-color:transparent}nord-card nord-table tbody tr:last-child td:is(:first-child, :last-child){border-end-start-radius:var(--n-border-radius);border-end-end-radius:var(--n-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 o{constructor(){super(...arguments),this.density="default",this.scrollSnap=!1,this.striped=!1}connectedCallback(){super.connectedCallback(),this.renderStyles()}renderStyles(){const e=this.getRootNode(),t=e.nodeType===Node.DOCUMENT_NODE?e.head:e;const r=this.localName;e.querySelector(`style[data-component=${r}]`)||n(a`<style data-component="${r}">${d}</style>`,t)}createRenderRoot(){return this}};e([l({reflect:!0})],s.prototype,"density",void 0),e([l({reflect:!0,type:Boolean,attribute:"scroll-snap"})],s.prototype,"scrollSnap",void 0),e([l({type:Boolean,reflect:!0})],s.prototype,"striped",void 0),s=e([t("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@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    render(\n      html`\n        <style data-component=${tagName}>\n          ${style}\n        </style>\n      `,\n      renderTarget\n    )\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","render","html","style","createRenderRoot","__decorate","property","reflect","prototype","type","Boolean","attribute","customElement"],"mappings":"unFAkBA,IAAqBA,EAArB,cAAmCC,EAAnCC,kCAK+BC,KAAOC,QAAwC,UAKND,KAAUE,YAAG,EAKvCF,KAAOG,SAAG,EAEtDC,oBACEC,MAAMD,oBACNJ,KAAKM,eAOCA,eACN,MAAMC,EAAWP,KAAKQ,cAChBC,EAA0BF,EAzCtBG,WAAaC,KAAKC,cAyCgBL,EAASM,KAAON,EAC5D,MAAMO,EAAUd,KAAKe,UAEGR,EAASS,cAAc,wBAAwBF,OAKvEG,EACEC,CAAI,0BACsBJ,MACpBK,YAGNV,GAOMW,mBACR,OAAOpB,OA7CoBqB,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAgE1B,EAAA2B,UAAA,eAAA,GAKfH,EAAA,CAArEC,EAAS,CAAEC,SAAS,EAAME,KAAMC,QAASC,UAAW,iBAAmC9B,EAAA2B,UAAA,kBAAA,GAK5CH,EAAA,CAA3CC,EAAS,CAAEG,KAAMC,QAASH,SAAS,KAAuB1B,EAAA2B,UAAA,eAAA,GAfxC3B,EAAKwB,EAAA,CADzBO,EAAc,eACM/B,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@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    render(\n      html`\n        <style data-component=${tagName}>\n          ${style}\n        </style>\n      `,\n      renderTarget\n    )\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","render","html","style","createRenderRoot","__decorate","property","reflect","prototype","type","Boolean","attribute","customElement"],"mappings":"4nFAkBA,IAAqBA,EAArB,cAAmCC,EAAnCC,kCAK+BC,KAAOC,QAAwC,UAKND,KAAUE,YAAG,EAKvCF,KAAOG,SAAG,CAqCvD,CAnCCC,oBACEC,MAAMD,oBACNJ,KAAKM,cACN,CAMOA,eACN,MAAMC,EAAWP,KAAKQ,cAChBC,EAA0BF,EAzCtBG,WAAaC,KAAKC,cAyCgBL,EAASM,KAAON,EAC5D,MAAMO,EAAUd,KAAKe,UAEGR,EAASS,cAAc,wBAAwBF,OAKvEG,EACEC,CAAI,0BACsBJ,MACpBK,YAGNV,EAEH,CAKSW,mBACR,OAAOpB,IACR,GA9C4BqB,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAgE1B,EAAA2B,UAAA,eAAA,GAKfH,EAAA,CAArEC,EAAS,CAAEC,SAAS,EAAME,KAAMC,QAASC,UAAW,iBAAmC9B,EAAA2B,UAAA,kBAAA,GAK5CH,EAAA,CAA3CC,EAAS,CAAEG,KAAMC,QAASH,SAAS,KAAuB1B,EAAA2B,UAAA,eAAA,GAfxC3B,EAAKwB,EAAA,CADzBO,EAAc,eACM/B,SAAAA"}

package/lib/{TextField-f48e2e5c.js → TextField-c34519d4.js}

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

package/lib/{TextField-f48e2e5c.js.map → TextField-c34519d4.js.map}

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

package/lib/Textarea.js

@@ -1,2 +1,2 @@
-import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{r as i,$ as r,s}from"./lit-element-67e6cd99.js";import{e as o}from"./property-03f59dce.js";import{l as a}from"./if-defined-fe1a64e3.js";import{n}from"./ref-57ff8ffc.js";import{o as l}from"./observe-a9c6dfb6.js";import{F as d}from"./FocusableMixin-175ea4d7.js";import{F as p}from"./FormAssociatedMixin-d0d98a92.js";import{I as m}from"./InputMixin-9334d385.js";import{R as h,s as c}from"./TextField-f48e2e5c.js";import{A as f}from"./AutocompleteMixin-ca948bdb.js";import{s as u}from"./Component-5a0a26a0.js";import{s as v}from"./FormField-d3767c2e.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const b=i`.n-input{min-block-size:var(--n-textarea-height,76px);transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly);display:block;resize:vertical}:host([resize=auto]) .n-input{resize:none;overflow:hidden}`;let y=class extends(p(f(h(m(d(s)))))){constructor(){super(...arguments),this.inputId="textarea",this.resize="vertical",this.expand=!1}render(){var e;return r`${this.renderLabel()}<div class="n-input-container"><textarea ${n(this.focusableRef)} id="${this.inputId}" class="n-input" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" name="${a(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${a(this.placeholder)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" autocomplete="${this.autocomplete}"></textarea></div>${this.renderError()}`}resizeToFitContent(){const e=this.focusableRef.value;e&&("auto"===this.resize?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height=null)}};y.styles=[u,v,c,b],e([o({reflect:!0})],y.prototype,"resize",void 0),e([o({reflect:!0,type:Boolean})],y.prototype,"expand",void 0),e([l("resize","updated"),l("value","updated")],y.prototype,"resizeToFitContent",null),y=e([t("nord-textarea")],y);var j=y;export{j as default};
+import{_ as e,e as t}from"./query-assigned-elements-e6cbac30.js";import{i,y as r,s}from"./lit-element-79bc2e0e.js";import{e as o}from"./property-03f59dce.js";import{l as a}from"./if-defined-f43b1487.js";import{n}from"./ref-697b28b5.js";import{o as l}from"./observe-a9c6dfb6.js";import{F as d}from"./FocusableMixin-99db12c1.js";import{F as p}from"./FormAssociatedMixin-f6e5b3cd.js";import{I as m}from"./InputMixin-158f63fb.js";import{R as h,s as c}from"./TextField-c34519d4.js";import{A as u}from"./AutocompleteMixin-370de2be.js";import{s as f}from"./Component-49a41387.js";import{s as b}from"./FormField-72062bf1.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const v=i`.n-input{min-block-size:var(--n-textarea-height,76px);transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly);display:block;resize:vertical}:host([resize=auto]) .n-input{resize:none;overflow:hidden}`;let y=class extends(p(u(h(m(d(s)))))){constructor(){super(...arguments),this.inputId="textarea",this.resize="vertical",this.expand=!1}render(){var e;return r`${this.renderLabel()}<div class="n-input-container"><textarea ${n(this.focusableRef)} id="${this.inputId}" class="n-input" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" name="${a(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${a(this.placeholder)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" autocomplete="${this.autocomplete}"></textarea></div>${this.renderError()}`}resizeToFitContent(){const e=this.focusableRef.value;e&&("auto"===this.resize?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height=null)}};y.styles=[f,b,c,v],e([o({reflect:!0})],y.prototype,"resize",void 0),e([o({reflect:!0,type:Boolean})],y.prototype,"expand",void 0),e([l("resize","updated"),l("value","updated")],y.prototype,"resizeToFitContent",null),y=e([t("nord-textarea")],y);var j=y;export{j as default};
 //# sourceMappingURL=Textarea.js.map

package/lib/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../src/textarea/Textarea.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { ReadonlyMixin } from \"../common/mixins/ReadonlyMixin.js\"\nimport { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Textarea.css\"\n\n/**\n * Textarea is a component that allows user to write text over\n * multiple rows. Used when the expected user input is long.\n * For shorter input, use the Input component.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the textarea.\n * @slot error - Optional slot that holds error text for the textarea.\n */\n@customElement(\"nord-textarea\")\nexport default class Textarea extends FormAssociatedMixin(\n  AutocompleteMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement))))\n) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  protected inputId = \"textarea\"\n\n  /**\n   * Controls whether the textarea is resizable.\n   * By default is manually resizable vertically.\n   * Set to \"auto\" to enable auto-resizing as content grows.\n   */\n  @property({ reflect: true }) resize: \"vertical\" | \"auto\" = \"vertical\"\n\n  /**\n   * Controls whether the textarea expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  render() {\n    return html`\n      ${this.renderLabel()}\n\n      <div class=\"n-input-container\">\n        <textarea\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          class=\"n-input\"\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\n          .value=${this.value ?? \"\"}\n          placeholder=${ifDefined(this.placeholder)}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n          autocomplete=${this.autocomplete as any}\n        ></textarea>\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  @observe(\"resize\", \"updated\")\n  @observe(\"value\", \"updated\")\n  protected resizeToFitContent() {\n    const textarea = this.focusableRef.value\n\n    if (!textarea) {\n      return\n    }\n\n    if (this.resize === \"auto\") {\n      textarea.style.height = \"auto\"\n      textarea.style.height = `${textarea.scrollHeight}px`\n    } else {\n      // @ts-expect-error this is actually fine, and removes the style value\n      textarea.style.height = null\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-textarea\": Textarea\n  }\n}\n"],"names":["Textarea","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","inputId","resize","expand","render","html","renderLabel","ref","focusableRef","disabled","readonly","required","ifDefined","name","_a","value","placeholder","handleChange","handleInput","getDescribedBy","getInvalid","autocomplete","renderError","resizeToFitContent","textarea","style","height","scrollHeight","styles","componentStyle","formFieldStyle","textFieldStyle","__decorate","property","reflect","prototype","type","Boolean","observe","customElement"],"mappings":"qiCA6BA,IAAqBA,EAArB,cAAsCC,EACpCC,EAAkBC,EAAcC,EAAWC,EAAeC,QAD5DC,kCAKYC,KAAOC,QAAG,WAOSD,KAAME,OAAwB,WAKfF,KAAMG,QAAG,EAErDC,eACE,OAAOC,CAAI,GACPL,KAAKM,yDAIDC,EAAIP,KAAKQ,qBACNR,KAAKC,uCAEED,KAAKS,wBACLT,KAAKU,wBACLV,KAAKW,mBACVC,EAAUZ,KAAKa,kBACH,QAAVC,EAAAd,KAAKe,aAAK,IAAAD,EAAAA,EAAI,oBACTF,EAAUZ,KAAKgB,0BACnBhB,KAAKiB,yBACNjB,KAAKkB,kCACKN,EAAUZ,KAAKmB,oCACnBP,EAAUZ,KAAKoB,gCACfpB,KAAKqB,kCAItBrB,KAAKsB,gBAMDC,qBACR,MAAMC,EAAWxB,KAAKQ,aAAaO,MAE9BS,IAIe,SAAhBxB,KAAKE,QACPsB,EAASC,MAAMC,OAAS,OACxBF,EAASC,MAAMC,OAAS,GAAGF,EAASG,kBAGpCH,EAASC,MAAMC,OAAS,QAzDrBlC,EAAMoC,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBN,GASpCO,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAgD1C,EAAA2C,UAAA,cAAA,GAKzBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAyB7C,EAAA2C,UAAA,cAAA,GA+B1DH,EAAA,CAFCM,EAAQ,SAAU,WAClBA,EAAQ,QAAS,YAejB9C,EAAA2C,UAAA,qBAAA,MA9DkB3C,EAAQwC,EAAA,CAD5BO,EAAc,kBACM/C,SAAAA"}
+{"version":3,"file":"Textarea.js","sources":["../src/textarea/Textarea.ts"],"sourcesContent":["import { 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 { observe } from \"../common/decorators/observe.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { ReadonlyMixin } from \"../common/mixins/ReadonlyMixin.js\"\nimport { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Textarea.css\"\n\n/**\n * Textarea is a component that allows user to write text over\n * multiple rows. Used when the expected user input is long.\n * For shorter input, use the Input component.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the textarea.\n * @slot error - Optional slot that holds error text for the textarea.\n */\n@customElement(\"nord-textarea\")\nexport default class Textarea extends FormAssociatedMixin(\n  AutocompleteMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement))))\n) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  protected inputId = \"textarea\"\n\n  /**\n   * Controls whether the textarea is resizable.\n   * By default is manually resizable vertically.\n   * Set to \"auto\" to enable auto-resizing as content grows.\n   */\n  @property({ reflect: true }) resize: \"vertical\" | \"auto\" = \"vertical\"\n\n  /**\n   * Controls whether the textarea expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  render() {\n    return html`\n      ${this.renderLabel()}\n\n      <div class=\"n-input-container\">\n        <textarea\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          class=\"n-input\"\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\n          .value=${this.value ?? \"\"}\n          placeholder=${ifDefined(this.placeholder)}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n          autocomplete=${this.autocomplete as any}\n        ></textarea>\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  @observe(\"resize\", \"updated\")\n  @observe(\"value\", \"updated\")\n  protected resizeToFitContent() {\n    const textarea = this.focusableRef.value\n\n    if (!textarea) {\n      return\n    }\n\n    if (this.resize === \"auto\") {\n      textarea.style.height = \"auto\"\n      textarea.style.height = `${textarea.scrollHeight}px`\n    } else {\n      // @ts-expect-error this is actually fine, and removes the style value\n      textarea.style.height = null\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-textarea\": Textarea\n  }\n}\n"],"names":["Textarea","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","inputId","resize","expand","render","html","renderLabel","ref","focusableRef","disabled","readonly","required","ifDefined","name","_a","value","placeholder","handleChange","handleInput","getDescribedBy","getInvalid","autocomplete","renderError","resizeToFitContent","textarea","style","height","scrollHeight","styles","componentStyle","formFieldStyle","textFieldStyle","__decorate","property","reflect","prototype","type","Boolean","observe","customElement"],"mappings":"giCA6BA,IAAqBA,EAArB,cAAsCC,EACpCC,EAAkBC,EAAcC,EAAWC,EAAeC,QAD5DC,kCAKYC,KAAOC,QAAG,WAOSD,KAAME,OAAwB,WAKfF,KAAMG,QAAG,CA8CtD,CA5CCC,eACE,OAAOC,CAAI,GACPL,KAAKM,yDAIDC,EAAIP,KAAKQ,qBACNR,KAAKC,uCAEED,KAAKS,wBACLT,KAAKU,wBACLV,KAAKW,mBACVC,EAAUZ,KAAKa,kBACH,QAAVC,EAAAd,KAAKe,aAAK,IAAAD,EAAAA,EAAI,oBACTF,EAAUZ,KAAKgB,0BACnBhB,KAAKiB,yBACNjB,KAAKkB,kCACKN,EAAUZ,KAAKmB,oCACnBP,EAAUZ,KAAKoB,gCACfpB,KAAKqB,kCAItBrB,KAAKsB,eAEV,CAISC,qBACR,MAAMC,EAAWxB,KAAKQ,aAAaO,MAE9BS,IAIe,SAAhBxB,KAAKE,QACPsB,EAASC,MAAMC,OAAS,OACxBF,EAASC,MAAMC,OAAS,GAAGF,EAASG,kBAGpCH,EAASC,MAAMC,OAAS,KAE3B,GA3DMlC,EAAMoC,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBN,GASpCO,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAgD1C,EAAA2C,UAAA,cAAA,GAKzBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAyB7C,EAAA2C,UAAA,cAAA,GA+B1DH,EAAA,CAFCM,EAAQ,SAAU,WAClBA,EAAQ,QAAS,YAejB9C,EAAA2C,UAAA,qBAAA,MA9DkB3C,EAAQwC,EAAA,CAD5BO,EAAc,kBACM/C,SAAAA"}

package/lib/Toast.js

@@ -1,2 +1,2 @@
-import{_ as s,n as o}from"./query-assigned-elements-ef860822.js";import{r as t,$ as i,s as e}from"./lit-element-67e6cd99.js";import{o as r}from"./class-map-f1b6f1fa.js";import{e as n}from"./property-03f59dce.js";import{t as a}from"./state-70f38ceb.js";import{i as d}from"./query-2d22378e.js";import{D as c}from"./DraftComponentMixin-9e4b7b34.js";import l from"./Icon.js";import{s as m}from"./Component-5a0a26a0.js";import{N as p}from"./events-731d0007.js";import{E as u}from"./EventController-d99ebeef.js";import{o as f}from"./observe-a9c6dfb6.js";import"./directive-de55b00a.js";import"./if-defined-fe1a64e3.js";import"./unsafe-html-61a04601.js";import"./cond-97c45476.js";var v=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M133 7 7 133M7 7l126 126" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',title:"interface-close",tags:"nordicon interface close cross remove delete erase symbol"});const b=t`:host{--n-toast-color:var(--n-color-surface);--n-toast-background-color:var(--n-color-text)}.n-toast{display:flex;gap:var(--n-space-l);align-items:flex-start;background-color:var(--n-toast-background-color);color:var(--n-toast-color);border-radius:var(--n-border-radius);animation:n-enter var(--n-transition-slowly) forwards 1;z-index:var(--n-index-toast);box-shadow:var(--n-box-shadow-popout)}.n-dismissed{animation-name:n-exit}@keyframes n-enter{from{transform:translateY(50%);opacity:0}}@keyframes n-exit{to{transform:scale(.97);opacity:0}}.n-toast-inner{padding:var(--n-space-m);flex:1}.n-dismiss{--n-toast-focus-ring:0 0 0 2px var(--n-color-accent);border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);position:relative;inset-inline-end:var(--n-space-s);inset-block-start:var(--n-space-s);background-color:transparent;border-radius:var(--n-border-radius);cursor:pointer}.n-dismiss::after,.n-dismiss::before{content:"";position:absolute;display:block;border-radius:var(--n-border-radius)}.n-dismiss::before{inset:0;background:var(--n-toast-color);transition:opacity var(--n-transition-quickly);opacity:0}.n-dismiss:is(:hover,:focus)::before{opacity:.06}.n-dismiss::after{inset:calc(var(--n-space-s) * -1)}.n-dismiss:active{transform:translateY(1px)}.n-dismiss:focus{outline:0;box-shadow:var(--n-toast-focus-ring)}@supports selector(:focus-visible){.n-dismiss:focus{box-shadow:none}.n-dismiss:focus-visible{box-shadow:var(--n-toast-focus-ring)}}.n-dismiss nord-icon{opacity:.53;transition:opacity var(--n-transition-quickly);color:var(--n-toast-color)}.n-dismiss:is(:hover,:focus) nord-icon{opacity:1}:host([variant=danger]){--n-toast-background-color:var(--n-color-status-danger);--n-toast-color:var(--n-color-text-on-accent)}`;l.registerIcon(v);let h=class extends(c(e)){constructor(){super(...arguments),this.events=new u(this),this.dismissed=!1,this.variant="default",this.autoDismiss=1e4}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.timeoutId)}dismiss(){return this.dismissed=!0,clearTimeout(this.timeoutId),new Promise((s=>{this.events.listen(this.toast,"animationend",(()=>{this.dispatchEvent(new p("dismiss")),s()}),{once:!0})}))}render(){return i`<div class="${r({"n-toast":!0,"n-dismissed":this.dismissed})}"><div class="n-toast-inner"><slot></slot></div><button class="n-dismiss" @click="${this.dismiss}" aria-hidden="true"><nord-icon name="interface-close" size="s"></nord-icon></button></div>`}handleAutoDismissChange(){clearTimeout(this.timeoutId),null!=this.autoDismiss&&this.autoDismiss>=0&&setTimeout((()=>this.dismiss()),this.autoDismiss)}};h.styles=[m,b],s([d(".n-toast",!0)],h.prototype,"toast",void 0),s([a()],h.prototype,"dismissed",void 0),s([n({reflect:!0})],h.prototype,"variant",void 0),s([n({type:Number,attribute:"auto-dismiss"})],h.prototype,"autoDismiss",void 0),s([f("autoDismiss")],h.prototype,"handleAutoDismissChange",null),h=s([o("nord-toast")],h);var y=h;export{y as default};
+import{_ as s,e as o}from"./query-assigned-elements-e6cbac30.js";import{i as t,y as i,s as e}from"./lit-element-79bc2e0e.js";import{o as r}from"./class-map-cd6c8cbd.js";import{e as n}from"./property-03f59dce.js";import{t as a}from"./state-70f38ceb.js";import{i as c}from"./query-2d22378e.js";import{D as d}from"./DraftComponentMixin-9e4b7b34.js";import l from"./Icon.js";import{s as m}from"./Component-49a41387.js";import{N as p}from"./events-731d0007.js";import{E as u}from"./EventController-d99ebeef.js";import{o as f}from"./observe-a9c6dfb6.js";import"./directive-de55b00a.js";import"./if-defined-f43b1487.js";import"./unsafe-html-be8023cd.js";import"./cond-0a8d4554.js";var v=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M133 7 7 133M7 7l126 126" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',title:"interface-close",tags:"nordicon interface close cross remove delete erase symbol"});const b=t`:host{--n-toast-color:var(--n-color-surface);--n-toast-background-color:var(--n-color-text)}.n-toast{display:flex;gap:var(--n-space-l);align-items:flex-start;background-color:var(--n-toast-background-color);color:var(--n-toast-color);border-radius:var(--n-border-radius);animation:n-enter var(--n-transition-slowly) forwards 1;z-index:var(--n-index-toast);box-shadow:var(--n-box-shadow-popout)}.n-dismissed{animation-name:n-exit}@keyframes n-enter{from{transform:translateY(50%);opacity:0}}@keyframes n-exit{to{transform:scale(.97);opacity:0}}.n-toast-inner{padding:var(--n-space-m);flex:1}.n-dismiss{--n-toast-focus-ring:0 0 0 2px var(--n-color-accent);border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);position:relative;inset-inline-end:var(--n-space-s);inset-block-start:var(--n-space-s);background-color:transparent;border-radius:var(--n-border-radius);cursor:pointer}.n-dismiss::after,.n-dismiss::before{content:"";position:absolute;display:block;border-radius:var(--n-border-radius)}.n-dismiss::before{inset:0;background:var(--n-toast-color);transition:opacity var(--n-transition-quickly);opacity:0}.n-dismiss:is(:hover,:focus)::before{opacity:.06}.n-dismiss::after{inset:calc(var(--n-space-s) * -1)}.n-dismiss:active{transform:translateY(1px)}.n-dismiss:focus{outline:0;box-shadow:var(--n-toast-focus-ring)}@supports selector(:focus-visible){.n-dismiss:focus{box-shadow:none}.n-dismiss:focus-visible{box-shadow:var(--n-toast-focus-ring)}}.n-dismiss nord-icon{opacity:.53;transition:opacity var(--n-transition-quickly);color:var(--n-toast-color)}.n-dismiss:is(:hover,:focus) nord-icon{opacity:1}:host([variant=danger]){--n-toast-background-color:var(--n-color-status-danger);--n-toast-color:var(--n-color-text-on-accent)}`;l.registerIcon(v);let h=class extends(d(e)){constructor(){super(...arguments),this.events=new u(this),this.dismissed=!1,this.variant="default",this.autoDismiss=1e4}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.timeoutId)}dismiss(){return this.dismissed=!0,clearTimeout(this.timeoutId),new Promise((s=>{this.events.listen(this.toast,"animationend",(()=>{this.dispatchEvent(new p("dismiss")),s()}),{once:!0})}))}render(){return i`<div class="${r({"n-toast":!0,"n-dismissed":this.dismissed})}"><div class="n-toast-inner"><slot></slot></div><button class="n-dismiss" @click="${this.dismiss}" aria-hidden="true"><nord-icon name="interface-close" size="s"></nord-icon></button></div>`}handleAutoDismissChange(){clearTimeout(this.timeoutId),null!=this.autoDismiss&&this.autoDismiss>=0&&setTimeout((()=>this.dismiss()),this.autoDismiss)}};h.styles=[m,b],s([c(".n-toast",!0)],h.prototype,"toast",void 0),s([a()],h.prototype,"dismissed",void 0),s([n({reflect:!0})],h.prototype,"variant",void 0),s([n({type:Number,attribute:"auto-dismiss"})],h.prototype,"autoDismiss",void 0),s([f("autoDismiss")],h.prototype,"handleAutoDismissChange",null),h=s([o("nord-toast")],h);var y=h;export{y as default};
 //# sourceMappingURL=Toast.js.map

package/lib/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../icons/lib/assets/interface-close.js","../src/toast/Toast.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M133 7 7 133M7 7l126 126\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"interface-close\"\nexport const tags = \"nordicon interface close cross remove delete erase symbol\"\n","import { LitElement, html } from \"lit\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close.js\"\n\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport Icon from \"../icon/Icon.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Toast.css\"\nimport { NordEvent } from \"../common/events.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\nIcon.registerIcon(closeIcon)\n\n/**\n * Toasts are non-disruptive messages that appear in the interface\n * to provide quick, at-a-glance feedback on the outcome of an action.\n *\n * @status draft\n * @category feedback\n * @slot - Default slot used for the toast text/message.\n * @fires dismiss - Fired when the toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.\n */\n@customElement(\"nord-toast\")\nexport default class Toast extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private timeoutId?: ReturnType<typeof setTimeout>\n  private events = new EventController(this)\n\n  @query(\".n-toast\", true) private toast!: HTMLElement\n  @state() private dismissed = false\n\n  /**\n   * The style variant of the toast.\n   */\n  @property({ reflect: true }) variant: \"default\" | \"danger\" = \"default\"\n\n  /**\n   * Timeout in milliseconds before the toast is automatically dismissed.\n   */\n  @property({ type: Number, attribute: \"auto-dismiss\" }) autoDismiss? = 10000\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    clearTimeout(this.timeoutId)\n  }\n\n  /**\n   * Programmatically dismiss the toast.\n   * The returned promise resolves when toast's exit animation is complete.\n   */\n  dismiss() {\n    this.dismissed = true\n    clearTimeout(this.timeoutId)\n\n    return new Promise<void>(resolve => {\n      this.events.listen(\n        this.toast,\n        \"animationend\",\n        () => {\n          this.dispatchEvent(new NordEvent(\"dismiss\"))\n          resolve()\n        },\n        { once: true }\n      )\n    })\n  }\n\n  render() {\n    return html`\n      <div class=${classMap({ \"n-toast\": true, \"n-dismissed\": this.dismissed })}>\n        <div class=\"n-toast-inner\">\n          <slot></slot>\n        </div>\n\n        <button class=\"n-dismiss\" @click=${this.dismiss} aria-hidden=\"true\">\n          <nord-icon name=\"interface-close\" size=\"s\"></nord-icon>\n        </button>\n      </div>\n    `\n  }\n\n  @observe(\"autoDismiss\")\n  protected handleAutoDismissChange() {\n    clearTimeout(this.timeoutId)\n\n    if (this.autoDismiss != null && this.autoDismiss >= 0) {\n      setTimeout(() => this.dismiss(), this.autoDismiss)\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-toast\": Toast\n  }\n}\n"],"names":["Icon","registerIcon","closeIcon","Toast","DraftComponentMixin","LitElement","constructor","this","events","EventController","dismissed","variant","autoDismiss","disconnectedCallback","super","clearTimeout","timeoutId","dismiss","Promise","resolve","listen","toast","dispatchEvent","NordEvent","once","render","html","classMap","handleAutoDismissChange","setTimeout","styles","componentStyle","style","__decorate","query","prototype","state","property","reflect","type","Number","attribute","observe","customElement"],"mappings":"8sBAAe,oNACM,uBACD,q1DCWpBA,EAAKC,aAAaC,GAYlB,IAAqBC,EAArB,cAAmCC,EAAoBC,IAAvDC,kCAIUC,KAAAC,OAAS,IAAIC,EAAgBF,MAGpBA,KAASG,WAAG,EAKAH,KAAOI,QAAyB,UAKNJ,KAAWK,YAAI,IAEtEC,uBACEC,MAAMD,uBACNE,aAAaR,KAAKS,WAOpBC,UAIE,OAHAV,KAAKG,WAAY,EACjBK,aAAaR,KAAKS,WAEX,IAAIE,SAAcC,IACvBZ,KAAKC,OAAOY,OACVb,KAAKc,MACL,gBACA,KACEd,KAAKe,cAAc,IAAIC,EAAU,YACjCJ,MAEF,CAAEK,MAAM,OAKdC,SACE,OAAOC,CAAI,eACIC,EAAS,CAAE,WAAW,EAAM,cAAepB,KAAKG,gGAKxBH,KAAKU,qGAQpCW,0BACRb,aAAaR,KAAKS,WAEM,MAApBT,KAAKK,aAAuBL,KAAKK,aAAe,GAClDiB,YAAW,IAAMtB,KAAKU,WAAWV,KAAKK,eA/DnCT,EAAA2B,OAAS,CAACC,EAAgBC,GAKRC,EAAA,CAAxBC,EAAM,YAAY,IAAiC/B,EAAAgC,UAAA,aAAA,GAC3CF,EAAA,CAARG,KAAiCjC,EAAAgC,UAAA,iBAAA,GAKLF,EAAA,CAA5BI,EAAS,CAAEC,SAAS,KAAiDnC,EAAAgC,UAAA,eAAA,GAKfF,EAAA,CAAtDI,EAAS,CAAEE,KAAMC,OAAQC,UAAW,kBAAsCtC,EAAAgC,UAAA,mBAAA,GA2C3EF,EAAA,CADCS,EAAQ,gBAORvC,EAAAgC,UAAA,0BAAA,MAlEkBhC,EAAK8B,EAAA,CADzBU,EAAc,eACMxC,SAAAA"}
+{"version":3,"file":"Toast.js","sources":["../../icons/lib/assets/interface-close.js","../src/toast/Toast.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M133 7 7 133M7 7l126 126\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"interface-close\"\nexport const tags = \"nordicon interface close cross remove delete erase symbol\"\n","import { LitElement, html } from \"lit\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close.js\"\n\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport Icon from \"../icon/Icon.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Toast.css\"\nimport { NordEvent } from \"../common/events.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\nIcon.registerIcon(closeIcon)\n\n/**\n * Toasts are non-disruptive messages that appear in the interface\n * to provide quick, at-a-glance feedback on the outcome of an action.\n *\n * @status draft\n * @category feedback\n * @slot - Default slot used for the toast text/message.\n * @fires dismiss - Fired when the toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.\n */\n@customElement(\"nord-toast\")\nexport default class Toast extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private timeoutId?: ReturnType<typeof setTimeout>\n  private events = new EventController(this)\n\n  @query(\".n-toast\", true) private toast!: HTMLElement\n  @state() private dismissed = false\n\n  /**\n   * The style variant of the toast.\n   */\n  @property({ reflect: true }) variant: \"default\" | \"danger\" = \"default\"\n\n  /**\n   * Timeout in milliseconds before the toast is automatically dismissed.\n   */\n  @property({ type: Number, attribute: \"auto-dismiss\" }) autoDismiss? = 10000\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    clearTimeout(this.timeoutId)\n  }\n\n  /**\n   * Programmatically dismiss the toast.\n   * The returned promise resolves when toast's exit animation is complete.\n   */\n  dismiss() {\n    this.dismissed = true\n    clearTimeout(this.timeoutId)\n\n    return new Promise<void>(resolve => {\n      this.events.listen(\n        this.toast,\n        \"animationend\",\n        () => {\n          this.dispatchEvent(new NordEvent(\"dismiss\"))\n          resolve()\n        },\n        { once: true }\n      )\n    })\n  }\n\n  render() {\n    return html`\n      <div class=${classMap({ \"n-toast\": true, \"n-dismissed\": this.dismissed })}>\n        <div class=\"n-toast-inner\">\n          <slot></slot>\n        </div>\n\n        <button class=\"n-dismiss\" @click=${this.dismiss} aria-hidden=\"true\">\n          <nord-icon name=\"interface-close\" size=\"s\"></nord-icon>\n        </button>\n      </div>\n    `\n  }\n\n  @observe(\"autoDismiss\")\n  protected handleAutoDismissChange() {\n    clearTimeout(this.timeoutId)\n\n    if (this.autoDismiss != null && this.autoDismiss >= 0) {\n      setTimeout(() => this.dismiss(), this.autoDismiss)\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-toast\": Toast\n  }\n}\n"],"names":["Icon","registerIcon","closeIcon","Toast","DraftComponentMixin","LitElement","constructor","this","events","EventController","dismissed","variant","autoDismiss","disconnectedCallback","super","clearTimeout","timeoutId","dismiss","Promise","resolve","listen","toast","dispatchEvent","NordEvent","once","render","html","classMap","handleAutoDismissChange","setTimeout","styles","componentStyle","style","__decorate","query","prototype","state","property","reflect","type","Number","attribute","observe","customElement"],"mappings":"8sBAAe,oNACM,uBACD,q1DCWpBA,EAAKC,aAAaC,GAYlB,IAAqBC,EAArB,cAAmCC,EAAoBC,IAAvDC,kCAIUC,KAAAC,OAAS,IAAIC,EAAgBF,MAGpBA,KAASG,WAAG,EAKAH,KAAOI,QAAyB,UAKNJ,KAAWK,YAAI,GAkDvE,CAhDCC,uBACEC,MAAMD,uBACNE,aAAaR,KAAKS,UACnB,CAMDC,UAIE,OAHAV,KAAKG,WAAY,EACjBK,aAAaR,KAAKS,WAEX,IAAIE,SAAcC,IACvBZ,KAAKC,OAAOY,OACVb,KAAKc,MACL,gBACA,KACEd,KAAKe,cAAc,IAAIC,EAAU,YACjCJ,GAAS,GAEX,CAAEK,MAAM,GACT,GAEJ,CAEDC,SACE,OAAOC,CAAI,eACIC,EAAS,CAAE,WAAW,EAAM,cAAepB,KAAKG,gGAKxBH,KAAKU,oGAK7C,CAGSW,0BACRb,aAAaR,KAAKS,WAEM,MAApBT,KAAKK,aAAuBL,KAAKK,aAAe,GAClDiB,YAAW,IAAMtB,KAAKU,WAAWV,KAAKK,YAEzC,GAjEMT,EAAA2B,OAAS,CAACC,EAAgBC,GAKRC,EAAA,CAAxBC,EAAM,YAAY,IAAiC/B,EAAAgC,UAAA,aAAA,GAC3CF,EAAA,CAARG,KAAiCjC,EAAAgC,UAAA,iBAAA,GAKLF,EAAA,CAA5BI,EAAS,CAAEC,SAAS,KAAiDnC,EAAAgC,UAAA,eAAA,GAKfF,EAAA,CAAtDI,EAAS,CAAEE,KAAMC,OAAQC,UAAW,kBAAsCtC,EAAAgC,UAAA,mBAAA,GA2C3EF,EAAA,CADCS,EAAQ,gBAORvC,EAAAgC,UAAA,0BAAA,MAlEkBhC,EAAK8B,EAAA,CADzBU,EAAc,eACMxC,SAAAA"}

package/lib/ToastGroup.js

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

package/lib/ToastGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastGroup.js","sources":["../src/toast-group/ToastGroup.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport Toast from \"../toast/Toast.js\"\nimport style from \"./ToastGroup.css\"\n\ntype ToastOptions = Partial<Pick<Toast, \"variant\" | \"autoDismiss\">>\n\n/**\n * Toast group is used to position and style a group of toasts, whilst ensuring they are announced by screen readers.\n *\n * @status draft\n * @category feedback\n * @slot - Default slot in which to place toasts.\n */\n@customElement(\"nord-toast-group\")\nexport default class ToastGroup extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  render() {\n    return html`\n      <div class=\"n-toast-group\" role=\"log\" aria-relevant=\"additions\">\n        <slot></slot>\n      </div>\n    `\n  }\n\n  /**\n   * Convenience method for creating and adding a toast to the group.\n   * @param {string} text - The text/message of the toast.\n   * @param options - An optional object for configuring the toast's `variant` and `autoDismiss`.\n   * @returns The toast instance.\n   */\n  addToast(text: string, options: ToastOptions = {}) {\n    const { variant, autoDismiss } = options\n    const toast = document.createElement(\"nord-toast\")\n\n    if (variant) {\n      toast.variant = variant\n    }\n\n    if (autoDismiss != null) {\n      toast.autoDismiss = autoDismiss\n    }\n\n    toast.textContent = text\n    this.appendChild(toast)\n\n    return toast\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-toast-group\": ToastGroup\n  }\n}\n"],"names":["ToastGroup","DraftComponentMixin","LitElement","render","html","addToast","text","options","variant","autoDismiss","toast","document","createElement","textContent","this","appendChild","styles","componentStyle","style","__decorate","customElement"],"mappings":"okBAkBA,IAAqBA,EAArB,cAAwCC,EAAoBC,IAG1DC,SACE,OAAOC,CAAI,sFAabC,SAASC,EAAcC,EAAwB,IAC7C,MAAMC,QAAEA,EAAOC,YAAEA,GAAgBF,EAC3BG,EAAQC,SAASC,cAAc,cAarC,OAXIJ,IACFE,EAAMF,QAAUA,GAGC,MAAfC,IACFC,EAAMD,YAAcA,GAGtBC,EAAMG,YAAcP,EACpBQ,KAAKC,YAAYL,GAEVA,IA/BFV,EAAAgB,OAAS,CAACC,EAAgBC,GADdlB,EAAUmB,EAAA,CAD9BC,EAAc,qBACMpB,SAAAA"}
+{"version":3,"file":"ToastGroup.js","sources":["../src/toast-group/ToastGroup.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport Toast from \"../toast/Toast.js\"\nimport style from \"./ToastGroup.css\"\n\ntype ToastOptions = Partial<Pick<Toast, \"variant\" | \"autoDismiss\">>\n\n/**\n * Toast group is used to position and style a group of toasts, whilst ensuring they are announced by screen readers.\n *\n * @status draft\n * @category feedback\n * @slot - Default slot in which to place toasts.\n */\n@customElement(\"nord-toast-group\")\nexport default class ToastGroup extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  render() {\n    return html`\n      <div class=\"n-toast-group\" role=\"log\" aria-relevant=\"additions\">\n        <slot></slot>\n      </div>\n    `\n  }\n\n  /**\n   * Convenience method for creating and adding a toast to the group.\n   * @param {string} text - The text/message of the toast.\n   * @param options - An optional object for configuring the toast's `variant` and `autoDismiss`.\n   * @returns The toast instance.\n   */\n  addToast(text: string, options: ToastOptions = {}) {\n    const { variant, autoDismiss } = options\n    const toast = document.createElement(\"nord-toast\")\n\n    if (variant) {\n      toast.variant = variant\n    }\n\n    if (autoDismiss != null) {\n      toast.autoDismiss = autoDismiss\n    }\n\n    toast.textContent = text\n    this.appendChild(toast)\n\n    return toast\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-toast-group\": ToastGroup\n  }\n}\n"],"names":["ToastGroup","DraftComponentMixin","LitElement","render","html","addToast","text","options","variant","autoDismiss","toast","document","createElement","textContent","this","appendChild","styles","componentStyle","style","__decorate","customElement"],"mappings":"+jBAkBA,IAAqBA,EAArB,cAAwCC,EAAoBC,IAG1DC,SACE,OAAOC,CAAI,qFAKZ,CAQDC,SAASC,EAAcC,EAAwB,IAC7C,MAAMC,QAAEA,EAAOC,YAAEA,GAAgBF,EAC3BG,EAAQC,SAASC,cAAc,cAarC,OAXIJ,IACFE,EAAMF,QAAUA,GAGC,MAAfC,IACFC,EAAMD,YAAcA,GAGtBC,EAAMG,YAAcP,EACpBQ,KAAKC,YAAYL,GAEVA,CACR,GAhCMV,EAAAgB,OAAS,CAACC,EAAgBC,GADdlB,EAAUmB,EAAA,CAD9BC,EAAc,qBACMpB,SAAAA"}

package/lib/Toggle.js

@@ -1,2 +1,2 @@
-import{_ as e,n}from"./query-assigned-elements-ef860822.js";import{r as i,$ as r,s as t}from"./lit-element-67e6cd99.js";import{e as o}from"./property-03f59dce.js";import{l as a}from"./if-defined-fe1a64e3.js";import{n as s}from"./ref-57ff8ffc.js";import{F as l}from"./FocusableMixin-175ea4d7.js";import{F as c}from"./FormAssociatedMixin-d0d98a92.js";import{I as d}from"./InputMixin-9334d385.js";import{s as g}from"./Component-5a0a26a0.js";import{s as p}from"./FormField-d3767c2e.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const h=i`:host{display:inline-block;font-size:var(--n-font-size-m);--n-toggle-inline-size:3.2143em;--n-toggle-block-size:calc(var(--n-toggle-inline-size) / 1.6);--n-toggle-thumb-margin:0.35em}.n-flex{display:flex}.n-expand{flex:1;display:flex;justify-content:center;align-items:flex-start;flex-direction:column;min-block-size:100%}.n-input-container{position:relative}.n-toggle{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;inline-size:var(--n-toggle-inline-size);block-size:var(--n-toggle-block-size);border-radius:var(--n-border-radius-pill);background:var(--n-toggle-background,var(--n-color-border-strong));cursor:pointer;transition:background var(--n-transition-slowly);font-size:var(--n-toggle-size,var(--n-font-size-m))}.n-toggle::before{content:"";display:block;aspect-ratio:1/1;block-size:calc(100% - 2 * var(--n-toggle-thumb-margin));background:var(--n-color-text-on-accent);border-radius:var(--n-border-radius-circle);transition:margin;transition-duration:inherit;margin-inline-start:var(--n-toggle-thumb-margin);box-shadow:var(--n-box-shadow)}input:checked{--n-toggle-background:var(--n-color-text-link)}input:checked::before{margin-inline-start:calc(var(--n-toggle-inline-size) - var(--n-toggle-block-size) + var(--n-toggle-thumb-margin))}input:checked[aria-invalid]{--n-toggle-background:var(--n-color-status-danger)}input:focus{outline:0;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{opacity:.3;cursor:not-allowed}.n-label-container{padding-block-end:0}label{-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:calc(var(--n-space-s)/ 2);padding-inline-start:var(--n-space-s)}:host([reverse]) .n-error,:host([reverse]) .n-hint,:host([reverse]) label{padding-inline-start:0;padding-inline-end:var(--n-space-s)}:host([size="s"]) .n-toggle{--n-toggle-size:var(--n-font-size-xs)}:host([size="l"]) .n-toggle{--n-toggle-size:var(--n-font-size-xl)}`;let v=class extends(c(d(l(t)))){constructor(){super(...arguments),this.checked=!1,this.reverse=!1,this.size="m"}get formValue(){return this.checked?this.value||"on":void 0}render(){const e=r`<div class="n-expand">${this.renderLabel()} ${this.renderError()}</div>`,n=r`<div class="n-input-container"><input ${s(this.focusableRef)} class="n-toggle" id="${this.inputId}" type="checkbox" role="switch" name="${a(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" @change="${this.handleChange}"></div>`;return r`<div class="n-flex">${this.reverse?[e,n]:[n,e]}</div>`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};v.styles=[g,p,h],e([o({type:Boolean})],v.prototype,"checked",void 0),e([o({type:Boolean})],v.prototype,"reverse",void 0),e([o({reflect:!0})],v.prototype,"size",void 0),v=e([n("nord-toggle")],v);var m=v;export{m as default};
+import{_ as e,e as n}from"./query-assigned-elements-e6cbac30.js";import{i,y as r,s as t}from"./lit-element-79bc2e0e.js";import{e as o}from"./property-03f59dce.js";import{l as s}from"./if-defined-f43b1487.js";import{n as a}from"./ref-697b28b5.js";import{F as l}from"./FocusableMixin-99db12c1.js";import{F as c}from"./FormAssociatedMixin-f6e5b3cd.js";import{I as d}from"./InputMixin-158f63fb.js";import{s as g}from"./Component-49a41387.js";import{s as p}from"./FormField-72062bf1.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const h=i`:host{display:inline-block;font-size:var(--n-font-size-m);--n-toggle-inline-size:3.2143em;--n-toggle-block-size:calc(var(--n-toggle-inline-size) / 1.6);--n-toggle-thumb-margin:0.35em}.n-flex{display:flex}.n-expand{flex:1;display:flex;justify-content:center;align-items:flex-start;flex-direction:column;min-block-size:100%}.n-input-container{position:relative}.n-toggle{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;inline-size:var(--n-toggle-inline-size);block-size:var(--n-toggle-block-size);border-radius:var(--n-border-radius-pill);background:var(--n-toggle-background,var(--n-color-border-strong));cursor:pointer;transition:background var(--n-transition-slowly);font-size:var(--n-toggle-size,var(--n-font-size-m))}.n-toggle::before{content:"";display:block;aspect-ratio:1/1;block-size:calc(100% - 2 * var(--n-toggle-thumb-margin));background:var(--n-color-text-on-accent);border-radius:var(--n-border-radius-circle);transition:margin;transition-duration:inherit;margin-inline-start:var(--n-toggle-thumb-margin);box-shadow:var(--n-box-shadow)}input:checked{--n-toggle-background:var(--n-color-text-link)}input:checked::before{margin-inline-start:calc(var(--n-toggle-inline-size) - var(--n-toggle-block-size) + var(--n-toggle-thumb-margin))}input:checked[aria-invalid]{--n-toggle-background:var(--n-color-status-danger)}input:focus{outline:0;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{opacity:.3;cursor:not-allowed}.n-label-container{padding-block-end:0}label{-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:calc(var(--n-space-s)/ 2);padding-inline-start:var(--n-space-s)}:host([reverse]) .n-error,:host([reverse]) .n-hint,:host([reverse]) label{padding-inline-start:0;padding-inline-end:var(--n-space-s)}:host([size="s"]) .n-toggle{--n-toggle-size:var(--n-font-size-xs)}:host([size="l"]) .n-toggle{--n-toggle-size:var(--n-font-size-xl)}`;let v=class extends(c(d(l(t)))){constructor(){super(...arguments),this.checked=!1,this.reverse=!1,this.size="m"}get formValue(){return this.checked?this.value||"on":void 0}render(){const e=r`<div class="n-expand">${this.renderLabel()} ${this.renderError()}</div>`,n=r`<div class="n-input-container"><input ${a(this.focusableRef)} class="n-toggle" id="${this.inputId}" type="checkbox" role="switch" name="${s(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" @change="${this.handleChange}"></div>`;return r`<div class="n-flex">${this.reverse?[e,n]:[n,e]}</div>`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};v.styles=[g,p,h],e([o({type:Boolean})],v.prototype,"checked",void 0),e([o({type:Boolean})],v.prototype,"reverse",void 0),e([o({reflect:!0})],v.prototype,"size",void 0),v=e([n("nord-toggle")],v);var b=v;export{b as default};
 //# sourceMappingURL=Toggle.js.map

package/lib/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sources":["../src/toggle/Toggle.ts"],"sourcesContent":["/* eslint-disable lit-a11y/role-has-required-aria-attrs */\nimport { html, LitElement } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Toggle.css\"\n\n/**\n * Toggle switch gives control over a feature or option that can be\n * turned on or off. If a physical switch would work for the action, a\n * toggle is probably the best component to use.\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@customElement(\"nord-toggle\")\nexport default class Toggle extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  protected override get formValue() {\n    return this.checked ? this.value || \"on\" : undefined\n  }\n\n  /**\n   * Controls whether the toggle is checked or not.\n   */\n  @property({ type: Boolean }) checked: boolean = false\n\n  /**\n   * Controls whether the contents are displayed in reverse order,\n   * putting the label before the toggle.\n   */\n  @property({ type: Boolean }) reverse: boolean = false\n\n  /**\n   * The size of the toggle switch.\n   */\n  @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n\n  render() {\n    const label = html`<div class=\"n-expand\">${this.renderLabel()} ${this.renderError()}</div>`\n    const input = html`<div class=\"n-input-container\">\n      <input\n        ${ref(this.focusableRef)}\n        class=\"n-toggle\"\n        id=${this.inputId}\n        type=\"checkbox\"\n        role=\"switch\"\n        name=${ifDefined(this.name)}\n        .value=${this.value}\n        .checked=${this.checked}\n        ?disabled=${this.disabled}\n        ?required=${this.required}\n        aria-describedby=${ifDefined(this.getDescribedBy())}\n        aria-invalid=${ifDefined(this.getInvalid())}\n        @change=${this.handleChange}\n      />\n    </div>`\n\n    return html`<div class=\"n-flex\">${this.reverse ? [label, input] : [input, label]}</div>`\n  }\n\n  protected handleChange(e: Event): void {\n    const target = e.target as HTMLInputElement\n    this.checked = target.checked\n    super.handleChange(e)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-toggle\": Toggle\n  }\n}\n"],"names":["Toggle","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","checked","reverse","size","formValue","value","undefined","render","label","html","renderLabel","renderError","input","ref","focusableRef","inputId","ifDefined","name","disabled","required","getDescribedBy","getInvalid","handleChange","e","target","super","styles","componentStyle","formFieldStyle","style","__decorate","property","type","Boolean","prototype","reflect","customElement"],"mappings":"0yFA0BA,IAAqBA,EAArB,cAAoCC,EAAoBC,EAAWC,EAAeC,MAAlFC,kCAU+BC,KAAOC,SAAY,EAMnBD,KAAOE,SAAY,EAKnBF,KAAIG,KAAoB,IAlB9BC,gBACrB,OAAOJ,KAAKC,QAAUD,KAAKK,OAAS,UAAOC,EAmB7CC,SACE,MAAMC,EAAQC,CAAI,yBAAyBT,KAAKU,iBAAiBV,KAAKW,sBAChEC,EAAQH,CAAI,yCAEZI,EAAIb,KAAKc,sCAENd,KAAKe,gDAGHC,EAAUhB,KAAKiB,kBACbjB,KAAKK,oBACHL,KAAKC,uBACJD,KAAKkB,wBACLlB,KAAKmB,+BACEH,EAAUhB,KAAKoB,oCACnBJ,EAAUhB,KAAKqB,2BACpBrB,KAAKsB,uBAInB,OAAOb,CAAI,uBAAuBT,KAAKE,QAAU,CAACM,EAAOI,GAAS,CAACA,EAAOJ,WAGlEc,aAAaC,GACrB,MAAMC,EAASD,EAAEC,OACjBxB,KAAKC,QAAUuB,EAAOvB,QACtBwB,MAAMH,aAAaC,KAhDd7B,EAAMgC,OAAG,CAACC,EAAgBC,EAAgBC,GASpBC,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAmCvC,EAAAwC,UAAA,eAAA,GAMxBJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAmCvC,EAAAwC,UAAA,eAAA,GAKxBJ,EAAA,CAA5BC,EAAS,CAAEI,SAAS,KAAmCzC,EAAAwC,UAAA,YAAA,GArBrCxC,EAAMoC,EAAA,CAD1BM,EAAc,gBACM1C,SAAAA"}
+{"version":3,"file":"Toggle.js","sources":["../src/toggle/Toggle.ts"],"sourcesContent":["/* eslint-disable lit-a11y/role-has-required-aria-attrs */\nimport { html, LitElement } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Toggle.css\"\n\n/**\n * Toggle switch gives control over a feature or option that can be\n * turned on or off. If a physical switch would work for the action, a\n * toggle is probably the best component to use.\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@customElement(\"nord-toggle\")\nexport default class Toggle extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  protected override get formValue() {\n    return this.checked ? this.value || \"on\" : undefined\n  }\n\n  /**\n   * Controls whether the toggle is checked or not.\n   */\n  @property({ type: Boolean }) checked: boolean = false\n\n  /**\n   * Controls whether the contents are displayed in reverse order,\n   * putting the label before the toggle.\n   */\n  @property({ type: Boolean }) reverse: boolean = false\n\n  /**\n   * The size of the toggle switch.\n   */\n  @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n\n  render() {\n    const label = html`<div class=\"n-expand\">${this.renderLabel()} ${this.renderError()}</div>`\n    const input = html`<div class=\"n-input-container\">\n      <input\n        ${ref(this.focusableRef)}\n        class=\"n-toggle\"\n        id=${this.inputId}\n        type=\"checkbox\"\n        role=\"switch\"\n        name=${ifDefined(this.name)}\n        .value=${this.value}\n        .checked=${this.checked}\n        ?disabled=${this.disabled}\n        ?required=${this.required}\n        aria-describedby=${ifDefined(this.getDescribedBy())}\n        aria-invalid=${ifDefined(this.getInvalid())}\n        @change=${this.handleChange}\n      />\n    </div>`\n\n    return html`<div class=\"n-flex\">${this.reverse ? [label, input] : [input, label]}</div>`\n  }\n\n  protected handleChange(e: Event): void {\n    const target = e.target as HTMLInputElement\n    this.checked = target.checked\n    super.handleChange(e)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-toggle\": Toggle\n  }\n}\n"],"names":["Toggle","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","checked","reverse","size","formValue","value","undefined","render","label","html","renderLabel","renderError","input","ref","focusableRef","inputId","ifDefined","name","disabled","required","getDescribedBy","getInvalid","handleChange","e","target","super","styles","componentStyle","formFieldStyle","style","__decorate","property","type","Boolean","prototype","reflect","customElement"],"mappings":"0yFA0BA,IAAqBA,EAArB,cAAoCC,EAAoBC,EAAWC,EAAeC,MAAlFC,kCAU+BC,KAAOC,SAAY,EAMnBD,KAAOE,SAAY,EAKnBF,KAAIG,KAAoB,GA8BtD,CAhDwBC,gBACrB,OAAOJ,KAAKC,QAAUD,KAAKK,OAAS,UAAOC,CAC5C,CAkBDC,SACE,MAAMC,EAAQC,CAAI,yBAAyBT,KAAKU,iBAAiBV,KAAKW,sBAChEC,EAAQH,CAAI,yCAEZI,EAAIb,KAAKc,sCAENd,KAAKe,gDAGHC,EAAUhB,KAAKiB,kBACbjB,KAAKK,oBACHL,KAAKC,uBACJD,KAAKkB,wBACLlB,KAAKmB,+BACEH,EAAUhB,KAAKoB,oCACnBJ,EAAUhB,KAAKqB,2BACpBrB,KAAKsB,uBAInB,OAAOb,CAAI,uBAAuBT,KAAKE,QAAU,CAACM,EAAOI,GAAS,CAACA,EAAOJ,UAC3E,CAESc,aAAaC,GACrB,MAAMC,EAASD,EAAEC,OACjBxB,KAAKC,QAAUuB,EAAOvB,QACtBwB,MAAMH,aAAaC,EACpB,GAjDM7B,EAAMgC,OAAG,CAACC,EAAgBC,EAAgBC,GASpBC,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAmCvC,EAAAwC,UAAA,eAAA,GAMxBJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAmCvC,EAAAwC,UAAA,eAAA,GAKxBJ,EAAA,CAA5BC,EAAS,CAAEI,SAAS,KAAmCzC,EAAAwC,UAAA,YAAA,GArBrCxC,EAAMoC,EAAA,CAD1BM,EAAc,gBACM1C,SAAAA"}

package/lib/Tooltip.js

@@ -1,2 +1,2 @@
-import{_ as t,n as i}from"./query-assigned-elements-ef860822.js";import{r as e,s,$ as o}from"./lit-element-67e6cd99.js";import{e as n}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{c as a,l as d,o as l,f as h,s as p}from"./positioning-b660767c.js";import{S as c}from"./SlotController-ea6eff46.js";import{s as u}from"./Component-5a0a26a0.js";import{E as v}from"./EventController-d99ebeef.js";import{f as m}from"./fsm-50373df9.js";import{o as y}from"./observe-a9c6dfb6.js";function b(t,i){const e=t.getAttribute(i);return e?e.split(/\s+/):[]}function f(t,i,e){t.setAttribute(i,e.join(" "))}const g=e`:host{--n-tooltip-background:rgba(20, 20, 20, 0.95);--n-tooltip-color:#fff;--n-tooltip-key-border:rgba(255, 255, 255, 0.03);--n-tooltip-key-background:rgba(255, 255, 255, 0.1);position:fixed;pointer-events:none;visibility:hidden;opacity:0;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);transition-timing-function:ease;z-index:var(--n-index-popout)}.n-tooltip{gap:var(--n-space-s);font-family:var(--n-font-family);font-size:var(--n-font-size-xs);line-height:var(--n-line-height);color:var(--n-tooltip-color);padding:calc(var(--n-space-s)/ 1.5) var(--n-space-s);background-color:var(--n-tooltip-background);border-radius:var(--n-border-radius-s)}.n-tooltip,.n-tooltip-shortcut{display:flex;align-items:center}.n-tooltip-shortcut{gap:2px}::slotted([slot=shortcut]){box-sizing:border-box;margin:0;inline-size:var(--n-size-icon-m);block-size:var(--n-size-icon-m);border-radius:var(--n-border-radius-s);border:1px solid var(--n-tooltip-key-border)!important;padding:1px!important;text-align:center;font-size:var(--n-font-size-xs);line-height:var(--n-line-height-tight);letter-spacing:-.5px;vertical-align:middle!important;background-color:var(--n-tooltip-key-background)}`;var x;function w(t,i){return Boolean(i.id)&&t.nodeType===Node.ELEMENT_NODE&&t.getAttribute("aria-describedby")===i.id}const{transition:k}=m({hidden:{show:"waiting"},visible:{hide:"hidden",reposition:"positioning",show:"positioning"},waiting:{timeout:"positioning",hide:"hidden"},positioning:{positioned:"visible",hide:"hidden"}});let E=x=class extends s{constructor(){super(...arguments),this.shortcutSlot=new c(this,"shortcut"),this.events=new v(this),this.proxy=document.createElement("span"),this.state="hidden",this.coords=[0,0],this.position="block-start",this.role="tooltip",this.id="",this.delay=500,this.updatePosition=t=>a(t,this,{strategy:"fixed",placement:d(this.position),middleware:[l(8),h(),p({padding:8})]}).then((({x:t,y:i})=>{this.coords=[t,i],this.state=k(this.state,"positioned")})),this.hideTooltip=()=>{this.state=k(this.state,"hide")},this.reposition=()=>{this.state=k(this.state,"reposition")},this.handleShow=t=>{const i=t.target;w(i,this)&&(this.currentElement=i,this.state=k(this.state,"show"))},this.handleHide=t=>{t.target===this.currentElement&&this.hideTooltip()},this.hideOnEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.addDescribedBy=()=>{var t,i;const e=null===(i=null===(t=this.currentElement)||void 0===t?void 0:t.focusableRef)||void 0===i?void 0:i.value;e&&(this.proxy.hidden=!0,this.proxy.id=this.id,this.proxy.textContent=this.textContent,e.insertAdjacentElement("afterend",this.proxy),function(t,i,e){const s=b(t,i);s.includes(e)||f(t,i,s.concat(e))}(e,"aria-describedby",this.id))},this.removeDescribedBy=()=>{var t,i;const e=null===(i=null===(t=this.currentElement)||void 0===t?void 0:t.focusableRef)||void 0===i?void 0:i.value;e&&(this.proxy.remove(),function(t,i,e){const s=b(t,i);s.includes(e)&&f(t,i,s.filter((t=>t!==e)))}(e,"aria-describedby",this.id))}}connectedCallback(){super.connectedCallback();const t=this.getRootNode();this.events.listen(t,"keydown",this.hideOnEscape),this.events.listen(t,"mouseover",this.handleShow),this.events.listen(t,"focusin",this.handleShow),this.events.listen(t,"mouseout",this.handleHide),this.events.listen(t,"focusout",this.handleHide),this.events.listen(t,"click",this.handleHide),this.events.listen(window,"resize",this.reposition,{passive:!0}),this.events.listen(window,"scroll",this.reposition,{passive:!0})}render(){return o`<div class="n-tooltip"><slot></slot><div class="n-tooltip-shortcut" ?hidden="${this.shortcutSlot.isEmpty}"><slot class="n-tooltip-key" name="shortcut"></slot></div></div>`}handleIdChange(){this.id||console.warn("NORD: The tooltip requires an id attribute and value")}handleStateChange(t){var i;switch(this.state){case"hidden":"waiting"===t&&this.timeoutId&&clearTimeout(this.timeoutId),this.removeDescribedBy(),this.currentElement=void 0,this.style.visibility="hidden",this.style.opacity="0";break;case"visible":{this.timeoutId=void 0,x.lastOpened=this,this.addDescribedBy();const[t,i]=this.coords;this.style.left=`${t}px`,this.style.top=`${i}px`,this.style.visibility="visible",this.style.opacity="1";break}case"waiting":this.timeoutId=setTimeout((()=>{this.state=k(this.state,"timeout")}),this.delay);break;case"positioning":x.lastOpened!==this&&(null===(i=x.lastOpened)||void 0===i||i.hideTooltip()),this.currentElement&&this.updatePosition(this.currentElement)}}};E.styles=[u,g],t([r()],E.prototype,"state",void 0),t([n({reflect:!0})],E.prototype,"position",void 0),t([n({reflect:!0})],E.prototype,"role",void 0),t([n({reflect:!0})],E.prototype,"id",void 0),t([n({reflect:!0,type:Number})],E.prototype,"delay",void 0),t([y("id")],E.prototype,"handleIdChange",null),t([y("state")],E.prototype,"handleStateChange",null),E=x=t([i("nord-tooltip")],E);var j=E;export{j as default};
+import{_ as t,e as i}from"./query-assigned-elements-e6cbac30.js";import{i as e,s,y as o}from"./lit-element-79bc2e0e.js";import{e as n}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{c as a,l as d,o as l,f as h,s as p}from"./positioning-3bbd3548.js";import{S as c}from"./SlotController-ea6eff46.js";import{s as u}from"./Component-49a41387.js";import{E as v}from"./EventController-d99ebeef.js";import{f as m}from"./fsm-50373df9.js";import{o as b}from"./observe-a9c6dfb6.js";function y(t,i){const e=t.getAttribute(i);return e?e.split(/\s+/):[]}function f(t,i,e){t.setAttribute(i,e.join(" "))}const g=e`:host{--n-tooltip-background:rgba(20, 20, 20, 0.95);--n-tooltip-color:#fff;--n-tooltip-key-border:rgba(255, 255, 255, 0.03);--n-tooltip-key-background:rgba(255, 255, 255, 0.1);position:fixed;pointer-events:none;visibility:hidden;opacity:0;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);transition-timing-function:ease;z-index:var(--n-index-popout)}.n-tooltip{gap:var(--n-space-s);font-family:var(--n-font-family);font-size:var(--n-font-size-xs);line-height:var(--n-line-height);color:var(--n-tooltip-color);padding:calc(var(--n-space-s)/ 1.5) var(--n-space-s);background-color:var(--n-tooltip-background);border-radius:var(--n-border-radius-s)}.n-tooltip,.n-tooltip-shortcut{display:flex;align-items:center}.n-tooltip-shortcut{gap:2px}::slotted([slot=shortcut]){box-sizing:border-box;margin:0;inline-size:var(--n-size-icon-m);block-size:var(--n-size-icon-m);border-radius:var(--n-border-radius-s);border:1px solid var(--n-tooltip-key-border)!important;padding:1px!important;text-align:center;font-size:var(--n-font-size-xs);line-height:var(--n-line-height-tight);letter-spacing:-.5px;vertical-align:middle!important;background-color:var(--n-tooltip-key-background)}`;var x;function w(t,i){return Boolean(i.id)&&t.nodeType===Node.ELEMENT_NODE&&t.getAttribute("aria-describedby")===i.id}const{transition:k}=m({hidden:{show:"waiting"},visible:{hide:"hidden",reposition:"positioning",show:"positioning"},waiting:{timeout:"positioning",hide:"hidden"},positioning:{positioned:"visible",hide:"hidden"}});let E=x=class extends s{constructor(){super(...arguments),this.shortcutSlot=new c(this,"shortcut"),this.events=new v(this),this.proxy=document.createElement("span"),this.state="hidden",this.coords=[0,0],this.position="block-start",this.role="tooltip",this.id="",this.delay=500,this.updatePosition=t=>a(t,this,{strategy:"fixed",placement:d(this.position),middleware:[l(8),h(),p({padding:8})]}).then((({x:t,y:i})=>{this.coords=[t,i],this.state=k(this.state,"positioned")})),this.hideTooltip=()=>{this.state=k(this.state,"hide")},this.reposition=()=>{this.state=k(this.state,"reposition")},this.handleShow=t=>{const i=t.target;w(i,this)&&(this.currentElement=i,this.state=k(this.state,"show"))},this.handleHide=t=>{t.target===this.currentElement&&this.hideTooltip()},this.hideOnEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.addDescribedBy=()=>{var t,i;const e=null===(i=null===(t=this.currentElement)||void 0===t?void 0:t.focusableRef)||void 0===i?void 0:i.value;e&&(this.proxy.hidden=!0,this.proxy.id=this.id,this.proxy.textContent=this.textContent,e.insertAdjacentElement("afterend",this.proxy),function(t,i,e){const s=y(t,i);s.includes(e)||f(t,i,s.concat(e))}(e,"aria-describedby",this.id))},this.removeDescribedBy=()=>{var t,i;const e=null===(i=null===(t=this.currentElement)||void 0===t?void 0:t.focusableRef)||void 0===i?void 0:i.value;e&&(this.proxy.remove(),function(t,i,e){const s=y(t,i);s.includes(e)&&f(t,i,s.filter((t=>t!==e)))}(e,"aria-describedby",this.id))}}connectedCallback(){super.connectedCallback();const t=this.getRootNode();this.events.listen(t,"keydown",this.hideOnEscape),this.events.listen(t,"mouseover",this.handleShow),this.events.listen(t,"focusin",this.handleShow),this.events.listen(t,"mouseout",this.handleHide),this.events.listen(t,"focusout",this.handleHide),this.events.listen(t,"click",this.handleHide),this.events.listen(window,"resize",this.reposition,{passive:!0}),this.events.listen(window,"scroll",this.reposition,{passive:!0})}render(){return o`<div class="n-tooltip"><slot></slot><div class="n-tooltip-shortcut" ?hidden="${this.shortcutSlot.isEmpty}"><slot class="n-tooltip-key" name="shortcut"></slot></div></div>`}handleIdChange(){this.id||console.warn("NORD: The tooltip requires an id attribute and value")}handleStateChange(t){var i;switch(this.state){case"hidden":"waiting"===t&&this.timeoutId&&clearTimeout(this.timeoutId),this.removeDescribedBy(),this.currentElement=void 0,this.style.visibility="hidden",this.style.opacity="0";break;case"visible":{this.timeoutId=void 0,x.lastOpened=this,this.addDescribedBy();const[t,i]=this.coords;this.style.left=`${t}px`,this.style.top=`${i}px`,this.style.visibility="visible",this.style.opacity="1";break}case"waiting":this.timeoutId=setTimeout((()=>{this.state=k(this.state,"timeout")}),this.delay);break;case"positioning":x.lastOpened!==this&&(null===(i=x.lastOpened)||void 0===i||i.hideTooltip()),this.currentElement&&this.updatePosition(this.currentElement)}}};E.styles=[u,g],t([r()],E.prototype,"state",void 0),t([n({reflect:!0})],E.prototype,"position",void 0),t([n({reflect:!0})],E.prototype,"role",void 0),t([n({reflect:!0})],E.prototype,"id",void 0),t([n({reflect:!0,type:Number})],E.prototype,"delay",void 0),t([b("id")],E.prototype,"handleIdChange",null),t([b("state")],E.prototype,"handleStateChange",null),E=x=t([i("nord-tooltip")],E);var j=E;export{j as default};
 //# sourceMappingURL=Tooltip.js.map

package/lib/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../src/common/attribute.ts","../src/tooltip/Tooltip.ts"],"sourcesContent":["function getTokens(element: Element, attr: string) {\n  const value = element.getAttribute(attr)\n  return value ? value.split(/\\s+/) : []\n}\n\nfunction setTokens(element: Element, attr: string, tokens: string[]) {\n  element.setAttribute(attr, tokens.join(\" \"))\n}\n\n/**\n * Carefully adds a token to a space-separated attribute\n * Similar to classList, but for any attribute.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/add\n */\nexport function add(element: Element, attr: string, token: string) {\n  const tokens = getTokens(element, attr)\n\n  if (!tokens.includes(token)) {\n    setTokens(element, attr, tokens.concat(token))\n  }\n}\n\n/**\n * Carefully removes a token from a space-separated attribute.\n * Similar to classList, but for any attribute.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/remove\n */\nexport function remove(element: Element, attr: string, token: string) {\n  const tokens = getTokens(element, attr)\n\n  if (tokens.includes(token)) {\n    setTokens(\n      element,\n      attr,\n      tokens.filter(t => t !== token)\n    )\n  }\n}\n","import { LitElement, html } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { computePosition, flip, shift, offset } from \"@floating-ui/dom\"\n\nimport * as attr from \"../common/attribute.js\"\nimport type { FocusableMixinInterface } from \"../common/mixins/FocusableMixin.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Tooltip.css\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { States, fsm } from \"../common/fsm.js\"\nimport { logicalToPhysical } from \"../common/positioning.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\n// @ts-expect-error we're being naughty and accessing a protected field!\n// however this means we always get the correct types,\n// and it will ensure this file is not forgotten about if focusable mixin ever changes\ntype FocusableElement = HTMLElement & Pick<FocusableMixinInterface, \"focusableRef\">\n\nfunction isElement(el: Node): el is Element {\n  return el.nodeType === Node.ELEMENT_NODE\n}\n\nfunction referencesTooltip(node: Node, tooltip: Tooltip) {\n  return Boolean(tooltip.id) && isElement(node) && node.getAttribute(\"aria-describedby\") === tooltip.id\n}\n\nconst { transition } = fsm({\n  hidden: {\n    show: \"waiting\",\n  },\n  visible: {\n    hide: \"hidden\",\n    reposition: \"positioning\",\n    show: \"positioning\",\n  },\n  waiting: {\n    timeout: \"positioning\",\n    hide: \"hidden\",\n  },\n  positioning: {\n    positioned: \"visible\",\n    hide: \"hidden\",\n  },\n})\n\ntype TooltipStates = States<typeof transition>\n\n/**\n * Tooltips are floating containers for displaying additional information\n * for the currently focused element. A tooltip can be useful when you want\n * to e.g. give a hint about an existing Command Menu shortcut.\n *\n * @status ready\n * @category overlay\n * @slot - The tooltip content\n * @slot shortcut - Optional slot that holds shortcut keys to access the subject\n */\n@customElement(\"nord-tooltip\")\nexport default class Tooltip extends LitElement {\n  static styles = [componentStyle, style]\n\n  // tracks the last tooltip opened, so we can enforce only one is ever open at a time\n  private static lastOpened?: Tooltip\n\n  private shortcutSlot = new SlotController(this, \"shortcut\")\n  private events = new EventController(this)\n\n  // The current element which revealed the tooltip shown\n  private currentElement?: FocusableElement\n  private timeoutId?: ReturnType<typeof setTimeout>\n\n  /**\n   * the proxy element is for cases where the targetElement is a web component,\n   * and the WC has a focusable child in its shadow root e.g. a button component.\n   * in this case, when the tooltip is shown, we inject the proxy into targetElement's shadow root\n   * and wire up aria-describedby from the focusable element to the proxy.\n   * when the tooltip is hidden, we remove the proxy and remove the aria-describedby relationship.\n   */\n  private proxy = document.createElement(\"span\")\n\n  /**\n   * The current state of the tooltip, dependent on the state machine\n   */\n  @state() private state: TooltipStates = \"hidden\"\n\n  // The current coordinates for the tooltip\n  private coords: [number, number] = [0, 0]\n\n  /**\n   * Control the position of the tooltip component.\n   * When set to \"none\", the tooltip will be shown above\n   * but accommodate for browser boundaries.\n   */\n  @property({ reflect: true }) position: \"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" = \"block-start\"\n\n  /**\n   * The tooltip role, set on the component by default.\n   */\n  @property({ reflect: true }) role = \"tooltip\"\n\n  /**\n   * The id for the active element to reference via aria-describedby.\n   */\n  @property({ reflect: true }) id: string = \"\"\n\n  /**\n   * The delay in milliseconds before the tooltip is opened.\n   */\n  @property({ reflect: true, type: Number }) delay: number = 500\n\n  /**\n   * Apply all event listeners\n   */\n  connectedCallback() {\n    super.connectedCallback()\n\n    const rootNode = this.getRootNode() as Document\n\n    this.events.listen(rootNode, \"keydown\", this.hideOnEscape)\n\n    // we treat mouseover and focusin the same, since they both show tooltip\n    this.events.listen(rootNode, \"mouseover\", this.handleShow)\n    this.events.listen(rootNode, \"focusin\", this.handleShow)\n\n    // we treat focusout, mouseout, click the same, since they all hide tooltip\n    this.events.listen(rootNode, \"mouseout\", this.handleHide)\n    this.events.listen(rootNode, \"focusout\", this.handleHide)\n    this.events.listen(rootNode, \"click\", this.handleHide)\n\n    this.events.listen(window, \"resize\", this.reposition, { passive: true })\n    this.events.listen(window, \"scroll\", this.reposition, { passive: true })\n  }\n\n  render() {\n    return html`\n      <div class=\"n-tooltip\">\n        <slot></slot>\n        <div class=\"n-tooltip-shortcut\" ?hidden=${this.shortcutSlot.isEmpty}>\n          <slot class=\"n-tooltip-key\" name=\"shortcut\"></slot>\n        </div>\n      </div>\n    `\n  }\n\n  @observe(\"id\")\n  protected handleIdChange() {\n    if (!this.id) {\n      // eslint-disable-next-line no-console\n      console.warn(\"NORD: The tooltip requires an id attribute and value\")\n    }\n  }\n\n  @observe(\"state\")\n  private handleStateChange(prevState: TooltipStates) {\n    switch (this.state) {\n      case \"hidden\": {\n        if (prevState === \"waiting\" && this.timeoutId) {\n          clearTimeout(this.timeoutId)\n        }\n\n        this.removeDescribedBy()\n        this.currentElement = undefined\n        this.style.visibility = \"hidden\"\n        this.style.opacity = \"0\"\n        break\n      }\n\n      case \"visible\": {\n        this.timeoutId = undefined\n        Tooltip.lastOpened = this\n        this.addDescribedBy()\n\n        const [x, y] = this.coords\n\n        // use physical properties here since floating-ui\n        // works exclusively in physical dimensions\n        // we do all the mapping in logicalToPhysical\n        this.style.left = `${x}px`\n        this.style.top = `${y}px`\n        this.style.visibility = \"visible\"\n        this.style.opacity = \"1\"\n        break\n      }\n\n      case \"waiting\": {\n        this.timeoutId = setTimeout(() => {\n          this.state = transition(this.state, \"timeout\")\n        }, this.delay)\n        break\n      }\n\n      case \"positioning\": {\n        if (Tooltip.lastOpened !== this) {\n          Tooltip.lastOpened?.hideTooltip()\n        }\n\n        if (this.currentElement) {\n          this.updatePosition(this.currentElement)\n        }\n        break\n      }\n    }\n  }\n\n  /**\n   * Setting and updating the position of the tooltip\n   */\n  private updatePosition = (currentElement: HTMLElement) =>\n    computePosition(currentElement, this, {\n      strategy: \"fixed\",\n      placement: logicalToPhysical(this.position),\n      middleware: [\n        offset(8),\n        flip(),\n        shift({\n          padding: 8,\n        }),\n      ],\n    }).then(({ x, y }) => {\n      this.coords = [x, y]\n      this.state = transition(this.state, \"positioned\")\n    })\n\n  private hideTooltip = () => {\n    this.state = transition(this.state, \"hide\")\n  }\n\n  private reposition = () => {\n    this.state = transition(this.state, \"reposition\")\n  }\n\n  private handleShow = (e: Event) => {\n    const target = e.target as FocusableElement\n\n    if (referencesTooltip(target, this)) {\n      this.currentElement = target\n      this.state = transition(this.state, \"show\")\n    }\n  }\n\n  private handleHide = (e: Event) => {\n    if (e.target === this.currentElement) {\n      this.hideTooltip()\n    }\n  }\n\n  private hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === \"Escape\") {\n      this.hideTooltip()\n    }\n  }\n\n  private addDescribedBy = () => {\n    const focusable = this.currentElement?.focusableRef?.value\n\n    if (focusable) {\n      this.proxy.hidden = true\n      this.proxy.id = this.id\n      this.proxy.textContent = this.textContent\n\n      focusable.insertAdjacentElement(\"afterend\", this.proxy)\n      attr.add(focusable, \"aria-describedby\", this.id)\n    }\n  }\n\n  private removeDescribedBy = () => {\n    const focusable = this.currentElement?.focusableRef?.value\n\n    if (focusable) {\n      this.proxy.remove()\n      attr.remove(focusable, \"aria-describedby\", this.id)\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-tooltip\": Tooltip\n  }\n}\n"],"names":["getTokens","element","attr","value","getAttribute","split","setTokens","tokens","setAttribute","join","referencesTooltip","node","tooltip","Boolean","id","nodeType","Node","ELEMENT_NODE","transition","fsm","hidden","show","visible","hide","reposition","waiting","timeout","positioning","positioned","Tooltip","Tooltip_1","LitElement","constructor","this","shortcutSlot","SlotController","events","EventController","proxy","document","createElement","state","coords","position","role","delay","updatePosition","currentElement","computePosition","strategy","placement","logicalToPhysical","middleware","offset","flip","shift","padding","then","x","y","hideTooltip","handleShow","e","target","handleHide","hideOnEscape","key","addDescribedBy","focusable","_b","_a","focusableRef","textContent","insertAdjacentElement","token","includes","concat","attr.add","removeDescribedBy","remove","filter","t","attr.remove","connectedCallback","super","rootNode","getRootNode","listen","window","passive","render","html","isEmpty","handleIdChange","console","warn","handleStateChange","prevState","timeoutId","clearTimeout","undefined","style","visibility","opacity","lastOpened","left","top","setTimeout","styles","componentStyle","__decorate","prototype","property","reflect","type","Number","observe","customElement"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","sources":["../src/common/attribute.ts","../src/tooltip/Tooltip.ts"],"sourcesContent":["function getTokens(element: Element, attr: string) {\n  const value = element.getAttribute(attr)\n  return value ? value.split(/\\s+/) : []\n}\n\nfunction setTokens(element: Element, attr: string, tokens: string[]) {\n  element.setAttribute(attr, tokens.join(\" \"))\n}\n\n/**\n * Carefully adds a token to a space-separated attribute\n * Similar to classList, but for any attribute.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/add\n */\nexport function add(element: Element, attr: string, token: string) {\n  const tokens = getTokens(element, attr)\n\n  if (!tokens.includes(token)) {\n    setTokens(element, attr, tokens.concat(token))\n  }\n}\n\n/**\n * Carefully removes a token from a space-separated attribute.\n * Similar to classList, but for any attribute.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/remove\n */\nexport function remove(element: Element, attr: string, token: string) {\n  const tokens = getTokens(element, attr)\n\n  if (tokens.includes(token)) {\n    setTokens(\n      element,\n      attr,\n      tokens.filter(t => t !== token)\n    )\n  }\n}\n","import { LitElement, html } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { computePosition, flip, shift, offset } from \"@floating-ui/dom\"\n\nimport * as attr from \"../common/attribute.js\"\nimport type { FocusableMixinInterface } from \"../common/mixins/FocusableMixin.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Tooltip.css\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { States, fsm } from \"../common/fsm.js\"\nimport { logicalToPhysical } from \"../common/positioning.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\n// @ts-expect-error we're being naughty and accessing a protected field!\n// however this means we always get the correct types,\n// and it will ensure this file is not forgotten about if focusable mixin ever changes\ntype FocusableElement = HTMLElement & Pick<FocusableMixinInterface, \"focusableRef\">\n\nfunction isElement(el: Node): el is Element {\n  return el.nodeType === Node.ELEMENT_NODE\n}\n\nfunction referencesTooltip(node: Node, tooltip: Tooltip) {\n  return Boolean(tooltip.id) && isElement(node) && node.getAttribute(\"aria-describedby\") === tooltip.id\n}\n\nconst { transition } = fsm({\n  hidden: {\n    show: \"waiting\",\n  },\n  visible: {\n    hide: \"hidden\",\n    reposition: \"positioning\",\n    show: \"positioning\",\n  },\n  waiting: {\n    timeout: \"positioning\",\n    hide: \"hidden\",\n  },\n  positioning: {\n    positioned: \"visible\",\n    hide: \"hidden\",\n  },\n})\n\ntype TooltipStates = States<typeof transition>\n\n/**\n * Tooltips are floating containers for displaying additional information\n * for the currently focused element. A tooltip can be useful when you want\n * to e.g. give a hint about an existing Command Menu shortcut.\n *\n * @status ready\n * @category overlay\n * @slot - The tooltip content\n * @slot shortcut - Optional slot that holds shortcut keys to access the subject\n */\n@customElement(\"nord-tooltip\")\nexport default class Tooltip extends LitElement {\n  static styles = [componentStyle, style]\n\n  // tracks the last tooltip opened, so we can enforce only one is ever open at a time\n  private static lastOpened?: Tooltip\n\n  private shortcutSlot = new SlotController(this, \"shortcut\")\n  private events = new EventController(this)\n\n  // The current element which revealed the tooltip shown\n  private currentElement?: FocusableElement\n  private timeoutId?: ReturnType<typeof setTimeout>\n\n  /**\n   * the proxy element is for cases where the targetElement is a web component,\n   * and the WC has a focusable child in its shadow root e.g. a button component.\n   * in this case, when the tooltip is shown, we inject the proxy into targetElement's shadow root\n   * and wire up aria-describedby from the focusable element to the proxy.\n   * when the tooltip is hidden, we remove the proxy and remove the aria-describedby relationship.\n   */\n  private proxy = document.createElement(\"span\")\n\n  /**\n   * The current state of the tooltip, dependent on the state machine\n   */\n  @state() private state: TooltipStates = \"hidden\"\n\n  // The current coordinates for the tooltip\n  private coords: [number, number] = [0, 0]\n\n  /**\n   * Control the position of the tooltip component.\n   * When set to \"none\", the tooltip will be shown above\n   * but accommodate for browser boundaries.\n   */\n  @property({ reflect: true }) position: \"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" = \"block-start\"\n\n  /**\n   * The tooltip role, set on the component by default.\n   */\n  @property({ reflect: true }) role = \"tooltip\"\n\n  /**\n   * The id for the active element to reference via aria-describedby.\n   */\n  @property({ reflect: true }) id: string = \"\"\n\n  /**\n   * The delay in milliseconds before the tooltip is opened.\n   */\n  @property({ reflect: true, type: Number }) delay: number = 500\n\n  /**\n   * Apply all event listeners\n   */\n  connectedCallback() {\n    super.connectedCallback()\n\n    const rootNode = this.getRootNode() as Document\n\n    this.events.listen(rootNode, \"keydown\", this.hideOnEscape)\n\n    // we treat mouseover and focusin the same, since they both show tooltip\n    this.events.listen(rootNode, \"mouseover\", this.handleShow)\n    this.events.listen(rootNode, \"focusin\", this.handleShow)\n\n    // we treat focusout, mouseout, click the same, since they all hide tooltip\n    this.events.listen(rootNode, \"mouseout\", this.handleHide)\n    this.events.listen(rootNode, \"focusout\", this.handleHide)\n    this.events.listen(rootNode, \"click\", this.handleHide)\n\n    this.events.listen(window, \"resize\", this.reposition, { passive: true })\n    this.events.listen(window, \"scroll\", this.reposition, { passive: true })\n  }\n\n  render() {\n    return html`\n      <div class=\"n-tooltip\">\n        <slot></slot>\n        <div class=\"n-tooltip-shortcut\" ?hidden=${this.shortcutSlot.isEmpty}>\n          <slot class=\"n-tooltip-key\" name=\"shortcut\"></slot>\n        </div>\n      </div>\n    `\n  }\n\n  @observe(\"id\")\n  protected handleIdChange() {\n    if (!this.id) {\n      // eslint-disable-next-line no-console\n      console.warn(\"NORD: The tooltip requires an id attribute and value\")\n    }\n  }\n\n  @observe(\"state\")\n  private handleStateChange(prevState: TooltipStates) {\n    switch (this.state) {\n      case \"hidden\": {\n        if (prevState === \"waiting\" && this.timeoutId) {\n          clearTimeout(this.timeoutId)\n        }\n\n        this.removeDescribedBy()\n        this.currentElement = undefined\n        this.style.visibility = \"hidden\"\n        this.style.opacity = \"0\"\n        break\n      }\n\n      case \"visible\": {\n        this.timeoutId = undefined\n        Tooltip.lastOpened = this\n        this.addDescribedBy()\n\n        const [x, y] = this.coords\n\n        // use physical properties here since floating-ui\n        // works exclusively in physical dimensions\n        // we do all the mapping in logicalToPhysical\n        this.style.left = `${x}px`\n        this.style.top = `${y}px`\n        this.style.visibility = \"visible\"\n        this.style.opacity = \"1\"\n        break\n      }\n\n      case \"waiting\": {\n        this.timeoutId = setTimeout(() => {\n          this.state = transition(this.state, \"timeout\")\n        }, this.delay)\n        break\n      }\n\n      case \"positioning\": {\n        if (Tooltip.lastOpened !== this) {\n          Tooltip.lastOpened?.hideTooltip()\n        }\n\n        if (this.currentElement) {\n          this.updatePosition(this.currentElement)\n        }\n        break\n      }\n    }\n  }\n\n  /**\n   * Setting and updating the position of the tooltip\n   */\n  private updatePosition = (currentElement: HTMLElement) =>\n    computePosition(currentElement, this, {\n      strategy: \"fixed\",\n      placement: logicalToPhysical(this.position),\n      middleware: [\n        offset(8),\n        flip(),\n        shift({\n          padding: 8,\n        }),\n      ],\n    }).then(({ x, y }) => {\n      this.coords = [x, y]\n      this.state = transition(this.state, \"positioned\")\n    })\n\n  private hideTooltip = () => {\n    this.state = transition(this.state, \"hide\")\n  }\n\n  private reposition = () => {\n    this.state = transition(this.state, \"reposition\")\n  }\n\n  private handleShow = (e: Event) => {\n    const target = e.target as FocusableElement\n\n    if (referencesTooltip(target, this)) {\n      this.currentElement = target\n      this.state = transition(this.state, \"show\")\n    }\n  }\n\n  private handleHide = (e: Event) => {\n    if (e.target === this.currentElement) {\n      this.hideTooltip()\n    }\n  }\n\n  private hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === \"Escape\") {\n      this.hideTooltip()\n    }\n  }\n\n  private addDescribedBy = () => {\n    const focusable = this.currentElement?.focusableRef?.value\n\n    if (focusable) {\n      this.proxy.hidden = true\n      this.proxy.id = this.id\n      this.proxy.textContent = this.textContent\n\n      focusable.insertAdjacentElement(\"afterend\", this.proxy)\n      attr.add(focusable, \"aria-describedby\", this.id)\n    }\n  }\n\n  private removeDescribedBy = () => {\n    const focusable = this.currentElement?.focusableRef?.value\n\n    if (focusable) {\n      this.proxy.remove()\n      attr.remove(focusable, \"aria-describedby\", this.id)\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-tooltip\": Tooltip\n  }\n}\n"],"names":["getTokens","element","attr","value","getAttribute","split","setTokens","tokens","setAttribute","join","referencesTooltip","node","tooltip","Boolean","id","nodeType","Node","ELEMENT_NODE","transition","fsm","hidden","show","visible","hide","reposition","waiting","timeout","positioning","positioned","Tooltip","Tooltip_1","LitElement","constructor","this","shortcutSlot","SlotController","events","EventController","proxy","document","createElement","state","coords","position","role","delay","updatePosition","currentElement","computePosition","strategy","placement","logicalToPhysical","middleware","offset","flip","shift","padding","then","x","y","hideTooltip","handleShow","e","target","handleHide","hideOnEscape","key","addDescribedBy","focusable","_b","_a","focusableRef","textContent","insertAdjacentElement","token","includes","concat","attr.add","removeDescribedBy","remove","filter","t","attr.remove","connectedCallback","super","rootNode","getRootNode","listen","window","passive","render","html","isEmpty","handleIdChange","console","warn","handleStateChange","prevState","timeoutId","clearTimeout","undefined","style","visibility","opacity","lastOpened","left","top","setTimeout","styles","componentStyle","__decorate","prototype","property","reflect","type","Number","observe","customElement"],"mappings":"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"}

package/lib/VisuallyHidden.js

@@ -1,2 +1,2 @@
-import{_ as t,n as e}from"./query-assigned-elements-ef860822.js";import{r as i,s as o,$ as r}from"./lit-element-67e6cd99.js";const n=i`:host{all:initial;border:0!important;clip:rect(1px,1px,1px,1px)!important;block-size:1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;inset-block-start:0;inline-size:1px!important}`;let s=class extends o{render(){return r`<slot></slot>`}};s.styles=n,s=t([e("nord-visually-hidden")],s);var l=s;export{l as default};
+import{_ as t,e}from"./query-assigned-elements-e6cbac30.js";import{i,s as o,y as r}from"./lit-element-79bc2e0e.js";const n=i`:host{all:initial;border:0!important;clip:rect(1px,1px,1px,1px)!important;block-size:1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;inset-block-start:0;inline-size:1px!important}`;let s=class extends o{render(){return r`<slot></slot>`}};s.styles=n,s=t([e("nord-visually-hidden")],s);var a=s;export{a as default};
 //# sourceMappingURL=VisuallyHidden.js.map