@nordhealth/components 3.0.0 → 3.1.0

package/lib/{FormAssociatedMixin-895cf600.js.map → FormAssociatedMixin-edf83ac6.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FormAssociatedMixin-895cf600.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  hideRequired: boolean\n  hint?: string\n  hideLabel: boolean\n  placeholder?: string\n  error?: string\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(additionalContent?: TemplateResult): 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     * Visually hide the required indicator, but still show\n     * required attribute to assistive technologies like screen readers.\n     */\n    @property({ type: Boolean, attribute: \"hide-required\" }) hideRequired = 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(additionalContent?: TemplateResult) {\n      const label = html`\n        <label for=${this.inputId}>\n          <slot name=\"label\">${this.label}</slot\n          ><span ?hidden=${!this.required || this.hideRequired} aria-hidden=\"true\" class=\"n-required\">*</span>\n          ${additionalContent}\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","hideRequired","handleInput","stopPropagation","target","dispatchEvent","NordEvent","handleChange","renderLabel","additionalContent","html","hasHint","hint","renderError","hasError","error","getDescribedBy","getInvalid","undefined","Boolean","hasContent","__decorate","property","prototype","type","attribute"],"mappings":"0RAQaA,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,EACzB,EArBDP,EAAKU,cAAcR,MACnBA,KAAKS,OAAS,IAAIC,EAAgBZ,EACnC,CAEDa,gBACMX,KAAKF,KAAKc,MACZZ,KAAKS,OAAOI,OAAOb,KAAKF,KAAKc,KAAM,WAAYZ,KAAKC,eAEvD,ECsBG,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,EAMiB3B,KAAY4B,cAAG,CA2EzE,CAvHeP,gBACZ,OAAOrB,KAAKK,KACb,CA4CSwB,YAAY3B,GACpBA,EAAE4B,kBACF,MAAMC,EAAS7B,EAAE6B,OACjB/B,KAAKK,MAAQ0B,EAAO1B,MAKpBL,KAAKgC,cAAc,IAAIC,EAAU,SAClC,CAESC,aAAahC,GACrBA,EAAE4B,kBAKF9B,KAAKgC,cAAc,IAAIC,EAAU,UAClC,CAESE,YAAYC,GACpB,MAAMX,EAAQY,CAAI,eACHrC,KAAKsB,+BACKtB,KAAKyB,+BACRzB,KAAK2B,UAAY3B,KAAK4B,gEACtCQ,8CAG+BpC,KAAKwB,qBAAmBxB,KAAKsC,8BAC1CtC,KAAKuC,oBAI7B,OAAOvC,KAAK0B,UACRW,CAAI,yBAAyBZ,2BAC7BY,CAAI,kCAAkCZ,SAC3C,CAESe,cACR,OAAOH,CAAI,sCAC2BrC,KAAKuB,mCAAiCvB,KAAKyC,gCACxDzC,KAAK0C,oBAG/B,CAESC,iBACR,MAAML,QAAEA,EAAOG,SAAEA,GAAazC,KAE9B,OAAIsC,GAAWG,EACN,GAAGzC,KAAKwB,UAAUxB,KAAKuB,UAE5Be,EACKtC,KAAKwB,OAEViB,EACKzC,KAAKuB,aADd,CAKD,CAESqB,aACR,OAAO5C,KAAKyC,SAAW,YAASI,CACjC,CAEaP,cACZ,OAAOQ,QAAQ9C,KAAKuC,OAASvC,KAAKoB,SAAS2B,UAC5C,CAEaN,eACZ,OAAOK,QAAQ9C,KAAK0C,QAAU1C,KAAKmB,UAAU4B,UAC9C,EAGH,OA9GcC,EAAA,CAAXC,KAA6BjC,EAAAkC,UAAA,aAAA,GAKlBF,EAAA,CAAXC,KAAwBjC,EAAAkC,UAAA,YAAA,GAK6BF,EAAA,CAArDC,EAAS,CAAEE,KAAML,QAASM,UAAW,gBAAiCpC,EAAAkC,UAAA,iBAAA,GAK3DF,EAAA,CAAXC,KAA+BjC,EAAAkC,UAAA,mBAAA,GAKpBF,EAAA,CAAXC,KAAyBjC,EAAAkC,UAAA,aAAA,GAOGF,EAAA,CAA5BC,EAAS,CAAEE,KAAML,WAA2B9B,EAAAkC,UAAA,gBAAA,GAMYF,EAAA,CAAxDC,EAAS,CAAEE,KAAML,QAASM,UAAW,mBAAuCpC,EAAAkC,UAAA,oBAAA,GA6ExElC,CACT"}
+{"version":3,"file":"FormAssociatedMixin-edf83ac6.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  hideRequired: boolean\n  hint?: string\n  hideLabel: boolean\n  placeholder?: string\n  error?: string\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(additionalContent?: TemplateResult): 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     * Visually hide the required indicator, but still show\n     * required attribute to assistive technologies like screen readers.\n     */\n    @property({ type: Boolean, attribute: \"hide-required\" }) hideRequired = 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(additionalContent?: TemplateResult) {\n      const label = html`\n        <label for=${this.inputId}>\n          <slot name=\"label\">${this.label}</slot\n          ><span ?hidden=${!this.required || this.hideRequired} aria-hidden=\"true\" class=\"n-required\">*</span>\n          ${additionalContent}\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","hideRequired","handleInput","stopPropagation","target","dispatchEvent","NordEvent","handleChange","renderLabel","additionalContent","html","hasHint","hint","renderError","hasError","error","getDescribedBy","getInvalid","undefined","Boolean","hasContent","__decorate","property","prototype","type","attribute"],"mappings":"0RAQaA,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,EACzB,EArBDP,EAAKU,cAAcR,MACnBA,KAAKS,OAAS,IAAIC,EAAgBZ,EACnC,CAEDa,gBACMX,KAAKF,KAAKc,MACZZ,KAAKS,OAAOI,OAAOb,KAAKF,KAAKc,KAAM,WAAYZ,KAAKC,eAEvD,ECsBG,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,EAMiB3B,KAAY4B,cAAG,CA2EzE,CAvHeP,gBACZ,OAAOrB,KAAKK,KACb,CA4CSwB,YAAY3B,GACpBA,EAAE4B,kBACF,MAAMC,EAAS7B,EAAE6B,OACjB/B,KAAKK,MAAQ0B,EAAO1B,MAKpBL,KAAKgC,cAAc,IAAIC,EAAU,SAClC,CAESC,aAAahC,GACrBA,EAAE4B,kBAKF9B,KAAKgC,cAAc,IAAIC,EAAU,UAClC,CAESE,YAAYC,GACpB,MAAMX,EAAQY,CAAI,eACHrC,KAAKsB,+BACKtB,KAAKyB,+BACRzB,KAAK2B,UAAY3B,KAAK4B,gEACtCQ,8CAG+BpC,KAAKwB,qBAAmBxB,KAAKsC,8BAC1CtC,KAAKuC,oBAI7B,OAAOvC,KAAK0B,UACRW,CAAI,yBAAyBZ,2BAC7BY,CAAI,kCAAkCZ,SAC3C,CAESe,cACR,OAAOH,CAAI,sCAC2BrC,KAAKuB,mCAAiCvB,KAAKyC,gCACxDzC,KAAK0C,oBAG/B,CAESC,iBACR,MAAML,QAAEA,EAAOG,SAAEA,GAAazC,KAE9B,OAAIsC,GAAWG,EACN,GAAGzC,KAAKwB,UAAUxB,KAAKuB,UAE5Be,EACKtC,KAAKwB,OAEViB,EACKzC,KAAKuB,aADd,CAKD,CAESqB,aACR,OAAO5C,KAAKyC,SAAW,YAASI,CACjC,CAEaP,cACZ,OAAOQ,QAAQ9C,KAAKuC,OAASvC,KAAKoB,SAAS2B,UAC5C,CAEaN,eACZ,OAAOK,QAAQ9C,KAAK0C,QAAU1C,KAAKmB,UAAU4B,UAC9C,EAGH,OA9GcC,EAAA,CAAXC,KAA6BjC,EAAAkC,UAAA,aAAA,GAKlBF,EAAA,CAAXC,KAAwBjC,EAAAkC,UAAA,YAAA,GAK6BF,EAAA,CAArDC,EAAS,CAAEE,KAAML,QAASM,UAAW,gBAAiCpC,EAAAkC,UAAA,iBAAA,GAK3DF,EAAA,CAAXC,KAA+BjC,EAAAkC,UAAA,mBAAA,GAKpBF,EAAA,CAAXC,KAAyBjC,EAAAkC,UAAA,aAAA,GAOGF,EAAA,CAA5BC,EAAS,CAAEE,KAAML,WAA2B9B,EAAAkC,UAAA,gBAAA,GAMYF,EAAA,CAAxDC,EAAS,CAAEE,KAAML,QAASM,UAAW,mBAAuCpC,EAAAkC,UAAA,oBAAA,GA6ExElC,CACT"}

package/lib/{FormField-0783cb5a.js → FormField-cbfebb3f.js}

@@ -1,2 +1,2 @@
-import{i as n}from"./query-assigned-elements-2f8275b7.js";const a=n`.n-caption,::slotted(.n-caption){font-size:var(--n-font-size-s);line-height:var(--n-line-height-caption)}.n-label-container{margin-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:var(--n-space-xs);color:var(--n-color-text-weaker)}.n-error{margin-block-start:var(--n-space-s);color:var(--n-color-text-error)}.n-required{color:var(--n-color-status-danger);margin-inline-start:var(--n-space-xs)}`;export{a as s};
-//# sourceMappingURL=FormField-0783cb5a.js.map
+import{i as n}from"./query-assigned-elements-15485e3d.js";const a=n`.n-caption,::slotted(.n-caption){font-size:var(--n-font-size-s);line-height:var(--n-line-height-caption)}.n-label-container{margin-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:var(--n-space-xs);color:var(--n-color-text-weaker)}.n-error{margin-block-start:var(--n-space-s);color:var(--n-color-text-error)}.n-required{color:var(--n-color-status-danger);margin-inline-start:var(--n-space-xs)}`;export{a as s};
+//# sourceMappingURL=FormField-cbfebb3f.js.map

package/lib/FormField-cbfebb3f.js.map

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

package/lib/Header.js

@@ -1,2 +1,2 @@
-import{i as e,_ as r,s as a,x as n,e as o}from"./query-assigned-elements-2f8275b7.js";import{e as d}from"./property-03f59dce.js";import{S as s}from"./SlotController-d733c575.js";import{s as t}from"./Component-253ecb24.js";import"./EventController-d99ebeef.js";const l=e`:host{--_n-header-box-shadow:var(--n-box-shadow-header);--_n-header-block-size:var(--n-header-block-size, var(--n-space-xxl));--_n-header-padding-block:var(--n-space-m);--_n-header-padding-inline:var(--n-space-l);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;align-items:center;gap:var(--n-space-m)}.n-header{padding:var(--_n-header-padding-block) var(--_n-header-padding-inline);padding-inline-start:calc(var(--_n-header-padding-inline) + var(--_n-header-gutter,0px));background-color:var(--n-color-surface);border-block-end:1px solid var(--n-color-border);box-shadow:var(--_n-header-box-shadow);block-size:var(--_n-header-block-size)}.n-header-end{margin-inline-start:auto;gap:var(--n-space-s)}:host([size="s"]){--_n-header-block-size:52px;--_n-header-padding-block:var(--n-space-s)}`;let i=class extends a{constructor(){super(...arguments),this.endSlot=new s(this,"end"),this.size="m"}render(){return n`<header class="n-header"><slot></slot><div class="n-header-end" ?hidden="${this.endSlot.isEmpty}"><slot name="end"></slot></div></header>`}};i.styles=[t,l],r([d({reflect:!0})],i.prototype,"size",void 0),i=r([o("nord-header")],i);var c=i;export{c as default};
+import{i as e,_ as r,s as a,x as n,e as o}from"./query-assigned-elements-15485e3d.js";import{e as d}from"./property-03f59dce.js";import{S as s}from"./SlotController-d733c575.js";import{s as t}from"./Component-420bbc41.js";import"./EventController-d99ebeef.js";const l=e`:host{--_n-header-box-shadow:var(--n-box-shadow-header);--_n-header-block-size:var(--n-header-block-size, var(--n-space-xxl));--_n-header-padding-block:var(--n-space-m);--_n-header-padding-inline:var(--n-space-l);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;align-items:center;gap:var(--n-space-m)}.n-header{padding:var(--_n-header-padding-block) var(--_n-header-padding-inline);padding-inline-start:calc(var(--_n-header-padding-inline) + var(--_n-header-gutter,0px));background-color:var(--n-color-surface);border-block-end:1px solid var(--n-color-border);box-shadow:var(--_n-header-box-shadow);block-size:var(--_n-header-block-size)}.n-header-end{margin-inline-start:auto;gap:var(--n-space-s)}:host([size="s"]){--_n-header-block-size:52px;--_n-header-padding-block:var(--n-space-s)}`;let i=class extends a{constructor(){super(...arguments),this.endSlot=new s(this,"end"),this.size="m"}render(){return n`<header class="n-header"><slot></slot><div class="n-header-end" ?hidden="${this.endSlot.isEmpty}"><slot name="end"></slot></div></header>`}};i.styles=[t,l],r([d({reflect:!0})],i.prototype,"size",void 0),i=r([o("nord-header")],i);var c=i;export{c as default};
 //# sourceMappingURL=Header.js.map

package/lib/Icon.js

