@nordhealth/components 2.17.1 → 3.0.0

package/lib/Stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.js","sources":["../src/stack/Stack.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Stack.css\"\n\n/**\n * Stack component manages layout of immediate children along the\n * vertical or horizontal axis with optional spacing between each child.\n *\n * @status ready\n * @category structure\n * @slot - The stack content.\n *\n * @cssprop [--n-stack-gap=var(--n-space-m)] - Controls the spacing between items, using our [spacing tokens](/tokens/#space).\n */\n@customElement(\"nord-stack\")\nexport default class Stack extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * The space injected between components.\n   */\n  @property({ reflect: true }) gap: \"none\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" = \"m\"\n\n  /**\n   * The direction of the stack.\n   */\n  @property({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\"\n\n  /**\n   * How to align the child items inside the stack.\n   */\n  @property({ reflect: true, attribute: \"align-items\" }) alignItems?: \"center\" | \"start\" | \"end\" | \"stretch\" = \"stretch\"\n\n  /**\n   * 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":"8gDAgBA,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"}
+{"version":3,"file":"Stack.js","sources":["../src/stack/Stack.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Stack.css\"\n\n/**\n * Stack component manages layout of immediate children along the\n * vertical or horizontal axis with optional spacing between each child.\n *\n * @status ready\n * @category structure\n * @slot - The stack content.\n *\n * @cssprop [--n-stack-gap=var(--n-space-m)] - Controls the spacing between items, using our [spacing tokens](/tokens/#space).\n */\n@customElement(\"nord-stack\")\nexport default class Stack extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * The space injected between components.\n   */\n  @property({ reflect: true }) gap: \"none\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" = \"m\"\n\n  /**\n   * The direction of the stack.\n   */\n  @property({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\"\n\n  /**\n   * How to align the child items inside the stack.\n   */\n  @property({ reflect: true, attribute: \"align-items\" }) alignItems?: \"center\" | \"start\" | \"end\" | \"stretch\" = \"stretch\"\n\n  /**\n   * Defines whether the Stack items are forced in a single line\n   * or can be flowed into multiple lines.\n   */\n  @property({ reflect: true, type: Boolean }) wrap = false\n\n  /**\n   * How to justify the child items inside the stack.\n   */\n  @property({ reflect: true, attribute: \"justify-content\" }) justifyContent?:\n    | \"center\"\n    | \"start\"\n    | \"end\"\n    | \"baseline\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\"\n\n  render() {\n    return html`<slot></slot>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-stack\": Stack\n  }\n}\n"],"names":["Stack","LitElement","constructor","this","gap","direction","alignItems","wrap","render","html","styles","componentStyle","style","__decorate","property","reflect","prototype","attribute","type","Boolean","customElement"],"mappings":"g8CAgBA,IAAqBA,EAArB,cAAmCC,EAAnCC,kCAM+BC,KAAGC,IAA4C,IAK/CD,KAASE,UAA8B,WAKbF,KAAUG,WAA4C,UAMjEH,KAAII,MAAG,CAiBpD,CAHCC,SACE,OAAOC,CAAI,eACZ,GArCMT,EAAAU,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA0Df,EAAAgB,UAAA,WAAA,GAKlDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyDf,EAAAgB,UAAA,iBAAA,GAKvBH,EAAA,CAAtDC,EAAS,CAAEC,SAAS,EAAME,UAAW,iBAAgFjB,EAAAgB,UAAA,kBAAA,GAM1EH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMG,KAAMC,WAAuBnB,EAAAgB,UAAA,YAAA,GAKGH,EAAA,CAA1DC,EAAS,CAAEC,SAAS,EAAME,UAAW,qBAOpBjB,EAAAgB,UAAA,sBAAA,GAlCChB,EAAKa,EAAA,CADzBO,EAAc,eACMpB,SAAAA"}

package/lib/Sticky-220280e0.js

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

package/lib/Sticky-220280e0.js.map

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

package/lib/Tab.js

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

package/lib/Tab.js.map

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

package/lib/TabGroup.js

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

