@nordhealth/components 1.6.1 → 1.7.0

package/lib/Skeleton.js

@@ -0,0 +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};
+//# sourceMappingURL=Skeleton.js.map

package/lib/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sources":["../src/skeleton/Skeleton.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Skeleton.css\"\n\n/**\n * Skeletons are used to provide a low fidelity representation of content\n * before it appears in a view. This improves the perceived loading time\n * for our users.\n *\n * @status draft\n * @category feedback\n */\n@customElement(\"nord-skeleton\")\nexport default class Skeleton extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  /**\n   * Determines which animation effect the skeleton will use.\n   */\n  @property() effect: \"pulse\" | \"sheen\" | \"none\" = \"none\"\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"n-skeleton\": true,\n          \"n-skeleton-pulse\": this.effect === \"pulse\",\n          \"n-skeleton-sheen\": this.effect === \"sheen\",\n        })}\n        aria-hidden=\"true\"\n      >\n        <div class=\"n-skeleton-indicator\"></div>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-skeleton\": Skeleton\n  }\n}\n"],"names":["Skeleton","DraftComponentMixin","LitElement","constructor","this","effect","render","html","classMap","styles","componentStyle","style","__decorate","property","prototype","customElement"],"mappings":"20CAiBA,IAAqBA,EAArB,cAAsCC,EAAoBC,IAA1DC,kCAMcC,KAAMC,OAA+B,OAEjDC,SACE,OAAOC,CAAI,eAECC,EAAS,CACf,cAAc,EACd,mBAAoC,UAAhBJ,KAAKC,OACzB,mBAAoC,UAAhBD,KAAKC,gFAb1BL,EAAAS,OAAS,CAACC,EAAgBC,GAKrBC,EAAA,CAAXC,KAAsDb,EAAAc,UAAA,cAAA,GANpCd,EAAQY,EAAA,CAD5BG,EAAc,kBACMf,SAAAA"}

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-e382250e.js";import{e as o}from"./property-03f59dce.js";import{l as t}from"./if-defined-4d1db15c.js";import{c as a}from"./cond-ed8742b5.js";import{s as l}from"./Component-5a499e30.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 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};
 //# sourceMappingURL=Spinner.js.map

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-e382250e.js";import{e as a}from"./property-03f59dce.js";import{s as i}from"./Component-5a499e30.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 p=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>`}};p.styles=[i,r],t([a({reflect:!0})],p.prototype,"gap",void 0),t([a({reflect:!0})],p.prototype,"direction",void 0),t([a({reflect:!0,attribute:"align-items"})],p.prototype,"alignItems",void 0),t([a({reflect:!0,type:Boolean})],p.prototype,"responsive",void 0),t([a({reflect:!0,type:Boolean})],p.prototype,"wrap",void 0),t([a({reflect:!0,attribute:"justify-content"})],p.prototype,"justifyContent",void 0),p=t([e("nord-stack")],p);var c=p;export{c 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-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};
 //# sourceMappingURL=Stack.js.map

package/lib/Tab.js

@@ -0,0 +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 var(--n-color-border);--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;position:relative}.n-tab::after{content:"";display:block;position:absolute;inset-block:0;inset-inline-start:calc(100% + var(--n-tab-group-padding));block-size:var(--n-tab-group-padding);inline-size:1px}.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 p=b;export{p as default};
+//# sourceMappingURL=Tab.js.map

package/lib/Tab.js.map

@@ -0,0 +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":"wnEAiBA,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"}

package/lib/TabGroup.js

@@ -0,0 +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);--n-tab-list-scroll-shadow:var(--n-color-border);--n-tab-list-scroll-shadow-size:var(--n-space-m);--n-tab-panel-margin:var(--n-space-m) 0;border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}.n-tab-group-list{list-style:none;display:flex;gap:var(--n-space-s);padding:0 var(--n-tab-group-padding);overflow:auto;box-shadow:var(--n-tab-list-border);border-radius:var(--n-border-radius) var(--n-border-radius) 0 0;background:linear-gradient(to right,var(--n-tab-list-background) 30%,transparent),linear-gradient(to right,transparent,var(--n-tab-list-background) 70%) 0 100%,radial-gradient(farthest-side at 0 50%,var(--n-tab-list-scroll-shadow),transparent),radial-gradient(farthest-side at 100% 50%,var(--n-tab-list-scroll-shadow),transparent) 0 100%;background-repeat:no-repeat;background-color:var(--n-tab-list-background);background-size:var(--n-tab-list-scroll-shadow-size) 100%,var(--n-tab-list-scroll-shadow-size) 100%,calc(var(--n-tab-list-scroll-shadow-size)/ 2) 100%,calc(var(--n-tab-list-scroll-shadow-size)/ 2) 100%;background-position:0 0,100%,0 0,100%;background-attachment:local,local,scroll,scroll;overscroll-behavior:none}::slotted(nord-tab-panel){display:none;padding-inline-start:var(--n-tab-group-padding);padding-inline-end:var(--n-tab-group-padding);margin:var(--n-tab-panel-margin)}::slotted(nord-tab-panel[aria-hidden=false]){display:block}:host([padding="m"]){--n-tab-group-padding:var(--n-space-m)}:host([padding="l"]){--n-tab-group-padding:var(--n-space-l)}:host([sticky]){overflow:auto}: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)}`;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="none",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"><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};
+//# sourceMappingURL=TabGroup.js.map

