@nordhealth/components 1.0.0-beta.19 → 1.0.0-beta.21

package/lib/EmptyState.js

@@ -1,2 +1,2 @@
-import{_ as t,n as e}from"./query-assigned-elements-37b095c4.js";import{r as n,s as a,$ as o}from"./lit-element-9646ab7e.js";import{s as r}from"./Component-6762b5eb.js";const i=n`:host{background:var(--n-color-surface);font-size:var(--n-font-size-m);color:var(--n-color-text)}.n-empty-state{text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:var(--n-space-xl)}@media (max-width:500px){.n-empty-state{padding:var(--n-space-l) var(--n-space-m)}}::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){color:var(--n-color-text)!important;margin:0 0 var(--n-space-m)!important;font-weight:var(--n-font-weight-heading)!important;font-size:var(--n-font-size-xl)!important;line-height:var(--n-line-height-heading)!important}::slotted(p){margin:0 0 var(--n-space-l)!important;font-size:var(--n-font-size-m)!important;color:var(--n-color-text-weaker)!important;line-height:var(--n-line-height)!important;max-inline-size:var(--n-empty-state-text-width,400px)}`;let s=class extends a{render(){return o`<div class="n-empty-state"><slot></slot></div>`}};s.styles=[r,i],s=t([e("nord-empty-state")],s);var l=s;export{l as default};
+import{_ as t,n as e}from"./query-assigned-elements-37b095c4.js";import{r as n,s as a,$ as o}from"./lit-element-74b6bb4b.js";import{s as r}from"./Component-9d373ef3.js";const i=n`:host{background:var(--n-color-surface);font-size:var(--n-font-size-m);color:var(--n-color-text)}.n-empty-state{text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:var(--n-space-xl)}@media (max-width:500px){.n-empty-state{padding:var(--n-space-l) var(--n-space-m)}}::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){color:var(--n-color-text)!important;margin:0 0 var(--n-space-m)!important;font-weight:var(--n-font-weight-heading)!important;font-size:var(--n-font-size-xl)!important;line-height:var(--n-line-height-heading)!important}::slotted(p){margin:0 0 var(--n-space-l)!important;font-size:var(--n-font-size-m)!important;color:var(--n-color-text-weaker)!important;line-height:var(--n-line-height)!important;max-inline-size:var(--n-empty-state-text-width,400px)}`;let s=class extends a{render(){return o`<div class="n-empty-state"><slot></slot></div>`}};s.styles=[r,i],s=t([e("nord-empty-state")],s);var l=s;export{l as default};
 //# sourceMappingURL=EmptyState.js.map

package/lib/Fieldset.js

@@ -1,2 +1,2 @@
-import{_ as r,n as e}from"./query-assigned-elements-37b095c4.js";import{r as t,s as o,$ as s}from"./lit-element-9646ab7e.js";import{e as i}from"./property-03f59dce.js";import{l as n}from"./if-defined-2a4c6dbc.js";import{S as l}from"./SlotController-5bfc47d1.js";import{s as a}from"./Component-6762b5eb.js";import{s as d}from"./FormField-e021be01.js";const h=t`fieldset{border:none}.n-label-container{margin-block-end:var(--n-space-s)}`;let m=class extends o{constructor(){super(...arguments),this.errorSlot=new l(this,"error"),this.hintSlot=new l(this,"hint"),this.label=""}render(){const{hasError:r}=this;return s`<fieldset aria-invalid="${n(r?"true":void 0)}" aria-describedby="${n(r?"error":void 0)}"><legend class="n-label-container"><slot class="n-label" name="label">${this.label}</slot><div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div></legend><slot></slot><div class="n-caption n-error" id="error" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div></fieldset>`}get hasHint(){return Boolean(this.hint)||this.hintSlot.hasContent}get hasError(){return Boolean(this.error)||this.errorSlot.hasContent}};m.styles=[a,d,h],r([i()],m.prototype,"label",void 0),r([i()],m.prototype,"hint",void 0),r([i()],m.prototype,"error",void 0),m=r([e("nord-fieldset")],m);var c=m;export{c as default};
+import{_ as r,n as e}from"./query-assigned-elements-37b095c4.js";import{r as t,s as o,$ as s}from"./lit-element-74b6bb4b.js";import{e as i}from"./property-03f59dce.js";import{l as n}from"./if-defined-fe657a02.js";import{S as l}from"./SlotController-5bfc47d1.js";import{s as a}from"./Component-9d373ef3.js";import{s as d}from"./FormField-50bd73d5.js";const h=t`fieldset{border:none}.n-label-container{margin-block-end:var(--n-space-s)}`;let m=class extends o{constructor(){super(...arguments),this.errorSlot=new l(this,"error"),this.hintSlot=new l(this,"hint"),this.label=""}render(){const{hasError:r}=this;return s`<fieldset aria-invalid="${n(r?"true":void 0)}" aria-describedby="${n(r?"error":void 0)}"><legend class="n-label-container"><slot class="n-label" name="label">${this.label}</slot><div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div></legend><slot></slot><div class="n-caption n-error" id="error" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div></fieldset>`}get hasHint(){return Boolean(this.hint)||this.hintSlot.hasContent}get hasError(){return Boolean(this.error)||this.errorSlot.hasContent}};m.styles=[a,d,h],r([i()],m.prototype,"label",void 0),r([i()],m.prototype,"hint",void 0),r([i()],m.prototype,"error",void 0),m=r([e("nord-fieldset")],m);var p=m;export{p as default};
 //# sourceMappingURL=Fieldset.js.map

package/lib/FocusableMixin-ebb67709.js

@@ -0,0 +1,2 @@
+import{e}from"./ref-7d028e3a.js";function l(l){return class extends l{constructor(){super(...arguments),this.focusableRef=e()}focus(e){var l;null===(l=this.focusableRef.value)||void 0===l||l.focus(e)}blur(){var e;null===(e=this.focusableRef.value)||void 0===e||e.blur()}click(){var e;null===(e=this.focusableRef.value)||void 0===e||e.click()}}}export{l as F};
+//# sourceMappingURL=FocusableMixin-ebb67709.js.map

package/lib/{FocusableMixin-ca9d30fa.js.map → FocusableMixin-ebb67709.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FocusableMixin-ca9d30fa.js","sources":["../src/common/mixins/FocusableMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\n\nimport { LitElement } from \"lit\"\nimport { createRef, Ref } from \"lit/directives/ref.js\"\n\ntype Constructable<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class FocusableMixinInterface {\n  protected focusableRef: Ref<HTMLElement>\n  focus(options?: FocusOptions): void\n  blur(): void\n  click(): void\n}\n\nexport function FocusableMixin<T extends Constructable<LitElement>>(superClass: T) {\n  class FocusableElement extends superClass {\n    protected focusableRef = createRef<HTMLButtonElement>()\n\n    /**\n     * Programmatically move focus to the component.\n     * @param {FocusOptions} options An object which controls aspects of the focusing process.\n     */\n    focus(options?: FocusOptions) {\n      this.focusableRef.value?.focus(options)\n    }\n\n    /**\n     * Programmatically remove focus from the component.\n     */\n    blur() {\n      this.focusableRef.value?.blur()\n    }\n\n    /**\n     * Programmatically simulates a click on the component.\n     */\n    click() {\n      this.focusableRef.value?.click()\n    }\n  }\n\n  return FocusableElement as unknown as Constructable<FocusableMixinInterface> & T\n}\n"],"names":["FocusableMixin","superClass","constructor","this","createRef","focus","options","focusableRef","value","blur","click"],"mappings":"+CAcgBA,EAAoDC,GA2BlE,OA1BA,cAA+BA,EAA/BC,kCACYC,kBAAeC,IAMzBC,MAAMC,mBACJH,KAAKI,aAAaC,sBAAOH,MAAMC,GAMjCG,uBACEN,KAAKI,aAAaC,sBAAOC,OAM3BC,wBACEP,KAAKI,aAAaC,sBAAOE"}
+{"version":3,"file":"FocusableMixin-ebb67709.js","sources":["../src/common/mixins/FocusableMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\n\nimport { LitElement } from \"lit\"\nimport { createRef, Ref } from \"lit/directives/ref.js\"\n\ntype Constructable<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class FocusableMixinInterface {\n  protected focusableRef: Ref<HTMLElement>\n  focus(options?: FocusOptions): void\n  blur(): void\n  click(): void\n}\n\nexport function FocusableMixin<T extends Constructable<LitElement>>(superClass: T) {\n  class FocusableElement extends superClass {\n    protected focusableRef = createRef<HTMLButtonElement>()\n\n    /**\n     * Programmatically move focus to the component.\n     * @param {FocusOptions} options An object which controls aspects of the focusing process.\n     */\n    focus(options?: FocusOptions) {\n      this.focusableRef.value?.focus(options)\n    }\n\n    /**\n     * Programmatically remove focus from the component.\n     */\n    blur() {\n      this.focusableRef.value?.blur()\n    }\n\n    /**\n     * Programmatically simulates a click on the component.\n     */\n    click() {\n      this.focusableRef.value?.click()\n    }\n  }\n\n  return FocusableElement as unknown as Constructable<FocusableMixinInterface> & T\n}\n"],"names":["FocusableMixin","superClass","constructor","this","createRef","focus","options","focusableRef","value","blur","click"],"mappings":"0CAcgBA,EAAoDC,GA2BlE,OA1BA,cAA+BA,EAA/BC,kCACYC,kBAAeC,IAMzBC,MAAMC,mBACJH,KAAKI,aAAaC,sBAAOH,MAAMC,GAMjCG,uBACEN,KAAKI,aAAaC,sBAAOC,OAM3BC,wBACEP,KAAKI,aAAaC,sBAAOE"}

package/lib/{FormAssociatedMixin-bfbbe389.js → FormAssociatedMixin-ccae91fd.js}

@@ -1,2 +1,2 @@
-import{_ as t}from"./query-assigned-elements-37b095c4.js";import{$ as e}from"./lit-element-9646ab7e.js";import{e as r}from"./property-03f59dce.js";import{S as o}from"./SlotController-5bfc47d1.js";import{N as i}from"./events-731d0007.js";import"./VisuallyHidden.js";class s{constructor(t,e){this.host=t,this.options=e,this.handleFormData=t=>{const{disabled:e,name:r}=this.host;if(e)return;const o=this.options.value();r&&null!=o&&t.formData.append(r,o)},this.host=t,t.addController(this),this.options=e}hostConnected(){var t;null===(t=this.host.form)||void 0===t||t.addEventListener("formdata",this.handleFormData)}hostDisconnected(){var t;null===(t=this.host.form)||void 0===t||t.removeEventListener("formdata",this.handleFormData)}}function n(n){class h extends n{constructor(){super(...arguments),this.labelSlot=new o(this,"label"),this.errorSlot=new o(this,"error"),this.hintSlot=new o(this,"hint"),this.formData=new s(this,{value:()=>this.formValue}),this.inputId="input",this.errorId="error",this.hintId="hint",this.label="",this.hideLabel=!1,this.required=!1,this.expand=!1}get formValue(){return this.value}handleInput(t){t.stopPropagation();const e=t.target;this.value=e.value,this.dispatchEvent(new i("input"))}handleChange(t){t.stopPropagation(),this.dispatchEvent(new i("change"))}renderLabel(){const t=e`<label for="${this.inputId}"><slot name="label">${this.label}</slot></label><div class="n-caption n-hint" id="${this.hintId}" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div>`;return this.hideLabel?e`<nord-visually-hidden>${t}</nord-visually-hidden>`:e`<div class="n-label-container">${t}</div>`}renderError(){return e`<div class="n-caption n-error" id="${this.errorId}" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div>`}getDescribedBy(){const{hasHint:t,hasError:e}=this;return t&&e?`${this.hintId} ${this.errorId}`:t?this.hintId:e?this.errorId:void 0}getInvalid(){return this.hasError?"true":void 0}get hasHint(){return Boolean(this.hint)||this.hintSlot.hasContent}get hasError(){return Boolean(this.error)||this.errorSlot.hasContent}}return t([r()],h.prototype,"label",void 0),t([r()],h.prototype,"hint",void 0),t([r({type:Boolean,attribute:"hide-label"})],h.prototype,"hideLabel",void 0),t([r()],h.prototype,"placeholder",void 0),t([r()],h.prototype,"error",void 0),t([r({type:Boolean})],h.prototype,"required",void 0),t([r({reflect:!0,type:Boolean})],h.prototype,"expand",void 0),h}export{n as F};
-//# sourceMappingURL=FormAssociatedMixin-bfbbe389.js.map
+import{_ as t}from"./query-assigned-elements-37b095c4.js";import{$ as e}from"./lit-element-74b6bb4b.js";import{e as r}from"./property-03f59dce.js";import{S as o}from"./SlotController-5bfc47d1.js";import{N as i}from"./events-731d0007.js";import"./VisuallyHidden.js";class s{constructor(t,e){this.host=t,this.options=e,this.handleFormData=t=>{const{disabled:e,name:r}=this.host;if(e)return;const o=this.options.value();r&&null!=o&&t.formData.append(r,o)},this.host=t,t.addController(this),this.options=e}hostConnected(){var t;null===(t=this.host.form)||void 0===t||t.addEventListener("formdata",this.handleFormData)}hostDisconnected(){var t;null===(t=this.host.form)||void 0===t||t.removeEventListener("formdata",this.handleFormData)}}function n(n){class h extends n{constructor(){super(...arguments),this.labelSlot=new o(this,"label"),this.errorSlot=new o(this,"error"),this.hintSlot=new o(this,"hint"),this.formData=new s(this,{value:()=>this.formValue}),this.inputId="input",this.errorId="error",this.hintId="hint",this.label="",this.hideLabel=!1,this.required=!1,this.expand=!1}get formValue(){return this.value}handleInput(t){t.stopPropagation();const e=t.target;this.value=e.value,this.dispatchEvent(new i("input"))}handleChange(t){t.stopPropagation(),this.dispatchEvent(new i("change"))}renderLabel(){const t=e`<label for="${this.inputId}"><slot name="label">${this.label}</slot></label><div class="n-caption n-hint" id="${this.hintId}" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div>`;return this.hideLabel?e`<nord-visually-hidden>${t}</nord-visually-hidden>`:e`<div class="n-label-container">${t}</div>`}renderError(){return e`<div class="n-caption n-error" id="${this.errorId}" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div>`}getDescribedBy(){const{hasHint:t,hasError:e}=this;return t&&e?`${this.hintId} ${this.errorId}`:t?this.hintId:e?this.errorId:void 0}getInvalid(){return this.hasError?"true":void 0}get hasHint(){return Boolean(this.hint)||this.hintSlot.hasContent}get hasError(){return Boolean(this.error)||this.errorSlot.hasContent}}return t([r()],h.prototype,"label",void 0),t([r()],h.prototype,"hint",void 0),t([r({type:Boolean,attribute:"hide-label"})],h.prototype,"hideLabel",void 0),t([r()],h.prototype,"placeholder",void 0),t([r()],h.prototype,"error",void 0),t([r({type:Boolean})],h.prototype,"required",void 0),t([r({reflect:!0,type:Boolean})],h.prototype,"expand",void 0),h}export{n as F};
+//# sourceMappingURL=FormAssociatedMixin-ccae91fd.js.map

