@editora/ui-core 0.1.20 → 0.1.21

package/dist/textarea.esm.js

@@ -1,9 +1,9 @@
-import { E as f } from "./ElementBase-YlTLMsGk.mjs";
-const v = `
+import { E as v } from "./ElementBase-YlTLMsGk.mjs";
+const _ = `
   <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>
-`, _ = `
+`, y = `
   :host {
     --ui-textarea-bg: var(--ui-color-surface, #ffffff);
     --ui-textarea-text: var(--ui-color-text, #0f172a);
@@ -310,14 +310,20 @@ const v = `
     }
   }
 `;
-function d(l) {
-  return l.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function x(r) {
+  return r.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function x(l, t) {
-  const e = Number(l);
+function b(r, t) {
+  const e = Number(r);
   return Number.isFinite(e) ? e : t;
 }
-class y extends f {
+const A = 2147483647;
+function c(r) {
+  if (!r) return null;
+  const t = Number(r);
+  return !Number.isFinite(t) || t < 0 || t > A ? null : Math.trunc(t);
+}
+class z extends v {
   constructor() {
     super(), this._uid = `ui-textarea-${Math.random().toString(36).slice(2, 9)}`, this._textarea = null, this._clearBtn = null, this._countEl = null, this._debounceTimer = null, this._formUnregister = null, this._onInput = this._onInput.bind(this), this._onChange = this._onChange.bind(this), this._onClear = this._onClear.bind(this);
   }
@@ -425,14 +431,14 @@ class y extends f {
   }
   _syncControlAttrs() {
     if (!this._textarea) return;
-    const t = this.getAttribute("placeholder") || "", e = this.getAttribute("maxlength"), i = this.getAttribute("minlength"), r = x(this.getAttribute("rows"), 4), a = this.hasAttribute("disabled"), u = this.hasAttribute("readonly"), s = this.hasAttribute("required"), c = this.getAttribute("name") || "", h = this.getAttribute("resize") || "vertical", p = this.getAttribute("validation"), b = this.getAttribute("color"), o = this.getAttribute("radius");
-    this._textarea.placeholder = t, this._textarea.disabled = a, this._textarea.readOnly = u, this._textarea.required = s, this._textarea.rows = Math.max(1, r), this._textarea.name = c, this._textarea.style.resize = h, e && Number.isFinite(Number(e)) ? this._textarea.maxLength = Number(e) : this._textarea.removeAttribute("maxlength"), i && Number.isFinite(Number(i)) ? this._textarea.minLength = Number(i) : this._textarea.removeAttribute("minlength"), p === "error" ? this._textarea.setAttribute("aria-invalid", "true") : this._textarea.removeAttribute("aria-invalid"), b ? this.style.setProperty("--ui-textarea-accent", b) : this.style.removeProperty("--ui-textarea-accent"), o && o !== "none" && o !== "large" && o !== "full" ? this.style.setProperty("--ui-textarea-radius", o) : this.style.removeProperty("--ui-textarea-radius");
-    const n = [], g = !!(this.getAttribute("description") || this.querySelector('[slot="description"]')), m = !!(this.getAttribute("data-error") || this.querySelector('[slot="error"]'));
-    g && n.push(`${this._uid}-description`), m && n.push(`${this._uid}-error`), (this.hasAttribute("show-count") || this.hasAttribute("maxlength")) && n.push(`${this._uid}-count`), !!(this.getAttribute("label") || this.querySelector('[slot="label"]')) ? this._textarea.setAttribute("aria-labelledby", `${this._uid}-label`) : this._textarea.removeAttribute("aria-labelledby"), n.length ? this._textarea.setAttribute("aria-describedby", n.join(" ")) : this._textarea.removeAttribute("aria-describedby");
+    const t = this.getAttribute("placeholder") || "", e = c(this.getAttribute("maxlength")), i = c(this.getAttribute("minlength")), s = b(this.getAttribute("rows"), 4), a = this.hasAttribute("disabled"), u = this.hasAttribute("readonly"), o = this.hasAttribute("required"), d = this.getAttribute("name") || "", h = this.getAttribute("resize") || "vertical", g = this.getAttribute("validation"), p = this.getAttribute("color"), n = this.getAttribute("radius");
+    this._textarea.placeholder = t, this._textarea.disabled = a, this._textarea.readOnly = u, this._textarea.required = o, this._textarea.rows = Math.max(1, s), this._textarea.name = d, this._textarea.style.resize = h, e !== null ? this._textarea.maxLength = e : this._textarea.removeAttribute("maxlength"), i !== null ? this._textarea.minLength = i : this._textarea.removeAttribute("minlength"), g === "error" ? this._textarea.setAttribute("aria-invalid", "true") : this._textarea.removeAttribute("aria-invalid"), p ? this.style.setProperty("--ui-textarea-accent", p) : this.style.removeProperty("--ui-textarea-accent"), n && n !== "none" && n !== "large" && n !== "full" ? this.style.setProperty("--ui-textarea-radius", n) : this.style.removeProperty("--ui-textarea-radius");
+    const l = [], m = !!(this.getAttribute("description") || this.querySelector('[slot="description"]')), f = !!(this.getAttribute("data-error") || this.querySelector('[slot="error"]'));
+    m && l.push(`${this._uid}-description`), f && l.push(`${this._uid}-error`), (this.hasAttribute("show-count") || c(this.getAttribute("maxlength")) !== null) && l.push(`${this._uid}-count`), !!(this.getAttribute("label") || this.querySelector('[slot="label"]')) ? this._textarea.setAttribute("aria-labelledby", `${this._uid}-label`) : this._textarea.removeAttribute("aria-labelledby"), l.length ? this._textarea.setAttribute("aria-describedby", l.join(" ")) : this._textarea.removeAttribute("aria-describedby");
   }
   _syncDynamicUi() {
-    const t = this._textarea?.value || this.getAttribute("value") || "", e = this.getAttribute("maxlength"), i = this.hasAttribute("clearable");
-    this._clearBtn && (i && t && !this.hasAttribute("disabled") && !this.hasAttribute("readonly") ? this._clearBtn.removeAttribute("hidden") : this._clearBtn.setAttribute("hidden", "")), this._countEl && (this.hasAttribute("show-count") || !!e ? (this._countEl.removeAttribute("hidden"), e && Number.isFinite(Number(e)) ? this._countEl.textContent = `${t.length} / ${Number(e)}` : this._countEl.textContent = `${t.length}`) : this._countEl.setAttribute("hidden", ""));
+    const t = this._textarea?.value || this.getAttribute("value") || "", e = c(this.getAttribute("maxlength")), i = this.hasAttribute("clearable");
+    this._clearBtn && (i && t && !this.hasAttribute("disabled") && !this.hasAttribute("readonly") ? this._clearBtn.removeAttribute("hidden") : this._clearBtn.setAttribute("hidden", "")), this._countEl && (this.hasAttribute("show-count") || e !== null ? (this._countEl.removeAttribute("hidden"), e !== null ? this._countEl.textContent = `${t.length} / ${e}` : this._countEl.textContent = `${t.length}`) : this._countEl.setAttribute("hidden", ""));
   }
   _applyAutosize() {
     if (!this._textarea) return;
@@ -441,9 +447,9 @@ class y extends f {
       return;
     }
     this._textarea.style.height = "auto";
-    const t = this._textarea.scrollHeight, e = x(this.getAttribute("max-rows"), 0);
+    const t = this._textarea.scrollHeight, e = b(this.getAttribute("max-rows"), 0);
     if (e > 0) {
-      const i = getComputedStyle(this._textarea), r = parseFloat(i.lineHeight || "20") || 20, a = parseFloat(i.borderTopWidth || "0") || 0, u = parseFloat(i.borderBottomWidth || "0") || 0, s = parseFloat(i.paddingTop || "0") || 0, c = parseFloat(i.paddingBottom || "0") || 0, h = r * e + a + u + s + c;
+      const i = getComputedStyle(this._textarea), s = parseFloat(i.lineHeight || "20") || 20, a = parseFloat(i.borderTopWidth || "0") || 0, u = parseFloat(i.borderBottomWidth || "0") || 0, o = parseFloat(i.paddingTop || "0") || 0, d = parseFloat(i.paddingBottom || "0") || 0, h = s * e + a + u + o + d;
       this._textarea.style.height = `${Math.min(t, h)}px`, this._textarea.style.overflowY = t > h ? "auto" : "hidden";
       return;
     }
@@ -465,7 +471,7 @@ class y extends f {
   _onInput(t) {
     const e = t.target.value;
     this.getAttribute("value") !== e && this.setAttribute("value", e), this._syncDynamicUi(), this._applyAutosize(), this._emit("input", e);
-    const i = x(this.getAttribute("debounce"), 0);
+    const i = b(this.getAttribute("debounce"), 0);
     i > 0 ? (this._debounceTimer && clearTimeout(this._debounceTimer), this._debounceTimer = setTimeout(() => {
       this._emit("debounced-input", e), this._debounceTimer = null;
     }, i)) : this._emit("debounced-input", e);
@@ -478,22 +484,22 @@ class y extends f {
     t.preventDefault(), !(this.hasAttribute("disabled") || this.hasAttribute("readonly")) && (this.value = "", this._textarea && (this._textarea.value = "", this._textarea.focus()), this._syncDynamicUi(), this._applyAutosize(), this._emit("input", ""), this._emit("change", ""), this.dispatchEvent(new CustomEvent("clear", { bubbles: !0, composed: !0 })));
   }
   render() {
-    const t = this.getAttribute("value") || "", e = this.getAttribute("label") || "", i = this.getAttribute("description") || "", r = this.getAttribute("data-error") || "", a = !!(e || i || this.querySelector('[slot="label"]') || this.querySelector('[slot="description"]')), s = this.hasAttribute("clearable") && !!t && !this.hasAttribute("disabled") && !this.hasAttribute("readonly");
+    const t = this.getAttribute("value") || "", e = this.getAttribute("label") || "", i = this.getAttribute("description") || "", s = this.getAttribute("data-error") || "", a = !!(e || i || this.querySelector('[slot="label"]') || this.querySelector('[slot="description"]')), o = this.hasAttribute("clearable") && !!t && !this.hasAttribute("disabled") && !this.hasAttribute("readonly");
     this.setContent(`
-      <style>${_}</style>
+      <style>${y}</style>
       <div class="shell" part="shell">
         <div class="meta" part="meta" ${a ? "" : "hidden"}>
-          <label id="${this._uid}-label" class="label" part="label"><slot name="label">${d(e)}</slot></label>
-          <div id="${this._uid}-description" class="description" part="description"><slot name="description">${d(i)}</slot></div>
+          <label id="${this._uid}-label" class="label" part="label"><slot name="label">${x(e)}</slot></label>
+          <div id="${this._uid}-description" class="description" part="description"><slot name="description">${x(i)}</slot></div>
         </div>
 
         <div class="field" part="field">
           <textarea part="textarea"></textarea>
-          <button type="button" part="clear" class="clear-btn" aria-label="Clear text" ${s ? "" : "hidden"}>${v}</button>
+          <button type="button" part="clear" class="clear-btn" aria-label="Clear text" ${o ? "" : "hidden"}>${_}</button>
         </div>
 
         <div class="footer" part="footer">
-          <div id="${this._uid}-error" class="error" part="error"><slot name="error">${d(r)}</slot></div>
+          <div id="${this._uid}-error" class="error" part="error"><slot name="error">${x(s)}</slot></div>
           <div id="${this._uid}-count" class="count" part="count" hidden></div>
         </div>
       </div>
@@ -505,7 +511,7 @@ class y extends f {
     return t === "label" || t === "description" || t === "data-error";
   }
 }
-typeof customElements < "u" && !customElements.get("ui-textarea") && customElements.define("ui-textarea", y);
+typeof customElements < "u" && !customElements.get("ui-textarea") && customElements.define("ui-textarea", z);
 export {
-  y as UITextarea
+  z as UITextarea
 };

package/dist/transfer-list.cjs.js

@@ -656,79 +656,79 @@
       min-inline-size: 0;
     }
   }
-`;function l(n){return n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function x(n){if(!n)return[];try{const e=JSON.parse(n);if(!Array.isArray(e))return[];const t=[];return e.forEach(r=>{if(!r||typeof r!="object")return;const a={value:String(r.value??""),label:String(r.label??r.value??""),disabled:!!r.disabled};r.description&&(a.description=String(r.description)),a.value&&t.push(a)}),t}catch{return[]}}function z(n){if(!n)return[];try{const e=JSON.parse(n);return Array.isArray(e)?e.map(t=>String(t)):[]}catch{return[]}}function y(n,e){return new Set(Array.from(n).filter(t=>e.has(t)))}function R(n){return n==="tick"||n==="none"?n:"checkbox"}function p(n,e){return n==null?e:n===""||n==="true"||n==="1"||n==="yes"?!0:n==="false"||n==="0"||n==="no"?!1:e}function _(n){return`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="${n==="right"?"M9 6l6 6-6 6":"M15 6l-6 6 6 6"}"/></svg>`}class k extends q.ElementBase{constructor(){super(...arguments),this._options=[],this._value=[],this._selectedAvailable=new Set,this._selectedChosen=new Set,this._formUnregister=null,this._suppressValueAttr=!1,this._delegatedListenersAttached=!1,this._handleRootClick=e=>{const t=e.target;if(!t)return;const r=t.closest(".move-btn");if(r&&this.root.contains(r)){this._move(r.getAttribute("data-action"));return}const a=t.closest(".item");a&&this.root.contains(a)&&this._toggleItem(a)},this._handleRootKeyDown=e=>{const t=e.target;if(!t)return;const r=t.closest(".item");r&&this.root.contains(r)&&this._onItemKeyDown(e,r)}}static get observedAttributes(){return["options","value","label","description","error","name","disabled","variant","tone","size","radius","elevation","available-label","selected-label","available-empty-label","selected-empty-label","selection-indicator","add-action-label","remove-action-label","show-action-labels","show-action-counts","show-panel-counts"]}get value(){return[...this._value]}set value(e){this._applyValue(e,"api")}connectedCallback(){super.connectedCallback(),this._attachDelegatedListeners(),this._registerWithForm()}disconnectedCallback(){this._formUnregister&&this._formUnregister(),this._detachDelegatedListeners(),super.disconnectedCallback()}attributeChangedCallback(e,t,r){t!==r&&(e==="options"&&(this._options=x(r)),e==="value"&&!this._suppressValueAttr&&(this._value=z(r)),e==="name"&&this.isConnected&&this._registerWithForm(),e==="disabled"&&(this._selectedAvailable.clear(),this._selectedChosen.clear()),this.isConnected&&this.requestRender())}render(){this._options.length||(this._options=x(this.getAttribute("options"))),!this._value.length&&this.getAttribute("value")&&(this._value=z(this.getAttribute("value")));const e=new Set(this._value),t=this._options.filter(i=>!e.has(i.value)),r=this._options.filter(i=>e.has(i.value)),a=new Set(t.map(i=>i.value)),o=new Set(r.map(i=>i.value));this._selectedAvailable=y(this._selectedAvailable,a),this._selectedChosen=y(this._selectedChosen,o);const s=this.getAttribute("label")||"",c=this.getAttribute("description")||"",u=this.getAttribute("error")||"",w=this.getAttribute("available-label")||"Available",A=this.getAttribute("selected-label")||"Selected",$=this.getAttribute("available-empty-label")||"No items available to add.",S=this.getAttribute("selected-empty-label")||"No items selected yet.",C=R(this.getAttribute("selection-indicator")),L=this.getAttribute("add-action-label")||"Add selected",E=this.getAttribute("remove-action-label")||"Remove selected",d=p(this.getAttribute("show-action-labels"),!0),f=p(this.getAttribute("show-action-counts"),!0),b=p(this.getAttribute("show-panel-counts"),!0),h=this.getAttribute("radius"),I=h?` style="--ui-transfer-panel-radius:${l(h)};"`:"",m=()=>C==="none"?"":'<span class="indicator" part="indicator" aria-hidden="true"><span class="indicator-box"><span class="indicator-mark">✓</span></span></span>',g=i=>d?`<span class="move-btn-text">${l(i)}</span>`:"",v=i=>f?`<span class="move-btn-count">${i}</span>`:"",V=t.length?t.map(i=>`<div
+`;function s(n){return n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function k(n){if(!n)return[];try{const e=JSON.parse(n);if(!Array.isArray(e))return[];const t=[];return e.forEach(r=>{if(!r||typeof r!="object")return;const a={value:String(r.value??""),label:String(r.label??r.value??""),disabled:!!r.disabled};r.description&&(a.description=String(r.description)),a.value&&t.push(a)}),t}catch{return[]}}function w(n){if(!n)return[];try{const e=JSON.parse(n);return Array.isArray(e)?e.map(t=>String(t)):[]}catch{return[]}}function A(n,e){return new Set(Array.from(n).filter(t=>e.has(t)))}function R(n){return n==="tick"||n==="none"?n:"checkbox"}function p(n,e){return n==null?e:n===""||n==="true"||n==="1"||n==="yes"?!0:n==="false"||n==="0"||n==="no"?!1:e}function $(n){return`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="${n==="right"?"M9 6l6 6-6 6":"M15 6l-6 6 6 6"}"/></svg>`}class S extends q.ElementBase{constructor(){super(...arguments),this._options=[],this._value=[],this._selectedAvailable=new Set,this._selectedChosen=new Set,this._formUnregister=null,this._suppressValueAttr=!1,this._delegatedListenersAttached=!1,this._handleRootClick=e=>{const t=e.target;if(!t)return;const r=t.closest(".move-btn");if(r&&this.root.contains(r)){this._move(r.getAttribute("data-action"));return}const a=t.closest(".item");a&&this.root.contains(a)&&this._toggleItem(a)},this._handleRootKeyDown=e=>{const t=e.target;if(!t)return;const r=t.closest(".item");r&&this.root.contains(r)&&this._onItemKeyDown(e,r)}}static get observedAttributes(){return["options","value","label","description","error","name","disabled","variant","tone","size","radius","elevation","available-label","selected-label","available-empty-label","selected-empty-label","selection-indicator","add-action-label","remove-action-label","show-action-labels","show-action-counts","show-panel-counts"]}get value(){return[...this._value]}set value(e){this._applyValue(e,"api")}connectedCallback(){super.connectedCallback(),this._attachDelegatedListeners(),this._registerWithForm()}disconnectedCallback(){this._formUnregister&&this._formUnregister(),this._detachDelegatedListeners(),super.disconnectedCallback()}attributeChangedCallback(e,t,r){t!==r&&(e==="options"&&(this._options=k(r)),e==="value"&&!this._suppressValueAttr&&(this._value=w(r)),e==="name"&&this.isConnected&&this._registerWithForm(),e==="disabled"&&(this._selectedAvailable.clear(),this._selectedChosen.clear()),this.isConnected&&this.requestRender())}render(){this._options.length||(this._options=k(this.getAttribute("options"))),!this._value.length&&this.getAttribute("value")&&(this._value=w(this.getAttribute("value")));const e=new Set(this._value),t=this._options.filter(i=>!e.has(i.value)),r=this._options.filter(i=>e.has(i.value)),a=new Set(t.map(i=>i.value)),l=new Set(r.map(i=>i.value));this._selectedAvailable=A(this._selectedAvailable,a),this._selectedChosen=A(this._selectedChosen,l);const o=this.getAttribute("label")||"",c=this.getAttribute("description")||"",d=this.getAttribute("error")||"",b=this.getAttribute("available-label")||"Available",h=this.getAttribute("selected-label")||"Selected",C=this.getAttribute("available-empty-label")||"No items available to add.",L=this.getAttribute("selected-empty-label")||"No items selected yet.",E=R(this.getAttribute("selection-indicator")),m=this.getAttribute("add-action-label")||"Add selected",g=this.getAttribute("remove-action-label")||"Remove selected",u=p(this.getAttribute("show-action-labels"),!0),f=p(this.getAttribute("show-action-counts"),!0),v=p(this.getAttribute("show-panel-counts"),!0),x=this.getAttribute("radius"),I=x?` style="--ui-transfer-panel-radius:${s(x)};"`:"",z=()=>E==="none"?"":'<span class="indicator" part="indicator" aria-hidden="true"><span class="indicator-box"><span class="indicator-mark">✓</span></span></span>',y=i=>u?`<span class="move-btn-text">${s(i)}</span>`:"",_=i=>f?`<span class="move-btn-count">${i}</span>`:"",V=t.length?t.map(i=>`<div
               class="item"
               part="item available-item"
               role="option"
               data-side="available"
-              data-value="${l(i.value)}"
+              data-value="${s(i.value)}"
               data-selected="${this._selectedAvailable.has(i.value)}"
               aria-selected="${this._selectedAvailable.has(i.value)?"true":"false"}"
               aria-disabled="${i.disabled?"true":"false"}"
               tabindex="${i.disabled?"-1":"0"}"
             >
-              ${m()}
+              ${z()}
               <div class="item-copy">
-                <span class="item-title">${l(i.label)}</span>
-                ${i.description?`<span class="item-description">${l(i.description)}</span>`:""}
+                <span class="item-title">${s(i.label)}</span>
+                ${i.description?`<span class="item-description">${s(i.description)}</span>`:""}
               </div>
-            </div>`).join(""):`<div class="empty" part="empty">${l($)}</div>`,D=r.length?r.map(i=>`<div
+            </div>`).join(""):`<div class="empty" part="empty">${s(C)}</div>`,D=r.length?r.map(i=>`<div
               class="item"
               part="item selected-item"
               role="option"
               data-side="chosen"
-              data-value="${l(i.value)}"
+              data-value="${s(i.value)}"
               data-selected="${this._selectedChosen.has(i.value)}"
               aria-selected="${this._selectedChosen.has(i.value)?"true":"false"}"
               aria-disabled="${i.disabled?"true":"false"}"
               tabindex="${i.disabled?"-1":"0"}"
             >
-              ${m()}
+              ${z()}
               <div class="item-copy">
-                <span class="item-title">${l(i.label)}</span>
-                ${i.description?`<span class="item-description">${l(i.description)}</span>`:""}
+                <span class="item-title">${s(i.label)}</span>
+                ${i.description?`<span class="item-description">${s(i.description)}</span>`:""}
               </div>
-            </div>`).join(""):`<div class="empty" part="empty">${l(S)}</div>`;this.setContent(`
+            </div>`).join(""):`<div class="empty" part="empty">${s(L)}</div>`;this.setContent(`
       <style>${U}</style>
       <div class="root"${I} part="root">
-        ${s?`<p class="label" part="label">${l(s)}</p>`:""}
-        ${c?`<p class="description" part="description">${l(c)}</p>`:""}
+        ${o?`<p class="label" part="label">${s(o)}</p>`:""}
+        ${c?`<p class="description" part="description">${s(c)}</p>`:""}
         <div class="shell" part="shell">
           <section class="panel" part="panel panel-available">
             <div class="panel-header" part="panel-header">
               <div class="panel-heading">
-                <div class="panel-title">${l(w)}</div>
-                ${b?`<span class="panel-count" part="count">${t.length}</span>`:""}
+                <div class="panel-title">${s(b)}</div>
+                ${v?`<span class="panel-count" part="count">${t.length}</span>`:""}
               </div>
               <div class="panel-help">Choose entries to move into the selected list.</div>
             </div>
-            <div class="list" part="list available-list" data-list="available" role="listbox" aria-multiselectable="true">${V}</div>
+            <div class="list" part="list available-list" data-list="available" role="listbox" aria-multiselectable="true" aria-label="${s(b)}">${V}</div>
             <div class="summary" part="summary">${t.length} available</div>
           </section>
           <div class="actions" part="actions">
-            <button class="move-btn" part="action-button action-add" data-compact="${!d&&!f}" data-action="add" type="button"${this._selectedAvailable.size?"":" disabled"}>
-              <span class="move-btn-icon" aria-hidden="true">${_("right")}</span>
-              ${g(L)}
-              ${v(this._selectedAvailable.size||0)}
+            <button class="move-btn" part="action-button action-add" data-compact="${!u&&!f}" data-action="add" type="button"${u?"":` aria-label="${s(m)}"`}${this._selectedAvailable.size?"":" disabled"}>
+              <span class="move-btn-icon" aria-hidden="true">${$("right")}</span>
+              ${y(m)}
+              ${_(this._selectedAvailable.size||0)}
             </button>
-            <button class="move-btn" part="action-button action-remove" data-compact="${!d&&!f}" data-action="remove" type="button"${this._selectedChosen.size?"":" disabled"}>
-              <span class="move-btn-icon" aria-hidden="true">${_("left")}</span>
-              ${g(E)}
-              ${v(this._selectedChosen.size||0)}
+            <button class="move-btn" part="action-button action-remove" data-compact="${!u&&!f}" data-action="remove" type="button"${u?"":` aria-label="${s(g)}"`}${this._selectedChosen.size?"":" disabled"}>
+              <span class="move-btn-icon" aria-hidden="true">${$("left")}</span>
+              ${y(g)}
+              ${_(this._selectedChosen.size||0)}
             </button>
           </div>
           <section class="panel" part="panel panel-selected">
             <div class="panel-header" part="panel-header">
               <div class="panel-heading">
-                <div class="panel-title">${l(A)}</div>
-                ${b?`<span class="panel-count" part="count">${r.length}</span>`:""}
+                <div class="panel-title">${s(h)}</div>
+                ${v?`<span class="panel-count" part="count">${r.length}</span>`:""}
               </div>
               <div class="panel-help">Use the remove action to send items back.</div>
             </div>
-            <div class="list" part="list selected-list" data-list="chosen" role="listbox" aria-multiselectable="true">${D}</div>
+            <div class="list" part="list selected-list" data-list="chosen" role="listbox" aria-multiselectable="true" aria-label="${s(h)}">${D}</div>
             <div class="summary" part="summary">${r.length} selected</div>
           </section>
         </div>
-        ${u?`<p class="error" part="error">${l(u)}</p>`:""}
+        ${d?`<p class="error" part="error">${s(d)}</p>`:""}
       </div>
-    `)}_toggleItem(e){if(this.hasAttribute("disabled"))return;const t=e.getAttribute("data-side"),r=e.getAttribute("data-value")||"";if(!r)return;const a=t==="chosen"?this._selectedChosen:this._selectedAvailable;a.has(r)?a.delete(r):a.add(r),e.setAttribute("data-selected",a.has(r)?"true":"false"),e.setAttribute("aria-selected",a.has(r)?"true":"false"),this._syncActionButtons()}_onItemKeyDown(e,t){const r=t.getAttribute("data-side");if(!r)return;if(e.key==="Enter"||e.key===" "){e.preventDefault(),this._toggleItem(t);return}if(!["ArrowDown","ArrowUp","Home","End"].includes(e.key))return;e.preventDefault();const a=this.root.querySelector(`[data-list="${r}"]`),o=Array.from(a?.querySelectorAll('.item[tabindex="0"]')||[]);if(!o.length)return;const s=o.indexOf(t);if(e.key==="Home"){o[0]?.focus();return}if(e.key==="End"){o[o.length-1]?.focus();return}const c=e.key==="ArrowDown"?Math.min(o.length-1,s+1):Math.max(0,s-1);o[c]?.focus()}_move(e){if(!this.hasAttribute("disabled")){if(e==="add"){const t=[...this._value,...Array.from(this._selectedAvailable).filter(r=>!this._value.includes(r))];this._selectedAvailable.clear(),this._applyValue(t,"transfer-right");return}if(e==="remove"){const t=new Set(this._selectedChosen),r=this._value.filter(a=>!t.has(a));this._selectedChosen.clear(),this._applyValue(r,"transfer-left")}}}_attachDelegatedListeners(){this._delegatedListenersAttached||(this.root.addEventListener("click",this._handleRootClick),this.root.addEventListener("keydown",this._handleRootKeyDown),this._delegatedListenersAttached=!0)}_detachDelegatedListeners(){this._delegatedListenersAttached&&(this.root.removeEventListener("click",this._handleRootClick),this.root.removeEventListener("keydown",this._handleRootKeyDown),this._delegatedListenersAttached=!1)}_applyValue(e,t){const r=new Set(this._options.map(s=>s.value)),a=Array.from(new Set(e.filter(s=>s&&(r.size===0||r.has(s))))),o=[...this._value];this._value=a,this._suppressValueAttr=!0;try{a.length?this.setAttribute("value",JSON.stringify(a)):this.removeAttribute("value")}finally{this._suppressValueAttr=!1}a.length>0&&this.removeAttribute("invalid"),this.requestRender(),this.dispatchEvent(new CustomEvent("change",{detail:{value:[...this._value],previousValue:o,selectedItems:this._options.filter(s=>this._value.includes(s.value)),source:t},bubbles:!0,composed:!0}))}_syncActionButtons(){const e=this.root.querySelector('[data-action="add"]'),t=this.root.querySelector('[data-action="remove"]');if(e){e.disabled=this._selectedAvailable.size===0;const r=e.querySelector(".move-btn-count");r&&(r.textContent=String(this._selectedAvailable.size))}if(t){t.disabled=this._selectedChosen.size===0;const r=t.querySelector(".move-btn-count");r&&(r.textContent=String(this._selectedChosen.size))}}_registerWithForm(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const a=this.getRootNode().host?.closest?.("ui-form")||null||this.closest("ui-form"),o=this.getAttribute("name");a&&typeof a.registerField=="function"&&o&&(this._formUnregister=a.registerField(o,{name:o,getValue:()=>[...this._value],setValue:s=>{const c=Array.isArray(s)?s.map(u=>String(u)):[];this._applyValue(c,"api")},validate:async()=>({valid:!this.hasAttribute("required")||this._value.length>0,message:"Select at least one item."}),setError:s=>{s?(this.setAttribute("error",s),this.setAttribute("invalid","")):(this.removeAttribute("error"),this.removeAttribute("invalid")),this.requestRender()}}))}catch{}}}typeof customElements<"u"&&!customElements.get("ui-transfer-list")&&customElements.define("ui-transfer-list",k);exports.UITransferList=k;
+    `)}_toggleItem(e){if(this.hasAttribute("disabled"))return;const t=e.getAttribute("data-side"),r=e.getAttribute("data-value")||"";if(!r)return;const a=t==="chosen"?this._selectedChosen:this._selectedAvailable;a.has(r)?a.delete(r):a.add(r),e.setAttribute("data-selected",a.has(r)?"true":"false"),e.setAttribute("aria-selected",a.has(r)?"true":"false"),this._syncActionButtons()}_onItemKeyDown(e,t){const r=t.getAttribute("data-side");if(!r)return;if(e.key==="Enter"||e.key===" "){e.preventDefault(),this._toggleItem(t);return}if(!["ArrowDown","ArrowUp","Home","End"].includes(e.key))return;e.preventDefault();const a=this.root.querySelector(`[data-list="${r}"]`),l=Array.from(a?.querySelectorAll('.item[tabindex="0"]')||[]);if(!l.length)return;const o=l.indexOf(t);if(e.key==="Home"){l[0]?.focus();return}if(e.key==="End"){l[l.length-1]?.focus();return}const c=e.key==="ArrowDown"?Math.min(l.length-1,o+1):Math.max(0,o-1);l[c]?.focus()}_move(e){if(!this.hasAttribute("disabled")){if(e==="add"){const t=[...this._value,...Array.from(this._selectedAvailable).filter(r=>!this._value.includes(r))];this._selectedAvailable.clear(),this._applyValue(t,"transfer-right");return}if(e==="remove"){const t=new Set(this._selectedChosen),r=this._value.filter(a=>!t.has(a));this._selectedChosen.clear(),this._applyValue(r,"transfer-left")}}}_attachDelegatedListeners(){this._delegatedListenersAttached||(this.root.addEventListener("click",this._handleRootClick),this.root.addEventListener("keydown",this._handleRootKeyDown),this._delegatedListenersAttached=!0)}_detachDelegatedListeners(){this._delegatedListenersAttached&&(this.root.removeEventListener("click",this._handleRootClick),this.root.removeEventListener("keydown",this._handleRootKeyDown),this._delegatedListenersAttached=!1)}_applyValue(e,t){const r=new Set(this._options.map(o=>o.value)),a=Array.from(new Set(e.filter(o=>o&&(r.size===0||r.has(o))))),l=[...this._value];this._value=a,this._suppressValueAttr=!0;try{a.length?this.setAttribute("value",JSON.stringify(a)):this.removeAttribute("value")}finally{this._suppressValueAttr=!1}a.length>0&&this.removeAttribute("invalid"),this.requestRender(),this.dispatchEvent(new CustomEvent("change",{detail:{value:[...this._value],previousValue:l,selectedItems:this._options.filter(o=>this._value.includes(o.value)),source:t},bubbles:!0,composed:!0}))}_syncActionButtons(){const e=this.root.querySelector('[data-action="add"]'),t=this.root.querySelector('[data-action="remove"]');if(e){e.disabled=this._selectedAvailable.size===0;const r=e.querySelector(".move-btn-count");r&&(r.textContent=String(this._selectedAvailable.size))}if(t){t.disabled=this._selectedChosen.size===0;const r=t.querySelector(".move-btn-count");r&&(r.textContent=String(this._selectedChosen.size))}}_registerWithForm(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const a=this.getRootNode().host?.closest?.("ui-form")||null||this.closest("ui-form"),l=this.getAttribute("name");a&&typeof a.registerField=="function"&&l&&(this._formUnregister=a.registerField(l,{name:l,getValue:()=>[...this._value],setValue:o=>{const c=Array.isArray(o)?o.map(d=>String(d)):[];this._applyValue(c,"api")},validate:async()=>({valid:!this.hasAttribute("required")||this._value.length>0,message:"Select at least one item."}),setError:o=>{o?(this.setAttribute("error",o),this.setAttribute("invalid","")):(this.removeAttribute("error"),this.removeAttribute("invalid")),this.requestRender()}}))}catch{}}}typeof customElements<"u"&&!customElements.get("ui-transfer-list")&&customElements.define("ui-transfer-list",S);exports.UITransferList=S;

package/dist/transfer-list.esm.js

@@ -658,10 +658,10 @@ const q = `
     }
   }
 `;
-function l(n) {
+function s(n) {
   return n.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function x(n) {
+function k(n) {
   if (!n) return [];
   try {
     const e = JSON.parse(n);
@@ -680,7 +680,7 @@ function x(n) {
     return [];
   }
 }
-function z(n) {
+function w(n) {
   if (!n) return [];
   try {
     const e = JSON.parse(n);
@@ -689,7 +689,7 @@ function z(n) {
     return [];
   }
 }
-function y(n, e) {
+function A(n, e) {
   return new Set(Array.from(n).filter((t) => e.has(t)));
 }
 function R(n) {
@@ -698,7 +698,7 @@ function R(n) {
 function p(n, e) {
   return n == null ? e : n === "" || n === "true" || n === "1" || n === "yes" ? !0 : n === "false" || n === "0" || n === "no" ? !1 : e;
 }
-function _(n) {
+function $(n) {
   return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="${n === "right" ? "M9 6l6 6-6 6" : "M15 6l-6 6 6 6"}"/></svg>`;
 }
 class U extends D {
@@ -759,91 +759,91 @@ class U extends D {
     this._formUnregister && this._formUnregister(), this._detachDelegatedListeners(), super.disconnectedCallback();
   }
   attributeChangedCallback(e, t, r) {
-    t !== r && (e === "options" && (this._options = x(r)), e === "value" && !this._suppressValueAttr && (this._value = z(r)), e === "name" && this.isConnected && this._registerWithForm(), e === "disabled" && (this._selectedAvailable.clear(), this._selectedChosen.clear()), this.isConnected && this.requestRender());
+    t !== r && (e === "options" && (this._options = k(r)), e === "value" && !this._suppressValueAttr && (this._value = w(r)), e === "name" && this.isConnected && this._registerWithForm(), e === "disabled" && (this._selectedAvailable.clear(), this._selectedChosen.clear()), this.isConnected && this.requestRender());
   }
   render() {
-    this._options.length || (this._options = x(this.getAttribute("options"))), !this._value.length && this.getAttribute("value") && (this._value = z(this.getAttribute("value")));
-    const e = new Set(this._value), t = this._options.filter((i) => !e.has(i.value)), r = this._options.filter((i) => e.has(i.value)), a = new Set(t.map((i) => i.value)), o = new Set(r.map((i) => i.value));
-    this._selectedAvailable = y(this._selectedAvailable, a), this._selectedChosen = y(this._selectedChosen, o);
-    const s = this.getAttribute("label") || "", c = this.getAttribute("description") || "", u = this.getAttribute("error") || "", k = this.getAttribute("available-label") || "Available", w = this.getAttribute("selected-label") || "Selected", A = this.getAttribute("available-empty-label") || "No items available to add.", $ = this.getAttribute("selected-empty-label") || "No items selected yet.", C = R(this.getAttribute("selection-indicator")), S = this.getAttribute("add-action-label") || "Add selected", L = this.getAttribute("remove-action-label") || "Remove selected", d = p(this.getAttribute("show-action-labels"), !0), f = p(this.getAttribute("show-action-counts"), !0), b = p(this.getAttribute("show-panel-counts"), !0), h = this.getAttribute("radius"), E = h ? ` style="--ui-transfer-panel-radius:${l(h)};"` : "", m = () => C === "none" ? "" : '<span class="indicator" part="indicator" aria-hidden="true"><span class="indicator-box"><span class="indicator-mark">✓</span></span></span>', g = (i) => d ? `<span class="move-btn-text">${l(i)}</span>` : "", v = (i) => f ? `<span class="move-btn-count">${i}</span>` : "", I = t.length ? t.map(
+    this._options.length || (this._options = k(this.getAttribute("options"))), !this._value.length && this.getAttribute("value") && (this._value = w(this.getAttribute("value")));
+    const e = new Set(this._value), t = this._options.filter((i) => !e.has(i.value)), r = this._options.filter((i) => e.has(i.value)), a = new Set(t.map((i) => i.value)), l = new Set(r.map((i) => i.value));
+    this._selectedAvailable = A(this._selectedAvailable, a), this._selectedChosen = A(this._selectedChosen, l);
+    const o = this.getAttribute("label") || "", c = this.getAttribute("description") || "", d = this.getAttribute("error") || "", b = this.getAttribute("available-label") || "Available", h = this.getAttribute("selected-label") || "Selected", C = this.getAttribute("available-empty-label") || "No items available to add.", S = this.getAttribute("selected-empty-label") || "No items selected yet.", L = R(this.getAttribute("selection-indicator")), m = this.getAttribute("add-action-label") || "Add selected", g = this.getAttribute("remove-action-label") || "Remove selected", u = p(this.getAttribute("show-action-labels"), !0), f = p(this.getAttribute("show-action-counts"), !0), v = p(this.getAttribute("show-panel-counts"), !0), x = this.getAttribute("radius"), E = x ? ` style="--ui-transfer-panel-radius:${s(x)};"` : "", z = () => L === "none" ? "" : '<span class="indicator" part="indicator" aria-hidden="true"><span class="indicator-box"><span class="indicator-mark">✓</span></span></span>', y = (i) => u ? `<span class="move-btn-text">${s(i)}</span>` : "", _ = (i) => f ? `<span class="move-btn-count">${i}</span>` : "", I = t.length ? t.map(
       (i) => `<div
               class="item"
               part="item available-item"
               role="option"
               data-side="available"
-              data-value="${l(i.value)}"
+              data-value="${s(i.value)}"
               data-selected="${this._selectedAvailable.has(i.value)}"
               aria-selected="${this._selectedAvailable.has(i.value) ? "true" : "false"}"
               aria-disabled="${i.disabled ? "true" : "false"}"
               tabindex="${i.disabled ? "-1" : "0"}"
             >
-              ${m()}
+              ${z()}
               <div class="item-copy">
-                <span class="item-title">${l(i.label)}</span>
-                ${i.description ? `<span class="item-description">${l(i.description)}</span>` : ""}
+                <span class="item-title">${s(i.label)}</span>
+                ${i.description ? `<span class="item-description">${s(i.description)}</span>` : ""}
               </div>
             </div>`
-    ).join("") : `<div class="empty" part="empty">${l(A)}</div>`, V = r.length ? r.map(
+    ).join("") : `<div class="empty" part="empty">${s(C)}</div>`, V = r.length ? r.map(
       (i) => `<div
               class="item"
               part="item selected-item"
               role="option"
               data-side="chosen"
-              data-value="${l(i.value)}"
+              data-value="${s(i.value)}"
               data-selected="${this._selectedChosen.has(i.value)}"
               aria-selected="${this._selectedChosen.has(i.value) ? "true" : "false"}"
               aria-disabled="${i.disabled ? "true" : "false"}"
               tabindex="${i.disabled ? "-1" : "0"}"
             >
-              ${m()}
+              ${z()}
               <div class="item-copy">
-                <span class="item-title">${l(i.label)}</span>
-                ${i.description ? `<span class="item-description">${l(i.description)}</span>` : ""}
+                <span class="item-title">${s(i.label)}</span>
+                ${i.description ? `<span class="item-description">${s(i.description)}</span>` : ""}
               </div>
             </div>`
-    ).join("") : `<div class="empty" part="empty">${l($)}</div>`;
+    ).join("") : `<div class="empty" part="empty">${s(S)}</div>`;
     this.setContent(`
       <style>${q}</style>
       <div class="root"${E} part="root">
-        ${s ? `<p class="label" part="label">${l(s)}</p>` : ""}
-        ${c ? `<p class="description" part="description">${l(c)}</p>` : ""}
+        ${o ? `<p class="label" part="label">${s(o)}</p>` : ""}
+        ${c ? `<p class="description" part="description">${s(c)}</p>` : ""}
         <div class="shell" part="shell">
           <section class="panel" part="panel panel-available">
             <div class="panel-header" part="panel-header">
               <div class="panel-heading">
-                <div class="panel-title">${l(k)}</div>
-                ${b ? `<span class="panel-count" part="count">${t.length}</span>` : ""}
+                <div class="panel-title">${s(b)}</div>
+                ${v ? `<span class="panel-count" part="count">${t.length}</span>` : ""}
               </div>
               <div class="panel-help">Choose entries to move into the selected list.</div>
             </div>
-            <div class="list" part="list available-list" data-list="available" role="listbox" aria-multiselectable="true">${I}</div>
+            <div class="list" part="list available-list" data-list="available" role="listbox" aria-multiselectable="true" aria-label="${s(b)}">${I}</div>
             <div class="summary" part="summary">${t.length} available</div>
           </section>
           <div class="actions" part="actions">
-            <button class="move-btn" part="action-button action-add" data-compact="${!d && !f}" data-action="add" type="button"${this._selectedAvailable.size ? "" : " disabled"}>
-              <span class="move-btn-icon" aria-hidden="true">${_("right")}</span>
-              ${g(S)}
-              ${v(this._selectedAvailable.size || 0)}
+            <button class="move-btn" part="action-button action-add" data-compact="${!u && !f}" data-action="add" type="button"${u ? "" : ` aria-label="${s(m)}"`}${this._selectedAvailable.size ? "" : " disabled"}>
+              <span class="move-btn-icon" aria-hidden="true">${$("right")}</span>
+              ${y(m)}
+              ${_(this._selectedAvailable.size || 0)}
             </button>
-            <button class="move-btn" part="action-button action-remove" data-compact="${!d && !f}" data-action="remove" type="button"${this._selectedChosen.size ? "" : " disabled"}>
-              <span class="move-btn-icon" aria-hidden="true">${_("left")}</span>
-              ${g(L)}
-              ${v(this._selectedChosen.size || 0)}
+            <button class="move-btn" part="action-button action-remove" data-compact="${!u && !f}" data-action="remove" type="button"${u ? "" : ` aria-label="${s(g)}"`}${this._selectedChosen.size ? "" : " disabled"}>
+              <span class="move-btn-icon" aria-hidden="true">${$("left")}</span>
+              ${y(g)}
+              ${_(this._selectedChosen.size || 0)}
             </button>
           </div>
           <section class="panel" part="panel panel-selected">
             <div class="panel-header" part="panel-header">
               <div class="panel-heading">
-                <div class="panel-title">${l(w)}</div>
-                ${b ? `<span class="panel-count" part="count">${r.length}</span>` : ""}
+                <div class="panel-title">${s(h)}</div>
+                ${v ? `<span class="panel-count" part="count">${r.length}</span>` : ""}
               </div>
               <div class="panel-help">Use the remove action to send items back.</div>
             </div>
-            <div class="list" part="list selected-list" data-list="chosen" role="listbox" aria-multiselectable="true">${V}</div>
+            <div class="list" part="list selected-list" data-list="chosen" role="listbox" aria-multiselectable="true" aria-label="${s(h)}">${V}</div>
             <div class="summary" part="summary">${r.length} selected</div>
           </section>
         </div>
-        ${u ? `<p class="error" part="error">${l(u)}</p>` : ""}
+        ${d ? `<p class="error" part="error">${s(d)}</p>` : ""}
       </div>
     `);
   }
@@ -863,19 +863,19 @@ class U extends D {
     }
     if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key)) return;
     e.preventDefault();
-    const a = this.root.querySelector(`[data-list="${r}"]`), o = Array.from(a?.querySelectorAll('.item[tabindex="0"]') || []);
-    if (!o.length) return;
-    const s = o.indexOf(t);
+    const a = this.root.querySelector(`[data-list="${r}"]`), l = Array.from(a?.querySelectorAll('.item[tabindex="0"]') || []);
+    if (!l.length) return;
+    const o = l.indexOf(t);
     if (e.key === "Home") {
-      o[0]?.focus();
+      l[0]?.focus();
       return;
     }
     if (e.key === "End") {
-      o[o.length - 1]?.focus();
+      l[l.length - 1]?.focus();
       return;
     }
-    const c = e.key === "ArrowDown" ? Math.min(o.length - 1, s + 1) : Math.max(0, s - 1);
-    o[c]?.focus();
+    const c = e.key === "ArrowDown" ? Math.min(l.length - 1, o + 1) : Math.max(0, o - 1);
+    l[c]?.focus();
   }
   _move(e) {
     if (!this.hasAttribute("disabled")) {
@@ -897,7 +897,7 @@ class U extends D {
     this._delegatedListenersAttached && (this.root.removeEventListener("click", this._handleRootClick), this.root.removeEventListener("keydown", this._handleRootKeyDown), this._delegatedListenersAttached = !1);
   }
   _applyValue(e, t) {
-    const r = new Set(this._options.map((s) => s.value)), a = Array.from(new Set(e.filter((s) => s && (r.size === 0 || r.has(s))))), o = [...this._value];
+    const r = new Set(this._options.map((o) => o.value)), a = Array.from(new Set(e.filter((o) => o && (r.size === 0 || r.has(o))))), l = [...this._value];
     this._value = a, this._suppressValueAttr = !0;
     try {
       a.length ? this.setAttribute("value", JSON.stringify(a)) : this.removeAttribute("value");
@@ -908,8 +908,8 @@ class U extends D {
       new CustomEvent("change", {
         detail: {
           value: [...this._value],
-          previousValue: o,
-          selectedItems: this._options.filter((s) => this._value.includes(s.value)),
+          previousValue: l,
+          selectedItems: this._options.filter((o) => this._value.includes(o.value)),
           source: t
         },
         bubbles: !0,
@@ -933,17 +933,17 @@ class U extends D {
   _registerWithForm() {
     this._formUnregister && (this._formUnregister(), this._formUnregister = null);
     try {
-      const a = this.getRootNode().host?.closest?.("ui-form") || null || this.closest("ui-form"), o = this.getAttribute("name");
-      a && typeof a.registerField == "function" && o && (this._formUnregister = a.registerField(o, {
-        name: o,
+      const a = this.getRootNode().host?.closest?.("ui-form") || null || this.closest("ui-form"), l = this.getAttribute("name");
+      a && typeof a.registerField == "function" && l && (this._formUnregister = a.registerField(l, {
+        name: l,
         getValue: () => [...this._value],
-        setValue: (s) => {
-          const c = Array.isArray(s) ? s.map((u) => String(u)) : [];
+        setValue: (o) => {
+          const c = Array.isArray(o) ? o.map((d) => String(d)) : [];
           this._applyValue(c, "api");
         },
         validate: async () => ({ valid: !this.hasAttribute("required") || this._value.length > 0, message: "Select at least one item." }),
-        setError: (s) => {
-          s ? (this.setAttribute("error", s), this.setAttribute("invalid", "")) : (this.removeAttribute("error"), this.removeAttribute("invalid")), this.requestRender();
+        setError: (o) => {
+          o ? (this.setAttribute("error", o), this.setAttribute("invalid", "")) : (this.removeAttribute("error"), this.removeAttribute("invalid")), this.requestRender();
         }
       }));
     } catch {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editora/ui-core",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "description": "Framework-agnostic Web Components and primitives for the Editora UI ecosystem",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",