@appius-fr/apx 2.7.0 → 2.8.0

package/dist/APX.standalone.js

@@ -194,67 +194,74 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `/* APX Scrollable Table: scrollable tbody with fixed thead/tfoot and aligned columns (CSS Grid + subgrid) */
-
-.apx-scrollable-table {
-    display: grid;
-    grid-template-columns: repeat(var(--apx-scrollable-cols, 3), minmax(0, 1fr));
-    grid-template-rows: auto fit-content(var(--apx-scrollable-body-max-height, 200px)) auto;
-    width: 100%;
-}
-
-/* Table with no tfoot: thead + tbody only */
-.apx-scrollable-table:not(.apx-scrollable-table--has-tfoot) {
-    grid-template-rows: auto fit-content(var(--apx-scrollable-body-max-height, 200px));
-}
-
-/* Table with no thead: tbody + tfoot only */
-.apx-scrollable-table.apx-scrollable-table--no-thead {
-    grid-template-rows: fit-content(var(--apx-scrollable-body-max-height, 200px)) auto;
-}
-
-/* Table with neither thead nor tfoot: tbody only */
-.apx-scrollable-table.apx-scrollable-table--no-thead:not(.apx-scrollable-table--has-tfoot) {
-    grid-template-rows: fit-content(var(--apx-scrollable-body-max-height, 200px));
-}
-
-.apx-scrollable-table > thead,
-.apx-scrollable-table > tbody,
-.apx-scrollable-table > tfoot {
-    display: grid;
-    grid-template-columns: subgrid;
-    grid-column: 1 / -1;
-    grid-template-rows: repeat(var(--apx-scrollable-thead-rows, 1), auto);
-    min-height: 0;
-}
-
-.apx-scrollable-table > thead {
-    grid-template-rows: repeat(var(--apx-scrollable-thead-rows, 1), auto);
-}
-
-.apx-scrollable-table > tbody {
-    grid-template-rows: repeat(var(--apx-scrollable-tbody-rows, 1), auto);
-    overflow: auto;
-    /* Reserve space for the vertical scrollbar so it doesn't shrink content width and trigger a horizontal scrollbar */
-    scrollbar-gutter: stable;
-}
-
-.apx-scrollable-table > tfoot {
-    grid-template-rows: repeat(var(--apx-scrollable-tfoot-rows, 1), auto);
-}
-
-.apx-scrollable-table > thead > tr,
-.apx-scrollable-table > tbody > tr,
-.apx-scrollable-table > tfoot > tr {
-    display: contents;
-}
-
-.apx-scrollable-table th,
-.apx-scrollable-table td {
-    /* Grid placement set by JS (grid-row, grid-column) for colspan/rowspan */
-    min-width: 0;
-}
-`, "",{"version":3,"sources":["webpack://./modules/scrollableTable/css/scrollableTable.css"],"names":[],"mappings":"AAAA,2GAA2G;;AAE3G;IACI,aAAa;IACb,4EAA4E;IAC5E,uFAAuF;IACvF,WAAW;AACf;;AAEA,4CAA4C;AAC5C;IACI,kFAAkF;AACtF;;AAEA,4CAA4C;AAC5C;IACI,kFAAkF;AACtF;;AAEA,mDAAmD;AACnD;IACI,6EAA6E;AACjF;;AAEA;;;IAGI,aAAa;IACb,8BAA8B;IAC9B,mBAAmB;IACnB,qEAAqE;IACrE,aAAa;AACjB;;AAEA;IACI,qEAAqE;AACzE;;AAEA;IACI,qEAAqE;IACrE,cAAc;IACd,mHAAmH;IACnH,wBAAwB;AAC5B;;AAEA;IACI,qEAAqE;AACzE;;AAEA;;;IAGI,iBAAiB;AACrB;;AAEA;;IAEI,yEAAyE;IACzE,YAAY;AAChB","sourcesContent":["/* APX Scrollable Table: scrollable tbody with fixed thead/tfoot and aligned columns (CSS Grid + subgrid) */\r\n\r\n.apx-scrollable-table {\r\n    display: grid;\r\n    grid-template-columns: repeat(var(--apx-scrollable-cols, 3), minmax(0, 1fr));\r\n    grid-template-rows: auto fit-content(var(--apx-scrollable-body-max-height, 200px)) auto;\r\n    width: 100%;\r\n}\r\n\r\n/* Table with no tfoot: thead + tbody only */\r\n.apx-scrollable-table:not(.apx-scrollable-table--has-tfoot) {\r\n    grid-template-rows: auto fit-content(var(--apx-scrollable-body-max-height, 200px));\r\n}\r\n\r\n/* Table with no thead: tbody + tfoot only */\r\n.apx-scrollable-table.apx-scrollable-table--no-thead {\r\n    grid-template-rows: fit-content(var(--apx-scrollable-body-max-height, 200px)) auto;\r\n}\r\n\r\n/* Table with neither thead nor tfoot: tbody only */\r\n.apx-scrollable-table.apx-scrollable-table--no-thead:not(.apx-scrollable-table--has-tfoot) {\r\n    grid-template-rows: fit-content(var(--apx-scrollable-body-max-height, 200px));\r\n}\r\n\r\n.apx-scrollable-table > thead,\r\n.apx-scrollable-table > tbody,\r\n.apx-scrollable-table > tfoot {\r\n    display: grid;\r\n    grid-template-columns: subgrid;\r\n    grid-column: 1 / -1;\r\n    grid-template-rows: repeat(var(--apx-scrollable-thead-rows, 1), auto);\r\n    min-height: 0;\r\n}\r\n\r\n.apx-scrollable-table > thead {\r\n    grid-template-rows: repeat(var(--apx-scrollable-thead-rows, 1), auto);\r\n}\r\n\r\n.apx-scrollable-table > tbody {\r\n    grid-template-rows: repeat(var(--apx-scrollable-tbody-rows, 1), auto);\r\n    overflow: auto;\r\n    /* Reserve space for the vertical scrollbar so it doesn't shrink content width and trigger a horizontal scrollbar */\r\n    scrollbar-gutter: stable;\r\n}\r\n\r\n.apx-scrollable-table > tfoot {\r\n    grid-template-rows: repeat(var(--apx-scrollable-tfoot-rows, 1), auto);\r\n}\r\n\r\n.apx-scrollable-table > thead > tr,\r\n.apx-scrollable-table > tbody > tr,\r\n.apx-scrollable-table > tfoot > tr {\r\n    display: contents;\r\n}\r\n\r\n.apx-scrollable-table th,\r\n.apx-scrollable-table td {\r\n    /* Grid placement set by JS (grid-row, grid-column) for colspan/rowspan */\r\n    min-width: 0;\r\n}\r\n"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, `/* APX Scrollable Table: scrollable tbody with fixed thead/tfoot and aligned columns (CSS Grid + subgrid)
+   Use !important so page styles (e.g. display: table) do not override the grid layout. */
+
+/* --apx-scrollable-template-columns: set by JS (measured widths + gutter); fallback = equal columns + gutter */
+/* --apx-scrollable-gutter-width: space for vertical scrollbar so it does not overlap the last column (set to 0 to allow overlap) */
+/* --apx-scrollable-body-height: when class apx-scrollable-table--body-height is set, tbody row uses fixed height instead of max-height */
+.apx-scrollable-table {
+    display: grid !important;
+    grid-template-columns: var(--apx-scrollable-template-columns, repeat(var(--apx-scrollable-cols, 3), minmax(0, 1fr)) minmax(var(--apx-scrollable-gutter-width, 17px), var(--apx-scrollable-gutter-width, 17px)));
+    grid-template-rows: auto var(--apx-scrollable-body-row-size, fit-content(var(--apx-scrollable-body-max-height, 200px))) auto;
+    width: 100%;
+    table-layout: unset !important;
+}
+
+.apx-scrollable-table--body-height {
+    --apx-scrollable-body-row-size: var(--apx-scrollable-body-max-height, 200px);
+}
+
+/* Table with no tfoot: thead + tbody only */
+.apx-scrollable-table:not(.apx-scrollable-table--has-tfoot) {
+    grid-template-rows: auto var(--apx-scrollable-body-row-size, fit-content(var(--apx-scrollable-body-max-height, 200px)));
+}
+
+/* Table with no thead: tbody + tfoot only */
+.apx-scrollable-table.apx-scrollable-table--no-thead {
+    grid-template-rows: var(--apx-scrollable-body-row-size, fit-content(var(--apx-scrollable-body-max-height, 200px))) auto;
+}
+
+/* Table with neither thead nor tfoot: tbody only */
+.apx-scrollable-table.apx-scrollable-table--no-thead:not(.apx-scrollable-table--has-tfoot) {
+    grid-template-rows: var(--apx-scrollable-body-row-size, fit-content(var(--apx-scrollable-body-max-height, 200px)));
+}
+
+/* --apx-scrollable-*-template-rows: set by JS (measured heights) or override in CSS / via options */
+.apx-scrollable-table > thead,
+.apx-scrollable-table > tbody,
+.apx-scrollable-table > tfoot {
+    display: grid !important;
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+    min-height: 0;
+}
+
+.apx-scrollable-table > thead {
+    grid-template-rows: var(--apx-scrollable-thead-template-rows, repeat(var(--apx-scrollable-thead-rows, 1), auto));
+}
+
+.apx-scrollable-table > tbody {
+    grid-template-rows: var(--apx-scrollable-tbody-template-rows, repeat(var(--apx-scrollable-tbody-rows, 1), auto));
+    overflow: auto;
+}
+
+.apx-scrollable-table > tfoot {
+    grid-template-rows: var(--apx-scrollable-tfoot-template-rows, repeat(var(--apx-scrollable-tfoot-rows, 1), auto));
+}
+
+.apx-scrollable-table > thead > tr,
+.apx-scrollable-table > tbody > tr,
+.apx-scrollable-table > tfoot > tr {
+    display: contents !important;
+}
+
+.apx-scrollable-table th,
+.apx-scrollable-table td {
+    min-width: 0;
+    box-sizing: border-box;
+}
+`, "",{"version":3,"sources":["webpack://./modules/scrollableTable/css/scrollableTable.css"],"names":[],"mappings":"AAAA;yFACyF;;AAEzF,+GAA+G;AAC/G,mIAAmI;AACnI,yIAAyI;AACzI;IACI,wBAAwB;IACxB,+MAA+M;IAC/M,4HAA4H;IAC5H,WAAW;IACX,8BAA8B;AAClC;;AAEA;IACI,4EAA4E;AAChF;;AAEA,4CAA4C;AAC5C;IACI,uHAAuH;AAC3H;;AAEA,4CAA4C;AAC5C;IACI,uHAAuH;AAC3H;;AAEA,mDAAmD;AACnD;IACI,kHAAkH;AACtH;;AAEA,oGAAoG;AACpG;;;IAGI,wBAAwB;IACxB,8BAA8B;IAC9B,mBAAmB;IACnB,aAAa;AACjB;;AAEA;IACI,gHAAgH;AACpH;;AAEA;IACI,gHAAgH;IAChH,cAAc;AAClB;;AAEA;IACI,gHAAgH;AACpH;;AAEA;;;IAGI,4BAA4B;AAChC;;AAEA;;IAEI,YAAY;IACZ,sBAAsB;AAC1B","sourcesContent":["/* APX Scrollable Table: scrollable tbody with fixed thead/tfoot and aligned columns (CSS Grid + subgrid)\n   Use !important so page styles (e.g. display: table) do not override the grid layout. */\n\n/* --apx-scrollable-template-columns: set by JS (measured widths + gutter); fallback = equal columns + gutter */\n/* --apx-scrollable-gutter-width: space for vertical scrollbar so it does not overlap the last column (set to 0 to allow overlap) */\n/* --apx-scrollable-body-height: when class apx-scrollable-table--body-height is set, tbody row uses fixed height instead of max-height */\n.apx-scrollable-table {\n    display: grid !important;\n    grid-template-columns: var(--apx-scrollable-template-columns, repeat(var(--apx-scrollable-cols, 3), minmax(0, 1fr)) minmax(var(--apx-scrollable-gutter-width, 17px), var(--apx-scrollable-gutter-width, 17px)));\n    grid-template-rows: auto var(--apx-scrollable-body-row-size, fit-content(var(--apx-scrollable-body-max-height, 200px))) auto;\n    width: 100%;\n    table-layout: unset !important;\n}\n\n.apx-scrollable-table--body-height {\n    --apx-scrollable-body-row-size: var(--apx-scrollable-body-max-height, 200px);\n}\n\n/* Table with no tfoot: thead + tbody only */\n.apx-scrollable-table:not(.apx-scrollable-table--has-tfoot) {\n    grid-template-rows: auto var(--apx-scrollable-body-row-size, fit-content(var(--apx-scrollable-body-max-height, 200px)));\n}\n\n/* Table with no thead: tbody + tfoot only */\n.apx-scrollable-table.apx-scrollable-table--no-thead {\n    grid-template-rows: var(--apx-scrollable-body-row-size, fit-content(var(--apx-scrollable-body-max-height, 200px))) auto;\n}\n\n/* Table with neither thead nor tfoot: tbody only */\n.apx-scrollable-table.apx-scrollable-table--no-thead:not(.apx-scrollable-table--has-tfoot) {\n    grid-template-rows: var(--apx-scrollable-body-row-size, fit-content(var(--apx-scrollable-body-max-height, 200px)));\n}\n\n/* --apx-scrollable-*-template-rows: set by JS (measured heights) or override in CSS / via options */\n.apx-scrollable-table > thead,\n.apx-scrollable-table > tbody,\n.apx-scrollable-table > tfoot {\n    display: grid !important;\n    grid-template-columns: subgrid;\n    grid-column: 1 / -1;\n    min-height: 0;\n}\n\n.apx-scrollable-table > thead {\n    grid-template-rows: var(--apx-scrollable-thead-template-rows, repeat(var(--apx-scrollable-thead-rows, 1), auto));\n}\n\n.apx-scrollable-table > tbody {\n    grid-template-rows: var(--apx-scrollable-tbody-template-rows, repeat(var(--apx-scrollable-tbody-rows, 1), auto));\n    overflow: auto;\n}\n\n.apx-scrollable-table > tfoot {\n    grid-template-rows: var(--apx-scrollable-tfoot-template-rows, repeat(var(--apx-scrollable-tfoot-rows, 1), auto));\n}\n\n.apx-scrollable-table > thead > tr,\n.apx-scrollable-table > tbody > tr,\n.apx-scrollable-table > tfoot > tr {\n    display: contents !important;\n}\n\n.apx-scrollable-table th,\n.apx-scrollable-table td {\n    min-width: 0;\n    box-sizing: border-box;\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -1267,34 +1274,6 @@ module.exports = "data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%
 "use strict";
 module.exports = "data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2732%27 height=%2732%27 viewBox=%270 0 32 32%27%3E%3Cpath d=%27M8 8L24 24M24 8L8 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E";
 
-/***/ }),
-
-/***/ "./modules/common.mjs":
-/*!****************************!*\
-  !*** ./modules/common.mjs ***!
-  \****************************/
-/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   loadCss: () => (/* binding */ loadCss)
-/* harmony export */ });
-// Function to load the CSS from a given URL
-function loadCss(url) {
-  return fetch(url).then(function (response) {
-    return response.text();
-  }).then(function (css) {
-    var styleSheet = document.createElement("style");
-    styleSheet.type = "text/css";
-    styleSheet.textContent = css; // Use textContent instead of innerText
-    document.head.appendChild(styleSheet);
-  })["catch"](function (error) {
-    console.error("Failed to load CSS:", error);
-  });
-}
-
-
 /***/ }),
 
 /***/ "./modules/dialog/dialog.mjs":
