@felleslosninger/minid-elements 0.1.4 → 0.1.6

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":"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"}

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":"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"}
+{"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/checkbox.component.d.ts

@@ -9,10 +9,17 @@ declare const MinidCheckbox_base: import('../types/mixin-constructor.ts').Constr
  * @slot -- The default slot for the label text of the checkbox
  * @slot description - The slot for the description text of the checkbox
  *
+ * @csspart label - The checkbox's label.
+ * @csspart description - The checkbox's description.
+ * @csspart validation-message - The error message shown by `invalidmessage`.
+ *
  * @event mid-change - Emitted when the checked state changes
  */
 export declare class MinidCheckbox extends MinidCheckbox_base {
     private input;
+    private readonly hasSlotController;
+    private readonly descriptionId;
+    private readonly validationId;
     /**
      * The name of the checkbox, submitted as a name/value pair with form data.
      */
@@ -26,6 +33,7 @@ export declare class MinidCheckbox extends MinidCheckbox_base {
     disabled: boolean;
     readonly: boolean;
     invalid: boolean;
+    invalidmessage: string;
     required: boolean;
     static get formControlValidators(): import('../types/validator.type.ts').Validator[];
     shouldFormValueUpdate(): boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.component.d.ts","sourceRoot":"","sources":["../../src/components/checkbox.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,OAAO,0BAA0B,CAAC;AAMlC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,aAAa,CAAC;KAC/B;CACF;;AAED;;;;;GAKG;AAEH,qBACa,aAAc,SAAQ,kBAAoC;IAErE,OAAO,CAAC,KAAK,CAAoB;IAEjC;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,KAAK,SAAQ;IAGb,OAAO,UAAS;IAGhB,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAEjB,MAAM,KAAK,qBAAqB,qDAE/B;IAED,qBAAqB,IAAI,OAAO;IAIhC,IAAI,gBAAgB,qBAEnB;IAED,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,WAAW;IAMnB;;OAEG;IACH,KAAK;IAIL;;OAEG;IACH,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAI5B;;OAEG;IACH,IAAI;IAKJ,iBAAiB;IAKR,MAAM;CAmChB"}
+{"version":3,"file":"checkbox.component.d.ts","sourceRoot":"","sources":["../../src/components/checkbox.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,0BAA0B,CAAC;AAOlC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,aAAa,CAAC;KAC/B;CACF;;AAUD;;;;;;;;;GASG;AAEH,qBACa,aAAc,SAAQ,kBAElC;IAEC,OAAO,CAAC,KAAK,CAAoB;IAEjC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAGhC;IAEF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAiB;IAC/C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAgB;IAE7C;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,KAAK,SAAQ;IAGb,OAAO,UAAS;IAGhB,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAGhB,cAAc,SAAM;IAGpB,QAAQ,UAAS;IAEjB,MAAM,KAAK,qBAAqB,qDAE/B;IAED,qBAAqB,IAAI,OAAO;IAIhC,IAAI,gBAAgB,qBAEnB;IAED,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,WAAW;IAMnB;;OAEG;IACH,KAAK;IAIL;;OAEG;IACH,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAI5B;;OAEG;IACH,IAAI;IAKJ,iBAAiB;IAKR,MAAM;CAoEhB"}

package/dist/components/checkbox.js

@@ -1,5 +1,6 @@
-import { LitElement, html } from "lit";
+import { css, LitElement, html } from "lit";
 import { query, property, customElement } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
 import { live } from "lit/directives/live.js";
 import { styled } from "../mixins/tailwind.mixin.js";
 import "./icon/icon.js";
@@ -7,6 +8,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { FormControlMixin } from "../mixins/form-control.mixin.js";
 import { watch } from "../internal/watch.js";
 import { requiredValidator } from "../mixins/validators.js";
+import { HasSlotController } from "../internal/slot.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -17,15 +19,31 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let MinidCheckbox = class extends FormControlMixin(styled(LitElement)) {
+const styles = [
+  css`
+    .description {
+      color: var(--ds-color-neutral-text-subtle);
+    }
+  `
+];
+let MinidCheckbox = class extends FormControlMixin(
+  styled(LitElement, styles)
+) {
   constructor() {
     super(...arguments);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "description"
+    );
+    this.descriptionId = "description";
+    this.validationId = "validation";
     this.name = "";
     this.value = "on";
     this.checked = false;
     this.disabled = false;
     this.readonly = false;
     this.invalid = false;
+    this.invalidmessage = "";
     this.required = false;
   }
   static get formControlValidators() {
@@ -73,6 +91,12 @@ let MinidCheckbox = class extends FormControlMixin(styled(LitElement)) {
     this.setValue(this.value);
   }
   render() {
+    const hasDescription = !!this.description || this.hasSlotController.test("description");
+    const isInvalid = this.invalid || !!this.invalidmessage;
+    const describedBy = [
+      hasDescription ? this.descriptionId : void 0,
+      this.invalidmessage ? this.validationId : void 0
+    ].filter(Boolean).join(" ") || void 0;
     return html`
       <ds-field class="ds-field">
       <input
@@ -85,6 +109,11 @@ let MinidCheckbox = class extends FormControlMixin(styled(LitElement)) {
           ?checked=${this.checked}
           ?readonly=${this.readonly}
           ?required=${this.required}
+          aria-invalid=${isInvalid ? "true" : "false"}
+          aria-describedby=${ifDefined(describedBy)}
+          aria-errormessage=${ifDefined(
+      this.invalidmessage ? this.validationId : void 0
+    )}
           @click=${this.handleClick}
           @keydown=${this.handleKeydown}
           />
@@ -95,7 +124,11 @@ let MinidCheckbox = class extends FormControlMixin(styled(LitElement)) {
         >
           <slot></slot>
         </label>
-        <div data-field="description">
+        <div
+          class="description"
+          id="${this.descriptionId}"
+          aria-hidden="true"
+        >
           <slot
             name="description"
             part="description"
@@ -103,6 +136,16 @@ let MinidCheckbox = class extends FormControlMixin(styled(LitElement)) {
             ${this.description}
           </slot>
         </div>
+        <p
+          class="${classMap({
+      "ds-validation-message": !!this.invalidmessage
+    })}"
+          part="validation-message"
+          id="${this.validationId}"
+          aria-live="polite"
+        >
+          ${this.invalidmessage}
+        </p>
       </ds-field>
     `;
   }
@@ -131,6 +174,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], MinidCheckbox.prototype, "invalid", 2);
+__decorateClass([
+  property()
+], MinidCheckbox.prototype, "invalidmessage", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], MinidCheckbox.prototype, "required", 2);

package/dist/components/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../src/components/checkbox.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport './icon/icon.component.ts';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\nimport { watch } from '../internal/watch.ts';\nimport { requiredValidator } from '../mixins/validators.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-checkbox': MinidCheckbox;\n  }\n}\n\n/**\n * @slot -- The default slot for the label text of the checkbox\n * @slot description - The slot for the description text of the checkbox\n *\n * @event mid-change - Emitted when the checked state changes\n */\n\n@customElement('mid-checkbox')\nexport class MinidCheckbox extends FormControlMixin(styled(LitElement)) {\n  @query('input[type=\"checkbox\"]')\n  private input!: HTMLInputElement;\n\n  /**\n   * The name of the checkbox, submitted as a name/value pair with form data.\n   */\n  @property()\n  name = '';\n\n  /**\n   * The current value of the checkbox, submitted as a name/value pair with form data.\n   */\n  @property()\n  value = 'on';\n\n  @property({ type: Boolean })\n  checked = false;\n\n  @property()\n  description?: string;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean })\n  readonly = false;\n\n  @property({ type: Boolean })\n  invalid = false;\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  static get formControlValidators() {\n    return [requiredValidator];\n  }\n\n  shouldFormValueUpdate(): boolean {\n    return this.checked;\n  }\n\n  get validationTarget() {\n    return this.input;\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\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    }\n  }\n\n  private handleClick() {\n    this.checked = !this.checked;\n    // this.indeterminate = false;\n    this.dispatchEvent(new Event('mid-change'));\n  }\n\n  /**\n   * Simulates a click on the checkbox.\n   */\n  click() {\n    this.input.click();\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /**\n   * Removes focus from the checkbox.\n   */\n  blur() {\n    this.input.blur();\n  }\n\n  @watch(['checked', 'value'])\n  handleStateChange() {\n    // this.input.indeterminate = this.indeterminate; // force a sync update\n    this.setValue(this.value);\n  }\n\n  override render() {\n\n    return html`\n      <ds-field class=\"ds-field\">\n      <input\n      id=\"input\"\n      class=\"ds-input\"\n      type=\"checkbox\"\n      value=${ifDefined(this.value)}\n      .checked=${live(this.checked)}\n          ?disabled=${this.disabled}\n          ?checked=${this.checked}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          @click=${this.handleClick}\n          @keydown=${this.handleKeydown}\n          />\n        <label\n          class=\"ds-label\"\n          part=\"label\"\n          for=\"input\"\n        >\n          <slot></slot>\n        </label>\n        <div data-field=\"description\">\n          <slot\n            name=\"description\"\n            part=\"description\"\n          >\n            ${this.description}\n          </slot>\n        </div>\n      </ds-field>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAwBO,IAAM,gBAAN,cAA4B,iBAAiB,OAAO,UAAU,CAAC,EAAE;AAAA,EAAjE,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAA,OAAO;AAMP,SAAA,QAAQ;AAGR,SAAA,UAAU;AAMV,SAAA,WAAW;AAGX,SAAA,WAAW;AAGX,SAAA,UAAU;AAGV,SAAA,WAAW;AAAA,EAAA;AAAA,EAEX,WAAW,wBAAwB;AACjC,WAAO,CAAC,iBAAiB;AAAA,EAC3B;AAAA,EAEA,wBAAiC;AAC/B,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,IAAI,mBAAmB;AACrB,WAAO,KAAK;AAAA,EACd;AAAA,EAEQ,cAAc,OAAsB;AAC1C,UAAM,cACJ,MAAM,WAAW,MAAM,WAAW,MAAM,YAAY,MAAM;AAI5D,QAAI,MAAM,QAAQ,WAAW,CAAC,aAAa;AACzC,iBAAW,MAAM;AAIf,YAAI,CAAC,MAAM,oBAAoB,CAAC,MAAM,aAAa;AACjD,eAAK,KAAK,cAAA;AAAA,QACZ;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEQ,cAAc;AACpB,SAAK,UAAU,CAAC,KAAK;AAErB,SAAK,cAAc,IAAI,MAAM,YAAY,CAAC;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ;AACN,SAAK,MAAM,MAAA;AAAA,EACb;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,SAAwB;AAC5B,SAAK,MAAM,MAAM,OAAO;AAAA,EAC1B;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO;AACL,SAAK,MAAM,KAAA;AAAA,EACb;AAAA,EAGA,oBAAoB;AAElB,SAAK,SAAS,KAAK,KAAK;AAAA,EAC1B;AAAA,EAES,SAAS;AAEhB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMG,UAAU,KAAK,KAAK,CAAC;AAAA,iBAClB,KAAK,KAAK,OAAO,CAAC;AAAA,sBACb,KAAK,QAAQ;AAAA,qBACd,KAAK,OAAO;AAAA,sBACX,KAAK,QAAQ;AAAA,sBACb,KAAK,QAAQ;AAAA,mBAChB,KAAK,WAAW;AAAA,qBACd,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAczB,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,EAK5B;AACF;AAlIU,gBAAA;AAAA,EADP,MAAM,wBAAwB;AAAA,GADpB,cAEH,WAAA,SAAA,CAAA;AAMR,gBAAA;AAAA,EADC,SAAA;AAAS,GAPC,cAQX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAA;AAAS,GAbC,cAcX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAhBhB,cAiBX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAA;AAAS,GAnBC,cAoBX,WAAA,eAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAtBhB,cAuBX,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAzBhB,cA0BX,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA5BhB,cA6BX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GA/B/B,cAgCX,WAAA,YAAA,CAAA;AA4DA,gBAAA;AAAA,EADC,MAAM,CAAC,WAAW,OAAO,CAAC;AAAA,GA3FhB,cA4FX,WAAA,qBAAA,CAAA;AA5FW,gBAAN,gBAAA;AAAA,EADN,cAAc,cAAc;AAAA,GAChB,aAAA;"}
+{"version":3,"file":"checkbox.js","sources":["../../src/components/checkbox.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport './icon/icon.component.ts';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\nimport { watch } from '../internal/watch.ts';\nimport { requiredValidator } from '../mixins/validators.ts';\nimport { HasSlotController } from '../internal/slot.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-checkbox': MinidCheckbox;\n  }\n}\n\nconst styles = [\n  css`\n    .description {\n      color: var(--ds-color-neutral-text-subtle);\n    }\n  `,\n];\n\n/**\n * @slot -- The default slot for the label text of the checkbox\n * @slot description - The slot for the description text of the checkbox\n *\n * @csspart label - The checkbox's label.\n * @csspart description - The checkbox's description.\n * @csspart validation-message - The error message shown by `invalidmessage`.\n *\n * @event mid-change - Emitted when the checked state changes\n */\n\n@customElement('mid-checkbox')\nexport class MinidCheckbox extends FormControlMixin(\n  styled(LitElement, styles)\n) {\n  @query('input[type=\"checkbox\"]')\n  private input!: HTMLInputElement;\n\n  private readonly hasSlotController = new HasSlotController(\n    this,\n    'description'\n  );\n\n  private readonly descriptionId = 'description';\n  private readonly validationId = 'validation';\n\n  /**\n   * The name of the checkbox, submitted as a name/value pair with form data.\n   */\n  @property()\n  name = '';\n\n  /**\n   * The current value of the checkbox, submitted as a name/value pair with form data.\n   */\n  @property()\n  value = 'on';\n\n  @property({ type: Boolean })\n  checked = false;\n\n  @property()\n  description?: string;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean })\n  readonly = false;\n\n  @property({ type: Boolean })\n  invalid = false;\n\n  @property()\n  invalidmessage = '';\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  static get formControlValidators() {\n    return [requiredValidator];\n  }\n\n  shouldFormValueUpdate(): boolean {\n    return this.checked;\n  }\n\n  get validationTarget() {\n    return this.input;\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\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    }\n  }\n\n  private handleClick() {\n    this.checked = !this.checked;\n    // this.indeterminate = false;\n    this.dispatchEvent(new Event('mid-change'));\n  }\n\n  /**\n   * Simulates a click on the checkbox.\n   */\n  click() {\n    this.input.click();\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /**\n   * Removes focus from the checkbox.\n   */\n  blur() {\n    this.input.blur();\n  }\n\n  @watch(['checked', 'value'])\n  handleStateChange() {\n    // this.input.indeterminate = this.indeterminate; // force a sync update\n    this.setValue(this.value);\n  }\n\n  override render() {\n    const hasDescription =\n      !!this.description || this.hasSlotController.test('description');\n    const isInvalid = this.invalid || !!this.invalidmessage;\n    const describedBy =\n      [\n        hasDescription ? this.descriptionId : undefined,\n        this.invalidmessage ? this.validationId : undefined,\n      ]\n        .filter(Boolean)\n        .join(' ') || undefined;\n\n    // The description wrapper is aria-hidden. It is already announced through\n    // the aria-describedby above, and without this the text is also reachable as\n    // its own node when navigating the page, so it is read out twice.\n\n    return html`\n      <ds-field class=\"ds-field\">\n      <input\n      id=\"input\"\n      class=\"ds-input\"\n      type=\"checkbox\"\n      value=${ifDefined(this.value)}\n      .checked=${live(this.checked)}\n          ?disabled=${this.disabled}\n          ?checked=${this.checked}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          aria-invalid=${isInvalid ? 'true' : 'false'}\n          aria-describedby=${ifDefined(describedBy)}\n          aria-errormessage=${ifDefined(\n            this.invalidmessage ? this.validationId : undefined\n          )}\n          @click=${this.handleClick}\n          @keydown=${this.handleKeydown}\n          />\n        <label\n          class=\"ds-label\"\n          part=\"label\"\n          for=\"input\"\n        >\n          <slot></slot>\n        </label>\n        <div\n          class=\"description\"\n          id=\"${this.descriptionId}\"\n          aria-hidden=\"true\"\n        >\n          <slot\n            name=\"description\"\n            part=\"description\"\n          >\n            ${this.description}\n          </slot>\n        </div>\n        <p\n          class=\"${classMap({\n            'ds-validation-message': !!this.invalidmessage,\n          })}\"\n          part=\"validation-message\"\n          id=\"${this.validationId}\"\n          aria-live=\"polite\"\n        >\n          ${this.invalidmessage}\n        </p>\n      </ds-field>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -14,10 +14,13 @@ declare const MinidCodeInput_base: import('../types/mixin-constructor.ts').Const
  * @event {detail: { validity: ValidityState }} mid-invalid-show - Emitted when the error message should be shown
  *
  * @slot label - The input's label if you need to use HTML. Alternatively, you can use the `label` attribute.
+ * @slot description - The input's description if you need to use HTML. Alternatively, you can use the `description` attribute.
  *
  * @csspart input-container - The wrapper around the input elements. This can be used to adjust font-size.
+ * @csspart description - The description shown between the label and the character boxes.
  * @csspart character-boxes - The container for the visual character boxes.
  * @csspart character-box - An individual character box.
+ * @csspart validation-message - The error message shown by `invalidmessage`.
  *
  * @method focus - Focuses the input element
  * @method clear - Clears the input
@@ -25,10 +28,12 @@ declare const MinidCodeInput_base: import('../types/mixin-constructor.ts').Const
 export declare class MinidCodeInput extends MinidCodeInput_base {
     private readonly hasSlotControler;
     private readonly labelId;
+    private readonly descriptionId;
     private readonly validationId;
     private inputElement;
     value: string;
     label: string;
+    description: string;
     type: 'number' | 'text';
     /**
      * For displaying appropriate virtual keyboard
@@ -38,6 +43,7 @@ export declare class MinidCodeInput extends MinidCodeInput_base {
      * Adjusts the font-size of the code inputs
      */
     size: 'sm' | 'md' | 'lg';
+    labelsize?: 'sm' | 'md' | 'lg';
     /**
      * Number of input characters or digits
      */
@@ -59,6 +65,7 @@ export declare class MinidCodeInput extends MinidCodeInput_base {
      * Visually hides `label` (still available for screen readers)
      */
     hidelabel: boolean;
+    hidedescription: boolean;
     /**
      * Makes the input required
      */
@@ -68,13 +75,28 @@ export declare class MinidCodeInput extends MinidCodeInput_base {
      */
     pattern?: string;
     private isFocused;
+    private caretPosition;
     static get formControlValidators(): import('../types/validator.type.ts').Validator[];
     get validationTarget(): HTMLInputElement;
     protected firstUpdated(_changedProperties: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private handleBoxClick;
+    /**
+     * Catches caret moves we did not make - arrow keys, Home/End, word jumps,
+     * shift-selection - without enumerating keys, and keeps up while a key is held.
+     *
+     * Must be listened for on the document: for a caret move the user made,
+     * Chromium fires it only there, not at the input and not into the shadow root,
+     * so an `@selectionchange` binding on either never runs.
+     */
+    private handleSelectionChange;
+    private syncCaretPosition;
     private handleFocus;
     private handleBlur;
+    private filterValue;
     private handleBeforeInput;
+    private handlePaste;
     private handleInput;
     private handleChange;
     private handleKeydown;
@@ -82,6 +104,7 @@ export declare class MinidCodeInput extends MinidCodeInput_base {
     resetFormControl(): void;
     focus(options?: FocusOptions): void;
     handleLengthChange(): void;
+    handleValueChange(): void;
     render(): import('lit').TemplateResult<1>;
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"code-input.component.d.ts","sourceRoot":"","sources":["../../src/components/code-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAS5D,OAAO,0BAA0B,CAAC;AASlC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,cAAc,CAAC;KAClC;CACF;;AAmOD;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,cAAe,SAAQ,mBAEnC;IACC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAwC;IACzE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA4C;IACpE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAiD;IAG9E,OAAO,CAAC,YAAY,CAAoB;IAGxC,KAAK,SAAM;IAGX,KAAK,SAAM;IAGX,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAU;IAEjC;;OAEG;IAEH,SAAS,EAAE,SAAS,GAAG,MAAM,CAAa;IAE1C;;OAEG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,MAAM,SAAK;IAGX,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,OAAO,CAAC,SAAS,CAAS;IAE1B,MAAM,KAAK,qBAAqB,qDAO/B;IAED,IAAI,gBAAgB,qBAEnB;IAED,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAIhE,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,WAAW;IA2BnB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,aAAa;IAiBrB,KAAK;IAML,gBAAgB;IAIhB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAUnC,kBAAkB;IAMT,MAAM;CAkGhB"}
+{"version":3,"file":"code-input.component.d.ts","sourceRoot":"","sources":["../../src/components/code-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,cAAc,EAAE,MAAM,KAAK,CAAC;AASrE,OAAO,0BAA0B,CAAC;AASlC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,cAAc,CAAC;KAClC;CACF;;AA2PD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,cAAe,SAAQ,mBAEnC;IACC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAI/B;IACF,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA4C;IACpE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAkD;IAChF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAiD;IAG9E,OAAO,CAAC,YAAY,CAAoB;IAGxC,KAAK,SAAM;IAGX,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAU;IAEjC;;OAEG;IAEH,SAAS,EAAE,SAAS,GAAG,MAAM,CAAa;IAE1C;;OAEG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAGhC,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE/B;;OAEG;IAEH,MAAM,SAAK;IAGX,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,SAAS,UAAS;IAGlB,eAAe,UAAS;IAExB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,OAAO,CAAC,SAAS,CAAS;IAG1B,OAAO,CAAC,aAAa,CAAK;IAE1B,MAAM,KAAK,qBAAqB,qDAO/B;IAED,IAAI,gBAAgB,qBAEnB;IAED,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAIvD,iBAAiB;IAQjB,oBAAoB;IAQ7B,OAAO,CAAC,cAAc;IAYtB;;;;;;;OAOG;IACH,OAAO,CAAC,qBAAqB,CAK3B;IAEF,OAAO,CAAC,iBAAiB;IAazB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,WAAW;IAqCnB,OAAO,CAAC,WAAW;IA6BnB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,aAAa;IAiBrB,KAAK;IAOL,gBAAgB;IAIhB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAWnC,kBAAkB;IAOlB,iBAAiB;IAWR,MAAM;CAsIhB"}