@editora/ui-core 0.1.21 → 0.1.22

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-EV6mVBUV.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-YlTLMsGk.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-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)"},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=_;

package/dist/placement-grid.esm.js

@@ -1,5 +1,5 @@
-import { E as b } from "./ElementBase-YlTLMsGk.mjs";
-const _ = {
+import { E as _ } from "./ElementBase-YlTLMsGk.mjs";
+const b = {
   sm: "var(--ui-breakpoint-sm, 640px)",
   md: "var(--ui-breakpoint-md, 768px)",
   lg: "var(--ui-breakpoint-lg, 1024px)",
@@ -187,7 +187,7 @@ function g(u, t) {
       return {};
   }
 }
-class I extends b {
+class I extends _ {
   constructor() {
     super(...arguments), this._lastClassname = "", this._appliedInlineProps = /* @__PURE__ */ 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();
   }
@@ -234,8 +234,8 @@ class I extends b {
       const e = this.getAttribute(t);
       if (!e || f(e)) return;
       const s = g(t, e);
-      Object.entries(s).forEach(([r, i]) => {
-        this.style.setProperty(r, i), this._appliedInlineProps.add(r);
+      Object.entries(s).forEach(([r, a]) => {
+        this.style.setProperty(r, a), this._appliedInlineProps.add(r);
       });
     });
   }
@@ -246,21 +246,21 @@ class I extends b {
       lg: {},
       xl: {}
     };
-    p.forEach((a) => {
-      const o = this.getAttribute(a), n = f(o);
+    p.forEach((i) => {
+      const o = this.getAttribute(i), n = f(o);
       if (!n) return;
       const l = (c, m) => {
-        Object.assign(c, g(a, 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 = (a, o) => {
+    const s = (i, 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: ${_[a]}) { ${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: ${b[i]}) { ${o} }`);
     }), r.join(`
 `);
   }
@@ -280,17 +280,17 @@ class I extends b {
     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"));
+      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 (i == null || a == null) {
+      if (a == null || i == null) {
         const l = e++, c = Math.floor(l / t) + 1, m = l % t + 1;
-        i == null && (i = c), a == null && (a = m);
+        a == null && (a = c), i == null && (i = m);
       }
       return {
         el: s,
         index: r,
-        row: i,
-        column: a,
+        row: a,
+        column: i,
         rowSpan: o,
         columnSpan: n,
         value: s.getAttribute("data-value") || s.id || String(r),
@@ -312,18 +312,12 @@ class I extends b {
     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"));
+    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((i) => {
-      this._isInteractive() ? i.tabIndex = i === r ? 0 : -1 : i.removeAttribute("tabindex");
+    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() {
@@ -333,7 +327,13 @@ class I extends b {
       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"));
+        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;
@@ -348,53 +348,53 @@ class I extends b {
     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;
+    const a = t + e - 1, i = s + r - 1;
+    return t <= i && s <= a;
   }
   _findNeighbor(t, e) {
-    const s = this._computeItems().filter((a) => !a.disabled && a.el !== t.el);
+    const s = this._computeItems().filter((i) => !i.disabled && i.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);
+    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 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;
+      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((a, o) => {
+    return r.sort((i, 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 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(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);
+      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 i = this._metaForItem(t);
-    !i || i.disabled || (t.setAttribute("data-row", String(e)), t.setAttribute("data-column", String(s)), this.dispatchEvent(
+    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: i.value,
+          value: a.value,
           reason: r,
-          from: { row: i.row, column: i.column },
+          from: { row: a.row, column: a.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(
+    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: i.value,
+          targetValue: a.value,
           reason: s,
           from: { row: r.row, column: r.column },
-          to: { row: i.row, column: i.column }
+          to: { row: a.row, column: a.column }
         }
       })
     ), this.requestRender());
@@ -410,24 +410,24 @@ class I extends b {
     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) {
+    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 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;
+    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();
-      a = o[o.length - 1]?.el || null;
+      i = o[o.length - 1]?.el || null;
     }
-    a && (t.preventDefault(), this._setFocusedItem(a, !0));
+    i && (t.preventDefault(), this._setFocusedItem(i, !0));
   }
   _onDragStart(t) {
     if (!this._isDraggable()) return;

package/dist/plugin-panel.cjs.js

@@ -121,7 +121,7 @@
           <header class="header" part="header" style="display:flex;align-items:flex-start;gap:10px;padding:12px 14px 0;">
             <div style="min-width:0;display:grid;gap:4px;flex:1 1 auto;">
               ${e?`<strong part="title" style="font-size:14px;line-height:1.3;">${e}</strong>`:""}
-              ${t?`<p part="description" style="margin:0;font-size:12px;line-height:1.4;color:var(--ui-color-muted, #64748b);">${t}</p>`:""}
+              ${t?`<p part="description" style="margin:0;font-size:12px;line-height:1.4;color:var(--ui-color-muted, #526175);">${t}</p>`:""}
             </div>
             ${i?'<button type="button" class="dismiss" part="dismiss-button" aria-label="Close panel" style="border:none;background:transparent;color:inherit;cursor:pointer;font:inherit;padding:4px 6px;">Close</button>':""}
           </header>

package/dist/plugin-panel.esm.js

@@ -155,7 +155,7 @@ class o extends a {
           <header class="header" part="header" style="display:flex;align-items:flex-start;gap:10px;padding:12px 14px 0;">
             <div style="min-width:0;display:grid;gap:4px;flex:1 1 auto;">
               ${e ? `<strong part="title" style="font-size:14px;line-height:1.3;">${e}</strong>` : ""}
-              ${t ? `<p part="description" style="margin:0;font-size:12px;line-height:1.4;color:var(--ui-color-muted, #64748b);">${t}</p>` : ""}
+              ${t ? `<p part="description" style="margin:0;font-size:12px;line-height:1.4;color:var(--ui-color-muted, #526175);">${t}</p>` : ""}
             </div>
             ${i ? '<button type="button" class="dismiss" part="dismiss-button" aria-label="Close panel" style="border:none;background:transparent;color:inherit;cursor:pointer;font:inherit;padding:4px 6px;">Close</button>' : ""}
           </header>

package/dist/popover.cjs.js

@@ -8,7 +8,7 @@
         color-mix(in srgb, var(--ui-color-surface-elevated, #f8fafc) 24%, var(--ui-color-surface, #ffffff)) 100%
       );
     --ui-popover-text: var(--ui-color-text, #0f172a);
-    --ui-popover-muted: var(--ui-color-muted, #64748b);
+    --ui-popover-muted: var(--ui-color-muted, #526175);
     --ui-popover-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 70%, transparent);
     --ui-popover-border: 1px solid var(--ui-popover-border-color);
     --ui-popover-shadow:
@@ -45,7 +45,7 @@
   }
 
   .popover-shell[data-tone="neutral"] {
-    --ui-popover-accent: var(--ui-color-muted, #64748b);
+    --ui-popover-accent: var(--ui-color-muted, #526175);
   }
 
   .popover-shell[data-tone="brand"],
@@ -54,11 +54,11 @@
   }
 
   .popover-shell[data-tone="success"] {
-    --ui-popover-accent: var(--ui-color-success, #16a34a);
+    --ui-popover-accent: var(--ui-color-success, #15803d);
   }
 
   .popover-shell[data-tone="warning"] {
-    --ui-popover-accent: var(--ui-color-warning, #d97706);
+    --ui-popover-accent: var(--ui-color-warning, #b45309);
   }
 
   .popover-shell[data-tone="danger"] {
@@ -283,4 +283,4 @@
       box-shadow: none;
     }
   }
-`;class d extends h.ElementBase{constructor(){super(),this._portalEl=null,this._panelEl=null,this._positioner=null,this._layer=null,this._isOpen=!1,this._restoreFocusEl=null,this._contentObserver=null,this._hostObserver=null,this._syncPortalScheduled=!1,this._onHostClick=this._handleHostClick.bind(this)}static get observedAttributes(){return["open","placement","offset","flip","shift","close-on-escape","close-on-outside","variant","tone","size","radius","elevation"]}attributeChangedCallback(e,t,r){if(t!==r){if(e==="open"){this._syncOpenState();return}this._isOpen&&this._portalEl?.isConnected&&(e==="placement"||e==="offset"||e==="flip"||e==="shift"||e==="variant"||e==="tone"||e==="size"||e==="radius"||e==="elevation"?this._mountPortal():(e==="close-on-escape"||e==="close-on-outside")&&this._syncDismissableLayer())}}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this._onHostClick),this._observeHost(),this._syncOpenState()}disconnectedCallback(){this.removeEventListener("click",this._onHostClick),this._hostObserver?.disconnect(),this._hostObserver=null,this._teardownPortal(),super.disconnectedCallback()}_handleHostClick(e){const t=this._getTrigger();if(!t)return;const r=typeof e.composedPath=="function"?e.composedPath():[],o=e.target instanceof Node?e.target:null;(r.includes(t)||o&&(t===o||t.contains(o)))&&this.toggle()}open(){this.setAttribute("open","")}close(){this.removeAttribute("open")}toggle(){this.hasAttribute("open")?this.close():this.open()}updatePosition(){this._positioner?.update()}_getTrigger(){return this.querySelector('[slot="trigger"]')}_buildPortalContent(){const e=document.createElement("div");e.className="popover-shell",e.style.pointerEvents="auto";const t=this.getAttribute("variant");t&&(e.dataset.variant=t);const r=this.getAttribute("tone");r&&(e.dataset.tone=r);const o=this.getAttribute("size");o&&(e.dataset.size=o);const a=this.getAttribute("elevation");a&&(e.dataset.elevation=a);const s=this.getAttribute("radius");if(s&&s.trim()){const p=s.trim(),v=/^-?\d+(\.\d+)?$/.test(p)?`${p}px`:p;e.style.setProperty("--ui-popover-radius",v)}const l=document.createElement("style");l.textContent=m,e.appendChild(l);const i=document.createElement("div");i.className="panel show",this._panelEl=i;const c=document.createElement("div");c.className="arrow",i.appendChild(c);const u=this.querySelector('[slot="content"]'),n=document.createElement("div");return n.className="content",u&&n.appendChild(u.cloneNode(!0)),i.appendChild(n),e.appendChild(i),e}_getContentSource(){return this.querySelector('[slot="content"]')}_placement(){const e=this.getAttribute("placement");return e||"bottom"}_offset(){const e=Number(this.getAttribute("offset"));return Number.isFinite(e)?e:8}_closeOnEscape(){return this.getAttribute("close-on-escape")!=="false"}_closeOnOutside(){return this.getAttribute("close-on-outside")!=="false"}_syncDismissableLayer(){const e=this._getTrigger();!e||!this._panelEl||(this._layer?.destroy(),this._layer=b.createDismissableLayer({node:this._panelEl,trigger:e,closeOnEscape:this._closeOnEscape(),closeOnPointerOutside:this._closeOnOutside(),onDismiss:()=>this.close()}))}_teardownPortal(){if(this._contentObserver?.disconnect(),this._contentObserver=null,this._layer?.destroy(),this._layer=null,this._positioner?.destroy(),this._positioner=null,this._panelEl=null,this._portalEl?.parentElement)try{this._portalEl.parentElement.removeChild(this._portalEl)}catch{}this._portalEl=null}_schedulePortalSync(){this._syncPortalScheduled||!this._isOpen||(this._syncPortalScheduled=!0,queueMicrotask(()=>{this._syncPortalScheduled=!1,this._isOpen&&this._mountPortal()}))}_observeContent(){this._contentObserver?.disconnect(),this._contentObserver=null;const e=this._getContentSource();!e||typeof MutationObserver>"u"||(this._contentObserver=new MutationObserver(()=>this._schedulePortalSync()),this._contentObserver.observe(e,{attributes:!0,childList:!0,characterData:!0,subtree:!0}))}_observeHost(){this._hostObserver?.disconnect(),this._hostObserver=null,!(typeof MutationObserver>"u")&&(this._hostObserver=new MutationObserver(()=>this._schedulePortalSync()),this._hostObserver.observe(this,{childList:!0,subtree:!1}))}_mountPortal(){const e=this._getTrigger();if(!e)return;this._teardownPortal(),this._portalEl=this._buildPortalContent();const t=f.createPortalContainer();t&&(t.appendChild(this._portalEl),this._observeContent(),this._positioner=g.createPositioner({anchor:e,floating:this._portalEl,placement:this._placement(),offset:this._offset(),shift:this.getAttribute("shift")!=="false",flip:this.getAttribute("flip")!=="false",arrow:this._portalEl.querySelector(".arrow")}),this._syncDismissableLayer())}_syncOpenState(){const e=this.hasAttribute("open");if(e===this._isOpen){e&&(!this._portalEl||!this._portalEl.isConnected?this._mountPortal():this._positioner?.update());return}if(this._isOpen=e,e){this._restoreFocusEl=document.activeElement instanceof HTMLElement?document.activeElement:null,this._mountPortal(),this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("open-change",{detail:{open:!0},bubbles:!0,composed:!0}));return}this._teardownPortal(),this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("open-change",{detail:{open:!1},bubbles:!0,composed:!0}));const t=this._getTrigger(),r=this._restoreFocusEl;this._restoreFocusEl=null;const o=(t&&t.isConnected?t:r)||null;if(o&&o.isConnected)try{o.focus()}catch{}}render(){this.setContent('<slot name="trigger"></slot>')}shouldRenderOnAttributeChange(e,t,r){return!1}}typeof customElements<"u"&&!customElements.get("ui-popover")&&customElements.define("ui-popover",d);exports.UIPopover=d;
+`;class d extends h.ElementBase{constructor(){super(),this._portalEl=null,this._panelEl=null,this._positioner=null,this._layer=null,this._isOpen=!1,this._restoreFocusEl=null,this._contentObserver=null,this._hostObserver=null,this._syncPortalScheduled=!1,this._onHostClick=this._handleHostClick.bind(this)}static get observedAttributes(){return["open","placement","offset","flip","shift","close-on-escape","close-on-outside","variant","tone","size","radius","elevation"]}attributeChangedCallback(e,t,r){if(t!==r){if(e==="open"){this._syncOpenState();return}this._isOpen&&this._portalEl?.isConnected&&(e==="placement"||e==="offset"||e==="flip"||e==="shift"||e==="variant"||e==="tone"||e==="size"||e==="radius"||e==="elevation"?this._mountPortal():(e==="close-on-escape"||e==="close-on-outside")&&this._syncDismissableLayer())}}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this._onHostClick),this._observeHost(),this._syncOpenState()}disconnectedCallback(){this.removeEventListener("click",this._onHostClick),this._hostObserver?.disconnect(),this._hostObserver=null,this._teardownPortal(),super.disconnectedCallback()}_handleHostClick(e){const t=this._getTrigger();if(!t)return;const r=typeof e.composedPath=="function"?e.composedPath():[],o=e.target instanceof Node?e.target:null;(r.includes(t)||o&&(t===o||t.contains(o)))&&this.toggle()}open(){this.setAttribute("open","")}close(){this.removeAttribute("open")}toggle(){this.hasAttribute("open")?this.close():this.open()}updatePosition(){this._positioner?.update()}_getTrigger(){return this.querySelector('[slot="trigger"]')}_buildPortalContent(){const e=document.createElement("div");e.className="popover-shell",e.style.pointerEvents="auto";const t=this.getAttribute("variant");t&&(e.dataset.variant=t);const r=this.getAttribute("tone");r&&(e.dataset.tone=r);const o=this.getAttribute("size");o&&(e.dataset.size=o);const s=this.getAttribute("elevation");s&&(e.dataset.elevation=s);const a=this.getAttribute("radius");if(a&&a.trim()){const p=a.trim(),v=/^-?\d+(\.\d+)?$/.test(p)?`${p}px`:p;e.style.setProperty("--ui-popover-radius",v)}const l=document.createElement("style");l.textContent=m,e.appendChild(l);const i=document.createElement("div");i.className="panel show",this._panelEl=i;const c=document.createElement("div");c.className="arrow",i.appendChild(c);const u=this.querySelector('[slot="content"]'),n=document.createElement("div");return n.className="content",u&&n.appendChild(u.cloneNode(!0)),i.appendChild(n),e.appendChild(i),e}_getContentSource(){return this.querySelector('[slot="content"]')}_placement(){const e=this.getAttribute("placement");return e||"bottom"}_offset(){const e=Number(this.getAttribute("offset"));return Number.isFinite(e)?e:8}_closeOnEscape(){return this.getAttribute("close-on-escape")!=="false"}_closeOnOutside(){return this.getAttribute("close-on-outside")!=="false"}_syncDismissableLayer(){const e=this._getTrigger();!e||!this._panelEl||(this._layer?.destroy(),this._layer=b.createDismissableLayer({node:this._panelEl,trigger:e,closeOnEscape:this._closeOnEscape(),closeOnPointerOutside:this._closeOnOutside(),onDismiss:()=>this.close()}))}_teardownPortal(){if(this._contentObserver?.disconnect(),this._contentObserver=null,this._layer?.destroy(),this._layer=null,this._positioner?.destroy(),this._positioner=null,this._panelEl=null,this._portalEl?.parentElement)try{this._portalEl.parentElement.removeChild(this._portalEl)}catch{}this._portalEl=null}_schedulePortalSync(){this._syncPortalScheduled||!this._isOpen||(this._syncPortalScheduled=!0,queueMicrotask(()=>{this._syncPortalScheduled=!1,this._isOpen&&this._mountPortal()}))}_observeContent(){this._contentObserver?.disconnect(),this._contentObserver=null;const e=this._getContentSource();!e||typeof MutationObserver>"u"||(this._contentObserver=new MutationObserver(()=>this._schedulePortalSync()),this._contentObserver.observe(e,{attributes:!0,childList:!0,characterData:!0,subtree:!0}))}_observeHost(){this._hostObserver?.disconnect(),this._hostObserver=null,!(typeof MutationObserver>"u")&&(this._hostObserver=new MutationObserver(()=>this._schedulePortalSync()),this._hostObserver.observe(this,{childList:!0,subtree:!1}))}_mountPortal(){const e=this._getTrigger();if(!e)return;this._teardownPortal(),this._portalEl=this._buildPortalContent();const t=f.createPortalContainer();t&&(t.appendChild(this._portalEl),this._observeContent(),this._positioner=g.createPositioner({anchor:e,floating:this._portalEl,placement:this._placement(),offset:this._offset(),shift:this.getAttribute("shift")!=="false",flip:this.getAttribute("flip")!=="false",arrow:this._portalEl.querySelector(".arrow")}),this._syncDismissableLayer())}_syncOpenState(){const e=this.hasAttribute("open");if(e===this._isOpen){e&&(!this._portalEl||!this._portalEl.isConnected?this._mountPortal():this._positioner?.update());return}if(this._isOpen=e,e){this._restoreFocusEl=document.activeElement instanceof HTMLElement?document.activeElement:null,this._mountPortal(),this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("open-change",{detail:{open:!0},bubbles:!0,composed:!0}));return}this._teardownPortal(),this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("open-change",{detail:{open:!1},bubbles:!0,composed:!0}));const t=this._getTrigger(),r=this._restoreFocusEl;this._restoreFocusEl=null;const o=(t&&t.isConnected?t:r)||null;if(o&&o.isConnected)try{o.focus()}catch{}}render(){this.setContent('<slot name="trigger"></slot>')}shouldRenderOnAttributeChange(e,t,r){return!1}}typeof customElements<"u"&&!customElements.get("ui-popover")&&customElements.define("ui-popover",d);exports.UIPopover=d;