@nyx-ds/treeview 0.1.5 → 0.1.6

package/dist/treeview.js

@@ -1,5 +1,5 @@
-import { LitElement as Z, nothing as m, html as h, unsafeCSS as Y } from "lit";
-import { property as J, state as v } from "lit/decorators.js";
+import { LitElement as Z, nothing as b, html as f, unsafeCSS as Y } from "lit";
+import { property as J, state as m } from "lit/decorators.js";
 import { repeat as Q } from "lit/directives/repeat.js";
 import { classMap as g } from "lit/directives/class-map.js";
 import { chevronRightRegular as X, magnifyingGlass as ee } from "@nyx-ds/core";
@@ -9,61 +9,61 @@ import "@nyx-ds/checkbox";
 import "@nyx-ds/radio";
 import "@nyx-ds/icon";
 import "@nyx-ds/button";
-function te(n, e) {
+function te(o, e) {
   return function(t, i) {
-    const { native: s = !1, ...r } = i || {}, o = s ? new Event(e, r) : new CustomEvent(e, { detail: t, ...r });
-    n.dispatchEvent(o);
+    const { native: s = !1, ...r } = i || {}, n = s ? new Event(e, r) : new CustomEvent(e, { detail: t, ...r });
+    o.dispatchEvent(n);
   };
 }
-function ie(n) {
+function ie(o) {
   return (e, t) => {
     Object.defineProperty(e, t, {
       get() {
-        return te(this, n);
+        return te(this, o);
       },
       enumerable: !0,
       configurable: !0
     });
   };
 }
-const se = ":host{display:flex;flex-direction:column;width:100%;--treeview-radius: var(--nyx-radii-s);--treeview-search-padding: var(--nyx-sizing-1-25) var(--nyx-sizing-1-75) 0 var(--nyx-sizing-1-75);--treeview-header-padding: var(--nyx-sizing-2) var(--nyx-sizing-2) var(--nyx-sizing-1-75) var(--nyx-sizing-2);--treeview-row-padding: var(--nyx-sizing-1) var(--nyx-sizing-2);--treeview-row-gap: var(--nyx-sizing-2);--treeview-col-gap: var(--nyx-sizing-1);--treeview-node-gap: var(--nyx-sizing-1);--treeview-row-min-height: 48px;--treeview-indent-base: 16px;--treeview-indent-step: 24px;--treeview-expander-wrapper-size: var(--nyx-sizing-4);--treeview-expander-padding: var(--nyx-sizing-1-25);--treeview-col-width: var(--treeview-header-icon-size);--treeview-column-count: 0;--treeview-scrollbar-gutter: 15px;--treeview-background: var(--nyx-color-neutral-background-primary);--treeview-border-color: var(--nyx-color-neutral-border-tertiary);--treeview-content-color: var(--nyx-color-neutral-content-primary);--treeview-focus-border-color: var(--nyx-color-brand-border-default);--treeview-row-selected-background: var(--nyx-color-brand-background-softer);--treeview-row-selected-hover-background: var( --nyx-color-brand-background-softer-hover );--treeview-row-selected-color: var(--nyx-color-neutral-content-primary);--treeview-font-family: var(--nyx-font-family-font-family);--treeview-title-font-size: var(--nyx-label-medium-font-size);--treeview-title-line-height: var(--nyx-label-medium-line-height);--treeview-text-font-size: var(--nyx-label-medium-font-size);--treeview-text-line-height: var(--nyx-label-medium-line-height);--treeview-header-icon-size: var(--nyx-label-large-font-size);--treeview-node-icon-size: var(--nyx-label-medium-font-size);--treeview-expander-icon-size: var(--nyx-label-large-font-size);--treeview-row-hover-background: var(--nyx-color-neutral-background-secondary);--treeview-row-hover-color: var(--nyx-color-brand-content-hover)}.nyx-treeview{display:flex;flex-direction:column;width:100%;font-family:var(--treeview-font-family);align-items:flex-start;border-radius:var(--treeview-radius);border:1px solid var(--treeview-border-color);background:var(--treeview-background);box-sizing:border-box}.search-container{display:flex;padding:var(--treeview-search-padding);flex-direction:column;align-items:flex-start;align-self:stretch}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.tree-scroll{width:100%;display:flex;flex-direction:column;min-height:0}.tree-body--virtual{display:flex;flex-direction:column;flex:1 1 auto;min-height:280px;max-height:var(--treeview-max-height, 480px);overflow:hidden}.tree-virtualizer{flex:1 1 auto;width:100%;min-height:280px;scrollbar-gutter:stable}.node-wrapper--flat{width:100%}.tree-header{display:flex;justify-content:space-between;align-items:center;align-self:stretch;padding:var(--treeview-header-padding);border-bottom:.5px solid var(--treeview-border-color);box-sizing:border-box}.tree-title{color:var(--treeview-content-color);font-size:var(--treeview-title-font-size);line-height:var(--treeview-title-line-height);font-weight:600;flex:1 1 auto;min-width:0}.tree-header--no-columns .tree-title{flex:1 1 auto}.nyx-treeview--no-columns .header-columns,.nyx-treeview--no-columns .node-columns{display:none}.nyx-treeview--no-columns .tree-header{padding-inline-end:var(--nyx-sizing-2, 16px)}.header-columns,.node-columns{display:flex;align-items:center;justify-content:flex-end;gap:var(--treeview-col-gap);flex-shrink:0}.header-columns{padding-inline-end:0}.nyx-treeview--virtual .header-columns{padding-inline-end:var(--treeview-scrollbar-gutter)}.col-cell{min-width:var(--treeview-col-width);width:var(--treeview-col-width);flex:0 0 auto;display:flex;justify-content:center;align-items:center;box-sizing:border-box}.header-columns ::slotted(nyx-icon){display:flex;justify-content:center;align-items:center;--nyx-icon-size: var(--treeview-header-icon-size);color:var(--treeview-content-color)}.tree-body{width:100%;display:flex;flex-direction:column}.node-wrapper{display:flex;flex-direction:column;width:100%}.node-row{--treeview-row-level: 0;display:flex;align-items:center;justify-content:space-between;min-height:var(--treeview-row-min-height);border-bottom:.5px solid var(--treeview-border-color);gap:var(--treeview-row-gap);padding:var(--treeview-row-padding);padding-left:calc(var(--treeview-indent-base) + var(--treeview-row-level) * var(--treeview-indent-step));box-sizing:border-box;background:transparent;color:var(--treeview-content-color);outline:none;cursor:default}.node-row:hover{background:var(--treeview-row-hover-background);color:var(--treeview-row-hover-color)}.node-row:focus-within{background:var(--treeview-row-hover-background)!important;color:var(--treeview-row-hover-color)!important}.node-row:hover .expander nyx-icon,.node-row:hover .node-type-icon-wrapper ::slotted(nyx-icon){color:var(--treeview-row-hover-color)}.node-row:focus-within .expander nyx-icon,.node-row:focus-within .node-type-icon-wrapper ::slotted(nyx-icon){color:var(--treeview-row-hover-color)}.node-row.selectable.selected{background-color:var(--treeview-row-selected-background);color:var(--treeview-row-selected-color)}.node-row.selectable.selected .expander nyx-icon,.node-row.selectable.selected .node-type-icon-wrapper ::slotted(nyx-icon){color:var(--treeview-row-selected-color)}.node-row.selectable.selected:hover{background-color:var(--treeview-row-selected-hover-background);color:var(--treeview-row-selected-color)}.node-row.selectable.selected:focus-within{background-color:var(--treeview-row-selected-background)!important;color:var(--treeview-row-selected-color)!important}.node-row.selectable.selected:focus-within .expander nyx-icon,.node-row.selectable.selected:focus-within .node-type-icon-wrapper ::slotted(nyx-icon){color:var(--treeview-row-selected-color)}.node-row.selectable.selected:hover:focus-within{background-color:var(--treeview-row-selected-hover-background)!important}.node-row:focus-visible{position:relative;z-index:2;outline:2px solid var(--treeview-focus-border-color);outline-offset:-3px;background:var(--treeview-row-hover-background)!important;color:var(--treeview-row-hover-color)}.row-checkbox{display:flex;align-items:center;margin-right:4px}.node-info{display:flex;align-items:center;gap:var(--treeview-node-gap);flex:1 0 0;overflow:hidden;min-height:32px;padding-left:4px}.expander{--button-icon-color: inherit;flex-shrink:0;width:var(--treeview-expander-wrapper-size);min-width:var(--treeview-expander-wrapper-size)}.expander-placeholder{display:block;flex-shrink:0;width:var(--treeview-expander-wrapper-size);min-width:var(--treeview-expander-wrapper-size);height:var(--treeview-expander-wrapper-size)}.expander nyx-icon{--nyx-icon-size: var(--treeview-expander-icon-size);transition:transform .2s ease;transform-origin:center}.expander nyx-icon.expanded{transform:rotate(90deg)}.expander:hover,.expander:focus-within{--button-icon-color: var(--treeview-content-color) !important}.expander:hover nyx-icon,.expander:focus-within nyx-icon{color:var(--treeview-content-color)!important;--nyx-icon-color: var(--treeview-content-color) !important}.node-row:hover .expander:hover,.node-row:hover .expander:focus-within{--button-icon-color: var(--treeview-row-hover-color) !important}.node-row:hover .expander:hover nyx-icon,.node-row:hover .expander:focus-within nyx-icon{color:var(--treeview-row-hover-color)!important;--nyx-icon-color: var(--treeview-row-hover-color) !important}.node-type-icon-wrapper{display:flex;align-items:center;justify-content:center;flex-shrink:0}.node-type-icon-wrapper ::slotted(nyx-icon){--nyx-icon-size: var(--treeview-node-icon-size)}.node-text{font-size:var(--treeview-text-font-size);line-height:var(--treeview-text-line-height);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.node-children{width:100%}@media(max-width:768px){.tree-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.tree-header,.tree-body{min-width:calc(250px + ((var(--treeview-col-width) + var(--treeview-col-gap)) * var(--treeview-column-count)))}.node-text{white-space:normal;display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}", re = 200;
-function C(n, e) {
+const se = ":host{display:flex;flex-direction:column;width:100%;--treeview-radius: var(--nyx-radii-s);--treeview-search-padding: var(--nyx-sizing-1-25) var(--nyx-sizing-1-75) 0 var(--nyx-sizing-1-75);--treeview-header-padding: var(--nyx-sizing-2) var(--nyx-sizing-2) var(--nyx-sizing-1-75) var(--nyx-sizing-2);--treeview-row-padding: var(--nyx-sizing-1) var(--nyx-sizing-2);--treeview-row-gap: var(--nyx-sizing-2);--treeview-col-gap: var(--nyx-sizing-1);--treeview-node-gap: var(--nyx-sizing-1);--treeview-row-min-height: 48px;--treeview-indent-base: 16px;--treeview-indent-step: 24px;--treeview-expander-wrapper-size: var(--nyx-sizing-4);--treeview-expander-padding: var(--nyx-sizing-1-25);--treeview-col-width: var(--treeview-header-icon-size);--treeview-column-count: 0;--treeview-scrollbar-gutter: 0px;--treeview-background: var(--nyx-color-neutral-background-primary);--treeview-border-color: var(--nyx-color-neutral-border-tertiary);--treeview-content-color: var(--nyx-color-neutral-content-primary);--treeview-focus-border-color: var(--nyx-color-brand-border-default);--treeview-row-selected-background: var(--nyx-color-brand-background-softer);--treeview-row-selected-hover-background: var( --nyx-color-brand-background-softer-hover );--treeview-row-selected-color: var(--nyx-color-neutral-content-primary);--treeview-font-family: var(--nyx-font-family-font-family);--treeview-title-font-size: var(--nyx-label-medium-font-size);--treeview-title-line-height: var(--nyx-label-medium-line-height);--treeview-text-font-size: var(--nyx-label-medium-font-size);--treeview-text-line-height: var(--nyx-label-medium-line-height);--treeview-header-icon-size: var(--nyx-label-large-font-size);--treeview-node-icon-size: var(--nyx-label-medium-font-size);--treeview-expander-icon-size: var(--nyx-label-large-font-size);--treeview-row-hover-background: var(--nyx-color-neutral-background-secondary);--treeview-row-hover-color: var(--nyx-color-brand-content-hover)}.nyx-treeview{display:flex;flex-direction:column;width:100%;font-family:var(--treeview-font-family);align-items:flex-start;border-radius:var(--treeview-radius);border:1px solid var(--treeview-border-color);background:var(--treeview-background);box-sizing:border-box}.search-container{display:flex;padding:var(--treeview-search-padding);flex-direction:column;align-items:flex-start;align-self:stretch}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.tree-scroll{width:100%;display:flex;flex-direction:column;min-height:0}.tree-body--virtual{display:flex;flex-direction:column;flex:1 1 auto;min-height:280px;max-height:var(--treeview-max-height, 480px);overflow:hidden}.tree-virtualizer{flex:1 1 auto;width:100%;min-height:280px;scrollbar-gutter:stable}.node-wrapper--flat{width:100%}.tree-header{display:flex;justify-content:space-between;align-items:center;align-self:stretch;padding:var(--treeview-header-padding);border-bottom:.5px solid var(--treeview-border-color);box-sizing:border-box}.tree-title{color:var(--treeview-content-color);font-size:var(--treeview-title-font-size);line-height:var(--treeview-title-line-height);font-weight:600;flex:1 1 auto;min-width:0}.tree-header--no-columns .tree-title{flex:1 1 auto}.nyx-treeview--no-columns .header-columns,.nyx-treeview--no-columns .node-columns{display:none}.nyx-treeview--no-columns .tree-header{padding-inline-end:var(--nyx-sizing-2, 16px)}.header-columns,.node-columns{display:flex;align-items:center;justify-content:flex-end;gap:var(--treeview-col-gap);flex-shrink:0}.header-columns{padding-inline-end:0}.header-columns .col-cell{height:var(--treeview-header-icon-size);line-height:0}.header-columns slot{align-items:center;display:flex;height:100%;justify-content:center;line-height:0;width:100%}.nyx-treeview--virtual .header-columns{padding-inline-end:var(--treeview-scrollbar-gutter)}.col-cell{min-width:var(--treeview-col-width);width:var(--treeview-col-width);flex:0 0 auto;display:flex;justify-content:center;align-items:center;box-sizing:border-box}.header-columns ::slotted(nyx-icon){align-items:center;display:inline-flex;height:var(--treeview-header-icon-size);justify-content:center;line-height:0;width:var(--treeview-header-icon-size);--nyx-icon-size: var(--treeview-header-icon-size);color:var(--treeview-content-color)}.tree-body{width:100%;display:flex;flex-direction:column}.node-wrapper{display:flex;flex-direction:column;width:100%}.node-row{--treeview-row-level: 0;display:flex;align-items:center;justify-content:space-between;min-height:var(--treeview-row-min-height);border-bottom:.5px solid var(--treeview-border-color);gap:var(--treeview-row-gap);padding:var(--treeview-row-padding);padding-left:calc(var(--treeview-indent-base) + var(--treeview-row-level) * var(--treeview-indent-step));box-sizing:border-box;background:transparent;color:var(--treeview-content-color);outline:none;cursor:default}.node-row:hover{background:var(--treeview-row-hover-background);color:var(--treeview-row-hover-color)}.node-row:focus-within{background:var(--treeview-row-hover-background)!important;color:var(--treeview-row-hover-color)!important}.node-row:hover .expander nyx-icon,.node-row:hover .node-type-icon-wrapper ::slotted(nyx-icon){color:var(--treeview-row-hover-color)}.node-row:focus-within .expander nyx-icon,.node-row:focus-within .node-type-icon-wrapper ::slotted(nyx-icon){color:var(--treeview-row-hover-color)}.node-row.selectable.selected{background-color:var(--treeview-row-selected-background);color:var(--treeview-row-selected-color)}.node-row.selectable.selected .expander nyx-icon,.node-row.selectable.selected .node-type-icon-wrapper ::slotted(nyx-icon){color:var(--treeview-row-selected-color)}.node-row.selectable.selected:hover{background-color:var(--treeview-row-selected-hover-background);color:var(--treeview-row-selected-color)}.node-row.selectable.selected:focus-within{background-color:var(--treeview-row-selected-background)!important;color:var(--treeview-row-selected-color)!important}.node-row.selectable.selected:focus-within .expander nyx-icon,.node-row.selectable.selected:focus-within .node-type-icon-wrapper ::slotted(nyx-icon){color:var(--treeview-row-selected-color)}.node-row.selectable.selected:hover:focus-within{background-color:var(--treeview-row-selected-hover-background)!important}.node-row:focus-visible{position:relative;z-index:2;outline:2px solid var(--treeview-focus-border-color);outline-offset:-3px;background:var(--treeview-row-hover-background)!important;color:var(--treeview-row-hover-color)}.row-checkbox{display:flex;align-items:center;margin-right:4px}.node-info{display:flex;align-items:center;gap:var(--treeview-node-gap);flex:1 0 0;overflow:hidden;min-height:32px;padding-left:4px}.expander{--button-icon-color: inherit;flex-shrink:0;width:var(--treeview-expander-wrapper-size);min-width:var(--treeview-expander-wrapper-size)}.expander-placeholder{display:block;flex-shrink:0;width:var(--treeview-expander-wrapper-size);min-width:var(--treeview-expander-wrapper-size);height:var(--treeview-expander-wrapper-size)}.expander nyx-icon{--nyx-icon-size: var(--treeview-expander-icon-size);transition:transform .2s ease;transform-origin:center}.expander nyx-icon.expanded{transform:rotate(90deg)}.expander:hover,.expander:focus-within{--button-icon-color: var(--treeview-content-color) !important}.expander:hover nyx-icon,.expander:focus-within nyx-icon{color:var(--treeview-content-color)!important;--nyx-icon-color: var(--treeview-content-color) !important}.node-row:hover .expander:hover,.node-row:hover .expander:focus-within{--button-icon-color: var(--treeview-row-hover-color) !important}.node-row:hover .expander:hover nyx-icon,.node-row:hover .expander:focus-within nyx-icon{color:var(--treeview-row-hover-color)!important;--nyx-icon-color: var(--treeview-row-hover-color) !important}.node-type-icon-wrapper{display:flex;align-items:center;justify-content:center;flex-shrink:0}.node-type-icon-wrapper ::slotted(nyx-icon){--nyx-icon-size: var(--treeview-node-icon-size)}.node-text{font-size:var(--treeview-text-font-size);line-height:var(--treeview-text-line-height);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.node-children{width:100%}@media(max-width:768px){.tree-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.tree-header,.tree-body{min-width:calc(250px + ((var(--treeview-col-width) + var(--treeview-col-gap)) * var(--treeview-column-count)))}.node-text{white-space:normal;display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}", re = 200;
+function R(o, e) {
   const t = e.trim().toLowerCase();
-  return t ? n.toLowerCase().includes(t) : !1;
+  return t ? o.toLowerCase().includes(t) : !1;
 }
-function z(n, e) {
-  return n.includes(e);
+function E(o, e) {
+  return o.includes(e);
 }
-function L(n) {
+function T(o) {
   var s;
   const e = /* @__PURE__ */ new Map(), t = [], i = [];
-  for (let r = n.length - 1; r >= 0; r--)
-    i.push({ node: n[r], parentId: null });
+  for (let r = o.length - 1; r >= 0; r--)
+    i.push({ node: o[r], parentId: null });
   for (; i.length > 0; ) {
-    const { node: r, parentId: o } = i.pop(), l = ((s = r.children) == null ? void 0 : s.map((a) => a.id)) ?? [];
+    const { node: r, parentId: n } = i.pop(), l = ((s = r.children) == null ? void 0 : s.map((a) => a.id)) ?? [];
     if (e.set(r.id, {
       id: r.id,
-      parentId: o,
+      parentId: n,
       normalizedLabel: r.label.toLowerCase(),
       childIds: l,
       hasChildren: l.length > 0
-    }), o === null && t.push(r.id), r.children)
+    }), n === null && t.push(r.id), r.children)
       for (let a = r.children.length - 1; a >= 0; a--)
         i.push({ node: r.children[a], parentId: r.id });
   }
   return { roots: t, byId: e, size: e.size };
 }
-function ne(n) {
+function ne(o) {
   const e = [], t = [];
-  for (let i = n.roots.length - 1; i >= 0; i--)
-    t.push({ id: n.roots[i], visited: !1 });
+  for (let i = o.roots.length - 1; i >= 0; i--)
+    t.push({ id: o.roots[i], visited: !1 });
   for (; t.length > 0; ) {
     const i = t[t.length - 1];
     if (i.visited)
       t.pop(), e.push(i.id);
     else {
       i.visited = !0;
-      const s = n.byId.get(i.id);
+      const s = o.byId.get(i.id);
       if (!s) continue;
       for (let r = s.childIds.length - 1; r >= 0; r--)
         t.push({ id: s.childIds[r], visited: !1 });
@@ -71,72 +71,72 @@ function ne(n) {
   }
   return e;
 }
-function oe(n, e, t) {
+function oe(o, e, t) {
   const i = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Map();
-  for (const o of ne(n)) {
-    const l = n.byId.get(o);
+  for (const n of ne(o)) {
+    const l = o.byId.get(n);
     if (!l) continue;
-    const a = z(
+    const a = E(
       l.normalizedLabel,
       e
     );
     let d = !1;
-    for (const f of l.childIds)
-      if (r.get(f)) {
+    for (const h of l.childIds)
+      if (r.get(h)) {
         d = !0;
         break;
       }
     const c = a || d;
-    if (r.set(o, c), !c || (i.add(o), !l.hasChildren || !d)) continue;
+    if (r.set(n, c), !c || (i.add(n), !l.hasChildren || !d)) continue;
     let u = !1;
-    for (const f of l.childIds) {
-      const w = n.byId.get(f);
-      if (w && z(w.normalizedLabel, e)) {
+    for (const h of l.childIds) {
+      const _ = o.byId.get(h);
+      if (_ && E(_.normalizedLabel, e)) {
         u = !0;
         break;
       }
     }
-    !t.has(o) && (!a || u) && s.add(o);
+    !t.has(n) && (!a || u) && s.add(n);
   }
   return { visibleIds: i, expandIds: s };
 }
-function le(n, e) {
+function le(o, e) {
   const t = e.trim().toLowerCase();
   if (!t) return 0;
-  const i = Array.isArray(n) ? L(n) : n;
+  const i = Array.isArray(o) ? T(o) : o;
   let s = 0;
   for (const r of i.byId.values())
-    z(r.normalizedLabel, t) && s++;
+    E(r.normalizedLabel, t) && s++;
   return s;
 }
-function ae(n, e, t = /* @__PURE__ */ new Set()) {
+function ae(o, e, t = /* @__PURE__ */ new Set()) {
   const i = e.trim().toLowerCase();
   if (!i)
     return { visibleIds: /* @__PURE__ */ new Set(), expandIds: /* @__PURE__ */ new Set() };
-  const s = Array.isArray(n) ? L(n) : n;
+  const s = Array.isArray(o) ? T(o) : o;
   return oe(s, i, t);
 }
-function B(n, e, t = "") {
-  const i = n.children ?? [], s = t.trim().toLowerCase();
+function q(o, e, t = "") {
+  const i = o.children ?? [], s = t.trim().toLowerCase();
   return s ? i.filter(
-    (r) => e.has(r.id) || C(r.label, s)
+    (r) => e.has(r.id) || R(r.label, s)
   ) : i.filter((r) => e.has(r.id));
 }
-function de(n, e, t) {
+function de(o, e, t) {
   const i = e.trim().toLowerCase();
   if (!i) return !1;
-  const s = [n];
+  const s = [o];
   for (; s.length > 0; ) {
     const r = s.pop();
-    for (const o of t(r) ?? []) {
-      if (C(o.label, i)) return !0;
-      s.push(o.id);
+    for (const n of t(r) ?? []) {
+      if (R(n.label, i)) return !0;
+      s.push(n.id);
     }
   }
   return !1;
 }
-function ce(n, e, t) {
-  const i = [n];
+function ce(o, e, t) {
+  const i = [o];
   for (; i.length > 0; ) {
     const s = i.pop();
     for (const r of t(s) ?? []) {
@@ -146,30 +146,30 @@ function ce(n, e, t) {
   }
   return !1;
 }
-function E(n, e, t, i, s, r) {
-  return H(n, e, t) && !ce(i, s, r) && !de(i, e, r);
+function L(o, e, t, i, s, r) {
+  return H(o, e, t) && !ce(i, s, r) && !de(i, e, r);
 }
-function H(n, e, t) {
-  return C(n, e) && !t;
+function H(o, e, t) {
+  return R(o, e) && !t;
 }
-function O(n, e, t, i) {
-  return t || H(n, e, i);
+function O(o, e, t, i) {
+  return t || H(o, e, i);
 }
-function k(n, e) {
+function k(o, e) {
   var t, i;
   if (e) {
-    if (n.selected) return !0;
-  } else if ((((t = n.selectedColumns) == null ? void 0 : t.length) ?? 0) > 0)
+    if (o.selected) return !0;
+  } else if ((((t = o.selectedColumns) == null ? void 0 : t.length) ?? 0) > 0)
     return !0;
-  return ((i = n.children) == null ? void 0 : i.some(
+  return ((i = o.children) == null ? void 0 : i.some(
     (s) => k(s, e)
   )) ?? !1;
 }
-function j(n, e) {
-  const t = n.map((i, s) => ({ node: i, index: s }));
+function j(o, e) {
+  const t = o.map((i, s) => ({ node: i, index: s }));
   return t.sort((i, s) => {
-    const r = k(i.node, e), o = k(s.node, e);
-    return r !== o ? r ? -1 : 1 : i.index - s.index;
+    const r = k(i.node, e), n = k(s.node, e);
+    return r !== n ? r ? -1 : 1 : i.index - s.index;
   }), t.map(({ node: i }) => {
     var s;
     return (s = i.children) != null && s.length ? {
@@ -179,266 +179,266 @@ function j(n, e) {
   });
 }
 const y = 50;
-function he(n) {
-  const e = [], t = n.map((s) => ({ node: s, depth: 0, parentId: null }));
+function he(o) {
+  const e = [], t = o.map((s) => ({ node: s, depth: 0, parentId: null }));
   let i = 0;
   for (; i < t.length; ) {
-    const s = t[i++], { node: r, depth: o, parentId: l } = s, a = !!(r.children && r.children.length > 0);
+    const s = t[i++], { node: r, depth: n, parentId: l } = s, a = !!(r.children && r.children.length > 0);
     if (e.push({
       id: r.id,
-      depth: o,
+      depth: n,
       parentId: l,
       hasChildrenInSource: a
     }), a)
       for (const d of r.children)
-        t.push({ node: d, depth: o + 1, parentId: r.id });
+        t.push({ node: d, depth: n + 1, parentId: r.id });
   }
   return e;
 }
-function ue(n, e = y) {
+function ue(o, e = y) {
   const t = /* @__PURE__ */ new Set();
-  for (const i of n)
+  for (const i of o)
     if (i.depth === 0 && (t.add(i.id), t.size >= e))
       break;
   return t;
 }
-function fe(n, e, t) {
+function _e(o, e, t) {
   const i = [];
-  for (const s of n)
+  for (const s of o)
     if (s.depth === 0 && !e.has(s.id) && (i.push(s.id), i.length >= t))
       break;
   return i;
 }
-function _e(n, e) {
-  return n.some((t) => t.depth === 0 && !e.has(t.id));
+function fe(o, e) {
+  return o.some((t) => t.depth === 0 && !e.has(t.id));
 }
-function pe(n, e, t) {
-  return T(e, n).some((i) => !t.has(i));
+function pe(o, e, t) {
+  return A(e, o).some((i) => !t.has(i));
 }
-function W(n, e, t) {
+function G(o, e, t) {
   return e.some(
-    (i) => i.parentId === n && !t.has(i.id)
+    (i) => i.parentId === o && !t.has(i.id)
   );
 }
-function we(n, e) {
-  const t = n[e];
+function we(o, e) {
+  const t = o[e];
   if (!t) return e;
   let i = e;
-  for (let s = e + 1; s < n.length && !(n[s].level <= t.level); s++)
+  for (let s = e + 1; s < o.length && !(o[s].level <= t.level); s++)
     i = s;
   return i;
 }
-function ve(n, e, t, i, s, r, o = 0) {
-  if (n.length === 0) return;
+function me(o, e, t, i, s, r, n = 0) {
+  if (o.length === 0) return;
   const l = Math.min(
     Math.max(0, e),
-    Math.max(0, n.length - 1)
+    Math.max(0, o.length - 1)
   ), a = Math.min(
     Math.max(l, t),
-    Math.max(0, n.length - 1)
-  ), d = Math.max(0, Math.floor(o));
+    Math.max(0, o.length - 1)
+  ), d = Math.max(0, Math.floor(n));
   let c;
-  for (let u = 0; u < n.length; u++) {
-    const f = n[u];
-    if (!i.has(f.node.id) || !W(f.node.id, s, r)) continue;
-    const w = we(n, u), b = Math.max(u, w - d);
-    l <= w && a >= b && (c = f.node.id);
+  for (let u = 0; u < o.length; u++) {
+    const h = o[u];
+    if (!i.has(h.node.id) || !G(h.node.id, s, r)) continue;
+    const _ = we(o, u), v = Math.max(u, _ - d);
+    l <= _ && a >= v && (c = h.node.id);
   }
   return c;
 }
-function me(n, e) {
+function ve(o, e) {
   const t = [];
-  let i = e.get(n);
+  let i = e.get(o);
   for (; (i == null ? void 0 : i.parentId) != null; )
     t.push(i.parentId), i = e.get(i.parentId);
   return t;
 }
-function V(n, e, t) {
+function V(o, e, t) {
   if (t < 0) return [];
-  const i = $(n), s = [];
+  const i = M(o), s = [];
   for (const r of e) {
-    const o = [
+    const n = [
       { id: r, level: 0 }
     ];
-    for (; o.length > 0; ) {
-      const l = o.pop();
+    for (; n.length > 0; ) {
+      const l = n.pop();
       if (l.level > t) continue;
       s.push(l.id);
       const a = i.get(l.id);
       if (!(!(a != null && a.length) || l.level >= t))
         for (let d = a.length - 1; d >= 0; d--)
-          o.push({ id: a[d], level: l.level + 1 });
+          n.push({ id: a[d], level: l.level + 1 });
     }
   }
   return s;
 }
-function xe(n, e, t) {
+function xe(o, e, t) {
   if (t <= 0) return [];
-  const i = $(n), s = [];
+  const i = M(o), s = [];
   for (const r of e) {
-    const o = [
+    const n = [
       { id: r, level: 0 }
     ];
-    for (; o.length > 0; ) {
-      const l = o.pop();
+    for (; n.length > 0; ) {
+      const l = n.pop();
       if (l.level >= t) continue;
       const a = i.get(l.id);
       if (a != null && a.length) {
         s.push(l.id);
         for (let d = a.length - 1; d >= 0; d--)
-          o.push({ id: a[d], level: l.level + 1 });
+          n.push({ id: a[d], level: l.level + 1 });
       }
     }
   }
   return s;
 }
-function P(n, e, t, i) {
-  const s = [], r = (o) => {
-    s.length >= t || !e.has(o) && !s.includes(o) && s.push(o);
+function B(o, e, t, i) {
+  const s = [], r = (n) => {
+    s.length >= t || !e.has(n) && !s.includes(n) && s.push(n);
   };
   if (i != null) {
-    const o = T(n, i);
-    for (const l of o) r(l);
+    const n = A(o, i);
+    for (const l of n) r(l);
   }
-  for (const o of n)
-    if (r(o.id), s.length >= t) break;
+  for (const n of o)
+    if (r(n.id), s.length >= t) break;
   return s;
 }
-function T(n, e) {
-  const t = $(n), i = [], s = [e];
+function A(o, e) {
+  const t = M(o), i = [], s = [e];
   for (; s.length > 0; ) {
     const r = s.pop();
     i.push(r);
-    const o = t.get(r);
-    if (o != null && o.length)
-      for (let l = o.length - 1; l >= 0; l--)
-        s.push(o[l]);
+    const n = t.get(r);
+    if (n != null && n.length)
+      for (let l = n.length - 1; l >= 0; l--)
+        s.push(n[l]);
   }
   return i;
 }
-function $(n) {
+function M(o) {
   const e = /* @__PURE__ */ new Map();
-  for (const t of n) {
+  for (const t of o) {
     const i = t.parentId;
     e.has(i) || e.set(i, []), e.get(i).push(t.id);
   }
   return e;
 }
-function be(n, e, t) {
-  return T(n, e).filter((i) => !t.has(i));
+function be(o, e, t) {
+  return A(o, e).filter((i) => !t.has(i));
 }
-function ge(n, e, t, i = y) {
-  return be(n, e, t).slice(0, i);
+function ge(o, e, t, i = y) {
+  return be(o, e, t).slice(0, i);
 }
-function M(n) {
+function D(o) {
   var e;
   return {
-    ...n,
-    selectedColumns: n.selectedColumns ? [...n.selectedColumns] : void 0,
-    disabledColumns: n.disabledColumns ? [...n.disabledColumns] : void 0,
-    children: (e = n.children) == null ? void 0 : e.map((t) => M(t)),
-    data: n.data
+    ...o,
+    selectedColumns: o.selectedColumns ? [...o.selectedColumns] : void 0,
+    disabledColumns: o.disabledColumns ? [...o.disabledColumns] : void 0,
+    children: (e = o.children) == null ? void 0 : e.map((t) => D(t)),
+    data: o.data
   };
 }
-function ye(n) {
+function ye(o) {
   const e = /* @__PURE__ */ new Map(), t = (i) => {
     var s;
     e.set(i.id, i), (s = i.children) == null || s.forEach(t);
   };
-  return n.forEach(t), e;
+  return o.forEach(t), e;
 }
-function Ie(n, e, t) {
+function Se(o, e, t) {
   const i = (s) => {
     if (!e.has(s.id)) return null;
-    const r = t.get(s.id) ?? s, o = (r.children ?? []).map((a) => i(a)).filter((a) => a !== null), l = M(r);
-    return l.children = o.length > 0 ? o : void 0, l;
+    const r = t.get(s.id) ?? s, n = (r.children ?? []).map((a) => i(a)).filter((a) => a !== null), l = D(r);
+    return l.children = n.length > 0 ? n : void 0, l;
   };
-  return n.map((s) => i(s)).filter((s) => s !== null);
+  return o.map((s) => i(s)).filter((s) => s !== null);
 }
-function U(n) {
-  const e = [], t = n.searchTerm.trim().toLowerCase(), i = (s, r, o, l, a = !1) => {
-    const d = n.hasSearch && !a ? s.filter((c) => n.searchVisibleIds.has(c.id)) : s;
+function P(o) {
+  const e = [], t = o.searchTerm.trim().toLowerCase(), i = (s, r, n, l, a = !1) => {
+    const d = o.hasSearch && !a ? s.filter((c) => o.searchVisibleIds.has(c.id)) : s;
     for (const c of d) {
-      const u = n.hasSearch && !!t && c.label.toLowerCase().includes(t), f = O(
+      const u = o.hasSearch && !!t && c.label.toLowerCase().includes(t), h = O(
         c.label,
         t,
-        o,
+        n,
         l
-      ), w = l || !!u;
+      ), _ = l || !!u;
       if (e.push({
         node: c,
         level: r,
-        revealSubtree: f,
-        parentLabelMatched: w,
-        hasChildrenInSource: n.sourceHasChildren(c.id)
-      }), !n.expandedIds.has(c.id)) continue;
-      const A = n.getSourceChildren ?? ((R) => {
-        var D;
-        return (D = n.items.find((K) => K.id === R)) == null ? void 0 : D.children;
-      }), I = !n.hasSearch || f && E(
+        revealSubtree: h,
+        parentLabelMatched: _,
+        hasChildrenInSource: o.sourceHasChildren(c.id)
+      }), !o.expandedIds.has(c.id)) continue;
+      const S = o.getSourceChildren ?? ((z) => {
+        var N;
+        return (N = o.items.find((K) => K.id === z)) == null ? void 0 : N.children;
+      }), I = !o.hasSearch || h && L(
         c.label,
         t,
         l,
         c.id,
-        n.searchVisibleIds,
-        A
-      ) ? c.children ?? [] : B(
+        o.searchVisibleIds,
+        S
+      ) ? c.children ?? [] : q(
         c,
-        n.searchVisibleIds,
-        n.searchTerm
+        o.searchVisibleIds,
+        o.searchTerm
       );
-      I.length > 0 && i(I, r + 1, f, w, !0);
+      I.length > 0 && i(I, r + 1, h, _, !0);
     }
   };
-  return i(n.items, 0, !1, !1), e;
+  return i(o.items, 0, !1, !1), e;
 }
-function S(n, e) {
-  for (const t of n)
+function C(o, e) {
+  for (const t of o)
     if (!e.has(t)) return !0;
   return !1;
 }
-function G(n, e, t, i = y) {
-  const s = [], r = (o) => {
-    s.length >= i || !e.has(o) && !s.includes(o) && s.push(o);
+function W(o, e, t, i = y) {
+  const s = [], r = (n) => {
+    s.length >= i || !e.has(n) && !s.includes(n) && s.push(n);
   };
-  for (const o of n)
-    if (!e.has(o)) {
-      r(o);
-      for (const l of me(o, t))
+  for (const n of o)
+    if (!e.has(n)) {
+      r(n);
+      for (const l of ve(n, t))
         r(l);
       if (s.length >= i) break;
     }
   return s;
 }
-function F(n, e, t, i = y) {
-  const s = G(
-    n,
+function F(o, e, t, i = y) {
+  const s = W(
+    o,
     e,
     t,
     i
   );
   return s.length === 0 ? !1 : (s.forEach((r) => e.add(r)), !0);
 }
-function Se(n, e) {
-  return e ? `Collapse ${n}` : `Expand ${n}`;
+function Ie(o, e) {
+  return e ? `Collapse ${o}` : `Expand ${o}`;
 }
-function q(n) {
-  return `Select ${n}`;
+function U(o) {
+  return `Select ${o}`;
 }
-function Ce(n, e) {
-  return `${n}, ${e}`;
+function Ce(o, e) {
+  return `${o}, ${e}`;
 }
-function Re(n) {
-  return n === 0 ? "No results found" : n === 1 ? "1 result found" : `${n} results found`;
+function Re(o) {
+  return o === 0 ? "No results found" : o === 1 ? "1 result found" : `${o} results found`;
 }
-var ze = Object.defineProperty, Ee = Object.getOwnPropertyDescriptor, p = (n, e, t, i) => {
-  for (var s = i > 1 ? void 0 : i ? Ee(e, t) : e, r = n.length - 1, o; r >= 0; r--)
-    (o = n[r]) && (s = (i ? o(e, t, s) : o(s)) || s);
+var ze = Object.defineProperty, Ee = Object.getOwnPropertyDescriptor, w = (o, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? Ee(e, t) : e, r = o.length - 1, n; r >= 0; r--)
+    (n = o[r]) && (s = (i ? n(e, t, s) : n(s)) || s);
   return i && s && ze(e, t, s), s;
 }, x;
-const _ = (x = class extends Z {
+const p = (x = class extends Z {
   constructor() {
-    super(...arguments), this._rowSelectionRadioName = `nyx-treeview-row-selection-${x._nextTreeviewId++}`, this._items = [], this._expandedIds = /* @__PURE__ */ new Set(), this._searchTerm = "", this._searchStatusMessage = "", this._searchVisibleIds = /* @__PURE__ */ new Set(), this._searchUserCollapsedIds = /* @__PURE__ */ new Set(), this._searchManualExpandedIds = /* @__PURE__ */ new Set(), this._expandedIdsBeforeSearch = null, this._flatRows = [], this._loadedIds = /* @__PURE__ */ new Set(), this._activeRowId = null, this._sourceItems = [], this._lazyItemsSourceRef = null, this._treeIndex = [], this._indexById = /* @__PURE__ */ new Map(), this._sourceById = /* @__PURE__ */ new Map(), this._lazyScrollLoading = !1, this._searchIndex = null, this._searchIndexSourceRef = null, this._searchDebounceTimer = null;
+    super(...arguments), this._rowSelectionRadioName = `nyx-treeview-row-selection-${x._nextTreeviewId++}`, this._items = [], this._expandedIds = /* @__PURE__ */ new Set(), this._searchTerm = "", this._searchStatusMessage = "", this._searchVisibleIds = /* @__PURE__ */ new Set(), this._searchUserCollapsedIds = /* @__PURE__ */ new Set(), this._searchManualExpandedIds = /* @__PURE__ */ new Set(), this._expandedIdsBeforeSearch = null, this._flatRows = [], this._loadedIds = /* @__PURE__ */ new Set(), this._activeRowId = null, this._sourceItems = [], this._lazyItemsSourceRef = null, this._treeIndex = [], this._indexById = /* @__PURE__ */ new Map(), this._sourceById = /* @__PURE__ */ new Map(), this._lazyScrollLoading = !1, this._lazyVisibleFirst = 0, this._lazyVisibleLast = 9, this._scrollbarGutter = 0, this._searchIndex = null, this._searchIndexSourceRef = null, this._searchDebounceTimer = null, this._selectionStatsById = /* @__PURE__ */ new Map(), this._selectionStatsDirty = !0;
   }
   get options() {
     return this._options;
@@ -477,7 +477,7 @@ const _ = (x = class extends Z {
   }
   _applyItemsFromOptions(e) {
     var i;
-    let t = e.map((s) => M(s));
+    let t = e.map((s) => D(s));
     return this._usesUniqueRowSelection() && this._applyUniqueSelectionConstraint(t), (i = this.options) != null && i.sortSelectedFirst && (t = j(t, this._usesSimpleRowSelection())), t;
   }
   _applyUniqueSelectionConstraint(e) {
@@ -491,7 +491,7 @@ const _ = (x = class extends Z {
   }
   _applyOptionsChange() {
     if (this.options) {
-      if (this._isLazyEnabled()) {
+      if (this._invalidateSelectionStats(), this._isLazyEnabled()) {
         this.options.items !== this._lazyItemsSourceRef && (this._initLazyState(), this._resetSearchDerivedState(), this._searchTerm.trim() && this._recomputeSearchFilter());
         return;
       }
@@ -508,7 +508,7 @@ const _ = (x = class extends Z {
   }
   _initLazyState() {
     var s;
-    this._lazyItemsSourceRef = this.options.items, this._sourceItems = this._applyItemsFromOptions(this.options.items), this._invalidateSearchIndex(), this._treeIndex = he(this._sourceItems), this._indexById = new Map(this._treeIndex.map((r) => [r.id, r])), this._sourceById = ye(this._sourceItems);
+    this._lazyItemsSourceRef = this.options.items, this._sourceItems = this._applyItemsFromOptions(this.options.items), this._invalidateSelectionStats(), this._invalidateSearchIndex(), this._treeIndex = he(this._sourceItems), this._indexById = new Map(this._treeIndex.map((r) => [r.id, r])), this._sourceById = ye(this._sourceItems);
     const e = (s = this.options) == null ? void 0 : s.defaultExpandedLevel, t = this._getLazyPageSize(), i = ue(this._treeIndex, t);
     this._loadedIds = new Set(i), e !== void 0 && e > 0 && this._loadDefaultExpandedLevelForRoots(i, e), this._expandedIds = /* @__PURE__ */ new Set(), e !== void 0 && e > 0 && this._applyLazyDefaultExpansion(i, e), this._activeRowId = null, this._rebuildMaterializedItems(), this._commitLazyRows();
   }
@@ -523,7 +523,7 @@ const _ = (x = class extends Z {
     ), this._expandedIds = new Set(this._expandedIds);
   }
   _rebuildMaterializedItems() {
-    this._items = Ie(
+    this._items = Se(
       this._sourceItems,
       this._loadedIds,
       this._sourceById
@@ -536,6 +536,42 @@ const _ = (x = class extends Z {
   _selectionNode(e) {
     return this._isLazyEnabled() ? this._sourceById.get(e.id) ?? e : e;
   }
+  _invalidateSelectionStats() {
+    this._selectionStatsDirty = !0;
+  }
+  _prepareSelectionStatsCache() {
+    this._selectionStatsDirty && (this._selectionStatsById.clear(), this._selectionStatsDirty = !1);
+  }
+  _buildSelectionStats(e) {
+    var d, c, u;
+    const t = ((c = (d = this.options) == null ? void 0 : d.columns) == null ? void 0 : c.map((h) => h.id)) ?? [], i = new Map(
+      t.map((h) => [h, 0])
+    );
+    let s = 0, r = 0, n = 0, l = 0;
+    for (const h of e.children ?? []) {
+      const _ = this._getSelectionStats(h);
+      s += 1 + _.descendantCount, h.selected && l++, l += _.simpleSelectedDescendantCount, (u = h.children) != null && u.length ? (r += _.simpleLeafCount, n += _.simpleSelectedLeafCount) : (r++, h.selected && n++);
+      for (const v of t) {
+        const S = this._isNodeSelected(h, v) ? 1 : 0;
+        i.set(
+          v,
+          (i.get(v) ?? 0) + S + (_.selectedDescendantCountByColumn.get(v) ?? 0)
+        );
+      }
+    }
+    const a = {
+      descendantCount: s,
+      selectedDescendantCountByColumn: i,
+      simpleLeafCount: r,
+      simpleSelectedLeafCount: n,
+      simpleSelectedDescendantCount: l
+    };
+    return this._selectionStatsById.set(e.id, a), a;
+  }
+  _getSelectionStats(e) {
+    const t = this._selectionNode(e);
+    return this._prepareSelectionStatsCache(), this._selectionStatsById.get(t.id) ?? this._buildSelectionStats(t);
+  }
   _invalidateSearchIndex() {
     this._searchIndex = null, this._searchIndexSourceRef = null;
   }
@@ -545,11 +581,28 @@ const _ = (x = class extends Z {
   }
   _ensureSearchIndex() {
     const e = this._selectionRoots();
-    return this._searchIndex && this._searchIndexSourceRef === e ? this._searchIndex : (this._searchIndexSourceRef = e, this._searchIndex = L(e), this._searchIndex);
+    return this._searchIndex && this._searchIndexSourceRef === e ? this._searchIndex : (this._searchIndexSourceRef = e, this._searchIndex = T(e), this._searchIndex);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this._searchDebounceTimer !== null && (clearTimeout(this._searchDebounceTimer), this._searchDebounceTimer = null);
   }
+  updated(e) {
+    if (super.updated(e), !this._isLazyEnabled()) {
+      this._scrollbarGutter !== 0 && (this._scrollbarGutter = 0);
+      return;
+    }
+    requestAnimationFrame(() => this._syncScrollbarGutter());
+  }
+  _syncScrollbarGutter() {
+    var i;
+    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector(
+      ".tree-virtualizer"
+    ), t = Math.max(
+      0,
+      ((e == null ? void 0 : e.offsetWidth) ?? 0) - ((e == null ? void 0 : e.clientWidth) ?? 0)
+    );
+    this._scrollbarGutter !== t && (this._scrollbarGutter = t);
+  }
   _findNodeById(e, t) {
     for (const i of e) {
       if (i.id === t) return i;
@@ -560,11 +613,11 @@ const _ = (x = class extends Z {
     }
   }
   _forEachInSubtree(e, t, i) {
-    const s = this._findNodeById(e, t);
+    const s = this._isLazyEnabled() ? this._sourceById.get(t) : this._findNodeById(e, t);
     if (!s) return;
-    const r = (o) => {
+    const r = (n) => {
       var l;
-      i(o), (l = o.children) == null || l.forEach(r);
+      i(n), (l = n.children) == null || l.forEach(r);
     };
     r(s);
   }
@@ -573,20 +626,20 @@ const _ = (x = class extends Z {
     return t == null ? void 0 : t.children;
   }
   _loadMoreNodes(e) {
-    var o, l;
+    var n, l;
     if (!this._isLazyEnabled()) return;
     const t = this._getLazyPageSize();
     let i, s = [];
     if (this._isSearchActive())
-      if (S(this._searchVisibleIds, this._loadedIds))
-        i = G(
+      if (C(this._searchVisibleIds, this._loadedIds))
+        i = W(
           this._searchVisibleIds,
           this._loadedIds,
           this._indexById,
           t
         );
       else if (e != null && this._hasExclusiveSearchFolderWithUnloadedChildren())
-        i = P(
+        i = B(
           this._treeIndex,
           this._loadedIds,
           t,
@@ -595,19 +648,19 @@ const _ = (x = class extends Z {
       else
         return;
     else if (e != null)
-      i = P(
+      i = B(
         this._treeIndex,
         this._loadedIds,
         t,
         e
       );
     else {
-      s = fe(
+      s = _e(
         this._treeIndex,
         this._loadedIds,
         t
       ), i = [...s];
-      const a = (o = this.options) == null ? void 0 : o.defaultExpandedLevel;
+      const a = (n = this.options) == null ? void 0 : n.defaultExpandedLevel;
       a !== void 0 && a > 0 && i.push(
         ...V(
           this._treeIndex,
@@ -636,10 +689,10 @@ const _ = (x = class extends Z {
   }
   /** Refresh lazy flat rows after intentional lazy state mutations. */
   _commitLazyRows() {
-    this._isLazyEnabled() && this._syncFlatRows();
+    this._isLazyEnabled() && (this._syncFlatRows(), this._generateLightDomIcons());
   }
   _syncFlatRows() {
-    this._flatRows = U({
+    this._flatRows = P({
       items: this._items,
       expandedIds: this._expandedIds,
       hasSearch: !!this._searchTerm.trim(),
@@ -680,14 +733,14 @@ const _ = (x = class extends Z {
   _getSearchScrollTargetIndex() {
     const e = this._searchTerm.trim().toLowerCase();
     if (!e || this._flatRows.length === 0) return 0;
-    const t = this._flatRows.map((r, o) => ({ row: r, index: o })).filter(({ row: r }) => C(r.node.label, e));
+    const t = this._flatRows.map((r, n) => ({ row: r, index: n })).filter(({ row: r }) => R(r.node.label, e));
     if (t.length === 0) return 0;
     const i = t.reduce(
-      (r, o) => o.row.level >= r.row.level ? o : r
+      (r, n) => n.row.level >= r.row.level ? n : r
     ), [s] = t;
     if (t.length > 1 && s.row.hasChildrenInSource && this._expandedIds.has(s.row.node.id)) {
       const r = t.find(
-        ({ row: o }) => o.level === s.row.level + 1 && o.node.label.toLowerCase() === s.row.node.label.toLowerCase()
+        ({ row: n }) => n.level === s.row.level + 1 && n.node.label.toLowerCase() === s.row.node.label.toLowerCase()
       );
       if (r) return r.index;
     }
@@ -695,8 +748,8 @@ const _ = (x = class extends Z {
   }
   _loadUntilSearchTargetVisible() {
     let e = 0;
-    for (; e++ < 100 && !(this._getSearchScrollTargetIndex() < this._flatRows.length || !S(this._searchVisibleIds, this._loadedIds) && !this._hasExpandedUnloadedSubtree()); ) {
-      if (S(this._searchVisibleIds, this._loadedIds)) {
+    for (; e++ < 100 && !(this._getSearchScrollTargetIndex() < this._flatRows.length || !C(this._searchVisibleIds, this._loadedIds) && !this._hasExpandedUnloadedSubtree()); ) {
+      if (C(this._searchVisibleIds, this._loadedIds)) {
         if (!F(
           this._searchVisibleIds,
           this._loadedIds,
@@ -718,7 +771,7 @@ const _ = (x = class extends Z {
   }
   _hasExpandedUnloadedSubtree() {
     for (const e of this._expandedIds)
-      if (W(e, this._treeIndex, this._loadedIds))
+      if (G(e, this._treeIndex, this._loadedIds))
         return !0;
     return !1;
   }
@@ -729,7 +782,7 @@ const _ = (x = class extends Z {
     if (!e) return !1;
     for (const t of this._expandedIds) {
       const i = this._sourceById.get(t);
-      if (i && pe(t, this._treeIndex, this._loadedIds) && E(
+      if (i && pe(t, this._treeIndex, this._loadedIds) && L(
         i.label,
         e,
         !1,
@@ -742,16 +795,16 @@ const _ = (x = class extends Z {
     return !1;
   }
   _shouldLoadMoreOnScroll() {
-    return this._isLazyEnabled() ? this._isSearchActive() ? S(
+    return this._isLazyEnabled() ? this._isSearchActive() ? C(
       this._searchVisibleIds,
       this._loadedIds
     ) || this._hasExclusiveSearchFolderWithUnloadedChildren() : this._hasExpandedUnloadedSubtree() ? this._treeIndex.some(
       (e) => !this._loadedIds.has(e.id)
-    ) : _e(this._treeIndex, this._loadedIds) : !1;
+    ) : fe(this._treeIndex, this._loadedIds) : !1;
   }
   _getLazyLoadPriorityNodeId(e, t) {
     if (!(!this._isSearchActive() && !this._hasExpandedUnloadedSubtree()))
-      return ve(
+      return me(
         this._flatRows,
         e,
         t,
@@ -766,13 +819,13 @@ const _ = (x = class extends Z {
   }
   _onVirtualizerVisibilityChanged(e) {
     const t = e, i = t.first, s = t.last;
-    if (s == null || !this._shouldLoadMoreOnScroll() || this._lazyScrollLoading)
+    if (i != null && (this._lazyVisibleFirst = Math.max(0, i)), s != null && (this._lazyVisibleLast = Math.max(this._lazyVisibleFirst, s), this._generateLightDomIcons()), s == null || !this._shouldLoadMoreOnScroll() || this._lazyScrollLoading)
       return;
-    const r = this._getLazyLoadPriorityNodeId(i ?? s, s), o = Math.max(
+    const r = this._getLazyLoadPriorityNodeId(i ?? s, s), n = Math.max(
       0,
       this._flatRows.length - this._getScrollPrefetchMargin()
     );
-    r == null && s < o || (this._lazyScrollLoading = !0, this._loadMoreNodes(r), this.updateComplete.then(() => {
+    r == null && s < n || (this._lazyScrollLoading = !0, this._loadMoreNodes(r), this.updateComplete.then(() => {
       this._lazyScrollLoading = !1;
     }));
   }
@@ -781,17 +834,17 @@ const _ = (x = class extends Z {
     return ((t = (e = this.options) == null ? void 0 : e.title) == null ? void 0 : t.trim()) || "Treeview";
   }
   _renderTreeRow(e, t, i) {
-    const { isExpanded: s, hasChildren: r, isRowHighlighted: o, isSelectable: l } = i;
-    return h`
+    const { isExpanded: s, hasChildren: r, isRowHighlighted: n, isSelectable: l } = i;
+    return f`
       <div
         id=${this._rowDomId(e.id)}
         role="treeitem"
         aria-level=${t + 1}
-        aria-expanded=${r ? s ? "true" : "false" : m}
+        aria-expanded=${r ? s ? "true" : "false" : b}
         class=${g({
       "node-row": !0,
       selectable: l,
-      selected: o
+      selected: n
     })}
         style="--treeview-row-level: ${t}"
         tabindex=${this._getRowTabIndex(e.id)}
@@ -811,14 +864,14 @@ const _ = (x = class extends Z {
     `;
   }
   _renderExpanderCell(e, t, i) {
-    return i ? h`
+    return i ? f`
       <nyx-button
         class="expander"
         size="small"
         button-icon
         tabindex="-1"
         hierarchy="ghost"
-        aria-label=${Se(e.label, t)}
+        aria-label=${Ie(e.label, t)}
         @click=${() => this._toggleExpand(e, !1)}
         @keydown=${(s) => {
       (s.key === "Enter" || s.key === " ") && (s.preventDefault(), s.stopPropagation(), this._toggleExpand(e, !0));
@@ -830,32 +883,32 @@ const _ = (x = class extends Z {
           .svg=${X}
         ></nyx-icon>
       </nyx-button>
-    ` : h`<span class="expander-placeholder" aria-hidden="true"></span>`;
-  }
-  _renderNodeTypeIcon(e) {
-    const t = e.icon;
-    return t ? typeof t == "string" ? h`<nyx-icon name=${t} variant="regular"></nyx-icon>` : h`
-      <nyx-icon
-        name=${t.name ?? m}
-        variant=${t.variant ?? "regular"}
-        src=${t.src ?? m}
-        .svg=${t.svg}
-      ></nyx-icon>
-    ` : m;
+    ` : f`<span class="expander-placeholder" aria-hidden="true"></span>`;
   }
   _generateLightDomIcons() {
-    var i;
-    if (this.querySelectorAll("[data-auto-generated]").forEach((s) => s.remove()), !this.options || (this._hasColumnPermissions() && ((i = this.options.columns) == null || i.forEach((s, r) => {
-      s.icon && this._createIconElement(s.icon, `generated-header-icon-${r}`);
-    })), this._isLazyEnabled() || !this._showNodeIcons())) return;
-    const t = (s) => {
-      var r;
-      s.icon && this._createIconElement(
-        s.icon,
-        `generated-tree-icon-${s.id}`
-      ), (r = s.children) == null || r.forEach(t);
+    var s;
+    if (this.querySelectorAll("[data-auto-generated]").forEach((r) => r.remove()), !this.options || (this._hasColumnPermissions() && ((s = this.options.columns) == null || s.forEach((r, n) => {
+      r.icon && this._createIconElement(r.icon, `generated-header-icon-${n}`);
+    })), !this._showNodeIcons())) return;
+    const t = (r) => {
+      r.icon && this._createIconElement(
+        r.icon,
+        `generated-tree-icon-${r.id}`
+      );
+    }, i = (r) => {
+      var n;
+      t(r), (n = r.children) == null || n.forEach(i);
     };
-    this._items.forEach(t);
+    if (this._isLazyEnabled()) {
+      const r = Math.min(
+        this._flatRows.length - 1,
+        this._lazyVisibleLast
+      );
+      if (r < 0) return;
+      this._flatRows.slice(this._lazyVisibleFirst, r + 1).forEach((n) => t(n.node));
+      return;
+    }
+    this._items.forEach(i);
   }
   _createIconElement(e, t) {
     const i = document.createElement("nyx-icon");
@@ -875,13 +928,14 @@ const _ = (x = class extends Z {
   }
   _isIndeterminate(e, t) {
     if (e = this._selectionNode(e), !e.children || e.children.length === 0) return !1;
-    const i = this._getFlatDescendants(e), s = i.filter(
-      (r) => this._isNodeSelected(r, t)
-    ).length;
-    return s > 0 && s < i.length;
+    const i = this._getSelectionStats(e), s = i.selectedDescendantCountByColumn.get(t) ?? 0;
+    return s > 0 && s < i.descendantCount;
   }
   _allDescendantsSelected(e, t) {
-    return e = this._selectionNode(e), !e.children || e.children.length === 0 ? this._isNodeSelected(e, t) : this._getFlatDescendants(e).every((s) => this._isNodeSelected(s, t));
+    if (e = this._selectionNode(e), !e.children || e.children.length === 0)
+      return this._isNodeSelected(e, t);
+    const i = this._getSelectionStats(e);
+    return i.descendantCount > 0 && (i.selectedDescendantCountByColumn.get(t) ?? 0) === i.descendantCount;
   }
   _getFlatDescendants(e) {
     e = this._selectionNode(e);
@@ -894,17 +948,17 @@ const _ = (x = class extends Z {
   /** Transitive set of prerequisite column ids for `columnId` (excludes itself). */
   _requiredClosure(e) {
     var l, a, d;
-    const t = ((l = this.options) == null ? void 0 : l.columns) ?? [], i = new Map(t.map((c) => [c.id, c])), s = [], r = /* @__PURE__ */ new Set([e]), o = [...((a = i.get(e)) == null ? void 0 : a.requires) ?? []];
-    for (; o.length; ) {
-      const c = o.pop();
-      r.has(c) || (r.add(c), s.push(c), o.push(...((d = i.get(c)) == null ? void 0 : d.requires) ?? []));
+    const t = ((l = this.options) == null ? void 0 : l.columns) ?? [], i = new Map(t.map((c) => [c.id, c])), s = [], r = /* @__PURE__ */ new Set([e]), n = [...((a = i.get(e)) == null ? void 0 : a.requires) ?? []];
+    for (; n.length; ) {
+      const c = n.pop();
+      r.has(c) || (r.add(c), s.push(c), n.push(...((d = i.get(c)) == null ? void 0 : d.requires) ?? []));
     }
     return s;
   }
   /** Transitive set of column ids that depend on `columnId` (excludes itself). */
   _dependentsClosure(e) {
-    var o;
-    const t = ((o = this.options) == null ? void 0 : o.columns) ?? [], i = [], s = /* @__PURE__ */ new Set([e]), r = [e];
+    var n;
+    const t = ((n = this.options) == null ? void 0 : n.columns) ?? [], i = [], s = /* @__PURE__ */ new Set([e]), r = [e];
     for (; r.length; ) {
       const l = r.pop();
       for (const a of t)
@@ -920,22 +974,20 @@ const _ = (x = class extends Z {
   _handleCheck(e, t) {
     const i = this._selectionNode(e);
     if (this._isColumnDisabled(i, t)) return;
-    const r = !this._isNodeSelected(i, t), o = this._requiredClosure(t), l = r ? [t, ...o] : [t, ...this._dependentsClosure(t)];
+    const r = !this._isNodeSelected(i, t), n = this._requiredClosure(t), l = r ? [t, ...n] : [t, ...this._dependentsClosure(t)];
     this._forEachInSubtree(this._selectionRoots(), e.id, (a) => {
-      r && o.some(
+      r && n.some(
         (c) => this._isColumnDisabled(a, c)
       ) || l.forEach(
         (d) => this._toggleNodeState(a, d, r)
       );
-    }), l.forEach(
-      (a) => this._updateParents(this._selectionRoots(), e.id, a)
-    ), this._triggerChange();
+    }), l.forEach((a) => this._updateColumnAncestors(e.id, a)), this._triggerChange();
   }
   _toggleNodeState(e, t, i) {
     if (this._isColumnDisabled(e, t)) return;
     e.selectedColumns || (e.selectedColumns = []);
     const s = e.selectedColumns.indexOf(t);
-    i && s === -1 ? e.selectedColumns.push(t) : !i && s > -1 && e.selectedColumns.splice(s, 1);
+    i && s === -1 ? (e.selectedColumns.push(t), this._invalidateSelectionStats()) : !i && s > -1 && (e.selectedColumns.splice(s, 1), this._invalidateSelectionStats());
   }
   _updateParents(e, t, i) {
     for (const s of e)
@@ -943,7 +995,7 @@ const _ = (x = class extends Z {
         (r) => r.id === t || this._updateParents(s.children, t, i)
       )) {
         const r = s.children.every(
-          (o) => this._allDescendantsSelected(o, i)
+          (n) => this._allDescendantsSelected(n, i)
         );
         return this._toggleNodeState(
           s,
@@ -953,6 +1005,29 @@ const _ = (x = class extends Z {
       }
     return !1;
   }
+  _updateLazyColumnAncestors(e, t) {
+    var s, r, n;
+    let i = (s = this._indexById.get(e)) == null ? void 0 : s.parentId;
+    for (; i != null; ) {
+      const l = this._sourceById.get(i);
+      if (!((r = l == null ? void 0 : l.children) != null && r.length)) return;
+      const a = l.children.every(
+        (d) => this._allDescendantsSelected(d, t)
+      );
+      this._toggleNodeState(
+        l,
+        t,
+        a && this._canEnableColumn(l, t)
+      ), i = (n = this._indexById.get(i)) == null ? void 0 : n.parentId;
+    }
+  }
+  _updateColumnAncestors(e, t) {
+    if (this._isLazyEnabled()) {
+      this._updateLazyColumnAncestors(e, t);
+      return;
+    }
+    this._updateParents(this._selectionRoots(), e, t);
+  }
   _isRowAllSelected(e) {
     var i;
     if (e = this._selectionNode(e), !((i = this.options) != null && i.columns)) return !1;
@@ -971,15 +1046,19 @@ const _ = (x = class extends Z {
   }
   _isSimpleRowAllSelected(e) {
     var t;
-    return e = this._selectionNode(e), (t = e.children) != null && t.length ? e.children.every((i) => this._isSimpleRowAllSelected(i)) : !!e.selected;
+    if (e = this._selectionNode(e), (t = e.children) != null && t.length) {
+      const i = this._getSelectionStats(e);
+      return i.simpleLeafCount > 0 && i.simpleSelectedLeafCount === i.simpleLeafCount;
+    }
+    return !!e.selected;
   }
   _isSimpleRowIndeterminate(e) {
-    var s;
-    return e = this._selectionNode(e), this._isSimpleRowAllSelected(e) || !((s = e.children) != null && s.length) ? !1 : this._getFlatDescendants(e).filter((r) => r.selected).length > 0;
+    var t;
+    return e = this._selectionNode(e), this._isSimpleRowAllSelected(e) || !((t = e.children) != null && t.length) ? !1 : this._getSelectionStats(e).simpleSelectedDescendantCount > 0;
   }
   _setSimpleRowSelected(e, t) {
     this._forEachInSubtree(this._selectionRoots(), e, (i) => {
-      i.selected = t;
+      i.selected !== t && (i.selected = t, this._invalidateSelectionStats());
     });
   }
   _updateSimpleRowParents(e, t) {
@@ -987,12 +1066,33 @@ const _ = (x = class extends Z {
     for (const s of e)
       if ((i = s.children) != null && i.some(
         (r) => r.id === t || this._updateSimpleRowParents(s.children, t)
-      ))
-        return s.selected = s.children.every(
-          (r) => this._isSimpleRowAllSelected(r)
-        ), !0;
+      )) {
+        const r = s.children.every(
+          (n) => this._isSimpleRowAllSelected(n)
+        );
+        return s.selected !== r && (s.selected = r, this._invalidateSelectionStats()), !0;
+      }
     return !1;
   }
+  _updateLazySimpleRowAncestors(e) {
+    var i, s, r;
+    let t = (i = this._indexById.get(e)) == null ? void 0 : i.parentId;
+    for (; t != null; ) {
+      const n = this._sourceById.get(t);
+      if (!((s = n == null ? void 0 : n.children) != null && s.length)) return;
+      const l = n.children.every(
+        (a) => this._isSimpleRowAllSelected(a)
+      );
+      n.selected !== l && (n.selected = l, this._invalidateSelectionStats()), t = (r = this._indexById.get(t)) == null ? void 0 : r.parentId;
+    }
+  }
+  _updateSimpleRowAncestors(e) {
+    if (this._isLazyEnabled()) {
+      this._updateLazySimpleRowAncestors(e);
+      return;
+    }
+    this._updateSimpleRowParents(this._selectionRoots(), e);
+  }
   _isRowCheckboxChecked(e) {
     const t = this._selectionNode(e);
     return this._usesUniqueRowSelection() ? !!t.selected : this._usesSimpleRowSelection() ? this._isSimpleRowAllSelected(t) : this._isRowAllSelected(t);
@@ -1007,8 +1107,8 @@ const _ = (x = class extends Z {
     let t = !1;
     const i = (s) => {
       s.forEach((r) => {
-        const o = r.id === e;
-        !!r.selected !== o && (r.selected = o, t = !0), r.children && i(r.children);
+        const n = r.id === e;
+        !!r.selected !== n && (r.selected = n, this._invalidateSelectionStats(), t = !0), r.children && i(r.children);
       });
     };
     return i(this._selectionRoots()), t;
@@ -1020,17 +1120,23 @@ const _ = (x = class extends Z {
       return;
     }
     const i = !this._isRowCheckboxChecked(e);
-    this._usesSimpleRowSelection() ? (this._setSimpleRowSelected(e.id, i), this._updateSimpleRowParents(this._selectionRoots(), e.id)) : (this._toggleRowRecursively(e.id, i), (s = this.options) != null && s.columns && this.options.columns.forEach((r) => {
-      this._updateParents(this._selectionRoots(), e.id, r.id);
+    this._usesSimpleRowSelection() ? (this._setSimpleRowSelected(e.id, i), this._updateSimpleRowAncestors(e.id)) : (this._toggleRowRecursively(e.id, i), (s = this.options) != null && s.columns && this.options.columns.forEach((r) => {
+      this._updateColumnAncestors(e.id, r.id);
     })), this._triggerChange();
   }
   _applyRowColumnsToNode(e, t) {
     var i;
-    (i = this.options) != null && i.columns && (t ? this.options.columns.forEach((s) => {
-      this._canEnableColumn(e, s.id) && (e.selectedColumns || (e.selectedColumns = []), e.selectedColumns.includes(s.id) || e.selectedColumns.push(s.id));
-    }) : e.selectedColumns = (e.selectedColumns ?? []).filter(
-      (s) => this._isColumnDisabled(e, s)
-    ));
+    if ((i = this.options) != null && i.columns)
+      if (t)
+        this.options.columns.forEach((s) => {
+          this._canEnableColumn(e, s.id) && (e.selectedColumns || (e.selectedColumns = []), e.selectedColumns.includes(s.id) || (e.selectedColumns.push(s.id), this._invalidateSelectionStats()));
+        });
+      else {
+        const s = (e.selectedColumns ?? []).filter(
+          (r) => this._isColumnDisabled(e, r)
+        );
+        s.length !== (e.selectedColumns ?? []).length && (e.selectedColumns = s, this._invalidateSelectionStats());
+      }
   }
   _toggleRowRecursively(e, t) {
     this._forEachInSubtree(this._selectionRoots(), e, (i) => {
@@ -1072,8 +1178,8 @@ const _ = (x = class extends Z {
       e,
       this._searchUserCollapsedIds
     ), r = new Set(s);
-    this._searchManualExpandedIds.forEach((o) => {
-      this._searchUserCollapsedIds.has(o) || r.add(o);
+    this._searchManualExpandedIds.forEach((n) => {
+      this._searchUserCollapsedIds.has(n) || r.add(n);
     }), this._searchVisibleIds = i, this._expandedIds = r, this._isLazyEnabled() ? (F(
       i,
       this._loadedIds,
@@ -1101,7 +1207,7 @@ const _ = (x = class extends Z {
     return this._isLazyEnabled() ? this._sourceHasChildren(e.id) : !!(e.children && e.children.length > 0);
   }
   _getVisibleTreeRows() {
-    return this._isLazyEnabled() ? this._flatRows : U({
+    return this._isLazyEnabled() ? this._flatRows : P({
       items: this._items,
       expandedIds: this._expandedIds,
       hasSearch: this._isSearchActive(),
@@ -1121,10 +1227,10 @@ const _ = (x = class extends Z {
       return r ?? void 0;
     }
     let t;
-    const i = (r, o) => {
+    const i = (r, n) => {
       for (const l of r) {
         if (l.id === e)
-          return t = o ?? void 0, !0;
+          return t = n ?? void 0, !0;
         if (l.children && i(l.children, l.id))
           return !0;
       }
@@ -1136,12 +1242,12 @@ const _ = (x = class extends Z {
     this._setActiveRow(e), this.updateComplete.then(() => {
       var i, s, r;
       if (this._isLazyEnabled()) {
-        const o = this._flatRows.findIndex((l) => l.node.id === e);
-        if (o >= 0) {
+        const n = this._flatRows.findIndex((l) => l.node.id === e);
+        if (n >= 0) {
           const l = (i = this.shadowRoot) == null ? void 0 : i.querySelector(
             "lit-virtualizer"
           );
-          (s = l == null ? void 0 : l.scrollToIndex) == null || s.call(l, o, "nearest");
+          (s = l == null ? void 0 : l.scrollToIndex) == null || s.call(l, n, "nearest");
         }
       }
       const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector(
@@ -1165,7 +1271,7 @@ const _ = (x = class extends Z {
     const i = e.currentTarget;
     if (e.target !== i)
       return;
-    const s = this._getVisibleTreeRows(), r = s.findIndex((d) => d.node.id === t.id), o = this._nodeHasChildren(t), l = this._expandedIds.has(t.id);
+    const s = this._getVisibleTreeRows(), r = s.findIndex((d) => d.node.id === t.id), n = this._nodeHasChildren(t), l = this._expandedIds.has(t.id);
     if (e.key === "ArrowDown" || e.key === "ArrowUp") {
       const d = e.key === "ArrowDown" ? r + 1 : r - 1;
       d >= 0 && d < s.length && (e.preventDefault(), this._focusRowById(s[d].node.id));
@@ -1179,7 +1285,7 @@ const _ = (x = class extends Z {
       return;
     }
     if (e.key === "ArrowRight") {
-      if (!o) return;
+      if (!n) return;
       if (e.preventDefault(), !l) {
         await this._toggleExpand(t, !0);
         return;
@@ -1188,7 +1294,7 @@ const _ = (x = class extends Z {
       return;
     }
     if (e.key === "ArrowLeft") {
-      if (e.preventDefault(), o && l) {
+      if (e.preventDefault(), n && l) {
         await this._toggleExpand(t, !1), i.focus();
         return;
       }
@@ -1234,7 +1340,7 @@ const _ = (x = class extends Z {
     });
   }
   _renderRowSelectionCheckbox(e) {
-    return this._showRowSelection() ? this._usesUniqueRowSelection() ? h`
+    return this._showRowSelection() ? this._usesUniqueRowSelection() ? f`
         <div class="row-checkbox">
           <nyx-radio
             ?checked=${this._isRowCheckboxChecked(e)}
@@ -1248,14 +1354,14 @@ const _ = (x = class extends Z {
               tabindex="-1"
               name=${this._rowSelectionRadioName}
               .checked=${this._isRowCheckboxChecked(e)}
-              aria-label=${q(e.label)}
+              aria-label=${U(e.label)}
             />
           </nyx-radio>
         </div>
-      ` : h`
+      ` : f`
       <div class="row-checkbox">
         <nyx-checkbox
-          aria-label=${q(e.label)}
+          aria-label=${U(e.label)}
           ?checked=${this._isRowCheckboxChecked(e)}
           ?indeterminate=${this._isRowCheckboxIndeterminate(e)}
           @click=${(t) => {
@@ -1265,20 +1371,20 @@ const _ = (x = class extends Z {
           <input type="checkbox" slot="input" tabindex="-1" />
         </nyx-checkbox>
       </div>
-    ` : m;
+    ` : b;
   }
   _renderNodeIconCell(e) {
-    return this._showNodeIcons() ? h`
+    return this._showNodeIcons() ? f`
       <div class="node-type-icon-wrapper">
-        ${this._isLazyEnabled() ? this._renderNodeTypeIcon(e) : h`<slot name="generated-tree-icon-${e.id}"></slot>`}
+        <slot name="generated-tree-icon-${e.id}"></slot>
       </div>
-    ` : m;
+    ` : b;
   }
   _renderColumnCheckboxes(e) {
-    return this._hasColumnPermissions() ? h`
+    return this._hasColumnPermissions() ? f`
       <div class="node-columns">
         ${this.options.columns.map(
-      (t) => h`
+      (t) => f`
             <div class="col-cell">
               <nyx-checkbox
                 aria-label=${Ce(
@@ -1311,12 +1417,15 @@ const _ = (x = class extends Z {
           `
     )}
       </div>
-    ` : m;
+    ` : b;
   }
   render() {
-    var i, s, r;
-    const e = this._hasColumnPermissions(), t = e ? ((s = (i = this.options) == null ? void 0 : i.columns) == null ? void 0 : s.length) ?? 0 : 0;
-    return h`
+    var s, r, n;
+    const e = this._hasColumnPermissions(), i = [
+      `--treeview-column-count: ${e ? ((r = (s = this.options) == null ? void 0 : s.columns) == null ? void 0 : r.length) ?? 0 : 0};`,
+      `--treeview-scrollbar-gutter: ${this._scrollbarGutter}px;`
+    ].join(" ");
+    return f`
       <div
         class=${g({
       "nyx-treeview": !0,
@@ -1324,7 +1433,7 @@ const _ = (x = class extends Z {
       "nyx-treeview--row-selection": this._showRowSelection(),
       "nyx-treeview--virtual": this._isLazyEnabled()
     })}
-        style=${`--treeview-column-count: ${t};`}
+        style=${i}
         @mousedown=${() => this._clearAllFocus()}
       >
         <div class="search-container">
@@ -1356,18 +1465,18 @@ const _ = (x = class extends Z {
       "tree-header--no-columns": !e
     })}
           >
-            <div class="tree-title">${(r = this.options) == null ? void 0 : r.title}</div>
-            ${e ? h`
+            <div class="tree-title">${(n = this.options) == null ? void 0 : n.title}</div>
+            ${e ? f`
                   <div class="header-columns">
                     ${this.options.columns.map(
-      (o, l) => h`
-                        <div class="col-cell" title="${o.title || ""}">
-                          <slot name="generated-header-icon-${l}"></slot>
+      (l, a) => f`
+                        <div class="col-cell" title="${l.title || ""}">
+                          <slot name="generated-header-icon-${a}"></slot>
                         </div>
                       `
     )}
                   </div>
-                ` : m}
+                ` : b}
           </div>
 
           <div
@@ -1378,13 +1487,13 @@ const _ = (x = class extends Z {
             role="tree"
             aria-label=${this._getTreeAriaLabel()}
           >
-            ${this._isLazyEnabled() ? h`
+            ${this._isLazyEnabled() ? f`
                   <lit-virtualizer
                     scroller
                     class="tree-virtualizer"
                     .items=${this._flatRows}
                     .estimateSize=${48}
-                    .renderItem=${(o) => this._renderFlatRow(o)}
+                    .renderItem=${(l) => this._renderFlatRow(l)}
                     @visibilityChanged=${this._onVirtualizerVisibilityChanged}
                   ></lit-virtualizer>
                 ` : this._renderNodes(this._items, 0)}
@@ -1394,11 +1503,11 @@ const _ = (x = class extends Z {
     `;
   }
   _renderFlatRow(e) {
-    const { node: t, level: i, revealSubtree: s, parentLabelMatched: r } = e, o = this._expandedIds.has(t.id), l = e.hasChildrenInSource, a = this._showRowSelection(), d = this._isRowCheckboxChecked(t) || this._isRowCheckboxIndeterminate(t);
-    return h`
+    const { node: t, level: i, revealSubtree: s, parentLabelMatched: r } = e, n = this._expandedIds.has(t.id), l = e.hasChildrenInSource, a = this._showRowSelection(), d = this._isRowCheckboxChecked(t) || this._isRowCheckboxIndeterminate(t);
+    return f`
       <div class="node-wrapper node-wrapper--flat">
         ${this._renderTreeRow(t, i, {
-      isExpanded: o,
+      isExpanded: n,
       hasChildren: l,
       isRowHighlighted: d,
       isSelectable: a
@@ -1407,37 +1516,37 @@ const _ = (x = class extends Z {
     `;
   }
   _renderNodes(e, t, i = !1, s = !1, r = !1) {
-    const o = !!this._searchTerm.trim(), l = this._searchTerm.trim().toLowerCase(), a = o && !r ? e.filter((d) => this._searchVisibleIds.has(d.id)) : e;
+    const n = !!this._searchTerm.trim(), l = this._searchTerm.trim().toLowerCase(), a = n && !r ? e.filter((d) => this._searchVisibleIds.has(d.id)) : e;
     return Q(
       a,
       (d) => d.id,
       (d) => {
-        const c = this._expandedIds.has(d.id), u = this._isLazyEnabled() ? this._sourceHasChildren(d.id) : !!(d.children && d.children.length > 0), f = this._isRowCheckboxChecked(d) || this._isRowCheckboxIndeterminate(d), w = this._showRowSelection(), b = O(
+        const c = this._expandedIds.has(d.id), u = this._isLazyEnabled() ? this._sourceHasChildren(d.id) : !!(d.children && d.children.length > 0), h = this._isRowCheckboxChecked(d) || this._isRowCheckboxIndeterminate(d), _ = this._showRowSelection(), v = O(
           d.label,
           l,
           i,
           s
-        ), N = !o || b && E(
+        ), $ = !n || v && L(
           d.label,
           l,
           s,
           d.id,
           this._searchVisibleIds,
-          (R) => this._getSourceChildren(R)
-        ) ? d.children : B(d, this._searchVisibleIds, l), I = s || o && !!l && d.label.toLowerCase().includes(l);
-        return h`
+          (z) => this._getSourceChildren(z)
+        ) ? d.children : q(d, this._searchVisibleIds, l), I = s || n && !!l && d.label.toLowerCase().includes(l);
+        return f`
           <div class="node-wrapper">
             ${this._renderTreeRow(d, t, {
           isExpanded: c,
           hasChildren: u,
-          isRowHighlighted: f,
-          isSelectable: w
+          isRowHighlighted: h,
+          isSelectable: _
         })}
-            ${c && u ? h`<div class="node-children" role="group">
+            ${c && u ? f`<div class="node-children" role="group">
                   ${this._renderNodes(
-          N,
+          $,
           t + 1,
-          b,
+          v,
           I,
           !0
         )}
@@ -1448,44 +1557,47 @@ const _ = (x = class extends Z {
     );
   }
 }, x._nextTreeviewId = 0, x.styles = Y(se), x);
-p([
+w([
   J({ type: Object, noAccessor: !0 })
-], _.prototype, "options", 1);
-p([
-  v()
-], _.prototype, "_items", 2);
-p([
-  v()
-], _.prototype, "_expandedIds", 2);
-p([
-  v()
-], _.prototype, "_searchTerm", 2);
-p([
-  v()
-], _.prototype, "_searchStatusMessage", 2);
-p([
-  v()
-], _.prototype, "_searchVisibleIds", 2);
-p([
-  v()
-], _.prototype, "_searchUserCollapsedIds", 2);
-p([
-  v()
-], _.prototype, "_searchManualExpandedIds", 2);
-p([
-  v()
-], _.prototype, "_flatRows", 2);
-p([
-  v()
-], _.prototype, "_loadedIds", 2);
-p([
-  v()
-], _.prototype, "_activeRowId", 2);
-p([
+], p.prototype, "options", 1);
+w([
+  m()
+], p.prototype, "_items", 2);
+w([
+  m()
+], p.prototype, "_expandedIds", 2);
+w([
+  m()
+], p.prototype, "_searchTerm", 2);
+w([
+  m()
+], p.prototype, "_searchStatusMessage", 2);
+w([
+  m()
+], p.prototype, "_searchVisibleIds", 2);
+w([
+  m()
+], p.prototype, "_searchUserCollapsedIds", 2);
+w([
+  m()
+], p.prototype, "_searchManualExpandedIds", 2);
+w([
+  m()
+], p.prototype, "_flatRows", 2);
+w([
+  m()
+], p.prototype, "_loadedIds", 2);
+w([
+  m()
+], p.prototype, "_activeRowId", 2);
+w([
+  m()
+], p.prototype, "_scrollbarGutter", 2);
+w([
   ie("nyx-change")
-], _.prototype, "onChange", 2);
-let ke = _;
-customElements.get("nyx-treeview") || customElements.define("nyx-treeview", ke);
+], p.prototype, "onChange", 2);
+let Le = p;
+customElements.get("nyx-treeview") || customElements.define("nyx-treeview", Le);
 export {
-  ke as NyxTreeview
+  Le as NyxTreeview
 };