@birdapi/velinstyle 1.2.0 → 1.2.2

package/dist/chunks/velin-drawer-A7Q7EBOS.js

@@ -0,0 +1,162 @@
+import {
+  clearBackgroundInert,
+  getFocusableElements,
+  restoreFocus,
+  saveFocus,
+  setBackgroundInert,
+  trapFocus
+} from "./chunk-42VVPW6N.js";
+import "./chunk-L7ZGUU4D.js";
+
+// components/velin-drawer.js
+var styles = `
+  :host { display: contents; }
+  .overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--velin-z-overlay, 400);
+    background: var(--velin-color-overlay, rgba(0,0,0,0.4));
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 200ms ease, visibility 200ms ease;
+  }
+  :host([open]) .overlay { opacity: 1; visibility: visible; }
+  .drawer {
+    position: fixed;
+    z-index: var(--velin-z-modal, 500);
+    background: var(--velin-color-surface-bright, #fff);
+    box-shadow: var(--velin-shadow-xl, 0 20px 25px rgba(0,0,0,0.1));
+    display: flex;
+    flex-direction: column;
+    transition: transform 250ms ease;
+    overflow: hidden;
+  }
+  /* Side positioning -- default = start */
+  .drawer { inset-block: 0; inset-inline-start: 0; inset-inline-end: auto; inline-size: min(20rem, 85vw); transform: translateX(-100%); }
+  :host([open]) .drawer, :host([open][side="start"]) .drawer { transform: translateX(0); }
+  :host([side="end"]) .drawer { inset-inline-start: auto; inset-inline-end: 0; transform: translateX(100%); }
+  :host([open][side="end"]) .drawer { transform: translateX(0); }
+  :host([side="top"]) .drawer { inset-inline: 0; inset-inline-start: 0; inset-block-start: 0; inset-block-end: auto; block-size: min(50vh, 24rem); inline-size: 100%; transform: translateY(-100%); }
+  :host([open][side="top"]) .drawer { transform: translateY(0); }
+  :host([side="bottom"]) .drawer { inset-inline: 0; inset-inline-start: 0; inset-block-start: auto; inset-block-end: 0; block-size: min(50vh, 24rem); inline-size: 100%; transform: translateY(100%); }
+  :host([open][side="bottom"]) .drawer { transform: translateY(0); }
+  .header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: var(--velin-space-4, 1rem) var(--velin-space-5, 1.25rem);
+    border-bottom: 1px solid var(--velin-color-border, #ddd);
+  }
+  .title { font-size: var(--velin-text-lg, 1.25rem); font-weight: var(--velin-weight-semibold, 600); margin: 0; }
+  .close-btn {
+    min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center;
+    background: none; border: none; border-radius: var(--velin-radius-md, 0.5rem); cursor: pointer;
+    color: var(--velin-color-text-muted, #666); font-size: 1.5rem; line-height: 1;
+  }
+  .close-btn:hover { background: var(--velin-color-surface-dim, #eee); color: var(--velin-color-text, #111); }
+  .body { flex: 1; padding: var(--velin-space-5, 1.25rem); overflow-y: auto; }
+  @media (prefers-reduced-motion: reduce) { .overlay, .drawer { transition: none; } }
+`;
+var VelinDrawer = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["open", "title"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open", delegatesFocus: true });
+    this._prev = null;
+    this._onKey = this._onKey.bind(this);
+    this._onTitleSlot = this._onTitleSlot.bind(this);
+  }
+  connectedCallback() {
+    if (this.shadowRoot.querySelector(".drawer")) return;
+    const titleId = "velin-drawer-title";
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="overlay" part="overlay"></div>
+      <div class="drawer" role="dialog" aria-modal="true" aria-labelledby="${titleId}" part="drawer">
+        <div class="header" part="header">
+          <h2 class="title" id="${titleId}" part="title">
+            <slot name="title"></slot>
+            <span class="title-fallback"></span>
+          </h2>
+          <button class="close-btn" aria-label="Close" part="close">&#215;</button>
+        </div>
+        <div class="body" part="body"><slot></slot></div>
+      </div>
+    `;
+    this.shadowRoot.querySelector(".close-btn").addEventListener("click", () => this.close());
+    this.shadowRoot.querySelector(".overlay").addEventListener("click", () => this.close());
+    this.shadowRoot.querySelector('slot[name="title"]').addEventListener("slotchange", this._onTitleSlot);
+    this._syncTitle();
+  }
+  attributeChangedCallback(name) {
+    if (name === "open") this.hasAttribute("open") ? this._open() : this._close();
+    if (name === "title") this._syncTitle();
+  }
+  open() {
+    this.setAttribute("open", "");
+  }
+  close() {
+    this.removeAttribute("open");
+    this.dispatchEvent(new CustomEvent("velin-close", { bubbles: true }));
+  }
+  _syncTitle() {
+    const fallback = this.shadowRoot?.querySelector(".title-fallback");
+    if (!fallback) return;
+    fallback.textContent = this.getAttribute("title") || "";
+  }
+  _hasTitleSlot() {
+    const slot = this.shadowRoot?.querySelector('slot[name="title"]');
+    if (!slot) return false;
+    return slot.assignedNodes({ flatten: true }).some((n) => {
+      if (n.nodeType === Node.TEXT_NODE) return Boolean(n.textContent.trim());
+      return n.nodeType === Node.ELEMENT_NODE;
+    });
+  }
+  _onTitleSlot() {
+    const dialog = this.shadowRoot?.querySelector('[role="dialog"]');
+    const fallback = this.shadowRoot?.querySelector(".title-fallback");
+    if (!dialog || !fallback) return;
+    if (this._hasTitleSlot()) {
+      fallback.hidden = true;
+      dialog.removeAttribute("aria-labelledby");
+      const slot = this.shadowRoot.querySelector('slot[name="title"]');
+      const label = slot.assignedNodes({ flatten: true }).map((n) => n.textContent || "").join(" ").trim();
+      if (label) dialog.setAttribute("aria-label", label);
+    } else {
+      fallback.hidden = false;
+      dialog.removeAttribute("aria-label");
+      dialog.setAttribute("aria-labelledby", "velin-drawer-title");
+      this._syncTitle();
+    }
+  }
+  _open() {
+    this._prev = saveFocus();
+    setBackgroundInert(this);
+    document.addEventListener("keydown", this._onKey);
+    requestAnimationFrame(() => {
+      const f = getFocusableElements(this.shadowRoot);
+      if (f.length) f[0].focus();
+    });
+  }
+  _close() {
+    document.removeEventListener("keydown", this._onKey);
+    clearBackgroundInert(this);
+    restoreFocus(this._prev);
+  }
+  _onKey(e) {
+    if (e.key === "Escape") {
+      this.close();
+      return;
+    }
+    trapFocus(this.shadowRoot, e);
+  }
+  disconnectedCallback() {
+    document.removeEventListener("keydown", this._onKey);
+    clearBackgroundInert(this);
+  }
+};
+customElements.define("velin-drawer", VelinDrawer);
+var velin_drawer_default = VelinDrawer;
+export {
+  velin_drawer_default as default
+};

package/dist/chunks/velin-empty-state-3NTUH2RF.js

@@ -0,0 +1,81 @@
+// components/velin-empty-state.js
+var styles = `
+  :host {
+    display: block;
+    text-align: center;
+    padding: var(--velin-space-8, 2rem) var(--velin-space-4, 1rem);
+  }
+  .illustration {
+    display: flex;
+    justify-content: center;
+    margin-block-end: var(--velin-space-4, 1rem);
+    color: var(--velin-color-text-muted, #666);
+  }
+  .title {
+    margin: 0 0 var(--velin-space-2, 0.5rem);
+    font-size: var(--velin-text-xl, 1.25rem);
+    font-weight: var(--velin-weight-bold, 700);
+    color: var(--velin-color-text, #111);
+  }
+  .description {
+    margin: 0 0 var(--velin-space-4, 1rem);
+    color: var(--velin-color-text-muted, #666);
+    max-inline-size: 36rem;
+    margin-inline: auto;
+  }
+  .actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--velin-space-3, 0.75rem);
+    justify-content: center;
+  }
+`;
+var VelinEmptyState = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["heading", "description"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    if (this.shadowRoot.querySelector(".root")) {
+      this._syncText();
+      return;
+    }
+    const titleId = "velin-empty-title";
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <section class="root" part="root" role="status" aria-labelledby="${titleId}">
+        <div class="illustration" part="illustration"><slot name="illustration"></slot></div>
+        <h2 class="title" id="${titleId}" part="title">
+          <slot name="title"><span class="heading-fallback"></span></slot>
+        </h2>
+        <div class="description" part="description">
+          <slot name="description"><span class="description-fallback"></span></slot>
+        </div>
+        <div class="actions" part="actions"><slot name="actions"></slot></div>
+        <slot></slot>
+      </section>
+    `;
+    this._syncText();
+  }
+  attributeChangedCallback() {
+    this._syncText();
+  }
+  _syncText() {
+    const heading = this.shadowRoot?.querySelector(".heading-fallback");
+    const description = this.shadowRoot?.querySelector(".description-fallback");
+    if (heading) heading.textContent = this.getAttribute("heading") || "Nothing here yet";
+    if (description) {
+      const text = this.getAttribute("description") || "";
+      description.textContent = text;
+      description.hidden = !text;
+    }
+  }
+};
+customElements.define("velin-empty-state", VelinEmptyState);
+var velin_empty_state_default = VelinEmptyState;
+export {
+  velin_empty_state_default as default
+};

