@editora/ui-core 0.1.20 → 0.1.22

package/dist/transfer-list.cjs.js

@@ -2,7 +2,7 @@
   :host {
     --ui-transfer-accent: var(--ui-color-primary, #2563eb);
     --ui-transfer-text: var(--ui-color-text, #0f172a);
-    --ui-transfer-muted: var(--ui-color-muted, #64748b);
+    --ui-transfer-muted: var(--ui-color-muted, #526175);
     --ui-transfer-shell-bg: transparent;
     --ui-transfer-shell-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 84%, transparent);
     --ui-transfer-shell-border: 1px solid var(--ui-transfer-shell-border-color);
@@ -193,11 +193,11 @@
   }
 
   :host([tone="success"]) {
-    --ui-transfer-accent: var(--ui-color-success, #16a34a);
+    --ui-transfer-accent: var(--ui-color-success, #15803d);
   }
 
   :host([tone="warning"]) {
-    --ui-transfer-accent: var(--ui-color-warning, #d97706);
+    --ui-transfer-accent: var(--ui-color-warning, #b45309);
   }
 
   :host([tone="danger"]) {
@@ -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

@@ -3,7 +3,7 @@ const q = `
   :host {
     --ui-transfer-accent: var(--ui-color-primary, #2563eb);
     --ui-transfer-text: var(--ui-color-text, #0f172a);
-    --ui-transfer-muted: var(--ui-color-muted, #64748b);
+    --ui-transfer-muted: var(--ui-color-muted, #526175);
     --ui-transfer-shell-bg: transparent;
     --ui-transfer-shell-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 84%, transparent);
     --ui-transfer-shell-border: 1px solid var(--ui-transfer-shell-border-color);
@@ -194,11 +194,11 @@ const q = `
   }
 
   :host([tone="success"]) {
-    --ui-transfer-accent: var(--ui-color-success, #16a34a);
+    --ui-transfer-accent: var(--ui-color-success, #15803d);
   }
 
   :host([tone="warning"]) {
-    --ui-transfer-accent: var(--ui-color-warning, #d97706);
+    --ui-transfer-accent: var(--ui-color-warning, #b45309);
   }
 
   :host([tone="danger"]) {
@@ -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/dist/tree-7qbVnpGp.js

@@ -0,0 +1,39 @@
+"use strict";const v=require("./ElementBase-EV6mVBUV.js"),p=require("./collection-qv8A8rq4.js"),f=require("./tree-item.cjs.js");function x(l,t){const e=[],i=t.getExpanded||(()=>!1),r=t.getDisabled||(()=>!1),s=(d,n,o)=>{d.forEach(a=>{const u=t.getChildren(a)||[],c={item:a,id:t.getId(a),label:t.getLabel(a),level:n,parentId:o,disabled:r(a),expanded:i(a),hasChildren:u.length>0};e.push(c),s(u,n+1,c.id)})};return s(l,1,null),e}function g(l,t){const e=[],i=t.getExpanded||(()=>!1),r=t.getDisabled||(()=>!1),s=(d,n,o)=>{d.forEach(a=>{const u=t.getChildren(a)||[],c=i(a),h={item:a,id:t.getId(a),label:t.getLabel(a),level:n,parentId:o,disabled:r(a),expanded:c,hasChildren:u.length>0};e.push(h),h.hasChildren&&c&&s(u,n+1,h.id)})};return s(l,1,null),e}function b(l,t){return l.findIndex(e=>e.id===t)}function _(l,t){const e=l[t];return e?.parentId?l.findIndex(i=>i.id===e.parentId):-1}function y(l,t,e=-1){const i=p.normalizeCollectionText(t);if(!i)return-1;for(let r=1;r<=l.length;r+=1){const s=(e+r+l.length)%l.length,d=l[s];if(!d.disabled&&p.normalizeCollectionText(d.label).startsWith(i))return s}return-1}const T=`
+  :host {
+    --ui-tree-indent: 16px;
+    --ui-tree-radius: 14px;
+    --ui-tree-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent);
+    --ui-tree-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+    --ui-tree-text: var(--ui-color-text, #0f172a);
+    --ui-tree-muted: var(--ui-color-muted, #526175);
+    display: block;
+    min-inline-size: 0;
+    color-scheme: light dark;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .tree {
+    min-inline-size: 0;
+    display: grid;
+    gap: 4px;
+    padding: 10px;
+    border: 1px solid var(--ui-tree-border);
+    border-radius: var(--ui-tree-radius);
+    background: var(--ui-tree-bg);
+    color: var(--ui-tree-text);
+  }
+
+  @media (forced-colors: active) {
+    .tree {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+    }
+  }
+`;class m extends v.ElementBase{constructor(){super(),this._observer=null,this._focusedValue=null,this._typeaheadBuffer="",this._typeaheadTimer=null,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onMutation=this._onMutation.bind(this)}static get observedAttributes(){return["value","indent-size","aria-label","aria-labelledby"]}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this._onClick),this.addEventListener("keydown",this._onKeyDown),this._observer=new MutationObserver(this._onMutation),this._observer.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["expanded","selected","disabled","label","value"]}),queueMicrotask(()=>this._syncTree())}disconnectedCallback(){this.removeEventListener("click",this._onClick),this.removeEventListener("keydown",this._onKeyDown),this._observer?.disconnect(),this._observer=null,this._typeaheadTimer!=null&&window.clearTimeout(this._typeaheadTimer),super.disconnectedCallback()}get value(){return this.getAttribute("value")||""}set value(t){t?this.setAttribute("value",t):this.removeAttribute("value")}expand(t){const e=this._findByValue(t);!e||e.childItems.length===0||(e.setAttribute("expanded",""),this._emitToggle(e,!0),this._syncTree())}collapse(t){const e=this._findByValue(t);!e||e.childItems.length===0||(e.removeAttribute("expanded"),this._emitToggle(e,!1),this._syncTree())}toggle(t){const e=this._findByValue(t);if(!e||e.childItems.length===0)return;const i=!e.hasAttribute("expanded");e.toggleAttribute("expanded",i),this._emitToggle(e,i),this._syncTree()}select(t){const e=this._findByValue(t);!e||e.hasAttribute("disabled")||(this.value=t,this._focusedValue=t,this._emitSelect(e),this._syncTree())}focusValue(t){const e=this._findByValue(t);e&&(this._focusedValue=t,this._syncTree(),e.focusRow({preventScroll:!0}))}_onMutation(){this._syncTree()}_allItems(){return Array.from(this.querySelectorAll("ui-tree-item")).filter(t=>t instanceof f.UITreeItem&&t.closest("ui-tree")===this)}_rootItems(){return Array.from(this.children).filter(t=>t instanceof f.UITreeItem)}_visibleRecords(){const t=this._rootItems();return g(t,{getId:e=>e.value,getLabel:e=>e.label,getChildren:e=>e.childItems,getExpanded:e=>e.hasAttribute("expanded"),getDisabled:e=>e.hasAttribute("disabled")}).map(e=>({...e,item:e.item}))}_findByValue(t){return this._allItems().find(e=>e.value===t)||null}_syncTree(){const t=this._allItems(),e=this._visibleRecords(),i=this.value||e.find(n=>!n.disabled)?.id||"",r=this._focusedValue&&e.some(n=>n.id===this._focusedValue)?this._focusedValue:i;this._focusedValue=r||null;const s=new Set(e.map(n=>n.id)),d=new Map(e.map(n=>[n.id,n]));t.forEach(n=>{const o=d.get(n.value);n.style.setProperty("--ui-tree-indent",this.getAttribute("indent-size")||"16px"),n.applyTreeState({level:o?.level||1,hasChildren:n.childItems.length>0,expanded:n.hasAttribute("expanded"),selected:n.value===i,active:n.value===r,hidden:!s.has(n.value)})})}_moveFocus(t){const e=this._visibleRecords();if(!e.length)return;const i=b(e,this._focusedValue||this.value||""),r=i>=0?i:-1;for(let s=1;s<=e.length;s+=1){const d=(r+t*s+e.length)%e.length,n=e[d];if(!n.disabled){this.focusValue(n.id);return}}}_emitSelect(t){this.dispatchEvent(new CustomEvent("select",{detail:{value:t.value,label:t.label},bubbles:!0,composed:!0}))}_emitToggle(t,e){this.dispatchEvent(new CustomEvent("expanded-change",{detail:{value:t.value,expanded:e},bubbles:!0,composed:!0}))}_onClick(t){const e=t.composedPath(),i=e.find(s=>s instanceof f.UITreeItem);if(!i||i.hasAttribute("disabled"))return;const r=e.find(s=>s instanceof HTMLElement&&s.getAttribute("data-action")==="toggle");if(this._focusedValue=i.value,r&&i.childItems.length>0){this.toggle(i.value);return}this.select(i.value)}_onKeyDown(t){const e=this._visibleRecords();if(!e.length)return;const i=b(e,this._focusedValue||this.value||""),r=i>=0?e[i]:e[0];if(r){if(t.key==="ArrowDown"){t.preventDefault(),this._moveFocus(1);return}if(t.key==="ArrowUp"){t.preventDefault(),this._moveFocus(-1);return}if(t.key==="Home"){t.preventDefault(),this.focusValue(e[0].id);return}if(t.key==="End"){t.preventDefault(),this.focusValue(e[e.length-1].id);return}if(t.key==="ArrowRight"){if(t.preventDefault(),r.hasChildren&&!r.expanded){this.expand(r.id);return}if(r.hasChildren&&r.expanded){const s=e[i+1];s?.parentId===r.id&&this.focusValue(s.id)}return}if(t.key==="ArrowLeft"){if(t.preventDefault(),r.hasChildren&&r.expanded){this.collapse(r.id);return}const s=_(e,i);s>=0&&this.focusValue(e[s].id);return}if(t.key==="Enter"||t.key===" "){t.preventDefault(),this.select(r.id);return}if(t.key.length===1&&/\S/.test(t.key)){this._typeaheadBuffer=`${this._typeaheadBuffer}${t.key.toLowerCase()}`.slice(0,24),this._typeaheadTimer!=null&&window.clearTimeout(this._typeaheadTimer),this._typeaheadTimer=window.setTimeout(()=>{this._typeaheadBuffer="",this._typeaheadTimer=null},420);const s=y(e,this._typeaheadBuffer,i);s>=0&&(t.preventDefault(),this.focusValue(e[s].id))}}}shouldRenderOnAttributeChange(t){return t==="indent-size"||t==="aria-label"||t==="aria-labelledby"}render(){const t=(this.getAttribute("aria-label")||"").trim(),e=(this.getAttribute("aria-labelledby")||"").trim(),i=s=>s.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;"),r=(t?` aria-label="${i(t)}"`:"")+(e?` aria-labelledby="${i(e)}"`:"");this.setContent(`
+      <style>${T}</style>
+      <div class="tree" part="tree" role="tree"${r}>
+        <slot></slot>
+      </div>
+    `),queueMicrotask(()=>this._syncTree())}}typeof customElements<"u"&&!customElements.get("ui-tree")&&customElements.define("ui-tree",m);exports.UITree=m;exports.findParentTreeRecordIndex=_;exports.findTreeRecordIndexById=b;exports.findTreeTypeaheadMatch=y;exports.flattenTree=x;exports.flattenVisibleTree=g;