@ds-mo/ui 14.31.3 → 14.32.1

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

@@ -49,13 +49,13 @@
         "The rendered structure uses a native table, caption, column headers, row groups, and data cells; keep the caption non-empty. The native caption remains visually hidden as the table's accessible name. When caption visibility is enabled, a 48px header bar renders as component chrome outside the data scrollport. It defaults to a presentational caption title that does not duplicate the accessible name. Application-owned labeled controls supplied through the single named header slot replace that fallback and share one horizontal caption overflow row with table-owned actions inside the component-owned 8px inset. Table caption buttons keep pressed interaction paint without physically scaling. When columnCustomizer is enabled, the table adds a trailing Customize control named Customize table. Its label uses regular weight and its resting foreground remains neutral when hidden or reordered columns differ from the catalog default. The control is icon-label at typical widths and the icon-only Table menu button below 900px, where a tooltip preserves the Customize label. The always-icon-only table-variant control also exposes its label through a tooltip. Otherwise the header slot receives the complete content width.",
         "The data-mode switcher is the shared Menu of the table's supported infinite, pagination, and virtual modes. It uses an Ellipses trigger. The switcher is the final caption-bar action; when the column customizer is also present, a decorative vertical divider separates the two controls. dataMode remains controlled, and the application responds to change intent by supplying the matching records, pagination state, loading behavior, and query consequences. Escape, dismissal, and selection return focus to the trigger.",
         "The column customizer is the shared Menu of switch rows, not a table-owned dialog. Data columns can be shown, hidden, and reordered. Action columns and the selection checkbox never appear in the menu. The last remaining visible data column cannot be hidden, but it stays focusable so it can still be reordered. Escape and outside click restore focus to the trigger. Persistence stays in the application.",
-        "Sorting controls remain buttons inside column headers and expose the table's one controlled member-row sort through aria-sort. ds-table-sort in the toolbar trailing cluster is the matching menu of Data and Direction sections; it emits the same dsSortChange shape so header clicks and menu choices stay in sync. Grouping never adds a second sort indicator or header control; ds-table-group controls the grouping data point and ascending or descending group-section order while the application supplies the resulting groups. Optional column help underlines the header label with the shared dotted decoration and shows ds-tooltip from that label; it does not add a second header control or replace the column name.",
+        "Sorting controls remain buttons inside column headers and expose the table's one controlled member-row sort through aria-sort. ds-table-sort in the toolbar trailing cluster is the matching menu of Data and Order sections; it emits the same dsSortChange shape so header clicks and menu choices stay in sync. Grouping never adds a second sort indicator or header control; ds-table-group controls the grouping data point and ascending or descending group-section order while the application supplies the resulting groups. Optional column help underlines the header label with the shared dotted decoration and shows ds-tooltip from that label; it does not add a second header control or replace the column name.",
         "Selection controls expose checkbox semantics and explicit row names; select-all affects selectable loaded rows only and preserves selected identities outside the loaded window. In virtual mode the supplied in-memory rows are that loaded set, including rows whose DOM is recycled. When grouping is active with multi-selection, each group section header also exposes a checkbox that selects or clears that group's selectable loaded rows.",
         "Interactive rows are focusable as native rows, activate with Enter or Space, and do not steal activation from their nested selection, action, overflow-menu, or primary-text link controls. When an application-owned details surface navigates between records, scrollRowIntoView reveals the newly associated row with nearest scrolling while preserving focus in that surface. It resolves false when the identity is absent from the supplied, expanded table model so the application can first load data, change its controlled page, or expand its group.",
         "Scrollable table regions become keyboard focusable and named only when overflow exists.",
         "Incremental loading, newly appended row counts, failures, and end-of-results transitions are announced through a polite status region without replacing visible state. In grouped tables, announcements name the independently loading group.",
         "Applications may pass their controlled literal search terms through highlightTerms after applying their own filtering. When TableSearch scopes the query, pass the same selected field identities through highlightFieldIds. A compound column maps its ordered headerSegments to primary, secondary-run, and tertiary-run data points; simple columns map their column ID to every owned text track. With no highlightFieldIds every text track remains eligible. Matching text is rendered with semantic mark elements, so the emphasis is identifiable independently of its faint-brand background and bold-brand foreground. Highlight markup preserves source order, the cell's complete accessible text, and does not create extra announcements.",
