@nordhealth/components 1.0.0 → 1.1.2

package/lib/FocusableMixin-4c85ced9.js

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

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"FocusableMixin-4c85ced9.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","focusableRef","createRef","focus","options","_a","value","blur","click"],"mappings":"sCAcM,SAAUA,EAAoDC,GA2BlE,OA1BA,cAA+BA,EAA/BC,kCACYC,KAAYC,aAAGC,IAMzBC,MAAMC,iBACJC,EAAAL,KAAKC,aAAaK,sBAAOH,MAAMC,GAMjCG,aAC2B,QAAzBF,EAAAL,KAAKC,aAAaK,aAAO,IAAAD,GAAAA,EAAAE,OAM3BC,cAC2B,QAAzBH,EAAAL,KAAKC,aAAaK,aAAO,IAAAD,GAAAA,EAAAG"}

package/lib/FormAssociatedMixin-9d38814c.js

@@ -0,0 +1,2 @@
+import{_ as t}from"./query-assigned-elements-ef860822.js";import{$ as e}from"./lit-element-e382250e.js";import{e as r}from"./property-03f59dce.js";import{E as o}from"./EventController-d99ebeef.js";import{S as i}from"./SlotController-ea6eff46.js";import{N as s}from"./events-731d0007.js";import"./VisuallyHidden.js";class n{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)},t.addController(this),this.events=new o(t)}hostConnected(){this.host.form&&this.events.listen(this.host.form,"formdata",this.handleFormData)}}function h(o){class h extends o{constructor(){super(...arguments),this.labelSlot=new i(this,"label"),this.errorSlot=new i(this,"error"),this.hintSlot=new i(this,"hint"),this.formData=new n(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 s("input"))}handleChange(t){t.stopPropagation(),this.dispatchEvent(new s("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{h as F};
+//# sourceMappingURL=FormAssociatedMixin-9d38814c.js.map

package/lib/FormAssociatedMixin-9d38814c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormAssociatedMixin-9d38814c.js","sources":["../src/common/controllers/FormDataController.ts","../src/common/mixins/FormAssociatedMixin.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { InputMixinInterface } from \"../mixins/InputMixin.js\"\nimport { EventController } from \"./EventController.js\"\n\ntype FormDataOptions = {\n  value: () => string | undefined\n}\n\nexport class FormDataController implements ReactiveController {\n  private events: EventController\n  constructor(private host: ReactiveControllerHost & InputMixinInterface, private options: FormDataOptions) {\n    host.addController(this)\n    this.events = new EventController(host)\n  }\n\n  hostConnected() {\n    if (this.host.form) {\n      this.events.listen(this.host.form, \"formdata\", this.handleFormData)\n    }\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","handleFormData","e","disabled","name","value","formData","append","addController","events","EventController","hostConnected","form","listen","FormAssociatedMixin","superClass","FormAssociatedElement","labelSlot","SlotController","errorSlot","hintSlot","formValue","inputId","errorId","hintId","label","hideLabel","required","expand","handleInput","stopPropagation","target","dispatchEvent","NordEvent","handleChange","renderLabel","html","hasHint","hint","renderError","hasError","error","getDescribedBy","getInvalid","undefined","Boolean","hasContent","__decorate","property","prototype","type","attribute","reflect"],"mappings":"iUAQaA,EAEXC,YAAoBC,EAA4DC,GAA5DC,KAAIF,KAAJA,EAA4DE,KAAOD,QAAPA,EAWxEC,KAAAC,eAAkBC,IACxB,MAAMC,SAAEA,EAAQC,KAAEA,GAASJ,KAAKF,KAEhC,GAAIK,EACF,OAGF,MAAME,EAAQL,KAAKD,QAAQM,QAEvBD,GAAiB,MAATC,GACVH,EAAEI,SAASC,OAAOH,EAAMC,IApB1BP,EAAKU,cAAcR,MACnBA,KAAKS,OAAS,IAAIC,EAAgBZ,GAGpCa,gBACMX,KAAKF,KAAKc,MACZZ,KAAKS,OAAOI,OAAOb,KAAKF,KAAKc,KAAM,WAAYZ,KAAKC,iBCwBpD,SAAUa,EAA6EC,GAQ3F,MAAMC,UAA8BD,EAApClB,kCACYG,KAASiB,UAAG,IAAIC,EAAelB,KAAM,SACrCA,KAASmB,UAAG,IAAID,EAAelB,KAAM,SACrCA,KAAQoB,SAAG,IAAIF,EAAelB,KAAM,QACpCA,KAAAM,SAAW,IAAIV,EAAmBI,KAAM,CAAEK,MAAO,IAAML,KAAKqB,YAM5DrB,KAAOsB,QAAG,QACVtB,KAAOuB,QAAG,QACVvB,KAAMwB,OAAG,OAKPxB,KAAKyB,MAAW,GAU0BzB,KAAS0B,WAAG,EAiBrC1B,KAAQ2B,UAAG,EAKI3B,KAAM4B,QAAG,EA3CvCP,gBACZ,OAAOrB,KAAKK,MA4CJwB,YAAY3B,GACpBA,EAAE4B,kBACF,MAAMC,EAAS7B,EAAE6B,OACjB/B,KAAKK,MAAQ0B,EAAO1B,MAKpBL,KAAKgC,cAAc,IAAIC,EAAU,UAGzBC,aAAahC,GACrBA,EAAE4B,kBAKF9B,KAAKgC,cAAc,IAAIC,EAAU,WAGzBE,cACR,MAAMV,EAAQW,CAAI,eACHpC,KAAKsB,+BACKtB,KAAKyB,yDAGOzB,KAAKwB,qBAAmBxB,KAAKqC,8BAC1CrC,KAAKsC,oBAI7B,OAAOtC,KAAK0B,UACRU,CAAI,yBAAyBX,2BAC7BW,CAAI,kCAAkCX,UAGlCc,cACR,OAAOH,CAAI,sCAC2BpC,KAAKuB,mCAAiCvB,KAAKwC,gCACxDxC,KAAKyC,qBAKtBC,iBACR,MAAML,QAAEA,EAAOG,SAAEA,GAAaxC,KAE9B,OAAIqC,GAAWG,EACN,GAAGxC,KAAKwB,UAAUxB,KAAKuB,UAE5Bc,EACKrC,KAAKwB,OAEVgB,EACKxC,KAAKuB,aADd,EAOQoB,aACR,OAAO3C,KAAKwC,SAAW,YAASI,EAGpBP,cACZ,OAAOQ,QAAQ7C,KAAKsC,OAAStC,KAAKoB,SAAS0B,WAG/BN,eACZ,OAAOK,QAAQ7C,KAAKyC,QAAUzC,KAAKmB,UAAU2B,YAIjD,OA3GcC,EAAA,CAAXC,KAA6BhC,EAAAiC,UAAA,aAAA,GAKlBF,EAAA,CAAXC,KAAwBhC,EAAAiC,UAAA,YAAA,GAK6BF,EAAA,CAArDC,EAAS,CAAEE,KAAML,QAASM,UAAW,gBAAiCnC,EAAAiC,UAAA,iBAAA,GAK3DF,EAAA,CAAXC,KAA+BhC,EAAAiC,UAAA,mBAAA,GAKpBF,EAAA,CAAXC,KAAyBhC,EAAAiC,UAAA,aAAA,GAOGF,EAAA,CAA5BC,EAAS,CAAEE,KAAML,WAA2B7B,EAAAiC,UAAA,gBAAA,GAKDF,EAAA,CAA3CC,EAAS,CAAEI,SAAS,EAAMF,KAAML,WAAyB7B,EAAAiC,UAAA,cAAA,GA2ErDjC"}

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

@@ -1,2 +1,2 @@
-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
+import{r as n}from"./lit-element-e382250e.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-44e865a4.js.map

package/lib/FormField-44e865a4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField-44e865a4.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,s as n,$ as a}from"./lit-element-74b6bb4b.js";import{S as t}from"./SlotController-683d0e7c.js";import{s}from"./Component-9d373ef3.js";import"./EventController-d99ebeef.js";const d=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-end{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-end{margin-inline-start:auto;gap:var(--n-space-s)}`;let l=class extends n{constructor(){super(...arguments),this.endSlot=new t(this,"end")}render(){return a`<header class="n-header"><slot></slot><div class="n-header-end" ?hidden="${this.endSlot.isEmpty}"><slot name="end"></slot></div></header>`}};l.styles=[s,d],l=e([o("nord-header")],l);var i=l;export{i as default};
+import{_ as e,n as o}from"./query-assigned-elements-ef860822.js";import{r,s as n,$ as a}from"./lit-element-e382250e.js";import{S as t}from"./SlotController-ea6eff46.js";import{s}from"./Component-fa316972.js";import"./EventController-d99ebeef.js";const d=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-end{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-end{margin-inline-start:auto;gap:var(--n-space-s)}`;let l=class extends n{constructor(){super(...arguments),this.endSlot=new t(this,"end")}render(){return a`<header class="n-header"><slot></slot><div class="n-header-end" ?hidden="${this.endSlot.isEmpty}"><slot name="end"></slot></div></header>`}};l.styles=[s,d],l=e([o("nord-header")],l);var i=l;export{i as default};
 //# sourceMappingURL=Header.js.map

package/lib/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../src/header/Header.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Header.css\"\n\n/**\n * The header is a block of designated space for labelling the currently\n * viewed context as well as providing primary actions.\n *\n * @status new\n * @category structure\n * @slot - The header content.\n * @slot end - Optional slot for buttons, toggles, etc.\n */\n@customElement(\"nord-header\")\nexport default class Header extends LitElement {\n  static styles = [componentStyle, style]\n\n  private endSlot = new SlotController(this, \"end\")\n\n  render() {\n    return html`\n      <header class=\"n-header\">\n        <slot></slot>\n        <div class=\"n-header-end\" ?hidden=${this.endSlot.isEmpty}>\n          <slot name=\"end\"></slot>\n        </div>\n      </header>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-header\": Header\n  }\n}\n"],"names":["Header","LitElement","constructor","this","SlotController","render","html","endSlot","isEmpty","componentStyle","style","customElement"],"mappings":"21BAgBA,IAAqBA,EAArB,cAAoCC,EAApCC,kCAGUC,aAAU,IAAIC,EAAeD,KAAM,OAE3CE,SACE,OAAOC,CAAI,4EAG6BH,KAAKI,QAAQC,qDARhDR,SAAS,CAACS,EAAgBC,GADdV,KADpBW,EAAc,gBACMX,SAAAA"}
+{"version":3,"file":"Header.js","sources":["../src/header/Header.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Header.css\"\n\n/**\n * The header is a block of designated space for labelling the currently\n * viewed context as well as providing primary actions.\n *\n * @status new\n * @category structure\n * @slot - The header content.\n * @slot end - Optional slot for buttons, toggles, etc.\n */\n@customElement(\"nord-header\")\nexport default class Header extends LitElement {\n  static styles = [componentStyle, style]\n\n  private endSlot = new SlotController(this, \"end\")\n\n  render() {\n    return html`\n      <header class=\"n-header\">\n        <slot></slot>\n        <div class=\"n-header-end\" ?hidden=${this.endSlot.isEmpty}>\n          <slot name=\"end\"></slot>\n        </div>\n      </header>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-header\": Header\n  }\n}\n"],"names":["Header","LitElement","constructor","this","endSlot","SlotController","render","html","isEmpty","styles","componentStyle","style","__decorate","customElement"],"mappings":"21BAgBA,IAAqBA,EAArB,cAAoCC,EAApCC,kCAGUC,KAAOC,QAAG,IAAIC,EAAeF,KAAM,OAE3CG,SACE,OAAOC,CAAI,4EAG6BJ,KAAKC,QAAQI,qDARhDR,EAAAS,OAAS,CAACC,EAAgBC,GADdX,EAAMY,EAAA,CAD1BC,EAAc,gBACMb,SAAAA"}

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-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 a}from"./unsafe-html-989a642b.js";import{s as c}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);min-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)}" style="${l(this.color?`color:${this.color}`:void 0)}" aria-label="${l(this.label)}"><slot aria-hidden="true"></slot><div aria-hidden="true">${a(this.svg)}</div></div>`}resolve(){return this.name?h.registeredIcons.has(this.name)?h.registeredIcons.get(this.name):h.resolver(this.name):""}};v.styles=[c,d],v.resolver=e=>fetch(`https://nordcdn.net/ds/icons/1.3.7/assets/${e}.svg`).then((s=>{if(!s.ok)throw new TypeError(`NORD: unknown icon '${e}'`);return s.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-ef860822.js";import{r as i,s as o,$ as t}from"./lit-element-e382250e.js";import{e as r}from"./property-03f59dce.js";import{t as n}from"./state-70f38ceb.js";import{l as a}from"./if-defined-4d1db15c.js";import{o as c}from"./unsafe-html-76575c49.js";import{o as l}from"./observe-a9c6dfb6.js";import{c as d}from"./cond-ed8742b5.js";import{s as h}from"./Component-fa316972.js";import"./directive-de55b00a.js";const m=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);min-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 p;let v=p=class extends o{constructor(){super(...arguments),this.name="",this.size="m",this.svg=""}static registerResolver(e){p.resolver=e}static registerIcon(e,s){let i,o;if("string"==typeof e?(i=e,o=s):(i=e.title,o=e.default),!i)throw new Error("name is required when registering an icon");if(!o)throw new Error("icon must not be empty");p.registeredIcons.has(i)||p.registeredIcons.set(i,o)}render(){return t`<div role="${d(this.label,"img")}" style="${d(this.color,`color:${this.color}`)}" aria-label="${a(this.label)}"><slot aria-hidden="true"></slot><div aria-hidden="true">${c(this.svg)}</div></div>`}handleNameChange(){this.name?p.registeredIcons.has(this.name)?this.svg=p.registeredIcons.get(this.name):p.resolver(this.name).then((e=>{this.svg=e})).catch((()=>{this.svg=""})):this.svg=""}};v.styles=[h,m],v.resolver=e=>fetch(`https://nordcdn.net/ds/icons/1.3.7/assets/${e}.svg`).then((s=>{if(!s.ok)throw new TypeError(`NORD: unknown icon '${e}'`);return s.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),e([l("name")],v.prototype,"handleNameChange",null),v=p=e([s("nord-icon")],v);var f=v;export{f 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 => {\n    if (!response.ok) {\n      throw new TypeError(`NORD: unknown icon '${name}'`)\n    }\n\n    return response.text()\n  })\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 * @slot - The default slot used for placing a custom SVG icon.\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](/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\n        role=${ifDefined(this.label ? \"img\" : undefined)}\n        style=${ifDefined(this.color ? `color:${this.color}` : undefined)}\n        aria-label=${ifDefined(this.label)}\n      >\n        <slot aria-hidden=\"true\"></slot>\n        <div aria-hidden=\"true\">${unsafeHTML(this.svg)}</div>\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","ok","TypeError","text","Map","__decorate","property","reflect","state","customElement"],"mappings":"q1BAgCA,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,cAEAC,EAAUtB,KAAKuB,MAAQ,WAAQC,cAC9BF,EAAUtB,KAAKyB,MAAQ,SAASzB,KAAKyB,aAAUD,mBAC1CF,EAAUtB,KAAKuB,mEAGFG,EAAW1B,KAAKO,mBAKxCU,UACN,OAAKjB,KAAKM,KAINH,EAAKQ,gBAAgBC,IAAIZ,KAAKM,MACzBH,EAAKQ,gBAAgBgB,IAAI3B,KAAKM,MAGhCH,EAAKD,SAASF,KAAKM,MAPjB,KAzHJT,SAAS,CAAC+B,EAAgBC,GAElBhC,WAvBIS,GACnBwB,MAAM,6CAAmExB,SAAYY,MAAKa,IACxF,IAAKA,EAASC,GACZ,MAAM,IAAIC,UAAU,uBAAuB3B,MAG7C,OAAOyB,EAASG,UAkBHrC,kBAAkB,IAAIsC,IA2DRC,GAA5BC,EAAS,CAAEC,SAAS,gCAKQF,GAA5BC,EAAS,CAAEC,SAAS,gCAMQF,GAA5BC,EAAS,CAAEC,SAAS,iCAMQF,GAA5BC,EAAS,CAAEC,SAAS,iCAEZF,GAARG,+BAlFkB1C,OADpB2C,EAAc,cACM3C,SAAAA"}
+{"version":3,"file":"Icon.js","sources":["../src/icon/Icon.ts"],"sourcesContent":["import { html, LitElement } 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\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Icon.css\"\n\nexport type IconResolver = (iconName: string) => Promise<string>\n\n// in dev we should just load from node_modules\nconst loadIcon: IconResolver = (name: string) =>\n  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: IconResolver = (name: string) =>\n  fetch(`https://nordcdn.net/ds/icons/${process.env.ICON_VERSION}/assets/${name}.svg`).then(response => {\n    if (!response.ok) {\n      throw new TypeError(`NORD: unknown icon '${name}'`)\n    }\n\n    return response.text()\n  })\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 * @slot - The default slot used for placing a custom SVG icon.\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](/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  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\n        role=${cond(this.label, \"img\")}\n        style=${cond(this.color, `color:${this.color}`)}\n        aria-label=${ifDefined(this.label)}\n      >\n        <slot aria-hidden=\"true\"></slot>\n        <div aria-hidden=\"true\">${unsafeHTML(this.svg)}</div>\n      </div>\n    `\n  }\n\n  @observe(\"name\")\n  protected handleNameChange() {\n    if (!this.name) {\n      this.svg = \"\"\n      return\n    }\n\n    if (Icon.registeredIcons.has(this.name)) {\n      this.svg = Icon.registeredIcons.get(this.name) as string\n      return\n    }\n\n    Icon.resolver(this.name)\n      .then(svg => {\n        this.svg = svg\n      })\n      .catch(() => {\n        this.svg = \"\"\n      })\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-icon\": Icon\n  }\n}\n"],"names":["Icon","Icon_1","LitElement","constructor","this","name","size","svg","static","resolver","iconOrName","icon","title","default","Error","registeredIcons","has","set","render","html","cond","label","color","ifDefined","unsafeHTML","handleNameChange","get","then","catch","styles","componentStyle","style","fetch","response","ok","TypeError","text","Map","__decorate","property","reflect","prototype","state","observe","customElement"],"mappings":"26BAmCA,IAAqBA,EAAIC,EAAzB,cAAkCC,EAAlCC,kCA+D+BC,KAAIC,KAAW,GAKfD,KAAIE,KAA0C,IAc1DF,KAAGG,IAAW,GAtE/BC,wBAAwBC,GACtBR,EAAKQ,SAAWA,EAsBlBD,oBAAoBE,EAAyDC,GAC3E,IAAIN,EACAE,EAWJ,GAT0B,iBAAfG,GACTL,EAAOK,EACPH,EAAMI,IAENN,EAAOK,EAAWE,MAClBL,EAAMG,EAAWG,UAIdR,EACH,MAAM,IAAIS,MAAM,6CAElB,IAAKP,EACH,MAAM,IAAIO,MAAM,0BAGbb,EAAKc,gBAAgBC,IAAIX,IAC5BJ,EAAKc,gBAAgBE,IAAIZ,EAAME,GA4BnCW,SAIE,OAAOC,CAAI,cAEAC,EAAKhB,KAAKiB,MAAO,kBAChBD,EAAKhB,KAAKkB,MAAO,SAASlB,KAAKkB,yBAC1BC,EAAUnB,KAAKiB,mEAGFG,EAAWpB,KAAKG,mBAMtCkB,mBACHrB,KAAKC,KAKNJ,EAAKc,gBAAgBC,IAAIZ,KAAKC,MAChCD,KAAKG,IAAMN,EAAKc,gBAAgBW,IAAItB,KAAKC,MAI3CJ,EAAKQ,SAASL,KAAKC,MAChBsB,MAAKpB,IACJH,KAAKG,IAAMA,KAEZqB,OAAM,KACLxB,KAAKG,IAAM,MAdbH,KAAKG,IAAM,KAtGRP,EAAA6B,OAAS,CAACC,EAAgBC,GAElB/B,EAAAS,SArBkBJ,GACjC2B,MAAM,6CAAmE3B,SAAYsB,MAAKM,IACxF,IAAKA,EAASC,GACZ,MAAM,IAAIC,UAAU,uBAAuB9B,MAG7C,OAAO4B,EAASG,UAgBHpC,EAAAe,gBAAkB,IAAIsB,IA2DRC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyBxC,EAAAyC,UAAA,YAAA,GAKjBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyDxC,EAAAyC,UAAA,YAAA,GAMjDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsBxC,EAAAyC,UAAA,aAAA,GAMdH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsBxC,EAAAyC,UAAA,aAAA,GAElCH,EAAA,CAARI,KAAgC1C,EAAAyC,UAAA,WAAA,GAmBjCH,EAAA,CADCK,EAAQ,SAmBR3C,EAAAyC,UAAA,mBAAA,MAvHkBzC,EAAIC,EAAAqC,EAAA,CADxBM,EAAc,cACM5C,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-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-1f97ed66.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-9bee8388.js";import{S as b}from"./SlotController-683d0e7c.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.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};
+import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{r as s,w as i,$ as n,s as r}from"./lit-element-e382250e.js";import{e as o}from"./property-03f59dce.js";import{l as a}from"./if-defined-4d1db15c.js";import{n as l}from"./ref-adf41565.js";import{o as d}from"./unsafe-html-76575c49.js";import{F as p}from"./FocusableMixin-4c85ced9.js";import{F as m}from"./FormAssociatedMixin-9d38814c.js";import{I as c}from"./InputMixin-84ca72ae.js";import{s as h}from"./Component-fa316972.js";import{s as u}from"./FormField-44e865a4.js";import{s as f}from"./TextField-f8848f28.js";import{S as v}from"./SlotController-ea6eff46.js";import{c as b}from"./cond-ed8742b5.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const y=s`.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 $=class extends(m(c(p(r)))){constructor(){super(...arguments),this.startSlot=new v(this,"start"),this.type="text"}render(){var e;const t="search"===this.type||this.startSlot.hasContent,s="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>'):i;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="${s?"text":this.type}" inputmode="${b(s,"numeric")}" pattern="${b(s,"[0-9]*")}" ?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())}};$.styles=[h,u,f,y],e([o()],$.prototype,"type",void 0),$=e([t("nord-input")],$);var j=$;export{j 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 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":"swCA6BA,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"}
+{"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\"\nimport { cond } from \"../common/directives/cond.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=${cond(isNumber, \"numeric\")}\n          pattern=${cond(isNumber, \"[0-9]*\")}\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","startSlot","SlotController","type","render","hasIcon","hasContent","isNumber","defaultIcon","unsafeHTML","nothing","html","renderLabel","slotName","ref","focusableRef","inputId","cond","disabled","required","ifDefined","name","_a","value","placeholder","handleInput","handleChange","handleKeydown","getDescribedBy","getInvalid","renderError","e","key","form","querySelector","click","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","property","prototype","customElement"],"mappings":"6yCA8BA,IAAqBA,EAArB,cAAmCC,EAAoBC,EAAWC,EAAeC,MAAjFC,kCAGUC,KAASC,UAAG,IAAIC,EAAeF,KAAM,SAKjCA,KAAIG,KAAwE,OAExFC,eACE,MAAMC,EAAwB,WAAdL,KAAKG,MAAqBH,KAAKC,UAAUK,WACnDC,EAAyB,WAAdP,KAAKG,KAChBK,EAA4B,WAAdR,KAAKG,KAAoBM,EC3ClC,iQD2C2DC,EAEtE,OAAOC,CAAI,GACPX,KAAKY,2DAGQZ,KAAKC,UAAUY,uBAAqBR,MAAWG,kBAExDM,EAAId,KAAKe,qBACNf,KAAKgB,kCAEHT,EAAW,OAASP,KAAKG,oBACpBc,EAAKV,EAAU,wBACjBU,EAAKV,EAAU,yBACbP,KAAKkB,wBACLlB,KAAKmB,mBACVC,EAAUpB,KAAKqB,kBACH,QAAVC,EAAAtB,KAAKuB,aAAK,IAAAD,EAAAA,EAAI,oBACTF,EAAUpB,KAAKwB,yBACpBxB,KAAKyB,yBACJzB,KAAK0B,2BACJ1B,KAAK2B,oCACGP,EAAUpB,KAAK4B,oCACnBR,EAAUpB,KAAK6B,2CAKhC7B,KAAK8B,gBAIHH,cAAcI,SACN,UAAVA,EAAEC,KAAmBhC,KAAKiC,OACuC,QAAnEX,EAAAtB,KAAKiC,KAAKC,cAAiC,gCAAwB,IAAAZ,GAAAA,EAAEa,WA9ClEzC,EAAM0C,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBC,GAOrDC,EAAA,CAAXC,KAA6FhD,EAAAiD,UAAA,YAAA,GAR3EjD,EAAK+C,EAAA,CADzBG,EAAc,eACMlD,SAAAA"}

package/lib/{InputMixin-94d15730.js → InputMixin-84ca72ae.js}

@@ -1,2 +1,2 @@
-import{_ as e}from"./query-assigned-elements-37b095c4.js";import{e as o}from"./property-03f59dce.js";function t(t){class r extends t{constructor(){super(...arguments),this.disabled=!1,this.value=""}get form(){return this.closest("form")||void 0}}return e([o({type:Boolean,reflect:!0})],r.prototype,"disabled",void 0),e([o()],r.prototype,"name",void 0),e([o()],r.prototype,"value",void 0),r}export{t as I};
-//# sourceMappingURL=InputMixin-94d15730.js.map
+import{_ as e}from"./query-assigned-elements-ef860822.js";import{e as o}from"./property-03f59dce.js";function t(t){class r extends t{constructor(){super(...arguments),this.disabled=!1,this.value=""}get form(){return this.closest("form")||void 0}}return e([o({type:Boolean,reflect:!0})],r.prototype,"disabled",void 0),e([o()],r.prototype,"name",void 0),e([o()],r.prototype,"value",void 0),r}export{t as I};
+//# sourceMappingURL=InputMixin-84ca72ae.js.map

package/lib/InputMixin-84ca72ae.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputMixin-84ca72ae.js","sources":["../src/common/mixins/InputMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { LitElement } from \"lit\"\nimport { property } from \"lit/decorators.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class InputMixinInterface {\n  name: string | undefined\n  value: string\n  disabled: boolean\n  form?: HTMLFormElement\n}\n\nexport function InputMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<InputMixinInterface> & T {\n  class InputElement extends superClass {\n    /**\n     * Makes the component disabled. This prevents users from\n     * being able to interact with the component, and conveys\n     * its inactive state to assistive technologies.\n     */\n    @property({ type: Boolean, reflect: true }) disabled = false\n\n    /**\n     * The name of the form component.\n     */\n    @property() name?: string\n\n    /**\n     * The value of the form component.\n     */\n    @property() value: string = \"\"\n\n    /**\n     * Gets the form, if any, associated with the form element.\n     */\n    protected get form() {\n      return this.closest(\"form\") || undefined\n    }\n  }\n\n  return InputElement as unknown as Constructor<InputMixinInterface> & T\n}\n"],"names":["InputMixin","superClass","InputElement","constructor","this","disabled","value","form","closest","undefined","__decorate","property","type","Boolean","reflect","prototype"],"mappings":"qGAaM,SAAUA,EAA8CC,GAC5D,MAAMC,UAAqBD,EAA3BE,kCAM8CC,KAAQC,UAAG,EAU3CD,KAAKE,MAAW,GAKdC,WACZ,OAAOH,KAAKI,QAAQ,cAAWC,GAInC,OApB8CC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAwBZ,EAAAa,UAAA,gBAAA,GAKhDL,EAAA,CAAXC,KAAwBT,EAAAa,UAAA,YAAA,GAKbL,EAAA,CAAXC,KAA6BT,EAAAa,UAAA,aAAA,GAUzBb"}

