@nordhealth/components 1.11.0 → 1.13.0

package/lib/Skeleton.js

@@ -1,2 +1,2 @@
-import{_ as e,n}from"./query-assigned-elements-ef860822.js";import{r as o,$ as r,s}from"./lit-element-67e6cd99.js";import{o as t}from"./class-map-f1b6f1fa.js";import{e as i}from"./property-03f59dce.js";import{D as a}from"./DraftComponentMixin-9e4b7b34.js";import{s as l}from"./Component-a61df53a.js";import"./directive-de55b00a.js";const d=o`:host{--n-skeleton-border-radius:var(--n-border-radius);--n-skeleton-color:var(--n-color-border);--n-skeleton-sheen-color:var(--n-color-border-strong);position:relative}.n-skeleton{display:flex;inline-size:100%;block-size:100%;min-block-size:var(--n-space-m)}.n-skeleton-indicator{flex:1 1 auto;background:var(--n-skeleton-color);border-radius:var(--n-skeleton-border-radius);opacity:.6}.n-skeleton-sheen .n-skeleton-indicator{background:linear-gradient(270deg,var(--n-skeleton-sheen-color),var(--n-skeleton-color),var(--n-skeleton-color),var(--n-skeleton-sheen-color));background-position:200% 0;background-size:400% 100%}@media (prefers-reduced-motion:no-preference){.n-skeleton-sheen .n-skeleton-indicator{animation:n-sheen 5s ease-in-out infinite}}@keyframes n-sheen{to{background-position:-200% 0}}@media (prefers-reduced-motion:no-preference){.n-skeleton-pulse .n-skeleton-indicator{animation:n-pulse 1s ease-in-out .5s infinite;animation-direction:alternate;opacity:.6}}@keyframes n-pulse{to{opacity:.2}}`;let c=class extends(a(s)){constructor(){super(...arguments),this.effect="none"}render(){return r`<div class="${t({"n-skeleton":!0,"n-skeleton-pulse":"pulse"===this.effect,"n-skeleton-sheen":"sheen"===this.effect})}" aria-hidden="true"><div class="n-skeleton-indicator"></div></div>`}};c.styles=[l,d],e([i()],c.prototype,"effect",void 0),c=e([n("nord-skeleton")],c);var p=c;export{p as default};
+import{_ as e,n}from"./query-assigned-elements-ef860822.js";import{r as o,$ as r,s}from"./lit-element-67e6cd99.js";import{o as t}from"./class-map-f1b6f1fa.js";import{e as i}from"./property-03f59dce.js";import{D as a}from"./DraftComponentMixin-9e4b7b34.js";import{s as l}from"./Component-5a0a26a0.js";import"./directive-de55b00a.js";const d=o`:host{--n-skeleton-border-radius:var(--n-border-radius);--n-skeleton-color:var(--n-color-border);--n-skeleton-sheen-color:var(--n-color-border-strong);position:relative}.n-skeleton{display:flex;inline-size:100%;block-size:100%;min-block-size:var(--n-space-m)}.n-skeleton-indicator{flex:1 1 auto;background:var(--n-skeleton-color);border-radius:var(--n-skeleton-border-radius);opacity:.6}.n-skeleton-sheen .n-skeleton-indicator{background:linear-gradient(270deg,var(--n-skeleton-sheen-color),var(--n-skeleton-color),var(--n-skeleton-color),var(--n-skeleton-sheen-color));background-position:200% 0;background-size:400% 100%}@media (prefers-reduced-motion:no-preference){.n-skeleton-sheen .n-skeleton-indicator{animation:n-sheen 5s ease-in-out infinite}}@keyframes n-sheen{to{background-position:-200% 0}}@media (prefers-reduced-motion:no-preference){.n-skeleton-pulse .n-skeleton-indicator{animation:n-pulse 1s ease-in-out .5s infinite;animation-direction:alternate;opacity:.6}}@keyframes n-pulse{to{opacity:.2}}`;let c=class extends(a(s)){constructor(){super(...arguments),this.effect="none"}render(){return r`<div class="${t({"n-skeleton":!0,"n-skeleton-pulse":"pulse"===this.effect,"n-skeleton-sheen":"sheen"===this.effect})}" aria-hidden="true"><div class="n-skeleton-indicator"></div></div>`}};c.styles=[l,d],e([i()],c.prototype,"effect",void 0),c=e([n("nord-skeleton")],c);var p=c;export{p as default};
 //# sourceMappingURL=Skeleton.js.map

