@editora/ui-core 0.1.19 → 0.1.20

package/dist/password-field.esm.js

@@ -1,4 +1,4 @@
-import { E as z } from "./ElementBase-909688f3.mjs";
+import { E as z } from "./ElementBase-YlTLMsGk.mjs";
 const q = `
   <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
     <path d="m6 6 8 8M14 6l-8 8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
@@ -603,31 +603,26 @@ const q = `
   "description",
   "data-error"
 ];
-function d(a) {
-  return a.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function l(o) {
+  return o.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function g(a) {
-  if (!a)
-    return !1;
-  const t = a.assignedNodes({ flatten: !0 });
-  return t.length ? t.some((e) => {
-    var i;
-    return e.nodeType === Node.TEXT_NODE ? !!((i = e.textContent) != null && i.trim()) : e.nodeType === Node.ELEMENT_NODE;
-  }) : !1;
+function p(o) {
+  if (!o) return !1;
+  const t = o.assignedNodes({ flatten: !0 });
+  return t.length ? t.some((e) => e.nodeType === Node.TEXT_NODE ? !!e.textContent?.trim() : e.nodeType === Node.ELEMENT_NODE) : !1;
 }
-function p(a, t) {
-  const e = a.getAttribute(t);
-  if (e == null)
-    return !1;
+function u(o, t) {
+  const e = o.getAttribute(t);
+  if (e == null) return !1;
   const i = String(e).trim().toLowerCase();
   return i !== "false" && i !== "0";
 }
-function M(a) {
-  return a === "none" || a === "large" || a === "full";
+function M(o) {
+  return o === "none" || o === "large" || o === "full";
 }
-function I(a) {
+function I(o) {
   let t = 0;
-  switch (a.length >= 8 && (t += 1), /[a-z]/.test(a) && /[A-Z]/.test(a) && (t += 1), /\d/.test(a) && (t += 1), (/[^A-Za-z0-9]/.test(a) || a.length >= 14) && (t += 1), Math.max(1, Math.min(4, t || 1))) {
+  switch (o.length >= 8 && (t += 1), /[a-z]/.test(o) && /[A-Z]/.test(o) && (t += 1), /\d/.test(o) && (t += 1), (/[^A-Za-z0-9]/.test(o) || o.length >= 14) && (t += 1), Math.max(1, Math.min(4, t || 1))) {
     case 1:
       return { score: 1, label: "Weak", caption: "Use more characters and mix case, numbers, or symbols." };
     case 2:
@@ -667,12 +662,11 @@ class L extends z {
         return;
       }
       this._syncUi(), t === "autofocus" && this.hasAttribute("autofocus") && !this._autofocusApplied && (this._autofocusApplied = !0, queueMicrotask(() => {
-        var r, n;
         if (this.isConnected)
           try {
-            (r = this._input) == null || r.focus({ preventScroll: !0 });
+            this._input?.focus({ preventScroll: !0 });
           } catch {
-            (n = this._input) == null || n.focus();
+            this._input?.focus();
           }
       }));
     }
@@ -688,21 +682,16 @@ class L extends z {
     super.focus(t);
   }
   blur() {
-    var t;
-    (t = this._input) == null || t.blur();
+    this._input?.blur();
   }
   select() {
-    var t;
-    (t = this._input) == null || t.select();
+    this._input?.select();
   }
   toggleVisibility(t) {
-    var n, s;
-    if (p(this, "disabled") || this.hasAttribute("readonly") || this.getAttribute("revealable") === "false")
-      return;
+    if (u(this, "disabled") || this.hasAttribute("readonly") || this.getAttribute("revealable") === "false") return;
     const e = typeof t == "boolean" ? t : !this._revealed;
-    if (e === this._revealed)
-      return;
-    const i = ((n = this._input) == null ? void 0 : n.selectionStart) ?? null, r = ((s = this._input) == null ? void 0 : s.selectionEnd) ?? null;
+    if (e === this._revealed) return;
+    const i = this._input?.selectionStart ?? null, r = this._input?.selectionEnd ?? null;
     this._revealed = e, this._syncToggleUi(), this.dispatchEvent(
       new CustomEvent("visibility-change", {
         detail: { revealed: this._revealed },
@@ -710,34 +699,33 @@ class L extends z {
         composed: !0
       })
     ), queueMicrotask(() => {
-      const o = this._input;
-      if (o) {
+      const n = this._input;
+      if (n) {
         try {
-          o.focus({ preventScroll: !0 });
+          n.focus({ preventScroll: !0 });
         } catch {
-          o.focus();
+          n.focus();
         }
-        if (i != null && r != null && typeof o.setSelectionRange == "function")
+        if (i != null && r != null && typeof n.setSelectionRange == "function")
           try {
-            o.setSelectionRange(i, r);
+            n.setSelectionRange(i, r);
           } catch {
           }
       }
     });
   }
   render() {
-    var l, u, c, h;
-    const t = this.value, e = this.getAttribute("label") || "", i = this.getAttribute("description") || "", r = this.getAttribute("data-error") || "", n = this.getAttribute("placeholder") || "", s = this.hasAttribute("required") ? '<span class="required" aria-hidden="true">*</span>' : "", o = this.hasAttribute("floating-label");
+    const t = this.value, e = this.getAttribute("label") || "", i = this.getAttribute("description") || "", r = this.getAttribute("data-error") || "", n = this.getAttribute("placeholder") || "", s = this.hasAttribute("required") ? '<span class="required" aria-hidden="true">*</span>' : "", a = this.hasAttribute("floating-label");
     this.setContent(`
       <style>${B}</style>
       <div class="root" part="root">
         <div class="meta" part="meta">
           <label class="label" id="${this._uid}-label" part="label">
-            <slot name="label">${d(e)}</slot>
+            <slot name="label">${l(e)}</slot>
             ${s}
           </label>
           <p class="description" id="${this._uid}-description" part="description">
-            <slot name="description">${d(i)}</slot>
+            <slot name="description">${l(i)}</slot>
           </p>
         </div>
 
@@ -748,10 +736,10 @@ class L extends z {
             <input
               part="input"
               type="password"
-              value="${d(t)}"
-              placeholder="${d(n)}"
+              value="${l(t)}"
+              placeholder="${l(n)}"
             />
-            ${o ? `<span class="floating-label" part="floating-label">${d(e || n || "Password")}</span>` : ""}
+            ${a ? `<span class="floating-label" part="floating-label">${l(e || n || "Password")}</span>` : ""}
           </div>
 
           <div class="actions" part="actions">
@@ -763,7 +751,7 @@ class L extends z {
 
         <div class="footer" part="footer">
           <p class="error" id="${this._uid}-error" part="error" aria-live="polite">
-            <slot name="error">${d(r)}</slot>
+            <slot name="error">${l(r)}</slot>
           </p>
           <p class="counter" part="counter"></p>
         </div>
@@ -778,11 +766,10 @@ class L extends z {
           </div>
         </div>
       </div>
-    `), this._detachListeners(), this._input = this.root.querySelector("input"), this._clearBtn = this.root.querySelector(".clear-btn"), this._toggleBtn = this.root.querySelector(".toggle-btn"), (l = this._input) == null || l.addEventListener("input", this._onNativeInput), (u = this._input) == null || u.addEventListener("change", this._onNativeChange), (c = this._clearBtn) == null || c.addEventListener("click", this._onClearClick), (h = this._toggleBtn) == null || h.addEventListener("click", this._onToggleClick), this._syncUi();
+    `), this._detachListeners(), this._input = this.root.querySelector("input"), this._clearBtn = this.root.querySelector(".clear-btn"), this._toggleBtn = this.root.querySelector(".toggle-btn"), this._input?.addEventListener("input", this._onNativeInput), this._input?.addEventListener("change", this._onNativeChange), this._clearBtn?.addEventListener("click", this._onClearClick), this._toggleBtn?.addEventListener("click", this._onToggleClick), this._syncUi();
   }
   _detachListeners() {
-    var t, e, i, r;
-    (t = this._input) == null || t.removeEventListener("input", this._onNativeInput), (e = this._input) == null || e.removeEventListener("change", this._onNativeChange), (i = this._clearBtn) == null || i.removeEventListener("click", this._onClearClick), (r = this._toggleBtn) == null || r.removeEventListener("click", this._onToggleClick), this._clearBtn = null, this._toggleBtn = null;
+    this._input?.removeEventListener("input", this._onNativeInput), this._input?.removeEventListener("change", this._onNativeChange), this._clearBtn?.removeEventListener("click", this._onClearClick), this._toggleBtn?.removeEventListener("click", this._onToggleClick), this._clearBtn = null, this._toggleBtn = null;
   }
   _syncHostTokens() {
     const t = this.getAttribute("color");
@@ -791,35 +778,31 @@ class L extends z {
     e && !M(e) ? this.style.setProperty("--ui-input-border-radius", e) : this.style.removeProperty("--ui-input-border-radius");
   }
   _syncControlAttrs() {
-    if (this._syncHostTokens(), !this._input)
-      return;
-    const t = p(this, "disabled"), e = this.hasAttribute("required"), i = this.hasAttribute("readonly"), r = this.getAttribute("maxlength") || "", n = this.getAttribute("minlength") || "", s = this.getAttribute("pattern") || "", o = this.getAttribute("autocomplete") || "current-password", l = this.getAttribute("spellcheck") || "", u = this.getAttribute("placeholder") || "", c = this.getAttribute("name") || "";
-    this._input.disabled = t, this._input.required = e, this._input.readOnly = i, this._input.placeholder = u, this._input.name = c, this._input.type = this._revealed ? "text" : "password", o ? this._input.setAttribute("autocomplete", o) : this._input.removeAttribute("autocomplete"), s ? this._input.setAttribute("pattern", s) : this._input.removeAttribute("pattern"), l ? this._input.setAttribute("spellcheck", l) : this._input.removeAttribute("spellcheck"), r && Number.isFinite(Number(r)) ? this._input.setAttribute("maxlength", r) : this._input.removeAttribute("maxlength"), n && Number.isFinite(Number(n)) ? this._input.setAttribute("minlength", n) : this._input.removeAttribute("minlength");
+    if (this._syncHostTokens(), !this._input) return;
+    const t = u(this, "disabled"), e = this.hasAttribute("required"), i = this.hasAttribute("readonly"), r = this.getAttribute("maxlength") || "", n = this.getAttribute("minlength") || "", s = this.getAttribute("pattern") || "", a = this.getAttribute("autocomplete") || "current-password", c = this.getAttribute("spellcheck") || "", h = this.getAttribute("placeholder") || "", d = this.getAttribute("name") || "";
+    this._input.disabled = t, this._input.required = e, this._input.readOnly = i, this._input.placeholder = h, this._input.name = d, this._input.type = this._revealed ? "text" : "password", this._input.setAttribute("autocomplete", a), s ? this._input.setAttribute("pattern", s) : this._input.removeAttribute("pattern"), c ? this._input.setAttribute("spellcheck", c) : this._input.removeAttribute("spellcheck"), r && Number.isFinite(Number(r)) ? this._input.setAttribute("maxlength", r) : this._input.removeAttribute("maxlength"), n && Number.isFinite(Number(n)) ? this._input.setAttribute("minlength", n) : this._input.removeAttribute("minlength");
   }
   _syncInputValue(t) {
     this._input && this._input.value !== t && (this._input.value = t);
     const e = this.root.querySelector(".shell");
-    e && e.setAttribute("data-has-value", t ? "true" : "false"), this._clearBtn && (p(this, "clearable") && t.length > 0 && !p(this, "disabled") && !this.hasAttribute("readonly") ? this._clearBtn.removeAttribute("hidden") : this._clearBtn.setAttribute("hidden", ""));
+    e && e.setAttribute("data-has-value", t ? "true" : "false"), this._clearBtn && (u(this, "clearable") && t.length > 0 && !u(this, "disabled") && !this.hasAttribute("readonly") ? this._clearBtn.removeAttribute("hidden") : this._clearBtn.setAttribute("hidden", ""));
     const i = this.root.querySelector(".counter");
     if (i && this.hasAttribute("counter")) {
       const r = this.getAttribute("maxlength");
       i.textContent = r ? `${t.length}/${r}` : String(t.length);
-    } else
-      i && (i.textContent = "");
+    } else i && (i.textContent = "");
   }
   _syncToggleUi() {
-    if (!this._toggleBtn || !this._input)
-      return;
+    if (!this._toggleBtn || !this._input) return;
     this._input.type = this._revealed ? "text" : "password";
-    const t = this.getAttribute("revealable") !== "false", e = p(this, "disabled") || this.hasAttribute("readonly");
+    const t = this.getAttribute("revealable") !== "false", e = u(this, "disabled") || this.hasAttribute("readonly");
     this._toggleBtn.hidden = !t, this._toggleBtn.disabled = e, this._toggleBtn.setAttribute("aria-pressed", this._revealed ? "true" : "false"), this._toggleBtn.setAttribute("aria-label", this._revealed ? "Hide password" : "Show password");
     const i = this._revealed ? "revealed" : "hidden";
     this._toggleBtn.dataset.iconState !== i && (this._toggleBtn.dataset.iconState = i, this._toggleBtn.innerHTML = this._revealed ? T : C);
   }
   _syncStrengthUi() {
     const t = this.root.querySelector(".strength"), e = this.root.querySelector(".strength-label"), i = this.root.querySelector(".strength-caption");
-    if (!t || !e || !i)
-      return;
+    if (!t || !e || !i) return;
     const r = this.value, n = this.hasAttribute("show-strength") && r.length > 0;
     if (t.hidden = !n, !n) {
       delete t.dataset.score, e.textContent = "", i.textContent = "", this._lastStrengthKey = "";
@@ -827,8 +810,8 @@ class L extends z {
     }
     const s = (this.strengthEvaluator || I)(r);
     t.dataset.score = String(s.score), e.textContent = s.label, i.textContent = s.caption;
-    const o = `${r}|${s.score}|${s.label}|${s.caption}`;
-    o !== this._lastStrengthKey && (this._lastStrengthKey = o, this.dispatchEvent(
+    const a = `${r}|${s.score}|${s.label}|${s.caption}`;
+    a !== this._lastStrengthKey && (this._lastStrengthKey = a, this.dispatchEvent(
       new CustomEvent("strength-change", {
         detail: {
           value: r,
@@ -842,23 +825,21 @@ class L extends z {
     ));
   }
   _syncDerivedState() {
-    const t = this.root.querySelector('slot[name="label"]'), e = this.root.querySelector('slot[name="description"]'), i = this.root.querySelector('slot[name="error"]'), r = this.root.querySelector('slot[name="prefix"]'), n = this.root.querySelector('slot[name="suffix"]'), s = (this.getAttribute("label") || "").trim(), o = (this.getAttribute("description") || "").trim(), l = (this.getAttribute("data-error") || "").trim(), u = !!s || g(t), c = !!o || g(e), h = !!l || g(i), S = g(r), E = g(n), f = this.root.querySelector(".label"), v = this.root.querySelector(".description"), m = this.root.querySelector(".prefix"), _ = this.root.querySelector(".suffix-slot"), x = this.root.querySelector(".meta"), y = this.root.querySelector(".footer"), A = this.root.querySelector(".error"), w = this.root.querySelector(".counter");
-    f && f.toggleAttribute("hidden", !u), v && v.toggleAttribute("hidden", !c), m && m.toggleAttribute("hidden", !S), _ && _.toggleAttribute("hidden", !E), x && x.toggleAttribute("hidden", !u && !c);
+    const t = this.root.querySelector('slot[name="label"]'), e = this.root.querySelector('slot[name="description"]'), i = this.root.querySelector('slot[name="error"]'), r = this.root.querySelector('slot[name="prefix"]'), n = this.root.querySelector('slot[name="suffix"]'), s = (this.getAttribute("label") || "").trim(), a = (this.getAttribute("description") || "").trim(), c = (this.getAttribute("data-error") || "").trim(), h = !!s || p(t), d = !!a || p(e), b = !!c || p(i), S = p(r), E = p(n), f = this.root.querySelector(".label"), v = this.root.querySelector(".description"), m = this.root.querySelector(".prefix"), _ = this.root.querySelector(".suffix-slot"), x = this.root.querySelector(".meta"), y = this.root.querySelector(".footer"), A = this.root.querySelector(".error"), w = this.root.querySelector(".counter");
+    f && f.toggleAttribute("hidden", !h), v && v.toggleAttribute("hidden", !d), m && m.toggleAttribute("hidden", !S), _ && _.toggleAttribute("hidden", !E), x && x.toggleAttribute("hidden", !h && !d);
     const k = this.hasAttribute("counter");
-    if (w && w.toggleAttribute("hidden", !k), A && A.toggleAttribute("hidden", !h), y && y.toggleAttribute("hidden", !h && !k), !this._input)
-      return;
-    u ? this._input.setAttribute("aria-labelledby", `${this._uid}-label`) : this._input.removeAttribute("aria-labelledby");
-    const b = [];
-    c && b.push(`${this._uid}-description`), h && b.push(`${this._uid}-error`), b.length ? this._input.setAttribute("aria-describedby", b.join(" ")) : this._input.removeAttribute("aria-describedby"), this.getAttribute("validation") === "error" || !!l ? this._input.setAttribute("aria-invalid", "true") : this._input.removeAttribute("aria-invalid"), this.hasAttribute("required") ? this._input.setAttribute("aria-required", "true") : this._input.removeAttribute("aria-required");
+    if (w && w.toggleAttribute("hidden", !k), A && A.toggleAttribute("hidden", !b), y && y.toggleAttribute("hidden", !b && !k), !this._input) return;
+    h ? this._input.setAttribute("aria-labelledby", `${this._uid}-label`) : this._input.removeAttribute("aria-labelledby");
+    const g = [];
+    d && g.push(`${this._uid}-description`), b && g.push(`${this._uid}-error`), g.length ? this._input.setAttribute("aria-describedby", g.join(" ")) : this._input.removeAttribute("aria-describedby"), this.getAttribute("validation") === "error" || !!c ? this._input.setAttribute("aria-invalid", "true") : this._input.removeAttribute("aria-invalid"), this.hasAttribute("required") ? this._input.setAttribute("aria-required", "true") : this._input.removeAttribute("aria-required");
   }
   _syncUi() {
     this._syncControlAttrs(), this._syncInputValue(this.value), this._syncDerivedState(), this._syncToggleUi(), this._syncStrengthUi(), this.hasAttribute("autofocus") && !this._autofocusApplied && (this._autofocusApplied = !0, queueMicrotask(() => {
-      var t, e;
       if (this.isConnected)
         try {
-          (t = this._input) == null || t.focus({ preventScroll: !0 });
+          this._input?.focus({ preventScroll: !0 });
         } catch {
-          (e = this._input) == null || e.focus();
+          this._input?.focus();
         }
     }));
   }
@@ -872,19 +853,18 @@ class L extends z {
     );
   }
   _registerWithForm() {
-    var t;
     this._formUnregister && (this._formUnregister(), this._formUnregister = null);
     try {
-      const i = this.getRootNode().host, n = ((t = i == null ? void 0 : i.closest) == null ? void 0 : t.call(i, "ui-form")) || null || this.closest("ui-form"), s = this.getAttribute("name");
-      n && typeof n.registerField == "function" && s && (this._formUnregister = n.registerField(s, {
-        name: s,
+      const r = this.getRootNode().host?.closest?.("ui-form") || null || this.closest("ui-form"), n = this.getAttribute("name");
+      r && typeof r.registerField == "function" && n && (this._formUnregister = r.registerField(n, {
+        name: n,
         getValue: () => this.value,
-        setValue: (o) => {
-          this.value = String(o ?? "");
+        setValue: (s) => {
+          this.value = String(s ?? "");
         },
         validate: async () => this._input ? { valid: this._input.checkValidity(), message: this._input.validationMessage || void 0 } : { valid: !0 },
-        setError: (o) => {
-          o ? (this.setAttribute("validation", "error"), this.setAttribute("data-error", o)) : (this.removeAttribute("validation"), this.removeAttribute("data-error")), this._syncUi();
+        setError: (s) => {
+          s ? (this.setAttribute("validation", "error"), this.setAttribute("data-error", s)) : (this.removeAttribute("validation"), this.removeAttribute("data-error")), this._syncUi();
         }
       }));
     } catch {
@@ -906,7 +886,7 @@ class L extends z {
     this._emitValueEvent("change", e);
   }
   _onClearClick(t) {
-    if (t.preventDefault(), !(p(this, "disabled") || this.hasAttribute("readonly")) && this._input) {
+    if (t.preventDefault(), !(u(this, "disabled") || this.hasAttribute("readonly")) && this._input) {
       this.value = "", this._input.value = "", this._input.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 })), this._input.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("clear", { bubbles: !0, composed: !0 }));
       try {
         this._input.focus({ preventScroll: !0 });

package/dist/pin-input.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("./ElementBase-1b301e7f.js"),A=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("./ElementBase-EV6mVBUV.js"),A=`
   :host {
     --ui-pin-gap: 10px;
     --ui-pin-slot-width: 48px;
@@ -170,7 +170,7 @@
       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(`
+`;function E(a){return Number.isFinite(a)?Math.max(1,Math.min(12,Math.floor(a))):6}function u(a){return E(Number(a.getAttribute("length")||6))}function d(a,t){return a.id||(a.id=`${t}-${Math.random().toString(36).slice(2,9)}`),a.id}function I(a,t){const i=a.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(a,t){return Array.from(a).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=>{if(this._disabled()||this._readOnly())return;const i=t.currentTarget,e=Number(i.getAttribute("data-index")||0),r=t.clipboardData?.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,o)=>this._value[o]||"");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",o=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="${o}" maxlength="1" />`}).join("");this.setContent(`
       <style>${A}</style>
       <div class="root">
         <div class="meta" hidden>
@@ -182,4 +182,4 @@
           <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;
+    `),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 o=Math.max(0,Math.min(t,s.length-1));r.forEach(l=>{o>=s.length||(s[o]=l,o+=1)}),this._applyValue(s.join(""),e,!0),this.focusIndex(Math.min(o,s.length-1))}_syncUi(){if(!this._groupEl||!this._labelEl||!this._descriptionEl||!this._errorEl||!this._metaEl)return;const t=Array.from({length:u(this)},(n,c)=>this._value[c]||""),i=this._placeholderChar(),e=this.getAttribute("label")||"",r=this.getAttribute("description")||"",s=this.getAttribute("error")||"",o=this.hasAttribute("required"),l=this._labelEl.querySelector(".label-text"),h=this._labelEl.querySelector(".required");l&&(l.textContent=e),h&&h.toggleAttribute("hidden",!o),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((n,c)=>{const g=t[c]||"";n.value=g,n.setAttribute("data-filled",g?"true":"false"),n.placeholder=i,n.disabled=this._disabled(),n.readOnly=this._readOnly(),n.setAttribute("aria-label",`Digit ${c+1} of ${t.length}`),f?n.setAttribute("aria-labelledby",f):n.removeAttribute("aria-labelledby"),m?n.setAttribute("aria-describedby",m):n.removeAttribute("aria-describedby"),s||this.hasAttribute("invalid")?n.setAttribute("aria-invalid","true"):n.removeAttribute("aria-invalid"),n.inputMode=this._mode()==="numeric"?"numeric":"text",n.pattern=this._mode()==="numeric"?"[0-9]*":this._mode()==="alpha"?"[A-Za-z]*":"[A-Za-z0-9]*"})}_registerWithForm(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const r=this.getRootNode().host?.closest?.("ui-form")||null||this.closest("ui-form"),s=this.getAttribute("name");r&&typeof r.registerField=="function"&&s&&(this._formUnregister=r.registerField(s,{name:s,getValue:()=>this.value,setValue:o=>{o==null||o===""?this.removeAttribute("value"):this.setAttribute("value",String(o))},validate:async()=>this.hasAttribute("required")&&this.value.length<u(this)?{valid:!1,message:"Enter the full verification code."}:{valid:!0,message:void 0},setError:o=>{o?(this.setAttribute("error",o),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

@@ -1,4 +1,4 @@
-import { E as x } from "./ElementBase-909688f3.mjs";
+import { E as x } from "./ElementBase-YlTLMsGk.mjs";
 const y = `
   :host {
     --ui-pin-gap: 10px;
@@ -172,24 +172,23 @@ const y = `
     }
   }
 `;
-function A(n) {
-  return Number.isFinite(n) ? Math.max(1, Math.min(12, Math.floor(n))) : 6;
+function A(a) {
+  return Number.isFinite(a) ? Math.max(1, Math.min(12, Math.floor(a))) : 6;
 }
-function u(n) {
-  return A(Number(n.getAttribute("length") || 6));
+function u(a) {
+  return A(Number(a.getAttribute("length") || 6));
 }
-function d(n, t) {
-  return n.id || (n.id = `${t}-${Math.random().toString(36).slice(2, 9)}`), n.id;
+function d(a, t) {
+  return a.id || (a.id = `${t}-${Math.random().toString(36).slice(2, 9)}`), a.id;
 }
-function E(n, t) {
-  const i = n.trim();
-  if (!i)
-    return "";
+function E(a, t) {
+  const i = a.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);
+function g(a, t) {
+  return Array.from(a).map((i) => E(i, t)).filter(Boolean);
 }
 class b extends x {
   constructor() {
@@ -200,18 +199,15 @@ class b extends x {
       } catch {
       }
     }, this._onInput = (t) => {
-      if (this._disabled() || this._readOnly())
-        return;
+      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")) || "";
+      if (this._disabled() || this._readOnly()) return;
+      const i = t.currentTarget, e = Number(i.getAttribute("data-index") || 0), r = t.clipboardData?.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] || "");
+      const i = t.currentTarget, e = Number(i.getAttribute("data-index") || 0), r = Array.from({ length: u(this) }, (s, o) => this._value[o] || "");
       if (t.key === "ArrowLeft") {
         t.preventDefault(), this.focusIndex(e - 1);
         return;
@@ -303,8 +299,8 @@ class b extends x {
   }
   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" />`;
+      const s = this.hasAttribute("mask") ? "password" : "text", o = 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="${o}" maxlength="1" />`;
     }).join("");
     this.setContent(`
       <style>${y}</style>
@@ -366,36 +362,34 @@ class b extends x {
       return;
     }
     const s = Array.from({ length: u(this) }, (l, h) => this._value[h] || "");
-    let a = Math.max(0, Math.min(t, s.length - 1));
+    let o = 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));
+      o >= s.length || (s[o] = l, o += 1);
+    }), this._applyValue(s.join(""), e, !0), this.focusIndex(Math.min(o, 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);
+    if (!this._groupEl || !this._labelEl || !this._descriptionEl || !this._errorEl || !this._metaEl) return;
+    const t = Array.from({ length: u(this) }, (n, c) => this._value[c] || ""), i = this._placeholderChar(), e = this.getAttribute("label") || "", r = this.getAttribute("description") || "", s = this.getAttribute("error") || "", o = this.hasAttribute("required"), l = this._labelEl.querySelector(".label-text"), h = this._labelEl.querySelector(".required");
+    l && (l.textContent = e), h && h.toggleAttribute("hidden", !o), 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) => {
+    this._inputs.forEach((n, 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]*";
+      n.value = m, n.setAttribute("data-filled", m ? "true" : "false"), n.placeholder = i, n.disabled = this._disabled(), n.readOnly = this._readOnly(), n.setAttribute("aria-label", `Digit ${c + 1} of ${t.length}`), p ? n.setAttribute("aria-labelledby", p) : n.removeAttribute("aria-labelledby"), f ? n.setAttribute("aria-describedby", f) : n.removeAttribute("aria-describedby"), s || this.hasAttribute("invalid") ? n.setAttribute("aria-invalid", "true") : n.removeAttribute("aria-invalid"), n.inputMode = this._mode() === "numeric" ? "numeric" : "text", n.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,
+      const r = this.getRootNode().host?.closest?.("ui-form") || null || this.closest("ui-form"), s = this.getAttribute("name");
+      r && typeof r.registerField == "function" && s && (this._formUnregister = r.registerField(s, {
+        name: s,
         getValue: () => this.value,
-        setValue: (l) => {
-          l == null || l === "" ? this.removeAttribute("value") : this.setAttribute("value", String(l));
+        setValue: (o) => {
+          o == null || o === "" ? this.removeAttribute("value") : this.setAttribute("value", String(o));
         },
         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();
+        setError: (o) => {
+          o ? (this.setAttribute("error", o), this.toggleAttribute("invalid", !0)) : (this.removeAttribute("error"), this.removeAttribute("invalid")), this._syncUi();
         }
       }));
     } catch {

package/dist/placement-grid.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const w=require("./ElementBase-1b301e7f.js"),A={sm:"var(--ui-breakpoint-sm, 640px)",md:"var(--ui-breakpoint-md, 768px)",lg:"var(--ui-breakpoint-lg, 1024px)",xl:"var(--ui-breakpoint-xl, 1280px)"},p=["display","columns","rows","gap","rowgap","columngap","autoflow","autorows","autocolumns","align","justify","place","aligncontent","justifycontent","placecontent"],I={xs:"var(--ui-space-xs, 4px)",sm:"var(--ui-space-sm, 8px)",md:"var(--ui-space-md, 12px)",lg:"var(--ui-space-lg, 20px)",xl:"var(--ui-space-xl, 28px)"},y=["data-row","data-column","data-row-span","data-column-span","data-value","data-selected","data-disabled","hidden"],x=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("./ElementBase-EV6mVBUV.js"),v={sm:"var(--ui-breakpoint-sm, 640px)",md:"var(--ui-breakpoint-md, 768px)",lg:"var(--ui-breakpoint-lg, 1024px)",xl:"var(--ui-breakpoint-xl, 1280px)"},p=["display","columns","rows","gap","rowgap","columngap","autoflow","autorows","autocolumns","align","justify","place","aligncontent","justifycontent","placecontent"],w={xs:"var(--ui-space-xs, 4px)",sm:"var(--ui-space-sm, 8px)",md:"var(--ui-space-md, 12px)",lg:"var(--ui-space-lg, 20px)",xl:"var(--ui-space-xl, 28px)"},A=["data-row","data-column","data-row-span","data-column-span","data-value","data-selected","data-disabled","hidden"],I=`
   :host {
     --ui-placement-display: grid;
     --ui-placement-columns: 1fr;
@@ -94,6 +94,6 @@
       --ui-placement-focus-ring: Highlight;
     }
   }
-`;function b(c){if(!c)return null;const t=c.trim();if(!t.startsWith("{"))return null;try{const e=JSON.parse(t);return!e||typeof e!="object"?null:e}catch{return null}}function h(c){return I[c]||c}function d(c){if(!c)return null;const t=Number.parseInt(c,10);return!Number.isFinite(t)||t<1?null:t}function _(c,t){switch(c){case"display":return{"--ui-placement-display":t};case"columns":return{"--ui-placement-columns":t};case"rows":return{"--ui-placement-rows":t};case"gap":return{"--ui-placement-gap":h(t)};case"rowgap":return{"--ui-placement-row-gap":h(t)};case"columngap":return{"--ui-placement-column-gap":h(t)};case"autoflow":return{"--ui-placement-auto-flow":t};case"autorows":return{"--ui-placement-auto-rows":t};case"autocolumns":return{"--ui-placement-auto-columns":t};case"align":return{"--ui-placement-align-items":t};case"justify":return{"--ui-placement-justify-items":t};case"place":return{"--ui-placement-place-items":t};case"aligncontent":return{"--ui-placement-align-content":t};case"justifycontent":return{"--ui-placement-justify-content":t};case"placecontent":return{"--ui-placement-place-content":t};default:return{}}}class v extends w.ElementBase{constructor(){super(...arguments),this._lastClassname="",this._appliedInlineProps=new Set,this._mutationObserver=null,this._suppressMutations=!1,this._focusedValue=null,this._dragItem=null,this._dragOverItem=null,this._onKeyDownBound=t=>this._onKeyDown(t),this._onClickBound=t=>this._onClick(t),this._onDragStartBound=t=>this._onDragStart(t),this._onDragOverBound=t=>this._onDragOver(t),this._onDropBound=t=>this._onDrop(t),this._onDragEndBound=()=>this._clearDragState()}static get observedAttributes(){return["classname","headless","interactive","draggable","order",...p]}connectedCallback(){super.connectedCallback(),this._observeMutations(),this.addEventListener("keydown",this._onKeyDownBound),this.addEventListener("click",this._onClickBound),this.addEventListener("dragstart",this._onDragStartBound),this.addEventListener("dragover",this._onDragOverBound),this.addEventListener("drop",this._onDropBound),this.addEventListener("dragend",this._onDragEndBound)}disconnectedCallback(){var t;this.removeEventListener("keydown",this._onKeyDownBound),this.removeEventListener("click",this._onClickBound),this.removeEventListener("dragstart",this._onDragStartBound),this.removeEventListener("dragover",this._onDragOverBound),this.removeEventListener("drop",this._onDropBound),this.removeEventListener("dragend",this._onDragEndBound),(t=this._mutationObserver)==null||t.disconnect(),this._mutationObserver=null,this._clearDragState(),super.disconnectedCallback()}refresh(){this.requestRender()}focusItem(t){const e=this._resolveItem(t);e&&this._setFocusedItem(e,!0)}moveItem(t,e,s){const a=this._resolveItem(t);a&&this._moveItemTo(a,Math.max(1,e),Math.max(1,s),"api")}_observeMutations(){this._mutationObserver||(this._mutationObserver=new MutationObserver(()=>{this._suppressMutations||this.requestRender()}),this._mutationObserver.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[...y]}))}_syncLegacyClassname(){const t=this.getAttribute("classname")||"";t!==this._lastClassname&&(this._lastClassname&&this._lastClassname.split(/\s+/).forEach(e=>{e&&this.classList.remove(e)}),t&&t.split(/\s+/).forEach(e=>{e&&this.classList.add(e)}),this._lastClassname=t)}_applyInlineStyles(){this._appliedInlineProps.forEach(t=>this.style.removeProperty(t)),this._appliedInlineProps.clear(),p.forEach(t=>{const e=this.getAttribute(t);if(!e||b(e))return;const s=_(t,e);Object.entries(s).forEach(([a,n])=>{this.style.setProperty(a,n),this._appliedInlineProps.add(a)})})}_buildResponsiveCss(){const t={},e={sm:{},md:{},lg:{},xl:{}};p.forEach(r=>{const l=this.getAttribute(r),i=b(l);if(!i)return;const o=(u,m)=>{Object.assign(u,_(r,m))};typeof i.initial=="string"&&o(t,i.initial),typeof i.sm=="string"&&o(e.sm,i.sm),typeof i.md=="string"&&o(e.md,i.md),typeof i.lg=="string"&&o(e.lg,i.lg),typeof i.xl=="string"&&o(e.xl,i.xl)});const s=(r,l)=>{const i=Object.entries(l);return i.length?`${r} { ${i.map(([o,u])=>`${o}: ${u};`).join(" ")} }`:""},a=[],n=s(":host",t);return n&&a.push(n),Object.keys(e).forEach(r=>{const l=s(":host",e[r]);l&&a.push(`@media (min-width: ${A[r]}) { ${l} }`)}),a.join(`
-`)}_items(){return Array.from(this.children).filter(t=>t instanceof HTMLElement&&t.hasAttribute("data-ui-placement-item"))}_resolveItem(t){const e=this._items();return typeof t=="number"?e[t]||null:e.find(s=>(s.getAttribute("data-value")||s.id||"")===t)||null}_fallbackColumnCount(){return d(this.getAttribute("columns"))||1}_computeItems(){const t=this._fallbackColumnCount();let e=0;return this._items().map((s,a)=>{let n=d(s.getAttribute("data-row")),r=d(s.getAttribute("data-column"));const l=d(s.getAttribute("data-row-span"))||1,i=d(s.getAttribute("data-column-span"))||1;if(n==null||r==null){const o=e++,u=Math.floor(o/t)+1,m=o%t+1;n==null&&(n=u),r==null&&(r=m)}return{el:s,index:a,row:n,column:r,rowSpan:l,columnSpan:i,value:s.getAttribute("data-value")||s.id||String(a),disabled:s.hasAttribute("disabled")||s.hasAttribute("data-disabled"),selected:s.hasAttribute("data-selected")}})}_order(){return this.getAttribute("order")==="row-major"?"row-major":"dom"}_isInteractive(){return this.hasAttribute("interactive")||this.hasAttribute("draggable")}_isDraggable(){return this.hasAttribute("draggable")}_sortMeta(t){return[...t].sort((e,s)=>e.row!==s.row?e.row-s.row:e.column!==s.column?e.column-s.column:e.index-s.index)}_syncHostSemantics(t){this._isInteractive()?(this.hasAttribute("role")||(this.setAttribute("role","grid"),this.setAttribute("data-ui-placement-role","")),this.setAttribute("aria-rowcount",String(t.reduce((e,s)=>Math.max(e,s.row+s.rowSpan-1),0))),this.setAttribute("aria-colcount",String(t.reduce((e,s)=>Math.max(e,s.column+s.columnSpan-1),this._fallbackColumnCount())))):this.hasAttribute("data-ui-placement-role")&&(this.removeAttribute("role"),this.removeAttribute("data-ui-placement-role"),this.removeAttribute("aria-rowcount"),this.removeAttribute("aria-colcount"))}_setFocusedItem(t,e=!1){const s=this._items(),a=t||s[0]||null;this._focusedValue=a&&(a.getAttribute("data-value")||a.id)||null,s.forEach(n=>{this._isInteractive()?n.tabIndex=n===a?0:-1:n.removeAttribute("tabindex")}),e&&a&&a.focus({preventScroll:!0})}_syncItems(){var s,a;const t=this._computeItems(),e=this._order()==="row-major"?this._sortMeta(t):t;this._suppressMutations=!0;try{this._order()==="row-major"&&e.forEach(r=>this.appendChild(r.el)),this._syncHostSemantics(e);const n=((s=e.find(r=>r.value===this._focusedValue))==null?void 0:s.el)||((a=e[0])==null?void 0:a.el)||null;e.forEach(r=>{r.el.style.gridColumn=`${r.column} / span ${r.columnSpan}`,r.el.style.gridRow=`${r.row} / span ${r.rowSpan}`,r.el.style.minInlineSize="0",r.el.style.boxSizing="border-box",this._isInteractive()?(r.el.hasAttribute("role")||r.el.setAttribute("role","gridcell"),r.el.setAttribute("aria-rowindex",String(r.row)),r.el.setAttribute("aria-colindex",String(r.column)),r.columnSpan>1?r.el.setAttribute("aria-colspan",String(r.columnSpan)):r.el.removeAttribute("aria-colspan"),r.rowSpan>1?r.el.setAttribute("aria-rowspan",String(r.rowSpan)):r.el.removeAttribute("aria-rowspan"),r.selected?r.el.setAttribute("aria-selected","true"):r.el.removeAttribute("aria-selected"),r.disabled?r.el.setAttribute("aria-disabled","true"):r.el.removeAttribute("aria-disabled")):(r.el.removeAttribute("aria-rowindex"),r.el.removeAttribute("aria-colindex"),r.el.removeAttribute("aria-rowspan"),r.el.removeAttribute("aria-colspan"),r.el.removeAttribute("aria-selected"),r.el.removeAttribute("aria-disabled")),this._isDraggable()&&!r.disabled?(r.el.setAttribute("data-draggable",""),r.el.setAttribute("draggable","true")):(r.el.removeAttribute("data-draggable"),r.el.removeAttribute("draggable"))}),this._setFocusedItem(n,!1)}finally{this._suppressMutations=!1}}_findItemFromTarget(t){if(!(t instanceof Element))return null;const e=t.closest("[data-ui-placement-item]");return e instanceof HTMLElement&&this.contains(e)?e:null}_metaForItem(t){return this._computeItems().find(e=>e.el===t)||null}_intervalsOverlap(t,e,s,a){const n=t+e-1,r=s+a-1;return t<=r&&s<=n}_findNeighbor(t,e){var r,l;const s=this._computeItems().filter(i=>!i.disabled&&i.el!==t.el);if(!s.length)return null;const a=s.filter(i=>e==="left"||e==="right"?this._intervalsOverlap(t.row,t.rowSpan,i.row,i.rowSpan)?e==="left"?i.column<t.column:i.column>t.column:!1:this._intervalsOverlap(t.column,t.columnSpan,i.column,i.columnSpan)?e==="up"?i.row<t.row:i.row>t.row:!1);if(!a.length){const i=this._order()==="row-major"?this._sortMeta(this._computeItems()):this._computeItems(),o=i.findIndex(m=>m.el===t.el);return((r=i[o+(e==="left"||e==="up"?-1:1)])==null?void 0:r.el)||null}return((l=a.sort((i,o)=>{if(e==="left"||e==="right"){const g=Math.abs(i.column-t.column),f=Math.abs(o.column-t.column);return g!==f?g-f:Math.abs(i.row-t.row)-Math.abs(o.row-t.row)}const u=Math.abs(i.row-t.row),m=Math.abs(o.row-t.row);return u!==m?u-m:Math.abs(i.column-t.column)-Math.abs(o.column-t.column)})[0])==null?void 0:l.el)||null}_moveItemTo(t,e,s,a){const n=this._metaForItem(t);!n||n.disabled||(t.setAttribute("data-row",String(e)),t.setAttribute("data-column",String(s)),this.dispatchEvent(new CustomEvent("itemmove",{bubbles:!0,composed:!0,detail:{value:n.value,reason:a,from:{row:n.row,column:n.column},to:{row:e,column:s}}})),this.requestRender())}_swapItems(t,e,s){const a=this._metaForItem(t),n=this._metaForItem(e);!a||!n||(t.setAttribute("data-row",String(n.row)),t.setAttribute("data-column",String(n.column)),e.setAttribute("data-row",String(a.row)),e.setAttribute("data-column",String(a.column)),this.dispatchEvent(new CustomEvent("itemmove",{bubbles:!0,composed:!0,detail:{value:a.value,targetValue:n.value,reason:s,from:{row:a.row,column:a.column},to:{row:n.row,column:n.column}}})),this.requestRender())}_onClick(t){if(!this._isInteractive())return;const e=this._findItemFromTarget(t.target);e&&this._setFocusedItem(e,!1)}_onKeyDown(t){var l,i;if(!this._isInteractive())return;const e=this._findItemFromTarget(t.target);if(!e)return;const s=this._metaForItem(e);if(!s||s.disabled)return;const a=t.key,n=a==="ArrowLeft"||a==="ArrowRight"||a==="ArrowUp"||a==="ArrowDown";if(t.altKey&&this._isDraggable()&&n){t.preventDefault();const o=a==="ArrowDown"?1:a==="ArrowUp"?-1:0,u=a==="ArrowRight"?1:a==="ArrowLeft"?-1:0;this._moveItemTo(e,Math.max(1,s.row+o),Math.max(1,s.column+u),"keyboard"),this._setFocusedItem(e,!0);return}let r=null;if(a==="ArrowLeft")r=this._findNeighbor(s,"left");else if(a==="ArrowRight")r=this._findNeighbor(s,"right");else if(a==="ArrowUp")r=this._findNeighbor(s,"up");else if(a==="ArrowDown")r=this._findNeighbor(s,"down");else if(a==="Home")r=((l=(this._order()==="row-major"?this._sortMeta(this._computeItems()):this._computeItems())[0])==null?void 0:l.el)||null;else if(a==="End"){const o=this._order()==="row-major"?this._sortMeta(this._computeItems()):this._computeItems();r=((i=o[o.length-1])==null?void 0:i.el)||null}r&&(t.preventDefault(),this._setFocusedItem(r,!0))}_onDragStart(t){if(!this._isDraggable())return;const e=this._findItemFromTarget(t.target);!e||e.hasAttribute("data-disabled")||(this._dragItem=e,e.setAttribute("data-dragging",""),t.dataTransfer&&(t.dataTransfer.effectAllowed="move",t.dataTransfer.setData("text/plain",e.getAttribute("data-value")||e.id||"")))}_onDragOver(t){if(!this._dragItem)return;const e=this._findItemFromTarget(t.target);!e||e===this._dragItem||(t.preventDefault(),this._dragOverItem&&this._dragOverItem!==e&&this._dragOverItem.removeAttribute("data-drag-over"),this._dragOverItem=e,e.setAttribute("data-drag-over",""))}_onDrop(t){if(!this._dragItem)return;const e=this._findItemFromTarget(t.target);t.preventDefault(),e&&e!==this._dragItem&&(this._swapItems(this._dragItem,e,"pointer"),this._setFocusedItem(this._dragItem,!1)),this._clearDragState()}_clearDragState(){this._dragItem&&this._dragItem.removeAttribute("data-dragging"),this._dragOverItem&&this._dragOverItem.removeAttribute("data-drag-over"),this._dragItem=null,this._dragOverItem=null}render(){this._syncLegacyClassname(),this._applyInlineStyles(),this._syncItems();const t=this._buildResponsiveCss();this.setContent(`<style>${x}${t?`
-${t}`:""}</style><slot></slot>`)}shouldRenderOnAttributeChange(t,e,s){return!0}}typeof customElements<"u"&&!customElements.get("ui-placement-grid")&&customElements.define("ui-placement-grid",v);exports.UIPlacementGrid=v;
+`;function g(u){if(!u)return null;const t=u.trim();if(!t.startsWith("{"))return null;try{const e=JSON.parse(t);return!e||typeof e!="object"?null:e}catch{return null}}function h(u){return w[u]||u}function d(u){if(!u)return null;const t=Number.parseInt(u,10);return!Number.isFinite(t)||t<1?null:t}function f(u,t){switch(u){case"display":return{"--ui-placement-display":t};case"columns":return{"--ui-placement-columns":t};case"rows":return{"--ui-placement-rows":t};case"gap":return{"--ui-placement-gap":h(t)};case"rowgap":return{"--ui-placement-row-gap":h(t)};case"columngap":return{"--ui-placement-column-gap":h(t)};case"autoflow":return{"--ui-placement-auto-flow":t};case"autorows":return{"--ui-placement-auto-rows":t};case"autocolumns":return{"--ui-placement-auto-columns":t};case"align":return{"--ui-placement-align-items":t};case"justify":return{"--ui-placement-justify-items":t};case"place":return{"--ui-placement-place-items":t};case"aligncontent":return{"--ui-placement-align-content":t};case"justifycontent":return{"--ui-placement-justify-content":t};case"placecontent":return{"--ui-placement-place-content":t};default:return{}}}class b extends _.ElementBase{constructor(){super(...arguments),this._lastClassname="",this._appliedInlineProps=new Set,this._mutationObserver=null,this._suppressMutations=!1,this._focusedValue=null,this._dragItem=null,this._dragOverItem=null,this._onKeyDownBound=t=>this._onKeyDown(t),this._onClickBound=t=>this._onClick(t),this._onDragStartBound=t=>this._onDragStart(t),this._onDragOverBound=t=>this._onDragOver(t),this._onDropBound=t=>this._onDrop(t),this._onDragEndBound=()=>this._clearDragState()}static get observedAttributes(){return["classname","headless","interactive","draggable","order",...p]}connectedCallback(){super.connectedCallback(),this._observeMutations(),this.addEventListener("keydown",this._onKeyDownBound),this.addEventListener("click",this._onClickBound),this.addEventListener("dragstart",this._onDragStartBound),this.addEventListener("dragover",this._onDragOverBound),this.addEventListener("drop",this._onDropBound),this.addEventListener("dragend",this._onDragEndBound)}disconnectedCallback(){this.removeEventListener("keydown",this._onKeyDownBound),this.removeEventListener("click",this._onClickBound),this.removeEventListener("dragstart",this._onDragStartBound),this.removeEventListener("dragover",this._onDragOverBound),this.removeEventListener("drop",this._onDropBound),this.removeEventListener("dragend",this._onDragEndBound),this._mutationObserver?.disconnect(),this._mutationObserver=null,this._clearDragState(),super.disconnectedCallback()}refresh(){this.requestRender()}focusItem(t){const e=this._resolveItem(t);e&&this._setFocusedItem(e,!0)}moveItem(t,e,s){const r=this._resolveItem(t);r&&this._moveItemTo(r,Math.max(1,e),Math.max(1,s),"api")}_observeMutations(){this._mutationObserver||(this._mutationObserver=new MutationObserver(()=>{this._suppressMutations||this.requestRender()}),this._mutationObserver.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[...A]}))}_syncLegacyClassname(){const t=this.getAttribute("classname")||"";t!==this._lastClassname&&(this._lastClassname&&this._lastClassname.split(/\s+/).forEach(e=>{e&&this.classList.remove(e)}),t&&t.split(/\s+/).forEach(e=>{e&&this.classList.add(e)}),this._lastClassname=t)}_applyInlineStyles(){this._appliedInlineProps.forEach(t=>this.style.removeProperty(t)),this._appliedInlineProps.clear(),p.forEach(t=>{const e=this.getAttribute(t);if(!e||g(e))return;const s=f(t,e);Object.entries(s).forEach(([r,i])=>{this.style.setProperty(r,i),this._appliedInlineProps.add(r)})})}_buildResponsiveCss(){const t={},e={sm:{},md:{},lg:{},xl:{}};p.forEach(a=>{const o=this.getAttribute(a),n=g(o);if(!n)return;const l=(c,m)=>{Object.assign(c,f(a,m))};typeof n.initial=="string"&&l(t,n.initial),typeof n.sm=="string"&&l(e.sm,n.sm),typeof n.md=="string"&&l(e.md,n.md),typeof n.lg=="string"&&l(e.lg,n.lg),typeof n.xl=="string"&&l(e.xl,n.xl)});const s=(a,o)=>{const n=Object.entries(o);return n.length?`${a} { ${n.map(([l,c])=>`${l}: ${c};`).join(" ")} }`:""},r=[],i=s(":host",t);return i&&r.push(i),Object.keys(e).forEach(a=>{const o=s(":host",e[a]);o&&r.push(`@media (min-width: ${v[a]}) { ${o} }`)}),r.join(`
+`)}_items(){return Array.from(this.children).filter(t=>t instanceof HTMLElement&&t.hasAttribute("data-ui-placement-item"))}_resolveItem(t){const e=this._items();return typeof t=="number"?e[t]||null:e.find(s=>(s.getAttribute("data-value")||s.id||"")===t)||null}_fallbackColumnCount(){return d(this.getAttribute("columns"))||1}_computeItems(){const t=this._fallbackColumnCount();let e=0;return this._items().map((s,r)=>{let i=d(s.getAttribute("data-row")),a=d(s.getAttribute("data-column"));const o=d(s.getAttribute("data-row-span"))||1,n=d(s.getAttribute("data-column-span"))||1;if(i==null||a==null){const l=e++,c=Math.floor(l/t)+1,m=l%t+1;i==null&&(i=c),a==null&&(a=m)}return{el:s,index:r,row:i,column:a,rowSpan:o,columnSpan:n,value:s.getAttribute("data-value")||s.id||String(r),disabled:s.hasAttribute("disabled")||s.hasAttribute("data-disabled"),selected:s.hasAttribute("data-selected")}})}_order(){return this.getAttribute("order")==="row-major"?"row-major":"dom"}_isInteractive(){return this.hasAttribute("interactive")||this.hasAttribute("draggable")}_isDraggable(){return this.hasAttribute("draggable")}_sortMeta(t){return[...t].sort((e,s)=>e.row!==s.row?e.row-s.row:e.column!==s.column?e.column-s.column:e.index-s.index)}_syncHostSemantics(t){this._isInteractive()?(this.hasAttribute("role")||(this.setAttribute("role","grid"),this.setAttribute("data-ui-placement-role","")),this.setAttribute("aria-rowcount",String(t.reduce((e,s)=>Math.max(e,s.row+s.rowSpan-1),0))),this.setAttribute("aria-colcount",String(t.reduce((e,s)=>Math.max(e,s.column+s.columnSpan-1),this._fallbackColumnCount())))):this.hasAttribute("data-ui-placement-role")&&(this.removeAttribute("role"),this.removeAttribute("data-ui-placement-role"),this.removeAttribute("aria-rowcount"),this.removeAttribute("aria-colcount"))}_setFocusedItem(t,e=!1){const s=this._items(),r=t||s[0]||null;this._focusedValue=r&&(r.getAttribute("data-value")||r.id)||null,s.forEach(i=>{this._isInteractive()?i.tabIndex=i===r?0:-1:i.removeAttribute("tabindex")}),e&&r&&r.focus({preventScroll:!0})}_syncItems(){const t=this._computeItems(),e=this._order()==="row-major"?this._sortMeta(t):t;this._suppressMutations=!0;try{this._order()==="row-major"&&e.forEach(r=>this.appendChild(r.el)),this._syncHostSemantics(e);const s=e.find(r=>r.value===this._focusedValue)?.el||e[0]?.el||null;e.forEach(r=>{r.el.style.gridColumn=`${r.column} / span ${r.columnSpan}`,r.el.style.gridRow=`${r.row} / span ${r.rowSpan}`,r.el.style.minInlineSize="0",r.el.style.boxSizing="border-box",this._isInteractive()?(r.el.hasAttribute("role")||r.el.setAttribute("role","gridcell"),r.el.setAttribute("aria-rowindex",String(r.row)),r.el.setAttribute("aria-colindex",String(r.column)),r.columnSpan>1?r.el.setAttribute("aria-colspan",String(r.columnSpan)):r.el.removeAttribute("aria-colspan"),r.rowSpan>1?r.el.setAttribute("aria-rowspan",String(r.rowSpan)):r.el.removeAttribute("aria-rowspan"),r.selected?r.el.setAttribute("aria-selected","true"):r.el.removeAttribute("aria-selected"),r.disabled?r.el.setAttribute("aria-disabled","true"):r.el.removeAttribute("aria-disabled")):(r.el.removeAttribute("aria-rowindex"),r.el.removeAttribute("aria-colindex"),r.el.removeAttribute("aria-rowspan"),r.el.removeAttribute("aria-colspan"),r.el.removeAttribute("aria-selected"),r.el.removeAttribute("aria-disabled")),this._isDraggable()&&!r.disabled?(r.el.setAttribute("data-draggable",""),r.el.setAttribute("draggable","true")):(r.el.removeAttribute("data-draggable"),r.el.removeAttribute("draggable"))}),this._setFocusedItem(s,!1)}finally{this._suppressMutations=!1}}_findItemFromTarget(t){if(!(t instanceof Element))return null;const e=t.closest("[data-ui-placement-item]");return e instanceof HTMLElement&&this.contains(e)?e:null}_metaForItem(t){return this._computeItems().find(e=>e.el===t)||null}_intervalsOverlap(t,e,s,r){const i=t+e-1,a=s+r-1;return t<=a&&s<=i}_findNeighbor(t,e){const s=this._computeItems().filter(a=>!a.disabled&&a.el!==t.el);if(!s.length)return null;const r=s.filter(a=>e==="left"||e==="right"?this._intervalsOverlap(t.row,t.rowSpan,a.row,a.rowSpan)?e==="left"?a.column<t.column:a.column>t.column:!1:this._intervalsOverlap(t.column,t.columnSpan,a.column,a.columnSpan)?e==="up"?a.row<t.row:a.row>t.row:!1);if(!r.length){const a=this._order()==="row-major"?this._sortMeta(this._computeItems()):this._computeItems(),o=a.findIndex(l=>l.el===t.el);return a[o+(e==="left"||e==="up"?-1:1)]?.el||null}return r.sort((a,o)=>{if(e==="left"||e==="right"){const c=Math.abs(a.column-t.column),m=Math.abs(o.column-t.column);return c!==m?c-m:Math.abs(a.row-t.row)-Math.abs(o.row-t.row)}const n=Math.abs(a.row-t.row),l=Math.abs(o.row-t.row);return n!==l?n-l:Math.abs(a.column-t.column)-Math.abs(o.column-t.column)})[0]?.el||null}_moveItemTo(t,e,s,r){const i=this._metaForItem(t);!i||i.disabled||(t.setAttribute("data-row",String(e)),t.setAttribute("data-column",String(s)),this.dispatchEvent(new CustomEvent("itemmove",{bubbles:!0,composed:!0,detail:{value:i.value,reason:r,from:{row:i.row,column:i.column},to:{row:e,column:s}}})),this.requestRender())}_swapItems(t,e,s){const r=this._metaForItem(t),i=this._metaForItem(e);!r||!i||(t.setAttribute("data-row",String(i.row)),t.setAttribute("data-column",String(i.column)),e.setAttribute("data-row",String(r.row)),e.setAttribute("data-column",String(r.column)),this.dispatchEvent(new CustomEvent("itemmove",{bubbles:!0,composed:!0,detail:{value:r.value,targetValue:i.value,reason:s,from:{row:r.row,column:r.column},to:{row:i.row,column:i.column}}})),this.requestRender())}_onClick(t){if(!this._isInteractive())return;const e=this._findItemFromTarget(t.target);e&&this._setFocusedItem(e,!1)}_onKeyDown(t){if(!this._isInteractive())return;const e=this._findItemFromTarget(t.target);if(!e)return;const s=this._metaForItem(e);if(!s||s.disabled)return;const r=t.key,i=r==="ArrowLeft"||r==="ArrowRight"||r==="ArrowUp"||r==="ArrowDown";if(t.altKey&&this._isDraggable()&&i){t.preventDefault();const o=r==="ArrowDown"?1:r==="ArrowUp"?-1:0,n=r==="ArrowRight"?1:r==="ArrowLeft"?-1:0;this._moveItemTo(e,Math.max(1,s.row+o),Math.max(1,s.column+n),"keyboard"),this._setFocusedItem(e,!0);return}let a=null;if(r==="ArrowLeft")a=this._findNeighbor(s,"left");else if(r==="ArrowRight")a=this._findNeighbor(s,"right");else if(r==="ArrowUp")a=this._findNeighbor(s,"up");else if(r==="ArrowDown")a=this._findNeighbor(s,"down");else if(r==="Home")a=(this._order()==="row-major"?this._sortMeta(this._computeItems()):this._computeItems())[0]?.el||null;else if(r==="End"){const o=this._order()==="row-major"?this._sortMeta(this._computeItems()):this._computeItems();a=o[o.length-1]?.el||null}a&&(t.preventDefault(),this._setFocusedItem(a,!0))}_onDragStart(t){if(!this._isDraggable())return;const e=this._findItemFromTarget(t.target);!e||e.hasAttribute("data-disabled")||(this._dragItem=e,e.setAttribute("data-dragging",""),t.dataTransfer&&(t.dataTransfer.effectAllowed="move",t.dataTransfer.setData("text/plain",e.getAttribute("data-value")||e.id||"")))}_onDragOver(t){if(!this._dragItem)return;const e=this._findItemFromTarget(t.target);!e||e===this._dragItem||(t.preventDefault(),this._dragOverItem&&this._dragOverItem!==e&&this._dragOverItem.removeAttribute("data-drag-over"),this._dragOverItem=e,e.setAttribute("data-drag-over",""))}_onDrop(t){if(!this._dragItem)return;const e=this._findItemFromTarget(t.target);t.preventDefault(),e&&e!==this._dragItem&&(this._swapItems(this._dragItem,e,"pointer"),this._setFocusedItem(this._dragItem,!1)),this._clearDragState()}_clearDragState(){this._dragItem&&this._dragItem.removeAttribute("data-dragging"),this._dragOverItem&&this._dragOverItem.removeAttribute("data-drag-over"),this._dragItem=null,this._dragOverItem=null}render(){this._syncLegacyClassname(),this._applyInlineStyles(),this._syncItems();const t=this._buildResponsiveCss();this.setContent(`<style>${I}${t?`
+${t}`:""}</style><slot></slot>`)}shouldRenderOnAttributeChange(t,e,s){return!0}}typeof customElements<"u"&&!customElements.get("ui-placement-grid")&&customElements.define("ui-placement-grid",b);exports.UIPlacementGrid=b;