@@ -1914,65 +1893,184 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (/* binding */ augmentWithScrollableTable)
 /* harmony export */ });
 /* harmony import */ var _css_scrollableTable_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./css/scrollableTable.css */ "./modules/scrollableTable/css/scrollableTable.css");
+/* harmony import */ var _tools_getScrollbarSize_mjs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../tools/getScrollbarSize.mjs */ "./modules/tools/getScrollbarSize.mjs");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 
+
 var DATA_KEY = '_apxScrollableTable';
 var CLASS_TABLE = 'apx-scrollable-table';
 var DEFAULT_MAX_HEIGHT = '200px';
+var DEFAULT_GUTTER_PX = 17;
+var THROTTLE_MS = 16;
+
+/** @type {Set<HTMLTableElement>} */
+var dynamicTables = new Set();
+/** @type {Map<Element, Set<HTMLTableElement>>} */
+var scrollSourceToTables = new Map();
+/** @type {Map<Element, Set<HTMLTableElement>>} */
+var resizeSourceToTables = new Map();
+/** @type {boolean} */
+var resizeWindowAttached = false;
+/** @type {ResizeObserver|null} */
+var resizeObserver = null;
+/** @type {number} */
+var throttleLast = 0;
+/** @type {number|null} */
+var throttleRaf = null;
 
