@toolbox-web/grid 0.4.2 → 0.6.0

package/all.js

@@ -1,23 +1,25 @@
-import { BaseGridPlugin as x, DEFAULT_GRID_ICONS as $e, runAggregator as de, e as je, s as Ue, PLUGIN_QUERIES as He, getAggregator as ce, getValueAggregator as Xe, a as Ze, c as V, g as Ye } from "./index.js";
-import { DEFAULT_ANIMATION_CONFIG as oi, DGEvents as ri, DataGridElement as si, FitModeEnum as li, GridCSSVars as ai, GridClasses as di, GridDataAttrs as ci, DataGridElement as ui, GridSelectors as hi, PluginEvents as fi, PluginManager as gi, RenderPhase as pi, builtInSort as mi, defaultComparator as wi } from "./index.js";
-const Oe = "__tbw_expander", Je = 32;
-function ie(s) {
-  return s.field === Oe;
+import { BaseGridPlugin as x, DEFAULT_GRID_ICONS as $e, runAggregator as ae, e as je, s as Ue, PLUGIN_QUERIES as He, getAggregator as de, getValueAggregator as Ye, a as Xe, c as ce, g as Ze } from "./index.js";
+import { DEFAULT_ANIMATION_CONFIG as oi, DGEvents as si, DataGridElement as li, FitModeEnum as ai, GridCSSVars as di, GridClasses as ci, GridDataAttrs as ui, DataGridElement as hi, GridSelectors as fi, PluginEvents as gi, PluginManager as pi, RenderPhase as mi, builtInSort as wi, createGrid as bi, defaultComparator as vi, queryGrid as yi } from "./index.js";
+const ze = "__tbw_expander", Je = 32;
+function ne(s) {
+  return s.field === ze;
 }
 function _(s) {
   return s.meta?.utility === !0;
 }
 function Qe(s) {
-  return s.find(ie);
+  return s.find(ne);
 }
 function et(s) {
   return {
-    field: Oe,
+    field: ze,
     header: "",
     // No header text - visually merges with next column
     width: Je,
     resizable: !1,
     sortable: !1,
+    filterable: !1,
+    // No filter button for expander column
     meta: {
       lockPosition: !0,
       suppressMovable: !0,
@@ -28,7 +30,7 @@ function et(s) {
     }
   };
 }
-async function z(s) {
+async function B(s) {
   try {
     return await navigator.clipboard.writeText(s), !0;
   } catch {
@@ -42,13 +44,13 @@ function ue(s, e) {
   const t = e.delimiter ?? "	", n = e.newline ?? `
 `, i = s.replace(/\r\n/g, `
 `).replace(/\r/g, `
-`), o = [];
-  let r = [], l = "", a = !1;
+`), r = [];
+  let o = [], l = "", a = !1;
   for (let d = 0; d < i.length; d++) {
     const c = i[d];
-    c === '"' && !a ? a = !0 : c === '"' && a ? i[d + 1] === '"' ? (l += '"', d++) : a = !1 : c === t && !a ? (r.push(l), l = "") : c === n && !a ? (r.push(l), l = "", (r.length > 1 || r.some((u) => u.trim() !== "")) && o.push(r), r = []) : l += c;
+    c === '"' && !a ? a = !0 : c === '"' && a ? i[d + 1] === '"' ? (l += '"', d++) : a = !1 : c === t && !a ? (o.push(l), l = "") : c === n && !a ? (o.push(l), l = "", (o.length > 1 || o.some((u) => u.trim() !== "")) && r.push(o), o = []) : l += c;
   }
-  return r.push(l), (r.length > 1 || r.some((d) => d.trim() !== "")) && o.push(r), o;
+  return o.push(l), (o.length > 1 || o.some((d) => d.trim() !== "")) && r.push(o), r;
 }
 async function tt() {
   try {
@@ -60,7 +62,7 @@ async function tt() {
 function nt(s, e) {
   const { rows: t, target: n, fields: i } = s;
   if (!n) return;
-  const o = e.rows, l = (e.effectiveConfig.columns ?? []).map((c) => c.field), a = [...o], d = n.bounds ? n.bounds.endRow : 1 / 0;
+  const r = e.rows, l = (e.effectiveConfig.columns ?? []).map((c) => c.field), a = [...r], d = n.bounds ? n.bounds.endRow : 1 / 0;
   t.forEach((c, u) => {
     const h = n.row + u;
     if (!(h > d)) {
@@ -78,7 +80,7 @@ function nt(s, e) {
     }
   }), e.rows = a;
 }
-class qn extends x {
+class Nn extends x {
   /**
    * Plugin dependencies - ClipboardPlugin works best with SelectionPlugin.
    *
@@ -130,30 +132,30 @@ class qn extends x {
    * - No selection: try to get focused cell from DOM as 1x1 range
    */
   #e(e) {
-    const t = this.#n(), n = t?.getSelection(), i = this.columns.length - 1, o = this.rows.length - 1;
-    let r;
+    const t = this.#n(), n = t?.getSelection(), i = this.columns.length - 1, r = this.rows.length - 1;
+    let o;
     if (n && n.ranges.length > 0) {
       const { mode: a, ranges: d } = n, c = d[d.length - 1];
-      a === "row" ? r = {
+      a === "row" ? o = {
         startRow: c.from.row,
         startCol: 0,
         endRow: c.to.row,
         endCol: i
-      } : r = {
+      } : o = {
         startRow: c.from.row,
         startCol: c.from.col,
         endRow: c.to.row,
         endCol: c.to.col
       };
     } else if (!t)
-      r = { startRow: 0, startCol: 0, endRow: o, endCol: i };
+      o = { startRow: 0, startCol: 0, endRow: r, endCol: i };
     else {
       const a = this.#s(e);
       if (!a) return;
-      r = { startRow: a.row, startCol: a.col, endRow: a.row, endCol: a.col };
+      o = { startRow: a.row, startCol: a.col, endRow: a.row, endCol: a.col };
     }
-    const l = this.#i(r);
-    z(l.text).then(() => {
+    const l = this.#i(o);
+    B(l.text).then(() => {
       this.lastCopied = { text: l.text, timestamp: Date.now() }, this.emit("copy", {
         text: l.text,
         rowCount: l.rowCount,
@@ -180,13 +182,13 @@ class qn extends x {
     const t = e.clipboardData?.getData("text/plain");
     if (!t) return;
     e.preventDefault();
-    const n = ue(t, this.config), o = this.#n()?.getSelection(), r = o?.ranges?.[0], l = r?.from.row ?? 0, a = r?.from.col ?? 0, c = r && (o?.mode === "range" || o?.mode === "row") && (r.from.row !== r.to.row || r.from.col !== r.to.col) ? { endRow: r.to.row, endCol: r.to.col } : null, u = c?.endCol ?? this.columns.length - 1, h = this.columns[a], f = h ? { row: l, col: a, field: h.field, bounds: c } : null, g = [], p = n[0]?.length ?? 0;
+    const n = ue(t, this.config), r = this.#n()?.getSelection(), o = r?.ranges?.[0], l = o?.from.row ?? 0, a = o?.from.col ?? 0, c = o && (r?.mode === "range" || r?.mode === "row") && (o.from.row !== o.to.row || o.from.col !== o.to.col) ? { endRow: o.to.row, endCol: o.to.col } : null, u = c?.endCol ?? this.columns.length - 1, h = this.columns[a], f = h ? { row: l, col: a, field: h.field, bounds: c } : null, g = [], p = n[0]?.length ?? 0;
     for (let m = 0; m < p && a + m <= u; m++) {
-      const w = this.columns[a + m];
-      w && !w.hidden && g.push(w.field);
+      const b = this.columns[a + m];
+      b && !b.hidden && g.push(b.field);
     }
-    const b = { rows: n, text: t, target: f, fields: g };
-    this.emit("paste", b), this.#r(b);
+    const w = { rows: n, text: t, target: f, fields: g };
+    this.emit("paste", w), this.#o(w);
   }
   /**
    * Apply the paste handler to update grid data.
@@ -194,7 +196,7 @@ class qn extends x {
    * Uses the configured `pasteHandler`, or the default handler if not specified.
    * Set `pasteHandler: null` in config to disable auto-paste.
    */
-  #r(e) {
+  #o(e) {
     if (!this.grid) return;
     const { pasteHandler: t } = this.config;
     if (t === null) return;
@@ -216,24 +218,24 @@ class qn extends x {
    * Utility columns (like expander columns) are automatically excluded.
    */
   #i(e) {
-    const { startRow: t, startCol: n, endRow: i, endCol: o } = e, r = Math.min(t, i), l = Math.max(t, i), a = Math.min(n, o), d = Math.max(n, o), c = this.config.delimiter ?? "	", u = this.config.newline ?? `
+    const { startRow: t, startCol: n, endRow: i, endCol: r } = e, o = Math.min(t, i), l = Math.max(t, i), a = Math.min(n, r), d = Math.max(n, r), c = this.config.delimiter ?? "	", u = this.config.newline ?? `
 `, h = [], f = this.columns.slice(a, d + 1).filter((g) => !_(g));
     if (this.config.includeHeaders) {
       const g = f.map((p) => p.header || p.field);
       h.push(g.join(c));
     }
-    for (let g = r; g <= l; g++) {
+    for (let g = o; g <= l; g++) {
       const p = this.rows[g];
       if (!p) continue;
-      const b = f.map((m) => {
-        const w = p[m.field];
-        return w == null ? "" : w instanceof Date ? w.toISOString() : String(w);
+      const w = f.map((m) => {
+        const b = p[m.field];
+        return b == null ? "" : b instanceof Date ? b.toISOString() : String(b);
       });
-      h.push(b.join(c));
+      h.push(w.join(c));
     }
     return {
       text: h.join(u),
-      rowCount: l - r + 1,
+      rowCount: l - o + 1,
       columnCount: d - a + 1
     };
   }
@@ -246,10 +248,10 @@ class qn extends x {
     if (!t) return null;
     const n = t.dataset.fieldCache, i = t.dataset.row;
     if (!n || !i) return null;
-    const o = parseInt(i, 10);
-    if (isNaN(o)) return null;
-    const r = this.columns.findIndex((l) => l.field === n);
-    return r === -1 ? null : { row: o, col: r };
+    const r = parseInt(i, 10);
+    if (isNaN(r)) return null;
+    const o = this.columns.findIndex((l) => l.field === n);
+    return o === -1 ? null : { row: r, col: o };
   }
   // #endregion
   // #region Public API
@@ -261,16 +263,16 @@ class qn extends x {
     const t = this.#n()?.getSelection(), n = this.columns.length - 1;
     let i = { startRow: 0, startCol: 0, endRow: this.rows.length - 1, endCol: n };
     if (t && t.ranges.length > 0) {
-      const r = t.ranges[t.ranges.length - 1];
-      t.mode === "row" ? i = { startRow: r.from.row, startCol: 0, endRow: r.to.row, endCol: n } : i = {
-        startRow: r.from.row,
-        startCol: r.from.col,
-        endRow: r.to.row,
-        endCol: r.to.col
+      const o = t.ranges[t.ranges.length - 1];
+      t.mode === "row" ? i = { startRow: o.from.row, startCol: 0, endRow: o.to.row, endCol: n } : i = {
+        startRow: o.from.row,
+        startCol: o.from.col,
+        endRow: o.to.row,
+        endCol: o.to.col
       };
     }
-    const o = this.#i(i);
-    return await z(o.text), this.lastCopied = { text: o.text, timestamp: Date.now() }, o.text;
+    const r = this.#i(i);
+    return await B(r.text), this.lastCopied = { text: r.text, timestamp: Date.now() }, r.text;
   }
   /**
    * Copy specific rows by index to clipboard.
@@ -279,13 +281,13 @@ class qn extends x {
    */
   async copyRows(e) {
     if (e.length === 0) return "";
-    const t = [...e].sort((r, l) => r - l), n = this.columns.length - 1, i = {
+    const t = [...e].sort((o, l) => o - l), n = this.columns.length - 1, i = {
       startRow: t[0],
       startCol: 0,
       endRow: t[t.length - 1],
       endCol: n
-    }, o = this.#i(i);
-    return await z(o.text), this.lastCopied = { text: o.text, timestamp: Date.now() }, o.text;
+    }, r = this.#i(i);
+    return await B(r.text), this.lastCopied = { text: r.text, timestamp: Date.now() }, r.text;
   }
   /**
    * Read and parse clipboard content.
@@ -305,7 +307,7 @@ class qn extends x {
   // #endregion
 }
 const he = 100;
-function oe(s) {
+function ie(s) {
   if (s == null)
     return he;
   if (typeof s == "number")
@@ -314,51 +316,51 @@ function oe(s) {
   return isNaN(e) ? he : e;
 }
 function fe(s) {
-  return s.map((e) => oe(e.width));
+  return s.map((e) => ie(e.width));
 }
 function ge(s) {
   const e = [];
   let t = 0;
   for (const n of s)
-    e.push(t), t += oe(n.width);
+    e.push(t), t += ie(n.width);
   return e;
 }
 function pe(s) {
-  return s.reduce((e, t) => e + oe(t.width), 0);
+  return s.reduce((e, t) => e + ie(t.width), 0);
 }
 function it(s, e, t, n, i) {
-  const o = t.length;
-  if (o === 0)
+  const r = t.length;
+  if (r === 0)
     return { startCol: 0, endCol: 0, visibleColumns: [] };
-  let r = ot(s, t, n);
-  r = Math.max(0, r - i);
+  let o = rt(s, t, n);
+  o = Math.max(0, o - i);
   const l = s + e;
-  let a = r;
-  for (let c = r; c < o; c++) {
+  let a = o;
+  for (let c = o; c < r; c++) {
     if (t[c] >= l) {
       a = c - 1;
       break;
     }
     a = c;
   }
-  a = Math.min(o - 1, a + i);
+  a = Math.min(r - 1, a + i);
   const d = [];
-  for (let c = r; c <= a; c++)
+  for (let c = o; c <= a; c++)
     d.push(c);
-  return { startCol: r, endCol: a, visibleColumns: d };
+  return { startCol: o, endCol: a, visibleColumns: d };
 }
-function ot(s, e, t) {
+function rt(s, e, t) {
   let n = 0, i = e.length - 1;
   for (; n < i; ) {
-    const o = Math.floor((n + i) / 2);
-    e[o] + t[o] <= s ? n = o + 1 : i = o;
+    const r = Math.floor((n + i) / 2);
+    e[r] + t[r] <= s ? n = r + 1 : i = r;
   }
   return n;
 }
-function rt(s, e, t) {
+function ot(s, e, t) {
   return t ? s > e : !1;
 }
-class Nn extends x {
+class Hn extends x {
   name = "columnVirtualization";
   get defaultConfig() {
     return {
@@ -388,7 +390,7 @@ class Nn extends x {
   // #endregion
   // #region Hooks
   processColumns(e) {
-    const t = rt(e.length, this.config.threshold ?? 30, this.config.autoEnable ?? !0);
+    const t = ot(e.length, this.config.threshold ?? 30, this.config.autoEnable ?? !0);
     if (this.isVirtualized = t ?? !1, this.columnWidths = fe(e), this.columnOffsets = ge(e), this.totalWidth = pe(e), !t)
       return this.startCol = 0, this.endCol = e.length - 1, [...e];
     const n = this.grid.clientWidth || 800, i = it(
@@ -398,18 +400,18 @@ class Nn extends x {
       this.columnWidths,
       this.config.overscan ?? 3
     );
-    return this.startCol = i.startCol, this.endCol = i.endCol, i.visibleColumns.map((o) => e[o]);
+    return this.startCol = i.startCol, this.endCol = i.endCol, i.visibleColumns.map((r) => e[r]);
   }
   afterRender() {
     if (!this.isVirtualized) return;
-    const e = this.shadowRoot;
+    const e = this.gridElement;
     if (!e) return;
     const t = this.columnOffsets[this.startCol] ?? 0, n = e.querySelector(".header-row"), i = e.querySelectorAll(".data-grid-row");
-    n && (n.style.paddingLeft = `${t}px`), i.forEach((r) => {
-      r.style.paddingLeft = `${t}px`;
+    n && (n.style.paddingLeft = `${t}px`), i.forEach((o) => {
+      o.style.paddingLeft = `${t}px`;
     });
-    const o = e.querySelector(".rows-viewport .rows");
-    o && (o.style.width = `${this.totalWidth}px`);
+    const r = e.querySelector(".rows-viewport .rows");
+    r && (r.style.width = `${this.totalWidth}px`);
   }
   onScroll(e) {
     !this.isVirtualized || Math.abs(e.scrollLeft - this.scrollLeft) < 1 || (this.scrollLeft = e.scrollLeft, this.requestRender());
@@ -451,59 +453,59 @@ class Nn extends x {
   }
   // #endregion
 }
-const W = ".tbw-context-menu{position:fixed;background:light-dark(#f5f5f5,#2a2a2a);color:light-dark(#222,#eee);border:1px solid light-dark(#d0d0d4,#454545);border-radius:4px;box-shadow:0 2px 10px #00000026;min-width:160px;padding:4px 0;z-index:10000;font-size:13px;font-family:system-ui,sans-serif}.tbw-context-menu-item{display:flex;align-items:center;padding:6px 12px;cursor:pointer;gap:8px}.tbw-context-menu-item:hover:not(.disabled){background:light-dark(#e8e8e8,#3a3a3a)}.tbw-context-menu-item.disabled{opacity:.5;cursor:default}.tbw-context-menu-item.danger{color:light-dark(#c00,#f66)}.tbw-context-menu-icon{width:16px;text-align:center}.tbw-context-menu-label{flex:1}.tbw-context-menu-shortcut{color:light-dark(#888,#888);font-size:11px}.tbw-context-menu-arrow{font-size:10px;color:light-dark(#888,#888)}.tbw-context-menu-separator{height:1px;background:light-dark(#d0d0d4,#454545);margin:4px 0}";
-function ee(s, e) {
+const V = "@layer tbw-plugins{.tbw-context-menu{position:fixed;background:var(--tbw-context-menu-bg, var(--tbw-color-panel-bg, light-dark(#f5f5f5, #2a2a2a)));color:var(--tbw-context-menu-fg, var(--tbw-color-fg, light-dark(#222, #eee)));border:1px solid var(--tbw-context-menu-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:var(--tbw-border-radius, .25rem);box-shadow:0 2px 10px var(--tbw-color-shadow, rgba(0, 0, 0, .15));min-width:var(--tbw-menu-min-width, 10rem);padding:var(--tbw-spacing-xs, .25rem) 0;z-index:10000;font-size:var(--tbw-font-size-sm, .8125rem);font-family:var(--tbw-font-family, system-ui, sans-serif)}.tbw-context-menu-item{display:flex;align-items:center;padding:var(--tbw-menu-item-padding, .375rem .75rem);cursor:pointer;gap:var(--tbw-menu-item-gap, .5rem)}.tbw-context-menu-item:hover:not(.disabled){background:var(--tbw-context-menu-hover, var(--tbw-color-row-hover, light-dark(#e8e8e8, #3a3a3a)))}.tbw-context-menu-item.disabled{opacity:.5;cursor:default}.tbw-context-menu-item.danger{color:light-dark(#c00,#f66)}.tbw-context-menu-icon{width:var(--tbw-icon-size, 1rem);text-align:center}.tbw-context-menu-label{flex:1}.tbw-context-menu-shortcut{color:var(--tbw-color-fg-muted, light-dark(#888, #888));font-size:var(--tbw-font-size-xs, .6875rem)}.tbw-context-menu-arrow{font-size:var(--tbw-font-size-2xs, .625rem);color:var(--tbw-color-fg-muted, light-dark(#888, #888))}.tbw-context-menu-separator{height:1px;background:var(--tbw-context-menu-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));margin:var(--tbw-spacing-xs, .25rem) 0}}";
+function Q(s, e) {
   return (typeof s == "function" ? s(e) : s).filter((n) => !(n.hidden === !0 || typeof n.hidden == "function" && n.hidden(e)));
 }
 function st(s, e) {
   return s.disabled === !0 ? !0 : typeof s.disabled == "function" ? s.disabled(e) : !1;
 }
-function te(s, e, t, n = $e.submenuArrow) {
+function ee(s, e, t, n = $e.submenuArrow) {
   const i = document.createElement("div");
   i.className = "tbw-context-menu", i.setAttribute("role", "menu");
-  for (const o of s) {
-    if (o.separator) {
+  for (const r of s) {
+    if (r.separator) {
       const d = document.createElement("div");
       d.className = "tbw-context-menu-separator", d.setAttribute("role", "separator"), i.appendChild(d);
       continue;
     }
-    const r = document.createElement("div");
-    r.className = "tbw-context-menu-item", o.cssClass && r.classList.add(o.cssClass), r.setAttribute("role", "menuitem"), r.setAttribute("data-id", o.id);
-    const l = st(o, e);
-    if (l && (r.classList.add("disabled"), r.setAttribute("aria-disabled", "true")), o.icon) {
+    const o = document.createElement("div");
+    o.className = "tbw-context-menu-item", r.cssClass && o.classList.add(r.cssClass), o.setAttribute("role", "menuitem"), o.setAttribute("data-id", r.id);
+    const l = st(r, e);
+    if (l && (o.classList.add("disabled"), o.setAttribute("aria-disabled", "true")), r.icon) {
       const d = document.createElement("span");
-      d.className = "tbw-context-menu-icon", d.innerHTML = o.icon, r.appendChild(d);
+      d.className = "tbw-context-menu-icon", d.innerHTML = r.icon, o.appendChild(d);
     }
     const a = document.createElement("span");
-    if (a.className = "tbw-context-menu-label", a.textContent = o.name, r.appendChild(a), o.shortcut) {
+    if (a.className = "tbw-context-menu-label", a.textContent = r.name, o.appendChild(a), r.shortcut) {
       const d = document.createElement("span");
-      d.className = "tbw-context-menu-shortcut", d.textContent = o.shortcut, r.appendChild(d);
+      d.className = "tbw-context-menu-shortcut", d.textContent = r.shortcut, o.appendChild(d);
     }
-    if (o.subMenu?.length) {
+    if (r.subMenu?.length) {
       const d = document.createElement("span");
-      d.className = "tbw-context-menu-arrow", typeof n == "string" ? d.innerHTML = n : n instanceof HTMLElement && d.appendChild(n.cloneNode(!0)), r.appendChild(d), r.addEventListener("mouseenter", () => {
-        if (r.querySelector(".tbw-context-menu") || !o.subMenu) return;
-        const u = ee(o.subMenu, e), h = te(u, e, t, n);
-        h.classList.add("tbw-context-submenu"), h.style.position = "absolute", h.style.left = "100%", h.style.top = "0", r.style.position = "relative", r.appendChild(h);
-      }), r.addEventListener("mouseleave", () => {
-        const c = r.querySelector(".tbw-context-menu");
+      d.className = "tbw-context-menu-arrow", typeof n == "string" ? d.innerHTML = n : n instanceof HTMLElement && d.appendChild(n.cloneNode(!0)), o.appendChild(d), o.addEventListener("mouseenter", () => {
+        if (o.querySelector(".tbw-context-menu") || !r.subMenu) return;
+        const u = Q(r.subMenu, e), h = ee(u, e, t, n);
+        h.classList.add("tbw-context-submenu"), h.style.position = "absolute", h.style.left = "100%", h.style.top = "0", o.style.position = "relative", o.appendChild(h);
+      }), o.addEventListener("mouseleave", () => {
+        const c = o.querySelector(".tbw-context-menu");
         c && c.remove();
       });
     }
-    !l && o.action && !o.subMenu && r.addEventListener("click", (d) => {
-      d.stopPropagation(), t(o);
-    }), i.appendChild(r);
+    !l && r.action && !r.subMenu && o.addEventListener("click", (d) => {
+      d.stopPropagation(), t(r);
+    }), i.appendChild(o);
   }
   return i;
 }
 function me(s, e, t) {
   s.style.position = "fixed", s.style.left = `${e}px`, s.style.top = `${t}px`, s.style.visibility = "hidden", s.style.zIndex = "10000";
-  const n = s.getBoundingClientRect(), i = window.innerWidth, o = window.innerHeight;
-  let r = e, l = t;
-  e + n.width > i && (r = e - n.width), t + n.height > o && (l = t - n.height), r = Math.max(0, r), l = Math.max(0, l), s.style.left = `${r}px`, s.style.top = `${l}px`, s.style.visibility = "visible";
+  const n = s.getBoundingClientRect(), i = window.innerWidth, r = window.innerHeight;
+  let o = e, l = t;
+  e + n.width > i && (o = e - n.width), t + n.height > r && (l = t - n.height), o = Math.max(0, o), l = Math.max(0, l), s.style.left = `${o}px`, s.style.top = `${l}px`, s.style.visibility = "visible";
 }
-let T = null, I = null, k = null, $ = 0;
-const j = [
+let T = null, I = null, A = null, W = 0;
+const $ = [
   {
     id: "copy",
     name: "Copy",
@@ -521,11 +523,11 @@ const j = [
     }
   }
 ];
-class Hn extends x {
+class zn extends x {
   name = "contextMenu";
   get defaultConfig() {
     return {
-      items: j
+      items: $
     };
   }
   // #region Internal State
@@ -536,7 +538,7 @@ class Hn extends x {
   // #endregion
   // #region Lifecycle
   attach(e) {
-    super.attach(e), this.installGlobalHandlers(), $++;
+    super.attach(e), this.installGlobalHandlers(), W++;
   }
   detach() {
     this.menuElement && (this.menuElement.remove(), this.menuElement = null), this.isOpen = !1, this.params = null, this.uninstallGlobalHandlers();
@@ -544,7 +546,7 @@ class Hn extends x {
   // #endregion
   // #region Private Methods
   installGlobalHandlers() {
-    !k && typeof document < "u" && typeof W == "string" && W && (k = document.createElement("style"), k.id = "tbw-context-menu-styles", k.textContent = W, document.head.appendChild(k)), T || (T = () => {
+    !A && typeof document < "u" && typeof V == "string" && V && (A = document.createElement("style"), A.id = "tbw-context-menu-styles", A.textContent = V, document.head.appendChild(A)), T || (T = () => {
       document.querySelectorAll(".tbw-context-menu").forEach((t) => t.remove());
     }, document.addEventListener("click", T)), I || (I = (e) => {
       e.key === "Escape" && document.querySelectorAll(".tbw-context-menu").forEach((n) => n.remove());
@@ -555,21 +557,21 @@ class Hn extends x {
    * Uses reference counting to ensure handlers persist while any grid uses the plugin.
    */
   uninstallGlobalHandlers() {
-    $--, !($ > 0) && (T && (document.removeEventListener("click", T), T = null), I && (document.removeEventListener("keydown", I), I = null), k && (k.remove(), k = null));
+    W--, !(W > 0) && (T && (document.removeEventListener("click", T), T = null), I && (document.removeEventListener("keydown", I), I = null), A && (A.remove(), A = null));
   }
   // #endregion
   // #region Hooks
   afterRender() {
-    const e = this.shadowRoot;
+    const e = this.gridElement;
     if (!e) return;
     const t = e.children[0];
     t && t.getAttribute("data-context-menu-bound") !== "true" && (t.setAttribute("data-context-menu-bound", "true"), t.addEventListener("contextmenu", (n) => {
       const i = n;
       i.preventDefault();
-      const o = i.target, r = o.closest("[data-row][data-col]"), l = o.closest(".header-cell");
+      const r = i.target, o = r.closest("[data-row][data-col]"), l = r.closest(".header-cell");
       let a;
-      if (r) {
-        const c = parseInt(r.getAttribute("data-row") ?? "-1", 10), u = parseInt(r.getAttribute("data-col") ?? "-1", 10), h = this.columns[u], f = this.rows[c];
+      if (o) {
+        const c = parseInt(o.getAttribute("data-row") ?? "-1", 10), u = parseInt(o.getAttribute("data-col") ?? "-1", 10), h = this.columns[u], f = this.rows[c];
         a = {
           row: f,
           rowIndex: c,
@@ -595,8 +597,8 @@ class Hn extends x {
       } else
         return;
       this.params = a, this.position = { x: i.clientX, y: i.clientY };
-      const d = ee(this.config.items ?? j, a);
-      d.length && (this.menuElement && this.menuElement.remove(), this.menuElement = te(
+      const d = Q(this.config.items ?? $, a);
+      d.length && (this.menuElement && this.menuElement.remove(), this.menuElement = ee(
         d,
         a,
         (c) => {
@@ -624,12 +626,12 @@ class Hn extends x {
       value: n.value ?? null,
       isHeader: n.isHeader ?? !1,
       event: n.event ?? new MouseEvent("contextmenu")
-    }, o = ee(this.config.items ?? j, i);
-    this.menuElement && this.menuElement.remove(), this.menuElement = te(
-      o,
+    }, r = Q(this.config.items ?? $, i);
+    this.menuElement && this.menuElement.remove(), this.menuElement = ee(
+      r,
       i,
-      (r) => {
-        r.action && r.action(i), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
+      (o) => {
+        o.action && o.action(i), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
       },
       this.gridIcons.submenuArrow
     ), document.body.appendChild(this.menuElement), me(this.menuElement, e, t), this.isOpen = !0;
@@ -650,7 +652,8 @@ class Hn extends x {
   // #endregion
   // Styles are injected globally via installGlobalHandlers() since menu renders in document.body
 }
-function lt(s) {
+const lt = "@layer tbw-plugins{tbw-grid{--tbw-editing-bg: var(--tbw-color-selection);--tbw-editing-row-bg: var(--tbw-editing-bg);--tbw-editing-border: var(--tbw-border-input, 1px solid var(--tbw-color-border-strong));--tbw-padding-editing-input: var(--tbw-cell-padding-input, 2px 6px);--tbw-font-size-editor: inherit;--tbw-editing-row-outline-color: var(--tbw-color-accent);--tbw-editing-row-outline-width: 1px;.data-grid-row:has(.editing){background:var(--tbw-editing-row-bg);outline:var(--tbw-editing-row-outline-width) solid var(--tbw-editing-row-outline-color);outline-offset:calc(-1 * var(--tbw-editing-row-outline-width))}.data-grid-row>.cell.editing{overflow:hidden;padding:0;display:flex;min-height:calc(var(--tbw-row-height) + 2px);align-items:center;justify-content:center}.data-grid-row>.cell.editing input:not([type=checkbox]),.data-grid-row>.cell.editing select,.data-grid-row>.cell.editing textarea{width:100%;height:100%;flex:1 1 auto;min-width:0;border:var(--tbw-editing-border);padding:var(--tbw-padding-editing-input);font-size:var(--tbw-font-size-editor)}.tbw-editor-host{display:contents}}}";
+function at(s) {
   switch (s.type) {
     case "number":
       return (e) => {
@@ -681,7 +684,7 @@ function lt(s) {
           const a = document.createElement("option");
           a.value = String(l.value), a.textContent = l.label, (n.multi && Array.isArray(e.value) && e.value.includes(l.value) || !n.multi && e.value === l.value) && (a.selected = !0), t.appendChild(a);
         });
-        const r = () => {
+        const o = () => {
           if (n.multi) {
             const l = [];
             Array.from(t.selectedOptions).forEach((a) => {
@@ -690,7 +693,7 @@ function lt(s) {
           } else
             e.commit(t.value);
         };
-        return t.addEventListener("change", r), t.addEventListener("blur", r), t.addEventListener("keydown", (l) => {
+        return t.addEventListener("change", o), t.addEventListener("blur", o), t.addEventListener("keydown", (l) => {
           l.key === "Escape" && e.cancel();
         }), t;
       };
@@ -703,31 +706,32 @@ function lt(s) {
       };
   }
 }
-const U = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])';
+const j = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])';
 function P(s) {
   return !(typeof s != "string" || s === "__proto__" || s === "constructor" || s === "prototype");
 }
-function On(s) {
+function Gn(s) {
   return (s.__editingCellCount ?? 0) > 0;
 }
-function at(s) {
+function dt(s) {
   const e = (s.__editingCellCount ?? 0) + 1;
   s.__editingCellCount = e, s.setAttribute("data-has-editing", "");
 }
-function dt(s) {
+function ct(s) {
   s.__editingCellCount = 0, s.removeAttribute("data-has-editing");
 }
 function K(s, e) {
   return s instanceof HTMLInputElement ? s.type === "checkbox" ? s.checked : s.type === "number" ? s.value === "" ? null : Number(s.value) : s.type === "date" ? s.valueAsDate : s.value : e?.type === "number" && s.value !== "" ? Number(s.value) : s.value;
 }
-function ct(s, e, t) {
+function ut(s, e, t) {
   const n = s.querySelector("input,textarea,select");
   n && (n.addEventListener("blur", () => {
     t(K(n, e));
   }), n instanceof HTMLInputElement && n.type === "checkbox" ? n.addEventListener("change", () => t(n.checked)) : n instanceof HTMLSelectElement && n.addEventListener("change", () => t(K(n, e))));
 }
-class Gn extends x {
+class On extends x {
   name = "editing";
+  styles = lt;
   get defaultConfig() {
     return {
       editOn: "click"
@@ -739,7 +743,7 @@ class Gn extends x {
   /** Currently active edit column index, or -1 if not editing */
   #t = -1;
   /** Snapshots of row data before editing started */
-  #r = /* @__PURE__ */ new Map();
+  #o = /* @__PURE__ */ new Map();
   /** Set of row indices that have been modified */
   #n = /* @__PURE__ */ new Set();
   /** Set of cells currently in edit mode: "rowIndex:colIndex" */
@@ -757,26 +761,26 @@ class Gn extends x {
     }), Object.defineProperty(e, "changedRowIndices", {
       get: () => this.changedRowIndices,
       configurable: !0
-    }), e.resetChangedRows = (i) => this.resetChangedRows(i), e.beginBulkEdit = (i, o) => {
-      o && this.beginCellEdit(i, o);
+    }), e.resetChangedRows = (i) => this.resetChangedRows(i), e.beginBulkEdit = (i, r) => {
+      r && this.beginCellEdit(i, r);
     }, document.addEventListener(
       "keydown",
       (i) => {
-        i.key === "Escape" && this.#e !== -1 && this.#o(this.#e, !0);
+        i.key === "Escape" && this.#e !== -1 && this.#r(this.#e, !0);
       },
       { capture: !0, signal: t }
     ), document.addEventListener(
       "mousedown",
       (i) => {
         if (this.#e === -1) return;
-        const o = n.findRenderedRowElement?.(this.#e);
-        !o || (i.composedPath && i.composedPath() || []).includes(o) || this.#o(this.#e, !1);
+        const r = n.findRenderedRowElement?.(this.#e);
+        !r || (i.composedPath && i.composedPath() || []).includes(r) || this.#r(this.#e, !1);
       },
       { signal: t }
     );
   }
   detach() {
-    this.#e = -1, this.#t = -1, this.#r.clear(), this.#n.clear(), this.#i.clear(), super.detach();
+    this.#e = -1, this.#t = -1, this.#o.clear(), this.#n.clear(), this.#i.clear(), super.detach();
   }
   // #endregion
   // #region Event Handlers (event distribution)
@@ -790,8 +794,8 @@ class Gn extends x {
     if (n === !1 || n === "manual" || n !== "click" && n !== "dblclick") return !1;
     const i = e.originalEvent.type === "dblclick";
     if (n === "click" && i || n === "dblclick" && !i) return !1;
-    const { rowIndex: o } = e;
-    return t._columns?.some((l) => l.editable) ? (e.originalEvent.stopPropagation(), this.beginBulkEdit(o), !0) : !1;
+    const { rowIndex: r } = e;
+    return t._columns?.some((l) => l.editable) ? (e.originalEvent.stopPropagation(), this.beginBulkEdit(r), !0) : !1;
   }
   /**
    * Handle keyboard events for edit lifecycle.
@@ -799,16 +803,16 @@ class Gn extends x {
   onKeyDown(e) {
     const t = this.grid;
     if (e.key === "Escape" && this.#e !== -1)
-      return this.#o(this.#e, !0), !0;
+      return this.#r(this.#e, !0), !0;
     if (e.key === " " || e.key === "Spacebar") {
       const n = t._focusRow, i = t._focusCol;
       if (n >= 0 && i >= 0) {
-        const o = t._visibleColumns[i], r = t._rows[n];
-        if (o?.editable && o.type === "boolean" && r) {
-          const l = o.field;
+        const r = t._visibleColumns[i], o = t._rows[n];
+        if (r?.editable && r.type === "boolean" && o) {
+          const l = r.field;
           if (P(l)) {
-            const d = !r[l];
-            return this.#a(n, o, d, r), e.preventDefault(), this.requestRender(), !0;
+            const d = !o[l];
+            return this.#a(n, r, d, o), e.preventDefault(), this.requestRender(), !0;
           }
         }
       }
@@ -820,7 +824,7 @@ class Gn extends x {
       const n = this.config.editOn ?? t.effectiveConfig?.editOn;
       if (n === !1 || n === "manual") return !1;
       const i = t._focusRow;
-      return i >= 0 && t._columns?.some((r) => r.editable) ? (this.beginBulkEdit(i), !0) : !1;
+      return i >= 0 && t._columns?.some((o) => o.editable) ? (this.beginBulkEdit(i), !0) : !1;
     }
     return !1;
   }
@@ -835,12 +839,12 @@ class Gn extends x {
     const e = this.grid;
     if (this.#s && (this.#s = !1, this.#u(e)), this.#i.size !== 0)
       for (const t of this.#i) {
-        const [n, i] = t.split(":"), o = parseInt(n, 10), r = parseInt(i, 10), l = e.findRenderedRowElement?.(o);
+        const [n, i] = t.split(":"), r = parseInt(n, 10), o = parseInt(i, 10), l = e.findRenderedRowElement?.(r);
         if (!l) continue;
-        const a = l.querySelector(`.cell[data-col="${r}"]`);
+        const a = l.querySelector(`.cell[data-col="${o}"]`);
         if (!a || a.classList.contains("editing")) continue;
-        const d = e._rows[o], c = e._visibleColumns[r];
-        d && c && this.#d(d, o, c, r, a, !0);
+        const d = e._rows[r], c = e._visibleColumns[o];
+        d && c && this.#d(d, r, c, o, a, !0);
       }
   }
   /**
@@ -899,7 +903,7 @@ class Gn extends x {
    */
   resetChangedRows(e) {
     const t = this.changedRows, n = this.changedRowIndices;
-    this.#n.clear(), this.#l(), e || this.emit("changed-rows-reset", { rows: t, indices: n }), this.grid._rowPool?.forEach((o) => o.classList.remove("changed"));
+    this.#n.clear(), this.#l(), e || this.emit("changed-rows-reset", { rows: t, indices: n }), this.grid._rowPool?.forEach((r) => r.classList.remove("changed"));
   }
   /**
    * Programmatically begin editing a cell.
@@ -916,19 +920,19 @@ class Gn extends x {
   beginBulkEdit(e) {
     const t = this.grid;
     if ((this.config.editOn ?? t.effectiveConfig?.editOn) === !1 || !t._columns?.some((l) => l.editable)) return;
-    const o = t.findRenderedRowElement?.(e);
-    if (!o) return;
-    const r = t._rows[e];
-    this.#c(e, r), Array.from(o.children).forEach((l, a) => {
+    const r = t.findRenderedRowElement?.(e);
+    if (!r) return;
+    const o = t._rows[e];
+    this.#c(e, o), Array.from(r.children).forEach((l, a) => {
       const d = t._visibleColumns[a];
       if (d?.editable) {
         const c = l;
-        c.classList.contains("editing") || this.#d(r, e, d, a, c, !0);
+        c.classList.contains("editing") || this.#d(o, e, d, a, c, !0);
       }
     }), setTimeout(() => {
-      let l = o.querySelector(`.cell[data-col="${t._focusCol}"]`);
-      if (l?.classList.contains("editing") || (l = o.querySelector(".cell.editing")), l?.classList.contains("editing")) {
-        const a = l.querySelector(U);
+      let l = r.querySelector(`.cell[data-col="${t._focusCol}"]`);
+      if (l?.classList.contains("editing") || (l = r.querySelector(".cell.editing")), l?.classList.contains("editing")) {
+        const a = l.querySelector(j);
         try {
           a?.focus({ preventScroll: !0 });
         } catch {
@@ -940,13 +944,13 @@ class Gn extends x {
    * Commit the currently active row edit.
    */
   commitActiveRowEdit() {
-    this.#e !== -1 && this.#o(this.#e, !1);
+    this.#e !== -1 && this.#r(this.#e, !1);
   }
   /**
    * Cancel the currently active row edit.
    */
   cancelActiveRowEdit() {
-    this.#e !== -1 && this.#o(this.#e, !0);
+    this.#e !== -1 && this.#r(this.#e, !0);
   }
   // #endregion
   // #region Internal Methods
@@ -954,29 +958,29 @@ class Gn extends x {
    * Begin editing a single cell.
    */
   #h(e, t, n) {
-    const i = this.grid, o = i._rows[e], r = i._visibleColumns[t];
-    !o || !r?.editable || n.classList.contains("editing") || (this.#e !== e && this.#c(e, o), this.#t = t, this.#d(o, e, r, t, n, !1));
+    const i = this.grid, r = i._rows[e], o = i._visibleColumns[t];
+    !r || !o?.editable || n.classList.contains("editing") || (this.#e !== e && this.#c(e, r), this.#t = t, this.#d(r, e, o, t, n, !1));
   }
   /**
    * Sync the internal grid state with the plugin's editing state.
    */
   #l() {
     const e = this.grid;
-    e._activeEditRows = this.#e, e._rowEditSnapshots = this.#r, e._changedRowIndices = this.#n;
+    e._activeEditRows = this.#e, e._rowEditSnapshots = this.#o, e._changedRowIndices = this.#n;
   }
   /**
    * Snapshot original row data and mark as editing.
    */
   #c(e, t) {
-    this.#e !== e && (this.#r.set(e, { ...t }), this.#e = e, this.#l());
+    this.#e !== e && (this.#o.set(e, { ...t }), this.#e = e, this.#l());
   }
   /**
    * Exit editing for a row.
    */
-  #o(e, t) {
+  #r(e, t) {
     if (this.#e !== e) return;
-    const n = this.grid, i = this.#r.get(e), o = n._rows[e], r = n.findRenderedRowElement?.(e);
-    if (!t && r && o && r.querySelectorAll(".cell.editing").forEach((a) => {
+    const n = this.grid, i = this.#o.get(e), r = n._rows[e], o = n.findRenderedRowElement?.(e);
+    if (!t && o && r && o.querySelectorAll(".cell.editing").forEach((a) => {
       const d = Number(a.getAttribute("data-col"));
       if (isNaN(d)) return;
       const c = n._visibleColumns[d];
@@ -984,103 +988,103 @@ class Gn extends x {
       const u = a.querySelector("input,textarea,select");
       if (u) {
         const h = K(u, c);
-        o[c.field] !== h && this.#a(e, c, h, o);
+        r[c.field] !== h && this.#a(e, c, h, r);
       }
-    }), t && i && o)
+    }), t && i && r)
       Object.keys(i).forEach((l) => {
-        o[l] = i[l];
+        r[l] = i[l];
       }), this.#n.delete(e);
     else if (!t) {
       const l = this.#n.has(e);
       this.emit("row-commit", {
         rowIndex: e,
-        row: o,
+        row: r,
         changed: l,
         changedRows: this.changedRows,
         changedRowIndices: this.changedRowIndices
       });
     }
-    this.#r.delete(e), this.#e = -1, this.#t = -1, this.#l();
+    this.#o.delete(e), this.#e = -1, this.#t = -1, this.#l();
     for (const l of this.#i)
       l.startsWith(`${e}:`) && this.#i.delete(l);
-    r && (r.querySelectorAll(".cell.editing").forEach((l) => {
-      l.classList.remove("editing"), dt(l.parentElement);
-    }), this.requestRender()), this.#s = !0, r || (this.#u(n), this.#s = !1);
+    o && (o.querySelectorAll(".cell.editing").forEach((l) => {
+      l.classList.remove("editing"), ct(l.parentElement);
+    }), this.requestRender()), this.#s = !0, o || (this.#u(n), this.#s = !1);
   }
   /**
    * Commit a single cell value change.
    */
   #a(e, t, n, i) {
-    const o = t.field;
-    if (!P(o)) return;
-    const r = i[o];
-    if (r === n) return;
+    const r = t.field;
+    if (!P(r)) return;
+    const o = i[r];
+    if (o === n) return;
     const l = !this.#n.has(e);
     if (this.emitCancelable("cell-commit", {
       row: i,
-      field: o,
-      oldValue: r,
+      field: r,
+      oldValue: o,
       value: n,
       rowIndex: e,
       changedRows: this.changedRows,
       changedRowIndices: this.changedRowIndices,
       firstTimeForRow: l
     })) return;
-    i[o] = n, this.#n.add(e), this.#l();
+    i[r] = n, this.#n.add(e), this.#l();
     const c = this.grid.findRenderedRowElement?.(e);
     c && c.classList.add("changed");
   }
   /**
    * Inject an editor into a cell.
    */
-  #d(e, t, n, i, o, r) {
-    if (!n.editable || o.classList.contains("editing")) return;
+  #d(e, t, n, i, r, o) {
+    if (!n.editable || r.classList.contains("editing")) return;
     const l = P(n.field) ? e[n.field] : void 0;
-    o.classList.add("editing"), this.#i.add(`${t}:${i}`);
-    const a = o.parentElement;
-    a && at(a);
+    r.classList.add("editing"), this.#i.add(`${t}:${i}`);
+    const a = r.parentElement;
+    a && dt(a);
     let d = !1;
     const c = (m) => {
       d || this.#e === -1 || this.#a(t, n, m, e);
     }, u = () => {
       d = !0, P(n.field) && (e[n.field] = l);
     }, h = document.createElement("div");
-    h.className = "tbw-editor-host", o.innerHTML = "", o.appendChild(h), h.addEventListener("keydown", (m) => {
-      m.key === "Enter" && (m.stopPropagation(), m.preventDefault(), d = !0, this.#o(t, !1)), m.key === "Escape" && (m.stopPropagation(), m.preventDefault(), u(), this.#o(t, !0));
+    h.className = "tbw-editor-host", r.innerHTML = "", r.appendChild(h), h.addEventListener("keydown", (m) => {
+      m.key === "Enter" && (m.stopPropagation(), m.preventDefault(), d = !0, this.#r(t, !1)), m.key === "Escape" && (m.stopPropagation(), m.preventDefault(), u(), this.#r(t, !0));
     });
-    const f = n, g = f.__editorTemplate, p = f.editor || (g ? "template" : lt(n)), b = l;
+    const f = n, g = f.__editorTemplate, p = f.editor || (g ? "template" : at(n)), w = l;
     if (p === "template" && g)
-      this.#f(h, f, e, l, c, u, r, t);
+      this.#f(h, f, e, l, c, u, o, t);
     else if (typeof p == "string") {
       const m = document.createElement(p);
-      m.value = b, m.addEventListener("change", () => c(m.value)), h.appendChild(m), r || queueMicrotask(() => {
-        h.querySelector(U)?.focus({ preventScroll: !0 });
+      m.value = w, m.addEventListener("change", () => c(m.value)), h.appendChild(m), o || queueMicrotask(() => {
+        h.querySelector(j)?.focus({ preventScroll: !0 });
       });
     } else if (typeof p == "function") {
-      const m = { row: e, value: b, field: n.field, column: n, commit: c, cancel: u }, w = p(m);
-      typeof w == "string" ? (h.innerHTML = w, ct(h, n, c)) : w instanceof Node && h.appendChild(w), r || queueMicrotask(() => {
-        h.querySelector(U)?.focus({ preventScroll: !0 });
+      const m = { row: e, value: w, field: n.field, column: n, commit: c, cancel: u }, b = p(m);
+      typeof b == "string" ? (h.innerHTML = b, ut(h, n, c)) : b instanceof Node && h.appendChild(b), o || queueMicrotask(() => {
+        h.querySelector(j)?.focus({ preventScroll: !0 });
       });
     } else if (p && typeof p == "object") {
-      const m = this.grid, w = document.createElement("div");
-      w.setAttribute("data-external-editor", ""), w.setAttribute("data-field", n.field), h.appendChild(w);
-      const A = { row: e, value: b, field: n.field, column: n, commit: c, cancel: u };
+      const m = this.grid, b = document.createElement("div");
+      b.setAttribute("data-external-editor", ""), b.setAttribute("data-field", n.field), h.appendChild(b);
+      const L = { row: e, value: w, field: n.field, column: n, commit: c, cancel: u };
       if (p.mount)
         try {
-          p.mount({ placeholder: w, context: A, spec: p });
+          p.mount({ placeholder: b, context: L, spec: p });
         } catch (q) {
           console.warn(`[tbw-grid] External editor mount error for column '${n.field}':`, q);
         }
       else
         m.dispatchEvent(
-          new CustomEvent("mount-external-editor", { detail: { placeholder: w, spec: p, context: A } })
+          new CustomEvent("mount-external-editor", { detail: { placeholder: b, spec: p, context: L } })
         );
     }
   }
   /**
    * Render a template-based editor.
    */
-  #f(e, t, n, i, o, r, l, a) {
+  #f(e, t, n, i, r, o, l, a) {
     const d = t.__editorTemplate;
     if (!d) return;
     const c = d.cloneNode(!0), u = t.__compiledEditor;
@@ -1089,13 +1093,13 @@ class Gn extends x {
       value: i,
       field: t.field,
       column: t,
-      commit: o,
-      cancel: r
+      commit: r,
+      cancel: o
     }) : c.querySelectorAll("*").forEach((f) => {
       f.childNodes.length === 1 && f.firstChild?.nodeType === Node.TEXT_NODE && (f.textContent = f.textContent?.replace(/{{\s*value\s*}}/g, i == null ? "" : String(i)).replace(/{{\s*row\.([a-zA-Z0-9_]+)\s*}}/g, (g, p) => {
         if (!P(p)) return "";
-        const b = n[p];
-        return b == null ? "" : String(b);
+        const w = n[p];
+        return w == null ? "" : String(w);
       }) || "");
     });
     const h = c.querySelector(
@@ -1105,11 +1109,11 @@ class Gn extends x {
       h instanceof HTMLInputElement && h.type === "checkbox" ? h.checked = !!i : h.value = String(i ?? "");
       let f = !1;
       h.addEventListener("blur", () => {
-        f || o(K(h, t));
+        f || r(K(h, t));
       }), h.addEventListener("keydown", (g) => {
         const p = g;
-        p.key === "Enter" && (p.stopPropagation(), p.preventDefault(), f = !0, o(K(h, t)), this.#o(a, !1)), p.key === "Escape" && (p.stopPropagation(), p.preventDefault(), r(), this.#o(a, !0));
-      }), h instanceof HTMLInputElement && h.type === "checkbox" && h.addEventListener("change", () => o(h.checked)), l || setTimeout(() => h.focus({ preventScroll: !0 }), 0);
+        p.key === "Enter" && (p.stopPropagation(), p.preventDefault(), f = !0, r(K(h, t)), this.#r(a, !1)), p.key === "Escape" && (p.stopPropagation(), p.preventDefault(), o(), this.#r(a, !0));
+      }), h instanceof HTMLInputElement && h.type === "checkbox" && h.addEventListener("change", () => r(h.checked)), l || setTimeout(() => h.focus({ preventScroll: !0 }), 0);
     }
     e.appendChild(c);
   }
@@ -1122,10 +1126,10 @@ class Gn extends x {
         const t = e._focusRow, n = e._focusCol, i = e.findRenderedRowElement?.(t);
         if (i) {
           Array.from(e._bodyEl.querySelectorAll(".cell-focus")).forEach(
-            (r) => r.classList.remove("cell-focus")
+            (o) => o.classList.remove("cell-focus")
           );
-          const o = i.querySelector(`.cell[data-row="${t}"][data-col="${n}"]`);
-          o && (o.classList.add("cell-focus"), o.setAttribute("aria-selected", "true"), o.hasAttribute("tabindex") || o.setAttribute("tabindex", "-1"), o.focus({ preventScroll: !0 }));
+          const r = i.querySelector(`.cell[data-row="${t}"][data-col="${n}"]`);
+          r && (r.classList.add("cell-focus"), r.setAttribute("aria-selected", "true"), r.hasAttribute("tabindex") || r.setAttribute("tabindex", "-1"), r.focus({ preventScroll: !0 }));
         }
       } catch {
       }
@@ -1141,37 +1145,37 @@ function we(s, e = !0) {
   return e && (t.includes(",") || t.includes('"') || t.includes(`
 `) || t.includes("\r")) ? `"${t.replace(/"/g, '""')}"` : t;
 }
-function ut(s, e, t, n = {}) {
-  const i = n.delimiter ?? ",", o = n.newline ?? `
-`, r = [], l = n.bom ? "\uFEFF" : "";
+function ht(s, e, t, n = {}) {
+  const i = n.delimiter ?? ",", r = n.newline ?? `
+`, o = [], l = n.bom ? "\uFEFF" : "";
   if (t.includeHeaders !== !1) {
     const a = e.map((d) => {
       const c = d.header || d.field, u = t.processHeader ? t.processHeader(c, d.field) : c;
       return we(u);
     });
-    r.push(a.join(i));
+    o.push(a.join(i));
   }
   for (const a of s) {
     const d = e.map((c) => {
       let u = a[c.field];
       return t.processCell && (u = t.processCell(u, c.field, a)), we(u);
     });
-    r.push(d.join(i));
+    o.push(d.join(i));
   }
-  return l + r.join(o);
+  return l + o.join(r);
 }
 function re(s, e) {
   const t = URL.createObjectURL(s), n = document.createElement("a");
   n.href = t, n.download = e, n.style.display = "none", document.body.appendChild(n), n.click(), document.body.removeChild(n), URL.revokeObjectURL(t);
 }
-function ht(s, e) {
+function ft(s, e) {
   const t = new Blob([s], { type: "text/csv;charset=utf-8;" });
   re(t, e);
 }
 function be(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
 }
-function ft(s, e, t) {
+function gt(s, e, t) {
   let n = `<?xml version="1.0" encoding="UTF-8"?>
 <?mso-application progid="Excel.Sheet"?>
 <Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"
@@ -1182,19 +1186,19 @@ function ft(s, e, t) {
     n += `
 <Row>`;
     for (const i of e) {
-      const o = i.header || i.field, r = t.processHeader ? t.processHeader(o, i.field) : o;
-      n += `<Cell><Data ss:Type="String">${be(r)}</Data></Cell>`;
+      const r = i.header || i.field, o = t.processHeader ? t.processHeader(r, i.field) : r;
+      n += `<Cell><Data ss:Type="String">${be(o)}</Data></Cell>`;
     }
     n += "</Row>";
   }
   for (const i of s) {
     n += `
 <Row>`;
-    for (const o of e) {
-      let r = i[o.field];
-      t.processCell && (r = t.processCell(r, o.field, i));
+    for (const r of e) {
+      let o = i[r.field];
+      t.processCell && (o = t.processCell(o, r.field, i));
       let l = "String", a = "";
-      r == null ? a = "" : typeof r == "number" && !isNaN(r) ? (l = "Number", a = String(r)) : r instanceof Date ? (l = "DateTime", a = r.toISOString()) : a = be(String(r)), n += `<Cell><Data ss:Type="${l}">${a}</Data></Cell>`;
+      o == null ? a = "" : typeof o == "number" && !isNaN(o) ? (l = "Number", a = String(o)) : o instanceof Date ? (l = "DateTime", a = o.toISOString()) : a = be(String(o)), n += `<Cell><Data ss:Type="${l}">${a}</Data></Cell>`;
     }
     n += "</Row>";
   }
@@ -1203,7 +1207,7 @@ function ft(s, e, t) {
 </Worksheet>
 </Workbook>`, n;
 }
-function gt(s, e) {
+function pt(s, e) {
   const t = e.endsWith(".xls") ? e : `${e}.xls`, n = new Blob([s], {
     type: "application/vnd.ms-excel;charset=utf-8;"
   });
@@ -1234,34 +1238,34 @@ class Bn extends x {
       columns: t?.columns,
       rowIndices: t?.rowIndices
     };
-    let o = [...this.columns];
-    if (n.onlyVisible && (o = o.filter((a) => !a.hidden && !a.field.startsWith("__"))), t?.columns) {
+    let r = [...this.columns];
+    if (n.onlyVisible && (r = r.filter((a) => !a.hidden && !a.field.startsWith("__"))), t?.columns) {
       const a = new Set(t.columns);
-      o = o.filter((d) => a.has(d.field));
+      r = r.filter((d) => a.has(d.field));
     }
-    let r = [...this.rows];
+    let o = [...this.rows];
     if (n.onlySelected) {
       const a = this.getSelectionState();
-      a?.selected?.size && (r = [...a.selected].sort((c, u) => c - u).map((c) => this.rows[c]).filter(Boolean));
+      a?.selected?.size && (o = [...a.selected].sort((c, u) => c - u).map((c) => this.rows[c]).filter(Boolean));
     }
-    t?.rowIndices && (r = t.rowIndices.map((a) => this.rows[a]).filter(Boolean)), this.isExportingFlag = !0;
+    t?.rowIndices && (o = t.rowIndices.map((a) => this.rows[a]).filter(Boolean)), this.isExportingFlag = !0;
     let l = i.fileName;
     try {
       switch (e) {
         case "csv": {
-          const a = ut(r, o, i, { bom: !0 });
-          l = l.endsWith(".csv") ? l : `${l}.csv`, ht(a, l);
+          const a = ht(o, r, i, { bom: !0 });
+          l = l.endsWith(".csv") ? l : `${l}.csv`, ft(a, l);
           break;
         }
         case "excel": {
-          const a = ft(r, o, i);
-          l = l.endsWith(".xls") ? l : `${l}.xls`, gt(a, l);
+          const a = gt(o, r, i);
+          l = l.endsWith(".xls") ? l : `${l}.xls`, pt(a, l);
           break;
         }
         case "json": {
-          const a = r.map((u) => {
+          const a = o.map((u) => {
             const h = {};
-            for (const f of o) {
+            for (const f of r) {
               let g = u[f.field];
               i.processCell && (g = i.processCell(g, f.field, u)), h[f.field] = g;
             }
@@ -1276,8 +1280,8 @@ class Bn extends x {
       this.lastExportInfo = { format: e, timestamp: /* @__PURE__ */ new Date() }, this.emit("export-complete", {
         format: e,
         fileName: l,
-        rowCount: r.length,
-        columnCount: o.length
+        rowCount: o.length,
+        columnCount: r.length
       });
     } finally {
       this.isExportingFlag = !1;
@@ -1329,43 +1333,43 @@ class Bn extends x {
   }
   // #endregion
 }
-function pt(s) {
-  const { totalRows: e, viewportHeight: t, scrollTop: n, rowHeight: i, overscan: o } = s, r = Math.ceil(t / i);
-  let l = Math.floor(n / i) - o;
+function mt(s) {
+  const { totalRows: e, viewportHeight: t, scrollTop: n, rowHeight: i, overscan: r } = s, o = Math.ceil(t / i);
+  let l = Math.floor(n / i) - r;
   l < 0 && (l = 0);
-  let a = l + r + o * 2;
-  return a > e && (a = e), a === e && l > 0 && (l = Math.max(0, a - r - o * 2)), {
+  let a = l + o + r * 2;
+  return a > e && (a = e), a === e && l > 0 && (l = Math.max(0, a - o - r * 2)), {
     start: l,
     end: a,
     offsetY: l * i,
     totalHeight: e * i
   };
 }
-function mt(s, e) {
+function wt(s, e) {
   return s <= e;
 }
-function wt(s, e, t = !1) {
+function bt(s, e, t = !1) {
   const n = s[e.field];
   if (e.operator === "blank")
     return n == null || n === "";
   if (e.operator === "notBlank")
     return n != null && n !== "";
   if (n == null) return !1;
-  const i = String(n), o = t ? i : i.toLowerCase(), r = t ? String(e.value) : String(e.value).toLowerCase();
+  const i = String(n), r = t ? i : i.toLowerCase(), o = t ? String(e.value) : String(e.value).toLowerCase();
   switch (e.operator) {
     // Text operators
     case "contains":
-      return o.includes(r);
+      return r.includes(o);
     case "notContains":
-      return !o.includes(r);
+      return !r.includes(o);
     case "equals":
-      return o === r;
+      return r === o;
     case "notEquals":
-      return o !== r;
+      return r !== o;
     case "startsWith":
-      return o.startsWith(r);
+      return r.startsWith(o);
     case "endsWith":
-      return o.endsWith(r);
+      return r.endsWith(o);
     // Number/Date operators (use raw numeric values)
     case "lessThan":
       return Number(n) < Number(e.value);
@@ -1386,10 +1390,10 @@ function wt(s, e, t = !1) {
       return !0;
   }
 }
-function bt(s, e, t = !1) {
-  return e.length ? s.filter((n) => e.every((i) => wt(n, i, t))) : s;
+function vt(s, e, t = !1) {
+  return e.length ? s.filter((n) => e.every((i) => bt(n, i, t))) : s;
 }
-function vt(s) {
+function yt(s) {
   return JSON.stringify(
     s.map((e) => ({
       field: e.field,
@@ -1407,10 +1411,10 @@ function ve(s, e) {
   }
   return [...t].sort((n, i) => typeof n == "number" && typeof i == "number" ? n - i : String(n).localeCompare(String(i)));
 }
-const yt = ':host .tbw-quick-filter-input{flex:1;max-width:300px;height:28px;padding:0 8px;border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);background:var(--tbw-color-bg);color:var(--tbw-color-fg);font-size:13px}:host .tbw-quick-filter-input:focus{outline:none;border-color:var(--tbw-color-accent)}:host .header-cell.filtered:before{content:"";position:absolute;top:4px;right:4px;width:6px;height:6px;background:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));border-radius:50%}:host .tbw-filter-btn{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;padding:2px;margin-left:4px;opacity:.4;transition:opacity .15s;color:inherit;vertical-align:middle}:host .tbw-filter-btn:hover,:host .tbw-filter-btn.active{opacity:1}:host .tbw-filter-btn.active{color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6))}', xt = ".tbw-filter-panel{position:fixed;background:var(--tbw-filter-panel-bg, var(--tbw-color-panel-bg, light-dark(#eeeeee, #222222)));color:var(--tbw-filter-panel-fg, var(--tbw-color-fg, light-dark(#222222, #eeeeee)));border:1px solid var(--tbw-filter-panel-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:var(--tbw-filter-panel-radius, var(--tbw-border-radius, 4px));box-shadow:0 4px 16px var(--tbw-filter-panel-shadow, var(--tbw-color-shadow, light-dark(rgba(0, 0, 0, .1), rgba(0, 0, 0, .3))));padding:12px;z-index:10000;min-width:200px;max-width:280px;max-height:350px;display:flex;flex-direction:column;font-family:var(--tbw-font-family, system-ui, sans-serif);font-size:var(--tbw-font-size, 13px)}.tbw-filter-search{margin-bottom:8px}.tbw-filter-search-input{width:100%;padding:6px 10px;background:var(--tbw-filter-input-bg, var(--tbw-color-bg, transparent));color:inherit;border:1px solid var(--tbw-filter-input-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:var(--tbw-filter-input-radius, 4px);font-size:inherit;box-sizing:border-box}.tbw-filter-search-input:focus{outline:none;border-color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));box-shadow:0 0 0 2px rgba(from var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6)) r g b / 15%)}.tbw-filter-actions{display:flex;padding:4px 2px;margin-bottom:8px;border-bottom:1px solid var(--tbw-filter-divider, var(--tbw-color-border, light-dark(#d0d0d4, #454545)))}.tbw-filter-action-btn{background:transparent;border:none;color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));cursor:pointer;font-size:12px;padding:2px 0}.tbw-filter-action-btn:hover{text-decoration:underline}.tbw-filter-values{flex:1;overflow-y:auto;margin-bottom:8px;max-height:180px;position:relative}.tbw-filter-values-spacer{width:1px}.tbw-filter-values-content{position:absolute;top:0;left:0;right:0}.tbw-filter-value-item{display:flex;align-items:center;gap:8px;padding:4px 2px;cursor:pointer;border-radius:3px}.tbw-filter-value-item:hover{background:var(--tbw-filter-hover, var(--tbw-color-row-hover, light-dark(#f0f6ff, #1c1c1c)))}.tbw-filter-checkbox{margin:0;cursor:pointer;accent-color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6))}.tbw-filter-no-match{color:var(--tbw-filter-muted, var(--tbw-color-fg-muted, light-dark(#555555, #aaaaaa)));padding:8px 0;text-align:center;font-style:italic}.tbw-filter-buttons{display:flex;gap:8px;padding-top:8px;border-top:1px solid var(--tbw-filter-divider, var(--tbw-color-border, light-dark(#d0d0d4, #454545)))}.tbw-filter-apply-btn{flex:1;padding:6px 12px;background:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));color:var(--tbw-filter-accent-fg, var(--tbw-color-accent-fg, light-dark(#ffffff, #000000)));border:none;border-radius:4px;cursor:pointer;font-size:13px}.tbw-filter-apply-btn:hover{filter:brightness(.9)}.tbw-filter-clear-btn{flex:1;padding:6px 12px;background:transparent;color:var(--tbw-filter-muted, var(--tbw-color-fg-muted, light-dark(#555555, #aaaaaa)));border:1px solid var(--tbw-filter-input-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:4px;cursor:pointer;font-size:13px}.tbw-filter-clear-btn:hover{background:var(--tbw-filter-hover, var(--tbw-color-row-hover, light-dark(#f0f6ff, #1c1c1c)))}";
-class L extends x {
+const Ct = '@layer tbw-plugins{tbw-grid{.tbw-quick-filter-input{flex:1;max-width:300px;height:var(--tbw-input-height, 1.75rem);padding:var(--tbw-input-padding, 0 .5rem);border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);background:var(--tbw-color-bg);color:var(--tbw-color-fg);font-size:var(--tbw-font-size-sm, .8125rem);&:focus{outline:none;border-color:var(--tbw-color-accent)}}.header-cell.filtered:before{content:"";position:absolute;top:var(--tbw-spacing-xs, .25rem);right:var(--tbw-spacing-xs, .25rem);width:var(--tbw-indicator-size, .375rem);height:var(--tbw-indicator-size, .375rem);background:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));border-radius:50%}.tbw-filter-btn{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;padding:2px;margin-left:var(--tbw-spacing-xs, .25rem);opacity:.4;transition:opacity .15s;color:inherit;vertical-align:middle;&:hover,&.active{opacity:1}&.active{color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6))}}}}', xt = "@layer tbw-plugins{.tbw-filter-panel{position:fixed;background:var(--tbw-filter-panel-bg, var(--tbw-color-panel-bg, light-dark(#eeeeee, #222222)));color:var(--tbw-filter-panel-fg, var(--tbw-color-fg, light-dark(#222222, #eeeeee)));border:1px solid var(--tbw-filter-panel-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:var(--tbw-filter-panel-radius, var(--tbw-border-radius, .25rem));box-shadow:0 4px 16px var(--tbw-filter-panel-shadow, var(--tbw-color-shadow, light-dark(rgba(0, 0, 0, .1), rgba(0, 0, 0, .3))));padding:var(--tbw-panel-padding, var(--tbw-spacing-lg, .75rem));z-index:10000;min-width:200px;max-width:280px;max-height:350px;display:flex;flex-direction:column;font-family:var(--tbw-font-family, system-ui, sans-serif);font-size:var(--tbw-font-size, .8125rem);transform-origin:top center}.tbw-filter-panel.tbw-filter-panel-above{transform-origin:bottom center}.tbw-filter-panel.tbw-filter-panel-animated{animation:tbw-filter-panel-enter var(--tbw-animation-duration, .15s) var(--tbw-animation-easing, ease-out)}.tbw-filter-panel.tbw-filter-panel-above.tbw-filter-panel-animated{animation:tbw-filter-panel-enter-above var(--tbw-animation-duration, .15s) var(--tbw-animation-easing, ease-out)}@keyframes tbw-filter-panel-enter{0%{opacity:0;transform:scaleY(.3) translateY(-10px)}to{opacity:1;transform:scaleY(1) translateY(0)}}@keyframes tbw-filter-panel-enter-above{0%{opacity:0;transform:scaleY(.3) translateY(10px)}to{opacity:1;transform:scaleY(1) translateY(0)}}@supports (anchor-name: --test){.tbw-filter-panel{position-anchor:--tbw-filter-anchor;top:anchor(bottom);left:anchor(left);margin-top:4px;position-try-fallbacks:flip-inline,flip-block,flip-block flip-inline}}.tbw-filter-search{margin-bottom:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem))}.tbw-filter-search-input{width:100%;padding:var(--tbw-button-padding, .375rem .625rem);background:var(--tbw-filter-input-bg, var(--tbw-color-bg, transparent));color:inherit;border:1px solid var(--tbw-filter-input-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:var(--tbw-filter-input-radius, var(--tbw-border-radius, .25rem));font-size:inherit;box-sizing:border-box}.tbw-filter-search-input:focus{outline:none;border-color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));box-shadow:0 0 0 2px rgba(from var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6)) r g b / 15%)}.tbw-filter-actions{display:flex;padding:var(--tbw-button-padding-sm, .25rem .125rem);margin-bottom:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));border-bottom:1px solid var(--tbw-filter-divider, var(--tbw-color-border, light-dark(#d0d0d4, #454545)))}.tbw-filter-action-btn{background:transparent;border:none;color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));cursor:pointer;font-size:var(--tbw-font-size-xs, .75rem);padding:2px 0}.tbw-filter-action-btn:hover{text-decoration:underline}.tbw-filter-values{flex:1;overflow-y:auto;margin-bottom:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));max-height:180px;position:relative}.tbw-filter-values-spacer{width:1px}.tbw-filter-values-content{position:absolute;top:0;left:0;right:0}.tbw-filter-value-item{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));padding:var(--tbw-button-padding-sm, .25rem .125rem);cursor:pointer;border-radius:3px}.tbw-filter-value-item:hover{background:var(--tbw-filter-hover, var(--tbw-color-row-hover, light-dark(#f0f6ff, #1c1c1c)))}.tbw-filter-checkbox{margin:0;cursor:pointer;accent-color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6))}.tbw-filter-no-match{color:var(--tbw-filter-muted, var(--tbw-color-fg-muted, light-dark(#555555, #aaaaaa)));padding:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem)) 0;text-align:center;font-style:italic}.tbw-filter-buttons{display:flex;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));padding-top:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));border-top:1px solid var(--tbw-filter-divider, var(--tbw-color-border, light-dark(#d0d0d4, #454545)))}.tbw-filter-apply-btn{flex:1;padding:var(--tbw-button-padding, .375rem .75rem);background:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));color:var(--tbw-filter-accent-fg, var(--tbw-color-accent-fg, light-dark(#ffffff, #000000)));border:none;border-radius:var(--tbw-border-radius, .25rem);cursor:pointer;font-size:var(--tbw-font-size-sm, .8125rem)}.tbw-filter-apply-btn:hover{filter:brightness(.9)}.tbw-filter-clear-btn{flex:1;padding:var(--tbw-button-padding, .375rem .75rem);background:transparent;color:var(--tbw-filter-muted, var(--tbw-color-fg-muted, light-dark(#555555, #aaaaaa)));border:1px solid var(--tbw-filter-input-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:var(--tbw-border-radius, .25rem);cursor:pointer;font-size:var(--tbw-font-size-sm, .8125rem)}.tbw-filter-clear-btn:hover{background:var(--tbw-filter-hover, var(--tbw-color-row-hover, light-dark(#f0f6ff, #1c1c1c)))}}";
+class S extends x {
   name = "filtering";
-  styles = yt;
+  styles = Ct;
   get defaultConfig() {
     return {
       debounceMs: 300,
@@ -1425,6 +1429,8 @@ class L extends x {
   cacheKey = null;
   openPanelField = null;
   panelElement = null;
+  panelAnchorElement = null;
+  // For CSS anchor positioning cleanup
   searchText = /* @__PURE__ */ new Map();
   excludedValues = /* @__PURE__ */ new Map();
   panelAbortController = null;
@@ -1456,30 +1462,30 @@ class L extends x {
     if (!t.length) return [...e];
     if (this.config.filterHandler)
       return this.cachedResult ? this.cachedResult : [...e];
-    const n = vt(t);
+    const n = yt(t);
     if (this.cacheKey === n && this.cachedResult)
       return this.cachedResult;
-    const i = bt([...e], t, this.config.caseSensitive);
+    const i = vt([...e], t, this.config.caseSensitive);
     return this.cachedResult = i, this.cacheKey = n, i;
   }
   afterRender() {
-    const e = this.shadowRoot;
+    const e = this.gridElement;
     if (!e) return;
     e.querySelectorAll('[part~="header-cell"]').forEach((n) => {
       const i = n.getAttribute("data-col");
       if (i === null) return;
-      const o = this.visibleColumns[parseInt(i, 10)];
-      if (!o || o.filterable === !1) return;
-      const r = o.field;
-      if (!r) return;
-      const l = this.filters.has(r);
+      const r = this.visibleColumns[parseInt(i, 10)];
+      if (!r || r.filterable === !1 || _(r)) return;
+      const o = r.field;
+      if (!o) return;
+      const l = this.filters.has(o);
       let a = n.querySelector(".tbw-filter-btn");
       if (a) {
         a.classList.toggle("active", l), n.classList.toggle("filtered", l);
         return;
       }
-      a = document.createElement("button"), a.className = "tbw-filter-btn", a.setAttribute("aria-label", `Filter ${o.header ?? r}`), a.innerHTML = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', l && (a.classList.add("active"), n.classList.add("filtered")), a.addEventListener("click", (c) => {
-        c.stopPropagation(), this.toggleFilterPanel(r, o, a);
+      a = document.createElement("button"), a.className = "tbw-filter-btn", a.setAttribute("aria-label", `Filter ${r.header ?? o}`), a.innerHTML = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', l && (a.classList.add("active"), n.classList.add("filtered")), a.addEventListener("click", (c) => {
+        c.stopPropagation(), this.toggleFilterPanel(o, r, a);
       });
       const d = n.querySelector(".resize-handle");
       d ? n.insertBefore(a, d) : n.appendChild(a);
@@ -1595,27 +1601,27 @@ class L extends x {
     }
     this.closeFilterPanel();
     const i = document.createElement("div");
-    if (i.className = "tbw-filter-panel", this.panelElement = i, this.openPanelField = e, this.config.valuesHandler) {
-      i.innerHTML = '<div class="tbw-filter-loading">Loading...</div>', document.body.appendChild(i), this.positionPanel(i, n), this.setupPanelCloseHandler(i, n), this.config.valuesHandler(e, t).then((r) => {
-        this.openPanelField !== e || !this.panelElement || (i.innerHTML = "", this.renderPanelContent(e, t, i, r));
+    if (i.className = "tbw-filter-panel", this.isAnimationEnabled && i.classList.add("tbw-filter-panel-animated"), this.panelElement = i, this.openPanelField = e, this.config.valuesHandler) {
+      i.innerHTML = '<div class="tbw-filter-loading">Loading...</div>', document.body.appendChild(i), this.positionPanel(i, n), this.setupPanelCloseHandler(i, n), this.config.valuesHandler(e, t).then((o) => {
+        this.openPanelField !== e || !this.panelElement || (i.innerHTML = "", this.renderPanelContent(e, t, i, o));
       });
       return;
     }
-    const o = ve(this.sourceRows, e);
-    this.renderPanelContent(e, t, i, o), document.body.appendChild(i), this.positionPanel(i, n), this.setupPanelCloseHandler(i, n);
+    const r = ve(this.sourceRows, e);
+    this.renderPanelContent(e, t, i, r), document.body.appendChild(i), this.positionPanel(i, n), this.setupPanelCloseHandler(i, n);
   }
   /**
    * Render filter panel content with given values
    */
   renderPanelContent(e, t, n, i) {
-    let o = this.excludedValues.get(e);
-    o || (o = /* @__PURE__ */ new Set(), this.excludedValues.set(e, o));
-    const r = this.searchText.get(e) ?? "", l = {
+    let r = this.excludedValues.get(e);
+    r || (r = /* @__PURE__ */ new Set(), this.excludedValues.set(e, r));
+    const o = this.searchText.get(e) ?? "", l = {
       field: e,
       column: t,
       uniqueValues: i,
-      excludedValues: o,
-      searchText: r,
+      excludedValues: r,
+      searchText: o,
       applySetFilter: (d) => {
         this.applySetFilter(e, d), this.closeFilterPanel();
       },
@@ -1628,7 +1634,7 @@ class L extends x {
       closePanel: () => this.closeFilterPanel()
     };
     let a = !1;
-    this.config.filterPanelRenderer && (this.config.filterPanelRenderer(n, l), a = n.children.length > 0), a || this.renderDefaultFilterPanel(n, l, i, o);
+    this.config.filterPanelRenderer && (this.config.filterPanelRenderer(n, l), a = n.children.length > 0), a || this.renderDefaultFilterPanel(n, l, i, r);
   }
   /**
    * Setup click-outside handler to close the panel
@@ -1648,26 +1654,44 @@ class L extends x {
    * Close the filter panel
    */
   closeFilterPanel() {
-    this.panelElement && (this.panelElement.remove(), this.panelElement = null), this.openPanelField = null, this.panelAbortController?.abort(), this.panelAbortController = null;
+    const e = this.panelElement;
+    e && (e.remove(), this.panelElement = null), this.panelAnchorElement && (this.panelAnchorElement.style.anchorName = "", this.panelAnchorElement = null), this.openPanelField = null, this.panelAbortController?.abort(), this.panelAbortController = null;
   }
+  /** Cache for CSS anchor positioning support check */
+  static supportsAnchorPositioning = null;
   /**
-   * Position the panel below the button
+   * Check if browser supports CSS Anchor Positioning
+   */
+  static checkAnchorPositioningSupport() {
+    return S.supportsAnchorPositioning === null && (S.supportsAnchorPositioning = CSS.supports("anchor-name", "--test")), S.supportsAnchorPositioning;
+  }
+  /**
+   * Position the panel below the header cell
+   * Uses CSS Anchor Positioning if supported, falls back to JS positioning
    */
   positionPanel(e, t) {
-    const n = t.getBoundingClientRect();
-    e.style.position = "fixed", e.style.top = `${n.bottom + 4}px`, e.style.left = `${n.left}px`, requestAnimationFrame(() => {
-      const i = e.getBoundingClientRect();
-      i.right > window.innerWidth - 8 && (e.style.left = `${window.innerWidth - i.width - 8}px`), i.bottom > window.innerHeight - 8 && (e.style.top = `${n.top - i.height - 4}px`);
+    const i = t.closest(".cell") ?? t;
+    if (i.style.anchorName = "--tbw-filter-anchor", this.panelAnchorElement = i, S.checkAnchorPositioningSupport()) {
+      requestAnimationFrame(() => {
+        const o = e.getBoundingClientRect(), l = i.getBoundingClientRect();
+        o.top < l.top && e.classList.add("tbw-filter-panel-above");
+      });
+      return;
+    }
+    const r = i.getBoundingClientRect();
+    e.style.position = "fixed", e.style.top = `${r.bottom + 4}px`, e.style.left = `${r.left}px`, requestAnimationFrame(() => {
+      const o = e.getBoundingClientRect();
+      o.right > window.innerWidth - 8 && (e.style.left = `${r.right - o.width}px`), o.bottom > window.innerHeight - 8 && (e.style.top = `${r.top - o.height - 4}px`, e.classList.add("tbw-filter-panel-above"));
     });
   }
   /**
    * Render the default filter panel content
    */
   renderDefaultFilterPanel(e, t, n, i) {
-    const { field: o } = t, r = document.createElement("div");
-    r.className = "tbw-filter-search";
+    const { field: r } = t, o = document.createElement("div");
+    o.className = "tbw-filter-search";
     const l = document.createElement("input");
-    l.type = "text", l.placeholder = "Search...", l.className = "tbw-filter-search-input", l.value = this.searchText.get(o) ?? "", r.appendChild(l), e.appendChild(r);
+    l.type = "text", l.placeholder = "Search...", l.className = "tbw-filter-search-input", l.value = this.searchText.get(r) ?? "", o.appendChild(l), e.appendChild(o);
     const a = document.createElement("div");
     a.className = "tbw-filter-actions";
     const d = document.createElement("label");
@@ -1677,14 +1701,14 @@ class L extends x {
     const u = document.createElement("span");
     u.textContent = "Select All", d.appendChild(c), d.appendChild(u), a.appendChild(d);
     const h = () => {
-      const v = [...b.values()], R = v.every((C) => C), E = v.every((C) => !C);
-      c.checked = R, c.indeterminate = !R && !E;
+      const v = [...w.values()], R = v.every((y) => y), k = v.every((y) => !y);
+      c.checked = R, c.indeterminate = !R && !k;
     };
     c.addEventListener("change", () => {
       const v = c.checked;
-      for (const R of b.keys())
-        b.set(R, v);
-      h(), A();
+      for (const R of w.keys())
+        w.set(R, v);
+      h(), L();
     }), e.appendChild(a);
     const f = document.createElement("div");
     f.className = "tbw-filter-values";
@@ -1692,63 +1716,63 @@ class L extends x {
     g.className = "tbw-filter-values-spacer", f.appendChild(g);
     const p = document.createElement("div");
     p.className = "tbw-filter-values-content", f.appendChild(p);
-    const b = /* @__PURE__ */ new Map();
+    const w = /* @__PURE__ */ new Map();
     n.forEach((v) => {
       const R = v == null ? "__null__" : String(v);
-      b.set(R, !i.has(v));
+      w.set(R, !i.has(v));
     }), h();
     let m = [];
-    const w = (v, R) => {
-      const E = v == null ? "(Blank)" : String(v), C = v == null ? "__null__" : String(v), y = document.createElement("label");
-      y.className = "tbw-filter-value-item", y.style.position = "absolute", y.style.top = `${R * L.LIST_ITEM_HEIGHT}px`, y.style.left = "0", y.style.right = "0", y.style.height = `${L.LIST_ITEM_HEIGHT}px`, y.style.boxSizing = "border-box";
-      const S = document.createElement("input");
-      S.type = "checkbox", S.className = "tbw-filter-checkbox", S.checked = b.get(C) ?? !0, S.dataset.value = C, S.addEventListener("change", () => {
-        b.set(C, S.checked), h();
+    const b = (v, R) => {
+      const k = v == null ? "(Blank)" : String(v), y = v == null ? "__null__" : String(v), C = document.createElement("label");
+      C.className = "tbw-filter-value-item", C.style.position = "absolute", C.style.top = `${R * S.LIST_ITEM_HEIGHT}px`, C.style.left = "0", C.style.right = "0", C.style.height = `${S.LIST_ITEM_HEIGHT}px`, C.style.boxSizing = "border-box";
+      const E = document.createElement("input");
+      E.type = "checkbox", E.className = "tbw-filter-checkbox", E.checked = w.get(y) ?? !0, E.dataset.value = y, E.addEventListener("change", () => {
+        w.set(y, E.checked), h();
       });
-      const ae = document.createElement("span");
-      return ae.textContent = E, y.appendChild(S), y.appendChild(ae), y;
-    }, A = () => {
-      const v = m.length, R = f.clientHeight, E = f.scrollTop;
-      if (g.style.height = `${v * L.LIST_ITEM_HEIGHT}px`, mt(v, L.LIST_BYPASS_THRESHOLD / 3)) {
-        p.innerHTML = "", p.style.transform = "translateY(0px)", m.forEach((y, S) => {
-          p.appendChild(w(y, S));
+      const le = document.createElement("span");
+      return le.textContent = k, C.appendChild(E), C.appendChild(le), C;
+    }, L = () => {
+      const v = m.length, R = f.clientHeight, k = f.scrollTop;
+      if (g.style.height = `${v * S.LIST_ITEM_HEIGHT}px`, wt(v, S.LIST_BYPASS_THRESHOLD / 3)) {
+        p.innerHTML = "", p.style.transform = "translateY(0px)", m.forEach((C, E) => {
+          p.appendChild(b(C, E));
         });
         return;
       }
-      const C = pt({
+      const y = mt({
         totalRows: v,
         viewportHeight: R,
-        scrollTop: E,
-        rowHeight: L.LIST_ITEM_HEIGHT,
-        overscan: L.LIST_OVERSCAN
+        scrollTop: k,
+        rowHeight: S.LIST_ITEM_HEIGHT,
+        overscan: S.LIST_OVERSCAN
       });
-      p.style.transform = `translateY(${C.offsetY}px)`, p.innerHTML = "";
-      for (let y = C.start; y < C.end; y++)
-        p.appendChild(w(m[y], y - C.start));
+      p.style.transform = `translateY(${y.offsetY}px)`, p.innerHTML = "";
+      for (let C = y.start; C < y.end; C++)
+        p.appendChild(b(m[C], C - y.start));
     }, q = (v) => {
-      const R = v.toLowerCase();
-      if (m = n.filter((E) => {
-        const C = E == null ? "(Blank)" : String(E);
-        return !v || C.toLowerCase().includes(R);
+      const R = this.config.caseSensitive ?? !1, k = R ? v : v.toLowerCase();
+      if (m = n.filter((y) => {
+        const C = y == null ? "(Blank)" : String(y), E = R ? C : C.toLowerCase();
+        return !v || E.includes(k);
       }), m.length === 0) {
         g.style.height = "0px", p.innerHTML = "";
-        const E = document.createElement("div");
-        E.className = "tbw-filter-no-match", E.textContent = "No matching values", p.appendChild(E);
+        const y = document.createElement("div");
+        y.className = "tbw-filter-no-match", y.textContent = "No matching values", p.appendChild(y);
         return;
       }
-      A();
+      L();
     };
     f.addEventListener(
       "scroll",
       () => {
-        m.length > 0 && A();
+        m.length > 0 && L();
       },
       { passive: !0 }
     ), q(l.value), e.appendChild(f);
-    let le;
+    let se;
     l.addEventListener("input", () => {
-      clearTimeout(le), le = setTimeout(() => {
-        this.searchText.set(o, l.value), q(l.value);
+      clearTimeout(se), se = setTimeout(() => {
+        this.searchText.set(r, l.value), q(l.value);
       }, this.config.debounceMs ?? 150);
     });
     const N = document.createElement("div");
@@ -1756,20 +1780,20 @@ class L extends x {
     const H = document.createElement("button");
     H.className = "tbw-filter-apply-btn", H.textContent = "Apply", H.addEventListener("click", () => {
       const v = [];
-      for (const [R, E] of b)
-        if (!E)
+      for (const [R, k] of w)
+        if (!k)
           if (R === "__null__")
             v.push(null);
           else {
-            const C = n.find((y) => String(y) === R);
-            v.push(C !== void 0 ? C : R);
+            const y = n.find((C) => String(C) === R);
+            v.push(y !== void 0 ? y : R);
           }
       t.applySetFilter(v);
     }), N.appendChild(H);
-    const O = document.createElement("button");
-    O.className = "tbw-filter-clear-btn", O.textContent = "Clear Filter", O.addEventListener("click", () => {
+    const z = document.createElement("button");
+    z.className = "tbw-filter-clear-btn", z.textContent = "Clear Filter", z.addEventListener("click", () => {
       t.clearFilter();
-    }), N.appendChild(O), e.appendChild(N);
+    }), N.appendChild(z), e.appendChild(N);
   }
   /**
    * Apply a set filter (exclude values)
@@ -1803,10 +1827,10 @@ class L extends x {
     if (this.config.filterHandler) {
       const t = this.grid;
       t.setAttribute("aria-busy", "true");
-      const n = this.config.filterHandler(e, this.sourceRows), i = (o) => {
-        t.removeAttribute("aria-busy"), this.cachedResult = o, this.grid.rows = o, this.emit("filter-change", {
+      const n = this.config.filterHandler(e, this.sourceRows), i = (r) => {
+        t.removeAttribute("aria-busy"), this.cachedResult = r, this.grid.rows = r, this.emit("filter-change", {
           filters: e,
-          filteredRowCount: o.length
+          filteredRowCount: r.length
         }), this.requestRender();
       };
       n && typeof n.then == "function" ? n.then(i) : i(n);
@@ -1855,29 +1879,29 @@ class L extends x {
 }
 function ye(s) {
   if (!s.length) return [];
-  const e = /* @__PURE__ */ new Map(), t = [], n = (r, l) => {
+  const e = /* @__PURE__ */ new Map(), t = [], n = (o, l) => {
     if (!l.length) return;
     const a = t[t.length - 1];
-    if (a && a.implicit && a.firstIndex + a.columns.length === r) {
+    if (a && a.implicit && a.firstIndex + a.columns.length === o) {
       a.columns.push(...l);
       return;
     }
     t.push({
-      id: "__implicit__" + r,
+      id: "__implicit__" + o,
       label: void 0,
       columns: l,
-      firstIndex: r,
+      firstIndex: o,
       implicit: !0
     });
   };
-  let i = [], o = 0;
-  return s.forEach((r, l) => {
-    const a = r.group;
+  let i = [], r = 0;
+  return s.forEach((o, l) => {
+    const a = o.group;
     if (!a) {
-      i.length === 0 && (o = l), i.push(r);
+      i.length === 0 && (r = l), i.push(o);
       return;
     }
-    i.length && (n(o, i.slice()), i = []);
+    i.length && (n(r, i.slice()), i = []);
     const d = typeof a == "string" ? a : a.id;
     let c = e.get(d);
     c || (c = {
@@ -1885,44 +1909,44 @@ function ye(s) {
       label: typeof a == "string" ? void 0 : a.label,
       columns: [],
       firstIndex: l
-    }, e.set(d, c), t.push(c)), c.columns.push(r);
-  }), i.length && n(o, i), t.length === 1 && t[0].implicit && t[0].columns.length === s.length ? [] : t;
+    }, e.set(d, c), t.push(c)), c.columns.push(o);
+  }), i.length && n(r, i), t.length === 1 && t[0].implicit && t[0].columns.length === s.length ? [] : t;
 }
-function Ct(s, e, t) {
+function Rt(s, e, t) {
   if (!e.length || !s) return;
   const n = /* @__PURE__ */ new Map();
-  for (const o of e)
-    for (const r of o.columns)
-      r.field && n.set(r.field, o.id);
+  for (const r of e)
+    for (const o of r.columns)
+      o.field && n.set(o.field, r.id);
   const i = Array.from(s.querySelectorAll(".cell[data-field]"));
-  i.forEach((o) => {
-    const r = o.getAttribute("data-field") || "", l = n.get(r);
-    l && (o.classList.add("grouped"), o.getAttribute("data-group") || o.setAttribute("data-group", l));
+  i.forEach((r) => {
+    const o = r.getAttribute("data-field") || "", l = n.get(o);
+    l && (r.classList.add("grouped"), r.getAttribute("data-group") || r.setAttribute("data-group", l));
   });
-  for (const o of e) {
-    const r = o.columns[o.columns.length - 1], l = i.find((a) => a.getAttribute("data-field") === r.field);
+  for (const r of e) {
+    const o = r.columns[r.columns.length - 1], l = i.find((a) => a.getAttribute("data-field") === o.field);
     l && l.classList.add("group-end");
   }
 }
-function Rt(s, e) {
+function Et(s, e) {
   if (s.length === 0) return null;
   const t = document.createElement("div");
   t.className = "header-group-row", t.setAttribute("role", "row");
   for (const n of s) {
-    const i = n.columns[0], o = i ? e.findIndex((d) => d.field === i.field) : -1;
-    if (o === -1) continue;
-    const r = String(n.id).startsWith("__implicit__"), l = r ? "" : n.label || n.id, a = document.createElement("div");
-    a.className = "cell header-group-cell", r && a.classList.add("implicit-group"), a.setAttribute("data-group", String(n.id)), a.style.gridColumn = `${o + 1} / span ${n.columns.length}`, a.textContent = l, t.appendChild(a);
+    const i = n.columns[0], r = i ? e.findIndex((d) => d.field === i.field) : -1;
+    if (r === -1) continue;
+    const o = String(n.id).startsWith("__implicit__"), l = o ? "" : n.label || n.id, a = document.createElement("div");
+    a.className = "cell header-group-cell", o && a.classList.add("implicit-group"), a.setAttribute("data-group", String(n.id)), a.style.gridColumn = `${r + 1} / span ${n.columns.length}`, a.textContent = l, t.appendChild(a);
   }
   return t;
 }
-function Et(s) {
+function St(s) {
   return s.some((e) => e.group != null);
 }
-const St = ".header-group-row{display:grid;grid-auto-flow:column;background:var(--tbw-grouping-columns-header-bg, var(--tbw-color-header-bg));border-bottom:1px solid var(--tbw-grouping-columns-border, var(--tbw-color-border))}.header-group-cell{display:flex;align-items:center;justify-content:center;padding:4px 8px;font-weight:600;font-size:.9em;text-transform:uppercase;letter-spacing:.5px;border-right:1px solid var(--tbw-grouping-columns-border, var(--tbw-color-border))}.header-group-cell:last-child{border-right:none}.header-row .cell.grouped{border-top:none}.header-row .cell.group-end{border-right:2px solid var(--tbw-grouping-columns-separator, var(--tbw-color-border-strong))}.header-row .cell.group-end:last-child{border-right:none}.header-group-row.no-borders{border-bottom:none}.header-group-row.no-borders .header-group-cell{border-right:none}.header-row.no-group-borders .cell.group-end{border-right:1px solid var(--tbw-color-border)}";
+const kt = "@layer tbw-plugins{.header-group-row{display:grid;grid-auto-flow:column;background:var(--tbw-grouping-columns-header-bg, var(--tbw-color-header-bg));border-bottom:1px solid var(--tbw-grouping-columns-border, var(--tbw-color-border))}.header-group-cell{display:flex;align-items:center;justify-content:center;padding:var(--tbw-button-padding-sm, .25rem .5rem);font-weight:600;font-size:var(--tbw-font-size-sm, .9em);text-transform:uppercase;letter-spacing:.5px;border-right:2px solid var(--tbw-grouping-columns-separator, var(--tbw-color-border-strong, var(--tbw-color-border)))}.header-group-cell:last-child{border-right:none}.header-row .cell.grouped{border-top:none}.header-row .cell.group-end{border-right:2px solid var(--tbw-grouping-columns-separator, var(--tbw-color-border-strong, var(--tbw-color-border)))}.header-row .cell.group-end:last-child{border-right:none}.rows .cell.group-end{border-right:2px solid var(--tbw-grouping-columns-separator, var(--tbw-color-border-strong, var(--tbw-color-border)))}.rows .cell.group-end:last-child{border-right:none}.header-group-row.no-borders{border-bottom:none}.header-group-row.no-borders .header-group-cell{border-right:none}.header-row.no-group-borders .cell.group-end{border-right:1px solid var(--tbw-color-border)}}";
 class Vn extends x {
   name = "groupingColumns";
-  styles = St;
+  styles = kt;
   get defaultConfig() {
     return {
       showGroupBorders: !0
@@ -1946,7 +1970,7 @@ class Vn extends x {
     if (t?.columnGroups && Array.isArray(t.columnGroups) && t.columnGroups.length > 0)
       return !0;
     const n = t?.columns;
-    return Array.isArray(n) ? Et(n) : !1;
+    return Array.isArray(n) ? St(n) : !1;
   }
   // #endregion
   // #region Hooks
@@ -1954,13 +1978,13 @@ class Vn extends x {
     const t = this.grid?.gridConfig?.columnGroups;
     let n;
     if (t && Array.isArray(t) && t.length > 0) {
-      const o = /* @__PURE__ */ new Map();
-      for (const r of t)
-        for (const l of r.children)
-          o.set(l, { id: r.id, label: r.header });
-      n = e.map((r) => {
-        const l = o.get(r.field);
-        return l && !r.group ? { ...r, group: l } : r;
+      const r = /* @__PURE__ */ new Map();
+      for (const o of t)
+        for (const l of o.children)
+          r.set(l, { id: o.id, label: o.header });
+      n = e.map((o) => {
+        const l = r.get(o.field);
+        return l && !o.group ? { ...o, group: l } : o;
       });
     } else
       n = [...e];
@@ -1969,24 +1993,43 @@ class Vn extends x {
   }
   afterRender() {
     if (!this.isActive) {
-      const a = this.shadowRoot?.querySelector(".header")?.querySelector(".header-group-row");
+      const a = this.gridElement?.querySelector(".header")?.querySelector(".header-group-row");
       a && a.remove();
       return;
     }
-    const e = this.shadowRoot?.querySelector(".header");
+    const e = this.gridElement?.querySelector(".header");
     if (!e) return;
     const t = e.querySelector(".header-group-row");
     t && t.remove();
     const n = this.columns, i = ye(n);
     if (i.length === 0) return;
-    const o = Rt(i, n);
-    if (o) {
-      o.classList.toggle("no-borders", !this.config.showGroupBorders);
+    const r = Et(i, n);
+    if (r) {
+      r.classList.toggle("no-borders", !this.config.showGroupBorders);
       const l = e.querySelector(".header-row");
-      l ? e.insertBefore(o, l) : e.appendChild(o);
+      l ? e.insertBefore(r, l) : e.appendChild(r);
+    }
+    const o = e.querySelector(".header-row");
+    o && (o.classList.toggle("no-group-borders", !this.config.showGroupBorders), Rt(o, i)), this.#e(i);
+  }
+  /**
+   * Apply group-end class to all data cells in the last column of each group.
+   * This extends the strong border separator through all data rows.
+   */
+  #e(e) {
+    if (!this.config.showGroupBorders) return;
+    const t = this.gridElement;
+    if (!t) return;
+    const n = /* @__PURE__ */ new Set();
+    for (const r of e) {
+      const o = r.columns[r.columns.length - 1];
+      o?.field && n.add(o.field);
+    }
+    const i = t.querySelectorAll(".rows .cell[data-field]");
+    for (const r of i) {
+      const o = r.getAttribute("data-field");
+      o && n.has(o) ? r.classList.add("group-end") : r.classList.remove("group-end");
     }
-    const r = e.querySelector(".header-row");
-    r && (r.classList.toggle("no-group-borders", !this.config.showGroupBorders), Ct(r, i));
   }
   // #endregion
   // #region Public API
@@ -2021,7 +2064,7 @@ class Vn extends x {
   }
   // #endregion
 }
-function kt({ rows: s, config: e, expanded: t }) {
+function At({ rows: s, config: e, expanded: t }) {
   const n = e.groupOn;
   if (typeof n != "function")
     return [];
@@ -2037,43 +2080,43 @@ function kt({ rows: s, config: e, expanded: t }) {
     }), d.rows.push(l);
   }), i.children.size === 1 && i.children.has("__ungrouped__") && i.children.get("__ungrouped__").rows.length === s.length)
     return [];
-  const o = [], r = (l) => {
+  const r = [], o = (l) => {
     if (l === i) {
-      l.children.forEach((d) => r(d));
+      l.children.forEach((d) => o(d));
       return;
     }
     const a = t.has(l.key);
-    o.push({
+    r.push({
       kind: "group",
       key: l.key,
       value: l.value,
       depth: l.depth,
       rows: l.rows,
       expanded: a
-    }), a && (l.children.size ? l.children.forEach((d) => r(d)) : l.rows.forEach((d) => o.push({ kind: "data", row: d, rowIndex: s.indexOf(d) })));
+    }), a && (l.children.size ? l.children.forEach((d) => o(d)) : l.rows.forEach((d) => r.push({ kind: "data", row: d, rowIndex: s.indexOf(d) })));
   };
-  return r(i), o;
+  return o(i), r;
 }
-function At(s, e) {
+function _t(s, e) {
   const t = new Set(s);
   return t.has(e) ? t.delete(e) : t.add(e), t;
 }
-function _t(s) {
+function Lt(s) {
   const e = /* @__PURE__ */ new Set();
   for (const t of s)
     t.kind === "group" && e.add(t.key);
   return e;
 }
-function Lt() {
+function Tt() {
   return /* @__PURE__ */ new Set();
 }
-function Tt(s) {
+function It(s) {
   return s.kind !== "group" ? 0 : s.rows.length;
 }
-const It = '.group-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-grouping-rows-bg, var(--tbw-color-panel-bg));font-weight:500;border-bottom:var(--tbw-row-divider);min-height:var(--tbw-row-height)}.group-row .cell{display:flex;align-items:center;padding:var(--tbw-cell-padding, 2px 8px)}.group-row:hover{background:var(--tbw-grouping-rows-bg-hover, var(--tbw-color-row-hover))}.group-toggle{cursor:pointer;user-select:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:4px;background:none;border:0;font:inherit}.group-toggle:hover{background:var(--tbw-grouping-rows-toggle-hover, var(--tbw-color-row-hover));border-radius:2px}.group-label{display:inline-flex;align-items:center;gap:8px}.group-count{color:var(--tbw-grouping-rows-count-color, var(--tbw-color-fg-muted));font-size:.85em;font-weight:400}[data-group-depth="0"] .group-label{padding-left:0}[data-group-depth="1"] .group-label{padding-left:20px}[data-group-depth="2"] .group-label{padding-left:40px}[data-group-depth="3"] .group-label{padding-left:60px}[data-group-depth="4"] .group-label{padding-left:80px}.data-grid-row.tbw-group-slide-in{animation:tbw-group-slide-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-group-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.data-grid-row.tbw-group-fade-in{animation:tbw-group-fade-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-group-fade-in{0%{opacity:0}to{opacity:1}}';
-class zn extends x {
+const Ft = "@layer tbw-plugins{.group-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-grouping-rows-bg, var(--tbw-color-panel-bg));font-weight:500;border-bottom:var(--tbw-row-divider);min-height:var(--tbw-row-height)}.group-row .cell{display:flex;align-items:center;padding:var(--tbw-cell-padding, .125rem .5rem)}.group-row:hover{background:var(--tbw-grouping-rows-bg-hover, var(--tbw-color-row-hover))}.group-toggle{cursor:pointer;user-select:none;display:inline-flex;align-items:center;justify-content:center;width:var(--tbw-toggle-size, 1.25rem);height:var(--tbw-toggle-size, 1.25rem);margin-right:.25rem;background:none;border:0;font:inherit}.group-toggle:hover{background:var(--tbw-grouping-rows-toggle-hover, var(--tbw-color-row-hover));border-radius:var(--tbw-border-radius, .125rem)}.group-label{display:inline-flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem))}.group-count{color:var(--tbw-grouping-rows-count-color, var(--tbw-color-fg-muted));font-size:var(--tbw-font-size-xs, .85em);font-weight:400}.group-row{padding-left:calc(var(--tbw-group-depth, 0) * var(--tbw-group-indent-width, 1.25em))}.data-grid-row.tbw-group-slide-in{animation:tbw-group-slide-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-group-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.data-grid-row.tbw-group-fade-in{animation:tbw-group-fade-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-group-fade-in{0%{opacity:0}to{opacity:1}}}";
+class Wn extends x {
   name = "groupingRows";
-  styles = It;
+  styles = Ft;
   get defaultConfig() {
     return {
       defaultExpanded: !1,
@@ -2116,7 +2159,7 @@ class zn extends x {
     const t = this.config;
     if (typeof t.groupOn != "function")
       return this.isActive = !1, this.flattenedRows = [], [...e];
-    const n = kt({
+    const n = At({
       rows: [...e],
       config: t,
       expanded: this.expandedKeys
@@ -2125,20 +2168,20 @@ class zn extends x {
       return this.isActive = !1, this.flattenedRows = [], [...e];
     this.isActive = !0, this.flattenedRows = n, this.keysToAnimate.clear();
     const i = /* @__PURE__ */ new Set();
-    return n.forEach((o, r) => {
-      if (o.kind === "data") {
-        const l = `data-${r}`;
+    return n.forEach((r, o) => {
+      if (r.kind === "data") {
+        const l = `data-${o}`;
         i.add(l), this.previousVisibleKeys.has(l) || this.keysToAnimate.add(l);
       }
-    }), this.previousVisibleKeys = i, n.map((o) => o.kind === "group" ? {
+    }), this.previousVisibleKeys = i, n.map((r) => r.kind === "group" ? {
       __isGroupRow: !0,
-      __groupKey: o.key,
-      __groupValue: o.value,
-      __groupDepth: o.depth,
-      __groupRows: o.rows,
-      __groupExpanded: o.expanded,
-      __groupRowCount: Tt(o)
-    } : o.row);
+      __groupKey: r.key,
+      __groupValue: r.value,
+      __groupDepth: r.depth,
+      __groupRows: r.rows,
+      __groupExpanded: r.expanded,
+      __groupRowCount: It(r)
+    } : r.row);
   }
   onCellClick(e) {
     const t = e.row;
@@ -2172,19 +2215,19 @@ class zn extends x {
       if (a)
         return t.className = "data-grid-row group-row", t.__isCustomRow = !0, t.setAttribute("data-group-depth", String(e.__groupDepth)), typeof a == "string" ? t.innerHTML = a : (t.innerHTML = "", t.appendChild(a)), !0;
     }
-    const o = () => {
+    const r = () => {
       this.toggle(e.__groupKey);
     };
-    return t.className = "data-grid-row group-row", t.__isCustomRow = !0, t.setAttribute("data-group-depth", String(e.__groupDepth)), t.setAttribute("role", "row"), t.setAttribute("aria-expanded", String(e.__groupExpanded)), t.style.paddingLeft = `${(e.__groupDepth || 0) * (i.indentWidth ?? 20)}px`, t.innerHTML = "", i.fullWidth !== !1 ? this.renderFullWidthGroupRow(e, t, o) : this.renderPerColumnGroupRow(e, t, o), !0;
+    return t.className = "data-grid-row group-row", t.__isCustomRow = !0, t.setAttribute("data-group-depth", String(e.__groupDepth)), t.setAttribute("role", "row"), t.setAttribute("aria-expanded", String(e.__groupExpanded)), t.style.setProperty("--tbw-group-depth", String(e.__groupDepth || 0)), i.indentWidth !== void 0 && t.style.setProperty("--tbw-group-indent-width", `${i.indentWidth}px`), t.innerHTML = "", i.fullWidth !== !1 ? this.renderFullWidthGroupRow(e, t, r) : this.renderPerColumnGroupRow(e, t, r), !0;
   }
   afterRender() {
     const e = this.animationStyle;
     if (e === !1 || this.keysToAnimate.size === 0) return;
-    const t = this.shadowRoot?.querySelector(".rows");
+    const t = this.gridElement?.querySelector(".rows");
     if (!t) return;
     const n = e === "fade" ? "tbw-group-fade-in" : "tbw-group-slide-in";
     for (const i of t.querySelectorAll(".data-grid-row:not(.group-row)")) {
-      const o = i.querySelector(".cell[data-row]"), r = o ? parseInt(o.getAttribute("data-row") ?? "-1", 10) : -1, a = this.flattenedRows[r]?.kind === "data" ? `data-${r}` : void 0;
+      const r = i.querySelector(".cell[data-row]"), o = r ? parseInt(r.getAttribute("data-row") ?? "-1", 10) : -1, a = this.flattenedRows[o]?.kind === "data" ? `data-${o}` : void 0;
       a && this.keysToAnimate.has(a) && (i.classList.add(n), i.addEventListener("animationend", () => i.classList.remove(n), { once: !0 }));
     }
     this.keysToAnimate.clear();
@@ -2208,43 +2251,43 @@ class zn extends x {
     return i.formatLabel ? i.formatLabel(e, t, n) : String(e);
   }
   renderFullWidthGroupRow(e, t, n) {
-    const i = this.config, o = document.createElement("div");
-    o.className = "cell group-full", o.style.gridColumn = "1 / -1", o.setAttribute("role", "gridcell"), o.setAttribute("data-col", "0"), o.appendChild(this.createToggleButton(e.__groupExpanded, n));
-    const r = document.createElement("span");
-    if (r.className = "group-label", r.textContent = this.getGroupLabelText(e.__groupValue, e.__groupDepth || 0, e.__groupKey), o.appendChild(r), i.showRowCount !== !1) {
+    const i = this.config, r = document.createElement("div");
+    r.className = "cell group-full", r.style.gridColumn = "1 / -1", r.setAttribute("role", "gridcell"), r.setAttribute("data-col", "0"), r.appendChild(this.createToggleButton(e.__groupExpanded, n));
+    const o = document.createElement("span");
+    if (o.className = "group-label", o.textContent = this.getGroupLabelText(e.__groupValue, e.__groupDepth || 0, e.__groupKey), r.appendChild(o), i.showRowCount !== !1) {
       const l = document.createElement("span");
-      l.className = "group-count", l.textContent = `(${e.__groupRowCount ?? e.__groupRows?.length ?? 0})`, o.appendChild(l);
+      l.className = "group-count", l.textContent = `(${e.__groupRowCount ?? e.__groupRows?.length ?? 0})`, r.appendChild(l);
     }
-    t.appendChild(o);
+    t.appendChild(r);
   }
   renderPerColumnGroupRow(e, t, n) {
-    const i = this.config, o = i.aggregators ?? {}, r = this.columns, l = e.__groupRows ?? [], d = this.shadowRoot?.querySelector(".body")?.style.gridTemplateColumns || "";
+    const i = this.config, r = i.aggregators ?? {}, o = this.columns, l = e.__groupRows ?? [], d = this.gridElement?.querySelector(".body")?.style.gridTemplateColumns || "";
     d && (t.style.display = "grid", t.style.gridTemplateColumns = d);
     let c = !1;
-    r.forEach((u, h) => {
+    o.forEach((u, h) => {
       const f = document.createElement("div");
-      if (f.className = "cell group-cell", f.setAttribute("data-col", String(h)), f.setAttribute("role", "gridcell"), ie(u)) {
+      if (f.className = "cell group-cell", f.setAttribute("data-col", String(h)), f.setAttribute("role", "gridcell"), ne(u)) {
         f.setAttribute("data-field", u.field), t.appendChild(f);
         return;
       }
       if (c) {
-        const g = o[u.field];
+        const g = r[u.field];
         if (g) {
-          const p = de(g, l, u.field, u);
+          const p = ae(g, l, u.field, u);
           f.textContent = p != null ? String(p) : "";
         } else
           f.textContent = "";
       } else {
         c = !0, f.appendChild(this.createToggleButton(e.__groupExpanded, n));
-        const g = document.createElement("span"), p = o[u.field];
+        const g = document.createElement("span"), p = r[u.field];
         if (p) {
-          const b = de(p, l, u.field, u);
-          g.textContent = b != null ? String(b) : String(e.__groupValue);
+          const w = ae(p, l, u.field, u);
+          g.textContent = w != null ? String(w) : String(e.__groupValue);
         } else
           g.textContent = this.getGroupLabelText(e.__groupValue, e.__groupDepth || 0, e.__groupKey);
         if (f.appendChild(g), i.showRowCount !== !1) {
-          const b = document.createElement("span");
-          b.className = "group-count", b.textContent = ` (${l.length})`, f.appendChild(b);
+          const w = document.createElement("span");
+          w.className = "group-count", w.textContent = ` (${l.length})`, f.appendChild(w);
         }
       }
       t.appendChild(f);
@@ -2256,20 +2299,20 @@ class zn extends x {
    * Expand all groups.
    */
   expandAll() {
-    this.expandedKeys = _t(this.flattenedRows), this.requestRender();
+    this.expandedKeys = Lt(this.flattenedRows), this.requestRender();
   }
   /**
    * Collapse all groups.
    */
   collapseAll() {
-    this.expandedKeys = Lt(), this.requestRender();
+    this.expandedKeys = Tt(), this.requestRender();
   }
   /**
    * Toggle expansion of a specific group.
    * @param key - The group key to toggle
    */
   toggle(e) {
-    this.expandedKeys = At(this.expandedKeys, e);
+    this.expandedKeys = _t(this.expandedKeys, e);
     const t = this.flattenedRows.find((n) => n.kind === "group" && n.key === e);
     this.emit("group-toggle", {
       key: e,
@@ -2360,33 +2403,33 @@ class zn extends x {
   }
   // #endregion
 }
-function xe(s, e) {
+function Ce(s, e) {
   const t = new Set(s);
   return t.has(e) ? t.delete(e) : t.add(e), t;
 }
-function Ft(s, e) {
+function Mt(s, e) {
   const t = new Set(s);
   return t.add(e), t;
 }
-function Mt(s, e) {
+function Pt(s, e) {
   const t = new Set(s);
   return t.delete(e), t;
 }
-function Pt(s, e) {
+function Dt(s, e) {
   return s.has(e);
 }
-function Dt(s, e, t, n) {
+function Kt(s, e, t, n) {
   const i = document.createElement("div");
   i.className = "master-detail-row", i.setAttribute("data-detail-for", String(e)), i.setAttribute("role", "row");
-  const o = document.createElement("div");
-  o.className = "master-detail-cell", o.setAttribute("role", "cell"), o.style.gridColumn = `1 / ${n + 1}`;
-  const r = t(s, e);
-  return typeof r == "string" ? o.innerHTML = r : r instanceof HTMLElement && o.appendChild(r), i.appendChild(o), i;
+  const r = document.createElement("div");
+  r.className = "master-detail-cell", r.setAttribute("role", "cell"), r.style.gridColumn = `1 / ${n + 1}`;
+  const o = t(s, e);
+  return typeof o == "string" ? r.innerHTML = o : o instanceof HTMLElement && r.appendChild(o), i.appendChild(r), i;
 }
-const Kt = ".cell[data-field=__tbw_expander]{border-right:none!important;padding:0;display:flex;align-items:center;justify-content:center}.header-row .cell[data-field=__tbw_expander]{visibility:hidden;border:none!important;padding:0;overflow:hidden}.header-row .cell[data-field=__tbw_expander]+.cell{margin-left:-32px;padding-left:calc(var(--tbw-cell-padding, 8px) + 32px)}.master-detail-expander{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.master-detail-toggle{cursor:pointer;opacity:.7;user-select:none;display:inline-flex;align-items:center;justify-content:center}.master-detail-toggle:hover{opacity:1}.master-detail-row{grid-column:1 / -1;display:grid;background:var(--tbw-master-detail-bg, var(--tbw-color-row-alt));border-bottom:1px solid var(--tbw-master-detail-border, var(--tbw-color-border));overflow:hidden}.master-detail-cell{padding:16px;overflow:auto}.master-detail-row.tbw-expanding{animation:tbw-detail-expand var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}.master-detail-row.tbw-collapsing{animation:tbw-detail-collapse var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-detail-expand{0%{opacity:0;max-height:0;padding-top:0;padding-bottom:0}to{opacity:1;max-height:500px;padding-top:16px;padding-bottom:16px}}@keyframes tbw-detail-collapse{0%{opacity:1;max-height:500px}to{opacity:0;max-height:0}}";
+const qt = "@layer tbw-plugins{tbw-grid{.cell[data-field=__tbw_expander]{border-right:none!important;padding:0;display:flex;align-items:center;justify-content:center}.header-row .cell[data-field=__tbw_expander]{display:none}.header-row .cell[data-field=__tbw_expander]+.cell{grid-column:1 / 3}.master-detail-expander{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.master-detail-toggle{cursor:pointer;opacity:.7;user-select:none;display:inline-flex;align-items:center;justify-content:center}.master-detail-toggle:hover{opacity:1}.master-detail-row{grid-column:1 / -1;display:grid;background:var(--tbw-master-detail-bg, var(--tbw-color-row-alt));border-bottom:1px solid var(--tbw-master-detail-border, var(--tbw-color-border));overflow:hidden}.master-detail-cell{padding:var(--tbw-detail-padding, var(--tbw-spacing-xl, 1rem));overflow:auto}.master-detail-row.tbw-expanding{animation:tbw-detail-expand var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}.master-detail-row.tbw-collapsing{animation:tbw-detail-collapse var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}}@keyframes tbw-detail-expand{0%{opacity:0;max-height:0;padding-top:0;padding-bottom:0}to{opacity:1;max-height:var(--tbw-detail-max-height, 31.25rem);padding-top:var(--tbw-detail-padding, var(--tbw-spacing-xl, 1rem));padding-bottom:var(--tbw-detail-padding, var(--tbw-spacing-xl, 1rem))}}@keyframes tbw-detail-collapse{0%{opacity:1;max-height:var(--tbw-detail-max-height, 31.25rem)}to{opacity:0;max-height:0}}}";
 class Ge extends x {
   name = "masterDetail";
-  styles = Kt;
+  styles = qt;
   get defaultConfig() {
     return {
       detailHeight: "auto",
@@ -2440,8 +2483,8 @@ class Ge extends x {
         return;
       }
     }
-    const i = t.getAttribute("animation"), o = t.getAttribute("show-expand-column"), r = t.getAttribute("expand-on-row-click"), l = t.getAttribute("collapse-on-click-outside"), a = t.getAttribute("height"), d = {};
-    i !== null && (d.animation = i === "false" ? !1 : i), o !== null && (d.showExpandColumn = o !== "false"), r !== null && (d.expandOnRowClick = r === "true"), l !== null && (d.collapseOnClickOutside = l === "true"), a !== null && (d.detailHeight = a === "auto" ? "auto" : parseInt(a, 10));
+    const i = t.getAttribute("animation"), r = t.getAttribute("show-expand-column"), o = t.getAttribute("expand-on-row-click"), l = t.getAttribute("collapse-on-click-outside"), a = t.getAttribute("height"), d = {};
+    i !== null && (d.animation = i === "false" ? !1 : i), r !== null && (d.showExpandColumn = r !== "false"), o !== null && (d.expandOnRowClick = o === "true"), l !== null && (d.collapseOnClickOutside = l === "true"), a !== null && (d.detailHeight = a === "auto" ? "auto" : parseInt(a, 10));
     const c = t.innerHTML.trim();
     c && !this.config.detailRenderer && (d.detailRenderer = (u, h) => {
       const f = je(c, { value: u, row: u });
@@ -2500,7 +2543,7 @@ class Ge extends x {
    * Toggle a row's detail and emit event.
    */
   toggleAndEmit(e, t) {
-    this.expandedRows = xe(this.expandedRows, e), this.emit("detail-expand", {
+    this.expandedRows = Ce(this.expandedRows, e), this.emit("detail-expand", {
       rowIndex: t,
       row: e,
       expanded: this.expandedRows.has(e)
@@ -2520,8 +2563,8 @@ class Ge extends x {
     if (Qe(t))
       return t;
     const i = et(this.name);
-    return i.viewRenderer = (o) => {
-      const { row: r } = o, l = this.expandedRows.has(r), a = document.createElement("span");
+    return i.viewRenderer = (r) => {
+      const { row: o } = r, l = this.expandedRows.has(o), a = document.createElement("span");
       a.className = "master-detail-expander expander-cell";
       const d = document.createElement("span");
       return d.className = `master-detail-toggle${l ? " expanded" : ""}`, this.setIcon(d, this.resolveIcon(l ? "collapse" : "expand")), d.setAttribute("role", "button"), d.setAttribute("tabindex", "0"), d.setAttribute("aria-expanded", String(l)), d.setAttribute("aria-label", l ? "Collapse details" : "Expand details"), a.appendChild(d), a;
@@ -2539,10 +2582,10 @@ class Ge extends x {
   onKeyDown(e) {
     if (e.key !== " ") return;
     const t = this.grid._focusCol, n = this.grid._focusRow, i = this.columns[t];
-    if (!i || !ie(i)) return;
-    const o = this.rows[n];
-    if (o)
-      return e.preventDefault(), this.toggleAndEmit(o, n), this.requestRenderWithFocus(), !0;
+    if (!i || !ne(i)) return;
+    const r = this.rows[n];
+    if (r)
+      return e.preventDefault(), this.toggleAndEmit(r, n), this.requestRenderWithFocus(), !0;
   }
   afterRender() {
     this.#e();
@@ -2560,27 +2603,27 @@ class Ge extends x {
    */
   #e() {
     if (!this.config.detailRenderer) return;
-    const e = this.shadowRoot?.querySelector(".rows");
+    const e = this.gridElement?.querySelector(".rows");
     if (!e) return;
     const t = /* @__PURE__ */ new Map(), n = e.querySelectorAll(".data-grid-row"), i = this.columns.length;
-    for (const r of n) {
-      const l = r.querySelector(".cell[data-row]"), a = l ? parseInt(l.getAttribute("data-row") ?? "-1", 10) : -1;
-      a >= 0 && t.set(a, r);
+    for (const o of n) {
+      const l = o.querySelector(".cell[data-row]"), a = l ? parseInt(l.getAttribute("data-row") ?? "-1", 10) : -1;
+      a >= 0 && t.set(a, o);
     }
-    const o = e.querySelectorAll(".master-detail-row");
-    for (const r of o) {
-      const l = parseInt(r.getAttribute("data-detail-for") ?? "-1", 10), a = l >= 0 ? this.rows[l] : void 0, d = a && this.expandedRows.has(a), c = t.has(l);
-      (!d || !c) && (r.remove(), a && this.detailElements.delete(a));
+    const r = e.querySelectorAll(".master-detail-row");
+    for (const o of r) {
+      const l = parseInt(o.getAttribute("data-detail-for") ?? "-1", 10), a = l >= 0 ? this.rows[l] : void 0, d = a && this.expandedRows.has(a), c = t.has(l);
+      (!d || !c) && (o.remove(), a && this.detailElements.delete(a));
     }
-    for (const [r, l] of t) {
-      const a = this.rows[r];
+    for (const [o, l] of t) {
+      const a = this.rows[o];
       if (!a || !this.expandedRows.has(a)) continue;
       const d = this.detailElements.get(a);
       if (d) {
         d.previousElementSibling !== l && l.after(d);
         continue;
       }
-      const c = Dt(a, r, this.config.detailRenderer, i);
+      const c = Kt(a, o, this.config.detailRenderer, i);
       typeof this.config.detailHeight == "number" && (c.style.height = `${this.config.detailHeight}px`), l.after(c), this.detailElements.set(a, c), this.animateExpand(c);
     }
   }
@@ -2618,12 +2661,12 @@ class Ge extends x {
       a >= 0 && i.push({ index: a, row: l });
     }
     i.sort((l, a) => l.index - a.index);
-    let o = e, r = 0;
+    let r = e, o = 0;
     for (const { index: l, row: a } of i) {
-      const d = l * n + r, c = this.getDetailHeight(a), u = d + n + c;
-      r += c, !(l >= e) && u > t && l < o && (o = l);
+      const d = l * n + o, c = this.getDetailHeight(a), u = d + n + c;
+      o += c, !(l >= e) && u > t && l < r && (r = l);
     }
-    return o;
+    return r;
   }
   // #endregion
   // #region Public API
@@ -2633,7 +2676,7 @@ class Ge extends x {
    */
   expand(e) {
     const t = this.rows[e];
-    t && (this.expandedRows = Ft(this.expandedRows, t), this.requestRender());
+    t && (this.expandedRows = Mt(this.expandedRows, t), this.requestRender());
   }
   /**
    * Collapse the detail row at the given index.
@@ -2641,7 +2684,7 @@ class Ge extends x {
    */
   collapse(e) {
     const t = this.rows[e];
-    t && (this.expandedRows = Mt(this.expandedRows, t), this.requestRender());
+    t && (this.expandedRows = Pt(this.expandedRows, t), this.requestRender());
   }
   /**
    * Toggle the detail row at the given index.
@@ -2649,7 +2692,7 @@ class Ge extends x {
    */
   toggle(e) {
     const t = this.rows[e];
-    t && (this.expandedRows = xe(this.expandedRows, t), this.requestRender());
+    t && (this.expandedRows = Ce(this.expandedRows, t), this.requestRender());
   }
   /**
    * Check if the detail row at the given index is expanded.
@@ -2658,7 +2701,7 @@ class Ge extends x {
    */
   isExpanded(e) {
     const t = this.rows[e];
-    return t ? Pt(this.expandedRows, t) : !1;
+    return t ? Dt(this.expandedRows, t) : !1;
   }
   /**
    * Expand all detail rows.
@@ -2711,34 +2754,34 @@ class Ge extends x {
   }
   // #endregion
 }
-function qt(s, e, t) {
+function Nt(s, e, t) {
   return e.length ? [...s].sort((n, i) => {
-    for (const o of e) {
-      const l = t.find((u) => u.field === o.field)?.sortComparator ?? Nt, a = n[o.field], d = i[o.field], c = l(a, d, n, i);
+    for (const r of e) {
+      const l = t.find((u) => u.field === r.field)?.sortComparator ?? Ht, a = n[r.field], d = i[r.field], c = l(a, d, n, i);
       if (c !== 0)
-        return o.direction === "asc" ? c : -c;
+        return r.direction === "asc" ? c : -c;
     }
     return 0;
   }) : [...s];
 }
-function Nt(s, e) {
+function Ht(s, e) {
   return s == null && e == null ? 0 : s == null ? 1 : e == null ? -1 : typeof s == "number" && typeof e == "number" ? s - e : s instanceof Date && e instanceof Date ? s.getTime() - e.getTime() : typeof s == "boolean" && typeof e == "boolean" ? s === e ? 0 : s ? -1 : 1 : String(s).localeCompare(String(e));
 }
-function Ht(s, e, t, n) {
-  const i = s.find((o) => o.field === e);
-  return t ? i ? i.direction === "asc" ? s.map((o) => o.field === e ? { ...o, direction: "desc" } : o) : s.filter((o) => o.field !== e) : s.length < n ? [...s, { field: e, direction: "asc" }] : s : i?.direction === "asc" ? [{ field: e, direction: "desc" }] : i?.direction === "desc" ? [] : [{ field: e, direction: "asc" }];
+function zt(s, e, t, n) {
+  const i = s.find((r) => r.field === e);
+  return t ? i ? i.direction === "asc" ? s.map((r) => r.field === e ? { ...r, direction: "desc" } : r) : s.filter((r) => r.field !== e) : s.length < n ? [...s, { field: e, direction: "asc" }] : s : i?.direction === "asc" ? [{ field: e, direction: "desc" }] : i?.direction === "desc" ? [] : [{ field: e, direction: "asc" }];
 }
-function Ce(s, e) {
+function xe(s, e) {
   const t = s.findIndex((n) => n.field === e);
   return t >= 0 ? t + 1 : void 0;
 }
 function Re(s, e) {
   return s.find((t) => t.field === e)?.direction;
 }
-const Ot = '.header-cell[data-sort=asc]:after{content:"↑";margin-left:4px;opacity:.8}.header-cell[data-sort=desc]:after{content:"↓";margin-left:4px;opacity:.8}.sort-indicator{margin-left:4px;opacity:.8}.sort-index{font-size:10px;background:var(--tbw-multi-sort-badge-bg, var(--tbw-color-panel-bg));color:var(--tbw-multi-sort-badge-color, var(--tbw-color-fg));border-radius:50%;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;margin-left:2px;font-weight:600}';
-class Wn extends x {
+const Gt = '@layer tbw-plugins{.header-cell[data-sort=asc]:after{content:"↑";margin-left:4px;opacity:.8}.header-cell[data-sort=desc]:after{content:"↓";margin-left:4px;opacity:.8}.sort-indicator{margin-left:4px;opacity:.8}.sort-index{font-size:10px;background:var(--tbw-multi-sort-badge-bg, var(--tbw-color-panel-bg));color:var(--tbw-multi-sort-badge-color, var(--tbw-color-fg));border-radius:50%;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;margin-left:2px;font-weight:600}}';
+class $n extends x {
   name = "multiSort";
-  styles = Ot;
+  styles = Gt;
   get defaultConfig() {
     return {
       maxSortColumns: 3,
@@ -2755,29 +2798,29 @@ class Wn extends x {
   // #endregion
   // #region Hooks
   processRows(e) {
-    return this.sortModel.length === 0 ? [...e] : qt([...e], this.sortModel, [...this.columns]);
+    return this.sortModel.length === 0 ? [...e] : Nt([...e], this.sortModel, [...this.columns]);
   }
   onHeaderClick(e) {
-    if (!this.columns.find((o) => o.field === e.field)?.sortable) return !1;
+    if (!this.columns.find((r) => r.field === e.field)?.sortable) return !1;
     const n = e.originalEvent.shiftKey, i = this.config.maxSortColumns ?? 3;
-    return this.sortModel = Ht(this.sortModel, e.field, n, i), this.emit("sort-change", { sortModel: [...this.sortModel] }), this.requestRender(), !0;
+    return this.sortModel = zt(this.sortModel, e.field, n, i), this.emit("sort-change", { sortModel: [...this.sortModel] }), this.requestRender(), !0;
   }
   afterRender() {
-    const e = this.shadowRoot;
+    const e = this.gridElement;
     if (!e) return;
     const t = this.config.showSortIndex !== !1;
     e.querySelectorAll(".header-row .cell[data-field]").forEach((i) => {
-      const o = i.getAttribute("data-field");
-      if (!o) return;
-      const r = Ce(this.sortModel, o), l = Re(this.sortModel, o);
+      const r = i.getAttribute("data-field");
+      if (!r) return;
+      const o = xe(this.sortModel, r), l = Re(this.sortModel, r);
       if (i.querySelector(".sort-index")?.remove(), l) {
         i.querySelector('[part~="sort-indicator"], .sort-indicator')?.remove(), i.setAttribute("data-sort", l);
         const c = document.createElement("span");
         c.className = "sort-indicator", this.setIcon(c, this.resolveIcon(l === "asc" ? "sortAsc" : "sortDesc"));
         const u = i.querySelector(".tbw-filter-btn"), h = i.querySelector(".resize-handle"), f = u ?? h;
-        if (f ? i.insertBefore(c, f) : i.appendChild(c), t && this.sortModel.length > 1 && r !== void 0) {
+        if (f ? i.insertBefore(c, f) : i.appendChild(c), t && this.sortModel.length > 1 && o !== void 0) {
           const g = document.createElement("span");
-          g.className = "sort-index", g.textContent = String(r), c.nextSibling ? i.insertBefore(g, c.nextSibling) : i.appendChild(g);
+          g.className = "sort-index", g.textContent = String(o), c.nextSibling ? i.insertBefore(g, c.nextSibling) : i.appendChild(g);
         }
       } else
         i.removeAttribute("data-sort");
@@ -2811,7 +2854,7 @@ class Wn extends x {
    * @returns 1-based index or undefined if not sorted
    */
   getSortIndex(e) {
-    return Ce(this.sortModel, e);
+    return xe(this.sortModel, e);
   }
   /**
    * Get the sort direction for a specific field.
@@ -2841,10 +2884,10 @@ class Wn extends x {
    */
   applyColumnState(e, t) {
     if (!t.sort) {
-      this.sortModel = this.sortModel.filter((o) => o.field !== e);
+      this.sortModel = this.sortModel.filter((r) => r.field !== e);
       return;
     }
-    const n = this.sortModel.findIndex((o) => o.field === e), i = {
+    const n = this.sortModel.findIndex((r) => r.field === e), i = {
       field: e,
       direction: t.sort.direction
     };
@@ -2852,49 +2895,45 @@ class Wn extends x {
   }
   // #endregion
 }
-function Gt(s) {
+function Ot(s) {
   return s.filter((e) => e.sticky === "left");
 }
 function Bt(s) {
   return s.filter((e) => e.sticky === "right");
 }
-function X(s) {
+function U(s) {
   return s.some((e) => e.sticky === "left" || e.sticky === "right");
 }
 function Ee(s, e) {
-  const t = s.shadowRoot;
-  if (!t) return;
-  const n = Array.from(t.querySelectorAll(".header-row .cell"));
-  if (!n.length) return;
-  const i = /* @__PURE__ */ new Map();
-  e.forEach((l, a) => {
-    l.field && i.set(l.field, a);
+  const t = Array.from(s.querySelectorAll(".header-row .cell"));
+  if (!t.length) return;
+  const n = /* @__PURE__ */ new Map();
+  e.forEach((o, l) => {
+    o.field && n.set(o.field, l);
   });
-  let o = 0;
-  for (const l of e)
-    if (l.sticky === "left") {
-      const a = i.get(l.field), d = n.find((c) => c.getAttribute("data-field") === l.field);
-      d && (d.classList.add("sticky-left"), d.style.position = "sticky", d.style.left = o + "px", a !== void 0 && t.querySelectorAll(`.data-grid-row .cell[data-col="${a}"]`).forEach((c) => {
-        c.classList.add("sticky-left"), c.style.position = "sticky", c.style.left = o + "px";
-      }), o += d.offsetWidth);
+  let i = 0;
+  for (const o of e)
+    if (o.sticky === "left") {
+      const l = n.get(o.field), a = t.find((d) => d.getAttribute("data-field") === o.field);
+      a && (a.classList.add("sticky-left"), a.style.position = "sticky", a.style.left = i + "px", l !== void 0 && s.querySelectorAll(`.data-grid-row .cell[data-col="${l}"]`).forEach((d) => {
+        d.classList.add("sticky-left"), d.style.position = "sticky", d.style.left = i + "px";
+      }), i += a.offsetWidth);
     }
   let r = 0;
-  for (const l of [...e].reverse())
-    if (l.sticky === "right") {
-      const a = i.get(l.field), d = n.find((c) => c.getAttribute("data-field") === l.field);
-      d && (d.classList.add("sticky-right"), d.style.position = "sticky", d.style.right = r + "px", a !== void 0 && t.querySelectorAll(`.data-grid-row .cell[data-col="${a}"]`).forEach((c) => {
-        c.classList.add("sticky-right"), c.style.position = "sticky", c.style.right = r + "px";
-      }), r += d.offsetWidth);
+  for (const o of [...e].reverse())
+    if (o.sticky === "right") {
+      const l = n.get(o.field), a = t.find((d) => d.getAttribute("data-field") === o.field);
+      a && (a.classList.add("sticky-right"), a.style.position = "sticky", a.style.right = r + "px", l !== void 0 && s.querySelectorAll(`.data-grid-row .cell[data-col="${l}"]`).forEach((d) => {
+        d.classList.add("sticky-right"), d.style.position = "sticky", d.style.right = r + "px";
+      }), r += a.offsetWidth);
     }
 }
 function Se(s) {
-  const e = s.shadowRoot;
-  if (!e) return;
-  e.querySelectorAll(".sticky-left, .sticky-right").forEach((n) => {
-    n.classList.remove("sticky-left", "sticky-right"), n.style.position = "", n.style.left = "", n.style.right = "";
+  s.querySelectorAll(".sticky-left, .sticky-right").forEach((t) => {
+    t.classList.remove("sticky-left", "sticky-right"), t.style.position = "", t.style.left = "", t.style.right = "";
   });
 }
-class $n extends x {
+class jn extends x {
   name = "pinnedColumns";
   get defaultConfig() {
     return {};
@@ -2915,18 +2954,18 @@ class $n extends x {
    */
   static detect(e, t) {
     const n = t?.columns;
-    return Array.isArray(n) ? X(n) : !1;
+    return Array.isArray(n) ? U(n) : !1;
   }
   // #endregion
   // #region Hooks
   processColumns(e) {
-    return this.isApplied = X([...e]), [...e];
+    return this.isApplied = U([...e]), [...e];
   }
   afterRender() {
     if (!this.isApplied)
       return;
     const e = this.grid, t = [...this.columns];
-    if (!X(t)) {
+    if (!U(t)) {
       Se(e), this.isApplied = !1;
       return;
     }
@@ -2964,7 +3003,7 @@ class $n extends x {
    */
   getLeftPinnedColumns() {
     const e = [...this.columns];
-    return Gt(e);
+    return Ot(e);
   }
   /**
    * Get columns pinned to the right.
@@ -2988,50 +3027,48 @@ class $n extends x {
       return;
     let n = 0, i = 0;
     if (e) {
-      const r = e.querySelectorAll(".sticky-left"), l = e.querySelectorAll(".sticky-right");
-      r.forEach((a) => {
+      const o = e.querySelectorAll(".sticky-left"), l = e.querySelectorAll(".sticky-right");
+      o.forEach((a) => {
         n += a.offsetWidth;
       }), l.forEach((a) => {
         i += a.offsetWidth;
       });
-    } else {
-      const l = this.grid.shadowRoot;
-      l && l.querySelectorAll(".header-row .cell").forEach((d) => {
-        d.classList.contains("sticky-left") ? n += d.offsetWidth : d.classList.contains("sticky-right") && (i += d.offsetWidth);
+    } else
+      this.grid.querySelectorAll(".header-row .cell").forEach((a) => {
+        a.classList.contains("sticky-left") ? n += a.offsetWidth : a.classList.contains("sticky-right") && (i += a.offsetWidth);
       });
-    }
-    const o = t?.classList.contains("sticky-left") || t?.classList.contains("sticky-right");
-    return { left: n, right: i, skipScroll: o };
+    const r = t?.classList.contains("sticky-left") || t?.classList.contains("sticky-right");
+    return { left: n, right: i, skipScroll: r };
   }
   // #endregion
 }
 function Vt(s) {
   return typeof s == "object" && s !== null && "aggFunc" in s;
 }
-function Z(s, e) {
+function Y(s, e) {
   const t = document.createElement("div");
   t.className = "tbw-pinned-rows", t.setAttribute("role", "presentation"), t.setAttribute("aria-live", "polite");
   const n = document.createElement("div");
   n.className = "tbw-pinned-rows-left";
   const i = document.createElement("div");
   i.className = "tbw-pinned-rows-center";
-  const o = document.createElement("div");
-  if (o.className = "tbw-pinned-rows-right", s.showRowCount !== !1) {
-    const r = document.createElement("span");
-    r.className = "tbw-status-panel tbw-status-panel-row-count", r.textContent = `Total: ${e.totalRows} rows`, n.appendChild(r);
+  const r = document.createElement("div");
+  if (r.className = "tbw-pinned-rows-right", s.showRowCount !== !1) {
+    const o = document.createElement("span");
+    o.className = "tbw-status-panel tbw-status-panel-row-count", o.textContent = `Total: ${e.totalRows} rows`, n.appendChild(o);
   }
   if (s.showFilteredCount && e.filteredRows !== e.totalRows) {
-    const r = document.createElement("span");
-    r.className = "tbw-status-panel tbw-status-panel-filtered-count", r.textContent = `Filtered: ${e.filteredRows}`, n.appendChild(r);
+    const o = document.createElement("span");
+    o.className = "tbw-status-panel tbw-status-panel-filtered-count", o.textContent = `Filtered: ${e.filteredRows}`, n.appendChild(o);
   }
   if (s.showSelectedCount && e.selectedRows > 0) {
-    const r = document.createElement("span");
-    r.className = "tbw-status-panel tbw-status-panel-selected-count", r.textContent = `Selected: ${e.selectedRows}`, o.appendChild(r);
+    const o = document.createElement("span");
+    o.className = "tbw-status-panel tbw-status-panel-selected-count", o.textContent = `Selected: ${e.selectedRows}`, r.appendChild(o);
   }
   if (s.customPanels)
-    for (const r of s.customPanels) {
-      const l = zt(r, e);
-      switch (r.position) {
+    for (const o of s.customPanels) {
+      const l = Wt(o, e);
+      switch (o.position) {
         case "left":
           n.appendChild(l);
           break;
@@ -3039,11 +3076,11 @@ function Z(s, e) {
           i.appendChild(l);
           break;
         case "right":
-          o.appendChild(l);
+          r.appendChild(l);
           break;
       }
     }
-  return t.appendChild(n), t.appendChild(i), t.appendChild(o), t;
+  return t.appendChild(n), t.appendChild(i), t.appendChild(r), t;
 }
 function ke(s) {
   const e = document.createElement("div");
@@ -3052,34 +3089,34 @@ function ke(s) {
 function Ae(s, e, t, n) {
   s.innerHTML = "";
   for (const i of e) {
-    const o = document.createElement("div");
-    if (o.className = "tbw-aggregation-row", o.setAttribute("role", "presentation"), i.id && o.setAttribute("data-aggregation-id", i.id), i.fullWidth) {
-      const r = document.createElement("div");
-      r.className = "tbw-aggregation-cell tbw-aggregation-cell-full", r.style.gridColumn = "1 / -1", r.textContent = i.label || "", o.appendChild(r);
+    const r = document.createElement("div");
+    if (r.className = "tbw-aggregation-row", r.setAttribute("role", "presentation"), i.id && r.setAttribute("data-aggregation-id", i.id), i.fullWidth) {
+      const o = document.createElement("div");
+      o.className = "tbw-aggregation-cell tbw-aggregation-cell-full", o.style.gridColumn = "1 / -1", o.textContent = i.label || "", r.appendChild(o);
     } else
-      for (const r of t) {
+      for (const o of t) {
         const l = document.createElement("div");
-        l.className = "tbw-aggregation-cell", l.setAttribute("data-field", r.field);
+        l.className = "tbw-aggregation-cell", l.setAttribute("data-field", o.field);
         let a, d;
-        const c = i.aggregators?.[r.field];
+        const c = i.aggregators?.[o.field];
         if (c)
           if (Vt(c)) {
-            const u = ce(c.aggFunc);
-            u && (a = u(n, r.field, r)), d = c.formatter;
+            const u = de(c.aggFunc);
+            u && (a = u(n, o.field, o)), d = c.formatter;
           } else {
-            const u = ce(c);
-            u && (a = u(n, r.field, r));
+            const u = de(c);
+            u && (a = u(n, o.field, o));
           }
-        else if (i.cells && Object.prototype.hasOwnProperty.call(i.cells, r.field)) {
-          const u = i.cells[r.field];
-          typeof u == "function" ? a = u(n, r.field, r) : a = u;
+        else if (i.cells && Object.prototype.hasOwnProperty.call(i.cells, o.field)) {
+          const u = i.cells[o.field];
+          typeof u == "function" ? a = u(n, o.field, o) : a = u;
         }
-        a != null ? l.textContent = d ? d(a, r.field, r) : String(a) : l.textContent = "", o.appendChild(l);
+        a != null ? l.textContent = d ? d(a, o.field, o) : String(a) : l.textContent = "", r.appendChild(l);
       }
-    s.appendChild(o);
+    s.appendChild(r);
   }
 }
-function zt(s, e) {
+function Wt(s, e) {
   const t = document.createElement("div");
   t.className = "tbw-status-panel tbw-status-panel-custom", t.id = `status-panel-${s.id}`;
   const n = s.render(e);
@@ -3095,10 +3132,10 @@ function _e(s, e, t, n, i) {
     grid: t
   };
 }
-const Wt = ".tbw-footer{flex-shrink:0;z-index:var(--tbw-z-layer-pinned-rows, 20);background:var(--tbw-color-panel-bg)}.tbw-pinned-rows{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--tbw-pinned-rows-bg, var(--tbw-color-panel-bg));border-top:1px solid var(--tbw-pinned-rows-border, var(--tbw-color-border));font-size:12px;color:var(--tbw-pinned-rows-color, var(--tbw-color-fg-muted));min-height:32px;box-sizing:border-box;min-width:fit-content}.tbw-pinned-rows-left,.tbw-pinned-rows-center,.tbw-pinned-rows-right{display:flex;align-items:center;gap:16px}.tbw-pinned-rows-left{justify-content:flex-start}.tbw-pinned-rows-center{justify-content:center;flex:1}.tbw-pinned-rows-right{justify-content:flex-end}.tbw-status-panel{white-space:nowrap}.tbw-aggregation-rows{min-width:fit-content;background:var(--tbw-aggregation-bg, var(--tbw-color-header-bg))}.tbw-aggregation-rows-top{border-bottom:1px solid var(--tbw-aggregation-border, var(--tbw-color-border))}.tbw-aggregation-rows-bottom{border-top:1px solid var(--tbw-aggregation-border, var(--tbw-color-border))}.tbw-aggregation-row{display:grid;grid-template-columns:var(--tbw-column-template);font-size:var(--tbw-aggregation-font-size, .8em);font-weight:var(--tbw-aggregation-font-weight, 600)}.tbw-aggregation-cell{padding:var(--tbw-cell-padding, 2px 8px);min-height:var(--tbw-row-height, 28px);display:flex;align-items:center;border-right:1px solid var(--tbw-color-border-cell)}.tbw-aggregation-cell:last-child{border-right:0}.tbw-aggregation-cell-full{grid-column:1 / -1;border-right:0}";
-class jn extends x {
+const $t = "@layer tbw-plugins{.tbw-footer{flex-shrink:0;z-index:var(--tbw-z-layer-pinned-rows, 20);background:var(--tbw-color-panel-bg)}.tbw-pinned-rows{display:flex;align-items:center;justify-content:space-between;padding:var(--tbw-button-padding, var(--tbw-spacing-md, .5rem) var(--tbw-spacing-lg, .75rem));background:var(--tbw-pinned-rows-bg, var(--tbw-color-panel-bg));border-top:1px solid var(--tbw-pinned-rows-border, var(--tbw-color-border));font-size:var(--tbw-font-size-xs, .75rem);color:var(--tbw-pinned-rows-color, var(--tbw-color-fg-muted));min-height:32px;box-sizing:border-box;min-width:fit-content}.tbw-pinned-rows-left,.tbw-pinned-rows-center,.tbw-pinned-rows-right{display:flex;align-items:center;gap:var(--tbw-spacing-xl, 1rem)}.tbw-pinned-rows-left{justify-content:flex-start}.tbw-pinned-rows-center{justify-content:center;flex:1}.tbw-pinned-rows-right{justify-content:flex-end}.tbw-status-panel{white-space:nowrap}.tbw-aggregation-rows{min-width:fit-content;background:var(--tbw-aggregation-bg, var(--tbw-color-header-bg))}.tbw-aggregation-rows-top{border-bottom:1px solid var(--tbw-aggregation-border, var(--tbw-color-border))}.tbw-aggregation-rows-bottom{border-top:1px solid var(--tbw-aggregation-border, var(--tbw-color-border))}.tbw-aggregation-row{display:grid;grid-template-columns:var(--tbw-column-template);font-size:var(--tbw-aggregation-font-size, .8em);font-weight:var(--tbw-aggregation-font-weight, 600)}.tbw-aggregation-cell{padding:var(--tbw-cell-padding, .125rem .5rem);min-height:var(--tbw-row-height, 1.75rem);display:flex;align-items:center;border-right:1px solid var(--tbw-color-border-cell)}.tbw-aggregation-cell:last-child{border-right:0}.tbw-aggregation-cell-full{grid-column:1 / -1;border-right:0}}";
+class Un extends x {
   name = "pinnedRows";
-  styles = Wt;
+  styles = $t;
   get defaultConfig() {
     return {
       position: "bottom",
@@ -3120,18 +3157,18 @@ class jn extends x {
   // #endregion
   // #region Hooks
   afterRender() {
-    const e = this.shadowRoot;
+    const e = this.gridElement;
     if (!e) return;
     const t = e.querySelector(".tbw-scroll-area") ?? e.querySelector(".tbw-grid-content") ?? e.children[0];
     if (!t) return;
     this.footerWrapper && !t.contains(this.footerWrapper) && (this.footerWrapper = null, this.bottomAggregationContainer = null, this.infoBarElement = null), this.topAggregationContainer && !t.contains(this.topAggregationContainer) && (this.topAggregationContainer = null), this.infoBarElement && !t.contains(this.infoBarElement) && (this.infoBarElement = null);
-    const n = this.getSelectionState(), i = this.getFilterState(), o = _e(
+    const n = this.getSelectionState(), i = this.getFilterState(), r = _e(
       this.rows,
       this.columns,
       this.grid,
       n,
       i
-    ), r = this.config.aggregationRows || [], l = r.filter((h) => h.position === "top"), a = r.filter((h) => h.position !== "top");
+    ), o = this.config.aggregationRows || [], l = o.filter((h) => h.position === "top"), a = o.filter((h) => h.position !== "top");
     if (l.length > 0) {
       if (!this.topAggregationContainer) {
         this.topAggregationContainer = ke("top");
@@ -3145,12 +3182,12 @@ class jn extends x {
         this.rows
       );
     } else this.topAggregationContainer && (this.topAggregationContainer.remove(), this.topAggregationContainer = null);
-    const d = this.config.showRowCount !== !1 || this.config.showSelectedCount && o.selectedRows > 0 || this.config.showFilteredCount && o.filteredRows !== o.totalRows || this.config.customPanels && this.config.customPanels.length > 0, c = d && this.config.position !== "top", u = a.length > 0 || c;
+    const d = this.config.showRowCount !== !1 || this.config.showSelectedCount && r.selectedRows > 0 || this.config.showFilteredCount && r.filteredRows !== r.totalRows || this.config.customPanels && this.config.customPanels.length > 0, c = d && this.config.position !== "top", u = a.length > 0 || c;
     if (d && this.config.position === "top")
       if (!this.infoBarElement)
-        this.infoBarElement = Z(this.config, o), t.insertBefore(this.infoBarElement, t.firstChild);
+        this.infoBarElement = Y(this.config, r), t.insertBefore(this.infoBarElement, t.firstChild);
       else {
-        const h = Z(this.config, o);
+        const h = Y(this.config, r);
         this.infoBarElement.replaceWith(h), this.infoBarElement = h;
       }
     else this.config.position === "top" && this.infoBarElement && (this.infoBarElement.remove(), this.infoBarElement = null);
@@ -3159,7 +3196,7 @@ class jn extends x {
       a,
       this.visibleColumns,
       this.rows
-    )), c && (this.infoBarElement = Z(this.config, o), this.footerWrapper.appendChild(this.infoBarElement))) : this.cleanupFooter();
+    )), c && (this.infoBarElement = Y(this.config, r), this.footerWrapper.appendChild(this.infoBarElement))) : this.cleanupFooter();
   }
   // #endregion
   // #region Private Methods
@@ -3235,29 +3272,29 @@ class jn extends x {
   }
   // #endregion
 }
-const $t = Xe;
-function jt(s) {
+const jt = Ye;
+function Ut(s) {
   const e = [];
   return !s.rowGroupFields?.length && !s.columnGroupFields?.length && e.push("At least one row or column group field is required"), s.valueFields?.length || e.push("At least one value field is required"), e;
 }
-function se(s, e) {
+function oe(s, e) {
   return [...s, e].join("|");
 }
-function Ut(s, e) {
-  const t = e.rowGroupFields ?? [], n = e.columnGroupFields ?? [], i = e.valueFields ?? [], o = Xt(s, n), r = Be(
+function Yt(s, e) {
+  const t = e.rowGroupFields ?? [], n = e.columnGroupFields ?? [], i = e.valueFields ?? [], r = Xt(s, n), o = Oe(
     s,
     t,
     n,
-    o,
+    r,
     i,
     0,
     // starting depth
     ""
     // parent key prefix
-  ), l = Yt(r, o, i), a = Object.values(l).reduce((d, c) => d + c, 0);
+  ), l = Jt(o, r, i), a = Object.values(l).reduce((d, c) => d + c, 0);
   return {
-    rows: r,
-    columnKeys: o,
+    rows: o,
+    columnKeys: r,
     totals: l,
     grandTotal: a
   };
@@ -3266,7 +3303,7 @@ function Xt(s, e) {
   if (e.length === 0) return ["value"];
   const t = /* @__PURE__ */ new Set();
   for (const n of s) {
-    const i = e.map((o) => String(n[o] ?? "")).join("|");
+    const i = e.map((r) => String(n[r] ?? "")).join("|");
     t.add(i);
   }
   return [...t].sort();
@@ -3274,19 +3311,19 @@ function Xt(s, e) {
 function Zt(s, e) {
   const t = /* @__PURE__ */ new Map();
   for (const n of s) {
-    const i = String(n[e] ?? ""), o = t.get(i);
-    o ? o.push(n) : t.set(i, [n]);
+    const i = String(n[e] ?? ""), r = t.get(i);
+    r ? r.push(n) : t.set(i, [n]);
   }
   return t;
 }
-function Be(s, e, t, n, i, o, r) {
+function Oe(s, e, t, n, i, r, o) {
   const l = [];
   if (e.length === 0) {
     const h = Le(s, t, n, i), f = Te(h);
     return l.push({
-      rowKey: r || "all",
-      rowLabel: r || "All",
-      depth: o,
+      rowKey: o || "all",
+      rowLabel: o || "All",
+      depth: r,
       values: h,
       total: f,
       isGroup: !1,
@@ -3295,22 +3332,22 @@ function Be(s, e, t, n, i, o, r) {
   }
   const a = e[0], d = e.slice(1), c = d.length > 0, u = Zt(s, a);
   for (const [h, f] of u) {
-    const g = r ? `${r}|${h}` : h, p = Le(f, t, n, i), b = Te(p);
+    const g = o ? `${o}|${h}` : h, p = Le(f, t, n, i), w = Te(p);
     let m;
-    c && (m = Be(
+    c && (m = Oe(
       f,
       d,
       t,
       n,
       i,
-      o + 1,
+      r + 1,
       g
     )), l.push({
       rowKey: g,
       rowLabel: h || "(blank)",
-      depth: o,
+      depth: r,
       values: p,
-      total: b,
+      total: w,
       isGroup: c,
       children: m,
       rowCount: f.length
@@ -3320,9 +3357,9 @@ function Be(s, e, t, n, i, o, r) {
 }
 function Le(s, e, t, n) {
   const i = {};
-  for (const o of t)
-    for (const r of n) {
-      const a = (e.length > 0 ? s.filter((h) => e.map((f) => String(h[f] ?? "")).join("|") === o) : s).map((h) => Number(h[r.field]) || 0), d = $t(r.aggFunc), c = a.length > 0 ? d(a) : null, u = se([o], r.field);
+  for (const r of t)
+    for (const o of n) {
+      const a = (e.length > 0 ? s.filter((h) => e.map((f) => String(h[f] ?? "")).join("|") === r) : s).map((h) => Number(h[o.field]) || 0), d = jt(o.aggFunc), c = a.length > 0 ? d(a) : null, u = oe([r], o.field);
       i[u] = c;
     }
   return i;
@@ -3333,34 +3370,34 @@ function Te(s) {
     e += t ?? 0;
   return e;
 }
-function Yt(s, e, t) {
+function Jt(s, e, t) {
   const n = {};
-  function i(o) {
-    for (const r of o)
-      if (!r.isGroup || !r.children?.length)
+  function i(r) {
+    for (const o of r)
+      if (!o.isGroup || !o.children?.length)
         for (const l of e)
           for (const a of t) {
-            const d = se([l], a.field);
-            n[d] = (n[d] ?? 0) + (r.values[d] ?? 0);
+            const d = oe([l], a.field);
+            n[d] = (n[d] ?? 0) + (o.values[d] ?? 0);
           }
-      else r.children && i(r.children);
+      else o.children && i(o.children);
   }
   return i(s), n;
 }
-function Jt(s, e, t = !0) {
+function Qt(s, e, t = !0) {
   const n = [];
-  function i(o) {
-    n.push(o);
-    const r = e ? e.has(o.rowKey) : t;
-    if (o.children && r)
-      for (const l of o.children)
+  function i(r) {
+    n.push(r);
+    const o = e ? e.has(r.rowKey) : t;
+    if (r.children && o)
+      for (const l of r.children)
         i(l);
   }
-  for (const o of s)
-    i(o);
+  for (const r of s)
+    i(r);
   return n;
 }
-function Qt(s) {
+function en(s) {
   const e = [];
   function t(n) {
     if (n.isGroup && e.push(n.rowKey), n.children)
@@ -3371,11 +3408,11 @@ function Qt(s) {
     t(n);
   return e;
 }
-const en = ["sum", "avg", "count", "min", "max", "first", "last"];
-function tn(s, e, t, n) {
-  const i = new AbortController(), o = { config: e, callbacks: n, signal: i.signal }, r = document.createElement("div");
-  return r.className = "tbw-pivot-panel", r.appendChild(D("Options", () => ln(t, o))), r.appendChild(D("Row Groups", () => Ie("rowGroups", o))), r.appendChild(D("Column Groups", () => Ie("columnGroups", o))), r.appendChild(D("Values", () => on(o))), r.appendChild(D("Available Fields", () => sn(o))), s.appendChild(r), () => {
-    i.abort(), r.remove();
+const tn = ["sum", "avg", "count", "min", "max", "first", "last"];
+function nn(s, e, t, n) {
+  const i = new AbortController(), r = { config: e, callbacks: n, signal: i.signal }, o = document.createElement("div");
+  return o.className = "tbw-pivot-panel", o.appendChild(D("Options", () => an(t, r))), o.appendChild(D("Row Groups", () => Ie("rowGroups", r))), o.appendChild(D("Column Groups", () => Ie("columnGroups", r))), o.appendChild(D("Values", () => on(r))), o.appendChild(D("Available Fields", () => ln(r))), s.appendChild(o), () => {
+    i.abort(), o.remove();
   };
 }
 function D(s, e) {
@@ -3387,42 +3424,42 @@ function D(s, e) {
   return i.className = "tbw-pivot-section-content", i.appendChild(e()), t.appendChild(n), t.appendChild(i), t;
 }
 function Ie(s, e) {
-  const { config: t, callbacks: n, signal: i } = e, o = document.createElement("div");
-  o.className = "tbw-pivot-drop-zone", o.setAttribute("data-zone", s);
-  const r = s === "rowGroups" ? t.rowGroupFields ?? [] : t.columnGroupFields ?? [];
-  if (r.length === 0) {
+  const { config: t, callbacks: n, signal: i } = e, r = document.createElement("div");
+  r.className = "tbw-pivot-drop-zone", r.setAttribute("data-zone", s);
+  const o = s === "rowGroups" ? t.rowGroupFields ?? [] : t.columnGroupFields ?? [];
+  if (o.length === 0) {
     const l = document.createElement("div");
-    l.className = "tbw-pivot-placeholder", l.textContent = "Drag fields here or click to add", o.appendChild(l);
+    l.className = "tbw-pivot-placeholder", l.textContent = "Drag fields here or click to add", r.appendChild(l);
   } else
-    for (const l of r)
-      o.appendChild(nn(l, s, e));
-  return o.addEventListener(
+    for (const l of o)
+      r.appendChild(rn(l, s, e));
+  return r.addEventListener(
     "dragover",
     (l) => {
-      l.preventDefault(), o.classList.add("drag-over");
+      l.preventDefault(), r.classList.add("drag-over");
     },
     { signal: i }
-  ), o.addEventListener(
+  ), r.addEventListener(
     "dragleave",
     () => {
-      o.classList.remove("drag-over");
+      r.classList.remove("drag-over");
     },
     { signal: i }
-  ), o.addEventListener(
+  ), r.addEventListener(
     "drop",
     (l) => {
-      l.preventDefault(), o.classList.remove("drag-over");
+      l.preventDefault(), r.classList.remove("drag-over");
       const a = l.dataTransfer?.getData("text/plain");
       a && n.onAddFieldToZone(a, s);
     },
     { signal: i }
-  ), o;
+  ), r;
 }
-function nn(s, e, t) {
-  const { callbacks: n, signal: i } = t, o = document.createElement("div");
-  o.className = "tbw-pivot-field-chip", o.draggable = !0;
-  const r = n.getAvailableFields().find((d) => d.field === s), l = document.createElement("span");
-  l.className = "tbw-pivot-chip-label", l.textContent = r?.header ?? s;
+function rn(s, e, t) {
+  const { callbacks: n, signal: i } = t, r = document.createElement("div");
+  r.className = "tbw-pivot-field-chip", r.draggable = !0;
+  const o = n.getAvailableFields().find((d) => d.field === s), l = document.createElement("span");
+  l.className = "tbw-pivot-chip-label", l.textContent = o?.header ?? s;
   const a = document.createElement("button");
   return a.className = "tbw-pivot-chip-remove", a.innerHTML = "×", a.title = "Remove field", a.addEventListener(
     "click",
@@ -3430,34 +3467,34 @@ function nn(s, e, t) {
       d.stopPropagation(), n.onRemoveFieldFromZone(s, e);
     },
     { signal: i }
-  ), o.appendChild(l), o.appendChild(a), o.addEventListener(
+  ), r.appendChild(l), r.appendChild(a), r.addEventListener(
     "dragstart",
     (d) => {
-      d.dataTransfer?.setData("text/plain", s), d.dataTransfer?.setData("source-zone", e), o.classList.add("dragging");
+      d.dataTransfer?.setData("text/plain", s), d.dataTransfer?.setData("source-zone", e), r.classList.add("dragging");
     },
     { signal: i }
-  ), o.addEventListener(
+  ), r.addEventListener(
     "dragend",
     () => {
-      o.classList.remove("dragging");
+      r.classList.remove("dragging");
     },
     { signal: i }
-  ), o;
+  ), r;
 }
 function on(s) {
   const { config: e, callbacks: t, signal: n } = s, i = document.createElement("div");
   i.className = "tbw-pivot-drop-zone tbw-pivot-values-zone", i.setAttribute("data-zone", "values");
-  const o = e.valueFields ?? [];
-  if (o.length === 0) {
-    const r = document.createElement("div");
-    r.className = "tbw-pivot-placeholder", r.textContent = "Drag numeric fields here for aggregation", i.appendChild(r);
+  const r = e.valueFields ?? [];
+  if (r.length === 0) {
+    const o = document.createElement("div");
+    o.className = "tbw-pivot-placeholder", o.textContent = "Drag numeric fields here for aggregation", i.appendChild(o);
   } else
-    for (const r of o)
-      i.appendChild(rn(r, s));
+    for (const o of r)
+      i.appendChild(sn(o, s));
   return i.addEventListener(
     "dragover",
-    (r) => {
-      r.preventDefault(), i.classList.add("drag-over");
+    (o) => {
+      o.preventDefault(), i.classList.add("drag-over");
     },
     { signal: n }
   ), i.addEventListener(
@@ -3468,24 +3505,24 @@ function on(s) {
     { signal: n }
   ), i.addEventListener(
     "drop",
-    (r) => {
-      r.preventDefault(), i.classList.remove("drag-over");
-      const l = r.dataTransfer?.getData("text/plain");
+    (o) => {
+      o.preventDefault(), i.classList.remove("drag-over");
+      const l = o.dataTransfer?.getData("text/plain");
       l && t.onAddValueField(l, "sum");
     },
     { signal: n }
   ), i;
 }
-function rn(s, e) {
+function sn(s, e) {
   const { callbacks: t, signal: n } = e, i = document.createElement("div");
   i.className = "tbw-pivot-field-chip tbw-pivot-value-chip";
-  const o = t.getAvailableFields().find((c) => c.field === s.field), r = document.createElement("div");
-  r.className = "tbw-pivot-value-label-wrapper";
+  const r = t.getAvailableFields().find((c) => c.field === s.field), o = document.createElement("div");
+  o.className = "tbw-pivot-value-label-wrapper";
   const l = document.createElement("span");
-  l.className = "tbw-pivot-chip-label", l.textContent = o?.header ?? s.field;
+  l.className = "tbw-pivot-chip-label", l.textContent = r?.header ?? s.field;
   const a = document.createElement("select");
   a.className = "tbw-pivot-agg-select", a.title = "Aggregation function";
-  for (const c of en) {
+  for (const c of tn) {
     const u = document.createElement("option");
     u.value = c, u.textContent = c.toUpperCase(), u.selected = c === s.aggFunc, a.appendChild(u);
   }
@@ -3503,16 +3540,16 @@ function rn(s, e) {
       c.stopPropagation(), t.onRemoveValueField(s.field);
     },
     { signal: n }
-  ), r.appendChild(l), r.appendChild(a), i.appendChild(r), i.appendChild(d), i;
+  ), o.appendChild(l), o.appendChild(a), i.appendChild(o), i.appendChild(d), i;
 }
-function sn(s) {
+function ln(s) {
   const { config: e, callbacks: t, signal: n } = s, i = document.createElement("div");
   i.className = "tbw-pivot-available-fields";
-  const o = t.getAvailableFields(), r = /* @__PURE__ */ new Set([
+  const r = t.getAvailableFields(), o = /* @__PURE__ */ new Set([
     ...e.rowGroupFields ?? [],
     ...e.columnGroupFields ?? [],
     ...e.valueFields?.map((a) => a.field) ?? []
-  ]), l = o.filter((a) => !r.has(a.field));
+  ]), l = r.filter((a) => !o.has(a.field));
   if (l.length === 0) {
     const a = document.createElement("div");
     a.className = "tbw-pivot-placeholder", a.textContent = "All fields are in use", i.appendChild(a);
@@ -3535,98 +3572,98 @@ function sn(s) {
     }
   return i;
 }
-function ln(s, e) {
-  const { config: t, callbacks: n, signal: i } = e, o = document.createElement("div");
-  return o.className = "tbw-pivot-options", o.appendChild(
-    Y(
+function an(s, e) {
+  const { config: t, callbacks: n, signal: i } = e, r = document.createElement("div");
+  return r.className = "tbw-pivot-options", r.appendChild(
+    X(
       "Enable Pivot View",
       s,
-      (r) => {
-        n.onTogglePivot(r);
+      (o) => {
+        n.onTogglePivot(o);
       },
       i
     )
-  ), o.appendChild(
-    Y(
+  ), r.appendChild(
+    X(
       "Show Row Totals",
       t.showTotals ?? !0,
-      (r) => {
-        n.onOptionChange("showTotals", r);
+      (o) => {
+        n.onOptionChange("showTotals", o);
       },
       i
     )
-  ), o.appendChild(
-    Y(
+  ), r.appendChild(
+    X(
       "Show Grand Total",
       t.showGrandTotal ?? !0,
-      (r) => {
-        n.onOptionChange("showGrandTotal", r);
+      (o) => {
+        n.onOptionChange("showGrandTotal", o);
       },
       i
     )
-  ), o;
+  ), r;
 }
-function Y(s, e, t, n) {
+function X(s, e, t, n) {
   const i = document.createElement("label");
   i.className = "tbw-pivot-checkbox";
-  const o = document.createElement("input");
-  o.type = "checkbox", o.checked = e, o.addEventListener("change", () => t(o.checked), { signal: n });
-  const r = document.createElement("span");
-  return r.textContent = s, i.appendChild(o), i.appendChild(r), i;
+  const r = document.createElement("input");
+  r.type = "checkbox", r.checked = e, r.addEventListener("change", () => t(r.checked), { signal: n });
+  const o = document.createElement("span");
+  return o.textContent = s, i.appendChild(r), i.appendChild(o), i;
 }
-function an(s, e, t) {
+function dn(s, e, t) {
   return e.className = "data-grid-row pivot-group-row", e.setAttribute("data-pivot-depth", String(s.__pivotDepth ?? 0)), e.setAttribute("data-pivot-key", String(s.__pivotRowKey ?? "")), e.setAttribute("role", "row"), e.innerHTML = "", t.columns.forEach((n, i) => {
-    const o = document.createElement("div");
-    if (o.className = "cell", o.setAttribute("data-col", String(i)), o.setAttribute("data-row", String(t.rowIndex)), o.setAttribute("role", "gridcell"), i === 0) {
-      const r = Number(s.__pivotIndent) || 0;
-      o.style.paddingLeft = `${r}px`;
+    const r = document.createElement("div");
+    if (r.className = "cell", r.setAttribute("data-col", String(i)), r.setAttribute("data-row", String(t.rowIndex)), r.setAttribute("role", "gridcell"), i === 0) {
+      const o = Number(s.__pivotIndent) || 0;
+      r.style.paddingLeft = `${o}px`;
       const l = String(s.__pivotRowKey), a = document.createElement("button");
       a.type = "button", a.className = "pivot-toggle", a.setAttribute("aria-label", s.__pivotExpanded ? "Collapse group" : "Expand group"), t.setIcon(a, t.resolveIcon(s.__pivotExpanded ? "collapse" : "expand")), a.addEventListener("click", (u) => {
         u.stopPropagation(), t.onToggle(l);
-      }), o.appendChild(a);
+      }), r.appendChild(a);
       const d = document.createElement("span");
-      d.className = "pivot-label", d.textContent = String(s.__pivotLabel ?? ""), o.appendChild(d);
+      d.className = "pivot-label", d.textContent = String(s.__pivotLabel ?? ""), r.appendChild(d);
       const c = document.createElement("span");
-      c.className = "pivot-count", c.textContent = ` (${Number(s.__pivotRowCount) || 0})`, o.appendChild(c);
+      c.className = "pivot-count", c.textContent = ` (${Number(s.__pivotRowCount) || 0})`, r.appendChild(c);
     } else {
-      const r = s[n.field];
-      o.textContent = r != null ? String(r) : "";
+      const o = s[n.field];
+      r.textContent = o != null ? String(o) : "";
     }
-    e.appendChild(o);
+    e.appendChild(r);
   }), !0;
 }
-function dn(s, e, t, n) {
-  return e.className = "data-grid-row pivot-leaf-row", e.setAttribute("data-pivot-depth", String(s.__pivotDepth ?? 0)), e.setAttribute("data-pivot-key", String(s.__pivotRowKey ?? "")), e.innerHTML = "", t.forEach((i, o) => {
-    const r = document.createElement("div");
-    if (r.className = "cell", r.setAttribute("data-col", String(o)), r.setAttribute("data-row", String(n)), r.setAttribute("role", "gridcell"), o === 0) {
+function cn(s, e, t, n) {
+  return e.className = "data-grid-row pivot-leaf-row", e.setAttribute("data-pivot-depth", String(s.__pivotDepth ?? 0)), e.setAttribute("data-pivot-key", String(s.__pivotRowKey ?? "")), e.innerHTML = "", t.forEach((i, r) => {
+    const o = document.createElement("div");
+    if (o.className = "cell", o.setAttribute("data-col", String(r)), o.setAttribute("data-row", String(n)), o.setAttribute("role", "gridcell"), r === 0) {
       const l = Number(s.__pivotIndent) || 0;
-      r.style.paddingLeft = `${l + 20}px`;
+      o.style.paddingLeft = `${l + 20}px`;
       const a = document.createElement("span");
-      a.className = "pivot-label", a.textContent = String(s.__pivotLabel ?? ""), r.appendChild(a);
+      a.className = "pivot-label", a.textContent = String(s.__pivotLabel ?? ""), o.appendChild(a);
     } else {
       const l = s[i.field];
-      r.textContent = l != null ? String(l) : "";
+      o.textContent = l != null ? String(l) : "";
     }
-    e.appendChild(r);
+    e.appendChild(o);
   }), !0;
 }
-function cn(s, e, t) {
+function un(s, e, t) {
   return e.className = "pivot-grand-total-row", e.setAttribute("role", "presentation"), e.innerHTML = "", t.forEach((n, i) => {
-    const o = document.createElement("div");
-    if (o.className = "cell", o.setAttribute("data-col", String(i)), i === 0) {
-      const r = document.createElement("span");
-      r.className = "pivot-label", r.textContent = "Grand Total", o.appendChild(r);
+    const r = document.createElement("div");
+    if (r.className = "cell", r.setAttribute("data-col", String(i)), i === 0) {
+      const o = document.createElement("span");
+      o.className = "pivot-label", o.textContent = "Grand Total", r.appendChild(o);
     } else {
-      const r = s[n.field];
-      o.textContent = r != null ? String(r) : "";
+      const o = s[n.field];
+      r.textContent = o != null ? String(o) : "";
     }
-    e.appendChild(o);
+    e.appendChild(r);
   }), !0;
 }
-const un = '.pivot-group-row{display:grid;grid-template-columns:var(--tbw-column-template);font-weight:600;background:var(--tbw-pivot-group-bg, var(--tbw-color-row-alt));min-height:var(--tbw-row-height);border-bottom:var(--tbw-row-divider)}.pivot-group-row:hover{background:var(--tbw-pivot-group-hover, var(--tbw-color-row-hover))}.pivot-leaf-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-pivot-leaf-bg, var(--tbw-color-bg));min-height:var(--tbw-row-height);border-bottom:var(--tbw-row-divider)}.pivot-grand-total-row{display:grid;grid-template-columns:var(--tbw-column-template);font-weight:700;background:var(--tbw-pivot-grand-total-bg, var(--tbw-color-header-bg));min-height:var(--tbw-row-height);border-top:2px solid var(--tbw-color-border-strong)}.pivot-grand-total-row>.cell{display:flex;align-items:center;padding:var(--tbw-cell-padding);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}.pivot-grand-total-row>.cell:last-child{border-right:0}.pivot-grand-total-footer{position:sticky;bottom:0;z-index:var(--tbw-z-layer-pinned-rows, 20);background:var(--tbw-pivot-grand-total-bg, var(--tbw-color-header-bg));min-width:fit-content}.pivot-group-row>.cell,.pivot-leaf-row>.cell{display:flex;align-items:center;padding:var(--tbw-cell-padding);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}.pivot-group-row>.cell:last-child,.pivot-leaf-row>.cell:last-child{border-right:0}.pivot-toggle{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:6px;border:none;background:transparent;cursor:pointer;color:var(--tbw-pivot-toggle-color, var(--tbw-color-fg-muted));border-radius:var(--tbw-border-radius);transition:background .15s,color .15s}.pivot-toggle:hover{background:var(--tbw-pivot-toggle-hover-bg, var(--tbw-color-row-hover));color:var(--tbw-pivot-toggle-hover-color, var(--tbw-color-fg))}.pivot-toggle:focus{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}.pivot-label{font-weight:inherit}.pivot-count{color:var(--tbw-pivot-count-color, var(--tbw-color-fg-muted));font-size:.9em;font-weight:400}.pivot-total-row{font-weight:700;border-top:2px solid var(--tbw-pivot-border, var(--tbw-color-border-strong))}[data-pivot-depth="1"]{--tbw-pivot-depth: 1}[data-pivot-depth="2"]{--tbw-pivot-depth: 2}[data-pivot-depth="3"]{--tbw-pivot-depth: 3}[data-pivot-depth="4"]{--tbw-pivot-depth: 4}.tbw-pivot-panel{display:flex;flex-direction:column;gap:12px;padding:12px;height:100%;overflow-y:auto;font-size:13px}.tbw-pivot-section{border:1px solid var(--tbw-pivot-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius);background:var(--tbw-pivot-section-bg, var(--tbw-color-bg))}.tbw-pivot-section-header{padding:8px 12px;font-weight:600;background:var(--tbw-pivot-header-bg, var(--tbw-color-header-bg));border-bottom:1px solid var(--tbw-pivot-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius) var(--tbw-border-radius) 0 0}.tbw-pivot-section-content{padding:8px}.tbw-pivot-toggle-wrapper{display:flex;align-items:center}.tbw-pivot-toggle-label{display:flex;align-items:center;gap:8px;cursor:pointer}.tbw-pivot-toggle-label input{width:16px;height:16px;cursor:pointer}.tbw-pivot-drop-zone{min-height:60px;padding:8px;border:2px dashed var(--tbw-pivot-drop-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius);background:var(--tbw-pivot-drop-bg, var(--tbw-color-row-alt));display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;transition:all .15s ease}.tbw-pivot-drop-zone.drag-over{border-color:var(--tbw-color-accent);background:var(--tbw-pivot-drop-active, var(--tbw-focus-background))}.tbw-pivot-placeholder{color:var(--tbw-color-fg-muted);font-style:italic;padding:8px;text-align:center;width:100%}.tbw-pivot-field-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;background:var(--tbw-pivot-chip-bg, var(--tbw-color-header-bg));border:1px solid var(--tbw-pivot-chip-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius);cursor:grab;font-size:12px;transition:all .15s ease}.tbw-pivot-field-chip:hover{background:var(--tbw-pivot-chip-hover, var(--tbw-color-row-hover));border-color:var(--tbw-color-accent)}.tbw-pivot-field-chip.available{background:var(--tbw-color-bg)}.tbw-pivot-field-chip.dragging{opacity:.5;cursor:grabbing}.tbw-pivot-chip-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.tbw-pivot-chip-remove{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:var(--tbw-color-fg-muted);font-size:14px;font-weight:700;cursor:pointer;border-radius:50%;transition:all .15s ease}.tbw-pivot-chip-remove:hover{background:var(--tbw-pivot-chip-remove-hover-bg, var(--tbw-color-accent));color:var(--tbw-pivot-chip-remove-hover-fg, var(--tbw-color-accent-fg))}.tbw-pivot-value-chip{padding:4px 8px}.tbw-pivot-value-label-wrapper{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.tbw-pivot-agg-select{padding:2px 4px;font-size:11px;border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);background:var(--tbw-color-bg);cursor:pointer}.tbw-pivot-available-fields{display:flex;flex-wrap:wrap;gap:6px;min-height:40px}.tbw-pivot-options{display:flex;flex-direction:column;gap:8px}.tbw-pivot-checkbox{display:flex;align-items:center;gap:8px;cursor:pointer}.tbw-pivot-checkbox input{width:14px;height:14px;cursor:pointer}.pivot-group-row.tbw-pivot-slide-in,.pivot-leaf-row.tbw-pivot-slide-in{animation:tbw-pivot-slide-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-pivot-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.pivot-group-row.tbw-pivot-fade-in,.pivot-leaf-row.tbw-pivot-fade-in{animation:tbw-pivot-fade-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-pivot-fade-in{0%{opacity:0}to{opacity:1}}';
+const hn = '@layer tbw-plugins{.pivot-group-row{display:grid;grid-template-columns:var(--tbw-column-template);font-weight:600;background:var(--tbw-pivot-group-bg, var(--tbw-color-row-alt));min-height:var(--tbw-row-height);border-bottom:var(--tbw-row-divider)}.pivot-group-row:hover{background:var(--tbw-pivot-group-hover, var(--tbw-color-row-hover))}.pivot-leaf-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-pivot-leaf-bg, var(--tbw-color-bg));min-height:var(--tbw-row-height);border-bottom:var(--tbw-row-divider)}.pivot-grand-total-row{display:grid;grid-template-columns:var(--tbw-column-template);font-weight:700;background:var(--tbw-pivot-grand-total-bg, var(--tbw-color-header-bg));min-height:var(--tbw-row-height);border-top:2px solid var(--tbw-color-border-strong)}.pivot-grand-total-row>.cell{display:flex;align-items:center;padding:var(--tbw-cell-padding);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}.pivot-grand-total-row>.cell:last-child{border-right:0}.pivot-grand-total-footer{position:sticky;bottom:0;z-index:var(--tbw-z-layer-pinned-rows, 20);background:var(--tbw-pivot-grand-total-bg, var(--tbw-color-header-bg));min-width:fit-content}.pivot-group-row>.cell,.pivot-leaf-row>.cell{display:flex;align-items:center;padding:var(--tbw-cell-padding);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}.pivot-group-row>.cell:last-child,.pivot-leaf-row>.cell:last-child{border-right:0}.pivot-toggle{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:6px;border:none;background:transparent;cursor:pointer;color:var(--tbw-pivot-toggle-color, var(--tbw-color-fg-muted));border-radius:var(--tbw-border-radius);transition:background .15s,color .15s}.pivot-toggle:hover{background:var(--tbw-pivot-toggle-hover-bg, var(--tbw-color-row-hover));color:var(--tbw-pivot-toggle-hover-color, var(--tbw-color-fg))}.pivot-toggle:focus{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}.pivot-label{font-weight:inherit}.pivot-count{color:var(--tbw-pivot-count-color, var(--tbw-color-fg-muted));font-size:.9em;font-weight:400}.pivot-total-row{font-weight:700;border-top:2px solid var(--tbw-pivot-border, var(--tbw-color-border-strong))}[data-pivot-depth="1"]{--tbw-pivot-depth: 1}[data-pivot-depth="2"]{--tbw-pivot-depth: 2}[data-pivot-depth="3"]{--tbw-pivot-depth: 3}[data-pivot-depth="4"]{--tbw-pivot-depth: 4}.tbw-pivot-panel{display:flex;flex-direction:column;gap:var(--tbw-panel-padding, var(--tbw-spacing-lg, .75rem));padding:var(--tbw-panel-padding, var(--tbw-spacing-lg, .75rem));height:100%;overflow-y:auto;font-size:var(--tbw-font-size-sm, .8125rem)}.tbw-pivot-section{border:1px solid var(--tbw-pivot-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius);background:var(--tbw-pivot-section-bg, var(--tbw-color-bg))}.tbw-pivot-section-header{padding:var(--tbw-button-padding, var(--tbw-spacing-md, .5rem) var(--tbw-spacing-lg, .75rem));font-weight:600;background:var(--tbw-pivot-header-bg, var(--tbw-color-header-bg));border-bottom:1px solid var(--tbw-pivot-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius) var(--tbw-border-radius) 0 0}.tbw-pivot-section-content{padding:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem))}.tbw-pivot-toggle-wrapper{display:flex;align-items:center}.tbw-pivot-toggle-label{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));cursor:pointer}.tbw-pivot-toggle-label input{width:var(--tbw-icon-size, 1rem);height:var(--tbw-icon-size, 1rem);cursor:pointer}.tbw-pivot-drop-zone{min-height:60px;padding:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));border:2px dashed var(--tbw-pivot-drop-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius);background:var(--tbw-pivot-drop-bg, var(--tbw-color-row-alt));display:flex;flex-wrap:wrap;gap:var(--tbw-spacing-sm, .375rem);align-content:flex-start;transition:all .15s ease}.tbw-pivot-drop-zone.drag-over{border-color:var(--tbw-color-accent);background:var(--tbw-pivot-drop-active, var(--tbw-focus-background))}.tbw-pivot-placeholder{color:var(--tbw-color-fg-muted);font-style:italic;padding:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));text-align:center;width:100%}.tbw-pivot-field-chip{display:inline-flex;align-items:center;gap:var(--tbw-spacing-sm, .375rem);padding:var(--tbw-button-padding-sm, var(--tbw-spacing-xs, .25rem) var(--tbw-spacing-md, .5rem));background:var(--tbw-pivot-chip-bg, var(--tbw-color-header-bg));border:1px solid var(--tbw-pivot-chip-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius);cursor:grab;font-size:var(--tbw-font-size-xs, .75rem);transition:all .15s ease}.tbw-pivot-field-chip:hover{background:var(--tbw-pivot-chip-hover, var(--tbw-color-row-hover));border-color:var(--tbw-color-accent)}.tbw-pivot-field-chip.available{background:var(--tbw-color-bg)}.tbw-pivot-field-chip.dragging{opacity:.5;cursor:grabbing}.tbw-pivot-chip-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.tbw-pivot-chip-remove{display:flex;align-items:center;justify-content:center;width:var(--tbw-icon-size, 1rem);height:var(--tbw-icon-size, 1rem);padding:0;border:none;background:transparent;color:var(--tbw-color-fg-muted);font-size:var(--tbw-font-size-sm, .875rem);font-weight:700;cursor:pointer;border-radius:50%;transition:all .15s ease}.tbw-pivot-chip-remove:hover{background:var(--tbw-pivot-chip-remove-hover-bg, var(--tbw-color-accent));color:var(--tbw-pivot-chip-remove-hover-fg, var(--tbw-color-accent-fg))}.tbw-pivot-value-chip{padding:var(--tbw-button-padding-sm, var(--tbw-spacing-xs, .25rem) var(--tbw-spacing-md, .5rem))}.tbw-pivot-value-label-wrapper{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));flex:1;min-width:0}.tbw-pivot-agg-select{padding:var(--tbw-spacing-xs, .125rem) var(--tbw-spacing-xs, .25rem);font-size:var(--tbw-font-size-xs, .6875rem);border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);background:var(--tbw-color-bg);cursor:pointer}.tbw-pivot-available-fields{display:flex;flex-wrap:wrap;gap:var(--tbw-spacing-sm, .375rem);min-height:40px}.tbw-pivot-options{display:flex;flex-direction:column;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem))}.tbw-pivot-checkbox{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));cursor:pointer}.tbw-pivot-checkbox input{width:var(--tbw-icon-size-sm, .875rem);height:var(--tbw-icon-size-sm, .875rem);cursor:pointer}.pivot-group-row.tbw-pivot-slide-in,.pivot-leaf-row.tbw-pivot-slide-in{animation:tbw-pivot-slide-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-pivot-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.pivot-group-row.tbw-pivot-fade-in,.pivot-leaf-row.tbw-pivot-fade-in{animation:tbw-pivot-fade-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-pivot-fade-in{0%{opacity:0}to{opacity:1}}}';
 class F extends x {
   name = "pivot";
-  styles = un;
+  styles = hn;
   /** Tool panel ID for shell integration */
   static PANEL_ID = "pivot";
   get defaultConfig() {
@@ -3686,33 +3723,33 @@ class F extends x {
   processRows(e) {
     if (!this.hasInitialized && this.config.active !== !1 && this.hasValidPivotConfig() && (this.hasInitialized = !0, this.isActive = !0), !this.isActive)
       return [...e];
-    const t = jt(this.config);
+    const t = Ut(this.config);
     if (t.length > 0)
       return this.warn(`Config errors: ${t.join(", ")}`), [...e];
-    this.buildFieldHeaderMap(), this.defaultExpanded = this.config.defaultExpanded ?? !0, this.expandedKeys.size === 0 && this.defaultExpanded && this.pivotResult && this.expandAllKeys(), this.pivotResult = Ut(e, this.config), this.expandedKeys.size === 0 && this.defaultExpanded && this.expandAllKeys();
-    const n = this.config.indentWidth ?? 20, i = Jt(
+    this.buildFieldHeaderMap(), this.defaultExpanded = this.config.defaultExpanded ?? !0, this.expandedKeys.size === 0 && this.defaultExpanded && this.pivotResult && this.expandAllKeys(), this.pivotResult = Yt(e, this.config), this.expandedKeys.size === 0 && this.defaultExpanded && this.expandAllKeys();
+    const n = this.config.indentWidth ?? 20, i = Qt(
       this.pivotResult.rows,
       this.expandedKeys,
       this.defaultExpanded
-    ).map((r) => ({
-      __pivotRowKey: r.rowKey,
-      __pivotLabel: r.rowLabel,
-      __pivotDepth: r.depth,
-      __pivotIsGroup: r.isGroup,
-      __pivotHasChildren: !!r.children?.length,
-      __pivotExpanded: this.expandedKeys.has(r.rowKey),
-      __pivotRowCount: r.rowCount ?? 0,
-      __pivotIndent: r.depth * n,
-      __pivotTotal: r.total,
-      ...r.values
+    ).map((o) => ({
+      __pivotRowKey: o.rowKey,
+      __pivotLabel: o.rowLabel,
+      __pivotDepth: o.depth,
+      __pivotIsGroup: o.isGroup,
+      __pivotHasChildren: !!o.children?.length,
+      __pivotExpanded: this.expandedKeys.has(o.rowKey),
+      __pivotRowCount: o.rowCount ?? 0,
+      __pivotIndent: o.depth * n,
+      __pivotTotal: o.total,
+      ...o.values
     }));
     this.keysToAnimate.clear();
-    const o = /* @__PURE__ */ new Set();
-    for (const r of i) {
-      const l = r.__pivotRowKey;
-      o.add(l), !this.previousVisibleKeys.has(l) && r.__pivotDepth > 0 && this.keysToAnimate.add(l);
+    const r = /* @__PURE__ */ new Set();
+    for (const o of i) {
+      const l = o.__pivotRowKey;
+      r.add(l), !this.previousVisibleKeys.has(l) && o.__pivotDepth > 0 && this.keysToAnimate.add(l);
     }
-    return this.previousVisibleKeys = o, i;
+    return this.previousVisibleKeys = r, i;
   }
   processColumns(e) {
     if (!this.isActive || !this.pivotResult)
@@ -3724,11 +3761,11 @@ class F extends x {
       width: 200
     });
     for (const i of this.pivotResult.columnKeys)
-      for (const o of this.config.valueFields ?? []) {
-        const r = se([i], o.field), l = o.header || this.fieldHeaderMap.get(o.field) || o.field;
+      for (const r of this.config.valueFields ?? []) {
+        const o = oe([i], r.field), l = r.header || this.fieldHeaderMap.get(r.field) || r.field;
         t.push({
-          field: r,
-          header: `${i} - ${l} (${o.aggFunc})`,
+          field: o,
+          header: `${i} - ${l} (${r.aggFunc})`,
           width: 120,
           type: "number"
         });
@@ -3742,13 +3779,13 @@ class F extends x {
   }
   renderRow(e, t, n) {
     const i = e;
-    return i.__pivotRowKey && i.__pivotHasChildren ? an(i, t, {
+    return i.__pivotRowKey && i.__pivotHasChildren ? dn(i, t, {
       columns: this.gridColumns,
       rowIndex: n,
-      onToggle: (o) => this.toggle(o),
-      resolveIcon: (o) => this.resolveIcon(o),
-      setIcon: (o, r) => this.setIcon(o, r)
-    }) : i.__pivotRowKey !== void 0 && this.isActive ? dn(i, t, this.gridColumns, n) : (this.cleanupPivotStyling(t), !1);
+      onToggle: (r) => this.toggle(r),
+      resolveIcon: (r) => this.resolveIcon(r),
+      setIcon: (r, o) => this.setIcon(r, o)
+    }) : i.__pivotRowKey !== void 0 && this.isActive ? cn(i, t, this.gridColumns, n) : (this.cleanupPivotStyling(t), !1);
   }
   /**
    * Remove pivot-specific classes, attributes, and inline styles from a row element.
@@ -3768,12 +3805,12 @@ class F extends x {
     this.isActive && this.config.showGrandTotal && this.pivotResult ? this.renderGrandTotalFooter() : this.cleanupGrandTotalFooter();
     const e = this.animationStyle;
     if (e === !1 || this.keysToAnimate.size === 0) return;
-    const t = this.shadowRoot?.querySelector(".rows");
+    const t = this.gridElement?.querySelector(".rows");
     if (!t) return;
     const n = e === "fade" ? "tbw-pivot-fade-in" : "tbw-pivot-slide-in";
     for (const i of t.querySelectorAll(".pivot-group-row, .pivot-leaf-row")) {
-      const o = i.dataset.pivotKey;
-      o && this.keysToAnimate.has(o) && (i.classList.add(n), i.addEventListener("animationend", () => i.classList.remove(n), { once: !0 }));
+      const r = i.dataset.pivotKey;
+      r && this.keysToAnimate.has(r) && (i.classList.add(n), i.addEventListener("animationend", () => i.classList.remove(n), { once: !0 }));
     }
     this.keysToAnimate.clear();
   }
@@ -3782,7 +3819,7 @@ class F extends x {
    */
   renderGrandTotalFooter() {
     if (!this.pivotResult) return;
-    const e = this.shadowRoot;
+    const e = this.gridElement;
     if (!e) return;
     const t = e.querySelector(".tbw-scroll-area") ?? e.querySelector(".tbw-grid-content") ?? e.children[0];
     if (!t) return;
@@ -3794,7 +3831,7 @@ class F extends x {
       __pivotTotal: this.pivotResult.grandTotal,
       ...this.pivotResult.totals
     };
-    cn(n, this.grandTotalFooter, this.gridColumns);
+    un(n, this.grandTotalFooter, this.gridColumns);
   }
   /**
    * Remove the grand total footer element.
@@ -3824,7 +3861,7 @@ class F extends x {
    */
   expandAllKeys() {
     if (!this.pivotResult) return;
-    const e = Qt(this.pivotResult.rows);
+    const e = en(this.pivotResult.rows);
     for (const t of e)
       this.expandedKeys.add(t);
   }
@@ -3931,7 +3968,7 @@ class F extends x {
       },
       getAvailableFields: () => this.getAvailableFields()
     };
-    return tn(e, this.config, this.isActive, t);
+    return nn(e, this.config, this.isActive, t);
   }
   refreshPanel() {
     this.panelContainer && (this.panelContainer.innerHTML = "", this.renderPanel(this.panelContainer));
@@ -3960,12 +3997,12 @@ class F extends x {
     this.config.valueFields = (this.config.valueFields ?? []).filter((t) => t.field !== e), this.refreshIfActive();
   }
   updateValueAggFunc(e, t) {
-    const n = this.config.valueFields ?? [], i = n.findIndex((o) => o.field === e);
+    const n = this.config.valueFields ?? [], i = n.findIndex((r) => r.field === e);
     i >= 0 && (n[i] = { ...n[i], aggFunc: t }, this.config.valueFields = [...n]), this.isActive && this.refresh();
   }
   // #endregion
 }
-function hn(s) {
+function fn(s) {
   const e = s.meta ?? {};
   return e.lockPosition !== !0 && e.suppressMovable !== !0;
 }
@@ -3974,10 +4011,10 @@ function Fe(s, e, t) {
   const n = [...s], [i] = n.splice(e, 1);
   return n.splice(t, 0, i), n;
 }
-const fn = '.header-row>.cell[draggable=true]{cursor:grab;position:relative}.header-row>.cell.dragging{opacity:.5;cursor:grabbing}.header-row>.cell.drop-before:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent));z-index:1}.header-row>.cell.drop-after:after{content:"";position:absolute;right:0;top:0;bottom:0;width:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent));z-index:1}.cell.flip-animating{transition:transform var(--tbw-animation-duration, .2s) ease-out;will-change:transform;z-index:1}@keyframes reorder-fade-in{0%{opacity:0}to{opacity:1}}.cell.fade-animating{animation:reorder-fade-in var(--tbw-animation-duration, .2s) ease-out backwards}';
-class Un extends x {
+const gn = '@layer tbw-plugins{.header-row>.cell[draggable=true]{cursor:grab;position:relative}.header-row>.cell.dragging{opacity:.5;cursor:grabbing}.header-row>.cell.drop-before:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent));z-index:1}.header-row>.cell.drop-after:after{content:"";position:absolute;right:0;top:0;bottom:0;width:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent));z-index:1}.cell.flip-animating{transition:transform var(--tbw-animation-duration, .2s) ease-out;will-change:transform;z-index:1}@keyframes reorder-fade-in{0%{opacity:0}to{opacity:1}}.cell.fade-animating{animation:reorder-fade-in var(--tbw-animation-duration, .2s) ease-out backwards}}';
+class Yn extends x {
   name = "reorder";
-  styles = fn;
+  styles = gn;
   get defaultConfig() {
     return {
       animation: "flip"
@@ -4007,7 +4044,7 @@ class Un extends x {
    * Check if a column can be moved, considering both column config and plugin queries.
    */
   canMoveColumnWithPlugins(e) {
-    return !e || !hn(e) ? !1 : !this.grid.queryPlugins({
+    return !e || !fn(e) ? !1 : !this.grid.queryPlugins({
       type: He.CAN_MOVE_COLUMN,
       context: e
     }).includes(!1);
@@ -4016,7 +4053,7 @@ class Un extends x {
    * Clear all drag-related classes from header cells.
    */
   clearDragClasses() {
-    this.shadowRoot?.querySelectorAll(".header-row > .cell").forEach((e) => {
+    this.gridElement?.querySelectorAll(".header-row > .cell").forEach((e) => {
       e.classList.remove("dragging", "drop-target", "drop-before", "drop-after");
     });
   }
@@ -4038,24 +4075,24 @@ class Un extends x {
   // #endregion
   // #region Hooks
   afterRender() {
-    const e = this.shadowRoot;
+    const e = this.gridElement;
     if (!e) return;
     e.querySelectorAll(".header-row > .cell").forEach((n) => {
-      const i = n, o = i.getAttribute("data-field");
-      if (!o) return;
-      const r = this.columns.find((l) => l.field === o);
-      if (!this.canMoveColumnWithPlugins(r)) {
+      const i = n, r = i.getAttribute("data-field");
+      if (!r) return;
+      const o = this.columns.find((l) => l.field === r);
+      if (!this.canMoveColumnWithPlugins(o)) {
         i.draggable = !1;
         return;
       }
       i.draggable = !0, !i.getAttribute("data-dragstart-bound") && (i.setAttribute("data-dragstart-bound", "true"), i.addEventListener("dragstart", (l) => {
-        const d = this.getColumnOrder().indexOf(o);
-        this.isDragging = !0, this.draggedField = o, this.draggedIndex = d, l.dataTransfer && (l.dataTransfer.effectAllowed = "move", l.dataTransfer.setData("text/plain", o)), i.classList.add("dragging");
+        const d = this.getColumnOrder().indexOf(r);
+        this.isDragging = !0, this.draggedField = r, this.draggedIndex = d, l.dataTransfer && (l.dataTransfer.effectAllowed = "move", l.dataTransfer.setData("text/plain", r)), i.classList.add("dragging");
       }), i.addEventListener("dragend", () => {
         this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null, this.clearDragClasses();
       }), i.addEventListener("dragover", (l) => {
-        if (l.preventDefault(), !this.isDragging || this.draggedField === o) return;
-        const a = i.getBoundingClientRect(), d = a.left + a.width / 2, u = this.getColumnOrder().indexOf(o);
+        if (l.preventDefault(), !this.isDragging || this.draggedField === r) return;
+        const a = i.getBoundingClientRect(), d = a.left + a.width / 2, u = this.getColumnOrder().indexOf(r);
         this.dropIndex = l.clientX < d ? u : u + 1, i.classList.add("drop-target"), i.classList.toggle("drop-before", l.clientX < d), i.classList.toggle("drop-after", l.clientX >= d);
       }), i.addEventListener("dragleave", () => {
         i.classList.remove("drop-target", "drop-before", "drop-after");
@@ -4070,7 +4107,7 @@ class Un extends x {
           toIndex: u,
           columnOrder: f
         };
-        this.updateColumnOrder(f), this.emitCancelable("column-move", g) && this.updateColumnOrder(h);
+        this.emitCancelable("column-move", g) || this.updateColumnOrder(f);
       }));
     });
   }
@@ -4082,15 +4119,15 @@ class Un extends x {
       return;
     const t = this.grid, n = t._focusCol, i = t._visibleColumns;
     if (n < 0 || n >= i.length) return;
-    const o = i[n];
-    if (!this.canMoveColumnWithPlugins(o)) return;
-    const r = this.getColumnOrder(), l = r.indexOf(o.field);
+    const r = i[n];
+    if (!this.canMoveColumnWithPlugins(r)) return;
+    const o = this.getColumnOrder(), l = o.indexOf(r.field);
     if (l === -1) return;
     const a = e.key === "ArrowLeft" ? l - 1 : l + 1;
-    if (a < 0 || a >= r.length) return;
-    const d = i.find((c) => c.field === r[a]);
+    if (a < 0 || a >= o.length) return;
+    const d = i.find((c) => c.field === o[a]);
     if (this.canMoveColumnWithPlugins(d))
-      return this.moveColumn(o.field, a), t._focusCol = a, Ze(this.grid), e.preventDefault(), e.stopPropagation(), !0;
+      return this.moveColumn(r.field, a), t._focusCol = a, Xe(this.grid), e.preventDefault(), e.stopPropagation(), !0;
   }
   // #endregion
   // #region Public API
@@ -4109,13 +4146,13 @@ class Un extends x {
   moveColumn(e, t) {
     const n = this.getColumnOrder(), i = n.indexOf(e);
     if (i === -1) return;
-    const o = Fe(n, i, t);
-    this.updateColumnOrder(o), this.emitCancelable("column-move", {
+    const r = Fe(n, i, t);
+    this.emitCancelable("column-move", {
       field: e,
       fromIndex: i,
       toIndex: t,
-      columnOrder: o
-    }) && this.updateColumnOrder(n);
+      columnOrder: r
+    }) || this.updateColumnOrder(r);
   }
   /**
    * Set a specific column order.
@@ -4138,7 +4175,7 @@ class Un extends x {
    */
   captureHeaderPositions() {
     const e = /* @__PURE__ */ new Map();
-    return this.shadowRoot?.querySelectorAll(".header-row > .cell[data-field]").forEach((t) => {
+    return this.gridElement?.querySelectorAll(".header-row > .cell[data-field]").forEach((t) => {
       const n = t.getAttribute("data-field");
       n && e.set(n, t.getBoundingClientRect().left);
     }), e;
@@ -4149,35 +4186,35 @@ class Un extends x {
    * @param oldPositions - Header positions captured before DOM change
    */
   animateFLIP(e) {
-    const t = this.shadowRoot;
+    const t = this.gridElement;
     if (!t || e.size === 0) return;
     const n = /* @__PURE__ */ new Map();
-    if (t.querySelectorAll(".header-row > .cell[data-field]").forEach((r) => {
-      const l = r.getAttribute("data-field");
+    if (t.querySelectorAll(".header-row > .cell[data-field]").forEach((o) => {
+      const l = o.getAttribute("data-field");
       if (!l) return;
       const a = e.get(l);
       if (a === void 0) return;
-      const d = a - r.getBoundingClientRect().left;
+      const d = a - o.getBoundingClientRect().left;
       Math.abs(d) > 1 && n.set(l, d);
     }), n.size === 0) return;
     const i = [];
-    if (t.querySelectorAll(".cell[data-field]").forEach((r) => {
-      const l = n.get(r.getAttribute("data-field") ?? "");
+    if (t.querySelectorAll(".cell[data-field]").forEach((o) => {
+      const l = n.get(o.getAttribute("data-field") ?? "");
       if (l !== void 0) {
-        const a = r;
+        const a = o;
         a.style.transform = `translateX(${l}px)`, i.push(a);
       }
     }), i.length === 0) return;
-    t.host.offsetHeight;
-    const o = this.animationDuration;
+    this.gridElement.offsetHeight;
+    const r = this.animationDuration;
     requestAnimationFrame(() => {
-      i.forEach((r) => {
-        r.classList.add("flip-animating"), r.style.transform = "";
+      i.forEach((o) => {
+        o.classList.add("flip-animating"), o.style.transform = "";
       }), setTimeout(() => {
-        i.forEach((r) => {
-          r.style.transform = "", r.classList.remove("flip-animating");
+        i.forEach((o) => {
+          o.style.transform = "", o.classList.remove("flip-animating");
         });
-      }, o + 50);
+      }, r + 50);
     });
   }
   /**
@@ -4185,7 +4222,7 @@ class Un extends x {
    * Uses CSS keyframes - JS just toggles classes.
    */
   animateFade(e) {
-    const t = this.shadowRoot;
+    const t = this.gridElement;
     if (!t) {
       e();
       return;
@@ -4201,28 +4238,28 @@ class Un extends x {
       const c = l.getBoundingClientRect().left;
       Math.abs(d - c) > 1 && i.add(a);
     }), i.size === 0) return;
-    const o = [];
+    const r = [];
     if (t.querySelectorAll(".cell[data-field]").forEach((l) => {
       const a = l.getAttribute("data-field");
       if (a && i.has(a)) {
         const d = l;
-        d.classList.add("fade-animating"), o.push(d);
+        d.classList.add("fade-animating"), r.push(d);
       }
-    }), o.length === 0) return;
-    const r = this.animationDuration;
+    }), r.length === 0) return;
+    const o = this.animationDuration;
     setTimeout(() => {
-      o.forEach((l) => l.classList.remove("fade-animating"));
-    }, r + 50);
+      r.forEach((l) => l.classList.remove("fade-animating"));
+    }, o + 50);
   }
   /**
    * Update column order with configured animation.
    */
   updateColumnOrder(e) {
     const t = this.animationType;
-    if (t === "flip" && this.shadowRoot) {
+    if (t === "flip" && this.gridElement) {
       const n = this.captureHeaderPositions();
       this.grid.setColumnOrder(e), requestAnimationFrame(() => {
-        this.shadowRoot?.host?.offsetHeight, this.animateFLIP(n);
+        this.gridElement.offsetHeight, this.animateFLIP(n);
       });
     } else t === "fade" ? this.animateFade(() => this.grid.setColumnOrder(e)) : this.grid.setColumnOrder(e);
     this.grid.requestStateChange?.();
@@ -4231,18 +4268,18 @@ class Un extends x {
 }
 function Xn(s, e, t, n) {
   const i = new Set(s.selected);
-  let o = s.anchor;
+  let r = s.anchor;
   if (t === "single")
-    i.clear(), i.add(e), o = e;
+    i.clear(), i.add(e), r = e;
   else if (t === "multiple") {
-    const r = n.ctrlKey || n.metaKey;
+    const o = n.ctrlKey || n.metaKey;
     if (n.shiftKey && s.anchor !== null) {
       const l = Math.min(s.anchor, e), a = Math.max(s.anchor, e);
       for (let d = l; d <= a; d++)
         i.add(d);
-    } else r ? (i.has(e) ? i.delete(e) : i.add(e), o = e) : (i.clear(), i.add(e), o = e);
+    } else o ? (i.has(e) ? i.delete(e) : i.add(e), r = e) : (i.clear(), i.add(e), r = e);
   }
-  return { selected: i, lastSelected: e, anchor: o };
+  return { selected: i, lastSelected: e, anchor: r };
 }
 function Zn(s) {
   const e = /* @__PURE__ */ new Set();
@@ -4250,7 +4287,7 @@ function Zn(s) {
     e.add(t);
   return e;
 }
-function Yn(s, e) {
+function Jn(s, e) {
   const t = [], n = [];
   for (const i of e)
     s.has(i) || t.push(i);
@@ -4258,7 +4295,7 @@ function Yn(s, e) {
     e.has(i) || n.push(i);
   return { added: t, removed: n };
 }
-function B(s) {
+function O(s) {
   return {
     startRow: Math.min(s.startRow, s.endRow),
     startCol: Math.min(s.startCol, s.endCol),
@@ -4266,38 +4303,38 @@ function B(s) {
     endCol: Math.max(s.startCol, s.endCol)
   };
 }
-function gn(s) {
-  const e = B(s);
+function pn(s) {
+  const e = O(s);
   return {
     from: { row: e.startRow, col: e.startCol },
     to: { row: e.endRow, col: e.endCol }
   };
 }
-function Ve(s) {
-  return s.map(gn);
+function Be(s) {
+  return s.map(pn);
 }
-function pn(s, e, t) {
-  const n = B(t);
+function mn(s, e, t) {
+  const n = O(t);
   return s >= n.startRow && s <= n.endRow && e >= n.startCol && e <= n.endCol;
 }
 function Me(s, e, t) {
-  return t.some((n) => pn(s, e, n));
+  return t.some((n) => mn(s, e, n));
 }
-function mn(s) {
-  const e = [], t = B(s);
+function wn(s) {
+  const e = [], t = O(s);
   for (let n = t.startRow; n <= t.endRow; n++)
     for (let i = t.startCol; i <= t.endCol; i++)
       e.push({ row: n, col: i });
   return e;
 }
-function wn(s) {
+function bn(s) {
   const e = /* @__PURE__ */ new Map();
   for (const t of s)
-    for (const n of mn(t))
+    for (const n of wn(t))
       e.set(`${n.row},${n.col}`, n);
   return [...e.values()];
 }
-function J(s, e) {
+function Z(s, e) {
   return {
     startRow: s.row,
     startCol: s.col,
@@ -4305,8 +4342,8 @@ function J(s, e) {
     endCol: e.col
   };
 }
-const bn = ':host .selecting .data-grid-row>.cell{user-select:none}:host([data-has-focus]) .data-grid-row.row-focus{background-color:var(--tbw-focus-background, rgba(from var(--tbw-color-accent) r g b / 12%))}:host([data-selection-mode="row"]) .cell-focus{outline:none}:host .data-grid-row>.cell.selected{background-color:var(--tbw-range-selection-bg)}:host .data-grid-row>.cell.selected.top{border-top:2px solid var(--tbw-range-border-color)}:host .data-grid-row>.cell.selected.bottom{border-bottom:2px solid var(--tbw-range-border-color)}:host .data-grid-row>.cell.selected.first{border-left:2px solid var(--tbw-range-border-color)}:host .data-grid-row>.cell.selected.last{border-right:2px solid var(--tbw-range-border-color)}:host .tbw-selection-summary{font-size:13px;color:var(--tbw-color-fg-muted);white-space:nowrap}';
-function vn(s, e, t) {
+const vn = "@layer tbw-plugins{tbw-grid{&.selecting .data-grid-row>.cell{user-select:none}&[data-has-focus] .data-grid-row.row-focus{background-color:var(--tbw-focus-background, rgba(from var(--tbw-color-accent) r g b / 12%))}&[data-selection-mode=row] .cell-focus{outline:none}.data-grid-row>.cell.selected{background-color:var(--tbw-range-selection-bg);&.top{border-top:2px solid var(--tbw-range-border-color)}&.bottom{border-bottom:2px solid var(--tbw-range-border-color)}&.first{border-left:2px solid var(--tbw-range-border-color)}&.last{border-right:2px solid var(--tbw-range-border-color)}}.tbw-selection-summary{font-size:var(--tbw-font-size-sm, .8125rem);color:var(--tbw-color-fg-muted);white-space:nowrap}}}";
+function yn(s, e, t) {
   if (s === "cell" && e.selectedCell)
     return {
       mode: s,
@@ -4324,11 +4361,11 @@ function vn(s, e, t) {
     }));
     return { mode: s, ranges: n };
   }
-  return s === "range" && e.ranges.length > 0 ? { mode: s, ranges: Ve(e.ranges) } : { mode: s, ranges: [] };
+  return s === "range" && e.ranges.length > 0 ? { mode: s, ranges: Be(e.ranges) } : { mode: s, ranges: [] };
 }
-class Jn extends x {
+class Qn extends x {
   name = "selection";
-  styles = bn;
+  styles = vn;
   get defaultConfig() {
     return {
       mode: "cell"
@@ -4356,17 +4393,17 @@ class Jn extends x {
   // #endregion
   // #region Event Handlers
   onCellClick(e) {
-    const { rowIndex: t, colIndex: n, originalEvent: i } = e, { mode: o } = this.config, r = this.columns[n], l = r && _(r);
-    if (o === "cell")
+    const { rowIndex: t, colIndex: n, originalEvent: i } = e, { mode: r } = this.config, o = this.columns[n], l = o && _(o);
+    if (r === "cell")
       return l || (this.selectedCell = { row: t, col: n }, this.emit("selection-change", this.#t()), this.requestAfterRender()), !1;
-    if (o === "row")
+    if (r === "row")
       return this.selected.clear(), this.selected.add(t), this.lastSelected = t, this.emit("selection-change", this.#t()), this.requestAfterRender(), !1;
-    if (o === "range") {
+    if (r === "range") {
       if (l)
         return !1;
       const a = i.shiftKey, d = i.ctrlKey || i.metaKey;
       if (a && this.cellAnchor) {
-        const c = J(this.cellAnchor, { row: t, col: n });
+        const c = Z(this.cellAnchor, { row: t, col: n });
         d ? this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = c : this.ranges.push(c) : this.ranges = [c], this.activeRange = c;
       } else if (d) {
         const c = {
@@ -4402,17 +4439,17 @@ class Jn extends x {
         this.selected.clear(), this.selected.add(this.grid._focusRow), this.lastSelected = this.grid._focusRow, this.emit("selection-change", this.#t()), this.requestAfterRender();
       }), !1;
     if (t === "range" && i) {
-      const o = e.key === "Tab", r = e.shiftKey && !o;
-      return r && !this.cellAnchor && (this.cellAnchor = { row: this.grid._focusRow, col: this.grid._focusCol }), this.pendingKeyboardUpdate = { shiftKey: r }, queueMicrotask(() => this.requestAfterRender()), !1;
+      const r = e.key === "Tab", o = e.shiftKey && !r;
+      return o && !this.cellAnchor && (this.cellAnchor = { row: this.grid._focusRow, col: this.grid._focusCol }), this.pendingKeyboardUpdate = { shiftKey: o }, queueMicrotask(() => this.requestAfterRender()), !1;
     }
     if (t === "range" && e.key === "a" && (e.ctrlKey || e.metaKey)) {
-      const o = this.rows.length, r = this.columns.length;
-      if (o > 0 && r > 0) {
+      const r = this.rows.length, o = this.columns.length;
+      if (r > 0 && o > 0) {
         const l = {
           startRow: 0,
           startCol: 0,
-          endRow: o - 1,
-          endCol: r - 1
+          endRow: r - 1,
+          endCol: o - 1
         };
         return this.ranges = [l], this.activeRange = l, this.emit("selection-change", this.#t()), this.requestAfterRender(), !0;
       }
@@ -4427,23 +4464,23 @@ class Jn extends x {
     this.isDragging = !0;
     const n = e.rowIndex, i = e.colIndex;
     this.cellAnchor = { row: n, col: i }, e.originalEvent.ctrlKey || e.originalEvent.metaKey || (this.ranges = []);
-    const r = {
+    const o = {
       startRow: n,
       startCol: i,
       endRow: n,
       endCol: i
     };
-    return this.ranges.push(r), this.activeRange = r, this.emit("selection-change", this.#t()), this.requestAfterRender(), !0;
+    return this.ranges.push(o), this.activeRange = o, this.emit("selection-change", this.#t()), this.requestAfterRender(), !0;
   }
   onCellMouseMove(e) {
     if (this.config.mode !== "range" || !this.isDragging || !this.cellAnchor || e.rowIndex === void 0 || e.colIndex === void 0 || e.rowIndex < 0) return;
     let t = e.colIndex;
     const n = this.columns[t];
     if (n && _(n)) {
-      const o = this.columns.findIndex((r) => !_(r));
-      o >= 0 && (t = o);
+      const r = this.columns.findIndex((o) => !_(o));
+      r >= 0 && (t = r);
     }
-    const i = J(this.cellAnchor, { row: e.rowIndex, col: t });
+    const i = Z(this.cellAnchor, { row: e.rowIndex, col: t });
     return this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = i : this.ranges.push(i), this.activeRange = i, this.emit("selection-change", this.#t()), this.requestAfterRender(), !0;
   }
   onCellMouseUp(e) {
@@ -4455,49 +4492,48 @@ class Jn extends x {
    * Shared by afterRender and onScrollRender.
    */
   #e() {
-    const e = this.shadowRoot;
+    const e = this.gridElement;
     if (!e) return;
     const { mode: t } = this.config;
-    e.querySelectorAll(".cell").forEach((o) => {
-      o.classList.remove("selected", "top", "bottom", "first", "last");
+    e.querySelectorAll(".cell").forEach((r) => {
+      r.classList.remove("selected", "top", "bottom", "first", "last");
     });
     const i = e.querySelectorAll(".data-grid-row");
-    if (i.forEach((o) => {
-      o.classList.remove("selected", "row-focus");
-    }), t === "row" && (V(e), i.forEach((o) => {
-      const r = o.querySelector(".cell[data-row]"), l = Ye(r);
-      l >= 0 && this.selected.has(l) && o.classList.add("selected", "row-focus");
+    if (i.forEach((r) => {
+      r.classList.remove("selected", "row-focus");
+    }), t === "row" && (ce(e), i.forEach((r) => {
+      const o = r.querySelector(".cell[data-row]"), l = Ze(o);
+      l >= 0 && this.selected.has(l) && r.classList.add("selected", "row-focus");
     })), t === "range" && this.ranges.length > 0) {
-      V(e);
-      const o = this.activeRange ? B(this.activeRange) : null, r = this.columns.findIndex((a) => !_(a));
+      ce(e);
+      const r = this.activeRange ? O(this.activeRange) : null, o = this.columns.findIndex((a) => !_(a));
       this.columns.length - 1, e.querySelectorAll(".cell[data-row][data-col]").forEach((a) => {
         const d = parseInt(a.getAttribute("data-row") ?? "-1", 10), c = parseInt(a.getAttribute("data-col") ?? "-1", 10);
         if (d >= 0 && c >= 0) {
           const u = this.columns[c];
           if (u && _(u))
             return;
-          if (Me(d, c, this.ranges) && (a.classList.add("selected"), o)) {
-            d === o.startRow && a.classList.add("top"), d === o.endRow && a.classList.add("bottom");
-            const f = Math.max(o.startCol, r);
-            c === f && a.classList.add("first"), c === o.endCol && a.classList.add("last");
+          if (Me(d, c, this.ranges) && (a.classList.add("selected"), r)) {
+            d === r.startRow && a.classList.add("top"), d === r.endRow && a.classList.add("bottom");
+            const f = Math.max(r.startCol, o);
+            c === f && a.classList.add("first"), c === r.endCol && a.classList.add("last");
           }
         }
       });
     }
-    t === "cell" && this.selectedCell && V(e);
   }
   afterRender() {
-    const e = this.shadowRoot;
+    const e = this.gridElement;
     if (!e) return;
     const t = e.children[0], { mode: n } = this.config;
     if (this.pendingKeyboardUpdate && n === "range") {
       const { shiftKey: i } = this.pendingKeyboardUpdate;
       this.pendingKeyboardUpdate = null;
-      const o = this.grid._focusRow, r = this.grid._focusCol;
+      const r = this.grid._focusRow, o = this.grid._focusCol;
       if (i && this.cellAnchor) {
-        const l = J(this.cellAnchor, { row: o, col: r });
+        const l = Z(this.cellAnchor, { row: r, col: o });
         this.ranges = [l], this.activeRange = l;
-      } else i || (this.ranges = [], this.activeRange = null, this.cellAnchor = { row: o, col: r });
+      } else i || (this.ranges = [], this.activeRange = null, this.cellAnchor = { row: r, col: o });
       this.emit("selection-change", this.#t());
     }
     this.grid.setAttribute("data-selection-mode", n), t && t.classList.toggle("selecting", this.isDragging), this.#e();
@@ -4560,7 +4596,7 @@ class Jn extends x {
    * Get all selected cells across all ranges.
    */
   getSelectedCells() {
-    return wn(this.ranges);
+    return bn(this.ranges);
   }
   /**
    * Check if a specific cell is in range selection.
@@ -4585,13 +4621,13 @@ class Jn extends x {
       endCol: t.to.col
     })), this.activeRange = this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] : null, this.emit("selection-change", {
       mode: this.config.mode,
-      ranges: Ve(this.ranges)
+      ranges: Be(this.ranges)
     }), this.requestAfterRender();
   }
   // #endregion
   // #region Private Helpers
   #t() {
-    return vn(
+    return yn(
       this.config.mode,
       {
         selectedCell: this.selectedCell,
@@ -4606,20 +4642,20 @@ class Jn extends x {
 function G(s, e) {
   return Math.floor(s / e);
 }
-function yn(s, e) {
+function Cn(s, e) {
   return {
     start: s * e,
     end: (s + 1) * e
   };
 }
 function xn(s, e, t) {
-  const n = G(s, t), i = G(e - 1, t), o = [];
-  for (let r = n; r <= i; r++)
-    o.push(r);
-  return o;
+  const n = G(s, t), i = G(e - 1, t), r = [];
+  for (let o = n; o <= i; o++)
+    r.push(o);
+  return r;
 }
 async function Pe(s, e, t, n) {
-  const i = yn(e, t);
+  const i = Cn(e, t);
   return s.getRows({
     startRow: i.start,
     endRow: i.end,
@@ -4627,14 +4663,14 @@ async function Pe(s, e, t, n) {
     filterModel: n.filterModel
   });
 }
-function Cn(s, e, t) {
+function Rn(s, e, t) {
   const n = G(s, e), i = t.get(n);
   if (!i) return;
-  const o = s % e;
-  return i[o];
+  const r = s % e;
+  return i[r];
 }
-const Rn = 100;
-class Qn extends x {
+const En = 100;
+class ei extends x {
   name = "serverSide";
   get defaultConfig() {
     return {
@@ -4663,14 +4699,14 @@ class Qn extends x {
   loadRequiredBlocks() {
     if (!this.dataSource) return;
     const e = this.grid, t = this.config.cacheBlockSize ?? 100, n = { startRow: e._virtualization.start, endRow: e._virtualization.end }, i = xn(n.startRow, n.endRow, t);
-    for (const o of i)
-      if (!(this.loadedBlocks.has(o) || this.loadingBlocks.has(o))) {
+    for (const r of i)
+      if (!(this.loadedBlocks.has(r) || this.loadingBlocks.has(r))) {
         if (this.loadingBlocks.size >= (this.config.maxConcurrentRequests ?? 2))
           break;
-        this.loadingBlocks.add(o), Pe(this.dataSource, o, t, {}).then((r) => {
-          this.loadedBlocks.set(o, r.rows), this.totalRowCount = r.totalRowCount, this.loadingBlocks.delete(o), this.requestRender(), this.loadRequiredBlocks();
+        this.loadingBlocks.add(r), Pe(this.dataSource, r, t, {}).then((o) => {
+          this.loadedBlocks.set(r, o.rows), this.totalRowCount = o.totalRowCount, this.loadingBlocks.delete(r), this.requestRender(), this.loadRequiredBlocks();
         }).catch(() => {
-          this.loadingBlocks.delete(o);
+          this.loadingBlocks.delete(r);
         });
       }
   }
@@ -4680,7 +4716,7 @@ class Qn extends x {
     if (!this.dataSource) return [...e];
     const t = [];
     for (let n = 0; n < this.totalRowCount; n++) {
-      const i = Cn(n, this.config.cacheBlockSize ?? 100, this.loadedBlocks);
+      const i = Rn(n, this.config.cacheBlockSize ?? 100, this.loadedBlocks);
       t.push(i ?? { __loading: !0, __index: n });
     }
     return t;
@@ -4688,7 +4724,7 @@ class Qn extends x {
   onScroll(e) {
     this.dataSource && (this.loadRequiredBlocks(), this.scrollDebounceTimer && clearTimeout(this.scrollDebounceTimer), this.scrollDebounceTimer = setTimeout(() => {
       this.loadRequiredBlocks();
-    }, Rn));
+    }, En));
   }
   // #endregion
   // #region Public API
@@ -4737,35 +4773,35 @@ class Qn extends x {
   }
   // #endregion
 }
-function ze(s, e, t) {
+function Ve(s, e, t) {
   return s.id !== void 0 ? String(s.id) : t ? `${t}-${e}` : String(e);
 }
-function Q(s, e) {
+function J(s, e) {
   const t = new Set(s);
   return t.has(e) ? t.delete(e) : t.add(e), t;
 }
-function ne(s, e, t = null, n = 0) {
-  const i = e.childrenField ?? "children", o = /* @__PURE__ */ new Set();
-  for (let r = 0; r < s.length; r++) {
-    const l = s[r], a = ze(l, r, t), d = l[i];
+function te(s, e, t = null, n = 0) {
+  const i = e.childrenField ?? "children", r = /* @__PURE__ */ new Set();
+  for (let o = 0; o < s.length; o++) {
+    const l = s[o], a = Ve(l, o, t), d = l[i];
     if (Array.isArray(d) && d.length > 0) {
-      o.add(a);
-      const c = ne(d, e, a, n + 1);
-      for (const u of c) o.add(u);
+      r.add(a);
+      const c = te(d, e, a, n + 1);
+      for (const u of c) r.add(u);
     }
   }
-  return o;
+  return r;
 }
-function En() {
+function Sn() {
   return /* @__PURE__ */ new Set();
 }
 function We(s, e, t, n = null, i = 0) {
-  const o = t.childrenField ?? "children";
-  for (let r = 0; r < s.length; r++) {
-    const l = s[r], a = ze(l, r, n);
+  const r = t.childrenField ?? "children";
+  for (let o = 0; o < s.length; o++) {
+    const l = s[o], a = Ve(l, o, n);
     if (a === e)
       return [a];
-    const d = l[o];
+    const d = l[r];
     if (Array.isArray(d) && d.length > 0) {
       const c = We(d, e, t, a, i + 1);
       if (c)
@@ -4774,13 +4810,13 @@ function We(s, e, t, n = null, i = 0) {
   }
   return null;
 }
-function Sn(s, e, t, n) {
+function kn(s, e, t, n) {
   const i = We(s, e, t);
   if (!i) return n;
-  const o = new Set(n);
-  for (let r = 0; r < i.length - 1; r++)
-    o.add(i[r]);
-  return o;
+  const r = new Set(n);
+  for (let o = 0; o < i.length - 1; o++)
+    r.add(i[o]);
+  return r;
 }
 function De(s, e = "children") {
   if (!Array.isArray(s) || s.length === 0) return !1;
@@ -4792,7 +4828,7 @@ function De(s, e = "children") {
   }
   return !1;
 }
-function kn(s) {
+function An(s) {
   if (!Array.isArray(s) || s.length === 0) return null;
   const e = ["children", "items", "nodes", "subRows", "nested"];
   for (const t of s)
@@ -4804,34 +4840,34 @@ function kn(s) {
       }
   return null;
 }
-function An(s, e = "children", t = 0) {
+function _n(s, e = "children", t = 0) {
   if (!Array.isArray(s) || s.length === 0) return t;
   let n = t;
   for (const i of s) {
     if (!i) continue;
-    const o = i[e];
-    if (Array.isArray(o) && o.length > 0) {
-      const r = An(o, e, t + 1);
-      r > n && (n = r);
+    const r = i[e];
+    if (Array.isArray(r) && r.length > 0) {
+      const o = _n(r, e, t + 1);
+      o > n && (n = o);
     }
   }
   return n;
 }
-function _n(s, e = "children") {
+function Ln(s, e = "children") {
   if (!Array.isArray(s)) return 0;
   let t = 0;
   for (const n of s) {
     if (!n) continue;
     t++;
     const i = n[e];
-    Array.isArray(i) && (t += _n(i, e));
+    Array.isArray(i) && (t += Ln(i, e));
   }
   return t;
 }
-const Ln = ".cell[data-field=__tbw_expander]{border-right:none!important;padding:0;display:flex;align-items:center;justify-content:flex-start}.header-row .cell[data-field=__tbw_expander]{visibility:hidden;border:none!important;padding:0;overflow:hidden}.header-row .cell[data-field=__tbw_expander]+.cell{margin-left:-32px;padding-left:calc(var(--tbw-cell-padding, 8px) + 32px)}.tree-expander{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;box-sizing:border-box}.tree-toggle{cursor:pointer;user-select:none;display:inline-flex;align-items:center;justify-content:center}.tree-toggle:hover{color:var(--tbw-tree-accent, var(--tbw-color-accent))}.tree-spacer{width:14px;display:inline-block}.data-grid-row.tbw-tree-slide-in{animation:tbw-tree-slide-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-tree-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.data-grid-row.tbw-tree-fade-in{animation:tbw-tree-fade-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-tree-fade-in{0%{opacity:0}to{opacity:1}}";
-class ei extends x {
+const Tn = "@layer tbw-plugins{tbw-grid{.cell[data-field=__tbw_expander]{border-right:none!important;padding:0;display:flex;align-items:center;justify-content:flex-start}.header-row .cell[data-field=__tbw_expander]{display:none}.header-row .cell[data-field=__tbw_expander]+.cell{grid-column:1 / 3}.tree-cell-wrapper{display:inline-flex;align-items:center;padding-left:calc(var(--tbw-tree-depth, 0) * var(--tbw-tree-indent-width, var(--tbw-tree-toggle-size, 1.25em)))}.tree-expander{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;box-sizing:border-box}.tree-toggle{cursor:pointer;user-select:none;display:inline-flex;align-items:center;justify-content:center;width:var(--tbw-tree-toggle-size, 1.25em);height:var(--tbw-tree-toggle-size, 1.25em);flex-shrink:0}.tree-toggle:hover{color:var(--tbw-tree-accent, var(--tbw-color-accent))}.tree-spacer{width:var(--tbw-tree-toggle-size, 1.25em);display:inline-block;flex-shrink:0}.data-grid-row.tbw-tree-slide-in{animation:tbw-tree-slide-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}.data-grid-row.tbw-tree-fade-in{animation:tbw-tree-fade-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}}@keyframes tbw-tree-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}@keyframes tbw-tree-fade-in{0%{opacity:0}to{opacity:1}}}";
+class ti extends x {
   name = "tree";
-  styles = Ln;
+  styles = Tn;
   get defaultConfig() {
     return {
       childrenField: "children",
@@ -4866,7 +4902,7 @@ class ei extends x {
   // #region Auto-Detection
   detect(e) {
     if (!this.config.autoDetect) return !1;
-    const t = e, n = this.config.childrenField ?? kn(t) ?? "children";
+    const t = e, n = this.config.childrenField ?? An(t) ?? "children";
     return De(t, n);
   }
   // #endregion
@@ -4876,23 +4912,23 @@ class ei extends x {
     if (!De(n, t))
       return this.flattenedRows = [], this.rowKeyMap.clear(), this.previousVisibleKeys.clear(), [...e];
     let i = this.withStableKeys(n);
-    this.sortState && (i = this.sortTree(i, this.sortState.field, this.sortState.direction)), this.config.defaultExpanded && !this.initialExpansionDone && (this.expandedKeys = ne(i, this.config), this.initialExpansionDone = !0), this.flattenedRows = this.flattenTree(i, this.expandedKeys), this.rowKeyMap.clear(), this.keysToAnimate.clear();
-    const o = /* @__PURE__ */ new Set();
-    for (const r of this.flattenedRows)
-      this.rowKeyMap.set(r.key, r), o.add(r.key), !this.previousVisibleKeys.has(r.key) && r.depth > 0 && this.keysToAnimate.add(r.key);
-    return this.previousVisibleKeys = o, this.flattenedRows.map((r) => ({
-      ...r.data,
-      __treeKey: r.key,
-      __treeDepth: r.depth,
-      __treeHasChildren: r.hasChildren,
-      __treeExpanded: r.isExpanded
+    this.sortState && (i = this.sortTree(i, this.sortState.field, this.sortState.direction)), this.config.defaultExpanded && !this.initialExpansionDone && (this.expandedKeys = te(i, this.config), this.initialExpansionDone = !0), this.flattenedRows = this.flattenTree(i, this.expandedKeys), this.rowKeyMap.clear(), this.keysToAnimate.clear();
+    const r = /* @__PURE__ */ new Set();
+    for (const o of this.flattenedRows)
+      this.rowKeyMap.set(o.key, o), r.add(o.key), !this.previousVisibleKeys.has(o.key) && o.depth > 0 && this.keysToAnimate.add(o.key);
+    return this.previousVisibleKeys = r, this.flattenedRows.map((o) => ({
+      ...o.data,
+      __treeKey: o.key,
+      __treeDepth: o.depth,
+      __treeHasChildren: o.hasChildren,
+      __treeExpanded: o.isExpanded
     }));
   }
   /** Assign stable keys to rows (preserves key across sort operations) */
   withStableKeys(e, t = null) {
     const n = this.config.childrenField ?? "children";
-    return e.map((i, o) => {
-      const r = i.__stableKey, l = i.id !== void 0 ? String(i.id) : r ?? (t ? `${t}-${o}` : String(o)), a = i[n], d = Array.isArray(a) && a.length > 0;
+    return e.map((i, r) => {
+      const o = i.__stableKey, l = i.id !== void 0 ? String(i.id) : o ?? (t ? `${t}-${r}` : String(r)), a = i[n], d = Array.isArray(a) && a.length > 0;
       return {
         ...i,
         __stableKey: l,
@@ -4902,52 +4938,52 @@ class ei extends x {
   }
   /** Flatten tree using stable keys */
   flattenTree(e, t, n = 0) {
-    const i = this.config.childrenField ?? "children", o = [];
-    for (const r of e) {
-      const a = r.__stableKey ?? String(r.id ?? "?"), d = r[i], c = Array.isArray(d) && d.length > 0, u = t.has(a);
-      o.push({
+    const i = this.config.childrenField ?? "children", r = [];
+    for (const o of e) {
+      const a = o.__stableKey ?? String(o.id ?? "?"), d = o[i], c = Array.isArray(d) && d.length > 0, u = t.has(a);
+      r.push({
         key: a,
-        data: r,
+        data: o,
         depth: n,
         hasChildren: c,
         isExpanded: u,
         parentKey: n > 0 && a.substring(0, a.lastIndexOf("-")) || null
-      }), c && u && o.push(...this.flattenTree(d, t, n + 1));
+      }), c && u && r.push(...this.flattenTree(d, t, n + 1));
     }
-    return o;
+    return r;
   }
   /** Sort tree recursively, keeping children with parents */
   sortTree(e, t, n) {
     const i = this.config.childrenField ?? "children";
-    return [...e].sort((r, l) => {
-      const a = r[t], d = l[t];
+    return [...e].sort((o, l) => {
+      const a = o[t], d = l[t];
       return a == null && d == null ? 0 : a == null ? -1 : d == null ? 1 : a > d ? n : a < d ? -n : 0;
-    }).map((r) => {
-      const l = r[i];
-      return Array.isArray(l) && l.length > 0 ? { ...r, [i]: this.sortTree(l, t, n) } : r;
+    }).map((o) => {
+      const l = o[i];
+      return Array.isArray(l) && l.length > 0 ? { ...o, [i]: this.sortTree(l, t, n) } : o;
     });
   }
   processColumns(e) {
     if (this.flattenedRows.length === 0) return [...e];
     const t = [...e];
     if (t.length === 0) return t;
-    const n = t[0], i = n.viewRenderer, o = () => this.config, r = this.setIcon.bind(this), l = this.resolveIcon.bind(this), a = (d) => {
-      const { row: c, value: u } = d, { indentWidth: h = 20, showExpandIcons: f = !0 } = o(), g = c, p = g.__treeDepth ?? 0, b = document.createElement("span");
-      if (b.className = "tree-cell-wrapper", b.style.paddingLeft = `${Number(p) * h}px`, f)
+    const n = t[0], i = n.viewRenderer, r = () => this.config, o = this.setIcon.bind(this), l = this.resolveIcon.bind(this), a = (d) => {
+      const { row: c, value: u } = d, { showExpandIcons: h = !0, indentWidth: f } = r(), g = c, p = g.__treeDepth ?? 0, w = document.createElement("span");
+      if (w.className = "tree-cell-wrapper", w.style.setProperty("--tbw-tree-depth", String(p)), f !== void 0 && w.style.setProperty("--tbw-tree-indent-width", `${f}px`), h)
         if (g.__treeHasChildren) {
-          const w = document.createElement("span");
-          w.className = `tree-toggle${g.__treeExpanded ? " expanded" : ""}`, r(w, l(g.__treeExpanded ? "collapse" : "expand")), w.setAttribute("data-tree-key", String(g.__treeKey ?? "")), b.appendChild(w);
+          const b = document.createElement("span");
+          b.className = `tree-toggle${g.__treeExpanded ? " expanded" : ""}`, o(b, l(g.__treeExpanded ? "collapse" : "expand")), b.setAttribute("data-tree-key", String(g.__treeKey ?? "")), w.appendChild(b);
         } else {
-          const w = document.createElement("span");
-          w.className = "tree-spacer", b.appendChild(w);
+          const b = document.createElement("span");
+          b.className = "tree-spacer", w.appendChild(b);
         }
       const m = document.createElement("span");
       if (m.className = "tree-content", i) {
-        const w = i(d);
-        w instanceof Node ? m.appendChild(w) : typeof w == "string" && (m.innerHTML = w);
+        const b = i(d);
+        b instanceof Node ? m.appendChild(b) : typeof b == "string" && (m.innerHTML = b);
       } else
         m.textContent = u != null ? String(u) : "";
-      return b.appendChild(m), b;
+      return w.appendChild(m), w;
     };
     return t[0] = { ...n, viewRenderer: a }, t;
   }
@@ -4959,7 +4995,7 @@ class ei extends x {
     const n = t.getAttribute("data-tree-key");
     if (!n) return !1;
     const i = this.rowKeyMap.get(n);
-    return i ? (this.expandedKeys = Q(this.expandedKeys, n), this.emit("tree-expand", {
+    return i ? (this.expandedKeys = J(this.expandedKeys, n), this.emit("tree-expand", {
       key: n,
       row: i.data,
       expanded: this.expandedKeys.has(n),
@@ -4970,7 +5006,7 @@ class ei extends x {
     if (e.key !== " ") return;
     const t = this.grid._focusRow, n = this.flattenedRows[t];
     if (n?.hasChildren)
-      return e.preventDefault(), this.expandedKeys = Q(this.expandedKeys, n.key), this.emit("tree-expand", {
+      return e.preventDefault(), this.expandedKeys = J(this.expandedKeys, n.key), this.emit("tree-expand", {
         key: n.key,
         row: n.data,
         expanded: this.expandedKeys.has(n.key),
@@ -4987,11 +5023,11 @@ class ei extends x {
   afterRender() {
     const e = this.animationStyle;
     if (e === !1 || this.keysToAnimate.size === 0) return;
-    const t = this.shadowRoot?.querySelector(".rows");
+    const t = this.gridElement?.querySelector(".rows");
     if (!t) return;
     const n = e === "fade" ? "tbw-tree-fade-in" : "tbw-tree-slide-in";
     for (const i of t.querySelectorAll(".data-grid-row")) {
-      const o = i.querySelector(".cell[data-row]"), r = o ? parseInt(o.getAttribute("data-row") ?? "-1", 10) : -1, l = this.flattenedRows[r]?.key;
+      const r = i.querySelector(".cell[data-row]"), o = r ? parseInt(r.getAttribute("data-row") ?? "-1", 10) : -1, l = this.flattenedRows[o]?.key;
       l && this.keysToAnimate.has(l) && (i.classList.add(n), i.addEventListener("animationend", () => i.classList.remove(n), { once: !0 }));
     }
     this.keysToAnimate.clear();
@@ -5005,13 +5041,13 @@ class ei extends x {
     this.expandedKeys.delete(e), this.requestRender();
   }
   toggle(e) {
-    this.expandedKeys = Q(this.expandedKeys, e), this.requestRender();
+    this.expandedKeys = J(this.expandedKeys, e), this.requestRender();
   }
   expandAll() {
-    this.expandedKeys = ne(this.rows, this.config), this.requestRender();
+    this.expandedKeys = te(this.rows, this.config), this.requestRender();
   }
   collapseAll() {
-    this.expandedKeys = En(), this.requestRender();
+    this.expandedKeys = Sn(), this.requestRender();
   }
   isExpanded(e) {
     return this.expandedKeys.has(e);
@@ -5026,11 +5062,11 @@ class ei extends x {
     return this.rowKeyMap.get(e)?.data;
   }
   expandToKey(e) {
-    this.expandedKeys = Sn(this.rows, e, this.config, this.expandedKeys), this.requestRender();
+    this.expandedKeys = kn(this.rows, e, this.config, this.expandedKeys), this.requestRender();
   }
   // #endregion
 }
-function Tn(s, e, t) {
+function In(s, e, t) {
   const n = [...s.undoStack, e];
   for (; n.length > t; )
     n.shift();
@@ -5064,16 +5100,16 @@ function qe(s) {
     action: t
   } : { newState: s, action: null };
 }
-function In(s) {
+function Fn(s) {
   return s.undoStack.length > 0;
 }
-function Fn(s) {
+function Mn(s) {
   return s.redoStack.length > 0;
 }
-function Mn() {
+function Pn() {
   return { undoStack: [], redoStack: [] };
 }
-function Pn(s, e, t, n) {
+function Dn(s, e, t, n) {
   return {
     type: "cell-edit",
     rowIndex: s,
@@ -5083,7 +5119,7 @@ function Pn(s, e, t, n) {
     timestamp: Date.now()
   };
 }
-class ti extends x {
+class ni extends x {
   /**
    * Plugin dependencies - UndoRedoPlugin requires EditingPlugin to track edits.
    *
@@ -5117,8 +5153,8 @@ class ti extends x {
     if (t) {
       const i = Ke({ undoStack: this.undoStack, redoStack: this.redoStack });
       if (i.action) {
-        const o = this.rows;
-        o[i.action.rowIndex] && (o[i.action.rowIndex][i.action.field] = i.action.oldValue), this.undoStack = i.newState.undoStack, this.redoStack = i.newState.redoStack, this.emit("undo", {
+        const r = this.rows;
+        r[i.action.rowIndex] && (r[i.action.rowIndex][i.action.field] = i.action.oldValue), this.undoStack = i.newState.undoStack, this.redoStack = i.newState.redoStack, this.emit("undo", {
           action: i.action,
           type: "undo"
         }), this.requestRender();
@@ -5128,8 +5164,8 @@ class ti extends x {
     if (n) {
       const i = qe({ undoStack: this.undoStack, redoStack: this.redoStack });
       if (i.action) {
-        const o = this.rows;
-        o[i.action.rowIndex] && (o[i.action.rowIndex][i.action.field] = i.action.newValue), this.undoStack = i.newState.undoStack, this.redoStack = i.newState.redoStack, this.emit("redo", {
+        const r = this.rows;
+        r[i.action.rowIndex] && (r[i.action.rowIndex][i.action.field] = i.action.newValue), this.undoStack = i.newState.undoStack, this.redoStack = i.newState.redoStack, this.emit("redo", {
           action: i.action,
           type: "redo"
         }), this.requestRender();
@@ -5149,12 +5185,12 @@ class ti extends x {
    * @param newValue - The value after the edit
    */
   recordEdit(e, t, n, i) {
-    const o = Pn(e, t, n, i), r = Tn(
+    const r = Dn(e, t, n, i), o = In(
       { undoStack: this.undoStack, redoStack: this.redoStack },
-      o,
+      r,
       this.config.maxHistorySize ?? 100
     );
-    this.undoStack = r.undoStack, this.redoStack = r.redoStack;
+    this.undoStack = o.undoStack, this.redoStack = o.redoStack;
   }
   /**
    * Programmatically undo the last action.
@@ -5186,19 +5222,19 @@ class ti extends x {
    * Check if there are any actions that can be undone.
    */
   canUndo() {
-    return In({ undoStack: this.undoStack, redoStack: this.redoStack });
+    return Fn({ undoStack: this.undoStack, redoStack: this.redoStack });
   }
   /**
    * Check if there are any actions that can be redone.
    */
   canRedo() {
-    return Fn({ undoStack: this.undoStack, redoStack: this.redoStack });
+    return Mn({ undoStack: this.undoStack, redoStack: this.redoStack });
   }
   /**
    * Clear all undo/redo history.
    */
   clearHistory() {
-    const e = Mn();
+    const e = Pn();
     this.undoStack = e.undoStack, this.redoStack = e.redoStack;
   }
   /**
@@ -5215,7 +5251,7 @@ class ti extends x {
   }
   // #endregion
 }
-const Dn = '.tbw-visibility-content{display:flex;flex-direction:column;height:100%}.tbw-visibility-list{flex:1;overflow-y:auto;padding:8px}.tbw-visibility-row{display:flex;align-items:center;gap:8px;padding:6px 4px;cursor:pointer;font-size:13px;border-radius:var(--tbw-border-radius, 4px);position:relative}.tbw-visibility-row:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover, #f3f4f6))}.tbw-visibility-row input[type=checkbox]{cursor:pointer}.tbw-visibility-row.locked span{color:var(--tbw-color-fg-muted, #888)}.tbw-visibility-handle{cursor:grab;color:var(--tbw-color-fg-muted, #888);font-size:10px;letter-spacing:-2px;user-select:none;flex-shrink:0}.tbw-visibility-row.reorderable:hover .tbw-visibility-handle{color:var(--tbw-color-fg, #1f2937)}.tbw-visibility-label{display:flex;align-items:center;gap:8px;flex:1;cursor:pointer}.tbw-visibility-row.dragging{opacity:.5;cursor:grabbing}.tbw-visibility-row.drop-before:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent, #3b82f6))}.tbw-visibility-row.drop-after:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent, #3b82f6))}.tbw-visibility-show-all{margin:8px;padding:8px 12px;border:1px solid var(--tbw-visibility-border, var(--tbw-color-border, #e5e7eb));border-radius:var(--tbw-border-radius, 4px);background:var(--tbw-visibility-btn-bg, var(--tbw-color-header-bg, #f9fafb));color:var(--tbw-color-fg, #1f2937);cursor:pointer;font-size:13px}.tbw-visibility-show-all:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover, #f3f4f6))}';
+const Kn = '@layer tbw-plugins{.tbw-visibility-content{display:flex;flex-direction:column;height:100%}.tbw-visibility-list{flex:1;overflow-y:auto;padding:var(--tbw-panel-padding, var(--tbw-spacing-md, .5rem))}.tbw-visibility-row{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));padding:var(--tbw-menu-item-padding, .375rem .25rem);cursor:pointer;font-size:var(--tbw-font-size-sm, .8125rem);border-radius:var(--tbw-border-radius, .25rem);position:relative}.tbw-visibility-row:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover, #f3f4f6))}.tbw-visibility-row input[type=checkbox]{cursor:pointer}.tbw-visibility-row.locked span{color:var(--tbw-color-fg-muted, #888)}.tbw-visibility-handle{cursor:grab;color:var(--tbw-color-fg-muted, #888);font-size:var(--tbw-font-size-2xs, .625rem);letter-spacing:-2px;user-select:none;flex-shrink:0}.tbw-visibility-row.reorderable:hover .tbw-visibility-handle{color:var(--tbw-color-fg, #1f2937)}.tbw-visibility-label{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));flex:1;cursor:pointer}.tbw-visibility-row.dragging{opacity:.5;cursor:grabbing}.tbw-visibility-row.drop-before:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent, #3b82f6))}.tbw-visibility-row.drop-after:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent, #3b82f6))}.tbw-visibility-show-all{margin:var(--tbw-panel-padding, var(--tbw-spacing-md, .5rem));padding:var(--tbw-button-padding, .5rem .75rem);border:1px solid var(--tbw-visibility-border, var(--tbw-color-border, #e5e7eb));border-radius:var(--tbw-border-radius, .25rem);background:var(--tbw-visibility-btn-bg, var(--tbw-color-header-bg, #f9fafb));color:var(--tbw-color-fg, #1f2937);cursor:pointer;font-size:var(--tbw-font-size-sm, .8125rem)}.tbw-visibility-show-all:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover, #f3f4f6))}}';
 function Ne(s) {
   const e = s.meta ?? {};
   return e.lockPosition !== !0 && e.suppressMovable !== !0;
@@ -5232,7 +5268,7 @@ class M extends x {
   name = "visibility";
   /** Tool panel ID for shell integration */
   static PANEL_ID = "columns";
-  styles = Dn;
+  styles = Kn;
   get defaultConfig() {
     return {
       allowHideAll: !1
@@ -5405,16 +5441,16 @@ class M extends x {
     e.innerHTML = "";
     const n = this.grid.getAllColumns().filter((i) => !i.utility);
     for (let i = 0; i < n.length; i++) {
-      const o = n[i], r = o.header || o.field, l = document.createElement("div");
-      l.className = o.lockVisible ? "tbw-visibility-row locked" : "tbw-visibility-row", l.setAttribute("data-field", o.field), l.setAttribute("data-index", String(i)), t && Ne(o) && (l.draggable = !0, l.classList.add("reorderable"), this.setupDragListeners(l, o.field, i, e));
+      const r = n[i], o = r.header || r.field, l = document.createElement("div");
+      l.className = r.lockVisible ? "tbw-visibility-row locked" : "tbw-visibility-row", l.setAttribute("data-field", r.field), l.setAttribute("data-index", String(i)), t && Ne(r) && (l.draggable = !0, l.classList.add("reorderable"), this.setupDragListeners(l, r.field, i, e));
       const a = document.createElement("label");
       a.className = "tbw-visibility-label";
       const d = document.createElement("input");
-      d.type = "checkbox", d.checked = o.visible, d.disabled = o.lockVisible ?? !1, d.addEventListener("change", () => {
-        this.grid.toggleColumnVisibility(o.field), setTimeout(() => this.rebuildToggles(e), 0);
+      d.type = "checkbox", d.checked = r.visible, d.disabled = r.lockVisible ?? !1, d.addEventListener("change", () => {
+        this.grid.toggleColumnVisibility(r.field), setTimeout(() => this.rebuildToggles(e), 0);
       });
       const c = document.createElement("span");
-      if (c.textContent = r, a.appendChild(d), a.appendChild(c), t && Ne(o)) {
+      if (c.textContent = o, a.appendChild(d), a.appendChild(c), t && Ne(r)) {
         const u = document.createElement("span");
         u.className = "tbw-visibility-handle", this.setIcon(u, this.resolveIcon("dragHandle")), u.title = "Drag to reorder", l.appendChild(u);
       }
@@ -5426,31 +5462,32 @@ class M extends x {
    * On drop, emits a 'column-reorder-request' event for other plugins to handle.
    */
   setupDragListeners(e, t, n, i) {
-    e.addEventListener("dragstart", (o) => {
-      this.isDragging = !0, this.draggedField = t, this.draggedIndex = n, o.dataTransfer && (o.dataTransfer.effectAllowed = "move", o.dataTransfer.setData("text/plain", t)), e.classList.add("dragging");
+    e.addEventListener("dragstart", (r) => {
+      this.isDragging = !0, this.draggedField = t, this.draggedIndex = n, r.dataTransfer && (r.dataTransfer.effectAllowed = "move", r.dataTransfer.setData("text/plain", t)), e.classList.add("dragging");
     }), e.addEventListener("dragend", () => {
       this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null, this.clearDragClasses(i);
-    }), e.addEventListener("dragover", (o) => {
-      if (o.preventDefault(), !this.isDragging || this.draggedField === t) return;
-      const r = e.getBoundingClientRect(), l = r.top + r.height / 2;
-      this.dropIndex = o.clientY < l ? n : n + 1, i.querySelectorAll(".tbw-visibility-row").forEach((a) => {
+    }), e.addEventListener("dragover", (r) => {
+      if (r.preventDefault(), !this.isDragging || this.draggedField === t) return;
+      const o = e.getBoundingClientRect(), l = o.top + o.height / 2;
+      this.dropIndex = r.clientY < l ? n : n + 1, i.querySelectorAll(".tbw-visibility-row").forEach((a) => {
         a !== e && a.classList.remove("drop-target", "drop-before", "drop-after");
-      }), e.classList.add("drop-target"), e.classList.toggle("drop-before", o.clientY < l), e.classList.toggle("drop-after", o.clientY >= l);
+      }), e.classList.add("drop-target"), e.classList.toggle("drop-before", r.clientY < l), e.classList.toggle("drop-after", r.clientY >= l);
     }), e.addEventListener("dragleave", () => {
       e.classList.remove("drop-target", "drop-before", "drop-after");
-    }), e.addEventListener("drop", (o) => {
-      o.preventDefault();
-      const r = this.draggedField, l = this.draggedIndex, a = this.dropIndex;
-      if (!this.isDragging || r === null || l === null || a === null)
+    }), e.addEventListener("drop", (r) => {
+      r.preventDefault();
+      const o = this.draggedField, l = this.draggedIndex, a = this.dropIndex;
+      if (!this.isDragging || o === null || l === null || a === null)
         return;
       const d = a > l ? a - 1 : a;
       if (d !== l) {
-        const c = {
-          field: r,
+        const c = this.grid.getAllColumns(), h = c.filter((p) => !p.utility)[d]?.field, f = h ? c.findIndex((p) => p.field === h) : c.length, g = {
+          field: o,
           fromIndex: l,
-          toIndex: d
+          // Not used by ReorderPlugin, just for info
+          toIndex: f
         };
-        this.emit("column-reorder-request", c), setTimeout(() => {
+        this.emit("column-reorder-request", g), setTimeout(() => {
           this.rebuildToggles(i);
         }, 0);
       }
@@ -5460,52 +5497,54 @@ class M extends x {
 }
 export {
   x as BaseGridPlugin,
-  qn as ClipboardPlugin,
-  Nn as ColumnVirtualizationPlugin,
-  Hn as ContextMenuPlugin,
+  Nn as ClipboardPlugin,
+  Hn as ColumnVirtualizationPlugin,
+  zn as ContextMenuPlugin,
   oi as DEFAULT_ANIMATION_CONFIG,
   $e as DEFAULT_GRID_ICONS,
-  ri as DGEvents,
-  si as DataGridElement,
-  Gn as EditingPlugin,
+  si as DGEvents,
+  li as DataGridElement,
+  On as EditingPlugin,
   Bn as ExportPlugin,
-  U as FOCUSABLE_EDITOR_SELECTOR,
-  L as FilteringPlugin,
-  li as FitModeEnum,
-  ai as GridCSSVars,
-  di as GridClasses,
-  ci as GridDataAttrs,
-  ui as GridElement,
-  hi as GridSelectors,
+  j as FOCUSABLE_EDITOR_SELECTOR,
+  S as FilteringPlugin,
+  ai as FitModeEnum,
+  di as GridCSSVars,
+  ci as GridClasses,
+  ui as GridDataAttrs,
+  hi as GridElement,
+  fi as GridSelectors,
   Vn as GroupingColumnsPlugin,
-  zn as GroupingRowsPlugin,
+  Wn as GroupingRowsPlugin,
   Ge as MasterDetailPlugin,
-  Wn as MultiSortPlugin,
+  $n as MultiSortPlugin,
   He as PLUGIN_QUERIES,
-  $n as PinnedColumnsPlugin,
-  jn as PinnedRowsPlugin,
+  jn as PinnedColumnsPlugin,
+  Un as PinnedRowsPlugin,
   F as PivotPlugin,
-  fi as PluginEvents,
-  gi as PluginManager,
-  pi as RenderPhase,
-  Un as ReorderPlugin,
-  Jn as SelectionPlugin,
-  Qn as ServerSidePlugin,
-  ei as TreePlugin,
-  ti as UndoRedoPlugin,
+  gi as PluginEvents,
+  pi as PluginManager,
+  mi as RenderPhase,
+  Yn as ReorderPlugin,
+  Qn as SelectionPlugin,
+  ei as ServerSidePlugin,
+  ti as TreePlugin,
+  ni as UndoRedoPlugin,
   M as VisibilityPlugin,
-  mi as builtInSort,
-  dt as clearEditingState,
-  Yn as computeSelectionDiff,
-  _n as countNodes,
-  wi as defaultComparator,
-  lt as defaultEditorFor,
+  wi as builtInSort,
+  ct as clearEditingState,
+  Jn as computeSelectionDiff,
+  Ln as countNodes,
+  bi as createGrid,
+  vi as defaultComparator,
+  at as defaultEditorFor,
   nt as defaultPasteHandler,
   De as detectTreeStructure,
-  An as getMaxDepth,
+  _n as getMaxDepth,
   Xn as handleRowClick,
-  On as hasEditingCells,
-  kn as inferChildrenField,
+  Gn as hasEditingCells,
+  An as inferChildrenField,
+  yi as queryGrid,
   Zn as selectAll
 };
 //# sourceMappingURL=all.js.map