@orangelogic/design-system 2.199.0 → 2.201.0

package/library/chunks/{tree-item.Dtrk65zS.js → tree.CmEdKtzK.js}

@@ -1,22 +1,22 @@
-import { n as l, C as F } from "./lib-cortex-element.CVMmyPMC.js";
+import { C as F, n as l } from "./lib-cortex-element.CVMmyPMC.js";
 import { c as O } from "./component.styles.CRO4Odto.js";
-import { s as L, a as D, b as $ } from "./event.BeKOsirN.js";
 import { c as U } from "./custom-element.L4WJXn1j.js";
 import { L as N } from "./i18n.DbXTTLXx.js";
+import { c as X } from "./math.DuKzLacZ.js";
 import { w as b } from "./watch.DJF5K-8U.js";
 import { i as R, x as m, E } from "./lit-element.jLBm65_O.js";
 import { r as g } from "./state.CSDxrqLd.js";
 import { e as f } from "./query.BBf1UFkC.js";
+import { s as L, a as D, b as $ } from "./event.BeKOsirN.js";
 import { e as C } from "./class-map.BiVq-cVR.js";
 import { o as _ } from "./if-defined.BRoBj_Rp.js";
-import { l as X } from "./live.DCegntDo.js";
+import { l as j } from "./live.DCegntDo.js";
 import { n as y } from "./when.Dr1es41R.js";
 import { g as z, s as G } from "./animation-registry.HmpwNuGH.js";
-import j from "../components/checkbox.js";
-import { C as K } from "./icon.CpHbi8tH.js";
-import V from "../components/line-clamp.js";
-import W from "../components/spinner.js";
-import { c as Y } from "./math.DuKzLacZ.js";
+import K from "../components/checkbox.js";
+import { C as V } from "./icon.CpHbi8tH.js";
+import W from "../components/line-clamp.js";
+import Y from "../components/spinner.js";
 import { i as J } from "./browser.BHOCIF_A.js";
 import { S as Q } from "./sortable.esm.oSzf6C5Q.js";
 import { v as ee } from "./v4.CKZ6klMF.js";
@@ -29,8 +29,8 @@ function te(e, t, i) {
     a && clearTimeout(a), a = window.setTimeout(d, t);
   };
 }
