@appius-fr/apx 2.6.2 → 2.7.1

package/dist/APX.standalone.js

@@ -172,6 +172,100 @@ h2.APX-dialog-title{
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ "./node_modules/css-loader/dist/cjs.js!./modules/scrollableTable/css/scrollableTable.css":
+/*!***********************************************************************************************!*\
+  !*** ./node_modules/css-loader/dist/cjs.js!./modules/scrollableTable/css/scrollableTable.css ***!
+  \***********************************************************************************************/
+/***/ ((module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/sourceMaps.js */ "./node_modules/css-loader/dist/runtime/sourceMaps.js");
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js");
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+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)
+   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)\r\n   Use !important so page styles (e.g. display: table) do not override the grid layout. */\r\n\r\n/* --apx-scrollable-template-columns: set by JS (measured widths + gutter); fallback = equal columns + gutter */\r\n/* --apx-scrollable-gutter-width: space for vertical scrollbar so it does not overlap the last column (set to 0 to allow overlap) */\r\n/* --apx-scrollable-body-height: when class apx-scrollable-table--body-height is set, tbody row uses fixed height instead of max-height */\r\n.apx-scrollable-table {\r\n    display: grid !important;\r\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)));\r\n    grid-template-rows: auto var(--apx-scrollable-body-row-size, fit-content(var(--apx-scrollable-body-max-height, 200px))) auto;\r\n    width: 100%;\r\n    table-layout: unset !important;\r\n}\r\n\r\n.apx-scrollable-table--body-height {\r\n    --apx-scrollable-body-row-size: var(--apx-scrollable-body-max-height, 200px);\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 var(--apx-scrollable-body-row-size, 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: var(--apx-scrollable-body-row-size, 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: var(--apx-scrollable-body-row-size, fit-content(var(--apx-scrollable-body-max-height, 200px)));\r\n}\r\n\r\n/* --apx-scrollable-*-template-rows: set by JS (measured heights) or override in CSS / via options */\r\n.apx-scrollable-table > thead,\r\n.apx-scrollable-table > tbody,\r\n.apx-scrollable-table > tfoot {\r\n    display: grid !important;\r\n    grid-template-columns: subgrid;\r\n    grid-column: 1 / -1;\r\n    min-height: 0;\r\n}\r\n\r\n.apx-scrollable-table > thead {\r\n    grid-template-rows: var(--apx-scrollable-thead-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: var(--apx-scrollable-tbody-template-rows, repeat(var(--apx-scrollable-tbody-rows, 1), auto));\r\n    overflow: auto;\r\n}\r\n\r\n.apx-scrollable-table > tfoot {\r\n    grid-template-rows: var(--apx-scrollable-tfoot-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 !important;\r\n}\r\n\r\n.apx-scrollable-table th,\r\n.apx-scrollable-table td {\r\n    min-width: 0;\r\n    box-sizing: border-box;\r\n}\r\n"],"sourceRoot":""}]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ "./node_modules/css-loader/dist/cjs.js!./modules/toast/css/toast.css":
@@ -367,39 +461,108 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-var ___CSS_LOADER_URL_IMPORT_0___ = new URL(/* asset import */ __webpack_require__(/*! data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20%20fill%3D%22%23cccccc%22%20d%3D%22M25.107%2032.030h-18.214c-3.456%200-6.268-2.81-6.268-6.264v-19.529c0-3.456%202.812-6.268%206.268-6.268h18.214c3.456%200%206.268%202.812%206.268%206.268v19.529c0%203.452-2.812%206.264-6.268%206.264zM6.893%201.85c-2.419%200-4.386%201.967-4.386%204.386v19.529c0%202.417%201.967%204.382%204.386%204.382h18.214c2.419%200%204.386-1.965%204.386-4.382v-19.529c0-2.419-1.967-4.386-4.386-4.386h-18.214z%22%3E%3C/path%3E%3C/svg%3E */ "data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20%20fill%3D%22%23cccccc%22%20d%3D%22M25.107%2032.030h-18.214c-3.456%200-6.268-2.81-6.268-6.264v-19.529c0-3.456%202.812-6.268%206.268-6.268h18.214c3.456%200%206.268%202.812%206.268%206.268v19.529c0%203.452-2.812%206.264-6.268%206.264zM6.893%201.85c-2.419%200-4.386%201.967-4.386%204.386v19.529c0%202.417%201.967%204.382%204.386%204.382h18.214c2.419%200%204.386-1.965%204.386-4.382v-19.529c0-2.419-1.967-4.386-4.386-4.386h-18.214z%22%3E%3C/path%3E%3C/svg%3E"), __webpack_require__.b);
-var ___CSS_LOADER_URL_IMPORT_1___ = new URL(/* asset import */ __webpack_require__(/*! data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.543%205.647c0-3.119%202.531-5.647%205.65-5.647h19.309c3.12%200%205.65%202.511%205.65%205.647v20.705c0%203.119-2.531%205.647-5.65%205.647h-19.309c-3.12%200-5.65-2.511-5.65-5.647v-20.705zM5.313%2017.587l7.039%206.839%2013.831-13.439-2.636-2.561-10.929%2010.62-4.442-4.317-2.862%202.858z%22%3E%3C/path%3E%3C/svg%3E */ "data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.543%205.647c0-3.119%202.531-5.647%205.65-5.647h19.309c3.12%200%205.65%202.511%205.65%205.647v20.705c0%203.119-2.531%205.647-5.65%205.647h-19.309c-3.12%200-5.65-2.511-5.65-5.647v-20.705zM5.313%2017.587l7.039%206.839%2013.831-13.439-2.636-2.561-10.929%2010.62-4.442-4.317-2.862%202.858z%22%3E%3C/path%3E%3C/svg%3E"), __webpack_require__.b);
-var ___CSS_LOADER_URL_IMPORT_2___ = new URL(/* asset import */ __webpack_require__(/*! data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m0.543%205.647c0-3.119%202.531-5.647%205.65-5.647h19.309c3.12%200%205.65%202.511%205.65%205.647v20.705c0%203.119-2.531%205.647-5.65%205.647h-19.309c-3.12%200-5.65-2.511-5.65-5.647v-20.705z%22%20fill%3D%22%23f00%22%2F%3E%3Cpath%20d%3D%22m8%208%2016%2016%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M24%208L8%2024%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E */ "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m0.543%205.647c0-3.119%202.531-5.647%205.65-5.647h19.309c3.12%200%205.65%202.511%205.65%205.647v20.705c0%203.119-2.531%205.647-5.65%205.647h-19.309c-3.12%200-5.65-2.511-5.65-5.647v-20.705z%22%20fill%3D%22%23f00%22%2F%3E%3Cpath%20d%3D%22m8%208%2016%2016%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M24%208L8%2024%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E"), __webpack_require__.b);
+var ___CSS_LOADER_URL_IMPORT_0___ = new URL(/* asset import */ __webpack_require__(/*! 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%3Cmask id=%27frame-cutout%27%3E%3Crect width=%2732%27 height=%2732%27 fill=%27%23fff%27/%3E%3Crect x=%273%27 y=%273%27 width=%2726%27 height=%2726%27 rx=%274%27 ry=%274%27 fill=%27%23000%27/%3E%3C/mask%3E%3Crect width=%2732%27 height=%2732%27 fill=%27%23cccccc%27 mask=%27url%28%23frame-cutout%29%27/%3E%3C/svg%3E */ "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%3Cmask id=%27frame-cutout%27%3E%3Crect width=%2732%27 height=%2732%27 fill=%27%23fff%27/%3E%3Crect x=%273%27 y=%273%27 width=%2726%27 height=%2726%27 rx=%274%27 ry=%274%27 fill=%27%23000%27/%3E%3C/mask%3E%3Crect width=%2732%27 height=%2732%27 fill=%27%23cccccc%27 mask=%27url%28%23frame-cutout%29%27/%3E%3C/svg%3E"), __webpack_require__.b);
+var ___CSS_LOADER_URL_IMPORT_1___ = new URL(/* asset import */ __webpack_require__(/*! 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 16h16%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%273%27 stroke-linecap=%27round%27/%3E%3C/svg%3E */ "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 16h16%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%273%27 stroke-linecap=%27round%27/%3E%3C/svg%3E"), __webpack_require__.b);
+var ___CSS_LOADER_URL_IMPORT_2___ = new URL(/* asset import */ __webpack_require__(/*! 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=%27M6 17L12 23L26 9%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E */ "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=%27M6 17L12 23L26 9%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E"), __webpack_require__.b);
+var ___CSS_LOADER_URL_IMPORT_3___ = new URL(/* asset import */ __webpack_require__(/*! 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 */ "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"), __webpack_require__.b);
 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()));
 var ___CSS_LOADER_URL_REPLACEMENT_0___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(___CSS_LOADER_URL_IMPORT_0___);
 var ___CSS_LOADER_URL_REPLACEMENT_1___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(___CSS_LOADER_URL_IMPORT_1___);
 var ___CSS_LOADER_URL_REPLACEMENT_2___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(___CSS_LOADER_URL_IMPORT_2___);
+var ___CSS_LOADER_URL_REPLACEMENT_3___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(___CSS_LOADER_URL_IMPORT_3___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `.apx-tristate {
-    display: inline-block;
-    vertical-align: middle;
-    text-align: center;
-    cursor: pointer;
-    position: relative;
-    min-width:13px;
-    min-height:13px;
-    background-size: contain;
-    background-color: white;
-    border-radius:3px;
-}
-.apx-tristate.unchecked {
-    background-image: url(${___CSS_LOADER_URL_REPLACEMENT_0___});
-}
-.apx-tristate.checked {
-    background-image: url(${___CSS_LOADER_URL_REPLACEMENT_1___});
-    background-repeat: no-repeat;
-    background-position: center;
-}
-.apx-tristate.crossed {
-    background-image: url(${___CSS_LOADER_URL_REPLACEMENT_2___});
-    background-repeat: no-repeat;
-    background-position: center;
-}`, "",{"version":3,"sources":["webpack://./modules/tristate/css/tristate.css"],"names":[],"mappings":"AAAA;IACI,qBAAqB;IACrB,sBAAsB;IACtB,kBAAkB;IAClB,eAAe;IACf,kBAAkB;IAClB,cAAc;IACd,eAAe;IACf,wBAAwB;IACxB,uBAAuB;IACvB,iBAAiB;AACrB;AACA;IACI,yDAAylB;AAC7lB;AACA;IACI,yDAA6e;IAC7e,4BAA4B;IAC5B,2BAA2B;AAC/B;AACA;IACI,yDAAsnB;IACtnB,4BAA4B;IAC5B,2BAA2B;AAC/B","sourcesContent":[".apx-tristate {\r\n    display: inline-block;\r\n    vertical-align: middle;\r\n    text-align: center;\r\n    cursor: pointer;\r\n    position: relative;\r\n    min-width:13px;\r\n    min-height:13px;\r\n    background-size: contain;\r\n    background-color: white;\r\n    border-radius:3px;\r\n}\r\n.apx-tristate.unchecked {\r\n    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20%20fill%3D%22%23cccccc%22%20d%3D%22M25.107%2032.030h-18.214c-3.456%200-6.268-2.81-6.268-6.264v-19.529c0-3.456%202.812-6.268%206.268-6.268h18.214c3.456%200%206.268%202.812%206.268%206.268v19.529c0%203.452-2.812%206.264-6.268%206.264zM6.893%201.85c-2.419%200-4.386%201.967-4.386%204.386v19.529c0%202.417%201.967%204.382%204.386%204.382h18.214c2.419%200%204.386-1.965%204.386-4.382v-19.529c0-2.419-1.967-4.386-4.386-4.386h-18.214z%22%3E%3C/path%3E%3C/svg%3E');\r\n}\r\n.apx-tristate.checked {\r\n    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.543%205.647c0-3.119%202.531-5.647%205.65-5.647h19.309c3.12%200%205.65%202.511%205.65%205.647v20.705c0%203.119-2.531%205.647-5.65%205.647h-19.309c-3.12%200-5.65-2.511-5.65-5.647v-20.705zM5.313%2017.587l7.039%206.839%2013.831-13.439-2.636-2.561-10.929%2010.62-4.442-4.317-2.862%202.858z%22%3E%3C/path%3E%3C/svg%3E');\r\n    background-repeat: no-repeat;\r\n    background-position: center;\r\n}\r\n.apx-tristate.crossed {\r\n    background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m0.543%205.647c0-3.119%202.531-5.647%205.65-5.647h19.309c3.12%200%205.65%202.511%205.65%205.647v20.705c0%203.119-2.531%205.647-5.65%205.647h-19.309c-3.12%200-5.65-2.511-5.65-5.647v-20.705z%22%20fill%3D%22%23f00%22%2F%3E%3Cpath%20d%3D%22m8%208%2016%2016%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M24%208L8%2024%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E');\r\n    background-repeat: no-repeat;\r\n    background-position: center;\r\n}"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, `.apx-tristate {
+    display: inline-block;
+    vertical-align: middle;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+    min-width:13px;
+    min-height:13px;
+    background-size: contain;
+    background-color: transparent;
+    border-radius:3px;
+    --apx-tristate-tick-color: transparent;
+    --apx-tristate-checked-color: #0654ba;
+    --apx-tristate-crossed-color: #f00;
+}
+.apx-tristate.unchecked {
+    background-image: url(${___CSS_LOADER_URL_REPLACEMENT_0___});
+}
+.apx-tristate.unchecked.apx-tristate--unchecked-indeterminate::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    display: block;
+    pointer-events: none;
+}
+/* When --mixed is used (e.g. parent + sub-checkboxes), dash shows only when children are mixed */
+.apx-tristate.unchecked.apx-tristate--indeterminate-dash:not(.apx-tristate--mixed)::before,
+.apx-tristate.unchecked.apx-tristate--indeterminate-dash:not(.apx-tristate--mixed)::after {
+    display: none;
+}
+.apx-tristate.unchecked.apx-tristate--indeterminate-dash::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    display: block;
+    pointer-events: none;
+    background-color: var(--apx-tristate-checked-color);
+    border-radius: inherit;
+}
+.apx-tristate.unchecked.apx-tristate--indeterminate-dash::after {
+    background-color: var(--apx-tristate-tick-color);
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    -webkit-mask-size: 100% 100%;
+    -webkit-mask-mode: alpha;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: 100% 100%;
+    mask-mode: alpha;
+    -webkit-mask-image: url(${___CSS_LOADER_URL_REPLACEMENT_1___});
+    mask-image: url(${___CSS_LOADER_URL_REPLACEMENT_1___});
+}
+.apx-tristate.unchecked.apx-tristate--indeterminate-filled-check::after {
+    background-color: var(--apx-tristate-checked-color);
+    border-radius: inherit;
+}
+.apx-tristate.checked {
+    background-image: none;
+    background-color: var(--apx-tristate-checked-color);
+}
+.apx-tristate.crossed {
+    background-image: none;
+    background-color: var(--apx-tristate-crossed-color);
+}
+
+.apx-tristate.checked::after,
+.apx-tristate.crossed::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    display: block;
+    background-color: var(--apx-tristate-tick-color);
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    -webkit-mask-size: 100% 100%;
+    -webkit-mask-mode: alpha;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: 100% 100%;
+    mask-mode: alpha;
+    pointer-events: none;
+}
+
+.apx-tristate.checked::after {
+    -webkit-mask-image: url(${___CSS_LOADER_URL_REPLACEMENT_2___});
+    mask-image: url(${___CSS_LOADER_URL_REPLACEMENT_2___});
+}
+
+.apx-tristate.crossed::after {
+    -webkit-mask-image: url(${___CSS_LOADER_URL_REPLACEMENT_3___});
+    mask-image: url(${___CSS_LOADER_URL_REPLACEMENT_3___});
+}`, "",{"version":3,"sources":["webpack://./modules/tristate/css/tristate.css"],"names":[],"mappings":"AAAA;IACI,qBAAqB;IACrB,sBAAsB;IACtB,kBAAkB;IAClB,eAAe;IACf,kBAAkB;IAClB,cAAc;IACd,eAAe;IACf,wBAAwB;IACxB,6BAA6B;IAC7B,iBAAiB;IACjB,sCAAsC;IACtC,qCAAqC;IACrC,kCAAkC;AACtC;AACA;IACI,yDAA6X;AACjY;AACA;IACI,WAAW;IACX,kBAAkB;IAClB,QAAQ;IACR,cAAc;IACd,oBAAoB;AACxB;AACA,iGAAiG;AACjG;;IAEI,aAAa;AACjB;AACA;IACI,WAAW;IACX,kBAAkB;IAClB,QAAQ;IACR,cAAc;IACd,oBAAoB;IACpB,mDAAmD;IACnD,sBAAsB;AAC1B;AACA;IACI,gDAAgD;IAChD,8BAA8B;IAC9B,6BAA6B;IAC7B,4BAA4B;IAC5B,wBAAwB;IACxB,sBAAsB;IACtB,qBAAqB;IACrB,oBAAoB;IACpB,gBAAgB;IAChB,2DAA2O;IAC3O,mDAAmO;AACvO;AACA;IACI,mDAAmD;IACnD,sBAAsB;AAC1B;AACA;IACI,sBAAsB;IACtB,mDAAmD;AACvD;AACA;IACI,sBAAsB;IACtB,mDAAmD;AACvD;;AAEA;;IAEI,WAAW;IACX,kBAAkB;IAClB,QAAQ;IACR,cAAc;IACd,gDAAgD;IAChD,8BAA8B;IAC9B,6BAA6B;IAC7B,4BAA4B;IAC5B,wBAAwB;IACxB,sBAAsB;IACtB,qBAAqB;IACrB,oBAAoB;IACpB,gBAAgB;IAChB,oBAAoB;AACxB;;AAEA;IACI,2DAA2Q;IAC3Q,mDAAmQ;AACvQ;;AAEA;IACI,2DAA+Q;IAC/Q,mDAAuQ;AAC3Q","sourcesContent":[".apx-tristate {\n    display: inline-block;\n    vertical-align: middle;\n    text-align: center;\n    cursor: pointer;\n    position: relative;\n    min-width:13px;\n    min-height:13px;\n    background-size: contain;\n    background-color: transparent;\n    border-radius:3px;\n    --apx-tristate-tick-color: transparent;\n    --apx-tristate-checked-color: #0654ba;\n    --apx-tristate-crossed-color: #f00;\n}\n.apx-tristate.unchecked {\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cmask id='frame-cutout'%3E%3Crect width='32' height='32' fill='%23fff'/%3E%3Crect x='3' y='3' width='26' height='26' rx='4' ry='4' fill='%23000'/%3E%3C/mask%3E%3Crect width='32' height='32' fill='%23cccccc' mask='url(%23frame-cutout)'/%3E%3C/svg%3E\");\n}\n.apx-tristate.unchecked.apx-tristate--unchecked-indeterminate::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    display: block;\n    pointer-events: none;\n}\n/* When --mixed is used (e.g. parent + sub-checkboxes), dash shows only when children are mixed */\n.apx-tristate.unchecked.apx-tristate--indeterminate-dash:not(.apx-tristate--mixed)::before,\n.apx-tristate.unchecked.apx-tristate--indeterminate-dash:not(.apx-tristate--mixed)::after {\n    display: none;\n}\n.apx-tristate.unchecked.apx-tristate--indeterminate-dash::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    display: block;\n    pointer-events: none;\n    background-color: var(--apx-tristate-checked-color);\n    border-radius: inherit;\n}\n.apx-tristate.unchecked.apx-tristate--indeterminate-dash::after {\n    background-color: var(--apx-tristate-tick-color);\n    -webkit-mask-repeat: no-repeat;\n    -webkit-mask-position: center;\n    -webkit-mask-size: 100% 100%;\n    -webkit-mask-mode: alpha;\n    mask-repeat: no-repeat;\n    mask-position: center;\n    mask-size: 100% 100%;\n    mask-mode: alpha;\n    -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M8 16h16' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E\");\n    mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M8 16h16' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E\");\n}\n.apx-tristate.unchecked.apx-tristate--indeterminate-filled-check::after {\n    background-color: var(--apx-tristate-checked-color);\n    border-radius: inherit;\n}\n.apx-tristate.checked {\n    background-image: none;\n    background-color: var(--apx-tristate-checked-color);\n}\n.apx-tristate.crossed {\n    background-image: none;\n    background-color: var(--apx-tristate-crossed-color);\n}\n\n.apx-tristate.checked::after,\n.apx-tristate.crossed::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    display: block;\n    background-color: var(--apx-tristate-tick-color);\n    -webkit-mask-repeat: no-repeat;\n    -webkit-mask-position: center;\n    -webkit-mask-size: 100% 100%;\n    -webkit-mask-mode: alpha;\n    mask-repeat: no-repeat;\n    mask-position: center;\n    mask-size: 100% 100%;\n    mask-mode: alpha;\n    pointer-events: none;\n}\n\n.apx-tristate.checked::after {\n    -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 17L12 23L26 9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n    mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 17L12 23L26 9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n}\n\n.apx-tristate.crossed::after {\n    -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M8 8L24 24M24 8L8 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n    mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M8 8L24 24M24 8L8 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n}"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -629,6 +792,61 @@ var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js
        /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_dialog_css__WEBPACK_IMPORTED_MODULE_6__["default"] && _node_modules_css_loader_dist_cjs_js_dialog_css__WEBPACK_IMPORTED_MODULE_6__["default"].locals ? _node_modules_css_loader_dist_cjs_js_dialog_css__WEBPACK_IMPORTED_MODULE_6__["default"].locals : undefined);
 
 
+/***/ }),
+
+/***/ "./modules/scrollableTable/css/scrollableTable.css":
+/*!*********************************************************!*\
+  !*** ./modules/scrollableTable/css/scrollableTable.css ***!
+  \*********************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../../../node_modules/style-loader/dist/runtime/styleDomAPI.js */ "./node_modules/style-loader/dist/runtime/styleDomAPI.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../../../node_modules/style-loader/dist/runtime/insertBySelector.js */ "./node_modules/style-loader/dist/runtime/insertBySelector.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js */ "./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../../../node_modules/style-loader/dist/runtime/insertStyleElement.js */ "./node_modules/style-loader/dist/runtime/insertStyleElement.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../../../node_modules/style-loader/dist/runtime/styleTagTransform.js */ "./node_modules/style-loader/dist/runtime/styleTagTransform.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _node_modules_css_loader_dist_cjs_js_scrollableTable_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../../../node_modules/css-loader/dist/cjs.js!./scrollableTable.css */ "./node_modules/css-loader/dist/cjs.js!./modules/scrollableTable/css/scrollableTable.css");
+
+      
+      
+      
+      
+      
+      
+      
+      
+      
+
+var options = {};
+
+options.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());
+options.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());
+
+      options.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, "head");
+    
+options.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());
+options.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());
+
+var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_scrollableTable_css__WEBPACK_IMPORTED_MODULE_6__["default"], options);
+
+
+
+
+       /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_scrollableTable_css__WEBPACK_IMPORTED_MODULE_6__["default"] && _node_modules_css_loader_dist_cjs_js_scrollableTable_css__WEBPACK_IMPORTED_MODULE_6__["default"].locals ? _node_modules_css_loader_dist_cjs_js_scrollableTable_css__WEBPACK_IMPORTED_MODULE_6__["default"].locals : undefined);
+
+
 /***/ }),
 
 /***/ "./modules/toast/css/toast.css":