package/lib/KeyboardController.js

@@ -1,2 +1,2 @@
-import{S as t}from"./ShortcutController-93173ff4.js";import"./tinykeys.module-84e6cc41.js";const o=t=>o=>{o.preventDefault(),t(o)};class r{constructor(r,s){this.host=r,r.addController(this),this.commandShortcuts=new t(r),this.globalShortcuts=new t(r,{"$mod+k":o(s.toggleOpen)}),this.navigationShortcuts=new t(r,{Enter:o(s.trigger),Backspace:s.goBack,End:o(s.end),Home:o(s.start),ArrowDown:o(s.next),ArrowUp:o(s.previous)},r)}registerCommandShortcuts(){const t={};for(const o of this.host.commands)o.shortcut&&(t[o.shortcut]=()=>{var t;return null===(t=o.handler)||void 0===t?void 0:t.call(o,this.host)});this.commandShortcuts.bind(t)}}export{r as KeyboardController};
+import{S as t}from"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";const o=t=>o=>{o.preventDefault(),t(o)};class r{constructor(r,s){this.host=r,r.addController(this),this.commandShortcuts=new t(r),this.globalShortcuts=new t(r,{"$mod+k":o(s.toggleOpen)}),this.navigationShortcuts=new t(r,{Enter:o(s.trigger),Backspace:s.goBack,End:o(s.end),Home:o(s.start),ArrowDown:o(s.next),ArrowUp:o(s.previous)},r)}registerCommandShortcuts(){const t={};for(const o of this.host.commands)o.shortcut&&(t[o.shortcut]=()=>{var t;return null===(t=o.handler)||void 0===t?void 0:t.call(o,this.host)});this.commandShortcuts.bind(t)}}export{r as KeyboardController};
 //# sourceMappingURL=KeyboardController.js.map

