@nordhealth/components 1.0.0 → 1.0.1

package/lib/ProgressBar.js

@@ -1,2 +1,2 @@
-import{_ as r,n as e}from"./query-assigned-elements-37b095c4.js";import{r as o,s as a,$ as s}from"./lit-element-74b6bb4b.js";import{l as n}from"./if-defined-fe657a02.js";import{e as i}from"./property-03f59dce.js";import{n as t}from"./ref-7d028e3a.js";import{F as d}from"./FocusableMixin-ebb67709.js";import{s as l}from"./Component-9d373ef3.js";import"./directive-de55b00a.js";const p=o`:host{display:block;inline-size:100%}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;inline-size:100%;block-size:var(--n-progress-size,var(--n-space-s));background-color:var(--n-color-nav-hover);border-radius:var(--n-progress-border-radius,var(--n-border-radius-s));box-shadow:none;display:block;border:0;margin:0}label{display:block}progress::-webkit-progress-bar{background-color:transparent;border-radius:var(--n-progress-border-radius,var(--n-border-radius-s))}progress::-moz-progress-bar{background:var(--n-progress-color,var(--n-color-accent));border-radius:var(--n-progress-border-radius,var(--n-border-radius-s))}progress::-webkit-progress-value{background:var(--n-progress-color,var(--n-color-accent));border-radius:var(--n-progress-border-radius,var(--n-border-radius-s));transition:inline-size .25s ease-out}progress:indeterminate{background-color:var(--n-color-nav-hover);background-image:linear-gradient(to right,transparent 45%,var(--n-color-accent) 0,var(--n-color-accent) 55%,transparent 0);background-position:right;background-size:225% 100%;animation:animate-indeterminate 2s infinite ease}progress:indeterminate::-moz-progress-bar{background-color:transparent}progress:indeterminate::-webkit-progress-value{background-color:transparent}@keyframes animate-indeterminate{50%{background-position:left}}progress:focus{box-shadow:0 0 0 1px var(--n-color-background),0 0 0 3px var(--n-color-accent);outline:0}`;let b=class extends(d(a)){constructor(){super(...arguments),this.max=100,this.label="Current progress"}render(){return s`<label><nord-visually-hidden>${this.label}</nord-visually-hidden><progress ${t(this.focusableRef)} aria-valuenow="${n(this.value)}" aria-valuemin="0" aria-valuemax="${this.max}" tabindex="-1" max="${this.max}" value="${n(this.value)}"></progress></label>`}};b.styles=[l,p],r([i({reflect:!0,type:Number})],b.prototype,"value",void 0),r([i({reflect:!0,type:Number})],b.prototype,"max",void 0),r([i({reflect:!0})],b.prototype,"label",void 0),b=r([e("nord-progress-bar")],b);var c=b;export{c as default};
+import{_ as r,n as e}from"./query-assigned-elements-ef860822.js";import{r as o,s as a,$ as s}from"./lit-element-99bdfe5a.js";import{l as n}from"./if-defined-ee2efb2f.js";import{e as i}from"./property-03f59dce.js";import{n as t}from"./ref-7e1d4d24.js";import{F as d}from"./FocusableMixin-c010d3b3.js";import{s as l}from"./Component-6bf383d6.js";import"./directive-de55b00a.js";const p=o`:host{display:block;inline-size:100%}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;inline-size:100%;block-size:var(--n-progress-size,var(--n-space-s));background-color:var(--n-color-nav-hover);border-radius:var(--n-progress-border-radius,var(--n-border-radius-s));box-shadow:none;display:block;border:0;margin:0}label{display:block}progress::-webkit-progress-bar{background-color:transparent;border-radius:var(--n-progress-border-radius,var(--n-border-radius-s))}progress::-moz-progress-bar{background:var(--n-progress-color,var(--n-color-accent));border-radius:var(--n-progress-border-radius,var(--n-border-radius-s))}progress::-webkit-progress-value{background:var(--n-progress-color,var(--n-color-accent));border-radius:var(--n-progress-border-radius,var(--n-border-radius-s));transition:inline-size .25s ease-out}progress:indeterminate{background-color:var(--n-color-nav-hover);background-image:linear-gradient(to right,transparent 45%,var(--n-color-accent) 0,var(--n-color-accent) 55%,transparent 0);background-position:right;background-size:225% 100%;animation:animate-indeterminate 2s infinite ease}progress:indeterminate::-moz-progress-bar{background-color:transparent}progress:indeterminate::-webkit-progress-value{background-color:transparent}@keyframes animate-indeterminate{50%{background-position:left}}progress:focus{box-shadow:0 0 0 1px var(--n-color-background),0 0 0 3px var(--n-color-accent);outline:0}`;let c=class extends(d(a)){constructor(){super(...arguments),this.max=100,this.label="Current progress"}render(){return s`<label><nord-visually-hidden>${this.label}</nord-visually-hidden><progress ${t(this.focusableRef)} aria-valuenow="${n(this.value)}" aria-valuemin="0" aria-valuemax="${this.max}" tabindex="-1" max="${this.max}" value="${n(this.value)}"></progress></label>`}};c.styles=[l,p],r([i({reflect:!0,type:Number})],c.prototype,"value",void 0),r([i({reflect:!0,type:Number})],c.prototype,"max",void 0),r([i({reflect:!0})],c.prototype,"label",void 0),c=r([e("nord-progress-bar")],c);var b=c;export{b as default};
 //# sourceMappingURL=ProgressBar.js.map

package/lib/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","sources":["../src/progress-bar/ProgressBar.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./ProgressBar.css\"\n\n/**\n * Progress Bar is used to visually represent the completion\n * of a task or process. It shows how much of the task has\n * been completed and how much is still left.\n *\n * @status new\n * @category feedback\n */\n@customElement(\"nord-progress-bar\")\nexport default class ProgressBar extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  /**\n   * Specifies how much of the task has been completed. Must be a valid floating\n   * point number between 0 and max, or between 0 and 100 if max is omitted. If\n   * there is no value, the progress bar is indeterminate; this indicates that\n   * an activity is ongoing with no indication of how long it’s expected to take.\n   */\n  @property({ reflect: true, type: Number }) value?: number\n\n  /**\n   * Describes how much work the task indicated by the progress element requires.\n   * The max attribute, if present, must have a value greater than 0 and be a\n   * valid floating point number.\n   */\n  @property({ reflect: true, type: Number }) max: number = 100\n\n  /**\n   * Accessible label for the progress indicator. Visually hidden, but shown\n   * for assistive technology.\n   */\n  @property({ reflect: true }) label: string = \"Current progress\"\n\n  render() {\n    /**\n     * The Aria properties are required for now due to a Chrome bug.\n     * In the future we can probably get rid of them. For context:\n     * https://bugs.chromium.org/p/chromium/issues/detail?id=1310779\n     */\n    return html`<label>\n      <nord-visually-hidden>${this.label}</nord-visually-hidden>\n      <progress\n        ${ref(this.focusableRef)}\n        aria-valuenow=${ifDefined(this.value)}\n        aria-valuemin=\"0\"\n        aria-valuemax=${this.max}\n        tabindex=\"-1\"\n        max=${this.max}\n        value=${ifDefined(this.value)}\n      ></progress>\n    </label>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-progress-bar\": ProgressBar\n  }\n}\n"],"names":["ProgressBar","FocusableMixin","LitElement","constructor","this","render","html","label","ref","focusableRef","ifDefined","value","max","componentStyle","style","__decorate","property","reflect","type","Number","customElement"],"mappings":"wyDAkBA,IAAqBA,EAArB,cAAyCC,EAAeC,IAAxDC,kCAgB6CC,SAAc,IAM5BA,WAAgB,mBAE7CC,SAME,OAAOC,CAAI,gCACeF,KAAKG,yCAEzBC,EAAIJ,KAAKK,gCACKC,EAAUN,KAAKO,4CAEfP,KAAKQ,2BAEfR,KAAKQ,eACHF,EAAUN,KAAKO,gCAtCtBX,SAAS,CAACa,EAAgBC,GAQUC,GAA1CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,sCAOUJ,GAA1CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,oCAMJJ,GAA5BC,EAAS,CAAEC,SAAS,iCAtBFjB,KADpBoB,EAAc,sBACMpB,SAAAA"}
+{"version":3,"file":"ProgressBar.js","sources":["../src/progress-bar/ProgressBar.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./ProgressBar.css\"\n\n/**\n * Progress Bar is used to visually represent the completion\n * of a task or process. It shows how much of the task has\n * been completed and how much is still left.\n *\n * @status new\n * @category feedback\n */\n@customElement(\"nord-progress-bar\")\nexport default class ProgressBar extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  /**\n   * Specifies how much of the task has been completed. Must be a valid floating\n   * point number between 0 and max, or between 0 and 100 if max is omitted. If\n   * there is no value, the progress bar is indeterminate; this indicates that\n   * an activity is ongoing with no indication of how long it’s expected to take.\n   */\n  @property({ reflect: true, type: Number }) value?: number\n\n  /**\n   * Describes how much work the task indicated by the progress element requires.\n   * The max attribute, if present, must have a value greater than 0 and be a\n   * valid floating point number.\n   */\n  @property({ reflect: true, type: Number }) max: number = 100\n\n  /**\n   * Accessible label for the progress indicator. Visually hidden, but shown\n   * for assistive technology.\n   */\n  @property({ reflect: true }) label: string = \"Current progress\"\n\n  render() {\n    /**\n     * The Aria properties are required for now due to a Chrome bug.\n     * In the future we can probably get rid of them. For context:\n     * https://bugs.chromium.org/p/chromium/issues/detail?id=1310779\n     */\n    return html`<label>\n      <nord-visually-hidden>${this.label}</nord-visually-hidden>\n      <progress\n        ${ref(this.focusableRef)}\n        aria-valuenow=${ifDefined(this.value)}\n        aria-valuemin=\"0\"\n        aria-valuemax=${this.max}\n        tabindex=\"-1\"\n        max=${this.max}\n        value=${ifDefined(this.value)}\n      ></progress>\n    </label>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-progress-bar\": ProgressBar\n  }\n}\n"],"names":["ProgressBar","FocusableMixin","LitElement","constructor","this","max","label","render","html","ref","focusableRef","ifDefined","value","styles","componentStyle","style","__decorate","property","reflect","type","Number","prototype","customElement"],"mappings":"wyDAkBA,IAAqBA,EAArB,cAAyCC,EAAeC,IAAxDC,kCAgB6CC,KAAGC,IAAW,IAM5BD,KAAKE,MAAW,mBAE7CC,SAME,OAAOC,CAAI,gCACeJ,KAAKE,yCAEzBG,EAAIL,KAAKM,gCACKC,EAAUP,KAAKQ,4CAEfR,KAAKC,2BAEfD,KAAKC,eACHM,EAAUP,KAAKQ,gCAtCtBZ,EAAAa,OAAS,CAACC,EAAgBC,GAQUC,EAAA,CAA1CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,UAAwBpB,EAAAqB,UAAA,aAAA,GAOdL,EAAA,CAA1CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,UAA2BpB,EAAAqB,UAAA,WAAA,GAM/BL,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA0ClB,EAAAqB,UAAA,aAAA,GAtB5CrB,EAAWgB,EAAA,CAD/BM,EAAc,sBACMtB,SAAAA"}

package/lib/Radio.js