@@ -1014,36 +1232,47 @@ module.exports = styleTagTransform;
 
 /***/ }),
 
-/***/ "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m0.543%205.647c0-3.119%202.531-5.647%205.65-5.647h19.309c3.12%200%205.65%202.511%205.65%205.647v20.705c0%203.119-2.531%205.647-5.65%205.647h-19.309c-3.12%200-5.65-2.511-5.65-5.647v-20.705z%22%20fill%3D%22%23f00%22%2F%3E%3Cpath%20d%3D%22m8%208%2016%2016%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M24%208L8%2024%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E":
-/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
-  !*** data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m0.543%205.647c0-3.119%202.531-5.647%205.65-5.647h19.309c3.12%200%205.65%202.511%205.65%205.647v20.705c0%203.119-2.531%205.647-5.65%205.647h-19.309c-3.12%200-5.65-2.511-5.65-5.647v-20.705z%22%20fill%3D%22%23f00%22%2F%3E%3Cpath%20d%3D%22m8%208%2016%2016%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M24%208L8%2024%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E ***!
-  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+/***/ "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%3Cmask id=%27frame-cutout%27%3E%3Crect width=%2732%27 height=%2732%27 fill=%27%23fff%27/%3E%3Crect x=%273%27 y=%273%27 width=%2726%27 height=%2726%27 rx=%274%27 ry=%274%27 fill=%27%23000%27/%3E%3C/mask%3E%3Crect width=%2732%27 height=%2732%27 fill=%27%23cccccc%27 mask=%27url%28%23frame-cutout%29%27/%3E%3C/svg%3E":
+/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** 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%3Cmask id=%27frame-cutout%27%3E%3Crect width=%2732%27 height=%2732%27 fill=%27%23fff%27/%3E%3Crect x=%273%27 y=%273%27 width=%2726%27 height=%2726%27 rx=%274%27 ry=%274%27 fill=%27%23000%27/%3E%3C/mask%3E%3Crect width=%2732%27 height=%2732%27 fill=%27%23cccccc%27 mask=%27url%28%23frame-cutout%29%27/%3E%3C/svg%3E ***!
+  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((module) => {
+
+"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%3Cmask id=%27frame-cutout%27%3E%3Crect width=%2732%27 height=%2732%27 fill=%27%23fff%27/%3E%3Crect x=%273%27 y=%273%27 width=%2726%27 height=%2726%27 rx=%274%27 ry=%274%27 fill=%27%23000%27/%3E%3C/mask%3E%3Crect width=%2732%27 height=%2732%27 fill=%27%23cccccc%27 mask=%27url%28%23frame-cutout%29%27/%3E%3C/svg%3E";
+
+/***/ }),
+
+/***/ "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=%27M6 17L12 23L26 9%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E":
+/*!************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** 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=%27M6 17L12 23L26 9%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E ***!
+  \************************************************************************************************************************************************************************************************************************************************************************************************/
 /***/ ((module) => {
 
 "use strict";
-module.exports = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m0.543%205.647c0-3.119%202.531-5.647%205.65-5.647h19.309c3.12%200%205.65%202.511%205.65%205.647v20.705c0%203.119-2.531%205.647-5.65%205.647h-19.309c-3.12%200-5.65-2.511-5.65-5.647v-20.705z%22%20fill%3D%22%23f00%22%2F%3E%3Cpath%20d%3D%22m8%208%2016%2016%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M24%208L8%2024%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E";
+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=%27M6 17L12 23L26 9%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E";
 
 /***/ }),
 
