@felleslosninger/minid-elements 0.0.140 → 0.1.1

package/dist/components/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sources":["../../src/components/dialog.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport { styled } from '../mixins/tailwind.mixin';\nimport './icon/icon.component';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { animateTo, stopAnimations } from '../internal/animate';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../internal/scroll';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-dialog': MinidDialog;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      --width: 40rem;\n      display: block;\n    }\n  `,\n];\n\n/**\n *\n * @event mid-show - Emitted when the dialog opens.\n * @event mid-after-show - Emitted after the dialog opens and all animations are complete.\n * @event mid-hide - Emitted when the dialog closes.\n * @event mid-after-hide - Emitted after the dialog closes and all animations are complete.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} mid-request-close - Emitted when the user attempts to\n *   close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling\n *   `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in\n *   destructive behavior such as data loss.\n *\n * @csspart base - Select the base `dialog` element\n * @csspart header - Select the `header` element\n * @csspart body - Select the `article` element\n * @csspart footer - Select the `footer` element\n *\n * @slot -- The default slot for the body content of the dialog\n * @slot heading - The content inside the `h2` element\n * @slot footer - The content inside the `footer` element\n *\n * @animation dialog.show - The animation to use when showing the dialog.\n * @animation dialog.hide - The animation to use when hiding the dialog.\n * @animation dialog.denyClose - The animation to use when closing the dialog is prevented.\n *\n */\n@customElement('mid-dialog')\nexport class MinidDialog extends styled(LitElement, styles) {\n  @query('#dialog')\n  dialog!: HTMLDialogElement;\n\n  /**\n   * Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * The dialog's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n   */\n  @property({ reflect: true })\n  heading = '';\n\n  private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {\n    const requestCloseEvent = new CustomEvent('mid-request-close', {\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n      detail: { source },\n    });\n    this.dispatchEvent(requestCloseEvent);\n\n    if (requestCloseEvent.defaultPrevented) {\n      const { keyframes, options } = getAnimation(this, 'dialog.denyClose');\n      animateTo(this.dialog, keyframes, options);\n      return;\n    }\n\n    this.hide();\n  }\n\n  handleDialogCancel = (event: Event) => {\n    event.preventDefault();\n\n    if (event.defaultPrevented) {\n      this.requestClose('keyboard');\n    } else {\n      this.hide();\n    }\n  };\n\n  private handleBackdropClick({ target }: Event) {\n    // if the target is the dialog, the backdrop was clicked\n    if (target === this.dialog) {\n      this.requestClose('overlay');\n    }\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.dispatchEvent(\n        new Event('mid-show', { composed: true, bubbles: true })\n      );\n      // this.addOpenListeners();\n      this.dialog.showModal();\n\n      lockBodyScrolling(this);\n\n      const panelAnimation = getAnimation(this, 'dialog.show');\n      await animateTo(\n        this.dialog,\n        panelAnimation.keyframes,\n        panelAnimation.options\n      ),\n        this.dispatchEvent(\n          new Event('mid-after-show', { bubbles: true, composed: true })\n        );\n    } else {\n      // Hide\n      this.dispatchEvent(\n        new Event('mid-hide', { bubbles: true, composed: true })\n      );\n\n      await Promise.all([stopAnimations(this.dialog)]);\n      const panelAnimation = getAnimation(this, 'dialog.hide');\n\n      // The backdrop can only be animated with css because it's a pseudo element\n      // so we add a animation class to trigger it at the same time as the dialog animation\n      this.dialog.classList.add('backdrop:animate-fade-out');\n      await animateTo(\n        this.dialog,\n        panelAnimation.keyframes,\n        panelAnimation.options\n      );\n      this.dialog.classList.remove('backdrop:animate-fade-out');\n      this.dialog.close();\n      this.dialog.hidden = false;\n      unlockBodyScrolling(this);\n      this.dispatchEvent(\n        new Event('mid-after-hide', { composed: true, bubbles: true })\n      );\n    }\n  }\n\n  /**\n   * Shows the dialog.\n   */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'mid-after-show');\n  }\n\n  /**\n   * Hides the dialog\n   */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'mid-after-hide');\n  }\n\n  override render() {\n    return html`\n      <dialog\n        part=\"base\"\n        id=\"dialog\"\n        class=\"text-neutral m-auto max-h-[calc(100%---spacing(8))] w-(--width) max-w-[calc(100%---spacing(8))] flex-col rounded-lg p-6 shadow-xl backdrop:bg-black/50 open:flex open:animate-none\"\n        @cancel=${this.handleDialogCancel}\n        @click=${this.handleBackdropClick}\n      >\n        <header part=\"header\" class=\"text-heading-sm flex justify-between\">\n          <slot name=\"heading\"></slot>\n          <div class=\"h-0\">\n            <button\n              autofocus\n              @click=\"${() => this.requestClose('close-button')}\"\n              class=\"text-body-md focus-visible:focus-ring text-neutral hover:bg-neutral-surface-hover float-right flex size-12 translate-x-3 -translate-y-3 items-center justify-center rounded\"\n            >\n              <mid-icon class=\"size-6\" name=\"xmark\"></mid-icon>\n            </button>\n          </div>\n        </header>\n        <div part=\"body\" class=\"overflow-auto\">\n          <slot> </slot>\n        </div>\n        <footer part=\"footer\">\n          <slot name=\"footer\"> </slot>\n        </footer>\n      </dialog>\n    `;\n  }\n}\n\nsetDefaultAnimation('dialog.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.8 },\n    { opacity: 1, scale: 1 },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('dialog.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('dialog.denyClose', {\n  keyframes: [{ scale: 1 }, { scale: 1.03 }, { scale: 1 }],\n  options: { duration: 100 },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"dialog.js","sources":["../../src/components/dialog.component.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { getLang } from '../utilities/lang';\nimport { getTranslations } from '../utilities/translations';\nimport { LangController } from '../controllers/lang.controller.js';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport { styled } from '../mixins/tailwind.mixin';\nimport './icon/icon.component';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { animateTo, stopAnimations } from '../internal/animate';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../internal/scroll';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-dialog': MinidDialog;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      --width: 40rem;\n      display: block;\n    }\n  `,\n];\n\n/**\n *\n * @event mid-show - Emitted when the dialog opens.\n * @event mid-after-show - Emitted after the dialog opens and all animations are complete.\n * @event mid-hide - Emitted when the dialog closes.\n * @event mid-after-hide - Emitted after the dialog closes and all animations are complete.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} mid-request-close - Emitted when the user attempts to\n *   close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling\n *   `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in\n *   destructive behavior such as data loss.\n *\n * @csspart base - Select the base `dialog` element\n * @csspart header - Select the `header` element\n * @csspart body - Select the `article` element\n * @csspart footer - Select the `footer` element\n *\n * @slot -- The default slot for the body content of the dialog\n * @slot heading - The content inside the `h2` element\n * @slot footer - The content inside the `footer` element\n *\n * @animation dialog.show - The animation to use when showing the dialog.\n * @animation dialog.hide - The animation to use when hiding the dialog.\n * @animation dialog.denyClose - The animation to use when closing the dialog is prevented.\n *\n */\n@customElement('mid-dialog')\nexport class MinidDialog extends styled(LitElement, styles) {\n  @query('#dialog')\n  dialog!: HTMLDialogElement;\n\n  /**\n   * Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * The dialog's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n   */\n  @property({ reflect: true })\n  heading = '';\n\n  /**\n   * When set, the dialog uses `role=\"alertdialog\"` instead of `role=\"dialog\"`, signalling urgency to screen readers.\n   * Use this for blocking dialogs that require immediate user attention.\n   */\n  @property({ type: Boolean, reflect: true })\n  alertdialog = false;\n\n  private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {\n    const requestCloseEvent = new CustomEvent('mid-request-close', {\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n      detail: { source },\n    });\n    this.dispatchEvent(requestCloseEvent);\n\n    if (requestCloseEvent.defaultPrevented) {\n      const { keyframes, options } = getAnimation(this, 'dialog.denyClose');\n      animateTo(this.dialog, keyframes, options);\n      return;\n    }\n\n    this.hide();\n  }\n\n  handleDialogCancel = (event: Event) => {\n    event.preventDefault();\n\n    if (event.defaultPrevented) {\n      this.requestClose('keyboard');\n    } else {\n      this.hide();\n    }\n  };\n\n  private handleBackdropClick({ target }: Event) {\n    // if the target is the dialog, the backdrop was clicked\n    if (target === this.dialog) {\n      this.requestClose('overlay');\n    }\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.dispatchEvent(\n        new Event('mid-show', { composed: true, bubbles: true })\n      );\n      // this.addOpenListeners();\n      this.dialog.showModal();\n\n      if (this.alertdialog) {\n        this.dialog.focus();\n      }\n\n      lockBodyScrolling(this);\n\n      const panelAnimation = getAnimation(this, 'dialog.show');\n      await animateTo(\n        this.dialog,\n        panelAnimation.keyframes,\n        panelAnimation.options\n      ),\n        this.dispatchEvent(\n          new Event('mid-after-show', { bubbles: true, composed: true })\n        );\n    } else {\n      // Hide\n      this.dispatchEvent(\n        new Event('mid-hide', { bubbles: true, composed: true })\n      );\n\n      await Promise.all([stopAnimations(this.dialog)]);\n      const panelAnimation = getAnimation(this, 'dialog.hide');\n\n      // The backdrop can only be animated with css because it's a pseudo element\n      // so we add a animation class to trigger it at the same time as the dialog animation\n      this.dialog.classList.add('backdrop:animate-fade-out');\n      await animateTo(\n        this.dialog,\n        panelAnimation.keyframes,\n        panelAnimation.options\n      );\n      this.dialog.classList.remove('backdrop:animate-fade-out');\n      this.dialog.close();\n      this.dialog.hidden = false;\n      unlockBodyScrolling(this);\n      this.dispatchEvent(\n        new Event('mid-after-hide', { composed: true, bubbles: true })\n      );\n    }\n  }\n\n  /**\n   * Shows the dialog.\n   */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'mid-after-show');\n  }\n\n  /**\n   * Hides the dialog\n   */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'mid-after-hide');\n  }\n\n  constructor() {\n    super();\n    new LangController(this);\n  }\n\n  override render() {\n    const t = getTranslations(getLang(this));\n\n    return html`\n      <dialog\n        part=\"base\"\n        id=\"dialog\"\n        tabindex=\"-1\"\n        role=${this.alertdialog ? 'alertdialog' : 'dialog'}\n        aria-label=${this.heading || nothing}\n        aria-modal=\"true\"\n        class=\"text-neutral m-auto max-h-[calc(100%---spacing(8))] w-(--width) max-w-[calc(100%---spacing(8))] flex-col rounded-lg p-6 shadow-xl backdrop:bg-black/50 open:flex open:animate-none\"\n        @cancel=${this.handleDialogCancel}\n        @click=${this.handleBackdropClick}\n      >\n        <header part=\"header\" class=\"text-heading-sm flex justify-between\">\n          <slot name=\"heading\"></slot>\n          <div class=\"h-0\">\n            <button\n              autofocus\n              aria-label=${t.close}\n              @click=\"${() => this.requestClose('close-button')}\"\n              class=\"text-body-md focus-visible:focus-ring text-neutral hover:bg-neutral-surface-hover float-right flex size-12 translate-x-3 -translate-y-3 items-center justify-center rounded\"\n            >\n              <mid-icon class=\"size-6\" name=\"xmark\"></mid-icon>\n            </button>\n          </div>\n        </header>\n        <div part=\"body\" class=\"overflow-auto\">\n          <slot> </slot>\n        </div>\n        <footer part=\"footer\">\n          <slot name=\"footer\"> </slot>\n        </footer>\n      </dialog>\n    `;\n  }\n}\n\nsetDefaultAnimation('dialog.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.8 },\n    { opacity: 1, scale: 1 },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('dialog.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('dialog.denyClose', {\n  keyframes: [{ scale: 1 }, { scale: 1.03 }, { scale: 1 }],\n  options: { duration: 100 },\n});\n"],"names":[],"mappings":"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"}

package/dist/components/dropdown.component.d.ts

@@ -86,7 +86,7 @@ export declare class MinidDropdown extends MinidDropdown_base {
     addOpenListeners(): void;
     removeOpenListeners(): void;
     handleOpenChange(): Promise<void>;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=dropdown.component.d.ts.map

package/dist/components/heading.component.d.ts

@@ -19,7 +19,7 @@ export declare class MinidHeading extends MinidHeading_base {
      * @default false
      */
     spacing: boolean;
-    render(): import('lit-html').TemplateResult;
+    render(): import('lit').TemplateResult;
 }
 export {};
 //# sourceMappingURL=heading.component.d.ts.map

package/dist/components/heading.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"heading.component.d.ts","sourceRoot":"","sources":["../../src/components/heading.component.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,YAAY,CAAC;KAC7B;CACF;;AAED,qBACa,YAAa,SAAQ,iBAAkB;IAClD;;OAEG;IAEH,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAK;IAEjC;;OAEG;IAEH,IAAI,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAQ;IAE9D;;;OAGG;IAEH,OAAO,UAAS;IAEP,MAAM;CAyBhB"}
+{"version":3,"file":"heading.component.d.ts","sourceRoot":"","sources":["../../src/components/heading.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,YAAY,CAAC;KAC7B;CACF;;AAED,qBACa,YAAa,SAAQ,iBAAkB;IAClD;;OAEG;IAEH,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAK;IAEjC;;OAEG;IAEH,IAAI,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAQ;IAE9D;;;OAGG;IAEH,OAAO,UAAS;IAEP,MAAM;CAgBhB"}

package/dist/components/heading.js

@@ -1,7 +1,6 @@
 import { literal, html } from "lit/static-html.js";
 import { property, customElement } from "lit/decorators.js";
 import { styled } from "../mixins/tailwind.mixin.js";
-import { classMap } from "lit/directives/class-map.js";
 import { LitElement } from "lit";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -22,16 +21,7 @@ let MinidHeading = class extends styled(LitElement) {
   }
   render() {
     const tag = this.level === 1 ? literal`h1` : this.level === 2 ? literal`h2` : this.level === 3 ? literal`h3` : this.level === 4 ? literal`h4` : this.level === 5 ? literal`h5` : literal`h6`;
-    return html`<${tag} class="${classMap({
-      "mb-2": this.spacing,
-      "text-heading-2xs": this.size === "2xs",
-      "text-heading-xs": this.size === "xs",
-      "text-heading-sm": this.size === "sm",
-      "text-heading-md": this.size === "md",
-      "text-heading-lg": this.size === "lg",
-      "text-heading-xl": this.size === "xl",
-      "text-heading-2xl": this.size === "2xl"
-    })}"><slot></slot></${tag}>`;
+    return html`<${tag} class="ds-heading" data-size=${this.size}><slot></slot></${tag}>`;
   }
 };
 __decorateClass([

package/dist/components/heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"heading.js","sources":["../../src/components/heading.component.ts"],"sourcesContent":["import { html, literal } from 'lit/static-html.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement } from 'lit';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-heading': MinidHeading;\n  }\n}\n\n@customElement('mid-heading')\nexport class MinidHeading extends styled(LitElement) {\n  /**\n   * @default 1\n   */\n  @property({ type: Number })\n  level: 1 | 2 | 3 | 4 | 5 | 6 = 1;\n\n  /**\n   * @default 'md'\n   */\n  @property()\n  size: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' = 'md';\n\n  /**\n   *\n   * @default false\n   */\n  @property({ type: Boolean })\n  spacing = false;\n\n  override render() {\n    const tag =\n      this.level === 1\n        ? literal`h1`\n        : this.level === 2\n          ? literal`h2`\n          : this.level === 3\n            ? literal`h3`\n            : this.level === 4\n              ? literal`h4`\n              : this.level === 5\n                ? literal`h5`\n                : literal`h6`;\n\n    return html`<${tag} class=\"${classMap({\n      'mb-2': this.spacing,\n      'text-heading-2xs': this.size === '2xs',\n      'text-heading-xs': this.size === 'xs',\n      'text-heading-sm': this.size === 'sm',\n      'text-heading-md': this.size === 'md',\n      'text-heading-lg': this.size === 'lg',\n      'text-heading-xl': this.size === 'xl',\n      'text-heading-2xl': this.size === '2xl',\n    })}\"><slot></slot></${tag}>`;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAaO,IAAM,eAAN,cAA2B,OAAO,UAAU,EAAE;AAAA,EAA9C,cAAA;AAAA,UAAA,GAAA,SAAA;AAKL,SAAA,QAA+B;AAM/B,SAAA,OAAyD;AAOzD,SAAA,UAAU;AAAA,EAAA;AAAA,EAED,SAAS;AAChB,UAAM,MACJ,KAAK,UAAU,IACX,cACA,KAAK,UAAU,IACb,cACA,KAAK,UAAU,IACb,cACA,KAAK,UAAU,IACb,cACA,KAAK,UAAU,IACb,cACA;AAEd,WAAO,QAAQ,GAAG,WAAW,SAAS;AAAA,MACpC,QAAQ,KAAK;AAAA,MACb,oBAAoB,KAAK,SAAS;AAAA,MAClC,mBAAmB,KAAK,SAAS;AAAA,MACjC,mBAAmB,KAAK,SAAS;AAAA,MACjC,mBAAmB,KAAK,SAAS;AAAA,MACjC,mBAAmB,KAAK,SAAS;AAAA,MACjC,mBAAmB,KAAK,SAAS;AAAA,MACjC,oBAAoB,KAAK,SAAS;AAAA,IAAA,CACnC,CAAC,oBAAoB,GAAG;AAAA,EAC3B;AACF;AAxCE,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAJf,aAKX,WAAA,SAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAA;AAAS,GAVC,aAWX,WAAA,QAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAjBhB,aAkBX,WAAA,WAAA,CAAA;AAlBW,eAAN,gBAAA;AAAA,EADN,cAAc,aAAa;AAAA,GACf,YAAA;"}
+{"version":3,"file":"heading.js","sources":["../../src/components/heading.component.ts"],"sourcesContent":["import { html, literal } from 'lit/static-html.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport { LitElement } from 'lit';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-heading': MinidHeading;\n  }\n}\n\n@customElement('mid-heading')\nexport class MinidHeading extends styled(LitElement) {\n  /**\n   * @default 1\n   */\n  @property({ type: Number })\n  level: 1 | 2 | 3 | 4 | 5 | 6 = 1;\n\n  /**\n   * @default 'md'\n   */\n  @property()\n  size: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' = 'md';\n\n  /**\n   *\n   * @default false\n   */\n  @property({ type: Boolean })\n  spacing = false;\n\n  override render() {\n    const tag =\n      this.level === 1\n        ? literal`h1`\n        : this.level === 2\n          ? literal`h2`\n          : this.level === 3\n            ? literal`h3`\n            : this.level === 4\n              ? literal`h4`\n              : this.level === 5\n                ? literal`h5`\n                : literal`h6`;\n\n    return html`<${tag} class=\"ds-heading\" data-size=${this.size}><slot></slot></${tag}>`;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAYO,IAAM,eAAN,cAA2B,OAAO,UAAU,EAAE;AAAA,EAA9C,cAAA;AAAA,UAAA,GAAA,SAAA;AAKL,SAAA,QAA+B;AAM/B,SAAA,OAAyD;AAOzD,SAAA,UAAU;AAAA,EAAA;AAAA,EAED,SAAS;AAChB,UAAM,MACJ,KAAK,UAAU,IACX,cACA,KAAK,UAAU,IACb,cACA,KAAK,UAAU,IACb,cACA,KAAK,UAAU,IACb,cACA,KAAK,UAAU,IACb,cACA;AAEd,WAAO,QAAQ,GAAG,iCAAiC,KAAK,IAAI,mBAAmB,GAAG;AAAA,EACpF;AACF;AA/BE,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAJf,aAKX,WAAA,SAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAA;AAAS,GAVC,aAWX,WAAA,QAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAjBhB,aAkBX,WAAA,WAAA,CAAA;AAlBW,eAAN,gBAAA;AAAA,EADN,cAAc,aAAa;AAAA,GACf,YAAA;"}

package/dist/components/helptext.component.d.ts

@@ -64,7 +64,7 @@ export declare class MinidHelptext extends MinidHelptext_base {
      * Hides the helptext
      */
     hide(): Promise<void>;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=helptext.component.d.ts.map

package/dist/components/label.component.d.ts

@@ -22,7 +22,7 @@ export declare class MinidLabel extends MinidLabel_base {
      * @default 'medium'
      */
     weight: 'medium' | 'normal' | 'semibold';
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=label.component.d.ts.map

package/dist/components/label.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"label.component.d.ts","sourceRoot":"","sources":["../../src/components/label.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAMvC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,UAAU,CAAC;KACzB;CACF;;AAED,qBACa,UAAW,SAAQ,eAAkB;IAChD;;;OAGG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAGvC,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IAEH,OAAO,UAAS;IAEhB;;;OAGG;IAEH,MAAM,EAAE,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAY;IAE3C,MAAM;CAoBhB"}
+{"version":3,"file":"label.component.d.ts","sourceRoot":"","sources":["../../src/components/label.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,UAAU,CAAC;KACzB;CACF;;AAED,qBACa,UAAW,SAAQ,eAAkB;IAChD;;;OAGG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAGvC,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IAEH,OAAO,UAAS;IAEhB;;;OAGG;IAEH,MAAM,EAAE,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAY;IAE3C,MAAM;CAYhB"}

package/dist/components/label.js

@@ -1,6 +1,5 @@
 import { LitElement, html } from "lit";
 import { property, customElement } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styled } from "../mixins/tailwind.mixin.js";
 var __defProp = Object.defineProperty;
@@ -24,17 +23,9 @@ let MinidLabel = class extends styled(LitElement) {
     return html`
       <label
         for=${ifDefined(this.for)}
-        class=${classMap({
-      "fds-label": true,
-      "fds-label--spacing": this.spacing,
-      "fds-label--xs": this.size === "xs",
-      "fds-label--sm": this.size === "sm",
-      "fds-label--md": this.size === "md",
-      "fds-label--lg": this.size === "lg",
-      "fds-label--medium-weight": this.weight === "medium",
-      "fds-label--regular-weight": this.weight === "normal",
-      "fds-label--semibold-weight": this.weight === "semibold"
-    })}
+        class="ds-label"
+        data-weight=${this.weight}
+        data-size=${this.size}
       >
         <slot></slot>
       </label>

package/dist/components/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","sources":["../../src/components/label.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styled } from '../mixins/tailwind.mixin';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-label': MinidLabel;\n  }\n}\n\n@customElement('mid-label')\nexport class MinidLabel extends styled(LitElement) {\n  /**\n   * Font size\n   * @default 'md'\n   */\n  @property()\n  size: 'xs' | 'sm' | 'md' | 'lg' = 'md';\n\n  @property()\n  for?: string;\n\n  /**\n   * Add margin below element\n   * @default false\n   */\n  @property({ type: Boolean })\n  spacing = false;\n\n  /**\n   * Font weight\n   * @default 'medium'\n   */\n  @property()\n  weight: 'medium' | 'normal' | 'semibold' = 'medium';\n\n  override render() {\n    return html`\n      <label\n        for=${ifDefined(this.for)}\n        class=${classMap({\n          'fds-label': true,\n          'fds-label--spacing': this.spacing,\n          'fds-label--xs': this.size === 'xs',\n          'fds-label--sm': this.size === 'sm',\n          'fds-label--md': this.size === 'md',\n          'fds-label--lg': this.size === 'lg',\n          'fds-label--medium-weight': this.weight === 'medium',\n          'fds-label--regular-weight': this.weight === 'normal',\n          'fds-label--semibold-weight': this.weight === 'semibold',\n        })}\n      >\n        <slot></slot>\n      </label>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAaO,IAAM,aAAN,cAAyB,OAAO,UAAU,EAAE;AAAA,EAA5C,cAAA;AAAA,UAAA,GAAA,SAAA;AAML,SAAA,OAAkC;AAUlC,SAAA,UAAU;AAOV,SAAA,SAA2C;AAAA,EAAA;AAAA,EAElC,SAAS;AAChB,WAAO;AAAA;AAAA,cAEG,UAAU,KAAK,GAAG,CAAC;AAAA,gBACjB,SAAS;AAAA,MACf,aAAa;AAAA,MACb,sBAAsB,KAAK;AAAA,MAC3B,iBAAiB,KAAK,SAAS;AAAA,MAC/B,iBAAiB,KAAK,SAAS;AAAA,MAC/B,iBAAiB,KAAK,SAAS;AAAA,MAC/B,iBAAiB,KAAK,SAAS;AAAA,MAC/B,4BAA4B,KAAK,WAAW;AAAA,MAC5C,6BAA6B,KAAK,WAAW;AAAA,MAC7C,8BAA8B,KAAK,WAAW;AAAA,IAAA,CAC/C,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKR;AACF;AAvCE,gBAAA;AAAA,EADC,SAAA;AAAS,GALC,WAMX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAA;AAAS,GARC,WASX,WAAA,OAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAfhB,WAgBX,WAAA,WAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAA;AAAS,GAtBC,WAuBX,WAAA,UAAA,CAAA;AAvBW,aAAN,gBAAA;AAAA,EADN,cAAc,WAAW;AAAA,GACb,UAAA;"}
+{"version":3,"file":"label.js","sources":["../../src/components/label.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styled } from '../mixins/tailwind.mixin';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-label': MinidLabel;\n  }\n}\n\n@customElement('mid-label')\nexport class MinidLabel extends styled(LitElement) {\n  /**\n   * Font size\n   * @default 'md'\n   */\n  @property()\n  size: 'xs' | 'sm' | 'md' | 'lg' = 'md';\n\n  @property()\n  for?: string;\n\n  /**\n   * Add margin below element\n   * @default false\n   */\n  @property({ type: Boolean })\n  spacing = false;\n\n  /**\n   * Font weight\n   * @default 'medium'\n   */\n  @property()\n  weight: 'medium' | 'normal' | 'semibold' = 'medium';\n\n  override render() {\n    return html`\n      <label\n        for=${ifDefined(this.for)}\n        class=\"ds-label\"\n        data-weight=${this.weight}\n        data-size=${this.size}\n      >\n        <slot></slot>\n      </label>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAYO,IAAM,aAAN,cAAyB,OAAO,UAAU,EAAE;AAAA,EAA5C,cAAA;AAAA,UAAA,GAAA,SAAA;AAML,SAAA,OAAkC;AAUlC,SAAA,UAAU;AAOV,SAAA,SAA2C;AAAA,EAAA;AAAA,EAElC,SAAS;AAChB,WAAO;AAAA;AAAA,cAEG,UAAU,KAAK,GAAG,CAAC;AAAA;AAAA,sBAEX,KAAK,MAAM;AAAA,oBACb,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,EAK3B;AACF;AA/BE,gBAAA;AAAA,EADC,SAAA;AAAS,GALC,WAMX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAA;AAAS,GARC,WASX,WAAA,OAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAfhB,WAgBX,WAAA,WAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAA;AAAS,GAtBC,WAuBX,WAAA,UAAA,CAAA;AAvBW,aAAN,gBAAA;AAAA,EADN,cAAc,WAAW;AAAA,GACb,UAAA;"}

package/dist/components/link.component.d.ts

@@ -8,7 +8,7 @@ declare const MinidLink_base: typeof LitElement;
 export declare class MinidLink extends MinidLink_base {
     href?: string;
     target?: string;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=link.component.d.ts.map

package/dist/components/link.js

@@ -16,7 +16,7 @@ let MinidLink = class extends styled(LitElement) {
   render() {
     return html`
       <a
-        class="text-accent-subtle visited:text-link-visited focus-visible:bg-focus-outer hover:text-accent inline-flex items-center gap-2 underline decoration-[.0625rem] underline-offset-[.27em] outline-0 hover:decoration-[.125rem] focus-visible:text-white"
+        class="ds-link"
         href=${ifDefined(this.href)}
         target=${ifDefined(this.target)}
       >

package/dist/components/link.js.map

@@ -1 +1 @@
-{"version":3,"file":"link.js","sources":["../../src/components/link.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styled } from '../mixins/tailwind.mixin';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-link': MinidLink;\n  }\n}\n\n@customElement('mid-link')\nexport class MinidLink extends styled(LitElement) {\n  @property()\n  href?: string;\n\n  @property()\n  target?: string;\n\n  override render() {\n    return html`\n      <a\n        class=\"text-accent-subtle visited:text-link-visited focus-visible:bg-focus-outer hover:text-accent inline-flex items-center gap-2 underline decoration-[.0625rem] underline-offset-[.27em] outline-0 hover:decoration-[.125rem] focus-visible:text-white\"\n        href=${ifDefined(this.href)}\n        target=${ifDefined(this.target)}\n      >\n        <slot></slot>\n      </a>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAYO,IAAM,YAAN,cAAwB,OAAO,UAAU,EAAE;AAAA,EAOvC,SAAS;AAChB,WAAO;AAAA;AAAA;AAAA,eAGI,UAAU,KAAK,IAAI,CAAC;AAAA,iBAClB,UAAU,KAAK,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrC;AACF;AAhBE,gBAAA;AAAA,EADC,SAAA;AAAS,GADC,UAEX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAA;AAAS,GAJC,UAKX,WAAA,UAAA,CAAA;AALW,YAAN,gBAAA;AAAA,EADN,cAAc,UAAU;AAAA,GACZ,SAAA;"}
+{"version":3,"file":"link.js","sources":["../../src/components/link.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styled } from '../mixins/tailwind.mixin';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-link': MinidLink;\n  }\n}\n\n@customElement('mid-link')\nexport class MinidLink extends styled(LitElement) {\n  @property()\n  href?: string;\n\n  @property()\n  target?: string;\n\n  override render() {\n    return html`\n      <a\n        class=\"ds-link\"\n        href=${ifDefined(this.href)}\n        target=${ifDefined(this.target)}\n      >\n        <slot></slot>\n      </a>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAYO,IAAM,YAAN,cAAwB,OAAO,UAAU,EAAE;AAAA,EAOvC,SAAS;AAChB,WAAO;AAAA;AAAA;AAAA,eAGI,UAAU,KAAK,IAAI,CAAC;AAAA,iBAClB,UAAU,KAAK,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrC;AACF;AAhBE,gBAAA;AAAA,EADC,SAAA;AAAS,GADC,UAEX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAA;AAAS,GAJC,UAKX,WAAA,UAAA,CAAA;AALW,YAAN,gBAAA;AAAA,EADN,cAAc,UAAU;AAAA,GACZ,SAAA;"}

package/dist/components/menu-item.component.d.ts

@@ -30,7 +30,7 @@ export declare class MinidMenuItem extends MinidMenuItem_base {
     handleHostFocus(): void;
     focus(): void;
     setActive(active: boolean): void;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=menu-item.component.d.ts.map

package/dist/components/menu.component.d.ts

@@ -52,7 +52,7 @@ export declare class MinidMenu extends MinidMenu_base {
      */
     setCurrentItem(item: MinidMenuItem): void;
     focusSearchField(): void;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=menu.component.d.ts.map

package/dist/components/paragraph.component.d.ts

@@ -22,7 +22,7 @@ export declare class MinidParagraph extends MinidParagraph_base {
      * @default false
      */
     spacing: boolean;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=paragraph.component.d.ts.map

package/dist/components/paragraph.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paragraph.component.d.ts","sourceRoot":"","sources":["../../src/components/paragraph.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,cAAc,CAAC;KACjC;CACF;;AAED;;GAEG;AACH,qBACa,cAAe,SAAQ,mBAAkB;IACpD;;;;;;OAMG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEvC;;;OAGG;IAEH,OAAO,UAAS;IAEP,MAAM;CAahB"}
+{"version":3,"file":"paragraph.component.d.ts","sourceRoot":"","sources":["../../src/components/paragraph.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,cAAc,CAAC;KACjC;CACF;;AAED;;GAEG;AACH,qBACa,cAAe,SAAQ,mBAAkB;IACpD;;;;;;OAMG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEvC;;;OAGG;IAEH,OAAO,UAAS;IAEP,MAAM;CAQhB"}

package/dist/components/paragraph.js

@@ -1,6 +1,5 @@
 import { LitElement, html } from "lit";
 import { property, customElement } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
 import { styled } from "../mixins/tailwind.mixin.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -20,13 +19,8 @@ let MinidParagraph = class extends styled(LitElement) {
   }
   render() {
     return html`<p
-      class="${classMap({
-      "mb-2": this.spacing,
-      "text-body-xs": this.size === "xs",
-      "text-body-sm": this.size === "sm",
-      "text-body-md": this.size === "md",
-      "text-body-lg": this.size === "lg"
-    })}"
+      class="ds-paragraph"
+      data-size=${this.size}
     >
       <slot></slot>
     </p> `;

package/dist/components/paragraph.js.map

@@ -1 +1 @@
-{"version":3,"file":"paragraph.js","sources":["../../src/components/paragraph.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-paragraph': MinidParagraph;\n  }\n}\n\n/**\n * A paragraph\n */\n@customElement('mid-paragraph')\nexport class MinidParagraph extends styled(LitElement) {\n  /**\n   * `'xs' = 14px`\n   * `'sm' = 16px`\n   * `'md' = 18px`\n   * `'lg' = 21px`\n   * @default 'md'\n   */\n  @property()\n  size: 'xs' | 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Add margin below element\n   * @default false\n   */\n  @property({ type: Boolean })\n  spacing = false;\n\n  override render() {\n    return html`<p\n      class=\"${classMap({\n        'mb-2': this.spacing,\n        'text-body-xs': this.size === 'xs',\n        'text-body-sm': this.size === 'sm',\n        'text-body-md': this.size === 'md',\n        'text-body-lg': this.size === 'lg',\n      })}\"\n    >\n      <slot></slot>\n    </p> `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAeO,IAAM,iBAAN,cAA6B,OAAO,UAAU,EAAE;AAAA,EAAhD,cAAA;AAAA,UAAA,GAAA,SAAA;AASL,SAAA,OAAkC;AAOlC,SAAA,UAAU;AAAA,EAAA;AAAA,EAED,SAAS;AAChB,WAAO;AAAA,eACI,SAAS;AAAA,MAChB,QAAQ,KAAK;AAAA,MACb,gBAAgB,KAAK,SAAS;AAAA,MAC9B,gBAAgB,KAAK,SAAS;AAAA,MAC9B,gBAAgB,KAAK,SAAS;AAAA,MAC9B,gBAAgB,KAAK,SAAS;AAAA,IAAA,CAC/B,CAAC;AAAA;AAAA;AAAA;AAAA,EAIN;AACF;AAtBE,gBAAA;AAAA,EADC,SAAA;AAAS,GARC,eASX,WAAA,QAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAfhB,eAgBX,WAAA,WAAA,CAAA;AAhBW,iBAAN,gBAAA;AAAA,EADN,cAAc,eAAe;AAAA,GACjB,cAAA;"}
+{"version":3,"file":"paragraph.js","sources":["../../src/components/paragraph.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styled } from '../mixins/tailwind.mixin';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-paragraph': MinidParagraph;\n  }\n}\n\n/**\n * A paragraph\n */\n@customElement('mid-paragraph')\nexport class MinidParagraph extends styled(LitElement) {\n  /**\n   * `'xs' = 14px`\n   * `'sm' = 16px`\n   * `'md' = 18px`\n   * `'lg' = 21px`\n   * @default 'md'\n   */\n  @property()\n  size: 'xs' | 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Add margin below element\n   * @default false\n   */\n  @property({ type: Boolean })\n  spacing = false;\n\n  override render() {\n    return html`<p\n      class=\"ds-paragraph\"\n      data-size=${this.size}\n    >\n      <slot></slot>\n    </p> `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAcO,IAAM,iBAAN,cAA6B,OAAO,UAAU,EAAE;AAAA,EAAhD,cAAA;AAAA,UAAA,GAAA,SAAA;AASL,SAAA,OAAkC;AAOlC,SAAA,UAAU;AAAA,EAAA;AAAA,EAED,SAAS;AAChB,WAAO;AAAA;AAAA,kBAEO,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA,EAIzB;AACF;AAjBE,gBAAA;AAAA,EADC,SAAA;AAAS,GARC,eASX,WAAA,QAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAfhB,eAgBX,WAAA,WAAA,CAAA;AAhBW,iBAAN,gBAAA;AAAA,EADN,cAAc,eAAe;AAAA,GACjB,cAAA;"}

package/dist/components/phone-input.component.d.ts

@@ -5,7 +5,8 @@ declare global {
         'mid-phone-input': MinidPhoneInput;
     }
 }
-declare const MinidPhoneInput_base: import('../types/mixin-constructor').Constructor<import('../types/form-control').FormControlInterface> & typeof LitElement;
+type PhoneAutocomplete = 'tel' | 'tel-national';
+declare const MinidPhoneInput_base: import('../types/mixin-constructor.js').Constructor<import('../types/form-control.js').FormControlInterface> & typeof LitElement;
 /**
  * @event {Event} mid-country-click - Emitted when the country button is clicked
  * @event {Event} mid-change - Emitted when the value is modified by the user
@@ -55,6 +56,15 @@ export declare class MinidPhoneInput extends MinidPhoneInput_base {
      * The country selected. A two letter ISO country code like: `"NO"`
      */
     country?: CountryCode;
+    /**
+     * Controls the native browser autofill token used for the phone number input.
+     *
+     * `tel` expects a full phone number, including country code when available.
+     * If a value without a country code matches the selected country, the country
+     * prefix is added.
+     * `tel-national` expects the national number and prefixes the selected country.
+     */
+    autocomplete: PhoneAutocomplete;
     /**
      * Activates invalid styling
      */
@@ -72,7 +82,7 @@ export declare class MinidPhoneInput extends MinidPhoneInput_base {
      */
     readonly: boolean;
     hasFocus: boolean;
-    static get formControlValidators(): import('../types/validator.type').Validator[];
+    static get formControlValidators(): import('../types/validator.type.js').Validator[];
     constructor();
     get validationTarget(): HTMLInputElement;
     validationMessageCallback(message: string): void;
@@ -86,13 +96,15 @@ export declare class MinidPhoneInput extends MinidPhoneInput_base {
     private handleChange;
     private handleKeydown;
     private handleInput;
+    private getCountryCodePrefix;
+    private applyAutocompletePrefix;
     private handleNewValue;
     private valueChangeCallback;
     private handleFocus;
     private removePhonePrefix;
     focus(options?: FocusOptions): void;
     handleCountryChange(): void;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=phone-input.component.d.ts.map

package/dist/components/phone-input.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"phone-input.component.d.ts","sourceRoot":"","sources":["../../src/components/phone-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAKrD,OAAO,EAIL,KAAK,WAAW,EAEjB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,uBAAuB,CAAC;AAY/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,eAAe,CAAC;KACpC;CACF;;AAYD;;;;;;;;;;;;GAYG;AACH,qBACa,eAAgB,SAAQ,oBAEpC;IACC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAS;IACjC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAS;IACtC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA4C;IACpE,OAAO,CAAC,SAAS,CAAmB;IACpC,OAAO,CAAC,iBAAiB,CAAS;IAClC,OAAO,CAAC,YAAY,CAAiB;IACrC,OAAO,CAAC,eAAe,CAAM;IAC7B,OAAO,CAAC,gBAAgB,CAAwC;IAGhE,KAAK,EAAG,gBAAgB,CAAC;IAEzB;;;OAGG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,WAAW,SAAM;IAEjB;;;OAGG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAEjB,MAAM,KAAK,qBAAqB,kDAE/B;;IASD,IAAI,gBAAgB,qBAEnB;IAED,yBAAyB,CAAC,OAAO,EAAE,MAAM;IAIzC,gBAAgB;IAIhB,kBAAkB;IAMlB,oBAAoB,CAAC,KAAK,EAAE,aAAa;IAQzC,iBAAiB,IAAI,IAAI;IAmBzB,IAAI,aAAa,yCAEhB;IAED,IAAI,cAAc,0CAEjB;IAED,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,aAAa;IAiCrB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,cAAc;IAkBtB,OAAO,CAAC,mBAAmB,CAqBzB;IAEF,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,iBAAiB;IAUzB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAKnC,mBAAmB;IAmBV,MAAM;CAiHhB"}
+{"version":3,"file":"phone-input.component.d.ts","sourceRoot":"","sources":["../../src/components/phone-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAKrD,OAAO,EAIL,KAAK,WAAW,EAGjB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,uBAAuB,CAAC;AAe/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,eAAe,CAAC;KACpC;CACF;AAED,KAAK,iBAAiB,GAAG,KAAK,GAAG,cAAc,CAAC;;AAYhD;;;;;;;;;;;;GAYG;AACH,qBACa,eAAgB,SAAQ,oBAEpC;IACC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAS;IACjC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAS;IACtC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA4C;IACpE,OAAO,CAAC,SAAS,CAAmB;IACpC,OAAO,CAAC,iBAAiB,CAAS;IAClC,OAAO,CAAC,YAAY,CAAiB;IACrC,OAAO,CAAC,eAAe,CAAM;IAC7B,OAAO,CAAC,gBAAgB,CAAwC;IAGhE,KAAK,EAAG,gBAAgB,CAAC;IAEzB;;;OAGG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,WAAW,SAAM;IAEjB;;;OAGG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;;OAOG;IAEH,YAAY,EAAE,iBAAiB,CAAS;IAExC;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAEjB,MAAM,KAAK,qBAAqB,qDAE/B;;IAUD,IAAI,gBAAgB,qBAEnB;IAED,yBAAyB,CAAC,OAAO,EAAE,MAAM;IAIzC,gBAAgB;IAIhB,kBAAkB;IAMlB,oBAAoB,CAAC,KAAK,EAAE,aAAa;IAQzC,iBAAiB,IAAI,IAAI;IAmBzB,IAAI,aAAa,yCAEhB;IAED,IAAI,cAAc,0CAEjB;IAED,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,aAAa;IAiCrB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,uBAAuB;IAsB/B,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,mBAAmB,CAqBzB;IAEF,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,iBAAiB;IAUzB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAKnC,mBAAmB;IAmBV,MAAM;CAmHhB"}

package/dist/components/phone-input.js

@@ -3,13 +3,16 @@ import { query, property, state, customElement } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styled } from "../mixins/tailwind.mixin.js";
-import { AsYouType, getCountryCallingCode, formatIncompletePhoneNumber, parsePhoneNumberCharacter } from "libphonenumber-js";
+import { AsYouType, getCountryCallingCode, formatIncompletePhoneNumber, parsePhoneNumberCharacter, parsePhoneNumberFromString } from "libphonenumber-js";
 import "./icon/icon.js";
 import { templateParser, templateFormatter, onKeyDown, onChange } from "input-format";
 import { watch } from "../internal/watch.js";
 import { HasSlotController } from "../internal/slot.js";
 import { FormControlMixin } from "../mixins/form-control.mixin.js";
 import { requiredValidator } from "../mixins/validators.js";
+import { L as LangController } from "../lang.controller-P4W-9ipy.js";
+import { getLang } from "../utilities/lang.js";
+import { getTranslations } from "../utilities/translations.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -44,6 +47,7 @@ let MinidPhoneInput = class extends FormControlMixin(
     this.countrycode = "";
     this.label = "";
     this.hidelabel = false;
+    this.autocomplete = "tel";
     this.invalid = false;
     this.invalidmessage = "";
     this.required = false;
@@ -63,6 +67,7 @@ let MinidPhoneInput = class extends FormControlMixin(
       }
       this.dispatchEvent(this.currentEvent);
     };
+    new LangController(this);
     nextUniqueId++;
     this.inputId = `mid-phone-input-input-${nextUniqueId}`;
     this.validationId = `mid-phone-input-validation-${nextUniqueId}`;
@@ -152,11 +157,32 @@ let MinidPhoneInput = class extends FormControlMixin(
     });
     this.handleNewValue(event);
   }
+  getCountryCodePrefix() {
+    if (this.country) {
+      return `+${getCountryCallingCode(this.country)}`;
+    }
+    return this.countrycode;
+  }
+  applyAutocompletePrefix(value) {
+    if (value.startsWith("+")) {
+      return value;
+    }
+    const countryCodePrefix = this.getCountryCodePrefix();
+    if (this.autocomplete === "tel-national" && countryCodePrefix) {
+      return `${countryCodePrefix}${value}`;
+    }
+    if (this.autocomplete === "tel" && this.country) {
+      const phoneNumber = parsePhoneNumberFromString(value, this.country);
+      const valueWithPlus = `+${value.replaceAll(/\D/g, "")}`;
+      if (phoneNumber?.isValid() && phoneNumber.number !== valueWithPlus) {
+        return phoneNumber.number;
+      }
+    }
+    return `+${value}`;
+  }
   handleNewValue(event) {
     this.formatter.reset();
-    if (!this.input.value.startsWith("+")) {
-      this.input.value = `+${this.input.value}`;
-    }
+    this.input.value = this.applyAutocompletePrefix(this.input.value);
     this.formatter.input(this.input.value);
     this.currentTemplate = this.formatter.getTemplate();
     onChange(
@@ -203,6 +229,8 @@ let MinidPhoneInput = class extends FormControlMixin(
     const lg = false;
     const md = true;
     const sm = false;
+    const lang = getLang(this);
+    const t = getTranslations(lang);
     const hasLabelSlot = this.hasSlotControler.test("label");
     const hasLabel = !!this.label || !!hasLabelSlot;
     const hasError = this.invalid || !!this.invalidmessage;
@@ -238,7 +266,7 @@ let MinidPhoneInput = class extends FormControlMixin(
         <div part="base" class="flex h-12">
           <button
             part="country-button"
-            aria-label="Open country selector"
+            aria-label=${t.openCountrySelector}
             class="${classMap({
       "border-neutral": !this.readonly,
       "border-neutral-subtle": this.readonly,
@@ -276,7 +304,7 @@ let MinidPhoneInput = class extends FormControlMixin(
     })} focus-visible:focus-ring grow rounded-r px-3"
             part="phone-number"
             type="tel"
-            autocomplete="tel"
+            autocomplete=${this.autocomplete}
             ?readonly=${this.readonly}
             value=${this.value}
             aria-describedby=${ifDefined(describedBy)}
@@ -328,6 +356,9 @@ __decorateClass([
 __decorateClass([
   property({ reflect: true })
 ], MinidPhoneInput.prototype, "country", 2);
+__decorateClass([
+  property()
+], MinidPhoneInput.prototype, "autocomplete", 2);
 __decorateClass([
   property({ type: Boolean })
 ], MinidPhoneInput.prototype, "invalid", 2);

package/dist/components/phone-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"phone-input.js","sources":["../../src/components/phone-input.component.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport {\n  AsYouType,\n  formatIncompletePhoneNumber,\n  getCountryCallingCode,\n  type CountryCode,\n  parsePhoneNumberCharacter,\n} from 'libphonenumber-js';\nimport './icon/icon.component';\nimport {\n  onChange,\n  onKeyDown,\n  templateFormatter,\n  templateParser,\n} from 'input-format';\nimport { watch } from '../internal/watch';\nimport { HasSlotController } from '../internal/slot';\nimport { FormControlMixin } from '../mixins/form-control.mixin';\nimport { requiredValidator } from '../mixins/validators';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-phone-input': MinidPhoneInput;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: block;\n    }\n  `,\n];\n\nlet nextUniqueId = 0;\n\n/**\n * @event {Event} mid-country-click - Emitted when the country button is clicked\n * @event {Event} mid-change - Emitted when the value is modified by the user\n * @event {Event} mid-input - Emitted after a new user input\n * @event {Event} mid-blur - Emitted after focus is moved away from input\n * @event {Event} mid-focus - Emitted after input gains focus\n *\n * @part base - Select the container outside the country button and phone number input\n * @part field - Select the container around the label and the inputs\n * @part label - Select the label element\n * @part country-button - Select the country button\n * @part input - Select the phone number input\n */\n@customElement('mid-phone-input')\nexport class MinidPhoneInput extends FormControlMixin(\n  styled(LitElement, styles)\n) {\n  private readonly inputId: string;\n  private readonly validationId: string;\n  private readonly labelId = `mid-code-input-label-${nextUniqueId++}`;\n  private formatter = new AsYouType();\n  private skipCountryUpdate = false; // avoids unwanted update loop\n  private currentEvent = new Event(''); // the event to be emitted after value is set\n  private currentTemplate = '';\n  private hasSlotControler = new HasSlotController(this, 'label');\n\n  @query('input')\n  input!: HTMLInputElement;\n\n  /**\n   * The value of the phone number in E.164 format. Example: `\"+4799999999\"`\n   *\n   */\n  @property({ reflect: true })\n  value = '';\n\n  /**\n   * The phone number without the country code prefix. Example: `\"99999999\"`\n   */\n  @property({ reflect: true })\n  nationalnumber = '';\n\n  /**\n   * The country code of the current phone number value. Example: `\"+47\"`\n   */\n  @property({ reflect: true })\n  countrycode = '';\n\n  /**\n   * Label for the phone input.\n   * Passed label will be encapsulated by a label element.\n   */\n  @property()\n  label = '';\n\n  /**\n   * Hide label visually. Still available for screen readers\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  /**\n   * The country selected. A two letter ISO country code like: `\"NO\"`\n   */\n  @property({ reflect: true })\n  country?: CountryCode;\n\n  /**\n   * Activates invalid styling\n   */\n  @property({ type: Boolean })\n  invalid = false;\n\n  /**\n   * Error message to display when the input is invalid, also activates invalid styling\n   */\n  @property()\n  invalidmessage = '';\n\n  /**\n   * Makes the input required\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * Makes the input read-only, meaning the user cannot change the value.\n   */\n  @property({ type: Boolean })\n  readonly = false;\n\n  @state()\n  hasFocus = false;\n\n  static get formControlValidators() {\n    return [requiredValidator];\n  }\n\n  constructor() {\n    super();\n    nextUniqueId++;\n    this.inputId = `mid-phone-input-input-${nextUniqueId}`;\n    this.validationId = `mid-phone-input-validation-${nextUniqueId}`;\n  }\n\n  get validationTarget() {\n    return this.input;\n  }\n\n  validationMessageCallback(message: string) {\n    this.invalidmessage = message;\n  }\n\n  resetFormControl() {\n    this.invalidmessage = '';\n  }\n\n  handleCountryClick() {\n    this.dispatchEvent(\n      new CustomEvent('mid-country-click', { composed: true, bubbles: true })\n    );\n  }\n\n  handleCountryKeyDown(event: KeyboardEvent) {\n    if ([' ', 'Enter'].includes(event.key)) {\n      this.dispatchEvent(\n        new CustomEvent('mid-country-click', { composed: true, bubbles: true })\n      );\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.formatter.input(this.value);\n    this.country = this.formatter.getCountry() ?? this.country;\n    this.countrycode = this.country\n      ? `+${getCountryCallingCode(this.country)}`\n      : '+';\n\n    this.value = formatIncompletePhoneNumber(this.value);\n    this.value ||= this.countrycode;\n    this.nationalnumber = this.removePhonePrefix(this.value);\n    this.setValue(this.value.replaceAll(' ', ''));\n\n    setTimeout(() => {\n      this.input.value = `${this.countrycode} ${this.nationalnumber}`;\n    });\n  }\n\n  get parseTemplate() {\n    return templateParser(this.currentTemplate, parsePhoneNumberCharacter);\n  }\n\n  get formatTemplate() {\n    return templateFormatter(this.currentTemplate);\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new Event('mid-blur', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleChange(event: Event) {\n    // Event is dispatched after value is set\n    this.currentEvent = new Event('mid-change', {\n      bubbles: true,\n      composed: true,\n    });\n\n    this.handleNewValue(event);\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    if (event.key === 'Backspace' && this.input.selectionStart === 1) {\n      // don't remove '+' symbol which is the first character\n      event.preventDefault();\n      return;\n    }\n\n    const hasModifier =\n      event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n    // submitting to allow users to cancel the keydown event if they need to\n    if (event.key === 'Enter' && !hasModifier) {\n      setTimeout(() => {\n        //\n        // When using an Input Method Editor (IME), pressing enter will cause the form to submit unexpectedly. One way\n        // to check for this is to look at event.isComposing, which will be true when the IME is open.\n        if (!event.defaultPrevented && !event.isComposing) {\n          this.form.requestSubmit();\n        }\n      });\n      return;\n    }\n\n    onKeyDown(\n      event as any,\n      this.input,\n      this.parseTemplate,\n      this.formatTemplate,\n      this.valueChangeCallback\n    );\n  }\n\n  private handleInput(event: InputEvent) {\n    // Event is dispatched after value is set\n    this.currentEvent = new Event('mid-input', {\n      composed: true,\n      bubbles: true,\n    });\n    this.handleNewValue(event);\n  }\n\n  private handleNewValue(event: Event) {\n    this.formatter.reset();\n\n    if (!this.input.value.startsWith('+')) {\n      this.input.value = `+${this.input.value}`;\n    }\n    this.formatter.input(this.input.value);\n    this.currentTemplate = this.formatter.getTemplate();\n\n    onChange(\n      event as any,\n      this.input,\n      this.parseTemplate,\n      this.formatTemplate,\n      this.valueChangeCallback\n    );\n  }\n\n  private valueChangeCallback = (value: string) => {\n    const country =\n      value.length < 2\n        ? undefined\n        : (this.formatter.getCountry() ?? this.country);\n\n    if (country !== this.country) {\n      this.country = country;\n      this.countrycode = this.country\n        ? `+${getCountryCallingCode(this.country)}`\n        : '+';\n      this.skipCountryUpdate = true;\n    }\n\n    if (value !== this.value) {\n      this.value = value;\n      this.setValue(this.value.replaceAll(' ', ''));\n      this.nationalnumber = this.removePhonePrefix(value);\n    }\n\n    this.dispatchEvent(this.currentEvent);\n  };\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new Event('mid-focus', { composed: true, bubbles: true })\n    );\n  }\n\n  private removePhonePrefix(value: string) {\n    if (this.countrycode) {\n      value = value.slice(this.countrycode.length);\n      if (value[0] === ' ') {\n        value = value.slice(1);\n      }\n    }\n    return value;\n  }\n\n  focus(options?: FocusOptions): void {\n    this.input.focus(options);\n  }\n\n  @watch('country', { waitUntilFirstUpdate: true })\n  handleCountryChange() {\n    if (this.skipCountryUpdate) {\n      this.skipCountryUpdate = false;\n      return;\n    }\n\n    this.formatter = new AsYouType(this.country);\n    this.nationalnumber = this.removePhonePrefix(this.input.value);\n\n    this.countrycode = this.country\n      ? `+${getCountryCallingCode(this.country)}`\n      : '+';\n    this.input.value = formatIncompletePhoneNumber(\n      `${this.countrycode}${this.nationalnumber}`\n    );\n    this.input.dispatchEvent(new Event('input', { bubbles: true }));\n    this.input.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  override render() {\n    const lg = false;\n    const md = true;\n    const sm = false;\n\n    const hasLabelSlot = this.hasSlotControler.test('label');\n    const hasLabel = !!this.label || !!hasLabelSlot;\n    const hasError = this.invalid || !!this.invalidmessage;\n    const describedBy = this.invalidmessage ? this.validationId : undefined;\n\n    return html`\n      <label\n        id=\"${this.labelId}\"\n        class=\"${classMap({\n          'sr-only': this.hidelabel || !hasLabel,\n        })} mb-2 block items-center gap-1 font-medium\"\n      > \n      <div\n        part=\"field\"\n        class=\"${classMap({\n          'text-body-sm': sm,\n          'text-body-md': md,\n          'text-body-lg': lg,\n        })}\"\n      >\n        <label\n          for=\"${this.inputId}\"\n          class=\"${classMap({\n            'sr-only': this.hidelabel || !hasLabel,\n          })} mb-2 inline-flex items-center gap-1 font-medium\"\n        >\n          ${this.readonly\n            ? html`<mid-icon\n                class=\"size-5\"\n                library=\"system\"\n                name=\"padlock-locked-fill\"\n              ></mid-icon>`\n            : nothing}\n          <slot name=\"label\"> ${this.label} </slot>\n        </label>\n        <div part=\"base\" class=\"flex h-12\">\n          <button\n            part=\"country-button\"\n            aria-label=\"Open country selector\"\n            class=\"${classMap({\n              'border-neutral': !this.readonly,\n              'border-neutral-subtle': this.readonly,\n              'bg-neutral-surface-tinted': this.readonly,\n              'bg-neutral-surface': !this.readonly,\n            })} focus-visible:focus-ring flex h-full items-center rounded-l border border-r-0 pl-3\"\n            iconstyled\n            variant=\"tertiary\"\n            ?disabled=${this.readonly}\n            @click=${this.handleCountryClick}\n            @keydown=${this.handleCountryKeyDown}\n          >\n            ${this.country\n              ? html`\n                  <mid-icon\n                    class=\"h-4 w-6 overflow-hidden rounded\"\n                    library=\"country\"\n                    name=\"${this.country}\"\n                  ></mid-icon>\n                `\n              : html`<div\n                  class=\"bg-neutral-surface-active h-4 w-6 overflow-hidden rounded\"\n                ></div>`}\n            <mid-icon name=\"chevron-down\"></mid-icon>\n          </button>\n\n          <input\n            id=\"${this.inputId}\"\n            class=\"${classMap({\n              'border-neutral': !hasError && !this.readonly,\n              'border-danger': hasError && !this.readonly,\n              'border-neutral-subtle': this.readonly,\n              'bg-neutral-surface-tinted': this.readonly,\n              'bg-neutral-surface': !this.readonly,\n              'border-2': hasError,\n              border: !hasError,\n            })} focus-visible:focus-ring grow rounded-r px-3\"\n            part=\"phone-number\"\n            type=\"tel\"\n            autocomplete=\"tel\"\n            ?readonly=${this.readonly}\n            value=${this.value}\n            aria-describedby=${ifDefined(describedBy)}\n            aria-invalid=${hasError ? 'true' : 'false'}\n            aria-errormessage=${ifDefined(\n              this.invalidmessage ? this.validationId : undefined\n            )}\n            @input=${this.handleInput}\n            @focus=${this.handleFocus}\n            @blur=${this.handleBlur}\n            @keydown=${this.handleKeydown}\n            @change=${this.handleChange}\n          />\n        </div>\n        <div\n          class=\"text-danger-subtle mt-2 flex gap-1\"\n          id=\"${this.validationId}\"\n          aria-live=\"polite\"\n          ?hidden=${!this.invalidmessage}\n        >\n          <mid-icon\n            name=\"xmark-octagon-fill\"\n            class=\"mt-1 min-h-5 min-w-5\"\n          ></mid-icon>\n          ${this.invalidmessage}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"phone-input.js","sources":["../../src/components/phone-input.component.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport {\n  AsYouType,\n  formatIncompletePhoneNumber,\n  getCountryCallingCode,\n  type CountryCode,\n  parsePhoneNumberFromString,\n  parsePhoneNumberCharacter,\n} from 'libphonenumber-js';\nimport './icon/icon.component';\nimport {\n  onChange,\n  onKeyDown,\n  templateFormatter,\n  templateParser,\n} from 'input-format';\nimport { watch } from '../internal/watch';\nimport { HasSlotController } from '../internal/slot';\nimport { FormControlMixin } from '../mixins/form-control.mixin';\nimport { requiredValidator } from '../mixins/validators';\nimport { LangController } from '../controllers/lang.controller.js';\nimport { getLang } from '../utilities/lang';\nimport { getTranslations } from '../utilities/translations';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-phone-input': MinidPhoneInput;\n  }\n}\n\ntype PhoneAutocomplete = 'tel' | 'tel-national';\n\nconst styles = [\n  css`\n    :host {\n      display: block;\n    }\n  `,\n];\n\nlet nextUniqueId = 0;\n\n/**\n * @event {Event} mid-country-click - Emitted when the country button is clicked\n * @event {Event} mid-change - Emitted when the value is modified by the user\n * @event {Event} mid-input - Emitted after a new user input\n * @event {Event} mid-blur - Emitted after focus is moved away from input\n * @event {Event} mid-focus - Emitted after input gains focus\n *\n * @part base - Select the container outside the country button and phone number input\n * @part field - Select the container around the label and the inputs\n * @part label - Select the label element\n * @part country-button - Select the country button\n * @part input - Select the phone number input\n */\n@customElement('mid-phone-input')\nexport class MinidPhoneInput extends FormControlMixin(\n  styled(LitElement, styles)\n) {\n  private readonly inputId: string;\n  private readonly validationId: string;\n  private readonly labelId = `mid-code-input-label-${nextUniqueId++}`;\n  private formatter = new AsYouType();\n  private skipCountryUpdate = false; // avoids unwanted update loop\n  private currentEvent = new Event(''); // the event to be emitted after value is set\n  private currentTemplate = '';\n  private hasSlotControler = new HasSlotController(this, 'label');\n\n  @query('input')\n  input!: HTMLInputElement;\n\n  /**\n   * The value of the phone number in E.164 format. Example: `\"+4799999999\"`\n   *\n   */\n  @property({ reflect: true })\n  value = '';\n\n  /**\n   * The phone number without the country code prefix. Example: `\"99999999\"`\n   */\n  @property({ reflect: true })\n  nationalnumber = '';\n\n  /**\n   * The country code of the current phone number value. Example: `\"+47\"`\n   */\n  @property({ reflect: true })\n  countrycode = '';\n\n  /**\n   * Label for the phone input.\n   * Passed label will be encapsulated by a label element.\n   */\n  @property()\n  label = '';\n\n  /**\n   * Hide label visually. Still available for screen readers\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  /**\n   * The country selected. A two letter ISO country code like: `\"NO\"`\n   */\n  @property({ reflect: true })\n  country?: CountryCode;\n\n  /**\n   * Controls the native browser autofill token used for the phone number input.\n   *\n   * `tel` expects a full phone number, including country code when available.\n   * If a value without a country code matches the selected country, the country\n   * prefix is added.\n   * `tel-national` expects the national number and prefixes the selected country.\n   */\n  @property()\n  autocomplete: PhoneAutocomplete = 'tel';\n\n  /**\n   * Activates invalid styling\n   */\n  @property({ type: Boolean })\n  invalid = false;\n\n  /**\n   * Error message to display when the input is invalid, also activates invalid styling\n   */\n  @property()\n  invalidmessage = '';\n\n  /**\n   * Makes the input required\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * Makes the input read-only, meaning the user cannot change the value.\n   */\n  @property({ type: Boolean })\n  readonly = false;\n\n  @state()\n  hasFocus = false;\n\n  static get formControlValidators() {\n    return [requiredValidator];\n  }\n\n  constructor() {\n    super();\n    new LangController(this);\n    nextUniqueId++;\n    this.inputId = `mid-phone-input-input-${nextUniqueId}`;\n    this.validationId = `mid-phone-input-validation-${nextUniqueId}`;\n  }\n\n  get validationTarget() {\n    return this.input;\n  }\n\n  validationMessageCallback(message: string) {\n    this.invalidmessage = message;\n  }\n\n  resetFormControl() {\n    this.invalidmessage = '';\n  }\n\n  handleCountryClick() {\n    this.dispatchEvent(\n      new CustomEvent('mid-country-click', { composed: true, bubbles: true })\n    );\n  }\n\n  handleCountryKeyDown(event: KeyboardEvent) {\n    if ([' ', 'Enter'].includes(event.key)) {\n      this.dispatchEvent(\n        new CustomEvent('mid-country-click', { composed: true, bubbles: true })\n      );\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.formatter.input(this.value);\n    this.country = this.formatter.getCountry() ?? this.country;\n    this.countrycode = this.country\n      ? `+${getCountryCallingCode(this.country)}`\n      : '+';\n\n    this.value = formatIncompletePhoneNumber(this.value);\n    this.value ||= this.countrycode;\n    this.nationalnumber = this.removePhonePrefix(this.value);\n    this.setValue(this.value.replaceAll(' ', ''));\n\n    setTimeout(() => {\n      this.input.value = `${this.countrycode} ${this.nationalnumber}`;\n    });\n  }\n\n  get parseTemplate() {\n    return templateParser(this.currentTemplate, parsePhoneNumberCharacter);\n  }\n\n  get formatTemplate() {\n    return templateFormatter(this.currentTemplate);\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new Event('mid-blur', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleChange(event: Event) {\n    // Event is dispatched after value is set\n    this.currentEvent = new Event('mid-change', {\n      bubbles: true,\n      composed: true,\n    });\n\n    this.handleNewValue(event);\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    if (event.key === 'Backspace' && this.input.selectionStart === 1) {\n      // don't remove '+' symbol which is the first character\n      event.preventDefault();\n      return;\n    }\n\n    const hasModifier =\n      event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n    // submitting to allow users to cancel the keydown event if they need to\n    if (event.key === 'Enter' && !hasModifier) {\n      setTimeout(() => {\n        //\n        // When using an Input Method Editor (IME), pressing enter will cause the form to submit unexpectedly. One way\n        // to check for this is to look at event.isComposing, which will be true when the IME is open.\n        if (!event.defaultPrevented && !event.isComposing) {\n          this.form.requestSubmit();\n        }\n      });\n      return;\n    }\n\n    onKeyDown(\n      event as any,\n      this.input,\n      this.parseTemplate,\n      this.formatTemplate,\n      this.valueChangeCallback\n    );\n  }\n\n  private handleInput(event: InputEvent) {\n    // Event is dispatched after value is set\n    this.currentEvent = new Event('mid-input', {\n      composed: true,\n      bubbles: true,\n    });\n    this.handleNewValue(event);\n  }\n\n  private getCountryCodePrefix() {\n    if (this.country) {\n      return `+${getCountryCallingCode(this.country)}`;\n    }\n\n    return this.countrycode;\n  }\n\n  private applyAutocompletePrefix(value: string) {\n    if (value.startsWith('+')) {\n      return value;\n    }\n\n    const countryCodePrefix = this.getCountryCodePrefix();\n    if (this.autocomplete === 'tel-national' && countryCodePrefix) {\n      return `${countryCodePrefix}${value}`;\n    }\n\n    if (this.autocomplete === 'tel' && this.country) {\n      const phoneNumber = parsePhoneNumberFromString(value, this.country);\n      const valueWithPlus = `+${value.replaceAll(/\\D/g, '')}`;\n\n      if (phoneNumber?.isValid() && phoneNumber.number !== valueWithPlus) {\n        return phoneNumber.number;\n      }\n    }\n\n    return `+${value}`;\n  }\n\n  private handleNewValue(event: Event) {\n    this.formatter.reset();\n\n    this.input.value = this.applyAutocompletePrefix(this.input.value);\n\n    this.formatter.input(this.input.value);\n    this.currentTemplate = this.formatter.getTemplate();\n\n    onChange(\n      event as any,\n      this.input,\n      this.parseTemplate,\n      this.formatTemplate,\n      this.valueChangeCallback\n    );\n  }\n\n  private valueChangeCallback = (value: string) => {\n    const country =\n      value.length < 2\n        ? undefined\n        : (this.formatter.getCountry() ?? this.country);\n\n    if (country !== this.country) {\n      this.country = country;\n      this.countrycode = this.country\n        ? `+${getCountryCallingCode(this.country)}`\n        : '+';\n      this.skipCountryUpdate = true;\n    }\n\n    if (value !== this.value) {\n      this.value = value;\n      this.setValue(this.value.replaceAll(' ', ''));\n      this.nationalnumber = this.removePhonePrefix(value);\n    }\n\n    this.dispatchEvent(this.currentEvent);\n  };\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new Event('mid-focus', { composed: true, bubbles: true })\n    );\n  }\n\n  private removePhonePrefix(value: string) {\n    if (this.countrycode) {\n      value = value.slice(this.countrycode.length);\n      if (value[0] === ' ') {\n        value = value.slice(1);\n      }\n    }\n    return value;\n  }\n\n  focus(options?: FocusOptions): void {\n    this.input.focus(options);\n  }\n\n  @watch('country', { waitUntilFirstUpdate: true })\n  handleCountryChange() {\n    if (this.skipCountryUpdate) {\n      this.skipCountryUpdate = false;\n      return;\n    }\n\n    this.formatter = new AsYouType(this.country);\n    this.nationalnumber = this.removePhonePrefix(this.input.value);\n\n    this.countrycode = this.country\n      ? `+${getCountryCallingCode(this.country)}`\n      : '+';\n    this.input.value = formatIncompletePhoneNumber(\n      `${this.countrycode}${this.nationalnumber}`\n    );\n    this.input.dispatchEvent(new Event('input', { bubbles: true }));\n    this.input.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  override render() {\n    const lg = false;\n    const md = true;\n    const sm = false;\n\n    const lang = getLang(this);\n    const t = getTranslations(lang);\n    const hasLabelSlot = this.hasSlotControler.test('label');\n    const hasLabel = !!this.label || !!hasLabelSlot;\n    const hasError = this.invalid || !!this.invalidmessage;\n    const describedBy = this.invalidmessage ? this.validationId : undefined;\n\n    return html`\n      <label\n        id=\"${this.labelId}\"\n        class=\"${classMap({\n          'sr-only': this.hidelabel || !hasLabel,\n        })} mb-2 block items-center gap-1 font-medium\"\n      > \n      <div\n        part=\"field\"\n        class=\"${classMap({\n          'text-body-sm': sm,\n          'text-body-md': md,\n          'text-body-lg': lg,\n        })}\"\n      >\n        <label\n          for=\"${this.inputId}\"\n          class=\"${classMap({\n            'sr-only': this.hidelabel || !hasLabel,\n          })} mb-2 inline-flex items-center gap-1 font-medium\"\n        >\n          ${this.readonly\n            ? html`<mid-icon\n                class=\"size-5\"\n                library=\"system\"\n                name=\"padlock-locked-fill\"\n              ></mid-icon>`\n            : nothing}\n          <slot name=\"label\"> ${this.label} </slot>\n        </label>\n        <div part=\"base\" class=\"flex h-12\">\n          <button\n            part=\"country-button\"\n            aria-label=${t.openCountrySelector}\n            class=\"${classMap({\n              'border-neutral': !this.readonly,\n              'border-neutral-subtle': this.readonly,\n              'bg-neutral-surface-tinted': this.readonly,\n              'bg-neutral-surface': !this.readonly,\n            })} focus-visible:focus-ring flex h-full items-center rounded-l border border-r-0 pl-3\"\n            iconstyled\n            variant=\"tertiary\"\n            ?disabled=${this.readonly}\n            @click=${this.handleCountryClick}\n            @keydown=${this.handleCountryKeyDown}\n          >\n            ${this.country\n              ? html`\n                  <mid-icon\n                    class=\"h-4 w-6 overflow-hidden rounded\"\n                    library=\"country\"\n                    name=\"${this.country}\"\n                  ></mid-icon>\n                `\n              : html`<div\n                  class=\"bg-neutral-surface-active h-4 w-6 overflow-hidden rounded\"\n                ></div>`}\n            <mid-icon name=\"chevron-down\"></mid-icon>\n          </button>\n\n          <input\n            id=\"${this.inputId}\"\n            class=\"${classMap({\n              'border-neutral': !hasError && !this.readonly,\n              'border-danger': hasError && !this.readonly,\n              'border-neutral-subtle': this.readonly,\n              'bg-neutral-surface-tinted': this.readonly,\n              'bg-neutral-surface': !this.readonly,\n              'border-2': hasError,\n              border: !hasError,\n            })} focus-visible:focus-ring grow rounded-r px-3\"\n            part=\"phone-number\"\n            type=\"tel\"\n            autocomplete=${this.autocomplete}\n            ?readonly=${this.readonly}\n            value=${this.value}\n            aria-describedby=${ifDefined(describedBy)}\n            aria-invalid=${hasError ? 'true' : 'false'}\n            aria-errormessage=${ifDefined(\n              this.invalidmessage ? this.validationId : undefined\n            )}\n            @input=${this.handleInput}\n            @focus=${this.handleFocus}\n            @blur=${this.handleBlur}\n            @keydown=${this.handleKeydown}\n            @change=${this.handleChange}\n          />\n        </div>\n        <div\n          class=\"text-danger-subtle mt-2 flex gap-1\"\n          id=\"${this.validationId}\"\n          aria-live=\"polite\"\n          ?hidden=${!this.invalidmessage}\n        >\n          <mid-icon\n            name=\"xmark-octagon-fill\"\n            class=\"mt-1 min-h-5 min-w-5\"\n          ></mid-icon>\n          ${this.invalidmessage}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/popup.component.d.ts

@@ -166,7 +166,7 @@ export declare class MinidPopup extends MinidPopup_base {
     /** Forces the popup to recalculate and reposition itself. */
     reposition(): void;
     private updateHoverBridge;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=popup.component.d.ts.map

package/dist/components/qr-code.component.d.ts

@@ -35,7 +35,7 @@ export declare class MinidQrCode extends MinidQrCode_base {
     background: string;
     margin: number;
     protected updated(): void;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=qr-code.component.d.ts.map

package/dist/components/radio-button.component.d.ts

@@ -46,7 +46,7 @@ export declare class MinidRadioButton extends MinidRadioButton_base {
      * Removes focus from the radio button.
      */
     blur(): void;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=radio-button.component.d.ts.map

package/dist/components/radio-group.component.d.ts

@@ -55,7 +55,7 @@ export declare class MinidRadioGroup extends MinidRadioGroup_base {
      *  Sets focus on the radio-group.
      */
     focus(options?: FocusOptions): void;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=radio-group.component.d.ts.map