package/lib/KeyboardController.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyboardController.js","sources":["../src/command-menu/KeyboardController.ts"],"sourcesContent":["import { ReactiveController } from \"lit\"\nimport CommandMenu from \"./CommandMenu.js\"\nimport { ShortcutController, ShortcutMap } from \"../common/controllers/ShortcutController.js\"\n\ntype KeyboardActions = {\n  trigger: () => void\n  goBack: () => void\n  start: () => void\n  end: () => void\n  next: () => void\n  previous: () => void\n  toggleOpen: () => void\n}\n\nconst preventDefault = (fn: (e: Event) => void) => (e: Event) => {\n  e.preventDefault()\n  fn(e)\n}\n\nexport class KeyboardController {\n  private host: CommandMenu\n  private globalShortcuts: ShortcutController\n  private navigationShortcuts: ShortcutController\n  private commandShortcuts: ShortcutController\n\n  constructor(host: CommandMenu, actions: KeyboardActions) {\n    this.host = host\n    host.addController(this as ReactiveController)\n\n    this.commandShortcuts = new ShortcutController(host)\n    this.globalShortcuts = new ShortcutController(host, { \"$mod+k\": preventDefault(actions.toggleOpen) })\n    this.navigationShortcuts = new ShortcutController(\n      host,\n      {\n        Enter: preventDefault(actions.trigger),\n        Backspace: actions.goBack, // we don't want to prevent default, since that would stop backspace deleting chars\n        End: preventDefault(actions.end),\n        Home: preventDefault(actions.start),\n        ArrowDown: preventDefault(actions.next),\n        ArrowUp: preventDefault(actions.previous),\n      },\n      host\n    )\n  }\n\n  registerCommandShortcuts() {\n    const shortcuts: ShortcutMap = {}\n\n    for (const command of this.host.commands) {\n      if (command.shortcut) {\n        shortcuts[command.shortcut] = () => command.handler?.(this.host)\n      }\n    }\n\n    this.commandShortcuts.bind(shortcuts)\n  }\n}\n"],"names":["preventDefault","fn","e","KeyboardController","constructor","host","actions","this","addController","commandShortcuts","ShortcutController","globalShortcuts","toggleOpen","navigationShortcuts","Enter","trigger","Backspace","goBack","End","end","Home","start","ArrowDown","next","ArrowUp","previous","registerCommandShortcuts","shortcuts","command","commands","shortcut","handler","bind"],"mappings":"2FAcA,MAAMA,EAAkBC,GAA4BC,IAClDA,EAAEF,iBACFC,EAAGC,UAGQC,EAMXC,YAAYC,EAAmBC,GAC7BC,KAAKF,KAAOA,EACZA,EAAKG,cAAcD,MAEnBA,KAAKE,iBAAmB,IAAIC,EAAmBL,GAC/CE,KAAKI,gBAAkB,IAAID,EAAmBL,EAAM,CAAE,SAAUL,EAAeM,EAAQM,cACvFL,KAAKM,oBAAsB,IAAIH,EAC7BL,EACA,CACES,MAAOd,EAAeM,EAAQS,SAC9BC,UAAWV,EAAQW,OACnBC,IAAKlB,EAAeM,EAAQa,KAC5BC,KAAMpB,EAAeM,EAAQe,OAC7BC,UAAWtB,EAAeM,EAAQiB,MAClCC,QAASxB,EAAeM,EAAQmB,WAElCpB,GAIJqB,2BACE,MAAMC,EAAyB,GAE/B,IAAK,MAAMC,KAAWrB,KAAKF,KAAKwB,SAC1BD,EAAQE,WACVH,EAAUC,EAAQE,UAAY,WAAM,iBAAAF,EAAQG,mCAARH,EAAkBrB,KAAKF,QAI/DE,KAAKE,iBAAiBuB,KAAKL"}
+{"version":3,"file":"KeyboardController.js","sources":["../src/command-menu/KeyboardController.ts"],"sourcesContent":["import { ReactiveController } from \"lit\"\nimport CommandMenu from \"./CommandMenu.js\"\nimport { ShortcutController, ShortcutMap } from \"../common/controllers/ShortcutController.js\"\n\ntype KeyboardActions = {\n  trigger: () => void\n  goBack: () => void\n  start: () => void\n  end: () => void\n  next: () => void\n  previous: () => void\n  toggleOpen: () => void\n}\n\nconst preventDefault = (fn: (e: Event) => void) => (e: Event) => {\n  e.preventDefault()\n  fn(e)\n}\n\nexport class KeyboardController {\n  private globalShortcuts: ShortcutController\n  private navigationShortcuts: ShortcutController\n  private commandShortcuts: ShortcutController\n\n  constructor(private host: CommandMenu, actions: KeyboardActions) {\n    host.addController(this as ReactiveController)\n\n    this.commandShortcuts = new ShortcutController(host)\n    this.globalShortcuts = new ShortcutController(host, { \"$mod+k\": preventDefault(actions.toggleOpen) })\n    this.navigationShortcuts = new ShortcutController(\n      host,\n      {\n        Enter: preventDefault(actions.trigger),\n        Backspace: actions.goBack, // we don't want to prevent default, since that would stop backspace deleting chars\n        End: preventDefault(actions.end),\n        Home: preventDefault(actions.start),\n        ArrowDown: preventDefault(actions.next),\n        ArrowUp: preventDefault(actions.previous),\n      },\n      host\n    )\n  }\n\n  registerCommandShortcuts() {\n    const shortcuts: ShortcutMap = {}\n\n    for (const command of this.host.commands) {\n      if (command.shortcut) {\n        shortcuts[command.shortcut] = () => command.handler?.(this.host)\n      }\n    }\n\n    this.commandShortcuts.bind(shortcuts)\n  }\n}\n"],"names":["preventDefault","fn","e","KeyboardController","constructor","host","actions","this","addController","commandShortcuts","ShortcutController","globalShortcuts","toggleOpen","navigationShortcuts","Enter","trigger","Backspace","goBack","End","end","Home","start","ArrowDown","next","ArrowUp","previous","registerCommandShortcuts","shortcuts","command","commands","shortcut","_a","handler","call","bind"],"mappings":"2FAcA,MAAMA,EAAkBC,GAA4BC,IAClDA,EAAEF,iBACFC,EAAGC,UAGQC,EAKXC,YAAoBC,EAAmBC,GAAnBC,KAAIF,KAAJA,EAClBA,EAAKG,cAAcD,MAEnBA,KAAKE,iBAAmB,IAAIC,EAAmBL,GAC/CE,KAAKI,gBAAkB,IAAID,EAAmBL,EAAM,CAAE,SAAUL,EAAeM,EAAQM,cACvFL,KAAKM,oBAAsB,IAAIH,EAC7BL,EACA,CACES,MAAOd,EAAeM,EAAQS,SAC9BC,UAAWV,EAAQW,OACnBC,IAAKlB,EAAeM,EAAQa,KAC5BC,KAAMpB,EAAeM,EAAQe,OAC7BC,UAAWtB,EAAeM,EAAQiB,MAClCC,QAASxB,EAAeM,EAAQmB,WAElCpB,GAIJqB,2BACE,MAAMC,EAAyB,GAE/B,IAAK,MAAMC,KAAWrB,KAAKF,KAAKwB,SAC1BD,EAAQE,WACVH,EAAUC,EAAQE,UAAY,KAAK,IAAAC,EAAC,OAAA,QAAAA,EAAAH,EAAQI,eAAR,IAAAD,OAAA,EAAAA,EAAAE,KAAAL,EAAkBrB,KAAKF,QAI/DE,KAAKE,iBAAiByB,KAAKP"}

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 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};
+import{_ as n,n as t}from"./query-assigned-elements-ef860822.js";import{r as a,$ as e,s as o}from"./lit-element-e382250e.js";import{D as i}from"./DraftComponentMixin-9e4b7b34.js";import{s}from"./Component-fa316972.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};
 //# sourceMappingURL=Layout.js.map

package/lib/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","sources":["../src/layout/Layout.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Layout.css\"\n\n/**\n * Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n *\n * @status draft\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot header - Used to place content inside the header section.\n */\n@customElement(\"nord-layout\")\nexport default class Layout extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  render() {\n    return html`\n      <div class=\"n-layout\">\n        <div class=\"n-layout-nav\">\n          <slot name=\"nav\"></slot>\n        </div>\n        <div class=\"n-layout-main\">\n          <slot name=\"header\"></slot>\n          <main>\n            <slot></slot>\n          </main>\n        </div>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-layout\": Layout\n  }\n}\n"],"names":["Layout","DraftComponentMixin","LitElement","render","html","componentStyle","style","customElement"],"mappings":"sgCAkBA,IAAqBA,EAArB,cAAoCC,EAAoBC,IAGtDC,SACE,OAAOC,CAAI,+KAHNJ,SAAS,CAACK,EAAgBC,GADdN,KADpBO,EAAc,gBACMP,SAAAA"}
+{"version":3,"file":"Layout.js","sources":["../src/layout/Layout.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Layout.css\"\n\n/**\n * Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n *\n * @status draft\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot header - Used to place content inside the header section.\n */\n@customElement(\"nord-layout\")\nexport default class Layout extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  render() {\n    return html`\n      <div class=\"n-layout\">\n        <div class=\"n-layout-nav\">\n          <slot name=\"nav\"></slot>\n        </div>\n        <div class=\"n-layout-main\">\n          <slot name=\"header\"></slot>\n          <main>\n            <slot></slot>\n          </main>\n        </div>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-layout\": Layout\n  }\n}\n"],"names":["Layout","DraftComponentMixin","LitElement","render","html","styles","componentStyle","style","__decorate","customElement"],"mappings":"sgCAkBA,IAAqBA,EAArB,cAAoCC,EAAoBC,IAGtDC,SACE,OAAOC,CAAI,+KAHNJ,EAAAK,OAAS,CAACC,EAAgBC,GADdP,EAAMQ,EAAA,CAD1BC,EAAc,gBACMT,SAAAA"}

package/lib/LightDismissController-a2645ae6.js

@@ -0,0 +1,2 @@
+import{E as s}from"./EventController-d99ebeef.js";import{S as t}from"./ShortcutController-87615e31.js";class i{constructor(i,o){this.host=i,this.options=o,this.handleEsc=s=>{this.options.isOpen()&&this.options.onDismiss(s)},this.handleClickOut=s=>{var t;if(!this.options.isOpen())return;const i=null!==(t=this.options.isDismissible)&&void 0!==t?t:s=>s!==this.host;s.composedPath().every(i)&&this.options.onDismiss(s)},i.addController(this),this.shortcut=new t(i,{Escape:this.handleEsc}),this.events=new s(i)}hostConnected(){this.events.listen(document,"click",this.handleClickOut,!0)}}export{i as L};
+//# sourceMappingURL=LightDismissController-a2645ae6.js.map