@@ -1,4 +1,4 @@
-import{A as e,T as i,i as s,_ as t,s as r,x as o,e as n}from"./query-assigned-elements-2f8275b7.js";import{e as a}from"./property-03f59dce.js";import{t as c}from"./state-70f38ceb.js";import{l}from"./if-defined-10508457.js";import{i as d,t as h,e as v}from"./directive-de55b00a.js";import{c as m}from"./cond-77258def.js";import{IconManager as p}from"./IconManager.js";import{s as f}from"./Component-253ecb24.js";import{o as z}from"./observe-a9c6dfb6.js";
+import{A as e,T as i,i as s,_ as t,s as r,x as o,e as n}from"./query-assigned-elements-15485e3d.js";import{e as a}from"./property-03f59dce.js";import{t as c}from"./state-70f38ceb.js";import{l}from"./if-defined-9b177db4.js";import{i as d,t as h,e as v}from"./directive-de55b00a.js";import{c as m}from"./cond-44672025.js";import{IconManager as p}from"./IconManager.js";import{s as f}from"./Component-420bbc41.js";import{o as z}from"./observe-a9c6dfb6.js";
 /**
  * @license
  * Copyright 2017 Google LLC

package/lib/IconManager.js

@@ -1,2 +1,2 @@
-const e=e=>fetch(`https://nordcdn.net/ds/icons/2.0.1/assets/${e}.svg`).then((t=>{if(!t.ok)throw new TypeError(`NORD: unknown icon: '${e}'`);return t.text()}));class t{constructor(){this.cache=new Map,this.resolver=e}resolve(e,t){let r=this.cache.get(e);"string"!=typeof r?(r||(r=this.resolver(e).catch((()=>"")).then((t=>(this.cache.set(e,t),t))),this.cache.set(e,r)),r.then(t)):t(r)}registerIcon(e,t){let r,s;if("string"==typeof e?(r=e,s=t):(r=e.title,s=e.default),!r)throw new Error("name is required when registering an icon");if(!s)throw new Error("icon must not be empty");this.cache.set(r,s)}clear(){this.cache.clear()}}export{t as IconManager};
+const e=e=>fetch(`https://nordcdn.net/ds/icons/3.0.0/assets/${e}.svg`).then((t=>{if(!t.ok)throw new TypeError(`NORD: unknown icon: '${e}'`);return t.text()}));class t{constructor(){this.cache=new Map,this.resolver=e}resolve(e,t){let r=this.cache.get(e);"string"!=typeof r?(r||(r=this.resolver(e).catch((()=>"")).then((t=>(this.cache.set(e,t),t))),this.cache.set(e,r)),r.then(t)):t(r)}registerIcon(e,t){let r,s;if("string"==typeof e?(r=e,s=t):(r=e.title,s=e.default),!r)throw new Error("name is required when registering an icon");if(!s)throw new Error("icon must not be empty");this.cache.set(r,s)}clear(){this.cache.clear()}}export{t as IconManager};
 //# sourceMappingURL=IconManager.js.map

package/lib/Input.js

@@ -1,2 +1,2 @@
-import{i as t,x as n,A as e,_ as o,e as i,s}from"./query-assigned-elements-2f8275b7.js";import{e as r}from"./property-03f59dce.js";import{l as a}from"./if-defined-10508457.js";import{o as d}from"./class-map-4a0dec4a.js";import{n as l}from"./ref-f75a30b7.js";import{F as c}from"./FocusableMixin-003e1094.js";import{F as p}from"./FormAssociatedMixin-895cf600.js";import{I as u}from"./InputMixin-e15dd8f7.js";import{R as h,s as m}from"./TextField-c2e49b85.js";import{A as b}from"./AutocompleteMixin-60503685.js";import{S as v}from"./SizeMixin-bc2098f4.js";import{s as f}from"./Component-253ecb24.js";import{s as g}from"./FormField-0783cb5a.js";import{S as w}from"./SlotController-d733c575.js";import{D as y}from"./DirectionController-f35f5476.js";import{c as z}from"./cond-77258def.js";import x from"./Icon.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";import"./state-70f38ceb.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";var $=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m16.03 14.61c1.23-1.54 1.97-3.49 1.97-5.61 0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.12 0 4.07-.74 5.61-1.97l3.97 3.97 1.41-1.41-3.97-3.97zm-7.03 1.39c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z" fill="currentColor"/></svg>',title:"navigation-search",tags:"nordicon navigation menu find search magnifying glass"});const j=t`.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);display:grid;grid-template-columns:max-content 1fr max-content}.n-input{grid-area:1/1/2/4}slot[name=end],slot[name=start]{pointer-events:none;display:flex;align-items:center;color:var(--n-color-icon)}:host([disabled]) slot:is([name=start],[name=end]){color:var(--n-color-text-weakest)}slot[name=start]{grid-area:1/1/2/2;order:1}slot[name=end]{grid-area:1/3/2/4}.is-rtl slot[name=end],slot[name=start]{--n-button-border-radius:var(--n-border-radius-s) 0 0 var(--n-border-radius-s)}.is-rtl slot[name=start],slot[name=end]{--n-button-border-radius:0 var(--n-border-radius-s) var(--n-border-radius-s) 0}:is([name=start],[name=end])::slotted(:not(nord-button,nord-dropdown)),nord-icon{--_n-input-slot-margin-inline:var(--n-space-m);margin-inline-start:var(--_n-input-slot-margin-inline)!important;margin-inline-end:var(--_n-input-slot-margin-inline)!important}:host([size="s"]) :is([name=start],[name=end])::slotted(:not(nord-button,nord-dropdown)),:host([size="s"]) nord-icon{--_n-input-slot-margin-inline:var(--n-space-s)}.has-start .n-input{padding-inline-start:var(--n-space-xl)}.has-end .n-input{padding-inline-end:var(--n-space-xl)}:host([size="s"]) .has-start .n-input,:host([size="s"][type=search]) .n-input{padding-inline-start:var(--n-space-l)}:host([size="s"]) .has-end .n-input{padding-inline-end:var(--n-space-l)}:host([size="l"]) .has-start .n-input,:host([size="l"][type=search]) .n-input{padding-inline-start:calc(var(--n-space-xl) * 1.1)}:host([size="l"]) .has-end .n-input{padding-inline-end:calc(var(--n-space-xl) * 1.1)}::slotted(nord-button:not([disabled])),::slotted(nord-dropdown){pointer-events:auto;position:relative}::slotted(nord-button:not([disabled],:focus)),::slotted(nord-dropdown:not(:focus-within)){--n-button-box-shadow:none}::slotted(nord-button:active),::slotted(nord-dropdown:active:not([open])){inset-block-start:-1px}::slotted(nord-button[disabled]){--n-button-background-color:transparent}.n-input-container:hover:not(:focus-within) ::slotted(:is(nord-button,nord-dropdown)),.n-label-container:hover~.n-input-container:not(:focus-within) ::slotted(:is(nord-button,nord-dropdown)){--n-button-border-color:var(--n-input-border-color, var(--n-color-border-hover))}.n-input-container:focus-within ::slotted(:is(nord-button,nord-dropdown:not([open]))){--n-button-border-color:var(--n-input-border-color, var(--n-color-accent))}:host([error]) .n-input-container ::slotted(:is(nord-button:not(:focus),nord-dropdown:not(:focus-within),nord-dropdown[open])){--n-button-border-color:var(--n-input-border-color, var(--n-color-status-danger))}.has-start-button .n-input{padding-inline-start:calc(var(--n-space-l) * 2)}.has-end-button .n-input{padding-inline-end:calc(var(--n-space-l) * 2)}:host([size="s"]) .has-start-button .n-input{padding-inline-start:calc(var(--n-space-m) * 2.5)}:host([size="s"]) .has-end-button .n-input{padding-inline-end:calc(var(--n-space-m) * 2.5)}:host([size="l"]) .has-start-button .n-input{padding-inline-start:calc(var(--n-space-l) * 2.5)}:host([size="l"]) .has-end-button .n-input{padding-inline-end:calc(var(--n-space-l) * 2.5)}:host([size="s"]) ::slotted(nord-button){--_n-button-padding-inline:calc(var(--n-space-s) * 1.4)}:host{--_n-input-icon-size:var(--n-size-icon-s)}:host([size="s"]){--_n-input-icon-size:var(--n-size-icon-xs)}:host([size="l"]){--_n-input-icon-size:var(--n-size-icon-m)}::slotted(nord-icon:not([size])),nord-icon{--_n-icon-size:var(--_n-input-icon-size)}:host([type=unit]) :is(.n-input-container,.n-input){--_n-input-text-align:var(--n-input-text-align, end);font-family:var(--n-font-family-code)!important}`;x.registerIcon($);const S=t=>null!==t&&("nord-button"===t.localName||"nord-dropdown"===t.localName);let _=class extends(v(p(b(h(u(c(s))))))){constructor(){super(...arguments),this.startSlot=new w(this,"start"),this.endSlot=new w(this,"end"),this.direction=new y(this),this.type="text",this.expand=!1,this.disallowPattern=void 0,this.handleInputChange=t=>{const n=t.target;this.disallowPattern&&function(t,n){const{value:e}=t,o=t.selectionStart,i=e.slice(0,o),s=e.slice(o,e.length),r=i.replace(n,""),a=r+s.replace(n,""),d=r.length;t.value=a,t.selectionStart=d,t.selectionEnd=d}(n,new RegExp(this.disallowPattern,"g")),this.handleInput(t)}}render(){var t;const o="search"===this.type||this.startSlot.hasContent,i="number"===this.type;return n`${this.renderLabel()}<div class="${d({"n-input-container":!0,"has-start":o,"has-end":this.endSlot.hasContent,"has-start-button":S(this.startSlot.content),"has-end-button":S(this.endSlot.content),"is-rtl":"rtl"===this.direction.dir})}"><slot name="${this.startSlot.slotName}" ?hidden="${!o}">${"search"===this.type?n`<nord-icon name="navigation-search"></nord-icon>`:e}</slot><input ${l(this.focusableRef)} id="${this.inputId}" class="n-input" type="${i?"text":this.type}" inputmode="${z(i,"numeric")}" pattern="${z(i,"[0-9]*")}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" name="${a(this.name)}" .value="${null!==(t=this.value)&&void 0!==t?t:""}" placeholder="${a(this.placeholder)}" @input="${this.handleInputChange}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" spellcheck="false" autocomplete="${this.autocomplete}"><slot name="${this.endSlot.slotName}" ?hidden="${this.endSlot.isEmpty}"></slot></div>${this.renderError()}`}handleKeydown(t){const{form:n}=this;if("Enter"===t.key&&n){const t=function(t){let n=t.querySelector('button[type="submit"]');!n&&t.id&&(n=t.getRootNode().querySelector(`button[form=${t.id}]`));return n}(n);setTimeout((()=>null==t?void 0:t.click()),0)}}};_.styles=[f,g,m,j],o([r({reflect:!0})],_.prototype,"type",void 0),o([r({reflect:!0,type:Boolean})],_.prototype,"expand",void 0),o([r({reflect:!0,attribute:"disallow-pattern"})],_.prototype,"disallowPattern",void 0),_=o([i("nord-input")],_);var k=_;export{k as default};
+import{i as t,x as n,A as e,_ as o,e as i,s as r}from"./query-assigned-elements-15485e3d.js";import{e as s}from"./property-03f59dce.js";import{i as a}from"./query-2d22378e.js";import{l as d}from"./if-defined-9b177db4.js";import{o as l}from"./class-map-cb77ead2.js";import{n as c}from"./ref-5526fb07.js";import{o as p}from"./style-map-ed7e6cc6.js";import{F as u}from"./FocusableMixin-4300e44e.js";import{F as m}from"./FormAssociatedMixin-edf83ac6.js";import{I as h}from"./InputMixin-4037827f.js";import{R as b,s as v}from"./TextField-8b226327.js";import{A as f}from"./AutocompleteMixin-3cf61f49.js";import{S as g}from"./SizeMixin-fb379434.js";import{s as w}from"./Component-420bbc41.js";import{s as y}from"./FormField-cbfebb3f.js";import{D as z}from"./DirectionController-f35f5476.js";import{c as x}from"./cond-44672025.js";import j from"./Icon.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-d733c575.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";import"./state-70f38ceb.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";var _=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m16.03 14.61c1.23-1.54 1.97-3.49 1.97-5.61 0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.12 0 4.07-.74 5.61-1.97l3.97 3.97 1.41-1.41-3.97-3.97zm-7.03 1.39c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z" fill="currentColor"/></svg>',title:"navigation-search",tags:"nordicon navigation menu find search magnifying glass"});const $=t`.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);display:grid;grid-template-columns:max-content 1fr max-content}.n-input{grid-area:1/1/2/4;padding-inline-start:var(--_n-input-start-inline-size,var(--_n-input-padding-inline));padding-inline-end:var(--_n-input-end-inline-size,var(--_n-input-padding-inline))}slot[name=end],slot[name=start]{pointer-events:none;display:flex;align-items:center;color:var(--n-color-icon)}:host([disabled]) slot:is([name=start],[name=end]){color:var(--n-color-text-weakest)}slot[name=start]{grid-area:1/1/2/2;order:1}slot[name=end]{grid-area:1/3/2/4}.is-rtl slot[name=end],slot[name=start]{--n-button-border-radius:var(--n-border-radius-s) 0 0 var(--n-border-radius-s)}.is-rtl slot[name=start],slot[name=end]{--n-button-border-radius:0 var(--n-border-radius-s) var(--n-border-radius-s) 0}:is([name=start],[name=end])::slotted(*){font-size:var(--_n-input-font-size)}[name=start]::slotted(*),nord-icon{margin-inline-start:var(--_n-input-padding-inline)!important;margin-inline-end:calc(var(--_n-input-padding-inline)/ 2)!important}[name=end]::slotted(*){margin-inline-start:calc(var(--_n-input-padding-inline)/ 2)!important;margin-inline-end:var(--_n-input-padding-inline)!important}[name=start]::slotted(:is(nord-button, nord-dropdown)){margin-inline-start:0!important}[name=end]::slotted(:is(nord-button, nord-dropdown)){margin-inline-end:0!important}nord-icon{--_n-input-icon-color:var(--n-input-icon-color, var(--n-color-icon));color:var(--_n-input-icon-color)}::slotted(:is(nord-button:not([disabled]), nord-dropdown)){pointer-events:auto;position:relative}::slotted(nord-button:not([disabled],:focus)),::slotted(nord-dropdown:not(:focus-within)){--n-button-box-shadow:none}::slotted(nord-button:active),::slotted(nord-dropdown:active:not([open])){inset-block-start:-1px}::slotted(nord-button[disabled]){--n-button-color:var(--n-color-text-weaker);-webkit-text-fill-color:var(--n-button-color);opacity:.8}.n-input-container:hover:not(:focus-within) ::slotted(:is(nord-button:not([disabled]),nord-dropdown)),.n-label-container:hover~.n-input-container:not(:focus-within) ::slotted(:is(nord-button:not([disabled]),nord-dropdown)){--n-button-border-color:var(--n-input-border-color, var(--n-color-border-hover))}.n-input-container:focus-within ::slotted(:is(nord-button,nord-dropdown:not([open]))){--n-button-border-color:var(--n-input-border-color, var(--n-color-accent))}:host([error]) .n-input-container ::slotted(:is(nord-button:not(:focus),nord-dropdown:not(:focus-within),nord-dropdown[open])){--n-button-border-color:var(--n-input-border-color, var(--n-color-status-danger))}:host([size="s"]) ::slotted(nord-button){--_n-button-padding-inline:calc(var(--n-space-s) * 1.4)}:host{--_n-input-icon-size:var(--n-size-icon-s)}:host([size="s"]){--_n-input-icon-size:var(--n-size-icon-xs)}:host([size="l"]){--_n-input-icon-size:var(--n-size-icon-m)}::slotted(nord-icon:not([size])),nord-icon{--_n-icon-size:var(--_n-input-icon-size)}:host([type=unit]) :is(.n-input-container,.n-input){--_n-input-text-align:var(--n-input-text-align, end);font-family:var(--n-font-family-code)!important}`;class S{constructor(t,n){this.target=n,this.hadFirstUpdate=!1,t.addController(this),this.observer=new ResizeObserver((([n])=>{const[e]=n.borderBoxSize;this.borderBoxSize=e,t.requestUpdate()}))}get inlineSize(){var t;return null===(t=this.borderBoxSize)||void 0===t?void 0:t.inlineSize}get blockSize(){var t;return null===(t=this.borderBoxSize)||void 0===t?void 0:t.blockSize}hostUpdated(){this.hadFirstUpdate||(this.observer.observe(this.target()),this.hadFirstUpdate=!0)}hostConnected(){this.hadFirstUpdate&&this.observer.observe(this.target())}hostDisconnected(){this.observer.disconnect()}}j.registerIcon(_);const k=t=>t?`${t}px`:void 0;let F=class extends(g(m(f(b(h(u(r))))))){constructor(){super(...arguments),this.startObserver=new S(this,(()=>this.startSlot)),this.endObserver=new S(this,(()=>this.endSlot)),this.direction=new z(this),this.type="text",this.expand=!1,this.disallowPattern=void 0,this.handleInputChange=t=>{const n=t.target;this.disallowPattern&&function(t,n){const{value:e}=t,o=t.selectionStart,i=e.slice(0,o),r=e.slice(o,e.length),s=i.replace(n,""),a=s+r.replace(n,""),d=s.length;t.value=a,t.selectionStart=d,t.selectionEnd=d}(n,new RegExp(this.disallowPattern,"g")),this.handleInput(t)}}render(){var t;const o="number"===this.type;return n`${this.renderLabel()}<div class="${l({"n-input-container":!0,"is-rtl":"rtl"===this.direction.dir})}" style="${p({"--_n-input-start-inline-size":k(this.startObserver.inlineSize),"--_n-input-end-inline-size":k(this.endObserver.inlineSize)})}"><slot name="start">${"search"===this.type?n`<nord-icon name="navigation-search"></nord-icon>`:e}</slot><input ${c(this.focusableRef)} id="${this.inputId}" class="n-input" type="${o?"text":this.type}" inputmode="${x(o,"numeric")}" pattern="${x(o,"[0-9]*")}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" name="${d(this.name)}" .value="${null!==(t=this.value)&&void 0!==t?t:""}" placeholder="${d(this.placeholder)}" @input="${this.handleInputChange}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" aria-describedby="${d(this.getDescribedBy())}" aria-invalid="${d(this.getInvalid())}" spellcheck="false" autocomplete="${this.autocomplete}"><slot name="end"></slot></div>${this.renderError()}`}handleKeydown(t){const{form:n}=this;if("Enter"===t.key&&n){const t=function(t){let n=t.querySelector('button[type="submit"]');!n&&t.id&&(n=t.getRootNode().querySelector(`button[form=${t.id}]`));return n}(n);setTimeout((()=>null==t?void 0:t.click()),0)}}};F.styles=[w,y,v,$],o([a("slot[name='start']")],F.prototype,"startSlot",void 0),o([a("slot[name='end']")],F.prototype,"endSlot",void 0),o([s({reflect:!0})],F.prototype,"type",void 0),o([s({reflect:!0,type:Boolean})],F.prototype,"expand",void 0),o([s({reflect:!0,attribute:"disallow-pattern"})],F.prototype,"disallowPattern",void 0),F=o([i("nord-input")],F);var C=F;export{C as default};
 //# sourceMappingURL=Input.js.map

package/lib/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../icons/lib/assets/navigation-search.js","../src/input/Input.ts","../src/common/input.ts","../src/common/form.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m16.03 14.61c1.23-1.54 1.97-3.49 1.97-5.61 0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.12 0 4.07-.74 5.61-1.97l3.97 3.97 1.41-1.41-3.97-3.97zm-7.03 1.39c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z\" fill=\"currentColor\"/></svg>'\nexport const title = \"navigation-search\"\nexport const tags = \"nordicon navigation menu find search magnifying glass\"\n","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\"\n\nimport * as 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\"\nimport { ReadonlyMixin } from \"../common/mixins/ReadonlyMixin.js\"\nimport { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.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 { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { getSubmitButton } from \"../common/form.js\"\nimport { cleanValue } from \"../common/input.js\"\nimport Icon from \"../icon/Icon.js\"\n\nimport type Dropdown from \"../dropdown/Dropdown.js\"\nimport type Button from \"../button/Button.js\"\n\nIcon.registerIcon(searchIcon)\n\nconst isButtonOrDropdown = (el: Element | null): el is Button | Dropdown => {\n  if (el === null) return false\n  return el.localName === \"nord-button\" || el.localName === \"nord-dropdown\"\n}\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 * @cssprop [--n-input-inline-size=240px] - Controls the inline size, or width, of the input.\n * @cssprop [--n-input-background=var(--n-color-active)] - Controls the background of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-color=var(--n-color-text)] - Controls the text color of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-border-color=var(--n-color-border-strong)] - Controls the border color of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-input-text-align=start] - Controls the alignment of text within the input itself.\n */\n@customElement(\"nord-input\")\nexport default class Input extends SizeMixin(\n  FormAssociatedMixin(AutocompleteMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement)))))\n) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  private startSlot = new SlotController(this, \"start\")\n  private endSlot = new SlotController(this, \"end\")\n  private direction = new DirectionController(this)\n\n  /**\n   * The type of the input.\n   */\n  @property({ reflect: true }) type: \"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" | \"unit\" =\n    \"text\"\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  /**\n   * Optionally disallow certain characters from being used inside the input, using a regex pattern.\n   */\n  @property({ reflect: true, attribute: \"disallow-pattern\" }) disallowPattern?: string = undefined\n\n  render() {\n    const startSlotHasContent = this.type === \"search\" || this.startSlot.hasContent\n    const isNumber = this.type === \"number\"\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          \"has-start-button\": isButtonOrDropdown(this.startSlot.content),\n          \"has-end-button\": isButtonOrDropdown(this.endSlot.content),\n          \"is-rtl\": this.direction.dir === \"rtl\",\n        })}\n      >\n        <slot name=${this.startSlot.slotName} ?hidden=${!startSlotHasContent}>\n          ${this.type === \"search\" ? html`<nord-icon name=\"navigation-search\"></nord-icon>` : nothing}\n        </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          ?readonly=${this.readonly}\n          name=${ifDefined(this.name)}\n          .value=${this.value ?? \"\"}\n          placeholder=${ifDefined(this.placeholder)}\n          @input=${this.handleInputChange}\n          @change=${this.handleChange}\n          @keydown=${this.handleKeydown}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n          spellcheck=\"false\"\n          autocomplete=${this.autocomplete as any}\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  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement\n\n    // clean up any invalid characters\n    if (this.disallowPattern) {\n      cleanValue(target, new RegExp(this.disallowPattern, \"g\"))\n    }\n    this.handleInput(e)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-input\": Input\n  }\n}\n","export function cleanValue(inputEl: HTMLInputElement, regex: RegExp): string {\n  const { value } = inputEl\n  const cursor = inputEl.selectionStart as number\n\n  const beforeCursor = value.slice(0, cursor)\n  const afterCursor = value.slice(cursor, value.length)\n\n  const filteredBeforeCursor = beforeCursor.replace(regex, \"\")\n  const filterAfterCursor = afterCursor.replace(regex, \"\")\n\n  const newValue = filteredBeforeCursor + filterAfterCursor\n  const newCursor = filteredBeforeCursor.length\n\n  inputEl.value = newValue\n  inputEl.selectionStart = newCursor\n  inputEl.selectionEnd = newCursor\n\n  return newValue\n}\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":["Icon","registerIcon","searchIcon","isButtonOrDropdown","el","localName","Input","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","startSlot","SlotController","endSlot","direction","DirectionController","type","expand","disallowPattern","undefined","handleInputChange","e","target","inputEl","regex","value","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","RegExp","handleInput","render","startSlotHasContent","hasContent","isNumber","html","renderLabel","classMap","content","dir","slotName","nothing","ref","focusableRef","inputId","cond","disabled","required","readonly","ifDefined","name","_a","placeholder","handleChange","handleKeydown","getDescribedBy","getInvalid","autocomplete","isEmpty","renderError","form","key","button","querySelector","id","getRootNode","getSubmitButton","setTimeout","click","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","property","reflect","prototype","Boolean","attribute","customElement"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../../icons/lib/assets/navigation-search.js","../src/common/controllers/ResizeController.ts","../src/input/Input.ts","../src/common/input.ts","../src/common/form.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m16.03 14.61c1.23-1.54 1.97-3.49 1.97-5.61 0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.12 0 4.07-.74 5.61-1.97l3.97 3.97 1.41-1.41-3.97-3.97zm-7.03 1.39c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z\" fill=\"currentColor\"/></svg>'\nexport const title = \"navigation-search\"\nexport const tags = \"nordicon navigation menu find search magnifying glass\"\n","import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\nexport class ResizeController implements ReactiveController {\n  private observer: ResizeObserver\n  private hadFirstUpdate = false\n  private borderBoxSize?: ResizeObserverSize\n\n  constructor(host: ReactiveControllerHost, private target: () => HTMLElement) {\n    host.addController(this)\n\n    this.observer = new ResizeObserver(([entry]) => {\n      const [borderBoxSize] = entry.borderBoxSize\n      this.borderBoxSize = borderBoxSize\n      host.requestUpdate()\n    })\n  }\n\n  get inlineSize() {\n    return this.borderBoxSize?.inlineSize\n  }\n\n  get blockSize() {\n    return this.borderBoxSize?.blockSize\n  }\n\n  hostUpdated() {\n    if (!this.hadFirstUpdate) {\n      this.observer.observe(this.target())\n      this.hadFirstUpdate = true\n    }\n  }\n\n  hostConnected() {\n    // in case the host has rendered, disconnected, and is now reconnected\n    if (this.hadFirstUpdate) {\n      this.observer.observe(this.target())\n    }\n  }\n\n  hostDisconnected() {\n    this.observer.disconnect()\n  }\n}\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query } 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 { styleMap } from \"lit/directives/style-map.js\"\n\nimport * as 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\"\nimport { ReadonlyMixin } from \"../common/mixins/ReadonlyMixin.js\"\nimport { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.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 { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { ResizeController } from \"../common/controllers/ResizeController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { getSubmitButton } from \"../common/form.js\"\nimport { cleanValue } from \"../common/input.js\"\nimport Icon from \"../icon/Icon.js\"\n\nIcon.registerIcon(searchIcon)\n\nconst px = (value?: number) => (value ? `${value}px` : undefined)\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 * @cssprop [--n-input-inline-size=240px] - Controls the inline size, or width, of the input.\n * @cssprop [--n-input-background=var(--n-color-active)] - Controls the background of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-color=var(--n-color-text)] - Controls the text color of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-border-color=var(--n-color-border-strong)] - Controls the border color of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-input-text-align=start] - Controls the alignment of text within the input itself.\n */\n@customElement(\"nord-input\")\nexport default class Input extends SizeMixin(\n  FormAssociatedMixin(AutocompleteMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement)))))\n) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  @query(\"slot[name='start']\") private startSlot!: HTMLSlotElement\n  @query(\"slot[name='end']\") private endSlot!: HTMLSlotElement\n  private startObserver = new ResizeController(this, () => this.startSlot)\n  private endObserver = new ResizeController(this, () => this.endSlot)\n  private direction = new DirectionController(this)\n\n  /**\n   * The type of the input.\n   */\n  @property({ reflect: true }) type: \"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" | \"unit\" =\n    \"text\"\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  /**\n   * Optionally disallow certain characters from being used inside the input, using a regex pattern.\n   */\n  @property({ reflect: true, attribute: \"disallow-pattern\" }) disallowPattern?: string = undefined\n\n  render() {\n    const isNumber = this.type === \"number\"\n\n    return html`\n      ${this.renderLabel()}\n\n      <div\n        class=${classMap({\n          \"n-input-container\": true,\n          \"is-rtl\": this.direction.dir === \"rtl\",\n        })}\n        style=${styleMap({\n          \"--_n-input-start-inline-size\": px(this.startObserver.inlineSize),\n          \"--_n-input-end-inline-size\": px(this.endObserver.inlineSize),\n        })}\n      >\n        <slot name=\"start\">\n          ${this.type === \"search\" ? html`<nord-icon name=\"navigation-search\"></nord-icon>` : nothing}\n        </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          ?readonly=${this.readonly}\n          name=${ifDefined(this.name)}\n          .value=${this.value ?? \"\"}\n          placeholder=${ifDefined(this.placeholder)}\n          @input=${this.handleInputChange}\n          @change=${this.handleChange}\n          @keydown=${this.handleKeydown}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n          spellcheck=\"false\"\n          autocomplete=${this.autocomplete as any}\n        />\n        <slot name=\"end\"></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  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement\n\n    // clean up any invalid characters\n    if (this.disallowPattern) {\n      cleanValue(target, new RegExp(this.disallowPattern, \"g\"))\n    }\n    this.handleInput(e)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-input\": Input\n  }\n}\n","export function cleanValue(inputEl: HTMLInputElement, regex: RegExp): string {\n  const { value } = inputEl\n  const cursor = inputEl.selectionStart as number\n\n  const beforeCursor = value.slice(0, cursor)\n  const afterCursor = value.slice(cursor, value.length)\n\n  const filteredBeforeCursor = beforeCursor.replace(regex, \"\")\n  const filterAfterCursor = afterCursor.replace(regex, \"\")\n\n  const newValue = filteredBeforeCursor + filterAfterCursor\n  const newCursor = filteredBeforeCursor.length\n\n  inputEl.value = newValue\n  inputEl.selectionStart = newCursor\n  inputEl.selectionEnd = newCursor\n\n  return newValue\n}\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":["ResizeController","constructor","host","target","this","hadFirstUpdate","addController","observer","ResizeObserver","entry","borderBoxSize","requestUpdate","inlineSize","_a","blockSize","hostUpdated","observe","hostConnected","hostDisconnected","disconnect","Icon","registerIcon","searchIcon","px","value","undefined","Input","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","startObserver","startSlot","endObserver","endSlot","direction","DirectionController","type","expand","disallowPattern","handleInputChange","e","inputEl","regex","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","RegExp","handleInput","render","isNumber","html","renderLabel","classMap","dir","styleMap","nothing","ref","focusableRef","inputId","cond","disabled","required","readonly","ifDefined","name","placeholder","handleChange","handleKeydown","getDescribedBy","getInvalid","autocomplete","renderError","form","key","button","querySelector","id","getRootNode","getSubmitButton","setTimeout","click","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","property","reflect","Boolean","attribute","customElement"],"mappings":"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"}

package/lib/{InputMixin-e15dd8f7.js → InputMixin-4037827f.js}

@@ -1,2 +1,2 @@
-import{_ as t}from"./query-assigned-elements-2f8275b7.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-e15dd8f7.js.map
+import{_ as t}from"./query-assigned-elements-15485e3d.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-4037827f.js.map

package/lib/{InputMixin-e15dd8f7.js.map → InputMixin-4037827f.js.map}

@@ -1 +1 @@
-{"version":3,"file":"InputMixin-e15dd8f7.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\n  value: string\n  disabled: boolean\n  get form(): HTMLFormElement | null\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    get form() {\n      if (this.hasAttribute(\"form\")) {\n        const root = this.getRootNode() as ShadowRoot | Document\n        return root.querySelector<HTMLFormElement>(`form#${this.getAttribute(\"form\")}`)\n      }\n\n      return this.closest(\"form\")\n    }\n  }\n\n  return InputElement\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,EAa7B,CARKC,WACF,GAAIH,KAAKI,aAAa,QAAS,CAE7B,OADaJ,KAAKK,cACNC,cAA+B,QAAQN,KAAKO,aAAa,UACtE,CAED,OAAOP,KAAKQ,QAAQ,OACrB,EAGH,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,CACT"}
+{"version":3,"file":"InputMixin-4037827f.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\n  value: string\n  disabled: boolean\n  get form(): HTMLFormElement | null\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    get form() {\n      if (this.hasAttribute(\"form\")) {\n        const root = this.getRootNode() as ShadowRoot | Document\n        return root.querySelector<HTMLFormElement>(`form#${this.getAttribute(\"form\")}`)\n      }\n\n      return this.closest(\"form\")\n    }\n  }\n\n  return InputElement\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,EAa7B,CARKC,WACF,GAAIH,KAAKI,aAAa,QAAS,CAE7B,OADaJ,KAAKK,cACNC,cAA+B,QAAQN,KAAKO,aAAa,UACtE,CAED,OAAOP,KAAKQ,QAAQ,OACrB,EAGH,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,CACT"}

package/lib/Layout.js

@@ -1,2 +1,2 @@
-import{i as n,_ as e,s as a,x as t,A as o,e as i}from"./query-assigned-elements-2f8275b7.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{i as d}from"./query-2d22378e.js";import{o as l}from"./class-map-4a0dec4a.js";import{o as c}from"./style-map-75ce20b3.js";import{a as v}from"./arrow-left-small-dd181059.js";import{D as p}from"./DirectionController-f35f5476.js";import{E as h}from"./EventController-d99ebeef.js";import{L as u}from"./LightDismissController-a2645ae6.js";import{S as g}from"./SlotController-d733c575.js";import{o as b}from"./observe-a9c6dfb6.js";import{c as m}from"./cond-77258def.js";import{f as y}from"./fsm-50373df9.js";import{c as k}from"./number-c3ab3e95.js";import f from"./Icon.js";import"./NavToggle.js";import{s as w}from"./Component-253ecb24.js";import{s as z}from"./Sticky-220280e0.js";import"./directive-de55b00a.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./if-defined-10508457.js";import"./IconManager.js";import"./ref-f75a30b7.js";import"./LocalizeController.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./FocusableMixin-003e1094.js";import"./Button.js";import"./LightDomController-5c53b3f4.js";import"./Spinner.js";import"./InputMixin-e15dd8f7.js";import"./VisuallyHidden.js";const x=n`:host{--_n-layout-padding:var(--n-layout-padding, var(--n-space-l));--_n-layout-drawer-inline-size:var(--n-layout-drawer-inline-size, 320px);--_n-layout-background-color:var(--n-layout-background-color, var(--n-color-background));--_n-layout-nav-transition-duration:var(--n-transition-mobile);--_n-layout-header-size:var(--n-space-xxl);--_n-layout-header-size-s:calc(var(--n-space-xl) + var(--n-space-m));background:var(--_n-layout-background-color);color:var(--n-color-text);min-block-size:100vh}.n-layout-main,.n-layout-nav{background:var(--_n-layout-background-color);min-block-size:100%}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--_n-layout-nav-width);z-index:var(--n-index-nav);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{position:relative}main{padding:var(--_n-layout-padding)}.n-has-top-bar{--_n-sticky-top:var(--_n-layout-header-size)}:host([sticky]) .n-has-header{--_n-sticky-size:var(--_n-layout-header-size)}aside{position:fixed;z-index:var(--n-index-nav);inset-block:0;inset-inline-end:0;inline-size:var(--_n-layout-drawer-inline-size);max-inline-size:100%;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-nav)}@media (min-width:1240px){.n-has-drawer .n-layout-content{margin-inline-end:var(--_n-layout-drawer-inline-size)}aside{box-shadow:var(--n-box-shadow-header);border-inline-start:1px solid var(--n-color-border)}}slot[name=drawer]::slotted(*){block-size:100%!important}.n-has-top-bar aside{inset-block-start:var(--_n-layout-header-size)}:is(.n-has-top-bar,.n-has-header) ::slotted(nord-notification-group){inset-block-start:var(--_n-layout-header-size)}: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{z-index:var(--n-index-popout);transition:transform var(--_n-layout-nav-transition-duration)}[data-screen=wide]:is(:not([data-nav=opened],[data-nav=closed])) .n-layout-nav{transition:transform var(--_n-layout-nav-transition-duration);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]:not(.n-has-top-bar) .n-layout-nav{--n-navigation-header-padding-inline:calc(var(--n-space-l) / 1.5)}.n-has-top-bar[data-screen=wide][data-nav=opened] .n-layout-nav{--n-navigation-header-background:var(--n-color-accent-secondary);--n-navigation-header-color:var(--n-color-text-on-accent);--n-navigation-header-divider:none;--n-navigation-header-toggle-icon-color:rgba(255, 255, 255, 0.85);--n-navigation-header-focus-style:0 0 0 1px #fff inset,inset 0 0 0 100px rgba(255, 255, 255, 0.2);border-color:transparent;border-image-slice:1;border-image-source:linear-gradient(to bottom,rgba(255,255,255,.16) calc(var(--_n-layout-header-size) + 1px),var(--n-color-border) calc(var(--_n-layout-header-size) + 1px));background:var(--n-color-accent-secondary);box-shadow:0 0 transparent}[data-screen=wide]:not([data-nav=opened]) .n-layout-nav{--n-navigation-header-block-size:var(--_n-layout-header-size-s);overflow:hidden}[data-screen=wide][data-nav=opened] .n-layout-main{margin-inline-start:var(--_n-layout-nav-width)}[data-screen=narrow] .n-layout-main::after{content:"";position:fixed;inset:0;z-index:var(--n-index-overlay);transition:opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);background:var(--n-color-overlay)}[data-screen=narrow]:not([data-nav=opened],[data-nav=peek],[data-nav=blocked]) .n-layout-main::after{visibility:hidden;opacity:0}.n-resize{touch-action:none;position:absolute;min-block-size:100%;inset-block:0;inset-inline-end:-8px;inline-size:10px;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 var(--n-transition-slowly);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;transition-delay:.15s}@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}:host([padding=none]){--_n-layout-padding:var(--n-layout-padding, 0)}.n-top-bar-container{position:sticky;inset-block-start:0;z-index:var(--n-index-top-bar)}.n-has-top-bar{--_n-layout-header-size:var(--_n-layout-header-size-s);--n-navigation-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar :is([name=header],[name=drawer])::slotted(*){--n-header-block-size:var(--_n-layout-header-size)}.n-nav-toggle-container{position:absolute;padding-inline-start:var(--n-space-m);block-size:var(--_n-layout-header-size);display:flex;align-items:center;z-index:calc(var(--n-index-top-bar) + 1)}.n-has-top-bar .n-nav-toggle-container,:host([sticky]) .n-nav-toggle-container{position:fixed}[data-screen=wide][data-nav=opened] .n-nav-toggle-container{display:none}.n-has-nav:is([data-screen=wide]:not([data-nav=opened]),[data-screen=narrow]) ::slotted(nord-top-bar),.n-has-nav:is([data-screen=wide]:not([data-nav=opened]),[data-screen=narrow]):not(.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:calc(var(--n-space-l) * 2.1)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)){--n-button-background-color:transparent;color:rgba(255,255,255,.85)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)):focus{--n-button-background-color:rgba(0, 0, 0, 0.2)}.n-collapse-btn{--_n-collapse-btn-size:var(--n-space-l);position:fixed;inset-inline-start:calc(var(--_n-layout-nav-width) - (var(--_n-collapse-btn-size)/ 2));inset-block-start:calc(var(--_n-layout-header-size) + (var(--_n-layout-header-size) - var(--_n-collapse-btn-size))/ 2);border-radius:var(--n-border-radius-circle);block-size:var(--_n-collapse-btn-size);inline-size:var(--_n-collapse-btn-size);display:flex;align-items:center;justify-content:center;color:var(--n-color-icon);background:var(--n-color-button);box-shadow:var(--n-box-shadow-card);border:0;z-index:var(--n-index-sticky);opacity:0;visibility:hidden;cursor:pointer;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly),background-color var(--n-transition-quickly),color var(--n-transition-quickly)}.n-collapse-btn:hover{background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-collapse-btn:focus{outline:0;box-shadow:0 0 0 2px var(--n-color-accent),var(--n-box-shadow)}[data-screen=narrow] .n-collapse-btn,[data-screen=wide]:not([data-nav=opened]) .n-collapse-btn{display:none}.n-collapse-btn:focus,.n-layout-nav:hover .n-collapse-btn{opacity:1;visibility:visible}.n-rtl .n-collapse-btn nord-icon{transform:rotate(180deg)}`;f.registerIcon(v);const j=matchMedia("(min-width: 768px)"),_=function(n,e,a=JSON.stringify,t=JSON.parse){return{get value(){try{const a=localStorage.getItem(n);return a?t(a):e}catch(n){return e}},set value(e){try{localStorage.setItem(n,a(e))}catch(n){}}}}("nord-layout.navWidth",250),S=y({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 C=class extends a{constructor(){super(...arguments),this.navSlot=new g(this,"nav"),this.drawerSlot=new g(this,"drawer"),this.topBarSlot=new g(this,"top-bar"),this.headerSlot=new g(this,"header"),this.direction=new p(this),this.events=new h(this),this.lightDismiss=new u(this,{isOpen:()=>"opened"===this.navState&&!this.wideScreen,onDismiss:()=>this.navTransition("close"),isDismissible:n=>n!==this.navEl}),this.navWidth=_.value,this.isDragging=!1,this.navState=j.matches?"opened":"closed",this.wideScreen=j.matches,this.navOpen="opened"===this.navState,this.padding="m",this.sticky=!1,this.handleMediaQueryChange=()=>{this.wideScreen=j.matches,this.navTransition(this.wideScreen?"open":"close")},this.handleToggleClick=()=>{this.navTransition("toggle")},this.handleNavFocus=()=>{this.navTransition("focusin")},this.handleMainFocus=()=>{this.navTransition("focusout")},this.handleMouseEnter=()=>{this.wideScreen&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")}}get isNarrow(){return!this.wideScreen}connectedCallback(){super.connectedCallback(),this.events.listen(j,"change",this.handleMediaQueryChange)}render(){const{navWidth:n,navState:e,navSlot:a,headerSlot:i,topBarSlot:r,drawerSlot:s,isDragging:d,direction:v}=this,p="opened"===e&&this.wideScreen?n:250;return t`<div class="${l({"n-layout":!0,"n-rtl":v.isRTL,"n-dragging":d,"n-has-header":i.hasContent,"n-has-top-bar":r.hasContent,"n-has-drawer":s.hasContent,"n-has-nav":a.hasContent})}" style="${c({"--_n-layout-nav-width":`${p}px`})}" data-nav="${a.hasContent?e:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}"><div class="n-layout-nav" ?hidden="${a.isEmpty}" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav" @click="${this.handleNavClick}"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" @pointerdown="${m("opened"===e,this.startDragging)}" @pointermove="${m(d,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}" ?hidden="${this.isNarrow}"></div>${this.renderNavCollapse()}</div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleMainClick}">${a.hasContent?this.renderNavToggle():o}<div class="n-top-bar-container"><slot name="top-bar"></slot></div><div class="n-layout-content"><div class="n-sticky"><slot name="header"></slot></div><main><slot></slot></main></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}renderNavToggle(){return t`<div class="n-nav-toggle-container"><slot name="nav-toggle" @click="${this.handleToggleClick}" @mouseover="${this.handleMouseEnter}" @mouseout="${this.handleMouseLeave}"><nord-nav-toggle></nord-nav-toggle></slot></div>`}renderNavCollapse(){return t`<button class="n-collapse-btn" @click="${this.handleToggleClick}"><nord-icon name="arrow-left-small" size="s"></nord-icon></button>`}handleNavWidthChange(){_.value=this.navWidth}handleNavStateChange(n){switch("wait"===n&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===n&&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(n){this.navState=S.transition(this.navState,n)}handleNavClick(n){if(!n.defaultPrevented&&!this.wideScreen){const a=n.target;(n=>"nord-nav-item"===n.localName)(e=a)&&!e.hasSubNav&&this.navTransition("close")}var e}handleMainClick(){this.navTransition("click")}handleDropdownOpen(n){"nord-dropdown"===n.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(n){"nord-dropdown"===n.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(n){const{navWidth:e,direction:{isLTR:a}}=this;switch(n.key){case"ArrowLeft":this.setNavWidth(e+(a?-30:30));break;case"ArrowRight":this.setNavWidth(e+(a?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}n.preventDefault()}setNavWidth(n){this.navWidth=k(Math.round(n),220,400)}startDragging(n){if(0===n.button){n.target.setPointerCapture(n.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1}handleDrag(n){const e=this.direction.isRTL?this.clientWidth-n.clientX:n.clientX;this.setNavWidth(e),this.navTransition(e>=100?"open":"close")}};C.styles=[w,z,x],e([d(".n-layout-nav",!0)],C.prototype,"navEl",void 0),e([s()],C.prototype,"navWidth",void 0),e([s()],C.prototype,"isDragging",void 0),e([s()],C.prototype,"navState",void 0),e([s()],C.prototype,"wideScreen",void 0),e([r({reflect:!0,type:Boolean,attribute:"nav-open"})],C.prototype,"navOpen",void 0),e([r({reflect:!0})],C.prototype,"padding",void 0),e([r({type:Boolean,reflect:!0})],C.prototype,"sticky",void 0),e([b("navWidth","updated")],C.prototype,"handleNavWidthChange",null),e([b("navState")],C.prototype,"handleNavStateChange",null),e([b("navOpen","updated")],C.prototype,"handleOpenChange",null),C=e([i("nord-layout")],C);var T=C;export{T as default};
+import{i as n,_ as e,s as a,x as t,A as o,e as i}from"./query-assigned-elements-15485e3d.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{i as d}from"./query-2d22378e.js";import{o as l}from"./class-map-cb77ead2.js";import{o as c}from"./style-map-ed7e6cc6.js";import{l as v}from"./NavToggle-d34fed72.js";import{D as p}from"./DirectionController-f35f5476.js";import{E as h}from"./EventController-d99ebeef.js";import{L as u}from"./LightDismissController-a2645ae6.js";import{S as g}from"./SlotController-d733c575.js";import{o as b}from"./observe-a9c6dfb6.js";import{c as m}from"./cond-44672025.js";import{f as y}from"./fsm-50373df9.js";import{c as k}from"./number-c3ab3e95.js";import f from"./Icon.js";import{s as w}from"./Component-420bbc41.js";import{s as z}from"./Sticky-acc92284.js";import"./directive-de55b00a.js";import"./ref-5526fb07.js";import"./LocalizeController.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./FocusableMixin-4300e44e.js";import"./Button.js";import"./LightDomController-f78fb046.js";import"./Spinner.js";import"./if-defined-9b177db4.js";import"./InputMixin-4037827f.js";import"./VisuallyHidden.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./IconManager.js";const x=n`:host{--_n-layout-padding:var(--n-layout-padding, var(--n-space-l));--_n-layout-drawer-inline-size:var(--n-layout-drawer-inline-size, 320px);--_n-layout-background-color:var(--n-layout-background-color, var(--n-color-background));--_n-layout-nav-transition-duration:var(--n-transition-mobile);--_n-layout-header-size:var(--n-space-xxl);--_n-layout-header-size-s:calc(var(--n-space-xl) + var(--n-space-m));background:var(--_n-layout-background-color);color:var(--n-color-text);min-block-size:100vh}.n-layout-main,.n-layout-nav{background:var(--_n-layout-background-color);min-block-size:100%}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--_n-layout-nav-width);z-index:var(--n-index-nav);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{position:relative}main{padding:var(--_n-layout-padding)}.n-has-top-bar{--_n-sticky-top:var(--_n-layout-header-size)}:host([sticky]) .n-has-header{--_n-sticky-size:var(--_n-layout-header-size)}aside{position:fixed;z-index:var(--n-index-nav);inset-block:0;inset-inline-end:0;inline-size:var(--_n-layout-drawer-inline-size);max-inline-size:100%;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-nav)}@media (min-width:1240px){.n-has-drawer .n-layout-content{margin-inline-end:var(--_n-layout-drawer-inline-size)}aside{box-shadow:var(--n-box-shadow-header);border-inline-start:1px solid var(--n-color-border)}}slot[name=drawer]::slotted(*){block-size:100%!important}.n-has-top-bar aside{inset-block-start:var(--_n-layout-header-size)}:is(.n-has-top-bar,.n-has-header) ::slotted(nord-notification-group){inset-block-start:var(--_n-layout-header-size)}: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{z-index:var(--n-index-popout);transition:transform var(--_n-layout-nav-transition-duration)}[data-screen=wide]:is(:not([data-nav=opened],[data-nav=closed])) .n-layout-nav{transition:transform var(--_n-layout-nav-transition-duration);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]:not(.n-has-top-bar) .n-layout-nav{--n-navigation-header-padding-inline:calc(var(--n-space-l) / 1.5)}.n-has-top-bar[data-screen=wide][data-nav=opened] .n-layout-nav{--n-navigation-header-background:var(--n-color-accent-secondary);--n-navigation-header-color:var(--n-color-text-on-accent);--n-navigation-header-divider:none;--n-navigation-header-toggle-icon-color:rgba(255, 255, 255, 0.85);--n-navigation-header-focus-style:0 0 0 1px #fff inset,inset 0 0 0 100px rgba(255, 255, 255, 0.2);border-color:transparent;border-image-slice:1;border-image-source:linear-gradient(to bottom,rgba(255,255,255,.16) calc(var(--_n-layout-header-size) + 1px),var(--n-color-border) calc(var(--_n-layout-header-size) + 1px));background:var(--n-color-accent-secondary);box-shadow:0 0 transparent}[data-screen=wide]:not([data-nav=opened]) .n-layout-nav{--n-navigation-header-block-size:var(--_n-layout-header-size-s);overflow:hidden}[data-screen=wide][data-nav=opened] .n-layout-main{margin-inline-start:var(--_n-layout-nav-width)}[data-screen=narrow] .n-layout-main::after{content:"";position:fixed;inset:0;z-index:var(--n-index-overlay);transition:opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);background:var(--n-color-overlay)}[data-screen=narrow]:not([data-nav=opened],[data-nav=peek],[data-nav=blocked]) .n-layout-main::after{visibility:hidden;opacity:0}.n-resize{touch-action:none;position:absolute;min-block-size:100%;inset-block:0;inset-inline-end:-8px;inline-size:10px;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 var(--n-transition-slowly);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;transition-delay:.15s}@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}:host([padding=none]){--_n-layout-padding:var(--n-layout-padding, 0)}.n-top-bar-container{position:sticky;inset-block-start:0;z-index:var(--n-index-top-bar)}.n-has-top-bar{--_n-layout-header-size:var(--_n-layout-header-size-s);--n-navigation-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar :is([name=header],[name=drawer])::slotted(*){--n-header-block-size:var(--_n-layout-header-size)}.n-nav-toggle-container{position:absolute;padding-inline-start:var(--n-space-s);block-size:var(--_n-layout-header-size);display:flex;align-items:center;z-index:calc(var(--n-index-top-bar) + 1)}[data-screen=narrow] .n-nav-toggle-container{padding-inline-start:var(--n-space-xs)}.n-has-top-bar .n-nav-toggle-container,:host([sticky]) .n-nav-toggle-container{position:fixed}[data-screen=wide][data-nav=opened] .n-nav-toggle-container{display:none}.n-has-nav[data-screen=wide]:not([data-nav=opened]) ::slotted(nord-top-bar),.n-has-nav[data-screen=wide]:not([data-nav=opened],.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:calc(var(--n-space-l) * 1.8)}.n-has-nav[data-screen=narrow] ::slotted(nord-top-bar),.n-has-nav[data-screen=narrow]:not(.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:var(--n-space-xl)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)){--n-button-background-color:transparent;color:rgba(255,255,255,.85)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)):focus{--n-button-background-color:rgba(0, 0, 0, 0.2)}.n-collapse-btn{--_n-collapse-btn-size:var(--n-space-l);position:fixed;inset-inline-start:calc(var(--_n-layout-nav-width) - (var(--_n-collapse-btn-size)/ 2));inset-block-start:calc(var(--_n-layout-header-size) + (var(--_n-layout-header-size) - var(--_n-collapse-btn-size))/ 2);border-radius:var(--n-border-radius-circle);block-size:var(--_n-collapse-btn-size);inline-size:var(--_n-collapse-btn-size);display:flex;align-items:center;justify-content:center;color:var(--n-color-icon);background:var(--n-color-button);box-shadow:var(--n-box-shadow-card);border:0;z-index:var(--n-index-sticky);opacity:0;visibility:hidden;cursor:pointer;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly),background-color var(--n-transition-quickly),color var(--n-transition-quickly)}.n-collapse-btn:hover{background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-collapse-btn:focus{outline:0;box-shadow:0 0 0 2px var(--n-color-accent),var(--n-box-shadow)}[data-screen=narrow] .n-collapse-btn,[data-screen=wide]:not([data-nav=opened]) .n-collapse-btn{display:none}.n-collapse-btn:focus,.n-layout-nav:hover .n-collapse-btn{opacity:1;visibility:visible}.n-collapse-btn nord-icon{transform:rotate(180deg)}.n-rtl .n-collapse-btn nord-icon{transform:rotate(0)}`;f.registerIcon(v);const j=matchMedia("(min-width: 768px)"),_=function(n,e,a=JSON.stringify,t=JSON.parse){return{get value(){try{const a=localStorage.getItem(n);return a?t(a):e}catch(n){return e}},set value(e){try{localStorage.setItem(n,a(e))}catch(n){}}}}("nord-layout.navWidth",250),S=y({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 C=class extends a{constructor(){super(...arguments),this.navSlot=new g(this,"nav"),this.drawerSlot=new g(this,"drawer"),this.topBarSlot=new g(this,"top-bar"),this.headerSlot=new g(this,"header"),this.direction=new p(this),this.events=new h(this),this.lightDismiss=new u(this,{isOpen:()=>"opened"===this.navState&&!this.wideScreen,onDismiss:()=>this.navTransition("close"),isDismissible:n=>n!==this.navEl}),this.navWidth=_.value,this.isDragging=!1,this.navState=j.matches?"opened":"closed",this.wideScreen=j.matches,this.navOpen="opened"===this.navState,this.padding="m",this.sticky=!1,this.handleMediaQueryChange=()=>{this.wideScreen=j.matches,this.navTransition(this.wideScreen?"open":"close")},this.handleToggleClick=()=>{this.navTransition("toggle")},this.handleNavFocus=()=>{this.navTransition("focusin")},this.handleMainFocus=()=>{this.navTransition("focusout")},this.handleMouseEnter=()=>{this.wideScreen&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")}}get isNarrow(){return!this.wideScreen}connectedCallback(){super.connectedCallback(),this.events.listen(j,"change",this.handleMediaQueryChange)}render(){const{navWidth:n,navState:e,navSlot:a,headerSlot:i,topBarSlot:r,drawerSlot:s,isDragging:d,direction:v}=this,p="opened"===e&&this.wideScreen?n:250;return t`<div class="${l({"n-layout":!0,"n-rtl":v.isRTL,"n-dragging":d,"n-has-header":i.hasContent,"n-has-top-bar":r.hasContent,"n-has-drawer":s.hasContent,"n-has-nav":a.hasContent})}" style="${c({"--_n-layout-nav-width":`${p}px`})}" data-nav="${a.hasContent?e:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}"><div class="n-layout-nav" ?hidden="${a.isEmpty}" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav" @click="${this.handleNavClick}"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" @pointerdown="${m("opened"===e,this.startDragging)}" @pointermove="${m(d,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}" ?hidden="${this.isNarrow}"></div>${this.renderNavCollapse()}</div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleMainClick}">${a.hasContent?this.renderNavToggle():o}<div class="n-top-bar-container"><slot name="top-bar"></slot></div><div class="n-layout-content"><div class="n-sticky"><slot name="header"></slot></div><main><slot></slot></main></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}renderNavToggle(){return t`<div class="n-nav-toggle-container"><slot name="nav-toggle" @click="${this.handleToggleClick}" @mouseover="${this.handleMouseEnter}" @mouseout="${this.handleMouseLeave}"><nord-nav-toggle></nord-nav-toggle></slot></div>`}renderNavCollapse(){return t`<button class="n-collapse-btn" @click="${this.handleToggleClick}"><nord-icon name="navigation-toggle-lock" size="s"></nord-icon></button>`}handleNavWidthChange(){_.value=this.navWidth}handleNavStateChange(n){switch("wait"===n&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===n&&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(n){this.navState=S.transition(this.navState,n)}handleNavClick(n){if(!n.defaultPrevented&&!this.wideScreen){const a=n.target;(n=>"nord-nav-item"===n.localName)(e=a)&&!e.hasSubNav&&this.navTransition("close")}var e}handleMainClick(){this.navTransition("click")}handleDropdownOpen(n){"nord-dropdown"===n.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(n){"nord-dropdown"===n.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(n){const{navWidth:e,direction:{isLTR:a}}=this;switch(n.key){case"ArrowLeft":this.setNavWidth(e+(a?-30:30));break;case"ArrowRight":this.setNavWidth(e+(a?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}n.preventDefault()}setNavWidth(n){this.navWidth=k(Math.round(n),220,400)}startDragging(n){if(0===n.button){n.target.setPointerCapture(n.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1}handleDrag(n){const e=this.direction.isRTL?this.clientWidth-n.clientX:n.clientX;this.setNavWidth(e),this.navTransition(e>=100?"open":"close")}};C.styles=[w,z,x],e([d(".n-layout-nav",!0)],C.prototype,"navEl",void 0),e([s()],C.prototype,"navWidth",void 0),e([s()],C.prototype,"isDragging",void 0),e([s()],C.prototype,"navState",void 0),e([s()],C.prototype,"wideScreen",void 0),e([r({reflect:!0,type:Boolean,attribute:"nav-open"})],C.prototype,"navOpen",void 0),e([r({reflect:!0})],C.prototype,"padding",void 0),e([r({type:Boolean,reflect:!0})],C.prototype,"sticky",void 0),e([b("navWidth","updated")],C.prototype,"handleNavWidthChange",null),e([b("navState")],C.prototype,"handleNavStateChange",null),e([b("navOpen","updated")],C.prototype,"handleOpenChange",null),C=e([i("nord-layout")],C);var T=C;export{T as default};
 //# sourceMappingURL=Layout.js.map

package/lib/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","sources":["../src/layout/Layout.ts","../src/common/storage.ts"],"sourcesContent":["/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { styleMap } from \"lit/directives/style-map.js\"\nimport * as arrowLeftIcon from \"@nordhealth/icons/lib/assets/arrow-left-small.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.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\"\nimport type NavItem from \"../nav-item/NavItem.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport \"../nav-toggle/NavToggle.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport stickyStyle from \"../common/styles/Sticky.css\"\nimport style from \"./Layout.css\"\n\nIcon.registerIcon(arrowLeftIcon)\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\nconst isNavItem = (el: HTMLElement): el is NavItem => el.localName === \"nord-nav-item\"\nconst isNavItemLeaf = (el: HTMLElement) => isNavItem(el) && !el.hasSubNav\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 top-bar - Used to place the [Top Bar](../top-bar/) component.\n * @slot header - Used to place content inside the header section.\n * @slot drawer - Used to place additional content/details relating to a selected item.\n * @slot nav-toggle - Used to place a own nav-toggle component, for cases where you might need to add a tooltip.\n *\n * @cssprop [--n-layout-padding=var(--n-space-l)] - Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-layout-drawer-inline-size=320px] - Controls the width of the drawer area, when used.\n * @cssprop [--n-layout-background-color=var(--n-color-background)] - Controls the background color of the layout, using [color tokens](/tokens/#color).\n */\n@customElement(\"nord-layout\")\nexport default class Layout extends LitElement {\n  static styles = [componentStyle, stickyStyle, style]\n\n  private peekTimeoutId?: ReturnType<typeof setTimeout>\n\n  private navSlot = new SlotController(this, \"nav\")\n  private drawerSlot = new SlotController(this, \"drawer\")\n  private topBarSlot = new SlotController(this, \"top-bar\")\n  private headerSlot = new SlotController(this, \"header\")\n  private direction = new DirectionController(this)\n  private events = new EventController(this)\n  private lightDismiss = new LightDismissController(this, {\n    isOpen: () => this.navState === \"opened\" && !this.wideScreen,\n    onDismiss: () => this.navTransition(\"close\"),\n    isDismissible: node => node !== this.navEl,\n  })\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  @state() private wideScreen = mediaQuery.matches\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   * Controls the padding of the default main section slot. When set to “none”,\n   * the nav and header slots will still have padding.\n   */\n  @property({ reflect: true }) padding: \"m\" | \"none\" = \"m\"\n\n  /**\n   * Controls whether the layout's header has sticky positioning.\n   */\n  @property({ type: Boolean, reflect: true }) sticky: boolean = false\n\n  /**\n   * A getter whose values reflects whether the layout component considers the viewport to be narrow or not.\n   * A narrow viewport is considered to be less than 768px wide.\n   */\n  get isNarrow(): boolean {\n    return !this.wideScreen\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n  }\n\n  render() {\n    const { navWidth, navState, navSlot, headerSlot, topBarSlot, drawerSlot, isDragging, direction } = this\n    const adjustedNavWidth = navState === \"opened\" && this.wideScreen ? 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-has-header\": headerSlot.hasContent,\n          \"n-has-top-bar\": topBarSlot.hasContent,\n          \"n-has-drawer\": drawerSlot.hasContent,\n          \"n-has-nav\": navSlot.hasContent,\n        })}\n        style=${styleMap({\n          \"--_n-layout-nav-width\": `${adjustedNavWidth}px`,\n        })}\n        data-nav=${navSlot.hasContent ? navState : \"closed\"}\n        data-screen=${this.wideScreen ? \"wide\" : \"narrow\"}\n      >\n        <div\n          class=\"n-layout-nav\"\n          ?hidden=${navSlot.isEmpty}\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\" @click=${this.handleNavClick}></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            ?hidden=${this.isNarrow}\n          ></div>\n          ${this.renderNavCollapse()}\n        </div>\n\n        <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleMainClick}>\n          ${navSlot.hasContent ? this.renderNavToggle() : nothing}\n\n          <div class=\"n-top-bar-container\">\n            <slot name=\"top-bar\"></slot>\n          </div>\n\n          <div class=\"n-layout-content\">\n            <div class=\"n-sticky\">\n              <slot name=\"header\"></slot>\n            </div>\n            <main>\n              <slot></slot>\n            </main>\n          </div>\n\n          <aside ?hidden=${this.drawerSlot.isEmpty}>\n            <slot name=\"drawer\"></slot>\n          </aside>\n        </div>\n      </div>\n    `\n  }\n\n  private renderNavToggle() {\n    /* eslint-disable lit-a11y/mouse-events-have-key-events */\n    return html`\n      <div class=\"n-nav-toggle-container\">\n        <slot\n          name=\"nav-toggle\"\n          @click=${this.handleToggleClick}\n          @mouseover=${this.handleMouseEnter}\n          @mouseout=${this.handleMouseLeave}\n        >\n          <nord-nav-toggle></nord-nav-toggle>\n        </slot>\n      </div>\n    `\n    /* eslint-enable lit-a11y/mouse-events-have-key-events */\n  }\n\n  private renderNavCollapse() {\n    return html`\n      <button class=\"n-collapse-btn\" @click=${this.handleToggleClick}>\n        <nord-icon name=\"arrow-left-small\" size=\"s\"></nord-icon>\n      </button>\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 handleNavClick(e: Event) {\n    if (!e.defaultPrevented && !this.wideScreen) {\n      const target = e.target as HTMLElement\n\n      if (isNavItemLeaf(target)) {\n        this.navTransition(\"close\")\n      }\n    }\n  }\n\n  private handleMainClick() {\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.wideScreen = mediaQuery.matches\n    this.navTransition(this.wideScreen ? \"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 = () => {\n    this.navTransition(\"focusout\")\n  }\n\n  private handleMouseEnter = () => {\n    if (this.wideScreen) {\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      try {\n        const value = localStorage.getItem(key)\n        return value ? deserialize(value) : defaultValue\n      } catch {\n        return defaultValue\n      }\n    },\n\n    set value(value: T) {\n      try {\n        localStorage.setItem(key, serialize(value))\n      } catch {\n        //  nothing we can do here\n      }\n    },\n  }\n}\n"],"names":["Icon","registerIcon","arrowLeftIcon","mediaQuery","matchMedia","store","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","_a","setItem","storage","navMachine","fsm","opened","toggle","close","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","constructor","this","navSlot","SlotController","drawerSlot","topBarSlot","headerSlot","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","wideScreen","onDismiss","navTransition","isDismissible","node","navEl","navWidth","isDragging","matches","navOpen","padding","sticky","handleMediaQueryChange","handleToggleClick","handleNavFocus","handleMainFocus","handleMouseEnter","handleMouseLeave","handleTransitionEnd","isNarrow","connectedCallback","super","listen","render","adjustedNavWidth","html","classMap","isRTL","hasContent","styleMap","isEmpty","handleDropdownOpen","handleDropdownClose","handleNavClick","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","renderNavCollapse","handleMainClick","renderNavToggle","nothing","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","removeEventListener","setTimeout","addEventListener","once","handleOpenChange","setNavWidth","Math","max","event","transition","e","defaultPrevented","target","el","localName","isNavItem","hasSubNav","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","stickyStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"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"}
+{"version":3,"file":"Layout.js","sources":["../src/layout/Layout.ts","../src/common/storage.ts"],"sourcesContent":["/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { styleMap } from \"lit/directives/style-map.js\"\nimport * as lockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle-lock.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.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\"\nimport type NavItem from \"../nav-item/NavItem.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport \"../nav-toggle/NavToggle.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport stickyStyle from \"../common/styles/Sticky.css\"\nimport style from \"./Layout.css\"\n\nIcon.registerIcon(lockIcon)\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\nconst isNavItem = (el: HTMLElement): el is NavItem => el.localName === \"nord-nav-item\"\nconst isNavItemLeaf = (el: HTMLElement) => isNavItem(el) && !el.hasSubNav\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 top-bar - Used to place the [Top Bar](../top-bar/) component.\n * @slot header - Used to place content inside the header section.\n * @slot drawer - Used to place additional content/details relating to a selected item.\n * @slot nav-toggle - Used to place a own nav-toggle component, for cases where you might need to add a tooltip.\n *\n * @cssprop [--n-layout-padding=var(--n-space-l)] - Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-layout-drawer-inline-size=320px] - Controls the width of the drawer area, when used.\n * @cssprop [--n-layout-background-color=var(--n-color-background)] - Controls the background color of the layout, using [color tokens](/tokens/#color).\n */\n@customElement(\"nord-layout\")\nexport default class Layout extends LitElement {\n  static styles = [componentStyle, stickyStyle, style]\n\n  private peekTimeoutId?: ReturnType<typeof setTimeout>\n\n  private navSlot = new SlotController(this, \"nav\")\n  private drawerSlot = new SlotController(this, \"drawer\")\n  private topBarSlot = new SlotController(this, \"top-bar\")\n  private headerSlot = new SlotController(this, \"header\")\n  private direction = new DirectionController(this)\n  private events = new EventController(this)\n  private lightDismiss = new LightDismissController(this, {\n    isOpen: () => this.navState === \"opened\" && !this.wideScreen,\n    onDismiss: () => this.navTransition(\"close\"),\n    isDismissible: node => node !== this.navEl,\n  })\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  @state() private wideScreen = mediaQuery.matches\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   * Controls the padding of the default main section slot. When set to “none”,\n   * the nav and header slots will still have padding.\n   */\n  @property({ reflect: true }) padding: \"m\" | \"none\" = \"m\"\n\n  /**\n   * Controls whether the layout's header has sticky positioning.\n   */\n  @property({ type: Boolean, reflect: true }) sticky: boolean = false\n\n  /**\n   * A getter whose values reflects whether the layout component considers the viewport to be narrow or not.\n   * A narrow viewport is considered to be less than 768px wide.\n   */\n  get isNarrow(): boolean {\n    return !this.wideScreen\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n  }\n\n  render() {\n    const { navWidth, navState, navSlot, headerSlot, topBarSlot, drawerSlot, isDragging, direction } = this\n    const adjustedNavWidth = navState === \"opened\" && this.wideScreen ? 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-has-header\": headerSlot.hasContent,\n          \"n-has-top-bar\": topBarSlot.hasContent,\n          \"n-has-drawer\": drawerSlot.hasContent,\n          \"n-has-nav\": navSlot.hasContent,\n        })}\n        style=${styleMap({\n          \"--_n-layout-nav-width\": `${adjustedNavWidth}px`,\n        })}\n        data-nav=${navSlot.hasContent ? navState : \"closed\"}\n        data-screen=${this.wideScreen ? \"wide\" : \"narrow\"}\n      >\n        <div\n          class=\"n-layout-nav\"\n          ?hidden=${navSlot.isEmpty}\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\" @click=${this.handleNavClick}></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            ?hidden=${this.isNarrow}\n          ></div>\n          ${this.renderNavCollapse()}\n        </div>\n\n        <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleMainClick}>\n          ${navSlot.hasContent ? this.renderNavToggle() : nothing}\n\n          <div class=\"n-top-bar-container\">\n            <slot name=\"top-bar\"></slot>\n          </div>\n\n          <div class=\"n-layout-content\">\n            <div class=\"n-sticky\">\n              <slot name=\"header\"></slot>\n            </div>\n            <main>\n              <slot></slot>\n            </main>\n          </div>\n\n          <aside ?hidden=${this.drawerSlot.isEmpty}>\n            <slot name=\"drawer\"></slot>\n          </aside>\n        </div>\n      </div>\n    `\n  }\n\n  private renderNavToggle() {\n    /* eslint-disable lit-a11y/mouse-events-have-key-events */\n    return html`\n      <div class=\"n-nav-toggle-container\">\n        <slot\n          name=\"nav-toggle\"\n          @click=${this.handleToggleClick}\n          @mouseover=${this.handleMouseEnter}\n          @mouseout=${this.handleMouseLeave}\n        >\n          <nord-nav-toggle></nord-nav-toggle>\n        </slot>\n      </div>\n    `\n    /* eslint-enable lit-a11y/mouse-events-have-key-events */\n  }\n\n  private renderNavCollapse() {\n    return html`\n      <button class=\"n-collapse-btn\" @click=${this.handleToggleClick}>\n        <nord-icon name=\"navigation-toggle-lock\" size=\"s\"></nord-icon>\n      </button>\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 handleNavClick(e: Event) {\n    if (!e.defaultPrevented && !this.wideScreen) {\n      const target = e.target as HTMLElement\n\n      if (isNavItemLeaf(target)) {\n        this.navTransition(\"close\")\n      }\n    }\n  }\n\n  private handleMainClick() {\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.wideScreen = mediaQuery.matches\n    this.navTransition(this.wideScreen ? \"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 = () => {\n    this.navTransition(\"focusout\")\n  }\n\n  private handleMouseEnter = () => {\n    if (this.wideScreen) {\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      try {\n        const value = localStorage.getItem(key)\n        return value ? deserialize(value) : defaultValue\n      } catch {\n        return defaultValue\n      }\n    },\n\n    set value(value: T) {\n      try {\n        localStorage.setItem(key, serialize(value))\n      } catch {\n        //  nothing we can do here\n      }\n    },\n  }\n}\n"],"names":["Icon","registerIcon","lockIcon","mediaQuery","matchMedia","store","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","_a","setItem","storage","navMachine","fsm","opened","toggle","close","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","constructor","this","navSlot","SlotController","drawerSlot","topBarSlot","headerSlot","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","wideScreen","onDismiss","navTransition","isDismissible","node","navEl","navWidth","isDragging","matches","navOpen","padding","sticky","handleMediaQueryChange","handleToggleClick","handleNavFocus","handleMainFocus","handleMouseEnter","handleMouseLeave","handleTransitionEnd","isNarrow","connectedCallback","super","listen","render","adjustedNavWidth","html","classMap","isRTL","hasContent","styleMap","isEmpty","handleDropdownOpen","handleDropdownClose","handleNavClick","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","renderNavCollapse","handleMainClick","renderNavToggle","nothing","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","removeEventListener","setTimeout","addEventListener","once","handleOpenChange","setNavWidth","Math","max","event","transition","e","defaultPrevented","target","el","localName","isNavItem","hasSubNav","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","stickyStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"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"}

package/lib/{LightDomController-5c53b3f4.js → LightDomController-f78fb046.js}

@@ -1,2 +1,2 @@
-import{B as t,A as s}from"./query-assigned-elements-2f8275b7.js";class o{constructor(t,s){this.host=t,this.options=s,t.addController(this)}get container(){return this.options.container||this.host}hostUpdated(){this.render()}hostDisconnected(){t(s,this.container,this.options.renderOptions)}render(){t(this.options.render(),this.container,this.options.renderOptions)}}export{o as L};
-//# sourceMappingURL=LightDomController-5c53b3f4.js.map
+import{B as t,A as s}from"./query-assigned-elements-15485e3d.js";class o{constructor(t,s){this.host=t,this.options=s,t.addController(this)}get container(){return this.options.container||this.host}hostUpdated(){this.render()}hostDisconnected(){t(s,this.container,this.options.renderOptions)}render(){t(this.options.render(),this.container,this.options.renderOptions)}}export{o as L};
+//# sourceMappingURL=LightDomController-f78fb046.js.map

package/lib/{LightDomController-5c53b3f4.js.map → LightDomController-f78fb046.js.map}

@@ -1 +1 @@
-{"version":3,"file":"LightDomController-5c53b3f4.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":"uEAQaA,EACXC,YAAoBC,EAAoDC,GAApDC,KAAIF,KAAJA,EAAoDE,KAAOD,QAAPA,EACtED,EAAKG,cAAcD,KACpB,CAEWE,gBACV,OAAOF,KAAKD,QAAQG,WAAaF,KAAKF,IACvC,CAEDK,cACEH,KAAKI,QACN,CAEDC,mBACED,EAAOE,EAASN,KAAKE,UAAWF,KAAKD,QAAQQ,cAC9C,CAEOH,SACNA,EAAOJ,KAAKD,QAAQK,SAAUJ,KAAKE,UAAWF,KAAKD,QAAQQ,cAC5D"}
+{"version":3,"file":"LightDomController-f78fb046.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":"uEAQaA,EACXC,YAAoBC,EAAoDC,GAApDC,KAAIF,KAAJA,EAAoDE,KAAOD,QAAPA,EACtED,EAAKG,cAAcD,KACpB,CAEWE,gBACV,OAAOF,KAAKD,QAAQG,WAAaF,KAAKF,IACvC,CAEDK,cACEH,KAAKI,QACN,CAEDC,mBACED,EAAOE,EAASN,KAAKE,UAAWF,KAAKD,QAAQQ,cAC9C,CAEOH,SACNA,EAAOJ,KAAKD,QAAQK,SAAUJ,KAAKE,UAAWF,KAAKD,QAAQQ,cAC5D"}

package/lib/LocalizeController.js

@@ -1,2 +1,2 @@
-import{resolveTranslation as n,subscribe as o}from"./translation.js";import t from"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";const s=()=>{};class i{constructor(o,t={onLangChange:s}){this.host=o,this.options=t,this.handleLangChange=()=>{const o=n(this.lang);this.resolvedTranslation!==o&&(this.resolvedTranslation=o,this.options.onLangChange(),this.host.requestUpdate())},o.addController(this),this.resolvedTranslation=n(this.lang)}get lang(){return this.host.lang||document.documentElement.lang}get resolvedLang(){return this.resolvedTranslation.$lang}hostConnected(){this.unsubscribe=o(this.handleLangChange),this.options.onLangChange()}hostDisconnected(){var n;null===(n=this.unsubscribe)||void 0===n||n.call(this)}term(n,...o){var s,i;const{resolvedTranslation:a,resolvedLang:l}=this,e=this.host.localName;null==a[e]?console.warn(`NORD: Missing translations for component \`${e}\` in lang: \`${l}\``):null==a[e][n]&&console.warn(`NORD: Missing translation key \`${String(n)}\` for component \`${e}\` in lang \`${l}\``);const r=null!==(i=null===(s=a[e])||void 0===s?void 0:s[n])&&void 0!==i?i:t[e][n];return"function"==typeof r?r(...o):r}}export{i as LocalizeController};
+import{resolveTranslation as n,subscribe as o}from"./translation.js";import t from"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";const s=()=>{};class i{constructor(o,t={onLangChange:s}){this.host=o,this.options=t,this.handleLangChange=()=>{const o=n(this.lang);this.resolvedTranslation!==o&&(this.resolvedTranslation=o,this.options.onLangChange(),this.host.requestUpdate())},o.addController(this),this.resolvedTranslation=n(this.lang)}get lang(){return this.host.lang||document.documentElement.lang}get resolvedLang(){return this.resolvedTranslation.$lang}hostConnected(){this.unsubscribe=o(this.handleLangChange),this.options.onLangChange()}hostDisconnected(){var n;null===(n=this.unsubscribe)||void 0===n||n.call(this)}term(n,...o){var s,i;const{resolvedTranslation:a,resolvedLang:l}=this,e=this.host.localName;null==a[e]?console.warn(`NORD: Missing translations for component \`${e}\` in lang: \`${l}\``):null==a[e][n]&&console.warn(`NORD: Missing translation key \`${String(n)}\` for component \`${e}\` in lang \`${l}\``);const r=null!==(i=null===(s=a[e])||void 0===s?void 0:s[n])&&void 0!==i?i:t[e][n];return"function"==typeof r?r(...o):r}}export{i 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, fallback } 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 { resolvedTranslation, resolvedLang } = this\n    const component = this.host.localName as TComponentName\n\n    /* eslint-disable no-console */\n    if (resolvedTranslation[component] == null) {\n      console.warn(`NORD: Missing translations for component \\`${component}\\` in lang: \\`${resolvedLang}\\``)\n    } else if (resolvedTranslation[component][key] == null) {\n      console.warn(\n        `NORD: Missing translation key \\`${String(key)}\\` for component \\`${component}\\` in lang \\`${resolvedLang}\\``\n      )\n    }\n    /* eslint-enable no-console */\n\n    const t = resolvedTranslation[component]?.[key] ?? fallback[component][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","component","localName","console","warn","String","t","_b","fallback"],"mappings":"2RAcA,MAAMA,EAAO,aAIAC,EAMXC,YAAoBC,EAAoDC,EAAU,CAAEC,aAAcL,IAA9EM,KAAIH,KAAJA,EAAoDG,KAAOF,QAAPA,EAkDhEE,KAAgBC,iBAAG,KACzB,MAAMC,EAAWC,EAAmBH,KAAKI,MAErCJ,KAAKK,sBAAwBH,IAC/BF,KAAKK,oBAAsBH,EAE3BF,KAAKF,QAAQC,eACbC,KAAKH,KAAKS,gBACX,EAzDDT,EAAKU,cAAcP,MACnBA,KAAKK,oBAAsBF,EAAmBH,KAAKI,KACpD,CAKGA,WACF,OAAOJ,KAAKH,KAAKO,MAAQI,SAASC,gBAAgBL,IACnD,CAMGM,mBACF,OAAOV,KAAKK,oBAAoBM,KACjC,CAEDC,gBACEZ,KAAKa,YAAcC,EAAUd,KAAKC,kBAClCD,KAAKF,QAAQC,cACd,CAEDgB,yBACkB,QAAhBC,EAAAhB,KAAKa,mBAAW,IAAAG,GAAAA,EAAAC,KAAAjB,KACjB,CAEDkB,KACEC,KACGC,WAEH,MAAMf,oBAAEA,EAAmBK,aAAEA,GAAiBV,KACxCqB,EAAYrB,KAAKH,KAAKyB,UAGU,MAAlCjB,EAAoBgB,GACtBE,QAAQC,KAAK,8CAA8CH,kBAA0BX,OACrC,MAAvCL,EAAoBgB,GAAWF,IACxCI,QAAQC,KACN,mCAAmCC,OAAON,wBAA0BE,iBAAyBX,OAKjG,MAAMgB,EAAyC,QAArCC,EAA8B,UAA9BtB,EAAoBgB,UAAU,IAAAL,OAAA,EAAAA,EAAGG,UAAI,IAAAQ,EAAAA,EAAIC,EAASP,GAAWF,GACvE,MAAoB,mBAANO,EAAmBA,KAAKN,GAAQM,CAC/C"}
+{"version":3,"file":"LocalizeController.js","sources":["../src/localization/LocalizeController.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { subscribe, resolveTranslation, Translation, WellKnownKeys, fallback } 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 { resolvedTranslation, resolvedLang } = this\n    const component = this.host.localName as TComponentName\n\n    /* eslint-disable no-console */\n    if (resolvedTranslation[component] == null) {\n      console.warn(`NORD: Missing translations for component \\`${component}\\` in lang: \\`${resolvedLang}\\``)\n    } else if (resolvedTranslation[component][key] == null) {\n      console.warn(\n        `NORD: Missing translation key \\`${String(key)}\\` for component \\`${component}\\` in lang \\`${resolvedLang}\\``\n      )\n    }\n    /* eslint-enable no-console */\n\n    const t = resolvedTranslation[component]?.[key] ?? fallback[component][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","component","localName","console","warn","String","t","_b","fallback"],"mappings":"sTAcA,MAAMA,EAAO,aAIAC,EAMXC,YAAoBC,EAAoDC,EAAU,CAAEC,aAAcL,IAA9EM,KAAIH,KAAJA,EAAoDG,KAAOF,QAAPA,EAkDhEE,KAAgBC,iBAAG,KACzB,MAAMC,EAAWC,EAAmBH,KAAKI,MAErCJ,KAAKK,sBAAwBH,IAC/BF,KAAKK,oBAAsBH,EAE3BF,KAAKF,QAAQC,eACbC,KAAKH,KAAKS,gBACX,EAzDDT,EAAKU,cAAcP,MACnBA,KAAKK,oBAAsBF,EAAmBH,KAAKI,KACpD,CAKGA,WACF,OAAOJ,KAAKH,KAAKO,MAAQI,SAASC,gBAAgBL,IACnD,CAMGM,mBACF,OAAOV,KAAKK,oBAAoBM,KACjC,CAEDC,gBACEZ,KAAKa,YAAcC,EAAUd,KAAKC,kBAClCD,KAAKF,QAAQC,cACd,CAEDgB,yBACkB,QAAhBC,EAAAhB,KAAKa,mBAAW,IAAAG,GAAAA,EAAAC,KAAAjB,KACjB,CAEDkB,KACEC,KACGC,WAEH,MAAMf,oBAAEA,EAAmBK,aAAEA,GAAiBV,KACxCqB,EAAYrB,KAAKH,KAAKyB,UAGU,MAAlCjB,EAAoBgB,GACtBE,QAAQC,KAAK,8CAA8CH,kBAA0BX,OACrC,MAAvCL,EAAoBgB,GAAWF,IACxCI,QAAQC,KACN,mCAAmCC,OAAON,wBAA0BE,iBAAyBX,OAKjG,MAAMgB,EAAyC,QAArCC,EAA8B,UAA9BtB,EAAoBgB,UAAU,IAAAL,OAAA,EAAAA,EAAGG,UAAI,IAAAQ,EAAAA,EAAIC,EAASP,GAAWF,GACvE,MAAoB,mBAANO,EAAmBA,KAAKN,GAAQM,CAC/C"}

package/lib/Message.js

@@ -0,0 +1,2 @@
+import{i as e,_ as o,x as r,e as t,s as i}from"./query-assigned-elements-15485e3d.js";import{e as n}from"./property-03f59dce.js";import{l as s}from"./if-defined-9b177db4.js";import{n as a}from"./ref-5526fb07.js";import{F as l}from"./FocusableMixin-4300e44e.js";import{s as c}from"./Component-420bbc41.js";import{s as d}from"./DropdownItem-a9bf32f4.js";import{LocalizeController as m}from"./LocalizeController.js";import"./directive-de55b00a.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";const p=e`:host{--_n-message-border-color:var(--n-message-border-color, var(--n-color-border));padding:var(--n-space-s);border-block-end:1px solid var(--_n-message-border-color)}.n-message{flex-direction:column;gap:var(--n-space-xs);align-items:flex-start;padding-inline-start:var(--n-space-xl);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);line-height:var(--n-line-height-heading);margin:0;color:var(--n-color-text);position:relative}slot[name=footer]{font-size:var(--n-font-size-s);font-weight:var(--n-font-weight);color:var(--n-color-text-weaker);line-height:var(--n-line-height-heading)}:host([highlight]) .n-message::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--n-index-deep);border-radius:var(--n-border-radius-s);block-size:100%;inline-size:100%;opacity:.15;background:var(--n-color-accent);filter:brightness(150%)}.n-unread{position:absolute;min-inline-size:var(--n-size-icon-xxs);min-block-size:var(--n-size-icon-xxs);inset-block-start:calc(var(--n-space-s) + var(--n-space-xs));inset-inline-start:var(--n-space-m);background:var(--n-color-accent);border-radius:var(--n-border-radius-circle)}.n-message:hover .n-unread{background:var(--n-color-text-on-accent)}`;let f=class extends(l(i)){constructor(){super(...arguments),this.localize=new m(this)}render(){return(this.href?e=>r`<a href="${s(this.href)}" ${a(this.focusableRef)} class="n-dropdown-item n-message">${e}</a>`:e=>r`<button ${a(this.focusableRef)} class="n-dropdown-item n-message">${e}</button>`)(r`<div role="img" class="n-unread" aria-label="${this.localize.term("unreadLabel")}" ?hidden="${!this.unread}"></div><slot></slot><slot name="footer"></slot>`)}};f.styles=[c,d,p],o([n({reflect:!0})],f.prototype,"href",void 0),o([n({reflect:!0,type:Boolean})],f.prototype,"highlight",void 0),o([n({reflect:!0,type:Boolean})],f.prototype,"unread",void 0),f=o([t("nord-message")],f);var h=f;export{h as default};
+//# sourceMappingURL=Message.js.map

package/lib/Message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Message.js","sources":["../src/message/Message.ts"],"sourcesContent":["import { LitElement, html, TemplateResult } 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 { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport itemStyle from \"../dropdown-item/DropdownItem.css\"\nimport style from \"./Message.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\n/**\n * Message represents a specific item within a collection,\n * such as notifications, tasks or conversations. Message\n * can be placed directly inside a dropdown component.\n *\n * @status draft\n * @category action\n * @slot - The message content.\n * @slot footer - Used to place content after the message. Typically used for a timestamp.\n *\n * @cssprop [--n-message-border-color=var(--n-color-border)] - Controls the border color of the message, using our [color tokens](/tokens/#color).\n *\n * @localization unreadLabel - Label for the unread messages.\n */\n@customElement(\"nord-message\")\nexport default class Message extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, itemStyle, style]\n\n  private localize = new LocalizeController<\"nord-message\">(this)\n\n  /**\n   * The url the message should link to.\n   */\n  @property({ reflect: true }) href?: string\n\n  /**\n   * Highlight the message visually. This is meant for highlighting\n   * a new message that just appeared. Highlight style should be removed\n   * after the user has seen the message and there’s been a timeout of\n   * e.g. 30 seconds.\n   */\n  @property({ reflect: true, type: Boolean }) highlight?: boolean\n\n  /**\n   * Mark the message as unread. By default messages are read.\n   */\n  @property({ reflect: true, type: Boolean }) unread?: boolean\n\n  // TODO: dropdown-item and message component have the same logic\n  // for determining if it renders a link vs button. Perhaps we\n  // can later see if both can use a mixin or similar instead?\n  render() {\n    const link = (content: TemplateResult) =>\n      html`<a href=${ifDefined(this.href)} ${ref(this.focusableRef)} class=\"n-dropdown-item n-message\">${content}</a>`\n    const button = (content: TemplateResult) =>\n      html`<button ${ref(this.focusableRef)} class=\"n-dropdown-item n-message\">${content}</button>`\n\n    const container = this.href ? link : button\n\n    return container(html`\n      <div role=\"img\" class=\"n-unread\" aria-label=${this.localize.term(\"unreadLabel\")} ?hidden=${!this.unread}></div>\n      <slot></slot>\n      <slot name=\"footer\"></slot>\n    `)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-message\": Message\n  }\n}\n"],"names":["Message","FocusableMixin","LitElement","constructor","this","localize","LocalizeController","render","href","content","html","ifDefined","ref","focusableRef","term","unread","styles","componentStyle","itemStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"k5DA0BA,IAAqBA,EAArB,cAAqCC,EAAeC,IAApDC,kCAGUC,KAAAC,SAAW,IAAIC,EAAmCF,KAqC3D,CAdCG,SAQE,OAFkBH,KAAKI,KALTC,GACZC,CAAI,YAAWC,EAAUP,KAAKI,UAASI,EAAIR,KAAKS,mDAAmDJ,QACrFA,GACdC,CAAI,WAAWE,EAAIR,KAAKS,mDAAmDJ,cAI5DC,CAAI,gDAC2BN,KAAKC,SAASS,KAAK,6BAA2BV,KAAKW,yDAIpG,GAtCMf,EAAMgB,OAAG,CAACC,EAAgBC,EAAWC,GAOfC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAqBtB,EAAAuB,UAAA,YAAA,GAQEH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAA8BzB,EAAAuB,UAAA,iBAAA,GAKnBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAA2BzB,EAAAuB,UAAA,cAAA,GArBzCvB,EAAOoB,EAAA,CAD3BM,EAAc,iBACM1B,SAAAA"}

package/lib/Modal.js

@@ -1,2 +1,2 @@
-import{i as o,s as e,_ as a,x as n,e as i}from"./query-assigned-elements-2f8275b7.js";import{e as t}from"./property-03f59dce.js";import{i as s}from"./query-2d22378e.js";import{c as l}from"./interface-close-small-f26b0299.js";import r from"./Icon.js";import{S as d}from"./SlotController-d733c575.js";import{o as c}from"./observe-a9c6dfb6.js";import{N as p}from"./events-d9666e88.js";import{s as m}from"./Component-253ecb24.js";import{LocalizeController as v}from"./LocalizeController.js";import{ModalController as h}from"./ModalController.js";import"./state-70f38ceb.js";import"./if-defined-10508457.js";import"./directive-de55b00a.js";import"./cond-77258def.js";import"./IconManager.js";import"./EventController-d99ebeef.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./LightDismissController-a2645ae6.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./ScrollbarController-773c79f4.js";const b=o`:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-padding-block:var(--n-modal-padding-block, var(--n-space-m));--_n-modal-focus-ring:0 0 0 2px var(--n-color-accent);--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 620px);color:var(--n-color-text);position:fixed;inset:0;visibility:hidden;transition:visibility var(--n-transition-slowly);z-index:var(--n-index-modal)}: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;display:flex;flex-direction:column;inline-size:100%;max-inline-size:var(--_n-modal-max-inline-size);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-header);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{box-shadow:none}.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-modal-padding-inline, var(--n-space-l))}:host([size="s"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 440px)}:host([size="l"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 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:var(--n-space-xs);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}`;r.registerIcon(l);let f=class extends e{constructor(){super(...arguments),this.headerSlot=new d(this,"header"),this.featureSlot=new d(this,"feature"),this.footerSlot=new d(this,"footer"),this.localize=new v(this),this.modalController=new h(this,{isOpen:()=>this.open,onDismiss:()=>this.handleDismiss(),dialog:()=>this.modal,backdrop:()=>this.backdrop,close:o=>this.close(o)}),this.open=!1,this.size="m",this.returnValue="",this.scrollable=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog"),this.setAttribute("aria-modal","true")}showModal(){this.open=!0}close(o){this.open=!1,null!=o&&(this.returnValue=o),this.dispatchEvent(new p("close"))}focus(o){this.modal.focus({preventScroll:!0,...o})}render(){return n`<div class="n-modal-backdrop"><div class="n-modal" tabindex="0"><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(o){this.open?this.modalController.block():!0===o&&this.modalController.unblock()}handleDismiss(){this.dispatchEvent(new p("cancel",{cancelable:!0}))&&this.close()}};f.styles=[m,b],f.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},a([s(".n-modal",!0)],f.prototype,"modal",void 0),a([s(".n-modal-backdrop",!0)],f.prototype,"backdrop",void 0),a([t({type:Boolean,reflect:!0})],f.prototype,"open",void 0),a([t({reflect:!0})],f.prototype,"size",void 0),a([t({attribute:!1})],f.prototype,"returnValue",void 0),a([t({type:Boolean,reflect:!0})],f.prototype,"scrollable",void 0),a([c("open","updated")],f.prototype,"handleOpenUpdated",null),f=a([i("nord-modal")],f);var u=f;export{u as default};
+import{i as o,s as e,_ as a,x as n,e as i}from"./query-assigned-elements-15485e3d.js";import{e as t}from"./property-03f59dce.js";import{i as s}from"./query-2d22378e.js";import{c as l}from"./interface-close-small-f26b0299.js";import r from"./Icon.js";import{S as d}from"./SlotController-d733c575.js";import{o as c}from"./observe-a9c6dfb6.js";import{N as p}from"./events-d9666e88.js";import{s as m}from"./Component-420bbc41.js";import{LocalizeController as v}from"./LocalizeController.js";import{ModalController as h}from"./ModalController.js";import"./state-70f38ceb.js";import"./if-defined-9b177db4.js";import"./directive-de55b00a.js";import"./cond-44672025.js";import"./IconManager.js";import"./EventController-d99ebeef.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./LightDismissController-a2645ae6.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./ScrollbarController-773c79f4.js";const b=o`:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-padding-block:var(--n-modal-padding-block, var(--n-space-m));--_n-modal-focus-ring:0 0 0 2px var(--n-color-accent);--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 620px);color:var(--n-color-text);position:fixed;inset:0;visibility:hidden;transition:visibility var(--n-transition-slowly);z-index:var(--n-index-modal)}: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;display:flex;flex-direction:column;inline-size:100%;max-inline-size:var(--_n-modal-max-inline-size);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-header);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{box-shadow:none}.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-modal-padding-inline, var(--n-space-l))}:host([size="s"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 440px)}:host([size="l"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 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:var(--n-space-xs);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}`;r.registerIcon(l);let f=class extends e{constructor(){super(...arguments),this.headerSlot=new d(this,"header"),this.featureSlot=new d(this,"feature"),this.footerSlot=new d(this,"footer"),this.localize=new v(this),this.modalController=new h(this,{isOpen:()=>this.open,onDismiss:()=>this.handleDismiss(),dialog:()=>this.modal,backdrop:()=>this.backdrop,close:o=>this.close(o)}),this.open=!1,this.size="m",this.returnValue="",this.scrollable=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog"),this.setAttribute("aria-modal","true")}showModal(){this.open=!0}close(o){this.open=!1,null!=o&&(this.returnValue=o),this.dispatchEvent(new p("close"))}focus(o){this.modal.focus({preventScroll:!0,...o})}render(){return n`<div class="n-modal-backdrop"><div class="n-modal" tabindex="0"><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(o){this.open?this.modalController.block():!0===o&&this.modalController.unblock()}handleDismiss(){this.dispatchEvent(new p("cancel",{cancelable:!0}))&&this.close()}};f.styles=[m,b],f.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},a([s(".n-modal",!0)],f.prototype,"modal",void 0),a([s(".n-modal-backdrop",!0)],f.prototype,"backdrop",void 0),a([t({type:Boolean,reflect:!0})],f.prototype,"open",void 0),a([t({reflect:!0})],f.prototype,"size",void 0),a([t({attribute:!1})],f.prototype,"returnValue",void 0),a([t({type:Boolean,reflect:!0})],f.prototype,"scrollable",void 0),a([c("open","updated")],f.prototype,"handleOpenUpdated",null),f=a([i("nord-modal")],f);var u=f;export{u as default};
 //# sourceMappingURL=Modal.js.map