package/lib/TabGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabGroup.js","sources":["../src/tab-group/TabGroup.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport stickyStyle from \"../common/styles/Sticky.css\"\nimport style from \"./TabGroup.css\"\nimport Tab from \"../tab/Tab.js\"\n\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\n\nlet tabGroupCount = 1\n\n/**\n * Tab Group allows multiple panels to be contained within a single window,\n * using tabs as a navigational element.\n *\n * @status ready\n * @category navigation\n * @slot - The element which contains the content to be revealed.\n * @slot tab - The element which contains all tabs to reveal tabbed content.\n *\n * @cssprop [--n-tab-group-padding=0] - Controls the padding around the tab group (including the tab list), using our [spacing tokens](/tokens/#space).\n */\n@customElement(\"nord-tab-group\")\nexport default class TabGroup extends LitElement {\n  static styles = [componentStyle, stickyStyle, style]\n\n  private direction = new DirectionController(this)\n\n  private observer?: MutationObserver\n\n  private static observerOptions = {\n    attributes: true,\n    subtree: true,\n    attributeFilter: [\"selected\"],\n    attributeOldValue: true,\n  }\n\n  /**\n   * Unique ID for each tab group component present.\n   */\n  private tabGroupId = `nord-tab-group-${tabGroupCount++}`\n\n  /**\n   * Adds an accessible label to the tab list container.\n   */\n  @property({ reflect: true }) label: string = \"\"\n\n  /**\n   * Controls the padding of the tab group component.\n   */\n  @property({ reflect: true }) padding?: \"m\" | \"l\" | \"none\" = \"m\"\n\n  /**\n   * Whether the tab list sticks to the top of the tab group as you scroll.\n   */\n  @property({ reflect: true, type: Boolean }) sticky: boolean = false\n\n  /**\n   * The current tab node selected in the tab group.\n   */\n  @state() private selectedTab = this.initialSelectedTab\n\n  render() {\n    return html`\n      <div class=\"n-tab-group is-${this.direction.dir}\">\n        <div\n          class=\"n-tab-group-list n-sticky\"\n          role=\"tablist\"\n          aria-label=\"${this.label}\"\n          @click=${this.handleTabChange}\n          @keydown=${this.handleKeydown}\n        >\n          <slot name=\"tab\"></slot>\n        </div>\n        <slot></slot>\n      </div>\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.updateSlots()\n  }\n\n  private updateSlots() {\n    this.setupTabs()\n    this.setupPanels()\n  }\n\n  firstUpdated() {\n    this.observer = new MutationObserver(this.handleMutation)\n    this.observer?.observe(this, TabGroup.observerOptions)\n  }\n\n  /**\n   * If the selected tab is selected programmatically update all the tabs.\n   */\n  private handleMutation = (mutations: MutationRecord[]) => {\n    mutations.forEach(mutation => {\n      if (mutation.attributeName === \"selected\" && mutation.oldValue === null) {\n        const selectedTab = <Tab>mutation.target\n        this.observer?.disconnect()\n        this.updateSelectedTab(selectedTab)\n        this.observer?.observe(this, TabGroup.observerOptions)\n      }\n    })\n  }\n\n  /**\n   * Get the selected tab button, or the first tab button.\n   */\n  private get initialSelectedTab() {\n    return this.querySelector(\"nord-tab[selected]\") || this.querySelector(\"nord-tab\")\n  }\n\n  /**\n   * Apply accessible attributes and values to the tab buttons.\n   */\n  private setupTabs() {\n    const tabs = this.querySelectorAll(\"nord-tab\")\n\n    tabs.forEach((tab, index) => {\n      tab.setAttribute(\"id\", `${this.tabGroupId}-tab-${index + 1}`)\n      tab.setAttribute(\"aria-controls\", `${this.tabGroupId}-panel-${index + 1}`)\n      tab.toggleAttribute(\"selected\", tab === this.selectedTab)\n    })\n  }\n\n  /**\n   * Apply accessible attributes and values to the tab panels.\n   */\n  private setupPanels() {\n    const panels = this.querySelectorAll(\"nord-tab-panel\")\n    const selectedPanelId = this.selectedTab?.getAttribute(\"aria-controls\")\n\n    panels.forEach((panel, index) => {\n      panel.setAttribute(\"id\", `${this.tabGroupId}-panel-${index + 1}`)\n      panel.setAttribute(\"aria-labelledby\", `${this.tabGroupId}-tab-${index + 1}`)\n      panel.setAttribute(\"aria-hidden\", `${panel.getAttribute(\"id\") !== selectedPanelId}`)\n    })\n  }\n\n  private handleTabChange(event: Event) {\n    // Always reset the scroll when a tab is selected.\n    this.scrollTo({ top: 0 })\n\n    /**\n     * Return handler if it's not a tab or if it's already selected\n     */\n    if (!(event.target instanceof Tab) || event.target === this.selectedTab) return\n\n    this.updateSelectedTab(event.target)\n  }\n\n  /**\n   * Get the previous tab button in the tab group\n   */\n  private previousTab(tab: Tab) {\n    const tabs = [...this.querySelectorAll(\"nord-tab\")]\n    const selectedTabIndex = tabs.indexOf(tab)\n    return tabs[selectedTabIndex - 1]\n  }\n\n  /**\n   * Handle keyboard accessible controls.\n   */\n  private handleKeydown(event: KeyboardEvent) {\n    const tab = <Tab>event.target\n\n    const firstTab = <Tab>this.querySelector(\"nord-tab:first-of-type\")\n    const lastTab = <Tab>this.querySelector(\"nord-tab:last-of-type\")\n    const nextTab = <Tab>this.querySelector(`#${tab.getAttribute(\"id\")} ~ nord-tab`) || firstTab\n    const previousTab = <Tab>this.previousTab(tab) || lastTab\n\n    const updateTab = (selectedTab: Tab, keyEvent: Event) => {\n      keyEvent.preventDefault()\n\n      // Always reset the scroll when a tab is selected.\n      this.scrollTo({ top: 0 })\n      this.updateSelectedTab(selectedTab)\n    }\n\n    switch (event.key) {\n      case \"ArrowLeft\":\n      case \"ArrowUp\":\n        updateTab(this.direction.isLTR ? previousTab : nextTab, event)\n        break\n\n      case \"ArrowRight\":\n      case \"ArrowDown\":\n        updateTab(this.direction.isLTR ? nextTab : previousTab, event)\n        break\n\n      case \"Home\":\n        updateTab(firstTab, event)\n        break\n\n      case \"End\":\n        updateTab(lastTab, event)\n        break\n\n      default:\n        break\n    }\n  }\n\n  /**\n   * Update the selected tab button with attributes and values.\n   * Update the tab group state.\n   */\n  private updateSelectedTab(selectedTab: Tab) {\n    const selectedPanel = this.querySelector(`#${selectedTab.getAttribute(\"aria-controls\")}`)\n\n    if (selectedTab === this.selectedTab) return\n\n    /**\n     * Reset all the selected state of the tabs, and select the clicked tab\n     */\n    this.querySelectorAll(\"nord-tab\").forEach(tab => {\n      tab.removeAttribute(\"selected\")\n      if (tab === selectedTab) {\n        tab.setAttribute(\"selected\", \"\")\n        tab.focus()\n        tab.scrollIntoView({ block: \"nearest\", inline: \"nearest\" })\n        this.selectedTab = tab\n      }\n    })\n\n    /**\n     * Reset all the visibility of the panels,\n     * and show the panel related to the selected tab\n     */\n    this.querySelectorAll(\"nord-tab-panel\").forEach(panel => {\n      panel.setAttribute(\"aria-hidden\", `${panel !== selectedPanel}`)\n    })\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-tab-group\": TabGroup\n  }\n}\n"],"names":["tabGroupCount","TabGroup","TabGroup_1","LitElement","constructor","this","direction","DirectionController","tabGroupId","label","padding","sticky","selectedTab","initialSelectedTab","handleMutation","mutations","forEach","mutation","attributeName","oldValue","target","_a","observer","disconnect","updateSelectedTab","_b","observe","observerOptions","render","html","dir","handleTabChange","handleKeydown","connectedCallback","super","updateSlots","setupTabs","setupPanels","firstUpdated","MutationObserver","querySelector","querySelectorAll","tab","index","setAttribute","toggleAttribute","panels","selectedPanelId","getAttribute","panel","event","scrollTo","top","Tab","previousTab","tabs","selectedTabIndex","indexOf","firstTab","lastTab","nextTab","updateTab","keyEvent","preventDefault","key","isLTR","selectedPanel","removeAttribute","focus","scrollIntoView","block","inline","styles","componentStyle","stickyStyle","style","attributes","subtree","attributeFilter","attributeOldValue","__decorate","property","reflect","prototype","type","Boolean","state","customElement"],"mappings":"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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 stickyStyle from \"../common/styles/Sticky.css\"\nimport style from \"./TabGroup.css\"\nimport Tab from \"../tab/Tab.js\"\n\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\n\nlet tabGroupCount = 1\n\n/**\n * Tab Group allows multiple panels to be contained within a single window,\n * using tabs as a navigational element.\n *\n * @status ready\n * @category navigation\n * @slot - The element which contains the content to be revealed.\n * @slot tab - The element which contains all tabs to reveal tabbed content.\n *\n * @cssprop [--n-tab-group-padding=0] - Controls the padding around the tab group (including the tab list), using our [spacing tokens](/tokens/#space).\n */\n@customElement(\"nord-tab-group\")\nexport default class TabGroup extends LitElement {\n  static styles = [componentStyle, stickyStyle, style]\n\n  private direction = new DirectionController(this)\n\n  private observer?: MutationObserver\n\n  private static observerOptions = {\n    attributes: true,\n    subtree: true,\n    attributeFilter: [\"selected\"],\n    attributeOldValue: true,\n  }\n\n  /**\n   * Unique ID for each tab group component present.\n   */\n  private tabGroupId = `nord-tab-group-${tabGroupCount++}`\n\n  /**\n   * Adds an accessible label to the tab list container.\n   */\n  @property({ reflect: true }) label: string = \"\"\n\n  /**\n   * Controls the padding of the tab group component.\n   */\n  @property({ reflect: true }) padding?: \"m\" | \"l\" | \"none\" = \"m\"\n\n  /**\n   * Whether the tab list sticks to the top of the tab group as you scroll.\n   */\n  @property({ reflect: true, type: Boolean }) sticky: boolean = false\n\n  /**\n   * The current tab node selected in the tab group.\n   */\n  @state() private selectedTab = this.initialSelectedTab\n\n  render() {\n    return html`\n      <div class=\"n-tab-group is-${this.direction.dir}\">\n        <div\n          class=\"n-tab-group-list n-sticky\"\n          role=\"tablist\"\n          aria-label=\"${this.label}\"\n          @click=${this.handleTabChange}\n          @keydown=${this.handleKeydown}\n        >\n          <slot name=\"tab\"></slot>\n        </div>\n        <slot></slot>\n      </div>\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.updateSlots()\n  }\n\n  private updateSlots() {\n    this.setupTabs()\n    this.setupPanels()\n  }\n\n  firstUpdated() {\n    this.observer = new MutationObserver(this.handleMutation)\n    this.observer?.observe(this, TabGroup.observerOptions)\n  }\n\n  /**\n   * If the selected tab is selected programmatically update all the tabs.\n   */\n  private handleMutation = (mutations: MutationRecord[]) => {\n    mutations.forEach(mutation => {\n      if (mutation.attributeName === \"selected\" && mutation.oldValue === null) {\n        const selectedTab = <Tab>mutation.target\n        this.observer?.disconnect()\n        this.updateSelectedTab(selectedTab)\n        this.observer?.observe(this, TabGroup.observerOptions)\n      }\n    })\n  }\n\n  /**\n   * Get the selected tab button, or the first tab button.\n   */\n  private get initialSelectedTab() {\n    return this.querySelector(\"nord-tab[selected]\") || this.querySelector(\"nord-tab\")\n  }\n\n  /**\n   * Apply accessible attributes and values to the tab buttons.\n   */\n  private setupTabs() {\n    const tabs = this.querySelectorAll(\"nord-tab\")\n\n    tabs.forEach((tab, index) => {\n      tab.setAttribute(\"id\", `${this.tabGroupId}-tab-${index + 1}`)\n      tab.setAttribute(\"aria-controls\", `${this.tabGroupId}-panel-${index + 1}`)\n      tab.toggleAttribute(\"selected\", tab === this.selectedTab)\n    })\n  }\n\n  /**\n   * Apply accessible attributes and values to the tab panels.\n   */\n  private setupPanels() {\n    const panels = this.querySelectorAll(\"nord-tab-panel\")\n    const selectedPanelId = this.selectedTab?.getAttribute(\"aria-controls\")\n\n    panels.forEach((panel, index) => {\n      panel.setAttribute(\"id\", `${this.tabGroupId}-panel-${index + 1}`)\n      panel.setAttribute(\"aria-labelledby\", `${this.tabGroupId}-tab-${index + 1}`)\n      panel.setAttribute(\"aria-hidden\", `${panel.getAttribute(\"id\") !== selectedPanelId}`)\n    })\n  }\n\n  private handleTabChange(event: Event) {\n    // Always reset the scroll when a tab is selected.\n    this.scrollTo({ top: 0 })\n\n    /**\n     * Return handler if it's not a tab or if it's already selected\n     */\n    if (!(event.target instanceof Tab) || event.target === this.selectedTab) return\n\n    this.updateSelectedTab(event.target)\n  }\n\n  /**\n   * Get the previous tab button in the tab group\n   */\n  private previousTab(tab: Tab) {\n    const tabs = [...this.querySelectorAll(\"nord-tab\")]\n    const selectedTabIndex = tabs.indexOf(tab)\n    return tabs[selectedTabIndex - 1]\n  }\n\n  /**\n   * Handle keyboard accessible controls.\n   */\n  private handleKeydown(event: KeyboardEvent) {\n    const tab = <Tab>event.target\n\n    const firstTab = <Tab>this.querySelector(\"nord-tab:first-of-type\")\n    const lastTab = <Tab>this.querySelector(\"nord-tab:last-of-type\")\n    const nextTab = <Tab>this.querySelector(`#${tab.getAttribute(\"id\")} ~ nord-tab`) || firstTab\n    const previousTab = <Tab>this.previousTab(tab) || lastTab\n\n    const updateTab = (selectedTab: Tab, keyEvent: Event) => {\n      keyEvent.preventDefault()\n\n      // Always reset the scroll when a tab is selected.\n      this.scrollTo({ top: 0 })\n      this.updateSelectedTab(selectedTab)\n    }\n\n    switch (event.key) {\n      case \"ArrowLeft\":\n      case \"ArrowUp\":\n        updateTab(this.direction.isLTR ? previousTab : nextTab, event)\n        break\n\n      case \"ArrowRight\":\n      case \"ArrowDown\":\n        updateTab(this.direction.isLTR ? nextTab : previousTab, event)\n        break\n\n      case \"Home\":\n        updateTab(firstTab, event)\n        break\n\n      case \"End\":\n        updateTab(lastTab, event)\n        break\n\n      default:\n        break\n    }\n  }\n\n  /**\n   * Update the selected tab button with attributes and values.\n   * Update the tab group state.\n   */\n  private updateSelectedTab(selectedTab: Tab) {\n    const selectedPanel = this.querySelector(`#${selectedTab.getAttribute(\"aria-controls\")}`)\n\n    if (selectedTab === this.selectedTab) return\n\n    /**\n     * Reset all the selected state of the tabs, and select the clicked tab\n     */\n    this.querySelectorAll(\"nord-tab\").forEach(tab => {\n      tab.removeAttribute(\"selected\")\n      if (tab === selectedTab) {\n        tab.setAttribute(\"selected\", \"\")\n        tab.focus()\n        tab.scrollIntoView({ block: \"nearest\", inline: \"nearest\" })\n        this.selectedTab = tab\n      }\n    })\n\n    /**\n     * Reset all the visibility of the panels,\n     * and show the panel related to the selected tab\n     */\n    this.querySelectorAll(\"nord-tab-panel\").forEach(panel => {\n      panel.setAttribute(\"aria-hidden\", `${panel !== selectedPanel}`)\n    })\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-tab-group\": TabGroup\n  }\n}\n"],"names":["tabGroupCount","TabGroup","TabGroup_1","LitElement","constructor","this","direction","DirectionController","tabGroupId","label","padding","sticky","selectedTab","initialSelectedTab","handleMutation","mutations","forEach","mutation","attributeName","oldValue","target","_a","observer","disconnect","updateSelectedTab","_b","observe","observerOptions","render","html","dir","handleTabChange","handleKeydown","connectedCallback","super","updateSlots","setupTabs","setupPanels","firstUpdated","MutationObserver","querySelector","querySelectorAll","tab","index","setAttribute","toggleAttribute","panels","selectedPanelId","getAttribute","panel","event","scrollTo","top","Tab","previousTab","tabs","selectedTabIndex","indexOf","firstTab","lastTab","nextTab","updateTab","keyEvent","preventDefault","key","isLTR","selectedPanel","removeAttribute","focus","scrollIntoView","block","inline","styles","componentStyle","stickyStyle","style","attributes","subtree","attributeFilter","attributeOldValue","__decorate","property","reflect","prototype","type","Boolean","state","customElement"],"mappings":"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"}