package/lib/LightDismissController-a2645ae6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LightDismissController-a2645ae6.js","sources":["../src/common/controllers/LightDismissController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { EventController } from \"./EventController.js\"\nimport { ShortcutController } from \"./ShortcutController.js\"\n\ntype LightDismissOptions = {\n  isOpen: () => boolean\n  onDismiss: EventListener\n  isDismissible?: (node: EventTarget) => boolean\n}\n\nexport class LightDismissController implements ReactiveController {\n  private shortcut: ShortcutController\n  private events: EventController\n\n  constructor(private host: ReactiveControllerHost & Element, private options: LightDismissOptions) {\n    host.addController(this)\n    this.shortcut = new ShortcutController(host, { Escape: this.handleEsc })\n    this.events = new EventController(host)\n  }\n\n  hostConnected() {\n    this.events.listen(document, \"click\", this.handleClickOut, true)\n  }\n\n  private handleEsc = (e: KeyboardEvent) => {\n    if (!this.options.isOpen()) {\n      return\n    }\n\n    this.options.onDismiss(e)\n  }\n\n  private handleClickOut = (e: MouseEvent) => {\n    if (!this.options.isOpen()) {\n      return\n    }\n\n    const predicate: LightDismissOptions[\"isDismissible\"] = this.options.isDismissible ?? (node => node !== this.host)\n    const isClickOutside = e.composedPath().every(predicate)\n\n    if (isClickOutside) {\n      this.options.onDismiss(e)\n    }\n  }\n}\n"],"names":["LightDismissController","constructor","host","options","this","handleEsc","e","isOpen","onDismiss","handleClickOut","predicate","_a","isDismissible","node","composedPath","every","addController","shortcut","ShortcutController","Escape","events","EventController","hostConnected","listen","document"],"mappings":"6GAUaA,EAIXC,YAAoBC,EAAgDC,GAAhDC,KAAIF,KAAJA,EAAgDE,KAAOD,QAAPA,EAU5DC,KAAAC,UAAaC,IACdF,KAAKD,QAAQI,UAIlBH,KAAKD,QAAQK,UAAUF,IAGjBF,KAAAK,eAAkBH,UACxB,IAAKF,KAAKD,QAAQI,SAChB,OAGF,MAAMG,EAAgF,QAA9BC,EAAAP,KAAKD,QAAQS,qBAAiB,IAAAD,EAAAA,EAACE,GAAQA,IAAST,KAAKF,KACtFI,EAAEQ,eAAeC,MAAML,IAG5CN,KAAKD,QAAQK,UAAUF,IA1BzBJ,EAAKc,cAAcZ,MACnBA,KAAKa,SAAW,IAAIC,EAAmBhB,EAAM,CAAEiB,OAAQf,KAAKC,YAC5DD,KAAKgB,OAAS,IAAIC,EAAgBnB,GAGpCoB,gBACElB,KAAKgB,OAAOG,OAAOC,SAAU,QAASpB,KAAKK,gBAAgB"}

package/lib/LightDomController-e0762f0d.js

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

package/lib/LightDomController-e0762f0d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LightDomController-e0762f0d.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    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,KAAIF,KAAJA,EAAoDE,KAAOD,QAAPA,EACtED,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/LocalizeController.js

@@ -1,2 +1,2 @@
-import{resolveTranslation as t,subscribe as s}from"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";const n=()=>{};class o{constructor(s,o={onLangChange:n}){this.host=s,this.options=o,this.handleLangChange=()=>{const s=t(this.lang);this.resolvedTranslation!==s&&(this.resolvedTranslation=s,this.options.onLangChange(),this.host.requestUpdate())},this.host=s,this.options=o,this.host.addController(this),this.resolvedTranslation=t(this.lang)}get lang(){return this.host.lang||document.documentElement.lang}get resolvedLang(){return this.resolvedTranslation.$lang}hostConnected(){this.unsubscribe=s(this.handleLangChange),this.options.onLangChange()}hostDisconnected(){var t;null===(t=this.unsubscribe)||void 0===t||t.call(this)}term(t,...s){const n=this.host.localName,o=this.resolvedTranslation[n][t];return"function"==typeof o?o(...s):o}}export{o as LocalizeController};
+import{resolveTranslation as t,subscribe as n}from"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";const s=()=>{};class o{constructor(n,o={onLangChange:s}){this.host=n,this.options=o,this.handleLangChange=()=>{const n=t(this.lang);this.resolvedTranslation!==n&&(this.resolvedTranslation=n,this.options.onLangChange(),this.host.requestUpdate())},n.addController(this),this.resolvedTranslation=t(this.lang)}get lang(){return this.host.lang||document.documentElement.lang}get resolvedLang(){return this.resolvedTranslation.$lang}hostConnected(){this.unsubscribe=n(this.handleLangChange),this.options.onLangChange()}hostDisconnected(){var t;null===(t=this.unsubscribe)||void 0===t||t.call(this)}term(t,...n){const s=this.host.localName,o=this.resolvedTranslation[s][t];return"function"==typeof o?o(...n):o}}export{o as LocalizeController};
 //# sourceMappingURL=LocalizeController.js.map

package/lib/LocalizeController.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocalizeController.js","sources":["../src/localization/LocalizeController.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { subscribe, resolveTranslation, Translation, WellKnownKeys } from \"./translation.js\"\n\n// helper types...\n\n// used to match any function\ntype Func = (...args: any[]) => any\n\n// if object property is function, use return type, else value type\ntype Result<Type, Key extends keyof Type> = Type[Key] extends Func ? ReturnType<Type[Key]> : Type[Key]\n\n// if object property is function,\ntype FuncParams<Type, K extends keyof Type> = Type[K] extends Func ? Parameters<Type[K]> : never\n\nconst noop = () => {\n  // this function is intentionally left blank\n}\n\nexport class LocalizeController<TComponentName extends Exclude<keyof Translation, WellKnownKeys>>\n  implements ReactiveController\n{\n  private unsubscribe?: ReturnType<typeof subscribe>\n  private resolvedTranslation: Translation\n\n  constructor(private host: ReactiveControllerHost & HTMLElement, private options = { onLangChange: noop }) {\n    this.host = host\n    this.options = options\n    this.host.addController(this)\n    this.resolvedTranslation = resolveTranslation(this.lang)\n  }\n\n  /**\n   * The lang of the document or element, with element taking precedence\n   */\n  get lang() {\n    return this.host.lang || document.documentElement.lang\n  }\n\n  /**\n   * The lang of the translation being applied.\n   * This may not match the document/element lang, in case of fallback translation\n   */\n  get resolvedLang() {\n    return this.resolvedTranslation.$lang\n  }\n\n  hostConnected() {\n    this.unsubscribe = subscribe(this.handleLangChange)\n    this.options.onLangChange()\n  }\n\n  hostDisconnected() {\n    this.unsubscribe?.()\n  }\n\n  term<Key extends keyof Translation[TComponentName]>(\n    key: Key,\n    ...args: FuncParams<Translation[TComponentName], Key>\n  ): Result<Translation[TComponentName], Key> {\n    const componentName = this.host.localName as TComponentName\n    const translation = this.resolvedTranslation[componentName]\n\n    const t = translation[key]\n    return typeof t === \"function\" ? t(...args) : t\n  }\n\n  private handleLangChange = () => {\n    const resolved = resolveTranslation(this.lang)\n\n    if (this.resolvedTranslation !== resolved) {\n      this.resolvedTranslation = resolved\n\n      this.options.onLangChange()\n      this.host.requestUpdate()\n    }\n  }\n}\n"],"names":["noop","LocalizeController","constructor","host","options","onLangChange","this","resolved","resolveTranslation","lang","resolvedTranslation","requestUpdate","addController","document","documentElement","resolvedLang","$lang","hostConnected","unsubscribe","subscribe","handleLangChange","hostDisconnected","term","key","args","componentName","localName","t"],"mappings":"wKAcA,MAAMA,EAAO,aAIAC,EAMXC,YAAoBC,EAAoDC,EAAU,CAAEC,aAAcL,IAA9EM,UAAAH,EAAoDG,aAAAF,EA0ChEE,sBAAmB,KACzB,MAAMC,EAAWC,EAAmBF,KAAKG,MAErCH,KAAKI,sBAAwBH,IAC/BD,KAAKI,oBAAsBH,EAE3BD,KAAKF,QAAQC,eACbC,KAAKH,KAAKQ,kBAhDZL,KAAKH,KAAOA,EACZG,KAAKF,QAAUA,EACfE,KAAKH,KAAKS,cAAcN,MACxBA,KAAKI,oBAAsBF,EAAmBF,KAAKG,MAMjDA,WACF,OAAOH,KAAKH,KAAKM,MAAQI,SAASC,gBAAgBL,KAOhDM,mBACF,OAAOT,KAAKI,oBAAoBM,MAGlCC,gBACEX,KAAKY,YAAcC,EAAUb,KAAKc,kBAClCd,KAAKF,QAAQC,eAGfgB,mCACEf,KAAKY,iCAALZ,MAGFgB,KACEC,KACGC,GAEH,MAAMC,EAAgBnB,KAAKH,KAAKuB,UAG1BC,EAFcrB,KAAKI,oBAAoBe,GAEvBF,GACtB,MAAoB,mBAANI,EAAmBA,KAAKH,GAAQG"}
+{"version":3,"file":"LocalizeController.js","sources":["../src/localization/LocalizeController.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { subscribe, resolveTranslation, Translation, WellKnownKeys } from \"./translation.js\"\n\n// helper types...\n\n// used to match any function\ntype Func = (...args: any[]) => any\n\n// if object property is function, use return type, else value type\ntype Result<Type, Key extends keyof Type> = Type[Key] extends Func ? ReturnType<Type[Key]> : Type[Key]\n\n// if object property is function,\ntype FuncParams<Type, K extends keyof Type> = Type[K] extends Func ? Parameters<Type[K]> : never\n\nconst noop = () => {\n  // this function is intentionally left blank\n}\n\nexport class LocalizeController<TComponentName extends Exclude<keyof Translation, WellKnownKeys>>\n  implements ReactiveController\n{\n  private unsubscribe?: ReturnType<typeof subscribe>\n  private resolvedTranslation: Translation\n\n  constructor(private host: ReactiveControllerHost & HTMLElement, private options = { onLangChange: noop }) {\n    host.addController(this)\n    this.resolvedTranslation = resolveTranslation(this.lang)\n  }\n\n  /**\n   * The lang of the document or element, with element taking precedence\n   */\n  get lang() {\n    return this.host.lang || document.documentElement.lang\n  }\n\n  /**\n   * The lang of the translation being applied.\n   * This may not match the document/element lang, in case of fallback translation\n   */\n  get resolvedLang() {\n    return this.resolvedTranslation.$lang\n  }\n\n  hostConnected() {\n    this.unsubscribe = subscribe(this.handleLangChange)\n    this.options.onLangChange()\n  }\n\n  hostDisconnected() {\n    this.unsubscribe?.()\n  }\n\n  term<Key extends keyof Translation[TComponentName]>(\n    key: Key,\n    ...args: FuncParams<Translation[TComponentName], Key>\n  ): Result<Translation[TComponentName], Key> {\n    const componentName = this.host.localName as TComponentName\n    const translation = this.resolvedTranslation[componentName]\n\n    const t = translation[key]\n    return typeof t === \"function\" ? t(...args) : t\n  }\n\n  private handleLangChange = () => {\n    const resolved = resolveTranslation(this.lang)\n\n    if (this.resolvedTranslation !== resolved) {\n      this.resolvedTranslation = resolved\n\n      this.options.onLangChange()\n      this.host.requestUpdate()\n    }\n  }\n}\n"],"names":["noop","LocalizeController","constructor","host","options","onLangChange","this","handleLangChange","resolved","resolveTranslation","lang","resolvedTranslation","requestUpdate","addController","document","documentElement","resolvedLang","$lang","hostConnected","unsubscribe","subscribe","hostDisconnected","_a","call","term","key","args","componentName","localName","t"],"mappings":"wKAcA,MAAMA,EAAO,aAIAC,EAMXC,YAAoBC,EAAoDC,EAAU,CAAEC,aAAcL,IAA9EM,KAAIH,KAAJA,EAAoDG,KAAOF,QAAPA,EAwChEE,KAAgBC,iBAAG,KACzB,MAAMC,EAAWC,EAAmBH,KAAKI,MAErCJ,KAAKK,sBAAwBH,IAC/BF,KAAKK,oBAAsBH,EAE3BF,KAAKF,QAAQC,eACbC,KAAKH,KAAKS,kBA9CZT,EAAKU,cAAcP,MACnBA,KAAKK,oBAAsBF,EAAmBH,KAAKI,MAMjDA,WACF,OAAOJ,KAAKH,KAAKO,MAAQI,SAASC,gBAAgBL,KAOhDM,mBACF,OAAOV,KAAKK,oBAAoBM,MAGlCC,gBACEZ,KAAKa,YAAcC,EAAUd,KAAKC,kBAClCD,KAAKF,QAAQC,eAGfgB,yBACE,QAAAC,EAAAhB,KAAKa,mBAAL,IAAAG,GAAAA,EAAAC,KAAAjB,MAGFkB,KACEC,KACGC,GAEH,MAAMC,EAAgBrB,KAAKH,KAAKyB,UAG1BC,EAFcvB,KAAKK,oBAAoBgB,GAEvBF,GACtB,MAAoB,mBAANI,EAAmBA,KAAKH,GAAQG"}

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-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};
+import{_ as e,n as i}from"./query-assigned-elements-ef860822.js";import{r as n,s as t,$ as o,w as r}from"./lit-element-e382250e.js";import{e as a}from"./property-03f59dce.js";import"./Icon.js";import"./state-70f38ceb.js";import"./if-defined-4d1db15c.js";import"./unsafe-html-76575c49.js";import"./directive-de55b00a.js";import"./observe-a9c6dfb6.js";import"./cond-ed8742b5.js";import"./Component-fa316972.js";const s=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 t{render(){return o`${this.heading?o`<p id="heading" aria-hidden="true" class="n-heading">${this.heading}</p>`:r}<div role="list" aria-labelledby="${this.heading?"heading":r}"><slot></slot></div>`}};d.styles=s,e([a()],d.prototype,"heading",void 0),d=e([i("nord-nav-group")],d);var l=d;export{l as default};
 //# sourceMappingURL=NavGroup.js.map