-/**
- * Get number of columns from the first row that has cells (sum of colspan).
- * @param {HTMLTableSectionElement} section - thead, tbody, or tfoot
- * @returns {number}
+/**
+ * Sum of colspans for one row (direct th/td children of tr).
+ * @param {HTMLTableRowElement} tr
+ * @returns {number}
  */
-function getColumnCountFromSection(section) {
-  var firstRow = section === null || section === void 0 ? void 0 : section.querySelector(':scope > tr');
-  if (!firstRow) return 0;
+function getRowColumnCount(tr) {
   var cols = 0;
-  firstRow.querySelectorAll(':scope > th, :scope > td').forEach(function (cell) {
+  tr.querySelectorAll(':scope > th, :scope > td').forEach(function (cell) {
     cols += parseInt(cell.getAttribute('colspan'), 10) || 1;
   });
   return cols;
 }
 
-/**
- * Get total column count for the table (from thead or tbody first row).
- * @param {HTMLTableElement} table
- * @returns {number}
+/**
+ * Get maximum column count in a section (max sum of colspans across all rows).
+ * @param {HTMLTableSectionElement} section - thead, tbody, or tfoot
+ * @returns {number}
+ */
+function getColumnCountFromSection(section) {
+  if (!section) return 0;
+  var rows = section.querySelectorAll(':scope > tr');
+  var maxCols = 0;
+  rows.forEach(function (tr) {
+    var sum = getRowColumnCount(tr);
+    if (sum > maxCols) maxCols = sum;
+  });
+  return maxCols;
+}
+
+/**
+ * Get total column count for the table (max across thead, tbody, tfoot).
+ * @param {HTMLTableElement} table
+ * @returns {number}
  */
 function getTableColumnCount(table) {
   var thead = table.querySelector('thead');
   var tbody = table.querySelector('tbody');
-  var countFromThead = thead ? getColumnCountFromSection(thead) : 0;
-  var countFromTbody = tbody ? getColumnCountFromSection(tbody) : 0;
-  return countFromThead || countFromTbody || 1;
+  var tfoot = table.querySelector('tfoot');
+  var countThead = thead ? getColumnCountFromSection(thead) : 0;
+  var countTbody = tbody ? getColumnCountFromSection(tbody) : 0;
+  var countTfoot = tfoot ? getColumnCountFromSection(tfoot) : 0;
+  return Math.max(countThead, countTbody, countTfoot, 1);
 }
 
-/**
- * Count direct tr children in a section.
- * @param {HTMLTableSectionElement} section
- * @returns {number}
+/**
+ * Measure current column widths from the table in its natural layout (before applying scrollable class).
+ * Prefers a row where each cell has colspan 1 so we get one width per column; otherwise splits cell widths by colspan.
+ * @param {HTMLTableElement} table - table not yet with scrollable class
+ * @param {number} numCols
+ * @returns {number[]} pixel widths per column
+ */
+function measureColumnWidths(table, numCols) {
+  var thead = table.querySelector('thead');
+  var tbody = table.querySelector('tbody');
+  var sections = [thead, tbody].filter(Boolean);
+  /** @type {HTMLTableRowElement|null} */
+  var bestRow = null;
+  var _iterator = _createForOfIteratorHelper(sections),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var section = _step.value;
+      var rows = section.querySelectorAll(':scope > tr');
+      var _iterator3 = _createForOfIteratorHelper(rows),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var tr = _step3.value;
+          var _cells = tr.querySelectorAll(':scope > th, :scope > td');
+          if (getRowColumnCount(tr) !== numCols) continue;
+          var allSingle = Array.from(_cells).every(function (c) {
+            return (parseInt(c.getAttribute('colspan'), 10) || 1) === 1;
+          });
+          if (allSingle && _cells.length === numCols) {
+            bestRow = tr;
+            break;
+          }
+          if (!bestRow) bestRow = tr;
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+      if (bestRow && Array.from(bestRow.querySelectorAll(':scope > th, :scope > td')).every(function (c) {
+        return (parseInt(c.getAttribute('colspan'), 10) || 1) === 1;
+      })) break;
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  if (!bestRow) return [];
+  var widths = new Array(numCols).fill(0);
+  var cells = bestRow.querySelectorAll(':scope > th, :scope > td');
+  var col = 0;
+  var _iterator2 = _createForOfIteratorHelper(cells),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var cell = _step2.value;
+      var span = Math.min(parseInt(cell.getAttribute('colspan'), 10) || 1, numCols - col);
+      if (span <= 0) break;
+      var w = cell.getBoundingClientRect().width;
+      var perCol = w / span;
+      for (var _i = 0; _i < span; _i++) widths[col + _i] = perCol;
+      col += span;
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  if (col === 0) return [];
+  var fallback = widths.some(function (w) {
+    return w > 0;
+  }) ? Math.max.apply(Math, [80].concat(_toConsumableArray(widths.filter(function (w) {
+    return w > 0;
+  })))) / 2 : 80;
+  for (var i = 0; i < numCols; i++) if (widths[i] <= 0) widths[i] = fallback;
+  return widths.slice(0, numCols);
+}
+
+/**
+ * Count direct tr children in a section.
+ * @param {HTMLTableSectionElement} section
+ * @returns {number}
  */
 function getRowCount(section) {
   if (!section) return 0;
   return section.querySelectorAll(':scope > tr').length;
 }
 
-/**
- * Build a 2D grid of occupied slots for a section (for rowspan/colspan placement).
- * Place each cell in DOM order; return a list of { cell, row, col, colspan, rowspan }.
- * @param {HTMLTableSectionElement} section
- * @param {number} numRows
- * @param {number} numCols
- * @returns {{ cell: HTMLTableCellElement, row: number, col: number, colspan: number, rowspan: number }[]}
+/**
+ * Build a 2D grid of occupied slots for a section (for rowspan/colspan placement).
+ * Place each cell in DOM order; return a list of { cell, row, col, colspan, rowspan }.
+ * @param {HTMLTableSectionElement} section
+ * @param {number} numRows
+ * @param {number} numCols
+ * @returns {{ cell: HTMLTableCellElement, row: number, col: number, colspan: number, rowspan: number }[]}
  */
 function computeCellPlacements(section, numRows, numCols) {
   if (!section || numRows === 0 || numCols === 0) return [];
@@ -1986,11 +2084,11 @@ function computeCellPlacements(section, numRows, numCols) {
   for (var r = 0; r < rows.length; r++) {
     var tr = rows[r];
     var cells = tr.querySelectorAll(':scope > th, :scope > td');
-    var _iterator = _createForOfIteratorHelper(cells),
-      _step;
+    var _iterator4 = _createForOfIteratorHelper(cells),
+      _step4;
     try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var cell = _step.value;
+      for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+        var cell = _step4.value;
         var colspan = Math.min(parseInt(cell.getAttribute('colspan'), 10) || 1, numCols);
         var rowspan = Math.min(parseInt(cell.getAttribute('rowspan'), 10) || 1, numRows - r);
         var col = 0;
@@ -2020,16 +2118,16 @@ function computeCellPlacements(section, numRows, numCols) {
         });
       }
     } catch (err) {
-      _iterator.e(err);
+      _iterator4.e(err);
     } finally {
-      _iterator.f();
+      _iterator4.f();
     }
   }
   return placements;
 }
 
-/**
- * Apply grid placement styles to a list of placements (1-based line numbers for CSS Grid).
+/**
+ * Apply grid placement styles to a list of placements (1-based line numbers for CSS Grid).
  */
 function applyPlacements(placements) {
   placements.forEach(function (_ref) {
@@ -2043,9 +2141,9 @@ function applyPlacements(placements) {
   });
 }
 
-/**
- * Clear grid placement styles from all th/td in a table (for refresh).
- * @param {HTMLTableElement} table
+/**
+ * Clear grid placement styles from all th/td in a table (for refresh).
+ * @param {HTMLTableElement} table
  */
 function clearPlacements(table) {
   table.querySelectorAll('th, td').forEach(function (cell) {
@@ -2054,67 +2152,394 @@ function clearPlacements(table) {
   });
 }
 
-/**
- * Normalize maxHeight option to a CSS length string.
- * @param {number|string} value
- * @returns {string}
+/**
+ * Normalize height/maxHeight option to a CSS length string.
+ * @param {number|string} value
+ * @returns {string}
  */
-function normalizeMaxHeight(value) {
+function normalizeHeight(value) {
   if (value == null) return DEFAULT_MAX_HEIGHT;
   if (typeof value === 'number') return "".concat(value, "px");
   return String(value);
 }
 
-/**
- * Apply scrollable table layout to a single table.
- * @param {HTMLTableElement} table
- * @param {{ maxHeight?: number|string }} options
+/**
+ * Resolve current body height from options: either bodyHeightDynamic.get(table) or static height/maxHeight.
+ * @param {Object} options - scrollableTable options (may include bodyHeightDynamic, height, maxHeight)
+ * @param {HTMLTableElement} table
+ * @returns {{ bodySize: string, useFixedHeight: boolean }}
+ */
+function resolveBodyHeight(options, table) {
+  var dyn = options.bodyHeightDynamic;
+  if (dyn && typeof dyn.get === 'function') {
+    var value = dyn.get(table);
+    var _bodySize = normalizeHeight(value);
+    var _useFixedHeight = dyn.useAs === 'height';
+    return {
+      bodySize: _bodySize,
+      useFixedHeight: _useFixedHeight
+    };
+  }
+  var useFixedHeight = options.height != null;
+  var raw = useFixedHeight ? options.height : options.maxHeight;
+  var bodySize = normalizeHeight(raw);
+  return {
+    bodySize: bodySize,
+    useFixedHeight: useFixedHeight
+  };
+}
+
+/**
+ * Update only the tbody height CSS variable and class (used on scroll/resize for dynamic height).
+ * @param {HTMLTableElement} table
+ * @param {Object} options - full scrollableTable options (with ref.options when called from throttle)
+ */
+function updateTableBodyHeight(table, options) {
+  var _resolveBodyHeight = resolveBodyHeight(options, table),
+    bodySize = _resolveBodyHeight.bodySize,
+    useFixedHeight = _resolveBodyHeight.useFixedHeight;
+  table.style.setProperty('--apx-scrollable-body-max-height', bodySize);
+  table.classList.toggle('apx-scrollable-table--body-height', useFixedHeight);
+}
+
+/**
+ * Run lazy cleanup then updateTableBodyHeight for all tables still in dynamicTables. (Called by throttled entry point or RAF.)
  */
-function applyScrollableTable(table, options) {
+function flushDynamicHeightUpdate() {
+  var toRemove = [];
+  dynamicTables.forEach(function (table) {
+    if (!table.isConnected) toRemove.push(table);
+  });
+  toRemove.forEach(function (table) {
+    return removeTableFromDynamicSources(table);
+  });
+  dynamicTables.forEach(function (table) {
+    var ref = table[DATA_KEY];
+    if (ref !== null && ref !== void 0 && ref.options) updateTableBodyHeight(table, ref.options);
+  });
+}
+
+/**
+ * Throttled entry: run flushDynamicHeightUpdate now or schedule with RAF.
+ */
+function runDynamicHeightUpdate() {
+  var now = Date.now();
+  if (now - throttleLast < THROTTLE_MS) {
+    if (!throttleRaf) {
+      throttleRaf = requestAnimationFrame(function () {
+        throttleRaf = null;
+        throttleLast = Date.now();
+        flushDynamicHeightUpdate();
+      });
+    }
+    return;
+  }
+  throttleLast = now;
+  flushDynamicHeightUpdate();
+}
+
+/**
+ * Resolve updateOn into scroll targets (Element[]) and resize: { window: boolean, elements: Element[] }.
+ * @param {Object} options - options.bodyHeightDynamic.updateOn
+ * @returns {{ scrollTargets: Element[], resizeWindow: boolean, resizeElements: Element[] }}
+ */
+function resolveUpdateOn(options) {
+  var _options$bodyHeightDy;
+  var u = options === null || options === void 0 || (_options$bodyHeightDy = options.bodyHeightDynamic) === null || _options$bodyHeightDy === void 0 ? void 0 : _options$bodyHeightDy.updateOn;
+  var scrollOn = u === null || u === void 0 ? void 0 : u.scrollOn;
+  var resizeOn = u === null || u === void 0 ? void 0 : u.resizeOn;
+  var scrollTargets = [];
+  if (scrollOn != null && Array.isArray(scrollOn) && scrollOn.length > 0) {
+    scrollOn.forEach(function (x) {
+      if (x === 'document') scrollTargets.push(document.documentElement);else if (x && typeof x.addEventListener === 'function') scrollTargets.push(x);
+    });
+  } else if ((u === null || u === void 0 ? void 0 : u.scroll) === true) {
+    scrollTargets.push(document.documentElement);
+    scrollTargets.push(typeof window !== 'undefined' ? window : document.documentElement);
+  }
+  var resizeWindow = false;
+  var resizeElements = [];
+  if (resizeOn != null && Array.isArray(resizeOn) && resizeOn.length > 0) {
+    resizeOn.forEach(function (x) {
+      if (x === 'window') resizeWindow = true;else if (x && typeof x.addEventListener === 'function') resizeElements.push(x);
+    });
+  } else if ((u === null || u === void 0 ? void 0 : u.resize) !== false) {
+    resizeWindow = true;
+    resizeElements.push(document.documentElement);
+  }
+  return {
+    scrollTargets: scrollTargets,
+    resizeWindow: resizeWindow,
+    resizeElements: resizeElements
+  };
+}
+
+/**
+ * Remove table from dynamicTables and from all scroll/resize Maps; detach listeners if Set becomes empty.
+ * @param {HTMLTableElement} table
+ */
+function removeTableFromDynamicSources(table) {
+  dynamicTables["delete"](table);
+  scrollSourceToTables.forEach(function (set, el) {
+    set["delete"](table);
+    if (set.size === 0) {
+      scrollSourceToTables["delete"](el);
+      el.removeEventListener('scroll', onScrollThrottled);
+    }
+  });
+  resizeSourceToTables.forEach(function (set, el) {
+    set["delete"](table);
+    if (set.size === 0) {
+      resizeSourceToTables["delete"](el);
+      if (resizeObserver) resizeObserver.unobserve(el);
+    }
+  });
+  if (resizeWindowAttached && dynamicTables.size === 0) {
+    window.removeEventListener('resize', onResizeThrottled);
+    resizeWindowAttached = false;
+  }
+}
+function onScrollThrottled() {
+  runDynamicHeightUpdate();
+}
+function onResizeThrottled() {
+  runDynamicHeightUpdate();
+}
+
+/**
+ * Register a table with bodyHeightDynamic: add to Set and attach scroll/resize listeners per updateOn.
+ * @param {HTMLTableElement} table
+ * @param {Object} options - full options (ref.options)
+ */
+function registerDynamicTable(table, options) {
+  var _resolveUpdateOn = resolveUpdateOn(options),
+    scrollTargets = _resolveUpdateOn.scrollTargets,
+    resizeWindow = _resolveUpdateOn.resizeWindow,
+    resizeElements = _resolveUpdateOn.resizeElements;
+  dynamicTables.add(table);
+  scrollTargets.forEach(function (el) {
+    var set = scrollSourceToTables.get(el);
+    if (!set) {
+      set = new Set();
+      scrollSourceToTables.set(el, set);
+      el.addEventListener('scroll', onScrollThrottled, {
+        passive: true
+      });
+    }
+    set.add(table);
+  });
+  if (resizeWindow) {
+    if (!resizeWindowAttached) {
+      resizeWindowAttached = true;
+      window.addEventListener('resize', onResizeThrottled, {
+        passive: true
+      });
+    }
+  }
+  resizeElements.forEach(function (el) {
+    var set = resizeSourceToTables.get(el);
+    if (!set) {
+      set = new Set();
+      resizeSourceToTables.set(el, set);
+      if (!resizeObserver) resizeObserver = new ResizeObserver(onResizeThrottled);
+      resizeObserver.observe(el);
+    }
+    set.add(table);
+  });
+}
+
+/**
+ * Build grid-template-columns from measured widths and optional overrides per column.
+ * @param {number} numCols
+ * @param {number[]} columnWidths
+ * @param {Object<number, string>|(string|null)[]} columnOverrides - map column index → CSS value (e.g. '2fr'), or array; null/empty = use measured
+ * @param {string} [unit='fr'] - CSS unit for measured widths ('fr' or 'px')
+ * @returns {string}
+ */
+function buildTemplateColumns(numCols, columnWidths, columnOverrides) {
+  var unit = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'fr';
+  if (!columnWidths || columnWidths.length !== numCols) return '';
+  var get = function get(i) {
+    return Array.isArray(columnOverrides) ? columnOverrides[i] : columnOverrides[i];
+  };
+  var parts = [];
+  for (var i = 0; i < numCols; i++) {
+    var ov = get(i);
+    if (ov != null && typeof ov === 'string' && ov.trim() !== '') {
+      parts.push(ov.trim());
+    } else {
+      parts.push("".concat(Math.round(columnWidths[i])).concat(unit));
+    }
+  }
+  return parts.join(' ');
+}
+
+/**
+ * Build grid-template-rows from measured heights and optional overrides per row.
+ * @param {number} numRows
+ * @param {number[]} rowHeights
+ * @param {Object<number, string>|(string|null)[]} rowOverrides - map row index → CSS value (e.g. '48px', '2fr'), or array; null/empty = use measured
+ * @param {string} [unit='px'] - CSS unit for measured heights ('px' or 'fr')
+ * @returns {string}
+ */
+function buildTemplateRows(numRows, rowHeights, rowOverrides) {
+  var unit = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'px';
+  if (!rowHeights || rowHeights.length < numRows) return '';
+  var get = function get(i) {
+    return Array.isArray(rowOverrides) ? rowOverrides[i] : rowOverrides === null || rowOverrides === void 0 ? void 0 : rowOverrides[i];
+  };
+  var parts = [];
+  for (var i = 0; i < numRows; i++) {
+    var ov = get(i);
+    if (ov != null && typeof ov === 'string' && ov.trim() !== '') {
+      parts.push(ov.trim());
+    } else {
+      var _rowHeights$i;
+      parts.push("".concat(Math.round((_rowHeights$i = rowHeights[i]) !== null && _rowHeights$i !== void 0 ? _rowHeights$i : 0)).concat(unit));
+    }
+  }
+  return parts.join(' ');
+}
+
+/**
+ * Measure each tr height in a section (table must not yet have scrollable class).
+ * @param {HTMLTableSectionElement|null} section
+ * @returns {number[]}
+ */
+function measureRowHeights(section) {
+  if (!section) return [];
+  var rows = section.querySelectorAll(':scope > tr');
+  return Array.from(rows).map(function (tr) {
+    return tr.getBoundingClientRect().height;
+  });
+}
+
+/**
+ * Apply scrollable table layout to a single table.
+ * @param {HTMLTableElement} table
+ * @param {Object} options - scrollableTable options
+ * @param {number|string} [options.maxHeight] - Max height of tbody (default '200px'). Ignored when height or bodyHeightDynamic is set.
+ * @param {number|string} [options.height] - Fixed height of tbody. Ignored when bodyHeightDynamic is set.
+ * @param {{ get: (function(HTMLTableElement): number|string), useAs: 'height'|'maxHeight', updateOn?: { scroll?: boolean, resize?: boolean, scrollOn?: ('document'|Element)[], resizeOn?: ('window'|Element)[] } }} [options.bodyHeightDynamic] - When set, body size is computed by get(table) and re-applied when scroll/resize sources fire. updateOn: scrollOn/resizeOn list elements (sentinels 'document'/'window'); or use scroll (default false) / resize (default true) booleans.
+ * @param {string} [options.gridTemplateColumns]
+ * @param {{ thead?: string, tbody?: string, tfoot?: string }} [options.gridTemplateRows]
+ * @param {{ thead?: Object<number, string>|(string|null)[], tbody?: Object<number, string>|(string|null)[], tfoot?: Object<number, string>|(string|null)[] }} [options.rowOverrides]
+ * @param {Object<number, string>|(string|null)[]} [options.columnOverrides]
+ * @param {{ cols?: string, rows?: string }} [options.defaultSizingUnit] - CSS unit for measured widths/heights. cols defaults to 'fr', rows defaults to 'px'.
+ * @param {{ columnWidths?: number[], rowHeights?: { thead?: number[], tbody?: number[], tfoot?: number[] } } | undefined} ref - existing ref when refreshing
+ */
+function applyScrollableTable(table, options, ref) {
+  var _ref$columnWidths, _ref$rowHeights, _options$defaultSizin, _options$defaultSizin2;
   var thead = table.querySelector('thead');
   var tbody = table.querySelector('tbody');
   var tfoot = table.querySelector('tfoot');
   var numCols = getTableColumnCount(table);
   if (numCols === 0) return;
+  var alreadyScrollable = table.classList.contains(CLASS_TABLE);
+  var customTemplate = typeof options.gridTemplateColumns === 'string' && options.gridTemplateColumns.trim().length > 0;
+  var columnWidths = customTemplate ? null : (_ref$columnWidths = ref === null || ref === void 0 ? void 0 : ref.columnWidths) !== null && _ref$columnWidths !== void 0 ? _ref$columnWidths : alreadyScrollable ? null : measureColumnWidths(table, numCols);
   var theadRows = getRowCount(thead);
   var tbodyRows = getRowCount(tbody);
   var tfootRows = getRowCount(tfoot);
+  var rowHeights = (_ref$rowHeights = ref === null || ref === void 0 ? void 0 : ref.rowHeights) !== null && _ref$rowHeights !== void 0 ? _ref$rowHeights : alreadyScrollable ? null : {
+    thead: measureRowHeights(thead),
+    tbody: measureRowHeights(tbody),
+    tfoot: measureRowHeights(tfoot)
+  };
   table.style.setProperty('--apx-scrollable-cols', String(numCols));
   table.style.setProperty('--apx-scrollable-thead-rows', String(Math.max(1, theadRows)));
   table.style.setProperty('--apx-scrollable-tbody-rows', String(Math.max(1, tbodyRows)));
   table.style.setProperty('--apx-scrollable-tfoot-rows', String(Math.max(1, tfootRows)));
-  table.style.setProperty('--apx-scrollable-body-max-height', normalizeMaxHeight(options.maxHeight));
+  var _resolveBodyHeight2 = resolveBodyHeight(options, table),
+    bodySize = _resolveBodyHeight2.bodySize,
+    useFixedHeight = _resolveBodyHeight2.useFixedHeight;
+  table.style.setProperty('--apx-scrollable-body-max-height', bodySize);
+  table.classList.toggle('apx-scrollable-table--body-height', useFixedHeight);
   table.classList.add(CLASS_TABLE);
   table.classList.toggle('apx-scrollable-table--has-tfoot', !!(tfoot && tfootRows > 0));
   table.classList.toggle('apx-scrollable-table--no-thead', !(thead && theadRows > 0));
+
+  // Force reflow so the grid layout is established before setting measured template-columns.
+  // Without this, the browser batches class + template into one pass and the tbody overflows horizontally.
+  table.offsetHeight; // eslint-disable-line no-unused-expressions
+
+  var colUnit = ((_options$defaultSizin = options.defaultSizingUnit) === null || _options$defaultSizin === void 0 ? void 0 : _options$defaultSizin.cols) || 'fr';
+  var rowUnit = ((_options$defaultSizin2 = options.defaultSizingUnit) === null || _options$defaultSizin2 === void 0 ? void 0 : _options$defaultSizin2.rows) || 'px';
+  var gutterFallbackPx = DEFAULT_GUTTER_PX;
+  try {
+    var measured = (0,_tools_getScrollbarSize_mjs__WEBPACK_IMPORTED_MODULE_1__.getScrollbarSize)('vertical');
+    if (typeof measured === 'number' && Number.isFinite(measured) && measured >= 0) {
+      gutterFallbackPx = measured;
+    }
+  } catch (_) {
+    /* use DEFAULT_GUTTER_PX */
+  }
+  var gutterSuffix = " minmax(var(--apx-scrollable-gutter-width, ".concat(gutterFallbackPx, "px), var(--apx-scrollable-gutter-width, ").concat(gutterFallbackPx, "px))");
+  if (customTemplate) {
+    table.style.setProperty('--apx-scrollable-template-columns', options.gridTemplateColumns.trim() + gutterSuffix);
+  } else if (columnWidths && columnWidths.length === numCols) {
+    var template = options.columnOverrides != null ? buildTemplateColumns(numCols, columnWidths, options.columnOverrides, colUnit) : columnWidths.map(function (w) {
+      return "".concat(Math.round(w)).concat(colUnit);
+    }).join(' ');
+    table.style.setProperty('--apx-scrollable-template-columns', template + gutterSuffix);
+  } else {
+    table.style.removeProperty('--apx-scrollable-template-columns');
+  }
   clearPlacements(table);
   var sections = [{
     section: thead,
-    rows: Math.max(1, theadRows)
+    rows: Math.max(1, theadRows),
+    heights: rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.thead,
+    key: 'thead'
   }, {
     section: tbody,
-    rows: Math.max(1, tbodyRows)
+    rows: Math.max(1, tbodyRows),
+    heights: rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.tbody,
+    key: 'tbody'
   }, {
     section: tfoot,
-    rows: Math.max(1, tfootRows)
+    rows: Math.max(1, tfootRows),
+    heights: rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.tfoot,
+    key: 'tfoot'
   }];
+  var customRows = options.gridTemplateRows && _typeof(options.gridTemplateRows) === 'object' ? options.gridTemplateRows : null;
+  var rowOverrides = options.rowOverrides && _typeof(options.rowOverrides) === 'object' ? options.rowOverrides : null;
   sections.forEach(function (_ref2) {
     var section = _ref2.section,
-      rows = _ref2.rows;
+      rows = _ref2.rows,
+      heights = _ref2.heights,
+      key = _ref2.key;
     if (!section) return;
+    var varName = "--apx-scrollable-".concat(key, "-template-rows");
+    var custom = customRows === null || customRows === void 0 ? void 0 : customRows[key];
+    var overrides = rowOverrides === null || rowOverrides === void 0 ? void 0 : rowOverrides[key];
+    if (typeof custom === 'string' && custom.trim().length > 0) {
+      section.style.setProperty(varName, custom.trim());
+    } else if (heights && heights.length >= rows) {
+      var _template = overrides != null ? buildTemplateRows(rows, heights.slice(0, rows), overrides, rowUnit) : heights.slice(0, rows).map(function (h) {
+        return "".concat(Math.round(h)).concat(rowUnit);
+      }).join(' ');
+      section.style.setProperty(varName, _template);
+    } else {
+      section.style.removeProperty(varName);
+    }
     var placements = computeCellPlacements(section, rows, numCols);
     applyPlacements(placements);
   });
+  return {
+    columnWidths: columnWidths,
+    rowHeights: rowHeights
+  };
 }
 
-/**
- * Augments the APX object with scrollableTable(options | 'refresh').
- * Makes the tbody of a table scrollable while keeping thead/tfoot fixed and columns aligned (CSS Grid + subgrid).
- *
- * @param {Object} apx - The APX object to augment.
- * @example
- * APX('table.data-grid').scrollableTable({ maxHeight: 300 });
- * APX('table.data-grid').scrollableTable('refresh');
+/**
+ * Augments the APX object with scrollableTable(options | 'refresh').
+ * Makes the tbody of a table scrollable while keeping thead/tfoot fixed and columns aligned (CSS Grid + subgrid).
+ *
+ * @param {Object} apx - The APX object to augment.
+ * @example
+ * APX('table.data-grid').scrollableTable({ maxHeight: 300 });
+ * APX('table.data-grid').scrollableTable('refresh');
  */
 function augmentWithScrollableTable(apx) {
   apx.scrollableTable = function (optionsOrAction) {
@@ -2126,18 +2551,26 @@ function augmentWithScrollableTable(apx) {
       var ref = table[DATA_KEY];
       if (ref) {
         if (isRefresh) {
-          applyScrollableTable(table, ref.options);
+          applyScrollableTable(table, ref.options, ref);
         } else if (options && Object.keys(options).length > 0) {
           ref.options = _objectSpread(_objectSpread({}, ref.options), options);
-          applyScrollableTable(table, ref.options);
+          var _result = applyScrollableTable(table, ref.options, ref);
+          if (_result !== null && _result !== void 0 && _result.columnWidths) ref.columnWidths = _result.columnWidths;
+          if (_result !== null && _result !== void 0 && _result.rowHeights) ref.rowHeights = _result.rowHeights;
         }
+        var currentOptions = ref.options;
+        if (currentOptions !== null && currentOptions !== void 0 && currentOptions.bodyHeightDynamic) registerDynamicTable(table, currentOptions);else removeTableFromDynamicSources(table);
         return;
       }
       if (isRefresh) return;
-      applyScrollableTable(table, options);
+      console.log('[APX scrollableTable] create', table);
+      var result = applyScrollableTable(table, options, undefined);
       table[DATA_KEY] = {
-        options: _objectSpread({}, options)
+        options: _objectSpread({}, options),
+        columnWidths: (result === null || result === void 0 ? void 0 : result.columnWidths) || undefined,
+        rowHeights: (result === null || result === void 0 ? void 0 : result.rowHeights) || undefined
       };
+      if (options !== null && options !== void 0 && options.bodyHeightDynamic) registerDynamicTable(table, options);
     });
     return apx;
   };
@@ -3475,24 +3908,34 @@ Object.assign(toast, {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   augmentWithPack: () => (/* reexport safe */ _form_packer_augment_apx_mjs__WEBPACK_IMPORTED_MODULE_0__["default"]),
+/* harmony export */   getScrollbarSize: () => (/* reexport safe */ _getScrollbarSize_mjs__WEBPACK_IMPORTED_MODULE_2__.getScrollbarSize),
+/* harmony export */   loadCss: () => (/* reexport safe */ _loadCss_mjs__WEBPACK_IMPORTED_MODULE_3__.loadCss),
 /* harmony export */   packFormToJSON: () => (/* reexport safe */ _form_packer_packToJson_mjs__WEBPACK_IMPORTED_MODULE_1__.packFormToJSON),
 /* harmony export */   tools: () => (/* binding */ tools)
 /* harmony export */ });
 /* harmony import */ var _form_packer_augment_apx_mjs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./form-packer/augment-apx.mjs */ "./modules/tools/form-packer/augment-apx.mjs");
 /* harmony import */ var _form_packer_packToJson_mjs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./form-packer/packToJson.mjs */ "./modules/tools/form-packer/packToJson.mjs");
+/* harmony import */ var _getScrollbarSize_mjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./getScrollbarSize.mjs */ "./modules/tools/getScrollbarSize.mjs");
+/* harmony import */ var _loadCss_mjs__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./loadCss.mjs */ "./modules/tools/loadCss.mjs");
 // Import des fonctions et modules des sous-modules
 
 
 
+
+
 // Export de la fonction d'augmentation
 
 
 // Export des fonctions utilitaires
 
 
+
+
 // Export d'un objet tools pour faciliter l'utilisation
 var tools = {
-  packFormToJSON: _form_packer_packToJson_mjs__WEBPACK_IMPORTED_MODULE_1__.packFormToJSON
+  packFormToJSON: _form_packer_packToJson_mjs__WEBPACK_IMPORTED_MODULE_1__.packFormToJSON,
+  getScrollbarSize: _getScrollbarSize_mjs__WEBPACK_IMPORTED_MODULE_2__.getScrollbarSize,
+  loadCss: _loadCss_mjs__WEBPACK_IMPORTED_MODULE_3__.loadCss
 };
 
 /***/ }),