package/lib/{FormAssociatedMixin-bfbbe389.js.map → FormAssociatedMixin-ccae91fd.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FormAssociatedMixin-bfbbe389.js","sources":["../src/common/controllers/FormDataController.ts","../src/common/mixins/FormAssociatedMixin.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { InputMixinInterface } from \"../mixins/InputMixin.js\"\n\ntype FormDataOptions = {\n  value: () => string | undefined\n}\n\nexport class FormDataController implements ReactiveController {\n  constructor(private host: ReactiveControllerHost & InputMixinInterface, private options: FormDataOptions) {\n    this.host = host\n    host.addController(this)\n    this.options = options\n  }\n\n  hostConnected() {\n    this.host.form?.addEventListener(\"formdata\", this.handleFormData)\n  }\n\n  hostDisconnected() {\n    this.host.form?.removeEventListener(\"formdata\", this.handleFormData)\n  }\n\n  private handleFormData = (e: FormDataEvent) => {\n    const { disabled, name } = this.host\n\n    if (disabled) {\n      return\n    }\n\n    const value = this.options.value()\n\n    if (name && value != null) {\n      e.formData.append(name, value)\n    }\n  }\n}\n","/* eslint-disable max-classes-per-file */\nimport { html, LitElement, TemplateResult } from \"lit\"\nimport { property } from \"lit/decorators.js\"\nimport { FormDataController } from \"../controllers/FormDataController.js\"\nimport { SlotController } from \"../controllers/SlotController.js\"\nimport { NordEvent } from \"../events.js\"\nimport { InputMixinInterface } from \"./InputMixin.js\"\nimport \"../../visually-hidden/VisuallyHidden.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\ntype NativeInputElement = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement\n\nexport declare class FormAssociatedMixinInterface {\n  label: string\n  required: boolean\n  hint?: string\n  hideLabel: boolean\n  placeholder?: string\n  error?: string\n  expand: boolean\n\n  protected inputId: string\n  protected errorId: string\n  protected hintId: string\n  protected labelSlot: SlotController\n  protected hintSlot: SlotController\n  protected errorSlot: SlotController\n  protected formData: FormDataController\n\n  protected get formValue(): string | undefined\n  protected get hasError(): boolean\n  protected get hasHint(): boolean\n\n  protected handleChange(e: Event): void\n  protected handleInput(e: Event): void\n  protected renderLabel(): TemplateResult\n  protected renderError(): TemplateResult\n  protected getDescribedBy(): string | undefined\n  protected getInvalid(): \"true\" | undefined\n}\n\nexport function FormAssociatedMixin<T extends Constructor<InputMixinInterface & LitElement>>(superClass: T) {\n  // TODO: would be nice if custom elements analyzer could pick up the slot docs from the mixin\n\n  /**\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  class FormAssociatedElement extends superClass {\n    protected labelSlot = new SlotController(this, \"label\")\n    protected errorSlot = new SlotController(this, \"error\")\n    protected hintSlot = new SlotController(this, \"hint\")\n    protected formData = new FormDataController(this, { value: () => this.formValue })\n\n    protected get formValue() {\n      return this.value\n    }\n\n    protected inputId = \"input\"\n    protected errorId = \"error\"\n    protected hintId = \"hint\"\n\n    /**\n     * Label for the input.\n     */\n    @property() label: string = \"\"\n\n    /**\n     * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n     */\n    @property() hint?: string\n\n    /**\n     * Visually hide the label, but still show it to assistive technologies like screen readers.\n     */\n    @property({ type: Boolean, attribute: \"hide-label\" }) hideLabel = false\n\n    /**\n     * Placeholder text to display within the input.\n     */\n    @property() placeholder?: string\n\n    /**\n     * Optional error to be shown with the input. Alternatively use the error slot.\n     */\n    @property() error?: string\n\n    /**\n     * Determines whether the input is required or not.\n     * An input marked as required will be announced as such to users of assistive technology.\n     * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n     */\n    @property({ type: Boolean }) required = false\n\n    /**\n     * Controls whether the input expands to fill the width of its container.\n     */\n    @property({ reflect: true, type: Boolean }) expand = false\n\n    protected handleInput(e: Event) {\n      e.stopPropagation()\n      const target = e.target as NativeInputElement\n      this.value = target.value\n\n      /**\n       * Fired as the user types into the input.\n       */\n      this.dispatchEvent(new NordEvent(\"input\"))\n    }\n\n    protected handleChange(e: Event) {\n      e.stopPropagation()\n\n      /**\n       * Fired whenever the input's value is changed via user interaction.\n       */\n      this.dispatchEvent(new NordEvent(\"change\"))\n    }\n\n    protected renderLabel() {\n      const label = html`\n        <label for=${this.inputId}>\n          <slot name=\"label\">${this.label}</slot>\n        </label>\n\n        <div class=\"n-caption n-hint\" id=${this.hintId} ?hidden=${!this.hasHint}>\n          <slot name=\"hint\">${this.hint}</slot>\n        </div>\n      `\n\n      return this.hideLabel\n        ? html`<nord-visually-hidden>${label}</nord-visually-hidden>`\n        : html`<div class=\"n-label-container\">${label}</div>`\n    }\n\n    protected renderError() {\n      return html`\n        <div class=\"n-caption n-error\" id=${this.errorId} role=\"alert\" ?hidden=${!this.hasError}>\n          <slot name=\"error\">${this.error}</slot>\n        </div>\n      `\n    }\n\n    protected getDescribedBy() {\n      const { hasHint, hasError } = this\n\n      if (hasHint && hasError) {\n        return `${this.hintId} ${this.errorId}`\n      }\n      if (hasHint) {\n        return this.hintId\n      }\n      if (hasError) {\n        return this.errorId\n      }\n\n      return undefined\n    }\n\n    protected getInvalid() {\n      return this.hasError ? \"true\" : undefined\n    }\n\n    protected get hasHint() {\n      return Boolean(this.hint) || this.hintSlot.hasContent\n    }\n\n    protected get hasError() {\n      return Boolean(this.error) || this.errorSlot.hasContent\n    }\n  }\n\n  return FormAssociatedElement as unknown as Constructor<FormAssociatedMixinInterface> & T\n}\n"],"names":["FormDataController","constructor","host","options","this","e","disabled","name","value","formData","append","addController","hostConnected","form","addEventListener","handleFormData","hostDisconnected","removeEventListener","FormAssociatedMixin","superClass","FormAssociatedElement","SlotController","formValue","handleInput","stopPropagation","target","dispatchEvent","NordEvent","handleChange","renderLabel","label","html","inputId","hintId","hasHint","hint","hideLabel","renderError","errorId","hasError","error","getDescribedBy","getInvalid","undefined","Boolean","hintSlot","hasContent","errorSlot","__decorate","property","type","attribute","reflect"],"mappings":"+QAOaA,EACXC,YAAoBC,EAA4DC,GAA5DC,UAAAF,EAA4DE,aAAAD,EAcxEC,oBAAkBC,IACxB,MAAMC,SAAEA,EAAQC,KAAEA,GAASH,KAAKF,KAEhC,GAAII,EACF,OAGF,MAAME,EAAQJ,KAAKD,QAAQK,QAEvBD,GAAiB,MAATC,GACVH,EAAEI,SAASC,OAAOH,EAAMC,IAvB1BJ,KAAKF,KAAOA,EACZA,EAAKS,cAAcP,MACnBA,KAAKD,QAAUA,EAGjBS,gCACER,KAAKF,KAAKW,qBAAMC,iBAAiB,WAAYV,KAAKW,gBAGpDC,mCACEZ,KAAKF,KAAKW,qBAAMI,oBAAoB,WAAYb,KAAKW,0BCsBzCG,EAA6EC,GAQ3F,MAAMC,UAA8BD,EAApClB,kCACYG,eAAY,IAAIiB,EAAejB,KAAM,SACrCA,eAAY,IAAIiB,EAAejB,KAAM,SACrCA,cAAW,IAAIiB,EAAejB,KAAM,QACpCA,cAAW,IAAIJ,EAAmBI,KAAM,CAAEI,MAAO,IAAMJ,KAAKkB,YAM5DlB,aAAU,QACVA,aAAU,QACVA,YAAS,OAKPA,WAAgB,GAU0BA,gBAAY,EAiBrCA,eAAW,EAKIA,aAAS,EA3CvCkB,gBACZ,OAAOlB,KAAKI,MA4CJe,YAAYlB,GACpBA,EAAEmB,kBACF,MAAMC,EAASpB,EAAEoB,OACjBrB,KAAKI,MAAQiB,EAAOjB,MAKpBJ,KAAKsB,cAAc,IAAIC,EAAU,UAGzBC,aAAavB,GACrBA,EAAEmB,kBAKFpB,KAAKsB,cAAc,IAAIC,EAAU,WAGzBE,cACR,MAAMC,EAAQC,CAAI,eACH3B,KAAK4B,+BACK5B,KAAK0B,yDAGO1B,KAAK6B,qBAAmB7B,KAAK8B,8BAC1C9B,KAAK+B,oBAI7B,OAAO/B,KAAKgC,UACRL,CAAI,yBAAyBD,2BAC7BC,CAAI,kCAAkCD,UAGlCO,cACR,OAAON,CAAI,sCAC2B3B,KAAKkC,mCAAiClC,KAAKmC,gCACxDnC,KAAKoC,qBAKtBC,iBACR,MAAMP,QAAEA,EAAOK,SAAEA,GAAanC,KAE9B,OAAI8B,GAAWK,EACN,GAAGnC,KAAK6B,UAAU7B,KAAKkC,UAE5BJ,EACK9B,KAAK6B,OAEVM,EACKnC,KAAKkC,aADd,EAOQI,aACR,OAAOtC,KAAKmC,SAAW,YAASI,EAGpBT,cACZ,OAAOU,QAAQxC,KAAK+B,OAAS/B,KAAKyC,SAASC,WAG/BP,eACZ,OAAOK,QAAQxC,KAAKoC,QAAUpC,KAAK2C,UAAUD,YAIjD,OA3GcE,GAAXC,iCAKWD,GAAXC,gCAKqDD,GAArDC,EAAS,CAAEC,KAAMN,QAASO,UAAW,gDAK1BH,GAAXC,uCAKWD,GAAXC,iCAO4BD,GAA5BC,EAAS,CAAEC,KAAMN,0CAK0BI,GAA3CC,EAAS,CAAEG,SAAS,EAAMF,KAAMN,wCA2E5BxB"}
+{"version":3,"file":"FormAssociatedMixin-ccae91fd.js","sources":["../src/common/controllers/FormDataController.ts","../src/common/mixins/FormAssociatedMixin.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { InputMixinInterface } from \"../mixins/InputMixin.js\"\n\ntype FormDataOptions = {\n  value: () => string | undefined\n}\n\nexport class FormDataController implements ReactiveController {\n  constructor(private host: ReactiveControllerHost & InputMixinInterface, private options: FormDataOptions) {\n    this.host = host\n    host.addController(this)\n    this.options = options\n  }\n\n  hostConnected() {\n    this.host.form?.addEventListener(\"formdata\", this.handleFormData)\n  }\n\n  hostDisconnected() {\n    this.host.form?.removeEventListener(\"formdata\", this.handleFormData)\n  }\n\n  private handleFormData = (e: FormDataEvent) => {\n    const { disabled, name } = this.host\n\n    if (disabled) {\n      return\n    }\n\n    const value = this.options.value()\n\n    if (name && value != null) {\n      e.formData.append(name, value)\n    }\n  }\n}\n","/* eslint-disable max-classes-per-file */\nimport { html, LitElement, TemplateResult } from \"lit\"\nimport { property } from \"lit/decorators.js\"\nimport { FormDataController } from \"../controllers/FormDataController.js\"\nimport { SlotController } from \"../controllers/SlotController.js\"\nimport { NordEvent } from \"../events.js\"\nimport { InputMixinInterface } from \"./InputMixin.js\"\nimport \"../../visually-hidden/VisuallyHidden.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\ntype NativeInputElement = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement\n\nexport declare class FormAssociatedMixinInterface {\n  label: string\n  required: boolean\n  hint?: string\n  hideLabel: boolean\n  placeholder?: string\n  error?: string\n  expand: boolean\n\n  protected inputId: string\n  protected errorId: string\n  protected hintId: string\n  protected labelSlot: SlotController\n  protected hintSlot: SlotController\n  protected errorSlot: SlotController\n  protected formData: FormDataController\n\n  protected get formValue(): string | undefined\n  protected get hasError(): boolean\n  protected get hasHint(): boolean\n\n  protected handleChange(e: Event): void\n  protected handleInput(e: Event): void\n  protected renderLabel(): TemplateResult\n  protected renderError(): TemplateResult\n  protected getDescribedBy(): string | undefined\n  protected getInvalid(): \"true\" | undefined\n}\n\nexport function FormAssociatedMixin<T extends Constructor<InputMixinInterface & LitElement>>(superClass: T) {\n  // TODO: would be nice if custom elements analyzer could pick up the slot docs from the mixin\n\n  /**\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  class FormAssociatedElement extends superClass {\n    protected labelSlot = new SlotController(this, \"label\")\n    protected errorSlot = new SlotController(this, \"error\")\n    protected hintSlot = new SlotController(this, \"hint\")\n    protected formData = new FormDataController(this, { value: () => this.formValue })\n\n    protected get formValue() {\n      return this.value\n    }\n\n    protected inputId = \"input\"\n    protected errorId = \"error\"\n    protected hintId = \"hint\"\n\n    /**\n     * Label for the input.\n     */\n    @property() label: string = \"\"\n\n    /**\n     * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n     */\n    @property() hint?: string\n\n    /**\n     * Visually hide the label, but still show it to assistive technologies like screen readers.\n     */\n    @property({ type: Boolean, attribute: \"hide-label\" }) hideLabel = false\n\n    /**\n     * Placeholder text to display within the input.\n     */\n    @property() placeholder?: string\n\n    /**\n     * Optional error to be shown with the input. Alternatively use the error slot.\n     */\n    @property() error?: string\n\n    /**\n     * Determines whether the input is required or not.\n     * An input marked as required will be announced as such to users of assistive technology.\n     * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n     */\n    @property({ type: Boolean }) required = false\n\n    /**\n     * Controls whether the input expands to fill the width of its container.\n     */\n    @property({ reflect: true, type: Boolean }) expand = false\n\n    protected handleInput(e: Event) {\n      e.stopPropagation()\n      const target = e.target as NativeInputElement\n      this.value = target.value\n\n      /**\n       * Fired as the user types into the input.\n       */\n      this.dispatchEvent(new NordEvent(\"input\"))\n    }\n\n    protected handleChange(e: Event) {\n      e.stopPropagation()\n\n      /**\n       * Fired whenever the input's value is changed via user interaction.\n       */\n      this.dispatchEvent(new NordEvent(\"change\"))\n    }\n\n    protected renderLabel() {\n      const label = html`\n        <label for=${this.inputId}>\n          <slot name=\"label\">${this.label}</slot>\n        </label>\n\n        <div class=\"n-caption n-hint\" id=${this.hintId} ?hidden=${!this.hasHint}>\n          <slot name=\"hint\">${this.hint}</slot>\n        </div>\n      `\n\n      return this.hideLabel\n        ? html`<nord-visually-hidden>${label}</nord-visually-hidden>`\n        : html`<div class=\"n-label-container\">${label}</div>`\n    }\n\n    protected renderError() {\n      return html`\n        <div class=\"n-caption n-error\" id=${this.errorId} role=\"alert\" ?hidden=${!this.hasError}>\n          <slot name=\"error\">${this.error}</slot>\n        </div>\n      `\n    }\n\n    protected getDescribedBy() {\n      const { hasHint, hasError } = this\n\n      if (hasHint && hasError) {\n        return `${this.hintId} ${this.errorId}`\n      }\n      if (hasHint) {\n        return this.hintId\n      }\n      if (hasError) {\n        return this.errorId\n      }\n\n      return undefined\n    }\n\n    protected getInvalid() {\n      return this.hasError ? \"true\" : undefined\n    }\n\n    protected get hasHint() {\n      return Boolean(this.hint) || this.hintSlot.hasContent\n    }\n\n    protected get hasError() {\n      return Boolean(this.error) || this.errorSlot.hasContent\n    }\n  }\n\n  return FormAssociatedElement as unknown as Constructor<FormAssociatedMixinInterface> & T\n}\n"],"names":["FormDataController","constructor","host","options","this","e","disabled","name","value","formData","append","addController","hostConnected","form","addEventListener","handleFormData","hostDisconnected","removeEventListener","FormAssociatedMixin","superClass","FormAssociatedElement","SlotController","formValue","handleInput","stopPropagation","target","dispatchEvent","NordEvent","handleChange","renderLabel","label","html","inputId","hintId","hasHint","hint","hideLabel","renderError","errorId","hasError","error","getDescribedBy","getInvalid","undefined","Boolean","hintSlot","hasContent","errorSlot","__decorate","property","type","attribute","reflect"],"mappings":"+QAOaA,EACXC,YAAoBC,EAA4DC,GAA5DC,UAAAF,EAA4DE,aAAAD,EAcxEC,oBAAkBC,IACxB,MAAMC,SAAEA,EAAQC,KAAEA,GAASH,KAAKF,KAEhC,GAAII,EACF,OAGF,MAAME,EAAQJ,KAAKD,QAAQK,QAEvBD,GAAiB,MAATC,GACVH,EAAEI,SAASC,OAAOH,EAAMC,IAvB1BJ,KAAKF,KAAOA,EACZA,EAAKS,cAAcP,MACnBA,KAAKD,QAAUA,EAGjBS,gCACER,KAAKF,KAAKW,qBAAMC,iBAAiB,WAAYV,KAAKW,gBAGpDC,mCACEZ,KAAKF,KAAKW,qBAAMI,oBAAoB,WAAYb,KAAKW,0BCsBzCG,EAA6EC,GAQ3F,MAAMC,UAA8BD,EAApClB,kCACYG,eAAY,IAAIiB,EAAejB,KAAM,SACrCA,eAAY,IAAIiB,EAAejB,KAAM,SACrCA,cAAW,IAAIiB,EAAejB,KAAM,QACpCA,cAAW,IAAIJ,EAAmBI,KAAM,CAAEI,MAAO,IAAMJ,KAAKkB,YAM5DlB,aAAU,QACVA,aAAU,QACVA,YAAS,OAKPA,WAAgB,GAU0BA,gBAAY,EAiBrCA,eAAW,EAKIA,aAAS,EA3CvCkB,gBACZ,OAAOlB,KAAKI,MA4CJe,YAAYlB,GACpBA,EAAEmB,kBACF,MAAMC,EAASpB,EAAEoB,OACjBrB,KAAKI,MAAQiB,EAAOjB,MAKpBJ,KAAKsB,cAAc,IAAIC,EAAU,UAGzBC,aAAavB,GACrBA,EAAEmB,kBAKFpB,KAAKsB,cAAc,IAAIC,EAAU,WAGzBE,cACR,MAAMC,EAAQC,CAAI,eACH3B,KAAK4B,+BACK5B,KAAK0B,yDAGO1B,KAAK6B,qBAAmB7B,KAAK8B,8BAC1C9B,KAAK+B,oBAI7B,OAAO/B,KAAKgC,UACRL,CAAI,yBAAyBD,2BAC7BC,CAAI,kCAAkCD,UAGlCO,cACR,OAAON,CAAI,sCAC2B3B,KAAKkC,mCAAiClC,KAAKmC,gCACxDnC,KAAKoC,qBAKtBC,iBACR,MAAMP,QAAEA,EAAOK,SAAEA,GAAanC,KAE9B,OAAI8B,GAAWK,EACN,GAAGnC,KAAK6B,UAAU7B,KAAKkC,UAE5BJ,EACK9B,KAAK6B,OAEVM,EACKnC,KAAKkC,aADd,EAOQI,aACR,OAAOtC,KAAKmC,SAAW,YAASI,EAGpBT,cACZ,OAAOU,QAAQxC,KAAK+B,OAAS/B,KAAKyC,SAASC,WAG/BP,eACZ,OAAOK,QAAQxC,KAAKoC,QAAUpC,KAAK2C,UAAUD,YAIjD,OA3GcE,GAAXC,iCAKWD,GAAXC,gCAKqDD,GAArDC,EAAS,CAAEC,KAAMN,QAASO,UAAW,gDAK1BH,GAAXC,uCAKWD,GAAXC,iCAO4BD,GAA5BC,EAAS,CAAEC,KAAMN,0CAK0BI,GAA3CC,EAAS,CAAEG,SAAS,EAAMF,KAAMN,wCA2E5BxB"}