@@ -1,2 +1,2 @@
-import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{w as n,r as i,$ as o,s as r}from"./lit-element-74b6bb4b.js";import{e as s}from"./property-03f59dce.js";import{l as a}from"./if-defined-fe657a02.js";import{n as l}from"./ref-7d028e3a.js";import{L as d}from"./LightDomController-011334da.js";import{S as c}from"./SlotController-683d0e7c.js";import{F as h}from"./FocusableMixin-ebb67709.js";import{F as p}from"./FormAssociatedMixin-1f97ed66.js";import{I as m}from"./InputMixin-94d15730.js";import{s as u}from"./Component-9d373ef3.js";import{s as v}from"./FormField-50bd73d5.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./events-731d0007.js";import"./VisuallyHidden.js";class b extends c{constructor(e,t){super(e,t.slotName),this.options=t,this.onChange=()=>{this.syncLightDom()},this.options=t,this.renderHook=document.createComment(this.slotName),this.lightDom=new d(e,{render:()=>this.hasContent?n:this.options.render(),renderOptions:{renderBefore:this.renderHook}})}hostConnected(){super.hostConnected(),this.host.appendChild(this.renderHook),this.syncLightDom()}hostDisconnected(){this.renderHook.remove()}syncLightDom(){const e=this.content;e&&this.options.syncLightDom(e)}}const f=i`:host{--n-radio-size:calc(var(--n-space-m) * 1.25);display:inline-block;line-height:var(--n-line-height);font-size:var(--n-font-size-m)}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}::slotted(input){--n-radio-accent-color:var(--n-color-accent);-moz-appearance:none;-webkit-appearance:none;appearance:none;margin:0!important;padding:0!important;border:1px solid var(--n-radio-border-color,var(--n-color-border-hover))!important;border-radius:var(--n-border-radius-circle)!important;transition:none!important;display:block!important;inline-size:var(--n-radio-size)!important;block-size:var(--n-radio-size)!important;cursor:pointer}::slotted(input:checked){--n-radio-border-color:var(--n-color-accent);background:var(--n-radio-accent-color)!important}::slotted(input[aria-invalid]){--n-radio-accent-color:var(--n-color-status-danger);--n-radio-border-color:var(--n-radio-accent-color)}::slotted(input:active){opacity:.8}::slotted(input:focus-visible){outline:0!important}::slotted(input:focus){outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)!important}:host([disabled]) ::slotted(input){--n-radio-accent-color:var(--n-color-border-strong);--n-radio-border-color:var(--n-radio-accent-color);background:var(--n-radio-accent-color);cursor:default;opacity:1}:host([disabled]) ::slotted(label){color:var(--n-color-text-weaker);cursor:default}.n-dot{--n-radio-dot-size:var(--n-space-s);--n-radio-dot-inset:calc((var(--n-radio-size) - var(--n-radio-dot-size)) / 2);position:absolute;border-radius:var(--n-border-radius-circle);inline-size:var(--n-radio-dot-size);block-size:var(--n-radio-dot-size);background-color:var(--n-color-text-on-accent);inset-inline-start:var(--n-radio-dot-inset);inset-block-start:var(--n-radio-dot-inset);z-index:var(--n-index-default);pointer-events:none}.n-label-container{padding-block-end:0}::slotted(label){-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l)!important;padding-inline-start:var(--n-space-s)!important;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)}`;let g=0;const k=e=>`nord-radio-${e}-${g++}`;let $=class extends(p(m(h(r)))){constructor(){super(...arguments),this.inputId=k("input"),this.hintId=k("hint"),this.errorId=k("error"),this.hintSlot=new b(this,{slotName:"hint",render:()=>this.hint?o`<div slot="hint-internal" id="${this.hintId}">${this.hint}</div>`:n,syncLightDom:e=>{e.id=this.hintId}}),this.labelSlot=new b(this,{slotName:"label",render:()=>this.label?o`<label slot="label-internal" for="${this.inputId}">${this.label}</label>`:n,syncLightDom:e=>{!function(e){return"label"===e.localName}(e)?console.warn('NORD: Only <label> elements should be placed in radio\'s "label" slot'):e.htmlFor=this.inputId}}),this.errorSlot=new b(this,{slotName:"error",render:()=>this.error?o`<div slot="error-internal" id="${this.errorId}">${this.error}</div>`:n,syncLightDom:e=>{e.id=this.hintId}}),this.inputSlot=new d(this,{render:()=>o`<input slot="input" @blur="${this.handleBlur}" @focus="${this.handleFocus}" ${l(this.focusableRef)} class="n-input" id="${this.inputId}" type="radio" 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())}">`}),this.checked=!1,this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new Event("blur",{bubbles:!1,cancelable:!0}))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new Event("focus",{bubbles:!1,cancelable:!0}))}}get formValue(){}willUpdate(e){if(e.has("checked")){!e.get("checked")&&this.checked&&this.uncheckSiblings()}}render(){return o`<div class="n-flex"><div class="n-input-container" @change="${this.handleChange}"><slot name="input"></slot>${this.checked?o`<div class="n-dot"></div>`:n}</div><div class="n-expand"><div class="n-label-container">${e=this.hideLabel,t=()=>o`<slot name="label"></slot><slot name="label-internal"></slot>`,i=e=>o`<nord-visually-hidden>${e}</nord-visually-hidden>`,e?i(t()):t()}<div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint"></slot><slot name="hint-internal"></slot></div></div><div class="n-caption n-error" role="alert" ?hidden="${!this.hasError}"><slot name="error"></slot><slot name="error-internal"></slot></div></div></div>`;var e,t,i}uncheckSiblings(){this.getRootNode().querySelectorAll(`nord-radio[name="${this.name}"]`).forEach((e=>{e!==this&&(e.checked=!1)}))}handleChange(e){e.stopPropagation();const t=e.target;this.checked=t.checked,super.handleChange(e)}};$.styles=[u,v,f],e([s({type:Boolean,reflect:!0})],$.prototype,"checked",void 0),$=e([t("nord-radio")],$);var y=$;export{y as default};
+import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{w as n,r as o,$ as i,s as r}from"./lit-element-99bdfe5a.js";import{e as a}from"./property-03f59dce.js";import{l as s}from"./if-defined-ee2efb2f.js";import{n as l}from"./ref-7e1d4d24.js";import{L as d}from"./LightDomController-f21f0a7c.js";import{S as c}from"./SlotController-ea6eff46.js";import{o as h}from"./observe-a9c6dfb6.js";import{F as p}from"./FocusableMixin-c010d3b3.js";import{F as m}from"./FormAssociatedMixin-f69a60dd.js";import{I as u}from"./InputMixin-84ca72ae.js";import{s as v}from"./Component-6bf383d6.js";import{s as b}from"./FormField-900069ed.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./events-731d0007.js";import"./VisuallyHidden.js";class f extends c{constructor(e,t){super(e,t.slotName),this.options=t,this.onChange=()=>{this.syncLightDom()},this.renderHook=document.createComment(this.slotName),this.lightDom=new d(e,{render:()=>this.hasContent?n:this.options.render(),renderOptions:{renderBefore:this.renderHook}})}hostConnected(){super.hostConnected(),this.host.appendChild(this.renderHook),this.syncLightDom()}hostDisconnected(){this.renderHook.remove()}syncLightDom(){const e=this.content;e&&this.options.syncLightDom(e)}}const g=o`:host{--n-radio-size:calc(var(--n-space-m) * 1.25);display:inline-block;line-height:var(--n-line-height);font-size:var(--n-font-size-m)}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}::slotted(input){--n-radio-accent-color:var(--n-color-accent);-moz-appearance:none;-webkit-appearance:none;appearance:none;margin:0!important;padding:0!important;border:1px solid var(--n-radio-border-color,var(--n-color-border-hover))!important;border-radius:var(--n-border-radius-circle)!important;transition:none!important;display:block!important;inline-size:var(--n-radio-size)!important;block-size:var(--n-radio-size)!important;cursor:pointer}::slotted(input:checked){--n-radio-border-color:var(--n-color-accent);background:var(--n-radio-accent-color)!important}::slotted(input[aria-invalid]){--n-radio-accent-color:var(--n-color-status-danger);--n-radio-border-color:var(--n-radio-accent-color)}::slotted(input:active){opacity:.8}::slotted(input:focus-visible){outline:0!important}::slotted(input:focus){outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)!important}:host([disabled]) ::slotted(input){--n-radio-accent-color:var(--n-color-border-strong);--n-radio-border-color:var(--n-radio-accent-color);background:var(--n-radio-accent-color);cursor:default;opacity:1}:host([disabled]) ::slotted(label){color:var(--n-color-text-weaker);cursor:default}.n-dot{--n-radio-dot-size:var(--n-space-s);--n-radio-dot-inset:calc((var(--n-radio-size) - var(--n-radio-dot-size)) / 2);position:absolute;border-radius:var(--n-border-radius-circle);inline-size:var(--n-radio-dot-size);block-size:var(--n-radio-dot-size);background-color:var(--n-color-text-on-accent);inset-inline-start:var(--n-radio-dot-inset);inset-block-start:var(--n-radio-dot-inset);z-index:var(--n-index-default);pointer-events:none}.n-label-container{padding-block-end:0}::slotted(label){-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l)!important;padding-inline-start:var(--n-space-s)!important;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)}`;let k=0;const y=e=>`nord-radio-${e}-${k++}`;let $=class extends(m(u(p(r)))){constructor(){super(...arguments),this.inputId=y("input"),this.hintId=y("hint"),this.errorId=y("error"),this.hintSlot=new f(this,{slotName:"hint",render:()=>this.hint?i`<div slot="hint-internal" id="${this.hintId}">${this.hint}</div>`:n,syncLightDom:e=>{e.id=this.hintId}}),this.labelSlot=new f(this,{slotName:"label",render:()=>this.label?i`<label slot="label-internal" for="${this.inputId}">${this.label}</label>`:n,syncLightDom:e=>{!function(e){return"label"===e.localName}(e)?console.warn('NORD: Only <label> elements should be placed in radio\'s "label" slot'):e.htmlFor=this.inputId}}),this.errorSlot=new f(this,{slotName:"error",render:()=>this.error?i`<div slot="error-internal" id="${this.errorId}">${this.error}</div>`:n,syncLightDom:e=>{e.id=this.hintId}}),this.inputSlot=new d(this,{render:()=>i`<input slot="input" @blur="${this.handleBlur}" @focus="${this.handleFocus}" ${l(this.focusableRef)} class="n-input" id="${this.inputId}" type="radio" 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())}">`}),this.checked=!1,this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new Event("blur",{bubbles:!1,cancelable:!0}))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new Event("focus",{bubbles:!1,cancelable:!0}))}}get formValue(){}render(){return i`<div class="n-flex"><div class="n-input-container" @change="${this.handleChange}"><slot name="input"></slot>${this.checked?i`<div class="n-dot"></div>`:n}</div><div class="n-expand"><div class="n-label-container">${e=this.hideLabel,t=()=>i`<slot name="label"></slot><slot name="label-internal"></slot>`,o=e=>i`<nord-visually-hidden>${e}</nord-visually-hidden>`,e?o(t()):t()}<div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint"></slot><slot name="hint-internal"></slot></div></div><div class="n-caption n-error" role="alert" ?hidden="${!this.hasError}"><slot name="error"></slot><slot name="error-internal"></slot></div></div></div>`;var e,t,o}handleCheckedChange(e){!e&&this.checked&&this.uncheckSiblings()}uncheckSiblings(){this.getRootNode().querySelectorAll(`nord-radio[name="${this.name}"]`).forEach((e=>{e!==this&&(e.checked=!1)}))}handleChange(e){e.stopPropagation();const t=e.target;this.checked=t.checked,super.handleChange(e)}};$.styles=[v,b,g],e([a({type:Boolean,reflect:!0})],$.prototype,"checked",void 0),e([h("checked")],$.prototype,"handleCheckedChange",null),$=e([t("nord-radio")],$);var x=$;export{x as default};
 //# sourceMappingURL=Radio.js.map