package/lib/Spinner.js

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

package/lib/Spinner.js.map

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

package/lib/Stack.js

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

package/lib/Tab.js

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

package/lib/Tab.js.map

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

package/lib/TabGroup.js

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

package/lib/TabGroup.js.map

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

package/lib/TabPanel.js

@@ -1,2 +1,2 @@
-import{_ as t,n as e}from"./query-assigned-elements-ef860822.js";import{r as s,$ as n,s as a}from"./lit-element-67e6cd99.js";import{D as o}from"./DraftComponentMixin-9e4b7b34.js";import{s as r}from"./Component-a61df53a.js";const l=s`.n-tab-panel{font-size:var(--n-font-size-m);color:var(--n-color-text)}::slotted(*){margin:0}`;let i=class extends(o(a)){render(){return n`<div class="n-tab-panel"><slot></slot></div>`}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tabpanel"),this.setAttribute("tabindex","0")}};i.styles=[r,l],i=t([e("nord-tab-panel")],i);var m=i;export{m as default};
+import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{r as s,s as a,$ as n}from"./lit-element-67e6cd99.js";import{s as o}from"./Component-5a0a26a0.js";const r=s`.n-tab-panel{font-size:var(--n-font-size-m);color:var(--n-color-text)}::slotted(*){margin:0}`;let l=class extends a{render(){return n`<div class="n-tab-panel"><slot></slot></div>`}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tabpanel"),this.setAttribute("tabindex","0")}};l.styles=[o,r],l=e([t("nord-tab-panel")],l);var i=l;export{i as default};
 //# sourceMappingURL=TabPanel.js.map

package/lib/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sources":["../src/tab-panel/TabPanel.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./TabPanel.css\"\n\n/**\n * The panel which contains content that can be revealed using a tab\n * in the tab group component.\n *\n * @status draft\n * @category navigation\n * @slot - The tab panel content.\n */\n@customElement(\"nord-tab-panel\")\nexport default class TabPanel extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  render() {\n    return html`<div class=\"n-tab-panel\"><slot></slot></div>`\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    /**\n     * Apply accessible attributes and values to the tab panel.\n     */\n    this.setAttribute(\"role\", \"tabpanel\")\n    this.setAttribute(\"tabindex\", \"0\")\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-tab-panel\": TabPanel\n  }\n}\n"],"names":["TabPanel","DraftComponentMixin","LitElement","render","html","connectedCallback","super","this","setAttribute","styles","componentStyle","style","__decorate","customElement"],"mappings":"uUAgBA,IAAqBA,EAArB,cAAsCC,EAAoBC,IAGxDC,SACE,OAAOC,CAAI,+CAGbC,oBACEC,MAAMD,oBAKNE,KAAKC,aAAa,OAAQ,YAC1BD,KAAKC,aAAa,WAAY,OAbzBR,EAAAS,OAAS,CAACC,EAAgBC,GADdX,EAAQY,EAAA,CAD5BC,EAAc,mBACMb,SAAAA"}
+{"version":3,"file":"TabPanel.js","sources":["../src/tab-panel/TabPanel.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./TabPanel.css\"\n\n/**\n * The panel which contains content that can be revealed using a tab\n * in the tab group component.\n *\n * @status new\n * @category navigation\n * @slot - The tab panel content.\n */\n@customElement(\"nord-tab-panel\")\nexport default class TabPanel extends LitElement {\n  static styles = [componentStyle, style]\n\n  render() {\n    return html`<div class=\"n-tab-panel\"><slot></slot></div>`\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    /**\n     * Apply accessible attributes and values to the tab panel.\n     */\n    this.setAttribute(\"role\", \"tabpanel\")\n    this.setAttribute(\"tabindex\", \"0\")\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-tab-panel\": TabPanel\n  }\n}\n"],"names":["TabPanel","LitElement","render","html","connectedCallback","super","this","setAttribute","styles","componentStyle","style","__decorate","customElement"],"mappings":"iRAeA,IAAqBA,EAArB,cAAsCC,EAGpCC,SACE,OAAOC,CAAI,+CAGbC,oBACEC,MAAMD,oBAKNE,KAAKC,aAAa,OAAQ,YAC1BD,KAAKC,aAAa,WAAY,OAbzBP,EAAAQ,OAAS,CAACC,EAAgBC,GADdV,EAAQW,EAAA,CAD5BC,EAAc,mBACMZ,SAAAA"}

