@nordhealth/components 1.5.1 → 1.7.0

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"FocusableMixin-175ea4d7.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 → FormAssociatedMixin-d3124755.js}

@@ -1,2 +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
+import{_ as t}from"./query-assigned-elements-ef860822.js";import{$ as e}from"./lit-element-67e6cd99.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-d3124755.js.map

package/lib/{FormAssociatedMixin-9d38814c.js.map → FormAssociatedMixin-d3124755.js.map}

@@ -1 +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"}
+{"version":3,"file":"FormAssociatedMixin-d3124755.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-44e865a4.js → FormField-d3767c2e.js}

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

package/lib/FormField-d3767c2e.js.map

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

package/lib/Header.js

@@ -1,2 +1,2 @@
-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};
+import{_ as e,n as r}from"./query-assigned-elements-ef860822.js";import{r as o,s as n,$ as a}from"./lit-element-67e6cd99.js";import{S as t}from"./SlotController-ea6eff46.js";import{s}from"./Component-a61df53a.js";import"./EventController-d99ebeef.js";const d=o`:host{--n-banner-box-shadow:none;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([r("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 ready\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"}
+{"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 ready\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":"i0BAgBA,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-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.8/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};
+import{_ as e,n as s}from"./query-assigned-elements-ef860822.js";import{r as i,s as o,$ as t}from"./lit-element-67e6cd99.js";import{e as r}from"./property-03f59dce.js";import{t as n}from"./state-70f38ceb.js";import{l as a}from"./if-defined-fe1a64e3.js";import{o as c}from"./unsafe-html-61a04601.js";import{o as l}from"./observe-a9c6dfb6.js";import{c as d}from"./cond-97c45476.js";import{s as h}from"./Component-a61df53a.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.9/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/Input.js

@@ -1,2 +1,2 @@
-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};
+import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{r as s,w as n,$ as i,s as o}from"./lit-element-67e6cd99.js";import{e as r}from"./property-03f59dce.js";import{l as a}from"./if-defined-fe1a64e3.js";import{o as l}from"./class-map-f1b6f1fa.js";import{n as d}from"./ref-57ff8ffc.js";import{o as p}from"./unsafe-html-61a04601.js";import{F as m}from"./FocusableMixin-175ea4d7.js";import{F as c}from"./FormAssociatedMixin-d3124755.js";import{I as h}from"./InputMixin-9334d385.js";import{s as f}from"./Component-a61df53a.js";import{s as u}from"./FormField-d3767c2e.js";import{s as v}from"./TextField-93a3922f.js";import{S as $}from"./SlotController-ea6eff46.js";import{c as b}from"./cond-97c45476.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=end],slot[name=start]{display:flex;align-items:center;position:absolute;margin-inline-start:var(--n-space-m);block-size:100%;pointer-events:none;inset-block-start:0;color:var(--n-color-icon)}slot[name=end]{inset-inline-end:var(--n-space-m)}.has-start .n-input{padding-inline-start:var(--n-space-xl)}.has-end .n-input{padding-inline-end:calc(var(--n-space-xl) + var(--n-space-s))}::slotted(svg),svg{block-size:var(--n-size-icon-s)!important;inline-size:var(--n-size-icon-s)!important}`;let j=class extends(c(h(m(o)))){constructor(){super(...arguments),this.startSlot=new $(this,"start"),this.endSlot=new $(this,"end"),this.type="text"}render(){var e;const t="search"===this.type||this.startSlot.hasContent,s="number"===this.type,o="search"===this.type?p('<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>'):n;return i`${this.renderLabel()}<div class="${l({"n-input-container":!0,"has-start":t,"has-end":this.endSlot.hasContent})}"><slot name="${this.startSlot.slotName}" ?hidden="${!t}">${o}</slot><input ${d(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"><slot name="${this.endSlot.slotName}" ?hidden="${this.endSlot.isEmpty}"></slot></div>${this.renderError()}`}handleKeydown(e){const{form:t}=this;if("Enter"===e.key&&t){const e=function(e){let t=e.querySelector('button[type="submit"]');!t&&e.id&&(t=e.getRootNode().querySelector(`button[form=${e.id}]`));return t}(t);setTimeout((()=>null==e?void 0:e.click()),0)}}};j.styles=[f,u,v,y],e([r()],j.prototype,"type",void 0),j=e([t("nord-input")],j);var g=j;export{g 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\"\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"}
+{"version":3,"file":"Input.js","sources":["../src/input/Input.ts","../../icons/lib/assets/navigation-search.js","../src/common/form.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { classMap } from \"lit/directives/class-map.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\"\nimport { getSubmitButton } from \"../common/form.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 or prefix at the start of the input.\n * @slot end - Optional slot used to place an icon or suffix at the end 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  private endSlot = new SlotController(this, \"end\")\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 startSlotHasContent = 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\n        class=${classMap({\n          \"n-input-container\": true,\n          \"has-start\": startSlotHasContent,\n          \"has-end\": this.endSlot.hasContent,\n        })}\n      >\n        <slot name=${this.startSlot.slotName} ?hidden=${!startSlotHasContent}>${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        <slot name=${this.endSlot.slotName} ?hidden=${this.endSlot.isEmpty}></slot>\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  private handleKeydown(e: KeyboardEvent) {\n    const { form } = this\n\n    if (e.key === \"Enter\" && form) {\n      const button = getSubmitButton(form)\n      setTimeout(() => button?.click(), 0)\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","/**\n * Finds a form's submit button. First looking for a button inside form,\n * and then looking for a button whose form attribute is equal to the ID of the form.\n */\nexport function getSubmitButton(form: HTMLFormElement): HTMLButtonElement | null {\n  // we can get away with just looking for native <button> elements,\n  // rather than our component, since our button component renders one to light dom.\n  let button = form.querySelector<HTMLButtonElement>(`button[type=\"submit\"]`)\n\n  if (!button && form.id) {\n    const root = form.getRootNode() as ShadowRoot | Document\n    button = root.querySelector<HTMLButtonElement>(`button[form=${form.id}]`)\n  }\n\n  return button\n}\n"],"names":["Input","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","startSlot","SlotController","endSlot","type","render","startSlotHasContent","hasContent","isNumber","defaultIcon","unsafeHTML","nothing","html","renderLabel","classMap","slotName","ref","focusableRef","inputId","cond","disabled","required","ifDefined","name","_a","value","placeholder","handleInput","handleChange","handleKeydown","getDescribedBy","getInvalid","isEmpty","renderError","e","form","key","button","querySelector","id","getRootNode","getSubmitButton","setTimeout","click","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","property","prototype","customElement"],"mappings":"y+CAiCA,IAAqBA,EAArB,cAAmCC,EAAoBC,EAAWC,EAAeC,MAAjFC,kCAGUC,KAASC,UAAG,IAAIC,EAAeF,KAAM,SACrCA,KAAOG,QAAG,IAAID,EAAeF,KAAM,OAK/BA,KAAII,KAAwE,OAExFC,eACE,MAAMC,EAAoC,WAAdN,KAAKI,MAAqBJ,KAAKC,UAAUM,WAC/DC,EAAyB,WAAdR,KAAKI,KAChBK,EAA4B,WAAdT,KAAKI,KAAoBM,EC/ClC,iQD+C2DC,EAEtE,OAAOC,CAAI,GACPZ,KAAKa,4BAGGC,EAAS,CACf,qBAAqB,EACrB,YAAaR,EACb,UAAWN,KAAKG,QAAQI,6BAGbP,KAAKC,UAAUc,uBAAqBT,MAAuBG,kBAEpEO,EAAIhB,KAAKiB,qBACNjB,KAAKkB,kCAEHV,EAAW,OAASR,KAAKI,oBACpBe,EAAKX,EAAU,wBACjBW,EAAKX,EAAU,yBACbR,KAAKoB,wBACLpB,KAAKqB,mBACVC,EAAUtB,KAAKuB,kBACH,QAAVC,EAAAxB,KAAKyB,aAAK,IAAAD,EAAAA,EAAI,oBACTF,EAAUtB,KAAK0B,yBACpB1B,KAAK2B,yBACJ3B,KAAK4B,2BACJ5B,KAAK6B,oCACGP,EAAUtB,KAAK8B,oCACnBR,EAAUtB,KAAK+B,iDAGnB/B,KAAKG,QAAQY,sBAAoBf,KAAKG,QAAQ6B,yBAG3DhC,KAAKiC,gBAIHJ,cAAcK,GACpB,MAAMC,KAAEA,GAASnC,KAEjB,GAAc,UAAVkC,EAAEE,KAAmBD,EAAM,CAC7B,MAAME,EEtFN,SAA0BF,GAG9B,IAAIE,EAASF,EAAKG,cAAiC,0BAE9CD,GAAUF,EAAKI,KAElBF,EADaF,EAAKK,cACJF,cAAiC,eAAeH,EAAKI,QAGrE,OAAOF,EF4EYI,CAAgBN,GAC/BO,YAAW,IAAML,aAAA,EAAAA,EAAQM,SAAS,MAzD/BjD,EAAMkD,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBC,GAQrDC,EAAA,CAAXC,KAA6FxD,EAAAyD,UAAA,YAAA,GAT3EzD,EAAKuD,EAAA,CADzBG,EAAc,eACM1D,SAAAA"}

package/lib/InputMixin-9334d385.js

@@ -0,0 +1,2 @@
+import{_ as t}from"./query-assigned-elements-ef860822.js";import{e}from"./property-03f59dce.js";function o(o){class r extends o{constructor(){super(...arguments),this.disabled=!1,this.value=""}get form(){if(this.hasAttribute("form")){return this.getRootNode().querySelector(`form#${this.getAttribute("form")}`)}return this.closest("form")}}return t([e({type:Boolean,reflect:!0})],r.prototype,"disabled",void 0),t([e()],r.prototype,"name",void 0),t([e()],r.prototype,"value",void 0),r}export{o as I};
+//# sourceMappingURL=InputMixin-9334d385.js.map

package/lib/{InputMixin-84ca72ae.js.map → InputMixin-9334d385.js.map}

@@ -1 +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"}
+{"version":3,"file":"InputMixin-9334d385.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      if (this.hasAttribute(\"form\")) {\n        const root = this.getRootNode() as ShadowRoot | Document\n        return root.querySelector(`form#${this.getAttribute(\"form\")}`)\n      }\n\n      return this.closest(\"form\")\n    }\n  }\n\n  return InputElement as unknown as Constructor<InputMixinInterface> & T\n}\n"],"names":["InputMixin","superClass","InputElement","constructor","this","disabled","value","form","hasAttribute","getRootNode","querySelector","getAttribute","closest","__decorate","property","type","Boolean","reflect","prototype"],"mappings":"gGAaM,SAAUA,EAA8CC,GAC5D,MAAMC,UAAqBD,EAA3BE,kCAM8CC,KAAQC,UAAG,EAU3CD,KAAKE,MAAW,GAKdC,WACZ,GAAIH,KAAKI,aAAa,QAAS,CAE7B,OADaJ,KAAKK,cACNC,cAAc,QAAQN,KAAKO,aAAa,WAGtD,OAAOP,KAAKQ,QAAQ,SAIxB,OAzB8CC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAwBf,EAAAgB,UAAA,gBAAA,GAKhDL,EAAA,CAAXC,KAAwBZ,EAAAgB,UAAA,YAAA,GAKbL,EAAA,CAAXC,KAA6BZ,EAAAgB,UAAA,aAAA,GAezBhB"}

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 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"}
+{"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,KAAM,IAAAC,EAAA,OAAkB,UAAlBH,EAAQI,eAAU,IAAAD,OAAA,EAAAA,EAAAE,KAAAL,EAAArB,KAAKF,QAI/DE,KAAKE,iBAAiByB,KAAKP"}

