@editora/ui-core 0.1.9 → 0.1.12

package/dist/pin-input.cjs.js

@@ -0,0 +1,185 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("./ElementBase-1b301e7f.js"),A=`
+  :host {
+    --ui-pin-gap: 10px;
+    --ui-pin-slot-width: 48px;
+    --ui-pin-slot-height: 56px;
+    --ui-pin-radius: 14px;
+    --ui-pin-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
+    --ui-pin-color: var(--ui-color-text, var(--ui-text, #0f172a));
+    --ui-pin-muted: var(--ui-color-muted, var(--ui-muted, #64748b));
+    --ui-pin-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 70%, transparent);
+    --ui-pin-error: var(--ui-color-danger, var(--ui-error, #dc2626));
+    --ui-pin-focus: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
+    --ui-pin-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+    color-scheme: light dark;
+    display: block;
+    min-width: 0;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .root {
+    min-width: 0;
+    display: grid;
+    gap: 8px;
+    color: var(--ui-pin-color);
+  }
+
+  .meta,
+  .footer {
+    min-width: 0;
+    display: grid;
+    gap: 4px;
+  }
+
+  .label {
+    margin: 0;
+    min-width: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font: 600 13px/1.35 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.01em;
+  }
+
+  .required {
+    color: var(--ui-pin-error);
+    font-size: 12px;
+    line-height: 1;
+  }
+
+  .description,
+  .error {
+    margin: 0;
+    min-width: 0;
+    font-size: 12px;
+    line-height: 1.45;
+    letter-spacing: 0.01em;
+  }
+
+  .description {
+    color: var(--ui-pin-muted);
+  }
+
+  .error {
+    color: var(--ui-pin-error);
+    font-weight: 600;
+  }
+
+  .meta[hidden],
+  .label[hidden],
+  .description[hidden],
+  .error[hidden] {
+    display: none !important;
+  }
+
+  .group {
+    min-width: 0;
+    display: flex;
+    flex-wrap: nowrap;
+    gap: var(--ui-pin-gap);
+    align-items: center;
+  }
+
+  .slot {
+    inline-size: var(--ui-pin-slot-width);
+    min-inline-size: var(--ui-pin-slot-width);
+    block-size: var(--ui-pin-slot-height);
+    box-sizing: border-box;
+    border: 1px solid var(--ui-pin-border-color);
+    border-radius: var(--ui-pin-radius);
+    background: var(--ui-pin-bg);
+    color: var(--ui-pin-color);
+    text-align: center;
+    font: 650 24px/1 "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.04em;
+    outline: none;
+    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease, color 140ms ease;
+  }
+
+  .slot::placeholder {
+    color: color-mix(in srgb, var(--ui-pin-color) 26%, transparent);
+    letter-spacing: 0;
+  }
+
+  .slot:focus-visible {
+    border-color: color-mix(in srgb, var(--ui-pin-focus) 64%, var(--ui-pin-border-color));
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-pin-focus) 24%, transparent);
+  }
+
+  .slot[data-filled="true"] {
+    border-color: color-mix(in srgb, var(--ui-pin-accent) 34%, var(--ui-pin-border-color));
+    background: color-mix(in srgb, var(--ui-pin-accent) 5%, var(--ui-pin-bg));
+  }
+
+  :host([invalid]) .slot,
+  :host([data-invalid]) .slot {
+    border-color: color-mix(in srgb, var(--ui-pin-error) 44%, transparent);
+  }
+
+  :host([size="sm"]),
+  :host([size="1"]) {
+    --ui-pin-gap: 8px;
+    --ui-pin-slot-width: 42px;
+    --ui-pin-slot-height: 50px;
+  }
+
+  :host([size="lg"]),
+  :host([size="3"]) {
+    --ui-pin-gap: 12px;
+    --ui-pin-slot-width: 54px;
+    --ui-pin-slot-height: 62px;
+  }
+
+  :host([density="compact"]) {
+    --ui-pin-gap: 8px;
+  }
+
+  :host([density="comfortable"]) {
+    --ui-pin-gap: 12px;
+  }
+
+  :host([shape="square"]) {
+    --ui-pin-radius: 6px;
+  }
+
+  :host([shape="soft"]) {
+    --ui-pin-radius: 20px;
+  }
+
+  :host([disabled]) .slot,
+  :host([readonly]) .slot {
+    cursor: not-allowed;
+    opacity: 0.72;
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-pin-bg: Canvas;
+      --ui-pin-color: CanvasText;
+      --ui-pin-muted: CanvasText;
+      --ui-pin-border-color: CanvasText;
+      --ui-pin-error: CanvasText;
+      --ui-pin-focus: Highlight;
+    }
+
+    .slot {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+      box-shadow: none;
+    }
+  }
+`;function E(n){return Number.isFinite(n)?Math.max(1,Math.min(12,Math.floor(n))):6}function u(n){return E(Number(n.getAttribute("length")||6))}function d(n,t){return n.id||(n.id=`${t}-${Math.random().toString(36).slice(2,9)}`),n.id}function I(n,t){const i=n.trim();if(!i)return"";const e=i.slice(-1);return t==="numeric"?/^[0-9]$/.test(e)?e:"":t==="alpha"?/^[a-z]$/i.test(e)?e.toUpperCase():"":/^[a-z0-9]$/i.test(e)?e.toUpperCase():""}function b(n,t){return Array.from(n).map(i=>I(i,t)).filter(Boolean)}class p extends x.ElementBase{constructor(){super(...arguments),this._value="",this._suppressValueAttr=!1,this._formUnregister=null,this._rootEl=null,this._metaEl=null,this._labelEl=null,this._descriptionEl=null,this._groupEl=null,this._errorEl=null,this._inputs=[],this._onFocus=t=>{const i=t.currentTarget;try{i.select()}catch{}},this._onInput=t=>{if(this._disabled()||this._readOnly())return;const i=t.currentTarget,e=Number(i.getAttribute("data-index")||0);this._fillFromIndex(e,i.value,"input")},this._onPaste=t=>{var s;if(this._disabled()||this._readOnly())return;const i=t.currentTarget,e=Number(i.getAttribute("data-index")||0),r=((s=t.clipboardData)==null?void 0:s.getData("text"))||"";r&&(t.preventDefault(),this._fillFromIndex(e,r,"paste"))},this._onKeyDown=t=>{const i=t.currentTarget,e=Number(i.getAttribute("data-index")||0),r=Array.from({length:u(this)},(s,a)=>this._value[a]||"");if(t.key==="ArrowLeft"){t.preventDefault(),this.focusIndex(e-1);return}if(t.key==="ArrowRight"){t.preventDefault(),this.focusIndex(e+1);return}if(t.key==="Home"){t.preventDefault(),this.focusIndex(0);return}if(t.key==="End"){t.preventDefault(),this.focusIndex(this._inputs.length-1);return}if(t.key==="Backspace"){if(t.preventDefault(),r[e]){r[e]="",this._applyValue(r.join(""),"keyboard",!0),this.focusIndex(e);return}e>0&&(r[e-1]="",this._applyValue(r.join(""),"keyboard",!0),this.focusIndex(e-1));return}if(t.key==="Delete"){t.preventDefault(),r[e]="",this._applyValue(r.join(""),"keyboard",!0),this.focusIndex(e);return}}}static get observedAttributes(){return["value","length","name","label","description","error","disabled","readonly","required","mask","placeholder-char","mode","size","density","shape","invalid"]}get value(){return this._value}set value(t){this._applyValue(String(t??""),"api",!1)}clear(){this._applyValue("","clear",!0),this.focusIndex(0)}focusIndex(t=0){const i=this._inputs[Math.max(0,Math.min(t,this._inputs.length-1))];if(i)try{i.focus({preventScroll:!0}),i.select()}catch{i.focus(),i.select()}}focusFirst(){this.focusIndex(0)}connectedCallback(){super.connectedCallback(),this._registerWithForm()}disconnectedCallback(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null),super.disconnectedCallback()}attributeChangedCallback(t,i,e){if(i!==e){if(t==="name"&&this.isConnected&&this._registerWithForm(),t==="value"&&!this._suppressValueAttr&&(this._value=this._sanitizeValue(e||"")),t==="length"&&this.isConnected){this.invalidateContentCache(),this.requestRender();return}this._rootEl&&this._syncUi()}}shouldRenderOnAttributeChange(t){return t==="length"}render(){const t=u(this),i=Array.from({length:t},(e,r)=>{const s=this.hasAttribute("mask")?"password":"text",a=r===0?"one-time-code":"off",l=this._mode()==="numeric"?"numeric":"text";return`<input class="slot" part="slot" data-index="${r}" type="${s}" inputmode="${l}" autocomplete="${a}" maxlength="1" />`}).join("");this.setContent(`
+      <style>${A}</style>
+      <div class="root">
+        <div class="meta" hidden>
+          <div class="label" hidden><span class="label-text"></span><span class="required" hidden>*</span></div>
+          <div class="description" hidden></div>
+        </div>
+        <div class="group" part="group" role="group">${i}</div>
+        <div class="footer">
+          <div class="error" hidden></div>
+        </div>
+      </div>
+    `),this._rootEl=this.root.querySelector(".root"),this._metaEl=this.root.querySelector(".meta"),this._labelEl=this.root.querySelector(".label"),this._descriptionEl=this.root.querySelector(".description"),this._groupEl=this.root.querySelector(".group"),this._errorEl=this.root.querySelector(".error"),this._inputs=Array.from(this.root.querySelectorAll(".slot")),this._inputs.forEach(e=>{e.addEventListener("input",this._onInput),e.addEventListener("keydown",this._onKeyDown),e.addEventListener("paste",this._onPaste),e.addEventListener("focus",this._onFocus)}),this._value=this._sanitizeValue(this.getAttribute("value")||this._value),this._syncUi()}_mode(){const t=(this.getAttribute("mode")||"numeric").toLowerCase();return t==="alpha"?"alpha":t==="alphanumeric"?"alphanumeric":"numeric"}_disabled(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}_readOnly(){return this.hasAttribute("readonly")}_placeholderChar(){const t=this.getAttribute("placeholder-char");return t&&t.length?t[0]:""}_sanitizeValue(t){const i=u(this);return b(t,this._mode()).join("").slice(0,i)}_setValueAttr(t){this._suppressValueAttr=!0;try{t?this.getAttribute("value")!==t&&this.setAttribute("value",t):this.removeAttribute("value")}finally{this._suppressValueAttr=!1}}_emit(t,i){this.dispatchEvent(new CustomEvent(t,{detail:i,bubbles:!0,composed:!0}))}_applyValue(t,i,e){const r=this._sanitizeValue(t),s=this._value;if(r===s){this._syncUi();return}this._value=r,this._setValueAttr(r),this._syncUi(),e&&(this._emit("input",{value:r,previousValue:s,source:i}),this._emit("change",{value:r,previousValue:s,source:i}),r.length===u(this)&&this._emit("complete",{value:r,length:r.length,source:i}))}_fillFromIndex(t,i,e){const r=b(i,this._mode());if(!r.length){this._syncUi();return}const s=Array.from({length:u(this)},(l,h)=>this._value[h]||"");let a=Math.max(0,Math.min(t,s.length-1));r.forEach(l=>{a>=s.length||(s[a]=l,a+=1)}),this._applyValue(s.join(""),e,!0),this.focusIndex(Math.min(a,s.length-1))}_syncUi(){if(!this._groupEl||!this._labelEl||!this._descriptionEl||!this._errorEl||!this._metaEl)return;const t=Array.from({length:u(this)},(o,c)=>this._value[c]||""),i=this._placeholderChar(),e=this.getAttribute("label")||"",r=this.getAttribute("description")||"",s=this.getAttribute("error")||"",a=this.hasAttribute("required"),l=this._labelEl.querySelector(".label-text"),h=this._labelEl.querySelector(".required");l&&(l.textContent=e),h&&h.toggleAttribute("hidden",!a),this._labelEl.toggleAttribute("hidden",!e),this._descriptionEl.textContent=r,this._descriptionEl.toggleAttribute("hidden",!r),this._errorEl.textContent=s,this._errorEl.toggleAttribute("hidden",!s),this._metaEl.toggleAttribute("hidden",!e&&!r);const f=e?d(this._labelEl,"ui-pin-label"):"",v=r?d(this._descriptionEl,"ui-pin-description"):"",y=s?d(this._errorEl,"ui-pin-error"):"",m=[v,y].filter(Boolean).join(" ");this._inputs.forEach((o,c)=>{const g=t[c]||"";o.value=g,o.setAttribute("data-filled",g?"true":"false"),o.placeholder=i,o.disabled=this._disabled(),o.readOnly=this._readOnly(),o.setAttribute("aria-label",`Digit ${c+1} of ${t.length}`),f?o.setAttribute("aria-labelledby",f):o.removeAttribute("aria-labelledby"),m?o.setAttribute("aria-describedby",m):o.removeAttribute("aria-describedby"),s||this.hasAttribute("invalid")?o.setAttribute("aria-invalid","true"):o.removeAttribute("aria-invalid"),o.inputMode=this._mode()==="numeric"?"numeric":"text",o.pattern=this._mode()==="numeric"?"[0-9]*":this._mode()==="alpha"?"[A-Za-z]*":"[A-Za-z0-9]*"})}_registerWithForm(){var t;this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const e=this.getRootNode().host,s=((t=e==null?void 0:e.closest)==null?void 0:t.call(e,"ui-form"))||null||this.closest("ui-form"),a=this.getAttribute("name");s&&typeof s.registerField=="function"&&a&&(this._formUnregister=s.registerField(a,{name:a,getValue:()=>this.value,setValue:l=>{l==null||l===""?this.removeAttribute("value"):this.setAttribute("value",String(l))},validate:async()=>this.hasAttribute("required")&&this.value.length<u(this)?{valid:!1,message:"Enter the full verification code."}:{valid:!0,message:void 0},setError:l=>{l?(this.setAttribute("error",l),this.toggleAttribute("invalid",!0)):(this.removeAttribute("error"),this.removeAttribute("invalid")),this._syncUi()}}))}catch{}}}class _ extends p{}typeof customElements<"u"&&!customElements.get("ui-pin-input")&&customElements.define("ui-pin-input",p);typeof customElements<"u"&&!customElements.get("ui-otp-input")&&customElements.define("ui-otp-input",_);exports.UIOtpInput=_;exports.UIPinInput=p;