-/***/ "data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20%20fill%3D%22%23cccccc%22%20d%3D%22M25.107%2032.030h-18.214c-3.456%200-6.268-2.81-6.268-6.264v-19.529c0-3.456%202.812-6.268%206.268-6.268h18.214c3.456%200%206.268%202.812%206.268%206.268v19.529c0%203.452-2.812%206.264-6.268%206.264zM6.893%201.85c-2.419%200-4.386%201.967-4.386%204.386v19.529c0%202.417%201.967%204.382%204.386%204.382h18.214c2.419%200%204.386-1.965%204.386-4.382v-19.529c0-2.419-1.967-4.386-4.386-4.386h-18.214z%22%3E%3C/path%3E%3C/svg%3E":
-/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
-  !*** data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20%20fill%3D%22%23cccccc%22%20d%3D%22M25.107%2032.030h-18.214c-3.456%200-6.268-2.81-6.268-6.264v-19.529c0-3.456%202.812-6.268%206.268-6.268h18.214c3.456%200%206.268%202.812%206.268%206.268v19.529c0%203.452-2.812%206.264-6.268%206.264zM6.893%201.85c-2.419%200-4.386%201.967-4.386%204.386v19.529c0%202.417%201.967%204.382%204.386%204.382h18.214c2.419%200%204.386-1.965%204.386-4.382v-19.529c0-2.419-1.967-4.386-4.386-4.386h-18.214z%22%3E%3C/path%3E%3C/svg%3E ***!
-  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+/***/ "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 16h16%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%273%27 stroke-linecap=%27round%27/%3E%3C/svg%3E":
+/*!************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** 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 16h16%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%273%27 stroke-linecap=%27round%27/%3E%3C/svg%3E ***!
+  \************************************************************************************************************************************************************************************************************************************************************/
 /***/ ((module) => {
 
 "use strict";
-module.exports = "data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20%20fill%3D%22%23cccccc%22%20d%3D%22M25.107%2032.030h-18.214c-3.456%200-6.268-2.81-6.268-6.264v-19.529c0-3.456%202.812-6.268%206.268-6.268h18.214c3.456%200%206.268%202.812%206.268%206.268v19.529c0%203.452-2.812%206.264-6.268%206.264zM6.893%201.85c-2.419%200-4.386%201.967-4.386%204.386v19.529c0%202.417%201.967%204.382%204.386%204.382h18.214c2.419%200%204.386-1.965%204.386-4.382v-19.529c0-2.419-1.967-4.386-4.386-4.386h-18.214z%22%3E%3C/path%3E%3C/svg%3E";
+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 16h16%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%273%27 stroke-linecap=%27round%27/%3E%3C/svg%3E";
 
 /***/ }),
 
