@editora/ui-core 0.1.21 → 0.1.23

package/dist/password-field.esm.js

@@ -1,20 +1,21 @@
-import { E as z } from "./ElementBase-YlTLMsGk.mjs";
-const q = `
+import { E as T } from "./ElementBase-BeZT54Hj.mjs";
+import { b as f, s as q, a as B } from "./control-name-Bpj7F34X.mjs";
+const N = `
   <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"/>
   </svg>
-`, C = `
+`, S = `
   <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
     <path d="M2.4 10c1.5-3 4.3-5 7.6-5s6.1 2 7.6 5c-1.5 3-4.3 5-7.6 5s-6.1-2-7.6-5Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
     <circle cx="10" cy="10" r="2.5" fill="none" stroke="currentColor" stroke-width="1.6"/>
   </svg>
-`, T = `
+`, M = `
   <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
     <path d="M3 3l14 14" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
     <path d="M6.1 6.1A9.3 9.3 0 0 1 10 5c3.3 0 6.1 2 7.6 5-.5 1-1.2 1.9-2 2.7M8.2 8.2A2.5 2.5 0 0 1 11.8 12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
     <path d="M4.4 7.1C3.6 7.9 3 8.9 2.4 10c1.5 3 4.3 5 7.6 5 1.2 0 2.4-.3 3.4-.7" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
   </svg>