package/lib/{FormField-e021be01.js → FormField-50bd73d5.js}

@@ -1,2 +1,2 @@
-import{r as n}from"./lit-element-9646ab7e.js";const t=n`.n-caption,::slotted(.n-caption){font-size:var(--n-font-size-s);line-height:var(--n-line-height-caption)}.n-label-container{padding-block-end:var(--n-space-s);display:inline-block}.n-label,::slotted(label),label{display:block!important;color:var(--n-color-text);font-family:var(--n-font-family);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading);margin:0!important}.n-hint{padding-block-start:calc(var(--n-space-s)/ 2);color:var(--n-color-text-weaker)}.n-error{margin-block-start:var(--n-space-s);color:var(--n-color-text-error)}`;export{t as s};
-//# sourceMappingURL=FormField-e021be01.js.map
+import{r as n}from"./lit-element-74b6bb4b.js";const t=n`.n-caption,::slotted(.n-caption){font-size:var(--n-font-size-s);line-height:var(--n-line-height-caption)}.n-label-container{padding-block-end:var(--n-space-s);display:inline-block}.n-label,::slotted(label),label{display:block!important;color:var(--n-color-text);font-family:var(--n-font-family);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading);margin:0!important}.n-hint{padding-block-start:calc(var(--n-space-s)/ 2);color:var(--n-color-text-weaker)}.n-error{margin-block-start:var(--n-space-s);color:var(--n-color-text-error)}`;export{t as s};
+//# sourceMappingURL=FormField-50bd73d5.js.map

package/lib/FormField-50bd73d5.js.map

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

package/lib/Header.js

@@ -1,2 +1,2 @@
-import{_ as e,n as o}from"./query-assigned-elements-37b095c4.js";import{r,$ as a,s as n}from"./lit-element-9646ab7e.js";import{D as t}from"./DraftComponentMixin-9e4b7b34.js";import{S as s}from"./SlotController-5bfc47d1.js";import{s as i}from"./Component-6762b5eb.js";const l=r`:host{--n-banner-box-shadow:none;font-size:var(--n-font-size-m);color:var(--n-color-text)}::slotted(*){margin:0!important}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}.n-header,.n-header-actions{display:flex;flex-flow:row wrap;align-items:center;gap:var(--n-space-m)}.n-header{padding:var(--n-space-m) var(--n-space-l);background-color:var(--n-color-surface);border-block-end:1px solid var(--n-color-border);box-shadow:var(--n-box-shadow-header);min-block-size:var(--n-space-xxl)}.n-header-actions{margin-inline-start:auto;gap:var(--n-space-s)}`;let d=class extends(t(n)){constructor(){super(...arguments),this.actionSlot=new s(this,"action")}render(){return a`<header class="n-header"><slot></slot><div class="n-header-actions" ?hidden="${this.actionSlot.isEmpty}"><slot name="action"></slot></div></header>`}};d.styles=[i,l],d=e([o("nord-header")],d);var c=d;export{c as default};
+import{_ as e,n as o}from"./query-assigned-elements-37b095c4.js";import{r,$ as a,s as n}from"./lit-element-74b6bb4b.js";import{D as t}from"./DraftComponentMixin-9e4b7b34.js";import{S as s}from"./SlotController-5bfc47d1.js";import{s as i}from"./Component-9d373ef3.js";const l=r`:host{--n-banner-box-shadow:none;font-size:var(--n-font-size-m);color:var(--n-color-text)}::slotted(*){margin:0!important}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}.n-header,.n-header-actions{display:flex;flex-flow:row wrap;align-items:center;gap:var(--n-space-m)}.n-header{padding:var(--n-space-m) var(--n-space-l);background-color:var(--n-color-surface);border-block-end:1px solid var(--n-color-border);box-shadow:var(--n-box-shadow-header);min-block-size:var(--n-space-xxl)}.n-header-actions{margin-inline-start:auto;gap:var(--n-space-s)}`;let d=class extends(t(n)){constructor(){super(...arguments),this.actionSlot=new s(this,"action")}render(){return a`<header class="n-header"><slot></slot><div class="n-header-actions" ?hidden="${this.actionSlot.isEmpty}"><slot name="action"></slot></div></header>`}};d.styles=[i,l],d=e([o("nord-header")],d);var c=d;export{c as default};
 //# sourceMappingURL=Header.js.map

package/lib/Icon.js

@@ -1,2 +1,2 @@
-import{_ as e,n as s}from"./query-assigned-elements-37b095c4.js";import{r as i,s as t,$ as o}from"./lit-element-9646ab7e.js";import{e as r}from"./property-03f59dce.js";import{t as n}from"./state-70f38ceb.js";import{l as c}from"./if-defined-2a4c6dbc.js";import{o as l}from"./unsafe-html-4da54dd2.js";import{s as a}from"./Component-6762b5eb.js";import"./directive-de55b00a.js";const d=i`:host{--n-icon-size:var(--n-size-icon-m);display:inline-block;block-size:var(--n-icon-size);inline-size:var(--n-icon-size)}: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-icon{display:block}svg{display:block}`;var h;let v=h=class extends t{constructor(){super(...arguments),this.name="",this.size="m",this.svg=""}static registerResolver(e){h.resolver=e}static registerIcon(e,s){let i,t;if("string"==typeof e?(i=e,t=s):(i=e.title,t=e.default),!i)throw new Error("name is required when registering an icon");if(!t)throw new Error("icon must not be empty");h.registeredIcons.has(i)||h.registeredIcons.set(i,t)}willUpdate(e){if(!e.has("name"))return;const s=this.resolve();"string"==typeof s?this.svg=s:s.then((e=>{this.svg=e})).catch((()=>{this.svg=""}))}render(){return o`<div role="${c(this.label?"img":void 0)}" aria-label="${c(this.label)}"><slot style="${c(this.color?`color:${this.color}`:void 0)}" aria-hidden="true">${l(this.svg)}</slot></div>`}resolve(){return this.name?h.registeredIcons.has(this.name)?h.registeredIcons.get(this.name):h.resolver(this.name):""}};v.styles=[a,d],v.resolver=e=>fetch(`https://nordcdn.net/ds/icons/1.3.7/assets/${e}.svg`).then((e=>e.text())),v.registeredIcons=new Map,e([r({reflect:!0})],v.prototype,"name",void 0),e([r({reflect:!0})],v.prototype,"size",void 0),e([r({reflect:!0})],v.prototype,"color",void 0),e([r({reflect:!0})],v.prototype,"label",void 0),e([n()],v.prototype,"svg",void 0),v=h=e([s("nord-icon")],v);var m=v;export{m as default};
+import{_ as e,n as s}from"./query-assigned-elements-37b095c4.js";import{r as i,s as t,$ as o}from"./lit-element-74b6bb4b.js";import{e as r}from"./property-03f59dce.js";import{t as n}from"./state-70f38ceb.js";import{l}from"./if-defined-fe657a02.js";import{o as c}from"./unsafe-html-989a642b.js";import{s as a}from"./Component-9d373ef3.js";import"./directive-de55b00a.js";const d=i`:host{--n-icon-size:var(--n-size-icon-m);display:inline-block;block-size:var(--n-icon-size);inline-size:var(--n-icon-size)}: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-icon{display:block}svg{display:block}`;var h;let v=h=class extends t{constructor(){super(...arguments),this.name="",this.size="m",this.svg=""}static registerResolver(e){h.resolver=e}static registerIcon(e,s){let i,t;if("string"==typeof e?(i=e,t=s):(i=e.title,t=e.default),!i)throw new Error("name is required when registering an icon");if(!t)throw new Error("icon must not be empty");h.registeredIcons.has(i)||h.registeredIcons.set(i,t)}willUpdate(e){if(!e.has("name"))return;const s=this.resolve();"string"==typeof s?this.svg=s:s.then((e=>{this.svg=e})).catch((()=>{this.svg=""}))}render(){return o`<div role="${l(this.label?"img":void 0)}" aria-label="${l(this.label)}"><slot style="${l(this.color?`color:${this.color}`:void 0)}" aria-hidden="true">${c(this.svg)}</slot></div>`}resolve(){return this.name?h.registeredIcons.has(this.name)?h.registeredIcons.get(this.name):h.resolver(this.name):""}};v.styles=[a,d],v.resolver=e=>fetch(`https://nordcdn.net/ds/icons/1.3.7/assets/${e}.svg`).then((e=>e.text())),v.registeredIcons=new Map,e([r({reflect:!0})],v.prototype,"name",void 0),e([r({reflect:!0})],v.prototype,"size",void 0),e([r({reflect:!0})],v.prototype,"color",void 0),e([r({reflect:!0})],v.prototype,"label",void 0),e([n()],v.prototype,"svg",void 0),v=h=e([s("nord-icon")],v);var m=v;export{m as default};
 //# sourceMappingURL=Icon.js.map

