@globalpayments/vega 2.91.0 → 2.93.0

package/dist/collection/components/vega-table/slimmers/renderers/vega-table-pinned-renderer.js

@@ -28,6 +28,12 @@ export class VegaTablePinnedRenderer extends 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(1);
   }
   componentDidLoad() {
@@ -36,7 +42,17 @@ export class VegaTablePinnedRenderer extends 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({
@@ -48,24 +64,165 @@ export class VegaTablePinnedRenderer extends 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');
@@ -102,6 +259,33 @@ export class VegaTablePinnedRenderer extends 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');
@@ -113,10 +297,17 @@ export class VegaTablePinnedRenderer extends VegaSlimmer {
         this.updatePinnedPosition(shadowCell, 'left', position);
       }
       if (renderInput.pinned === 'right') {
-        const colSpan = 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 = 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);
       }
@@ -171,6 +362,15 @@ export class VegaTablePinnedRenderer extends 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) {

package/dist/collection/components/vega-table/slimmers/renderers/vega-table-row-renderer.js

@@ -15,6 +15,18 @@ export class VegaTableRowRenderer extends VegaSlimmer {
     this.renderTableRowComponent = (rowProps) => {
       const { rowKey, index, 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, 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, colSpanResult));
+      });
       return (h("vega-table-row", { class: {
           'v-hidden': !isVisibleInCurrentPage,
         }, key: `vega-table-row-${rowKey}`, rowKey: rowKey, 
@@ -23,9 +35,7 @@ export class VegaTableRowRenderer extends VegaSlimmer {
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
             this.rowClickEventEmitter.emit({ record: record, index: index });
           });
-        }, striped: this.striped && index % 2 === 1, rowDivider: this.rowDivider && !rowProps.isLastRow }, renderInputs.map((renderInput) => {
-        return this.vegaTableCellRenderer.render(renderInput, record, index);
-      })));
+        }, striped: this.striped && index % 2 === 1, rowDivider: this.rowDivider && !rowProps.isLastRow }, cells));
     };
   }
   render(rowProps, editable) {
@@ -42,6 +52,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableRowRenderer.prototype, "vegaTableCellRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRowRenderer.prototype, "vegaTableBodyColSpanController", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableRowRenderer.prototype, "striped", void 0);

package/dist/collection/components/vega-table/vega-table-cell/vega-table-cell.js

@@ -40,7 +40,7 @@ export class VegaTableCell {
     };
   }
   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();