-`, B = `
+`, I = `
   :host {
     --ui-input-padding: var(--ui-padding, 10px 12px);
     --ui-input-border-color: var(--ui-color-border, var(--ui-border-color, #cbd5e1));
@@ -26,12 +27,12 @@ const q = `
     --ui-input-width: 100%;
     --ui-input-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
     --ui-input-color: var(--ui-color-text, var(--ui-text, #0f172a));
-    --ui-label-color: var(--ui-color-muted, var(--ui-muted, #64748b));
-    --ui-description-color: var(--ui-color-muted, var(--ui-muted, #64748b));
+    --ui-label-color: var(--ui-color-muted, var(--ui-muted, #526175));
+    --ui-description-color: var(--ui-color-muted, var(--ui-muted, #526175));
     --ui-input-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
     --ui-input-error: var(--ui-color-danger, var(--ui-error, #dc2626));
-    --ui-input-success: var(--ui-color-success, var(--ui-success, #16a34a));
-    --ui-input-warning: var(--ui-color-warning, var(--ui-warning, #d97706));
+    --ui-input-success: var(--ui-color-success, var(--ui-success, #15803d));
+    --ui-input-warning: var(--ui-color-warning, var(--ui-warning, #b45309));
     --ui-input-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
     --ui-input-shadow: none;
     --ui-input-gap: 8px;
@@ -41,9 +42,9 @@ const q = `
     --ui-password-field-strength-gap: 8px;
     --ui-password-field-track-bg: color-mix(in srgb, var(--ui-color-text, #0f172a) 10%, transparent);
     --ui-password-field-strength-weak: var(--ui-color-danger, #dc2626);
-    --ui-password-field-strength-fair: var(--ui-color-warning, #d97706);
+    --ui-password-field-strength-fair: var(--ui-color-warning, #b45309);
     --ui-password-field-strength-good: var(--ui-color-primary, #2563eb);
-    --ui-password-field-strength-strong: var(--ui-color-success, #16a34a);
+    --ui-password-field-strength-strong: var(--ui-color-success, #15803d);
     --ui-password-field-toggle-bg: transparent;
     --ui-password-field-toggle-hover-bg: color-mix(in srgb, var(--ui-input-color) 10%, transparent);
     --ui-password-field-toggle-active-bg: color-mix(in srgb, var(--ui-input-color) 16%, transparent);
@@ -310,7 +311,7 @@ const q = `
   }
 
   .strength-caption {
-    color: var(--ui-color-muted, #64748b);
+    color: var(--ui-color-muted, #526175);
     font-size: 11px;
     line-height: 1.35;
   }
@@ -471,7 +472,7 @@ const q = `
   }
 
   :host([tone="success"]) {
-    --ui-input-accent: var(--ui-color-success, var(--ui-success, #16a34a));
+    --ui-input-accent: var(--ui-color-success, var(--ui-success, #15803d));
   }
 
   :host([tone="warning"]) {
@@ -574,7 +575,7 @@ const q = `
       box-shadow: none;
     }
   }
-`, N = [
+`, L = [
   "value",
   "placeholder",
   "disabled",
@@ -603,7 +604,7 @@ const q = `
   "description",
   "data-error"
 ];
-function l(o) {
+function u(o) {
   return o.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
 function p(o) {
@@ -611,16 +612,16 @@ function p(o) {
   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 u(o, t) {
+function c(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(o) {
+function U(o) {
   return o === "none" || o === "large" || o === "full";
 }
-function I(o) {
+function $(o) {
   let t = 0;
   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:
@@ -633,12 +634,12 @@ function I(o) {
       return { score: 4, label: "Strong", caption: "Strong password shape for production accounts." };
   }
 }
-class L extends z {
+class F extends T {
   constructor() {
     super(), this._input = null, this._clearBtn = null, this._toggleBtn = null, this._debounceTimer = null, this._formUnregister = null, this._uid = Math.random().toString(36).slice(2, 9), this._autofocusApplied = !1, this._revealed = !1, this._lastStrengthKey = "", this.strengthEvaluator = null, this._onNativeInput = this._onNativeInput.bind(this), this._onNativeChange = this._onNativeChange.bind(this), this._onClearClick = this._onClearClick.bind(this), this._onToggleClick = this._onToggleClick.bind(this), this._onSlotChange = this._onSlotChange.bind(this);
   }
   static get observedAttributes() {
-    return [...N, "show-strength", "revealable"];
+    return [...L, "aria-label", "aria-description", "aria-describedby", "show-strength", "revealable"];
   }
   get value() {
     return this.getAttribute("value") || "";
@@ -688,7 +689,7 @@ class L extends z {
     this._input?.select();
   }
   toggleVisibility(t) {
-    if (u(this, "disabled") || this.hasAttribute("readonly") || this.getAttribute("revealable") === "false") return;
+    if (c(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 = this._input?.selectionStart ?? null, r = this._input?.selectionEnd ?? null;
@@ -717,15 +718,15 @@ class L extends z {
   render() {
     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>
+      <style>${I}</style>
       <div class="root" part="root">
         <div class="meta" part="meta">
           <label class="label" id="${this._uid}-label" part="label">
-            <slot name="label">${l(e)}</slot>
+            <slot name="label">${u(e)}</slot>
             ${s}
           </label>
           <p class="description" id="${this._uid}-description" part="description">
-            <slot name="description">${l(i)}</slot>
+            <slot name="description">${u(i)}</slot>
           </p>
         </div>
 
@@ -736,22 +737,22 @@ class L extends z {
             <input
               part="input"
               type="password"
-              value="${l(t)}"
-              placeholder="${l(n)}"
+              value="${u(t)}"
+              placeholder="${u(n)}"
             />
-            ${a ? `<span class="floating-label" part="floating-label">${l(e || n || "Password")}</span>` : ""}
+            ${a ? `<span class="floating-label" part="floating-label">${u(e || n || "Password")}</span>` : ""}
           </div>
 
           <div class="actions" part="actions">
-            <button class="clear-btn" part="clear" type="button" aria-label="Clear" hidden>${q}</button>
+            <button class="clear-btn" part="clear" type="button" aria-label="Clear" hidden>${N}</button>
             <span class="suffix-slot" part="suffix"><slot name="suffix"></slot></span>
-            <button class="toggle-btn" part="toggle" type="button" aria-label="Show password">${C}</button>
+            <button class="toggle-btn" part="toggle" type="button" aria-label="Show password">${S}</button>
           </div>
         </div>
 
         <div class="footer" part="footer">
           <p class="error" id="${this._uid}-error" part="error" aria-live="polite">
-            <slot name="error">${l(r)}</slot>
+            <slot name="error">${u(r)}</slot>
           </p>
           <p class="counter" part="counter"></p>
         </div>
@@ -775,17 +776,17 @@ class L extends z {
     const t = this.getAttribute("color");
     t ? this.style.setProperty("--ui-input-accent", t) : this.style.removeProperty("--ui-input-accent");
     const e = this.getAttribute("radius") || "";
-    e && !M(e) ? this.style.setProperty("--ui-input-border-radius", e) : this.style.removeProperty("--ui-input-border-radius");
+    e && !U(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 = 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");
+    const t = c(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", l = 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"), 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");
   }
   _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 && (u(this, "clearable") && t.length > 0 && !u(this, "disabled") && !this.hasAttribute("readonly") ? this._clearBtn.removeAttribute("hidden") : this._clearBtn.setAttribute("hidden", ""));
+    e && e.setAttribute("data-has-value", t ? "true" : "false"), this._clearBtn && (c(this, "clearable") && t.length > 0 && !c(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");
@@ -795,10 +796,10 @@ class L extends z {
   _syncToggleUi() {
     if (!this._toggleBtn || !this._input) return;
     this._input.type = this._revealed ? "text" : "password";
-    const t = this.getAttribute("revealable") !== "false", e = u(this, "disabled") || this.hasAttribute("readonly");
+    const t = this.getAttribute("revealable") !== "false", e = c(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);
+    this._toggleBtn.dataset.iconState !== i && (this._toggleBtn.dataset.iconState = i, this._toggleBtn.innerHTML = this._revealed ? M : S);
   }
   _syncStrengthUi() {
     const t = this.root.querySelector(".strength"), e = this.root.querySelector(".strength-label"), i = this.root.querySelector(".strength-caption");
@@ -808,7 +809,7 @@ class L extends z {
       delete t.dataset.score, e.textContent = "", i.textContent = "", this._lastStrengthKey = "";
       return;
     }
-    const s = (this.strengthEvaluator || I)(r);
+    const s = (this.strengthEvaluator || $)(r);
     t.dataset.score = String(s.score), e.textContent = s.label, i.textContent = s.caption;
     const a = `${r}|${s.score}|${s.label}|${s.caption}`;
     a !== this._lastStrengthKey && (this._lastStrengthKey = a, this.dispatchEvent(
@@ -825,13 +826,13 @@ 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(), 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", !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");
+    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(), l = (this.getAttribute("data-error") || "").trim(), h = !!s || p(t), d = !!a || p(e), g = !!l || p(i), E = p(r), z = p(n), v = this.root.querySelector(".label"), m = this.root.querySelector(".description"), _ = this.root.querySelector(".prefix"), x = this.root.querySelector(".suffix-slot"), y = this.root.querySelector(".meta"), w = this.root.querySelector(".footer"), A = this.root.querySelector(".error"), k = this.root.querySelector(".counter");
+    f(t, s), f(e, a), f(i, l), v && v.toggleAttribute("hidden", !h), m && m.toggleAttribute("hidden", !d), _ && _.toggleAttribute("hidden", !E), x && x.toggleAttribute("hidden", !z), y && y.toggleAttribute("hidden", !h && !d);
+    const C = this.hasAttribute("counter");
+    if (k && k.toggleAttribute("hidden", !C), A && A.toggleAttribute("hidden", !g), w && w.toggleAttribute("hidden", !g && !C), !this._input) return;
+    q(this._input, this, h ? `${this._uid}-label` : null);
+    const b = [];
+    d && b.push(`${this._uid}-description`), g && b.push(`${this._uid}-error`), B(this._input, this, this._uid, b), 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");
   }
   _syncUi() {
     this._syncControlAttrs(), this._syncInputValue(this.value), this._syncDerivedState(), this._syncToggleUi(), this._syncStrengthUi(), this.hasAttribute("autofocus") && !this._autofocusApplied && (this._autofocusApplied = !0, queueMicrotask(() => {
@@ -886,7 +887,7 @@ class L extends z {
     this._emitValueEvent("change", e);
   }
   _onClearClick(t) {
-    if (t.preventDefault(), !(u(this, "disabled") || this.hasAttribute("readonly")) && this._input) {
+    if (t.preventDefault(), !(c(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 });
@@ -899,7 +900,7 @@ class L extends z {
     t.preventDefault(), t.stopPropagation(), this.toggleVisibility();
   }
 }
-typeof customElements < "u" && !customElements.get("ui-password-field") && customElements.define("ui-password-field", L);
+typeof customElements < "u" && !customElements.get("ui-password-field") && customElements.define("ui-password-field", F);
 export {
-  L as UIPasswordField
+  F as UIPasswordField
 };

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-EV6mVBUV.js"),A=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const A=require("./ElementBase-DxbvhLJs.js"),E=require("./control-name-BmoI1m3a.js");let I=0;const w=`
   :host {
     --ui-pin-gap: 10px;
     --ui-pin-slot-width: 48px;
@@ -6,7 +6,7 @@
     --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-muted: var(--ui-color-muted, var(--ui-muted, #526175));
     --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));
@@ -81,8 +81,10 @@
   }
 
   .slot {
+    /* Full width when there is room, narrower rather than overflowing when the row is too long to fit. */
+    flex: 0 1 var(--ui-pin-slot-width);
     inline-size: var(--ui-pin-slot-width);
-    min-inline-size: var(--ui-pin-slot-width);
+    min-inline-size: 0;
     block-size: var(--ui-pin-slot-height);
     box-sizing: border-box;
     border: 1px solid var(--ui-pin-border-color);
@@ -170,8 +172,8 @@
       box-shadow: none;
     }
   }
-`;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>
+`;function C(a){return Number.isFinite(a)?Math.max(1,Math.min(12,Math.floor(a))):6}function u(a){return C(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 k(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=>k(i,t)).filter(Boolean)}class p extends A.ElementBase{constructor(){super(...arguments),this._pinUid=`ui-pin-input-${++I}`,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["aria-description","aria-describedby","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>${w}</style>
       <div class="root">
         <div class="meta" hidden>
           <div class="label" hidden><span class="label-text"></span><span class="required" hidden>*</span></div>
@@ -182,4 +184,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 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;
+    `),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"):"",x=E.syncExternalDescription(this._inputs[0],this,this._pinUid)||"",m=[v,y,x].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,5 +1,7 @@
-import { E as x } from "./ElementBase-YlTLMsGk.mjs";
-const y = `
+import { E as y } from "./ElementBase-BeZT54Hj.mjs";
+import { c as A } from "./control-name-Bpj7F34X.mjs";
+let E = 0;
+const I = `
   :host {
     --ui-pin-gap: 10px;
     --ui-pin-slot-width: 48px;
@@ -7,7 +9,7 @@ const y = `
     --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-muted: var(--ui-color-muted, var(--ui-muted, #526175));
     --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));
@@ -82,8 +84,10 @@ const y = `
   }
 
   .slot {
+    /* Full width when there is room, narrower rather than overflowing when the row is too long to fit. */
+    flex: 0 1 var(--ui-pin-slot-width);
     inline-size: var(--ui-pin-slot-width);
-    min-inline-size: var(--ui-pin-slot-width);
+    min-inline-size: 0;
     block-size: var(--ui-pin-slot-height);
     box-sizing: border-box;
     border: 1px solid var(--ui-pin-border-color);
@@ -172,27 +176,27 @@ const y = `
     }
   }
 `;
-function A(a) {
+function w(a) {
   return Number.isFinite(a) ? Math.max(1, Math.min(12, Math.floor(a))) : 6;
 }
 function u(a) {
-  return A(Number(a.getAttribute("length") || 6));
+  return w(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 E(a, t) {
+function C(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(a, t) {
-  return Array.from(a).map((i) => E(i, t)).filter(Boolean);
+  return Array.from(a).map((i) => C(i, t)).filter(Boolean);
 }
-class b extends x {
+class b extends y {
   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) => {
+    super(...arguments), this._pinUid = `ui-pin-input-${++E}`, 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();
@@ -240,6 +244,8 @@ class b extends x {
   }
   static get observedAttributes() {
     return [
+      "aria-description",
+      "aria-describedby",
       "value",
       "length",
       "name",
@@ -303,7 +309,7 @@ class b extends x {
       return `<input class="slot" part="slot" data-index="${r}" type="${s}" inputmode="${l}" autocomplete="${o}" maxlength="1" />`;
     }).join("");
     this.setContent(`
-      <style>${y}</style>
+      <style>${I}</style>
       <div class="root">
         <div class="meta" hidden>
           <div class="label" hidden><span class="label-text"></span><span class="required" hidden>*</span></div>
@@ -371,7 +377,7 @@ class b extends x {
     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(" ");
+    const p = e ? d(this._labelEl, "ui-pin-label") : "", _ = r ? d(this._descriptionEl, "ui-pin-description") : "", v = s ? d(this._errorEl, "ui-pin-error") : "", x = A(this._inputs[0], this, this._pinUid) || "", f = [_, v, x].filter(Boolean).join(" ");
     this._inputs.forEach((n, c) => {
       const m = t[c] || "";
       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]*";
@@ -396,11 +402,11 @@ class b extends x {
     }
   }
 }
-class I extends b {
+class k 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);
+typeof customElements < "u" && !customElements.get("ui-otp-input") && customElements.define("ui-otp-input", k);
 export {
-  I as UIOtpInput,
+  k as UIOtpInput,
   b as UIPinInput
 };

package/dist/placement-grid.cjs.js

@@ -1,4 +1,4 @@
-"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=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("./ElementBase-DxbvhLJs.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)"},I=["data-row","data-column","data-row-span","data-column-span","data-value","data-selected","data-disabled","hidden"],A=`
   :host {
     --ui-placement-display: grid;
     --ui-placement-columns: 1fr;
@@ -94,6 +94,6 @@
       --ui-placement-focus-ring: Highlight;
     }
   }
-`;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;
+`;function f(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 g(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 _ extends b.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:[...I]}))}_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||f(e))return;const s=g(t,e);Object.entries(s).forEach(([r,a])=>{this.style.setProperty(r,a),this._appliedInlineProps.add(r)})})}_buildResponsiveCss(){const t={},e={sm:{},md:{},lg:{},xl:{}};p.forEach(i=>{const o=this.getAttribute(i),n=f(o);if(!n)return;const l=(c,m)=>{Object.assign(c,g(i,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=(i,o)=>{const n=Object.entries(o);return n.length?`${i} { ${n.map(([l,c])=>`${l}: ${c};`).join(" ")} }`:""},r=[],a=s(":host",t);return a&&r.push(a),Object.keys(e).forEach(i=>{const o=s(":host",e[i]);o&&r.push(`@media (min-width: ${v[i]}) { ${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 a=d(s.getAttribute("data-row")),i=d(s.getAttribute("data-column"));const o=d(s.getAttribute("data-row-span"))||1,n=d(s.getAttribute("data-column-span"))||1;if(a==null||i==null){const l=e++,c=Math.floor(l/t)+1,m=l%t+1;a==null&&(a=c),i==null&&(i=m)}return{el:s,index:r,row:a,column:i,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","list"),this.setAttribute("data-ui-placement-role","")):this.hasAttribute("data-ui-placement-role")&&(this.removeAttribute("role"),this.removeAttribute("data-ui-placement-role")),(!this._isInteractive()||this.hasAttribute("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(a=>{this._isInteractive()?a.tabIndex=a===r?0:-1:a.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=>{if(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","listitem"),r.el.setAttribute("data-ui-placement-item-role",""));const a=e.indexOf(r)+1;r.el.hasAttribute("data-ui-placement-item-role")&&(r.el.setAttribute("aria-posinset",String(a)),r.el.setAttribute("aria-setsize",String(e.length)),r.selected?r.el.setAttribute("aria-current","true"):r.el.removeAttribute("aria-current")),r.disabled?r.el.setAttribute("aria-disabled","true"):r.el.removeAttribute("aria-disabled")}else r.el.hasAttribute("data-ui-placement-item-role")&&(r.el.removeAttribute("role"),r.el.removeAttribute("data-ui-placement-item-role")),r.el.removeAttribute("aria-posinset"),r.el.removeAttribute("aria-setsize"),r.el.removeAttribute("aria-current"),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 a=t+e-1,i=s+r-1;return t<=i&&s<=a}_findNeighbor(t,e){const s=this._computeItems().filter(i=>!i.disabled&&i.el!==t.el);if(!s.length)return null;const r=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(!r.length){const i=this._order()==="row-major"?this._sortMeta(this._computeItems()):this._computeItems(),o=i.findIndex(l=>l.el===t.el);return i[o+(e==="left"||e==="up"?-1:1)]?.el||null}return r.sort((i,o)=>{if(e==="left"||e==="right"){const c=Math.abs(i.column-t.column),m=Math.abs(o.column-t.column);return c!==m?c-m:Math.abs(i.row-t.row)-Math.abs(o.row-t.row)}const n=Math.abs(i.row-t.row),l=Math.abs(o.row-t.row);return n!==l?n-l:Math.abs(i.column-t.column)-Math.abs(o.column-t.column)})[0]?.el||null}_moveItemTo(t,e,s,r){const a=this._metaForItem(t);!a||a.disabled||(t.setAttribute("data-row",String(e)),t.setAttribute("data-column",String(s)),this.dispatchEvent(new CustomEvent("itemmove",{bubbles:!0,composed:!0,detail:{value:a.value,reason:r,from:{row:a.row,column:a.column},to:{row:e,column:s}}})),this.requestRender())}_swapItems(t,e,s){const r=this._metaForItem(t),a=this._metaForItem(e);!r||!a||(t.setAttribute("data-row",String(a.row)),t.setAttribute("data-column",String(a.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:a.value,reason:s,from:{row:r.row,column:r.column},to:{row:a.row,column:a.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,a=r==="ArrowLeft"||r==="ArrowRight"||r==="ArrowUp"||r==="ArrowDown";if(t.altKey&&this._isDraggable()&&a){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 i=null;if(r==="ArrowLeft")i=this._findNeighbor(s,"left");else if(r==="ArrowRight")i=this._findNeighbor(s,"right");else if(r==="ArrowUp")i=this._findNeighbor(s,"up");else if(r==="ArrowDown")i=this._findNeighbor(s,"down");else if(r==="Home")i=(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();i=o[o.length-1]?.el||null}i&&(t.preventDefault(),this._setFocusedItem(i,!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>${A}${t?`
+${t}`:""}</style><slot></slot>`)}shouldRenderOnAttributeChange(t,e,s){return!0}}typeof customElements<"u"&&!customElements.get("ui-placement-grid")&&customElements.define("ui-placement-grid",_);exports.UIPlacementGrid=_;