package/lib/NavGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavGroup.js","sources":["../src/nav-group/NavGroup.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport \"../icon/Icon.js\"\n\nimport style from \"./NavGroup.css\"\n\n/**\n * Navigation group includes all the actions or items in a single\n * group and is used for grouping items into related categories.\n *\n * @category navigation\n * @status draft\n * @slot - The default slot used for the nav items.\n */\n@customElement(\"nord-nav-group\")\nexport default class NavGroup extends DraftComponentMixin(LitElement) {\n  static styles = style\n\n  /**\n   * Heading and accessible label for the nav group\n   */\n  @property() heading?: string\n\n  render() {\n    return html`\n      ${this.heading ? html`<p id=\"heading\" aria-hidden=\"true\" class=\"n-heading\">${this.heading}</p>` : nothing}\n      <div role=\"list\" aria-labelledby=${this.heading ? \"heading\" : nothing}>\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-group\": NavGroup\n  }\n}\n"],"names":["NavGroup","DraftComponentMixin","LitElement","render","html","this","heading","nothing","style","__decorate","property","customElement"],"mappings":"gjCAgBA,IAAqBA,EAArB,cAAsCC,EAAoBC,IAQxDC,SACE,OAAOC,CAAI,GACPC,KAAKC,QAAUF,CAAI,wDAAwDC,KAAKC,cAAgBC,sCAC/DF,KAAKC,QAAU,UAAYC,2BAV3DP,SAASQ,EAKJC,GAAXC,mCANkBV,KADpBW,EAAc,mBACMX,SAAAA"}
+{"version":3,"file":"NavGroup.js","sources":["../src/nav-group/NavGroup.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport \"../icon/Icon.js\"\n\nimport style from \"./NavGroup.css\"\n\n/**\n * Navigation group includes all the actions or items in a single\n * group and is used for grouping items into related categories.\n *\n * @category navigation\n * @status new\n * @slot - The default slot used for the nav items.\n */\n@customElement(\"nord-nav-group\")\nexport default class NavGroup extends LitElement {\n  static styles = style\n\n  /**\n   * Heading and accessible label for the nav group\n   */\n  @property() heading?: string\n\n  render() {\n    return html`\n      ${this.heading ? html`<p id=\"heading\" aria-hidden=\"true\" class=\"n-heading\">${this.heading}</p>` : nothing}\n      <div role=\"list\" aria-labelledby=${this.heading ? \"heading\" : nothing}>\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-group\": NavGroup\n  }\n}\n"],"names":["NavGroup","LitElement","render","html","this","heading","nothing","styles","style","__decorate","property","prototype","customElement"],"mappings":"mjCAeA,IAAqBA,EAArB,cAAsCC,EAQpCC,SACE,OAAOC,CAAI,GACPC,KAAKC,QAAUF,CAAI,wDAAwDC,KAAKC,cAAgBC,sCAC/DF,KAAKC,QAAU,UAAYC,2BAV3DN,EAAMO,OAAGC,EAKJC,EAAA,CAAXC,KAA2BV,EAAAW,UAAA,eAAA,GANTX,EAAQS,EAAA,CAD5BG,EAAc,mBACMZ,SAAAA"}

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 i}from"./lit-element-74b6bb4b.js";import{e as r}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-b267af23.js";import{S as v}from"./SlotController-683d0e7c.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";import"./EventController-d99ebeef.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{outline:0}.n-nav-item:focus-visible{--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 b=class extends(f(h(i))){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"))}};b.styles=m,e([r({type:Boolean,reflect:!0})],b.prototype,"active",void 0),e([r()],b.prototype,"icon",void 0),e([r()],b.prototype,"href",void 0),e([r()],b.prototype,"badge",void 0),e([r({type:Boolean})],b.prototype,"open",void 0),b=e([n("nord-nav-item")],b);var g=b;export{g as default};
+import{_ as e,n}from"./query-assigned-elements-ef860822.js";import{r as t,$ as o,w as a,s as r}from"./lit-element-e382250e.js";import{e as i}from"./property-03f59dce.js";import{o as s}from"./class-map-9e39244c.js";import{n as c}from"./ref-adf41565.js";import{D as l}from"./DirectionController-8b298382.js";import{S as d}from"./SlotController-ea6eff46.js";import{c as v}from"./cond-ed8742b5.js";import{N as p}from"./events-731d0007.js";import{F as h}from"./FocusableMixin-4c85ced9.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";const f=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{outline:0}.n-nav-item:focus-visible{--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 m=class extends(h(r)){constructor(){super(...arguments),this.subnavSlot=new d(this,"subnav"),this.direction=new l(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" ${c(this.focusableRef)} aria-current="${v(this.active,"page")}" 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"}" ${c(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" ${c(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"))}};m.styles=f,e([i({type:Boolean,reflect:!0})],m.prototype,"active",void 0),e([i()],m.prototype,"icon",void 0),e([i()],m.prototype,"href",void 0),e([i()],m.prototype,"badge",void 0),e([i({type:Boolean})],m.prototype,"open",void 0),m=e([n("nord-nav-item")],m);var g=m;export{g as default};
 //# sourceMappingURL=NavItem.js.map

package/lib/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport style from \"./NavItem.css\"\n\n/**\n * Navigation item populates sidebar navigation with links.\n * Every item should be placed inside a navigation group.\n *\n * @status draft\n * @category navigation\n * @slot - The default slot used for the nav item's text.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n */\n@customElement(\"nord-nav-item\")\nexport default class NavItem extends FocusableMixin(DraftComponentMixin(LitElement)) {\n  static styles = style\n\n  private subnavSlot = new SlotController(this, \"subnav\")\n  private direction = new DirectionController(this)\n\n  /**\n   * Used for indicating the current page. This gives a prominent background to the nav item,\n   * and marks the item as the current page for assistive technology.\n   */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /**\n   * The name of an icon from Nordicons to display for the nav item.\n   */\n  @property() icon?: string\n\n  /**\n   * The url the nav item should link to.\n   * Note: this is not used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property() href?: string\n\n  /**\n   * Allows you to add a notification badge with a number next to the nav item.\n   */\n  @property() badge?: string\n\n  /**\n   * When the nav items contains a subnav, controls whether the section is expanded or not.\n   * Note: this is only used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ type: Boolean }) open = false\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    // in cases where there is nested nav, and one of the items is active\n    // we should auto-open the nav item for developer convenience\n    if (this.querySelector(`nord-nav-item[active]`)) {\n      this.open = true\n    }\n  }\n\n  render() {\n    const innards = html`\n      ${this.icon ? html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>` : nothing}\n      <div class=\"n-content\">\n        <slot></slot>\n      </div>\n    `\n    let element: TemplateResult\n\n    if (this.subnavSlot.hasContent) {\n      element = this.renderToggle(innards)\n    } else if (this.href) {\n      element = this.renderLink(innards)\n    } else {\n      element = this.renderButton(innards)\n    }\n\n    return html`\n      <div role=\"listitem\">\n        ${element}\n        <slot name=${this.subnavSlot.slotName} ?hidden=${!this.open}></slot>\n      </div>\n    `\n  }\n\n  private renderLink(innards: TemplateResult) {\n    return html`\n      <a\n        class=\"n-nav-item\"\n        ${ref(this.focusableRef)}\n        aria-current=${ifDefined(this.active ? \"page\" : undefined)}\n        href=${this.href || \"\"}\n      >\n        ${innards} ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n      </a>\n    `\n  }\n\n  private renderToggle(innards: TemplateResult) {\n    return html`\n      <button\n        class=\"n-nav-item\"\n        @click=${this.toggleOpen}\n        aria-expanded=${this.open ? \"true\" : \"false\"}\n        ${ref(this.focusableRef)}\n      >\n        ${innards}\n\n        <nord-icon\n          size=\"xs\"\n          class=${classMap({ \"n-toggle-icon\": true, \"n-rtl\": this.direction.isRTL })}\n          name=\"arrow-expand-right-small\"\n        ></nord-icon>\n      </button>\n    `\n  }\n\n  private renderButton(innards: TemplateResult) {\n    return html`<button class=\"n-nav-item\" ${ref(this.focusableRef)}>\n      ${innards} ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n    </button>`\n  }\n\n  private toggleOpen() {\n    this.open = !this.open\n    this.dispatchEvent(new NordEvent(\"toggle\"))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-item\": NavItem\n  }\n}\n"],"names":["NavItem","FocusableMixin","DraftComponentMixin","LitElement","constructor","this","SlotController","DirectionController","connectedCallback","super","querySelector","open","render","innards","html","icon","nothing","element","subnavSlot","hasContent","renderToggle","href","renderLink","renderButton","slotName","ref","focusableRef","ifDefined","active","undefined","badge","toggleOpen","classMap","direction","isRTL","dispatchEvent","NordEvent","style","__decorate","property","type","Boolean","reflect","customElement"],"mappings":"2oFAwBA,IAAqBA,EAArB,cAAqCC,EAAeC,EAAoBC,KAAxEC,kCAGUC,gBAAa,IAAIC,EAAeD,KAAM,UACtCA,eAAY,IAAIE,EAAoBF,MAMAA,aAAS,EAsBxBA,WAAO,EAEpCG,oBACEC,MAAMD,oBAIFH,KAAKK,cAAc,2BACrBL,KAAKM,MAAO,GAIhBC,SACE,MAAMC,EAAUC,CAAI,GAChBT,KAAKU,KAAOD,CAAI,uCAAsCT,KAAKU,8BAA+BC,8CAK9F,IAAIC,EAUJ,OAPEA,EADEZ,KAAKa,WAAWC,WACRd,KAAKe,aAAaP,GACnBR,KAAKgB,KACJhB,KAAKiB,WAAWT,GAEhBR,KAAKkB,aAAaV,GAGvBC,CAAI,wBAELG,gBACWZ,KAAKa,WAAWM,uBAAqBnB,KAAKM,sBAKrDW,WAAWT,GACjB,OAAOC,CAAI,yBAGLW,EAAIpB,KAAKqB,+BACIC,EAAUtB,KAAKuB,OAAS,YAASC,aACzCxB,KAAKgB,MAAQ,OAElBR,KAAWR,KAAKyB,MAAQhB,CAAI,6BAA6BT,KAAKyB,eAAiBd,QAK/EI,aAAaP,GACnB,OAAOC,CAAI,sCAGET,KAAK0B,8BACE1B,KAAKM,KAAO,OAAS,YACnCc,EAAIpB,KAAKqB,iBAETb,gCAIQmB,EAAS,CAAE,iBAAiB,EAAM,QAAS3B,KAAK4B,UAAUC,iEAOlEX,aAAaV,GACnB,OAAOC,CAAI,8BAA8BW,EAAIpB,KAAKqB,iBAC9Cb,KAAWR,KAAKyB,MAAQhB,CAAI,6BAA6BT,KAAKyB,eAAiBd,aAI7Ee,aACN1B,KAAKM,MAAQN,KAAKM,KAClBN,KAAK8B,cAAc,IAAIC,EAAU,aA5G5BpC,SAASqC,EAS4BC,GAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,kCAKxBJ,GAAXC,gCAMWD,GAAXC,gCAKWD,GAAXC,iCAM4BD,GAA5BC,EAAS,CAAEC,KAAMC,sCAhCCzC,KADpB2C,EAAc,kBACM3C,SAAAA"}
+{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport style from \"./NavItem.css\"\n\n/**\n * Navigation item populates sidebar navigation with links.\n * Every item should be placed inside a navigation group.\n *\n * @status new\n * @category navigation\n * @slot - The default slot used for the nav item's text.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n */\n@customElement(\"nord-nav-item\")\nexport default class NavItem extends FocusableMixin(LitElement) {\n  static styles = style\n\n  private subnavSlot = new SlotController(this, \"subnav\")\n  private direction = new DirectionController(this)\n\n  /**\n   * Used for indicating the current page. This gives a prominent background to the nav item,\n   * and marks the item as the current page for assistive technology.\n   */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /**\n   * The name of an icon from Nordicons to display for the nav item.\n   */\n  @property() icon?: string\n\n  /**\n   * The url the nav item should link to.\n   * Note: this is not used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property() href?: string\n\n  /**\n   * Allows you to add a notification badge with a number next to the nav item.\n   */\n  @property() badge?: string\n\n  /**\n   * When the nav items contains a subnav, controls whether the section is expanded or not.\n   * Note: this is only used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ type: Boolean }) open = false\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    // in cases where there is nested nav, and one of the items is active\n    // we should auto-open the nav item for developer convenience\n    if (this.querySelector(`nord-nav-item[active]`)) {\n      this.open = true\n    }\n  }\n\n  render() {\n    const innards = html`\n      ${this.icon ? html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>` : nothing}\n      <div class=\"n-content\">\n        <slot></slot>\n      </div>\n    `\n    let element: TemplateResult\n\n    if (this.subnavSlot.hasContent) {\n      element = this.renderToggle(innards)\n    } else if (this.href) {\n      element = this.renderLink(innards)\n    } else {\n      element = this.renderButton(innards)\n    }\n\n    return html`\n      <div role=\"listitem\">\n        ${element}\n        <slot name=${this.subnavSlot.slotName} ?hidden=${!this.open}></slot>\n      </div>\n    `\n  }\n\n  private renderLink(innards: TemplateResult) {\n    return html`\n      <a class=\"n-nav-item\" ${ref(this.focusableRef)} aria-current=${cond(this.active, \"page\")} href=${this.href || \"\"}>\n        ${innards} ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n      </a>\n    `\n  }\n\n  private renderToggle(innards: TemplateResult) {\n    return html`\n      <button\n        class=\"n-nav-item\"\n        @click=${this.toggleOpen}\n        aria-expanded=${this.open ? \"true\" : \"false\"}\n        ${ref(this.focusableRef)}\n      >\n        ${innards}\n\n        <nord-icon\n          size=\"xs\"\n          class=${classMap({ \"n-toggle-icon\": true, \"n-rtl\": this.direction.isRTL })}\n          name=\"arrow-expand-right-small\"\n        ></nord-icon>\n      </button>\n    `\n  }\n\n  private renderButton(innards: TemplateResult) {\n    return html`<button class=\"n-nav-item\" ${ref(this.focusableRef)}>\n      ${innards} ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n    </button>`\n  }\n\n  private toggleOpen() {\n    this.open = !this.open\n    this.dispatchEvent(new NordEvent(\"toggle\"))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-item\": NavItem\n  }\n}\n"],"names":["NavItem","FocusableMixin","LitElement","constructor","this","subnavSlot","SlotController","direction","DirectionController","active","open","connectedCallback","super","querySelector","render","innards","html","icon","nothing","element","hasContent","renderToggle","href","renderLink","renderButton","slotName","ref","focusableRef","cond","badge","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","styles","style","__decorate","property","type","Boolean","reflect","prototype","customElement"],"mappings":"+kFAuBA,IAAqBA,EAArB,cAAqCC,EAAeC,IAApDC,kCAGUC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,UAAY,IAAIC,EAAoBJ,MAMAA,KAAMK,QAAG,EAsBxBL,KAAIM,MAAG,EAEpCC,oBACEC,MAAMD,oBAIFP,KAAKS,cAAc,2BACrBT,KAAKM,MAAO,GAIhBI,SACE,MAAMC,EAAUC,CAAI,GAChBZ,KAAKa,KAAOD,CAAI,uCAAsCZ,KAAKa,8BAA+BC,8CAK9F,IAAIC,EAUJ,OAPEA,EADEf,KAAKC,WAAWe,WACRhB,KAAKiB,aAAaN,GACnBX,KAAKkB,KACJlB,KAAKmB,WAAWR,GAEhBX,KAAKoB,aAAaT,GAGvBC,CAAI,wBAELG,gBACWf,KAAKC,WAAWoB,uBAAqBrB,KAAKM,sBAKrDa,WAAWR,GACjB,OAAOC,CAAI,yBACeU,EAAItB,KAAKuB,+BAA8BC,EAAKxB,KAAKK,OAAQ,kBAAgBL,KAAKkB,MAAQ,OAC1GP,KAAWX,KAAKyB,MAAQb,CAAI,6BAA6BZ,KAAKyB,eAAiBX,QAK/EG,aAAaN,GACnB,OAAOC,CAAI,sCAGEZ,KAAK0B,8BACE1B,KAAKM,KAAO,OAAS,YACnCgB,EAAItB,KAAKuB,iBAETZ,gCAIQgB,EAAS,CAAE,iBAAiB,EAAM,QAAS3B,KAAKG,UAAUyB,iEAOlER,aAAaT,GACnB,OAAOC,CAAI,8BAA8BU,EAAItB,KAAKuB,iBAC9CZ,KAAWX,KAAKyB,MAAQb,CAAI,6BAA6BZ,KAAKyB,eAAiBX,aAI7EY,aACN1B,KAAKM,MAAQN,KAAKM,KAClBN,KAAK6B,cAAc,IAAIC,EAAU,aAvG5BlC,EAAMmC,OAAGC,EAS4BC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAsBzC,EAAA0C,UAAA,cAAA,GAK9CL,EAAA,CAAXC,KAAwBtC,EAAA0C,UAAA,YAAA,GAMbL,EAAA,CAAXC,KAAwBtC,EAAA0C,UAAA,YAAA,GAKbL,EAAA,CAAXC,KAAyBtC,EAAA0C,UAAA,aAAA,GAMGL,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAuBxC,EAAA0C,UAAA,YAAA,GAhCtB1C,EAAOqC,EAAA,CAD3BM,EAAc,kBACM3C,SAAAA"}

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-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};
+import{_ as e,n as o}from"./query-assigned-elements-ef860822.js";import{r,$ as n,s as a}from"./lit-element-e382250e.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/Navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.js","sources":["../src/navigation/Navigation.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\nimport style from \"./Navigation.css\"\n\n/**\n * Navigation is used to display the primary navigation in the sidebar\n * of an application. Navigation includes a list of links that users\n * use to move between sections of the application.\n *\n * @status draft\n * @category navigation\n * @slot - The main section of the sidebar, for holding nav components.\n * @slot header - The top section of the sidebar.\n * @slot footer - The bottom section of the sidebar.\n */\n@customElement(\"nord-navigation\")\nexport default class Navigation extends DraftComponentMixin(LitElement) {\n  static styles = style\n\n  render() {\n    return html`\n      <slot name=\"header\"></slot>\n      <nav>\n        <slot></slot>\n      </nav>\n      <slot name=\"footer\"></slot>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-navigation\": Navigation\n  }\n}\n"],"names":["Navigation","DraftComponentMixin","LitElement","render","html","style","customElement"],"mappings":"0qBAkBA,IAAqBA,EAArB,cAAwCC,EAAoBC,IAG1DC,SACE,OAAOC,CAAI,mFAHNJ,SAASK,EADGL,KADpBM,EAAc,oBACMN,SAAAA"}
+{"version":3,"file":"Navigation.js","sources":["../src/navigation/Navigation.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\nimport style from \"./Navigation.css\"\n\n/**\n * Navigation is used to display the primary navigation in the sidebar\n * of an application. Navigation includes a list of links that users\n * use to move between sections of the application.\n *\n * @status draft\n * @category navigation\n * @slot - The main section of the sidebar, for holding nav components.\n * @slot header - The top section of the sidebar.\n * @slot footer - The bottom section of the sidebar.\n */\n@customElement(\"nord-navigation\")\nexport default class Navigation extends DraftComponentMixin(LitElement) {\n  static styles = style\n\n  render() {\n    return html`\n      <slot name=\"header\"></slot>\n      <nav>\n        <slot></slot>\n      </nav>\n      <slot name=\"footer\"></slot>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-navigation\": Navigation\n  }\n}\n"],"names":["Navigation","DraftComponentMixin","LitElement","render","html","styles","style","__decorate","customElement"],"mappings":"0qBAkBA,IAAqBA,EAArB,cAAwCC,EAAoBC,IAG1DC,SACE,OAAOC,CAAI,mFAHNJ,EAAMK,OAAGC,EADGN,EAAUO,EAAA,CAD9BC,EAAc,oBACMR,SAAAA"}

package/lib/Popout.js

@@ -1,2 +1,2 @@
-import{_ as t,n as o}from"./query-assigned-elements-37b095c4.js";import{r as e,s as i,$ as s}from"./lit-element-74b6bb4b.js";import{e as n}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{c as a,l as p,s as l,o as d,f as h,h as c,a as m}from"./positioning-72899e14.js";import{L as f}from"./LightDismissController-a35d0f66.js";import{N as u}from"./events-731d0007.js";import{s as g}from"./Component-9d373ef3.js";import{D as v}from"./DirectionController-b267af23.js";import"./EventController-d99ebeef.js";import"./ShortcutController-93173ff4.js";import"./tinykeys.module-84e6cc41.js";const b=e`:host{position:fixed;pointer-events:none;z-index:var(--n-index-popout);font-size:var(--n-font-size-m);color:var(--n-color-text)}.n-popout{visibility:hidden;opacity:0;pointer-events:none;transition:transform var(--n-transition-slowly),opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);transform:translateY(-10px) scale(.97);transform-origin:top left;will-change:transform,opacity,visibility;background:var(--n-color-surface);border-radius:var(--n-border-radius-s);box-shadow:var(--n-box-shadow-popout)}.n-popout.top-end,.n-popout.top-start{transform:translateY(10px) scale(.97)}.n-popout.left-start{transform:translateX(10px) scale(.97)}.n-popout.left-end,.n-popout.top-end{transform-origin:bottom right}.n-popout.bottom-end,.n-popout.left-start{transform-origin:top right}.n-popout.left-end{transform:translateX(10px) scale(.97);transform-origin:bottom right}.n-popout.right-end,.n-popout.right-start{transform:translateX(-10px) scale(.97);transform-origin:bottom left}.n-popout.right-start{transform-origin:top left}.n-popout.top-start.is-rtl{transform-origin:top right}.n-popout.top-end.is-rtl{transform-origin:top left}.n-popout.bottom-start.is-rtl{transform-origin:bottom right}.n-popout.bottom-end.is-rtl{transform-origin:bottom left}.n-popout[aria-hidden=false]{transition-property:transform,opacity;visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0) translateX(0) scale(1)}`;let y=class extends i{constructor(){super(...arguments),this.dismiss=new f(this,{isOpen:()=>this.open,onDismiss:t=>this.hide("click"!==t.type),isDismissible:t=>t!==this&&t!==this.targetElement}),this.direction=new v(this),this.open=!1,this.align="start",this.position="block-end",this.id="",this.updatePosition=async()=>{var t;const{x:o,y:e,placement:i,middlewareData:s}=await a(this.targetElement,this,{strategy:"fixed",placement:p(this.position,this.align,this.direction.dir),middleware:[l({padding:8}),d(8),h(),c()]});this.computedPosition=i,this.style.left=`${o}px`,this.style.top=`${e}px`,(null===(t=s.hide)||void 0===t?void 0:t.referenceHidden)&&this.hide()},this.toggleOpen=t=>{t.preventDefault(),this.open?this.hide(!1):this.updatePosition().then((()=>this.show()))}}show(){this.open||(this.open=!0,this.cleanupAutoUpdate=m(this.targetElement,this,this.updatePosition),this.updateComplete.then((()=>{this.dispatchEvent(new u("open"))})))}hide(t=!0){var o;this.open&&(this.open=!1,null===(o=this.cleanupAutoUpdate)||void 0===o||o.call(this),this.dispatchEvent(new u("close")),t&&this.targetElement.focus({preventScroll:!0}))}firstUpdated(){this.updatePosition()}willUpdate(t){t.has("id")&&!this.id&&console.warn("The popout requires an id attribute and value"),this.targetElement.setAttribute("aria-expanded",`${this.open}`)}connectedCallback(){super.connectedCallback(),this.targetElement=this.getToggle(),this.targetElement.addEventListener("click",this.toggleOpen)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),this.targetElement.removeAttribute("aria-expanded"),this.targetElement.removeEventListener("click",this.toggleOpen)}render(){return s`<div class="n-popout ${this.computedPosition} is-${this.direction.dir}" aria-hidden="${this.open?"false":"true"}"><slot></slot></div>`}getToggle(){const t=this.getRootNode().querySelector(`[aria-controls='${this.id}']`);return t instanceof HTMLSlotElement?t.assignedElements()[0]:t}};y.styles=[g,b],t([r()],y.prototype,"open",void 0),t([r()],y.prototype,"computedPosition",void 0),t([n({reflect:!0})],y.prototype,"align",void 0),t([n({reflect:!0})],y.prototype,"position",void 0),t([n({reflect:!0})],y.prototype,"id",void 0),y=t([o("nord-popout")],y);var x=y;export{x as default};
+import{_ as t,n as e}from"./query-assigned-elements-ef860822.js";import{r as o,s as i,$ as s}from"./lit-element-e382250e.js";import{e as n}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{a,c as p,l,o as d,f as h,s as m,h as c}from"./positioning-763efb3a.js";import{L as u}from"./LightDismissController-a2645ae6.js";import{N as f}from"./events-731d0007.js";import{s as v}from"./Component-fa316972.js";import{D as g}from"./DirectionController-8b298382.js";import{o as b}from"./observe-a9c6dfb6.js";import"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";const y=o`:host{position:fixed;pointer-events:none;z-index:var(--n-index-popout);left:var(--x);top:var(--y);font-size:var(--n-font-size-m);color:var(--n-color-text)}.n-popout{visibility:hidden;opacity:0;pointer-events:none;transition:transform var(--n-transition-slowly),opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);transform:translateY(-10px) scale(.97);transform-origin:top left;will-change:transform,opacity,visibility;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-popout);border-radius:var(--n-border-radius-s)}@media (max-width:35.9375em){:host{inline-size:100%;inset:0;inset-block-start:auto}.n-popout{transition:transform var(--n-transition-mobile),opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);transform:translateY(100%);transform-origin:bottom center;border-radius:0}}.n-popout.top-end,.n-popout.top-start{transform:translateY(10px) scale(.97)}.n-popout.left-start{transform:translateX(10px) scale(.97)}.n-popout.left-end,.n-popout.top-end{transform-origin:bottom right}.n-popout.bottom-end,.n-popout.left-start{transform-origin:top right}.n-popout.left-end{transform:translateX(10px) scale(.97);transform-origin:bottom right}.n-popout.right-end,.n-popout.right-start{transform:translateX(-10px) scale(.97);transform-origin:bottom left}.n-popout.right-start{transform-origin:top left}.n-popout.top-start.is-rtl{transform-origin:top right}.n-popout.top-end.is-rtl{transform-origin:top left}.n-popout.bottom-start.is-rtl{transform-origin:bottom right}.n-popout.bottom-end.is-rtl{transform-origin:bottom left}.n-popout[aria-hidden=false]{transition-property:transform,opacity;visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0) translateX(0) scale(1)}`;let w=class extends i{constructor(){super(...arguments),this.breakpoint="35.9375em",this.viewportObserver=new ResizeObserver((t=>{t.forEach((()=>{this.smallViewport=window.matchMedia(`(max-width: ${this.breakpoint})`).matches,this.smallViewport||(this.cleanupAutoUpdate=a(this.targetElement,this,this.updatePosition))}))})),this.dismiss=new u(this,{isOpen:()=>this.open,onDismiss:t=>this.hide("click"!==t.type),isDismissible:t=>t!==this&&t!==this.targetElement}),this.direction=new g(this),this.open=!1,this.smallViewport=!1,this.align="start",this.position="block-end",this.id="",this.updatePosition=async()=>{var t;const{x:e,y:o,placement:i,middlewareData:s}=await p(this.targetElement,this,{strategy:"fixed",placement:l(this.position,this.align,this.direction.dir),middleware:[d(8),h(),m({padding:8}),c()]});this.computedPosition=i,this.style.setProperty("--x",`${e}px`),this.style.setProperty("--y",`${o}px`),(null===(t=s.hide)||void 0===t?void 0:t.referenceHidden)&&this.hide()},this.toggleOpen=t=>{t.preventDefault(),this.open?this.hide(!1):this.smallViewport?this.show():this.updatePosition().then((()=>this.show()))}}show(){this.open||(this.open=!0,this.smallViewport=window.matchMedia(`(max-width: ${this.breakpoint})`).matches,this.viewportObserver.observe(document.documentElement),this.smallViewport||(this.cleanupAutoUpdate=a(this.targetElement,this,this.updatePosition)),this.updateComplete.then((()=>{this.dispatchEvent(new f("open"))})))}hide(t=!0){var e;this.open&&(this.open=!1,null===(e=this.cleanupAutoUpdate)||void 0===e||e.call(this),this.viewportObserver.unobserve(document.documentElement),this.dispatchEvent(new f("close")),t&&this.targetElement.focus({preventScroll:!0}))}firstUpdated(){this.smallViewport||this.updatePosition()}connectedCallback(){super.connectedCallback(),this.targetElement=this.getToggle(),this.targetElement.addEventListener("click",this.toggleOpen)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),this.viewportObserver.unobserve(document.documentElement),this.targetElement.removeAttribute("aria-expanded"),this.targetElement.removeEventListener("click",this.toggleOpen)}render(){return s`<div class="n-popout ${this.computedPosition} is-${this.direction.dir}" aria-hidden="${this.open?"false":"true"}"><slot></slot></div>`}handleIdChange(){this.id||console.warn("NORD: popout requires an id attribute and value")}handleOpenChange(){this.targetElement.setAttribute("aria-expanded",`${this.open}`)}getToggle(){const t=this.getRootNode().querySelector(`[aria-controls='${this.id}']`);return t instanceof HTMLSlotElement?t.assignedElements()[0]:t}};w.styles=[v,y],t([r()],w.prototype,"open",void 0),t([r()],w.prototype,"computedPosition",void 0),t([r()],w.prototype,"smallViewport",void 0),t([n({reflect:!0})],w.prototype,"align",void 0),t([n({reflect:!0})],w.prototype,"position",void 0),t([n({reflect:!0})],w.prototype,"id",void 0),t([b("id")],w.prototype,"handleIdChange",null),t([b("open")],w.prototype,"handleOpenChange",null),w=t([e("nord-popout")],w);var x=w;export{x as default};
 //# sourceMappingURL=Popout.js.map