package/lib/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../src/common/controllers/LightSlotController.ts","../src/radio/Radio.ts","../src/common/directives/wrapIf.ts"],"sourcesContent":["import { nothing, ReactiveControllerHost } from \"lit\"\nimport { LightDomController } from \"./LightDomController.js\"\nimport { SlotController } from \"./SlotController.js\"\n\ntype LightSlotOptions = {\n  slotName: string\n  render: () => unknown\n  syncLightDom: (element: Element) => void\n}\n\n/**\n * Handles cases where a component needs to render to light DOM,\n * and potentially sync component properties to user-supplied content.\n */\nexport class LightSlotController extends SlotController {\n  private renderHook: Comment\n  private lightDom: LightDomController\n\n  constructor(host: ReactiveControllerHost & HTMLElement, private options: LightSlotOptions) {\n    super(host, options.slotName)\n    this.options = options\n\n    // we need a node to hook onto for rendering\n    // without this, multiple controllers rendering to the light DOM\n    // will overwrite each others' content\n    this.renderHook = document.createComment(this.slotName)\n\n    this.lightDom = new LightDomController(host, {\n      render: () => (this.hasContent ? nothing : this.options.render()),\n      renderOptions: { renderBefore: this.renderHook },\n    })\n  }\n\n  hostConnected() {\n    super.hostConnected()\n    this.host.appendChild(this.renderHook)\n    this.syncLightDom()\n  }\n\n  hostDisconnected() {\n    this.renderHook.remove()\n  }\n\n  protected override onChange = () => {\n    this.syncLightDom()\n  }\n\n  private syncLightDom() {\n    const node = this.content\n\n    if (node) {\n      this.options.syncLightDom(node)\n    }\n  }\n}\n","import { html, LitElement, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { LightDomController } from \"../common/controllers/LightDomController.js\"\nimport { LightSlotController } from \"../common/controllers/LightSlotController.js\"\nimport { wrapIf } from \"../common/directives/wrapIf.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Radio.css\"\n\nlet id = 0\nconst createId = (suffix: string) => `nord-radio-${suffix}-${id++}`\n\nfunction isLabel(element: Element): element is HTMLLabelElement {\n  return element.localName === \"label\"\n}\n\n/**\n * Radio buttons are graphical user interface elements that allow user to choose only one option from\n * a predefined set of mutually exclusive options.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n */\n@customElement(\"nord-radio\")\nexport default class Radio extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  protected override inputId = createId(\"input\")\n  protected override hintId = createId(\"hint\")\n  protected override errorId = createId(\"error\")\n\n  /**\n   * For accessibility reasons, we render some parts of the component to the light DOM.\n   */\n  protected override hintSlot = new LightSlotController(this, {\n    slotName: \"hint\",\n    render: () => (this.hint ? html`<div slot=\"hint-internal\" id=${this.hintId}>${this.hint}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })\n\n  protected override labelSlot = new LightSlotController(this, {\n    slotName: \"label\",\n    render: () => (this.label ? html`<label slot=\"label-internal\" for=${this.inputId}>${this.label}</label>` : nothing),\n    syncLightDom: element => {\n      if (!isLabel(element)) {\n        // eslint-disable-next-line no-console\n        console.warn(`NORD: Only <label> elements should be placed in radio's \"label\" slot`)\n      } else {\n        element.htmlFor = this.inputId\n      }\n    },\n  })\n\n  protected override errorSlot = new LightSlotController(this, {\n    slotName: \"error\",\n    render: () => (this.error ? html`<div slot=\"error-internal\" id=${this.errorId}>${this.error}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })\n\n  protected inputSlot = new LightDomController(this, {\n    render: () =>\n      html`\n        <input\n          slot=\"input\"\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          ${ref(this.focusableRef)}\n          class=\"n-input\"\n          id=${this.inputId}\n          type=\"radio\"\n          name=${ifDefined(this.name)}\n          .value=${this.value}\n          .checked=${this.checked}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n        />\n      `,\n  })\n\n  // eslint-disable-next-line class-methods-use-this\n  protected override get formValue() {\n    // opt out of formdata event, since radio button is in light dom\n    return undefined\n  }\n\n  /**\n   * Controls whether the checkbox is checked or not.\n   */\n  @property({ type: Boolean, reflect: true }) checked: boolean = false\n\n  willUpdate(changedProperties: Map<string | number | symbol, unknown>) {\n    if (changedProperties.has(\"checked\")) {\n      const previousChecked = changedProperties.get(\"checked\")\n\n      // if this component was previous unchecked but is now checked,\n      // then we need to uncheck any radios in the same group\n      if (!previousChecked && this.checked) {\n        this.uncheckSiblings()\n      }\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"n-flex\">\n        <div class=\"n-input-container\" @change=${this.handleChange}>\n          <slot name=\"input\"></slot>\n          ${this.checked ? html`<div class=\"n-dot\"></div>` : nothing}\n        </div>\n        <div class=\"n-expand\">\n          <div class=\"n-label-container\">\n            ${wrapIf(\n              this.hideLabel,\n              () => html`\n                <slot name=\"label\"></slot>\n                <slot name=\"label-internal\"></slot>\n              `,\n              content => html`<nord-visually-hidden>${content}</nord-visually-hidden>`\n            )}\n            <div class=\"n-caption n-hint\" ?hidden=${!this.hasHint}>\n              <slot name=\"hint\"></slot>\n              <slot name=\"hint-internal\"></slot>\n            </div>\n          </div>\n          <div class=\"n-caption n-error\" role=\"alert\" ?hidden=${!this.hasError}>\n            <slot name=\"error\"></slot>\n            <slot name=\"error-internal\"></slot>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  private uncheckSiblings() {\n    const root = this.getRootNode() as Document | ShadowRoot\n\n    root.querySelectorAll<Radio>(`nord-radio[name=\"${this.name}\"]`).forEach(radio => {\n      if (radio !== this) {\n        radio.checked = false\n      }\n    })\n  }\n\n  protected handleChange(e: Event): void {\n    e.stopPropagation()\n    const target = e.target as HTMLInputElement\n\n    this.checked = target.checked\n    super.handleChange(e)\n  }\n\n  private handleBlur = (e: Event) => {\n    e.stopPropagation()\n    this.dispatchEvent(new Event(\"blur\", { bubbles: false, cancelable: true }))\n  }\n\n  private handleFocus = (e: Event) => {\n    e.stopPropagation()\n    this.dispatchEvent(new Event(\"focus\", { bubbles: false, cancelable: true }))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-radio\": Radio\n  }\n}\n","// some clever typing so that TS knows what happens if you pass true/false values\nexport function wrapIf<TInner, TWrapper>(\n  condition: false,\n  inner: () => TInner,\n  wrapper: (inner: TInner) => TWrapper\n): TInner\nexport function wrapIf<TInner, TWrapper>(\n  condition: true,\n  inner: () => TInner,\n  wrapper: (inner: TInner) => TWrapper\n): TWrapper\nexport function wrapIf<TInner, TWrapper>(\n  condition: unknown,\n  inner: () => TInner,\n  wrapper: (inner: TInner) => TWrapper\n): TInner | TWrapper\n\n/**\n * @returns if condition is truthy, return result of wrapper, passing result of inner as arg. if falsy, return result of inner\n */\nexport function wrapIf<TInner, TWrapper>(condition: any, inner: () => TInner, wrapper: (innards: TInner) => TWrapper) {\n  return condition ? wrapper(inner()) : inner()\n}\n"],"names":["LightSlotController","SlotController","constructor","host","options","super","slotName","this","syncLightDom","renderHook","document","createComment","lightDom","LightDomController","render","hasContent","nothing","renderOptions","renderBefore","hostConnected","appendChild","hostDisconnected","remove","node","content","id","createId","suffix","Radio","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","hint","html","hintId","element","label","inputId","localName","isLabel","console","warn","htmlFor","error","errorId","handleBlur","handleFocus","ref","focusableRef","ifDefined","name","value","checked","disabled","required","getDescribedBy","getInvalid","e","stopPropagation","dispatchEvent","Event","bubbles","cancelable","formValue","willUpdate","changedProperties","has","get","uncheckSiblings","handleChange","condition","hideLabel","inner","wrapper","hasHint","hasError","getRootNode","querySelectorAll","forEach","radio","target","componentStyle","formFieldStyle","style","__decorate","property","type","Boolean","reflect","customElement"],"mappings":"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"}
+{"version":3,"file":"Radio.js","sources":["../src/common/controllers/LightSlotController.ts","../src/radio/Radio.ts","../src/common/directives/wrapIf.ts"],"sourcesContent":["import { nothing, ReactiveControllerHost } from \"lit\"\nimport { LightDomController } from \"./LightDomController.js\"\nimport { SlotController } from \"./SlotController.js\"\n\ntype LightSlotOptions = {\n  slotName: string\n  render: () => unknown\n  syncLightDom: (element: Element) => void\n}\n\n/**\n * Handles cases where a component needs to render to light DOM,\n * and potentially sync component properties to user-supplied content.\n */\nexport class LightSlotController extends SlotController {\n  private renderHook: Comment\n  private lightDom: LightDomController\n\n  constructor(host: ReactiveControllerHost & HTMLElement, private options: LightSlotOptions) {\n    super(host, options.slotName)\n\n    // we need a node to hook onto for rendering\n    // without this, multiple controllers rendering to the light DOM\n    // will overwrite each others' content\n    this.renderHook = document.createComment(this.slotName)\n\n    this.lightDom = new LightDomController(host, {\n      render: () => (this.hasContent ? nothing : this.options.render()),\n      renderOptions: { renderBefore: this.renderHook },\n    })\n  }\n\n  hostConnected() {\n    super.hostConnected()\n    this.host.appendChild(this.renderHook)\n    this.syncLightDom()\n  }\n\n  hostDisconnected() {\n    this.renderHook.remove()\n  }\n\n  protected override onChange = () => {\n    this.syncLightDom()\n  }\n\n  private syncLightDom() {\n    const node = this.content\n\n    if (node) {\n      this.options.syncLightDom(node)\n    }\n  }\n}\n","import { html, LitElement, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { LightDomController } from \"../common/controllers/LightDomController.js\"\nimport { LightSlotController } from \"../common/controllers/LightSlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { wrapIf } from \"../common/directives/wrapIf.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Radio.css\"\n\nlet id = 0\nconst createId = (suffix: string) => `nord-radio-${suffix}-${id++}`\n\nfunction isLabel(element: Element): element is HTMLLabelElement {\n  return element.localName === \"label\"\n}\n\n/**\n * Radio buttons are graphical user interface elements that allow user to choose only one option from\n * a predefined set of mutually exclusive options.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n */\n@customElement(\"nord-radio\")\nexport default class Radio extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  protected override inputId = createId(\"input\")\n  protected override hintId = createId(\"hint\")\n  protected override errorId = createId(\"error\")\n\n  /**\n   * For accessibility reasons, we render some parts of the component to the light DOM.\n   */\n  protected override hintSlot = new LightSlotController(this, {\n    slotName: \"hint\",\n    render: () => (this.hint ? html`<div slot=\"hint-internal\" id=${this.hintId}>${this.hint}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })\n\n  protected override labelSlot = new LightSlotController(this, {\n    slotName: \"label\",\n    render: () => (this.label ? html`<label slot=\"label-internal\" for=${this.inputId}>${this.label}</label>` : nothing),\n    syncLightDom: element => {\n      if (!isLabel(element)) {\n        // eslint-disable-next-line no-console\n        console.warn(`NORD: Only <label> elements should be placed in radio's \"label\" slot`)\n      } else {\n        element.htmlFor = this.inputId\n      }\n    },\n  })\n\n  protected override errorSlot = new LightSlotController(this, {\n    slotName: \"error\",\n    render: () => (this.error ? html`<div slot=\"error-internal\" id=${this.errorId}>${this.error}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })\n\n  protected inputSlot = new LightDomController(this, {\n    render: () =>\n      html`\n        <input\n          slot=\"input\"\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          ${ref(this.focusableRef)}\n          class=\"n-input\"\n          id=${this.inputId}\n          type=\"radio\"\n          name=${ifDefined(this.name)}\n          .value=${this.value}\n          .checked=${this.checked}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n        />\n      `,\n  })\n\n  // eslint-disable-next-line class-methods-use-this\n  protected override get formValue() {\n    // opt out of formdata event, since radio button is in light dom\n    return undefined\n  }\n\n  /**\n   * Controls whether the checkbox is checked or not.\n   */\n  @property({ type: Boolean, reflect: true }) checked: boolean = false\n\n  render() {\n    return html`\n      <div class=\"n-flex\">\n        <div class=\"n-input-container\" @change=${this.handleChange}>\n          <slot name=\"input\"></slot>\n          ${this.checked ? html`<div class=\"n-dot\"></div>` : nothing}\n        </div>\n        <div class=\"n-expand\">\n          <div class=\"n-label-container\">\n            ${wrapIf(\n              this.hideLabel,\n              () => html`\n                <slot name=\"label\"></slot>\n                <slot name=\"label-internal\"></slot>\n              `,\n              content => html`<nord-visually-hidden>${content}</nord-visually-hidden>`\n            )}\n            <div class=\"n-caption n-hint\" ?hidden=${!this.hasHint}>\n              <slot name=\"hint\"></slot>\n              <slot name=\"hint-internal\"></slot>\n            </div>\n          </div>\n          <div class=\"n-caption n-error\" role=\"alert\" ?hidden=${!this.hasError}>\n            <slot name=\"error\"></slot>\n            <slot name=\"error-internal\"></slot>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  @observe(\"checked\")\n  protected handleCheckedChange(previousChecked: boolean) {\n    // if this component was previous unchecked but is now checked,\n    // then we need to uncheck any radios in the same group\n    if (!previousChecked && this.checked) {\n      this.uncheckSiblings()\n    }\n  }\n\n  private uncheckSiblings() {\n    const root = this.getRootNode() as Document | ShadowRoot\n\n    root.querySelectorAll<Radio>(`nord-radio[name=\"${this.name}\"]`).forEach(radio => {\n      if (radio !== this) {\n        radio.checked = false\n      }\n    })\n  }\n\n  protected handleChange(e: Event): void {\n    e.stopPropagation()\n    const target = e.target as HTMLInputElement\n\n    this.checked = target.checked\n    super.handleChange(e)\n  }\n\n  private handleBlur = (e: Event) => {\n    e.stopPropagation()\n    this.dispatchEvent(new Event(\"blur\", { bubbles: false, cancelable: true }))\n  }\n\n  private handleFocus = (e: Event) => {\n    e.stopPropagation()\n    this.dispatchEvent(new Event(\"focus\", { bubbles: false, cancelable: true }))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-radio\": Radio\n  }\n}\n","// some clever typing so that TS knows what happens if you pass true/false values\nexport function wrapIf<TInner, TWrapper>(\n  condition: false,\n  inner: () => TInner,\n  wrapper: (inner: TInner) => TWrapper\n): TInner\nexport function wrapIf<TInner, TWrapper>(\n  condition: true,\n  inner: () => TInner,\n  wrapper: (inner: TInner) => TWrapper\n): TWrapper\nexport function wrapIf<TInner, TWrapper>(\n  condition: unknown,\n  inner: () => TInner,\n  wrapper: (inner: TInner) => TWrapper\n): TInner | TWrapper\n\n/**\n * @returns if condition is truthy, return result of wrapper, passing result of inner as arg. if falsy, return result of inner\n */\nexport function wrapIf<TInner, TWrapper>(condition: any, inner: () => TInner, wrapper: (innards: TInner) => TWrapper) {\n  return condition ? wrapper(inner()) : inner()\n}\n"],"names":["LightSlotController","SlotController","constructor","host","options","super","slotName","this","onChange","syncLightDom","renderHook","document","createComment","lightDom","LightDomController","render","hasContent","nothing","renderOptions","renderBefore","hostConnected","appendChild","hostDisconnected","remove","node","content","id","createId","suffix","Radio","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","inputId","hintId","errorId","hintSlot","hint","html","element","labelSlot","label","localName","isLabel","console","warn","htmlFor","errorSlot","error","inputSlot","handleBlur","handleFocus","ref","focusableRef","ifDefined","name","value","checked","disabled","required","getDescribedBy","getInvalid","e","stopPropagation","dispatchEvent","Event","bubbles","cancelable","formValue","handleChange","condition","hideLabel","inner","wrapper","hasHint","hasError","handleCheckedChange","previousChecked","uncheckSiblings","getRootNode","querySelectorAll","forEach","radio","target","styles","componentStyle","formFieldStyle","style","__decorate","property","type","Boolean","reflect","prototype","observe","customElement"],"mappings":"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"}

