@ds-mo/ui 13.16.0 → 13.17.0

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

@@ -34,7 +34,7 @@
         "component:ds-icon"
       ],
       "accessibility": [
-        "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 named header slot replace that fallback. header-leading and header-trailing place actions in the matching compact-bar zones without transferring ownership of the bar's outer or copy padding to the application. Their slot outlets remain mounted so dynamically shown selection and filtering summaries cannot briefly enter the table's outer flow or move its frame.",
+        "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 receive the complete content width inside the component-owned 8px inset, so the application can compose its own control groups and alignment without table-defined leading or trailing zones.",
         "Sorting controls remain buttons inside column headers. Member-row sort uses aria-sort, while independent group order is described by the grouped header control.",
         "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 or action controls.",
@@ -43,8 +43,8 @@
         "An optional result summary footer appears below the table frame when both displayedCount and totalCount are finite, formatting Displaying {displayed} of {total} in text-body-medium secondary. The footer slot can replace that copy, while footer-leading and footer-trailing compose actions into the same compact-bar anatomy. Authored footer content can also opt into the 48px footer without controlled counts."
       ],
       "states": [
-        "Columns, rows, groups, grouping, sorting, selected row IDs, collapsed group IDs, displayedCount, totalCount, and lazy-loading state are controlled inputs. Events communicate intent and never mutate those inputs. The optional header and footer slots are composable table-local bars: the component owns their 48px chrome, 8px outer inset, md copy-container padding, balanced text inset, action zones, and sticky placement while the application owns its controls, labels, filtering behavior, and action handling. Content-sized tables remain natural for sparse or fixed-count results. height bounds the complete header, frame, and footer composition. fitViewport reserves the compact-state composition height in the nearest vertical scrollport while growing the visible table into that reservation as surrounding page chrome collapses.",
-        "Grouping supports one level. The application supplies ordered groups and ordered member rows; group order and member-row sort are independent controls. Group section headers show an emphasized text-body-medium label followed by a rounded sm Tag containing only the numeric count. The Tag uses the group's faint intent surface (neutral when intent is absent) and a small-elevation, button-hugging wrapper; a localized countLabel remains available to assistive technology. Groups may declare an optional intent (brand, neutral, negative, warning, caution, positive) that paints an LTR gradient from the faint intent surface at the label edge into faint neutral at the trailing edge, plus a bold intent title color. Neutral groups remain solid faint neutral. Section separators are painted inside that viewport-width surface so translucent border tokens composite with each intent background; the final collapsed section does not duplicate the terminal table edge. A trailing visually neutral icon-only ButtonUnfilled uses the 24px md double-inset action recipe and toggles controlled collapsedGroupIds, showing ChevronUp while expanded and ChevronDown while collapsed. While any group remains expanded, a ChevronDownUp action uses the xs sort-control recipe widened to a table-owned 24px lane and collapses every group. It appears at the inline-end edge of the trailing column declared with kind action when one exists; otherwise a button-hugging 24px by 16px medium-elevation surface floats at the visible scrollport's header edge so the action remains reachable while member columns scroll beneath it. With stickyHeader enabled, each section header scrolls with its group, pins directly below the column header when reached, and yields when the next section arrives. It also stays pinned to the visible horizontal scrollport and spans the smaller of the visible viewport or table width.",
+        "Columns, rows, groups, grouping, sorting, selected row IDs, collapsed group IDs, displayedCount, totalCount, and lazy-loading state are controlled inputs. Events communicate intent and never mutate those inputs. The optional header is one full-width composable table-local surface: the component owns its 48px chrome, 8px inset on every side, and sticky placement while the application owns all internal layout, controls, labels, filtering behavior, and action handling. The footer retains its compact-bar copy and action composition. Content-sized tables remain natural for sparse or fixed-count results. height bounds the complete header, frame, and footer composition. fitViewport reserves the compact-state composition height in the nearest vertical scrollport while growing the visible table into that reservation as surrounding page chrome collapses.",
+        "Grouping supports one level. The application supplies ordered groups and ordered member rows; group order and member-row sort are independent controls. Group section headers show an emphasized text-body-medium label followed by a rounded sm Tag containing only the numeric count. The Tag uses the group's faint intent surface (neutral when intent is absent) and a small-elevation, button-hugging wrapper; a localized countLabel remains available to assistive technology. Groups may declare an optional intent (brand, neutral, negative, warning, caution, positive) that paints an LTR gradient from the faint intent surface at the label edge into faint neutral at the trailing edge, plus a bold intent title color. Neutral groups remain solid faint neutral. Section separators are painted inside that viewport-width surface so translucent border tokens composite with each intent background; the final collapsed section does not duplicate the terminal table edge. A trailing visually neutral icon-only ButtonUnfilled uses the 24px md double-inset action recipe and toggles controlled collapsedGroupIds, showing ChevronUp while expanded and ChevronDown while collapsed. While any group remains expanded, a ChevronDownUp action uses the xs sort-control recipe widened to a table-owned 24px lane and collapses every group. It appears at the inline-end edge of the trailing column declared with kind action when one exists; otherwise a button-hugging 24px by 16px medium-elevation surface floats at the visible scrollport's header edge so the action remains reachable while member columns scroll beneath it. With stickyHeader enabled, each contained section uses its one real section row as a native sticky header inside its real row-group boundary. The browser therefore owns pinning, push-off, scrolling, and resize layout in one pass without a duplicated lane, active-section state, transforms, or scroll-time geometry. Shared grid tracks retain exact header and member-cell alignment. The section surface also stays pinned to the visible horizontal scrollport and spans the smaller of the visible viewport or table width.",
         "An active member sort toggles only between ascending and descending; activating a different sortable label moves sorting to that key. Applications may still clear the controlled sort state explicitly. The grouped column toggles ascending and descending group order without clearing member sort.",
         "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 uses row-shaped skeletons that preserve the standard single-line cell padding, row dividers, column dividers, selection lane, and sticky-lane boundaries. 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.",
@@ -57,7 +57,7 @@
       "responsiveBehavior": [
         "The table keeps native semantics at narrow widths and scrolls horizontally instead of transforming into cards.",
         "stickyHeader follows the active vertical scroll owner: a maxHeight, height, or fitViewport table keeps its native header and group sections inside one bounded table scrollport, while a document-flow table retains a semantic native header and renders a sticky control header whose columns follow the body's native inline scroll timeline. Consumers set --ds-table-sticky-header-offset when page chrome occupies an unbounded document scrollport edge. When the 48px table header bar is visible, it sticks at that external offset and the column header stacks immediately below it.",
-        "fitViewport uses viewportInsetBlockStart and viewportInsetBlockEnd to describe compact surrounding chrome and page gutters relative to the nearest vertical scroll owner. Before the table reaches that compact position, its host reserves the eventual height while the visible composition grows and vertical input remains owned by the outer page. Once settled, the internal table viewport becomes the vertical scroll owner. In both bounded and document-flow modes, native row-group headers remain the semantic source while one table-owned visual sticky lane is clamped to the active row group's ending boundary, so each incoming section pushes the previous section away without duplicate overlap.",
+        "fitViewport uses viewportInsetBlockStart and viewportInsetBlockEnd to describe compact surrounding chrome and page gutters relative to the nearest vertical scroll owner. Before the table reaches that compact position, its host reserves the eventual height while the visible composition grows and vertical input remains owned by the outer page. Once settled, the internal table viewport becomes the vertical scroll owner. Bounded grouped tables use browser-native sticky section rows inside real block row-group boundaries, so scroll and resize do not run component JavaScript or trigger reactive section swaps. Document-flow tables retain the synchronized visual lane required by their separate horizontal scrollport.",
         "Without maxHeight the table grows the document and automatic lazy loading observes the browser viewport. Horizontal scrolling chains vertical wheel and trackpad movement to the page instead of trapping it.",
         "Explicit column sizes establish the horizontal overflow width; unsized columns share remaining space.",
         "Prefer the named xs through xl column sizes, which resolve through TokoMo's table-column width tokens; numeric pixel sizes remain an escape hatch for exceptional application-owned widths.",
@@ -912,7 +912,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  nextTableGroupOrder,\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  resolveTableCellPresentation,\n  type TableCellPresentation,\n} from './table-cell-model';\nimport {\n  createTableRenderModel,\n  type TableRenderModel,\n} from './table-render-model';\nimport { TableLayoutController } from './table-layout-controller';\nimport { TableLoadController } from './table-load-controller';\nimport {\n  TableViewportFitController,\n  type TableViewportFitMetrics,\n} from './table-viewport-fit-controller';\nimport type {\n  TableCaptionVisibility,\n  TableCellActionDetail,\n  TableColumn,\n  TableGroup,\n  TableGroupCollapseChangeDetail,\n  TableGroupingChangeDetail,\n  TableGroupingState,\n  TableLoadMoreDetail,\n  TableLoadMoreMode,\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 and group-order direction. */\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   * 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  @Prop() skeletonRows: number = 5;\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  /** Enable application-owned incremental loading without pagination. */\n  @Prop() lazyLoading: boolean = false;\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 results';\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\n  @Event() dsSortChange!: EventEmitter<TableSortChangeDetail>;\n  @Event() dsGroupingChange!: EventEmitter<TableGroupingChangeDetail>;\n  @Event() dsGroupCollapseChange!: EventEmitter<TableGroupCollapseChangeDetail>;\n  @Event() dsSelectionChange!: EventEmitter<TableSelectionChangeDetail>;\n  @Event() dsLoadMore!: EventEmitter<TableLoadMoreDetail>;\n  @Event() dsCellAction!: EventEmitter<TableCellActionDetail>;\n  @Event() dsRowActivate!: EventEmitter<TableRowActivateDetail>;\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 headerLeadingPresent = false;\n  @State() private headerCopyPresent = false;\n  @State() private headerTrailingPresent = 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 previousModelWarning = '';\n  private hasLoaded = false;\n  private renderedModel: TableRenderModel | null = null;\n  private stickyGroupConnected = false;\n  private headerSlotObserver: MutationObserver | null = null;\n  private readonly layoutController = new TableLayoutController({\n    elements: () => ({\n      viewport: this.viewportEl,\n      table: this.tableEl,\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.lazyLoading,\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 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.syncHeaderSlotPresence();\n    this.loadController.initialize();\n    this.warnModelIssues();\n  }\n\n  componentDidLoad(): void {\n    this.hasLoaded = true;\n    this.layoutController.connect();\n    this.loadController.connect();\n    this.viewportFitController.connect();\n    this.connectStickyGroup();\n    this.connectHeaderSlotObserver();\n  }\n\n  componentDidRender(): void {\n    this.layoutController.refresh();\n    this.loadController.refresh();\n    this.viewportFitController.refresh();\n    this.updateStickyGroup();\n  }\n\n  connectedCallback(): void {\n    if (!this.hasLoaded) return;\n    this.layoutController.connect();\n    this.loadController.connect();\n    this.viewportFitController.connect();\n    this.connectStickyGroup();\n    this.connectHeaderSlotObserver();\n  }\n\n  disconnectedCallback(): void {\n    this.layoutController.disconnect();\n    this.loadController.disconnect();\n    this.viewportFitController.disconnect();\n    this.disconnectStickyGroup();\n    this.headerSlotObserver?.disconnect();\n    this.headerSlotObserver = null;\n  }\n\n  private syncHeaderSlotPresence = () => {\n    this.headerLeadingPresent = !!this.el.querySelector('[slot=\"header-leading\"]');\n    this.headerCopyPresent = !!this.el.querySelector('[slot=\"header\"]');\n    this.headerTrailingPresent = !!this.el.querySelector('[slot=\"header-trailing\"]');\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 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.stickyHeader || !this.grouped || !this.frameEl || !this.tableEl) {\n      if (this.activeStickyGroupId !== null) this.activeStickyGroupId = null;\n      return;\n    }\n\n    const stickyHeader = this.documentStickyHeader\n      ? this.frameEl.querySelector<HTMLElement>('.ds-table__document-sticky-header')\n      : this.interactiveHeadEl;\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  handleStructureChange(): void {\n    this.warnModelIssues();\n    this.loadController.structureChanged();\n  }\n\n  @Watch('rows')\n  @Watch('groups')\n  handleDataChange(): void {\n    this.loadController.dataChanged();\n    this.warnModelIssues();\n  }\n\n  @Watch('loadIdentity')\n  handleLoadIdentityChange(): void {\n    this.loadController.identityChanged();\n  }\n\n  @Watch('lazyLoading')\n  @Watch('loadMoreMode')\n  @Watch('loadMoreThreshold')\n  handleLazyConfigurationChange(): void {\n    this.loadController.configurationChanged();\n  }\n\n  @Watch('loadingMore')\n  handleLoadingMoreChange(loading: boolean): void {\n    this.loadController.loadingChanged(loading);\n  }\n\n  @Watch('loadMoreError')\n  handleLoadMoreErrorChange(error: string | undefined): void {\n    this.loadController.errorChanged(error);\n  }\n\n  @Watch('hasMore')\n  handleHasMoreChange(hasMore: boolean, hadMore: boolean): void {\n    this.loadController.hasMoreChanged(hasMore, hadMore);\n  }\n\n  private get grouped(): boolean {\n    return this.grouping !== null;\n  }\n\n  private get selectable(): boolean {\n    return this.selectionMode === 'multiple';\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 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.columns,\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    if (!this.caption?.trim()) issues.unshift('A non-empty caption is required.');\n    if (this.grouping && !this.columns.some(column => column.id === this.grouping!.columnId)) {\n      issues.push(`Grouping references unknown column id: ${this.grouping.columnId}`);\n    }\n    if (\n      this.sort &&\n      !this.columns.some(column =>\n        column.id === this.sort!.columnId ||\n        column.headerSegments?.some(segment => segment.sortKey === this.sort!.columnId),\n      )\n    ) {\n      issues.push(`Sorting references unknown column id: ${this.sort.columnId}`);\n    }\n    const stickyStart = this.columns.filter(column => column.sticky === 'start');\n    const stickyEnd = this.columns.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 (this.grouping?.columnId === column.id && sortKey === column.id) {\n      this.dsGroupingChange.emit({ grouping: nextTableGroupOrder(this.grouping) });\n      return;\n    }\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.grouping?.columnId === column.id && sortKey === column.id) {\n      const next = this.grouping.direction === 'asc' ? 'descending' : 'ascending';\n      return `Sort ${column.header} groups ${next}. Currently grouped ${this.grouping.direction === 'asc' ? 'ascending' : 'descending'}.`;\n    }\n\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\"], ds-button-unfilled',\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 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 = !groupedColumn\n      ? headerSegments.find(segment => segment.sortKey === this.sort?.columnId)\n      : undefined;\n    const activeMemberSort = !!activeMemberSegment;\n    const activeSort = groupedColumn || activeMemberSort;\n    const align = column.align ?? 'start';\n    const direction = groupedColumn\n      ? this.grouping!.direction\n      : activeMemberSort\n        ? this.sort!.direction\n        : 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 = groupedColumn\n            ? headerSegments.length === 1\n            : activeMemberSegment?.sortKey === segment.sortKey;\n          const segmentInteractive = interactive && (\n            !!column.sortable || (groupedColumn && segment.sortKey === column.id)\n          );\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.columns.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.columns.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=\"secondary\"\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 === '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      return (\n        <ds-button-unfilled\n          variant={value.variant ?? 'label'}\n          size=\"md\"\n          isInset={true}\n          insetDepth=\"double\"\n          label={value.label ?? ''}\n          icon={value.icon ?? ''}\n          aria-label={value.ariaLabel ?? null}\n          hasBorder={value.hasBorder ?? false}\n          isInactive={value.isInactive ?? false}\n          isLoading={value.isLoading ?? false}\n          onDsClick={event => {\n            event.stopPropagation();\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=\"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          >\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    const text = cell.value;\n    const wraps = cell.wraps;\n\n    return (\n      <span class={{ 'ds-table__cell-copy': true, 'ds-table__cell-copy--wrap': wraps }}>\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=\"primary\"\n          lineTruncation={wraps ? 'none' : 1}\n          wrap={wraps ? 'wrap' : 'nowrap'}\n          fontFeature={text.fontFeature ?? 'normal'}\n        >\n          {text.primary}\n        </ds-text>\n        {text.secondary !== undefined && text.secondary !== '' && (\n          <ds-text\n            class=\"ds-table__cell-secondary ds-table__cell-track ds-table__cell-track--text\"\n            as=\"span\"\n            variant={cell.primaryText ? 'text-body-medium' : 'text-body-small'}\n            color={text.secondaryColor ?? (cell.primaryText ? 'primary' : 'secondary')}\n            lineTruncation={wraps ? 'none' : 1}\n            wrap={wraps ? 'wrap' : 'nowrap'}\n          >\n            {text.secondary}\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.columns)}`,\n              selected,\n              false,\n              !rowSelectable,\n              () => this.emitRowSelection(row),\n            )}\n            {this.renderStickyEdge('start')}\n          </td>\n        )}\n        {this.columns.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 imageCell = cell.kind === 'image';\n          const actionCell = cell.kind === 'action';\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          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--image': imageCell,\n                'ds-table__cell--action': actionCell,\n                'ds-table__cell--primary-text': primaryTextCell,\n                'ds-table__cell--text-single': singleTextCell,\n                'ds-table__cell--text-multi': textCell && !singleTextCell,\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}\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      countLabel,\n      countIntent,\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 ${group.label} group`\n                : `Select ${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          <span\n            class=\"ds-table__group-count ds-control-elevation ds-control-elevation--sm\"\n            aria-hidden=\"true\"\n          >\n            <ds-tag\n              label={String(count)}\n              intent={countIntent}\n              contrast=\"faint\"\n              size=\"sm\"\n              rounded={true}\n            ></ds-tag>\n          </span>\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 renderStickyGroup(model: TableRenderModel) {\n    if (!this.stickyHeader || !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.stickyHeader && this.activeStickyGroupId === group.id;\n      return (\n        <tbody\n          class=\"ds-table__body ds-table__group\"\n          data-group-id={group.id}\n          data-group-intent={intent}\n          data-collapsed={isCollapsed ? 'true' : undefined}\n          key={group.id}\n        >\n          <tr class=\"ds-table__group-row\">\n            <th\n              class={{\n                'ds-table__group-cell': true,\n                'ds-table__group-cell--sticky-source-hidden': stickySourceHidden,\n                [intentClass ?? '']: !!intentClass,\n              }}\n              aria-hidden={stickySourceHidden ? 'true' : undefined}\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        </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 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                <span class=\"ds-interaction-fill__content\">\n                  <ds-skeleton variant=\"icon\" iconSize=\"md\" />\n                </span>\n                {this.renderStickyEdge('start')}\n              </td>\n            )}\n            {this.columns.map(column => (\n              <td\n                class={{\n                  'ds-table__cell': true,\n                  'ds-table__cell--text-single': true,\n                  'ds-table__skeleton-cell': true,\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                key={`skeleton-${index}:${column.id}`}\n              >\n                <span class=\"ds-table__cell-content ds-interaction-fill__content\">\n                  <ds-skeleton variant=\"text\" textVariant=\"text-body-medium\" width=\"100%\" />\n                </span>\n                {this.renderStickyEdge(column.sticky)}\n              </td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    );\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 (!this.lazyLoading || !model.hasData) 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    return formatTableResultSummary(\n      this.displayedCount,\n      this.totalCount,\n      this.resultSummaryLabel,\n    );\n  }\n\n  private get hasResultFooter(): boolean {\n    return !!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    if (!this.hasResultFooter) return null;\n    return (\n      <div class=\"ds-table__footer ds-table__bar ds-control--md\">\n        {hasLeading && (\n          <div class=\"ds-table__bar-leading\">\n            <slot name=\"footer-leading\" />\n          </div>\n        )}\n        <div class=\"ds-table__bar-copy\">\n          {hasCopy ? (\n            <slot name=\"footer\" />\n          ) : summary ? (\n            <ds-text\n              class=\"ds-table__footer-summary ds-table__bar-text\"\n              as=\"div\"\n              variant=\"text-body-medium\"\n              color=\"secondary\"\n            >\n              {summary}\n            </ds-text>\n          ) : null}\n        </div>\n        {hasTrailing && (\n          <div class=\"ds-table__bar-trailing\">\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=\"ds-table__bar-leading\" hidden={!this.headerLeadingPresent}>\n          <slot\n            name=\"header-leading\"\n            onSlotchange={this.syncHeaderSlotPresence}\n          />\n        </div>\n        <div class=\"ds-table__bar-copy\">\n          <slot\n            name=\"header\"\n            onSlotchange={this.syncHeaderSlotPresence}\n          />\n          {!this.headerCopyPresent ? (\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        <div class=\"ds-table__bar-trailing\" hidden={!this.headerTrailingPresent}>\n          <slot\n            name=\"header-trailing\"\n            onSlotchange={this.syncHeaderSlotPresence}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  render() {\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 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      >\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                }}\n                style={model.tableStyle}\n                aria-busy={initialLoading || this.loadingMore ? '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\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          <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  nextTableGroupOrder,\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  resolveTableCellPresentation,\n  type TableCellPresentation,\n} from './table-cell-model';\nimport {\n  createTableRenderModel,\n  type TableRenderModel,\n} from './table-render-model';\nimport { TableLayoutController } from './table-layout-controller';\nimport { TableLoadController } from './table-load-controller';\nimport {\n  TableViewportFitController,\n  type TableViewportFitMetrics,\n} from './table-viewport-fit-controller';\nimport type {\n  TableCaptionVisibility,\n  TableCellActionDetail,\n  TableColumn,\n  TableGroup,\n  TableGroupCollapseChangeDetail,\n  TableGroupingChangeDetail,\n  TableGroupingState,\n  TableLoadMoreDetail,\n  TableLoadMoreMode,\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 and group-order direction. */\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   * 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  @Prop() skeletonRows: number = 5;\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  /** Enable application-owned incremental loading without pagination. */\n  @Prop() lazyLoading: boolean = false;\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 results';\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\n  @Event() dsSortChange!: EventEmitter<TableSortChangeDetail>;\n  @Event() dsGroupingChange!: EventEmitter<TableGroupingChangeDetail>;\n  @Event() dsGroupCollapseChange!: EventEmitter<TableGroupCollapseChangeDetail>;\n  @Event() dsSelectionChange!: EventEmitter<TableSelectionChangeDetail>;\n  @Event() dsLoadMore!: EventEmitter<TableLoadMoreDetail>;\n  @Event() dsCellAction!: EventEmitter<TableCellActionDetail>;\n  @Event() dsRowActivate!: EventEmitter<TableRowActivateDetail>;\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\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 previousModelWarning = '';\n  private hasLoaded = false;\n  private renderedModel: TableRenderModel | null = null;\n  private stickyGroupConnected = false;\n  private headerSlotObserver: MutationObserver | null = null;\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.lazyLoading,\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 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.syncHeaderSlotPresence();\n    this.loadController.initialize();\n    this.warnModelIssues();\n  }\n\n  componentDidLoad(): void {\n    this.hasLoaded = true;\n    this.layoutController.connect();\n    this.loadController.connect();\n    this.viewportFitController.connect();\n    this.syncStickyGroupConnection();\n    this.connectHeaderSlotObserver();\n  }\n\n  componentDidRender(): void {\n    this.layoutController.refresh();\n    this.loadController.refresh();\n    this.viewportFitController.refresh();\n    this.syncStickyGroupConnection();\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.viewportFitController.connect();\n    this.syncStickyGroupConnection();\n    this.connectHeaderSlotObserver();\n  }\n\n  disconnectedCallback(): void {\n    this.layoutController.disconnect();\n    this.loadController.disconnect();\n    this.viewportFitController.disconnect();\n    this.disconnectStickyGroup();\n    this.headerSlotObserver?.disconnect();\n    this.headerSlotObserver = null;\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  handleStructureChange(): void {\n    this.warnModelIssues();\n    this.loadController.structureChanged();\n  }\n\n  @Watch('rows')\n  @Watch('groups')\n  handleDataChange(): void {\n    this.loadController.dataChanged();\n    this.warnModelIssues();\n  }\n\n  @Watch('loadIdentity')\n  handleLoadIdentityChange(): void {\n    this.loadController.identityChanged();\n  }\n\n  @Watch('lazyLoading')\n  @Watch('loadMoreMode')\n  @Watch('loadMoreThreshold')\n  handleLazyConfigurationChange(): void {\n    this.loadController.configurationChanged();\n  }\n\n  @Watch('loadingMore')\n  handleLoadingMoreChange(loading: boolean): void {\n    this.loadController.loadingChanged(loading);\n  }\n\n  @Watch('loadMoreError')\n  handleLoadMoreErrorChange(error: string | undefined): void {\n    this.loadController.errorChanged(error);\n  }\n\n  @Watch('hasMore')\n  handleHasMoreChange(hasMore: boolean, hadMore: boolean): void {\n    this.loadController.hasMoreChanged(hasMore, hadMore);\n  }\n\n  private get grouped(): boolean {\n    return this.grouping !== null;\n  }\n\n  private get selectable(): boolean {\n    return this.selectionMode === 'multiple';\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 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.columns,\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    if (!this.caption?.trim()) issues.unshift('A non-empty caption is required.');\n    if (this.grouping && !this.columns.some(column => column.id === this.grouping!.columnId)) {\n      issues.push(`Grouping references unknown column id: ${this.grouping.columnId}`);\n    }\n    if (\n      this.sort &&\n      !this.columns.some(column =>\n        column.id === this.sort!.columnId ||\n        column.headerSegments?.some(segment => segment.sortKey === this.sort!.columnId),\n      )\n    ) {\n      issues.push(`Sorting references unknown column id: ${this.sort.columnId}`);\n    }\n    const stickyStart = this.columns.filter(column => column.sticky === 'start');\n    const stickyEnd = this.columns.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 (this.grouping?.columnId === column.id && sortKey === column.id) {\n      this.dsGroupingChange.emit({ grouping: nextTableGroupOrder(this.grouping) });\n      return;\n    }\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.grouping?.columnId === column.id && sortKey === column.id) {\n      const next = this.grouping.direction === 'asc' ? 'descending' : 'ascending';\n      return `Sort ${column.header} groups ${next}. Currently grouped ${this.grouping.direction === 'asc' ? 'ascending' : 'descending'}.`;\n    }\n\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\"], ds-button-unfilled',\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 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 = !groupedColumn\n      ? headerSegments.find(segment => segment.sortKey === this.sort?.columnId)\n      : undefined;\n    const activeMemberSort = !!activeMemberSegment;\n    const activeSort = groupedColumn || activeMemberSort;\n    const align = column.align ?? 'start';\n    const direction = groupedColumn\n      ? this.grouping!.direction\n      : activeMemberSort\n        ? this.sort!.direction\n        : 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 = groupedColumn\n            ? headerSegments.length === 1\n            : activeMemberSegment?.sortKey === segment.sortKey;\n          const segmentInteractive = interactive && (\n            !!column.sortable || (groupedColumn && segment.sortKey === column.id)\n          );\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.columns.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.columns.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=\"secondary\"\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 === '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      return (\n        <ds-button-unfilled\n          variant={value.variant ?? 'label'}\n          size=\"md\"\n          isInset={true}\n          insetDepth=\"double\"\n          label={value.label ?? ''}\n          icon={value.icon ?? ''}\n          aria-label={value.ariaLabel ?? null}\n          hasBorder={value.hasBorder ?? false}\n          isInactive={value.isInactive ?? false}\n          isLoading={value.isLoading ?? false}\n          onDsClick={event => {\n            event.stopPropagation();\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=\"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          >\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    const text = cell.value;\n    const wraps = cell.wraps;\n\n    return (\n      <span class={{ 'ds-table__cell-copy': true, 'ds-table__cell-copy--wrap': wraps }}>\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=\"primary\"\n          lineTruncation={wraps ? 'none' : 1}\n          wrap={wraps ? 'wrap' : 'nowrap'}\n          fontFeature={text.fontFeature ?? 'normal'}\n        >\n          {text.primary}\n        </ds-text>\n        {text.secondary !== undefined && text.secondary !== '' && (\n          <ds-text\n            class=\"ds-table__cell-secondary ds-table__cell-track ds-table__cell-track--text\"\n            as=\"span\"\n            variant={cell.primaryText ? 'text-body-medium' : 'text-body-small'}\n            color={text.secondaryColor ?? (cell.primaryText ? 'primary' : 'secondary')}\n            lineTruncation={wraps ? 'none' : 1}\n            wrap={wraps ? 'wrap' : 'nowrap'}\n          >\n            {text.secondary}\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.columns)}`,\n              selected,\n              false,\n              !rowSelectable,\n              () => this.emitRowSelection(row),\n            )}\n            {this.renderStickyEdge('start')}\n          </td>\n        )}\n        {this.columns.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 imageCell = cell.kind === 'image';\n          const actionCell = cell.kind === 'action';\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          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--image': imageCell,\n                'ds-table__cell--action': actionCell,\n                'ds-table__cell--primary-text': primaryTextCell,\n                'ds-table__cell--text-single': singleTextCell,\n                'ds-table__cell--text-multi': textCell && !singleTextCell,\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}\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      countLabel,\n      countIntent,\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 ${group.label} group`\n                : `Select ${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          <span\n            class=\"ds-table__group-count ds-control-elevation ds-control-elevation--sm\"\n            aria-hidden=\"true\"\n          >\n            <ds-tag\n              label={String(count)}\n              intent={countIntent}\n              contrast=\"faint\"\n              size=\"sm\"\n              rounded={true}\n            ></ds-tag>\n          </span>\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 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          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        </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 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                <span class=\"ds-interaction-fill__content\">\n                  <ds-skeleton variant=\"icon\" iconSize=\"md\" />\n                </span>\n                {this.renderStickyEdge('start')}\n              </td>\n            )}\n            {this.columns.map(column => (\n              <td\n                class={{\n                  'ds-table__cell': true,\n                  'ds-table__cell--text-single': true,\n                  'ds-table__skeleton-cell': true,\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                key={`skeleton-${index}:${column.id}`}\n              >\n                <span class=\"ds-table__cell-content ds-interaction-fill__content\">\n                  <ds-skeleton variant=\"text\" textVariant=\"text-body-medium\" width=\"100%\" />\n                </span>\n                {this.renderStickyEdge(column.sticky)}\n              </td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    );\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 (!this.lazyLoading || !model.hasData) 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    return formatTableResultSummary(\n      this.displayedCount,\n      this.totalCount,\n      this.resultSummaryLabel,\n    );\n  }\n\n  private get hasResultFooter(): boolean {\n    return !!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    if (!this.hasResultFooter) return null;\n    return (\n      <div class=\"ds-table__footer ds-table__bar ds-control--md\">\n        {hasLeading && (\n          <div class=\"ds-table__bar-leading\">\n            <slot name=\"footer-leading\" />\n          </div>\n        )}\n        <div class=\"ds-table__bar-copy\">\n          {hasCopy ? (\n            <slot name=\"footer\" />\n          ) : summary ? (\n            <ds-text\n              class=\"ds-table__footer-summary ds-table__bar-text\"\n              as=\"div\"\n              variant=\"text-body-medium\"\n              color=\"secondary\"\n            >\n              {summary}\n            </ds-text>\n          ) : null}\n        </div>\n        {hasTrailing && (\n          <div class=\"ds-table__bar-trailing\">\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=\"ds-table__caption-content\">\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      </div>\n    );\n  }\n\n  render() {\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 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      >\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 ? '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\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          <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"
     },
     {
@@ -922,7 +922,7 @@
     },
     {
       "path": "src/wc/components/Table/table-layout-controller.ts",
-      "content": "export interface TableLayoutElements {\n  viewport: HTMLElement | null;\n  table: HTMLTableElement | null;\n  stickyHeaderTable: HTMLTableElement | null;\n  collapseAllOverlay: HTMLElement | null;\n  frame: HTMLElement | null;\n  interactiveHead: HTMLTableSectionElement | null;\n}\n\nexport interface TableLayoutMode {\n  documentStickyHeader: boolean;\n  floatingCollapseAll: boolean;\n  clampVerticalOverscroll: boolean;\n}\n\nexport interface TableOverflowState {\n  start: boolean;\n  end: boolean;\n  scrollable: boolean;\n}\n\nexport interface TableLayoutControllerOptions {\n  elements: () => TableLayoutElements;\n  mode: () => TableLayoutMode;\n  overflowChanged: (state: TableOverflowState) => void;\n  verticalEdgeWheel?: (deltaY: number) => boolean;\n}\n\nexport interface TableLayoutMetricInput {\n  viewportInlineSize: number;\n  viewportBlockSize: number;\n  scrollInlineSize: number;\n  scrollBlockSize: number;\n  scrollInlineOffset: number;\n  tableInlineSize: number;\n  collapseHeadBlockStart?: number;\n  collapseFrameBlockStart?: number;\n}\n\nexport interface TableLayoutMetrics {\n  visibleInlineSize: number;\n  overflow: TableOverflowState;\n  inlineOffset: number;\n  maxInlineOffset: number;\n  collapseBlockOffset: number | null;\n}\n\n/** Pure geometry resolution shared by the controller and focused tests. */\nexport function resolveTableLayoutMetrics(input: TableLayoutMetricInput): TableLayoutMetrics {\n  const horizontalOverflow = input.scrollInlineSize - input.viewportInlineSize > 1;\n  return {\n    visibleInlineSize: Math.min(input.viewportInlineSize, input.tableInlineSize),\n    overflow: {\n      start: horizontalOverflow && input.scrollInlineOffset > 1,\n      end: horizontalOverflow &&\n        input.scrollInlineOffset + input.viewportInlineSize < input.scrollInlineSize - 1,\n      scrollable: horizontalOverflow || input.scrollBlockSize - input.viewportBlockSize > 1,\n    },\n    inlineOffset: input.scrollInlineOffset,\n    maxInlineOffset: Math.max(0, input.scrollInlineSize - input.viewportInlineSize),\n    collapseBlockOffset: input.collapseHeadBlockStart == null ||\n      input.collapseFrameBlockStart == null\n      ? null\n      : Math.max(0, input.collapseHeadBlockStart - input.collapseFrameBlockStart),\n  };\n}\n\n/**\n * Owns table viewport observation. It resolves newly rendered geometry\n * immediately so the first paint has the correct viewport-width chrome, then\n * batches observer-driven scroll and resize reads/writes into one animation frame.\n * The component remains responsible only for refs and reactive overflow state.\n */\nexport class TableLayoutController {\n  private connected = false;\n  private connectedViewport: HTMLElement | null = null;\n  private observedTable: HTMLTableElement | null = null;\n  private resizeObserver: ResizeObserver | null = null;\n  private frame: number | null = null;\n  private overflow: TableOverflowState | null = null;\n\n  constructor(private readonly options: TableLayoutControllerOptions) {}\n\n  connect(): void {\n    this.connected = true;\n    this.refresh();\n  }\n\n  disconnect(): void {\n    this.connected = false;\n    if (this.frame !== null) cancelAnimationFrame(this.frame);\n    this.frame = null;\n    this.connectedViewport?.removeEventListener('scroll', this.handleScroll);\n    this.connectedViewport?.removeEventListener('wheel', this.handleWheel);\n    this.connectedViewport = null;\n    this.observedTable = null;\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n  }\n\n  /** Reconcile newly rendered refs, observers, and pending geometry. */\n  refresh(): void {\n    if (!this.connected) return;\n    const { viewport, table } = this.options.elements();\n    const elementsChanged = viewport !== this.connectedViewport || table !== this.observedTable;\n    if (elementsChanged) {\n      this.connectedViewport?.removeEventListener('scroll', this.handleScroll);\n      this.connectedViewport?.removeEventListener('wheel', this.handleWheel);\n      this.resizeObserver?.disconnect();\n      this.connectedViewport = viewport;\n      this.observedTable = table;\n      viewport?.addEventListener('scroll', this.handleScroll, { passive: true });\n      viewport?.addEventListener('wheel', this.handleWheel, { passive: false });\n\n      if (typeof ResizeObserver !== 'undefined' && viewport) {\n        this.resizeObserver ??= new ResizeObserver(this.schedule);\n        this.resizeObserver.observe(viewport);\n        if (table) this.resizeObserver.observe(table);\n      }\n    }\n    // Rendering can change the table's intrinsic width without replacing either\n    // element. Resolve that geometry before componentDidRender returns so WebKit\n    // cannot paint or expose one frame using the full spanning-cell width.\n    this.sync();\n  }\n\n  private schedule = (): void => {\n    if (!this.connected || this.frame !== null) return;\n    this.frame = requestAnimationFrame(() => {\n      this.frame = null;\n      this.sync();\n    });\n  };\n\n  private readonly handleScroll = (): void => {\n    this.clampInlineOffset();\n    if (this.options.mode().clampVerticalOverscroll) this.clampBlockOffset();\n    this.schedule();\n  };\n\n  private readonly handleWheel = (event: WheelEvent): void => {\n    const viewport = this.connectedViewport;\n    if (!viewport) return;\n\n    if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {\n      const max = Math.max(0, viewport.scrollWidth - viewport.clientWidth);\n      const atStart = viewport.scrollLeft <= 0 && event.deltaX < 0;\n      const atEnd = viewport.scrollLeft >= max && event.deltaX > 0;\n      if (atStart || atEnd) event.preventDefault();\n      return;\n    }\n\n    if (!this.options.mode().clampVerticalOverscroll || event.deltaY === 0) return;\n    const max = Math.max(0, viewport.scrollHeight - viewport.clientHeight);\n    const atStart = viewport.scrollTop <= 0 && event.deltaY < 0;\n    const atEnd = viewport.scrollTop >= max && event.deltaY > 0;\n    if (!atStart && !atEnd) return;\n\n    this.options.verticalEdgeWheel?.(event.deltaY);\n    event.preventDefault();\n  };\n\n  private clampInlineOffset(): void {\n    const viewport = this.connectedViewport;\n    if (!viewport) return;\n    const max = Math.max(0, viewport.scrollWidth - viewport.clientWidth);\n    const clamped = Math.min(max, Math.max(0, viewport.scrollLeft));\n    if (viewport.scrollLeft !== clamped) viewport.scrollLeft = clamped;\n  }\n\n  private clampBlockOffset(): void {\n    const viewport = this.connectedViewport;\n    if (!viewport) return;\n    const max = Math.max(0, viewport.scrollHeight - viewport.clientHeight);\n    const clamped = Math.min(max, Math.max(0, viewport.scrollTop));\n    if (viewport.scrollTop !== clamped) viewport.scrollTop = clamped;\n  }\n\n  private sync(): void {\n    const elements = this.options.elements();\n    const viewport = elements.viewport;\n    if (!viewport) return;\n\n    // Read every layout value before writing styles or reactive state.\n    const mode = this.options.mode();\n    const measureCollapse = mode.floatingCollapseAll && !mode.documentStickyHeader &&\n      elements.collapseAllOverlay && elements.frame && elements.interactiveHead;\n    const metrics = resolveTableLayoutMetrics({\n      viewportInlineSize: viewport.clientWidth,\n      viewportBlockSize: viewport.clientHeight,\n      scrollInlineSize: viewport.scrollWidth,\n      scrollBlockSize: viewport.scrollHeight,\n      scrollInlineOffset: viewport.scrollLeft,\n      tableInlineSize: elements.table?.getBoundingClientRect().width ?? viewport.clientWidth,\n      collapseHeadBlockStart: measureCollapse\n        ? elements.interactiveHead!.getBoundingClientRect().top\n        : undefined,\n      collapseFrameBlockStart: measureCollapse\n        ? elements.frame!.getBoundingClientRect().top\n        : undefined,\n    });\n\n    this.setProperty(\n      viewport,\n      '--ds-table-visible-inline-size',\n      `${metrics.visibleInlineSize}px`,\n    );\n    if (elements.stickyHeaderTable) {\n      this.setProperty(\n        elements.stickyHeaderTable,\n        '--ds-table-inline-scroll-offset',\n        `${metrics.inlineOffset}px`,\n      );\n      this.setProperty(\n        elements.stickyHeaderTable,\n        '--ds-table-inline-scroll-max-offset',\n        `${metrics.maxInlineOffset}px`,\n      );\n    }\n    if (metrics.collapseBlockOffset !== null && elements.collapseAllOverlay) {\n      this.setProperty(\n        elements.collapseAllOverlay,\n        '--ds-table-collapse-all-block-offset',\n        `${metrics.collapseBlockOffset}px`,\n      );\n    }\n\n    if (\n      !this.overflow ||\n      this.overflow.start !== metrics.overflow.start ||\n      this.overflow.end !== metrics.overflow.end ||\n      this.overflow.scrollable !== metrics.overflow.scrollable\n    ) {\n      this.overflow = metrics.overflow;\n      this.options.overflowChanged(metrics.overflow);\n    }\n  }\n\n  private setProperty(element: HTMLElement, property: string, value: string): void {\n    if (element.style.getPropertyValue(property) !== value) {\n      element.style.setProperty(property, value);\n    }\n  }\n}\n",
+      "content": "export interface TableLayoutElements {\n  viewport: HTMLElement | null;\n  stickyHeaderTable: HTMLTableElement | null;\n  collapseAllOverlay: HTMLElement | null;\n  frame: HTMLElement | null;\n  interactiveHead: HTMLTableSectionElement | null;\n}\n\nexport interface TableLayoutMode {\n  documentStickyHeader: boolean;\n  floatingCollapseAll: boolean;\n  clampVerticalOverscroll: boolean;\n}\n\nexport interface TableOverflowState {\n  start: boolean;\n  end: boolean;\n  scrollable: boolean;\n}\n\nexport interface TableLayoutControllerOptions {\n  elements: () => TableLayoutElements;\n  mode: () => TableLayoutMode;\n  overflowChanged: (state: TableOverflowState) => void;\n  verticalEdgeWheel?: (deltaY: number) => boolean;\n}\n\nexport interface TableLayoutMetricInput {\n  viewportInlineSize: number;\n  viewportBlockSize: number;\n  scrollInlineSize: number;\n  scrollBlockSize: number;\n  scrollInlineOffset: number;\n  collapseHeadBlockStart?: number;\n  collapseFrameBlockStart?: number;\n}\n\nexport interface TableLayoutMetrics {\n  visibleInlineSize: number;\n  overflow: TableOverflowState;\n  inlineOffset: number;\n  maxInlineOffset: number;\n  collapseBlockOffset: number | null;\n}\n\n/** Pure geometry resolution shared by the controller and focused tests. */\nexport function resolveTableLayoutMetrics(input: TableLayoutMetricInput): TableLayoutMetrics {\n  const horizontalOverflow = input.scrollInlineSize - input.viewportInlineSize > 1;\n  return {\n    visibleInlineSize: input.viewportInlineSize,\n    overflow: {\n      start: horizontalOverflow && input.scrollInlineOffset > 1,\n      end: horizontalOverflow &&\n        input.scrollInlineOffset + input.viewportInlineSize < input.scrollInlineSize - 1,\n      scrollable: horizontalOverflow || input.scrollBlockSize - input.viewportBlockSize > 1,\n    },\n    inlineOffset: input.scrollInlineOffset,\n    maxInlineOffset: Math.max(0, input.scrollInlineSize - input.viewportInlineSize),\n    collapseBlockOffset: input.collapseHeadBlockStart == null ||\n      input.collapseFrameBlockStart == null\n      ? null\n      : Math.max(0, input.collapseHeadBlockStart - input.collapseFrameBlockStart),\n  };\n}\n\n/**\n * Owns table viewport observation. It resolves newly rendered geometry\n * immediately so the first paint has the correct viewport-width chrome, then\n * batches observer-driven scroll and resize reads/writes into one animation frame.\n * The component remains responsible only for refs and reactive overflow state.\n */\nexport class TableLayoutController {\n  private connected = false;\n  private connectedViewport: HTMLElement | null = null;\n  private resizeObserver: ResizeObserver | null = null;\n  private frame: number | null = null;\n  private overflow: TableOverflowState | null = null;\n\n  constructor(private readonly options: TableLayoutControllerOptions) {}\n\n  connect(): void {\n    this.connected = true;\n    this.refresh();\n  }\n\n  disconnect(): void {\n    this.connected = false;\n    if (this.frame !== null) cancelAnimationFrame(this.frame);\n    this.frame = null;\n    this.connectedViewport?.removeEventListener('scroll', this.handleScroll);\n    this.connectedViewport?.removeEventListener('wheel', this.handleWheel);\n    this.connectedViewport = null;\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n  }\n\n  /** Reconcile newly rendered refs, observers, and pending geometry. */\n  refresh(): void {\n    if (!this.connected) return;\n    const { viewport } = this.options.elements();\n    const elementsChanged = viewport !== this.connectedViewport;\n    if (elementsChanged) {\n      this.connectedViewport?.removeEventListener('scroll', this.handleScroll);\n      this.connectedViewport?.removeEventListener('wheel', this.handleWheel);\n      this.resizeObserver?.disconnect();\n      this.connectedViewport = viewport;\n      viewport?.addEventListener('scroll', this.handleScroll, { passive: true });\n      viewport?.addEventListener('wheel', this.handleWheel, { passive: false });\n\n      if (typeof ResizeObserver !== 'undefined' && viewport) {\n        this.resizeObserver ??= new ResizeObserver(this.schedule);\n        this.resizeObserver.observe(viewport);\n      }\n    }\n    // Resolve before componentDidRender returns so WebKit cannot paint or expose\n    // one frame using the full spanning-cell width.\n    this.sync();\n  }\n\n  private schedule = (): void => {\n    if (!this.connected || this.frame !== null) return;\n    this.frame = requestAnimationFrame(() => {\n      this.frame = null;\n      this.sync();\n    });\n  };\n\n  private readonly handleScroll = (): void => {\n    this.clampInlineOffset();\n    if (this.options.mode().clampVerticalOverscroll) this.clampBlockOffset();\n    this.schedule();\n  };\n\n  private readonly handleWheel = (event: WheelEvent): void => {\n    const viewport = this.connectedViewport;\n    if (!viewport) return;\n\n    if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {\n      const max = Math.max(0, viewport.scrollWidth - viewport.clientWidth);\n      const atStart = viewport.scrollLeft <= 0 && event.deltaX < 0;\n      const atEnd = viewport.scrollLeft >= max && event.deltaX > 0;\n      if (atStart || atEnd) event.preventDefault();\n      return;\n    }\n\n    if (!this.options.mode().clampVerticalOverscroll || event.deltaY === 0) return;\n    const max = Math.max(0, viewport.scrollHeight - viewport.clientHeight);\n    const atStart = viewport.scrollTop <= 0 && event.deltaY < 0;\n    const atEnd = viewport.scrollTop >= max && event.deltaY > 0;\n    if (!atStart && !atEnd) return;\n\n    this.options.verticalEdgeWheel?.(event.deltaY);\n    event.preventDefault();\n  };\n\n  private clampInlineOffset(): void {\n    const viewport = this.connectedViewport;\n    if (!viewport) return;\n    const max = Math.max(0, viewport.scrollWidth - viewport.clientWidth);\n    const clamped = Math.min(max, Math.max(0, viewport.scrollLeft));\n    if (viewport.scrollLeft !== clamped) viewport.scrollLeft = clamped;\n  }\n\n  private clampBlockOffset(): void {\n    const viewport = this.connectedViewport;\n    if (!viewport) return;\n    const max = Math.max(0, viewport.scrollHeight - viewport.clientHeight);\n    const clamped = Math.min(max, Math.max(0, viewport.scrollTop));\n    if (viewport.scrollTop !== clamped) viewport.scrollTop = clamped;\n  }\n\n  private sync(): void {\n    const elements = this.options.elements();\n    const viewport = elements.viewport;\n    if (!viewport) return;\n\n    // Read every layout value before writing styles or reactive state.\n    const mode = this.options.mode();\n    const measureCollapse = mode.floatingCollapseAll && !mode.documentStickyHeader &&\n      elements.collapseAllOverlay && elements.frame && elements.interactiveHead;\n    const metrics = resolveTableLayoutMetrics({\n      viewportInlineSize: viewport.clientWidth,\n      viewportBlockSize: viewport.clientHeight,\n      scrollInlineSize: viewport.scrollWidth,\n      scrollBlockSize: viewport.scrollHeight,\n      scrollInlineOffset: viewport.scrollLeft,\n      collapseHeadBlockStart: measureCollapse\n        ? elements.interactiveHead!.getBoundingClientRect().top\n        : undefined,\n      collapseFrameBlockStart: measureCollapse\n        ? elements.frame!.getBoundingClientRect().top\n        : undefined,\n    });\n\n    this.setProperty(\n      viewport,\n      '--ds-table-visible-inline-size',\n      `${metrics.visibleInlineSize}px`,\n    );\n    if (elements.stickyHeaderTable) {\n      this.setProperty(\n        elements.stickyHeaderTable,\n        '--ds-table-inline-scroll-offset',\n        `${metrics.inlineOffset}px`,\n      );\n      this.setProperty(\n        elements.stickyHeaderTable,\n        '--ds-table-inline-scroll-max-offset',\n        `${metrics.maxInlineOffset}px`,\n      );\n    }\n    if (metrics.collapseBlockOffset !== null && elements.collapseAllOverlay) {\n      this.setProperty(\n        elements.collapseAllOverlay,\n        '--ds-table-collapse-all-block-offset',\n        `${metrics.collapseBlockOffset}px`,\n      );\n    }\n\n    if (\n      !this.overflow ||\n      this.overflow.start !== metrics.overflow.start ||\n      this.overflow.end !== metrics.overflow.end ||\n      this.overflow.scrollable !== metrics.overflow.scrollable\n    ) {\n      this.overflow = metrics.overflow;\n      this.options.overflowChanged(metrics.overflow);\n    }\n  }\n\n  private setProperty(element: HTMLElement, property: string, value: string): void {\n    if (element.style.getPropertyValue(property) !== value) {\n      element.style.setProperty(property, value);\n    }\n  }\n}\n",
       "type": "registry:ui"
     },
     {
@@ -937,7 +937,7 @@
     },
     {
       "path": "src/wc/components/Table/table-render-model.ts",
-      "content": "import {\n  deriveTableSelectionState,\n  isTableGroupIntent,\n  resolvedTableGroupCount,\n  tableCollapseAllHost,\n  tableExplicitMinWidth,\n  tableFlexibleColumnId,\n  tableGroupIntentClass,\n  tableGroupLabelColor,\n  tableRows,\n  type TableCollapseAllHost,\n  type TableSelectionState,\n} from './table-model';\nimport type {\n  TableColumn,\n  TableGroup,\n  TableGroupIntent,\n  TableRow,\n  TableSelectionMode,\n} from './table-types';\n\nexport interface TableGroupRenderModel {\n  group: TableGroup;\n  count: number;\n  countLabel: string;\n  countIntent: TableGroupIntent;\n  intent: TableGroupIntent | undefined;\n  intentClass: string | undefined;\n  labelColor: ReturnType<typeof tableGroupLabelColor>;\n  collapsed: boolean;\n  selection: TableSelectionState | null;\n}\n\nexport interface TableRenderModel {\n  grouped: boolean;\n  selectable: boolean;\n  loadedRows: TableRow[];\n  hasData: boolean;\n  selectedRowIds: ReadonlySet<string>;\n  selection: TableSelectionState;\n  collapsedGroupIds: ReadonlySet<string>;\n  groups: TableGroupRenderModel[];\n  totalColumns: number;\n  allGroupsCollapsed: boolean;\n  showCollapseAll: boolean;\n  collapseAllHost: TableCollapseAllHost | undefined;\n  flexibleColumnId: string | undefined;\n  tableStyle: Record<string, string> | undefined;\n}\n\nexport interface TableRenderModelInput {\n  columns: TableColumn[];\n  rows: TableRow[];\n  groups: TableGroup[];\n  grouped: boolean;\n  selectionMode: TableSelectionMode;\n  selectedRowIds: string[];\n  collapsedGroupIds: string[];\n}\n\n/** Create one immutable snapshot of all derived state consumed during a render. */\nexport function createTableRenderModel(input: TableRenderModelInput): TableRenderModel {\n  const selectable = input.selectionMode === 'multiple';\n  const loadedRows = tableRows(input.rows, input.groups, input.grouped);\n  const selectedRowIds = new Set(input.selectedRowIds);\n  const collapsedGroupIds = new Set(input.collapsedGroupIds);\n  const allGroupsCollapsed = input.grouped && input.groups.length > 0 &&\n    input.groups.every(group => collapsedGroupIds.has(group.id));\n  const showCollapseAll = input.grouped && input.groups.length > 0 && !allGroupsCollapsed;\n  const explicitMinWidth = tableExplicitMinWidth(input.columns);\n\n  return {\n    grouped: input.grouped,\n    selectable,\n    loadedRows,\n    hasData: loadedRows.length > 0,\n    selectedRowIds,\n    selection: deriveTableSelectionState(loadedRows, input.selectedRowIds),\n    collapsedGroupIds,\n    groups: input.groups.map(group => {\n      const count = resolvedTableGroupCount(group);\n      const intent = isTableGroupIntent(group.intent) ? group.intent : undefined;\n      return {\n        group,\n        count,\n        countLabel: group.countLabel ?? `${count} ${count === 1 ? 'item' : 'items'}`,\n        countIntent: intent ?? 'neutral',\n        intent,\n        intentClass: tableGroupIntentClass(intent),\n        labelColor: tableGroupLabelColor(intent),\n        collapsed: collapsedGroupIds.has(group.id),\n        selection: selectable\n          ? deriveTableSelectionState(group.rows, input.selectedRowIds)\n          : null,\n      };\n    }),\n    totalColumns: input.columns.length + (selectable ? 1 : 0),\n    allGroupsCollapsed,\n    showCollapseAll,\n    collapseAllHost: showCollapseAll ? tableCollapseAllHost(input.columns) : undefined,\n    flexibleColumnId: tableFlexibleColumnId(input.columns),\n    tableStyle: explicitMinWidth == null\n      ? undefined\n      : { '--ds-table-explicit-min-inline-size': explicitMinWidth },\n  };\n}\n",
+      "content": "import {\n  deriveTableSelectionState,\n  isTableGroupIntent,\n  resolvedTableGroupCount,\n  tableCollapseAllHost,\n  tableColumnSize,\n  tableExplicitMinWidth,\n  tableFlexibleColumnId,\n  tableGroupIntentClass,\n  tableGroupLabelColor,\n  tableRows,\n  type TableCollapseAllHost,\n  type TableSelectionState,\n} from './table-model';\nimport type {\n  TableColumn,\n  TableGroup,\n  TableGroupIntent,\n  TableRow,\n  TableSelectionMode,\n} from './table-types';\n\nexport interface TableGroupRenderModel {\n  group: TableGroup;\n  count: number;\n  countLabel: string;\n  countIntent: TableGroupIntent;\n  intent: TableGroupIntent | undefined;\n  intentClass: string | undefined;\n  labelColor: ReturnType<typeof tableGroupLabelColor>;\n  collapsed: boolean;\n  selection: TableSelectionState | null;\n}\n\nexport interface TableRenderModel {\n  grouped: boolean;\n  selectable: boolean;\n  loadedRows: TableRow[];\n  hasData: boolean;\n  selectedRowIds: ReadonlySet<string>;\n  selection: TableSelectionState;\n  collapsedGroupIds: ReadonlySet<string>;\n  groups: TableGroupRenderModel[];\n  totalColumns: number;\n  allGroupsCollapsed: boolean;\n  showCollapseAll: boolean;\n  collapseAllHost: TableCollapseAllHost | undefined;\n  flexibleColumnId: string | undefined;\n  tableStyle: Record<string, string> | undefined;\n}\n\nexport interface TableRenderModelInput {\n  columns: TableColumn[];\n  rows: TableRow[];\n  groups: TableGroup[];\n  grouped: boolean;\n  selectionMode: TableSelectionMode;\n  selectedRowIds: string[];\n  collapsedGroupIds: string[];\n}\n\n/** Create one immutable snapshot of all derived state consumed during a render. */\nexport function createTableRenderModel(input: TableRenderModelInput): TableRenderModel {\n  const selectable = input.selectionMode === 'multiple';\n  const loadedRows = tableRows(input.rows, input.groups, input.grouped);\n  const selectedRowIds = new Set(input.selectedRowIds);\n  const collapsedGroupIds = new Set(input.collapsedGroupIds);\n  const allGroupsCollapsed = input.grouped && input.groups.length > 0 &&\n    input.groups.every(group => collapsedGroupIds.has(group.id));\n  const showCollapseAll = input.grouped && input.groups.length > 0 && !allGroupsCollapsed;\n  const explicitMinWidth = tableExplicitMinWidth(input.columns);\n  const flexibleColumnId = tableFlexibleColumnId(input.columns);\n  const gridTracks = [\n    ...(selectable ? ['var(--_table-selection-column-inline-size)'] : []),\n    ...input.columns.map(column => {\n      const width = tableColumnSize(column);\n      if (!width) return 'minmax(0, 1fr)';\n      return column.id === flexibleColumnId ? `minmax(${width}, 1fr)` : width;\n    }),\n  ].join(' ');\n  const tableStyle: Record<string, string> = {\n    '--_table-grid-template-columns': gridTracks || 'minmax(0, 1fr)',\n  };\n  if (explicitMinWidth != null) {\n    tableStyle['--ds-table-explicit-min-inline-size'] = explicitMinWidth;\n  }\n\n  return {\n    grouped: input.grouped,\n    selectable,\n    loadedRows,\n    hasData: loadedRows.length > 0,\n    selectedRowIds,\n    selection: deriveTableSelectionState(loadedRows, input.selectedRowIds),\n    collapsedGroupIds,\n    groups: input.groups.map(group => {\n      const count = resolvedTableGroupCount(group);\n      const intent = isTableGroupIntent(group.intent) ? group.intent : undefined;\n      return {\n        group,\n        count,\n        countLabel: group.countLabel ?? `${count} ${count === 1 ? 'item' : 'items'}`,\n        countIntent: intent ?? 'neutral',\n        intent,\n        intentClass: tableGroupIntentClass(intent),\n        labelColor: tableGroupLabelColor(intent),\n        collapsed: collapsedGroupIds.has(group.id),\n        selection: selectable\n          ? deriveTableSelectionState(group.rows, input.selectedRowIds)\n          : null,\n      };\n    }),\n    totalColumns: input.columns.length + (selectable ? 1 : 0),\n    allGroupsCollapsed,\n    showCollapseAll,\n    collapseAllHost: showCollapseAll ? tableCollapseAllHost(input.columns) : undefined,\n    flexibleColumnId,\n    tableStyle,\n  };\n}\n",
       "type": "registry:ui"
     },
     {

package/dist/styles/table.css

@@ -163,6 +163,66 @@
   --_table-selection-column-contribution: var(--_table-selection-column-inline-size);
 }
 
+/*
+ * A contained grouped table uses native sticky positioning without a scroll
+ * listener or duplicated section lane. Turning its table formatting boxes into
+ * explicit blocks makes every real tbody a section boundary; shared grid tracks
+ * retain exact header/body alignment while the browser performs push-off in the
+ * same layout pass as scrolling and container resize.
+ */
+:where(.ds-table__table--native-group-sticky) {
+  display: block;
+}
+
+:where(.ds-table__table--native-group-sticky > colgroup) {
+  display: none;
+}
+
+:where(.ds-table__table--native-group-sticky > .ds-table__head),
+:where(.ds-table__table--native-group-sticky > .ds-table__body) {
+  display: block;
+  inline-size: 100%;
+}
+
+:where(.ds-table__table--native-group-sticky > .ds-table__group) {
+  position: relative;
+  contain: layout style;
+}
+
+:where(.ds-table__table--native-group-sticky .ds-table__header-row),
+:where(.ds-table__table--native-group-sticky .ds-table__row),
+:where(.ds-table__table--native-group-sticky .ds-table__skeleton-row) {
+  display: grid;
+  grid-template-columns: var(--_table-grid-template-columns);
+  inline-size: 100%;
+}
+
+:where(.ds-table__table--native-group-sticky .ds-table__group-row),
+:where(.ds-table__table--native-group-sticky .ds-table__state-row),
+:where(.ds-table__table--native-group-sticky .ds-table__load-row) {
+  display: block;
+  inline-size: 100%;
+}
+
+:where(.ds-table__table--native-group-sticky .ds-table__header-cell),
+:where(.ds-table__table--native-group-sticky .ds-table__cell),
+:where(.ds-table__table--native-group-sticky .ds-table__group-cell),
+:where(.ds-table__table--native-group-sticky .ds-table__state-cell),
+:where(.ds-table__table--native-group-sticky .ds-table__load-cell) {
+  display: block;
+  inline-size: auto;
+  width: auto;
+  max-inline-size: none;
+  max-width: none;
+}
+
+:where(.ds-table__table--native-group-sticky .ds-table__group-cell),
+:where(.ds-table__table--native-group-sticky .ds-table__state-cell),
+:where(.ds-table__table--native-group-sticky .ds-table__load-cell) {
+  inline-size: 100%;
+  width: 100%;
+}
+
 :where(.ds-table__caption-bar),
 :where(.ds-table__footer) {
   box-sizing: border-box;
@@ -184,6 +244,20 @@
   color: var(--color-foreground-primary);
 }
 
+:where(.ds-table__caption-content) {
+  display: grid;
+  flex: 1 1 auto;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: center;
+  box-sizing: border-box;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+}
+
+:where(.ds-table__caption-content > slot) {
+  display: contents;
+}
+
 :where(.ds-table--caption-visible .ds-table__frame),
 :where(.ds-table--caption-visible .ds-table__viewport) {
   border-start-start-radius: 0;
@@ -306,9 +380,18 @@
   inline-size: 100%;
   block-size: var(--_table-row-min-block-size);
   overflow: hidden;
+}
+
+:where(.ds-table--document-sticky-header .ds-table__sticky-group) {
   will-change: inset-block-start;
 }
 
+:where(.ds-table--contained-sticky-header .ds-table__sticky-group) {
+  inset-block-start: var(--_table-header-min-block-size);
+  transform: translateY(var(--_table-sticky-group-push, 0));
+  will-change: transform;
+}
+
 :where(.ds-table__sticky-group .ds-table__group-content) {
   position: relative;
 }
@@ -452,6 +535,21 @@
   vertical-align: top;
 }
 
+/*
+ * Native table cells add their block padding outside the declared content
+ * height and grow together with their row. Grid items use border-box sizing,
+ * so restore intrinsic sizing and grid-track stretch for the grouped-sticky
+ * renderer instead of turning the native recipe's base sizes into hard caps.
+ */
+:where(.ds-table__table--native-group-sticky .ds-table__header-cell) {
+  min-block-size: var(--_table-header-min-block-size);
+  block-size: auto;
+}
+
+:where(.ds-table__table--native-group-sticky .ds-table__cell) {
+  block-size: auto;
+}
+
 :where(.ds-table__header-cell + .ds-table__header-cell) {
   border-inline-start: 0;
 }
@@ -991,6 +1089,13 @@
   background: transparent;
 }
 
