@ds-mo/ui 14.8.0 → 14.9.0

package/dist/mcp-data/registry/table.json

@@ -46,7 +46,7 @@
         "The rendered structure uses a native table, caption, column headers, row groups, and data cells; keep the caption non-empty. The native caption remains visually hidden as the table's accessible name. When caption visibility is enabled, a 48px header bar renders as component chrome outside the horizontal scrollport. It defaults to a presentational caption title that does not duplicate the accessible name. Application-owned labeled controls supplied through the single named header slot replace that fallback and occupy the leading content width inside the component-owned 8px inset. When columnCustomizer is enabled, the table adds a trailing Preferences control named Customize table; otherwise the header slot receives the complete content width.",
         "The data-mode switcher is the shared Menu of the table's supported infinite and pagination modes. It is the final caption-bar action; when the column customizer is also present, a decorative vertical divider separates the two controls. dataMode remains controlled, and the application responds to change intent by supplying the matching records, pagination state, loading behavior, and query consequences. Escape, dismissal, and selection return focus to the trigger.",
         "The column customizer is the shared Menu of switch rows, not a table-owned dialog. Data columns can be shown, hidden, and reordered. Locked action columns stay visible, inactive, and last. The selection checkbox is not a column and never appears. The last remaining visible data column cannot be hidden, but it stays focusable so it can still be reordered. Escape and outside click restore focus to the trigger. Persistence stays in the application.",
-        "Sorting controls remain buttons inside column headers and expose the table's one controlled member-row sort through aria-sort. Grouping never adds a second sort indicator or header control; the application supplies groups in its fixed product order.",
+        "Sorting controls remain buttons inside column headers and expose the table's one controlled member-row sort through aria-sort. Grouping never adds a second sort indicator or header control; the application supplies groups in its fixed product order. Optional column help underlines the header label with the shared dotted decoration and shows ds-tooltip from that label; it does not add a second header control or replace the column name.",
         "Selection controls expose checkbox semantics and explicit row names; select-all affects selectable loaded rows only and preserves selected identities outside the loaded window. When grouping is active with multi-selection, each group section header also exposes a checkbox that selects or clears that group's selectable loaded rows.",
         "Interactive rows are focusable as native rows, activate with Enter or Space, and do not steal activation from their nested selection, action, overflow-menu, or primary-text link controls.",
         "Scrollable table regions become keyboard focusable and named only when overflow exists.",
@@ -59,7 +59,7 @@
         "When columnCustomizer is false, columns render in catalog order. When it is true, columns remains the catalog: hiddenColumnIds and columnOrder control visibility and data-column sequence, action columns stay last and cannot be hidden, and dsColumnsConfigChange reports the next hidden ids and data-column order without mutating those inputs. The customizer Menu live-applies show/hide and data-column reorder. The table does not persist preferences.",
         "An active member sort toggles only between ascending and descending; activating a different sortable label moves the one sorting state to that key. Applications may still clear the controlled sort state explicitly. Grouping does not introduce another interactive direction.",
         "Compound headers can expose multiple related labels with independent sort keys. Each label owns only its content-width interaction target while the active direction remains in the column's alignment-aware sort lane.",
-        "Initial loading defaults to ten row-shaped skeletons and preserves row dividers, column dividers, selection lanes, and sticky boundaries. A selectable table renders a checkbox-sized control skeleton in its selection lane so loading geometry matches the real checkbox instead of a generic icon. Each column may declare representative text, multiline text, image, Tag, icon, icon-and-text, action, or intentionally blank loading geometry; the table applies the matching resolved-cell padding and track anatomy so the placeholder row has the same height and rhythm as its data row. Columns without a declaration use one text line, while action columns infer an icon action placeholder. Empty, initial error, load-more, retry, loading-more, and terminal bands remain fixed to the visible table width while data columns scroll horizontally beneath them. Incremental loading retains existing rows and supports automatic sentinel, manual load-more, retry, and terminal states. When grouping is active, each expanded group owns its load band at the end of its member rows; internal group load bands keep their bottom divider, while a terminal group load band yields it to the table edge or footer. The global bottom-of-table loader is not rendered.",
+        "Initial loading defaults to ten row-shaped skeletons and preserves row dividers, column dividers, selection lanes, and sticky boundaries. A selectable table renders a checkbox-sized control skeleton in its selection lane so loading geometry matches the real checkbox instead of a generic icon. Each column may declare representative text, multiline text, image, Tag, icon, icon-and-text, action, or intentionally blank loading geometry; the table applies the matching resolved-cell padding and track anatomy so the placeholder row has the same height and rhythm as its data row. Columns without a declaration use one text line, while action columns infer an icon action placeholder. Empty and initial error replace only the body with ds-empty-state, using Inbox or ErrorTriangle plus the table heading and body copy. In height-bounded and maxHeight tables that region fills the remaining viewport below the column header; content-sized tables keep a minimum empty-region height. Empty, initial error, load-more, retry, loading-more, and terminal bands remain fixed to the visible table width while data columns scroll horizontally beneath them. Incremental loading retains existing rows and supports automatic sentinel, manual load-more, retry, and terminal states. When grouping is active, each expanded group owns its load band at the end of its member rows; internal group load bands keep their bottom divider, while a terminal group load band yields it to the table edge or footer. The global bottom-of-table loader is not rendered.",
         "dataMode selects the top-level window: infinite appends ungrouped rows through dsLoadMore when hasMore is true, and pagination renders the controlled page supplied by the application and emits dsPaginationChange. Infinite mode also covers fixed result sets by leaving hasMore false. In a grouped paginated table, pagination counts and windows only parent groups; each expanded parent can still append its own members through dsGroupLoadMore. The application owns requests, cancellation, cursors, deduplication, slicing, and query identity.",
         "When pagination enables Fit to page on a bounded table, the table proposes the number of complete top-level rows that fit below its column header. Grouped tables count group headers only; member rows never affect capacity. Selecting Fit captures that numeric snapshot. A changed fitIdentity requests one fresh snapshot for a new query shape, while viewport resizing alone does not change the active controlled page size.",
         "Rows opt into complete-row activation with interactive and emit dsRowActivate without owning navigation. Selection paints through the shared selected ::before layer; interactive hover and press paint through the shared ::after layer.",
