@toolbox-web/grid 0.4.2 → 0.6.0

package/lib/plugins/selection/SelectionPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/selection/SelectionPlugin.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAU/F,OAAO,KAAK,EACV,SAAS,EAGT,eAAe,EAEf,eAAe,EAChB,MAAM,SAAS,CAAC;AAyCjB;;;;;;;GAOG;AACH,qBAAa,eAAgB,SAAQ,cAAc,CAAC,eAAe,CAAC;;IAClE,QAAQ,CAAC,IAAI,eAAe;IAC5B,SAAkB,MAAM,SAAU;IAElC,cAAuB,aAAa,IAAI,OAAO,CAAC,eAAe,CAAC,CAI/D;IAGD,qCAAqC;IACrC,OAAO,CAAC,QAAQ,CAAqB;IACrC,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,MAAM,CAAuB;IAErC,yCAAyC;IACzC,OAAO,CAAC,MAAM,CAA2B;IACzC,OAAO,CAAC,WAAW,CAAkC;IACrD,OAAO,CAAC,UAAU,CAA6C;IAC/D,OAAO,CAAC,UAAU,CAAS;IAE3B,oEAAoE;IACpE,OAAO,CAAC,qBAAqB,CAAsC;IAEnE,uCAAuC;IACvC,OAAO,CAAC,YAAY,CAA6C;IAMxD,MAAM,IAAI,IAAI;IAcd,WAAW,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO;IAqF3C,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO;IA4FxC,eAAe,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO,GAAG,IAAI;IAyCtD,eAAe,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO,GAAG,IAAI;IA+BtD,aAAa,CAAC,MAAM,EAAE,cAAc,GAAG,OAAO,GAAG,IAAI;IA0FrD,WAAW,IAAI,IAAI;IA0C5B;;;OAGG;IACM,cAAc,IAAI,IAAI;IAQ/B;;;;;;;;;;;;;;OAcG;IACH,YAAY,IAAI,eAAe;IAQ/B;;;OAGG;IACH,eAAe,IAAI;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;IAQtD;;;OAGG;IACH,eAAe,IAAI,MAAM,EAAE;IAQ3B;;;OAGG;IACH,SAAS,IAAI,SAAS,EAAE;IAIxB;;OAEG;IACH,gBAAgB,IAAI,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAIvD;;OAEG;IACH,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO;IAIjD;;OAEG;IACH,cAAc,IAAI,IAAI;IAWtB;;OAEG;IACH,SAAS,CAAC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI;CAgCrC"}
+{"version":3,"file":"SelectionPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/selection/SelectionPlugin.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAU/F,OAAO,KAAK,EACV,SAAS,EAGT,eAAe,EAEf,eAAe,EAChB,MAAM,SAAS,CAAC;AAyCjB;;;;;;;GAOG;AACH,qBAAa,eAAgB,SAAQ,cAAc,CAAC,eAAe,CAAC;;IAClE,QAAQ,CAAC,IAAI,eAAe;IAC5B,SAAkB,MAAM,SAAU;IAElC,cAAuB,aAAa,IAAI,OAAO,CAAC,eAAe,CAAC,CAI/D;IAGD,qCAAqC;IACrC,OAAO,CAAC,QAAQ,CAAqB;IACrC,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,MAAM,CAAuB;IAErC,yCAAyC;IACzC,OAAO,CAAC,MAAM,CAA2B;IACzC,OAAO,CAAC,WAAW,CAAkC;IACrD,OAAO,CAAC,UAAU,CAA6C;IAC/D,OAAO,CAAC,UAAU,CAAS;IAE3B,oEAAoE;IACpE,OAAO,CAAC,qBAAqB,CAAsC;IAEnE,uCAAuC;IACvC,OAAO,CAAC,YAAY,CAA6C;IAMxD,MAAM,IAAI,IAAI;IAcd,WAAW,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO;IAqF3C,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO;IA4FxC,eAAe,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO,GAAG,IAAI;IAyCtD,eAAe,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO,GAAG,IAAI;IA+BtD,aAAa,CAAC,MAAM,EAAE,cAAc,GAAG,OAAO,GAAG,IAAI;IAuFrD,WAAW,IAAI,IAAI;IA0C5B;;;OAGG;IACM,cAAc,IAAI,IAAI;IAQ/B;;;;;;;;;;;;;;OAcG;IACH,YAAY,IAAI,eAAe;IAQ/B;;;OAGG;IACH,eAAe,IAAI;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;IAQtD;;;OAGG;IACH,eAAe,IAAI,MAAM,EAAE;IAQ3B;;;OAGG;IACH,SAAS,IAAI,SAAS,EAAE;IAIxB;;OAEG;IACH,gBAAgB,IAAI,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAIvD;;OAEG;IACH,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO;IAIjD;;OAEG;IACH,cAAc,IAAI,IAAI;IAWtB;;OAEG;IACH,SAAS,CAAC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI;CAgCrC"}