package/lib/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../src/icon/Icon.ts"],"sourcesContent":["import { html, LitElement, PropertyValues } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Icon.css\"\n\n// in dev we should just load from node_modules\nconst loadIcon = (name: string) => import(`@nordhealth/icons/lib/assets/${name}.js`).then(({ default: svg }) => svg)\n\n// in prod we should load from the CDN, as a sensible default\nconst loadIconCdn = (name: string) =>\n  fetch(`https://nordcdn.net/ds/icons/${process.env.ICON_VERSION}/assets/${name}.svg`).then(response => response.text())\n\nexport type IconResolver = ((iconName: string) => string) | ((iconName: string) => Promise<string>)\n\n/**\n * Icons are used to provide additional meaning or in places where text label doesn’t fit.\n * Icon component allows you to display an icon from the Nordicons library.\n *\n * @status ready\n * @category image\n */\n@customElement(\"nord-icon\")\nexport default class Icon extends LitElement {\n  static styles = [componentStyle, style]\n\n  private static resolver: IconResolver = process.env.NODE_ENV === \"development\" ? loadIcon : loadIconCdn\n  private static registeredIcons = new Map<string, string>()\n\n  /**\n   * Register a custom icon resolver, which accepts the icon name as an parameter, and returns an SVG string.\n   * Can return a string synchronously, or a promise of a string.\n   * By default, will load icons from the Nord CDN.\n   * @param resolver The resolver function to register.\n   */\n  static registerResolver(resolver: IconResolver) {\n    Icon.resolver = resolver\n  }\n\n  /**\n   * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n   * @param icon An object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\n   * This is intended to be used in cases where you import an icon's entire ES module and register it directly.\n   */\n  static registerIcon(icon: { title: string; default: string }): void\n\n  /**\n   * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n   * @param name The name of the icon to be registered.\n   * @param icon The SVG string for the icon.\n   */\n  static registerIcon(name: string, icon: string): void\n\n  /**\n   * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n   * @param iconOrName The name of the icon to be registered or an object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\n   * @param icon The SVG string for the icon.\n   */\n  static registerIcon(iconOrName: string | { title: string; default: string }, icon?: string) {\n    let name: string | undefined\n    let svg: string | undefined\n\n    if (typeof iconOrName === \"string\") {\n      name = iconOrName\n      svg = icon\n    } else {\n      name = iconOrName.title\n      svg = iconOrName.default\n    }\n\n    // handle errors\n    if (!name) {\n      throw new Error(\"name is required when registering an icon\")\n    }\n    if (!svg) {\n      throw new Error(\"icon must not be empty\")\n    }\n\n    if (!Icon.registeredIcons.has(name)) {\n      Icon.registeredIcons.set(name, svg)\n    }\n  }\n\n  /**\n   * The name of the icon to display, as defined by nordicons.\n   */\n  @property({ reflect: true }) name: string = \"\"\n\n  /**\n   * The size of the icon.\n   */\n  @property({ reflect: true }) size: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" = \"m\"\n\n  /**\n   * The color of the icon.\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 icon.\n   * If no label is supplied, the icon is hidden from assistive technology.\n   */\n  @property({ reflect: true }) label?: string\n\n  @state() private svg: string = \"\"\n\n  override willUpdate(changedProperties: PropertyValues<this>) {\n    if (!changedProperties.has(\"name\")) {\n      return\n    }\n\n    const resolved = this.resolve()\n\n    if (typeof resolved === \"string\") {\n      this.svg = resolved\n    } else {\n      resolved\n        .then(svg => {\n          this.svg = svg\n        })\n        .catch(() => {\n          this.svg = \"\"\n        })\n    }\n  }\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    // we always hide the inner svg, since the svg does not have any text/title/label itself.\n    return html`\n      <div role=${ifDefined(this.label ? \"img\" : undefined)} aria-label=${ifDefined(this.label)}>\n        <slot style=${ifDefined(this.color ? `color:${this.color}` : undefined)} aria-hidden=\"true\">\n          ${unsafeHTML(this.svg)}\n        </slot>\n      </div>\n    `\n  }\n\n  private resolve(): string | Promise<string> {\n    if (!this.name) {\n      return \"\"\n    }\n\n    if (Icon.registeredIcons.has(this.name)) {\n      return Icon.registeredIcons.get(this.name) as string // we know it is there, so cast to string to keep TS happy.\n    }\n\n    return Icon.resolver(this.name)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-icon\": Icon\n  }\n}\n"],"names":["Icon","LitElement","constructor","this","static","resolver","Icon_1","iconOrName","icon","name","svg","title","default","Error","registeredIcons","has","set","willUpdate","changedProperties","resolved","resolve","then","catch","render","html","ifDefined","label","undefined","color","unsafeHTML","get","componentStyle","style","fetch","response","text","Map","__decorate","property","reflect","state","customElement"],"mappings":"uzBAyBA,IAAqBA,IAArB,cAAkCC,EAAlCC,kCA+D+BC,UAAe,GAKfA,UAA8C,IAc1DA,SAAc,GAtE/BC,wBAAwBC,GACtBC,EAAKD,SAAWA,EAsBlBD,oBAAoBG,EAAyDC,GAC3E,IAAIC,EACAC,EAWJ,GAT0B,iBAAfH,GACTE,EAAOF,EACPG,EAAMF,IAENC,EAAOF,EAAWI,MAClBD,EAAMH,EAAWK,UAIdH,EACH,MAAM,IAAII,MAAM,6CAElB,IAAKH,EACH,MAAM,IAAIG,MAAM,0BAGbP,EAAKQ,gBAAgBC,IAAIN,IAC5BH,EAAKQ,gBAAgBE,IAAIP,EAAMC,GA4B1BO,WAAWC,GAClB,IAAKA,EAAkBH,IAAI,QACzB,OAGF,MAAMI,EAAWhB,KAAKiB,UAEE,iBAAbD,EACThB,KAAKO,IAAMS,EAEXA,EACGE,MAAKX,IACJP,KAAKO,IAAMA,KAEZY,OAAM,KACLnB,KAAKO,IAAM,MAKnBa,SAIE,OAAOC,CAAI,cACGC,EAAUtB,KAAKuB,MAAQ,WAAQC,mBAAyBF,EAAUtB,KAAKuB,wBACnED,EAAUtB,KAAKyB,MAAQ,SAASzB,KAAKyB,aAAUD,0BACzDE,EAAW1B,KAAKO,oBAMlBU,UACN,OAAKjB,KAAKM,KAINH,EAAKQ,gBAAgBC,IAAIZ,KAAKM,MACzBH,EAAKQ,gBAAgBgB,IAAI3B,KAAKM,MAGhCH,EAAKD,SAASF,KAAKM,MAPjB,KAtHJT,SAAS,CAAC+B,EAAgBC,GAElBhC,WAhBIS,GACnBwB,MAAM,6CAAmExB,SAAYY,MAAKa,GAAYA,EAASC,SAgBhGnC,kBAAkB,IAAIoC,IA2DRC,GAA5BC,EAAS,CAAEC,SAAS,gCAKQF,GAA5BC,EAAS,CAAEC,SAAS,gCAMQF,GAA5BC,EAAS,CAAEC,SAAS,iCAMQF,GAA5BC,EAAS,CAAEC,SAAS,iCAEZF,GAARG,+BAlFkBxC,OADpByC,EAAc,cACMzC,SAAAA"}
+{"version":3,"file":"Icon.js","sources":["../src/icon/Icon.ts"],"sourcesContent":["import { html, LitElement, PropertyValues } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Icon.css\"\n\n// in dev we should just load from node_modules\nconst loadIcon = (name: string) => import(`@nordhealth/icons/lib/assets/${name}.js`).then(({ default: svg }) => svg)\n\n// in prod we should load from the CDN, as a sensible default\nconst loadIconCdn = (name: string) =>\n  fetch(`https://nordcdn.net/ds/icons/${process.env.ICON_VERSION}/assets/${name}.svg`).then(response => response.text())\n\nexport type IconResolver = ((iconName: string) => string) | ((iconName: string) => Promise<string>)\n\n/**\n * Icons are used to provide additional meaning or in places where text label doesn’t fit.\n * Icon component allows you to display an icon from the Nordicons library.\n *\n * @status ready\n * @category image\n */\n@customElement(\"nord-icon\")\nexport default class Icon extends LitElement {\n  static styles = [componentStyle, style]\n\n  private static resolver: IconResolver = process.env.NODE_ENV === \"development\" ? loadIcon : loadIconCdn\n  private static registeredIcons = new Map<string, string>()\n\n  /**\n   * Register a custom icon resolver, which accepts the icon name as an parameter, and returns an SVG string.\n   * Can return a string synchronously, or a promise of a string.\n   * By default, will load icons from the Nord CDN.\n   * @param resolver The resolver function to register.\n   */\n  static registerResolver(resolver: IconResolver) {\n    Icon.resolver = resolver\n  }\n\n  /**\n   * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n   * @param icon An object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\n   * This is intended to be used in cases where you import an icon's entire ES module and register it directly.\n   */\n  static registerIcon(icon: { title: string; default: string }): void\n\n  /**\n   * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n   * @param name The name of the icon to be registered.\n   * @param icon The SVG string for the icon.\n   */\n  static registerIcon(name: string, icon: string): void\n\n  /**\n   * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n   * @param iconOrName The name of the icon to be registered or an object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\n   * @param icon The SVG string for the icon.\n   */\n  static registerIcon(iconOrName: string | { title: string; default: string }, icon?: string) {\n    let name: string | undefined\n    let svg: string | undefined\n\n    if (typeof iconOrName === \"string\") {\n      name = iconOrName\n      svg = icon\n    } else {\n      name = iconOrName.title\n      svg = iconOrName.default\n    }\n\n    // handle errors\n    if (!name) {\n      throw new Error(\"name is required when registering an icon\")\n    }\n    if (!svg) {\n      throw new Error(\"icon must not be empty\")\n    }\n\n    if (!Icon.registeredIcons.has(name)) {\n      Icon.registeredIcons.set(name, svg)\n    }\n  }\n\n  /**\n   * The name of the icon to display, as defined by nordicons.\n   */\n  @property({ reflect: true }) name: string = \"\"\n\n  /**\n   * The size of the icon.\n   */\n  @property({ reflect: true }) size: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" = \"m\"\n\n  /**\n   * The color of the icon.\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 icon.\n   * If no label is supplied, the icon is hidden from assistive technology.\n   */\n  @property({ reflect: true }) label?: string\n\n  @state() private svg: string = \"\"\n\n  override willUpdate(changedProperties: PropertyValues<this>) {\n    if (!changedProperties.has(\"name\")) {\n      return\n    }\n\n    const resolved = this.resolve()\n\n    if (typeof resolved === \"string\") {\n      this.svg = resolved\n    } else {\n      resolved\n        .then(svg => {\n          this.svg = svg\n        })\n        .catch(() => {\n          this.svg = \"\"\n        })\n    }\n  }\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    // we always hide the inner svg, since the svg does not have any text/title/label itself.\n    return html`\n      <div role=${ifDefined(this.label ? \"img\" : undefined)} aria-label=${ifDefined(this.label)}>\n        <slot style=${ifDefined(this.color ? `color:${this.color}` : undefined)} aria-hidden=\"true\">\n          ${unsafeHTML(this.svg)}\n        </slot>\n      </div>\n    `\n  }\n\n  private resolve(): string | Promise<string> {\n    if (!this.name) {\n      return \"\"\n    }\n\n    if (Icon.registeredIcons.has(this.name)) {\n      return Icon.registeredIcons.get(this.name) as string // we know it is there, so cast to string to keep TS happy.\n    }\n\n    return Icon.resolver(this.name)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-icon\": Icon\n  }\n}\n"],"names":["Icon","LitElement","constructor","this","static","resolver","Icon_1","iconOrName","icon","name","svg","title","default","Error","registeredIcons","has","set","willUpdate","changedProperties","resolved","resolve","then","catch","render","html","ifDefined","label","undefined","color","unsafeHTML","get","componentStyle","style","fetch","response","text","Map","__decorate","property","reflect","state","customElement"],"mappings":"kzBAyBA,IAAqBA,IAArB,cAAkCC,EAAlCC,kCA+D+BC,UAAe,GAKfA,UAA8C,IAc1DA,SAAc,GAtE/BC,wBAAwBC,GACtBC,EAAKD,SAAWA,EAsBlBD,oBAAoBG,EAAyDC,GAC3E,IAAIC,EACAC,EAWJ,GAT0B,iBAAfH,GACTE,EAAOF,EACPG,EAAMF,IAENC,EAAOF,EAAWI,MAClBD,EAAMH,EAAWK,UAIdH,EACH,MAAM,IAAII,MAAM,6CAElB,IAAKH,EACH,MAAM,IAAIG,MAAM,0BAGbP,EAAKQ,gBAAgBC,IAAIN,IAC5BH,EAAKQ,gBAAgBE,IAAIP,EAAMC,GA4B1BO,WAAWC,GAClB,IAAKA,EAAkBH,IAAI,QACzB,OAGF,MAAMI,EAAWhB,KAAKiB,UAEE,iBAAbD,EACThB,KAAKO,IAAMS,EAEXA,EACGE,MAAKX,IACJP,KAAKO,IAAMA,KAEZY,OAAM,KACLnB,KAAKO,IAAM,MAKnBa,SAIE,OAAOC,CAAI,cACGC,EAAUtB,KAAKuB,MAAQ,WAAQC,mBAAyBF,EAAUtB,KAAKuB,wBACnED,EAAUtB,KAAKyB,MAAQ,SAASzB,KAAKyB,aAAUD,0BACzDE,EAAW1B,KAAKO,oBAMlBU,UACN,OAAKjB,KAAKM,KAINH,EAAKQ,gBAAgBC,IAAIZ,KAAKM,MACzBH,EAAKQ,gBAAgBgB,IAAI3B,KAAKM,MAGhCH,EAAKD,SAASF,KAAKM,MAPjB,KAtHJT,SAAS,CAAC+B,EAAgBC,GAElBhC,WAhBIS,GACnBwB,MAAM,6CAAmExB,SAAYY,MAAKa,GAAYA,EAASC,SAgBhGnC,kBAAkB,IAAIoC,IA2DRC,GAA5BC,EAAS,CAAEC,SAAS,gCAKQF,GAA5BC,EAAS,CAAEC,SAAS,gCAMQF,GAA5BC,EAAS,CAAEC,SAAS,iCAMQF,GAA5BC,EAAS,CAAEC,SAAS,iCAEZF,GAARG,+BAlFkBxC,OADpByC,EAAc,cACMzC,SAAAA"}