-/***/ "data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.543%205.647c0-3.119%202.531-5.647%205.65-5.647h19.309c3.12%200%205.65%202.511%205.65%205.647v20.705c0%203.119-2.531%205.647-5.65%205.647h-19.309c-3.12%200-5.65-2.511-5.65-5.647v-20.705zM5.313%2017.587l7.039%206.839%2013.831-13.439-2.636-2.561-10.929%2010.62-4.442-4.317-2.862%202.858z%22%3E%3C/path%3E%3C/svg%3E":
-/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
-  !*** data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.543%205.647c0-3.119%202.531-5.647%205.65-5.647h19.309c3.12%200%205.65%202.511%205.65%205.647v20.705c0%203.119-2.531%205.647-5.65%205.647h-19.309c-3.12%200-5.65-2.511-5.65-5.647v-20.705zM5.313%2017.587l7.039%206.839%2013.831-13.439-2.636-2.561-10.929%2010.62-4.442-4.317-2.862%202.858z%22%3E%3C/path%3E%3C/svg%3E ***!
-  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+/***/ "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":
+/*!****************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** 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 ***!
+  \****************************************************************************************************************************************************************************************************************************************************************************************************/
 /***/ ((module) => {
 
 "use strict";
-module.exports = "data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.543%205.647c0-3.119%202.531-5.647%205.65-5.647h19.309c3.12%200%205.65%202.511%205.65%205.647v20.705c0%203.119-2.531%205.647-5.65%205.647h-19.309c-3.12%200-5.65-2.511-5.65-5.647v-20.705zM5.313%2017.587l7.039%206.839%2013.831-13.439-2.636-2.561-10.929%2010.62-4.442-4.317-2.862%202.858z%22%3E%3C/path%3E%3C/svg%3E";
+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";
 
 /***/ }),
 