@@ -1234,7 +1234,7 @@
     },
     {
       "path": "src/wc/components/Table/Table.tsx",
-      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport {\n  deriveTableSelectionState,\n  formatTableResultSummary,\n  isTableCellAction,\n  nextTableSortState,\n  tableColumnSize,\n  tableModelIssues,\n  tableRows,\n  tableRowSelectionLabel,\n  toggleAllLoadedTableRows,\n  toggleTableGroupCollapsed,\n  toggleTableGroupSelection,\n  nextTableGroupsCollapsed,\n  toggleTableRowSelection,\n} from './table-model';\nimport {\n  resolveTableCellImageTracks,\n  resolveTableCellPresentation,\n  tableCellImageVariant,\n  tableCellTextOverflowProps,\n  type TableCellPresentation,\n} from './table-cell-model';\nimport {\n  createTableRenderModel,\n  type TableRenderModel,\n} from './table-render-model';\nimport {\n  isRenderableTableActionMenu,\n  isTableCellActionMenu,\n  nextTableActionMenuElementId,\n  tableActionMenuSections,\n  tableActionTriggerId,\n} from './table-action-menu';\nimport {\n  nextTableColumnCustomizerElementId,\n  resolveTableColumnOrder,\n  resolveTableHiddenColumnIds,\n  resolveTableVisibleColumns,\n  tableColumnCustomizerMenuItems,\n  toggleTableColumnHidden,\n} from './table-column-customizer';\nimport {\n  nextTableDataModeSwitcherElementId,\n  tableDataModeFromMenuItem,\n  tableDataModeMenuItems,\n} from './table-data-mode-switcher';\nimport {\n  resolveTableTruncateTrack,\n  tableTruncateLabel,\n} from './table-truncate';\nimport { TableLayoutController } from './table-layout-controller';\nimport { TableLoadController } from './table-load-controller';\nimport { TableGroupLoadController } from './table-group-load-controller';\nimport type { PaginationChangeDetail } from '../Pagination/pagination-types';\nimport type { MenuItemData, MenuReorderDetail } from '../Menu/menu-types';\nimport { resolvePaginationState } from '../Pagination/pagination-model';\nimport { resolveCssLengthPx } from '../../utils/resolve-css-length-px';\nimport { isElementTruncated } from '../../utils/is-element-truncated';\nimport { resolveSafeUrl } from '../../utils/safe-url';\nimport { resolveTableFitPageSize } from './table-pagination-fit';\nimport {\n  TableViewportFitController,\n  type TableViewportFitMetrics,\n} from './table-viewport-fit-controller';\nimport type {\n  TableCaptionVisibility,\n  TableCellActionDetail,\n  TableCellLineClamp,\n  TableCellSkeleton,\n  TableCellTextRun,\n  TableColumn,\n  TableColumnsConfigChangeDetail,\n  TableDataMode,\n  TableDataModeChangeDetail,\n  TableGroup,\n  TableGroupCollapseChangeDetail,\n  TableGroupLoadMoreDetail,\n  TableGroupingState,\n  TableLoadMoreDetail,\n  TableLoadMoreMode,\n  TablePaginationState,\n  TableRow,\n  TableRowActivateDetail,\n  TableSelectionChangeDetail,\n  TableSelectionMode,\n  TableSortChangeDetail,\n  TableSortState,\n} from './table-types';\n\n@Component({\n  tag: 'ds-table',\n  styleUrls: [\n    '../../utils/focus-ring.css',\n    '../../utils/interaction-fill.css',\n    'Table.css',\n  ],\n  scoped: true,\n})\nexport class Table {\n  @Element() el!: HTMLElement;\n  /** Stable column definitions. Assign through JavaScript. */\n  @Prop() columns: TableColumn[] = [];\n  /** Ungrouped row data. Ignored while grouping is active. Assign through JavaScript. */\n  @Prop() rows: TableRow[] = [];\n  /** One level of application-owned grouped data. Assign through JavaScript. */\n  @Prop() groups: TableGroup[] = [];\n  /** Controlled grouping column. Applications supply groups in their final fixed order. */\n  @Prop() grouping: TableGroupingState | null = null;\n  /** Controlled member-row sort state. */\n  @Prop() sort: TableSortState | null = null;\n  /** Controlled collapsed group identities. Groups not listed remain expanded. */\n  @Prop() collapsedGroupIds: string[] = [];\n\n  /** Required accessible table name, retained as a native caption. */\n  @Prop() caption!: string;\n  /** Shows a matching presentational title bar above the native table frame. */\n  @Prop() captionVisibility: TableCaptionVisibility = 'hidden';\n  /**\n   * Opt in to the table-owned column customizer. The `columns` prop remains the\n   * catalog; hidden and ordered columns are controlled separately. The trigger\n   * opens the shared Menu of live show/hide switch rows.\n   */\n  @Prop() columnCustomizer: boolean = false;\n  /** Controlled hidden data-column identities. Action ids are ignored. */\n  @Prop() hiddenColumnIds: string[] = [];\n  /** Controlled data-column identities in display order. Omitted ids append in catalog order. */\n  @Prop() columnOrder: string[] = [];\n  /**\n   * Optional result summary footer. When both `displayedCount` and `totalCount`\n   * are finite numbers, the table shows “Displaying {displayed} of {total}”.\n   */\n  @Prop() displayedCount: number | undefined;\n  @Prop() totalCount: number | undefined;\n  /** Supports {displayed} and {total} placeholders. */\n  @Prop() resultSummaryLabel: string = 'Displaying {displayed} of {total}';\n  @Prop() stickyHeader: boolean = false;\n  /** Maximum scroll-region height. Numbers resolve to CSS pixels. */\n  @Prop() maxHeight: string | number | undefined;\n  /** Fixed height for the complete header, table frame, and footer composition. */\n  @Prop() height: string | number | undefined;\n  /** Fit the complete table composition to its nearest vertical scrollport. */\n  @Prop() fitViewport: boolean = false;\n  /** Reserved space above a viewport-fitted table once surrounding chrome is compact. */\n  @Prop() viewportInsetBlockStart: string | number = 0;\n  /** Reserved space below a viewport-fitted table. */\n  @Prop() viewportInsetBlockEnd: string | number = 0;\n  /** Optional explicit label for the horizontal/vertical scroll region. */\n  @Prop() scrollLabel: string | undefined;\n\n  @Prop() selectionMode: TableSelectionMode = 'none';\n  /** Controlled selected row identities. IDs outside the loaded rows are preserved. */\n  @Prop() selectedRowIds: string[] = [];\n\n  /** Initial loading state. Existing rows stay visible; incremental loading uses loadingMore. */\n  @Prop() loading: boolean = false;\n  /** Initial-loading rows. Defaults to ten so bounded tables retain a useful filled viewport. */\n  @Prop() skeletonRows: number = 10;\n  @Prop() emptyHeading: string = 'No results';\n  @Prop() emptyBody: string = 'No data is available.';\n  /** Initial error state. Existing rows stay visible; incremental failures use loadMoreError. */\n  @Prop() error: boolean = false;\n  @Prop() errorHeading: string = 'Unable to load data';\n  @Prop() errorBody: string = 'The data could not be loaded.';\n  @Prop() emptyCellLabel: string = 'Not available';\n\n  /** Top-level data-window strategy. Group member loading remains group-owned. */\n  @Prop() dataMode: TableDataMode = 'infinite';\n  /** Opt in to the table-owned control for choosing between supported data modes. */\n  @Prop() dataModeSwitcher: boolean = false;\n  @Prop() dataModeSwitcherLabel: string = 'Change table variation';\n  @Prop() dataModeMenuLabel: string = 'Table variation';\n  @Prop() infiniteModeLabel: string = 'Infinite scroll';\n  @Prop() paginationModeLabel: string = 'Pagination + Infinite groups';\n  /** Controlled top-level pagination state. Required when dataMode is pagination. */\n  @Prop() pagination: TablePaginationState | null = null;\n  @Prop() loadMoreMode: TableLoadMoreMode = 'auto';\n  @Prop() hasMore: boolean = false;\n  @Prop() loadingMore: boolean = false;\n  @Prop() loadMoreError: string | undefined;\n  /** Reset key for a new query/group/sort dataset. */\n  @Prop() loadIdentity: string | number = 'default';\n  /** IntersectionObserver root margin in CSS pixels. */\n  @Prop() loadMoreThreshold: number = 0;\n  @Prop() loadMoreLabel: string = 'Load more';\n  @Prop() retryLabel: string = 'Retry';\n  @Prop() loadingMoreLabel: string = 'Loading more items';\n  @Prop() endOfResultsLabel: string = 'All results loaded';\n  /** Supports {count} and {total} placeholders. */\n  @Prop() rowsLoadedLabel: string = '{count} more rows loaded. {total} rows loaded.';\n  @Prop() groupLoadMoreLabel: string = 'Load more';\n  /** Supports the {group} placeholder. */\n  @Prop() groupLoadMoreAriaLabel: string = 'Load more {group} results';\n  /** Supports the {group} placeholder. */\n  @Prop() groupRetryLabel: string = 'Retry loading {group} results';\n  /** Supports the {group} placeholder. */\n  @Prop() groupLoadingMoreLabel: string = 'Loading more items';\n  /** Supports the {group} placeholder. */\n  @Prop() groupEndOfResultsLabel: string = 'All {group} results loaded';\n  /** Supports {group}, {count}, {loaded}, and {total} placeholders. */\n  @Prop() groupRowsLoadedLabel: string = '{count} more rows loaded in {group}. {loaded} of {total} rows loaded.';\n\n  @Event() dsSortChange!: EventEmitter<TableSortChangeDetail>;\n  @Event() dsGroupCollapseChange!: EventEmitter<TableGroupCollapseChangeDetail>;\n  @Event() dsSelectionChange!: EventEmitter<TableSelectionChangeDetail>;\n  @Event() dsLoadMore!: EventEmitter<TableLoadMoreDetail>;\n  @Event() dsGroupLoadMore!: EventEmitter<TableGroupLoadMoreDetail>;\n  @Event() dsPaginationChange!: EventEmitter<PaginationChangeDetail>;\n  @Event() dsCellAction!: EventEmitter<TableCellActionDetail>;\n  @Event() dsRowActivate!: EventEmitter<TableRowActivateDetail>;\n  @Event() dsColumnsConfigChange!: EventEmitter<TableColumnsConfigChangeDetail>;\n  @Event() dsDataModeChange!: EventEmitter<TableDataModeChangeDetail>;\n\n  @State() private overflowStart = false;\n  @State() private overflowEnd = false;\n  @State() private scrollable = false;\n  @State() private announcement = '';\n  @State() private activeStickyGroupId: string | null = null;\n  @State() private viewportFitSettled = false;\n  @State() private headerPresent = false;\n  @State() private fitPageSize: number | undefined;\n  @State() private actionMenu: { rowId: string; columnId: string } | null = null;\n  @State() private actionMenuInitialFocusVisible = false;\n  @State() private truncateTooltipLabel = '';\n  @State() private columnCustomizerOpen = false;\n  @State() private columnCustomizerInitialFocusVisible = false;\n  @State() private dataModeSwitcherOpen = false;\n  @State() private dataModeSwitcherInitialFocusVisible = false;\n\n  private readonly actionMenuElementId = nextTableActionMenuElementId();\n  private readonly columnCustomizerElementId = nextTableColumnCustomizerElementId();\n  private readonly dataModeSwitcherElementId = nextTableDataModeSwitcherElementId();\n  private truncateTooltipEl?: HTMLDsTooltipElement;\n  private truncateAnchor: HTMLElement | null = null;\n  private truncateTooltipBound = false;\n\n  private rootEl: HTMLElement | null = null;\n  private viewportEl: HTMLElement | null = null;\n  private frameEl: HTMLElement | null = null;\n  private interactiveHeadEl: HTMLTableSectionElement | null = null;\n  private collapseAllOverlayEl: HTMLElement | null = null;\n  private stickyHeaderTableEl: HTMLTableElement | null = null;\n  private tableEl: HTMLTableElement | null = null;\n  private sentinelEl: HTMLElement | null = null;\n  private incrementalWindowActive = false;\n  private readonly groupSentinelEls = new Map<string, HTMLElement>();\n  private previousModelWarning = '';\n  private hasLoaded = false;\n  private renderedModel: TableRenderModel | null = null;\n  private stickyGroupConnected = false;\n  private headerSlotObserver: MutationObserver | null = null;\n  private fitResizeObserver: ResizeObserver | null = null;\n  private fitObservedViewport: HTMLElement | null = null;\n  private fitObservedTable: HTMLTableElement | null = null;\n  private fitMeasurementPending = false;\n  private readonly layoutController = new TableLayoutController({\n    elements: () => ({\n      viewport: this.viewportEl,\n      stickyHeaderTable: this.stickyHeaderTableEl,\n      collapseAllOverlay: this.collapseAllOverlayEl,\n      frame: this.frameEl,\n      interactiveHead: this.interactiveHeadEl,\n    }),\n    mode: () => ({\n      documentStickyHeader: this.documentStickyHeader,\n      floatingCollapseAll: this.renderedModel?.collapseAllHost?.mode === 'floating',\n      clampVerticalOverscroll: this.fitViewport && this.viewportFitSettled,\n    }),\n    verticalEdgeWheel: deltaY => this.viewportFitController.scrollOuterBy(deltaY),\n    overflowChanged: state => {\n      if (state.start !== this.overflowStart) this.overflowStart = state.start;\n      if (state.end !== this.overflowEnd) this.overflowEnd = state.end;\n      if (state.scrollable !== this.scrollable) this.scrollable = state.scrollable;\n    },\n  });\n  private readonly loadController = new TableLoadController({\n    state: () => ({\n      lazyLoading: this.dataMode === 'infinite' && !this.grouped,\n      loadMoreMode: this.loadMoreMode,\n      hasMore: this.hasMore,\n      loadingMore: this.loadingMore,\n      loadMoreError: this.loadMoreError,\n      loadIdentity: this.loadIdentity,\n      loadMoreThreshold: this.loadMoreThreshold,\n      containedScroll: this.containedScroll,\n      loadingMoreLabel: this.loadingMoreLabel,\n      endOfResultsLabel: this.endOfResultsLabel,\n      rowsLoadedLabel: this.rowsLoadedLabel,\n      loadedRowCount: this.currentLoadedRowCount(),\n      viewport: this.viewportEl,\n      sentinel: this.sentinelEl,\n    }),\n    announce: message => {\n      this.announcement = message;\n    },\n    request: detail => {\n      this.dsLoadMore.emit(detail);\n    },\n  });\n  private readonly groupLoadController = new TableGroupLoadController({\n    state: () => ({\n      enabled: this.grouped,\n      loadMoreMode: this.loadMoreMode,\n      loadMoreThreshold: this.loadMoreThreshold,\n      containedScroll: this.containedScroll,\n      groups: this.groups,\n      viewport: this.viewportEl,\n      sentinels: this.groupSentinelEls,\n      loadingMoreLabel: this.groupLoadingMoreLabel,\n      endOfResultsLabel: this.groupEndOfResultsLabel,\n      rowsLoadedLabel: this.groupRowsLoadedLabel,\n    }),\n    announce: message => {\n      this.announcement = message;\n    },\n    request: detail => {\n      this.dsGroupLoadMore.emit(detail);\n    },\n  });\n  private readonly viewportFitController = new TableViewportFitController({\n    enabled: () => this.fitViewport,\n    elements: () => ({ host: this.el, surface: this.rootEl }),\n    insets: () => ({\n      blockStart: this.viewportInsetBlockStart,\n      blockEnd: this.viewportInsetBlockEnd,\n    }),\n    fitChanged: (metrics: TableViewportFitMetrics | null) => {\n      const settled = metrics?.settled ?? false;\n      if (settled !== this.viewportFitSettled) this.viewportFitSettled = settled;\n    },\n  });\n\n  componentWillLoad(): void {\n    this.incrementalWindowActive = this.hasIncrementalState;\n    this.syncHeaderSlotPresence();\n    this.loadController.initialize();\n    this.groupLoadController.initialize();\n    this.warnModelIssues();\n  }\n\n  componentDidLoad(): void {\n    this.hasLoaded = true;\n    this.layoutController.connect();\n    this.loadController.connect();\n    this.groupLoadController.connect();\n    this.viewportFitController.connect();\n    this.syncStickyGroupConnection();\n    this.connectHeaderSlotObserver();\n    this.connectFitObserver();\n    this.syncFitPageSize();\n    this.connectTruncateTooltip();\n  }\n\n  componentDidRender(): void {\n    this.layoutController.refresh();\n    this.loadController.refresh();\n    this.groupLoadController.refresh();\n    this.viewportFitController.refresh();\n    this.syncStickyGroupConnection();\n    this.connectFitObserver();\n    this.syncFitPageSize();\n    if (this.stickyGroupConnected) this.updateStickyGroup();\n  }\n\n  connectedCallback(): void {\n    if (!this.hasLoaded) return;\n    this.layoutController.connect();\n    this.loadController.connect();\n    this.groupLoadController.connect();\n    this.viewportFitController.connect();\n    this.syncStickyGroupConnection();\n    this.connectHeaderSlotObserver();\n    this.connectFitObserver();\n    this.connectTruncateTooltip();\n  }\n\n  disconnectedCallback(): void {\n    this.layoutController.disconnect();\n    this.loadController.disconnect();\n    this.groupLoadController.disconnect();\n    this.viewportFitController.disconnect();\n    this.disconnectStickyGroup();\n    this.headerSlotObserver?.disconnect();\n    this.headerSlotObserver = null;\n    this.disconnectFitObserver();\n    this.disconnectTruncateTooltip();\n    this.closeColumnCustomizer();\n  }\n\n  private syncHeaderSlotPresence = () => {\n    this.headerPresent = !!this.el.querySelector('[slot=\"header\"]');\n  };\n\n  private connectHeaderSlotObserver(): void {\n    if (this.headerSlotObserver || typeof MutationObserver === 'undefined') return;\n    this.headerSlotObserver = new MutationObserver(this.syncHeaderSlotPresence);\n    this.headerSlotObserver.observe(this.el, { childList: true });\n    this.syncHeaderSlotPresence();\n  }\n\n  private connectStickyGroup(): void {\n    if (this.stickyGroupConnected || typeof window === 'undefined') return;\n    this.stickyGroupConnected = true;\n    document.addEventListener('scroll', this.updateStickyGroup, {\n      capture: true,\n      passive: true,\n    });\n    window.addEventListener('resize', this.updateStickyGroup, { passive: true });\n    this.updateStickyGroup();\n  }\n\n  private syncStickyGroupConnection(): void {\n    if (this.documentStickyHeader && this.grouped) {\n      this.connectStickyGroup();\n      return;\n    }\n\n    this.disconnectStickyGroup();\n    this.frameEl?.style.removeProperty('--_table-sticky-group-top');\n    if (this.activeStickyGroupId !== null) {\n      this.activeStickyGroupId = null;\n    }\n  }\n\n  private disconnectStickyGroup(): void {\n    if (!this.stickyGroupConnected || typeof window === 'undefined') return;\n    this.stickyGroupConnected = false;\n    document.removeEventListener('scroll', this.updateStickyGroup, true);\n    window.removeEventListener('resize', this.updateStickyGroup);\n  }\n\n  private readonly updateStickyGroup = (): void => {\n    if (!this.documentStickyHeader || !this.grouped || !this.frameEl || !this.tableEl) {\n      if (this.activeStickyGroupId !== null) this.activeStickyGroupId = null;\n      return;\n    }\n\n    const stickyHeader = this.frameEl.querySelector<HTMLElement>(\n      '.ds-table__document-sticky-header',\n    );\n    if (!stickyHeader) return;\n    const threshold = stickyHeader.getBoundingClientRect().bottom;\n    let activeGroupId: string | null = null;\n    let activeGroupTop = threshold;\n    for (const body of this.tableEl.querySelectorAll<HTMLElement>('tbody[data-group-id]')) {\n      const source = body.querySelector<HTMLElement>('.ds-table__group-cell');\n      if (!source) continue;\n      const sourceRect = source.getBoundingClientRect();\n      const bodyRect = body.getBoundingClientRect();\n      if (sourceRect.top <= threshold && bodyRect.bottom > threshold) {\n        activeGroupId = body.dataset.groupId ?? null;\n        // A sticky section is bounded by its own row group. As that boundary\n        // approaches the sticky lane, move the outgoing section bar with it so\n        // the incoming source bar pushes it away instead of rendering beneath it.\n        activeGroupTop = Math.min(threshold, bodyRect.bottom - sourceRect.height);\n      }\n    }\n\n    const frameRect = this.frameEl.getBoundingClientRect();\n    this.frameEl.style.setProperty(\n      '--_table-sticky-group-top',\n      `${activeGroupTop - frameRect.top}px`,\n    );\n\n    if (activeGroupId !== this.activeStickyGroupId) {\n      this.activeStickyGroupId = activeGroupId;\n      return;\n    }\n  };\n\n  @Watch('columns')\n  @Watch('grouping')\n  @Watch('hiddenColumnIds')\n  @Watch('columnOrder')\n  @Watch('columnCustomizer')\n  handleStructureChange(): void {\n    this.warnModelIssues();\n    this.loadController.structureChanged();\n    this.groupLoadController.structureChanged();\n  }\n\n  @Watch('rows')\n  @Watch('groups')\n  handleDataChange(): void {\n    if (this.grouped) this.groupLoadController.dataChanged();\n    else this.loadController.dataChanged();\n    this.warnModelIssues();\n    this.syncActionMenu();\n  }\n\n  @Watch('loadIdentity')\n  handleLoadIdentityChange(): void {\n    this.incrementalWindowActive = this.hasIncrementalState;\n    this.loadController.identityChanged();\n  }\n\n  @Watch('loadMoreMode')\n  @Watch('loadMoreThreshold')\n  handleLazyConfigurationChange(): void {\n    this.loadController.configurationChanged();\n    this.groupLoadController.configurationChanged();\n  }\n\n  @Watch('dataMode')\n  handleDataModeChange(): void {\n    this.incrementalWindowActive = this.hasIncrementalState;\n    this.handleLazyConfigurationChange();\n  }\n\n  @Watch('pagination')\n  handlePaginationChange(\n    pagination: TablePaginationState | null,\n    previous: TablePaginationState | null,\n  ): void {\n    if (\n      pagination?.pageSizeMode === 'fit' &&\n      pagination.fitIdentity !== previous?.fitIdentity\n    ) {\n      this.fitMeasurementPending = true;\n    }\n  }\n\n  @Watch('loadingMore')\n  handleLoadingMoreChange(loading: boolean): void {\n    if (loading) this.incrementalWindowActive = true;\n    if (!this.grouped) this.loadController.loadingChanged(loading);\n  }\n\n  @Watch('loadMoreError')\n  handleLoadMoreErrorChange(error: string | undefined): void {\n    if (error?.trim()) this.incrementalWindowActive = true;\n    if (!this.grouped) this.loadController.errorChanged(error);\n  }\n\n  @Watch('hasMore')\n  handleHasMoreChange(hasMore: boolean, hadMore: boolean): void {\n    if (hasMore) this.incrementalWindowActive = true;\n    if (!this.grouped) this.loadController.hasMoreChanged(hasMore, hadMore);\n  }\n\n  @Watch('columnCustomizer')\n  @Watch('captionVisibility')\n  handleColumnCustomizerAvailability(): void {\n    if (!this.showsColumnCustomizer) this.closeColumnCustomizer();\n  }\n\n  @Watch('dataModeSwitcher')\n  @Watch('captionVisibility')\n  handleDataModeSwitcherAvailability(): void {\n    if (!this.showsDataModeSwitcher) this.closeDataModeSwitcher();\n  }\n\n  private get grouped(): boolean {\n    return this.grouping !== null;\n  }\n\n  private get hasIncrementalState(): boolean {\n    return this.dataMode === 'infinite' &&\n      (this.hasMore || this.loadingMore || !!this.loadMoreError?.trim());\n  }\n\n  private get selectable(): boolean {\n    return this.selectionMode === 'multiple';\n  }\n\n  private get visibleColumns(): TableColumn[] {\n    return resolveTableVisibleColumns(this.columns, {\n      columnCustomizer: this.columnCustomizer,\n      hiddenColumnIds: this.hiddenColumnIds,\n      columnOrder: this.columnOrder,\n    });\n  }\n\n  private get showsColumnCustomizer(): boolean {\n    return this.columnCustomizer && this.captionVisibility === 'visible';\n  }\n\n  private get showsDataModeSwitcher(): boolean {\n    return this.dataModeSwitcher && this.captionVisibility === 'visible';\n  }\n\n  private get showsCaptionTrailing(): boolean {\n    return this.showsDataModeSwitcher || this.showsColumnCustomizer;\n  }\n\n  private get documentStickyHeader(): boolean {\n    return this.stickyHeader && !this.containedScroll;\n  }\n\n  private get fixedHeight(): boolean {\n    return !this.fitViewport && this.resolvedHeight !== undefined;\n  }\n\n  private get boundedComposition(): boolean {\n    return this.fitViewport || this.fixedHeight;\n  }\n\n  private get containedScroll(): boolean {\n    return this.boundedComposition || this.resolvedMaxHeight !== undefined;\n  }\n\n  private connectFitObserver(): void {\n    if (typeof ResizeObserver === 'undefined') return;\n    if (this.fitObservedViewport === this.viewportEl && this.fitObservedTable === this.tableEl) {\n      return;\n    }\n    this.disconnectFitObserver();\n    this.fitObservedViewport = this.viewportEl;\n    this.fitObservedTable = this.tableEl;\n    this.fitResizeObserver = new ResizeObserver(this.syncFitPageSize);\n    if (this.fitObservedViewport) this.fitResizeObserver.observe(this.fitObservedViewport);\n    if (this.fitObservedTable) this.fitResizeObserver.observe(this.fitObservedTable);\n  }\n\n  private disconnectFitObserver(): void {\n    this.fitResizeObserver?.disconnect();\n    this.fitResizeObserver = null;\n    this.fitObservedViewport = null;\n    this.fitObservedTable = null;\n  }\n\n  private readonly syncFitPageSize = (): void => {\n    const pagination = this.dataMode === 'pagination' ? this.pagination : null;\n    if (!pagination?.fitToPage || !this.containedScroll || !this.viewportEl || !this.tableEl) {\n      if (this.fitPageSize !== undefined) this.fitPageSize = undefined;\n      this.fitMeasurementPending = false;\n      return;\n    }\n    const header = this.tableEl.querySelector<HTMLElement>(\n      '.ds-table__head .ds-table__header-row',\n    );\n    const item = this.tableEl.querySelector<HTMLElement>(\n      this.grouped ? '.ds-table__group-row' : '.ds-table__body .ds-table__row',\n    );\n    const itemBlockSize = item?.getBoundingClientRect().height || resolveCssLengthPx(\n      'var(--ds-table-row-min-block-size, var(--dimension-size-500))',\n      0,\n      this.rootEl ?? this.el,\n    );\n    const next = resolveTableFitPageSize({\n      viewportBlockSize: this.viewportEl.clientHeight,\n      headerBlockSize: header?.getBoundingClientRect().height ?? 0,\n      itemBlockSize,\n    });\n    if (next !== this.fitPageSize) this.fitPageSize = next;\n    if (!this.fitMeasurementPending || pagination.pageSizeMode !== 'fit' || next === undefined) {\n      return;\n    }\n    this.fitMeasurementPending = false;\n    if (next === pagination.pageSize && pagination.pageIndex === 0) return;\n    this.dsPaginationChange.emit({\n      pageIndex: 0,\n      pageSize: next,\n      pageSizeMode: 'fit',\n      totalItems: pagination.totalItems,\n      pageSizeOptions: pagination.pageSizeOptions ?? [25, 50, 100, 200],\n      fitToPage: true,\n      fitPageSize: next,\n      fitPageSizeLabel: pagination.fitPageSizeLabel ?? 'Fit to page',\n      fitPageSizeTriggerLabel: pagination.fitPageSizeTriggerLabel ?? 'Fit',\n      itemLabel: pagination.itemLabel ?? 'items',\n      pageSizeLabel: pagination.pageSizeLabel ?? 'Items',\n      ariaLabel: pagination.ariaLabel ?? `${this.caption} pagination`,\n      previousPageIndex: pagination.pageIndex,\n      previousPageSize: pagination.pageSize,\n      previousPageSizeMode: 'fit',\n      reason: 'fit',\n    });\n  };\n\n  private handlePaginationKeyDown(event: KeyboardEvent): void {\n    const pagination = this.dataMode === 'pagination' ? this.pagination : null;\n    if (\n      !pagination ||\n      this.loading ||\n      event.defaultPrevented ||\n      event.altKey ||\n      event.ctrlKey ||\n      event.metaKey ||\n      event.shiftKey ||\n      (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')\n    ) {\n      return;\n    }\n\n    const fromDirectionalControl = event.composedPath().some(node => {\n      if (!(node instanceof HTMLElement)) return false;\n      return node.tagName === 'DS-SELECT' ||\n        node.tagName === 'DS-MENU' ||\n        ['INPUT', 'SELECT', 'TEXTAREA'].includes(node.tagName) ||\n        node.isContentEditable ||\n        node.getAttribute('role') === 'slider';\n    });\n    if (fromDirectionalControl) return;\n\n    const state = resolvePaginationState(pagination);\n    const pageIndex = event.key === 'ArrowLeft' ? state.pageIndex - 1 : state.pageIndex + 1;\n    if (pageIndex < 0 || pageIndex >= state.totalPages) return;\n\n    event.preventDefault();\n    this.dsPaginationChange.emit({\n      pageIndex,\n      pageSize: state.pageSize,\n      pageSizeMode: state.pageSizeMode,\n      totalItems: state.totalItems,\n      pageSizeOptions: state.pageSizeOptions,\n      fitToPage: pagination.fitToPage ?? false,\n      fitPageSize: this.fitPageSize ?? pagination.fitPageSize,\n      fitPageSizeLabel: pagination.fitPageSizeLabel ?? 'Fit to page',\n      fitPageSizeTriggerLabel: pagination.fitPageSizeTriggerLabel ?? 'Fit',\n      itemLabel: pagination.itemLabel ?? 'items',\n      pageSizeLabel: pagination.pageSizeLabel ?? 'Items',\n      ariaLabel: pagination.ariaLabel ?? `${this.caption} pagination`,\n      previousPageIndex: state.pageIndex,\n      previousPageSize: state.pageSize,\n      previousPageSizeMode: state.pageSizeMode,\n      reason: 'page',\n    });\n  }\n\n  private currentLoadedRows(): TableRow[] {\n    return tableRows(this.rows, this.groups, this.grouped);\n  }\n\n  private currentLoadedRowCount(): number {\n    return this.grouped\n      ? this.groups.reduce((count, group) => count + group.rows.length, 0)\n      : this.rows.length;\n  }\n\n  private createRenderModel(): TableRenderModel {\n    return createTableRenderModel({\n      columns: this.visibleColumns,\n      rows: this.rows,\n      groups: this.groups,\n      grouped: this.grouped,\n      selectionMode: this.selectionMode,\n      selectedRowIds: this.selectedRowIds,\n      collapsedGroupIds: this.collapsedGroupIds,\n    });\n  }\n\n  private get resolvedMaxHeight(): string | undefined {\n    if (this.maxHeight == null || this.maxHeight === '') return undefined;\n    return typeof this.maxHeight === 'number' ? `${Math.max(0, this.maxHeight)}px` : this.maxHeight;\n  }\n\n  private get resolvedHeight(): string | undefined {\n    if (this.height == null || this.height === '') return undefined;\n    return typeof this.height === 'number' ? `${Math.max(0, this.height)}px` : this.height;\n  }\n\n  private warnModelIssues(): void {\n    const issues = tableModelIssues(this.columns, this.rows, this.groups, this.grouped);\n    const visibleColumns = this.visibleColumns;\n    if (!this.caption?.trim()) issues.unshift('A non-empty caption is required.');\n    if (this.grouping) {\n      const groupingColumn = this.columns.find(column => column.id === this.grouping!.columnId);\n      if (!groupingColumn) {\n        issues.push(`Grouping references unknown column id: ${this.grouping.columnId}`);\n      } else if (!visibleColumns.some(column => column.id === groupingColumn.id)) {\n        issues.push(`Grouping references hidden column id: ${this.grouping.columnId}`);\n      }\n    }\n    if (this.sort) {\n      const sortColumn = this.columns.find(column =>\n        column.id === this.sort!.columnId ||\n        column.headerSegments?.some(segment => segment.sortKey === this.sort!.columnId),\n      );\n      if (!sortColumn) {\n        issues.push(`Sorting references unknown column id: ${this.sort.columnId}`);\n      } else if (!visibleColumns.some(column => column.id === sortColumn.id)) {\n        issues.push(`Sorting references hidden column id: ${this.sort.columnId}`);\n      }\n    }\n    const stickyStart = visibleColumns.filter(column => column.sticky === 'start');\n    const stickyEnd = visibleColumns.filter(column => column.sticky === 'end');\n    if (stickyStart.length > 1 || (this.selectable && stickyStart.length > 0)) {\n      issues.push('Only one sticky start column is supported, and row selection already owns that lane.');\n    }\n    if (stickyEnd.length > 1) issues.push('Only one sticky end column is supported.');\n    for (const column of [...stickyStart, ...stickyEnd]) {\n      if (!tableColumnSize(column)) issues.push(`Sticky column ${column.id} requires an explicit size.`);\n    }\n    const message = issues.join(' ');\n    if (!message || message === this.previousModelWarning) return;\n    this.previousModelWarning = message;\n    console.warn(`[ds-table] ${message}`);\n  }\n\n  private emitSort(column: TableColumn, sortKey = column.id): void {\n    if (!column.sortable) return;\n    this.dsSortChange.emit({ sort: nextTableSortState(this.sort, sortKey) });\n  }\n\n  private sortButtonLabel(column: TableColumn, sortKey = column.id, label = column.header): string {\n    if (this.sort?.columnId !== sortKey) return `Sort ${label} ascending`;\n    if (this.sort.direction === 'asc') return `Sort ${label} descending. Currently ascending.`;\n    return `Sort ${label} ascending. Currently descending.`;\n  }\n\n  private emitRowSelection(row: TableRow): void {\n    const next = toggleTableRowSelection(this.selectedRowIds, row);\n    const selected = next.includes(row.id);\n    this.dsSelectionChange.emit({\n      selectedRowIds: next,\n      scope: 'row',\n      changedRowId: row.id,\n      selected,\n    });\n  }\n\n  private emitAllSelection(): void {\n    const loadedRows = this.currentLoadedRows();\n    const selection = deriveTableSelectionState(loadedRows, this.selectedRowIds);\n    this.dsSelectionChange.emit({\n      selectedRowIds: toggleAllLoadedTableRows(this.selectedRowIds, loadedRows),\n      scope: 'all-loaded',\n      selected: !selection.allSelected,\n    });\n  }\n\n  private emitGroupSelection(group: TableGroup): void {\n    const state = deriveTableSelectionState(group.rows, this.selectedRowIds);\n    this.dsSelectionChange.emit({\n      selectedRowIds: toggleTableGroupSelection(this.selectedRowIds, group.rows),\n      scope: 'group',\n      groupId: group.id,\n      selected: !state.allSelected,\n    });\n  }\n\n  private rowEventOwnsActivation(event: Event): boolean {\n    const currentTarget = event.currentTarget;\n    return !event.composedPath().some(target => {\n      if (!(target instanceof HTMLElement) || target === currentTarget) return false;\n      return target.matches(\n        'button, a, input, select, textarea, [role=\"button\"], [role=\"checkbox\"], [popover], ds-button-unfilled, ds-menu',\n      );\n    });\n  }\n\n  private emitRowActivation(row: TableRow, event: Event): void {\n    if (!row.interactive || row.disabled || !this.rowEventOwnsActivation(event)) return;\n    this.dsRowActivate.emit({ rowId: row.id });\n  }\n\n  private syncActionMenu(): void {\n    if (!this.actionMenu) return;\n    const row = tableRows(this.rows, this.groups, this.grouped).find(\n      candidate => candidate.id === this.actionMenu?.rowId,\n    );\n    const value = row && !row.disabled ? row.cells[this.actionMenu.columnId] : undefined;\n    if (!isTableCellAction(value) || !isRenderableTableActionMenu(value)) {\n      this.actionMenu = null;\n    }\n  }\n\n  private closeActionMenu(): void {\n    this.actionMenu = null;\n  }\n\n  private handleActionMenuSelect(item: MenuItemData): void {\n    const open = this.actionMenu;\n    const actionId = item.value;\n    if (!open || !actionId || item.isInactive) return;\n    this.dsCellAction.emit({\n      actionId,\n      rowId: open.rowId,\n      columnId: open.columnId,\n    });\n    const triggerId = tableActionTriggerId(this.actionMenuElementId, open.rowId, open.columnId);\n    this.closeActionMenu();\n    requestAnimationFrame(() => {\n      const trigger = this.el.querySelector<HTMLElement & { setFocus?: () => void }>(\n        `#${CSS.escape(triggerId)}`,\n      );\n      trigger?.setFocus?.();\n    });\n  }\n\n  private toggleActionMenu(row: TableRow, column: TableColumn, event: MouseEvent): void {\n    if (row.disabled) return;\n    const open =\n      this.actionMenu?.rowId === row.id && this.actionMenu?.columnId === column.id;\n    this.actionMenuInitialFocusVisible = event.detail === 0;\n    this.actionMenu = open ? null : { rowId: row.id, columnId: column.id };\n  }\n\n  private renderOverflowActionMenu() {\n    const open = this.actionMenu;\n    const row = open\n      ? tableRows(this.rows, this.groups, this.grouped).find(candidate => candidate.id === open.rowId)\n      : undefined;\n    const value = row && open ? row.cells[open.columnId] : undefined;\n    const menu = isTableCellAction(value) && isRenderableTableActionMenu(value) ? value : undefined;\n    const sections = menu ? tableActionMenuSections(menu.items) : [];\n    const triggerId = open\n      ? tableActionTriggerId(this.actionMenuElementId, open.rowId, open.columnId)\n      : undefined;\n\n    return (\n      <ds-menu\n        id={this.actionMenuElementId}\n        open={Boolean(open && sections.length)}\n        anchorId={triggerId}\n        align=\"end\"\n        side=\"bottom\"\n        menuLabel={menu?.ariaLabel ?? 'More actions'}\n        initialFocusVisible={this.actionMenuInitialFocusVisible}\n        sections={sections}\n        onDsClose={() => this.closeActionMenu()}\n        onDsSelect={event => this.handleActionMenuSelect(event.detail)}\n      />\n    );\n  }\n\n  private connectTruncateTooltip(): void {\n    if (this.truncateTooltipBound) return;\n    this.el.addEventListener('pointerover', this.onTruncatePointerOver);\n    this.el.addEventListener('pointerout', this.onTruncatePointerOut);\n    this.el.addEventListener('focusin', this.onTruncateFocusIn);\n    this.el.addEventListener('focusout', this.onTruncateFocusOut);\n    this.truncateTooltipBound = true;\n  }\n\n  private disconnectTruncateTooltip(): void {\n    if (!this.truncateTooltipBound) return;\n    this.el.removeEventListener('pointerover', this.onTruncatePointerOver);\n    this.el.removeEventListener('pointerout', this.onTruncatePointerOut);\n    this.el.removeEventListener('focusin', this.onTruncateFocusIn);\n    this.el.removeEventListener('focusout', this.onTruncateFocusOut);\n    this.truncateTooltipBound = false;\n    this.dismissTruncateTooltip();\n  }\n\n  private onTruncatePointerOver = (event: PointerEvent) => {\n    if (event.pointerType === 'touch') return;\n    const track = resolveTableTruncateTrack(event.target);\n    if (!track) return;\n    this.presentOrDismissTruncateTrack(track);\n  };\n\n  private onTruncatePointerOut = (event: PointerEvent) => {\n    if (event.pointerType === 'touch') return;\n    if (resolveTableTruncateTrack(event.relatedTarget)) return;\n    const next = event.relatedTarget;\n    const cell = this.truncateAnchor?.closest('.ds-table__cell');\n    if (cell && next instanceof Node && cell.contains(next)) return;\n    this.dismissTruncateTooltip();\n  };\n\n  private onTruncateFocusIn = (event: FocusEvent) => {\n    const track = resolveTableTruncateTrack(event.target);\n    if (!track) {\n      this.dismissTruncateTooltip();\n      return;\n    }\n    this.presentOrDismissTruncateTrack(track);\n  };\n\n  private onTruncateFocusOut = (event: FocusEvent) => {\n    if (resolveTableTruncateTrack(event.relatedTarget)) return;\n    this.dismissTruncateTooltip();\n  };\n\n  private presentOrDismissTruncateTrack(track: HTMLElement): void {\n    if (!isElementTruncated(track)) {\n      this.dismissTruncateTooltip();\n      return;\n    }\n    const label = tableTruncateLabel(track);\n    if (!label) {\n      this.dismissTruncateTooltip();\n      return;\n    }\n    this.truncateAnchor = track;\n    this.truncateTooltipLabel = label;\n    void this.truncateTooltipEl?.presentFrom(track, label);\n  }\n\n  private dismissTruncateTooltip(): void {\n    this.truncateAnchor = null;\n    if (!this.truncateTooltipLabel && !this.truncateTooltipEl) return;\n    this.truncateTooltipLabel = '';\n    void this.truncateTooltipEl?.dismiss();\n  }\n\n  private renderTruncateTooltip() {\n    return (\n      <ds-tooltip\n        ref={element => {\n          this.truncateTooltipEl = element;\n        }}\n        label={this.truncateTooltipLabel}\n        describedBy={false}\n        wrapLabel={true}\n        size=\"sm\"\n        delay={0}\n        side=\"top\"\n      />\n    );\n  }\n\n  private truncateAttr(lineClamp: TableCellLineClamp) {\n    return lineClamp === 'none' ? undefined : '';\n  }\n\n  private handleRowKeydown(row: TableRow, event: KeyboardEvent): void {\n    if (event.target !== event.currentTarget || (event.key !== 'Enter' && event.key !== ' ')) return;\n    event.preventDefault();\n    this.emitRowActivation(row, event);\n  }\n\n  private renderSelectionControl(\n    label: string,\n    checked: boolean,\n    indeterminate: boolean,\n    disabled: boolean,\n    onActivate: () => void,\n  ) {\n    return (\n      <button\n        class=\"ds-table__selection-control ds-focus-ring ds-interaction-fill__content\"\n        type=\"button\"\n        role=\"checkbox\"\n        aria-label={label}\n        aria-checked={indeterminate ? 'mixed' : String(checked)}\n        disabled={disabled}\n        onClick={onActivate}\n      >\n        <ds-checkbox\n          label=\"\"\n          size=\"md\"\n          checked={checked}\n          indeterminate={indeterminate}\n          presentation={true}\n        />\n      </button>\n    );\n  }\n\n  private renderStickyEdge(sticky: TableColumn['sticky']) {\n    if (!sticky) return null;\n    return (\n      <span\n        class={`ds-table__sticky-edge ds-table__sticky-edge--${sticky}`}\n        aria-hidden=\"true\"\n      />\n    );\n  }\n\n  private renderCollapseAllButton() {\n    return (\n      <ds-button-unfilled\n        class=\"ds-table__collapse-all\"\n        variant=\"icon\"\n        icon=\"ChevronDownUp\"\n        size=\"xs\"\n        style={{ width: 'var(--dimension-size-300)' }}\n        aria-label=\"Collapse all groups\"\n        hasBorder={false}\n        activeFill={false}\n        pressScale={false}\n        onDsClick={event => {\n          event.stopPropagation();\n          this.emitAllGroupsCollapse();\n        }}\n      />\n    );\n  }\n\n  private renderFloatingCollapseAll(model: TableRenderModel) {\n    if (model.collapseAllHost?.mode !== 'floating') return null;\n    return (\n      <span\n        class=\"ds-table__collapse-all-overlay\"\n        ref={element => {\n          this.collapseAllOverlayEl = element ?? null;\n        }}\n      >\n        <span class=\"ds-table__collapse-all-surface ds-control-elevation ds-control-elevation--md\">\n          {this.renderCollapseAllButton()}\n        </span>\n      </span>\n    );\n  }\n\n  private renderColumnHeader(\n    column: TableColumn,\n    model: TableRenderModel,\n    interactive = true,\n    presentational = false,\n  ) {\n    const groupedColumn = this.grouping?.columnId === column.id;\n    const headerSegments = column.headerSegments?.length\n      ? column.headerSegments\n      : [{ label: column.header, sortKey: column.id }];\n    const activeMemberSegment = headerSegments.find(\n      segment => segment.sortKey === this.sort?.columnId,\n    );\n    const activeMemberSort = !!activeMemberSegment;\n    const activeSort = activeMemberSort;\n    const align = column.align ?? 'start';\n    const direction = activeMemberSort ? this.sort!.direction : undefined;\n    const memberAriaSort = activeMemberSort\n      ? (this.sort!.direction === 'asc' ? 'ascending' : 'descending')\n      : undefined;\n\n    const labelControl = (\n      <span class=\"ds-table__header-labels\">\n        {headerSegments.map((segment, index) => {\n          const segmentActive = activeMemberSegment?.sortKey === segment.sortKey;\n          const segmentInteractive = interactive && !!column.sortable;\n          const label = (\n            <ds-text\n              class=\"ds-table__header-label-box ds-control-label-box\"\n              as=\"span\"\n              variant=\"text-caption\"\n              emphasis={segmentActive}\n              color=\"inherit\"\n              lineTruncation={1}\n            >\n              {segment.label}\n            </ds-text>\n          );\n          const control = segmentInteractive ? (\n            <button\n              class=\"ds-table__header-label ds-table__header-label--interactive ds-focus-ring\"\n              type=\"button\"\n              aria-label={this.sortButtonLabel(column, segment.sortKey, segment.label)}\n              data-sort-control=\"label\"\n              data-sort-key={segment.sortKey}\n              data-sort-active={segmentActive ? 'true' : undefined}\n              onClick={() => this.emitSort(column, segment.sortKey)}\n            >\n              {label}\n            </button>\n          ) : (\n            <span class=\"ds-table__header-label ds-table__header-static\">{label}</span>\n          );\n\n          return (\n            <span class=\"ds-table__header-segment\" key={segment.sortKey}>\n              {control}\n              {index < headerSegments.length - 1 && (\n                <ds-text\n                  class=\"ds-table__header-separator\"\n                  as=\"span\"\n                  variant=\"text-caption\"\n                  color=\"tertiary\"\n                  aria-hidden=\"true\"\n                >\n                  {segment.separator ?? '/'}\n                </ds-text>\n              )}\n            </span>\n          );\n        })}\n      </span>\n    );\n    const sortControl = interactive ? (\n      <span class=\"ds-table__sort-slot\">\n        {activeSort && (\n          <ds-button-unfilled\n            class=\"ds-table__sort-direction\"\n            variant=\"icon\"\n            icon={direction === 'asc' ? 'ArrowUp' : 'ArrowDown'}\n            size=\"xs\"\n            aria-label={this.sortButtonLabel(\n              column,\n              activeMemberSegment?.sortKey ?? column.id,\n              activeMemberSegment?.label ?? column.header,\n            )}\n            hasBorder={false}\n            activeFill={false}\n            isActive={true}\n            pressScale={false}\n            data-sort-control=\"direction\"\n            onDsClick={() => this.emitSort(column, activeMemberSegment?.sortKey ?? column.id)}\n          />\n        )}\n      </span>\n    ) : null;\n    const collapseHost = model.collapseAllHost;\n    const actionCollapseHost = collapseHost?.mode === 'action' && collapseHost.columnId === column.id;\n    const blankActionCollapseHost = actionCollapseHost &&\n      !column.header.trim() &&\n      !column.headerSegments?.length;\n    const collapseControl =\n      interactive && actionCollapseHost ? (\n        <span class=\"ds-table__collapse-slot\">\n          {this.renderCollapseAllButton()}\n        </span>\n      ) : null;\n\n    return (\n      <th\n        key={column.id}\n        class={{\n          'ds-table__header-cell': true,\n          [`ds-table__cell--align-${align}`]: true,\n          'ds-table__cell--sticky-start': column.sticky === 'start',\n          'ds-table__cell--sticky-end': column.sticky === 'end',\n          'ds-table__header-cell--collapse-all': actionCollapseHost,\n        }}\n        scope={presentational ? undefined : 'col'}\n        aria-sort={presentational ? undefined : memberAriaSort}\n        data-column-id={column.id}\n        data-grouped={groupedColumn ? 'true' : undefined}\n        data-sort-active={activeSort ? 'true' : undefined}\n      >\n        {!column.header.trim() && column.headerLabel?.trim() && (\n          <span class=\"ds-visually-hidden\">{column.headerLabel}</span>\n        )}\n        {blankActionCollapseHost ? (\n          <span class=\"ds-table__header-content ds-table__header-content--collapse-all\">\n            {collapseControl}\n          </span>\n        ) : (\n          <span class=\"ds-table__header-content\">\n            {align === 'end' && sortControl}\n            {align === 'center' && (\n              <span\n                class=\"ds-table__sort-slot ds-table__sort-slot--balance\"\n                data-sort-balance=\"true\"\n                aria-hidden=\"true\"\n              />\n            )}\n            {labelControl}\n            {align !== 'end' && sortControl}\n            {collapseControl}\n          </span>\n        )}\n        {this.renderStickyEdge(column.sticky)}\n      </th>\n    );\n  }\n\n  private renderColgroup(model: TableRenderModel) {\n    return (\n      <colgroup>\n        {model.selectable && <col class=\"ds-table__selection-column\" />}\n        {this.visibleColumns.map(column => {\n          const width = tableColumnSize(column);\n          const flexible = column.id === model.flexibleColumnId;\n          return (\n            <col\n              key={column.id}\n              class={{\n                'ds-table__action-column': column.kind === 'action',\n                'ds-table__flexible-column': flexible,\n              }}\n              style={width && !flexible ? { width } : undefined}\n            />\n          );\n        })}\n      </colgroup>\n    );\n  }\n\n  private renderHeader(\n    model: TableRenderModel,\n    interactive = true,\n    presentational = false,\n  ) {\n    const selection = model.selection;\n    return (\n      <thead class={{\n        'ds-table__head': true,\n        'ds-table__head--semantic-copy': !interactive,\n      }} ref={element => {\n        if (interactive) this.interactiveHeadEl = element ?? null;\n      }}>\n        <tr class=\"ds-table__header-row\">\n          {model.selectable && (\n            <th\n              class=\"ds-table__header-cell ds-table__selection-cell ds-table__cell--sticky-start\"\n              scope={presentational ? undefined : 'col'}\n            >\n              {interactive ? this.renderSelectionControl(\n                selection.allSelected ? 'Deselect all loaded rows' : 'Select all loaded rows',\n                selection.allSelected,\n                selection.indeterminate,\n                selection.selectableRowIds.length === 0,\n                () => this.emitAllSelection(),\n              ) : (\n                <span class=\"ds-visually-hidden\">Select rows</span>\n              )}\n              {this.renderStickyEdge('start')}\n            </th>\n          )}\n          {this.visibleColumns.map(column => (\n            this.renderColumnHeader(column, model, interactive, presentational)\n          ))}\n        </tr>\n      </thead>\n    );\n  }\n\n  private renderCellValue(\n    cell: TableCellPresentation,\n    column: TableColumn,\n    row: TableRow,\n  ) {\n    if (cell.kind === 'blank') return null;\n\n    if (cell.kind === 'empty') {\n      return (\n        <ds-text\n          class=\"ds-table__cell-track ds-table__cell-track--text\"\n          as=\"span\"\n          variant=\"text-body-medium\"\n          color=\"tertiary\"\n        >\n          <span aria-hidden=\"true\">—</span>\n          <span class=\"ds-visually-hidden\">{this.emptyCellLabel}</span>\n        </ds-text>\n      );\n    }\n\n    if (cell.kind === 'icon') {\n      const value = cell.value;\n      return (\n        <ds-icon\n          name={value.icon}\n          size=\"md\"\n          color={value.color ?? 'secondary'}\n          label={value.label}\n        />\n      );\n    }\n\n    if (cell.kind === 'icon-text') {\n      return (\n        <span class=\"ds-table__cell-icon-text\">\n          <span class=\"ds-table__cell-icon-text-icon\">\n            <ds-icon\n              name={cell.icon}\n              size=\"md\"\n              color={cell.iconColor ?? 'secondary'}\n              label={cell.iconLabel}\n            />\n          </span>\n          {this.renderTextCopy(cell)}\n        </span>\n      );\n    }\n\n    if (cell.kind === 'image') {\n      const value = cell.value;\n      return (\n        <span class=\"ds-table__cell-image\">\n          {value.src ? (\n            <img class=\"ds-table__cell-image-content\" src={value.src} alt={value.alt} loading=\"lazy\" />\n          ) : (\n            <span\n              class=\"ds-table__cell-image-placeholder\"\n              role=\"img\"\n              aria-label={value.alt}\n            />\n          )}\n        </span>\n      );\n    }\n\n    if (cell.kind === 'action') {\n      const value = cell.value;\n      const menu = isRenderableTableActionMenu(value);\n      const triggerId = tableActionTriggerId(this.actionMenuElementId, row.id, column.id);\n      const expanded = menu &&\n        this.actionMenu?.rowId === row.id &&\n        this.actionMenu?.columnId === column.id;\n      return (\n        <ds-button-unfilled\n          id={menu ? triggerId : undefined}\n          variant={menu ? 'icon' : value.variant ?? 'label'}\n          size=\"md\"\n          isInset={true}\n          insetDepth=\"double\"\n          label={value.label ?? ''}\n          icon={value.icon ?? (menu ? 'Ellipses' : '')}\n          aria-label={value.ariaLabel ?? null}\n          hasBorder={value.hasBorder ?? false}\n          isInactive={value.isInactive ?? false}\n          isLoading={value.isLoading ?? false}\n          hasMenu={menu}\n          expanded={menu ? expanded : undefined}\n          controls={menu ? this.actionMenuElementId : undefined}\n          onDsClick={event => {\n            event.stopPropagation();\n            if (menu) {\n              this.toggleActionMenu(row, column, event.detail);\n              return;\n            }\n            if (isTableCellActionMenu(value)) return;\n            this.dsCellAction.emit({\n              actionId: value.actionId,\n              rowId: row.id,\n              columnId: column.id,\n            });\n          }}\n        />\n      );\n    }\n\n    if (cell.kind === 'tag') {\n      const value = cell.value;\n      const variant = cell.variant;\n      const tag = (\n        <ds-tag\n          label={value.label}\n          intent={value.intent ?? 'neutral'}\n          contrast={value.contrast ?? 'faint'}\n          size={variant === 'text-with-tag' ? 'sm' : 'md'}\n          icon={value.icon ?? ''}\n          rounded={value.rounded ?? false}\n          isInset\n          insetDepth={variant === 'text-with-tag' ? 'single' : 'double'}\n        />\n      );\n\n      if (variant === 'tag-only') return tag;\n\n      return (\n        <span class={`ds-table__cell-tag-stack ds-table__cell-tag-stack--${variant}`}>\n          {variant === 'tag-with-text' && tag}\n          <ds-text\n            class=\"ds-table__cell-tag-text ds-table__cell-track\"\n            as=\"span\"\n            variant={variant === 'tag-with-text' ? 'text-body-small' : 'text-body-medium'}\n            color=\"secondary\"\n            lineTruncation={1}\n            data-table-truncate=\"\"\n          >\n            {value.text}\n          </ds-text>\n          {variant === 'text-with-tag' && (\n            <span class=\"ds-table__cell-tag-control-track\">{tag}</span>\n          )}\n        </span>\n      );\n    }\n\n    if (cell.kind !== 'text') return null;\n    return this.renderTextCopy(cell);\n  }\n\n  private renderTextCopy(\n    cell: Extract<TableCellPresentation, { kind: 'text' | 'icon-text' }>,\n  ) {\n    const text = cell.value;\n    const wraps = cell.wraps;\n    const overflow = tableCellTextOverflowProps(cell.lineClamp);\n    const truncate = this.truncateAttr(cell.lineClamp);\n    const primaryText = cell.kind === 'text' && cell.primaryText;\n    const href = resolveSafeUrl(text.href);\n    const primary = (\n      <ds-text\n        class=\"ds-table__cell-primary ds-table__cell-track ds-table__cell-track--text\"\n        as=\"span\"\n        variant=\"text-body-medium\"\n        color={href ? 'inherit' : 'primary'}\n        lineTruncation={overflow.lineTruncation}\n        wrap={overflow.wrap}\n        fontFeature={text.fontFeature ?? 'normal'}\n        data-table-truncate={truncate}\n      >\n        {text.primary}\n      </ds-text>\n    );\n\n    return (\n      <span class={{ 'ds-table__cell-copy': true, 'ds-table__cell-copy--wrap': wraps }}>\n        {href ? (\n          <a\n            class=\"ds-table__cell-link ds-text-action ds-focus-ring\"\n            href={href}\n            target={text.target === '_blank' ? '_blank' : undefined}\n            rel={text.target === '_blank' ? 'noopener noreferrer' : undefined}\n          >\n            {primary}\n          </a>\n        ) : primary}\n        {this.renderTextTrack(text.secondary, {\n          track: 'secondary',\n          variant: primaryText ? 'text-body-medium' : 'text-body-small',\n          defaultColor: primaryText ? 'primary' : 'secondary',\n          wholeColor: text.secondaryColor,\n          lineClamp: cell.lineClamp,\n        })}\n        {this.renderTextTrack(text.tertiary, {\n          track: 'tertiary',\n          variant: 'text-body-small',\n          defaultColor: 'secondary',\n          wholeColor: text.tertiaryColor,\n          lineClamp: cell.lineClamp,\n        })}\n      </span>\n    );\n  }\n\n  private renderTextTrack(\n    runs: TableCellTextRun[] | undefined,\n    options: {\n      track: 'secondary' | 'tertiary';\n      variant: 'text-body-medium' | 'text-body-small';\n      defaultColor: 'primary' | 'secondary';\n      wholeColor?: TableCellTextRun['color'];\n      lineClamp: TableCellLineClamp;\n    },\n  ) {\n    if (!runs?.length) return null;\n    const trackClass = `ds-table__cell-${options.track} ds-table__cell-track ds-table__cell-track--text`;\n    const overflow = tableCellTextOverflowProps(options.lineClamp);\n    const truncate = this.truncateAttr(options.lineClamp);\n    const colorFor = (run: TableCellTextRun) =>\n      run.color ?? options.wholeColor ?? options.defaultColor;\n    if (runs.length === 1) {\n      return (\n        <ds-text\n          class={trackClass}\n          as=\"span\"\n          variant={options.variant}\n          color={colorFor(runs[0])}\n          lineTruncation={overflow.lineTruncation}\n          wrap={overflow.wrap}\n          data-table-truncate={truncate}\n        >\n          {runs[0].text}\n        </ds-text>\n      );\n    }\n\n    return (\n      <span class={`${trackClass} ds-table__cell-track--runs`}>\n        {runs.map((run, index) => [\n          index > 0 && (\n            <ds-text\n              key={`${options.track}-sep-${index}`}\n              class=\"ds-table__cell-run-separator\"\n              as=\"span\"\n              variant={options.variant}\n              color=\"secondary\"\n              aria-hidden=\"true\"\n            >\n              ·\n            </ds-text>\n          ),\n          <ds-text\n            key={`${options.track}-run-${index}`}\n            class=\"ds-table__cell-run\"\n            as=\"span\"\n            variant={options.variant}\n            color={colorFor(run)}\n            lineTruncation={overflow.lineTruncation}\n            wrap={overflow.wrap}\n            data-table-truncate={truncate}\n          >\n            {run.text}\n          </ds-text>,\n        ])}\n      </span>\n    );\n  }\n\n  private renderRow(row: TableRow, model: TableRenderModel) {\n    const selected = model.selectedRowIds.has(row.id);\n    const rowSelectable = row.selectable !== false && !row.disabled;\n    return (\n      <tr\n        key={row.id}\n        class={{\n          'ds-table__row': true,\n          'ds-table__row--selected': selected,\n          'ds-table__row--disabled': !!row.disabled,\n          'ds-table__row--interactive': !!row.interactive && !row.disabled,\n          'ds-focus-ring': !!row.interactive && !row.disabled,\n        }}\n        data-row-id={row.id}\n        data-selected={selected ? 'true' : undefined}\n        aria-disabled={row.disabled ? 'true' : undefined}\n        tabIndex={row.interactive && !row.disabled ? 0 : undefined}\n        onClick={event => this.emitRowActivation(row, event)}\n        onKeyDown={event => this.handleRowKeydown(row, event)}\n      >\n        {model.selectable && (\n          <td class={{\n            'ds-table__cell': true,\n            'ds-table__selection-cell': true,\n            'ds-table__cell--sticky-start': true,\n            'ds-interaction-fill': true,\n            'ds-interaction-fill--grouped': true,\n            'ds-interaction-fill--selected': selected,\n          }}>\n            {this.renderSelectionControl(\n              `${selected ? 'Deselect' : 'Select'} ${tableRowSelectionLabel(row, this.visibleColumns)}`,\n              selected,\n              false,\n              !rowSelectable,\n              () => this.emitRowSelection(row),\n            )}\n            {this.renderStickyEdge('start')}\n          </td>\n        )}\n        {this.visibleColumns.map(column => {\n          const align = column.align ?? 'start';\n          const cell = resolveTableCellPresentation(row.cells[column.id], column);\n          const tagCell = cell.kind === 'tag';\n          const iconCell = cell.kind === 'icon';\n          const iconTextCell = cell.kind === 'icon-text';\n          const imageCell = cell.kind === 'image';\n          const actionCell = cell.kind === 'action';\n          const actionMenuCell = actionCell && isRenderableTableActionMenu(cell.value);\n          const textCell = cell.kind === 'text';\n          const primaryTextCell = textCell && cell.primaryText;\n          const singleTextCell = textCell && cell.singleLine;\n          const emptyCell = cell.kind === 'empty';\n          const blankCell = cell.kind === 'blank';\n          const tagVariant = tagCell ? cell.variant : undefined;\n          const textVariant = textCell ? cell.variant : undefined;\n          const imageVariant = cell.kind === 'image' ? cell.variant : undefined;\n          const iconTextVariant = iconTextCell ? cell.variant : undefined;\n          const wraps = (cell.kind === 'text' || cell.kind === 'icon-text') && cell.wraps;\n          return (\n            <td\n              key={`${row.id}:${column.id}`}\n              class={{\n                'ds-table__cell': true,\n                [`ds-table__cell--align-${align}`]: true,\n                'ds-table__cell--tag': tagCell,\n                [`ds-table__cell--tag-${tagVariant}`]: tagCell,\n                'ds-table__cell--icon': iconCell,\n                'ds-table__cell--icon-text': iconTextCell,\n                [`ds-table__cell--icon-text-${iconTextVariant}`]: iconTextCell,\n                'ds-table__cell--icon-text-wrap': iconTextCell && wraps,\n                'ds-table__cell--image': imageCell,\n                [`ds-table__cell--image-${imageVariant}`]: imageCell,\n                'ds-table__cell--action': actionCell,\n                'ds-table__cell--action-menu': actionMenuCell,\n                'ds-table__cell--primary-text': primaryTextCell,\n                'ds-table__cell--text-single': singleTextCell,\n                'ds-table__cell--text-multi': textCell && !singleTextCell && textVariant !== 'triple',\n                'ds-table__cell--text-triple': textVariant === 'triple',\n                'ds-table__cell--text-wrap': textCell && wraps,\n                'ds-table__cell--empty': emptyCell,\n                'ds-table__cell--blank': blankCell,\n                'ds-table__cell--sticky-start': column.sticky === 'start',\n                'ds-table__cell--sticky-end': column.sticky === 'end',\n                'ds-interaction-fill': true,\n                'ds-interaction-fill--grouped': true,\n                'ds-interaction-fill--selected': selected,\n              }}\n              data-column-id={column.id}\n              data-cell-type={cell.cellType}\n              data-cell-variant={tagVariant ?? textVariant ?? imageVariant ?? iconTextVariant}\n            >\n              <span class=\"ds-table__cell-content ds-interaction-fill__content\">\n                {this.renderCellValue(cell, column, row)}\n              </span>\n              {this.renderStickyEdge(column.sticky)}\n            </td>\n          );\n        })}\n      </tr>\n    );\n  }\n\n  private emitGroupCollapse(group: TableGroup) {\n    const collapsedGroupIds = toggleTableGroupCollapsed(this.collapsedGroupIds, group.id);\n    this.dsGroupCollapseChange.emit({\n      scope: 'group',\n      groupId: group.id,\n      collapsed: collapsedGroupIds.includes(group.id),\n      collapsedGroupIds,\n    });\n  }\n\n  private emitAllGroupsCollapse() {\n    const groupIds = this.groups.map(group => group.id);\n    const collapsedGroupIds = nextTableGroupsCollapsed(this.collapsedGroupIds, groupIds);\n    this.dsGroupCollapseChange.emit({\n      scope: 'all',\n      collapsed: collapsedGroupIds.length > 0,\n      collapsedGroupIds,\n    });\n  }\n\n  private renderGroupContent(groupModel: TableRenderModel['groups'][number]) {\n    const {\n      group,\n      count,\n      loadedCount,\n      countLabel,\n      collapsed: isCollapsed,\n      labelColor,\n      selection: groupSelection,\n    } = groupModel;\n    return (\n      <span class=\"ds-table__group-content\">\n        {groupSelection && (\n          <span class=\"ds-table__group-selection\">\n            {this.renderSelectionControl(\n              groupSelection.allSelected\n                ? `Deselect loaded rows in ${group.label} group`\n                : `Select loaded rows in ${group.label} group`,\n              groupSelection.allSelected,\n              groupSelection.indeterminate,\n              groupSelection.selectableRowIds.length === 0,\n              () => this.emitGroupSelection(group),\n            )}\n          </span>\n        )}\n        <span class=\"ds-table__group-copy\">\n          <ds-text\n            class=\"ds-table__group-label\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            emphasis={true}\n            color={labelColor}\n          >\n            {group.label}\n          </ds-text>\n          <ds-text\n            class=\"ds-table__group-separator\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            color=\"secondary\"\n            aria-hidden=\"true\"\n          >\n            ·\n          </ds-text>\n          <ds-text\n            class=\"ds-table__group-count\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            color=\"secondary\"\n            aria-hidden=\"true\"\n          >\n            {loadedCount} of {count}\n          </ds-text>\n          <span class=\"ds-visually-hidden\">{countLabel}</span>\n        </span>\n        <ds-button-unfilled\n          class=\"ds-table__group-toggle\"\n          variant=\"icon\"\n          size=\"md\"\n          isInset={true}\n          insetDepth=\"double\"\n          icon={isCollapsed ? 'ChevronDown' : 'ChevronUp'}\n          expanded={!isCollapsed}\n          aria-label={\n            isCollapsed\n              ? `Expand ${group.label} group`\n              : `Collapse ${group.label} group`\n          }\n          hasBorder={false}\n          onDsClick={event => {\n            event.stopPropagation();\n            this.emitGroupCollapse(group);\n          }}\n        />\n      </span>\n    );\n  }\n\n  private formatGroupLoadLabel(template: string, group: TableGroup): string {\n    return template.split('{group}').join(group.label);\n  }\n\n  private renderGroupLoadRow(group: TableGroup, totalColumns: number) {\n    const error = group.loadMoreError?.trim();\n    if (!error && !group.loadingMore && !group.hasMore) return null;\n    const manualFallback = this.loadMoreMode === 'manual' ||\n      !this.groupLoadController.intersectionSupported;\n\n    return (\n      <tr\n        class=\"ds-table__load-row ds-table__group-load-row\"\n        data-group-id={group.id}\n        ref={element => {\n          if (element) this.groupSentinelEls.set(group.id, element);\n          else this.groupSentinelEls.delete(group.id);\n        }}\n      >\n        <td class=\"ds-table__load-cell\" colSpan={totalColumns}>\n          <div class=\"ds-table__viewport-band ds-table__load-band\">\n            {error ? (\n              <span class=\"ds-table__load-content ds-table__load-content--error\">\n                <span class=\"ds-table__load-copy\">\n                  <ds-icon name=\"ErrorTriangle\" size=\"md\" color=\"secondary\" aria-hidden=\"true\" />\n                  <ds-text as=\"span\" variant=\"text-body-medium\" color=\"secondary\">{error}</ds-text>\n                </span>\n                <ds-button-unfilled\n                  label={this.formatGroupLoadLabel(this.groupRetryLabel, group)}\n                  size=\"md\"\n                  onDsClick={() => this.groupLoadController.request(group.id, 'retry')}\n                />\n              </span>\n            ) : group.loadingMore ? (\n              <span class=\"ds-table__load-content\">\n                <ds-loader size=\"md\" color=\"secondary\" />\n                <ds-text as=\"span\" variant=\"text-body-medium\" color=\"secondary\">\n                  {this.formatGroupLoadLabel(this.groupLoadingMoreLabel, group)}\n                </ds-text>\n              </span>\n            ) : group.hasMore && manualFallback ? (\n              <span class=\"ds-table__load-content\">\n                <ds-button-unfilled\n                  label={this.groupLoadMoreLabel}\n                  aria-label={this.formatGroupLoadLabel(this.groupLoadMoreAriaLabel, group)}\n                  size=\"md\"\n                  onDsClick={() => this.groupLoadController.request(group.id, 'manual')}\n                />\n              </span>\n            ) : (\n              <span class=\"ds-table__auto-sentinel\" aria-hidden=\"true\" />\n            )}\n          </div>\n        </td>\n      </tr>\n    );\n  }\n\n  private renderStickyGroup(model: TableRenderModel) {\n    if (!this.documentStickyHeader || !this.activeStickyGroupId) return null;\n    const groupModel = model.groups.find(item => item.group.id === this.activeStickyGroupId);\n    if (!groupModel) return null;\n    return (\n      <div\n        class={{\n          'ds-table__sticky-group': true,\n          'ds-table__sticky-group--selectable': model.selectable,\n          [groupModel.intentClass ?? '']: !!groupModel.intentClass,\n        }}\n        data-group-id={groupModel.group.id}\n        data-group-intent={groupModel.intent}\n      >\n        {this.renderGroupContent(groupModel)}\n      </div>\n    );\n  }\n\n  private renderDataBodies(model: TableRenderModel) {\n    if (!model.grouped) {\n      return (\n        <tbody class=\"ds-table__body\">\n          {this.rows.map(row => this.renderRow(row, model))}\n        </tbody>\n      );\n    }\n\n    return model.groups.map(groupModel => {\n      const { group, collapsed: isCollapsed, intent, intentClass } = groupModel;\n      const stickySourceHidden = this.documentStickyHeader && this.activeStickyGroupId === group.id;\n      return (\n        <tbody\n          class=\"ds-table__body ds-table__group\"\n          role=\"rowgroup\"\n          data-group-id={group.id}\n          data-group-intent={intent}\n          data-collapsed={isCollapsed ? 'true' : undefined}\n          aria-busy={!isCollapsed && group.loadingMore ? 'true' : undefined}\n          key={group.id}\n        >\n          <tr\n            role=\"row\"\n            aria-hidden={stickySourceHidden ? 'true' : undefined}\n            class={{\n              'ds-table__group-row': true,\n              'ds-table__group-row--native-sticky': this.stickyHeader && !this.documentStickyHeader,\n            }}\n          >\n            <th\n              class={{\n                'ds-table__group-cell': true,\n                'ds-table__group-cell--sticky-source-hidden': stickySourceHidden,\n                [intentClass ?? '']: !!intentClass,\n              }}\n              role=\"rowheader\"\n              scope=\"rowgroup\"\n              colSpan={model.totalColumns}\n            >\n              {this.renderGroupContent(groupModel)}\n            </th>\n          </tr>\n          {!isCollapsed && group.rows.map(row => this.renderRow(row, model))}\n          {!isCollapsed && this.renderGroupLoadRow(group, model.totalColumns)}\n        </tbody>\n      );\n    });\n  }\n\n  private renderSkeletonBody(model: TableRenderModel) {\n    const count = Math.min(20, Math.max(1, Math.round(this.skeletonRows) || 1));\n    return (\n      <tbody class=\"ds-table__body ds-table__skeleton-body\">\n        {Array.from({ length: count }, (_, index) => (\n          <tr class=\"ds-table__row ds-table__skeleton-row\" key={`skeleton-${index}`}>\n            {model.selectable && (\n              <td\n                class=\"ds-table__cell ds-table__selection-cell ds-table__cell--sticky-start ds-table__skeleton-cell ds-interaction-fill ds-interaction-fill--grouped\"\n                data-skeleton-kind=\"checkbox\"\n              >\n                <span class=\"ds-table__skeleton-checkbox-canvas ds-interaction-fill__content\">\n                  <ds-skeleton\n                    class=\"ds-table__skeleton-checkbox\"\n                    variant=\"control\"\n                    controlSize=\"xs\"\n                    width=\"var(--dimension-iconography-sm)\"\n                  />\n                </span>\n                {this.renderStickyEdge('start')}\n              </td>\n            )}\n            {this.visibleColumns.map(column => this.renderSkeletonCell(column, index))}\n          </tr>\n        ))}\n      </tbody>\n    );\n  }\n\n  private renderSkeletonCell(column: TableColumn, rowIndex: number) {\n    const skeleton = column.skeleton ?? (\n      column.kind === 'action'\n        ? { kind: 'action', variant: 'icon' }\n        : { kind: 'text', lines: 1 }\n    ) satisfies TableCellSkeleton;\n    const align = column.align ?? 'start';\n    const text = skeleton.kind === 'text';\n    const iconText = skeleton.kind === 'icon-text';\n    const lines = text || iconText ? skeleton.lines ?? 1 : 1;\n    const tag = skeleton.kind === 'tag';\n    const icon = skeleton.kind === 'icon';\n    const image = skeleton.kind === 'image';\n    const imageVariant = image\n      ? tableCellImageVariant(resolveTableCellImageTracks(skeleton.tracks))\n      : undefined;\n    const iconTextVariant = iconText\n      ? lines === 3 ? 'triple' : lines === 2 ? 'multi' : 'single'\n      : undefined;\n    const action = skeleton.kind === 'action';\n    const blank = skeleton.kind === 'blank';\n\n    return (\n      <td\n        class={{\n          'ds-table__cell': true,\n          [`ds-table__cell--align-${align}`]: true,\n          'ds-table__skeleton-cell': true,\n          'ds-table__cell--text-single': text && lines === 1,\n          'ds-table__cell--text-multi': text && lines === 2,\n          'ds-table__cell--text-triple': text && lines === 3,\n          'ds-table__cell--tag': tag,\n          'ds-table__cell--tag-tag-only': tag,\n          'ds-table__cell--icon': icon,\n          'ds-table__cell--icon-text': iconText,\n          [`ds-table__cell--icon-text-${iconTextVariant}`]: iconText,\n          'ds-table__cell--image': image,\n          [`ds-table__cell--image-${imageVariant}`]: image,\n          'ds-table__cell--action': action,\n          'ds-table__cell--blank': blank,\n          'ds-table__cell--sticky-start': column.sticky === 'start',\n          'ds-table__cell--sticky-end': column.sticky === 'end',\n          'ds-interaction-fill': true,\n          'ds-interaction-fill--grouped': true,\n        }}\n        data-column-id={column.id}\n        data-skeleton-kind={skeleton.kind}\n        data-cell-variant={imageVariant ?? iconTextVariant}\n        key={`skeleton-${rowIndex}:${column.id}`}\n      >\n        <span class=\"ds-table__cell-content ds-interaction-fill__content\">\n          {this.renderSkeletonCellContent(skeleton)}\n        </span>\n        {this.renderStickyEdge(column.sticky)}\n      </td>\n    );\n  }\n\n  private renderSkeletonCellContent(skeleton: TableCellSkeleton) {\n    if (skeleton.kind === 'blank') return null;\n\n    if (skeleton.kind === 'image') {\n      return (\n        <span class=\"ds-table__cell-image ds-table__skeleton-image\">\n          <ds-skeleton\n            class=\"ds-table__skeleton-image-shape\"\n            variant=\"control\"\n            controlSize=\"md\"\n            width=\"100%\"\n          />\n        </span>\n      );\n    }\n\n    if (skeleton.kind === 'icon') {\n      return <ds-skeleton variant=\"icon\" iconSize=\"md\" rounded={skeleton.rounded ?? false} />;\n    }\n\n    if (skeleton.kind === 'tag') {\n      return (\n        <ds-skeleton\n          variant=\"control\"\n          controlSize=\"sm\"\n          width={skeleton.width ?? '64%'}\n        />\n      );\n    }\n\n    if (skeleton.kind === 'action') {\n      const iconOnly = (skeleton.variant ?? 'icon') === 'icon';\n      return (\n        <ds-skeleton\n          variant=\"control\"\n          controlSize=\"sm\"\n          width={skeleton.width ?? (iconOnly ? '24px' : '72%')}\n        />\n      );\n    }\n\n    const lines = skeleton.lines ?? 1;\n    const copy = (\n      <span class=\"ds-table__cell-copy\">\n        <span class=\"ds-table__cell-primary ds-table__cell-track ds-table__cell-track--text\">\n          <ds-skeleton\n            variant=\"text\"\n            textVariant=\"text-body-medium\"\n            width={skeleton.primaryWidth ?? '100%'}\n          />\n        </span>\n        {lines >= 2 && (\n          <span class=\"ds-table__cell-secondary ds-table__cell-track ds-table__cell-track--text\">\n            <ds-skeleton\n              variant=\"text\"\n              textVariant=\"text-body-small\"\n              width={skeleton.secondaryWidth ?? '72%'}\n            />\n          </span>\n        )}\n        {lines === 3 && (\n          <span class=\"ds-table__cell-tertiary ds-table__cell-track ds-table__cell-track--text\">\n            <ds-skeleton\n              variant=\"text\"\n              textVariant=\"text-body-small\"\n              width={skeleton.tertiaryWidth ?? '56%'}\n            />\n          </span>\n        )}\n      </span>\n    );\n    if (skeleton.kind === 'icon-text') {\n      return (\n        <span class=\"ds-table__cell-icon-text\">\n          <span class=\"ds-table__cell-icon-text-icon\">\n            <ds-skeleton variant=\"icon\" iconSize=\"md\" />\n          </span>\n          {copy}\n        </span>\n      );\n    }\n    return copy;\n  }\n\n  private renderStateBody(kind: 'empty' | 'error', totalColumns: number) {\n    const error = kind === 'error';\n    return (\n      <tbody class=\"ds-table__body ds-table__state-body\">\n        <tr class=\"ds-table__state-row\">\n          <td class=\"ds-table__state-cell\" colSpan={totalColumns}>\n            <div class=\"ds-table__viewport-band ds-table__state-band\">\n              <ds-empty-state\n                icon={error ? 'ErrorTriangle' : 'Inbox'}\n                heading={error ? this.errorHeading : this.emptyHeading}\n                body={error ? this.errorBody : this.emptyBody}\n              />\n            </div>\n          </td>\n        </tr>\n      </tbody>\n    );\n  }\n\n  private renderLazyBody(model: TableRenderModel) {\n    if (\n      this.dataMode !== 'infinite' ||\n      !this.incrementalWindowActive ||\n      !model.hasData ||\n      model.grouped\n    ) return null;\n    const error = this.loadMoreError?.trim();\n    const manualFallback = this.loadMoreMode === 'manual' ||\n      !this.loadController.intersectionSupported;\n\n    return (\n      <tbody class=\"ds-table__body ds-table__load-body\">\n        <tr\n          class=\"ds-table__load-row\"\n          ref={element => {\n            this.sentinelEl = element ?? null;\n          }}\n        >\n          <td class=\"ds-table__load-cell\" colSpan={model.totalColumns}>\n            <div class=\"ds-table__viewport-band ds-table__load-band\">\n              {error ? (\n                <span class=\"ds-table__load-content ds-table__load-content--error\">\n                  <span class=\"ds-table__load-copy\">\n                    <ds-icon name=\"ErrorTriangle\" size=\"md\" color=\"secondary\" aria-hidden=\"true\" />\n                    <ds-text as=\"span\" variant=\"text-body-medium\" color=\"secondary\">{error}</ds-text>\n                  </span>\n                  <ds-button-unfilled\n                    label={this.retryLabel}\n                    size=\"md\"\n                    onDsClick={() => this.loadController.request('retry')}\n                  />\n                </span>\n              ) : this.loadingMore ? (\n                <span class=\"ds-table__load-content\">\n                  <ds-loader size=\"md\" color=\"secondary\" />\n                  <ds-text as=\"span\" variant=\"text-body-medium\" color=\"secondary\">\n                    {this.loadingMoreLabel}\n                  </ds-text>\n                </span>\n              ) : this.hasMore && manualFallback ? (\n                <span class=\"ds-table__load-content\">\n                  <ds-button-unfilled\n                    label={this.loadMoreLabel}\n                    size=\"md\"\n                    onDsClick={() => this.loadController.request('manual')}\n                  />\n                </span>\n              ) : this.hasMore ? (\n                <span class=\"ds-table__auto-sentinel\" aria-hidden=\"true\" />\n              ) : (\n                <ds-text\n                  class=\"ds-table__load-content\"\n                  as=\"span\"\n                  variant=\"text-body-medium\"\n                  color=\"secondary\"\n                >\n                  {this.endOfResultsLabel}\n                </ds-text>\n              )}\n            </div>\n          </td>\n        </tr>\n      </tbody>\n    );\n  }\n\n  private renderDocumentStickyHeader(model: TableRenderModel) {\n    if (!this.documentStickyHeader) return null;\n    return (\n      <div\n        class=\"ds-table__document-sticky-header\"\n      >\n        <table\n          class={{\n            'ds-table__table': true,\n            'ds-table__sticky-header-table': true,\n            'ds-table__table--selectable': model.selectable,\n            'ds-table__table--grouped': model.grouped,\n          }}\n          style={model.tableStyle}\n          role=\"presentation\"\n          ref={element => {\n            this.stickyHeaderTableEl = element ?? null;\n          }}\n        >\n          {this.renderColgroup(model)}\n          {this.renderHeader(model, true, true)}\n        </table>\n        {this.renderFloatingCollapseAll(model)}\n      </div>\n    );\n  }\n\n  private get resultSummary(): string | null {\n    if (this.dataMode === 'pagination') return null;\n    return formatTableResultSummary(\n      this.displayedCount,\n      this.totalCount,\n      this.resultSummaryLabel,\n    );\n  }\n\n  private get hasResultFooter(): boolean {\n    return (this.dataMode === 'pagination' && !!this.pagination) ||\n      !!this.resultSummary || !!this.el.querySelector(\n      '[slot=\"footer-leading\"], [slot=\"footer\"], [slot=\"footer-trailing\"]',\n    );\n  }\n\n  private renderResultFooter() {\n    const summary = this.resultSummary;\n    const hasLeading = !!this.el.querySelector('[slot=\"footer-leading\"]');\n    const hasCopy = !!this.el.querySelector('[slot=\"footer\"]');\n    const hasTrailing = !!this.el.querySelector('[slot=\"footer-trailing\"]');\n    const pagination = this.dataMode === 'pagination' ? this.pagination : null;\n    if (!this.hasResultFooter) return null;\n    return (\n      <div class=\"ds-table__footer ds-table__bar ds-chrome-header ds-control--md\">\n        <div class=\"ds-table__bar-copy ds-chrome-header__copy ds-control--md\">\n          {hasLeading && (\n            <div class=\"ds-table__bar-status ds-chrome-header__heading\">\n              <slot name=\"footer-leading\" />\n            </div>\n          )}\n          {hasCopy ? (\n            <slot name=\"footer\" />\n          ) : summary ? (\n            <ds-text\n              class=\"ds-table__footer-summary ds-table__bar-text\"\n              as=\"span\"\n              variant=\"text-body-medium\"\n              color=\"secondary\"\n              lineTruncation={1}\n            >\n              {summary}\n            </ds-text>\n          ) : null}\n        </div>\n        {(pagination || hasTrailing) && (\n          <div class=\"ds-table__bar-trailing ds-chrome-header__trailing\">\n            {pagination && (\n              <ds-pagination\n                pageIndex={pagination.pageIndex}\n                pageSize={pagination.pageSize}\n                pageSizeMode={pagination.pageSizeMode ?? 'fixed'}\n                totalItems={pagination.totalItems}\n                pageSizeOptions={pagination.pageSizeOptions ?? [25, 50, 100, 200]}\n                fitToPage={pagination.fitToPage ?? false}\n                fitPageSize={this.fitPageSize ?? pagination.fitPageSize}\n                fitPageSizeLabel={pagination.fitPageSizeLabel ?? 'Fit to page'}\n                fitPageSizeTriggerLabel={pagination.fitPageSizeTriggerLabel ?? 'Fit'}\n                itemLabel={pagination.itemLabel ?? 'items'}\n                pageSizeLabel={pagination.pageSizeLabel ?? 'Items'}\n                label={pagination.ariaLabel ?? `${this.caption} pagination`}\n                loading={this.loading}\n                onDsChange={(event: CustomEvent<PaginationChangeDetail>) =>\n                  this.dsPaginationChange.emit(event.detail)}\n              />\n            )}\n            <slot name=\"footer-trailing\" />\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  private renderCaptionBar() {\n    if (this.captionVisibility !== 'visible') return null;\n    return (\n      <div class=\"ds-table__caption-bar ds-table__bar ds-control--md\">\n        <div class={{\n          'ds-table__caption-content': true,\n          'ds-table__caption-content--trailing': this.showsCaptionTrailing,\n        }}>\n          <div class=\"ds-table__caption-leading\">\n            <slot\n              name=\"header\"\n              onSlotchange={this.syncHeaderSlotPresence}\n            />\n            {!this.headerPresent ? (\n              <ds-text\n                class=\"ds-table__caption-title ds-table__bar-text\"\n                as=\"div\"\n                variant=\"text-title-small\"\n                emphasis={true}\n                color=\"primary\"\n                aria-hidden=\"true\"\n              >\n                {this.caption}\n              </ds-text>\n            ) : null}\n          </div>\n          {this.renderCaptionTrailing()}\n        </div>\n      </div>\n    );\n  }\n\n  private renderCaptionTrailing() {\n    if (!this.showsCaptionTrailing) return null;\n    return (\n      <div class=\"ds-table__caption-trailing\">\n        {this.renderColumnCustomizerTrigger()}\n        {this.showsColumnCustomizer && this.showsDataModeSwitcher ? (\n          <ds-divider\n            orientation=\"vertical\"\n            length=\"32px\"\n          />\n        ) : null}\n        {this.renderDataModeSwitcherTrigger()}\n      </div>\n    );\n  }\n\n  private renderDataModeSwitcherTrigger() {\n    if (!this.showsDataModeSwitcher) return null;\n    return (\n      <ds-button-unfilled\n        id={`${this.dataModeSwitcherElementId}-trigger`}\n        variant=\"icon\"\n        size=\"md\"\n        icon=\"Table\"\n        aria-label={this.dataModeSwitcherLabel}\n        hasMenu={true}\n        expanded={this.dataModeSwitcherOpen}\n        controls={this.dataModeSwitcherElementId}\n        activeFill={false}\n        onDsClick={(event: CustomEvent<MouseEvent>) => {\n          this.toggleDataModeSwitcher(event.detail.detail === 0);\n        }}\n      />\n    );\n  }\n\n  private renderDataModeSwitcherMenu() {\n    if (!this.showsDataModeSwitcher) return null;\n    return (\n      <ds-menu\n        id={this.dataModeSwitcherElementId}\n        open={this.dataModeSwitcherOpen}\n        anchorId={`${this.dataModeSwitcherElementId}-trigger`}\n        align=\"end\"\n        side=\"bottom\"\n        menuLabel={this.dataModeMenuLabel}\n        initialFocusVisible={this.dataModeSwitcherInitialFocusVisible}\n        items={tableDataModeMenuItems(this.dataMode, {\n          infinite: this.infiniteModeLabel,\n          pagination: this.paginationModeLabel,\n        })}\n        onDsClose={() => this.closeDataModeSwitcher()}\n        onDsSelect={event => this.handleDataModeSwitcherSelect(event.detail)}\n      />\n    );\n  }\n\n  private toggleDataModeSwitcher(fromKeyboard = false): void {\n    if (this.dataModeSwitcherOpen) this.closeDataModeSwitcher();\n    else this.openDataModeSwitcher(fromKeyboard);\n  }\n\n  private openDataModeSwitcher(fromKeyboard = false): void {\n    if (!this.showsDataModeSwitcher || this.dataModeSwitcherOpen) return;\n    this.closeColumnCustomizer();\n    this.dataModeSwitcherInitialFocusVisible = fromKeyboard;\n    this.dataModeSwitcherOpen = true;\n  }\n\n  private closeDataModeSwitcher(): void {\n    this.dataModeSwitcherOpen = false;\n  }\n\n  private handleDataModeSwitcherSelect(item: MenuItemData): void {\n    const dataMode = tableDataModeFromMenuItem(item);\n    if (!dataMode) return;\n    this.closeDataModeSwitcher();\n    if (dataMode !== this.dataMode) this.dsDataModeChange.emit({ dataMode });\n    requestAnimationFrame(() => {\n      this.el\n        .querySelector<HTMLElement & { setFocus?: () => void }>(\n          `#${CSS.escape(`${this.dataModeSwitcherElementId}-trigger`)}`,\n        )\n        ?.setFocus?.();\n    });\n  }\n\n  private renderColumnCustomizerTrigger() {\n    if (!this.showsColumnCustomizer) return null;\n    return (\n      <ds-button-unfilled\n        id={`${this.columnCustomizerElementId}-trigger`}\n        variant=\"icon\"\n        size=\"md\"\n        icon=\"Preferences\"\n        aria-label=\"Customize table\"\n        hasMenu={true}\n        expanded={this.columnCustomizerOpen}\n        controls={this.columnCustomizerElementId}\n        activeFill={false}\n        onDsClick={(event: CustomEvent<MouseEvent>) => {\n          this.toggleColumnCustomizer(event.detail.detail === 0);\n        }}\n      />\n    );\n  }\n\n  private renderColumnCustomizerMenu() {\n    if (!this.showsColumnCustomizer) return null;\n    return (\n      <ds-menu\n        id={this.columnCustomizerElementId}\n        open={this.columnCustomizerOpen}\n        anchorId={`${this.columnCustomizerElementId}-trigger`}\n        align=\"end\"\n        side=\"bottom\"\n        menuLabel=\"Customize table\"\n        initialFocusVisible={this.columnCustomizerInitialFocusVisible}\n        items={tableColumnCustomizerMenuItems(\n          this.columns,\n          this.hiddenColumnIds,\n          this.columnOrder,\n        )}\n        onDsClose={() => this.closeColumnCustomizer()}\n        onDsSelect={event => this.handleColumnCustomizerSelect(event.detail)}\n        onDsReorder={event => this.handleColumnCustomizerReorder(event.detail)}\n      />\n    );\n  }\n\n  private toggleColumnCustomizer(fromKeyboard = false): void {\n    if (this.columnCustomizerOpen) this.closeColumnCustomizer();\n    else this.openColumnCustomizer(fromKeyboard);\n  }\n\n  private openColumnCustomizer(fromKeyboard = false): void {\n    if (!this.showsColumnCustomizer || this.columnCustomizerOpen) return;\n    this.closeDataModeSwitcher();\n    this.columnCustomizerInitialFocusVisible = fromKeyboard;\n    this.columnCustomizerOpen = true;\n  }\n\n  private closeColumnCustomizer(): void {\n    this.columnCustomizerOpen = false;\n  }\n\n  private emitColumnsConfigChange(hiddenColumnIds: string[], columnOrder: string[]): void {\n    this.dsColumnsConfigChange.emit({\n      hiddenColumnIds: resolveTableHiddenColumnIds(this.columns, hiddenColumnIds),\n      columnOrder: resolveTableColumnOrder(this.columns, columnOrder),\n    });\n  }\n\n  private handleColumnCustomizerReorder(detail: MenuReorderDetail): void {\n    const order = detail.items\n      .filter(item => item.reorderable)\n      .map(item => item.value)\n      .filter((id): id is string => !!id);\n    this.emitColumnsConfigChange(this.hiddenColumnIds, order);\n  }\n\n  private handleColumnCustomizerSelect(item: MenuItemData): void {\n    const columnId = item.value;\n    if (!columnId || item.isInactive) return;\n    this.emitColumnsConfigChange(\n      toggleTableColumnHidden(this.columns, this.hiddenColumnIds, columnId),\n      resolveTableColumnOrder(this.columns, this.columnOrder),\n    );\n  }\n\n  render() {\n    this.groupSentinelEls.clear();\n    const model = this.createRenderModel();\n    this.renderedModel = model;\n    const regionLabel = this.scrollLabel?.trim() || `${this.caption} scroll area`;\n    const initialLoading = this.loading && !model.hasData;\n    const initialError = !model.hasData && this.error;\n    const hasGroupedStructure = model.grouped && model.groups.length > 0;\n    const groupLoadingMore = hasGroupedStructure && this.groups.some(group => group.loadingMore);\n    const viewportStyle = !this.boundedComposition && this.resolvedMaxHeight\n      ? { '--ds-table-max-block-size': this.resolvedMaxHeight }\n      : undefined;\n    const hostStyle = this.fixedHeight\n      ? { '--_table-fixed-block-size': this.resolvedHeight }\n      : undefined;\n\n    return (\n      <Host\n        class={{\n          'table-host': true,\n          'table-host--bounded': this.boundedComposition,\n          'table-host--fixed-height': this.fixedHeight,\n          'table-host--viewport-fit': this.fitViewport,\n        }}\n        style={hostStyle}\n        onKeyDown={(event: KeyboardEvent) => this.handlePaginationKeyDown(event)}\n      >\n        <div class={{\n          'ds-table': true,\n          'ds-table--bounded': this.boundedComposition,\n          'ds-table--contained-scroll': this.containedScroll,\n          'ds-table--fixed-height': this.fixedHeight,\n          'ds-table--viewport-fit': this.fitViewport,\n          'ds-table--viewport-fit-pending': this.fitViewport && !this.viewportFitSettled,\n          'ds-table--viewport-fit-settled': this.fitViewport && this.viewportFitSettled,\n          'ds-table--sticky-header': this.stickyHeader,\n          'ds-table--document-sticky-header': this.documentStickyHeader,\n          'ds-table--contained-sticky-header': this.stickyHeader && !this.documentStickyHeader,\n          'ds-table--caption-visible': this.captionVisibility === 'visible',\n          'ds-table--footer-visible': this.hasResultFooter,\n        }} ref={element => {\n          this.rootEl = element ?? null;\n        }}>\n          {this.renderCaptionBar()}\n          <div\n            class={{\n              'ds-table__frame': true,\n              'ds-table__frame--overflow-start': this.overflowStart,\n              'ds-table__frame--overflow-end': this.overflowEnd,\n            }}\n            ref={element => {\n              this.frameEl = element ?? null;\n            }}\n          >\n            {this.renderDocumentStickyHeader(model)}\n            {this.renderStickyGroup(model)}\n            {!this.documentStickyHeader && this.renderFloatingCollapseAll(model)}\n            <div\n              class={{\n                'ds-table__viewport': true,\n                'ds-focus-ring': this.scrollable,\n              }}\n              style={viewportStyle}\n              ref={element => {\n                this.viewportEl = element ?? null;\n              }}\n              role={this.scrollable ? 'region' : undefined}\n              aria-label={this.scrollable ? regionLabel : undefined}\n              tabIndex={this.scrollable ? 0 : undefined}\n            >\n              <table\n                class={{\n                  'ds-table__table': true,\n                  'ds-table__table--selectable': model.selectable,\n                  'ds-table__table--grouped': model.grouped,\n                  'ds-table__table--native-group-sticky': model.grouped &&\n                    this.stickyHeader && !this.documentStickyHeader,\n                }}\n                style={model.tableStyle}\n                aria-busy={initialLoading || this.loadingMore || groupLoadingMore ? 'true' : undefined}\n                ref={element => {\n                  this.tableEl = element ?? null;\n                }}\n              >\n                <caption class=\"ds-table__caption ds-visually-hidden\">\n                  <ds-text as=\"span\" variant=\"text-title-small\" emphasis={true} color=\"primary\">\n                    {this.caption}\n                  </ds-text>\n                </caption>\n                {this.renderColgroup(model)}\n                {this.renderHeader(model, !this.documentStickyHeader)}\n                {initialLoading\n                  ? this.renderSkeletonBody(model)\n                  : initialError\n                    ? this.renderStateBody('error', model.totalColumns)\n                    : model.hasData || hasGroupedStructure\n                      ? this.renderDataBodies(model)\n                      : this.renderStateBody('empty', model.totalColumns)}\n                {!initialLoading && !initialError && this.renderLazyBody(model)}\n              </table>\n            </div>\n          </div>\n          {this.renderResultFooter()}\n          {this.renderOverflowActionMenu()}\n          {this.renderDataModeSwitcherMenu()}\n          {this.renderColumnCustomizerMenu()}\n          {this.renderTruncateTooltip()}\n          <div class=\"ds-visually-hidden\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n            {this.announcement}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport {\n  deriveTableSelectionState,\n  formatTableResultSummary,\n  isTableCellAction,\n  nextTableSortState,\n  tableColumnSize,\n  tableModelIssues,\n  tableRows,\n  tableRowSelectionLabel,\n  toggleAllLoadedTableRows,\n  toggleTableGroupCollapsed,\n  toggleTableGroupSelection,\n  nextTableGroupsCollapsed,\n  toggleTableRowSelection,\n} from './table-model';\nimport {\n  resolveTableCellImageTracks,\n  resolveTableCellPresentation,\n  tableCellImageVariant,\n  tableCellTextOverflowProps,\n  type TableCellPresentation,\n} from './table-cell-model';\nimport {\n  createTableRenderModel,\n  type TableRenderModel,\n} from './table-render-model';\nimport {\n  isRenderableTableActionMenu,\n  isTableCellActionMenu,\n  nextTableActionMenuElementId,\n  tableActionMenuSections,\n  tableActionTriggerId,\n} from './table-action-menu';\nimport {\n  nextTableColumnCustomizerElementId,\n  resolveTableColumnOrder,\n  resolveTableHiddenColumnIds,\n  resolveTableVisibleColumns,\n  tableColumnCustomizerMenuItems,\n  toggleTableColumnHidden,\n} from './table-column-customizer';\nimport {\n  nextTableDataModeSwitcherElementId,\n  tableDataModeFromMenuItem,\n  tableDataModeMenuItems,\n} from './table-data-mode-switcher';\nimport {\n  resolveTableTruncateTrack,\n  tableTruncateLabel,\n} from './table-truncate';\nimport { TableLayoutController } from './table-layout-controller';\nimport { TableLoadController } from './table-load-controller';\nimport { TableGroupLoadController } from './table-group-load-controller';\nimport type { PaginationChangeDetail } from '../Pagination/pagination-types';\nimport type { MenuItemData, MenuReorderDetail } from '../Menu/menu-types';\nimport { resolvePaginationState } from '../Pagination/pagination-model';\nimport { resolveCssLengthPx } from '../../utils/resolve-css-length-px';\nimport { isElementTruncated } from '../../utils/is-element-truncated';\nimport { resolveSafeUrl } from '../../utils/safe-url';\nimport { resolveTableFitPageSize } from './table-pagination-fit';\nimport {\n  TableViewportFitController,\n  type TableViewportFitMetrics,\n} from './table-viewport-fit-controller';\nimport type {\n  TableCaptionVisibility,\n  TableCellActionDetail,\n  TableCellLineClamp,\n  TableCellSkeleton,\n  TableCellTextRun,\n  TableColumn,\n  TableColumnsConfigChangeDetail,\n  TableDataMode,\n  TableDataModeChangeDetail,\n  TableGroup,\n  TableGroupCollapseChangeDetail,\n  TableGroupLoadMoreDetail,\n  TableGroupingState,\n  TableLoadMoreDetail,\n  TableLoadMoreMode,\n  TablePaginationState,\n  TableRow,\n  TableRowActivateDetail,\n  TableSelectionChangeDetail,\n  TableSelectionMode,\n  TableSortChangeDetail,\n  TableSortState,\n} from './table-types';\n\n@Component({\n  tag: 'ds-table',\n  styleUrls: [\n    '../../utils/focus-ring.css',\n    '../../utils/interaction-fill.css',\n    'Table.css',\n  ],\n  scoped: true,\n})\nexport class Table {\n  @Element() el!: HTMLElement;\n  /** Stable column definitions. Assign through JavaScript. */\n  @Prop() columns: TableColumn[] = [];\n  /** Ungrouped row data. Ignored while grouping is active. Assign through JavaScript. */\n  @Prop() rows: TableRow[] = [];\n  /** One level of application-owned grouped data. Assign through JavaScript. */\n  @Prop() groups: TableGroup[] = [];\n  /** Controlled grouping column. Applications supply groups in their final fixed order. */\n  @Prop() grouping: TableGroupingState | null = null;\n  /** Controlled member-row sort state. */\n  @Prop() sort: TableSortState | null = null;\n  /** Controlled collapsed group identities. Groups not listed remain expanded. */\n  @Prop() collapsedGroupIds: string[] = [];\n\n  /** Required accessible table name, retained as a native caption. */\n  @Prop() caption!: string;\n  /** Shows a matching presentational title bar above the native table frame. */\n  @Prop() captionVisibility: TableCaptionVisibility = 'hidden';\n  /**\n   * Opt in to the table-owned column customizer. The `columns` prop remains the\n   * catalog; hidden and ordered columns are controlled separately. The trigger\n   * opens the shared Menu of live show/hide switch rows.\n   */\n  @Prop() columnCustomizer: boolean = false;\n  /** Controlled hidden data-column identities. Action ids are ignored. */\n  @Prop() hiddenColumnIds: string[] = [];\n  /** Controlled data-column identities in display order. Omitted ids append in catalog order. */\n  @Prop() columnOrder: string[] = [];\n  /**\n   * Optional result summary footer. When both `displayedCount` and `totalCount`\n   * are finite numbers, the table shows “Displaying {displayed} of {total}”.\n   */\n  @Prop() displayedCount: number | undefined;\n  @Prop() totalCount: number | undefined;\n  /** Supports {displayed} and {total} placeholders. */\n  @Prop() resultSummaryLabel: string = 'Displaying {displayed} of {total}';\n  @Prop() stickyHeader: boolean = false;\n  /** Maximum scroll-region height. Numbers resolve to CSS pixels. */\n  @Prop() maxHeight: string | number | undefined;\n  /** Fixed height for the complete header, table frame, and footer composition. */\n  @Prop() height: string | number | undefined;\n  /** Fit the complete table composition to its nearest vertical scrollport. */\n  @Prop() fitViewport: boolean = false;\n  /** Reserved space above a viewport-fitted table once surrounding chrome is compact. */\n  @Prop() viewportInsetBlockStart: string | number = 0;\n  /** Reserved space below a viewport-fitted table. */\n  @Prop() viewportInsetBlockEnd: string | number = 0;\n  /** Optional explicit label for the horizontal/vertical scroll region. */\n  @Prop() scrollLabel: string | undefined;\n\n  @Prop() selectionMode: TableSelectionMode = 'none';\n  /** Controlled selected row identities. IDs outside the loaded rows are preserved. */\n  @Prop() selectedRowIds: string[] = [];\n\n  /** Initial loading state. Existing rows stay visible; incremental loading uses loadingMore. */\n  @Prop() loading: boolean = false;\n  /** Initial-loading rows. Defaults to ten so bounded tables retain a useful filled viewport. */\n  @Prop() skeletonRows: number = 10;\n  @Prop() emptyHeading: string = 'No results';\n  @Prop() emptyBody: string = 'No data is available.';\n  /** Initial error state. Existing rows stay visible; incremental failures use loadMoreError. */\n  @Prop() error: boolean = false;\n  @Prop() errorHeading: string = 'Unable to load data';\n  @Prop() errorBody: string = 'The data could not be loaded.';\n  @Prop() emptyCellLabel: string = 'Not available';\n\n  /** Top-level data-window strategy. Group member loading remains group-owned. */\n  @Prop() dataMode: TableDataMode = 'infinite';\n  /** Opt in to the table-owned control for choosing between supported data modes. */\n  @Prop() dataModeSwitcher: boolean = false;\n  @Prop() dataModeSwitcherLabel: string = 'Change table variation';\n  @Prop() dataModeMenuLabel: string = 'Table variation';\n  @Prop() infiniteModeLabel: string = 'Infinite scroll';\n  @Prop() paginationModeLabel: string = 'Pagination + Infinite groups';\n  /** Controlled top-level pagination state. Required when dataMode is pagination. */\n  @Prop() pagination: TablePaginationState | null = null;\n  @Prop() loadMoreMode: TableLoadMoreMode = 'auto';\n  @Prop() hasMore: boolean = false;\n  @Prop() loadingMore: boolean = false;\n  @Prop() loadMoreError: string | undefined;\n  /** Reset key for a new query/group/sort dataset. */\n  @Prop() loadIdentity: string | number = 'default';\n  /** IntersectionObserver root margin in CSS pixels. */\n  @Prop() loadMoreThreshold: number = 0;\n  @Prop() loadMoreLabel: string = 'Load more';\n  @Prop() retryLabel: string = 'Retry';\n  @Prop() loadingMoreLabel: string = 'Loading more items';\n  @Prop() endOfResultsLabel: string = 'All results loaded';\n  /** Supports {count} and {total} placeholders. */\n  @Prop() rowsLoadedLabel: string = '{count} more rows loaded. {total} rows loaded.';\n  @Prop() groupLoadMoreLabel: string = 'Load more';\n  /** Supports the {group} placeholder. */\n  @Prop() groupLoadMoreAriaLabel: string = 'Load more {group} results';\n  /** Supports the {group} placeholder. */\n  @Prop() groupRetryLabel: string = 'Retry loading {group} results';\n  /** Supports the {group} placeholder. */\n  @Prop() groupLoadingMoreLabel: string = 'Loading more items';\n  /** Supports the {group} placeholder. */\n  @Prop() groupEndOfResultsLabel: string = 'All {group} results loaded';\n  /** Supports {group}, {count}, {loaded}, and {total} placeholders. */\n  @Prop() groupRowsLoadedLabel: string = '{count} more rows loaded in {group}. {loaded} of {total} rows loaded.';\n\n  @Event() dsSortChange!: EventEmitter<TableSortChangeDetail>;\n  @Event() dsGroupCollapseChange!: EventEmitter<TableGroupCollapseChangeDetail>;\n  @Event() dsSelectionChange!: EventEmitter<TableSelectionChangeDetail>;\n  @Event() dsLoadMore!: EventEmitter<TableLoadMoreDetail>;\n  @Event() dsGroupLoadMore!: EventEmitter<TableGroupLoadMoreDetail>;\n  @Event() dsPaginationChange!: EventEmitter<PaginationChangeDetail>;\n  @Event() dsCellAction!: EventEmitter<TableCellActionDetail>;\n  @Event() dsRowActivate!: EventEmitter<TableRowActivateDetail>;\n  @Event() dsColumnsConfigChange!: EventEmitter<TableColumnsConfigChangeDetail>;\n  @Event() dsDataModeChange!: EventEmitter<TableDataModeChangeDetail>;\n\n  @State() private overflowStart = false;\n  @State() private overflowEnd = false;\n  @State() private scrollable = false;\n  @State() private announcement = '';\n  @State() private activeStickyGroupId: string | null = null;\n  @State() private viewportFitSettled = false;\n  @State() private headerPresent = false;\n  @State() private fitPageSize: number | undefined;\n  @State() private actionMenu: { rowId: string; columnId: string } | null = null;\n  @State() private actionMenuInitialFocusVisible = false;\n  @State() private truncateTooltipLabel = '';\n  @State() private columnCustomizerOpen = false;\n  @State() private columnCustomizerInitialFocusVisible = false;\n  @State() private dataModeSwitcherOpen = false;\n  @State() private dataModeSwitcherInitialFocusVisible = false;\n\n  private readonly actionMenuElementId = nextTableActionMenuElementId();\n  private readonly columnCustomizerElementId = nextTableColumnCustomizerElementId();\n  private readonly dataModeSwitcherElementId = nextTableDataModeSwitcherElementId();\n  private truncateTooltipEl?: HTMLDsTooltipElement;\n  private truncateAnchor: HTMLElement | null = null;\n  private truncateTooltipBound = false;\n\n  private rootEl: HTMLElement | null = null;\n  private viewportEl: HTMLElement | null = null;\n  private frameEl: HTMLElement | null = null;\n  private interactiveHeadEl: HTMLTableSectionElement | null = null;\n  private collapseAllOverlayEl: HTMLElement | null = null;\n  private stickyHeaderTableEl: HTMLTableElement | null = null;\n  private tableEl: HTMLTableElement | null = null;\n  private sentinelEl: HTMLElement | null = null;\n  private incrementalWindowActive = false;\n  private readonly groupSentinelEls = new Map<string, HTMLElement>();\n  private previousModelWarning = '';\n  private hasLoaded = false;\n  private renderedModel: TableRenderModel | null = null;\n  private stickyGroupConnected = false;\n  private headerSlotObserver: MutationObserver | null = null;\n  private fitResizeObserver: ResizeObserver | null = null;\n  private fitObservedViewport: HTMLElement | null = null;\n  private fitObservedTable: HTMLTableElement | null = null;\n  private fitMeasurementPending = false;\n  private readonly layoutController = new TableLayoutController({\n    elements: () => ({\n      viewport: this.viewportEl,\n      stickyHeaderTable: this.stickyHeaderTableEl,\n      collapseAllOverlay: this.collapseAllOverlayEl,\n      frame: this.frameEl,\n      interactiveHead: this.interactiveHeadEl,\n    }),\n    mode: () => ({\n      documentStickyHeader: this.documentStickyHeader,\n      floatingCollapseAll: this.renderedModel?.collapseAllHost?.mode === 'floating',\n      clampVerticalOverscroll: this.fitViewport && this.viewportFitSettled,\n    }),\n    verticalEdgeWheel: deltaY => this.viewportFitController.scrollOuterBy(deltaY),\n    overflowChanged: state => {\n      if (state.start !== this.overflowStart) this.overflowStart = state.start;\n      if (state.end !== this.overflowEnd) this.overflowEnd = state.end;\n      if (state.scrollable !== this.scrollable) this.scrollable = state.scrollable;\n    },\n  });\n  private readonly loadController = new TableLoadController({\n    state: () => ({\n      lazyLoading: this.dataMode === 'infinite' && !this.grouped,\n      loadMoreMode: this.loadMoreMode,\n      hasMore: this.hasMore,\n      loadingMore: this.loadingMore,\n      loadMoreError: this.loadMoreError,\n      loadIdentity: this.loadIdentity,\n      loadMoreThreshold: this.loadMoreThreshold,\n      containedScroll: this.containedScroll,\n      loadingMoreLabel: this.loadingMoreLabel,\n      endOfResultsLabel: this.endOfResultsLabel,\n      rowsLoadedLabel: this.rowsLoadedLabel,\n      loadedRowCount: this.currentLoadedRowCount(),\n      viewport: this.viewportEl,\n      sentinel: this.sentinelEl,\n    }),\n    announce: message => {\n      this.announcement = message;\n    },\n    request: detail => {\n      this.dsLoadMore.emit(detail);\n    },\n  });\n  private readonly groupLoadController = new TableGroupLoadController({\n    state: () => ({\n      enabled: this.grouped,\n      loadMoreMode: this.loadMoreMode,\n      loadMoreThreshold: this.loadMoreThreshold,\n      containedScroll: this.containedScroll,\n      groups: this.groups,\n      viewport: this.viewportEl,\n      sentinels: this.groupSentinelEls,\n      loadingMoreLabel: this.groupLoadingMoreLabel,\n      endOfResultsLabel: this.groupEndOfResultsLabel,\n      rowsLoadedLabel: this.groupRowsLoadedLabel,\n    }),\n    announce: message => {\n      this.announcement = message;\n    },\n    request: detail => {\n      this.dsGroupLoadMore.emit(detail);\n    },\n  });\n  private readonly viewportFitController = new TableViewportFitController({\n    enabled: () => this.fitViewport,\n    elements: () => ({ host: this.el, surface: this.rootEl }),\n    insets: () => ({\n      blockStart: this.viewportInsetBlockStart,\n      blockEnd: this.viewportInsetBlockEnd,\n    }),\n    fitChanged: (metrics: TableViewportFitMetrics | null) => {\n      const settled = metrics?.settled ?? false;\n      if (settled !== this.viewportFitSettled) this.viewportFitSettled = settled;\n    },\n  });\n\n  componentWillLoad(): void {\n    this.incrementalWindowActive = this.hasIncrementalState;\n    this.syncHeaderSlotPresence();\n    this.loadController.initialize();\n    this.groupLoadController.initialize();\n    this.warnModelIssues();\n  }\n\n  componentDidLoad(): void {\n    this.hasLoaded = true;\n    this.layoutController.connect();\n    this.loadController.connect();\n    this.groupLoadController.connect();\n    this.viewportFitController.connect();\n    this.syncStickyGroupConnection();\n    this.connectHeaderSlotObserver();\n    this.connectFitObserver();\n    this.syncFitPageSize();\n    this.connectTruncateTooltip();\n  }\n\n  componentDidRender(): void {\n    this.layoutController.refresh();\n    this.loadController.refresh();\n    this.groupLoadController.refresh();\n    this.viewportFitController.refresh();\n    this.syncStickyGroupConnection();\n    this.connectFitObserver();\n    this.syncFitPageSize();\n    if (this.stickyGroupConnected) this.updateStickyGroup();\n  }\n\n  connectedCallback(): void {\n    if (!this.hasLoaded) return;\n    this.layoutController.connect();\n    this.loadController.connect();\n    this.groupLoadController.connect();\n    this.viewportFitController.connect();\n    this.syncStickyGroupConnection();\n    this.connectHeaderSlotObserver();\n    this.connectFitObserver();\n    this.connectTruncateTooltip();\n  }\n\n  disconnectedCallback(): void {\n    this.layoutController.disconnect();\n    this.loadController.disconnect();\n    this.groupLoadController.disconnect();\n    this.viewportFitController.disconnect();\n    this.disconnectStickyGroup();\n    this.headerSlotObserver?.disconnect();\n    this.headerSlotObserver = null;\n    this.disconnectFitObserver();\n    this.disconnectTruncateTooltip();\n    this.closeColumnCustomizer();\n  }\n\n  private syncHeaderSlotPresence = () => {\n    this.headerPresent = !!this.el.querySelector('[slot=\"header\"]');\n  };\n\n  private connectHeaderSlotObserver(): void {\n    if (this.headerSlotObserver || typeof MutationObserver === 'undefined') return;\n    this.headerSlotObserver = new MutationObserver(this.syncHeaderSlotPresence);\n    this.headerSlotObserver.observe(this.el, { childList: true });\n    this.syncHeaderSlotPresence();\n  }\n\n  private connectStickyGroup(): void {\n    if (this.stickyGroupConnected || typeof window === 'undefined') return;\n    this.stickyGroupConnected = true;\n    document.addEventListener('scroll', this.updateStickyGroup, {\n      capture: true,\n      passive: true,\n    });\n    window.addEventListener('resize', this.updateStickyGroup, { passive: true });\n    this.updateStickyGroup();\n  }\n\n  private syncStickyGroupConnection(): void {\n    if (this.documentStickyHeader && this.grouped) {\n      this.connectStickyGroup();\n      return;\n    }\n\n    this.disconnectStickyGroup();\n    this.frameEl?.style.removeProperty('--_table-sticky-group-top');\n    if (this.activeStickyGroupId !== null) {\n      this.activeStickyGroupId = null;\n    }\n  }\n\n  private disconnectStickyGroup(): void {\n    if (!this.stickyGroupConnected || typeof window === 'undefined') return;\n    this.stickyGroupConnected = false;\n    document.removeEventListener('scroll', this.updateStickyGroup, true);\n    window.removeEventListener('resize', this.updateStickyGroup);\n  }\n\n  private readonly updateStickyGroup = (): void => {\n    if (!this.documentStickyHeader || !this.grouped || !this.frameEl || !this.tableEl) {\n      if (this.activeStickyGroupId !== null) this.activeStickyGroupId = null;\n      return;\n    }\n\n    const stickyHeader = this.frameEl.querySelector<HTMLElement>(\n      '.ds-table__document-sticky-header',\n    );\n    if (!stickyHeader) return;\n    const threshold = stickyHeader.getBoundingClientRect().bottom;\n    let activeGroupId: string | null = null;\n    let activeGroupTop = threshold;\n    for (const body of this.tableEl.querySelectorAll<HTMLElement>('tbody[data-group-id]')) {\n      const source = body.querySelector<HTMLElement>('.ds-table__group-cell');\n      if (!source) continue;\n      const sourceRect = source.getBoundingClientRect();\n      const bodyRect = body.getBoundingClientRect();\n      if (sourceRect.top <= threshold && bodyRect.bottom > threshold) {\n        activeGroupId = body.dataset.groupId ?? null;\n        // A sticky section is bounded by its own row group. As that boundary\n        // approaches the sticky lane, move the outgoing section bar with it so\n        // the incoming source bar pushes it away instead of rendering beneath it.\n        activeGroupTop = Math.min(threshold, bodyRect.bottom - sourceRect.height);\n      }\n    }\n\n    const frameRect = this.frameEl.getBoundingClientRect();\n    this.frameEl.style.setProperty(\n      '--_table-sticky-group-top',\n      `${activeGroupTop - frameRect.top}px`,\n    );\n\n    if (activeGroupId !== this.activeStickyGroupId) {\n      this.activeStickyGroupId = activeGroupId;\n      return;\n    }\n  };\n\n  @Watch('columns')\n  @Watch('grouping')\n  @Watch('hiddenColumnIds')\n  @Watch('columnOrder')\n  @Watch('columnCustomizer')\n  handleStructureChange(): void {\n    this.warnModelIssues();\n    this.loadController.structureChanged();\n    this.groupLoadController.structureChanged();\n  }\n\n  @Watch('rows')\n  @Watch('groups')\n  handleDataChange(): void {\n    if (this.grouped) this.groupLoadController.dataChanged();\n    else this.loadController.dataChanged();\n    this.warnModelIssues();\n    this.syncActionMenu();\n  }\n\n  @Watch('loadIdentity')\n  handleLoadIdentityChange(): void {\n    this.incrementalWindowActive = this.hasIncrementalState;\n    this.loadController.identityChanged();\n  }\n\n  @Watch('loadMoreMode')\n  @Watch('loadMoreThreshold')\n  handleLazyConfigurationChange(): void {\n    this.loadController.configurationChanged();\n    this.groupLoadController.configurationChanged();\n  }\n\n  @Watch('dataMode')\n  handleDataModeChange(): void {\n    this.incrementalWindowActive = this.hasIncrementalState;\n    this.handleLazyConfigurationChange();\n  }\n\n  @Watch('pagination')\n  handlePaginationChange(\n    pagination: TablePaginationState | null,\n    previous: TablePaginationState | null,\n  ): void {\n    if (\n      pagination?.pageSizeMode === 'fit' &&\n      pagination.fitIdentity !== previous?.fitIdentity\n    ) {\n      this.fitMeasurementPending = true;\n    }\n  }\n\n  @Watch('loadingMore')\n  handleLoadingMoreChange(loading: boolean): void {\n    if (loading) this.incrementalWindowActive = true;\n    if (!this.grouped) this.loadController.loadingChanged(loading);\n  }\n\n  @Watch('loadMoreError')\n  handleLoadMoreErrorChange(error: string | undefined): void {\n    if (error?.trim()) this.incrementalWindowActive = true;\n    if (!this.grouped) this.loadController.errorChanged(error);\n  }\n\n  @Watch('hasMore')\n  handleHasMoreChange(hasMore: boolean, hadMore: boolean): void {\n    if (hasMore) this.incrementalWindowActive = true;\n    if (!this.grouped) this.loadController.hasMoreChanged(hasMore, hadMore);\n  }\n\n  @Watch('columnCustomizer')\n  @Watch('captionVisibility')\n  handleColumnCustomizerAvailability(): void {\n    if (!this.showsColumnCustomizer) this.closeColumnCustomizer();\n  }\n\n  @Watch('dataModeSwitcher')\n  @Watch('captionVisibility')\n  handleDataModeSwitcherAvailability(): void {\n    if (!this.showsDataModeSwitcher) this.closeDataModeSwitcher();\n  }\n\n  private get grouped(): boolean {\n    return this.grouping !== null;\n  }\n\n  private get hasIncrementalState(): boolean {\n    return this.dataMode === 'infinite' &&\n      (this.hasMore || this.loadingMore || !!this.loadMoreError?.trim());\n  }\n\n  private get selectable(): boolean {\n    return this.selectionMode === 'multiple';\n  }\n\n  private get visibleColumns(): TableColumn[] {\n    return resolveTableVisibleColumns(this.columns, {\n      columnCustomizer: this.columnCustomizer,\n      hiddenColumnIds: this.hiddenColumnIds,\n      columnOrder: this.columnOrder,\n    });\n  }\n\n  private get showsColumnCustomizer(): boolean {\n    return this.columnCustomizer && this.captionVisibility === 'visible';\n  }\n\n  private get showsDataModeSwitcher(): boolean {\n    return this.dataModeSwitcher && this.captionVisibility === 'visible';\n  }\n\n  private get showsCaptionTrailing(): boolean {\n    return this.showsDataModeSwitcher || this.showsColumnCustomizer;\n  }\n\n  private get documentStickyHeader(): boolean {\n    return this.stickyHeader && !this.containedScroll;\n  }\n\n  private get fixedHeight(): boolean {\n    return !this.fitViewport && this.resolvedHeight !== undefined;\n  }\n\n  private get boundedComposition(): boolean {\n    return this.fitViewport || this.fixedHeight;\n  }\n\n  private get containedScroll(): boolean {\n    return this.boundedComposition || this.resolvedMaxHeight !== undefined;\n  }\n\n  private connectFitObserver(): void {\n    if (typeof ResizeObserver === 'undefined') return;\n    if (this.fitObservedViewport === this.viewportEl && this.fitObservedTable === this.tableEl) {\n      return;\n    }\n    this.disconnectFitObserver();\n    this.fitObservedViewport = this.viewportEl;\n    this.fitObservedTable = this.tableEl;\n    this.fitResizeObserver = new ResizeObserver(this.syncFitPageSize);\n    if (this.fitObservedViewport) this.fitResizeObserver.observe(this.fitObservedViewport);\n    if (this.fitObservedTable) this.fitResizeObserver.observe(this.fitObservedTable);\n  }\n\n  private disconnectFitObserver(): void {\n    this.fitResizeObserver?.disconnect();\n    this.fitResizeObserver = null;\n    this.fitObservedViewport = null;\n    this.fitObservedTable = null;\n  }\n\n  private readonly syncFitPageSize = (): void => {\n    const pagination = this.dataMode === 'pagination' ? this.pagination : null;\n    if (!pagination?.fitToPage || !this.containedScroll || !this.viewportEl || !this.tableEl) {\n      if (this.fitPageSize !== undefined) this.fitPageSize = undefined;\n      this.fitMeasurementPending = false;\n      return;\n    }\n    const header = this.tableEl.querySelector<HTMLElement>(\n      '.ds-table__head .ds-table__header-row',\n    );\n    const item = this.tableEl.querySelector<HTMLElement>(\n      this.grouped ? '.ds-table__group-row' : '.ds-table__body .ds-table__row',\n    );\n    const itemBlockSize = item?.getBoundingClientRect().height || resolveCssLengthPx(\n      'var(--ds-table-row-min-block-size, var(--dimension-size-500))',\n      0,\n      this.rootEl ?? this.el,\n    );\n    const next = resolveTableFitPageSize({\n      viewportBlockSize: this.viewportEl.clientHeight,\n      headerBlockSize: header?.getBoundingClientRect().height ?? 0,\n      itemBlockSize,\n    });\n    if (next !== this.fitPageSize) this.fitPageSize = next;\n    if (!this.fitMeasurementPending || pagination.pageSizeMode !== 'fit' || next === undefined) {\n      return;\n    }\n    this.fitMeasurementPending = false;\n    if (next === pagination.pageSize && pagination.pageIndex === 0) return;\n    this.dsPaginationChange.emit({\n      pageIndex: 0,\n      pageSize: next,\n      pageSizeMode: 'fit',\n      totalItems: pagination.totalItems,\n      pageSizeOptions: pagination.pageSizeOptions ?? [25, 50, 100, 200],\n      fitToPage: true,\n      fitPageSize: next,\n      fitPageSizeLabel: pagination.fitPageSizeLabel ?? 'Fit to page',\n      fitPageSizeTriggerLabel: pagination.fitPageSizeTriggerLabel ?? 'Fit',\n      itemLabel: pagination.itemLabel ?? 'items',\n      pageSizeLabel: pagination.pageSizeLabel ?? 'Items',\n      ariaLabel: pagination.ariaLabel ?? `${this.caption} pagination`,\n      previousPageIndex: pagination.pageIndex,\n      previousPageSize: pagination.pageSize,\n      previousPageSizeMode: 'fit',\n      reason: 'fit',\n    });\n  };\n\n  private handlePaginationKeyDown(event: KeyboardEvent): void {\n    const pagination = this.dataMode === 'pagination' ? this.pagination : null;\n    if (\n      !pagination ||\n      this.loading ||\n      event.defaultPrevented ||\n      event.altKey ||\n      event.ctrlKey ||\n      event.metaKey ||\n      event.shiftKey ||\n      (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')\n    ) {\n      return;\n    }\n\n    const fromDirectionalControl = event.composedPath().some(node => {\n      if (!(node instanceof HTMLElement)) return false;\n      return node.tagName === 'DS-SELECT' ||\n        node.tagName === 'DS-MENU' ||\n        ['INPUT', 'SELECT', 'TEXTAREA'].includes(node.tagName) ||\n        node.isContentEditable ||\n        node.getAttribute('role') === 'slider';\n    });\n    if (fromDirectionalControl) return;\n\n    const state = resolvePaginationState(pagination);\n    const pageIndex = event.key === 'ArrowLeft' ? state.pageIndex - 1 : state.pageIndex + 1;\n    if (pageIndex < 0 || pageIndex >= state.totalPages) return;\n\n    event.preventDefault();\n    this.dsPaginationChange.emit({\n      pageIndex,\n      pageSize: state.pageSize,\n      pageSizeMode: state.pageSizeMode,\n      totalItems: state.totalItems,\n      pageSizeOptions: state.pageSizeOptions,\n      fitToPage: pagination.fitToPage ?? false,\n      fitPageSize: this.fitPageSize ?? pagination.fitPageSize,\n      fitPageSizeLabel: pagination.fitPageSizeLabel ?? 'Fit to page',\n      fitPageSizeTriggerLabel: pagination.fitPageSizeTriggerLabel ?? 'Fit',\n      itemLabel: pagination.itemLabel ?? 'items',\n      pageSizeLabel: pagination.pageSizeLabel ?? 'Items',\n      ariaLabel: pagination.ariaLabel ?? `${this.caption} pagination`,\n      previousPageIndex: state.pageIndex,\n      previousPageSize: state.pageSize,\n      previousPageSizeMode: state.pageSizeMode,\n      reason: 'page',\n    });\n  }\n\n  private currentLoadedRows(): TableRow[] {\n    return tableRows(this.rows, this.groups, this.grouped);\n  }\n\n  private currentLoadedRowCount(): number {\n    return this.grouped\n      ? this.groups.reduce((count, group) => count + group.rows.length, 0)\n      : this.rows.length;\n  }\n\n  private createRenderModel(): TableRenderModel {\n    return createTableRenderModel({\n      columns: this.visibleColumns,\n      rows: this.rows,\n      groups: this.groups,\n      grouped: this.grouped,\n      selectionMode: this.selectionMode,\n      selectedRowIds: this.selectedRowIds,\n      collapsedGroupIds: this.collapsedGroupIds,\n    });\n  }\n\n  private get resolvedMaxHeight(): string | undefined {\n    if (this.maxHeight == null || this.maxHeight === '') return undefined;\n    return typeof this.maxHeight === 'number' ? `${Math.max(0, this.maxHeight)}px` : this.maxHeight;\n  }\n\n  private get resolvedHeight(): string | undefined {\n    if (this.height == null || this.height === '') return undefined;\n    return typeof this.height === 'number' ? `${Math.max(0, this.height)}px` : this.height;\n  }\n\n  private warnModelIssues(): void {\n    const issues = tableModelIssues(this.columns, this.rows, this.groups, this.grouped);\n    const visibleColumns = this.visibleColumns;\n    if (!this.caption?.trim()) issues.unshift('A non-empty caption is required.');\n    if (this.grouping) {\n      const groupingColumn = this.columns.find(column => column.id === this.grouping!.columnId);\n      if (!groupingColumn) {\n        issues.push(`Grouping references unknown column id: ${this.grouping.columnId}`);\n      } else if (!visibleColumns.some(column => column.id === groupingColumn.id)) {\n        issues.push(`Grouping references hidden column id: ${this.grouping.columnId}`);\n      }\n    }\n    if (this.sort) {\n      const sortColumn = this.columns.find(column =>\n        column.id === this.sort!.columnId ||\n        column.headerSegments?.some(segment => segment.sortKey === this.sort!.columnId),\n      );\n      if (!sortColumn) {\n        issues.push(`Sorting references unknown column id: ${this.sort.columnId}`);\n      } else if (!visibleColumns.some(column => column.id === sortColumn.id)) {\n        issues.push(`Sorting references hidden column id: ${this.sort.columnId}`);\n      }\n    }\n    const stickyStart = visibleColumns.filter(column => column.sticky === 'start');\n    const stickyEnd = visibleColumns.filter(column => column.sticky === 'end');\n    if (stickyStart.length > 1 || (this.selectable && stickyStart.length > 0)) {\n      issues.push('Only one sticky start column is supported, and row selection already owns that lane.');\n    }\n    if (stickyEnd.length > 1) issues.push('Only one sticky end column is supported.');\n    for (const column of [...stickyStart, ...stickyEnd]) {\n      if (!tableColumnSize(column)) issues.push(`Sticky column ${column.id} requires an explicit size.`);\n    }\n    const message = issues.join(' ');\n    if (!message || message === this.previousModelWarning) return;\n    this.previousModelWarning = message;\n    console.warn(`[ds-table] ${message}`);\n  }\n\n  private emitSort(column: TableColumn, sortKey = column.id): void {\n    if (!column.sortable) return;\n    this.dsSortChange.emit({ sort: nextTableSortState(this.sort, sortKey) });\n  }\n\n  private sortButtonLabel(column: TableColumn, sortKey = column.id, label = column.header): string {\n    if (this.sort?.columnId !== sortKey) return `Sort ${label} ascending`;\n    if (this.sort.direction === 'asc') return `Sort ${label} descending. Currently ascending.`;\n    return `Sort ${label} ascending. Currently descending.`;\n  }\n\n  private emitRowSelection(row: TableRow): void {\n    const next = toggleTableRowSelection(this.selectedRowIds, row);\n    const selected = next.includes(row.id);\n    this.dsSelectionChange.emit({\n      selectedRowIds: next,\n      scope: 'row',\n      changedRowId: row.id,\n      selected,\n    });\n  }\n\n  private emitAllSelection(): void {\n    const loadedRows = this.currentLoadedRows();\n    const selection = deriveTableSelectionState(loadedRows, this.selectedRowIds);\n    this.dsSelectionChange.emit({\n      selectedRowIds: toggleAllLoadedTableRows(this.selectedRowIds, loadedRows),\n      scope: 'all-loaded',\n      selected: !selection.allSelected,\n    });\n  }\n\n  private emitGroupSelection(group: TableGroup): void {\n    const state = deriveTableSelectionState(group.rows, this.selectedRowIds);\n    this.dsSelectionChange.emit({\n      selectedRowIds: toggleTableGroupSelection(this.selectedRowIds, group.rows),\n      scope: 'group',\n      groupId: group.id,\n      selected: !state.allSelected,\n    });\n  }\n\n  private rowEventOwnsActivation(event: Event): boolean {\n    const currentTarget = event.currentTarget;\n    return !event.composedPath().some(target => {\n      if (!(target instanceof HTMLElement) || target === currentTarget) return false;\n      return target.matches(\n        'button, a, input, select, textarea, [role=\"button\"], [role=\"checkbox\"], [popover], ds-button-unfilled, ds-menu',\n      );\n    });\n  }\n\n  private emitRowActivation(row: TableRow, event: Event): void {\n    if (!row.interactive || row.disabled || !this.rowEventOwnsActivation(event)) return;\n    this.dsRowActivate.emit({ rowId: row.id });\n  }\n\n  private syncActionMenu(): void {\n    if (!this.actionMenu) return;\n    const row = tableRows(this.rows, this.groups, this.grouped).find(\n      candidate => candidate.id === this.actionMenu?.rowId,\n    );\n    const value = row && !row.disabled ? row.cells[this.actionMenu.columnId] : undefined;\n    if (!isTableCellAction(value) || !isRenderableTableActionMenu(value)) {\n      this.actionMenu = null;\n    }\n  }\n\n  private closeActionMenu(): void {\n    this.actionMenu = null;\n  }\n\n  private handleActionMenuSelect(item: MenuItemData): void {\n    const open = this.actionMenu;\n    const actionId = item.value;\n    if (!open || !actionId || item.isInactive) return;\n    this.dsCellAction.emit({\n      actionId,\n      rowId: open.rowId,\n      columnId: open.columnId,\n    });\n    const triggerId = tableActionTriggerId(this.actionMenuElementId, open.rowId, open.columnId);\n    this.closeActionMenu();\n    requestAnimationFrame(() => {\n      const trigger = this.el.querySelector<HTMLElement & { setFocus?: () => void }>(\n        `#${CSS.escape(triggerId)}`,\n      );\n      trigger?.setFocus?.();\n    });\n  }\n\n  private toggleActionMenu(row: TableRow, column: TableColumn, event: MouseEvent): void {\n    if (row.disabled) return;\n    const open =\n      this.actionMenu?.rowId === row.id && this.actionMenu?.columnId === column.id;\n    this.actionMenuInitialFocusVisible = event.detail === 0;\n    this.actionMenu = open ? null : { rowId: row.id, columnId: column.id };\n  }\n\n  private renderOverflowActionMenu() {\n    const open = this.actionMenu;\n    const row = open\n      ? tableRows(this.rows, this.groups, this.grouped).find(candidate => candidate.id === open.rowId)\n      : undefined;\n    const value = row && open ? row.cells[open.columnId] : undefined;\n    const menu = isTableCellAction(value) && isRenderableTableActionMenu(value) ? value : undefined;\n    const sections = menu ? tableActionMenuSections(menu.items) : [];\n    const triggerId = open\n      ? tableActionTriggerId(this.actionMenuElementId, open.rowId, open.columnId)\n      : undefined;\n\n    return (\n      <ds-menu\n        id={this.actionMenuElementId}\n        open={Boolean(open && sections.length)}\n        anchorId={triggerId}\n        align=\"end\"\n        side=\"bottom\"\n        menuLabel={menu?.ariaLabel ?? 'More actions'}\n        initialFocusVisible={this.actionMenuInitialFocusVisible}\n        sections={sections}\n        onDsClose={() => this.closeActionMenu()}\n        onDsSelect={event => this.handleActionMenuSelect(event.detail)}\n      />\n    );\n  }\n\n  private connectTruncateTooltip(): void {\n    if (this.truncateTooltipBound) return;\n    this.el.addEventListener('pointerover', this.onTruncatePointerOver);\n    this.el.addEventListener('pointerout', this.onTruncatePointerOut);\n    this.el.addEventListener('focusin', this.onTruncateFocusIn);\n    this.el.addEventListener('focusout', this.onTruncateFocusOut);\n    this.truncateTooltipBound = true;\n  }\n\n  private disconnectTruncateTooltip(): void {\n    if (!this.truncateTooltipBound) return;\n    this.el.removeEventListener('pointerover', this.onTruncatePointerOver);\n    this.el.removeEventListener('pointerout', this.onTruncatePointerOut);\n    this.el.removeEventListener('focusin', this.onTruncateFocusIn);\n    this.el.removeEventListener('focusout', this.onTruncateFocusOut);\n    this.truncateTooltipBound = false;\n    this.dismissTruncateTooltip();\n  }\n\n  private onTruncatePointerOver = (event: PointerEvent) => {\n    if (event.pointerType === 'touch') return;\n    const track = resolveTableTruncateTrack(event.target);\n    if (!track) return;\n    this.presentOrDismissTruncateTrack(track);\n  };\n\n  private onTruncatePointerOut = (event: PointerEvent) => {\n    if (event.pointerType === 'touch') return;\n    if (resolveTableTruncateTrack(event.relatedTarget)) return;\n    const next = event.relatedTarget;\n    const cell = this.truncateAnchor?.closest('.ds-table__cell');\n    if (cell && next instanceof Node && cell.contains(next)) return;\n    this.dismissTruncateTooltip();\n  };\n\n  private onTruncateFocusIn = (event: FocusEvent) => {\n    const track = resolveTableTruncateTrack(event.target);\n    if (!track) {\n      this.dismissTruncateTooltip();\n      return;\n    }\n    this.presentOrDismissTruncateTrack(track);\n  };\n\n  private onTruncateFocusOut = (event: FocusEvent) => {\n    if (resolveTableTruncateTrack(event.relatedTarget)) return;\n    this.dismissTruncateTooltip();\n  };\n\n  private presentOrDismissTruncateTrack(track: HTMLElement): void {\n    if (!isElementTruncated(track)) {\n      this.dismissTruncateTooltip();\n      return;\n    }\n    const label = tableTruncateLabel(track);\n    if (!label) {\n      this.dismissTruncateTooltip();\n      return;\n    }\n    this.truncateAnchor = track;\n    this.truncateTooltipLabel = label;\n    void this.truncateTooltipEl?.presentFrom(track, label);\n  }\n\n  private dismissTruncateTooltip(): void {\n    this.truncateAnchor = null;\n    if (!this.truncateTooltipLabel && !this.truncateTooltipEl) return;\n    this.truncateTooltipLabel = '';\n    void this.truncateTooltipEl?.dismiss();\n  }\n\n  private renderTruncateTooltip() {\n    return (\n      <ds-tooltip\n        ref={element => {\n          this.truncateTooltipEl = element;\n        }}\n        label={this.truncateTooltipLabel}\n        describedBy={false}\n        wrapLabel={true}\n        size=\"sm\"\n        delay={0}\n        side=\"top\"\n      />\n    );\n  }\n\n  private truncateAttr(lineClamp: TableCellLineClamp) {\n    return lineClamp === 'none' ? undefined : '';\n  }\n\n  private handleRowKeydown(row: TableRow, event: KeyboardEvent): void {\n    if (event.target !== event.currentTarget || (event.key !== 'Enter' && event.key !== ' ')) return;\n    event.preventDefault();\n    this.emitRowActivation(row, event);\n  }\n\n  private renderSelectionControl(\n    label: string,\n    checked: boolean,\n    indeterminate: boolean,\n    disabled: boolean,\n    onActivate: () => void,\n  ) {\n    return (\n      <button\n        class=\"ds-table__selection-control ds-focus-ring ds-interaction-fill__content\"\n        type=\"button\"\n        role=\"checkbox\"\n        aria-label={label}\n        aria-checked={indeterminate ? 'mixed' : String(checked)}\n        disabled={disabled}\n        onClick={onActivate}\n      >\n        <ds-checkbox\n          label=\"\"\n          size=\"md\"\n          checked={checked}\n          indeterminate={indeterminate}\n          presentation={true}\n        />\n      </button>\n    );\n  }\n\n  private renderStickyEdge(sticky: TableColumn['sticky']) {\n    if (!sticky) return null;\n    return (\n      <span\n        class={`ds-table__sticky-edge ds-table__sticky-edge--${sticky}`}\n        aria-hidden=\"true\"\n      />\n    );\n  }\n\n  private renderCollapseAllButton() {\n    return (\n      <ds-button-unfilled\n        class=\"ds-table__collapse-all\"\n        variant=\"icon\"\n        icon=\"ChevronDownUp\"\n        size=\"xs\"\n        style={{ width: 'var(--dimension-size-300)' }}\n        aria-label=\"Collapse all groups\"\n        hasBorder={false}\n        activeFill={false}\n        pressScale={false}\n        onDsClick={event => {\n          event.stopPropagation();\n          this.emitAllGroupsCollapse();\n        }}\n      />\n    );\n  }\n\n  private renderFloatingCollapseAll(model: TableRenderModel) {\n    if (model.collapseAllHost?.mode !== 'floating') return null;\n    return (\n      <span\n        class=\"ds-table__collapse-all-overlay\"\n        ref={element => {\n          this.collapseAllOverlayEl = element ?? null;\n        }}\n      >\n        <span class=\"ds-table__collapse-all-surface ds-control-elevation ds-control-elevation--md\">\n          {this.renderCollapseAllButton()}\n        </span>\n      </span>\n    );\n  }\n\n  private renderColumnHeader(\n    column: TableColumn,\n    model: TableRenderModel,\n    interactive = true,\n    presentational = false,\n  ) {\n    const groupedColumn = this.grouping?.columnId === column.id;\n    const headerSegments = column.headerSegments?.length\n      ? column.headerSegments\n      : [{ label: column.header, sortKey: column.id }];\n    const activeMemberSegment = headerSegments.find(\n      segment => segment.sortKey === this.sort?.columnId,\n    );\n    const activeMemberSort = !!activeMemberSegment;\n    const activeSort = activeMemberSort;\n    const align = column.align ?? 'start';\n    const direction = activeMemberSort ? this.sort!.direction : undefined;\n    const memberAriaSort = activeMemberSort\n      ? (this.sort!.direction === 'asc' ? 'ascending' : 'descending')\n      : undefined;\n\n    const help = column.help?.trim();\n    const labels = (\n      <span\n        class=\"ds-table__header-labels\"\n        tabIndex={interactive && help && !column.sortable ? 0 : undefined}\n        data-header-help={help ? '' : undefined}\n      >\n        {headerSegments.map((segment, index) => {\n          const segmentActive = activeMemberSegment?.sortKey === segment.sortKey;\n          const segmentInteractive = interactive && !!column.sortable;\n          const label = (\n            <ds-text\n              class=\"ds-table__header-label-box ds-control-label-box\"\n              as=\"span\"\n              variant=\"text-caption\"\n              emphasis={segmentActive}\n              color=\"inherit\"\n              decoration={help ? 'dotted-underline' : undefined}\n              lineTruncation={1}\n            >\n              {segment.label}\n            </ds-text>\n          );\n          const control = segmentInteractive ? (\n            <button\n              class=\"ds-table__header-label ds-table__header-label--interactive ds-focus-ring\"\n              type=\"button\"\n              aria-label={this.sortButtonLabel(column, segment.sortKey, segment.label)}\n              data-sort-control=\"label\"\n              data-sort-key={segment.sortKey}\n              data-sort-active={segmentActive ? 'true' : undefined}\n              onClick={() => this.emitSort(column, segment.sortKey)}\n            >\n              {label}\n            </button>\n          ) : (\n            <span class=\"ds-table__header-label ds-table__header-static\">{label}</span>\n          );\n\n          return (\n            <span class=\"ds-table__header-segment\" key={segment.sortKey}>\n              {control}\n              {index < headerSegments.length - 1 && (\n                <ds-text\n                  class=\"ds-table__header-separator\"\n                  as=\"span\"\n                  variant=\"text-caption\"\n                  color=\"tertiary\"\n                  aria-hidden=\"true\"\n                >\n                  {segment.separator ?? '/'}\n                </ds-text>\n              )}\n            </span>\n          );\n        })}\n      </span>\n    );\n    const labelControl = interactive && help ? (\n      <ds-tooltip label={help} side=\"top\" size=\"sm\" wrapLabel={true}>\n        {labels}\n      </ds-tooltip>\n    ) : labels;\n    const sortControl = interactive ? (\n      <span class=\"ds-table__sort-slot\">\n        {activeSort && (\n          <ds-button-unfilled\n            class=\"ds-table__sort-direction\"\n            variant=\"icon\"\n            icon={direction === 'asc' ? 'ArrowUp' : 'ArrowDown'}\n            size=\"xs\"\n            aria-label={this.sortButtonLabel(\n              column,\n              activeMemberSegment?.sortKey ?? column.id,\n              activeMemberSegment?.label ?? column.header,\n            )}\n            hasBorder={false}\n            activeFill={false}\n            isActive={true}\n            pressScale={false}\n            data-sort-control=\"direction\"\n            onDsClick={() => this.emitSort(column, activeMemberSegment?.sortKey ?? column.id)}\n          />\n        )}\n      </span>\n    ) : null;\n    const collapseHost = model.collapseAllHost;\n    const actionCollapseHost = collapseHost?.mode === 'action' && collapseHost.columnId === column.id;\n    const blankActionCollapseHost = actionCollapseHost &&\n      !column.header.trim() &&\n      !column.headerSegments?.length;\n    const collapseControl =\n      interactive && actionCollapseHost ? (\n        <span class=\"ds-table__collapse-slot\">\n          {this.renderCollapseAllButton()}\n        </span>\n      ) : null;\n\n    return (\n      <th\n        key={column.id}\n        class={{\n          'ds-table__header-cell': true,\n          [`ds-table__cell--align-${align}`]: true,\n          'ds-table__cell--sticky-start': column.sticky === 'start',\n          'ds-table__cell--sticky-end': column.sticky === 'end',\n          'ds-table__header-cell--collapse-all': actionCollapseHost,\n        }}\n        scope={presentational ? undefined : 'col'}\n        aria-sort={presentational ? undefined : memberAriaSort}\n        data-column-id={column.id}\n        data-grouped={groupedColumn ? 'true' : undefined}\n        data-sort-active={activeSort ? 'true' : undefined}\n      >\n        {!column.header.trim() && column.headerLabel?.trim() && (\n          <span class=\"ds-visually-hidden\">{column.headerLabel}</span>\n        )}\n        {blankActionCollapseHost ? (\n          <span class=\"ds-table__header-content ds-table__header-content--collapse-all\">\n            {collapseControl}\n          </span>\n        ) : (\n          <span class=\"ds-table__header-content\">\n            {align === 'end' && sortControl}\n            {align === 'center' && (\n              <span\n                class=\"ds-table__sort-slot ds-table__sort-slot--balance\"\n                data-sort-balance=\"true\"\n                aria-hidden=\"true\"\n              />\n            )}\n            {labelControl}\n            {align !== 'end' && sortControl}\n            {collapseControl}\n          </span>\n        )}\n        {this.renderStickyEdge(column.sticky)}\n      </th>\n    );\n  }\n\n  private renderColgroup(model: TableRenderModel) {\n    return (\n      <colgroup>\n        {model.selectable && <col class=\"ds-table__selection-column\" />}\n        {this.visibleColumns.map(column => {\n          const width = tableColumnSize(column);\n          const flexible = column.id === model.flexibleColumnId;\n          return (\n            <col\n              key={column.id}\n              class={{\n                'ds-table__action-column': column.kind === 'action',\n                'ds-table__flexible-column': flexible,\n              }}\n              style={width && !flexible ? { width } : undefined}\n            />\n          );\n        })}\n      </colgroup>\n    );\n  }\n\n  private renderHeader(\n    model: TableRenderModel,\n    interactive = true,\n    presentational = false,\n  ) {\n    const selection = model.selection;\n    return (\n      <thead class={{\n        'ds-table__head': true,\n        'ds-table__head--semantic-copy': !interactive,\n      }} ref={element => {\n        if (interactive) this.interactiveHeadEl = element ?? null;\n      }}>\n        <tr class=\"ds-table__header-row\">\n          {model.selectable && (\n            <th\n              class=\"ds-table__header-cell ds-table__selection-cell ds-table__cell--sticky-start\"\n              scope={presentational ? undefined : 'col'}\n            >\n              {interactive ? this.renderSelectionControl(\n                selection.allSelected ? 'Deselect all loaded rows' : 'Select all loaded rows',\n                selection.allSelected,\n                selection.indeterminate,\n                selection.selectableRowIds.length === 0,\n                () => this.emitAllSelection(),\n              ) : (\n                <span class=\"ds-visually-hidden\">Select rows</span>\n              )}\n              {this.renderStickyEdge('start')}\n            </th>\n          )}\n          {this.visibleColumns.map(column => (\n            this.renderColumnHeader(column, model, interactive, presentational)\n          ))}\n        </tr>\n      </thead>\n    );\n  }\n\n  private renderCellValue(\n    cell: TableCellPresentation,\n    column: TableColumn,\n    row: TableRow,\n  ) {\n    if (cell.kind === 'blank') return null;\n\n    if (cell.kind === 'empty') {\n      return (\n        <ds-text\n          class=\"ds-table__cell-track ds-table__cell-track--text\"\n          as=\"span\"\n          variant=\"text-body-medium\"\n          color=\"tertiary\"\n        >\n          <span aria-hidden=\"true\">—</span>\n          <span class=\"ds-visually-hidden\">{this.emptyCellLabel}</span>\n        </ds-text>\n      );\n    }\n\n    if (cell.kind === 'icon') {\n      const value = cell.value;\n      return (\n        <ds-icon\n          name={value.icon}\n          size=\"md\"\n          color={value.color ?? 'secondary'}\n          label={value.label}\n        />\n      );\n    }\n\n    if (cell.kind === 'icon-text') {\n      return (\n        <span class=\"ds-table__cell-icon-text\">\n          <span class=\"ds-table__cell-icon-text-icon\">\n            <ds-icon\n              name={cell.icon}\n              size=\"md\"\n              color={cell.iconColor ?? 'secondary'}\n              label={cell.iconLabel}\n            />\n          </span>\n          {this.renderTextCopy(cell)}\n        </span>\n      );\n    }\n\n    if (cell.kind === 'image') {\n      const value = cell.value;\n      return (\n        <span class=\"ds-table__cell-image\">\n          {value.src ? (\n            <img class=\"ds-table__cell-image-content\" src={value.src} alt={value.alt} loading=\"lazy\" />\n          ) : (\n            <span\n              class=\"ds-table__cell-image-placeholder\"\n              role=\"img\"\n              aria-label={value.alt}\n            />\n          )}\n        </span>\n      );\n    }\n\n    if (cell.kind === 'action') {\n      const value = cell.value;\n      const menu = isRenderableTableActionMenu(value);\n      const triggerId = tableActionTriggerId(this.actionMenuElementId, row.id, column.id);\n      const expanded = menu &&\n        this.actionMenu?.rowId === row.id &&\n        this.actionMenu?.columnId === column.id;\n      return (\n        <ds-button-unfilled\n          id={menu ? triggerId : undefined}\n          variant={menu ? 'icon' : value.variant ?? 'label'}\n          size=\"md\"\n          isInset={true}\n          insetDepth=\"double\"\n          label={value.label ?? ''}\n          icon={value.icon ?? (menu ? 'Ellipses' : '')}\n          aria-label={value.ariaLabel ?? null}\n          hasBorder={value.hasBorder ?? false}\n          isInactive={value.isInactive ?? false}\n          isLoading={value.isLoading ?? false}\n          hasMenu={menu}\n          expanded={menu ? expanded : undefined}\n          controls={menu ? this.actionMenuElementId : undefined}\n          onDsClick={event => {\n            event.stopPropagation();\n            if (menu) {\n              this.toggleActionMenu(row, column, event.detail);\n              return;\n            }\n            if (isTableCellActionMenu(value)) return;\n            this.dsCellAction.emit({\n              actionId: value.actionId,\n              rowId: row.id,\n              columnId: column.id,\n            });\n          }}\n        />\n      );\n    }\n\n    if (cell.kind === 'tag') {\n      const value = cell.value;\n      const variant = cell.variant;\n      const tag = (\n        <ds-tag\n          label={value.label}\n          intent={value.intent ?? 'neutral'}\n          contrast={value.contrast ?? 'faint'}\n          size={variant === 'text-with-tag' ? 'sm' : 'md'}\n          icon={value.icon ?? ''}\n          rounded={value.rounded ?? false}\n          isInset\n          insetDepth={variant === 'text-with-tag' ? 'single' : 'double'}\n        />\n      );\n\n      if (variant === 'tag-only') return tag;\n\n      return (\n        <span class={`ds-table__cell-tag-stack ds-table__cell-tag-stack--${variant}`}>\n          {variant === 'tag-with-text' && tag}\n          <ds-text\n            class=\"ds-table__cell-tag-text ds-table__cell-track\"\n            as=\"span\"\n            variant={variant === 'tag-with-text' ? 'text-body-small' : 'text-body-medium'}\n            color=\"secondary\"\n            lineTruncation={1}\n            data-table-truncate=\"\"\n          >\n            {value.text}\n          </ds-text>\n          {variant === 'text-with-tag' && (\n            <span class=\"ds-table__cell-tag-control-track\">{tag}</span>\n          )}\n        </span>\n      );\n    }\n\n    if (cell.kind !== 'text') return null;\n    return this.renderTextCopy(cell);\n  }\n\n  private renderTextCopy(\n    cell: Extract<TableCellPresentation, { kind: 'text' | 'icon-text' }>,\n  ) {\n    const text = cell.value;\n    const wraps = cell.wraps;\n    const overflow = tableCellTextOverflowProps(cell.lineClamp);\n    const truncate = this.truncateAttr(cell.lineClamp);\n    const primaryText = cell.kind === 'text' && cell.primaryText;\n    const href = resolveSafeUrl(text.href);\n    const primary = (\n      <ds-text\n        class=\"ds-table__cell-primary ds-table__cell-track ds-table__cell-track--text\"\n        as=\"span\"\n        variant=\"text-body-medium\"\n        color={href ? 'inherit' : 'primary'}\n        lineTruncation={overflow.lineTruncation}\n        wrap={overflow.wrap}\n        fontFeature={text.fontFeature ?? 'normal'}\n        data-table-truncate={truncate}\n      >\n        {text.primary}\n      </ds-text>\n    );\n\n    return (\n      <span class={{ 'ds-table__cell-copy': true, 'ds-table__cell-copy--wrap': wraps }}>\n        {href ? (\n          <a\n            class=\"ds-table__cell-link ds-text-action ds-focus-ring\"\n            href={href}\n            target={text.target === '_blank' ? '_blank' : undefined}\n            rel={text.target === '_blank' ? 'noopener noreferrer' : undefined}\n          >\n            {primary}\n          </a>\n        ) : primary}\n        {this.renderTextTrack(text.secondary, {\n          track: 'secondary',\n          variant: primaryText ? 'text-body-medium' : 'text-body-small',\n          defaultColor: primaryText ? 'primary' : 'secondary',\n          wholeColor: text.secondaryColor,\n          lineClamp: cell.lineClamp,\n        })}\n        {this.renderTextTrack(text.tertiary, {\n          track: 'tertiary',\n          variant: 'text-body-small',\n          defaultColor: 'secondary',\n          wholeColor: text.tertiaryColor,\n          lineClamp: cell.lineClamp,\n        })}\n      </span>\n    );\n  }\n\n  private renderTextTrack(\n    runs: TableCellTextRun[] | undefined,\n    options: {\n      track: 'secondary' | 'tertiary';\n      variant: 'text-body-medium' | 'text-body-small';\n      defaultColor: 'primary' | 'secondary';\n      wholeColor?: TableCellTextRun['color'];\n      lineClamp: TableCellLineClamp;\n    },\n  ) {\n    if (!runs?.length) return null;\n    const trackClass = `ds-table__cell-${options.track} ds-table__cell-track ds-table__cell-track--text`;\n    const overflow = tableCellTextOverflowProps(options.lineClamp);\n    const truncate = this.truncateAttr(options.lineClamp);\n    const colorFor = (run: TableCellTextRun) =>\n      run.color ?? options.wholeColor ?? options.defaultColor;\n    if (runs.length === 1) {\n      return (\n        <ds-text\n          class={trackClass}\n          as=\"span\"\n          variant={options.variant}\n          color={colorFor(runs[0])}\n          lineTruncation={overflow.lineTruncation}\n          wrap={overflow.wrap}\n          data-table-truncate={truncate}\n        >\n          {runs[0].text}\n        </ds-text>\n      );\n    }\n\n    return (\n      <span class={`${trackClass} ds-table__cell-track--runs`}>\n        {runs.map((run, index) => [\n          index > 0 && (\n            <ds-text\n              key={`${options.track}-sep-${index}`}\n              class=\"ds-table__cell-run-separator\"\n              as=\"span\"\n              variant={options.variant}\n              color=\"secondary\"\n              aria-hidden=\"true\"\n            >\n              ·\n            </ds-text>\n          ),\n          <ds-text\n            key={`${options.track}-run-${index}`}\n            class=\"ds-table__cell-run\"\n            as=\"span\"\n            variant={options.variant}\n            color={colorFor(run)}\n            lineTruncation={overflow.lineTruncation}\n            wrap={overflow.wrap}\n            data-table-truncate={truncate}\n          >\n            {run.text}\n          </ds-text>,\n        ])}\n      </span>\n    );\n  }\n\n  private renderRow(row: TableRow, model: TableRenderModel) {\n    const selected = model.selectedRowIds.has(row.id);\n    const rowSelectable = row.selectable !== false && !row.disabled;\n    return (\n      <tr\n        key={row.id}\n        class={{\n          'ds-table__row': true,\n          'ds-table__row--selected': selected,\n          'ds-table__row--disabled': !!row.disabled,\n          'ds-table__row--interactive': !!row.interactive && !row.disabled,\n          'ds-focus-ring': !!row.interactive && !row.disabled,\n        }}\n        data-row-id={row.id}\n        data-selected={selected ? 'true' : undefined}\n        aria-disabled={row.disabled ? 'true' : undefined}\n        tabIndex={row.interactive && !row.disabled ? 0 : undefined}\n        onClick={event => this.emitRowActivation(row, event)}\n        onKeyDown={event => this.handleRowKeydown(row, event)}\n      >\n        {model.selectable && (\n          <td class={{\n            'ds-table__cell': true,\n            'ds-table__selection-cell': true,\n            'ds-table__cell--sticky-start': true,\n            'ds-interaction-fill': true,\n            'ds-interaction-fill--grouped': true,\n            'ds-interaction-fill--selected': selected,\n          }}>\n            {this.renderSelectionControl(\n              `${selected ? 'Deselect' : 'Select'} ${tableRowSelectionLabel(row, this.visibleColumns)}`,\n              selected,\n              false,\n              !rowSelectable,\n              () => this.emitRowSelection(row),\n            )}\n            {this.renderStickyEdge('start')}\n          </td>\n        )}\n        {this.visibleColumns.map(column => {\n          const align = column.align ?? 'start';\n          const cell = resolveTableCellPresentation(row.cells[column.id], column);\n          const tagCell = cell.kind === 'tag';\n          const iconCell = cell.kind === 'icon';\n          const iconTextCell = cell.kind === 'icon-text';\n          const imageCell = cell.kind === 'image';\n          const actionCell = cell.kind === 'action';\n          const actionMenuCell = actionCell && isRenderableTableActionMenu(cell.value);\n          const textCell = cell.kind === 'text';\n          const primaryTextCell = textCell && cell.primaryText;\n          const singleTextCell = textCell && cell.singleLine;\n          const emptyCell = cell.kind === 'empty';\n          const blankCell = cell.kind === 'blank';\n          const tagVariant = tagCell ? cell.variant : undefined;\n          const textVariant = textCell ? cell.variant : undefined;\n          const imageVariant = cell.kind === 'image' ? cell.variant : undefined;\n          const iconTextVariant = iconTextCell ? cell.variant : undefined;\n          const wraps = (cell.kind === 'text' || cell.kind === 'icon-text') && cell.wraps;\n          return (\n            <td\n              key={`${row.id}:${column.id}`}\n              class={{\n                'ds-table__cell': true,\n                [`ds-table__cell--align-${align}`]: true,\n                'ds-table__cell--tag': tagCell,\n                [`ds-table__cell--tag-${tagVariant}`]: tagCell,\n                'ds-table__cell--icon': iconCell,\n                'ds-table__cell--icon-text': iconTextCell,\n                [`ds-table__cell--icon-text-${iconTextVariant}`]: iconTextCell,\n                'ds-table__cell--icon-text-wrap': iconTextCell && wraps,\n                'ds-table__cell--image': imageCell,\n                [`ds-table__cell--image-${imageVariant}`]: imageCell,\n                'ds-table__cell--action': actionCell,\n                'ds-table__cell--action-menu': actionMenuCell,\n                'ds-table__cell--primary-text': primaryTextCell,\n                'ds-table__cell--text-single': singleTextCell,\n                'ds-table__cell--text-multi': textCell && !singleTextCell && textVariant !== 'triple',\n                'ds-table__cell--text-triple': textVariant === 'triple',\n                'ds-table__cell--text-wrap': textCell && wraps,\n                'ds-table__cell--empty': emptyCell,\n                'ds-table__cell--blank': blankCell,\n                'ds-table__cell--sticky-start': column.sticky === 'start',\n                'ds-table__cell--sticky-end': column.sticky === 'end',\n                'ds-interaction-fill': true,\n                'ds-interaction-fill--grouped': true,\n                'ds-interaction-fill--selected': selected,\n              }}\n              data-column-id={column.id}\n              data-cell-type={cell.cellType}\n              data-cell-variant={tagVariant ?? textVariant ?? imageVariant ?? iconTextVariant}\n            >\n              <span class=\"ds-table__cell-content ds-interaction-fill__content\">\n                {this.renderCellValue(cell, column, row)}\n              </span>\n              {this.renderStickyEdge(column.sticky)}\n            </td>\n          );\n        })}\n      </tr>\n    );\n  }\n\n  private emitGroupCollapse(group: TableGroup) {\n    const collapsedGroupIds = toggleTableGroupCollapsed(this.collapsedGroupIds, group.id);\n    this.dsGroupCollapseChange.emit({\n      scope: 'group',\n      groupId: group.id,\n      collapsed: collapsedGroupIds.includes(group.id),\n      collapsedGroupIds,\n    });\n  }\n\n  private emitAllGroupsCollapse() {\n    const groupIds = this.groups.map(group => group.id);\n    const collapsedGroupIds = nextTableGroupsCollapsed(this.collapsedGroupIds, groupIds);\n    this.dsGroupCollapseChange.emit({\n      scope: 'all',\n      collapsed: collapsedGroupIds.length > 0,\n      collapsedGroupIds,\n    });\n  }\n\n  private renderGroupContent(groupModel: TableRenderModel['groups'][number]) {\n    const {\n      group,\n      count,\n      loadedCount,\n      countLabel,\n      collapsed: isCollapsed,\n      labelColor,\n      selection: groupSelection,\n    } = groupModel;\n    return (\n      <span class=\"ds-table__group-content\">\n        {groupSelection && (\n          <span class=\"ds-table__group-selection\">\n            {this.renderSelectionControl(\n              groupSelection.allSelected\n                ? `Deselect loaded rows in ${group.label} group`\n                : `Select loaded rows in ${group.label} group`,\n              groupSelection.allSelected,\n              groupSelection.indeterminate,\n              groupSelection.selectableRowIds.length === 0,\n              () => this.emitGroupSelection(group),\n            )}\n          </span>\n        )}\n        <span class=\"ds-table__group-copy\">\n          <ds-text\n            class=\"ds-table__group-label\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            emphasis={true}\n            color={labelColor}\n          >\n            {group.label}\n          </ds-text>\n          <ds-text\n            class=\"ds-table__group-separator\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            color=\"secondary\"\n            aria-hidden=\"true\"\n          >\n            ·\n          </ds-text>\n          <ds-text\n            class=\"ds-table__group-count\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            color=\"secondary\"\n            aria-hidden=\"true\"\n          >\n            {loadedCount} of {count}\n          </ds-text>\n          <span class=\"ds-visually-hidden\">{countLabel}</span>\n        </span>\n        <ds-button-unfilled\n          class=\"ds-table__group-toggle\"\n          variant=\"icon\"\n          size=\"md\"\n          isInset={true}\n          insetDepth=\"double\"\n          icon={isCollapsed ? 'ChevronDown' : 'ChevronUp'}\n          expanded={!isCollapsed}\n          aria-label={\n            isCollapsed\n              ? `Expand ${group.label} group`\n              : `Collapse ${group.label} group`\n          }\n          hasBorder={false}\n          onDsClick={event => {\n            event.stopPropagation();\n            this.emitGroupCollapse(group);\n          }}\n        />\n      </span>\n    );\n  }\n\n  private formatGroupLoadLabel(template: string, group: TableGroup): string {\n    return template.split('{group}').join(group.label);\n  }\n\n  private renderGroupLoadRow(group: TableGroup, totalColumns: number) {\n    const error = group.loadMoreError?.trim();\n    if (!error && !group.loadingMore && !group.hasMore) return null;\n    const manualFallback = this.loadMoreMode === 'manual' ||\n      !this.groupLoadController.intersectionSupported;\n\n    return (\n      <tr\n        class=\"ds-table__load-row ds-table__group-load-row\"\n        data-group-id={group.id}\n        ref={element => {\n          if (element) this.groupSentinelEls.set(group.id, element);\n          else this.groupSentinelEls.delete(group.id);\n        }}\n      >\n        <td class=\"ds-table__load-cell\" colSpan={totalColumns}>\n          <div class=\"ds-table__viewport-band ds-table__load-band\">\n            {error ? (\n              <span class=\"ds-table__load-content ds-table__load-content--error\">\n                <span class=\"ds-table__load-copy\">\n                  <ds-icon name=\"ErrorTriangle\" size=\"md\" color=\"secondary\" aria-hidden=\"true\" />\n                  <ds-text as=\"span\" variant=\"text-body-medium\" color=\"secondary\">{error}</ds-text>\n                </span>\n                <ds-button-unfilled\n                  label={this.formatGroupLoadLabel(this.groupRetryLabel, group)}\n                  size=\"md\"\n                  onDsClick={() => this.groupLoadController.request(group.id, 'retry')}\n                />\n              </span>\n            ) : group.loadingMore ? (\n              <span class=\"ds-table__load-content\">\n                <ds-loader size=\"md\" color=\"secondary\" />\n                <ds-text as=\"span\" variant=\"text-body-medium\" color=\"secondary\">\n                  {this.formatGroupLoadLabel(this.groupLoadingMoreLabel, group)}\n                </ds-text>\n              </span>\n            ) : group.hasMore && manualFallback ? (\n              <span class=\"ds-table__load-content\">\n                <ds-button-unfilled\n                  label={this.groupLoadMoreLabel}\n                  aria-label={this.formatGroupLoadLabel(this.groupLoadMoreAriaLabel, group)}\n                  size=\"md\"\n                  onDsClick={() => this.groupLoadController.request(group.id, 'manual')}\n                />\n              </span>\n            ) : (\n              <span class=\"ds-table__auto-sentinel\" aria-hidden=\"true\" />\n            )}\n          </div>\n        </td>\n      </tr>\n    );\n  }\n\n  private renderStickyGroup(model: TableRenderModel) {\n    if (!this.documentStickyHeader || !this.activeStickyGroupId) return null;\n    const groupModel = model.groups.find(item => item.group.id === this.activeStickyGroupId);\n    if (!groupModel) return null;\n    return (\n      <div\n        class={{\n          'ds-table__sticky-group': true,\n          'ds-table__sticky-group--selectable': model.selectable,\n          [groupModel.intentClass ?? '']: !!groupModel.intentClass,\n        }}\n        data-group-id={groupModel.group.id}\n        data-group-intent={groupModel.intent}\n      >\n        {this.renderGroupContent(groupModel)}\n      </div>\n    );\n  }\n\n  private renderDataBodies(model: TableRenderModel) {\n    if (!model.grouped) {\n      return (\n        <tbody class=\"ds-table__body\">\n          {this.rows.map(row => this.renderRow(row, model))}\n        </tbody>\n      );\n    }\n\n    return model.groups.map(groupModel => {\n      const { group, collapsed: isCollapsed, intent, intentClass } = groupModel;\n      const stickySourceHidden = this.documentStickyHeader && this.activeStickyGroupId === group.id;\n      return (\n        <tbody\n          class=\"ds-table__body ds-table__group\"\n          role=\"rowgroup\"\n          data-group-id={group.id}\n          data-group-intent={intent}\n          data-collapsed={isCollapsed ? 'true' : undefined}\n          aria-busy={!isCollapsed && group.loadingMore ? 'true' : undefined}\n          key={group.id}\n        >\n          <tr\n            role=\"row\"\n            aria-hidden={stickySourceHidden ? 'true' : undefined}\n            class={{\n              'ds-table__group-row': true,\n              'ds-table__group-row--native-sticky': this.stickyHeader && !this.documentStickyHeader,\n            }}\n          >\n            <th\n              class={{\n                'ds-table__group-cell': true,\n                'ds-table__group-cell--sticky-source-hidden': stickySourceHidden,\n                [intentClass ?? '']: !!intentClass,\n              }}\n              role=\"rowheader\"\n              scope=\"rowgroup\"\n              colSpan={model.totalColumns}\n            >\n              {this.renderGroupContent(groupModel)}\n            </th>\n          </tr>\n          {!isCollapsed && group.rows.map(row => this.renderRow(row, model))}\n          {!isCollapsed && this.renderGroupLoadRow(group, model.totalColumns)}\n        </tbody>\n      );\n    });\n  }\n\n  private renderSkeletonBody(model: TableRenderModel) {\n    const count = Math.min(20, Math.max(1, Math.round(this.skeletonRows) || 1));\n    return (\n      <tbody class=\"ds-table__body ds-table__skeleton-body\">\n        {Array.from({ length: count }, (_, index) => (\n          <tr class=\"ds-table__row ds-table__skeleton-row\" key={`skeleton-${index}`}>\n            {model.selectable && (\n              <td\n                class=\"ds-table__cell ds-table__selection-cell ds-table__cell--sticky-start ds-table__skeleton-cell ds-interaction-fill ds-interaction-fill--grouped\"\n                data-skeleton-kind=\"checkbox\"\n              >\n                <span class=\"ds-table__skeleton-checkbox-canvas ds-interaction-fill__content\">\n                  <ds-skeleton\n                    class=\"ds-table__skeleton-checkbox\"\n                    variant=\"control\"\n                    controlSize=\"xs\"\n                    width=\"var(--dimension-iconography-sm)\"\n                  />\n                </span>\n                {this.renderStickyEdge('start')}\n              </td>\n            )}\n            {this.visibleColumns.map(column => this.renderSkeletonCell(column, index))}\n          </tr>\n        ))}\n      </tbody>\n    );\n  }\n\n  private renderSkeletonCell(column: TableColumn, rowIndex: number) {\n    const skeleton = column.skeleton ?? (\n      column.kind === 'action'\n        ? { kind: 'action', variant: 'icon' }\n        : { kind: 'text', lines: 1 }\n    ) satisfies TableCellSkeleton;\n    const align = column.align ?? 'start';\n    const text = skeleton.kind === 'text';\n    const iconText = skeleton.kind === 'icon-text';\n    const lines = text || iconText ? skeleton.lines ?? 1 : 1;\n    const tag = skeleton.kind === 'tag';\n    const icon = skeleton.kind === 'icon';\n    const image = skeleton.kind === 'image';\n    const imageVariant = image\n      ? tableCellImageVariant(resolveTableCellImageTracks(skeleton.tracks))\n      : undefined;\n    const iconTextVariant = iconText\n      ? lines === 3 ? 'triple' : lines === 2 ? 'multi' : 'single'\n      : undefined;\n    const action = skeleton.kind === 'action';\n    const blank = skeleton.kind === 'blank';\n\n    return (\n      <td\n        class={{\n          'ds-table__cell': true,\n          [`ds-table__cell--align-${align}`]: true,\n          'ds-table__skeleton-cell': true,\n          'ds-table__cell--text-single': text && lines === 1,\n          'ds-table__cell--text-multi': text && lines === 2,\n          'ds-table__cell--text-triple': text && lines === 3,\n          'ds-table__cell--tag': tag,\n          'ds-table__cell--tag-tag-only': tag,\n          'ds-table__cell--icon': icon,\n          'ds-table__cell--icon-text': iconText,\n          [`ds-table__cell--icon-text-${iconTextVariant}`]: iconText,\n          'ds-table__cell--image': image,\n          [`ds-table__cell--image-${imageVariant}`]: image,\n          'ds-table__cell--action': action,\n          'ds-table__cell--blank': blank,\n          'ds-table__cell--sticky-start': column.sticky === 'start',\n          'ds-table__cell--sticky-end': column.sticky === 'end',\n          'ds-interaction-fill': true,\n          'ds-interaction-fill--grouped': true,\n        }}\n        data-column-id={column.id}\n        data-skeleton-kind={skeleton.kind}\n        data-cell-variant={imageVariant ?? iconTextVariant}\n        key={`skeleton-${rowIndex}:${column.id}`}\n      >\n        <span class=\"ds-table__cell-content ds-interaction-fill__content\">\n          {this.renderSkeletonCellContent(skeleton)}\n        </span>\n        {this.renderStickyEdge(column.sticky)}\n      </td>\n    );\n  }\n\n  private renderSkeletonCellContent(skeleton: TableCellSkeleton) {\n    if (skeleton.kind === 'blank') return null;\n\n    if (skeleton.kind === 'image') {\n      return (\n        <span class=\"ds-table__cell-image ds-table__skeleton-image\">\n          <ds-skeleton\n            class=\"ds-table__skeleton-image-shape\"\n            variant=\"control\"\n            controlSize=\"md\"\n            width=\"100%\"\n          />\n        </span>\n      );\n    }\n\n    if (skeleton.kind === 'icon') {\n      return <ds-skeleton variant=\"icon\" iconSize=\"md\" rounded={skeleton.rounded ?? false} />;\n    }\n\n    if (skeleton.kind === 'tag') {\n      return (\n        <ds-skeleton\n          variant=\"control\"\n          controlSize=\"sm\"\n          width={skeleton.width ?? '64%'}\n        />\n      );\n    }\n\n    if (skeleton.kind === 'action') {\n      const iconOnly = (skeleton.variant ?? 'icon') === 'icon';\n      return (\n        <ds-skeleton\n          variant=\"control\"\n          controlSize=\"sm\"\n          width={skeleton.width ?? (iconOnly ? '24px' : '72%')}\n        />\n      );\n    }\n\n    const lines = skeleton.lines ?? 1;\n    const copy = (\n      <span class=\"ds-table__cell-copy\">\n        <span class=\"ds-table__cell-primary ds-table__cell-track ds-table__cell-track--text\">\n          <ds-skeleton\n            variant=\"text\"\n            textVariant=\"text-body-medium\"\n            width={skeleton.primaryWidth ?? '100%'}\n          />\n        </span>\n        {lines >= 2 && (\n          <span class=\"ds-table__cell-secondary ds-table__cell-track ds-table__cell-track--text\">\n            <ds-skeleton\n              variant=\"text\"\n              textVariant=\"text-body-small\"\n              width={skeleton.secondaryWidth ?? '72%'}\n            />\n          </span>\n        )}\n        {lines === 3 && (\n          <span class=\"ds-table__cell-tertiary ds-table__cell-track ds-table__cell-track--text\">\n            <ds-skeleton\n              variant=\"text\"\n              textVariant=\"text-body-small\"\n              width={skeleton.tertiaryWidth ?? '56%'}\n            />\n          </span>\n        )}\n      </span>\n    );\n    if (skeleton.kind === 'icon-text') {\n      return (\n        <span class=\"ds-table__cell-icon-text\">\n          <span class=\"ds-table__cell-icon-text-icon\">\n            <ds-skeleton variant=\"icon\" iconSize=\"md\" />\n          </span>\n          {copy}\n        </span>\n      );\n    }\n    return copy;\n  }\n\n  private renderStateBody(kind: 'empty' | 'error', totalColumns: number) {\n    const error = kind === 'error';\n    return (\n      <tbody class=\"ds-table__body ds-table__state-body\">\n        <tr class=\"ds-table__state-row\">\n          <td class=\"ds-table__state-cell\" colSpan={totalColumns}>\n            <div class=\"ds-table__viewport-band ds-table__state-band\">\n              <ds-empty-state\n                icon={error ? 'ErrorTriangle' : 'Inbox'}\n                heading={error ? this.errorHeading : this.emptyHeading}\n                body={error ? this.errorBody : this.emptyBody}\n              />\n            </div>\n          </td>\n        </tr>\n      </tbody>\n    );\n  }\n\n  private renderLazyBody(model: TableRenderModel) {\n    if (\n      this.dataMode !== 'infinite' ||\n      !this.incrementalWindowActive ||\n      !model.hasData ||\n      model.grouped\n    ) return null;\n    const error = this.loadMoreError?.trim();\n    const manualFallback = this.loadMoreMode === 'manual' ||\n      !this.loadController.intersectionSupported;\n\n    return (\n      <tbody class=\"ds-table__body ds-table__load-body\">\n        <tr\n          class=\"ds-table__load-row\"\n          ref={element => {\n            this.sentinelEl = element ?? null;\n          }}\n        >\n          <td class=\"ds-table__load-cell\" colSpan={model.totalColumns}>\n            <div class=\"ds-table__viewport-band ds-table__load-band\">\n              {error ? (\n                <span class=\"ds-table__load-content ds-table__load-content--error\">\n                  <span class=\"ds-table__load-copy\">\n                    <ds-icon name=\"ErrorTriangle\" size=\"md\" color=\"secondary\" aria-hidden=\"true\" />\n                    <ds-text as=\"span\" variant=\"text-body-medium\" color=\"secondary\">{error}</ds-text>\n                  </span>\n                  <ds-button-unfilled\n                    label={this.retryLabel}\n                    size=\"md\"\n                    onDsClick={() => this.loadController.request('retry')}\n                  />\n                </span>\n              ) : this.loadingMore ? (\n                <span class=\"ds-table__load-content\">\n                  <ds-loader size=\"md\" color=\"secondary\" />\n                  <ds-text as=\"span\" variant=\"text-body-medium\" color=\"secondary\">\n                    {this.loadingMoreLabel}\n                  </ds-text>\n                </span>\n              ) : this.hasMore && manualFallback ? (\n                <span class=\"ds-table__load-content\">\n                  <ds-button-unfilled\n                    label={this.loadMoreLabel}\n                    size=\"md\"\n                    onDsClick={() => this.loadController.request('manual')}\n                  />\n                </span>\n              ) : this.hasMore ? (\n                <span class=\"ds-table__auto-sentinel\" aria-hidden=\"true\" />\n              ) : (\n                <ds-text\n                  class=\"ds-table__load-content\"\n                  as=\"span\"\n                  variant=\"text-body-medium\"\n                  color=\"secondary\"\n                >\n                  {this.endOfResultsLabel}\n                </ds-text>\n              )}\n            </div>\n          </td>\n        </tr>\n      </tbody>\n    );\n  }\n\n  private renderDocumentStickyHeader(model: TableRenderModel) {\n    if (!this.documentStickyHeader) return null;\n    return (\n      <div\n        class=\"ds-table__document-sticky-header\"\n      >\n        <table\n          class={{\n            'ds-table__table': true,\n            'ds-table__sticky-header-table': true,\n            'ds-table__table--selectable': model.selectable,\n            'ds-table__table--grouped': model.grouped,\n          }}\n          style={model.tableStyle}\n          role=\"presentation\"\n          ref={element => {\n            this.stickyHeaderTableEl = element ?? null;\n          }}\n        >\n          {this.renderColgroup(model)}\n          {this.renderHeader(model, true, true)}\n        </table>\n        {this.renderFloatingCollapseAll(model)}\n      </div>\n    );\n  }\n\n  private get resultSummary(): string | null {\n    if (this.dataMode === 'pagination') return null;\n    return formatTableResultSummary(\n      this.displayedCount,\n      this.totalCount,\n      this.resultSummaryLabel,\n    );\n  }\n\n  private get hasResultFooter(): boolean {\n    return (this.dataMode === 'pagination' && !!this.pagination) ||\n      !!this.resultSummary || !!this.el.querySelector(\n      '[slot=\"footer-leading\"], [slot=\"footer\"], [slot=\"footer-trailing\"]',\n    );\n  }\n\n  private renderResultFooter() {\n    const summary = this.resultSummary;\n    const hasLeading = !!this.el.querySelector('[slot=\"footer-leading\"]');\n    const hasCopy = !!this.el.querySelector('[slot=\"footer\"]');\n    const hasTrailing = !!this.el.querySelector('[slot=\"footer-trailing\"]');\n    const pagination = this.dataMode === 'pagination' ? this.pagination : null;\n    if (!this.hasResultFooter) return null;\n    return (\n      <div class=\"ds-table__footer ds-table__bar ds-chrome-header ds-control--md\">\n        <div class=\"ds-table__bar-copy ds-chrome-header__copy ds-control--md\">\n          {hasLeading && (\n            <div class=\"ds-table__bar-status ds-chrome-header__heading\">\n              <slot name=\"footer-leading\" />\n            </div>\n          )}\n          {hasCopy ? (\n            <slot name=\"footer\" />\n          ) : summary ? (\n            <ds-text\n              class=\"ds-table__footer-summary ds-table__bar-text\"\n              as=\"span\"\n              variant=\"text-body-medium\"\n              color=\"secondary\"\n              lineTruncation={1}\n            >\n              {summary}\n            </ds-text>\n          ) : null}\n        </div>\n        {(pagination || hasTrailing) && (\n          <div class=\"ds-table__bar-trailing ds-chrome-header__trailing\">\n            {pagination && (\n              <ds-pagination\n                pageIndex={pagination.pageIndex}\n                pageSize={pagination.pageSize}\n                pageSizeMode={pagination.pageSizeMode ?? 'fixed'}\n                totalItems={pagination.totalItems}\n                pageSizeOptions={pagination.pageSizeOptions ?? [25, 50, 100, 200]}\n                fitToPage={pagination.fitToPage ?? false}\n                fitPageSize={this.fitPageSize ?? pagination.fitPageSize}\n                fitPageSizeLabel={pagination.fitPageSizeLabel ?? 'Fit to page'}\n                fitPageSizeTriggerLabel={pagination.fitPageSizeTriggerLabel ?? 'Fit'}\n                itemLabel={pagination.itemLabel ?? 'items'}\n                pageSizeLabel={pagination.pageSizeLabel ?? 'Items'}\n                label={pagination.ariaLabel ?? `${this.caption} pagination`}\n                loading={this.loading}\n                onDsChange={(event: CustomEvent<PaginationChangeDetail>) =>\n                  this.dsPaginationChange.emit(event.detail)}\n              />\n            )}\n            <slot name=\"footer-trailing\" />\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  private renderCaptionBar() {\n    if (this.captionVisibility !== 'visible') return null;\n    return (\n      <div class=\"ds-table__caption-bar ds-table__bar ds-control--md\">\n        <div class={{\n          'ds-table__caption-content': true,\n          'ds-table__caption-content--trailing': this.showsCaptionTrailing,\n        }}>\n          <div class=\"ds-table__caption-leading\">\n            <slot\n              name=\"header\"\n              onSlotchange={this.syncHeaderSlotPresence}\n            />\n            {!this.headerPresent ? (\n              <ds-text\n                class=\"ds-table__caption-title ds-table__bar-text\"\n                as=\"div\"\n                variant=\"text-title-small\"\n                emphasis={true}\n                color=\"primary\"\n                aria-hidden=\"true\"\n              >\n                {this.caption}\n              </ds-text>\n            ) : null}\n          </div>\n          {this.renderCaptionTrailing()}\n        </div>\n      </div>\n    );\n  }\n\n  private renderCaptionTrailing() {\n    if (!this.showsCaptionTrailing) return null;\n    return (\n      <div class=\"ds-table__caption-trailing\">\n        {this.renderColumnCustomizerTrigger()}\n        {this.showsColumnCustomizer && this.showsDataModeSwitcher ? (\n          <ds-divider\n            orientation=\"vertical\"\n            length=\"32px\"\n          />\n        ) : null}\n        {this.renderDataModeSwitcherTrigger()}\n      </div>\n    );\n  }\n\n  private renderDataModeSwitcherTrigger() {\n    if (!this.showsDataModeSwitcher) return null;\n    return (\n      <ds-button-unfilled\n        id={`${this.dataModeSwitcherElementId}-trigger`}\n        variant=\"icon\"\n        size=\"md\"\n        icon=\"Table\"\n        aria-label={this.dataModeSwitcherLabel}\n        hasMenu={true}\n        expanded={this.dataModeSwitcherOpen}\n        controls={this.dataModeSwitcherElementId}\n        activeFill={false}\n        onDsClick={(event: CustomEvent<MouseEvent>) => {\n          this.toggleDataModeSwitcher(event.detail.detail === 0);\n        }}\n      />\n    );\n  }\n\n  private renderDataModeSwitcherMenu() {\n    if (!this.showsDataModeSwitcher) return null;\n    return (\n      <ds-menu\n        id={this.dataModeSwitcherElementId}\n        open={this.dataModeSwitcherOpen}\n        anchorId={`${this.dataModeSwitcherElementId}-trigger`}\n        align=\"end\"\n        side=\"bottom\"\n        menuLabel={this.dataModeMenuLabel}\n        initialFocusVisible={this.dataModeSwitcherInitialFocusVisible}\n        items={tableDataModeMenuItems(this.dataMode, {\n          infinite: this.infiniteModeLabel,\n          pagination: this.paginationModeLabel,\n        })}\n        onDsClose={() => this.closeDataModeSwitcher()}\n        onDsSelect={event => this.handleDataModeSwitcherSelect(event.detail)}\n      />\n    );\n  }\n\n  private toggleDataModeSwitcher(fromKeyboard = false): void {\n    if (this.dataModeSwitcherOpen) this.closeDataModeSwitcher();\n    else this.openDataModeSwitcher(fromKeyboard);\n  }\n\n  private openDataModeSwitcher(fromKeyboard = false): void {\n    if (!this.showsDataModeSwitcher || this.dataModeSwitcherOpen) return;\n    this.closeColumnCustomizer();\n    this.dataModeSwitcherInitialFocusVisible = fromKeyboard;\n    this.dataModeSwitcherOpen = true;\n  }\n\n  private closeDataModeSwitcher(): void {\n    this.dataModeSwitcherOpen = false;\n  }\n\n  private handleDataModeSwitcherSelect(item: MenuItemData): void {\n    const dataMode = tableDataModeFromMenuItem(item);\n    if (!dataMode) return;\n    this.closeDataModeSwitcher();\n    if (dataMode !== this.dataMode) this.dsDataModeChange.emit({ dataMode });\n    requestAnimationFrame(() => {\n      this.el\n        .querySelector<HTMLElement & { setFocus?: () => void }>(\n          `#${CSS.escape(`${this.dataModeSwitcherElementId}-trigger`)}`,\n        )\n        ?.setFocus?.();\n    });\n  }\n\n  private renderColumnCustomizerTrigger() {\n    if (!this.showsColumnCustomizer) return null;\n    return (\n      <ds-button-unfilled\n        id={`${this.columnCustomizerElementId}-trigger`}\n        variant=\"icon\"\n        size=\"md\"\n        icon=\"Preferences\"\n        aria-label=\"Customize table\"\n        hasMenu={true}\n        expanded={this.columnCustomizerOpen}\n        controls={this.columnCustomizerElementId}\n        activeFill={false}\n        onDsClick={(event: CustomEvent<MouseEvent>) => {\n          this.toggleColumnCustomizer(event.detail.detail === 0);\n        }}\n      />\n    );\n  }\n\n  private renderColumnCustomizerMenu() {\n    if (!this.showsColumnCustomizer) return null;\n    return (\n      <ds-menu\n        id={this.columnCustomizerElementId}\n        open={this.columnCustomizerOpen}\n        anchorId={`${this.columnCustomizerElementId}-trigger`}\n        align=\"end\"\n        side=\"bottom\"\n        menuLabel=\"Customize table\"\n        initialFocusVisible={this.columnCustomizerInitialFocusVisible}\n        items={tableColumnCustomizerMenuItems(\n          this.columns,\n          this.hiddenColumnIds,\n          this.columnOrder,\n        )}\n        onDsClose={() => this.closeColumnCustomizer()}\n        onDsSelect={event => this.handleColumnCustomizerSelect(event.detail)}\n        onDsReorder={event => this.handleColumnCustomizerReorder(event.detail)}\n      />\n    );\n  }\n\n  private toggleColumnCustomizer(fromKeyboard = false): void {\n    if (this.columnCustomizerOpen) this.closeColumnCustomizer();\n    else this.openColumnCustomizer(fromKeyboard);\n  }\n\n  private openColumnCustomizer(fromKeyboard = false): void {\n    if (!this.showsColumnCustomizer || this.columnCustomizerOpen) return;\n    this.closeDataModeSwitcher();\n    this.columnCustomizerInitialFocusVisible = fromKeyboard;\n    this.columnCustomizerOpen = true;\n  }\n\n  private closeColumnCustomizer(): void {\n    this.columnCustomizerOpen = false;\n  }\n\n  private emitColumnsConfigChange(hiddenColumnIds: string[], columnOrder: string[]): void {\n    this.dsColumnsConfigChange.emit({\n      hiddenColumnIds: resolveTableHiddenColumnIds(this.columns, hiddenColumnIds),\n      columnOrder: resolveTableColumnOrder(this.columns, columnOrder),\n    });\n  }\n\n  private handleColumnCustomizerReorder(detail: MenuReorderDetail): void {\n    const order = detail.items\n      .filter(item => item.reorderable)\n      .map(item => item.value)\n      .filter((id): id is string => !!id);\n    this.emitColumnsConfigChange(this.hiddenColumnIds, order);\n  }\n\n  private handleColumnCustomizerSelect(item: MenuItemData): void {\n    const columnId = item.value;\n    if (!columnId || item.isInactive) return;\n    this.emitColumnsConfigChange(\n      toggleTableColumnHidden(this.columns, this.hiddenColumnIds, columnId),\n      resolveTableColumnOrder(this.columns, this.columnOrder),\n    );\n  }\n\n  render() {\n    this.groupSentinelEls.clear();\n    const model = this.createRenderModel();\n    this.renderedModel = model;\n    const regionLabel = this.scrollLabel?.trim() || `${this.caption} scroll area`;\n    const initialLoading = this.loading && !model.hasData;\n    const initialError = !model.hasData && this.error;\n    const hasGroupedStructure = model.grouped && model.groups.length > 0;\n    const groupLoadingMore = hasGroupedStructure && this.groups.some(group => group.loadingMore);\n    const viewportStyle = !this.boundedComposition && this.resolvedMaxHeight\n      ? { '--ds-table-max-block-size': this.resolvedMaxHeight }\n      : undefined;\n    const hostStyle = this.fixedHeight\n      ? { '--_table-fixed-block-size': this.resolvedHeight }\n      : undefined;\n\n    return (\n      <Host\n        class={{\n          'table-host': true,\n          'table-host--bounded': this.boundedComposition,\n          'table-host--fixed-height': this.fixedHeight,\n          'table-host--viewport-fit': this.fitViewport,\n        }}\n        style={hostStyle}\n        onKeyDown={(event: KeyboardEvent) => this.handlePaginationKeyDown(event)}\n      >\n        <div class={{\n          'ds-table': true,\n          'ds-table--bounded': this.boundedComposition,\n          'ds-table--contained-scroll': this.containedScroll,\n          'ds-table--fixed-height': this.fixedHeight,\n          'ds-table--viewport-fit': this.fitViewport,\n          'ds-table--viewport-fit-pending': this.fitViewport && !this.viewportFitSettled,\n          'ds-table--viewport-fit-settled': this.fitViewport && this.viewportFitSettled,\n          'ds-table--sticky-header': this.stickyHeader,\n          'ds-table--document-sticky-header': this.documentStickyHeader,\n          'ds-table--contained-sticky-header': this.stickyHeader && !this.documentStickyHeader,\n          'ds-table--caption-visible': this.captionVisibility === 'visible',\n          'ds-table--footer-visible': this.hasResultFooter,\n          'ds-table--state-fill': !initialLoading && (\n            initialError || !(model.hasData || hasGroupedStructure)\n          ),\n        }} ref={element => {\n          this.rootEl = element ?? null;\n        }}>\n          {this.renderCaptionBar()}\n          <div\n            class={{\n              'ds-table__frame': true,\n              'ds-table__frame--overflow-start': this.overflowStart,\n              'ds-table__frame--overflow-end': this.overflowEnd,\n            }}\n            ref={element => {\n              this.frameEl = element ?? null;\n            }}\n          >\n            {this.renderDocumentStickyHeader(model)}\n            {this.renderStickyGroup(model)}\n            {!this.documentStickyHeader && this.renderFloatingCollapseAll(model)}\n            <div\n              class={{\n                'ds-table__viewport': true,\n                'ds-focus-ring': this.scrollable,\n              }}\n              style={viewportStyle}\n              ref={element => {\n                this.viewportEl = element ?? null;\n              }}\n              role={this.scrollable ? 'region' : undefined}\n              aria-label={this.scrollable ? regionLabel : undefined}\n              tabIndex={this.scrollable ? 0 : undefined}\n            >\n              <table\n                class={{\n                  'ds-table__table': true,\n                  'ds-table__table--selectable': model.selectable,\n                  'ds-table__table--grouped': model.grouped,\n                  'ds-table__table--native-group-sticky': model.grouped &&\n                    this.stickyHeader && !this.documentStickyHeader,\n                }}\n                style={model.tableStyle}\n                aria-busy={initialLoading || this.loadingMore || groupLoadingMore ? 'true' : undefined}\n                ref={element => {\n                  this.tableEl = element ?? null;\n                }}\n              >\n                <caption class=\"ds-table__caption ds-visually-hidden\">\n                  <ds-text as=\"span\" variant=\"text-title-small\" emphasis={true} color=\"primary\">\n                    {this.caption}\n                  </ds-text>\n                </caption>\n                {this.renderColgroup(model)}\n                {this.renderHeader(model, !this.documentStickyHeader)}\n                {initialLoading\n                  ? this.renderSkeletonBody(model)\n                  : initialError\n                    ? this.renderStateBody('error', model.totalColumns)\n                    : model.hasData || hasGroupedStructure\n                      ? this.renderDataBodies(model)\n                      : this.renderStateBody('empty', model.totalColumns)}\n                {!initialLoading && !initialError && this.renderLazyBody(model)}\n              </table>\n            </div>\n          </div>\n          {this.renderResultFooter()}\n          {this.renderOverflowActionMenu()}\n          {this.renderDataModeSwitcherMenu()}\n          {this.renderColumnCustomizerMenu()}\n          {this.renderTruncateTooltip()}\n          <div class=\"ds-visually-hidden\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n            {this.announcement}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     },
     {
@@ -1294,7 +1294,7 @@
     },
     {
       "path": "src/wc/components/Table/table-types.ts",
-      "content": "import type { TagContrast, TagIntent } from '../Tag/Tag';\nimport type { IconColor } from '../Icon/Icon';\nimport type { TextColor } from '../Text/text-types';\nimport type { PaginationState } from '../Pagination/pagination-types';\n\nexport type TableSortDirection = 'asc' | 'desc';\nexport type TableSelectionMode = 'none' | 'multiple';\nexport type TableCellAlign = 'start' | 'center' | 'end';\nexport type TableCellLinkTarget = '_self' | '_blank';\nexport type TableColumnSticky = 'start' | 'end';\nexport type TableCaptionVisibility = 'visible' | 'hidden';\nexport type TableLoadMoreMode = 'auto' | 'manual';\nexport type TableDataMode = 'infinite' | 'pagination';\nexport interface TableDataModeChangeDetail {\n  dataMode: TableDataMode;\n}\nexport type TableLoadMoreReason = 'auto' | 'manual' | 'retry';\nexport type TableColumnWidth = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n/** Visible line budget before a text track ellipsizes. */\nexport type TableCellMaxLines = 1 | 2 | 3;\n/** Resolved clamp, including unlimited wrapping. */\nexport type TableCellLineClamp = TableCellMaxLines | 'none';\n/** Semantic color for a group section header (faint surface + bold title). */\nexport type TableGroupIntent =\n  | 'brand'\n  | 'neutral'\n  | 'negative'\n  | 'warning'\n  | 'caution'\n  | 'positive';\n\n/** Independently sortable label within a compound column header. */\nexport interface TableHeaderSegment {\n  label: string;\n  /** Stable key emitted through TableSortState.columnId. */\n  sortKey: string;\n  /** Visible separator rendered after this label when another segment follows. */\n  separator?: string;\n}\n\n/** Controlled member-row sort state. Group order is controlled separately. */\nexport interface TableSortState {\n  columnId: string;\n  direction: TableSortDirection;\n}\n\n/** One controlled grouping level. Applications supply groups in their final fixed order. */\nexport interface TableGroupingState {\n  columnId: string;\n  direction: TableSortDirection;\n}\n\n/** One independently colored run inside a secondary or tertiary track. */\nexport interface TableCellTextRun {\n  text: string;\n  /** Defaults to the track’s standard color. */\n  color?: TextColor;\n}\n\n/** A secondary or tertiary track: one string, or up to three colorable runs. */\nexport type TableCellTextTrack = string | TableCellTextRun[];\n\n/** Standard two- or three-line cell content owned by the table renderer. */\nexport interface TableCellText {\n  primary: string | number;\n  secondary?: TableCellTextTrack;\n  /** Third subdued track; ignored on dual-primary cells. */\n  tertiary?: TableCellTextTrack;\n  /** Optional semantic foreground for a string secondary track. */\n  secondaryColor?: TextColor;\n  /** Optional semantic foreground for a string tertiary track. */\n  tertiaryColor?: TextColor;\n  /** Application-owned URL for the primary track only. Scalars stay unlinked. */\n  href?: string;\n  /** Native anchor target for a resolved primary link. */\n  target?: TableCellLinkTarget;\n  /** Allow this cell to wrap even when its column truncates by default. */\n  wrap?: boolean;\n  /** Clamp wrapping text after 1, 2, or 3 lines. Overrides column wrap. */\n  maxLines?: TableCellMaxLines;\n  fontFeature?: 'normal' | 'tabular-nums';\n}\n\n/** Two-line text content where both tracks use primary body text. */\nexport interface TableCellPrimaryText {\n  kind: 'primary-text';\n  primary: string | number;\n  secondary: string | number;\n  /** Application-owned URL for the primary track only. */\n  href?: string;\n  /** Native anchor target for a resolved primary link. */\n  target?: TableCellLinkTarget;\n  /** Allow this cell to wrap even when its column truncates by default. */\n  wrap?: boolean;\n  /** Clamp wrapping text after 1, 2, or 3 lines. Overrides column wrap. */\n  maxLines?: TableCellMaxLines;\n  fontFeature?: 'normal' | 'tabular-nums';\n}\n\n/** Applicable data point whose value is currently unavailable. */\nexport interface TableCellEmpty {\n  kind: 'empty';\n}\n\n/** Data point that is intentionally not applicable to this row. */\nexport interface TableCellBlank {\n  kind: 'blank';\n}\n\n/** Declarative icon-only content rendered by the table's standard cell primitive. */\nexport interface TableCellIcon {\n  kind: 'icon';\n  /** Exact canonical IcoMo export name. */\n  icon: string;\n  color?: IconColor;\n  /** Accessible label for informative icons. Omit only when the icon is decorative. */\n  label?: string;\n  /** Application-owned value used when this icon column participates in sorting. */\n  sortValue?: string | number | boolean;\n}\n\n/**\n * Prefix icon beside a text copy stack. Independent of icon-only and plain\n * text cells so those recipes stay unchanged.\n */\nexport interface TableCellIconText {\n  kind: 'icon-text';\n  /** Exact canonical IcoMo export name. */\n  icon: string;\n  iconColor?: IconColor;\n  /** Accessible name. Omit when the glyph is decorative. */\n  iconLabel?: string;\n  primary: string | number;\n  secondary?: TableCellTextTrack;\n  tertiary?: TableCellTextTrack;\n  secondaryColor?: TextColor;\n  tertiaryColor?: TextColor;\n  href?: string;\n  target?: TableCellLinkTarget;\n  wrap?: boolean;\n  maxLines?: TableCellMaxLines;\n  fontFeature?: 'normal' | 'tabular-nums';\n}\n\n/** Body-row track stack an image preview occupies. */\nexport type TableCellImageTracks = 1 | 2 | 3;\n\n/** Declarative 16:9 image preview rendered by the table's standard cell primitive. */\nexport interface TableCellImage {\n  kind: 'image';\n  /** Optional image source. Omit it to render the standard bordered placeholder. */\n  src?: string;\n  /** Accessible description for either the image or its placeholder. */\n  alt: string;\n  /**\n   * Which body-row contract the preview fills. The thumbnail height is that\n   * cell height minus 8px padding; width follows 16:9. Defaults to 1.\n   */\n  tracks?: TableCellImageTracks;\n}\n\ninterface TableCellActionBase {\n  kind: 'action';\n  /** Add the ButtonUnfilled resting border. Action cells are unbordered by default. */\n  hasBorder?: boolean;\n  isInactive?: boolean;\n  isLoading?: boolean;\n}\n\n/** One command inside an overflow action menu. */\nexport interface TableCellActionMenuItem {\n  /** Stable application-owned action identity emitted with dsCellAction. */\n  actionId: string;\n  label: string;\n  isInactive?: boolean;\n  isDestructive?: boolean;\n}\n\n/** Visual separator between overflow action-menu commands. */\nexport interface TableCellActionDivider {\n  kind: 'divider';\n}\n\nexport type TableCellActionMenuEntry = TableCellActionMenuItem | TableCellActionDivider;\n\n/** Declarative ButtonUnfilled content rendered by the table's standard action cell. */\nexport type TableCellAction = TableCellActionBase & (\n  | {\n      variant?: 'label';\n      /** Stable application-owned action identity emitted with dsCellAction. */\n      actionId: string;\n      label: string;\n      icon?: never;\n      ariaLabel?: string;\n      items?: never;\n    }\n  | {\n      variant: 'icon-label';\n      actionId: string;\n      label: string;\n      icon: string;\n      ariaLabel?: string;\n      items?: never;\n    }\n  | {\n      variant: 'icon';\n      actionId: string;\n      label?: never;\n      icon: string;\n      ariaLabel: string;\n      items?: never;\n    }\n  | {\n      variant?: 'icon';\n      /** Overflow commands. The Ellipses trigger opens ds-menu instead of emitting on click. */\n      items: TableCellActionMenuEntry[];\n      ariaLabel: string;\n      icon?: string;\n      actionId?: never;\n      label?: never;\n    }\n);\n\n/** Declarative Tag content rendered by the table's standard cell primitive. */\nexport type TableCellTagVariant = 'tag-only' | 'tag-with-text' | 'text-with-tag';\n\ninterface TableCellTagBase {\n  kind: 'tag';\n  label: string;\n  intent?: TagIntent;\n  contrast?: TagContrast;\n  icon?: string;\n  rounded?: boolean;\n}\n\nexport type TableCellTag = TableCellTagBase & (\n  | {\n      variant?: 'tag-only';\n      text?: never;\n    }\n  | {\n      variant: Exclude<TableCellTagVariant, 'tag-only'>;\n      text: string;\n    }\n);\n\nexport type TableCellValue =\n  | string\n  | number\n  | null\n  | undefined\n  | TableCellText\n  | TableCellPrimaryText\n  | TableCellTag\n  | TableCellIcon\n  | TableCellIconText\n  | TableCellImage\n  | TableCellAction\n  | TableCellEmpty\n  | TableCellBlank;\n\nexport type TableSkeletonWidth = string | number;\n\n/** Representative loading geometry for one table column. */\nexport type TableCellSkeleton =\n  | {\n      kind: 'text';\n      /** One track for scalar content, two for primary and secondary, three when tertiary is present. */\n      lines?: 1 | 2 | 3;\n      primaryWidth?: TableSkeletonWidth;\n      secondaryWidth?: TableSkeletonWidth;\n      tertiaryWidth?: TableSkeletonWidth;\n  }\n  | {\n      kind: 'image';\n      /** Match the loaded image cell's track stack. Defaults to 1. */\n      tracks?: TableCellImageTracks;\n  }\n  | {\n      kind: 'tag';\n      width?: TableSkeletonWidth;\n  }\n  | {\n      kind: 'icon';\n      rounded?: boolean;\n  }\n  | {\n      kind: 'icon-text';\n      lines?: 1 | 2 | 3;\n      primaryWidth?: TableSkeletonWidth;\n      secondaryWidth?: TableSkeletonWidth;\n      tertiaryWidth?: TableSkeletonWidth;\n  }\n  | {\n      kind: 'action';\n      /** Icon actions use a square control canvas; labeled actions may provide a wider width. */\n      variant?: 'icon' | 'label' | 'icon-label';\n      width?: TableSkeletonWidth;\n  }\n  | {\n      kind: 'blank';\n  };\n\nexport interface TableColumn {\n  /** Stable column identity. */\n  id: string;\n  /** Visible column label. May be empty when headerLabel supplies a non-visual name. */\n  header: string;\n  /** Screen-reader-only column name for an intentionally blank visual header. */\n  headerLabel?: string;\n  /** Optional labels for columns that present and sort multiple related data points. */\n  headerSegments?: TableHeaderSegment[];\n  align?: TableCellAlign;\n  sortable?: boolean;\n  /** Preferred TokoMo table-column width. Numbers remain available for exceptional custom pixel widths. */\n  size?: TableColumnWidth | number;\n  /** Derive a fixed image-column width from the matching 1, 2, or 3 track cell geometry. Ignored when size is set. */\n  imageTracks?: TableCellImageTracks;\n  /** Minimum accepted preferred width in CSS pixels. */\n  minSize?: number;\n  /** Maximum accepted preferred width in CSS pixels. */\n  maxSize?: number;\n  /** Wrap cell text instead of truncating it to one line. */\n  wrap?: boolean;\n  /** Clamp wrapping text after 1, 2, or 3 lines. Omit with wrap for unlimited wrap. */\n  maxLines?: TableCellMaxLines;\n  /** Pin one application column to either inline edge during horizontal scrolling. */\n  sticky?: TableColumnSticky;\n  /**\n   * Declare a trailing application-action lane. Action columns keep fixed\n   * geometry and may host grouped table-level controls in their header.\n   */\n  kind?: 'data' | 'action';\n  /** Representative loading geometry for this column. Defaults to one text line. */\n  skeleton?: TableCellSkeleton;\n}\n\nexport interface TableRow {\n  /** Stable identity, unique across all groups. */\n  id: string;\n  cells: Record<string, TableCellValue>;\n  /** Accessible row name used by its selection control. Falls back to the first cell. */\n  selectionLabel?: string;\n  /** Exclude this row from selection without muting its content. */\n  selectable?: boolean;\n  /** Keep the row visible while disabling its selection control and styling it as inactive. */\n  disabled?: boolean;\n  /** Make the complete row a keyboard- and pointer-activatable application target. */\n  interactive?: boolean;\n}\n\nexport interface TableGroup {\n  /** Stable group identity. */\n  id: string;\n  label: string;\n  value?: string | number;\n  /** Total server-side member count; may exceed the currently loaded row count. */\n  totalCount?: number;\n  /** Optional localized total-count phrase such as “166 events” for accessible loaded progress. */\n  countLabel?: string;\n  /**\n   * Optional semantic intent for the group section header. Applies a faint\n   * intent background and bold intent title color.\n   */\n  intent?: TableGroupIntent;\n  /** Whether this group has more member rows available to load. */\n  hasMore?: boolean;\n  /** Controlled incremental loading state for this group's member rows. */\n  loadingMore?: boolean;\n  /** Controlled incremental loading failure for this group's member rows. */\n  loadMoreError?: string;\n  /** Reset key for this group's query, sort, or filter state. Defaults to the group ID. */\n  loadIdentity?: string | number;\n  rows: TableRow[];\n}\n\nexport interface TableSortChangeDetail {\n  sort: TableSortState | null;\n}\n\nexport interface TableSelectionChangeDetail {\n  selectedRowIds: string[];\n  scope: 'row' | 'all-loaded' | 'group';\n  changedRowId?: string;\n  /** Present when scope is `group`. */\n  groupId?: string;\n  selected?: boolean;\n}\n\nexport interface TableLoadMoreDetail {\n  reason: TableLoadMoreReason;\n  loadIdentity: string | number;\n  loadedRowCount: number;\n}\n\nexport interface TableGroupLoadMoreDetail extends TableLoadMoreDetail {\n  groupId: string;\n}\n\nexport interface TableCellActionDetail {\n  actionId: string;\n  rowId: string;\n  columnId: string;\n}\n\nexport interface TableGroupCollapseChangeDetail {\n  scope: 'group' | 'all';\n  /** Present when a single group was toggled. */\n  groupId?: string;\n  collapsed: boolean;\n  collapsedGroupIds: string[];\n}\n\nexport interface TableRowActivateDetail {\n  rowId: string;\n}\n\n/** Controlled show/hide and data-column order for the table-owned customizer. */\nexport interface TableColumnsConfigChangeDetail {\n  hiddenColumnIds: string[];\n  columnOrder: string[];\n}\n\n/** Controlled top-level pagination state. Rows or groups contain only the active page. */\nexport interface TablePaginationState extends PaginationState {\n  /** Change to request one fresh fitted-capacity snapshot for the current query shape. */\n  fitIdentity?: string | number;\n}\n",
+      "content": "import type { TagContrast, TagIntent } from '../Tag/Tag';\nimport type { IconColor } from '../Icon/Icon';\nimport type { TextColor } from '../Text/text-types';\nimport type { PaginationState } from '../Pagination/pagination-types';\n\nexport type TableSortDirection = 'asc' | 'desc';\nexport type TableSelectionMode = 'none' | 'multiple';\nexport type TableCellAlign = 'start' | 'center' | 'end';\nexport type TableCellLinkTarget = '_self' | '_blank';\nexport type TableColumnSticky = 'start' | 'end';\nexport type TableCaptionVisibility = 'visible' | 'hidden';\nexport type TableLoadMoreMode = 'auto' | 'manual';\nexport type TableDataMode = 'infinite' | 'pagination';\nexport interface TableDataModeChangeDetail {\n  dataMode: TableDataMode;\n}\nexport type TableLoadMoreReason = 'auto' | 'manual' | 'retry';\nexport type TableColumnWidth = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n/** Visible line budget before a text track ellipsizes. */\nexport type TableCellMaxLines = 1 | 2 | 3;\n/** Resolved clamp, including unlimited wrapping. */\nexport type TableCellLineClamp = TableCellMaxLines | 'none';\n/** Semantic color for a group section header (faint surface + bold title). */\nexport type TableGroupIntent =\n  | 'brand'\n  | 'neutral'\n  | 'negative'\n  | 'warning'\n  | 'caution'\n  | 'positive';\n\n/** Independently sortable label within a compound column header. */\nexport interface TableHeaderSegment {\n  label: string;\n  /** Stable key emitted through TableSortState.columnId. */\n  sortKey: string;\n  /** Visible separator rendered after this label when another segment follows. */\n  separator?: string;\n}\n\n/** Controlled member-row sort state. Group order is controlled separately. */\nexport interface TableSortState {\n  columnId: string;\n  direction: TableSortDirection;\n}\n\n/** One controlled grouping level. Applications supply groups in their final fixed order. */\nexport interface TableGroupingState {\n  columnId: string;\n  direction: TableSortDirection;\n}\n\n/** One independently colored run inside a secondary or tertiary track. */\nexport interface TableCellTextRun {\n  text: string;\n  /** Defaults to the track’s standard color. */\n  color?: TextColor;\n}\n\n/** A secondary or tertiary track: one string, or up to three colorable runs. */\nexport type TableCellTextTrack = string | TableCellTextRun[];\n\n/** Standard two- or three-line cell content owned by the table renderer. */\nexport interface TableCellText {\n  primary: string | number;\n  secondary?: TableCellTextTrack;\n  /** Third subdued track; ignored on dual-primary cells. */\n  tertiary?: TableCellTextTrack;\n  /** Optional semantic foreground for a string secondary track. */\n  secondaryColor?: TextColor;\n  /** Optional semantic foreground for a string tertiary track. */\n  tertiaryColor?: TextColor;\n  /** Application-owned URL for the primary track only. Scalars stay unlinked. */\n  href?: string;\n  /** Native anchor target for a resolved primary link. */\n  target?: TableCellLinkTarget;\n  /** Allow this cell to wrap even when its column truncates by default. */\n  wrap?: boolean;\n  /** Clamp wrapping text after 1, 2, or 3 lines. Overrides column wrap. */\n  maxLines?: TableCellMaxLines;\n  fontFeature?: 'normal' | 'tabular-nums';\n}\n\n/** Two-line text content where both tracks use primary body text. */\nexport interface TableCellPrimaryText {\n  kind: 'primary-text';\n  primary: string | number;\n  secondary: string | number;\n  /** Application-owned URL for the primary track only. */\n  href?: string;\n  /** Native anchor target for a resolved primary link. */\n  target?: TableCellLinkTarget;\n  /** Allow this cell to wrap even when its column truncates by default. */\n  wrap?: boolean;\n  /** Clamp wrapping text after 1, 2, or 3 lines. Overrides column wrap. */\n  maxLines?: TableCellMaxLines;\n  fontFeature?: 'normal' | 'tabular-nums';\n}\n\n/** Applicable data point whose value is currently unavailable. */\nexport interface TableCellEmpty {\n  kind: 'empty';\n}\n\n/** Data point that is intentionally not applicable to this row. */\nexport interface TableCellBlank {\n  kind: 'blank';\n}\n\n/** Declarative icon-only content rendered by the table's standard cell primitive. */\nexport interface TableCellIcon {\n  kind: 'icon';\n  /** Exact canonical IcoMo export name. */\n  icon: string;\n  color?: IconColor;\n  /** Accessible label for informative icons. Omit only when the icon is decorative. */\n  label?: string;\n  /** Application-owned value used when this icon column participates in sorting. */\n  sortValue?: string | number | boolean;\n}\n\n/**\n * Prefix icon beside a text copy stack. Independent of icon-only and plain\n * text cells so those recipes stay unchanged.\n */\nexport interface TableCellIconText {\n  kind: 'icon-text';\n  /** Exact canonical IcoMo export name. */\n  icon: string;\n  iconColor?: IconColor;\n  /** Accessible name. Omit when the glyph is decorative. */\n  iconLabel?: string;\n  primary: string | number;\n  secondary?: TableCellTextTrack;\n  tertiary?: TableCellTextTrack;\n  secondaryColor?: TextColor;\n  tertiaryColor?: TextColor;\n  href?: string;\n  target?: TableCellLinkTarget;\n  wrap?: boolean;\n  maxLines?: TableCellMaxLines;\n  fontFeature?: 'normal' | 'tabular-nums';\n}\n\n/** Body-row track stack an image preview occupies. */\nexport type TableCellImageTracks = 1 | 2 | 3;\n\n/** Declarative 16:9 image preview rendered by the table's standard cell primitive. */\nexport interface TableCellImage {\n  kind: 'image';\n  /** Optional image source. Omit it to render the standard bordered placeholder. */\n  src?: string;\n  /** Accessible description for either the image or its placeholder. */\n  alt: string;\n  /**\n   * Which body-row contract the preview fills. The thumbnail height is that\n   * cell height minus 8px padding; width follows 16:9. Defaults to 1.\n   */\n  tracks?: TableCellImageTracks;\n}\n\ninterface TableCellActionBase {\n  kind: 'action';\n  /** Add the ButtonUnfilled resting border. Action cells are unbordered by default. */\n  hasBorder?: boolean;\n  isInactive?: boolean;\n  isLoading?: boolean;\n}\n\n/** One command inside an overflow action menu. */\nexport interface TableCellActionMenuItem {\n  /** Stable application-owned action identity emitted with dsCellAction. */\n  actionId: string;\n  label: string;\n  isInactive?: boolean;\n  isDestructive?: boolean;\n}\n\n/** Visual separator between overflow action-menu commands. */\nexport interface TableCellActionDivider {\n  kind: 'divider';\n}\n\nexport type TableCellActionMenuEntry = TableCellActionMenuItem | TableCellActionDivider;\n\n/** Declarative ButtonUnfilled content rendered by the table's standard action cell. */\nexport type TableCellAction = TableCellActionBase & (\n  | {\n      variant?: 'label';\n      /** Stable application-owned action identity emitted with dsCellAction. */\n      actionId: string;\n      label: string;\n      icon?: never;\n      ariaLabel?: string;\n      items?: never;\n    }\n  | {\n      variant: 'icon-label';\n      actionId: string;\n      label: string;\n      icon: string;\n      ariaLabel?: string;\n      items?: never;\n    }\n  | {\n      variant: 'icon';\n      actionId: string;\n      label?: never;\n      icon: string;\n      ariaLabel: string;\n      items?: never;\n    }\n  | {\n      variant?: 'icon';\n      /** Overflow commands. The Ellipses trigger opens ds-menu instead of emitting on click. */\n      items: TableCellActionMenuEntry[];\n      ariaLabel: string;\n      icon?: string;\n      actionId?: never;\n      label?: never;\n    }\n);\n\n/** Declarative Tag content rendered by the table's standard cell primitive. */\nexport type TableCellTagVariant = 'tag-only' | 'tag-with-text' | 'text-with-tag';\n\ninterface TableCellTagBase {\n  kind: 'tag';\n  label: string;\n  intent?: TagIntent;\n  contrast?: TagContrast;\n  icon?: string;\n  rounded?: boolean;\n}\n\nexport type TableCellTag = TableCellTagBase & (\n  | {\n      variant?: 'tag-only';\n      text?: never;\n    }\n  | {\n      variant: Exclude<TableCellTagVariant, 'tag-only'>;\n      text: string;\n    }\n);\n\nexport type TableCellValue =\n  | string\n  | number\n  | null\n  | undefined\n  | TableCellText\n  | TableCellPrimaryText\n  | TableCellTag\n  | TableCellIcon\n  | TableCellIconText\n  | TableCellImage\n  | TableCellAction\n  | TableCellEmpty\n  | TableCellBlank;\n\nexport type TableSkeletonWidth = string | number;\n\n/** Representative loading geometry for one table column. */\nexport type TableCellSkeleton =\n  | {\n      kind: 'text';\n      /** One track for scalar content, two for primary and secondary, three when tertiary is present. */\n      lines?: 1 | 2 | 3;\n      primaryWidth?: TableSkeletonWidth;\n      secondaryWidth?: TableSkeletonWidth;\n      tertiaryWidth?: TableSkeletonWidth;\n  }\n  | {\n      kind: 'image';\n      /** Match the loaded image cell's track stack. Defaults to 1. */\n      tracks?: TableCellImageTracks;\n  }\n  | {\n      kind: 'tag';\n      width?: TableSkeletonWidth;\n  }\n  | {\n      kind: 'icon';\n      rounded?: boolean;\n  }\n  | {\n      kind: 'icon-text';\n      lines?: 1 | 2 | 3;\n      primaryWidth?: TableSkeletonWidth;\n      secondaryWidth?: TableSkeletonWidth;\n      tertiaryWidth?: TableSkeletonWidth;\n  }\n  | {\n      kind: 'action';\n      /** Icon actions use a square control canvas; labeled actions may provide a wider width. */\n      variant?: 'icon' | 'label' | 'icon-label';\n      width?: TableSkeletonWidth;\n  }\n  | {\n      kind: 'blank';\n  };\n\nexport interface TableColumn {\n  /** Stable column identity. */\n  id: string;\n  /** Visible column label. May be empty when headerLabel supplies a non-visual name. */\n  header: string;\n  /** Screen-reader-only column name for an intentionally blank visual header. */\n  headerLabel?: string;\n  /** Supplementary header help. Does not replace the visible or accessible column name. */\n  help?: string;\n  /** Optional labels for columns that present and sort multiple related data points. */\n  headerSegments?: TableHeaderSegment[];\n  align?: TableCellAlign;\n  sortable?: boolean;\n  /** Preferred TokoMo table-column width. Numbers remain available for exceptional custom pixel widths. */\n  size?: TableColumnWidth | number;\n  /** Derive a fixed image-column width from the matching 1, 2, or 3 track cell geometry. Ignored when size is set. */\n  imageTracks?: TableCellImageTracks;\n  /** Minimum accepted preferred width in CSS pixels. */\n  minSize?: number;\n  /** Maximum accepted preferred width in CSS pixels. */\n  maxSize?: number;\n  /** Wrap cell text instead of truncating it to one line. */\n  wrap?: boolean;\n  /** Clamp wrapping text after 1, 2, or 3 lines. Omit with wrap for unlimited wrap. */\n  maxLines?: TableCellMaxLines;\n  /** Pin one application column to either inline edge during horizontal scrolling. */\n  sticky?: TableColumnSticky;\n  /**\n   * Declare a trailing application-action lane. Action columns keep fixed\n   * geometry and may host grouped table-level controls in their header.\n   */\n  kind?: 'data' | 'action';\n  /** Representative loading geometry for this column. Defaults to one text line. */\n  skeleton?: TableCellSkeleton;\n}\n\nexport interface TableRow {\n  /** Stable identity, unique across all groups. */\n  id: string;\n  cells: Record<string, TableCellValue>;\n  /** Accessible row name used by its selection control. Falls back to the first cell. */\n  selectionLabel?: string;\n  /** Exclude this row from selection without muting its content. */\n  selectable?: boolean;\n  /** Keep the row visible while disabling its selection control and styling it as inactive. */\n  disabled?: boolean;\n  /** Make the complete row a keyboard- and pointer-activatable application target. */\n  interactive?: boolean;\n}\n\nexport interface TableGroup {\n  /** Stable group identity. */\n  id: string;\n  label: string;\n  value?: string | number;\n  /** Total server-side member count; may exceed the currently loaded row count. */\n  totalCount?: number;\n  /** Optional localized total-count phrase such as “166 events” for accessible loaded progress. */\n  countLabel?: string;\n  /**\n   * Optional semantic intent for the group section header. Applies a faint\n   * intent background and bold intent title color.\n   */\n  intent?: TableGroupIntent;\n  /** Whether this group has more member rows available to load. */\n  hasMore?: boolean;\n  /** Controlled incremental loading state for this group's member rows. */\n  loadingMore?: boolean;\n  /** Controlled incremental loading failure for this group's member rows. */\n  loadMoreError?: string;\n  /** Reset key for this group's query, sort, or filter state. Defaults to the group ID. */\n  loadIdentity?: string | number;\n  rows: TableRow[];\n}\n\nexport interface TableSortChangeDetail {\n  sort: TableSortState | null;\n}\n\nexport interface TableSelectionChangeDetail {\n  selectedRowIds: string[];\n  scope: 'row' | 'all-loaded' | 'group';\n  changedRowId?: string;\n  /** Present when scope is `group`. */\n  groupId?: string;\n  selected?: boolean;\n}\n\nexport interface TableLoadMoreDetail {\n  reason: TableLoadMoreReason;\n  loadIdentity: string | number;\n  loadedRowCount: number;\n}\n\nexport interface TableGroupLoadMoreDetail extends TableLoadMoreDetail {\n  groupId: string;\n}\n\nexport interface TableCellActionDetail {\n  actionId: string;\n  rowId: string;\n  columnId: string;\n}\n\nexport interface TableGroupCollapseChangeDetail {\n  scope: 'group' | 'all';\n  /** Present when a single group was toggled. */\n  groupId?: string;\n  collapsed: boolean;\n  collapsedGroupIds: string[];\n}\n\nexport interface TableRowActivateDetail {\n  rowId: string;\n}\n\n/** Controlled show/hide and data-column order for the table-owned customizer. */\nexport interface TableColumnsConfigChangeDetail {\n  hiddenColumnIds: string[];\n  columnOrder: string[];\n}\n\n/** Controlled top-level pagination state. Rows or groups contain only the active page. */\nexport interface TablePaginationState extends PaginationState {\n  /** Change to request one fresh fitted-capacity snapshot for the current query shape. */\n  fitIdentity?: string | number;\n}\n",
       "type": "registry:ui"
     },
     {