@@ -54,7 +54,7 @@ export class VegaTableCell {
     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 sanitizeVegaComponent(h(Host, { class: arrayToClassString([
@@ -65,8 +65,8 @@ export class VegaTableCell {
         this.checked && 'checked',
         this.striped && 'striped',
         this.expanded && 'expanded',
-      ]) },
-      h("td", { class: arrayToClassString(columnClasses), part: "cell", 
+      ]), "aria-colspan": ((_e = this.colSpan) !== null && _e !== void 0 ? _e : 0) > 1 ? String(this.colSpan) : null },
+      h("td", { class: 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 */
@@ -175,6 +175,26 @@ export class VegaTableCell {
       },
       "attribute": "width",
       "reflect": false
+    },
+    "colSpan": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.93.0"
+          }],
+        "text": "Number of columns this cell should span horizontally.\nValues of `undefined`, `null`, and `1` are treated as no spanning.\nWhen the effective span is `>= 2`, a `colspan` attribute is set on the inner `<td>`\nand `aria-colspan` is exposed on the host element for assistive technology."
+      },
+      "attribute": "col-span",
+      "reflect": false
     }
   }; }
   static get states() { return {

package/dist/collection/components/vega-table/vega-table-expand-row/slimmers/controllers/vega-table-expand-row-col-span-controller.js

@@ -65,13 +65,22 @@ export class VegaTableExpandRowColSpanController extends VegaSlimmer {
     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[currentBreakpoint] >= 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([

package/dist/collection/components/vega-table/vega-table-foot-cell/slimmers/renderers/vega-table-foot-cell-renderer.js

@@ -11,11 +11,12 @@ import { generateResponsiveClass } from '../../../utils';
 import { arrayToClassString } from '../../../../../utils/ui';
 export class VegaTableFootCellRenderer extends VegaSlimmer {
   render() {
+    var _a;
     return (h("td", { class: {
         'vega-table-cell': true,
         'break-word': !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 },
       h("div", { class: arrayToClassString(['vega-table-column', this.textAlign]) },
         h("span", { class: "vega-table-column-label" },
           h("slot", null)))));
@@ -30,3 +31,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableFootCellRenderer.prototype, "textAlign", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableFootCellRenderer.prototype, "colSpan", void 0);

package/dist/collection/components/vega-table/vega-table-foot-cell/vega-table-foot-cell.js

@@ -26,10 +26,11 @@ export class VegaTableFootCell {
     this.currentBreakpoint = getCurrentBreakpoint();
   }
   render() {
+    var _a;
     return sanitizeVegaComponent(h(Host, { class: {
         [`density-${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);
   }
   static get is() { return "vega-table-foot-cell"; }
   static get encapsulation() { return "shadow"; }
@@ -104,6 +105,26 @@ export class VegaTableFootCell {
       },
       "attribute": "width",
       "reflect": false
+    },
+    "colSpan": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.93.0"
+          }],
+        "text": "Number of columns this foot cell should span horizontally.\nValues of `undefined`, `null`, and `1` are treated as no spanning.\nWhen the effective span is `>= 2`, a `colspan` attribute is set on the inner `<td>`\nand `aria-colspan` is exposed on the host element for assistive technology."
+      },
+      "attribute": "col-span",
+      "reflect": false
     }
   }; }
   static get states() { return {

package/dist/collection/components/vega-table/vega-table.css

@@ -102,25 +102,30 @@ table:not(.show-edit-error) *::part(field-error-message) {
 
 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;
   }
 }
 

package/dist/collection/components/vega-table/vega-table.js

@@ -8,6 +8,7 @@ import { Component, Element, Prop, State, Event, Watch, Method, h } from '@stenc
 import { ImmutableSet } from '../../helpers/immutable/immutable-set';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, slotPlaceholder, } from 'vega-slimmer/core';
 import { VegaTableCellRenderer } from './slimmers/renderers/vega-table-cell-renderer';
+import { VegaTableBodyColSpanController } from './slimmers/controllers/vega-table-body-col-span-controller';
 import { VegaTableExpandRowController } from './slimmers/controllers/vega-table-expand-row-controller';
 import { VegaTableRowSelectionController } from './slimmers/controllers/vega-table-row-selection-controller';
 import { VegaTableDataSourceController } from './slimmers/controllers/vega-table-data-source-controller';
@@ -53,6 +54,7 @@ export class VegaTable {
     this.vegaTableBodyRenderer = new VegaTableBodyRenderer();
     this.vegaTableRowRenderer = new VegaTableRowRenderer();
     this.vegaTableCellRenderer = new VegaTableCellRenderer();
+    this.vegaTableBodyColSpanController = new VegaTableBodyColSpanController();
     this.vegaTablePaginationRenderer = new VegaTablePaginationRenderer();
     this.vegaTableScrollContainerRenderer = new VegaTableScrollContainerRenderer();
     this.vegaTableRowSelectionController = new VegaTableRowSelectionController();
@@ -1950,6 +1952,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableCellRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableBodyColSpanController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTablePaginationRenderer", void 0);

package/dist/collection/components/vega-text/vega-text.js

@@ -13,7 +13,7 @@ import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/
  */
 /**
  * This is an internal used component and shouldn't be used by client,
- *    it doesn't show up in storybook either.
+ *    it is not part of the public component surface.
  */
 export class VegaText {
   constructor() {

package/dist/collection/components/vega-textarea/vega-textarea.js

@@ -290,9 +290,7 @@ export class VegaTextarea {
     if (this.textareaRef.value !== this.value) {
       this.textareaRef.value = this.value;
     }
-    if (value) {
-      this.currentCharCount = value.length;
-    }
+    this.currentCharCount = value.length;
     ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
       host: this.host,
       detail: value,
@@ -436,7 +434,7 @@ export class VegaTextarea {
       "mutable": false,
       "complexType": {
         "original": "Nullable<LabelSuffixButtonConfig>",
-        "resolved": "{ icon: string; } & Partial<Pick<HTMLVegaTooltipElement, \"size\" | \"trigger\" | \"minWidth\" | \"maxWidth\" | \"text\" | \"placement\" | \"alignment\">>",
+        "resolved": "{ icon: string; buttonSize?: VegaButtonCircleSize; centerAlign?: boolean; } & Partial<Pick<HTMLVegaTooltipElement, \"size\" | \"trigger\" | \"minWidth\" | \"maxWidth\" | \"text\" | \"placement\" | \"alignment\">>",
         "references": {
           "Nullable": {
             "location": "import",

package/dist/collection/components/vega-time-picker/slimmers/controllers/vega-time-picker-range-dropdown-controller.js

@@ -29,6 +29,7 @@ export class VegaTimePickerRangeDropdownController extends ElementAppenderSlimme
         translocation: { X: 0, Y: 8 },
         placement: ['bottom', 'top'],
         matchTargetWidth: true,
+        isScreenPosition: this.vegaDropdownProps.isScreenPosition,
       };
     }, () => new ClickOutsideOnlyToDismissStrategy(), 'isRangeDropdownShow');
     this.isRangeDropdownShow = false;
@@ -74,6 +75,9 @@ export class VegaTimePickerRangeDropdownController extends ElementAppenderSlimme
 __decorate([
   MapToComponentField()
 ], VegaTimePickerRangeDropdownController.prototype, "positionRelativeTo", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTimePickerRangeDropdownController.prototype, "vegaDropdownProps", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTimePickerRangeDropdownController.prototype, "mode", void 0);

package/dist/collection/components/vega-time-picker/slimmers/controllers/vega-time-picker-single-dropdown-controller.js

@@ -24,6 +24,7 @@ export class VegaTimePickerSingleDropdownController extends ElementAppenderSlimm
       positionRelativeTo: this.positionRelativeTo,
       translocation: { X: 0, Y: 8 },
       placement: ['bottom', 'top'],
+      isScreenPosition: this.vegaDropdownProps.isScreenPosition,
     }), () => new ClickOutsideOnlyToDismissStrategy());
   }
   /**
@@ -126,6 +127,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTimePickerSingleDropdownController.prototype, "positionRelativeTo", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTimePickerSingleDropdownController.prototype, "vegaDropdownProps", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTimePickerSingleDropdownController.prototype, "selectedTimeValue", void 0);

package/dist/collection/components/vega-time-picker/vega-time-picker.js

@@ -214,6 +214,15 @@ export class VegaTimePicker {
      * @vegaVersion 1.12.0
      */
     this.validationRules = [];
+    /**
+     * Provides partial dropdown positioning properties for the time picker.
+     *
+     * Set `isScreenPosition: true` to position the dropdown relative to
+     *    the viewport.
+     *
+     * @vegaVersion 2.93.0
+     */
+    this.vegaDropdownProps = {};
   }
   /**
    * The below method is e2e-test covered in
@@ -250,6 +259,9 @@ export class VegaTimePicker {
   watchValidationRules() {
     methodPlaceholder();
   }
+  watchVegaDropdownProps() {
+    methodPlaceholder();
+  }
   componentWillLoad() {
     methodPlaceholder();
   }
@@ -651,6 +663,30 @@ export class VegaTimePicker {
       },
       "attribute": "position-relative-to",
       "reflect": false
+    },
+    "vegaDropdownProps": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaDropdownPropsForTimePicker",
+        "resolved": "{ isScreenPosition?: boolean; }",
+        "references": {
+          "VegaDropdownPropsForTimePicker": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.93.0"
+          }],
+        "text": "Provides partial dropdown positioning properties for the time picker.\n\nSet `isScreenPosition: true` to position the dropdown relative to\n   the viewport."
+      },
+      "defaultValue": "{}"
     }
   }; }
   static get states() { return {
@@ -723,6 +759,9 @@ export class VegaTimePicker {
     }, {
       "propName": "validationRules",
       "methodName": "watchValidationRules"
+    }, {
+      "propName": "vegaDropdownProps",
+      "methodName": "watchVegaDropdownProps"
     }]; }
 }
 __decorate([

package/dist/collection/constants/ui.js

@@ -108,6 +108,7 @@ export const VegaNativeEventName = [
   'eventEdit',
   'todayClick',
   'additionalLinkClick',
+  'dropdownSelectAllClick',
 ];
 // eslint-disable-next-line @typescript-eslint/typedef
 export const CssStates = ['default', 'hover', 'active', 'focus-visible'];