package/lib/Input.js

@@ -1,2 +1,2 @@
-import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as i,w as s,$ as n,s as r}from"./lit-element-9646ab7e.js";import{e as o}from"./property-03f59dce.js";import{l as a}from"./if-defined-2a4c6dbc.js";import{n as d}from"./ref-82d2502a.js";import{o as l}from"./unsafe-html-4da54dd2.js";import{F as p}from"./FocusableMixin-ca9d30fa.js";import{F as c}from"./FormAssociatedMixin-bfbbe389.js";import{I as m}from"./InputMixin-94d15730.js";import{s as h}from"./Component-6762b5eb.js";import{s as u}from"./FormField-e021be01.js";import{s as b}from"./TextField-d799db1a.js";import{S as f}from"./SlotController-5bfc47d1.js";import"./directive-de55b00a.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const v=i`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}slot[name=before]{display:flex;align-items:center;position:absolute;margin-inline-start:var(--n-space-m);block-size:100%;pointer-events:none;color:var(--n-color-icon)}slot[name=before]:not([hidden])+.n-input{padding-inline-start:var(--n-space-xl)}::slotted(svg),svg{block-size:var(--n-size-icon-s);inline-size:var(--n-size-icon-s)}`;let y=class extends(c(m(p(r)))){constructor(){super(...arguments),this.beforeSlot=new f(this,"before"),this.type="text"}render(){var e;const t="search"===this.type||this.beforeSlot.hasContent,i="number"===this.type,r="search"===this.type?l('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>'):s;return n`${this.renderLabel()}<div class="n-input-container"><slot name="before" ?hidden="${!t}">${r}</slot><input ${d(this.focusableRef)} id="${this.inputId}" class="n-input" type="${i?"text":this.type}" inputmode="${a(i?"numeric":void 0)}" pattern="${a(i?"[0-9]*":void 0)}" ?disabled="${this.disabled}" ?required="${this.required}" name="${a(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${a(this.placeholder)}" @input="${this.handleInput}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" spellcheck="false"></div>${this.renderError()}`}handleKeydown(e){var t;"Enter"===e.key&&this.form&&(null===(t=this.form.querySelector('button[type="submit"]'))||void 0===t||t.click())}};y.styles=[h,u,b,v],e([o()],y.prototype,"type",void 0),y=e([t("nord-input")],y);var $=y;export{$ as default};
+import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as i,w as s,$ as n,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 as l}from"./ref-7d028e3a.js";import{o as d}from"./unsafe-html-989a642b.js";import{F as p}from"./FocusableMixin-ebb67709.js";import{F as m}from"./FormAssociatedMixin-ccae91fd.js";import{I as c}from"./InputMixin-94d15730.js";import{s as h}from"./Component-9d373ef3.js";import{s as u}from"./FormField-50bd73d5.js";import{s as f}from"./TextField-ece1c786.js";import{S as b}from"./SlotController-5bfc47d1.js";import"./directive-de55b00a.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const v=i`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.n-input-container{font-size:var(--n-font-size-m)}slot[name=start]{display:flex;align-items:center;position:absolute;margin-inline-start:var(--n-space-m);block-size:100%;pointer-events:none;color:var(--n-color-icon)}slot[name=start]:not([hidden])+.n-input{padding-inline-start:var(--n-space-xl)}::slotted(svg),svg{block-size:var(--n-size-icon-s)!important;inline-size:var(--n-size-icon-s)!important}`;let y=class extends(m(c(p(r)))){constructor(){super(...arguments),this.startSlot=new b(this,"start"),this.type="text"}render(){var e;const t="search"===this.type||this.startSlot.hasContent,i="number"===this.type,r="search"===this.type?d('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>'):s;return n`${this.renderLabel()}<div class="n-input-container"><slot name="${this.startSlot.slotName}" ?hidden="${!t}">${r}</slot><input ${l(this.focusableRef)} id="${this.inputId}" class="n-input" type="${i?"text":this.type}" inputmode="${a(i?"numeric":void 0)}" pattern="${a(i?"[0-9]*":void 0)}" ?disabled="${this.disabled}" ?required="${this.required}" name="${a(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${a(this.placeholder)}" @input="${this.handleInput}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" spellcheck="false"></div>${this.renderError()}`}handleKeydown(e){var t;"Enter"===e.key&&this.form&&(null===(t=this.form.querySelector('button[type="submit"]'))||void 0===t||t.click())}};y.styles=[h,u,f,v],e([o()],y.prototype,"type",void 0),y=e([t("nord-input")],y);var $=y;export{$ as default};
 //# sourceMappingURL=Input.js.map

package/lib/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../src/input/Input.ts","../../icons/lib/assets/navigation-search.js"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport searchIcon from \"@nordhealth/icons/lib/assets/navigation-search.js\"\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 \"./Input.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\n/**\n * Inputs are used to allow users to provide text input when the expected input is short.\n * As well as plain text, Input supports various types of text, including passwords and numbers.\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 * @slot before - Optional slot that holds an icon for the input.\n */\n@customElement(\"nord-input\")\nexport default class Input extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  private beforeSlot = new SlotController(this, \"before\")\n\n  /**\n   * The type of the input.\n   */\n  @property() type: \"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" = \"text\"\n\n  render() {\n    const hasIcon = this.type === \"search\" || this.beforeSlot.hasContent\n    const isNumber = this.type === \"number\"\n    const defaultIcon = this.type === \"search\" ? unsafeHTML(searchIcon) : nothing\n\n    return html`\n      ${this.renderLabel()}\n\n      <div class=\"n-input-container\">\n        <slot name=\"before\" ?hidden=${!hasIcon}>${defaultIcon}</slot>\n        <input\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          class=\"n-input\"\n          type=${isNumber ? \"text\" : this.type}\n          inputmode=${ifDefined(isNumber ? \"numeric\" : undefined)}\n          pattern=${ifDefined(isNumber ? \"[0-9]*\" : undefined)}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\n          .value=${this.value ?? \"\"}\n          placeholder=${ifDefined(this.placeholder)}\n          @input=${this.handleInput}\n          @change=${this.handleChange}\n          @keydown=${this.handleKeydown}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n          spellcheck=\"false\"\n        />\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  private handleKeydown(e: KeyboardEvent) {\n    if (e.key === \"Enter\" && this.form) {\n      this.form.querySelector<HTMLButtonElement>(`button[type=\"submit\"]`)?.click()\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-input\": Input\n  }\n}\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"navigation-search\"\nexport const tags = \"nordicon navigation menu find search magnifying glass\"\n"],"names":["Input","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","SlotController","render","hasIcon","type","beforeSlot","hasContent","isNumber","defaultIcon","unsafeHTML","nothing","html","renderLabel","ref","focusableRef","inputId","ifDefined","undefined","disabled","required","name","value","placeholder","handleInput","handleChange","handleKeydown","getDescribedBy","getInvalid","renderError","e","key","form","querySelector","click","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","property","customElement"],"mappings":"4pCA6BA,IAAqBA,EAArB,cAAmCC,EAAoBC,EAAWC,EAAeC,MAAjFC,kCAGUC,gBAAa,IAAIC,EAAeD,KAAM,UAKlCA,UAA4E,OAExFE,eACE,MAAMC,EAAwB,WAAdH,KAAKI,MAAqBJ,KAAKK,WAAWC,WACpDC,EAAyB,WAAdP,KAAKI,KAChBI,EAA4B,WAAdR,KAAKI,KAAoBK,EC1ClC,iQD0C2DC,EAEtE,OAAOC,CAAI,GACPX,KAAKY,6EAG0BT,MAAWK,kBAEtCK,EAAIb,KAAKc,qBACNd,KAAKe,kCAEHR,EAAW,OAASP,KAAKI,oBACpBY,EAAUT,EAAW,eAAYU,gBACnCD,EAAUT,EAAW,cAAWU,kBAC9BjB,KAAKkB,wBACLlB,KAAKmB,mBACVH,EAAUhB,KAAKoB,4BACbpB,KAAKqB,qBAAS,oBACTL,EAAUhB,KAAKsB,yBACpBtB,KAAKuB,yBACJvB,KAAKwB,2BACJxB,KAAKyB,oCACGT,EAAUhB,KAAK0B,oCACnBV,EAAUhB,KAAK2B,2CAKhC3B,KAAK4B,gBAIHH,cAAcI,SACN,UAAVA,EAAEC,KAAmB9B,KAAK+B,iBAC5B/B,KAAK+B,KAAKC,cAAiC,yCAA0BC,WA9ClEvC,SAAS,CAACwC,EAAgBC,EAAgBC,EAAgBC,GAOrDC,GAAXC,gCARkB7C,KADpB8C,EAAc,eACM9C,SAAAA"}
+{"version":3,"file":"Input.js","sources":["../src/input/Input.ts","../../icons/lib/assets/navigation-search.js"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport searchIcon from \"@nordhealth/icons/lib/assets/navigation-search.js\"\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 \"./Input.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\n/**\n * Inputs are used to allow users to provide text input when the expected input is short.\n * As well as plain text, Input supports various types of text, including passwords and numbers.\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 * @slot start - Optional slot used to place an icon at the start of the input.\n */\n@customElement(\"nord-input\")\nexport default class Input extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  private startSlot = new SlotController(this, \"start\")\n\n  /**\n   * The type of the input.\n   */\n  @property() type: \"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" = \"text\"\n\n  render() {\n    const hasIcon = this.type === \"search\" || this.startSlot.hasContent\n    const isNumber = this.type === \"number\"\n    const defaultIcon = this.type === \"search\" ? unsafeHTML(searchIcon) : nothing\n\n    return html`\n      ${this.renderLabel()}\n\n      <div class=\"n-input-container\">\n        <slot name=${this.startSlot.slotName} ?hidden=${!hasIcon}>${defaultIcon}</slot>\n        <input\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          class=\"n-input\"\n          type=${isNumber ? \"text\" : this.type}\n          inputmode=${ifDefined(isNumber ? \"numeric\" : undefined)}\n          pattern=${ifDefined(isNumber ? \"[0-9]*\" : undefined)}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\n          .value=${this.value ?? \"\"}\n          placeholder=${ifDefined(this.placeholder)}\n          @input=${this.handleInput}\n          @change=${this.handleChange}\n          @keydown=${this.handleKeydown}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n          spellcheck=\"false\"\n        />\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  private handleKeydown(e: KeyboardEvent) {\n    if (e.key === \"Enter\" && this.form) {\n      this.form.querySelector<HTMLButtonElement>(`button[type=\"submit\"]`)?.click()\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-input\": Input\n  }\n}\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"navigation-search\"\nexport const tags = \"nordicon navigation menu find search magnifying glass\"\n"],"names":["Input","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","SlotController","render","hasIcon","type","startSlot","hasContent","isNumber","defaultIcon","unsafeHTML","nothing","html","renderLabel","slotName","ref","focusableRef","inputId","ifDefined","undefined","disabled","required","name","value","placeholder","handleInput","handleChange","handleKeydown","getDescribedBy","getInvalid","renderError","e","key","form","querySelector","click","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","property","customElement"],"mappings":"guCA6BA,IAAqBA,EAArB,cAAmCC,EAAoBC,EAAWC,EAAeC,MAAjFC,kCAGUC,eAAY,IAAIC,EAAeD,KAAM,SAKjCA,UAA4E,OAExFE,eACE,MAAMC,EAAwB,WAAdH,KAAKI,MAAqBJ,KAAKK,UAAUC,WACnDC,EAAyB,WAAdP,KAAKI,KAChBI,EAA4B,WAAdR,KAAKI,KAAoBK,EC1ClC,iQD0C2DC,EAEtE,OAAOC,CAAI,GACPX,KAAKY,2DAGQZ,KAAKK,UAAUQ,uBAAqBV,MAAWK,kBAExDM,EAAId,KAAKe,qBACNf,KAAKgB,kCAEHT,EAAW,OAASP,KAAKI,oBACpBa,EAAUV,EAAW,eAAYW,gBACnCD,EAAUV,EAAW,cAAWW,kBAC9BlB,KAAKmB,wBACLnB,KAAKoB,mBACVH,EAAUjB,KAAKqB,4BACbrB,KAAKsB,qBAAS,oBACTL,EAAUjB,KAAKuB,yBACpBvB,KAAKwB,yBACJxB,KAAKyB,2BACJzB,KAAK0B,oCACGT,EAAUjB,KAAK2B,oCACnBV,EAAUjB,KAAK4B,2CAKhC5B,KAAK6B,gBAIHH,cAAcI,SACN,UAAVA,EAAEC,KAAmB/B,KAAKgC,iBAC5BhC,KAAKgC,KAAKC,cAAiC,yCAA0BC,WA9ClExC,SAAS,CAACyC,EAAgBC,EAAgBC,EAAgBC,GAOrDC,GAAXC,gCARkB9C,KADpB+C,EAAc,eACM/C,SAAAA"}

package/lib/Layout.js

@@ -1,2 +1,2 @@
-import{_ as n,n as t}from"./query-assigned-elements-37b095c4.js";import{r as a,$ as e,s as o}from"./lit-element-9646ab7e.js";import{D as i}from"./DraftComponentMixin-9e4b7b34.js";import{s}from"./Component-6762b5eb.js";const r=a`:host{--n-nav-width:250px;background:var(--n-color-background);font-size:var(--n-font-size-m);color:var(--n-color-text)}.n-layout-main,.n-layout-nav{background:var(--n-color-background);inset-block-start:0;min-block-size:100%;position:absolute}.n-layout-nav{position:fixed;transition:transform .3s ease;user-select:none;inline-size:var(--n-nav-width);z-index:2;inset-block-start:0;inset-inline-start:0;inset-block-end:0}@media (max-width:768px){.n-layout-nav{transform:translateX(-100%)}}.n-layout-main{inset-inline-end:0;z-index:1;transition:width .2s ease;inline-size:calc(100% - var(--n-nav-width))}@media (max-width:768px){.n-layout-main{inline-size:100%}}main{padding:var(--n-space-l)}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}`;let l=class extends(i(o)){render(){return e`<div class="n-layout"><div class="n-layout-nav"><slot name="nav"></slot></div><div class="n-layout-main"><slot name="header"></slot><main><slot></slot></main></div></div>`}};l.styles=[s,r],l=n([t("nord-layout")],l);var d=l;export{d as default};
+import{_ as n,n as t}from"./query-assigned-elements-37b095c4.js";import{r as a,$ as o,s as e}from"./lit-element-74b6bb4b.js";import{D as i}from"./DraftComponentMixin-9e4b7b34.js";import{s}from"./Component-9d373ef3.js";const r=a`:host{--n-nav-width:250px;background:var(--n-color-background);font-size:var(--n-font-size-m);color:var(--n-color-text)}.n-layout-main,.n-layout-nav{background:var(--n-color-background);inset-block-start:0;min-block-size:100%;position:absolute}.n-layout-nav{position:fixed;transition:transform .3s ease;user-select:none;inline-size:var(--n-nav-width);z-index:2;inset-block-start:0;inset-inline-start:0;inset-block-end:0}@media (max-width:768px){.n-layout-nav{transform:translateX(-100%)}}.n-layout-main{inset-inline-end:0;z-index:1;transition:width .2s ease;inline-size:calc(100% - var(--n-nav-width))}@media (max-width:768px){.n-layout-main{inline-size:100%}}main{padding:var(--n-space-l)}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}`;let l=class extends(i(e)){render(){return o`<div class="n-layout"><div class="n-layout-nav"><slot name="nav"></slot></div><div class="n-layout-main"><slot name="header"></slot><main><slot></slot></main></div></div>`}};l.styles=[s,r],l=n([t("nord-layout")],l);var d=l;export{d as default};
 //# sourceMappingURL=Layout.js.map

package/lib/{LightDomController-f56fa1a4.js → LightDomController-011334da.js}

@@ -1,2 +1,2 @@
-import{x as t,w as s}from"./lit-element-9646ab7e.js";class o{constructor(t,s){this.host=t,this.options=s,this.host=t,this.options=s,t.addController(this)}get container(){return this.options.container||this.host}hostUpdated(){this.render()}hostDisconnected(){t(s,this.container,this.options.renderOptions)}render(){t(this.options.render(),this.container,this.options.renderOptions)}}export{o as L};
-//# sourceMappingURL=LightDomController-f56fa1a4.js.map
+import{x as t,w as s}from"./lit-element-74b6bb4b.js";class o{constructor(t,s){this.host=t,this.options=s,this.host=t,this.options=s,t.addController(this)}get container(){return this.options.container||this.host}hostUpdated(){this.render()}hostDisconnected(){t(s,this.container,this.options.renderOptions)}render(){t(this.options.render(),this.container,this.options.renderOptions)}}export{o as L};
+//# sourceMappingURL=LightDomController-011334da.js.map

package/lib/{LightDomController-f56fa1a4.js.map → LightDomController-011334da.js.map}

@@ -1 +1 @@
-{"version":3,"file":"LightDomController-f56fa1a4.js","sources":["../src/common/controllers/LightDomController.ts"],"sourcesContent":["import { nothing, ReactiveController, ReactiveControllerHost, render, RenderOptions } from \"lit\"\n\ntype LightDomOptions = {\n  render: () => unknown\n  renderOptions?: RenderOptions\n  container?: HTMLElement\n}\n\nexport class LightDomController implements ReactiveController {\n  constructor(private host: ReactiveControllerHost & HTMLElement, private options: LightDomOptions) {\n    this.host = host\n    this.options = options\n    host.addController(this)\n  }\n\n  private get container(): HTMLElement {\n    return this.options.container || this.host\n  }\n\n  hostUpdated() {\n    this.render()\n  }\n\n  hostDisconnected() {\n    render(nothing, this.container, this.options.renderOptions)\n  }\n\n  private render() {\n    render(this.options.render(), this.container, this.options.renderOptions)\n  }\n}\n"],"names":["LightDomController","constructor","host","options","this","addController","container","hostUpdated","render","hostDisconnected","nothing","renderOptions"],"mappings":"2DAQaA,EACXC,YAAoBC,EAAoDC,GAApDC,UAAAF,EAAoDE,aAAAD,EACtEC,KAAKF,KAAOA,EACZE,KAAKD,QAAUA,EACfD,EAAKG,cAAcD,MAGTE,gBACV,OAAOF,KAAKD,QAAQG,WAAaF,KAAKF,KAGxCK,cACEH,KAAKI,SAGPC,mBACED,EAAOE,EAASN,KAAKE,UAAWF,KAAKD,QAAQQ,eAGvCH,SACNA,EAAOJ,KAAKD,QAAQK,SAAUJ,KAAKE,UAAWF,KAAKD,QAAQQ"}
+{"version":3,"file":"LightDomController-011334da.js","sources":["../src/common/controllers/LightDomController.ts"],"sourcesContent":["import { nothing, ReactiveController, ReactiveControllerHost, render, RenderOptions } from \"lit\"\n\ntype LightDomOptions = {\n  render: () => unknown\n  renderOptions?: RenderOptions\n  container?: HTMLElement\n}\n\nexport class LightDomController implements ReactiveController {\n  constructor(private host: ReactiveControllerHost & HTMLElement, private options: LightDomOptions) {\n    this.host = host\n    this.options = options\n    host.addController(this)\n  }\n\n  private get container(): HTMLElement {\n    return this.options.container || this.host\n  }\n\n  hostUpdated() {\n    this.render()\n  }\n\n  hostDisconnected() {\n    render(nothing, this.container, this.options.renderOptions)\n  }\n\n  private render() {\n    render(this.options.render(), this.container, this.options.renderOptions)\n  }\n}\n"],"names":["LightDomController","constructor","host","options","this","addController","container","hostUpdated","render","hostDisconnected","nothing","renderOptions"],"mappings":"2DAQaA,EACXC,YAAoBC,EAAoDC,GAApDC,UAAAF,EAAoDE,aAAAD,EACtEC,KAAKF,KAAOA,EACZE,KAAKD,QAAUA,EACfD,EAAKG,cAAcD,MAGTE,gBACV,OAAOF,KAAKD,QAAQG,WAAaF,KAAKF,KAGxCK,cACEH,KAAKI,SAGPC,mBACED,EAAOE,EAASN,KAAKE,UAAWF,KAAKD,QAAQQ,eAGvCH,SACNA,EAAOJ,KAAKD,QAAQK,SAAUJ,KAAKE,UAAWF,KAAKD,QAAQQ"}

package/lib/NavGroup.js

@@ -1,2 +1,2 @@
-import{_ as e,n as i}from"./query-assigned-elements-37b095c4.js";import{r as n,$ as t,w as o,s as r}from"./lit-element-9646ab7e.js";import{e as a}from"./property-03f59dce.js";import{D as s}from"./DraftComponentMixin-9e4b7b34.js";import"./Icon.js";import"./state-70f38ceb.js";import"./if-defined-2a4c6dbc.js";import"./unsafe-html-4da54dd2.js";import"./directive-de55b00a.js";import"./Component-6762b5eb.js";const l=n`:host{all:unset;display:block;color:var(--n-color-text-weak);font-weight:var(--n-font-weight);font-family:var(--n-font-family);line-height:var(--n-line-height-tight);white-space:nowrap;text-overflow:ellipsis;user-select:none;font-size:var(--n-font-size-m)}*,::after,::before{box-sizing:border-box}[role=list]{margin-block-end:var(--n-space-m);min-inline-size:100%;list-style:none;appearance:none;border:0;box-sizing:border-box;margin:0;padding:0}.n-heading{min-inline-size:100%;color:var(--n-color-nav-heading);font-weight:var(--n-font-weight-active);font-size:var(--n-font-size-m);padding-inline-start:var(--n-space-s);margin-block-end:var(--n-space-s)}`;let d=class extends(s(r)){render(){return t`${this.heading?t`<p id="heading" aria-hidden="true" class="n-heading">${this.heading}</p>`:o}<div role="list" aria-labelledby="${this.heading?"heading":o}"><slot></slot></div>`}};d.styles=l,e([a()],d.prototype,"heading",void 0),d=e([i("nord-nav-group")],d);var p=d;export{p as default};
+import{_ as e,n as i}from"./query-assigned-elements-37b095c4.js";import{r as n,$ as t,w as o,s as r}from"./lit-element-74b6bb4b.js";import{e as a}from"./property-03f59dce.js";import{D as s}from"./DraftComponentMixin-9e4b7b34.js";import"./Icon.js";import"./state-70f38ceb.js";import"./if-defined-fe657a02.js";import"./unsafe-html-989a642b.js";import"./directive-de55b00a.js";import"./Component-9d373ef3.js";const l=n`:host{all:unset;display:block;color:var(--n-color-text-weak);font-weight:var(--n-font-weight);font-family:var(--n-font-family);line-height:var(--n-line-height-tight);white-space:nowrap;text-overflow:ellipsis;user-select:none;font-size:var(--n-font-size-m)}*,::after,::before{box-sizing:border-box}[role=list]{margin-block-end:var(--n-space-m);min-inline-size:100%;list-style:none;appearance:none;border:0;box-sizing:border-box;margin:0;padding:0}.n-heading{min-inline-size:100%;color:var(--n-color-nav-heading);font-weight:var(--n-font-weight-active);font-size:var(--n-font-size-m);padding-inline-start:var(--n-space-s);margin-block-end:var(--n-space-s)}`;let d=class extends(s(r)){render(){return t`${this.heading?t`<p id="heading" aria-hidden="true" class="n-heading">${this.heading}</p>`:o}<div role="list" aria-labelledby="${this.heading?"heading":o}"><slot></slot></div>`}};d.styles=l,e([a()],d.prototype,"heading",void 0),d=e([i("nord-nav-group")],d);var p=d;export{p as default};
 //# sourceMappingURL=NavGroup.js.map

package/lib/NavItem.js

@@ -1,2 +1,2 @@
-import{_ as e,n}from"./query-assigned-elements-37b095c4.js";import{r as t,$ as o,w as a,s as r}from"./lit-element-9646ab7e.js";import{e as i}from"./property-03f59dce.js";import{o as s}from"./class-map-61e9e8c1.js";import{l as c}from"./if-defined-2a4c6dbc.js";import{n as l}from"./ref-82d2502a.js";import{D as d}from"./DirectionController-82794ee9.js";import{S as v}from"./SlotController-5bfc47d1.js";import{N as p}from"./events-731d0007.js";import{D as h}from"./DraftComponentMixin-9e4b7b34.js";import{F as f}from"./FocusableMixin-ca9d30fa.js";import"./directive-de55b00a.js";const m=t`:host{all:unset;display:block;font-size:var(--n-font-size-m);font-feature-settings:var(--n-font-features);font-family:var(--n-font-family)}*,::after,::before{box-sizing:border-box}.n-nav-item{display:flex;align-items:center;font-family:inherit;font-size:inherit;line-height:var(--n-line-height-tight);-webkit-appearance:none;appearance:none;color:var(--n-color-text-weak);padding:var(--n-space-s);min-block-size:28px;margin-block-end:1px;border-radius:var(--n-border-radius-s);text-decoration:none;inline-size:100%;background:0 0;cursor:pointer;border:0;text-align:start;box-shadow:var(--n-nav-item-box-shadow,none)}.n-nav-item:focus{--n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}.n-nav-item:hover{background:var(--n-color-nav-hover);color:var(--n-color-text)}.n-nav-item:active{opacity:.7}.n-content{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([active]) .n-nav-item{--n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-color-accent);color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active)}:host([active]) .n-nav-item:focus{--n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) nord-icon{color:currentColor}.n-toggle-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s);margin-inline-start:var(--n-space-s)}.n-toggle-icon.n-rtl{transform:rotate(-180deg)}[aria-expanded=true] .n-toggle-icon{transform:rotate(90deg)}.n-nav-icon{margin-inline-end:calc(var(--n-space-s) * 1.4);flex-shrink:0}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + calc(var(--n-space-s) * 1.3))}.n-nav-badge{border-radius:var(--n-border-radius-pill);background:var(--n-color-status-highlight);color:rgba(0,0,0,.8);font-weight:var(--n-font-weight-active);font-feature-settings:var(--n-font-features-reduced);padding:4px 6px;text-align:center;min-inline-size:20px;margin-inline-start:var(--n-space-s);font-size:var(--n-font-size-xs);display:inline-block}`;let g=class extends(f(h(r))){constructor(){super(...arguments),this.subnavSlot=new v(this,"subnav"),this.direction=new d(this),this.active=!1,this.open=!1}connectedCallback(){super.connectedCallback(),this.querySelector("nord-nav-item[active]")&&(this.open=!0)}render(){const e=o`${this.icon?o`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:a}<div class="n-content"><slot></slot></div>`;let n;return n=this.subnavSlot.hasContent?this.renderToggle(e):this.href?this.renderLink(e):this.renderButton(e),o`<div role="listitem">${n}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLink(e){return o`<a class="n-nav-item" ${l(this.focusableRef)} aria-current="${c(this.active?"page":void 0)}" href="${this.href||""}">${e} ${this.badge?o`<span class="n-nav-badge">${this.badge}</span>`:a}</a>`}renderToggle(e){return o`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${l(this.focusableRef)}>${e}<nord-icon size="xs" class="${s({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(e){return o`<button class="n-nav-item" ${l(this.focusableRef)}>${e} ${this.badge?o`<span class="n-nav-badge">${this.badge}</span>`:a}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new p("toggle"))}};g.styles=m,e([i({type:Boolean,reflect:!0})],g.prototype,"active",void 0),e([i()],g.prototype,"icon",void 0),e([i()],g.prototype,"href",void 0),e([i()],g.prototype,"badge",void 0),e([i({type:Boolean})],g.prototype,"open",void 0),g=e([n("nord-nav-item")],g);var b=g;export{b as default};
+import{_ as e,n}from"./query-assigned-elements-37b095c4.js";import{r as t,$ as o,w as a,s as r}from"./lit-element-74b6bb4b.js";import{e as i}from"./property-03f59dce.js";import{o as s}from"./class-map-87423405.js";import{l as c}from"./if-defined-fe657a02.js";import{n as l}from"./ref-7d028e3a.js";import{D as d}from"./DirectionController-82794ee9.js";import{S as v}from"./SlotController-5bfc47d1.js";import{N as p}from"./events-731d0007.js";import{D as h}from"./DraftComponentMixin-9e4b7b34.js";import{F as f}from"./FocusableMixin-ebb67709.js";import"./directive-de55b00a.js";const m=t`:host{all:unset;display:block;font-size:var(--n-font-size-m);font-feature-settings:var(--n-font-features);font-family:var(--n-font-family)}*,::after,::before{box-sizing:border-box}.n-nav-item{display:flex;align-items:center;font-family:inherit;font-size:inherit;line-height:var(--n-line-height-tight);-webkit-appearance:none;appearance:none;color:var(--n-color-text-weak);padding:var(--n-space-s);min-block-size:28px;margin-block-end:1px;border-radius:var(--n-border-radius-s);text-decoration:none;inline-size:100%;background:0 0;cursor:pointer;border:0;text-align:start;box-shadow:var(--n-nav-item-box-shadow,none)}.n-nav-item:focus{--n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}.n-nav-item:hover{background:var(--n-color-nav-hover);color:var(--n-color-text)}.n-nav-item:active{opacity:.7}.n-content{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([active]) .n-nav-item{--n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-color-accent);color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active)}:host([active]) .n-nav-item:focus{--n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) nord-icon{color:currentColor}.n-toggle-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s);margin-inline-start:var(--n-space-s)}.n-toggle-icon.n-rtl{transform:rotate(-180deg)}[aria-expanded=true] .n-toggle-icon{transform:rotate(90deg)}.n-nav-icon{margin-inline-end:calc(var(--n-space-s) * 1.4);flex-shrink:0}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + calc(var(--n-space-s) * 1.3))}.n-nav-badge{border-radius:var(--n-border-radius-pill);background:var(--n-color-status-highlight);color:rgba(0,0,0,.8);font-weight:var(--n-font-weight-active);font-feature-settings:var(--n-font-features-reduced);padding:4px 6px;text-align:center;min-inline-size:20px;margin-inline-start:var(--n-space-s);font-size:var(--n-font-size-xs);display:inline-block}`;let g=class extends(f(h(r))){constructor(){super(...arguments),this.subnavSlot=new v(this,"subnav"),this.direction=new d(this),this.active=!1,this.open=!1}connectedCallback(){super.connectedCallback(),this.querySelector("nord-nav-item[active]")&&(this.open=!0)}render(){const e=o`${this.icon?o`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:a}<div class="n-content"><slot></slot></div>`;let n;return n=this.subnavSlot.hasContent?this.renderToggle(e):this.href?this.renderLink(e):this.renderButton(e),o`<div role="listitem">${n}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLink(e){return o`<a class="n-nav-item" ${l(this.focusableRef)} aria-current="${c(this.active?"page":void 0)}" href="${this.href||""}">${e} ${this.badge?o`<span class="n-nav-badge">${this.badge}</span>`:a}</a>`}renderToggle(e){return o`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${l(this.focusableRef)}>${e}<nord-icon size="xs" class="${s({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(e){return o`<button class="n-nav-item" ${l(this.focusableRef)}>${e} ${this.badge?o`<span class="n-nav-badge">${this.badge}</span>`:a}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new p("toggle"))}};g.styles=m,e([i({type:Boolean,reflect:!0})],g.prototype,"active",void 0),e([i()],g.prototype,"icon",void 0),e([i()],g.prototype,"href",void 0),e([i()],g.prototype,"badge",void 0),e([i({type:Boolean})],g.prototype,"open",void 0),g=e([n("nord-nav-item")],g);var b=g;export{b as default};
 //# sourceMappingURL=NavItem.js.map