package/lib/Layout.js

@@ -1,2 +1,2 @@
-import{_ as e,n}from"./query-assigned-elements-ef860822.js";import{r as t,s as a,$ as i}from"./lit-element-e382250e.js";import{e as s}from"./property-03f59dce.js";import{t as o}from"./state-70f38ceb.js";import{i as r}from"./query-2d22378e.js";import{o as l}from"./class-map-9e39244c.js";import{D as d}from"./DirectionController-8b298382.js";import{L as h}from"./LightDismissController-a2645ae6.js";import{o as c}from"./observe-a9c6dfb6.js";import{c as v}from"./cond-ed8742b5.js";import{f as p}from"./fsm-50373df9.js";import{c as g}from"./number-c3ab3e95.js";import{s as u}from"./Component-fa316972.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";class m{constructor(e,n,t){this.host=e,this.onChange=t,this.handleChange=()=>{var e;null===(e=this.onChange)||void 0===e||e.call(this),this.host.requestUpdate()},e.addController(this),this.mq="string"==typeof n?matchMedia(n):n}get matches(){return this.mq.matches}hostConnected(){this.mq.addListener(this.handleChange)}hostDisconnected(){this.mq.removeListener(this.handleChange)}}const k=t`:host{--n-nav-transition-duration:0.3s;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;user-select:none;inline-size:var(--n-nav-width);z-index:2;inset-block-start:0;inset-inline-start:0;inset-block-end:0;transform:translateX(var(--n-nav-transform));box-shadow:var(--n-box-shadow-nav)}.n-layout-main{inset-inline-end:0;z-index:1;inline-size:100%}main{padding:var(--n-space-l)}:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(-110%)}.n-rtl:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(110%)}[data-screen=narrow] .n-layout-nav{transition:transform var(--n-nav-transition-duration) ease}[data-screen=wide]:is([data-nav=peek],[data-nav=wait],[data-nav=unpeek],[data-nav=blocked]) .n-layout-nav{transition:transform var(--n-nav-transition-duration) ease;border-start-end-radius:var(--n-border-radius);border-end-end-radius:var(--n-border-radius);min-block-size:0;inset-block-start:calc(var(--n-space-m) * 4);inset-block-end:var(--n-space-l)}[data-screen=wide][data-nav=opened] .n-layout-nav{border-inline-end:1px solid var(--n-color-border);box-shadow:none}[data-screen=wide][data-nav=opened] .n-layout-main{inline-size:calc(100% - var(--n-nav-width))}.n-resize{touch-action:none;position:absolute;min-block-size:100%;inset-block:0;inset-inline-end:-5px;inline-size:12px;background:0 0}[data-nav=opened] .n-resize{cursor:col-resize}.n-resize::after{content:"";position:absolute;z-index:var(--n-index-sticky);inset-block:0;inset-inline-end:5px;inline-size:3px;background:var(--n-color-accent);transition:opacity .2s .15s ease;opacity:0}.n-resize:focus{outline:0}.n-dragging .n-resize::after,.n-resize:focus::after,[data-nav=opened] .n-resize:hover::after{opacity:1}@supports selector(:focus-visible){.n-resize:focus::after{opacity:0}.n-resize:focus-visible::after{opacity:1}}.n-dragging{cursor:col-resize!important;-webkit-user-select:none;user-select:none}`,b=matchMedia("(min-width: 768px)"),f=function(e,n,t=JSON.stringify,a=JSON.parse){return{get value(){const t=localStorage.getItem(e);try{return t?a(t):n}catch(e){return n}},set value(n){localStorage.setItem(e,t(n))}}}("nord-layout.navWidth",250),y=p({opened:{toggle:"closed",close:"closed"},closed:{toggle:"opened",open:"opened",focusin:"peek",pointerenter:"peek"},peek:{toggle:"opened",focusout:"unpeek",pointerleave:"wait",dropdownOpen:"blocked",click:"unpeek",open:"opened"},blocked:{dropdownClose:"peek",open:"opened"},wait:{toggle:"opened",focusin:"peek",pointerenter:"peek",timeout:"unpeek"},unpeek:{toggle:"opened",focusin:"peek",pointerenter:"peek",transitionend:"closed"}});let T=class extends a{constructor(){super(...arguments),this.navWidth=f.value,this.isDragging=!1,this.navState=b.matches?"opened":"closed",this.navOpen="opened"===this.navState,this.lightDismiss=new h(this,{isOpen:()=>"opened"===this.navState&&!this.mq.matches,onDismiss:()=>this.navTransition("close"),isDismissible:e=>e!==this.navEl&&e!==this.navToggleEl}),this.mq=new m(this,b,(()=>this.handleMediaQueryChange())),this.direction=new d(this),this.handleMediaQueryChange=()=>{this.navTransition(this.mq.matches?"open":"close")},this.handleToggleClick=()=>{this.navTransition("toggle")},this.handleNavFocus=()=>{this.navTransition("focusin")},this.handleMainFocus=e=>{e.target!==this.navToggleEl&&this.navTransition("focusout")},this.handleMouseEnter=()=>{this.mq.matches&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")}}disconnectedCallback(){super.disconnectedCallback(),this.cleanup()}render(){const{navWidth:e,navState:n,mq:t,isDragging:a,direction:s}=this,o="opened"===n&&t.matches?e:250;return i`<div class="${l({"n-layout":!0,"n-rtl":s.isRTL,"n-dragging":a})}" style="${`--n-nav-width: ${o}px`}" data-nav="${n}" data-screen="${t.matches?"wide":"narrow"}"><div class="n-layout-nav" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" @pointerdown="${v("opened"===n,this.startDragging)}" @pointermove="${v(a,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}"></div></div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleClick}"><slot name="header"></slot><main><slot></slot></main></div></div>`}getToggleElement(){if(this.cleanup(),!this.navToggle)return;const e=this.getRootNode().querySelector(`#${this.navToggle}`);e&&(this.navToggleEl=e,this.navToggleEl.addEventListener("click",this.handleToggleClick),this.navToggleEl.addEventListener("mouseenter",this.handleMouseEnter),this.navToggleEl.addEventListener("mouseleave",this.handleMouseLeave))}cleanup(){this.navToggleEl&&(this.navToggleEl.removeEventListener("click",this.handleToggleClick),this.navToggleEl.removeEventListener("mouseenter",this.handleMouseEnter),this.navToggleEl.removeEventListener("mouseleave",this.handleMouseLeave),this.navToggleEl=void 0)}handleNavWidthChange(){f.value=this.navWidth}handleNavStateChange(e){switch("wait"===e&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===e&&this.navEl.removeEventListener("transitionend",this.handleTransitionEnd),this.navState){case"closed":this.navOpen=!1;break;case"opened":this.navOpen=!0;break;case"wait":this.peekTimeoutId=setTimeout((()=>this.navTransition("timeout")),300);break;case"unpeek":this.navEl.addEventListener("transitionend",this.handleTransitionEnd,{once:!0})}}handleOpenChange(){this.isDragging||this.setNavWidth(Math.max(this.navWidth,250)),this.navTransition(this.navOpen?"open":"close")}navTransition(e){this.navState=y.transition(this.navState,e)}handleClick(){this.navTransition("click")}handleDropdownOpen(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(e){const{navWidth:n,direction:{isLTR:t}}=this;switch(e.key){case"ArrowLeft":this.setNavWidth(n+(t?-30:30));break;case"ArrowRight":this.setNavWidth(n+(t?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}e.preventDefault()}setNavWidth(e){this.navWidth=g(Math.round(e),220,400)}startDragging(e){if(0===e.button){e.target.setPointerCapture(e.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1}handleDrag(e){const n=this.direction.isRTL?this.clientWidth-e.clientX:e.clientX;this.setNavWidth(n),this.navTransition(n>=100?"open":"close")}};T.styles=[u,k],e([r(".n-layout-nav",!0)],T.prototype,"navEl",void 0),e([o()],T.prototype,"navWidth",void 0),e([o()],T.prototype,"isDragging",void 0),e([o()],T.prototype,"navState",void 0),e([s({reflect:!0,type:Boolean,attribute:"nav-open"})],T.prototype,"navOpen",void 0),e([s({attribute:"nav-toggle"})],T.prototype,"navToggle",void 0),e([c("navToggle")],T.prototype,"getToggleElement",null),e([c("navWidth","updated")],T.prototype,"handleNavWidthChange",null),e([c("navState")],T.prototype,"handleNavStateChange",null),e([c("navOpen","updated")],T.prototype,"handleOpenChange",null),T=e([n("nord-layout")],T);var w=T;export{w as default};
+import{_ as e,n}from"./query-assigned-elements-ef860822.js";import{r as t,s as a,$ as i}from"./lit-element-67e6cd99.js";import{e as s}from"./property-03f59dce.js";import{t as o}from"./state-70f38ceb.js";import{i as r}from"./query-2d22378e.js";import{o as l}from"./class-map-f1b6f1fa.js";import{D as d}from"./DirectionController-8b298382.js";import{L as h}from"./LightDismissController-a2645ae6.js";import{o as c}from"./observe-a9c6dfb6.js";import{c as v}from"./cond-97c45476.js";import{f as p}from"./fsm-50373df9.js";import{c as g}from"./number-c3ab3e95.js";import{s as u}from"./Component-a61df53a.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";class m{constructor(e,n,t){this.host=e,this.onChange=t,this.handleChange=()=>{var e;null===(e=this.onChange)||void 0===e||e.call(this),this.host.requestUpdate()},e.addController(this),this.mq="string"==typeof n?matchMedia(n):n}get matches(){return this.mq.matches}hostConnected(){this.mq.addListener(this.handleChange)}hostDisconnected(){this.mq.removeListener(this.handleChange)}}const k=t`:host{--n-nav-transition-duration:0.3s;background:var(--n-color-background);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;user-select:none;inline-size:var(--n-nav-width);z-index:2;inset-block-start:0;inset-inline-start:0;inset-block-end:0;transform:translateX(var(--n-nav-transform));box-shadow:var(--n-box-shadow-nav);overflow:hidden}.n-layout-main{inset-inline-end:0;z-index:1;inline-size:100%}main{padding:var(--n-space-l)}:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(-110%)}.n-rtl:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(110%)}[data-screen=narrow] .n-layout-nav{transition:transform var(--n-nav-transition-duration) ease}[data-screen=wide]:is([data-nav=peek],[data-nav=wait],[data-nav=unpeek],[data-nav=blocked]) .n-layout-nav{transition:transform var(--n-nav-transition-duration) ease;border-start-end-radius:var(--n-border-radius);border-end-end-radius:var(--n-border-radius);min-block-size:0;inset-block-start:calc(var(--n-space-m) * 4);inset-block-end:var(--n-space-l)}[data-screen=wide][data-nav=opened] .n-layout-nav{border-inline-end:1px solid var(--n-color-border);box-shadow:none}[data-screen=wide][data-nav=opened] .n-layout-main{inline-size:calc(100% - var(--n-nav-width))}.n-resize{touch-action:none;position:absolute;min-block-size:100%;inset-block:0;inset-inline-end:-5px;inline-size:12px;background:0 0}[data-nav=opened] .n-resize{cursor:col-resize}.n-resize::after{content:"";position:absolute;z-index:var(--n-index-sticky);inset-block:0;inset-inline-end:5px;inline-size:3px;background:var(--n-color-accent);transition:opacity .2s .15s ease;opacity:0}.n-resize:focus{outline:0}.n-dragging .n-resize::after,.n-resize:focus::after,[data-nav=opened] .n-resize:hover::after{opacity:1}@supports selector(:focus-visible){.n-resize:focus::after{opacity:0}.n-resize:focus-visible::after{opacity:1}}.n-dragging{cursor:col-resize!important;-webkit-user-select:none;user-select:none}`,f=matchMedia("(min-width: 768px)"),b=function(e,n,t=JSON.stringify,a=JSON.parse){return{get value(){const t=localStorage.getItem(e);try{return t?a(t):n}catch(e){return n}},set value(n){localStorage.setItem(e,t(n))}}}("nord-layout.navWidth",250),y=p({opened:{toggle:"closed",close:"closed"},closed:{toggle:"opened",open:"opened",focusin:"peek",pointerenter:"peek"},peek:{toggle:"opened",focusout:"unpeek",pointerleave:"wait",dropdownOpen:"blocked",click:"unpeek",open:"opened"},blocked:{dropdownClose:"peek",open:"opened"},wait:{toggle:"opened",focusin:"peek",pointerenter:"peek",timeout:"unpeek"},unpeek:{toggle:"opened",focusin:"peek",pointerenter:"peek",transitionend:"closed"}});let T=class extends a{constructor(){super(...arguments),this.navWidth=b.value,this.isDragging=!1,this.navState=f.matches?"opened":"closed",this.navOpen="opened"===this.navState,this.lightDismiss=new h(this,{isOpen:()=>"opened"===this.navState&&!this.mq.matches,onDismiss:()=>this.navTransition("close"),isDismissible:e=>e!==this.navEl&&e!==this.navToggleEl}),this.mq=new m(this,f,(()=>this.handleMediaQueryChange())),this.direction=new d(this),this.handleMediaQueryChange=()=>{this.navTransition(this.mq.matches?"open":"close")},this.handleToggleClick=()=>{this.navTransition("toggle")},this.handleNavFocus=()=>{this.navTransition("focusin")},this.handleMainFocus=e=>{e.target!==this.navToggleEl&&this.navTransition("focusout")},this.handleMouseEnter=()=>{this.mq.matches&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")}}disconnectedCallback(){super.disconnectedCallback(),this.cleanup()}render(){const{navWidth:e,navState:n,mq:t,isDragging:a,direction:s}=this,o="opened"===n&&t.matches?e:250;return i`<div class="${l({"n-layout":!0,"n-rtl":s.isRTL,"n-dragging":a})}" style="${`--n-nav-width: ${o}px`}" data-nav="${n}" data-screen="${t.matches?"wide":"narrow"}"><div class="n-layout-nav" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" @pointerdown="${v("opened"===n,this.startDragging)}" @pointermove="${v(a,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}"></div></div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleClick}"><slot name="header"></slot><main><slot></slot></main></div></div>`}getToggleElement(){if(this.cleanup(),!this.navToggle)return;const e=this.getRootNode().querySelector(`#${this.navToggle}`);e&&(this.navToggleEl=e,this.navToggleEl.addEventListener("click",this.handleToggleClick),this.navToggleEl.addEventListener("mouseenter",this.handleMouseEnter),this.navToggleEl.addEventListener("mouseleave",this.handleMouseLeave))}cleanup(){this.navToggleEl&&(this.navToggleEl.removeEventListener("click",this.handleToggleClick),this.navToggleEl.removeEventListener("mouseenter",this.handleMouseEnter),this.navToggleEl.removeEventListener("mouseleave",this.handleMouseLeave),this.navToggleEl=void 0)}handleNavWidthChange(){b.value=this.navWidth}handleNavStateChange(e){switch("wait"===e&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===e&&this.navEl.removeEventListener("transitionend",this.handleTransitionEnd),this.navState){case"closed":this.navOpen=!1;break;case"opened":this.navOpen=!0;break;case"wait":this.peekTimeoutId=setTimeout((()=>this.navTransition("timeout")),300);break;case"unpeek":this.navEl.addEventListener("transitionend",this.handleTransitionEnd,{once:!0})}}handleOpenChange(){this.isDragging||this.setNavWidth(Math.max(this.navWidth,250)),this.navTransition(this.navOpen?"open":"close")}navTransition(e){this.navState=y.transition(this.navState,e)}handleClick(){this.navTransition("click")}handleDropdownOpen(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(e){const{navWidth:n,direction:{isLTR:t}}=this;switch(e.key){case"ArrowLeft":this.setNavWidth(n+(t?-30:30));break;case"ArrowRight":this.setNavWidth(n+(t?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}e.preventDefault()}setNavWidth(e){this.navWidth=g(Math.round(e),220,400)}startDragging(e){if(0===e.button){e.target.setPointerCapture(e.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1}handleDrag(e){const n=this.direction.isRTL?this.clientWidth-e.clientX:e.clientX;this.setNavWidth(n),this.navTransition(n>=100?"open":"close")}};T.styles=[u,k],e([r(".n-layout-nav",!0)],T.prototype,"navEl",void 0),e([o()],T.prototype,"navWidth",void 0),e([o()],T.prototype,"isDragging",void 0),e([o()],T.prototype,"navState",void 0),e([s({reflect:!0,type:Boolean,attribute:"nav-open"})],T.prototype,"navOpen",void 0),e([s({attribute:"nav-toggle"})],T.prototype,"navToggle",void 0),e([c("navToggle")],T.prototype,"getToggleElement",null),e([c("navWidth","updated")],T.prototype,"handleNavWidthChange",null),e([c("navState")],T.prototype,"handleNavStateChange",null),e([c("navOpen","updated")],T.prototype,"handleOpenChange",null),T=e([n("nord-layout")],T);var w=T;export{w as default};
 //# sourceMappingURL=Layout.js.map

package/lib/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","sources":["../src/common/controllers/MediaQueryController.ts","../src/layout/Layout.ts","../src/common/storage.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\ntype MediaQueryChange = () => void\n\nexport class MediaQueryController implements ReactiveController {\n  private mq: MediaQueryList\n\n  constructor(host: ReactiveControllerHost, mediaQuery: MediaQueryList, onChange?: MediaQueryChange)\n  constructor(host: ReactiveControllerHost, mediaQuery: string, onChange?: MediaQueryChange)\n\n  constructor(\n    private host: ReactiveControllerHost,\n    mediaQuery: string | MediaQueryList,\n    private onChange?: MediaQueryChange\n  ) {\n    host.addController(this)\n    this.mq = typeof mediaQuery === \"string\" ? matchMedia(mediaQuery) : mediaQuery\n  }\n\n  get matches() {\n    return this.mq.matches\n  }\n\n  hostConnected() {\n    this.mq.addListener(this.handleChange)\n  }\n\n  hostDisconnected() {\n    this.mq.removeListener(this.handleChange)\n  }\n\n  handleChange = () => {\n    this.onChange?.()\n    this.host.requestUpdate()\n  }\n}\n","/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { LitElement, html } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { MediaQueryController } from \"../common/controllers/MediaQueryController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { Events, fsm, States } from \"../common/fsm.js\"\nimport { clamp } from \"../common/number.js\"\nimport { storage } from \"../common/storage.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Layout.css\"\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\n\nconst mediaQuery = matchMedia(\"(min-width: 768px)\")\nconst store = storage(\"nord-layout.navWidth\", NAV_DEFAULT_WIDTH)\n\nconst navMachine = fsm({\n  opened: {\n    toggle: \"closed\",\n    close: \"closed\",\n  },\n  closed: {\n    toggle: \"opened\",\n    open: \"opened\",\n    focusin: \"peek\",\n    pointerenter: \"peek\",\n  },\n  peek: {\n    toggle: \"opened\",\n    focusout: \"unpeek\",\n    pointerleave: \"wait\",\n    dropdownOpen: \"blocked\",\n    click: \"unpeek\",\n    open: \"opened\",\n  },\n  blocked: {\n    dropdownClose: \"peek\",\n    open: \"opened\",\n  },\n  wait: {\n    toggle: \"opened\",\n    focusin: \"peek\",\n    pointerenter: \"peek\",\n    timeout: \"unpeek\",\n  },\n  unpeek: {\n    toggle: \"opened\",\n    focusin: \"peek\",\n    pointerenter: \"peek\",\n    transitionend: \"closed\",\n  },\n})\n\ntype NavState = States<typeof navMachine>\ntype NavEvent = Events<typeof navMachine>\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 ready\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 LitElement {\n  static styles = [componentStyle, style]\n\n  private peekTimeoutId?: ReturnType<typeof setTimeout>\n  private navToggleEl?: Element\n\n  @query(\".n-layout-nav\", true) private navEl!: HTMLDivElement\n\n  @state() private navWidth = store.value\n  @state() private isDragging = false\n  @state() private navState: NavState = mediaQuery.matches ? \"opened\" : \"closed\"\n\n  /**\n   * Controls whether the navigation is hidden off-screen or not.\n   * Defaults to `true` for wide viewports, and `false` otherwise.\n   */\n  @property({ reflect: true, type: Boolean, attribute: \"nav-open\" }) navOpen: boolean = this.navState === \"opened\"\n\n  /**\n   * ID reference of element used to toggle the navigation.\n   */\n  @property({ attribute: \"nav-toggle\" }) navToggle?: string\n\n  private lightDismiss = new LightDismissController(this, {\n    isOpen: () => this.navState === \"opened\" && !this.mq.matches,\n    onDismiss: () => this.navTransition(\"close\"),\n    isDismissible: node => node !== this.navEl && node !== this.navToggleEl,\n  })\n\n  private mq = new MediaQueryController(this, mediaQuery, () => this.handleMediaQueryChange())\n  private direction = new DirectionController(this)\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.cleanup()\n  }\n\n  render() {\n    const { navWidth, navState, mq, isDragging, direction } = this\n    const adjustedNavWidth = navState === \"opened\" && mq.matches ? navWidth : NAV_DEFAULT_WIDTH\n\n    return html`\n      <div\n        class=${classMap({\n          \"n-layout\": true,\n          \"n-rtl\": direction.isRTL,\n          \"n-dragging\": isDragging,\n        })}\n        style=${`--n-nav-width: ${adjustedNavWidth}px`}\n        data-nav=${navState}\n        data-screen=${mq.matches ? \"wide\" : \"narrow\"}\n      >\n        <div\n          class=\"n-layout-nav\"\n          @focusin=${this.handleNavFocus}\n          @mouseenter=${this.handleMouseEnter}\n          @mouseleave=${this.handleMouseLeave}\n          @open=${this.handleDropdownOpen}\n          @close=${this.handleDropdownClose}\n        >\n          <slot name=\"nav\"></slot>\n          <div\n            class=\"n-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            @pointerdown=${cond(navState === \"opened\", this.startDragging)}\n            @pointermove=${cond(isDragging, this.handleDrag)}\n            @pointerleave=${this.stopDragging}\n            @pointerup=${this.stopDragging}\n            @keydown=${this.handleKeyboardResize}\n          ></div>\n        </div>\n        <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleClick}>\n          <slot name=\"header\"></slot>\n          <main>\n            <slot></slot>\n          </main>\n        </div>\n      </div>\n    `\n  }\n\n  @observe(\"navToggle\")\n  protected getToggleElement() {\n    // clean up\n    this.cleanup()\n\n    // handle case where id removed\n    if (!this.navToggle) {\n      return\n    }\n\n    const root = this.getRootNode() as Document | ShadowRoot\n    const toggleEl = root.querySelector(`#${this.navToggle}`)\n\n    if (toggleEl) {\n      this.navToggleEl = toggleEl\n      this.navToggleEl.addEventListener(\"click\", this.handleToggleClick)\n      this.navToggleEl.addEventListener(\"mouseenter\", this.handleMouseEnter)\n      this.navToggleEl.addEventListener(\"mouseleave\", this.handleMouseLeave)\n    }\n  }\n\n  private cleanup() {\n    if (this.navToggleEl) {\n      this.navToggleEl.removeEventListener(\"click\", this.handleToggleClick)\n      this.navToggleEl.removeEventListener(\"mouseenter\", this.handleMouseEnter)\n      this.navToggleEl.removeEventListener(\"mouseleave\", this.handleMouseLeave)\n      this.navToggleEl = undefined\n    }\n  }\n\n  @observe(\"navWidth\", \"updated\")\n  protected handleNavWidthChange() {\n    store.value = this.navWidth\n  }\n\n  @observe(\"navState\")\n  protected handleNavStateChange(prev: NavState) {\n    if (prev === \"wait\" && this.peekTimeoutId) {\n      clearTimeout(this.peekTimeoutId)\n    }\n    if (prev === \"unpeek\") {\n      this.navEl.removeEventListener(\"transitionend\", this.handleTransitionEnd)\n    }\n\n    switch (this.navState) {\n      case \"closed\":\n        this.navOpen = false\n        break\n      case \"opened\":\n        this.navOpen = true\n        break\n      case \"wait\":\n        this.peekTimeoutId = setTimeout(() => this.navTransition(\"timeout\"), NAV_PEEK_DELAY)\n        break\n      case \"unpeek\":\n        this.navEl.addEventListener(\"transitionend\", this.handleTransitionEnd, { once: true })\n        break\n      default:\n        break\n    }\n  }\n\n  @observe(\"navOpen\", \"updated\")\n  protected handleOpenChange() {\n    if (!this.isDragging) {\n      // when opening nav, it should restore to default width (or larger).\n      // unless it is being dragged, in which case the drag width wins\n      this.setNavWidth(Math.max(this.navWidth, NAV_DEFAULT_WIDTH))\n    }\n\n    this.navTransition(this.navOpen ? \"open\" : \"close\")\n  }\n\n  /* ---------------------------------------------\n  / NAVIGATION OPEN/CLOSE LOGIC\n  / --------------------------------------------- */\n\n  private navTransition(event: NavEvent) {\n    this.navState = navMachine.transition(this.navState, event)\n  }\n\n  private handleClick() {\n    this.navTransition(\"click\")\n  }\n\n  private handleDropdownOpen(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === \"nord-dropdown\") {\n      this.navTransition(\"dropdownOpen\")\n    }\n  }\n\n  private handleDropdownClose(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === \"nord-dropdown\") {\n      this.navTransition(\"dropdownClose\")\n    }\n  }\n\n  private handleMediaQueryChange = () => {\n    this.navTransition(this.mq.matches ? \"open\" : \"close\")\n  }\n\n  private handleToggleClick = () => {\n    this.navTransition(\"toggle\")\n  }\n\n  private handleNavFocus = () => {\n    this.navTransition(\"focusin\")\n  }\n\n  private handleMainFocus = (e: FocusEvent) => {\n    if (e.target !== this.navToggleEl) {\n      this.navTransition(\"focusout\")\n    }\n  }\n\n  private handleMouseEnter = () => {\n    if (this.mq.matches) {\n      this.navTransition(\"pointerenter\")\n    }\n  }\n\n  private handleMouseLeave = () => {\n    this.navTransition(\"pointerleave\")\n  }\n\n  private handleTransitionEnd = () => {\n    this.navTransition(\"transitionend\")\n  }\n\n  /* ---------------------------------------------\n  / RESIZE LOGIC\n  / --------------------------------------------- */\n\n  private handleKeyboardResize(e: KeyboardEvent) {\n    const {\n      navWidth,\n      direction: { isLTR },\n    } = this\n\n    switch (e.key) {\n      case \"ArrowLeft\":\n        this.setNavWidth(navWidth + (isLTR ? -NAV_RESIZE_STEP : NAV_RESIZE_STEP))\n        break\n      case \"ArrowRight\":\n        this.setNavWidth(navWidth + (isLTR ? NAV_RESIZE_STEP : -NAV_RESIZE_STEP))\n        break\n      case \"Enter\":\n        this.navTransition(\"toggle\")\n        break\n      case \"Home\":\n        this.setNavWidth(NAV_MIN_WIDTH)\n        break\n      case \"End\":\n        this.setNavWidth(NAV_MAX_WIDTH)\n        break\n      default:\n        return\n    }\n\n    e.preventDefault()\n  }\n\n  private setNavWidth(width: number) {\n    this.navWidth = clamp(Math.round(width), NAV_MIN_WIDTH, NAV_MAX_WIDTH)\n  }\n\n  private startDragging(e: PointerEvent) {\n    if (e.button === 0) {\n      const target = e.target as Element\n      target.setPointerCapture(e.pointerId)\n      this.isDragging = true\n    }\n  }\n\n  private stopDragging() {\n    this.isDragging = false\n  }\n\n  private handleDrag(e: PointerEvent) {\n    const width = this.direction.isRTL ? this.clientWidth - e.clientX : e.clientX\n\n    this.setNavWidth(width)\n    this.navTransition(width >= NAV_COLLAPSE_WIDTH ? \"open\" : \"close\")\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-layout\": Layout\n  }\n}\n","/**\n * Thin wrapper around local storage which simplifies (de)serialization and default values.\n * By default, (de)serializes as JSON.\n */\nexport function storage<T>(\n  key: string,\n  defaultValue: T,\n  serialize: (value: T) => string = JSON.stringify,\n  deserialize: (value: string) => T = JSON.parse\n) {\n  return {\n    get value(): T {\n      const value = localStorage.getItem(key)\n\n      try {\n        return value ? deserialize(value) : defaultValue\n      } catch {\n        return defaultValue\n      }\n    },\n\n    set value(value: T) {\n      localStorage.setItem(key, serialize(value))\n    },\n  }\n}\n"],"names":["MediaQueryController","constructor","host","mediaQuery","onChange","this","handleChange","_a","call","requestUpdate","addController","mq","matchMedia","matches","hostConnected","addListener","hostDisconnected","removeListener","store","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","setItem","storage","navMachine","fsm","opened","toggle","close","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","navWidth","isDragging","navState","navOpen","lightDismiss","LightDismissController","isOpen","onDismiss","navTransition","isDismissible","node","navEl","navToggleEl","handleMediaQueryChange","direction","DirectionController","handleToggleClick","handleNavFocus","handleMainFocus","e","target","handleMouseEnter","handleMouseLeave","handleTransitionEnd","disconnectedCallback","super","cleanup","render","adjustedNavWidth","html","classMap","isRTL","handleDropdownOpen","handleDropdownClose","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","handleClick","getToggleElement","navToggle","toggleEl","getRootNode","querySelector","addEventListener","removeEventListener","undefined","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","setTimeout","once","handleOpenChange","setNavWidth","Math","max","event","transition","localName","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"qvBAIaA,EAMXC,YACUC,EACRC,EACQC,GAFAC,KAAIH,KAAJA,EAEAG,KAAQD,SAARA,EAkBVC,KAAYC,aAAG,WACb,QAAAC,EAAAF,KAAKD,gBAAL,IAAAG,GAAAA,EAAAC,KAAAH,MACAA,KAAKH,KAAKO,iBAlBVP,EAAKQ,cAAcL,MACnBA,KAAKM,GAA2B,iBAAfR,EAA0BS,WAAWT,GAAcA,EAGlEU,cACF,OAAOR,KAAKM,GAAGE,QAGjBC,gBACET,KAAKM,GAAGI,YAAYV,KAAKC,cAG3BU,mBACEX,KAAKM,GAAGM,eAAeZ,KAAKC,qlECL1BH,EAAaS,WAAW,sBACxBM,ECpBU,SACdC,EACAC,EACAC,EAAkCC,KAAKC,UACvCC,EAAoCF,KAAKG,OAEzC,MAAO,CACDC,YACF,MAAMA,EAAQC,aAAaC,QAAQT,GAEnC,IACE,OAAOO,EAAQF,EAAYE,GAASN,EACpC,MAAMb,GACN,OAAOa,IAIPM,UAAMA,GACRC,aAAaE,QAAQV,EAAKE,EAAUK,MDE5BI,CAAQ,uBARI,KAUpBC,EAAaC,EAAI,CACrBC,OAAQ,CACNC,OAAQ,SACRC,MAAO,UAETC,OAAQ,CACNF,OAAQ,SACRG,KAAM,SACNC,QAAS,OACTC,aAAc,QAEhBC,KAAM,CACJN,OAAQ,SACRO,SAAU,SACVC,aAAc,OACdC,aAAc,UACdC,MAAO,SACPP,KAAM,UAERQ,QAAS,CACPC,cAAe,OACfT,KAAM,UAERU,KAAM,CACJb,OAAQ,SACRI,QAAS,OACTC,aAAc,OACdS,QAAS,UAEXC,OAAQ,CACNf,OAAQ,SACRI,QAAS,OACTC,aAAc,OACdW,cAAe,YAkBnB,IAAqBC,EAArB,cAAoCC,EAApCnD,kCAQmBI,KAAAgD,SAAWnC,EAAMQ,MACjBrB,KAAUiD,YAAG,EACbjD,KAAAkD,SAAqBpD,EAAWU,QAAU,SAAW,SAMHR,KAAAmD,QAAqC,WAAlBnD,KAAKkD,SAOnFlD,KAAAoD,aAAe,IAAIC,EAAuBrD,KAAM,CACtDsD,OAAQ,IAAwB,WAAlBtD,KAAKkD,WAA0BlD,KAAKM,GAAGE,QACrD+C,UAAW,IAAMvD,KAAKwD,cAAc,SACpCC,cAAeC,GAAQA,IAAS1D,KAAK2D,OAASD,IAAS1D,KAAK4D,cAGtD5D,KAAAM,GAAK,IAAIX,EAAqBK,KAAMF,GAAY,IAAME,KAAK6D,2BAC3D7D,KAAA8D,UAAY,IAAIC,EAAoB/D,MA0JpCA,KAAsB6D,uBAAG,KAC/B7D,KAAKwD,cAAcxD,KAAKM,GAAGE,QAAU,OAAS,UAGxCR,KAAiBgE,kBAAG,KAC1BhE,KAAKwD,cAAc,WAGbxD,KAAciE,eAAG,KACvBjE,KAAKwD,cAAc,YAGbxD,KAAAkE,gBAAmBC,IACrBA,EAAEC,SAAWpE,KAAK4D,aACpB5D,KAAKwD,cAAc,aAIfxD,KAAgBqE,iBAAG,KACrBrE,KAAKM,GAAGE,SACVR,KAAKwD,cAAc,iBAIfxD,KAAgBsE,iBAAG,KACzBtE,KAAKwD,cAAc,iBAGbxD,KAAmBuE,oBAAG,KAC5BvE,KAAKwD,cAAc,kBArLrBgB,uBACEC,MAAMD,uBACNxE,KAAK0E,UAGPC,SACE,MAAM3B,SAAEA,EAAQE,SAAEA,EAAQ5C,GAAEA,EAAE2C,WAAEA,EAAUa,UAAEA,GAAc9D,KACpD4E,EAAgC,WAAb1B,GAAyB5C,EAAGE,QAAUwC,EApGzC,IAsGtB,OAAO6B,CAAI,eAECC,EAAS,CACf,YAAY,EACZ,QAAShB,EAAUiB,MACnB,aAAc9B,eAER,kBAAkB2B,oBACf1B,mBACG5C,EAAGE,QAAU,OAAS,iDAIvBR,KAAKiE,gCACFjE,KAAKqE,kCACLrE,KAAKsE,4BACXtE,KAAKgF,+BACJhF,KAAKiF,8IAQGC,EAAkB,WAAbhC,EAAuBlD,KAAKmF,iCACjCD,EAAKjC,EAAYjD,KAAKoF,+BACrBpF,KAAKqF,6BACRrF,KAAKqF,2BACPrF,KAAKsF,0EAGkBtF,KAAKkE,4BAA0BlE,KAAKuF,iFAWtEC,mBAKR,GAHAxF,KAAK0E,WAGA1E,KAAKyF,UACR,OAGF,MACMC,EADO1F,KAAK2F,cACIC,cAAc,IAAI5F,KAAKyF,aAEzCC,IACF1F,KAAK4D,YAAc8B,EACnB1F,KAAK4D,YAAYiC,iBAAiB,QAAS7F,KAAKgE,mBAChDhE,KAAK4D,YAAYiC,iBAAiB,aAAc7F,KAAKqE,kBACrDrE,KAAK4D,YAAYiC,iBAAiB,aAAc7F,KAAKsE,mBAIjDI,UACF1E,KAAK4D,cACP5D,KAAK4D,YAAYkC,oBAAoB,QAAS9F,KAAKgE,mBACnDhE,KAAK4D,YAAYkC,oBAAoB,aAAc9F,KAAKqE,kBACxDrE,KAAK4D,YAAYkC,oBAAoB,aAAc9F,KAAKsE,kBACxDtE,KAAK4D,iBAAcmC,GAKbC,uBACRnF,EAAMQ,MAAQrB,KAAKgD,SAIXiD,qBAAqBC,GAQ7B,OAPa,SAATA,GAAmBlG,KAAKmG,eAC1BC,aAAapG,KAAKmG,eAEP,WAATD,GACFlG,KAAK2D,MAAMmC,oBAAoB,gBAAiB9F,KAAKuE,qBAG/CvE,KAAKkD,UACX,IAAK,SACHlD,KAAKmD,SAAU,EACf,MACF,IAAK,SACHnD,KAAKmD,SAAU,EACf,MACF,IAAK,OACHnD,KAAKmG,cAAgBE,YAAW,IAAMrG,KAAKwD,cAAc,YA/L1C,KAgMf,MACF,IAAK,SACHxD,KAAK2D,MAAMkC,iBAAiB,gBAAiB7F,KAAKuE,oBAAqB,CAAE+B,MAAM,KAQ3EC,mBACHvG,KAAKiD,YAGRjD,KAAKwG,YAAYC,KAAKC,IAAI1G,KAAKgD,SAnNX,MAsNtBhD,KAAKwD,cAAcxD,KAAKmD,QAAU,OAAS,SAOrCK,cAAcmD,GACpB3G,KAAKkD,SAAWxB,EAAWkF,WAAW5G,KAAKkD,SAAUyD,GAG/CpB,cACNvF,KAAKwD,cAAc,SAGbwB,mBAAmBb,GAGA,kBAFVA,EAAEC,OAENyC,WACT7G,KAAKwD,cAAc,gBAIfyB,oBAAoBd,GAGD,kBAFVA,EAAEC,OAENyC,WACT7G,KAAKwD,cAAc,iBAwCf8B,qBAAqBnB,GAC3B,MAAMnB,SACJA,EACAc,WAAWgD,MAAEA,IACX9G,KAEJ,OAAQmE,EAAErD,KACR,IAAK,YACHd,KAAKwG,YAAYxD,GAAY8D,GA7Rb,GAAA,KA8RhB,MACF,IAAK,aACH9G,KAAKwG,YAAYxD,GAAY8D,EAhSb,IAAA,KAiShB,MACF,IAAK,QACH9G,KAAKwD,cAAc,UACnB,MACF,IAAK,OACHxD,KAAKwG,YAzSS,KA0Sd,MACF,IAAK,MACHxG,KAAKwG,YA3SS,KA4Sd,MACF,QACE,OAGJrC,EAAE4C,iBAGIP,YAAYQ,GAClBhH,KAAKgD,SAAWiE,EAAMR,KAAKS,MAAMF,GAtTf,IACA,KAwTZ7B,cAAchB,GACpB,GAAiB,IAAbA,EAAEgD,OAAc,CACHhD,EAAEC,OACVgD,kBAAkBjD,EAAEkD,WAC3BrH,KAAKiD,YAAa,GAIdoC,eACNrF,KAAKiD,YAAa,EAGZmC,WAAWjB,GACjB,MAAM6C,EAAQhH,KAAK8D,UAAUiB,MAAQ/E,KAAKsH,YAAcnD,EAAEoD,QAAUpD,EAAEoD,QAEtEvH,KAAKwG,YAAYQ,GACjBhH,KAAKwD,cAAcwD,GAvUI,IAuU0B,OAAS,WA5QrDlE,EAAA0E,OAAS,CAACC,EAAgBC,GAKHC,EAAA,CAA7BC,EAAM,iBAAiB,IAAoC9E,EAAA+E,UAAA,aAAA,GAEnDF,EAAA,CAARG,KAAsChF,EAAA+E,UAAA,gBAAA,GAC9BF,EAAA,CAARG,KAAkChF,EAAA+E,UAAA,kBAAA,GAC1BF,EAAA,CAARG,KAA6EhF,EAAA+E,UAAA,gBAAA,GAMXF,EAAA,CAAlEI,EAAS,CAAEC,SAAS,EAAMC,KAAMC,QAASC,UAAW,cAA2DrF,EAAA+E,UAAA,eAAA,GAKzEF,EAAA,CAAtCI,EAAS,CAAEI,UAAW,gBAAkCrF,EAAA+E,UAAA,iBAAA,GA+DzDF,EAAA,CADCS,EAAQ,cAmBRtF,EAAA+E,UAAA,mBAAA,MAYDF,EAAA,CADCS,EAAQ,WAAY,YAGpBtF,EAAA+E,UAAA,uBAAA,MAGDF,EAAA,CADCS,EAAQ,aAyBRtF,EAAA+E,UAAA,uBAAA,MAGDF,EAAA,CADCS,EAAQ,UAAW,YASnBtF,EAAA+E,UAAA,mBAAA,MA1JkB/E,EAAM6E,EAAA,CAD1BU,EAAc,gBACMvF,SAAAA"}
+{"version":3,"file":"Layout.js","sources":["../src/common/controllers/MediaQueryController.ts","../src/layout/Layout.ts","../src/common/storage.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\ntype MediaQueryChange = () => void\n\nexport class MediaQueryController implements ReactiveController {\n  private mq: MediaQueryList\n\n  constructor(host: ReactiveControllerHost, mediaQuery: MediaQueryList, onChange?: MediaQueryChange)\n  constructor(host: ReactiveControllerHost, mediaQuery: string, onChange?: MediaQueryChange)\n\n  constructor(\n    private host: ReactiveControllerHost,\n    mediaQuery: string | MediaQueryList,\n    private onChange?: MediaQueryChange\n  ) {\n    host.addController(this)\n    this.mq = typeof mediaQuery === \"string\" ? matchMedia(mediaQuery) : mediaQuery\n  }\n\n  get matches() {\n    return this.mq.matches\n  }\n\n  hostConnected() {\n    this.mq.addListener(this.handleChange)\n  }\n\n  hostDisconnected() {\n    this.mq.removeListener(this.handleChange)\n  }\n\n  handleChange = () => {\n    this.onChange?.()\n    this.host.requestUpdate()\n  }\n}\n","/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { LitElement, html } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { MediaQueryController } from \"../common/controllers/MediaQueryController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { Events, fsm, States } from \"../common/fsm.js\"\nimport { clamp } from \"../common/number.js\"\nimport { storage } from \"../common/storage.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Layout.css\"\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\n\nconst mediaQuery = matchMedia(\"(min-width: 768px)\")\nconst store = storage(\"nord-layout.navWidth\", NAV_DEFAULT_WIDTH)\n\nconst navMachine = fsm({\n  opened: {\n    toggle: \"closed\",\n    close: \"closed\",\n  },\n  closed: {\n    toggle: \"opened\",\n    open: \"opened\",\n    focusin: \"peek\",\n    pointerenter: \"peek\",\n  },\n  peek: {\n    toggle: \"opened\",\n    focusout: \"unpeek\",\n    pointerleave: \"wait\",\n    dropdownOpen: \"blocked\",\n    click: \"unpeek\",\n    open: \"opened\",\n  },\n  blocked: {\n    dropdownClose: \"peek\",\n    open: \"opened\",\n  },\n  wait: {\n    toggle: \"opened\",\n    focusin: \"peek\",\n    pointerenter: \"peek\",\n    timeout: \"unpeek\",\n  },\n  unpeek: {\n    toggle: \"opened\",\n    focusin: \"peek\",\n    pointerenter: \"peek\",\n    transitionend: \"closed\",\n  },\n})\n\ntype NavState = States<typeof navMachine>\ntype NavEvent = Events<typeof navMachine>\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 ready\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 LitElement {\n  static styles = [componentStyle, style]\n\n  private peekTimeoutId?: ReturnType<typeof setTimeout>\n  private navToggleEl?: Element\n\n  @query(\".n-layout-nav\", true) private navEl!: HTMLDivElement\n\n  @state() private navWidth = store.value\n  @state() private isDragging = false\n  @state() private navState: NavState = mediaQuery.matches ? \"opened\" : \"closed\"\n\n  /**\n   * Controls whether the navigation is hidden off-screen or not.\n   * Defaults to `true` for wide viewports, and `false` otherwise.\n   */\n  @property({ reflect: true, type: Boolean, attribute: \"nav-open\" }) navOpen: boolean = this.navState === \"opened\"\n\n  /**\n   * ID reference of element used to toggle the navigation.\n   */\n  @property({ attribute: \"nav-toggle\" }) navToggle?: string\n\n  private lightDismiss = new LightDismissController(this, {\n    isOpen: () => this.navState === \"opened\" && !this.mq.matches,\n    onDismiss: () => this.navTransition(\"close\"),\n    isDismissible: node => node !== this.navEl && node !== this.navToggleEl,\n  })\n\n  private mq = new MediaQueryController(this, mediaQuery, () => this.handleMediaQueryChange())\n  private direction = new DirectionController(this)\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.cleanup()\n  }\n\n  render() {\n    const { navWidth, navState, mq, isDragging, direction } = this\n    const adjustedNavWidth = navState === \"opened\" && mq.matches ? navWidth : NAV_DEFAULT_WIDTH\n\n    return html`\n      <div\n        class=${classMap({\n          \"n-layout\": true,\n          \"n-rtl\": direction.isRTL,\n          \"n-dragging\": isDragging,\n        })}\n        style=${`--n-nav-width: ${adjustedNavWidth}px`}\n        data-nav=${navState}\n        data-screen=${mq.matches ? \"wide\" : \"narrow\"}\n      >\n        <div\n          class=\"n-layout-nav\"\n          @focusin=${this.handleNavFocus}\n          @mouseenter=${this.handleMouseEnter}\n          @mouseleave=${this.handleMouseLeave}\n          @open=${this.handleDropdownOpen}\n          @close=${this.handleDropdownClose}\n        >\n          <slot name=\"nav\"></slot>\n          <div\n            class=\"n-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            @pointerdown=${cond(navState === \"opened\", this.startDragging)}\n            @pointermove=${cond(isDragging, this.handleDrag)}\n            @pointerleave=${this.stopDragging}\n            @pointerup=${this.stopDragging}\n            @keydown=${this.handleKeyboardResize}\n          ></div>\n        </div>\n        <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleClick}>\n          <slot name=\"header\"></slot>\n          <main>\n            <slot></slot>\n          </main>\n        </div>\n      </div>\n    `\n  }\n\n  @observe(\"navToggle\")\n  protected getToggleElement() {\n    // clean up\n    this.cleanup()\n\n    // handle case where id removed\n    if (!this.navToggle) {\n      return\n    }\n\n    const root = this.getRootNode() as Document | ShadowRoot\n    const toggleEl = root.querySelector(`#${this.navToggle}`)\n\n    if (toggleEl) {\n      this.navToggleEl = toggleEl\n      this.navToggleEl.addEventListener(\"click\", this.handleToggleClick)\n      this.navToggleEl.addEventListener(\"mouseenter\", this.handleMouseEnter)\n      this.navToggleEl.addEventListener(\"mouseleave\", this.handleMouseLeave)\n    }\n  }\n\n  private cleanup() {\n    if (this.navToggleEl) {\n      this.navToggleEl.removeEventListener(\"click\", this.handleToggleClick)\n      this.navToggleEl.removeEventListener(\"mouseenter\", this.handleMouseEnter)\n      this.navToggleEl.removeEventListener(\"mouseleave\", this.handleMouseLeave)\n      this.navToggleEl = undefined\n    }\n  }\n\n  @observe(\"navWidth\", \"updated\")\n  protected handleNavWidthChange() {\n    store.value = this.navWidth\n  }\n\n  @observe(\"navState\")\n  protected handleNavStateChange(prev: NavState) {\n    if (prev === \"wait\" && this.peekTimeoutId) {\n      clearTimeout(this.peekTimeoutId)\n    }\n    if (prev === \"unpeek\") {\n      this.navEl.removeEventListener(\"transitionend\", this.handleTransitionEnd)\n    }\n\n    switch (this.navState) {\n      case \"closed\":\n        this.navOpen = false\n        break\n      case \"opened\":\n        this.navOpen = true\n        break\n      case \"wait\":\n        this.peekTimeoutId = setTimeout(() => this.navTransition(\"timeout\"), NAV_PEEK_DELAY)\n        break\n      case \"unpeek\":\n        this.navEl.addEventListener(\"transitionend\", this.handleTransitionEnd, { once: true })\n        break\n      default:\n        break\n    }\n  }\n\n  @observe(\"navOpen\", \"updated\")\n  protected handleOpenChange() {\n    if (!this.isDragging) {\n      // when opening nav, it should restore to default width (or larger).\n      // unless it is being dragged, in which case the drag width wins\n      this.setNavWidth(Math.max(this.navWidth, NAV_DEFAULT_WIDTH))\n    }\n\n    this.navTransition(this.navOpen ? \"open\" : \"close\")\n  }\n\n  /* ---------------------------------------------\n  / NAVIGATION OPEN/CLOSE LOGIC\n  / --------------------------------------------- */\n\n  private navTransition(event: NavEvent) {\n    this.navState = navMachine.transition(this.navState, event)\n  }\n\n  private handleClick() {\n    this.navTransition(\"click\")\n  }\n\n  private handleDropdownOpen(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === \"nord-dropdown\") {\n      this.navTransition(\"dropdownOpen\")\n    }\n  }\n\n  private handleDropdownClose(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === \"nord-dropdown\") {\n      this.navTransition(\"dropdownClose\")\n    }\n  }\n\n  private handleMediaQueryChange = () => {\n    this.navTransition(this.mq.matches ? \"open\" : \"close\")\n  }\n\n  private handleToggleClick = () => {\n    this.navTransition(\"toggle\")\n  }\n\n  private handleNavFocus = () => {\n    this.navTransition(\"focusin\")\n  }\n\n  private handleMainFocus = (e: FocusEvent) => {\n    if (e.target !== this.navToggleEl) {\n      this.navTransition(\"focusout\")\n    }\n  }\n\n  private handleMouseEnter = () => {\n    if (this.mq.matches) {\n      this.navTransition(\"pointerenter\")\n    }\n  }\n\n  private handleMouseLeave = () => {\n    this.navTransition(\"pointerleave\")\n  }\n\n  private handleTransitionEnd = () => {\n    this.navTransition(\"transitionend\")\n  }\n\n  /* ---------------------------------------------\n  / RESIZE LOGIC\n  / --------------------------------------------- */\n\n  private handleKeyboardResize(e: KeyboardEvent) {\n    const {\n      navWidth,\n      direction: { isLTR },\n    } = this\n\n    switch (e.key) {\n      case \"ArrowLeft\":\n        this.setNavWidth(navWidth + (isLTR ? -NAV_RESIZE_STEP : NAV_RESIZE_STEP))\n        break\n      case \"ArrowRight\":\n        this.setNavWidth(navWidth + (isLTR ? NAV_RESIZE_STEP : -NAV_RESIZE_STEP))\n        break\n      case \"Enter\":\n        this.navTransition(\"toggle\")\n        break\n      case \"Home\":\n        this.setNavWidth(NAV_MIN_WIDTH)\n        break\n      case \"End\":\n        this.setNavWidth(NAV_MAX_WIDTH)\n        break\n      default:\n        return\n    }\n\n    e.preventDefault()\n  }\n\n  private setNavWidth(width: number) {\n    this.navWidth = clamp(Math.round(width), NAV_MIN_WIDTH, NAV_MAX_WIDTH)\n  }\n\n  private startDragging(e: PointerEvent) {\n    if (e.button === 0) {\n      const target = e.target as Element\n      target.setPointerCapture(e.pointerId)\n      this.isDragging = true\n    }\n  }\n\n  private stopDragging() {\n    this.isDragging = false\n  }\n\n  private handleDrag(e: PointerEvent) {\n    const width = this.direction.isRTL ? this.clientWidth - e.clientX : e.clientX\n\n    this.setNavWidth(width)\n    this.navTransition(width >= NAV_COLLAPSE_WIDTH ? \"open\" : \"close\")\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-layout\": Layout\n  }\n}\n","/**\n * Thin wrapper around local storage which simplifies (de)serialization and default values.\n * By default, (de)serializes as JSON.\n */\nexport function storage<T>(\n  key: string,\n  defaultValue: T,\n  serialize: (value: T) => string = JSON.stringify,\n  deserialize: (value: string) => T = JSON.parse\n) {\n  return {\n    get value(): T {\n      const value = localStorage.getItem(key)\n\n      try {\n        return value ? deserialize(value) : defaultValue\n      } catch {\n        return defaultValue\n      }\n    },\n\n    set value(value: T) {\n      localStorage.setItem(key, serialize(value))\n    },\n  }\n}\n"],"names":["MediaQueryController","constructor","host","mediaQuery","onChange","this","handleChange","_a","call","requestUpdate","addController","mq","matchMedia","matches","hostConnected","addListener","hostDisconnected","removeListener","store","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","setItem","storage","navMachine","fsm","opened","toggle","close","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","navWidth","isDragging","navState","navOpen","lightDismiss","LightDismissController","isOpen","onDismiss","navTransition","isDismissible","node","navEl","navToggleEl","handleMediaQueryChange","direction","DirectionController","handleToggleClick","handleNavFocus","handleMainFocus","e","target","handleMouseEnter","handleMouseLeave","handleTransitionEnd","disconnectedCallback","super","cleanup","render","adjustedNavWidth","html","classMap","isRTL","handleDropdownOpen","handleDropdownClose","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","handleClick","getToggleElement","navToggle","toggleEl","getRootNode","querySelector","addEventListener","removeEventListener","undefined","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","setTimeout","once","handleOpenChange","setNavWidth","Math","max","event","transition","localName","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"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"}

package/lib/{LightDomController-e0762f0d.js → LightDomController-6d26dea2.js}

@@ -1,2 +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
+import{x as t,w as o}from"./lit-element-67e6cd99.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-6d26dea2.js.map

package/lib/{LightDomController-e0762f0d.js.map → LightDomController-6d26dea2.js.map}

@@ -1 +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"}
+{"version":3,"file":"LightDomController-6d26dea2.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 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};
+import{resolveTranslation as t,subscribe as n}from"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.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    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"}
+{"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":"mMAcA,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,yBACkB,QAAhBC,EAAAhB,KAAKa,mBAAW,IAAAG,GAAAA,EAAAC,KAAAjB,MAGlBkB,KACEC,KACGC,GAEH,MAAMC,EAAgBrB,KAAKH,KAAKyB,UAG1BC,EAFcvB,KAAKK,oBAAoBgB,GAEvBF,GACtB,MAAoB,mBAANI,EAAmBA,KAAKH,GAAQG"}

package/lib/Modal.js

@@ -0,0 +1,2 @@
+import{_ as t,n as o}from"./query-assigned-elements-ef860822.js";import{r as e,$ as s,s as i}from"./lit-element-67e6cd99.js";import{e as n}from"./property-03f59dce.js";import{i as r}from"./query-2d22378e.js";import"./Icon.js";import{E as a}from"./EventController-d99ebeef.js";import{L as l}from"./LightDismissController-a2645ae6.js";import{S as d}from"./SlotController-ea6eff46.js";import{o as c}from"./observe-a9c6dfb6.js";import{N as h}from"./events-731d0007.js";import{D as p}from"./DraftComponentMixin-9e4b7b34.js";import{s as m}from"./Component-a61df53a.js";import{LocalizeController as u}from"./LocalizeController.js";import"./state-70f38ceb.js";import"./if-defined-fe1a64e3.js";import"./unsafe-html-61a04601.js";import"./directive-de55b00a.js";import"./cond-97c45476.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";class v{constructor(t,o=(()=>t)){this.boundary=o,this.lastScrollY=0,this.handleFocusOut=t=>{this.lastFocused=t.target,t.relatedTarget===this.boundary()&&this.recaptureFocus()},this.handleFocusIn=t=>{!t.composedPath().includes(this.boundary())&&this.recaptureFocus()},this.restoreScroll=()=>{window.scrollTo(window.scrollX,this.lastScrollY)},t.addController(this)}hostDisconnected(){this.release()}trap(){this.lastScrollY=window.scrollY,this.boundary().addEventListener("focusout",this.handleFocusOut),window.addEventListener("scroll",this.restoreScroll),window.addEventListener("focusin",this.handleFocusIn)}release(){this.lastScrollY=0,this.lastFocused=void 0,this.boundary().removeEventListener("focusout",this.handleFocusOut),window.removeEventListener("scroll",this.restoreScroll),window.removeEventListener("focusin",this.handleFocusIn)}recaptureFocus(){var t;null===(t=this.lastFocused)||void 0===t||t.focus({preventScroll:!0})}}function f({style:t},o,e){const s=t[o];return t[o]=e,()=>{t[o]=s}}class b{constructor(t,o=document.body){this.scroller=o,this.resets=new Set,t.addController(this)}hostDisconnected(){this.restore()}get width(){const t=document.documentElement.clientWidth;return Math.abs(window.innerWidth-t)}hide(){this.restore();const{width:t}=this,o=getComputedStyle(this.scroller),e=parseInt(o.paddingRight,10)||0;this.resets.add(f(this.scroller,"overflow","hidden")),this.resets.add(f(this.scroller,"paddingRight",`${t+e}px`))}restore(){this.resets.forEach((t=>t())),this.resets.clear()}}const y=e`:host{--n-modal-padding-inline:var(--n-space-m);--n-modal-padding-block:var(--n-space-m);--n-modal-focus-ring:0 0 0 2px var(--n-color-accent);color:var(--n-color-text);position:fixed;inset:0;visibility:hidden;transition:visibility var(--n-transition-slowly)}:host([open]){transition-property:none;visibility:visible}.n-modal-backdrop{position:fixed;inset:0;background:var(--n-color-overlay);transition:opacity var(--n-transition-slowly);padding:var(--n-space-l);padding-block-start:clamp(var(--n-space-l),min(10vh,10vw) - 1em,calc(var(--n-space-xxl) + var(--n-space-s)));overflow-y:auto}:host(:not([open])) .n-modal-backdrop{opacity:0}.n-modal{position:relative;z-index:var(--n-index-overlay);display:flex;flex-direction:column;inline-size:100%;max-inline-size:var(--n-modal-max-width,620px);margin:auto;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-modal);border-radius:var(--n-border-radius);transition:opacity var(--n-transition-slowly),transform var(--n-transition-slowly)}.n-rounded-top{border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}:host(:not([open])) .n-modal{transform:translateY(-10px) scale(.97);opacity:0}.n-modal:focus{outline:0}.n-modal-body{flex:1}.n-body-padded{display:block;padding:var(--n-space-l) var(--n-modal-padding-inline) var(--n-space-xl)}.n-modal-header{display:flex;gap:var(--n-space-m);align-items:start;background:var(--n-color-nav-surface);border-block-end:1px solid var(--n-color-border)}.n-modal-footer{border-block-start:1px solid var(--n-color-border)}.n-padded{padding:var(--n-modal-padding-block) var(--n-modal-padding-inline)}.n-close{border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);background-color:transparent;border-radius:var(--n-border-radius);inset-block-start:var(--n-space-s);inset-inline-end:var(--n-space-s);color:var(--n-color-text);cursor:pointer;transition:color var(--n-transition-quickly);position:relative}.n-close::after{content:"";position:absolute;display:block;inset:calc(var(--n-space-s) * -1);border-radius:var(--n-border-radius)}.n-close:not(:hover){color:var(--n-color-icon)}.n-close:active{transform:translateY(1px)}.n-close:focus{outline:0;box-shadow:var(--n-modal-focus-ring)}@supports selector(:focus-visible){.n-close:focus{border-color:transparent}.n-close:focus-visible{box-shadow:var(--n-modal-focus-ring)}}:host([scrollable]) .n-modal{max-block-size:100%}:host([scrollable]) .n-modal-body{overflow-y:auto}@media (min-width:489px){:host{--n-modal-padding-inline:var(--n-space-l)}:host([size="s"]){--n-modal-padding-inline:var(--n-space-m);--n-modal-max-width:440px}:host([size="l"]){--n-modal-padding-inline:var(--n-space-l);--n-modal-max-width:1320px}}slot[name]{display:flex}slot[name=header]{flex:1}slot[name=header]::slotted(*){margin:0!important;padding:0!important;font-size:var(--n-font-size-l)!important;font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading)!important}slot[name=footer]{gap:calc(var(--n-space-s)/ 2);flex-direction:column}@media (min-width:489px){slot[name=footer]{gap:var(--n-space-s);flex-direction:row;justify-content:flex-end;align-items:center}}slot[name=feature]{overflow:hidden}slot[name=feature]::slotted(*){inline-size:100%;block-size:auto}`;let g=class extends(p(i)){constructor(){super(...arguments),this.headerSlot=new d(this,"header"),this.featureSlot=new d(this,"feature"),this.footerSlot=new d(this,"footer"),this.scrollBar=new b(this),this.focusTrap=new v(this,(()=>this.modal)),this.localize=new u(this),this.events=new a(this),this.lightDismiss=new l(this,{isOpen:()=>this.open,isDismissible:t=>t!==this.modal,onDismiss:()=>this.handleDismiss()}),this.open=!1,this.size="m",this.returnValue="",this.scrollable=!1,this.enableScroll=t=>{this.open||t.target!==this.backdrop||this.scrollBar.restore()},this.trackLastButton=t=>{const o=t.target;"button"===o.localName&&(this.lastButton=o)},this.polyfillSubmitter=t=>{t.submitter=this.lastButton},this.handleSubmit=t=>{this.lastButton=void 0;const o=t.target,e=t.submitter,s="dialog"===o.method,i="dialog"===o.getAttribute("method");i&&!s&&t.preventDefault(),(i||s)&&this.close(null==e?void 0:e.value)}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog"),this.setAttribute("aria-modal","true"),window.SubmitEvent||(this.events.listen(this,"click",this.trackLastButton,!0),this.events.listen(this,"submit",this.polyfillSubmitter,!0))}showModal(){this.open=!0}close(t){this.open=!1,null!=t&&(this.returnValue=t),this.dispatchEvent(new h("close"))}focus(t){this.modal.focus({preventScroll:!0,...t})}render(){return s`<div class="n-modal-backdrop" @transitionend="${this.enableScroll}"><div class="n-modal" tabindex="0" @submit="${this.handleSubmit}"><div class="n-modal-header n-rounded-top" ?hidden="${this.headerSlot.isEmpty}"><slot class="n-padded" name="${this.headerSlot.slotName}"></slot><button class="n-close" @click="${this.handleDismiss}"><nord-icon name="interface-close-small" size="s" label="${this.localize.term("closeLabel")}"></nord-icon></button></div><div class="n-modal-body"><slot name="${this.featureSlot.slotName}" class="${this.headerSlot.isEmpty?"n-rounded-top":""}" ?hidden="${this.featureSlot.isEmpty}"></slot><slot class="n-body-padded"></slot></div><div class="n-modal-footer n-padded" ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></div></div></div>`}handleOpenUpdated(){var t;if(this.open){this.scrollBar.hide(),this.trigger=document.activeElement;(this.querySelector("[autofocus]")||this).focus(),this.focusTrap.trap()}else this.backdrop.scrollTop=0,this.focusTrap.release(),null===(t=this.trigger)||void 0===t||t.focus(),this.trigger=void 0}handleDismiss(){this.dispatchEvent(new h("cancel",{cancelable:!0}))&&this.close()}};g.styles=[m,y],t([r(".n-modal",!0)],g.prototype,"modal",void 0),t([r(".n-modal-backdrop",!0)],g.prototype,"backdrop",void 0),t([n({type:Boolean,reflect:!0})],g.prototype,"open",void 0),t([n({reflect:!0})],g.prototype,"size",void 0),t([n({attribute:!1})],g.prototype,"returnValue",void 0),t([n({type:Boolean,reflect:!0})],g.prototype,"scrollable",void 0),t([c("open","updated")],g.prototype,"handleOpenUpdated",null),g=t([o("nord-modal")],g);var w=g;export{w as default};
+//# sourceMappingURL=Modal.js.map

package/lib/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":["../src/common/controllers/FocusTrapController.ts","../src/common/controllers/ScrollbarController.ts","../src/modal/Modal.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\nexport class FocusTrapController implements ReactiveController {\n  private lastScrollY = 0\n  private lastFocused?: HTMLElement\n\n  constructor(host: ReactiveControllerHost & HTMLElement, private boundary: () => HTMLElement = () => host) {\n    host.addController(this)\n  }\n\n  hostDisconnected() {\n    this.release()\n  }\n\n  trap() {\n    this.lastScrollY = window.scrollY\n    this.boundary().addEventListener(\"focusout\", this.handleFocusOut)\n    window.addEventListener(\"scroll\", this.restoreScroll)\n    window.addEventListener(\"focusin\", this.handleFocusIn)\n  }\n\n  release() {\n    this.lastScrollY = 0\n    this.lastFocused = undefined\n\n    this.boundary().removeEventListener(\"focusout\", this.handleFocusOut)\n    window.removeEventListener(\"scroll\", this.restoreScroll)\n    window.removeEventListener(\"focusin\", this.handleFocusIn)\n  }\n\n  private handleFocusOut = (e: FocusEvent) => {\n    this.lastFocused = e.target as HTMLElement\n\n    if (e.relatedTarget === this.boundary()) {\n      this.recaptureFocus()\n    }\n  }\n\n  private handleFocusIn = (e: FocusEvent) => {\n    const isOutside = !e.composedPath().includes(this.boundary())\n\n    if (isOutside) {\n      this.recaptureFocus()\n    }\n  }\n\n  private recaptureFocus() {\n    this.lastFocused?.focus({ preventScroll: true })\n  }\n\n  private restoreScroll = () => {\n    window.scrollTo(window.scrollX, this.lastScrollY)\n  }\n}\n","import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\nfunction setStyle<P extends keyof CSSStyleDeclaration, V extends CSSStyleDeclaration[P]>(\n  { style }: HTMLElement,\n  property: P,\n  value: V\n) {\n  const previous = style[property]\n  style[property] = value\n\n  return () => {\n    style[property] = previous\n  }\n}\n\nexport class ScrollbarController implements ReactiveController {\n  private resets = new Set<() => void>()\n\n  constructor(host: ReactiveControllerHost)\n  constructor(host: ReactiveControllerHost, scroller: HTMLElement)\n  constructor(host: ReactiveControllerHost, private scroller = document.body) {\n    host.addController(this)\n  }\n\n  hostDisconnected() {\n    this.restore()\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  get width() {\n    const documentWidth = document.documentElement.clientWidth\n    return Math.abs(window.innerWidth - documentWidth)\n  }\n\n  hide() {\n    // in case hide() is called twice in succession\n    this.restore()\n\n    const { width } = this\n    const computedStyle = getComputedStyle(this.scroller)\n    const paddingRight = parseInt(computedStyle.paddingRight, 10) || 0\n\n    this.resets.add(setStyle(this.scroller, \"overflow\", \"hidden\"))\n    this.resets.add(setStyle(this.scroller, \"paddingRight\", `${width + paddingRight}px`))\n  }\n\n  restore() {\n    this.resets.forEach(reset => reset())\n    this.resets.clear()\n  }\n}\n","import { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\n\nimport \"../icon/Icon.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { FocusTrapController } from \"../common/controllers/FocusTrapController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { ScrollbarController } from \"../common/controllers/ScrollbarController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport style from \"./Modal.css\"\n\nconst isButton = (element: Element): element is HTMLButtonElement => element.localName === \"button\"\n\n/**\n * Modal component is used to display content that temporarily blocks interactions\n * with the main view of an application. Modal should be used sparingly and\n * only when necessary.\n *\n * @status draft\n * @category overlay\n * @slot - Default slot\n * @slot header - Slot which holds the header of the modal, positioned next to the close button.\n * @slot footer - Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.\n * @fires cancel - Dispatched before the modal has closed when a user attempts to dismiss a modal. Call `preventDefault()` on the event to prevent the modal closing.\n * @fires close - Dispatched when a modal is closed for any reason.\n */\n@customElement(\"nord-modal\")\nexport default class Modal extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  @query(\".n-modal\", true) private modal!: HTMLDivElement\n  @query(\".n-modal-backdrop\", true) private backdrop!: HTMLDivElement\n\n  private trigger?: HTMLElement\n  private lastButton?: HTMLButtonElement\n\n  private headerSlot = new SlotController(this, \"header\")\n  private featureSlot = new SlotController(this, \"feature\")\n  private footerSlot = new SlotController(this, \"footer\")\n\n  private scrollBar = new ScrollbarController(this)\n  private focusTrap = new FocusTrapController(this, () => this.modal)\n  private localize = new LocalizeController<\"nord-modal\">(this)\n  private events = new EventController(this)\n  private lightDismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    isDismissible: node => node !== this.modal,\n    onDismiss: () => this.handleDismiss(),\n  })\n\n  /**\n   * Controls whether the modal is open or not.\n   */\n  @property({ type: Boolean, reflect: true }) open = false\n\n  /**\n   * Controls the max-width of the modal when open.\n   */\n  @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n\n  /**\n   * The reason why the modal was closed. This typically indicates\n   * which button the user pressed to close the modal, though any value\n   * can be supplied if the modal is programmatically closed.\n   */\n  @property({ attribute: false }) returnValue: string = \"\"\n\n  /**\n   * By default if a modal is too big for the browser window,\n   * the entire modal will scroll. This setting changes that behavior\n   * so that the body of the modal scrolls instead, with the modal\n   * itself remaining fixed.\n   */\n  @property({ type: Boolean, reflect: true }) scrollable = false\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.setAttribute(\"role\", \"dialog\")\n    this.setAttribute(\"aria-modal\", \"true\")\n\n    // if submit event is not supported, let's do a basic polyfill\n    if (!window.SubmitEvent) {\n      this.events.listen(this, \"click\", this.trackLastButton, true)\n      this.events.listen(this, \"submit\", this.polyfillSubmitter, true)\n    }\n  }\n\n  /**\n   * Show the modal, automatically moving focus to the modal or a child\n   * element with an `autofocus` attribute.\n   */\n  showModal() {\n    this.open = true\n  }\n\n  /**\n   * Programmatically close the modal.\n   * @param returnValue An optional value to indicate why the modal was closed.\n   */\n  close(returnValue?: string) {\n    this.open = false\n\n    if (returnValue != null) {\n      this.returnValue = returnValue\n    }\n\n    this.dispatchEvent(new NordEvent(\"close\"))\n  }\n\n  /**\n   * Programmatically focus the modal.\n   * @param options An object which controls aspects of the focusing process.\n   */\n  focus(options?: FocusOptions) {\n    this.modal.focus({ preventScroll: true, ...options })\n  }\n\n  render() {\n    return html`\n      <div class=\"n-modal-backdrop\" @transitionend=${this.enableScroll}>\n        <div class=\"n-modal\" tabindex=\"0\" @submit=${this.handleSubmit}>\n          <div class=\"n-modal-header n-rounded-top\" ?hidden=${this.headerSlot.isEmpty}>\n            <slot class=\"n-padded\" name=${this.headerSlot.slotName}></slot>\n            <button class=\"n-close\" @click=${this.handleDismiss}>\n              <nord-icon name=\"interface-close-small\" size=\"s\" label=${this.localize.term(\"closeLabel\")}></nord-icon>\n            </button>\n          </div>\n\n          <div class=\"n-modal-body\">\n            <slot\n              name=${this.featureSlot.slotName}\n              class=${this.headerSlot.isEmpty ? \"n-rounded-top\" : \"\"}\n              ?hidden=${this.featureSlot.isEmpty}\n            ></slot>\n            <slot class=\"n-body-padded\"></slot>\n          </div>\n\n          <div class=\"n-modal-footer n-padded\" ?hidden=${this.footerSlot.isEmpty}>\n            <slot name=${this.footerSlot.slotName}></slot>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  @observe(\"open\", \"updated\")\n  protected handleOpenUpdated() {\n    // the order which things happen here is important!\n\n    if (this.open) {\n      // hide scrollbar and prevent scroll on body\n      this.scrollBar.hide()\n\n      // store the element that was focused prior to modal opening\n      this.trigger = document.activeElement as HTMLElement\n\n      // handle initial (auto)focus\n      const focusTarget = this.querySelector<HTMLElement>(\"[autofocus]\") || this\n      focusTarget.focus()\n\n      // finally, we should enable the focus trap\n      this.focusTrap.trap()\n    } else {\n      // ensure modal is scrolled to top ready for re-open\n      this.backdrop.scrollTop = 0\n\n      // we need to release the focus trap...\n      this.focusTrap.release()\n\n      // ...before we can return focus to the trigger button\n      this.trigger?.focus()\n      this.trigger = undefined\n    }\n  }\n\n  private enableScroll = (e: TransitionEvent) => {\n    // scrollbar should only be restored when the backdrop has transitioned\n    // that way we avoid awkward double scrollbars.\n    if (!this.open && e.target === this.backdrop) {\n      this.scrollBar.restore()\n    }\n  }\n\n  private handleDismiss() {\n    // allow cancelling of close\n    const allowed = this.dispatchEvent(new NordEvent(\"cancel\", { cancelable: true }))\n\n    if (allowed) {\n      this.close()\n    }\n  }\n\n  /**\n   * capture the last button clicked, so that we can polyfill `submitter` property in submit event\n   */\n  private trackLastButton = (e: Event) => {\n    const target = e.target as HTMLElement\n\n    if (isButton(target)) {\n      this.lastButton = target\n    }\n  }\n\n  private polyfillSubmitter = (e: Event) => {\n    // @ts-expect-error submitter is readonly, but this is only called if SubmitEvent is not supported\n    e.submitter = this.lastButton\n  }\n\n  private handleSubmit = (e: SubmitEvent) => {\n    this.lastButton = undefined\n\n    const target = e.target as HTMLFormElement\n    const submitter = e.submitter as HTMLButtonElement\n\n    const isDialogProperty = target.method === \"dialog\"\n    const isDialogAttr = target.getAttribute(\"method\") === \"dialog\"\n\n    // if they mismatch, it means \"dialog\" method is not supported,\n    // so we should polyfill the fact it does not do a full submit\n    if (isDialogAttr && !isDialogProperty) {\n      e.preventDefault()\n    }\n\n    if (isDialogAttr || isDialogProperty) {\n      this.close(submitter?.value)\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-modal\": Modal\n  }\n}\n"],"names":["FocusTrapController","constructor","host","boundary","this","lastScrollY","handleFocusOut","e","lastFocused","target","relatedTarget","recaptureFocus","handleFocusIn","composedPath","includes","restoreScroll","window","scrollTo","scrollX","addController","hostDisconnected","release","trap","scrollY","addEventListener","undefined","removeEventListener","_a","focus","preventScroll","setStyle","style","property","value","previous","ScrollbarController","scroller","document","body","resets","Set","restore","width","documentWidth","documentElement","clientWidth","Math","abs","innerWidth","hide","computedStyle","getComputedStyle","paddingRight","parseInt","add","forEach","reset","clear","Modal","DraftComponentMixin","LitElement","headerSlot","SlotController","featureSlot","footerSlot","scrollBar","focusTrap","modal","localize","LocalizeController","events","EventController","lightDismiss","LightDismissController","isOpen","open","isDismissible","node","onDismiss","handleDismiss","size","returnValue","scrollable","enableScroll","backdrop","trackLastButton","localName","lastButton","polyfillSubmitter","submitter","handleSubmit","isDialogProperty","method","isDialogAttr","getAttribute","preventDefault","close","connectedCallback","super","setAttribute","SubmitEvent","listen","showModal","dispatchEvent","NordEvent","options","render","html","isEmpty","slotName","term","handleOpenUpdated","trigger","activeElement","querySelector","scrollTop","cancelable","styles","componentStyle","__decorate","query","prototype","type","Boolean","reflect","attribute","observe","customElement"],"mappings":"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"}

package/lib/NavGroup.js

@@ -1,2 +1,2 @@
-import{_ as e,n as i}from"./query-assigned-elements-ef860822.js";import{r as n,s as o,$ as t,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);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;let l=class extends o{render(){return t`${this.heading?t`<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>`}};l.styles=s,e([a()],l.prototype,"heading",void 0),l=e([i("nord-nav-group")],l);var d=l;export{d as default};
+import{_ as e,n as i}from"./query-assigned-elements-ef860822.js";import{r as n,s as o,$ as t,w as r}from"./lit-element-67e6cd99.js";import{e as a}from"./property-03f59dce.js";import"./Icon.js";import"./state-70f38ceb.js";import"./if-defined-fe1a64e3.js";import"./unsafe-html-61a04601.js";import"./directive-de55b00a.js";import"./observe-a9c6dfb6.js";import"./cond-97c45476.js";import"./Component-a61df53a.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);font-size:var(--n-font-size-m);white-space:nowrap;text-overflow:ellipsis;user-select:none}*,::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);padding-inline-start:var(--n-space-s);margin-block-end:var(--n-space-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;let l=class extends o{render(){return t`${this.heading?t`<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>`}};l.styles=s,e([a()],l.prototype,"heading",void 0),l=e([i("nord-nav-group")],l);var d=l;export{d 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 \"../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 ready\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":"6mCAeA,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"}
+{"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 ready\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":"8kCAeA,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"}