@@ -1650,9 +1879,7 @@ function executeCallbacks(event, uniqueId, timeoutDuration) {
             }
           });
         });
-      }, Promise.resolve())["catch"](function (error) {
-        console.error('Error in callback chain:', error);
-      });
+      }, Promise.resolve())["catch"](function () {});
     }
   }
 
@@ -1682,6 +1909,684 @@ function closest(element, selector) {
 
 /***/ }),
 
+/***/ "./modules/scrollableTable/scrollableTable.mjs":
+/*!*****************************************************!*\
+  !*** ./modules/scrollableTable/scrollableTable.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 */   "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");
+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 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;
+
+/**
+ * Sum of colspans for one row (direct th/td children of tr).
+ * @param {HTMLTableRowElement} tr
+ * @returns {number}
+ */
+function getRowColumnCount(tr) {
+  var cols = 0;
+  tr.querySelectorAll(':scope > th, :scope > td').forEach(function (cell) {
+    cols += parseInt(cell.getAttribute('colspan'), 10) || 1;
+  });
+  return cols;
+}
+
+/**
+ * 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 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);
+}
+
+/**
+ * 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 }[]}
+ */
+function computeCellPlacements(section, numRows, numCols) {
+  if (!section || numRows === 0 || numCols === 0) return [];
+  var occupied = Array.from({
+    length: numRows
+  }, function () {
+    return Array(numCols).fill(false);
+  });
+  var placements = [];
+  var rows = section.querySelectorAll(':scope > tr');
+  for (var r = 0; r < rows.length; r++) {
+    var tr = rows[r];
+    var cells = tr.querySelectorAll(':scope > th, :scope > td');
+    var _iterator4 = _createForOfIteratorHelper(cells),
+      _step4;
+    try {
+      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;
+        while (col < numCols) {
+          var free = true;
+          for (var rr = r; rr < r + rowspan && free; rr++) {
+            for (var cc = col; cc < col + colspan && free; cc++) {
+              var _occupied$rr;
+              if ((_occupied$rr = occupied[rr]) !== null && _occupied$rr !== void 0 && _occupied$rr[cc]) free = false;
+            }
+          }
+          if (free) break;
+          col++;
+        }
+        if (col + colspan > numCols) continue;
+        for (var _rr = r; _rr < r + rowspan; _rr++) {
+          for (var _cc = col; _cc < col + colspan; _cc++) {
+            if (occupied[_rr]) occupied[_rr][_cc] = true;
+          }
+        }
+        placements.push({
+          cell: cell,
+          row: r,
+          col: col,
+          colspan: colspan,
+          rowspan: rowspan
+        });
+      }
+    } catch (err) {
+      _iterator4.e(err);
+    } finally {
+      _iterator4.f();
+    }
+  }
+  return placements;
+}
+
+/**
+ * Apply grid placement styles to a list of placements (1-based line numbers for CSS Grid).
+ */
+function applyPlacements(placements) {
+  placements.forEach(function (_ref) {
+    var cell = _ref.cell,
+      row = _ref.row,
+      col = _ref.col,
+      colspan = _ref.colspan,
+      rowspan = _ref.rowspan;
+    cell.style.gridRow = "".concat(row + 1, " / span ").concat(rowspan);
+    cell.style.gridColumn = "".concat(col + 1, " / span ").concat(colspan);
+  });
+}
+
+/**
+ * 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) {
+    cell.style.gridRow = '';
+    cell.style.gridColumn = '';
+  });
+}
+
+/**
+ * Normalize height/maxHeight option to a CSS length string.
+ * @param {number|string} value
+ * @returns {string}
+ */
+function normalizeHeight(value) {
+  if (value == null) return DEFAULT_MAX_HEIGHT;
+  if (typeof value === 'number') return "".concat(value, "px");
+  return String(value);
+}
+
+/**
+ * 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 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
+ * @returns {string}
+ */
+function buildTemplateColumns(numCols, columnWidths, columnOverrides) {
+  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]), "fr"));
+    }
+  }
+  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
+ * @returns {string}
+ */
+function buildTemplateRows(numRows, rowHeights, rowOverrides) {
+  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), "px"));
+    }
+  }
+  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 {{ 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;
+  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)));
+  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 gutterSuffix = ' minmax(var(--apx-scrollable-gutter-width, 17px), var(--apx-scrollable-gutter-width, 17px))';
+  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) : columnWidths.map(function (w) {
+      return "".concat(Math.round(w), "fr");
+    }).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),
+    heights: rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.thead,
+    key: 'thead'
+  }, {
+    section: tbody,
+    rows: Math.max(1, tbodyRows),
+    heights: rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.tbody,
+    key: 'tbody'
+  }, {
+    section: tfoot,
+    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,
+      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) : heights.slice(0, rows).map(function (h) {
+        return "".concat(Math.round(h), "px");
+      }).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');
+ */
+function augmentWithScrollableTable(apx) {
+  apx.scrollableTable = function (optionsOrAction) {
+    var isRefresh = optionsOrAction === 'refresh';
+    var options = isRefresh ? null : optionsOrAction && _typeof(optionsOrAction) === 'object' ? optionsOrAction : {};
+    apx.elements.forEach(function (element) {
+      if (element.tagName !== 'TABLE') return;
+      var table = /** @type {HTMLTableElement} */element;
+      var ref = table[DATA_KEY];
+      if (ref) {
+        if (isRefresh) {
+          applyScrollableTable(table, ref.options, ref);
+        } else if (options && Object.keys(options).length > 0) {
+          ref.options = _objectSpread(_objectSpread({}, ref.options), 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;
+      console.log('[APX scrollableTable] create', table);
+      var result = applyScrollableTable(table, options, undefined);
+      table[DATA_KEY] = {
+        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;
+  };
+}
+
+/***/ }),
+
 /***/ "./modules/toast/toast.mjs":
 /*!*********************************!*\
   !*** ./modules/toast/toast.mjs ***!
@@ -3756,10 +4661,16 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (/* export default binding */ __WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 /* harmony import */ var _css_tristate_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./css/tristate.css */ "./modules/tristate/css/tristate.css");
+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 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 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); }
@@ -3768,12 +4679,12 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 
-/**
- * Creates a tri-state checkbox for each checkbox element in the apx.elements array.
- * @param {Array<HTMLElement>} apx - An array of HTMLElements which is returned by APX()
- * @example
- * // Call the tristate function on an array of checkbox elements
- * apx.tristate();
+/**
+ * Creates a tri-state checkbox for each checkbox element in the apx.elements array.
+ * @param {Array<HTMLElement>} apx - An array of HTMLElements which is returned by APX()
+ * @example
+ * // Call the tristate function on an array of checkbox elements
+ * apx.tristate();
  */
 /* harmony default export */ function __WEBPACK_DEFAULT_EXPORT__(apx) {
   apx.tristate = function () {
@@ -3785,27 +4696,139 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
           originalCheckbox = _createTriStateCheckb2[0],
           tristateDom = _createTriStateCheckb2[1],
           hiddenInput = _createTriStateCheckb2[2];
-        //If there is a "options.callbacks.after" callback in options call it
+        originalCheckbox._apxTristate = {
+          dom: tristateDom,
+          hiddenInput: hiddenInput
+        };
         if (options.callbacks && options.callbacks.after && typeof options.callbacks.after === 'function') {
           options.callbacks.after(originalCheckbox, tristateDom, hiddenInput);
         }
       }
     });
