@globalpayments/vega 2.97.0 → 2.99.0

package/dist/cjs/vega-table_11.cjs.entry.js

@@ -7,43 +7,43 @@ const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const placeholder = require('./placeholder-cb6d37ad.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-389d1548.js');
 const object = require('./object-b53e9416.js');
+const ui = require('./ui-32120990.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const staticSubjectTitle = require('./static-subject-title-70c73b16.js');
 const observer = require('./observer-f49483e8.js');
-const ui = require('./ui-c91c37a7.js');
+const ui$1 = require('./ui-c91c37a7.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-c82df135.js');
 const remoteInvocationRegistry = require('./remote-invocation-registry-fc22fdd0.js');
-const vegaInternalEventId = require('./vega-internal-event-id-ecc5b87a.js');
+const vegaInternalEventId = require('./vega-internal-event-id-f4d33037.js');
 const vegaEventId = require('./vega-event-id-58afed7a.js');
-const responsiveFormatFacade = require('./responsive-format-facade-493d1763.js');
-const typeGuard = require('./type-guard-a57ef3ac.js');
+const responsiveFormatFacade = require('./responsive-format-facade-74e6d791.js');
+const typeGuard = require('./type-guard-b8d7bb3f.js');
 const component = require('./component-1e352960.js');
 const misc = require('./misc-3d30df91.js');
 const breakpoints = require('./breakpoints-1cc2c4c6.js');
 const mutationObserverSlimmer = require('./mutation-observer-slimmer-749d5020.js');
 const mutationObserverFilters = require('./mutation-observer-filters-38cebc6d.js');
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-273d62ef.js');
-const subStateNotifySlimmer = require('./sub-state-notify-slimmer-18891389.js');
+const subStateNotifySlimmer = require('./sub-state-notify-slimmer-e264a120.js');
 const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-e0ac8467.js');
 const eventEmitSlimmer = require('./event-emit-slimmer-34aa195e.js');
 const immutableMap = require('./immutable-map-d711339d.js');
-const translationSlimmer = require('./translation-slimmer-77c7f37d.js');
+const translationSlimmer = require('./translation-slimmer-e4997f8f.js');
 const synchronizeTaskQueue = require('./synchronize-task-queue-1ee80e94.js');
 const dynamicSlimmer = require('./dynamic-slimmer-f31fdfd7.js');
 const internalVegaZIndexManager = require('./internal-vega-z-index-manager-f03ddb37.js');
-const subStateObserverSlimmer = require('./sub-state-observer-slimmer-eee2f0ae.js');
+const subStateObserverSlimmer = require('./sub-state-observer-slimmer-6033b824.js');
 const featureFlagController = require('./feature-flag-controller-c19d0b58.js');
 const breakpoints$1 = require('./breakpoints-ebde4837.js');
 const accessibility = require('./accessibility-88f8af84.js');
 const internalIconManager = require('./internal-icon-manager-40bcac72.js');
 const chevronUp = require('./chevron-up-21465cf7.js');
 const chevronDown = require('./chevron-down-9847bf78.js');
-require('./ui-32120990.js');
 require('./number-4816603d.js');
 require('./pixel-98f2a10c.js');
 require('./array-249289f2.js');
 require('./typography-3ea4fe41.js');
-require('./internal-translation-controller-1dac2df8.js');
+require('./internal-translation-controller-51f7f865.js');
 require('./try-get-document-c0ebd39a.js');
 require('./internal-vega-event-manager-7003c84a.js');
 require('./vega-env-manager-23b8b23c.js');
@@ -410,7 +410,7 @@ class ColumnRenderInputModel {
   }
 }
 
-var __decorate$V = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$X = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -537,19 +537,19 @@ class VegaTableCellRenderer extends globalSlimmerRegistry.VegaSlimmer {
     return ColumnRenderInputModel.withMergedBoundaries(baseInput, spannedLeaves);
   }
 }