package/lib/TabPanel.js

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

package/lib/Table.js

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

package/lib/{TextField-d617d0ad.js → TextField-c2e49b85.js}

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

package/lib/{TextField-d617d0ad.js.map → TextField-c2e49b85.js.map}

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

package/lib/Textarea.js

@@ -1,2 +1,2 @@
-import{i as e,x as r,A as t,_ as n,e as o,s as a}from"./query-assigned-elements-15485e3d.js";import{e as i}from"./property-03f59dce.js";import{l as s}from"./if-defined-9b177db4.js";import{n as l}from"./ref-5526fb07.js";import{o as c}from"./observe-a9c6dfb6.js";import{F as d}from"./FocusableMixin-4300e44e.js";import{F as p}from"./FormAssociatedMixin-edf83ac6.js";import{I as u}from"./InputMixin-4037827f.js";import{R as h,s as v}from"./TextField-d617d0ad.js";import{A as m}from"./AutocompleteMixin-3cf61f49.js";import{S as b}from"./SizeMixin-fb379434.js";import{s as x}from"./Component-420bbc41.js";import{s as f}from"./FormField-cbfebb3f.js";import{LocalizeController as g}from"./LocalizeController.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-d733c575.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";const y=e`:host{--_n-textarea-inline-size:var(--n-textarea-inline-size, 240px);--_n-textarea-block-size:var(--n-textarea-block-size, 76px);--_n-input-background:var(--n-textarea-background, var(--n-color-active));--_n-input-color:var(--n-textarea-color, var(--n-color-text));--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-border-strong));--_n-input-border-radius:var(--n-textarea-border-radius, var(--n-border-radius-s))}.n-input-container{position:relative;inline-size:var(--_n-textarea-inline-size)}.n-input{min-block-size:var(--_n-textarea-block-size);transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly);display:block;resize:vertical}:host([resize=auto]) .n-input{resize:none;overflow:hidden}:host([expand]){--_n-textarea-inline-size:100%}.n-character-counter{margin-block-start:var(--n-space-xs);color:var(--n-color-text-weaker)}.n-input:hover,.n-label-container:hover+.n-input-container .n-input{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-border-hover))}.n-input:focus{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-accent));--_n-input-background:var(--n-textarea-background, var(--n-color-surface))}.n-input[aria-invalid=true]{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-status-danger))!important}.n-input:disabled,.n-input[readonly],.n-label-container:hover+.n-input-container .n-input:disabled,.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-active));--_n-input-color:var(--n-textarea-color, var(--n-color-text-weakest))}.n-input[readonly],.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-color:var(--n-textarea-color, var(--n-color-text-weak))}.n-input[readonly]:focus{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-accent))}`;let z=class extends(b(p(m(h(u(d(a))))))){constructor(){super(...arguments),this.inputId="textarea",this.localize=new g(this,{onLangChange:()=>this.handleLangChange()}),this.resize="vertical",this.expand=!1,this.characterCounter=!1}render(){var e;return r`${this.renderLabel()}<div class="n-input-container"><textarea ${l(this.focusableRef)} id="${this.inputId}" class="n-input" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" name="${s(this.name)}" maxlength="${s(this.maxLength)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${s(this.placeholder)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" autocomplete="${this.autocomplete}"></textarea> ${this.characterCounter?this.renderCharacterCounter():t}</div>${this.renderError()}`}renderCharacterCounter(){const{value:e,maxLength:t}=this,n="string"==typeof e?this.lengthMeasurer(e):0,o=t?t-n:null,a=t?`${n}/${t}`:n;return r`<nord-visually-hidden aria-live="polite" aria-atomic="true">${null!=o&&o<=10?this.localize.term("remainingCharacters",o):""}</nord-visually-hidden><div class="n-character-counter">${a}</div>`}handleLangChange(){const e=this.localize.resolvedLang;this.lengthMeasurer=function(e){if(Intl.Segmenter){const r=new Intl.Segmenter(e);return e=>[...r.segment(e)].length}return e=>e.length}(e)}resizeToFitContent(){const e=this.focusableRef.value;e&&("auto"===this.resize?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height="")}};z.styles=[x,f,v,y],n([i({reflect:!0})],z.prototype,"resize",void 0),n([i({reflect:!0,type:Boolean})],z.prototype,"expand",void 0),n([i({attribute:"maxlength",type:Number})],z.prototype,"maxLength",void 0),n([i({type:Boolean,attribute:"character-counter"})],z.prototype,"characterCounter",void 0),n([c("resize","updated"),c("value","updated")],z.prototype,"resizeToFitContent",null),z=n([o("nord-textarea")],z);var j=z;export{j as default};
+import{i as e,x as r,A as t,_ as n,e as o,s as a}from"./query-assigned-elements-2f8275b7.js";import{e as i}from"./property-03f59dce.js";import{l as s}from"./if-defined-10508457.js";import{n as l}from"./ref-f75a30b7.js";import{o as c}from"./observe-a9c6dfb6.js";import{F as d}from"./FocusableMixin-003e1094.js";import{F as p}from"./FormAssociatedMixin-895cf600.js";import{I as u}from"./InputMixin-e15dd8f7.js";import{R as h,s as v}from"./TextField-c2e49b85.js";import{A as m}from"./AutocompleteMixin-60503685.js";import{S as b}from"./SizeMixin-bc2098f4.js";import{s as x}from"./Component-253ecb24.js";import{s as f}from"./FormField-0783cb5a.js";import{LocalizeController as g}from"./LocalizeController.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-d733c575.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";const y=e`:host{--_n-textarea-inline-size:var(--n-textarea-inline-size, 240px);--_n-textarea-block-size:var(--n-textarea-block-size, 76px);--_n-input-background:var(--n-textarea-background, var(--n-color-active));--_n-input-color:var(--n-textarea-color, var(--n-color-text));--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-border-strong));--_n-input-border-radius:var(--n-textarea-border-radius, var(--n-border-radius-s))}.n-input-container{position:relative;inline-size:var(--_n-textarea-inline-size)}.n-input{min-block-size:var(--_n-textarea-block-size);transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly);display:block;resize:vertical}:host([resize=auto]) .n-input{resize:none;overflow:hidden}:host([expand]){--_n-textarea-inline-size:100%}.n-character-counter{margin-block-start:var(--n-space-xs);color:var(--n-color-text-weaker)}.n-input:hover,.n-label-container:hover+.n-input-container .n-input{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-border-hover))}.n-input:focus{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-accent));--_n-input-background:var(--n-textarea-background, var(--n-color-surface))}.n-input[aria-invalid=true]{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-status-danger))!important}.n-input:disabled,.n-input[readonly],.n-label-container:hover+.n-input-container .n-input:disabled,.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-active));--_n-input-color:var(--n-textarea-color, var(--n-color-text-weakest))}.n-input[readonly],.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-color:var(--n-textarea-color, var(--n-color-text-weak))}.n-input[readonly]:focus{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-accent))}`;let z=class extends(b(p(m(h(u(d(a))))))){constructor(){super(...arguments),this.inputId="textarea",this.localize=new g(this,{onLangChange:()=>this.handleLangChange()}),this.resize="vertical",this.expand=!1,this.characterCounter=!1}render(){var e;return r`${this.renderLabel()}<div class="n-input-container"><textarea ${l(this.focusableRef)} id="${this.inputId}" class="n-input" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" name="${s(this.name)}" maxlength="${s(this.maxLength)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${s(this.placeholder)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" autocomplete="${this.autocomplete}"></textarea> ${this.characterCounter?this.renderCharacterCounter():t}</div>${this.renderError()}`}renderCharacterCounter(){const{value:e,maxLength:t}=this,n="string"==typeof e?this.lengthMeasurer(e):0,o=t?t-n:null,a=t?`${n}/${t}`:n;return r`<nord-visually-hidden aria-live="polite" aria-atomic="true">${null!=o&&o<=10?this.localize.term("remainingCharacters",o):""}</nord-visually-hidden><div class="n-character-counter">${a}</div>`}handleLangChange(){const e=this.localize.resolvedLang;this.lengthMeasurer=function(e){if(Intl.Segmenter){const r=new Intl.Segmenter(e);return e=>[...r.segment(e)].length}return e=>e.length}(e)}resizeToFitContent(){const e=this.focusableRef.value;e&&("auto"===this.resize?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height="")}};z.styles=[x,f,v,y],n([i({reflect:!0})],z.prototype,"resize",void 0),n([i({reflect:!0,type:Boolean})],z.prototype,"expand",void 0),n([i({attribute:"maxlength",type:Number})],z.prototype,"maxLength",void 0),n([i({type:Boolean,attribute:"character-counter"})],z.prototype,"characterCounter",void 0),n([c("resize","updated"),c("value","updated")],z.prototype,"resizeToFitContent",null),z=n([o("nord-textarea")],z);var j=z;export{j as default};
 //# sourceMappingURL=Textarea.js.map