package/lib/Navigation.js

@@ -1,2 +1,2 @@
-import{_ as e,n as o}from"./query-assigned-elements-37b095c4.js";import{r,$ as n,s as a}from"./lit-element-9646ab7e.js";import{D as l}from"./DraftComponentMixin-9e4b7b34.js";const s=r`:host{all:unset;display:flex;flex-direction:column;block-size:100%;background:var(--n-color-nav-surface);border-inline-end:1px solid var(--n-color-border);overflow:hidden auto}*,::after,::before{box-sizing:border-box}nav{flex-grow:1;padding:var(--n-space-m)}slot[name=footer],slot[name=header]{display:flex;flex-direction:column;justify-content:center}slot[name=header]{min-block-size:var(--n-space-xxl);border-block-end:1px solid var(--n-color-border)}slot[name=footer]{padding:var(--n-space-m)}`;let t=class extends(l(a)){render(){return n`<slot name="header"></slot><nav><slot></slot></nav><slot name="footer"></slot>`}};t.styles=s,t=e([o("nord-navigation")],t);var d=t;export{d as default};
+import{_ as e,n as o}from"./query-assigned-elements-37b095c4.js";import{r,$ as n,s as a}from"./lit-element-74b6bb4b.js";import{D as l}from"./DraftComponentMixin-9e4b7b34.js";const s=r`:host{all:unset;display:flex;flex-direction:column;block-size:100%;background:var(--n-color-nav-surface);border-inline-end:1px solid var(--n-color-border);overflow:hidden auto}*,::after,::before{box-sizing:border-box}nav{flex-grow:1;padding:var(--n-space-m)}slot[name=footer],slot[name=header]{display:flex;flex-direction:column;justify-content:center}slot[name=header]{min-block-size:var(--n-space-xxl);border-block-end:1px solid var(--n-color-border)}slot[name=footer]{padding:var(--n-space-m)}`;let t=class extends(l(a)){render(){return n`<slot name="header"></slot><nav><slot></slot></nav><slot name="footer"></slot>`}};t.styles=s,t=e([o("nord-navigation")],t);var d=t;export{d as default};
 //# sourceMappingURL=Navigation.js.map