package/lib/Popout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popout.js","sources":["../src/popout/Popout.ts"],"sourcesContent":["import { LitElement, html, PropertyValues } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { computePosition, shift, offset, flip, hide, autoUpdate, Placement } from \"@floating-ui/dom\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Popout.css\"\nimport { logicalToPhysical } from \"../common/positioning.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\n\n/**\n * Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page.\n *\n * @status new\n * @category overlay\n * @slot - The popout content.\n */\n@customElement(\"nord-popout\")\nexport default class Popout extends LitElement {\n  static styles = [componentStyle, style]\n\n  private targetElement!: HTMLElement\n  private cleanupAutoUpdate?: ReturnType<typeof autoUpdate>\n\n  /**\n   * Handle dismissal of the popout, clicking outside the target button and popout.\n   */\n  private dismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: e => this.hide(e.type !== \"click\"),\n    isDismissible: node => node !== this && node !== this.targetElement,\n  })\n\n  private direction = new DirectionController(this)\n\n  @state() private open = false\n\n  @state() private computedPosition?: Placement\n\n  /**\n   * Set the alignment of the popout in relation to the toggle depending on the position.\n   * `start` will align the left of the popout to the left of the toggle.\n   * `end` will align the right of the popout to the right of the toggle.\n   * A popout with a set position of `inline-start` or `inline-end` will switch\n   * `start` and `end` to the top and bottom of the popout respectively.\n   */\n  @property({ reflect: true }) align: \"start\" | \"end\" = \"start\"\n\n  /**\n   * Set the position of the popout in relation to the toggle.\n   * Options follow logical properties.\n   * `block-start` and `block-end` referring to top and bottom respectively,\n   * `inline-start` and `inline-end` referring to left and right respectively.\n   */\n  @property({ reflect: true }) position: \"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" = \"block-end\"\n\n  /**\n   * The id for the active element to reference via aria-controls.\n   */\n  @property({ reflect: true }) id: string = \"\"\n\n  /**\n   * Show the popout, moving focus to the calendar inside.\n   */\n  show() {\n    if (this.open) {\n      return\n    }\n\n    this.open = true\n    this.cleanupAutoUpdate = autoUpdate(this.targetElement, this, this.updatePosition)\n\n    // we should only focus once the popout is visible after render is complete\n    this.updateComplete.then(() => {\n      /**\n       * Dispatched when the popout is opened.\n       */\n      this.dispatchEvent(new NordEvent(\"open\"))\n    })\n  }\n\n  /**\n   * Hide the popout.\n   * @param {boolean} moveFocusToButton prevent focus returning to the target\n   * button. Default is true.\n   */\n  hide(moveFocusToButton = true) {\n    if (!this.open) {\n      return\n    }\n\n    this.open = false\n    this.cleanupAutoUpdate?.()\n\n    /**\n     * Dispatched when the popout is closed.\n     */\n    this.dispatchEvent(new NordEvent(\"close\"))\n\n    if (moveFocusToButton) {\n      this.targetElement.focus({ preventScroll: true })\n    }\n  }\n\n  /**\n   * Position the popout on load.\n   */\n  firstUpdated() {\n    this.updatePosition()\n  }\n\n  /**\n   * Check if the popout has an id, warn them if not\n   */\n  willUpdate(changedProperties: PropertyValues<this>) {\n    if (changedProperties.has(\"id\") && !this.id) {\n      // eslint-disable-next-line no-console\n      console.warn(\"The popout requires an id attribute and value\")\n    }\n\n    this.targetElement.setAttribute(\"aria-expanded\", `${this.open}`)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.targetElement = this.getToggle()\n    this.targetElement.addEventListener(\"click\", this.toggleOpen)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this.cleanupAutoUpdate?.()\n    this.targetElement.removeAttribute(\"aria-expanded\")\n    this.targetElement.removeEventListener(\"click\", this.toggleOpen)\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"n-popout ${this.computedPosition} is-${this.direction.dir}\"\n        aria-hidden=${this.open ? \"false\" : \"true\"}\n      >\n        <slot></slot>\n      </div>\n    `\n  }\n\n  /**\n   * Get the position of the element toggling the popout\n   * and position the popout underneath it, taking into account the optional placement.\n   */\n  private updatePosition = async () => {\n    const { x, y, placement, middlewareData } = await computePosition(this.targetElement, this, {\n      strategy: \"fixed\",\n      placement: logicalToPhysical(this.position, this.align, this.direction.dir),\n      middleware: [\n        shift({\n          padding: 8,\n        }),\n        offset(8),\n        flip(),\n        hide(),\n      ],\n    })\n\n    this.computedPosition = placement\n\n    // use physical properties here since floating-ui\n    // works exclusively in physical dimensions\n    // we do all the mapping in logicalToPhysical\n    this.style.left = `${x}px`\n    this.style.top = `${y}px`\n\n    if (middlewareData.hide?.referenceHidden) {\n      this.hide()\n    }\n  }\n\n  /**\n   * Toggle the popout open or closed using state.\n   * Updating the position to underneath the target button before the popout is opened.\n   */\n  private toggleOpen = (e: Event) => {\n    e.preventDefault()\n    if (this.open) {\n      this.hide(false)\n    } else {\n      this.updatePosition().then(() => this.show())\n    }\n  }\n\n  private getToggle() {\n    const rootNode = this.getRootNode() as Document | ShadowRoot\n    const toggle = <HTMLElement>rootNode.querySelector(`[aria-controls='${this.id}']`)\n\n    if (toggle instanceof HTMLSlotElement) {\n      return toggle.assignedElements()[0] as HTMLElement\n    }\n\n    return toggle\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-popout\": Popout\n  }\n}\n"],"names":["Popout","LitElement","constructor","this","LightDismissController","isOpen","open","onDismiss","e","hide","type","isDismissible","node","targetElement","DirectionController","async","x","y","placement","middlewareData","computePosition","strategy","logicalToPhysical","position","align","direction","dir","middleware","shift","padding","offset","flip","computedPosition","style","left","top","referenceHidden","preventDefault","updatePosition","then","show","cleanupAutoUpdate","autoUpdate","updateComplete","dispatchEvent","NordEvent","moveFocusToButton","focus","preventScroll","firstUpdated","willUpdate","changedProperties","has","id","console","warn","setAttribute","connectedCallback","super","getToggle","addEventListener","toggleOpen","disconnectedCallback","removeAttribute","removeEventListener","render","html","toggle","getRootNode","querySelector","HTMLSlotElement","assignedElements","componentStyle","__decorate","state","property","reflect","customElement"],"mappings":"8/DAmBA,IAAqBA,EAArB,cAAoCC,EAApCC,kCASUC,aAAU,IAAIC,EAAuBD,KAAM,CACjDE,OAAQ,IAAMF,KAAKG,KACnBC,UAAWC,GAAKL,KAAKM,KAAgB,UAAXD,EAAEE,MAC5BC,cAAeC,GAAQA,IAAST,MAAQS,IAAST,KAAKU,gBAGhDV,eAAY,IAAIW,EAAoBX,MAE3BA,WAAO,EAWKA,WAAyB,QAQzBA,cAAwE,YAKxEA,QAAa,GA8FlCA,oBAAiBY,gBACvB,MAAMC,EAAEA,EAACC,EAAEA,EAACC,UAAEA,EAASC,eAAEA,SAAyBC,EAAgBjB,KAAKU,cAAeV,KAAM,CAC1FkB,SAAU,QACVH,UAAWI,EAAkBnB,KAAKoB,SAAUpB,KAAKqB,MAAOrB,KAAKsB,UAAUC,KACvEC,WAAY,CACVC,EAAM,CACJC,QAAS,IAEXC,EAAO,GACPC,IACAtB,OAIJN,KAAK6B,iBAAmBd,EAKxBf,KAAK8B,MAAMC,KAAO,GAAGlB,MACrBb,KAAK8B,MAAME,IAAM,GAAGlB,iBAEhBE,EAAeV,2BAAM2B,kBACvBjC,KAAKM,QAQDN,gBAAcK,IACpBA,EAAE6B,iBACElC,KAAKG,KACPH,KAAKM,MAAK,GAEVN,KAAKmC,iBAAiBC,MAAK,IAAMpC,KAAKqC,UA7H1CA,OACMrC,KAAKG,OAITH,KAAKG,MAAO,EACZH,KAAKsC,kBAAoBC,EAAWvC,KAAKU,cAAeV,KAAMA,KAAKmC,gBAGnEnC,KAAKwC,eAAeJ,MAAK,KAIvBpC,KAAKyC,cAAc,IAAIC,EAAU,aASrCpC,KAAKqC,GAAoB,SAClB3C,KAAKG,OAIVH,KAAKG,MAAO,YACZH,KAAKsC,uCAALtC,MAKAA,KAAKyC,cAAc,IAAIC,EAAU,UAE7BC,GACF3C,KAAKU,cAAckC,MAAM,CAAEC,eAAe,KAO9CC,eACE9C,KAAKmC,iBAMPY,WAAWC,GACLA,EAAkBC,IAAI,QAAUjD,KAAKkD,IAEvCC,QAAQC,KAAK,iDAGfpD,KAAKU,cAAc2C,aAAa,gBAAiB,GAAGrD,KAAKG,QAG3DmD,oBACEC,MAAMD,oBAENtD,KAAKU,cAAgBV,KAAKwD,YAC1BxD,KAAKU,cAAc+C,iBAAiB,QAASzD,KAAK0D,YAGpDC,6BACEJ,MAAMI,iCAEN3D,KAAKsC,uCAALtC,MACAA,KAAKU,cAAckD,gBAAgB,iBACnC5D,KAAKU,cAAcmD,oBAAoB,QAAS7D,KAAK0D,YAGvDI,SACE,OAAOC,CAAI,wBAEW/D,KAAK6B,uBAAuB7B,KAAKsB,UAAUC,qBAC/CvB,KAAKG,KAAO,QAAU,8BAmDlCqD,YACN,MACMQ,EADWhE,KAAKiE,cACeC,cAAc,mBAAmBlE,KAAKkD,QAE3E,OAAIc,aAAkBG,gBACbH,EAAOI,mBAAmB,GAG5BJ,IAtLFnE,SAAS,CAACwE,EAAgBvC,GAgBxBwC,GAARC,gCAEQD,GAARC,4CAS4BD,GAA5BE,EAAS,CAAEC,SAAS,iCAQQH,GAA5BE,EAAS,CAAEC,SAAS,oCAKQH,GAA5BE,EAAS,CAAEC,SAAS,8BAzCF5E,KADpB6E,EAAc,gBACM7E,SAAAA"}
+{"version":3,"file":"Popout.js","sources":["../src/popout/Popout.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { computePosition, shift, offset, flip, hide, autoUpdate, Placement } from \"@floating-ui/dom\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Popout.css\"\nimport { logicalToPhysical } from \"../common/positioning.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\n/**\n * Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page.\n *\n * @status new\n * @category overlay\n * @slot - The popout content.\n */\n@customElement(\"nord-popout\")\nexport default class Popout extends LitElement {\n  static styles = [componentStyle, style]\n\n  private targetElement!: HTMLElement\n  private cleanupAutoUpdate?: ReturnType<typeof autoUpdate>\n  private breakpoint = \"35.9375em\"\n\n  // Observe the browser window for resize events\n  private viewportObserver = new ResizeObserver(entries => {\n    entries.forEach(() => {\n      // Update the viewport state\n      this.smallViewport = window.matchMedia(`(max-width: ${this.breakpoint})`).matches\n\n      // Ensure autoUpdate is ready when going from small to large viewports\n      if (!this.smallViewport) {\n        this.cleanupAutoUpdate = autoUpdate(this.targetElement, this, this.updatePosition)\n      }\n    })\n  })\n\n  /**\n   * Handle dismissal of the popout, clicking outside the target button and popout.\n   */\n  private dismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: e => this.hide(e.type !== \"click\"),\n    isDismissible: node => node !== this && node !== this.targetElement,\n  })\n\n  private direction = new DirectionController(this)\n\n  @state() private open = false\n\n  @state() private computedPosition?: Placement\n\n  @state() private smallViewport = false\n\n  /**\n   * Set the alignment of the popout in relation to the toggle depending on the position.\n   * `start` will align the left of the popout to the left of the toggle.\n   * `end` will align the right of the popout to the right of the toggle.\n   * A popout with a set position of `inline-start` or `inline-end` will switch\n   * `start` and `end` to the top and bottom of the popout respectively.\n   */\n  @property({ reflect: true }) align: \"start\" | \"end\" = \"start\"\n\n  /**\n   * Set the position of the popout in relation to the toggle.\n   * Options follow logical properties.\n   * `block-start` and `block-end` referring to top and bottom respectively,\n   * `inline-start` and `inline-end` referring to left and right respectively.\n   */\n  @property({ reflect: true }) position: \"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" = \"block-end\"\n\n  /**\n   * The id for the active element to reference via aria-controls.\n   */\n  @property({ reflect: true }) id: string = \"\"\n\n  /**\n   * Show the popout, moving focus to the calendar inside.\n   */\n  show() {\n    if (this.open) {\n      return\n    }\n\n    this.open = true\n\n    // Check the viewport width on show and update the state\n    this.smallViewport = window.matchMedia(`(max-width: ${this.breakpoint})`).matches\n\n    // Observe the document element, ergo the browser width\n    this.viewportObserver.observe(document.documentElement)\n\n    if (!this.smallViewport) {\n      this.cleanupAutoUpdate = autoUpdate(this.targetElement, this, this.updatePosition)\n    }\n\n    // we should only focus once the popout is visible after render is complete\n    this.updateComplete.then(() => {\n      /**\n       * Dispatched when the popout is opened.\n       */\n      this.dispatchEvent(new NordEvent(\"open\"))\n    })\n  }\n\n  /**\n   * Hide the popout.\n   * @param {boolean} moveFocusToButton prevent focus returning to the target\n   * button. Default is true.\n   */\n  hide(moveFocusToButton = true) {\n    if (!this.open) {\n      return\n    }\n\n    this.open = false\n\n    this.cleanupAutoUpdate?.()\n\n    // Stop observing the browser width when the popout is hidden\n    this.viewportObserver.unobserve(document.documentElement)\n\n    /**\n     * Dispatched when the popout is closed.\n     */\n    this.dispatchEvent(new NordEvent(\"close\"))\n\n    if (moveFocusToButton) {\n      this.targetElement.focus({ preventScroll: true })\n    }\n  }\n\n  /**\n   * Position the popout on load.\n   */\n  firstUpdated() {\n    if (!this.smallViewport) {\n      this.updatePosition()\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.targetElement = this.getToggle()\n    this.targetElement.addEventListener(\"click\", this.toggleOpen)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this.cleanupAutoUpdate?.()\n\n    // Ensure we've stopped observing the document element\n    this.viewportObserver.unobserve(document.documentElement)\n\n    this.targetElement.removeAttribute(\"aria-expanded\")\n    this.targetElement.removeEventListener(\"click\", this.toggleOpen)\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"n-popout ${this.computedPosition} is-${this.direction.dir}\"\n        aria-hidden=${this.open ? \"false\" : \"true\"}\n      >\n        <slot></slot>\n      </div>\n    `\n  }\n\n  @observe(\"id\")\n  protected handleIdChange() {\n    if (!this.id) {\n      // eslint-disable-next-line no-console\n      console.warn(\"NORD: popout requires an id attribute and value\")\n    }\n  }\n\n  @observe(\"open\")\n  protected handleOpenChange() {\n    this.targetElement.setAttribute(\"aria-expanded\", `${this.open}`)\n  }\n\n  /**\n   * Get the position of the element toggling the popout\n   * and position the popout underneath it, taking into account the optional placement.\n   */\n  private updatePosition = async () => {\n    const { x, y, placement, middlewareData } = await computePosition(this.targetElement, this, {\n      strategy: \"fixed\",\n      placement: logicalToPhysical(this.position, this.align, this.direction.dir),\n      middleware: [\n        offset(8),\n        flip(),\n        shift({\n          padding: 8,\n        }),\n        hide(),\n      ],\n    })\n\n    this.computedPosition = placement\n\n    // use physical properties here since floating-ui\n    // works exclusively in physical dimensions\n    // we do all the mapping in logicalToPhysical\n    this.style.setProperty(\"--x\", `${x}px`)\n    this.style.setProperty(\"--y\", `${y}px`)\n\n    if (middlewareData.hide?.referenceHidden) {\n      this.hide()\n    }\n  }\n\n  /**\n   * Toggle the popout open or closed using state.\n   * Updating the position to underneath the target button before the popout is opened.\n   */\n  private toggleOpen = (e: Event) => {\n    e.preventDefault()\n    if (this.open) {\n      this.hide(false)\n    } else if (!this.smallViewport) {\n      this.updatePosition().then(() => this.show())\n    } else {\n      this.show()\n    }\n  }\n\n  private getToggle() {\n    const rootNode = this.getRootNode() as Document | ShadowRoot\n    const toggle = <HTMLElement>rootNode.querySelector(`[aria-controls='${this.id}']`)\n\n    if (toggle instanceof HTMLSlotElement) {\n      return toggle.assignedElements()[0] as HTMLElement\n    }\n\n    return toggle\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-popout\": Popout\n  }\n}\n"],"names":["Popout","LitElement","constructor","this","breakpoint","viewportObserver","ResizeObserver","entries","forEach","smallViewport","window","matchMedia","matches","cleanupAutoUpdate","autoUpdate","targetElement","updatePosition","dismiss","LightDismissController","isOpen","open","onDismiss","e","hide","type","isDismissible","node","direction","DirectionController","align","position","id","async","x","y","placement","middlewareData","computePosition","strategy","logicalToPhysical","dir","middleware","offset","flip","shift","padding","computedPosition","style","setProperty","_a","referenceHidden","toggleOpen","preventDefault","show","then","observe","document","documentElement","updateComplete","dispatchEvent","NordEvent","moveFocusToButton","call","unobserve","focus","preventScroll","firstUpdated","connectedCallback","super","getToggle","addEventListener","disconnectedCallback","removeAttribute","removeEventListener","render","html","handleIdChange","console","warn","handleOpenChange","setAttribute","toggle","getRootNode","querySelector","HTMLSlotElement","assignedElements","styles","componentStyle","__decorate","state","prototype","property","reflect","customElement"],"mappings":"01EAoBA,IAAqBA,EAArB,cAAoCC,EAApCC,kCAKUC,KAAUC,WAAG,YAGbD,KAAAE,iBAAmB,IAAIC,gBAAeC,IAC5CA,EAAQC,SAAQ,KAEdL,KAAKM,cAAgBC,OAAOC,WAAW,eAAeR,KAAKC,eAAeQ,QAGrET,KAAKM,gBACRN,KAAKU,kBAAoBC,EAAWX,KAAKY,cAAeZ,KAAMA,KAAKa,uBAQjEb,KAAAc,QAAU,IAAIC,EAAuBf,KAAM,CACjDgB,OAAQ,IAAMhB,KAAKiB,KACnBC,UAAWC,GAAKnB,KAAKoB,KAAgB,UAAXD,EAAEE,MAC5BC,cAAeC,GAAQA,IAASvB,MAAQuB,IAASvB,KAAKY,gBAGhDZ,KAAAwB,UAAY,IAAIC,EAAoBzB,MAE3BA,KAAIiB,MAAG,EAIPjB,KAAaM,eAAG,EASJN,KAAK0B,MAAoB,QAQzB1B,KAAQ2B,SAAgE,YAKxE3B,KAAE4B,GAAW,GAkHlC5B,KAAca,eAAGgB,gBACvB,MAAMC,EAAEA,EAACC,EAAEA,EAACC,UAAEA,EAASC,eAAEA,SAAyBC,EAAgBlC,KAAKY,cAAeZ,KAAM,CAC1FmC,SAAU,QACVH,UAAWI,EAAkBpC,KAAK2B,SAAU3B,KAAK0B,MAAO1B,KAAKwB,UAAUa,KACvEC,WAAY,CACVC,EAAO,GACPC,IACAC,EAAM,CACJC,QAAS,IAEXtB,OAIJpB,KAAK2C,iBAAmBX,EAKxBhC,KAAK4C,MAAMC,YAAY,MAAO,GAAGf,OACjC9B,KAAK4C,MAAMC,YAAY,MAAO,GAAGd,QAEV,UAAnBE,EAAeb,YAAI,IAAA0B,OAAA,EAAAA,EAAEC,kBACvB/C,KAAKoB,QAQDpB,KAAAgD,WAAc7B,IACpBA,EAAE8B,iBACEjD,KAAKiB,KACPjB,KAAKoB,MAAK,GACApB,KAAKM,cAGfN,KAAKkD,OAFLlD,KAAKa,iBAAiBsC,MAAK,IAAMnD,KAAKkD,UAjJ1CA,OACMlD,KAAKiB,OAITjB,KAAKiB,MAAO,EAGZjB,KAAKM,cAAgBC,OAAOC,WAAW,eAAeR,KAAKC,eAAeQ,QAG1ET,KAAKE,iBAAiBkD,QAAQC,SAASC,iBAElCtD,KAAKM,gBACRN,KAAKU,kBAAoBC,EAAWX,KAAKY,cAAeZ,KAAMA,KAAKa,iBAIrEb,KAAKuD,eAAeJ,MAAK,KAIvBnD,KAAKwD,cAAc,IAAIC,EAAU,aASrCrC,KAAKsC,GAAoB,SAClB1D,KAAKiB,OAIVjB,KAAKiB,MAAO,EAEZ,QAAA6B,EAAA9C,KAAKU,yBAAL,IAAAoC,GAAAA,EAAAa,KAAA3D,MAGAA,KAAKE,iBAAiB0D,UAAUP,SAASC,iBAKzCtD,KAAKwD,cAAc,IAAIC,EAAU,UAE7BC,GACF1D,KAAKY,cAAciD,MAAM,CAAEC,eAAe,KAO9CC,eACO/D,KAAKM,eACRN,KAAKa,iBAITmD,oBACEC,MAAMD,oBAENhE,KAAKY,cAAgBZ,KAAKkE,YAC1BlE,KAAKY,cAAcuD,iBAAiB,QAASnE,KAAKgD,YAGpDoB,6BACEH,MAAMG,uBAEN,QAAAtB,EAAA9C,KAAKU,yBAAL,IAAAoC,GAAAA,EAAAa,KAAA3D,MAGAA,KAAKE,iBAAiB0D,UAAUP,SAASC,iBAEzCtD,KAAKY,cAAcyD,gBAAgB,iBACnCrE,KAAKY,cAAc0D,oBAAoB,QAAStE,KAAKgD,YAGvDuB,SACE,OAAOC,CAAI,wBAEWxE,KAAK2C,uBAAuB3C,KAAKwB,UAAUa,qBAC/CrC,KAAKiB,KAAO,QAAU,8BAQhCwD,iBACHzE,KAAK4B,IAER8C,QAAQC,KAAK,mDAKPC,mBACR5E,KAAKY,cAAciE,aAAa,gBAAiB,GAAG7E,KAAKiB,QAiDnDiD,YACN,MACMY,EADW9E,KAAK+E,cACeC,cAAc,mBAAmBhF,KAAK4B,QAE3E,OAAIkD,aAAkBG,gBACbH,EAAOI,mBAAmB,GAG5BJ,IA5NFjF,EAAAsF,OAAS,CAACC,EAAgBxC,GA8BxByC,EAAA,CAARC,KAA4BzF,EAAA0F,UAAA,YAAA,GAEpBF,EAAA,CAARC,KAA4CzF,EAAA0F,UAAA,wBAAA,GAEpCF,EAAA,CAARC,KAAqCzF,EAAA0F,UAAA,qBAAA,GASTF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAAwC5F,EAAA0F,UAAA,aAAA,GAQhCF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAA2F5F,EAAA0F,UAAA,gBAAA,GAKnFF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAAuB5F,EAAA0F,UAAA,UAAA,GAkG5CF,EAAA,CADCjC,EAAQ,OAMRvD,EAAA0F,UAAA,iBAAA,MAGDF,EAAA,CADCjC,EAAQ,SAGRvD,EAAA0F,UAAA,mBAAA,MArKkB1F,EAAMwF,EAAA,CAD1BK,EAAc,gBACM7F,SAAAA"}