@felleslosninger/minid-elements 0.1.4 → 0.1.5

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

@@ -1 +1 @@
-{"version":3,"file":"alert.component.d.ts","sourceRoot":"","sources":["../../src/components/alert.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAIhD,OAAO,uBAAuB,CAAC;AAS/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,UAAU,CAAC;KACzB;CACF;;AAMD;;;;;;;;;;;;;GAaG;AACH,qBACa,UAAW,SAAQ,eAAkB;IAChD,OAAO,CAAC,eAAe,CAAC,CAAS;IACjC,OAAO,CAAC,qBAAqB,CAAC,CAAS;IAGvC,OAAO,CAAC,IAAI,CAAe;IAE3B;;;OAGG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,QAAQ,SAAY;IAEpB;;OAEG;IAEH,QAAQ,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAU;IAE7D;;OAEG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;;;OAKG;IAEH,QAAQ,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAS;IAGjD,OAAO,CAAC,aAAa,CAAiB;IAGtC,OAAO,CAAC,mBAAmB,CAAC,CAI1B;IAEF,YAAY;IAIZ,OAAO,CAAC,eAAe;IAevB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,cAAc;IAahB,gBAAgB;IAwCtB,oBAAoB;IAIpB;;OAEG;IACG,IAAI;IASV;;OAEG;IACG,IAAI;IASV;;;;OAIG;IACG,KAAK,CACT,OAAO,EAAE,UAAU,CAAC,qBAAqB,CAAC,EAC1C,QAAQ,CAAC,EAAE,MAAM,EACjB,QAAQ,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,EACjC,QAAQ,UAAO;IA6DR,MAAM;CAoEhB"}
+{"version":3,"file":"alert.component.d.ts","sourceRoot":"","sources":["../../src/components/alert.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAIhD,OAAO,uBAAuB,CAAC;AAS/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,UAAU,CAAC;KACzB;CACF;;AAMD;;;;;;;;;;;;;GAaG;AACH,qBACa,UAAW,SAAQ,eAAkB;IAChD,OAAO,CAAC,eAAe,CAAC,CAAS;IACjC,OAAO,CAAC,qBAAqB,CAAC,CAAS;IAGvC,OAAO,CAAC,IAAI,CAAe;IAE3B;;;OAGG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,QAAQ,SAAY;IAEpB;;OAEG;IAEH,QAAQ,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAU;IAE7D;;OAEG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;;;OAKG;IAEH,QAAQ,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAS;IAGjD,OAAO,CAAC,aAAa,CAAiB;IAGtC,OAAO,CAAC,mBAAmB,CAAC,CAI1B;IAEF,YAAY;IAIZ,OAAO,CAAC,eAAe;IAevB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,cAAc;IAahB,gBAAgB;IAwCtB,oBAAoB;IAIpB;;OAEG;IACG,IAAI;IASV;;OAEG;IACG,IAAI;IASV;;;;OAIG;IACG,KAAK,CACT,OAAO,EAAE,UAAU,CAAC,qBAAqB,CAAC,EAC1C,QAAQ,CAAC,EAAE,MAAM,EACjB,QAAQ,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,EACjC,QAAQ,UAAO;IA+DR,MAAM;CAsEhB"}

package/dist/components/alert.js

@@ -182,7 +182,9 @@ let MinidAlert = class extends styled(LitElement) {
         @mouseenter=${this.pauseAutoHide}
         @mouseleave=${this.resumeAutoHide}
       >
-        <div class="${classMap({ "grid-cols-[1fr_auto]": this.closable })} grid">
+        <div
+          class="${classMap({ "grid-cols-[1fr_auto]": this.closable })} grid"
+        >
           <div aria-live="${this.arialive}">
             <slot>
               ${!this.notificationContent?.title ? nothing : html`<h2 class="text-heading-xs">
@@ -218,7 +220,7 @@ ${this.notificationContent?.details}</pre
       "hover:bg-info-surface-hover": info,
       "hover:bg-success-surface-hover": success,
       "hover:bg-warning-surface-hover": warning
-    })} flex rounded p-2 self-start justify-self-end"
+    })} flex self-start justify-self-end rounded p-2"
                   @click="${this.hide}"
                   aria-label="Dismiss alert"
                 >

package/dist/components/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sources":["../../src/components/alert.component.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport './icon/icon.component';\nimport { watch } from '../internal/watch';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { waitForEvent } from '../internal/event';\nimport { animateTo, stopAnimations } from '../internal/animate';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-alert': MinidAlert;\n  }\n}\n\nconst toastStack = Object.assign(document.createElement('div'), {\n  className: 'mid-toast-stack',\n});\n\n/**\n * Alerts need to have the `open` attribute to be displayed\n * @csspart base - Select the base of the alert\n *\n * @event mid-show - Emitted when the alert opens.\n * @event mid-after-show - Emitted after the alert opens and all animations are complete.\n * @event mid-hide - Emitted when the alert closes.\n * @event mid-after-hide - Emitted after the alert closes and all animations are complete.\n *\n * @slot -- The default slot for the content of the alert\n *\n * @animation alert.show - The animation to use when showing the alert.\n * @animation alert.hide - The animation to use when hiding the alert.\n */\n@customElement('mid-alert')\nexport class MinidAlert extends styled(LitElement) {\n  private autoHideTimeout?: number;\n  private remainingTimeInterval?: number;\n\n  @query('[part~=\"base\"]')\n  private base!: HTMLElement;\n\n  /**\n   * Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Enables a close button that allows the user to dismiss the alert.\n   */\n  @property({ type: Boolean, reflect: true })\n  closable = false;\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\n   * the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\n   * the alert will not close on its own.\n   */\n  @property({ type: Number })\n  duration = Infinity;\n\n  /**\n   * Sets color and icon according to severity\n   */\n  @property({ reflect: true })\n  severity: 'warning' | 'info' | 'danger' | 'success' = 'info';\n\n  /**\n   * Sets size of icon, padding and font-size.\n   */\n  @property({ reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Adds a shadow to elevate the component\n   */\n  @property({ type: Boolean })\n  elevated = false;\n\n  /**\n   * Sets the `aria-live` attribute on the alert host element.\n   * Prefer wrapping the alert in a `role=\"alert\"` or `aria-live` container instead.\n   * Use `\"polite\"` for non-urgent updates and `\"assertive\"` for time-sensitive ones.\n   * Defaults to `\"off\"`.\n   */\n  @property({ reflect: true })\n  arialive: 'polite' | 'assertive' | 'off' = 'off';\n\n  @state()\n  private remainingTime = this.duration;\n\n  @state()\n  private notificationContent?: {\n    title?: string;\n    message: string;\n    details?: string;\n  };\n\n  firstUpdated() {\n    this.base.hidden = !this.open;\n  }\n\n  private restartAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    clearInterval(this.remainingTimeInterval);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(\n        () => this.hide(),\n        this.duration\n      );\n      this.remainingTime = this.duration;\n      this.remainingTimeInterval = window.setInterval(() => {\n        this.remainingTime -= 100;\n      }, 100);\n    }\n  }\n\n  private pauseAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    clearInterval(this.remainingTimeInterval);\n  }\n\n  private resumeAutoHide() {\n    if (this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(\n        () => this.hide(),\n        this.remainingTime\n      );\n      this.remainingTimeInterval = window.setInterval(() => {\n        this.remainingTime -= 100;\n      }, 100);\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\n      if (this.duration < Infinity) {\n        this.restartAutoHide();\n      }\n\n      await stopAnimations(this.base);\n      this.base.hidden = false;\n      const { keyframes, options } = getAnimation(this, 'alert.show');\n      await animateTo(this.base, keyframes, options);\n\n      this.dispatchEvent(\n        new Event('mid-after-show', { composed: true, bubbles: true })\n      );\n    } else {\n      // Hide\n      this.dispatchEvent(\n        new Event('mid-hide', { composed: true, bubbles: true })\n      );\n\n      clearTimeout(this.autoHideTimeout);\n      clearInterval(this.remainingTimeInterval);\n\n      await stopAnimations(this.base);\n      const { keyframes, options } = getAnimation(this, 'alert.hide');\n      await animateTo(this.base, keyframes, options);\n      this.base.hidden = true;\n\n      this.dispatchEvent(\n        new Event('mid-after-hide', { composed: true, bubbles: true })\n      );\n    }\n  }\n\n  @watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /**\n   * Shows the alert.\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 alert\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  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   */\n  async toast(\n    content: MinidAlert['notificationContent'],\n    duration?: number,\n    severity?: MinidAlert['severity'],\n    closable = true\n  ) {\n    return new Promise<void>((resolve) => {\n      if (toastStack.parentElement === null) {\n        document.body.append(toastStack);\n      }\n\n      if (content) {\n        this.notificationContent = content;\n      }\n\n      if (severity) {\n        this.severity = severity;\n      }\n\n      if (duration) {\n        this.duration = duration;\n      }\n\n      this.closable = closable;\n      this.elevated = true;\n\n      // We wrap this in a timeout for `getBoundingClientRect` to get the height properly\n      setTimeout(() => {\n        toastStack.appendChild(this);\n\n        animateTo(\n          toastStack,\n          [\n            {\n              transform: `translateY(${this.getBoundingClientRect().height}px)`,\n            },\n            { transform: 'translateY(0px)' },\n          ],\n          { duration: 250, easing: 'ease-out' }\n        );\n      }, 0);\n\n      // Wait for the toast stack to render\n      requestAnimationFrame(() => {\n        // Force a reflow for the initial transition\n        this.clientWidth;\n        this.show();\n      });\n\n      this.addEventListener(\n        'mid-after-hide',\n        () => {\n          toastStack.removeChild(this);\n          resolve();\n\n          // Remove the toast stack from the DOM when there are no more alerts\n          if (toastStack.querySelector('mid-alert') === null) {\n            toastStack.remove();\n          }\n        },\n        { once: true }\n      );\n    });\n  }\n\n  override render() {\n    const danger = this.severity === 'danger';\n    const warning = this.severity === 'warning';\n    const info = this.severity === 'info';\n    const success = this.severity === 'success';\n\n    return html`\n      <div\n        part=\"base\"\n        class=\"ds-alert\"\n        data-size=\"${this.size}\"\n        data-color=\"${this.severity}\"\n        @mouseenter=${this.pauseAutoHide}\n        @mouseleave=${this.resumeAutoHide}\n      >\n        <div class=\"${classMap({ 'grid-cols-[1fr_auto]': this.closable })} grid\">\n          <div aria-live=\"${this.arialive}\">\n            <slot>\n              ${!this.notificationContent?.title\n                ? nothing\n                : html`<h2 class=\"text-heading-xs\">\n                    ${this.notificationContent?.title}\n                  </h2>`}\n              ${this.notificationContent?.message}\n              ${!this.notificationContent?.details\n                ? nothing\n                : html`<div\n                    class=\"${classMap({\n                      'border-danger': danger,\n                      'border-info': info,\n                      'border-success': success,\n                      'border-warning': warning,\n                      'bg-danger-surface-hover': danger,\n                      'bg-info-surface-hover': info,\n                      'bg-success-surface-hover': success,\n                      'bg-warning-surface-hover': warning,\n                    })} text-body-sm mt-0.5 border-l-4 p-3\"\n                  >\n                    <pre class=\"break-all whitespace-pre-wrap\">\n${this.notificationContent?.details}</pre\n                    >\n                  </div>`}\n            </slot>\n          </div>\n          ${this.closable\n            ? html`\n                <button\n                  class=\"${classMap({\n                    'text-info-subtle': info,\n                    'text-danger-subtle': danger,\n                    'text-success-subtle': success,\n                    'text-warning-subtle': warning,\n                    'hover:bg-danger-surface-hover': danger,\n                    'hover:bg-info-surface-hover': info,\n                    'hover:bg-success-surface-hover': success,\n                    'hover:bg-warning-surface-hover': warning,\n                  })} flex rounded p-2 self-start justify-self-end\"\n                  @click=\"${this.hide}\"\n                  aria-label=\"Dismiss alert\"\n                >\n                  <mid-icon class=\"size-6\" name=\"xmark\"> </mid-icon>\n                </button>\n              `\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation('alert.show', {\n  keyframes: [\n    { opacity: 0, transform: 'translateY(100%)' },\n    { opacity: 1, transform: 'translateY(0px)' },\n  ],\n  options: { duration: 400, easing: 'ease-out' },\n});\n\nsetDefaultAnimation('alert.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 },\n  ],\n  options: { duration: 250, easing: 'ease-in' },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"alert.js","sources":["../../src/components/alert.component.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport './icon/icon.component';\nimport { watch } from '../internal/watch';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { waitForEvent } from '../internal/event';\nimport { animateTo, stopAnimations } from '../internal/animate';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-alert': MinidAlert;\n  }\n}\n\nconst toastStack = Object.assign(document.createElement('div'), {\n  className: 'mid-toast-stack',\n});\n\n/**\n * Alerts need to have the `open` attribute to be displayed\n * @csspart base - Select the base of the alert\n *\n * @event mid-show - Emitted when the alert opens.\n * @event mid-after-show - Emitted after the alert opens and all animations are complete.\n * @event mid-hide - Emitted when the alert closes.\n * @event mid-after-hide - Emitted after the alert closes and all animations are complete.\n *\n * @slot -- The default slot for the content of the alert\n *\n * @animation alert.show - The animation to use when showing the alert.\n * @animation alert.hide - The animation to use when hiding the alert.\n */\n@customElement('mid-alert')\nexport class MinidAlert extends styled(LitElement) {\n  private autoHideTimeout?: number;\n  private remainingTimeInterval?: number;\n\n  @query('[part~=\"base\"]')\n  private base!: HTMLElement;\n\n  /**\n   * Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Enables a close button that allows the user to dismiss the alert.\n   */\n  @property({ type: Boolean, reflect: true })\n  closable = false;\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\n   * the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\n   * the alert will not close on its own.\n   */\n  @property({ type: Number })\n  duration = Infinity;\n\n  /**\n   * Sets color and icon according to severity\n   */\n  @property({ reflect: true })\n  severity: 'warning' | 'info' | 'danger' | 'success' = 'info';\n\n  /**\n   * Sets size of icon, padding and font-size.\n   */\n  @property({ reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Adds a shadow to elevate the component\n   */\n  @property({ type: Boolean })\n  elevated = false;\n\n  /**\n   * Sets the `aria-live` attribute on the alert host element.\n   * Prefer wrapping the alert in a `role=\"alert\"` or `aria-live` container instead.\n   * Use `\"polite\"` for non-urgent updates and `\"assertive\"` for time-sensitive ones.\n   * Defaults to `\"off\"`.\n   */\n  @property({ reflect: true })\n  arialive: 'polite' | 'assertive' | 'off' = 'off';\n\n  @state()\n  private remainingTime = this.duration;\n\n  @state()\n  private notificationContent?: {\n    title?: string;\n    message: string;\n    details?: string;\n  };\n\n  firstUpdated() {\n    this.base.hidden = !this.open;\n  }\n\n  private restartAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    clearInterval(this.remainingTimeInterval);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(\n        () => this.hide(),\n        this.duration\n      );\n      this.remainingTime = this.duration;\n      this.remainingTimeInterval = window.setInterval(() => {\n        this.remainingTime -= 100;\n      }, 100);\n    }\n  }\n\n  private pauseAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    clearInterval(this.remainingTimeInterval);\n  }\n\n  private resumeAutoHide() {\n    if (this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(\n        () => this.hide(),\n        this.remainingTime\n      );\n      this.remainingTimeInterval = window.setInterval(() => {\n        this.remainingTime -= 100;\n      }, 100);\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\n      if (this.duration < Infinity) {\n        this.restartAutoHide();\n      }\n\n      await stopAnimations(this.base);\n      this.base.hidden = false;\n      const { keyframes, options } = getAnimation(this, 'alert.show');\n      await animateTo(this.base, keyframes, options);\n\n      this.dispatchEvent(\n        new Event('mid-after-show', { composed: true, bubbles: true })\n      );\n    } else {\n      // Hide\n      this.dispatchEvent(\n        new Event('mid-hide', { composed: true, bubbles: true })\n      );\n\n      clearTimeout(this.autoHideTimeout);\n      clearInterval(this.remainingTimeInterval);\n\n      await stopAnimations(this.base);\n      const { keyframes, options } = getAnimation(this, 'alert.hide');\n      await animateTo(this.base, keyframes, options);\n      this.base.hidden = true;\n\n      this.dispatchEvent(\n        new Event('mid-after-hide', { composed: true, bubbles: true })\n      );\n    }\n  }\n\n  @watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /**\n   * Shows the alert.\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 alert\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  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   */\n  async toast(\n    content: MinidAlert['notificationContent'],\n    duration?: number,\n    severity?: MinidAlert['severity'],\n    closable = true\n  ) {\n    return new Promise<void>((resolve) => {\n      if (toastStack.parentElement === null) {\n        document.body.append(toastStack);\n      }\n\n      if (content) {\n        this.notificationContent = content;\n      }\n\n      if (severity) {\n        this.severity = severity;\n      }\n\n      if (duration) {\n        this.duration = duration;\n      }\n\n      this.closable = closable;\n      this.elevated = true;\n\n      // We wrap this in a timeout for `getBoundingClientRect` to get the height properly\n      setTimeout(() => {\n        toastStack.appendChild(this);\n\n        animateTo(\n          toastStack,\n          [\n            {\n              transform: `translateY(${this.getBoundingClientRect().height}px)`,\n            },\n            { transform: 'translateY(0px)' },\n          ],\n          { duration: 250, easing: 'ease-out' }\n        );\n      }, 0);\n\n      // Wait for the toast stack to render\n      requestAnimationFrame(() => {\n        // Force a reflow for the initial transition. Reading the property is the\n        // side effect, so the \"unused expression\" here is deliberate.\n        // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n        this.clientWidth;\n        this.show();\n      });\n\n      this.addEventListener(\n        'mid-after-hide',\n        () => {\n          toastStack.removeChild(this);\n          resolve();\n\n          // Remove the toast stack from the DOM when there are no more alerts\n          if (toastStack.querySelector('mid-alert') === null) {\n            toastStack.remove();\n          }\n        },\n        { once: true }\n      );\n    });\n  }\n\n  override render() {\n    const danger = this.severity === 'danger';\n    const warning = this.severity === 'warning';\n    const info = this.severity === 'info';\n    const success = this.severity === 'success';\n\n    return html`\n      <div\n        part=\"base\"\n        class=\"ds-alert\"\n        data-size=\"${this.size}\"\n        data-color=\"${this.severity}\"\n        @mouseenter=${this.pauseAutoHide}\n        @mouseleave=${this.resumeAutoHide}\n      >\n        <div\n          class=\"${classMap({ 'grid-cols-[1fr_auto]': this.closable })} grid\"\n        >\n          <div aria-live=\"${this.arialive}\">\n            <slot>\n              ${!this.notificationContent?.title\n                ? nothing\n                : html`<h2 class=\"text-heading-xs\">\n                    ${this.notificationContent?.title}\n                  </h2>`}\n              ${this.notificationContent?.message}\n              ${!this.notificationContent?.details\n                ? nothing\n                : html`<div\n                    class=\"${classMap({\n                      'border-danger': danger,\n                      'border-info': info,\n                      'border-success': success,\n                      'border-warning': warning,\n                      'bg-danger-surface-hover': danger,\n                      'bg-info-surface-hover': info,\n                      'bg-success-surface-hover': success,\n                      'bg-warning-surface-hover': warning,\n                    })} text-body-sm mt-0.5 border-l-4 p-3\"\n                  >\n                    <pre class=\"break-all whitespace-pre-wrap\">\n${this.notificationContent?.details}</pre\n                    >\n                  </div>`}\n            </slot>\n          </div>\n          ${this.closable\n            ? html`\n                <button\n                  class=\"${classMap({\n                    'text-info-subtle': info,\n                    'text-danger-subtle': danger,\n                    'text-success-subtle': success,\n                    'text-warning-subtle': warning,\n                    'hover:bg-danger-surface-hover': danger,\n                    'hover:bg-info-surface-hover': info,\n                    'hover:bg-success-surface-hover': success,\n                    'hover:bg-warning-surface-hover': warning,\n                  })} flex self-start justify-self-end rounded p-2\"\n                  @click=\"${this.hide}\"\n                  aria-label=\"Dismiss alert\"\n                >\n                  <mid-icon class=\"size-6\" name=\"xmark\"> </mid-icon>\n                </button>\n              `\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation('alert.show', {\n  keyframes: [\n    { opacity: 0, transform: 'translateY(100%)' },\n    { opacity: 1, transform: 'translateY(0px)' },\n  ],\n  options: { duration: 400, easing: 'ease-out' },\n});\n\nsetDefaultAnimation('alert.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 },\n  ],\n  options: { duration: 250, easing: 'ease-in' },\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAmBA,MAAM,aAAa,OAAO,OAAO,SAAS,cAAc,KAAK,GAAG;AAAA,EAC9D,WAAW;AACb,CAAC;AAiBM,IAAM,aAAN,cAAyB,OAAO,UAAU,EAAE;AAAA,EAA5C,cAAA;AAAA,UAAA,GAAA,SAAA;AAYL,SAAA,OAAO;AAMP,SAAA,WAAW;AAQX,SAAA,WAAW;AAMX,SAAA,WAAsD;AAMtD,SAAA,OAA2B;AAM3B,SAAA,WAAW;AASX,SAAA,WAA2C;AAG3C,SAAQ,gBAAgB,KAAK;AAAA,EAAA;AAAA,EAS7B,eAAe;AACb,SAAK,KAAK,SAAS,CAAC,KAAK;AAAA,EAC3B;AAAA,EAEQ,kBAAkB;AACxB,iBAAa,KAAK,eAAe;AACjC,kBAAc,KAAK,qBAAqB;AACxC,QAAI,KAAK,QAAQ,KAAK,WAAW,UAAU;AACzC,WAAK,kBAAkB,OAAO;AAAA,QAC5B,MAAM,KAAK,KAAA;AAAA,QACX,KAAK;AAAA,MAAA;AAEP,WAAK,gBAAgB,KAAK;AAC1B,WAAK,wBAAwB,OAAO,YAAY,MAAM;AACpD,aAAK,iBAAiB;AAAA,MACxB,GAAG,GAAG;AAAA,IACR;AAAA,EACF;AAAA,EAEQ,gBAAgB;AACtB,iBAAa,KAAK,eAAe;AACjC,kBAAc,KAAK,qBAAqB;AAAA,EAC1C;AAAA,EAEQ,iBAAiB;AACvB,QAAI,KAAK,WAAW,UAAU;AAC5B,WAAK,kBAAkB,OAAO;AAAA,QAC5B,MAAM,KAAK,KAAA;AAAA,QACX,KAAK;AAAA,MAAA;AAEP,WAAK,wBAAwB,OAAO,YAAY,MAAM;AACpD,aAAK,iBAAiB;AAAA,MACxB,GAAG,GAAG;AAAA,IACR;AAAA,EACF;AAAA,EAGA,MAAM,mBAAmB;AACvB,QAAI,KAAK,MAAM;AAEb,WAAK;AAAA,QACH,IAAI,MAAM,YAAY,EAAE,UAAU,MAAM,SAAS,MAAM;AAAA,MAAA;AAGzD,UAAI,KAAK,WAAW,UAAU;AAC5B,aAAK,gBAAA;AAAA,MACP;AAEA,YAAM,eAAe,KAAK,IAAI;AAC9B,WAAK,KAAK,SAAS;AACnB,YAAM,EAAE,WAAW,QAAA,IAAY,aAAa,MAAM,YAAY;AAC9D,YAAM,UAAU,KAAK,MAAM,WAAW,OAAO;AAE7C,WAAK;AAAA,QACH,IAAI,MAAM,kBAAkB,EAAE,UAAU,MAAM,SAAS,MAAM;AAAA,MAAA;AAAA,IAEjE,OAAO;AAEL,WAAK;AAAA,QACH,IAAI,MAAM,YAAY,EAAE,UAAU,MAAM,SAAS,MAAM;AAAA,MAAA;AAGzD,mBAAa,KAAK,eAAe;AACjC,oBAAc,KAAK,qBAAqB;AAExC,YAAM,eAAe,KAAK,IAAI;AAC9B,YAAM,EAAE,WAAW,QAAA,IAAY,aAAa,MAAM,YAAY;AAC9D,YAAM,UAAU,KAAK,MAAM,WAAW,OAAO;AAC7C,WAAK,KAAK,SAAS;AAEnB,WAAK;AAAA,QACH,IAAI,MAAM,kBAAkB,EAAE,UAAU,MAAM,SAAS,MAAM;AAAA,MAAA;AAAA,IAEjE;AAAA,EACF;AAAA,EAGA,uBAAuB;AACrB,SAAK,gBAAA;AAAA,EACP;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,OAAO;AACX,QAAI,KAAK,MAAM;AACb,aAAO;AAAA,IACT;AAEA,SAAK,OAAO;AACZ,WAAO,aAAa,MAAM,gBAAgB;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,OAAO;AACX,QAAI,CAAC,KAAK,MAAM;AACd,aAAO;AAAA,IACT;AAEA,SAAK,OAAO;AACZ,WAAO,aAAa,MAAM,gBAAgB;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,MAAM,MACJ,SACA,UACA,UACA,WAAW,MACX;AACA,WAAO,IAAI,QAAc,CAAC,YAAY;AACpC,UAAI,WAAW,kBAAkB,MAAM;AACrC,iBAAS,KAAK,OAAO,UAAU;AAAA,MACjC;AAEA,UAAI,SAAS;AACX,aAAK,sBAAsB;AAAA,MAC7B;AAEA,UAAI,UAAU;AACZ,aAAK,WAAW;AAAA,MAClB;AAEA,UAAI,UAAU;AACZ,aAAK,WAAW;AAAA,MAClB;AAEA,WAAK,WAAW;AAChB,WAAK,WAAW;AAGhB,iBAAW,MAAM;AACf,mBAAW,YAAY,IAAI;AAE3B;AAAA,UACE;AAAA,UACA;AAAA,YACE;AAAA,cACE,WAAW,cAAc,KAAK,sBAAA,EAAwB,MAAM;AAAA,YAAA;AAAA,YAE9D,EAAE,WAAW,kBAAA;AAAA,UAAkB;AAAA,UAEjC,EAAE,UAAU,KAAK,QAAQ,WAAA;AAAA,QAAW;AAAA,MAExC,GAAG,CAAC;AAGJ,4BAAsB,MAAM;AAI1B,aAAK;AACL,aAAK,KAAA;AAAA,MACP,CAAC;AAED,WAAK;AAAA,QACH;AAAA,QACA,MAAM;AACJ,qBAAW,YAAY,IAAI;AAC3B,kBAAA;AAGA,cAAI,WAAW,cAAc,WAAW,MAAM,MAAM;AAClD,uBAAW,OAAA;AAAA,UACb;AAAA,QACF;AAAA,QACA,EAAE,MAAM,KAAA;AAAA,MAAK;AAAA,IAEjB,CAAC;AAAA,EACH;AAAA,EAES,SAAS;AAChB,UAAM,SAAS,KAAK,aAAa;AACjC,UAAM,UAAU,KAAK,aAAa;AAClC,UAAM,OAAO,KAAK,aAAa;AAC/B,UAAM,UAAU,KAAK,aAAa;AAElC,WAAO;AAAA;AAAA;AAAA;AAAA,qBAIU,KAAK,IAAI;AAAA,sBACR,KAAK,QAAQ;AAAA,sBACb,KAAK,aAAa;AAAA,sBAClB,KAAK,cAAc;AAAA;AAAA;AAAA,mBAGtB,SAAS,EAAE,wBAAwB,KAAK,SAAA,CAAU,CAAC;AAAA;AAAA,4BAE1C,KAAK,QAAQ;AAAA;AAAA,gBAEzB,CAAC,KAAK,qBAAqB,QACzB,UACA;AAAA,sBACI,KAAK,qBAAqB,KAAK;AAAA,wBAC7B;AAAA,gBACR,KAAK,qBAAqB,OAAO;AAAA,gBACjC,CAAC,KAAK,qBAAqB,UACzB,UACA;AAAA,6BACW,SAAS;AAAA,MAChB,iBAAiB;AAAA,MACjB,eAAe;AAAA,MACf,kBAAkB;AAAA,MAClB,kBAAkB;AAAA,MAClB,2BAA2B;AAAA,MAC3B,yBAAyB;AAAA,MACzB,4BAA4B;AAAA,MAC5B,4BAA4B;AAAA,IAAA,CAC7B,CAAC;AAAA;AAAA;AAAA,EAGpB,KAAK,qBAAqB,OAAO;AAAA;AAAA,yBAEV;AAAA;AAAA;AAAA,YAGb,KAAK,WACH;AAAA;AAAA,2BAEa,SAAS;AAAA,MAChB,oBAAoB;AAAA,MACpB,sBAAsB;AAAA,MACtB,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,MACvB,iCAAiC;AAAA,MACjC,+BAA+B;AAAA,MAC/B,kCAAkC;AAAA,MAClC,kCAAkC;AAAA,IAAA,CACnC,CAAC;AAAA,4BACQ,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMvB,OAAO;AAAA;AAAA;AAAA;AAAA,EAInB;AACF;AAnTU,gBAAA;AAAA,EADP,MAAM,gBAAgB;AAAA,GAJZ,WAKH,WAAA,QAAA,CAAA;AAOR,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAX/B,WAYX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAjB/B,WAkBX,WAAA,YAAA,CAAA;AAQA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAzBf,WA0BX,WAAA,YAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GA/BhB,WAgCX,WAAA,YAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GArChB,WAsCX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA3ChB,WA4CX,WAAA,YAAA,CAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GApDhB,WAqDX,WAAA,YAAA,CAAA;AAGQ,gBAAA;AAAA,EADP,MAAA;AAAM,GAvDI,WAwDH,WAAA,iBAAA,CAAA;AAGA,gBAAA;AAAA,EADP,MAAA;AAAM,GA1DI,WA2DH,WAAA,uBAAA,CAAA;AA2CF,gBAAA;AAAA,EADL,MAAM,QAAQ,EAAE,sBAAsB,MAAM;AAAA,GArGlC,WAsGL,WAAA,oBAAA,CAAA;AAwCN,gBAAA;AAAA,EADC,MAAM,UAAU;AAAA,GA7IN,WA8IX,WAAA,wBAAA,CAAA;AA9IW,aAAN,gBAAA;AAAA,EADN,cAAc,WAAW;AAAA,GACb,UAAA;AA0Tb,oBAAoB,cAAc;AAAA,EAChC,WAAW;AAAA,IACT,EAAE,SAAS,GAAG,WAAW,mBAAA;AAAA,IACzB,EAAE,SAAS,GAAG,WAAW,kBAAA;AAAA,EAAkB;AAAA,EAE7C,SAAS,EAAE,UAAU,KAAK,QAAQ,WAAA;AACpC,CAAC;AAED,oBAAoB,cAAc;AAAA,EAChC,WAAW;AAAA,IACT,EAAE,SAAS,GAAG,OAAO,EAAA;AAAA,IACrB,EAAE,SAAS,GAAG,OAAO,IAAA;AAAA,EAAI;AAAA,EAE3B,SAAS,EAAE,UAAU,KAAK,QAAQ,UAAA;AACpC,CAAC;"}

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

@@ -48,6 +48,7 @@ export declare class MinidButton extends MinidButton_base {
      * Toggle icon only styling
      */
     iconstyled: boolean;
+    constructor();
     handleClick(): void;
     private get isLink();
     click(): void;

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

@@ -1 +1 @@
-{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../src/components/button.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,UAAU,EAAE,MAAM,KAAK,CAAC;AAMtC,OAAO,wBAAwB,CAAC;AAGhC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,WAAW,CAAC;KAC3B;CACF;;AAUD;;;;GAIG;AACH,qBACa,WAAY,SAAQ,gBAA4C;IAE3E,MAAM,EAAG,iBAAiB,GAAG,eAAe,CAAC;IAE7C;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAa;IAE1D;;OAEG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE/C;;OAEG;IAEH,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEzB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,WAAW,SAAM;IAEjB;;OAEG;IAEH,UAAU,UAAS;IAEnB,WAAW;IASX,OAAO,KAAK,MAAM,GAEjB;IAED,KAAK;IAIL,IAAI;IAIJ,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAInB,MAAM;CAiEhB"}
+{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../src/components/button.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,UAAU,EAAE,MAAM,KAAK,CAAC;AAMtC,OAAO,wBAAwB,CAAC;AAMhC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,WAAW,CAAC;KAC3B;CACF;;AAUD;;;;GAIG;AACH,qBACa,WAAY,SAAQ,gBAA4C;IAE3E,MAAM,EAAG,iBAAiB,GAAG,eAAe,CAAC;IAE7C;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAa;IAE1D;;OAEG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE/C;;OAEG;IAEH,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEzB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,WAAW,SAAM;IAEjB;;OAEG;IAEH,UAAU,UAAS;;IAOnB,WAAW;IASX,OAAO,KAAK,MAAM,GAEjB;IAED,KAAK;IAIL,IAAI;IAIJ,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAInB,MAAM;CAmEhB"}

package/dist/components/button.js

@@ -6,6 +6,9 @@ import { literal, html } from "lit/static-html.js";
 import { styled } from "../mixins/tailwind.mixin.js";
 import "./spinner.js";
 import { FormControlMixin } from "../mixins/form-control.mixin.js";
+import { getLang } from "../utilities/lang.js";
+import { getTranslations } from "../utilities/translations.js";
+import { L as LangController } from "../lang.controller-P4W-9ipy.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -25,7 +28,7 @@ const styles = [
 ];
 let MinidButton = class extends FormControlMixin(styled(LitElement, styles)) {
   constructor() {
-    super(...arguments);
+    super();
     this.value = "";
     this.variant = "primary";
     this.size = "md";
@@ -34,6 +37,7 @@ let MinidButton = class extends FormControlMixin(styled(LitElement, styles)) {
     this.loading = false;
     this.loadingtext = "";
     this.iconstyled = false;
+    new LangController(this);
   }
   handleClick() {
     if (this.type === "submit") {
@@ -61,6 +65,7 @@ let MinidButton = class extends FormControlMixin(styled(LitElement, styles)) {
     const secondary = this.variant === "secondary";
     const tertiary = this.variant === "tertiary";
     const spinnerOnly = this.loading && !this.loadingtext;
+    const translations = getTranslations(getLang(this));
     return html`<${tag}
       part="base"
       class="${classMap({
@@ -112,6 +117,7 @@ let MinidButton = class extends FormControlMixin(styled(LitElement, styles)) {
       "left-[calc(50%_-_0.5em)]": spinnerOnly
     })}"
               part="spinner"
+              label=${spinnerOnly ? translations.loading : ""}
             ></mid-spinner>` : ""}
     </${tag}>`;
   }

package/dist/components/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../src/components/button.component.ts"],"sourcesContent":["import { css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { html, literal } from 'lit/static-html.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport './spinner.component.ts';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-button': MinidButton;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: inline-flex;\n    }\n  `,\n];\n\n/**\n * @slot -- The default slot for the button's text content\n * @csspart base - Select the button or anchor element\n * @csspart spinner - Select the spinner element\n */\n@customElement('mid-button')\nexport class MinidButton extends FormControlMixin(styled(LitElement, styles)) {\n  @query('[part=\"base\"]')\n  button!: HTMLButtonElement | HTMLLinkElement;\n\n  /**\n   * The value of the button (optional)\n   */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * The variant of the button\n   */\n  @property({ type: String })\n  variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n  /**\n   * The size of the button. Defaults to 'md'\n   */\n  @property({ type: String })\n  size: 'md' | 'lg' | 'sm' = 'md';\n\n  /**\n   * The type of the button. Defaults to normal 'button'\n   */\n  @property({ type: String })\n  type: 'submit' | 'button' | 'reset' = 'button';\n\n  /**\n   * The href of the button. If set, the button will be rendered as an anchor tag\n   */\n  @property({ type: String })\n  href: string | undefined;\n\n  /**\n   * Whether the button is disabled\n   */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Toggle loading state\n   */\n  @property({ type: Boolean })\n  loading = false;\n\n  /**\n   * Text to show when button is in loading state\n   */\n  @property()\n  loadingtext = '';\n\n  /**\n   * Toggle icon only styling\n   */\n  @property({ type: Boolean })\n  iconstyled = false;\n\n  handleClick() {\n    if (this.type === 'submit') {\n      this.value && this.setValue(this.value);\n      this.internals.form?.requestSubmit();\n    } else if (this.type === 'reset') {\n      this.internals.form?.reset();\n    }\n  }\n\n  private get isLink() {\n    return !!this.href;\n  }\n\n  click() {\n    this.button.click();\n  }\n\n  blur() {\n    this.button.blur();\n  }\n\n  focus(options?: FocusOptions) {\n    this.button.focus(options);\n  }\n\n  override render() {\n    const tag = this.isLink ? literal`a` : literal`button`;\n    const primary = this.variant === 'primary';\n    const secondary = this.variant === 'secondary';\n    const tertiary = this.variant === 'tertiary';\n    const spinnerOnly = this.loading && !this.loadingtext;\n\n    return html`<${tag}\n      part=\"base\"\n      class=\"${classMap({\n        'w-12': this.iconstyled,\n        'h-12': this.iconstyled,\n        'py-2': !this.iconstyled,\n        'px-4': !this.iconstyled,\n        'bg-accent-base': primary,\n        'text-accent-base-contrast': primary,\n        'border-transparent': primary || tertiary,\n        'hover:bg-accent-base-hover': primary,\n        'active:bg-accent-base-active': primary,\n        'bg-transparent': secondary || tertiary,\n        'active:bg-accent-surface-active': secondary || tertiary,\n        'hover:bg-accent-surface-hover': secondary || tertiary,\n        'text-accent-subtle': secondary || tertiary,\n        'hover:text-accent': secondary || tertiary,\n        'border-accent-strong': secondary,\n        'text-body-sm': this.size === 'sm',\n        'text-body-md': this.size === 'md',\n        'text-body-lg': this.size === 'lg',\n        'cursor-wait': this.loading && !this.disabled,\n        'cursor-pointer': !this.loading && !this.disabled,\n        'cursor-not-allowed': this.disabled,\n        relative: spinnerOnly,\n        'gap-0': spinnerOnly,\n        'opacity-disabled': this.disabled && !this.loading,\n      })} grow focus-visible:focus-ring leading-sm flex h-fit min-h-12 min-w-12 items-center justify-center gap-2 rounded border font-medium\"\n      type=${this.type}\n      aria-busy=${this.loading}\n      ?disabled=${this.disabled || this.loading}\n      href=\"${ifDefined(this.href)}\"\n      @click=\"${this.handleClick}\"\n    >\n      <slot\n        class=\"${classMap({\n          invisible: spinnerOnly,\n        })}\"\n        ?hidden=${this.loading && !!this.loadingtext}\n      ></slot>\n      <span ?hidden=${!this.loading || !this.loadingtext}>\n        ${this.loadingtext}\n      </span>\n      ${\n        this.loading\n          ? html`<mid-spinner\n              class=\"${classMap({\n                'text-[1.4rem]': true,\n                absolute: spinnerOnly,\n                'top-[calc(50%_-_0.5em)]': spinnerOnly,\n                'left-[calc(50%_-_0.5em)]': spinnerOnly,\n              })}\"\n              part=\"spinner\"\n            ></mid-spinner>`\n          : ''\n      }\n    </${tag}>`;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAeA,MAAM,SAAS;AAAA,EACb;AAAA;AAAA;AAAA;AAAA;AAKF;AAQO,IAAM,cAAN,cAA0B,iBAAiB,OAAO,YAAY,MAAM,CAAC,EAAE;AAAA,EAAvE,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAA,QAAQ;AAMR,SAAA,UAAgD;AAMhD,SAAA,OAA2B;AAM3B,SAAA,OAAsC;AAYtC,SAAA,WAAW;AAMX,SAAA,UAAU;AAMV,SAAA,cAAc;AAMd,SAAA,aAAa;AAAA,EAAA;AAAA,EAEb,cAAc;AACZ,QAAI,KAAK,SAAS,UAAU;AAC1B,WAAK,SAAS,KAAK,SAAS,KAAK,KAAK;AACtC,WAAK,UAAU,MAAM,cAAA;AAAA,IACvB,WAAW,KAAK,SAAS,SAAS;AAChC,WAAK,UAAU,MAAM,MAAA;AAAA,IACvB;AAAA,EACF;AAAA,EAEA,IAAY,SAAS;AACnB,WAAO,CAAC,CAAC,KAAK;AAAA,EAChB;AAAA,EAEA,QAAQ;AACN,SAAK,OAAO,MAAA;AAAA,EACd;AAAA,EAEA,OAAO;AACL,SAAK,OAAO,KAAA;AAAA,EACd;AAAA,EAEA,MAAM,SAAwB;AAC5B,SAAK,OAAO,MAAM,OAAO;AAAA,EAC3B;AAAA,EAES,SAAS;AAChB,UAAM,MAAM,KAAK,SAAS,aAAa;AACvC,UAAM,UAAU,KAAK,YAAY;AACjC,UAAM,YAAY,KAAK,YAAY;AACnC,UAAM,WAAW,KAAK,YAAY;AAClC,UAAM,cAAc,KAAK,WAAW,CAAC,KAAK;AAE1C,WAAO,QAAQ,GAAG;AAAA;AAAA,eAEP,SAAS;AAAA,MAChB,QAAQ,KAAK;AAAA,MACb,QAAQ,KAAK;AAAA,MACb,QAAQ,CAAC,KAAK;AAAA,MACd,QAAQ,CAAC,KAAK;AAAA,MACd,kBAAkB;AAAA,MAClB,6BAA6B;AAAA,MAC7B,sBAAsB,WAAW;AAAA,MACjC,8BAA8B;AAAA,MAC9B,gCAAgC;AAAA,MAChC,kBAAkB,aAAa;AAAA,MAC/B,mCAAmC,aAAa;AAAA,MAChD,iCAAiC,aAAa;AAAA,MAC9C,sBAAsB,aAAa;AAAA,MACnC,qBAAqB,aAAa;AAAA,MAClC,wBAAwB;AAAA,MACxB,gBAAgB,KAAK,SAAS;AAAA,MAC9B,gBAAgB,KAAK,SAAS;AAAA,MAC9B,gBAAgB,KAAK,SAAS;AAAA,MAC9B,eAAe,KAAK,WAAW,CAAC,KAAK;AAAA,MACrC,kBAAkB,CAAC,KAAK,WAAW,CAAC,KAAK;AAAA,MACzC,sBAAsB,KAAK;AAAA,MAC3B,UAAU;AAAA,MACV,SAAS;AAAA,MACT,oBAAoB,KAAK,YAAY,CAAC,KAAK;AAAA,IAAA,CAC5C,CAAC;AAAA,aACK,KAAK,IAAI;AAAA,kBACJ,KAAK,OAAO;AAAA,kBACZ,KAAK,YAAY,KAAK,OAAO;AAAA,cACjC,UAAU,KAAK,IAAI,CAAC;AAAA,gBAClB,KAAK,WAAW;AAAA;AAAA;AAAA,iBAGf,SAAS;AAAA,MAChB,WAAW;AAAA,IAAA,CACZ,CAAC;AAAA,kBACQ,KAAK,WAAW,CAAC,CAAC,KAAK,WAAW;AAAA;AAAA,sBAE9B,CAAC,KAAK,WAAW,CAAC,KAAK,WAAW;AAAA,UAC9C,KAAK,WAAW;AAAA;AAAA,QAGlB,KAAK,UACD;AAAA,uBACW,SAAS;AAAA,MAChB,iBAAiB;AAAA,MACjB,UAAU;AAAA,MACV,2BAA2B;AAAA,MAC3B,4BAA4B;AAAA,IAAA,CAC7B,CAAC;AAAA;AAAA,+BAGJ,EACN;AAAA,QACE,GAAG;AAAA,EACT;AACF;AAlJE,gBAAA;AAAA,EADC,MAAM,eAAe;AAAA,GADX,YAEX,WAAA,UAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPf,YAQX,WAAA,SAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAbf,YAcX,WAAA,WAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnBf,YAoBX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAzBf,YA0BX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA/Bf,YAgCX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GArChB,YAsCX,WAAA,YAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA3ChB,YA4CX,WAAA,WAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAA;AAAS,GAjDC,YAkDX,WAAA,eAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAvDhB,YAwDX,WAAA,cAAA,CAAA;AAxDW,cAAN,gBAAA;AAAA,EADN,cAAc,YAAY;AAAA,GACd,WAAA;"}
+{"version":3,"file":"button.js","sources":["../../src/components/button.component.ts"],"sourcesContent":["import { css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { html, literal } from 'lit/static-html.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport './spinner.component.ts';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\nimport { getLang } from '../utilities/lang.js';\nimport { getTranslations } from '../utilities/translations.js';\nimport { LangController } from '../controllers/lang.controller.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-button': MinidButton;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: inline-flex;\n    }\n  `,\n];\n\n/**\n * @slot -- The default slot for the button's text content\n * @csspart base - Select the button or anchor element\n * @csspart spinner - Select the spinner element\n */\n@customElement('mid-button')\nexport class MinidButton extends FormControlMixin(styled(LitElement, styles)) {\n  @query('[part=\"base\"]')\n  button!: HTMLButtonElement | HTMLLinkElement;\n\n  /**\n   * The value of the button (optional)\n   */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * The variant of the button\n   */\n  @property({ type: String })\n  variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n  /**\n   * The size of the button. Defaults to 'md'\n   */\n  @property({ type: String })\n  size: 'md' | 'lg' | 'sm' = 'md';\n\n  /**\n   * The type of the button. Defaults to normal 'button'\n   */\n  @property({ type: String })\n  type: 'submit' | 'button' | 'reset' = 'button';\n\n  /**\n   * The href of the button. If set, the button will be rendered as an anchor tag\n   */\n  @property({ type: String })\n  href: string | undefined;\n\n  /**\n   * Whether the button is disabled\n   */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Toggle loading state\n   */\n  @property({ type: Boolean })\n  loading = false;\n\n  /**\n   * Text to show when button is in loading state\n   */\n  @property()\n  loadingtext = '';\n\n  /**\n   * Toggle icon only styling\n   */\n  @property({ type: Boolean })\n  iconstyled = false;\n\n  constructor() {\n    super();\n    new LangController(this);\n  }\n\n  handleClick() {\n    if (this.type === 'submit') {\n      this.value && this.setValue(this.value);\n      this.internals.form?.requestSubmit();\n    } else if (this.type === 'reset') {\n      this.internals.form?.reset();\n    }\n  }\n\n  private get isLink() {\n    return !!this.href;\n  }\n\n  click() {\n    this.button.click();\n  }\n\n  blur() {\n    this.button.blur();\n  }\n\n  focus(options?: FocusOptions) {\n    this.button.focus(options);\n  }\n\n  override render() {\n    const tag = this.isLink ? literal`a` : literal`button`;\n    const primary = this.variant === 'primary';\n    const secondary = this.variant === 'secondary';\n    const tertiary = this.variant === 'tertiary';\n    const spinnerOnly = this.loading && !this.loadingtext;\n    const translations = getTranslations(getLang(this));\n\n    return html`<${tag}\n      part=\"base\"\n      class=\"${classMap({\n        'w-12': this.iconstyled,\n        'h-12': this.iconstyled,\n        'py-2': !this.iconstyled,\n        'px-4': !this.iconstyled,\n        'bg-accent-base': primary,\n        'text-accent-base-contrast': primary,\n        'border-transparent': primary || tertiary,\n        'hover:bg-accent-base-hover': primary,\n        'active:bg-accent-base-active': primary,\n        'bg-transparent': secondary || tertiary,\n        'active:bg-accent-surface-active': secondary || tertiary,\n        'hover:bg-accent-surface-hover': secondary || tertiary,\n        'text-accent-subtle': secondary || tertiary,\n        'hover:text-accent': secondary || tertiary,\n        'border-accent-strong': secondary,\n        'text-body-sm': this.size === 'sm',\n        'text-body-md': this.size === 'md',\n        'text-body-lg': this.size === 'lg',\n        'cursor-wait': this.loading && !this.disabled,\n        'cursor-pointer': !this.loading && !this.disabled,\n        'cursor-not-allowed': this.disabled,\n        relative: spinnerOnly,\n        'gap-0': spinnerOnly,\n        'opacity-disabled': this.disabled && !this.loading,\n      })} grow focus-visible:focus-ring leading-sm flex h-fit min-h-12 min-w-12 items-center justify-center gap-2 rounded border font-medium\"\n      type=${this.type}\n      aria-busy=${this.loading}\n      ?disabled=${this.disabled || this.loading}\n      href=\"${ifDefined(this.href)}\"\n      @click=\"${this.handleClick}\"\n    >\n      <slot\n        class=\"${classMap({\n          invisible: spinnerOnly,\n        })}\"\n        ?hidden=${this.loading && !!this.loadingtext}\n      ></slot>\n      <span ?hidden=${!this.loading || !this.loadingtext}>\n        ${this.loadingtext}\n      </span>\n      ${\n        this.loading\n          ? html`<mid-spinner\n              class=\"${classMap({\n                'text-[1.4rem]': true,\n                absolute: spinnerOnly,\n                'top-[calc(50%_-_0.5em)]': spinnerOnly,\n                'left-[calc(50%_-_0.5em)]': spinnerOnly,\n              })}\"\n              part=\"spinner\"\n              label=${spinnerOnly ? translations.loading : ''}\n            ></mid-spinner>`\n          : ''\n      }\n    </${tag}>`;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/dialog.js

@@ -79,7 +79,8 @@ let MinidDialog = class extends styled(LitElement, styles) {
         this.dialog,
         panelAnimation.keyframes,
         panelAnimation.options
-      ), this.dispatchEvent(
+      );
+      this.dispatchEvent(
         new Event("mid-after-show", { bubbles: true, composed: true })
       );
     } else {

package/dist/components/dialog.js.map

@@ -1 +1 @@
-{"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":";;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,SAAS;AAAA,EACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAMF;AA4BO,IAAM,cAAN,cAA0B,OAAO,YAAY,MAAM,EAAE;AAAA,EAwI1D,cAAc;AACZ,UAAA;AAhIF,SAAA,OAAO;AAOP,SAAA,UAAU;AAOV,SAAA,cAAc;AAoBd,SAAA,qBAAqB,CAAC,UAAiB;AACrC,YAAM,eAAA;AAEN,UAAI,MAAM,kBAAkB;AAC1B,aAAK,aAAa,UAAU;AAAA,MAC9B,OAAO;AACL,aAAK,KAAA;AAAA,MACP;AAAA,IACF;AAuFE,QAAI,eAAe,IAAI;AAAA,EACzB;AAAA,EAlHQ,aAAa,QAAiD;AACpE,UAAM,oBAAoB,IAAI,YAAY,qBAAqB;AAAA,MAC7D,SAAS;AAAA,MACT,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,QAAQ,EAAE,OAAA;AAAA,IAAO,CAClB;AACD,SAAK,cAAc,iBAAiB;AAEpC,QAAI,kBAAkB,kBAAkB;AACtC,YAAM,EAAE,WAAW,QAAA,IAAY,aAAa,MAAM,kBAAkB;AACpE,gBAAU,KAAK,QAAQ,WAAW,OAAO;AACzC;AAAA,IACF;AAEA,SAAK,KAAA;AAAA,EACP;AAAA,EAYQ,oBAAoB,EAAE,UAAiB;AAE7C,QAAI,WAAW,KAAK,QAAQ;AAC1B,WAAK,aAAa,SAAS;AAAA,IAC7B;AAAA,EACF;AAAA,EAGA,MAAM,mBAAmB;AACvB,QAAI,KAAK,MAAM;AAEb,WAAK;AAAA,QACH,IAAI,MAAM,YAAY,EAAE,UAAU,MAAM,SAAS,MAAM;AAAA,MAAA;AAGzD,WAAK,OAAO,UAAA;AAEZ,UAAI,KAAK,aAAa;AACpB,aAAK,OAAO,MAAA;AAAA,MACd;AAEA,wBAAkB,IAAI;AAEtB,YAAM,iBAAiB,aAAa,MAAM,aAAa;AACvD,YAAM;AAAA,QACJ,KAAK;AAAA,QACL,eAAe;AAAA,QACf,eAAe;AAAA,MAAA,GAEf,KAAK;AAAA,QACH,IAAI,MAAM,kBAAkB,EAAE,SAAS,MAAM,UAAU,MAAM;AAAA,MAAA;AAAA,IAEnE,OAAO;AAEL,WAAK;AAAA,QACH,IAAI,MAAM,YAAY,EAAE,SAAS,MAAM,UAAU,MAAM;AAAA,MAAA;AAGzD,YAAM,QAAQ,IAAI,CAAC,eAAe,KAAK,MAAM,CAAC,CAAC;AAC/C,YAAM,iBAAiB,aAAa,MAAM,aAAa;AAIvD,WAAK,OAAO,UAAU,IAAI,2BAA2B;AACrD,YAAM;AAAA,QACJ,KAAK;AAAA,QACL,eAAe;AAAA,QACf,eAAe;AAAA,MAAA;AAEjB,WAAK,OAAO,UAAU,OAAO,2BAA2B;AACxD,WAAK,OAAO,MAAA;AACZ,WAAK,OAAO,SAAS;AACrB,0BAAoB,IAAI;AACxB,WAAK;AAAA,QACH,IAAI,MAAM,kBAAkB,EAAE,UAAU,MAAM,SAAS,MAAM;AAAA,MAAA;AAAA,IAEjE;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,OAAO;AACX,QAAI,KAAK,MAAM;AACb,aAAO;AAAA,IACT;AAEA,SAAK,OAAO;AACZ,WAAO,aAAa,MAAM,gBAAgB;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,OAAO;AACX,QAAI,CAAC,KAAK,MAAM;AACd,aAAO;AAAA,IACT;AAEA,SAAK,OAAO;AACZ,WAAO,aAAa,MAAM,gBAAgB;AAAA,EAC5C;AAAA,EAOS,SAAS;AAChB,UAAM,IAAI,gBAAgB,QAAQ,IAAI,CAAC;AAEvC,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKI,KAAK,cAAc,gBAAgB,QAAQ;AAAA,qBACrC,KAAK,WAAW,OAAO;AAAA;AAAA;AAAA,kBAG1B,KAAK,kBAAkB;AAAA,iBACxB,KAAK,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAOd,EAAE,KAAK;AAAA,wBACV,MAAM,KAAK,aAAa,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAe7D;AACF;AAhLE,gBAAA;AAAA,EADC,MAAM,SAAS;AAAA,GADL,YAEX,WAAA,UAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAR/B,YASX,WAAA,QAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GAfhB,YAgBX,WAAA,WAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAtB/B,YAuBX,WAAA,eAAA,CAAA;AAsCM,gBAAA;AAAA,EADL,MAAM,QAAQ,EAAE,sBAAsB,MAAM;AAAA,GA5DlC,YA6DL,WAAA,oBAAA,CAAA;AA7DK,cAAN,gBAAA;AAAA,EADN,cAAc,YAAY;AAAA,GACd,WAAA;AAoLb,oBAAoB,eAAe;AAAA,EACjC,WAAW;AAAA,IACT,EAAE,SAAS,GAAG,OAAO,IAAA;AAAA,IACrB,EAAE,SAAS,GAAG,OAAO,EAAA;AAAA,EAAE;AAAA,EAEzB,SAAS,EAAE,UAAU,KAAK,QAAQ,OAAA;AACpC,CAAC;AAED,oBAAoB,eAAe;AAAA,EACjC,WAAW;AAAA,IACT,EAAE,SAAS,GAAG,OAAO,EAAA;AAAA,IACrB,EAAE,SAAS,GAAG,OAAO,IAAA;AAAA,EAAI;AAAA,EAE3B,SAAS,EAAE,UAAU,KAAK,QAAQ,OAAA;AACpC,CAAC;AAED,oBAAoB,oBAAoB;AAAA,EACtC,WAAW,CAAC,EAAE,OAAO,KAAK,EAAE,OAAO,QAAQ,EAAE,OAAO,GAAG;AAAA,EACvD,SAAS,EAAE,UAAU,IAAA;AACvB,CAAC;"}
+{"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/spinner.component.d.ts

@@ -9,6 +9,7 @@ declare const MinidSpinner_base: typeof LitElement;
  * Size and color can be adjusted with `font-size` and `color` css properties
  */
 export declare class MinidSpinner extends MinidSpinner_base {
+    label: string;
     render(): import('lit').TemplateResult<1>;
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"spinner.component.d.ts","sourceRoot":"","sources":["../../src/components/spinner.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,YAAY,CAAC;KAC7B;CACF;;AAUD;;GAEG;AACH,qBACa,YAAa,SAAQ,iBAA0B;IACjD,MAAM;CA6BhB"}
+{"version":3,"file":"spinner.component.d.ts","sourceRoot":"","sources":["../../src/components/spinner.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAGrD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,YAAY,CAAC;KAC7B;CACF;;AAUD;;GAEG;AACH,qBACa,YAAa,SAAQ,iBAA0B;IAG1D,KAAK,SAAM;IAEF,MAAM;CAiChB"}

package/dist/components/spinner.js

@@ -1,12 +1,14 @@
-import { customElement } from "lit/decorators.js";
-import { css, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { css, LitElement, nothing, html } from "lit";
 import { styled } from "../mixins/tailwind.mixin.js";
+var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = decorator(result) || result;
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
 const styles = [
@@ -17,13 +19,19 @@ const styles = [
   `
 ];
 let MinidSpinner = class extends styled(LitElement, styles) {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+  }
   render() {
     return html`
+      ${!this.label ? nothing : html`<span class="sr-only">${this.label}</span>`}
       <svg
         class="animate-spin-slow"
         width="1em"
         height="1em"
         viewBox="0 0 50 50"
+        aria-hidden="true"
       >
         <circle
           opacity="0.2"
@@ -47,6 +55,9 @@ let MinidSpinner = class extends styled(LitElement, styles) {
     `;
   }
 };
+__decorateClass([
+  property()
+], MinidSpinner.prototype, "label", 2);
 MinidSpinner = __decorateClass([
   customElement("mid-spinner")
 ], MinidSpinner);

package/dist/components/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","sources":["../../src/components/spinner.component.ts"],"sourcesContent":["import { customElement } from 'lit/decorators.js';\nimport { css, html, LitElement } from 'lit';\nimport { styled } from '../mixins/tailwind.mixin';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-spinner': MinidSpinner;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: inline-flex;\n    }\n  `,\n];\n\n/**\n * Size and color can be adjusted with `font-size` and `color` css properties\n */\n@customElement('mid-spinner')\nexport class MinidSpinner extends styled(LitElement, styles) {\n  override render() {\n    return html`\n      <svg\n        class=\"animate-spin-slow\"\n        width=\"1em\"\n        height=\"1em\"\n        viewBox=\"0 0 50 50\"\n      >\n        <circle\n          opacity=\"0.2\"\n          stroke=\"currentColor\"\n          cx=\"25\"\n          cy=\"25\"\n          r=\"20\"\n          fill=\"none\"\n          stroke-width=\"5\"\n        ></circle>\n        <circle\n          class=\"animate-dash\"\n          cx=\"25\"\n          cy=\"25\"\n          r=\"20\"\n          fill=\"none\"\n          stroke-width=\"5\"\n          stroke=\"currentColor\"\n        ></circle>\n      </svg>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAUA,MAAM,SAAS;AAAA,EACb;AAAA;AAAA;AAAA;AAAA;AAKF;AAMO,IAAM,eAAN,cAA2B,OAAO,YAAY,MAAM,EAAE;AAAA,EAClD,SAAS;AAChB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2BT;AACF;AA9Ba,eAAN,gBAAA;AAAA,EADN,cAAc,aAAa;AAAA,GACf,YAAA;"}
+{"version":3,"file":"spinner.js","sources":["../../src/components/spinner.component.ts"],"sourcesContent":["import { customElement, property } from 'lit/decorators.js';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { styled } from '../mixins/tailwind.mixin';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-spinner': MinidSpinner;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: inline-flex;\n    }\n  `,\n];\n\n/**\n * Size and color can be adjusted with `font-size` and `color` css properties\n */\n@customElement('mid-spinner')\nexport class MinidSpinner extends styled(LitElement, styles) {\n\n  @property()\n  label = '';\n\n  override render() {\n    return html`\n      ${!this.label\n        ? nothing\n        : html`<span class=\"sr-only\">${this.label}</span>`}\n      <svg\n        class=\"animate-spin-slow\"\n        width=\"1em\"\n        height=\"1em\"\n        viewBox=\"0 0 50 50\"\n        aria-hidden=\"true\"\n      >\n        <circle\n          opacity=\"0.2\"\n          stroke=\"currentColor\"\n          cx=\"25\"\n          cy=\"25\"\n          r=\"20\"\n          fill=\"none\"\n          stroke-width=\"5\"\n        ></circle>\n        <circle\n          class=\"animate-dash\"\n          cx=\"25\"\n          cy=\"25\"\n          r=\"20\"\n          fill=\"none\"\n          stroke-width=\"5\"\n          stroke=\"currentColor\"\n        ></circle>\n      </svg>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAUA,MAAM,SAAS;AAAA,EACb;AAAA;AAAA;AAAA;AAAA;AAKF;AAMO,IAAM,eAAN,cAA2B,OAAO,YAAY,MAAM,EAAE;AAAA,EAAtD,cAAA;AAAA,UAAA,GAAA,SAAA;AAGL,SAAA,QAAQ;AAAA,EAAA;AAAA,EAEC,SAAS;AAChB,WAAO;AAAA,QACH,CAAC,KAAK,QACJ,UACA,6BAA6B,KAAK,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA4BxD;AACF;AAnCE,gBAAA;AAAA,EADC,SAAA;AAAS,GAFC,aAGX,WAAA,SAAA,CAAA;AAHW,eAAN,gBAAA;AAAA,EADN,cAAc,aAAa;AAAA,GACf,YAAA;"}

package/dist/utilities/translations.d.ts

@@ -8,6 +8,7 @@ export interface ComponentTranslations {
     hidePassword: string;
     openCountrySelector: string;
     close: string;
+    loading: string;
 }
 /**
  * Override or extend translations for a given BCP-47 language tag.

package/dist/utilities/translations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../src/utilities/translations.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;CACf;AAsCD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,MAAM,EACZ,YAAY,EAAE,OAAO,CAAC,qBAAqB,CAAC,GAC3C,IAAI,CAIN;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,qBAAqB,CAMnE"}
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../src/utilities/translations.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB;AA0CD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,MAAM,EACZ,YAAY,EAAE,OAAO,CAAC,qBAAqB,CAAC,GAC3C,IAAI,CAIN;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,qBAAqB,CAMnE"}

package/dist/utilities/translations.js

@@ -4,28 +4,32 @@ const builtins = {
     showPassword: "Vis passord",
     hidePassword: "Skjul passord",
     openCountrySelector: "Åpne landsvelger",
-    close: "Lukk"
+    close: "Lukk",
+    loading: "Laster"
   },
   nn: {
     clear: "Tøm",
     showPassword: "Vis passord",
     hidePassword: "Gøym passord",
     openCountrySelector: "Opna landsveljar",
-    close: "Lukk"
+    close: "Lukk",
+    loading: "Lastar"
   },
   se: {
     clear: "Sihko",
     showPassword: "Čájet sátnesuodji",
     hidePassword: "Čiehka sátnesuodji",
     openCountrySelector: "Rahpat riikkaválljenjoavkku",
-    close: "Gidde"
+    close: "Gidde",
+    loading: "Viežžamin"
   },
   en: {
     clear: "Clear",
     showPassword: "Show password",
     hidePassword: "Hide password",
     openCountrySelector: "Open country selector",
-    close: "Close"
+    close: "Close",
+    loading: "Loading"
   }
 };
 const registry = new Map(

package/dist/utilities/translations.js.map

@@ -1 +1 @@
-{"version":3,"file":"translations.js","sources":["../../src/utilities/translations.ts"],"sourcesContent":["/**\n * All UI strings that components render themselves (e.g. aria-labels on\n * icon-only buttons). Every supported language must provide all keys.\n */\nexport interface ComponentTranslations {\n  clear: string;\n  showPassword: string;\n  hidePassword: string;\n  openCountrySelector: string;\n  close: string;\n}\n\n\nconst builtins: Record<string, ComponentTranslations> = {\n  nb: {\n    clear: 'Tøm',\n    showPassword: 'Vis passord',\n    hidePassword: 'Skjul passord',\n    openCountrySelector: 'Åpne landsvelger',\n    close: 'Lukk',\n  },\n  nn: {\n    clear: 'Tøm',\n    showPassword: 'Vis passord',\n    hidePassword: 'Gøym passord',\n    openCountrySelector: 'Opna landsveljar',\n    close: 'Lukk',\n  },\n  se: {\n    clear: 'Sihko',\n    showPassword: 'Čájet sátnesuodji',\n    hidePassword: 'Čiehka sátnesuodji',\n    openCountrySelector: 'Rahpat riikkaválljenjoavkku',\n    close: 'Gidde',\n  },\n  en: {\n    clear: 'Clear',\n    showPassword: 'Show password',\n    hidePassword: 'Hide password',\n    openCountrySelector: 'Open country selector',\n    close: 'Close',\n  },\n};\n\nconst registry = new Map<string, ComponentTranslations>(\n  Object.entries(builtins)\n);\n\n/**\n * Override or extend translations for a given BCP-47 language tag.\n * Merges the provided strings with the existing entry for that tag, so you\n * only need to supply the keys you want to change.\n *\n * Call this once at app startup, before any components render.\n *\n * @example Override a single string for Norwegian Bokmål\n * ```ts\n * setTranslations('nb', { clear: 'Slett' });\n * ```\n *\n * @example Register a completely new language\n * ```ts\n * setTranslations('fr', {\n *   clear: 'Effacer',\n *   showPassword: 'Afficher le mot de passe',\n *   hidePassword: 'Masquer le mot de passe',\n * });\n * ```\n */\nexport function setTranslations(\n  lang: string,\n  translations: Partial<ComponentTranslations>\n): void {\n  const base = resolveBaseLang(lang);\n  const existing = registry.get(lang) ?? registry.get(base) ?? builtins.nb;\n  registry.set(lang, { ...existing, ...translations });\n}\n\n/**\n * Returns the translations for the given BCP-47 language tag.\n *\n * Resolution order:\n *   1. Exact tag match (e.g. `'nb-NO'`)\n *   2. Base language match (e.g. `'nb'` from `'nb-NO'`)\n *   3. Norwegian Bokmål as final fallback\n */\nexport function getTranslations(lang: string): ComponentTranslations {\n  return (\n    registry.get(lang) ??\n    registry.get(resolveBaseLang(lang)) ??\n    builtins.nb\n  );\n}\n\nfunction resolveBaseLang(lang: string): string {\n  return lang.toLowerCase().split('-')[0];\n}"],"names":[],"mappings":"AAaA,MAAM,WAAkD;AAAA,EACtD,IAAI;AAAA,IACF,OAAO;AAAA,IACP,cAAc;AAAA,IACd,cAAc;AAAA,IACd,qBAAqB;AAAA,IACrB,OAAO;AAAA,EAAA;AAAA,EAET,IAAI;AAAA,IACF,OAAO;AAAA,IACP,cAAc;AAAA,IACd,cAAc;AAAA,IACd,qBAAqB;AAAA,IACrB,OAAO;AAAA,EAAA;AAAA,EAET,IAAI;AAAA,IACF,OAAO;AAAA,IACP,cAAc;AAAA,IACd,cAAc;AAAA,IACd,qBAAqB;AAAA,IACrB,OAAO;AAAA,EAAA;AAAA,EAET,IAAI;AAAA,IACF,OAAO;AAAA,IACP,cAAc;AAAA,IACd,cAAc;AAAA,IACd,qBAAqB;AAAA,IACrB,OAAO;AAAA,EAAA;AAEX;AAEA,MAAM,WAAW,IAAI;AAAA,EACnB,OAAO,QAAQ,QAAQ;AACzB;AAuBO,SAAS,gBACd,MACA,cACM;AACN,QAAM,OAAO,gBAAgB,IAAI;AACjC,QAAM,WAAW,SAAS,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,SAAS;AACtE,WAAS,IAAI,MAAM,EAAE,GAAG,UAAU,GAAG,cAAc;AACrD;AAUO,SAAS,gBAAgB,MAAqC;AACnE,SACE,SAAS,IAAI,IAAI,KACjB,SAAS,IAAI,gBAAgB,IAAI,CAAC,KAClC,SAAS;AAEb;AAEA,SAAS,gBAAgB,MAAsB;AAC7C,SAAO,KAAK,YAAA,EAAc,MAAM,GAAG,EAAE,CAAC;AACxC;"}
+{"version":3,"file":"translations.js","sources":["../../src/utilities/translations.ts"],"sourcesContent":["/**\n * All UI strings that components render themselves (e.g. aria-labels on\n * icon-only buttons). Every supported language must provide all keys.\n */\nexport interface ComponentTranslations {\n  clear: string;\n  showPassword: string;\n  hidePassword: string;\n  openCountrySelector: string;\n  close: string;\n  loading: string;\n}\n\n\nconst builtins: Record<string, ComponentTranslations> = {\n  nb: {\n    clear: 'Tøm',\n    showPassword: 'Vis passord',\n    hidePassword: 'Skjul passord',\n    openCountrySelector: 'Åpne landsvelger',\n    close: 'Lukk',\n    loading: 'Laster',\n  },\n  nn: {\n    clear: 'Tøm',\n    showPassword: 'Vis passord',\n    hidePassword: 'Gøym passord',\n    openCountrySelector: 'Opna landsveljar',\n    close: 'Lukk',\n    loading: 'Lastar',\n  },\n  se: {\n    clear: 'Sihko',\n    showPassword: 'Čájet sátnesuodji',\n    hidePassword: 'Čiehka sátnesuodji',\n    openCountrySelector: 'Rahpat riikkaválljenjoavkku',\n    close: 'Gidde',\n    loading: 'Viežžamin',\n  },\n  en: {\n    clear: 'Clear',\n    showPassword: 'Show password',\n    hidePassword: 'Hide password',\n    openCountrySelector: 'Open country selector',\n    close: 'Close',\n    loading: 'Loading',\n  },\n};\n\nconst registry = new Map<string, ComponentTranslations>(\n  Object.entries(builtins)\n);\n\n/**\n * Override or extend translations for a given BCP-47 language tag.\n * Merges the provided strings with the existing entry for that tag, so you\n * only need to supply the keys you want to change.\n *\n * Call this once at app startup, before any components render.\n *\n * @example Override a single string for Norwegian Bokmål\n * ```ts\n * setTranslations('nb', { clear: 'Slett' });\n * ```\n *\n * @example Register a completely new language\n * ```ts\n * setTranslations('fr', {\n *   clear: 'Effacer',\n *   showPassword: 'Afficher le mot de passe',\n *   hidePassword: 'Masquer le mot de passe',\n * });\n * ```\n */\nexport function setTranslations(\n  lang: string,\n  translations: Partial<ComponentTranslations>\n): void {\n  const base = resolveBaseLang(lang);\n  const existing = registry.get(lang) ?? registry.get(base) ?? builtins.nb;\n  registry.set(lang, { ...existing, ...translations });\n}\n\n/**\n * Returns the translations for the given BCP-47 language tag.\n *\n * Resolution order:\n *   1. Exact tag match (e.g. `'nb-NO'`)\n *   2. Base language match (e.g. `'nb'` from `'nb-NO'`)\n *   3. Norwegian Bokmål as final fallback\n */\nexport function getTranslations(lang: string): ComponentTranslations {\n  return (\n    registry.get(lang) ??\n    registry.get(resolveBaseLang(lang)) ??\n    builtins.nb\n  );\n}\n\nfunction resolveBaseLang(lang: string): string {\n  return lang.toLowerCase().split('-')[0];\n}"],"names":[],"mappings":"AAcA,MAAM,WAAkD;AAAA,EACtD,IAAI;AAAA,IACF,OAAO;AAAA,IACP,cAAc;AAAA,IACd,cAAc;AAAA,IACd,qBAAqB;AAAA,IACrB,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAAA,EAEX,IAAI;AAAA,IACF,OAAO;AAAA,IACP,cAAc;AAAA,IACd,cAAc;AAAA,IACd,qBAAqB;AAAA,IACrB,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAAA,EAEX,IAAI;AAAA,IACF,OAAO;AAAA,IACP,cAAc;AAAA,IACd,cAAc;AAAA,IACd,qBAAqB;AAAA,IACrB,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAAA,EAEX,IAAI;AAAA,IACF,OAAO;AAAA,IACP,cAAc;AAAA,IACd,cAAc;AAAA,IACd,qBAAqB;AAAA,IACrB,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAEb;AAEA,MAAM,WAAW,IAAI;AAAA,EACnB,OAAO,QAAQ,QAAQ;AACzB;AAuBO,SAAS,gBACd,MACA,cACM;AACN,QAAM,OAAO,gBAAgB,IAAI;AACjC,QAAM,WAAW,SAAS,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,SAAS;AACtE,WAAS,IAAI,MAAM,EAAE,GAAG,UAAU,GAAG,cAAc;AACrD;AAUO,SAAS,gBAAgB,MAAqC;AACnE,SACE,SAAS,IAAI,IAAI,KACjB,SAAS,IAAI,gBAAgB,IAAI,CAAC,KAClC,SAAS;AAEb;AAEA,SAAS,gBAAgB,MAAsB;AAC7C,SAAO,KAAK,YAAA,EAAc,MAAM,GAAG,EAAE,CAAC;AACxC;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@felleslosninger/minid-elements",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "MinID Web Components",
   "author": "Digitaliseringsdirektoratet",
   "license": "MIT",
@@ -174,6 +174,7 @@
     "@changesets/cli": "^2.30.0",
     "@custom-elements-manifest/analyzer": "^0.10.3",
     "@digdir/designsystemet": "^1.13.2",
+    "@eslint/js": "^10.0.1",
     "@floating-ui/dom": "^1.6.10",
     "@navikt/aksel-icons": "^7.1.2",
     "@storybook/addon-a11y": "^9.0.12",
@@ -181,30 +182,26 @@
     "@storybook/addon-links": "^9.0.12",
     "@storybook/addon-vitest": "^9.0.12",
     "@storybook/builder-vite": "^9.0.12",
-    "@storybook/test": "^8.6.14",
-    "@storybook/test-runner": "^0.23.0",
     "@storybook/web-components-vite": "^9.0.12",
     "@tailwindcss/cli": "^4.1.6",
     "@types/node": "^22.7.4",
     "@types/qrcode": "^1.5.5",
     "@types/react": "^19.1.2",
     "@types/webappsec-credential-management": "^0.6.9",
-    "@typescript-eslint/eslint-plugin": "^8.31.0",
-    "@typescript-eslint/parser": "^8.31.0",
     "@u-elements/u-datalist": "^1.0.5",
     "@vitejs/plugin-basic-ssl": "^2.0.0",
     "@vitejs/plugin-legacy": "^6.1.0",
-    "@vitest/browser": "^3.2.4",
-    "@vitest/coverage-istanbul": "^3.2.4",
-    "@vitest/coverage-v8": "^3.2.4",
-    "axe-playwright": "^2.1.0",
-    "concurrently": "^9.0.1",
-    "eslint": "^9.25.1",
+    "@vitest/browser": "^3.2.7",
+    "@vitest/coverage-istanbul": "^3.2.7",
+    "@vitest/coverage-v8": "^3.2.7",
+    "concurrently": "^9.2.4",
+    "eslint": "^10.8.0",
     "eslint-plugin-storybook": "^9.0.12",
     "glob": "^13.0.6",
+    "globals": "^17.8.0",
     "jsdom": "^26.1.0",
     "playwright": "^1.53.0",
-    "postcss": "^8.5.1",
+    "postcss": "^8.5.24",
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "rimraf": "^6.0.1",
@@ -216,11 +213,12 @@
     "terser": "^5.24.0",
     "tslib": "^2.8.0",
     "typescript": "^5.6.3",
-    "vite": "^6.1.0",
+    "typescript-eslint": "^8.65.0",
+    "vite": "^6.4.3",
     "vite-plugin-dts": "^4.2.3",
     "vite-plugin-externalize-deps": "^0.8.0",
     "vite-plugin-web-components-hmr": "^0.1.3",
-    "vitest": "^3.2.4"
+    "vitest": "^3.2.7"
   },
   "scripts": {
     "make-icons": "node ./scripts/make-icons.js",
@@ -232,6 +230,7 @@
     "storybook:dev": "concurrently --kill-others \"pnpm run analyze -- --watch\" \"npx @tailwindcss/cli -i ./src/styles/tailwind.css -o ./.storybook/public/tailwind.css --watch\" \"pnpm run storybook\"",
     "storybook:build": "pnpm run build && rimraf storybook-static && pnpm run analyze && npx @tailwindcss/cli -i ./src/styles/tailwind.css -o ./.storybook/public/tailwind.css && pnpm exec storybook build",
     "analyze": "custom-elements-manifest analyze",
+    "lint": "eslint .",
     "build:theme": "pnpm exec designsystemet tokens create --config designsystemet.config.json && pnpm exec designsystemet tokens build --config designsystemet.config.json --experimental-tailwind",
     "release": "pnpm build && pnpm exec changeset publish"
   }