@toolbox-web/grid 0.2.3 → 0.2.4

package/index.js

@@ -1,8 +1,8 @@
 const fe = ":root{color-scheme:light dark}:host{--tbw-color-bg: transparent;--tbw-color-panel-bg: light-dark(#eeeeee, #222222);--tbw-color-fg: light-dark(#222222, #eeeeee);--tbw-color-fg-muted: light-dark(#555555, #aaaaaa);--tbw-color-accent: light-dark(#3b82f6, #3b82f6);--tbw-color-accent-fg: light-dark(#ffffff, #000000);--tbw-color-success: light-dark(hsl(122, 39%, 40%), hsl(122, 39%, 49%));--tbw-color-selection: light-dark(#fff7d6, #333333);--tbw-color-row-alt: var(--tbw-color-bg);--tbw-color-row-hover: light-dark(#f0f6ff, #1c1c1c);--tbw-color-header-bg: color-mix(in hsl, var(--tbw-color-panel-bg) 85%, var(--tbw-color-fg));--tbw-color-header-fg: color-mix(in hsl, var(--tbw-color-fg) 75%, var(--tbw-color-panel-bg));--tbw-color-border: light-dark(#d0d0d4, #454545);--tbw-color-border-strong: light-dark(#777777, #adacac);--tbw-color-border-cell: var(--tbw-color-border);--tbw-color-border-header: var(--tbw-color-border);--tbw-color-shadow: light-dark(rgba(0, 0, 0, .1), rgba(0, 0, 0, .3));--tbw-font-family: inherit;--tbw-font-size: inherit;--tbw-font-size-header: var(--tbw-font-size);--tbw-font-weight-header: bold;--tbw-cell-padding-header: 2px 8px;--tbw-cell-padding: 2px 8px;--tbw-cell-padding-input: 2px 6px;--tbw-row-height: 28px;--tbw-header-height: 30px;--tbw-cell-white-space: nowrap;--tbw-border-radius: 4px;--tbw-border-input: 1px solid var(--tbw-color-border-strong);--tbw-border-header: 1px solid var(--tbw-color-border-header);--tbw-row-divider: 1px solid var(--tbw-color-border-cell);--tbw-row-hover-outline: 0;--tbw-color-active-row-bg: var(--tbw-color-selection);--tbw-active-row-outline: 0;--tbw-focus-outline: 2px solid var(--tbw-color-accent);--tbw-focus-outline-offset: -2px;--tbw-focus-background: rgba(from var(--tbw-color-accent) r g b / 12%);--tbw-range-border-color: var(--tbw-color-accent);--tbw-range-selection-bg: rgba(from var(--tbw-range-border-color) r g b / 12%);--tbw-resize-handle-width: 4px;--tbw-resize-handle-color: transparent;--tbw-resize-handle-color-hover: var(--tbw-color-accent);--tbw-resize-handle-border-radius: 0;--tbw-scrollbar-thumb: var(--tbw-color-border-strong);--tbw-scrollbar-track: var(--tbw-color-bg);--tbw-transition-duration: .12s;--tbw-transition-ease: ease;--tbw-editing-bg: var(--tbw-color-selection);--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-sort-indicator-color: var(--tbw-color-fg-muted);--tbw-sort-indicator-active-color: var(--tbw-color-accent);--tbw-header-text-transform: none;--tbw-header-letter-spacing: normal;--tbw-color-header-separator: var(--tbw-color-border-cell);--tbw-checkbox-size: 16px;--tbw-density-scale: 1}:host{position:relative;display:block;width:100%;height:100%;min-height:0;contain:content;font-family:var(--tbw-font-family);font-size:var(--tbw-font-size);background:var(--tbw-color-bg);color:var(--tbw-color-fg);border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);overflow:clip;outline:none}:host,:host *{box-sizing:border-box}:host .header{display:block;flex-shrink:0;z-index:var(--tbw-z-layer-header, 30);background:var(--tbw-color-header-bg);overflow:visible}:host .header-group-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-color-header-bg);z-index:var(--tbw-z-layer-header, 30)}:host .header-group-cell{display:flex;align-items:center;justify-content:flex-start;padding:var(--tbw-cell-padding-header, 2px 8px);color:var(--tbw-color-header-group-fg, var(--tbw-color-header-fg));font-weight:var(--tbw-font-weight-header-group, var(--tbw-font-weight-header));justify-content:var(--tbw-align-header-group, var(--tbw-align-header, flex-start))}:host .header-row{display:grid;grid-template-columns:var(--tbw-column-template);color:var(--tbw-color-header-fg);font-size:var(--tbw-font-size-header);min-height:var(--tbw-header-height);border-bottom:var(--tbw-border-header);z-index:var(--tbw-z-layer-header, 30)}:host .header-row>.cell{display:flex;align-items:center;gap:4px;padding:var(--tbw-cell-padding-header, 2px 8px);background-color:var(--tbw-color-header-bg);font-weight:var(--tbw-font-weight-header);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}:host .header-row>.cell>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .header-row>.cell>span[part~=sort-indicator]{flex-shrink:0}:host .header-row>.cell:last-child{border-right:0}:host .header-group-cell,:host .header-row>.cell.grouped.group-end{border-right:2px solid var(--tbw-color-border)}:host .tbw-grid-root{display:flex;flex-direction:column;height:100%}:host .rows-body-wrapper{flex:1;min-height:0;display:flex;flex-direction:row;width:100%;min-width:fit-content}:host .rows-body{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:visible}:host .rows-container{display:flex;flex-direction:row;flex:1;min-height:0;overflow:visible}:host .rows-viewport{flex:1;min-width:0;position:relative;display:block;overflow:clip}:host .faux-vscroll{position:sticky;inset-inline-end:0;flex-shrink:0;width:auto;overflow-y:auto;overflow-x:hidden;z-index:var(--tbw-z-layer-header, 30)}:host .faux-vscroll-spacer{width:1px}:host .rows-viewport .rows{position:absolute;top:0;left:0;min-width:100%;will-change:transform;z-index:var(--tbw-z-layer-rows, 1)}:host .data-grid-row{display:grid;grid-template-columns:var(--tbw-column-template);contain:layout style}:host .data-grid-row:has(.editing){background:var(--tbw-editing-bg)}:host .selecting .data-grid-row>.cell{user-select:none}:host .data-grid-row>.cell.selected:focus-visible,:host .data-grid-row>.cell:focus-visible:not(.cell-focus){outline:none}:host .data-grid-row>.cell{display:block;padding:var(--tbw-cell-padding, 2px 8px);border-bottom:var(--tbw-row-divider);min-height:var(--tbw-row-height);line-height:calc(var(--tbw-row-height) - 5px);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0;white-space:var(--tbw-cell-white-space, nowrap);text-overflow:ellipsis}:host .data-grid-row>.cell>*{overflow:hidden;text-overflow:ellipsis;white-space:inherit;min-width:0}:host .data-grid-row>.cell:last-child{border-right:0}:host .data-grid-row>.cell[data-type=boolean]{text-align:center}:host .data-grid-row>.cell[data-type=boolean] input[type=checkbox]{margin:0;width:var(--tbw-checkbox-size);height:var(--tbw-checkbox-size);vertical-align:middle}:host .data-grid-row>.cell.editing{overflow:hidden;padding:0;display:flex}:host .data-grid-row>.cell.editing input:not([type=checkbox]),:host .data-grid-row>.cell.editing select,:host .data-grid-row>.cell.editing textarea{width:100%;height:100%;max-width: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)}:host .data-grid-row:nth-child(2n){background:var(--tbw-color-row-alt)}:host .data-grid-row:hover{background:var(--tbw-color-row-hover)}:host .sortable{cursor:pointer;user-select:none}:host .resize-handle{position:absolute;top:0;right:calc(var(--tbw-resize-handle-width) / -2);width:var(--tbw-resize-handle-width);height:100%;cursor:e-resize;user-select:none;touch-action:none;z-index:20;background:var(--tbw-resize-handle-color);transition:background .12s ease;border-radius:var(--tbw-resize-handle-border-radius)}:host .resize-handle:hover{background:var(--tbw-resize-handle-color-hover)}:host .cell-focus,:host .row-focus{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}:host .group-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-color-row-alt);font-weight:500;border-bottom:var(--tbw-row-divider);min-height:var(--tbw-row-height)}:host .group-row .cell{display:flex;align-items:center;padding:var(--tbw-cell-padding, 2px 8px)}:host .group-row .group-toggle{background:none;border:0;cursor:pointer;padding:0 4px 0 0;font:inherit}:host .group-row .group-count{margin-left:4px;opacity:.7}:host .sticky-left,:host .sticky-right{position:sticky;z-index:25}:host .header-row>.cell.sticky-left,:host .header-row>.cell.sticky-right{background:var(--tbw-color-header-bg);z-index:35}:host .data-grid-row>.cell.sticky-left,:host .data-grid-row>.cell.sticky-right{background:var(--tbw-color-panel-bg)}:host .sticky-left{box-shadow:1px 0 0 var(--tbw-color-border)}:host .sticky-right{box-shadow:-1px 0 0 var(--tbw-color-border)}.grid-container{position:relative;width:100%;height:100%}.grid-placeholder{padding:2rem;text-align:center;color:var(--tbw-color-fg);opacity:.6}:host{--tbw-shell-header-height: 44px;--tbw-shell-header-bg: var(--tbw-color-panel-bg);--tbw-shell-header-border: var(--tbw-color-border);--tbw-shell-title-font-size: 14px;--tbw-shell-title-font-weight: 600;--tbw-tool-panel-width: 280px;--tbw-tool-panel-bg: var(--tbw-color-panel-bg);--tbw-tool-panel-border: var(--tbw-color-border);--tbw-tool-panel-header-height: 40px;--tbw-tool-panel-transition: .2s ease-out;--tbw-toolbar-button-size: 32px;--tbw-toolbar-button-gap: 4px}:host .tbw-grid-root.has-shell{display:flex;flex-direction:column;height:100%}:host .tbw-shell-header{display:flex;align-items:center;gap:8px;min-height:var(--tbw-shell-header-height);padding:0 8px;background:var(--tbw-shell-header-bg);border-bottom:1px solid var(--tbw-shell-header-border);flex-shrink:0}:host .tbw-shell-title{font-size:var(--tbw-shell-title-font-size);font-weight:var(--tbw-shell-title-font-weight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tbw-shell-content{flex:1;display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden}:host .tbw-shell-toolbar{display:flex;align-items:center;gap:var(--tbw-toolbar-button-gap);flex-shrink:0}:host .tbw-toolbar-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--tbw-toolbar-button-size);height:var(--tbw-toolbar-button-size);padding:0;border:1px solid transparent;border-radius:var(--tbw-border-radius);background:transparent;color:var(--tbw-color-fg);cursor:pointer;font-size:16px;transition:background var(--tbw-transition-duration) var(--tbw-transition-ease),border-color var(--tbw-transition-duration) var(--tbw-transition-ease)}:host .tbw-toolbar-btn:hover{background:var(--tbw-color-row-hover)}:host .tbw-toolbar-btn:focus-visible{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}:host .tbw-toolbar-btn.active{background:var(--tbw-focus-background);border-color:var(--tbw-color-accent)}:host .tbw-toolbar-btn:disabled{opacity:.5;cursor:not-allowed}:host .tbw-toolbar-separator{width:1px;height:20px;background:var(--tbw-color-border);margin:0 4px}:host .tbw-shell-body{position:relative;display:flex;flex:1;min-height:0;overflow:visible}:host .tbw-grid-content{flex:1;min-width:0;min-height:0;display:flex;flex-direction:row;overflow:hidden}:host .tbw-scroll-area{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow-x:auto;overflow-y:hidden}:host .tbw-tool-panel{position:absolute;top:0;bottom:0;right:0;width:0;overflow:hidden;background:var(--tbw-tool-panel-bg);border-left:1px solid var(--tbw-tool-panel-border);transition:width var(--tbw-tool-panel-transition);display:flex;flex-direction:column;z-index:30;box-shadow:-2px 0 8px var(--tbw-color-shadow)}:host .tbw-tool-panel[data-position=left]{right:auto;left:0;border-left:none;border-right:1px solid var(--tbw-tool-panel-border);box-shadow:2px 0 8px var(--tbw-color-shadow)}:host .tbw-tool-panel.open{width:var(--tbw-tool-panel-width)}:host .tbw-tool-panel-resize{position:absolute;top:0;bottom:0;width:6px;cursor:col-resize;background:transparent;z-index:10;transition:background .15s ease}:host .tbw-tool-panel-resize[data-handle-position=left]{left:0}:host .tbw-tool-panel-resize[data-handle-position=right]{right:0}:host .tbw-tool-panel-resize:hover,:host .tbw-tool-panel-resize.resizing{background:var(--tbw-color-accent)}:host .tbw-tool-panel-header{display:flex;align-items:center;justify-content:space-between;min-height:var(--tbw-tool-panel-header-height);padding:0 12px;border-bottom:1px solid var(--tbw-tool-panel-border);flex-shrink:0}:host .tbw-tool-panel-title{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tbw-tool-panel-close{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:var(--tbw-border-radius);background:transparent;color:var(--tbw-color-fg-muted);cursor:pointer;font-size:14px}:host .tbw-tool-panel-close:hover{background:var(--tbw-color-row-hover);color:var(--tbw-color-fg)}:host .tbw-tool-panel-content{flex:1;overflow:auto}:host .tbw-accordion{display:flex;flex-direction:column;gap:0}:host .tbw-accordion-section{border-bottom:1px solid var(--tbw-tool-panel-border)}:host .tbw-accordion-section:last-child{border-bottom:none}:host .tbw-accordion-header{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border:none;background:transparent;color:var(--tbw-color-fg);font-size:13px;font-weight:600;text-align:left;cursor:pointer;user-select:none}:host .tbw-accordion-header:hover{background:var(--tbw-color-row-hover)}:host .tbw-accordion-section.single .tbw-accordion-header{cursor:default}:host .tbw-accordion-section.single .tbw-accordion-header:hover{background:transparent}:host .tbw-accordion-chevron{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:10px;color:var(--tbw-color-fg-muted);transition:transform .15s ease;flex-shrink:0}:host .tbw-accordion-section.expanded .tbw-accordion-chevron{transform:rotate(90deg)}:host .tbw-accordion-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:14px;flex-shrink:0}:host .tbw-accordion-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .tbw-accordion-content{display:none}:host .tbw-accordion-section.expanded .tbw-accordion-content{display:block}: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 .tbw-selection-summary{font-size:13px;color:var(--tbw-color-fg-muted);white-space:nowrap}";
 function pe(t) {
   const e = /* @__PURE__ */ new Map();
-  return t.sortState && e.set(t.sortState.field, {
-    direction: t.sortState.direction === 1 ? "asc" : "desc",
+  return t._sortState && e.set(t._sortState.field, {
+    direction: t._sortState.direction === 1 ? "asc" : "desc",
     priority: 0
   }), e;
 }
@@ -43,12 +43,12 @@ function be(t, e, o, i) {
   const r = e.columns.filter((l) => l.sort !== void 0).sort((l, a) => (l.sort?.priority ?? 0) - (a.sort?.priority ?? 0));
   if (r.length > 0) {
     const l = r[0];
-    l.sort && (t.sortState = {
+    l.sort && (t._sortState = {
       field: l.field,
       direction: l.sort.direction === "asc" ? 1 : -1
     });
   } else
-    t.sortState = null;
+    t._sortState = null;
   for (const l of i)
     if (l.applyColumnState)
       for (const a of e.columns)
@@ -95,7 +95,7 @@ function de(t, e) {
     n[s.field] = s.type || "string";
   }), { columns: i, typeMap: n };
 }
-const me = /{{\s*([^}]+)\s*}}/g, L = "__DG_EMPTY__", ve = /^[\w$. '?+\-*/%:()!<>=,&|]+$/, Ee = /__(proto|defineGetter|defineSetter)|constructor|window|globalThis|global|process|Function|import|eval|Reflect|Proxy|Error|arguments|document|location|cookie|localStorage|sessionStorage|indexedDB|fetch|XMLHttpRequest|WebSocket|Worker|SharedWorker|ServiceWorker|opener|parent|top|frames|self|this\b/, Ce = /* @__PURE__ */ new Set([
+const me = /{{\s*([^}]+)\s*}}/g, L = "__DG_EMPTY__", ve = /^[\w$. '?+\-*/%:()!<>=,&|]+$/, _e = /__(proto|defineGetter|defineSetter)|constructor|window|globalThis|global|process|Function|import|eval|Reflect|Proxy|Error|arguments|document|location|cookie|localStorage|sessionStorage|indexedDB|fetch|XMLHttpRequest|WebSocket|Worker|SharedWorker|ServiceWorker|opener|parent|top|frames|self|this\b/, Ee = /* @__PURE__ */ new Set([
   "script",
   "iframe",
   "object",
@@ -120,23 +120,23 @@ const me = /{{\s*([^}]+)\s*}}/g, L = "__DG_EMPTY__", ve = /^[\w$. '?+\-*/%:()!<>
   "plaintext",
   "xmp",
   "listing"
-]), J = /^on\w+$/i, ye = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "data", "srcdoc", "xlink:href", "poster", "srcset"]), Re = /^\s*(javascript|vbscript|data|blob):/i;
+]), Q = /^on\w+$/i, Ce = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "data", "srcdoc", "xlink:href", "poster", "srcset"]), ye = /^\s*(javascript|vbscript|data|blob):/i;
 function F(t) {
   if (!t || typeof t != "string") return "";
   if (t.indexOf("<") === -1) return t;
   const e = document.createElement("template");
-  return e.innerHTML = t, _e(e.content), e.innerHTML;
+  return e.innerHTML = t, Re(e.content), e.innerHTML;
 }