package/lib/Textarea.js.map

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

package/lib/Toast.js

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

package/lib/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../icons/lib/assets/interface-close.js","../src/toast/Toast.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.41 10 8.29 8.29-1.41 1.41-8.29-8.29-8.28996 8.3-1.410001-1.41 8.290001-8.3-8.300001-8.28996 1.420001-1.420001 8.28996 8.300001 8.29-8.300001 1.41 1.410001z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-close\"\nexport const tags = \"nordicon interface close cross remove delete erase symbol\"\n","import { LitElement, html } from \"lit\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close.js\"\nimport { ref } from \"lit/directives/ref.js\"\n\nimport { NotificationMixin } from \"../common/mixins/NotificationMixin.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport Icon from \"../icon/Icon.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Toast.css\"\n\nIcon.registerIcon(closeIcon)\n\n/**\n * Toasts are non-disruptive messages that appear in the interface\n * to provide quick, at-a-glance feedback on the outcome of an action.\n *\n * @status ready\n * @category feedback\n * @slot - Default slot used for the toast text/message.\n * @fires dismiss - Fired when the toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.\n */\n@customElement(\"nord-toast\")\nexport default class Toast extends NotificationMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private timeoutId?: ReturnType<typeof setTimeout>\n\n  /**\n   * The style variant of the toast.\n   */\n  @property({ reflect: true }) variant: \"default\" | \"danger\" = \"default\"\n\n  /**\n   * Timeout in milliseconds before the toast is automatically dismissed.\n   */\n  @property({ type: Number, attribute: \"auto-dismiss\" }) autoDismiss? = 10000\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    clearTimeout(this.timeoutId)\n  }\n\n  /**\n   * Programmatically dismiss the toast.\n   * The returned promise resolves when toast's exit animation is complete.\n   */\n  async dismiss() {\n    clearTimeout(this.timeoutId)\n    return super.dismiss()\n  }\n\n  render() {\n    return html`\n      <div ${ref(this.notificationRef)} class=${classMap({ \"n-toast\": true, \"n-dismissed\": this.dismissed })}>\n        <div class=\"n-toast-inner\">\n          <slot></slot>\n        </div>\n\n        <button class=\"n-dismiss\" @click=${this.dismiss} aria-hidden=\"true\">\n          <nord-icon name=\"interface-close\" size=\"s\"></nord-icon>\n        </button>\n      </div>\n    `\n  }\n\n  @observe(\"autoDismiss\")\n  protected handleAutoDismissChange() {\n    clearTimeout(this.timeoutId)\n\n    if (this.autoDismiss != null && this.autoDismiss >= 0) {\n      setTimeout(() => this.dismiss(), this.autoDismiss)\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-toast\": Toast\n  }\n}\n"],"names":["Icon","registerIcon","closeIcon","Toast","NotificationMixin","LitElement","constructor","this","variant","autoDismiss","disconnectedCallback","super","clearTimeout","timeoutId","async","dismiss","render","html","ref","notificationRef","classMap","dismissed","handleAutoDismissChange","setTimeout","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Number","attribute","observe","customElement"],"mappings":"2kBAAe,0QACM,uBACD,g2DCUpBA,EAAKC,aAAaC,GAYlB,IAAqBC,EAArB,cAAmCC,EAAkBC,IAArDC,kCAQ+BC,KAAOC,QAAyB,UAKND,KAAWE,YAAI,GAsCvE,CApCCC,uBACEC,MAAMD,uBACNE,aAAaL,KAAKM,UACnB,CAMDC,gBAEE,OADAF,aAAaL,KAAKM,WACXF,MAAMI,SACd,CAEDC,SACE,OAAOC,CAAI,QACFC,EAAIX,KAAKY,2BAA0BC,EAAS,CAAE,WAAW,EAAM,cAAeb,KAAKc,gGAKrDd,KAAKQ,oGAK7C,CAGSO,0BACRV,aAAaL,KAAKM,WAEM,MAApBN,KAAKE,aAAuBF,KAAKE,aAAe,GAClDc,YAAW,IAAMhB,KAAKQ,WAAWR,KAAKE,YAEzC,GAjDMN,EAAAqB,OAAS,CAACC,EAAgBC,GAOJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAiD1B,EAAA2B,UAAA,eAAA,GAKfH,EAAA,CAAtDC,EAAS,CAAEG,KAAMC,OAAQC,UAAW,kBAAsC9B,EAAA2B,UAAA,mBAAA,GA+B3EH,EAAA,CADCO,EAAQ,gBAOR/B,EAAA2B,UAAA,0BAAA,MAlDkB3B,EAAKwB,EAAA,CADzBQ,EAAc,eACMhC,SAAAA"}
+{"version":3,"file":"Toast.js","sources":["../../icons/lib/assets/interface-close.js","../src/toast/Toast.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.41 10 8.29 8.29-1.41 1.41-8.29-8.29-8.28996 8.3-1.410001-1.41 8.290001-8.3-8.300001-8.28996 1.420001-1.420001 8.28996 8.300001 8.29-8.300001 1.41 1.410001z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-close\"\nexport const tags = \"nordicon interface close cross remove delete erase symbol\"\n","import { LitElement, html } from \"lit\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close.js\"\nimport { ref } from \"lit/directives/ref.js\"\n\nimport { NotificationMixin } from \"../common/mixins/NotificationMixin.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport Icon from \"../icon/Icon.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Toast.css\"\n\nIcon.registerIcon(closeIcon)\n\n/**\n * Toasts are non-disruptive messages that appear in the interface\n * to provide quick, at-a-glance feedback on the outcome of an action.\n *\n * @status ready\n * @category feedback\n * @slot - Default slot used for the toast text/message.\n * @fires dismiss - Fired when the toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.\n */\n@customElement(\"nord-toast\")\nexport default class Toast extends NotificationMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private timeoutId?: ReturnType<typeof setTimeout>\n\n  /**\n   * The style variant of the toast.\n   */\n  @property({ reflect: true }) variant: \"default\" | \"danger\" = \"default\"\n\n  /**\n   * Timeout in milliseconds before the toast is automatically dismissed.\n   */\n  @property({ type: Number, attribute: \"auto-dismiss\" }) autoDismiss? = 10000\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    clearTimeout(this.timeoutId)\n  }\n\n  /**\n   * Programmatically dismiss the toast.\n   * The returned promise resolves when toast's exit animation is complete.\n   */\n  async dismiss() {\n    clearTimeout(this.timeoutId)\n    return super.dismiss()\n  }\n\n  render() {\n    return html`\n      <div ${ref(this.notificationRef)} class=${classMap({ \"n-toast\": true, \"n-dismissed\": this.dismissed })}>\n        <div class=\"n-toast-inner\">\n          <slot></slot>\n        </div>\n\n        <button class=\"n-dismiss\" @click=${this.dismiss} aria-hidden=\"true\">\n          <nord-icon name=\"interface-close\" size=\"s\"></nord-icon>\n        </button>\n      </div>\n    `\n  }\n\n  @observe(\"autoDismiss\")\n  protected handleAutoDismissChange() {\n    clearTimeout(this.timeoutId)\n\n    if (this.autoDismiss != null && this.autoDismiss >= 0) {\n      setTimeout(() => this.dismiss(), this.autoDismiss)\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-toast\": Toast\n  }\n}\n"],"names":["Icon","registerIcon","closeIcon","Toast","NotificationMixin","LitElement","constructor","this","variant","autoDismiss","disconnectedCallback","super","clearTimeout","timeoutId","async","dismiss","render","html","ref","notificationRef","classMap","dismissed","handleAutoDismissChange","setTimeout","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Number","attribute","observe","customElement"],"mappings":"2kBAAe,0QACM,uBACD,g2DCUpBA,EAAKC,aAAaC,GAYlB,IAAqBC,EAArB,cAAmCC,EAAkBC,IAArDC,kCAQ+BC,KAAOC,QAAyB,UAKND,KAAWE,YAAI,GAsCvE,CApCCC,uBACEC,MAAMD,uBACNE,aAAaL,KAAKM,UACnB,CAMDC,gBAEE,OADAF,aAAaL,KAAKM,WACXF,MAAMI,SACd,CAEDC,SACE,OAAOC,CAAI,QACFC,EAAIX,KAAKY,2BAA0BC,EAAS,CAAE,WAAW,EAAM,cAAeb,KAAKc,gGAKrDd,KAAKQ,oGAK7C,CAGSO,0BACRV,aAAaL,KAAKM,WAEM,MAApBN,KAAKE,aAAuBF,KAAKE,aAAe,GAClDc,YAAW,IAAMhB,KAAKQ,WAAWR,KAAKE,YAEzC,GAjDMN,EAAAqB,OAAS,CAACC,EAAgBC,GAOJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAiD1B,EAAA2B,UAAA,eAAA,GAKfH,EAAA,CAAtDC,EAAS,CAAEG,KAAMC,OAAQC,UAAW,kBAAsC9B,EAAA2B,UAAA,mBAAA,GA+BjEH,EAAA,CADTO,EAAQ,gBAOR/B,EAAA2B,UAAA,0BAAA,MAlDkB3B,EAAKwB,EAAA,CADzBQ,EAAc,eACMhC,SAAAA"}