package/lib/TabGroup.js.map

@@ -0,0 +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\" = \"none\"\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\">\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","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

@@ -0,0 +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};
+//# sourceMappingURL=TabPanel.js.map

package/lib/TabPanel.js.map

@@ -0,0 +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"}

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-e382250e.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 s=i;export{s as default};
+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};
 //# sourceMappingURL=Table.js.map

package/lib/{TextField-9dea5c28.js → TextField-93a3922f.js}

@@ -1,2 +1,2 @@
-import{r as n}from"./lit-element-e382250e.js";const r=n`.n-input-container{position:relative;inline-size:var(--n-input-width,240px)}.n-input{background:var(--n-color-active);color:var(--n-color-text);padding-block-start:calc(var(--n-space-s) - 1px);padding-block-end:calc(var(--n-space-s) - 1px);padding-inline-start:calc(var(--n-space-s) * 1.6);padding-inline-end:calc(var(--n-space-s) * 1.6);border-radius:var(--n-border-radius-s);border:1px solid var(--n-input-border-color,var(--n-color-border-strong));font-family:var(--n-font-family);font-size:var(--n-font-size-m);line-height:var(--n-line-height-form);inline-size:100%;transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly)}@media (max-width:480px){.n-input{font-size:var(--n-font-size-l)}}:host([expand]){--n-input-width:100%;inline-size:100%}.n-input:hover,.n-label-container:hover+.n-input-container .n-input{--n-input-border-color:var(--n-color-border-hover)}.n-input:focus{--n-input-border-color:var(--n-color-accent);background:var(--n-color-surface);outline:0;box-shadow:0 0 0 1px var(--n-input-border-color)}.n-input::placeholder{color:var(--n-color-text-weakest)}.n-input:disabled,.n-label-container:hover+.n-input-container .n-input:disabled{--n-input-border-color:var(--n-color-active);color:var(--n-color-text-weakest)}.n-input[aria-invalid=true]{--n-input-border-color:var(--n-color-status-danger)!important}`;export{r as s};
-//# sourceMappingURL=TextField-9dea5c28.js.map
+import{r as n}from"./lit-element-67e6cd99.js";const r=n`.n-input-container{position:relative;inline-size:var(--n-input-width,240px)}.n-input{background:var(--n-color-active);color:var(--n-color-text);padding-block-start:calc(var(--n-space-s) - 1px);padding-block-end:calc(var(--n-space-s) - 1px);padding-inline-start:calc(var(--n-space-s) * 1.6);padding-inline-end:calc(var(--n-space-s) * 1.6);border-radius:var(--n-border-radius-s);border:1px solid var(--n-input-border-color,var(--n-color-border-strong));font-family:var(--n-font-family);font-size:var(--n-font-size-m);line-height:var(--n-line-height-form);inline-size:100%;transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly)}@media (max-width:480px){.n-input{font-size:var(--n-font-size-l)}}:host([expand]){--n-input-width:100%;inline-size:100%}.n-input:hover,.n-label-container:hover+.n-input-container .n-input{--n-input-border-color:var(--n-color-border-hover)}.n-input:focus{--n-input-border-color:var(--n-color-accent);background:var(--n-color-surface);outline:0;box-shadow:0 0 0 1px var(--n-input-border-color)}.n-input::placeholder{color:var(--n-color-text-weakest)}.n-input:disabled,.n-label-container:hover+.n-input-container .n-input:disabled{--n-input-border-color:var(--n-color-active);color:var(--n-color-text-weakest)}.n-input[aria-invalid=true]{--n-input-border-color:var(--n-color-status-danger)!important}`;export{r as s};
+//# sourceMappingURL=TextField-93a3922f.js.map