package/lib/Select.js

@@ -1,2 +1,2 @@
-import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as o,$ as n,s as r}from"./lit-element-74b6bb4b.js";import{l as i}from"./if-defined-fe657a02.js";import{n as s}from"./ref-7d028e3a.js";import{o as a}from"./unsafe-html-989a642b.js";import"./Button.js";import{I as l}from"./InputMixin-94d15730.js";import{F as d}from"./FocusableMixin-ebb67709.js";import{F as c}from"./FormAssociatedMixin-1f97ed66.js";import{s as p}from"./Component-9d373ef3.js";import{s as u}from"./FormField-50bd73d5.js";import{S as b}from"./SlotController-683d0e7c.js";import"./directive-de55b00a.js";import"./property-03f59dce.js";import"./EventController-d99ebeef.js";import"./LightDomController-011334da.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const h=o`.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--n-space-xl);inset-block-end:0;inset-inline-start:0;z-index:2}nord-button{--n-button-text-align:start}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--n-button-background-color:var(--n-color-button-hover);--n-button-border-color:var(--n-color-border-hover)}.n-label-container:hover+.n-select-container nord-button svg,select:hover+nord-button svg{color:var(--n-color-icon-hover)}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}::slotted(:not([slot])){display:none}[slot=end] svg{color:var(--n-color-icon);min-inline-size:calc(var(--n-space-l)/ 2.2);max-inline-size:calc(var(--n-space-l)/ 2.2)}::slotted([slot=start]){margin-inline-start:calc(var(--n-space-s) * -1);margin-inline-end:var(--n-space-s)}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;let v=class extends(c(l(d(r)))){constructor(){super(...arguments),this.defaultSlot=new b(this),this.inputId="select"}get formValue(){return this.value||void 0}render(){const e=this.options,t=this.getButtonText(e);return n`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${s(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${i(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${i(this.getDescribedBy())}" aria-invalid="${i(this.getInvalid())}">${this.placeholder&&n`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${e.map((e=>this.renderOption(e)))}</select><nord-button tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="start" name="start"></slot>${t}<div slot="end">${a('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z"/></svg>')}</div></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(e){const t=e.find((e=>e.value===this.value.toString()));return t?t.text:this.placeholder?this.placeholder:e[0]?e[0].text:""}renderOption(e){return n`<option value="${i(e.value)}" ?disabled="${e.disabled}" ?selected="${e.value===this.value.toString()}">${e.text}</option>`}};v.styles=[p,u,h],v=e([t("nord-select")],v);var m=v;export{m as default};
+import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{r as o,$ as n,s as r}from"./lit-element-99bdfe5a.js";import{l as i}from"./if-defined-ee2efb2f.js";import{n as s}from"./ref-7e1d4d24.js";import{o as a}from"./unsafe-html-feceb926.js";import"./Button.js";import{I as l}from"./InputMixin-84ca72ae.js";import{F as d}from"./FocusableMixin-c010d3b3.js";import{F as c}from"./FormAssociatedMixin-f69a60dd.js";import{s as p}from"./Component-6bf383d6.js";import{s as u}from"./FormField-900069ed.js";import{S as b}from"./SlotController-ea6eff46.js";import"./directive-de55b00a.js";import"./property-03f59dce.js";import"./EventController-d99ebeef.js";import"./LightDomController-f21f0a7c.js";import"./cond-a3e00141.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const h=o`.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--n-space-xl);inset-block-end:0;inset-inline-start:0;z-index:2}nord-button{--n-button-text-align:start}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--n-button-background-color:var(--n-color-button-hover);--n-button-border-color:var(--n-color-border-hover)}.n-label-container:hover+.n-select-container nord-button svg,select:hover+nord-button svg{color:var(--n-color-icon-hover)}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}::slotted(:not([slot])){display:none}[slot=end] svg{color:var(--n-color-icon);min-inline-size:calc(var(--n-space-l)/ 2.2);max-inline-size:calc(var(--n-space-l)/ 2.2)}::slotted([slot=start]){margin-inline-start:calc(var(--n-space-s) * -1);margin-inline-end:var(--n-space-s)}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;let m=class extends(c(l(d(r)))){constructor(){super(...arguments),this.defaultSlot=new b(this),this.inputId="select"}get formValue(){return this.value||void 0}render(){const e=this.options,t=this.getButtonText(e);return n`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${s(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${i(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${i(this.getDescribedBy())}" aria-invalid="${i(this.getInvalid())}">${this.placeholder&&n`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${e.map((e=>this.renderOption(e)))}</select><nord-button tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="start" name="start"></slot>${t}<div slot="end">${a('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z"/></svg>')}</div></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(e){const t=e.find((e=>e.value===this.value.toString()));return t?t.text:this.placeholder?this.placeholder:e[0]?e[0].text:""}renderOption(e){return n`<option value="${i(e.value)}" ?disabled="${e.disabled}" ?selected="${e.value===this.value.toString()}">${e.text}</option>`}};m.styles=[p,u,h],m=e([t("nord-select")],m);var v=m;export{v as default};
 //# sourceMappingURL=Select.js.map

package/lib/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../src/select/Select.ts","../../icons/lib/assets/interface-dropdown-small.js"],"sourcesContent":["/* eslint-disable lit-a11y/no-invalid-change-handler */\nimport { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport \"../button/Button.js\"\n\nimport dropdownIcon from \"@nordhealth/icons/lib/assets/interface-dropdown-small.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Select.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\n/**\n * Select lets users choose one option from an options menu.\n * Consider using select when you have 5 or more options to choose from.\n *\n * @status ready\n * @category form\n * @slot - Default slot for holding <option> elements.\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Use when a hint requires more than plain text.\n * @slot error - Optional slot that holds error text for the input.\n */\n@customElement(\"nord-select\")\nexport default class Select extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  protected override get formValue() {\n    return this.value || undefined\n  }\n\n  private defaultSlot = new SlotController(this)\n\n  protected inputId = \"select\"\n\n  render() {\n    const slottedOptions = this.options\n    const buttonText = this.getButtonText(slottedOptions)\n\n    return html`\n      <slot></slot>\n      ${this.renderLabel()}\n\n      <div class=\"n-select-container\">\n        <select\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n        >\n          ${this.placeholder && html`<option value=\"\" disabled ?selected=${!this.value}>${this.placeholder}</option>`}\n          ${slottedOptions.map(option => this.renderOption(option))}\n        </select>\n\n        <nord-button tabindex=\"-1\" ?disabled=${this.disabled} ?expand=${this.expand} aria-hidden=\"true\" type=\"button\">\n          <slot slot=\"start\" name=\"start\"></slot>\n          ${buttonText}\n          <div slot=\"end\">${unsafeHTML(dropdownIcon)}</div>\n        </nord-button>\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  private get options() {\n    return Array.from(this.querySelectorAll(\"option\"))\n  }\n\n  private getButtonText(options: HTMLOptionElement[]): string {\n    const selected = options.find(option => option.value === this.value.toString())\n\n    if (selected) {\n      return selected.text\n    }\n\n    if (this.placeholder) {\n      return this.placeholder\n    }\n\n    if (options[0]) {\n      return options[0].text\n    }\n\n    return \"\"\n  }\n\n  private renderOption(option: HTMLOptionElement) {\n    return html`\n      <option\n        value=${ifDefined(option.value)}\n        ?disabled=${option.disabled}\n        ?selected=${option.value === this.value.toString()}\n      >\n        ${option.text}\n      </option>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-select\": Select\n  }\n}\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z\"/></svg>'\nexport const title = \"interface-dropdown-small\"\nexport const tags = \"nordicon small interface dropdown select arrow up down caret triangle chevron\"\n"],"names":["Select","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","SlotController","formValue","value","undefined","render","slottedOptions","options","buttonText","getButtonText","html","renderLabel","ref","focusableRef","inputId","disabled","required","ifDefined","name","handleChange","handleInput","getDescribedBy","getInvalid","placeholder","map","option","renderOption","expand","unsafeHTML","renderError","Array","from","querySelectorAll","selected","find","toString","text","componentStyle","formFieldStyle","style","customElement"],"mappings":"ukEA+BA,IAAqBA,EAArB,cAAoCC,EAAoBC,EAAWC,EAAeC,MAAlFC,kCAOUC,iBAAc,IAAIC,EAAeD,MAE/BA,aAAU,SANGE,gBACrB,OAAOF,KAAKG,YAASC,EAOvBC,SACE,MAAMC,EAAiBN,KAAKO,QACtBC,EAAaR,KAAKS,cAAcH,GAEtC,OAAOI,CAAI,gBAEPV,KAAKW,wDAIDC,EAAIZ,KAAKa,qBACNb,KAAKc,uBACEd,KAAKe,wBACLf,KAAKgB,mBACVC,EAAUjB,KAAKkB,mBACZlB,KAAKmB,yBACNnB,KAAKoB,kCACKH,EAAUjB,KAAKqB,oCACnBJ,EAAUjB,KAAKsB,kBAE5BtB,KAAKuB,aAAeb,CAAI,oDAAwCV,KAAKG,UAASH,KAAKuB,0BACnFjB,EAAekB,KAAIC,GAAUzB,KAAK0B,aAAaD,sDAGZzB,KAAKe,sBAAoBf,KAAK2B,mFAEjEnB,oBACgBoB,ECrEb,ofDyEP5B,KAAK6B,gBAICtB,cACV,OAAOuB,MAAMC,KAAK/B,KAAKgC,iBAAiB,WAGlCvB,cAAcF,GACpB,MAAM0B,EAAW1B,EAAQ2B,MAAKT,GAAUA,EAAOtB,QAAUH,KAAKG,MAAMgC,aAEpE,OAAIF,EACKA,EAASG,KAGdpC,KAAKuB,YACAvB,KAAKuB,YAGVhB,EAAQ,GACHA,EAAQ,GAAG6B,KAGb,GAGDV,aAAaD,GACnB,OAAOf,CAAI,kBAECO,EAAUQ,EAAOtB,sBACbsB,EAAOV,wBACPU,EAAOtB,QAAUH,KAAKG,MAAMgC,eAEtCV,EAAOW,kBA1ER1C,SAAS,CAAC2C,EAAgBC,EAAgBC,GAD9B7C,KADpB8C,EAAc,gBACM9C,SAAAA"}
+{"version":3,"file":"Select.js","sources":["../src/select/Select.ts","../../icons/lib/assets/interface-dropdown-small.js"],"sourcesContent":["/* eslint-disable lit-a11y/no-invalid-change-handler */\nimport { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport \"../button/Button.js\"\n\nimport dropdownIcon from \"@nordhealth/icons/lib/assets/interface-dropdown-small.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Select.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\n/**\n * Select lets users choose one option from an options menu.\n * Consider using select when you have 5 or more options to choose from.\n *\n * @status ready\n * @category form\n * @slot - Default slot for holding <option> elements.\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Use when a hint requires more than plain text.\n * @slot error - Optional slot that holds error text for the input.\n */\n@customElement(\"nord-select\")\nexport default class Select extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  protected override get formValue() {\n    return this.value || undefined\n  }\n\n  private defaultSlot = new SlotController(this)\n\n  protected inputId = \"select\"\n\n  render() {\n    const slottedOptions = this.options\n    const buttonText = this.getButtonText(slottedOptions)\n\n    return html`\n      <slot></slot>\n      ${this.renderLabel()}\n\n      <div class=\"n-select-container\">\n        <select\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n        >\n          ${this.placeholder && html`<option value=\"\" disabled ?selected=${!this.value}>${this.placeholder}</option>`}\n          ${slottedOptions.map(option => this.renderOption(option))}\n        </select>\n\n        <nord-button tabindex=\"-1\" ?disabled=${this.disabled} ?expand=${this.expand} aria-hidden=\"true\" type=\"button\">\n          <slot slot=\"start\" name=\"start\"></slot>\n          ${buttonText}\n          <div slot=\"end\">${unsafeHTML(dropdownIcon)}</div>\n        </nord-button>\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  private get options() {\n    return Array.from(this.querySelectorAll(\"option\"))\n  }\n\n  private getButtonText(options: HTMLOptionElement[]): string {\n    const selected = options.find(option => option.value === this.value.toString())\n\n    if (selected) {\n      return selected.text\n    }\n\n    if (this.placeholder) {\n      return this.placeholder\n    }\n\n    if (options[0]) {\n      return options[0].text\n    }\n\n    return \"\"\n  }\n\n  private renderOption(option: HTMLOptionElement) {\n    return html`\n      <option\n        value=${ifDefined(option.value)}\n        ?disabled=${option.disabled}\n        ?selected=${option.value === this.value.toString()}\n      >\n        ${option.text}\n      </option>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-select\": Select\n  }\n}\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z\"/></svg>'\nexport const title = \"interface-dropdown-small\"\nexport const tags = \"nordicon small interface dropdown select arrow up down caret triangle chevron\"\n"],"names":["Select","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","defaultSlot","SlotController","inputId","formValue","value","undefined","render","slottedOptions","options","buttonText","getButtonText","html","renderLabel","ref","focusableRef","disabled","required","ifDefined","name","handleChange","handleInput","getDescribedBy","getInvalid","placeholder","map","option","renderOption","expand","unsafeHTML","renderError","Array","from","querySelectorAll","selected","find","toString","text","styles","componentStyle","formFieldStyle","style","__decorate","customElement"],"mappings":"kmEA+BA,IAAqBA,EAArB,cAAoCC,EAAoBC,EAAWC,EAAeC,MAAlFC,kCAOUC,KAAAC,YAAc,IAAIC,EAAeF,MAE/BA,KAAOG,QAAG,SANGC,gBACrB,OAAOJ,KAAKK,YAASC,EAOvBC,SACE,MAAMC,EAAiBR,KAAKS,QACtBC,EAAaV,KAAKW,cAAcH,GAEtC,OAAOI,CAAI,gBAEPZ,KAAKa,wDAIDC,EAAId,KAAKe,qBACNf,KAAKG,uBACEH,KAAKgB,wBACLhB,KAAKiB,mBACVC,EAAUlB,KAAKmB,mBACZnB,KAAKoB,yBACNpB,KAAKqB,kCACKH,EAAUlB,KAAKsB,oCACnBJ,EAAUlB,KAAKuB,kBAE5BvB,KAAKwB,aAAeZ,CAAI,oDAAwCZ,KAAKK,UAASL,KAAKwB,0BACnFhB,EAAeiB,KAAIC,GAAU1B,KAAK2B,aAAaD,sDAGZ1B,KAAKgB,sBAAoBhB,KAAK4B,mFAEjElB,oBACgBmB,ECrEb,ofDyEP7B,KAAK8B,gBAICrB,cACV,OAAOsB,MAAMC,KAAKhC,KAAKiC,iBAAiB,WAGlCtB,cAAcF,GACpB,MAAMyB,EAAWzB,EAAQ0B,MAAKT,GAAUA,EAAOrB,QAAUL,KAAKK,MAAM+B,aAEpE,OAAIF,EACKA,EAASG,KAGdrC,KAAKwB,YACAxB,KAAKwB,YAGVf,EAAQ,GACHA,EAAQ,GAAG4B,KAGb,GAGDV,aAAaD,GACnB,OAAOd,CAAI,kBAECM,EAAUQ,EAAOrB,sBACbqB,EAAOV,wBACPU,EAAOrB,QAAUL,KAAKK,MAAM+B,eAEtCV,EAAOW,kBA1ER3C,EAAM4C,OAAG,CAACC,EAAgBC,EAAgBC,GAD9B/C,EAAMgD,EAAA,CAD1BC,EAAc,gBACMjD,SAAAA"}