package/lib/plugins/selection/index.js

@@ -1,47 +1,47 @@
-function x(n, e, t, s) {
-  const r = new Set(n.selected);
-  let o = n.anchor;
+function x(r, e, t, s) {
+  const n = new Set(r.selected);
+  let o = r.anchor;
   if (t === "single")
-    r.clear(), r.add(e), o = e;
+    n.clear(), n.add(e), o = e;
   else if (t === "multiple") {
     const i = s.ctrlKey || s.metaKey;
-    if (s.shiftKey && n.anchor !== null) {
-      const c = Math.min(n.anchor, e), a = Math.max(n.anchor, e);
-      for (let h = c; h <= a; h++)
-        r.add(h);
-    } else i ? (r.has(e) ? r.delete(e) : r.add(e), o = e) : (r.clear(), r.add(e), o = e);
+    if (s.shiftKey && r.anchor !== null) {
+      const c = Math.min(r.anchor, e), a = Math.max(r.anchor, e);
+      for (let d = c; d <= a; d++)
+        n.add(d);
+    } else i ? (n.has(e) ? n.delete(e) : n.add(e), o = e) : (n.clear(), n.add(e), o = e);
   }
-  return { selected: r, lastSelected: e, anchor: o };
+  return { selected: n, lastSelected: e, anchor: o };
 }
-function _(n) {
+function _(r) {
   const e = /* @__PURE__ */ new Set();
-  for (let t = 0; t < n; t++)
+  for (let t = 0; t < r; t++)
     e.add(t);
   return e;
 }
-function D(n, e) {
+function D(r, e) {
   const t = [], s = [];
-  for (const r of e)
-    n.has(r) || t.push(r);
-  for (const r of n)
-    e.has(r) || s.push(r);
+  for (const n of e)
+    r.has(n) || t.push(n);
+  for (const n of r)
+    e.has(n) || s.push(n);
   return { added: t, removed: s };
 }
-function b(n) {
-  if (!n) return -1;
-  const e = n.getAttribute("data-row");
+function b(r) {
+  if (!r) return -1;
+  const e = r.getAttribute("data-row");
   if (e) return parseInt(e, 10);
-  const t = n.closest(".data-grid-row");
+  const t = r.closest(".data-grid-row");
   if (!t) return -1;
   const s = t.parentElement;
   if (!s) return -1;
-  const r = s.querySelectorAll(":scope > .data-grid-row");
-  for (let o = 0; o < r.length; o++)
-    if (r[o] === t) return o;
+  const n = s.querySelectorAll(":scope > .data-grid-row");
+  for (let o = 0; o < n.length; o++)
+    if (n[o] === t) return o;
   return -1;
 }
-function g(n) {
-  n && n.querySelectorAll(".cell-focus").forEach((e) => e.classList.remove("cell-focus"));
+function w(r) {
+  r && r.querySelectorAll(".cell-focus").forEach((e) => e.classList.remove("cell-focus"));
 }
 const p = {
   expand: "▶",
@@ -230,10 +230,21 @@ class y {
     return this.grid;
   }
   /**
-   * Get the shadow root of the grid.
+   * Get the render root of the grid for DOM queries.
+   * @deprecated Use `gridElement` instead. This getter exists only for backward compatibility.
+   *
+   * With Shadow DOM removed, the grid element itself is the render root.
+   * All new code should use `this.gridElement` for DOM queries.
+   *
+   * @example
+   * // OLD (deprecated)
+   * const rows = this.shadowRoot?.querySelector('.rows');
+   *
+   * // NEW (preferred)
+   * const rows = this.gridElement.querySelector('.rows');
    */
   get shadowRoot() {
-    return this.grid?.shadowRoot ?? null;
+    return this.gridElement;
   }
   /**
    * Get the disconnect signal for event listener cleanup.
@@ -284,7 +295,7 @@ class y {
     const e = this.grid?.effectiveConfig?.animation?.mode ?? "reduced-motion";
     if (e === !1 || e === "off") return !1;
     if (e === !0 || e === "on") return !0;
-    const t = this.shadowRoot?.host;
+    const t = this.gridElement;
     return t ? getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim() !== "0" : !0;
   }
   /**
@@ -300,7 +311,7 @@ class y {
    * ```
    */
   get animationDuration() {
-    const e = this.shadowRoot?.host;
+    const e = this.gridElement;
     if (e) {
       const t = getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(), s = parseInt(t, 10);
       if (!isNaN(s)) return s;
@@ -337,61 +348,61 @@ class y {
   }
   // #endregion
 }
-function d(n) {
-  return n.meta?.utility === !0;
+function h(r) {
+  return r.meta?.utility === !0;
 }
-function u(n) {
+function g(r) {
   return {
-    startRow: Math.min(n.startRow, n.endRow),
-    startCol: Math.min(n.startCol, n.endCol),
-    endRow: Math.max(n.startRow, n.endRow),
-    endCol: Math.max(n.startCol, n.endCol)
+    startRow: Math.min(r.startRow, r.endRow),
+    startCol: Math.min(r.startCol, r.endCol),
+    endRow: Math.max(r.startRow, r.endRow),
+    endCol: Math.max(r.startCol, r.endCol)
   };
 }
-function A(n) {
-  const e = u(n);
+function A(r) {
+  const e = g(r);
   return {
     from: { row: e.startRow, col: e.startCol },
     to: { row: e.endRow, col: e.endCol }
   };
 }
-function m(n) {
-  return n.map(A);
+function R(r) {
+  return r.map(A);
 }
-function v(n, e, t) {
-  const s = u(t);
-  return n >= s.startRow && n <= s.endRow && e >= s.startCol && e <= s.endCol;
+function v(r, e, t) {
+  const s = g(t);
+  return r >= s.startRow && r <= s.endRow && e >= s.startCol && e <= s.endCol;
 }
-function R(n, e, t) {
-  return t.some((s) => v(n, e, s));
+function m(r, e, t) {
+  return t.some((s) => v(r, e, s));
 }
-function S(n) {
-  const e = [], t = u(n);
+function S(r) {
+  const e = [], t = g(r);
   for (let s = t.startRow; s <= t.endRow; s++)
-    for (let r = t.startCol; r <= t.endCol; r++)
-      e.push({ row: s, col: r });
+    for (let n = t.startCol; n <= t.endCol; n++)
+      e.push({ row: s, col: n });
   return e;
 }
-function I(n) {
+function E(r) {
   const e = /* @__PURE__ */ new Map();
-  for (const t of n)
+  for (const t of r)
     for (const s of S(t))
       e.set(`${s.row},${s.col}`, s);
   return [...e.values()];
 }
-function f(n, e) {
+function u(r, e) {
   return {
-    startRow: n.row,
-    startCol: n.col,
+    startRow: r.row,
+    startCol: r.col,
     endRow: e.row,
     endCol: e.col
   };
 }
-const K = ':host .selecting .data-grid-row>.cell{-webkit-user-select:none;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 q(n, e, t) {
-  if (n === "cell" && e.selectedCell)
+const I = "@layer tbw-plugins{tbw-grid.selecting .data-grid-row>.cell{-webkit-user-select:none;user-select:none}tbw-grid[data-has-focus] .data-grid-row.row-focus{background-color:var(--tbw-focus-background, rgba(from var(--tbw-color-accent) r g b / 12%))}tbw-grid[data-selection-mode=row] .cell-focus{outline:none}tbw-grid .data-grid-row>.cell.selected{background-color:var(--tbw-range-selection-bg)}tbw-grid .data-grid-row>.cell.selected.top{border-top:2px solid var(--tbw-range-border-color)}tbw-grid .data-grid-row>.cell.selected.bottom{border-bottom:2px solid var(--tbw-range-border-color)}tbw-grid .data-grid-row>.cell.selected.first{border-left:2px solid var(--tbw-range-border-color)}tbw-grid .data-grid-row>.cell.selected.last{border-right:2px solid var(--tbw-range-border-color)}tbw-grid .tbw-selection-summary{font-size:var(--tbw-font-size-sm, .8125rem);color:var(--tbw-color-fg-muted);white-space:nowrap}}";
+function K(r, e, t) {
+  if (r === "cell" && e.selectedCell)
     return {
-      mode: n,
+      mode: r,
       ranges: [
         {
           from: { row: e.selectedCell.row, col: e.selectedCell.col },
@@ -399,18 +410,18 @@ function q(n, e, t) {
         }
       ]
     };
-  if (n === "row" && e.selected.size > 0) {
-    const s = [...e.selected].map((r) => ({
-      from: { row: r, col: 0 },
-      to: { row: r, col: t - 1 }
+  if (r === "row" && e.selected.size > 0) {
+    const s = [...e.selected].map((n) => ({
+      from: { row: n, col: 0 },
+      to: { row: n, col: t - 1 }
     }));
-    return { mode: n, ranges: s };
+    return { mode: r, ranges: s };
   }
-  return n === "range" && e.ranges.length > 0 ? { mode: n, ranges: m(e.ranges) } : { mode: n, ranges: [] };
+  return r === "range" && e.ranges.length > 0 ? { mode: r, ranges: R(e.ranges) } : { mode: r, ranges: [] };
 }
 class M extends y {
   name = "selection";
-  styles = K;
+  styles = I;
   get defaultConfig() {
     return {
       mode: "cell"
@@ -438,7 +449,7 @@ class M extends y {
   // #endregion
   // #region Event Handlers
   onCellClick(e) {
-    const { rowIndex: t, colIndex: s, originalEvent: r } = e, { mode: o } = this.config, i = this.columns[s], c = i && d(i);
+    const { rowIndex: t, colIndex: s, originalEvent: n } = e, { mode: o } = this.config, i = this.columns[s], c = i && h(i);
     if (o === "cell")
       return c || (this.selectedCell = { row: t, col: s }, this.emit("selection-change", this.#e()), this.requestAfterRender()), !1;
     if (o === "row")
@@ -446,11 +457,11 @@ class M extends y {
     if (o === "range") {
       if (c)
         return !1;
-      const a = r.shiftKey, h = r.ctrlKey || r.metaKey;
+      const a = n.shiftKey, d = n.ctrlKey || n.metaKey;
       if (a && this.cellAnchor) {
-        const l = f(this.cellAnchor, { row: t, col: s });
-        h ? this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = l : this.ranges.push(l) : this.ranges = [l], this.activeRange = l;
-      } else if (h) {
+        const l = u(this.cellAnchor, { row: t, col: s });
+        d ? this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = l : this.ranges.push(l) : this.ranges = [l], this.activeRange = l;
+      } else if (d) {
         const l = {
           startRow: t,
           startCol: s,
@@ -472,10 +483,10 @@ class M extends y {
     return !1;
   }
   onKeyDown(e) {
-    const { mode: t } = this.config, r = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Tab", "Home", "End", "PageUp", "PageDown"].includes(e.key);
+    const { mode: t } = this.config, n = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Tab", "Home", "End", "PageUp", "PageDown"].includes(e.key);
     if (e.key === "Escape")
       return t === "cell" ? this.selectedCell = null : t === "row" ? (this.selected.clear(), this.anchor = null) : t === "range" && (this.ranges = [], this.activeRange = null, this.cellAnchor = null), this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
-    if (t === "cell" && r)
+    if (t === "cell" && n)
       return queueMicrotask(() => {
         this.selectedCell = { row: this.grid._focusRow, col: this.grid._focusCol }, this.emit("selection-change", this.#e()), this.requestAfterRender();
       }), !1;
@@ -483,7 +494,7 @@ class M extends y {
       return queueMicrotask(() => {
         this.selected.clear(), this.selected.add(this.grid._focusRow), this.lastSelected = this.grid._focusRow, this.emit("selection-change", this.#e()), this.requestAfterRender();
       }), !1;
-    if (t === "range" && r) {
+    if (t === "range" && n) {
       const o = e.key === "Tab", i = e.shiftKey && !o;
       return i && !this.cellAnchor && (this.cellAnchor = { row: this.grid._focusRow, col: this.grid._focusCol }), this.pendingKeyboardUpdate = { shiftKey: i }, queueMicrotask(() => this.requestAfterRender()), !1;
     }
@@ -504,16 +515,16 @@ class M extends y {
   onCellMouseDown(e) {
     if (this.config.mode !== "range" || e.rowIndex === void 0 || e.colIndex === void 0 || e.rowIndex < 0) return;
     const t = this.columns[e.colIndex];
-    if (t && d(t) || e.originalEvent.shiftKey && this.cellAnchor)
+    if (t && h(t) || e.originalEvent.shiftKey && this.cellAnchor)
       return;
     this.isDragging = !0;
-    const s = e.rowIndex, r = e.colIndex;
-    this.cellAnchor = { row: s, col: r }, e.originalEvent.ctrlKey || e.originalEvent.metaKey || (this.ranges = []);
+    const s = e.rowIndex, n = e.colIndex;
+    this.cellAnchor = { row: s, col: n }, e.originalEvent.ctrlKey || e.originalEvent.metaKey || (this.ranges = []);
     const i = {
       startRow: s,
-      startCol: r,
+      startCol: n,
       endRow: s,
-      endCol: r
+      endCol: n
     };
     return this.ranges.push(i), this.activeRange = i, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
   }
@@ -521,12 +532,12 @@ class M extends y {
     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 s = this.columns[t];
-    if (s && d(s)) {
-      const o = this.columns.findIndex((i) => !d(i));
+    if (s && h(s)) {
+      const o = this.columns.findIndex((i) => !h(i));
       o >= 0 && (t = o);
     }
-    const r = f(this.cellAnchor, { row: e.rowIndex, col: t });
-    return this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = r : this.ranges.push(r), this.activeRange = r, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
+    const n = u(this.cellAnchor, { row: e.rowIndex, col: t });
+    return this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = n : this.ranges.push(n), this.activeRange = n, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
   }
   onCellMouseUp(e) {
     if (this.config.mode === "range" && this.isDragging)
@@ -537,49 +548,48 @@ class M extends y {
    * Shared by afterRender and onScrollRender.
    */
   #t() {
-    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");
     });
-    const r = e.querySelectorAll(".data-grid-row");
-    if (r.forEach((o) => {
+    const n = e.querySelectorAll(".data-grid-row");
+    if (n.forEach((o) => {
       o.classList.remove("selected", "row-focus");
-    }), t === "row" && (g(e), r.forEach((o) => {
+    }), t === "row" && (w(e), n.forEach((o) => {
       const i = o.querySelector(".cell[data-row]"), c = b(i);
       c >= 0 && this.selected.has(c) && o.classList.add("selected", "row-focus");
     })), t === "range" && this.ranges.length > 0) {
-      g(e);
-      const o = this.activeRange ? u(this.activeRange) : null, i = this.columns.findIndex((a) => !d(a));
+      w(e);
+      const o = this.activeRange ? g(this.activeRange) : null, i = this.columns.findIndex((a) => !h(a));
       this.columns.length - 1, e.querySelectorAll(".cell[data-row][data-col]").forEach((a) => {
-        const h = parseInt(a.getAttribute("data-row") ?? "-1", 10), l = parseInt(a.getAttribute("data-col") ?? "-1", 10);
-        if (h >= 0 && l >= 0) {
-          const w = this.columns[l];
-          if (w && d(w))
+        const d = parseInt(a.getAttribute("data-row") ?? "-1", 10), l = parseInt(a.getAttribute("data-col") ?? "-1", 10);
+        if (d >= 0 && l >= 0) {
+          const f = this.columns[l];
+          if (f && h(f))
             return;
-          if (R(h, l, this.ranges) && (a.classList.add("selected"), o)) {
-            h === o.startRow && a.classList.add("top"), h === o.endRow && a.classList.add("bottom");
+          if (m(d, l, this.ranges) && (a.classList.add("selected"), o)) {
+            d === o.startRow && a.classList.add("top"), d === o.endRow && a.classList.add("bottom");
             const C = Math.max(o.startCol, i);
             l === C && a.classList.add("first"), l === o.endCol && a.classList.add("last");
           }
         }
       });
     }
-    t === "cell" && this.selectedCell && g(e);
   }
   afterRender() {
-    const e = this.shadowRoot;
+    const e = this.gridElement;
     if (!e) return;
     const t = e.children[0], { mode: s } = this.config;
     if (this.pendingKeyboardUpdate && s === "range") {
-      const { shiftKey: r } = this.pendingKeyboardUpdate;
+      const { shiftKey: n } = this.pendingKeyboardUpdate;
       this.pendingKeyboardUpdate = null;
       const o = this.grid._focusRow, i = this.grid._focusCol;
-      if (r && this.cellAnchor) {
-        const c = f(this.cellAnchor, { row: o, col: i });
+      if (n && this.cellAnchor) {
+        const c = u(this.cellAnchor, { row: o, col: i });
         this.ranges = [c], this.activeRange = c;
-      } else r || (this.ranges = [], this.activeRange = null, this.cellAnchor = { row: o, col: i });
+      } else n || (this.ranges = [], this.activeRange = null, this.cellAnchor = { row: o, col: i });
       this.emit("selection-change", this.#e());
     }
     this.grid.setAttribute("data-selection-mode", s), t && t.classList.toggle("selecting", this.isDragging), this.#t();
@@ -642,13 +652,13 @@ class M extends y {
    * Get all selected cells across all ranges.
    */
   getSelectedCells() {
-    return I(this.ranges);
+    return E(this.ranges);
   }
   /**
    * Check if a specific cell is in range selection.
    */
   isCellSelected(e, t) {
-    return R(e, t, this.ranges);
+    return m(e, t, this.ranges);
   }
   /**
    * Clear all selection.
@@ -667,13 +677,13 @@ class M extends y {
       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: m(this.ranges)
+      ranges: R(this.ranges)
     }), this.requestAfterRender();
   }
   // #endregion
   // #region Private Helpers
   #e() {
-    return q(
+    return K(
       this.config.mode,
       {
         selectedCell: this.selectedCell,