@toolbox-web/grid 1.1.0 → 1.1.2

package/lib/plugins/responsive/ResponsivePlugin.d.ts

@@ -1,4 +1,4 @@
-import { BaseGridPlugin, GridElement } from '../../core/plugin/base-plugin';
+import { BaseGridPlugin, GridElement, PluginManifest } from '../../core/plugin/base-plugin';
 import { BreakpointConfig, ResponsivePluginConfig } from './types';
 /**
  * Responsive Plugin for tbw-grid
@@ -52,6 +52,10 @@ export declare class ResponsivePlugin<T = unknown> extends BaseGridPlugin<Respon
     readonly name = "responsive";
     readonly version = "1.0.0";
     readonly styles: string;
+    /**
+     * Plugin manifest declaring incompatibilities with other plugins.
+     */
+    static readonly manifest: PluginManifest;
     /**
      * Check if currently in responsive mode.
      * @returns `true` if the grid is in card layout mode
@@ -119,5 +123,24 @@ export declare class ResponsivePlugin<T = unknown> extends BaseGridPlugin<Respon
      * @returns `true` if the event was handled and default behavior should be prevented
      */
     onKeyDown(e: KeyboardEvent): boolean;
+    /**
+     * Return total extra height contributed by mixed row heights.
+     * This is called by the grid's virtualization system to adjust scrollbar height.
+     *
+     * The grid calculates: totalRows * baseRowHeight + pluginExtraHeight
+     *
+     * For mixed layouts (groups + cards), we need to report the difference between
+     * actual heights and what the base calculation assumes:
+     * - Extra for groups: groupCount * (groupHeight - baseHeight)
+     * - Extra for cards: cardCount * (cardHeight - baseHeight)
+     */
+    getExtraHeight(): number;
+    /**
+     * Return extra height that appears before a given row index.
+     * Used by virtualization to correctly calculate scroll positions.
+     *
+     * Like getExtraHeight, this accounts for both group and card row heights.
+     */
+    getExtraHeightBefore(beforeRowIndex: number): number;
 }
 //# sourceMappingURL=ResponsivePlugin.d.ts.map

package/lib/plugins/responsive/ResponsivePlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsivePlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/responsive/ResponsivePlugin.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAGH,OAAO,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAGjF,OAAO,KAAK,EAAE,gBAAgB,EAA8C,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEpH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,qBAAa,gBAAgB,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,cAAc,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC;;IAC1F,QAAQ,CAAC,IAAI,gBAAgB;IAC7B,SAAkB,OAAO,WAAW;IACpC,SAAkB,MAAM,SAAU;IAgBlC;;;OAGG;IACH,YAAY,IAAI,OAAO;IAIvB;;;;OAIG;IACH,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAYrC;;;OAGG;IACH,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKlC;;;;OAIG;IACH,eAAe,CAAC,QAAQ,EAAE,sBAAsB,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,GAAG,IAAI;IAQ1E;;;OAGG;IACH,QAAQ,IAAI,MAAM;IAIlB;;;OAGG;IACH,mBAAmB,IAAI,gBAAgB,GAAG,IAAI;IAIrC,MAAM,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IA+C/B,MAAM,IAAI,IAAI;IAcvB;;;;OAIG;IACM,WAAW,IAAI,IAAI;IAgL5B;;;;;;;;;;OAUG;IACM,SAAS,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IA8BtF;;;;;;;;;;;;;OAaG;IACM,SAAS,CAAC,CAAC,EAAE,aAAa,GAAG,OAAO;CAwF9C"}
+{"version":3,"file":"ResponsivePlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/responsive/ResponsivePlugin.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAGH,OAAO,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAGtG,OAAO,KAAK,EAAE,gBAAgB,EAA8C,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEpH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,qBAAa,gBAAgB,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,cAAc,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC;;IAC1F,QAAQ,CAAC,IAAI,gBAAgB;IAC7B,SAAkB,OAAO,WAAW;IACpC,SAAkB,MAAM,SAAU;IAElC;;OAEG;IACH,gBAAyB,QAAQ,EAAE,cAAc,CAS/C;IAgBF;;;OAGG;IACH,YAAY,IAAI,OAAO;IAIvB;;;;OAIG;IACH,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAYrC;;;OAGG;IACH,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKlC;;;;OAIG;IACH,eAAe,CAAC,QAAQ,EAAE,sBAAsB,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,GAAG,IAAI;IAQ1E;;;OAGG;IACH,QAAQ,IAAI,MAAM;IAIlB;;;OAGG;IACH,mBAAmB,IAAI,gBAAgB,GAAG,IAAI;IAIrC,MAAM,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IA+C/B,MAAM,IAAI,IAAI;IAcvB;;;;OAIG;IACM,WAAW,IAAI,IAAI;IAyL5B;;;;;;;;;;OAUG;IACM,SAAS,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAqCtF;;;;;;;;;;;;;OAaG;IACM,SAAS,CAAC,CAAC,EAAE,aAAa,GAAG,OAAO;IAkK7C;;;;;;;;;;OAUG;IACM,cAAc,IAAI,MAAM;IAyBjC;;;;;OAKG;IACM,oBAAoB,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM;CA8H9D"}