package/lib/SelectEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectEvent.js","sources":["../src/command-menu/SelectEvent.ts"],"sourcesContent":["import { NordEvent } from \"../common/events.js\"\nimport { ICommandMenuAction } from \"./ICommandMenuAction.js\"\n\nexport class SelectEvent extends NordEvent {\n  static eventName = \"nord-select\"\n  command: ICommandMenuAction\n\n  constructor(command: ICommandMenuAction) {\n    super(SelectEvent.eventName)\n    this.command = command\n  }\n}\n"],"names":["SelectEvent","NordEvent","constructor","command","super","eventName","this"],"mappings":"+CAGaA,UAAoBC,EAI/BC,YAAYC,GACVC,MAAMJ,EAAYK,WAClBC,KAAKH,QAAUA,GALVH,YAAY"}
+{"version":3,"file":"SelectEvent.js","sources":["../src/command-menu/SelectEvent.ts"],"sourcesContent":["import { NordEvent } from \"../common/events.js\"\nimport { ICommandMenuAction } from \"./ICommandMenuAction.js\"\n\nexport class SelectEvent extends NordEvent {\n  static eventName = \"nord-select\"\n\n  constructor(public command: ICommandMenuAction) {\n    super(SelectEvent.eventName)\n  }\n}\n"],"names":["SelectEvent","NordEvent","constructor","command","super","eventName","this"],"mappings":"yCAGM,MAAOA,UAAoBC,EAG/BC,YAAmBC,GACjBC,MAAMJ,EAAYK,WADDC,KAAOH,QAAPA,GAFZH,EAASK,UAAG"}

package/lib/ShortcutController-87615e31.js

@@ -0,0 +1,2 @@
+import{i as t}from"./tinykeys.module-84e6cc41.js";const s=/Arrow(Up|Down|Left|Right)/g,i=/Escape/g;class n{constructor(t,s,i=window){this.shortcuts=s,this.target=i,t.addController(this)}hostConnected(){this.shortcuts&&this.bind(this.shortcuts)}hostDisconnected(){this.unbind()}unbind(){var t;null===(t=this.unregister)||void 0===t||t.call(this)}bind(n){this.unbind(),this.shortcuts=n,this.unregister=t(this.target,function(t){const n={};return Object.keys(t).forEach((o=>{if(n[o]=t[o],s.test(o)){const t=o.replace(s,((t,s)=>s));n[t]=n[o]}if(i.test(o)){const t=o.replace(i,(()=>"Esc"));n[t]=n[o]}})),n}(this.shortcuts))}}export{n as S};
+//# sourceMappingURL=ShortcutController-87615e31.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ShortcutController-87615e31.js","sources":["../src/common/controllers/ShortcutController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport type { KeyBindingMap } from \"tinykeys\"\nimport tinykeys from \"tinykeys\"\n\ntype ShortcutTarget = Parameters<typeof tinykeys>[0]\n\nconst ARROW_RE = /Arrow(Up|Down|Left|Right)/g\nconst ESC_RE = /Escape/g\n\nfunction normalise(shortcuts: KeyBindingMap) {\n  const normalised: KeyBindingMap = {}\n\n  Object.keys(shortcuts).forEach(keybinding => {\n    normalised[keybinding] = shortcuts[keybinding]\n\n    // Arrow and Escape keys in IE/Edge have different names\n    if (ARROW_RE.test(keybinding)) {\n      const mapped = keybinding.replace(ARROW_RE, (_match, capture) => capture)\n      normalised[mapped] = normalised[keybinding]\n    }\n    if (ESC_RE.test(keybinding)) {\n      const mapped = keybinding.replace(ESC_RE, () => \"Esc\")\n      normalised[mapped] = normalised[keybinding]\n    }\n  })\n\n  return normalised\n}\n\nexport class ShortcutController implements ReactiveController {\n  private unregister?: ReturnType<typeof tinykeys>\n\n  constructor(\n    host: ReactiveControllerHost,\n    private shortcuts?: KeyBindingMap,\n    private target: ShortcutTarget = window\n  ) {\n    host.addController(this)\n  }\n\n  hostConnected() {\n    if (this.shortcuts) {\n      this.bind(this.shortcuts)\n    }\n  }\n\n  hostDisconnected() {\n    this.unbind()\n  }\n\n  unbind() {\n    this.unregister?.()\n  }\n\n  bind(shortcuts: KeyBindingMap) {\n    this.unbind()\n    this.shortcuts = shortcuts\n    this.unregister = tinykeys(this.target, normalise(this.shortcuts))\n  }\n}\n\nexport type { KeyBindingMap as ShortcutMap }\n"],"names":["ARROW_RE","ESC_RE","ShortcutController","constructor","host","shortcuts","target","window","this","addController","hostConnected","bind","hostDisconnected","unbind","_a","unregister","call","tinykeys","normalised","Object","keys","forEach","keybinding","test","mapped","replace","_match","capture","normalise"],"mappings":"kDAMA,MAAMA,EAAW,6BACXC,EAAS,gBAsBFC,EAGXC,YACEC,EACQC,EACAC,EAAyBC,QADzBC,KAASH,UAATA,EACAG,KAAMF,OAANA,EAERF,EAAKK,cAAcD,MAGrBE,gBACMF,KAAKH,WACPG,KAAKG,KAAKH,KAAKH,WAInBO,mBACEJ,KAAKK,SAGPA,eACE,QAAAC,EAAAN,KAAKO,kBAAL,IAAAD,GAAAA,EAAAE,KAAAR,MAGFG,KAAKN,GACHG,KAAKK,SACLL,KAAKH,UAAYA,EACjBG,KAAKO,WAAaE,EAAST,KAAKF,OAhDpC,SAAmBD,GACjB,MAAMa,EAA4B,GAgBlC,OAdAC,OAAOC,KAAKf,GAAWgB,SAAQC,IAI7B,GAHAJ,EAAWI,GAAcjB,EAAUiB,GAG/BtB,EAASuB,KAAKD,GAAa,CAC7B,MAAME,EAASF,EAAWG,QAAQzB,GAAU,CAAC0B,EAAQC,IAAYA,IACjET,EAAWM,GAAUN,EAAWI,GAElC,GAAIrB,EAAOsB,KAAKD,GAAa,CAC3B,MAAME,EAASF,EAAWG,QAAQxB,GAAQ,IAAM,QAChDiB,EAAWM,GAAUN,EAAWI,OAI7BJ,EA+BmCU,CAAUpB,KAAKH"}

