@globalpayments/vega 2.91.0 → 2.93.0

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

@@ -14,9 +14,9 @@ const ui = 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 vegaEventId = require('./vega-event-id-df22d80e.js');
-const responsiveFormatFacade = require('./responsive-format-facade-10ff730e.js');
-const typeGuard = require('./type-guard-0171e779.js');
+const vegaEventId = require('./vega-event-id-58afed7a.js');
+const responsiveFormatFacade = require('./responsive-format-facade-1af54330.js');
+const typeGuard = require('./type-guard-1c3770d4.js');
 const component = require('./component-1e352960.js');
 const misc = require('./misc-3d30df91.js');
 const breakpoints = require('./breakpoints-1cc2c4c6.js');
@@ -24,15 +24,15 @@ 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 childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-76d19d56.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-5bab10c2.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-e67ee84c.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-d234a619.js');
 const immutableMap = require('./immutable-map-d711339d.js');
-const translationSlimmer = require('./translation-slimmer-2af6f141.js');
+const translationSlimmer = require('./translation-slimmer-7fb6e94c.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 featureFlagController = require('./feature-flag-controller-438a1510.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');
@@ -43,9 +43,9 @@ require('./number-4816603d.js');
 require('./pixel-98f2a10c.js');
 require('./array-249289f2.js');
 require('./typography-3ea4fe41.js');
-require('./internal-translation-controller-5905469e.js');
+require('./internal-translation-controller-31f2b057.js');
 require('./try-get-document-c0ebd39a.js');
-require('./internal-vega-event-manager-7196a847.js');
+require('./internal-vega-event-manager-13c4012b.js');
 require('./vega-env-manager-23b8b23c.js');
 require('./index-3ca118c4.js');
 require('./icon-manager-be358b32.js');
@@ -161,7 +161,256 @@ const VegaTableEditableFieldTypes = [
   'time-picker',
 ];
 
-var __decorate$U = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+/**
+ * ColumnRenderInputModel
+ *
+ * Render-time representation of a column or group node used by header/body renderers.
+ * Built from a ColumnStructureModel tree, it carries computed layout metadata required
+ * for rendering and pinned/sticky calculations (colSpan, rowSpan, pinned boundaries, etc).
+ *
+ * Instances form a forest (root-level nodes in an array) that mirrors the structure model
+ * but contains additional render-specific properties and parent/child links for renderers.
+ */
+class ColumnRenderInputModel {
+  /**
+   * Create a new render input node.
+   *
+   * @param {string} key - Unique key (matches ColumnStructureModel.key).
+   * @param {string} label - Optional display label (from structure model).
+   * @param {VegaTablePinnedType} pinned - Pinned type for this node ('left' | 'right' | null).
+   * @param {Nullable<number>} colSpan - Number of visual columns spanned by this node's subtree.
+   * @param {Nullable<number>} rowSpan - Number of header rows this node should span.
+   * @param {boolean} isViewStart - True when this node is the start of a visible view range.
+   * @param {boolean} isViewEnd - True when this node is the end of a visible view range.
+   * @param {boolean} isLeftEndPinned - True when node is last left-pinned sibling.
+   * @param {boolean} isRightStartPinned - True when node is first right-pinned sibling.
+   * @param {boolean} isNoPinnedEnd - True when node is last non-pinned sibling.
+   * @param {boolean} headHasGroupColumn - Header contains group columns (affects rowSpan).
+   * @param {boolean} headHasPinnedColumn - Header contains pinned columns.
+   * @param {number} headMaxDepth - Maximum header depth (number of header rows).
+   * @param {number} level - Level/index of this node within header rows (0-based).
+   * @param {number} columnIndex - Sequential leaf index (used for ordering).
+   * @param {Nullable<ColumnRenderInputModel>} parent - Parent render input node (null for root-level).
+   * @param {ColumnRenderInputModel[]} children - Child render input nodes.
+   */
+  constructor(key, label, pinned, colSpan, rowSpan, isViewStart, isViewEnd, isLeftEndPinned, isRightStartPinned, isNoPinnedEnd, headHasGroupColumn, headHasPinnedColumn, headMaxDepth, level, columnIndex, parent, children = []) {
+    this.key = key;
+    this.label = label;
+    this.pinned = pinned;
+    this.colSpan = colSpan;
+    this.rowSpan = rowSpan;
+    this.isViewStart = isViewStart;
+    this.isViewEnd = isViewEnd;
+    this.isLeftEndPinned = isLeftEndPinned;
+    this.isRightStartPinned = isRightStartPinned;
+    this.isNoPinnedEnd = isNoPinnedEnd;
+    this.headHasGroupColumn = headHasGroupColumn;
+    this.headHasPinnedColumn = headHasPinnedColumn;
+    this.headMaxDepth = headMaxDepth;
+    this.level = level;
+    this.columnIndex = columnIndex;
+    this.parent = parent;
+    this.children = children;
+    this.iteratorCacheMap = new Map();
+    this.leaves = [];
+  }
+  /**
+   * Build a forest of ColumnRenderInputModel nodes from a ColumnStructureModel root.
+   *
+   * @param {ColumnStructureModel} rootModel - Root ColumnStructureModel that supplies tree and level data.
+   * @returns {ColumnRenderInputModel[]} Array of root-level ColumnRenderInputModel nodes (the render forest).
+   */
+  static from(rootModel) {
+    const renderInputs = [];
+    const parentStack = [];
+    const maxLevel = rootModel.getMaxDepth();
+    const hasGroupColumn = rootModel.hasGroupColumn();
+    const hasPinnedColumn = rootModel.hasLeftPinnedColumn() || rootModel.hasRightPinnedColumn();
+    let columnIndex = 0;
+    // Iterate structure model (DFS by default) and construct render nodes.
+    rootModel.iterator().forEach((model) => {
+      const parent = model.level > 0 ? parentStack[model.level - 1] : null;
+      const isParentStart = hasGroupColumn && this.isParentStart(model);
+      const isParentEnd = hasGroupColumn && this.isParentEnd(model);
+      const renderInput = new ColumnRenderInputModel(model.key, model.label, parent ? parent.pinned : model.pinned, hasGroupColumn ? this.getColSpan(model) : null, hasGroupColumn ? (model.isLeaf() ? maxLevel - model.level : 1) : null, parent ? parent.isViewStart && isParentStart : isParentStart, parent ? parent.isViewEnd && isParentEnd : isParentEnd, parent
+        ? parent.isLeftEndPinned && isParentEnd
+        : hasPinnedColumn && this.isLeftEndPinned(model), parent
+        ? parent.isRightStartPinned && isParentStart
+        : hasPinnedColumn && this.isRightStartPinned(model), parent ? parent.isNoPinnedEnd && isParentEnd : hasPinnedColumn && this.isNoPinnedEnd(model), hasGroupColumn, hasPinnedColumn, maxLevel, model.level, columnIndex, parent);
+      // Attach to parent if present, otherwise add to root-level array.
+      parent ? parent.children.push(renderInput) : renderInputs.push(renderInput);
+      // Maintain parent stack keyed by level to allow next nodes to find their parent.
+      parentStack[model.level] = renderInput;
+      parentStack.length = model.level + 1;
+      // Increment leaf index when encountering a leaf structure node.
+      if (model.isLeaf())
+        columnIndex++;
+    });
+    return renderInputs;
+  }
+  /**
+   * Create a new render input that merges pinned-boundary flags from a set of spanned leaves.
+   *
+   * Used when a body cell with `colSpan > 1` consumes neighboring leaves. The spanning cell
+   * must inherit boundary indicators (`isLeftEndPinned`, `isRightStartPinned`, `isNoPinnedEnd`)
+   * from any consumed leaf that carries them, so the pinned-boundary visual (divider/shadow)
+   * remains visible on the spanning cell.
+   *
+   * @param {ColumnRenderInputModel} base - The render input of the originating (leftmost) leaf.
+   * @param {ColumnRenderInputModel[]} spannedLeaves - All leaves consumed by the span (including base).
+   * @returns {ColumnRenderInputModel} A new instance with OR-merged boundary flags.
+   */
+  static withMergedBoundaries(base, spannedLeaves) {
+    let isLeftEndPinned = base.isLeftEndPinned;
+    let isRightStartPinned = base.isRightStartPinned;
+    let isNoPinnedEnd = base.isNoPinnedEnd;
+    let isViewEnd = base.isViewEnd;
+    for (const leaf of spannedLeaves) {
+      isLeftEndPinned = isLeftEndPinned || leaf.isLeftEndPinned;
+      isRightStartPinned = isRightStartPinned || leaf.isRightStartPinned;
+      isNoPinnedEnd = isNoPinnedEnd || leaf.isNoPinnedEnd;
+      isViewEnd = isViewEnd || leaf.isViewEnd;
+    }
+    // Return the base unchanged when no flags were gained (common fast-path).
+    if (isLeftEndPinned === base.isLeftEndPinned &&
+      isRightStartPinned === base.isRightStartPinned &&
+      isNoPinnedEnd === base.isNoPinnedEnd &&
+      isViewEnd === base.isViewEnd) {
+      return base;
+    }
+    return new ColumnRenderInputModel(base.key, base.label, base.pinned, base.colSpan, base.rowSpan, base.isViewStart, isViewEnd, isLeftEndPinned, isRightStartPinned, isNoPinnedEnd, base.headHasGroupColumn, base.headHasPinnedColumn, base.headMaxDepth, base.level, base.columnIndex, base.parent, base.children);
+  }
+  /**
+   * True when the provided structure model is the last left-pinned sibling in its parent's children.
+   * Used to mark boundary nodes for left-pinned groups.
+   *
+   * @param {ColumnStructureModel} model - Structure model to check.
+   * @returns {boolean} True when model is the last left-pinned sibling.
+   */
+  static isLeftEndPinned(model) {
+    const siblings = model.parent
+      .getOrderedChildren()
+      .filter((child) => child.pinned === 'left');
+    return siblings[siblings.length - 1] === model;
+  }
+  /**
+   * True when the provided structure model is the first right-pinned sibling in its parent's children.
+   * Used to mark boundary nodes for right-pinned groups.
+   *
+   * @param {ColumnStructureModel} model - Structure model to check.
+   * @returns {boolean} True when model is the first right-pinned sibling.
+   */
+  static isRightStartPinned(model) {
+    const siblings = model.parent
+      .getOrderedChildren()
+      .filter((child) => child.pinned === 'right');
+    return siblings[0] === model;
+  }
+  /**
+   * True when the provided structure model is the last non-pinned sibling in its parent's children.
+   * Useful to handle the 'no-pinned-end' condition.
+   *
+   * @param {ColumnStructureModel} model - Structure model to check.
+   * @returns {boolean} True when model is the last non-pinned sibling.
+   */
+  static isNoPinnedEnd(model) {
+    const siblings = model.parent
+      .getOrderedChildren()
+      .filter((child) => !child.pinned);
+    return siblings[siblings.length - 1] === model;
+  }
+  /**
+   * True when the provided model is the first child of its parent.
+   *
+   * @param {ColumnStructureModel} model - Structure model to check.
+   * @returns {boolean} True when model is the first child.
+   */
+  static isParentStart(model) {
+    return model.parent.getOrderedChildren()[0] === model;
+  }
+  /**
+   * True when the provided model is the last child of its parent.
+   *
+   * @param {ColumnStructureModel} model - Structure model to check.
+   * @returns {boolean} True when model is the last child.
+   */
+  static isParentEnd(model) {
+    const parentChildren = model.parent.getOrderedChildren();
+    return parentChildren[parentChildren.length - 1] === model;
+  }
+  /**
+   * Compute a node's colSpan by iterating its subtree and counting the maximum number
+   * of nodes present at any single level (visual column span).
+   *
+   * @param {ColumnStructureModel} mode - ColumnStructureModel node to examine.
+   * @returns {number} Number of visual columns spanned by the node.
+   */
+  static getColSpan(mode) {
+    const children = mode.iterator();
+    const rowMap = {};
+    children.forEach((node) => {
+      rowMap[node.level] = (rowMap[node.level] || 0) + 1;
+    });
+    return Math.max(...Object.values(rowMap));
+  }
+  /**
+   * Return cached leaf render nodes for this subtree.
+   * Caches the result on first call and returns cached array on subsequent calls.
+   *
+   * @returns {ColumnRenderInputModel[]} Array of leaf render input nodes.
+   */
+  getLeaves() {
+    if (this.leaves.length > 0) {
+      return this.leaves;
+    }
+    const leaves = this.iterator().filter((model) => model.isLeaf());
+    this.leaves = leaves;
+    return leaves;
+  }
+  /**
+   * Generic iterator that supports traversal modes ('dfs' currently implemented).
+   *
+   * @param {IteratorMode} [mode='dfs'] - Iterator mode ('dfs' | 'bfs').
+   * @returns {ColumnRenderInputModel[]} Traversal-ordered array of nodes.
+   */
+  iterator(mode = 'dfs') {
+    if (mode === 'dfs') {
+      return this.dfsIterator();
+    }
+    // Future: implement BFS mode here.
+    return [];
+  }
+  /**
+   * Depth-first pre-order traversal of this node and its descendants.
+   * Caches the result for the 'dfs' mode to avoid repeated recursion.
+   *
+   * @returns {ColumnRenderInputModel[]} Array of nodes in DFS order (includes this node).
+   */
+  dfsIterator() {
+    if (this.iteratorCacheMap.has('dfs')) {
+      return this.iteratorCacheMap.get('dfs');
+    }
+    const localResult = [];
+    localResult.push(this);
+    if (this.children && this.children.length > 0) {
+      this.children.forEach((child) => {
+        localResult.push(...child.dfsIterator());
+      });
+    }
+    this.iteratorCacheMap.set('dfs', localResult);
+    return localResult;
+  }
+  /**
+   * True when this render node has no children (visual leaf).
+   *
+   * @returns {boolean} True when node is a leaf.
+   */
+  isLeaf() {
+    return !this.children || this.children.length === 0;
+  }
+}
+
+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;
@@ -181,7 +430,7 @@ var __rest$1 = (undefined && undefined.__rest) || function (s, e) {
 class VegaTableCellRenderer extends globalSlimmerRegistry.VegaSlimmer {
   constructor() {
     super(...arguments);
-    this.renderTableCellContent = (column, record, index$1) => {
+    this.renderTableCellContent = (column, record, index$1, isSpanning) => {
       var _a, _b;
       const value = object.getValueByPath(record, column.prop);
       const rowKey = this.vegaTableDataSourceController.getRecordKey(record);
@@ -190,13 +439,14 @@ class VegaTableCellRenderer extends globalSlimmerRegistry.VegaSlimmer {
         .find((item) => this.vegaTableDataSourceController.getRecordKey(item) === rowKey);
       const editing = this.vegaTableEditableController.isEditing(rowKey);
       const rowForm = this.vegaTableEditableController.getRowFormRefMap().get(rowKey);
-      if (editing && rowForm && column.renderFormItem) {
+      // REQ-007: spanning cells are forced read-only — never render editable form items.
+      if (!isSpanning && editing && rowForm && column.renderFormItem) {
         return column.renderFormItem(index.h, column.prop ? value : rowKey, record, index$1, {
           rowForm,
           isNewRow,
         });
       }
-      if (editing && rowForm && column.editable) {
+      if (!isSpanning && editing && rowForm && column.editable) {
         const formItemProps = (_a = column.formItemProps) === null || _a === void 0 ? void 0 : _a.call(column, rowForm, {
           record,
           index: index$1,
@@ -244,58 +494,277 @@ class VegaTableCellRenderer extends globalSlimmerRegistry.VegaSlimmer {
         new RegExp(VegaTableEditableFieldTypes.join('|'), 'i').test(tagName));
     };
   }
-  render(renderInput, record, index$1) {
-    const column = this.columns.find((column) => column.key === renderInput.key ||
-      column.prop === renderInput.key ||
-      column.label === renderInput.key);
+  render(renderInput, record, index$1, colSpanResult) {
+    var _a;
+    const column = this.vegaTableBodyColSpanController.findColumn(renderInput);
+    /* istanbul ignore next -- defensive: colSpanResult is always provided by the caller */
+    const htmlColspan = (_a = colSpanResult === null || colSpanResult === void 0 ? void 0 : colSpanResult.htmlColspan) !== null && _a !== void 0 ? _a : 1;
+    const isSpanning = htmlColspan > 1;
+    // When a cell spans, merge pinned-boundary flags from all consumed leaves so the spanning
+    // cell inherits boundary indicators (e.g. right-divider for pinned-end).
+    const effectiveRenderInput = isSpanning && colSpanResult
+      ? this.getMergedRenderInputForSpan(renderInput, colSpanResult)
+      : renderInput;
     if (column) {
       const rowKey = this.vegaTableDataSourceController.getRecordKey(record);
       const columnKey = `${rowKey}_${column.key || column.prop}`;
-      return (index.h("vega-table-cell", { key: columnKey, textAlign: column.align, breakpoint: column.breakpoint, overflow: column.overflow, ref: (ref) => {
-          this.vegaTableRenderInputController.addCellRenderInputMap(ref, renderInput);
-        } }, this.renderTableCellContent(column, record, index$1)));
+      return (index.h("vega-table-cell", { key: columnKey, textAlign: column.align, breakpoint: column.breakpoint, overflow: column.overflow, colSpan: isSpanning ? htmlColspan : undefined, ref: (ref) => {
+          this.vegaTableRenderInputController.addCellRenderInputMap(ref, effectiveRenderInput);
+        } }, this.renderTableCellContent(column, record, index$1, isSpanning)));
     }
     else {
       return (index.h("vega-table-cell", { key: renderInput.key, ref: (ref) => {
-          this.vegaTableRenderInputController.addCellRenderInputMap(ref, renderInput);
+          this.vegaTableRenderInputController.addCellRenderInputMap(ref, effectiveRenderInput);
         } }));
     }
   }
+  /**
+   * Build a render input with merged boundary flags from all leaves consumed by a body colSpan.
+   *
+   * @param {ColumnRenderInputModel} baseInput - The starting leaf's render input.
+   * @param {BodyColSpanResult} colSpanResult - The resolved span result (provides skipCount).
+   * @returns {ColumnRenderInputModel} A render input with OR-merged boundary flags.
+   */
+  getMergedRenderInputForSpan(baseInput, colSpanResult) {
+    const allLeaves = this.vegaTableRenderInputController.getLeafRenderInputs();
+    const startIndex = allLeaves.indexOf(baseInput);
+    /* istanbul ignore next -- defensive: baseInput should always be in the leaves array */
+    if (startIndex < 0)
+      return baseInput;
+    const spannedLeaves = allLeaves.slice(startIndex + 1, startIndex + 1 + colSpanResult.skipCount);
+    return ColumnRenderInputModel.withMergedBoundaries(baseInput, spannedLeaves);
+  }
 }
-__decorate$U([
+__decorate$V([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableCellRenderer.prototype, "rowKey", void 0);
-__decorate$U([
-  globalSlimmerRegistry.MapToComponentField()
-], VegaTableCellRenderer.prototype, "columns", void 0);
-__decorate$U([
+__decorate$V([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableCellRenderer.prototype, "vegaTableDataSourceController", void 0);
-__decorate$U([
+__decorate$V([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableCellRenderer.prototype, "vegaTableEditableController", void 0);
-__decorate$U([
+__decorate$V([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableCellRenderer.prototype, "vegaTableRenderInputController", void 0);
+__decorate$V([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableCellRenderer.prototype, "vegaTableBodyColSpanController", void 0);
 
-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;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+const NO_SPAN = { htmlColspan: 1, skipCount: 0 };
 /**
- * The expand row controller of VegaTable
+ * Read the declared span for a column, resolving the function form against the row value.
+ * Returns 1 when the column declares no span (REQ-008: span < 2 means no spanning).
+ *
+ * @param {VegaTableColumnConfig} column - The column configuration to read the span from.
+ * @param {VegaTableDataSourceItem} record - The row data record (passed to the function form).
+ * @param {number} rowIndex - Zero-based index of the row in the current data set.
+ * @returns {number} The declared span (>= 1).
  */
-class VegaTableExpandRowController extends globalSlimmerRegistry.VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    /**
-     * Toggle expandable row by rowKey
-     *
-     * @param {string} rowKey - The row key of the row
-     */
-    this.toggleExpandRow = (rowKey) => {
+function getDeclaredSpan(column, record, rowIndex) {
+  const rawSpan = column === null || column === void 0 ? void 0 : column.colSpan;
+  if (rawSpan == null)
+    return 1;
+  if (typeof rawSpan !== 'function')
+    return normalizeSpan(rawSpan);
+  const value = column.prop ? object.getValueByPath(record, column.prop) : undefined;
+  return normalizeSpan(rawSpan(value, record, rowIndex));
+}
+/**
+ * Normalize a raw span value to a positive integer. Non-finite values (NaN/Infinity) and values
+ * below 1 collapse to 1 (no spanning); fractional values are floored so the resulting `colspan`
+ * attribute is always a valid integer string.
+ *
+ * @param {number} rawSpan - The raw span value declared by the column (numeric or function result).
+ * @returns {number} A positive integer span (>= 1).
+ */
+function normalizeSpan(rawSpan) {
+  if (!Number.isFinite(rawSpan))
+    return 1;
+  const floored = Math.floor(rawSpan);
+  return floored >= 1 ? floored : 1;
+}
+/**
+ * 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).
+ *
+ * @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).
+ * @returns {MaxSpan} The widest legal span plus the clamp reason (null when unconstrained).
+ */
+function computeMaxSpan(declared, leafIndex, allLeaves) {
+  var _a, _b;
+  const startPinned = (_a = allLeaves[leafIndex]) === null || _a === void 0 ? void 0 : _a.pinned;
+  let span = 1;
+  for (let offset = 1; offset < declared; offset++) {
+    const nextLeaf = allLeaves[leafIndex + offset];
+    if (!nextLeaf) {
+      return {
+        span,
+        clampReason: `extends past the end of the row (${allLeaves.length} columns total)`,
+      };
+    }
+    // Reject if the next column is in a different pinned group.
+    if (nextLeaf.pinned !== startPinned) {
+      return {
+        span,
+        clampReason: `crosses a pinned-column boundary (pinned="${startPinned !== null && startPinned !== void 0 ? startPinned : 'none'}" → pinned="${(_b = nextLeaf.pinned) !== null && _b !== void 0 ? _b : 'none'}")`,
+      };
+    }
+    span++;
+  }
+  return { span, clampReason: null };
+}
+/**
+ * Emit a clamp warning at most once per column key (per-instance, tracked via {@link warnedKeys}).
+ *
+ * @param {string} colKey - The column key used to dedupe warnings.
+ * @param {number} declared - The originally declared span.
+ * @param {number} effective - The clamped (effective) span actually applied.
+ * @param {string} reason - Human-readable reason the span was clamped.
+ * @param {Set<string>} warnedKeys - Per-instance set tracking already-warned column keys.
+ */
+function warnClampOnce(colKey, declared, effective, reason, warnedKeys) {
+  if (warnedKeys.has(colKey))
+    return;
+  warnedKeys.add(colKey);
+  globalSlimmerRegistry.LogUtility.warn(`[vega-table] colSpan for column "${colKey}" was clamped from ${declared} to ${effective} because it ${reason}.`);
+}
+/**
+ * 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.
+ *
+ * @param {VegaTableColumnConfig} column - The column configuration for the spanning cell.
+ * @param {VegaTableDataSourceItem} record - The row data record.
+ * @param {number} rowIndex - Zero-based index of the row in the current data set.
+ * @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.
+ * @returns {BodyColSpanResult} Resolved spanning metadata for the cell.
+ */
+function resolveBodyColSpan(column, record, rowIndex, leafIndex, allLeaves, warnedKeys) {
+  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 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 : '';
+    warnClampOnce(colKey, declared, effectiveSpan, clampReason, warnedKeys);
+  }
+  if (effectiveSpan <= 1)
+    return NO_SPAN;
+  return {
+    htmlColspan: effectiveSpan,
+    skipCount: effectiveSpan - 1,
+  };
+}
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Per-row body colspan controller.
+ *
+ * Centralizes the source-data body colSpan computation that was previously scattered across the
+ * cell renderer (cache + per-cell resolve) and the row renderer (imperative `skipCount`). It owns
+ * the once-per-key warning cache and exposes {@link resolveRow}, which computes the colspan result
+ * for every leaf in a row in a single pass so renderers can consume the result declaratively.
+ *
+ * The structural shape (a {@link VegaSlimmer} controller reading component fields) mirrors the
+ * main-branch `VegaTableExpandRowController` paradigm.
+ */
+class VegaTableBodyColSpanController extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.warnedColSpanKeys = new Set();
+    this.lastWarnedColumnsRef = null;
+  }
+  /**
+   * Resolve the effective colspan for every leaf cell in a single source-data row.
+   *
+   * Walks the row left-to-right, resolving each non-consumed leaf's span and marking the leaves
+   * consumed by a span as `null` so the caller can skip them declaratively (no mutable
+   * `skipCount` orchestration). The returned array is index-aligned with `leaves`.
+   *
+   * @param {VegaTableDataSourceItem} record - The row data record.
+   * @param {number} rowIndex - Zero-based index of the row in the current data set.
+   * @param {ColumnRenderInputModel[]} leaves - All leaf render inputs for the table (ordered).
+   * @returns {Array<Nullable<BodyColSpanResult>>} One entry per leaf: a {@link BodyColSpanResult}
+   *   for a cell to render, or `null` for a leaf consumed by a preceding spanning cell.
+   */
+  resolveRow(record, rowIndex, leaves) {
+    // Reset the once-per-key warning cache whenever the column configuration changes,
+    // so clamping conditions introduced by a new `columns` value can warn again.
+    if (this.columns !== this.lastWarnedColumnsRef) {
+      this.warnedColSpanKeys.clear();
+      this.lastWarnedColumnsRef = this.columns;
+    }
+    const results = new Array(leaves.length).fill(null);
+    let skipCount = 0;
+    leaves.forEach((leaf, leafIndex) => {
+      if (skipCount > 0) {
+        // This leaf is consumed by a preceding spanning cell — leave it null (skipped).
+        skipCount--;
+        return;
+      }
+      const column = this.findColumn(leaf);
+      const result = column
+        ? resolveBodyColSpan(column, record, rowIndex, leafIndex, leaves, this.warnedColSpanKeys)
+        : { htmlColspan: 1, skipCount: 0 };
+      results[leafIndex] = result;
+      skipCount = result.skipCount;
+    });
+    return results;
+  }
+  /**
+   * Find the column config that backs a leaf render input.
+   *
+   * @param {ColumnRenderInputModel} renderInput - The leaf render input.
+   * @returns {Nullable<VegaTableColumnConfig>} The matching column config, or `undefined`.
+   */
+  findColumn(renderInput) {
+    return this.columns.find((column) => column.key === renderInput.key ||
+      column.prop === renderInput.key ||
+      column.label === renderInput.key);
+  }
+}
+__decorate$U([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableBodyColSpanController.prototype, "columns", void 0);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The expand row controller of VegaTable
+ */
+class VegaTableExpandRowController extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Toggle expandable row by rowKey
+     *
+     * @param {string} rowKey - The row key of the row
+     */
+    this.toggleExpandRow = (rowKey) => {
       this.isRowExpandable(rowKey) && this.handleToggleExpandRow(rowKey, !this.isExpanded(rowKey));
     };
     /**
@@ -2412,6 +2881,18 @@ class VegaTableRowRenderer$1 extends globalSlimmerRegistry.VegaSlimmer {
     this.renderTableRowComponent = (rowProps) => {
       const { rowKey, index: index$1, record, isVisibleInCurrentPage } = rowProps;
       const renderInputs = this.vegaTableRenderInputController.getLeafRenderInputs();
+      // Resolve every leaf's colspan in one pass. Entries are index-aligned with renderInputs;
+      // a `null` entry marks a leaf consumed by a preceding spanning cell (skip it).
+      const colSpanResults = this.vegaTableBodyColSpanController.resolveRow(record, index$1, renderInputs);
+      const cells = [];
+      renderInputs.forEach((renderInput, leafIndex) => {
+        const colSpanResult = colSpanResults[leafIndex];
+        if (!colSpanResult) {
+          // Consumed by a preceding spanning cell — nothing to render for this leaf.
+          return;
+        }
+        cells.push(this.vegaTableCellRenderer.render(renderInput, record, index$1, colSpanResult));
+      });
       return (index.h("vega-table-row", { class: {
           'v-hidden': !isVisibleInCurrentPage,
         }, key: `vega-table-row-${rowKey}`, rowKey: rowKey, 
@@ -2420,9 +2901,7 @@ class VegaTableRowRenderer$1 extends globalSlimmerRegistry.VegaSlimmer {
           domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaClick, () => {
             this.rowClickEventEmitter.emit({ record: record, index: index$1 });
           });
-        }, striped: this.striped && index$1 % 2 === 1, rowDivider: this.rowDivider && !rowProps.isLastRow }, renderInputs.map((renderInput) => {
-        return this.vegaTableCellRenderer.render(renderInput, record, index$1);
-      })));
+        }, striped: this.striped && index$1 % 2 === 1, rowDivider: this.rowDivider && !rowProps.isLastRow }, cells));
     };
   }
   render(rowProps, editable) {
@@ -2439,6 +2918,9 @@ __decorate$G([
 __decorate$G([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "vegaTableCellRenderer", void 0);
+__decorate$G([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableRowRenderer$1.prototype, "vegaTableBodyColSpanController", void 0);
 __decorate$G([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "striped", void 0);
@@ -2656,423 +3138,206 @@ class ColumnStructureModel {
    *
    * @returns {boolean} True if any descendant is a group column.
    */
-  hasGroupColumn() {
-    return !!this.children.find((model) => !model.isLeaf());
-  }
-  /**
-   * Checks if this subtree contains any left pinned children.
-   *
-   * @returns {boolean} True if any immediate child has a pinned value.
-   */
-  hasLeftPinnedColumn() {
-    return !!this.children.find((model) => model.pinned === 'left');
-  }
-  /**
-   * Checks if this subtree contains any right pinned children.
-   *
-   * @returns {boolean} True if any immediate child has a pinned value.
-   */
-  hasRightPinnedColumn() {
-    return !!this.children.find((model) => model.pinned === 'right');
-  }
-  /**
-   * Checks if this node is a leaf (no children).
-   *
-   * @returns {boolean} True when this node has no children.
-   */
-  isLeaf() {
-    return !this.children || this.children.length === 0;
-  }
-  /**
-   * Return an array of nodes for this subtree using the specified traversal mode.
-   *
-   * Currently only depth-first search ('dfs') is supported. The returned array is
-   * cached per-mode to avoid repeated traversal costs.
-   *
-   * @param {IteratorMode} mode - Traversal mode to use. Defaults to 'dfs'.
-   * @returns {ColumnStructureModel[]} Array of ColumnStructureModel nodes in traversal order.
-   */
-  iterator(mode = 'dfs') {
-    if (mode === 'dfs') {
-      return this.dfsIterator();
-    }
-    return [];
-  }
-  /**
-   * Gets all leaf nodes in the subtree, with caching.
-   *
-   * Subsequent calls return the cached array until the underlying model is rebuilt.
-   *
-   * @returns {ColumnStructureModel[]} Array of leaf column models.
-   */
-  getLeaves() {
-    if (this.leaves.length > 0) {
-      return this.leaves;
-    }
-    const leaves = this.dfsIterator().filter((model) => model.isLeaf());
-    this.leaves = leaves;
-    return leaves;
-  }
-  /**
-   * For root nodes, returns children ordered by pinned type (left, none, right).
-   * For non-root nodes, returns children in their natural order.
-   *
-   * @returns {ColumnStructureModel[]} Array of child column models.
-   */
-  getOrderedChildren() {
-    if (!this.isRoot())
-      return this.children;
-    return this.orderedChildren;
-  }
-  /**
-   * Orders root children by pinned type (left, none, right) and caches the result.
-   *
-   * For non-root nodes this method returns children in their natural order.
-   *
-   * @returns {ColumnStructureModel[]} Array of ordered child column models.
-   */
-  orderChildrenByPinned() {
-    if (!this.isRoot())
-      return this.children;
-    if (this.orderedChildren.length > 0) {
-      return this.orderedChildren;
-    }
-    const leftPinned = [];
-    const noPinned = [];
-    const rightPinned = [];
-    this.children.forEach((child) => {
-      if (child.pinned === 'left') {
-        leftPinned.push(child);
-      }
-      else if (child.pinned === 'right') {
-        rightPinned.push(child);
-      }
-      else {
-        noPinned.push(child);
-      }
-    });
-    const children = [...leftPinned, ...noPinned, ...rightPinned];
-    this.orderedChildren = children;
-    return children;
-  }
-  /**
-   * Checks if this node is the root node.
-   *
-   * @returns {boolean} True if root node, false otherwise.
-   */
-  isRoot() {
-    return this.level === ColumnStructureModel.ROOT_LEVEL;
-  }
-  /**
-   * Performs a depth-first traversal of the column structure.
-   *
-   * The traversal respects root-child pinned ordering (left/no/right) for the root node.
-   * Results are cached per-node to avoid repeated recursion costs.
-   *
-   * @returns {ColumnStructureModel[]} Array of all nodes in DFS order.
-   */
-  dfsIterator() {
-    if (this.iteratorCacheMap.has('dfs')) {
-      return this.iteratorCacheMap.get('dfs');
-    }
-    const localResult = [];
-    const children = this.orderChildrenByPinned();
-    if (!this.isRoot()) {
-      localResult.push(this);
-    }
-    if (children && children.length > 0) {
-      children.forEach((child) => {
-        localResult.push(...child.dfsIterator());
-      });
-    }
-    this.iteratorCacheMap.set('dfs', localResult);
-    return localResult;
-  }
-}
-ColumnStructureModel.ROOT_LEVEL = -1;
-ColumnStructureModel.ROOT_KEY = '#root-model#';
-
-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;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-/**
- * Controller responsible for building and keeping the ColumnStructureModel in sync
- * with the component's `columns` and `groupColumns` properties.
- *
- * This slimmer maps relevant component fields and lifecycle/watch hooks to
- * automatically rebuild the column structure when inputs change.
- */
-class VegaTableColumnStructureModelController extends globalSlimmerRegistry.VegaSlimmer {
-  /**
-   * Component lifecycle hook mapped to the host's componentWillLoad.
-   * Initializes the ColumnStructureModel prior to initial render.
-   */
-  componentWillLoad() {
-    this.setColumnStructureModel();
-  }
-  /**
-   * Watch handler mapped to the host's watchColumns.
-   * Rebuilds the ColumnStructureModel when `columns` changes.
-   */
-  watchColumns() {
-    this.setColumnStructureModel();
-  }
-  /**
-   * Watch handler mapped to the host's watchGroupColumns.
-   * Rebuilds the ColumnStructureModel when `groupColumns` changes.
-   */
-  watchGroupColumns() {
-    this.setColumnStructureModel();
-  }
-  /**
-   * Build and assign the ColumnStructureModel from current `columns` and `groupColumns`.
-   * Uses `ColumnStructureModel.from` which returns a root model representing the column tree.
-   */
-  setColumnStructureModel() {
-    this.columnStructureModel = ColumnStructureModel.from(this.columns, this.groupColumns);
-  }
-}
-__decorate$E([
-  globalSlimmerRegistry.MapToComponentField()
-], VegaTableColumnStructureModelController.prototype, "host", void 0);
-__decorate$E([
-  globalSlimmerRegistry.MapToComponentField()
-], VegaTableColumnStructureModelController.prototype, "columns", void 0);
-__decorate$E([
-  globalSlimmerRegistry.MapToComponentField()
-], VegaTableColumnStructureModelController.prototype, "groupColumns", void 0);
-__decorate$E([
-  globalSlimmerRegistry.MapToComponentField({ writable: true })
-], VegaTableColumnStructureModelController.prototype, "columnStructureModel", void 0);
-__decorate$E([
-  globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
-], VegaTableColumnStructureModelController.prototype, "componentWillLoad", null);
-__decorate$E([
-  globalSlimmerRegistry.MapToComponentMethod('watchColumns')
-], VegaTableColumnStructureModelController.prototype, "watchColumns", null);
-__decorate$E([
-  globalSlimmerRegistry.MapToComponentMethod('watchGroupColumns')
-], VegaTableColumnStructureModelController.prototype, "watchGroupColumns", null);
-
-/**
- * ColumnRenderInputModel
- *
- * Render-time representation of a column or group node used by header/body renderers.
- * Built from a ColumnStructureModel tree, it carries computed layout metadata required
- * for rendering and pinned/sticky calculations (colSpan, rowSpan, pinned boundaries, etc).
- *
- * Instances form a forest (root-level nodes in an array) that mirrors the structure model
- * but contains additional render-specific properties and parent/child links for renderers.
- */
-class ColumnRenderInputModel {
-  /**
-   * Create a new render input node.
-   *
-   * @param {string} key - Unique key (matches ColumnStructureModel.key).
-   * @param {string} label - Optional display label (from structure model).
-   * @param {VegaTablePinnedType} pinned - Pinned type for this node ('left' | 'right' | null).
-   * @param {Nullable<number>} colSpan - Number of visual columns spanned by this node's subtree.
-   * @param {Nullable<number>} rowSpan - Number of header rows this node should span.
-   * @param {boolean} isViewStart - True when this node is the start of a visible view range.
-   * @param {boolean} isViewEnd - True when this node is the end of a visible view range.
-   * @param {boolean} isLeftEndPinned - True when node is last left-pinned sibling.
-   * @param {boolean} isRightStartPinned - True when node is first right-pinned sibling.
-   * @param {boolean} isNoPinnedEnd - True when node is last non-pinned sibling.
-   * @param {boolean} headHasGroupColumn - Header contains group columns (affects rowSpan).
-   * @param {boolean} headHasPinnedColumn - Header contains pinned columns.
-   * @param {number} headMaxDepth - Maximum header depth (number of header rows).
-   * @param {number} level - Level/index of this node within header rows (0-based).
-   * @param {number} columnIndex - Sequential leaf index (used for ordering).
-   * @param {Nullable<ColumnRenderInputModel>} parent - Parent render input node (null for root-level).
-   * @param {ColumnRenderInputModel[]} children - Child render input nodes.
-   */
-  constructor(key, label, pinned, colSpan, rowSpan, isViewStart, isViewEnd, isLeftEndPinned, isRightStartPinned, isNoPinnedEnd, headHasGroupColumn, headHasPinnedColumn, headMaxDepth, level, columnIndex, parent, children = []) {
-    this.key = key;
-    this.label = label;
-    this.pinned = pinned;
-    this.colSpan = colSpan;
-    this.rowSpan = rowSpan;
-    this.isViewStart = isViewStart;
-    this.isViewEnd = isViewEnd;
-    this.isLeftEndPinned = isLeftEndPinned;
-    this.isRightStartPinned = isRightStartPinned;
-    this.isNoPinnedEnd = isNoPinnedEnd;
-    this.headHasGroupColumn = headHasGroupColumn;
-    this.headHasPinnedColumn = headHasPinnedColumn;
-    this.headMaxDepth = headMaxDepth;
-    this.level = level;
-    this.columnIndex = columnIndex;
-    this.parent = parent;
-    this.children = children;
-    this.iteratorCacheMap = new Map();
-    this.leaves = [];
-  }
-  /**
-   * Build a forest of ColumnRenderInputModel nodes from a ColumnStructureModel root.
-   *
-   * @param {ColumnStructureModel} rootModel - Root ColumnStructureModel that supplies tree and level data.
-   * @returns {ColumnRenderInputModel[]} Array of root-level ColumnRenderInputModel nodes (the render forest).
-   */
-  static from(rootModel) {
-    const renderInputs = [];
-    const parentStack = [];
-    const maxLevel = rootModel.getMaxDepth();
-    const hasGroupColumn = rootModel.hasGroupColumn();
-    const hasPinnedColumn = rootModel.hasLeftPinnedColumn() || rootModel.hasRightPinnedColumn();
-    let columnIndex = 0;
-    // Iterate structure model (DFS by default) and construct render nodes.
-    rootModel.iterator().forEach((model) => {
-      const parent = model.level > 0 ? parentStack[model.level - 1] : null;
-      const isParentStart = hasGroupColumn && this.isParentStart(model);
-      const isParentEnd = hasGroupColumn && this.isParentEnd(model);
-      const renderInput = new ColumnRenderInputModel(model.key, model.label, parent ? parent.pinned : model.pinned, hasGroupColumn ? this.getColSpan(model) : null, hasGroupColumn ? (model.isLeaf() ? maxLevel - model.level : 1) : null, parent ? parent.isViewStart && isParentStart : isParentStart, parent ? parent.isViewEnd && isParentEnd : isParentEnd, parent
-        ? parent.isLeftEndPinned && isParentEnd
-        : hasPinnedColumn && this.isLeftEndPinned(model), parent
-        ? parent.isRightStartPinned && isParentStart
-        : hasPinnedColumn && this.isRightStartPinned(model), parent ? parent.isNoPinnedEnd && isParentEnd : hasPinnedColumn && this.isNoPinnedEnd(model), hasGroupColumn, hasPinnedColumn, maxLevel, model.level, columnIndex, parent);
-      // Attach to parent if present, otherwise add to root-level array.
-      parent ? parent.children.push(renderInput) : renderInputs.push(renderInput);
-      // Maintain parent stack keyed by level to allow next nodes to find their parent.
-      parentStack[model.level] = renderInput;
-      parentStack.length = model.level + 1;
-      // Increment leaf index when encountering a leaf structure node.
-      if (model.isLeaf())
-        columnIndex++;
-    });
-    return renderInputs;
-  }
-  /**
-   * True when the provided structure model is the last left-pinned sibling in its parent's children.
-   * Used to mark boundary nodes for left-pinned groups.
-   *
-   * @param {ColumnStructureModel} model - Structure model to check.
-   * @returns {boolean} True when model is the last left-pinned sibling.
-   */
-  static isLeftEndPinned(model) {
-    const siblings = model.parent
-      .getOrderedChildren()
-      .filter((child) => child.pinned === 'left');
-    return siblings[siblings.length - 1] === model;
-  }
-  /**
-   * True when the provided structure model is the first right-pinned sibling in its parent's children.
-   * Used to mark boundary nodes for right-pinned groups.
-   *
-   * @param {ColumnStructureModel} model - Structure model to check.
-   * @returns {boolean} True when model is the first right-pinned sibling.
-   */
-  static isRightStartPinned(model) {
-    const siblings = model.parent
-      .getOrderedChildren()
-      .filter((child) => child.pinned === 'right');
-    return siblings[0] === model;
+  hasGroupColumn() {
+    return !!this.children.find((model) => !model.isLeaf());
   }
   /**
-   * True when the provided structure model is the last non-pinned sibling in its parent's children.
-   * Useful to handle the 'no-pinned-end' condition.
+   * Checks if this subtree contains any left pinned children.
    *
-   * @param {ColumnStructureModel} model - Structure model to check.
-   * @returns {boolean} True when model is the last non-pinned sibling.
+   * @returns {boolean} True if any immediate child has a pinned value.
    */
-  static isNoPinnedEnd(model) {
-    const siblings = model.parent
-      .getOrderedChildren()
-      .filter((child) => !child.pinned);
-    return siblings[siblings.length - 1] === model;
+  hasLeftPinnedColumn() {
+    return !!this.children.find((model) => model.pinned === 'left');
   }
   /**
-   * True when the provided model is the first child of its parent.
+   * Checks if this subtree contains any right pinned children.
    *
-   * @param {ColumnStructureModel} model - Structure model to check.
-   * @returns {boolean} True when model is the first child.
+   * @returns {boolean} True if any immediate child has a pinned value.
    */
-  static isParentStart(model) {
-    return model.parent.getOrderedChildren()[0] === model;
+  hasRightPinnedColumn() {
+    return !!this.children.find((model) => model.pinned === 'right');
   }
   /**
-   * True when the provided model is the last child of its parent.
+   * Checks if this node is a leaf (no children).
    *
-   * @param {ColumnStructureModel} model - Structure model to check.
-   * @returns {boolean} True when model is the last child.
+   * @returns {boolean} True when this node has no children.
    */
-  static isParentEnd(model) {
-    const parentChildren = model.parent.getOrderedChildren();
-    return parentChildren[parentChildren.length - 1] === model;
+  isLeaf() {
+    return !this.children || this.children.length === 0;
   }
   /**
-   * Compute a node's colSpan by iterating its subtree and counting the maximum number
-   * of nodes present at any single level (visual column span).
+   * Return an array of nodes for this subtree using the specified traversal mode.
    *
-   * @param {ColumnStructureModel} mode - ColumnStructureModel node to examine.
-   * @returns {number} Number of visual columns spanned by the node.
+   * Currently only depth-first search ('dfs') is supported. The returned array is
+   * cached per-mode to avoid repeated traversal costs.
+   *
+   * @param {IteratorMode} mode - Traversal mode to use. Defaults to 'dfs'.
+   * @returns {ColumnStructureModel[]} Array of ColumnStructureModel nodes in traversal order.
    */
-  static getColSpan(mode) {
-    const children = mode.iterator();
-    const rowMap = {};
-    children.forEach((node) => {
-      rowMap[node.level] = (rowMap[node.level] || 0) + 1;
-    });
-    return Math.max(...Object.values(rowMap));
+  iterator(mode = 'dfs') {
+    if (mode === 'dfs') {
+      return this.dfsIterator();
+    }
+    return [];
   }
   /**
-   * Return cached leaf render nodes for this subtree.
-   * Caches the result on first call and returns cached array on subsequent calls.
+   * Gets all leaf nodes in the subtree, with caching.
    *
-   * @returns {ColumnRenderInputModel[]} Array of leaf render input nodes.
+   * Subsequent calls return the cached array until the underlying model is rebuilt.
+   *
+   * @returns {ColumnStructureModel[]} Array of leaf column models.
    */
   getLeaves() {
     if (this.leaves.length > 0) {
       return this.leaves;
     }
-    const leaves = this.iterator().filter((model) => model.isLeaf());
+    const leaves = this.dfsIterator().filter((model) => model.isLeaf());
     this.leaves = leaves;
     return leaves;
   }
   /**
-   * Generic iterator that supports traversal modes ('dfs' currently implemented).
+   * For root nodes, returns children ordered by pinned type (left, none, right).
+   * For non-root nodes, returns children in their natural order.
    *
-   * @param {IteratorMode} [mode='dfs'] - Iterator mode ('dfs' | 'bfs').
-   * @returns {ColumnRenderInputModel[]} Traversal-ordered array of nodes.
+   * @returns {ColumnStructureModel[]} Array of child column models.
    */
-  iterator(mode = 'dfs') {
-    if (mode === 'dfs') {
-      return this.dfsIterator();
+  getOrderedChildren() {
+    if (!this.isRoot())
+      return this.children;
+    return this.orderedChildren;
+  }
+  /**
+   * Orders root children by pinned type (left, none, right) and caches the result.
+   *
+   * For non-root nodes this method returns children in their natural order.
+   *
+   * @returns {ColumnStructureModel[]} Array of ordered child column models.
+   */
+  orderChildrenByPinned() {
+    if (!this.isRoot())
+      return this.children;
+    if (this.orderedChildren.length > 0) {
+      return this.orderedChildren;
     }
-    // Future: implement BFS mode here.
-    return [];
+    const leftPinned = [];
+    const noPinned = [];
+    const rightPinned = [];
+    this.children.forEach((child) => {
+      if (child.pinned === 'left') {
+        leftPinned.push(child);
+      }
+      else if (child.pinned === 'right') {
+        rightPinned.push(child);
+      }
+      else {
+        noPinned.push(child);
+      }
+    });
+    const children = [...leftPinned, ...noPinned, ...rightPinned];
+    this.orderedChildren = children;
+    return children;
   }
   /**
-   * Depth-first pre-order traversal of this node and its descendants.
-   * Caches the result for the 'dfs' mode to avoid repeated recursion.
+   * Checks if this node is the root node.
    *
-   * @returns {ColumnRenderInputModel[]} Array of nodes in DFS order (includes this node).
+   * @returns {boolean} True if root node, false otherwise.
+   */
+  isRoot() {
+    return this.level === ColumnStructureModel.ROOT_LEVEL;
+  }
+  /**
+   * Performs a depth-first traversal of the column structure.
+   *
+   * The traversal respects root-child pinned ordering (left/no/right) for the root node.
+   * Results are cached per-node to avoid repeated recursion costs.
+   *
+   * @returns {ColumnStructureModel[]} Array of all nodes in DFS order.
    */
   dfsIterator() {
     if (this.iteratorCacheMap.has('dfs')) {
       return this.iteratorCacheMap.get('dfs');
     }
     const localResult = [];
-    localResult.push(this);
-    if (this.children && this.children.length > 0) {
-      this.children.forEach((child) => {
+    const children = this.orderChildrenByPinned();
+    if (!this.isRoot()) {
+      localResult.push(this);
+    }
+    if (children && children.length > 0) {
+      children.forEach((child) => {
         localResult.push(...child.dfsIterator());
       });
     }
     this.iteratorCacheMap.set('dfs', localResult);
     return localResult;
   }
+}
+ColumnStructureModel.ROOT_LEVEL = -1;
+ColumnStructureModel.ROOT_KEY = '#root-model#';
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Controller responsible for building and keeping the ColumnStructureModel in sync
+ * with the component's `columns` and `groupColumns` properties.
+ *
+ * This slimmer maps relevant component fields and lifecycle/watch hooks to
+ * automatically rebuild the column structure when inputs change.
+ */
+class VegaTableColumnStructureModelController extends globalSlimmerRegistry.VegaSlimmer {
   /**
-   * True when this render node has no children (visual leaf).
-   *
-   * @returns {boolean} True when node is a leaf.
+   * Component lifecycle hook mapped to the host's componentWillLoad.
+   * Initializes the ColumnStructureModel prior to initial render.
    */
-  isLeaf() {
-    return !this.children || this.children.length === 0;
+  componentWillLoad() {
+    this.setColumnStructureModel();
+  }
+  /**
+   * Watch handler mapped to the host's watchColumns.
+   * Rebuilds the ColumnStructureModel when `columns` changes.
+   */
+  watchColumns() {
+    this.setColumnStructureModel();
+  }
+  /**
+   * Watch handler mapped to the host's watchGroupColumns.
+   * Rebuilds the ColumnStructureModel when `groupColumns` changes.
+   */
+  watchGroupColumns() {
+    this.setColumnStructureModel();
+  }
+  /**
+   * Build and assign the ColumnStructureModel from current `columns` and `groupColumns`.
+   * Uses `ColumnStructureModel.from` which returns a root model representing the column tree.
+   */
+  setColumnStructureModel() {
+    this.columnStructureModel = ColumnStructureModel.from(this.columns, this.groupColumns);
   }
 }
+__decorate$E([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableColumnStructureModelController.prototype, "host", void 0);
+__decorate$E([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableColumnStructureModelController.prototype, "columns", void 0);
+__decorate$E([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableColumnStructureModelController.prototype, "groupColumns", void 0);
+__decorate$E([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaTableColumnStructureModelController.prototype, "columnStructureModel", void 0);
+__decorate$E([
+  globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
+], VegaTableColumnStructureModelController.prototype, "componentWillLoad", null);
+__decorate$E([
+  globalSlimmerRegistry.MapToComponentMethod('watchColumns')
+], VegaTableColumnStructureModelController.prototype, "watchColumns", null);
+__decorate$E([
+  globalSlimmerRegistry.MapToComponentMethod('watchGroupColumns')
+], VegaTableColumnStructureModelController.prototype, "watchGroupColumns", null);
 
 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;
@@ -3287,6 +3552,12 @@ class VegaTablePinnedRenderer extends globalSlimmerRegistry.VegaSlimmer {
       },
     });
     this.previouslyStyledCells = new Set();
+    // Each set tracks cells where exactly one dynamic class was added — cleared per class so
+    // that static classes from render() on the same cell are never inadvertently stripped
+    // (e.g. a cell that is both isRightStartPinned and the last-visible body cell).
+    this.dynamicRightDividerCells = new Set();
+    this.dynamicLeftDividerCells = new Set();
+    this.dynamicHideRightBorderCells = new Set();
     this.clearPinnedPositionsTaskQueue = new synchronizeTaskQueue.SynchronizeTaskQueue(1);
   }
   componentDidLoad() {
@@ -3294,7 +3565,17 @@ class VegaTablePinnedRenderer extends globalSlimmerRegistry.VegaSlimmer {
   async componentDidRender() {
     await this.clearPinnedPositionsTaskQueue.runTask();
     this.updateTableRowPinnedPosition();
-    this.updateTableCellPinnedPosition();
+    const unreadyCells = this.updateTableCellPinnedPosition();
+    if (unreadyCells.length > 0) {
+      // In dev builds, Stencil's HMR flag forces loadModule() to always use a
+      // dynamic import(), so a brand-new cell's first render is deferred. We wait
+      // for each unready cell via componentOnReady() — which resolves exactly when
+      // the cell's shadow <td> is first rendered — then apply sticky positioning.
+      // In production (hotModuleReplacement=false) loadModule() is synchronous, so
+      // cells are always ready by componentDidRender and this branch is never reached.
+      await Promise.all(unreadyCells.map((cell) => cell.componentOnReady()));
+      this.updateTableCellPinnedPosition();
+    }
   }
   watchColumnStructureModel() {
     void this.clearPinnedPositionsTaskQueue.enqueue({
@@ -3306,24 +3587,165 @@ class VegaTablePinnedRenderer extends globalSlimmerRegistry.VegaSlimmer {
   updateTableCellPinnedPosition() {
     if (!this.columnStructureModel.hasLeftPinnedColumn() &&
       !this.columnStructureModel.hasRightPinnedColumn())
-      return;
+      return [];
+    // Clear stale dynamic boundary classes before re-evaluating breakpoint visibility.
+    // This ensures the classes are removed when the viewport grows back (e.g. column B
+    // becomes visible again) and not only when the column structure changes.
+    // Each set only removes the single class it tracks, preserving any other static
+    // border classes that render() placed on the same cell (VD-9565).
+    this.dynamicRightDividerCells.forEach((cell) => cell.classList.remove('right-divider'));
+    this.dynamicRightDividerCells.clear();
+    this.dynamicLeftDividerCells.forEach((cell) => cell.classList.remove('left-divider'));
+    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');
     // to avoid window resize before table rendered.
     // @see{module:resize-pinned-position-by-edit-row}
     /* istanbul ignore next */
     if (!row)
-      return;
+      return [];
     const headCellRenderInputMap = this.vegaTableRenderInputController.getHeadCellRenderInputMap();
     const pinnedColumnBodyCellRenderInputMap = this.vegaTableRenderInputController.getPinnedColumnBodyCellRenderInputMap();
     const [prevShadowThWidth, nextShadowThWidth] = this.getRowShadowThWidths();
     const leafWidths = this.getLeafWidths();
+    // Track the last visible left-pinned head cell and first visible right-pinned head cell
+    // to dynamically apply boundary classes when breakpoint-hidden columns shift the boundary.
+    let lastVisibleLeftPinnedHeadCell = null;
+    let firstVisibleRightPinnedHeadCell = null;
+    let lastVisibleRightPinnedHeadCell = null;
     headCellRenderInputMap.forEach((renderInput, headCell) => {
+      var _a;
+      /* istanbul ignore next -- defensive null-guard: jsdom always provides shadowRoot */
+      const shadowCell = (_a = headCell.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('th, td');
+      const isVisible = shadowCell ? shadowCell.getBoundingClientRect().width > 0 : false;
       this.updateCellPinnedPosition(renderInput, headCell, prevShadowThWidth, leafWidths, nextShadowThWidth);
+      if (isVisible && renderInput.pinned === 'left') {
+        lastVisibleLeftPinnedHeadCell = shadowCell;
+      }
+      if (isVisible && renderInput.pinned === 'right' && !firstVisibleRightPinnedHeadCell) {
+        firstVisibleRightPinnedHeadCell = shadowCell;
+      }
+      if (isVisible && renderInput.pinned === 'right') {
+        lastVisibleRightPinnedHeadCell = shadowCell;
+      }
     });
-    pinnedColumnBodyCellRenderInputMap.forEach((renderInput, headCell) => {
-      this.updateCellPinnedPosition(renderInput, headCell, prevShadowThWidth, leafWidths, nextShadowThWidth);
+    // 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 */
+      if (!(bodyCell === null || bodyCell === void 0 ? void 0 : bodyCell.isConnected)) {
+        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) => {
+      var _a;
+      /* istanbul ignore next -- defensive null-guard: jsdom always provides shadowRoot */
+      const shadowCell = (_a = bodyCell.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('th, td');
+      const isVisible = shadowCell ? shadowCell.getBoundingClientRect().width > 0 : false;
+      // Shadow DOM not ready yet — cell was just created (e.g. colspan collapsed after drag).
+      if (['left', 'right'].includes(renderInput.pinned) && !shadowCell) {
+        unreadyCells.push(bodyCell);
+        return;
+      }
+      this.updateCellPinnedPosition(renderInput, bodyCell, prevShadowThWidth, leafWidths, nextShadowThWidth);
+      if (isVisible && renderInput.pinned === 'left') {
+        // Use the parent row as the grouping key for per-row tracking
+        const parentRow = bodyCell.closest('vega-table-row');
+        if (parentRow) {
+          lastVisibleLeftPinnedBodyCells.set(parentRow, shadowCell);
+        }
+      }
+      if (isVisible && renderInput.pinned === 'right') {
+        const parentRow = bodyCell.closest('vega-table-row');
+        if (parentRow && !firstVisibleRightPinnedBodyCells.has(parentRow)) {
+          firstVisibleRightPinnedBodyCells.set(parentRow, shadowCell);
+        }
+        if (parentRow) {
+          lastVisibleRightPinnedBodyCells.set(parentRow, shadowCell);
+        }
+      }
     });
+    // Apply boundary divider to the last visible left-pinned cell when the static
+    // isLeftEndPinned column is hidden by breakpoint.
+    if (lastVisibleLeftPinnedHeadCell &&
+      !lastVisibleLeftPinnedHeadCell.classList.contains('right-divider')) {
+      // Check if the static boundary column is hidden — if leafWidths shows 0 for the
+      // isLeftEndPinned column, the boundary has shifted.
+      const leafRenderInputs = this.vegaTableRenderInputController.getLeafRenderInputs();
+      const staticBoundaryLeaf = leafRenderInputs.find((leaf) => leaf.isLeftEndPinned);
+      if (staticBoundaryLeaf && leafWidths[staticBoundaryLeaf.columnIndex] === 0) {
+        lastVisibleLeftPinnedHeadCell.classList.add('right-divider');
+        this.dynamicRightDividerCells.add(lastVisibleLeftPinnedHeadCell);
+        lastVisibleLeftPinnedBodyCells.forEach((cell) => {
+          // Only track cells that don't already hold `right-divider` from their
+          // static render (effectiveRenderInput.isLeftEndPinned). If we add a
+          // statically-classed cell here, the per-class clear on the next resize
+          // would erroneously remove the static class (VD-9540).
+          if (!cell.classList.contains('right-divider')) {
+            cell.classList.add('right-divider');
+            this.dynamicRightDividerCells.add(cell);
+          }
+        });
+      }
+    }
+    if (firstVisibleRightPinnedHeadCell &&
+      !firstVisibleRightPinnedHeadCell.classList.contains('left-divider')) {
+      const leafRenderInputs = this.vegaTableRenderInputController.getLeafRenderInputs();
+      const staticBoundaryLeaf = leafRenderInputs.find((leaf) => leaf.isRightStartPinned);
+      if (staticBoundaryLeaf && leafWidths[staticBoundaryLeaf.columnIndex] === 0) {
+        firstVisibleRightPinnedHeadCell.classList.add('left-divider');
+        this.dynamicLeftDividerCells.add(firstVisibleRightPinnedHeadCell);
+        firstVisibleRightPinnedBodyCells.forEach((cell) => {
+          // Only track cells that don't already hold `left-divider` from their
+          // static render (effectiveRenderInput.isRightStartPinned). If we add a
+          // statically-classed cell here, the per-class clear on the next resize
+          // would erroneously remove the static class (VD-9540).
+          if (!cell.classList.contains('left-divider')) {
+            cell.classList.add('left-divider');
+            this.dynamicLeftDividerCells.add(cell);
+          }
+        });
+      }
+    }
+    // Apply hide-right-border to the last visible right-pinned cell when the structural
+    // right-most column is hidden by breakpoint. Without this, the new right-most visible
+    // pinned column keeps a right border while the head cell suppresses it (head cells use
+    // isViewEnd), leaving an extra vertical border at the table's right edge (VD-9565).
+    if (lastVisibleRightPinnedHeadCell &&
+      !lastVisibleRightPinnedHeadCell.classList.contains('hide-right-border')) {
+      const leafRenderInputs = this.vegaTableRenderInputController.getLeafRenderInputs();
+      // The structural right-most column is the last right-pinned leaf. Leaf render
+      // inputs do not carry `isViewEnd` (unlike head render inputs), so identify the
+      // boundary via `pinned` order instead.
+      const rightPinnedLeaves = leafRenderInputs.filter((leaf) => leaf.pinned === 'right');
+      const structuralEndLeaf = rightPinnedLeaves[rightPinnedLeaves.length - 1];
+      if (structuralEndLeaf && leafWidths[structuralEndLeaf.columnIndex] === 0) {
+        lastVisibleRightPinnedHeadCell.classList.add('hide-right-border');
+        this.dynamicHideRightBorderCells.add(lastVisibleRightPinnedHeadCell);
+        lastVisibleRightPinnedBodyCells.forEach((cell) => {
+          // Only track cells that don't already hold `hide-right-border` from their
+          // static render (isViewEnd/isNoPinnedEnd). Adding a statically-classed cell
+          // here would let the per-class clear erroneously strip the static class on
+          // the next resize (mirrors the VD-9540 divider guard).
+          if (!cell.classList.contains('hide-right-border')) {
+            cell.classList.add('hide-right-border');
+            this.dynamicHideRightBorderCells.add(cell);
+          }
+        });
+      }
+    }
+    // Sync colspan on pinned body cells that span breakpoint-hidden columns.
+    // Chrome does not honour visibility:collapse / display:none on <col> for table layout,
+    // so we directly adjust the shadow <td> colspan attribute to exclude hidden columns (VD-9540).
+    this.syncColspanForHiddenColumns(leafWidths, pinnedColumnBodyCellRenderInputMap);
+    return unreadyCells;
   }
   getRowShadowThWidths() {
     const row = this.host.shadowRoot.querySelector('vega-table-head-row');
@@ -3360,6 +3782,33 @@ class VegaTablePinnedRenderer extends globalSlimmerRegistry.VegaSlimmer {
       }
     });
   }
+  syncColspanForHiddenColumns(leafWidths, pinnedColumnBodyCellRenderInputMap) {
+    // NOTE: renderInput.colSpan is null for flat (non-group) tables — it only holds a value for
+    // group-column subtree spans. We read the original colspan from the component prop (bodyCell.colSpan)
+    // which is always the rendered value, unaffected by our shadow-DOM attribute writes.
+    //
+    // Skip when ALL leaf widths are 0 — that means the table is running in jsdom / an off-screen
+    // context where getBoundingClientRect() always returns 0. Adjusting in that state would
+    // incorrectly reduce every colspan to 1 (no visible columns = Math.max(1,0)=1).
+    if (leafWidths.every((w) => w === 0))
+      return;
+    pinnedColumnBodyCellRenderInputMap.forEach((renderInput, bodyCell) => {
+      var _a;
+      const originalColspan = bodyCell.colSpan || 1;
+      if (originalColspan <= 1)
+        return;
+      /* istanbul ignore next -- defensive null-guard: jsdom always provides shadowRoot */
+      const shadowTd = (_a = bodyCell.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('td');
+      /* 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));
+    });
+  }
   updateCellPinnedPosition(renderInput, headCell, prevShadowThWidth, leafWidths, nextShadowThWidth) {
     if (['left', 'right'].includes(renderInput.pinned)) {
       const shadowCell = headCell.shadowRoot.querySelector('th, td');
@@ -3371,10 +3820,17 @@ class VegaTablePinnedRenderer extends globalSlimmerRegistry.VegaSlimmer {
         this.updatePinnedPosition(shadowCell, 'left', position);
       }
       if (renderInput.pinned === 'right') {
-        const colSpan = typeGuard.isNonNullable(renderInput.colSpan) ? renderInput.colSpan : 1;
+        // renderInput.colSpan is null for flat (non-group) tables — it only carries a value
+        // for group-column subtree spans (multi-level headers). For body cells with an HTML
+        // 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 position = nextShadowThWidth +
           leafWidths
-            .slice(renderInput.columnIndex + (colSpan - 1) + 1)
+            .slice(renderInput.columnIndex + colSpan)
             .reduce((count, colWidth) => count + colWidth, 0);
         this.updatePinnedPosition(shadowCell, 'right', position);
       }
@@ -3429,6 +3885,15 @@ class VegaTablePinnedRenderer extends globalSlimmerRegistry.VegaSlimmer {
         cell.style.width = '';
       }
     });
+    // Remove boundary classes only from cells where they were dynamically added
+    // (breakpoint-shifted boundaries). Static boundary classes from renderInput are
+    // re-applied by the cell's own render cycle.
+    this.dynamicRightDividerCells.forEach((cell) => cell.classList.remove('right-divider'));
+    this.dynamicRightDividerCells.clear();
+    this.dynamicLeftDividerCells.forEach((cell) => cell.classList.remove('left-divider'));
+    this.dynamicLeftDividerCells.clear();
+    this.dynamicHideRightBorderCells.forEach((cell) => cell.classList.remove('hide-right-border'));
+    this.dynamicHideRightBorderCells.clear();
     this.previouslyStyledCells.clear();
   }
   updatePinnedPosition(cell, type, position) {
@@ -4099,7 +4564,7 @@ __decorate$A([
   globalSlimmerRegistry.MapToComponentMethod('watchRowDraggable')
 ], VegaTableRowDraggableController.prototype, "watchRowDraggable", 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}@media (min-width: 320px){col.S\\:v-table-column{display:table-column}}@media (min-width: 768px){col.M\\:v-table-column{display:table-column}}@media (min-width: 1024px){col.L\\:v-table-column{display:table-column}}@media (min-width: 1440px){col.XL\\:v-table-column{display:table-column}}: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}";
+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 c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -4141,6 +4606,7 @@ const VegaTable = class {
     this.vegaTableBodyRenderer = new VegaTableBodyRenderer();
     this.vegaTableRowRenderer = new VegaTableRowRenderer$1();
     this.vegaTableCellRenderer = new VegaTableCellRenderer();
+    this.vegaTableBodyColSpanController = new VegaTableBodyColSpanController();
     this.vegaTablePaginationRenderer = new VegaTablePaginationRenderer();
     this.vegaTableScrollContainerRenderer = new VegaTableScrollContainerRenderer();
     this.vegaTableRowSelectionController = new VegaTableRowSelectionController$1();
@@ -4637,6 +5103,9 @@ __decorate$z([
 __decorate$z([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableCellRenderer", void 0);
+__decorate$z([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableBodyColSpanController", void 0);
 __decorate$z([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTablePaginationRenderer", void 0);
@@ -5043,7 +5512,7 @@ const VegaTableCell = class {
     };
   }
   render() {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f;
     const responsiveClass = generateResponsiveClass(this.breakpoint, 'v-table-cell');
     const columnAlignClass = generateTextAlignClass(this.textAlign);
     const overflowClass = this.getCellOverflowClass();
@@ -5057,7 +5526,7 @@ const VegaTableCell = class {
     if ((_b = this.renderInput) === null || _b === void 0 ? void 0 : _b.isLeftEndPinned) {
       columnClasses.push('right-divider');
     }
-    if ((_c = this.renderInput) === null || _c === void 0 ? void 0 : _c.isNoPinnedEnd) {
+    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([
@@ -5068,7 +5537,7 @@ const VegaTableCell = class {
         this.checked && 'checked',
         this.striped && 'striped',
         this.expanded && 'expanded',
-      ]) }, index.h("td", { class: ui.arrayToClassString(columnClasses), part: "cell",
+      ]), "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,
       /* eslint-disable-next-line react/jsx-no-bind */
       onMouseEnter: this.onMouseEnter.bind(this),
       /* eslint-disable-next-line react/jsx-no-bind */
@@ -5379,13 +5848,22 @@ class VegaTableExpandRowColSpanController extends globalSlimmerRegistry.VegaSlim
     const cells = isTemplateRenderMode
       ? table.querySelectorAll('vega-table-row:nth-of-type(1) vega-table-cell')
       : table.shadowRoot.querySelectorAll('vega-table-row:nth-of-type(1) vega-table-cell');
-    return Array.from(cells).filter((cell) => {
+    return Array.from(cells)
+      .filter((cell) => {
       if (!cell.breakpoint)
         return true;
       if (currentBreakpoint === 'default')
         return false;
       return breakpoints$1.Breakpoints[currentBreakpoint] >= breakpoints$1.Breakpoints[cell.breakpoint];
-    }).length;
+    })
+      .reduce((total, cell) => {
+      var _a;
+      // A cell with `colSpan >= 2` is a single element that occupies multiple physical
+      // columns, so add its span rather than 1. This keeps the expand-row colspan aligned
+      // with the full table width when body cells merge columns.
+      const span = (_a = cell.colSpan) !== null && _a !== void 0 ? _a : 1;
+      return total + (span > 1 ? span : 1);
+    }, 0);
   }
 }
 __decorate$p([
@@ -5659,11 +6137,12 @@ var __decorate$k = (undefined && undefined.__decorate) || function (decorators,
 };
 class VegaTableFootCellRenderer extends globalSlimmerRegistry.VegaSlimmer {
   render() {
+    var _a;
     return (index.h("td", { class: {
         '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]) },
         index.h("span", { class: "vega-table-column-label" },
           index.h("slot", null)))));
@@ -5678,6 +6157,9 @@ __decorate$k([
 __decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableFootCellRenderer.prototype, "textAlign", void 0);
+__decorate$k([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableFootCellRenderer.prototype, "colSpan", 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}";
 
@@ -5702,10 +6184,11 @@ const VegaTableFootCell = class {
     this.currentBreakpoint = breakpoints.getCurrentBreakpoint();
   }
   render() {
+    var _a;
     return component.sanitizeVegaComponent(index.h(index.Host, { class: {
         [`density-${responsiveFormatFacade.ResponsiveFormatFacade.formatCustom(this.density)}`]: true,
         'column-divider': this.columnDivider,
-      }, style: { width: this.width } }, this.vegaTableFootCellRenderer.render()), this.host);
+      }, 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);
   }
   get host() { return index.getElement(this); }
 };