@felleslosninger/minid-elements 0.0.138 → 0.1.0

package/dist/components/code-input.js

@@ -1,6 +1,7 @@
 import { css, LitElement, html } from "lit";
 import { query, property, state, customElement } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { live } from "lit/directives/live.js";
 import { watch } from "../internal/watch.js";
 import { FormControlMixin } from "../mixins/form-control.mixin.js";
@@ -22,86 +23,224 @@ var __decorateClass = (decorators, target, key, kind) => {
 let nextUniqueId = 0;
 const styles = [
   css`
-      :host {
-          display: block;
-      }
+    :host {
+      display: block;
+    }
 
-      .input-wrapper {
-          position: relative;
-          cursor: text;
-      }
+    .code-input-label {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.25rem;
+      margin-block-end: 0.5rem;
+      font-weight: 500;
+    }
 
-      .character-boxes {
-          display: inline-flex;
-          gap: 0.5rem; /* Corresponds to gap-2 in tailwind */
-      }
+    .code-input-label--hidden {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
 
-      .character-box {
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          position: relative;
-      }
+    .code-input-label--disabled,
+    .input-wrapper--disabled {
+      opacity: var(--ds-opacity-disabled, 0.38);
+    }
 
-      .hidden-input {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          padding: 0;
-          margin: 0;
-          background: transparent;
-          border: none;
-          color: transparent;
-          /* Hide the real caret */
-          caret-color: transparent;
-          font-size: 16px; /* Must be at least 16px to prevent ios from zooming in */
-          /* Allow clicks to pass through to elements underneath */
-          pointer-events: none;
-      }
+    .input-wrapper {
+      position: relative;
+      cursor: text;
+      width: fit-content;
+      font-size: 1rem;
+      line-height: 1.3;
+      font-weight: 500;
+    }
 
-      .hidden-input:focus {
-          outline: none;
-      }
+    .input-wrapper--sm {
+      font-size: var(--ds-heading-sm-font-size, 1.125rem);
+      line-height: var(--ds-heading-sm-line-height, 1.3);
+      font-weight: var(--ds-heading-sm-font-weight, 500);
+    }
 
-      .hidden-input:disabled {
-          cursor: not-allowed;
-      }
+    .input-wrapper--md {
+      font-size: var(--ds-heading-md-font-size, 1.25rem);
+      line-height: var(--ds-heading-md-line-height, 1.3);
+      font-weight: var(--ds-heading-md-font-weight, 500);
+    }
 
-      /* Fake caret using a CSS animation */
-      @keyframes blink {
-          0%,
-          100% {
-              opacity: 1;
-          }
-          50% {
-              opacity: 0;
-          }
-      }
+    .input-wrapper--lg {
+      font-size: var(--ds-heading-lg-font-size, 1.5rem);
+      line-height: var(--ds-heading-lg-line-height, 1.3);
+      font-weight: var(--ds-heading-lg-font-weight, 500);
+    }
 
-      .character-box--caret::after {
-          content: '';
-          position: absolute;
-          width: 2px;
-          height: 60%;
-          background-color: var(--color-accent-base, blue);
-          animation: blink 1s step-end infinite;
-      }
+    .input-wrapper--disabled {
+      cursor: not-allowed;
+    }
 
-      /* Hide placeholder circle when the caret is present */
-      .character-box--caret.character-box--empty {
-          color: transparent;
-      }
+    .character-boxes {
+      display: inline-flex;
+      gap: var(--mid-code-input-gap, 0.5rem);
+    }
+
+    .character-box {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      box-sizing: border-box;
+      width: var(--mid-code-input-box-size, var(--ds-size-13, 3.25rem));
+      height: var(--mid-code-input-box-size, var(--ds-size-13, 3.25rem));
+      padding-inline: 0.25rem;
+      user-select: none;
+      text-align: center;
+      font-family:
+        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+        'Liberation Mono', 'Courier New', monospace;
+      line-height: 1;
+      border: var(--ds-border-width-default, 1px) solid
+        var(
+          --mid-code-input-border-color,
+          var(--ds-color-neutral-border-default, #717a84)
+        );
+      border-radius: var(
+        --mid-code-input-border-radius,
+        var(--ds-border-radius-md, 0.25rem)
+      );
+      background-color: var(
+        --mid-code-input-background,
+        var(--ds-color-neutral-background-default, #ffffff)
+      );
+      color: var(--mid-code-input-text-color, inherit);
+    }
+
+    .character-box--empty {
+      color: var(
+        --mid-code-input-placeholder-color,
+        var(--ds-color-neutral-surface-active, #c7cacf)
+      );
+    }
+
+    .character-box--empty::before {
+      content: '';
+      box-sizing: border-box;
+      width: 0.55em;
+      height: 0.55em;
+      border: 2px solid currentColor;
+      border-radius: 50%;
+    }
+
+    .character-box--invalid {
+      border-width: 2px;
+      border-color: var(
+        --mid-code-input-danger-border-color,
+        var(--ds-color-danger-border-default, #ce4d4d)
+      );
+      background-color: var(
+        --mid-code-input-danger-background,
+        var(--ds-color-danger-surface-tinted, #f8e4e4)
+      );
+    }
+
+    .character-box--invalid.character-box--empty {
+      color: var(
+        --mid-code-input-danger-placeholder-color,
+        var(--ds-color-danger-surface-active, #edbfbf)
+      );
+    }
+
+    .focus-ring-sm {
+      outline: 2px solid var(--ds-color-focus-outer, #1f2c3d);
+      outline-offset: 2px;
+      box-shadow: 0 0 0 2px var(--ds-color-focus-inner, #ffffff);
+    }
+
+    /* Ensure hidden attribute always hides elements even when Tailwind's
+       @layer base [hidden] rule is not available in the shadow DOM */
+    [hidden] {
+      display: none !important;
+    }
+
+    .hidden-input {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      padding: 0;
+      margin: 0;
+      background: transparent;
+      border: none;
+      outline: none;
+      color: transparent;
+      caret-color: transparent;
+      font-size: 16px; /* Minimum 16px prevents iOS zoom on focus */
+      pointer-events: none;
+      -webkit-appearance: none;
+      appearance: none;
+    }
+
+    .hidden-input:focus {
+      outline: none;
+    }
+
+    .hidden-input:disabled {
+      cursor: not-allowed;
+    }
 
-      /* Hide increment/decrement buttons on inputs */
-      input[type='number']::-webkit-outer-spin-button,
-      input[type='number']::-webkit-inner-spin-button,
-      input[type='number'] {
-          -webkit-appearance: none;
-          margin: 0;
-          -moz-appearance: textfield !important;
+    @keyframes blink {
+      0%,
+      100% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0;
       }
+    }
+
+    .character-box--caret::after {
+      content: '';
+      position: absolute;
+      width: 2px;
+      height: 60%;
+      background-color: var(
+        --color-accent-base,
+        var(--ds-color-accent-base-default, blue)
+      );
+      animation: blink 1s step-end infinite;
+    }
+
+    /* Hide placeholder circle when the caret is at this position */
+    .character-box--caret.character-box--empty {
+      color: transparent;
+    }
+
+    /* Hide increment/decrement buttons on number inputs */
+    input[type='number']::-webkit-outer-spin-button,
+    input[type='number']::-webkit-inner-spin-button,
+    input[type='number'] {
+      -webkit-appearance: none;
+      margin: 0;
+      -moz-appearance: textfield !important;
+    }
+
+    .validation-message {
+      display: flex;
+      gap: 0.25rem;
+      margin-block-start: 0.5rem;
+      color: var(--ds-color-danger-text-subtle, #a22e2e);
+    }
+
+    .validation-icon {
+      margin-block-start: 0.25rem;
+      min-width: 1.25rem;
+      min-height: 1.25rem;
+    }
   `
 ];
 let MinidCodeInput = class extends FormControlMixin(
@@ -111,9 +250,10 @@ let MinidCodeInput = class extends FormControlMixin(
     super(...arguments);
     this.hasSlotControler = new HasSlotController(this, "label");
     this.labelId = `mid-code-input-label-${nextUniqueId++}`;
+    this.validationId = `mid-code-input-validation-${nextUniqueId++}`;
     this.value = "";
     this.label = "";
-    this.type = "number";
+    this.type = "text";
     this.inputmode = "numeric";
     this.size = "sm";
     this.length = 5;
@@ -147,6 +287,10 @@ let MinidCodeInput = class extends FormControlMixin(
   }
   handleFocus() {
     this.isFocused = true;
+    if (this.value.length > 0) {
+      const length = this.value.length;
+      this.inputElement.setSelectionRange(length, length);
+    }
   }
   handleBlur() {
     this.isFocused = false;
@@ -206,6 +350,10 @@ let MinidCodeInput = class extends FormControlMixin(
   }
   focus(options) {
     this.inputElement?.focus(options);
+    if (this.value.length > 0) {
+      const length = this.value.length;
+      this.inputElement.setSelectionRange(length, length);
+    }
   }
   handleLengthChange() {
     if (this.value.length > this.length) {
@@ -215,57 +363,55 @@ let MinidCodeInput = class extends FormControlMixin(
   render() {
     const hasLabelSlot = this.hasSlotControler.test("label");
     const hasLabel = !!this.label || !!hasLabelSlot;
+    const describedBy = this.invalidmessage ? this.validationId : void 0;
     const chars = this.value.split("");
     const displayValues = Array.from(
       { length: this.length },
       (_, i) => chars[i] || ""
     );
-    const caretIndex = this.disabled ? -1 : this.value.length;
+    const isComplete = this.value.length >= this.length;
+    const caretIndex = this.disabled || this.length === 0 ? -1 : Math.min(this.value.length, this.length - 1);
     return html`
       <label
         id="${this.labelId}"
-        class="${classMap({
-      "sr-only": this.hidelabel || !hasLabel,
-      "opacity-disabled": this.disabled
-    })} mb-2 block items-center gap-1 font-medium"
+        for="mid-code-input-hidden"
+        class="code-input-label ${classMap({
+      "code-input-label--hidden": this.hidelabel || !hasLabel,
+      "code-input-label--disabled": this.disabled
+    })}"
       >
         <slot name="label"> ${this.label} </slot>
       </label>
       <div
         part="input-container"
         class="input-wrapper ${classMap({
-      "text-heading-sm": this.size === "sm",
-      "text-heading-md": this.size === "md",
-      "text-heading-lg": this.size === "lg",
-      "opacity-disabled": this.disabled
+      "input-wrapper--sm": this.size === "sm",
+      "input-wrapper--md": this.size === "md",
+      "input-wrapper--lg": this.size === "lg",
+      "input-wrapper--disabled": this.disabled
     })}"
         @click=${() => this.focus()}
       >
-        <div part="character-boxes" class="character-boxes">
+        <div part="character-boxes" class="character-boxes" aria-hidden="true">
           ${displayValues.map((char, index) => {
-      const hasCaret = this.isFocused && index === caretIndex;
+      const isFocusTarget = this.isFocused && index === caretIndex;
+      const hasCaret = isFocusTarget && !isComplete;
       return html`
               <div
                 part="character-box"
+                aria-hidden="true"
                 class="character-box ${classMap({
-        "border": !this.invalidmessage,
-        "border-2": this.invalidmessage,
-        "border-neutral": !this.invalidmessage,
-        "border-danger": this.invalidmessage,
-        "bg-neutral": !this.invalidmessage,
-        "bg-danger-tinted": this.invalidmessage,
-        "text-neutral-surface-active": !char && !this.invalidmessage,
-        "text-danger-surface-active": !char && this.invalidmessage,
+        "character-box--invalid": !!this.invalidmessage,
         "character-box--caret": hasCaret,
         "character-box--empty": !char,
-        "focus-ring-sm": hasCaret
-      })} size-9 rounded-md text-center font-mono"
+        "focus-ring-sm": isFocusTarget
+      })}"
                 @click=${(e) => {
         e.stopPropagation();
         this.handleBoxClick(index);
       }}
               >
-                ${char || "○"}
+                ${char}
               </div>
             `;
     })}
@@ -276,11 +422,16 @@ let MinidCodeInput = class extends FormControlMixin(
           id="mid-code-input-hidden"
           type="${this.type}"
           aria-labelledby="${this.labelId}"
+          aria-describedby=${ifDefined(describedBy)}
+          aria-invalid=${this.invalidmessage ? "true" : "false"}
+          aria-errormessage=${ifDefined(
+      this.invalidmessage ? this.validationId : void 0
+    )}
           maxlength="${this.length}"
           ?autofocus="${this.autofocus}"
           ?disabled="${this.disabled}"
           ?required="${this.required}"
-          .pattern="${this.pattern}"
+          pattern=${ifDefined(this.pattern)}
           inputmode="${this.inputmode}"
           autocomplete="one-time-code"
           @beforeinput="${this.handleBeforeInput}"
@@ -292,14 +443,12 @@ let MinidCodeInput = class extends FormControlMixin(
         />
       </div>
       <div
-        class="text-danger-subtle mt-2 flex gap-1"
+        class="validation-message"
+        id="${this.validationId}"
         aria-live="polite"
         ?hidden=${!this.invalidmessage}
       >
-        <mid-icon
-          name="xmark-octagon-fill"
-          class="mt-1 min-h-5 min-w-5"
-        ></mid-icon>
+        <mid-icon name="xmark-octagon-fill" class="validation-icon"></mid-icon>
         ${this.invalidmessage}
       </div>
     `;

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

@@ -1 +1 @@
-{"version":3,"file":"code-input.js","sources":["../../src/components/code-input.component.ts"],"sourcesContent":["import { css, html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { watch } from '../internal/watch.ts';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { HasSlotController } from '../internal/slot.ts';\nimport './icon/icon.component.ts';\nimport {\n  maxLengthValidator,\n  minLengthValidator,\n  patternValidator,\n  requiredValidator,\n} from '../mixins/validators.ts';\nimport { webOtpApiInit } from '../utilities/web-otp-api.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-code-input': MinidCodeInput;\n  }\n}\n\nlet nextUniqueId = 0;\n\nconst styles = [\n  css`\n      :host {\n          display: block;\n      }\n\n      .input-wrapper {\n          position: relative;\n          cursor: text;\n      }\n\n      .character-boxes {\n          display: inline-flex;\n          gap: 0.5rem; /* Corresponds to gap-2 in tailwind */\n      }\n\n      .character-box {\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          position: relative;\n      }\n\n      .hidden-input {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          padding: 0;\n          margin: 0;\n          background: transparent;\n          border: none;\n          color: transparent;\n          /* Hide the real caret */\n          caret-color: transparent;\n          font-size: 16px; /* Must be at least 16px to prevent ios from zooming in */\n          /* Allow clicks to pass through to elements underneath */\n          pointer-events: none;\n      }\n\n      .hidden-input:focus {\n          outline: none;\n      }\n\n      .hidden-input:disabled {\n          cursor: not-allowed;\n      }\n\n      /* Fake caret using a CSS animation */\n      @keyframes blink {\n          0%,\n          100% {\n              opacity: 1;\n          }\n          50% {\n              opacity: 0;\n          }\n      }\n\n      .character-box--caret::after {\n          content: '';\n          position: absolute;\n          width: 2px;\n          height: 60%;\n          background-color: var(--color-accent-base, blue);\n          animation: blink 1s step-end infinite;\n      }\n\n      /* Hide placeholder circle when the caret is present */\n      .character-box--caret.character-box--empty {\n          color: transparent;\n      }\n\n      /* Hide increment/decrement buttons on inputs */\n      input[type='number']::-webkit-outer-spin-button,\n      input[type='number']::-webkit-inner-spin-button,\n      input[type='number'] {\n          -webkit-appearance: none;\n          margin: 0;\n          -moz-appearance: textfield !important;\n      }\n  `,\n];\n\n/**\n *\n * @event mid-change - Emitted when a change to the input value is comitted by the user\n * @event mid-input - Emitted when the input element recieves input\n * @event mid-complete - Emitted when all characters have been entered.\n * @event {detail: { validity: ValidityState }} mid-invalid-hide - Emitted when the error message should be hidden\n * @event {detail: { validity: ValidityState }} mid-invalid-show - Emitted when the error message should be shown\n *\n * @slot label - The input's label if you need to use HTML. Alternatively, you can use the `label` attribute.\n *\n * @csspart input-container - The wrapper around the input elements. This can be used to adjust font-size.\n * @csspart character-boxes - The container for the visual character boxes.\n * @csspart character-box - An individual character box.\n *\n * @method focus - Focuses the input element\n * @method clear - Clears the input\n */\n@customElement('mid-code-input')\nexport class MinidCodeInput extends FormControlMixin(\n  styled(LitElement, styles)\n) {\n  private readonly hasSlotControler = new HasSlotController(this, 'label');\n  private readonly labelId = `mid-code-input-label-${nextUniqueId++}`;\n\n  @query('.hidden-input')\n  private inputElement!: HTMLInputElement;\n\n  @property({ reflect: true })\n  value = '';\n\n  @property()\n  label = '';\n\n  @property()\n  type: 'number' | 'text' = 'number';\n\n  /**\n   * For displaying appropriate virtual keyboard\n   */\n  @property()\n  inputmode: 'numeric' | 'text' = 'numeric';\n\n  /**\n   * Adjusts the font-size of the code inputs\n   */\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'sm';\n\n  /**\n   * Number of input characters or digits\n   */\n  @property({ type: Number })\n  length = 5;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Focuses the first input element on page load\n   */\n  @property({ type: Boolean })\n  autofocus = false;\n\n  /**\n   *  The minimum length of input that will be considered valid.\n   */\n  @property({ type: Number })\n  minlength?: number;\n\n  /**\n   * Error message to display when the input is invalid, also activates invalid styling\n   */\n  @property()\n  invalidmessage = '';\n\n  /**\n   * Visually hides `label` (still available for screen readers)\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  /**\n   * Makes the input required\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * A regular expression pattern to validate input against.\n   */\n  @property()\n  pattern?: string;\n\n  @state()\n  private isFocused = false;\n\n  static get formControlValidators() {\n    return [\n      requiredValidator,\n      maxLengthValidator,\n      minLengthValidator,\n      patternValidator,\n    ];\n  }\n\n  get validationTarget() {\n    return this.inputElement;\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    webOtpApiInit(this.renderRoot);\n  }\n\n  private handleBoxClick(index: number) {\n    if (this.disabled) {\n      return;\n    }\n\n    // Truncate the value to the clicked position\n    this.value = this.value.substring(0, index);\n\n    // Focus the input to move the caret\n    this.focus();\n  }\n\n  private handleFocus() {\n    this.isFocused = true;\n  }\n\n  private handleBlur() {\n    this.isFocused = false;\n  }\n\n  private handleBeforeInput(e: InputEvent) {\n    if (e.inputType === 'insertText' && e.data) {\n      if(this.type == \"number\" && e.data.replace(/\\D/g, '') == ''){\n        e.preventDefault();\n      }\n    }\n  }\n\n  private handleInput(event: InputEvent) {\n    const input = event.target as HTMLInputElement;\n    let value = input.value;\n\n    value = value.substring(0, this.length);\n\n    if (input.value !== value) {\n      input.value = value;\n    }\n\n    // Update the component's public `value` property if it has changed.\n    if (this.value !== value) {\n      this.value = value;\n      this.setValue(value);\n    }\n\n    this.inputElement.dispatchEvent(\n      new Event('mid-input', { bubbles: true, composed: true }),\n    );\n\n    if (this.value.length === this.length && this.value.length > 0) {\n      this.inputElement.dispatchEvent(\n        new Event('mid-complete', { bubbles: true, composed: true }),\n      );\n    }\n\n  }\n\n  private handleChange() {\n    this.inputElement.dispatchEvent(\n      new Event('mid-change', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    const hasModifier =\n      event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    if (event.key === 'Enter' && !hasModifier) {\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      setTimeout(() => {\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  clear() {\n    this.value = '';\n    this.setValue('');\n    this.invalidmessage = '';\n  }\n\n  resetFormControl() {\n    this.clear();\n  }\n\n\n  focus(options?: FocusOptions): void {\n    this.inputElement?.focus(options);\n  }\n\n  @watch('length')\n  handleLengthChange() {\n    if (this.value.length > this.length) {\n      this.value = this.value.substring(0, this.length);\n    }\n  }\n\n\n  override render() {\n    const hasLabelSlot = this.hasSlotControler.test('label');\n    const hasLabel = !!this.label || !!hasLabelSlot;\n\n    const chars = this.value.split('');\n    const displayValues = Array.from(\n      { length: this.length },\n      (_, i) => chars[i] || '',\n    );\n    const caretIndex = this.disabled ? -1 : this.value.length;\n\n    return html`\n      <label\n        id=\"${this.labelId}\"\n        class=\"${classMap({\n      'sr-only': this.hidelabel || !hasLabel,\n      'opacity-disabled': this.disabled,\n    })} mb-2 block items-center gap-1 font-medium\"\n      >\n        <slot name=\"label\"> ${this.label} </slot>\n      </label>\n      <div\n        part=\"input-container\"\n        class=\"input-wrapper ${classMap({\n      'text-heading-sm': this.size === 'sm',\n      'text-heading-md': this.size === 'md',\n      'text-heading-lg': this.size === 'lg',\n      'opacity-disabled': this.disabled,\n    })}\"\n        @click=${() => this.focus()}\n      >\n        <div part=\"character-boxes\" class=\"character-boxes\">\n          ${displayValues.map((char, index) => {\n      const hasCaret = this.isFocused && index === caretIndex;\n      return html`\n              <div\n                part=\"character-box\"\n                class=\"character-box ${classMap({\n        'border': !this.invalidmessage,\n        'border-2': this.invalidmessage,\n        'border-neutral': !this.invalidmessage,\n        'border-danger': this.invalidmessage,\n        'bg-neutral': !this.invalidmessage,\n        'bg-danger-tinted': this.invalidmessage,\n        'text-neutral-surface-active':\n          !char && !this.invalidmessage,\n        'text-danger-surface-active': !char && this.invalidmessage,\n        'character-box--caret': hasCaret,\n        'character-box--empty': !char,\n        'focus-ring-sm': hasCaret,\n      })} size-9 rounded-md text-center font-mono\"\n                @click=${(e: MouseEvent) => {\n        e.stopPropagation();\n        this.handleBoxClick(index);\n      }}\n              >\n                ${char || '○'}\n              </div>\n            `;\n    })}\n        </div>\n        <input\n          class=\"hidden-input\"\n          .value=\"${live(this.value)}\"\n          id=\"mid-code-input-hidden\"\n          type=\"${this.type}\"\n          aria-labelledby=\"${this.labelId}\"\n          maxlength=\"${this.length}\"\n          ?autofocus=\"${this.autofocus}\"\n          ?disabled=\"${this.disabled}\"\n          ?required=\"${this.required}\"\n          .pattern=\"${this.pattern}\"\n          inputmode=\"${this.inputmode}\"\n          autocomplete=\"one-time-code\"\n          @beforeinput=\"${this.handleBeforeInput}\"\n          @input=\"${this.handleInput}\"\n          @change=\"${this.handleChange}\"\n          @keydown=\"${this.handleKeydown}\"\n          @focus=\"${this.handleFocus}\"\n          @blur=\"${this.handleBlur}\"\n        />\n      </div>\n      <div\n        class=\"text-danger-subtle mt-2 flex gap-1\"\n        aria-live=\"polite\"\n        ?hidden=${!this.invalidmessage}\n      >\n        <mid-icon\n          name=\"xmark-octagon-fill\"\n          class=\"mt-1 min-h-5 min-w-5\"\n        ></mid-icon>\n        ${this.invalidmessage}\n      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuBA,IAAI,eAAe;AAEnB,MAAM,SAAS;AAAA,EACb;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;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;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;AAkFF;AAoBO,IAAM,iBAAN,cAA6B;AAAA,EAClC,OAAO,YAAY,MAAM;AAC3B,EAAE;AAAA,EAFK,cAAA;AAAA,UAAA,GAAA,SAAA;AAGL,SAAiB,mBAAmB,IAAI,kBAAkB,MAAM,OAAO;AACvE,SAAiB,UAAU,wBAAwB,cAAc;AAMjE,SAAA,QAAQ;AAGR,SAAA,QAAQ;AAGR,SAAA,OAA0B;AAM1B,SAAA,YAAgC;AAMhC,SAAA,OAA2B;AAM3B,SAAA,SAAS;AAGT,SAAA,WAAW;AAMX,SAAA,YAAY;AAYZ,SAAA,iBAAiB;AAMjB,SAAA,YAAY;AAMZ,SAAA,WAAW;AASX,SAAQ,YAAY;AAAA,EAAA;AAAA,EAEpB,WAAW,wBAAwB;AACjC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AAAA,EAEA,IAAI,mBAAmB;AACrB,WAAO,KAAK;AAAA,EACd;AAAA,EAEU,aAAa,oBAA0C;AAC/D,kBAAc,KAAK,UAAU;AAAA,EAC/B;AAAA,EAEQ,eAAe,OAAe;AACpC,QAAI,KAAK,UAAU;AACjB;AAAA,IACF;AAGA,SAAK,QAAQ,KAAK,MAAM,UAAU,GAAG,KAAK;AAG1C,SAAK,MAAA;AAAA,EACP;AAAA,EAEQ,cAAc;AACpB,SAAK,YAAY;AAAA,EACnB;AAAA,EAEQ,aAAa;AACnB,SAAK,YAAY;AAAA,EACnB;AAAA,EAEQ,kBAAkB,GAAe;AACvC,QAAI,EAAE,cAAc,gBAAgB,EAAE,MAAM;AAC1C,UAAG,KAAK,QAAQ,YAAY,EAAE,KAAK,QAAQ,OAAO,EAAE,KAAK,IAAG;AAC1D,UAAE,eAAA;AAAA,MACJ;AAAA,IACF;AAAA,EACF;AAAA,EAEQ,YAAY,OAAmB;AACrC,UAAM,QAAQ,MAAM;AACpB,QAAI,QAAQ,MAAM;AAElB,YAAQ,MAAM,UAAU,GAAG,KAAK,MAAM;AAEtC,QAAI,MAAM,UAAU,OAAO;AACzB,YAAM,QAAQ;AAAA,IAChB;AAGA,QAAI,KAAK,UAAU,OAAO;AACxB,WAAK,QAAQ;AACb,WAAK,SAAS,KAAK;AAAA,IACrB;AAEA,SAAK,aAAa;AAAA,MAChB,IAAI,MAAM,aAAa,EAAE,SAAS,MAAM,UAAU,MAAM;AAAA,IAAA;AAG1D,QAAI,KAAK,MAAM,WAAW,KAAK,UAAU,KAAK,MAAM,SAAS,GAAG;AAC9D,WAAK,aAAa;AAAA,QAChB,IAAI,MAAM,gBAAgB,EAAE,SAAS,MAAM,UAAU,MAAM;AAAA,MAAA;AAAA,IAE/D;AAAA,EAEF;AAAA,EAEQ,eAAe;AACrB,SAAK,aAAa;AAAA,MAChB,IAAI,MAAM,cAAc;AAAA,QACtB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAEQ,cAAc,OAAsB;AAC1C,UAAM,cACJ,MAAM,WAAW,MAAM,WAAW,MAAM,YAAY,MAAM;AAE5D,QAAI,MAAM,QAAQ,WAAW,CAAC,aAAa;AAGzC,iBAAW,MAAM;AAGf,YAAI,CAAC,MAAM,oBAAoB,CAAC,MAAM,aAAa;AACjD,eAAK,MAAM,cAAA;AAAA,QACb;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,QAAQ;AACN,SAAK,QAAQ;AACb,SAAK,SAAS,EAAE;AAChB,SAAK,iBAAiB;AAAA,EACxB;AAAA,EAEA,mBAAmB;AACjB,SAAK,MAAA;AAAA,EACP;AAAA,EAGA,MAAM,SAA8B;AAClC,SAAK,cAAc,MAAM,OAAO;AAAA,EAClC;AAAA,EAGA,qBAAqB;AACnB,QAAI,KAAK,MAAM,SAAS,KAAK,QAAQ;AACnC,WAAK,QAAQ,KAAK,MAAM,UAAU,GAAG,KAAK,MAAM;AAAA,IAClD;AAAA,EACF;AAAA,EAGS,SAAS;AAChB,UAAM,eAAe,KAAK,iBAAiB,KAAK,OAAO;AACvD,UAAM,WAAW,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC;AAEnC,UAAM,QAAQ,KAAK,MAAM,MAAM,EAAE;AACjC,UAAM,gBAAgB,MAAM;AAAA,MAC1B,EAAE,QAAQ,KAAK,OAAA;AAAA,MACf,CAAC,GAAG,MAAM,MAAM,CAAC,KAAK;AAAA,IAAA;AAExB,UAAM,aAAa,KAAK,WAAW,KAAK,KAAK,MAAM;AAEnD,WAAO;AAAA;AAAA,cAEG,KAAK,OAAO;AAAA,iBACT,SAAS;AAAA,MACpB,WAAW,KAAK,aAAa,CAAC;AAAA,MAC9B,oBAAoB,KAAK;AAAA,IAAA,CAC1B,CAAC;AAAA;AAAA,8BAEwB,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA,+BAIT,SAAS;AAAA,MAClC,mBAAmB,KAAK,SAAS;AAAA,MACjC,mBAAmB,KAAK,SAAS;AAAA,MACjC,mBAAmB,KAAK,SAAS;AAAA,MACjC,oBAAoB,KAAK;AAAA,IAAA,CAC1B,CAAC;AAAA,iBACW,MAAM,KAAK,MAAA,CAAO;AAAA;AAAA;AAAA,YAGvB,cAAc,IAAI,CAAC,MAAM,UAAU;AACzC,YAAM,WAAW,KAAK,aAAa,UAAU;AAC7C,aAAO;AAAA;AAAA;AAAA,uCAG0B,SAAS;AAAA,QACxC,UAAU,CAAC,KAAK;AAAA,QAChB,YAAY,KAAK;AAAA,QACjB,kBAAkB,CAAC,KAAK;AAAA,QACxB,iBAAiB,KAAK;AAAA,QACtB,cAAc,CAAC,KAAK;AAAA,QACpB,oBAAoB,KAAK;AAAA,QACzB,+BACE,CAAC,QAAQ,CAAC,KAAK;AAAA,QACjB,8BAA8B,CAAC,QAAQ,KAAK;AAAA,QAC5C,wBAAwB;AAAA,QACxB,wBAAwB,CAAC;AAAA,QACzB,iBAAiB;AAAA,MAAA,CAClB,CAAC;AAAA,yBACiB,CAAC,MAAkB;AACpC,UAAE,gBAAA;AACF,aAAK,eAAe,KAAK;AAAA,MAC3B,CAAC;AAAA;AAAA,kBAEW,QAAQ,GAAG;AAAA;AAAA;AAAA,IAGzB,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,oBAIc,KAAK,KAAK,KAAK,CAAC;AAAA;AAAA,kBAElB,KAAK,IAAI;AAAA,6BACE,KAAK,OAAO;AAAA,uBAClB,KAAK,MAAM;AAAA,wBACV,KAAK,SAAS;AAAA,uBACf,KAAK,QAAQ;AAAA,uBACb,KAAK,QAAQ;AAAA,sBACd,KAAK,OAAO;AAAA,uBACX,KAAK,SAAS;AAAA;AAAA,0BAEX,KAAK,iBAAiB;AAAA,oBAC5B,KAAK,WAAW;AAAA,qBACf,KAAK,YAAY;AAAA,sBAChB,KAAK,aAAa;AAAA,oBACpB,KAAK,WAAW;AAAA,mBACjB,KAAK,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMhB,CAAC,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAM5B,KAAK,cAAc;AAAA;AAAA;AAAA,EAG3B;AACF;AAhSU,gBAAA;AAAA,EADP,MAAM,eAAe;AAAA,GANX,eAOH,WAAA,gBAAA,CAAA;AAGR,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GAThB,eAUX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAA;AAAS,GAZC,eAaX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAA;AAAS,GAfC,eAgBX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAA;AAAS,GArBC,eAsBX,WAAA,aAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAA;AAAS,GA3BC,eA4BX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjCf,eAkCX,WAAA,UAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GApChB,eAqCX,WAAA,YAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA1ChB,eA2CX,WAAA,aAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhDf,eAiDX,WAAA,aAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAA;AAAS,GAtDC,eAuDX,WAAA,kBAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA5DhB,eA6DX,WAAA,aAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAlEhB,eAmEX,WAAA,YAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAA;AAAS,GAxEC,eAyEX,WAAA,WAAA,CAAA;AAGQ,gBAAA;AAAA,EADP,MAAA;AAAM,GA3EI,eA4EH,WAAA,aAAA,CAAA;AAqHR,gBAAA;AAAA,EADC,MAAM,QAAQ;AAAA,GAhMJ,eAiMX,WAAA,sBAAA,CAAA;AAjMW,iBAAN,gBAAA;AAAA,EADN,cAAc,gBAAgB;AAAA,GAClB,cAAA;"}
+{"version":3,"file":"code-input.js","sources":["../../src/components/code-input.component.ts"],"sourcesContent":["import { css, html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { watch } from '../internal/watch.ts';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { HasSlotController } from '../internal/slot.ts';\nimport './icon/icon.component.ts';\nimport {\n  maxLengthValidator,\n  minLengthValidator,\n  patternValidator,\n  requiredValidator,\n} from '../mixins/validators.ts';\nimport { webOtpApiInit } from '../utilities/web-otp-api.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-code-input': MinidCodeInput;\n  }\n}\n\nlet nextUniqueId = 0;\n\nconst styles = [\n  css`\n    :host {\n      display: block;\n    }\n\n    .code-input-label {\n      display: inline-flex;\n      align-items: center;\n      gap: 0.25rem;\n      margin-block-end: 0.5rem;\n      font-weight: 500;\n    }\n\n    .code-input-label--hidden {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    }\n\n    .code-input-label--disabled,\n    .input-wrapper--disabled {\n      opacity: var(--ds-opacity-disabled, 0.38);\n    }\n\n    .input-wrapper {\n      position: relative;\n      cursor: text;\n      width: fit-content;\n      font-size: 1rem;\n      line-height: 1.3;\n      font-weight: 500;\n    }\n\n    .input-wrapper--sm {\n      font-size: var(--ds-heading-sm-font-size, 1.125rem);\n      line-height: var(--ds-heading-sm-line-height, 1.3);\n      font-weight: var(--ds-heading-sm-font-weight, 500);\n    }\n\n    .input-wrapper--md {\n      font-size: var(--ds-heading-md-font-size, 1.25rem);\n      line-height: var(--ds-heading-md-line-height, 1.3);\n      font-weight: var(--ds-heading-md-font-weight, 500);\n    }\n\n    .input-wrapper--lg {\n      font-size: var(--ds-heading-lg-font-size, 1.5rem);\n      line-height: var(--ds-heading-lg-line-height, 1.3);\n      font-weight: var(--ds-heading-lg-font-weight, 500);\n    }\n\n    .input-wrapper--disabled {\n      cursor: not-allowed;\n    }\n\n    .character-boxes {\n      display: inline-flex;\n      gap: var(--mid-code-input-gap, 0.5rem);\n    }\n\n    .character-box {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      position: relative;\n      box-sizing: border-box;\n      width: var(--mid-code-input-box-size, var(--ds-size-13, 3.25rem));\n      height: var(--mid-code-input-box-size, var(--ds-size-13, 3.25rem));\n      padding-inline: 0.25rem;\n      user-select: none;\n      text-align: center;\n      font-family:\n        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n        'Liberation Mono', 'Courier New', monospace;\n      line-height: 1;\n      border: var(--ds-border-width-default, 1px) solid\n        var(\n          --mid-code-input-border-color,\n          var(--ds-color-neutral-border-default, #717a84)\n        );\n      border-radius: var(\n        --mid-code-input-border-radius,\n        var(--ds-border-radius-md, 0.25rem)\n      );\n      background-color: var(\n        --mid-code-input-background,\n        var(--ds-color-neutral-background-default, #ffffff)\n      );\n      color: var(--mid-code-input-text-color, inherit);\n    }\n\n    .character-box--empty {\n      color: var(\n        --mid-code-input-placeholder-color,\n        var(--ds-color-neutral-surface-active, #c7cacf)\n      );\n    }\n\n    .character-box--empty::before {\n      content: '';\n      box-sizing: border-box;\n      width: 0.55em;\n      height: 0.55em;\n      border: 2px solid currentColor;\n      border-radius: 50%;\n    }\n\n    .character-box--invalid {\n      border-width: 2px;\n      border-color: var(\n        --mid-code-input-danger-border-color,\n        var(--ds-color-danger-border-default, #ce4d4d)\n      );\n      background-color: var(\n        --mid-code-input-danger-background,\n        var(--ds-color-danger-surface-tinted, #f8e4e4)\n      );\n    }\n\n    .character-box--invalid.character-box--empty {\n      color: var(\n        --mid-code-input-danger-placeholder-color,\n        var(--ds-color-danger-surface-active, #edbfbf)\n      );\n    }\n\n    .focus-ring-sm {\n      outline: 2px solid var(--ds-color-focus-outer, #1f2c3d);\n      outline-offset: 2px;\n      box-shadow: 0 0 0 2px var(--ds-color-focus-inner, #ffffff);\n    }\n\n    /* Ensure hidden attribute always hides elements even when Tailwind's\n       @layer base [hidden] rule is not available in the shadow DOM */\n    [hidden] {\n      display: none !important;\n    }\n\n    .hidden-input {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      padding: 0;\n      margin: 0;\n      background: transparent;\n      border: none;\n      outline: none;\n      color: transparent;\n      caret-color: transparent;\n      font-size: 16px; /* Minimum 16px prevents iOS zoom on focus */\n      pointer-events: none;\n      -webkit-appearance: none;\n      appearance: none;\n    }\n\n    .hidden-input:focus {\n      outline: none;\n    }\n\n    .hidden-input:disabled {\n      cursor: not-allowed;\n    }\n\n    @keyframes blink {\n      0%,\n      100% {\n        opacity: 1;\n      }\n      50% {\n        opacity: 0;\n      }\n    }\n\n    .character-box--caret::after {\n      content: '';\n      position: absolute;\n      width: 2px;\n      height: 60%;\n      background-color: var(\n        --color-accent-base,\n        var(--ds-color-accent-base-default, blue)\n      );\n      animation: blink 1s step-end infinite;\n    }\n\n    /* Hide placeholder circle when the caret is at this position */\n    .character-box--caret.character-box--empty {\n      color: transparent;\n    }\n\n    /* Hide increment/decrement buttons on number inputs */\n    input[type='number']::-webkit-outer-spin-button,\n    input[type='number']::-webkit-inner-spin-button,\n    input[type='number'] {\n      -webkit-appearance: none;\n      margin: 0;\n      -moz-appearance: textfield !important;\n    }\n\n    .validation-message {\n      display: flex;\n      gap: 0.25rem;\n      margin-block-start: 0.5rem;\n      color: var(--ds-color-danger-text-subtle, #a22e2e);\n    }\n\n    .validation-icon {\n      margin-block-start: 0.25rem;\n      min-width: 1.25rem;\n      min-height: 1.25rem;\n    }\n  `,\n];\n\n/**\n *\n * @event mid-change - Emitted when a change to the input value is comitted by the user\n * @event mid-input - Emitted when the input element recieves input\n * @event mid-complete - Emitted when all characters have been entered.\n * @event {detail: { validity: ValidityState }} mid-invalid-hide - Emitted when the error message should be hidden\n * @event {detail: { validity: ValidityState }} mid-invalid-show - Emitted when the error message should be shown\n *\n * @slot label - The input's label if you need to use HTML. Alternatively, you can use the `label` attribute.\n *\n * @csspart input-container - The wrapper around the input elements. This can be used to adjust font-size.\n * @csspart character-boxes - The container for the visual character boxes.\n * @csspart character-box - An individual character box.\n *\n * @method focus - Focuses the input element\n * @method clear - Clears the input\n */\n@customElement('mid-code-input')\nexport class MinidCodeInput extends FormControlMixin(\n  styled(LitElement, styles)\n) {\n  private readonly hasSlotControler = new HasSlotController(this, 'label');\n  private readonly labelId = `mid-code-input-label-${nextUniqueId++}`;\n  private readonly validationId = `mid-code-input-validation-${nextUniqueId++}`;\n\n  @query('.hidden-input')\n  private inputElement!: HTMLInputElement;\n\n  @property({ reflect: true })\n  value = '';\n\n  @property()\n  label = '';\n\n  @property()\n  type: 'number' | 'text' = 'text';\n\n  /**\n   * For displaying appropriate virtual keyboard\n   */\n  @property()\n  inputmode: 'numeric' | 'text' = 'numeric';\n\n  /**\n   * Adjusts the font-size of the code inputs\n   */\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'sm';\n\n  /**\n   * Number of input characters or digits\n   */\n  @property({ type: Number })\n  length = 5;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Focuses the first input element on page load\n   */\n  @property({ type: Boolean })\n  autofocus = false;\n\n  /**\n   *  The minimum length of input that will be considered valid.\n   */\n  @property({ type: Number })\n  minlength?: number;\n\n  /**\n   * Error message to display when the input is invalid, also activates invalid styling\n   */\n  @property()\n  invalidmessage = '';\n\n  /**\n   * Visually hides `label` (still available for screen readers)\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  /**\n   * Makes the input required\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * A regular expression pattern to validate input against.\n   */\n  @property()\n  pattern?: string;\n\n  @state()\n  private isFocused = false;\n\n  static get formControlValidators() {\n    return [\n      requiredValidator,\n      maxLengthValidator,\n      minLengthValidator,\n      patternValidator,\n    ];\n  }\n\n  get validationTarget() {\n    return this.inputElement;\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    webOtpApiInit(this.renderRoot);\n  }\n\n  private handleBoxClick(index: number) {\n    if (this.disabled) {\n      return;\n    }\n\n    // Truncate the value to the clicked position\n    this.value = this.value.substring(0, index);\n\n    // Focus the input to move the caret\n    this.focus();\n  }\n\n  private handleFocus() {\n    this.isFocused = true;\n    /* don't select text, move caret to the end */\n    if (this.value.length > 0) {\n      const length = this.value.length;\n      this.inputElement.setSelectionRange(length, length);\n    }\n  }\n\n  private handleBlur() {\n    this.isFocused = false;\n  }\n\n  private handleBeforeInput(e: InputEvent) {\n    if (e.inputType === 'insertText' && e.data) {\n      if (this.type == 'number' && e.data.replace(/\\D/g, '') == '') {\n        e.preventDefault();\n      }\n    }\n  }\n\n  private handleInput(event: InputEvent) {\n    const input = event.target as HTMLInputElement;\n    let value = input.value;\n\n    value = value.substring(0, this.length);\n\n    if (input.value !== value) {\n      input.value = value;\n    }\n\n    // Update the component's public `value` property if it has changed.\n    if (this.value !== value) {\n      this.value = value;\n      this.setValue(value);\n    }\n\n    this.inputElement.dispatchEvent(\n      new Event('mid-input', { bubbles: true, composed: true })\n    );\n\n    if (this.value.length === this.length && this.value.length > 0) {\n      this.inputElement.dispatchEvent(\n        new Event('mid-complete', { bubbles: true, composed: true })\n      );\n    }\n  }\n\n  private handleChange() {\n    this.inputElement.dispatchEvent(\n      new Event('mid-change', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    const hasModifier =\n      event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    if (event.key === 'Enter' && !hasModifier) {\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      setTimeout(() => {\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  clear() {\n    this.value = '';\n    this.setValue('');\n    this.invalidmessage = '';\n  }\n\n  resetFormControl() {\n    this.clear();\n  }\n\n  focus(options?: FocusOptions): void {\n    this.inputElement?.focus(options);\n    /* don't select text, move caret to the end */\n    if (this.value.length > 0) {\n      const length = this.value.length;\n      this.inputElement.setSelectionRange(length, length);\n    }\n  }\n\n  @watch('length')\n  handleLengthChange() {\n    if (this.value.length > this.length) {\n      this.value = this.value.substring(0, this.length);\n    }\n  }\n\n  override render() {\n    const hasLabelSlot = this.hasSlotControler.test('label');\n    const hasLabel = !!this.label || !!hasLabelSlot;\n    const describedBy = this.invalidmessage ? this.validationId : undefined;\n\n    const chars = this.value.split('');\n    const displayValues = Array.from(\n      { length: this.length },\n      (_, i) => chars[i] || ''\n    );\n    const isComplete = this.value.length >= this.length;\n    const caretIndex =\n      this.disabled || this.length === 0\n        ? -1\n        : Math.min(this.value.length, this.length - 1);\n\n    return html`\n      <label\n        id=\"${this.labelId}\"\n        for=\"mid-code-input-hidden\"\n        class=\"code-input-label ${classMap({\n          'code-input-label--hidden': this.hidelabel || !hasLabel,\n          'code-input-label--disabled': this.disabled,\n        })}\"\n      >\n        <slot name=\"label\"> ${this.label} </slot>\n      </label>\n      <div\n        part=\"input-container\"\n        class=\"input-wrapper ${classMap({\n          'input-wrapper--sm': this.size === 'sm',\n          'input-wrapper--md': this.size === 'md',\n          'input-wrapper--lg': this.size === 'lg',\n          'input-wrapper--disabled': this.disabled,\n        })}\"\n        @click=${() => this.focus()}\n      >\n        <div part=\"character-boxes\" class=\"character-boxes\" aria-hidden=\"true\">\n          ${displayValues.map((char, index) => {\n            const isFocusTarget = this.isFocused && index === caretIndex;\n            const hasCaret = isFocusTarget && !isComplete;\n            return html`\n              <div\n                part=\"character-box\"\n                aria-hidden=\"true\"\n                class=\"character-box ${classMap({\n                  'character-box--invalid': !!this.invalidmessage,\n                  'character-box--caret': hasCaret,\n                  'character-box--empty': !char,\n                  'focus-ring-sm': isFocusTarget,\n                })}\"\n                @click=${(e: MouseEvent) => {\n                  e.stopPropagation();\n                  this.handleBoxClick(index);\n                }}\n              >\n                ${char}\n              </div>\n            `;\n          })}\n        </div>\n        <input\n          class=\"hidden-input\"\n          .value=\"${live(this.value)}\"\n          id=\"mid-code-input-hidden\"\n          type=\"${this.type}\"\n          aria-labelledby=\"${this.labelId}\"\n          aria-describedby=${ifDefined(describedBy)}\n          aria-invalid=${this.invalidmessage ? 'true' : 'false'}\n          aria-errormessage=${ifDefined(\n            this.invalidmessage ? this.validationId : undefined\n          )}\n          maxlength=\"${this.length}\"\n          ?autofocus=\"${this.autofocus}\"\n          ?disabled=\"${this.disabled}\"\n          ?required=\"${this.required}\"\n          pattern=${ifDefined(this.pattern)}\n          inputmode=\"${this.inputmode}\"\n          autocomplete=\"one-time-code\"\n          @beforeinput=\"${this.handleBeforeInput}\"\n          @input=\"${this.handleInput}\"\n          @change=\"${this.handleChange}\"\n          @keydown=\"${this.handleKeydown}\"\n          @focus=\"${this.handleFocus}\"\n          @blur=\"${this.handleBlur}\"\n        />\n      </div>\n      <div\n        class=\"validation-message\"\n        id=\"${this.validationId}\"\n        aria-live=\"polite\"\n        ?hidden=${!this.invalidmessage}\n      >\n        <mid-icon name=\"xmark-octagon-fill\" class=\"validation-icon\"></mid-icon>\n        ${this.invalidmessage}\n      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

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

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

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

@@ -18,7 +18,7 @@ export declare class MinidCountdown extends MinidCountdown_base {
     private expired;
     callback?: () => void;
     firstUpdated(): void;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=countdown.component.d.ts.map

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

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

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

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

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

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

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

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

package/dist/components/heading.js

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

package/dist/components/heading.js.map

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

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

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