@@ -4207,6 +4650,96 @@ var isPlainObject = function isPlainObject(obj) {
 
 /***/ }),
 
+/***/ "./modules/tools/getScrollbarSize.mjs":
+/*!********************************************!*\
+  !*** ./modules/tools/getScrollbarSize.mjs ***!
+  \********************************************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   getScrollbarSize: () => (/* binding */ getScrollbarSize)
+/* harmony export */ });
+function getScrollbarSize() {
+  var _getScrollbarSize$_ca;
+  var orientation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "vertical";
+  if (!getScrollbarSize._cache) {
+    var outer = document.createElement("div");
+    Object.assign(outer.style, {
+      position: "absolute",
+      top: "-9999px",
+      left: "-9999px",
+      width: "100px",
+      height: "100px",
+      overflow: "scroll"
+    });
+    document.body.appendChild(outer);
+    getScrollbarSize._cache = {
+      vertical: outer.offsetWidth - outer.clientWidth,
+      horizontal: outer.offsetHeight - outer.clientHeight
+    };
+    outer.remove();
+  }
+  return (_getScrollbarSize$_ca = getScrollbarSize._cache[orientation]) !== null && _getScrollbarSize$_ca !== void 0 ? _getScrollbarSize$_ca : 0;
+}
+
+/***/ }),
+
+/***/ "./modules/tools/loadCss.mjs":
+/*!***********************************!*\
+  !*** ./modules/tools/loadCss.mjs ***!
+  \***********************************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   loadCss: () => (/* binding */ loadCss)
+/* harmony export */ });
+var loadCssCache = new Map();
+
+/**
+ * Loads CSS from a URL and injects it into the document.
+ * Idempotent: same URL returns the same Promise; duplicate loads are avoided.
+ * @param {string} url - URL of the CSS file to load
+ * @param {{ id?: string, media?: string, before?: Node }} [options] - Optional: id and media for the style element, before for insertion point
+ * @returns {Promise<HTMLStyleElement>} Resolves with the injected style element; rejects on fetch failure or non-ok response
+ */
+function loadCss(url) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var cached = loadCssCache.get(url);
+  if (cached) {
+    return cached;
+  }
+  var promise = fetch(url).then(function (response) {
+    if (!response.ok) {
+      throw new Error("Failed to load CSS: ".concat(response.status, " ").concat(response.statusText));
+    }
+    return response.text();
+  }).then(function (css) {
+    var styleSheet = document.createElement("style");
+    if (options.id) styleSheet.id = options.id;
+    if (options.media) styleSheet.media = options.media;
+    styleSheet.textContent = css;
+    var insertBefore = options.before;
+    if (insertBefore && insertBefore.parentNode) {
+      insertBefore.parentNode.insertBefore(styleSheet, insertBefore);
+    } else {
+      document.head.appendChild(styleSheet);
+    }
+    return styleSheet;
+  })["catch"](function (error) {
+    loadCssCache["delete"](url);
+    console.error("Failed to load CSS:", error);
+    throw error;
+  });
+  loadCssCache.set(url, promise);
+  return promise;
+}
+
+/***/ }),
+
 /***/ "./modules/tristate/tristate.mjs":
 /*!***************************************!*\
   !*** ./modules/tristate/tristate.mjs ***!
@@ -4652,9 +5185,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _modules_scrollableTable_scrollableTable_mjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./modules/scrollableTable/scrollableTable.mjs */ "./modules/scrollableTable/scrollableTable.mjs");
 /* harmony import */ var _modules_dialog_dialog_mjs__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./modules/dialog/dialog.mjs */ "./modules/dialog/dialog.mjs");
 /* harmony import */ var _modules_toast_toast_mjs__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./modules/toast/toast.mjs */ "./modules/toast/toast.mjs");