package/lib/SlotController-ea6eff46.js

@@ -0,0 +1,2 @@
+import{E as t}from"./EventController-d99ebeef.js";class s{constructor(s,e=""){this.host=s,this.slotName=e,this.handleSlotChange=t=>{t.target.name===this.slotName&&this.onChange(t)},s.addController(this),this.events=new t(s)}hostConnected(){this.host.shadowRoot&&this.events.listen(this.host.shadowRoot,"slotchange",this.handleSlotChange)}get hasContent(){return null!=this.content}get isEmpty(){return!this.hasContent}get content(){const t=this.slotName?`[slot="${this.slotName}"]`:":not([slot])";return this.host.querySelector(t)}onChange(t){this.host.requestUpdate()}}export{s as S};
+//# sourceMappingURL=SlotController-ea6eff46.js.map

package/lib/SlotController-ea6eff46.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlotController-ea6eff46.js","sources":["../src/common/controllers/SlotController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { EventController } from \"./EventController.js\"\n\nexport class SlotController implements ReactiveController {\n  private events: EventController\n\n  constructor(protected host: ReactiveControllerHost & HTMLElement, public slotName: string = \"\") {\n    host.addController(this)\n    this.events = new EventController(host)\n  }\n\n  hostConnected() {\n    if (this.host.shadowRoot) {\n      this.events.listen(this.host.shadowRoot, \"slotchange\", this.handleSlotChange)\n    }\n  }\n\n  get hasContent() {\n    return this.content != null\n  }\n\n  get isEmpty() {\n    return !this.hasContent\n  }\n\n  get content() {\n    const selector = this.slotName ? `[slot=\"${this.slotName}\"]` : `:not([slot])`\n    return this.host.querySelector(selector)\n  }\n\n  private handleSlotChange = (e: Event) => {\n    const slot = e.target as HTMLSlotElement\n\n    if (slot.name === this.slotName) {\n      this.onChange(e)\n    }\n  }\n\n  protected onChange(_e: Event) {\n    this.host.requestUpdate()\n  }\n}\n"],"names":["SlotController","constructor","host","slotName","this","handleSlotChange","e","target","name","onChange","addController","events","EventController","hostConnected","shadowRoot","listen","hasContent","content","isEmpty","selector","querySelector","_e","requestUpdate"],"mappings":"wDAGaA,EAGXC,YAAsBC,EAAmDC,EAAmB,IAAtEC,KAAIF,KAAJA,EAAmDE,KAAQD,SAARA,EAwBjEC,KAAAC,iBAAoBC,IACbA,EAAEC,OAENC,OAASJ,KAAKD,UACrBC,KAAKK,SAASH,IA3BhBJ,EAAKQ,cAAcN,MACnBA,KAAKO,OAAS,IAAIC,EAAgBV,GAGpCW,gBACMT,KAAKF,KAAKY,YACZV,KAAKO,OAAOI,OAAOX,KAAKF,KAAKY,WAAY,aAAcV,KAAKC,kBAI5DW,iBACF,OAAuB,MAAhBZ,KAAKa,QAGVC,cACF,OAAQd,KAAKY,WAGXC,cACF,MAAME,EAAWf,KAAKD,SAAW,UAAUC,KAAKD,aAAe,eAC/D,OAAOC,KAAKF,KAAKkB,cAAcD,GAWvBV,SAASY,GACjBjB,KAAKF,KAAKoB"}

package/lib/Spinner.js

@@ -1,2 +1,2 @@
-import{_ as e,n as r}from"./query-assigned-elements-37b095c4.js";import{r as n,s as i,$ as o}from"./lit-element-74b6bb4b.js";import{e as s}from"./property-03f59dce.js";import{l as t}from"./if-defined-fe657a02.js";import{s as a}from"./Component-9d373ef3.js";const l=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 c=class extends i{constructor(){super(...arguments),this.size="m"}render(){return o`<div class="n-spinner" role="${t(this.label?"img":void 0)}" aria-label="${t(this.label)}" style="${t(this.color?`color:${this.color}`:void 0)}"></div>`}};c.styles=[a,l],e([s({reflect:!0})],c.prototype,"size",void 0),e([s({reflect:!0})],c.prototype,"color",void 0),e([s({reflect:!0})],c.prototype,"label",void 0),c=e([r("nord-spinner")],c);var d=c;export{d 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-99bdfe5a.js";import{e as o}from"./property-03f59dce.js";import{l as t}from"./if-defined-ee2efb2f.js";import{c as a}from"./cond-a3e00141.js";import{s as l}from"./Component-6bf383d6.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/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 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=${ifDefined(this.label ? \"img\" : undefined)}\n        aria-label=${ifDefined(this.label)}\n        style=${ifDefined(this.color ? `color:${this.color}` : undefined)}\n      ></div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-spinner\": Spinner\n  }\n}\n"],"names":["Spinner","LitElement","constructor","this","render","html","ifDefined","label","undefined","color","componentStyle","style","__decorate","property","reflect","customElement"],"mappings":"47CAeA,IAAqBA,EAArB,cAAqCC,EAArCC,kCAM+BC,UAA8C,IAc3EC,SAGE,OAAOC,CAAI,gCAGAC,EAAUH,KAAKI,MAAQ,WAAQC,mBACzBF,EAAUH,KAAKI,kBACpBD,EAAUH,KAAKM,MAAQ,SAASN,KAAKM,aAAUD,eA3BtDR,SAAS,CAACU,EAAgBC,GAKJC,GAA5BC,EAAS,CAAEC,SAAS,gCAMQF,GAA5BC,EAAS,CAAEC,SAAS,iCAMQF,GAA5BC,EAAS,CAAEC,SAAS,iCAlBFd,KADpBe,EAAc,iBACMf,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":"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"}

package/lib/Stack.js

@@ -1,2 +1,2 @@
-import{_ as t,n as e}from"./query-assigned-elements-37b095c4.js";import{r as s,s as n,$ as o}from"./lit-element-74b6bb4b.js";import{e as i}from"./property-03f59dce.js";import{s as a}from"./Component-9d373ef3.js";const r=s`:host{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;font-size:var(--n-font-size-m);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=[a,r],t([i({reflect:!0})],c.prototype,"gap",void 0),t([i({reflect:!0})],c.prototype,"direction",void 0),t([i({reflect:!0,attribute:"align-items"})],c.prototype,"alignItems",void 0),t([i({reflect:!0,type:Boolean})],c.prototype,"responsive",void 0),t([i({reflect:!0,type:Boolean})],c.prototype,"wrap",void 0),t([i({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-99bdfe5a.js";import{e as i}from"./property-03f59dce.js";import{s as a}from"./Component-6bf383d6.js";const r=s`:host{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;font-size:var(--n-font-size-m);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=[a,r],t([i({reflect:!0})],p.prototype,"gap",void 0),t([i({reflect:!0})],p.prototype,"direction",void 0),t([i({reflect:!0,attribute:"align-items"})],p.prototype,"alignItems",void 0),t([i({reflect:!0,type:Boolean})],p.prototype,"responsive",void 0),t([i({reflect:!0,type:Boolean})],p.prototype,"wrap",void 0),t([i({reflect:!0,attribute:"justify-content"})],p.prototype,"justifyContent",void 0),p=t([e("nord-stack")],p);var c=p;export{c as default};
 //# sourceMappingURL=Stack.js.map

package/lib/Stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.js","sources":["../src/stack/Stack.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Stack.css\"\n\n/**\n * Stack component manages layout of immediate children along the\n * vertical or horizontal axis with optional spacing between each child.\n *\n * @status ready\n * @category structure\n * @slot - The stack content.\n */\n@customElement(\"nord-stack\")\nexport default class Stack extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * The space injected between components.\n   */\n  @property({ reflect: true }) gap: \"none\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" = \"m\"\n\n  /**\n   * The direction of the stack.\n   */\n  @property({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\"\n\n  /**\n   * How to align the child items inside the stack.\n   */\n  @property({ reflect: true, attribute: \"align-items\" }) alignItems?: \"center\" | \"start\" | \"end\" | \"stretch\" = \"stretch\"\n\n  /**\n   * Enable or disable responsive behaviour of the stack component.\n   * Setting this option \"true\" makes sure that contents are\n   * stacked vertically on mobile (768px and under).\n   */\n  @property({ reflect: true, type: Boolean }) responsive = false\n\n  /**\n   * Defines whether the Stack items are forced in a single line\n   * or can be flowed into multiple lines.\n   */\n  @property({ reflect: true, type: Boolean }) wrap = false\n\n  /**\n   * How to justify the child items inside the stack.\n   */\n  @property({ reflect: true, attribute: \"justify-content\" }) justifyContent?:\n    | \"center\"\n    | \"start\"\n    | \"end\"\n    | \"baseline\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\"\n\n  render() {\n    return html`<slot></slot>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-stack\": Stack\n  }\n}\n"],"names":["Stack","LitElement","constructor","this","render","html","componentStyle","style","__decorate","property","reflect","attribute","type","Boolean","customElement"],"mappings":"u7CAcA,IAAqBA,EAArB,cAAmCC,EAAnCC,kCAM+BC,SAA+C,IAK/CA,eAAuC,WAKbA,gBAAsD,UAOjEA,iBAAa,EAMbA,WAAO,EAcnDC,SACE,OAAOC,CAAI,kBA3CNL,SAAS,CAACM,EAAgBC,GAKJC,GAA5BC,EAAS,CAAEC,SAAS,+BAKQF,GAA5BC,EAAS,CAAEC,SAAS,qCAKkCF,GAAtDC,EAAS,CAAEC,SAAS,EAAMC,UAAW,kDAOMH,GAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,4CAMWL,GAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,sCAK0BL,GAA1DC,EAAS,CAAEC,SAAS,EAAMC,UAAW,0DAlCnBX,KADpBc,EAAc,eACMd,SAAAA"}
+{"version":3,"file":"Stack.js","sources":["../src/stack/Stack.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Stack.css\"\n\n/**\n * Stack component manages layout of immediate children along the\n * vertical or horizontal axis with optional spacing between each child.\n *\n * @status ready\n * @category structure\n * @slot - The stack content.\n */\n@customElement(\"nord-stack\")\nexport default class Stack extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * The space injected between components.\n   */\n  @property({ reflect: true }) gap: \"none\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" = \"m\"\n\n  /**\n   * The direction of the stack.\n   */\n  @property({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\"\n\n  /**\n   * How to align the child items inside the stack.\n   */\n  @property({ reflect: true, attribute: \"align-items\" }) alignItems?: \"center\" | \"start\" | \"end\" | \"stretch\" = \"stretch\"\n\n  /**\n   * Enable or disable responsive behaviour of the stack component.\n   * Setting this option \"true\" makes sure that contents are\n   * stacked vertically on mobile (768px and under).\n   */\n  @property({ reflect: true, type: Boolean }) responsive = false\n\n  /**\n   * Defines whether the Stack items are forced in a single line\n   * or can be flowed into multiple lines.\n   */\n  @property({ reflect: true, type: Boolean }) wrap = false\n\n  /**\n   * How to justify the child items inside the stack.\n   */\n  @property({ reflect: true, attribute: \"justify-content\" }) justifyContent?:\n    | \"center\"\n    | \"start\"\n    | \"end\"\n    | \"baseline\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\"\n\n  render() {\n    return html`<slot></slot>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-stack\": Stack\n  }\n}\n"],"names":["Stack","LitElement","constructor","this","gap","direction","alignItems","responsive","wrap","render","html","styles","componentStyle","style","__decorate","property","reflect","prototype","attribute","type","Boolean","customElement"],"mappings":"u7CAcA,IAAqBA,EAArB,cAAmCC,EAAnCC,kCAM+BC,KAAGC,IAA4C,IAK/CD,KAASE,UAA8B,WAKbF,KAAUG,WAA4C,UAOjEH,KAAUI,YAAG,EAMbJ,KAAIK,MAAG,EAcnDC,SACE,OAAOC,CAAI,kBA3CNV,EAAAW,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA0DhB,EAAAiB,UAAA,WAAA,GAKlDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyDhB,EAAAiB,UAAA,iBAAA,GAKvBH,EAAA,CAAtDC,EAAS,CAAEC,SAAS,EAAME,UAAW,iBAAgFlB,EAAAiB,UAAA,kBAAA,GAO1EH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMG,KAAMC,WAA6BpB,EAAAiB,UAAA,kBAAA,GAMlBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMG,KAAMC,WAAuBpB,EAAAiB,UAAA,YAAA,GAKGH,EAAA,CAA1DC,EAAS,CAAEC,SAAS,EAAME,UAAW,qBAOpBlB,EAAAiB,UAAA,sBAAA,GAzCCjB,EAAKc,EAAA,CADzBO,EAAc,eACMrB,SAAAA"}