package/dist/pin-input.esm.js

@@ -0,0 +1,412 @@
+import { E as x } from "./ElementBase-909688f3.mjs";
+const y = `
+  :host {
+    --ui-pin-gap: 10px;
+    --ui-pin-slot-width: 48px;
+    --ui-pin-slot-height: 56px;
+    --ui-pin-radius: 14px;
+    --ui-pin-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
+    --ui-pin-color: var(--ui-color-text, var(--ui-text, #0f172a));
+    --ui-pin-muted: var(--ui-color-muted, var(--ui-muted, #64748b));
+    --ui-pin-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 70%, transparent);
+    --ui-pin-error: var(--ui-color-danger, var(--ui-error, #dc2626));
+    --ui-pin-focus: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
+    --ui-pin-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+    color-scheme: light dark;
+    display: block;
+    min-width: 0;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .root {
+    min-width: 0;
+    display: grid;
+    gap: 8px;
+    color: var(--ui-pin-color);
+  }
+
+  .meta,
+  .footer {
+    min-width: 0;
+    display: grid;
+    gap: 4px;
+  }
+
+  .label {
+    margin: 0;
+    min-width: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font: 600 13px/1.35 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.01em;
+  }
+
+  .required {
+    color: var(--ui-pin-error);
+    font-size: 12px;
+    line-height: 1;
+  }
+
+  .description,
+  .error {
+    margin: 0;
+    min-width: 0;
+    font-size: 12px;
+    line-height: 1.45;
+    letter-spacing: 0.01em;
+  }
+
+  .description {
+    color: var(--ui-pin-muted);
+  }
+
+  .error {
+    color: var(--ui-pin-error);
+    font-weight: 600;
+  }
+
+  .meta[hidden],
+  .label[hidden],
+  .description[hidden],
+  .error[hidden] {
+    display: none !important;
+  }
+
+  .group {
+    min-width: 0;
+    display: flex;
+    flex-wrap: nowrap;
+    gap: var(--ui-pin-gap);
+    align-items: center;
+  }
+
+  .slot {
+    inline-size: var(--ui-pin-slot-width);
+    min-inline-size: var(--ui-pin-slot-width);
+    block-size: var(--ui-pin-slot-height);
+    box-sizing: border-box;
+    border: 1px solid var(--ui-pin-border-color);
+    border-radius: var(--ui-pin-radius);
+    background: var(--ui-pin-bg);
+    color: var(--ui-pin-color);
+    text-align: center;
+    font: 650 24px/1 "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.04em;
+    outline: none;
+    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease, color 140ms ease;
+  }
+
+  .slot::placeholder {
+    color: color-mix(in srgb, var(--ui-pin-color) 26%, transparent);
+    letter-spacing: 0;
+  }
+
+  .slot:focus-visible {
+    border-color: color-mix(in srgb, var(--ui-pin-focus) 64%, var(--ui-pin-border-color));
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-pin-focus) 24%, transparent);
+  }
+
+  .slot[data-filled="true"] {
+    border-color: color-mix(in srgb, var(--ui-pin-accent) 34%, var(--ui-pin-border-color));
+    background: color-mix(in srgb, var(--ui-pin-accent) 5%, var(--ui-pin-bg));
+  }
+
+  :host([invalid]) .slot,
+  :host([data-invalid]) .slot {
+    border-color: color-mix(in srgb, var(--ui-pin-error) 44%, transparent);
+  }
+
+  :host([size="sm"]),
+  :host([size="1"]) {
+    --ui-pin-gap: 8px;
+    --ui-pin-slot-width: 42px;
+    --ui-pin-slot-height: 50px;
+  }
+
+  :host([size="lg"]),
+  :host([size="3"]) {
+    --ui-pin-gap: 12px;
+    --ui-pin-slot-width: 54px;
+    --ui-pin-slot-height: 62px;
+  }
+
+  :host([density="compact"]) {
+    --ui-pin-gap: 8px;
+  }
+
+  :host([density="comfortable"]) {
+    --ui-pin-gap: 12px;
+  }
+
+  :host([shape="square"]) {
+    --ui-pin-radius: 6px;
+  }
+
+  :host([shape="soft"]) {
+    --ui-pin-radius: 20px;
+  }
+
+  :host([disabled]) .slot,
+  :host([readonly]) .slot {
+    cursor: not-allowed;
+    opacity: 0.72;
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-pin-bg: Canvas;
+      --ui-pin-color: CanvasText;
+      --ui-pin-muted: CanvasText;
+      --ui-pin-border-color: CanvasText;
+      --ui-pin-error: CanvasText;
+      --ui-pin-focus: Highlight;
+    }
+
+    .slot {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+      box-shadow: none;
+    }
+  }
+`;
+function A(n) {
+  return Number.isFinite(n) ? Math.max(1, Math.min(12, Math.floor(n))) : 6;
+}
+function u(n) {
+  return A(Number(n.getAttribute("length") || 6));
+}
+function d(n, t) {
+  return n.id || (n.id = `${t}-${Math.random().toString(36).slice(2, 9)}`), n.id;
+}
+function E(n, t) {
+  const i = n.trim();
+  if (!i)
+    return "";
+  const e = i.slice(-1);
+  return t === "numeric" ? /^[0-9]$/.test(e) ? e : "" : t === "alpha" ? /^[a-z]$/i.test(e) ? e.toUpperCase() : "" : /^[a-z0-9]$/i.test(e) ? e.toUpperCase() : "";
+}
+function g(n, t) {
+  return Array.from(n).map((i) => E(i, t)).filter(Boolean);
+}
+class b extends x {
+  constructor() {
+    super(...arguments), this._value = "", this._suppressValueAttr = !1, this._formUnregister = null, this._rootEl = null, this._metaEl = null, this._labelEl = null, this._descriptionEl = null, this._groupEl = null, this._errorEl = null, this._inputs = [], this._onFocus = (t) => {
+      const i = t.currentTarget;
+      try {
+        i.select();
+      } catch {
+      }
+    }, this._onInput = (t) => {
+      if (this._disabled() || this._readOnly())
+        return;
+      const i = t.currentTarget, e = Number(i.getAttribute("data-index") || 0);
+      this._fillFromIndex(e, i.value, "input");
+    }, this._onPaste = (t) => {
+      var s;
+      if (this._disabled() || this._readOnly())
+        return;
+      const i = t.currentTarget, e = Number(i.getAttribute("data-index") || 0), r = ((s = t.clipboardData) == null ? void 0 : s.getData("text")) || "";
+      r && (t.preventDefault(), this._fillFromIndex(e, r, "paste"));
+    }, this._onKeyDown = (t) => {
+      const i = t.currentTarget, e = Number(i.getAttribute("data-index") || 0), r = Array.from({ length: u(this) }, (s, a) => this._value[a] || "");
+      if (t.key === "ArrowLeft") {
+        t.preventDefault(), this.focusIndex(e - 1);
+        return;
+      }
+      if (t.key === "ArrowRight") {
+        t.preventDefault(), this.focusIndex(e + 1);
+        return;
+      }
+      if (t.key === "Home") {
+        t.preventDefault(), this.focusIndex(0);
+        return;
+      }
+      if (t.key === "End") {
+        t.preventDefault(), this.focusIndex(this._inputs.length - 1);
+        return;
+      }
+      if (t.key === "Backspace") {
+        if (t.preventDefault(), r[e]) {
+          r[e] = "", this._applyValue(r.join(""), "keyboard", !0), this.focusIndex(e);
+          return;
+        }
+        e > 0 && (r[e - 1] = "", this._applyValue(r.join(""), "keyboard", !0), this.focusIndex(e - 1));
+        return;
+      }
+      if (t.key === "Delete") {
+        t.preventDefault(), r[e] = "", this._applyValue(r.join(""), "keyboard", !0), this.focusIndex(e);
+        return;
+      }
+    };
+  }
+  static get observedAttributes() {
+    return [
+      "value",
+      "length",
+      "name",
+      "label",
+      "description",
+      "error",
+      "disabled",
+      "readonly",
+      "required",
+      "mask",
+      "placeholder-char",
+      "mode",
+      "size",
+      "density",
+      "shape",
+      "invalid"
+    ];
+  }
+  get value() {
+    return this._value;
+  }
+  set value(t) {
+    this._applyValue(String(t ?? ""), "api", !1);
+  }
+  clear() {
+    this._applyValue("", "clear", !0), this.focusIndex(0);
+  }
+  focusIndex(t = 0) {
+    const i = this._inputs[Math.max(0, Math.min(t, this._inputs.length - 1))];
+    if (i)
+      try {
+        i.focus({ preventScroll: !0 }), i.select();
+      } catch {
+        i.focus(), i.select();
+      }
+  }
+  focusFirst() {
+    this.focusIndex(0);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._registerWithForm();
+  }
+  disconnectedCallback() {
+    this._formUnregister && (this._formUnregister(), this._formUnregister = null), super.disconnectedCallback();
+  }
+  attributeChangedCallback(t, i, e) {
+    if (i !== e) {
+      if (t === "name" && this.isConnected && this._registerWithForm(), t === "value" && !this._suppressValueAttr && (this._value = this._sanitizeValue(e || "")), t === "length" && this.isConnected) {
+        this.invalidateContentCache(), this.requestRender();
+        return;
+      }
+      this._rootEl && this._syncUi();
+    }
+  }
+  shouldRenderOnAttributeChange(t) {
+    return t === "length";
+  }
+  render() {
+    const t = u(this), i = Array.from({ length: t }, (e, r) => {
+      const s = this.hasAttribute("mask") ? "password" : "text", a = r === 0 ? "one-time-code" : "off", l = this._mode() === "numeric" ? "numeric" : "text";
+      return `<input class="slot" part="slot" data-index="${r}" type="${s}" inputmode="${l}" autocomplete="${a}" maxlength="1" />`;
+    }).join("");
+    this.setContent(`
+      <style>${y}</style>
+      <div class="root">
+        <div class="meta" hidden>
+          <div class="label" hidden><span class="label-text"></span><span class="required" hidden>*</span></div>
+          <div class="description" hidden></div>
+        </div>
+        <div class="group" part="group" role="group">${i}</div>
+        <div class="footer">
+          <div class="error" hidden></div>
+        </div>
+      </div>
+    `), this._rootEl = this.root.querySelector(".root"), this._metaEl = this.root.querySelector(".meta"), this._labelEl = this.root.querySelector(".label"), this._descriptionEl = this.root.querySelector(".description"), this._groupEl = this.root.querySelector(".group"), this._errorEl = this.root.querySelector(".error"), this._inputs = Array.from(this.root.querySelectorAll(".slot")), this._inputs.forEach((e) => {
+      e.addEventListener("input", this._onInput), e.addEventListener("keydown", this._onKeyDown), e.addEventListener("paste", this._onPaste), e.addEventListener("focus", this._onFocus);
+    }), this._value = this._sanitizeValue(this.getAttribute("value") || this._value), this._syncUi();
+  }
+  _mode() {
+    const t = (this.getAttribute("mode") || "numeric").toLowerCase();
+    return t === "alpha" ? "alpha" : t === "alphanumeric" ? "alphanumeric" : "numeric";
+  }
+  _disabled() {
+    return this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
+  }
+  _readOnly() {
+    return this.hasAttribute("readonly");
+  }
+  _placeholderChar() {
+    const t = this.getAttribute("placeholder-char");
+    return t && t.length ? t[0] : "";
+  }
+  _sanitizeValue(t) {
+    const i = u(this);
+    return g(t, this._mode()).join("").slice(0, i);
+  }
+  _setValueAttr(t) {
+    this._suppressValueAttr = !0;
+    try {
+      t ? this.getAttribute("value") !== t && this.setAttribute("value", t) : this.removeAttribute("value");
+    } finally {
+      this._suppressValueAttr = !1;
+    }
+  }
+  _emit(t, i) {
+    this.dispatchEvent(new CustomEvent(t, { detail: i, bubbles: !0, composed: !0 }));
+  }
+  _applyValue(t, i, e) {
+    const r = this._sanitizeValue(t), s = this._value;
+    if (r === s) {
+      this._syncUi();
+      return;
+    }
+    this._value = r, this._setValueAttr(r), this._syncUi(), e && (this._emit("input", { value: r, previousValue: s, source: i }), this._emit("change", { value: r, previousValue: s, source: i }), r.length === u(this) && this._emit("complete", { value: r, length: r.length, source: i }));
+  }
+  _fillFromIndex(t, i, e) {
+    const r = g(i, this._mode());
+    if (!r.length) {
+      this._syncUi();
+      return;
+    }
+    const s = Array.from({ length: u(this) }, (l, h) => this._value[h] || "");
+    let a = Math.max(0, Math.min(t, s.length - 1));
+    r.forEach((l) => {
+      a >= s.length || (s[a] = l, a += 1);
+    }), this._applyValue(s.join(""), e, !0), this.focusIndex(Math.min(a, s.length - 1));
+  }
+  _syncUi() {
+    if (!this._groupEl || !this._labelEl || !this._descriptionEl || !this._errorEl || !this._metaEl)
+      return;
+    const t = Array.from({ length: u(this) }, (o, c) => this._value[c] || ""), i = this._placeholderChar(), e = this.getAttribute("label") || "", r = this.getAttribute("description") || "", s = this.getAttribute("error") || "", a = this.hasAttribute("required"), l = this._labelEl.querySelector(".label-text"), h = this._labelEl.querySelector(".required");
+    l && (l.textContent = e), h && h.toggleAttribute("hidden", !a), this._labelEl.toggleAttribute("hidden", !e), this._descriptionEl.textContent = r, this._descriptionEl.toggleAttribute("hidden", !r), this._errorEl.textContent = s, this._errorEl.toggleAttribute("hidden", !s), this._metaEl.toggleAttribute("hidden", !e && !r);
+    const p = e ? d(this._labelEl, "ui-pin-label") : "", _ = r ? d(this._descriptionEl, "ui-pin-description") : "", v = s ? d(this._errorEl, "ui-pin-error") : "", f = [_, v].filter(Boolean).join(" ");
+    this._inputs.forEach((o, c) => {
+      const m = t[c] || "";
+      o.value = m, o.setAttribute("data-filled", m ? "true" : "false"), o.placeholder = i, o.disabled = this._disabled(), o.readOnly = this._readOnly(), o.setAttribute("aria-label", `Digit ${c + 1} of ${t.length}`), p ? o.setAttribute("aria-labelledby", p) : o.removeAttribute("aria-labelledby"), f ? o.setAttribute("aria-describedby", f) : o.removeAttribute("aria-describedby"), s || this.hasAttribute("invalid") ? o.setAttribute("aria-invalid", "true") : o.removeAttribute("aria-invalid"), o.inputMode = this._mode() === "numeric" ? "numeric" : "text", o.pattern = this._mode() === "numeric" ? "[0-9]*" : this._mode() === "alpha" ? "[A-Za-z]*" : "[A-Za-z0-9]*";
+    });
+  }
+  _registerWithForm() {
+    var t;
+    this._formUnregister && (this._formUnregister(), this._formUnregister = null);
+    try {
+      const e = this.getRootNode().host, s = ((t = e == null ? void 0 : e.closest) == null ? void 0 : t.call(e, "ui-form")) || null || this.closest("ui-form"), a = this.getAttribute("name");
+      s && typeof s.registerField == "function" && a && (this._formUnregister = s.registerField(a, {
+        name: a,
+        getValue: () => this.value,
+        setValue: (l) => {
+          l == null || l === "" ? this.removeAttribute("value") : this.setAttribute("value", String(l));
+        },
+        validate: async () => this.hasAttribute("required") && this.value.length < u(this) ? { valid: !1, message: "Enter the full verification code." } : { valid: !0, message: void 0 },
+        setError: (l) => {
+          l ? (this.setAttribute("error", l), this.toggleAttribute("invalid", !0)) : (this.removeAttribute("error"), this.removeAttribute("invalid")), this._syncUi();
+        }
+      }));
+    } catch {
+    }
+  }
+}
+class I extends b {
+}
+typeof customElements < "u" && !customElements.get("ui-pin-input") && customElements.define("ui-pin-input", b);
+typeof customElements < "u" && !customElements.get("ui-otp-input") && customElements.define("ui-otp-input", I);
+export {
+  I as UIOtpInput,
+  b as UIPinInput
+};