@editora/ui-core 0.1.9 → 0.1.12

package/dist/tree-0a7a8d05.js

@@ -0,0 +1,39 @@
+"use strict";const v=require("./ElementBase-1b301e7f.js"),p=require("./collection-a2969ad2.js"),f=require("./tree-item.cjs.js");function x(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),hasChildren:u.length>0};e.push(c),s(u,d+1,c.id)})};return s(a,1,null),e}function g(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),expanded:c,hasChildren:u.length>0};e.push(h),h.hasChildren&&c&&s(u,d+1,h.id)})};return s(a,1,null),e}function b(a,t){return a.findIndex(e=>e.id===t)}function _(a,t){const e=a[t];return e!=null&&e.parentId?a.findIndex(i=>i.id===e.parentId):-1}function y(a,t,e=-1){const i=p.normalizeCollectionText(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&&p.normalizeCollectionText(o.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(){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()}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(){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;this._focusedValue=r||null;const s=new Set(e.map(n=>n.id)),o=new Map(e.map(n=>[n.id,n]));t.forEach(n=>{const l=o.get(n.value);n.style.setProperty("--ui-tree-indent",this.getAttribute("indent-size")||"16px"),n.applyTreeState({level:(l==null?void 0:l.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 o=(r+t*s+e.length)%e.length,d=e[o];if(!d.disabled){this.focusValue(d.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==null?void 0: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-dcd74a4a.mjs

@@ -0,0 +1,294 @@
+import { E as g } from "./ElementBase-909688f3.mjs";
+import { n as b } from "./collection-a1aac0c6.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),
+        hasChildren: u.length > 0
+      };
+      e.push(c), s(u, d + 1, c.id);
+    });
+  };
+  return s(a, 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),
+        expanded: c,
+        hasChildren: u.length > 0
+      };
+      e.push(h), h.hasChildren && c && s(u, d + 1, h.id);
+    });
+  };
+  return s(a, 1, null), e;
+}
+function p(a, t) {
+  return a.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 y(a, 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))
+      return s;
+  }
+  return -1;
+}
+const v = `
+  :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 x extends g {
+  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() {
+    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();
+  }
+  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 && t.closest("ui-tree") === this);
+  }
+  _rootItems() {
+    return Array.from(this.children).filter((t) => t instanceof f);
+  }
+  _visibleRecords() {
+    const t = this._rootItems();
+    return _(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() {
+    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;
+    this._focusedValue = r || null;
+    const s = new Set(e.map((n) => n.id)), o = new Map(e.map((n) => [n.id, n]));
+    t.forEach((n) => {
+      const l = o.get(n.value);
+      n.style.setProperty("--ui-tree-indent", this.getAttribute("indent-size") || "16px"), n.applyTreeState({
+        level: (l == null ? void 0 : l.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 = 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);
+        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);
+    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 = p(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 == null ? void 0 : 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 = m(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>${v}</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", x);
+export {
+  x as U,
+  _ as a,
+  p as b,
+  m as c,
+  y as d,
+  C as f
+};

package/dist/tree-item.cjs.js

@@ -0,0 +1,103 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("./ElementBase-1b301e7f.js"),i=`
+  :host {
+    --ui-tree-indent: 16px;
+    --ui-tree-level: 1;
+    display: block;
+    min-inline-size: 0;
+    color: inherit;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  .row {
+    min-inline-size: 0;
+    min-block-size: 34px;
+    display: grid;
+    grid-template-columns: auto auto minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 10px 6px calc(10px + (var(--ui-tree-level) - 1) * var(--ui-tree-indent));
+    border-radius: 10px;
+    cursor: default;
+    outline: none;
+    user-select: none;
+    color: inherit;
+    transition: background-color 140ms ease, color 140ms ease;
+  }
+
+  .row:hover {
+    background: color-mix(in srgb, var(--ui-color-primary, #2563eb) 8%, transparent);
+  }
+
+  .row:focus-visible {
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-color-focus-ring, #2563eb) 28%, transparent);
+  }
+
+  :host([selected]) .row {
+    background: color-mix(in srgb, var(--ui-color-primary, #2563eb) 14%, transparent);
+    color: color-mix(in srgb, var(--ui-color-primary, #2563eb) 82%, #0f172a 18%);
+    font-weight: 600;
+  }
+
+  :host([disabled]) .row {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .twist {
+    inline-size: 18px;
+    block-size: 18px;
+    display: inline-grid;
+    place-items: center;
+    border-radius: 6px;
+    color: color-mix(in srgb, currentColor 66%, transparent);
+    transition: transform 140ms ease, background-color 140ms ease;
+  }
+
+  .twist[data-has-children="false"] {
+    visibility: hidden;
+  }
+
+  :host([expanded]) .twist {
+    transform: rotate(90deg);
+  }
+
+  .prefix,
+  .suffix {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: 0;
+  }
+
+  .label {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .children[hidden] {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .row,
+    .twist {
+      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(`
+      <style>${i}</style>
+      <div class="row" part="row" role="treeitem" tabindex="-1">
+        <span class="twist" part="twist" data-action="toggle">▸</span>
+        <span class="prefix" part="prefix"><slot name="prefix"></slot></span>
+        <span class="label" part="label"><slot name="label">${this.label}</slot></span>
+        <span class="suffix" part="suffix"><slot name="suffix"></slot></span>
+      </div>
+      <div class="children" part="children" role="group">
+        <slot></slot>
+      </div>
+    `),this._row=this.root.querySelector(".row"),this._children=this.root.querySelector(".children"),this._twist=this.root.querySelector(".twist")}}typeof customElements<"u"&&!customElements.get("ui-tree-item")&&customElements.define("ui-tree-item",t);exports.UITreeItem=t;

package/dist/tree-item.esm.js

@@ -0,0 +1,143 @@
+import { E as r } from "./ElementBase-909688f3.mjs";
+const i = `
+  :host {
+    --ui-tree-indent: 16px;
+    --ui-tree-level: 1;
+    display: block;
+    min-inline-size: 0;
+    color: inherit;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  .row {
+    min-inline-size: 0;
+    min-block-size: 34px;
+    display: grid;
+    grid-template-columns: auto auto minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 10px 6px calc(10px + (var(--ui-tree-level) - 1) * var(--ui-tree-indent));
+    border-radius: 10px;
+    cursor: default;
+    outline: none;
+    user-select: none;
+    color: inherit;
+    transition: background-color 140ms ease, color 140ms ease;
+  }
+
+  .row:hover {
+    background: color-mix(in srgb, var(--ui-color-primary, #2563eb) 8%, transparent);
+  }
+
+  .row:focus-visible {
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-color-focus-ring, #2563eb) 28%, transparent);
+  }
+
+  :host([selected]) .row {
+    background: color-mix(in srgb, var(--ui-color-primary, #2563eb) 14%, transparent);
+    color: color-mix(in srgb, var(--ui-color-primary, #2563eb) 82%, #0f172a 18%);
+    font-weight: 600;
+  }
+
+  :host([disabled]) .row {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .twist {
+    inline-size: 18px;
+    block-size: 18px;
+    display: inline-grid;
+    place-items: center;
+    border-radius: 6px;
+    color: color-mix(in srgb, currentColor 66%, transparent);
+    transition: transform 140ms ease, background-color 140ms ease;
+  }
+
+  .twist[data-has-children="false"] {
+    visibility: hidden;
+  }
+
+  :host([expanded]) .twist {
+    transform: rotate(90deg);
+  }
+
+  .prefix,
+  .suffix {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: 0;
+  }
+
+  .label {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .children[hidden] {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .row,
+    .twist {
+      transition: none !important;
+    }
+  }
+`;
+class t extends r {
+  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(`
+      <style>${i}</style>
+      <div class="row" part="row" role="treeitem" tabindex="-1">
+        <span class="twist" part="twist" data-action="toggle">▸</span>
+        <span class="prefix" part="prefix"><slot name="prefix"></slot></span>
+        <span class="label" part="label"><slot name="label">${this.label}</slot></span>
+        <span class="suffix" part="suffix"><slot name="suffix"></slot></span>
+      </div>
+      <div class="children" part="children" role="group">
+        <slot></slot>
+      </div>
+    `), this._row = this.root.querySelector(".row"), this._children = this.root.querySelector(".children"), this._twist = this.root.querySelector(".twist");
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-tree-item") && customElements.define("ui-tree-item", t);
+export {
+  t as UITreeItem
+};

package/dist/tree.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./tree-0a7a8d05.js");require("./ElementBase-1b301e7f.js");require("./collection-a2969ad2.js");require("./tree-item.cjs.js");exports.UITree=e.UITree;

package/dist/tree.esm.js

@@ -0,0 +1,7 @@
+import { U as e } from "./tree-dcd74a4a.mjs";
+import "./ElementBase-909688f3.mjs";
+import "./collection-a1aac0c6.mjs";
+import "./tree-item.esm.js";
+export {
+  e as UITree
+};

package/dist/visually-hidden.cjs.js

@@ -0,0 +1,42 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("./ElementBase-1b301e7f.js"),a=`
+  :host {
+    display: contents;
+    color-scheme: light dark;
+    --ui-visually-hidden-color: var(--ui-color-text, inherit);
+    color: var(--ui-visually-hidden-color);
+  }
+  .vh {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0,0,0,0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+    background: transparent !important;
+    color: inherit !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .vh {
+      scroll-behavior: auto;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      --ui-visually-hidden-color: var(--ui-color-text, inherit);
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-visually-hidden-color: CanvasText;
+    }
+  }
+`;class e extends r.ElementBase{constructor(){super(),this._headless=!1}static get observedAttributes(){return["headless"]}attributeChangedCallback(t,s,i){s!==i&&t==="headless"&&(this._headless=this.hasAttribute("headless"),this.requestRender())}connectedCallback(){this._headless=this.hasAttribute("headless"),super.connectedCallback()}render(){if(this._headless){this.setContent("");return}this.setContent(`
+      <style>${a}</style>
+      <span class="vh" aria-hidden="false" tabindex="-1"><slot></slot></span>
+    `)}}typeof customElements<"u"&&!customElements.get("ui-visually-hidden")&&customElements.define("ui-visually-hidden",e);exports.UIVisuallyHidden=e;