package/lib/TextField-93a3922f.js.map

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

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-e382250e.js";import{e as o}from"./property-03f59dce.js";import{l as a}from"./if-defined-4d1db15c.js";import{n}from"./ref-adf41565.js";import{o as l}from"./observe-a9c6dfb6.js";import{F as d}from"./FocusableMixin-4c85ced9.js";import{F as p}from"./FormAssociatedMixin-9d38814c.js";import{I as m}from"./InputMixin-9334d385.js";import{s as h}from"./Component-5a499e30.js";import{s as u}from"./FormField-44e865a4.js";import{s as c}from"./TextField-9dea5c28.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const f=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 v=class extends(p(m(d(s)))){constructor(){super(...arguments),this.inputId="textarea",this.resize="vertical"}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}" ?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())}"></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)}};v.styles=[h,u,c,f],e([o({reflect:!0})],v.prototype,"resize",void 0),e([l("resize","updated"),l("value","updated")],v.prototype,"resizeToFitContent",null),v=e([t("nord-textarea")],v);var b=v;export{b 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-d3124755.js";import{I as m}from"./InputMixin-9334d385.js";import{s as f}from"./Component-a61df53a.js";import{s as h}from"./FormField-d3767c2e.js";import{s as u}from"./TextField-93a3922f.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const c=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 v=class extends(p(m(d(s)))){constructor(){super(...arguments),this.inputId="textarea",this.resize="vertical"}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}" ?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())}"></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)}};v.styles=[f,h,u,c],e([o({reflect:!0})],v.prototype,"resize",void 0),e([l("resize","updated"),l("value","updated")],v.prototype,"resizeToFitContent",null),v=e([t("nord-textarea")],v);var b=v;export{b as default};
 //# sourceMappingURL=Textarea.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-e382250e.js";import{e as o}from"./property-03f59dce.js";import{l as s}from"./if-defined-4d1db15c.js";import{n as a}from"./ref-adf41565.js";import{F as l}from"./FocusableMixin-4c85ced9.js";import{F as c}from"./FormAssociatedMixin-9d38814c.js";import{I as d}from"./InputMixin-9334d385.js";import{s as g}from"./Component-5a499e30.js";import{s as p}from"./FormField-44e865a4.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const h=i`:host{display:inline-block;font-size:var(--n-font-size-m);--n-toggle-inline-size:3.2143em;--n-toggle-block-size:calc(var(--n-toggle-inline-size) / 1.6);--n-toggle-thumb-margin:0.35em}.n-flex{display:flex}.n-expand{flex:1;display:flex;justify-content:center;align-items:flex-start;flex-direction:column;min-block-size:100%}.n-input-container{position:relative}.n-toggle{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;inline-size:var(--n-toggle-inline-size);block-size:var(--n-toggle-block-size);border-radius:var(--n-border-radius-pill);background:var(--n-toggle-background,var(--n-color-border-strong));cursor:pointer;transition:background var(--n-transition-slowly);font-size:var(--n-toggle-size,var(--n-font-size-m))}.n-toggle::before{content:"";display:block;aspect-ratio:1/1;block-size:calc(100% - 2 * var(--n-toggle-thumb-margin));background:var(--n-color-text-on-accent);border-radius:var(--n-border-radius-circle);transition:margin;transition-duration:inherit;margin-inline-start:var(--n-toggle-thumb-margin);box-shadow:var(--n-box-shadow)}input:checked{--n-toggle-background:var(--n-color-text-link)}input:checked::before{margin-inline-start:calc(var(--n-toggle-inline-size) - var(--n-toggle-block-size) + var(--n-toggle-thumb-margin))}input:checked[aria-invalid]{--n-toggle-background:var(--n-color-status-danger)}input:focus{outline:0;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{opacity:.3;cursor:not-allowed}.n-label-container{padding-block-end:0}label{-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:calc(var(--n-space-s)/ 2);padding-inline-start:var(--n-space-s)}:host([reverse]) .n-error,:host([reverse]) .n-hint,:host([reverse]) label{padding-inline-start:0;padding-inline-end:var(--n-space-s)}:host([size="s"]) .n-toggle{--n-toggle-size:var(--n-font-size-xs)}:host([size="l"]) .n-toggle{--n-toggle-size:var(--n-font-size-xl)}`;let v=class extends(c(d(l(t)))){constructor(){super(...arguments),this.checked=!1,this.reverse=!1,this.size="m"}get formValue(){return this.checked?this.value||"on":void 0}render(){const e=r`<div class="n-expand">${this.renderLabel()} ${this.renderError()}</div>`,n=r`<div class="n-input-container"><input ${a(this.focusableRef)} class="n-toggle" id="${this.inputId}" type="checkbox" role="switch" name="${s(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" @change="${this.handleChange}"></div>`;return r`<div class="n-flex">${this.reverse?[e,n]:[n,e]}</div>`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};v.styles=[g,p,h],e([o({type:Boolean})],v.prototype,"checked",void 0),e([o({type:Boolean})],v.prototype,"reverse",void 0),e([o({reflect:!0})],v.prototype,"size",void 0),v=e([n("nord-toggle")],v);var 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-d3124755.js";import{I as d}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(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-e382250e.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-763efb3a.js";import{S as c}from"./SlotController-ea6eff46.js";import{s as u}from"./Component-5a499e30.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-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};
 //# sourceMappingURL=Tooltip.js.map

package/lib/Tooltip.js.map

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

package/lib/VisuallyHidden.js

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