package/lib/Table.js

@@ -1,2 +1,2 @@
-import{_ as t,n as e}from"./query-assigned-elements-37b095c4.js";import{r as a,s as n,x as o,$ as r}from"./lit-element-74b6bb4b.js";import{e as d}from"./property-03f59dce.js";const l=a`nord-table{all:initial;color:var(--n-color-text)}nord-table[density=condensed]{--n-table-td-padding:calc(var(--n-space-m) * 0.7)}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 t=this.getRootNode(),e=t.nodeType===Node.DOCUMENT_NODE?t.head:t;const a=this.localName;t.querySelector(`style[data-component=${a}]`)||o(r`<style data-component="${a}">${l}</style>`,e)}createRenderRoot(){return this}};i.styles=l,t([d({reflect:!0})],i.prototype,"density",void 0),i=t([e("nord-table")],i);var c=i;export{c as default};
+import{_ as t,n as e}from"./query-assigned-elements-ef860822.js";import{r as a,s as n,x as o,$ as r}from"./lit-element-99bdfe5a.js";import{e as d}from"./property-03f59dce.js";const l=a`nord-table{all:initial;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-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 t=this.getRootNode(),e=t.nodeType===Node.DOCUMENT_NODE?t.head:t;const a=this.localName;t.querySelector(`style[data-component=${a}]`)||o(r`<style data-component="${a}">${l}</style>`,e)}createRenderRoot(){return this}};i.styles=l,t([d({reflect:!0})],i.prototype,"density",void 0),i=t([e("nord-table")],i);var c=i;export{c 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","connectedCallback","super","renderStyles","rootNode","getRootNode","renderTarget","nodeType","Node","DOCUMENT_NODE","head","tagName","localName","querySelector","render","html","style","createRenderRoot","__decorate","property","reflect","customElement"],"mappings":"mpEAkBA,IAAqBA,EAArB,cAAmCC,EAAnCC,kCAO+BC,aAA+C,UAE5EC,oBACEC,MAAMD,oBACND,KAAKG,eAOCA,eACN,MAAMC,EAAWJ,KAAKK,cAChBC,EAA0BF,EAjCtBG,WAAaC,KAAKC,cAiCgBL,EAASM,KAAON,EAC5D,MAAMO,EAAUX,KAAKY,UAEGR,EAASS,cAAc,wBAAwBF,OAKvEG,EACEC,CAAI,0BACsBJ,MACpBK,YAGNV,GAOMW,mBACR,OAAOjB,OAzCFH,SAASmB,EAMaE,GAA5BC,EAAS,CAAEC,SAAS,mCAPFvB,KADpBwB,EAAc,eACMxB,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 - 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":"mpEAkBA,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"}

package/lib/{TextField-9bee8388.js → TextField-0ba775e0.js}

@@ -1,2 +1,2 @@
-import{r as n}from"./lit-element-74b6bb4b.js";const r=n`.n-input-container{position:relative}.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);min-inline-size:240px;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]){inline-size:100%}:host([expand]) .n-input{display:block;min-inline-size:0;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-9bee8388.js.map
+import{r as n}from"./lit-element-99bdfe5a.js";const r=n`.n-input-container{position:relative}.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);min-inline-size:240px;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]){inline-size:100%}:host([expand]) .n-input{display:block;min-inline-size:0;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-0ba775e0.js.map

package/lib/TextField-0ba775e0.js.map

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

package/lib/Textarea.js

@@ -1,2 +1,2 @@
-import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as i,$ as s,s as r}from"./lit-element-74b6bb4b.js";import{e as o}from"./property-03f59dce.js";import{l as a}from"./if-defined-fe657a02.js";import{n}from"./ref-7d028e3a.js";import{F as l}from"./FocusableMixin-ebb67709.js";import{F as d}from"./FormAssociatedMixin-1f97ed66.js";import{I as h}from"./InputMixin-94d15730.js";import{s as p}from"./Component-9d373ef3.js";import{s as m}from"./FormField-50bd73d5.js";import{s as u}from"./TextField-9bee8388.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-683d0e7c.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 f=class extends(d(h(l(r)))){constructor(){super(...arguments),this.inputId="textarea",this.resize="vertical"}updated(e){(e.has("resize")||e.has("value"))&&this.resizeToFitContent()}render(){var e;return s`${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)}};f.styles=[p,m,u,c],e([o({reflect:!0})],f.prototype,"resize",void 0),f=e([t("nord-textarea")],f);var b=f;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-99bdfe5a.js";import{e as o}from"./property-03f59dce.js";import{l as a}from"./if-defined-ee2efb2f.js";import{n}from"./ref-7e1d4d24.js";import{o as d}from"./observe-a9c6dfb6.js";import{F as l}from"./FocusableMixin-c010d3b3.js";import{F as p}from"./FormAssociatedMixin-f69a60dd.js";import{I as m}from"./InputMixin-84ca72ae.js";import{s as h}from"./Component-6bf383d6.js";import{s as f}from"./FormField-900069ed.js";import{s as u}from"./TextField-0ba775e0.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 b=class extends(p(m(l(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)}};b.styles=[h,f,u,c],e([o({reflect:!0})],b.prototype,"resize",void 0),e([d("resize","updated"),d("value","updated")],b.prototype,"resizeToFitContent",null),b=e([t("nord-textarea")],b);var v=b;export{v as default};
 //# sourceMappingURL=Textarea.js.map

package/lib/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../src/textarea/Textarea.ts"],"sourcesContent":["import { LitElement, html, PropertyValues } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Textarea.css\"\n\n/**\n * Textarea is a component that allows user to write text over\n * multiple rows. Used when the expected user input is long.\n * For shorter input, use the Input component.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the textarea.\n * @slot error - Optional slot that holds error text for the textarea.\n */\n@customElement(\"nord-textarea\")\nexport default class Textarea extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  protected inputId = \"textarea\"\n\n  /**\n   * Controls whether the textarea is resizable.\n   * By default is manually resizable vertically.\n   * Set to \"auto\" to enable auto-resizing as content grows.\n   */\n  @property({ reflect: true }) resize: \"vertical\" | \"auto\" = \"vertical\"\n\n  updated(changedProperties: PropertyValues<this>) {\n    if (changedProperties.has(\"resize\") || changedProperties.has(\"value\")) {\n      this.resizeToFitContent()\n    }\n  }\n\n  render() {\n    return html`\n      ${this.renderLabel()}\n\n      <div class=\"n-input-container\">\n        <textarea\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          class=\"n-input\"\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\n          .value=${this.value ?? \"\"}\n          placeholder=${ifDefined(this.placeholder)}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n        ></textarea>\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  private resizeToFitContent() {\n    const textarea = this.focusableRef.value\n\n    if (!textarea) {\n      return\n    }\n\n    if (this.resize === \"auto\") {\n      textarea.style.height = \"auto\"\n      textarea.style.height = `${textarea.scrollHeight}px`\n    } else {\n      // @ts-expect-error this is actually fine, and removes the style value\n      textarea.style.height = null\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-textarea\": Textarea\n  }\n}\n"],"names":["Textarea","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","updated","changedProperties","has","resizeToFitContent","render","html","renderLabel","ref","focusableRef","inputId","disabled","required","ifDefined","name","value","placeholder","handleChange","handleInput","getDescribedBy","getInvalid","renderError","textarea","resize","style","height","scrollHeight","componentStyle","formFieldStyle","textFieldStyle","__decorate","property","reflect","customElement"],"mappings":"q8BA0BA,IAAqBA,EAArB,cAAsCC,EAAoBC,EAAWC,EAAeC,MAApFC,kCAGYC,aAAU,WAOSA,YAA8B,WAE3DC,QAAQC,IACFA,EAAkBC,IAAI,WAAaD,EAAkBC,IAAI,WAC3DH,KAAKI,qBAITC,eACE,OAAOC,CAAI,GACPN,KAAKO,yDAIDC,EAAIR,KAAKS,qBACNT,KAAKU,uCAEEV,KAAKW,wBACLX,KAAKY,mBACVC,EAAUb,KAAKc,4BACbd,KAAKe,qBAAS,oBACTF,EAAUb,KAAKgB,0BACnBhB,KAAKiB,yBACNjB,KAAKkB,kCACKL,EAAUb,KAAKmB,oCACnBN,EAAUb,KAAKoB,mCAIhCpB,KAAKqB,gBAIHjB,qBACN,MAAMkB,EAAWtB,KAAKS,aAAaM,MAE9BO,IAIe,SAAhBtB,KAAKuB,QACPD,EAASE,MAAMC,OAAS,OACxBH,EAASE,MAAMC,OAAS,GAAGH,EAASI,kBAGpCJ,EAASE,MAAMC,OAAS,QAtDrB/B,SAAS,CAACiC,EAAgBC,EAAgBC,EAAgBL,GASpCM,GAA5BC,EAAS,CAAEC,SAAS,kCAVFtC,KADpBuC,EAAc,kBACMvC,SAAAA"}
+{"version":3,"file":"Textarea.js","sources":["../src/textarea/Textarea.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Textarea.css\"\n\n/**\n * Textarea is a component that allows user to write text over\n * multiple rows. Used when the expected user input is long.\n * For shorter input, use the Input component.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the textarea.\n * @slot error - Optional slot that holds error text for the textarea.\n */\n@customElement(\"nord-textarea\")\nexport default class Textarea extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  protected inputId = \"textarea\"\n\n  /**\n   * Controls whether the textarea is resizable.\n   * By default is manually resizable vertically.\n   * Set to \"auto\" to enable auto-resizing as content grows.\n   */\n  @property({ reflect: true }) resize: \"vertical\" | \"auto\" = \"vertical\"\n\n  render() {\n    return html`\n      ${this.renderLabel()}\n\n      <div class=\"n-input-container\">\n        <textarea\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          class=\"n-input\"\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\n          .value=${this.value ?? \"\"}\n          placeholder=${ifDefined(this.placeholder)}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n        ></textarea>\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  @observe(\"resize\", \"updated\")\n  @observe(\"value\", \"updated\")\n  protected resizeToFitContent() {\n    const textarea = this.focusableRef.value\n\n    if (!textarea) {\n      return\n    }\n\n    if (this.resize === \"auto\") {\n      textarea.style.height = \"auto\"\n      textarea.style.height = `${textarea.scrollHeight}px`\n    } else {\n      // @ts-expect-error this is actually fine, and removes the style value\n      textarea.style.height = null\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-textarea\": Textarea\n  }\n}\n"],"names":["Textarea","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","inputId","resize","render","html","renderLabel","ref","focusableRef","disabled","required","ifDefined","name","_a","value","placeholder","handleChange","handleInput","getDescribedBy","getInvalid","renderError","resizeToFitContent","textarea","style","height","scrollHeight","styles","componentStyle","formFieldStyle","textFieldStyle","__decorate","property","reflect","prototype","observe","customElement"],"mappings":"0+BA2BA,IAAqBA,EAArB,cAAsCC,EAAoBC,EAAWC,EAAeC,MAApFC,kCAGYC,KAAOC,QAAG,WAOSD,KAAME,OAAwB,WAE3DC,eACE,OAAOC,CAAI,GACPJ,KAAKK,yDAIDC,EAAIN,KAAKO,qBACNP,KAAKC,uCAEED,KAAKQ,wBACLR,KAAKS,mBACVC,EAAUV,KAAKW,kBACH,QAAVC,EAAAZ,KAAKa,aAAK,IAAAD,EAAAA,EAAI,oBACTF,EAAUV,KAAKc,0BACnBd,KAAKe,yBACNf,KAAKgB,kCACKN,EAAUV,KAAKiB,oCACnBP,EAAUV,KAAKkB,mCAIhClB,KAAKmB,gBAMDC,qBACR,MAAMC,EAAWrB,KAAKO,aAAaM,MAE9BQ,IAIe,SAAhBrB,KAAKE,QACPmB,EAASC,MAAMC,OAAS,OACxBF,EAASC,MAAMC,OAAS,GAAGF,EAASG,kBAGpCH,EAASC,MAAMC,OAAS,QAlDrB7B,EAAM+B,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBN,GASpCO,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAgDrC,EAAAsC,UAAA,cAAA,GA6BrEH,EAAA,CAFCI,EAAQ,SAAU,WAClBA,EAAQ,QAAS,YAejBvC,EAAAsC,UAAA,qBAAA,MArDkBtC,EAAQmC,EAAA,CAD5BK,EAAc,kBACMxC,SAAAA"}