package/dist/chunks/velin-modal-3MV4FYBK.js

@@ -0,0 +1,231 @@
+import {
+  clearBackgroundInert,
+  getFocusableElements,
+  restoreFocus,
+  saveFocus,
+  setBackgroundInert,
+  trapFocus
+} from "./chunk-42VVPW6N.js";
+
+// components/velin-modal.js
+var styles = `
+  :host {
+    display: contents;
+  }
+  .sr-only {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+  .overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--velin-z-modal, 500);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--velin-space-4, 1rem);
+    background: var(--velin-color-overlay, rgba(0,0,0,0.4));
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 200ms ease, visibility 200ms ease;
+  }
+  :host([open]) .overlay {
+    opacity: 1;
+    visibility: visible;
+  }
+  .dialog {
+    position: relative;
+    inline-size: min(90vw, 32rem);
+    max-block-size: 85vh;
+    background: var(--velin-color-surface-bright, #fff);
+    border-radius: var(--velin-radius-lg, 0.75rem);
+    box-shadow: var(--velin-shadow-xl, 0 20px 25px rgba(0,0,0,0.1));
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    transform: scale(0.95) translateY(1rem);
+    transition: transform 200ms ease;
+  }
+  :host([open]) .dialog {
+    transform: scale(1) translateY(0);
+  }
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--velin-space-4, 1rem) var(--velin-space-6, 1.5rem);
+    border-bottom: 1px solid var(--velin-color-border, #ddd);
+  }
+  .title {
+    font-size: var(--velin-text-lg, 1.25rem);
+    font-weight: var(--velin-weight-semibold, 600);
+    margin: 0;
+  }
+  .close-btn {
+    min-width: 2.75rem;
+    min-height: 2.75rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    border-radius: var(--velin-radius-md, 0.5rem);
+    cursor: pointer;
+    color: var(--velin-color-text-muted, #666);
+    font-size: 1.5rem;
+    line-height: 1;
+  }
+  .close-btn:hover {
+    background: var(--velin-color-surface-dim, #eee);
+    color: var(--velin-color-text, #111);
+  }
+  .body {
+    padding: var(--velin-space-6, 1.5rem);
+    overflow-y: auto;
+    flex-grow: 1;
+  }
+  .footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--velin-space-3, 0.75rem);
+    padding: var(--velin-space-4, 1rem) var(--velin-space-6, 1.5rem);
+    border-top: 1px solid var(--velin-color-border, #ddd);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .overlay, .dialog { transition: none; }
+  }
+`;
+var VelinModal = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["open", "title"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open", delegatesFocus: true });
+    this._previouslyFocused = null;
+    this._onKeydown = this._onKeydown.bind(this);
+    this._onTitleSlot = this._onTitleSlot.bind(this);
+  }
+  connectedCallback() {
+    if (this.shadowRoot.querySelector(".dialog")) return;
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="overlay" part="overlay">
+        <div class="dialog" role="dialog" aria-modal="true" part="dialog">
+          <div class="header" part="header">
+            <h2 class="title" id="velin-modal-title" part="title">
+              <slot name="title"></slot>
+              <span class="title-fallback"></span>
+            </h2>
+            <button class="close-btn" aria-label="Close" part="close">&#215;</button>
+          </div>
+          <div class="body" part="body"><slot></slot></div>
+          <div class="footer" part="footer"><slot name="footer"></slot></div>
+        </div>
+      </div>
+    `;
+    this.shadowRoot.querySelector(".close-btn").addEventListener("click", () => this.close());
+    this.shadowRoot.querySelector(".overlay").addEventListener("click", (e) => {
+      if (e.target === e.currentTarget) this.close();
+    });
+    this.shadowRoot.querySelector('slot[name="title"]').addEventListener("slotchange", this._onTitleSlot);
+    this._syncTitle();
+  }
+  attributeChangedCallback(name) {
+    if (name === "open") {
+      if (this.hasAttribute("open")) this._open();
+      else this._close();
+    }
+    if (name === "title") this._syncTitle();
+  }
+  open() {
+    this.setAttribute("open", "");
+  }
+  close() {
+    this.removeAttribute("open");
+    this.dispatchEvent(new CustomEvent("velin-close", { bubbles: true }));
+  }
+  _syncTitle() {
+    const fallback = this.shadowRoot?.querySelector(".title-fallback");
+    const heading = this.shadowRoot?.querySelector(".title");
+    const dialog = this.shadowRoot?.querySelector('[role="dialog"]');
+    if (!fallback || !heading || !dialog) return;
+    if (this._hasTitleSlot()) {
+      fallback.hidden = true;
+      heading.classList.remove("sr-only");
+      return;
+    }
+    fallback.hidden = false;
+    const title = (this.getAttribute("title") || "").trim();
+    fallback.textContent = title || "Dialog";
+    heading.classList.toggle("sr-only", !title);
+    if (title) {
+      dialog.setAttribute("aria-labelledby", "velin-modal-title");
+      dialog.removeAttribute("aria-label");
+    } else {
+      dialog.removeAttribute("aria-labelledby");
+      dialog.setAttribute("aria-label", this.getAttribute("aria-label") || "Dialog");
+    }
+  }
+  _hasTitleSlot() {
+    const slot = this.shadowRoot?.querySelector('slot[name="title"]');
+    if (!slot) return false;
+    return slot.assignedNodes({ flatten: true }).some((n) => {
+      if (n.nodeType === Node.TEXT_NODE) return Boolean(n.textContent.trim());
+      return n.nodeType === Node.ELEMENT_NODE;
+    });
+  }
+  _onTitleSlot() {
+    const slot = this.shadowRoot?.querySelector('slot[name="title"]');
+    const dialog = this.shadowRoot?.querySelector('[role="dialog"]');
+    const heading = this.shadowRoot?.querySelector(".title");
+    const fallback = this.shadowRoot?.querySelector(".title-fallback");
+    if (!slot || !dialog || !heading || !fallback) return;
+    if (this._hasTitleSlot()) {
+      fallback.hidden = true;
+      heading.classList.remove("sr-only");
+      dialog.removeAttribute("aria-labelledby");
+      const label = slot.assignedNodes({ flatten: true }).map((n) => n.textContent || "").join(" ").trim();
+      if (label) dialog.setAttribute("aria-label", label);
+    } else {
+      this._syncTitle();
+    }
+  }
+  _open() {
+    this._previouslyFocused = saveFocus();
+    setBackgroundInert(this);
+    document.addEventListener("keydown", this._onKeydown);
+    requestAnimationFrame(() => {
+      const focusable = getFocusableElements(this.shadowRoot);
+      if (focusable.length > 0) focusable[0].focus();
+    });
+  }
+  _close() {
+    document.removeEventListener("keydown", this._onKeydown);
+    clearBackgroundInert(this);
+    restoreFocus(this._previouslyFocused);
+  }
+  _onKeydown(event) {
+    if (event.key === "Escape") {
+      this.close();
+      return;
+    }
+    trapFocus(this.shadowRoot, event);
+  }
+  disconnectedCallback() {
+    document.removeEventListener("keydown", this._onKeydown);
+    clearBackgroundInert(this);
+  }
+};
+customElements.define("velin-modal", VelinModal);
+var velin_modal_default = VelinModal;
+export {
+  velin_modal_default as default
+};

package/dist/chunks/velin-otp-input-PSK42MM6.js

@@ -0,0 +1,207 @@
+import {
+  SHADOW_A11Y_STYLES
+} from "./chunk-F7OLHTGX.js";
+import {
+  escapeHTML
+} from "./chunk-L7ZGUU4D.js";
+
+// components/velin-otp-input.js
+var styles = `
+  ${SHADOW_A11Y_STYLES}
+  :host { display: block; }
+  .group {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--velin-space-2, 0.5rem);
+  }
+  input {
+    inline-size: 2.75rem;
+    block-size: 2.75rem;
+    text-align: center;
+    font: inherit;
+    font-size: var(--velin-text-lg, 1.25rem);
+    font-weight: var(--velin-weight-semibold, 600);
+    color: var(--velin-color-text, #111);
+    background: var(--velin-color-surface-bright, #fff);
+    border: 1px solid var(--velin-color-border, #ddd);
+    border-radius: var(--velin-radius-md, 0.5rem);
+    padding: 0;
+  }
+  input:focus-visible {
+    outline: 3px solid var(--velin-color-focus, #2563eb);
+    outline-offset: 2px;
+  }
+  input:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+  @media (forced-colors: active) {
+    input { border: 1px solid ButtonText; }
+  }
+`;
+function digitsOnly(value) {
+  return String(value || "").replace(/\D/g, "");
+}
+var VelinOtpInput = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["length", "value", "disabled", "name", "autocomplete", "label"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this._onInput = this._onInput.bind(this);
+    this._onKeydown = this._onKeydown.bind(this);
+    this._onPaste = this._onPaste.bind(this);
+    this._onFocus = this._onFocus.bind(this);
+  }
+  connectedCallback() {
+    if (!this.shadowRoot.querySelector(".group")) this._render();
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) return;
+    if (!this.shadowRoot.querySelector(".group")) return;
+    if (name === "length") this._render();
+    else if (name === "value") this._applyValue(this.getAttribute("value") || "", false);
+    else if (name === "disabled") this._syncDisabled();
+    else if (name === "label" || name === "autocomplete" || name === "name") this._syncMeta();
+  }
+  get value() {
+    return this._readValue();
+  }
+  set value(v) {
+    this.setAttribute("value", digitsOnly(v).slice(0, this._length()));
+  }
+  focus() {
+    const inputs = this._inputs();
+    const firstEmpty = inputs.find((i) => !i.value) || inputs[0];
+    firstEmpty?.focus();
+  }
+  _length() {
+    const n = parseInt(this.getAttribute("length") || "6", 10);
+    return Number.isFinite(n) && n > 0 ? Math.min(n, 12) : 6;
+  }
+  _inputs() {
+    return [...this.shadowRoot?.querySelectorAll("input") || []];
+  }
+  _readValue() {
+    return this._inputs().map((i) => i.value).join("");
+  }
+  _render() {
+    const len = this._length();
+    const label = escapeHTML(this.getAttribute("label") || "One-time password");
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="group" role="group" aria-label="${label}" part="group"></div>
+    `;
+    const group = this.shadowRoot.querySelector(".group");
+    for (let i = 0; i < len; i++) {
+      const input = document.createElement("input");
+      input.type = "text";
+      input.inputMode = "numeric";
+      input.pattern = "[0-9]*";
+      input.maxLength = 1;
+      input.setAttribute("aria-label", `Digit ${i + 1} of ${len}`);
+      input.dataset.index = String(i);
+      input.part = "digit";
+      input.addEventListener("input", this._onInput);
+      input.addEventListener("keydown", this._onKeydown);
+      input.addEventListener("paste", this._onPaste);
+      input.addEventListener("focus", this._onFocus);
+      group.appendChild(input);
+    }
+    this._syncMeta();
+    this._syncDisabled();
+    this._applyValue(this.getAttribute("value") || "", false);
+  }
+  _syncMeta() {
+    const group = this.shadowRoot?.querySelector(".group");
+    if (!group) return;
+    group.setAttribute("aria-label", this.getAttribute("label") || "One-time password");
+    const autocomplete = this.getAttribute("autocomplete") || "one-time-code";
+    const name = this.getAttribute("name") || "";
+    this._inputs().forEach((input, i) => {
+      input.autocomplete = i === 0 ? autocomplete : "off";
+      input.name = name ? `${name}-${i + 1}` : "";
+    });
+  }
+  _syncDisabled() {
+    const disabled = this.hasAttribute("disabled");
+    this._inputs().forEach((input) => {
+      input.disabled = disabled;
+    });
+  }
+  _applyValue(raw, emit) {
+    const digits = digitsOnly(raw).slice(0, this._length()).split("");
+    const inputs = this._inputs();
+    inputs.forEach((input, i) => {
+      input.value = digits[i] || "";
+    });
+    if (emit) this._emit();
+  }
+  _emit() {
+    const value = this._readValue();
+    if (this.getAttribute("value") !== value) {
+      this.setAttribute("value", value);
+    }
+    this.dispatchEvent(new CustomEvent("velin-change", {
+      bubbles: true,
+      composed: true,
+      detail: { value }
+    }));
+    if (value.length === this._length()) {
+      this.dispatchEvent(new CustomEvent("velin-complete", {
+        bubbles: true,
+        composed: true,
+        detail: { value }
+      }));
+    }
+  }
+  _onInput(e) {
+    const input = e.target;
+    const cleaned = digitsOnly(input.value).slice(-1);
+    input.value = cleaned;
+    const index = Number(input.dataset.index);
+    const inputs = this._inputs();
+    if (cleaned && index < inputs.length - 1) inputs[index + 1].focus();
+    this._emit();
+  }
+  _onKeydown(e) {
+    const input = e.target;
+    const index = Number(input.dataset.index);
+    const inputs = this._inputs();
+    if (e.key === "Backspace" && !input.value && index > 0) {
+      inputs[index - 1].focus();
+      inputs[index - 1].value = "";
+      this._emit();
+      e.preventDefault();
+    } else if (e.key === "ArrowLeft" && index > 0) {
+      inputs[index - 1].focus();
+      e.preventDefault();
+    } else if (e.key === "ArrowRight" && index < inputs.length - 1) {
+      inputs[index + 1].focus();
+      e.preventDefault();
+    }
+  }
+  _onPaste(e) {
+    e.preventDefault();
+    const text = digitsOnly(e.clipboardData?.getData("text") || "");
+    if (!text) return;
+    const index = Number(e.target.dataset.index);
+    const inputs = this._inputs();
+    const chars = text.split("");
+    for (let i = 0; i < chars.length && index + i < inputs.length; i++) {
+      inputs[index + i].value = chars[i];
+    }
+    const next = Math.min(index + chars.length, inputs.length - 1);
+    inputs[next]?.focus();
+    this._emit();
+  }
+  _onFocus(e) {
+    e.target.select?.();
+  }
+};
+customElements.define("velin-otp-input", VelinOtpInput);
+var velin_otp_input_default = VelinOtpInput;
+export {
+  velin_otp_input_default as default
+};