-const I = "tree-sortable", w = 0.2, P = (e) => e == null;
-function ie() {
+const ie = R`:host{--selected-color:var(--cx-color-primary-600);--selected-background-color:var(--cx-color-primary-50);--hover-background-color:var(--cx-menu-item-background-color-hover);--active-background-color:var(--cx-color-neutral-200);--item-padding:var(--cx-spacing-2x-small) var(--cx-spacing-x-small);outline:0;display:block}:host(:focus-visible) .tree-item{outline:var(--cx-focus-ring);outline-offset:calc(-1 * var(--cx-focus-ring-width))}[hidden]{display:none!important}slot:not([name])::slotted(cx-icon){margin-inline-end:var(--cx-spacing-x-small)}.tree-item{color:var(--cx-color-neutral-900);cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:stretch;display:flex;position:relative}.tree-item__checkbox{margin-inline-end:var(--cx-spacing-x-small)}.tree-item__expand-button,.tree-item__checkbox,.tree-item__label{font-family:var(--cx-font-sans);font-size:var(--cx-tree-item-font-size,var(--cx-font-size-small));font-weight:var(--cx-tree-item-font-weight,var(--cx-font-weight-medium));line-height:var(--cx-tree-item-line-height,var(--cx-line-height-large));letter-spacing:var(--cx-tree-item-letter-spacing,var(--cx-letter-spacing-normal))}.tree-item__checkbox::part(base){align-items:center;display:flex}.tree-item__checkbox::part(label){margin-inline-start:0}.tree-item__indentation{flex-shrink:0;width:1em;display:block}.tree-item__expand-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tree-item__expand-button{box-sizing:content-box;color:var(--cx-color-neutral-500);cursor:pointer;min-width:max(1em,1rem);min-height:max(1em,1rem);transition:var(--cx-transition-medium) rotate ease;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.tree-item--expanded .tree-item__expand-button{rotate:90deg}.tree-item--expanded.tree-item--rtl .tree-item__expand-button{rotate:-90deg}.tree-item--expanded slot[name=expand-icon],.tree-item:not(.tree-item--expanded) slot[name=collapse-icon]{display:none}:host(:not([aria-disabled=true])) .tree-item--selected .tree-item__item .tree-item__expand-icon-slot{color:var(--selected-color)}.tree-item:not(.tree-item--has-expand-button) .tree-item__expand-icon-slot{visibility:hidden;opacity:0;pointer-events:none}.tree-item__expand-button--visible{cursor:pointer}.tree-item__item{border-radius:var(--cx-border-radius-large);padding:var(--item-padding,var(--cx-spacing-x-small) var(--cx-spacing-small));transition:var(--cx-transition-x-fast) background-color ease;align-items:center;display:flex}.tree-item__item:hover{background-color:var(--hover-background-color)}.tree-item__item:active{background-color:var(--active-background-color)}.tree-item--disabled .tree-item__item{opacity:.5;cursor:default;outline:none}:host(:not([aria-disabled=true])) .tree-item--selected .tree-item__item{background-color:var(--selected-background-color);color:var(--selected-color)}:host(:not([aria-disabled=true])) .tree-item__expand-button{color:var(--cx-color-neutral)}:host(:not([aria-disabled=true]):not([variant=text])) .tree-item--selected,:host(:not([aria-disabled=true]):not([variant=text])) .tree-item--selected .tree-item__expand-button,:host(:not([aria-disabled=true]):not([variant=text])) .tree-item--selected .tree-item__actions::slotted(cx-icon-button){color:var(--cx-color-neutral-0)}:host(:not([aria-disabled=true]):not([variant=text])) .tree-item--selected .tree-item__actions::slotted(cx-icon-button){--hover-background-color:var(--cx-color-neutral-0)}.tree-item__label{align-items:center;display:flex}.tree-item__actions{font-size:var(--cx-font-size-medium);align-items:center;width:fit-content;margin-inline-start:auto;display:flex}.tree-item__actions::slotted(*){visibility:hidden;opacity:0;transition:var(--cx-transition-x-fast) visibility, var(--cx-transition-x-fast) opacity ease}.tree-item__item:hover .tree-item__actions::slotted(*){visibility:visible;opacity:1}@supports not (overlay:auto){.tree-item__actions::slotted(cx-dropdown[open]){visibility:visible;opacity:1}}.tree-item__children{font-size:calc(1em + var(--indent-size,var(--cx-spacing-medium)));gap:var(--children-gap,0);flex-direction:column;display:flex}@media (forced-colors:active){:host(:not([aria-disabled=true])) .tree-item--selected .tree-item__item{outline:1px dashed selecteditem}}::slotted(cx-tree-item){--hover-background-color:inherit;--active-background-color:inherit;--selected-background-color:inherit;--selected-color:inherit}:host([variant=text]){--selected-background-color:transparent;--selected-color:inherit;--hover-background-color:transparent;--active-background-color:transparent;--hover-color:var(--cx-color-primary)}:host([variant=text]:not([aria-disabled=true])) .tree-item__item:hover{color:var(--hover-color)}:host([data-dragging]){position:relative}:host([data-dragging=inside]){background-color:var(--cx-color-primary-400)}:host([data-dragging=before]):before{content:"";border-top:var(--cx-spacing-2x-small) solid var(--cx-color-primary-400);width:100%;position:absolute;top:0;left:0}:host([data-dragging=after]):before{content:"";border-bottom:var(--cx-spacing-2x-small) solid var(--cx-color-primary-400);width:100%;position:absolute;bottom:0;left:0}`, I = "tree-sortable", w = 0.2, P = (e) => e == null;
+function ae() {
   function e() {
   }
   let t = null;
@@ -122,7 +122,7 @@ class v extends Q {
     return new v(t, i);
   }
 }
-v.mount(new ie());
+v.mount(new ae());
 const M = (e) => ({
   ...e,
   animation: 100,
@@ -142,220 +142,113 @@ const M = (e) => ({
   },
   [I]: !0,
   swapThreshold: w
-}), ae = R`:host{--indent-guide-color:var(--cx-color-neutral-200);--indent-guide-offset:0;--indent-guide-style:solid;--indent-guide-width:0;--indent-size:var(--cx-spacing-large);font-size:0;display:block}:host::part(children){gap:var(--children-gap,0);flex-direction:column;display:flex}:host([dragging]) ::slotted(cx-tree-item){--hover-background-color:transparent!important;--active-background-color:transparent!important;--selected-background-color:transparent!important}`;
-var ne = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, h = (e, t, i, a) => {
+});
+var ne = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, s = (e, t, i, a) => {
   for (var r = a > 1 ? void 0 : a ? oe(t, i) : t, n = e.length - 1, d; n >= 0; n--)
     (d = e[n]) && (r = (a ? d(t, i, r) : d(r)) || r);
   return a && r && ne(t, i, r), r;
 };
-function H(e) {
-  const t = e.getChildrenItems({ includeDisabled: !1 });
-  if (t.length) {
-    const i = t.every((d) => d.selected), a = t.every(
-      (d) => !d.selected && !d.indeterminate
-    );
-    let r = !1, n = !1;
-    (!i && !a || e.partialSyncCheckboxes && (i || a && e.previouslySelected)) && (r = !0), e.partialSyncCheckboxes ? n = i && !r : n = i, e.indeterminate = r, e.selected = n;
+let o = class extends F {
+  constructor() {
+    super(), this.localize = new N(this), this.expanded = !1, this.selected = !1, this.disabled = !1, this.readonly = !1, this.lazy = !1, this.href = "", this.rel = "noreferrer noopener", this.itemId = "", this.sortable = !1, this.noDrag = !1, this.noSelect = !1, this.noDragInside = !1, this.sortableGroup = void 0, this.expandButtonPlacement = "start", this.noForwardExpandButtonPlacement = !1, this.disabledSyncCheckboxes = !1, this.partialSyncCheckboxes = !1, this.previouslySelected = !1, this.focusable = !1, this.maxLines = -1, this.indeterminate = !1, this.isLeaf = !1, this.loading = !1, this.selectable = !1, this.sortableInstance = null, this.onDragStart = (e) => {
+      if (e.dataTransfer) {
+        const t = this.cloneNode(!0);
+        t.style.backgroundColor = "red", t.style.display = "none", this.ownerDocument.body.appendChild(t), e.dataTransfer.setDragImage(t, 0, 0);
+      }
+    }, this.onDragStart = this.onDragStart.bind(this), this.renderExpandButton = this.renderExpandButton.bind(this), this.handleSortableUpdate = this.handleSortableUpdate.bind(this), this.handleSortableEnd = this.handleSortableEnd.bind(this), this.handleSortableStart = this.handleSortableStart.bind(this);
   }
-}
-function Z(e, t = "single") {
-  const i = e.parentElement;
-  o.isTreeItem(i) && !i.disabledSyncCheckboxes && t === "multiple" && (H(i), Z(i, t));
-}
-function k(e, t = !1, i = "single") {
-  function a(r) {
-    if (!(!(r instanceof o) && r.getAttribute("role") !== "treeitem")) {
-      for (const n of r.getChildrenItems())
-        n.selected = t ? r.selected || n.selected : !n.disabled && !n.readonly && r.selected, a(n);
-      t && H(r);
-    }
+  static isTreeItem(e) {
+    return e instanceof Element && e.getAttribute("role") === "treeitem";
   }
-  !e.disabledSyncCheckboxes && i === "multiple" && (e.partialSyncCheckboxes && (e.selected ? e.previouslySelected = !0 : e.previouslySelected = !1), a(e)), Z(e, i);
-}
-let c = class extends F {
-  constructor() {
-    super(), this.sortable = !1, this.sortableGroup = null, this.disabledSortableGroup = !1, this.selection = "single", this.disabledAutoExpand = !1, this.autoExpandToSelected = !1, this.expandButtonPlacement = "start", this.noForwardExpandButtonPlacement = !1, this.forceOnChange = !1, this.labelSelectSingle = !1, this.noDragInside = !1, this.focusable = !1, this.clickTarget = null, this.localize = new N(this), this.sortableInstance = null, this.handleSortableUpdate = this.handleSortableUpdate.bind(this), this.handleSortableStart = this.handleSortableStart.bind(this), this.handleSortableEnd = this.handleSortableEnd.bind(this), this.handleFocusIn = this.handleFocusIn.bind(this), this.handleFocusOut = this.handleFocusOut.bind(this), this.handleHostMouseDown = this.handleHostMouseDown.bind(this), this.handleSlotChange = this.handleSlotChange.bind(this), this.handleTreeChanged = this.handleTreeChanged.bind(this), this.initTreeItem = this.initTreeItem.bind(this);
+  get showExpandButton() {
+    return !this.loading && (!this.isLeaf || this.lazy);
   }
   runFirstUpdated() {
-    this.setAttribute("role", "tree"), this.setAttribute("tabindex", "0");
-  }
-  runConnectedCallback() {
-    if (this.addEventListener("focusin", this.handleFocusIn), this.addEventListener("focusout", this.handleFocusOut), this.addEventListener("mousedown", this.handleHostMouseDown), this.addEventListener("cx-lazy-change", this.handleSlotChange), this.mutationObserver = new MutationObserver(this.handleTreeChanged), this.mutationObserver.observe(this, { childList: !0, subtree: !0 }), this.autoExpandToSelected) {
-      const e = te(() => {
-        customElements.whenDefined("cx-tree-item").then(() => {
-          this.selectedItems.forEach((t) => {
-            this.expandToItem(t);
-          });
-        });
-      }, 500);
-      this.autoExpandObserver = new MutationObserver(e), this.autoExpandObserver.observe(this, {
-        attributeFilter: ["selected"],
-        attributes: !0,
-        childList: !0,
-        subtree: !0
-      });
-    }
-    this.hasUpdated && this.sortable && this.initSortable();
+    this.hasAttribute("role") || this.setAttribute("role", "treeitem"), this.setAttribute("tabindex", this.focusable ? "0" : "-1"), this.isNestedItem() && (this.slot = "children"), this.childrenContainer.hidden = !this.expanded, this.childrenContainer.style.height = this.expanded ? "auto" : "0", this.noForwardExpandButtonPlacement || this.getChildrenItems().forEach(
+      (e) => e.expandButtonPlacement = this.expandButtonPlacement
+    ), this.isLeaf = !this.lazy && this.getChildrenItems().length === 0, this.handleExpandedChange();
   }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("focusin", this.handleFocusIn), this.removeEventListener("focusout", this.handleFocusOut), this.removeEventListener("mousedown", this.handleHostMouseDown), this.removeEventListener("cx-lazy-change", this.handleSlotChange), this.mutationObserver?.disconnect(), this.autoExpandObserver?.disconnect(), this.destroySortable();
+  async animateCollapse() {
+    this.emit("cx-collapse"), await L(this.childrenContainer);
+    const { keyframes: e, options: t } = z(this, "tree-item.collapse", {
+      dir: this.localize.dir()
+    });
+    await D(
+      this.childrenContainer,
+      $(e, this.childrenContainer.scrollHeight),
+      t
+    ), this.childrenContainer.hidden = !0, this.emit("cx-after-collapse");
   }
-  /**
-   * Generates a clone of the expand icon element to use for each tree item
-   */
-  getExpandButtonIcon(e) {
-    const i = (e === "expand" ? this.expandedIconSlot : this.collapsedIconSlot)?.assignedElements({ flatten: !0 })[0];
-    if (i) {
-      const a = i.cloneNode(!0);
-      return [a, ...a.querySelectorAll("[id]")].forEach(
-        (r) => r.removeAttribute("id")
-      ), a.setAttribute("data-default", ""), a.slot = `${e}-icon`, a;
-    }
-    return null;
+  // Checks whether the item is nested into an item
+  isNestedItem() {
+    const e = this.parentElement;
+    return !!e && o.isTreeItem(e);
   }
   /**
-   * Initializes new items by setting the `selectable` property and the expanded/collapsed icons if any
+   * Wait for this item to be fully updated before processing the slot change.
+   * Since children items may not be fully updated yet.
    */
-  initTreeItem(e) {
-    this.noForwardExpandButtonPlacement || (e.expandButtonPlacement = this.expandButtonPlacement), e.variant = this.variant, e.selectable = this.selection === "multiple", e.focusable = this.focusable, ["expand", "collapse"].filter((t) => !!this.querySelector(`[slot="${t}-icon"]`)).forEach((t) => {
-      const i = e.querySelector(`[slot="${t}-icon"]`), a = this.getExpandButtonIcon(t);
-      a && (i === null ? e.append(a) : i.hasAttribute("data-default") && i.replaceWith(a));
-    }), this.sortable ? (e.sortable = !0, e.sortableGroup = this.getSortableGroup(), this.noDragInside && (e.noDragInside = !0)) : e.sortable = !1;
-  }
-  initTreeItems() {
-    this.getAllTreeItems().forEach(this.initTreeItem);
+  async handleChildrenSlotChange() {
+    await this.updateComplete, this.loading = !1, this.noForwardExpandButtonPlacement || this.getChildrenItems().forEach(
+      (e) => e.expandButtonPlacement = this.expandButtonPlacement
+    ), this.isLeaf = !this.lazy && this.getChildrenItems().length === 0;
   }
-  handleTreeChanged(e) {
-    for (const t of e) {
-      const i = [...t.addedNodes].filter(
-        o.isTreeItem
-      ), a = [...t.removedNodes].filter(
-        o.isTreeItem
-      );
-      i.forEach(this.initTreeItem), this.lastFocusedItem && a.includes(this.lastFocusedItem) && (this.lastFocusedItem = null);
-    }
+  willUpdate(e) {
+    e.has("selected") && !e.has("indeterminate") && (this.indeterminate = !1);
   }
-  /**
-   * Handles the selection of a tree item based on the current selection mode.
-   *
-   * @param selectedItem - The tree item that is being selected or toggled.
-   * @param isSingleSelect - Optional flag to force the item to be selected and unselect all other items.
-   */
-  async selectItem(e, t = !1) {
-    const i = [...this.selectedItems], a = this.getAllTreeItems();
-    if (this.selection === "multiple")
-      t && await Promise.all(
-        a.map(async (n) => {
-          n.selected = !1, n.indeterminate = !1, n.previouslySelected = !1, await n.updateComplete;
-        })
-      ), e.selected = t || !e.selected, e.lazy && !this.disabledAutoExpand && (e.expanded = !0), k(e, !1, this.selection);
-    else if ((this.selection === "single" || e.isLeaf) && !e.noSelect)
-      for (const n of a)
-        n.selected = n === e;
-    else (this.selection === "leaf" || e.noSelect) && (e.expanded = !e.expanded);
-    if (e.noSelect)
-      return;
-    const r = this.selectedItems;
-    (i.length !== r.length || r.some((n) => !i.includes(n)) || this.forceOnChange || t) && Promise.all(r.map((n) => n.updateComplete)).then(() => {
-      this.emit("cx-selection-change", {
-        /**
-         * Use this.selectedItems instead of nextSelection because
-         * this.selectedItems may have changed since the last updateComplete
-         */
-        detail: { selection: this.selectedItems }
-      });
+  async animateExpand() {
+    this.emit("cx-expand"), await L(this.childrenContainer), this.childrenContainer.hidden = !1;
+    const { keyframes: e, options: t } = z(this, "tree-item.expand", {
+      dir: this.localize.dir()
     });
+    await D(
+      this.childrenContainer,
+      $(e, this.childrenContainer.scrollHeight),
+      t
+    ), this.childrenContainer.style.height = "auto", this.emit("cx-after-expand");
   }
-  getAllTreeItems() {
-    return [...this.querySelectorAll("cx-tree-item")];
+  handleLoadingChange() {
+    this.setAttribute("aria-busy", this.loading ? "true" : "false"), this.loading || this.animateExpand();
   }
-  getAllDirectTreeItems() {
-    return [...this.querySelectorAll(":scope > cx-tree-item")];
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
   }
-  focusItem(e, t) {
-    e?.focus(t);
+  handleSelectedChange() {
+    this.setAttribute("aria-selected", this.selected ? "true" : "false"), this.hasUpdated && this.emit("cx-selected-change", {
+      detail: {
+        selected: this.selected
+      }
+    });
   }
-  handleKeyDown(e) {
-    if (![
-      "ArrowDown",
-      "ArrowUp",
-      "ArrowRight",
-      "ArrowLeft",
-      "Home",
-      "End",
-      "Enter",
-      " "
-    ].includes(e.key) || e.composedPath().some(
-      (r) => ["input", "textarea"].includes(
-        r?.tagName?.toLowerCase()
-      )
-    ))
-      return;
-    const t = this.getFocusableItems(), i = this.localize.dir() === "ltr", a = this.localize.dir() === "rtl";
-    if (t.length > 0) {
-      e.preventDefault();
-      const r = t.findIndex((x) => x.matches(":focus")), n = t[r], d = (x) => {
-        const p = t[Y(x, 0, t.length - 1)];
-        this.focusItem(p);
-      }, u = (x) => {
-        n.expanded = x;
-      };
-      e.key === "ArrowDown" ? d(r + 1) : e.key === "ArrowUp" ? d(r - 1) : i && e.key === "ArrowRight" || a && e.key === "ArrowLeft" ? !n || n.disabled || n.readonly || n.expanded || n.isLeaf && !n.lazy ? d(r + 1) : u(!0) : i && e.key === "ArrowLeft" || a && e.key === "ArrowRight" ? !n || n.disabled || n.readonly || n.isLeaf || !n.expanded ? d(r - 1) : u(!1) : e.key === "Home" ? d(0) : e.key === "End" ? d(t.length - 1) : (e.key === "Enter" || e.key === " ") && !n.disabled && !n.readonly && this.selectItem(n);
-    }
+  handleExpandedChange() {
+    this.isLeaf ? this.removeAttribute("aria-expanded") : this.setAttribute("aria-expanded", this.expanded ? "true" : "false");
   }
-  handleClick(e) {
-    const t = e.composedPath(), i = e.target, a = i.closest("cx-tree-item"), r = e.composedPath().some(
-      (u) => u?.classList?.contains("tree-item__expand-button")
-    ), n = e.composedPath().some(
-      (u) => u?.classList?.contains("tree-item__actions")
-    );
-    if (!a || a.disabled || a.readonly || i !== this.clickTarget)
-      return;
-    const d = !t.find(
-      (u) => u.tagName?.toLowerCase() === "cx-checkbox"
-    );
-    r && a.showExpandButton ? a.expanded = !a.expanded : n || this.selectItem(
-      a,
-      d && this.labelSelectSingle && this.selection === "multiple"
-    );
+  handleExpandAnimation() {
+    this.expanded ? this.lazy ? (this.loading = !0, this.emit("cx-lazy-load")) : this.animateExpand() : this.animateCollapse();
   }
-  handleMouseDown(e) {
-    this.clickTarget = e.target;
+  async handleLazyChange() {
+    !this.lazy && this.loading && (this.loading = !1, this.handleChildrenSlotChange()), this.selected && (await this.updateComplete, k(this)), this.emit("cx-lazy-change");
   }
-  /**
-   * A `mousedown` whose real, non-retargeted origin (`composedPath()[0]`) is
-   * the tree host itself is only reachable by clicking the host's own
-   * scrollbar/gutter — shadow content otherwise fills the box, so a content
-   * click's real origin is always a descendant. The browser's default action
-   * for that mousedown focuses the host, and since the host is itself the
-   * scrollable element (`overflow: auto`), focusing it resets its own
-   * scrollTop natively — before any of our JS runs, so `preventScroll` on a
-   * later `this.focusItem(...)` call can't undo it. Cancel that default
-   * action outright; it doesn't affect the scrollbar's own drag/track
-   * behavior, only whether the mousedown also focuses the element.
-   */
-  handleHostMouseDown(e) {
-    e.composedPath()[0] === this && e.preventDefault();
+  /** Gets all the nested tree items in this node. */
+  getChildrenItems({
+    includeDisabled: e = !0
+  } = {}) {
+    return this.childrenSlot ? [...this.childrenSlot.assignedElements({ flatten: !0 })].filter(
+      (t) => o.isTreeItem(t) && (e || !t.disabled)
+    ) : [];
   }
-  handleFocusOut(e) {
-    const t = e.relatedTarget;
-    (!t || !this.contains(t)) && (this.tabIndex = 0);
-  }
-  handleFocusIn(e) {
-    const t = e.target;
-    e.target === this && this.focusItem(this.lastFocusedItem || this.getAllTreeItems()[0], {
-      preventScroll: !0
-    }), o.isTreeItem(t) && !t.disabled && !t.readonly && (this.lastFocusedItem && !this.focusable && (this.lastFocusedItem.tabIndex = -1), this.lastFocusedItem = t, this.tabIndex = -1, t.tabIndex = 0);
-  }
-  expandToItem(e) {
-    const t = e.parentElement?.closest("cx-tree-item");
-    t && !t.expanded && !t.lazy && (t.expanded = !0, this.expandToItem(t));
-  }
-  handleSlotChange() {
-    this.initTreeItems();
+  renderExpandButton() {
+    const e = this.localize.dir() === "rtl", t = this.showExpandButton;
+    return m`<div part="expand-button" class=${C({
+      "tree-item__expand-button": !0,
+      "tree-item__expand-button--visible": t
+    })} aria-hidden="true">${y(
+      this.loading,
+      () => m`<cx-spinner part="spinner" class="tree-item__expand-spinner" exportparts="base:spinner__base"></cx-spinner>`
+    )}<slot class="tree-item__expand-icon-slot" name="expand-icon"><cx-icon name=${e ? "chevron_left" : "chevron_right"}></cx-icon></slot><slot class="tree-item__expand-icon-slot" name="collapse-icon"><cx-icon name=${e ? "chevron_left" : "chevron_right"}></cx-icon></slot></div>`;
   }
   handleSortableUpdate(e) {
-    const t = this.getAllDirectTreeItems();
+    const t = this.getChildrenItems({ includeDisabled: !0 });
     this.emit("cx-reorder", {
       detail: {
         from: e.from,
@@ -368,23 +261,19 @@ let c = class extends F {
       }
     });
   }
-  destroySortable() {
-    this.removeEventListener("cx-drag-start", this.handleSortableStart), this.removeEventListener("cx-drag-end", this.handleSortableEnd), this.sortableInstance && (this.sortableInstance.destroy(), this.sortableInstance = null);
-  }
-  getSortableGroup() {
-    if (!this.disabledSortableGroup)
-      return this.sortableGroup || (this.sortableGroup = ee()), this.sortableGroup;
-  }
   handleSortableStart() {
-    this.setAttribute("dragging", "");
+    this.emit("cx-drag-start");
   }
   handleSortableEnd() {
-    this.removeAttribute("dragging");
+    this.emit("cx-drag-end");
+  }
+  destroySortable() {
+    this.removeEventListener("dragstart", this.onDragStart), this.sortableInstance && (this.sortableInstance.destroy(), this.sortableInstance = null);
   }
   initSortable() {
-    this.addEventListener("cx-drag-start", this.handleSortableStart), this.addEventListener("cx-drag-end", this.handleSortableEnd), this.sortableInstance = v.create(this, {
+    this.addEventListener("dragstart", this.onDragStart), this.focusable || this.setAttribute("tabindex", "-1"), this.sortableInstance = v.create(this, {
       ...M({
-        group: this.getSortableGroup(),
+        group: this.sortableGroup,
         onAdd: this.handleSortableUpdate,
         onEnd: this.handleSortableEnd,
         onRemove: this.handleSortableUpdate,
@@ -393,222 +282,432 @@ let c = class extends F {
       })
     });
   }
-  async handleSelectionChange() {
-    const e = this.selection === "multiple", t = this.getAllTreeItems();
-    this.setAttribute(
-      "aria-multiselectable",
-      e ? "true" : "false"
-    );
-    for (const i of t)
-      i.selectable = e;
-    e ? (await this.updateComplete, [...this.querySelectorAll(":scope > cx-tree-item")].forEach(
-      (i) => k(i, !0, this.selection)
-    )) : this.autoExpandToSelected || t.forEach((i) => {
-      i.selected = !1, i.indeterminate = !1;
-    });
-  }
   updated(e) {
-    super.updated(e), e.has("sortable") && (this.destroySortable(), this.sortable && this.initSortable());
-  }
-  /**
-   * Returns the list of tree items that are selected in the tree.
-   *
-   * @internal
-   */
-  get selectedItems() {
-    const e = this.getAllTreeItems(), t = (i) => i.partialSyncCheckboxes ? i.selected || i.indeterminate && i.previouslySelected : i.selected;
-    return e.filter(t);
+    super.updated(e), (e.has("sortable") || e.has("sortableGroup")) && (this.destroySortable(), this.sortable && this.initSortable());
   }
-  /**
-   * Gets focusable tree items in the tree.
-   *
-   * @internal
-   */
-  getFocusableItems() {
-    const e = this.getAllTreeItems(), t = /* @__PURE__ */ new Set();
-    return e.filter((i) => {
-      if (i.disabled || i.readonly)
-        return !1;
-      const a = i.parentElement?.closest("[role=treeitem]");
-      return a instanceof o ? (a && (!a.expanded || a.loading || t.has(a)) && t.add(i), !t.has(i)) : !0;
-    });
+  renderBase(e) {
+    const t = this.showExpandButton;
+    return this.href ? m`<a id="anchor" part="base" class=${C({
+      "tree-item": !0,
+      "tree-item--disabled": this.disabled,
+      "tree-item--expanded": this.expanded,
+      "tree-item--has-expand-button": t,
+      "tree-item--leaf": this.isLeaf,
+      "tree-item--rtl": this.localize.dir() === "rtl",
+      "tree-item--selected": this.selected
+    })} href=${_(this.href)} target=${_(this.target)} download=${_(this.download)} rel=${_(this.rel)} draggable=${this.sortable ? "false" : E} ?inert=${this.disabled}>${e}</a>` : m`<div part="base" class=${C({
+      "tree-item": !0,
+      "tree-item--disabled": this.disabled,
+      "tree-item--expanded": this.expanded,
+      "tree-item--has-expand-button": t,
+      "tree-item--leaf": this.isLeaf,
+      "tree-item--rtl": this.localize.dir() === "rtl",
+      "tree-item--selected": this.selected
+    })}>${e}</div>`;
   }
   render() {
-    return m`<div part="base" class="tree" @click=${this.handleClick} @keydown=${this.handleKeyDown} @mousedown=${this.handleMouseDown}><slot part="children" @slotchange=${this.handleSlotChange}></slot><span hidden aria-hidden="true"><slot name="expand-icon"></slot></span><span hidden aria-hidden="true"><slot name="collapse-icon"></slot></span></div>`;
+    return this.renderBase(m`<div class="tree-item__item" part="
+            item
+            ${this.disabled ? "item--disabled" : ""}
+            ${this.expanded ? "item--expanded" : ""}
+            ${this.indeterminate ? "item--indeterminate" : ""}
+            ${this.selected ? "item--selected" : ""}
+          "><div class="tree-item__indentation" part="indentation"></div>${y(
+      this.expandButtonPlacement === "start",
+      this.renderExpandButton,
+      () => E
+    )}
+        ${y(
+      this.selectable,
+      () => m`<cx-checkbox part="checkbox" aria-label=${this.localize.term("checkbox")} exportparts="
+                base:checkbox__base,
+                control:checkbox__control,
+                control--checked:checkbox__control--checked,
+                control--indeterminate:checkbox__control--indeterminate,
+                checked-icon:checkbox__checked-icon,
+                indeterminate-icon:checkbox__indeterminate-icon,
+                label:checkbox__label
+              " class="tree-item__checkbox" ?disabled=${this.disabled} ?checked=${j(this.selected)} ?indeterminate=${this.indeterminate} tabindex="-1"></cx-checkbox>`
+    )}
+
+        ${y(
+      this.maxLines > 0,
+      () => m`<cx-line-clamp class="tree-item__label" part="label" lines=${this.maxLines}><slot></slot></cx-line-clamp>`,
+      () => m`<slot class="tree-item__label" part="label"></slot>`
+    )}<slot class="tree-item__actions" part="actions" name="actions"></slot>${y(
+      this.expandButtonPlacement === "end",
+      this.renderExpandButton,
+      () => E
+    )}</div><div class="tree-item__children" part="children" role="group"><slot name="children" @slotchange=${this.handleChildrenSlotChange}></slot></div>`);
   }
 };
-c.styles = [O, ae];
-h([
+o.styles = [O, ie];
+o.dependencies = {
+  "cx-checkbox": K,
+  "cx-icon": V,
+  "cx-line-clamp": W,
+  "cx-spinner": Y
+};
+s([
   f("slot:not([name])")
-], c.prototype, "defaultSlot", 2);
-h([
-  f("slot[name=expand-icon]")
-], c.prototype, "expandedIconSlot", 2);
-h([
-  f("slot[name=collapse-icon]")
-], c.prototype, "collapsedIconSlot", 2);
-h([
+], o.prototype, "defaultSlot", 2);
+s([
+  f("slot[name=children]")
+], o.prototype, "childrenSlot", 2);
+s([
+  f(".tree-item__item")
+], o.prototype, "itemElement", 2);
+s([
+  f(".tree-item__children")
+], o.prototype, "childrenContainer", 2);
+s([
+  f(".tree-item__expand-button slot")
+], o.prototype, "expandButtonSlot", 2);
+s([
   l({ reflect: !0, type: Boolean })
-], c.prototype, "sortable", 2);
-h([
-  l({ attribute: "sortable-group", type: String })
-], c.prototype, "sortableGroup", 2);
-h([
-  l({ attribute: "disabled-sortable-group", type: Boolean })
-], c.prototype, "disabledSortableGroup", 2);
-h([
+], o.prototype, "expanded", 2);
+s([
+  l({ reflect: !0, type: Boolean })
+], o.prototype, "selected", 2);
+s([
+  l({ reflect: !0, type: Boolean })
+], o.prototype, "disabled", 2);
+s([
+  l({ reflect: !0, type: Boolean })
+], o.prototype, "readonly", 2);
+s([
+  l({ reflect: !0, type: Boolean })
+], o.prototype, "lazy", 2);
+s([
   l()
-], c.prototype, "selection", 2);
-h([
-  l({ attribute: "disabled-auto-expand", type: Boolean })
-], c.prototype, "disabledAutoExpand", 2);
-h([
-  l({ attribute: "auto-expand-to-selected", type: Boolean })
-], c.prototype, "autoExpandToSelected", 2);
-h([
+], o.prototype, "href", 2);
+s([
+  l()
+], o.prototype, "target", 2);
+s([
+  l()
+], o.prototype, "rel", 2);
+s([
+  l()
+], o.prototype, "download", 2);
+s([
+  l({ attribute: "itemid", reflect: !0, type: String })
+], o.prototype, "itemId", 2);
+s([
+  l({ reflect: !0, type: Boolean })
+], o.prototype, "sortable", 2);
+s([
+  l({ attribute: "no-drag", reflect: !0, type: Boolean })
+], o.prototype, "noDrag", 2);
+s([
+  l({ attribute: "no-select", reflect: !0, type: Boolean })
+], o.prototype, "noSelect", 2);
+s([
+  l({ attribute: "no-drag-inside", reflect: !0, type: Boolean })
+], o.prototype, "noDragInside", 2);
+s([
+  l({ attribute: "sortable-group", type: String })
+], o.prototype, "sortableGroup", 2);
+s([
   l({
     attribute: "expand-button-placement",
     reflect: !0,
     type: String
   })
-], c.prototype, "expandButtonPlacement", 2);
-h([
+], o.prototype, "expandButtonPlacement", 2);
+s([
   l({ attribute: "no-forward-expand-button-placement", type: Boolean })
-], c.prototype, "noForwardExpandButtonPlacement", 2);
-h([
+], o.prototype, "noForwardExpandButtonPlacement", 2);
+s([
   l({ reflect: !0, type: String })
-], c.prototype, "variant", 2);
-h([
-  l({ attribute: "force-on-change", type: Boolean })
-], c.prototype, "forceOnChange", 2);
-h([
-  l({ attribute: "label-select-single", reflect: !0, type: Boolean })
-], c.prototype, "labelSelectSingle", 2);
-h([
-  l({ attribute: "no-drag-inside", reflect: !0, type: Boolean })
-], c.prototype, "noDragInside", 2);
-h([
+], o.prototype, "variant", 2);
+s([
+  l({
+    attribute: "disabled-sync-checkboxes",
+    reflect: !0,
+    type: Boolean
+  })
+], o.prototype, "disabledSyncCheckboxes", 2);
+s([
+  l({
+    attribute: "partial-sync-checkboxes",
+    reflect: !0,
+    type: Boolean
+  })
+], o.prototype, "partialSyncCheckboxes", 2);
+s([
+  l({ attribute: "previously-selected", reflect: !0, type: Boolean })
+], o.prototype, "previouslySelected", 2);
+s([
   l({ reflect: !0, type: Boolean })
-], c.prototype, "focusable", 2);
-h([
+], o.prototype, "focusable", 2);
+s([
+  l({ attribute: "max-lines", type: Number })
+], o.prototype, "maxLines", 2);
+s([
   g()
-], c.prototype, "sortableInstance", 2);
-h([
-  b(["sortable", "variant"])
-], c.prototype, "initTreeItems", 1);
-h([
-  b("selection")
-], c.prototype, "handleSelectionChange", 1);
-c = h([
-  U("cx-tree")
-], c);
-const re = R`:host{--selected-color:var(--cx-color-primary-600);--selected-background-color:var(--cx-color-primary-50);--hover-background-color:var(--cx-menu-item-background-color-hover);--active-background-color:var(--cx-color-neutral-200);--item-padding:var(--cx-spacing-2x-small) var(--cx-spacing-x-small);outline:0;display:block}:host(:focus-visible) .tree-item{outline:var(--cx-focus-ring);outline-offset:calc(-1 * var(--cx-focus-ring-width))}[hidden]{display:none!important}slot:not([name])::slotted(cx-icon){margin-inline-end:var(--cx-spacing-x-small)}.tree-item{color:var(--cx-color-neutral-900);cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:stretch;display:flex;position:relative}.tree-item__checkbox{margin-inline-end:var(--cx-spacing-x-small)}.tree-item__expand-button,.tree-item__checkbox,.tree-item__label{font-family:var(--cx-font-sans);font-size:var(--cx-tree-item-font-size,var(--cx-font-size-small));font-weight:var(--cx-tree-item-font-weight,var(--cx-font-weight-medium));line-height:var(--cx-tree-item-line-height,var(--cx-line-height-large));letter-spacing:var(--cx-tree-item-letter-spacing,var(--cx-letter-spacing-normal))}.tree-item__checkbox::part(base){align-items:center;display:flex}.tree-item__checkbox::part(label){margin-inline-start:0}.tree-item__indentation{flex-shrink:0;width:1em;display:block}.tree-item__expand-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tree-item__expand-button{box-sizing:content-box;color:var(--cx-color-neutral-500);cursor:pointer;min-width:max(1em,1rem);min-height:max(1em,1rem);transition:var(--cx-transition-medium) rotate ease;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.tree-item--expanded .tree-item__expand-button{rotate:90deg}.tree-item--expanded.tree-item--rtl .tree-item__expand-button{rotate:-90deg}.tree-item--expanded slot[name=expand-icon],.tree-item:not(.tree-item--expanded) slot[name=collapse-icon]{display:none}:host(:not([aria-disabled=true])) .tree-item--selected .tree-item__item .tree-item__expand-icon-slot{color:var(--selected-color)}.tree-item:not(.tree-item--has-expand-button) .tree-item__expand-icon-slot{visibility:hidden;opacity:0;pointer-events:none}.tree-item__expand-button--visible{cursor:pointer}.tree-item__item{border-radius:var(--cx-border-radius-large);padding:var(--item-padding,var(--cx-spacing-x-small) var(--cx-spacing-small));transition:var(--cx-transition-x-fast) background-color ease;align-items:center;display:flex}.tree-item__item:hover{background-color:var(--hover-background-color)}.tree-item__item:active{background-color:var(--active-background-color)}.tree-item--disabled .tree-item__item{opacity:.5;cursor:default;outline:none}:host(:not([aria-disabled=true])) .tree-item--selected .tree-item__item{background-color:var(--selected-background-color);color:var(--selected-color)}:host(:not([aria-disabled=true])) .tree-item__expand-button{color:var(--cx-color-neutral)}:host(:not([aria-disabled=true]):not([variant=text])) .tree-item--selected,:host(:not([aria-disabled=true]):not([variant=text])) .tree-item--selected .tree-item__expand-button,:host(:not([aria-disabled=true]):not([variant=text])) .tree-item--selected .tree-item__actions::slotted(cx-icon-button){color:var(--cx-color-neutral-0)}:host(:not([aria-disabled=true]):not([variant=text])) .tree-item--selected .tree-item__actions::slotted(cx-icon-button){--hover-background-color:var(--cx-color-neutral-0)}.tree-item__label{align-items:center;display:flex}.tree-item__actions{font-size:var(--cx-font-size-medium);align-items:center;width:fit-content;margin-inline-start:auto;display:flex}.tree-item__actions::slotted(*){visibility:hidden;opacity:0;transition:var(--cx-transition-x-fast) visibility, var(--cx-transition-x-fast) opacity ease}.tree-item__item:hover .tree-item__actions::slotted(*){visibility:visible;opacity:1}@supports not (overlay:auto){.tree-item__actions::slotted(cx-dropdown[open]){visibility:visible;opacity:1}}.tree-item__children{font-size:calc(1em + var(--indent-size,var(--cx-spacing-medium)));gap:var(--children-gap,0);flex-direction:column;display:flex}@media (forced-colors:active){:host(:not([aria-disabled=true])) .tree-item--selected .tree-item__item{outline:1px dashed selecteditem}}::slotted(cx-tree-item){--hover-background-color:inherit;--active-background-color:inherit;--selected-background-color:inherit;--selected-color:inherit}:host([variant=text]){--selected-background-color:transparent;--selected-color:inherit;--hover-background-color:transparent;--active-background-color:transparent;--hover-color:var(--cx-color-primary)}:host([variant=text]:not([aria-disabled=true])) .tree-item__item:hover{color:var(--hover-color)}:host([data-dragging]){position:relative}:host([data-dragging=inside]){background-color:var(--cx-color-primary-400)}:host([data-dragging=before]):before{content:"";border-top:var(--cx-spacing-2x-small) solid var(--cx-color-primary-400);width:100%;position:absolute;top:0;left:0}:host([data-dragging=after]):before{content:"";border-bottom:var(--cx-spacing-2x-small) solid var(--cx-color-primary-400);width:100%;position:absolute;bottom:0;left:0}`;
-var se = Object.defineProperty, le = Object.getOwnPropertyDescriptor, s = (e, t, i, a) => {
+], o.prototype, "indeterminate", 2);
+s([
+  g()
+], o.prototype, "isLeaf", 2);
+s([
+  g()
+], o.prototype, "loading", 2);
+s([
+  g()
+], o.prototype, "selectable", 2);
+s([
+  g()
+], o.prototype, "sortableInstance", 2);
+s([
+  b("loading", { waitUntilFirstUpdate: !0 })
+], o.prototype, "handleLoadingChange", 1);
+s([
+  b("disabled")
+], o.prototype, "handleDisabledChange", 1);
+s([
+  b("selected")
+], o.prototype, "handleSelectedChange", 1);
+s([
+  b("expanded", { waitUntilFirstUpdate: !0 })
+], o.prototype, "handleExpandedChange", 1);
+s([
+  b("expanded", { waitUntilFirstUpdate: !0 })
+], o.prototype, "handleExpandAnimation", 1);
+s([
+  b("lazy", { waitUntilFirstUpdate: !0 })
+], o.prototype, "handleLazyChange", 1);
+o = s([
+  U("cx-tree-item")
+], o);
+G("tree-item.expand", {
+  keyframes: [
+    { height: "0", opacity: "0", overflow: "hidden" },
+    { height: "auto", opacity: "1", overflow: "hidden" }
+  ],
+  options: { duration: 250, easing: "cubic-bezier(0.4, 0.0, 0.2, 1)" }
+});
+G("tree-item.collapse", {
+  keyframes: [
+    { height: "auto", opacity: "1", overflow: "hidden" },
+    { height: "0", opacity: "0", overflow: "hidden" }
+  ],
+  options: { duration: 200, easing: "cubic-bezier(0.4, 0.0, 0.2, 1)" }
+});
+const re = R`:host{--indent-guide-color:var(--cx-color-neutral-200);--indent-guide-offset:0;--indent-guide-style:solid;--indent-guide-width:0;--indent-size:var(--cx-spacing-large);font-size:0;display:block}:host::part(children){gap:var(--children-gap,0);flex-direction:column;display:flex}:host([dragging]) ::slotted(cx-tree-item){--hover-background-color:transparent!important;--active-background-color:transparent!important;--selected-background-color:transparent!important}`;
+var se = Object.defineProperty, le = Object.getOwnPropertyDescriptor, h = (e, t, i, a) => {
   for (var r = a > 1 ? void 0 : a ? le(t, i) : t, n = e.length - 1, d; n >= 0; n--)
     (d = e[n]) && (r = (a ? d(t, i, r) : d(r)) || r);
   return a && r && se(t, i, r), r;
 };
-let o = class extends F {
-  constructor() {
-    super(), this.localize = new N(this), this.expanded = !1, this.selected = !1, this.disabled = !1, this.readonly = !1, this.lazy = !1, this.href = "", this.rel = "noreferrer noopener", this.itemId = "", this.sortable = !1, this.noDrag = !1, this.noSelect = !1, this.noDragInside = !1, this.sortableGroup = void 0, this.expandButtonPlacement = "start", this.noForwardExpandButtonPlacement = !1, this.disabledSyncCheckboxes = !1, this.partialSyncCheckboxes = !1, this.previouslySelected = !1, this.focusable = !1, this.maxLines = -1, this.indeterminate = !1, this.isLeaf = !1, this.loading = !1, this.selectable = !1, this.sortableInstance = null, this.onDragStart = (e) => {
-      if (e.dataTransfer) {
-        const t = this.cloneNode(!0);
-        t.style.backgroundColor = "red", t.style.display = "none", this.ownerDocument.body.appendChild(t), e.dataTransfer.setDragImage(t, 0, 0);
-      }
-    }, this.onDragStart = this.onDragStart.bind(this), this.renderExpandButton = this.renderExpandButton.bind(this), this.handleSortableUpdate = this.handleSortableUpdate.bind(this), this.handleSortableEnd = this.handleSortableEnd.bind(this), this.handleSortableStart = this.handleSortableStart.bind(this);
+function H(e) {
+  const t = e.getChildrenItems({ includeDisabled: !1 });
+  if (t.length) {
+    const i = t.every((d) => d.selected), a = t.every(
+      (d) => !d.selected && !d.indeterminate
+    );
+    let r = !1, n = !1;
+    (!i && !a || e.partialSyncCheckboxes && (i || a && e.previouslySelected)) && (r = !0), e.partialSyncCheckboxes ? n = i && !r : n = i, e.indeterminate = r, e.selected = n;
   }
-  static isTreeItem(e) {
-    return e instanceof Element && e.getAttribute("role") === "treeitem";
+}
+function Z(e, t = "single") {
+  const i = e.parentElement;
+  o.isTreeItem(i) && !i.disabledSyncCheckboxes && t === "multiple" && (H(i), Z(i, t));
+}
+function k(e, t = !1, i = "single") {
+  function a(r) {
+    if (!(!(r instanceof o) && r.getAttribute("role") !== "treeitem")) {
+      for (const n of r.getChildrenItems())
+        n.selected = t ? r.selected || n.selected : !n.disabled && !n.readonly && r.selected, a(n);
+      t && H(r);
+    }
   }
-  get showExpandButton() {
-    return !this.loading && (!this.isLeaf || this.lazy);
+  !e.disabledSyncCheckboxes && i === "multiple" && (e.partialSyncCheckboxes && (e.selected ? e.previouslySelected = !0 : e.previouslySelected = !1), a(e)), Z(e, i);
+}
+let c = class extends F {
+  constructor() {
+    super(), this.sortable = !1, this.sortableGroup = null, this.disabledSortableGroup = !1, this.selection = "single", this.disabledAutoExpand = !1, this.autoExpandToSelected = !1, this.expandButtonPlacement = "start", this.noForwardExpandButtonPlacement = !1, this.forceOnChange = !1, this.labelSelectSingle = !1, this.noDragInside = !1, this.focusable = !1, this.clickTarget = null, this.localize = new N(this), this.sortableInstance = null, this.handleSortableUpdate = this.handleSortableUpdate.bind(this), this.handleSortableStart = this.handleSortableStart.bind(this), this.handleSortableEnd = this.handleSortableEnd.bind(this), this.handleFocusIn = this.handleFocusIn.bind(this), this.handleFocusOut = this.handleFocusOut.bind(this), this.handleHostMouseDown = this.handleHostMouseDown.bind(this), this.handleSlotChange = this.handleSlotChange.bind(this), this.handleTreeChanged = this.handleTreeChanged.bind(this), this.initTreeItem = this.initTreeItem.bind(this);
   }
   runFirstUpdated() {
-    this.hasAttribute("role") || this.setAttribute("role", "treeitem"), this.setAttribute("tabindex", this.focusable ? "0" : "-1"), this.isNestedItem() && (this.slot = "children"), this.childrenContainer.hidden = !this.expanded, this.childrenContainer.style.height = this.expanded ? "auto" : "0", this.noForwardExpandButtonPlacement || this.getChildrenItems().forEach(
-      (e) => e.expandButtonPlacement = this.expandButtonPlacement
-    ), this.isLeaf = !this.lazy && this.getChildrenItems().length === 0, this.handleExpandedChange();
+    this.setAttribute("role", "tree"), this.setAttribute("tabindex", "0");
   }
-  async animateCollapse() {
-    this.emit("cx-collapse"), await L(this.childrenContainer);
-    const { keyframes: e, options: t } = z(this, "tree-item.collapse", {
-      dir: this.localize.dir()
-    });
-    await D(
-      this.childrenContainer,
-      $(e, this.childrenContainer.scrollHeight),
-      t
-    ), this.childrenContainer.hidden = !0, this.emit("cx-after-collapse");
+  runConnectedCallback() {
+    if (this.addEventListener("focusin", this.handleFocusIn), this.addEventListener("focusout", this.handleFocusOut), this.addEventListener("mousedown", this.handleHostMouseDown), this.addEventListener("cx-lazy-change", this.handleSlotChange), this.mutationObserver = new MutationObserver(this.handleTreeChanged), this.mutationObserver.observe(this, { childList: !0, subtree: !0 }), this.autoExpandToSelected) {
+      const e = te(() => {
+        customElements.whenDefined("cx-tree-item").then(() => {
+          this.selectedItems.forEach((t) => {
+            this.expandToItem(t);
+          });
+        });
+      }, 500);
+      this.autoExpandObserver = new MutationObserver(e), this.autoExpandObserver.observe(this, {
+        attributeFilter: ["selected"],
+        attributes: !0,
+        childList: !0,
+        subtree: !0
+      });
+    }
+    this.hasUpdated && this.sortable && this.initSortable();
   }
-  // Checks whether the item is nested into an item
-  isNestedItem() {
-    const e = this.parentElement;
-    return !!e && o.isTreeItem(e);
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("focusin", this.handleFocusIn), this.removeEventListener("focusout", this.handleFocusOut), this.removeEventListener("mousedown", this.handleHostMouseDown), this.removeEventListener("cx-lazy-change", this.handleSlotChange), this.mutationObserver?.disconnect(), this.autoExpandObserver?.disconnect(), this.destroySortable();
   }
   /**
-   * Wait for this item to be fully updated before processing the slot change.
-   * Since children items may not be fully updated yet.
+   * Generates a clone of the expand icon element to use for each tree item
    */
-  async handleChildrenSlotChange() {
-    await this.updateComplete, this.loading = !1, this.noForwardExpandButtonPlacement || this.getChildrenItems().forEach(
-      (e) => e.expandButtonPlacement = this.expandButtonPlacement
-    ), this.isLeaf = !this.lazy && this.getChildrenItems().length === 0;
-  }
-  willUpdate(e) {
-    e.has("selected") && !e.has("indeterminate") && (this.indeterminate = !1);
+  getExpandButtonIcon(e) {
+    const i = (e === "expand" ? this.expandedIconSlot : this.collapsedIconSlot)?.assignedElements({ flatten: !0 })[0];
+    if (i) {
+      const a = i.cloneNode(!0);
+      return [a, ...a.querySelectorAll("[id]")].forEach(
+        (r) => r.removeAttribute("id")
+      ), a.setAttribute("data-default", ""), a.slot = `${e}-icon`, a;
+    }
+    return null;
   }
-  async animateExpand() {
-    this.emit("cx-expand"), await L(this.childrenContainer), this.childrenContainer.hidden = !1;
-    const { keyframes: e, options: t } = z(this, "tree-item.expand", {
-      dir: this.localize.dir()
-    });
-    await D(
-      this.childrenContainer,
-      $(e, this.childrenContainer.scrollHeight),
-      t
-    ), this.childrenContainer.style.height = "auto", this.emit("cx-after-expand");
+  /**
+   * Initializes new items by setting the `selectable` property and the expanded/collapsed icons if any
+   */
+  initTreeItem(e) {
+    this.noForwardExpandButtonPlacement || (e.expandButtonPlacement = this.expandButtonPlacement), e.variant = this.variant, e.selectable = this.selection === "multiple", e.focusable = this.focusable, ["expand", "collapse"].filter((t) => !!this.querySelector(`[slot="${t}-icon"]`)).forEach((t) => {
+      const i = e.querySelector(`[slot="${t}-icon"]`), a = this.getExpandButtonIcon(t);
+      a && (i === null ? e.append(a) : i.hasAttribute("data-default") && i.replaceWith(a));
+    }), this.sortable ? (e.sortable = !0, e.sortableGroup = this.getSortableGroup(), this.noDragInside && (e.noDragInside = !0)) : e.sortable = !1;
   }
-  handleLoadingChange() {
-    this.setAttribute("aria-busy", this.loading ? "true" : "false"), this.loading || this.animateExpand();
+  initTreeItems() {
+    this.getAllTreeItems().forEach(this.initTreeItem);
   }
-  handleDisabledChange() {
-    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  handleTreeChanged(e) {
+    for (const t of e) {
+      const i = [...t.addedNodes].filter(
+        o.isTreeItem
+      ), a = [...t.removedNodes].filter(
+        o.isTreeItem
+      );
+      i.forEach(this.initTreeItem), this.lastFocusedItem && a.includes(this.lastFocusedItem) && (this.lastFocusedItem = null);
+    }
   }
-  handleSelectedChange() {
-    this.setAttribute("aria-selected", this.selected ? "true" : "false"), this.hasUpdated && this.emit("cx-selected-change", {
-      detail: {
-        selected: this.selected
-      }
+  /**
+   * Handles the selection of a tree item based on the current selection mode.
+   *
+   * @param selectedItem - The tree item that is being selected or toggled.
+   * @param isSingleSelect - Optional flag to force the item to be selected and unselect all other items.
+   */
+  async selectItem(e, t = !1) {
+    const i = [...this.selectedItems], a = this.getAllTreeItems();
+    if (this.selection === "multiple")
+      t && await Promise.all(
+        a.map(async (n) => {
+          n.selected = !1, n.indeterminate = !1, n.previouslySelected = !1, await n.updateComplete;
+        })
+      ), e.selected = t || !e.selected, e.lazy && !this.disabledAutoExpand && (e.expanded = !0), k(e, !1, this.selection);
+    else if ((this.selection === "single" || e.isLeaf) && !e.noSelect)
+      for (const n of a)
+        n.selected = n === e;
+    else (this.selection === "leaf" || e.noSelect) && (e.expanded = !e.expanded);
+    if (e.noSelect)
+      return;
+    const r = this.selectedItems;
+    (i.length !== r.length || r.some((n) => !i.includes(n)) || this.forceOnChange || t) && Promise.all(r.map((n) => n.updateComplete)).then(() => {
+      this.emit("cx-selection-change", {
+        /**
+         * Use this.selectedItems instead of nextSelection because
+         * this.selectedItems may have changed since the last updateComplete
+         */
+        detail: { selection: this.selectedItems }
+      });
     });
   }
-  handleExpandedChange() {
-    this.isLeaf ? this.removeAttribute("aria-expanded") : this.setAttribute("aria-expanded", this.expanded ? "true" : "false");
+  getAllTreeItems() {
+    return [...this.querySelectorAll("cx-tree-item")];
   }
-  handleExpandAnimation() {
-    this.expanded ? this.lazy ? (this.loading = !0, this.emit("cx-lazy-load")) : this.animateExpand() : this.animateCollapse();
+  getAllDirectTreeItems() {
+    return [...this.querySelectorAll(":scope > cx-tree-item")];
   }
-  async handleLazyChange() {
-    !this.lazy && this.loading && (this.loading = !1, this.handleChildrenSlotChange()), this.selected && (await this.updateComplete, k(this)), this.emit("cx-lazy-change");
+  focusItem(e, t) {
+    e?.focus(t);
   }
-  /** Gets all the nested tree items in this node. */
-  getChildrenItems({
-    includeDisabled: e = !0
-  } = {}) {
-    return this.childrenSlot ? [...this.childrenSlot.assignedElements({ flatten: !0 })].filter(
-      (t) => o.isTreeItem(t) && (e || !t.disabled)
-    ) : [];
+  handleKeyDown(e) {
+    if (![
+      "ArrowDown",
+      "ArrowUp",
+      "ArrowRight",
+      "ArrowLeft",
+      "Home",
+      "End",
+      "Enter",
+      " "
+    ].includes(e.key) || e.composedPath().some(
+      (r) => ["input", "textarea"].includes(
+        r?.tagName?.toLowerCase()
+      )
+    ))
+      return;
+    const t = this.getFocusableItems(), i = this.localize.dir() === "ltr", a = this.localize.dir() === "rtl";
+    if (t.length > 0) {
+      e.preventDefault();
+      const r = t.findIndex((x) => x.matches(":focus")), n = t[r], d = (x) => {
+        const p = t[X(x, 0, t.length - 1)];
+        this.focusItem(p);
+      }, u = (x) => {
+        n.expanded = x;
+      };
+      e.key === "ArrowDown" ? d(r + 1) : e.key === "ArrowUp" ? d(r - 1) : i && e.key === "ArrowRight" || a && e.key === "ArrowLeft" ? !n || n.disabled || n.readonly || n.expanded || n.isLeaf && !n.lazy ? d(r + 1) : u(!0) : i && e.key === "ArrowLeft" || a && e.key === "ArrowRight" ? !n || n.disabled || n.readonly || n.isLeaf || !n.expanded ? d(r - 1) : u(!1) : e.key === "Home" ? d(0) : e.key === "End" ? d(t.length - 1) : (e.key === "Enter" || e.key === " ") && !n.disabled && !n.readonly && this.selectItem(n);
+    }
   }
-  renderExpandButton() {
-    const e = this.localize.dir() === "rtl", t = this.showExpandButton;
-    return m`<div part="expand-button" class=${C({
-      "tree-item__expand-button": !0,
-      "tree-item__expand-button--visible": t
-    })} aria-hidden="true">${y(
-      this.loading,
-      () => m`<cx-spinner part="spinner" class="tree-item__expand-spinner" exportparts="base:spinner__base"></cx-spinner>`
-    )}<slot class="tree-item__expand-icon-slot" name="expand-icon"><cx-icon name=${e ? "chevron_left" : "chevron_right"}></cx-icon></slot><slot class="tree-item__expand-icon-slot" name="collapse-icon"><cx-icon name=${e ? "chevron_left" : "chevron_right"}></cx-icon></slot></div>`;
+  handleClick(e) {
+    const t = e.composedPath(), i = e.target, a = i.closest("cx-tree-item"), r = e.composedPath().some(
+      (u) => u?.classList?.contains("tree-item__expand-button")
+    ), n = e.composedPath().some(
+      (u) => u?.classList?.contains("tree-item__actions")
+    );
+    if (!a || a.disabled || a.readonly || i !== this.clickTarget)
+      return;
+    const d = !t.find(
+      (u) => u.tagName?.toLowerCase() === "cx-checkbox"
+    );
+    r && a.showExpandButton ? a.expanded = !a.expanded : n || this.selectItem(
+      a,
+      d && this.labelSelectSingle && this.selection === "multiple"
+    );
+  }
+  handleMouseDown(e) {
+    this.clickTarget = e.target;
+  }
+  /**
+   * A `mousedown` whose real, non-retargeted origin (`composedPath()[0]`) is
+   * the tree host itself is only reachable by clicking the host's own
+   * scrollbar/gutter — shadow content otherwise fills the box, so a content
+   * click's real origin is always a descendant. The browser's default action
+   * for that mousedown focuses the host, and since the host is itself the
+   * scrollable element (`overflow: auto`), focusing it resets its own
+   * scrollTop natively — before any of our JS runs, so `preventScroll` on a
+   * later `this.focusItem(...)` call can't undo it. Cancel that default
+   * action outright; it doesn't affect the scrollbar's own drag/track
+   * behavior, only whether the mousedown also focuses the element.
+   */
+  handleHostMouseDown(e) {
+    e.composedPath()[0] === this && e.preventDefault();
+  }
+  handleFocusOut(e) {
+    const t = e.relatedTarget;
+    (!t || !this.contains(t)) && (this.tabIndex = 0);
+  }
+  handleFocusIn(e) {
+    const t = e.target;
+    e.target === this && this.focusItem(this.lastFocusedItem || this.getAllTreeItems()[0], {
+      preventScroll: !0
+    }), o.isTreeItem(t) && !t.disabled && !t.readonly && (this.lastFocusedItem && !this.focusable && (this.lastFocusedItem.tabIndex = -1), this.lastFocusedItem = t, this.tabIndex = -1, t.tabIndex = 0);
+  }
+  expandToItem(e) {
+    const t = e.parentElement?.closest("cx-tree-item");
+    t && !t.expanded && !t.lazy && (t.expanded = !0, this.expandToItem(t));
+  }
+  handleSlotChange() {
+    this.initTreeItems();
   }
   handleSortableUpdate(e) {
-    const t = this.getChildrenItems({ includeDisabled: !0 });
+    const t = this.getAllDirectTreeItems();
     this.emit("cx-reorder", {
       detail: {
         from: e.from,
@@ -621,19 +720,23 @@ let o = class extends F {
       }
     });
   }
+  destroySortable() {
+    this.removeEventListener("cx-drag-start", this.handleSortableStart), this.removeEventListener("cx-drag-end", this.handleSortableEnd), this.sortableInstance && (this.sortableInstance.destroy(), this.sortableInstance = null);
+  }
+  getSortableGroup() {
+    if (!this.disabledSortableGroup)
+      return this.sortableGroup || (this.sortableGroup = ee()), this.sortableGroup;
+  }
   handleSortableStart() {
-    this.emit("cx-drag-start");
+    this.setAttribute("dragging", "");
   }
   handleSortableEnd() {
-    this.emit("cx-drag-end");
-  }
-  destroySortable() {
-    this.removeEventListener("dragstart", this.onDragStart), this.sortableInstance && (this.sortableInstance.destroy(), this.sortableInstance = null);
+    this.removeAttribute("dragging");
   }
   initSortable() {
-    this.addEventListener("dragstart", this.onDragStart), this.focusable || this.setAttribute("tabindex", "-1"), this.sortableInstance = v.create(this, {
+    this.addEventListener("cx-drag-start", this.handleSortableStart), this.addEventListener("cx-drag-end", this.handleSortableEnd), this.sortableInstance = v.create(this, {
       ...M({
-        group: this.sortableGroup,
+        group: this.getSortableGroup(),
         onAdd: this.handleSortableUpdate,
         onEnd: this.handleSortableEnd,
         onRemove: this.handleSortableUpdate,
@@ -642,218 +745,115 @@ let o = class extends F {
       })
     });
   }
+  async handleSelectionChange() {
+    const e = this.selection === "multiple", t = this.getAllTreeItems();
+    this.setAttribute(
+      "aria-multiselectable",
+      e ? "true" : "false"
+    );
+    for (const i of t)
+      i.selectable = e;
+    e ? (await this.updateComplete, [...this.querySelectorAll(":scope > cx-tree-item")].forEach(
+      (i) => k(i, !0, this.selection)
+    )) : this.autoExpandToSelected || t.forEach((i) => {
+      i.selected = !1, i.indeterminate = !1;
+    });
+  }
   updated(e) {
-    super.updated(e), (e.has("sortable") || e.has("sortableGroup")) && (this.destroySortable(), this.sortable && this.initSortable());
+    super.updated(e), e.has("sortable") && (this.destroySortable(), this.sortable && this.initSortable());
   }
-  renderBase(e) {
-    const t = this.showExpandButton;
-    return this.href ? m`<a id="anchor" part="base" class=${C({
-      "tree-item": !0,
-      "tree-item--disabled": this.disabled,
-      "tree-item--expanded": this.expanded,
-      "tree-item--has-expand-button": t,
-      "tree-item--leaf": this.isLeaf,
-      "tree-item--rtl": this.localize.dir() === "rtl",
-      "tree-item--selected": this.selected
-    })} href=${_(this.href)} target=${_(this.target)} download=${_(this.download)} rel=${_(this.rel)} draggable=${this.sortable ? "false" : E} ?inert=${this.disabled}>${e}</a>` : m`<div part="base" class=${C({
-      "tree-item": !0,
-      "tree-item--disabled": this.disabled,
-      "tree-item--expanded": this.expanded,
-      "tree-item--has-expand-button": t,
-      "tree-item--leaf": this.isLeaf,
-      "tree-item--rtl": this.localize.dir() === "rtl",
-      "tree-item--selected": this.selected
-    })}>${e}</div>`;
+  /**
+   * Returns the list of tree items that are selected in the tree.
+   *
+   * @internal
+   */
+  get selectedItems() {
+    const e = this.getAllTreeItems(), t = (i) => i.partialSyncCheckboxes ? i.selected || i.indeterminate && i.previouslySelected : i.selected;
+    return e.filter(t);
+  }
+  /**
+   * Gets focusable tree items in the tree.
+   *
+   * @internal
+   */
+  getFocusableItems() {
+    const e = this.getAllTreeItems(), t = /* @__PURE__ */ new Set();
+    return e.filter((i) => {
+      if (i.disabled || i.readonly)
+        return !1;
+      const a = i.parentElement?.closest("[role=treeitem]");
+      return a instanceof o ? (a && (!a.expanded || a.loading || t.has(a)) && t.add(i), !t.has(i)) : !0;
+    });
   }
   render() {
-    return this.renderBase(m`<div class="tree-item__item" part="
-            item
-            ${this.disabled ? "item--disabled" : ""}
-            ${this.expanded ? "item--expanded" : ""}
-            ${this.indeterminate ? "item--indeterminate" : ""}
-            ${this.selected ? "item--selected" : ""}
-          "><div class="tree-item__indentation" part="indentation"></div>${y(
-      this.expandButtonPlacement === "start",
-      this.renderExpandButton,
-      () => E
-    )}
-        ${y(
-      this.selectable,
-      () => m`<cx-checkbox part="checkbox" aria-label=${this.localize.term("checkbox")} exportparts="
-                base:checkbox__base,
-                control:checkbox__control,
-                control--checked:checkbox__control--checked,
-                control--indeterminate:checkbox__control--indeterminate,
-                checked-icon:checkbox__checked-icon,
-                indeterminate-icon:checkbox__indeterminate-icon,
-                label:checkbox__label
-              " class="tree-item__checkbox" ?disabled=${this.disabled} ?checked=${X(this.selected)} ?indeterminate=${this.indeterminate} tabindex="-1"></cx-checkbox>`
-    )}
-
-        ${y(
-      this.maxLines > 0,
-      () => m`<cx-line-clamp class="tree-item__label" part="label" lines=${this.maxLines}><slot></slot></cx-line-clamp>`,
-      () => m`<slot class="tree-item__label" part="label"></slot>`
-    )}<slot class="tree-item__actions" part="actions" name="actions"></slot>${y(
-      this.expandButtonPlacement === "end",
-      this.renderExpandButton,
-      () => E
-    )}</div><div class="tree-item__children" part="children" role="group"><slot name="children" @slotchange=${this.handleChildrenSlotChange}></slot></div>`);
+    return m`<div part="base" class="tree" @click=${this.handleClick} @keydown=${this.handleKeyDown} @mousedown=${this.handleMouseDown}><slot part="children" @slotchange=${this.handleSlotChange}></slot><span hidden aria-hidden="true"><slot name="expand-icon"></slot></span><span hidden aria-hidden="true"><slot name="collapse-icon"></slot></span></div>`;
   }
 };
-o.styles = [O, re];
-o.dependencies = {
-  "cx-checkbox": j,
-  "cx-icon": K,
-  "cx-line-clamp": V,
-  "cx-spinner": W
-};
-s([
+c.styles = [O, re];
+h([
   f("slot:not([name])")
-], o.prototype, "defaultSlot", 2);
-s([
-  f("slot[name=children]")
-], o.prototype, "childrenSlot", 2);
-s([
-  f(".tree-item__item")
-], o.prototype, "itemElement", 2);
-s([
-  f(".tree-item__children")
-], o.prototype, "childrenContainer", 2);
-s([
-  f(".tree-item__expand-button slot")
-], o.prototype, "expandButtonSlot", 2);
-s([
-  l({ reflect: !0, type: Boolean })
-], o.prototype, "expanded", 2);
-s([
-  l({ reflect: !0, type: Boolean })
-], o.prototype, "selected", 2);
-s([
-  l({ reflect: !0, type: Boolean })
-], o.prototype, "disabled", 2);
-s([
-  l({ reflect: !0, type: Boolean })
-], o.prototype, "readonly", 2);
-s([
-  l({ reflect: !0, type: Boolean })
-], o.prototype, "lazy", 2);
-s([
-  l()
-], o.prototype, "href", 2);
-s([
-  l()
-], o.prototype, "target", 2);
-s([
-  l()
-], o.prototype, "rel", 2);
-s([
-  l()
-], o.prototype, "download", 2);
-s([
-  l({ attribute: "itemid", reflect: !0, type: String })
-], o.prototype, "itemId", 2);
-s([
+], c.prototype, "defaultSlot", 2);
+h([
+  f("slot[name=expand-icon]")
+], c.prototype, "expandedIconSlot", 2);
+h([
+  f("slot[name=collapse-icon]")
+], c.prototype, "collapsedIconSlot", 2);
+h([
   l({ reflect: !0, type: Boolean })
-], o.prototype, "sortable", 2);
-s([
-  l({ attribute: "no-drag", reflect: !0, type: Boolean })
-], o.prototype, "noDrag", 2);
-s([
-  l({ attribute: "no-select", reflect: !0, type: Boolean })
-], o.prototype, "noSelect", 2);
-s([
-  l({ attribute: "no-drag-inside", reflect: !0, type: Boolean })
-], o.prototype, "noDragInside", 2);
-s([
+], c.prototype, "sortable", 2);
+h([
   l({ attribute: "sortable-group", type: String })
-], o.prototype, "sortableGroup", 2);
-s([
+], c.prototype, "sortableGroup", 2);
+h([
+  l({ attribute: "disabled-sortable-group", type: Boolean })
+], c.prototype, "disabledSortableGroup", 2);
+h([
+  l()
+], c.prototype, "selection", 2);
+h([
+  l({ attribute: "disabled-auto-expand", type: Boolean })
+], c.prototype, "disabledAutoExpand", 2);
+h([
+  l({ attribute: "auto-expand-to-selected", type: Boolean })
+], c.prototype, "autoExpandToSelected", 2);
+h([
   l({
     attribute: "expand-button-placement",
     reflect: !0,
     type: String
   })
-], o.prototype, "expandButtonPlacement", 2);
-s([
+], c.prototype, "expandButtonPlacement", 2);
+h([
   l({ attribute: "no-forward-expand-button-placement", type: Boolean })
-], o.prototype, "noForwardExpandButtonPlacement", 2);
-s([
+], c.prototype, "noForwardExpandButtonPlacement", 2);
+h([
   l({ reflect: !0, type: String })
-], o.prototype, "variant", 2);
-s([
-  l({
-    attribute: "disabled-sync-checkboxes",
-    reflect: !0,
-    type: Boolean
-  })
-], o.prototype, "disabledSyncCheckboxes", 2);
-s([
-  l({
-    attribute: "partial-sync-checkboxes",
-    reflect: !0,
-    type: Boolean
-  })
-], o.prototype, "partialSyncCheckboxes", 2);
-s([
-  l({ attribute: "previously-selected", reflect: !0, type: Boolean })
-], o.prototype, "previouslySelected", 2);
-s([
+], c.prototype, "variant", 2);
+h([
+  l({ attribute: "force-on-change", type: Boolean })
+], c.prototype, "forceOnChange", 2);
+h([
+  l({ attribute: "label-select-single", reflect: !0, type: Boolean })
+], c.prototype, "labelSelectSingle", 2);
+h([
+  l({ attribute: "no-drag-inside", reflect: !0, type: Boolean })
+], c.prototype, "noDragInside", 2);
+h([
   l({ reflect: !0, type: Boolean })
-], o.prototype, "focusable", 2);
-s([
-  l({ attribute: "max-lines", type: Number })
-], o.prototype, "maxLines", 2);
-s([
-  g()
-], o.prototype, "indeterminate", 2);
-s([
-  g()
-], o.prototype, "isLeaf", 2);
-s([
-  g()
-], o.prototype, "loading", 2);
-s([
-  g()
-], o.prototype, "selectable", 2);
-s([
+], c.prototype, "focusable", 2);
+h([
   g()
-], o.prototype, "sortableInstance", 2);
-s([
-  b("loading", { waitUntilFirstUpdate: !0 })
-], o.prototype, "handleLoadingChange", 1);
-s([
-  b("disabled")
-], o.prototype, "handleDisabledChange", 1);
-s([
-  b("selected")
-], o.prototype, "handleSelectedChange", 1);
-s([
-  b("expanded", { waitUntilFirstUpdate: !0 })
-], o.prototype, "handleExpandedChange", 1);
-s([
-  b("expanded", { waitUntilFirstUpdate: !0 })
-], o.prototype, "handleExpandAnimation", 1);
-s([
-  b("lazy", { waitUntilFirstUpdate: !0 })
-], o.prototype, "handleLazyChange", 1);
-o = s([
-  U("cx-tree-item")
-], o);
-G("tree-item.expand", {
-  keyframes: [
-    { height: "0", opacity: "0", overflow: "hidden" },
-    { height: "auto", opacity: "1", overflow: "hidden" }
-  ],
-  options: { duration: 250, easing: "cubic-bezier(0.4, 0.0, 0.2, 1)" }
-});
-G("tree-item.collapse", {
-  keyframes: [
-    { height: "auto", opacity: "1", overflow: "hidden" },
-    { height: "0", opacity: "0", overflow: "hidden" }
-  ],
-  options: { duration: 200, easing: "cubic-bezier(0.4, 0.0, 0.2, 1)" }
-});
+], c.prototype, "sortableInstance", 2);
+h([
+  b(["sortable", "variant"])
+], c.prototype, "initTreeItems", 1);
+h([
+  b("selection")
+], c.prototype, "handleSelectionChange", 1);
+c = h([
+  U("cx-tree")
+], c);
 export {
   o as C,
   c as a,