package/lib/plugins/responsive/index.js

@@ -1,54 +1,54 @@
-function b(r) {
-  r && r.querySelectorAll(".cell-focus").forEach((t) => t.classList.remove("cell-focus"));
+function v(s) {
+  s && s.querySelectorAll(".cell-focus").forEach((t) => t.classList.remove("cell-focus"));
 }
-const w = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])', m = document.createElement("template");
+const b = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])', m = document.createElement("template");
 m.innerHTML = '<div class="cell" role="gridcell" part="cell"></div>';
-const y = document.createElement("template");
-y.innerHTML = '<div class="data-grid-row" role="row" part="row"></div>';
-function u(r, t) {
-  if (r._virtualization?.enabled) {
-    const { rowHeight: a, container: s, viewportEl: d } = r._virtualization, n = s, c = d?.clientHeight ?? n?.clientHeight ?? 0;
-    if (n && c > 0) {
-      const h = r._focusRow * a;
-      h < n.scrollTop ? n.scrollTop = h : h + a > n.scrollTop + c && (n.scrollTop = h - c + a);
+const R = document.createElement("template");
+R.innerHTML = '<div class="data-grid-row" role="row" part="row"></div>';
+function u(s, t) {
+  if (s._virtualization?.enabled) {
+    const { rowHeight: r, container: o, viewportEl: l } = s._virtualization, d = o, h = l?.clientHeight ?? d?.clientHeight ?? 0;
+    if (d && h > 0) {
+      const c = s._focusRow * r;
+      c < d.scrollTop ? d.scrollTop = c : c + r > d.scrollTop + h && (d.scrollTop = c - h + r);
     }
   }
-  const e = r._activeEditRows !== void 0 && r._activeEditRows !== -1;
-  e || r.refreshVirtualWindow(!1), b(r._bodyEl), Array.from(r._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((a) => {
-    a.setAttribute("aria-selected", "false");
+  const e = s._activeEditRows !== void 0 && s._activeEditRows !== -1;
+  e || s.refreshVirtualWindow(!1), v(s._bodyEl), Array.from(s._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((r) => {
+    r.setAttribute("aria-selected", "false");
   });
-  const i = r._focusRow, o = r._virtualization.start ?? 0, l = r._virtualization.end ?? r._rows.length;
-  if (i >= o && i < l) {
-    const a = r._bodyEl.querySelectorAll(".data-grid-row")[i - o];
-    let s = a?.children[r._focusCol];
-    if ((!s || !s.classList?.contains("cell")) && (s = a?.querySelector(`.cell[data-col="${r._focusCol}"]`) ?? a?.querySelector(".cell[data-col]")), s) {
-      s.classList.add("cell-focus"), s.setAttribute("aria-selected", "true");
-      const d = r.querySelector(".tbw-scroll-area");
-      if (d && s && !e) {
-        const n = r._getHorizontalScrollOffsets?.(a ?? void 0, s) ?? { left: 0, right: 0 };
-        if (!n.skipScroll) {
-          const c = s.getBoundingClientRect(), h = d.getBoundingClientRect(), g = c.left - h.left + d.scrollLeft, p = g + c.width, f = d.scrollLeft + n.left, v = d.scrollLeft + d.clientWidth - n.right;
-          g < f ? d.scrollLeft = g - n.left : p > v && (d.scrollLeft = p - d.clientWidth + n.right);
+  const i = s._focusRow, n = s._virtualization.start ?? 0, a = s._virtualization.end ?? s._rows.length;
+  if (i >= n && i < a) {
+    const r = s._bodyEl.querySelectorAll(".data-grid-row")[i - n];
+    let o = r?.children[s._focusCol];
+    if ((!o || !o.classList?.contains("cell")) && (o = r?.querySelector(`.cell[data-col="${s._focusCol}"]`) ?? r?.querySelector(".cell[data-col]")), o) {
+      o.classList.add("cell-focus"), o.setAttribute("aria-selected", "true");
+      const l = s.querySelector(".tbw-scroll-area");
+      if (l && o && !e) {
+        const d = s._getHorizontalScrollOffsets?.(r ?? void 0, o) ?? { left: 0, right: 0 };
+        if (!d.skipScroll) {
+          const h = o.getBoundingClientRect(), c = l.getBoundingClientRect(), g = h.left - c.left + l.scrollLeft, f = g + h.width, p = l.scrollLeft + d.left, w = l.scrollLeft + l.clientWidth - d.right;
+          g < p ? l.scrollLeft = g - d.left : f > w && (l.scrollLeft = f - l.clientWidth + d.right);
         }
       }
-      if (r._activeEditRows !== void 0 && r._activeEditRows !== -1 && s.classList.contains("editing")) {
-        const n = s.querySelector(w);
-        if (n && document.activeElement !== n)
+      if (s._activeEditRows !== void 0 && s._activeEditRows !== -1 && o.classList.contains("editing")) {
+        const d = o.querySelector(b);
+        if (d && document.activeElement !== d)
           try {
-            n.focus({ preventScroll: !0 });
+            d.focus({ preventScroll: !0 });
           } catch {
           }
-      } else if (!s.contains(document.activeElement)) {
-        s.hasAttribute("tabindex") || s.setAttribute("tabindex", "-1");
+      } else if (!o.contains(document.activeElement)) {
+        o.hasAttribute("tabindex") || o.setAttribute("tabindex", "-1");
         try {
-          s.focus({ preventScroll: !0 });
+          o.focus({ preventScroll: !0 });
         } catch {
         }
       }
     }
   }
 }
-const R = {
+const y = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -58,7 +58,7 @@ const R = {
   dragHandle: "⋮⋮",
   toolPanel: "☰"
 };
-class _ {
+class C {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -282,7 +282,7 @@ class _ {
    */
   get gridIcons() {
     const t = this.grid?.gridConfig?.icons ?? {};
-    return { ...R, ...t };
+    return { ...y, ...t };
   }
   // #region Animation Helpers
   /**
@@ -358,24 +358,35 @@ class _ {
   }
   // #endregion
 }
-const C = 'tbw-grid[data-responsive-animate] .data-grid-row,tbw-grid[data-responsive-animate] .data-grid-row>.cell{transition:opacity var(--tbw-responsive-duration, .2s) ease-out,transform var(--tbw-responsive-duration, .2s) ease-out}tbw-grid[data-responsive][data-responsive-animate] .data-grid-row{animation:responsive-card-enter var(--tbw-responsive-duration, .2s) ease-out}@keyframes responsive-card-enter{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}tbw-grid[data-responsive] .header{display:none!important}tbw-grid[data-responsive] .footer-row{display:none}tbw-grid[data-responsive] .tbw-scroll-area{overflow-x:hidden;min-width:0!important}tbw-grid[data-responsive] .rows-body-wrapper{min-width:0!important}tbw-grid[data-responsive] .data-grid-row{display:block!important;grid-template-columns:none!important;padding:var(--tbw-cell-padding);padding-left:var(--tbw-spacing-xl);border-bottom:1px solid var(--tbw-color-border);min-height:auto!important;height:auto!important;contain:none!important;content-visibility:visible!important;background:var(--tbw-color-bg);position:relative}tbw-grid[data-responsive] .data-grid-row:nth-child(2n){background:var(--tbw-color-row-alt)}tbw-grid[data-responsive] .data-grid-row:hover{background:var(--tbw-color-row-hover)}tbw-grid[data-responsive] .data-grid-row[aria-selected=true]{background:var(--tbw-color-selection)}tbw-grid[data-responsive] .data-grid-row[aria-selected=true]:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tbw-color-accent)}tbw-grid[data-responsive] .data-grid-row>.cell{display:flex!important;justify-content:space-between;align-items:center;padding:var(--tbw-spacing-xs) var(--tbw-spacing-md);width:100%!important;min-width:0!important;min-height:auto!important;height:auto!important;line-height:1.5!important;position:static!important;left:auto!important;right:auto!important;border:none!important;border-bottom:none!important;border-right:none!important;background:transparent!important;white-space:normal!important;overflow:visible!important}tbw-grid[data-responsive] .data-grid-row>.cell:before{content:attr(data-header) ": ";font-weight:600;color:var(--tbw-color-header-fg);flex-shrink:0;margin-right:var(--tbw-spacing-md);min-width:100px}tbw-grid[data-responsive] .data-grid-row>.cell:after{content:none}tbw-grid[data-responsive] .cell[data-utility]{display:none!important}tbw-grid[data-responsive] .data-grid-row:not(:last-child){margin-bottom:var(--tbw-spacing-xs)}tbw-grid[data-responsive] .cell[data-responsive-hidden]{display:none!important}tbw-grid[data-responsive] .cell[data-responsive-value-only]{justify-content:flex-start!important;font-weight:500}tbw-grid[data-responsive] .cell[data-responsive-value-only]:before{display:none!important}tbw-grid:not([data-responsive]) .cell[data-responsive-hidden]{display:none!important}tbw-grid[data-responsive] .tbw-footer,tbw-grid[data-responsive] .tbw-pinned-rows,tbw-grid[data-responsive] .tbw-aggregation-rows{display:none!important}tbw-grid[data-responsive] .tbw-pinned-rows,tbw-grid[data-responsive] .tbw-aggregation-rows,tbw-grid[data-responsive] .tbw-aggregation-row{min-width:0!important}tbw-grid[data-responsive] .data-grid-row.responsive-card{display:block!important;padding:var(--tbw-cell-padding);border-bottom:1px solid var(--tbw-color-border)}tbw-grid[data-responsive] .data-grid-row.responsive-card>*{width:100%}tbw-grid[data-responsive] .data-grid-row.responsive-card .cell:before{display:none}';
-class A extends _ {
+const _ = 'tbw-grid[data-responsive-animate] .data-grid-row,tbw-grid[data-responsive-animate] .data-grid-row>.cell{transition:opacity var(--tbw-responsive-duration, .2s) ease-out,transform var(--tbw-responsive-duration, .2s) ease-out}tbw-grid[data-responsive][data-responsive-animate] .data-grid-row{animation:responsive-card-enter var(--tbw-responsive-duration, .2s) ease-out}@keyframes responsive-card-enter{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}tbw-grid[data-responsive] .header{display:none!important}tbw-grid[data-responsive] .footer-row{display:none}tbw-grid[data-responsive] .tbw-scroll-area{overflow-x:hidden;min-width:0!important}tbw-grid[data-responsive] .rows-body-wrapper{min-width:0!important}tbw-grid[data-responsive] .data-grid-row:not(.group-row){display:block!important;grid-template-columns:none!important;padding:var(--tbw-cell-padding);padding-left:var(--tbw-spacing-xl);border-bottom:1px solid var(--tbw-color-border);min-height:auto!important;height:auto!important;contain:none!important;content-visibility:visible!important;background:var(--tbw-color-bg);position:relative}tbw-grid[data-responsive] .data-grid-row:not(.group-row):nth-child(2n){background:var(--tbw-color-row-alt)}tbw-grid[data-responsive] .data-grid-row:not(.group-row):hover{background:var(--tbw-color-row-hover)}tbw-grid[data-responsive] .data-grid-row:not(.group-row)[aria-selected=true]{background:var(--tbw-color-selection)}tbw-grid[data-responsive] .data-grid-row:not(.group-row)[aria-selected=true]:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tbw-color-accent)}tbw-grid[data-responsive] .data-grid-row:not(.group-row)>.cell{display:flex!important;justify-content:space-between;align-items:center;padding:var(--tbw-spacing-xs) var(--tbw-spacing-md);width:100%!important;min-width:0!important;min-height:auto!important;height:auto!important;line-height:1.5!important;position:static!important;left:auto!important;right:auto!important;border:none!important;border-bottom:none!important;border-right:none!important;background:transparent!important;white-space:normal!important;overflow:visible!important}tbw-grid[data-responsive] .data-grid-row:not(.group-row)>.cell:before{content:attr(data-header) ": ";font-weight:600;color:var(--tbw-color-header-fg);flex-shrink:0;margin-right:var(--tbw-spacing-md);min-width:100px}tbw-grid[data-responsive] .data-grid-row:not(.group-row)>.cell:after{content:none}tbw-grid[data-responsive] .cell[data-utility]{display:none!important}tbw-grid[data-responsive] .cell[data-responsive-hidden]{display:none!important}tbw-grid[data-responsive] .cell[data-responsive-value-only]{justify-content:flex-start!important;font-weight:500}tbw-grid[data-responsive] .cell[data-responsive-value-only]:before{display:none!important}tbw-grid:not([data-responsive]) .cell[data-responsive-hidden]{display:none!important}tbw-grid[data-responsive] .tbw-footer,tbw-grid[data-responsive] .tbw-pinned-rows,tbw-grid[data-responsive] .tbw-aggregation-rows{display:none!important}tbw-grid[data-responsive] .tbw-pinned-rows,tbw-grid[data-responsive] .tbw-aggregation-rows,tbw-grid[data-responsive] .tbw-aggregation-row{min-width:0!important}tbw-grid[data-responsive] .data-grid-row.responsive-card{display:block!important;padding:var(--tbw-cell-padding);border-bottom:1px solid var(--tbw-color-border)}tbw-grid[data-responsive] .data-grid-row.responsive-card>*{width:100%}tbw-grid[data-responsive] .data-grid-row.responsive-card .cell:before{display:none}';
+class E extends C {
   name = "responsive";
   version = "1.0.0";
-  styles = C;
+  styles = _;
+  /**
+   * Plugin manifest declaring incompatibilities with other plugins.
+   */
+  static manifest = {
+    incompatibleWith: [
+      {
+        name: "groupingRows",
+        reason: "Responsive card layout does not yet support row grouping. The variable row heights (cards vs group headers) cause scroll calculation issues."
+      }
+    ]
+  };
   #e;
   #t = !1;
-  #s;
-  #h = !1;
-  #o = 0;
+  #n;
+  #w = !1;
+  #a = 0;
   /** Set of column fields to completely hide */
-  #i = /* @__PURE__ */ new Set();
+  #s = /* @__PURE__ */ new Set();
   /** Set of column fields to show value only (no header label) */
-  #n = /* @__PURE__ */ new Set();
+  #d = /* @__PURE__ */ new Set();
   /** Currently active breakpoint, or null if none */
-  #a = null;
+  #l = null;
   /** Sorted breakpoints from largest to smallest */
-  #l = [];
+  #c = [];
   /**
    * Check if currently in responsive mode.
    * @returns `true` if the grid is in card layout mode
@@ -389,9 +400,9 @@ class A extends _ {
    * @param enabled - Whether to enable responsive mode
    */
   setResponsive(t) {
-    t !== this.#t && (this.#t = t, this.#c(), this.emit("responsive-change", {
+    t !== this.#t && (this.#t = t, this.#u(), this.emit("responsive-change", {
       isResponsive: t,
-      width: this.#o,
+      width: this.#a,
       breakpoint: this.config.breakpoint ?? 0
     }));
   }
@@ -400,7 +411,7 @@ class A extends _ {
    * @param width - New breakpoint width in pixels
    */
   setBreakpoint(t) {
-    this.config.breakpoint = t, this.#u(this.#o);
+    this.config.breakpoint = t, this.#v(this.#a);
   }
   /**
    * Set a custom card renderer.
@@ -415,33 +426,33 @@ class A extends _ {
    * @returns Width of the grid element in pixels
    */
   getWidth() {
-    return this.#o;
+    return this.#a;
   }
   /**
    * Get the currently active breakpoint config (multi-breakpoint mode only).
    * @returns The active BreakpointConfig, or null if no breakpoint is active
    */
   getActiveBreakpoint() {
-    return this.#a;
+    return this.#l;
   }
   attach(t) {
-    super.attach(t), this.#d(this.config.hiddenColumns), this.config.breakpoints?.length && (this.#l = [...this.config.breakpoints].sort((e, i) => i.maxWidth - e.maxWidth)), this.#e = new ResizeObserver((e) => {
+    super.attach(t), this.#h(this.config.hiddenColumns), this.config.breakpoints?.length && (this.#c = [...this.config.breakpoints].sort((e, i) => i.maxWidth - e.maxWidth)), this.#e = new ResizeObserver((e) => {
       const i = e[0]?.contentRect.width ?? 0;
-      this.#o = i, clearTimeout(this.#s), this.#s = setTimeout(() => {
-        this.#u(i);
+      this.#a = i, clearTimeout(this.#n), this.#n = setTimeout(() => {
+        this.#v(i);
       }, this.config.debounceMs ?? 100);
     }), this.#e.observe(this.gridElement);
   }
   /**
    * Build the hidden and value-only column sets from config.
    */
-  #d(t) {
-    if (this.#i.clear(), this.#n.clear(), !!t)
+  #h(t) {
+    if (this.#s.clear(), this.#d.clear(), !!t)
       for (const e of t)
-        typeof e == "string" ? this.#i.add(e) : e.showValue ? this.#n.add(e.field) : this.#i.add(e.field);
+        typeof e == "string" ? this.#s.add(e) : e.showValue ? this.#d.add(e.field) : this.#s.add(e.field);
   }
   detach() {
-    this.#e?.disconnect(), this.#e = void 0, clearTimeout(this.#s), this.#s = void 0, this.gridElement && this.gridElement.removeAttribute("data-responsive"), super.detach();
+    this.#e?.disconnect(), this.#e = void 0, clearTimeout(this.#n), this.#n = void 0, this.gridElement && this.gridElement.removeAttribute("data-responsive"), super.detach();
   }
   /**
    * Apply hidden and value-only columns.
@@ -449,32 +460,32 @@ class A extends _ {
    * In multi-breakpoint mode, applies whenever there's an active breakpoint.
    */
   afterRender() {
-    if (!(this.#l.length > 0 ? this.#a !== null : this.#t))
+    if (this.#_(), !(this.#c.length > 0 ? this.#l !== null : this.#t))
       return;
-    const e = this.#i.size > 0, i = this.#n.size > 0;
+    const e = this.#s.size > 0, i = this.#d.size > 0;
     if (!e && !i)
       return;
-    const o = this.gridElement.querySelectorAll(".cell[data-field]");
-    for (const l of o) {
-      const a = l.getAttribute("data-field");
-      a && (this.#i.has(a) ? (l.setAttribute("data-responsive-hidden", ""), l.removeAttribute("data-responsive-value-only")) : this.#n.has(a) ? (l.setAttribute("data-responsive-value-only", ""), l.removeAttribute("data-responsive-hidden")) : (l.removeAttribute("data-responsive-hidden"), l.removeAttribute("data-responsive-value-only")));
+    const n = this.gridElement.querySelectorAll(".cell[data-field]");
+    for (const a of n) {
+      const r = a.getAttribute("data-field");
+      r && (this.#s.has(r) ? (a.setAttribute("data-responsive-hidden", ""), a.removeAttribute("data-responsive-value-only")) : this.#d.has(r) ? (a.setAttribute("data-responsive-value-only", ""), a.removeAttribute("data-responsive-hidden")) : (a.removeAttribute("data-responsive-hidden"), a.removeAttribute("data-responsive-value-only")));
     }
   }
   /**
    * Check if width has crossed any breakpoint threshold.
    * Handles both single breakpoint (legacy) and multi-breakpoint modes.
    */
-  #u(t) {
-    if (this.#l.length > 0) {
-      this.#g(t);
+  #v(t) {
+    if (this.#c.length > 0) {
+      this.#R(t);
       return;
     }
     const e = this.config.breakpoint ?? 0;
-    e === 0 && !this.#h && (this.#h = !0, console.warn(
+    e === 0 && !this.#w && (this.#w = !0, console.warn(
       "[tbw-grid:ResponsivePlugin] No breakpoint configured. Responsive mode is disabled. Set a breakpoint based on your grid's column count."
     ));
     const i = e > 0 && t < e;
-    i !== this.#t && (this.#t = i, this.#c(), this.emit("responsive-change", {
+    i !== this.#t && (this.#t = i, this.#u(), this.emit("responsive-change", {
       isResponsive: i,
       width: t,
       breakpoint: e
@@ -484,14 +495,14 @@ class A extends _ {
    * Check breakpoints in multi-breakpoint mode.
    * Evaluates breakpoints from largest to smallest, applying the first match.
    */
-  #g(t) {
+  #R(t) {
     let e = null;
-    for (const o of this.#l)
-      t <= o.maxWidth && (e = o);
-    if (e !== this.#a) {
-      this.#a = e, e?.hiddenColumns ? this.#d(e.hiddenColumns) : this.#d(this.config.hiddenColumns);
-      const o = e?.cardLayout === !0;
-      o !== this.#t && (this.#t = o, this.#c()), this.emit("responsive-change", {
+    for (const n of this.#c)
+      t <= n.maxWidth && (e = n);
+    if (e !== this.#l) {
+      this.#l = e, e?.hiddenColumns ? this.#h(e.hiddenColumns) : this.#h(this.config.hiddenColumns);
+      const n = e?.cardLayout === !0;
+      n !== this.#t && (this.#t = n, this.#u()), this.emit("responsive-change", {
         isResponsive: this.#t,
         width: t,
         breakpoint: e?.maxWidth ?? 0
@@ -499,25 +510,25 @@ class A extends _ {
     }
   }
   /** Original row height before entering responsive mode, for restoration on exit */
-  #r;
+  #i;
   /**
    * Apply the responsive state to the grid element.
    * Handles scroll reset when entering responsive mode and row height restoration on exit.
    */
-  #c() {
+  #u() {
     this.gridElement.toggleAttribute("data-responsive", this.#t);
     const t = this.config.animate !== !1;
     this.gridElement.toggleAttribute("data-responsive-animate", t), this.config.animationDuration && this.gridElement.style.setProperty("--tbw-responsive-duration", `${this.config.animationDuration}ms`);
     const e = this.grid;
     if (this.#t) {
-      e._virtualization && (this.#r = e._virtualization.rowHeight);
+      e._virtualization && (this.#i = e._virtualization.rowHeight);
       const i = this.gridElement.querySelector(".tbw-scroll-area");
       i && (i.scrollLeft = 0);
     } else {
       const i = this.gridElement.querySelectorAll(".data-grid-row");
-      for (const o of i)
-        o.style.height = "", o.classList.remove("responsive-card");
-      this.#r && this.#r > 0 && e._virtualization && (e._virtualization.rowHeight = this.#r, this.#r = void 0);
+      for (const n of i)
+        n.style.height = "", n.classList.remove("responsive-card");
+      this.#i && this.#i > 0 && e._virtualization && (e._virtualization.rowHeight = this.#i, this.#i = void 0), this.#r = void 0, this.#o = void 0, this.#g = void 0;
     }
   }
   /**
@@ -532,13 +543,13 @@ class A extends _ {
    * @returns `true` if rendered (prevents default), `void` for default rendering
    */
   renderRow(t, e, i) {
-    if (!this.#t || !this.config.cardRenderer)
+    if (!this.#t || !this.config.cardRenderer || t.__isGroupRow)
       return;
     e.replaceChildren();
-    const o = this.config.cardRenderer(t, i);
-    e.classList.add("responsive-card");
-    const l = this.config.cardRowHeight ?? "auto";
-    return l !== "auto" ? e.style.height = `${l}px` : e.style.height = "auto", e.appendChild(o), !0;
+    const n = this.config.cardRenderer(t, i);
+    e.className = "data-grid-row responsive-card";
+    const a = this.config.cardRowHeight ?? "auto";
+    return a !== "auto" ? e.style.height = `${a}px` : e.style.height = "auto", e.appendChild(n), !0;
   }
   /**
    * Handle keyboard navigation in responsive mode.
@@ -582,8 +593,134 @@ class A extends _ {
     }
     return !1;
   }
+  // ============================================
+  // Variable Height Support for Mixed Row Types
+  // ============================================
+  /** Measured card height from DOM for virtualization calculations */
+  #r;
+  /** Measured group row height from DOM for virtualization calculations */
+  #o;
+  /** Last known card row count for detecting changes (e.g., group expand/collapse) */
+  #g;
+  /**
+   * Get the effective card height for virtualization calculations.
+   * Prioritizes DOM-measured height (actual rendered size) over config,
+   * since content can overflow the configured height.
+   */
+  #b() {
+    if (this.#r && this.#r > 0)
+      return this.#r;
+    const t = this.config.cardRowHeight;
+    return typeof t == "number" && t > 0 ? t : 80;
+  }
+  /**
+   * Get the effective group row height for virtualization calculations.
+   * Uses DOM-measured height, falling back to original row height.
+   */
+  #m() {
+    return this.#o && this.#o > 0 ? this.#o : this.#i ?? 28;
+  }
+  /**
+   * Check if there are any group rows in the current dataset.
+   * Used to determine if we have mixed row heights.
+   */
+  #f() {
+    for (const t of this.rows)
+      if (t.__isGroupRow)
+        return !0;
+    return !1;
+  }
+  /**
+   * Count group rows and card rows in the current dataset.
+   */
+  #y() {
+    let t = 0, e = 0;
+    for (const i of this.rows)
+      i.__isGroupRow ? t++ : e++;
+    return { groupCount: t, cardCount: e };
+  }
+  /**
+   * Return total extra height contributed by mixed row heights.
+   * This is called by the grid's virtualization system to adjust scrollbar height.
+   *
+   * The grid calculates: totalRows * baseRowHeight + pluginExtraHeight
+   *
+   * For mixed layouts (groups + cards), we need to report the difference between
+   * actual heights and what the base calculation assumes:
+   * - Extra for groups: groupCount * (groupHeight - baseHeight)
+   * - Extra for cards: cardCount * (cardHeight - baseHeight)
+   */
+  getExtraHeight() {
+    if (!this.#t || !this.config.cardRenderer || !this.#f())
+      return 0;
+    const t = this.#i ?? 28, e = this.#m(), i = this.#b(), { groupCount: n, cardCount: a } = this.#y(), r = n * Math.max(0, e - t), o = a * Math.max(0, i - t);
+    return r + o;
+  }
+  /**
+   * Return extra height that appears before a given row index.
+   * Used by virtualization to correctly calculate scroll positions.
+   *
+   * Like getExtraHeight, this accounts for both group and card row heights.
+   */
+  getExtraHeightBefore(t) {
+    if (!this.#t || !this.config.cardRenderer || !this.#f())
+      return 0;
+    const e = this.#i ?? 28, i = this.#m(), n = this.#b(), a = Math.max(0, i - e), r = Math.max(0, n - e);
+    let o = 0, l = 0;
+    const d = this.rows, h = Math.min(t, d.length);
+    for (let c = 0; c < h; c++)
+      d[c].__isGroupRow ? o++ : l++;
+    return o * a + l * r;
+  }
+  /**
+   * Count the number of card rows (non-group rows) in the current dataset.
+   */
+  #C() {
+    let t = 0;
+    for (const e of this.rows)
+      e.__isGroupRow || t++;
+    return t;
+  }
+  /** Pending refresh scheduled via microtask */
+  #p = !1;
+  /**
+   * Measure card height from DOM after render and detect row count changes.
+   * Called in afterRender to ensure scroll calculations are accurate.
+   *
+   * This handles two scenarios:
+   * 1. Card height changes (content overflow, dynamic sizing)
+   * 2. Card row count changes (group expand/collapse)
+   * 3. Group row height changes
+   *
+   * For uniform card layouts (no groups), we update the virtualization row height
+   * directly to the card height. For mixed layouts (groups + cards), we use the
+   * getExtraHeight mechanism to report height differences.
+   *
+   * The refresh is deferred via microtask to avoid nested render cycles.
+   */
+  #_() {
+    if (!this.#t || !this.config.cardRenderer)
+      return;
+    let t = !1;
+    const e = this.grid, i = this.#f(), n = this.#C();
+    if (n !== this.#g && (this.#g = n, t = !0), i) {
+      const r = this.gridElement.querySelector(".data-grid-row.group-row");
+      if (r) {
+        const o = r.getBoundingClientRect().height;
+        o > 0 && o !== this.#o && (this.#o = o, t = !0);
+      }
+    }
+    const a = this.gridElement.querySelector(".data-grid-row.responsive-card");
+    if (a) {
+      const r = a.getBoundingClientRect().height;
+      r > 0 && r !== this.#r && (this.#r = r, t = !0, !i && e._virtualization && (e._virtualization.rowHeight = r));
+    }
+    t && !this.#p && (this.#p = !0, queueMicrotask(() => {
+      this.#p = !1, this.grid && this.#t && this.grid.refreshVirtualWindow?.(!0, !0);
+    }));
+  }
 }
 export {
-  A as ResponsivePlugin
+  E as ResponsivePlugin
 };
 //# sourceMappingURL=index.js.map