+    return {
+      setChildren: function setChildren(childrenApx) {
+        return _setChildren(apx, childrenApx, options);
+      }
+    };
   };
 }
+
+/**
+ * Link parent tristate(s) to child checkboxes. When exactly one parent: that parent gets
+ * indeterminate-dash automatically and shows dash when children are mixed; click parent to apply its state to all children.
+ * @param {Object} parentApx - APX instance whose elements are the parent checkbox(es)
+ * @param {Object} childrenApx - APX instance whose elements are the child checkbox(es)
+ * @param {Object} options - Options used for the parent (and applied to children when initializing them)
+ */
+function _setChildren(parentApx, childrenApx, options) {
+  var parents = parentApx.all().filter(function (el) {
+    return el.type === 'checkbox';
+  });
+  if (parents.length === 0) return;
+  if (parents.length > 1) {
+    console.warn('APX tristate setChildren: only the first parent is linked to all children.');
+  }
+  var parentCheckbox = parents[0];
+  var parentRef = parentCheckbox._apxTristate;
+  if (!parentRef) return;
+  var parentDom = parentRef.dom;
+  var parentHiddenInput = parentRef.hiddenInput;
+
+  // Automatically enable indeterminate (dash) on parent when it has children: dash shows only when children are mixed (--mixed)
+  parentDom.classList.add('apx-tristate--unchecked-indeterminate', 'apx-tristate--indeterminate-dash');
+  var childCheckboxes = childrenApx.all().filter(function (el) {
+    return el.type === 'checkbox';
+  });
+  var childRefs = [];
+  function syncParentFromChildren() {
+    if (childRefs.length === 0) return;
+    var states = childRefs.map(function (ref) {
+      return getTristateState(ref.dom);
+    });
+    var allChecked = states.every(function (s) {
+      return s === 'checked';
+    });
+    var allCrossed = states.every(function (s) {
+      return s === 'crossed';
+    });
+    var allUnchecked = states.every(function (s) {
+      return s === 'unchecked';
+    });
+    var mixed = !allChecked && !allCrossed && !allUnchecked;
+    parentDom.classList.remove('unchecked', 'checked', 'crossed');
+    if (mixed) parentDom.classList.add('apx-tristate--mixed');else parentDom.classList.remove('apx-tristate--mixed');
+    if (allChecked) {
+      parentDom.classList.add('checked');
+      parentHiddenInput.value = 'true';
+    } else if (allCrossed) {
+      parentDom.classList.add('crossed');
+      parentHiddenInput.value = 'false';
+    } else {
+      parentDom.classList.add('unchecked');
+      parentHiddenInput.removeAttribute('name');
+      parentHiddenInput.removeAttribute('value');
+    }
+  }
+  function applyParentToChildren() {
+    var parentState = getTristateState(parentDom);
+    childRefs.forEach(function (ref) {
+      return setTristateState(ref.checkbox, ref.dom, ref.hiddenInput, parentState);
+    });
+  }
+  var childOptions = _objectSpread(_objectSpread({}, options), {}, {
+    callbacks: {
+      after: function after(checkbox, dom, hiddenInput) {
+        childRefs.push({
+          checkbox: checkbox,
+          dom: dom,
+          hiddenInput: hiddenInput
+        });
+      },
+      change: syncParentFromChildren
+    }
+  });
+  childrenApx.tristate(childOptions);
+  syncParentFromChildren();
+  parentDom.addEventListener('click', function () {
+    return setTimeout(applyParentToChildren, 0);
+  });
+}
+function getTristateState(dom) {
+  if (dom.classList.contains('checked')) return 'checked';
+  if (dom.classList.contains('crossed')) return 'crossed';
+  return 'unchecked';
+}
+function setTristateState(checkbox, dom, hiddenInput, state) {
+  dom.classList.remove('unchecked', 'checked', 'crossed');
+  dom.classList.add(state);
+  var name = checkbox.dataset.name || checkbox.getAttribute('data-name') || checkbox.name || '';
+  if (state === 'checked') {
+    hiddenInput.value = 'true';
+    if (name) hiddenInput.setAttribute('name', name);
+    checkbox.checked = true;
+  } else if (state === 'crossed') {
+    hiddenInput.value = 'false';
+    if (name) hiddenInput.setAttribute('name', name);
+    checkbox.checked = false;
+  } else {
+    hiddenInput.removeAttribute('name');
+    hiddenInput.removeAttribute('value');
+    checkbox.checked = false;
+  }
+}
 function toggleTriStateCheckboxState(customCheckbox, actualCheckbox, hiddenInput) {
-  if (customCheckbox.classList.contains('checked')) {
-    customCheckbox.classList.remove('checked');
+  var wasChecked = customCheckbox.classList.contains('checked');
+  var wasCrossed = customCheckbox.classList.contains('crossed');
+  customCheckbox.classList.remove('unchecked', 'checked', 'crossed');
+  if (wasChecked) {
     customCheckbox.classList.add('crossed');
     actualCheckbox.checked = false;
     hiddenInput.value = 'false';
-  } else if (customCheckbox.classList.contains('crossed')) {
-    customCheckbox.classList.remove('crossed');
+  } else if (wasCrossed) {
     customCheckbox.classList.add('unchecked');
     hiddenInput.removeAttribute('name'); // Ensure the hidden input doesn't post any value
     hiddenInput.removeAttribute('value'); // Ensure the hidden input doesn't post any value
   } else {
-    customCheckbox.classList.remove('unchecked');
     customCheckbox.classList.add('checked');
     actualCheckbox.checked = true;
     hiddenInput.value = 'true';
@@ -3824,14 +4847,26 @@ function createTriStateCheckbox(checkboxElement, options) {
   var tristateDom = document.createElement('div');
   tristateDom.classList.add('apx-tristate');
   if (options.size) {
-    if (options.size.width) {
-      tristateDom.style.width = options.size.width + 'px';
+    if (options.size.width != null) {
+      var w = options.size.width;
+      if (typeof w !== 'number' && typeof w !== 'string') {
+        throw new TypeError('tristate size.width must be a number (px) or a string (CSS length).');
+      }
+      tristateDom.style.width = typeof w === 'number' ? w + 'px' : String(w);
     }
-    if (options.size.height) {
-      tristateDom.style.height = options.size.height + 'px';
+    if (options.size.height != null) {
+      var h = options.size.height;
+      if (typeof h !== 'number' && typeof h !== 'string') {
+        throw new TypeError('tristate size.height must be a number (px) or a string (CSS length).');
+      }
+      tristateDom.style.height = typeof h === 'number' ? h + 'px' : String(h);
     }
   }
   if (options.classes) (_tristateDom$classLis = tristateDom.classList).add.apply(_tristateDom$classLis, _toConsumableArray(computeClasses(options.classes)));
+  var colors = resolveColors(options);
+  if (colors.tick != null) tristateDom.style.setProperty('--apx-tristate-tick-color', String(colors.tick));
+  if (colors.checked != null) tristateDom.style.setProperty('--apx-tristate-checked-color', String(colors.checked));
+  if (colors.crossed != null) tristateDom.style.setProperty('--apx-tristate-crossed-color', String(colors.crossed));
   tristateDom.style.margin = checkboxStyle.margin;
   if (checkboxElement.checked) {
     tristateDom.classList.add('checked');
@@ -3874,18 +4909,16 @@ function createTriStateCheckbox(checkboxElement, options) {
   return [checkboxElement, tristateDom, hiddenInput];
 }
 function setDefaultState(options, tristateDom, hiddenInput) {
-  //for all values possible for defaultState, set the initial state of the checkbox
+  // Ensure only one state class is set (uncheckedAppearance modifiers must not affect checked/crossed)
+  tristateDom.classList.remove('unchecked', 'checked', 'crossed');
   if (options.defaultState === 'checked') {
-    tristateDom.classList.remove('unchecked');
     tristateDom.classList.add('checked');
     hiddenInput.value = 'true';
   } else if (options.defaultState === 'unchecked') {
-    tristateDom.classList.remove('checked');
     tristateDom.classList.add('unchecked');
     hiddenInput.removeAttribute('name'); // Ensure the hidden input doesn't post any value
     hiddenInput.removeAttribute('value'); // Ensure the hidden input doesn't post any value
   } else if (options.defaultState === 'crossed') {
-    tristateDom.classList.remove('checked');
     tristateDom.classList.add('crossed');
     hiddenInput.value = 'false';
   }
@@ -3901,6 +4934,14 @@ function computeClasses(classes) {
   }
   return computedClasses;
 }
+function resolveColors(options) {
+  var c = options.colors || {};
+  return {
+    tick: c.tick != null ? c.tick : options.tickColor,
+    checked: c.checked != null ? c.checked : options.checkedColor,
+    crossed: c.crossed != null ? c.crossed : options.crossedColor
+  };
+}
 function bubbleEventsToOriginalCheckbox(options, checkboxElement, tristateDom, hiddenInput, event) {
   //if options.callbacks.change is set, call it
   if (options.callbacks && options.callbacks.change && typeof options.callbacks.change === 'function') {
@@ -4050,10 +5091,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var _modules_listen_listen_mjs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./modules/listen/listen.mjs */ "./modules/listen/listen.mjs");
 /* harmony import */ var _modules_tristate_tristate_mjs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modules/tristate/tristate.mjs */ "./modules/tristate/tristate.mjs");
-/* harmony import */ var _modules_dialog_dialog_mjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./modules/dialog/dialog.mjs */ "./modules/dialog/dialog.mjs");
-/* harmony import */ var _modules_toast_toast_mjs__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./modules/toast/toast.mjs */ "./modules/toast/toast.mjs");
-/* harmony import */ var _modules_common_mjs__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./modules/common.mjs */ "./modules/common.mjs");
-/* harmony import */ var _modules_tools_exports_mjs__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./modules/tools/exports.mjs */ "./modules/tools/exports.mjs");
+/* 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");
+
 
 
 
@@ -4166,13 +5209,14 @@ 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_tools_exports_mjs__WEBPACK_IMPORTED_MODULE_5__.augmentWithPack)(apx);
+  (0,_modules_scrollableTable_scrollableTable_mjs__WEBPACK_IMPORTED_MODULE_2__["default"])(apx);
+  (0,_modules_tools_exports_mjs__WEBPACK_IMPORTED_MODULE_6__.augmentWithPack)(apx);
   return apx;
 };
-APX.loadCss = _modules_common_mjs__WEBPACK_IMPORTED_MODULE_4__.loadCss;
-APX.dialog = _modules_dialog_dialog_mjs__WEBPACK_IMPORTED_MODULE_2__["default"];
-APX.toast = _modules_toast_toast_mjs__WEBPACK_IMPORTED_MODULE_3__["default"];
-APX.tools = _modules_tools_exports_mjs__WEBPACK_IMPORTED_MODULE_5__.tools;
+APX.loadCss = _modules_common_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.isAPXObject = function (obj) {
   return obj && obj._isAPXObject === true;
 };