@sebgroup/green-core 3.8.1 → 3.10.0

package/components/table/table.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.CAV4X6PU.js";
-var _cache, _cacheDuration, _Density, Density_get, _hasSelection, hasSelection_get, _isAllSelected, isAllSelected_get, _isPartialSelection, isPartialSelection_get, _getCacheKey, getCacheKey_fn, _isCacheValid, isCacheValid_fn, _loadData, loadData_fn, _getRowKey, getRowKey_fn, _renderCellWrapped, renderCellWrapped_fn, _renderMobileLabel, renderMobileLabel_fn, _renderSlotElement, renderSlotElement_fn, _renderCellContent, renderCellContent_fn, _renderSortIcon, renderSortIcon_fn, _hasHeaderContent, hasHeaderContent_fn, _renderHeaderControls, renderHeaderControls_fn, _renderColumnHeader, renderColumnHeader_fn, _renderActionsHeader, renderActionsHeader_fn, _renderSelectableHeader, renderSelectableHeader_fn, _renderColumnHeaders, renderColumnHeaders_fn, _renderTableHeader, renderTableHeader_fn, _renderTableCell, renderTableCell_fn, _renderSelectableCell, renderSelectableCell_fn, _renderRowCells, renderRowCells_fn, _renderActionsCell, renderActionsCell_fn, _renderTableRow, renderTableRow_fn, _renderCheckbox, renderCheckbox_fn, _renderSkeletonCell, renderSkeletonCell_fn, _renderSkeletonRow, renderSkeletonRow_fn, _renderTableBody, renderTableBody_fn, _renderTableFoot, renderTableFoot_fn, _renderTable, renderTable_fn, _renderErrorState, renderErrorState_fn, _renderEmptyState, renderEmptyState_fn, _renderFooter, renderFooter_fn, _renderHeadline, renderHeadline_fn, _handleSearch, handleSearch_fn, _handleSearchClear, handleSearchClear_fn, _handleSort, handleSort_fn, _handlePageChange, handlePageChange_fn, _handlePageSizeChange, handlePageSizeChange_fn, _handleColumnVisibility, handleColumnVisibility_fn, _handleSelectAll, handleSelectAll_fn, _handleRowSelect, handleRowSelect_fn, _selectAllInternal, selectAllInternal_fn, _clearSelectionInternal, clearSelectionInternal_fn, _emitSelectionChange, emitSelectionChange_fn, _initializeScrollTracking, initializeScrollTracking_fn, _updateVerticalScrollState, updateVerticalScrollState_fn, _updateHorizontalScrollState, updateHorizontalScrollState_fn;
+var _cache, _cacheDuration, _isResponsiveStacked, isResponsiveStacked_get, _isExpandableEnabled, isExpandableEnabled_get, _isSelectableEnabled, isSelectableEnabled_get, _Density, Density_get, _expandTransitionTimers, _expandedLoadingExitDuration, _hasSelection, hasSelection_get, _isAllSelected, isAllSelected_get, _isPartialSelection, isPartialSelection_get, _expandableIndices, expandableIndices_get, _isAllExpanded, isAllExpanded_get, _getCacheKey, getCacheKey_fn, _clearExpansionTransitionTimer, clearExpansionTransitionTimer_fn, _clearExpansionLoadingState, clearExpansionLoadingState_fn, _clearAllExpansionLoadingStates, clearAllExpansionLoadingStates_fn, _scheduleExpansionContentReveal, scheduleExpansionContentReveal_fn, _isCacheValid, isCacheValid_fn, _loadData, loadData_fn, _getStickyBorderKeys, getStickyBorderKeys_fn, _updateStickyOffsets, updateStickyOffsets_fn, _getRowKey, getRowKey_fn, _renderCellWrapped, renderCellWrapped_fn, _renderMobileLabel, renderMobileLabel_fn, _renderSlotElement, renderSlotElement_fn, _renderCellContent, renderCellContent_fn, _renderSortIcon, renderSortIcon_fn, _hasHeaderContent, hasHeaderContent_fn, _renderHeaderControls, renderHeaderControls_fn, _renderColumnHeader, renderColumnHeader_fn, _renderSelectableHeader, renderSelectableHeader_fn, _renderExpandableHeader, renderExpandableHeader_fn, _getRowSubRowsSource, getRowSubRowsSource_fn, _getRowFullContentSource, getRowFullContentSource_fn, _getExpandedRows, getExpandedRows_fn, _hasAsyncSubRows, hasAsyncSubRows_fn, _hasAsyncFullContent, hasAsyncFullContent_fn, _getSubRowCount, getSubRowCount_fn, _hasExpandedFullSlot, hasExpandedFullSlot_fn, _hasExpandedFullContent, hasExpandedFullContent_fn, _isRowExpandable, isRowExpandable_fn, _getExpandedGroupId, getExpandedGroupId_fn, _getRenderedColumnCount, getRenderedColumnCount_fn, _renderColumnHeaders, renderColumnHeaders_fn, _renderTableHeader, renderTableHeader_fn, _renderTableCell, renderTableCell_fn, _renderExpandableCell, renderExpandableCell_fn, _renderSelectableCell, renderSelectableCell_fn, _renderRowCells, renderRowCells_fn, _renderFullWidthDetailsRow, renderFullWidthDetailsRow_fn, _renderExpandedLoadingRow, renderExpandedLoadingRow_fn, _renderExpandedLoadingRows, renderExpandedLoadingRows_fn, _renderExpandedFullLoadingRow, renderExpandedFullLoadingRow_fn, _getExpandedChildRowClasses, getExpandedChildRowClasses_fn, _getTableRowClasses, getTableRowClasses_fn, _getRowAriaExpanded, getRowAriaExpanded_fn, _getTableRowPresentation, getTableRowPresentation_fn, _renderExpandedChildRow, renderExpandedChildRow_fn, _getRowExpansionLoadingKind, getRowExpansionLoadingKind_fn, _getRowExpansionState, getRowExpansionState_fn, _renderExpandedRowContent, renderExpandedRowContent_fn, _renderTableRow, renderTableRow_fn, _renderCheckbox, renderCheckbox_fn, _renderSkeletonCell, renderSkeletonCell_fn, _renderSkeletonRow, renderSkeletonRow_fn, _renderTableBody, renderTableBody_fn, _renderTableFoot, renderTableFoot_fn, _renderTable, renderTable_fn, _renderErrorState, renderErrorState_fn, _renderEmptyState, renderEmptyState_fn, _renderFooter, renderFooter_fn, _renderHeadline, renderHeadline_fn, _handleSearch, handleSearch_fn, _handleSearchClear, handleSearchClear_fn, _handleSort, handleSort_fn, _handlePageChange, handlePageChange_fn, _handlePageSizeChange, handlePageSizeChange_fn, _handleColumnVisibility, handleColumnVisibility_fn, _handleSelectAll, handleSelectAll_fn, _handleRowSelect, handleRowSelect_fn, _handleExpandToggle, handleExpandToggle_fn, _handleExpandAll, handleExpandAll_fn, _emitExpandChange, emitExpandChange_fn, _resolveExpandedContent, resolveExpandedContent_fn, _setRowExpanded, setRowExpanded_fn, _selectAllInternal, selectAllInternal_fn, _clearSelectionInternal, clearSelectionInternal_fn, _emitSelectionChange, emitSelectionChange_fn, _initializeScrollTracking, initializeScrollTracking_fn, _updateVerticalScrollState, updateVerticalScrollState_fn, _updateHorizontalScrollState, updateHorizontalScrollState_fn;
 import { localized, msg } from "@lit/localize";
 import { property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
@@ -26,6 +26,9 @@ import * as Types from "./table.types.js";
 let GdsTable = class extends GdsElement {
   constructor() {
     super(...arguments);
+    __privateAdd(this, _isResponsiveStacked);
+    __privateAdd(this, _isExpandableEnabled);
+    __privateAdd(this, _isSelectableEnabled);
     /**
      * Get the current density configuration
      */
@@ -33,9 +36,26 @@ let GdsTable = class extends GdsElement {
     __privateAdd(this, _hasSelection);
     __privateAdd(this, _isAllSelected);
     __privateAdd(this, _isPartialSelection);
+    __privateAdd(this, _expandableIndices);
+    __privateAdd(this, _isAllExpanded);
     __privateAdd(this, _getCacheKey);
+    __privateAdd(this, _clearExpansionTransitionTimer);
+    __privateAdd(this, _clearExpansionLoadingState);
+    __privateAdd(this, _clearAllExpansionLoadingStates);
+    __privateAdd(this, _scheduleExpansionContentReveal);
     __privateAdd(this, _isCacheValid);
     __privateAdd(this, _loadData);
+    /**
+     * Returns the column keys for the rightmost sticky-left and leftmost sticky-right
+     * visible columns — these are the ones that get the divider border.
+     */
+    __privateAdd(this, _getStickyBorderKeys);
+    /**
+     * Measures built-in and user-defined sticky column widths from the DOM
+     * and applies matching left/right inline styles to every cell in each
+     * sticky column. Uses offsetWidth (layout-relative, scroll-independent).
+     */
+    __privateAdd(this, _updateStickyOffsets);
     /**
      * Gets the unique key for slot naming (prioritizes: custom key > row.id > index)
      */
@@ -59,14 +79,38 @@ let GdsTable = class extends GdsElement {
     __privateAdd(this, _hasHeaderContent);
     __privateAdd(this, _renderHeaderControls);
     __privateAdd(this, _renderColumnHeader);
-    __privateAdd(this, _renderActionsHeader);
     __privateAdd(this, _renderSelectableHeader);
+    __privateAdd(this, _renderExpandableHeader);
+    __privateAdd(this, _getRowSubRowsSource);
+    __privateAdd(this, _getRowFullContentSource);
+    __privateAdd(this, _getExpandedRows);
+    __privateAdd(this, _hasAsyncSubRows);
+    __privateAdd(this, _hasAsyncFullContent);
+    __privateAdd(this, _getSubRowCount);
+    __privateAdd(this, _hasExpandedFullSlot);
+    __privateAdd(this, _hasExpandedFullContent);
+    __privateAdd(this, _isRowExpandable);
+    __privateAdd(this, _getExpandedGroupId);
+    __privateAdd(this, _getRenderedColumnCount);
     __privateAdd(this, _renderColumnHeaders);
     __privateAdd(this, _renderTableHeader);
     __privateAdd(this, _renderTableCell);
+    __privateAdd(this, _renderExpandableCell);
     __privateAdd(this, _renderSelectableCell);
     __privateAdd(this, _renderRowCells);
-    __privateAdd(this, _renderActionsCell);
+    __privateAdd(this, _renderFullWidthDetailsRow);
+    __privateAdd(this, _renderExpandedLoadingRow);
+    __privateAdd(this, _renderExpandedLoadingRows);
+    __privateAdd(this, _renderExpandedFullLoadingRow);
+    __privateAdd(this, _getExpandedChildRowClasses);
+    __privateAdd(this, _getTableRowClasses);
+    __privateAdd(this, _getRowAriaExpanded);
+    __privateAdd(this, _getTableRowPresentation);
+    __privateAdd(this, _renderExpandedChildRow);
+    __privateAdd(this, _getRowExpansionLoadingKind);
+    __privateAdd(this, _getRowExpansionState);
+    __privateAdd(this, _renderExpandedRowContent);
+    /* Main Table Row · Render */
     __privateAdd(this, _renderTableRow);
     __privateAdd(this, _renderCheckbox);
     __privateAdd(this, _renderSkeletonCell);
@@ -116,6 +160,11 @@ let GdsTable = class extends GdsElement {
      * Handles individual row selection change
      */
     __privateAdd(this, _handleRowSelect);
+    __privateAdd(this, _handleExpandToggle);
+    __privateAdd(this, _handleExpandAll);
+    __privateAdd(this, _emitExpandChange);
+    __privateAdd(this, _resolveExpandedContent);
+    __privateAdd(this, _setRowExpanded);
     /**
      * Internal method to select all rows
      */
@@ -174,7 +223,14 @@ let GdsTable = class extends GdsElement {
     this._rowsState = [];
     this._total = 0;
     this._selected = /* @__PURE__ */ new Set();
+    this._expanded = /* @__PURE__ */ new Set();
+    this._expanding = /* @__PURE__ */ new Set();
+    this._completingExpansion = /* @__PURE__ */ new Set();
+    this._expandedRowsCache = /* @__PURE__ */ new Map();
+    this._expandedFullContentResolved = /* @__PURE__ */ new Set();
     this._error = null;
+    __privateAdd(this, _expandTransitionTimers, /* @__PURE__ */ new Map());
+    __privateAdd(this, _expandedLoadingExitDuration, 140);
   }
   _handleMobile(matches) {
     this._isMobile = matches;
@@ -206,8 +262,13 @@ let GdsTable = class extends GdsElement {
     super.connectedCallback();
     this.updateComplete.then(() => {
       __privateMethod(this, _initializeScrollTracking, initializeScrollTracking_fn).call(this);
+      __privateMethod(this, _updateStickyOffsets, updateStickyOffsets_fn).call(this);
     });
   }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    __privateMethod(this, _updateStickyOffsets, updateStickyOffsets_fn).call(this);
+  }
   render() {
     const classes = {
       table: true,
@@ -270,13 +331,55 @@ let GdsTable = class extends GdsElement {
       data: indices.map((i) => this._rowsState[i])
     };
   }
+  /**
+   * Expand a specific row by index.
+   */
+  async expandRow(index) {
+    return __privateMethod(this, _setRowExpanded, setRowExpanded_fn).call(this, index, true);
+  }
+  /**
+   * Collapse a specific row by index.
+   */
+  collapseRow(index) {
+    void __privateMethod(this, _setRowExpanded, setRowExpanded_fn).call(this, index, false);
+    return true;
+  }
+  /**
+   * Toggle expanded state for a specific row by index.
+   */
+  async toggleRowExpansion(index, rowOverride) {
+    if (index < 0 || index >= this._rowsState.length)
+      return false;
+    const nextExpanded = !this._expanded.has(index);
+    return __privateMethod(this, _setRowExpanded, setRowExpanded_fn).call(this, index, nextExpanded, rowOverride);
+  }
+  /**
+   * Get currently expanded row indices.
+   */
+  getExpandedIndices() {
+    return Array.from(this._expanded);
+  }
 };
 _cache = new WeakMap();
 _cacheDuration = new WeakMap();
+_isResponsiveStacked = new WeakSet();
+isResponsiveStacked_get = function() {
+  return this.responsive && this._isMobile;
+};
+_isExpandableEnabled = new WeakSet();
+isExpandableEnabled_get = function() {
+  return !__privateGet(this, _isResponsiveStacked, isResponsiveStacked_get) && __privateGet(this, _expandableIndices, expandableIndices_get).length > 0;
+};
+_isSelectableEnabled = new WeakSet();
+isSelectableEnabled_get = function() {
+  return this.selectable && !__privateGet(this, _isResponsiveStacked, isResponsiveStacked_get);
+};
 _Density = new WeakSet();
 Density_get = function() {
   return Types.DENSITY_CONFIG[this.density];
 };
+_expandTransitionTimers = new WeakMap();
+_expandedLoadingExitDuration = new WeakMap();
 _hasSelection = new WeakSet();
 hasSelection_get = function() {
   return this._selected.size > 0;
@@ -289,6 +392,15 @@ _isPartialSelection = new WeakSet();
 isPartialSelection_get = function() {
   return __privateGet(this, _hasSelection, hasSelection_get) && !__privateGet(this, _isAllSelected, isAllSelected_get);
 };
+_expandableIndices = new WeakSet();
+expandableIndices_get = function() {
+  return this._rowsState.map((row, i) => __privateMethod(this, _isRowExpandable, isRowExpandable_fn).call(this, row, i) ? i : -1).filter((i) => i !== -1);
+};
+_isAllExpanded = new WeakSet();
+isAllExpanded_get = function() {
+  const expandable = __privateGet(this, _expandableIndices, expandableIndices_get);
+  return expandable.length > 0 && expandable.every((i) => this._expanded.has(i));
+};
 _getCacheKey = new WeakSet();
 getCacheKey_fn = function() {
   return JSON.stringify({
@@ -299,6 +411,48 @@ getCacheKey_fn = function() {
     searchQuery: this._view.searchQuery
   });
 };
+_clearExpansionTransitionTimer = new WeakSet();
+clearExpansionTransitionTimer_fn = function(index) {
+  const timer = __privateGet(this, _expandTransitionTimers).get(index);
+  if (timer === void 0)
+    return;
+  window.clearTimeout(timer);
+  __privateGet(this, _expandTransitionTimers).delete(index);
+};
+_clearExpansionLoadingState = new WeakSet();
+clearExpansionLoadingState_fn = function(index) {
+  __privateMethod(this, _clearExpansionTransitionTimer, clearExpansionTransitionTimer_fn).call(this, index);
+  if (this._expanding.has(index)) {
+    const nextExpanding = new Set(this._expanding);
+    nextExpanding.delete(index);
+    this._expanding = nextExpanding;
+  }
+  if (this._completingExpansion.has(index)) {
+    const nextCompleting = new Set(this._completingExpansion);
+    nextCompleting.delete(index);
+    this._completingExpansion = nextCompleting;
+  }
+};
+_clearAllExpansionLoadingStates = new WeakSet();
+clearAllExpansionLoadingStates_fn = function() {
+  __privateGet(this, _expandTransitionTimers).forEach((timer) => window.clearTimeout(timer));
+  __privateGet(this, _expandTransitionTimers).clear();
+  this._expanding.clear();
+  this._completingExpansion.clear();
+};
+_scheduleExpansionContentReveal = new WeakSet();
+scheduleExpansionContentReveal_fn = function(index) {
+  __privateMethod(this, _clearExpansionTransitionTimer, clearExpansionTransitionTimer_fn).call(this, index);
+  const nextCompleting = new Set(this._completingExpansion);
+  nextCompleting.add(index);
+  this._completingExpansion = nextCompleting;
+  this.requestUpdate();
+  const timer = window.setTimeout(() => {
+    __privateMethod(this, _clearExpansionLoadingState, clearExpansionLoadingState_fn).call(this, index);
+    this.requestUpdate();
+  }, __privateGet(this, _expandedLoadingExitDuration));
+  __privateGet(this, _expandTransitionTimers).set(index, timer);
+};
 _isCacheValid = new WeakSet();
 isCacheValid_fn = function(entry) {
   return Date.now() - entry.timestamp < __privateGet(this, _cacheDuration);
@@ -313,6 +467,10 @@ loadData_fn = async function() {
     if (cachedData && __privateMethod(this, _isCacheValid, isCacheValid_fn).call(this, cachedData)) {
       this._rowsState = cachedData.rows;
       this._total = cachedData.total;
+      this._expanded.clear();
+      __privateMethod(this, _clearAllExpansionLoadingStates, clearAllExpansionLoadingStates_fn).call(this);
+      this._expandedRowsCache.clear();
+      this._expandedFullContentResolved.clear();
       this._loaded = false;
       this.dispatchCustomEvent("gds-table-data-loaded", {
         detail: {
@@ -350,6 +508,10 @@ loadData_fn = async function() {
     this._rowsState = response.rows;
     this._total = response.total;
     this._selected.clear();
+    this._expanded.clear();
+    __privateMethod(this, _clearAllExpansionLoadingStates, clearAllExpansionLoadingStates_fn).call(this);
+    this._expandedRowsCache.clear();
+    this._expandedFullContentResolved.clear();
     this._loaded = false;
     this.dispatchCustomEvent("gds-table-data-loaded", {
       detail: {
@@ -372,6 +534,58 @@ loadData_fn = async function() {
     this._loading = false;
   }
 };
+_getStickyBorderKeys = new WeakSet();
+getStickyBorderKeys_fn = function() {
+  const visible = this.columns.filter(
+    (c) => this._view.visibleColumns.has(c.key)
+  );
+  const leftCols = visible.filter((c) => c.sticky === "left");
+  const rightCols = visible.filter((c) => c.sticky === "right");
+  return {
+    lastLeft: leftCols.length ? leftCols[leftCols.length - 1].key : null,
+    lastRight: rightCols.length ? rightCols[0].key : null
+  };
+};
+_updateStickyOffsets = new WeakSet();
+updateStickyOffsets_fn = function() {
+  const root = this.shadowRoot;
+  if (!root)
+    return;
+  const leftHeaders = Array.from(
+    root.querySelectorAll("thead th.sticky-left")
+  );
+  const rightHeaders = Array.from(
+    root.querySelectorAll("thead th.sticky-right")
+  );
+  const expanderTh = root.querySelector("thead th.expander-cell");
+  const checkboxTh = root.querySelector("thead th.checkbox-cell");
+  if (!leftHeaders.length && !rightHeaders.length)
+    return;
+  root.querySelectorAll("[data-col-key]").forEach((el) => {
+    el.style.left = "";
+    el.style.right = "";
+  });
+  let leftAccum = (expanderTh?.offsetWidth ?? 0) + (checkboxTh?.offsetWidth ?? 0);
+  for (const th of leftHeaders) {
+    const key = th.dataset.colKey;
+    const offset = `${leftAccum}px`;
+    th.style.left = offset;
+    leftAccum += th.offsetWidth;
+    if (key) {
+      root.querySelectorAll(`[data-col-key="${key}"]`).forEach((el) => el.style.left = offset);
+    }
+  }
+  let rightAccum = 0;
+  for (const th of [...rightHeaders].reverse()) {
+    const key = th.dataset.colKey;
+    const offset = `${rightAccum}px`;
+    th.style.right = offset;
+    rightAccum += th.offsetWidth;
+    if (key) {
+      root.querySelectorAll(`[data-col-key="${key}"]`).forEach((el) => el.style.right = offset);
+    }
+  }
+};
 _getRowKey = new WeakSet();
 getRowKey_fn = function(row, index, slotKey) {
   if (typeof slotKey === "string" || typeof slotKey === "number") {
@@ -505,6 +719,7 @@ _renderColumnHeader = new WeakSet();
 renderColumnHeader_fn = function(column) {
   const isSorted = this._view.sortColumn === column.key;
   const sortDirection = this._view.sortDirection;
+  const { lastLeft, lastRight } = __privateMethod(this, _getStickyBorderKeys, getStickyBorderKeys_fn).call(this);
   let ariaLabel = column.label;
   if (column.sortable) {
     if (isSorted) {
@@ -521,7 +736,11 @@ renderColumnHeader_fn = function(column) {
     "sort-desc": isSorted && sortDirection === "desc",
     [`align-${column.align}`]: !!column.align,
     [`justify-${column.justify}`]: !!column.justify,
-    wrap: Boolean(column.width)
+    wrap: Boolean(column.width),
+    "sticky-left": column.sticky === "left",
+    "sticky-right": column.sticky === "right",
+    "sticky-left-last": column.sticky === "left" && column.key === lastLeft,
+    "sticky-right-last": column.sticky === "right" && column.key === lastRight
   });
   const style = styleMap({
     "--cell-width": column.width
@@ -530,6 +749,7 @@ renderColumnHeader_fn = function(column) {
       <th
         class=${classes}
         style=${style}
+        data-col-key=${ifDefined(column.sticky ? column.key : void 0)}
         aria-sort="${isSorted ? sortDirection === "asc" ? "ascending" : "descending" : "none"}"
         @click=${column.sortable ? () => __privateMethod(this, _handleSort, handleSort_fn).call(this, column.key) : null}
       >
@@ -547,45 +767,120 @@ renderColumnHeader_fn = function(column) {
       </th>
     `;
 };
-_renderActionsHeader = new WeakSet();
-renderActionsHeader_fn = function() {
-  if (!this.actions || typeof this.actions === "function")
-    return null;
-  const label = this.actions.label || msg("Actions");
-  const classes = classMap({
-    actions: true,
-    sticky: Boolean(this.actions.sticky),
-    wrap: Boolean(this.actions.width),
-    [`align-${this.actions.align}`]: !!this.actions.align,
-    [`justify-${this.actions.justify}`]: !!this.actions.justify
-  });
-  const style = styleMap({
-    "--cell-width": this.actions.width
-  });
-  return html`
-      <th class="${classes}" style=${style}>
-        <div class="column-header">
-          <div class="column-label">${label}</div>
-        </div>
-      </th>
-    `;
-};
 _renderSelectableHeader = new WeakSet();
 renderSelectableHeader_fn = function() {
-  if (!this.selectable)
+  if (!__privateGet(this, _isSelectableEnabled, isSelectableEnabled_get))
     return null;
   return html`
       <th class="checkbox-cell">
-        ${__privateMethod(this, _renderCheckbox, renderCheckbox_fn).call(this, {
+        <div class="cell-center">
+          ${__privateMethod(this, _renderCheckbox, renderCheckbox_fn).call(this, {
     checked: __privateGet(this, _isAllSelected, isAllSelected_get),
     indeterminate: __privateGet(this, _isPartialSelection, isPartialSelection_get),
     ariaLabel: msg("Select all rows"),
     onToggle: () => __privateMethod(this, _handleSelectAll, handleSelectAll_fn).call(this, {}),
     skip: this.disableSelectAll
   })}
+        </div>
       </th>
     `;
 };
+_renderExpandableHeader = new WeakSet();
+renderExpandableHeader_fn = function() {
+  if (!__privateGet(this, _isExpandableEnabled, isExpandableEnabled_get))
+    return null;
+  const allExpanded = __privateGet(this, _isAllExpanded, isAllExpanded_get);
+  const label = allExpanded ? msg("Collapse all rows") : msg("Expand all rows");
+  return html`
+      <th class="expander-cell expander-header">
+        <div class="cell-center">
+          <gds-button
+            rank="tertiary"
+            size="small"
+            label="${label}"
+            @click=${() => __privateMethod(this, _handleExpandAll, handleExpandAll_fn).call(this)}
+          >
+            ${allExpanded ? html`<gds-icon-chevron-grabber-vertical-reversed></gds-icon-chevron-grabber-vertical-reversed>` : html`<gds-icon-chevron-grabber-vertical></gds-icon-chevron-grabber-vertical>`}
+          </gds-button>
+        </div>
+      </th>
+    `;
+};
+_getRowSubRowsSource = new WeakSet();
+getRowSubRowsSource_fn = function(row) {
+  if ("subRows" in row) {
+    return row.subRows;
+  }
+  return row?.children;
+};
+_getRowFullContentSource = new WeakSet();
+getRowFullContentSource_fn = function(row) {
+  if ("fullContent" in row) {
+    return row.fullContent;
+  }
+  return void 0;
+};
+_getExpandedRows = new WeakSet();
+getExpandedRows_fn = function(_row, index) {
+  return this._expandedRowsCache.get(index) ?? [];
+};
+_hasAsyncSubRows = new WeakSet();
+hasAsyncSubRows_fn = function(row) {
+  const subRows = __privateMethod(this, _getRowSubRowsSource, getRowSubRowsSource_fn).call(this, row);
+  return typeof subRows === "function";
+};
+_hasAsyncFullContent = new WeakSet();
+hasAsyncFullContent_fn = function(row) {
+  const fullContent = __privateMethod(this, _getRowFullContentSource, getRowFullContentSource_fn).call(this, row);
+  return typeof fullContent === "function";
+};
+_getSubRowCount = new WeakSet();
+getSubRowCount_fn = function(row, index) {
+  const fallbackCount = __privateMethod(this, _getExpandedRows, getExpandedRows_fn).call(this, row, index).length || 1;
+  const count = Number(row.subRowCount);
+  if (!Number.isFinite(count) || count <= 0)
+    return fallbackCount;
+  return Math.floor(count);
+};
+_hasExpandedFullSlot = new WeakSet();
+hasExpandedFullSlot_fn = function(row, index) {
+  const rowKey = __privateMethod(this, _getRowKey, getRowKey_fn).call(this, row, index);
+  return Boolean(this.querySelector(`[slot="expand:${rowKey}:full"]`));
+};
+_hasExpandedFullContent = new WeakSet();
+hasExpandedFullContent_fn = function(row, index) {
+  return __privateMethod(this, _hasExpandedFullSlot, hasExpandedFullSlot_fn).call(this, row, index);
+};
+_isRowExpandable = new WeakSet();
+isRowExpandable_fn = function(row, index) {
+  if (__privateGet(this, _isResponsiveStacked, isResponsiveStacked_get))
+    return false;
+  if (typeof row.isExpandable === "boolean") {
+    return row.isExpandable;
+  }
+  if (__privateMethod(this, _hasAsyncSubRows, hasAsyncSubRows_fn).call(this, row))
+    return true;
+  if (__privateMethod(this, _hasAsyncFullContent, hasAsyncFullContent_fn).call(this, row))
+    return true;
+  if (__privateMethod(this, _getExpandedRows, getExpandedRows_fn).call(this, row, index).length > 0)
+    return true;
+  return __privateMethod(this, _hasExpandedFullContent, hasExpandedFullContent_fn).call(this, row, index);
+};
+_getExpandedGroupId = new WeakSet();
+getExpandedGroupId_fn = function(row, index) {
+  const key = String(__privateMethod(this, _getRowKey, getRowKey_fn).call(this, row, index)).replace(
+    /[^a-zA-Z0-9_-]/g,
+    "-"
+  );
+  return `row-expand-group-${key}`;
+};
+_getRenderedColumnCount = new WeakSet();
+getRenderedColumnCount_fn = function() {
+  const visibleColumnsCount = this.columns.filter(
+    (column) => this._view.visibleColumns.has(column.key)
+  ).length;
+  return visibleColumnsCount + (__privateGet(this, _isExpandableEnabled, isExpandableEnabled_get) ? 1 : 0) + (__privateGet(this, _isSelectableEnabled, isSelectableEnabled_get) ? 1 : 0);
+};
 _renderColumnHeaders = new WeakSet();
 renderColumnHeaders_fn = function() {
   return this.columns.filter((column) => this._view.visibleColumns.has(column.key)).map((column) => __privateMethod(this, _renderColumnHeader, renderColumnHeader_fn).call(this, column));
@@ -596,9 +891,9 @@ renderTableHeader_fn = function() {
       <thead>
         <tr>
           ${[
+    __privateMethod(this, _renderExpandableHeader, renderExpandableHeader_fn).call(this),
     __privateMethod(this, _renderSelectableHeader, renderSelectableHeader_fn).call(this),
-    __privateMethod(this, _renderColumnHeaders, renderColumnHeaders_fn).call(this),
-    __privateMethod(this, _renderActionsHeader, renderActionsHeader_fn).call(this)
+    __privateMethod(this, _renderColumnHeaders, renderColumnHeaders_fn).call(this)
   ]}
         </tr>
       </thead>
@@ -606,28 +901,67 @@ renderTableHeader_fn = function() {
 };
 _renderTableCell = new WeakSet();
 renderTableCell_fn = function(row, column, index) {
+  const { lastLeft, lastRight } = __privateMethod(this, _getStickyBorderKeys, getStickyBorderKeys_fn).call(this);
   const classes = classMap({
     [`align-${column.align}`]: !!column.align,
     [`justify-${column.justify}`]: !!column.justify,
-    wrap: Boolean(column.width)
+    wrap: Boolean(column.width),
+    "sticky-left": column.sticky === "left",
+    "sticky-right": column.sticky === "right",
+    "sticky-left-last": column.sticky === "left" && column.key === lastLeft,
+    "sticky-right-last": column.sticky === "right" && column.key === lastRight
   });
   const style = styleMap({
     "--cell-width": column.width
   });
   return html`
-      <td style=${style} class=${classes}>
+      <td
+        style=${style}
+        class=${classes}
+        data-col-key=${ifDefined(column.sticky ? column.key : void 0)}
+      >
         ${__privateMethod(this, _renderCellContent, renderCellContent_fn).call(this, row, column, index)}
       </td>
     `;
 };
+_renderExpandableCell = new WeakSet();
+renderExpandableCell_fn = function(row, index) {
+  if (!__privateGet(this, _isExpandableEnabled, isExpandableEnabled_get))
+    return null;
+  const isExpandable = __privateMethod(this, _isRowExpandable, isRowExpandable_fn).call(this, row, index);
+  if (!isExpandable) {
+    return html`<td class="expander-cell"></td>`;
+  }
+  const isExpanded = this._expanded.has(index);
+  const groupId = __privateMethod(this, _getExpandedGroupId, getExpandedGroupId_fn).call(this, row, index);
+  const actionLabel = isExpanded ? row.collapseLabel || msg("Collapse row") : row.expandLabel || msg("Expand row");
+  return html`
+      <td class="expander-cell">
+        <gds-button
+          class="expand-toggle"
+          rank="tertiary"
+          size="small"
+          label="${actionLabel} ${index + 1}"
+          aria-expanded=${isExpanded ? "true" : "false"}
+          aria-controls=${groupId}
+          @click=${() => __privateMethod(this, _handleExpandToggle, handleExpandToggle_fn).call(this, row, index)}
+        >
+          ${isExpanded ? html`<gds-icon-chevron-top size="s"></gds-icon-chevron-top>` : html`<gds-icon-chevron-bottom
+                size="s"
+              ></gds-icon-chevron-bottom>`}
+        </gds-button>
+      </td>
+    `;
+};
 _renderSelectableCell = new WeakSet();
 renderSelectableCell_fn = function(index) {
-  if (!this.selectable)
+  if (!__privateGet(this, _isSelectableEnabled, isSelectableEnabled_get))
     return null;
   const selectRowLabel = `${msg("Select row")} ${index + 1}`;
   return html`
       <td class="checkbox-cell">
-        ${__privateMethod(this, _renderCheckbox, renderCheckbox_fn).call(this, {
+        <div class="cell-center">
+          ${__privateMethod(this, _renderCheckbox, renderCheckbox_fn).call(this, {
     checked: this._selected.has(index),
     indeterminate: false,
     ariaLabel: selectRowLabel,
@@ -635,6 +969,7 @@ renderSelectableCell_fn = function(index) {
       detail: { checked: !this._selected.has(index) }
     })
   })}
+        </div>
       </td>
     `;
 };
@@ -642,51 +977,201 @@ _renderRowCells = new WeakSet();
 renderRowCells_fn = function(row, index) {
   return this.columns.filter((column) => this._view.visibleColumns.has(column.key)).map((column) => __privateMethod(this, _renderTableCell, renderTableCell_fn).call(this, row, column, index));
 };
-_renderActionsCell = new WeakSet();
-renderActionsCell_fn = function(row, index) {
-  if (!this.actions)
-    return null;
-  if (typeof this.actions === "function") {
-    return html`
-        <td class="actions-cell">
-          <div class="cell-content">${this.actions(row, index)}</div>
-        </td>
-      `;
-  }
+_renderFullWidthDetailsRow = new WeakSet();
+renderFullWidthDetailsRow_fn = function(row, index, groupId) {
   const rowKey = __privateMethod(this, _getRowKey, getRowKey_fn).call(this, row, index);
-  const classes = classMap({
-    "actions-cell": true,
-    sticky: Boolean(this.actions.sticky),
-    wrap: Boolean(this.actions.width),
-    [`align-${this.actions.align}`]: !!this.actions.align,
-    [`justify-${this.actions.justify}`]: !!this.actions.justify
+  return html`
+      <tr
+        class="expanded-row full expanded-group-end"
+        id="${groupId}"
+        aria-level="2"
+      >
+        <td
+          class="expanded-full-cell"
+          colspan=${__privateMethod(this, _getRenderedColumnCount, getRenderedColumnCount_fn).call(this)}
+        >
+          ${html`<slot name="expand:${rowKey}:full"></slot>`}
+        </td>
+      </tr>
+    `;
+};
+_renderExpandedLoadingRow = new WeakSet();
+renderExpandedLoadingRow_fn = function(_row, _index, groupId, childIndex, rowCount, isCompleting = false) {
+  const visibleColumns = this.columns.filter(
+    (column) => this._view.visibleColumns.has(column.key)
+  );
+  const rowClasses = classMap({
+    "expanded-row": true,
+    aligned: true,
+    "skeleton-leave": isCompleting,
+    "expanded-group-end": childIndex === rowCount - 1
   });
-  const style = styleMap({
-    "--cell-width": this.actions.width
+  return html`
+      <tr
+        class=${rowClasses}
+        id=${ifDefined(childIndex === 0 ? groupId : void 0)}
+        aria-level="2"
+        aria-busy="true"
+      >
+        ${__privateGet(this, _isExpandableEnabled, isExpandableEnabled_get) ? html`<td class="expander-cell"></td>` : null}
+        ${__privateGet(this, _isSelectableEnabled, isSelectableEnabled_get) ? html`<td class="checkbox-cell"></td>` : null}
+        ${visibleColumns.map((column) => {
+    const classes = classMap({
+      [`align-${column.align}`]: !!column.align,
+      [`justify-${column.justify}`]: !!column.justify,
+      wrap: Boolean(column.width)
+    });
+    const style = styleMap({
+      "--cell-width": column.width
+    });
+    const isActionsColumn = String(column.key) === "actions";
+    return html`
+            <td class=${classes} style=${style}>
+              <div class="cell-content">
+                ${isActionsColumn ? html`<span class="skeleton skeleton-action"></span>` : html`<span class="skeleton skeleton-text"></span>`}
+              </div>
+            </td>
+          `;
+  })}
+      </tr>
+    `;
+};
+_renderExpandedLoadingRows = new WeakSet();
+renderExpandedLoadingRows_fn = function(row, index, groupId, isCompleting = false) {
+  const count = __privateMethod(this, _getSubRowCount, getSubRowCount_fn).call(this, row, index);
+  return Array.from(
+    { length: count },
+    (_, childIndex) => __privateMethod(this, _renderExpandedLoadingRow, renderExpandedLoadingRow_fn).call(this, row, index, groupId, childIndex, count, isCompleting)
+  );
+};
+_renderExpandedFullLoadingRow = new WeakSet();
+renderExpandedFullLoadingRow_fn = function(groupId, isCompleting = false) {
+  const rowClasses = classMap({
+    "expanded-row": true,
+    full: true,
+    "expanded-group-end": true,
+    "skeleton-leave": isCompleting
   });
   return html`
-      <td class="${classes}" style=${style}>
-        <div class="cell-content">
-          ${__privateMethod(this, _renderSlotElement, renderSlotElement_fn).call(this, "actions", rowKey, "main")}
-        </div>
-      </td>
+      <tr class=${rowClasses} id="${groupId}" aria-level="2" aria-busy="true">
+        <td
+          class="expanded-full-cell"
+          colspan=${__privateMethod(this, _getRenderedColumnCount, getRenderedColumnCount_fn).call(this)}
+        >
+          <div class="expanded-full-skeleton" aria-hidden="true">
+            <span class="skeleton skeleton-title"></span>
+            <span class="skeleton skeleton-text"></span>
+            <span class="skeleton skeleton-text"></span>
+            <div class="expanded-full-skeleton-meta">
+              <span class="skeleton skeleton-block"></span>
+              <span class="skeleton skeleton-block"></span>
+              <span class="skeleton skeleton-block"></span>
+            </div>
+          </div>
+        </td>
+      </tr>
     `;
 };
+_getExpandedChildRowClasses = new WeakSet();
+getExpandedChildRowClasses_fn = function(isLast) {
+  return {
+    "expanded-row": true,
+    child: true,
+    "expanded-group-end": isLast
+  };
+};
+_getTableRowClasses = new WeakSet();
+getTableRowClasses_fn = function(index, isExpandable, isExpanded) {
+  return {
+    selected: this._selected.has(index),
+    loading: this._loading,
+    "expanded-parent": isExpanded,
+    "has-expandable-rows": isExpandable
+  };
+};
+_getRowAriaExpanded = new WeakSet();
+getRowAriaExpanded_fn = function(isExpandable, isExpanded) {
+  const value = isExpandable ? isExpanded ? "true" : "false" : void 0;
+  return value;
+};
+_getTableRowPresentation = new WeakSet();
+getTableRowPresentation_fn = function(index, isExpandable, isExpanded) {
+  return {
+    classes: __privateMethod(this, _getTableRowClasses, getTableRowClasses_fn).call(this, index, isExpandable, isExpanded),
+    ariaExpanded: __privateMethod(this, _getRowAriaExpanded, getRowAriaExpanded_fn).call(this, isExpandable, isExpanded)
+  };
+};
+_renderExpandedChildRow = new WeakSet();
+renderExpandedChildRow_fn = function(childRow, parentIndex, childIndex, isLast, groupId) {
+  const childRenderIndex = this._rowsState.length + parentIndex * 1e3 + childIndex;
+  return html`
+      <tr
+        class=${classMap(__privateMethod(this, _getExpandedChildRowClasses, getExpandedChildRowClasses_fn).call(this, isLast))}
+        id=${ifDefined(childIndex === 0 ? groupId : void 0)}
+        aria-level="2"
+      >
+        ${__privateGet(this, _isExpandableEnabled, isExpandableEnabled_get) ? html`<td class="expander-cell"></td>` : null}
+        ${__privateGet(this, _isSelectableEnabled, isSelectableEnabled_get) ? html`<td class="checkbox-cell"></td>` : null}
+        ${__privateMethod(this, _renderRowCells, renderRowCells_fn).call(this, childRow, childRenderIndex)}
+      </tr>
+    `;
+};
+_getRowExpansionLoadingKind = new WeakSet();
+getRowExpansionLoadingKind_fn = function(row) {
+  return __privateMethod(this, _hasAsyncSubRows, hasAsyncSubRows_fn).call(this, row) ? "rows" : "full";
+};
+_getRowExpansionState = new WeakSet();
+getRowExpansionState_fn = function(row, index) {
+  const isExpandable = __privateMethod(this, _isRowExpandable, isRowExpandable_fn).call(this, row, index);
+  const isExpanded = isExpandable && this._expanded.has(index);
+  const isExpanding = this._expanding.has(index);
+  const isCompleting = this._completingExpansion.has(index);
+  const groupId = __privateMethod(this, _getExpandedGroupId, getExpandedGroupId_fn).call(this, row, index);
+  const expandedRows = __privateMethod(this, _getExpandedRows, getExpandedRows_fn).call(this, row, index);
+  const loadingKind = __privateMethod(this, _getRowExpansionLoadingKind, getRowExpansionLoadingKind_fn).call(this, row);
+  return {
+    isExpandable,
+    isExpanded,
+    isExpanding,
+    isCompleting,
+    groupId,
+    expandedRows,
+    hasExpandedRows: expandedRows.length > 0,
+    loadingKind
+  };
+};
+_renderExpandedRowContent = new WeakSet();
+renderExpandedRowContent_fn = function(row, index, state2) {
+  if (state2.isExpanding) {
+    return state2.loadingKind === "full" ? __privateMethod(this, _renderExpandedFullLoadingRow, renderExpandedFullLoadingRow_fn).call(this, state2.groupId, state2.isCompleting) : __privateMethod(this, _renderExpandedLoadingRows, renderExpandedLoadingRows_fn).call(this, row, index, state2.groupId, state2.isCompleting);
+  }
+  if (state2.hasExpandedRows) {
+    return state2.expandedRows.map(
+      (expandedRow, childIndex) => __privateMethod(this, _renderExpandedChildRow, renderExpandedChildRow_fn).call(this, expandedRow, index, childIndex, childIndex === state2.expandedRows.length - 1, childIndex === 0 ? state2.groupId : void 0)
+    );
+  }
+  return __privateMethod(this, _renderFullWidthDetailsRow, renderFullWidthDetailsRow_fn).call(this, row, index, state2.groupId);
+};
 _renderTableRow = new WeakSet();
 renderTableRow_fn = function(row, index) {
+  const state2 = __privateMethod(this, _getRowExpansionState, getRowExpansionState_fn).call(this, row, index);
+  const presentation = __privateMethod(this, _getTableRowPresentation, getTableRowPresentation_fn).call(this, index, state2.isExpandable, state2.isExpanded);
   return html`
       <tr
-        class=${classMap({
-    selected: this._selected.has(index),
-    loading: this._loading
-  })}
+        class=${classMap(presentation.classes)}
+        aria-level="1"
+        aria-expanded=${ifDefined(presentation.ariaExpanded)}
       >
         ${[
+    __privateMethod(this, _renderExpandableCell, renderExpandableCell_fn).call(this, row, index),
     __privateMethod(this, _renderSelectableCell, renderSelectableCell_fn).call(this, index),
-    __privateMethod(this, _renderRowCells, renderRowCells_fn).call(this, row, index),
-    __privateMethod(this, _renderActionsCell, renderActionsCell_fn).call(this, row, index)
+    __privateMethod(this, _renderRowCells, renderRowCells_fn).call(this, row, index)
   ]}
       </tr>
+      ${when(
+    state2.isExpanded,
+    () => __privateMethod(this, _renderExpandedRowContent, renderExpandedRowContent_fn).call(this, row, index, state2)
+  )}
     `;
 };
 _renderCheckbox = new WeakSet();
@@ -755,24 +1240,22 @@ renderSkeletonRow_fn = function(index) {
   return html`
       <tr class="skeleton-row">
         ${when(
-    this.selectable,
+    __privateGet(this, _isExpandableEnabled, isExpandableEnabled_get),
     () => html`
-            <td class="checkbox-cell">
-              <span class="skeleton skeleton-checkbox"></span>
+            <td class="expander-cell">
+              <span class="skeleton skeleton-action"></span>
             </td>
           `
   )}
-        ${this.columns.filter((column) => this._view.visibleColumns.has(column.key)).map((column) => html`<td>${__privateMethod(this, _renderSkeletonCell, renderSkeletonCell_fn).call(this, column)}</td>`)}
         ${when(
-    this.actions,
+    __privateGet(this, _isSelectableEnabled, isSelectableEnabled_get),
     () => html`
-            <td class="actions-cell">
-              <div class="cell-content">
-                <span class="skeleton skeleton-action"></span>
-              </div>
+            <td class="checkbox-cell">
+              <span class="skeleton skeleton-checkbox"></span>
             </td>
           `
   )}
+        ${this.columns.filter((column) => this._view.visibleColumns.has(column.key)).map((column) => html`<td>${__privateMethod(this, _renderSkeletonCell, renderSkeletonCell_fn).call(this, column)}</td>`)}
       </tr>
     `;
 };
@@ -795,7 +1278,7 @@ renderTableBody_fn = function() {
 };
 _renderTableFoot = new WeakSet();
 renderTableFoot_fn = function() {
-  if (!this.tfoot)
+  if (!this.tfoot || __privateGet(this, _isResponsiveStacked, isResponsiveStacked_get))
     return null;
   const label = this.tfoot.label;
   const visibleColumns = this.columns.filter(
@@ -808,21 +1291,40 @@ renderTableFoot_fn = function() {
   return html`
       <tfoot class=${classes}>
         <tr>
-          ${when(this.selectable, () => html`<td class="checkbox-cell"></td>`)}
+          ${when(
+    __privateGet(this, _isExpandableEnabled, isExpandableEnabled_get),
+    () => html`<td class="expander-cell"></td>`
+  )}
+          ${when(
+    __privateGet(this, _isSelectableEnabled, isSelectableEnabled_get),
+    () => html`<td class="checkbox-cell"></td>`
+  )}
           ${visibleColumns.map((column, i) => {
+    const { lastLeft, lastRight } = __privateMethod(this, _getStickyBorderKeys, getStickyBorderKeys_fn).call(this);
     const cellClasses = classMap({
       "tablefoot-cell": true,
       "tablefoot-label-cell": i === 0,
       [`align-${column.align}`]: !!column.align,
       [`justify-${column.justify}`]: !!column.justify,
-      wrap: Boolean(column.width)
+      wrap: Boolean(column.width),
+      "sticky-left": column.sticky === "left",
+      "sticky-right": column.sticky === "right",
+      "sticky-left-last": column.sticky === "left" && column.key === lastLeft,
+      "sticky-right-last": column.sticky === "right" && column.key === lastRight
     });
     const style = styleMap({
       "--cell-width": column.width
     });
     if (i === 0 && label) {
       return html`
-                <th scope="row" class=${cellClasses} style=${style}>
+                <th
+                  scope="row"
+                  class=${cellClasses}
+                  style=${style}
+                  data-col-key=${ifDefined(
+        column.sticky ? column.key : void 0
+      )}
+                >
                   <div class="cell-content">
                     <span class="tablefoot-label">${label}</span>
                     <slot name="tfoot:${column.key}"></slot>
@@ -831,26 +1333,18 @@ renderTableFoot_fn = function() {
               `;
     }
     return html`
-              <td class=${cellClasses} style=${style}>
+              <td
+                class=${cellClasses}
+                style=${style}
+                data-col-key=${ifDefined(
+      column.sticky ? column.key : void 0
+    )}
+              >
                 <div class="cell-content">
                   <slot name="tfoot:${column.key}"></slot>
                 </div>
               </td>
             `;
-  })}
-          ${when(this.actions, () => {
-    const isObj = this.actions && typeof this.actions !== "function";
-    const stickyAction = isObj && this.actions.sticky;
-    const actionClasses = classMap({
-      "actions-cell": true,
-      "tablefoot-cell": true,
-      sticky: Boolean(stickyAction)
-    });
-    return html`<td class=${actionClasses}>
-              <div class="cell-content">
-                <slot name="tfoot:actions"></slot>
-              </div>
-            </td>`;
   })}
         </tr>
       </tfoot>
@@ -861,6 +1355,15 @@ renderTable_fn = function() {
   const CLASSES = classMap({
     responsive: this.responsive,
     data: true,
+    "is-expandable": __privateGet(this, _isExpandableEnabled, isExpandableEnabled_get),
+    "is-selectable": __privateGet(this, _isSelectableEnabled, isSelectableEnabled_get),
+    "has-tfoot": Boolean(this.tfoot) && !__privateGet(this, _isResponsiveStacked, isResponsiveStacked_get),
+    "has-sticky-left": this.columns.some((c) => c.sticky === "left"),
+    "has-sticky-right": this.columns.some((c) => c.sticky === "right"),
+    "has-sticky": this.columns.some(
+      (c) => c.sticky === "left" || c.sticky === "right"
+    ),
+    "no-mask": __privateGet(this, _isExpandableEnabled, isExpandableEnabled_get) || __privateGet(this, _isSelectableEnabled, isSelectableEnabled_get) || this.columns.some((c) => c.sticky === "left" || c.sticky === "right"),
     [`variant-${this.variant}`]: true,
     loading: this._loading,
     loaded: !this._loading && !this._loaded
@@ -875,7 +1378,12 @@ renderTable_fn = function() {
         class="table-card"
       >
         <div class=${CLASSES} tabindex="0">
-          <table aria-label="${caption}">
+          <table
+            aria-label="${caption}"
+            role=${ifDefined(
+    __privateGet(this, _isExpandableEnabled, isExpandableEnabled_get) ? "treegrid" : void 0
+  )}
+          >
             <caption class="visually-hidden">
               ${caption}
             </caption>
@@ -889,7 +1397,7 @@ renderTable_fn = function() {
 _renderErrorState = new WeakSet();
 renderErrorState_fn = function() {
   return html`
-      <gds-card variant="neutral-02" border-radius="m" outline>
+      <gds-card variant="neutral-02-outlined" border-radius="m">
         <slot name="error">
           <gds-text tag="p">${msg("Error loading data")}</gds-text>
           <gds-button
@@ -908,7 +1416,7 @@ renderEmptyState_fn = function() {
   const hasSearch = this._view.searchQuery.length > 0;
   if (hasSearch) {
     return html`
-        <gds-card variant="neutral-02" border-radius="m" outline>
+        <gds-card variant="neutral-02-outlined" border-radius="m">
           <slot name="no-results">
             <gds-flex flex-direction="column" align-items="flex-start" gap="s">
               <gds-text tag="p" font="heading-s">
@@ -930,7 +1438,7 @@ renderEmptyState_fn = function() {
       `;
   }
   return html`
-      <gds-card variant="neutral-02" border-radius="m" outline>
+      <gds-card variant="neutral-02-outlined" border-radius="m">
         <slot name="empty">
           <gds-text tag="p" font="heading-s">
             ${msg("No data available")}
@@ -987,7 +1495,7 @@ renderHeadline_fn = function() {
         </gds-flex>
         ${when(
       this.searchable || this.settings,
-      () => html`<gds-divider color="subtle-01"></gds-divider>`,
+      () => html`<gds-divider color="neutral-02"></gds-divider>`,
       () => html``
     )}
       `;
@@ -1084,6 +1592,105 @@ handleRowSelect_fn = function(index, e) {
   __privateMethod(this, _emitSelectionChange, emitSelectionChange_fn).call(this);
   this.requestUpdate();
 };
+_handleExpandToggle = new WeakSet();
+handleExpandToggle_fn = function(row, index) {
+  void this.toggleRowExpansion(index, row);
+};
+_handleExpandAll = new WeakSet();
+handleExpandAll_fn = async function() {
+  const expandable = __privateGet(this, _expandableIndices, expandableIndices_get);
+  if (__privateGet(this, _isAllExpanded, isAllExpanded_get)) {
+    expandable.forEach((i) => this._expanded.delete(i));
+    this.requestUpdate();
+  } else {
+    await Promise.all(expandable.map((i) => __privateMethod(this, _setRowExpanded, setRowExpanded_fn).call(this, i, true)));
+  }
+};
+_emitExpandChange = new WeakSet();
+emitExpandChange_fn = function(row, index, expanded) {
+  this.dispatchCustomEvent("gds-table-expand-change", {
+    detail: {
+      index,
+      row,
+      expanded,
+      expandedIndices: Array.from(this._expanded)
+    },
+    bubbles: true
+  });
+};
+_resolveExpandedContent = new WeakSet();
+resolveExpandedContent_fn = async function(row, index) {
+  const subRowsSource = __privateMethod(this, _getRowSubRowsSource, getRowSubRowsSource_fn).call(this, row);
+  const fullContentSource = __privateMethod(this, _getRowFullContentSource, getRowFullContentSource_fn).call(this, row);
+  const hasSubRows = typeof subRowsSource === "function";
+  const hasFullContent = typeof fullContentSource === "function";
+  if (!hasSubRows && !hasFullContent) {
+    return;
+  }
+  const rowsPromise = hasSubRows ? subRowsSource() : void 0;
+  const fullPromise = hasFullContent ? fullContentSource() : void 0;
+  const hasAsyncContent = Boolean(rowsPromise || fullPromise);
+  let resolved = false;
+  const nextExpanding = new Set(this._expanding);
+  nextExpanding.add(index);
+  this._expanding = nextExpanding;
+  this.requestUpdate();
+  try {
+    if (rowsPromise) {
+      const rows = await rowsPromise;
+      const normalizedRows = Array.isArray(rows) ? rows : [];
+      const nextCache = new Map(this._expandedRowsCache);
+      nextCache.set(index, normalizedRows);
+      this._expandedRowsCache = nextCache;
+    }
+    if (fullPromise) {
+      await fullPromise;
+      const nextResolved = new Set(this._expandedFullContentResolved);
+      nextResolved.add(index);
+      this._expandedFullContentResolved = nextResolved;
+    }
+    resolved = true;
+  } catch {
+    if (rowsPromise) {
+      const nextCache = new Map(this._expandedRowsCache);
+      nextCache.set(index, []);
+      this._expandedRowsCache = nextCache;
+    }
+  } finally {
+    if (hasAsyncContent && resolved) {
+      __privateMethod(this, _scheduleExpansionContentReveal, scheduleExpansionContentReveal_fn).call(this, index);
+    } else {
+      __privateMethod(this, _clearExpansionLoadingState, clearExpansionLoadingState_fn).call(this, index);
+    }
+    this.requestUpdate();
+  }
+};
+_setRowExpanded = new WeakSet();
+setRowExpanded_fn = async function(index, expanded, rowOverride) {
+  if (index < 0 || index >= this._rowsState.length)
+    return false;
+  const row = rowOverride ?? this._rowsState[index];
+  if (!row)
+    return false;
+  const isExpandable = __privateMethod(this, _isRowExpandable, isRowExpandable_fn).call(this, row, index);
+  if (expanded && !isExpandable)
+    return false;
+  const isExpanded = this._expanded.has(index);
+  if (expanded === isExpanded)
+    return true;
+  if (expanded) {
+    this._expanded.add(index);
+    __privateMethod(this, _emitExpandChange, emitExpandChange_fn).call(this, row, index, true);
+    this.requestUpdate();
+    await __privateMethod(this, _resolveExpandedContent, resolveExpandedContent_fn).call(this, row, index);
+  } else {
+    __privateMethod(this, _clearExpansionLoadingState, clearExpansionLoadingState_fn).call(this, index);
+    this._expanded.delete(index);
+    __privateMethod(this, _emitExpandChange, emitExpandChange_fn).call(this, row, index, false);
+  }
+  this.requestUpdate();
+  return true;
+};
 _selectAllInternal = new WeakSet();
 selectAllInternal_fn = function() {
   this._selected = new Set(this._rowsState.map((_, i) => i));
@@ -1115,6 +1722,11 @@ initializeScrollTracking_fn = function() {
     __privateMethod(this, _updateHorizontalScrollState, updateHorizontalScrollState_fn).call(this, dataContainer);
   };
   dataContainer.addEventListener("scroll", updateScrollState);
+  const resizeObserver = new ResizeObserver(() => updateScrollState());
+  resizeObserver.observe(dataContainer);
+  const innerTable = dataContainer.querySelector("table");
+  if (innerTable)
+    resizeObserver.observe(innerTable);
   updateScrollState();
 };
 _updateVerticalScrollState = new WeakSet();
@@ -1136,6 +1748,11 @@ _updateHorizontalScrollState = new WeakSet();
 updateHorizontalScrollState_fn = function(container) {
   const { scrollLeft, scrollWidth, clientWidth } = container;
   const maxScrollLeft = scrollWidth - clientWidth;
+  if (scrollWidth > clientWidth) {
+    container.classList.add("overflows-x");
+  } else {
+    container.classList.remove("overflows-x");
+  }
   if (scrollLeft <= 0) {
     container.classList.add("scrolled-x-start");
     container.classList.remove("scrolled-x-middle", "scrolled-x-end");
@@ -1210,9 +1827,6 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: false })
 ], GdsTable.prototype, "striped", 2);
-__decorateClass([
-  property()
-], GdsTable.prototype, "actions", 2);
 __decorateClass([
   property({ type: Boolean, reflect: false })
 ], GdsTable.prototype, "nocache", 2);
@@ -1256,6 +1870,21 @@ __decorateClass([
 __decorateClass([
   state()
 ], GdsTable.prototype, "_selected", 2);
+__decorateClass([
+  state()
+], GdsTable.prototype, "_expanded", 2);
+__decorateClass([
+  state()
+], GdsTable.prototype, "_expanding", 2);
+__decorateClass([
+  state()
+], GdsTable.prototype, "_completingExpansion", 2);
+__decorateClass([
+  state()
+], GdsTable.prototype, "_expandedRowsCache", 2);
+__decorateClass([
+  state()
+], GdsTable.prototype, "_expandedFullContentResolved", 2);
 __decorateClass([
   state()
 ], GdsTable.prototype, "_error", 2);