package/lib/Table.js

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

package/lib/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../src/table/Table.ts"],"sourcesContent":["import { LitElement, html, render } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport style from \"./Table.css\"\n\nfunction isDocument(node: Node): node is Document {\n  return node.nodeType === Node.DOCUMENT_NODE\n}\n\n/**\n * Table is used to organize and display information from a data set.\n * Provides table styles in addition to features like sticky\n * headers and support for narrow viewports.\n *\n * @status ready\n * @category list\n * @slot - The table.\n */\n@customElement(\"nord-table\")\nexport default class Table extends LitElement {\n  static styles = style\n\n  /**\n   * Controls the density of the table's rows and headers.\n   * Relaxed increases space, condensed reduces space.\n   */\n  @property({ reflect: true }) density: \"condensed\" | \"default\" | \"relaxed\" = \"default\"\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.renderStyles()\n  }\n\n  /**\n   * renders table styles into nearest root.\n   * this is necessary since we do not use shadow dom.\n   */\n  private renderStyles() {\n    const rootNode = this.getRootNode() as Document | ShadowRoot\n    const renderTarget = isDocument(rootNode) ? rootNode.head : rootNode\n    const tagName = this.localName\n\n    const componentStyles = rootNode.querySelector(`style[data-component=${tagName}]`)\n    if (componentStyles) {\n      return\n    }\n\n    render(\n      html`\n        <style data-component=${tagName}>\n          ${style}\n        </style>\n      `,\n      renderTarget\n    )\n  }\n\n  /**\n   * opt out of shadow dom\n   */\n  protected createRenderRoot() {\n    return this\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-table\": Table\n  }\n}\n"],"names":["Table","LitElement","constructor","this","density","connectedCallback","super","renderStyles","rootNode","getRootNode","renderTarget","nodeType","Node","DOCUMENT_NODE","head","tagName","localName","querySelector","render","html","style","createRenderRoot","styles","__decorate","property","reflect","prototype","customElement"],"mappings":"msEAkBA,IAAqBA,EAArB,cAAmCC,EAAnCC,kCAO+BC,KAAOC,QAAwC,UAE5EC,oBACEC,MAAMD,oBACNF,KAAKI,eAOCA,eACN,MAAMC,EAAWL,KAAKM,cAChBC,EAA0BF,EAjCtBG,WAAaC,KAAKC,cAiCgBL,EAASM,KAAON,EAC5D,MAAMO,EAAUZ,KAAKa,UAEGR,EAASS,cAAc,wBAAwBF,OAKvEG,EACEC,CAAI,0BACsBJ,MACpBK,YAGNV,GAOMW,mBACR,OAAOlB,OAzCFH,EAAMsB,OAAGF,EAMaG,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAgEzB,EAAA0B,UAAA,eAAA,GAPlE1B,EAAKuB,EAAA,CADzBI,EAAc,eACM3B,SAAAA"}
+{"version":3,"file":"Table.js","sources":["../src/table/Table.ts"],"sourcesContent":["import { LitElement, html, render } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport style from \"./Table.css\"\n\nfunction isDocument(node: Node): node is Document {\n  return node.nodeType === Node.DOCUMENT_NODE\n}\n\n/**\n * Table is used to organize and display information from a data set.\n * Provides table styles in addition to features like sticky\n * headers and support for narrow viewports.\n *\n * @status ready\n * @category list\n * @slot - Default slot which holds the HTML `<table>` element.\n */\n@customElement(\"nord-table\")\nexport default class Table extends LitElement {\n  /**\n   * Controls the density of the table's rows and headers.\n   * Relaxed increases space, condensed reduces space.\n   */\n  @property({ reflect: true }) density: \"condensed\" | \"default\" | \"relaxed\" = \"default\"\n\n  /**\n   * Enables scroll-snapping, meaning the scroll position is always column-aligned.\n   */\n  @property({ reflect: true, type: Boolean, attribute: \"scroll-snap\" }) scrollSnap = false\n\n  /**\n   * Controls whether to use zebra striping on tables, which can improve readability.\n   */\n  @property({ type: Boolean, reflect: true }) striped = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.renderStyles()\n  }\n\n  /**\n   * renders table styles into nearest root.\n   * this is necessary since we do not use shadow dom.\n   */\n  private renderStyles() {\n    const rootNode = this.getRootNode() as Document | ShadowRoot\n    const renderTarget = isDocument(rootNode) ? rootNode.head : rootNode\n    const tagName = this.localName\n\n    const componentStyles = rootNode.querySelector(`style[data-component=${tagName}]`)\n    if (componentStyles) {\n      return\n    }\n\n    render(\n      html`\n        <style data-component=${tagName}>\n          ${style}\n        </style>\n      `,\n      renderTarget\n    )\n  }\n\n  /**\n   * opt out of shadow dom\n   */\n  protected createRenderRoot() {\n    return this\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-table\": Table\n  }\n}\n"],"names":["Table","LitElement","constructor","this","density","scrollSnap","striped","connectedCallback","super","renderStyles","rootNode","getRootNode","renderTarget","nodeType","Node","DOCUMENT_NODE","head","tagName","localName","querySelector","render","html","style","createRenderRoot","__decorate","property","reflect","prototype","type","Boolean","attribute","customElement"],"mappings":"unFAkBA,IAAqBA,EAArB,cAAmCC,EAAnCC,kCAK+BC,KAAOC,QAAwC,UAKND,KAAUE,YAAG,EAKvCF,KAAOG,SAAG,EAEtDC,oBACEC,MAAMD,oBACNJ,KAAKM,eAOCA,eACN,MAAMC,EAAWP,KAAKQ,cAChBC,EAA0BF,EAzCtBG,WAAaC,KAAKC,cAyCgBL,EAASM,KAAON,EAC5D,MAAMO,EAAUd,KAAKe,UAEGR,EAASS,cAAc,wBAAwBF,OAKvEG,EACEC,CAAI,0BACsBJ,MACpBK,YAGNV,GAOMW,mBACR,OAAOpB,OA7CoBqB,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAgE1B,EAAA2B,UAAA,eAAA,GAKfH,EAAA,CAArEC,EAAS,CAAEC,SAAS,EAAME,KAAMC,QAASC,UAAW,iBAAmC9B,EAAA2B,UAAA,kBAAA,GAK5CH,EAAA,CAA3CC,EAAS,CAAEG,KAAMC,QAASH,SAAS,KAAuB1B,EAAA2B,UAAA,eAAA,GAfxC3B,EAAKwB,EAAA,CADzBO,EAAc,eACM/B,SAAAA"}

package/lib/Textarea.js

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

package/lib/Toast.js

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

package/lib/ToastGroup.js

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

package/lib/Toggle.js

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

package/lib/Tooltip.js

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