-function _e(t) {
+function Re(t) {
   const e = [], o = t.querySelectorAll("*");
   for (const i of o) {
     const n = i.tagName.toLowerCase();
-    if (Ce.has(n)) {
+    if (Ee.has(n)) {
       e.push(i);
       continue;
     }
     if ((n === "svg" || i.namespaceURI === "http://www.w3.org/2000/svg") && Array.from(i.attributes).some(
-      (l) => J.test(l.name) || l.name === "href" || l.name === "xlink:href"
+      (l) => Q.test(l.name) || l.name === "href" || l.name === "xlink:href"
     )) {
       e.push(i);
       continue;
@@ -144,11 +144,11 @@ function _e(t) {
     const s = [];
     for (const r of i.attributes) {
       const l = r.name.toLowerCase();
-      if (J.test(l)) {
+      if (Q.test(l)) {
         s.push(r.name);
         continue;
       }
-      if (ye.has(l) && Re.test(r.value)) {
+      if (Ce.has(l) && ye.test(r.value)) {
         s.push(r.name);
         continue;
       }
@@ -176,7 +176,7 @@ function Se(t, e) {
     const i = t.slice(4), n = e.row ? e.row[i] : void 0;
     return n == null ? L : String(n);
   }
-  if (t.length > 80 || !ve.test(t) || Ee.test(t)) return L;
+  if (t.length > 80 || !ve.test(t) || _e.test(t)) return L;
   const o = t.match(/\./g);
   if (o && o.length > 1) return L;
   try {
@@ -256,14 +256,14 @@ function Pe(t) {
 function te(t) {
   const e = t.effectiveConfig?.fitMode || t.fitMode || $.STRETCH;
   if (e !== $.STRETCH && e !== $.FIXED || t.__didInitialAutoSize || !t.isConnected) return;
-  const o = t.headerRowEl?.children || [];
+  const o = t._headerRowEl?.children || [];
   if (!o.length) return;
   let i = !1;
-  t.visibleColumns.forEach((n, s) => {
+  t._visibleColumns.forEach((n, s) => {
     if (n.width) return;
     const r = o[s];
     let l = r ? r.scrollWidth : 0;
-    for (const a of t.rowPool) {
+    for (const a of t._rowPool) {
       const d = a.children[s];
       if (d) {
         const f = d.scrollWidth;
@@ -271,14 +271,14 @@ function te(t) {
       }
     }
     l > 0 && (n.width = l + 2, n.__autoSized = !0, i = !0);
-  }), i && D(t), t.__didInitialAutoSize = !0;
+  }), i && N(t), t.__didInitialAutoSize = !0;
 }
-function D(t) {
-  (t.effectiveConfig?.fitMode || t.fitMode || $.STRETCH) === $.STRETCH ? t.gridTemplate = t.visibleColumns.map((o) => {
+function N(t) {
+  (t.effectiveConfig?.fitMode || t.fitMode || $.STRETCH) === $.STRETCH ? t._gridTemplate = t._visibleColumns.map((o) => {
     if (o.width) return `${o.width}px`;
     const i = o.minWidth;
     return i != null ? `minmax(${i}px, 1fr)` : "1fr";
-  }).join(" ").trim() : t.gridTemplate = t.visibleColumns.map((o) => o.width ? `${o.width}px` : "max-content").join(" "), t.style.setProperty("--tbw-column-template", t.gridTemplate);
+  }).join(" ").trim() : t._gridTemplate = t._visibleColumns.map((o) => o.width ? `${o.width}px` : "max-content").join(" "), t.style.setProperty("--tbw-column-template", t._gridTemplate);
 }
 function He(t) {
   switch (t.type) {
@@ -331,10 +331,10 @@ function He(t) {
       };
   }
 }
-function ke(t, e) {
-  if (t.dispatchKeyDown?.(e))
+function Oe(t, e) {
+  if (t._dispatchKeyDown?.(e))
     return;
-  const o = t._rows.length - 1, i = t.visibleColumns.length - 1, n = t.activeEditRows !== void 0 && t.activeEditRows !== -1, r = t.visibleColumns[t.focusCol]?.type, l = e.composedPath ? e.composedPath() : [], a = l && l.length ? l[0] : e.target, d = (f) => {
+  const o = t._rows.length - 1, i = t._visibleColumns.length - 1, n = t._activeEditRows !== void 0 && t._activeEditRows !== -1, r = t._visibleColumns[t._focusCol]?.type, l = e.composedPath ? e.composedPath() : [], a = l && l.length ? l[0] : e.target, d = (f) => {
     if (!f) return !1;
     const h = f.tagName;
     return !!(h === "INPUT" || h === "SELECT" || h === "TEXTAREA" || f.isContentEditable);
@@ -342,36 +342,36 @@ function ke(t, e) {
   if (!(d(a) && (e.key === "Home" || e.key === "End")) && !(d(a) && (e.key === "ArrowUp" || e.key === "ArrowDown") && a.tagName === "INPUT" && a.type === "number") && !(d(a) && (e.key === "ArrowLeft" || e.key === "ArrowRight")) && !(d(a) && (e.key === "Enter" || e.key === "Escape")) && !(n && (r === "select" || r === "typeahead") && (e.key === "ArrowDown" || e.key === "ArrowUp"))) {
     switch (e.key) {
       case "Tab": {
-        e.preventDefault(), !e.shiftKey ? t.focusCol < i ? t.focusCol += 1 : (typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t.focusRow < o && (t.focusRow += 1, t.focusCol = 0)) : t.focusCol > 0 ? t.focusCol -= 1 : t.focusRow > 0 && (typeof t.commitActiveRowEdit == "function" && t.activeEditRows === t.focusRow && t.commitActiveRowEdit(), t.focusRow -= 1, t.focusCol = i), z(t);
+        e.preventDefault(), !e.shiftKey ? t._focusCol < i ? t._focusCol += 1 : (typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t._focusRow < o && (t._focusRow += 1, t._focusCol = 0)) : t._focusCol > 0 ? t._focusCol -= 1 : t._focusRow > 0 && (typeof t.commitActiveRowEdit == "function" && t._activeEditRows === t._focusRow && t.commitActiveRowEdit(), t._focusRow -= 1, t._focusCol = i), z(t);
         return;
       }
       case "ArrowDown":
-        n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t.focusRow = Math.min(o, t.focusRow + 1), e.preventDefault();
+        n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t._focusRow = Math.min(o, t._focusRow + 1), e.preventDefault();
         break;
       case "ArrowUp":
-        n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t.focusRow = Math.max(0, t.focusRow - 1), e.preventDefault();
+        n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t._focusRow = Math.max(0, t._focusRow - 1), e.preventDefault();
         break;
       case "ArrowRight":
-        t.focusCol = Math.min(i, t.focusCol + 1), e.preventDefault();
+        t._focusCol = Math.min(i, t._focusCol + 1), e.preventDefault();
         break;
       case "ArrowLeft":
-        t.focusCol = Math.max(0, t.focusCol - 1), e.preventDefault();
+        t._focusCol = Math.max(0, t._focusCol - 1), e.preventDefault();
         break;
       case "Home":
-        (e.ctrlKey || e.metaKey) && (n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t.focusRow = 0), t.focusCol = 0, e.preventDefault(), z(t, { forceScrollLeft: !0 });
+        (e.ctrlKey || e.metaKey) && (n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t._focusRow = 0), t._focusCol = 0, e.preventDefault(), z(t, { forceScrollLeft: !0 });
         return;
       case "End":
-        (e.ctrlKey || e.metaKey) && (n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t.focusRow = o), t.focusCol = i, e.preventDefault(), z(t, { forceScrollRight: !0 });
+        (e.ctrlKey || e.metaKey) && (n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t._focusRow = o), t._focusCol = i, e.preventDefault(), z(t, { forceScrollRight: !0 });
         return;
       case "PageDown":
-        t.focusRow = Math.min(o, t.focusRow + 20), e.preventDefault();
+        t._focusRow = Math.min(o, t._focusRow + 20), e.preventDefault();
         break;
       case "PageUp":
-        t.focusRow = Math.max(0, t.focusRow - 20), e.preventDefault();
+        t._focusRow = Math.max(0, t._focusRow - 20), e.preventDefault();
         break;
       case "Enter":
-        return typeof t.beginBulkEdit == "function" ? t.beginBulkEdit(t.focusRow) : t.dispatchEvent(
-          new CustomEvent("activate-cell", { detail: { row: t.focusRow, col: t.focusCol } })
+        return typeof t.beginBulkEdit == "function" ? t.beginBulkEdit(t._focusRow) : t.dispatchEvent(
+          new CustomEvent("activate-cell", { detail: { row: t._focusRow, col: t._focusCol } })
         ), z(t);
       default:
         return;
@@ -380,19 +380,19 @@ function ke(t, e) {
   }
 }
 function z(t, e) {
-  if (t.virtualization?.enabled) {
-    const { rowHeight: r, container: l, viewportEl: a } = t.virtualization, d = l, f = a?.clientHeight ?? d?.clientHeight ?? 0;
+  if (t._virtualization?.enabled) {
+    const { rowHeight: r, container: l, viewportEl: a } = t._virtualization, d = l, f = a?.clientHeight ?? d?.clientHeight ?? 0;
     if (d && f > 0) {
-      const h = t.focusRow * r;
+      const h = t._focusRow * r;
       h < d.scrollTop ? d.scrollTop = h : h + r > d.scrollTop + f && (d.scrollTop = h - f + r);
     }
   }
-  t.activeEditRows !== void 0 && t.activeEditRows !== -1 || t.refreshVirtualWindow(!1), Array.from(t.bodyEl.querySelectorAll(".cell-focus")).forEach((r) => r.classList.remove("cell-focus")), Array.from(t.bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((r) => {
+  t._activeEditRows !== void 0 && t._activeEditRows !== -1 || t.refreshVirtualWindow(!1), Array.from(t._bodyEl.querySelectorAll(".cell-focus")).forEach((r) => r.classList.remove("cell-focus")), Array.from(t._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((r) => {
     r.setAttribute("aria-selected", "false");
   });
-  const i = t.focusRow, n = t.virtualization.start ?? 0, s = t.virtualization.end ?? t._rows.length;
+  const i = t._focusRow, n = t._virtualization.start ?? 0, s = t._virtualization.end ?? t._rows.length;
   if (i >= n && i < s) {
-    const r = t.bodyEl.querySelectorAll(".data-grid-row")[i - n], l = r?.children[t.focusCol];
+    const r = t._bodyEl.querySelectorAll(".data-grid-row")[i - n], l = r?.children[t._focusCol];
     if (l) {
       l.classList.add("cell-focus"), l.setAttribute("aria-selected", "true");
       const a = t.shadowRoot?.querySelector(".tbw-scroll-area");
@@ -402,13 +402,13 @@ function z(t, e) {
         else if (e?.forceScrollRight)
           a.scrollLeft = a.scrollWidth - a.clientWidth;
         else {
-          const d = t.getHorizontalScrollOffsets?.(r ?? void 0, l) ?? { left: 0, right: 0 };
+          const d = t._getHorizontalScrollOffsets?.(r ?? void 0, l) ?? { left: 0, right: 0 };
           if (!d.skipScroll) {
             const f = l.getBoundingClientRect(), h = a.getBoundingClientRect(), p = f.left - h.left + a.scrollLeft, c = p + f.width, u = a.scrollLeft + d.left, b = a.scrollLeft + a.clientWidth - d.right;
             p < u ? a.scrollLeft = p - d.left : c > b && (a.scrollLeft = c - a.clientWidth + d.right);
           }
         }
-      if (t.activeEditRows !== void 0 && t.activeEditRows !== -1 && l.classList.contains("editing")) {
+      if (t._activeEditRows !== void 0 && t._activeEditRows !== -1 && l.classList.contains("editing")) {
         const d = l.querySelector(
           'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])'
         );
@@ -427,82 +427,82 @@ function z(t, e) {
     }
   }
 }
-const Oe = "__cellDisplayCache", ze = "__cellCacheEpoch";
+const ke = "__cellDisplayCache", ze = "__cellCacheEpoch";
 function Y(t) {
-  t[Oe] = void 0, t[ze] = void 0, t.__hasSpecialColumns = void 0;
+  t[ke] = void 0, t[ze] = void 0, t.__hasSpecialColumns = void 0;
 }
 function Me(t, e, o, i, n) {
-  const s = Math.max(0, o - e), r = t.bodyEl, l = t.visibleColumns, a = l.length;
+  const s = Math.max(0, o - e), r = t._bodyEl, l = t._visibleColumns, a = l.length;
   let d = t.__cachedHeaderRowCount;
-  for (d === void 0 && (d = t.shadowRoot?.querySelector(".header-group-row") ? 2 : 1, t.__cachedHeaderRowCount = d); t.rowPool.length < s; ) {
+  for (d === void 0 && (d = t.shadowRoot?.querySelector(".header-group-row") ? 2 : 1, t.__cachedHeaderRowCount = d); t._rowPool.length < s; ) {
     const h = document.createElement("div");
-    h.className = "data-grid-row", h.setAttribute("role", "row"), h.addEventListener("click", (p) => oe(t, p, h, !1)), h.addEventListener("dblclick", (p) => oe(t, p, h, !0)), t.rowPool.push(h);
+    h.className = "data-grid-row", h.setAttribute("role", "row"), h.addEventListener("click", (p) => oe(t, p, h, !1)), h.addEventListener("dblclick", (p) => oe(t, p, h, !0)), t._rowPool.push(h);
   }
-  if (t.rowPool.length > s) {
-    for (let h = s; h < t.rowPool.length; h++) {
-      const p = t.rowPool[h];
+  if (t._rowPool.length > s) {
+    for (let h = s; h < t._rowPool.length; h++) {
+      const p = t._rowPool[h];
       p.parentNode === r && p.remove();
     }
-    t.rowPool.length = s;
+    t._rowPool.length = s;
   }
   const f = n && t.__hasRenderRowPlugins !== !1;
   for (let h = 0; h < s; h++) {
-    const p = e + h, c = t._rows[p], u = t.rowPool[h];
+    const p = e + h, c = t._rows[p], u = t._rowPool[h];
     if (u.setAttribute("aria-rowindex", String(p + d + 1)), f && n(c, u, p)) {
       u.__epoch = i, u.__rowDataRef = c, u.parentNode !== r && r.appendChild(u);
       continue;
     }
-    const b = u.__epoch, w = u.__rowDataRef, v = u.children.length, x = b === i && v === a, _ = w !== c;
+    const b = u.__epoch, w = u.__rowDataRef, v = u.children.length, x = b === i && v === a, R = w !== c;
     let g = !1;
-    if (x && _) {
-      for (let E = 0; E < a; E++)
-        if (l[E].externalView && !u.querySelector(`.cell[data-col="${E}"] [data-external-view]`)) {
+    if (x && R) {
+      for (let _ = 0; _ < a; _++)
+        if (l[_].externalView && !u.querySelector(`.cell[data-col="${_}"] [data-external-view]`)) {
           g = !0;
           break;
         }
     }
     if (!x || g) {
-      const E = u.querySelector(".cell.editing"), C = t.activeEditRows === p;
-      if (E && !C)
-        u.__isCustomRow && (u.className = "data-grid-row", u.setAttribute("role", "row"), u.__isCustomRow = !1), N(t, u, c, p), u.__epoch = i, u.__rowDataRef = c;
-      else if (E && C)
+      const _ = u.querySelector(".cell.editing"), E = t._activeEditRows === p;
+      if (_ && !E)
+        u.__isCustomRow && (u.className = "data-grid-row", u.setAttribute("role", "row"), u.__isCustomRow = !1), D(t, u, c, p), u.__epoch = i, u.__rowDataRef = c;
+      else if (_ && E)
         U(t, u, c, p), u.__rowDataRef = c;
-      else if (u.__isCustomRow && (u.className = "data-grid-row", u.setAttribute("role", "row"), u.__isCustomRow = !1), N(t, u, c, p), u.__epoch = i, u.__rowDataRef = c, C) {
+      else if (u.__isCustomRow && (u.className = "data-grid-row", u.setAttribute("role", "row"), u.__isCustomRow = !1), D(t, u, c, p), u.__epoch = i, u.__rowDataRef = c, E) {
         const S = u.children;
         for (let A = 0; A < S.length; A++) {
-          const P = t.visibleColumns[A];
-          P && P.editable && k(t, c, p, P, S[A]);
+          const P = t._visibleColumns[A];
+          P && P.editable && O(t, c, p, P, S[A]);
         }
       }
-    } else if (_) {
-      const E = u.querySelector(".cell.editing"), C = t.activeEditRows === p;
-      if (E && !C)
-        N(t, u, c, p), u.__epoch = i, u.__rowDataRef = c;
-      else if (U(t, u, c, p), u.__rowDataRef = c, C && !E) {
+    } else if (R) {
+      const _ = u.querySelector(".cell.editing"), E = t._activeEditRows === p;
+      if (_ && !E)
+        D(t, u, c, p), u.__epoch = i, u.__rowDataRef = c;
+      else if (U(t, u, c, p), u.__rowDataRef = c, E && !_) {
         const S = u.children;
         for (let A = 0; A < S.length; A++) {
-          const P = t.visibleColumns[A];
-          P && P.editable && k(t, c, p, P, S[A]);
+          const P = t._visibleColumns[A];
+          P && P.editable && O(t, c, p, P, S[A]);
         }
       }
     } else {
-      const E = u.querySelector(".cell.editing"), C = t.activeEditRows === p;
-      if (E && !C)
-        N(t, u, c, p), u.__epoch = i, u.__rowDataRef = c;
-      else if (U(t, u, c, p), C && !E) {
+      const _ = u.querySelector(".cell.editing"), E = t._activeEditRows === p;
+      if (_ && !E)
+        D(t, u, c, p), u.__epoch = i, u.__rowDataRef = c;
+      else if (U(t, u, c, p), E && !_) {
         const S = u.children;
         for (let A = 0; A < S.length; A++) {
-          const P = t.visibleColumns[A];
-          P && P.editable && k(t, c, p, P, S[A]);
+          const P = t._visibleColumns[A];
+          P && P.editable && O(t, c, p, P, S[A]);
         }
       }
     }
-    const m = t._changedRowIndices.has(p), y = u.classList.contains("changed");
-    m !== y && u.classList.toggle("changed", m), u.parentNode !== r && r.appendChild(u);
+    const m = t._changedRowIndices.has(p), C = u.classList.contains("changed");
+    m !== C && u.classList.toggle("changed", m), u.parentNode !== r && r.appendChild(u);
   }
 }
 function U(t, e, o, i) {
-  const n = e.children, s = t.visibleColumns, r = s.length, l = n.length, a = r < l ? r : l, d = t.focusRow, f = t.focusCol;
+  const n = e.children, s = t._visibleColumns, r = s.length, l = n.length, a = r < l ? r : l, d = t._focusRow, f = t._focusCol;
   let h = t.__hasSpecialColumns;
   if (h === void 0) {
     h = !1;
@@ -527,7 +527,7 @@ function U(t, e, o, i) {
   }
   for (let c = 0; c < a; c++)
     if (s[c].externalView && !n[c].querySelector("[data-external-view]")) {
-      N(t, e, o, i);
+      D(t, e, o, i);
       return;
     }
   for (let c = 0; c < a; c++) {
@@ -536,41 +536,41 @@ function U(t, e, o, i) {
     const w = d === i && f === c, v = b.classList.contains("cell-focus");
     if (w !== v && (b.classList.toggle("cell-focus", w), b.setAttribute("aria-selected", String(w))), b.classList.contains("editing")) continue;
     if (u.viewRenderer) {
-      const _ = o[u.field], g = u.viewRenderer({ row: o, value: _, field: u.field, column: u });
-      typeof g == "string" ? b.innerHTML = F(g) : g ? (b.innerHTML = "", b.appendChild(g)) : b.textContent = _ == null ? "" : String(_);
+      const R = o[u.field], g = u.viewRenderer({ row: o, value: R, field: u.field, column: u });
+      typeof g == "string" ? b.innerHTML = F(g) : g ? (b.innerHTML = "", b.appendChild(g)) : b.textContent = R == null ? "" : String(R);
       continue;
     }
     if (u.__viewTemplate || u.__compiledView || u.externalView)
       continue;
-    const R = o[u.field];
+    const y = o[u.field];
     let x;
     if (u.format)
       try {
-        const _ = u.format(R, o);
-        x = _ == null ? "" : String(_);
-      } catch {
+        const R = u.format(y, o);
         x = R == null ? "" : String(R);
+      } catch {
+        x = y == null ? "" : String(y);
       }
     else if (u.type === "date") {
-      if (R == null || R === "")
+      if (y == null || y === "")
         x = "";
-      else if (R instanceof Date)
-        x = isNaN(R.getTime()) ? "" : R.toLocaleDateString();
+      else if (y instanceof Date)
+        x = isNaN(y.getTime()) ? "" : y.toLocaleDateString();
       else {
-        const _ = new Date(R);
-        x = isNaN(_.getTime()) ? "" : _.toLocaleDateString();
+        const R = new Date(y);
+        x = isNaN(R.getTime()) ? "" : R.toLocaleDateString();
       }
       b.textContent = x;
     } else if (u.type === "boolean") {
-      const _ = !!R;
-      b.innerHTML = `<span role="checkbox" aria-checked="${_}" aria-label="${_}">${_ ? "&#x1F5F9;" : "&#9744;"}</span>`;
+      const R = !!y;
+      b.innerHTML = `<span role="checkbox" aria-checked="${R}" aria-label="${R}">${R ? "&#x1F5F9;" : "&#9744;"}</span>`;
     } else
-      x = R == null ? "" : String(R), b.textContent = x;
+      x = y == null ? "" : String(y), b.textContent = x;
   }
 }
-function N(t, e, o, i) {
+function D(t, e, o, i) {
   e.innerHTML = "";
-  const n = t.visibleColumns, s = n.length, r = t.focusRow, l = t.focusCol, a = t.effectiveConfig?.editOn || t.editOn, d = t, f = document.createDocumentFragment();
+  const n = t._visibleColumns, s = n.length, r = t._focusRow, l = t._focusCol, a = t.effectiveConfig?.editOn || t.editOn, d = t, f = document.createDocumentFragment();
   for (let h = 0; h < s; h++) {
     const p = n[h], c = document.createElement("div");
     c.className = "cell", j(c, "cell"), c.setAttribute("role", "gridcell"), c.setAttribute("aria-colindex", String(h + 1)), c.setAttribute("data-col", String(h)), c.setAttribute("data-row", String(i)), p.type, p.type && c.setAttribute("data-type", p.type);
@@ -581,18 +581,18 @@ function N(t, e, o, i) {
         u = b(u, o);
       } catch {
       }
-    const w = p.__compiledView, v = p.__viewTemplate, R = p.viewRenderer, x = p.externalView;
-    let _ = !1;
-    if (R) {
-      const g = R({ row: o, value: u, field: p.field, column: p });
-      typeof g == "string" ? (c.innerHTML = F(g), _ = !0) : g ? c.appendChild(g) : c.textContent = u == null ? "" : String(u);
+    const w = p.__compiledView, v = p.__viewTemplate, y = p.viewRenderer, x = p.externalView;
+    let R = !1;
+    if (y) {
+      const g = y({ row: o, value: u, field: p.field, column: p });
+      typeof g == "string" ? (c.innerHTML = F(g), R = !0) : g ? c.appendChild(g) : c.textContent = u == null ? "" : String(u);
     } else if (x) {
       const g = x, m = document.createElement("div");
       m.setAttribute("data-external-view", ""), m.setAttribute("data-field", p.field), c.appendChild(m);
-      const y = { row: o, value: u, field: p.field, column: p };
+      const C = { row: o, value: u, field: p.field, column: p };
       if (g.mount)
         try {
-          g.mount({ placeholder: m, context: y, spec: g });
+          g.mount({ placeholder: m, context: C, spec: g });
         } catch {
         }
       else
@@ -602,7 +602,7 @@ function N(t, e, o, i) {
               new CustomEvent("mount-external-view", {
                 bubbles: !0,
                 composed: !0,
-                detail: { placeholder: m, spec: g, context: y }
+                detail: { placeholder: m, spec: g, context: C }
               })
             );
           } catch {
@@ -611,10 +611,10 @@ function N(t, e, o, i) {
       m.setAttribute("data-mounted", "");
     } else if (w) {
       const g = w({ row: o, value: u, field: p.field, column: p }), m = w.__blocked;
-      c.innerHTML = m ? "" : F(g), _ = !0, m && (c.textContent = "", c.setAttribute("data-blocked-template", ""));
+      c.innerHTML = m ? "" : F(g), R = !0, m && (c.textContent = "", c.setAttribute("data-blocked-template", ""));
     } else if (v) {
       const g = v.innerHTML;
-      /Reflect\.|\bProxy\b|ownKeys\(/.test(g) ? (c.textContent = "", c.setAttribute("data-blocked-template", "")) : (c.innerHTML = F(ue(g, { row: o, value: u })), _ = !0);
+      /Reflect\.|\bProxy\b|ownKeys\(/.test(g) ? (c.textContent = "", c.setAttribute("data-blocked-template", "")) : (c.innerHTML = F(ue(g, { row: o, value: u })), R = !0);
     } else if (p.type === "date")
       if (u == null || u === "")
         c.textContent = "";
@@ -632,7 +632,7 @@ function N(t, e, o, i) {
       c.innerHTML = `<span role="checkbox" aria-checked="${g}" aria-label="${g}">${g ? "&#x1F5F9;" : "&#9744;"}</span>`;
     } else
       c.textContent = u == null ? "" : String(u);
-    if (_) {
+    if (R) {
       Ae(c);
       const g = c.textContent || "";
       /Proxy|Reflect\.ownKeys/.test(g) && (c.textContent = g.replace(/Proxy|Reflect\.ownKeys/g, "").trim(), /Proxy|Reflect\.ownKeys/.test(c.textContent || "") && (c.textContent = ""));
@@ -640,36 +640,36 @@ function N(t, e, o, i) {
     c.hasAttribute("data-blocked-template") && (c.textContent || "").trim().length && (c.textContent = ""), p.editable ? (c.tabIndex = 0, c.addEventListener("mousedown", () => {
       if (c.classList.contains("editing")) return;
       const g = Number(c.getAttribute("data-row")), m = Number(c.getAttribute("data-col"));
-      isNaN(g) || isNaN(m) || (t.focusRow = g, t.focusCol = m, z(t));
+      isNaN(g) || isNaN(m) || (t._focusRow = g, t._focusCol = m, z(t));
     }), a === "click" ? c.addEventListener("click", (g) => {
       if (c.classList.contains("editing")) return;
       g.stopPropagation();
-      const m = Number(c.getAttribute("data-row")), y = Number(c.getAttribute("data-col"));
-      if (isNaN(m) || isNaN(y)) return;
-      const E = t._rows[m], C = t.visibleColumns[y];
-      !E || !C || (t.focusRow = m, t.focusCol = y, k(t, E, m, C, c));
+      const m = Number(c.getAttribute("data-row")), C = Number(c.getAttribute("data-col"));
+      if (isNaN(m) || isNaN(C)) return;
+      const _ = t._rows[m], E = t._visibleColumns[C];
+      !_ || !E || (t._focusRow = m, t._focusCol = C, O(t, _, m, E, c));
     }) : c.addEventListener("dblclick", (g) => {
       g.stopPropagation();
       const m = Number(c.getAttribute("data-row"));
       if (isNaN(m)) return;
-      const y = t._rows[m];
-      if (!y) return;
-      B(t, m, y);
-      const E = t.findRenderedRowElement?.(m);
-      if (E) {
-        const C = E.children;
-        for (let S = 0; S < C.length; S++) {
-          const A = t.visibleColumns[S];
-          A && A.editable && k(t, y, m, A, C[S]);
+      const C = t._rows[m];
+      if (!C) return;
+      B(t, m, C);
+      const _ = t.findRenderedRowElement?.(m);
+      if (_) {
+        const E = _.children;
+        for (let S = 0; S < E.length; S++) {
+          const A = t._visibleColumns[S];
+          A && A.editable && O(t, C, m, A, E[S]);
         }
       }
     }), c.addEventListener("keydown", (g) => {
-      const m = Number(c.getAttribute("data-row")), y = Number(c.getAttribute("data-col"));
-      if (isNaN(m) || isNaN(y)) return;
-      const E = t._rows[m], C = t.visibleColumns[y];
-      if (!(!E || !C)) {
-        if ((C.type === "select" || C.type === "typeahead") && !c.classList.contains("editing") && g.key === "Enter") {
-          g.preventDefault(), t.activeEditRows !== m && B(t, m, E), k(t, E, m, C, c), setTimeout(() => {
+      const m = Number(c.getAttribute("data-row")), C = Number(c.getAttribute("data-col"));
+      if (isNaN(m) || isNaN(C)) return;
+      const _ = t._rows[m], E = t._visibleColumns[C];
+      if (!(!_ || !E)) {
+        if ((E.type === "select" || E.type === "typeahead") && !c.classList.contains("editing") && g.key === "Enter") {
+          g.preventDefault(), t._activeEditRows !== m && B(t, m, _), O(t, _, m, E, c), setTimeout(() => {
             const S = c.querySelector("select");
             try {
               S?.showPicker?.();
@@ -679,18 +679,18 @@ function N(t, e, o, i) {
           }, 0);
           return;
         }
-        if (C.type === "boolean" && g.key === " " && !c.classList.contains("editing")) {
-          g.preventDefault(), t.activeEditRows !== m && B(t, m, E);
-          const S = !E[C.field];
-          Q(t, m, C, S, E), c.innerHTML = `<span role="checkbox" aria-checked="${S}" aria-label="${S}">${S ? "&#x1F5F9;" : "&#9744;"}</span>`;
+        if (E.type === "boolean" && g.key === " " && !c.classList.contains("editing")) {
+          g.preventDefault(), t._activeEditRows !== m && B(t, m, _);
+          const S = !_[E.field];
+          J(t, m, E, S, _), c.innerHTML = `<span role="checkbox" aria-checked="${S}" aria-label="${S}">${S ? "&#x1F5F9;" : "&#9744;"}</span>`;
           return;
         }
         if (g.key === "Enter" && !c.classList.contains("editing")) {
-          g.preventDefault(), g.stopPropagation(), t.focusRow = m, t.focusCol = y, typeof t.beginBulkEdit == "function" ? t.beginBulkEdit(m) : k(t, E, m, C, c);
+          g.preventDefault(), g.stopPropagation(), t._focusRow = m, t._focusCol = C, typeof t.beginBulkEdit == "function" ? t.beginBulkEdit(m) : O(t, _, m, E, c);
           return;
         }
         if (g.key === "F2" && !c.classList.contains("editing")) {
-          g.preventDefault(), k(t, E, m, C, c);
+          g.preventDefault(), O(t, _, m, E, c);
           return;
         }
       }
@@ -711,9 +711,9 @@ function oe(t, e, o, i) {
     if (l.classList.contains("editing")) return;
     const d = Number(l.getAttribute("data-col"));
     if (!isNaN(d)) {
-      if (t.dispatchCellClick?.(e, s, d, l))
+      if (t._dispatchCellClick?.(e, s, d, l))
         return;
-      t.focusRow = s, t.focusCol = d, z(t);
+      t._focusRow = s, t._focusCol = d, z(t);
     }
   }
   if (o.querySelector(".cell.editing")) {
@@ -725,10 +725,10 @@ function oe(t, e, o, i) {
   if (a === "click" || a === "doubleClick" && i) B(t, s, r);
   else return;
   Array.from(o.children).forEach((d, f) => {
-    const h = t.visibleColumns[f];
-    h && h.editable && k(t, r, s, h, d);
+    const h = t._visibleColumns[f];
+    h && h.editable && O(t, r, s, h, d);
   }), l && queueMicrotask(() => {
-    const d = o.querySelector(`.cell[data-col="${t.focusCol}"]`);
+    const d = o.querySelector(`.cell[data-col="${t._focusCol}"]`);
     if (d?.classList.contains("editing")) {
       const f = d.querySelector(
         'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])'
@@ -744,20 +744,20 @@ function Z(t) {
   return !(t === "__proto__" || t === "constructor" || t === "prototype");
 }
 function B(t, e, o) {
-  t.activeEditRows !== e && (t.rowEditSnapshots.set(e, { ...o }), t.activeEditRows = e);
+  t._activeEditRows !== e && (t._rowEditSnapshots.set(e, { ...o }), t._activeEditRows = e);
 }
 function M(t, e, o) {
-  if (t.activeEditRows !== e) return;
-  const i = t.rowEditSnapshots.get(e), n = t._rows[e], s = t.findRenderedRowElement?.(e);
+  if (t._activeEditRows !== e) return;
+  const i = t._rowEditSnapshots.get(e), n = t._rows[e], s = t.findRenderedRowElement?.(e);
   if (!o && s && n && s.querySelectorAll(".cell.editing").forEach((l) => {
     const a = Number(l.getAttribute("data-col"));
     if (isNaN(a)) return;
-    const d = t.visibleColumns[a];
+    const d = t._visibleColumns[a];
     if (!d) return;
     const f = l.querySelector("input,textarea,select");
     if (f) {
       let h;
-      f instanceof HTMLInputElement && f.type === "checkbox" ? h = f.checked : (h = f.value, d.type === "number" && h !== "" && (h = Number(h))), n[d.field] !== h && Q(t, e, d, h, n);
+      f instanceof HTMLInputElement && f.type === "checkbox" ? h = f.checked : (h = f.value, d.type === "number" && h !== "" && (h = Number(h))), n[d.field] !== h && J(t, e, d, h, n);
     }
   }), o && i && n)
     Object.keys(i).forEach((r) => n[r] = i[r]), t._changedRowIndices.delete(e), Y(t);
@@ -775,11 +775,13 @@ function M(t, e, o) {
       })
     );
   }
-  t.rowEditSnapshots.delete(e), t.activeEditRows = -1, s && (N(t, s, t._rows[e], e), t._changedRowIndices.has(e) ? s.classList.add("changed") : s.classList.remove("changed")), queueMicrotask(() => {
+  t._rowEditSnapshots.delete(e), t._activeEditRows = -1, s && (D(t, s, t._rows[e], e), t._changedRowIndices.has(e) ? s.classList.add("changed") : s.classList.remove("changed")), queueMicrotask(() => {
     try {
-      const r = t.focusRow, l = t.focusCol, a = t.findRenderedRowElement?.(r);
+      const r = t._focusRow, l = t._focusCol, a = t.findRenderedRowElement?.(r);
       if (a) {
-        Array.from(t.bodyEl.querySelectorAll(".cell-focus")).forEach((f) => f.classList.remove("cell-focus"));
+        Array.from(t._bodyEl.querySelectorAll(".cell-focus")).forEach(
+          (f) => f.classList.remove("cell-focus")
+        );
         const d = a.querySelector(`.cell[data-row="${r}"][data-col="${l}"]`);
         d && (d.classList.add("cell-focus"), d.setAttribute("aria-selected", "true"), d.hasAttribute("tabindex") || d.setAttribute("tabindex", "-1"), d.focus({ preventScroll: !0 }));
       }
@@ -787,7 +789,7 @@ function M(t, e, o) {
     }
   });
 }
-function Q(t, e, o, i, n) {
+function J(t, e, o, i, n) {
   const s = o.field;
   if (!Z(s) || n[s] === i) return;
   n[s] = i;
@@ -808,13 +810,13 @@ function Q(t, e, o, i, n) {
     })
   );
 }
-function k(t, e, o, i, n) {
-  if (!i.editable || (t.activeEditRows !== o && B(t, o, e), n.classList.contains("editing"))) return;
+function O(t, e, o, i, n) {
+  if (!i.editable || (t._activeEditRows !== o && B(t, o, e), n.classList.contains("editing"))) return;
   const s = Z(i.field) ? e[i.field] : void 0;
   n.classList.add("editing");
   let r = !1;
   const l = (c) => {
-    r || t.activeEditRows === -1 || Q(t, o, i, c, e);
+    r || t._activeEditRows === -1 || J(t, o, i, c, e);
   }, a = () => {
     r = !0, e[i.field] = Z(i.field) ? s : void 0;
     const c = n.querySelector("input,textarea,select");
@@ -827,8 +829,8 @@ function k(t, e, o, i, n) {
   if (h === "template" && f) {
     const c = f.cloneNode(!0), u = i.__compiledEditor;
     u ? c.innerHTML = u({ row: e, value: s, field: i.field, column: i }) : c.querySelectorAll("*").forEach((w) => {
-      w.childNodes.length === 1 && w.firstChild?.nodeType === Node.TEXT_NODE && (w.textContent = w.textContent?.replace(/{{\s*value\s*}}/g, s == null ? "" : String(s)).replace(/{{\s*row\.([a-zA-Z0-9_]+)\s*}}/g, (v, R) => {
-        const x = e[R];
+      w.childNodes.length === 1 && w.firstChild?.nodeType === Node.TEXT_NODE && (w.textContent = w.textContent?.replace(/{{\s*value\s*}}/g, s == null ? "" : String(s)).replace(/{{\s*row\.([a-zA-Z0-9_]+)\s*}}/g, (v, y) => {
+        const x = e[y];
         return x == null ? "" : String(x);
       }) || "");
     });
@@ -841,8 +843,8 @@ function k(t, e, o, i, n) {
       }), b.addEventListener("keydown", (v) => {
         if (v.key === "Enter") {
           v.stopPropagation(), v.preventDefault(), r = !0;
-          const R = w && b instanceof HTMLInputElement && b.type === "checkbox" ? b.checked : b.value;
-          l(R), M(t, o, !1);
+          const y = w && b instanceof HTMLInputElement && b.type === "checkbox" ? b.checked : b.value;
+          l(y), M(t, o, !1);
         }
         v.key === "Escape" && (v.stopPropagation(), v.preventDefault(), a(), M(t, o, !0));
       }), w && b instanceof HTMLInputElement && b.type === "checkbox" && b.addEventListener("change", () => {
@@ -873,26 +875,26 @@ function k(t, e, o, i, n) {
   }
 }
 function ne(t, e) {
-  !t.sortState || t.sortState.field !== e.field ? (t.sortState || (t.__originalOrder = t._rows.slice()), ie(t, e, 1)) : t.sortState.direction === 1 ? ie(t, e, -1) : (t.sortState = null, t.__rowRenderEpoch++, t.rowPool.forEach((i) => i.__epoch = -1), t._rows = t.__originalOrder.slice(), q(t), t.headerRowEl?.querySelectorAll('[role="columnheader"].sortable')?.forEach((i) => {
-    i.getAttribute("aria-sort") ? (i.getAttribute("aria-sort") === "ascending" || i.getAttribute("aria-sort") === "descending") && (t.sortState || i.setAttribute("aria-sort", "none")) : i.setAttribute("aria-sort", "none");
+  !t._sortState || t._sortState.field !== e.field ? (t._sortState || (t.__originalOrder = t._rows.slice()), ie(t, e, 1)) : t._sortState.direction === 1 ? ie(t, e, -1) : (t._sortState = null, t.__rowRenderEpoch++, t._rowPool.forEach((i) => i.__epoch = -1), t._rows = t.__originalOrder.slice(), q(t), t._headerRowEl?.querySelectorAll('[role="columnheader"].sortable')?.forEach((i) => {
+    i.getAttribute("aria-sort") ? (i.getAttribute("aria-sort") === "ascending" || i.getAttribute("aria-sort") === "descending") && (t._sortState || i.setAttribute("aria-sort", "none")) : i.setAttribute("aria-sort", "none");
   }), t.refreshVirtualWindow(!0), t.dispatchEvent(
     new CustomEvent("sort-change", { detail: { field: e.field, direction: 0 } })
   ), t.requestStateChange?.());
 }
 function ie(t, e, o) {
-  t.sortState = { field: e.field, direction: o };
+  t._sortState = { field: e.field, direction: o };
   const i = e.sortComparator || ((n, s) => n == null && s == null ? 0 : n == null ? -1 : s == null || n > s ? 1 : n < s ? -1 : 0);
-  t._rows.sort((n, s) => i(n[e.field], s[e.field], n, s) * o), t.__rowRenderEpoch++, t.rowPool.forEach((n) => n.__epoch = -1), q(t), t.refreshVirtualWindow(!0), t.dispatchEvent(
+  t._rows.sort((n, s) => i(n[e.field], s[e.field], n, s) * o), t.__rowRenderEpoch++, t._rowPool.forEach((n) => n.__epoch = -1), q(t), t.refreshVirtualWindow(!0), t.dispatchEvent(
     new CustomEvent("sort-change", { detail: { field: e.field, direction: o } })
   ), t.requestStateChange?.();
 }
-function De(t, e) {
+function Ne(t, e) {
   typeof e == "string" ? t.textContent = e : e instanceof HTMLElement && (t.innerHTML = "", t.appendChild(e.cloneNode(!0)));
 }
 function q(t) {
-  t.headerRowEl = t.findHeaderRow();
-  const e = t.headerRowEl;
-  e.innerHTML = "", t.visibleColumns.forEach((o, i) => {
+  t._headerRowEl = t.findHeaderRow();
+  const e = t._headerRowEl;
+  e.innerHTML = "", t._visibleColumns.forEach((o, i) => {
     const n = document.createElement("div");
     n.className = "cell", j(n, "header-cell"), n.setAttribute("role", "columnheader"), n.setAttribute("aria-colindex", String(i + 1)), n.setAttribute("data-field", o.field), n.setAttribute("data-col", String(i));
     const s = o.__headerTemplate;
@@ -905,12 +907,12 @@ function q(t) {
       n.classList.add("sortable"), n.tabIndex = 0;
       const r = document.createElement("span");
       j(r, "sort-indicator"), r.style.opacity = "0.6";
-      const l = t.sortState?.field === o.field ? t.sortState.direction : 0, a = { ...H, ...t.icons }, d = l === 1 ? a.sortAsc : l === -1 ? a.sortDesc : a.sortNone;
-      De(r, d), n.appendChild(r), n.setAttribute("aria-sort", l === 0 ? "none" : l === 1 ? "ascending" : "descending"), n.addEventListener("click", (f) => {
-        t.resizeController?.isResizing || t.dispatchHeaderClick?.(f, i, n) || ne(t, o);
+      const l = t._sortState?.field === o.field ? t._sortState.direction : 0, a = { ...H, ...t.icons }, d = l === 1 ? a.sortAsc : l === -1 ? a.sortDesc : a.sortNone;
+      Ne(r, d), n.appendChild(r), n.setAttribute("aria-sort", l === 0 ? "none" : l === 1 ? "ascending" : "descending"), n.addEventListener("click", (f) => {
+        t._resizeController?.isResizing || t._dispatchHeaderClick?.(f, i, n) || ne(t, o);
       }), n.addEventListener("keydown", (f) => {
         if (f.key === "Enter" || f.key === " ") {
-          if (f.preventDefault(), t.dispatchHeaderClick?.(f, i, n)) return;
+          if (f.preventDefault(), t._dispatchHeaderClick?.(f, i, n)) return;
           ne(t, o);
         }
       });
@@ -919,7 +921,7 @@ function q(t) {
       n.style.position = "relative";
       const r = document.createElement("div");
       r.className = "resize-handle", r.setAttribute("aria-hidden", "true"), r.addEventListener("mousedown", (l) => {
-        l.stopPropagation(), l.preventDefault(), t.resizeController.start(l, i, n);
+        l.stopPropagation(), l.preventDefault(), t._resizeController.start(l, i, n);
       }), n.appendChild(r);
     }
     e.appendChild(n);
@@ -927,11 +929,11 @@ function q(t) {
     o.getAttribute("aria-sort") || o.setAttribute("aria-sort", "none");
   }), e.children.length > 0 ? (e.setAttribute("role", "row"), e.setAttribute("aria-rowindex", "1")) : (e.removeAttribute("role"), e.removeAttribute("aria-rowindex"));
 }
-function Ne(t) {
+function De(t) {
   let e = null, o = null, i = null, n = null;
   const s = (a) => {
     if (!e) return;
-    const d = a.clientX - e.startX, f = Math.max(40, e.startWidth + d), h = t.visibleColumns[e.colIndex];
+    const d = a.clientX - e.startX, f = Math.max(40, e.startWidth + d), h = t._visibleColumns[e.colIndex];
     h.width = f, h.__userResized = !0, h.__renderedWidth = f, o == null && (o = requestAnimationFrame(() => {
       o = null, t.updateTemplate?.();
     })), t.dispatchEvent(
@@ -1668,7 +1670,11 @@ class Ye {
 class W extends HTMLElement {
   // TODO: Rename to 'data-grid' when migration is complete
   static tagName = "tbw-grid";
-  static version = "0.2.3";
+  static version = "0.2.4";
+  // ---------------- Observed Attributes ----------------
+  static get observedAttributes() {
+    return ["rows", "columns", "grid-config", "fit-mode", "edit-on"];
+  }
   #o;
   #A = !1;
   // ---------------- Ready Promise ----------------
@@ -1695,11 +1701,11 @@ class W extends HTMLElement {
   // Cached flag for plugin scroll handlers
   #T;
   // Cached hook to avoid closures
-  #E = !1;
+  #_ = !1;
+  #E = null;
   #C = null;
   #y = null;
   #R = null;
-  #_ = null;
   #a;
   #b;
   // ---------------- Plugin System ----------------
@@ -1729,44 +1735,45 @@ class W extends HTMLElement {
   }
   // visibleColumns returns only visible columns for rendering
   // This is what header/row rendering should use
-  get visibleColumns() {
+  get _visibleColumns() {
     return this._columns.filter((e) => !e.hidden);
   }
   // #endregion
-  // #region Runtime State
-  // User-driven state changes at runtime (sort, etc.)
-  // Visibility is stored in effectiveConfig.columns[].hidden
-  rowPool = [];
-  __rowRenderEpoch = 0;
-  activeEditRows = -1;
-  resizeController;
-  __didInitialAutoSize = !1;
-  __lightDomColumnsCache;
-  __originalColumnNodes;
-  headerRowEl;
-  bodyEl;
-  virtualization = {
+  // #region Runtime State (Plugin-accessible)
+  // DOM references
+  _headerRowEl;
+  _bodyEl;
+  _rowPool = [];
+  _resizeController;
+  // Virtualization & scroll state
+  _virtualization = {
     enabled: !0,
     rowHeight: 28,
-    // Initial state - will recalculate after first render
     bypassThreshold: 24,
-    // Skip virtualization if <= this many rows (saves overhead)
     start: 0,
     end: 0,
     container: null,
-    // Faux scrollbar element
     viewportEl: null,
-    // Rows viewport for measuring visible height
     totalHeightEl: null
-    // Spacer for virtual height
   };
-  sortState = null;
-  __originalOrder = [];
-  focusRow = 0;
-  focusCol = 0;
-  gridTemplate = "";
-  rowEditSnapshots = /* @__PURE__ */ new Map();
+  // Focus & navigation
+  _focusRow = 0;
+  _focusCol = 0;
+  // Sort state
+  _sortState = null;
+  // Edit state
+  _activeEditRows = -1;
+  _rowEditSnapshots = /* @__PURE__ */ new Map();
   _changedRowIndices = /* @__PURE__ */ new Set();
+  // Layout
+  _gridTemplate = "";
+  // #endregion
+  // #region Implementation Details (Internal only)
+  __rowRenderEpoch = 0;
+  __didInitialAutoSize = !1;
+  __lightDomColumnsCache;
+  __originalColumnNodes;
+  __originalOrder = [];
   // #endregion
   // ---------------- Public API Props (getters/setters) ----------------
   // Getters return the EFFECTIVE value (after merging), not the raw input.
@@ -1814,9 +1821,12 @@ class W extends HTMLElement {
     const o = this.#g;
     this.#g = e, o !== e && this.#X();
   }
-  // Effective config accessor for internal modules and plugins
-  // Returns the merged config (single source of truth) before plugin processing
-  // Use this when you need the raw merged config (e.g., for column definitions including hidden)
+  /**
+   * Effective config accessor for internal modules and plugins.
+   * Returns the merged config (single source of truth) before plugin processing.
+   * Use this when you need the raw merged config (e.g., for column definitions including hidden).
+   * @internal Plugin API
+   */
   get effectiveConfig() {
     return this.#t;
   }
@@ -1824,6 +1834,7 @@ class W extends HTMLElement {
    * Get the disconnect signal for event listener cleanup.
    * This signal is aborted when the grid disconnects from the DOM.
    * Plugins and internal code can use this for automatic listener cleanup.
+   * @internal Plugin API
    * @example
    * element.addEventListener('click', handler, { signal: this.grid.disconnectSignal });
    */
@@ -1850,6 +1861,7 @@ class W extends HTMLElement {
   /**
    * Get a plugin instance by its class.
    * Used by plugins for inter-plugin communication.
+   * @internal Plugin API
    */
   getPlugin(e) {
     return this.#e?.getPlugin(e);
@@ -1857,6 +1869,7 @@ class W extends HTMLElement {
   /**
    * Get a plugin instance by its name.
    * Used for loose coupling between plugins (avoids static imports).
+   * @internal Plugin API
    */
   getPluginByName(e) {
     return this.#e?.getPluginByName(e);
@@ -1865,14 +1878,16 @@ class W extends HTMLElement {
    * Request a full re-render of the grid.
    * Called by plugins when they need the grid to update.
    * Note: This does NOT reset plugin state - just re-processes rows/columns and renders.
+   * @internal Plugin API
    */
   requestRender() {
-    this.#x(), this.#H(), q(this), D(this), this.refreshVirtualWindow(!0);
+    this.#x(), this.#H(), q(this), N(this), this.refreshVirtualWindow(!0);
   }
   /**
    * Request a lightweight style update without rebuilding DOM.
    * Called by plugins when they only need to update CSS classes/styles.
    * This runs all plugin afterRender hooks without rebuilding row/column DOM.
+   * @internal Plugin API
    */
   requestAfterRender() {
     this.#e?.afterRender();
@@ -1881,7 +1896,7 @@ class W extends HTMLElement {
    * Initialize plugin system with instances from config.
    * Plugins are class instances passed in gridConfig.plugins[].
    */
-  #D() {
+  #N() {
     this.#e = new Ye(this);
     const e = this.#t?.plugins, o = Array.isArray(e) ? e : [];
     this.#e.attachAll(o);
@@ -1890,7 +1905,7 @@ class W extends HTMLElement {
    * Inject all plugin styles into the shadow DOM.
    * Must be called after #render() since innerHTML wipes existing content.
    */
-  #N() {
+  #D() {
     const e = this.#e?.getAllStyles() ?? "";
     if (e) {
       const o = document.createElement("style");
@@ -1902,7 +1917,7 @@ class W extends HTMLElement {
    * With class-based plugins, we need to detach old and attach new.
    */
   #q() {
-    this.#e && this.#e.detachAll(), this.#D(), this.#N(), this.#v = this.#e?.getAll().some((e) => e.onScroll) ?? !1;
+    this.#e && this.#e.detachAll(), this.#N(), this.#D(), this.#v = this.#e?.getAll().some((e) => e.onScroll) ?? !1;
   }
   /**
    * Clean up plugin states when grid disconnects.
@@ -1925,42 +1940,66 @@ class W extends HTMLElement {
   }
   // ---------------- Lifecycle ----------------
   connectedCallback() {
-    this.hasAttribute("tabindex") || (this.tabIndex = 0), this.hasAttribute("version") || this.setAttribute("version", W.version), this._rows = Array.isArray(this.#r) ? [...this.#r] : [], this.#a?.abort(), this.#a = new AbortController(), this.#u(), this.#D(), this.#G(), this.#A || (this.#$(), this.#N(), this.#A = !0), this.#B();
+    this.hasAttribute("tabindex") || (this.tabIndex = 0), this.hasAttribute("version") || this.setAttribute("version", W.version), this._rows = Array.isArray(this.#r) ? [...this.#r] : [], this.#a?.abort(), this.#a = new AbortController(), this.#u(), this.#N(), this.#G(), this.#A || (this.#$(), this.#D(), this.#A = !0), this.#B();
   }
   disconnectedCallback() {
-    this.#V(), Xe(this.#i), this.#n.setInitialized(!1), this.#S?.(), this.#S = void 0, this.#a && (this.#a.abort(), this.#a = void 0), this.resizeController && this.resizeController.dispose(), this.#b && (this.#b.disconnect(), this.#b = void 0), this.#h = !1;
+    this.#V(), Xe(this.#i), this.#n.setInitialized(!1), this.#S?.(), this.#S = void 0, this.#a && (this.#a.abort(), this.#a = void 0), this._resizeController && this._resizeController.dispose(), this.#b && (this.#b.disconnect(), this.#b = void 0), this.#h = !1;
+  }
+  /**
+   * Handle HTML attribute changes.
+   * Only processes attribute values when SET (non-null).
+   * Removing an attribute does NOT clear JS-set properties.
+   */
+  attributeChangedCallback(e, o, i) {
+    if (o === i || !i || i === "null" || i === "undefined") return;
+    const s = {
+      rows: "rows",
+      columns: "columns",
+      "grid-config": "gridConfig",
+      "fit-mode": "fitMode",
+      "edit-on": "editOn"
+    }[e];
+    if (s)
+      if (e === "rows" || e === "columns" || e === "grid-config")
+        try {
+          this[s] = JSON.parse(i);
+        } catch {
+          console.warn(`[tbw-grid] Invalid JSON for '${e}' attribute:`, i);
+        }
+      else
+        this[s] = i;
   }
   #B() {
     const o = this.#o.querySelector(".tbw-grid-content") ?? this.#o.querySelector(".tbw-grid-root");
-    if (this.headerRowEl = o?.querySelector(".header-row"), this.virtualization.totalHeightEl = o?.querySelector(".faux-vscroll-spacer"), this.virtualization.viewportEl = o?.querySelector(".rows-viewport"), this.bodyEl = o?.querySelector(".rows"), this.#n.isInitialized) {
+    if (this._headerRowEl = o?.querySelector(".header-row"), this._virtualization.totalHeightEl = o?.querySelector(".faux-vscroll-spacer"), this._virtualization.viewportEl = o?.querySelector(".rows-viewport"), this._bodyEl = o?.querySelector(".rows"), this.#n.isInitialized) {
       he(this.#o, this.#i), Ge(this.#o, this.#t?.shell, this.#i);
       const l = this.#t?.shell?.toolPanel?.defaultOpen;
       l && this.#i.toolPanels.has(l) && (this.openToolPanel(), this.#i.expandedSections.add(l));
     }
     this.setAttribute("data-upgraded", ""), this.#h = !0;
     const i = this.disconnectSignal;
-    this.#c(), this.addEventListener("keydown", (l) => ke(this, l), { signal: i }), document.addEventListener(
+    this.#c(), this.addEventListener("keydown", (l) => Oe(this, l), { signal: i }), document.addEventListener(
       "keydown",
       (l) => {
-        l.key === "Escape" && this.activeEditRows !== -1 && M(this, this.activeEditRows, !0);
+        l.key === "Escape" && this._activeEditRows !== -1 && M(this, this._activeEditRows, !0);
       },
       { capture: !0, signal: i }
     ), document.addEventListener(
       "mousedown",
       (l) => {
-        if (this.activeEditRows === -1) return;
-        const a = this.findRenderedRowElement(this.activeEditRows);
-        !a || (l.composedPath && l.composedPath() || []).includes(a) || M(this, this.activeEditRows, !1);
+        if (this._activeEditRows === -1) return;
+        const a = this.findRenderedRowElement(this._activeEditRows);
+        !a || (l.composedPath && l.composedPath() || []).includes(a) || M(this, this._activeEditRows, !1);
       },
       { signal: i }
     );
     const n = o?.querySelector(".faux-vscroll"), s = o?.querySelector(".rows");
-    if (this.virtualization.container = n ?? this, this.#v = this.#e?.getAll().some((l) => l.onScroll) ?? !1, n && s) {
+    if (this._virtualization.container = n ?? this, this.#v = this.#e?.getAll().some((l) => l.onScroll) ?? !1, n && s) {
       n.addEventListener(
         "scroll",
         () => {
-          if (!this.virtualization.enabled && !this.#v) return;
-          const d = n.scrollTop, f = this.virtualization.rowHeight, h = Math.floor(d / f), p = h - h % 2, c = -(d - p * f);
+          if (!this._virtualization.enabled && !this.#v) return;
+          const d = n.scrollTop, f = this._virtualization.rowHeight, h = Math.floor(d / f), p = h - h % 2, c = -(d - p * f);
           s.style.transform = `translateY(${c}px)`, this.#m = d, this.#f || (this.#f = requestAnimationFrame(() => {
             this.#f = 0, this.#m !== null && (this.#Z(this.#m), this.#m = null);
           }));
@@ -1977,65 +2016,65 @@ class W extends HTMLElement {
       ), l.addEventListener(
         "touchstart",
         (d) => {
-          d.touches.length === 1 && (this.#C = d.touches[0].clientY, this.#y = d.touches[0].clientX, this.#R = n.scrollTop, this.#_ = a?.scrollLeft ?? 0);
+          d.touches.length === 1 && (this.#E = d.touches[0].clientY, this.#C = d.touches[0].clientX, this.#y = n.scrollTop, this.#R = a?.scrollLeft ?? 0);
         },
         { passive: !0, signal: i }
       ), l.addEventListener(
         "touchmove",
         (d) => {
-          if (d.touches.length === 1 && this.#C !== null && this.#y !== null && this.#R !== null && this.#_ !== null) {
-            const f = this.#C - d.touches[0].clientY, h = this.#y - d.touches[0].clientX;
-            n.scrollTop = this.#R + f, a && (a.scrollLeft = this.#_ + h), d.preventDefault();
+          if (d.touches.length === 1 && this.#E !== null && this.#C !== null && this.#y !== null && this.#R !== null) {
+            const f = this.#E - d.touches[0].clientY, h = this.#C - d.touches[0].clientX;
+            n.scrollTop = this.#y + f, a && (a.scrollLeft = this.#R + h), d.preventDefault();
           }
         },
         { passive: !1, signal: i }
       ), l.addEventListener(
         "touchend",
         () => {
-          this.#C = null, this.#y = null, this.#R = null, this.#_ = null;
+          this.#E = null, this.#C = null, this.#y = null, this.#R = null;
         },
         { passive: !0, signal: i }
       ));
     }
-    this.resizeController = Ne(this), this.#o.addEventListener("mousedown", (l) => this.#Q(l), { signal: i }), document.addEventListener("mousemove", (l) => this.#J(l), { signal: i }), document.addEventListener("mouseup", (l) => this.#ee(l), { signal: i }), this.virtualization.enabled && requestAnimationFrame(() => this.refreshVirtualWindow(!0));
+    this._resizeController = De(this), this.#o.addEventListener("mousedown", (l) => this.#J(l), { signal: i }), document.addEventListener("mousemove", (l) => this.#Q(l), { signal: i }), document.addEventListener("mouseup", (l) => this.#ee(l), { signal: i }), this._virtualization.enabled && requestAnimationFrame(() => this.refreshVirtualWindow(!0));
     const r = this.#t.rowHeight;
-    r && r > 0 ? this.virtualization.rowHeight = r : requestAnimationFrame(() => {
-      const l = this.bodyEl?.querySelector(".data-grid-row");
+    r && r > 0 ? this._virtualization.rowHeight = r : requestAnimationFrame(() => {
+      const l = this._bodyEl?.querySelector(".data-grid-row");
       if (l) {
         const a = l.getBoundingClientRect().height;
-        a > 0 && (this.virtualization.rowHeight = a, this.refreshVirtualWindow(!0));
+        a > 0 && (this._virtualization.rowHeight = a, this.refreshVirtualWindow(!0));
       }
-    }), this.virtualization.viewportEl && (this.#b = new ResizeObserver(() => {
+    }), this._virtualization.viewportEl && (this.#b = new ResizeObserver(() => {
       this.#f || (this.#f = requestAnimationFrame(() => {
         this.#f = 0, this.refreshVirtualWindow(!0), z(this);
       }));
-    }), this.#b.observe(this.virtualization.viewportEl)), queueMicrotask(() => this.#F()), requestAnimationFrame(() => requestAnimationFrame(() => this.#M?.()));
+    }), this.#b.observe(this._virtualization.viewportEl)), queueMicrotask(() => this.#F()), requestAnimationFrame(() => requestAnimationFrame(() => this.#M?.()));
   }
   // ---------------- Event Emitters ----------------
   #s(e, o) {
     this.dispatchEvent(new CustomEvent(e, { detail: o, bubbles: !0, composed: !0 }));
   }
-  emitCellCommit(e) {
+  _emitCellCommit(e) {
     this.#s("cell-commit", e);
   }
-  emitRowCommit(e) {
+  _emitRowCommit(e) {
     this.#s("row-commit", e);
   }
-  emitSortChange(e) {
+  _emitSortChange(e) {
     this.#s("sort-change", e);
   }
-  emitColumnResize(e) {
+  _emitColumnResize(e) {
     this.#s("column-resize", e);
   }
-  emitActivateCell(e) {
+  _emitActivateCell(e) {
     this.#s("activate-cell", e);
   }
   /** Update ARIA selection attributes on rendered rows/cells */
   #F() {
-    this.bodyEl?.querySelectorAll(".data-grid-row")?.forEach((o, i) => {
-      const n = i === this.focusRow;
+    this._bodyEl?.querySelectorAll(".data-grid-row")?.forEach((o, i) => {
+      const n = i === this._focusRow;
       o.setAttribute("aria-selected", String(n)), o.querySelectorAll(".cell").forEach((s, r) => {
-        s.setAttribute("aria-selected", String(n && r === this.focusCol));
+        s.setAttribute("aria-selected", String(n && r === this._focusCol));
       });
     });
   }
@@ -2044,10 +2083,10 @@ class W extends HTMLElement {
     if (!this.#h) return;
     this.#u(), this.#t.fitMode === "fixed" ? (this.__didInitialAutoSize = !1, te(this)) : (this._columns.forEach((o) => {
       !o.__userResized && o.__autoSized && delete o.width;
-    }), D(this));
+    }), N(this));
   }
   #X() {
-    this.#h && (this.#u(), this.rowPool.length = 0, this.bodyEl && (this.bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.refreshVirtualWindow(!0));
+    this.#h && (this.#u(), this._rowPool.length = 0, this._bodyEl && (this._bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.refreshVirtualWindow(!0));
   }
   #K() {
     this._rows = Array.isArray(this.#r) ? [...this.#r] : [], this.#x(), !this.#l || Array.isArray(this.#l) && this.#l.length === 0 ? this.#c() : this.refreshVirtualWindow(!0);
@@ -2056,7 +2095,7 @@ class W extends HTMLElement {
     Y(this), this.#h && (this.#u(), this.#c());
   }
   #Y() {
-    this.#h && (this.#u(), this.#q(), this.#x(), this.#H(), q(this), D(this), this.refreshVirtualWindow(!0));
+    this.#h && (this.#u(), this.#q(), this.#x(), this.#H(), q(this), N(this), this.refreshVirtualWindow(!0));
   }
   #H() {
     if (this.#e) {
@@ -2124,17 +2163,17 @@ class W extends HTMLElement {
       const n = this.#t.columns;
       n?.some((s) => s.__compiledView || s.__compiledEditor) && (e.columns = n);
     }
-    this.#w && (e.fitMode = this.#w), e.fitMode || (e.fitMode = "stretch"), this.#g && (e.editOn = this.#g), e.rowHeight && e.rowHeight > 0 && (this.virtualization.rowHeight = e.rowHeight), e.columnState && !this.#d && (this.#d = e.columnState), this.#t = e, e.fitMode === "fixed" && this._columns.forEach((n) => {
+    this.#w && (e.fitMode = this.#w), e.fitMode || (e.fitMode = "stretch"), this.#g && (e.editOn = this.#g), e.rowHeight && e.rowHeight > 0 && (this._virtualization.rowHeight = e.rowHeight), e.columnState && !this.#d && (this.#d = e.columnState), this.#t = e, e.fitMode === "fixed" && this._columns.forEach((n) => {
       n.width == null && (n.width = 80);
     });
   }
   // ---------------- Delegate Wrappers ----------------
-  #k(e, o, i = this.__rowRenderEpoch) {
+  #O(e, o, i = this.__rowRenderEpoch) {
     this.#T || (this.#T = (n, s, r) => this.#e?.renderRow(n, s, r) ?? !1), Me(this, e, o, i, this.#T);
   }
   // ---------------- Core Helpers ----------------
   #c() {
-    if (!this.isConnected || !this.headerRowEl || !this.bodyEl)
+    if (!this.isConnected || !this._headerRowEl || !this._bodyEl)
       return;
     const e = this.#p?.columns || this.#l || [];
     if (e.length) {
@@ -2148,7 +2187,7 @@ class W extends HTMLElement {
       const i = this.#d;
       this.#d = void 0, this.#I(i);
     }
-    q(this), D(this), this.refreshVirtualWindow(!0), this.#t.fitMode === "fixed" && !this.__didInitialAutoSize && requestAnimationFrame(() => te(this)), this.bodyEl && (this.bodyEl.style.display = "", this.bodyEl.style.gridTemplateColumns = ""), queueMicrotask(() => this.#e?.afterRender());
+    q(this), N(this), this.refreshVirtualWindow(!0), this.#t.fitMode === "fixed" && !this.__didInitialAutoSize && requestAnimationFrame(() => te(this)), this._bodyEl && (this._bodyEl.style.display = "", this._bodyEl.style.gridTemplateColumns = ""), queueMicrotask(() => this.#e?.afterRender());
   }
   /** Internal method to apply column state without triggering setup loop */
   #I(e) {
@@ -2161,7 +2200,7 @@ class W extends HTMLElement {
   }
   #Z(e) {
     if (this.refreshVirtualWindow(!1), this.#e?.onScrollRender(), this.#v) {
-      const o = this.virtualization.container, i = {
+      const o = this._virtualization.container, i = {
         scrollTop: e,
         scrollLeft: o?.scrollLeft ?? 0,
         scrollHeight: o?.scrollHeight ?? 0,
@@ -2173,11 +2212,23 @@ class W extends HTMLElement {
       this.#e?.onScroll(i);
     }
   }
+  /**
+   * Find the header row element in the shadow DOM.
+   * Used by plugins that need to access header cells for styling or measurement.
+   * @internal Plugin API
+   */
   findHeaderRow() {
     return this.#o.querySelector(".header-row");
   }
+  /**
+   * Find a rendered row element by its data row index.
+   * Returns null if the row is not currently rendered (virtualized out of view).
+   * Used by plugins that need to access specific row elements for styling or measurement.
+   * @internal Plugin API
+   * @param rowIndex - The data row index (not the DOM position)
+   */
   findRenderedRowElement(e) {
-    return Array.from(this.bodyEl.querySelectorAll(".data-grid-row")).find((o) => {
+    return Array.from(this._bodyEl.querySelectorAll(".data-grid-row")).find((o) => {
       const i = o.querySelector(".cell[data-row]");
       return i && Number(i.getAttribute("data-row")) === e;
     }) || null;
@@ -2186,7 +2237,7 @@ class W extends HTMLElement {
    * Dispatch a cell click event to the plugin system.
    * Returns true if any plugin handled the event.
    */
-  dispatchCellClick(e, o, i, n) {
+  _dispatchCellClick(e, o, i, n) {
     const s = this._rows[o], r = this._columns[i];
     if (!s || !r) return !1;
     const l = {
@@ -2204,7 +2255,7 @@ class W extends HTMLElement {
    * Dispatch a header click event to the plugin system.
    * Returns true if any plugin handled the event.
    */
-  dispatchHeaderClick(e, o, i) {
+  _dispatchHeaderClick(e, o, i) {
     const n = this._columns[o];
     if (!n) return !1;
     const s = {
@@ -2220,7 +2271,7 @@ class W extends HTMLElement {
    * Dispatch a keyboard event to the plugin system.
    * Returns true if any plugin handled the event.
    */
-  dispatchKeyDown(e) {
+  _dispatchKeyDown(e) {
     return this.#e?.onKeyDown(e) ?? !1;
   }
   /**
@@ -2228,12 +2279,13 @@ class W extends HTMLElement {
    * Used by keyboard navigation to ensure focused cells are fully visible
    * when plugins like pinned columns obscure part of the scroll area.
    */
-  getHorizontalScrollOffsets(e, o) {
+  _getHorizontalScrollOffsets(e, o) {
     return this.#e?.getHorizontalScrollOffsets(e, o) ?? { left: 0, right: 0 };
   }
   /**
    * Query all plugins with a generic query and collect responses.
    * This enables inter-plugin communication without the core knowing plugin-specific concepts.
+   * @internal Plugin API
    *
    * @example
    * // Check if any plugin vetoes moving a column
@@ -2247,7 +2299,7 @@ class W extends HTMLElement {
    * Build a CellMouseEvent from a native MouseEvent.
    * Extracts cell/row information from the event target.
    */
-  #O(e, o) {
+  #k(e, o) {
     let i = null;
     const n = e.composedPath?.();
     if (n && n.length > 0 ? i = n[0] : i = e.target, i && !this.#o.contains(i)) {
@@ -2274,25 +2326,25 @@ class W extends HTMLElement {
   /**
    * Handle mousedown events and dispatch to plugin system.
    */
-  #Q(e) {
-    const o = this.#O(e, "mousedown");
-    (this.#e?.onCellMouseDown(o) ?? !1) && (this.#E = !0);
+  #J(e) {
+    const o = this.#k(e, "mousedown");
+    (this.#e?.onCellMouseDown(o) ?? !1) && (this.#_ = !0);
   }
   /**
    * Handle mousemove events (only when dragging).
    */
-  #J(e) {
-    if (!this.#E) return;
-    const o = this.#O(e, "mousemove");
+  #Q(e) {
+    if (!this.#_) return;
+    const o = this.#k(e, "mousemove");
     this.#e?.onCellMouseMove(o);
   }
   /**
    * Handle mouseup events.
    */
   #ee(e) {
-    if (!this.#E) return;
-    const o = this.#O(e, "mouseup");
-    this.#e?.onCellMouseUp(o), this.#E = !1;
+    if (!this.#_) return;
+    const o = this.#k(e, "mouseup");
+    this.#e?.onCellMouseUp(o), this.#_ = !1;
   }
   // API consumed by internal utils (rows.ts)
   get changedRows() {
@@ -2302,7 +2354,7 @@ class W extends HTMLElement {
     return Array.from(this._changedRowIndices);
   }
   async resetChangedRows(e) {
-    this._changedRowIndices.clear(), e || this.#s("changed-rows-reset", { rows: this.changedRows, indices: this.changedRowIndices }), this.rowPool.forEach((o) => o.classList.remove("changed"));
+    this._changedRowIndices.clear(), e || this.#s("changed-rows-reset", { rows: this.changedRows, indices: this.changedRowIndices }), this._rowPool.forEach((o) => o.classList.remove("changed"));
   }
   async beginBulkEdit(e) {
     if (!this._columns.some((s) => s.editable)) return;
@@ -2310,13 +2362,13 @@ class W extends HTMLElement {
     B(this, e, i);
     const n = this.findRenderedRowElement?.(e);
     n && (Array.from(n.children).forEach((s, r) => {
-      const l = this.visibleColumns[r];
+      const l = this._visibleColumns[r];
       if (l?.editable) {
         const a = s;
-        a.classList.contains("editing") || k(this, i, e, l, a);
+        a.classList.contains("editing") || O(this, i, e, l, a);
       }
     }), queueMicrotask(() => {
-      const s = n.querySelector(`.cell[data-col="${this.focusCol}"]`);
+      const s = n.querySelector(`.cell[data-col="${this._focusCol}"]`);
       if (s?.classList.contains("editing")) {
         const r = s.querySelector(
           'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])'
@@ -2329,7 +2381,7 @@ class W extends HTMLElement {
     }));
   }
   async commitActiveRowEdit() {
-    this.activeEditRows !== -1 && M(this, this.activeEditRows, !1);
+    this._activeEditRows !== -1 && M(this, this._activeEditRows, !1);
   }
   async ready() {
     return this.#z;
@@ -2357,7 +2409,7 @@ class W extends HTMLElement {
       field: e,
       visible: o,
       visibleColumns: (i ?? []).filter((l) => !l.hidden).map((l) => l.field)
-    }), this.rowPool.length = 0, this.bodyEl && (this.bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.#c(), this.requestStateChange(), !0) : !1;
+    }), this._rowPool.length = 0, this._bodyEl && (this._bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.#c(), this.requestStateChange(), !0) : !1;
   }
   /**
    * Toggle the visibility of a column.
@@ -2386,7 +2438,7 @@ class W extends HTMLElement {
       i.hidden = !1;
     }), this.#s("column-visibility", {
       visibleColumns: (e ?? []).map((i) => i.field)
-    }), this.rowPool.length = 0, this.bodyEl && (this.bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.#c(), this.requestStateChange());
+    }), this._rowPool.length = 0, this._bodyEl && (this._bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.#c(), this.requestStateChange());
   }
   /**
    * Get list of all column fields (including hidden).
@@ -2416,7 +2468,7 @@ class W extends HTMLElement {
     }
     for (const n of o.values())
       i.push(n);
-    this._columns = i, q(this), D(this), this.refreshVirtualWindow(!0);
+    this._columns = i, q(this), N(this), this.refreshVirtualWindow(!0);
   }
   /**
    * Get the current column order as an array of field names.
@@ -2460,6 +2512,7 @@ class W extends HTMLElement {
    * Called internally after resize, reorder, visibility, or sort changes.
    * Plugins should call this after changing their state.
    * The event is debounced to avoid excessive events during drag operations.
+   * @internal Plugin API
    */
   requestStateChange() {
     this.#L || (this.#L = we(
@@ -2475,7 +2528,7 @@ class W extends HTMLElement {
   resetColumnState() {
     this.#d = void 0, (this.#t.columns ?? []).forEach((i) => {
       i.hidden = !1;
-    }), this.sortState = null, this.__originalOrder = [], this.#u(), this.#c();
+    }), this._sortState = null, this.__originalOrder = [], this.#u(), this.#c();
     const o = this.#e?.getAll() ?? [];
     for (const i of o)
       if (i.applyColumnState)
@@ -2573,43 +2626,44 @@ class W extends HTMLElement {
   /**
    * Core virtualization routine. Chooses between bypass (small datasets), grouped window rendering,
    * or standard row window rendering.
+   * @internal Plugin API
    */
   refreshVirtualWindow(e = !1) {
-    if (!this.bodyEl) return;
+    if (!this._bodyEl) return;
     const o = this._rows.length;
-    if (!this.virtualization.enabled) {
-      this.#k(0, o), this.#e?.afterRender();
+    if (!this._virtualization.enabled) {
+      this.#O(0, o), this.#e?.afterRender();
       return;
     }
-    if (this._rows.length <= this.virtualization.bypassThreshold) {
-      if (this.virtualization.start = 0, this.virtualization.end = o, this.bodyEl.style.transform = "translateY(0px)", this.#k(0, o, this.__rowRenderEpoch), this.virtualization.totalHeightEl) {
-        const y = this.#o.querySelector(".tbw-scroll-area"), E = y ? y.offsetHeight - y.clientHeight : 0;
-        this.virtualization.totalHeightEl.style.height = `${o * this.virtualization.rowHeight + E}px`;
+    if (this._rows.length <= this._virtualization.bypassThreshold) {
+      if (this._virtualization.start = 0, this._virtualization.end = o, this._bodyEl.style.transform = "translateY(0px)", this.#O(0, o, this.__rowRenderEpoch), this._virtualization.totalHeightEl) {
+        const C = this.#o.querySelector(".tbw-scroll-area"), _ = C ? C.offsetHeight - C.clientHeight : 0;
+        this._virtualization.totalHeightEl.style.height = `${o * this._virtualization.rowHeight + _}px`;
       }
       const m = this.#o.querySelector(".rows-body");
-      m?.setAttribute("aria-rowcount", String(o)), m?.setAttribute("aria-colcount", String(this.visibleColumns.length)), this.#e?.afterRender();
+      m?.setAttribute("aria-rowcount", String(o)), m?.setAttribute("aria-colcount", String(this._visibleColumns.length)), this.#e?.afterRender();
       return;
     }
-    const i = this.virtualization.container ?? this, s = (this.virtualization.viewportEl ?? i).clientHeight, r = this.virtualization.rowHeight, l = i.scrollTop;
+    const i = this._virtualization.container ?? this, s = (this._virtualization.viewportEl ?? i).clientHeight, r = this._virtualization.rowHeight, l = i.scrollTop;
     let a = Math.floor(l / r), d = 0;
     const f = 10;
     for (; d < f; ) {
-      const m = this.#e?.getExtraHeightBefore?.(a) ?? 0, y = Math.floor((l - m) / r);
-      if (y >= a || y < 0) break;
-      a = y, d++;
+      const m = this.#e?.getExtraHeightBefore?.(a) ?? 0, C = Math.floor((l - m) / r);
+      if (C >= a || C < 0) break;
+      a = C, d++;
     }
     a = a - a % 2, a < 0 && (a = 0);
     const h = this.#e?.adjustVirtualStart(a, l, r);
     h !== void 0 && h < a && (a = h, a = a - a % 2, a < 0 && (a = 0));
     const p = Math.ceil(s / r) + 3;
     let c = a + p;
-    c > o && (c = o), this.virtualization.start = a, this.virtualization.end = c;
-    const b = this.#o.querySelector(".tbw-footer")?.offsetHeight ?? 0, w = this.#e?.getExtraHeight() ?? 0, v = this.#o.querySelector(".tbw-scroll-area"), R = v ? v.offsetHeight - v.clientHeight : 0;
-    this.virtualization.totalHeightEl && (this.virtualization.totalHeightEl.style.height = `${o * r + r + b + w + R}px`);
-    const x = this.#e?.getExtraHeightBefore?.(a) ?? 0, _ = -(l - a * r - x);
-    this.bodyEl.style.transform = `translateY(${_}px)`, this.#k(a, c, e ? ++this.__rowRenderEpoch : this.__rowRenderEpoch);
+    c > o && (c = o), this._virtualization.start = a, this._virtualization.end = c;
+    const b = this.#o.querySelector(".tbw-footer")?.offsetHeight ?? 0, w = this.#e?.getExtraHeight() ?? 0, v = this.#o.querySelector(".tbw-scroll-area"), y = v ? v.offsetHeight - v.clientHeight : 0;
+    this._virtualization.totalHeightEl && (this._virtualization.totalHeightEl.style.height = `${o * r + r + b + w + y}px`);
+    const x = this.#e?.getExtraHeightBefore?.(a) ?? 0, R = -(l - a * r - x);
+    this._bodyEl.style.transform = `translateY(${R}px)`, this.#O(a, c, e ? ++this.__rowRenderEpoch : this.__rowRenderEpoch);
     const g = this.#o.querySelector(".rows-body");
-    g?.setAttribute("aria-rowcount", String(o)), g?.setAttribute("aria-colcount", String(this.visibleColumns.length)), e && this.#e?.afterRender();
+    g?.setAttribute("aria-rowcount", String(o)), g?.setAttribute("aria-colcount", String(this._visibleColumns.length)), e && this.#e?.afterRender();
   }
   // ---------------- Render ----------------
   #$() {
@@ -2679,13 +2733,13 @@ class W extends HTMLElement {
   }
 }
 customElements.get(W.tagName) || customElements.define(W.tagName, W);
-const Qe = {
+const Je = {
   /** Ask if a column can be moved. Context: ColumnConfig. Response: boolean | undefined */
   CAN_MOVE_COLUMN: "canMoveColumn",
   /** Get context menu items. Context: ContextMenuParams. Response: ContextMenuItem[] */
   GET_CONTEXT_MENU_ITEMS: "getContextMenuItems"
 };
-class Je {
+class Qe {
   /** Plugin version - override in subclass if needed */
   version = "1.0.0";
   /** CSS styles to inject into the grid's shadow DOM */
@@ -2993,7 +3047,7 @@ const T = {
   max: (t, e) => Math.max(...t.map((o) => Number(o[e]) || -1 / 0)),
   first: (t, e) => t[0]?.[e],
   last: (t, e) => t[t.length - 1]?.[e]
-}, I = /* @__PURE__ */ new Map(), O = {
+}, I = /* @__PURE__ */ new Map(), k = {
   /**
    * Register a custom aggregator function.
    */
@@ -3047,9 +3101,9 @@ function Ze(t) {
 function it(t, e) {
   return Ze(t)(e);
 }
-const st = O.register.bind(O), rt = O.unregister.bind(O), lt = O.get.bind(O), at = O.run.bind(O), ct = O.list.bind(O);
+const st = k.register.bind(k), rt = k.unregister.bind(k), lt = k.get.bind(k), at = k.run.bind(k), ct = k.list.bind(k);
 export {
-  Je as BaseGridPlugin,
+  Qe as BaseGridPlugin,
   H as DEFAULT_GRID_ICONS,
   ot as DGEvents,
   W as DataGridElement,
@@ -3059,10 +3113,10 @@ export {
   G as GridDataAttrs,
   W as GridElement,
   et as GridSelectors,
-  Qe as PLUGIN_QUERIES,
+  Je as PLUGIN_QUERIES,
   nt as PluginEvents,
   Ye as PluginManager,
-  O as aggregatorRegistry,
+  k as aggregatorRegistry,
   lt as getAggregator,
   Ze as getValueAggregator,
   ct as listAggregators,