-        "Static and infinite tables may show an optional result summary footer when displayedCount and totalCount are finite. Virtual mode shows a total-only summary and ignores displayedCount. Pagination mode instead renders a named Pagination control with a compact selected-size total, vertical divider, and page position; range changes are announced independently with complete phrasing. Unmodified Left and Right Arrow request the adjacent page while focus is inside a paginated table or on a containing page scroller that owns it; editable fields, choice controls, sliders, open menus, and modified key combinations retain their own keyboard behavior. A table-owned footer slot can replace summary copy, while footer-leading and footer-trailing remain available in the same compact-bar anatomy. Nested dialog footers are ignored."
+        "Static and infinite tables may show an optional result summary footer when displayedCount and totalCount are finite. Virtual mode shows a total-only summary and ignores displayedCount. Pagination mode instead renders a named Pagination control with a page-size picker, vertical divider, and page position; range changes are announced independently with complete phrasing. Unmodified Left and Right Arrow request the adjacent page while focus is inside a paginated table or on a containing page scroller that owns it; editable fields, choice controls, sliders, open menus, and modified key combinations retain their own keyboard behavior. A table-owned footer slot can replace summary copy, while footer-leading and footer-trailing remain available in the same compact-bar anatomy. Nested dialog footers are ignored."
       ],
       "states": [
         "Columns, rows, groups, grouping, sorting, selected row IDs, collapsed group IDs, highlightTerms, highlightFieldIds, hiddenColumnIds, columnOrder, dataMode, pagination, displayedCount, totalCount, and incremental-loading state are controlled inputs. Events communicate intent and never mutate those inputs. The optional header is one composable table-local surface: the component owns its 48px chrome, 8px inset on every side, and sticky placement while the application owns the leading slot's internal layout, controls, labels, filtering behavior, and action handling. highlightTerms only marks matching table-owned text and never filters rows, changes query semantics, or highlights Tag labels. highlightFieldIds optionally narrows that marking to matching column IDs or compound header-segment sort keys. Opting into dataModeSwitcher and columnCustomizer adds their trailing Menu triggers and requires caption visibility. When both are present, Customize precedes a decorative divider and the data-mode trigger remains the final action. The Customize trigger keeps one stable label and neutral resting foreground whether or not hiddenColumnIds or columnOrder differ from the catalog default; the configured state remains visible inside the Menu. The table closes one trailing Menu before opening the other. The footer retains its compact-bar composition: application-owned leading status sits left while a controlled result summary or Pagination aligns right, before any trailing action. Content-sized tables remain natural for sparse or fixed-count results. height bounds the complete header, frame, and footer composition. fitViewport reserves the compact-state composition height in the nearest vertical scrollport while growing the visible table into that reservation as surrounding page chrome collapses.",
@@ -68,7 +68,7 @@
         "When pagination enables Fit to page on a bounded table, the table proposes the number of complete top-level rows that fit below its column header. Grouped tables count group headers only; member rows never affect capacity. Selecting Fit captures that numeric snapshot. A changed fitIdentity requests one fresh snapshot for a new query shape, while viewport resizing alone does not change the active controlled page size.",
         "Rows opt into complete-row activation with interactive and emit dsRowActivate without owning navigation. Selection paints through the shared selected ::before layer; interactive hover and press paint through the shared ::after layer.",
         "Row selection owns the single sticky start lane. One explicitly sized application column can own the sticky end lane, or the start lane when selection is absent. Each sticky boundary owns one fixed divider and a row-clipped directional shadow that paints into the adjacent scrolling columns only while more inline content remains beyond that edge.",
-        "Cells accept scalar content, standard primary-and-secondary or dual-primary text primitives, declarative Tag, wrapping multiple-Tag content, icon-only, icon-and-text, 16:9 Image, or ButtonUnfilled Action content, or explicit Empty and Blank absence values. Text objects may declare an optional href (and target) on the primary track only; the table renders a native anchor with the shared brand text-action treatment when the URL is safe, and leaves scalars unlinked. Standard secondary copy defaults to the secondary foreground and may declare a semantic Text color when the application data carries intent; an optional tertiary track uses the same subdued body-small recipe as secondary. Secondary and tertiary may also be a short list of colorable runs, rendered on one line with the table's middle-dot separator. A run may supply help to add the shared dotted underline and a bottom-start Tooltip when compact visible copy summarizes supplementary details; explicit line breaks create a compact unbulleted list without obscuring the current cell's earlier tracks. Dual-primary copy keeps both tracks primary unless explicitly colored and does not gain a tertiary track. Body data cells share 8px outer padding; header and group rows keep their own geometry. Text tracks, including Empty, keep 4px inline padding so copy lines up with column-header labels; Tag and icon-only tracks stay on the 8px cell chrome alone. Icon-and-text cells (`kind: 'icon-text'`) place one md prefix icon beside the same copy stack as a text cell. The icon slot takes 2px padding on every side, then a 2px flex gap before the copy; text-track padding stays on the copy. Omit iconLabel when the glyph is decorative. 20px content (body-medium text, md icon, and the row checkbox) sits in a 24px track so it stays optically aligned with 24px Tag and Action content. Single-track text, selection, tag-only, icon-only, icon-and-text, Action, Empty, Blank, and 1-track Image cells resolve a 40px base contract while two-track cells grow to 64px and three-track cells grow to 88px. Every later track adds 24px, so four tracks resolve to 112px, five to 136px, and the sequence may continue. Tracks stack with no gap. Wrapping primary on a 1-track cell uses that same rhythm: two wrapped lines share the 64px row and three wrapped lines share the 88px row. Wrapping secondary keeps primary on the first track and consumes later tracks: two secondary lines share the 88px row and three secondary lines share a 112px fourth track. Keep the same track count in every row of a table or group when those rows should share one height. Tag cells use the inset Tag recipe: md double-inset is a 24px control for tag-only and tag-with-text, while text-with-tag uses sm single-inset at 20px so the second-track pill sits in the same 24px lane. Multiple-Tag cells use `kind: 'tags'`, a positive `tracks` count, and small single-inset Tags that wrap naturally at the column edge. Each wrap line is a 24px track with no stack gap, matching text. The tallest cell establishes the native row height, so all sibling cells match even at four, five, or more tracks; virtual tables use the declared count as the initial estimate and measure responsive wrapping after paint. Action cells primarily use an icon-only Ellipses treatment, render a 24px small ButtonUnfilled, default to unbordered, and emit row, column, and action identities through dsCellAction. When an action cell declares items, that Ellipses trigger opens the shared ds-menu for commands, dividers, inactive rows, and destructive rows instead of emitting on click; choosing a command emits dsCellAction with that item's actionId. Omit items to keep a single-shot control. Image cells declare tracks 1, 2, or 3 so the 16:9 bordered preview fills that body-row content box (cell height minus 8px padding) and the column hugs the resulting width; omit tracks for the 1-track recipe, and keep image tracks aligned with the other cells in the table or group. Image cells fall back to an accessible placeholder when no source is supplied. Empty means the data applies but has no value and renders an em dash with localized assistive text; Blank means the data is not applicable and renders no content. Nullish values remain backward-compatible Empty values. Stable type, variant, and track-count hooks keep every cell family independently styleable.",
+        "Cells accept scalar content, standard primary-and-secondary or dual-primary text primitives, declarative Tag, wrapping multiple-Tag content, icon-only, icon-and-text, 16:9 Image, or ButtonUnfilled Action content, or explicit Empty and Blank absence values. Text objects may declare an optional href (and target) on the primary track only; the table renders a native anchor with the shared brand text-action treatment when the URL is safe, and leaves scalars unlinked. Standard secondary copy defaults to the secondary foreground and may declare a semantic Text color when the application data carries intent; an optional tertiary track uses the same subdued body-small recipe as secondary. Secondary and tertiary may also be a short list of colorable runs, rendered on one line with the table's middle-dot separator. A run may supply help to add the shared dotted underline and a bottom-start Tooltip when compact visible copy summarizes supplementary details; explicit line breaks create a compact unbulleted list without obscuring the current cell's earlier tracks. Dual-primary copy keeps both tracks primary unless explicitly colored and does not gain a tertiary track. Body data cells share 8px outer padding; header and group rows keep their own geometry. Text tracks, including Empty, keep 4px inline padding so copy lines up with column-header labels; Tag and icon-only tracks stay on the 8px cell chrome alone. Icon-and-text cells (`kind: 'icon-text'`) place one md prefix icon beside the same copy stack as a text cell. The icon slot takes 2px padding on every side, then a 2px flex gap before the copy; text-track padding stays on the copy. Omit iconLabel when the glyph is decorative. 20px content (body-medium text, md icon, and the row checkbox) sits in a 24px track so it stays optically aligned with 24px Tag and Action content. Single-track text, selection, tag-only, icon-only, icon-and-text, Action, Empty, Blank, and 1-track Image cells resolve a 40px base contract while two-track cells grow to 64px and three-track cells grow to 88px. Every later track adds 24px, so four tracks resolve to 112px, five to 136px, and the sequence may continue. Tracks stack with no gap. Wrapping primary on a 1-track cell uses that same rhythm: two wrapped lines share the 64px row and three wrapped lines share the 88px row. Wrapping secondary keeps primary on the first track and consumes later tracks: two secondary lines share the 88px row and three secondary lines share a 112px fourth track. Keep the same track count in every row of a table or group when those rows should share one height. Tag cells use the inset Tag recipe: md double-inset is a 24px control for tag-only and tag-with-text, while text-with-tag uses sm single-inset at 20px so the second-track pill sits in the same 24px lane. Multiple-Tag cells use `kind: 'tags'`, a positive `tracks` count, and small single-inset Tags that wrap naturally at the column edge. Each wrap line is a 24px track with no stack gap, matching text. The tallest cell establishes the native row height, so all sibling cells match even at four, five, or more tracks; virtual tables use the declared count as the initial estimate and measure responsive wrapping after paint. Action cells primarily use an icon-only Ellipses treatment, render a 24px small ButtonUnfilled, default to unbordered, and emit row, column, and action identities through dsCellAction. When an action cell declares items, that Ellipses trigger opens the shared ds-menu for commands, dividers, inactive rows, and destructive rows instead of emitting on click; choosing a command emits dsCellAction with that item's actionId. Omit items to keep a single-shot control. Image cells declare tracks 1, 2, or 3 so the 16:9 preview fills that body-row content box (cell height minus 8px padding) and the column hugs the resulting width; omit tracks for the 1-track recipe, and keep image tracks aligned with the other cells in the table or group. The image is clipped to the 2px preview radius and the tertiary border paints as an inset overlay so it remains visible over image pixels. Image cells fall back to an accessible placeholder when no source is supplied. Empty means the data applies but has no value and renders an em dash with localized assistive text; Blank means the data is not applicable and renders no content. Nullish values remain backward-compatible Empty values. Stable type, variant, and track-count hooks keep every cell family independently styleable.",
         "Score-and-text cells (`kind: score-text`) place the small 24px safety score at the top-right of the cell while the same one-, two-, or three-track copy stack as a standard text cell fills from the start edge. The score is top-aligned with the first text track, adds no inner padding, and defaults its accessible name prefix to Safety score. Score-and-text loading geometry uses the matching small score skeleton and declared copy tracks.",
         "The public @ds-mo/ui/table.css export is the authoritative zero-specificity visual recipe. Override its --ds-table-* properties or target its stable element classes for product-specific styling.",
         "Use surfaceOpenRowId to identify the interactive row associated with a visible detail panel or other contextual surface. The application owns opening, same-row toggling, switching records, and closing; retain the identity through exit motion, then clear it. Move it when panel navigation changes the displayed record. This pressed wash spans sticky and scrolling cells, follows stable row identity through virtualization, and never checks a checkbox or changes selectedRowIds. Group expansion remains an inline disclosure."
@@ -1359,7 +1359,7 @@
   "files": [
     {
       "path": "src/wc/components/Table/Table.css",
-      "content": "@import '../../styles/table.css';\n@import '../../styles/control-elevation.css';\n@import '../../utils/chrome-header.css';\n@import '../../utils/control-density.css';\n@import '../../utils/forced-colors.css';\n@import '../../utils/text-decoration.css';\n\n:host {\n  display: block;\n  box-sizing: border-box;\n  min-width: 0;\n  max-width: 100%;\n  container-type: inline-size;\n  container-name: ds-table;\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::slotted([slot='header']) {\n  inline-size: 100%;\n  min-inline-size: 0;\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\n.ds-table__cell--text-wrap ds-text.ds-table__cell-track--text,\n.ds-table__cell--icon-text-wrap ds-text.ds-table__cell-track--text,\n.ds-table__cell--score-text-wrap ds-text.ds-table__cell-track--text {\n  display: block;\n}\n\nds-text.ds-table__cell-track--text {\n  padding-inline: var(--_table-cell-track-padding-inline);\n}\n\nds-text.ds-table__cell-primary,\n.ds-table__cell--empty ds-text.ds-table__cell-track {\n  padding-block: var(--dimension-space-025);\n}\n\n/*\n * The public :where() wrap recipe has zero specificity, so ds-text's\n * variant line-height would win inside the component. Reassert on wrapping\n * cell layout classes so extra primary and secondary lines occupy later tracks.\n */\n.ds-table__cell--text-wrap.ds-table__cell--text-single .ds-table__cell-primary,\n.ds-table__cell--text-wrap.ds-table__cell--text-multi .ds-table__cell-primary,\n.ds-table__cell--icon-text-wrap.ds-table__cell--icon-text-single .ds-table__cell-primary,\n.ds-table__cell--icon-text-wrap.ds-table__cell--icon-text-multi .ds-table__cell-primary,\n.ds-table__cell--score-text-wrap.ds-table__cell--score-text-single .ds-table__cell-primary,\n.ds-table__cell--score-text-wrap.ds-table__cell--score-text-multi .ds-table__cell-primary {\n  line-height: var(--_table-wrap-primary-line-height);\n  padding-block: var(--_table-wrap-primary-padding-block);\n}\n\n.ds-table__cell--text-wrap.ds-table__cell--text-multi .ds-table__cell-copy,\n.ds-table__cell--icon-text-wrap.ds-table__cell--icon-text-multi .ds-table__cell-copy,\n.ds-table__cell--score-text-wrap.ds-table__cell--score-text-multi .ds-table__cell-copy {\n  gap: 0;\n}\n\n.ds-table__cell--text-wrap.ds-table__cell--text-multi .ds-table__cell-secondary,\n.ds-table__cell--icon-text-wrap.ds-table__cell--icon-text-multi .ds-table__cell-secondary,\n.ds-table__cell--score-text-wrap.ds-table__cell--score-text-multi .ds-table__cell-secondary {\n  line-height: var(--_table-wrap-secondary-line-height);\n  padding-block: var(--_table-wrap-secondary-padding-block);\n}\n\nds-text.ds-table__cell-secondary,\nds-text.ds-table__cell-tertiary {\n  padding-block: var(--dimension-space-025);\n}\n\n.ds-table__cell--text-multi ds-text.ds-table__cell-secondary,\n.ds-table__cell--text-triple ds-text.ds-table__cell-secondary,\n.ds-table__cell--text-triple ds-text.ds-table__cell-tertiary,\n.ds-table__cell--icon-text-multi ds-text.ds-table__cell-secondary,\n.ds-table__cell--icon-text-triple ds-text.ds-table__cell-secondary,\n.ds-table__cell--icon-text-triple ds-text.ds-table__cell-tertiary,\n.ds-table__cell--score-text-multi ds-text.ds-table__cell-secondary,\n.ds-table__cell--score-text-triple ds-text.ds-table__cell-secondary,\n.ds-table__cell--score-text-triple ds-text.ds-table__cell-tertiary,\n.ds-table__cell--primary-text ds-text.ds-table__cell-secondary {\n  min-block-size: var(--_table-cell-track-min-block-size);\n}\n\nds-text.ds-table__cell-run,\nds-text.ds-table__cell-run-separator {\n  display: flex;\n}\n\nds-text.ds-table__group-label,\nds-text.ds-table__group-count,\nds-text.ds-table__group-accessory,\nds-text.ds-table__group-accessory-separator {\n  display: flex;\n  align-items: center;\n}\n\nds-text.ds-table__group-count {\n  min-block-size: var(--_table-cell-track-min-block-size);\n  padding-inline-end: var(--dimension-space-050);\n}\n\n.ds-table__cell-tag-stack--tag-with-text ds-text.ds-table__cell-tag-text,\n.ds-table__cell-tag-stack--text-with-tag ds-text.ds-table__cell-tag-text {\n  padding-inline: var(--_table-cell-track-padding-inline);\n  padding-block: var(--dimension-space-025);\n  min-block-size: var(--_table-cell-track-min-block-size);\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-trailing ds-pagination {\n  max-inline-size: 100%;\n}\n\n.ds-table__bar-status slot::slotted(*) {\n  width: 100%;\n  max-width: 100%;\n  min-width: 0;\n}\n\nds-skeleton.ds-table__skeleton-image-shape {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  --ds-control-height: 100%;\n}\n\nds-skeleton.ds-table__skeleton-checkbox {\n  --ds-control-height: var(--dimension-iconography-sm);\n}\n\n.ds-table__skeleton-checkbox-canvas {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: var(--dimension-size-300);\n  block-size: var(--dimension-size-300);\n}\n\n.ds-table__caption-customizer {\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-inline-size: 0;\n}\n\n.ds-table__caption-mode-switcher {\n  display: flex;\n  align-items: center;\n}\n\n.ds-table__caption-customizer--loading > ds-tooltip ds-button-unfilled {\n  visibility: hidden;\n}\n\n.ds-table__caption-customizer > ds-skeleton {\n  position: absolute;\n  inset: 0;\n}\n",
+      "content": "@import '../../styles/table.css';\n@import '../../styles/control-elevation.css';\n@import '../../utils/chrome-header.css';\n@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/forced-colors.css';\n@import '../../utils/text-decoration.css';\n\n:host {\n  display: block;\n  box-sizing: border-box;\n  min-width: 0;\n  max-width: 100%;\n  container-type: inline-size;\n  container-name: ds-table;\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::slotted([slot='header']) {\n  inline-size: 100%;\n  min-inline-size: 0;\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\n.ds-table__cell--text-wrap ds-text.ds-table__cell-track--text,\n.ds-table__cell--icon-text-wrap ds-text.ds-table__cell-track--text,\n.ds-table__cell--score-text-wrap ds-text.ds-table__cell-track--text {\n  display: block;\n}\n\nds-text.ds-table__cell-track--text {\n  padding-inline: var(--_table-cell-track-padding-inline);\n}\n\nds-text.ds-table__cell-primary,\n.ds-table__cell--empty ds-text.ds-table__cell-track {\n  padding-block: var(--dimension-space-025);\n}\n\n/*\n * The public :where() wrap recipe has zero specificity, so ds-text's\n * variant line-height would win inside the component. Reassert on wrapping\n * cell layout classes so extra primary and secondary lines occupy later tracks.\n */\n.ds-table__cell--text-wrap.ds-table__cell--text-single .ds-table__cell-primary,\n.ds-table__cell--text-wrap.ds-table__cell--text-multi .ds-table__cell-primary,\n.ds-table__cell--icon-text-wrap.ds-table__cell--icon-text-single .ds-table__cell-primary,\n.ds-table__cell--icon-text-wrap.ds-table__cell--icon-text-multi .ds-table__cell-primary,\n.ds-table__cell--score-text-wrap.ds-table__cell--score-text-single .ds-table__cell-primary,\n.ds-table__cell--score-text-wrap.ds-table__cell--score-text-multi .ds-table__cell-primary {\n  line-height: var(--_table-wrap-primary-line-height);\n  padding-block: var(--_table-wrap-primary-padding-block);\n}\n\n.ds-table__cell--text-wrap.ds-table__cell--text-multi .ds-table__cell-copy,\n.ds-table__cell--icon-text-wrap.ds-table__cell--icon-text-multi .ds-table__cell-copy,\n.ds-table__cell--score-text-wrap.ds-table__cell--score-text-multi .ds-table__cell-copy {\n  gap: 0;\n}\n\n.ds-table__cell--text-wrap.ds-table__cell--text-multi .ds-table__cell-secondary,\n.ds-table__cell--icon-text-wrap.ds-table__cell--icon-text-multi .ds-table__cell-secondary,\n.ds-table__cell--score-text-wrap.ds-table__cell--score-text-multi .ds-table__cell-secondary {\n  line-height: var(--_table-wrap-secondary-line-height);\n  padding-block: var(--_table-wrap-secondary-padding-block);\n}\n\nds-text.ds-table__cell-secondary,\nds-text.ds-table__cell-tertiary {\n  padding-block: var(--dimension-space-025);\n}\n\n.ds-table__cell--text-multi ds-text.ds-table__cell-secondary,\n.ds-table__cell--text-triple ds-text.ds-table__cell-secondary,\n.ds-table__cell--text-triple ds-text.ds-table__cell-tertiary,\n.ds-table__cell--icon-text-multi ds-text.ds-table__cell-secondary,\n.ds-table__cell--icon-text-triple ds-text.ds-table__cell-secondary,\n.ds-table__cell--icon-text-triple ds-text.ds-table__cell-tertiary,\n.ds-table__cell--score-text-multi ds-text.ds-table__cell-secondary,\n.ds-table__cell--score-text-triple ds-text.ds-table__cell-secondary,\n.ds-table__cell--score-text-triple ds-text.ds-table__cell-tertiary,\n.ds-table__cell--primary-text ds-text.ds-table__cell-secondary {\n  min-block-size: var(--_table-cell-track-min-block-size);\n}\n\nds-text.ds-table__cell-run,\nds-text.ds-table__cell-run-separator {\n  display: flex;\n}\n\nds-text.ds-table__group-label,\nds-text.ds-table__group-count,\nds-text.ds-table__group-accessory,\nds-text.ds-table__group-accessory-separator {\n  display: flex;\n  align-items: center;\n}\n\nds-text.ds-table__group-count {\n  min-block-size: var(--_table-cell-track-min-block-size);\n  padding-inline-end: var(--dimension-space-050);\n}\n\n.ds-table__cell-tag-stack--tag-with-text ds-text.ds-table__cell-tag-text,\n.ds-table__cell-tag-stack--text-with-tag ds-text.ds-table__cell-tag-text {\n  padding-inline: var(--_table-cell-track-padding-inline);\n  padding-block: var(--dimension-space-025);\n  min-block-size: var(--_table-cell-track-min-block-size);\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-trailing ds-pagination {\n  max-inline-size: 100%;\n}\n\n.ds-table__bar-status slot::slotted(*) {\n  width: 100%;\n  max-width: 100%;\n  min-width: 0;\n}\n\nds-skeleton.ds-table__skeleton-image-shape {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  --ds-control-height: 100%;\n}\n\nds-skeleton.ds-table__skeleton-checkbox {\n  --ds-control-height: var(--dimension-iconography-sm);\n}\n\n.ds-table__skeleton-checkbox-canvas {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: var(--dimension-size-300);\n  block-size: var(--dimension-size-300);\n}\n\n.ds-table__caption-customizer {\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-inline-size: 0;\n}\n\n.ds-table__caption-mode-switcher {\n  display: flex;\n  align-items: center;\n}\n\n.ds-table__caption-customizer--loading > ds-tooltip ds-button-unfilled {\n  visibility: hidden;\n}\n\n.ds-table__caption-customizer > ds-skeleton {\n  position: absolute;\n  inset: 0;\n}\n",
       "type": "registry:ui"
     },
     {
@@ -1439,7 +1439,7 @@
     },
     {
       "path": "src/wc/components/Table/table-row-view.tsx",
-      "content": "import { h } from '@stencil/core';\nimport {\n  resolveTableCellPresentation,\n  tableCellTrackStackBlockSize,\n  tableCellTextOverflowProps,\n  type TableCellPresentation,\n} from './table-cell-model';\nimport {\n  isRenderableTableActionMenu,\n  isTableCellActionMenu,\n  tableActionTriggerId,\n} from './table-action-menu';\nimport { tableRowSelectionLabel } from './table-model';\nimport type { TableRenderModel } from './table-render-model';\nimport { TABLE_NO_HIGHLIGHT_MATCHER, type TableHighlightMatcher } from './table-highlight';\nimport type { TableCellActionDetail, TableCellTextRun, TableColumn, TableRow } from './table-types';\nimport { resolveSafeUrl } from '../../utils/safe-url';\n\nexport interface TableRowViewOptions {\n  row: TableRow;\n  model: TableRenderModel;\n  visibleColumns: TableColumn[];\n  emptyCellLabel: string;\n  actionMenuElementId: string;\n  actionMenu: { rowId: string; columnId: string } | null;\n  actionMenuSurface?: { rowId: string; columnId: string } | null;\n  highlightMatcher: TableHighlightMatcher;\n  highlightFieldIds: string[];\n  surfaceOpenRowId?: string;\n  ariaRowIndex?: number;\n  variableVirtualSize?: boolean;\n  intrinsicBlockSize?: number;\n  rowKey?: string;\n  renderSelectionControl: (\n    label: string,\n    checked: boolean,\n    indeterminate: boolean,\n    disabled: boolean,\n    onActivate: () => void\n  ) => unknown;\n  renderStickyEdge: (sticky: TableColumn['sticky']) => unknown;\n  onRowActivate: (row: TableRow, event: Event) => void;\n  onRowKeyDown: (row: TableRow, event: KeyboardEvent) => void;\n  onRowSelection: (row: TableRow) => void;\n  onCellAction: (detail: TableCellActionDetail) => void;\n  onActionMenuToggle: (row: TableRow, column: TableColumn, event: MouseEvent) => void;\n}\n\n/** Render one semantic body row and the complete declarative table-cell vocabulary. */\nexport function renderTableRow({\n  row,\n  model,\n  visibleColumns,\n  emptyCellLabel,\n  actionMenuElementId,\n  actionMenu,\n  actionMenuSurface,\n  highlightMatcher,\n  highlightFieldIds,\n  surfaceOpenRowId,\n  ariaRowIndex,\n  variableVirtualSize = false,\n  intrinsicBlockSize,\n  rowKey = row.id,\n  renderSelectionControl,\n  renderStickyEdge,\n  onRowActivate,\n  onRowKeyDown,\n  onRowSelection,\n  onCellAction,\n  onActionMenuToggle,\n}: TableRowViewOptions) {\n  const selected = model.selectedRowIds.has(row.id);\n  const surfaceOpen = row.id === surfaceOpenRowId && !!row.interactive && !row.disabled;\n  const rowSelectable = row.selectable !== false && !row.disabled;\n  const beforeSpacer =\n    model.elasticSpacerIndex == null\n      ? visibleColumns\n      : visibleColumns.slice(0, model.elasticSpacerIndex);\n  const afterSpacer =\n    model.elasticSpacerIndex == null ? [] : visibleColumns.slice(model.elasticSpacerIndex);\n  const renderColumn = (column: TableColumn) =>\n    renderTableCell({\n      row,\n      column,\n      selected,\n      surfaceOpen,\n      emptyCellLabel,\n      actionMenuElementId,\n      actionMenu,\n      actionMenuSurface,\n      highlightMatcher,\n      highlightFieldIds,\n      renderStickyEdge,\n      onCellAction,\n      onActionMenuToggle,\n    });\n\n  return (\n    <tr\n      key={rowKey}\n      class={{\n        'ds-table__row': true,\n        'ds-table__row--selected': selected,\n        'ds-table__row--disabled': !!row.disabled,\n        'ds-table__row--interactive': !!row.interactive && !row.disabled,\n        'ds-focus-ring': !!row.interactive && !row.disabled,\n      }}\n      data-row-id={row.id}\n      data-virtual-id={ariaRowIndex != null ? `row:${row.id}` : undefined}\n      data-virtual-pool-key={ariaRowIndex != null ? rowKey : undefined}\n      data-virtual-measure={ariaRowIndex != null && variableVirtualSize ? 'true' : undefined}\n      data-selected={selected ? 'true' : undefined}\n      data-surface-open={surfaceOpen ? 'true' : undefined}\n      style={\n        intrinsicBlockSize != null\n          ? { '--_table-row-intrinsic-block-size': `${intrinsicBlockSize}px` }\n          : undefined\n      }\n      aria-rowindex={ariaRowIndex}\n      aria-disabled={row.disabled ? 'true' : undefined}\n      tabIndex={row.interactive && !row.disabled ? 0 : undefined}\n      onClick={event => onRowActivate(row, event)}\n      onKeyDown={event => onRowKeyDown(row, event)}\n    >\n      {model.selectable && (\n        <td\n          class={{\n            'ds-table__cell': true,\n            'ds-table__selection-cell': true,\n            'ds-table__cell--sticky-start': true,\n            'ds-interaction-fill': true,\n            'ds-interaction-fill--grouped': true,\n            'ds-interaction-fill--selected': selected,\n            'ds-interaction-fill--surface-open': surfaceOpen,\n          }}\n        >\n          {renderSelectionControl(\n            `${selected ? 'Deselect' : 'Select'} ${tableRowSelectionLabel(row, visibleColumns)}`,\n            selected,\n            false,\n            !rowSelectable,\n            () => onRowSelection(row)\n          )}\n          {renderStickyEdge('start')}\n        </td>\n      )}\n      {beforeSpacer.map(renderColumn)}\n      {model.elasticSpacerIndex != null && (\n        <td\n          class={{\n            'ds-table__cell': true,\n            'ds-table__elastic-spacer-cell': true,\n            'ds-interaction-fill': true,\n            'ds-interaction-fill--grouped': true,\n            'ds-interaction-fill--selected': selected,\n            'ds-interaction-fill--surface-open': surfaceOpen,\n          }}\n          aria-hidden=\"true\"\n          role=\"presentation\"\n          data-elastic-spacer=\"true\"\n        />\n      )}\n      {afterSpacer.map(renderColumn)}\n    </tr>\n  );\n}\n\ninterface TableCellViewOptions {\n  row: TableRow;\n  column: TableColumn;\n  selected: boolean;\n  surfaceOpen: boolean;\n  emptyCellLabel: string;\n  actionMenuElementId: string;\n  actionMenu: { rowId: string; columnId: string } | null;\n  actionMenuSurface?: { rowId: string; columnId: string } | null;\n  highlightMatcher: TableHighlightMatcher;\n  highlightFieldIds: string[];\n  renderStickyEdge: (sticky: TableColumn['sticky']) => unknown;\n  onCellAction: (detail: TableCellActionDetail) => void;\n  onActionMenuToggle: (row: TableRow, column: TableColumn, event: MouseEvent) => void;\n}\n\nfunction renderTableCell(options: TableCellViewOptions) {\n  const { row, column, selected, surfaceOpen, renderStickyEdge } = options;\n  const align = column.align ?? 'start';\n  const cell = resolveTableCellPresentation(row.cells[column.id], column);\n  const tagCell = cell.kind === 'tag';\n  const tagsCell = cell.kind === 'tags';\n  const iconCell = cell.kind === 'icon';\n  const iconTextCell = cell.kind === 'icon-text';\n  const scoreTextCell = cell.kind === 'score-text';\n  const imageCell = cell.kind === 'image';\n  const actionCell = cell.kind === 'action';\n  const actionMenuCell = actionCell && isRenderableTableActionMenu(cell.value);\n  const textCell = cell.kind === 'text';\n  const primaryTextCell = textCell && cell.primaryText;\n  const singleTextCell = textCell && cell.singleLine;\n  const emptyCell = cell.kind === 'empty';\n  const blankCell = cell.kind === 'blank';\n  const tagVariant = tagCell ? cell.variant : undefined;\n  const tagsVariant = tagsCell ? cell.variant : undefined;\n  const textVariant = textCell ? cell.variant : undefined;\n  const imageVariant = imageCell ? cell.variant : undefined;\n  const iconTextVariant = iconTextCell ? cell.variant : undefined;\n  const scoreTextVariant = scoreTextCell ? cell.variant : undefined;\n  const wraps = (textCell || iconTextCell || scoreTextCell) && cell.wraps;\n\n  return (\n    <td\n      key={`${row.id}:${column.id}`}\n      class={{\n        'ds-table__cell': true,\n        [`ds-table__cell--align-${align}`]: true,\n        'ds-table__cell--tag': tagCell,\n        [`ds-table__cell--tag-${tagVariant}`]: tagCell,\n        'ds-table__cell--tags': tagsCell,\n        [`ds-table__cell--tags-${tagsVariant}`]: tagsCell,\n        'ds-table__cell--icon': iconCell,\n        'ds-table__cell--icon-text': iconTextCell,\n        [`ds-table__cell--icon-text-${iconTextVariant}`]: iconTextCell,\n        'ds-table__cell--icon-text-wrap': iconTextCell && wraps,\n        'ds-table__cell--score-text': scoreTextCell,\n        [`ds-table__cell--score-text-${scoreTextVariant}`]: scoreTextCell,\n        'ds-table__cell--score-text-wrap': scoreTextCell && wraps,\n        'ds-table__cell--image': imageCell,\n        [`ds-table__cell--image-${imageVariant}`]: imageCell,\n        'ds-table__cell--action': actionCell,\n        'ds-table__cell--action-menu': actionMenuCell,\n        'ds-table__cell--primary-text': primaryTextCell,\n        'ds-table__cell--text-single': singleTextCell,\n        'ds-table__cell--text-multi': textCell && !singleTextCell && textVariant !== 'triple',\n        'ds-table__cell--text-triple': textVariant === 'triple',\n        'ds-table__cell--text-wrap': textCell && wraps,\n        'ds-table__cell--empty': emptyCell,\n        'ds-table__cell--blank': blankCell,\n        'ds-table__cell--sticky-start': column.sticky === 'start',\n        'ds-table__cell--sticky-end': column.sticky === 'end',\n        'ds-interaction-fill': true,\n        'ds-interaction-fill--grouped': true,\n        'ds-interaction-fill--selected': selected,\n        'ds-interaction-fill--surface-open': surfaceOpen,\n      }}\n      data-column-id={column.id}\n      data-cell-type={cell.cellType}\n      data-cell-variant={\n        tagVariant ??\n        tagsVariant ??\n        textVariant ??\n        imageVariant ??\n        iconTextVariant ??\n        scoreTextVariant\n      }\n      data-cell-tracks={tagsCell ? cell.tracks : undefined}\n    >\n      <span class=\"ds-table__cell-content ds-interaction-fill__content\">\n        {renderTableCellValue(cell, options)}\n      </span>\n      {renderStickyEdge(column.sticky)}\n    </td>\n  );\n}\n\nfunction renderTableCellValue(cell: TableCellPresentation, options: TableCellViewOptions) {\n  const {\n    row,\n    column,\n    emptyCellLabel,\n    actionMenuElementId,\n    actionMenu,\n    actionMenuSurface,\n    onCellAction,\n    onActionMenuToggle,\n  } = options;\n  if (cell.kind === 'blank') return null;\n\n  if (cell.kind === 'empty') {\n    return (\n      <ds-text\n        class=\"ds-table__cell-track ds-table__cell-track--text\"\n        as=\"span\"\n        variant=\"text-body-medium\"\n        color=\"tertiary\"\n      >\n        <span aria-hidden=\"true\">—</span>\n        <span class=\"ds-visually-hidden\">{emptyCellLabel}</span>\n      </ds-text>\n    );\n  }\n\n  if (cell.kind === 'icon') {\n    const value = cell.value;\n    return (\n      <ds-icon name={value.icon} size=\"md\" color={value.color ?? 'secondary'} label={value.label} />\n    );\n  }\n\n  if (cell.kind === 'icon-text') {\n    return (\n      <span class=\"ds-table__cell-icon-text\">\n        <span class=\"ds-table__cell-icon-text-icon\">\n          <ds-icon\n            name={cell.icon}\n            size=\"md\"\n            color={cell.iconColor ?? 'secondary'}\n            label={cell.iconLabel}\n          />\n        </span>\n        {renderTextCopy(cell, options)}\n      </span>\n    );\n  }\n\n  if (cell.kind === 'score-text') {\n    return (\n      <span class=\"ds-table__cell-score-text\">\n        {renderTextCopy(cell, options)}\n        <span class=\"ds-table__cell-score-text-score\">\n          <ds-score\n            size=\"sm\"\n            value={cell.score}\n            level={cell.scoreLevel}\n            label={cell.scoreLabel}\n            isLoading={cell.scoreLoading}\n          />\n        </span>\n      </span>\n    );\n  }\n\n  if (cell.kind === 'image') {\n    const value = cell.value;\n    return (\n      <span class=\"ds-table__cell-image\">\n        {value.src ? (\n          <img\n            class=\"ds-table__cell-image-content\"\n            src={value.src}\n            alt={value.alt}\n            loading=\"lazy\"\n          />\n        ) : (\n          <span class=\"ds-table__cell-image-placeholder\" role=\"img\" aria-label={value.alt} />\n        )}\n      </span>\n    );\n  }\n\n  if (cell.kind === 'action') {\n    const value = cell.value;\n    const menu = isRenderableTableActionMenu(value);\n    const triggerId = tableActionTriggerId(actionMenuElementId, row.id, column.id);\n    const expanded = menu && actionMenu?.rowId === row.id && actionMenu?.columnId === column.id;\n    return (\n      <ds-button-unfilled\n        id={menu ? triggerId : undefined}\n        variant={menu ? 'icon' : (value.variant ?? 'label')}\n        size=\"md\"\n        isInset={true}\n        insetDepth=\"double\"\n        label={value.label ?? ''}\n        icon={value.icon ?? (menu ? 'Ellipses' : '')}\n        aria-label={value.ariaLabel ?? null}\n        hasBorder={value.hasBorder ?? false}\n        isInactive={value.isInactive ?? false}\n        isLoading={value.isLoading ?? false}\n        hasMenu={menu}\n        expanded={menu ? expanded : undefined}\n        surfaceOpen={\n          menu && actionMenuSurface?.rowId === row.id && actionMenuSurface?.columnId === column.id\n        }\n        controls={menu ? actionMenuElementId : undefined}\n        onDsClick={event => {\n          event.stopPropagation();\n          if (menu) {\n            onActionMenuToggle(row, column, event.detail);\n            return;\n          }\n          if (isTableCellActionMenu(value)) return;\n          onCellAction({ actionId: value.actionId, rowId: row.id, columnId: column.id });\n        }}\n      />\n    );\n  }\n\n  if (cell.kind === 'tag') {\n    const value = cell.value;\n    const variant = cell.variant;\n    const tag = (\n      <ds-tag\n        label={value.label}\n        intent={value.intent ?? 'neutral'}\n        contrast={value.contrast ?? 'faint'}\n        size={variant === 'text-with-tag' ? 'sm' : 'md'}\n        icon={value.icon ?? ''}\n        rounded={value.rounded ?? false}\n        isInset\n        insetDepth={variant === 'text-with-tag' ? 'single' : 'double'}\n      />\n    );\n    if (variant === 'tag-only') return tag;\n    return (\n      <span class={`ds-table__cell-tag-stack ds-table__cell-tag-stack--${variant}`}>\n        {variant === 'tag-with-text' && tag}\n        <ds-text\n          class=\"ds-table__cell-tag-text ds-table__cell-track\"\n          as=\"span\"\n          variant={variant === 'tag-with-text' ? 'text-body-small' : 'text-body-medium'}\n          color=\"secondary\"\n          lineTruncation={1}\n          data-table-truncate=\"\"\n        >\n          {renderHighlightedText(\n            value.text,\n            tableCellFieldMatcher(options, variant === 'tag-with-text' ? 1 : 0)\n          )}\n        </ds-text>\n        {variant === 'text-with-tag' && <span class=\"ds-table__cell-tag-control-track\">{tag}</span>}\n      </span>\n    );\n  }\n\n  if (cell.kind === 'tags') {\n    return (\n      <span\n        class=\"ds-table__cell-tags\"\n        style={{ '--_table-cell-tags-min-block-size': tableCellTrackStackBlockSize(cell.tracks) }}\n      >\n        {cell.value.items.map((item, index) => (\n          <ds-tag\n            key={`${item.label}-${index}`}\n            label={item.label}\n            intent={item.intent ?? 'neutral'}\n            contrast={item.contrast ?? 'faint'}\n            size=\"sm\"\n            icon={item.icon ?? ''}\n            rounded={item.rounded ?? false}\n            isInset\n            insetDepth=\"single\"\n          />\n        ))}\n      </span>\n    );\n  }\n\n  if (cell.kind !== 'text') return null;\n  return renderTextCopy(cell, options);\n}\n\nfunction renderTextCopy(\n  cell: Extract<TableCellPresentation, { kind: 'text' | 'icon-text' | 'score-text' }>,\n  options: TableCellViewOptions\n) {\n  const text = cell.value;\n  const overflow = tableCellTextOverflowProps(cell.lineClamp);\n  const primaryText = cell.kind === 'text' && cell.primaryText;\n  const href = resolveSafeUrl(text.href);\n  const primary = (\n    <ds-text\n      class=\"ds-table__cell-primary ds-table__cell-track ds-table__cell-track--text\"\n      as=\"span\"\n      variant=\"text-body-medium\"\n      color={href ? 'inherit' : 'primary'}\n      lineTruncation={overflow.lineTruncation}\n      wrap={overflow.wrap}\n      fontFeature={text.fontFeature ?? 'normal'}\n      data-table-truncate={truncateAttr(cell.lineClamp)}\n    >\n      {renderHighlightedText(text.primary, tableCellFieldMatcher(options, 0))}\n    </ds-text>\n  );\n\n  return (\n    <span class={{ 'ds-table__cell-copy': true, 'ds-table__cell-copy--wrap': cell.wraps }}>\n      {href ? (\n        <a\n          class=\"ds-table__cell-link ds-text-action ds-focus-ring\"\n          href={href}\n          target={text.target === '_blank' ? '_blank' : undefined}\n          rel={text.target === '_blank' ? 'noopener noreferrer' : undefined}\n        >\n          {primary}\n        </a>\n      ) : (\n        primary\n      )}\n      {renderTextTrack(text.secondary, {\n        track: 'secondary',\n        variant: primaryText ? 'text-body-medium' : 'text-body-small',\n        defaultColor: primaryText ? 'primary' : 'secondary',\n        wholeColor: text.secondaryColor,\n        lineClamp: cell.lineClamp,\n        highlightMatcherForRun: runIndex => tableCellFieldMatcher(options, 1 + runIndex),\n      })}\n      {renderTextTrack(text.tertiary, {\n        track: 'tertiary',\n        variant: 'text-body-small',\n        defaultColor: 'secondary',\n        wholeColor: text.tertiaryColor,\n        lineClamp: cell.lineClamp,\n        highlightMatcherForRun: runIndex =>\n          tableCellFieldMatcher(options, 1 + (text.secondary?.length ?? 0) + runIndex),\n      })}\n    </span>\n  );\n}\n\nfunction renderTextTrack(\n  runs: TableCellTextRun[] | undefined,\n  options: {\n    track: 'secondary' | 'tertiary';\n    variant: 'text-body-medium' | 'text-body-small';\n    defaultColor: 'primary' | 'secondary';\n    wholeColor?: TableCellTextRun['color'];\n    lineClamp: Extract<\n      TableCellPresentation,\n      { kind: 'text' | 'icon-text' | 'score-text' }\n    >['lineClamp'];\n    highlightMatcherForRun: (runIndex: number) => TableHighlightMatcher;\n  }\n) {\n  if (!runs?.length) return null;\n  const trackClass = `ds-table__cell-${options.track} ds-table__cell-track ds-table__cell-track--text`;\n  const overflow = tableCellTextOverflowProps(options.lineClamp);\n  const colorFor = (run: TableCellTextRun) =>\n    run.color ?? options.wholeColor ?? options.defaultColor;\n  const renderRun = (run: TableCellTextRun, index: number, className: string) => {\n    const copy = (\n      <ds-text\n        class={className}\n        as=\"span\"\n        variant={options.variant}\n        color={colorFor(run)}\n        decoration={run.help ? 'dotted-underline' : undefined}\n        lineTruncation={overflow.lineTruncation}\n        wrap={overflow.wrap}\n        data-table-truncate={truncateAttr(options.lineClamp)}\n      >\n        {renderHighlightedText(run.text, options.highlightMatcherForRun(index))}\n      </ds-text>\n    );\n    return run.help ? (\n      <ds-tooltip\n        key={`${options.track}-run-${index}`}\n        label={run.help}\n        side=\"bottom\"\n        align=\"start\"\n        size=\"sm\"\n        wrapLabel={true}\n      >\n        {copy}\n      </ds-tooltip>\n    ) : (\n      copy\n    );\n  };\n  if (runs.length === 1) {\n    return renderRun(runs[0], 0, trackClass);\n  }\n\n  return (\n    <span class={`${trackClass} ds-table__cell-track--runs`}>\n      {runs.map((run, index) => [\n        index > 0 && (\n          <ds-text\n            key={`${options.track}-sep-${index}`}\n            class=\"ds-table__cell-run-separator\"\n            as=\"span\"\n            variant={options.variant}\n            color=\"secondary\"\n            aria-hidden=\"true\"\n          >\n            ·\n          </ds-text>\n        ),\n        renderRun(run, index, 'ds-table__cell-run'),\n      ])}\n    </span>\n  );\n}\n\nfunction renderHighlightedText(value: string | number | undefined, matcher: TableHighlightMatcher) {\n  if (value === undefined) return null;\n  return matcher(value).map((segment, index) =>\n    segment.match ? (\n      <mark class=\"ds-table__match\" key={`match-${index}`}>\n        {segment.text}\n      </mark>\n    ) : (\n      <span key={`text-${index}`}>{segment.text}</span>\n    )\n  );\n}\n\nfunction tableCellFieldMatcher(\n  options: TableCellViewOptions,\n  fieldIndex: number\n): TableHighlightMatcher {\n  const selected = options.highlightFieldIds;\n  if (selected.length === 0 || selected.includes(options.column.id)) {\n    return options.highlightMatcher;\n  }\n  const fieldId = options.column.headerSegments?.[fieldIndex]?.sortKey;\n  return fieldId && selected.includes(fieldId)\n    ? options.highlightMatcher\n    : TABLE_NO_HIGHLIGHT_MATCHER;\n}\n\nfunction truncateAttr(\n  lineClamp: Extract<\n    TableCellPresentation,\n    { kind: 'text' | 'icon-text' | 'score-text' }\n  >['lineClamp']\n) {\n  return lineClamp === 'none' ? undefined : '';\n}\n",
+      "content": "import { h } from '@stencil/core';\nimport {\n  resolveTableCellPresentation,\n  tableCellTrackStackBlockSize,\n  tableCellTextOverflowProps,\n  type TableCellPresentation,\n} from './table-cell-model';\nimport {\n  isRenderableTableActionMenu,\n  isTableCellActionMenu,\n  tableActionTriggerId,\n} from './table-action-menu';\nimport { tableRowSelectionLabel } from './table-model';\nimport type { TableRenderModel } from './table-render-model';\nimport { TABLE_NO_HIGHLIGHT_MATCHER, type TableHighlightMatcher } from './table-highlight';\nimport type { TableCellActionDetail, TableCellTextRun, TableColumn, TableRow } from './table-types';\nimport { resolveSafeUrl } from '../../utils/safe-url';\n\nexport interface TableRowViewOptions {\n  row: TableRow;\n  model: TableRenderModel;\n  visibleColumns: TableColumn[];\n  emptyCellLabel: string;\n  actionMenuElementId: string;\n  actionMenu: { rowId: string; columnId: string } | null;\n  actionMenuSurface?: { rowId: string; columnId: string } | null;\n  highlightMatcher: TableHighlightMatcher;\n  highlightFieldIds: string[];\n  surfaceOpenRowId?: string;\n  ariaRowIndex?: number;\n  variableVirtualSize?: boolean;\n  intrinsicBlockSize?: number;\n  rowKey?: string;\n  renderSelectionControl: (\n    label: string,\n    checked: boolean,\n    indeterminate: boolean,\n    disabled: boolean,\n    onActivate: () => void\n  ) => unknown;\n  renderStickyEdge: (sticky: TableColumn['sticky']) => unknown;\n  onRowActivate: (row: TableRow, event: Event) => void;\n  onRowKeyDown: (row: TableRow, event: KeyboardEvent) => void;\n  onRowSelection: (row: TableRow) => void;\n  onCellAction: (detail: TableCellActionDetail) => void;\n  onActionMenuToggle: (row: TableRow, column: TableColumn, event: MouseEvent) => void;\n}\n\n/** Render one semantic body row and the complete declarative table-cell vocabulary. */\nexport function renderTableRow({\n  row,\n  model,\n  visibleColumns,\n  emptyCellLabel,\n  actionMenuElementId,\n  actionMenu,\n  actionMenuSurface,\n  highlightMatcher,\n  highlightFieldIds,\n  surfaceOpenRowId,\n  ariaRowIndex,\n  variableVirtualSize = false,\n  intrinsicBlockSize,\n  rowKey = row.id,\n  renderSelectionControl,\n  renderStickyEdge,\n  onRowActivate,\n  onRowKeyDown,\n  onRowSelection,\n  onCellAction,\n  onActionMenuToggle,\n}: TableRowViewOptions) {\n  const selected = model.selectedRowIds.has(row.id);\n  const surfaceOpen = row.id === surfaceOpenRowId && !!row.interactive && !row.disabled;\n  const rowSelectable = row.selectable !== false && !row.disabled;\n  const beforeSpacer =\n    model.elasticSpacerIndex == null\n      ? visibleColumns\n      : visibleColumns.slice(0, model.elasticSpacerIndex);\n  const afterSpacer =\n    model.elasticSpacerIndex == null ? [] : visibleColumns.slice(model.elasticSpacerIndex);\n  const renderColumn = (column: TableColumn) =>\n    renderTableCell({\n      row,\n      column,\n      selected,\n      surfaceOpen,\n      emptyCellLabel,\n      actionMenuElementId,\n      actionMenu,\n      actionMenuSurface,\n      highlightMatcher,\n      highlightFieldIds,\n      renderStickyEdge,\n      onCellAction,\n      onActionMenuToggle,\n    });\n\n  return (\n    <tr\n      key={rowKey}\n      class={{\n        'ds-table__row': true,\n        'ds-table__row--selected': selected,\n        'ds-table__row--disabled': !!row.disabled,\n        'ds-table__row--interactive': !!row.interactive && !row.disabled,\n        'ds-focus-ring': !!row.interactive && !row.disabled,\n      }}\n      data-row-id={row.id}\n      data-virtual-id={ariaRowIndex != null ? `row:${row.id}` : undefined}\n      data-virtual-pool-key={ariaRowIndex != null ? rowKey : undefined}\n      data-virtual-measure={ariaRowIndex != null && variableVirtualSize ? 'true' : undefined}\n      data-selected={selected ? 'true' : undefined}\n      data-surface-open={surfaceOpen ? 'true' : undefined}\n      style={\n        intrinsicBlockSize != null\n          ? { '--_table-row-intrinsic-block-size': `${intrinsicBlockSize}px` }\n          : undefined\n      }\n      aria-rowindex={ariaRowIndex}\n      aria-disabled={row.disabled ? 'true' : undefined}\n      tabIndex={row.interactive && !row.disabled ? 0 : undefined}\n      onClick={event => onRowActivate(row, event)}\n      onKeyDown={event => onRowKeyDown(row, event)}\n    >\n      {model.selectable && (\n        <td\n          class={{\n            'ds-table__cell': true,\n            'ds-table__selection-cell': true,\n            'ds-table__cell--sticky-start': true,\n            'ds-interaction-fill': true,\n            'ds-interaction-fill--grouped': true,\n            'ds-interaction-fill--selected': selected,\n            'ds-interaction-fill--surface-open': surfaceOpen,\n          }}\n        >\n          {renderSelectionControl(\n            `${selected ? 'Deselect' : 'Select'} ${tableRowSelectionLabel(row, visibleColumns)}`,\n            selected,\n            false,\n            !rowSelectable,\n            () => onRowSelection(row)\n          )}\n          {renderStickyEdge('start')}\n        </td>\n      )}\n      {beforeSpacer.map(renderColumn)}\n      {model.elasticSpacerIndex != null && (\n        <td\n          class={{\n            'ds-table__cell': true,\n            'ds-table__elastic-spacer-cell': true,\n            'ds-interaction-fill': true,\n            'ds-interaction-fill--grouped': true,\n            'ds-interaction-fill--selected': selected,\n            'ds-interaction-fill--surface-open': surfaceOpen,\n          }}\n          aria-hidden=\"true\"\n          role=\"presentation\"\n          data-elastic-spacer=\"true\"\n        />\n      )}\n      {afterSpacer.map(renderColumn)}\n    </tr>\n  );\n}\n\ninterface TableCellViewOptions {\n  row: TableRow;\n  column: TableColumn;\n  selected: boolean;\n  surfaceOpen: boolean;\n  emptyCellLabel: string;\n  actionMenuElementId: string;\n  actionMenu: { rowId: string; columnId: string } | null;\n  actionMenuSurface?: { rowId: string; columnId: string } | null;\n  highlightMatcher: TableHighlightMatcher;\n  highlightFieldIds: string[];\n  renderStickyEdge: (sticky: TableColumn['sticky']) => unknown;\n  onCellAction: (detail: TableCellActionDetail) => void;\n  onActionMenuToggle: (row: TableRow, column: TableColumn, event: MouseEvent) => void;\n}\n\nfunction renderTableCell(options: TableCellViewOptions) {\n  const { row, column, selected, surfaceOpen, renderStickyEdge } = options;\n  const align = column.align ?? 'start';\n  const cell = resolveTableCellPresentation(row.cells[column.id], column);\n  const tagCell = cell.kind === 'tag';\n  const tagsCell = cell.kind === 'tags';\n  const iconCell = cell.kind === 'icon';\n  const iconTextCell = cell.kind === 'icon-text';\n  const scoreTextCell = cell.kind === 'score-text';\n  const imageCell = cell.kind === 'image';\n  const actionCell = cell.kind === 'action';\n  const actionMenuCell = actionCell && isRenderableTableActionMenu(cell.value);\n  const textCell = cell.kind === 'text';\n  const primaryTextCell = textCell && cell.primaryText;\n  const singleTextCell = textCell && cell.singleLine;\n  const emptyCell = cell.kind === 'empty';\n  const blankCell = cell.kind === 'blank';\n  const tagVariant = tagCell ? cell.variant : undefined;\n  const tagsVariant = tagsCell ? cell.variant : undefined;\n  const textVariant = textCell ? cell.variant : undefined;\n  const imageVariant = imageCell ? cell.variant : undefined;\n  const iconTextVariant = iconTextCell ? cell.variant : undefined;\n  const scoreTextVariant = scoreTextCell ? cell.variant : undefined;\n  const wraps = (textCell || iconTextCell || scoreTextCell) && cell.wraps;\n\n  return (\n    <td\n      key={`${row.id}:${column.id}`}\n      class={{\n        'ds-table__cell': true,\n        [`ds-table__cell--align-${align}`]: true,\n        'ds-table__cell--tag': tagCell,\n        [`ds-table__cell--tag-${tagVariant}`]: tagCell,\n        'ds-table__cell--tags': tagsCell,\n        [`ds-table__cell--tags-${tagsVariant}`]: tagsCell,\n        'ds-table__cell--icon': iconCell,\n        'ds-table__cell--icon-text': iconTextCell,\n        [`ds-table__cell--icon-text-${iconTextVariant}`]: iconTextCell,\n        'ds-table__cell--icon-text-wrap': iconTextCell && wraps,\n        'ds-table__cell--score-text': scoreTextCell,\n        [`ds-table__cell--score-text-${scoreTextVariant}`]: scoreTextCell,\n        'ds-table__cell--score-text-wrap': scoreTextCell && wraps,\n        'ds-table__cell--image': imageCell,\n        [`ds-table__cell--image-${imageVariant}`]: imageCell,\n        'ds-table__cell--action': actionCell,\n        'ds-table__cell--action-menu': actionMenuCell,\n        'ds-table__cell--primary-text': primaryTextCell,\n        'ds-table__cell--text-single': singleTextCell,\n        'ds-table__cell--text-multi': textCell && !singleTextCell && textVariant !== 'triple',\n        'ds-table__cell--text-triple': textVariant === 'triple',\n        'ds-table__cell--text-wrap': textCell && wraps,\n        'ds-table__cell--empty': emptyCell,\n        'ds-table__cell--blank': blankCell,\n        'ds-table__cell--sticky-start': column.sticky === 'start',\n        'ds-table__cell--sticky-end': column.sticky === 'end',\n        'ds-interaction-fill': true,\n        'ds-interaction-fill--grouped': true,\n        'ds-interaction-fill--selected': selected,\n        'ds-interaction-fill--surface-open': surfaceOpen,\n      }}\n      data-column-id={column.id}\n      data-cell-type={cell.cellType}\n      data-cell-variant={\n        tagVariant ??\n        tagsVariant ??\n        textVariant ??\n        imageVariant ??\n        iconTextVariant ??\n        scoreTextVariant\n      }\n      data-cell-tracks={tagsCell ? cell.tracks : undefined}\n    >\n      <span class=\"ds-table__cell-content ds-interaction-fill__content\">\n        {renderTableCellValue(cell, options)}\n      </span>\n      {renderStickyEdge(column.sticky)}\n    </td>\n  );\n}\n\nfunction renderTableCellValue(cell: TableCellPresentation, options: TableCellViewOptions) {\n  const {\n    row,\n    column,\n    emptyCellLabel,\n    actionMenuElementId,\n    actionMenu,\n    actionMenuSurface,\n    onCellAction,\n    onActionMenuToggle,\n  } = options;\n  if (cell.kind === 'blank') return null;\n\n  if (cell.kind === 'empty') {\n    return (\n      <ds-text\n        class=\"ds-table__cell-track ds-table__cell-track--text\"\n        as=\"span\"\n        variant=\"text-body-medium\"\n        color=\"tertiary\"\n      >\n        <span aria-hidden=\"true\">—</span>\n        <span class=\"ds-visually-hidden\">{emptyCellLabel}</span>\n      </ds-text>\n    );\n  }\n\n  if (cell.kind === 'icon') {\n    const value = cell.value;\n    return (\n      <ds-icon name={value.icon} size=\"md\" color={value.color ?? 'secondary'} label={value.label} />\n    );\n  }\n\n  if (cell.kind === 'icon-text') {\n    return (\n      <span class=\"ds-table__cell-icon-text\">\n        <span class=\"ds-table__cell-icon-text-icon\">\n          <ds-icon\n            name={cell.icon}\n            size=\"md\"\n            color={cell.iconColor ?? 'secondary'}\n            label={cell.iconLabel}\n          />\n        </span>\n        {renderTextCopy(cell, options)}\n      </span>\n    );\n  }\n\n  if (cell.kind === 'score-text') {\n    return (\n      <span class=\"ds-table__cell-score-text\">\n        {renderTextCopy(cell, options)}\n        <span class=\"ds-table__cell-score-text-score\">\n          <ds-score\n            size=\"sm\"\n            value={cell.score}\n            level={cell.scoreLevel}\n            label={cell.scoreLabel}\n            isLoading={cell.scoreLoading}\n          />\n        </span>\n      </span>\n    );\n  }\n\n  if (cell.kind === 'image') {\n    const value = cell.value;\n    return (\n      <span class=\"ds-table__cell-image\">\n        {value.src ? (\n          <img\n            class=\"ds-table__cell-image-content\"\n            src={value.src}\n            alt={value.alt}\n            loading=\"lazy\"\n          />\n        ) : (\n          <span class=\"ds-table__cell-image-placeholder\" role=\"img\" aria-label={value.alt} />\n        )}\n      </span>\n    );\n  }\n\n  if (cell.kind === 'action') {\n    const value = cell.value;\n    const menu = isRenderableTableActionMenu(value);\n    const triggerId = tableActionTriggerId(actionMenuElementId, row.id, column.id);\n    const expanded = menu && actionMenu?.rowId === row.id && actionMenu?.columnId === column.id;\n    return (\n      <ds-button-unfilled\n        id={menu ? triggerId : undefined}\n        variant={menu ? 'icon' : (value.variant ?? 'label')}\n        size=\"md\"\n        isInset={true}\n        insetDepth=\"double\"\n        label={value.label ?? ''}\n        icon={value.icon ?? (menu ? 'Ellipses' : '')}\n        aria-label={value.ariaLabel ?? null}\n        hasBorder={value.hasBorder ?? false}\n        isInactive={value.isInactive ?? false}\n        isLoading={value.isLoading ?? false}\n        hasMenu={menu}\n        expanded={menu ? expanded : undefined}\n        surfaceOpen={\n          menu && actionMenuSurface?.rowId === row.id && actionMenuSurface?.columnId === column.id\n        }\n        controls={menu ? actionMenuElementId : undefined}\n        onDsClick={event => {\n          event.stopPropagation();\n          if (menu) {\n            onActionMenuToggle(row, column, event.detail);\n            return;\n          }\n          if (isTableCellActionMenu(value)) return;\n          onCellAction({ actionId: value.actionId, rowId: row.id, columnId: column.id });\n        }}\n      />\n    );\n  }\n\n  if (cell.kind === 'tag') {\n    const value = cell.value;\n    const variant = cell.variant;\n    const tag = (\n      <ds-tag\n        label={value.label}\n        intent={value.intent ?? 'neutral'}\n        contrast={value.contrast ?? 'faint'}\n        size={variant === 'text-with-tag' ? 'sm' : 'md'}\n        icon={value.icon ?? ''}\n        rounded={value.rounded ?? false}\n        isInset\n        insetDepth={variant === 'text-with-tag' ? 'single' : 'double'}\n      />\n    );\n    if (variant === 'tag-only') return tag;\n    return (\n      <span class={`ds-table__cell-tag-stack ds-table__cell-tag-stack--${variant}`}>\n        {variant === 'tag-with-text' && tag}\n        <ds-text\n          class=\"ds-table__cell-tag-text ds-table__cell-track\"\n          as=\"span\"\n          variant={variant === 'tag-with-text' ? 'text-body-small' : 'text-body-medium'}\n          color=\"secondary\"\n          lineTruncation={1}\n          data-table-truncate=\"\"\n        >\n          {renderHighlightedText(\n            value.text,\n            tableCellFieldMatcher(options, variant === 'tag-with-text' ? 1 : 0)\n          )}\n        </ds-text>\n        {variant === 'text-with-tag' && <span class=\"ds-table__cell-tag-control-track\">{tag}</span>}\n      </span>\n    );\n  }\n\n  if (cell.kind === 'tags') {\n    return (\n      <span\n        class=\"ds-table__cell-tags\"\n        style={{ '--_table-cell-tags-min-block-size': tableCellTrackStackBlockSize(cell.tracks) }}\n      >\n        {cell.value.items.map((item, index) => (\n          <ds-tag\n            key={`${item.label}-${index}`}\n            label={item.label}\n            intent={item.intent ?? 'neutral'}\n            contrast={item.contrast ?? 'faint'}\n            size=\"sm\"\n            icon={item.icon ?? ''}\n            rounded={item.rounded ?? false}\n            isInset\n            insetDepth=\"single\"\n          />\n        ))}\n      </span>\n    );\n  }\n\n  if (cell.kind !== 'text') return null;\n  return renderTextCopy(cell, options);\n}\n\nfunction renderTextCopy(\n  cell: Extract<TableCellPresentation, { kind: 'text' | 'icon-text' | 'score-text' }>,\n  options: TableCellViewOptions\n) {\n  const text = cell.value;\n  const overflow = tableCellTextOverflowProps(cell.lineClamp);\n  const primaryText = cell.kind === 'text' && cell.primaryText;\n  const href = resolveSafeUrl(text.href);\n  const primary = (\n    <ds-text\n      class=\"ds-table__cell-primary ds-table__cell-track ds-table__cell-track--text\"\n      as=\"span\"\n      variant=\"text-body-medium\"\n      color={href ? 'inherit' : 'primary'}\n      lineTruncation={overflow.lineTruncation}\n      wrap={overflow.wrap}\n      fontFeature={text.fontFeature ?? 'normal'}\n      data-table-truncate={truncateAttr(cell.lineClamp)}\n    >\n      {renderHighlightedText(text.primary, tableCellFieldMatcher(options, 0))}\n    </ds-text>\n  );\n\n  return (\n    <span class={{ 'ds-table__cell-copy': true, 'ds-table__cell-copy--wrap': cell.wraps }}>\n      {href ? (\n        <a\n          class=\"ds-table__cell-link ds-text-action ds-focus-ring\"\n          href={href}\n          target={text.target === '_blank' ? '_blank' : undefined}\n          rel={text.target === '_blank' ? 'noopener noreferrer' : undefined}\n        >\n          {primary}\n        </a>\n      ) : (\n        primary\n      )}\n      {renderTextTrack(text.secondary, {\n        track: 'secondary',\n        variant: primaryText ? 'text-body-medium' : 'text-body-small',\n        defaultColor: primaryText ? 'primary' : 'secondary',\n        wholeColor: text.secondaryColor,\n        lineClamp: cell.lineClamp,\n        highlightMatcherForRun: runIndex => tableCellFieldMatcher(options, 1 + runIndex),\n      })}\n      {renderTextTrack(text.tertiary, {\n        track: 'tertiary',\n        variant: 'text-body-small',\n        defaultColor: 'secondary',\n        wholeColor: text.tertiaryColor,\n        lineClamp: cell.lineClamp,\n        highlightMatcherForRun: runIndex =>\n          tableCellFieldMatcher(options, 1 + (text.secondary?.length ?? 0) + runIndex),\n      })}\n    </span>\n  );\n}\n\nfunction renderTextTrack(\n  runs: TableCellTextRun[] | undefined,\n  options: {\n    track: 'secondary' | 'tertiary';\n    variant: 'text-body-medium' | 'text-body-small';\n    defaultColor: 'primary' | 'secondary';\n    wholeColor?: TableCellTextRun['color'];\n    lineClamp: Extract<\n      TableCellPresentation,\n      { kind: 'text' | 'icon-text' | 'score-text' }\n    >['lineClamp'];\n    highlightMatcherForRun: (runIndex: number) => TableHighlightMatcher;\n  }\n) {\n  if (!runs?.length) return null;\n  const trackClass = `ds-table__cell-${options.track} ds-table__cell-track ds-table__cell-track--text`;\n  const overflow = tableCellTextOverflowProps(options.lineClamp);\n  const colorFor = (run: TableCellTextRun) =>\n    run.color ?? options.wholeColor ?? options.defaultColor;\n  const renderRun = (run: TableCellTextRun, index: number, className: string) => {\n    const copy = (\n      <ds-text\n        class={className}\n        as=\"span\"\n        variant={options.variant}\n        color={colorFor(run)}\n        decoration={run.help ? 'dotted-underline' : undefined}\n        lineTruncation={overflow.lineTruncation}\n        wrap={overflow.wrap}\n        data-table-truncate={truncateAttr(options.lineClamp)}\n      >\n        {renderHighlightedText(run.text, options.highlightMatcherForRun(index))}\n      </ds-text>\n    );\n    return run.help ? (\n      <ds-tooltip\n        key={`${options.track}-run-${index}`}\n        label={run.help}\n        side=\"bottom\"\n        align=\"start\"\n        size=\"sm\"\n        wrapLabel={true}\n      >\n        {copy}\n      </ds-tooltip>\n    ) : (\n      copy\n    );\n  };\n  if (runs.length === 1) {\n    const run = runs[0];\n    if (!run.help) return renderRun(run, 0, trackClass);\n    return <span class={trackClass}>{renderRun(run, 0, 'ds-table__cell-run')}</span>;\n  }\n\n  return (\n    <span class={`${trackClass} ds-table__cell-track--runs`}>\n      {runs.map((run, index) => [\n        index > 0 && (\n          <ds-text\n            key={`${options.track}-sep-${index}`}\n            class=\"ds-table__cell-run-separator\"\n            as=\"span\"\n            variant={options.variant}\n            color=\"secondary\"\n            aria-hidden=\"true\"\n          >\n            ·\n          </ds-text>\n        ),\n        renderRun(run, index, 'ds-table__cell-run'),\n      ])}\n    </span>\n  );\n}\n\nfunction renderHighlightedText(value: string | number | undefined, matcher: TableHighlightMatcher) {\n  if (value === undefined) return null;\n  return matcher(value).map((segment, index) =>\n    segment.match ? (\n      <mark class=\"ds-table__match\" key={`match-${index}`}>\n        {segment.text}\n      </mark>\n    ) : (\n      <span key={`text-${index}`}>{segment.text}</span>\n    )\n  );\n}\n\nfunction tableCellFieldMatcher(\n  options: TableCellViewOptions,\n  fieldIndex: number\n): TableHighlightMatcher {\n  const selected = options.highlightFieldIds;\n  if (selected.length === 0 || selected.includes(options.column.id)) {\n    return options.highlightMatcher;\n  }\n  const fieldId = options.column.headerSegments?.[fieldIndex]?.sortKey;\n  return fieldId && selected.includes(fieldId)\n    ? options.highlightMatcher\n    : TABLE_NO_HIGHLIGHT_MATCHER;\n}\n\nfunction truncateAttr(\n  lineClamp: Extract<\n    TableCellPresentation,\n    { kind: 'text' | 'icon-text' | 'score-text' }\n  >['lineClamp']\n) {\n  return lineClamp === 'none' ? undefined : '';\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -403,7 +403,7 @@
   "files": [
     {
       "path": "src/wc/components/Tag/Tag.css",
-      "content": "@import '../../utils/tag-chip.css';\n@import '../../utils/control-density-inset.css';\n\n/* A one-character rounded Tag resolves to a circle at every density. */\n:host {\n  min-inline-size: var(--ds-control-height);\n}\n\n/* ── Intent × Contrast — strong ─────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-strong) {\n  background-color: var(--color-background-strong-neutral);\n  color: var(--color-foreground-medium-neutral);\n}\n:host(.tag--intent-brand.tag--contrast-strong) {\n  background-color: var(--color-background-strong-brand);\n  color: var(--color-foreground-on-strong-background-primary);\n}\n:host(.tag--intent-ai.tag--contrast-strong) {\n  background-color: var(--color-background-strong-ai);\n  color: var(--color-foreground-medium-ai);\n}\n:host(.tag--intent-negative.tag--contrast-strong) {\n  background-color: var(--color-background-strong-negative);\n  color: var(--color-foreground-medium-negative);\n}\n:host(.tag--intent-warning.tag--contrast-strong) {\n  background-color: var(--color-background-strong-warning);\n  color: var(--color-foreground-medium-warning);\n}\n:host(.tag--intent-caution.tag--contrast-strong) {\n  background-color: var(--color-background-strong-caution);\n  color: var(--color-foreground-medium-caution);\n}\n:host(.tag--intent-positive.tag--contrast-strong) {\n  background-color: var(--color-background-strong-positive);\n  color: var(--color-foreground-medium-positive);\n}\n\n/* ── Intent × Contrast — bold ───────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-bold) {\n  background-color: var(--color-background-bold-neutral);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n:host(.tag--intent-brand.tag--contrast-bold) {\n  background-color: var(--color-background-bold-brand);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n:host(.tag--intent-ai.tag--contrast-bold) {\n  background-color: var(--color-background-bold-ai);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n:host(.tag--intent-negative.tag--contrast-bold) {\n  background-color: var(--color-background-bold-negative);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n:host(.tag--intent-warning.tag--contrast-bold) {\n  background-color: var(--color-background-bold-warning);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n:host(.tag--intent-caution.tag--contrast-bold) {\n  background-color: var(--color-background-bold-caution);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n:host(.tag--intent-positive.tag--contrast-bold) {\n  background-color: var(--color-background-bold-positive);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n\n/* ── Intent × Contrast — medium ─────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-medium) {\n  background-color: var(--color-background-medium-neutral);\n  color: var(--color-foreground-strong-neutral);\n}\n:host(.tag--intent-brand.tag--contrast-medium) {\n  background-color: var(--color-background-medium-brand);\n  color: var(--color-foreground-on-medium-background-primary);\n}\n:host(.tag--intent-ai.tag--contrast-medium) {\n  background-color: var(--color-background-medium-ai);\n  color: var(--color-foreground-strong-ai);\n}\n:host(.tag--intent-negative.tag--contrast-medium) {\n  background-color: var(--color-background-medium-negative);\n  color: var(--color-foreground-strong-negative);\n}\n:host(.tag--intent-warning.tag--contrast-medium) {\n  background-color: var(--color-background-medium-warning);\n  color: var(--color-foreground-strong-warning);\n}\n:host(.tag--intent-caution.tag--contrast-medium) {\n  background-color: var(--color-background-medium-caution);\n  color: var(--color-foreground-strong-caution);\n}\n:host(.tag--intent-positive.tag--contrast-medium) {\n  background-color: var(--color-background-medium-positive);\n  color: var(--color-foreground-strong-positive);\n}\n\n/* ── Intent × Contrast — faint ──────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-faint) {\n  background-color: var(--color-background-faint-neutral);\n  color: var(--color-foreground-bold-neutral);\n}\n:host(.tag--intent-brand.tag--contrast-faint) {\n  background-color: var(--color-background-faint-brand);\n  color: var(--color-foreground-bold-brand);\n}\n:host(.tag--intent-ai.tag--contrast-faint) {\n  background-color: var(--color-background-faint-ai);\n  color: var(--color-foreground-bold-ai);\n}\n:host(.tag--intent-negative.tag--contrast-faint) {\n  background-color: var(--color-background-faint-negative);\n  color: var(--color-foreground-bold-negative);\n}\n:host(.tag--intent-warning.tag--contrast-faint) {\n  background-color: var(--color-background-faint-warning);\n  color: var(--color-foreground-bold-warning);\n}\n:host(.tag--intent-caution.tag--contrast-faint) {\n  background-color: var(--color-background-faint-caution);\n  color: var(--color-foreground-bold-caution);\n}\n:host(.tag--intent-positive.tag--contrast-faint) {\n  background-color: var(--color-background-faint-positive);\n  color: var(--color-foreground-bold-positive);\n}\n\n/* ── Interactive menu trigger ───────────────────────────────────────────── */\n\n:host(.tag--interactive) {\n  padding: 0;\n  gap: 0;\n}\n\n.tag__button {\n  all: unset;\n  position: relative;\n  z-index: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  min-width: 0;\n  max-width: 100%;\n  height: 100%;\n  padding: 0 var(--ds-control-padding-inline);\n  gap: var(--ds-control-gap);\n  border-radius: inherit;\n  color: inherit;\n  cursor: default;\n}\n\n.tag__button:disabled {\n  cursor: not-allowed;\n}\n\n/* Hover/press wash stays above the Tag's semantic background. */\n\n/* ── Icons ──────────────────────────────────────────────────────────────── */\n\n.tag__prefix-icon,\n.tag__suffix-icon {\n  position: relative;\n  z-index: 2;\n  display: inline-flex;\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n",
+      "content": "@import '../../utils/radius.css';\n@import '../../utils/tag-chip.css';\n@import '../../utils/control-density-inset.css';\n\n/* A one-character rounded Tag resolves to a circle at every density. */\n:host {\n  min-inline-size: var(--ds-control-height);\n}\n\n/* ── Intent × Contrast — strong ─────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-strong) {\n  background-color: var(--color-background-strong-neutral);\n  color: var(--color-foreground-medium-neutral);\n}\n:host(.tag--intent-brand.tag--contrast-strong) {\n  background-color: var(--color-background-strong-brand);\n  color: var(--color-foreground-on-strong-background-primary);\n}\n:host(.tag--intent-ai.tag--contrast-strong) {\n  background-color: var(--color-background-strong-ai);\n  color: var(--color-foreground-medium-ai);\n}\n:host(.tag--intent-negative.tag--contrast-strong) {\n  background-color: var(--color-background-strong-negative);\n  color: var(--color-foreground-medium-negative);\n}\n:host(.tag--intent-warning.tag--contrast-strong) {\n  background-color: var(--color-background-strong-warning);\n  color: var(--color-foreground-medium-warning);\n}\n:host(.tag--intent-caution.tag--contrast-strong) {\n  background-color: var(--color-background-strong-caution);\n  color: var(--color-foreground-medium-caution);\n}\n:host(.tag--intent-positive.tag--contrast-strong) {\n  background-color: var(--color-background-strong-positive);\n  color: var(--color-foreground-medium-positive);\n}\n\n/* ── Intent × Contrast — bold ───────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-bold) {\n  background-color: var(--color-background-bold-neutral);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n:host(.tag--intent-brand.tag--contrast-bold) {\n  background-color: var(--color-background-bold-brand);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n:host(.tag--intent-ai.tag--contrast-bold) {\n  background-color: var(--color-background-bold-ai);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n:host(.tag--intent-negative.tag--contrast-bold) {\n  background-color: var(--color-background-bold-negative);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n:host(.tag--intent-warning.tag--contrast-bold) {\n  background-color: var(--color-background-bold-warning);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n:host(.tag--intent-caution.tag--contrast-bold) {\n  background-color: var(--color-background-bold-caution);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n:host(.tag--intent-positive.tag--contrast-bold) {\n  background-color: var(--color-background-bold-positive);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n\n/* ── Intent × Contrast — medium ─────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-medium) {\n  background-color: var(--color-background-medium-neutral);\n  color: var(--color-foreground-strong-neutral);\n}\n:host(.tag--intent-brand.tag--contrast-medium) {\n  background-color: var(--color-background-medium-brand);\n  color: var(--color-foreground-on-medium-background-primary);\n}\n:host(.tag--intent-ai.tag--contrast-medium) {\n  background-color: var(--color-background-medium-ai);\n  color: var(--color-foreground-strong-ai);\n}\n:host(.tag--intent-negative.tag--contrast-medium) {\n  background-color: var(--color-background-medium-negative);\n  color: var(--color-foreground-strong-negative);\n}\n:host(.tag--intent-warning.tag--contrast-medium) {\n  background-color: var(--color-background-medium-warning);\n  color: var(--color-foreground-strong-warning);\n}\n:host(.tag--intent-caution.tag--contrast-medium) {\n  background-color: var(--color-background-medium-caution);\n  color: var(--color-foreground-strong-caution);\n}\n:host(.tag--intent-positive.tag--contrast-medium) {\n  background-color: var(--color-background-medium-positive);\n  color: var(--color-foreground-strong-positive);\n}\n\n/* ── Intent × Contrast — faint ──────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-faint) {\n  background-color: var(--color-background-faint-neutral);\n  color: var(--color-foreground-bold-neutral);\n}\n:host(.tag--intent-brand.tag--contrast-faint) {\n  background-color: var(--color-background-faint-brand);\n  color: var(--color-foreground-bold-brand);\n}\n:host(.tag--intent-ai.tag--contrast-faint) {\n  background-color: var(--color-background-faint-ai);\n  color: var(--color-foreground-bold-ai);\n}\n:host(.tag--intent-negative.tag--contrast-faint) {\n  background-color: var(--color-background-faint-negative);\n  color: var(--color-foreground-bold-negative);\n}\n:host(.tag--intent-warning.tag--contrast-faint) {\n  background-color: var(--color-background-faint-warning);\n  color: var(--color-foreground-bold-warning);\n}\n:host(.tag--intent-caution.tag--contrast-faint) {\n  background-color: var(--color-background-faint-caution);\n  color: var(--color-foreground-bold-caution);\n}\n:host(.tag--intent-positive.tag--contrast-faint) {\n  background-color: var(--color-background-faint-positive);\n  color: var(--color-foreground-bold-positive);\n}\n\n/* ── Interactive menu trigger ───────────────────────────────────────────── */\n\n:host(.tag--interactive) {\n  padding: 0;\n  gap: 0;\n}\n\n.tag__button {\n  all: unset;\n  position: relative;\n  z-index: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  min-width: 0;\n  max-width: 100%;\n  height: 100%;\n  padding: 0 var(--ds-control-padding-inline);\n  gap: var(--ds-control-gap);\n  border-radius: inherit;\n  color: inherit;\n  cursor: default;\n}\n\n.tag__button:disabled {\n  cursor: not-allowed;\n}\n\n/* Hover/press wash stays above the Tag's semantic background. */\n\n/* ── Icons ──────────────────────────────────────────────────────────────── */\n\n.tag__prefix-icon,\n.tag__suffix-icon {\n  position: relative;\n  z-index: 2;\n  display: inline-flex;\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -588,7 +588,7 @@
   "files": [
     {
       "path": "src/wc/components/Textarea/Textarea.css",
-      "content": "@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-width.css';\n@import '../../utils/field-stack.css';\n@import '../../utils/typography.css';\n@import '../../utils/forced-colors.css';\n\n:host(.textarea-host) {\n  display: inline-flex;\n  --ds-textarea-fg: var(--color-foreground-primary);\n  --ds-textarea-placeholder: var(--color-foreground-secondary);\n  --ds-textarea-placeholder-active: var(--color-foreground-quaternary);\n  --ds-textarea-border: var(--color-border-secondary);\n}\n\n:host(.ds-control-width--fill),\n:host(.ds-control-width--fill) .textarea-control {\n  width: 100%;\n}\n\n.textarea-control {\n  display: flex;\n  box-sizing: border-box;\n  min-width: 0;\n  overflow: hidden;\n  background: transparent;\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  color: var(--ds-textarea-fg);\n}\n\n.textarea-control--resizable {\n  padding-block-end: var(--dimension-space-025);\n  padding-inline-end: var(--dimension-space-025);\n}\n\n.textarea-control--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--ds-textarea-border);\n}\n\n.textarea-control--error {\n  --ds-interaction-border-width: var(--dimension-stroke-width-018);\n  --ds-interaction-border-color: var(--color-border-bold-negative);\n}\n\n.textarea-control--bordered:focus-within:not(.textarea-control--error) {\n  --ds-interaction-border-width: var(--dimension-stroke-width-018);\n  --ds-interaction-border-color: var(--color-border-bold-brand);\n}\n\n:host(.ds-control-inactive) .textarea-control::after {\n  background: transparent;\n}\n\n.native-textarea {\n  position: relative;\n  z-index: 2;\n  box-sizing: border-box;\n  min-width: 0;\n  width: 100%;\n  padding-block: var(--ds-control-padding-inline, var(--dimension-space-075));\n  padding-inline: calc(\n    var(--ds-control-padding-inline, var(--dimension-space-075)) +\n      var(--ds-control-label-inset, var(--dimension-space-025))\n  );\n  background: transparent;\n  border: none;\n  border-radius: inherit;\n  outline: none;\n  color: var(--ds-textarea-fg);\n  font-family: inherit;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.native-textarea--resize-vertical {\n  resize: vertical;\n}\n\n.native-textarea--resize-none {\n  resize: none;\n}\n\n.native-textarea:disabled {\n  cursor: not-allowed;\n}\n\n.native-textarea:read-only:not(:disabled) {\n  cursor: default;\n}\n\n.native-textarea::placeholder {\n  color: var(--ds-textarea-placeholder);\n}\n\n.native-textarea:focus::placeholder {\n  color: var(--ds-textarea-placeholder-active);\n}\n\n.error-text {\n  width: 100%;\n}\n\n@media (forced-colors: active) {\n  .textarea-control--bordered:focus-within:not(.textarea-control--error)::after {\n    outline-color: var(--ds-forced-color-selected);\n  }\n\n  .textarea-control--error::after {\n    outline-style: dashed;\n  }\n}\n",
+      "content": "@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-width.css';\n@import '../../utils/field-stack.css';\n@import '../../utils/typography.css';\n@import '../../utils/forced-colors.css';\n\n:host(.textarea-host) {\n  display: inline-flex;\n  --ds-textarea-fg: var(--color-foreground-primary);\n  --ds-textarea-placeholder: var(--color-foreground-secondary);\n  --ds-textarea-placeholder-active: var(--color-foreground-quaternary);\n  --ds-textarea-border: var(--color-border-secondary);\n}\n\n:host(.ds-control-width--fill),\n:host(.ds-control-width--fill) .textarea-control {\n  width: 100%;\n}\n\n.textarea-control {\n  display: flex;\n  box-sizing: border-box;\n  min-width: 0;\n  overflow: hidden;\n  background: transparent;\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  color: var(--ds-textarea-fg);\n}\n\n.textarea-control--resizable {\n  padding-block-end: var(--dimension-space-025);\n  padding-inline-end: var(--dimension-space-025);\n}\n\n.textarea-control--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--ds-textarea-border);\n}\n\n.textarea-control--error {\n  --ds-interaction-border-width: var(--dimension-stroke-width-018);\n  --ds-interaction-border-color: var(--color-border-bold-negative);\n}\n\n.textarea-control--bordered:focus-within:not(.textarea-control--error) {\n  --ds-interaction-border-width: var(--dimension-stroke-width-018);\n  --ds-interaction-border-color: var(--color-border-bold-brand);\n}\n\n:host(.ds-control-inactive) .textarea-control::after {\n  background: transparent;\n}\n\n.native-textarea {\n  position: relative;\n  z-index: 2;\n  box-sizing: border-box;\n  min-width: 0;\n  width: 100%;\n  padding-block: var(--ds-control-padding-inline, var(--dimension-space-075));\n  padding-inline: calc(\n    var(--ds-control-padding-inline, var(--dimension-space-075)) +\n      var(--ds-control-label-inset, var(--dimension-space-025))\n  );\n  background: transparent;\n  border: none;\n  border-radius: inherit;\n  outline: none;\n  color: var(--ds-textarea-fg);\n  font-family: inherit;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.native-textarea--resize-vertical {\n  resize: vertical;\n}\n\n.native-textarea--resize-none {\n  resize: none;\n}\n\n.native-textarea:disabled {\n  cursor: not-allowed;\n}\n\n.native-textarea:read-only:not(:disabled) {\n  cursor: default;\n}\n\n.native-textarea::placeholder {\n  color: var(--ds-textarea-placeholder);\n}\n\n.native-textarea:focus::placeholder {\n  color: var(--ds-textarea-placeholder-active);\n}\n\n.error-text {\n  width: 100%;\n}\n\n@media (forced-colors: active) {\n  .textarea-control--bordered:focus-within:not(.textarea-control--error)::after {\n    outline-color: var(--ds-forced-color-selected);\n  }\n\n  .textarea-control--error::after {\n    outline-style: dashed;\n  }\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -330,7 +330,7 @@
   "files": [
     {
       "path": "src/wc/components/Toast/Toast.css",
-      "content": "@import '../../utils/visually-hidden.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: contents;\n}\n\n.toast-region {\n  position: fixed;\n  inset: 0;\n  z-index: var(--dimension-z-index-floating);\n  pointer-events: none;\n  outline: none;\n}\n\n.toast-viewport {\n  position: absolute;\n  right: var(--dimension-space-200);\n  bottom: var(--dimension-space-200);\n  display: grid;\n  width: min(var(--dimension-card-width-sm), calc(100vw - 2 * var(--dimension-space-200)));\n}\n\n@media (max-width: 767px) {\n  :host([avoid-mobile-shell-bar]) .toast-viewport {\n    bottom: calc(\n      var(--dimension-space-200) + var(--dimension-stroke-width-012) + var(--dimension-space-100) +\n        var(--dimension-size-500) + max(var(--dimension-space-100), env(safe-area-inset-bottom))\n    );\n  }\n}\n\n.toast-positioner {\n  grid-area: 1 / 1;\n  align-self: end;\n  justify-self: center;\n  width: 100%;\n  pointer-events: auto;\n  transform: translateY(calc(-1 * var(--toast-index) * var(--dimension-space-100)));\n  transition:\n    transform var(--effect-motion-short-3),\n    width var(--effect-motion-short-3);\n}\n\n.toast-viewport:not([data-expanded]) .toast-positioner {\n  width: calc(100% - 2 * var(--toast-index) * var(--dimension-space-100));\n}\n\n.toast-viewport[data-expanded] .toast-positioner {\n  transform: translateY(calc(-1 * var(--toast-offset-y)));\n}\n\n.toast-positioner[data-limited] {\n  visibility: hidden;\n  pointer-events: none;\n}\n\n.toast-positioner--anchored {\n  position: fixed;\n  width: min(var(--dimension-card-width-sm), calc(100vw - 2 * var(--dimension-space-200)));\n  transform: none;\n}\n\n.toast-positioner--anchored[data-positioned='false'] {\n  visibility: hidden;\n}\n\n.toast-surface {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  height: var(--toast-height, auto);\n  padding: var(--dimension-space-200);\n  overflow: hidden;\n  color: var(--color-foreground-primary);\n  background-color: var(--color-background-primary);\n  border-radius: var(--dimension-radius-050);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  transform: translate(var(--toast-swipe-movement-x), var(--toast-swipe-movement-y));\n  animation: toast-enter var(--effect-motion-short-2) both;\n}\n\n.toast-positioner--ending .toast-surface {\n  animation: toast-exit var(--effect-motion-short-3) both;\n}\n\n.toast-surface--swiping {\n  transition: none;\n  user-select: none;\n}\n\n.toast-content {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  padding-inline-end: var(--dimension-size-500);\n  transition: opacity var(--effect-motion-short-3);\n}\n\n.toast-copy {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  min-height: var(--typography-lineheight-md);\n  margin-block: calc(-1 * var(--dimension-space-025));\n  gap: var(--dimension-space-050);\n}\n\n.toast-title,\n.toast-description {\n  min-width: 0;\n}\n\n.toast-action {\n  align-self: start;\n  margin-top: calc(var(--dimension-space-200) + var(--dimension-space-025));\n}\n\n.toast-close {\n  position: absolute;\n  top: var(--dimension-space-100);\n  right: var(--dimension-space-100);\n  transition: opacity var(--effect-motion-short-3);\n}\n\n.toast-viewport:not([data-expanded]) .toast-positioner[data-behind] .toast-content,\n.toast-viewport:not([data-expanded]) .toast-positioner[data-behind] .toast-close {\n  opacity: 0;\n}\n\n@keyframes toast-enter {\n  from {\n    opacity: 0;\n    transform: translateY(var(--dimension-space-100));\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes toast-exit {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .toast-positioner,\n  .toast-surface,\n  .toast-content,\n  .toast-close,\n  .toast-positioner--ending .toast-surface {\n    transition: none;\n    animation: none;\n  }\n\n  .toast-positioner--ending .toast-surface {\n    opacity: 0;\n  }\n}\n\n@media (forced-colors: active) {\n  .toast-surface {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n}\n",
+      "content": "@import '../../utils/visually-hidden.css';\n@import '../../utils/forced-colors.css';\n@import '../../utils/radius.css';\n\n:host {\n  display: contents;\n}\n\n.toast-region {\n  position: fixed;\n  inset: 0;\n  z-index: var(--dimension-z-index-floating);\n  pointer-events: none;\n  outline: none;\n}\n\n.toast-viewport {\n  position: absolute;\n  right: var(--dimension-space-200);\n  bottom: var(--dimension-space-200);\n  display: grid;\n  width: min(var(--dimension-card-width-sm), calc(100vw - 2 * var(--dimension-space-200)));\n}\n\n@media (max-width: 767px) {\n  :host([avoid-mobile-shell-bar]) .toast-viewport {\n    bottom: calc(\n      var(--dimension-space-200) + var(--dimension-stroke-width-012) + var(--dimension-space-100) +\n        var(--dimension-size-500) + max(var(--dimension-space-100), env(safe-area-inset-bottom))\n    );\n  }\n}\n\n.toast-positioner {\n  grid-area: 1 / 1;\n  align-self: end;\n  justify-self: center;\n  width: 100%;\n  pointer-events: auto;\n  transform: translateY(calc(-1 * var(--toast-index) * var(--dimension-space-100)));\n  transition:\n    transform var(--effect-motion-short-3),\n    width var(--effect-motion-short-3);\n}\n\n.toast-viewport:not([data-expanded]) .toast-positioner {\n  width: calc(100% - 2 * var(--toast-index) * var(--dimension-space-100));\n}\n\n.toast-viewport[data-expanded] .toast-positioner {\n  transform: translateY(calc(-1 * var(--toast-offset-y)));\n}\n\n.toast-positioner[data-limited] {\n  visibility: hidden;\n  pointer-events: none;\n}\n\n.toast-positioner--anchored {\n  position: fixed;\n  width: min(var(--dimension-card-width-sm), calc(100vw - 2 * var(--dimension-space-200)));\n  transform: none;\n}\n\n.toast-positioner--anchored[data-positioned='false'] {\n  visibility: hidden;\n}\n\n.toast-surface {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  height: var(--toast-height, auto);\n  padding: var(--dimension-space-200);\n  overflow: hidden;\n  color: var(--color-foreground-primary);\n  background-color: var(--color-background-primary);\n  border-radius: var(--ds-radius-modal);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  transform: translate(var(--toast-swipe-movement-x), var(--toast-swipe-movement-y));\n  animation: toast-enter var(--effect-motion-short-2) both;\n}\n\n.toast-positioner--ending .toast-surface {\n  animation: toast-exit var(--effect-motion-short-3) both;\n}\n\n.toast-surface--swiping {\n  transition: none;\n  user-select: none;\n}\n\n.toast-content {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  padding-inline-end: var(--dimension-size-500);\n  transition: opacity var(--effect-motion-short-3);\n}\n\n.toast-copy {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  min-height: var(--typography-lineheight-md);\n  margin-block: calc(-1 * var(--dimension-space-025));\n  gap: var(--dimension-space-050);\n}\n\n.toast-title,\n.toast-description {\n  min-width: 0;\n}\n\n.toast-action {\n  align-self: start;\n  margin-top: calc(var(--dimension-space-200) + var(--dimension-space-025));\n}\n\n.toast-close {\n  position: absolute;\n  top: var(--dimension-space-100);\n  right: var(--dimension-space-100);\n  transition: opacity var(--effect-motion-short-3);\n}\n\n.toast-viewport:not([data-expanded]) .toast-positioner[data-behind] .toast-content,\n.toast-viewport:not([data-expanded]) .toast-positioner[data-behind] .toast-close {\n  opacity: 0;\n}\n\n@keyframes toast-enter {\n  from {\n    opacity: 0;\n    transform: translateY(var(--dimension-space-100));\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes toast-exit {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .toast-positioner,\n  .toast-surface,\n  .toast-content,\n  .toast-close,\n  .toast-positioner--ending .toast-surface {\n    transition: none;\n    animation: none;\n  }\n\n  .toast-positioner--ending .toast-surface {\n    opacity: 0;\n  }\n}\n\n@media (forced-colors: active) {\n  .toast-surface {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -248,7 +248,7 @@
   "files": [
     {
       "path": "src/wc/components/TooltipChart/TooltipChart.css",
-      "content": "@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  position: absolute;\n  z-index: var(--dimension-z-index-tooltip);\n  background-color: var(--color-translucent-translucent);\n  backdrop-filter: blur(var(--effect-blur-md));\n  -webkit-backdrop-filter: blur(var(--effect-blur-md));\n  border-radius: var(--dimension-radius-075);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n}\n\n:host(.tooltip-chart--visible) {\n  animation: tooltip-chart-fade-in var(--effect-motion-short-2) forwards;\n}\n\n.tooltip-chart__item {\n  width: 100%;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n}\n\n.tooltip-chart__items {\n  display: contents;\n}\n\n.tooltip-chart__swatch-box {\n  pointer-events: none;\n}\n\n.tooltip-chart__swatch {\n  width: var(--dimension-size-100);\n  height: var(--dimension-size-100);\n  flex: none;\n  border-radius: var(--dimension-radius-half);\n  background: var(--ds-tooltip-chart-swatch);\n}\n\n.tooltip-chart__value {\n  margin-inline-start: auto;\n  text-align: end;\n}\n\n.tooltip-chart__label,\n.tooltip-chart__value {\n  flex: none;\n}\n\n@keyframes tooltip-chart-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host(.tooltip-chart--visible) {\n    animation: none;\n    opacity: 1;\n  }\n}\n\n@media (forced-colors: active) {\n  :host {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n}\n",
+      "content": "@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  position: absolute;\n  z-index: var(--dimension-z-index-tooltip);\n  background-color: var(--color-translucent-translucent);\n  backdrop-filter: blur(var(--effect-blur-md));\n  -webkit-backdrop-filter: blur(var(--effect-blur-md));\n  border-radius: var(--ds-radius-tooltip-menu);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n}\n\n:host(.tooltip-chart--visible) {\n  animation: tooltip-chart-fade-in var(--effect-motion-short-2) forwards;\n}\n\n.tooltip-chart__item {\n  width: 100%;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n}\n\n.tooltip-chart__items {\n  display: contents;\n}\n\n.tooltip-chart__swatch-box {\n  pointer-events: none;\n}\n\n.tooltip-chart__swatch {\n  width: var(--dimension-size-100);\n  height: var(--dimension-size-100);\n  flex: none;\n  border-radius: var(--dimension-radius-half);\n  background: var(--ds-tooltip-chart-swatch);\n}\n\n.tooltip-chart__value {\n  margin-inline-start: auto;\n  text-align: end;\n}\n\n.tooltip-chart__label,\n.tooltip-chart__value {\n  flex: none;\n}\n\n@keyframes tooltip-chart-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host(.tooltip-chart--visible) {\n    animation: none;\n    opacity: 1;\n  }\n}\n\n@media (forced-colors: active) {\n  :host {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -378,7 +378,7 @@
   "files": [
     {
       "path": "src/wc/components/Tooltip/Tooltip.css",
-      "content": "@import '../../utils/control-density.css';\n@import '../../utils/key-hint.css';\n@import '../../utils/forced-colors.css';\n\n.tooltip-popup {\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  box-shadow: var(--effect-elevation-elevated-floating);\n  white-space: nowrap;\n  pointer-events: none;\n  animation: tooltipFadeIn var(--effect-motion-short-2) forwards;\n  will-change: transform;\n  backface-visibility: hidden;\n}\n\n/* Warm handoff between nearby triggers — no enter fade (avoids 20–100ms lag). */\n.tooltip-popup--instant {\n  animation: none;\n  opacity: 1;\n}\n\n.tooltip-popup--closing {\n  animation: tooltipFadeOut var(--effect-motion-short-3) forwards;\n}\n\n/* Density: md / sm / xs via `.ds-control--*` on `.tooltip-inner`. */\n.tooltip-inner {\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  display: flex;\n  align-items: center;\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n}\n\n/*\n * Label layout lives on ds-text (metric-box + control label-inset).\n * NOTE: Stencil scopes this to `ds-text.sc-ds-tooltip`, but portaled\n * createElement ds-text loses that class when Text's <Host class> renders.\n * `renderPopupContent` therefore also sets these as inline styles.\n */\n.tooltip-inner > ds-text {\n  flex-shrink: 0;\n  min-width: max-content;\n  max-width: none;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  color: var(--color-foreground-primary);\n}\n\n.tooltip-popup--wrap {\n  white-space: normal;\n  max-inline-size: var(--dimension-panel-width-xs);\n}\n\n.tooltip-popup--wrap .tooltip-inner {\n  height: auto;\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n  padding-block: var(--dimension-space-050);\n  align-items: flex-start;\n}\n\n.tooltip-popup--wrap .tooltip-inner > ds-text {\n  flex: 1 1 auto;\n  min-width: 0;\n  max-width: 100%;\n  white-space: pre-line;\n}\n\n@keyframes tooltipFadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes tooltipFadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tooltip-popup,\n  .tooltip-popup--instant {\n    animation: none;\n    opacity: 1;\n  }\n\n  .tooltip-popup--closing {\n    animation: none;\n    opacity: 0;\n  }\n}\n\n@media (forced-colors: active) {\n  .tooltip-popup {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n}\n",
+      "content": "@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/key-hint.css';\n@import '../../utils/forced-colors.css';\n\n.tooltip-popup {\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  border-radius: var(--ds-radius-tooltip-control, var(--dimension-radius-025));\n  box-shadow: var(--effect-elevation-elevated-floating);\n  white-space: nowrap;\n  pointer-events: none;\n  animation: tooltipFadeIn var(--effect-motion-short-2) forwards;\n  will-change: transform;\n  backface-visibility: hidden;\n}\n\n/* Warm handoff between nearby triggers — no enter fade (avoids 20–100ms lag). */\n.tooltip-popup--instant {\n  animation: none;\n  opacity: 1;\n}\n\n.tooltip-popup--closing {\n  animation: tooltipFadeOut var(--effect-motion-short-3) forwards;\n}\n\n/* Density: md / sm / xs via `.ds-control--*` on `.tooltip-inner`. */\n.tooltip-inner {\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  display: flex;\n  align-items: center;\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n}\n\n/*\n * Label layout lives on ds-text (metric-box + control label-inset).\n * NOTE: Stencil scopes this to `ds-text.sc-ds-tooltip`, but portaled\n * createElement ds-text loses that class when Text's <Host class> renders.\n * `renderPopupContent` therefore also sets these as inline styles.\n */\n.tooltip-inner > ds-text {\n  flex-shrink: 0;\n  min-width: max-content;\n  max-width: none;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  color: var(--color-foreground-primary);\n}\n\n.tooltip-popup--wrap {\n  white-space: normal;\n  max-inline-size: var(--dimension-panel-width-xs);\n}\n\n.tooltip-popup--wrap .tooltip-inner {\n  height: auto;\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n  padding-block: var(--dimension-space-050);\n  align-items: flex-start;\n}\n\n.tooltip-popup--wrap .tooltip-inner > ds-text {\n  flex: 1 1 auto;\n  min-width: 0;\n  max-width: 100%;\n  white-space: pre-line;\n}\n\n@keyframes tooltipFadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes tooltipFadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tooltip-popup,\n  .tooltip-popup--instant {\n    animation: none;\n    opacity: 1;\n  }\n\n  .tooltip-popup--closing {\n    animation: none;\n    opacity: 0;\n  }\n}\n\n@media (forced-colors: active) {\n  .tooltip-popup {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n}\n",
       "type": "registry:ui"
     },
     {

package/dist/react/components.d.ts

@@ -13,6 +13,7 @@ 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 { DsBarPageTitle } from "./ds-bar-page-title.js";
 export { DsBarTitle } from "./ds-bar-title.js";
 export { DsBarWorkflow } from "./ds-bar-workflow.js";
 export { DsBreadcrumb } from "./ds-breadcrumb.js";

package/dist/react/components.js

@@ -14,6 +14,7 @@ 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 { DsBarPageTitle } from "./ds-bar-page-title.js";
 export { DsBarTitle } from "./ds-bar-title.js";
 export { DsBarWorkflow } from "./ds-bar-workflow.js";
 export { DsBreadcrumb } from "./ds-breadcrumb.js";

package/dist/react/ds-bar-page-title.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 DsBarPageTitleCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsBarPageTitle as DsBarPageTitleElement } from "@ds-mo/ui/dist/components/ds-bar-page-title.js";
+export type DsBarPageTitleEvents = {
+    onDsBack: EventName<DsBarPageTitleCustomEvent<MouseEvent>>;
+    onDsSectionChange: EventName<DsBarPageTitleCustomEvent<string>>;
+    onDsAction: EventName<DsBarPageTitleCustomEvent<string>>;
+};
+export declare const DsBarPageTitle: StencilReactComponent<DsBarPageTitleElement, DsBarPageTitleEvents, Components.DsBarPageTitle, 'heading'>;

package/dist/react/ds-bar-page-title.js

@@ -0,0 +1,16 @@
+'use client';
+import { createComponent } from './react-runtime.js';
+import React from 'react';
+import { DsBarPageTitle as DsBarPageTitleElement, defineCustomElement as defineDsBarPageTitle } from "@ds-mo/ui/dist/components/ds-bar-page-title.js";
+export const DsBarPageTitle = /*@__PURE__*/ createComponent({
+    tagName: 'ds-bar-page-title',
+    elementClass: DsBarPageTitleElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsBack: 'dsBack',
+        onDsSectionChange: 'dsSectionChange',
+        onDsAction: 'dsAction'
+    },
+    defineCustomElement: defineDsBarPageTitle
+});

package/dist/styles/table.css

@@ -43,7 +43,7 @@
   --_table-column-border: var(--ds-table-column-border, var(--color-border-tertiary));
   --_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-radius: var(--ds-table-radius, var(--ds-radius-table, var(--dimension-radius-050)));
   --_table-header-min-block-size: var(--ds-table-header-min-block-size, var(--dimension-size-400));
   --_table-row-min-block-size: var(--ds-table-row-min-block-size, var(--dimension-size-500));
   --_table-cell-padding-block: var(--ds-table-cell-padding-block, var(--dimension-space-100));
@@ -1072,16 +1072,26 @@
  * 8px padding) at 16:9. Each track is 24px with no stack gap.
  */
 :where(.ds-table__cell-image) {
+  position: relative;
   display: block;
   box-sizing: border-box;
   flex: none;
   block-size: var(--_table-image-block-size);
   aspect-ratio: 16 / 9;
   overflow: hidden;
-  border: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);
   border-radius: var(--dimension-radius-025);
 }
 
+:where(.ds-table__cell-image)::after {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  border: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);
+  border-radius: inherit;
+  content: '';
+  pointer-events: none;
+}
+
 :where(.ds-table__cell--image-multi .ds-table__cell-image) {
   block-size: var(--_table-image-block-size-multi);
 }
@@ -1099,6 +1109,7 @@
 
 :where(.ds-table__cell-image-content) {
   object-fit: cover;
+  border-radius: inherit;
 }
 
 :where(.ds-table__cell--action .ds-table__cell-content) {

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

@@ -0,0 +1,124 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { BarTitleActionConfigItem, BarTitleActionItem, BarTitlePrimaryAction, BarTitleSectionItem } from '../BarTitle/bar-title-types';
+export declare class BarPageTitle {
+    private static readonly INTRINSIC_WIDTH_RETRY_MAX;
+    private static readonly TAB_LAYOUT_COMMIT_MAX_FRAMES;
+    private static readonly OVERFLOW_HYSTERESIS_PX;
+    el: HTMLElement;
+    /** The page's single visible h1. */
+    heading: string;
+    /** Show the leading page-level Back action. */
+    showBack: boolean;
+    /** Accessible name for the leading Back action. */
+    backAriaLabel: string;
+    /** Optional page sections shown as an all-or-nothing tab row, or the compact section button. */
+    sections: BarTitleSectionItem[];
+    /** Id of the active page section. */
+    value: string;
+    /** Accessible name for the page-section tablist and menu. */
+    sectionsAriaLabel: string;
+    /** The one highest-emphasis page action. */
+    primaryAction: BarTitlePrimaryAction | null;
+    /** Secondary page actions shown in the overflow menu. Dividers create groups. */
+    actions: BarTitleActionItem[];
+    /**
+     * Ordered page-header actions. When supplied, this replaces the legacy
+     * primaryAction/actions presentation while preserving the same dsAction event.
+     */
+    actionItems?: BarTitleActionConfigItem[];
+    /** Accessible name for the page-actions menu. */
+    actionsAriaLabel: string;
+    /** Draw the compact bottom divider beneath the header. */
+    showDivider: boolean;
+    /** Override divider visibility for the compact shell-bar presentation. */
+    showCompactDivider?: boolean;
+    /** Emitted when the leading Back action is activated. */
+    dsBack: EventEmitter<MouseEvent>;
+    /** Emitted with the newly selected page-section id. */
+    dsSectionChange: EventEmitter<string>;
+    /** Emitted with the activated primary or overflow action id. */
+    dsAction: EventEmitter<string>;
+    private sectionMenuOpen;
+    private openActionMenuId;
+    private surfaceActionMenuId;
+    private sectionSurfaceOpen;
+    private sectionMenuInitialFocusVisible;
+    private actionMenuInitialFocusVisible;
+    private sectionsCollapsed;
+    private layoutCommitted;
+    private focusedTabId;
+    private readonly instanceId;
+    private readonly sectionMenuTriggerId;
+    private readonly sectionMenuId;
+    private readonly actionMenuTriggerId;
+    private readonly actionMenuId;
+    private sectionTriggerEl;
+    private actionTriggerEl;
+    private actionTriggerEls;
+    private chromeEl;
+    private rowEl;
+    private probeRowEl;
+    private visibleTabListEl;
+    private resizeObserver;
+    private intrinsicWidthRetryCount;
+    private tabLayoutPendingFrames;
+    private readonly panelNavTransition;
+    private readonly panelToolsTransition;
+    private readonly overflowCoalescer;
+    private chromeTransitionShell;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    handleSectionsChange(next: BarTitleSectionItem[], prev: BarTitleSectionItem[]): void;
+    handleValueChange(): void;
+    handleLayoutInputsChange(): void;
+    private reportActionIdIssues;
+    private get dividerVisible();
+    private get selectableSections();
+    private get hasSectionSelector();
+    private get sectionTabs();
+    private get selectableTabs();
+    private get effectiveValue();
+    private get selectedSectionLabel();
+    private get sectionTriggerAriaLabel();
+    private get sectionMenuSections();
+    private get resolvedActionItems();
+    private get visibleActions();
+    private get actionMenuSections();
+    private get showActionMenuTrigger();
+    private get availableActionMenuIds();
+    private get showSectionTabs();
+    private get showSectionButton();
+    private resetSectionLayout;
+    private bindChromeTransitionListeners;
+    private unbindChromeTransitionListeners;
+    private onChromeTransitionStart;
+    private chromeOverflowPaused;
+    private onChromeTransitionEnd;
+    private setupOverflowObserver;
+    private scheduleOverflowCheck;
+    private scheduleIntrinsicWidthRetry;
+    private forceTabLayoutCommit;
+    private getAvailableWidth;
+    private updateSectionsCollapsed;
+    private syncFocusedTabId;
+    private selectSection;
+    private toggleSectionMenu;
+    private closeSectionMenu;
+    private handleSectionSelect;
+    private toggleActionMenu;
+    private finishActionMenuClose;
+    private closeActionMenu;
+    private handleActionSelect;
+    private focusVisibleTab;
+    private findEnabledTab;
+    private handleTabKeyDown;
+    private chromeActionOptions;
+    private renderHeading;
+    private renderTabList;
+    private renderIdentity;
+    private renderSectionRegion;
+    render(): any;
+}
+//# sourceMappingURL=BarPageTitle.d.ts.map

package/dist/types/components/BarPageTitle/index.d.ts

@@ -0,0 +1,2 @@
+export type { BarTitleActionConfigItem, BarTitleActionItem, BarTitlePrimaryAction, BarTitleSectionItem, } from '../BarTitle/bar-title-types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -72,24 +72,18 @@ export declare class BarTitle {
     private get effectiveVariant();
     private get dividerVisible();
     private get expandedBreadcrumbItems();
-    /** Tooltip copy is fixed and generic; backAriaLabel/actionsAriaLabel stay page-specific. */
-    private get backTooltipLabel();
     private get primaryCollapsed();
     private get selectableSections();
     private get hasSectionSelector();
     private get effectiveValue();
     private get selectedSectionLabel();
     private get sectionTriggerAriaLabel();
-    private groupsFromSections;
     private get sectionMenuSections();
     private get resolvedActionItems();
     private get visibleActions();
     private get actionMenuSections();
     private get showActionMenuTrigger();
     private get availableActionMenuIds();
-    private actionMenuDomId;
-    private actionMenuAnchor;
-    private menuSectionsForAction;
     private toggleSectionMenu;
     private closeSectionMenu;
     private handleSectionSelect;
@@ -97,8 +91,8 @@ export declare class BarTitle {
     private finishActionMenuClose;
     private closeActionMenu;
     private handleActionSelect;
+    private chromeActionOptions;
     private renderSectionSelector;
-    private renderVisibleAction;
     private renderActions;
     private renderActionMenus;
     private handleBreadcrumbSelect;