package/lib/ToastGroup.js

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

package/lib/Toggle.js

@@ -1,2 +1,2 @@
-import{i as e,x as n,_ as i,e as r,s as t}from"./query-assigned-elements-15485e3d.js";import{e as o}from"./property-03f59dce.js";import{l as s}from"./if-defined-9b177db4.js";import{n as a}from"./ref-5526fb07.js";import{F as l}from"./FocusableMixin-4300e44e.js";import{F as c}from"./FormAssociatedMixin-edf83ac6.js";import{I as d}from"./InputMixin-4037827f.js";import{s as g}from"./Component-420bbc41.js";import{s as p}from"./FormField-cbfebb3f.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-d733c575.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";const h=e`:host{--_n-toggle-block-size:calc(var(--_n-toggle-inline-size) / 1.6);--_n-toggle-inline-size:3.2143em;--_n-toggle-thumb-margin:0.35em;display:inline-block;font-size:var(--n-font-size-m)}.n-flex{display:flex}.n-expand{flex:1;display:flex;justify-content:center;align-items:flex-start;flex-direction:column;min-block-size:100%}.n-input-container{position:relative}.n-toggle{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;inline-size:var(--_n-toggle-inline-size);block-size:var(--_n-toggle-block-size);border-radius:var(--n-border-radius-pill);background:var(--_n-toggle-background,var(--n-color-border-strong));cursor:pointer;transition:background var(--n-transition-slowly);font-size:var(--_n-toggle-size,var(--n-font-size-m))}.n-toggle::before{content:"";display:block;aspect-ratio:1/1;block-size:calc(100% - 2 * var(--_n-toggle-thumb-margin));background:var(--n-color-text-on-accent);border-radius:var(--n-border-radius-circle);transition:margin;transition-duration:inherit;margin-inline-start:var(--_n-toggle-thumb-margin);box-shadow:var(--n-box-shadow)}input:checked{--_n-toggle-background:var(--n-color-text-link)}input:checked::before{margin-inline-start:calc(var(--_n-toggle-inline-size) - var(--_n-toggle-block-size) + var(--_n-toggle-thumb-margin))}input:checked[aria-invalid]{--_n-toggle-background:var(--n-color-status-danger)}input:focus{outline:0;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{opacity:.3;cursor:not-allowed}.n-label-container{margin-block-end:0}label{-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:var(--n-space-xs);padding-inline-start:var(--n-space-s)}:host([reverse]) .n-error,:host([reverse]) .n-hint,:host([reverse]) label{padding-inline-start:0;padding-inline-end:var(--n-space-s)}:host([size="s"]) .n-toggle{--_n-toggle-size:var(--n-font-size-xs)}:host([size="l"]) .n-toggle{--_n-toggle-size:var(--n-font-size-xl)}`;let v=class extends(c(d(l(t)))){constructor(){super(...arguments),this.checked=!1,this.reverse=!1,this.size="m"}get formValue(){return this.checked?this.value||"on":void 0}render(){const e=n`<div class="n-expand">${this.renderLabel()} ${this.renderError()}</div>`,i=n`<div class="n-input-container"><input ${a(this.focusableRef)} class="n-toggle" id="${this.inputId}" type="checkbox" role="switch" name="${s(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" @change="${this.handleChange}"></div>`;return n`<div class="n-flex">${this.reverse?[e,i]:[i,e]}</div>`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};v.styles=[g,p,h],i([o({type:Boolean})],v.prototype,"checked",void 0),i([o({type:Boolean})],v.prototype,"reverse",void 0),i([o({reflect:!0})],v.prototype,"size",void 0),v=i([r("nord-toggle")],v);var b=v;export{b as default};
+import{i as e,x as n,_ as i,e as r,s as t}from"./query-assigned-elements-2f8275b7.js";import{e as o}from"./property-03f59dce.js";import{l as s}from"./if-defined-10508457.js";import{n as a}from"./ref-f75a30b7.js";import{F as l}from"./FocusableMixin-003e1094.js";import{F as c}from"./FormAssociatedMixin-895cf600.js";import{I as d}from"./InputMixin-e15dd8f7.js";import{s as g}from"./Component-253ecb24.js";import{s as p}from"./FormField-0783cb5a.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-d733c575.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";const h=e`:host{--_n-toggle-block-size:calc(var(--_n-toggle-inline-size) / 1.6);--_n-toggle-inline-size:3.2143em;--_n-toggle-thumb-margin:0.35em;display:inline-block;font-size:var(--n-font-size-m)}.n-flex{display:flex}.n-expand{flex:1;display:flex;justify-content:center;align-items:flex-start;flex-direction:column;min-block-size:100%}.n-input-container{position:relative}.n-toggle{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;inline-size:var(--_n-toggle-inline-size);block-size:var(--_n-toggle-block-size);border-radius:var(--n-border-radius-pill);background:var(--_n-toggle-background,var(--n-color-border-strong));cursor:pointer;transition:background var(--n-transition-slowly);font-size:var(--_n-toggle-size,var(--n-font-size-m))}.n-toggle::before{content:"";display:block;aspect-ratio:1/1;block-size:calc(100% - 2 * var(--_n-toggle-thumb-margin));background:var(--n-color-text-on-accent);border-radius:var(--n-border-radius-circle);transition:margin;transition-duration:inherit;margin-inline-start:var(--_n-toggle-thumb-margin);box-shadow:var(--n-box-shadow)}input:checked{--_n-toggle-background:var(--n-color-text-link)}input:checked::before{margin-inline-start:calc(var(--_n-toggle-inline-size) - var(--_n-toggle-block-size) + var(--_n-toggle-thumb-margin))}input:checked[aria-invalid]{--_n-toggle-background:var(--n-color-status-danger)}input:focus{outline:0;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{opacity:.3;cursor:not-allowed}.n-label-container{margin-block-end:0}label{-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:var(--n-space-xs);padding-inline-start:var(--n-space-s)}:host([reverse]) .n-error,:host([reverse]) .n-hint,:host([reverse]) label{padding-inline-start:0;padding-inline-end:var(--n-space-s)}:host([size="s"]) .n-toggle{--_n-toggle-size:var(--n-font-size-xs)}:host([size="l"]) .n-toggle{--_n-toggle-size:var(--n-font-size-xl)}`;let v=class extends(c(d(l(t)))){constructor(){super(...arguments),this.checked=!1,this.reverse=!1,this.size="m"}get formValue(){return this.checked?this.value||"on":void 0}render(){const e=n`<div class="n-expand">${this.renderLabel()} ${this.renderError()}</div>`,i=n`<div class="n-input-container"><input ${a(this.focusableRef)} class="n-toggle" id="${this.inputId}" type="checkbox" role="switch" name="${s(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" @change="${this.handleChange}"></div>`;return n`<div class="n-flex">${this.reverse?[e,i]:[i,e]}</div>`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};v.styles=[g,p,h],i([o({type:Boolean})],v.prototype,"checked",void 0),i([o({type:Boolean})],v.prototype,"reverse",void 0),i([o({reflect:!0})],v.prototype,"size",void 0),v=i([r("nord-toggle")],v);var u=v;export{u as default};
 //# sourceMappingURL=Toggle.js.map

package/lib/Tooltip.js

@@ -1,2 +1,2 @@
-import{i as t,_ as i,s as e,x as s,e as o}from"./query-assigned-elements-15485e3d.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 c}from"./positioning-cc75c800.js";import{S as p}from"./SlotController-d733c575.js";import{s as u}from"./Component-420bbc41.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=t`:host{--_n-tooltip-max-size:var(--n-tooltip-max-size, 50ch);--_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);word-break:break-word;max-inline-size:var(--_n-tooltip-max-size)}.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)}[slot=shortcut]::slotted(nord-icon:not([size])){--_n-icon-size:var(--n-size-icon-s)}`;var x;function w(t,i){return Boolean(i.id)&&t.nodeType===Node.ELEMENT_NODE&&t.getAttribute("aria-describedby")===i.id}function k(t){var i;const e=null===(i=null==t?void 0:t.focusableRef)||void 0===i?void 0:i.value;return e&&"focusableRef"in e?k(e):e}const{transition:E}=m({hidden:{show:"waiting"},visible:{hide:"hidden",reposition:"positioning",show:"positioning"},waiting:{timeout:"positioning",hide:"hidden"},positioning:{positioned:"visible",hide:"hidden"}});let z=x=class extends e{constructor(){super(...arguments),this.shortcutSlot=new p(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(),c({padding:8})]}).then((({x:t,y:i})=>{this.coords=[t,i],this.state=E(this.state,"positioned")})),this.hideTooltip=()=>{this.state=E(this.state,"hide")},this.reposition=()=>{this.state=E(this.state,"reposition")},this.handleShow=t=>{const i=t.target;w(i,this)&&(this.currentElement=i,this.state=E(this.state,"show"))},this.handleHide=t=>{t.target===this.currentElement&&this.hideTooltip()},this.hideOnEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.addDescribedBy=()=>{const t=k(this.currentElement);t&&(this.proxy.hidden=!0,this.proxy.id=this.id,this.proxy.textContent=this.textContent,t.insertAdjacentElement("afterend",this.proxy),function(t,i,e){const s=y(t,i);s.includes(e)||f(t,i,s.concat(e))}(t,"aria-describedby",this.id))},this.removeDescribedBy=()=>{const t=k(this.currentElement);t&&(this.proxy.remove(),function(t,i,e){const s=y(t,i);s.includes(e)&&f(t,i,s.filter((t=>t!==e)))}(t,"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,{capture:!0}),this.events.listen(window,"resize",this.reposition,{passive:!0}),this.events.listen(window,"scroll",this.reposition,{passive:!0})}render(){return s`<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=E(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)}}};z.styles=[u,g],i([r()],z.prototype,"state",void 0),i([n({reflect:!0})],z.prototype,"position",void 0),i([n({reflect:!0})],z.prototype,"role",void 0),i([n({reflect:!0})],z.prototype,"id",void 0),i([n({reflect:!0,type:Number})],z.prototype,"delay",void 0),i([b("id")],z.prototype,"handleIdChange",null),i([b("state")],z.prototype,"handleStateChange",null),z=x=i([o("nord-tooltip")],z);var _=z;export{_ as default};
+import{i as t,_ as i,s as e,x as s,e as o}from"./query-assigned-elements-2f8275b7.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 c}from"./positioning-a572d126.js";import{S as p}from"./SlotController-d733c575.js";import{s as u}from"./Component-253ecb24.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=t`:host{--_n-tooltip-max-size:var(--n-tooltip-max-size, 50ch);--_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);word-break:break-word;max-inline-size:var(--_n-tooltip-max-size)}.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)}[slot=shortcut]::slotted(nord-icon:not([size])){--_n-icon-size:var(--n-size-icon-s)}`;var x;function w(t,i){return Boolean(i.id)&&t.nodeType===Node.ELEMENT_NODE&&t.getAttribute("aria-describedby")===i.id}function k(t){var i;const e=null===(i=null==t?void 0:t.focusableRef)||void 0===i?void 0:i.value;return e&&"focusableRef"in e?k(e):e}const{transition:E}=m({hidden:{show:"waiting"},visible:{hide:"hidden",reposition:"positioning",show:"positioning"},waiting:{timeout:"positioning",hide:"hidden"},positioning:{positioned:"visible",hide:"hidden"}});let z=x=class extends e{constructor(){super(...arguments),this.shortcutSlot=new p(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(),c({padding:8})]}).then((({x:t,y:i})=>{this.coords=[t,i],this.state=E(this.state,"positioned")})),this.hideTooltip=()=>{this.state=E(this.state,"hide")},this.reposition=()=>{this.state=E(this.state,"reposition")},this.handleShow=t=>{const i=t.target;w(i,this)&&(this.currentElement=i,this.state=E(this.state,"show"))},this.handleHide=t=>{t.target===this.currentElement&&this.hideTooltip()},this.hideOnEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.addDescribedBy=()=>{const t=k(this.currentElement);t&&(this.proxy.hidden=!0,this.proxy.id=this.id,this.proxy.textContent=this.textContent,t.insertAdjacentElement("afterend",this.proxy),function(t,i,e){const s=y(t,i);s.includes(e)||f(t,i,s.concat(e))}(t,"aria-describedby",this.id))},this.removeDescribedBy=()=>{const t=k(this.currentElement);t&&(this.proxy.remove(),function(t,i,e){const s=y(t,i);s.includes(e)&&f(t,i,s.filter((t=>t!==e)))}(t,"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,{capture:!0}),this.events.listen(window,"resize",this.reposition,{passive:!0}),this.events.listen(window,"scroll",this.reposition,{passive:!0})}render(){return s`<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=E(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)}}};z.styles=[u,g],i([r()],z.prototype,"state",void 0),i([n({reflect:!0})],z.prototype,"position",void 0),i([n({reflect:!0})],z.prototype,"role",void 0),i([n({reflect:!0})],z.prototype,"id",void 0),i([n({reflect:!0,type:Number})],z.prototype,"delay",void 0),i([b("id")],z.prototype,"handleIdChange",null),i([b("state")],z.prototype,"handleStateChange",null),z=x=i([o("nord-tooltip")],z);var _=z;export{_ 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\nfunction getFocusable(el?: FocusableElement): HTMLElement | undefined {\n  const focusable = el?.focusableRef?.value as HTMLElement | FocusableElement | undefined\n\n  if (focusable && \"focusableRef\" in focusable) {\n    return getFocusable(focusable)\n  }\n\n  return focusable\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 * @cssprop [--n-tooltip-max-size=50ch] - Controls the maximum inline size, or width, of the tooltip.\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    // we use event capture here to handle cases where e.g. a close button causes its ancestor to be removed from the DOM.\n    // in this case the click event will never bubble up to the rootNode, so we never receive it, and the tooltip can remain open\n    // by capturing, we get this event first, and can close the tooltip eagerly\n    this.events.listen(rootNode, \"click\", this.handleHide, { capture: true })\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 = getFocusable(this.currentElement)\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 = getFocusable(this.currentElement)\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","getFocusable","el","focusable","_a","focusableRef","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","textContent","insertAdjacentElement","token","includes","concat","attr.add","removeDescribedBy","remove","filter","t","attr.remove","connectedCallback","super","rootNode","getRootNode","listen","capture","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\nfunction getFocusable(el?: FocusableElement): HTMLElement | undefined {\n  const focusable = el?.focusableRef?.value as HTMLElement | FocusableElement | undefined\n\n  if (focusable && \"focusableRef\" in focusable) {\n    return getFocusable(focusable)\n  }\n\n  return focusable\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 * @cssprop [--n-tooltip-max-size=50ch] - Controls the maximum inline size, or width, of the tooltip.\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  // eslint-disable-next-line lit/no-native-attributes\n  @property({ reflect: true }) role = \"tooltip\"\n\n  /**\n   * The id for the active element to reference via aria-describedby.\n   */\n  // eslint-disable-next-line lit/no-native-attributes\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    // we use event capture here to handle cases where e.g. a close button causes its ancestor to be removed from the DOM.\n    // in this case the click event will never bubble up to the rootNode, so we never receive it, and the tooltip can remain open\n    // by capturing, we get this event first, and can close the tooltip eagerly\n    this.events.listen(rootNode, \"click\", this.handleHide, { capture: true })\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 = getFocusable(this.currentElement)\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 = getFocusable(this.currentElement)\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","getFocusable","el","focusable","_a","focusableRef","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","textContent","insertAdjacentElement","token","includes","concat","attr.add","removeDescribedBy","remove","filter","t","attr.remove","connectedCallback","super","rootNode","getRootNode","listen","capture","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/TopBar.js

@@ -0,0 +1,2 @@
+import{i as t,x as a,_ as n,e,s as o}from"./query-assigned-elements-2f8275b7.js";import{D as r}from"./DraftComponentMixin-9e4b7b34.js";import{s}from"./Component-253ecb24.js";const i=t`:host{background:var(--n-color-accent-secondary);block-size:52px;display:flex;align-items:center;color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active);padding-inline-start:calc(var(--n-space-m) + var(--_n-header-gutter,0px));padding-inline-end:var(--n-space-m);gap:var(--n-space-m)}slot{display:block}slot:not([name]){flex:1}slot[name=end]{display:flex;margin-inline-start:auto;align-items:center;gap:var(--n-space-xs)}::slotted(:is(h1, h2, h3, h4, h5, h6, p, em, span)){color:var(--n-color-text-on-accent)!important;font-size:var(--n-font-size-m)!important;line-height:var(--n-line-height)!important;font-weight:var(--n-font-weight-active)!important;font-style:normal!important}::slotted(nord-avatar){--n-avatar-color:rgba(255, 255, 255, 0.1);--n-avatar-box-shadow:0 0 0 1px rgba(255, 255, 255, 0.6)}`;let l=class extends(r(o)){render(){return a`<slot></slot><slot name="end"></slot>`}};l.styles=[s,i],l=n([e("nord-top-bar")],l);var c=l;export{c as default};
+//# sourceMappingURL=TopBar.js.map

package/lib/TopBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopBar.js","sources":["../src/top-bar/TopBar.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 \"./TopBar.css\"\n\n/**\n * Top bar is a header component that is always visible at the top of the interface. Top bar allows functionality such as search and contextual menus to be placed at the top of the interface.\n *\n * @status draft\n * @category structure\n * @slot - Used for the main content of the top bar. We recommend placing your application’s global search functionality into this slot.\n * @slot end - Optional slot for menus, buttons, toggles, etc.\n */\n@customElement(\"nord-top-bar\")\nexport default class TopBar extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  render() {\n    return html`\n      <slot></slot>\n      <slot name=\"end\"></slot>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-top-bar\": TopBar\n  }\n}\n"],"names":["TopBar","DraftComponentMixin","LitElement","render","html","styles","componentStyle","style","__decorate","customElement"],"mappings":"i/BAgBA,IAAqBA,EAArB,cAAoCC,EAAoBC,IAGtDC,SACE,OAAOC,CAAI,uCAIZ,GAPMJ,EAAAK,OAAS,CAACC,EAAgBC,GADdP,EAAMQ,EAAA,CAD1BC,EAAc,iBACMT,SAAAA"}

package/lib/VisuallyHidden.js

@@ -1,2 +1,2 @@
-import{i as t,_ as e,s as i,x as o,e as n}from"./query-assigned-elements-15485e3d.js";const r=t`: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 i{render(){return o`<slot></slot>`}};s.styles=r,s=e([n("nord-visually-hidden")],s);var a=s;export{a as default};
+import{i as t,_ as e,s as i,x as o,e as n}from"./query-assigned-elements-2f8275b7.js";const r=t`: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 i{render(){return o`<slot></slot>`}};s.styles=r,s=e([n("nord-visually-hidden")],s);var a=s;export{a as default};
 //# sourceMappingURL=VisuallyHidden.js.map

package/lib/arrow-left-small-dd181059.js

@@ -0,0 +1,2 @@
+var r=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m13.0712.105225 2.1213 2.121315-7.77816 7.77816 7.77826 7.7783-2.1213 2.1213-8.48539-8.4854c-.78105-.781-.78105-2.04735 0-2.82839z" fill="currentColor"/></svg>',title:"arrow-left-small",tags:"nordicon arrow left small caret pointing triangle chevron"});export{r as a};
+//# sourceMappingURL=arrow-left-small-dd181059.js.map

package/lib/arrow-left-small-dd181059.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-left-small-dd181059.js","sources":["../../icons/lib/assets/arrow-left-small.js"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m13.0712.105225 2.1213 2.121315-7.77816 7.77816 7.77826 7.7783-2.1213 2.1213-8.48539-8.4854c-.78105-.781-.78105-2.04735 0-2.82839z\" fill=\"currentColor\"/></svg>'\nexport const title = \"arrow-left-small\"\nexport const tags = \"nordicon arrow left small caret pointing triangle chevron\"\n"],"names":[],"mappings":"4CAAe,6OACM,wBACD"}