package/lib/ProgressBar.js

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

package/lib/ProgressBar.js.map

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

package/lib/Radio.js

@@ -1,2 +1,2 @@
-import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{w as i,r as n,$ as o,s as r}from"./lit-element-9646ab7e.js";import{e as s}from"./property-03f59dce.js";import{l as a}from"./if-defined-2a4c6dbc.js";import{n as l}from"./ref-82d2502a.js";import{L as d}from"./LightDomController-f56fa1a4.js";import{S as c}from"./SlotController-5bfc47d1.js";import{F as h}from"./FocusableMixin-ca9d30fa.js";import{F as p}from"./FormAssociatedMixin-bfbbe389.js";import{I as m}from"./InputMixin-94d15730.js";import{s as u}from"./Component-6762b5eb.js";import{s as b}from"./FormField-e021be01.js";import"./directive-de55b00a.js";import"./events-731d0007.js";import"./VisuallyHidden.js";class v 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?i:this.options.render(),renderOptions:{renderBefore:this.renderHook}})}hostConnected(){super.hostConnected(),this.host.appendChild(this.renderHook),this.syncLightDom()}hostDisconnected(){super.hostDisconnected(),this.renderHook.remove()}syncLightDom(){const e=this.content;e&&this.options.syncLightDom(e)}}const f=n`: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;border:1px solid var(--n-radio-border-color,var(--n-color-border-hover))!important;border-radius:var(--n-border-radius-circle)!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)}::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)}: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 v(this,{slotName:"hint",render:()=>this.hint?o`<div slot="hint-internal" id="${this.hintId}">${this.hint}</div>`:i,syncLightDom:e=>{e.id=this.hintId}}),this.labelSlot=new v(this,{slotName:"label",render:()=>this.label?o`<label slot="label-internal" for="${this.inputId}">${this.label}</label>`:i,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 v(this,{slotName:"error",render:()=>this.error?o`<div slot="error-internal" id="${this.errorId}">${this.error}</div>`:i,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>`:i}</div><div class="n-expand"><div class="n-label-container">${e=this.hideLabel,t=()=>o`<slot name="label"></slot><slot name="label-internal"></slot>`,n=e=>o`<nord-visually-hidden>${e}</nord-visually-hidden>`,e?n(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,n}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,b,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-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-5bfc47d1.js";import{F as h}from"./FocusableMixin-ebb67709.js";import{F as p}from"./FormAssociatedMixin-ccae91fd.js";import{I as m}from"./InputMixin-94d15730.js";import{s as u}from"./Component-9d373ef3.js";import{s as b}from"./FormField-50bd73d5.js";import"./directive-de55b00a.js";import"./events-731d0007.js";import"./VisuallyHidden.js";class v 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(){super.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 v(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 v(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 v(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,b,f],e([s({type:Boolean,reflect:!0})],$.prototype,"checked",void 0),$=e([t("nord-radio")],$);var y=$;export{y 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    super.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":"mrBAcaA,UAA4BC,EAIvCC,YAAYC,EAAoDC,GAC9DC,MAAMF,EAAMC,EAAQE,UAD0CC,aAAAH,EA0B7CG,cAAW,KAC5BA,KAAKC,gBAzBLD,KAAKH,QAAUA,EAKfG,KAAKE,WAAaC,SAASC,cAAcJ,KAAKD,UAE9CC,KAAKK,SAAW,IAAIC,EAAmBV,EAAM,CAC3CW,OAAQ,IAAOP,KAAKQ,WAAaC,EAAUT,KAAKH,QAAQU,SACxDG,cAAe,CAAEC,aAAcX,KAAKE,cAIxCU,gBACEd,MAAMc,gBACNZ,KAAKJ,KAAKiB,YAAYb,KAAKE,YAC3BF,KAAKC,eAGPa,mBACEhB,MAAMgB,mBACNd,KAAKE,WAAWa,SAOVd,eACN,MAAMe,EAAOhB,KAAKiB,QAEdD,GACFhB,KAAKH,QAAQI,aAAae,2oECpChC,IAAIE,EAAK,EACT,MAAMC,EAAYC,GAAmB,cAAcA,KAAUF,MAiB7D,IAAqBG,EAArB,cAAmCC,EAAoBC,EAAWC,EAAeC,MAAjF9B,kCAGqBK,aAAUmB,EAAS,SACnBnB,YAASmB,EAAS,QAClBnB,aAAUmB,EAAS,SAKnBnB,cAAW,IAAIP,EAAoBO,KAAM,CAC1DD,SAAU,OACVQ,OAAQ,IAAOP,KAAK0B,KAAOC,CAAI,iCAAgC3B,KAAK4B,WAAU5B,KAAK0B,aAAejB,EAClGR,aAAc4B,IACZA,EAAQX,GAAKlB,KAAK4B,UAIH5B,eAAY,IAAIP,EAAoBO,KAAM,CAC3DD,SAAU,QACVQ,OAAQ,IAAOP,KAAK8B,MAAQH,CAAI,qCAAoC3B,KAAK+B,YAAW/B,KAAK8B,gBAAkBrB,EAC3GR,aAAc4B,KApClB,SAAiBA,GACf,MAA6B,UAAtBA,EAAQG,UAoCNC,CAAQJ,GAEXK,QAAQC,KAAK,yEAEbN,EAAQO,QAAUpC,KAAK+B,WAKV/B,eAAY,IAAIP,EAAoBO,KAAM,CAC3DD,SAAU,QACVQ,OAAQ,IAAOP,KAAKqC,MAAQV,CAAI,kCAAiC3B,KAAKsC,YAAWtC,KAAKqC,cAAgB5B,EACtGR,aAAc4B,IACZA,EAAQX,GAAKlB,KAAK4B,UAIZ5B,eAAY,IAAIM,EAAmBN,KAAM,CACjDO,OAAQ,IACNoB,CAAI,8BAGQ3B,KAAKuC,uBACJvC,KAAKwC,gBACZC,EAAIzC,KAAK0C,qCAEN1C,KAAK+B,+BAEHY,EAAU3C,KAAK4C,kBACb5C,KAAK6C,oBACH7C,KAAK8C,uBACJ9C,KAAK+C,wBACL/C,KAAKgD,+BACEL,EAAU3C,KAAKiD,oCACnBN,EAAU3C,KAAKkD,oBAcMlD,cAAmB,EA+DvDA,gBAAcmD,IACpBA,EAAEC,kBACFpD,KAAKqD,cAAc,IAAIC,MAAM,OAAQ,CAAEC,SAAS,EAAOC,YAAY,MAG7DxD,iBAAemD,IACrBA,EAAEC,kBACFpD,KAAKqD,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,EAAOC,YAAY,MA9E/CC,iBAUvBC,WAAWC,GACT,GAAIA,EAAkBC,IAAI,WAAY,EACZD,EAAkBE,IAAI,YAItB7D,KAAK8C,SAC3B9C,KAAK8D,mBAKXvD,SACE,OAAOoB,CAAI,+DAEkC3B,KAAK+D,2CAE1C/D,KAAK8C,QAAUnB,CAAI,4BAA8BlB,+DCvGpBuD,ED4G3BhE,KAAKiE,UC5GsCC,ED6G3C,IAAMvC,CAAI,gEC7GsDwC,EDiHhElD,GAAWU,CAAI,yBAAyBV,2BChH7C+C,EAAYG,EAAQD,KAAWA,8CDkHalE,KAAKoE,yIAKOpE,KAAKqE,gGCxH7BL,EAAgBE,EAAqBC,EDiIpEL,kBACO9D,KAAKsE,cAEbC,iBAAwB,oBAAoBvE,KAAK4C,UAAU4B,SAAQC,IAClEA,IAAUzE,OACZyE,EAAM3B,SAAU,MAKZiB,aAAaZ,GACrBA,EAAEC,kBACF,MAAMsB,EAASvB,EAAEuB,OAEjB1E,KAAK8C,QAAU4B,EAAO5B,QACtBhD,MAAMiE,aAAaZ,KAjId9B,SAAS,CAACsD,EAAgBC,EAAgBC,GAqELC,GAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,mCAtEjB7D,KADpB8D,EAAc,eACM9D,SAAAA"}
+{"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    super.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":"mrBAcaA,UAA4BC,EAIvCC,YAAYC,EAAoDC,GAC9DC,MAAMF,EAAMC,EAAQE,UAD0CC,aAAAH,EA0B7CG,cAAW,KAC5BA,KAAKC,gBAzBLD,KAAKH,QAAUA,EAKfG,KAAKE,WAAaC,SAASC,cAAcJ,KAAKD,UAE9CC,KAAKK,SAAW,IAAIC,EAAmBV,EAAM,CAC3CW,OAAQ,IAAOP,KAAKQ,WAAaC,EAAUT,KAAKH,QAAQU,SACxDG,cAAe,CAAEC,aAAcX,KAAKE,cAIxCU,gBACEd,MAAMc,gBACNZ,KAAKJ,KAAKiB,YAAYb,KAAKE,YAC3BF,KAAKC,eAGPa,mBACEhB,MAAMgB,mBACNd,KAAKE,WAAWa,SAOVd,eACN,MAAMe,EAAOhB,KAAKiB,QAEdD,GACFhB,KAAKH,QAAQI,aAAae,6sECpChC,IAAIE,EAAK,EACT,MAAMC,EAAYC,GAAmB,cAAcA,KAAUF,MAiB7D,IAAqBG,EAArB,cAAmCC,EAAoBC,EAAWC,EAAeC,MAAjF9B,kCAGqBK,aAAUmB,EAAS,SACnBnB,YAASmB,EAAS,QAClBnB,aAAUmB,EAAS,SAKnBnB,cAAW,IAAIP,EAAoBO,KAAM,CAC1DD,SAAU,OACVQ,OAAQ,IAAOP,KAAK0B,KAAOC,CAAI,iCAAgC3B,KAAK4B,WAAU5B,KAAK0B,aAAejB,EAClGR,aAAc4B,IACZA,EAAQX,GAAKlB,KAAK4B,UAIH5B,eAAY,IAAIP,EAAoBO,KAAM,CAC3DD,SAAU,QACVQ,OAAQ,IAAOP,KAAK8B,MAAQH,CAAI,qCAAoC3B,KAAK+B,YAAW/B,KAAK8B,gBAAkBrB,EAC3GR,aAAc4B,KApClB,SAAiBA,GACf,MAA6B,UAAtBA,EAAQG,UAoCNC,CAAQJ,GAEXK,QAAQC,KAAK,yEAEbN,EAAQO,QAAUpC,KAAK+B,WAKV/B,eAAY,IAAIP,EAAoBO,KAAM,CAC3DD,SAAU,QACVQ,OAAQ,IAAOP,KAAKqC,MAAQV,CAAI,kCAAiC3B,KAAKsC,YAAWtC,KAAKqC,cAAgB5B,EACtGR,aAAc4B,IACZA,EAAQX,GAAKlB,KAAK4B,UAIZ5B,eAAY,IAAIM,EAAmBN,KAAM,CACjDO,OAAQ,IACNoB,CAAI,8BAGQ3B,KAAKuC,uBACJvC,KAAKwC,gBACZC,EAAIzC,KAAK0C,qCAEN1C,KAAK+B,+BAEHY,EAAU3C,KAAK4C,kBACb5C,KAAK6C,oBACH7C,KAAK8C,uBACJ9C,KAAK+C,wBACL/C,KAAKgD,+BACEL,EAAU3C,KAAKiD,oCACnBN,EAAU3C,KAAKkD,oBAcMlD,cAAmB,EA+DvDA,gBAAcmD,IACpBA,EAAEC,kBACFpD,KAAKqD,cAAc,IAAIC,MAAM,OAAQ,CAAEC,SAAS,EAAOC,YAAY,MAG7DxD,iBAAemD,IACrBA,EAAEC,kBACFpD,KAAKqD,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,EAAOC,YAAY,MA9E/CC,iBAUvBC,WAAWC,GACT,GAAIA,EAAkBC,IAAI,WAAY,EACZD,EAAkBE,IAAI,YAItB7D,KAAK8C,SAC3B9C,KAAK8D,mBAKXvD,SACE,OAAOoB,CAAI,+DAEkC3B,KAAK+D,2CAE1C/D,KAAK8C,QAAUnB,CAAI,4BAA8BlB,+DCvGpBuD,ED4G3BhE,KAAKiE,UC5GsCC,ED6G3C,IAAMvC,CAAI,gEC7GsDwC,EDiHhElD,GAAWU,CAAI,yBAAyBV,2BChH7C+C,EAAYG,EAAQD,KAAWA,8CDkHalE,KAAKoE,yIAKOpE,KAAKqE,gGCxH7BL,EAAgBE,EAAqBC,EDiIpEL,kBACO9D,KAAKsE,cAEbC,iBAAwB,oBAAoBvE,KAAK4C,UAAU4B,SAAQC,IAClEA,IAAUzE,OACZyE,EAAM3B,SAAU,MAKZiB,aAAaZ,GACrBA,EAAEC,kBACF,MAAMsB,EAASvB,EAAEuB,OAEjB1E,KAAK8C,QAAU4B,EAAO5B,QACtBhD,MAAMiE,aAAaZ,KAjId9B,SAAS,CAACsD,EAAgBC,EAAgBC,GAqELC,GAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,mCAtEjB7D,KADpB8D,EAAc,eACM9D,SAAAA"}

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-9646ab7e.js";import{l as i}from"./if-defined-2a4c6dbc.js";import{n as s}from"./ref-82d2502a.js";import{o as a}from"./unsafe-html-4da54dd2.js";import"./Button.js";import{I as l}from"./InputMixin-94d15730.js";import{F as d}from"./FocusableMixin-ca9d30fa.js";import{F as c}from"./FormAssociatedMixin-bfbbe389.js";import{s as p}from"./Component-6762b5eb.js";import{s as u}from"./FormField-e021be01.js";import{S as b}from"./SlotController-5bfc47d1.js";import"./directive-de55b00a.js";import"./property-03f59dce.js";import"./LightDomController-f56fa1a4.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const m=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=after] svg{color:var(--n-color-icon);margin-inline-start:var(--n-space-m);margin-inline-end:calc(var(--n-space-s)/ -2);min-inline-size:calc(var(--n-space-l)/ 2.2);max-inline-size:calc(var(--n-space-l)/ 2.2)}::slotted([slot=before]){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="before" name="before"></slot>${t}<div slot="after">${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));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}">${e.text}</option>`}};v.styles=[p,u,m],v=e([t("nord-select")],v);var h=v;export{h as default};
+import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as n,$ as o,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-ccae91fd.js";import{s as p}from"./Component-9d373ef3.js";import{s as u}from"./FormField-50bd73d5.js";import{S as b}from"./SlotController-5bfc47d1.js";import"./directive-de55b00a.js";import"./property-03f59dce.js";import"./LightDomController-011334da.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const m=n`.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);margin-inline-start:var(--n-space-m);margin-inline-end:calc(var(--n-space-s)/ -2);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 o`<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&&o`<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));return t?t.text:this.placeholder?this.placeholder:e[0]?e[0].text:""}renderOption(e){return o`<option value="${i(e.value)}" ?disabled="${e.disabled}" ?selected="${e.value===this.value}">${e.text}</option>`}};v.styles=[p,u,m],v=e([t("nord-select")],v);var h=v;export{h 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=\"before\" name=\"before\"></slot>\n          ${buttonText}\n          <div slot=\"after\">${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)\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 value=${ifDefined(option.value)} ?disabled=${option.disabled} ?selected=${option.value === this.value}>\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","text","componentStyle","formFieldStyle","style","customElement"],"mappings":"snEA+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,qFAEjEnB,sBACkBoB,ECrEf,ofDyEP5B,KAAK6B,gBAICtB,cACV,OAAOuB,MAAMC,KAAK/B,KAAKgC,iBAAiB,WAGlCvB,cAAcF,GACpB,MAAM0B,EAAW1B,EAAQ2B,MAAKT,GAAUA,EAAOtB,QAAUH,KAAKG,QAE9D,OAAI8B,EACKA,EAASE,KAGdnC,KAAKuB,YACAvB,KAAKuB,YAGVhB,EAAQ,GACHA,EAAQ,GAAG4B,KAGb,GAGDT,aAAaD,GACnB,OAAOf,CAAI,kBACOO,EAAUQ,EAAOtB,sBAAoBsB,EAAOV,wBAAsBU,EAAOtB,QAAUH,KAAKG,UACpGsB,EAAOU,kBAtERzC,SAAS,CAAC0C,EAAgBC,EAAgBC,GAD9B5C,KADpB6C,EAAc,gBACM7C,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)\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 value=${ifDefined(option.value)} ?disabled=${option.disabled} ?selected=${option.value === this.value}>\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","text","componentStyle","formFieldStyle","style","customElement"],"mappings":"mnEA+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,QAE9D,OAAI8B,EACKA,EAASE,KAGdnC,KAAKuB,YACAvB,KAAKuB,YAGVhB,EAAQ,GACHA,EAAQ,GAAG4B,KAGb,GAGDT,aAAaD,GACnB,OAAOf,CAAI,kBACOO,EAAUQ,EAAOtB,sBAAoBsB,EAAOV,wBAAsBU,EAAOtB,QAAUH,KAAKG,UACpGsB,EAAOU,kBAtERzC,SAAS,CAAC0C,EAAgBC,EAAgBC,GAD9B5C,KADpB6C,EAAc,gBACM7C,SAAAA"}

package/lib/Spinner.js

@@ -1,2 +1,2 @@
-import{_ as e,n as r}from"./query-assigned-elements-37b095c4.js";import{r as n,$ as i,s as o}from"./lit-element-9646ab7e.js";import{e as s}from"./property-03f59dce.js";import{l as t}from"./if-defined-2a4c6dbc.js";import{s as a}from"./Component-6762b5eb.js";import{D as l}from"./DraftComponentMixin-9e4b7b34.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(l(o)){constructor(){super(...arguments),this.size="m"}render(){return i`<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>`}};d.styles=[a,c],e([s({reflect:!0})],d.prototype,"size",void 0),e([s({reflect:!0})],d.prototype,"color",void 0),e([s({reflect:!0})],d.prototype,"label",void 0),d=e([r("nord-spinner")],d);var z=d;export{z as default};
+import{_ as e,n as r}from"./query-assigned-elements-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};
 //# 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\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\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 draft\n * @category feedback\n */\n@customElement(\"nord-spinner\")\nexport default class Spinner extends DraftComponentMixin(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`<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\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-spinner\": Spinner\n  }\n}\n"],"names":["Spinner","DraftComponentMixin","LitElement","constructor","this","render","html","ifDefined","label","undefined","color","componentStyle","style","__decorate","property","reflect","customElement"],"mappings":"k/CAgBA,IAAqBA,EAArB,cAAqCC,EAAoBC,IAAzDC,kCAM+BC,UAA8C,IAc3EC,SAGE,OAAOC,CAAI,gCAEFC,EAAUH,KAAKI,MAAQ,WAAQC,mBACzBF,EAAUH,KAAKI,kBACpBD,EAAUH,KAAKM,MAAQ,SAASN,KAAKM,aAAUD,eA1BpDT,SAAS,CAACW,EAAgBC,GAKJC,GAA5BC,EAAS,CAAEC,SAAS,gCAMQF,GAA5BC,EAAS,CAAEC,SAAS,iCAMQF,GAA5BC,EAAS,CAAEC,SAAS,iCAlBFf,KADpBgB,EAAc,iBACMhB,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 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`<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\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,gCAEFC,EAAUH,KAAKI,MAAQ,WAAQC,mBACzBF,EAAUH,KAAKI,kBACpBD,EAAUH,KAAKM,MAAQ,SAASN,KAAKM,aAAUD,eA1BpDR,SAAS,CAACU,EAAgBC,GAKJC,GAA5BC,EAAS,CAAEC,SAAS,gCAMQF,GAA5BC,EAAS,CAAEC,SAAS,iCAMQF,GAA5BC,EAAS,CAAEC,SAAS,iCAlBFd,KADpBe,EAAc,iBACMf,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-9646ab7e.js";import{e as a}from"./property-03f59dce.js";import{s as r}from"./Component-6762b5eb.js";const i=s`:host{display:flex;flex-flow:column wrap;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))}:host([direction=horizontal]){align-items:center;flex-direction:row}: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}::slotted(*){margin:0!important}: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"}render(){return o`<slot></slot>`}};c.styles=[r,i],t([a({reflect:!0})],c.prototype,"gap",void 0),t([a({reflect:!0})],c.prototype,"direction",void 0),t([a({reflect:!0,attribute:"align-items"})],c.prototype,"alignItems",void 0),t([a({reflect:!0,attribute:"justify-content"})],c.prototype,"justifyContent",void 0),c=t([e("nord-stack")],c);var l=c;export{l as default};
+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 a}from"./property-03f59dce.js";import{s as r}from"./Component-9d373ef3.js";const i=s`:host{display:flex;flex-flow:column wrap;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))}:host([direction=horizontal]){align-items:center;flex-direction:row}: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}::slotted(*){margin:0!important}: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"}render(){return o`<slot></slot>`}};c.styles=[r,i],t([a({reflect:!0})],c.prototype,"gap",void 0),t([a({reflect:!0})],c.prototype,"direction",void 0),t([a({reflect:!0,attribute:"align-items"})],c.prototype,"alignItems",void 0),t([a({reflect:!0,attribute:"justify-content"})],c.prototype,"justifyContent",void 0),c=t([e("nord-stack")],c);var l=c;export{l as default};
 //# sourceMappingURL=Stack.js.map