+/* Each real section owns one sticky row and its own push-off boundary. */
+:where(.ds-table--contained-sticky-header .ds-table__group-row--native-sticky) {
+  position: sticky;
+  inset-block-start: var(--_table-header-min-block-size);
+  z-index: 5;
+}
+
 /* Intentful groups resolve from their faint signal into neutral at the trailing edge. */
 :where(.ds-table__group-cell--intent-brand),
 :where(.ds-table__group-cell--intent-negative),

package/dist/types/components/ShellApp/ShellApp.d.ts

@@ -73,6 +73,8 @@ export declare class ShellApp {
     private toolsFullscreen;
     private resolvedMode;
     private managedToolsOpen;
+    /** Keep page capacity aligned with the drawer until its closing clip reaches zero. */
+    private managedToolsClosing;
     private managedActiveTool;
     private managedToolPresentation;
     private managedMobileDestination;

package/dist/types/components/Table/Table.d.ts

@@ -81,9 +81,7 @@ export declare class Table {
     private announcement;
     private activeStickyGroupId;
     private viewportFitSettled;
-    private headerLeadingPresent;
-    private headerCopyPresent;
-    private headerTrailingPresent;
+    private headerPresent;
     private rootEl;
     private viewportEl;
     private frameEl;
@@ -108,6 +106,7 @@ export declare class Table {
     private syncHeaderSlotPresence;
     private connectHeaderSlotObserver;
     private connectStickyGroup;
+    private syncStickyGroupConnection;
     private disconnectStickyGroup;
     private readonly updateStickyGroup;
     handleStructureChange(): void;