-__decorate$V([
+__decorate$X([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableCellRenderer.prototype, "rowKey", void 0);
-__decorate$V([
+__decorate$X([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableCellRenderer.prototype, "vegaTableDataSourceController", void 0);
-__decorate$V([
+__decorate$X([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableCellRenderer.prototype, "vegaTableEditableController", void 0);
-__decorate$V([
+__decorate$X([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableCellRenderer.prototype, "vegaTableRenderInputController", void 0);
-__decorate$V([
+__decorate$X([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableCellRenderer.prototype, "vegaTableBodyColSpanController", void 0);
 
@@ -590,16 +590,16 @@ function normalizeSpan(rawSpan) {
  * Walk rightward from the starting leaf to find the widest legal span.
  *
  * Stops (and returns a clamp reason) when the span would either run past the end of the
- * row or cross a pinned ↔ unpinned column boundary (which would break sticky positioning).
- * Breakpoint-hidden columns are intentionally **not** a stop condition — the span mirrors
- * across them (matching header group colSpan).
+ * row, cross a pinned ↔ unpinned column boundary, or encounter a breakpoint-hidden column.
+ * Breakpoint-hidden columns are a shrink trigger (the span stops before them).
  *
  * @param {number} declared - The declared span requested by the column.
  * @param {number} leafIndex - Index of the starting leaf in the flattened render-input array.
  * @param {ColumnRenderInputModel[]} allLeaves - All leaf render inputs for the table (ordered).
+ * @param {boolean[]} isHiddenAtBreakpoint - Per-leaf boolean: true if leaf is hidden at current breakpoint.
  * @returns {MaxSpan} The widest legal span plus the clamp reason (null when unconstrained).
  */
-function computeMaxSpan(declared, leafIndex, allLeaves) {
+function computeMaxSpan(declared, leafIndex, allLeaves, isHiddenAtBreakpoint) {
   var _a, _b;
   const startPinned = (_a = allLeaves[leafIndex]) === null || _a === void 0 ? void 0 : _a.pinned;
   let span = 1;
@@ -611,6 +611,13 @@ function computeMaxSpan(declared, leafIndex, allLeaves) {
         clampReason: `extends past the end of the row (${allLeaves.length} columns total)`,
       };
     }
+    // Reject if the next column is hidden at the current breakpoint.
+    if (isHiddenAtBreakpoint[leafIndex + offset]) {
+      return {
+        span,
+        clampReason: null, // Breakpoint-hidden stop is not a config-error warning — it is legitimate responsive hiding.
+      };
+    }
     // Reject if the next column is in a different pinned group.
     if (nextLeaf.pinned !== startPinned) {
       return {
@@ -640,11 +647,10 @@ function warnClampOnce(colKey, declared, effective, reason, warnedKeys) {
 /**
  * Resolve the effective body-cell colspan for a single source-data row cell.
  *
- * Clamps the declared span so it never runs past the end of the row nor crosses a
- * pinned ↔ unpinned column boundary. Structural clamps (end-of-row / pinned boundary) emit a
- * warning once per column key (tracked via the caller-supplied {@link warnedKeys} set).
- * Breakpoint-hidden columns are **not** clamped — the span mirrors across a `display: none`
- * column (matching header group colSpan) so the body grid stays column-aligned with the header.
+ * Clamps the declared span so it never runs past the end of the row, crosses a
+ * pinned ↔ unpinned column boundary, or encounters a breakpoint-hidden column (shrink before it).
+ * Structural clamps (end-of-row / pinned boundary) emit a warning once per column key
+ * (tracked via the caller-supplied {@link warnedKeys} set). Breakpoint-hidden stops are silent.
  *
  * @param {VegaTableColumnConfig} column - The column configuration for the spanning cell.
  * @param {VegaTableDataSourceItem} record - The row data record.
@@ -652,14 +658,15 @@ function warnClampOnce(colKey, declared, effective, reason, warnedKeys) {
  * @param {number} leafIndex - Index of this column in the flattened leaf render-input array.
  * @param {ColumnRenderInputModel[]} allLeaves - All leaf render inputs for the table (ordered).
  * @param {Set<string>} warnedKeys - Per-instance set tracking column keys that have already received a clamping warning.
+ * @param {boolean[]} isHiddenAtBreakpoint - Per-leaf boolean: true if leaf is hidden at current breakpoint.
  * @returns {BodyColSpanResult} Resolved spanning metadata for the cell.
  */
-function resolveBodyColSpan(column, record, rowIndex, leafIndex, allLeaves, warnedKeys) {
+function resolveBodyColSpan(column, record, rowIndex, leafIndex, allLeaves, warnedKeys, isHiddenAtBreakpoint) {
   var _a, _b, _c;
   const declared = getDeclaredSpan(column, record, rowIndex);
   if (!declared || declared <= 1)
     return NO_SPAN;
-  const { span, clampReason } = computeMaxSpan(declared, leafIndex, allLeaves);
+  const { span, clampReason } = computeMaxSpan(declared, leafIndex, allLeaves, isHiddenAtBreakpoint);
   const effectiveSpan = Math.min(declared, span);
   if (clampReason && effectiveSpan < declared) {
     const colKey = (_c = (_b = (_a = column.key) !== null && _a !== void 0 ? _a : column.prop) !== null && _b !== void 0 ? _b : column.label) !== null && _c !== void 0 ? _c : '';
@@ -673,7 +680,7 @@ function resolveBodyColSpan(column, record, rowIndex, leafIndex, allLeaves, warn
   };
 }
 
-var __decorate$U = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$W = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -689,6 +696,10 @@ var __decorate$U = (undefined && undefined.__decorate) || function (decorators,
  *
  * The structural shape (a {@link VegaSlimmer} controller reading component fields) mirrors the
  * main-branch `VegaTableExpandRowController` paradigm.
+ *
+ * Breakpoint-aware: maps the current breakpoint from the parent vega-table and computes
+ * which columns are hidden at that breakpoint so the colspan resolver can shrink before
+ * breakpoint-hidden columns (instead of mirroring across them).
  */
 class VegaTableBodyColSpanController extends globalSlimmerRegistry.VegaSlimmer {
   constructor() {
@@ -716,6 +727,8 @@ class VegaTableBodyColSpanController extends globalSlimmerRegistry.VegaSlimmer {
       this.warnedColSpanKeys.clear();
       this.lastWarnedColumnsRef = this.columns;
     }
+    // Compute per-leaf hidden state based on current breakpoint.
+    const isHiddenAtBreakpoint = leaves.map((leaf) => this.isColumnHiddenAtBreakpoint(leaf));
     const results = new Array(leaves.length).fill(null);
     let skipCount = 0;
     leaves.forEach((leaf, leafIndex) => {
@@ -726,7 +739,7 @@ class VegaTableBodyColSpanController extends globalSlimmerRegistry.VegaSlimmer {
       }
       const column = this.findColumn(leaf);
       const result = column
-        ? resolveBodyColSpan(column, record, rowIndex, leafIndex, leaves, this.warnedColSpanKeys)
+        ? resolveBodyColSpan(column, record, rowIndex, leafIndex, leaves, this.warnedColSpanKeys, isHiddenAtBreakpoint)
         : { htmlColspan: 1, skipCount: 0 };
       results[leafIndex] = result;
       skipCount = result.skipCount;
@@ -744,12 +757,35 @@ class VegaTableBodyColSpanController extends globalSlimmerRegistry.VegaSlimmer {
       column.prop === renderInput.key ||
       column.label === renderInput.key);
   }
+  /**
+   * Determine whether a leaf is hidden at the current breakpoint.
+   *
+   * A leaf is hidden when the column's breakpoint threshold is greater than the current breakpoint.
+   * Breakpoint order: 'default' < 'S' < 'M' < 'L' < 'XL'.
+   * Example: if currentBreakpoint is 'S' and column.breakpoint is 'M', the column is hidden (S < M).
+   *
+   * @param {ColumnRenderInputModel} leaf - The leaf render input to check.
+   * @returns {boolean} True if the leaf is hidden at the current breakpoint.
+   */
+  isColumnHiddenAtBreakpoint(leaf) {
+    const column = this.findColumn(leaf);
+    if (!column || !column.breakpoint) {
+      return false; // No breakpoint = never hidden.
+    }
+    const currentBreakpointIndex = ui.BreakpointKeys.indexOf(this.currentBreakpoint);
+    const columnBreakpointIndex = ui.BreakpointKeys.indexOf(column.breakpoint);
+    // Column is hidden when current breakpoint is smaller than the column's breakpoint threshold.
+    return currentBreakpointIndex < columnBreakpointIndex;
+  }
 }
-__decorate$U([
+__decorate$W([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyColSpanController.prototype, "columns", void 0);
+__decorate$W([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableBodyColSpanController.prototype, "currentBreakpoint", void 0);
 
-var __decorate$T = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$V = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -963,7 +999,7 @@ class VegaTableExpandRowController extends globalSlimmerRegistry.VegaSlimmer {
    */
   isAcceptableTableRowObserver(input) {
     return (input['host']['tagName'] === 'VEGA-TABLE-ROW' &&
-      this.host === ui.findParent(input['host'], 'vega-table'));
+      this.host === ui$1.findParent(input['host'], 'vega-table'));
   }
   /**
    * Sets expandable rows and hasExpandableRow based on rowExpandable and currentData
@@ -1013,62 +1049,62 @@ class VegaTableExpandRowController extends globalSlimmerRegistry.VegaSlimmer {
   }
 }
 VegaTableExpandRowController.expandRowSlotNamePrefix = 'vega-table-expand-row-';
-__decorate$T([
+__decorate$V([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowController.prototype, "host", void 0);
-__decorate$T([
+__decorate$V([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowController.prototype, "expandedRowKeySet", void 0);
-__decorate$T([
+__decorate$V([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableExpandRowController.prototype, "expandableRows", void 0);
-__decorate$T([
+__decorate$V([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableExpandRowController.prototype, "hasExpandableRow", void 0);
-__decorate$T([
+__decorate$V([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowController.prototype, "rowExpandable", void 0);
-__decorate$T([
+__decorate$V([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowController.prototype, "currentData", void 0);
-__decorate$T([
+__decorate$V([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowController.prototype, "rowExpandEventEmitter", void 0);
-__decorate$T([
+__decorate$V([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowController.prototype, "vegaTableDataSourceController", void 0);
-__decorate$T([
+__decorate$V([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaTableExpandRowController.prototype, "connectedCallback", null);
-__decorate$T([
+__decorate$V([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaTableExpandRowController.prototype, "disconnectedCallback", null);
-__decorate$T([
+__decorate$V([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaTableExpandRowController.prototype, "componentWillLoad", null);
-__decorate$T([
+__decorate$V([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], VegaTableExpandRowController.prototype, "componentDidLoad", null);
-__decorate$T([
+__decorate$V([
   globalSlimmerRegistry.MapToComponentMethod('toggleExpandRow')
 ], VegaTableExpandRowController.prototype, "toggleExpandRow", void 0);
-__decorate$T([
+__decorate$V([
   globalSlimmerRegistry.MapToComponentMethod('openExpandRow')
 ], VegaTableExpandRowController.prototype, "openExpandRow", void 0);
-__decorate$T([
+__decorate$V([
   globalSlimmerRegistry.MapToComponentMethod('closeExpandRow')
 ], VegaTableExpandRowController.prototype, "closeExpandRow", void 0);
-__decorate$T([
+__decorate$V([
   globalSlimmerRegistry.MapToComponentMethod('closeAllExpandRow')
 ], VegaTableExpandRowController.prototype, "closeAllExpandRow", void 0);
-__decorate$T([
+__decorate$V([
   globalSlimmerRegistry.MapToComponentMethod('watchRowExpandable')
 ], VegaTableExpandRowController.prototype, "watchRowExpandable", null);
-__decorate$T([
+__decorate$V([
   globalSlimmerRegistry.MapToComponentMethod('watchCurrentData')
 ], VegaTableExpandRowController.prototype, "watchCurrentData", null);
 
-var __decorate$S = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$U = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1329,7 +1365,7 @@ class VegaTableRowSelectionController$1 extends globalSlimmerRegistry.VegaSlimme
       return this.host === input['host'];
     }
     if (input['host']['tagName'] === 'VEGA-TABLE-ROW') {
-      return this.host === ui.findParent(input['host'], 'vega-table');
+      return this.host === ui$1.findParent(input['host'], 'vega-table');
     }
   }
   /**
@@ -1343,7 +1379,7 @@ class VegaTableRowSelectionController$1 extends globalSlimmerRegistry.VegaSlimme
       return this.host === input['host'];
     }
     if (input['host']['tagName'] === 'VEGA-TABLE-HEAD-ROW') {
-      return this.host === ui.findParent(input['host'], 'vega-table');
+      return this.host === ui$1.findParent(input['host'], 'vega-table');
     }
   }
   /**
@@ -1404,71 +1440,71 @@ class VegaTableRowSelectionController$1 extends globalSlimmerRegistry.VegaSlimme
    */
   isAcceptableRowClickObserver(input) {
     return (input['host']['tagName'] === 'VEGA-TABLE-ROW' &&
-      this.host === ui.findParent(input['host'], 'vega-table'));
+      this.host === ui$1.findParent(input['host'], 'vega-table'));
   }
 }
-__decorate$S([
+__decorate$U([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "host", void 0);
-__decorate$S([
+__decorate$U([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableRowSelectionController$1.prototype, "isSelectedAll", void 0);
-__decorate$S([
+__decorate$U([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "selectedRowKeySet", void 0);
-__decorate$S([
+__decorate$U([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableRowSelectionController$1.prototype, "rowSelection", void 0);
-__decorate$S([
+__decorate$U([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "rowKey", void 0);
-__decorate$S([
+__decorate$U([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "selectChangeEventEmitter", void 0);
-__decorate$S([
+__decorate$U([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "selectAllChangeEventEmitter", void 0);
-__decorate$S([
+__decorate$U([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "vegaTableDataSourceController", void 0);
-__decorate$S([
+__decorate$U([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "rowSelectEventEmitter", void 0);
-__decorate$S([
+__decorate$U([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "rowSelectAllEventEmitter", void 0);
-__decorate$S([
+__decorate$U([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaTableRowSelectionController$1.prototype, "connectedCallback", null);
-__decorate$S([
+__decorate$U([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaTableRowSelectionController$1.prototype, "disconnectedCallback", null);
-__decorate$S([
+__decorate$U([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaTableRowSelectionController$1.prototype, "componentWillLoad", null);
-__decorate$S([
+__decorate$U([
   globalSlimmerRegistry.MapToComponentMethod('watchRowSelection')
 ], VegaTableRowSelectionController$1.prototype, "watchRowSelection", null);
-__decorate$S([
+__decorate$U([
   globalSlimmerRegistry.MapToComponentMethod('setSelection')
 ], VegaTableRowSelectionController$1.prototype, "setSelection", null);
-__decorate$S([
+__decorate$U([
   globalSlimmerRegistry.MapToComponentMethod('watchCurrentData')
 ], VegaTableRowSelectionController$1.prototype, "watchCurrentData", null);
-__decorate$S([
+__decorate$U([
   globalSlimmerRegistry.MapToComponentMethod('clearSelection')
 ], VegaTableRowSelectionController$1.prototype, "clearSelection", null);
-__decorate$S([
+__decorate$U([
   globalSlimmerRegistry.MapToComponentMethod('getSelection')
 ], VegaTableRowSelectionController$1.prototype, "getSelection", null);
-__decorate$S([
+__decorate$U([
   globalSlimmerRegistry.MapToComponentMethod('watchSelectedRowKeySet')
 ], VegaTableRowSelectionController$1.prototype, "watchSelectedRowKeySet", null);
-__decorate$S([
+__decorate$U([
   globalSlimmerRegistry.MapToComponentMethod('watchSelectedAll')
 ], VegaTableRowSelectionController$1.prototype, "watchSelectedAll", null);
 
-var __decorate$R = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$T = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1608,41 +1644,41 @@ class VegaTableDataSourceController extends globalSlimmerRegistry.VegaSlimmer {
     }
   }
 }
-__decorate$R([
+__decorate$T([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableDataSourceController.prototype, "rowKey", void 0);
-__decorate$R([
+__decorate$T([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableDataSourceController.prototype, "currentData", void 0);
-__decorate$R([
+__decorate$T([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableDataSourceController.prototype, "dataSource", void 0);
-__decorate$R([
+__decorate$T([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableDataSourceController.prototype, "columns", void 0);
-__decorate$R([
+__decorate$T([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableDataSourceController.prototype, "sortersMap", void 0);
-__decorate$R([
+__decorate$T([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableDataSourceController.prototype, "vegaTableSortController", void 0);
-__decorate$R([
+__decorate$T([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableDataSourceController.prototype, "vegaTableRenderer", void 0);
-__decorate$R([
+__decorate$T([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableDataSourceController.prototype, "isTemplateRenderMode", void 0);
-__decorate$R([
+__decorate$T([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaTableDataSourceController.prototype, "componentWillLoad", null);
-__decorate$R([
+__decorate$T([
   globalSlimmerRegistry.MapToComponentMethod('watchSortersMap')
 ], VegaTableDataSourceController.prototype, "watchSortersMap", null);
-__decorate$R([
+__decorate$T([
   globalSlimmerRegistry.MapToComponentMethod('watchDataSource')
 ], VegaTableDataSourceController.prototype, "watchDataSource", null);
 
-var __decorate$Q = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$S = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1685,41 +1721,41 @@ class VegaTableBodyRenderer extends globalSlimmerRegistry.VegaSlimmer {
     return editable ? (index.h("vega-form", { ref: (ref) => (this.tableFormRef = ref) }, this.renderTableBody(editable))) : (this.renderTableBody(false));
   }
 }
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "striped", void 0);
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "rowDivider", void 0);
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "columns", void 0);
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "currentBreakpoint", void 0);
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "rowClickable", void 0);
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTableDataSourceController", void 0);
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTablePaginationController", void 0);
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTableRowSelectionController", void 0);
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTableRowRenderer", void 0);
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "columnStructureModel", void 0);
-__decorate$Q([
+__decorate$S([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTableExpandRowController", void 0);
 
-var __decorate$P = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$R = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1782,32 +1818,32 @@ class VegaTableHeaderRenderer extends globalSlimmerRegistry.VegaSlimmer {
     return this.showHeader && index.h("vega-table-head", null, this.renderHeaderRows());
   }
 }
-__decorate$P([
+__decorate$R([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "showHeader", void 0);
-__decorate$P([
+__decorate$R([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "sortersMap", void 0);
-__decorate$P([
+__decorate$R([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "sortConfig", void 0);
-__decorate$P([
+__decorate$R([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "columns", void 0);
-__decorate$P([
+__decorate$R([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "rowSelection", void 0);
-__decorate$P([
+__decorate$R([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "vegaTableSortController", void 0);
-__decorate$P([
+__decorate$R([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "vegaTableDataSourceController", void 0);
-__decorate$P([
+__decorate$R([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "vegaTableRenderInputController", void 0);
 
-var __decorate$O = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$Q = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1867,25 +1903,25 @@ class VegaTablePaginationRenderer extends globalSlimmerRegistry.VegaSlimmer {
     const { pageSize, position, extensions, pageSizeSelectorOptions } = this.getPaginationConfig();
     const paginationWrapperClasses = ['vega-table-pagination-container', position];
     const total = this.vegaTableDataSourceController.getCurrentData().length;
-    return (total > 0 && (index.h("div", { class: ui.arrayToClassString(paginationWrapperClasses) },
+    return (total > 0 && (index.h("div", { class: ui$1.arrayToClassString(paginationWrapperClasses) },
       index.h("vega-pagination", { total: total, pageSize: pageSize, current: this.currentPage, extensions: extensions, pageSizeSelectorOptions: pageSizeSelectorOptions, 
         /* eslint-disable-next-line react/jsx-no-bind */
         ref: this.paginationRefCallback }))));
   }
 }
-__decorate$O([
+__decorate$Q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "pagination", void 0);
-__decorate$O([
+__decorate$Q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "pageSize", void 0);
-__decorate$O([
+__decorate$Q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "currentPage", void 0);
-__decorate$O([
+__decorate$Q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "vegaTablePaginationController", void 0);
-__decorate$O([
+__decorate$Q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "vegaTableDataSourceController", void 0);
 
@@ -1912,7 +1948,7 @@ const VegaTableScrollableContainer = ({ scrollConfig = {}, ref, onScroll }, chil
     onScroll: handleVerticalScroll }, children));
 };
 
-var __decorate$N = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$P = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1945,20 +1981,20 @@ class VegaTableScrollContainerRenderer extends globalSlimmerRegistry.VegaSlimmer
     this.tableScrollContainerRef = ref;
   }
 }
-__decorate$N([
+__decorate$P([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableScrollContainerRenderer.prototype, "scrollConfig", void 0);
-__decorate$N([
+__decorate$P([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableScrollContainerRenderer.prototype, "host", void 0);
-__decorate$N([
+__decorate$P([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableScrollContainerRenderer.prototype, "isTemplateRenderMode", void 0);
-__decorate$N([
+__decorate$P([
   globalSlimmerRegistry.MapToComponentMethod('watchCurrentPage')
 ], VegaTableScrollContainerRenderer.prototype, "watchCurrentPage", null);
 
-var __decorate$M = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$O = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1988,7 +2024,7 @@ class VegaTableRenderer extends globalSlimmerRegistry.VegaSlimmer {
     };
   }
   render() {
-    const hostClasses = ui.arrayToClassString([
+    const hostClasses = ui$1.arrayToClassString([
       this.rowDivider && 'row-divider',
       this.columnDivider && 'column-divider',
       `density-${responsiveFormatFacade.ResponsiveFormatFacade.formatCustom(this.density)}`,
@@ -2004,68 +2040,68 @@ class VegaTableRenderer extends globalSlimmerRegistry.VegaSlimmer {
       this.renderEmpty()), this.host);
   }
 }
-__decorate$M([
+__decorate$O([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "host", void 0);
-__decorate$M([
+__decorate$O([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "columns", void 0);
-__decorate$M([
+__decorate$O([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "emptyDescription", void 0);
-__decorate$M([
+__decorate$O([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "rowDivider", void 0);
-__decorate$M([
+__decorate$O([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "columnDivider", void 0);
-__decorate$M([
+__decorate$O([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "density", void 0);
-__decorate$M([
+__decorate$O([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "dataSource", void 0);
-__decorate$M([
+__decorate$O([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "striped", void 0);
-__decorate$M([
+__decorate$O([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "columnStructureModel", void 0);
-__decorate$M([
+__decorate$O([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "showEditError", void 0);
-__decorate$M([
+__decorate$O([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableHeaderRenderer", void 0);
-__decorate$M([
+__decorate$O([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableBodyRenderer", void 0);
-__decorate$M([
+__decorate$O([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableColGroupRenderer", void 0);
-__decorate$M([
+__decorate$O([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableScrollContainerRenderer", void 0);
-__decorate$M([
+__decorate$O([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTablePaginationRenderer", void 0);
-__decorate$M([
+__decorate$O([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableDataSourceController", void 0);
-__decorate$M([
+__decorate$O([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "translationSlimmer", void 0);
-__decorate$M([
+__decorate$O([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableRenderer.prototype, "vegaTableChildrenController", void 0);
-__decorate$M([
+__decorate$O([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "isTemplateRenderMode", void 0);
-__decorate$M([
+__decorate$O([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "editingRows", void 0);
 
-var __decorate$L = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$N = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2129,23 +2165,23 @@ class VegaTablePaginationController extends globalSlimmerRegistry.VegaSlimmer {
     return index >= start && index < end;
   }
 }
-__decorate$L([
+__decorate$N([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTablePaginationController.prototype, "pagination", void 0);
-__decorate$L([
+__decorate$N([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTablePaginationController.prototype, "pageSize", void 0);
-__decorate$L([
+__decorate$N([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTablePaginationController.prototype, "currentPage", void 0);
-__decorate$L([
+__decorate$N([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaTablePaginationController.prototype, "componentWillLoad", null);
-__decorate$L([
+__decorate$N([
   globalSlimmerRegistry.MapToComponentMethod('watchPagination')
 ], VegaTablePaginationController.prototype, "watchPagination", null);
 
-var __decorate$K = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$M = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2374,55 +2410,55 @@ class VegaTableEditableController extends globalSlimmerRegistry.VegaSlimmer {
   }
 }
 VegaTableEditableController.rowFormKeyPrefix = 'vega-table-row-form-';
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableEditableController.prototype, "editingRows", void 0);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableEditableController.prototype, "rowKey", void 0);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableEditableController.prototype, "columns", void 0);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableEditableController.prototype, "vegaTableDataSourceController", void 0);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableEditableController.prototype, "vegaTableBodyRenderer", void 0);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentMethod('saveAllEditRows')
 ], VegaTableEditableController.prototype, "saveAllEditRows", null);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentMethod('stopAllRowEditMode')
 ], VegaTableEditableController.prototype, "stopAllRowEditMode", null);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentMethod('watchDataSource')
 ], VegaTableEditableController.prototype, "watchDataSource", null);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentMethod('saveEditRow')
 ], VegaTableEditableController.prototype, "saveEditRow", null);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentMethod('stopRowEditMode')
 ], VegaTableEditableController.prototype, "stopRowEditMode", null);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentMethod('removeRow')
 ], VegaTableEditableController.prototype, "removeRow", null);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentMethod('startRowEditMode')
 ], VegaTableEditableController.prototype, "startRowEditMode", null);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentMethod('addNewRow')
 ], VegaTableEditableController.prototype, "addNewRow", null);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentMethod('getRowsData')
 ], VegaTableEditableController.prototype, "getRowsData", null);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentMethod('getEditingRowsKey')
 ], VegaTableEditableController.prototype, "getEditingRowsKey", null);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentMethod('getFormRef')
 ], VegaTableEditableController.prototype, "getFormRef", null);
-__decorate$K([
+__decorate$M([
   globalSlimmerRegistry.MapToComponentMethod('getRowData')
 ], VegaTableEditableController.prototype, "getRowData", null);
 
@@ -2468,7 +2504,7 @@ class VegaTableSorter {
   }
 }
 
-var __decorate$J = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$L = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2552,26 +2588,26 @@ class VegaTableSortController extends globalSlimmerRegistry.VegaSlimmer {
     });
   }
 }
-__decorate$J([
+__decorate$L([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableSortController.prototype, "sortersMap", void 0);
-__decorate$J([
+__decorate$L([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableSortController.prototype, "columns", void 0);
-__decorate$J([
+__decorate$L([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableSortController.prototype, "changeEventEmitter", void 0);
-__decorate$J([
+__decorate$L([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableSortController.prototype, "vegaTableDataSourceController", void 0);
-__decorate$J([
+__decorate$L([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableSortController.prototype, "sortConfig", void 0);
-__decorate$J([
+__decorate$L([
   globalSlimmerRegistry.MapToComponentMethod('watchColumns')
 ], VegaTableSortController.prototype, "watchColumns", null);
 
-var __decorate$I = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$K = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2606,26 +2642,26 @@ class VegaTableColGroupRenderer extends globalSlimmerRegistry.VegaSlimmer {
       index.h("col", { style: { minWidth: this.paddingX[1], width: this.paddingX[1] } })));
   }
 }
-__decorate$I([
+__decorate$K([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "paddingX", void 0);
-__decorate$I([
+__decorate$K([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "columnStructureModel", void 0);
-__decorate$I([
+__decorate$K([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "columns", void 0);
-__decorate$I([
+__decorate$K([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "hasExpandableRow", void 0);
-__decorate$I([
+__decorate$K([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "rowDraggable", void 0);
-__decorate$I([
+__decorate$K([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "vegaTableRowSelectionController", void 0);
 
-var __decorate$H = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$J = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2810,68 +2846,68 @@ class VegaTableChildrenController extends globalSlimmerRegistry.VegaSlimmer {
     }
   }
 }
-__decorate$H([
+__decorate$J([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableChildrenController.prototype, "host", void 0);
-__decorate$H([
+__decorate$J([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableChildrenController.prototype, "columns", void 0);
-__decorate$H([
+__decorate$J([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableChildrenController.prototype, "dataSource", void 0);
-__decorate$H([
+__decorate$J([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableChildrenController.prototype, "currentData", void 0);
-__decorate$H([
+__decorate$J([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableChildrenController.prototype, "rowSelection", void 0);
-__decorate$H([
+__decorate$J([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableChildrenController.prototype, "striped", void 0);
-__decorate$H([
+__decorate$J([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableChildrenController.prototype, "rowDivider", void 0);
-__decorate$H([
+__decorate$J([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableChildrenController.prototype, "vegaTableDataSourceController", void 0);
-__decorate$H([
+__decorate$J([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableChildrenController.prototype, "vegaTableRenderer", void 0);
-__decorate$H([
+__decorate$J([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableChildrenController.prototype, "isTemplateRenderMode", void 0);
-__decorate$H([
+__decorate$J([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableChildrenController.prototype, "currentDataObserver", void 0);
-__decorate$H([
+__decorate$J([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableChildrenController.prototype, "rowStripedObserver", void 0);
-__decorate$H([
+__decorate$J([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaTableChildrenController.prototype, "connectedCallback", null);
-__decorate$H([
+__decorate$J([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaTableChildrenController.prototype, "disconnectedCallback", null);
-__decorate$H([
+__decorate$J([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaTableChildrenController.prototype, "componentWillLoad", null);
-__decorate$H([
+__decorate$J([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], VegaTableChildrenController.prototype, "componentDidLoad", null);
-__decorate$H([
+__decorate$J([
   globalSlimmerRegistry.MapToComponentMethod('clearSelection')
 ], VegaTableChildrenController.prototype, "clearSelection", null);
-__decorate$H([
+__decorate$J([
   globalSlimmerRegistry.MapToComponentMethod('watchCurrentData')
 ], VegaTableChildrenController.prototype, "watchCurrentData", null);
-__decorate$H([
+__decorate$J([
   globalSlimmerRegistry.MapToComponentMethod('watchStriped')
 ], VegaTableChildrenController.prototype, "watchStriped", null);
-__decorate$H([
+__decorate$J([
   globalSlimmerRegistry.MapToComponentMethod('watchRowDivider')
 ], VegaTableChildrenController.prototype, "watchRowDivider", null);
 
-var __decorate$G = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$I = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2911,29 +2947,29 @@ class VegaTableRowRenderer$1 extends globalSlimmerRegistry.VegaSlimmer {
     return editable ? (index.h("vega-form", { key: `vega-table-row-form-${rowKey}`, "data-vega-form": `${VegaTableEditableController.rowFormKeyPrefix}${rowKey}`, ref: (ref) => this.vegaTableEditableController.getRowFormRefMap().set(rowKey, ref) }, this.renderTableRowComponent(rowProps))) : (this.renderTableRowComponent(rowProps));
   }
 }
-__decorate$G([
+__decorate$I([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "rowClickEventEmitter", void 0);
-__decorate$G([
+__decorate$I([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "vegaTableEditableController", void 0);
-__decorate$G([
+__decorate$I([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "vegaTableCellRenderer", void 0);
-__decorate$G([
+__decorate$I([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "vegaTableBodyColSpanController", void 0);
-__decorate$G([
+__decorate$I([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "striped", void 0);
-__decorate$G([
+__decorate$I([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "rowDivider", void 0);
-__decorate$G([
+__decorate$I([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "vegaTableRenderInputController", void 0);
 
-var __decorate$F = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$H = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2989,25 +3025,25 @@ class VegaTableRenderModeController extends globalSlimmerRegistry.VegaSlimmer {
   componentDidLoad() {
   }
 }
-__decorate$F([
+__decorate$H([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderModeController.prototype, "host", void 0);
-__decorate$F([
+__decorate$H([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableRenderModeController.prototype, "isTemplateRenderMode", void 0);
-__decorate$F([
+__decorate$H([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableRenderModeController.prototype, "currentDataObserver", void 0);
-__decorate$F([
+__decorate$H([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaTableRenderModeController.prototype, "connectedCallback", null);
-__decorate$F([
+__decorate$H([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaTableRenderModeController.prototype, "disconnectedCallback", null);
-__decorate$F([
+__decorate$H([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaTableRenderModeController.prototype, "componentWillLoad", null);
-__decorate$F([
+__decorate$H([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], VegaTableRenderModeController.prototype, "componentDidLoad", null);
 
@@ -3276,7 +3312,7 @@ class ColumnStructureModel {
 ColumnStructureModel.ROOT_LEVEL = -1;
 ColumnStructureModel.ROOT_KEY = '#root-model#';
 
-var __decorate$E = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$G = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -3284,7 +3320,7 @@ var __decorate$E = (undefined && undefined.__decorate) || function (decorators,
 };
 /**
  * Controller responsible for building and keeping the ColumnStructureModel in sync
- * with the component's `columns` and `groupColumns` properties.
+ * with data source and template-derived column configuration.
  *
  * This slimmer maps relevant component fields and lifecycle/watch hooks to
  * automatically rebuild the column structure when inputs change.
@@ -3312,36 +3348,46 @@ class VegaTableColumnStructureModelController extends globalSlimmerRegistry.Vega
     this.setColumnStructureModel();
   }
   /**
-   * Build and assign the ColumnStructureModel from current `columns` and `groupColumns`.
-   * Uses `ColumnStructureModel.from` which returns a root model representing the column tree.
+   * Rebuilds the ColumnStructureModel when template-derived grouping changes.
+   */
+  watchTemplateGroupColumns() {
+    this.setColumnStructureModel();
+  }
+  /**
+   * Build and assign the ColumnStructureModel from current inputs.
+   * Template-derived grouping takes precedence over the public `groupColumns` input.
    */
   setColumnStructureModel() {
-    this.columnStructureModel = ColumnStructureModel.from(this.columns, this.groupColumns);
+    var _a;
+    this.columnStructureModel = ColumnStructureModel.from(this.columns, (_a = this.templateGroupColumns) !== null && _a !== void 0 ? _a : this.groupColumns);
   }
 }
-__decorate$E([
-  globalSlimmerRegistry.MapToComponentField()
-], VegaTableColumnStructureModelController.prototype, "host", void 0);
-__decorate$E([
+__decorate$G([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableColumnStructureModelController.prototype, "columns", void 0);
-__decorate$E([
+__decorate$G([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableColumnStructureModelController.prototype, "groupColumns", void 0);
-__decorate$E([
+__decorate$G([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableColumnStructureModelController.prototype, "templateGroupColumns", void 0);
+__decorate$G([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableColumnStructureModelController.prototype, "columnStructureModel", void 0);
-__decorate$E([
+__decorate$G([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaTableColumnStructureModelController.prototype, "componentWillLoad", null);
-__decorate$E([
+__decorate$G([
   globalSlimmerRegistry.MapToComponentMethod('watchColumns')
 ], VegaTableColumnStructureModelController.prototype, "watchColumns", null);
-__decorate$E([
+__decorate$G([
   globalSlimmerRegistry.MapToComponentMethod('watchGroupColumns')
 ], VegaTableColumnStructureModelController.prototype, "watchGroupColumns", null);
+__decorate$G([
+  globalSlimmerRegistry.MapToComponentMethod('watchTemplateGroupColumns')
+], VegaTableColumnStructureModelController.prototype, "watchTemplateGroupColumns", null);
 
-var __decorate$D = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$F = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -3443,6 +3489,17 @@ class VegaTableRenderInputController extends globalSlimmerRegistry.VegaSlimmer {
   addHeadCellRenderInputMap(headCell, renderInput) {
     this.headCellRenderInputMap.set(headCell, renderInput);
   }
+  /**
+   * Clear all head row and head cell render-input mappings.
+   *
+   * Used by template-mode lifecycle to invalidate stale grouped-header metadata
+   * before re-registering current mappings. In data-source mode the header renderer
+   * re-registers via ref callbacks each render, so stale entries are overwritten naturally.
+   */
+  clearHeadRenderInputMaps() {
+    this.headRowRenderInputMap.clear();
+    this.headCellRenderInputMap.clear();
+  }
   /**
    * Store body cell render input mapping for pinned cells (used to update sticky positions).
    *
@@ -3504,32 +3561,29 @@ class VegaTableRenderInputController extends globalSlimmerRegistry.VegaSlimmer {
     this.leavesRenderInputModels = this.columnRenderInputModels.flatMap((model) => model.getLeaves());
   }
 }
-__decorate$D([
+__decorate$F([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderInputController.prototype, "host", void 0);
-__decorate$D([
+__decorate$F([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderInputController.prototype, "columnStructureModel", void 0);
-__decorate$D([
-  globalSlimmerRegistry.MapToComponentField()
-], VegaTableRenderInputController.prototype, "vegaTableColGroupRenderer", void 0);
-__decorate$D([
+__decorate$F([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaTableRenderInputController.prototype, "connectedCallback", null);
-__decorate$D([
+__decorate$F([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaTableRenderInputController.prototype, "disconnectedCallback", null);
-__decorate$D([
+__decorate$F([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaTableRenderInputController.prototype, "componentWillLoad", null);
-__decorate$D([
+__decorate$F([
   globalSlimmerRegistry.MapToComponentMethod('componentDidRender')
 ], VegaTableRenderInputController.prototype, "componentDidRender", null);
-__decorate$D([
+__decorate$F([
   globalSlimmerRegistry.MapToComponentMethod('watchColumnStructureModel')
 ], VegaTableRenderInputController.prototype, "watchColumnStructureModel", null);
 
-var __decorate$C = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$E = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -3560,6 +3614,9 @@ class VegaTablePinnedRenderer extends globalSlimmerRegistry.VegaSlimmer {
     this.dynamicRightDividerCells = new Set();
     this.dynamicLeftDividerCells = new Set();
     this.dynamicHideRightBorderCells = new Set();
+    // Authored template cells whose shadow <td> colspan was shrunk for breakpoint-hidden columns,
+    // tracked so the authored colspan can be restored when pinning is removed at runtime (VD-9768).
+    this.templateColspanSyncedCells = new Set();
     this.clearPinnedPositionsTaskQueue = new synchronizeTaskQueue.SynchronizeTaskQueue(1);
   }
   componentDidLoad() {
@@ -3601,8 +3658,10 @@ class VegaTablePinnedRenderer extends globalSlimmerRegistry.VegaSlimmer {
     this.dynamicLeftDividerCells.clear();
     this.dynamicHideRightBorderCells.forEach((cell) => cell.classList.remove('hide-right-border'));
     this.dynamicHideRightBorderCells.clear();
-    // if not have head row, it means no pinned, so no need to update
-    const row = this.host.shadowRoot.querySelector('vega-table-head-row');
+    // if not have head row, it means no pinned, so no need to update.
+    // In template mode the authored rows live in light DOM (slotted), so resolve the row
+    // container root accordingly instead of always querying the table's shadow root.
+    const row = this.getRowContainerRoot().querySelector('vega-table-head-row');
     // to avoid window resize before table rendered.
     // @see{module:resize-pinned-position-by-edit-row}
     /* istanbul ignore next */
@@ -3633,6 +3692,18 @@ class VegaTablePinnedRenderer extends globalSlimmerRegistry.VegaSlimmer {
         lastVisibleRightPinnedHeadCell = shadowCell;
       }
     });
+    // Track last visible left-pinned body cells per row for boundary class propagation.
+    // Declared before the template positioning pass so authored cells feed the same maps the
+    // shared dynamic-boundary logic below consumes (one update flow for both render modes).
+    const lastVisibleLeftPinnedBodyCells = new Map();
+    const firstVisibleRightPinnedBodyCells = new Map();
+    const lastVisibleRightPinnedBodyCells = new Map();
+    // Template mode has no JSX ref callbacks to populate the body-cell render-input map, and
+    // its rows live in light DOM. Position the authored body/foot leaf cells directly by zipping
+    // them with the leaf render inputs (respecting colSpan), reusing the shared positioning primitive.
+    if (this.isTemplateRenderMode) {
+      this.updateTemplateLeafCellPinnedPosition(prevShadowThWidth, leafWidths, nextShadowThWidth, lastVisibleLeftPinnedBodyCells, firstVisibleRightPinnedBodyCells, lastVisibleRightPinnedBodyCells);
+    }
     // Remove stale entries (disconnected cells) left over from prior renders (e.g. after drag reorder).
     pinnedColumnBodyCellRenderInputMap.forEach((_, bodyCell) => {
       /* istanbul ignore next -- defensive cleanup for disconnected cells; jsdom always keeps cells connected */
@@ -3640,10 +3711,6 @@ class VegaTablePinnedRenderer extends globalSlimmerRegistry.VegaSlimmer {
         pinnedColumnBodyCellRenderInputMap.delete(bodyCell);
       }
     });
-    // Track last visible left-pinned body cells per row for boundary class propagation.
-    const lastVisibleLeftPinnedBodyCells = new Map();
-    const firstVisibleRightPinnedBodyCells = new Map();
-    const lastVisibleRightPinnedBodyCells = new Map();
     // Collect body cells whose shadow DOM is not yet ready (newly created cells).
     const unreadyCells = [];
     pinnedColumnBodyCellRenderInputMap.forEach((renderInput, bodyCell) => {
@@ -3749,8 +3816,164 @@ class VegaTablePinnedRenderer extends globalSlimmerRegistry.VegaSlimmer {
     this.syncColspanForHiddenColumns(leafWidths, pinnedColumnBodyCellRenderInputMap);
     return unreadyCells;
   }
+  /**
+   * Resolve the DOM root that holds the table rows.
+   *
+   * In data-source mode rows are rendered into the table's shadow root; in template mode the
+   * authored rows are slotted, so they live in the host's light DOM.
+   *
+   * @returns {ShadowRoot | HTMLElement} The container to query rows from.
+   */
+  getRowContainerRoot() {
+    return this.isTemplateRenderMode ? this.host : this.host.shadowRoot;
+  }
+  /**
+   * Position authored template body and foot leaf cells by zipping them with the leaf render
+   * inputs in authored order, advancing by each cell's colSpan. Also applies the pinned-boundary
+   * divider classes (mirroring the body cell's render()), since authored body/foot cells have no
+   * render-input of their own in template mode.
+   *
+   * @param {number} prevShadowThWidth - Aggregate width of leading fixed columns (table left padding).
+   * @param {number[]} leafWidths - Rendered width of each leaf column, indexed by columnIndex.
+   * @param {number} nextShadowThWidth - Aggregate width of trailing fixed columns (table right padding).
+   */
+  updateTemplateLeafCellPinnedPosition(prevShadowThWidth, leafWidths, nextShadowThWidth, lastVisibleLeftPinnedBodyCells, firstVisibleRightPinnedBodyCells, lastVisibleRightPinnedBodyCells) {
+    const leafRenderInputs = this.vegaTableRenderInputController.getLeafRenderInputs();
+    // Off-screen / jsdom renders report every width as 0; skip colspan sync there so we don't
+    // collapse every span to 1 (mirrors the data-source syncColspanForHiddenColumns guard).
+    const allLeafWidthsHidden = leafWidths.every((w) => w === 0);
+    this.getRowContainerRoot()
+      .querySelectorAll('vega-table-row, vega-table-foot-row')
+      .forEach((row) => {
+      let leafIndex = 0;
+      Array.from(row.children).forEach((cell) => {
+        if (cell.tagName !== 'VEGA-TABLE-CELL' && cell.tagName !== 'VEGA-TABLE-FOOT-CELL')
+          return;
+        const leafCell = cell;
+        const renderInput = leafRenderInputs[leafIndex];
+        // Unlike data-source mode (resolveBodyColSpan), template mode positions the authored
+        // <td> as-is and intentionally does NOT clamp col-span at a pinned boundary: the
+        // consumer owns this literal DOM, so a col-span crossing pinned <-> unpinned is an
+        // invalid authoring choice (a cell cannot be both frozen and scrolling), not a case
+        // the component rewrites.
+        const colSpan = this.resolveCellColSpan(leafCell, renderInput);
+        if (renderInput) {
+          this.updateCellPinnedPosition(renderInput, leafCell, prevShadowThWidth, leafWidths, nextShadowThWidth);
+          this.applyTemplateLeafDividerClass(leafCell, leafRenderInputs.slice(leafIndex, leafIndex + colSpan));
+          this.syncTemplateLeafColspan(leafCell, renderInput, colSpan, leafWidths, allLeafWidthsHidden);
+          this.trackVisiblePinnedTemplateCell(row, leafCell, renderInput, lastVisibleLeftPinnedBodyCells, firstVisibleRightPinnedBodyCells, lastVisibleRightPinnedBodyCells);
+        }
+        leafIndex += colSpan;
+      });
+    });
+  }
+  /**
+   * Record an authored template leaf cell's shadow cell as the last visible left-pinned / first &
+   * last visible right-pinned cell of its row, so the shared dynamic-boundary logic can shift the
+   * boundary divider onto it when the static boundary column is breakpoint-hidden.
+   *
+   * @param {HTMLElement} row - The authored body or foot row (used as the per-row grouping key).
+   * @param {HTMLVegaTableCellElement} leafCell - Authored body or foot cell host.
+   * @param {ColumnRenderInputModel} renderInput - Render input of the cell's first leaf.
+   * @param {Map<HTMLElement, HTMLElement>} lastVisibleLeftPinnedBodyCells - Per-row last visible left-pinned shadow cell.
+   * @param {Map<HTMLElement, HTMLElement>} firstVisibleRightPinnedBodyCells - Per-row first visible right-pinned shadow cell.
+   * @param {Map<HTMLElement, HTMLElement>} lastVisibleRightPinnedBodyCells - Per-row last visible right-pinned shadow cell.
+   */
+  trackVisiblePinnedTemplateCell(row, leafCell, renderInput, lastVisibleLeftPinnedBodyCells, firstVisibleRightPinnedBodyCells, lastVisibleRightPinnedBodyCells) {
+    var _a;
+    const shadowCell = (_a = leafCell.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('th, td');
+    if (!shadowCell || shadowCell.getBoundingClientRect().width <= 0)
+      return;
+    if (renderInput.pinned === 'left') {
+      lastVisibleLeftPinnedBodyCells.set(row, shadowCell);
+    }
+    if (renderInput.pinned === 'right') {
+      if (!firstVisibleRightPinnedBodyCells.has(row)) {
+        firstVisibleRightPinnedBodyCells.set(row, shadowCell);
+      }
+      lastVisibleRightPinnedBodyCells.set(row, shadowCell);
+    }
+  }
+  /**
+   * Reduce an authored template pinned cell's shadow <td> colspan to the number of *visible*
+   * columns it spans. Breakpoint-hidden columns report width 0 but Chrome still counts them in the
+   * table grid, so without this a pinned span drifts out of column-alignment with the header
+   * (VD-9540). Only applies to pinned cells; skipped off-screen / in jsdom where every width is 0.
+   *
+   * @param {HTMLVegaTableCellElement} leafCell - Authored body or foot cell host.
+   * @param {ColumnRenderInputModel} renderInput - Render input of the cell's first leaf.
+   * @param {number} colSpan - The cell's originally declared colspan.
+   * @param {number[]} leafWidths - Rendered width of each leaf column, indexed by columnIndex.
+   * @param {boolean} allLeafWidthsHidden - True when every leaf width is 0 (off-screen / jsdom).
+   */
+  syncTemplateLeafColspan(leafCell, renderInput, colSpan, leafWidths, allLeafWidthsHidden) {
+    var _a;
+    if (colSpan <= 1 || allLeafWidthsHidden)
+      return;
+    if (!['left', 'right'].includes(renderInput.pinned))
+      return;
+    const shadowTd = (_a = leafCell.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('th, td');
+    if (!shadowTd)
+      return;
+    const visibleColspan = this.countVisibleColspan(leafWidths, renderInput.columnIndex, colSpan);
+    shadowTd.setAttribute('colspan', String(visibleColspan));
+    if (visibleColspan !== colSpan) {
+      this.templateColspanSyncedCells.add(leafCell);
+    }
+    else {
+      this.templateColspanSyncedCells.delete(leafCell);
+    }
+  }
+  /**
+   * Restore the authored colspan on every template cell whose shadow <td> was shrunk by
+   * {@link syncTemplateLeafColspan}. Runs on cleanup so removing `pinned` at runtime does not leave
+   * a body/foot cell stuck at the breakpoint-shrunk colspan once positioning no longer runs (VD-9768).
+   */
+  restoreTemplateLeafColspan() {
+    this.templateColspanSyncedCells.forEach((leafCell) => {
+      var _a, _b;
+      const shadowTd = (_a = leafCell.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('th, td');
+      if (!shadowTd)
+        return;
+      const authoredColSpan = (_b = leafCell.colSpan) !== null && _b !== void 0 ? _b : 1;
+      if (authoredColSpan > 1) {
+        shadowTd.setAttribute('colspan', String(authoredColSpan));
+      }
+      else {
+        shadowTd.removeAttribute('colspan');
+      }
+    });
+    this.templateColspanSyncedCells.clear();
+  }
+  /**
+   * Apply the pinned-boundary divider classes to an authored template body/foot cell's shadow
+   * cell, merging boundary flags across the leaves the cell spans. Tracked in the dynamic sets so
+   * the next positioning pass clears and re-evaluates them (matching the data-source cleanup path).
+   *
+   * @param {HTMLVegaTableCellElement} cell - Authored body or foot cell host.
+   * @param {ColumnRenderInputModel[]} spannedLeaves - Leaf render inputs the cell spans.
+   */
+  applyTemplateLeafDividerClass(cell, spannedLeaves) {
+    var _a;
+    const shadowCell = (_a = cell.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('th, td');
+    if (!shadowCell)
+      return;
+    const spans = (predicate) => spannedLeaves.some((leaf) => !!leaf && predicate(leaf));
+    if (spans((leaf) => leaf.isLeftEndPinned)) {
+      shadowCell.classList.add('right-divider');
+      this.dynamicRightDividerCells.add(shadowCell);
+    }
+    if (spans((leaf) => leaf.isRightStartPinned)) {
+      shadowCell.classList.add('left-divider');
+      this.dynamicLeftDividerCells.add(shadowCell);
+    }
+    if (spans((leaf) => leaf.isNoPinnedEnd || leaf.isViewEnd)) {
+      shadowCell.classList.add('hide-right-border');
+      this.dynamicHideRightBorderCells.add(shadowCell);
+    }
+  }
   getRowShadowThWidths() {
-    const row = this.host.shadowRoot.querySelector('vega-table-head-row');
+    const row = this.getRowContainerRoot().querySelector('vega-table-head-row');
     const rowShadow = row.shadowRoot;
     const firstTh = rowShadow.querySelector('th:first-of-type');
     const draggableTh = rowShadow.querySelector('.vega-table-draggable-column');
@@ -3804,13 +4027,32 @@ class VegaTablePinnedRenderer extends globalSlimmerRegistry.VegaSlimmer {
       /* istanbul ignore next -- shadowTd is always present in jsdom */
       if (!shadowTd)
         return;
-      // Count how many columns in the span are visible (width > 0) — hidden breakpoint
-      // columns have leafWidth === 0 because their <th> has display:none.
-      const spanned = leafWidths.slice(renderInput.columnIndex, renderInput.columnIndex + originalColspan);
-      const effectiveColspan = Math.max(1, spanned.filter((w) => w > 0).length);
-      shadowTd.setAttribute('colspan', String(effectiveColspan));
+      shadowTd.setAttribute('colspan', String(this.countVisibleColspan(leafWidths, renderInput.columnIndex, originalColspan)));
     });
   }
+  /**
+   * Count how many columns in a span are actually visible (leaf width > 0). Breakpoint-hidden
+   * columns report width 0 because their <th> is display:none; Chrome ignores that on the table
+   * grid, so a spanning cell's shadow <td> colspan must be reduced to the visible count to stay
+   * column-aligned (VD-9540). Shared by data-source and template positioning paths.
+   *
+   * @param {number[]} leafWidths - Rendered width of each leaf column, indexed by columnIndex.
+   * @param {number} startIndex - columnIndex of the first leaf the spanning cell covers.
+   * @param {number} declaredColspan - The cell's originally declared colspan.
+   * @returns {number} The number of visible columns in the span (>= 1).
+   */
+  countVisibleColspan(leafWidths, startIndex, declaredColspan) {
+    const spanned = leafWidths.slice(startIndex, startIndex + declaredColspan);
+    return Math.max(1, spanned.filter((w) => w > 0).length);
+  }
+  resolveCellColSpan(cell, renderInput) {
+    var _a;
+    // Group-column render inputs carry an explicit colSpan; flat/leaf and authored template
+    // cells fall back to the col-span prop on the cell. The authored value is honored verbatim
+    // (no pinned-boundary clamping) — see updateTemplateLeafCellPinnedPosition.
+    const colSpan = (_a = renderInput === null || renderInput === void 0 ? void 0 : renderInput.colSpan) !== null && _a !== void 0 ? _a : null;
+    return typeGuard.isNonNullable(colSpan) ? colSpan : cell.colSpan || 1;
+  }
   updateCellPinnedPosition(renderInput, headCell, prevShadowThWidth, leafWidths, nextShadowThWidth) {
     if (['left', 'right'].includes(renderInput.pinned)) {
       const shadowCell = headCell.shadowRoot.querySelector('th, td');
@@ -3827,9 +4069,7 @@ class VegaTablePinnedRenderer extends globalSlimmerRegistry.VegaSlimmer {
         // colspan (e.g. colSpan:2 spanning the last two right-pinned columns), we read the
         // actual span from the host component prop so the right-edge offset is calculated
         // over the full spanned width rather than just one column (VD-9565).
-        const colSpan = typeGuard.isNonNullable(renderInput.colSpan)
-          ? renderInput.colSpan
-          : headCell.colSpan || 1;
+        const colSpan = this.resolveCellColSpan(headCell, renderInput);
         const position = nextShadowThWidth +
           leafWidths
             .slice(renderInput.columnIndex + colSpan)
@@ -3842,12 +4082,12 @@ class VegaTablePinnedRenderer extends globalSlimmerRegistry.VegaSlimmer {
     const hasLeftPinnedColumn = this.columnStructureModel.hasLeftPinnedColumn();
     const hasRightPinnedColumn = this.columnStructureModel.hasRightPinnedColumn();
     const tableWidth = this.host.getBoundingClientRect().width;
-    const leftPadding = ui.extractNumberFromString(this.paddingX[0]);
-    const rightPadding = ui.extractNumberFromString(this.paddingX[1]);
+    const leftPadding = ui$1.extractNumberFromString(this.paddingX[0]);
+    const rightPadding = ui$1.extractNumberFromString(this.paddingX[1]);
     // table width - padding(8*2) - border(2);
     const expandContainerWidth = tableWidth - leftPadding - rightPadding - 2;
-    this.host.shadowRoot
-      .querySelectorAll('vega-table-head-row, vega-table-row, vega-table-expand-row')
+    this.getRowContainerRoot()
+      .querySelectorAll('vega-table-head-row, vega-table-row, vega-table-expand-row, vega-table-foot-row')
       .forEach((row) => {
       const rowShadow = row.shadowRoot;
       if (hasLeftPinnedColumn) {
@@ -3896,6 +4136,7 @@ class VegaTablePinnedRenderer extends globalSlimmerRegistry.VegaSlimmer {
     this.dynamicLeftDividerCells.clear();
     this.dynamicHideRightBorderCells.forEach((cell) => cell.classList.remove('hide-right-border'));
     this.dynamicHideRightBorderCells.clear();
+    this.restoreTemplateLeafColspan();
     this.previouslyStyledCells.clear();
   }
   updatePinnedPosition(cell, type, position) {
@@ -3907,32 +4148,35 @@ class VegaTablePinnedRenderer extends globalSlimmerRegistry.VegaSlimmer {
     this.previouslyStyledCells.add(cell);
   }
 }
-__decorate$C([
+__decorate$E([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTablePinnedRenderer.prototype, "host", void 0);
-__decorate$C([
+__decorate$E([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTablePinnedRenderer.prototype, "columnStructureModel", void 0);
-__decorate$C([
+__decorate$E([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTablePinnedRenderer.prototype, "paddingX", void 0);
-__decorate$C([
+__decorate$E([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTablePinnedRenderer.prototype, "isTemplateRenderMode", void 0);
+__decorate$E([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTablePinnedRenderer.prototype, "vegaTableRenderInputController", void 0);
-__decorate$C([
+__decorate$E([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTablePinnedRenderer.prototype, "pageResizeObserverSlimmer", void 0);
-__decorate$C([
+__decorate$E([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], VegaTablePinnedRenderer.prototype, "componentDidLoad", null);
-__decorate$C([
+__decorate$E([
   globalSlimmerRegistry.MapToComponentMethod('componentDidRender')
 ], VegaTablePinnedRenderer.prototype, "componentDidRender", null);
-__decorate$C([
+__decorate$E([
   globalSlimmerRegistry.MapToComponentMethod('watchColumnStructureModel')
 ], VegaTablePinnedRenderer.prototype, "watchColumnStructureModel", null);
 
-var __decorate$B = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$D = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -4429,17 +4673,17 @@ class DraggableElementSlimmer extends globalSlimmerRegistry.VegaSlimmer {
   }
 }
 DraggableElementSlimmer.DRAG_THRESHOLD = 4;
-__decorate$B([
+__decorate$D([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], DraggableElementSlimmer.prototype, "connectedCallback", null);
-__decorate$B([
+__decorate$D([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], DraggableElementSlimmer.prototype, "disconnectedCallback", null);
-__decorate$B([
+__decorate$D([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], DraggableElementSlimmer.prototype, "componentDidLoad", null);
 
-var __decorate$A = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$C = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -4529,46 +4773,479 @@ class VegaTableRowDraggableController extends globalSlimmerRegistry.VegaSlimmer
     }
   }
 }
-__decorate$A([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowDraggableController.prototype, "rowDraggable", void 0);
-__decorate$A([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowDraggableController.prototype, "host", void 0);
-__decorate$A([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowDraggableController.prototype, "vegaTableDataSourceController", void 0);
-__decorate$A([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowDraggableController.prototype, "isTemplateRenderMode", void 0);
-__decorate$A([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowDraggableController.prototype, "vegaTableBodyRenderer", void 0);
-__decorate$A([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowDraggableController.prototype, "vegaTableSortController", void 0);
-__decorate$A([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowDraggableController.prototype, "rowDragDropEventEmitter", void 0);
-__decorate$A([
+__decorate$C([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableRowDraggableController.prototype, "draggableElementSlimmer", void 0);
-__decorate$A([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaTableRowDraggableController.prototype, "connectedCallback", null);
-__decorate$A([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaTableRowDraggableController.prototype, "disconnectedCallback", null);
-__decorate$A([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], VegaTableRowDraggableController.prototype, "componentDidLoad", null);
-__decorate$A([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentMethod('watchRowDraggable')
 ], VegaTableRowDraggableController.prototype, "watchRowDraggable", null);
 
+var __decorate$B = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Derives column configuration from the authored `<vega-table-head>` markup.
+ *
+ * Currently produces grouped-column configuration; header-declared column concerns
+ * (e.g. pinning) are intended to live here as well.
+ */
+class VegaTableHeadTemplateStructureController extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.templateHeadObserver = new mutationObserverSlimmer.MutationObserverSlimmer({
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      target: () => this.host,
+      options: {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['group-key', 'parent-group-key', 'pinned', 'col-span'],
+      },
+      mutationFilter: mutationObserverFilters.TagNameAndAttributeMutationFilter('VEGA-TABLE-HEAD', 'VEGA-TABLE-HEAD-ROW', 'VEGA-TABLE-HEAD-CELL'),
+      callback: 
+      /* istanbul ignore next */
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      () => this.handleTemplateHeadStructureChange(),
+    });
+    // Head node the explicit observer is currently bound to, so it can be rebound when replaced.
+    this.observedTemplateHead = null;
+    this.lastTemplateHeadStructureSnapshot = null;
+  }
+  /**
+   * Refresh template grouping before the mutation observer resumes after reconnecting.
+   */
+  connectedCallback() {
+    this.setTemplateGroupColumns();
+    this.lastTemplateHeadStructureSnapshot = this.getTemplateHeadStructureSnapshot();
+    this.registerTemplateHeadStructureObserver();
+  }
+  /**
+   * Used by {@link templateHeadObserver} to stop observing while the table is disconnected.
+   */
+  disconnectedCallback() {
+    this.unRegisterTemplateHeadStructureObserver();
+  }
+  /**
+   * Initialize template grouping before the column structure is built.
+   */
+  componentWillLoad() {
+    this.setTemplateGroupColumns();
+    this.lastTemplateHeadStructureSnapshot = this.getTemplateHeadStructureSnapshot();
+  }
+  /**
+   * Used by {@link templateHeadObserver}.
+   */
+  componentDidLoad() {
+    this.registerTemplateHeadMaps();
+    // Runtime changes are notified by the render-input watcher; initial load has no
+    // following componentDidRender, so it needs one synchronous notification here.
+    changeManager.ChangeManager.notify(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalVegaTableRenderInputChange), {});
+  }
+  /**
+   * Rebuild template grouping when render mode changes.
+   */
+  watchTemplateRenderMode() {
+    this.setTemplateGroupColumns();
+    this.lastTemplateHeadStructureSnapshot = this.getTemplateHeadStructureSnapshot();
+  }
+  /**
+   * Update the internal template grouping configuration.
+   */
+  setTemplateGroupColumns() {
+    this.templateGroupColumns = this.getTemplateGroupColumns();
+  }
+  /**
+   * Recompute template grouping and row/cell render-input mappings after template head changes.
+   *
+   * Map registration is done here directly instead of via watchColumnStructureModel because
+   * this controller is registered before the render-input controller. If map registration
+   * were deferred to the columnStructureModel watcher, render inputs would still be stale
+   * (render-input controller's watcher hasn't fired yet due to slimmer registration order).
+   */
+  handleTemplateHeadStructureChange() {
+    const nextSnapshot = this.getTemplateHeadStructureSnapshot();
+    if (this.isSameTemplateHeadStructure(nextSnapshot, this.lastTemplateHeadStructureSnapshot))
+      return;
+    this.lastTemplateHeadStructureSnapshot = nextSnapshot;
+    this.setTemplateGroupColumns();
+    this.registerTemplateHeadStructureObserver();
+    this.registerTemplateHeadMaps();
+  }
+  /**
+   * Collect a normalized snapshot for template-head hierarchy keys.
+   *
+   * This lets us ignore duplicated observer notifications that represent the same logical
+   * structure (e.g. reflected-attribute path and explicit watcher path firing for one update).
+   *
+   * @returns {Nullable<TemplateHeadStructureCell[]>} Snapshot of current template head structure.
+   */
+  getTemplateHeadStructureSnapshot() {
+    if (!this.isTemplateRenderMode)
+      return null;
+    const templateHead = this.getTemplateHead();
+    if (!templateHead)
+      return null;
+    const rows = Array.from(templateHead.children).filter((child) => child.tagName === 'VEGA-TABLE-HEAD-ROW');
+    return rows.flatMap((row, rowIndex) => {
+      const cells = Array.from(row.children).filter((child) => child.tagName === 'VEGA-TABLE-HEAD-CELL');
+      return cells.map((cell, cellIndex) => ({
+        rowIndex,
+        cellIndex,
+        key: this.getCellProperty(cell, 'groupKey', 'group-key'),
+        parentKey: this.getCellProperty(cell, 'parentGroupKey', 'parent-group-key'),
+        pinned: this.getCellProperty(cell, 'pinned', 'pinned'),
+      }));
+    });
+  }
+  /**
+   * Compare two structure snapshots by authored order and key values.
+   *
+   * @param {Nullable<TemplateHeadStructureCell[]>} nextSnapshot - Latest snapshot.
+   * @param {Nullable<TemplateHeadStructureCell[]>} prevSnapshot - Previous snapshot.
+   * @returns {boolean} True when snapshots represent the same logical structure.
+   */
+  isSameTemplateHeadStructure(nextSnapshot, prevSnapshot) {
+    if (nextSnapshot === prevSnapshot)
+      return true;
+    if (!nextSnapshot || !prevSnapshot)
+      return false;
+    if (nextSnapshot.length !== prevSnapshot.length)
+      return false;
+    return nextSnapshot.every((nextCell, index) => {
+      const prevCell = prevSnapshot[index];
+      return (nextCell.rowIndex === prevCell.rowIndex &&
+        nextCell.cellIndex === prevCell.cellIndex &&
+        nextCell.key === prevCell.key &&
+        nextCell.parentKey === prevCell.parentKey &&
+        nextCell.pinned === prevCell.pinned);
+    });
+  }
+  /**
+   * Register explicit head-cell structure-change observer for property-assignment updates.
+   */
+  registerTemplateHeadStructureObserver() {
+    const templateHead = this.getTemplateHead();
+    if (!templateHead || templateHead === this.observedTemplateHead)
+      return;
+    // Rebind when the authored head node was replaced so property-update notifications from the
+    // new head's subject are still observed.
+    this.unRegisterTemplateHeadStructureObserver();
+    if (!this.templateHeadStructureObserver) {
+      this.templateHeadStructureObserver = new observer.Observer((input) => {
+        return Boolean(input && input.host);
+      }, () => this.handleTemplateHeadStructureChange());
+    }
+    changeManager.ChangeManager.register(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(templateHead, vegaInternalEventId.VegaInternalTableHeadTemplateStructureChange), this.templateHeadStructureObserver);
+    this.observedTemplateHead = templateHead;
+  }
+  /**
+   * Unregister explicit head-cell structure-change observer.
+   */
+  unRegisterTemplateHeadStructureObserver() {
+    const templateHead = this.observedTemplateHead;
+    if (!templateHead || !this.templateHeadStructureObserver)
+      return;
+    changeManager.ChangeManager.unregister(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(templateHead, vegaInternalEventId.VegaInternalTableHeadTemplateStructureChange), this.templateHeadStructureObserver);
+    this.observedTemplateHead = null;
+  }
+  /**
+   * Find authored template head element under table host.
+   *
+   * @typedef {import('../../../../types/components').HTMLVegaTableHeadElement} HTMLVegaTableHeadElement
+   * @returns {Nullable<HTMLVegaTableHeadElement>} Template head element if present.
+   */
+  getTemplateHead() {
+    return Array.from(this.host.children).find((child) => child.tagName === 'VEGA-TABLE-HEAD');
+  }
+  /**
+   * Register template head rows/cells with render-input maps using authored position.
+   *
+   * This mirrors data-source mode, where header renderer registers maps during JSX ref callbacks.
+   * Runtime changes are notified after the column model rebuilds, keeping maps ready without a
+   * second notification for the same template mutation.
+   */
+  registerTemplateHeadMaps() {
+    if (!this.isTemplateRenderMode)
+      return;
+    const templateHead = this.getTemplateHead();
+    if (!templateHead)
+      return;
+    // Clear all head mappings before rebuilding to prevent stale entries
+    // from persisting when template transitions from valid to invalid/unresolved.
+    this.vegaTableRenderInputController.clearHeadRenderInputMaps();
+    const renderInputs = this.vegaTableRenderInputController.getHeadRenderInputs() || [];
+    const renderInputByKey = new Map(renderInputs
+      .flatMap((model) => model.iterator())
+      .map((model) => [model.key, model]));
+    const templateRows = Array.from(templateHead.children).filter((child) => child.tagName === 'VEGA-TABLE-HEAD-ROW');
+    // Leaf render inputs in authored order, used to map headers without group keys by position.
+    const leafRenderInputs = this.vegaTableRenderInputController.getLeafRenderInputs() || [];
+    templateRows.forEach((templateRow) => {
+      const templateCells = Array.from(templateRow.children).filter((child) => child.tagName === 'VEGA-TABLE-HEAD-CELL');
+      // A header without group keys carries no grouping identity, so pinning is resolved by position:
+      // the authored cell index maps directly onto the leaf render input at the same index.
+      const rowHasKey = templateCells.some((templateCell) => Boolean(this.getCellProperty(templateCell, 'groupKey', 'group-key')));
+      const rowRenderInputs = templateCells.map((templateCell, cellIndex) => {
+        if (!rowHasKey)
+          return leafRenderInputs[cellIndex] || null;
+        const key = this.getCellProperty(templateCell, 'groupKey', 'group-key');
+        return renderInputByKey.get(key) || null;
+      });
+      // Register only when every authored cell has a matching render input.
+      // Partial mappings can corrupt row-level edge/span calculations.
+      if (rowRenderInputs.some((renderInput) => !renderInput))
+        return;
+      const resolvedRowRenderInputs = rowRenderInputs;
+      this.vegaTableRenderInputController.addHeadRowRenderInputMap(templateRow, resolvedRowRenderInputs);
+      templateCells.forEach((templateCell, cellIndex) => {
+        this.vegaTableRenderInputController.addHeadCellRenderInputMap(templateCell, resolvedRowRenderInputs[cellIndex]);
+      });
+    });
+  }
+  /**
+   * Convert a hand-authored template head into the public grouped-column model.
+   *
+   * Grouping needs authored keys: every cell must have a unique `groupKey`, and cells below the
+   * first row must declare `parentGroupKey` pointing to a cell in the immediately preceding row.
+   * Pinning, in contrast, is purely positional, so a header without group keys that only declares edge
+   * `pinned` is handled by {@link getFlatPinnedColumns} instead of being treated as unkeyed.
+   * Group labels are derived from cell text and default to an empty string because template
+   * markup remains responsible for the visible content.
+   *
+   * @returns {Nullable<VegaTableGroupColumnConfig[]>} Derived grouping configuration; null for a
+   * header without group keys with no edge pinning, or an empty array for malformed structured markup.
+   */
+  getTemplateGroupColumns() {
+    if (!this.isTemplateRenderMode)
+      return null;
+    const templateHead = this.getTemplateHead();
+    if (!templateHead)
+      return null;
+    const nodes = this.collectTemplateNodes(templateHead);
+    if (nodes.length === 0)
+      return null;
+    if (nodes.every((node) => !node.key))
+      return this.getFlatPinnedColumns(nodes);
+    if (nodes.some((node) => !node.key))
+      return [];
+    const nodesByKey = new Map(nodes.map((node) => [node.key, node]));
+    if (nodesByKey.size !== nodes.length)
+      return [];
+    if (!this.linkTemplateNodes(nodes, nodesByKey))
+      return [];
+    const topLevelNodes = nodes.filter((node) => node.rowIndex === 0);
+    this.dropNonEdgePinned(topLevelNodes);
+    return topLevelNodes.map((node) => this.toGroupColumnConfig(node));
+  }
+  /**
+   * Derive flat, position-keyed leaf columns for a header without group keys whose only column concern is
+   * edge pinning. Grouping requires authored keys, but pinning is positional, so a single-row
+   * header that declares `pinned` without any `group-key` still yields pinned leaf columns.
+   *
+   * Returns null when the header spans multiple rows (grouping cannot be inferred without keys) or
+   * declares no honorable edge pin, preserving the legacy behavior where a plain header without group keys
+   * derives no column model and simply renders its authored cells.
+   *
+   * @param {TemplateColumnNode[]} nodes - Template nodes in authored order (all row 0 when valid).
+   * @returns {Nullable<VegaTableGroupColumnConfig[]>} Position-keyed leaf configs, or null.
+   */
+  getFlatPinnedColumns(nodes) {
+    if (nodes.some((node) => node.rowIndex !== 0))
+      return null;
+    this.dropNonEdgePinned(nodes);
+    if (nodes.every((node) => !node.pinned))
+      return null;
+    // The authored index is the identity here; these keys are never used for head-cell lookup
+    // (registerTemplateHeadMaps maps headers without group keys by position, matching the positional body zip).
+    return nodes.map((node, index) => {
+      node.key = String(index);
+      return this.toGroupColumnConfig(node);
+    });
+  }
+  /**
+   * Drop `pinned` from top-level cells that are not at the physical edge.
+   *
+   * Data-source mode reorders columns to `[left, none, right]` via `orderChildrenByPinned`, so any
+   * pinned column ends up at an edge. Template mode renders authored cells in place and never
+   * reorders them, and sticky pinning only works when the pinned column already sits at the edge.
+   * So we honor `pinned` only for a contiguous leading run (left) and trailing run (right) of the
+   * authored top-level cells; a pinned cell anywhere in between would freeze mid-table and let the
+   * columns authored before it scroll underneath, so its pin is ignored.
+   *
+   * @param {TemplateColumnNode[]} topLevelNodes - Row-0 nodes in authored (physical) order.
+   */
+  dropNonEdgePinned(topLevelNodes) {
+    // End of the leading run of left-pinned cells (exclusive).
+    let leadingLeftEnd = 0;
+    while (leadingLeftEnd < topLevelNodes.length && topLevelNodes[leadingLeftEnd].pinned === 'left') {
+      leadingLeftEnd++;
+    }
+    // Start of the trailing run of right-pinned cells (exclusive lower bound).
+    let trailingRightStart = topLevelNodes.length - 1;
+    while (trailingRightStart >= 0 && topLevelNodes[trailingRightStart].pinned === 'right') {
+      trailingRightStart--;
+    }
+    topLevelNodes.forEach((node, index) => {
+      const isEdgeLeft = node.pinned === 'left' && index < leadingLeftEnd;
+      const isEdgeRight = node.pinned === 'right' && index > trailingRightStart;
+      if (!isEdgeLeft && !isEdgeRight)
+        node.pinned = undefined;
+    });
+  }
+  /**
+   * Flatten the authored template head rows into row-major template nodes.
+   *
+   * @param {HTMLElement} templateHead - Authored `<vega-table-head>` element.
+   * @returns {TemplateColumnNode[]} Template nodes in authored order.
+   */
+  collectTemplateNodes(templateHead) {
+    const rows = Array.from(templateHead.children).filter((child) => child.tagName === 'VEGA-TABLE-HEAD-ROW');
+    return rows.flatMap((row, rowIndex) => Array.from(row.children)
+      .filter((child) => child.tagName === 'VEGA-TABLE-HEAD-CELL')
+      .map((cell, cellIndex) => ({
+      cell,
+      key: this.getCellProperty(cell, 'groupKey', 'group-key'),
+      rowIndex,
+      cellIndex,
+      children: [],
+      pinned: this.getCellProperty(cell, 'pinned', 'pinned'),
+    })));
+  }
+  /**
+   * Validate parent references and link each node to its parent in place.
+   *
+   * Children must reference a cell in the immediately preceding row, be grouped by parent, and
+   * list parents left-to-right; first-row cells must not declare a parent.
+   *
+   * @param {TemplateColumnNode[]} nodes - Template nodes in authored order.
+   * @param {Map<string, TemplateColumnNode>} nodesByKey - Node lookup by group key.
+   * @returns {boolean} True when the hierarchy is well-formed.
+   */
+  linkTemplateNodes(nodes, nodesByKey) {
+    var _a;
+    const lastParentIndexByRow = new Map();
+    for (const node of nodes) {
+      const parentKey = this.getCellProperty(node.cell, 'parentGroupKey', 'parent-group-key');
+      if (node.rowIndex === 0) {
+        if (parentKey)
+          return false;
+        continue;
+      }
+      const parent = nodesByKey.get(parentKey);
+      if (!parent || parent.rowIndex !== node.rowIndex - 1)
+        return false;
+      // Children must be listed grouped by parent and parents left-to-right, so a parent's
+      // cell index can never move backwards within a row. This single check rejects both
+      // non-contiguous children and out-of-order parent groups.
+      if (parent.cellIndex < ((_a = lastParentIndexByRow.get(node.rowIndex)) !== null && _a !== void 0 ? _a : -1))
+        return false;
+      lastParentIndexByRow.set(node.rowIndex, parent.cellIndex);
+      parent.children.push(node);
+    }
+    return true;
+  }
+  /**
+   * Convert a template node tree into a grouped-column configuration.
+   *
+   * @param {TemplateColumnNode} node - Template node to convert.
+   * @returns {VegaTableGroupColumnConfig} Group or leaf configuration.
+   */
+  toGroupColumnConfig(node) {
+    // A childless top-level node carries its pinning through the group-model `pinned` field
+    // (which applies to top-level nodes), so `VegaTableColumnGroupingLeafModel` stays a plain
+    // `{ key }` reference and does not need a variant-only pinned property.
+    if (node.children.length === 0) {
+      return node.pinned
+        ? { key: node.key, label: (node.cell.textContent || '').trim(), pinned: node.pinned }
+        : { key: node.key };
+    }
+    return Object.assign(Object.assign({ key: node.key, label: (node.cell.textContent || '').trim() }, (node.pinned ? { pinned: node.pinned } : {})), { children: node.children.map((child) => this.toGroupColumnConfig(child)) });
+  }
+  /**
+   * Read a reflected template-cell property with an attribute fallback.
+   *
+   * The `pinned` variant returns only valid pinning values; invalid values return undefined.
+   *
+   * @param {HTMLElement} cell - Template head cell.
+   * @param {'groupKey' | 'parentGroupKey' | 'pinned'} property - Component property name.
+   * @param {'group-key' | 'parent-group-key' | 'pinned'} attribute - Reflected attribute name.
+   * @returns {string | undefined} Normalized property value.
+   */
+  getCellProperty(cell, property, attribute) {
+    const value = (cell[property] || cell.getAttribute(attribute) || '').trim();
+    if (property === 'pinned') {
+      return value === 'left' || value === 'right' ? value : undefined;
+    }
+    return value;
+  }
+}
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableHeadTemplateStructureController.prototype, "host", void 0);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableHeadTemplateStructureController.prototype, "isTemplateRenderMode", void 0);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaTableHeadTemplateStructureController.prototype, "templateGroupColumns", void 0);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableHeadTemplateStructureController.prototype, "vegaTableRenderInputController", void 0);
+__decorate$B([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaTableHeadTemplateStructureController.prototype, "templateHeadObserver", void 0);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
+], VegaTableHeadTemplateStructureController.prototype, "connectedCallback", null);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], VegaTableHeadTemplateStructureController.prototype, "disconnectedCallback", null);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
+], VegaTableHeadTemplateStructureController.prototype, "componentWillLoad", null);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
+], VegaTableHeadTemplateStructureController.prototype, "componentDidLoad", null);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentMethod('watchTemplateRenderMode')
+], VegaTableHeadTemplateStructureController.prototype, "watchTemplateRenderMode", null);
+
 const vegaTableCss = ":host{display:block}table{width:100%;border-spacing:0}.vega-table-empty-description{text-align:center;padding:24px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-table-empty-description{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-table-empty-description{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-table-empty-description{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}table.v-table-fixed{table-layout:fixed}.vega-table-scrollable-container{overflow:auto}.vega-table-scrollable-container vega-table-head{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.vega-table-scrollable-container.scrolled vega-table-head.fixed-header,.vega-table-scrollable-container.scrolled ::slotted(vega-table-head.fixed-header){box-shadow:0px 4px 0px rgba(0, 0, 0, 0.1);}.vega-table-scrollable-container.scrolled vega-table-foot.fixed-footer::after,.vega-table-scrollable-container.scrolled ::slotted(vega-table-foot.fixed-footer)::after{content:\"\";position:absolute;top:0;left:0;width:100%;height:1px;background-color:rgba(var(--v-bg-divider, 171, 198, 216, 1))}vega-form{display:contents}table:not(.show-edit-error) *::part(field-error-message){display:none !important}.vega-table-pagination-container{margin-top:24px}.vega-table-pagination-container.bottom-center{display:flex;justify-content:center}.vega-table-pagination-container.bottom-right{display:flex;justify-content:flex-end}.vega-table-pagination-container.bottom-left{display:flex;justify-content:flex-start}col.v-hidden{display:none;visibility:collapse}@media (min-width: 320px){col.S\\:v-table-column{display:table-column;visibility:visible}}@media (min-width: 768px){col.M\\:v-table-column{display:table-column;visibility:visible}}@media (min-width: 1024px){col.L\\:v-table-column{display:table-column;visibility:visible}}@media (min-width: 1440px){col.XL\\:v-table-column{display:table-column;visibility:visible}}:host(.is-group-table) .vega-table-scrollable-container{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-width:1px;border-style:solid}:host(.is-group-table.density-relaxed) .vega-table-scrollable-container{border-radius:12px}:host(.is-group-table.density-default) .vega-table-scrollable-container{border-radius:12px}:host(.is-group-table.density-compact) .vega-table-scrollable-container{border-radius:4px}:host(.is-pinned-table) table{min-width:max-content}.draggable-col{min-width:16px;width:16px}";
 
-var __decorate$z = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$A = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -4600,6 +5277,7 @@ const VegaTable = class {
     this.globalSlimmers = {};
     this.translationSlimmer = new translationSlimmer.TranslationSlimmer();
     this.vegaTableRenderModeController = new VegaTableRenderModeController();
+    this.vegaTableHeadTemplateStructureController = new VegaTableHeadTemplateStructureController();
     this.vegaTableColumnStructureModelController = new VegaTableColumnStructureModelController();
     this.vegaTableRenderInputController = new VegaTableRenderInputController();
     this.vegaTablePinnedRenderer = new VegaTablePinnedRenderer();
@@ -4674,6 +5352,7 @@ const VegaTable = class {
       this.editingRows = newSet;
     });
     this.isSelectedAll = false;
+    this.templateGroupColumns = null;
     this.expandableRows = [];
     this.hasExpandableRow = false;
     /**
@@ -4811,6 +5490,8 @@ const VegaTable = class {
   }
   watchTemplateRenderMode() {
   }
+  watchTemplateGroupColumns() {
+  }
   watchColumnStructureModel() {
   }
   watchExpandableRows() {
@@ -5053,6 +5734,7 @@ const VegaTable = class {
     "currentPage": ["watchCurrentPage"],
     "isSelectedAll": ["watchSelectedAll"],
     "isTemplateRenderMode": ["watchTemplateRenderMode"],
+    "templateGroupColumns": ["watchTemplateGroupColumns"],
     "columnStructureModel": ["watchColumnStructureModel"],
     "expandableRows": ["watchExpandableRows"],
     "hasExpandableRow": ["watchHasExpandableRow"],
@@ -5072,149 +5754,152 @@ const VegaTable = class {
     "scrollConfig": ["watchScrollConfig"]
   }; }
 };
-__decorate$z([
+__decorate$A([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
 ], VegaTable.prototype, "globalSlimmers", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "translationSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableRenderModeController", void 0);
-__decorate$z([
+__decorate$A([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableHeadTemplateStructureController", void 0);
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableColumnStructureModelController", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableRenderInputController", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTablePinnedRenderer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableRenderer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableHeaderRenderer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableBodyRenderer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableRowRenderer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableCellRenderer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableBodyColSpanController", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTablePaginationRenderer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableScrollContainerRenderer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableRowSelectionController", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableDataSourceController", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTablePaginationController", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableEditableController", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableSortController", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableColGroupRenderer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableChildrenController", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableRowDraggableController", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableExpandRowController", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "pageResizeObserverSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "rowSelectionNotifySlimmer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "expandableRowsNotifySlimmer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "hasExpandableRowNotifySlimmer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "paddingXNotifySlimmer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "rowClickableNotifySlimmer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "scrollConfigNotifySlimmer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "eventsPrevent", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "changeEventEmitter", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "selectChangeEventEmitter", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "selectAllChangeEventEmitter", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "rowClickEventEmitter", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "rowExpandEventEmitter", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "rowDragDropEventEmitter", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "rowDividerNotifySlimmer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "columnDividerNotifySlimmer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "densityNotifySlimmer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "isTemplateRenderModeNotifySlimmer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "currentDataNotifySlimmer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "rowDraggableNotifySlimmer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "rowSelectEventEmitter", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "rowSelectAllEventEmitter", void 0);
 VegaTable.style = vegaTableCss;
 
 const vegaTableBodyCss = ":host{display:contents}";
 
-var __decorate$y = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$z = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -5236,13 +5921,13 @@ const VegaTableBody = class {
   }
   get host() { return index.getElement(this); }
 };
-__decorate$y([
+__decorate$z([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
 ], VegaTableBody.prototype, "globalSlimmers", void 0);
-__decorate$y([
+__decorate$z([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableBody.prototype, "childChangeEventPrevent", void 0);
-__decorate$y([
+__decorate$z([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableBody.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
 VegaTableBody.style = vegaTableBodyCss;
@@ -5292,7 +5977,7 @@ const generateColSpan = (columnLength, withMultipleSelection, withRowDraggable)
   return columnLength + (withMultipleSelection ? 2 : 1) + (withRowDraggable ? 1 : 0);
 };
 
-var __decorate$x = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$y = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -5331,20 +6016,20 @@ class VegaTableCellStateController extends subStateObserverSlimmer.SubStateObser
     });
   }
 }
-__decorate$x([
+__decorate$y([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableCellStateController.prototype, "host", void 0);
-__decorate$x([
+__decorate$y([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableCellStateController.prototype, "density", void 0);
-__decorate$x([
+__decorate$y([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableCellStateController.prototype, "columnDivider", void 0);
-__decorate$x([
+__decorate$y([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableCellStateController.prototype, "clickable", void 0);
 
-var __decorate$w = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$x = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -5379,20 +6064,20 @@ class VegaTableRowStateSubscriber extends subStateObserverSlimmer.SubStateObserv
     });
   }
 }
-__decorate$w([
+__decorate$x([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableRowStateSubscriber.prototype, "checked", void 0);
-__decorate$w([
+__decorate$x([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableRowStateSubscriber.prototype, "expanded", void 0);
-__decorate$w([
+__decorate$x([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableRowStateSubscriber.prototype, "striped", void 0);
-__decorate$w([
+__decorate$x([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableRowStateSubscriber.prototype, "rowDivider", void 0);
 
-var __decorate$v = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$w = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -5424,7 +6109,7 @@ class VegaTableChildRenderInputConsumerSlimmer extends globalSlimmerRegistry.Veg
    * Register render-input change observer when the component connects.
    */
   connectRenderInputObserver() {
-    this.table = ui.findParent(this.host, 'vega-table');
+    this.table = ui$1.findParent(this.host, 'vega-table');
     if (!this.table)
       return;
     this.registerRenderInputChangeObserver();
@@ -5466,25 +6151,25 @@ class VegaTableChildRenderInputConsumerSlimmer extends globalSlimmerRegistry.Veg
     changeManager.ChangeManager.unregister(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.table, vegaInternalEventId.VegaInternalVegaTableRenderInputChange), this.observer);
   }
 }
-__decorate$v([
+__decorate$w([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableChildRenderInputConsumerSlimmer.prototype, "host", void 0);
-__decorate$v([
+__decorate$w([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableChildRenderInputConsumerSlimmer.prototype, "renderInput", void 0);
-__decorate$v([
+__decorate$w([
   globalSlimmerRegistry.MapToComponentMethod('componentWillRender')
 ], VegaTableChildRenderInputConsumerSlimmer.prototype, "componentWillRenderInput", null);
-__decorate$v([
+__decorate$w([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaTableChildRenderInputConsumerSlimmer.prototype, "connectRenderInputObserver", null);
-__decorate$v([
+__decorate$w([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaTableChildRenderInputConsumerSlimmer.prototype, "disconnectRenderInputObserver", null);
 
 const vegaTableCellCss = ":host .vega-table-cell.v-hidden{display:none}@media (min-width: 320px){:host .vega-table-cell.S\\:v-table-cell{display:table-cell}}@media (min-width: 768px){:host .vega-table-cell.M\\:v-table-cell{display:table-cell}}@media (min-width: 1024px){:host .vega-table-cell.L\\:v-table-cell{display:table-cell}}@media (min-width: 1440px){:host .vega-table-cell.XL\\:v-table-cell{display:table-cell}}:host{display:contents}.vega-table-cell{padding:12px;box-sizing:border-box;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;overflow-wrap:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-table-cell{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-table-cell{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-table-cell{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}.vega-table-cell.break-word{word-break:break-word}td{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));color:rgba(var(--v-text-primary, 32, 54, 69, 1));text-align:left;padding:0px;vertical-align:middle}td.v-text-center{text-align:center}td.v-text-left{text-align:left}td.v-text-right{text-align:right}:host(.density-default) .vega-table-cell{padding:12px}:host(.density-compact) .vega-table-cell{padding:4px}:host(.density-relaxed) .vega-table-cell{padding:16px}.vega-table-cell-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all}.vega-table-cell-scroll{overflow:auto}:host(.column-divider) .vega-table-cell{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-right-width:1px;border-right-style:solid}:host(.row-divider) .vega-table-cell{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-bottom-width:1px;border-bottom-style:solid}:host(.striped) .vega-table-cell{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}:host(.clickable.hovered:not(.checked)) .vega-table-cell{cursor:pointer;background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1))}:host(.checked) .vega-table-cell{background-color:rgba(var(--v-bg-table-selected-row, 204, 223, 255, 1))}:host(.expanded) .vega-table-cell{border-top-width:1px;border-left-width:0px;border-right-width:0px;border-bottom-width:0px;border-style:solid;border-color:rgba(var(--v-border-color-input-field, 171, 198, 216, 1))}:host .vega-table-cell.right-divider{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-right-width:2px;border-right-style:solid}:host .vega-table-cell.left-divider{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-left-width:2px;border-left-style:solid}:host .vega-table-cell.hide-right-border{border-right-width:0px}";
 
-var __decorate$u = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$v = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -5544,7 +6229,7 @@ const VegaTableCell = class {
     if (((_c = this.renderInput) === null || _c === void 0 ? void 0 : _c.isNoPinnedEnd) || ((_d = this.renderInput) === null || _d === void 0 ? void 0 : _d.isViewEnd)) {
       columnClasses.push('hide-right-border');
     }
-    return component.sanitizeVegaComponent(index.h(index.Host, { class: ui.arrayToClassString([
+    return component.sanitizeVegaComponent(index.h(index.Host, { class: ui$1.arrayToClassString([
         `density-${responsiveFormatFacade.ResponsiveFormatFacade.formatCustom(this.density)}`,
         this.rowDivider && 'row-divider',
         this.columnDivider && 'column-divider',
@@ -5552,7 +6237,7 @@ const VegaTableCell = class {
         this.checked && 'checked',
         this.striped && 'striped',
         this.expanded && 'expanded',
-      ]), "aria-colspan": ((_e = this.colSpan) !== null && _e !== void 0 ? _e : 0) > 1 ? String(this.colSpan) : null }, index.h("td", { class: ui.arrayToClassString(columnClasses), part: "cell", colSpan: ((_f = this.colSpan) !== null && _f !== void 0 ? _f : 0) > 1 ? this.colSpan : null,
+      ]), "aria-colspan": ((_e = this.colSpan) !== null && _e !== void 0 ? _e : 0) > 1 ? String(this.colSpan) : null }, index.h("td", { class: ui$1.arrayToClassString(columnClasses), part: "cell", colSpan: ((_f = this.colSpan) !== null && _f !== void 0 ? _f : 0) > 1 ? this.colSpan : null,
       /* eslint-disable-next-line react/jsx-no-bind */
       onMouseEnter: this.onMouseEnter.bind(this),
       /* eslint-disable-next-line react/jsx-no-bind */
@@ -5613,27 +6298,27 @@ const VegaTableCell = class {
   }
   get host() { return index.getElement(this); }
 };
-__decorate$u([
+__decorate$v([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
 ], VegaTableCell.prototype, "globalSlimmers", void 0);
-__decorate$u([
+__decorate$v([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableCell.prototype, "vegaTableCellStateController", void 0);
-__decorate$u([
+__decorate$v([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableCell.prototype, "vegaTableRowStateSubscriber", void 0);
-__decorate$u([
+__decorate$v([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableCell.prototype, "pageResizeObserverSlimmer", void 0);
-__decorate$u([
+__decorate$v([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableCell.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
-__decorate$u([
+__decorate$v([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableCell.prototype, "vegaTableRenderInputConsumerSlimmer", void 0);
 VegaTableCell.style = vegaTableCellCss;
 
-var __decorate$t = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$u = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -5654,26 +6339,26 @@ class VegaTableExpandRowRenderer extends globalSlimmerRegistry.VegaSlimmer {
       index.h("td", null)));
   }
 }
-__decorate$t([
+__decorate$u([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowRenderer.prototype, "host", void 0);
-__decorate$t([
+__decorate$u([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowRenderer.prototype, "rowKey", void 0);
-__decorate$t([
+__decorate$u([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowRenderer.prototype, "expanded", void 0);
-__decorate$t([
+__decorate$u([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowRenderer.prototype, "checked", void 0);
-__decorate$t([
+__decorate$u([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowRenderer.prototype, "colSpan", void 0);
-__decorate$t([
+__decorate$u([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowRenderer.prototype, "striped", void 0);
 
-var __decorate$s = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$t = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -5709,26 +6394,26 @@ class VegaTableExpandRowExpandController extends globalSlimmerRegistry.VegaSlimm
   isAcceptableTableExpandRowObserver(input) {
     if (input['host']['tagName'] === 'VEGA-TABLE') {
       return (input['host']['tagName'] === 'VEGA-TABLE' &&
-        input['host'] === ui.findParent(this.host, 'vega-table'));
+        input['host'] === ui$1.findParent(this.host, 'vega-table'));
     }
     if (input['host']['tagName'] === 'VEGA-TABLE-ROW') {
-      return ui.findParent(this.host, 'vega-table') === ui.findParent(input['host'], 'vega-table');
+      return ui$1.findParent(this.host, 'vega-table') === ui$1.findParent(input['host'], 'vega-table');
     }
   }
 }
-__decorate$s([
+__decorate$t([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowExpandController.prototype, "host", void 0);
-__decorate$s([
+__decorate$t([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowExpandController.prototype, "rowKey", void 0);
-__decorate$s([
+__decorate$t([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableExpandRowExpandController.prototype, "expanded", void 0);
-__decorate$s([
+__decorate$t([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaTableExpandRowExpandController.prototype, "connectedCallback", null);
-__decorate$s([
+__decorate$t([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaTableExpandRowExpandController.prototype, "disconnectedCallback", null);
 
@@ -5740,7 +6425,7 @@ __decorate$s([
  */
 function isAcceptableTableRowObserver(input) {
   return (input['host']['tagName'] === 'VEGA-TABLE-ROW' &&
-    ui.findParent(this.host, 'vega-table') === ui.findParent(input['host'], 'vega-table'));
+    ui$1.findParent(this.host, 'vega-table') === ui$1.findParent(input['host'], 'vega-table'));
 }
 /**
  * The function checks if the input is an acceptable table observer by verifying if it has a host with a tagName of 'VEGA-TABLE' and if the host is the parent of the current host.
@@ -5749,10 +6434,10 @@ function isAcceptableTableRowObserver(input) {
  * @returns {boolean} a boolean value indicating whether the input is an acceptable table observer.
  */
 function isAcceptableTableObserver(input) {
-  return input['host']['tagName'] === 'VEGA-TABLE' && input['host'] === ui.findParent(this.host, 'vega-table');
+  return input['host']['tagName'] === 'VEGA-TABLE' && input['host'] === ui$1.findParent(this.host, 'vega-table');
 }
 
-var __decorate$r = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$s = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -5780,23 +6465,23 @@ class VegaTableExpandRowSelectionController extends globalSlimmerRegistry.VegaSl
     changeManager.ChangeManager.unregister(staticSubjectTitle.TABLE_ROW_SELECTION, this.rowSelectionObserver);
   }
 }
-__decorate$r([
+__decorate$s([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableExpandRowSelectionController.prototype, "checked", void 0);
-__decorate$r([
+__decorate$s([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowSelectionController.prototype, "host", void 0);
-__decorate$r([
+__decorate$s([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowSelectionController.prototype, "rowKey", void 0);
-__decorate$r([
+__decorate$s([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaTableExpandRowSelectionController.prototype, "connectedCallback", null);
-__decorate$r([
+__decorate$s([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaTableExpandRowSelectionController.prototype, "disconnectedCallback", null);
 
-var __decorate$q = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$r = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -5833,20 +6518,20 @@ class VegaTableExpandRowStateController extends subStateObserverSlimmer.SubState
     });
   }
 }
-__decorate$q([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowStateController.prototype, "host", void 0);
-__decorate$q([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableExpandRowStateController.prototype, "withMultipleSelection", void 0);
-__decorate$q([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableExpandRowStateController.prototype, "withRowDraggable", void 0);
-__decorate$q([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowStateController.prototype, "vegaTableExpandRowColSpanController", void 0);
 
-var __decorate$p = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$q = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -5901,7 +6586,7 @@ class VegaTableExpandRowColSpanController extends globalSlimmerRegistry.VegaSlim
    * @returns {number} The visible columns number
    */
   getVisibleColumnsNumber() {
-    const table = ui.findParent(this.host, 'vega-table');
+    const table = ui$1.findParent(this.host, 'vega-table');
     const currentBreakpoint = breakpoints.getCurrentBreakpoint();
     const isTemplateRenderMode = table.children &&
       Array.from(table.children).filter((item) => { var _a; return !((_a = item.getAttribute('slot')) === null || _a === void 0 ? void 0 : _a.startsWith('vega-table-expand-row-')); }).length > 0;
@@ -5926,34 +6611,34 @@ class VegaTableExpandRowColSpanController extends globalSlimmerRegistry.VegaSlim
     }, 0);
   }
 }
-__decorate$p([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowColSpanController.prototype, "host", void 0);
-__decorate$p([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableExpandRowColSpanController.prototype, "colSpan", void 0);
-__decorate$p([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowColSpanController.prototype, "withMultipleSelection", void 0);
-__decorate$p([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowColSpanController.prototype, "withRowDraggable", void 0);
-__decorate$p([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaTableExpandRowColSpanController.prototype, "componentWillLoad", null);
-__decorate$p([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentMethod('watchCurrentBreakpoint')
 ], VegaTableExpandRowColSpanController.prototype, "watchCurrentBreakpoint", null);
-__decorate$p([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentMethod('watchWithMultipleSelection')
 ], VegaTableExpandRowColSpanController.prototype, "watchWithMultipleSelection", null);
-__decorate$p([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentMethod('watchWithRowDraggable')
 ], VegaTableExpandRowColSpanController.prototype, "watchWithRowDraggable", null);
 
 const vegaTableExpandRowCss = ":host{display:contents}:host .vega-table-expanded-row.striped:not(.checked) td{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}:host(.v-hidden){display:none}.vega-table-expanded-row{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1))}.vega-table-expanded-row:not(.expanded){display:none}.vega-table-expanded-row.expanded td{border-bottom-width:1px;border-top-width:0px;border-right-width:0px;border-left-width:0px;border-style:solid;border-color:rgba(var(--v-border-color-input-field, 171, 198, 216, 1));padding:0px;vertical-align:middle}.vega-table-expanded-row.expanded td:first-of-type{border-left-width:1px;border-bottom-width:1px;border-top-left-radius:12px;border-bottom-left-radius:12px;border-top-left-radius:0px}.vega-table-expanded-row.expanded td:last-of-type{border-right-width:1px;border-bottom-width:1px;border-top-right-radius:12px;border-bottom-right-radius:12px;border-top-right-radius:0px}.vega-table-expanded-row.expanded td.vega-table-expanded-row-slot-container{border-top-width:1px;border-style:solid;border-color:rgba(var(--v-border-color-input-field, 171, 198, 216, 1))}.vega-table-expanded-row.expanded.checked{background-color:rgba(var(--v-bg-table-row-selected-expanded, 229, 239, 255, 1))}:host tr.is-pinned-row td:first-of-type{position:sticky;z-index:1;left:0px}:host tr.is-pinned-row td.vega-table-expanded-row-slot-container div{position:sticky;z-index:1;left:8px}";
 
-var __decorate$o = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$p = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -6006,33 +6691,33 @@ const VegaTableExpandRow = class {
     "withRowDraggable": ["watchWithRowDraggable"]
   }; }
 };
-__decorate$o([
+__decorate$p([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
 ], VegaTableExpandRow.prototype, "globalSlimmers", void 0);
-__decorate$o([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "vegaTableExpandRowRenderer", void 0);
-__decorate$o([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "vegaTableExpandRowExpandController", void 0);
-__decorate$o([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "vegaTableExpandRowSelectionController", void 0);
-__decorate$o([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "vegaTableExpandRowStateController", void 0);
-__decorate$o([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "vegaTableExpandRowColSpanController", void 0);
-__decorate$o([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "pageResizeObserverSlimmer", void 0);
-__decorate$o([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
 VegaTableExpandRow.style = vegaTableExpandRowCss;
 
-var __decorate$n = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$o = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -6084,22 +6769,22 @@ class VegaTableFootStateController extends subStateObserverSlimmer.SubStateObser
     this.tableFootRef = ref;
   }
 }
-__decorate$n([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableFootStateController.prototype, "host", void 0);
-__decorate$n([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableFootStateController.prototype, "fixed", void 0);
-__decorate$n([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableFootStateController.prototype, "rowDivider", void 0);
-__decorate$n([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaTableFootStateController.prototype, "handleDisconnectedCallback", null);
 
-const vegaTableFootCss = ":host{display:table-footer-group;position:sticky;border-top-right-radius:12px;border-bottom-right-radius:12px;border-top-left-radius:12px;border-bottom-left-radius:12px}:host tfoot{display:contents}:host(.fixed-footer){bottom:0px}:host(.row-divider)::after{content:\"\";position:absolute;top:0;left:0;width:100%;height:1px;background-color:rgba(var(--v-bg-divider, 171, 198, 216, 1))}:host(.v-hidden){display:none}";
+const vegaTableFootCss = ":host{display:table-footer-group;position:sticky;border-top-right-radius:12px;border-bottom-right-radius:12px;border-top-left-radius:12px;border-bottom-left-radius:12px}:host tfoot{display:contents}:host(.fixed-footer){bottom:0px}:host(.row-divider)::after{content:\"\";position:absolute;top:0;left:0;width:100%;height:1px;z-index:2;background-color:rgba(var(--v-bg-divider, 171, 198, 216, 1))}:host(.v-hidden){display:none}";
 
-var __decorate$m = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$n = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -6133,21 +6818,21 @@ const VegaTableFoot = class {
   }
   get host() { return index.getElement(this); }
 };
-__decorate$m([
+__decorate$n([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
 ], VegaTableFoot.prototype, "globalSlimmers", void 0);
-__decorate$m([
+__decorate$n([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableFoot.prototype, "vegaTableFootStateController", void 0);
-__decorate$m([
+__decorate$n([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableFoot.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
-__decorate$m([
+__decorate$n([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableFoot.prototype, "childChangeEventPrevent", void 0);
 VegaTableFoot.style = vegaTableFootCss;
 
-var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$m = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -6182,14 +6867,14 @@ class VegaTableFootCellStateController extends subStateObserverSlimmer.SubStateO
     });
   }
 }
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableFootCellStateController.prototype, "density", void 0);
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableFootCellStateController.prototype, "columnDivider", void 0);
 
-var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -6202,28 +6887,31 @@ class VegaTableFootCellRenderer extends globalSlimmerRegistry.VegaSlimmer {
         'vega-table-cell': true,
         'break-word': !featureFlagController.FeatureFlag.isEnabled('VEGA_TABLE.ENABLE_NEW_CELL_BREAK_WORDS_STYLE'),
         [generateResponsiveClass(this.breakpoint, 'v-table-cell')]: true,
-      }, colSpan: ((_a = this.colSpan) !== null && _a !== void 0 ? _a : 0) > 1 ? this.colSpan : null },
-      index.h("div", { class: ui.arrayToClassString(['vega-table-column', this.textAlign]) },
+      }, colSpan: ((_a = this.colSpan) !== null && _a !== void 0 ? _a : 0) > 1 ? this.colSpan : null, style: { width: this.width } },
+      index.h("div", { class: ui$1.arrayToClassString(['vega-table-column', this.textAlign]) },
         index.h("span", { class: "vega-table-column-label" },
           index.h("slot", null)))));
   }
 }
-__decorate$k([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableFootCellRenderer.prototype, "host", void 0);
-__decorate$k([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableFootCellRenderer.prototype, "breakpoint", void 0);
-__decorate$k([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableFootCellRenderer.prototype, "textAlign", void 0);
-__decorate$k([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableFootCellRenderer.prototype, "colSpan", void 0);
+__decorate$l([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableFootCellRenderer.prototype, "width", void 0);
 
-const vegaTableFootCellCss = ":host .vega-table-cell.v-hidden{display:none}@media (min-width: 320px){:host .vega-table-cell.S\\:v-table-cell{display:table-cell}}@media (min-width: 768px){:host .vega-table-cell.M\\:v-table-cell{display:table-cell}}@media (min-width: 1024px){:host .vega-table-cell.L\\:v-table-cell{display:table-cell}}@media (min-width: 1440px){:host .vega-table-cell.XL\\:v-table-cell{display:table-cell}}:host{display:contents}td{background-color:rgba(var(--v-bg-table-header, 240, 243, 247, 1));color:rgba(var(--v-text-primary, 32, 54, 69, 1));text-align:left;vertical-align:middle;padding:12px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;overflow-wrap:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){td{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){td{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){td{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}td.break-word{word-break:break-word}.vega-table-column{display:flex;align-items:center}.vega-table-column.center{justify-content:center;text-align:center}.vega-table-column.right{justify-content:flex-end;text-align:right}.vega-table-column.left{justify-content:flex-start;text-align:left}.vega-table-column .vega-table-column-label{min-width:0px}:host(.density-default) .vega-table-cell{padding:12px}:host(.density-compact) .vega-table-cell{padding:4px}:host(.density-relaxed) .vega-table-cell{padding:16px}:host(.column-divider) .vega-table-cell{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-right-width:1px;border-right-style:solid}";
+const vegaTableFootCellCss = ":host .vega-table-cell.v-hidden{display:none}@media (min-width: 320px){:host .vega-table-cell.S\\:v-table-cell{display:table-cell}}@media (min-width: 768px){:host .vega-table-cell.M\\:v-table-cell{display:table-cell}}@media (min-width: 1024px){:host .vega-table-cell.L\\:v-table-cell{display:table-cell}}@media (min-width: 1440px){:host .vega-table-cell.XL\\:v-table-cell{display:table-cell}}:host{display:contents}td{background-color:rgba(var(--v-bg-table-header, 240, 243, 247, 1));color:rgba(var(--v-text-primary, 32, 54, 69, 1));text-align:left;vertical-align:middle;padding:12px;box-sizing:border-box;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;overflow-wrap:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){td{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){td{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){td{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}td.break-word{word-break:break-word}.vega-table-column{display:flex;align-items:center}.vega-table-column.center{justify-content:center;text-align:center}.vega-table-column.right{justify-content:flex-end;text-align:right}.vega-table-column.left{justify-content:flex-start;text-align:left}.vega-table-column .vega-table-column-label{min-width:0px}:host(.density-default) .vega-table-cell{padding:12px}:host(.density-compact) .vega-table-cell{padding:4px}:host(.density-relaxed) .vega-table-cell{padding:16px}:host(.column-divider) .vega-table-cell{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-right-width:1px;border-right-style:solid}:host .vega-table-cell.right-divider{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-right-width:2px;border-right-style:solid}:host .vega-table-cell.left-divider{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-left-width:2px;border-left-style:solid}:host .vega-table-cell.hide-right-border{border-right-width:0px}";
 
-var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -6248,28 +6936,28 @@ const VegaTableFootCell = class {
     return component.sanitizeVegaComponent(index.h(index.Host, { class: {
         [`density-${responsiveFormatFacade.ResponsiveFormatFacade.formatCustom(this.density)}`]: true,
         'column-divider': this.columnDivider,
-      }, style: { width: this.width }, "aria-colspan": ((_a = this.colSpan) !== null && _a !== void 0 ? _a : 0) > 1 ? String(this.colSpan) : null }, this.vegaTableFootCellRenderer.render()), this.host);
+      }, "aria-colspan": ((_a = this.colSpan) !== null && _a !== void 0 ? _a : 0) > 1 ? String(this.colSpan) : null }, this.vegaTableFootCellRenderer.render()), this.host);
   }
   get host() { return index.getElement(this); }
 };
-__decorate$j([
+__decorate$k([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
 ], VegaTableFootCell.prototype, "globalSlimmers", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableFootCell.prototype, "vegaTableFootCellStateController", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableFootCell.prototype, "vegaTableFootCellRenderer", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableFootCell.prototype, "pageResizeObserverSlimmer", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableFootCell.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
 VegaTableFootCell.style = vegaTableFootCellCss;
 
-var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -6300,23 +6988,23 @@ class VegaTableFootRowRenderer extends globalSlimmerRegistry.VegaSlimmer {
       index.h("td", { style: { width: this.paddingX[1] } })));
   }
 }
-__decorate$i([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableFootRowRenderer.prototype, "host", void 0);
-__decorate$i([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableFootRowRenderer.prototype, "paddingX", void 0);
-__decorate$i([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableFootRowRenderer.prototype, "selectionType", void 0);
-__decorate$i([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableFootRowRenderer.prototype, "hasExpandableRow", void 0);
-__decorate$i([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableFootRowRenderer.prototype, "draggable", void 0);
 
-var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -6377,31 +7065,31 @@ class VegaTableFootRowStateController extends subStateObserverSlimmer.SubStateOb
     };
   }
 }
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableFootRowStateController.prototype, "host", void 0);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableFootRowStateController.prototype, "selectionType", void 0);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableFootRowStateController.prototype, "paddingX", void 0);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableFootRowStateController.prototype, "columnDivider", void 0);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableFootRowStateController.prototype, "density", void 0);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableFootRowStateController.prototype, "hasExpandableRow", void 0);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableFootRowStateController.prototype, "draggable", void 0);
 
 const vegaTableFootRowCss = ":host{display:contents}td{background-color:rgba(var(--v-bg-table-header, 240, 243, 247, 1));padding:0px;vertical-align:middle}td:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}td:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.density-default) td:first-of-type,:host(.density-relaxed) td:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-default) td:last-of-type,:host(.density-relaxed) td:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.density-compact) td:first-of-type{border-top-left-radius:4px;border-bottom-left-radius:4px}:host(.density-compact) td:last-of-type{border-top-right-radius:4px;border-bottom-right-radius:4px}.vega-table-expand-action-column{width:40px;min-width:40px}.vega-table-selection-column{width:40px;min-width:40px}";
 
-var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -6434,24 +7122,24 @@ const VegaTableFootRow = class {
   }
   get host() { return index.getElement(this); }
 };
-__decorate$g([
+__decorate$h([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
 ], VegaTableFootRow.prototype, "globalSlimmers", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableFootRow.prototype, "vegaTableFootRowStateController", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableFootRow.prototype, "vegaTableFootRowRenderer", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableFootRow.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableFootRow.prototype, "pageResizeObserverSlimmer", void 0);
 VegaTableFootRow.style = vegaTableFootRowCss;
 
-var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -6479,16 +7167,16 @@ class VegaTableHeadStateController extends subStateObserverSlimmer.SubStateObser
     });
   }
 }
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableHeadStateController.prototype, "host", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableHeadStateController.prototype, "fixed", void 0);
 
 const vegaTableHeadCss = ":host{display:table-header-group;border-top-right-radius:12px;border-bottom-right-radius:12px;border-top-left-radius:12px;border-bottom-left-radius:12px}:host thead{display:contents}:host(.fixed-header){position:sticky;top:0px}";
 
-var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -6534,21 +7222,21 @@ const VegaTableHead = class {
   }
   get host() { return index.getElement(this); }
 };
-__decorate$e([
+__decorate$f([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
 ], VegaTableHead.prototype, "globalSlimmers", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableHead.prototype, "vegaTableHeadStateController", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableHead.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableHead.prototype, "headCellEventPrevent", void 0);
 VegaTableHead.style = vegaTableHeadCss;
 
-var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -6583,10 +7271,10 @@ class VegaTableHeadCellStateController extends subStateObserverSlimmer.SubStateO
     });
   }
 }
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableHeadCellStateController.prototype, "density", void 0);
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableHeadCellStateController.prototype, "columnDivider", void 0);
 
@@ -6602,7 +7290,7 @@ const circleArrowUp = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM385 231c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-71-71V376c0 13.3-10.7 24-24 24s-24-10.7-24-24V193.9l-71 71c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9L239 119c9.4-9.4 24.6-9.4 33.9 0L385 231z"/></svg>`,
 };
 
-var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -6631,14 +7319,14 @@ SortIconRenderer.SORT_ICON_MAP = {
     color: 'text-secondary',
   },
 };
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentField()
 ], SortIconRenderer.prototype, "sorter", void 0);
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentField()
 ], SortIconRenderer.prototype, "sortOrder", void 0);
 
-var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -6652,7 +7340,7 @@ class VegaTableHeadCellSortConfigController extends globalSlimmerRegistry.VegaSl
    * Component lifecycle - [disconnectedCallback]
    */
   disconnectedCallback() {
-    const parent = ui.findParent(this.host, 'vega-table-head');
+    const parent = ui$1.findParent(this.host, 'vega-table-head');
     if (parent) {
       changeManager.ChangeManager.unregister(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(parent, vegaInternalEventId.VegaInternalTableHeadCellSortEvent), this.observer);
     }
@@ -6661,9 +7349,9 @@ class VegaTableHeadCellSortConfigController extends globalSlimmerRegistry.VegaSl
    * Component lifecycle - [componentWillLoad]
    */
   componentWillLoad() {
-    const topParent = ui.findParent(this.host, 'vega-table-head');
+    const topParent = ui$1.findParent(this.host, 'vega-table-head');
     if (topParent) {
-      this.hostTable = ui.findParent(topParent, 'vega-table');
+      this.hostTable = ui$1.findParent(topParent, 'vega-table');
       this.isTemplateRenderMode = this.checkIsTemplateRenderMode();
       this.observer = new observer.Observer(this.isAcceptableObserver.bind(this), this.observerListener.bind(this));
       changeManager.ChangeManager.register(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(topParent, vegaInternalEventId.VegaInternalTableHeadCellSortEvent), this.observer);
@@ -6673,7 +7361,7 @@ class VegaTableHeadCellSortConfigController extends globalSlimmerRegistry.VegaSl
    * Notify other table head cells on click sort
    */
   notifyOtherHeadCellOnClickSort() {
-    const parent = ui.findParent(this.host, 'vega-table-head');
+    const parent = ui$1.findParent(this.host, 'vega-table-head');
     if (parent) {
       changeManager.ChangeManager.notify(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(parent, vegaInternalEventId.VegaInternalTableHeadCellSortEvent), { host: this.host });
     }
@@ -6707,23 +7395,47 @@ class VegaTableHeadCellSortConfigController extends globalSlimmerRegistry.VegaSl
     return Array.from(this.hostTable.children).some((el) => el.tagName.startsWith('VEGA-TABLE-'));
   }
 }
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableHeadCellSortConfigController.prototype, "host", void 0);
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableHeadCellSortConfigController.prototype, "sortOrder", void 0);
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableHeadCellSortConfigController.prototype, "sortConfig", void 0);
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaTableHeadCellSortConfigController.prototype, "disconnectedCallback", null);
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaTableHeadCellSortConfigController.prototype, "componentWillLoad", null);
 
-const vegaTableHeadCellCss = ":host .vega-table-cell.v-hidden{display:none}@media (min-width: 320px){:host .vega-table-cell.S\\:v-table-cell{display:table-cell}}@media (min-width: 768px){:host .vega-table-cell.M\\:v-table-cell{display:table-cell}}@media (min-width: 1024px){:host .vega-table-cell.L\\:v-table-cell{display:table-cell}}@media (min-width: 1440px){:host .vega-table-cell.XL\\:v-table-cell{display:table-cell}}:host{display:contents}:host(.sortable){cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.sortable:hover){background-color:rgba(var(--v-bg-table-row-hover, 241, 248, 251, 1))}th{background-color:rgba(var(--v-bg-table-header, 240, 243, 247, 1));color:rgba(var(--v-text-primary, 32, 54, 69, 1));text-align:left;vertical-align:middle;padding:0px;padding:12px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;overflow-wrap:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){th{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){th{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){th{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}th.break-word{word-break:break-word}.vega-table-column{display:flex;align-items:center}.vega-table-column.center{justify-content:center;text-align:center}.vega-table-column.right{justify-content:flex-end;text-align:right}.vega-table-column.left{justify-content:flex-start;text-align:left}.vega-table-column .vega-table-column-label{min-width:0px}.vega-table-column .vega-table-column-sorter{display:flex;align-items:center;justify-content:center;padding:2px;margin-left:8px;cursor:pointer;outline:none}:host(.density-default) .vega-table-cell{padding:12px}:host(.density-compact) .vega-table-cell{padding:4px}:host(.density-relaxed) .vega-table-cell{padding:16px}:host(.column-divider) .vega-table-cell{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-right-width:1px;border-right-style:solid}:host .vega-table-cell.is-group-cell{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-right-width:1px;border-bottom-width:1px;border-right-style:solid;border-bottom-style:solid}:host .vega-table-cell.hide-right-border{border-right-width:0px}:host .vega-table-cell.bottom-border{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-bottom-width:1px;border-bottom-style:solid}:host .vega-table-cell.right-divider{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-right-width:2px;border-right-style:solid}:host .vega-table-cell.left-divider{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-left-width:2px;border-left-style:solid}";
+var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Controller for head-cell template structure notifications.
+ */
+class VegaTableHeadCellTemplateStructureController extends globalSlimmerRegistry.VegaSlimmer {
+  /**
+   * Notify table template-structure observers when template group keys are updated.
+   */
+  notifyTemplateHeadStructureChange() {
+    const parent = ui$1.findParent(this.host, 'vega-table-head');
+    if (!parent)
+      return;
+    changeManager.ChangeManager.notify(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(parent, vegaInternalEventId.VegaInternalTableHeadTemplateStructureChange), { host: this.host });
+  }
+}
+__decorate$b([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableHeadCellTemplateStructureController.prototype, "host", void 0);
+
+const vegaTableHeadCellCss = ":host .vega-table-cell.v-hidden{display:none}@media (min-width: 320px){:host .vega-table-cell.S\\:v-table-cell{display:table-cell}}@media (min-width: 768px){:host .vega-table-cell.M\\:v-table-cell{display:table-cell}}@media (min-width: 1024px){:host .vega-table-cell.L\\:v-table-cell{display:table-cell}}@media (min-width: 1440px){:host .vega-table-cell.XL\\:v-table-cell{display:table-cell}}:host{display:contents}:host(.sortable){cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.sortable:hover){background-color:rgba(var(--v-bg-table-row-hover, 241, 248, 251, 1))}th{background-color:rgba(var(--v-bg-table-header, 240, 243, 247, 1));color:rgba(var(--v-text-primary, 32, 54, 69, 1));text-align:left;vertical-align:middle;padding:0px;padding:12px;box-sizing:border-box;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;overflow-wrap:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){th{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){th{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){th{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}th.break-word{word-break:break-word}.vega-table-column{display:flex;align-items:center}.vega-table-column.center{justify-content:center;text-align:center}.vega-table-column.right{justify-content:flex-end;text-align:right}.vega-table-column.left{justify-content:flex-start;text-align:left}.vega-table-column .vega-table-column-label{min-width:0px}.vega-table-column .vega-table-column-sorter{display:flex;align-items:center;justify-content:center;padding:2px;margin-left:8px;cursor:pointer;outline:none}:host(.density-default) .vega-table-cell{padding:12px}:host(.density-compact) .vega-table-cell{padding:4px}:host(.density-relaxed) .vega-table-cell{padding:16px}:host(.column-divider) .vega-table-cell{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-right-width:1px;border-right-style:solid}:host .vega-table-cell.is-group-cell{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-right-width:1px;border-bottom-width:1px;border-right-style:solid;border-bottom-style:solid}:host .vega-table-cell.hide-right-border{border-right-width:0px}:host .vega-table-cell.bottom-border{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-bottom-width:1px;border-bottom-style:solid}:host .vega-table-cell.right-divider{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-right-width:2px;border-right-style:solid}:host .vega-table-cell.left-divider{border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-left-width:2px;border-left-style:solid}";
 
 var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -6747,6 +7459,7 @@ const VegaTableHeadCell = class {
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
     this.sortIconRenderer = new SortIconRenderer();
     this.vegaTableHeadCellSortConfigController = new VegaTableHeadCellSortConfigController();
+    this.vegaTableHeadCellTemplateStructureController = new VegaTableHeadCellTemplateStructureController();
     this.vegaTableRenderInputConsumerSlimmer = new VegaTableChildRenderInputConsumerSlimmer(vegaInternalEventId.VegaInternalColumnHeadCellRenderInputRIC);
     this.currentBreakpoint = breakpoints.getCurrentBreakpoint();
     this.handleSort = (e) => {
@@ -6772,6 +7485,15 @@ const VegaTableHeadCell = class {
       return orderSequence[(orderSequence.indexOf(sortOrder) + 1) % orderSequence.length];
     };
   }
+  watchPinned() {
+    this.vegaTableHeadCellTemplateStructureController.notifyTemplateHeadStructureChange();
+  }
+  watchGroupKey() {
+    this.vegaTableHeadCellTemplateStructureController.notifyTemplateHeadStructureChange();
+  }
+  watchParentGroupKey() {
+    this.vegaTableHeadCellTemplateStructureController.notifyTemplateHeadStructureChange();
+  }
   render() {
     var _a, _b, _c, _d, _e, _f, _g;
     const sortableConfig = this.sorter
@@ -6786,7 +7508,7 @@ const VegaTableHeadCell = class {
         [`density-${responsiveFormatFacade.ResponsiveFormatFacade.formatCustom(this.density)}`]: true,
         'sortable': !!this.sorter,
         'column-divider': this.columnDivider,
-      }, style: { width: this.width } }, index.h("th", Object.assign({ class: {
+      } }, index.h("th", Object.assign({ class: {
         'vega-table-cell': true,
         'break-word': !featureFlagController.FeatureFlag.isEnabled('VEGA_TABLE.ENABLE_NEW_CELL_BREAK_WORDS_STYLE'),
         'is-group-cell': (_a = this.renderInput) === null || _a === void 0 ? void 0 : _a.headHasGroupColumn,
@@ -6794,9 +7516,14 @@ const VegaTableHeadCell = class {
         'right-divider': (_d = this.renderInput) === null || _d === void 0 ? void 0 : _d.isLeftEndPinned,
         'left-divider': (_e = this.renderInput) === null || _e === void 0 ? void 0 : _e.isRightStartPinned,
         [generateResponsiveClass(this.breakpoint, 'v-table-cell')]: true,
-      } }, sortableConfig, { colSpan: (_f = this.renderInput) === null || _f === void 0 ? void 0 : _f.colSpan, rowSpan: (_g = this.renderInput) === null || _g === void 0 ? void 0 : _g.rowSpan }), index.h("div", { class: ui.arrayToClassString(['vega-table-column', this.textAlign]) }, index.h("span", { class: "vega-table-column-label" }, index.h("slot", null)), this.sortIconRenderer.render()))), this.host);
+      } }, sortableConfig, { colSpan: (_f = this.renderInput) === null || _f === void 0 ? void 0 : _f.colSpan, rowSpan: (_g = this.renderInput) === null || _g === void 0 ? void 0 : _g.rowSpan, style: { width: this.width } }), index.h("div", { class: ui$1.arrayToClassString(['vega-table-column', this.textAlign]) }, index.h("span", { class: "vega-table-column-label" }, index.h("slot", null)), this.sortIconRenderer.render()))), this.host);
   }
   get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "pinned": ["watchPinned"],
+    "groupKey": ["watchGroupKey"],
+    "parentGroupKey": ["watchParentGroupKey"]
+  }; }
 };
 (() => {
   internalIconManager.VegaInternalIconManager.register({
@@ -6828,6 +7555,9 @@ __decorate$a([
 __decorate$a([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableHeadCell.prototype, "vegaTableHeadCellSortConfigController", void 0);
+__decorate$a([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaTableHeadCell.prototype, "vegaTableHeadCellTemplateStructureController", void 0);
 __decorate$a([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableHeadCell.prototype, "vegaTableRenderInputConsumerSlimmer", void 0);
@@ -6880,7 +7610,7 @@ class VegaTableHeadRowRenderer extends globalSlimmerRegistry.VegaSlimmer {
     };
     this.handleClick = (e) => {
       e.stopPropagation();
-      const event = remoteInvocationRegistry.remoteInvocationRegistry.call(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(ui.findParent(this.host, 'vega-table'), vegaInternalEventId.VegaInternalTableRowSelectAll), {
+      const event = remoteInvocationRegistry.remoteInvocationRegistry.call(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(ui$1.findParent(this.host, 'vega-table'), vegaInternalEventId.VegaInternalTableRowSelectAll), {
         host: this.host,
         checked: !this.checkedAll,
       });
@@ -7067,7 +7797,7 @@ class VegaTableHeadRowStateController extends subStateObserverSlimmer.SubStateOb
           parentStateName: 'paddingX',
           // eslint-disable-next-line jsdoc/require-jsdoc
           callback: (value) => {
-            const table = ui.findParent(this.host, 'vega-table');
+            const table = ui$1.findParent(this.host, 'vega-table');
             if (table.dataSource.length === 0 || table.columns.length === 0) {
               this.paddingX = value;
             }
@@ -7310,7 +8040,7 @@ class VegaTableRowRenderer extends globalSlimmerRegistry.VegaSlimmer {
     return (this.expandable && (index.h("tr", { key: `vega-table-expand-row-space-${rowKey}`, class: "expand-row-space" })));
   }
   setParentTableRef() {
-    this.parentTableRef = ui.findParent(this.host, 'vega-table');
+    this.parentTableRef = ui$1.findParent(this.host, 'vega-table');
   }
 }
 (() => {
@@ -7653,7 +8383,7 @@ class VegaTableRowStateController extends subStateObserverSlimmer.SubStateObserv
           parentStateName: 'paddingX',
           // eslint-disable-next-line jsdoc/require-jsdoc
           callback: (value) => {
-            const table = ui.findParent(this.host, 'vega-table');
+            const table = ui$1.findParent(this.host, 'vega-table');
             if (table.dataSource.length === 0 || table.columns.length === 0) {
               this.paddingX = value;
             }