@ds-mo/ui 14.19.1 → 14.21.0

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

@@ -2,7 +2,7 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "table",
   "title": "Table",
-  "description": "Semantic, controlled data table with durable visual primitives for cell geometry, grouping, sorting, multi-selection, sticky overflow, incremental loading, top-level pagination, and optional row virtualization.",
+  "description": "Semantic, controlled data table with durable visual primitives for cell geometry, wrapping multiple-Tag cells, grouping, sorting, multi-selection, sticky overflow, incremental loading, top-level pagination, and optional row virtualization.",
   "type": "registry:ui",
   "meta": {
     "library": "@ds-mo/ui",
@@ -13,7 +13,7 @@
     "intent": {
       "audience": "general",
       "status": "stable",
-      "summary": "Semantic, controlled data table with durable visual primitives for cell geometry, grouping, sorting, multi-selection, sticky overflow, incremental loading, top-level pagination, and optional row virtualization.",
+      "summary": "Semantic, controlled data table with durable visual primitives for cell geometry, wrapping multiple-Tag cells, grouping, sorting, multi-selection, sticky overflow, incremental loading, top-level pagination, and optional row virtualization.",
       "useWhen": [
         "A structured dataset needs native row and column relationships, optional one-level grouping, or comparable values across records.",
         "An application needs controlled sorting, loaded-row selection, infinite loading, pagination, virtual row recycling, or opted-in table-owned data-mode and column controls while retaining ownership of the data query, catalog, and persistence.",
@@ -48,15 +48,16 @@
         "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 data 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 share one horizontal caption overflow row with table-owned actions inside the component-owned 8px inset. Table caption buttons keep pressed interaction paint without physically scaling. When columnCustomizer is enabled, the table adds a trailing Customize control named Customize table. Its label uses regular weight and its resting foreground remains neutral when hidden or reordered columns differ from the catalog default. The control is icon-label at typical widths and the icon-only Table menu button below 900px, where a tooltip preserves the Customize label. The always-icon-only table-variant control also exposes its label through a tooltip. Otherwise the header slot receives the complete content width.",
         "The data-mode switcher is the shared Menu of the table's supported infinite, pagination, and virtual modes. It uses an Ellipses trigger. The switcher is the final caption-bar action; when the column customizer is also present, a decorative vertical divider separates the two controls. dataMode remains controlled, and the application responds to change intent by supplying the matching records, pagination state, loading behavior, and query consequences. Escape, dismissal, and selection return focus to the trigger.",
         "The column customizer is the shared Menu of switch rows, not a table-owned dialog. Data columns can be shown, hidden, and reordered. Action columns and the selection checkbox never appear in the menu. The last remaining visible data column cannot be hidden, but it stays focusable so it can still be reordered. Escape and outside click restore focus to the trigger. Persistence stays in the application.",
-        "Sorting controls remain buttons inside column headers and expose the table's one controlled member-row sort through aria-sort. ds-table-sort in the toolbar trailing cluster is the matching menu of Data and Direction sections; it emits the same dsSortChange shape so header clicks and menu choices stay in sync. Grouping never adds a second sort indicator or header control; the application supplies groups in its fixed product order. Optional column help underlines the header label with the shared dotted decoration and shows ds-tooltip from that label; it does not add a second header control or replace the column name.",
+        "Sorting controls remain buttons inside column headers and expose the table's one controlled member-row sort through aria-sort. ds-table-sort in the toolbar trailing cluster is the matching menu of Data and Direction sections; it emits the same dsSortChange shape so header clicks and menu choices stay in sync. Grouping never adds a second sort indicator or header control; ds-table-group controls the grouping data point and ascending or descending group-section order while the application supplies the resulting groups. Optional column help underlines the header label with the shared dotted decoration and shows ds-tooltip from that label; it does not add a second header control or replace the column name.",
         "Selection controls expose checkbox semantics and explicit row names; select-all affects selectable loaded rows only and preserves selected identities outside the loaded window. In virtual mode the supplied in-memory rows are that loaded set, including rows whose DOM is recycled. When grouping is active with multi-selection, each group section header also exposes a checkbox that selects or clears that group's selectable loaded rows.",
         "Interactive rows are focusable as native rows, activate with Enter or Space, and do not steal activation from their nested selection, action, overflow-menu, or primary-text link controls.",
         "Scrollable table regions become keyboard focusable and named only when overflow exists.",
         "Incremental loading, newly appended row counts, failures, and end-of-results transitions are announced through a polite status region without replacing visible state. In grouped tables, announcements name the independently loading group.",
+        "Applications may pass their controlled literal search terms through highlightTerms after applying their own filtering. When TableSearch scopes the query, pass the same selected field identities through highlightFieldIds. A compound column maps its ordered headerSegments to primary, secondary-run, and tertiary-run data points; simple columns map their column ID to every owned text track. With no highlightFieldIds every text track remains eligible. Matching text is rendered with semantic mark elements, so the emphasis is identifiable independently of its faint-brand background and bold-brand foreground. Highlight markup preserves source order, the cell's complete accessible text, and does not create extra announcements.",
         "Static and infinite tables may show an optional result summary footer when displayedCount and totalCount are finite. Virtual mode shows a total-only summary and ignores displayedCount. Pagination mode instead renders a named Pagination control with a compact selected-size total, vertical divider, and page position; range changes are announced independently with complete phrasing. Unmodified Left and Right Arrow request the adjacent page while focus is inside a paginated table or on a containing page scroller that owns it; editable fields, choice controls, sliders, open menus, and modified key combinations retain their own keyboard behavior. A table-owned footer slot can replace summary copy, while footer-leading and footer-trailing remain available in the same compact-bar anatomy. Nested dialog footers are ignored."
       ],
       "states": [
-        "Columns, rows, groups, grouping, sorting, selected row IDs, collapsed group IDs, hiddenColumnIds, columnOrder, dataMode, pagination, displayedCount, totalCount, and incremental-loading state are controlled inputs. Events communicate intent and never mutate those inputs. The optional header is one composable table-local surface: the component owns its 48px chrome, 8px inset on every side, and sticky placement while the application owns the leading slot's internal layout, controls, labels, filtering behavior, and action handling. Opting into dataModeSwitcher and columnCustomizer adds their trailing Menu triggers and requires caption visibility. When both are present, Customize precedes a decorative divider and the data-mode trigger remains the final action. The Customize trigger keeps one stable label and neutral resting foreground whether or not hiddenColumnIds or columnOrder differ from the catalog default; the configured state remains visible inside the Menu. The table closes one trailing Menu before opening the other. The footer retains its compact-bar composition: application-owned leading status sits left while a controlled result summary or Pagination aligns right, before any trailing action. 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.",
+        "Columns, rows, groups, grouping, sorting, selected row IDs, collapsed group IDs, highlightTerms, highlightFieldIds, hiddenColumnIds, columnOrder, dataMode, pagination, displayedCount, totalCount, and incremental-loading state are controlled inputs. Events communicate intent and never mutate those inputs. The optional header is one composable table-local surface: the component owns its 48px chrome, 8px inset on every side, and sticky placement while the application owns the leading slot's internal layout, controls, labels, filtering behavior, and action handling. highlightTerms only marks matching table-owned text and never filters rows, changes query semantics, or highlights Tag labels. highlightFieldIds optionally narrows that marking to matching column IDs or compound header-segment sort keys. Opting into dataModeSwitcher and columnCustomizer adds their trailing Menu triggers and requires caption visibility. When both are present, Customize precedes a decorative divider and the data-mode trigger remains the final action. The Customize trigger keeps one stable label and neutral resting foreground whether or not hiddenColumnIds or columnOrder differ from the catalog default; the configured state remains visible inside the Menu. The table closes one trailing Menu before opening the other. The footer retains its compact-bar composition: application-owned leading status sits left while a controlled result summary or Pagination aligns right, before any trailing action. 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 groups in a fixed product-defined order and supplies ordered member rows independently. Group section headers show an emphasized text-body-medium label followed by a middle dot and plain secondary loaded progress, for example Critical · 50 of 166. The loaded value comes from the supplied member rows and the total comes from totalCount. A localized countLabel total phrase remains available for the complete assistive progress announcement. Virtual mode shows totals only, for example Critical · 166, because there is no loaded window. 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. Internal sections keep their separators; a collapsed or empty section header yields its separator only when it is the table's final rendered item. 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 is 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. Virtual grouped tables flatten headers and members into that same scrollport; expanding a section never introduces an inner scroller.",
         "When columnCustomizer is false, columns render in catalog order. When it is true, columns remains the catalog: hiddenColumnIds and columnOrder control visibility and data-column sequence, action columns stay last, cannot be hidden, and remain absent from the customizer Menu, and dsColumnsConfigChange reports the next hidden ids and data-column order without mutating those inputs. The customizer Menu live-applies show/hide and data-column reorder. The table does not persist preferences.",
         "An active member sort toggles only between ascending and descending; activating a different sortable label moves the one sorting state to that key. Applications may still clear the controlled sort state explicitly. Grouping does not introduce another interactive direction.",
@@ -66,7 +67,7 @@
         "When pagination enables Fit to page on a bounded table, the table proposes the number of complete top-level rows that fit below its column header. Grouped tables count group headers only; member rows never affect capacity. Selecting Fit captures that numeric snapshot. A changed fitIdentity requests one fresh snapshot for a new query shape, while viewport resizing alone does not change the active controlled page size.",
         "Rows opt into complete-row activation with interactive and emit dsRowActivate without owning navigation. Selection paints through the shared selected ::before layer; interactive hover and press paint through the shared ::after layer.",
         "Row selection owns the single sticky start lane. One explicitly sized application column can own the sticky end lane, or the start lane when selection is absent. Each sticky boundary owns one fixed divider and a row-clipped directional shadow that paints into the adjacent scrolling columns only while more inline content remains beyond that edge.",
-        "Cells accept scalar content, standard primary-and-secondary or dual-primary text primitives, declarative Tag, icon-only, icon-and-text, 16:9 Image, or ButtonUnfilled Action content, or explicit Empty and Blank absence values. Text objects may declare an optional href (and target) on the primary track only; the table renders a native anchor with the shared brand text-action treatment when the URL is safe, and leaves scalars unlinked. Standard secondary copy defaults to the secondary foreground and may declare a semantic Text color when the application data carries intent; an optional tertiary track uses the same subdued body-small recipe as secondary. Secondary and tertiary may also be a short list of colorable runs, rendered on one line with the table's middle-dot separator. Dual-primary copy keeps both tracks primary unless explicitly colored and does not gain a tertiary track. Body data cells share 8px outer padding; header and group rows keep their own geometry. Text tracks, including Empty, keep 4px inline padding so copy lines up with column-header labels; Tag and icon-only tracks stay on the 8px cell chrome alone. Icon-and-text cells (`kind: 'icon-text'`) place one md prefix icon beside the same copy stack as a text cell. The icon slot takes 2px padding on every side, then a 2px flex gap before the copy; text-track padding stays on the copy. Omit iconLabel when the glyph is decorative. 20px content (body-medium text, md icon, and the row checkbox) sits in a 24px track so it stays optically aligned with 24px Tag and Action content. Single-track text, selection, tag-only, icon-only, icon-and-text, Action, Empty, Blank, and 1-track Image cells resolve a 40px base contract while two-track cells grow to 62px and three-track cells grow to 84px. Tracks stack with a 2px gap. Wrapping primary on a 1-track cell uses that same rhythm: two wrapped lines share the 62px row and three wrapped lines share the 84px row. Wrapping secondary keeps primary on the first track and consumes later tracks: two secondary lines share the 84px row and three secondary lines share a 106px fourth track. Keep the same track count in every row of a table or group when those rows should share one height. Tag cells use the inset Tag recipe: md double-inset is a 24px control for tag-only and tag-with-text, while text-with-tag uses sm single-inset at 20px so the second-track pill fills the body-small slot. Action cells primarily use an icon-only Ellipses treatment, render a 24px small ButtonUnfilled, default to unbordered, and emit row, column, and action identities through dsCellAction. When an action cell declares items, that Ellipses trigger opens the shared ds-menu for commands, dividers, inactive rows, and destructive rows instead of emitting on click; choosing a command emits dsCellAction with that item's actionId. Omit items to keep a single-shot control. Image cells declare tracks 1, 2, or 3 so the 16:9 bordered preview fills that body-row content box (cell height minus 8px padding) and the column hugs the resulting width; omit tracks for the 1-track recipe, and keep image tracks aligned with the other cells in the table or group. Image cells fall back to an accessible placeholder when no source is supplied. Empty means the data applies but has no value and renders an em dash with localized assistive text; Blank means the data is not applicable and renders no content. Nullish values remain backward-compatible Empty values. Stable type and variant hooks keep every cell family independently styleable.",
+        "Cells accept scalar content, standard primary-and-secondary or dual-primary text primitives, declarative Tag, wrapping multiple-Tag content, icon-only, icon-and-text, 16:9 Image, or ButtonUnfilled Action content, or explicit Empty and Blank absence values. Text objects may declare an optional href (and target) on the primary track only; the table renders a native anchor with the shared brand text-action treatment when the URL is safe, and leaves scalars unlinked. Standard secondary copy defaults to the secondary foreground and may declare a semantic Text color when the application data carries intent; an optional tertiary track uses the same subdued body-small recipe as secondary. Secondary and tertiary may also be a short list of colorable runs, rendered on one line with the table's middle-dot separator. Dual-primary copy keeps both tracks primary unless explicitly colored and does not gain a tertiary track. Body data cells share 8px outer padding; header and group rows keep their own geometry. Text tracks, including Empty, keep 4px inline padding so copy lines up with column-header labels; Tag and icon-only tracks stay on the 8px cell chrome alone. Icon-and-text cells (`kind: 'icon-text'`) place one md prefix icon beside the same copy stack as a text cell. The icon slot takes 2px padding on every side, then a 2px flex gap before the copy; text-track padding stays on the copy. Omit iconLabel when the glyph is decorative. 20px content (body-medium text, md icon, and the row checkbox) sits in a 24px track so it stays optically aligned with 24px Tag and Action content. Single-track text, selection, tag-only, icon-only, icon-and-text, Action, Empty, Blank, and 1-track Image cells resolve a 40px base contract while two-track cells grow to 62px and three-track cells grow to 84px. Every later track adds 22px, so four tracks resolve to 106px, five to 128px, and the sequence may continue. Tracks stack with a 2px gap. Wrapping primary on a 1-track cell uses that same rhythm: two wrapped lines share the 62px row and three wrapped lines share the 84px row. Wrapping secondary keeps primary on the first track and consumes later tracks: two secondary lines share the 84px row and three secondary lines share a 106px fourth track. Keep the same track count in every row of a table or group when those rows should share one height. Tag cells use the inset Tag recipe: md double-inset is a 24px control for tag-only and tag-with-text, while text-with-tag uses sm single-inset at 20px so the second-track pill fills the body-small slot. Multiple-Tag cells use `kind: 'tags'`, a positive `tracks` count, and small single-inset Tags that wrap naturally at the column edge. Their 2px block inset creates the 24px first track and each later wrapped line adds a 20px track plus the shared 2px gap. The tallest cell establishes the native row height, so all sibling cells match even at four, five, or more tracks; virtual tables use the declared count as the initial estimate and measure responsive wrapping after paint. Action cells primarily use an icon-only Ellipses treatment, render a 24px small ButtonUnfilled, default to unbordered, and emit row, column, and action identities through dsCellAction. When an action cell declares items, that Ellipses trigger opens the shared ds-menu for commands, dividers, inactive rows, and destructive rows instead of emitting on click; choosing a command emits dsCellAction with that item's actionId. Omit items to keep a single-shot control. Image cells declare tracks 1, 2, or 3 so the 16:9 bordered preview fills that body-row content box (cell height minus 8px padding) and the column hugs the resulting width; omit tracks for the 1-track recipe, and keep image tracks aligned with the other cells in the table or group. Image cells fall back to an accessible placeholder when no source is supplied. Empty means the data applies but has no value and renders an em dash with localized assistive text; Blank means the data is not applicable and renders no content. Nullish values remain backward-compatible Empty values. Stable type, variant, and track-count hooks keep every cell family independently styleable.",
         "The public @ds-mo/ui/table.css export is the authoritative zero-specificity visual recipe. Override its --ds-table-* properties or target its stable element classes for product-specific styling."
       ],
       "responsiveBehavior": [
@@ -75,14 +76,14 @@
         "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. 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. Set imageTracks on an image column to derive its fixed width from the matching 1-, 2-, or 3-track 16:9 image geometry plus table cell padding instead of copying a numeric width.",
+        "Explicit column sizes establish the horizontal overflow width; unsized columns share remaining space. When every visible data column is explicitly sized, one internal presentational spacer absorbs unused inline space without stretching the final data column and collapses to zero when those widths introduce horizontal overflow. The spacer sits before trailing action and sticky-end lanes so those controls remain at the visible edge. Set imageTracks on an image column to derive its fixed width from the matching 1-, 2-, or 3-track 16:9 image geometry plus table cell padding instead of copying a numeric width.",
         "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.",
-        "Column headers use one 32px geometry. Body rows use a 40px single-track minimum with shared 8px cell padding; additional tracks grow downward. Image previews fill the same content box as their declared track count. The second text track and the third text track share one subdued body-small recipe so line 3 lines up with line 2.",
+        "Column headers use one 32px geometry. Body rows use a 40px single-track minimum with shared 8px cell padding; every additional track adds 22px and grows the complete native row so sibling cells match. Image previews fill the same content box as their declared track count. Wrapping multiple-Tag cells may declare any positive track count. The second text track and the third text track share one subdued body-small recipe so line 3 lines up with line 2.",
         "Long content truncates to one line by default. Hover (or keyboard-focus a primary link) shows the omitted value in one table-owned tooltip when that track overflows. maxLines 2 or 3 wrap onto the named 2-track and 3-track row heights, then ellipsize with the same tooltip. wrap: true remains unlimited and does not show a truncation tooltip. Wrapping 1-track primary occupies the named 2-track and 3-track row heights instead of a private line-height scale. Wrapping secondary on a 2-track cell occupies the named 3-track row and a 106px fourth track for three lines."
       ],
       "frameworkCaveats": {
         "customElements": [
-          "Assign columns, rows, groups, grouping, sort, selectedRowIds, collapsedGroupIds, hiddenColumnIds, columnOrder, pagination, displayedCount, and totalCount through JavaScript properties rather than HTML attribute strings.",
+          "Assign columns, rows, groups, grouping, sort, selectedRowIds, collapsedGroupIds, highlightTerms, highlightFieldIds, hiddenColumnIds, columnOrder, pagination, displayedCount, and totalCount through JavaScript properties rather than HTML attribute strings.",
           "dataMode=virtual recycles row DOM over the supplied in-memory rows or groups and requires height, maxHeight, or fitViewport. It does not fetch or paginate.",
           "When an action cell supplies items, the table opens one shared ds-menu from the Ellipses trigger; dsCellAction fires for the selected command, not for opening or closing the menu.",
           "When columnCustomizer is enabled, the Table trigger opens the same shared ds-menu of reorderable switch rows; toggling a switch or reordering a row emits dsColumnsConfigChange and does not close the menu.",
@@ -375,6 +376,22 @@
           "mutable": false,
           "description": "Controlled hidden data-column identities. Action ids are ignored."
         },
+        "highlightFieldIds": {
+          "type": "string[]",
+          "resolvedType": "string[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false,
+          "description": "Optional TableSearch field identities that restrict which data-point tracks are highlighted."
+        },
+        "highlightTerms": {
+          "type": "string[]",
+          "resolvedType": "string[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false,
+          "description": "Literal terms to highlight in table-owned text cells. Applications still own filtering."
+        },
         "infiniteModeLabel": {
           "type": "string",
           "resolvedType": "string",
@@ -935,6 +952,22 @@
         "mutable": false,
         "description": "Controlled hidden data-column identities. Action ids are ignored."
       },
+      "highlightFieldIds": {
+        "type": "string[]",
+        "resolvedType": "string[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false,
+        "description": "Optional TableSearch field identities that restrict which data-point tracks are highlighted."
+      },
+      "highlightTerms": {
+        "type": "string[]",
+        "resolvedType": "string[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false,
+        "description": "Literal terms to highlight in table-owned text cells. Applications still own filtering."
+      },
       "infiniteModeLabel": {
         "type": "string",
         "resolvedType": "string",
@@ -1258,7 +1291,7 @@
         "import": "import { DsTable } from '@ds-mo/ui/angular/ds-table';",
         "example": "<ds-table></ds-table>"
       },
-      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: collapsedGroupIds, columnOrder, columns, grouping, groups, hiddenColumnIds, pagination, rows, selectedRowIds, sort.",
+      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: collapsedGroupIds, columnOrder, columns, grouping, groups, hiddenColumnIds, highlightFieldIds, highlightTerms, pagination, rows, selectedRowIds, sort.",
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.0",
@@ -1295,7 +1328,7 @@
     },
     {
       "path": "src/wc/components/Table/Table.tsx",
-      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport {\n  deriveTableSelectionState,\n  formatTableResultSummary,\n  formatTableTotalSummary,\n  hasOwnedTableFooterSlot,\n  isTableCellAction,\n  nextTableSortState,\n  tableColumnSize,\n  tableModelIssues,\n  tableRows,\n  toggleAllLoadedTableRows,\n  toggleTableGroupCollapsed,\n  toggleTableGroupSelection,\n  nextTableGroupsCollapsed,\n  toggleTableRowSelection,\n} from './table-model';\nimport { createTableRenderModel, type TableRenderModel } from './table-render-model';\nimport {\n  isRenderableTableActionMenu,\n  nextTableActionMenuElementId,\n  tableActionMenuSections,\n  tableActionTriggerId,\n} from './table-action-menu';\nimport {\n  nextTableColumnCustomizerElementId,\n  resolveTableColumnOrder,\n  resolveTableHiddenColumnIds,\n  resolveTableVisibleColumns,\n  tableColumnCustomizerMenuItems,\n  toggleTableColumnHidden,\n} from './table-column-customizer';\nimport {\n  nextTableDataModeSwitcherElementId,\n  tableDataModeFromMenuItem,\n  tableDataModeMenuItems,\n} from './table-data-mode-switcher';\nimport { resolveTableTruncateTrack, tableTruncateLabel } from './table-truncate';\nimport { renderTableRow as renderTableRowView } from './table-row-view';\nimport { TableBodyRenderer } from './table-body-renderer';\nimport { renderTableSkeletonBody } from './table-skeleton-view';\nimport { renderTableLoadContent } from './table-load-view';\nimport { TableLayoutController } from './table-layout-controller';\nimport { TableLoadController } from './table-load-controller';\nimport { TableGroupLoadController } from './table-group-load-controller';\nimport {\n  flattenTableVirtualItems,\n  resolveTableVirtualPlan,\n  TABLE_VIRTUAL_TOTAL_SUMMARY_LABEL,\n  TABLE_VIRTUAL_VIEWPORT_REQUIRED_BODY,\n  TABLE_VIRTUAL_VIEWPORT_REQUIRED_HEADING,\n  type TableVirtualItem,\n  type TableVirtualPlan,\n} from './table-virtual-model';\nimport { TableVirtualController } from './table-virtual-controller';\nimport type { PaginationChangeDetail } from '../Pagination/pagination-types';\nimport type { MenuItemData, MenuReorderDetail } from '../Menu/menu-types';\nimport { resolvePaginationState } from '../Pagination/pagination-model';\nimport { resolveCssLengthPx } from '../../utils/resolve-css-length-px';\nimport { isElementTruncated } from '../../utils/is-element-truncated';\nimport { observeTableCaptionCompact } from '../../utils/table-caption-compact';\nimport { resolveTableFitPageSize } from './table-pagination-fit';\nimport {\n  paginationShortcutBlockedByPath,\n  shouldHandleContainingPagePaginationShortcut,\n} from './table-pagination-shortcut';\nimport {\n  TableViewportFitController,\n  type TableViewportFitMetrics,\n} from './table-viewport-fit-controller';\nimport type {\n  TableCaptionVisibility,\n  TableCellActionDetail,\n  TableColumn,\n  TableColumnsConfigChangeDetail,\n  TableDataMode,\n  TableDataModeChangeDetail,\n  TableGroup,\n  TableGroupCollapseChangeDetail,\n  TableGroupLoadMoreDetail,\n  TableGroupingState,\n  TableLoadMoreDetail,\n  TableLoadMoreMode,\n  TablePaginationState,\n  TableRow,\n  TableRowActivateDetail,\n  TableSelectionChangeDetail,\n  TableSelectionMode,\n  TableSortChangeDetail,\n  TableSortState,\n} from './table-types';\n\nconst TABLE_FOOTER_SLOT_LEADING = 1;\nconst TABLE_FOOTER_SLOT_COPY = 2;\nconst TABLE_FOOTER_SLOT_TRAILING = 4;\n\n@Component({\n  tag: 'ds-table',\n  styleUrls: ['../../utils/focus-ring.css', '../../utils/interaction-fill.css', 'Table.css'],\n  scoped: true,\n})\nexport class Table {\n  @Element() el!: HTMLElement;\n  /** Stable column definitions. Assign through JavaScript. */\n  @Prop() columns: TableColumn[] = [];\n  /** Ungrouped row data. Ignored while grouping is active. Assign through JavaScript. */\n  @Prop() rows: TableRow[] = [];\n  /** One level of application-owned grouped data. Assign through JavaScript. */\n  @Prop() groups: TableGroup[] = [];\n  /** Controlled grouping column. Applications supply groups in their final fixed order. */\n  @Prop() grouping: TableGroupingState | null = null;\n  /** Controlled member-row sort state. */\n  @Prop() sort: TableSortState | null = null;\n  /** Controlled collapsed group identities. Groups not listed remain expanded. */\n  @Prop() collapsedGroupIds: string[] = [];\n\n  /** Required accessible table name, retained as a native caption. */\n  @Prop() caption!: string;\n  /** Shows a matching presentational title bar above the native table frame. */\n  @Prop() captionVisibility: TableCaptionVisibility = 'hidden';\n  /**\n   * Opt in to the table-owned column customizer. The `columns` prop remains the\n   * catalog; hidden and ordered columns are controlled separately. The trigger\n   * opens the shared Menu of live show/hide switch rows.\n   */\n  @Prop() columnCustomizer: boolean = false;\n  /** Controlled hidden data-column identities. Action ids are ignored. */\n  @Prop() hiddenColumnIds: string[] = [];\n  /** Controlled data-column identities in display order. Omitted ids append in catalog order. */\n  @Prop() columnOrder: string[] = [];\n  /**\n   * Optional result summary footer. When both `displayedCount` and `totalCount`\n   * are finite numbers, infinite mode shows “Displaying {displayed} of {total}”.\n   * Virtual mode ignores `displayedCount` and derives its total from the\n   * complete supplied rows; a mismatched `totalCount` emits a warning.\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  /** Supports the {total} placeholder. Used when dataMode is virtual. */\n  @Prop() resultTotalSummaryLabel: string = TABLE_VIRTUAL_TOTAL_SUMMARY_LABEL;\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  /** Replace opted-in table-owned caption controls with same-size visual skeletons. */\n  @Prop() chromeLoading: boolean = false;\n  /** Initial-loading rows. Defaults to ten so bounded tables retain a useful filled viewport. */\n  @Prop() skeletonRows: number = 10;\n  @Prop() emptyHeading: string = 'No results';\n  @Prop() emptyBody: string = 'No data is available.';\n  /** Initial error state. Existing rows stay visible; incremental failures use loadMoreError. */\n  @Prop() error: boolean = false;\n  @Prop() errorHeading: string = 'Unable to load data';\n  @Prop() errorBody: string = 'The data could not be loaded.';\n  @Prop() emptyCellLabel: string = 'Not available';\n\n  /** Top-level data-window strategy. Virtual mode recycles row DOM only. */\n  @Prop() dataMode: TableDataMode = 'infinite';\n  /** Opt in to the table-owned control for choosing between supported data modes. */\n  @Prop() dataModeSwitcher: boolean = false;\n  @Prop() dataModeSwitcherLabel: string = 'Change table variation';\n  @Prop() dataModeMenuLabel: string = 'Table variation';\n  @Prop() infiniteModeLabel: string = 'Infinite scroll';\n  @Prop() paginationModeLabel: string = 'Pagination + Infinite groups';\n  @Prop() virtualModeLabel: string = 'Virtual scroll';\n  /** Controlled top-level pagination state. Required when dataMode is pagination. */\n  @Prop() pagination: TablePaginationState | null = null;\n  @Prop() loadMoreMode: TableLoadMoreMode = 'auto';\n  @Prop() hasMore: boolean = false;\n  @Prop() loadingMore: boolean = false;\n  @Prop() loadMoreError: string | undefined;\n  /** Reset key for a new query/group/sort dataset. */\n  @Prop() loadIdentity: string | number = 'default';\n  /** IntersectionObserver root margin in CSS pixels. */\n  @Prop() loadMoreThreshold: number = 0;\n  @Prop() loadMoreLabel: string = 'Load more';\n  @Prop() retryLabel: string = 'Retry';\n  @Prop() loadingMoreLabel: string = 'Loading more items';\n  @Prop() endOfResultsLabel: string = 'All results loaded';\n  /** Supports {count} and {total} placeholders. */\n  @Prop() rowsLoadedLabel: string = '{count} more rows loaded. {total} rows loaded.';\n  @Prop() groupLoadMoreLabel: string = 'Load more';\n  /** Supports the {group} placeholder. */\n  @Prop() groupLoadMoreAriaLabel: string = 'Load more {group} results';\n  /** Supports the {group} placeholder. */\n  @Prop() groupRetryLabel: string = 'Retry loading {group} results';\n  /** Supports the {group} placeholder. */\n  @Prop() groupLoadingMoreLabel: string = 'Loading more items';\n  /** Supports the {group} placeholder. */\n  @Prop() groupEndOfResultsLabel: string = 'All {group} results loaded';\n  /** Supports {group}, {count}, {loaded}, and {total} placeholders. */\n  @Prop() groupRowsLoadedLabel: string =\n    '{count} more rows loaded in {group}. {loaded} of {total} rows loaded.';\n\n  @Event() dsSortChange!: EventEmitter<TableSortChangeDetail>;\n  @Event() dsGroupCollapseChange!: EventEmitter<TableGroupCollapseChangeDetail>;\n  @Event() dsSelectionChange!: EventEmitter<TableSelectionChangeDetail>;\n  @Event() dsLoadMore!: EventEmitter<TableLoadMoreDetail>;\n  @Event() dsGroupLoadMore!: EventEmitter<TableGroupLoadMoreDetail>;\n  @Event() dsPaginationChange!: EventEmitter<PaginationChangeDetail>;\n  @Event() dsCellAction!: EventEmitter<TableCellActionDetail>;\n  @Event() dsRowActivate!: EventEmitter<TableRowActivateDetail>;\n  @Event() dsColumnsConfigChange!: EventEmitter<TableColumnsConfigChangeDetail>;\n  @Event() dsDataModeChange!: EventEmitter<TableDataModeChangeDetail>;\n\n  @State() private overflowStart = false;\n  @State() private overflowEnd = false;\n  @State() private scrollable = false;\n  @State() private announcement = '';\n  @State() private activeStickyGroupId: string | null = null;\n  @State() private viewportFitSettled = false;\n  @State() private headerPresent = false;\n  @State() private headerUsesToolbar = false;\n  @State() private footerSlotPresence = 0;\n  @State() private fitPageSize: number | undefined;\n  @State() private actionMenu: { rowId: string; columnId: string } | null = null;\n  @State() private actionMenuInitialFocusVisible = false;\n  @State() private truncateTooltipLabel = '';\n  @State() private captionCompact = false;\n  @State() private columnCustomizerOpen = false;\n  @State() private columnCustomizerInitialFocusVisible = false;\n  @State() private dataModeSwitcherOpen = false;\n  @State() private dataModeSwitcherInitialFocusVisible = false;\n  @State() private virtualWindow: TableVirtualPlan | null = null;\n\n  private readonly actionMenuElementId = nextTableActionMenuElementId();\n  private readonly columnCustomizerElementId = nextTableColumnCustomizerElementId();\n  private readonly dataModeSwitcherElementId = nextTableDataModeSwitcherElementId();\n  private truncateTooltipEl?: HTMLDsTooltipElement;\n  private truncateAnchor: HTMLElement | null = null;\n  private truncateTooltipBound = false;\n  private focusedRowId: string | null = null;\n  private virtualItems: TableVirtualItem[] = [];\n  private visibleColumnsCache: {\n    columns: TableColumn[];\n    columnCustomizer: boolean;\n    hiddenColumnIds: string[];\n    columnOrder: string[];\n    value: TableColumn[];\n  } | null = null;\n  private renderModelCache: {\n    columns: TableColumn[];\n    rows: TableRow[];\n    groups: TableGroup[];\n    grouped: boolean;\n    selectionMode: TableSelectionMode;\n    selectedRowIds: string[];\n    collapsedGroupIds: string[];\n    virtualCounts: boolean;\n    value: TableRenderModel;\n  } | null = null;\n  private virtualItemsCache: {\n    columns: TableColumn[];\n    rows: TableRow[];\n    groups: TableGroup[];\n    grouped: boolean;\n    collapsedGroupIds: string[];\n  } | null = null;\n  private rootEl: HTMLElement | null = null;\n  private viewportEl: HTMLElement | null = null;\n  private frameEl: HTMLElement | null = null;\n  private interactiveHeadEl: HTMLTableSectionElement | null = null;\n  private collapseAllOverlayEl: HTMLElement | null = null;\n  private stickyHeaderTableEl: HTMLTableElement | null = null;\n  private tableEl: HTMLTableElement | null = null;\n  private sentinelEl: HTMLElement | null = null;\n  private incrementalWindowActive = false;\n  private readonly groupSentinelEls = new Map<string, HTMLElement>();\n  private previousModelWarning = '';\n  private modelWarningQueued = false;\n  private hasLoaded = false;\n  private renderedModel: TableRenderModel | null = null;\n  private stickyGroupConnected = false;\n  private headerSlotObserver: MutationObserver | null = null;\n  private footerSlotObserver: MutationObserver | null = null;\n  private captionCompactDisconnect: (() => void) | undefined;\n  private fitResizeObserver: ResizeObserver | null = null;\n  private fitObservedViewport: HTMLElement | null = null;\n  private fitObservedTable: HTMLTableElement | null = null;\n  private fitMeasurementPending = false;\n  private readonly bodyRenderer = new TableBodyRenderer();\n  private readonly layoutController = new TableLayoutController({\n    elements: () => ({\n      viewport: this.viewportEl,\n      contentTable: 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.dataMode === 'infinite' && !this.grouped,\n      loadMoreMode: this.loadMoreMode,\n      hasMore: this.hasMore,\n      loadingMore: this.loadingMore,\n      loadMoreError: this.loadMoreError,\n      loadIdentity: this.loadIdentity,\n      loadMoreThreshold: this.loadMoreThreshold,\n      containedScroll: this.containedScroll,\n      loadingMoreLabel: this.loadingMoreLabel,\n      endOfResultsLabel: this.endOfResultsLabel,\n      rowsLoadedLabel: this.rowsLoadedLabel,\n      loadedRowCount: this.currentLoadedRowCount(),\n      viewport: this.viewportEl,\n      sentinel: this.sentinelEl,\n    }),\n    announce: message => {\n      this.announcement = message;\n    },\n    request: detail => {\n      this.dsLoadMore.emit(detail);\n    },\n  });\n  private readonly groupLoadController = new TableGroupLoadController({\n    state: () => ({\n      enabled: this.grouped && this.dataMode !== 'virtual',\n      loadMoreMode: this.loadMoreMode,\n      loadMoreThreshold: this.loadMoreThreshold,\n      containedScroll: this.containedScroll,\n      groups: this.groups,\n      viewport: this.viewportEl,\n      sentinels: this.groupSentinelEls,\n      loadingMoreLabel: this.groupLoadingMoreLabel,\n      endOfResultsLabel: this.groupEndOfResultsLabel,\n      rowsLoadedLabel: this.groupRowsLoadedLabel,\n    }),\n    announce: message => {\n      this.announcement = message;\n    },\n    request: detail => {\n      this.dsGroupLoadMore.emit(detail);\n    },\n  });\n  private readonly virtualController = new TableVirtualController({\n    state: () => ({\n      enabled: this.virtualizationEnabled,\n      items: this.virtualItems,\n      pinnedRowIds: this.virtualPinnedRowIds(),\n      viewport: this.viewportEl,\n      viewportSize: this.estimateVirtualViewportSize(),\n    }),\n    windowChanged: plan => {\n      this.virtualWindow = plan;\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    // Reserve the final viewport-fit height before the first paint. The fitted\n    // surface is connected after render, but the host can already resolve its\n    // owning scrollport and prevent an initial auto-height frame.\n    this.viewportFitController.connect();\n    this.incrementalWindowActive = this.hasIncrementalState;\n    this.syncHeaderSlotPresence();\n    this.syncFooterSlotPresence();\n    this.loadController.initialize();\n    this.groupLoadController.initialize();\n    this.warnModelIssues();\n  }\n\n  componentDidLoad(): void {\n    this.hasLoaded = true;\n    this.layoutController.connect();\n    this.loadController.connect();\n    this.groupLoadController.connect();\n    this.virtualController.connect();\n    this.viewportFitController.connect();\n    this.syncStickyGroupConnection();\n    this.connectHeaderSlotObserver();\n    this.connectFooterSlotObserver();\n    this.connectFitObserver();\n    this.connectCaptionCompactObserver();\n    this.syncFitPageSize();\n    this.connectTruncateTooltip();\n  }\n\n  componentDidRender(): void {\n    this.layoutController.refresh(false);\n    this.loadController.refresh();\n    this.groupLoadController.refresh();\n    this.virtualController.refresh();\n    this.virtualController.collectMeasurements(this.tableEl);\n    if (\n      this.dataMode === 'virtual' &&\n      this.truncateAnchor &&\n      this.tableEl &&\n      !this.tableEl.contains(this.truncateAnchor)\n    ) {\n      this.dismissTruncateTooltip();\n    }\n    this.viewportFitController.refresh(false);\n    this.syncStickyGroupConnection();\n    this.connectFitObserver();\n    this.connectCaptionCompactObserver();\n    this.syncFitPageSize();\n    if (this.stickyGroupConnected) this.updateStickyGroup();\n  }\n\n  connectedCallback(): void {\n    if (!this.hasLoaded) return;\n    this.layoutController.connect();\n    this.loadController.connect();\n    this.groupLoadController.connect();\n    this.virtualController.connect();\n    this.viewportFitController.connect();\n    this.syncStickyGroupConnection();\n    this.connectHeaderSlotObserver();\n    this.connectFooterSlotObserver();\n    this.connectFitObserver();\n    this.connectCaptionCompactObserver();\n    this.connectTruncateTooltip();\n  }\n\n  disconnectedCallback(): void {\n    this.layoutController.disconnect();\n    this.loadController.disconnect();\n    this.groupLoadController.disconnect();\n    this.virtualController.disconnect();\n    this.viewportFitController.disconnect();\n    this.disconnectStickyGroup();\n    this.headerSlotObserver?.disconnect();\n    this.headerSlotObserver = null;\n    this.footerSlotObserver?.disconnect();\n    this.footerSlotObserver = null;\n    this.disconnectFitObserver();\n    this.disconnectCaptionCompactObserver();\n    this.disconnectTruncateTooltip();\n    this.closeColumnCustomizer();\n  }\n\n  private syncHeaderSlotPresence = () => {\n    const header = this.el.querySelector<HTMLElement>('[slot=\"header\"]');\n    this.headerPresent = !!header;\n    this.headerUsesToolbar = header?.tagName === 'DS-TABLE-TOOLBAR';\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 syncFooterSlotPresence = () => {\n    let presence = 0;\n    if (hasOwnedTableFooterSlot(this.el, 'footer-leading')) presence |= TABLE_FOOTER_SLOT_LEADING;\n    if (hasOwnedTableFooterSlot(this.el, 'footer')) presence |= TABLE_FOOTER_SLOT_COPY;\n    if (hasOwnedTableFooterSlot(this.el, 'footer-trailing')) presence |= TABLE_FOOTER_SLOT_TRAILING;\n    if (presence !== this.footerSlotPresence) this.footerSlotPresence = presence;\n  };\n\n  private connectFooterSlotObserver(): void {\n    if (this.footerSlotObserver || typeof MutationObserver === 'undefined') return;\n    this.footerSlotObserver = new MutationObserver(this.syncFooterSlotPresence);\n    this.footerSlotObserver.observe(this.el, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['slot'],\n    });\n    this.syncFooterSlotPresence();\n  }\n\n  private connectStickyGroup(): void {\n    if (this.stickyGroupConnected || typeof window === 'undefined') return;\n    this.stickyGroupConnected = true;\n    document.addEventListener('scroll', this.updateStickyGroup, {\n      capture: true,\n      passive: true,\n    });\n    window.addEventListener('resize', this.updateStickyGroup, { passive: true });\n    this.updateStickyGroup();\n  }\n\n  private syncStickyGroupConnection(): void {\n    if (this.documentStickyHeader && this.grouped) {\n      this.connectStickyGroup();\n      return;\n    }\n\n    this.disconnectStickyGroup();\n    this.frameEl?.style.removeProperty('--_table-sticky-group-top');\n    if (this.activeStickyGroupId !== null) {\n      this.activeStickyGroupId = null;\n    }\n  }\n\n  private disconnectStickyGroup(): void {\n    if (!this.stickyGroupConnected || typeof window === 'undefined') return;\n    this.stickyGroupConnected = false;\n    document.removeEventListener('scroll', this.updateStickyGroup, true);\n    window.removeEventListener('resize', this.updateStickyGroup);\n  }\n\n  private readonly updateStickyGroup = (): void => {\n    if (!this.documentStickyHeader || !this.grouped || !this.frameEl || !this.tableEl) {\n      if (this.activeStickyGroupId !== null) this.activeStickyGroupId = null;\n      return;\n    }\n\n    const stickyHeader = this.frameEl.querySelector<HTMLElement>(\n      '.ds-table__document-sticky-header'\n    );\n    if (!stickyHeader) return;\n    const threshold = stickyHeader.getBoundingClientRect().bottom;\n    let activeGroupId: string | null = null;\n    let activeGroupTop = threshold;\n    for (const body of this.tableEl.querySelectorAll<HTMLElement>('tbody[data-group-id]')) {\n      const source = body.querySelector<HTMLElement>('.ds-table__group-cell');\n      if (!source) continue;\n      const sourceRect = source.getBoundingClientRect();\n      const bodyRect = body.getBoundingClientRect();\n      if (sourceRect.top <= threshold && bodyRect.bottom > threshold) {\n        activeGroupId = body.dataset.groupId ?? null;\n        // A sticky section is bounded by its own row group. As that boundary\n        // approaches the sticky lane, move the outgoing section bar with it so\n        // the incoming source bar pushes it away instead of rendering beneath it.\n        activeGroupTop = Math.min(threshold, bodyRect.bottom - sourceRect.height);\n      }\n    }\n\n    const frameRect = this.frameEl.getBoundingClientRect();\n    this.frameEl.style.setProperty(\n      '--_table-sticky-group-top',\n      `${activeGroupTop - frameRect.top}px`\n    );\n\n    if (activeGroupId !== this.activeStickyGroupId) {\n      this.activeStickyGroupId = activeGroupId;\n      return;\n    }\n  };\n\n  @Watch('columns')\n  @Watch('grouping')\n  @Watch('hiddenColumnIds')\n  @Watch('columnOrder')\n  @Watch('columnCustomizer')\n  handleStructureChange(): void {\n    this.scheduleModelIssueWarning();\n    this.loadController.structureChanged();\n    this.groupLoadController.structureChanged();\n    this.virtualController.invalidateMeasures();\n  }\n\n  @Watch('rows')\n  @Watch('groups')\n  handleDataChange(): void {\n    if (this.grouped) this.groupLoadController.dataChanged();\n    else this.loadController.dataChanged();\n    this.scheduleModelIssueWarning();\n    this.syncActionMenu();\n    this.virtualController.invalidateMeasures();\n  }\n\n  @Watch('totalCount')\n  handleTotalCountChange(): void {\n    this.scheduleModelIssueWarning();\n  }\n\n  @Watch('loadIdentity')\n  handleLoadIdentityChange(): void {\n    this.incrementalWindowActive = this.hasIncrementalState;\n    this.loadController.identityChanged();\n    this.virtualController.resetToTop();\n  }\n\n  @Watch('sort')\n  @Watch('grouping')\n  handleVirtualIndexReset(): void {\n    this.virtualController.resetToTop();\n  }\n\n  @Watch('loadMoreMode')\n  @Watch('loadMoreThreshold')\n  handleLazyConfigurationChange(): void {\n    this.loadController.configurationChanged();\n    this.groupLoadController.configurationChanged();\n  }\n\n  @Watch('dataMode')\n  handleDataModeChange(): void {\n    this.incrementalWindowActive = this.hasIncrementalState;\n    this.scheduleModelIssueWarning();\n    this.handleLazyConfigurationChange();\n    if (this.dataMode === 'virtual') this.virtualController.resetToTop();\n  }\n\n  @Watch('pagination')\n  handlePaginationChange(\n    pagination: TablePaginationState | null,\n    previous: TablePaginationState | null\n  ): void {\n    if (pagination?.pageSizeMode === 'fit' && pagination.fitIdentity !== previous?.fitIdentity) {\n      this.fitMeasurementPending = true;\n    }\n  }\n\n  @Watch('loadingMore')\n  handleLoadingMoreChange(loading: boolean): void {\n    if (loading) this.incrementalWindowActive = true;\n    if (!this.grouped) this.loadController.loadingChanged(loading);\n  }\n\n  @Watch('loadMoreError')\n  handleLoadMoreErrorChange(error: string | undefined): void {\n    if (error?.trim()) this.incrementalWindowActive = true;\n    if (!this.grouped) this.loadController.errorChanged(error);\n  }\n\n  @Watch('hasMore')\n  handleHasMoreChange(hasMore: boolean, hadMore: boolean): void {\n    if (hasMore) this.incrementalWindowActive = true;\n    if (!this.grouped) this.loadController.hasMoreChanged(hasMore, hadMore);\n  }\n\n  @Watch('columnCustomizer')\n  @Watch('captionVisibility')\n  handleColumnCustomizerAvailability(): void {\n    if (!this.showsColumnCustomizer) this.closeColumnCustomizer();\n  }\n\n  @Watch('dataModeSwitcher')\n  @Watch('captionVisibility')\n  handleDataModeSwitcherAvailability(): void {\n    if (!this.showsDataModeSwitcher) this.closeDataModeSwitcher();\n  }\n\n  @Watch('chromeLoading')\n  handleChromeLoadingChange(loading: boolean): void {\n    if (!loading) return;\n    this.closeColumnCustomizer();\n    this.closeDataModeSwitcher();\n  }\n\n  private get grouped(): boolean {\n    return this.grouping !== null;\n  }\n\n  private get hasIncrementalState(): boolean {\n    return (\n      this.dataMode === 'infinite' &&\n      (this.hasMore || this.loadingMore || !!this.loadMoreError?.trim())\n    );\n  }\n\n  private get selectable(): boolean {\n    return this.selectionMode === 'multiple';\n  }\n\n  private get visibleColumns(): TableColumn[] {\n    const cached = this.visibleColumnsCache;\n    if (\n      cached &&\n      cached.columns === this.columns &&\n      cached.columnCustomizer === this.columnCustomizer &&\n      cached.hiddenColumnIds === this.hiddenColumnIds &&\n      cached.columnOrder === this.columnOrder\n    ) {\n      return cached.value;\n    }\n    const value = resolveTableVisibleColumns(this.columns, {\n      columnCustomizer: this.columnCustomizer,\n      hiddenColumnIds: this.hiddenColumnIds,\n      columnOrder: this.columnOrder,\n    });\n    this.visibleColumnsCache = {\n      columns: this.columns,\n      columnCustomizer: this.columnCustomizer,\n      hiddenColumnIds: this.hiddenColumnIds,\n      columnOrder: this.columnOrder,\n      value,\n    };\n    return value;\n  }\n\n  private get showsColumnCustomizer(): boolean {\n    return this.columnCustomizer && this.captionVisibility === 'visible';\n  }\n\n  private get showsDataModeSwitcher(): boolean {\n    return this.dataModeSwitcher && this.captionVisibility === 'visible';\n  }\n\n  private get showsCaptionTrailing(): boolean {\n    return this.showsDataModeSwitcher || this.showsColumnCustomizer;\n  }\n\n  private get documentStickyHeader(): boolean {\n    return this.stickyHeader && !this.containedScroll;\n  }\n\n  private get fixedHeight(): boolean {\n    return !this.fitViewport && this.resolvedHeight !== undefined;\n  }\n\n  private get boundedComposition(): boolean {\n    return this.fitViewport || this.fixedHeight;\n  }\n\n  private get containedScroll(): boolean {\n    return this.boundedComposition || this.resolvedMaxHeight !== undefined;\n  }\n\n  private connectFitObserver(): void {\n    if (typeof ResizeObserver === 'undefined') return;\n    if (this.fitObservedViewport === this.viewportEl && this.fitObservedTable === this.tableEl) {\n      return;\n    }\n    this.disconnectFitObserver();\n    this.fitObservedViewport = this.viewportEl;\n    this.fitObservedTable = this.tableEl;\n    this.fitResizeObserver = new ResizeObserver(this.syncFitPageSize);\n    if (this.fitObservedViewport) this.fitResizeObserver.observe(this.fitObservedViewport);\n    if (this.fitObservedTable) this.fitResizeObserver.observe(this.fitObservedTable);\n  }\n\n  private disconnectFitObserver(): void {\n    this.fitResizeObserver?.disconnect();\n    this.fitResizeObserver = null;\n    this.fitObservedViewport = null;\n    this.fitObservedTable = null;\n  }\n\n  private connectCaptionCompactObserver(): void {\n    if (this.captionCompactDisconnect) return;\n    this.captionCompactDisconnect = observeTableCaptionCompact(this.el, compact => {\n      if (this.captionCompact !== compact) this.captionCompact = compact;\n    });\n  }\n\n  private disconnectCaptionCompactObserver(): void {\n    this.captionCompactDisconnect?.();\n    this.captionCompactDisconnect = undefined;\n  }\n\n  private readonly syncFitPageSize = (): void => {\n    const pagination = this.dataMode === 'pagination' ? this.pagination : null;\n    if (\n      !pagination?.fitToPage ||\n      pagination.fitToPageInactive ||\n      !this.containedScroll ||\n      !this.viewportEl ||\n      !this.tableEl\n    ) {\n      if (this.fitPageSize !== undefined) this.fitPageSize = undefined;\n      this.fitMeasurementPending = false;\n      return;\n    }\n    const header = this.tableEl.querySelector<HTMLElement>('.ds-table__head .ds-table__header-row');\n    const item = this.tableEl.querySelector<HTMLElement>(\n      this.grouped ? '.ds-table__group-row' : '.ds-table__body .ds-table__row'\n    );\n    const itemBlockSize =\n      item?.getBoundingClientRect().height ||\n      resolveCssLengthPx(\n        'var(--ds-table-row-min-block-size, var(--dimension-size-500))',\n        0,\n        this.rootEl ?? this.el\n      );\n    const next = resolveTableFitPageSize({\n      viewportBlockSize: this.viewportEl.clientHeight,\n      headerBlockSize: header?.getBoundingClientRect().height ?? 0,\n      itemBlockSize,\n    });\n    if (next !== this.fitPageSize) this.fitPageSize = next;\n    if (!this.fitMeasurementPending || pagination.pageSizeMode !== 'fit' || next === undefined) {\n      return;\n    }\n    this.fitMeasurementPending = false;\n    if (next === pagination.pageSize && pagination.pageIndex === 0) return;\n    this.dsPaginationChange.emit({\n      pageIndex: 0,\n      pageSize: next,\n      pageSizeMode: 'fit',\n      totalItems: pagination.totalItems,\n      pageSizeOptions: pagination.pageSizeOptions ?? [25, 50, 100, 200],\n      fitToPage: true,\n      fitToPageInactive: false,\n      fitPageSize: next,\n      fitPageSizeLabel: pagination.fitPageSizeLabel ?? 'Fit to page',\n      fitPageSizeTriggerLabel: pagination.fitPageSizeTriggerLabel ?? 'Fit',\n      itemLabel: pagination.itemLabel ?? 'items',\n      pageSizeLabel: pagination.pageSizeLabel ?? 'Items',\n      ariaLabel: pagination.ariaLabel ?? `${this.caption} pagination`,\n      showFirstLastButtons: pagination.showFirstLastButtons ?? false,\n      previousPageIndex: pagination.pageIndex,\n      previousPageSize: pagination.pageSize,\n      previousPageSizeMode: 'fit',\n      reason: 'fit',\n    });\n  };\n\n  @Listen('keydown', { target: 'window' })\n  handleWindowPaginationKeyDown(event: KeyboardEvent): void {\n    this.handlePaginationKeyDown(event, true);\n  }\n\n  private handlePaginationKeyDown(event: KeyboardEvent, fromWindow = false): void {\n    const pagination = this.dataMode === 'pagination' ? this.pagination : null;\n    if (\n      !pagination ||\n      this.loading ||\n      event.defaultPrevented ||\n      event.altKey ||\n      event.ctrlKey ||\n      event.metaKey ||\n      event.shiftKey ||\n      (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')\n    ) {\n      return;\n    }\n\n    if (paginationShortcutBlockedByPath(event.composedPath())) return;\n\n    if (fromWindow) {\n      const origin = event.composedPath()[0];\n      const originNode = origin instanceof Text ? origin.parentNode : origin;\n      if (\n        !shouldHandleContainingPagePaginationShortcut({\n          origin: originNode,\n          table: this.el,\n          eventPath: event.composedPath(),\n        })\n      ) {\n        return;\n      }\n    }\n\n    const state = resolvePaginationState(pagination);\n    const pageIndex = event.key === 'ArrowLeft' ? state.pageIndex - 1 : state.pageIndex + 1;\n    if (pageIndex < 0 || pageIndex >= state.totalPages) return;\n\n    event.preventDefault();\n    this.dsPaginationChange.emit({\n      pageIndex,\n      pageSize: state.pageSize,\n      pageSizeMode: state.pageSizeMode,\n      totalItems: state.totalItems,\n      pageSizeOptions: state.pageSizeOptions,\n      fitToPage: pagination.fitToPage ?? false,\n      fitToPageInactive: pagination.fitToPageInactive ?? false,\n      fitPageSize: this.fitPageSize ?? pagination.fitPageSize,\n      fitPageSizeLabel: pagination.fitPageSizeLabel ?? 'Fit to page',\n      fitPageSizeTriggerLabel: pagination.fitPageSizeTriggerLabel ?? 'Fit',\n      itemLabel: pagination.itemLabel ?? 'items',\n      pageSizeLabel: pagination.pageSizeLabel ?? 'Items',\n      ariaLabel: pagination.ariaLabel ?? `${this.caption} pagination`,\n      showFirstLastButtons: pagination.showFirstLastButtons ?? false,\n      previousPageIndex: state.pageIndex,\n      previousPageSize: state.pageSize,\n      previousPageSizeMode: state.pageSizeMode,\n      reason: 'page',\n    });\n  }\n\n  private currentLoadedRows(): TableRow[] {\n    return tableRows(this.rows, this.groups, this.grouped);\n  }\n\n  private currentLoadedRowCount(): number {\n    return this.grouped\n      ? this.groups.reduce((count, group) => count + group.rows.length, 0)\n      : this.rows.length;\n  }\n\n  private createRenderModel(): TableRenderModel {\n    const columns = this.visibleColumns;\n    const grouped = this.grouped;\n    const virtualCounts = this.dataMode === 'virtual';\n    const cached = this.renderModelCache;\n    if (\n      cached &&\n      cached.columns === columns &&\n      cached.rows === this.rows &&\n      cached.groups === this.groups &&\n      cached.grouped === grouped &&\n      cached.selectionMode === this.selectionMode &&\n      cached.selectedRowIds === this.selectedRowIds &&\n      cached.collapsedGroupIds === this.collapsedGroupIds &&\n      cached.virtualCounts === virtualCounts\n    ) {\n      return cached.value;\n    }\n    const value = createTableRenderModel({\n      columns,\n      rows: this.rows,\n      groups: this.groups,\n      grouped,\n      selectionMode: this.selectionMode,\n      selectedRowIds: this.selectedRowIds,\n      collapsedGroupIds: this.collapsedGroupIds,\n      groupCountPresentation: virtualCounts ? 'total' : 'loaded-progress',\n    });\n    this.renderModelCache = {\n      columns,\n      rows: this.rows,\n      groups: this.groups,\n      grouped,\n      selectionMode: this.selectionMode,\n      selectedRowIds: this.selectedRowIds,\n      collapsedGroupIds: this.collapsedGroupIds,\n      virtualCounts,\n      value,\n    };\n    return value;\n  }\n\n  private get virtualizationEnabled(): boolean {\n    return this.dataMode === 'virtual' && this.hasVirtualViewportBounds;\n  }\n\n  private get virtualViewportMissing(): boolean {\n    return this.dataMode === 'virtual' && !this.hasVirtualViewportBounds;\n  }\n\n  private get hasVirtualViewportBounds(): boolean {\n    return this.containedScroll && this.estimateVirtualViewportSize() > 0;\n  }\n\n  private estimateVirtualViewportSize(): number {\n    const measured =\n      this.virtualController.currentViewportSize() || this.viewportEl?.clientHeight || 0;\n    const chrome =\n      (this.captionVisibility === 'visible' ? 48 : 0) + (this.hasResultFooter ? 48 : 0);\n    if (this.fixedHeight && this.resolvedHeight) {\n      if (measured > 0) return measured;\n      return Math.max(\n        0,\n        resolveCssLengthPx(this.resolvedHeight, 0, this.rootEl ?? this.el) - chrome\n      );\n    }\n    if (this.fitViewport) return Math.max(0, measured);\n    if (this.resolvedMaxHeight) {\n      if (this.resolvedMaxHeight.trim().toLowerCase() === 'none') return 0;\n      return resolveCssLengthPx(this.resolvedMaxHeight, 0, this.rootEl ?? this.el);\n    }\n    return 0;\n  }\n\n  private virtualPinnedRowIds(): Set<string> {\n    const pinned = new Set<string>();\n    if (this.focusedRowId) pinned.add(this.focusedRowId);\n    if (this.actionMenu?.rowId) pinned.add(this.actionMenu.rowId);\n    return pinned;\n  }\n\n  private syncVirtualItems(model: TableRenderModel): void {\n    if (this.dataMode !== 'virtual') {\n      this.virtualItems = [];\n      this.virtualItemsCache = null;\n      this.bodyRenderer.resetVirtualState();\n      return;\n    }\n    const columns = this.visibleColumns;\n    const cached = this.virtualItemsCache;\n    if (\n      cached &&\n      cached.columns === columns &&\n      cached.rows === this.rows &&\n      cached.groups === this.groups &&\n      cached.grouped === model.grouped &&\n      cached.collapsedGroupIds === this.collapsedGroupIds\n    ) {\n      return;\n    }\n    this.virtualItems = flattenTableVirtualItems({\n      grouped: model.grouped,\n      rows: this.rows,\n      groups: this.groups,\n      collapsedGroupIds: this.collapsedGroupIds,\n      columns,\n    });\n    this.virtualItemsCache = {\n      columns,\n      rows: this.rows,\n      groups: this.groups,\n      grouped: model.grouped,\n      collapsedGroupIds: this.collapsedGroupIds,\n    };\n  }\n\n  private shouldVirtualize(model: TableRenderModel): boolean {\n    return (\n      this.virtualizationEnabled && (model.hasData || (model.grouped && model.groups.length > 0))\n    );\n  }\n\n  private get resolvedMaxHeight(): string | undefined {\n    if (this.maxHeight == null || this.maxHeight === '') return undefined;\n    return typeof this.maxHeight === 'number' ? `${Math.max(0, this.maxHeight)}px` : this.maxHeight;\n  }\n\n  private get resolvedHeight(): string | undefined {\n    if (this.height == null || this.height === '') return undefined;\n    return typeof this.height === 'number' ? `${Math.max(0, this.height)}px` : this.height;\n  }\n\n  private warnModelIssues(): void {\n    const issues = tableModelIssues(this.columns, this.rows, this.groups, this.grouped);\n    const visibleColumns = this.visibleColumns;\n    if (!this.caption?.trim()) issues.unshift('A non-empty caption is required.');\n    if (this.grouping) {\n      const groupingColumn = this.columns.find(column => column.id === this.grouping!.columnId);\n      if (!groupingColumn) {\n        issues.push(`Grouping references unknown column id: ${this.grouping.columnId}`);\n      } else if (!visibleColumns.some(column => column.id === groupingColumn.id)) {\n        issues.push(`Grouping references hidden column id: ${this.grouping.columnId}`);\n      }\n    }\n    if (this.sort) {\n      const sortColumn = this.columns.find(\n        column =>\n          column.id === this.sort!.columnId ||\n          column.headerSegments?.some(segment => segment.sortKey === this.sort!.columnId)\n      );\n      if (!sortColumn) {\n        issues.push(`Sorting references unknown column id: ${this.sort.columnId}`);\n      } else if (!visibleColumns.some(column => column.id === sortColumn.id)) {\n        issues.push(`Sorting references hidden column id: ${this.sort.columnId}`);\n      }\n    }\n    if (\n      this.dataMode === 'virtual' &&\n      Number.isFinite(this.totalCount) &&\n      Math.max(0, Math.trunc(this.totalCount!)) !== this.currentLoadedRowCount()\n    ) {\n      issues.push('Virtual mode requires totalCount to match the complete supplied row count.');\n    }\n    const stickyStart = visibleColumns.filter(column => column.sticky === 'start');\n    const stickyEnd = visibleColumns.filter(column => column.sticky === 'end');\n    if (stickyStart.length > 1 || (this.selectable && stickyStart.length > 0)) {\n      issues.push(\n        'Only one sticky start column is supported, and row selection already owns that lane.'\n      );\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))\n        issues.push(`Sticky column ${column.id} requires an explicit size.`);\n    }\n    const message = issues.join(' ');\n    if (!message) {\n      this.previousModelWarning = '';\n      return;\n    }\n    if (message === this.previousModelWarning) return;\n    this.previousModelWarning = message;\n    console.warn(`[ds-table] ${message}`);\n  }\n\n  private scheduleModelIssueWarning(): void {\n    if (this.modelWarningQueued) return;\n    this.modelWarningQueued = true;\n    queueMicrotask(() => {\n      this.modelWarningQueued = false;\n      this.warnModelIssues();\n    });\n  }\n\n  private emitSort(column: TableColumn, sortKey = column.id): void {\n    if (!column.sortable) return;\n    this.dsSortChange.emit({ sort: nextTableSortState(this.sort, sortKey) });\n  }\n\n  private sortButtonLabel(column: TableColumn, sortKey = column.id, label = column.header): string {\n    if (this.sort?.columnId !== sortKey) return `Sort ${label} ascending`;\n    if (this.sort.direction === 'asc') return `Sort ${label} descending. Currently ascending.`;\n    return `Sort ${label} ascending. Currently descending.`;\n  }\n\n  private emitRowSelection(row: TableRow): void {\n    const next = toggleTableRowSelection(this.selectedRowIds, row);\n    const selected = next.includes(row.id);\n    this.dsSelectionChange.emit({\n      selectedRowIds: next,\n      scope: 'row',\n      changedRowId: row.id,\n      selected,\n    });\n  }\n\n  private emitAllSelection(): void {\n    const loadedRows = this.currentLoadedRows();\n    const selection = deriveTableSelectionState(loadedRows, this.selectedRowIds);\n    this.dsSelectionChange.emit({\n      selectedRowIds: toggleAllLoadedTableRows(this.selectedRowIds, loadedRows),\n      scope: 'all-loaded',\n      selected: !selection.allSelected,\n    });\n  }\n\n  private emitGroupSelection(group: TableGroup): void {\n    const state = deriveTableSelectionState(group.rows, this.selectedRowIds);\n    this.dsSelectionChange.emit({\n      selectedRowIds: toggleTableGroupSelection(this.selectedRowIds, group.rows),\n      scope: 'group',\n      groupId: group.id,\n      selected: !state.allSelected,\n    });\n  }\n\n  private rowEventOwnsActivation(event: Event): boolean {\n    const currentTarget = event.currentTarget;\n    return !event.composedPath().some(target => {\n      if (!(target instanceof HTMLElement) || target === currentTarget) return false;\n      return target.matches(\n        'button, a, input, select, textarea, [role=\"button\"], [role=\"checkbox\"], [popover], ds-button-unfilled, ds-menu'\n      );\n    });\n  }\n\n  private emitRowActivation(row: TableRow, event: Event): void {\n    if (!row.interactive || row.disabled || !this.rowEventOwnsActivation(event)) return;\n    this.dsRowActivate.emit({ rowId: row.id });\n  }\n\n  private syncActionMenu(): void {\n    if (!this.actionMenu) return;\n    const row = tableRows(this.rows, this.groups, this.grouped).find(\n      candidate => candidate.id === this.actionMenu?.rowId\n    );\n    const value = row && !row.disabled ? row.cells[this.actionMenu.columnId] : undefined;\n    if (!isTableCellAction(value) || !isRenderableTableActionMenu(value)) {\n      this.actionMenu = null;\n    }\n  }\n\n  private closeActionMenu(): void {\n    this.actionMenu = null;\n  }\n\n  private handleActionMenuSelect(item: MenuItemData): void {\n    const open = this.actionMenu;\n    const actionId = item.value;\n    if (!open || !actionId || item.isInactive) return;\n    this.dsCellAction.emit({\n      actionId,\n      rowId: open.rowId,\n      columnId: open.columnId,\n    });\n    const triggerId = tableActionTriggerId(this.actionMenuElementId, open.rowId, open.columnId);\n    this.closeActionMenu();\n    requestAnimationFrame(() => {\n      const trigger = this.el.querySelector<HTMLElement & { setFocus?: () => void }>(\n        `#${CSS.escape(triggerId)}`\n      );\n      trigger?.setFocus?.();\n    });\n  }\n\n  private toggleActionMenu(row: TableRow, column: TableColumn, event: MouseEvent): void {\n    if (row.disabled) return;\n    const open = this.actionMenu?.rowId === row.id && this.actionMenu?.columnId === column.id;\n    this.actionMenuInitialFocusVisible = event.detail === 0;\n    this.actionMenu = open ? null : { rowId: row.id, columnId: column.id };\n  }\n\n  private renderOverflowActionMenu() {\n    const open = this.actionMenu;\n    const row = open\n      ? tableRows(this.rows, this.groups, this.grouped).find(\n          candidate => candidate.id === open.rowId\n        )\n      : undefined;\n    const value = row && open ? row.cells[open.columnId] : undefined;\n    const menu = isTableCellAction(value) && isRenderableTableActionMenu(value) ? value : undefined;\n    const sections = menu ? tableActionMenuSections(menu.items) : [];\n    const triggerId = open\n      ? tableActionTriggerId(this.actionMenuElementId, open.rowId, open.columnId)\n      : undefined;\n\n    return (\n      <ds-menu\n        id={this.actionMenuElementId}\n        open={Boolean(open && sections.length)}\n        anchorId={triggerId}\n        align=\"end\"\n        side=\"bottom\"\n        menuLabel={menu?.ariaLabel ?? 'More actions'}\n        initialFocusVisible={this.actionMenuInitialFocusVisible}\n        sections={sections}\n        onDsClose={() => this.closeActionMenu()}\n        onDsSelect={event => this.handleActionMenuSelect(event.detail)}\n      />\n    );\n  }\n\n  private connectTruncateTooltip(): void {\n    if (this.truncateTooltipBound) return;\n    this.el.addEventListener('pointerover', this.onTruncatePointerOver);\n    this.el.addEventListener('pointerout', this.onTruncatePointerOut);\n    this.el.addEventListener('focusin', this.onTruncateFocusIn);\n    this.el.addEventListener('focusout', this.onTruncateFocusOut);\n    this.truncateTooltipBound = true;\n  }\n\n  private disconnectTruncateTooltip(): void {\n    if (!this.truncateTooltipBound) return;\n    this.el.removeEventListener('pointerover', this.onTruncatePointerOver);\n    this.el.removeEventListener('pointerout', this.onTruncatePointerOut);\n    this.el.removeEventListener('focusin', this.onTruncateFocusIn);\n    this.el.removeEventListener('focusout', this.onTruncateFocusOut);\n    this.truncateTooltipBound = false;\n    this.dismissTruncateTooltip();\n  }\n\n  private onTruncatePointerOver = (event: PointerEvent) => {\n    if (event.pointerType === 'touch') return;\n    const track = resolveTableTruncateTrack(event.target);\n    if (!track) return;\n    this.presentOrDismissTruncateTrack(track);\n  };\n\n  private onTruncatePointerOut = (event: PointerEvent) => {\n    if (event.pointerType === 'touch') return;\n    if (resolveTableTruncateTrack(event.relatedTarget)) return;\n    const next = event.relatedTarget;\n    const cell = this.truncateAnchor?.closest('.ds-table__cell');\n    if (cell && next instanceof Node && cell.contains(next)) return;\n    this.dismissTruncateTooltip();\n  };\n\n  private onTruncateFocusIn = (event: FocusEvent) => {\n    const track = resolveTableTruncateTrack(event.target);\n    if (!track) {\n      this.dismissTruncateTooltip();\n      return;\n    }\n    this.presentOrDismissTruncateTrack(track);\n  };\n\n  private onTruncateFocusOut = (event: FocusEvent) => {\n    if (resolveTableTruncateTrack(event.relatedTarget)) return;\n    this.dismissTruncateTooltip();\n  };\n\n  private presentOrDismissTruncateTrack(track: HTMLElement): void {\n    if (!isElementTruncated(track)) {\n      this.dismissTruncateTooltip();\n      return;\n    }\n    const label = tableTruncateLabel(track);\n    if (!label) {\n      this.dismissTruncateTooltip();\n      return;\n    }\n    this.truncateAnchor = track;\n    this.truncateTooltipLabel = label;\n    void this.truncateTooltipEl?.presentFrom(track, label);\n  }\n\n  private dismissTruncateTooltip(): void {\n    this.truncateAnchor = null;\n    if (!this.truncateTooltipLabel && !this.truncateTooltipEl) return;\n    this.truncateTooltipLabel = '';\n    void this.truncateTooltipEl?.dismiss();\n  }\n\n  private renderTruncateTooltip() {\n    return (\n      <ds-tooltip\n        ref={element => {\n          this.truncateTooltipEl = element;\n        }}\n        label={this.truncateTooltipLabel}\n        describedBy={false}\n        wrapLabel={true}\n        size=\"sm\"\n        delay={0}\n        side=\"top\"\n      />\n    );\n  }\n\n  private handleRowKeydown(row: TableRow, event: KeyboardEvent): void {\n    if (event.target !== event.currentTarget || (event.key !== 'Enter' && event.key !== ' '))\n      return;\n    event.preventDefault();\n    this.emitRowActivation(row, event);\n  }\n\n  private onVirtualFocusIn = (event: FocusEvent): void => {\n    const target = event.target;\n    if (!(target instanceof HTMLElement)) return;\n    const row = target.closest('[data-row-id]');\n    const id = row?.getAttribute('data-row-id') ?? null;\n    if (id === this.focusedRowId) return;\n    this.focusedRowId = id;\n    if (this.virtualizationEnabled) this.virtualController.schedule();\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 class={`ds-table__sticky-edge ds-table__sticky-edge--${sticky}`} aria-hidden=\"true\" />\n    );\n  }\n\n  private renderCollapseAllButton() {\n    return (\n      <ds-button-unfilled\n        class=\"ds-table__collapse-all\"\n        variant=\"icon\"\n        icon=\"ChevronDownUp\"\n        size=\"xs\"\n        style={{ width: 'var(--dimension-size-300)' }}\n        aria-label=\"Collapse all groups\"\n        hasBorder={false}\n        activeFill={false}\n        pressScale={false}\n        onDsClick={event => {\n          event.stopPropagation();\n          this.emitAllGroupsCollapse();\n        }}\n      />\n    );\n  }\n\n  private renderFloatingCollapseAll(model: TableRenderModel) {\n    if (model.collapseAllHost?.mode !== 'floating') return null;\n    return (\n      <span\n        class=\"ds-table__collapse-all-overlay\"\n        ref={element => {\n          this.collapseAllOverlayEl = element ?? null;\n        }}\n      >\n        <span class=\"ds-table__collapse-all-surface ds-control-elevation ds-control-elevation--md\">\n          {this.renderCollapseAllButton()}\n        </span>\n      </span>\n    );\n  }\n\n  private renderColumnHeader(\n    column: TableColumn,\n    model: TableRenderModel,\n    interactive = true,\n    presentational = false\n  ) {\n    const groupedColumn = this.grouping?.columnId === column.id;\n    const headerSegments = column.headerSegments?.length\n      ? column.headerSegments\n      : [{ label: column.header, sortKey: column.id }];\n    const activeMemberSegment = headerSegments.find(\n      segment => segment.sortKey === this.sort?.columnId\n    );\n    const activeMemberSort = !!activeMemberSegment;\n    const activeSort = activeMemberSort;\n    const align = column.align ?? 'start';\n    const direction = activeMemberSort ? this.sort!.direction : undefined;\n    const memberAriaSort = activeMemberSort\n      ? this.sort!.direction === 'asc'\n        ? 'ascending'\n        : 'descending'\n      : undefined;\n\n    const help = column.help?.trim();\n    const labels = (\n      <span\n        class=\"ds-table__header-labels\"\n        tabIndex={interactive && help && !column.sortable ? 0 : undefined}\n        data-header-help={help ? '' : undefined}\n      >\n        {headerSegments.map((segment, index) => {\n          const segmentActive = activeMemberSegment?.sortKey === segment.sortKey;\n          const segmentInteractive = interactive && !!column.sortable;\n          const label = (\n            <ds-text\n              class=\"ds-table__header-label-box ds-control-label-box\"\n              as=\"span\"\n              variant=\"text-caption\"\n              emphasis={segmentActive}\n              color=\"inherit\"\n              decoration={help ? 'dotted-underline' : undefined}\n              lineTruncation={1}\n            >\n              {segment.label}\n            </ds-text>\n          );\n          const control = segmentInteractive ? (\n            <button\n              class=\"ds-table__header-label ds-table__header-label--interactive ds-focus-ring\"\n              type=\"button\"\n              aria-label={this.sortButtonLabel(column, segment.sortKey, segment.label)}\n              data-sort-control=\"label\"\n              data-sort-key={segment.sortKey}\n              data-sort-active={segmentActive ? 'true' : undefined}\n              onClick={() => this.emitSort(column, segment.sortKey)}\n            >\n              {label}\n            </button>\n          ) : (\n            <span class=\"ds-table__header-label ds-table__header-static\">{label}</span>\n          );\n\n          return (\n            <span class=\"ds-table__header-segment\" key={segment.sortKey}>\n              {control}\n              {index < headerSegments.length - 1 && (\n                <ds-text\n                  class=\"ds-table__header-separator\"\n                  as=\"span\"\n                  variant=\"text-caption\"\n                  color=\"tertiary\"\n                  aria-hidden=\"true\"\n                >\n                  {segment.separator ?? '/'}\n                </ds-text>\n              )}\n            </span>\n          );\n        })}\n      </span>\n    );\n    const labelControl =\n      interactive && help ? (\n        <ds-tooltip label={help} side=\"top\" size=\"sm\" wrapLabel={true}>\n          {labels}\n        </ds-tooltip>\n      ) : (\n        labels\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 =\n      collapseHost?.mode === 'action' && collapseHost.columnId === column.id;\n    const blankActionCollapseHost =\n      actionCollapseHost && !column.header.trim() && !column.headerSegments?.length;\n    const collapseControl =\n      interactive && actionCollapseHost ? (\n        <span class=\"ds-table__collapse-slot\">{this.renderCollapseAllButton()}</span>\n      ) : null;\n\n    return (\n      <th\n        key={column.id}\n        class={{\n          'ds-table__header-cell': true,\n          [`ds-table__cell--align-${align}`]: true,\n          'ds-table__cell--sticky-start': column.sticky === 'start',\n          'ds-table__cell--sticky-end': column.sticky === 'end',\n          'ds-table__header-cell--collapse-all': actionCollapseHost,\n        }}\n        scope={presentational ? undefined : 'col'}\n        aria-sort={presentational ? undefined : memberAriaSort}\n        data-column-id={column.id}\n        data-grouped={groupedColumn ? 'true' : undefined}\n        data-sort-active={activeSort ? 'true' : undefined}\n      >\n        {!column.header.trim() && column.headerLabel?.trim() && (\n          <span class=\"ds-visually-hidden\">{column.headerLabel}</span>\n        )}\n        {blankActionCollapseHost ? (\n          <span class=\"ds-table__header-content ds-table__header-content--collapse-all\">\n            {collapseControl}\n          </span>\n        ) : (\n          <span class=\"ds-table__header-content\">\n            {align === 'end' && sortControl}\n            {align === 'center' && (\n              <span\n                class=\"ds-table__sort-slot ds-table__sort-slot--balance\"\n                data-sort-balance=\"true\"\n                aria-hidden=\"true\"\n              />\n            )}\n            {labelControl}\n            {align !== 'end' && sortControl}\n            {collapseControl}\n          </span>\n        )}\n        {this.renderStickyEdge(column.sticky)}\n      </th>\n    );\n  }\n\n  private renderColgroup(model: TableRenderModel) {\n    return (\n      <colgroup>\n        {model.selectable && <col class=\"ds-table__selection-column\" />}\n        {this.visibleColumns.map(column => {\n          const width = tableColumnSize(column);\n          const flexible = column.id === model.flexibleColumnId;\n          return (\n            <col\n              key={column.id}\n              class={{\n                'ds-table__action-column': column.kind === 'action',\n                'ds-table__flexible-column': flexible,\n              }}\n              style={width && !flexible ? { width } : undefined}\n            />\n          );\n        })}\n      </colgroup>\n    );\n  }\n\n  private renderHeader(\n    model: TableRenderModel,\n    interactive = true,\n    presentational = false,\n    ariaRowIndex?: number\n  ) {\n    const selection = model.selection;\n    return (\n      <thead\n        class={{\n          'ds-table__head': true,\n          'ds-table__head--semantic-copy': !interactive,\n        }}\n        ref={element => {\n          if (interactive) this.interactiveHeadEl = element ?? null;\n        }}\n      >\n        <tr class=\"ds-table__header-row\" aria-rowindex={ariaRowIndex}>\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 ? (\n                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              ) : (\n                <span class=\"ds-visually-hidden\">Select rows</span>\n              )}\n              {this.renderStickyEdge('start')}\n            </th>\n          )}\n          {this.visibleColumns.map(column =>\n            this.renderColumnHeader(column, model, interactive, presentational)\n          )}\n        </tr>\n      </thead>\n    );\n  }\n\n  private renderRow(\n    row: TableRow,\n    model: TableRenderModel,\n    ariaRowIndex?: number,\n    variableVirtualSize = false,\n    rowKey = row.id\n  ) {\n    return renderTableRowView({\n      row,\n      model,\n      visibleColumns: this.visibleColumns,\n      emptyCellLabel: this.emptyCellLabel,\n      actionMenuElementId: this.actionMenuElementId,\n      actionMenu: this.actionMenu,\n      ariaRowIndex,\n      variableVirtualSize,\n      rowKey,\n      renderSelectionControl: (label, checked, indeterminate, disabled, onActivate) =>\n        this.renderSelectionControl(label, checked, indeterminate, disabled, onActivate),\n      renderStickyEdge: sticky => this.renderStickyEdge(sticky),\n      onRowActivate: (targetRow, event) => this.emitRowActivation(targetRow, event),\n      onRowKeyDown: (targetRow, event) => this.handleRowKeydown(targetRow, event),\n      onRowSelection: targetRow => this.emitRowSelection(targetRow),\n      onCellAction: detail => this.dsCellAction.emit(detail),\n      onActionMenuToggle: (targetRow, column, event) =>\n        this.toggleActionMenu(targetRow, column, event),\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      countLabel,\n      collapsed: isCollapsed,\n      labelColor,\n      selection: groupSelection,\n    } = groupModel;\n    return (\n      <span class=\"ds-table__group-content\">\n        {groupSelection && (\n          <span class=\"ds-table__group-selection\">\n            {this.renderSelectionControl(\n              groupSelection.allSelected\n                ? `Deselect loaded rows in ${group.label} group`\n                : `Select loaded rows in ${group.label} group`,\n              groupSelection.allSelected,\n              groupSelection.indeterminate,\n              groupSelection.selectableRowIds.length === 0,\n              () => this.emitGroupSelection(group)\n            )}\n          </span>\n        )}\n        <span class=\"ds-table__group-copy\">\n          <ds-text\n            class=\"ds-table__group-label\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            emphasis={true}\n            color={labelColor}\n          >\n            {group.label}\n          </ds-text>\n          <ds-text\n            class=\"ds-table__group-separator\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            color=\"secondary\"\n            aria-hidden=\"true\"\n          >\n            ·\n          </ds-text>\n          <ds-text\n            class=\"ds-table__group-count\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            color=\"secondary\"\n            aria-hidden=\"true\"\n          >\n            {groupModel.visibleCountText}\n          </ds-text>\n          <span class=\"ds-visually-hidden\">{countLabel}</span>\n        </span>\n        <ds-button-unfilled\n          class=\"ds-table__group-toggle\"\n          variant=\"icon\"\n          size=\"md\"\n          isInset={true}\n          insetDepth=\"double\"\n          icon={isCollapsed ? 'ChevronDown' : 'ChevronUp'}\n          expanded={!isCollapsed}\n          aria-label={isCollapsed ? `Expand ${group.label} group` : `Collapse ${group.label} group`}\n          hasBorder={false}\n          onDsClick={event => {\n            event.stopPropagation();\n            this.emitGroupCollapse(group);\n          }}\n        />\n      </span>\n    );\n  }\n\n  private formatGroupLoadLabel(template: string, group: TableGroup): string {\n    return template.split('{group}').join(group.label);\n  }\n\n  private renderGroupLoadRow(group: TableGroup, totalColumns: number) {\n    const error = group.loadMoreError?.trim();\n    if (!error && !group.loadingMore && !group.hasMore) return null;\n    const manualFallback =\n      this.loadMoreMode === 'manual' || !this.groupLoadController.intersectionSupported;\n\n    return (\n      <tr\n        class=\"ds-table__load-row ds-table__group-load-row\"\n        data-group-id={group.id}\n        ref={element => {\n          if (element) this.groupSentinelEls.set(group.id, element);\n          else this.groupSentinelEls.delete(group.id);\n        }}\n      >\n        <td class=\"ds-table__load-cell\" colSpan={totalColumns}>\n          <div class=\"ds-table__viewport-band ds-table__load-band\">\n            {renderTableLoadContent({\n              error,\n              loading: !!group.loadingMore,\n              hasMore: !!group.hasMore,\n              manualFallback,\n              retryLabel: this.formatGroupLoadLabel(this.groupRetryLabel, group),\n              loadingLabel: this.formatGroupLoadLabel(this.groupLoadingMoreLabel, group),\n              loadMoreLabel: this.groupLoadMoreLabel,\n              loadMoreAriaLabel: this.formatGroupLoadLabel(this.groupLoadMoreAriaLabel, group),\n              onRetry: () => this.groupLoadController.request(group.id, 'retry'),\n              onLoadMore: () => this.groupLoadController.request(group.id, 'manual'),\n            })}\n          </div>\n        </td>\n      </tr>\n    );\n  }\n\n  private renderStickyGroup(model: TableRenderModel) {\n    if (!this.documentStickyHeader || !this.activeStickyGroupId) return null;\n    const groupModel = model.groups.find(item => item.group.id === this.activeStickyGroupId);\n    if (!groupModel) return null;\n    return (\n      <div\n        class={{\n          'ds-table__sticky-group': true,\n          'ds-table__sticky-group--selectable': model.selectable,\n          [groupModel.intentClass ?? '']: !!groupModel.intentClass,\n        }}\n        data-group-id={groupModel.group.id}\n        data-group-intent={groupModel.intent}\n      >\n        {this.renderGroupContent(groupModel)}\n      </div>\n    );\n  }\n\n  private renderDataBodies(model: TableRenderModel, plan: TableVirtualPlan | null) {\n    return this.bodyRenderer.render({\n      model,\n      plan,\n      rows: this.rows,\n      stickyHeader: this.stickyHeader,\n      documentStickyHeader: this.documentStickyHeader,\n      activeStickyGroupId: this.activeStickyGroupId,\n      renderRow: (row, renderModel, ariaRowIndex, variableVirtualSize, rowKey) =>\n        this.renderRow(row, renderModel, ariaRowIndex, variableVirtualSize, rowKey),\n      renderGroupContent: groupModel => this.renderGroupContent(groupModel),\n      renderGroupLoadRow: (group, totalColumns) => this.renderGroupLoadRow(group, totalColumns),\n    });\n  }\n\n  private renderSkeletonBody(model: TableRenderModel) {\n    return renderTableSkeletonBody({\n      model,\n      visibleColumns: this.visibleColumns,\n      skeletonRows: this.skeletonRows,\n      renderStickyEdge: sticky => this.renderStickyEdge(sticky),\n    });\n  }\n\n  private renderStateBody(kind: 'empty' | 'error' | 'virtual-viewport', totalColumns: number) {\n    const error = kind !== 'empty';\n    const heading =\n      kind === 'virtual-viewport'\n        ? TABLE_VIRTUAL_VIEWPORT_REQUIRED_HEADING\n        : error\n          ? this.errorHeading\n          : this.emptyHeading;\n    const body =\n      kind === 'virtual-viewport'\n        ? TABLE_VIRTUAL_VIEWPORT_REQUIRED_BODY\n        : error\n          ? this.errorBody\n          : this.emptyBody;\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={heading}\n                body={body}\n              />\n            </div>\n          </td>\n        </tr>\n      </tbody>\n    );\n  }\n\n  private renderLazyBody(model: TableRenderModel) {\n    if (\n      this.dataMode !== 'infinite' ||\n      !this.incrementalWindowActive ||\n      !model.hasData ||\n      model.grouped\n    )\n      return null;\n    const error = this.loadMoreError?.trim();\n    const manualFallback =\n      this.loadMoreMode === 'manual' || !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              {renderTableLoadContent({\n                error,\n                loading: this.loadingMore,\n                hasMore: this.hasMore,\n                manualFallback,\n                retryLabel: this.retryLabel,\n                loadingLabel: this.loadingMoreLabel,\n                loadMoreLabel: this.loadMoreLabel,\n                endOfResultsLabel: this.endOfResultsLabel,\n                onRetry: () => this.loadController.request('retry'),\n                onLoadMore: () => this.loadController.request('manual'),\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 class=\"ds-table__document-sticky-header\">\n        <table\n          class={{\n            'ds-table__table': true,\n            'ds-table__sticky-header-table': true,\n            'ds-table__table--selectable': model.selectable,\n            'ds-table__table--grouped': model.grouped,\n          }}\n          style={model.tableStyle}\n          role=\"presentation\"\n          ref={element => {\n            this.stickyHeaderTableEl = element ?? null;\n          }}\n        >\n          {this.renderColgroup(model)}\n          {this.renderHeader(model, true, true)}\n        </table>\n        {this.renderFloatingCollapseAll(model)}\n      </div>\n    );\n  }\n\n  private get resultSummary(): string | null {\n    if (this.dataMode === 'pagination') return null;\n    if (this.dataMode === 'virtual') {\n      return formatTableTotalSummary(this.currentLoadedRowCount(), this.resultTotalSummaryLabel);\n    }\n    return formatTableResultSummary(this.displayedCount, this.totalCount, this.resultSummaryLabel);\n  }\n\n  private get hasResultFooter(): boolean {\n    return (\n      (this.dataMode === 'pagination' && !!this.pagination) ||\n      !!this.resultSummary ||\n      this.footerSlotPresence !== 0\n    );\n  }\n\n  private renderResultFooter() {\n    const summary = this.resultSummary;\n    const hasLeading = (this.footerSlotPresence & TABLE_FOOTER_SLOT_LEADING) !== 0;\n    const hasCopy = (this.footerSlotPresence & TABLE_FOOTER_SLOT_COPY) !== 0;\n    const hasTrailing = (this.footerSlotPresence & TABLE_FOOTER_SLOT_TRAILING) !== 0;\n    const pagination = this.dataMode === 'pagination' ? this.pagination : null;\n    if (!this.hasResultFooter) return null;\n    return (\n      <div class=\"ds-table__footer ds-table__bar ds-chrome-header ds-control--md\">\n        <div class=\"ds-table__bar-copy ds-chrome-header__copy ds-control--md\">\n          {hasLeading && (\n            <div class=\"ds-table__bar-status ds-chrome-header__heading\">\n              <slot name=\"footer-leading\" onSlotchange={this.syncFooterSlotPresence} />\n            </div>\n          )}\n          {hasCopy ? (\n            <slot name=\"footer\" onSlotchange={this.syncFooterSlotPresence} />\n          ) : summary ? (\n            <ds-text\n              class=\"ds-table__footer-summary ds-table__bar-text\"\n              as=\"span\"\n              variant=\"text-body-medium\"\n              color=\"secondary\"\n              lineTruncation={1}\n            >\n              {summary}\n            </ds-text>\n          ) : null}\n        </div>\n        {(pagination || hasTrailing) && (\n          <div class=\"ds-table__bar-trailing ds-chrome-header__trailing\">\n            {pagination && (\n              <ds-pagination\n                pageIndex={pagination.pageIndex}\n                pageSize={pagination.pageSize}\n                pageSizeMode={pagination.pageSizeMode ?? 'fixed'}\n                totalItems={pagination.totalItems}\n                pageSizeOptions={pagination.pageSizeOptions ?? [25, 50, 100, 200]}\n                fitToPage={pagination.fitToPage ?? false}\n                {...{ fitToPageInactive: pagination.fitToPageInactive ?? false }}\n                fitPageSize={this.fitPageSize ?? pagination.fitPageSize}\n                fitPageSizeLabel={pagination.fitPageSizeLabel ?? 'Fit to page'}\n                fitPageSizeTriggerLabel={pagination.fitPageSizeTriggerLabel ?? 'Fit'}\n                itemLabel={pagination.itemLabel ?? 'items'}\n                pageSizeLabel={pagination.pageSizeLabel ?? 'Items'}\n                label={pagination.ariaLabel ?? `${this.caption} pagination`}\n                showFirstLastButtons={pagination.showFirstLastButtons ?? false}\n                loading={this.loading}\n                onDsChange={(event: CustomEvent<PaginationChangeDetail>) =>\n                  this.dsPaginationChange.emit(event.detail)\n                }\n              />\n            )}\n            <slot name=\"footer-trailing\" onSlotchange={this.syncFooterSlotPresence} />\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\n          class={{\n            'ds-table__caption-content': true,\n            'ds-table__caption-content--trailing': this.showsCaptionTrailing,\n          }}\n        >\n          <div\n            class={{\n              'ds-table__caption-leading': true,\n              'ds-table__caption-leading--toolbar': this.headerUsesToolbar,\n            }}\n          >\n            <slot name=\"header\" onSlotchange={this.syncHeaderSlotPresence} />\n            {!this.headerPresent ? (\n              <ds-text\n                class=\"ds-table__caption-title ds-table__bar-text\"\n                as=\"div\"\n                variant=\"text-title-small\"\n                emphasis={true}\n                color=\"primary\"\n                aria-hidden=\"true\"\n              >\n                {this.caption}\n              </ds-text>\n            ) : null}\n          </div>\n          {this.renderCaptionTrailing()}\n        </div>\n      </div>\n    );\n  }\n\n  private renderCaptionTrailing() {\n    if (!this.showsCaptionTrailing) return null;\n    return (\n      <div class=\"ds-table__caption-trailing\">\n        {this.renderColumnCustomizerTrigger()}\n        {this.showsColumnCustomizer && this.showsDataModeSwitcher ? (\n          <ds-divider orientation=\"vertical\" length=\"32px\" />\n        ) : null}\n        {this.renderDataModeSwitcherTrigger()}\n      </div>\n    );\n  }\n\n  private renderDataModeSwitcherTrigger() {\n    if (!this.showsDataModeSwitcher) return null;\n    if (this.chromeLoading) {\n      return <ds-skeleton variant=\"control\" controlSize=\"md\" width=\"var(--dimension-size-400)\" />;\n    }\n    return (\n      <span class=\"ds-table__caption-mode-switcher\">\n        <ds-tooltip label={this.dataModeSwitcherLabel} side=\"top\" size=\"sm\">\n          <ds-button-unfilled\n            id={`${this.dataModeSwitcherElementId}-trigger`}\n            variant=\"icon\"\n            size=\"md\"\n            icon=\"Ellipses\"\n            aria-label={this.dataModeSwitcherLabel}\n            hasMenu={true}\n            expanded={this.dataModeSwitcherOpen}\n            controls={this.dataModeSwitcherElementId}\n            activeFill={false}\n            pressScale={false}\n            onDsClick={(event: CustomEvent<MouseEvent>) => {\n              this.toggleDataModeSwitcher(event.detail.detail === 0);\n            }}\n          />\n        </ds-tooltip>\n      </span>\n    );\n  }\n\n  private renderDataModeSwitcherMenu() {\n    if (!this.showsDataModeSwitcher || this.chromeLoading) return null;\n    return (\n      <ds-menu\n        id={this.dataModeSwitcherElementId}\n        open={this.dataModeSwitcherOpen}\n        anchorId={`${this.dataModeSwitcherElementId}-trigger`}\n        align=\"end\"\n        side=\"bottom\"\n        menuLabel={this.dataModeMenuLabel}\n        initialFocusVisible={this.dataModeSwitcherInitialFocusVisible}\n        items={tableDataModeMenuItems(this.dataMode, {\n          infinite: this.infiniteModeLabel,\n          pagination: this.paginationModeLabel,\n          virtual: this.virtualModeLabel,\n        })}\n        onDsClose={() => this.closeDataModeSwitcher()}\n        onDsSelect={event => this.handleDataModeSwitcherSelect(event.detail)}\n      />\n    );\n  }\n\n  private toggleDataModeSwitcher(fromKeyboard = false): void {\n    if (this.dataModeSwitcherOpen) this.closeDataModeSwitcher();\n    else this.openDataModeSwitcher(fromKeyboard);\n  }\n\n  private openDataModeSwitcher(fromKeyboard = false): void {\n    if (!this.showsDataModeSwitcher || this.dataModeSwitcherOpen) return;\n    this.closeColumnCustomizer();\n    this.dataModeSwitcherInitialFocusVisible = fromKeyboard;\n    this.dataModeSwitcherOpen = true;\n  }\n\n  private closeDataModeSwitcher(): void {\n    this.dataModeSwitcherOpen = false;\n  }\n\n  private handleDataModeSwitcherSelect(item: MenuItemData): void {\n    const dataMode = tableDataModeFromMenuItem(item);\n    if (!dataMode) return;\n    this.closeDataModeSwitcher();\n    if (dataMode !== this.dataMode) this.dsDataModeChange.emit({ dataMode });\n    requestAnimationFrame(() => {\n      this.el\n        .querySelector<\n          HTMLElement & { setFocus?: () => void }\n        >(`#${CSS.escape(`${this.dataModeSwitcherElementId}-trigger`)}`)\n        ?.setFocus?.();\n    });\n  }\n\n  private renderColumnCustomizerTrigger() {\n    if (!this.showsColumnCustomizer) return null;\n    return (\n      <div\n        class={{\n          'ds-table__caption-customizer': true,\n          'ds-table__caption-customizer--loading': this.chromeLoading,\n        }}\n        aria-hidden={this.chromeLoading ? 'true' : undefined}\n      >\n        <ds-tooltip label={this.captionCompact ? 'Customize' : ''} side=\"top\" size=\"sm\">\n          <ds-button-unfilled\n            id={`${this.columnCustomizerElementId}-trigger`}\n            variant={this.captionCompact ? 'icon' : 'icon-label'}\n            size=\"md\"\n            icon=\"Table\"\n            label=\"Customize\"\n            labelEmphasis={false}\n            pressScale={false}\n            aria-label=\"Customize table\"\n            hasMenu={true}\n            expanded={this.columnCustomizerOpen}\n            controls={this.columnCustomizerElementId}\n            onDsClick={(event: CustomEvent<MouseEvent>) => {\n              if (this.chromeLoading) return;\n              this.toggleColumnCustomizer(event.detail.detail === 0);\n            }}\n          />\n        </ds-tooltip>\n        {this.chromeLoading ? (\n          <ds-skeleton variant=\"control\" controlSize=\"md\" width=\"100%\" />\n        ) : null}\n      </div>\n    );\n  }\n\n  private renderColumnCustomizerMenu() {\n    if (!this.showsColumnCustomizer || this.chromeLoading) return null;\n    return (\n      <ds-menu\n        id={this.columnCustomizerElementId}\n        open={this.columnCustomizerOpen}\n        anchorId={`${this.columnCustomizerElementId}-trigger`}\n        align=\"end\"\n        side=\"bottom\"\n        menuLabel=\"Customize table\"\n        initialFocusVisible={this.columnCustomizerInitialFocusVisible}\n        items={tableColumnCustomizerMenuItems(this.columns, this.hiddenColumnIds, this.columnOrder)}\n        onDsClose={() => this.closeColumnCustomizer()}\n        onDsSelect={event => this.handleColumnCustomizerSelect(event.detail)}\n        onDsReorder={event => this.handleColumnCustomizerReorder(event.detail)}\n      />\n    );\n  }\n\n  private toggleColumnCustomizer(fromKeyboard = false): void {\n    if (this.columnCustomizerOpen) this.closeColumnCustomizer();\n    else this.openColumnCustomizer(fromKeyboard);\n  }\n\n  private openColumnCustomizer(fromKeyboard = false): void {\n    if (!this.showsColumnCustomizer || this.columnCustomizerOpen) return;\n    this.closeDataModeSwitcher();\n    this.columnCustomizerInitialFocusVisible = fromKeyboard;\n    this.columnCustomizerOpen = true;\n  }\n\n  private closeColumnCustomizer(): void {\n    this.columnCustomizerOpen = false;\n  }\n\n  private emitColumnsConfigChange(hiddenColumnIds: string[], columnOrder: string[]): void {\n    this.dsColumnsConfigChange.emit({\n      hiddenColumnIds: resolveTableHiddenColumnIds(this.columns, hiddenColumnIds),\n      columnOrder: resolveTableColumnOrder(this.columns, columnOrder),\n    });\n  }\n\n  private handleColumnCustomizerReorder(detail: MenuReorderDetail): void {\n    const order = detail.items\n      .filter(item => item.reorderable)\n      .map(item => item.value)\n      .filter((id): id is string => !!id);\n    this.emitColumnsConfigChange(this.hiddenColumnIds, order);\n  }\n\n  private handleColumnCustomizerSelect(item: MenuItemData): void {\n    const columnId = item.value;\n    if (!columnId || item.isInactive) return;\n    this.emitColumnsConfigChange(\n      toggleTableColumnHidden(this.columns, this.hiddenColumnIds, columnId),\n      resolveTableColumnOrder(this.columns, this.columnOrder)\n    );\n  }\n\n  render() {\n    this.groupSentinelEls.clear();\n    const model = this.createRenderModel();\n    this.syncVirtualItems(model);\n    this.renderedModel = model;\n    const regionLabel = this.scrollLabel?.trim() || `${this.caption} scroll area`;\n    const initialLoading = this.loading && !model.hasData;\n    const initialError = !model.hasData && this.error;\n    const hasGroupedStructure = model.grouped && model.groups.length > 0;\n    const virtualize = this.shouldVirtualize(model);\n    const virtualViewportMissing =\n      this.virtualViewportMissing && !initialLoading && (model.hasData || hasGroupedStructure);\n    const virtualPlan = virtualize\n      ? (this.virtualWindow ??\n        resolveTableVirtualPlan({\n          items: this.virtualItems,\n          sizes: this.virtualItems.map(item => this.virtualController.sizeFor(item)),\n          scrollOffset: this.viewportEl?.scrollTop ?? 0,\n          viewportSize: this.estimateVirtualViewportSize(),\n          pinnedRowIds: this.virtualPinnedRowIds(),\n        }))\n      : null;\n    const groupLoadingMore = hasGroupedStructure && this.groups.some(group => group.loadingMore);\n    const viewportStyle =\n      !this.boundedComposition && this.resolvedMaxHeight\n        ? { '--ds-table-max-block-size': this.resolvedMaxHeight }\n        : undefined;\n    const hostStyle = this.fixedHeight\n      ? { '--_table-fixed-block-size': this.resolvedHeight }\n      : undefined;\n\n    return (\n      <Host\n        class={{\n          'table-host': true,\n          'table-host--bounded': this.boundedComposition,\n          'table-host--fixed-height': this.fixedHeight,\n          'table-host--viewport-fit': this.fitViewport,\n        }}\n        style={hostStyle}\n        onKeyDown={(event: KeyboardEvent) => this.handlePaginationKeyDown(event)}\n        onFocusin={this.onVirtualFocusIn}\n      >\n        <div\n          class={{\n            'ds-table': true,\n            'ds-table--bounded': this.boundedComposition,\n            'ds-table--contained-scroll': this.containedScroll,\n            'ds-table--fixed-height': this.fixedHeight,\n            'ds-table--viewport-fit': this.fitViewport,\n            'ds-table--viewport-fit-pending': this.fitViewport && !this.viewportFitSettled,\n            'ds-table--viewport-fit-settled': this.fitViewport && this.viewportFitSettled,\n            'ds-table--sticky-header': this.stickyHeader,\n            'ds-table--document-sticky-header': this.documentStickyHeader,\n            'ds-table--contained-sticky-header': this.stickyHeader && !this.documentStickyHeader,\n            'ds-table--caption-visible': this.captionVisibility === 'visible',\n            'ds-table--footer-visible': this.hasResultFooter,\n            'ds-table--state-fill':\n              !initialLoading &&\n              (initialError || virtualViewportMissing || !(model.hasData || hasGroupedStructure)),\n          }}\n          ref={element => {\n            this.rootEl = element ?? null;\n          }}\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--virtual': virtualize,\n                  'ds-table__table--native-group-sticky':\n                    (model.grouped && this.stickyHeader && !this.documentStickyHeader) ||\n                    virtualize,\n                }}\n                style={model.tableStyle}\n                aria-rowcount={virtualize ? 1 + this.virtualItems.length : undefined}\n                aria-busy={\n                  initialLoading ||\n                  (this.dataMode === 'infinite' && (this.loadingMore || groupLoadingMore))\n                    ? 'true'\n                    : undefined\n                }\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(\n                  model,\n                  !this.documentStickyHeader,\n                  false,\n                  virtualize ? 1 : undefined\n                )}\n                {initialLoading\n                  ? this.renderSkeletonBody(model)\n                  : initialError\n                    ? this.renderStateBody('error', model.totalColumns)\n                    : virtualViewportMissing\n                      ? this.renderStateBody('virtual-viewport', model.totalColumns)\n                      : model.hasData || hasGroupedStructure\n                        ? this.renderDataBodies(model, virtualPlan)\n                        : this.renderStateBody('empty', model.totalColumns)}\n                {!initialLoading &&\n                  !initialError &&\n                  this.dataMode !== 'virtual' &&\n                  this.renderLazyBody(model)}\n              </table>\n            </div>\n          </div>\n          {this.renderResultFooter()}\n          {this.renderOverflowActionMenu()}\n          {this.renderDataModeSwitcherMenu()}\n          {this.renderColumnCustomizerMenu()}\n          {this.renderTruncateTooltip()}\n          <div class=\"ds-visually-hidden\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n            {this.announcement}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport {\n  deriveTableSelectionState,\n  formatTableResultSummary,\n  formatTableTotalSummary,\n  hasOwnedTableFooterSlot,\n  isTableCellAction,\n  nextTableSortState,\n  tableColumnSize,\n  tableModelIssues,\n  tableRows,\n  toggleAllLoadedTableRows,\n  toggleTableGroupCollapsed,\n  toggleTableGroupSelection,\n  nextTableGroupsCollapsed,\n  toggleTableRowSelection,\n} from './table-model';\nimport { createTableRenderModel, type TableRenderModel } from './table-render-model';\nimport {\n  isRenderableTableActionMenu,\n  nextTableActionMenuElementId,\n  tableActionMenuSections,\n  tableActionTriggerId,\n} from './table-action-menu';\nimport {\n  nextTableColumnCustomizerElementId,\n  resolveTableColumnOrder,\n  resolveTableHiddenColumnIds,\n  resolveTableVisibleColumns,\n  tableColumnCustomizerMenuItems,\n  toggleTableColumnHidden,\n} from './table-column-customizer';\nimport {\n  nextTableDataModeSwitcherElementId,\n  tableDataModeFromMenuItem,\n  tableDataModeMenuItems,\n} from './table-data-mode-switcher';\nimport { resolveTableTruncateTrack, tableTruncateLabel } from './table-truncate';\nimport { renderTableRow as renderTableRowView } from './table-row-view';\nimport { TableBodyRenderer } from './table-body-renderer';\nimport { renderTableSkeletonBody } from './table-skeleton-view';\nimport { renderTableLoadContent } from './table-load-view';\nimport { TableLayoutController } from './table-layout-controller';\nimport { TableLoadController } from './table-load-controller';\nimport { TableGroupLoadController } from './table-group-load-controller';\nimport {\n  flattenTableVirtualItems,\n  resolveTableVirtualPlan,\n  TABLE_VIRTUAL_TOTAL_SUMMARY_LABEL,\n  TABLE_VIRTUAL_VIEWPORT_REQUIRED_BODY,\n  TABLE_VIRTUAL_VIEWPORT_REQUIRED_HEADING,\n  type TableVirtualItem,\n  type TableVirtualPlan,\n} from './table-virtual-model';\nimport { TableVirtualController } from './table-virtual-controller';\nimport type { PaginationChangeDetail } from '../Pagination/pagination-types';\nimport type { MenuItemData, MenuReorderDetail } from '../Menu/menu-types';\nimport { resolvePaginationState } from '../Pagination/pagination-model';\nimport { resolveCssLengthPx } from '../../utils/resolve-css-length-px';\nimport { isElementTruncated } from '../../utils/is-element-truncated';\nimport { observeTableCaptionCompact } from '../../utils/table-caption-compact';\nimport { resolveTableFitPageSize } from './table-pagination-fit';\nimport { createTableHighlightMatcher, type TableHighlightMatcher } from './table-highlight';\nimport {\n  paginationShortcutBlockedByPath,\n  shouldHandleContainingPagePaginationShortcut,\n} from './table-pagination-shortcut';\nimport {\n  TableViewportFitController,\n  type TableViewportFitMetrics,\n} from './table-viewport-fit-controller';\nimport type {\n  TableCaptionVisibility,\n  TableCellActionDetail,\n  TableColumn,\n  TableColumnsConfigChangeDetail,\n  TableDataMode,\n  TableDataModeChangeDetail,\n  TableGroup,\n  TableGroupCollapseChangeDetail,\n  TableGroupLoadMoreDetail,\n  TableGroupingState,\n  TableLoadMoreDetail,\n  TableLoadMoreMode,\n  TablePaginationState,\n  TableRow,\n  TableRowActivateDetail,\n  TableSelectionChangeDetail,\n  TableSelectionMode,\n  TableSortChangeDetail,\n  TableSortState,\n} from './table-types';\n\nconst TABLE_FOOTER_SLOT_LEADING = 1;\nconst TABLE_FOOTER_SLOT_COPY = 2;\nconst TABLE_FOOTER_SLOT_TRAILING = 4;\n\n@Component({\n  tag: 'ds-table',\n  styleUrls: ['../../utils/focus-ring.css', '../../utils/interaction-fill.css', 'Table.css'],\n  scoped: true,\n})\nexport class Table {\n  @Element() el!: HTMLElement;\n  /** Stable column definitions. Assign through JavaScript. */\n  @Prop() columns: TableColumn[] = [];\n  /** Ungrouped row data. Ignored while grouping is active. Assign through JavaScript. */\n  @Prop() rows: TableRow[] = [];\n  /** One level of application-owned grouped data. Assign through JavaScript. */\n  @Prop() groups: TableGroup[] = [];\n  /** Controlled grouping column. Applications supply groups in their final fixed order. */\n  @Prop() grouping: TableGroupingState | null = null;\n  /** Controlled member-row sort state. */\n  @Prop() sort: TableSortState | null = null;\n  /** Controlled collapsed group identities. Groups not listed remain expanded. */\n  @Prop() collapsedGroupIds: string[] = [];\n  /** Literal terms to highlight in table-owned text cells. Applications still own filtering. */\n  @Prop() highlightTerms: string[] = [];\n  /** Optional TableSearch field identities that restrict which data-point tracks are highlighted. */\n  @Prop() highlightFieldIds: string[] = [];\n\n  /** Required accessible table name, retained as a native caption. */\n  @Prop() caption!: string;\n  /** Shows a matching presentational title bar above the native table frame. */\n  @Prop() captionVisibility: TableCaptionVisibility = 'hidden';\n  /**\n   * Opt in to the table-owned column customizer. The `columns` prop remains the\n   * catalog; hidden and ordered columns are controlled separately. The trigger\n   * opens the shared Menu of live show/hide switch rows.\n   */\n  @Prop() columnCustomizer: boolean = false;\n  /** Controlled hidden data-column identities. Action ids are ignored. */\n  @Prop() hiddenColumnIds: string[] = [];\n  /** Controlled data-column identities in display order. Omitted ids append in catalog order. */\n  @Prop() columnOrder: string[] = [];\n  /**\n   * Optional result summary footer. When both `displayedCount` and `totalCount`\n   * are finite numbers, infinite mode shows “Displaying {displayed} of {total}”.\n   * Virtual mode ignores `displayedCount` and derives its total from the\n   * complete supplied rows; a mismatched `totalCount` emits a warning.\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  /** Supports the {total} placeholder. Used when dataMode is virtual. */\n  @Prop() resultTotalSummaryLabel: string = TABLE_VIRTUAL_TOTAL_SUMMARY_LABEL;\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  /** Replace opted-in table-owned caption controls with same-size visual skeletons. */\n  @Prop() chromeLoading: boolean = false;\n  /** Initial-loading rows. Defaults to ten so bounded tables retain a useful filled viewport. */\n  @Prop() skeletonRows: number = 10;\n  @Prop() emptyHeading: string = 'No results';\n  @Prop() emptyBody: string = 'No data is available.';\n  /** Initial error state. Existing rows stay visible; incremental failures use loadMoreError. */\n  @Prop() error: boolean = false;\n  @Prop() errorHeading: string = 'Unable to load data';\n  @Prop() errorBody: string = 'The data could not be loaded.';\n  @Prop() emptyCellLabel: string = 'Not available';\n\n  /** Top-level data-window strategy. Virtual mode recycles row DOM only. */\n  @Prop() dataMode: TableDataMode = 'infinite';\n  /** Opt in to the table-owned control for choosing between supported data modes. */\n  @Prop() dataModeSwitcher: boolean = false;\n  @Prop() dataModeSwitcherLabel: string = 'Change table variation';\n  @Prop() dataModeMenuLabel: string = 'Table variation';\n  @Prop() infiniteModeLabel: string = 'Infinite scroll';\n  @Prop() paginationModeLabel: string = 'Pagination + Infinite groups';\n  @Prop() virtualModeLabel: string = 'Virtual scroll';\n  /** Controlled top-level pagination state. Required when dataMode is pagination. */\n  @Prop() pagination: TablePaginationState | null = null;\n  @Prop() loadMoreMode: TableLoadMoreMode = 'auto';\n  @Prop() hasMore: boolean = false;\n  @Prop() loadingMore: boolean = false;\n  @Prop() loadMoreError: string | undefined;\n  /** Reset key for a new query/group/sort dataset. */\n  @Prop() loadIdentity: string | number = 'default';\n  /** IntersectionObserver root margin in CSS pixels. */\n  @Prop() loadMoreThreshold: number = 0;\n  @Prop() loadMoreLabel: string = 'Load more';\n  @Prop() retryLabel: string = 'Retry';\n  @Prop() loadingMoreLabel: string = 'Loading more items';\n  @Prop() endOfResultsLabel: string = 'All results loaded';\n  /** Supports {count} and {total} placeholders. */\n  @Prop() rowsLoadedLabel: string = '{count} more rows loaded. {total} rows loaded.';\n  @Prop() groupLoadMoreLabel: string = 'Load more';\n  /** Supports the {group} placeholder. */\n  @Prop() groupLoadMoreAriaLabel: string = 'Load more {group} results';\n  /** Supports the {group} placeholder. */\n  @Prop() groupRetryLabel: string = 'Retry loading {group} results';\n  /** Supports the {group} placeholder. */\n  @Prop() groupLoadingMoreLabel: string = 'Loading more items';\n  /** Supports the {group} placeholder. */\n  @Prop() groupEndOfResultsLabel: string = 'All {group} results loaded';\n  /** Supports {group}, {count}, {loaded}, and {total} placeholders. */\n  @Prop() groupRowsLoadedLabel: string =\n    '{count} more rows loaded in {group}. {loaded} of {total} rows loaded.';\n\n  @Event() dsSortChange!: EventEmitter<TableSortChangeDetail>;\n  @Event() dsGroupCollapseChange!: EventEmitter<TableGroupCollapseChangeDetail>;\n  @Event() dsSelectionChange!: EventEmitter<TableSelectionChangeDetail>;\n  @Event() dsLoadMore!: EventEmitter<TableLoadMoreDetail>;\n  @Event() dsGroupLoadMore!: EventEmitter<TableGroupLoadMoreDetail>;\n  @Event() dsPaginationChange!: EventEmitter<PaginationChangeDetail>;\n  @Event() dsCellAction!: EventEmitter<TableCellActionDetail>;\n  @Event() dsRowActivate!: EventEmitter<TableRowActivateDetail>;\n  @Event() dsColumnsConfigChange!: EventEmitter<TableColumnsConfigChangeDetail>;\n  @Event() dsDataModeChange!: EventEmitter<TableDataModeChangeDetail>;\n\n  @State() private overflowStart = false;\n  @State() private overflowEnd = false;\n  @State() private scrollable = false;\n  @State() private announcement = '';\n  @State() private activeStickyGroupId: string | null = null;\n  @State() private viewportFitSettled = false;\n  @State() private headerPresent = false;\n  @State() private headerUsesToolbar = false;\n  @State() private footerSlotPresence = 0;\n  @State() private fitPageSize: number | undefined;\n  @State() private actionMenu: { rowId: string; columnId: string } | null = null;\n  @State() private actionMenuInitialFocusVisible = false;\n  @State() private truncateTooltipLabel = '';\n  @State() private captionCompact = false;\n  @State() private columnCustomizerOpen = false;\n  @State() private columnCustomizerInitialFocusVisible = false;\n  @State() private dataModeSwitcherOpen = false;\n  @State() private dataModeSwitcherInitialFocusVisible = false;\n  @State() private virtualWindow: TableVirtualPlan | null = null;\n\n  private readonly actionMenuElementId = nextTableActionMenuElementId();\n  private readonly columnCustomizerElementId = nextTableColumnCustomizerElementId();\n  private readonly dataModeSwitcherElementId = nextTableDataModeSwitcherElementId();\n  private truncateTooltipEl?: HTMLDsTooltipElement;\n  private truncateAnchor: HTMLElement | null = null;\n  private truncateTooltipBound = false;\n  private focusedRowId: string | null = null;\n  private virtualItems: TableVirtualItem[] = [];\n  private visibleColumnsCache: {\n    columns: TableColumn[];\n    columnCustomizer: boolean;\n    hiddenColumnIds: string[];\n    columnOrder: string[];\n    value: TableColumn[];\n  } | null = null;\n  private renderModelCache: {\n    columns: TableColumn[];\n    rows: TableRow[];\n    groups: TableGroup[];\n    grouped: boolean;\n    selectionMode: TableSelectionMode;\n    selectedRowIds: string[];\n    collapsedGroupIds: string[];\n    virtualCounts: boolean;\n    value: TableRenderModel;\n  } | null = null;\n  private highlightMatcherCache: {\n    terms: string[];\n    value: TableHighlightMatcher;\n  } | null = null;\n  private virtualItemsCache: {\n    columns: TableColumn[];\n    rows: TableRow[];\n    groups: TableGroup[];\n    grouped: boolean;\n    collapsedGroupIds: string[];\n  } | null = null;\n  private rootEl: HTMLElement | null = null;\n  private viewportEl: HTMLElement | null = null;\n  private frameEl: HTMLElement | null = null;\n  private interactiveHeadEl: HTMLTableSectionElement | null = null;\n  private collapseAllOverlayEl: HTMLElement | null = null;\n  private stickyHeaderTableEl: HTMLTableElement | null = null;\n  private tableEl: HTMLTableElement | null = null;\n  private sentinelEl: HTMLElement | null = null;\n  private incrementalWindowActive = false;\n  private readonly groupSentinelEls = new Map<string, HTMLElement>();\n  private previousModelWarning = '';\n  private modelWarningQueued = false;\n  private hasLoaded = false;\n  private renderedModel: TableRenderModel | null = null;\n  private stickyGroupConnected = false;\n  private headerSlotObserver: MutationObserver | null = null;\n  private footerSlotObserver: MutationObserver | null = null;\n  private captionCompactDisconnect: (() => void) | undefined;\n  private fitResizeObserver: ResizeObserver | null = null;\n  private fitObservedViewport: HTMLElement | null = null;\n  private fitObservedTable: HTMLTableElement | null = null;\n  private fitMeasurementPending = false;\n  private readonly bodyRenderer = new TableBodyRenderer();\n  private readonly layoutController = new TableLayoutController({\n    elements: () => ({\n      viewport: this.viewportEl,\n      contentTable: 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.dataMode === 'infinite' && !this.grouped,\n      loadMoreMode: this.loadMoreMode,\n      hasMore: this.hasMore,\n      loadingMore: this.loadingMore,\n      loadMoreError: this.loadMoreError,\n      loadIdentity: this.loadIdentity,\n      loadMoreThreshold: this.loadMoreThreshold,\n      containedScroll: this.containedScroll,\n      loadingMoreLabel: this.loadingMoreLabel,\n      endOfResultsLabel: this.endOfResultsLabel,\n      rowsLoadedLabel: this.rowsLoadedLabel,\n      loadedRowCount: this.currentLoadedRowCount(),\n      viewport: this.viewportEl,\n      sentinel: this.sentinelEl,\n    }),\n    announce: message => {\n      this.announcement = message;\n    },\n    request: detail => {\n      this.dsLoadMore.emit(detail);\n    },\n  });\n  private readonly groupLoadController = new TableGroupLoadController({\n    state: () => ({\n      enabled: this.grouped && this.dataMode !== 'virtual',\n      loadMoreMode: this.loadMoreMode,\n      loadMoreThreshold: this.loadMoreThreshold,\n      containedScroll: this.containedScroll,\n      groups: this.groups,\n      viewport: this.viewportEl,\n      sentinels: this.groupSentinelEls,\n      loadingMoreLabel: this.groupLoadingMoreLabel,\n      endOfResultsLabel: this.groupEndOfResultsLabel,\n      rowsLoadedLabel: this.groupRowsLoadedLabel,\n    }),\n    announce: message => {\n      this.announcement = message;\n    },\n    request: detail => {\n      this.dsGroupLoadMore.emit(detail);\n    },\n  });\n  private readonly virtualController = new TableVirtualController({\n    state: () => ({\n      enabled: this.virtualizationEnabled,\n      items: this.virtualItems,\n      pinnedRowIds: this.virtualPinnedRowIds(),\n      viewport: this.viewportEl,\n      viewportSize: this.estimateVirtualViewportSize(),\n    }),\n    windowChanged: plan => {\n      this.virtualWindow = plan;\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    // Reserve the final viewport-fit height before the first paint. The fitted\n    // surface is connected after render, but the host can already resolve its\n    // owning scrollport and prevent an initial auto-height frame.\n    this.viewportFitController.connect();\n    this.incrementalWindowActive = this.hasIncrementalState;\n    this.syncHeaderSlotPresence();\n    this.syncFooterSlotPresence();\n    this.loadController.initialize();\n    this.groupLoadController.initialize();\n    this.warnModelIssues();\n  }\n\n  componentDidLoad(): void {\n    this.hasLoaded = true;\n    this.layoutController.connect();\n    this.loadController.connect();\n    this.groupLoadController.connect();\n    this.virtualController.connect();\n    this.viewportFitController.connect();\n    this.syncStickyGroupConnection();\n    this.connectHeaderSlotObserver();\n    this.connectFooterSlotObserver();\n    this.connectFitObserver();\n    this.connectCaptionCompactObserver();\n    this.syncFitPageSize();\n    this.connectTruncateTooltip();\n  }\n\n  componentDidRender(): void {\n    this.layoutController.refresh(false);\n    this.loadController.refresh();\n    this.groupLoadController.refresh();\n    this.virtualController.refresh();\n    this.virtualController.collectMeasurements(this.tableEl);\n    if (\n      this.dataMode === 'virtual' &&\n      this.truncateAnchor &&\n      this.tableEl &&\n      !this.tableEl.contains(this.truncateAnchor)\n    ) {\n      this.dismissTruncateTooltip();\n    }\n    this.viewportFitController.refresh(false);\n    this.syncStickyGroupConnection();\n    this.connectFitObserver();\n    this.connectCaptionCompactObserver();\n    this.syncFitPageSize();\n    if (this.stickyGroupConnected) this.updateStickyGroup();\n  }\n\n  connectedCallback(): void {\n    if (!this.hasLoaded) return;\n    this.layoutController.connect();\n    this.loadController.connect();\n    this.groupLoadController.connect();\n    this.virtualController.connect();\n    this.viewportFitController.connect();\n    this.syncStickyGroupConnection();\n    this.connectHeaderSlotObserver();\n    this.connectFooterSlotObserver();\n    this.connectFitObserver();\n    this.connectCaptionCompactObserver();\n    this.connectTruncateTooltip();\n  }\n\n  disconnectedCallback(): void {\n    this.layoutController.disconnect();\n    this.loadController.disconnect();\n    this.groupLoadController.disconnect();\n    this.virtualController.disconnect();\n    this.viewportFitController.disconnect();\n    this.disconnectStickyGroup();\n    this.headerSlotObserver?.disconnect();\n    this.headerSlotObserver = null;\n    this.footerSlotObserver?.disconnect();\n    this.footerSlotObserver = null;\n    this.disconnectFitObserver();\n    this.disconnectCaptionCompactObserver();\n    this.disconnectTruncateTooltip();\n    this.closeColumnCustomizer();\n  }\n\n  private syncHeaderSlotPresence = () => {\n    const header = this.el.querySelector<HTMLElement>('[slot=\"header\"]');\n    this.headerPresent = !!header;\n    this.headerUsesToolbar = header?.tagName === 'DS-TABLE-TOOLBAR';\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 syncFooterSlotPresence = () => {\n    let presence = 0;\n    if (hasOwnedTableFooterSlot(this.el, 'footer-leading')) presence |= TABLE_FOOTER_SLOT_LEADING;\n    if (hasOwnedTableFooterSlot(this.el, 'footer')) presence |= TABLE_FOOTER_SLOT_COPY;\n    if (hasOwnedTableFooterSlot(this.el, 'footer-trailing')) presence |= TABLE_FOOTER_SLOT_TRAILING;\n    if (presence !== this.footerSlotPresence) this.footerSlotPresence = presence;\n  };\n\n  private connectFooterSlotObserver(): void {\n    if (this.footerSlotObserver || typeof MutationObserver === 'undefined') return;\n    this.footerSlotObserver = new MutationObserver(this.syncFooterSlotPresence);\n    this.footerSlotObserver.observe(this.el, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['slot'],\n    });\n    this.syncFooterSlotPresence();\n  }\n\n  private connectStickyGroup(): void {\n    if (this.stickyGroupConnected || typeof window === 'undefined') return;\n    this.stickyGroupConnected = true;\n    document.addEventListener('scroll', this.updateStickyGroup, {\n      capture: true,\n      passive: true,\n    });\n    window.addEventListener('resize', this.updateStickyGroup, { passive: true });\n    this.updateStickyGroup();\n  }\n\n  private syncStickyGroupConnection(): void {\n    if (this.documentStickyHeader && this.grouped) {\n      this.connectStickyGroup();\n      return;\n    }\n\n    this.disconnectStickyGroup();\n    this.frameEl?.style.removeProperty('--_table-sticky-group-top');\n    if (this.activeStickyGroupId !== null) {\n      this.activeStickyGroupId = null;\n    }\n  }\n\n  private disconnectStickyGroup(): void {\n    if (!this.stickyGroupConnected || typeof window === 'undefined') return;\n    this.stickyGroupConnected = false;\n    document.removeEventListener('scroll', this.updateStickyGroup, true);\n    window.removeEventListener('resize', this.updateStickyGroup);\n  }\n\n  private readonly updateStickyGroup = (): void => {\n    if (!this.documentStickyHeader || !this.grouped || !this.frameEl || !this.tableEl) {\n      if (this.activeStickyGroupId !== null) this.activeStickyGroupId = null;\n      return;\n    }\n\n    const stickyHeader = this.frameEl.querySelector<HTMLElement>(\n      '.ds-table__document-sticky-header'\n    );\n    if (!stickyHeader) return;\n    const threshold = stickyHeader.getBoundingClientRect().bottom;\n    let activeGroupId: string | null = null;\n    let activeGroupTop = threshold;\n    for (const body of this.tableEl.querySelectorAll<HTMLElement>('tbody[data-group-id]')) {\n      const source = body.querySelector<HTMLElement>('.ds-table__group-cell');\n      if (!source) continue;\n      const sourceRect = source.getBoundingClientRect();\n      const bodyRect = body.getBoundingClientRect();\n      if (sourceRect.top <= threshold && bodyRect.bottom > threshold) {\n        activeGroupId = body.dataset.groupId ?? null;\n        // A sticky section is bounded by its own row group. As that boundary\n        // approaches the sticky lane, move the outgoing section bar with it so\n        // the incoming source bar pushes it away instead of rendering beneath it.\n        activeGroupTop = Math.min(threshold, bodyRect.bottom - sourceRect.height);\n      }\n    }\n\n    const frameRect = this.frameEl.getBoundingClientRect();\n    this.frameEl.style.setProperty(\n      '--_table-sticky-group-top',\n      `${activeGroupTop - frameRect.top}px`\n    );\n\n    if (activeGroupId !== this.activeStickyGroupId) {\n      this.activeStickyGroupId = activeGroupId;\n      return;\n    }\n  };\n\n  @Watch('columns')\n  @Watch('grouping')\n  @Watch('hiddenColumnIds')\n  @Watch('columnOrder')\n  @Watch('columnCustomizer')\n  handleStructureChange(): void {\n    this.scheduleModelIssueWarning();\n    this.loadController.structureChanged();\n    this.groupLoadController.structureChanged();\n    this.virtualController.invalidateMeasures();\n  }\n\n  @Watch('rows')\n  @Watch('groups')\n  handleDataChange(): void {\n    if (this.grouped) this.groupLoadController.dataChanged();\n    else this.loadController.dataChanged();\n    this.scheduleModelIssueWarning();\n    this.syncActionMenu();\n    this.virtualController.invalidateMeasures();\n  }\n\n  @Watch('totalCount')\n  handleTotalCountChange(): void {\n    this.scheduleModelIssueWarning();\n  }\n\n  @Watch('loadIdentity')\n  handleLoadIdentityChange(): void {\n    this.incrementalWindowActive = this.hasIncrementalState;\n    this.loadController.identityChanged();\n    this.virtualController.resetToTop();\n  }\n\n  @Watch('sort')\n  @Watch('grouping')\n  handleVirtualIndexReset(): void {\n    this.virtualController.resetToTop();\n  }\n\n  @Watch('loadMoreMode')\n  @Watch('loadMoreThreshold')\n  handleLazyConfigurationChange(): void {\n    this.loadController.configurationChanged();\n    this.groupLoadController.configurationChanged();\n  }\n\n  @Watch('dataMode')\n  handleDataModeChange(): void {\n    this.incrementalWindowActive = this.hasIncrementalState;\n    this.scheduleModelIssueWarning();\n    this.handleLazyConfigurationChange();\n    if (this.dataMode === 'virtual') this.virtualController.resetToTop();\n  }\n\n  @Watch('pagination')\n  handlePaginationChange(\n    pagination: TablePaginationState | null,\n    previous: TablePaginationState | null\n  ): void {\n    if (pagination?.pageSizeMode === 'fit' && pagination.fitIdentity !== previous?.fitIdentity) {\n      this.fitMeasurementPending = true;\n    }\n  }\n\n  @Watch('loadingMore')\n  handleLoadingMoreChange(loading: boolean): void {\n    if (loading) this.incrementalWindowActive = true;\n    if (!this.grouped) this.loadController.loadingChanged(loading);\n  }\n\n  @Watch('loadMoreError')\n  handleLoadMoreErrorChange(error: string | undefined): void {\n    if (error?.trim()) this.incrementalWindowActive = true;\n    if (!this.grouped) this.loadController.errorChanged(error);\n  }\n\n  @Watch('hasMore')\n  handleHasMoreChange(hasMore: boolean, hadMore: boolean): void {\n    if (hasMore) this.incrementalWindowActive = true;\n    if (!this.grouped) this.loadController.hasMoreChanged(hasMore, hadMore);\n  }\n\n  @Watch('columnCustomizer')\n  @Watch('captionVisibility')\n  handleColumnCustomizerAvailability(): void {\n    if (!this.showsColumnCustomizer) this.closeColumnCustomizer();\n  }\n\n  @Watch('dataModeSwitcher')\n  @Watch('captionVisibility')\n  handleDataModeSwitcherAvailability(): void {\n    if (!this.showsDataModeSwitcher) this.closeDataModeSwitcher();\n  }\n\n  @Watch('chromeLoading')\n  handleChromeLoadingChange(loading: boolean): void {\n    if (!loading) return;\n    this.closeColumnCustomizer();\n    this.closeDataModeSwitcher();\n  }\n\n  private get grouped(): boolean {\n    return this.grouping !== null;\n  }\n\n  private get hasIncrementalState(): boolean {\n    return (\n      this.dataMode === 'infinite' &&\n      (this.hasMore || this.loadingMore || !!this.loadMoreError?.trim())\n    );\n  }\n\n  private get selectable(): boolean {\n    return this.selectionMode === 'multiple';\n  }\n\n  private get visibleColumns(): TableColumn[] {\n    const cached = this.visibleColumnsCache;\n    if (\n      cached &&\n      cached.columns === this.columns &&\n      cached.columnCustomizer === this.columnCustomizer &&\n      cached.hiddenColumnIds === this.hiddenColumnIds &&\n      cached.columnOrder === this.columnOrder\n    ) {\n      return cached.value;\n    }\n    const value = resolveTableVisibleColumns(this.columns, {\n      columnCustomizer: this.columnCustomizer,\n      hiddenColumnIds: this.hiddenColumnIds,\n      columnOrder: this.columnOrder,\n    });\n    this.visibleColumnsCache = {\n      columns: this.columns,\n      columnCustomizer: this.columnCustomizer,\n      hiddenColumnIds: this.hiddenColumnIds,\n      columnOrder: this.columnOrder,\n      value,\n    };\n    return value;\n  }\n\n  private get showsColumnCustomizer(): boolean {\n    return this.columnCustomizer && this.captionVisibility === 'visible';\n  }\n\n  private get showsDataModeSwitcher(): boolean {\n    return this.dataModeSwitcher && this.captionVisibility === 'visible';\n  }\n\n  private get showsCaptionTrailing(): boolean {\n    return this.showsDataModeSwitcher || this.showsColumnCustomizer;\n  }\n\n  private get documentStickyHeader(): boolean {\n    return this.stickyHeader && !this.containedScroll;\n  }\n\n  private get fixedHeight(): boolean {\n    return !this.fitViewport && this.resolvedHeight !== undefined;\n  }\n\n  private get boundedComposition(): boolean {\n    return this.fitViewport || this.fixedHeight;\n  }\n\n  private get containedScroll(): boolean {\n    return this.boundedComposition || this.resolvedMaxHeight !== undefined;\n  }\n\n  private connectFitObserver(): void {\n    if (typeof ResizeObserver === 'undefined') return;\n    if (this.fitObservedViewport === this.viewportEl && this.fitObservedTable === this.tableEl) {\n      return;\n    }\n    this.disconnectFitObserver();\n    this.fitObservedViewport = this.viewportEl;\n    this.fitObservedTable = this.tableEl;\n    this.fitResizeObserver = new ResizeObserver(this.syncFitPageSize);\n    if (this.fitObservedViewport) this.fitResizeObserver.observe(this.fitObservedViewport);\n    if (this.fitObservedTable) this.fitResizeObserver.observe(this.fitObservedTable);\n  }\n\n  private disconnectFitObserver(): void {\n    this.fitResizeObserver?.disconnect();\n    this.fitResizeObserver = null;\n    this.fitObservedViewport = null;\n    this.fitObservedTable = null;\n  }\n\n  private connectCaptionCompactObserver(): void {\n    if (this.captionCompactDisconnect) return;\n    this.captionCompactDisconnect = observeTableCaptionCompact(this.el, compact => {\n      if (this.captionCompact !== compact) this.captionCompact = compact;\n    });\n  }\n\n  private disconnectCaptionCompactObserver(): void {\n    this.captionCompactDisconnect?.();\n    this.captionCompactDisconnect = undefined;\n  }\n\n  private readonly syncFitPageSize = (): void => {\n    const pagination = this.dataMode === 'pagination' ? this.pagination : null;\n    if (\n      !pagination?.fitToPage ||\n      pagination.fitToPageInactive ||\n      !this.containedScroll ||\n      !this.viewportEl ||\n      !this.tableEl\n    ) {\n      if (this.fitPageSize !== undefined) this.fitPageSize = undefined;\n      this.fitMeasurementPending = false;\n      return;\n    }\n    const header = this.tableEl.querySelector<HTMLElement>('.ds-table__head .ds-table__header-row');\n    const item = this.tableEl.querySelector<HTMLElement>(\n      this.grouped ? '.ds-table__group-row' : '.ds-table__body .ds-table__row'\n    );\n    const itemBlockSize =\n      item?.getBoundingClientRect().height ||\n      resolveCssLengthPx(\n        'var(--ds-table-row-min-block-size, var(--dimension-size-500))',\n        0,\n        this.rootEl ?? this.el\n      );\n    const next = resolveTableFitPageSize({\n      viewportBlockSize: this.viewportEl.clientHeight,\n      headerBlockSize: header?.getBoundingClientRect().height ?? 0,\n      itemBlockSize,\n    });\n    if (next !== this.fitPageSize) this.fitPageSize = next;\n    if (!this.fitMeasurementPending || pagination.pageSizeMode !== 'fit' || next === undefined) {\n      return;\n    }\n    this.fitMeasurementPending = false;\n    if (next === pagination.pageSize && pagination.pageIndex === 0) return;\n    this.dsPaginationChange.emit({\n      pageIndex: 0,\n      pageSize: next,\n      pageSizeMode: 'fit',\n      totalItems: pagination.totalItems,\n      pageSizeOptions: pagination.pageSizeOptions ?? [25, 50, 100, 200],\n      fitToPage: true,\n      fitToPageInactive: false,\n      fitPageSize: next,\n      fitPageSizeLabel: pagination.fitPageSizeLabel ?? 'Fit to page',\n      fitPageSizeTriggerLabel: pagination.fitPageSizeTriggerLabel ?? 'Fit',\n      itemLabel: pagination.itemLabel ?? 'items',\n      pageSizeLabel: pagination.pageSizeLabel ?? 'Items',\n      ariaLabel: pagination.ariaLabel ?? `${this.caption} pagination`,\n      showFirstLastButtons: pagination.showFirstLastButtons ?? false,\n      previousPageIndex: pagination.pageIndex,\n      previousPageSize: pagination.pageSize,\n      previousPageSizeMode: 'fit',\n      reason: 'fit',\n    });\n  };\n\n  @Listen('keydown', { target: 'window' })\n  handleWindowPaginationKeyDown(event: KeyboardEvent): void {\n    this.handlePaginationKeyDown(event, true);\n  }\n\n  private handlePaginationKeyDown(event: KeyboardEvent, fromWindow = false): void {\n    const pagination = this.dataMode === 'pagination' ? this.pagination : null;\n    if (\n      !pagination ||\n      this.loading ||\n      event.defaultPrevented ||\n      event.altKey ||\n      event.ctrlKey ||\n      event.metaKey ||\n      event.shiftKey ||\n      (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')\n    ) {\n      return;\n    }\n\n    if (paginationShortcutBlockedByPath(event.composedPath())) return;\n\n    if (fromWindow) {\n      const origin = event.composedPath()[0];\n      const originNode = origin instanceof Text ? origin.parentNode : origin;\n      if (\n        !shouldHandleContainingPagePaginationShortcut({\n          origin: originNode,\n          table: this.el,\n          eventPath: event.composedPath(),\n        })\n      ) {\n        return;\n      }\n    }\n\n    const state = resolvePaginationState(pagination);\n    const pageIndex = event.key === 'ArrowLeft' ? state.pageIndex - 1 : state.pageIndex + 1;\n    if (pageIndex < 0 || pageIndex >= state.totalPages) return;\n\n    event.preventDefault();\n    this.dsPaginationChange.emit({\n      pageIndex,\n      pageSize: state.pageSize,\n      pageSizeMode: state.pageSizeMode,\n      totalItems: state.totalItems,\n      pageSizeOptions: state.pageSizeOptions,\n      fitToPage: pagination.fitToPage ?? false,\n      fitToPageInactive: pagination.fitToPageInactive ?? false,\n      fitPageSize: this.fitPageSize ?? pagination.fitPageSize,\n      fitPageSizeLabel: pagination.fitPageSizeLabel ?? 'Fit to page',\n      fitPageSizeTriggerLabel: pagination.fitPageSizeTriggerLabel ?? 'Fit',\n      itemLabel: pagination.itemLabel ?? 'items',\n      pageSizeLabel: pagination.pageSizeLabel ?? 'Items',\n      ariaLabel: pagination.ariaLabel ?? `${this.caption} pagination`,\n      showFirstLastButtons: pagination.showFirstLastButtons ?? false,\n      previousPageIndex: state.pageIndex,\n      previousPageSize: state.pageSize,\n      previousPageSizeMode: state.pageSizeMode,\n      reason: 'page',\n    });\n  }\n\n  private currentLoadedRows(): TableRow[] {\n    return tableRows(this.rows, this.groups, this.grouped);\n  }\n\n  private currentLoadedRowCount(): number {\n    return this.grouped\n      ? this.groups.reduce((count, group) => count + group.rows.length, 0)\n      : this.rows.length;\n  }\n\n  private createRenderModel(): TableRenderModel {\n    const columns = this.visibleColumns;\n    const grouped = this.grouped;\n    const virtualCounts = this.dataMode === 'virtual';\n    const cached = this.renderModelCache;\n    if (\n      cached &&\n      cached.columns === columns &&\n      cached.rows === this.rows &&\n      cached.groups === this.groups &&\n      cached.grouped === grouped &&\n      cached.selectionMode === this.selectionMode &&\n      cached.selectedRowIds === this.selectedRowIds &&\n      cached.collapsedGroupIds === this.collapsedGroupIds &&\n      cached.virtualCounts === virtualCounts\n    ) {\n      return cached.value;\n    }\n    const value = createTableRenderModel({\n      columns,\n      rows: this.rows,\n      groups: this.groups,\n      grouped,\n      selectionMode: this.selectionMode,\n      selectedRowIds: this.selectedRowIds,\n      collapsedGroupIds: this.collapsedGroupIds,\n      groupCountPresentation: virtualCounts ? 'total' : 'loaded-progress',\n    });\n    this.renderModelCache = {\n      columns,\n      rows: this.rows,\n      groups: this.groups,\n      grouped,\n      selectionMode: this.selectionMode,\n      selectedRowIds: this.selectedRowIds,\n      collapsedGroupIds: this.collapsedGroupIds,\n      virtualCounts,\n      value,\n    };\n    return value;\n  }\n\n  private get highlightMatcher(): TableHighlightMatcher {\n    if (this.highlightMatcherCache?.terms === this.highlightTerms) {\n      return this.highlightMatcherCache.value;\n    }\n    const value = createTableHighlightMatcher(this.highlightTerms);\n    this.highlightMatcherCache = { terms: this.highlightTerms, value };\n    return value;\n  }\n\n  private get virtualizationEnabled(): boolean {\n    return this.dataMode === 'virtual' && this.hasVirtualViewportBounds;\n  }\n\n  private get virtualViewportMissing(): boolean {\n    return this.dataMode === 'virtual' && !this.hasVirtualViewportBounds;\n  }\n\n  private get hasVirtualViewportBounds(): boolean {\n    return this.containedScroll && this.estimateVirtualViewportSize() > 0;\n  }\n\n  private estimateVirtualViewportSize(): number {\n    const measured =\n      this.virtualController.currentViewportSize() || this.viewportEl?.clientHeight || 0;\n    const chrome =\n      (this.captionVisibility === 'visible' ? 48 : 0) + (this.hasResultFooter ? 48 : 0);\n    if (this.fixedHeight && this.resolvedHeight) {\n      if (measured > 0) return measured;\n      return Math.max(\n        0,\n        resolveCssLengthPx(this.resolvedHeight, 0, this.rootEl ?? this.el) - chrome\n      );\n    }\n    if (this.fitViewport) return Math.max(0, measured);\n    if (this.resolvedMaxHeight) {\n      if (this.resolvedMaxHeight.trim().toLowerCase() === 'none') return 0;\n      return resolveCssLengthPx(this.resolvedMaxHeight, 0, this.rootEl ?? this.el);\n    }\n    return 0;\n  }\n\n  private virtualPinnedRowIds(): Set<string> {\n    const pinned = new Set<string>();\n    if (this.focusedRowId) pinned.add(this.focusedRowId);\n    if (this.actionMenu?.rowId) pinned.add(this.actionMenu.rowId);\n    return pinned;\n  }\n\n  private syncVirtualItems(model: TableRenderModel): void {\n    if (this.dataMode !== 'virtual') {\n      this.virtualItems = [];\n      this.virtualItemsCache = null;\n      this.bodyRenderer.resetVirtualState();\n      return;\n    }\n    const columns = this.visibleColumns;\n    const cached = this.virtualItemsCache;\n    if (\n      cached &&\n      cached.columns === columns &&\n      cached.rows === this.rows &&\n      cached.groups === this.groups &&\n      cached.grouped === model.grouped &&\n      cached.collapsedGroupIds === this.collapsedGroupIds\n    ) {\n      return;\n    }\n    this.virtualItems = flattenTableVirtualItems({\n      grouped: model.grouped,\n      rows: this.rows,\n      groups: this.groups,\n      collapsedGroupIds: this.collapsedGroupIds,\n      columns,\n    });\n    this.virtualItemsCache = {\n      columns,\n      rows: this.rows,\n      groups: this.groups,\n      grouped: model.grouped,\n      collapsedGroupIds: this.collapsedGroupIds,\n    };\n  }\n\n  private shouldVirtualize(model: TableRenderModel): boolean {\n    return (\n      this.virtualizationEnabled && (model.hasData || (model.grouped && model.groups.length > 0))\n    );\n  }\n\n  private get resolvedMaxHeight(): string | undefined {\n    if (this.maxHeight == null || this.maxHeight === '') return undefined;\n    return typeof this.maxHeight === 'number' ? `${Math.max(0, this.maxHeight)}px` : this.maxHeight;\n  }\n\n  private get resolvedHeight(): string | undefined {\n    if (this.height == null || this.height === '') return undefined;\n    return typeof this.height === 'number' ? `${Math.max(0, this.height)}px` : this.height;\n  }\n\n  private warnModelIssues(): void {\n    const issues = tableModelIssues(this.columns, this.rows, this.groups, this.grouped);\n    const visibleColumns = this.visibleColumns;\n    if (!this.caption?.trim()) issues.unshift('A non-empty caption is required.');\n    if (this.grouping) {\n      const groupingColumn = this.columns.find(column => column.id === this.grouping!.columnId);\n      if (!groupingColumn) {\n        issues.push(`Grouping references unknown column id: ${this.grouping.columnId}`);\n      } else if (!visibleColumns.some(column => column.id === groupingColumn.id)) {\n        issues.push(`Grouping references hidden column id: ${this.grouping.columnId}`);\n      }\n    }\n    if (this.sort) {\n      const sortColumn = this.columns.find(\n        column =>\n          column.id === this.sort!.columnId ||\n          column.headerSegments?.some(segment => segment.sortKey === this.sort!.columnId)\n      );\n      if (!sortColumn) {\n        issues.push(`Sorting references unknown column id: ${this.sort.columnId}`);\n      } else if (!visibleColumns.some(column => column.id === sortColumn.id)) {\n        issues.push(`Sorting references hidden column id: ${this.sort.columnId}`);\n      }\n    }\n    if (\n      this.dataMode === 'virtual' &&\n      Number.isFinite(this.totalCount) &&\n      Math.max(0, Math.trunc(this.totalCount!)) !== this.currentLoadedRowCount()\n    ) {\n      issues.push('Virtual mode requires totalCount to match the complete supplied row count.');\n    }\n    const stickyStart = visibleColumns.filter(column => column.sticky === 'start');\n    const stickyEnd = visibleColumns.filter(column => column.sticky === 'end');\n    if (stickyStart.length > 1 || (this.selectable && stickyStart.length > 0)) {\n      issues.push(\n        'Only one sticky start column is supported, and row selection already owns that lane.'\n      );\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))\n        issues.push(`Sticky column ${column.id} requires an explicit size.`);\n    }\n    const message = issues.join(' ');\n    if (!message) {\n      this.previousModelWarning = '';\n      return;\n    }\n    if (message === this.previousModelWarning) return;\n    this.previousModelWarning = message;\n    console.warn(`[ds-table] ${message}`);\n  }\n\n  private scheduleModelIssueWarning(): void {\n    if (this.modelWarningQueued) return;\n    this.modelWarningQueued = true;\n    queueMicrotask(() => {\n      this.modelWarningQueued = false;\n      this.warnModelIssues();\n    });\n  }\n\n  private emitSort(column: TableColumn, sortKey = column.id): void {\n    if (!column.sortable) return;\n    this.dsSortChange.emit({ sort: nextTableSortState(this.sort, sortKey) });\n  }\n\n  private sortButtonLabel(column: TableColumn, sortKey = column.id, label = column.header): string {\n    if (this.sort?.columnId !== sortKey) return `Sort ${label} ascending`;\n    if (this.sort.direction === 'asc') return `Sort ${label} descending. Currently ascending.`;\n    return `Sort ${label} ascending. Currently descending.`;\n  }\n\n  private emitRowSelection(row: TableRow): void {\n    const next = toggleTableRowSelection(this.selectedRowIds, row);\n    const selected = next.includes(row.id);\n    this.dsSelectionChange.emit({\n      selectedRowIds: next,\n      scope: 'row',\n      changedRowId: row.id,\n      selected,\n    });\n  }\n\n  private emitAllSelection(): void {\n    const loadedRows = this.currentLoadedRows();\n    const selection = deriveTableSelectionState(loadedRows, this.selectedRowIds);\n    this.dsSelectionChange.emit({\n      selectedRowIds: toggleAllLoadedTableRows(this.selectedRowIds, loadedRows),\n      scope: 'all-loaded',\n      selected: !selection.allSelected,\n    });\n  }\n\n  private emitGroupSelection(group: TableGroup): void {\n    const state = deriveTableSelectionState(group.rows, this.selectedRowIds);\n    this.dsSelectionChange.emit({\n      selectedRowIds: toggleTableGroupSelection(this.selectedRowIds, group.rows),\n      scope: 'group',\n      groupId: group.id,\n      selected: !state.allSelected,\n    });\n  }\n\n  private rowEventOwnsActivation(event: Event): boolean {\n    const currentTarget = event.currentTarget;\n    return !event.composedPath().some(target => {\n      if (!(target instanceof HTMLElement) || target === currentTarget) return false;\n      return target.matches(\n        'button, a, input, select, textarea, [role=\"button\"], [role=\"checkbox\"], [popover], ds-button-unfilled, ds-menu'\n      );\n    });\n  }\n\n  private emitRowActivation(row: TableRow, event: Event): void {\n    if (!row.interactive || row.disabled || !this.rowEventOwnsActivation(event)) return;\n    this.dsRowActivate.emit({ rowId: row.id });\n  }\n\n  private syncActionMenu(): void {\n    if (!this.actionMenu) return;\n    const row = tableRows(this.rows, this.groups, this.grouped).find(\n      candidate => candidate.id === this.actionMenu?.rowId\n    );\n    const value = row && !row.disabled ? row.cells[this.actionMenu.columnId] : undefined;\n    if (!isTableCellAction(value) || !isRenderableTableActionMenu(value)) {\n      this.actionMenu = null;\n    }\n  }\n\n  private closeActionMenu(): void {\n    this.actionMenu = null;\n  }\n\n  private handleActionMenuSelect(item: MenuItemData): void {\n    const open = this.actionMenu;\n    const actionId = item.value;\n    if (!open || !actionId || item.isInactive) return;\n    this.dsCellAction.emit({\n      actionId,\n      rowId: open.rowId,\n      columnId: open.columnId,\n    });\n    const triggerId = tableActionTriggerId(this.actionMenuElementId, open.rowId, open.columnId);\n    this.closeActionMenu();\n    requestAnimationFrame(() => {\n      const trigger = this.el.querySelector<HTMLElement & { setFocus?: () => void }>(\n        `#${CSS.escape(triggerId)}`\n      );\n      trigger?.setFocus?.();\n    });\n  }\n\n  private toggleActionMenu(row: TableRow, column: TableColumn, event: MouseEvent): void {\n    if (row.disabled) return;\n    const open = this.actionMenu?.rowId === row.id && this.actionMenu?.columnId === column.id;\n    this.actionMenuInitialFocusVisible = event.detail === 0;\n    this.actionMenu = open ? null : { rowId: row.id, columnId: column.id };\n  }\n\n  private renderOverflowActionMenu() {\n    const open = this.actionMenu;\n    const row = open\n      ? tableRows(this.rows, this.groups, this.grouped).find(\n          candidate => candidate.id === open.rowId\n        )\n      : undefined;\n    const value = row && open ? row.cells[open.columnId] : undefined;\n    const menu = isTableCellAction(value) && isRenderableTableActionMenu(value) ? value : undefined;\n    const sections = menu ? tableActionMenuSections(menu.items) : [];\n    const triggerId = open\n      ? tableActionTriggerId(this.actionMenuElementId, open.rowId, open.columnId)\n      : undefined;\n\n    return (\n      <ds-menu\n        id={this.actionMenuElementId}\n        open={Boolean(open && sections.length)}\n        anchorId={triggerId}\n        align=\"end\"\n        side=\"bottom\"\n        menuLabel={menu?.ariaLabel ?? 'More actions'}\n        initialFocusVisible={this.actionMenuInitialFocusVisible}\n        sections={sections}\n        onDsClose={() => this.closeActionMenu()}\n        onDsSelect={event => this.handleActionMenuSelect(event.detail)}\n      />\n    );\n  }\n\n  private connectTruncateTooltip(): void {\n    if (this.truncateTooltipBound) return;\n    this.el.addEventListener('pointerover', this.onTruncatePointerOver);\n    this.el.addEventListener('pointerout', this.onTruncatePointerOut);\n    this.el.addEventListener('focusin', this.onTruncateFocusIn);\n    this.el.addEventListener('focusout', this.onTruncateFocusOut);\n    this.truncateTooltipBound = true;\n  }\n\n  private disconnectTruncateTooltip(): void {\n    if (!this.truncateTooltipBound) return;\n    this.el.removeEventListener('pointerover', this.onTruncatePointerOver);\n    this.el.removeEventListener('pointerout', this.onTruncatePointerOut);\n    this.el.removeEventListener('focusin', this.onTruncateFocusIn);\n    this.el.removeEventListener('focusout', this.onTruncateFocusOut);\n    this.truncateTooltipBound = false;\n    this.dismissTruncateTooltip();\n  }\n\n  private onTruncatePointerOver = (event: PointerEvent) => {\n    if (event.pointerType === 'touch') return;\n    const track = resolveTableTruncateTrack(event.target);\n    if (!track) return;\n    this.presentOrDismissTruncateTrack(track);\n  };\n\n  private onTruncatePointerOut = (event: PointerEvent) => {\n    if (event.pointerType === 'touch') return;\n    if (resolveTableTruncateTrack(event.relatedTarget)) return;\n    const next = event.relatedTarget;\n    const cell = this.truncateAnchor?.closest('.ds-table__cell');\n    if (cell && next instanceof Node && cell.contains(next)) return;\n    this.dismissTruncateTooltip();\n  };\n\n  private onTruncateFocusIn = (event: FocusEvent) => {\n    const track = resolveTableTruncateTrack(event.target);\n    if (!track) {\n      this.dismissTruncateTooltip();\n      return;\n    }\n    this.presentOrDismissTruncateTrack(track);\n  };\n\n  private onTruncateFocusOut = (event: FocusEvent) => {\n    if (resolveTableTruncateTrack(event.relatedTarget)) return;\n    this.dismissTruncateTooltip();\n  };\n\n  private presentOrDismissTruncateTrack(track: HTMLElement): void {\n    if (!isElementTruncated(track)) {\n      this.dismissTruncateTooltip();\n      return;\n    }\n    const label = tableTruncateLabel(track);\n    if (!label) {\n      this.dismissTruncateTooltip();\n      return;\n    }\n    this.truncateAnchor = track;\n    this.truncateTooltipLabel = label;\n    void this.truncateTooltipEl?.presentFrom(track, label);\n  }\n\n  private dismissTruncateTooltip(): void {\n    this.truncateAnchor = null;\n    if (!this.truncateTooltipLabel && !this.truncateTooltipEl) return;\n    this.truncateTooltipLabel = '';\n    void this.truncateTooltipEl?.dismiss();\n  }\n\n  private renderTruncateTooltip() {\n    return (\n      <ds-tooltip\n        ref={element => {\n          this.truncateTooltipEl = element;\n        }}\n        label={this.truncateTooltipLabel}\n        describedBy={false}\n        wrapLabel={true}\n        size=\"sm\"\n        delay={0}\n        side=\"top\"\n      />\n    );\n  }\n\n  private handleRowKeydown(row: TableRow, event: KeyboardEvent): void {\n    if (event.target !== event.currentTarget || (event.key !== 'Enter' && event.key !== ' '))\n      return;\n    event.preventDefault();\n    this.emitRowActivation(row, event);\n  }\n\n  private onVirtualFocusIn = (event: FocusEvent): void => {\n    const target = event.target;\n    if (!(target instanceof HTMLElement)) return;\n    const row = target.closest('[data-row-id]');\n    const id = row?.getAttribute('data-row-id') ?? null;\n    if (id === this.focusedRowId) return;\n    this.focusedRowId = id;\n    if (this.virtualizationEnabled) this.virtualController.schedule();\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 class={`ds-table__sticky-edge ds-table__sticky-edge--${sticky}`} aria-hidden=\"true\" />\n    );\n  }\n\n  private renderCollapseAllButton() {\n    return (\n      <ds-button-unfilled\n        class=\"ds-table__collapse-all\"\n        variant=\"icon\"\n        icon=\"ChevronDownUp\"\n        size=\"xs\"\n        style={{ width: 'var(--dimension-size-300)' }}\n        aria-label=\"Collapse all groups\"\n        hasBorder={false}\n        activeFill={false}\n        pressScale={false}\n        onDsClick={event => {\n          event.stopPropagation();\n          this.emitAllGroupsCollapse();\n        }}\n      />\n    );\n  }\n\n  private renderFloatingCollapseAll(model: TableRenderModel) {\n    if (model.collapseAllHost?.mode !== 'floating') return null;\n    return (\n      <span\n        class=\"ds-table__collapse-all-overlay\"\n        ref={element => {\n          this.collapseAllOverlayEl = element ?? null;\n        }}\n      >\n        <span class=\"ds-table__collapse-all-surface ds-control-elevation ds-control-elevation--md\">\n          {this.renderCollapseAllButton()}\n        </span>\n      </span>\n    );\n  }\n\n  private renderColumnHeader(\n    column: TableColumn,\n    model: TableRenderModel,\n    interactive = true,\n    presentational = false\n  ) {\n    const groupedColumn = this.grouping?.columnId === column.id;\n    const headerSegments = column.headerSegments?.length\n      ? column.headerSegments\n      : [{ label: column.header, sortKey: column.id }];\n    const activeMemberSegment = headerSegments.find(\n      segment => segment.sortKey === this.sort?.columnId\n    );\n    const activeMemberSort = !!activeMemberSegment;\n    const activeSort = activeMemberSort;\n    const align = column.align ?? 'start';\n    const direction = activeMemberSort ? this.sort!.direction : undefined;\n    const memberAriaSort = activeMemberSort\n      ? this.sort!.direction === 'asc'\n        ? 'ascending'\n        : 'descending'\n      : undefined;\n\n    const help = column.help?.trim();\n    const labels = (\n      <span\n        class=\"ds-table__header-labels\"\n        tabIndex={interactive && help && !column.sortable ? 0 : undefined}\n        data-header-help={help ? '' : undefined}\n      >\n        {headerSegments.map((segment, index) => {\n          const segmentActive = activeMemberSegment?.sortKey === segment.sortKey;\n          const segmentInteractive = interactive && !!column.sortable;\n          const label = (\n            <ds-text\n              class=\"ds-table__header-label-box ds-control-label-box\"\n              as=\"span\"\n              variant=\"text-caption\"\n              emphasis={segmentActive}\n              color=\"inherit\"\n              decoration={help ? 'dotted-underline' : undefined}\n              lineTruncation={1}\n            >\n              {segment.label}\n            </ds-text>\n          );\n          const control = segmentInteractive ? (\n            <button\n              class=\"ds-table__header-label ds-table__header-label--interactive ds-focus-ring\"\n              type=\"button\"\n              aria-label={this.sortButtonLabel(\n                column,\n                segment.sortKey,\n                segment.dataLabel?.trim() || segment.label\n              )}\n              data-sort-control=\"label\"\n              data-sort-key={segment.sortKey}\n              data-sort-active={segmentActive ? 'true' : undefined}\n              onClick={() => this.emitSort(column, segment.sortKey)}\n            >\n              {label}\n            </button>\n          ) : (\n            <span class=\"ds-table__header-label ds-table__header-static\">{label}</span>\n          );\n\n          return (\n            <span class=\"ds-table__header-segment\" key={segment.sortKey}>\n              {control}\n              {index < headerSegments.length - 1 && (\n                <ds-text\n                  class=\"ds-table__header-separator\"\n                  as=\"span\"\n                  variant=\"text-caption\"\n                  color=\"tertiary\"\n                  aria-hidden=\"true\"\n                >\n                  {segment.separator ?? '/'}\n                </ds-text>\n              )}\n            </span>\n          );\n        })}\n      </span>\n    );\n    const labelControl =\n      interactive && help ? (\n        <ds-tooltip label={help} side=\"top\" size=\"sm\" wrapLabel={true}>\n          {labels}\n        </ds-tooltip>\n      ) : (\n        labels\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 =\n      collapseHost?.mode === 'action' && collapseHost.columnId === column.id;\n    const blankActionCollapseHost =\n      actionCollapseHost && !column.header.trim() && !column.headerSegments?.length;\n    const collapseControl =\n      interactive && actionCollapseHost ? (\n        <span class=\"ds-table__collapse-slot\">{this.renderCollapseAllButton()}</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    const beforeSpacer =\n      model.elasticSpacerIndex == null\n        ? this.visibleColumns\n        : this.visibleColumns.slice(0, model.elasticSpacerIndex);\n    const afterSpacer =\n      model.elasticSpacerIndex == null ? [] : this.visibleColumns.slice(model.elasticSpacerIndex);\n    const renderColumn = (column: TableColumn) => {\n      const width = tableColumnSize(column);\n      return (\n        <col\n          key={column.id}\n          class={{ 'ds-table__action-column': column.kind === 'action' }}\n          style={width ? { width } : undefined}\n        />\n      );\n    };\n    return (\n      <colgroup>\n        {model.selectable && <col class=\"ds-table__selection-column\" />}\n        {beforeSpacer.map(renderColumn)}\n        {model.elasticSpacerIndex != null && <col class=\"ds-table__elastic-spacer-column\" />}\n        {afterSpacer.map(renderColumn)}\n      </colgroup>\n    );\n  }\n\n  private renderHeader(\n    model: TableRenderModel,\n    interactive = true,\n    presentational = false,\n    ariaRowIndex?: number\n  ) {\n    const selection = model.selection;\n    const beforeSpacer =\n      model.elasticSpacerIndex == null\n        ? this.visibleColumns\n        : this.visibleColumns.slice(0, model.elasticSpacerIndex);\n    const afterSpacer =\n      model.elasticSpacerIndex == null ? [] : this.visibleColumns.slice(model.elasticSpacerIndex);\n    return (\n      <thead\n        class={{\n          'ds-table__head': true,\n          'ds-table__head--semantic-copy': !interactive,\n        }}\n        ref={element => {\n          if (interactive) this.interactiveHeadEl = element ?? null;\n        }}\n      >\n        <tr class=\"ds-table__header-row\" aria-rowindex={ariaRowIndex}>\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 ? (\n                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              ) : (\n                <span class=\"ds-visually-hidden\">Select rows</span>\n              )}\n              {this.renderStickyEdge('start')}\n            </th>\n          )}\n          {beforeSpacer.map(column =>\n            this.renderColumnHeader(column, model, interactive, presentational)\n          )}\n          {model.elasticSpacerIndex != null && (\n            <th\n              class=\"ds-table__header-cell ds-table__elastic-spacer-cell\"\n              aria-hidden=\"true\"\n              role=\"presentation\"\n              data-elastic-spacer=\"true\"\n            />\n          )}\n          {afterSpacer.map(column =>\n            this.renderColumnHeader(column, model, interactive, presentational)\n          )}\n        </tr>\n      </thead>\n    );\n  }\n\n  private renderRow(\n    row: TableRow,\n    model: TableRenderModel,\n    ariaRowIndex?: number,\n    variableVirtualSize = false,\n    rowKey = row.id\n  ) {\n    return renderTableRowView({\n      row,\n      model,\n      visibleColumns: this.visibleColumns,\n      emptyCellLabel: this.emptyCellLabel,\n      actionMenuElementId: this.actionMenuElementId,\n      actionMenu: this.actionMenu,\n      highlightMatcher: this.highlightMatcher,\n      highlightFieldIds: this.highlightFieldIds,\n      ariaRowIndex,\n      variableVirtualSize,\n      rowKey,\n      renderSelectionControl: (label, checked, indeterminate, disabled, onActivate) =>\n        this.renderSelectionControl(label, checked, indeterminate, disabled, onActivate),\n      renderStickyEdge: sticky => this.renderStickyEdge(sticky),\n      onRowActivate: (targetRow, event) => this.emitRowActivation(targetRow, event),\n      onRowKeyDown: (targetRow, event) => this.handleRowKeydown(targetRow, event),\n      onRowSelection: targetRow => this.emitRowSelection(targetRow),\n      onCellAction: detail => this.dsCellAction.emit(detail),\n      onActionMenuToggle: (targetRow, column, event) =>\n        this.toggleActionMenu(targetRow, column, event),\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      countLabel,\n      collapsed: isCollapsed,\n      labelColor,\n      selection: groupSelection,\n    } = groupModel;\n    return (\n      <span class=\"ds-table__group-content\">\n        {groupSelection && (\n          <span class=\"ds-table__group-selection\">\n            {this.renderSelectionControl(\n              groupSelection.allSelected\n                ? `Deselect loaded rows in ${group.label} group`\n                : `Select loaded rows in ${group.label} group`,\n              groupSelection.allSelected,\n              groupSelection.indeterminate,\n              groupSelection.selectableRowIds.length === 0,\n              () => this.emitGroupSelection(group)\n            )}\n          </span>\n        )}\n        <span class=\"ds-table__group-copy\">\n          <ds-text\n            class=\"ds-table__group-label\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            emphasis={true}\n            color={labelColor}\n          >\n            {group.label}\n          </ds-text>\n          <ds-text\n            class=\"ds-table__group-separator\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            color=\"secondary\"\n            aria-hidden=\"true\"\n          >\n            ·\n          </ds-text>\n          <ds-text\n            class=\"ds-table__group-count\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            color=\"secondary\"\n            aria-hidden=\"true\"\n          >\n            {groupModel.visibleCountText}\n          </ds-text>\n          <span class=\"ds-visually-hidden\">{countLabel}</span>\n        </span>\n        <ds-button-unfilled\n          class=\"ds-table__group-toggle\"\n          variant=\"icon\"\n          size=\"md\"\n          isInset={true}\n          insetDepth=\"double\"\n          icon={isCollapsed ? 'ChevronDown' : 'ChevronUp'}\n          expanded={!isCollapsed}\n          aria-label={isCollapsed ? `Expand ${group.label} group` : `Collapse ${group.label} group`}\n          hasBorder={false}\n          onDsClick={event => {\n            event.stopPropagation();\n            this.emitGroupCollapse(group);\n          }}\n        />\n      </span>\n    );\n  }\n\n  private formatGroupLoadLabel(template: string, group: TableGroup): string {\n    return template.split('{group}').join(group.label);\n  }\n\n  private renderGroupLoadRow(group: TableGroup, totalColumns: number) {\n    const error = group.loadMoreError?.trim();\n    if (!error && !group.loadingMore && !group.hasMore) return null;\n    const manualFallback =\n      this.loadMoreMode === 'manual' || !this.groupLoadController.intersectionSupported;\n\n    return (\n      <tr\n        class=\"ds-table__load-row ds-table__group-load-row\"\n        data-group-id={group.id}\n        ref={element => {\n          if (element) this.groupSentinelEls.set(group.id, element);\n          else this.groupSentinelEls.delete(group.id);\n        }}\n      >\n        <td class=\"ds-table__load-cell\" colSpan={totalColumns}>\n          <div class=\"ds-table__viewport-band ds-table__load-band\">\n            {renderTableLoadContent({\n              error,\n              loading: !!group.loadingMore,\n              hasMore: !!group.hasMore,\n              manualFallback,\n              retryLabel: this.formatGroupLoadLabel(this.groupRetryLabel, group),\n              loadingLabel: this.formatGroupLoadLabel(this.groupLoadingMoreLabel, group),\n              loadMoreLabel: this.groupLoadMoreLabel,\n              loadMoreAriaLabel: this.formatGroupLoadLabel(this.groupLoadMoreAriaLabel, group),\n              onRetry: () => this.groupLoadController.request(group.id, 'retry'),\n              onLoadMore: () => this.groupLoadController.request(group.id, 'manual'),\n            })}\n          </div>\n        </td>\n      </tr>\n    );\n  }\n\n  private renderStickyGroup(model: TableRenderModel) {\n    if (!this.documentStickyHeader || !this.activeStickyGroupId) return null;\n    const groupModel = model.groups.find(item => item.group.id === this.activeStickyGroupId);\n    if (!groupModel) return null;\n    return (\n      <div\n        class={{\n          'ds-table__sticky-group': true,\n          'ds-table__sticky-group--selectable': model.selectable,\n          [groupModel.intentClass ?? '']: !!groupModel.intentClass,\n        }}\n        data-group-id={groupModel.group.id}\n        data-group-intent={groupModel.intent}\n      >\n        {this.renderGroupContent(groupModel)}\n      </div>\n    );\n  }\n\n  private renderDataBodies(model: TableRenderModel, plan: TableVirtualPlan | null) {\n    return this.bodyRenderer.render({\n      model,\n      plan,\n      rows: this.rows,\n      stickyHeader: this.stickyHeader,\n      documentStickyHeader: this.documentStickyHeader,\n      activeStickyGroupId: this.activeStickyGroupId,\n      renderRow: (row, renderModel, ariaRowIndex, variableVirtualSize, rowKey) =>\n        this.renderRow(row, renderModel, ariaRowIndex, variableVirtualSize, rowKey),\n      renderGroupContent: groupModel => this.renderGroupContent(groupModel),\n      renderGroupLoadRow: (group, totalColumns) => this.renderGroupLoadRow(group, totalColumns),\n    });\n  }\n\n  private renderSkeletonBody(model: TableRenderModel) {\n    return renderTableSkeletonBody({\n      model,\n      visibleColumns: this.visibleColumns,\n      skeletonRows: this.skeletonRows,\n      renderStickyEdge: sticky => this.renderStickyEdge(sticky),\n    });\n  }\n\n  private renderStateBody(kind: 'empty' | 'error' | 'virtual-viewport', totalColumns: number) {\n    const error = kind !== 'empty';\n    const heading =\n      kind === 'virtual-viewport'\n        ? TABLE_VIRTUAL_VIEWPORT_REQUIRED_HEADING\n        : error\n          ? this.errorHeading\n          : this.emptyHeading;\n    const body =\n      kind === 'virtual-viewport'\n        ? TABLE_VIRTUAL_VIEWPORT_REQUIRED_BODY\n        : error\n          ? this.errorBody\n          : this.emptyBody;\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={heading}\n                body={body}\n              />\n            </div>\n          </td>\n        </tr>\n      </tbody>\n    );\n  }\n\n  private renderLazyBody(model: TableRenderModel) {\n    if (\n      this.dataMode !== 'infinite' ||\n      !this.incrementalWindowActive ||\n      !model.hasData ||\n      model.grouped\n    )\n      return null;\n    const error = this.loadMoreError?.trim();\n    const manualFallback =\n      this.loadMoreMode === 'manual' || !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              {renderTableLoadContent({\n                error,\n                loading: this.loadingMore,\n                hasMore: this.hasMore,\n                manualFallback,\n                retryLabel: this.retryLabel,\n                loadingLabel: this.loadingMoreLabel,\n                loadMoreLabel: this.loadMoreLabel,\n                endOfResultsLabel: this.endOfResultsLabel,\n                onRetry: () => this.loadController.request('retry'),\n                onLoadMore: () => this.loadController.request('manual'),\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 class=\"ds-table__document-sticky-header\">\n        <table\n          class={{\n            'ds-table__table': true,\n            'ds-table__sticky-header-table': true,\n            'ds-table__table--selectable': model.selectable,\n            'ds-table__table--grouped': model.grouped,\n          }}\n          style={model.tableStyle}\n          role=\"presentation\"\n          ref={element => {\n            this.stickyHeaderTableEl = element ?? null;\n          }}\n        >\n          {this.renderColgroup(model)}\n          {this.renderHeader(model, true, true)}\n        </table>\n        {this.renderFloatingCollapseAll(model)}\n      </div>\n    );\n  }\n\n  private get resultSummary(): string | null {\n    if (this.dataMode === 'pagination') return null;\n    if (this.dataMode === 'virtual') {\n      return formatTableTotalSummary(this.currentLoadedRowCount(), this.resultTotalSummaryLabel);\n    }\n    return formatTableResultSummary(this.displayedCount, this.totalCount, this.resultSummaryLabel);\n  }\n\n  private get hasResultFooter(): boolean {\n    return (\n      (this.dataMode === 'pagination' && !!this.pagination) ||\n      !!this.resultSummary ||\n      this.footerSlotPresence !== 0\n    );\n  }\n\n  private renderResultFooter() {\n    const summary = this.resultSummary;\n    const hasLeading = (this.footerSlotPresence & TABLE_FOOTER_SLOT_LEADING) !== 0;\n    const hasCopy = (this.footerSlotPresence & TABLE_FOOTER_SLOT_COPY) !== 0;\n    const hasTrailing = (this.footerSlotPresence & TABLE_FOOTER_SLOT_TRAILING) !== 0;\n    const pagination = this.dataMode === 'pagination' ? this.pagination : null;\n    if (!this.hasResultFooter) return null;\n    return (\n      <div class=\"ds-table__footer ds-table__bar ds-chrome-header ds-control--md\">\n        <div class=\"ds-table__bar-copy ds-chrome-header__copy ds-control--md\">\n          {hasLeading && (\n            <div class=\"ds-table__bar-status ds-chrome-header__heading\">\n              <slot name=\"footer-leading\" onSlotchange={this.syncFooterSlotPresence} />\n            </div>\n          )}\n          {hasCopy ? (\n            <slot name=\"footer\" onSlotchange={this.syncFooterSlotPresence} />\n          ) : summary ? (\n            <ds-text\n              class=\"ds-table__footer-summary ds-table__bar-text\"\n              as=\"span\"\n              variant=\"text-body-medium\"\n              color=\"secondary\"\n              lineTruncation={1}\n            >\n              {summary}\n            </ds-text>\n          ) : null}\n        </div>\n        {(pagination || hasTrailing) && (\n          <div class=\"ds-table__bar-trailing ds-chrome-header__trailing\">\n            {pagination && (\n              <ds-pagination\n                pageIndex={pagination.pageIndex}\n                pageSize={pagination.pageSize}\n                pageSizeMode={pagination.pageSizeMode ?? 'fixed'}\n                totalItems={pagination.totalItems}\n                pageSizeOptions={pagination.pageSizeOptions ?? [25, 50, 100, 200]}\n                fitToPage={pagination.fitToPage ?? false}\n                {...{ fitToPageInactive: pagination.fitToPageInactive ?? false }}\n                fitPageSize={this.fitPageSize ?? pagination.fitPageSize}\n                fitPageSizeLabel={pagination.fitPageSizeLabel ?? 'Fit to page'}\n                fitPageSizeTriggerLabel={pagination.fitPageSizeTriggerLabel ?? 'Fit'}\n                itemLabel={pagination.itemLabel ?? 'items'}\n                pageSizeLabel={pagination.pageSizeLabel ?? 'Items'}\n                label={pagination.ariaLabel ?? `${this.caption} pagination`}\n                showFirstLastButtons={pagination.showFirstLastButtons ?? false}\n                loading={this.loading}\n                onDsChange={(event: CustomEvent<PaginationChangeDetail>) =>\n                  this.dsPaginationChange.emit(event.detail)\n                }\n              />\n            )}\n            <slot name=\"footer-trailing\" onSlotchange={this.syncFooterSlotPresence} />\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\n          class={{\n            'ds-table__caption-content': true,\n            'ds-table__caption-content--trailing': this.showsCaptionTrailing,\n          }}\n        >\n          <div\n            class={{\n              'ds-table__caption-leading': true,\n              'ds-table__caption-leading--toolbar': this.headerUsesToolbar,\n            }}\n          >\n            <slot name=\"header\" onSlotchange={this.syncHeaderSlotPresence} />\n            {!this.headerPresent ? (\n              <ds-text\n                class=\"ds-table__caption-title ds-table__bar-text\"\n                as=\"div\"\n                variant=\"text-title-small\"\n                emphasis={true}\n                color=\"primary\"\n                aria-hidden=\"true\"\n              >\n                {this.caption}\n              </ds-text>\n            ) : null}\n          </div>\n          {this.renderCaptionTrailing()}\n        </div>\n      </div>\n    );\n  }\n\n  private renderCaptionTrailing() {\n    if (!this.showsCaptionTrailing) return null;\n    return (\n      <div class=\"ds-table__caption-trailing\">\n        {this.renderColumnCustomizerTrigger()}\n        {this.showsColumnCustomizer && this.showsDataModeSwitcher ? (\n          <ds-divider orientation=\"vertical\" length=\"32px\" />\n        ) : null}\n        {this.renderDataModeSwitcherTrigger()}\n      </div>\n    );\n  }\n\n  private renderDataModeSwitcherTrigger() {\n    if (!this.showsDataModeSwitcher) return null;\n    if (this.chromeLoading) {\n      return <ds-skeleton variant=\"control\" controlSize=\"md\" width=\"var(--dimension-size-400)\" />;\n    }\n    return (\n      <span class=\"ds-table__caption-mode-switcher\">\n        <ds-tooltip label={this.dataModeSwitcherLabel} side=\"top\" size=\"sm\">\n          <ds-button-unfilled\n            id={`${this.dataModeSwitcherElementId}-trigger`}\n            variant=\"icon\"\n            size=\"md\"\n            icon=\"Ellipses\"\n            aria-label={this.dataModeSwitcherLabel}\n            hasMenu={true}\n            expanded={this.dataModeSwitcherOpen}\n            controls={this.dataModeSwitcherElementId}\n            activeFill={false}\n            pressScale={false}\n            onDsClick={(event: CustomEvent<MouseEvent>) => {\n              this.toggleDataModeSwitcher(event.detail.detail === 0);\n            }}\n          />\n        </ds-tooltip>\n      </span>\n    );\n  }\n\n  private renderDataModeSwitcherMenu() {\n    if (!this.showsDataModeSwitcher || this.chromeLoading) return null;\n    return (\n      <ds-menu\n        id={this.dataModeSwitcherElementId}\n        open={this.dataModeSwitcherOpen}\n        anchorId={`${this.dataModeSwitcherElementId}-trigger`}\n        align=\"end\"\n        side=\"bottom\"\n        menuLabel={this.dataModeMenuLabel}\n        initialFocusVisible={this.dataModeSwitcherInitialFocusVisible}\n        items={tableDataModeMenuItems(this.dataMode, {\n          infinite: this.infiniteModeLabel,\n          pagination: this.paginationModeLabel,\n          virtual: this.virtualModeLabel,\n        })}\n        onDsClose={() => this.closeDataModeSwitcher()}\n        onDsSelect={event => this.handleDataModeSwitcherSelect(event.detail)}\n      />\n    );\n  }\n\n  private toggleDataModeSwitcher(fromKeyboard = false): void {\n    if (this.dataModeSwitcherOpen) this.closeDataModeSwitcher();\n    else this.openDataModeSwitcher(fromKeyboard);\n  }\n\n  private openDataModeSwitcher(fromKeyboard = false): void {\n    if (!this.showsDataModeSwitcher || this.dataModeSwitcherOpen) return;\n    this.closeColumnCustomizer();\n    this.dataModeSwitcherInitialFocusVisible = fromKeyboard;\n    this.dataModeSwitcherOpen = true;\n  }\n\n  private closeDataModeSwitcher(): void {\n    this.dataModeSwitcherOpen = false;\n  }\n\n  private handleDataModeSwitcherSelect(item: MenuItemData): void {\n    const dataMode = tableDataModeFromMenuItem(item);\n    if (!dataMode) return;\n    this.closeDataModeSwitcher();\n    if (dataMode !== this.dataMode) this.dsDataModeChange.emit({ dataMode });\n    requestAnimationFrame(() => {\n      this.el\n        .querySelector<\n          HTMLElement & { setFocus?: () => void }\n        >(`#${CSS.escape(`${this.dataModeSwitcherElementId}-trigger`)}`)\n        ?.setFocus?.();\n    });\n  }\n\n  private renderColumnCustomizerTrigger() {\n    if (!this.showsColumnCustomizer) return null;\n    return (\n      <div\n        class={{\n          'ds-table__caption-customizer': true,\n          'ds-table__caption-customizer--loading': this.chromeLoading,\n        }}\n        aria-hidden={this.chromeLoading ? 'true' : undefined}\n      >\n        <ds-tooltip label={this.captionCompact ? 'Customize' : ''} side=\"top\" size=\"sm\">\n          <ds-button-unfilled\n            id={`${this.columnCustomizerElementId}-trigger`}\n            variant={this.captionCompact ? 'icon' : 'icon-label'}\n            size=\"md\"\n            icon=\"Table\"\n            label=\"Customize\"\n            labelEmphasis={false}\n            pressScale={false}\n            aria-label=\"Customize table\"\n            hasMenu={true}\n            expanded={this.columnCustomizerOpen}\n            controls={this.columnCustomizerElementId}\n            onDsClick={(event: CustomEvent<MouseEvent>) => {\n              if (this.chromeLoading) return;\n              this.toggleColumnCustomizer(event.detail.detail === 0);\n            }}\n          />\n        </ds-tooltip>\n        {this.chromeLoading ? (\n          <ds-skeleton variant=\"control\" controlSize=\"md\" width=\"100%\" />\n        ) : null}\n      </div>\n    );\n  }\n\n  private renderColumnCustomizerMenu() {\n    if (!this.showsColumnCustomizer || this.chromeLoading) return null;\n    return (\n      <ds-menu\n        id={this.columnCustomizerElementId}\n        open={this.columnCustomizerOpen}\n        anchorId={`${this.columnCustomizerElementId}-trigger`}\n        align=\"end\"\n        side=\"bottom\"\n        menuLabel=\"Customize table\"\n        initialFocusVisible={this.columnCustomizerInitialFocusVisible}\n        items={tableColumnCustomizerMenuItems(this.columns, this.hiddenColumnIds, this.columnOrder)}\n        onDsClose={() => this.closeColumnCustomizer()}\n        onDsSelect={event => this.handleColumnCustomizerSelect(event.detail)}\n        onDsReorder={event => this.handleColumnCustomizerReorder(event.detail)}\n      />\n    );\n  }\n\n  private toggleColumnCustomizer(fromKeyboard = false): void {\n    if (this.columnCustomizerOpen) this.closeColumnCustomizer();\n    else this.openColumnCustomizer(fromKeyboard);\n  }\n\n  private openColumnCustomizer(fromKeyboard = false): void {\n    if (!this.showsColumnCustomizer || this.columnCustomizerOpen) return;\n    this.closeDataModeSwitcher();\n    this.columnCustomizerInitialFocusVisible = fromKeyboard;\n    this.columnCustomizerOpen = true;\n  }\n\n  private closeColumnCustomizer(): void {\n    this.columnCustomizerOpen = false;\n  }\n\n  private emitColumnsConfigChange(hiddenColumnIds: string[], columnOrder: string[]): void {\n    this.dsColumnsConfigChange.emit({\n      hiddenColumnIds: resolveTableHiddenColumnIds(this.columns, hiddenColumnIds),\n      columnOrder: resolveTableColumnOrder(this.columns, columnOrder),\n    });\n  }\n\n  private handleColumnCustomizerReorder(detail: MenuReorderDetail): void {\n    const order = detail.items\n      .filter(item => item.reorderable)\n      .map(item => item.value)\n      .filter((id): id is string => !!id);\n    this.emitColumnsConfigChange(this.hiddenColumnIds, order);\n  }\n\n  private handleColumnCustomizerSelect(item: MenuItemData): void {\n    const columnId = item.value;\n    if (!columnId || item.isInactive) return;\n    this.emitColumnsConfigChange(\n      toggleTableColumnHidden(this.columns, this.hiddenColumnIds, columnId),\n      resolveTableColumnOrder(this.columns, this.columnOrder)\n    );\n  }\n\n  render() {\n    this.groupSentinelEls.clear();\n    const model = this.createRenderModel();\n    this.syncVirtualItems(model);\n    this.renderedModel = model;\n    const regionLabel = this.scrollLabel?.trim() || `${this.caption} scroll area`;\n    const initialLoading = this.loading && !model.hasData;\n    const initialError = !model.hasData && this.error;\n    const hasGroupedStructure = model.grouped && model.groups.length > 0;\n    const virtualize = this.shouldVirtualize(model);\n    const virtualViewportMissing =\n      this.virtualViewportMissing && !initialLoading && (model.hasData || hasGroupedStructure);\n    const virtualPlan = virtualize\n      ? (this.virtualWindow ??\n        resolveTableVirtualPlan({\n          items: this.virtualItems,\n          sizes: this.virtualItems.map(item => this.virtualController.sizeFor(item)),\n          scrollOffset: this.viewportEl?.scrollTop ?? 0,\n          viewportSize: this.estimateVirtualViewportSize(),\n          pinnedRowIds: this.virtualPinnedRowIds(),\n        }))\n      : null;\n    const groupLoadingMore = hasGroupedStructure && this.groups.some(group => group.loadingMore);\n    const viewportStyle =\n      !this.boundedComposition && this.resolvedMaxHeight\n        ? { '--ds-table-max-block-size': this.resolvedMaxHeight }\n        : undefined;\n    const hostStyle = this.fixedHeight\n      ? { '--_table-fixed-block-size': this.resolvedHeight }\n      : undefined;\n\n    return (\n      <Host\n        class={{\n          'table-host': true,\n          'table-host--bounded': this.boundedComposition,\n          'table-host--fixed-height': this.fixedHeight,\n          'table-host--viewport-fit': this.fitViewport,\n        }}\n        style={hostStyle}\n        onKeyDown={(event: KeyboardEvent) => this.handlePaginationKeyDown(event)}\n        onFocusin={this.onVirtualFocusIn}\n      >\n        <div\n          class={{\n            'ds-table': true,\n            'ds-table--bounded': this.boundedComposition,\n            'ds-table--contained-scroll': this.containedScroll,\n            'ds-table--fixed-height': this.fixedHeight,\n            'ds-table--viewport-fit': this.fitViewport,\n            'ds-table--viewport-fit-pending': this.fitViewport && !this.viewportFitSettled,\n            'ds-table--viewport-fit-settled': this.fitViewport && this.viewportFitSettled,\n            'ds-table--sticky-header': this.stickyHeader,\n            'ds-table--document-sticky-header': this.documentStickyHeader,\n            'ds-table--contained-sticky-header': this.stickyHeader && !this.documentStickyHeader,\n            'ds-table--caption-visible': this.captionVisibility === 'visible',\n            'ds-table--footer-visible': this.hasResultFooter,\n            'ds-table--state-fill':\n              !initialLoading &&\n              (initialError || virtualViewportMissing || !(model.hasData || hasGroupedStructure)),\n          }}\n          ref={element => {\n            this.rootEl = element ?? null;\n          }}\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--virtual': virtualize,\n                  'ds-table__table--native-group-sticky':\n                    (model.grouped && this.stickyHeader && !this.documentStickyHeader) ||\n                    virtualize,\n                }}\n                style={model.tableStyle}\n                aria-rowcount={virtualize ? 1 + this.virtualItems.length : undefined}\n                aria-busy={\n                  initialLoading ||\n                  (this.dataMode === 'infinite' && (this.loadingMore || groupLoadingMore))\n                    ? 'true'\n                    : undefined\n                }\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(\n                  model,\n                  !this.documentStickyHeader,\n                  false,\n                  virtualize ? 1 : undefined\n                )}\n                {initialLoading\n                  ? this.renderSkeletonBody(model)\n                  : initialError\n                    ? this.renderStateBody('error', model.totalColumns)\n                    : virtualViewportMissing\n                      ? this.renderStateBody('virtual-viewport', model.totalColumns)\n                      : model.hasData || hasGroupedStructure\n                        ? this.renderDataBodies(model, virtualPlan)\n                        : this.renderStateBody('empty', model.totalColumns)}\n                {!initialLoading &&\n                  !initialError &&\n                  this.dataMode !== 'virtual' &&\n                  this.renderLazyBody(model)}\n              </table>\n            </div>\n          </div>\n          {this.renderResultFooter()}\n          {this.renderOverflowActionMenu()}\n          {this.renderDataModeSwitcherMenu()}\n          {this.renderColumnCustomizerMenu()}\n          {this.renderTruncateTooltip()}\n          <div class=\"ds-visually-hidden\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n            {this.announcement}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     },
     {
@@ -1310,7 +1343,7 @@
     },
     {
       "path": "src/wc/components/Table/table-cell-model.ts",
-      "content": "import {\n  isTableCellAction,\n  isTableCellBlank,\n  isTableCellEmpty,\n  isTableCellIcon,\n  isTableCellIconText,\n  isTableCellImage,\n  isTableCellPrimaryText,\n  isTableCellTag,\n  isTableCellText,\n} from './table-model';\nimport type {\n  TableCellAction,\n  TableCellBlank,\n  TableCellEmpty,\n  TableCellIcon,\n  TableCellImage,\n  TableCellImageTracks,\n  TableCellTag,\n  TableCellTagVariant,\n  TableCellTextRun,\n  TableCellTextTrack,\n  TableCellValue,\n  TableCellLinkTarget,\n  TableCellLineClamp,\n  TableCellMaxLines,\n  TableColumn,\n} from './table-types';\nimport type { IconColor } from '../Icon/Icon';\nimport type { TextColor } from '../Text/text-types';\n\n/** Maximum independently colored runs on one secondary or tertiary track. */\nexport const TABLE_CELL_TEXT_RUN_LIMIT = 3;\n\nexport interface ResolvedTableCellText {\n  primary: string | number;\n  secondary?: TableCellTextRun[];\n  tertiary?: TableCellTextRun[];\n  secondaryColor?: TextColor;\n  tertiaryColor?: TextColor;\n  href?: string;\n  target?: TableCellLinkTarget;\n  wrap?: boolean;\n  fontFeature?: 'normal' | 'tabular-nums';\n}\n\nexport type TableCellPresentation =\n  | { kind: 'blank'; cellType: 'blank'; value: TableCellBlank }\n  | { kind: 'empty'; cellType: 'empty'; value: TableCellEmpty | null | undefined }\n  | { kind: 'icon'; cellType: 'icon'; value: TableCellIcon }\n  | {\n      kind: 'icon-text';\n      cellType: 'icon-text';\n      icon: string;\n      iconColor?: IconColor;\n      iconLabel?: string;\n      value: ResolvedTableCellText;\n      variant: 'single' | 'multi' | 'triple';\n      wraps: boolean;\n      lineClamp: TableCellLineClamp;\n    }\n  | {\n      kind: 'image';\n      cellType: 'image';\n      value: TableCellImage;\n      variant: 'single' | 'multi' | 'triple';\n    }\n  | { kind: 'action'; cellType: 'action'; value: TableCellAction }\n  | {\n      kind: 'tag';\n      cellType: 'tag';\n      value: TableCellTag;\n      variant: TableCellTagVariant;\n    }\n  | {\n      kind: 'text';\n      cellType: 'text' | 'primary-text';\n      value: ResolvedTableCellText;\n      primaryText: boolean;\n      singleLine: boolean;\n      variant: 'single' | 'multi' | 'triple' | 'primary-pair';\n      wraps: boolean;\n      lineClamp: TableCellLineClamp;\n    };\n\nfunction trackText(value: string | number | TableCellTextRun): string | undefined {\n  if (typeof value === 'string' || typeof value === 'number') {\n    const text = String(value);\n    return text.trim() === '' ? undefined : text;\n  }\n  const text = value.text?.trim();\n  return text ? value.text : undefined;\n}\n\n/** Resolve an image cell's track stack; unknown values fall back to one track. */\nexport function resolveTableCellImageTracks(\n  tracks: TableCellImage['tracks']\n): TableCellImageTracks {\n  return tracks === 2 || tracks === 3 ? tracks : 1;\n}\n\n/** Map an image track stack onto the shared single/multi/triple cell variant. */\nexport function tableCellImageVariant(tracks: TableCellImageTracks): 'single' | 'multi' | 'triple' {\n  return tracks === 3 ? 'triple' : tracks === 2 ? 'multi' : 'single';\n}\n\n/** Collapse a consumer track into at most three non-empty runs. */\nexport function normalizeTableCellTextTrack(\n  track: TableCellTextTrack | number | undefined\n): TableCellTextRun[] | undefined {\n  if (track == null) return undefined;\n  const items = Array.isArray(track) ? track : [track];\n  const runs: TableCellTextRun[] = [];\n  for (const item of items) {\n    if (runs.length >= TABLE_CELL_TEXT_RUN_LIMIT) break;\n    const text = trackText(item);\n    if (text === undefined) continue;\n    runs.push(\n      typeof item === 'object' && item !== null && 'color' in item && item.color\n        ? { text, color: item.color }\n        : { text }\n    );\n  }\n  return runs.length ? runs : undefined;\n}\n\n/** Map wrap / maxLines onto wrap-to-track geometry and a line clamp. */\nexport function resolveTableCellTextOverflow(\n  source: { wrap?: boolean; maxLines?: TableCellMaxLines },\n  column: TableColumn\n): { wraps: boolean; lineClamp: TableCellLineClamp } {\n  const wrap = source.wrap ?? column.wrap ?? false;\n  const maxLines = source.maxLines ?? (source.wrap === true ? undefined : column.maxLines);\n  if (maxLines != null) {\n    return { wraps: maxLines > 1, lineClamp: maxLines };\n  }\n  if (wrap) return { wraps: true, lineClamp: 'none' };\n  return { wraps: false, lineClamp: 1 };\n}\n\n/** ds-text overflow props for a resolved clamp. */\nexport function tableCellTextOverflowProps(lineClamp: TableCellLineClamp): {\n  lineTruncation: TableCellLineClamp;\n  wrap: 'wrap' | 'nowrap';\n} {\n  if (lineClamp === 'none') return { lineTruncation: 'none', wrap: 'wrap' };\n  if (lineClamp === 1) return { lineTruncation: 1, wrap: 'nowrap' };\n  return { lineTruncation: lineClamp, wrap: 'wrap' };\n}\n\nfunction resolveTextPresentation(\n  source: {\n    primary: string | number;\n    secondary?: TableCellTextTrack | number;\n    tertiary?: TableCellTextTrack;\n    secondaryColor?: TextColor;\n    tertiaryColor?: TextColor;\n    href?: string;\n    target?: TableCellLinkTarget;\n    wrap?: boolean;\n    maxLines?: TableCellMaxLines;\n    fontFeature?: 'normal' | 'tabular-nums';\n  },\n  column: TableColumn,\n  options: { primaryText: boolean; allowTertiary: boolean }\n): {\n  value: ResolvedTableCellText;\n  singleLine: boolean;\n  variant: 'single' | 'multi' | 'triple' | 'primary-pair';\n  wraps: boolean;\n  lineClamp: TableCellLineClamp;\n} {\n  const secondary = normalizeTableCellTextTrack(source.secondary);\n  const tertiary = options.allowTertiary ? normalizeTableCellTextTrack(source.tertiary) : undefined;\n  const value: ResolvedTableCellText = {\n    primary: source.primary,\n    ...(secondary ? { secondary } : {}),\n    ...(tertiary ? { tertiary } : {}),\n    ...(source.secondaryColor ? { secondaryColor: source.secondaryColor } : {}),\n    ...(source.tertiaryColor ? { tertiaryColor: source.tertiaryColor } : {}),\n    ...(source.href ? { href: source.href } : {}),\n    ...(source.target ? { target: source.target } : {}),\n    ...(source.wrap ? { wrap: source.wrap } : {}),\n    ...(source.fontFeature ? { fontFeature: source.fontFeature } : {}),\n  };\n  const singleLine = !options.primaryText && !secondary && !tertiary;\n  const overflow = resolveTableCellTextOverflow(source, column);\n  return {\n    value,\n    singleLine,\n    variant: options.primaryText\n      ? 'primary-pair'\n      : tertiary\n        ? 'triple'\n        : singleLine\n          ? 'single'\n          : 'multi',\n    wraps: overflow.wraps,\n    lineClamp: overflow.lineClamp,\n  };\n}\n\n/** Resolve a cell's semantic and visual recipe once for both markup and classes. */\nexport function resolveTableCellPresentation(\n  value: TableCellValue,\n  column: TableColumn\n): TableCellPresentation {\n  if (isTableCellBlank(value)) return { kind: 'blank', cellType: 'blank', value };\n  if (value == null || isTableCellEmpty(value)) {\n    return { kind: 'empty', cellType: 'empty', value };\n  }\n  if (isTableCellIcon(value)) return { kind: 'icon', cellType: 'icon', value };\n  if (isTableCellIconText(value)) {\n    const text = resolveTextPresentation(value, column, {\n      primaryText: false,\n      allowTertiary: true,\n    });\n    return {\n      kind: 'icon-text',\n      cellType: 'icon-text',\n      icon: value.icon,\n      ...(value.iconColor ? { iconColor: value.iconColor } : {}),\n      ...(value.iconLabel ? { iconLabel: value.iconLabel } : {}),\n      value: text.value,\n      variant: text.variant === 'primary-pair' ? 'single' : text.variant,\n      wraps: text.wraps,\n      lineClamp: text.lineClamp,\n    };\n  }\n  if (isTableCellImage(value)) {\n    return {\n      kind: 'image',\n      cellType: 'image',\n      value,\n      variant: tableCellImageVariant(resolveTableCellImageTracks(value.tracks)),\n    };\n  }\n  if (isTableCellAction(value)) return { kind: 'action', cellType: 'action', value };\n  if (isTableCellTag(value)) {\n    return {\n      kind: 'tag',\n      cellType: 'tag',\n      value,\n      variant: value.variant ?? 'tag-only',\n    };\n  }\n\n  const primaryText = isTableCellPrimaryText(value);\n  const source =\n    isTableCellText(value) || primaryText\n      ? value\n      : {\n          primary: value,\n          fontFeature: typeof value === 'number' ? ('tabular-nums' as const) : ('normal' as const),\n        };\n  const text = resolveTextPresentation(isTableCellText(value) ? value : source, column, {\n    primaryText,\n    allowTertiary: isTableCellText(value),\n  });\n  return {\n    kind: 'text',\n    cellType: primaryText ? 'primary-text' : 'text',\n    value: text.value,\n    primaryText,\n    singleLine: text.singleLine,\n    variant: text.variant,\n    wraps: text.wraps,\n    lineClamp: text.lineClamp,\n  };\n}\n",
+      "content": "import {\n  isTableCellAction,\n  isTableCellBlank,\n  isTableCellEmpty,\n  isTableCellIcon,\n  isTableCellIconText,\n  isTableCellImage,\n  isTableCellPrimaryText,\n  isTableCellTag,\n  isTableCellTags,\n  isTableCellText,\n} from './table-model';\nimport type {\n  TableCellAction,\n  TableCellBlank,\n  TableCellEmpty,\n  TableCellIcon,\n  TableCellImage,\n  TableCellImageTracks,\n  TableCellTag,\n  TableCellTags,\n  TableCellTagVariant,\n  TableCellTextRun,\n  TableCellTextTrack,\n  TableCellValue,\n  TableCellLinkTarget,\n  TableCellLineClamp,\n  TableCellMaxLines,\n  TableColumn,\n} from './table-types';\nimport type { IconColor } from '../Icon/Icon';\nimport type { TextColor } from '../Text/text-types';\n\n/** Maximum independently colored runs on one secondary or tertiary track. */\nexport const TABLE_CELL_TEXT_RUN_LIMIT = 3;\n\nexport interface ResolvedTableCellText {\n  primary: string | number;\n  secondary?: TableCellTextRun[];\n  tertiary?: TableCellTextRun[];\n  secondaryColor?: TextColor;\n  tertiaryColor?: TextColor;\n  href?: string;\n  target?: TableCellLinkTarget;\n  wrap?: boolean;\n  fontFeature?: 'normal' | 'tabular-nums';\n}\n\nexport type TableCellPresentation =\n  | { kind: 'blank'; cellType: 'blank'; value: TableCellBlank }\n  | { kind: 'empty'; cellType: 'empty'; value: TableCellEmpty | null | undefined }\n  | { kind: 'icon'; cellType: 'icon'; value: TableCellIcon }\n  | {\n      kind: 'icon-text';\n      cellType: 'icon-text';\n      icon: string;\n      iconColor?: IconColor;\n      iconLabel?: string;\n      value: ResolvedTableCellText;\n      variant: 'single' | 'multi' | 'triple';\n      wraps: boolean;\n      lineClamp: TableCellLineClamp;\n    }\n  | {\n      kind: 'image';\n      cellType: 'image';\n      value: TableCellImage;\n      variant: 'single' | 'multi' | 'triple';\n    }\n  | { kind: 'action'; cellType: 'action'; value: TableCellAction }\n  | {\n      kind: 'tag';\n      cellType: 'tag';\n      value: TableCellTag;\n      variant: TableCellTagVariant;\n    }\n  | {\n      kind: 'tags';\n      cellType: 'tags';\n      value: TableCellTags;\n      tracks: number;\n      variant: `${number}-track`;\n    }\n  | {\n      kind: 'text';\n      cellType: 'text' | 'primary-text';\n      value: ResolvedTableCellText;\n      primaryText: boolean;\n      singleLine: boolean;\n      variant: 'single' | 'multi' | 'triple' | 'primary-pair';\n      wraps: boolean;\n      lineClamp: TableCellLineClamp;\n    };\n\nfunction trackText(value: string | number | TableCellTextRun): string | undefined {\n  if (typeof value === 'string' || typeof value === 'number') {\n    const text = String(value);\n    return text.trim() === '' ? undefined : text;\n  }\n  const text = value.text?.trim();\n  return text ? value.text : undefined;\n}\n\n/** Resolve an image cell's track stack; unknown values fall back to one track. */\nexport function resolveTableCellImageTracks(\n  tracks: TableCellImage['tracks']\n): TableCellImageTracks {\n  return tracks === 2 || tracks === 3 ? tracks : 1;\n}\n\n/** Map an image track stack onto the shared single/multi/triple cell variant. */\nexport function tableCellImageVariant(tracks: TableCellImageTracks): 'single' | 'multi' | 'triple' {\n  return tracks === 3 ? 'triple' : tracks === 2 ? 'multi' : 'single';\n}\n\n/** Normalize the declared line count used by wrapping multiple-Tag cells. */\nexport function resolveTableCellTagsTracks(tracks: number): number {\n  return Number.isFinite(tracks) && tracks > 0 ? Math.floor(tracks) : 1;\n}\n\n/** Token-backed content height for any named number of body-row tracks. */\nexport function tableCellTrackStackBlockSize(tracks: number): string {\n  const laterTracks = Math.max(0, resolveTableCellTagsTracks(tracks) - 1);\n  return `calc(var(--_table-cell-track-min-block-size)${' + var(--dimension-space-025) + var(--dimension-size-250)'.repeat(laterTracks)})`;\n}\n\n/** Collapse a consumer track into at most three non-empty runs. */\nexport function normalizeTableCellTextTrack(\n  track: TableCellTextTrack | number | undefined\n): TableCellTextRun[] | undefined {\n  if (track == null) return undefined;\n  const items = Array.isArray(track) ? track : [track];\n  const runs: TableCellTextRun[] = [];\n  for (const item of items) {\n    if (runs.length >= TABLE_CELL_TEXT_RUN_LIMIT) break;\n    const text = trackText(item);\n    if (text === undefined) continue;\n    runs.push(\n      typeof item === 'object' && item !== null && 'color' in item && item.color\n        ? { text, color: item.color }\n        : { text }\n    );\n  }\n  return runs.length ? runs : undefined;\n}\n\n/** Map wrap / maxLines onto wrap-to-track geometry and a line clamp. */\nexport function resolveTableCellTextOverflow(\n  source: { wrap?: boolean; maxLines?: TableCellMaxLines },\n  column: TableColumn\n): { wraps: boolean; lineClamp: TableCellLineClamp } {\n  const wrap = source.wrap ?? column.wrap ?? false;\n  const maxLines = source.maxLines ?? (source.wrap === true ? undefined : column.maxLines);\n  if (maxLines != null) {\n    return { wraps: maxLines > 1, lineClamp: maxLines };\n  }\n  if (wrap) return { wraps: true, lineClamp: 'none' };\n  return { wraps: false, lineClamp: 1 };\n}\n\n/** ds-text overflow props for a resolved clamp. */\nexport function tableCellTextOverflowProps(lineClamp: TableCellLineClamp): {\n  lineTruncation: TableCellLineClamp;\n  wrap: 'wrap' | 'nowrap';\n} {\n  if (lineClamp === 'none') return { lineTruncation: 'none', wrap: 'wrap' };\n  if (lineClamp === 1) return { lineTruncation: 1, wrap: 'nowrap' };\n  return { lineTruncation: lineClamp, wrap: 'wrap' };\n}\n\nfunction resolveTextPresentation(\n  source: {\n    primary: string | number;\n    secondary?: TableCellTextTrack | number;\n    tertiary?: TableCellTextTrack;\n    secondaryColor?: TextColor;\n    tertiaryColor?: TextColor;\n    href?: string;\n    target?: TableCellLinkTarget;\n    wrap?: boolean;\n    maxLines?: TableCellMaxLines;\n    fontFeature?: 'normal' | 'tabular-nums';\n  },\n  column: TableColumn,\n  options: { primaryText: boolean; allowTertiary: boolean }\n): {\n  value: ResolvedTableCellText;\n  singleLine: boolean;\n  variant: 'single' | 'multi' | 'triple' | 'primary-pair';\n  wraps: boolean;\n  lineClamp: TableCellLineClamp;\n} {\n  const secondary = normalizeTableCellTextTrack(source.secondary);\n  const tertiary = options.allowTertiary ? normalizeTableCellTextTrack(source.tertiary) : undefined;\n  const value: ResolvedTableCellText = {\n    primary: source.primary,\n    ...(secondary ? { secondary } : {}),\n    ...(tertiary ? { tertiary } : {}),\n    ...(source.secondaryColor ? { secondaryColor: source.secondaryColor } : {}),\n    ...(source.tertiaryColor ? { tertiaryColor: source.tertiaryColor } : {}),\n    ...(source.href ? { href: source.href } : {}),\n    ...(source.target ? { target: source.target } : {}),\n    ...(source.wrap ? { wrap: source.wrap } : {}),\n    ...(source.fontFeature ? { fontFeature: source.fontFeature } : {}),\n  };\n  const singleLine = !options.primaryText && !secondary && !tertiary;\n  const overflow = resolveTableCellTextOverflow(source, column);\n  return {\n    value,\n    singleLine,\n    variant: options.primaryText\n      ? 'primary-pair'\n      : tertiary\n        ? 'triple'\n        : singleLine\n          ? 'single'\n          : 'multi',\n    wraps: overflow.wraps,\n    lineClamp: overflow.lineClamp,\n  };\n}\n\n/** Resolve a cell's semantic and visual recipe once for both markup and classes. */\nexport function resolveTableCellPresentation(\n  value: TableCellValue,\n  column: TableColumn\n): TableCellPresentation {\n  if (isTableCellBlank(value)) return { kind: 'blank', cellType: 'blank', value };\n  if (value == null || isTableCellEmpty(value)) {\n    return { kind: 'empty', cellType: 'empty', value };\n  }\n  if (isTableCellIcon(value)) return { kind: 'icon', cellType: 'icon', value };\n  if (isTableCellIconText(value)) {\n    const text = resolveTextPresentation(value, column, {\n      primaryText: false,\n      allowTertiary: true,\n    });\n    return {\n      kind: 'icon-text',\n      cellType: 'icon-text',\n      icon: value.icon,\n      ...(value.iconColor ? { iconColor: value.iconColor } : {}),\n      ...(value.iconLabel ? { iconLabel: value.iconLabel } : {}),\n      value: text.value,\n      variant: text.variant === 'primary-pair' ? 'single' : text.variant,\n      wraps: text.wraps,\n      lineClamp: text.lineClamp,\n    };\n  }\n  if (isTableCellImage(value)) {\n    return {\n      kind: 'image',\n      cellType: 'image',\n      value,\n      variant: tableCellImageVariant(resolveTableCellImageTracks(value.tracks)),\n    };\n  }\n  if (isTableCellAction(value)) return { kind: 'action', cellType: 'action', value };\n  if (isTableCellTag(value)) {\n    return {\n      kind: 'tag',\n      cellType: 'tag',\n      value,\n      variant: value.variant ?? 'tag-only',\n    };\n  }\n  if (isTableCellTags(value)) {\n    const tracks = resolveTableCellTagsTracks(value.tracks);\n    return {\n      kind: 'tags',\n      cellType: 'tags',\n      value,\n      tracks,\n      variant: `${tracks}-track`,\n    };\n  }\n\n  const primaryText = isTableCellPrimaryText(value);\n  const source =\n    isTableCellText(value) || primaryText\n      ? value\n      : {\n          primary: value,\n          fontFeature: typeof value === 'number' ? ('tabular-nums' as const) : ('normal' as const),\n        };\n  const text = resolveTextPresentation(isTableCellText(value) ? value : source, column, {\n    primaryText,\n    allowTertiary: isTableCellText(value),\n  });\n  return {\n    kind: 'text',\n    cellType: primaryText ? 'primary-text' : 'text',\n    value: text.value,\n    primaryText,\n    singleLine: text.singleLine,\n    variant: text.variant,\n    wraps: text.wraps,\n    lineClamp: text.lineClamp,\n  };\n}\n",
       "type": "registry:ui"
     },
     {
@@ -1328,6 +1361,11 @@
       "content": "import type {\n  TableGroup,\n  TableGroupLoadMoreDetail,\n  TableLoadMoreMode,\n  TableLoadMoreReason,\n} from './table-types';\n\nexport interface TableGroupLoadControllerState {\n  enabled: boolean;\n  loadMoreMode: TableLoadMoreMode;\n  loadMoreThreshold: number;\n  containedScroll: boolean;\n  groups: TableGroup[];\n  viewport: HTMLElement | null;\n  sentinels: ReadonlyMap<string, HTMLElement>;\n  loadingMoreLabel: string;\n  endOfResultsLabel: string;\n  rowsLoadedLabel: string;\n}\n\nexport interface TableGroupLoadControllerOptions {\n  state: () => TableGroupLoadControllerState;\n  announce: (message: string) => void;\n  request: (detail: TableGroupLoadMoreDetail) => void;\n}\n\ninterface GroupSnapshot {\n  count: number;\n  hasMore: boolean;\n  loading: boolean;\n  error: string;\n  identity: string | number;\n}\n\nfunction groupIdentity(group: TableGroup): string | number {\n  return group.loadIdentity ?? group.id;\n}\n\nfunction formatGroupLabel(template: string, group: TableGroup, count?: number): string {\n  return template\n    .split('{group}')\n    .join(group.label)\n    .split('{count}')\n    .join(String(count ?? group.rows.length))\n    .split('{loaded}')\n    .join(String(group.rows.length))\n    .split('{total}')\n    .join(String(group.totalCount ?? group.rows.length));\n}\n\n/** Owns request guards, announcements, and observation for independently loaded groups. */\nexport class TableGroupLoadController {\n  readonly intersectionSupported = typeof IntersectionObserver !== 'undefined';\n\n  private connected = false;\n  private intersectionObserver: IntersectionObserver | null = null;\n  private snapshots = new Map<string, GroupSnapshot>();\n  private pending = new Map<string, { identity: string | number; count: number }>();\n\n  constructor(private readonly options: TableGroupLoadControllerOptions) {}\n\n  initialize(): void {\n    this.snapshots = this.createSnapshots();\n  }\n\n  connect(): void {\n    this.connected = true;\n    this.refresh();\n  }\n\n  disconnect(): void {\n    this.connected = false;\n    this.disconnectObserver();\n  }\n\n  refresh(): void {\n    if (!this.connected) return;\n    const state = this.options.state();\n    if (\n      !state.enabled ||\n      state.loadMoreMode !== 'auto' ||\n      !this.intersectionSupported ||\n      !state.viewport\n    ) {\n      this.disconnectObserver();\n      return;\n    }\n\n    this.disconnectObserver();\n    const threshold = Number.isFinite(state.loadMoreThreshold)\n      ? Math.max(0, state.loadMoreThreshold)\n      : 0;\n    this.intersectionObserver = new IntersectionObserver(\n      entries => {\n        for (const entry of entries) {\n          if (!entry.isIntersecting) continue;\n          const groupId = (entry.target as HTMLElement).dataset.groupId;\n          if (groupId) this.request(groupId, 'auto');\n        }\n      },\n      {\n        root: state.containedScroll ? state.viewport : null,\n        rootMargin: `0px 0px ${threshold}px 0px`,\n      }\n    );\n\n    for (const [groupId, sentinel] of state.sentinels) {\n      const group = state.groups.find(item => item.id === groupId);\n      if (!group?.hasMore || group.loadingMore || group.loadMoreError?.trim()) continue;\n      this.intersectionObserver.observe(sentinel);\n    }\n  }\n\n  structureChanged(): void {\n    this.pending.clear();\n    this.snapshots = this.createSnapshots();\n    this.disconnectObserver();\n  }\n\n  dataChanged(): void {\n    const state = this.options.state();\n    const nextSnapshots = new Map<string, GroupSnapshot>();\n\n    for (const group of state.groups) {\n      const next = this.snapshot(group);\n      const previous = this.snapshots.get(group.id);\n      const pending = this.pending.get(group.id);\n\n      if (!previous || previous.identity !== next.identity) {\n        this.pending.delete(group.id);\n      } else {\n        if (next.count > previous.count) {\n          this.options.announce(\n            formatGroupLabel(state.rowsLoadedLabel, group, next.count - previous.count)\n          );\n        }\n        if (!previous.error && next.error) {\n          this.pending.delete(group.id);\n          this.options.announce(next.error);\n        }\n        if (previous.hasMore && !next.hasMore) {\n          this.pending.delete(group.id);\n          this.options.announce(formatGroupLabel(state.endOfResultsLabel, group));\n        }\n        if (pending && next.count > pending.count) this.pending.delete(group.id);\n        if (pending && previous.loading && !next.loading && next.count === pending.count) {\n          this.pending.delete(group.id);\n        }\n      }\n\n      nextSnapshots.set(group.id, next);\n    }\n\n    this.snapshots = nextSnapshots;\n    for (const groupId of this.pending.keys()) {\n      if (!nextSnapshots.has(groupId)) this.pending.delete(groupId);\n    }\n    this.disconnectObserver();\n  }\n\n  configurationChanged(): void {\n    this.disconnectObserver();\n  }\n\n  request(groupId: string, reason: TableLoadMoreReason): void {\n    const state = this.options.state();\n    const group = state.groups.find(item => item.id === groupId);\n    if (\n      !state.enabled ||\n      !group?.hasMore ||\n      group.loadingMore ||\n      (reason !== 'retry' && !!group.loadMoreError?.trim()) ||\n      this.pending.has(groupId)\n    )\n      return;\n\n    const identity = groupIdentity(group);\n    this.pending.set(groupId, { identity, count: group.rows.length });\n    this.options.announce(formatGroupLabel(state.loadingMoreLabel, group));\n    this.options.request({\n      groupId,\n      reason,\n      loadIdentity: identity,\n      loadedRowCount: group.rows.length,\n    });\n  }\n\n  private createSnapshots(): Map<string, GroupSnapshot> {\n    return new Map(this.options.state().groups.map(group => [group.id, this.snapshot(group)]));\n  }\n\n  private snapshot(group: TableGroup): GroupSnapshot {\n    return {\n      count: group.rows.length,\n      hasMore: !!group.hasMore,\n      loading: !!group.loadingMore,\n      error: group.loadMoreError?.trim() ?? '',\n      identity: groupIdentity(group),\n    };\n  }\n\n  private disconnectObserver(): void {\n    this.intersectionObserver?.disconnect();\n    this.intersectionObserver = null;\n  }\n}\n",
       "type": "registry:ui"
     },
+    {
+      "path": "src/wc/components/Table/table-highlight.ts",
+      "content": "export interface TableHighlightSegment {\n  text: string;\n  match: boolean;\n}\n\nexport type TableHighlightMatcher = (value: string | number) => TableHighlightSegment[];\n\nexport const TABLE_NO_HIGHLIGHT_MATCHER: TableHighlightMatcher = value => [\n  { text: String(value), match: false },\n];\n\nconst escapeRegExp = (value: string) => value.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n\n/**\n * Creates one literal, case-insensitive matcher for table-owned text tracks.\n * Longer terms win when supplied terms overlap.\n */\nexport function createTableHighlightMatcher(terms: string[]): TableHighlightMatcher {\n  const normalizedTerms = Array.from(\n    new Map(\n      terms\n        .map(term => term.trim())\n        .filter(Boolean)\n        .map(term => [term.toLocaleLowerCase(), term])\n    ).values()\n  ).sort((left, right) => right.length - left.length);\n\n  if (!normalizedTerms.length) {\n    return TABLE_NO_HIGHLIGHT_MATCHER;\n  }\n\n  const expression = new RegExp(normalizedTerms.map(escapeRegExp).join('|'), 'giu');\n\n  return value => {\n    const text = String(value);\n    const segments: TableHighlightSegment[] = [];\n    let cursor = 0;\n\n    expression.lastIndex = 0;\n    for (const match of text.matchAll(expression)) {\n      const index = match.index;\n      if (index > cursor) segments.push({ text: text.slice(cursor, index), match: false });\n      segments.push({ text: match[0], match: true });\n      cursor = index + match[0].length;\n    }\n\n    if (!segments.length) return [{ text, match: false }];\n    if (cursor < text.length) segments.push({ text: text.slice(cursor), match: false });\n    return segments;\n  };\n}\n",
+      "type": "registry:ui"
+    },
     {
       "path": "src/wc/components/Table/table-layout-controller.ts",
       "content": "export interface TableLayoutElements {\n  viewport: HTMLElement | null;\n  contentTable: 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  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:\n        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:\n      input.collapseHeadBlockStart == null || 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 connectedContentTable: HTMLTableElement | null = null;\n  private resizeObserver: ResizeObserver | null = null;\n  private frame: number | null = null;\n  private overflow: TableOverflowState | null = null;\n  private inlineOffset = 0;\n  private maxInlineOffset = 0;\n  private maxBlockOffset = 0;\n  private lastMode: TableLayoutMode | 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.connectedContentTable = null;\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n  }\n\n  /** Reconcile newly rendered refs, observers, and pending geometry. */\n  refresh(forceGeometry = true): void {\n    if (!this.connected) return;\n    const { viewport, contentTable } = this.options.elements();\n    const elementsChanged =\n      viewport !== this.connectedViewport || contentTable !== this.connectedContentTable;\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.connectedContentTable = contentTable;\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 (contentTable) this.resizeObserver.observe(contentTable);\n      }\n    }\n    const mode = this.options.mode();\n    const modeChanged =\n      !this.lastMode ||\n      mode.documentStickyHeader !== this.lastMode.documentStickyHeader ||\n      mode.floatingCollapseAll !== this.lastMode.floatingCollapseAll ||\n      mode.clampVerticalOverscroll !== this.lastMode.clampVerticalOverscroll;\n    this.lastMode = mode;\n    // New refs and explicit refreshes resolve before paint. A recycled virtual\n    // window keeps the same scroll geometry, so ResizeObserver owns later size\n    // changes without forcing layout after every row patch.\n    if (forceGeometry || elementsChanged || modeChanged) 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    const viewport = this.connectedViewport;\n    if (!viewport) return;\n    const mode = this.options.mode();\n    this.clampInlineOffset();\n    if (mode.clampVerticalOverscroll) this.clampBlockOffset();\n    if (\n      viewport.scrollLeft !== this.inlineOffset ||\n      (mode.floatingCollapseAll && !mode.documentStickyHeader)\n    ) {\n      this.schedule();\n    }\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 atStart = viewport.scrollLeft <= 0 && event.deltaX < 0;\n      const atEnd = viewport.scrollLeft >= this.maxInlineOffset && 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 atStart = viewport.scrollTop <= 0 && event.deltaY < 0;\n    const atEnd = viewport.scrollTop >= this.maxBlockOffset && 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 clamped = Math.min(this.maxInlineOffset, 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 clamped = Math.min(this.maxBlockOffset, 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 =\n      mode.floatingCollapseAll &&\n      !mode.documentStickyHeader &&\n      elements.collapseAllOverlay &&\n      elements.frame &&\n      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    this.inlineOffset = metrics.inlineOffset;\n    this.maxInlineOffset = metrics.maxInlineOffset;\n    this.maxBlockOffset = Math.max(0, viewport.scrollHeight - viewport.clientHeight);\n\n    this.setProperty(viewport, '--ds-table-visible-inline-size', `${metrics.visibleInlineSize}px`);\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",
@@ -1345,7 +1383,7 @@
     },
     {
       "path": "src/wc/components/Table/table-model.ts",
-      "content": "import type {\n  TableCellBlank,\n  TableCellAction,\n  TableCellEmpty,\n  TableCellIcon,\n  TableCellIconText,\n  TableCellImage,\n  TableCellPrimaryText,\n  TableCellText,\n  TableCellTag,\n  TableCellValue,\n  TableColumn,\n  TableGroup,\n  TableRow,\n  TableSortState,\n} from './table-types';\n\nexport interface TableSelectionState {\n  selectableRowIds: string[];\n  selectedLoadedCount: number;\n  allSelected: boolean;\n  indeterminate: boolean;\n}\n\nconst TABLE_COLUMN_WIDTH_TOKENS = {\n  xs: '--dimension-table-column-width-xs',\n  sm: '--dimension-table-column-width-sm',\n  md: '--dimension-table-column-width-md',\n  lg: '--dimension-table-column-width-lg',\n  xl: '--dimension-table-column-width-xl',\n} as const;\n\nconst TABLE_IMAGE_COLUMN_WIDTH_VARIABLES = {\n  1: '--_table-image-column-inline-size',\n  2: '--_table-image-column-inline-size-multi',\n  3: '--_table-image-column-inline-size-triple',\n} as const;\n\nexport function isTableCellText(value: TableCellValue): value is TableCellText {\n  return typeof value === 'object' && value !== null && 'primary' in value && !('kind' in value);\n}\n\nexport function isTableCellPrimaryText(value: TableCellValue): value is TableCellPrimaryText {\n  return (\n    typeof value === 'object' && value !== null && 'kind' in value && value.kind === 'primary-text'\n  );\n}\n\nexport function isTableCellTag(value: TableCellValue): value is TableCellTag {\n  return typeof value === 'object' && value !== null && 'kind' in value && value.kind === 'tag';\n}\n\nexport function isTableCellIcon(value: TableCellValue): value is TableCellIcon {\n  return typeof value === 'object' && value !== null && 'kind' in value && value.kind === 'icon';\n}\n\nexport function isTableCellIconText(value: TableCellValue): value is TableCellIconText {\n  return (\n    typeof value === 'object' && value !== null && 'kind' in value && value.kind === 'icon-text'\n  );\n}\n\nexport function isTableCellImage(value: TableCellValue): value is TableCellImage {\n  return typeof value === 'object' && value !== null && 'kind' in value && value.kind === 'image';\n}\n\nexport function isTableCellAction(value: TableCellValue): value is TableCellAction {\n  return typeof value === 'object' && value !== null && 'kind' in value && value.kind === 'action';\n}\n\nexport function isTableCellEmpty(value: TableCellValue): value is TableCellEmpty {\n  return typeof value === 'object' && value !== null && 'kind' in value && value.kind === 'empty';\n}\n\nexport function isTableCellBlank(value: TableCellValue): value is TableCellBlank {\n  return typeof value === 'object' && value !== null && 'kind' in value && value.kind === 'blank';\n}\n\nexport function tableCellPrimary(value: TableCellValue): string | number | null {\n  if (value == null) return null;\n  if (isTableCellTag(value)) return value.label;\n  if (isTableCellIcon(value)) return null;\n  if (isTableCellIconText(value)) return value.primary;\n  if (isTableCellImage(value)) return value.alt;\n  if (isTableCellAction(value)) return value.label ?? value.ariaLabel;\n  if (isTableCellPrimaryText(value)) return value.primary;\n  if (isTableCellEmpty(value) || isTableCellBlank(value)) return null;\n  return isTableCellText(value) ? value.primary : value;\n}\n\nexport function tableRowSelectionLabel(row: TableRow, columns: TableColumn[]): string {\n  const explicit = row.selectionLabel?.trim();\n  if (explicit) return explicit;\n\n  for (const column of columns) {\n    const primary = tableCellPrimary(row.cells[column.id]);\n    if (primary != null && String(primary).trim()) return String(primary);\n  }\n\n  return row.id;\n}\n\nexport function nextTableSortState(\n  current: TableSortState | null | undefined,\n  columnId: string\n): TableSortState {\n  if (current?.columnId !== columnId) return { columnId, direction: 'asc' };\n  if (current.direction === 'asc') return { columnId, direction: 'desc' };\n  return { columnId, direction: 'asc' };\n}\n\nexport function toggleTableGroupCollapsed(collapsedGroupIds: string[], groupId: string): string[] {\n  const next = new Set(collapsedGroupIds);\n  if (next.has(groupId)) next.delete(groupId);\n  else next.add(groupId);\n  return [...next];\n}\n\nexport function nextTableGroupsCollapsed(\n  collapsedGroupIds: string[],\n  groupIds: string[]\n): string[] {\n  if (groupIds.length === 0) return [];\n  const collapsed = new Set(collapsedGroupIds);\n  const allCollapsed = groupIds.every(id => collapsed.has(id));\n  return allCollapsed ? [] : [...groupIds];\n}\n\n/** Host for grouped collapse-all: the trailing action lane or a scrollport-owned overlay. */\nexport type TableCollapseAllHost = { columnId: string; mode: 'action' } | { mode: 'floating' };\n\nexport function tableCollapseAllHost(columns: TableColumn[]): TableCollapseAllHost | undefined {\n  if (columns.length === 0) return undefined;\n  for (let index = columns.length - 1; index >= 0; index -= 1) {\n    const column = columns[index]!;\n    if (column.kind === 'action') return { columnId: column.id, mode: 'action' };\n  }\n  return { mode: 'floating' };\n}\n\nexport function clampTableColumnSize(column: TableColumn): number | undefined {\n  if (typeof column.size !== 'number' || !Number.isFinite(column.size) || column.size <= 0) {\n    return undefined;\n  }\n\n  const minimum =\n    Number.isFinite(column.minSize) && (column.minSize ?? 0) > 0 ? column.minSize! : 0;\n  const maximum =\n    Number.isFinite(column.maxSize) && (column.maxSize ?? 0) > 0\n      ? Math.max(column.maxSize!, minimum)\n      : Number.POSITIVE_INFINITY;\n\n  return Math.min(Math.max(column.size!, minimum), maximum);\n}\n\nexport function tableColumnSize(column: TableColumn): string | undefined {\n  if (typeof column.size === 'string') {\n    return `var(${TABLE_COLUMN_WIDTH_TOKENS[column.size]})`;\n  }\n  const width = clampTableColumnSize(column);\n  if (width != null) return `${width}px`;\n  if (column.imageTracks) {\n    return `var(${TABLE_IMAGE_COLUMN_WIDTH_VARIABLES[column.imageTracks]})`;\n  }\n  return column.kind === 'action' ? 'var(--dimension-size-500)' : undefined;\n}\n\n/**\n * When every column has an explicit width, one ordinary lane must absorb spare\n * table width so fixed selection and action lanes are not expanded by the\n * native fixed-table layout algorithm.\n */\nexport function tableFlexibleColumnId(columns: TableColumn[]): string | undefined {\n  if (columns.some(column => !tableColumnSize(column))) return undefined;\n  for (let index = columns.length - 1; index >= 0; index -= 1) {\n    const column = columns[index]!;\n    if (column.kind !== 'action' && !column.sticky) return column.id;\n  }\n  for (let index = columns.length - 1; index >= 0; index -= 1) {\n    const column = columns[index]!;\n    if (column.kind !== 'action') return column.id;\n  }\n  return columns[columns.length - 1]?.id;\n}\n\nexport function tableExplicitMinWidth(columns: TableColumn[]): string | undefined {\n  const widths = columns.map(tableColumnSize).filter((width): width is string => !!width);\n  if (widths.length === 0) return undefined;\n  return widths.length === 1 ? widths[0] : `calc(${widths.join(' + ')})`;\n}\n\nexport function tableRows(rows: TableRow[], groups: TableGroup[], grouped: boolean): TableRow[] {\n  return grouped ? groups.flatMap(group => group.rows) : rows;\n}\n\nfunction canSelectRow(row: TableRow): boolean {\n  return row.selectable !== false && !row.disabled;\n}\n\nexport function deriveTableSelectionState(\n  rows: TableRow[],\n  selectedRowIds: readonly string[]\n): TableSelectionState {\n  const selected = new Set(selectedRowIds);\n  const selectableRowIds = rows.filter(canSelectRow).map(row => row.id);\n  const selectedLoadedCount = selectableRowIds.reduce(\n    (count, id) => count + (selected.has(id) ? 1 : 0),\n    0\n  );\n\n  return {\n    selectableRowIds,\n    selectedLoadedCount,\n    allSelected: selectableRowIds.length > 0 && selectedLoadedCount === selectableRowIds.length,\n    indeterminate: selectedLoadedCount > 0 && selectedLoadedCount < selectableRowIds.length,\n  };\n}\n\nexport function toggleTableRowSelection(\n  selectedRowIds: readonly string[],\n  row: TableRow\n): string[] {\n  if (!canSelectRow(row)) return [...selectedRowIds];\n  const selected = new Set(selectedRowIds);\n  if (selected.has(row.id)) selected.delete(row.id);\n  else selected.add(row.id);\n  return [...selected];\n}\n\nexport function toggleAllLoadedTableRows(\n  selectedRowIds: readonly string[],\n  loadedRows: TableRow[]\n): string[] {\n  const selected = new Set(selectedRowIds);\n  const state = deriveTableSelectionState(loadedRows, selectedRowIds);\n\n  for (const id of state.selectableRowIds) {\n    if (state.allSelected) selected.delete(id);\n    else selected.add(id);\n  }\n\n  return [...selected];\n}\n\n/** Toggle every selectable loaded row that belongs to a group. */\nexport function toggleTableGroupSelection(\n  selectedRowIds: readonly string[],\n  groupRows: TableRow[]\n): string[] {\n  return toggleAllLoadedTableRows(selectedRowIds, groupRows);\n}\n\nexport function resolvedTableGroupCount(group: TableGroup): number {\n  const total = Number.isFinite(group.totalCount) ? Math.max(0, group.totalCount!) : 0;\n  return Math.max(total, group.rows.length);\n}\n\nexport const TABLE_GROUP_INTENTS = [\n  'brand',\n  'neutral',\n  'negative',\n  'warning',\n  'caution',\n  'positive',\n] as const;\n\nexport function isTableGroupIntent(value: unknown): value is (typeof TABLE_GROUP_INTENTS)[number] {\n  return typeof value === 'string' && (TABLE_GROUP_INTENTS as readonly string[]).includes(value);\n}\n\nexport function tableGroupIntentClass(\n  intent: (typeof TABLE_GROUP_INTENTS)[number] | undefined\n): string | undefined {\n  return isTableGroupIntent(intent) ? `ds-table__group-cell--intent-${intent}` : undefined;\n}\n\n/** Title color for an intentful group label; defaults to primary when unset. */\nexport function tableGroupLabelColor(\n  intent: (typeof TABLE_GROUP_INTENTS)[number] | undefined\n): 'primary' | 'brand' | 'negative' | 'warning' | 'caution' | 'positive' | `var(--${string})` {\n  if (!isTableGroupIntent(intent)) return 'primary';\n  if (intent === 'neutral') return 'var(--color-foreground-bold-neutral)';\n  return intent;\n}\n\n/** Formats the optional table result footer. Returns null when either count is missing. */\nexport function formatTableResultSummary(\n  displayed: number | null | undefined,\n  total: number | null | undefined,\n  label = 'Displaying {displayed} of {total}',\n  locale?: string\n): string | null {\n  if (!Number.isFinite(displayed) || !Number.isFinite(total)) return null;\n  const normalizedTotal = Math.max(0, Math.trunc(total as number));\n  const normalizedDisplayed = Math.min(\n    normalizedTotal,\n    Math.max(0, Math.trunc(displayed as number))\n  );\n  const formatter = new Intl.NumberFormat(locale);\n  return label\n    .replace('{displayed}', formatter.format(normalizedDisplayed))\n    .replace('{total}', formatter.format(normalizedTotal));\n}\n\n/** Formats the virtual-mode total-only result footer. */\nexport function formatTableTotalSummary(\n  total: number | null | undefined,\n  label = '{total} items',\n  locale?: string\n): string | null {\n  if (!Number.isFinite(total)) return null;\n  const normalizedTotal = Math.max(0, Math.trunc(total as number));\n  return label.replace('{total}', new Intl.NumberFormat(locale).format(normalizedTotal));\n}\n\n/**\n * True when a footer slot belongs to the table itself: a light-DOM child of the\n * host, or a top-level node Stencil relocated into this table's footer. A\n * slotted ancestor marks a nested component boundary, so dialog action slots\n * inside footer-leading/footer-trailing content cannot replace the table copy.\n */\nexport function isOwnedTableFooterSlot(node: Element, host: Element): boolean {\n  if (node.parentElement === host) return true;\n  let insideTableFooter = false;\n  for (\n    let ancestor = node.parentElement;\n    ancestor && ancestor !== host;\n    ancestor = ancestor.parentElement\n  ) {\n    if (ancestor.hasAttribute('slot')) return false;\n    if (ancestor.classList.contains('ds-table__footer')) insideTableFooter = true;\n  }\n  return insideTableFooter;\n}\n\nexport function hasOwnedTableFooterSlot(host: Element, slotName: string): boolean {\n  return [...host.querySelectorAll(`[slot=\"${slotName}\"]`)].some(node =>\n    isOwnedTableFooterSlot(node, host)\n  );\n}\n\nexport function tableModelIssues(\n  columns: TableColumn[],\n  rows: TableRow[],\n  groups: TableGroup[],\n  grouped: boolean\n): string[] {\n  const issues: string[] = [];\n  const columnIds = new Set<string>();\n  for (const column of columns) {\n    if (!column.id.trim()) issues.push('Every column requires a non-empty id.');\n    else if (columnIds.has(column.id)) issues.push(`Duplicate column id: ${column.id}`);\n    if (!column.header.trim() && !column.headerLabel?.trim()) {\n      issues.push(\n        `Column ${column.id || '(missing id)'} requires a visible header or headerLabel.`\n      );\n    }\n    columnIds.add(column.id);\n  }\n\n  const groupIds = new Set<string>();\n  if (grouped) {\n    for (const group of groups) {\n      if (!group.id.trim()) issues.push('Every group requires a non-empty id.');\n      else if (groupIds.has(group.id)) issues.push(`Duplicate group id: ${group.id}`);\n      groupIds.add(group.id);\n      if (group.totalCount != null && group.totalCount < group.rows.length) {\n        issues.push(`Group ${group.id} totalCount is smaller than its loaded row count.`);\n      }\n      if (group.intent != null && !isTableGroupIntent(group.intent)) {\n        issues.push(`Group ${group.id} has an unsupported intent.`);\n      }\n    }\n  }\n\n  const rowIds = new Set<string>();\n  for (const row of tableRows(rows, groups, grouped)) {\n    if (!row.id.trim()) issues.push('Every row requires a non-empty id.');\n    else if (rowIds.has(row.id)) issues.push(`Duplicate row id: ${row.id}`);\n    rowIds.add(row.id);\n  }\n\n  return [...new Set(issues)];\n}\n",
+      "content": "import type {\n  TableCellBlank,\n  TableCellAction,\n  TableCellEmpty,\n  TableCellIcon,\n  TableCellIconText,\n  TableCellImage,\n  TableCellPrimaryText,\n  TableCellText,\n  TableCellTag,\n  TableCellTags,\n  TableCellValue,\n  TableColumn,\n  TableGroup,\n  TableRow,\n  TableSortState,\n} from './table-types';\n\nexport interface TableSelectionState {\n  selectableRowIds: string[];\n  selectedLoadedCount: number;\n  allSelected: boolean;\n  indeterminate: boolean;\n}\n\nconst TABLE_COLUMN_WIDTH_TOKENS = {\n  xs: '--dimension-table-column-width-xs',\n  sm: '--dimension-table-column-width-sm',\n  md: '--dimension-table-column-width-md',\n  lg: '--dimension-table-column-width-lg',\n  xl: '--dimension-table-column-width-xl',\n} as const;\n\nconst TABLE_IMAGE_COLUMN_WIDTH_VARIABLES = {\n  1: '--_table-image-column-inline-size',\n  2: '--_table-image-column-inline-size-multi',\n  3: '--_table-image-column-inline-size-triple',\n} as const;\n\nexport function isTableCellText(value: TableCellValue): value is TableCellText {\n  return typeof value === 'object' && value !== null && 'primary' in value && !('kind' in value);\n}\n\nexport function isTableCellPrimaryText(value: TableCellValue): value is TableCellPrimaryText {\n  return (\n    typeof value === 'object' && value !== null && 'kind' in value && value.kind === 'primary-text'\n  );\n}\n\nexport function isTableCellTag(value: TableCellValue): value is TableCellTag {\n  return typeof value === 'object' && value !== null && 'kind' in value && value.kind === 'tag';\n}\n\nexport function isTableCellTags(value: TableCellValue): value is TableCellTags {\n  return typeof value === 'object' && value !== null && 'kind' in value && value.kind === 'tags';\n}\n\nexport function isTableCellIcon(value: TableCellValue): value is TableCellIcon {\n  return typeof value === 'object' && value !== null && 'kind' in value && value.kind === 'icon';\n}\n\nexport function isTableCellIconText(value: TableCellValue): value is TableCellIconText {\n  return (\n    typeof value === 'object' && value !== null && 'kind' in value && value.kind === 'icon-text'\n  );\n}\n\nexport function isTableCellImage(value: TableCellValue): value is TableCellImage {\n  return typeof value === 'object' && value !== null && 'kind' in value && value.kind === 'image';\n}\n\nexport function isTableCellAction(value: TableCellValue): value is TableCellAction {\n  return typeof value === 'object' && value !== null && 'kind' in value && value.kind === 'action';\n}\n\nexport function isTableCellEmpty(value: TableCellValue): value is TableCellEmpty {\n  return typeof value === 'object' && value !== null && 'kind' in value && value.kind === 'empty';\n}\n\nexport function isTableCellBlank(value: TableCellValue): value is TableCellBlank {\n  return typeof value === 'object' && value !== null && 'kind' in value && value.kind === 'blank';\n}\n\nexport function tableCellPrimary(value: TableCellValue): string | number | null {\n  if (value == null) return null;\n  if (isTableCellTag(value)) return value.label;\n  if (isTableCellTags(value)) return value.items.map(item => item.label).join(', ');\n  if (isTableCellIcon(value)) return null;\n  if (isTableCellIconText(value)) return value.primary;\n  if (isTableCellImage(value)) return value.alt;\n  if (isTableCellAction(value)) return value.label ?? value.ariaLabel;\n  if (isTableCellPrimaryText(value)) return value.primary;\n  if (isTableCellEmpty(value) || isTableCellBlank(value)) return null;\n  return isTableCellText(value) ? value.primary : value;\n}\n\nexport function tableRowSelectionLabel(row: TableRow, columns: TableColumn[]): string {\n  const explicit = row.selectionLabel?.trim();\n  if (explicit) return explicit;\n\n  for (const column of columns) {\n    const primary = tableCellPrimary(row.cells[column.id]);\n    if (primary != null && String(primary).trim()) return String(primary);\n  }\n\n  return row.id;\n}\n\nexport function nextTableSortState(\n  current: TableSortState | null | undefined,\n  columnId: string\n): TableSortState {\n  if (current?.columnId !== columnId) return { columnId, direction: 'asc' };\n  if (current.direction === 'asc') return { columnId, direction: 'desc' };\n  return { columnId, direction: 'asc' };\n}\n\nexport function toggleTableGroupCollapsed(collapsedGroupIds: string[], groupId: string): string[] {\n  const next = new Set(collapsedGroupIds);\n  if (next.has(groupId)) next.delete(groupId);\n  else next.add(groupId);\n  return [...next];\n}\n\nexport function nextTableGroupsCollapsed(\n  collapsedGroupIds: string[],\n  groupIds: string[]\n): string[] {\n  if (groupIds.length === 0) return [];\n  const collapsed = new Set(collapsedGroupIds);\n  const allCollapsed = groupIds.every(id => collapsed.has(id));\n  return allCollapsed ? [] : [...groupIds];\n}\n\n/** Host for grouped collapse-all: the trailing action lane or a scrollport-owned overlay. */\nexport type TableCollapseAllHost = { columnId: string; mode: 'action' } | { mode: 'floating' };\n\nexport function tableCollapseAllHost(columns: TableColumn[]): TableCollapseAllHost | undefined {\n  if (columns.length === 0) return undefined;\n  for (let index = columns.length - 1; index >= 0; index -= 1) {\n    const column = columns[index]!;\n    if (column.kind === 'action') return { columnId: column.id, mode: 'action' };\n  }\n  return { mode: 'floating' };\n}\n\nexport function clampTableColumnSize(column: TableColumn): number | undefined {\n  if (typeof column.size !== 'number' || !Number.isFinite(column.size) || column.size <= 0) {\n    return undefined;\n  }\n\n  const minimum =\n    Number.isFinite(column.minSize) && (column.minSize ?? 0) > 0 ? column.minSize! : 0;\n  const maximum =\n    Number.isFinite(column.maxSize) && (column.maxSize ?? 0) > 0\n      ? Math.max(column.maxSize!, minimum)\n      : Number.POSITIVE_INFINITY;\n\n  return Math.min(Math.max(column.size!, minimum), maximum);\n}\n\nexport function tableColumnSize(column: TableColumn): string | undefined {\n  if (typeof column.size === 'string') {\n    return `var(${TABLE_COLUMN_WIDTH_TOKENS[column.size]})`;\n  }\n  const width = clampTableColumnSize(column);\n  if (width != null) return `${width}px`;\n  if (column.imageTracks) {\n    return `var(${TABLE_IMAGE_COLUMN_WIDTH_VARIABLES[column.imageTracks]})`;\n  }\n  return column.kind === 'action' ? 'var(--dimension-size-500)' : undefined;\n}\n\n/**\n * Fully sized tables add one internal lane that absorbs spare inline space and\n * collapses to zero at the explicit overflow width. Keep trailing action and\n * sticky-end lanes after it so those controls remain at the visible edge.\n */\nexport function tableElasticSpacerIndex(columns: TableColumn[]): number | undefined {\n  if (columns.length === 0 || columns.some(column => !tableColumnSize(column))) return undefined;\n  let index = columns.length;\n  while (index > 0) {\n    const column = columns[index - 1]!;\n    if (column.kind !== 'action' && column.sticky !== 'end') break;\n    index -= 1;\n  }\n  return index;\n}\n\nexport function tableExplicitMinWidth(columns: TableColumn[]): string | undefined {\n  const widths = columns.map(tableColumnSize).filter((width): width is string => !!width);\n  if (widths.length === 0) return undefined;\n  return widths.length === 1 ? widths[0] : `calc(${widths.join(' + ')})`;\n}\n\nexport function tableRows(rows: TableRow[], groups: TableGroup[], grouped: boolean): TableRow[] {\n  return grouped ? groups.flatMap(group => group.rows) : rows;\n}\n\nfunction canSelectRow(row: TableRow): boolean {\n  return row.selectable !== false && !row.disabled;\n}\n\nexport function deriveTableSelectionState(\n  rows: TableRow[],\n  selectedRowIds: readonly string[]\n): TableSelectionState {\n  const selected = new Set(selectedRowIds);\n  const selectableRowIds = rows.filter(canSelectRow).map(row => row.id);\n  const selectedLoadedCount = selectableRowIds.reduce(\n    (count, id) => count + (selected.has(id) ? 1 : 0),\n    0\n  );\n\n  return {\n    selectableRowIds,\n    selectedLoadedCount,\n    allSelected: selectableRowIds.length > 0 && selectedLoadedCount === selectableRowIds.length,\n    indeterminate: selectedLoadedCount > 0 && selectedLoadedCount < selectableRowIds.length,\n  };\n}\n\nexport function toggleTableRowSelection(\n  selectedRowIds: readonly string[],\n  row: TableRow\n): string[] {\n  if (!canSelectRow(row)) return [...selectedRowIds];\n  const selected = new Set(selectedRowIds);\n  if (selected.has(row.id)) selected.delete(row.id);\n  else selected.add(row.id);\n  return [...selected];\n}\n\nexport function toggleAllLoadedTableRows(\n  selectedRowIds: readonly string[],\n  loadedRows: TableRow[]\n): string[] {\n  const selected = new Set(selectedRowIds);\n  const state = deriveTableSelectionState(loadedRows, selectedRowIds);\n\n  for (const id of state.selectableRowIds) {\n    if (state.allSelected) selected.delete(id);\n    else selected.add(id);\n  }\n\n  return [...selected];\n}\n\n/** Toggle every selectable loaded row that belongs to a group. */\nexport function toggleTableGroupSelection(\n  selectedRowIds: readonly string[],\n  groupRows: TableRow[]\n): string[] {\n  return toggleAllLoadedTableRows(selectedRowIds, groupRows);\n}\n\nexport function resolvedTableGroupCount(group: TableGroup): number {\n  const total = Number.isFinite(group.totalCount) ? Math.max(0, group.totalCount!) : 0;\n  return Math.max(total, group.rows.length);\n}\n\nexport const TABLE_GROUP_INTENTS = [\n  'brand',\n  'neutral',\n  'negative',\n  'warning',\n  'caution',\n  'positive',\n] as const;\n\nexport function isTableGroupIntent(value: unknown): value is (typeof TABLE_GROUP_INTENTS)[number] {\n  return typeof value === 'string' && (TABLE_GROUP_INTENTS as readonly string[]).includes(value);\n}\n\nexport function tableGroupIntentClass(\n  intent: (typeof TABLE_GROUP_INTENTS)[number] | undefined\n): string | undefined {\n  return isTableGroupIntent(intent) ? `ds-table__group-cell--intent-${intent}` : undefined;\n}\n\n/** Title color for an intentful group label; defaults to primary when unset. */\nexport function tableGroupLabelColor(\n  intent: (typeof TABLE_GROUP_INTENTS)[number] | undefined\n): 'primary' | 'brand' | 'negative' | 'warning' | 'caution' | 'positive' | `var(--${string})` {\n  if (!isTableGroupIntent(intent)) return 'primary';\n  if (intent === 'neutral') return 'var(--color-foreground-bold-neutral)';\n  return intent;\n}\n\n/** Formats the optional table result footer. Returns null when either count is missing. */\nexport function formatTableResultSummary(\n  displayed: number | null | undefined,\n  total: number | null | undefined,\n  label = 'Displaying {displayed} of {total}',\n  locale?: string\n): string | null {\n  if (!Number.isFinite(displayed) || !Number.isFinite(total)) return null;\n  const normalizedTotal = Math.max(0, Math.trunc(total as number));\n  const normalizedDisplayed = Math.min(\n    normalizedTotal,\n    Math.max(0, Math.trunc(displayed as number))\n  );\n  const formatter = new Intl.NumberFormat(locale);\n  return label\n    .replace('{displayed}', formatter.format(normalizedDisplayed))\n    .replace('{total}', formatter.format(normalizedTotal));\n}\n\n/** Formats the virtual-mode total-only result footer. */\nexport function formatTableTotalSummary(\n  total: number | null | undefined,\n  label = '{total} items',\n  locale?: string\n): string | null {\n  if (!Number.isFinite(total)) return null;\n  const normalizedTotal = Math.max(0, Math.trunc(total as number));\n  return label.replace('{total}', new Intl.NumberFormat(locale).format(normalizedTotal));\n}\n\n/**\n * True when a footer slot belongs to the table itself: a light-DOM child of the\n * host, or a top-level node Stencil relocated into this table's footer. A\n * slotted ancestor marks a nested component boundary, so dialog action slots\n * inside footer-leading/footer-trailing content cannot replace the table copy.\n */\nexport function isOwnedTableFooterSlot(node: Element, host: Element): boolean {\n  if (node.parentElement === host) return true;\n  let insideTableFooter = false;\n  for (\n    let ancestor = node.parentElement;\n    ancestor && ancestor !== host;\n    ancestor = ancestor.parentElement\n  ) {\n    if (ancestor.hasAttribute('slot')) return false;\n    if (ancestor.classList.contains('ds-table__footer')) insideTableFooter = true;\n  }\n  return insideTableFooter;\n}\n\nexport function hasOwnedTableFooterSlot(host: Element, slotName: string): boolean {\n  return [...host.querySelectorAll(`[slot=\"${slotName}\"]`)].some(node =>\n    isOwnedTableFooterSlot(node, host)\n  );\n}\n\nexport function tableModelIssues(\n  columns: TableColumn[],\n  rows: TableRow[],\n  groups: TableGroup[],\n  grouped: boolean\n): string[] {\n  const issues: string[] = [];\n  const columnIds = new Set<string>();\n  for (const column of columns) {\n    if (!column.id.trim()) issues.push('Every column requires a non-empty id.');\n    else if (columnIds.has(column.id)) issues.push(`Duplicate column id: ${column.id}`);\n    if (!column.header.trim() && !column.headerLabel?.trim()) {\n      issues.push(\n        `Column ${column.id || '(missing id)'} requires a visible header or headerLabel.`\n      );\n    }\n    columnIds.add(column.id);\n  }\n\n  const groupIds = new Set<string>();\n  if (grouped) {\n    for (const group of groups) {\n      if (!group.id.trim()) issues.push('Every group requires a non-empty id.');\n      else if (groupIds.has(group.id)) issues.push(`Duplicate group id: ${group.id}`);\n      groupIds.add(group.id);\n      if (group.totalCount != null && group.totalCount < group.rows.length) {\n        issues.push(`Group ${group.id} totalCount is smaller than its loaded row count.`);\n      }\n      if (group.intent != null && !isTableGroupIntent(group.intent)) {\n        issues.push(`Group ${group.id} has an unsupported intent.`);\n      }\n    }\n  }\n\n  const rowIds = new Set<string>();\n  for (const row of tableRows(rows, groups, grouped)) {\n    if (!row.id.trim()) issues.push('Every row requires a non-empty id.');\n    else if (rowIds.has(row.id)) issues.push(`Duplicate row id: ${row.id}`);\n    rowIds.add(row.id);\n  }\n\n  return [...new Set(issues)];\n}\n",
       "type": "registry:ui"
     },
     {
@@ -1360,17 +1398,17 @@
     },
     {
       "path": "src/wc/components/Table/table-render-model.ts",
-      "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 type TableGroupCountPresentation = 'loaded-progress' | 'total';\n\nexport interface TableGroupRenderModel {\n  group: TableGroup;\n  count: number;\n  loadedCount: number;\n  visibleCountText: string;\n  countLabel: string;\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  groupCountPresentation?: TableGroupCountPresentation;\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 =\n    input.grouped &&\n    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 loadedCount = group.rows.length;\n      const totalPresentation = input.groupCountPresentation === 'total';\n      const count = resolvedTableGroupCount(group);\n      const totalLabel = group.countLabel ?? `${count} ${count === 1 ? 'item' : 'items'}`;\n      const intent = isTableGroupIntent(group.intent) ? group.intent : undefined;\n      return {\n        group,\n        count,\n        loadedCount,\n        visibleCountText: totalPresentation ? String(count) : `${loadedCount} of ${count}`,\n        countLabel: totalPresentation ? totalLabel : `${loadedCount} of ${totalLabel} loaded`,\n        intent,\n        intentClass: tableGroupIntentClass(intent),\n        labelColor: tableGroupLabelColor(intent),\n        collapsed: collapsedGroupIds.has(group.id),\n        selection: selectable ? deriveTableSelectionState(group.rows, input.selectedRowIds) : 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",
+      "content": "import {\n  deriveTableSelectionState,\n  isTableGroupIntent,\n  resolvedTableGroupCount,\n  tableCollapseAllHost,\n  tableColumnSize,\n  tableElasticSpacerIndex,\n  tableExplicitMinWidth,\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 type TableGroupCountPresentation = 'loaded-progress' | 'total';\n\nexport interface TableGroupRenderModel {\n  group: TableGroup;\n  count: number;\n  loadedCount: number;\n  visibleCountText: string;\n  countLabel: string;\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  elasticSpacerIndex: number | 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  groupCountPresentation?: TableGroupCountPresentation;\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 =\n    input.grouped &&\n    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 elasticSpacerIndex = tableElasticSpacerIndex(input.columns);\n  const columnTracks = input.columns.map(column => tableColumnSize(column) ?? 'minmax(0, 1fr)');\n  if (elasticSpacerIndex != null) columnTracks.splice(elasticSpacerIndex, 0, 'minmax(0, 1fr)');\n  const gridTracks = [\n    ...(selectable ? ['var(--_table-selection-column-inline-size)'] : []),\n    ...columnTracks,\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 loadedCount = group.rows.length;\n      const totalPresentation = input.groupCountPresentation === 'total';\n      const count = resolvedTableGroupCount(group);\n      const totalLabel = group.countLabel ?? `${count} ${count === 1 ? 'item' : 'items'}`;\n      const intent = isTableGroupIntent(group.intent) ? group.intent : undefined;\n      return {\n        group,\n        count,\n        loadedCount,\n        visibleCountText: totalPresentation ? String(count) : `${loadedCount} of ${count}`,\n        countLabel: totalPresentation ? totalLabel : `${loadedCount} of ${totalLabel} loaded`,\n        intent,\n        intentClass: tableGroupIntentClass(intent),\n        labelColor: tableGroupLabelColor(intent),\n        collapsed: collapsedGroupIds.has(group.id),\n        selection: selectable ? deriveTableSelectionState(group.rows, input.selectedRowIds) : null,\n      };\n    }),\n    totalColumns:\n      input.columns.length + (selectable ? 1 : 0) + (elasticSpacerIndex == null ? 0 : 1),\n    allGroupsCollapsed,\n    showCollapseAll,\n    collapseAllHost: showCollapseAll ? tableCollapseAllHost(input.columns) : undefined,\n    elasticSpacerIndex,\n    tableStyle,\n  };\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/Table/table-row-view.tsx",
-      "content": "import { h } from '@stencil/core';\nimport {\n  resolveTableCellPresentation,\n  tableCellTextOverflowProps,\n  type TableCellPresentation,\n} from './table-cell-model';\nimport {\n  isRenderableTableActionMenu,\n  isTableCellActionMenu,\n  tableActionTriggerId,\n} from './table-action-menu';\nimport { tableRowSelectionLabel } from './table-model';\nimport type { TableRenderModel } from './table-render-model';\nimport type { TableCellActionDetail, TableCellTextRun, TableColumn, TableRow } from './table-types';\nimport { resolveSafeUrl } from '../../utils/safe-url';\n\nexport interface TableRowViewOptions {\n  row: TableRow;\n  model: TableRenderModel;\n  visibleColumns: TableColumn[];\n  emptyCellLabel: string;\n  actionMenuElementId: string;\n  actionMenu: { rowId: string; columnId: string } | null;\n  ariaRowIndex?: number;\n  variableVirtualSize?: boolean;\n  rowKey?: string;\n  renderSelectionControl: (\n    label: string,\n    checked: boolean,\n    indeterminate: boolean,\n    disabled: boolean,\n    onActivate: () => void\n  ) => unknown;\n  renderStickyEdge: (sticky: TableColumn['sticky']) => unknown;\n  onRowActivate: (row: TableRow, event: Event) => void;\n  onRowKeyDown: (row: TableRow, event: KeyboardEvent) => void;\n  onRowSelection: (row: TableRow) => void;\n  onCellAction: (detail: TableCellActionDetail) => void;\n  onActionMenuToggle: (row: TableRow, column: TableColumn, event: MouseEvent) => void;\n}\n\n/** Render one semantic body row and the complete declarative table-cell vocabulary. */\nexport function renderTableRow({\n  row,\n  model,\n  visibleColumns,\n  emptyCellLabel,\n  actionMenuElementId,\n  actionMenu,\n  ariaRowIndex,\n  variableVirtualSize = false,\n  rowKey = row.id,\n  renderSelectionControl,\n  renderStickyEdge,\n  onRowActivate,\n  onRowKeyDown,\n  onRowSelection,\n  onCellAction,\n  onActionMenuToggle,\n}: TableRowViewOptions) {\n  const selected = model.selectedRowIds.has(row.id);\n  const rowSelectable = row.selectable !== false && !row.disabled;\n\n  return (\n    <tr\n      key={rowKey}\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-virtual-id={ariaRowIndex != null ? `row:${row.id}` : undefined}\n      data-virtual-pool-key={ariaRowIndex != null ? rowKey : undefined}\n      data-virtual-measure={ariaRowIndex != null && variableVirtualSize ? 'true' : undefined}\n      data-selected={selected ? 'true' : undefined}\n      aria-rowindex={ariaRowIndex}\n      aria-disabled={row.disabled ? 'true' : undefined}\n      tabIndex={row.interactive && !row.disabled ? 0 : undefined}\n      onClick={event => onRowActivate(row, event)}\n      onKeyDown={event => onRowKeyDown(row, event)}\n    >\n      {model.selectable && (\n        <td\n          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        >\n          {renderSelectionControl(\n            `${selected ? 'Deselect' : 'Select'} ${tableRowSelectionLabel(row, visibleColumns)}`,\n            selected,\n            false,\n            !rowSelectable,\n            () => onRowSelection(row)\n          )}\n          {renderStickyEdge('start')}\n        </td>\n      )}\n      {visibleColumns.map(column =>\n        renderTableCell({\n          row,\n          column,\n          selected,\n          emptyCellLabel,\n          actionMenuElementId,\n          actionMenu,\n          renderStickyEdge,\n          onCellAction,\n          onActionMenuToggle,\n        })\n      )}\n    </tr>\n  );\n}\n\ninterface TableCellViewOptions {\n  row: TableRow;\n  column: TableColumn;\n  selected: boolean;\n  emptyCellLabel: string;\n  actionMenuElementId: string;\n  actionMenu: { rowId: string; columnId: string } | null;\n  renderStickyEdge: (sticky: TableColumn['sticky']) => unknown;\n  onCellAction: (detail: TableCellActionDetail) => void;\n  onActionMenuToggle: (row: TableRow, column: TableColumn, event: MouseEvent) => void;\n}\n\nfunction renderTableCell(options: TableCellViewOptions) {\n  const { row, column, selected, renderStickyEdge } = options;\n  const align = column.align ?? 'start';\n  const cell = resolveTableCellPresentation(row.cells[column.id], column);\n  const tagCell = cell.kind === 'tag';\n  const iconCell = cell.kind === 'icon';\n  const iconTextCell = cell.kind === 'icon-text';\n  const imageCell = cell.kind === 'image';\n  const actionCell = cell.kind === 'action';\n  const actionMenuCell = actionCell && isRenderableTableActionMenu(cell.value);\n  const textCell = cell.kind === 'text';\n  const primaryTextCell = textCell && cell.primaryText;\n  const singleTextCell = textCell && cell.singleLine;\n  const emptyCell = cell.kind === 'empty';\n  const blankCell = cell.kind === 'blank';\n  const tagVariant = tagCell ? cell.variant : undefined;\n  const textVariant = textCell ? cell.variant : undefined;\n  const imageVariant = imageCell ? cell.variant : undefined;\n  const iconTextVariant = iconTextCell ? cell.variant : undefined;\n  const wraps = (textCell || iconTextCell) && cell.wraps;\n\n  return (\n    <td\n      key={`${row.id}:${column.id}`}\n      class={{\n        'ds-table__cell': true,\n        [`ds-table__cell--align-${align}`]: true,\n        'ds-table__cell--tag': tagCell,\n        [`ds-table__cell--tag-${tagVariant}`]: tagCell,\n        'ds-table__cell--icon': iconCell,\n        'ds-table__cell--icon-text': iconTextCell,\n        [`ds-table__cell--icon-text-${iconTextVariant}`]: iconTextCell,\n        'ds-table__cell--icon-text-wrap': iconTextCell && wraps,\n        'ds-table__cell--image': imageCell,\n        [`ds-table__cell--image-${imageVariant}`]: imageCell,\n        'ds-table__cell--action': actionCell,\n        'ds-table__cell--action-menu': actionMenuCell,\n        'ds-table__cell--primary-text': primaryTextCell,\n        'ds-table__cell--text-single': singleTextCell,\n        'ds-table__cell--text-multi': textCell && !singleTextCell && textVariant !== 'triple',\n        'ds-table__cell--text-triple': textVariant === 'triple',\n        'ds-table__cell--text-wrap': textCell && wraps,\n        'ds-table__cell--empty': emptyCell,\n        'ds-table__cell--blank': blankCell,\n        'ds-table__cell--sticky-start': column.sticky === 'start',\n        'ds-table__cell--sticky-end': column.sticky === 'end',\n        'ds-interaction-fill': true,\n        'ds-interaction-fill--grouped': true,\n        'ds-interaction-fill--selected': selected,\n      }}\n      data-column-id={column.id}\n      data-cell-type={cell.cellType}\n      data-cell-variant={tagVariant ?? textVariant ?? imageVariant ?? iconTextVariant}\n    >\n      <span class=\"ds-table__cell-content ds-interaction-fill__content\">\n        {renderTableCellValue(cell, options)}\n      </span>\n      {renderStickyEdge(column.sticky)}\n    </td>\n  );\n}\n\nfunction renderTableCellValue(cell: TableCellPresentation, options: TableCellViewOptions) {\n  const {\n    row,\n    column,\n    emptyCellLabel,\n    actionMenuElementId,\n    actionMenu,\n    onCellAction,\n    onActionMenuToggle,\n  } = options;\n  if (cell.kind === 'blank') return null;\n\n  if (cell.kind === 'empty') {\n    return (\n      <ds-text\n        class=\"ds-table__cell-track ds-table__cell-track--text\"\n        as=\"span\"\n        variant=\"text-body-medium\"\n        color=\"tertiary\"\n      >\n        <span aria-hidden=\"true\">—</span>\n        <span class=\"ds-visually-hidden\">{emptyCellLabel}</span>\n      </ds-text>\n    );\n  }\n\n  if (cell.kind === 'icon') {\n    const value = cell.value;\n    return (\n      <ds-icon name={value.icon} size=\"md\" color={value.color ?? 'secondary'} label={value.label} />\n    );\n  }\n\n  if (cell.kind === 'icon-text') {\n    return (\n      <span class=\"ds-table__cell-icon-text\">\n        <span class=\"ds-table__cell-icon-text-icon\">\n          <ds-icon\n            name={cell.icon}\n            size=\"md\"\n            color={cell.iconColor ?? 'secondary'}\n            label={cell.iconLabel}\n          />\n        </span>\n        {renderTextCopy(cell)}\n      </span>\n    );\n  }\n\n  if (cell.kind === 'image') {\n    const value = cell.value;\n    return (\n      <span class=\"ds-table__cell-image\">\n        {value.src ? (\n          <img\n            class=\"ds-table__cell-image-content\"\n            src={value.src}\n            alt={value.alt}\n            loading=\"lazy\"\n          />\n        ) : (\n          <span class=\"ds-table__cell-image-placeholder\" role=\"img\" aria-label={value.alt} />\n        )}\n      </span>\n    );\n  }\n\n  if (cell.kind === 'action') {\n    const value = cell.value;\n    const menu = isRenderableTableActionMenu(value);\n    const triggerId = tableActionTriggerId(actionMenuElementId, row.id, column.id);\n    const expanded = menu && actionMenu?.rowId === row.id && actionMenu?.columnId === column.id;\n    return (\n      <ds-button-unfilled\n        id={menu ? triggerId : undefined}\n        variant={menu ? 'icon' : (value.variant ?? 'label')}\n        size=\"md\"\n        isInset={true}\n        insetDepth=\"double\"\n        label={value.label ?? ''}\n        icon={value.icon ?? (menu ? 'Ellipses' : '')}\n        aria-label={value.ariaLabel ?? null}\n        hasBorder={value.hasBorder ?? false}\n        isInactive={value.isInactive ?? false}\n        isLoading={value.isLoading ?? false}\n        hasMenu={menu}\n        expanded={menu ? expanded : undefined}\n        controls={menu ? actionMenuElementId : undefined}\n        onDsClick={event => {\n          event.stopPropagation();\n          if (menu) {\n            onActionMenuToggle(row, column, event.detail);\n            return;\n          }\n          if (isTableCellActionMenu(value)) return;\n          onCellAction({ actionId: value.actionId, rowId: row.id, columnId: column.id });\n        }}\n      />\n    );\n  }\n\n  if (cell.kind === 'tag') {\n    const value = cell.value;\n    const variant = cell.variant;\n    const tag = (\n      <ds-tag\n        label={value.label}\n        intent={value.intent ?? 'neutral'}\n        contrast={value.contrast ?? 'faint'}\n        size={variant === 'text-with-tag' ? 'sm' : 'md'}\n        icon={value.icon ?? ''}\n        rounded={value.rounded ?? false}\n        isInset\n        insetDepth={variant === 'text-with-tag' ? 'single' : 'double'}\n      />\n    );\n    if (variant === 'tag-only') return tag;\n    return (\n      <span class={`ds-table__cell-tag-stack ds-table__cell-tag-stack--${variant}`}>\n        {variant === 'tag-with-text' && tag}\n        <ds-text\n          class=\"ds-table__cell-tag-text ds-table__cell-track\"\n          as=\"span\"\n          variant={variant === 'tag-with-text' ? 'text-body-small' : 'text-body-medium'}\n          color=\"secondary\"\n          lineTruncation={1}\n          data-table-truncate=\"\"\n        >\n          {value.text}\n        </ds-text>\n        {variant === 'text-with-tag' && <span class=\"ds-table__cell-tag-control-track\">{tag}</span>}\n      </span>\n    );\n  }\n\n  if (cell.kind !== 'text') return null;\n  return renderTextCopy(cell);\n}\n\nfunction renderTextCopy(cell: Extract<TableCellPresentation, { kind: 'text' | 'icon-text' }>) {\n  const text = cell.value;\n  const overflow = tableCellTextOverflowProps(cell.lineClamp);\n  const primaryText = cell.kind === 'text' && cell.primaryText;\n  const href = resolveSafeUrl(text.href);\n  const primary = (\n    <ds-text\n      class=\"ds-table__cell-primary ds-table__cell-track ds-table__cell-track--text\"\n      as=\"span\"\n      variant=\"text-body-medium\"\n      color={href ? 'inherit' : 'primary'}\n      lineTruncation={overflow.lineTruncation}\n      wrap={overflow.wrap}\n      fontFeature={text.fontFeature ?? 'normal'}\n      data-table-truncate={truncateAttr(cell.lineClamp)}\n    >\n      {text.primary}\n    </ds-text>\n  );\n\n  return (\n    <span class={{ 'ds-table__cell-copy': true, 'ds-table__cell-copy--wrap': cell.wraps }}>\n      {href ? (\n        <a\n          class=\"ds-table__cell-link ds-text-action ds-focus-ring\"\n          href={href}\n          target={text.target === '_blank' ? '_blank' : undefined}\n          rel={text.target === '_blank' ? 'noopener noreferrer' : undefined}\n        >\n          {primary}\n        </a>\n      ) : (\n        primary\n      )}\n      {renderTextTrack(text.secondary, {\n        track: 'secondary',\n        variant: primaryText ? 'text-body-medium' : 'text-body-small',\n        defaultColor: primaryText ? 'primary' : 'secondary',\n        wholeColor: text.secondaryColor,\n        lineClamp: cell.lineClamp,\n      })}\n      {renderTextTrack(text.tertiary, {\n        track: 'tertiary',\n        variant: 'text-body-small',\n        defaultColor: 'secondary',\n        wholeColor: text.tertiaryColor,\n        lineClamp: cell.lineClamp,\n      })}\n    </span>\n  );\n}\n\nfunction renderTextTrack(\n  runs: TableCellTextRun[] | undefined,\n  options: {\n    track: 'secondary' | 'tertiary';\n    variant: 'text-body-medium' | 'text-body-small';\n    defaultColor: 'primary' | 'secondary';\n    wholeColor?: TableCellTextRun['color'];\n    lineClamp: Extract<TableCellPresentation, { kind: 'text' | 'icon-text' }>['lineClamp'];\n  }\n) {\n  if (!runs?.length) return null;\n  const trackClass = `ds-table__cell-${options.track} ds-table__cell-track ds-table__cell-track--text`;\n  const overflow = tableCellTextOverflowProps(options.lineClamp);\n  const colorFor = (run: TableCellTextRun) =>\n    run.color ?? options.wholeColor ?? options.defaultColor;\n  if (runs.length === 1) {\n    return (\n      <ds-text\n        class={trackClass}\n        as=\"span\"\n        variant={options.variant}\n        color={colorFor(runs[0])}\n        lineTruncation={overflow.lineTruncation}\n        wrap={overflow.wrap}\n        data-table-truncate={truncateAttr(options.lineClamp)}\n      >\n        {runs[0].text}\n      </ds-text>\n    );\n  }\n\n  return (\n    <span class={`${trackClass} ds-table__cell-track--runs`}>\n      {runs.map((run, index) => [\n        index > 0 && (\n          <ds-text\n            key={`${options.track}-sep-${index}`}\n            class=\"ds-table__cell-run-separator\"\n            as=\"span\"\n            variant={options.variant}\n            color=\"secondary\"\n            aria-hidden=\"true\"\n          >\n            ·\n          </ds-text>\n        ),\n        <ds-text\n          key={`${options.track}-run-${index}`}\n          class=\"ds-table__cell-run\"\n          as=\"span\"\n          variant={options.variant}\n          color={colorFor(run)}\n          lineTruncation={overflow.lineTruncation}\n          wrap={overflow.wrap}\n          data-table-truncate={truncateAttr(options.lineClamp)}\n        >\n          {run.text}\n        </ds-text>,\n      ])}\n    </span>\n  );\n}\n\nfunction truncateAttr(\n  lineClamp: Extract<TableCellPresentation, { kind: 'text' | 'icon-text' }>['lineClamp']\n) {\n  return lineClamp === 'none' ? undefined : '';\n}\n",
+      "content": "import { h } from '@stencil/core';\nimport {\n  resolveTableCellPresentation,\n  tableCellTrackStackBlockSize,\n  tableCellTextOverflowProps,\n  type TableCellPresentation,\n} from './table-cell-model';\nimport {\n  isRenderableTableActionMenu,\n  isTableCellActionMenu,\n  tableActionTriggerId,\n} from './table-action-menu';\nimport { tableRowSelectionLabel } from './table-model';\nimport type { TableRenderModel } from './table-render-model';\nimport { TABLE_NO_HIGHLIGHT_MATCHER, type TableHighlightMatcher } from './table-highlight';\nimport type { TableCellActionDetail, TableCellTextRun, TableColumn, TableRow } from './table-types';\nimport { resolveSafeUrl } from '../../utils/safe-url';\n\nexport interface TableRowViewOptions {\n  row: TableRow;\n  model: TableRenderModel;\n  visibleColumns: TableColumn[];\n  emptyCellLabel: string;\n  actionMenuElementId: string;\n  actionMenu: { rowId: string; columnId: string } | null;\n  highlightMatcher: TableHighlightMatcher;\n  highlightFieldIds: string[];\n  ariaRowIndex?: number;\n  variableVirtualSize?: boolean;\n  rowKey?: string;\n  renderSelectionControl: (\n    label: string,\n    checked: boolean,\n    indeterminate: boolean,\n    disabled: boolean,\n    onActivate: () => void\n  ) => unknown;\n  renderStickyEdge: (sticky: TableColumn['sticky']) => unknown;\n  onRowActivate: (row: TableRow, event: Event) => void;\n  onRowKeyDown: (row: TableRow, event: KeyboardEvent) => void;\n  onRowSelection: (row: TableRow) => void;\n  onCellAction: (detail: TableCellActionDetail) => void;\n  onActionMenuToggle: (row: TableRow, column: TableColumn, event: MouseEvent) => void;\n}\n\n/** Render one semantic body row and the complete declarative table-cell vocabulary. */\nexport function renderTableRow({\n  row,\n  model,\n  visibleColumns,\n  emptyCellLabel,\n  actionMenuElementId,\n  actionMenu,\n  highlightMatcher,\n  highlightFieldIds,\n  ariaRowIndex,\n  variableVirtualSize = false,\n  rowKey = row.id,\n  renderSelectionControl,\n  renderStickyEdge,\n  onRowActivate,\n  onRowKeyDown,\n  onRowSelection,\n  onCellAction,\n  onActionMenuToggle,\n}: TableRowViewOptions) {\n  const selected = model.selectedRowIds.has(row.id);\n  const rowSelectable = row.selectable !== false && !row.disabled;\n  const beforeSpacer =\n    model.elasticSpacerIndex == null\n      ? visibleColumns\n      : visibleColumns.slice(0, model.elasticSpacerIndex);\n  const afterSpacer =\n    model.elasticSpacerIndex == null ? [] : visibleColumns.slice(model.elasticSpacerIndex);\n  const renderColumn = (column: TableColumn) =>\n    renderTableCell({\n      row,\n      column,\n      selected,\n      emptyCellLabel,\n      actionMenuElementId,\n      actionMenu,\n      highlightMatcher,\n      highlightFieldIds,\n      renderStickyEdge,\n      onCellAction,\n      onActionMenuToggle,\n    });\n\n  return (\n    <tr\n      key={rowKey}\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-virtual-id={ariaRowIndex != null ? `row:${row.id}` : undefined}\n      data-virtual-pool-key={ariaRowIndex != null ? rowKey : undefined}\n      data-virtual-measure={ariaRowIndex != null && variableVirtualSize ? 'true' : undefined}\n      data-selected={selected ? 'true' : undefined}\n      aria-rowindex={ariaRowIndex}\n      aria-disabled={row.disabled ? 'true' : undefined}\n      tabIndex={row.interactive && !row.disabled ? 0 : undefined}\n      onClick={event => onRowActivate(row, event)}\n      onKeyDown={event => onRowKeyDown(row, event)}\n    >\n      {model.selectable && (\n        <td\n          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        >\n          {renderSelectionControl(\n            `${selected ? 'Deselect' : 'Select'} ${tableRowSelectionLabel(row, visibleColumns)}`,\n            selected,\n            false,\n            !rowSelectable,\n            () => onRowSelection(row)\n          )}\n          {renderStickyEdge('start')}\n        </td>\n      )}\n      {beforeSpacer.map(renderColumn)}\n      {model.elasticSpacerIndex != null && (\n        <td\n          class={{\n            'ds-table__cell': true,\n            'ds-table__elastic-spacer-cell': true,\n            'ds-interaction-fill': true,\n            'ds-interaction-fill--grouped': true,\n            'ds-interaction-fill--selected': selected,\n          }}\n          aria-hidden=\"true\"\n          role=\"presentation\"\n          data-elastic-spacer=\"true\"\n        />\n      )}\n      {afterSpacer.map(renderColumn)}\n    </tr>\n  );\n}\n\ninterface TableCellViewOptions {\n  row: TableRow;\n  column: TableColumn;\n  selected: boolean;\n  emptyCellLabel: string;\n  actionMenuElementId: string;\n  actionMenu: { rowId: string; columnId: string } | null;\n  highlightMatcher: TableHighlightMatcher;\n  highlightFieldIds: string[];\n  renderStickyEdge: (sticky: TableColumn['sticky']) => unknown;\n  onCellAction: (detail: TableCellActionDetail) => void;\n  onActionMenuToggle: (row: TableRow, column: TableColumn, event: MouseEvent) => void;\n}\n\nfunction renderTableCell(options: TableCellViewOptions) {\n  const { row, column, selected, renderStickyEdge } = options;\n  const align = column.align ?? 'start';\n  const cell = resolveTableCellPresentation(row.cells[column.id], column);\n  const tagCell = cell.kind === 'tag';\n  const tagsCell = cell.kind === 'tags';\n  const iconCell = cell.kind === 'icon';\n  const iconTextCell = cell.kind === 'icon-text';\n  const imageCell = cell.kind === 'image';\n  const actionCell = cell.kind === 'action';\n  const actionMenuCell = actionCell && isRenderableTableActionMenu(cell.value);\n  const textCell = cell.kind === 'text';\n  const primaryTextCell = textCell && cell.primaryText;\n  const singleTextCell = textCell && cell.singleLine;\n  const emptyCell = cell.kind === 'empty';\n  const blankCell = cell.kind === 'blank';\n  const tagVariant = tagCell ? cell.variant : undefined;\n  const tagsVariant = tagsCell ? cell.variant : undefined;\n  const textVariant = textCell ? cell.variant : undefined;\n  const imageVariant = imageCell ? cell.variant : undefined;\n  const iconTextVariant = iconTextCell ? cell.variant : undefined;\n  const wraps = (textCell || iconTextCell) && cell.wraps;\n\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--tags': tagsCell,\n        [`ds-table__cell--tags-${tagsVariant}`]: tagsCell,\n        'ds-table__cell--icon': iconCell,\n        'ds-table__cell--icon-text': iconTextCell,\n        [`ds-table__cell--icon-text-${iconTextVariant}`]: iconTextCell,\n        'ds-table__cell--icon-text-wrap': iconTextCell && wraps,\n        'ds-table__cell--image': imageCell,\n        [`ds-table__cell--image-${imageVariant}`]: imageCell,\n        'ds-table__cell--action': actionCell,\n        'ds-table__cell--action-menu': actionMenuCell,\n        'ds-table__cell--primary-text': primaryTextCell,\n        'ds-table__cell--text-single': singleTextCell,\n        'ds-table__cell--text-multi': textCell && !singleTextCell && textVariant !== 'triple',\n        'ds-table__cell--text-triple': textVariant === 'triple',\n        'ds-table__cell--text-wrap': textCell && wraps,\n        'ds-table__cell--empty': emptyCell,\n        'ds-table__cell--blank': blankCell,\n        'ds-table__cell--sticky-start': column.sticky === 'start',\n        'ds-table__cell--sticky-end': column.sticky === 'end',\n        'ds-interaction-fill': true,\n        'ds-interaction-fill--grouped': true,\n        'ds-interaction-fill--selected': selected,\n      }}\n      data-column-id={column.id}\n      data-cell-type={cell.cellType}\n      data-cell-variant={\n        tagVariant ?? tagsVariant ?? textVariant ?? imageVariant ?? iconTextVariant\n      }\n      data-cell-tracks={tagsCell ? cell.tracks : undefined}\n    >\n      <span class=\"ds-table__cell-content ds-interaction-fill__content\">\n        {renderTableCellValue(cell, options)}\n      </span>\n      {renderStickyEdge(column.sticky)}\n    </td>\n  );\n}\n\nfunction renderTableCellValue(cell: TableCellPresentation, options: TableCellViewOptions) {\n  const {\n    row,\n    column,\n    emptyCellLabel,\n    actionMenuElementId,\n    actionMenu,\n    onCellAction,\n    onActionMenuToggle,\n  } = options;\n  if (cell.kind === 'blank') return null;\n\n  if (cell.kind === 'empty') {\n    return (\n      <ds-text\n        class=\"ds-table__cell-track ds-table__cell-track--text\"\n        as=\"span\"\n        variant=\"text-body-medium\"\n        color=\"tertiary\"\n      >\n        <span aria-hidden=\"true\">—</span>\n        <span class=\"ds-visually-hidden\">{emptyCellLabel}</span>\n      </ds-text>\n    );\n  }\n\n  if (cell.kind === 'icon') {\n    const value = cell.value;\n    return (\n      <ds-icon name={value.icon} size=\"md\" color={value.color ?? 'secondary'} label={value.label} />\n    );\n  }\n\n  if (cell.kind === 'icon-text') {\n    return (\n      <span class=\"ds-table__cell-icon-text\">\n        <span class=\"ds-table__cell-icon-text-icon\">\n          <ds-icon\n            name={cell.icon}\n            size=\"md\"\n            color={cell.iconColor ?? 'secondary'}\n            label={cell.iconLabel}\n          />\n        </span>\n        {renderTextCopy(cell, options)}\n      </span>\n    );\n  }\n\n  if (cell.kind === 'image') {\n    const value = cell.value;\n    return (\n      <span class=\"ds-table__cell-image\">\n        {value.src ? (\n          <img\n            class=\"ds-table__cell-image-content\"\n            src={value.src}\n            alt={value.alt}\n            loading=\"lazy\"\n          />\n        ) : (\n          <span class=\"ds-table__cell-image-placeholder\" role=\"img\" aria-label={value.alt} />\n        )}\n      </span>\n    );\n  }\n\n  if (cell.kind === 'action') {\n    const value = cell.value;\n    const menu = isRenderableTableActionMenu(value);\n    const triggerId = tableActionTriggerId(actionMenuElementId, row.id, column.id);\n    const expanded = menu && actionMenu?.rowId === row.id && actionMenu?.columnId === column.id;\n    return (\n      <ds-button-unfilled\n        id={menu ? triggerId : undefined}\n        variant={menu ? 'icon' : (value.variant ?? 'label')}\n        size=\"md\"\n        isInset={true}\n        insetDepth=\"double\"\n        label={value.label ?? ''}\n        icon={value.icon ?? (menu ? 'Ellipses' : '')}\n        aria-label={value.ariaLabel ?? null}\n        hasBorder={value.hasBorder ?? false}\n        isInactive={value.isInactive ?? false}\n        isLoading={value.isLoading ?? false}\n        hasMenu={menu}\n        expanded={menu ? expanded : undefined}\n        controls={menu ? actionMenuElementId : undefined}\n        onDsClick={event => {\n          event.stopPropagation();\n          if (menu) {\n            onActionMenuToggle(row, column, event.detail);\n            return;\n          }\n          if (isTableCellActionMenu(value)) return;\n          onCellAction({ actionId: value.actionId, rowId: row.id, columnId: column.id });\n        }}\n      />\n    );\n  }\n\n  if (cell.kind === 'tag') {\n    const value = cell.value;\n    const variant = cell.variant;\n    const tag = (\n      <ds-tag\n        label={value.label}\n        intent={value.intent ?? 'neutral'}\n        contrast={value.contrast ?? 'faint'}\n        size={variant === 'text-with-tag' ? 'sm' : 'md'}\n        icon={value.icon ?? ''}\n        rounded={value.rounded ?? false}\n        isInset\n        insetDepth={variant === 'text-with-tag' ? 'single' : 'double'}\n      />\n    );\n    if (variant === 'tag-only') return tag;\n    return (\n      <span class={`ds-table__cell-tag-stack ds-table__cell-tag-stack--${variant}`}>\n        {variant === 'tag-with-text' && tag}\n        <ds-text\n          class=\"ds-table__cell-tag-text ds-table__cell-track\"\n          as=\"span\"\n          variant={variant === 'tag-with-text' ? 'text-body-small' : 'text-body-medium'}\n          color=\"secondary\"\n          lineTruncation={1}\n          data-table-truncate=\"\"\n        >\n          {renderHighlightedText(\n            value.text,\n            tableCellFieldMatcher(options, variant === 'tag-with-text' ? 1 : 0)\n          )}\n        </ds-text>\n        {variant === 'text-with-tag' && <span class=\"ds-table__cell-tag-control-track\">{tag}</span>}\n      </span>\n    );\n  }\n\n  if (cell.kind === 'tags') {\n    return (\n      <span\n        class=\"ds-table__cell-tags\"\n        style={{ '--_table-cell-tags-min-block-size': tableCellTrackStackBlockSize(cell.tracks) }}\n      >\n        {cell.value.items.map((item, index) => (\n          <ds-tag\n            key={`${item.label}-${index}`}\n            label={item.label}\n            intent={item.intent ?? 'neutral'}\n            contrast={item.contrast ?? 'faint'}\n            size=\"sm\"\n            icon={item.icon ?? ''}\n            rounded={item.rounded ?? false}\n            isInset\n            insetDepth=\"single\"\n          />\n        ))}\n      </span>\n    );\n  }\n\n  if (cell.kind !== 'text') return null;\n  return renderTextCopy(cell, options);\n}\n\nfunction renderTextCopy(\n  cell: Extract<TableCellPresentation, { kind: 'text' | 'icon-text' }>,\n  options: TableCellViewOptions\n) {\n  const text = cell.value;\n  const overflow = tableCellTextOverflowProps(cell.lineClamp);\n  const primaryText = cell.kind === 'text' && cell.primaryText;\n  const href = resolveSafeUrl(text.href);\n  const primary = (\n    <ds-text\n      class=\"ds-table__cell-primary ds-table__cell-track ds-table__cell-track--text\"\n      as=\"span\"\n      variant=\"text-body-medium\"\n      color={href ? 'inherit' : 'primary'}\n      lineTruncation={overflow.lineTruncation}\n      wrap={overflow.wrap}\n      fontFeature={text.fontFeature ?? 'normal'}\n      data-table-truncate={truncateAttr(cell.lineClamp)}\n    >\n      {renderHighlightedText(text.primary, tableCellFieldMatcher(options, 0))}\n    </ds-text>\n  );\n\n  return (\n    <span class={{ 'ds-table__cell-copy': true, 'ds-table__cell-copy--wrap': cell.wraps }}>\n      {href ? (\n        <a\n          class=\"ds-table__cell-link ds-text-action ds-focus-ring\"\n          href={href}\n          target={text.target === '_blank' ? '_blank' : undefined}\n          rel={text.target === '_blank' ? 'noopener noreferrer' : undefined}\n        >\n          {primary}\n        </a>\n      ) : (\n        primary\n      )}\n      {renderTextTrack(text.secondary, {\n        track: 'secondary',\n        variant: primaryText ? 'text-body-medium' : 'text-body-small',\n        defaultColor: primaryText ? 'primary' : 'secondary',\n        wholeColor: text.secondaryColor,\n        lineClamp: cell.lineClamp,\n        highlightMatcherForRun: runIndex => tableCellFieldMatcher(options, 1 + runIndex),\n      })}\n      {renderTextTrack(text.tertiary, {\n        track: 'tertiary',\n        variant: 'text-body-small',\n        defaultColor: 'secondary',\n        wholeColor: text.tertiaryColor,\n        lineClamp: cell.lineClamp,\n        highlightMatcherForRun: runIndex =>\n          tableCellFieldMatcher(options, 1 + (text.secondary?.length ?? 0) + runIndex),\n      })}\n    </span>\n  );\n}\n\nfunction renderTextTrack(\n  runs: TableCellTextRun[] | undefined,\n  options: {\n    track: 'secondary' | 'tertiary';\n    variant: 'text-body-medium' | 'text-body-small';\n    defaultColor: 'primary' | 'secondary';\n    wholeColor?: TableCellTextRun['color'];\n    lineClamp: Extract<TableCellPresentation, { kind: 'text' | 'icon-text' }>['lineClamp'];\n    highlightMatcherForRun: (runIndex: number) => TableHighlightMatcher;\n  }\n) {\n  if (!runs?.length) return null;\n  const trackClass = `ds-table__cell-${options.track} ds-table__cell-track ds-table__cell-track--text`;\n  const overflow = tableCellTextOverflowProps(options.lineClamp);\n  const colorFor = (run: TableCellTextRun) =>\n    run.color ?? options.wholeColor ?? options.defaultColor;\n  if (runs.length === 1) {\n    return (\n      <ds-text\n        class={trackClass}\n        as=\"span\"\n        variant={options.variant}\n        color={colorFor(runs[0])}\n        lineTruncation={overflow.lineTruncation}\n        wrap={overflow.wrap}\n        data-table-truncate={truncateAttr(options.lineClamp)}\n      >\n        {renderHighlightedText(runs[0].text, options.highlightMatcherForRun(0))}\n      </ds-text>\n    );\n  }\n\n  return (\n    <span class={`${trackClass} ds-table__cell-track--runs`}>\n      {runs.map((run, index) => [\n        index > 0 && (\n          <ds-text\n            key={`${options.track}-sep-${index}`}\n            class=\"ds-table__cell-run-separator\"\n            as=\"span\"\n            variant={options.variant}\n            color=\"secondary\"\n            aria-hidden=\"true\"\n          >\n            ·\n          </ds-text>\n        ),\n        <ds-text\n          key={`${options.track}-run-${index}`}\n          class=\"ds-table__cell-run\"\n          as=\"span\"\n          variant={options.variant}\n          color={colorFor(run)}\n          lineTruncation={overflow.lineTruncation}\n          wrap={overflow.wrap}\n          data-table-truncate={truncateAttr(options.lineClamp)}\n        >\n          {renderHighlightedText(run.text, options.highlightMatcherForRun(index))}\n        </ds-text>,\n      ])}\n    </span>\n  );\n}\n\nfunction renderHighlightedText(value: string | number | undefined, matcher: TableHighlightMatcher) {\n  if (value === undefined) return null;\n  return matcher(value).map((segment, index) =>\n    segment.match ? (\n      <mark class=\"ds-table__match\" key={`match-${index}`}>\n        {segment.text}\n      </mark>\n    ) : (\n      <span key={`text-${index}`}>{segment.text}</span>\n    )\n  );\n}\n\nfunction tableCellFieldMatcher(\n  options: TableCellViewOptions,\n  fieldIndex: number\n): TableHighlightMatcher {\n  const selected = options.highlightFieldIds;\n  if (selected.length === 0 || selected.includes(options.column.id)) {\n    return options.highlightMatcher;\n  }\n  const fieldId = options.column.headerSegments?.[fieldIndex]?.sortKey;\n  return fieldId && selected.includes(fieldId)\n    ? options.highlightMatcher\n    : TABLE_NO_HIGHLIGHT_MATCHER;\n}\n\nfunction truncateAttr(\n  lineClamp: Extract<TableCellPresentation, { kind: 'text' | 'icon-text' }>['lineClamp']\n) {\n  return lineClamp === 'none' ? undefined : '';\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/Table/table-skeleton-view.tsx",
-      "content": "import { h } from '@stencil/core';\nimport { resolveTableCellImageTracks, tableCellImageVariant } from './table-cell-model';\nimport type { TableRenderModel } from './table-render-model';\nimport type { TableCellSkeleton, TableColumn } from './table-types';\n\ninterface TableSkeletonViewOptions {\n  model: TableRenderModel;\n  visibleColumns: TableColumn[];\n  skeletonRows: number;\n  renderStickyEdge: (sticky: TableColumn['sticky']) => unknown;\n}\n\n/** Render the loading body from the same cell recipes used by loaded rows. */\nexport function renderTableSkeletonBody(options: TableSkeletonViewOptions) {\n  const { model, visibleColumns, renderStickyEdge } = options;\n  const count = Math.min(20, Math.max(1, Math.round(options.skeletonRows) || 1));\n  return (\n    <tbody class=\"ds-table__body ds-table__skeleton-body\">\n      {Array.from({ length: count }, (_, index) => (\n        <tr class=\"ds-table__row ds-table__skeleton-row\" key={`skeleton-${index}`}>\n          {model.selectable && (\n            <td\n              class=\"ds-table__cell ds-table__selection-cell ds-table__cell--sticky-start ds-table__skeleton-cell ds-interaction-fill ds-interaction-fill--grouped\"\n              data-skeleton-kind=\"checkbox\"\n            >\n              <span class=\"ds-table__skeleton-checkbox-canvas ds-interaction-fill__content\">\n                <ds-skeleton\n                  class=\"ds-table__skeleton-checkbox\"\n                  variant=\"control\"\n                  controlSize=\"xs\"\n                  width=\"var(--dimension-iconography-sm)\"\n                />\n              </span>\n              {renderStickyEdge('start')}\n            </td>\n          )}\n          {visibleColumns.map(column => renderSkeletonCell(column, index, renderStickyEdge))}\n        </tr>\n      ))}\n    </tbody>\n  );\n}\n\nfunction renderSkeletonCell(\n  column: TableColumn,\n  rowIndex: number,\n  renderStickyEdge: TableSkeletonViewOptions['renderStickyEdge']\n) {\n  const skeleton =\n    column.skeleton ??\n    ((column.kind === 'action'\n      ? { kind: 'action', variant: 'icon' }\n      : { kind: 'text', lines: 1 }) satisfies TableCellSkeleton);\n  const align = column.align ?? 'start';\n  const text = skeleton.kind === 'text';\n  const iconText = skeleton.kind === 'icon-text';\n  const lines = text || iconText ? (skeleton.lines ?? 1) : 1;\n  const tag = skeleton.kind === 'tag';\n  const icon = skeleton.kind === 'icon';\n  const image = skeleton.kind === 'image';\n  const imageVariant = image\n    ? tableCellImageVariant(resolveTableCellImageTracks(skeleton.tracks))\n    : undefined;\n  const iconTextVariant = iconText\n    ? lines === 3\n      ? 'triple'\n      : lines === 2\n        ? 'multi'\n        : 'single'\n    : undefined;\n  const action = skeleton.kind === 'action';\n  const blank = skeleton.kind === 'blank';\n\n  return (\n    <td\n      class={{\n        'ds-table__cell': true,\n        [`ds-table__cell--align-${align}`]: true,\n        'ds-table__skeleton-cell': true,\n        'ds-table__cell--text-single': text && lines === 1,\n        'ds-table__cell--text-multi': text && lines === 2,\n        'ds-table__cell--text-triple': text && lines === 3,\n        'ds-table__cell--tag': tag,\n        'ds-table__cell--tag-tag-only': tag,\n        'ds-table__cell--icon': icon,\n        'ds-table__cell--icon-text': iconText,\n        [`ds-table__cell--icon-text-${iconTextVariant}`]: iconText,\n        'ds-table__cell--image': image,\n        [`ds-table__cell--image-${imageVariant}`]: image,\n        'ds-table__cell--action': action,\n        'ds-table__cell--blank': blank,\n        'ds-table__cell--sticky-start': column.sticky === 'start',\n        'ds-table__cell--sticky-end': column.sticky === 'end',\n        'ds-interaction-fill': true,\n        'ds-interaction-fill--grouped': true,\n      }}\n      data-column-id={column.id}\n      data-skeleton-kind={skeleton.kind}\n      data-cell-variant={imageVariant ?? iconTextVariant}\n      key={`skeleton-${rowIndex}:${column.id}`}\n    >\n      <span class=\"ds-table__cell-content ds-interaction-fill__content\">\n        {renderSkeletonCellContent(skeleton)}\n      </span>\n      {renderStickyEdge(column.sticky)}\n    </td>\n  );\n}\n\nfunction renderSkeletonCellContent(skeleton: TableCellSkeleton) {\n  if (skeleton.kind === 'blank') return null;\n\n  if (skeleton.kind === 'image') {\n    return (\n      <span class=\"ds-table__cell-image ds-table__skeleton-image\">\n        <ds-skeleton\n          class=\"ds-table__skeleton-image-shape\"\n          variant=\"control\"\n          controlSize=\"md\"\n          width=\"100%\"\n        />\n      </span>\n    );\n  }\n\n  if (skeleton.kind === 'icon') {\n    return <ds-skeleton variant=\"icon\" iconSize=\"md\" rounded={skeleton.rounded ?? false} />;\n  }\n\n  if (skeleton.kind === 'tag') {\n    return <ds-skeleton variant=\"control\" controlSize=\"sm\" width={skeleton.width ?? '64%'} />;\n  }\n\n  if (skeleton.kind === 'action') {\n    const iconOnly = (skeleton.variant ?? 'icon') === 'icon';\n    return (\n      <ds-skeleton\n        variant=\"control\"\n        controlSize=\"sm\"\n        width={skeleton.width ?? (iconOnly ? '24px' : '72%')}\n      />\n    );\n  }\n\n  const lines = skeleton.lines ?? 1;\n  const copy = (\n    <span class=\"ds-table__cell-copy\">\n      <span class=\"ds-table__cell-primary ds-table__cell-track ds-table__cell-track--text\">\n        <ds-skeleton\n          variant=\"text\"\n          textVariant=\"text-body-medium\"\n          width={skeleton.primaryWidth ?? '100%'}\n        />\n      </span>\n      {lines >= 2 && (\n        <span class=\"ds-table__cell-secondary ds-table__cell-track ds-table__cell-track--text\">\n          <ds-skeleton\n            variant=\"text\"\n            textVariant=\"text-body-small\"\n            width={skeleton.secondaryWidth ?? '72%'}\n          />\n        </span>\n      )}\n      {lines === 3 && (\n        <span class=\"ds-table__cell-tertiary ds-table__cell-track ds-table__cell-track--text\">\n          <ds-skeleton\n            variant=\"text\"\n            textVariant=\"text-body-small\"\n            width={skeleton.tertiaryWidth ?? '56%'}\n          />\n        </span>\n      )}\n    </span>\n  );\n  if (skeleton.kind === 'icon-text') {\n    return (\n      <span class=\"ds-table__cell-icon-text\">\n        <span class=\"ds-table__cell-icon-text-icon\">\n          <ds-skeleton variant=\"icon\" iconSize=\"md\" />\n        </span>\n        {copy}\n      </span>\n    );\n  }\n  return copy;\n}\n",
+      "content": "import { h } from '@stencil/core';\nimport { resolveTableCellImageTracks, tableCellImageVariant } from './table-cell-model';\nimport type { TableRenderModel } from './table-render-model';\nimport type { TableCellSkeleton, TableColumn } from './table-types';\n\ninterface TableSkeletonViewOptions {\n  model: TableRenderModel;\n  visibleColumns: TableColumn[];\n  skeletonRows: number;\n  renderStickyEdge: (sticky: TableColumn['sticky']) => unknown;\n}\n\n/** Render the loading body from the same cell recipes used by loaded rows. */\nexport function renderTableSkeletonBody(options: TableSkeletonViewOptions) {\n  const { model, visibleColumns, renderStickyEdge } = options;\n  const count = Math.min(20, Math.max(1, Math.round(options.skeletonRows) || 1));\n  const beforeSpacer =\n    model.elasticSpacerIndex == null\n      ? visibleColumns\n      : visibleColumns.slice(0, model.elasticSpacerIndex);\n  const afterSpacer =\n    model.elasticSpacerIndex == null ? [] : visibleColumns.slice(model.elasticSpacerIndex);\n  return (\n    <tbody class=\"ds-table__body ds-table__skeleton-body\">\n      {Array.from({ length: count }, (_, index) => (\n        <tr class=\"ds-table__row ds-table__skeleton-row\" key={`skeleton-${index}`}>\n          {model.selectable && (\n            <td\n              class=\"ds-table__cell ds-table__selection-cell ds-table__cell--sticky-start ds-table__skeleton-cell ds-interaction-fill ds-interaction-fill--grouped\"\n              data-skeleton-kind=\"checkbox\"\n            >\n              <span class=\"ds-table__skeleton-checkbox-canvas ds-interaction-fill__content\">\n                <ds-skeleton\n                  class=\"ds-table__skeleton-checkbox\"\n                  variant=\"control\"\n                  controlSize=\"xs\"\n                  width=\"var(--dimension-iconography-sm)\"\n                />\n              </span>\n              {renderStickyEdge('start')}\n            </td>\n          )}\n          {beforeSpacer.map(column => renderSkeletonCell(column, index, renderStickyEdge))}\n          {model.elasticSpacerIndex != null && (\n            <td\n              class=\"ds-table__cell ds-table__elastic-spacer-cell ds-table__skeleton-cell ds-interaction-fill ds-interaction-fill--grouped\"\n              aria-hidden=\"true\"\n              role=\"presentation\"\n              data-elastic-spacer=\"true\"\n            />\n          )}\n          {afterSpacer.map(column => renderSkeletonCell(column, index, renderStickyEdge))}\n        </tr>\n      ))}\n    </tbody>\n  );\n}\n\nfunction renderSkeletonCell(\n  column: TableColumn,\n  rowIndex: number,\n  renderStickyEdge: TableSkeletonViewOptions['renderStickyEdge']\n) {\n  const skeleton =\n    column.skeleton ??\n    ((column.kind === 'action'\n      ? { kind: 'action', variant: 'icon' }\n      : { kind: 'text', lines: 1 }) satisfies TableCellSkeleton);\n  const align = column.align ?? 'start';\n  const text = skeleton.kind === 'text';\n  const iconText = skeleton.kind === 'icon-text';\n  const lines = text || iconText ? (skeleton.lines ?? 1) : 1;\n  const tag = skeleton.kind === 'tag';\n  const icon = skeleton.kind === 'icon';\n  const image = skeleton.kind === 'image';\n  const imageVariant = image\n    ? tableCellImageVariant(resolveTableCellImageTracks(skeleton.tracks))\n    : undefined;\n  const iconTextVariant = iconText\n    ? lines === 3\n      ? 'triple'\n      : lines === 2\n        ? 'multi'\n        : 'single'\n    : undefined;\n  const action = skeleton.kind === 'action';\n  const blank = skeleton.kind === 'blank';\n\n  return (\n    <td\n      class={{\n        'ds-table__cell': true,\n        [`ds-table__cell--align-${align}`]: true,\n        'ds-table__skeleton-cell': true,\n        'ds-table__cell--text-single': text && lines === 1,\n        'ds-table__cell--text-multi': text && lines === 2,\n        'ds-table__cell--text-triple': text && lines === 3,\n        'ds-table__cell--tag': tag,\n        'ds-table__cell--tag-tag-only': tag,\n        'ds-table__cell--icon': icon,\n        'ds-table__cell--icon-text': iconText,\n        [`ds-table__cell--icon-text-${iconTextVariant}`]: iconText,\n        'ds-table__cell--image': image,\n        [`ds-table__cell--image-${imageVariant}`]: image,\n        'ds-table__cell--action': action,\n        'ds-table__cell--blank': blank,\n        'ds-table__cell--sticky-start': column.sticky === 'start',\n        'ds-table__cell--sticky-end': column.sticky === 'end',\n        'ds-interaction-fill': true,\n        'ds-interaction-fill--grouped': true,\n      }}\n      data-column-id={column.id}\n      data-skeleton-kind={skeleton.kind}\n      data-cell-variant={imageVariant ?? iconTextVariant}\n      key={`skeleton-${rowIndex}:${column.id}`}\n    >\n      <span class=\"ds-table__cell-content ds-interaction-fill__content\">\n        {renderSkeletonCellContent(skeleton)}\n      </span>\n      {renderStickyEdge(column.sticky)}\n    </td>\n  );\n}\n\nfunction renderSkeletonCellContent(skeleton: TableCellSkeleton) {\n  if (skeleton.kind === 'blank') return null;\n\n  if (skeleton.kind === 'image') {\n    return (\n      <span class=\"ds-table__cell-image ds-table__skeleton-image\">\n        <ds-skeleton\n          class=\"ds-table__skeleton-image-shape\"\n          variant=\"control\"\n          controlSize=\"md\"\n          width=\"100%\"\n        />\n      </span>\n    );\n  }\n\n  if (skeleton.kind === 'icon') {\n    return <ds-skeleton variant=\"icon\" iconSize=\"md\" rounded={skeleton.rounded ?? false} />;\n  }\n\n  if (skeleton.kind === 'tag') {\n    return <ds-skeleton variant=\"control\" controlSize=\"sm\" width={skeleton.width ?? '64%'} />;\n  }\n\n  if (skeleton.kind === 'action') {\n    const iconOnly = (skeleton.variant ?? 'icon') === 'icon';\n    return (\n      <ds-skeleton\n        variant=\"control\"\n        controlSize=\"sm\"\n        width={skeleton.width ?? (iconOnly ? '24px' : '72%')}\n      />\n    );\n  }\n\n  const lines = skeleton.lines ?? 1;\n  const copy = (\n    <span class=\"ds-table__cell-copy\">\n      <span class=\"ds-table__cell-primary ds-table__cell-track ds-table__cell-track--text\">\n        <ds-skeleton\n          variant=\"text\"\n          textVariant=\"text-body-medium\"\n          width={skeleton.primaryWidth ?? '100%'}\n        />\n      </span>\n      {lines >= 2 && (\n        <span class=\"ds-table__cell-secondary ds-table__cell-track ds-table__cell-track--text\">\n          <ds-skeleton\n            variant=\"text\"\n            textVariant=\"text-body-small\"\n            width={skeleton.secondaryWidth ?? '72%'}\n          />\n        </span>\n      )}\n      {lines === 3 && (\n        <span class=\"ds-table__cell-tertiary ds-table__cell-track ds-table__cell-track--text\">\n          <ds-skeleton\n            variant=\"text\"\n            textVariant=\"text-body-small\"\n            width={skeleton.tertiaryWidth ?? '56%'}\n          />\n        </span>\n      )}\n    </span>\n  );\n  if (skeleton.kind === 'icon-text') {\n    return (\n      <span class=\"ds-table__cell-icon-text\">\n        <span class=\"ds-table__cell-icon-text-icon\">\n          <ds-skeleton variant=\"icon\" iconSize=\"md\" />\n        </span>\n        {copy}\n      </span>\n    );\n  }\n  return copy;\n}\n",
       "type": "registry:ui"
     },
     {
@@ -1380,7 +1418,7 @@
     },
     {
       "path": "src/wc/components/Table/table-types.ts",
-      "content": "import type { TagContrast, TagIntent } from '../Tag/Tag';\nimport type { IconColor } from '../Icon/Icon';\nimport type { TextColor } from '../Text/text-types';\nimport type { PaginationState } from '../Pagination/pagination-types';\n\nexport type TableSortDirection = 'asc' | 'desc';\nexport type TableSelectionMode = 'none' | 'multiple';\nexport type TableCellAlign = 'start' | 'center' | 'end';\nexport type TableCellLinkTarget = '_self' | '_blank';\nexport type TableColumnSticky = 'start' | 'end';\nexport type TableCaptionVisibility = 'visible' | 'hidden';\nexport type TableLoadMoreMode = 'auto' | 'manual';\nexport type TableDataMode = 'infinite' | 'pagination' | 'virtual';\nexport interface TableDataModeChangeDetail {\n  dataMode: TableDataMode;\n}\nexport type TableLoadMoreReason = 'auto' | 'manual' | 'retry';\nexport type TableColumnWidth = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n/** Visible line budget before a text track ellipsizes. */\nexport type TableCellMaxLines = 1 | 2 | 3;\n/** Resolved clamp, including unlimited wrapping. */\nexport type TableCellLineClamp = TableCellMaxLines | 'none';\n/** Semantic color for a group section header (faint surface + bold title). */\nexport type TableGroupIntent =\n  | 'brand'\n  | 'neutral'\n  | 'negative'\n  | 'warning'\n  | 'caution'\n  | 'positive';\n\n/** Independently sortable label within a compound column header. */\nexport interface TableHeaderSegment {\n  label: string;\n  /** Stable key emitted through TableSortState.columnId. */\n  sortKey: string;\n  /** Visible separator rendered after this label when another segment follows. */\n  separator?: string;\n}\n\n/** Controlled member-row sort state. Group order is controlled separately. */\nexport interface TableSortState {\n  columnId: string;\n  direction: TableSortDirection;\n}\n\n/** One controlled grouping level. Applications supply groups in their final fixed order. */\nexport interface TableGroupingState {\n  columnId: string;\n  direction: TableSortDirection;\n}\n\n/** One independently colored run inside a secondary or tertiary track. */\nexport interface TableCellTextRun {\n  text: string;\n  /** Defaults to the track’s standard color. */\n  color?: TextColor;\n}\n\n/** A secondary or tertiary track: one string, or up to three colorable runs. */\nexport type TableCellTextTrack = string | TableCellTextRun[];\n\n/** Standard two- or three-line cell content owned by the table renderer. */\nexport interface TableCellText {\n  primary: string | number;\n  secondary?: TableCellTextTrack;\n  /** Third subdued track; ignored on dual-primary cells. */\n  tertiary?: TableCellTextTrack;\n  /** Optional semantic foreground for a string secondary track. */\n  secondaryColor?: TextColor;\n  /** Optional semantic foreground for a string tertiary track. */\n  tertiaryColor?: TextColor;\n  /** Application-owned URL for the primary track only. Scalars stay unlinked. */\n  href?: string;\n  /** Native anchor target for a resolved primary link. */\n  target?: TableCellLinkTarget;\n  /** Allow this cell to wrap even when its column truncates by default. */\n  wrap?: boolean;\n  /** Clamp wrapping text after 1, 2, or 3 lines. Overrides column wrap. */\n  maxLines?: TableCellMaxLines;\n  fontFeature?: 'normal' | 'tabular-nums';\n}\n\n/** Two-line text content where both tracks use primary body text. */\nexport interface TableCellPrimaryText {\n  kind: 'primary-text';\n  primary: string | number;\n  secondary: string | number;\n  /** Application-owned URL for the primary track only. */\n  href?: string;\n  /** Native anchor target for a resolved primary link. */\n  target?: TableCellLinkTarget;\n  /** Allow this cell to wrap even when its column truncates by default. */\n  wrap?: boolean;\n  /** Clamp wrapping text after 1, 2, or 3 lines. Overrides column wrap. */\n  maxLines?: TableCellMaxLines;\n  fontFeature?: 'normal' | 'tabular-nums';\n}\n\n/** Applicable data point whose value is currently unavailable. */\nexport interface TableCellEmpty {\n  kind: 'empty';\n}\n\n/** Data point that is intentionally not applicable to this row. */\nexport interface TableCellBlank {\n  kind: 'blank';\n}\n\n/** Declarative icon-only content rendered by the table's standard cell primitive. */\nexport interface TableCellIcon {\n  kind: 'icon';\n  /** Exact canonical IcoMo export name. */\n  icon: string;\n  color?: IconColor;\n  /** Accessible label for informative icons. Omit only when the icon is decorative. */\n  label?: string;\n  /** Application-owned value used when this icon column participates in sorting. */\n  sortValue?: string | number | boolean;\n}\n\n/**\n * Prefix icon beside a text copy stack. Independent of icon-only and plain\n * text cells so those recipes stay unchanged.\n */\nexport interface TableCellIconText {\n  kind: 'icon-text';\n  /** Exact canonical IcoMo export name. */\n  icon: string;\n  iconColor?: IconColor;\n  /** Accessible name. Omit when the glyph is decorative. */\n  iconLabel?: string;\n  primary: string | number;\n  secondary?: TableCellTextTrack;\n  tertiary?: TableCellTextTrack;\n  secondaryColor?: TextColor;\n  tertiaryColor?: TextColor;\n  href?: string;\n  target?: TableCellLinkTarget;\n  wrap?: boolean;\n  maxLines?: TableCellMaxLines;\n  fontFeature?: 'normal' | 'tabular-nums';\n}\n\n/** Body-row track stack an image preview occupies. */\nexport type TableCellImageTracks = 1 | 2 | 3;\n\n/** Declarative 16:9 image preview rendered by the table's standard cell primitive. */\nexport interface TableCellImage {\n  kind: 'image';\n  /** Optional image source. Omit it to render the standard bordered placeholder. */\n  src?: string;\n  /** Accessible description for either the image or its placeholder. */\n  alt: string;\n  /**\n   * Which body-row contract the preview fills. The thumbnail height is that\n   * cell height minus 8px padding; width follows 16:9. Defaults to 1.\n   */\n  tracks?: TableCellImageTracks;\n}\n\ninterface TableCellActionBase {\n  kind: 'action';\n  /** Add the ButtonUnfilled resting border. Action cells are unbordered by default. */\n  hasBorder?: boolean;\n  isInactive?: boolean;\n  isLoading?: boolean;\n}\n\n/** One command inside an overflow action menu. */\nexport interface TableCellActionMenuItem {\n  /** Stable application-owned action identity emitted with dsCellAction. */\n  actionId: string;\n  label: string;\n  isInactive?: boolean;\n  isDestructive?: boolean;\n}\n\n/** Visual separator between overflow action-menu commands. */\nexport interface TableCellActionDivider {\n  kind: 'divider';\n}\n\nexport type TableCellActionMenuEntry = TableCellActionMenuItem | TableCellActionDivider;\n\n/** Declarative ButtonUnfilled content rendered by the table's standard action cell. */\nexport type TableCellAction = TableCellActionBase &\n  (\n    | {\n        variant?: 'label';\n        /** Stable application-owned action identity emitted with dsCellAction. */\n        actionId: string;\n        label: string;\n        icon?: never;\n        ariaLabel?: string;\n        items?: never;\n      }\n    | {\n        variant: 'icon-label';\n        actionId: string;\n        label: string;\n        icon: string;\n        ariaLabel?: string;\n        items?: never;\n      }\n    | {\n        variant: 'icon';\n        actionId: string;\n        label?: never;\n        icon: string;\n        ariaLabel: string;\n        items?: never;\n      }\n    | {\n        variant?: 'icon';\n        /** Overflow commands. The Ellipses trigger opens ds-menu instead of emitting on click. */\n        items: TableCellActionMenuEntry[];\n        ariaLabel: string;\n        icon?: string;\n        actionId?: never;\n        label?: never;\n      }\n  );\n\n/** Declarative Tag content rendered by the table's standard cell primitive. */\nexport type TableCellTagVariant = 'tag-only' | 'tag-with-text' | 'text-with-tag';\n\ninterface TableCellTagBase {\n  kind: 'tag';\n  label: string;\n  intent?: TagIntent;\n  contrast?: TagContrast;\n  icon?: string;\n  rounded?: boolean;\n}\n\nexport type TableCellTag = TableCellTagBase &\n  (\n    | {\n        variant?: 'tag-only';\n        text?: never;\n      }\n    | {\n        variant: Exclude<TableCellTagVariant, 'tag-only'>;\n        text: string;\n      }\n  );\n\nexport type TableCellValue =\n  | string\n  | number\n  | null\n  | undefined\n  | TableCellText\n  | TableCellPrimaryText\n  | TableCellTag\n  | TableCellIcon\n  | TableCellIconText\n  | TableCellImage\n  | TableCellAction\n  | TableCellEmpty\n  | TableCellBlank;\n\nexport type TableSkeletonWidth = string | number;\n\n/** Representative loading geometry for one table column. */\nexport type TableCellSkeleton =\n  | {\n      kind: 'text';\n      /** One track for scalar content, two for primary and secondary, three when tertiary is present. */\n      lines?: 1 | 2 | 3;\n      primaryWidth?: TableSkeletonWidth;\n      secondaryWidth?: TableSkeletonWidth;\n      tertiaryWidth?: TableSkeletonWidth;\n    }\n  | {\n      kind: 'image';\n      /** Match the loaded image cell's track stack. Defaults to 1. */\n      tracks?: TableCellImageTracks;\n    }\n  | {\n      kind: 'tag';\n      width?: TableSkeletonWidth;\n    }\n  | {\n      kind: 'icon';\n      rounded?: boolean;\n    }\n  | {\n      kind: 'icon-text';\n      lines?: 1 | 2 | 3;\n      primaryWidth?: TableSkeletonWidth;\n      secondaryWidth?: TableSkeletonWidth;\n      tertiaryWidth?: TableSkeletonWidth;\n    }\n  | {\n      kind: 'action';\n      /** Icon actions use a square control canvas; labeled actions may provide a wider width. */\n      variant?: 'icon' | 'label' | 'icon-label';\n      width?: TableSkeletonWidth;\n    }\n  | {\n      kind: 'blank';\n    };\n\nexport interface TableColumn {\n  /** Stable column identity. */\n  id: string;\n  /** Visible column label. May be empty when headerLabel supplies a non-visual name. */\n  header: string;\n  /** Screen-reader-only column name for an intentionally blank visual header. */\n  headerLabel?: string;\n  /** Supplementary header help. Does not replace the visible or accessible column name. */\n  help?: string;\n  /** Optional labels for columns that present and sort multiple related data points. */\n  headerSegments?: TableHeaderSegment[];\n  align?: TableCellAlign;\n  sortable?: boolean;\n  /** Preferred TokoMo table-column width. Numbers remain available for exceptional custom pixel widths. */\n  size?: TableColumnWidth | number;\n  /** Derive a fixed image-column width from the matching 1, 2, or 3 track cell geometry. Ignored when size is set. */\n  imageTracks?: TableCellImageTracks;\n  /** Minimum accepted preferred width in CSS pixels. */\n  minSize?: number;\n  /** Maximum accepted preferred width in CSS pixels. */\n  maxSize?: number;\n  /** Wrap cell text instead of truncating it to one line. */\n  wrap?: boolean;\n  /** Clamp wrapping text after 1, 2, or 3 lines. Omit with wrap for unlimited wrap. */\n  maxLines?: TableCellMaxLines;\n  /** Pin one application column to either inline edge during horizontal scrolling. */\n  sticky?: TableColumnSticky;\n  /**\n   * Declare a trailing application-action lane. Action columns keep fixed\n   * geometry and may host grouped table-level controls in their header.\n   */\n  kind?: 'data' | 'action';\n  /** Representative loading geometry for this column. Defaults to one text line. */\n  skeleton?: TableCellSkeleton;\n}\n\nexport interface TableRow {\n  /** Stable identity, unique across all groups. */\n  id: string;\n  cells: Record<string, TableCellValue>;\n  /** Accessible row name used by its selection control. Falls back to the first cell. */\n  selectionLabel?: string;\n  /** Exclude this row from selection without muting its content. */\n  selectable?: boolean;\n  /** Keep the row visible while disabling its selection control and styling it as inactive. */\n  disabled?: boolean;\n  /** Make the complete row a keyboard- and pointer-activatable application target. */\n  interactive?: boolean;\n}\n\nexport interface TableGroup {\n  /** Stable group identity. */\n  id: string;\n  label: string;\n  value?: string | number;\n  /** Total server-side member count; may exceed the currently loaded row count. */\n  totalCount?: number;\n  /** Optional localized total-count phrase such as “166 events” for accessible loaded progress. */\n  countLabel?: string;\n  /**\n   * Optional semantic intent for the group section header. Applies a faint\n   * intent background and bold intent title color.\n   */\n  intent?: TableGroupIntent;\n  /** Whether this group has more member rows available to load. */\n  hasMore?: boolean;\n  /** Controlled incremental loading state for this group's member rows. */\n  loadingMore?: boolean;\n  /** Controlled incremental loading failure for this group's member rows. */\n  loadMoreError?: string;\n  /** Reset key for this group's query, sort, or filter state. Defaults to the group ID. */\n  loadIdentity?: string | number;\n  rows: TableRow[];\n}\n\nexport interface TableSortChangeDetail {\n  sort: TableSortState | null;\n}\n\nexport interface TableSelectionChangeDetail {\n  selectedRowIds: string[];\n  scope: 'row' | 'all-loaded' | 'group';\n  changedRowId?: string;\n  /** Present when scope is `group`. */\n  groupId?: string;\n  selected?: boolean;\n}\n\nexport interface TableLoadMoreDetail {\n  reason: TableLoadMoreReason;\n  loadIdentity: string | number;\n  loadedRowCount: number;\n}\n\nexport interface TableGroupLoadMoreDetail extends TableLoadMoreDetail {\n  groupId: string;\n}\n\nexport interface TableCellActionDetail {\n  actionId: string;\n  rowId: string;\n  columnId: string;\n}\n\nexport interface TableGroupCollapseChangeDetail {\n  scope: 'group' | 'all';\n  /** Present when a single group was toggled. */\n  groupId?: string;\n  collapsed: boolean;\n  collapsedGroupIds: string[];\n}\n\nexport interface TableRowActivateDetail {\n  rowId: string;\n}\n\n/** Controlled show/hide and data-column order for the table-owned customizer. */\nexport interface TableColumnsConfigChangeDetail {\n  hiddenColumnIds: string[];\n  columnOrder: string[];\n}\n\n/** Controlled top-level pagination state. Rows or groups contain only the active page. */\nexport interface TablePaginationState extends PaginationState {\n  /** Change to request one fresh fitted-capacity snapshot for the current query shape. */\n  fitIdentity?: string | number;\n}\n",
+      "content": "import type { TagContrast, TagIntent } from '../Tag/Tag';\nimport type { IconColor } from '../Icon/Icon';\nimport type { TextColor } from '../Text/text-types';\nimport type { PaginationState } from '../Pagination/pagination-types';\n\nexport type TableSortDirection = 'asc' | 'desc';\nexport type TableSelectionMode = 'none' | 'multiple';\nexport type TableCellAlign = 'start' | 'center' | 'end';\nexport type TableCellLinkTarget = '_self' | '_blank';\nexport type TableColumnSticky = 'start' | 'end';\nexport type TableCaptionVisibility = 'visible' | 'hidden';\nexport type TableLoadMoreMode = 'auto' | 'manual';\nexport type TableDataMode = 'infinite' | 'pagination' | 'virtual';\nexport interface TableDataModeChangeDetail {\n  dataMode: TableDataMode;\n}\nexport type TableLoadMoreReason = 'auto' | 'manual' | 'retry';\nexport type TableColumnWidth = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n/** Visible line budget before a text track ellipsizes. */\nexport type TableCellMaxLines = 1 | 2 | 3;\n/** Resolved clamp, including unlimited wrapping. */\nexport type TableCellLineClamp = TableCellMaxLines | 'none';\n/** Semantic color for a group section header (faint surface + bold title). */\nexport type TableGroupIntent =\n  | 'brand'\n  | 'neutral'\n  | 'negative'\n  | 'warning'\n  | 'caution'\n  | 'positive';\n\n/** Independently sortable label within a compound column header. */\nexport interface TableHeaderSegment {\n  /** Compact label rendered inside the table header. */\n  label: string;\n  /** Complete data-point label used when the segment is named outside the table header. */\n  dataLabel?: string;\n  /** Whether this data point is offered by TableSearch. Defaults to true. */\n  searchable?: boolean;\n  /** Stable key emitted through TableSortState.columnId. */\n  sortKey: string;\n  /** Visible separator rendered after this label when another segment follows. */\n  separator?: string;\n}\n\n/** Controlled member-row sort state. Group order is controlled separately. */\nexport interface TableSortState {\n  columnId: string;\n  direction: TableSortDirection;\n}\n\n/** One controlled grouping level. Applications supply groups in their final fixed order. */\nexport interface TableGroupingState {\n  columnId: string;\n  direction: TableSortDirection;\n}\n\n/** One independently colored run inside a secondary or tertiary track. */\nexport interface TableCellTextRun {\n  text: string;\n  /** Defaults to the track’s standard color. */\n  color?: TextColor;\n}\n\n/** A secondary or tertiary track: one string, or up to three colorable runs. */\nexport type TableCellTextTrack = string | TableCellTextRun[];\n\n/** Standard two- or three-line cell content owned by the table renderer. */\nexport interface TableCellText {\n  primary: string | number;\n  secondary?: TableCellTextTrack;\n  /** Third subdued track; ignored on dual-primary cells. */\n  tertiary?: TableCellTextTrack;\n  /** Optional semantic foreground for a string secondary track. */\n  secondaryColor?: TextColor;\n  /** Optional semantic foreground for a string tertiary track. */\n  tertiaryColor?: TextColor;\n  /** Application-owned URL for the primary track only. Scalars stay unlinked. */\n  href?: string;\n  /** Native anchor target for a resolved primary link. */\n  target?: TableCellLinkTarget;\n  /** Allow this cell to wrap even when its column truncates by default. */\n  wrap?: boolean;\n  /** Clamp wrapping text after 1, 2, or 3 lines. Overrides column wrap. */\n  maxLines?: TableCellMaxLines;\n  fontFeature?: 'normal' | 'tabular-nums';\n}\n\n/** Two-line text content where both tracks use primary body text. */\nexport interface TableCellPrimaryText {\n  kind: 'primary-text';\n  primary: string | number;\n  secondary: string | number;\n  /** Application-owned URL for the primary track only. */\n  href?: string;\n  /** Native anchor target for a resolved primary link. */\n  target?: TableCellLinkTarget;\n  /** Allow this cell to wrap even when its column truncates by default. */\n  wrap?: boolean;\n  /** Clamp wrapping text after 1, 2, or 3 lines. Overrides column wrap. */\n  maxLines?: TableCellMaxLines;\n  fontFeature?: 'normal' | 'tabular-nums';\n}\n\n/** Applicable data point whose value is currently unavailable. */\nexport interface TableCellEmpty {\n  kind: 'empty';\n}\n\n/** Data point that is intentionally not applicable to this row. */\nexport interface TableCellBlank {\n  kind: 'blank';\n}\n\n/** Declarative icon-only content rendered by the table's standard cell primitive. */\nexport interface TableCellIcon {\n  kind: 'icon';\n  /** Exact canonical IcoMo export name. */\n  icon: string;\n  color?: IconColor;\n  /** Accessible label for informative icons. Omit only when the icon is decorative. */\n  label?: string;\n  /** Application-owned value used when this icon column participates in sorting. */\n  sortValue?: string | number | boolean;\n}\n\n/**\n * Prefix icon beside a text copy stack. Independent of icon-only and plain\n * text cells so those recipes stay unchanged.\n */\nexport interface TableCellIconText {\n  kind: 'icon-text';\n  /** Exact canonical IcoMo export name. */\n  icon: string;\n  iconColor?: IconColor;\n  /** Accessible name. Omit when the glyph is decorative. */\n  iconLabel?: string;\n  primary: string | number;\n  secondary?: TableCellTextTrack;\n  tertiary?: TableCellTextTrack;\n  secondaryColor?: TextColor;\n  tertiaryColor?: TextColor;\n  href?: string;\n  target?: TableCellLinkTarget;\n  wrap?: boolean;\n  maxLines?: TableCellMaxLines;\n  fontFeature?: 'normal' | 'tabular-nums';\n}\n\n/** Body-row track stack an image preview occupies. */\nexport type TableCellImageTracks = 1 | 2 | 3;\n\n/** Declarative 16:9 image preview rendered by the table's standard cell primitive. */\nexport interface TableCellImage {\n  kind: 'image';\n  /** Optional image source. Omit it to render the standard bordered placeholder. */\n  src?: string;\n  /** Accessible description for either the image or its placeholder. */\n  alt: string;\n  /**\n   * Which body-row contract the preview fills. The thumbnail height is that\n   * cell height minus 8px padding; width follows 16:9. Defaults to 1.\n   */\n  tracks?: TableCellImageTracks;\n}\n\ninterface TableCellActionBase {\n  kind: 'action';\n  /** Add the ButtonUnfilled resting border. Action cells are unbordered by default. */\n  hasBorder?: boolean;\n  isInactive?: boolean;\n  isLoading?: boolean;\n}\n\n/** One command inside an overflow action menu. */\nexport interface TableCellActionMenuItem {\n  /** Stable application-owned action identity emitted with dsCellAction. */\n  actionId: string;\n  label: string;\n  isInactive?: boolean;\n  isDestructive?: boolean;\n}\n\n/** Visual separator between overflow action-menu commands. */\nexport interface TableCellActionDivider {\n  kind: 'divider';\n}\n\nexport type TableCellActionMenuEntry = TableCellActionMenuItem | TableCellActionDivider;\n\n/** Declarative ButtonUnfilled content rendered by the table's standard action cell. */\nexport type TableCellAction = TableCellActionBase &\n  (\n    | {\n        variant?: 'label';\n        /** Stable application-owned action identity emitted with dsCellAction. */\n        actionId: string;\n        label: string;\n        icon?: never;\n        ariaLabel?: string;\n        items?: never;\n      }\n    | {\n        variant: 'icon-label';\n        actionId: string;\n        label: string;\n        icon: string;\n        ariaLabel?: string;\n        items?: never;\n      }\n    | {\n        variant: 'icon';\n        actionId: string;\n        label?: never;\n        icon: string;\n        ariaLabel: string;\n        items?: never;\n      }\n    | {\n        variant?: 'icon';\n        /** Overflow commands. The Ellipses trigger opens ds-menu instead of emitting on click. */\n        items: TableCellActionMenuEntry[];\n        ariaLabel: string;\n        icon?: string;\n        actionId?: never;\n        label?: never;\n      }\n  );\n\n/** Declarative Tag content rendered by the table's standard cell primitive. */\nexport type TableCellTagVariant = 'tag-only' | 'tag-with-text' | 'text-with-tag';\n\n/** One Tag inside a single- or multiple-Tag table cell. */\nexport interface TableCellTagItem {\n  label: string;\n  intent?: TagIntent;\n  contrast?: TagContrast;\n  icon?: string;\n  rounded?: boolean;\n}\n\nexport type TableCellTag = TableCellTagItem & { kind: 'tag' } & (\n    | {\n        variant?: 'tag-only';\n        text?: never;\n      }\n    | {\n        variant: Exclude<TableCellTagVariant, 'tag-only'>;\n        text: string;\n      }\n  );\n\n/** Multiple Tags that wrap inline while retaining the table's named track rhythm. */\nexport interface TableCellTags {\n  kind: 'tags';\n  items: TableCellTagItem[];\n  /** Expected positive wrapped-line count used for row geometry and virtual estimates. */\n  tracks: number;\n}\n\nexport type TableCellValue =\n  | string\n  | number\n  | null\n  | undefined\n  | TableCellText\n  | TableCellPrimaryText\n  | TableCellTag\n  | TableCellTags\n  | TableCellIcon\n  | TableCellIconText\n  | TableCellImage\n  | TableCellAction\n  | TableCellEmpty\n  | TableCellBlank;\n\nexport type TableSkeletonWidth = string | number;\n\n/** Representative loading geometry for one table column. */\nexport type TableCellSkeleton =\n  | {\n      kind: 'text';\n      /** One track for scalar content, two for primary and secondary, three when tertiary is present. */\n      lines?: 1 | 2 | 3;\n      primaryWidth?: TableSkeletonWidth;\n      secondaryWidth?: TableSkeletonWidth;\n      tertiaryWidth?: TableSkeletonWidth;\n    }\n  | {\n      kind: 'image';\n      /** Match the loaded image cell's track stack. Defaults to 1. */\n      tracks?: TableCellImageTracks;\n    }\n  | {\n      kind: 'tag';\n      width?: TableSkeletonWidth;\n    }\n  | {\n      kind: 'icon';\n      rounded?: boolean;\n    }\n  | {\n      kind: 'icon-text';\n      lines?: 1 | 2 | 3;\n      primaryWidth?: TableSkeletonWidth;\n      secondaryWidth?: TableSkeletonWidth;\n      tertiaryWidth?: TableSkeletonWidth;\n    }\n  | {\n      kind: 'action';\n      /** Icon actions use a square control canvas; labeled actions may provide a wider width. */\n      variant?: 'icon' | 'label' | 'icon-label';\n      width?: TableSkeletonWidth;\n    }\n  | {\n      kind: 'blank';\n    };\n\nexport interface TableColumn {\n  /** Stable column identity. */\n  id: string;\n  /** Visible column label. May be empty when headerLabel supplies a non-visual name. */\n  header: string;\n  /** Complete data-point label used by controls such as Sort and Search. */\n  dataLabel?: string;\n  /** Whether this data point is offered by TableSearch. Defaults to true for data columns. */\n  searchable?: boolean;\n  /** Screen-reader-only column name for an intentionally blank visual header. */\n  headerLabel?: string;\n  /** Supplementary header help. Does not replace the visible or accessible column name. */\n  help?: string;\n  /** Optional labels for columns that present and sort multiple related data points. */\n  headerSegments?: TableHeaderSegment[];\n  align?: TableCellAlign;\n  sortable?: boolean;\n  /** Preferred TokoMo table-column width. Numbers remain available for exceptional custom pixel widths. */\n  size?: TableColumnWidth | number;\n  /** Derive a fixed image-column width from the matching 1, 2, or 3 track cell geometry. Ignored when size is set. */\n  imageTracks?: TableCellImageTracks;\n  /** Minimum accepted preferred width in CSS pixels. */\n  minSize?: number;\n  /** Maximum accepted preferred width in CSS pixels. */\n  maxSize?: number;\n  /** Wrap cell text instead of truncating it to one line. */\n  wrap?: boolean;\n  /** Clamp wrapping text after 1, 2, or 3 lines. Omit with wrap for unlimited wrap. */\n  maxLines?: TableCellMaxLines;\n  /** Pin one application column to either inline edge during horizontal scrolling. */\n  sticky?: TableColumnSticky;\n  /**\n   * Declare a trailing application-action lane. Action columns keep fixed\n   * geometry and may host grouped table-level controls in their header.\n   */\n  kind?: 'data' | 'action';\n  /** Representative loading geometry for this column. Defaults to one text line. */\n  skeleton?: TableCellSkeleton;\n}\n\nexport interface TableRow {\n  /** Stable identity, unique across all groups. */\n  id: string;\n  cells: Record<string, TableCellValue>;\n  /** Accessible row name used by its selection control. Falls back to the first cell. */\n  selectionLabel?: string;\n  /** Exclude this row from selection without muting its content. */\n  selectable?: boolean;\n  /** Keep the row visible while disabling its selection control and styling it as inactive. */\n  disabled?: boolean;\n  /** Make the complete row a keyboard- and pointer-activatable application target. */\n  interactive?: boolean;\n}\n\nexport interface TableGroup {\n  /** Stable group identity. */\n  id: string;\n  label: string;\n  value?: string | number;\n  /** Total server-side member count; may exceed the currently loaded row count. */\n  totalCount?: number;\n  /** Optional localized total-count phrase such as “166 events” for accessible loaded progress. */\n  countLabel?: string;\n  /**\n   * Optional semantic intent for the group section header. Applies a faint\n   * intent background and bold intent title color.\n   */\n  intent?: TableGroupIntent;\n  /** Whether this group has more member rows available to load. */\n  hasMore?: boolean;\n  /** Controlled incremental loading state for this group's member rows. */\n  loadingMore?: boolean;\n  /** Controlled incremental loading failure for this group's member rows. */\n  loadMoreError?: string;\n  /** Reset key for this group's query, sort, or filter state. Defaults to the group ID. */\n  loadIdentity?: string | number;\n  rows: TableRow[];\n}\n\nexport interface TableSortChangeDetail {\n  sort: TableSortState | null;\n}\n\nexport interface TableSelectionChangeDetail {\n  selectedRowIds: string[];\n  scope: 'row' | 'all-loaded' | 'group';\n  changedRowId?: string;\n  /** Present when scope is `group`. */\n  groupId?: string;\n  selected?: boolean;\n}\n\nexport interface TableLoadMoreDetail {\n  reason: TableLoadMoreReason;\n  loadIdentity: string | number;\n  loadedRowCount: number;\n}\n\nexport interface TableGroupLoadMoreDetail extends TableLoadMoreDetail {\n  groupId: string;\n}\n\nexport interface TableCellActionDetail {\n  actionId: string;\n  rowId: string;\n  columnId: string;\n}\n\nexport interface TableGroupCollapseChangeDetail {\n  scope: 'group' | 'all';\n  /** Present when a single group was toggled. */\n  groupId?: string;\n  collapsed: boolean;\n  collapsedGroupIds: string[];\n}\n\nexport interface TableRowActivateDetail {\n  rowId: string;\n}\n\n/** Controlled show/hide and data-column order for the table-owned customizer. */\nexport interface TableColumnsConfigChangeDetail {\n  hiddenColumnIds: string[];\n  columnOrder: string[];\n}\n\n/** Controlled top-level pagination state. Rows or groups contain only the active page. */\nexport interface TablePaginationState extends PaginationState {\n  /** Change to request one fresh fitted-capacity snapshot for the current query shape. */\n  fitIdentity?: string | number;\n}\n",
       "type": "registry:ui"
     },
     {
@@ -1395,7 +1433,7 @@
     },
     {
       "path": "src/wc/components/Table/table-virtual-model.ts",
-      "content": "import { resolveTableCellPresentation } from './table-cell-model';\nimport type { TableColumn, TableGroup, TableRow } from './table-types';\n\n/**\n * Token-aligned body-row track contracts: 40 / 62 / 84, plus wrapping-secondary\n * 106. Estimates only; measured heights replace these after paint.\n */\nexport const TABLE_VIRTUAL_ROW_TRACK_SIZE = {\n  1: 40,\n  2: 62,\n  3: 84,\n  4: 106,\n} as const;\n\nexport const TABLE_VIRTUAL_GROUP_HEADER_SIZE = TABLE_VIRTUAL_ROW_TRACK_SIZE[1];\nexport const TABLE_VIRTUAL_MIN_OVERSCAN_ROWS = 8;\n\nexport const TABLE_VIRTUAL_VIEWPORT_REQUIRED_HEADING = 'Bounded height required';\nexport const TABLE_VIRTUAL_VIEWPORT_REQUIRED_BODY =\n  'Virtual mode requires height, maxHeight, or fitViewport.';\n\nexport const TABLE_VIRTUAL_TOTAL_SUMMARY_LABEL = '{total} items';\n\nexport type TableVirtualItemKind = 'group' | 'row';\n\nexport interface TableVirtualItem {\n  kind: TableVirtualItemKind;\n  id: string;\n  groupId?: string;\n  rowId?: string;\n  estimatedSize: number;\n  variableSize: boolean;\n}\n\nexport type TableVirtualNode =\n  | { kind: 'spacer'; size: number; key: string }\n  | { kind: 'row'; index: number; item: TableVirtualItem }\n  | {\n      kind: 'group';\n      groupId: string;\n      headerIndex: number;\n      nodes: Array<Extract<TableVirtualNode, { kind: 'spacer' | 'row' }>>;\n    };\n\nexport interface TableVirtualPlan {\n  totalSize: number;\n  itemCount: number;\n  start: number;\n  end: number;\n  nodes: TableVirtualNode[];\n  mountedIds: ReadonlySet<string>;\n  mountedIndexes: ReadonlySet<number>;\n}\n\nexport interface FlattenTableVirtualItemsInput {\n  grouped: boolean;\n  rows: TableRow[];\n  groups: TableGroup[];\n  collapsedGroupIds: ReadonlySet<string> | readonly string[];\n  columns: TableColumn[];\n}\n\nexport interface ResolveTableVirtualPlanInput {\n  items: readonly TableVirtualItem[];\n  sizes: readonly number[];\n  scrollOffset: number;\n  viewportSize: number;\n  pinnedRowIds?: ReadonlySet<string>;\n}\n\nexport interface TableVirtualIndex {\n  items: readonly TableVirtualItem[];\n  sizes: readonly number[];\n  prefix: readonly number[];\n  itemCount: number;\n  totalSize: number;\n  hasVariableSize: boolean;\n  grouped: boolean;\n  groupHeaderIndexes: readonly number[];\n  headerIndexByGroup: ReadonlyMap<string, number>;\n  groupEndByHeader: ReadonlyMap<number, number>;\n  rowIndexById: ReadonlyMap<string, number>;\n  itemIndexById: ReadonlyMap<string, number>;\n}\n\nexport interface ResolveTableVirtualIndexedPlanInput {\n  scrollOffset: number;\n  viewportSize: number;\n  scrollDirection?: 'backward' | 'forward' | 'none';\n  pinnedRowIds?: ReadonlySet<string>;\n}\n\n/** Map a cell recipe onto the named track stack used for first-paint estimates. */\nexport function estimateTableCellTrackCount(\n  value: TableRow['cells'][string],\n  column: TableColumn\n): number {\n  return tableCellTrackCount(resolveTableCellPresentation(value, column));\n}\n\nfunction tableCellTrackCount(\n  presentation: ReturnType<typeof resolveTableCellPresentation>\n): number {\n  if (presentation.kind === 'image') {\n    return presentation.variant === 'triple' ? 3 : presentation.variant === 'multi' ? 2 : 1;\n  }\n  if (presentation.kind === 'tag') {\n    return presentation.variant === 'text-with-tag' ? 2 : 1;\n  }\n  if (presentation.kind !== 'text' && presentation.kind !== 'icon-text') return 1;\n\n  const variantTracks =\n    presentation.variant === 'triple'\n      ? 3\n      : presentation.variant === 'multi' || presentation.variant === 'primary-pair'\n        ? 2\n        : 1;\n  if (!presentation.wraps) return variantTracks;\n  if (presentation.lineClamp === 'none') {\n    return presentation.kind === 'text' && !presentation.singleLine ? 4 : 3;\n  }\n  if (presentation.lineClamp === 3 && variantTracks >= 2) return 4;\n  return Math.max(variantTracks, presentation.lineClamp);\n}\n\n/** Tallest named track stack across the row's visible cells. */\nexport function estimateTableRowBlockSize(row: TableRow, columns: readonly TableColumn[]): number {\n  return tableVirtualRowMetrics(row, columns).estimatedSize;\n}\n\nfunction tableVirtualRowMetrics(\n  row: TableRow,\n  columns: readonly TableColumn[]\n): Pick<TableVirtualItem, 'estimatedSize' | 'variableSize'> {\n  let tracks: 1 | 2 | 3 | 4 = 1;\n  let variableSize = false;\n  for (const column of columns) {\n    const value = row.cells[column.id];\n    const presentation = resolveTableCellPresentation(value, column);\n    if (\n      (presentation.kind === 'text' || presentation.kind === 'icon-text') &&\n      presentation.wraps &&\n      presentation.lineClamp === 'none'\n    ) {\n      variableSize = true;\n    }\n    const count = tableCellTrackCount(presentation);\n    if (count === 4) {\n      tracks = 4;\n    } else if (count > tracks) tracks = count as 1 | 2 | 3;\n  }\n  return { estimatedSize: TABLE_VIRTUAL_ROW_TRACK_SIZE[tracks], variableSize };\n}\n\nexport function flattenTableVirtualItems(input: FlattenTableVirtualItemsInput): TableVirtualItem[] {\n  const collapsed =\n    input.collapsedGroupIds instanceof Set\n      ? input.collapsedGroupIds\n      : new Set(input.collapsedGroupIds);\n  if (!input.grouped) {\n    return input.rows.map(row => {\n      const metrics = tableVirtualRowMetrics(row, input.columns);\n      return {\n        kind: 'row' as const,\n        id: `row:${row.id}`,\n        rowId: row.id,\n        ...metrics,\n      };\n    });\n  }\n\n  const items: TableVirtualItem[] = [];\n  for (const group of input.groups) {\n    items.push({\n      kind: 'group',\n      id: `group:${group.id}`,\n      groupId: group.id,\n      estimatedSize: TABLE_VIRTUAL_GROUP_HEADER_SIZE,\n      variableSize: false,\n    });\n    if (collapsed.has(group.id)) continue;\n    for (const row of group.rows) {\n      const metrics = tableVirtualRowMetrics(row, input.columns);\n      items.push({\n        kind: 'row',\n        id: `row:${row.id}`,\n        rowId: row.id,\n        groupId: group.id,\n        ...metrics,\n      });\n    }\n  }\n  return items;\n}\n\nexport function tableVirtualOverscanPx(viewportSize: number): number {\n  const min = TABLE_VIRTUAL_MIN_OVERSCAN_ROWS * TABLE_VIRTUAL_ROW_TRACK_SIZE[1];\n  return Math.max(0, viewportSize / 2, min);\n}\n\nexport function buildTableVirtualPrefixSums(sizes: readonly number[]): number[] {\n  const prefix = new Array<number>(sizes.length + 1);\n  prefix[0] = 0;\n  for (let index = 0; index < sizes.length; index += 1) {\n    prefix[index + 1] = prefix[index] + Math.max(0, sizes[index] ?? 0);\n  }\n  return prefix;\n}\n\n/** Largest item index whose start offset is <= `offset`. */\nexport function findTableVirtualIndexAtOffset(prefix: readonly number[], offset: number): number {\n  const lastIndex = prefix.length - 2;\n  if (lastIndex < 0) return 0;\n  const target = Math.max(0, offset);\n  let low = 0;\n  let high = lastIndex;\n  while (low < high) {\n    const mid = (low + high + 1) >> 1;\n    if ((prefix[mid] ?? 0) <= target) low = mid;\n    else high = mid - 1;\n  }\n  return low;\n}\n\nexport function tableVirtualItemSizes(\n  items: readonly TableVirtualItem[],\n  measures: ReadonlyMap<string, number>\n): number[] {\n  return items.map(item => measures.get(item.id) ?? item.estimatedSize);\n}\n\nexport function sameTableVirtualPlan(\n  left: TableVirtualPlan | null | undefined,\n  right: TableVirtualPlan | null | undefined\n): boolean {\n  if (left === right) return true;\n  if (!left || !right) return false;\n  if (\n    left.start !== right.start ||\n    left.end !== right.end ||\n    left.totalSize !== right.totalSize ||\n    left.itemCount !== right.itemCount ||\n    left.mountedIndexes.size !== right.mountedIndexes.size\n  ) {\n    return false;\n  }\n  for (const index of left.mountedIndexes) {\n    if (!right.mountedIndexes.has(index)) return false;\n  }\n  return sameVirtualNodes(left.nodes, right.nodes);\n}\n\nfunction sameVirtualNodes(\n  left: readonly TableVirtualNode[],\n  right: readonly TableVirtualNode[]\n): boolean {\n  if (left.length !== right.length) return false;\n  for (let index = 0; index < left.length; index += 1) {\n    const a = left[index];\n    const b = right[index];\n    if (!a || !b || a.kind !== b.kind) return false;\n    if (a.kind === 'spacer' && b.kind === 'spacer') {\n      if (a.size !== b.size || a.key !== b.key) return false;\n      continue;\n    }\n    if (a.kind === 'row' && b.kind === 'row') {\n      if (a.index !== b.index || a.item.id !== b.item.id) return false;\n      continue;\n    }\n    if (a.kind === 'group' && b.kind === 'group') {\n      if (a.groupId !== b.groupId || a.headerIndex !== b.headerIndex) return false;\n      if (!sameVirtualNodes(a.nodes, b.nodes)) return false;\n    }\n  }\n  return true;\n}\n\n/** Precompute dataset-wide lookup state. Rebuild only when items or their sizes change. */\nexport function createTableVirtualIndex(\n  items: readonly TableVirtualItem[],\n  sizes: readonly number[]\n): TableVirtualIndex {\n  const prefix = buildTableVirtualPrefixSums(sizes);\n  const itemCount = items.length;\n  const groupHeaderIndexes: number[] = [];\n  const headerIndexByGroup = new Map<string, number>();\n  const groupEndByHeader = new Map<number, number>();\n  const rowIndexById = new Map<string, number>();\n  const itemIndexById = new Map<string, number>();\n  let activeHeaderIndex: number | null = null;\n  let hasVariableSize = false;\n\n  for (let itemIndex = 0; itemIndex < itemCount; itemIndex += 1) {\n    const item = items[itemIndex];\n    if (item) {\n      itemIndexById.set(item.id, itemIndex);\n      hasVariableSize ||= item.variableSize;\n    }\n    if (item?.kind === 'group' && item.groupId) {\n      if (activeHeaderIndex != null) groupEndByHeader.set(activeHeaderIndex, itemIndex);\n      activeHeaderIndex = itemIndex;\n      groupHeaderIndexes.push(itemIndex);\n      headerIndexByGroup.set(item.groupId, itemIndex);\n    } else if (item?.kind === 'row' && item.rowId) {\n      rowIndexById.set(item.rowId, itemIndex);\n    }\n  }\n  if (activeHeaderIndex != null) groupEndByHeader.set(activeHeaderIndex, itemCount);\n\n  return {\n    items,\n    sizes,\n    prefix,\n    itemCount,\n    totalSize: prefix[itemCount] ?? 0,\n    hasVariableSize,\n    grouped: groupHeaderIndexes.length > 0,\n    groupHeaderIndexes,\n    headerIndexByGroup,\n    groupEndByHeader,\n    rowIndexById,\n    itemIndexById,\n  };\n}\n\n/** Resolve the mounted slice from cached dataset-wide lookup state. */\nexport function resolveTableVirtualPlanFromIndex(\n  index: TableVirtualIndex,\n  input: ResolveTableVirtualIndexedPlanInput\n): TableVirtualPlan {\n  const { items, prefix, itemCount, totalSize } = index;\n  const empty: TableVirtualPlan = {\n    totalSize,\n    itemCount,\n    start: 0,\n    end: 0,\n    nodes: totalSize > 0 ? [{ kind: 'spacer', size: totalSize, key: 'pad-empty' }] : [],\n    mountedIds: new Set(),\n    mountedIndexes: new Set(),\n  };\n  if (itemCount === 0) return empty;\n\n  const viewportSize = Math.max(0, input.viewportSize);\n  const overscan = tableVirtualOverscanPx(viewportSize);\n  const trailingOverscan = (TABLE_VIRTUAL_MIN_OVERSCAN_ROWS * TABLE_VIRTUAL_ROW_TRACK_SIZE[1]) / 4;\n  const before = input.scrollDirection === 'forward' ? trailingOverscan : overscan;\n  const after = input.scrollDirection === 'backward' ? trailingOverscan : overscan;\n  const scrollOffset = Math.max(0, Math.min(input.scrollOffset, Math.max(0, totalSize)));\n  const rangeStart = Math.max(0, scrollOffset - before);\n  const rangeEnd = scrollOffset + viewportSize + after;\n  const start = findTableVirtualIndexAtOffset(prefix, rangeStart);\n  let end = start;\n  while (end < itemCount && (prefix[end] ?? 0) < rangeEnd) end += 1;\n  if (end === start) end = Math.min(itemCount, start + 1);\n\n  const mounted = new Set<number>();\n  for (let itemIndex = start; itemIndex < end; itemIndex += 1) mounted.add(itemIndex);\n\n  const pinHeader = (groupId: string | undefined) => {\n    if (!groupId) return;\n    const headerIndex = index.headerIndexByGroup.get(groupId);\n    if (headerIndex != null) mounted.add(headerIndex);\n  };\n  for (const mountedIndex of [...mounted]) pinHeader(items[mountedIndex]?.groupId);\n\n  const nextHeader = firstTableVirtualIndexAfter(index.groupHeaderIndexes, end - 1);\n  if (nextHeader != null) mounted.add(nextHeader);\n\n  if (input.pinnedRowIds) {\n    for (const rowId of input.pinnedRowIds) {\n      const rowIndex = index.rowIndexById.get(rowId);\n      if (rowIndex == null) continue;\n      mounted.add(rowIndex);\n      pinHeader(items[rowIndex]?.groupId);\n    }\n  }\n\n  const mountedSorted = [...mounted].sort((left, right) => left - right);\n  const nodes = index.grouped\n    ? buildGroupedVirtualNodes(index, mounted, mountedSorted)\n    : buildFlatVirtualNodes(index, mountedSorted);\n  const mountedIds = new Set<string>();\n  for (const mountedIndex of mounted) {\n    const id = items[mountedIndex]?.id;\n    if (id) mountedIds.add(id);\n  }\n\n  return {\n    totalSize,\n    itemCount,\n    start: mountedSorted[0] ?? start,\n    end: mountedSorted.length > 0 ? mountedSorted[mountedSorted.length - 1]! + 1 : end,\n    nodes,\n    mountedIds,\n    mountedIndexes: mounted,\n  };\n}\n\n/** Resolve a one-off plan. Controllers retain and reuse a prepared index. */\nexport function resolveTableVirtualPlan(input: ResolveTableVirtualPlanInput): TableVirtualPlan {\n  return resolveTableVirtualPlanFromIndex(createTableVirtualIndex(input.items, input.sizes), input);\n}\n\nfunction firstTableVirtualIndexAfter(\n  indexes: readonly number[],\n  target: number\n): number | undefined {\n  let low = 0;\n  let high = indexes.length;\n  while (low < high) {\n    const middle = (low + high) >> 1;\n    if ((indexes[middle] ?? 0) <= target) low = middle + 1;\n    else high = middle;\n  }\n  return indexes[low];\n}\n\nfunction buildFlatVirtualNodes(\n  index: TableVirtualIndex,\n  mounted: readonly number[]\n): TableVirtualNode[] {\n  const { items, prefix, itemCount } = index;\n  const nodes: TableVirtualNode[] = [];\n  let cursor = 0;\n  for (const mountedIndex of mounted) {\n    const item = items[mountedIndex];\n    if (!item) continue;\n    const spacerSize = (prefix[mountedIndex] ?? 0) - (prefix[cursor] ?? 0);\n    if (spacerSize > 0) {\n      nodes.push({ kind: 'spacer', size: spacerSize, key: `pad-${cursor}-${mountedIndex}` });\n    }\n    nodes.push({ kind: 'row', index: mountedIndex, item });\n    cursor = mountedIndex + 1;\n  }\n  const trailingSize = (prefix[itemCount] ?? 0) - (prefix[cursor] ?? 0);\n  if (trailingSize > 0) {\n    nodes.push({ kind: 'spacer', size: trailingSize, key: `pad-${cursor}-${itemCount}` });\n  }\n  return nodes;\n}\n\nfunction buildGroupedVirtualNodes(\n  index: TableVirtualIndex,\n  mounted: ReadonlySet<number>,\n  mountedSorted: readonly number[]\n): TableVirtualNode[] {\n  const { items, prefix, itemCount } = index;\n  const nodes: TableVirtualNode[] = [];\n  const selectedHeaders = new Set<number>();\n  for (const mountedIndex of mountedSorted) {\n    const item = items[mountedIndex];\n    const headerIndex =\n      item?.kind === 'group'\n        ? mountedIndex\n        : item?.groupId\n          ? index.headerIndexByGroup.get(item.groupId)\n          : undefined;\n    if (headerIndex != null) selectedHeaders.add(headerIndex);\n  }\n\n  let cursor = 0;\n  for (const headerIndex of [...selectedHeaders].sort((left, right) => left - right)) {\n    const header = items[headerIndex];\n    if (header?.kind !== 'group' || !header.groupId) continue;\n    const groupId = header.groupId;\n    const groupEnd = index.groupEndByHeader.get(headerIndex) ?? headerIndex + 1;\n    const leadingSize = (prefix[headerIndex] ?? 0) - (prefix[cursor] ?? 0);\n    if (leadingSize > 0) {\n      nodes.push({ kind: 'spacer', size: leadingSize, key: `pad-${cursor}-${headerIndex}` });\n    }\n\n    const groupNodes: Array<Extract<TableVirtualNode, { kind: 'spacer' | 'row' }>> = [];\n    const mountedMembers = mountedSorted.filter(\n      mountedIndex => mountedIndex > headerIndex && mountedIndex < groupEnd\n    );\n    let memberCursor = headerIndex + 1;\n    for (const memberIndex of mountedMembers) {\n      const item = items[memberIndex];\n      const spacerSize = (prefix[memberIndex] ?? 0) - (prefix[memberCursor] ?? 0);\n      if (spacerSize > 0) {\n        groupNodes.push({\n          kind: 'spacer',\n          size: spacerSize,\n          key: `group-${groupId}-pad-${memberCursor}-${memberIndex}`,\n        });\n      }\n      if (item?.kind === 'row' && mounted.has(memberIndex)) {\n        groupNodes.push({ kind: 'row', index: memberIndex, item });\n      }\n      memberCursor = memberIndex + 1;\n    }\n    const trailingSize = (prefix[groupEnd] ?? 0) - (prefix[memberCursor] ?? 0);\n    if (trailingSize > 0) {\n      groupNodes.push({\n        kind: 'spacer',\n        size: trailingSize,\n        key: `group-${groupId}-pad-${memberCursor}-${groupEnd}`,\n      });\n    }\n\n    nodes.push({ kind: 'group', groupId, headerIndex, nodes: groupNodes });\n    cursor = groupEnd;\n  }\n\n  const trailingSize = (prefix[itemCount] ?? 0) - (prefix[cursor] ?? 0);\n  if (trailingSize > 0) {\n    nodes.push({ kind: 'spacer', size: trailingSize, key: `pad-${cursor}-${itemCount}` });\n  }\n  return nodes;\n}\n",
+      "content": "import { resolveTableCellPresentation } from './table-cell-model';\nimport type { TableColumn, TableGroup, TableRow } from './table-types';\n\n/**\n * Token-aligned body-row track contracts: 40 / 62 / 84, plus wrapping-secondary\n * 106. Estimates only; measured heights replace these after paint.\n */\nexport const TABLE_VIRTUAL_ROW_TRACK_SIZE = {\n  1: 40,\n  2: 62,\n  3: 84,\n  4: 106,\n} as const;\n\nconst TABLE_VIRTUAL_LATER_TRACK_INCREMENT =\n  TABLE_VIRTUAL_ROW_TRACK_SIZE[2] - TABLE_VIRTUAL_ROW_TRACK_SIZE[1];\n\n/** Estimated row height for any positive named track count. */\nexport function tableVirtualRowTrackSize(tracks: number): number {\n  const count = Number.isFinite(tracks) && tracks > 0 ? Math.floor(tracks) : 1;\n  return TABLE_VIRTUAL_ROW_TRACK_SIZE[1] + (count - 1) * TABLE_VIRTUAL_LATER_TRACK_INCREMENT;\n}\n\nexport const TABLE_VIRTUAL_GROUP_HEADER_SIZE = TABLE_VIRTUAL_ROW_TRACK_SIZE[1];\nexport const TABLE_VIRTUAL_MIN_OVERSCAN_ROWS = 8;\n\nexport const TABLE_VIRTUAL_VIEWPORT_REQUIRED_HEADING = 'Bounded height required';\nexport const TABLE_VIRTUAL_VIEWPORT_REQUIRED_BODY =\n  'Virtual mode requires height, maxHeight, or fitViewport.';\n\nexport const TABLE_VIRTUAL_TOTAL_SUMMARY_LABEL = '{total} items';\n\nexport type TableVirtualItemKind = 'group' | 'row';\n\nexport interface TableVirtualItem {\n  kind: TableVirtualItemKind;\n  id: string;\n  groupId?: string;\n  rowId?: string;\n  estimatedSize: number;\n  variableSize: boolean;\n}\n\nexport type TableVirtualNode =\n  | { kind: 'spacer'; size: number; key: string }\n  | { kind: 'row'; index: number; item: TableVirtualItem }\n  | {\n      kind: 'group';\n      groupId: string;\n      headerIndex: number;\n      nodes: Array<Extract<TableVirtualNode, { kind: 'spacer' | 'row' }>>;\n    };\n\nexport interface TableVirtualPlan {\n  totalSize: number;\n  itemCount: number;\n  start: number;\n  end: number;\n  nodes: TableVirtualNode[];\n  mountedIds: ReadonlySet<string>;\n  mountedIndexes: ReadonlySet<number>;\n}\n\nexport interface FlattenTableVirtualItemsInput {\n  grouped: boolean;\n  rows: TableRow[];\n  groups: TableGroup[];\n  collapsedGroupIds: ReadonlySet<string> | readonly string[];\n  columns: TableColumn[];\n}\n\nexport interface ResolveTableVirtualPlanInput {\n  items: readonly TableVirtualItem[];\n  sizes: readonly number[];\n  scrollOffset: number;\n  viewportSize: number;\n  pinnedRowIds?: ReadonlySet<string>;\n}\n\nexport interface TableVirtualIndex {\n  items: readonly TableVirtualItem[];\n  sizes: readonly number[];\n  prefix: readonly number[];\n  itemCount: number;\n  totalSize: number;\n  hasVariableSize: boolean;\n  grouped: boolean;\n  groupHeaderIndexes: readonly number[];\n  headerIndexByGroup: ReadonlyMap<string, number>;\n  groupEndByHeader: ReadonlyMap<number, number>;\n  rowIndexById: ReadonlyMap<string, number>;\n  itemIndexById: ReadonlyMap<string, number>;\n}\n\nexport interface ResolveTableVirtualIndexedPlanInput {\n  scrollOffset: number;\n  viewportSize: number;\n  scrollDirection?: 'backward' | 'forward' | 'none';\n  pinnedRowIds?: ReadonlySet<string>;\n}\n\n/** Map a cell recipe onto the named track stack used for first-paint estimates. */\nexport function estimateTableCellTrackCount(\n  value: TableRow['cells'][string],\n  column: TableColumn\n): number {\n  return tableCellTrackCount(resolveTableCellPresentation(value, column));\n}\n\nfunction tableCellTrackCount(\n  presentation: ReturnType<typeof resolveTableCellPresentation>\n): number {\n  if (presentation.kind === 'image') {\n    return presentation.variant === 'triple' ? 3 : presentation.variant === 'multi' ? 2 : 1;\n  }\n  if (presentation.kind === 'tag') {\n    return presentation.variant === 'text-with-tag' ? 2 : 1;\n  }\n  if (presentation.kind === 'tags') return presentation.tracks;\n  if (presentation.kind !== 'text' && presentation.kind !== 'icon-text') return 1;\n\n  const variantTracks =\n    presentation.variant === 'triple'\n      ? 3\n      : presentation.variant === 'multi' || presentation.variant === 'primary-pair'\n        ? 2\n        : 1;\n  if (!presentation.wraps) return variantTracks;\n  if (presentation.lineClamp === 'none') {\n    return presentation.kind === 'text' && !presentation.singleLine ? 4 : 3;\n  }\n  if (presentation.lineClamp === 3 && variantTracks >= 2) return 4;\n  return Math.max(variantTracks, presentation.lineClamp);\n}\n\n/** Tallest named track stack across the row's visible cells. */\nexport function estimateTableRowBlockSize(row: TableRow, columns: readonly TableColumn[]): number {\n  return tableVirtualRowMetrics(row, columns).estimatedSize;\n}\n\nfunction tableVirtualRowMetrics(\n  row: TableRow,\n  columns: readonly TableColumn[]\n): Pick<TableVirtualItem, 'estimatedSize' | 'variableSize'> {\n  let tracks = 1;\n  let variableSize = false;\n  for (const column of columns) {\n    const value = row.cells[column.id];\n    const presentation = resolveTableCellPresentation(value, column);\n    if (\n      (presentation.kind === 'text' || presentation.kind === 'icon-text') &&\n      presentation.wraps &&\n      presentation.lineClamp === 'none'\n    ) {\n      variableSize = true;\n    }\n    if (presentation.kind === 'tags') variableSize = true;\n    const count = tableCellTrackCount(presentation);\n    if (count > tracks) tracks = count;\n  }\n  return { estimatedSize: tableVirtualRowTrackSize(tracks), variableSize };\n}\n\nexport function flattenTableVirtualItems(input: FlattenTableVirtualItemsInput): TableVirtualItem[] {\n  const collapsed =\n    input.collapsedGroupIds instanceof Set\n      ? input.collapsedGroupIds\n      : new Set(input.collapsedGroupIds);\n  if (!input.grouped) {\n    return input.rows.map(row => {\n      const metrics = tableVirtualRowMetrics(row, input.columns);\n      return {\n        kind: 'row' as const,\n        id: `row:${row.id}`,\n        rowId: row.id,\n        ...metrics,\n      };\n    });\n  }\n\n  const items: TableVirtualItem[] = [];\n  for (const group of input.groups) {\n    items.push({\n      kind: 'group',\n      id: `group:${group.id}`,\n      groupId: group.id,\n      estimatedSize: TABLE_VIRTUAL_GROUP_HEADER_SIZE,\n      variableSize: false,\n    });\n    if (collapsed.has(group.id)) continue;\n    for (const row of group.rows) {\n      const metrics = tableVirtualRowMetrics(row, input.columns);\n      items.push({\n        kind: 'row',\n        id: `row:${row.id}`,\n        rowId: row.id,\n        groupId: group.id,\n        ...metrics,\n      });\n    }\n  }\n  return items;\n}\n\nexport function tableVirtualOverscanPx(viewportSize: number): number {\n  const min = TABLE_VIRTUAL_MIN_OVERSCAN_ROWS * TABLE_VIRTUAL_ROW_TRACK_SIZE[1];\n  return Math.max(0, viewportSize / 2, min);\n}\n\nexport function buildTableVirtualPrefixSums(sizes: readonly number[]): number[] {\n  const prefix = new Array<number>(sizes.length + 1);\n  prefix[0] = 0;\n  for (let index = 0; index < sizes.length; index += 1) {\n    prefix[index + 1] = prefix[index] + Math.max(0, sizes[index] ?? 0);\n  }\n  return prefix;\n}\n\n/** Largest item index whose start offset is <= `offset`. */\nexport function findTableVirtualIndexAtOffset(prefix: readonly number[], offset: number): number {\n  const lastIndex = prefix.length - 2;\n  if (lastIndex < 0) return 0;\n  const target = Math.max(0, offset);\n  let low = 0;\n  let high = lastIndex;\n  while (low < high) {\n    const mid = (low + high + 1) >> 1;\n    if ((prefix[mid] ?? 0) <= target) low = mid;\n    else high = mid - 1;\n  }\n  return low;\n}\n\nexport function tableVirtualItemSizes(\n  items: readonly TableVirtualItem[],\n  measures: ReadonlyMap<string, number>\n): number[] {\n  return items.map(item => measures.get(item.id) ?? item.estimatedSize);\n}\n\nexport function sameTableVirtualPlan(\n  left: TableVirtualPlan | null | undefined,\n  right: TableVirtualPlan | null | undefined\n): boolean {\n  if (left === right) return true;\n  if (!left || !right) return false;\n  if (\n    left.start !== right.start ||\n    left.end !== right.end ||\n    left.totalSize !== right.totalSize ||\n    left.itemCount !== right.itemCount ||\n    left.mountedIndexes.size !== right.mountedIndexes.size\n  ) {\n    return false;\n  }\n  for (const index of left.mountedIndexes) {\n    if (!right.mountedIndexes.has(index)) return false;\n  }\n  return sameVirtualNodes(left.nodes, right.nodes);\n}\n\nfunction sameVirtualNodes(\n  left: readonly TableVirtualNode[],\n  right: readonly TableVirtualNode[]\n): boolean {\n  if (left.length !== right.length) return false;\n  for (let index = 0; index < left.length; index += 1) {\n    const a = left[index];\n    const b = right[index];\n    if (!a || !b || a.kind !== b.kind) return false;\n    if (a.kind === 'spacer' && b.kind === 'spacer') {\n      if (a.size !== b.size || a.key !== b.key) return false;\n      continue;\n    }\n    if (a.kind === 'row' && b.kind === 'row') {\n      if (a.index !== b.index || a.item.id !== b.item.id) return false;\n      continue;\n    }\n    if (a.kind === 'group' && b.kind === 'group') {\n      if (a.groupId !== b.groupId || a.headerIndex !== b.headerIndex) return false;\n      if (!sameVirtualNodes(a.nodes, b.nodes)) return false;\n    }\n  }\n  return true;\n}\n\n/** Precompute dataset-wide lookup state. Rebuild only when items or their sizes change. */\nexport function createTableVirtualIndex(\n  items: readonly TableVirtualItem[],\n  sizes: readonly number[]\n): TableVirtualIndex {\n  const prefix = buildTableVirtualPrefixSums(sizes);\n  const itemCount = items.length;\n  const groupHeaderIndexes: number[] = [];\n  const headerIndexByGroup = new Map<string, number>();\n  const groupEndByHeader = new Map<number, number>();\n  const rowIndexById = new Map<string, number>();\n  const itemIndexById = new Map<string, number>();\n  let activeHeaderIndex: number | null = null;\n  let hasVariableSize = false;\n\n  for (let itemIndex = 0; itemIndex < itemCount; itemIndex += 1) {\n    const item = items[itemIndex];\n    if (item) {\n      itemIndexById.set(item.id, itemIndex);\n      hasVariableSize ||= item.variableSize;\n    }\n    if (item?.kind === 'group' && item.groupId) {\n      if (activeHeaderIndex != null) groupEndByHeader.set(activeHeaderIndex, itemIndex);\n      activeHeaderIndex = itemIndex;\n      groupHeaderIndexes.push(itemIndex);\n      headerIndexByGroup.set(item.groupId, itemIndex);\n    } else if (item?.kind === 'row' && item.rowId) {\n      rowIndexById.set(item.rowId, itemIndex);\n    }\n  }\n  if (activeHeaderIndex != null) groupEndByHeader.set(activeHeaderIndex, itemCount);\n\n  return {\n    items,\n    sizes,\n    prefix,\n    itemCount,\n    totalSize: prefix[itemCount] ?? 0,\n    hasVariableSize,\n    grouped: groupHeaderIndexes.length > 0,\n    groupHeaderIndexes,\n    headerIndexByGroup,\n    groupEndByHeader,\n    rowIndexById,\n    itemIndexById,\n  };\n}\n\n/** Resolve the mounted slice from cached dataset-wide lookup state. */\nexport function resolveTableVirtualPlanFromIndex(\n  index: TableVirtualIndex,\n  input: ResolveTableVirtualIndexedPlanInput\n): TableVirtualPlan {\n  const { items, prefix, itemCount, totalSize } = index;\n  const empty: TableVirtualPlan = {\n    totalSize,\n    itemCount,\n    start: 0,\n    end: 0,\n    nodes: totalSize > 0 ? [{ kind: 'spacer', size: totalSize, key: 'pad-empty' }] : [],\n    mountedIds: new Set(),\n    mountedIndexes: new Set(),\n  };\n  if (itemCount === 0) return empty;\n\n  const viewportSize = Math.max(0, input.viewportSize);\n  const overscan = tableVirtualOverscanPx(viewportSize);\n  const trailingOverscan = (TABLE_VIRTUAL_MIN_OVERSCAN_ROWS * TABLE_VIRTUAL_ROW_TRACK_SIZE[1]) / 4;\n  const before = input.scrollDirection === 'forward' ? trailingOverscan : overscan;\n  const after = input.scrollDirection === 'backward' ? trailingOverscan : overscan;\n  const scrollOffset = Math.max(0, Math.min(input.scrollOffset, Math.max(0, totalSize)));\n  const rangeStart = Math.max(0, scrollOffset - before);\n  const rangeEnd = scrollOffset + viewportSize + after;\n  const start = findTableVirtualIndexAtOffset(prefix, rangeStart);\n  let end = start;\n  while (end < itemCount && (prefix[end] ?? 0) < rangeEnd) end += 1;\n  if (end === start) end = Math.min(itemCount, start + 1);\n\n  const mounted = new Set<number>();\n  for (let itemIndex = start; itemIndex < end; itemIndex += 1) mounted.add(itemIndex);\n\n  const pinHeader = (groupId: string | undefined) => {\n    if (!groupId) return;\n    const headerIndex = index.headerIndexByGroup.get(groupId);\n    if (headerIndex != null) mounted.add(headerIndex);\n  };\n  for (const mountedIndex of [...mounted]) pinHeader(items[mountedIndex]?.groupId);\n\n  const nextHeader = firstTableVirtualIndexAfter(index.groupHeaderIndexes, end - 1);\n  if (nextHeader != null) mounted.add(nextHeader);\n\n  if (input.pinnedRowIds) {\n    for (const rowId of input.pinnedRowIds) {\n      const rowIndex = index.rowIndexById.get(rowId);\n      if (rowIndex == null) continue;\n      mounted.add(rowIndex);\n      pinHeader(items[rowIndex]?.groupId);\n    }\n  }\n\n  const mountedSorted = [...mounted].sort((left, right) => left - right);\n  const nodes = index.grouped\n    ? buildGroupedVirtualNodes(index, mounted, mountedSorted)\n    : buildFlatVirtualNodes(index, mountedSorted);\n  const mountedIds = new Set<string>();\n  for (const mountedIndex of mounted) {\n    const id = items[mountedIndex]?.id;\n    if (id) mountedIds.add(id);\n  }\n\n  return {\n    totalSize,\n    itemCount,\n    start: mountedSorted[0] ?? start,\n    end: mountedSorted.length > 0 ? mountedSorted[mountedSorted.length - 1]! + 1 : end,\n    nodes,\n    mountedIds,\n    mountedIndexes: mounted,\n  };\n}\n\n/** Resolve a one-off plan. Controllers retain and reuse a prepared index. */\nexport function resolveTableVirtualPlan(input: ResolveTableVirtualPlanInput): TableVirtualPlan {\n  return resolveTableVirtualPlanFromIndex(createTableVirtualIndex(input.items, input.sizes), input);\n}\n\nfunction firstTableVirtualIndexAfter(\n  indexes: readonly number[],\n  target: number\n): number | undefined {\n  let low = 0;\n  let high = indexes.length;\n  while (low < high) {\n    const middle = (low + high) >> 1;\n    if ((indexes[middle] ?? 0) <= target) low = middle + 1;\n    else high = middle;\n  }\n  return indexes[low];\n}\n\nfunction buildFlatVirtualNodes(\n  index: TableVirtualIndex,\n  mounted: readonly number[]\n): TableVirtualNode[] {\n  const { items, prefix, itemCount } = index;\n  const nodes: TableVirtualNode[] = [];\n  let cursor = 0;\n  for (const mountedIndex of mounted) {\n    const item = items[mountedIndex];\n    if (!item) continue;\n    const spacerSize = (prefix[mountedIndex] ?? 0) - (prefix[cursor] ?? 0);\n    if (spacerSize > 0) {\n      nodes.push({ kind: 'spacer', size: spacerSize, key: `pad-${cursor}-${mountedIndex}` });\n    }\n    nodes.push({ kind: 'row', index: mountedIndex, item });\n    cursor = mountedIndex + 1;\n  }\n  const trailingSize = (prefix[itemCount] ?? 0) - (prefix[cursor] ?? 0);\n  if (trailingSize > 0) {\n    nodes.push({ kind: 'spacer', size: trailingSize, key: `pad-${cursor}-${itemCount}` });\n  }\n  return nodes;\n}\n\nfunction buildGroupedVirtualNodes(\n  index: TableVirtualIndex,\n  mounted: ReadonlySet<number>,\n  mountedSorted: readonly number[]\n): TableVirtualNode[] {\n  const { items, prefix, itemCount } = index;\n  const nodes: TableVirtualNode[] = [];\n  const selectedHeaders = new Set<number>();\n  for (const mountedIndex of mountedSorted) {\n    const item = items[mountedIndex];\n    const headerIndex =\n      item?.kind === 'group'\n        ? mountedIndex\n        : item?.groupId\n          ? index.headerIndexByGroup.get(item.groupId)\n          : undefined;\n    if (headerIndex != null) selectedHeaders.add(headerIndex);\n  }\n\n  let cursor = 0;\n  for (const headerIndex of [...selectedHeaders].sort((left, right) => left - right)) {\n    const header = items[headerIndex];\n    if (header?.kind !== 'group' || !header.groupId) continue;\n    const groupId = header.groupId;\n    const groupEnd = index.groupEndByHeader.get(headerIndex) ?? headerIndex + 1;\n    const leadingSize = (prefix[headerIndex] ?? 0) - (prefix[cursor] ?? 0);\n    if (leadingSize > 0) {\n      nodes.push({ kind: 'spacer', size: leadingSize, key: `pad-${cursor}-${headerIndex}` });\n    }\n\n    const groupNodes: Array<Extract<TableVirtualNode, { kind: 'spacer' | 'row' }>> = [];\n    const mountedMembers = mountedSorted.filter(\n      mountedIndex => mountedIndex > headerIndex && mountedIndex < groupEnd\n    );\n    let memberCursor = headerIndex + 1;\n    for (const memberIndex of mountedMembers) {\n      const item = items[memberIndex];\n      const spacerSize = (prefix[memberIndex] ?? 0) - (prefix[memberCursor] ?? 0);\n      if (spacerSize > 0) {\n        groupNodes.push({\n          kind: 'spacer',\n          size: spacerSize,\n          key: `group-${groupId}-pad-${memberCursor}-${memberIndex}`,\n        });\n      }\n      if (item?.kind === 'row' && mounted.has(memberIndex)) {\n        groupNodes.push({ kind: 'row', index: memberIndex, item });\n      }\n      memberCursor = memberIndex + 1;\n    }\n    const trailingSize = (prefix[groupEnd] ?? 0) - (prefix[memberCursor] ?? 0);\n    if (trailingSize > 0) {\n      groupNodes.push({\n        kind: 'spacer',\n        size: trailingSize,\n        key: `group-${groupId}-pad-${memberCursor}-${groupEnd}`,\n      });\n    }\n\n    nodes.push({ kind: 'group', groupId, headerIndex, nodes: groupNodes });\n    cursor = groupEnd;\n  }\n\n  const trailingSize = (prefix[itemCount] ?? 0) - (prefix[cursor] ?? 0);\n  if (trailingSize > 0) {\n    nodes.push({ kind: 'spacer', size: trailingSize, key: `pad-${cursor}-${itemCount}` });\n  }\n  return nodes;\n}\n",
       "type": "registry:ui"
     }
   ]