@ds-mo/ui 13.18.1 → 14.0.1

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

@@ -12,7 +12,7 @@
     "intentStatus": "complete",
     "intent": {
       "audience": "general",
-      "status": "experimental",
+      "status": "stable",
       "summary": "Semantic, controlled data table with durable visual primitives for cell geometry, column geometry, grouping, sorting, multi-selection, sticky overflow, and incremental loading.",
       "useWhen": [
         "A structured dataset needs native row and column relationships, optional one-level grouping, or comparable values across records.",
@@ -29,6 +29,7 @@
         "component:ds-empty-state",
         "component:ds-skeleton",
         "component:ds-loader",
+        "component:ds-bar-action",
         "component:ds-button-unfilled",
         "component:ds-tag",
         "component:ds-icon"
@@ -868,8 +869,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: collapsedGroupIds, columns, grouping, groups, rows, selectedRowIds, sort.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.2.1",
-          "@ds-mo/icons ^6.6.0"
+          "@ds-mo/tokens ^6.2.2",
+          "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }
@@ -893,12 +894,12 @@
   "files": [
     {
       "path": "src/wc/components/Table/Table.css",
-      "content": "@import '../../styles/table.css';\n@import '../../styles/control-elevation.css';\n@import '../../utils/control-density.css';\n\n:host {\n  display: block;\n  box-sizing: border-box;\n  min-width: 0;\n  max-width: 100%;\n}\n\n:host(.table-host--bounded) {\n  min-block-size: 0;\n}\n\n:host(.table-host--fixed-height) {\n  block-size: var(--_table-fixed-block-size);\n}\n\n:host(.table-host--viewport-fit) {\n  block-size: var(--_table-viewport-fit-reserved-block-size, auto);\n  min-block-size: var(--_table-viewport-fit-reserved-block-size, auto);\n}\n\n/*\n * The public table recipe stays at zero specificity for product-owned native\n * markup. Inside the component, these classes sit on ds-text hosts whose reset\n * intentionally owns display, padding, and border with higher specificity.\n * Reassert only those collided properties so component geometry cannot depend\n * on whether ds-text or ds-table happens to hydrate first.\n */\nds-text.ds-table__header-label-box {\n  padding-inline: var(--dimension-space-025);\n}\n\nds-text.ds-table__cell-track {\n  display: flex;\n}\n\nds-text.ds-table__cell-track--text {\n  padding-inline: var(--_table-cell-track-label-inset);\n}\n\nds-text.ds-table__cell-secondary {\n  padding-block: var(--dimension-space-025);\n}\n\n.ds-table__cell--primary-text ds-text.ds-table__cell-secondary {\n  padding-block: 0;\n}\n\n.ds-table__cell-tag-stack--tag-with-text ds-text.ds-table__cell-tag-text {\n  padding-inline: var(--_table-cell-track-padding-inline);\n  padding-block: var(--dimension-space-025);\n}\n\n.ds-table__cell-tag-stack--text-with-tag ds-text.ds-table__cell-tag-text {\n  padding-inline: var(--_table-cell-track-label-inset);\n}\n\nds-text.ds-table__load-content {\n  display: inline-flex;\n}\n\nds-text.ds-table__bar-text {\n  display: inline-flex;\n  padding-inline: var(--ds-control-label-inset, var(--dimension-space-025));\n}\n",
+      "content": "@import '../../styles/table.css';\n@import '../../styles/control-elevation.css';\n@import '../../utils/chrome-header.css';\n@import '../../utils/control-density.css';\n\n:host {\n  display: block;\n  box-sizing: border-box;\n  min-width: 0;\n  max-width: 100%;\n}\n\n:host(.table-host--bounded) {\n  min-block-size: 0;\n}\n\n:host(.table-host--fixed-height) {\n  block-size: var(--_table-fixed-block-size);\n}\n\n:host(.table-host--viewport-fit) {\n  block-size: var(--_table-viewport-fit-reserved-block-size, auto);\n  min-block-size: var(--_table-viewport-fit-reserved-block-size, auto);\n}\n\n/*\n * The public table recipe stays at zero specificity for product-owned native\n * markup. Inside the component, these classes sit on ds-text hosts whose reset\n * intentionally owns display, padding, and border with higher specificity.\n * Reassert only those collided properties so component geometry cannot depend\n * on whether ds-text or ds-table happens to hydrate first.\n */\nds-text.ds-table__header-label-box {\n  padding-inline: var(--dimension-space-025);\n}\n\nds-text.ds-table__cell-track {\n  display: flex;\n}\n\nds-text.ds-table__cell-track--text {\n  padding-inline: var(--_table-cell-track-label-inset);\n}\n\nds-text.ds-table__cell-secondary {\n  padding-block: var(--dimension-space-025);\n}\n\n.ds-table__cell--primary-text ds-text.ds-table__cell-secondary {\n  padding-block: 0;\n}\n\n.ds-table__cell-tag-stack--tag-with-text ds-text.ds-table__cell-tag-text {\n  padding-inline: var(--_table-cell-track-padding-inline);\n  padding-block: var(--dimension-space-025);\n}\n\n.ds-table__cell-tag-stack--text-with-tag ds-text.ds-table__cell-tag-text {\n  padding-inline: var(--_table-cell-track-label-inset);\n}\n\nds-text.ds-table__load-content {\n  display: inline-flex;\n}\n\nds-text.ds-table__bar-text {\n  display: inline-flex;\n  width: auto;\n  max-width: 100%;\n  padding-inline: var(--ds-control-label-inset, var(--dimension-space-025));\n}\n\nds-text.ds-table__footer-summary {\n  margin-inline-start: auto;\n}\n\n.ds-table__bar-status slot::slotted(*) {\n  width: auto;\n  max-width: 100%;\n  min-width: 0;\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/Table/Table.tsx",
-      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport {\n  deriveTableSelectionState,\n  formatTableResultSummary,\n  nextTableSortState,\n  tableColumnSize,\n  tableModelIssues,\n  tableRows,\n  tableRowSelectionLabel,\n  toggleAllLoadedTableRows,\n  toggleTableGroupCollapsed,\n  toggleTableGroupSelection,\n  nextTableGroupsCollapsed,\n  toggleTableRowSelection,\n} from './table-model';\nimport {\n  resolveTableCellPresentation,\n  type TableCellPresentation,\n} from './table-cell-model';\nimport {\n  createTableRenderModel,\n  type TableRenderModel,\n} from './table-render-model';\nimport { TableLayoutController } from './table-layout-controller';\nimport { TableLoadController } from './table-load-controller';\nimport {\n  TableViewportFitController,\n  type TableViewportFitMetrics,\n} from './table-viewport-fit-controller';\nimport type {\n  TableCaptionVisibility,\n  TableCellActionDetail,\n  TableColumn,\n  TableGroup,\n  TableGroupCollapseChangeDetail,\n  TableGroupingState,\n  TableLoadMoreDetail,\n  TableLoadMoreMode,\n  TableRow,\n  TableRowActivateDetail,\n  TableSelectionChangeDetail,\n  TableSelectionMode,\n  TableSortChangeDetail,\n  TableSortState,\n} from './table-types';\n\n@Component({\n  tag: 'ds-table',\n  styleUrls: [\n    '../../utils/focus-ring.css',\n    '../../utils/interaction-fill.css',\n    'Table.css',\n  ],\n  scoped: true,\n})\nexport class Table {\n  @Element() el!: HTMLElement;\n  /** Stable column definitions. Assign through JavaScript. */\n  @Prop() columns: TableColumn[] = [];\n  /** Ungrouped row data. Ignored while grouping is active. Assign through JavaScript. */\n  @Prop() rows: TableRow[] = [];\n  /** One level of application-owned grouped data. Assign through JavaScript. */\n  @Prop() groups: TableGroup[] = [];\n  /** Controlled grouping column. 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   * Optional result summary footer. When both `displayedCount` and `totalCount`\n   * are finite numbers, the table shows “Displaying {displayed} of {total}”.\n   */\n  @Prop() displayedCount: number | undefined;\n  @Prop() totalCount: number | undefined;\n  /** Supports {displayed} and {total} placeholders. */\n  @Prop() resultSummaryLabel: string = 'Displaying {displayed} of {total}';\n  @Prop() stickyHeader: boolean = false;\n  /** Maximum scroll-region height. Numbers resolve to CSS pixels. */\n  @Prop() maxHeight: string | number | undefined;\n  /** Fixed height for the complete header, table frame, and footer composition. */\n  @Prop() height: string | number | undefined;\n  /** Fit the complete table composition to its nearest vertical scrollport. */\n  @Prop() fitViewport: boolean = false;\n  /** Reserved space above a viewport-fitted table once surrounding chrome is compact. */\n  @Prop() viewportInsetBlockStart: string | number = 0;\n  /** Reserved space below a viewport-fitted table. */\n  @Prop() viewportInsetBlockEnd: string | number = 0;\n  /** Optional explicit label for the horizontal/vertical scroll region. */\n  @Prop() scrollLabel: string | undefined;\n\n  @Prop() selectionMode: TableSelectionMode = 'none';\n  /** Controlled selected row identities. IDs outside the loaded rows are preserved. */\n  @Prop() selectedRowIds: string[] = [];\n\n  /** Initial loading state. Existing rows stay visible; incremental loading uses loadingMore. */\n  @Prop() loading: boolean = false;\n  @Prop() skeletonRows: number = 5;\n  @Prop() emptyHeading: string = 'No results';\n  @Prop() emptyBody: string = 'No data is available.';\n  /** Initial error state. Existing rows stay visible; incremental failures use loadMoreError. */\n  @Prop() error: boolean = false;\n  @Prop() errorHeading: string = 'Unable to load data';\n  @Prop() errorBody: string = 'The data could not be loaded.';\n  @Prop() emptyCellLabel: string = 'Not available';\n\n  /** Enable application-owned incremental loading without pagination. */\n  @Prop() lazyLoading: boolean = false;\n  @Prop() loadMoreMode: TableLoadMoreMode = 'auto';\n  @Prop() hasMore: boolean = false;\n  @Prop() loadingMore: boolean = false;\n  @Prop() loadMoreError: string | undefined;\n  /** Reset key for a new query/group/sort dataset. */\n  @Prop() loadIdentity: string | number = 'default';\n  /** IntersectionObserver root margin in CSS pixels. */\n  @Prop() loadMoreThreshold: number = 0;\n  @Prop() loadMoreLabel: string = 'Load more';\n  @Prop() retryLabel: string = 'Retry';\n  @Prop() loadingMoreLabel: string = 'Loading more results';\n  @Prop() endOfResultsLabel: string = 'All results loaded';\n  /** Supports {count} and {total} placeholders. */\n  @Prop() rowsLoadedLabel: string = '{count} more rows loaded. {total} rows loaded.';\n\n  @Event() dsSortChange!: EventEmitter<TableSortChangeDetail>;\n  @Event() dsGroupCollapseChange!: EventEmitter<TableGroupCollapseChangeDetail>;\n  @Event() dsSelectionChange!: EventEmitter<TableSelectionChangeDetail>;\n  @Event() dsLoadMore!: EventEmitter<TableLoadMoreDetail>;\n  @Event() dsCellAction!: EventEmitter<TableCellActionDetail>;\n  @Event() dsRowActivate!: EventEmitter<TableRowActivateDetail>;\n\n  @State() private overflowStart = false;\n  @State() private overflowEnd = false;\n  @State() private scrollable = false;\n  @State() private announcement = '';\n  @State() private activeStickyGroupId: string | null = null;\n  @State() private viewportFitSettled = false;\n  @State() private headerPresent = false;\n\n  private rootEl: HTMLElement | null = null;\n  private viewportEl: HTMLElement | null = null;\n  private frameEl: HTMLElement | null = null;\n  private interactiveHeadEl: HTMLTableSectionElement | null = null;\n  private collapseAllOverlayEl: HTMLElement | null = null;\n  private stickyHeaderTableEl: HTMLTableElement | null = null;\n  private tableEl: HTMLTableElement | null = null;\n  private sentinelEl: HTMLElement | null = null;\n  private previousModelWarning = '';\n  private hasLoaded = false;\n  private renderedModel: TableRenderModel | null = null;\n  private stickyGroupConnected = false;\n  private headerSlotObserver: MutationObserver | null = null;\n  private readonly layoutController = new TableLayoutController({\n    elements: () => ({\n      viewport: this.viewportEl,\n      stickyHeaderTable: this.stickyHeaderTableEl,\n      collapseAllOverlay: this.collapseAllOverlayEl,\n      frame: this.frameEl,\n      interactiveHead: this.interactiveHeadEl,\n    }),\n    mode: () => ({\n      documentStickyHeader: this.documentStickyHeader,\n      floatingCollapseAll: this.renderedModel?.collapseAllHost?.mode === 'floating',\n      clampVerticalOverscroll: this.fitViewport && this.viewportFitSettled,\n    }),\n    verticalEdgeWheel: deltaY => this.viewportFitController.scrollOuterBy(deltaY),\n    overflowChanged: state => {\n      if (state.start !== this.overflowStart) this.overflowStart = state.start;\n      if (state.end !== this.overflowEnd) this.overflowEnd = state.end;\n      if (state.scrollable !== this.scrollable) this.scrollable = state.scrollable;\n    },\n  });\n  private readonly loadController = new TableLoadController({\n    state: () => ({\n      lazyLoading: this.lazyLoading,\n      loadMoreMode: this.loadMoreMode,\n      hasMore: this.hasMore,\n      loadingMore: this.loadingMore,\n      loadMoreError: this.loadMoreError,\n      loadIdentity: this.loadIdentity,\n      loadMoreThreshold: this.loadMoreThreshold,\n      containedScroll: this.containedScroll,\n      loadingMoreLabel: this.loadingMoreLabel,\n      endOfResultsLabel: this.endOfResultsLabel,\n      rowsLoadedLabel: this.rowsLoadedLabel,\n      loadedRowCount: this.currentLoadedRowCount(),\n      viewport: this.viewportEl,\n      sentinel: this.sentinelEl,\n    }),\n    announce: message => {\n      this.announcement = message;\n    },\n    request: detail => {\n      this.dsLoadMore.emit(detail);\n    },\n  });\n  private readonly viewportFitController = new TableViewportFitController({\n    enabled: () => this.fitViewport,\n    elements: () => ({ host: this.el, surface: this.rootEl }),\n    insets: () => ({\n      blockStart: this.viewportInsetBlockStart,\n      blockEnd: this.viewportInsetBlockEnd,\n    }),\n    fitChanged: (metrics: TableViewportFitMetrics | null) => {\n      const settled = metrics?.settled ?? false;\n      if (settled !== this.viewportFitSettled) this.viewportFitSettled = settled;\n    },\n  });\n\n  componentWillLoad(): void {\n    this.syncHeaderSlotPresence();\n    this.loadController.initialize();\n    this.warnModelIssues();\n  }\n\n  componentDidLoad(): void {\n    this.hasLoaded = true;\n    this.layoutController.connect();\n    this.loadController.connect();\n    this.viewportFitController.connect();\n    this.syncStickyGroupConnection();\n    this.connectHeaderSlotObserver();\n  }\n\n  componentDidRender(): void {\n    this.layoutController.refresh();\n    this.loadController.refresh();\n    this.viewportFitController.refresh();\n    this.syncStickyGroupConnection();\n    if (this.stickyGroupConnected) this.updateStickyGroup();\n  }\n\n  connectedCallback(): void {\n    if (!this.hasLoaded) return;\n    this.layoutController.connect();\n    this.loadController.connect();\n    this.viewportFitController.connect();\n    this.syncStickyGroupConnection();\n    this.connectHeaderSlotObserver();\n  }\n\n  disconnectedCallback(): void {\n    this.layoutController.disconnect();\n    this.loadController.disconnect();\n    this.viewportFitController.disconnect();\n    this.disconnectStickyGroup();\n    this.headerSlotObserver?.disconnect();\n    this.headerSlotObserver = null;\n  }\n\n  private syncHeaderSlotPresence = () => {\n    this.headerPresent = !!this.el.querySelector('[slot=\"header\"]');\n  };\n\n  private connectHeaderSlotObserver(): void {\n    if (this.headerSlotObserver || typeof MutationObserver === 'undefined') return;\n    this.headerSlotObserver = new MutationObserver(this.syncHeaderSlotPresence);\n    this.headerSlotObserver.observe(this.el, { childList: true });\n    this.syncHeaderSlotPresence();\n  }\n\n  private connectStickyGroup(): void {\n    if (this.stickyGroupConnected || typeof window === 'undefined') return;\n    this.stickyGroupConnected = true;\n    document.addEventListener('scroll', this.updateStickyGroup, {\n      capture: true,\n      passive: true,\n    });\n    window.addEventListener('resize', this.updateStickyGroup, { passive: true });\n    this.updateStickyGroup();\n  }\n\n  private syncStickyGroupConnection(): void {\n    if (this.documentStickyHeader && this.grouped) {\n      this.connectStickyGroup();\n      return;\n    }\n\n    this.disconnectStickyGroup();\n    this.frameEl?.style.removeProperty('--_table-sticky-group-top');\n    if (this.activeStickyGroupId !== null) {\n      this.activeStickyGroupId = null;\n    }\n  }\n\n  private disconnectStickyGroup(): void {\n    if (!this.stickyGroupConnected || typeof window === 'undefined') return;\n    this.stickyGroupConnected = false;\n    document.removeEventListener('scroll', this.updateStickyGroup, true);\n    window.removeEventListener('resize', this.updateStickyGroup);\n  }\n\n  private readonly updateStickyGroup = (): void => {\n    if (!this.documentStickyHeader || !this.grouped || !this.frameEl || !this.tableEl) {\n      if (this.activeStickyGroupId !== null) this.activeStickyGroupId = null;\n      return;\n    }\n\n    const stickyHeader = this.frameEl.querySelector<HTMLElement>(\n      '.ds-table__document-sticky-header',\n    );\n    if (!stickyHeader) return;\n    const threshold = stickyHeader.getBoundingClientRect().bottom;\n    let activeGroupId: string | null = null;\n    let activeGroupTop = threshold;\n    for (const body of this.tableEl.querySelectorAll<HTMLElement>('tbody[data-group-id]')) {\n      const source = body.querySelector<HTMLElement>('.ds-table__group-cell');\n      if (!source) continue;\n      const sourceRect = source.getBoundingClientRect();\n      const bodyRect = body.getBoundingClientRect();\n      if (sourceRect.top <= threshold && bodyRect.bottom > threshold) {\n        activeGroupId = body.dataset.groupId ?? null;\n        // A sticky section is bounded by its own row group. As that boundary\n        // approaches the sticky lane, move the outgoing section bar with it so\n        // the incoming source bar pushes it away instead of rendering beneath it.\n        activeGroupTop = Math.min(threshold, bodyRect.bottom - sourceRect.height);\n      }\n    }\n\n    const frameRect = this.frameEl.getBoundingClientRect();\n    this.frameEl.style.setProperty(\n      '--_table-sticky-group-top',\n      `${activeGroupTop - frameRect.top}px`,\n    );\n\n    if (activeGroupId !== this.activeStickyGroupId) {\n      this.activeStickyGroupId = activeGroupId;\n      return;\n    }\n  };\n\n  @Watch('columns')\n  @Watch('grouping')\n  handleStructureChange(): void {\n    this.warnModelIssues();\n    this.loadController.structureChanged();\n  }\n\n  @Watch('rows')\n  @Watch('groups')\n  handleDataChange(): void {\n    this.loadController.dataChanged();\n    this.warnModelIssues();\n  }\n\n  @Watch('loadIdentity')\n  handleLoadIdentityChange(): void {\n    this.loadController.identityChanged();\n  }\n\n  @Watch('lazyLoading')\n  @Watch('loadMoreMode')\n  @Watch('loadMoreThreshold')\n  handleLazyConfigurationChange(): void {\n    this.loadController.configurationChanged();\n  }\n\n  @Watch('loadingMore')\n  handleLoadingMoreChange(loading: boolean): void {\n    this.loadController.loadingChanged(loading);\n  }\n\n  @Watch('loadMoreError')\n  handleLoadMoreErrorChange(error: string | undefined): void {\n    this.loadController.errorChanged(error);\n  }\n\n  @Watch('hasMore')\n  handleHasMoreChange(hasMore: boolean, hadMore: boolean): void {\n    this.loadController.hasMoreChanged(hasMore, hadMore);\n  }\n\n  private get grouped(): boolean {\n    return this.grouping !== null;\n  }\n\n  private get selectable(): boolean {\n    return this.selectionMode === 'multiple';\n  }\n\n  private get documentStickyHeader(): boolean {\n    return this.stickyHeader && !this.containedScroll;\n  }\n\n  private get fixedHeight(): boolean {\n    return !this.fitViewport && this.resolvedHeight !== undefined;\n  }\n\n  private get boundedComposition(): boolean {\n    return this.fitViewport || this.fixedHeight;\n  }\n\n  private get containedScroll(): boolean {\n    return this.boundedComposition || this.resolvedMaxHeight !== undefined;\n  }\n\n  private currentLoadedRows(): TableRow[] {\n    return tableRows(this.rows, this.groups, this.grouped);\n  }\n\n  private currentLoadedRowCount(): number {\n    return this.grouped\n      ? this.groups.reduce((count, group) => count + group.rows.length, 0)\n      : this.rows.length;\n  }\n\n  private createRenderModel(): TableRenderModel {\n    return createTableRenderModel({\n      columns: this.columns,\n      rows: this.rows,\n      groups: this.groups,\n      grouped: this.grouped,\n      selectionMode: this.selectionMode,\n      selectedRowIds: this.selectedRowIds,\n      collapsedGroupIds: this.collapsedGroupIds,\n    });\n  }\n\n  private get resolvedMaxHeight(): string | undefined {\n    if (this.maxHeight == null || this.maxHeight === '') return undefined;\n    return typeof this.maxHeight === 'number' ? `${Math.max(0, this.maxHeight)}px` : this.maxHeight;\n  }\n\n  private get resolvedHeight(): string | undefined {\n    if (this.height == null || this.height === '') return undefined;\n    return typeof this.height === 'number' ? `${Math.max(0, this.height)}px` : this.height;\n  }\n\n  private warnModelIssues(): void {\n    const issues = tableModelIssues(this.columns, this.rows, this.groups, this.grouped);\n    if (!this.caption?.trim()) issues.unshift('A non-empty caption is required.');\n    if (this.grouping && !this.columns.some(column => column.id === this.grouping!.columnId)) {\n      issues.push(`Grouping references unknown column id: ${this.grouping.columnId}`);\n    }\n    if (\n      this.sort &&\n      !this.columns.some(column =>\n        column.id === this.sort!.columnId ||\n        column.headerSegments?.some(segment => segment.sortKey === this.sort!.columnId),\n      )\n    ) {\n      issues.push(`Sorting references unknown column id: ${this.sort.columnId}`);\n    }\n    const stickyStart = this.columns.filter(column => column.sticky === 'start');\n    const stickyEnd = this.columns.filter(column => column.sticky === 'end');\n    if (stickyStart.length > 1 || (this.selectable && stickyStart.length > 0)) {\n      issues.push('Only one sticky start column is supported, and row selection already owns that lane.');\n    }\n    if (stickyEnd.length > 1) issues.push('Only one sticky end column is supported.');\n    for (const column of [...stickyStart, ...stickyEnd]) {\n      if (!tableColumnSize(column)) issues.push(`Sticky column ${column.id} requires an explicit size.`);\n    }\n    const message = issues.join(' ');\n    if (!message || message === this.previousModelWarning) return;\n    this.previousModelWarning = message;\n    console.warn(`[ds-table] ${message}`);\n  }\n\n  private emitSort(column: TableColumn, sortKey = column.id): void {\n    if (!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\"], ds-button-unfilled',\n      );\n    });\n  }\n\n  private emitRowActivation(row: TableRow, event: Event): void {\n    if (!row.interactive || row.disabled || !this.rowEventOwnsActivation(event)) return;\n    this.dsRowActivate.emit({ rowId: row.id });\n  }\n\n  private handleRowKeydown(row: TableRow, event: KeyboardEvent): void {\n    if (event.target !== event.currentTarget || (event.key !== 'Enter' && event.key !== ' ')) return;\n    event.preventDefault();\n    this.emitRowActivation(row, event);\n  }\n\n  private renderSelectionControl(\n    label: string,\n    checked: boolean,\n    indeterminate: boolean,\n    disabled: boolean,\n    onActivate: () => void,\n  ) {\n    return (\n      <button\n        class=\"ds-table__selection-control ds-focus-ring ds-interaction-fill__content\"\n        type=\"button\"\n        role=\"checkbox\"\n        aria-label={label}\n        aria-checked={indeterminate ? 'mixed' : String(checked)}\n        disabled={disabled}\n        onClick={onActivate}\n      >\n        <ds-checkbox\n          label=\"\"\n          size=\"md\"\n          checked={checked}\n          indeterminate={indeterminate}\n          presentation={true}\n        />\n      </button>\n    );\n  }\n\n  private renderStickyEdge(sticky: TableColumn['sticky']) {\n    if (!sticky) return null;\n    return (\n      <span\n        class={`ds-table__sticky-edge ds-table__sticky-edge--${sticky}`}\n        aria-hidden=\"true\"\n      />\n    );\n  }\n\n  private renderCollapseAllButton() {\n    return (\n      <ds-button-unfilled\n        class=\"ds-table__collapse-all\"\n        variant=\"icon\"\n        icon=\"ChevronDownUp\"\n        size=\"xs\"\n        style={{ width: 'var(--dimension-size-300)' }}\n        aria-label=\"Collapse all groups\"\n        hasBorder={false}\n        activeFill={false}\n        pressScale={false}\n        onDsClick={event => {\n          event.stopPropagation();\n          this.emitAllGroupsCollapse();\n        }}\n      />\n    );\n  }\n\n  private renderFloatingCollapseAll(model: TableRenderModel) {\n    if (model.collapseAllHost?.mode !== 'floating') return null;\n    return (\n      <span\n        class=\"ds-table__collapse-all-overlay\"\n        ref={element => {\n          this.collapseAllOverlayEl = element ?? null;\n        }}\n      >\n        <span class=\"ds-table__collapse-all-surface ds-control-elevation ds-control-elevation--md\">\n          {this.renderCollapseAllButton()}\n        </span>\n      </span>\n    );\n  }\n\n  private renderColumnHeader(\n    column: TableColumn,\n    model: TableRenderModel,\n    interactive = true,\n    presentational = false,\n  ) {\n    const groupedColumn = this.grouping?.columnId === column.id;\n    const headerSegments = column.headerSegments?.length\n      ? column.headerSegments\n      : [{ label: column.header, sortKey: column.id }];\n    const activeMemberSegment = headerSegments.find(\n      segment => segment.sortKey === this.sort?.columnId,\n    );\n    const activeMemberSort = !!activeMemberSegment;\n    const activeSort = activeMemberSort;\n    const align = column.align ?? 'start';\n    const direction = activeMemberSort ? this.sort!.direction : undefined;\n    const memberAriaSort = activeMemberSort\n      ? (this.sort!.direction === 'asc' ? 'ascending' : 'descending')\n      : undefined;\n\n    const labelControl = (\n      <span class=\"ds-table__header-labels\">\n        {headerSegments.map((segment, index) => {\n          const segmentActive = activeMemberSegment?.sortKey === segment.sortKey;\n          const segmentInteractive = interactive && !!column.sortable;\n          const label = (\n            <ds-text\n              class=\"ds-table__header-label-box ds-control-label-box\"\n              as=\"span\"\n              variant=\"text-caption\"\n              emphasis={segmentActive}\n              color=\"inherit\"\n              lineTruncation={1}\n            >\n              {segment.label}\n            </ds-text>\n          );\n          const control = segmentInteractive ? (\n            <button\n              class=\"ds-table__header-label ds-table__header-label--interactive ds-focus-ring\"\n              type=\"button\"\n              aria-label={this.sortButtonLabel(column, segment.sortKey, segment.label)}\n              data-sort-control=\"label\"\n              data-sort-key={segment.sortKey}\n              data-sort-active={segmentActive ? 'true' : undefined}\n              onClick={() => this.emitSort(column, segment.sortKey)}\n            >\n              {label}\n            </button>\n          ) : (\n            <span class=\"ds-table__header-label ds-table__header-static\">{label}</span>\n          );\n\n          return (\n            <span class=\"ds-table__header-segment\" key={segment.sortKey}>\n              {control}\n              {index < headerSegments.length - 1 && (\n                <ds-text\n                  class=\"ds-table__header-separator\"\n                  as=\"span\"\n                  variant=\"text-caption\"\n                  color=\"tertiary\"\n                  aria-hidden=\"true\"\n                >\n                  {segment.separator ?? '/'}\n                </ds-text>\n              )}\n            </span>\n          );\n        })}\n      </span>\n    );\n    const sortControl = interactive ? (\n      <span class=\"ds-table__sort-slot\">\n        {activeSort && (\n          <ds-button-unfilled\n            class=\"ds-table__sort-direction\"\n            variant=\"icon\"\n            icon={direction === 'asc' ? 'ArrowUp' : 'ArrowDown'}\n            size=\"xs\"\n            aria-label={this.sortButtonLabel(\n              column,\n              activeMemberSegment?.sortKey ?? column.id,\n              activeMemberSegment?.label ?? column.header,\n            )}\n            hasBorder={false}\n            activeFill={false}\n            isActive={true}\n            pressScale={false}\n            data-sort-control=\"direction\"\n            onDsClick={() => this.emitSort(column, activeMemberSegment?.sortKey ?? column.id)}\n          />\n        )}\n      </span>\n    ) : null;\n    const collapseHost = model.collapseAllHost;\n    const actionCollapseHost = collapseHost?.mode === 'action' && collapseHost.columnId === column.id;\n    const blankActionCollapseHost = actionCollapseHost &&\n      !column.header.trim() &&\n      !column.headerSegments?.length;\n    const collapseControl =\n      interactive && actionCollapseHost ? (\n        <span class=\"ds-table__collapse-slot\">\n          {this.renderCollapseAllButton()}\n        </span>\n      ) : null;\n\n    return (\n      <th\n        key={column.id}\n        class={{\n          'ds-table__header-cell': true,\n          [`ds-table__cell--align-${align}`]: true,\n          'ds-table__cell--sticky-start': column.sticky === 'start',\n          'ds-table__cell--sticky-end': column.sticky === 'end',\n          'ds-table__header-cell--collapse-all': actionCollapseHost,\n        }}\n        scope={presentational ? undefined : 'col'}\n        aria-sort={presentational ? undefined : memberAriaSort}\n        data-column-id={column.id}\n        data-grouped={groupedColumn ? 'true' : undefined}\n        data-sort-active={activeSort ? 'true' : undefined}\n      >\n        {!column.header.trim() && column.headerLabel?.trim() && (\n          <span class=\"ds-visually-hidden\">{column.headerLabel}</span>\n        )}\n        {blankActionCollapseHost ? (\n          <span class=\"ds-table__header-content ds-table__header-content--collapse-all\">\n            {collapseControl}\n          </span>\n        ) : (\n          <span class=\"ds-table__header-content\">\n            {align === 'end' && sortControl}\n            {align === 'center' && (\n              <span\n                class=\"ds-table__sort-slot ds-table__sort-slot--balance\"\n                data-sort-balance=\"true\"\n                aria-hidden=\"true\"\n              />\n            )}\n            {labelControl}\n            {align !== 'end' && sortControl}\n            {collapseControl}\n          </span>\n        )}\n        {this.renderStickyEdge(column.sticky)}\n      </th>\n    );\n  }\n\n  private renderColgroup(model: TableRenderModel) {\n    return (\n      <colgroup>\n        {model.selectable && <col class=\"ds-table__selection-column\" />}\n        {this.columns.map(column => {\n          const width = tableColumnSize(column);\n          const flexible = column.id === model.flexibleColumnId;\n          return (\n            <col\n              key={column.id}\n              class={{\n                'ds-table__action-column': column.kind === 'action',\n                'ds-table__flexible-column': flexible,\n              }}\n              style={width && !flexible ? { width } : undefined}\n            />\n          );\n        })}\n      </colgroup>\n    );\n  }\n\n  private renderHeader(\n    model: TableRenderModel,\n    interactive = true,\n    presentational = false,\n  ) {\n    const selection = model.selection;\n    return (\n      <thead class={{\n        'ds-table__head': true,\n        'ds-table__head--semantic-copy': !interactive,\n      }} ref={element => {\n        if (interactive) this.interactiveHeadEl = element ?? null;\n      }}>\n        <tr class=\"ds-table__header-row\">\n          {model.selectable && (\n            <th\n              class=\"ds-table__header-cell ds-table__selection-cell ds-table__cell--sticky-start\"\n              scope={presentational ? undefined : 'col'}\n            >\n              {interactive ? this.renderSelectionControl(\n                selection.allSelected ? 'Deselect all loaded rows' : 'Select all loaded rows',\n                selection.allSelected,\n                selection.indeterminate,\n                selection.selectableRowIds.length === 0,\n                () => this.emitAllSelection(),\n              ) : (\n                <span class=\"ds-visually-hidden\">Select rows</span>\n              )}\n              {this.renderStickyEdge('start')}\n            </th>\n          )}\n          {this.columns.map(column => (\n            this.renderColumnHeader(column, model, interactive, presentational)\n          ))}\n        </tr>\n      </thead>\n    );\n  }\n\n  private renderCellValue(\n    cell: TableCellPresentation,\n    column: TableColumn,\n    row: TableRow,\n  ) {\n    if (cell.kind === 'blank') return null;\n\n    if (cell.kind === 'empty') {\n      return (\n        <ds-text\n          class=\"ds-table__cell-track ds-table__cell-track--text\"\n          as=\"span\"\n          variant=\"text-body-medium\"\n          color=\"tertiary\"\n        >\n          <span aria-hidden=\"true\">—</span>\n          <span class=\"ds-visually-hidden\">{this.emptyCellLabel}</span>\n        </ds-text>\n      );\n    }\n\n    if (cell.kind === 'icon') {\n      const value = cell.value;\n      return (\n        <ds-icon\n          name={value.icon}\n          size=\"md\"\n          color={value.color ?? 'secondary'}\n          label={value.label}\n        />\n      );\n    }\n\n    if (cell.kind === 'image') {\n      const value = cell.value;\n      return (\n        <span class=\"ds-table__cell-image\">\n          {value.src ? (\n            <img class=\"ds-table__cell-image-content\" src={value.src} alt={value.alt} loading=\"lazy\" />\n          ) : (\n            <span\n              class=\"ds-table__cell-image-placeholder\"\n              role=\"img\"\n              aria-label={value.alt}\n            />\n          )}\n        </span>\n      );\n    }\n\n    if (cell.kind === 'action') {\n      const value = cell.value;\n      return (\n        <ds-button-unfilled\n          variant={value.variant ?? 'label'}\n          size=\"md\"\n          isInset={true}\n          insetDepth=\"double\"\n          label={value.label ?? ''}\n          icon={value.icon ?? ''}\n          aria-label={value.ariaLabel ?? null}\n          hasBorder={value.hasBorder ?? false}\n          isInactive={value.isInactive ?? false}\n          isLoading={value.isLoading ?? false}\n          onDsClick={event => {\n            event.stopPropagation();\n            this.dsCellAction.emit({\n              actionId: value.actionId,\n              rowId: row.id,\n              columnId: column.id,\n            });\n          }}\n        />\n      );\n    }\n\n    if (cell.kind === 'tag') {\n      const value = cell.value;\n      const variant = cell.variant;\n      const tag = (\n        <ds-tag\n          label={value.label}\n          intent={value.intent ?? 'neutral'}\n          contrast={value.contrast ?? 'faint'}\n          size={variant === 'text-with-tag' ? 'sm' : 'md'}\n          icon={value.icon ?? ''}\n          rounded={value.rounded ?? false}\n          isInset\n          insetDepth=\"double\"\n        />\n      );\n\n      if (variant === 'tag-only') return tag;\n\n      return (\n        <span class={`ds-table__cell-tag-stack ds-table__cell-tag-stack--${variant}`}>\n          {variant === 'tag-with-text' && tag}\n          <ds-text\n            class=\"ds-table__cell-tag-text ds-table__cell-track\"\n            as=\"span\"\n            variant={variant === 'tag-with-text' ? 'text-body-small' : 'text-body-medium'}\n            color=\"secondary\"\n            lineTruncation={1}\n          >\n            {value.text}\n          </ds-text>\n          {variant === 'text-with-tag' && (\n            <span class=\"ds-table__cell-tag-control-track\">{tag}</span>\n          )}\n        </span>\n      );\n    }\n\n    const text = cell.value;\n    const wraps = cell.wraps;\n\n    return (\n      <span class={{ 'ds-table__cell-copy': true, 'ds-table__cell-copy--wrap': wraps }}>\n        <ds-text\n          class=\"ds-table__cell-primary ds-table__cell-track ds-table__cell-track--text\"\n          as=\"span\"\n          variant=\"text-body-medium\"\n          color=\"primary\"\n          lineTruncation={wraps ? 'none' : 1}\n          wrap={wraps ? 'wrap' : 'nowrap'}\n          fontFeature={text.fontFeature ?? 'normal'}\n        >\n          {text.primary}\n        </ds-text>\n        {text.secondary !== undefined && text.secondary !== '' && (\n          <ds-text\n            class=\"ds-table__cell-secondary ds-table__cell-track ds-table__cell-track--text\"\n            as=\"span\"\n            variant={cell.primaryText ? 'text-body-medium' : 'text-body-small'}\n            color={text.secondaryColor ?? (cell.primaryText ? 'primary' : 'secondary')}\n            lineTruncation={wraps ? 'none' : 1}\n            wrap={wraps ? 'wrap' : 'nowrap'}\n          >\n            {text.secondary}\n          </ds-text>\n        )}\n      </span>\n    );\n  }\n\n  private renderRow(row: TableRow, model: TableRenderModel) {\n    const selected = model.selectedRowIds.has(row.id);\n    const rowSelectable = row.selectable !== false && !row.disabled;\n    return (\n      <tr\n        key={row.id}\n        class={{\n          'ds-table__row': true,\n          'ds-table__row--selected': selected,\n          'ds-table__row--disabled': !!row.disabled,\n          'ds-table__row--interactive': !!row.interactive && !row.disabled,\n          'ds-focus-ring': !!row.interactive && !row.disabled,\n        }}\n        data-row-id={row.id}\n        data-selected={selected ? 'true' : undefined}\n        aria-disabled={row.disabled ? 'true' : undefined}\n        tabIndex={row.interactive && !row.disabled ? 0 : undefined}\n        onClick={event => this.emitRowActivation(row, event)}\n        onKeyDown={event => this.handleRowKeydown(row, event)}\n      >\n        {model.selectable && (\n          <td class={{\n            'ds-table__cell': true,\n            'ds-table__selection-cell': true,\n            'ds-table__cell--sticky-start': true,\n            'ds-interaction-fill': true,\n            'ds-interaction-fill--grouped': true,\n            'ds-interaction-fill--selected': selected,\n          }}>\n            {this.renderSelectionControl(\n              `${selected ? 'Deselect' : 'Select'} ${tableRowSelectionLabel(row, this.columns)}`,\n              selected,\n              false,\n              !rowSelectable,\n              () => this.emitRowSelection(row),\n            )}\n            {this.renderStickyEdge('start')}\n          </td>\n        )}\n        {this.columns.map(column => {\n          const align = column.align ?? 'start';\n          const cell = resolveTableCellPresentation(row.cells[column.id], column);\n          const tagCell = cell.kind === 'tag';\n          const iconCell = cell.kind === 'icon';\n          const imageCell = cell.kind === 'image';\n          const actionCell = cell.kind === 'action';\n          const textCell = cell.kind === 'text';\n          const primaryTextCell = textCell && cell.primaryText;\n          const singleTextCell = textCell && cell.singleLine;\n          const emptyCell = cell.kind === 'empty';\n          const blankCell = cell.kind === 'blank';\n          const tagVariant = tagCell ? cell.variant : undefined;\n          const textVariant = textCell ? cell.variant : undefined;\n          return (\n            <td\n              key={`${row.id}:${column.id}`}\n              class={{\n                'ds-table__cell': true,\n                [`ds-table__cell--align-${align}`]: true,\n                'ds-table__cell--tag': tagCell,\n                [`ds-table__cell--tag-${tagVariant}`]: tagCell,\n                'ds-table__cell--icon': iconCell,\n                'ds-table__cell--image': imageCell,\n                'ds-table__cell--action': actionCell,\n                'ds-table__cell--primary-text': primaryTextCell,\n                'ds-table__cell--text-single': singleTextCell,\n                'ds-table__cell--text-multi': textCell && !singleTextCell,\n                'ds-table__cell--empty': emptyCell,\n                'ds-table__cell--blank': blankCell,\n                'ds-table__cell--sticky-start': column.sticky === 'start',\n                'ds-table__cell--sticky-end': column.sticky === 'end',\n                'ds-interaction-fill': true,\n                'ds-interaction-fill--grouped': true,\n                'ds-interaction-fill--selected': selected,\n              }}\n              data-column-id={column.id}\n              data-cell-type={cell.cellType}\n              data-cell-variant={tagVariant ?? textVariant}\n            >\n              <span class=\"ds-table__cell-content ds-interaction-fill__content\">\n                {this.renderCellValue(cell, column, row)}\n              </span>\n              {this.renderStickyEdge(column.sticky)}\n            </td>\n          );\n        })}\n      </tr>\n    );\n  }\n\n  private emitGroupCollapse(group: TableGroup) {\n    const collapsedGroupIds = toggleTableGroupCollapsed(this.collapsedGroupIds, group.id);\n    this.dsGroupCollapseChange.emit({\n      scope: 'group',\n      groupId: group.id,\n      collapsed: collapsedGroupIds.includes(group.id),\n      collapsedGroupIds,\n    });\n  }\n\n  private emitAllGroupsCollapse() {\n    const groupIds = this.groups.map(group => group.id);\n    const collapsedGroupIds = nextTableGroupsCollapsed(this.collapsedGroupIds, groupIds);\n    this.dsGroupCollapseChange.emit({\n      scope: 'all',\n      collapsed: collapsedGroupIds.length > 0,\n      collapsedGroupIds,\n    });\n  }\n\n  private renderGroupContent(groupModel: TableRenderModel['groups'][number]) {\n    const {\n      group,\n      count,\n      countLabel,\n      countIntent,\n      collapsed: isCollapsed,\n      labelColor,\n      selection: groupSelection,\n    } = groupModel;\n    return (\n      <span class=\"ds-table__group-content\">\n        {groupSelection && (\n          <span class=\"ds-table__group-selection\">\n            {this.renderSelectionControl(\n              groupSelection.allSelected\n                ? `Deselect ${group.label} group`\n                : `Select ${group.label} group`,\n              groupSelection.allSelected,\n              groupSelection.indeterminate,\n              groupSelection.selectableRowIds.length === 0,\n              () => this.emitGroupSelection(group),\n            )}\n          </span>\n        )}\n        <span class=\"ds-table__group-copy\">\n          <ds-text\n            class=\"ds-table__group-label\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            emphasis={true}\n            color={labelColor}\n          >\n            {group.label}\n          </ds-text>\n          <span\n            class=\"ds-table__group-count ds-control-elevation ds-control-elevation--sm\"\n            aria-hidden=\"true\"\n          >\n            <ds-tag\n              label={String(count)}\n              intent={countIntent}\n              contrast=\"faint\"\n              size=\"sm\"\n              rounded={true}\n            ></ds-tag>\n          </span>\n          <span class=\"ds-visually-hidden\">{countLabel}</span>\n        </span>\n        <ds-button-unfilled\n          class=\"ds-table__group-toggle\"\n          variant=\"icon\"\n          size=\"md\"\n          isInset={true}\n          insetDepth=\"double\"\n          icon={isCollapsed ? 'ChevronDown' : 'ChevronUp'}\n          expanded={!isCollapsed}\n          aria-label={\n            isCollapsed\n              ? `Expand ${group.label} group`\n              : `Collapse ${group.label} group`\n          }\n          hasBorder={false}\n          onDsClick={event => {\n            event.stopPropagation();\n            this.emitGroupCollapse(group);\n          }}\n        />\n      </span>\n    );\n  }\n\n  private renderStickyGroup(model: TableRenderModel) {\n    if (!this.documentStickyHeader || !this.activeStickyGroupId) return null;\n    const groupModel = model.groups.find(item => item.group.id === this.activeStickyGroupId);\n    if (!groupModel) return null;\n    return (\n      <div\n        class={{\n          'ds-table__sticky-group': true,\n          'ds-table__sticky-group--selectable': model.selectable,\n          [groupModel.intentClass ?? '']: !!groupModel.intentClass,\n        }}\n        data-group-id={groupModel.group.id}\n        data-group-intent={groupModel.intent}\n      >\n        {this.renderGroupContent(groupModel)}\n      </div>\n    );\n  }\n\n  private renderDataBodies(model: TableRenderModel) {\n    if (!model.grouped) {\n      return (\n        <tbody class=\"ds-table__body\">\n          {this.rows.map(row => this.renderRow(row, model))}\n        </tbody>\n      );\n    }\n\n    return model.groups.map(groupModel => {\n      const { group, collapsed: isCollapsed, intent, intentClass } = groupModel;\n      const stickySourceHidden = this.documentStickyHeader && this.activeStickyGroupId === group.id;\n      return (\n        <tbody\n          class=\"ds-table__body ds-table__group\"\n          role=\"rowgroup\"\n          data-group-id={group.id}\n          data-group-intent={intent}\n          data-collapsed={isCollapsed ? 'true' : undefined}\n          key={group.id}\n        >\n          <tr\n            role=\"row\"\n            aria-hidden={stickySourceHidden ? 'true' : undefined}\n            class={{\n              'ds-table__group-row': true,\n              'ds-table__group-row--native-sticky': this.stickyHeader && !this.documentStickyHeader,\n            }}\n          >\n            <th\n              class={{\n                'ds-table__group-cell': true,\n                'ds-table__group-cell--sticky-source-hidden': stickySourceHidden,\n                [intentClass ?? '']: !!intentClass,\n              }}\n              role=\"rowheader\"\n              scope=\"rowgroup\"\n              colSpan={model.totalColumns}\n            >\n              {this.renderGroupContent(groupModel)}\n            </th>\n          </tr>\n          {!isCollapsed && group.rows.map(row => this.renderRow(row, model))}\n        </tbody>\n      );\n    });\n  }\n\n  private renderSkeletonBody(model: TableRenderModel) {\n    const count = Math.min(20, Math.max(1, Math.round(this.skeletonRows) || 1));\n    return (\n      <tbody class=\"ds-table__body ds-table__skeleton-body\">\n        {Array.from({ length: count }, (_, index) => (\n          <tr class=\"ds-table__row ds-table__skeleton-row\" key={`skeleton-${index}`}>\n            {model.selectable && (\n              <td class=\"ds-table__cell ds-table__selection-cell ds-table__cell--sticky-start ds-table__skeleton-cell ds-interaction-fill ds-interaction-fill--grouped\">\n                <span class=\"ds-interaction-fill__content\">\n                  <ds-skeleton variant=\"icon\" iconSize=\"md\" />\n                </span>\n                {this.renderStickyEdge('start')}\n              </td>\n            )}\n            {this.columns.map(column => (\n              <td\n                class={{\n                  'ds-table__cell': true,\n                  'ds-table__cell--text-single': true,\n                  'ds-table__skeleton-cell': true,\n                  'ds-table__cell--sticky-start': column.sticky === 'start',\n                  'ds-table__cell--sticky-end': column.sticky === 'end',\n                  'ds-interaction-fill': true,\n                  'ds-interaction-fill--grouped': true,\n                }}\n                key={`skeleton-${index}:${column.id}`}\n              >\n                <span class=\"ds-table__cell-content ds-interaction-fill__content\">\n                  <ds-skeleton variant=\"text\" textVariant=\"text-body-medium\" width=\"100%\" />\n                </span>\n                {this.renderStickyEdge(column.sticky)}\n              </td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    );\n  }\n\n  private renderStateBody(kind: 'empty' | 'error', totalColumns: number) {\n    const error = kind === 'error';\n    return (\n      <tbody class=\"ds-table__body ds-table__state-body\">\n        <tr class=\"ds-table__state-row\">\n          <td class=\"ds-table__state-cell\" colSpan={totalColumns}>\n            <div class=\"ds-table__viewport-band ds-table__state-band\">\n              <ds-empty-state\n                icon={error ? 'ErrorTriangle' : 'Inbox'}\n                heading={error ? this.errorHeading : this.emptyHeading}\n                body={error ? this.errorBody : this.emptyBody}\n              />\n            </div>\n          </td>\n        </tr>\n      </tbody>\n    );\n  }\n\n  private renderLazyBody(model: TableRenderModel) {\n    if (!this.lazyLoading || !model.hasData) return null;\n    const error = this.loadMoreError?.trim();\n    const manualFallback = this.loadMoreMode === 'manual' ||\n      !this.loadController.intersectionSupported;\n\n    return (\n      <tbody class=\"ds-table__body ds-table__load-body\">\n        <tr\n          class=\"ds-table__load-row\"\n          ref={element => {\n            this.sentinelEl = element ?? null;\n          }}\n        >\n          <td class=\"ds-table__load-cell\" colSpan={model.totalColumns}>\n            <div class=\"ds-table__viewport-band ds-table__load-band\">\n              {error ? (\n                <span class=\"ds-table__load-content ds-table__load-content--error\">\n                  <span class=\"ds-table__load-copy\">\n                    <ds-icon name=\"ErrorTriangle\" size=\"md\" color=\"secondary\" aria-hidden=\"true\" />\n                    <ds-text as=\"span\" variant=\"text-body-medium\" color=\"secondary\">{error}</ds-text>\n                  </span>\n                  <ds-button-unfilled\n                    label={this.retryLabel}\n                    size=\"md\"\n                    onDsClick={() => this.loadController.request('retry')}\n                  />\n                </span>\n              ) : this.loadingMore ? (\n                <span class=\"ds-table__load-content\">\n                  <ds-loader size=\"md\" color=\"secondary\" />\n                  <ds-text as=\"span\" variant=\"text-body-medium\" color=\"secondary\">\n                    {this.loadingMoreLabel}\n                  </ds-text>\n                </span>\n              ) : this.hasMore && manualFallback ? (\n                <span class=\"ds-table__load-content\">\n                  <ds-button-unfilled\n                    label={this.loadMoreLabel}\n                    size=\"md\"\n                    onDsClick={() => this.loadController.request('manual')}\n                  />\n                </span>\n              ) : this.hasMore ? (\n                <span class=\"ds-table__auto-sentinel\" aria-hidden=\"true\" />\n              ) : (\n                <ds-text\n                  class=\"ds-table__load-content\"\n                  as=\"span\"\n                  variant=\"text-body-medium\"\n                  color=\"secondary\"\n                >\n                  {this.endOfResultsLabel}\n                </ds-text>\n              )}\n            </div>\n          </td>\n        </tr>\n      </tbody>\n    );\n  }\n\n  private renderDocumentStickyHeader(model: TableRenderModel) {\n    if (!this.documentStickyHeader) return null;\n    return (\n      <div\n        class=\"ds-table__document-sticky-header\"\n      >\n        <table\n          class={{\n            'ds-table__table': true,\n            'ds-table__sticky-header-table': true,\n            'ds-table__table--selectable': model.selectable,\n            'ds-table__table--grouped': model.grouped,\n          }}\n          style={model.tableStyle}\n          role=\"presentation\"\n          ref={element => {\n            this.stickyHeaderTableEl = element ?? null;\n          }}\n        >\n          {this.renderColgroup(model)}\n          {this.renderHeader(model, true, true)}\n        </table>\n        {this.renderFloatingCollapseAll(model)}\n      </div>\n    );\n  }\n\n  private get resultSummary(): string | null {\n    return formatTableResultSummary(\n      this.displayedCount,\n      this.totalCount,\n      this.resultSummaryLabel,\n    );\n  }\n\n  private get hasResultFooter(): boolean {\n    return !!this.resultSummary || !!this.el.querySelector(\n      '[slot=\"footer-leading\"], [slot=\"footer\"], [slot=\"footer-trailing\"]',\n    );\n  }\n\n  private renderResultFooter() {\n    const summary = this.resultSummary;\n    const hasLeading = !!this.el.querySelector('[slot=\"footer-leading\"]');\n    const hasCopy = !!this.el.querySelector('[slot=\"footer\"]');\n    const hasTrailing = !!this.el.querySelector('[slot=\"footer-trailing\"]');\n    if (!this.hasResultFooter) return null;\n    return (\n      <div class=\"ds-table__footer ds-table__bar ds-control--md\">\n        {hasLeading && (\n          <div class=\"ds-table__bar-leading\">\n            <slot name=\"footer-leading\" />\n          </div>\n        )}\n        <div\n          class={{\n            'ds-table__bar-copy': true,\n            'ds-table__bar-copy--summary': !hasCopy && !!summary,\n          }}\n        >\n          {hasCopy ? (\n            <slot name=\"footer\" />\n          ) : summary ? (\n            <ds-text\n              class=\"ds-table__footer-summary ds-table__bar-text\"\n              as=\"div\"\n              variant=\"text-body-medium\"\n              color=\"secondary\"\n            >\n              {summary}\n            </ds-text>\n          ) : null}\n        </div>\n        {hasTrailing && (\n          <div class=\"ds-table__bar-trailing\">\n            <slot name=\"footer-trailing\" />\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  private renderCaptionBar() {\n    if (this.captionVisibility !== 'visible') return null;\n    return (\n      <div class=\"ds-table__caption-bar ds-table__bar ds-control--md\">\n        <div class=\"ds-table__caption-content\">\n          <slot\n            name=\"header\"\n            onSlotchange={this.syncHeaderSlotPresence}\n          />\n          {!this.headerPresent ? (\n            <ds-text\n              class=\"ds-table__caption-title ds-table__bar-text\"\n              as=\"div\"\n              variant=\"text-title-small\"\n              emphasis={true}\n              color=\"primary\"\n              aria-hidden=\"true\"\n            >\n              {this.caption}\n            </ds-text>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    const model = this.createRenderModel();\n    this.renderedModel = model;\n    const regionLabel = this.scrollLabel?.trim() || `${this.caption} scroll area`;\n    const initialLoading = this.loading && !model.hasData;\n    const initialError = !model.hasData && this.error;\n    const viewportStyle = !this.boundedComposition && this.resolvedMaxHeight\n      ? { '--ds-table-max-block-size': this.resolvedMaxHeight }\n      : undefined;\n    const hostStyle = this.fixedHeight\n      ? { '--_table-fixed-block-size': this.resolvedHeight }\n      : undefined;\n\n    return (\n      <Host\n        class={{\n          'table-host': true,\n          'table-host--bounded': this.boundedComposition,\n          'table-host--fixed-height': this.fixedHeight,\n          'table-host--viewport-fit': this.fitViewport,\n        }}\n        style={hostStyle}\n      >\n        <div class={{\n          'ds-table': true,\n          'ds-table--bounded': this.boundedComposition,\n          'ds-table--contained-scroll': this.containedScroll,\n          'ds-table--fixed-height': this.fixedHeight,\n          'ds-table--viewport-fit': this.fitViewport,\n          'ds-table--viewport-fit-pending': this.fitViewport && !this.viewportFitSettled,\n          'ds-table--viewport-fit-settled': this.fitViewport && this.viewportFitSettled,\n          'ds-table--sticky-header': this.stickyHeader,\n          'ds-table--document-sticky-header': this.documentStickyHeader,\n          'ds-table--contained-sticky-header': this.stickyHeader && !this.documentStickyHeader,\n          'ds-table--caption-visible': this.captionVisibility === 'visible',\n          'ds-table--footer-visible': this.hasResultFooter,\n        }} ref={element => {\n          this.rootEl = element ?? null;\n        }}>\n          {this.renderCaptionBar()}\n          <div\n            class={{\n              'ds-table__frame': true,\n              'ds-table__frame--overflow-start': this.overflowStart,\n              'ds-table__frame--overflow-end': this.overflowEnd,\n            }}\n            ref={element => {\n              this.frameEl = element ?? null;\n            }}\n          >\n            {this.renderDocumentStickyHeader(model)}\n            {this.renderStickyGroup(model)}\n            {!this.documentStickyHeader && this.renderFloatingCollapseAll(model)}\n            <div\n              class={{\n                'ds-table__viewport': true,\n                'ds-focus-ring': this.scrollable,\n              }}\n              style={viewportStyle}\n              ref={element => {\n                this.viewportEl = element ?? null;\n              }}\n              role={this.scrollable ? 'region' : undefined}\n              aria-label={this.scrollable ? regionLabel : undefined}\n              tabIndex={this.scrollable ? 0 : undefined}\n            >\n              <table\n                class={{\n                  'ds-table__table': true,\n                  'ds-table__table--selectable': model.selectable,\n                  'ds-table__table--grouped': model.grouped,\n                  'ds-table__table--native-group-sticky': model.grouped &&\n                    this.stickyHeader && !this.documentStickyHeader,\n                }}\n                style={model.tableStyle}\n                aria-busy={initialLoading || this.loadingMore ? 'true' : undefined}\n                ref={element => {\n                  this.tableEl = element ?? null;\n                }}\n              >\n                <caption class=\"ds-table__caption ds-visually-hidden\">\n                  <ds-text as=\"span\" variant=\"text-title-small\" emphasis={true} color=\"primary\">\n                    {this.caption}\n                  </ds-text>\n                </caption>\n                {this.renderColgroup(model)}\n                {this.renderHeader(model, !this.documentStickyHeader)}\n                {initialLoading\n                  ? this.renderSkeletonBody(model)\n                  : initialError\n                    ? this.renderStateBody('error', model.totalColumns)\n                    : model.hasData\n                      ? this.renderDataBodies(model)\n                      : this.renderStateBody('empty', model.totalColumns)}\n                {!initialLoading && !initialError && this.renderLazyBody(model)}\n              </table>\n            </div>\n          </div>\n          {this.renderResultFooter()}\n          <div class=\"ds-visually-hidden\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n            {this.announcement}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport {\n  deriveTableSelectionState,\n  formatTableResultSummary,\n  nextTableSortState,\n  tableColumnSize,\n  tableModelIssues,\n  tableRows,\n  tableRowSelectionLabel,\n  toggleAllLoadedTableRows,\n  toggleTableGroupCollapsed,\n  toggleTableGroupSelection,\n  nextTableGroupsCollapsed,\n  toggleTableRowSelection,\n} from './table-model';\nimport {\n  resolveTableCellPresentation,\n  type TableCellPresentation,\n} from './table-cell-model';\nimport {\n  createTableRenderModel,\n  type TableRenderModel,\n} from './table-render-model';\nimport { TableLayoutController } from './table-layout-controller';\nimport { TableLoadController } from './table-load-controller';\nimport {\n  TableViewportFitController,\n  type TableViewportFitMetrics,\n} from './table-viewport-fit-controller';\nimport type {\n  TableCaptionVisibility,\n  TableCellActionDetail,\n  TableColumn,\n  TableGroup,\n  TableGroupCollapseChangeDetail,\n  TableGroupingState,\n  TableLoadMoreDetail,\n  TableLoadMoreMode,\n  TableRow,\n  TableRowActivateDetail,\n  TableSelectionChangeDetail,\n  TableSelectionMode,\n  TableSortChangeDetail,\n  TableSortState,\n} from './table-types';\n\n@Component({\n  tag: 'ds-table',\n  styleUrls: [\n    '../../utils/focus-ring.css',\n    '../../utils/interaction-fill.css',\n    'Table.css',\n  ],\n  scoped: true,\n})\nexport class Table {\n  @Element() el!: HTMLElement;\n  /** Stable column definitions. Assign through JavaScript. */\n  @Prop() columns: TableColumn[] = [];\n  /** Ungrouped row data. Ignored while grouping is active. Assign through JavaScript. */\n  @Prop() rows: TableRow[] = [];\n  /** One level of application-owned grouped data. Assign through JavaScript. */\n  @Prop() groups: TableGroup[] = [];\n  /** Controlled grouping column. 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   * Optional result summary footer. When both `displayedCount` and `totalCount`\n   * are finite numbers, the table shows “Displaying {displayed} of {total}”.\n   */\n  @Prop() displayedCount: number | undefined;\n  @Prop() totalCount: number | undefined;\n  /** Supports {displayed} and {total} placeholders. */\n  @Prop() resultSummaryLabel: string = 'Displaying {displayed} of {total}';\n  @Prop() stickyHeader: boolean = false;\n  /** Maximum scroll-region height. Numbers resolve to CSS pixels. */\n  @Prop() maxHeight: string | number | undefined;\n  /** Fixed height for the complete header, table frame, and footer composition. */\n  @Prop() height: string | number | undefined;\n  /** Fit the complete table composition to its nearest vertical scrollport. */\n  @Prop() fitViewport: boolean = false;\n  /** Reserved space above a viewport-fitted table once surrounding chrome is compact. */\n  @Prop() viewportInsetBlockStart: string | number = 0;\n  /** Reserved space below a viewport-fitted table. */\n  @Prop() viewportInsetBlockEnd: string | number = 0;\n  /** Optional explicit label for the horizontal/vertical scroll region. */\n  @Prop() scrollLabel: string | undefined;\n\n  @Prop() selectionMode: TableSelectionMode = 'none';\n  /** Controlled selected row identities. IDs outside the loaded rows are preserved. */\n  @Prop() selectedRowIds: string[] = [];\n\n  /** Initial loading state. Existing rows stay visible; incremental loading uses loadingMore. */\n  @Prop() loading: boolean = false;\n  @Prop() skeletonRows: number = 5;\n  @Prop() emptyHeading: string = 'No results';\n  @Prop() emptyBody: string = 'No data is available.';\n  /** Initial error state. Existing rows stay visible; incremental failures use loadMoreError. */\n  @Prop() error: boolean = false;\n  @Prop() errorHeading: string = 'Unable to load data';\n  @Prop() errorBody: string = 'The data could not be loaded.';\n  @Prop() emptyCellLabel: string = 'Not available';\n\n  /** Enable application-owned incremental loading without pagination. */\n  @Prop() lazyLoading: boolean = false;\n  @Prop() loadMoreMode: TableLoadMoreMode = 'auto';\n  @Prop() hasMore: boolean = false;\n  @Prop() loadingMore: boolean = false;\n  @Prop() loadMoreError: string | undefined;\n  /** Reset key for a new query/group/sort dataset. */\n  @Prop() loadIdentity: string | number = 'default';\n  /** IntersectionObserver root margin in CSS pixels. */\n  @Prop() loadMoreThreshold: number = 0;\n  @Prop() loadMoreLabel: string = 'Load more';\n  @Prop() retryLabel: string = 'Retry';\n  @Prop() loadingMoreLabel: string = 'Loading more results';\n  @Prop() endOfResultsLabel: string = 'All results loaded';\n  /** Supports {count} and {total} placeholders. */\n  @Prop() rowsLoadedLabel: string = '{count} more rows loaded. {total} rows loaded.';\n\n  @Event() dsSortChange!: EventEmitter<TableSortChangeDetail>;\n  @Event() dsGroupCollapseChange!: EventEmitter<TableGroupCollapseChangeDetail>;\n  @Event() dsSelectionChange!: EventEmitter<TableSelectionChangeDetail>;\n  @Event() dsLoadMore!: EventEmitter<TableLoadMoreDetail>;\n  @Event() dsCellAction!: EventEmitter<TableCellActionDetail>;\n  @Event() dsRowActivate!: EventEmitter<TableRowActivateDetail>;\n\n  @State() private overflowStart = false;\n  @State() private overflowEnd = false;\n  @State() private scrollable = false;\n  @State() private announcement = '';\n  @State() private activeStickyGroupId: string | null = null;\n  @State() private viewportFitSettled = false;\n  @State() private headerPresent = false;\n\n  private rootEl: HTMLElement | null = null;\n  private viewportEl: HTMLElement | null = null;\n  private frameEl: HTMLElement | null = null;\n  private interactiveHeadEl: HTMLTableSectionElement | null = null;\n  private collapseAllOverlayEl: HTMLElement | null = null;\n  private stickyHeaderTableEl: HTMLTableElement | null = null;\n  private tableEl: HTMLTableElement | null = null;\n  private sentinelEl: HTMLElement | null = null;\n  private previousModelWarning = '';\n  private hasLoaded = false;\n  private renderedModel: TableRenderModel | null = null;\n  private stickyGroupConnected = false;\n  private headerSlotObserver: MutationObserver | null = null;\n  private readonly layoutController = new TableLayoutController({\n    elements: () => ({\n      viewport: this.viewportEl,\n      stickyHeaderTable: this.stickyHeaderTableEl,\n      collapseAllOverlay: this.collapseAllOverlayEl,\n      frame: this.frameEl,\n      interactiveHead: this.interactiveHeadEl,\n    }),\n    mode: () => ({\n      documentStickyHeader: this.documentStickyHeader,\n      floatingCollapseAll: this.renderedModel?.collapseAllHost?.mode === 'floating',\n      clampVerticalOverscroll: this.fitViewport && this.viewportFitSettled,\n    }),\n    verticalEdgeWheel: deltaY => this.viewportFitController.scrollOuterBy(deltaY),\n    overflowChanged: state => {\n      if (state.start !== this.overflowStart) this.overflowStart = state.start;\n      if (state.end !== this.overflowEnd) this.overflowEnd = state.end;\n      if (state.scrollable !== this.scrollable) this.scrollable = state.scrollable;\n    },\n  });\n  private readonly loadController = new TableLoadController({\n    state: () => ({\n      lazyLoading: this.lazyLoading,\n      loadMoreMode: this.loadMoreMode,\n      hasMore: this.hasMore,\n      loadingMore: this.loadingMore,\n      loadMoreError: this.loadMoreError,\n      loadIdentity: this.loadIdentity,\n      loadMoreThreshold: this.loadMoreThreshold,\n      containedScroll: this.containedScroll,\n      loadingMoreLabel: this.loadingMoreLabel,\n      endOfResultsLabel: this.endOfResultsLabel,\n      rowsLoadedLabel: this.rowsLoadedLabel,\n      loadedRowCount: this.currentLoadedRowCount(),\n      viewport: this.viewportEl,\n      sentinel: this.sentinelEl,\n    }),\n    announce: message => {\n      this.announcement = message;\n    },\n    request: detail => {\n      this.dsLoadMore.emit(detail);\n    },\n  });\n  private readonly viewportFitController = new TableViewportFitController({\n    enabled: () => this.fitViewport,\n    elements: () => ({ host: this.el, surface: this.rootEl }),\n    insets: () => ({\n      blockStart: this.viewportInsetBlockStart,\n      blockEnd: this.viewportInsetBlockEnd,\n    }),\n    fitChanged: (metrics: TableViewportFitMetrics | null) => {\n      const settled = metrics?.settled ?? false;\n      if (settled !== this.viewportFitSettled) this.viewportFitSettled = settled;\n    },\n  });\n\n  componentWillLoad(): void {\n    this.syncHeaderSlotPresence();\n    this.loadController.initialize();\n    this.warnModelIssues();\n  }\n\n  componentDidLoad(): void {\n    this.hasLoaded = true;\n    this.layoutController.connect();\n    this.loadController.connect();\n    this.viewportFitController.connect();\n    this.syncStickyGroupConnection();\n    this.connectHeaderSlotObserver();\n  }\n\n  componentDidRender(): void {\n    this.layoutController.refresh();\n    this.loadController.refresh();\n    this.viewportFitController.refresh();\n    this.syncStickyGroupConnection();\n    if (this.stickyGroupConnected) this.updateStickyGroup();\n  }\n\n  connectedCallback(): void {\n    if (!this.hasLoaded) return;\n    this.layoutController.connect();\n    this.loadController.connect();\n    this.viewportFitController.connect();\n    this.syncStickyGroupConnection();\n    this.connectHeaderSlotObserver();\n  }\n\n  disconnectedCallback(): void {\n    this.layoutController.disconnect();\n    this.loadController.disconnect();\n    this.viewportFitController.disconnect();\n    this.disconnectStickyGroup();\n    this.headerSlotObserver?.disconnect();\n    this.headerSlotObserver = null;\n  }\n\n  private syncHeaderSlotPresence = () => {\n    this.headerPresent = !!this.el.querySelector('[slot=\"header\"]');\n  };\n\n  private connectHeaderSlotObserver(): void {\n    if (this.headerSlotObserver || typeof MutationObserver === 'undefined') return;\n    this.headerSlotObserver = new MutationObserver(this.syncHeaderSlotPresence);\n    this.headerSlotObserver.observe(this.el, { childList: true });\n    this.syncHeaderSlotPresence();\n  }\n\n  private connectStickyGroup(): void {\n    if (this.stickyGroupConnected || typeof window === 'undefined') return;\n    this.stickyGroupConnected = true;\n    document.addEventListener('scroll', this.updateStickyGroup, {\n      capture: true,\n      passive: true,\n    });\n    window.addEventListener('resize', this.updateStickyGroup, { passive: true });\n    this.updateStickyGroup();\n  }\n\n  private syncStickyGroupConnection(): void {\n    if (this.documentStickyHeader && this.grouped) {\n      this.connectStickyGroup();\n      return;\n    }\n\n    this.disconnectStickyGroup();\n    this.frameEl?.style.removeProperty('--_table-sticky-group-top');\n    if (this.activeStickyGroupId !== null) {\n      this.activeStickyGroupId = null;\n    }\n  }\n\n  private disconnectStickyGroup(): void {\n    if (!this.stickyGroupConnected || typeof window === 'undefined') return;\n    this.stickyGroupConnected = false;\n    document.removeEventListener('scroll', this.updateStickyGroup, true);\n    window.removeEventListener('resize', this.updateStickyGroup);\n  }\n\n  private readonly updateStickyGroup = (): void => {\n    if (!this.documentStickyHeader || !this.grouped || !this.frameEl || !this.tableEl) {\n      if (this.activeStickyGroupId !== null) this.activeStickyGroupId = null;\n      return;\n    }\n\n    const stickyHeader = this.frameEl.querySelector<HTMLElement>(\n      '.ds-table__document-sticky-header',\n    );\n    if (!stickyHeader) return;\n    const threshold = stickyHeader.getBoundingClientRect().bottom;\n    let activeGroupId: string | null = null;\n    let activeGroupTop = threshold;\n    for (const body of this.tableEl.querySelectorAll<HTMLElement>('tbody[data-group-id]')) {\n      const source = body.querySelector<HTMLElement>('.ds-table__group-cell');\n      if (!source) continue;\n      const sourceRect = source.getBoundingClientRect();\n      const bodyRect = body.getBoundingClientRect();\n      if (sourceRect.top <= threshold && bodyRect.bottom > threshold) {\n        activeGroupId = body.dataset.groupId ?? null;\n        // A sticky section is bounded by its own row group. As that boundary\n        // approaches the sticky lane, move the outgoing section bar with it so\n        // the incoming source bar pushes it away instead of rendering beneath it.\n        activeGroupTop = Math.min(threshold, bodyRect.bottom - sourceRect.height);\n      }\n    }\n\n    const frameRect = this.frameEl.getBoundingClientRect();\n    this.frameEl.style.setProperty(\n      '--_table-sticky-group-top',\n      `${activeGroupTop - frameRect.top}px`,\n    );\n\n    if (activeGroupId !== this.activeStickyGroupId) {\n      this.activeStickyGroupId = activeGroupId;\n      return;\n    }\n  };\n\n  @Watch('columns')\n  @Watch('grouping')\n  handleStructureChange(): void {\n    this.warnModelIssues();\n    this.loadController.structureChanged();\n  }\n\n  @Watch('rows')\n  @Watch('groups')\n  handleDataChange(): void {\n    this.loadController.dataChanged();\n    this.warnModelIssues();\n  }\n\n  @Watch('loadIdentity')\n  handleLoadIdentityChange(): void {\n    this.loadController.identityChanged();\n  }\n\n  @Watch('lazyLoading')\n  @Watch('loadMoreMode')\n  @Watch('loadMoreThreshold')\n  handleLazyConfigurationChange(): void {\n    this.loadController.configurationChanged();\n  }\n\n  @Watch('loadingMore')\n  handleLoadingMoreChange(loading: boolean): void {\n    this.loadController.loadingChanged(loading);\n  }\n\n  @Watch('loadMoreError')\n  handleLoadMoreErrorChange(error: string | undefined): void {\n    this.loadController.errorChanged(error);\n  }\n\n  @Watch('hasMore')\n  handleHasMoreChange(hasMore: boolean, hadMore: boolean): void {\n    this.loadController.hasMoreChanged(hasMore, hadMore);\n  }\n\n  private get grouped(): boolean {\n    return this.grouping !== null;\n  }\n\n  private get selectable(): boolean {\n    return this.selectionMode === 'multiple';\n  }\n\n  private get documentStickyHeader(): boolean {\n    return this.stickyHeader && !this.containedScroll;\n  }\n\n  private get fixedHeight(): boolean {\n    return !this.fitViewport && this.resolvedHeight !== undefined;\n  }\n\n  private get boundedComposition(): boolean {\n    return this.fitViewport || this.fixedHeight;\n  }\n\n  private get containedScroll(): boolean {\n    return this.boundedComposition || this.resolvedMaxHeight !== undefined;\n  }\n\n  private currentLoadedRows(): TableRow[] {\n    return tableRows(this.rows, this.groups, this.grouped);\n  }\n\n  private currentLoadedRowCount(): number {\n    return this.grouped\n      ? this.groups.reduce((count, group) => count + group.rows.length, 0)\n      : this.rows.length;\n  }\n\n  private createRenderModel(): TableRenderModel {\n    return createTableRenderModel({\n      columns: this.columns,\n      rows: this.rows,\n      groups: this.groups,\n      grouped: this.grouped,\n      selectionMode: this.selectionMode,\n      selectedRowIds: this.selectedRowIds,\n      collapsedGroupIds: this.collapsedGroupIds,\n    });\n  }\n\n  private get resolvedMaxHeight(): string | undefined {\n    if (this.maxHeight == null || this.maxHeight === '') return undefined;\n    return typeof this.maxHeight === 'number' ? `${Math.max(0, this.maxHeight)}px` : this.maxHeight;\n  }\n\n  private get resolvedHeight(): string | undefined {\n    if (this.height == null || this.height === '') return undefined;\n    return typeof this.height === 'number' ? `${Math.max(0, this.height)}px` : this.height;\n  }\n\n  private warnModelIssues(): void {\n    const issues = tableModelIssues(this.columns, this.rows, this.groups, this.grouped);\n    if (!this.caption?.trim()) issues.unshift('A non-empty caption is required.');\n    if (this.grouping && !this.columns.some(column => column.id === this.grouping!.columnId)) {\n      issues.push(`Grouping references unknown column id: ${this.grouping.columnId}`);\n    }\n    if (\n      this.sort &&\n      !this.columns.some(column =>\n        column.id === this.sort!.columnId ||\n        column.headerSegments?.some(segment => segment.sortKey === this.sort!.columnId),\n      )\n    ) {\n      issues.push(`Sorting references unknown column id: ${this.sort.columnId}`);\n    }\n    const stickyStart = this.columns.filter(column => column.sticky === 'start');\n    const stickyEnd = this.columns.filter(column => column.sticky === 'end');\n    if (stickyStart.length > 1 || (this.selectable && stickyStart.length > 0)) {\n      issues.push('Only one sticky start column is supported, and row selection already owns that lane.');\n    }\n    if (stickyEnd.length > 1) issues.push('Only one sticky end column is supported.');\n    for (const column of [...stickyStart, ...stickyEnd]) {\n      if (!tableColumnSize(column)) issues.push(`Sticky column ${column.id} requires an explicit size.`);\n    }\n    const message = issues.join(' ');\n    if (!message || message === this.previousModelWarning) return;\n    this.previousModelWarning = message;\n    console.warn(`[ds-table] ${message}`);\n  }\n\n  private emitSort(column: TableColumn, sortKey = column.id): void {\n    if (!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\"], ds-button-unfilled',\n      );\n    });\n  }\n\n  private emitRowActivation(row: TableRow, event: Event): void {\n    if (!row.interactive || row.disabled || !this.rowEventOwnsActivation(event)) return;\n    this.dsRowActivate.emit({ rowId: row.id });\n  }\n\n  private handleRowKeydown(row: TableRow, event: KeyboardEvent): void {\n    if (event.target !== event.currentTarget || (event.key !== 'Enter' && event.key !== ' ')) return;\n    event.preventDefault();\n    this.emitRowActivation(row, event);\n  }\n\n  private renderSelectionControl(\n    label: string,\n    checked: boolean,\n    indeterminate: boolean,\n    disabled: boolean,\n    onActivate: () => void,\n  ) {\n    return (\n      <button\n        class=\"ds-table__selection-control ds-focus-ring ds-interaction-fill__content\"\n        type=\"button\"\n        role=\"checkbox\"\n        aria-label={label}\n        aria-checked={indeterminate ? 'mixed' : String(checked)}\n        disabled={disabled}\n        onClick={onActivate}\n      >\n        <ds-checkbox\n          label=\"\"\n          size=\"md\"\n          checked={checked}\n          indeterminate={indeterminate}\n          presentation={true}\n        />\n      </button>\n    );\n  }\n\n  private renderStickyEdge(sticky: TableColumn['sticky']) {\n    if (!sticky) return null;\n    return (\n      <span\n        class={`ds-table__sticky-edge ds-table__sticky-edge--${sticky}`}\n        aria-hidden=\"true\"\n      />\n    );\n  }\n\n  private renderCollapseAllButton() {\n    return (\n      <ds-button-unfilled\n        class=\"ds-table__collapse-all\"\n        variant=\"icon\"\n        icon=\"ChevronDownUp\"\n        size=\"xs\"\n        style={{ width: 'var(--dimension-size-300)' }}\n        aria-label=\"Collapse all groups\"\n        hasBorder={false}\n        activeFill={false}\n        pressScale={false}\n        onDsClick={event => {\n          event.stopPropagation();\n          this.emitAllGroupsCollapse();\n        }}\n      />\n    );\n  }\n\n  private renderFloatingCollapseAll(model: TableRenderModel) {\n    if (model.collapseAllHost?.mode !== 'floating') return null;\n    return (\n      <span\n        class=\"ds-table__collapse-all-overlay\"\n        ref={element => {\n          this.collapseAllOverlayEl = element ?? null;\n        }}\n      >\n        <span class=\"ds-table__collapse-all-surface ds-control-elevation ds-control-elevation--md\">\n          {this.renderCollapseAllButton()}\n        </span>\n      </span>\n    );\n  }\n\n  private renderColumnHeader(\n    column: TableColumn,\n    model: TableRenderModel,\n    interactive = true,\n    presentational = false,\n  ) {\n    const groupedColumn = this.grouping?.columnId === column.id;\n    const headerSegments = column.headerSegments?.length\n      ? column.headerSegments\n      : [{ label: column.header, sortKey: column.id }];\n    const activeMemberSegment = headerSegments.find(\n      segment => segment.sortKey === this.sort?.columnId,\n    );\n    const activeMemberSort = !!activeMemberSegment;\n    const activeSort = activeMemberSort;\n    const align = column.align ?? 'start';\n    const direction = activeMemberSort ? this.sort!.direction : undefined;\n    const memberAriaSort = activeMemberSort\n      ? (this.sort!.direction === 'asc' ? 'ascending' : 'descending')\n      : undefined;\n\n    const labelControl = (\n      <span class=\"ds-table__header-labels\">\n        {headerSegments.map((segment, index) => {\n          const segmentActive = activeMemberSegment?.sortKey === segment.sortKey;\n          const segmentInteractive = interactive && !!column.sortable;\n          const label = (\n            <ds-text\n              class=\"ds-table__header-label-box ds-control-label-box\"\n              as=\"span\"\n              variant=\"text-caption\"\n              emphasis={segmentActive}\n              color=\"inherit\"\n              lineTruncation={1}\n            >\n              {segment.label}\n            </ds-text>\n          );\n          const control = segmentInteractive ? (\n            <button\n              class=\"ds-table__header-label ds-table__header-label--interactive ds-focus-ring\"\n              type=\"button\"\n              aria-label={this.sortButtonLabel(column, segment.sortKey, segment.label)}\n              data-sort-control=\"label\"\n              data-sort-key={segment.sortKey}\n              data-sort-active={segmentActive ? 'true' : undefined}\n              onClick={() => this.emitSort(column, segment.sortKey)}\n            >\n              {label}\n            </button>\n          ) : (\n            <span class=\"ds-table__header-label ds-table__header-static\">{label}</span>\n          );\n\n          return (\n            <span class=\"ds-table__header-segment\" key={segment.sortKey}>\n              {control}\n              {index < headerSegments.length - 1 && (\n                <ds-text\n                  class=\"ds-table__header-separator\"\n                  as=\"span\"\n                  variant=\"text-caption\"\n                  color=\"tertiary\"\n                  aria-hidden=\"true\"\n                >\n                  {segment.separator ?? '/'}\n                </ds-text>\n              )}\n            </span>\n          );\n        })}\n      </span>\n    );\n    const sortControl = interactive ? (\n      <span class=\"ds-table__sort-slot\">\n        {activeSort && (\n          <ds-button-unfilled\n            class=\"ds-table__sort-direction\"\n            variant=\"icon\"\n            icon={direction === 'asc' ? 'ArrowUp' : 'ArrowDown'}\n            size=\"xs\"\n            aria-label={this.sortButtonLabel(\n              column,\n              activeMemberSegment?.sortKey ?? column.id,\n              activeMemberSegment?.label ?? column.header,\n            )}\n            hasBorder={false}\n            activeFill={false}\n            isActive={true}\n            pressScale={false}\n            data-sort-control=\"direction\"\n            onDsClick={() => this.emitSort(column, activeMemberSegment?.sortKey ?? column.id)}\n          />\n        )}\n      </span>\n    ) : null;\n    const collapseHost = model.collapseAllHost;\n    const actionCollapseHost = collapseHost?.mode === 'action' && collapseHost.columnId === column.id;\n    const blankActionCollapseHost = actionCollapseHost &&\n      !column.header.trim() &&\n      !column.headerSegments?.length;\n    const collapseControl =\n      interactive && actionCollapseHost ? (\n        <span class=\"ds-table__collapse-slot\">\n          {this.renderCollapseAllButton()}\n        </span>\n      ) : null;\n\n    return (\n      <th\n        key={column.id}\n        class={{\n          'ds-table__header-cell': true,\n          [`ds-table__cell--align-${align}`]: true,\n          'ds-table__cell--sticky-start': column.sticky === 'start',\n          'ds-table__cell--sticky-end': column.sticky === 'end',\n          'ds-table__header-cell--collapse-all': actionCollapseHost,\n        }}\n        scope={presentational ? undefined : 'col'}\n        aria-sort={presentational ? undefined : memberAriaSort}\n        data-column-id={column.id}\n        data-grouped={groupedColumn ? 'true' : undefined}\n        data-sort-active={activeSort ? 'true' : undefined}\n      >\n        {!column.header.trim() && column.headerLabel?.trim() && (\n          <span class=\"ds-visually-hidden\">{column.headerLabel}</span>\n        )}\n        {blankActionCollapseHost ? (\n          <span class=\"ds-table__header-content ds-table__header-content--collapse-all\">\n            {collapseControl}\n          </span>\n        ) : (\n          <span class=\"ds-table__header-content\">\n            {align === 'end' && sortControl}\n            {align === 'center' && (\n              <span\n                class=\"ds-table__sort-slot ds-table__sort-slot--balance\"\n                data-sort-balance=\"true\"\n                aria-hidden=\"true\"\n              />\n            )}\n            {labelControl}\n            {align !== 'end' && sortControl}\n            {collapseControl}\n          </span>\n        )}\n        {this.renderStickyEdge(column.sticky)}\n      </th>\n    );\n  }\n\n  private renderColgroup(model: TableRenderModel) {\n    return (\n      <colgroup>\n        {model.selectable && <col class=\"ds-table__selection-column\" />}\n        {this.columns.map(column => {\n          const width = tableColumnSize(column);\n          const flexible = column.id === model.flexibleColumnId;\n          return (\n            <col\n              key={column.id}\n              class={{\n                'ds-table__action-column': column.kind === 'action',\n                'ds-table__flexible-column': flexible,\n              }}\n              style={width && !flexible ? { width } : undefined}\n            />\n          );\n        })}\n      </colgroup>\n    );\n  }\n\n  private renderHeader(\n    model: TableRenderModel,\n    interactive = true,\n    presentational = false,\n  ) {\n    const selection = model.selection;\n    return (\n      <thead class={{\n        'ds-table__head': true,\n        'ds-table__head--semantic-copy': !interactive,\n      }} ref={element => {\n        if (interactive) this.interactiveHeadEl = element ?? null;\n      }}>\n        <tr class=\"ds-table__header-row\">\n          {model.selectable && (\n            <th\n              class=\"ds-table__header-cell ds-table__selection-cell ds-table__cell--sticky-start\"\n              scope={presentational ? undefined : 'col'}\n            >\n              {interactive ? this.renderSelectionControl(\n                selection.allSelected ? 'Deselect all loaded rows' : 'Select all loaded rows',\n                selection.allSelected,\n                selection.indeterminate,\n                selection.selectableRowIds.length === 0,\n                () => this.emitAllSelection(),\n              ) : (\n                <span class=\"ds-visually-hidden\">Select rows</span>\n              )}\n              {this.renderStickyEdge('start')}\n            </th>\n          )}\n          {this.columns.map(column => (\n            this.renderColumnHeader(column, model, interactive, presentational)\n          ))}\n        </tr>\n      </thead>\n    );\n  }\n\n  private renderCellValue(\n    cell: TableCellPresentation,\n    column: TableColumn,\n    row: TableRow,\n  ) {\n    if (cell.kind === 'blank') return null;\n\n    if (cell.kind === 'empty') {\n      return (\n        <ds-text\n          class=\"ds-table__cell-track ds-table__cell-track--text\"\n          as=\"span\"\n          variant=\"text-body-medium\"\n          color=\"tertiary\"\n        >\n          <span aria-hidden=\"true\">—</span>\n          <span class=\"ds-visually-hidden\">{this.emptyCellLabel}</span>\n        </ds-text>\n      );\n    }\n\n    if (cell.kind === 'icon') {\n      const value = cell.value;\n      return (\n        <ds-icon\n          name={value.icon}\n          size=\"md\"\n          color={value.color ?? 'secondary'}\n          label={value.label}\n        />\n      );\n    }\n\n    if (cell.kind === 'image') {\n      const value = cell.value;\n      return (\n        <span class=\"ds-table__cell-image\">\n          {value.src ? (\n            <img class=\"ds-table__cell-image-content\" src={value.src} alt={value.alt} loading=\"lazy\" />\n          ) : (\n            <span\n              class=\"ds-table__cell-image-placeholder\"\n              role=\"img\"\n              aria-label={value.alt}\n            />\n          )}\n        </span>\n      );\n    }\n\n    if (cell.kind === 'action') {\n      const value = cell.value;\n      return (\n        <ds-button-unfilled\n          variant={value.variant ?? 'label'}\n          size=\"md\"\n          isInset={true}\n          insetDepth=\"double\"\n          label={value.label ?? ''}\n          icon={value.icon ?? ''}\n          aria-label={value.ariaLabel ?? null}\n          hasBorder={value.hasBorder ?? false}\n          isInactive={value.isInactive ?? false}\n          isLoading={value.isLoading ?? false}\n          onDsClick={event => {\n            event.stopPropagation();\n            this.dsCellAction.emit({\n              actionId: value.actionId,\n              rowId: row.id,\n              columnId: column.id,\n            });\n          }}\n        />\n      );\n    }\n\n    if (cell.kind === 'tag') {\n      const value = cell.value;\n      const variant = cell.variant;\n      const tag = (\n        <ds-tag\n          label={value.label}\n          intent={value.intent ?? 'neutral'}\n          contrast={value.contrast ?? 'faint'}\n          size={variant === 'text-with-tag' ? 'sm' : 'md'}\n          icon={value.icon ?? ''}\n          rounded={value.rounded ?? false}\n          isInset\n          insetDepth=\"double\"\n        />\n      );\n\n      if (variant === 'tag-only') return tag;\n\n      return (\n        <span class={`ds-table__cell-tag-stack ds-table__cell-tag-stack--${variant}`}>\n          {variant === 'tag-with-text' && tag}\n          <ds-text\n            class=\"ds-table__cell-tag-text ds-table__cell-track\"\n            as=\"span\"\n            variant={variant === 'tag-with-text' ? 'text-body-small' : 'text-body-medium'}\n            color=\"secondary\"\n            lineTruncation={1}\n          >\n            {value.text}\n          </ds-text>\n          {variant === 'text-with-tag' && (\n            <span class=\"ds-table__cell-tag-control-track\">{tag}</span>\n          )}\n        </span>\n      );\n    }\n\n    const text = cell.value;\n    const wraps = cell.wraps;\n\n    return (\n      <span class={{ 'ds-table__cell-copy': true, 'ds-table__cell-copy--wrap': wraps }}>\n        <ds-text\n          class=\"ds-table__cell-primary ds-table__cell-track ds-table__cell-track--text\"\n          as=\"span\"\n          variant=\"text-body-medium\"\n          color=\"primary\"\n          lineTruncation={wraps ? 'none' : 1}\n          wrap={wraps ? 'wrap' : 'nowrap'}\n          fontFeature={text.fontFeature ?? 'normal'}\n        >\n          {text.primary}\n        </ds-text>\n        {text.secondary !== undefined && text.secondary !== '' && (\n          <ds-text\n            class=\"ds-table__cell-secondary ds-table__cell-track ds-table__cell-track--text\"\n            as=\"span\"\n            variant={cell.primaryText ? 'text-body-medium' : 'text-body-small'}\n            color={text.secondaryColor ?? (cell.primaryText ? 'primary' : 'secondary')}\n            lineTruncation={wraps ? 'none' : 1}\n            wrap={wraps ? 'wrap' : 'nowrap'}\n          >\n            {text.secondary}\n          </ds-text>\n        )}\n      </span>\n    );\n  }\n\n  private renderRow(row: TableRow, model: TableRenderModel) {\n    const selected = model.selectedRowIds.has(row.id);\n    const rowSelectable = row.selectable !== false && !row.disabled;\n    return (\n      <tr\n        key={row.id}\n        class={{\n          'ds-table__row': true,\n          'ds-table__row--selected': selected,\n          'ds-table__row--disabled': !!row.disabled,\n          'ds-table__row--interactive': !!row.interactive && !row.disabled,\n          'ds-focus-ring': !!row.interactive && !row.disabled,\n        }}\n        data-row-id={row.id}\n        data-selected={selected ? 'true' : undefined}\n        aria-disabled={row.disabled ? 'true' : undefined}\n        tabIndex={row.interactive && !row.disabled ? 0 : undefined}\n        onClick={event => this.emitRowActivation(row, event)}\n        onKeyDown={event => this.handleRowKeydown(row, event)}\n      >\n        {model.selectable && (\n          <td class={{\n            'ds-table__cell': true,\n            'ds-table__selection-cell': true,\n            'ds-table__cell--sticky-start': true,\n            'ds-interaction-fill': true,\n            'ds-interaction-fill--grouped': true,\n            'ds-interaction-fill--selected': selected,\n          }}>\n            {this.renderSelectionControl(\n              `${selected ? 'Deselect' : 'Select'} ${tableRowSelectionLabel(row, this.columns)}`,\n              selected,\n              false,\n              !rowSelectable,\n              () => this.emitRowSelection(row),\n            )}\n            {this.renderStickyEdge('start')}\n          </td>\n        )}\n        {this.columns.map(column => {\n          const align = column.align ?? 'start';\n          const cell = resolveTableCellPresentation(row.cells[column.id], column);\n          const tagCell = cell.kind === 'tag';\n          const iconCell = cell.kind === 'icon';\n          const imageCell = cell.kind === 'image';\n          const actionCell = cell.kind === 'action';\n          const textCell = cell.kind === 'text';\n          const primaryTextCell = textCell && cell.primaryText;\n          const singleTextCell = textCell && cell.singleLine;\n          const emptyCell = cell.kind === 'empty';\n          const blankCell = cell.kind === 'blank';\n          const tagVariant = tagCell ? cell.variant : undefined;\n          const textVariant = textCell ? cell.variant : undefined;\n          return (\n            <td\n              key={`${row.id}:${column.id}`}\n              class={{\n                'ds-table__cell': true,\n                [`ds-table__cell--align-${align}`]: true,\n                'ds-table__cell--tag': tagCell,\n                [`ds-table__cell--tag-${tagVariant}`]: tagCell,\n                'ds-table__cell--icon': iconCell,\n                'ds-table__cell--image': imageCell,\n                'ds-table__cell--action': actionCell,\n                'ds-table__cell--primary-text': primaryTextCell,\n                'ds-table__cell--text-single': singleTextCell,\n                'ds-table__cell--text-multi': textCell && !singleTextCell,\n                'ds-table__cell--empty': emptyCell,\n                'ds-table__cell--blank': blankCell,\n                'ds-table__cell--sticky-start': column.sticky === 'start',\n                'ds-table__cell--sticky-end': column.sticky === 'end',\n                'ds-interaction-fill': true,\n                'ds-interaction-fill--grouped': true,\n                'ds-interaction-fill--selected': selected,\n              }}\n              data-column-id={column.id}\n              data-cell-type={cell.cellType}\n              data-cell-variant={tagVariant ?? textVariant}\n            >\n              <span class=\"ds-table__cell-content ds-interaction-fill__content\">\n                {this.renderCellValue(cell, column, row)}\n              </span>\n              {this.renderStickyEdge(column.sticky)}\n            </td>\n          );\n        })}\n      </tr>\n    );\n  }\n\n  private emitGroupCollapse(group: TableGroup) {\n    const collapsedGroupIds = toggleTableGroupCollapsed(this.collapsedGroupIds, group.id);\n    this.dsGroupCollapseChange.emit({\n      scope: 'group',\n      groupId: group.id,\n      collapsed: collapsedGroupIds.includes(group.id),\n      collapsedGroupIds,\n    });\n  }\n\n  private emitAllGroupsCollapse() {\n    const groupIds = this.groups.map(group => group.id);\n    const collapsedGroupIds = nextTableGroupsCollapsed(this.collapsedGroupIds, groupIds);\n    this.dsGroupCollapseChange.emit({\n      scope: 'all',\n      collapsed: collapsedGroupIds.length > 0,\n      collapsedGroupIds,\n    });\n  }\n\n  private renderGroupContent(groupModel: TableRenderModel['groups'][number]) {\n    const {\n      group,\n      count,\n      countLabel,\n      countIntent,\n      collapsed: isCollapsed,\n      labelColor,\n      selection: groupSelection,\n    } = groupModel;\n    return (\n      <span class=\"ds-table__group-content\">\n        {groupSelection && (\n          <span class=\"ds-table__group-selection\">\n            {this.renderSelectionControl(\n              groupSelection.allSelected\n                ? `Deselect ${group.label} group`\n                : `Select ${group.label} group`,\n              groupSelection.allSelected,\n              groupSelection.indeterminate,\n              groupSelection.selectableRowIds.length === 0,\n              () => this.emitGroupSelection(group),\n            )}\n          </span>\n        )}\n        <span class=\"ds-table__group-copy\">\n          <ds-text\n            class=\"ds-table__group-label\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            emphasis={true}\n            color={labelColor}\n          >\n            {group.label}\n          </ds-text>\n          <span\n            class=\"ds-table__group-count ds-control-elevation ds-control-elevation--sm\"\n            aria-hidden=\"true\"\n          >\n            <ds-tag\n              label={String(count)}\n              intent={countIntent}\n              contrast=\"faint\"\n              size=\"sm\"\n              rounded={true}\n            ></ds-tag>\n          </span>\n          <span class=\"ds-visually-hidden\">{countLabel}</span>\n        </span>\n        <ds-button-unfilled\n          class=\"ds-table__group-toggle\"\n          variant=\"icon\"\n          size=\"md\"\n          isInset={true}\n          insetDepth=\"double\"\n          icon={isCollapsed ? 'ChevronDown' : 'ChevronUp'}\n          expanded={!isCollapsed}\n          aria-label={\n            isCollapsed\n              ? `Expand ${group.label} group`\n              : `Collapse ${group.label} group`\n          }\n          hasBorder={false}\n          onDsClick={event => {\n            event.stopPropagation();\n            this.emitGroupCollapse(group);\n          }}\n        />\n      </span>\n    );\n  }\n\n  private renderStickyGroup(model: TableRenderModel) {\n    if (!this.documentStickyHeader || !this.activeStickyGroupId) return null;\n    const groupModel = model.groups.find(item => item.group.id === this.activeStickyGroupId);\n    if (!groupModel) return null;\n    return (\n      <div\n        class={{\n          'ds-table__sticky-group': true,\n          'ds-table__sticky-group--selectable': model.selectable,\n          [groupModel.intentClass ?? '']: !!groupModel.intentClass,\n        }}\n        data-group-id={groupModel.group.id}\n        data-group-intent={groupModel.intent}\n      >\n        {this.renderGroupContent(groupModel)}\n      </div>\n    );\n  }\n\n  private renderDataBodies(model: TableRenderModel) {\n    if (!model.grouped) {\n      return (\n        <tbody class=\"ds-table__body\">\n          {this.rows.map(row => this.renderRow(row, model))}\n        </tbody>\n      );\n    }\n\n    return model.groups.map(groupModel => {\n      const { group, collapsed: isCollapsed, intent, intentClass } = groupModel;\n      const stickySourceHidden = this.documentStickyHeader && this.activeStickyGroupId === group.id;\n      return (\n        <tbody\n          class=\"ds-table__body ds-table__group\"\n          role=\"rowgroup\"\n          data-group-id={group.id}\n          data-group-intent={intent}\n          data-collapsed={isCollapsed ? 'true' : undefined}\n          key={group.id}\n        >\n          <tr\n            role=\"row\"\n            aria-hidden={stickySourceHidden ? 'true' : undefined}\n            class={{\n              'ds-table__group-row': true,\n              'ds-table__group-row--native-sticky': this.stickyHeader && !this.documentStickyHeader,\n            }}\n          >\n            <th\n              class={{\n                'ds-table__group-cell': true,\n                'ds-table__group-cell--sticky-source-hidden': stickySourceHidden,\n                [intentClass ?? '']: !!intentClass,\n              }}\n              role=\"rowheader\"\n              scope=\"rowgroup\"\n              colSpan={model.totalColumns}\n            >\n              {this.renderGroupContent(groupModel)}\n            </th>\n          </tr>\n          {!isCollapsed && group.rows.map(row => this.renderRow(row, model))}\n        </tbody>\n      );\n    });\n  }\n\n  private renderSkeletonBody(model: TableRenderModel) {\n    const count = Math.min(20, Math.max(1, Math.round(this.skeletonRows) || 1));\n    return (\n      <tbody class=\"ds-table__body ds-table__skeleton-body\">\n        {Array.from({ length: count }, (_, index) => (\n          <tr class=\"ds-table__row ds-table__skeleton-row\" key={`skeleton-${index}`}>\n            {model.selectable && (\n              <td class=\"ds-table__cell ds-table__selection-cell ds-table__cell--sticky-start ds-table__skeleton-cell ds-interaction-fill ds-interaction-fill--grouped\">\n                <span class=\"ds-interaction-fill__content\">\n                  <ds-skeleton variant=\"icon\" iconSize=\"md\" />\n                </span>\n                {this.renderStickyEdge('start')}\n              </td>\n            )}\n            {this.columns.map(column => (\n              <td\n                class={{\n                  'ds-table__cell': true,\n                  'ds-table__cell--text-single': true,\n                  'ds-table__skeleton-cell': true,\n                  'ds-table__cell--sticky-start': column.sticky === 'start',\n                  'ds-table__cell--sticky-end': column.sticky === 'end',\n                  'ds-interaction-fill': true,\n                  'ds-interaction-fill--grouped': true,\n                }}\n                key={`skeleton-${index}:${column.id}`}\n              >\n                <span class=\"ds-table__cell-content ds-interaction-fill__content\">\n                  <ds-skeleton variant=\"text\" textVariant=\"text-body-medium\" width=\"100%\" />\n                </span>\n                {this.renderStickyEdge(column.sticky)}\n              </td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    );\n  }\n\n  private renderStateBody(kind: 'empty' | 'error', totalColumns: number) {\n    const error = kind === 'error';\n    return (\n      <tbody class=\"ds-table__body ds-table__state-body\">\n        <tr class=\"ds-table__state-row\">\n          <td class=\"ds-table__state-cell\" colSpan={totalColumns}>\n            <div class=\"ds-table__viewport-band ds-table__state-band\">\n              <ds-empty-state\n                icon={error ? 'ErrorTriangle' : 'Inbox'}\n                heading={error ? this.errorHeading : this.emptyHeading}\n                body={error ? this.errorBody : this.emptyBody}\n              />\n            </div>\n          </td>\n        </tr>\n      </tbody>\n    );\n  }\n\n  private renderLazyBody(model: TableRenderModel) {\n    if (!this.lazyLoading || !model.hasData) return null;\n    const error = this.loadMoreError?.trim();\n    const manualFallback = this.loadMoreMode === 'manual' ||\n      !this.loadController.intersectionSupported;\n\n    return (\n      <tbody class=\"ds-table__body ds-table__load-body\">\n        <tr\n          class=\"ds-table__load-row\"\n          ref={element => {\n            this.sentinelEl = element ?? null;\n          }}\n        >\n          <td class=\"ds-table__load-cell\" colSpan={model.totalColumns}>\n            <div class=\"ds-table__viewport-band ds-table__load-band\">\n              {error ? (\n                <span class=\"ds-table__load-content ds-table__load-content--error\">\n                  <span class=\"ds-table__load-copy\">\n                    <ds-icon name=\"ErrorTriangle\" size=\"md\" color=\"secondary\" aria-hidden=\"true\" />\n                    <ds-text as=\"span\" variant=\"text-body-medium\" color=\"secondary\">{error}</ds-text>\n                  </span>\n                  <ds-button-unfilled\n                    label={this.retryLabel}\n                    size=\"md\"\n                    onDsClick={() => this.loadController.request('retry')}\n                  />\n                </span>\n              ) : this.loadingMore ? (\n                <span class=\"ds-table__load-content\">\n                  <ds-loader size=\"md\" color=\"secondary\" />\n                  <ds-text as=\"span\" variant=\"text-body-medium\" color=\"secondary\">\n                    {this.loadingMoreLabel}\n                  </ds-text>\n                </span>\n              ) : this.hasMore && manualFallback ? (\n                <span class=\"ds-table__load-content\">\n                  <ds-button-unfilled\n                    label={this.loadMoreLabel}\n                    size=\"md\"\n                    onDsClick={() => this.loadController.request('manual')}\n                  />\n                </span>\n              ) : this.hasMore ? (\n                <span class=\"ds-table__auto-sentinel\" aria-hidden=\"true\" />\n              ) : (\n                <ds-text\n                  class=\"ds-table__load-content\"\n                  as=\"span\"\n                  variant=\"text-body-medium\"\n                  color=\"secondary\"\n                >\n                  {this.endOfResultsLabel}\n                </ds-text>\n              )}\n            </div>\n          </td>\n        </tr>\n      </tbody>\n    );\n  }\n\n  private renderDocumentStickyHeader(model: TableRenderModel) {\n    if (!this.documentStickyHeader) return null;\n    return (\n      <div\n        class=\"ds-table__document-sticky-header\"\n      >\n        <table\n          class={{\n            'ds-table__table': true,\n            'ds-table__sticky-header-table': true,\n            'ds-table__table--selectable': model.selectable,\n            'ds-table__table--grouped': model.grouped,\n          }}\n          style={model.tableStyle}\n          role=\"presentation\"\n          ref={element => {\n            this.stickyHeaderTableEl = element ?? null;\n          }}\n        >\n          {this.renderColgroup(model)}\n          {this.renderHeader(model, true, true)}\n        </table>\n        {this.renderFloatingCollapseAll(model)}\n      </div>\n    );\n  }\n\n  private get resultSummary(): string | null {\n    return formatTableResultSummary(\n      this.displayedCount,\n      this.totalCount,\n      this.resultSummaryLabel,\n    );\n  }\n\n  private get hasResultFooter(): boolean {\n    return !!this.resultSummary || !!this.el.querySelector(\n      '[slot=\"footer-leading\"], [slot=\"footer\"], [slot=\"footer-trailing\"]',\n    );\n  }\n\n  private renderResultFooter() {\n    const summary = this.resultSummary;\n    const hasLeading = !!this.el.querySelector('[slot=\"footer-leading\"]');\n    const hasCopy = !!this.el.querySelector('[slot=\"footer\"]');\n    const hasTrailing = !!this.el.querySelector('[slot=\"footer-trailing\"]');\n    if (!this.hasResultFooter) return null;\n    return (\n      <div class=\"ds-table__footer ds-table__bar ds-chrome-header ds-control--md\">\n        <div class=\"ds-table__bar-copy ds-chrome-header__copy ds-control--md\">\n          {hasLeading && (\n            <div class=\"ds-table__bar-status ds-chrome-header__heading\">\n              <slot name=\"footer-leading\" />\n            </div>\n          )}\n          {hasCopy ? (\n            <slot name=\"footer\" />\n          ) : summary ? (\n            <ds-text\n              class=\"ds-table__footer-summary ds-table__bar-text\"\n              as=\"span\"\n              variant=\"text-body-medium\"\n              color=\"secondary\"\n            >\n              {summary}\n            </ds-text>\n          ) : null}\n        </div>\n        {hasTrailing && (\n          <div class=\"ds-table__bar-trailing ds-chrome-header__trailing\">\n            <slot name=\"footer-trailing\" />\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  private renderCaptionBar() {\n    if (this.captionVisibility !== 'visible') return null;\n    return (\n      <div class=\"ds-table__caption-bar ds-table__bar ds-control--md\">\n        <div class=\"ds-table__caption-content\">\n          <slot\n            name=\"header\"\n            onSlotchange={this.syncHeaderSlotPresence}\n          />\n          {!this.headerPresent ? (\n            <ds-text\n              class=\"ds-table__caption-title ds-table__bar-text\"\n              as=\"div\"\n              variant=\"text-title-small\"\n              emphasis={true}\n              color=\"primary\"\n              aria-hidden=\"true\"\n            >\n              {this.caption}\n            </ds-text>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    const model = this.createRenderModel();\n    this.renderedModel = model;\n    const regionLabel = this.scrollLabel?.trim() || `${this.caption} scroll area`;\n    const initialLoading = this.loading && !model.hasData;\n    const initialError = !model.hasData && this.error;\n    const viewportStyle = !this.boundedComposition && this.resolvedMaxHeight\n      ? { '--ds-table-max-block-size': this.resolvedMaxHeight }\n      : undefined;\n    const hostStyle = this.fixedHeight\n      ? { '--_table-fixed-block-size': this.resolvedHeight }\n      : undefined;\n\n    return (\n      <Host\n        class={{\n          'table-host': true,\n          'table-host--bounded': this.boundedComposition,\n          'table-host--fixed-height': this.fixedHeight,\n          'table-host--viewport-fit': this.fitViewport,\n        }}\n        style={hostStyle}\n      >\n        <div class={{\n          'ds-table': true,\n          'ds-table--bounded': this.boundedComposition,\n          'ds-table--contained-scroll': this.containedScroll,\n          'ds-table--fixed-height': this.fixedHeight,\n          'ds-table--viewport-fit': this.fitViewport,\n          'ds-table--viewport-fit-pending': this.fitViewport && !this.viewportFitSettled,\n          'ds-table--viewport-fit-settled': this.fitViewport && this.viewportFitSettled,\n          'ds-table--sticky-header': this.stickyHeader,\n          'ds-table--document-sticky-header': this.documentStickyHeader,\n          'ds-table--contained-sticky-header': this.stickyHeader && !this.documentStickyHeader,\n          'ds-table--caption-visible': this.captionVisibility === 'visible',\n          'ds-table--footer-visible': this.hasResultFooter,\n        }} ref={element => {\n          this.rootEl = element ?? null;\n        }}>\n          {this.renderCaptionBar()}\n          <div\n            class={{\n              'ds-table__frame': true,\n              'ds-table__frame--overflow-start': this.overflowStart,\n              'ds-table__frame--overflow-end': this.overflowEnd,\n            }}\n            ref={element => {\n              this.frameEl = element ?? null;\n            }}\n          >\n            {this.renderDocumentStickyHeader(model)}\n            {this.renderStickyGroup(model)}\n            {!this.documentStickyHeader && this.renderFloatingCollapseAll(model)}\n            <div\n              class={{\n                'ds-table__viewport': true,\n                'ds-focus-ring': this.scrollable,\n              }}\n              style={viewportStyle}\n              ref={element => {\n                this.viewportEl = element ?? null;\n              }}\n              role={this.scrollable ? 'region' : undefined}\n              aria-label={this.scrollable ? regionLabel : undefined}\n              tabIndex={this.scrollable ? 0 : undefined}\n            >\n              <table\n                class={{\n                  'ds-table__table': true,\n                  'ds-table__table--selectable': model.selectable,\n                  'ds-table__table--grouped': model.grouped,\n                  'ds-table__table--native-group-sticky': model.grouped &&\n                    this.stickyHeader && !this.documentStickyHeader,\n                }}\n                style={model.tableStyle}\n                aria-busy={initialLoading || this.loadingMore ? 'true' : undefined}\n                ref={element => {\n                  this.tableEl = element ?? null;\n                }}\n              >\n                <caption class=\"ds-table__caption ds-visually-hidden\">\n                  <ds-text as=\"span\" variant=\"text-title-small\" emphasis={true} color=\"primary\">\n                    {this.caption}\n                  </ds-text>\n                </caption>\n                {this.renderColgroup(model)}\n                {this.renderHeader(model, !this.documentStickyHeader)}\n                {initialLoading\n                  ? this.renderSkeletonBody(model)\n                  : initialError\n                    ? this.renderStateBody('error', model.totalColumns)\n                    : model.hasData\n                      ? this.renderDataBodies(model)\n                      : this.renderStateBody('empty', model.totalColumns)}\n                {!initialLoading && !initialError && this.renderLazyBody(model)}\n              </table>\n            </div>\n          </div>\n          {this.renderResultFooter()}\n          <div class=\"ds-visually-hidden\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n            {this.announcement}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -358,8 +358,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.2.1",
-          "@ds-mo/icons ^6.6.0"
+          "@ds-mo/tokens ^6.2.2",
+          "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -334,8 +334,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.2.1",
-          "@ds-mo/icons ^6.6.0"
+          "@ds-mo/tokens ^6.2.2",
+          "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -307,8 +307,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: manager, swipeDirections.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.2.1",
-          "@ds-mo/icons ^6.6.0"
+          "@ds-mo/tokens ^6.2.2",
+          "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/tooltip-chart.json

@@ -226,8 +226,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: items.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.2.1",
-          "@ds-mo/icons ^6.6.0"
+          "@ds-mo/tokens ^6.2.2",
+          "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -277,8 +277,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.2.1",
-          "@ds-mo/icons ^6.6.0"
+          "@ds-mo/tokens ^6.2.2",
+          "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/typing-indicator.json

@@ -98,8 +98,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.2.1",
-          "@ds-mo/icons ^6.6.0"
+          "@ds-mo/tokens ^6.2.2",
+          "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/react/components.d.ts

@@ -11,6 +11,7 @@ export { DsAttachmentList } from "./ds-attachment-list.js";
 export { DsAvatar } from "./ds-avatar.js";
 export { DsBadge } from "./ds-badge.js";
 export { DsBanner } from "./ds-banner.js";
+export { DsBarAction } from "./ds-bar-action.js";
 export { DsBarNav } from "./ds-bar-nav.js";
 export { DsBarTitle } from "./ds-bar-title.js";
 export { DsBarWorkflow } from "./ds-bar-workflow.js";

package/dist/react/components.js

@@ -12,6 +12,7 @@ export { DsAttachmentList } from "./ds-attachment-list.js";
 export { DsAvatar } from "./ds-avatar.js";
 export { DsBadge } from "./ds-badge.js";
 export { DsBanner } from "./ds-banner.js";
+export { DsBarAction } from "./ds-bar-action.js";
 export { DsBarNav } from "./ds-bar-nav.js";
 export { DsBarTitle } from "./ds-bar-title.js";
 export { DsBarWorkflow } from "./ds-bar-workflow.js";

package/dist/react/ds-bar-action.d.ts

@@ -0,0 +1,12 @@
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+import type { EventName, StencilReactComponent } from './react-runtime.js';
+import { type DsBarActionCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsBarAction as DsBarActionElement } from "@ds-mo/ui/dist/components/ds-bar-action.js";
+export type DsBarActionEvents = {
+    onDsClear: EventName<DsBarActionCustomEvent<MouseEvent>>;
+};
+export declare const DsBarAction: StencilReactComponent<DsBarActionElement, DsBarActionEvents, Components.DsBarAction>;

package/dist/react/ds-bar-action.js

@@ -0,0 +1,12 @@
+'use client';
+import { createComponent } from './react-runtime.js';
+import React from 'react';
+import { DsBarAction as DsBarActionElement, defineCustomElement as defineDsBarAction } from "@ds-mo/ui/dist/components/ds-bar-action.js";
+export const DsBarAction = /*@__PURE__*/ createComponent({
+    tagName: 'ds-bar-action',
+    elementClass: DsBarActionElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsClear: 'dsClear' },
+    defineCustomElement: defineDsBarAction
+});

package/dist/styles/table.css

@@ -27,7 +27,7 @@
   --_table-row-selected: var(--ds-table-row-selected, var(--color-interaction-active-brand));
   --_table-border: var(--ds-table-border, var(--color-border-secondary));
   --_table-column-border: var(--ds-table-column-border, var(--color-border-tertiary));
-  --_table-sticky-border: var(--ds-table-sticky-border, var(--color-border-secondary));
+  --_table-sticky-border: var(--ds-table-sticky-border, var(--color-border-tertiary));
   --_table-border-strong: var(--ds-table-border-strong, var(--color-border-secondary));
   --_table-radius: var(--ds-table-radius, var(--dimension-radius-000));
   --_table-header-min-block-size: var(
@@ -291,20 +291,28 @@
   padding: var(--ds-control-padding-inline, var(--dimension-space-075));
 }
 
-:where(.ds-table__bar-copy--summary) {
-  justify-content: flex-end;
+:where(.ds-table__bar-status) {
+  display: flex;
+  flex: 0 1 auto;
+  align-items: center;
+  min-inline-size: 0;
+  padding-inline: var(--ds-control-label-inset, var(--dimension-space-025));
 }
 
 :where(.ds-table__bar-copy > slot) {
   display: contents;
 }
 
-:where(.ds-table__bar-copy > slot)::slotted(*) {
+:where(.ds-table__bar-copy > slot[name='footer'])::slotted(*) {
   flex: 1 1 auto;
   min-inline-size: 0;
   max-inline-size: 100%;
 }
 
+:where(.ds-table__footer-summary) {
+  margin-inline-start: auto;
+}
+
 :where(.ds-table__bar-text) {
   display: inline-flex;
   align-items: center;

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

@@ -0,0 +1,25 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class BarAction {
+    el: HTMLElement;
+    /** Number of selected items. The bar is hidden while this is below one. */
+    count: number;
+    /** Localized noun shown after the count. */
+    selectedLabel: string;
+    /** Visible Clear control label. */
+    clearLabel: string;
+    /** Accessible name for the selected-set action group. */
+    label: string;
+    /** Emitted when Clear is activated. The application owns the selected identities. */
+    dsClear: EventEmitter<MouseEvent>;
+    private hasActions;
+    private actionsObserver?;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private get resolvedCount();
+    private get isVisible();
+    private updateActionsPresence;
+    private handleClear;
+    render(): any;
+}
+//# sourceMappingURL=BarAction.d.ts.map

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

@@ -16,6 +16,7 @@ export declare class MessageScroller {
     private mutationObserver?;
     private following;
     private followReleased;
+    private releasePendingAtLiveEdge;
     private atStart;
     private programmatic;
     private programmaticTimer?;

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

@@ -35,7 +35,7 @@ export declare class PanelNav {
     dashboardLabel: string;
     settingsLabel: string;
     accountLabel: string;
-    /** Keep the account-menu trigger visually active while its popup is open or closing. */
+    /** Keep the account-menu trigger visually pressed while its popup is open or closing. */
     accountMenuExpanded: boolean;
     dashboardNavigationLabel: string;
     settingsNavigationLabel: string;