@felleslosninger/minid-elements 0.0.110 → 0.0.111

package/dist/components/code-input.js

@@ -1,14 +1,19 @@
 import { css, LitElement, html } from "lit";
-import { property, state, customElement } from "lit/decorators.js";
-import { createRef, ref } from "lit/directives/ref.js";
+import { queryAll, property, state, customElement } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { live } from "lit/directives/live.js";
-import { webOtpApiInit, webOtpApiClose } from "../utilities/web-otp-api.js";
+import { watch } from "../internal/watch.js";
+import { FormControlMixin } from "../mixins/form-control.mixin.js";
 import { styled } from "../mixins/tailwind.mixin.js";
-import { ConstraintsValidationMixin } from "../mixins/form-controller.mixin.js";
+import { HasSlotController } from "../internal/slot.js";
 import "./icon/icon.js";
+import { requiredValidator, maxLengthValidator, minLengthValidator, patternValidator } from "../mixins/validators.js";
+import { webOtpApiInit } from "../utilities/web-otp-api.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
 var __decorateClass = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
@@ -17,293 +22,302 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var _skipValueVisualUpdate;
+let nextUniqueId = 0;
 const styles = [
   css`
     :host {
-      display: flex;
-      flex-direction: column;
-      container: otc / inline-size;
-      text-align: left;
-      --otc-background: white;
-      --otc-error-background: white;
-      --otc-length: 5;
-      --otc-width: 11.45cqw;
-    }
-
-    input {
-      all: unset;
-      background: var(--otc-background);
-      caret-color: transparent;
-      clip-path: inset(0% 1ch 0% 0%);
-      font-family: ui-monospace, monospace;
-      font-size: var(--otc-width);
-      inline-size: calc(var(--otc-length) * 3ch);
-      letter-spacing: 2ch;
-      padding-block: 0.25ch;
-      padding-inline-start: calc(0.5ch * 1.5);
-      flex-grow: 1;
-
-      &:focus-visible:focus {
-        outline-style: none;
-      }
-
-      &:-webkit-autofill {
-        animation-name: onAutoFillStart;
-      }
-    }
-
-    @keyframes onAutoFillStart {
-      from {
-      }
-      to {
-      }
+      display: block;
     }
 
-    input.error {
-      background: var(--otc-error-background);
+    /* 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;
     }
   `
 ];
