@editora/ui-core 0.1.19 → 0.1.20

package/dist/transfer-list.esm.js

@@ -1,4 +1,4 @@
-import { E as D } from "./ElementBase-909688f3.mjs";
+import { E as D } from "./ElementBase-YlTLMsGk.mjs";
 const q = `
   :host {
     --ui-transfer-accent: var(--ui-color-primary, #2563eb);
@@ -661,69 +661,63 @@ const q = `
 function l(n) {
   return n.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function y(n) {
-  if (!n)
-    return [];
+function x(n) {
+  if (!n) return [];
   try {
-    const r = JSON.parse(n);
-    if (!Array.isArray(r))
-      return [];
+    const e = JSON.parse(n);
+    if (!Array.isArray(e)) return [];
     const t = [];
-    return r.forEach((e) => {
-      if (!e || typeof e != "object")
-        return;
+    return e.forEach((r) => {
+      if (!r || typeof r != "object") return;
       const a = {
-        value: String(e.value ?? ""),
-        label: String(e.label ?? e.value ?? ""),
-        disabled: !!e.disabled
+        value: String(r.value ?? ""),
+        label: String(r.label ?? r.value ?? ""),
+        disabled: !!r.disabled
       };
-      e.description && (a.description = String(e.description)), a.value && t.push(a);
+      r.description && (a.description = String(r.description)), a.value && t.push(a);
     }), t;
   } catch {
     return [];
   }
 }
-function _(n) {
-  if (!n)
-    return [];
+function z(n) {
+  if (!n) return [];
   try {
-    const r = JSON.parse(n);
-    return Array.isArray(r) ? r.map((t) => String(t)) : [];
+    const e = JSON.parse(n);
+    return Array.isArray(e) ? e.map((t) => String(t)) : [];
   } catch {
     return [];
   }
 }
-function k(n, r) {
-  return new Set(Array.from(n).filter((t) => r.has(t)));
+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 h(n, r) {
-  return n == null ? r : n === "" || n === "true" || n === "1" || n === "yes" ? !0 : n === "false" || n === "0" || n === "no" ? !1 : r;
+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 w(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 {
   constructor() {
-    super(...arguments), this._options = [], this._value = [], this._selectedAvailable = /* @__PURE__ */ new Set(), this._selectedChosen = /* @__PURE__ */ new Set(), this._formUnregister = null, this._suppressValueAttr = !1, this._delegatedListenersAttached = !1, this._handleRootClick = (r) => {
-      const t = r.target;
-      if (!t)
-        return;
-      const e = t.closest(".move-btn");
-      if (e && this.root.contains(e)) {
-        this._move(e.getAttribute("data-action"));
+    super(...arguments), this._options = [], this._value = [], this._selectedAvailable = /* @__PURE__ */ new Set(), this._selectedChosen = /* @__PURE__ */ 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 = (r) => {
-      const t = r.target;
-      if (!t)
-        return;
-      const e = t.closest(".item");
-      e && this.root.contains(e) && this._onItemKeyDown(r, e);
+    }, 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() {
@@ -755,8 +749,8 @@ class U extends D {
   get value() {
     return [...this._value];
   }
-  set value(r) {
-    this._applyValue(r, "api");
+  set value(e) {
+    this._applyValue(e, "api");
   }
   connectedCallback() {
     super.connectedCallback(), this._attachDelegatedListeners(), this._registerWithForm();
@@ -764,14 +758,14 @@ class U extends D {
   disconnectedCallback() {
     this._formUnregister && this._formUnregister(), this._detachDelegatedListeners(), super.disconnectedCallback();
   }
-  attributeChangedCallback(r, t, e) {
-    t !== e && (r === "options" && (this._options = y(e)), r === "value" && !this._suppressValueAttr && (this._value = _(e)), r === "name" && this.isConnected && this._registerWithForm(), r === "disabled" && (this._selectedAvailable.clear(), this._selectedChosen.clear()), this.isConnected && this.requestRender());
+  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 = y(this.getAttribute("options"))), !this._value.length && this.getAttribute("value") && (this._value = _(this.getAttribute("value")));
-    const r = new Set(this._value), t = this._options.filter((i) => !r.has(i.value)), e = this._options.filter((i) => r.has(i.value)), a = new Set(t.map((i) => i.value)), o = new Set(e.map((i) => i.value));
-    this._selectedAvailable = k(this._selectedAvailable, a), this._selectedChosen = k(this._selectedChosen, o);
-    const s = this.getAttribute("label") || "", c = this.getAttribute("description") || "", u = this.getAttribute("error") || "", d = this.getAttribute("available-label") || "Available", f = 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", p = h(this.getAttribute("show-action-labels"), !0), b = h(this.getAttribute("show-action-counts"), !0), m = h(this.getAttribute("show-panel-counts"), !0), g = this.getAttribute("radius"), E = g ? ` style="--ui-transfer-panel-radius:${l(g)};"` : "", v = () => C === "none" ? "" : '<span class="indicator" part="indicator" aria-hidden="true"><span class="indicator-box"><span class="indicator-mark">✓</span></span></span>', x = (i) => p ? `<span class="move-btn-text">${l(i)}</span>` : "", z = (i) => b ? `<span class="move-btn-count">${i}</span>` : "", I = t.length ? t.map(
+    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(
       (i) => `<div
               class="item"
               part="item available-item"
@@ -783,13 +777,13 @@ class U extends D {
               aria-disabled="${i.disabled ? "true" : "false"}"
               tabindex="${i.disabled ? "-1" : "0"}"
             >
-              ${v()}
+              ${m()}
               <div class="item-copy">
                 <span class="item-title">${l(i.label)}</span>
                 ${i.description ? `<span class="item-description">${l(i.description)}</span>` : ""}
               </div>
             </div>`
-    ).join("") : `<div class="empty" part="empty">${l(A)}</div>`, V = e.length ? e.map(
+    ).join("") : `<div class="empty" part="empty">${l(A)}</div>`, V = r.length ? r.map(
       (i) => `<div
               class="item"
               part="item selected-item"
@@ -801,7 +795,7 @@ class U extends D {
               aria-disabled="${i.disabled ? "true" : "false"}"
               tabindex="${i.disabled ? "-1" : "0"}"
             >
-              ${v()}
+              ${m()}
               <div class="item-copy">
                 <span class="item-title">${l(i.label)}</span>
                 ${i.description ? `<span class="item-description">${l(i.description)}</span>` : ""}
@@ -817,8 +811,8 @@ class U extends D {
           <section class="panel" part="panel panel-available">
             <div class="panel-header" part="panel-header">
               <div class="panel-heading">
-                <div class="panel-title">${l(d)}</div>
-                ${m ? `<span class="panel-count" part="count">${t.length}</span>` : ""}
+                <div class="panel-title">${l(k)}</div>
+                ${b ? `<span class="panel-count" part="count">${t.length}</span>` : ""}
               </div>
               <div class="panel-help">Choose entries to move into the selected list.</div>
             </div>
@@ -826,79 +820,73 @@ class U extends D {
             <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="${!p && !b}" data-action="add" type="button"${this._selectedAvailable.size ? "" : " disabled"}>
-              <span class="move-btn-icon" aria-hidden="true">${w("right")}</span>
-              ${x(S)}
-              ${z(this._selectedAvailable.size || 0)}
+            <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>
-            <button class="move-btn" part="action-button action-remove" data-compact="${!p && !b}" data-action="remove" type="button"${this._selectedChosen.size ? "" : " disabled"}>
-              <span class="move-btn-icon" aria-hidden="true">${w("left")}</span>
-              ${x(L)}
-              ${z(this._selectedChosen.size || 0)}
+            <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>
           </div>
           <section class="panel" part="panel panel-selected">
             <div class="panel-header" part="panel-header">
               <div class="panel-heading">
-                <div class="panel-title">${l(f)}</div>
-                ${m ? `<span class="panel-count" part="count">${e.length}</span>` : ""}
+                <div class="panel-title">${l(w)}</div>
+                ${b ? `<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="summary" part="summary">${e.length} selected</div>
+            <div class="summary" part="summary">${r.length} selected</div>
           </section>
         </div>
         ${u ? `<p class="error" part="error">${l(u)}</p>` : ""}
       </div>
     `);
   }
-  _toggleItem(r) {
-    if (this.hasAttribute("disabled"))
-      return;
-    const t = r.getAttribute("data-side"), e = r.getAttribute("data-value") || "";
-    if (!e)
-      return;
+  _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(e) ? a.delete(e) : a.add(e), r.setAttribute("data-selected", a.has(e) ? "true" : "false"), r.setAttribute("aria-selected", a.has(e) ? "true" : "false"), this._syncActionButtons();
+    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(r, t) {
-    var u, d, f;
-    const e = t.getAttribute("data-side");
-    if (!e)
-      return;
-    if (r.key === "Enter" || r.key === " ") {
-      r.preventDefault(), this._toggleItem(t);
+  _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(r.key))
-      return;
-    r.preventDefault();
-    const a = this.root.querySelector(`[data-list="${e}"]`), o = Array.from((a == null ? void 0 : a.querySelectorAll('.item[tabindex="0"]')) || []);
-    if (!o.length)
-      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 (r.key === "Home") {
-      (u = o[0]) == null || u.focus();
+    if (e.key === "Home") {
+      o[0]?.focus();
       return;
     }
-    if (r.key === "End") {
-      (d = o[o.length - 1]) == null || d.focus();
+    if (e.key === "End") {
+      o[o.length - 1]?.focus();
       return;
     }
-    const c = r.key === "ArrowDown" ? Math.min(o.length - 1, s + 1) : Math.max(0, s - 1);
-    (f = o[c]) == null || f.focus();
+    const c = e.key === "ArrowDown" ? Math.min(o.length - 1, s + 1) : Math.max(0, s - 1);
+    o[c]?.focus();
   }
-  _move(r) {
+  _move(e) {
     if (!this.hasAttribute("disabled")) {
-      if (r === "add") {
-        const t = [...this._value, ...Array.from(this._selectedAvailable).filter((e) => !this._value.includes(e))];
+      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 (r === "remove") {
-        const t = new Set(this._selectedChosen), e = this._value.filter((a) => !t.has(a));
-        this._selectedChosen.clear(), this._applyValue(e, "transfer-left");
+      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");
       }
     }
   }
@@ -908,8 +896,8 @@ class U extends D {
   _detachDelegatedListeners() {
     this._delegatedListenersAttached && (this.root.removeEventListener("click", this._handleRootClick), this.root.removeEventListener("keydown", this._handleRootKeyDown), this._delegatedListenersAttached = !1);
   }
-  _applyValue(r, t) {
-    const e = new Set(this._options.map((s) => s.value)), a = Array.from(new Set(r.filter((s) => s && (e.size === 0 || e.has(s))))), o = [...this._value];
+  _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");
@@ -930,33 +918,32 @@ class U extends D {
     );
   }
   _syncActionButtons() {
-    const r = this.root.querySelector('[data-action="add"]'), t = this.root.querySelector('[data-action="remove"]');
-    if (r) {
-      r.disabled = this._selectedAvailable.size === 0;
-      const e = r.querySelector(".move-btn-count");
-      e && (e.textContent = String(this._selectedAvailable.size));
+    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 e = t.querySelector(".move-btn-count");
-      e && (e.textContent = String(this._selectedChosen.size));
+      const r = t.querySelector(".move-btn-count");
+      r && (r.textContent = String(this._selectedChosen.size));
     }
   }
   _registerWithForm() {
-    var r;
     this._formUnregister && (this._formUnregister(), this._formUnregister = null);
     try {
-      const e = this.getRootNode().host, o = ((r = e == null ? void 0 : e.closest) == null ? void 0 : r.call(e, "ui-form")) || null || this.closest("ui-form"), s = this.getAttribute("name");
-      o && typeof o.registerField == "function" && s && (this._formUnregister = o.registerField(s, {
-        name: s,
+      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: (c) => {
-          const u = Array.isArray(c) ? c.map((d) => String(d)) : [];
-          this._applyValue(u, "api");
+        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: (c) => {
-          c ? (this.setAttribute("error", c), this.setAttribute("invalid", "")) : (this.removeAttribute("error"), this.removeAttribute("invalid")), this.requestRender();
+        setError: (s) => {
+          s ? (this.setAttribute("error", s), this.setAttribute("invalid", "")) : (this.removeAttribute("error"), this.removeAttribute("invalid")), this.requestRender();
         }
       }));
     } catch {

package/dist/{tree-dcd74a4a.mjs → tree-B3kE8ESs.mjs}

@@ -1,56 +1,55 @@
-import { E as g } from "./ElementBase-909688f3.mjs";
-import { n as b } from "./collection-a1aac0c6.mjs";
+import { E as g } from "./ElementBase-YlTLMsGk.mjs";
+import { n as b } from "./collection-C7URGjEI.mjs";
 import { UITreeItem as f } from "./tree-item.esm.js";
-function C(a, t) {
-  const e = [], i = t.getExpanded || (() => !1), r = t.getDisabled || (() => !1), s = (o, d, n) => {
-    o.forEach((l) => {
-      const u = t.getChildren(l) || [], c = {
-        item: l,
-        id: t.getId(l),
-        label: t.getLabel(l),
-        level: d,
-        parentId: n,
-        disabled: r(l),
-        expanded: i(l),
+function C(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, d + 1, c.id);
+      e.push(c), s(u, n + 1, c.id);
     });
   };
-  return s(a, 1, null), e;
+  return s(l, 1, null), e;
 }
-function _(a, t) {
-  const e = [], i = t.getExpanded || (() => !1), r = t.getDisabled || (() => !1), s = (o, d, n) => {
-    o.forEach((l) => {
-      const u = t.getChildren(l) || [], c = i(l), h = {
-        item: l,
-        id: t.getId(l),
-        label: t.getLabel(l),
-        level: d,
-        parentId: n,
-        disabled: r(l),
+function _(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, d + 1, h.id);
+      e.push(h), h.hasChildren && c && s(u, n + 1, h.id);
     });
   };
-  return s(a, 1, null), e;
+  return s(l, 1, null), e;
 }
-function p(a, t) {
-  return a.findIndex((e) => e.id === t);
+function p(l, t) {
+  return l.findIndex((e) => e.id === t);
 }
-function m(a, t) {
-  const e = a[t];
-  return e != null && e.parentId ? a.findIndex((i) => i.id === e.parentId) : -1;
+function m(l, t) {
+  const e = l[t];
+  return e?.parentId ? l.findIndex((i) => i.id === e.parentId) : -1;
 }
-function y(a, t, e = -1) {
+function y(l, t, e = -1) {
   const i = b(t);
-  if (!i)
-    return -1;
-  for (let r = 1; r <= a.length; r += 1) {
-    const s = (e + r + a.length) % a.length, o = a[s];
-    if (!o.disabled && b(o.label).startsWith(i))
+  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 && b(d.label).startsWith(i))
       return s;
   }
   return -1;
@@ -100,8 +99,7 @@ class x extends g {
     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() {
-    var t;
-    this.removeEventListener("click", this._onClick), this.removeEventListener("keydown", this._onKeyDown), (t = this._observer) == null || t.disconnect(), this._observer = null, this._typeaheadTimer != null && window.clearTimeout(this._typeaheadTimer), super.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") || "";
@@ -119,8 +117,7 @@ class x extends g {
   }
   toggle(t) {
     const e = this._findByValue(t);
-    if (!e || e.childItems.length === 0)
-      return;
+    if (!e || e.childItems.length === 0) return;
     const i = !e.hasAttribute("expanded");
     e.toggleAttribute("expanded", i), this._emitToggle(e, i), this._syncTree();
   }
@@ -158,14 +155,13 @@ class x extends g {
     return this._allItems().find((e) => e.value === t) || null;
   }
   _syncTree() {
-    var d;
-    const t = this._allItems(), e = this._visibleRecords(), i = this.value || ((d = e.find((n) => !n.disabled)) == null ? void 0 : d.id) || "", r = this._focusedValue && e.some((n) => n.id === this._focusedValue) ? this._focusedValue : i;
+    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)), o = new Map(e.map((n) => [n.id, n]));
+    const s = new Set(e.map((n) => n.id)), d = new Map(e.map((n) => [n.id, n]));
     t.forEach((n) => {
-      const l = o.get(n.value);
+      const o = d.get(n.value);
       n.style.setProperty("--ui-tree-indent", this.getAttribute("indent-size") || "16px"), n.applyTreeState({
-        level: (l == null ? void 0 : l.level) || 1,
+        level: o?.level || 1,
         hasChildren: n.childItems.length > 0,
         expanded: n.hasAttribute("expanded"),
         selected: n.value === i,
@@ -176,13 +172,12 @@ class x extends g {
   }
   _moveFocus(t) {
     const e = this._visibleRecords();
-    if (!e.length)
-      return;
+    if (!e.length) return;
     const i = p(e, this._focusedValue || this.value || ""), r = i >= 0 ? i : -1;
     for (let s = 1; s <= e.length; s += 1) {
-      const o = (r + t * s + e.length) % e.length, d = e[o];
-      if (!d.disabled) {
-        this.focusValue(d.id);
+      const d = (r + t * s + e.length) % e.length, n = e[d];
+      if (!n.disabled) {
+        this.focusValue(n.id);
         return;
       }
     }
@@ -207,8 +202,7 @@ class x extends g {
   }
   _onClick(t) {
     const e = t.composedPath(), i = e.find((s) => s instanceof f);
-    if (!i || i.hasAttribute("disabled"))
-      return;
+    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);
@@ -218,8 +212,7 @@ class x extends g {
   }
   _onKeyDown(t) {
     const e = this._visibleRecords();
-    if (!e.length)
-      return;
+    if (!e.length) return;
     const i = p(e, this._focusedValue || this.value || ""), r = i >= 0 ? e[i] : e[0];
     if (r) {
       if (t.key === "ArrowDown") {
@@ -245,7 +238,7 @@ class x extends g {
         }
         if (r.hasChildren && r.expanded) {
           const s = e[i + 1];
-          (s == null ? void 0 : s.parentId) === r.id && this.focusValue(s.id);
+          s?.parentId === r.id && this.focusValue(s.id);
         }
         return;
       }
@@ -286,9 +279,9 @@ class x extends g {
 typeof customElements < "u" && !customElements.get("ui-tree") && customElements.define("ui-tree", x);
 export {
   x as U,
-  _ as a,
-  p as b,
-  m as c,
-  y as d,
-  C as f
+  p as a,
+  y as b,
+  C as c,
+  _ as d,
+  m as f
 };

package/dist/tree-Dx_kv_ih.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, #64748b);
+    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"]}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"}render(){this.setContent(`
+      <style>${T}</style>
+      <div class="tree" part="tree" role="tree">
+        <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;

package/dist/tree-item.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("./ElementBase-1b301e7f.js"),i=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("./ElementBase-EV6mVBUV.js"),i=`
   :host {
     --ui-tree-indent: 16px;
     --ui-tree-level: 1;
@@ -89,7 +89,7 @@
       transition: none !important;
     }
   }
-`;class t extends r.ElementBase{constructor(){super(...arguments),this._row=null,this._children=null,this._twist=null}static get observedAttributes(){return["expanded","selected","disabled","hidden"]}get value(){return this.getAttribute("value")||this.id||""}get label(){var e;return this.getAttribute("label")||((e=this.textContent)==null?void 0:e.trim())||""}get childItems(){return Array.from(this.children).filter(e=>e instanceof t)}focusRow(e){if(this._row)try{this._row.focus(e)}catch{this._row.focus()}}applyTreeState(e){this.hidden=e.hidden,this.style.setProperty("--ui-tree-level",String(e.level)),this.toggleAttribute("expanded",e.expanded),this.toggleAttribute("selected",e.selected),!(!this._row||!this._children||!this._twist)&&(this._row.tabIndex=e.active?0:-1,this._row.setAttribute("aria-level",String(e.level)),this._row.setAttribute("aria-selected",e.selected?"true":"false"),this._row.setAttribute("aria-expanded",e.hasChildren?String(e.expanded):"false"),this._twist.setAttribute("data-has-children",e.hasChildren?"true":"false"),this._children.hidden=!e.hasChildren||!e.expanded)}shouldRenderOnAttributeChange(){return!1}render(){this.setContent(`
+`;class t extends r.ElementBase{constructor(){super(...arguments),this._row=null,this._children=null,this._twist=null}static get observedAttributes(){return["expanded","selected","disabled","hidden"]}get value(){return this.getAttribute("value")||this.id||""}get label(){return this.getAttribute("label")||this.textContent?.trim()||""}get childItems(){return Array.from(this.children).filter(e=>e instanceof t)}focusRow(e){if(this._row)try{this._row.focus(e)}catch{this._row.focus()}}applyTreeState(e){this.hidden=e.hidden,this.style.setProperty("--ui-tree-level",String(e.level)),this.toggleAttribute("expanded",e.expanded),this.toggleAttribute("selected",e.selected),!(!this._row||!this._children||!this._twist)&&(this._row.tabIndex=e.active?0:-1,this._row.setAttribute("aria-level",String(e.level)),this._row.setAttribute("aria-selected",e.selected?"true":"false"),this._row.setAttribute("aria-expanded",e.hasChildren?String(e.expanded):"false"),this._twist.setAttribute("data-has-children",e.hasChildren?"true":"false"),this._children.hidden=!e.hasChildren||!e.expanded)}shouldRenderOnAttributeChange(){return!1}render(){this.setContent(`
       <style>${i}</style>
       <div class="row" part="row" role="treeitem" tabindex="-1">
         <span class="twist" part="twist" data-action="toggle">▸</span>