package/lib/Tooltip.js

@@ -1,2 +1,2 @@
-import{_ as t,n as i}from"./query-assigned-elements-37b095c4.js";import{r as e,s,$ as o}from"./lit-element-74b6bb4b.js";import{e as n}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{c as a,l as d,s as l,o as h,f as c}from"./positioning-72899e14.js";import{S as p}from"./SlotController-683d0e7c.js";import{s as u}from"./Component-9d373ef3.js";import{E as v}from"./EventController-d99ebeef.js";import{f as m}from"./fsm-50373df9.js";function b(t,i){const e=t.getAttribute(i);return e?e.split(/\s+/):[]}function y(t,i,e){t.setAttribute(i,e.join(" "))}const f=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 g;function x(t,i){return Boolean(i.id)&&t.nodeType===Node.ELEMENT_NODE&&t.getAttribute("aria-describedby")===i.id}const{transition:w}=m({hidden:{show:"waiting"},visible:{hide:"hidden",reposition:"positioning",show:"positioning"},waiting:{timeout:"positioning",hide:"hidden"},positioning:{positioned:"visible",hide:"hidden"}});let k=g=class extends s{constructor(){super(...arguments),this.shortcutSlot=new p(this,"shortcut"),this.events=new v(this),this.proxy=document.createElement("span"),this.state="hidden",this.coords=[0,0],this.position="block-start",this.role="tooltip",this.id="",this.delay=500,this.updatePosition=t=>a(t,this,{strategy:"fixed",placement:d(this.position),middleware:[l({padding:8}),h(8),c()]}).then((({x:t,y:i})=>{this.coords=[t,i],this.state=w(this.state,"positioned")})),this.hideTooltip=()=>{this.state=w(this.state,"hide")},this.reposition=()=>{this.state=w(this.state,"reposition")},this.handleShow=t=>{const i=t.target;x(i,this)&&(this.currentElement=i,this.state=w(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)||y(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)&&y(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})}willUpdate(t){t.has("id")&&!this.id&&console.warn("NORD: The tooltip requires an id attribute and value"),t.has("state")&&this.handleTransition(t.get("state"))}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>`}handleTransition(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,g.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=w(this.state,"timeout")}),this.delay);break;case"positioning":g.lastOpened!==this&&(null===(i=g.lastOpened)||void 0===i||i.hideTooltip()),this.currentElement&&this.updatePosition(this.currentElement)}}};k.styles=[u,f],t([r()],k.prototype,"state",void 0),t([n({reflect:!0})],k.prototype,"position",void 0),t([n({reflect:!0})],k.prototype,"role",void 0),t([n({reflect:!0})],k.prototype,"id",void 0),t([n({reflect:!0,type:Number})],k.prototype,"delay",void 0),k=g=t([i("nord-tooltip")],k);var E=k;export{E as default};
+import{_ as t,n as i}from"./query-assigned-elements-ef860822.js";import{r as e,s,$ as o}from"./lit-element-99bdfe5a.js";import{e as n}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{c as a,l as d,s as l,o as h,f as p}from"./positioning-763efb3a.js";import{S as c}from"./SlotController-ea6eff46.js";import{s as u}from"./Component-6bf383d6.js";import{E as v}from"./EventController-d99ebeef.js";import{f as m}from"./fsm-50373df9.js";import{o as b}from"./observe-a9c6dfb6.js";function f(t,i){const e=t.getAttribute(i);return e?e.split(/\s+/):[]}function y(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({padding:8}),h(8),p()]}).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=f(t,i);s.includes(e)||y(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=f(t,i);s.includes(e)&&y(t,i,s.filter((t=>t!==e)))}(e,"aria-describedby",this.id))}}connectedCallback(){super.connectedCallback();const t=this.getRootNode();this.events.listen(t,"keydown",this.hideOnEscape),this.events.listen(t,"mouseover",this.handleShow),this.events.listen(t,"focusin",this.handleShow),this.events.listen(t,"mouseout",this.handleHide),this.events.listen(t,"focusout",this.handleHide),this.events.listen(t,"click",this.handleHide),this.events.listen(window,"resize",this.reposition,{passive:!0}),this.events.listen(window,"scroll",this.reposition,{passive:!0})}render(){return o`<div class="n-tooltip"><slot></slot><div class="n-tooltip-shortcut" ?hidden="${this.shortcutSlot.isEmpty}"><slot class="n-tooltip-key" name="shortcut"></slot></div></div>`}handleIdChange(){this.id||console.warn("NORD: The tooltip requires an id attribute and value")}handleStateChange(t){var i;switch(this.state){case"hidden":"waiting"===t&&this.timeoutId&&clearTimeout(this.timeoutId),this.removeDescribedBy(),this.currentElement=void 0,this.style.visibility="hidden",this.style.opacity="0";break;case"visible":{this.timeoutId=void 0,x.lastOpened=this,this.addDescribedBy();const[t,i]=this.coords;this.style.left=`${t}px`,this.style.top=`${i}px`,this.style.visibility="visible",this.style.opacity="1";break}case"waiting":this.timeoutId=setTimeout((()=>{this.state=k(this.state,"timeout")}),this.delay);break;case"positioning":x.lastOpened!==this&&(null===(i=x.lastOpened)||void 0===i||i.hideTooltip()),this.currentElement&&this.updatePosition(this.currentElement)}}};E.styles=[u,g],t([r()],E.prototype,"state",void 0),t([n({reflect:!0})],E.prototype,"position",void 0),t([n({reflect:!0})],E.prototype,"role",void 0),t([n({reflect:!0})],E.prototype,"id",void 0),t([n({reflect:!0,type:Number})],E.prototype,"delay",void 0),t([b("id")],E.prototype,"handleIdChange",null),t([b("state")],E.prototype,"handleStateChange",null),E=x=t([i("nord-tooltip")],E);var j=E;export{j as default};
 //# sourceMappingURL=Tooltip.js.map

package/lib/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../src/common/attribute.ts","../src/tooltip/Tooltip.ts"],"sourcesContent":["function getTokens(element: Element, attr: string) {\n  const value = element.getAttribute(attr)\n  return value ? value.split(/\\s+/) : []\n}\n\nfunction setTokens(element: Element, attr: string, tokens: string[]) {\n  element.setAttribute(attr, tokens.join(\" \"))\n}\n\n/**\n * Carefully adds a token to a space-separated attribute\n * Similar to classList, but for any attribute.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/add\n */\nexport function add(element: Element, attr: string, token: string) {\n  const tokens = getTokens(element, attr)\n\n  if (!tokens.includes(token)) {\n    setTokens(element, attr, tokens.concat(token))\n  }\n}\n\n/**\n * Carefully removes a token from a space-separated attribute.\n * Similar to classList, but for any attribute.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/remove\n */\nexport function remove(element: Element, attr: string, token: string) {\n  const tokens = getTokens(element, attr)\n\n  if (tokens.includes(token)) {\n    setTokens(\n      element,\n      attr,\n      tokens.filter(t => t !== token)\n    )\n  }\n}\n","import { LitElement, html, PropertyValues } 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\"\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  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  /**\n   * Check if the tooltip has an id, warn them if not\n   */\n  willUpdate(changedProperties: PropertyValues) {\n    if (changedProperties.has(\"id\") && !this.id) {\n      // eslint-disable-next-line no-console\n      console.warn(\"NORD: The tooltip requires an id attribute and value\")\n    }\n\n    if (changedProperties.has(\"state\")) {\n      this.handleTransition(changedProperties.get(\"state\"))\n    }\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  private handleTransition(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        shift({\n          padding: 8,\n        }),\n        offset(8),\n        flip(),\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","LitElement","constructor","this","SlotController","EventController","document","createElement","currentElement","computePosition","strategy","placement","logicalToPhysical","position","middleware","shift","padding","offset","flip","then","x","y","coords","state","e","target","hideTooltip","key","focusable","focusableRef","proxy","textContent","insertAdjacentElement","token","includes","concat","attr.add","remove","filter","t","attr.remove","connectedCallback","super","rootNode","getRootNode","events","listen","hideOnEscape","handleShow","handleHide","window","passive","willUpdate","changedProperties","has","console","warn","handleTransition","get","render","html","shortcutSlot","isEmpty","prevState","timeoutId","clearTimeout","removeDescribedBy","undefined","style","visibility","opacity","Tooltip_1","lastOpened","addDescribedBy","left","top","setTimeout","delay","updatePosition","componentStyle","__decorate","property","reflect","type","Number","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  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        shift({\n          padding: 8,\n        }),\n        offset(8),\n        flip(),\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","shift","padding","offset","flip","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-37b095c4.js";import{r as i,s as o,$ as r}from"./lit-element-74b6bb4b.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-99bdfe5a.js";const n=i`:host{all:initial;border:0!important;clip:rect(1px,1px,1px,1px)!important;block-size:1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;inset-block-start:0;inline-size:1px!important}`;let s=class extends o{render(){return r`<slot></slot>`}};s.styles=n,s=t([e("nord-visually-hidden")],s);var a=s;export{a as default};
 //# sourceMappingURL=VisuallyHidden.js.map

package/lib/VisuallyHidden.js.map

@@ -1 +1 @@
-{"version":3,"file":"VisuallyHidden.js","sources":["../src/visually-hidden/VisuallyHidden.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport style from \"./VisuallyHidden.css\"\n\n/**\n * Visually hidden is used when an element needs to be available\n * to assistive technologies like screen readers, but be otherwise\n * hidden.\n *\n * @status ready\n * @category text\n * @slot - The visually hidden content.\n */\n@customElement(\"nord-visually-hidden\")\nexport default class VisuallyHidden extends LitElement {\n  static styles = style\n\n  render() {\n    return html`<slot></slot>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-visually-hidden\": VisuallyHidden\n  }\n}\n"],"names":["VisuallyHidden","LitElement","render","html","style","customElement"],"mappings":"oWAcA,IAAqBA,EAArB,cAA4CC,EAG1CC,SACE,OAAOC,CAAI,kBAHNH,SAASI,EADGJ,KADpBK,EAAc,yBACML,SAAAA"}
+{"version":3,"file":"VisuallyHidden.js","sources":["../src/visually-hidden/VisuallyHidden.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport style from \"./VisuallyHidden.css\"\n\n/**\n * Visually hidden is used when an element needs to be available\n * to assistive technologies like screen readers, but be otherwise\n * hidden.\n *\n * @status ready\n * @category text\n * @slot - The visually hidden content.\n */\n@customElement(\"nord-visually-hidden\")\nexport default class VisuallyHidden extends LitElement {\n  static styles = style\n\n  render() {\n    return html`<slot></slot>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-visually-hidden\": VisuallyHidden\n  }\n}\n"],"names":["VisuallyHidden","LitElement","render","html","styles","style","__decorate","customElement"],"mappings":"oWAcA,IAAqBA,EAArB,cAA4CC,EAG1CC,SACE,OAAOC,CAAI,kBAHNH,EAAMI,OAAGC,EADGL,EAAcM,EAAA,CADlCC,EAAc,yBACMP,SAAAA"}