-let nextUniqueId = 0;
-let MinidCodeInput = class extends ConstraintsValidationMixin(
+let MinidCodeInput = class extends FormControlMixin(
   styled(LitElement, styles)
 ) {
   constructor() {
-    super();
-    this.caretColor = "var(--color-neutral-surface-tinted)";
-    this.caretHighlightColor = "var(--color-accent-surface-active)";
-    this.inputId = `mid-code-input-${nextUniqueId++}`;
-    this.inputRef = createRef();
+    super(...arguments);
+    this.hasSlotControler = new HasSlotController(this, "label");
+    __privateAdd(this, _skipValueVisualUpdate, false);
+    this.labelId = `mid-code-input-label-${nextUniqueId++}`;
     this.value = "";
     this.label = "";
-    this.hidelabel = false;
-    this.required = false;
+    this.type = "text";
+    this.inputmode = "text";
+    this.size = "sm";
+    this.length = 5;
     this.disabled = false;
-    this.inputmode = "numeric";
+    this.autofocus = false;
     this.invalidmessage = "";
-    this.length = 5;
-    this.fontsize = "11.45cqw";
-    this.renderError = false;
-    this.localErrorNode = null;
-    this.handleFocusIn = () => {
-      const currentChar = this.value.length + 1;
-      this.inputRef.value?.style.setProperty(
-        `--char-${currentChar}-color`,
-        this.caretHighlightColor
-      );
-    };
-    this.handleChange = (e) => {
-      this.value = e.target.value;
-      this.dispatchEvent(
-        new Event("input", {
-          bubbles: true,
-          cancelable: true,
-          composed: true
-        })
-      );
-    };
-    this.addEventListener("invalid", (e) => {
-      this.renderError = true;
-      if (this.localErrorNode) {
-        e.preventDefault();
-        this.localErrorNode.textContent = this.validationMessage || "Error";
-      }
-    });
+    this.hidelabel = false;
+    this.required = false;
+    this.internalValues = Array(this.length).fill("");
   }
-  connectedCallback() {
-    super.connectedCallback();
-    this._whenSettled();
+  static get formControlValidators() {
+    return [
+      requiredValidator,
+      maxLengthValidator,
+      minLengthValidator,
+      patternValidator
+    ];
   }
-  async _whenSettled() {
-    await this.updateComplete;
-    this.inputRef.value?.addEventListener(
-      "animationstart",
-      this.autoFillEventHandler.bind(this)
-    );
-    this.calcInputStyle();
+  get validationTarget() {
+    return this.inputElements?.length ? this.inputElements[0] : null;
   }
-  disconnectedCallback() {
-    webOtpApiClose();
-    this.inputRef.value?.removeEventListener(
-      "animationstart",
-      this.autoFillEventHandler.bind(this)
-    );
+  firstUpdated(_changedProperties) {
+    webOtpApiInit(this.renderRoot);
   }
-  calcInputStyle() {
-    const inputStyle = this.inputRef.value?.style;
-    inputStyle?.setProperty("--otc-length", this.length.toString());
-    let gradientStyle = "linear-gradient(90deg, ";
-    for (let i = 0; i < this.length; i++) {
-      gradientStyle += `var(--char-${i + 1}-color) ${i ? i * 3 + "ch" : "0"} ${i * 3 + 2.5}ch, transparent ${i * 3 + 2.5}ch ${i * 3 + 3}ch${i + 1 < this.length ? ", " : ""}`;
-    }
-    gradientStyle += `) no-repeat 0 0 / ${this.length * 3}ch 100%`;
-    inputStyle?.setProperty("--otc-background", gradientStyle);
-    const gradientErrorStyle = `linear-gradient(90deg, var(--color-danger-surface-active) calc(${this.length}ch / 2), transparent 0) 0 0 / 3ch 100%`;
-    inputStyle?.setProperty("--otc-error-background", gradientErrorStyle);
-    inputStyle?.setProperty("--otc-width", this.fontsize);
+  handleFocus(index) {
+    return () => {
+      this.inputElements[index].setAttribute("placeholder", "");
+    };
   }
-  autoFillEventHandler(e) {
-    e.animationName === "onAutoFillStart" && (this.value = this.inputRef.value.value);
+  handleBlur(index) {
+    return () => {
+      this.inputElements[index].setAttribute("placeholder", "○");
+    };
   }
-  get selectionEnd() {
-    return this.inputRef.value?.selectionEnd;
+  handleKeydown(index) {
+    return (event) => {
+      this.internalValues[index] = event.target.value;
+      this.value = this.internalValues.join("");
+      const input = event.target;
+      const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+      if (event.key === "Backspace") {
+        if (input.value === "" && index > 0) {
+          this.inputElements[index - 1].focus();
+          this.internalValues[index - 1] = "";
+          this.updateValueAndEmit(true);
+        } else if (input.value !== "") {
+          input.value = "";
+          this.internalValues[index] = "";
+          this.updateValueAndEmit(true);
+        }
+      } else if (event.key === "ArrowLeft") {
+        if (index > 0) {
+          this.inputElements[index - 1].focus();
+        }
+      } else if (event.key === "ArrowRight") {
+        if (index < this.length - 1) {
+          this.inputElements[index + 1].focus();
+        }
+      } else if (event.key === "Delete") {
+        input.value = "";
+        this.internalValues[index] = "";
+        this.updateValueAndEmit(true);
+      } else if (event.key === "Enter" && !hasModifier) {
+        setTimeout(() => {
+          if (!event.defaultPrevented && !event.isComposing) {
+            this.form?.requestSubmit();
+          }
+        });
+      }
+    };
   }
-  handleFocusOut() {
-    for (let i = 0; i < this.length; i++) {
-      this.inputRef.value?.style.setProperty(
-        `--char-${i + 1}-color`,
-        this.caretColor
+  handleInput(index) {
+    return (event) => {
+      const input = event.target;
+      let inputValue = input.value;
+      if (inputValue.length > 1) {
+        inputValue = inputValue.charAt(0);
+        input.value = inputValue;
+      }
+      this.internalValues[index] = inputValue;
+      this.updateValueAndEmit(true);
+      if (inputValue !== "" && index < this.length - 1) {
+        this.inputElements[index + 1].focus();
+      }
+      this.dispatchEvent(
+        new Event("mid-input", { bubbles: true, composed: true })
       );
-    }
-  }
-  handleClick() {
-    this.value = this.value.substring(0, this.selectionEnd || 0);
-    this.renderError = false;
-    this.setCustomValidity("");
-    if (this.localErrorNode) {
-      this.localErrorNode.textContent = "";
-    }
-    this.setFormValue(this.value);
-    this.setValidity({});
+    };
   }
-  handleKeydown(event) {
-    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
-    if (event.key === "Enter" && !hasModifier) {
-      setTimeout(() => {
-        if (!event.defaultPrevented && !event.isComposing) {
-          this.internals.form?.requestSubmit();
+  handlePaste(index) {
+    return (event) => {
+      event.preventDefault();
+      const pasteData = event.clipboardData?.getData("text").trim();
+      if (pasteData) {
+        const pasteChars = pasteData.split("");
+        for (let i = 0; i < this.length; i++) {
+          if (index + i < this.length && pasteChars[i]) {
+            this.internalValues[index + i] = pasteChars[i];
+          }
         }
-      });
-    }
+        this.updateValueAndEmit();
+        const lastFilledIndex = Math.min(
+          index + pasteChars.length - 1,
+          this.length - 1
+        );
+        this.inputElements[lastFilledIndex]?.focus();
+      }
+    };
   }
-  handleSlotchange(e) {
-    const slot = e.target;
-    const childNodes = slot.assignedNodes({ flatten: true });
-    this.localErrorNode = this.findErrorMessageNode(childNodes);
-    if (this.localErrorNode && this.invalidmessage) {
-      this.renderError = true;
-      this.localErrorNode.textContent = this.invalidmessage;
-      this.setValidity({});
+  updateValueAndEmit(skipValueUpdate = false) {
+    __privateSet(this, _skipValueVisualUpdate, skipValueUpdate);
+    this.value = this.internalValues.join("");
+    this.dispatchEvent(
+      new Event("mid-change", {
+        bubbles: true,
+        composed: true
+      })
+    );
+    if (this.value.length === this.length && this.internalValues.every((digit) => digit !== "")) {
+      this.dispatchEvent(
+        new Event("mid-complete", {
+          bubbles: true,
+          composed: true
+        })
+      );
     }
   }
-  findErrorMessageNode(nodes) {
-    for (const node of nodes) {
-      if (node instanceof Element && node.classList.contains("error-message")) {
-        return node;
-      }
-      const childNodesArray = Array.from(node.childNodes);
-      const foundNode = this.findErrorMessageNode(childNodesArray);
-      if (foundNode) {
-        return foundNode;
-      }
-    }
-    return null;
+  valueVisualUpdate(value) {
+    const chars = value.split("");
+    this.internalValues.forEach((_, index) => {
+      this.internalValues[index] = chars[index];
+    });
   }
-  firstUpdated(_changedProperties) {
-    this.focus();
-    webOtpApiInit(this.renderRoot);
+  handleLengthChange() {
+    this.internalValues = Array(this.length).fill("");
+    this.valueVisualUpdate(this.value);
   }
-  updated(_changedProperties) {
-    for (let i = 0; i < this.length; i++) {
-      const color = i === this.value.length ? this.caretHighlightColor : this.caretColor;
-      this.inputRef.value?.style.setProperty(`--char-${i + 1}-color`, color);
-    }
-    if (_changedProperties.has("_forcedErrorMessage")) {
-      this.setCustomValidity(this.invalidmessage);
+  handleValueChange() {
+    this.setValue(this.value);
+    if (__privateGet(this, _skipValueVisualUpdate)) {
+      __privateSet(this, _skipValueVisualUpdate, false);
+      return;
     }
-    this.setFormValue(this.value);
-    this.setValidity(
-      this.inputRef.value.validity,
-      this.inputRef.value.validationMessage,
-      this.inputRef.value
-    );
-  }
-  focus(options) {
-    const notMobile = !window.matchMedia("only screen and (max-width: 768px)").matches;
-    notMobile && this.inputRef.value?.focus(options);
-  }
-  setCustomValidity(error) {
-    this.inputRef.value?.setCustomValidity(error);
+    this.valueVisualUpdate(this.value);
   }
   render() {
+    const hasLabelSlot = this.hasSlotControler.test("label");
+    const hasLabel = !!this.label || !!hasLabelSlot;
     return html`
       <label
+        id="${this.labelId}"
         class="${classMap({
-      "sr-only": this.hidelabel,
-      "mb-2": !!this.label
-    })} font-medium"
-        for="${this.inputId}"
-        >${this.label}
+      "sr-only": this.hidelabel || !hasLabel,
+      "opacity-disabled": this.disabled
+    })} mb-2 block items-center gap-1 font-medium"
+      >
+        <slot name="label"> ${this.label} </slot>
       </label>
-      <input
-        ${ref(this.inputRef)}
-        id=${this.inputId}
-        .value="${live(this.value)}"
+      <div
+        part="input-container"
         class="${classMap({
-      error: this.invalidmessage
-    })}"
-        autocomplete="${"one-time-code"}"
-        inputmode="${this.inputmode}"
-        @input="${this.handleChange}"
-        @change="${this.handleChange}"
-        @focusout="${this.handleFocusOut}"
-        @focusin="${this.handleFocusIn}"
-        @keydown="${this.handleKeydown}"
-        @click="${this.handleClick}"
-        minlength="${this.length}"
-        maxlength="${this.length}"
-        ?disabled="${this.disabled}"
-        ?required="${this.required}"
-      />
-      <slot name="error-message" @slotchange=${this.handleSlotchange}>
-        <div
-          class="text-danger-subtle mt-2 flex gap-1"
-          aria-live="polite"
-          ?hidden=${!this.invalidmessage}
-        >
-          <mid-icon
-            name="xmark-octagon-fill"
-            class="mt-1 min-h-5 min-w-5"
-          ></mid-icon>
-          ${this.invalidmessage}
-        </div>
-      </slot>
+      "text-heading-sm": this.size === "sm",
+      "text-heading-md": this.size === "md",
+      "text-heading-lg": this.size === "lg"
+    })} inline-flex gap-2"
+      >
+        ${this.internalValues.map((value, index) => {
+      return html`
+            <input
+              .value="${live(value || "")}"
+              id="mid-code-input-${index}"
+              class="${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,
+        "placeholder:text-neutral-surface-active": !this.invalidmessage,
+        "placeholder:text-danger-surface-active": this.invalidmessage
+      })} focus:focus-ring-sm disabled:opacity-disabled size-9 rounded-md text-center font-mono disabled:cursor-not-allowed"
+              type="${this.type}"
+              placeholder="○"
+              aria-labelledby="${this.labelId}"
+              size="1"
+              ?autofocus="${!index && this.autofocus}"
+              ?disabled="${this.disabled}"
+              inputmode="${this.inputmode}"
+              @keydown="${this.handleKeydown(index)}"
+              @input="${this.handleInput(index)}"
+              @paste="${this.handlePaste(index)}"
+              @focus="${this.handleFocus(index)}"
+              @blur="${this.handleBlur(index)}"
+            />
+          `;
+    })}
+      </div>
+      <div
+        class="text-danger-subtle mt-2 flex gap-1"
+        aria-live="polite"
+        ?hidden=${!this.invalidmessage}
+      >
+        <mid-icon
+          name="xmark-octagon-fill"
+          class="mt-1 min-h-5 min-w-5"
+        ></mid-icon>
+        ${this.invalidmessage}
+      </div>
     `;
   }
 };
+_skipValueVisualUpdate = /* @__PURE__ */ new WeakMap();
+__decorateClass([
+  queryAll("input")
+], MinidCodeInput.prototype, "inputElements", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({ reflect: true })
 ], MinidCodeInput.prototype, "value", 2);
 __decorateClass([
   property()
 ], MinidCodeInput.prototype, "label", 2);
 __decorateClass([
-  property({ type: Boolean })
-], MinidCodeInput.prototype, "hidelabel", 2);
+  property()
+], MinidCodeInput.prototype, "type", 2);
 __decorateClass([
-  property({ type: Boolean })
-], MinidCodeInput.prototype, "required", 2);
+  property()
+], MinidCodeInput.prototype, "inputmode", 2);
+__decorateClass([
+  property()
+], MinidCodeInput.prototype, "size", 2);
+__decorateClass([
+  property({ type: Number })
+], MinidCodeInput.prototype, "length", 2);
 __decorateClass([
   property({ type: Boolean })
 ], MinidCodeInput.prototype, "disabled", 2);
 __decorateClass([
-  property({ type: String })
-], MinidCodeInput.prototype, "inputmode", 2);
+  property({ type: Boolean })
+], MinidCodeInput.prototype, "autofocus", 2);
+__decorateClass([
+  property({ type: Number })
+], MinidCodeInput.prototype, "minlength", 2);
 __decorateClass([
   property()
 ], MinidCodeInput.prototype, "invalidmessage", 2);
 __decorateClass([
-  property({ type: Number })
-], MinidCodeInput.prototype, "length", 2);
+  property({ type: Boolean })
+], MinidCodeInput.prototype, "hidelabel", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MinidCodeInput.prototype, "required", 2);
 __decorateClass([
   property()
-], MinidCodeInput.prototype, "fontsize", 2);
+], MinidCodeInput.prototype, "pattern", 2);
 __decorateClass([
   state()
-], MinidCodeInput.prototype, "renderError", 2);
+], MinidCodeInput.prototype, "internalValues", 2);
 __decorateClass([
-  state()
-], MinidCodeInput.prototype, "localErrorNode", 2);
+  watch("length")
+], MinidCodeInput.prototype, "handleLengthChange", 1);
+__decorateClass([
+  watch("value")
+], MinidCodeInput.prototype, "handleValueChange", 1);
 MinidCodeInput = __decorateClass([
   customElement("mid-code-input")
 ], MinidCodeInput);

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, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { createRef, ref, type Ref } from 'lit/directives/ref.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { webOtpApiClose, webOtpApiInit } from '../utilities/web-otp-api';\nimport { styled } from '../mixins/tailwind.mixin';\nimport { ConstraintsValidationMixin } from '../mixins/form-controller.mixin';\nimport './icon/icon.component';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-code-input': MinidCodeInput;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      container: otc / inline-size;\n      text-align: left;\n      --otc-background: white;\n      --otc-error-background: white;\n      --otc-length: 5;\n      --otc-width: 11.45cqw;\n    }\n\n    input {\n      all: unset;\n      background: var(--otc-background);\n      caret-color: transparent;\n      clip-path: inset(0% 1ch 0% 0%);\n      font-family: ui-monospace, monospace;\n      font-size: var(--otc-width);\n      inline-size: calc(var(--otc-length) * 3ch);\n      letter-spacing: 2ch;\n      padding-block: 0.25ch;\n      padding-inline-start: calc(0.5ch * 1.5);\n      flex-grow: 1;\n\n      &:focus-visible:focus {\n        outline-style: none;\n      }\n\n      &:-webkit-autofill {\n        animation-name: onAutoFillStart;\n      }\n    }\n\n    @keyframes onAutoFillStart {\n      from {\n      }\n      to {\n      }\n    }\n\n    input.error {\n      background: var(--otc-error-background);\n    }\n  `,\n];\n\nlet nextUniqueId = 0;\n\n@customElement('mid-code-input')\nexport class MinidCodeInput extends ConstraintsValidationMixin(\n  styled(LitElement, styles)\n) {\n  private readonly caretColor = 'var(--color-neutral-surface-tinted)';\n  private readonly caretHighlightColor = 'var(--color-accent-surface-active)';\n  private readonly inputId = `mid-code-input-${nextUniqueId++}`;\n\n  public inputRef: Ref<HTMLInputElement> = createRef();\n\n  @property({ type: String, reflect: true })\n  value = '';\n\n  @property()\n  label = '';\n\n  /**\n   * Visually hides `label` (still available for screen readers)\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  @property({ type: Boolean })\n  required = false;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: String })\n  inputmode = 'numeric';\n\n  /**\n   * Display custom error message, and force invalid state\n   */\n  @property()\n  invalidmessage = '';\n\n  /**\n   * The length of the code input\n   */\n  @property({ type: Number })\n  length = 5;\n\n  @property()\n  fontsize = '11.45cqw';\n\n  @state()\n  renderError = false;\n\n  @state()\n  localErrorNode: Node | null = null;\n\n  constructor() {\n    super();\n    this.addEventListener('invalid', (e) => {\n      this.renderError = true;\n      if (this.localErrorNode) {\n        e.preventDefault();\n        this.localErrorNode.textContent = this.validationMessage || 'Error';\n      }\n    });\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._whenSettled();\n  }\n\n  async _whenSettled() {\n    await this.updateComplete;\n    this.inputRef.value?.addEventListener(\n      'animationstart',\n      this.autoFillEventHandler.bind(this)\n    );\n    this.calcInputStyle();\n  }\n\n  override disconnectedCallback() {\n    webOtpApiClose();\n    this.inputRef.value?.removeEventListener(\n      'animationstart',\n      this.autoFillEventHandler.bind(this)\n    );\n  }\n\n  private calcInputStyle() {\n    const inputStyle = this.inputRef.value?.style;\n\n    inputStyle?.setProperty('--otc-length', this.length.toString());\n\n    let gradientStyle = 'linear-gradient(90deg, ';\n    for (let i = 0; i < this.length; i++) {\n      gradientStyle += `var(--char-${i + 1}-color) ${i ? i * 3 + 'ch' : '0'} ${i * 3 + 2.5}ch, transparent ${i * 3 + 2.5}ch ${i * 3 + 3}ch${i + 1 < this.length ? ', ' : ''}`;\n    }\n    gradientStyle += `) no-repeat 0 0 / ${this.length * 3}ch 100%`;\n    inputStyle?.setProperty('--otc-background', gradientStyle);\n\n    const gradientErrorStyle = `linear-gradient(90deg, var(--color-danger-surface-active) calc(${this.length}ch / 2), transparent 0) 0 0 / 3ch 100%`;\n    inputStyle?.setProperty('--otc-error-background', gradientErrorStyle);\n\n    inputStyle?.setProperty('--otc-width', this.fontsize);\n  }\n\n  private autoFillEventHandler(e: AnimationEvent) {\n    e.animationName === 'onAutoFillStart' &&\n      (this.value = (this.inputRef.value as HTMLInputElement).value);\n  }\n\n  get selectionEnd() {\n    return this.inputRef.value?.selectionEnd;\n  }\n\n  private handleFocusOut() {\n    for (let i = 0; i < this.length; i++) {\n      this.inputRef.value?.style.setProperty(\n        `--char-${i + 1}-color`,\n        this.caretColor\n      );\n    }\n  }\n\n  private handleFocusIn = () => {\n    const currentChar = this.value.length + 1;\n    this.inputRef.value?.style.setProperty(\n      `--char-${currentChar}-color`,\n      this.caretHighlightColor\n    );\n  };\n\n  private handleClick() {\n    this.value = this.value.substring(0, this.selectionEnd || 0);\n\n    this.renderError = false;\n    this.setCustomValidity('');\n    if (this.localErrorNode) {\n      this.localErrorNode.textContent = '';\n    }\n\n    this.setFormValue(this.value);\n    this.setValidity({} as ValidityState);\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.internals.form?.requestSubmit();\n        }\n      });\n    }\n  }\n\n  private handleChange = (e: Event) => {\n    this.value = (e.target as HTMLInputElement).value;\n    this.dispatchEvent(\n      new Event('input', {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n      })\n    );\n  };\n\n  private handleSlotchange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const childNodes = slot.assignedNodes({ flatten: true });\n\n    this.localErrorNode = this.findErrorMessageNode(childNodes);\n    if (this.localErrorNode && this.invalidmessage) {\n      // display if slot set, and error override in effect\n      this.renderError = true;\n      this.localErrorNode.textContent = this.invalidmessage;\n      this.setValidity({} as ValidityState); // cancel built-in visual feedback\n    }\n  }\n\n  private findErrorMessageNode(nodes: Node[]): Node | null {\n    for (const node of nodes) {\n      if (node instanceof Element && node.classList.contains('error-message')) {\n        return node;\n      }\n      const childNodesArray = Array.from(node.childNodes);\n      const foundNode = this.findErrorMessageNode(childNodesArray);\n      if (foundNode) {\n        return foundNode;\n      }\n    }\n    return null;\n  }\n\n  firstUpdated(_changedProperties: PropertyValues) {\n    this.focus();\n    webOtpApiInit(this.renderRoot);\n  }\n\n  updated(_changedProperties: PropertyValues): void {\n    for (let i = 0; i < this.length; i++) {\n      const color =\n        i === this.value.length ? this.caretHighlightColor : this.caretColor;\n      this.inputRef.value?.style.setProperty(`--char-${i + 1}-color`, color);\n    }\n\n    if (_changedProperties.has('_forcedErrorMessage')) {\n      this.setCustomValidity(this.invalidmessage);\n    }\n\n    this.setFormValue(this.value);\n    this.setValidity(\n      this.inputRef.value!.validity,\n      this.inputRef.value!.validationMessage,\n      this.inputRef!.value\n    );\n  }\n\n  focus(options?: FocusOptions) {\n    const notMobile = !window.matchMedia('only screen and (max-width: 768px)')\n      .matches;\n    notMobile && this.inputRef.value?.focus(options);\n  }\n\n  setCustomValidity(error: string) {\n    this.inputRef!.value?.setCustomValidity(error);\n  }\n\n  override render() {\n    return html`\n      <label\n        class=\"${classMap({\n          'sr-only': this.hidelabel,\n          'mb-2': !!this.label,\n        })} font-medium\"\n        for=\"${this.inputId}\"\n        >${this.label}\n      </label>\n      <input\n        ${ref(this.inputRef)}\n        id=${this.inputId}\n        .value=\"${live(this.value)}\"\n        class=\"${classMap({\n          error: this.invalidmessage,\n        })}\"\n        autocomplete=\"${'one-time-code' as any}\"\n        inputmode=\"${this.inputmode}\"\n        @input=\"${this.handleChange}\"\n        @change=\"${this.handleChange}\"\n        @focusout=\"${this.handleFocusOut}\"\n        @focusin=\"${this.handleFocusIn}\"\n        @keydown=\"${this.handleKeydown}\"\n        @click=\"${this.handleClick}\"\n        minlength=\"${this.length}\"\n        maxlength=\"${this.length}\"\n        ?disabled=\"${this.disabled}\"\n        ?required=\"${this.required}\"\n      />\n      <slot name=\"error-message\" @slotchange=${this.handleSlotchange}>\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      </slot>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"code-input.js","sources":["../../src/components/code-input.component.ts"],"sourcesContent":["import { css, html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, queryAll, 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    /* 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 {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 *\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  #skipValueVisualUpdate = false;\n  private readonly labelId = `mid-code-input-label-${nextUniqueId++}`;\n\n  @queryAll('input')\n  private inputElements!: NodeListOf<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' = 'text';\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 internalValues = Array<string>(this.length).fill('');\n\n  static get formControlValidators() {\n    return [\n      requiredValidator,\n      maxLengthValidator,\n      minLengthValidator,\n      patternValidator,\n    ];\n  }\n\n  get validationTarget() {\n    return this.inputElements?.length ? this.inputElements[0] : null;\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    webOtpApiInit(this.renderRoot);\n  }\n\n  private handleFocus(index: number) {\n    return () => {\n      this.inputElements[index].setAttribute('placeholder', '');\n    };\n  }\n\n  private handleBlur(index: number) {\n    return () => {\n      this.inputElements[index].setAttribute('placeholder', '○');\n    };\n  }\n\n  private handleKeydown(index: number) {\n    return (event: KeyboardEvent) => {\n      this.internalValues[index] = (event.target as HTMLInputElement).value;\n      this.value = this.internalValues.join('');\n      const input = event.target as HTMLInputElement;\n      const hasModifier =\n        event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n      if (event.key === 'Backspace') {\n        if (input.value === '' && index > 0) {\n          // If current input is empty, move to previous and clear it\n          this.inputElements[index - 1].focus();\n          this.internalValues[index - 1] = '';\n          this.updateValueAndEmit(true);\n        } else if (input.value !== '') {\n          // If current input has a value, clear it\n          input.value = '';\n          this.internalValues[index] = '';\n          this.updateValueAndEmit(true);\n        }\n      } else if (event.key === 'ArrowLeft') {\n        if (index > 0) {\n          this.inputElements[index - 1].focus();\n        }\n      } else if (event.key === 'ArrowRight') {\n        if (index < this.length - 1) {\n          this.inputElements[index + 1].focus();\n        }\n      } else if (event.key === 'Delete') {\n        // Clear current field without moving\n        input.value = '';\n        this.internalValues[index] = '';\n        this.updateValueAndEmit(true);\n      } else 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          //\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\n  private handleInput(index: number) {\n    return (event: InputEvent) => {\n      const input = event.target as HTMLInputElement;\n      let inputValue = input.value;\n\n      // Only allow single digit input\n      if (inputValue.length > 1) {\n        inputValue = inputValue.charAt(0);\n        input.value = inputValue; // Correct the input value\n      }\n\n      this.internalValues[index] = inputValue;\n      this.updateValueAndEmit(true);\n\n      // Auto-focus next input if a digit was entered and it's not the last one\n      if (inputValue !== '' && index < this.length - 1) {\n        this.inputElements[index + 1].focus();\n      }\n\n      this.dispatchEvent(\n        new Event('mid-input', { bubbles: true, composed: true })\n      );\n    };\n  }\n\n  private handlePaste(index: number) {\n    return (event: ClipboardEvent) => {\n      event.preventDefault(); // Prevent default paste behavior\n      const pasteData = event.clipboardData?.getData('text').trim();\n\n      if (pasteData) {\n        const pasteChars = pasteData.split('');\n        for (let i = 0; i < this.length; i++) {\n          if (index + i < this.length && pasteChars[i]) {\n            this.internalValues[index + i] = pasteChars[i];\n            // Update the actual input element's value directly as well\n            // if (this.inputElements[index + i]) {\n            //   this.inputElements[index + i].value = pasteChars[i];\n            // }\n          }\n        }\n        this.updateValueAndEmit();\n\n        // Focus the last filled input or the last input if all are filled\n        const lastFilledIndex = Math.min(\n          index + pasteChars.length - 1,\n          this.length - 1\n        );\n        this.inputElements[lastFilledIndex]?.focus();\n      }\n    };\n  }\n\n  private updateValueAndEmit(skipValueUpdate = false) {\n    this.#skipValueVisualUpdate = skipValueUpdate;\n    this.value = this.internalValues.join('');\n    this.dispatchEvent(\n      new Event('mid-change', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    if (\n      this.value.length === this.length &&\n      this.internalValues.every((digit) => digit !== '')\n    ) {\n      this.dispatchEvent(\n        new Event('mid-complete', {\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n  }\n\n  private valueVisualUpdate(value: string) {\n    const chars = value.split('');\n    this.internalValues.forEach((_, index) => {\n      this.internalValues[index] = chars[index];\n    });\n  }\n\n  @watch('length')\n  handleLengthChange() {\n    this.internalValues = Array(this.length).fill('');\n    this.valueVisualUpdate(this.value);\n  }\n\n  @watch('value')\n  handleValueChange() {\n    this.setValue(this.value);\n\n    if (this.#skipValueVisualUpdate) {\n      this.#skipValueVisualUpdate = false;\n      return;\n    }\n\n    this.valueVisualUpdate(this.value);\n  }\n\n  override render() {\n    const hasLabelSlot = this.hasSlotControler.test('label');\n    const hasLabel = !!this.label || !!hasLabelSlot;\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=\"${classMap({\n          'text-heading-sm': this.size === 'sm',\n          'text-heading-md': this.size === 'md',\n          'text-heading-lg': this.size === 'lg',\n        })} inline-flex gap-2\"\n      >\n        ${this.internalValues.map((value, index) => {\n          return html`\n            <input\n              .value=\"${live(value || '')}\"\n              id=\"mid-code-input-${index}\"\n              class=\"${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                'placeholder:text-neutral-surface-active': !this.invalidmessage,\n                'placeholder:text-danger-surface-active': this.invalidmessage,\n              })} focus:focus-ring-sm disabled:opacity-disabled size-9 rounded-md text-center font-mono disabled:cursor-not-allowed\"\n              type=\"${this.type}\"\n              placeholder=\"○\"\n              aria-labelledby=\"${this.labelId}\"\n              size=\"1\"\n              ?autofocus=\"${!index && this.autofocus}\"\n              ?disabled=\"${this.disabled}\"\n              inputmode=\"${this.inputmode}\"\n              @keydown=\"${this.handleKeydown(index)}\"\n              @input=\"${this.handleInput(index)}\"\n              @paste=\"${this.handlePaste(index)}\"\n              @focus=\"${this.handleFocus(index)}\"\n              @blur=\"${this.handleBlur(index)}\"\n            />\n          `;\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":"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"}

package/dist/components/dropdown.js

@@ -295,7 +295,7 @@ let MinidDropdown = class extends styled(LitElement, styles) {
         >
         </slot>
         <div
-          class="bg-accent min-w-68"
+          class="bg-accent"
           aria-hidden=${this.open ? "false" : "true"}
           aria-labelledby="${this.popupId}"
         >