-/* harmony import */ var _modules_common_mjs__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./modules/common.mjs */ "./modules/common.mjs");
-/* harmony import */ var _modules_tools_exports_mjs__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./modules/tools/exports.mjs */ "./modules/tools/exports.mjs");
-
+/* harmony import */ var _modules_tools_exports_mjs__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./modules/tools/exports.mjs */ "./modules/tools/exports.mjs");
 
 
 
@@ -4768,13 +5299,13 @@ var APX = function APX(input) {
   (0,_modules_listen_listen_mjs__WEBPACK_IMPORTED_MODULE_0__["default"])(apx);
   (0,_modules_tristate_tristate_mjs__WEBPACK_IMPORTED_MODULE_1__["default"])(apx);
   (0,_modules_scrollableTable_scrollableTable_mjs__WEBPACK_IMPORTED_MODULE_2__["default"])(apx);
-  (0,_modules_tools_exports_mjs__WEBPACK_IMPORTED_MODULE_6__.augmentWithPack)(apx);
+  (0,_modules_tools_exports_mjs__WEBPACK_IMPORTED_MODULE_5__.augmentWithPack)(apx);
   return apx;
 };
-APX.loadCss = _modules_common_mjs__WEBPACK_IMPORTED_MODULE_5__.loadCss;
+APX.loadCss = _modules_tools_exports_mjs__WEBPACK_IMPORTED_MODULE_5__.loadCss;
 APX.dialog = _modules_dialog_dialog_mjs__WEBPACK_IMPORTED_MODULE_3__["default"];
 APX.toast = _modules_toast_toast_mjs__WEBPACK_IMPORTED_MODULE_4__["default"];
-APX.tools = _modules_tools_exports_mjs__WEBPACK_IMPORTED_MODULE_6__.tools;
+APX.tools = _modules_tools_exports_mjs__WEBPACK_IMPORTED_MODULE_5__.tools;
 APX.isAPXObject = function (obj) {
   return obj && obj._isAPXObject === true;
 };