@ds-mo/ui 14.33.2 → 14.34.0

package/dist/docs/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-09-09T15:24:36",
+  "timestamp": "2026-09-09T16:52:59",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",

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

@@ -10189,7 +10189,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 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.",
+            "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. For a compact ordered set of tags that must remain together on the primary track, choose the inline multiple-tag variation, optionally with supporting text below. Slash separators distinguish adjacent tags; labels truncate as the column narrows. Use wrapping tags when all labels must remain visible. 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.",
             "While any checkbox selection is active, row activation toggles selection instead of opening details. Clearing the selection restores ordinary row activation. Nested controls retain their own intent, and disabled or non-selectable rows cannot be selected by activating their row.",

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

@@ -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 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.",
+        "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. For a compact ordered set of tags that must remain together on the primary track, choose the inline multiple-tag variation, optionally with supporting text below. Slash separators distinguish adjacent tags; labels truncate as the column narrows. Use wrapping tags when all labels must remain visible. 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.",
         "While any checkbox selection is active, row activation toggles selection instead of opening details. Clearing the selection restores ordinary row activation. Nested controls retain their own intent, and disabled or non-selectable rows cannot be selected by activating their row.",
@@ -1380,7 +1380,7 @@
     },
     {
       "path": "src/wc/components/Table/table-cell-model.ts",
-      "content": "import {\n  isTableCellAction,\n  isTableCellBlank,\n  isTableCellEmpty,\n  isTableCellIcon,\n  isTableCellIconText,\n  isTableCellScoreText,\n  isTableCellImage,\n  isTableCellPrimaryText,\n  isTableCellTag,\n  isTableCellTags,\n  isTableCellText,\n} from './table-model';\nimport type {\n  TableCellAction,\n  TableCellBlank,\n  TableCellEmpty,\n  TableCellIcon,\n  TableCellImage,\n  TableCellImageTracks,\n  TableCellTag,\n  TableCellTags,\n  TableCellTagVariant,\n  TableCellTextRun,\n  TableCellTextTrack,\n  TableCellValue,\n  TableCellLinkTarget,\n  TableCellLineClamp,\n  TableCellMaxLines,\n  TableColumn,\n} from './table-types';\nimport type { IconColor } from '../Icon/Icon';\nimport type { SafetyScoreLevel } from '../Score/score-types';\nimport type { TextColor } from '../Text/text-types';\n\n/** Maximum independently colored runs on one secondary or tertiary track. */\nexport const TABLE_CELL_TEXT_RUN_LIMIT = 3;\n\nexport interface ResolvedTableCellText {\n  primary: string | number;\n  secondary?: TableCellTextRun[];\n  tertiary?: TableCellTextRun[];\n  secondaryColor?: TextColor;\n  tertiaryColor?: TextColor;\n  href?: string;\n  target?: TableCellLinkTarget;\n  wrap?: boolean;\n  fontFeature?: 'normal' | 'tabular-nums';\n}\n\nexport type TableCellPresentation =\n  | { kind: 'blank'; cellType: 'blank'; value: TableCellBlank }\n  | { kind: 'empty'; cellType: 'empty'; value: TableCellEmpty | null | undefined }\n  | { kind: 'icon'; cellType: 'icon'; value: TableCellIcon }\n  | {\n      kind: 'icon-text';\n      cellType: 'icon-text';\n      icon: string;\n      iconColor?: IconColor;\n      iconLabel?: string;\n      value: ResolvedTableCellText;\n      variant: 'single' | 'multi' | 'triple';\n      wraps: boolean;\n      lineClamp: TableCellLineClamp;\n    }\n  | {\n      kind: 'score-text';\n      cellType: 'score-text';\n      score: string | number;\n      scoreLevel?: SafetyScoreLevel;\n      scoreLabel: string;\n      scoreLoading: boolean;\n      value: ResolvedTableCellText;\n      variant: 'single' | 'multi' | 'triple';\n      wraps: boolean;\n      lineClamp: TableCellLineClamp;\n    }\n  | {\n      kind: 'image';\n      cellType: 'image';\n      value: TableCellImage;\n      variant: 'single' | 'multi' | 'triple';\n    }\n  | { kind: 'action'; cellType: 'action'; value: TableCellAction }\n  | {\n      kind: 'tag';\n      cellType: 'tag';\n      value: TableCellTag;\n      variant: TableCellTagVariant;\n    }\n  | {\n      kind: 'tags';\n      cellType: 'tags';\n      value: TableCellTags;\n      tracks: number;\n      variant: `${number}-track`;\n    }\n  | {\n      kind: 'text';\n      cellType: 'text' | 'primary-text';\n      value: ResolvedTableCellText;\n      primaryText: boolean;\n      singleLine: boolean;\n      variant: 'single' | 'multi' | 'triple' | 'primary-pair';\n      wraps: boolean;\n      lineClamp: TableCellLineClamp;\n    };\n\nfunction trackText(value: string | number | TableCellTextRun): string | undefined {\n  if (typeof value === 'string' || typeof value === 'number') {\n    const text = String(value);\n    return text.trim() === '' ? undefined : text;\n  }\n  const text = value.text?.trim();\n  return text ? value.text : undefined;\n}\n\n/** Resolve an image cell's track stack; unknown values fall back to one track. */\nexport function resolveTableCellImageTracks(\n  tracks: TableCellImage['tracks']\n): TableCellImageTracks {\n  return tracks === 2 || tracks === 3 ? tracks : 1;\n}\n\n/** Map an image track stack onto the shared single/multi/triple cell variant. */\nexport function tableCellImageVariant(tracks: TableCellImageTracks): 'single' | 'multi' | 'triple' {\n  return tracks === 3 ? 'triple' : tracks === 2 ? 'multi' : 'single';\n}\n\n/** Normalize the declared line count used by wrapping multiple-Tag cells. */\nexport function resolveTableCellTagsTracks(tracks: number): number {\n  return Number.isFinite(tracks) && tracks > 0 ? Math.floor(tracks) : 1;\n}\n\n/** Token-backed content height for any named number of body-row tracks. */\nexport function tableCellTrackStackBlockSize(tracks: number): string {\n  const count = resolveTableCellTagsTracks(tracks);\n  return `calc(${count} * var(--_table-cell-track-min-block-size))`;\n}\n\n/** Collapse a consumer track into at most three non-empty runs. */\nexport function normalizeTableCellTextTrack(\n  track: TableCellTextTrack | number | undefined\n): TableCellTextRun[] | undefined {\n  if (track == null) return undefined;\n  const items = Array.isArray(track) ? track : [track];\n  const runs: TableCellTextRun[] = [];\n  for (const item of items) {\n    if (runs.length >= TABLE_CELL_TEXT_RUN_LIMIT) break;\n    const text = trackText(item);\n    if (text === undefined) continue;\n    const run: TableCellTextRun = { text };\n    if (typeof item === 'object' && item !== null) {\n      if ('color' in item && item.color) run.color = item.color;\n      if ('help' in item && typeof item.help === 'string' && item.help.trim()) {\n        run.help = item.help.trim();\n      }\n    }\n    runs.push(run);\n  }\n  return runs.length ? runs : undefined;\n}\n\n/** Map wrap / maxLines onto wrap-to-track geometry and a line clamp. */\nexport function resolveTableCellTextOverflow(\n  source: { wrap?: boolean; maxLines?: TableCellMaxLines },\n  column: TableColumn\n): { wraps: boolean; lineClamp: TableCellLineClamp } {\n  const wrap = source.wrap ?? column.wrap ?? false;\n  const maxLines = source.maxLines ?? (source.wrap === true ? undefined : column.maxLines);\n  if (maxLines != null) {\n    return { wraps: maxLines > 1, lineClamp: maxLines };\n  }\n  if (wrap) return { wraps: true, lineClamp: 'none' };\n  return { wraps: false, lineClamp: 1 };\n}\n\n/** ds-text overflow props for a resolved clamp. */\nexport function tableCellTextOverflowProps(lineClamp: TableCellLineClamp): {\n  lineTruncation: TableCellLineClamp;\n  wrap: 'wrap' | 'nowrap';\n} {\n  if (lineClamp === 'none') return { lineTruncation: 'none', wrap: 'wrap' };\n  if (lineClamp === 1) return { lineTruncation: 1, wrap: 'nowrap' };\n  return { lineTruncation: lineClamp, wrap: 'wrap' };\n}\n\nfunction resolveTextPresentation(\n  source: {\n    primary: string | number;\n    secondary?: TableCellTextTrack | number;\n    tertiary?: TableCellTextTrack;\n    secondaryColor?: TextColor;\n    tertiaryColor?: TextColor;\n    href?: string;\n    target?: TableCellLinkTarget;\n    wrap?: boolean;\n    maxLines?: TableCellMaxLines;\n    fontFeature?: 'normal' | 'tabular-nums';\n  },\n  column: TableColumn,\n  options: { primaryText: boolean; allowTertiary: boolean }\n): {\n  value: ResolvedTableCellText;\n  singleLine: boolean;\n  variant: 'single' | 'multi' | 'triple' | 'primary-pair';\n  wraps: boolean;\n  lineClamp: TableCellLineClamp;\n} {\n  const secondary = normalizeTableCellTextTrack(source.secondary);\n  const tertiary = options.allowTertiary ? normalizeTableCellTextTrack(source.tertiary) : undefined;\n  const value: ResolvedTableCellText = {\n    primary: source.primary,\n    ...(secondary ? { secondary } : {}),\n    ...(tertiary ? { tertiary } : {}),\n    ...(source.secondaryColor ? { secondaryColor: source.secondaryColor } : {}),\n    ...(source.tertiaryColor ? { tertiaryColor: source.tertiaryColor } : {}),\n    ...(source.href ? { href: source.href } : {}),\n    ...(source.target ? { target: source.target } : {}),\n    ...(source.wrap ? { wrap: source.wrap } : {}),\n    ...(source.fontFeature ? { fontFeature: source.fontFeature } : {}),\n  };\n  const singleLine = !options.primaryText && !secondary && !tertiary;\n  const overflow = resolveTableCellTextOverflow(source, column);\n  return {\n    value,\n    singleLine,\n    variant: options.primaryText\n      ? 'primary-pair'\n      : tertiary\n        ? 'triple'\n        : singleLine\n          ? 'single'\n          : 'multi',\n    wraps: overflow.wraps,\n    lineClamp: overflow.lineClamp,\n  };\n}\n\n/** Resolve a cell's semantic and visual recipe once for both markup and classes. */\nexport function resolveTableCellPresentation(\n  value: TableCellValue,\n  column: TableColumn\n): TableCellPresentation {\n  if (isTableCellBlank(value)) return { kind: 'blank', cellType: 'blank', value };\n  if (value == null || isTableCellEmpty(value)) {\n    return { kind: 'empty', cellType: 'empty', value };\n  }\n  if (isTableCellIcon(value)) return { kind: 'icon', cellType: 'icon', value };\n  if (isTableCellIconText(value)) {\n    const text = resolveTextPresentation(value, column, {\n      primaryText: false,\n      allowTertiary: true,\n    });\n    return {\n      kind: 'icon-text',\n      cellType: 'icon-text',\n      icon: value.icon,\n      ...(value.iconColor ? { iconColor: value.iconColor } : {}),\n      ...(value.iconLabel ? { iconLabel: value.iconLabel } : {}),\n      value: text.value,\n      variant: text.variant === 'primary-pair' ? 'single' : text.variant,\n      wraps: text.wraps,\n      lineClamp: text.lineClamp,\n    };\n  }\n  if (isTableCellScoreText(value)) {\n    const text = resolveTextPresentation(value, column, {\n      primaryText: false,\n      allowTertiary: true,\n    });\n    return {\n      kind: 'score-text',\n      cellType: 'score-text',\n      score: value.score,\n      ...(value.scoreLevel ? { scoreLevel: value.scoreLevel } : {}),\n      scoreLabel: value.scoreLabel?.trim() || 'Safety score',\n      scoreLoading: value.scoreLoading === true,\n      value: text.value,\n      variant: text.variant === 'primary-pair' ? 'single' : text.variant,\n      wraps: text.wraps,\n      lineClamp: text.lineClamp,\n    };\n  }\n  if (isTableCellImage(value)) {\n    return {\n      kind: 'image',\n      cellType: 'image',\n      value,\n      variant: tableCellImageVariant(resolveTableCellImageTracks(value.tracks)),\n    };\n  }\n  if (isTableCellAction(value)) return { kind: 'action', cellType: 'action', value };\n  if (isTableCellTag(value)) {\n    return {\n      kind: 'tag',\n      cellType: 'tag',\n      value,\n      variant: value.variant ?? 'tag-only',\n    };\n  }\n  if (isTableCellTags(value)) {\n    const tracks = resolveTableCellTagsTracks(value.tracks);\n    return {\n      kind: 'tags',\n      cellType: 'tags',\n      value,\n      tracks,\n      variant: `${tracks}-track`,\n    };\n  }\n\n  const primaryText = isTableCellPrimaryText(value);\n  const source =\n    isTableCellText(value) || primaryText\n      ? value\n      : {\n          primary: value,\n          fontFeature: typeof value === 'number' ? ('tabular-nums' as const) : ('normal' as const),\n        };\n  const text = resolveTextPresentation(isTableCellText(value) ? value : source, column, {\n    primaryText,\n    allowTertiary: isTableCellText(value),\n  });\n  return {\n    kind: 'text',\n    cellType: primaryText ? 'primary-text' : 'text',\n    value: text.value,\n    primaryText,\n    singleLine: text.singleLine,\n    variant: text.variant,\n    wraps: text.wraps,\n    lineClamp: text.lineClamp,\n  };\n}\n",
+      "content": "import {\n  isTableCellAction,\n  isTableCellBlank,\n  isTableCellEmpty,\n  isTableCellIcon,\n  isTableCellIconText,\n  isTableCellScoreText,\n  isTableCellImage,\n  isTableCellPrimaryText,\n  isTableCellTag,\n  isTableCellTags,\n  isTableCellText,\n} from './table-model';\nimport type {\n  TableCellAction,\n  TableCellBlank,\n  TableCellEmpty,\n  TableCellIcon,\n  TableCellImage,\n  TableCellImageTracks,\n  TableCellTag,\n  TableCellTags,\n  TableCellTagVariant,\n  TableCellTextRun,\n  TableCellTextTrack,\n  TableCellValue,\n  TableCellLinkTarget,\n  TableCellLineClamp,\n  TableCellMaxLines,\n  TableColumn,\n} from './table-types';\nimport type { IconColor } from '../Icon/Icon';\nimport type { SafetyScoreLevel } from '../Score/score-types';\nimport type { TextColor } from '../Text/text-types';\n\n/** Maximum independently colored runs on one secondary or tertiary track. */\nexport const TABLE_CELL_TEXT_RUN_LIMIT = 3;\n\nexport interface ResolvedTableCellText {\n  primary: string | number;\n  secondary?: TableCellTextRun[];\n  tertiary?: TableCellTextRun[];\n  secondaryColor?: TextColor;\n  tertiaryColor?: TextColor;\n  href?: string;\n  target?: TableCellLinkTarget;\n  wrap?: boolean;\n  fontFeature?: 'normal' | 'tabular-nums';\n}\n\nexport type TableCellPresentation =\n  | { kind: 'blank'; cellType: 'blank'; value: TableCellBlank }\n  | { kind: 'empty'; cellType: 'empty'; value: TableCellEmpty | null | undefined }\n  | { kind: 'icon'; cellType: 'icon'; value: TableCellIcon }\n  | {\n      kind: 'icon-text';\n      cellType: 'icon-text';\n      icon: string;\n      iconColor?: IconColor;\n      iconLabel?: string;\n      value: ResolvedTableCellText;\n      variant: 'single' | 'multi' | 'triple';\n      wraps: boolean;\n      lineClamp: TableCellLineClamp;\n    }\n  | {\n      kind: 'score-text';\n      cellType: 'score-text';\n      score: string | number;\n      scoreLevel?: SafetyScoreLevel;\n      scoreLabel: string;\n      scoreLoading: boolean;\n      value: ResolvedTableCellText;\n      variant: 'single' | 'multi' | 'triple';\n      wraps: boolean;\n      lineClamp: TableCellLineClamp;\n    }\n  | {\n      kind: 'image';\n      cellType: 'image';\n      value: TableCellImage;\n      variant: 'single' | 'multi' | 'triple';\n    }\n  | { kind: 'action'; cellType: 'action'; value: TableCellAction }\n  | {\n      kind: 'tag';\n      cellType: 'tag';\n      value: TableCellTag;\n      variant: TableCellTagVariant;\n    }\n  | {\n      kind: 'tags';\n      cellType: 'tags';\n      value: TableCellTags;\n      tracks: number;\n      variant: `${number}-track` | 'inline';\n    }\n  | {\n      kind: 'text';\n      cellType: 'text' | 'primary-text';\n      value: ResolvedTableCellText;\n      primaryText: boolean;\n      singleLine: boolean;\n      variant: 'single' | 'multi' | 'triple' | 'primary-pair';\n      wraps: boolean;\n      lineClamp: TableCellLineClamp;\n    };\n\nfunction trackText(value: string | number | TableCellTextRun): string | undefined {\n  if (typeof value === 'string' || typeof value === 'number') {\n    const text = String(value);\n    return text.trim() === '' ? undefined : text;\n  }\n  const text = value.text?.trim();\n  return text ? value.text : undefined;\n}\n\n/** Resolve an image cell's track stack; unknown values fall back to one track. */\nexport function resolveTableCellImageTracks(\n  tracks: TableCellImage['tracks']\n): TableCellImageTracks {\n  return tracks === 2 || tracks === 3 ? tracks : 1;\n}\n\n/** Map an image track stack onto the shared single/multi/triple cell variant. */\nexport function tableCellImageVariant(tracks: TableCellImageTracks): 'single' | 'multi' | 'triple' {\n  return tracks === 3 ? 'triple' : tracks === 2 ? 'multi' : 'single';\n}\n\n/** Normalize the declared line count used by wrapping multiple-Tag cells. */\nexport function resolveTableCellTagsTracks(tracks: number): number {\n  return Number.isFinite(tracks) && tracks > 0 ? Math.floor(tracks) : 1;\n}\n\n/** Token-backed content height for any named number of body-row tracks. */\nexport function tableCellTrackStackBlockSize(tracks: number): string {\n  const count = resolveTableCellTagsTracks(tracks);\n  return `calc(${count} * var(--_table-cell-track-min-block-size))`;\n}\n\n/** Collapse a consumer track into at most three non-empty runs. */\nexport function normalizeTableCellTextTrack(\n  track: TableCellTextTrack | number | undefined\n): TableCellTextRun[] | undefined {\n  if (track == null) return undefined;\n  const items = Array.isArray(track) ? track : [track];\n  const runs: TableCellTextRun[] = [];\n  for (const item of items) {\n    if (runs.length >= TABLE_CELL_TEXT_RUN_LIMIT) break;\n    const text = trackText(item);\n    if (text === undefined) continue;\n    const run: TableCellTextRun = { text };\n    if (typeof item === 'object' && item !== null) {\n      if ('color' in item && item.color) run.color = item.color;\n      if ('help' in item && typeof item.help === 'string' && item.help.trim()) {\n        run.help = item.help.trim();\n      }\n    }\n    runs.push(run);\n  }\n  return runs.length ? runs : undefined;\n}\n\n/** Map wrap / maxLines onto wrap-to-track geometry and a line clamp. */\nexport function resolveTableCellTextOverflow(\n  source: { wrap?: boolean; maxLines?: TableCellMaxLines },\n  column: TableColumn\n): { wraps: boolean; lineClamp: TableCellLineClamp } {\n  const wrap = source.wrap ?? column.wrap ?? false;\n  const maxLines = source.maxLines ?? (source.wrap === true ? undefined : column.maxLines);\n  if (maxLines != null) {\n    return { wraps: maxLines > 1, lineClamp: maxLines };\n  }\n  if (wrap) return { wraps: true, lineClamp: 'none' };\n  return { wraps: false, lineClamp: 1 };\n}\n\n/** ds-text overflow props for a resolved clamp. */\nexport function tableCellTextOverflowProps(lineClamp: TableCellLineClamp): {\n  lineTruncation: TableCellLineClamp;\n  wrap: 'wrap' | 'nowrap';\n} {\n  if (lineClamp === 'none') return { lineTruncation: 'none', wrap: 'wrap' };\n  if (lineClamp === 1) return { lineTruncation: 1, wrap: 'nowrap' };\n  return { lineTruncation: lineClamp, wrap: 'wrap' };\n}\n\nfunction resolveTextPresentation(\n  source: {\n    primary: string | number;\n    secondary?: TableCellTextTrack | number;\n    tertiary?: TableCellTextTrack;\n    secondaryColor?: TextColor;\n    tertiaryColor?: TextColor;\n    href?: string;\n    target?: TableCellLinkTarget;\n    wrap?: boolean;\n    maxLines?: TableCellMaxLines;\n    fontFeature?: 'normal' | 'tabular-nums';\n  },\n  column: TableColumn,\n  options: { primaryText: boolean; allowTertiary: boolean }\n): {\n  value: ResolvedTableCellText;\n  singleLine: boolean;\n  variant: 'single' | 'multi' | 'triple' | 'primary-pair';\n  wraps: boolean;\n  lineClamp: TableCellLineClamp;\n} {\n  const secondary = normalizeTableCellTextTrack(source.secondary);\n  const tertiary = options.allowTertiary ? normalizeTableCellTextTrack(source.tertiary) : undefined;\n  const value: ResolvedTableCellText = {\n    primary: source.primary,\n    ...(secondary ? { secondary } : {}),\n    ...(tertiary ? { tertiary } : {}),\n    ...(source.secondaryColor ? { secondaryColor: source.secondaryColor } : {}),\n    ...(source.tertiaryColor ? { tertiaryColor: source.tertiaryColor } : {}),\n    ...(source.href ? { href: source.href } : {}),\n    ...(source.target ? { target: source.target } : {}),\n    ...(source.wrap ? { wrap: source.wrap } : {}),\n    ...(source.fontFeature ? { fontFeature: source.fontFeature } : {}),\n  };\n  const singleLine = !options.primaryText && !secondary && !tertiary;\n  const overflow = resolveTableCellTextOverflow(source, column);\n  return {\n    value,\n    singleLine,\n    variant: options.primaryText\n      ? 'primary-pair'\n      : tertiary\n        ? 'triple'\n        : singleLine\n          ? 'single'\n          : 'multi',\n    wraps: overflow.wraps,\n    lineClamp: overflow.lineClamp,\n  };\n}\n\n/** Resolve a cell's semantic and visual recipe once for both markup and classes. */\nexport function resolveTableCellPresentation(\n  value: TableCellValue,\n  column: TableColumn\n): TableCellPresentation {\n  if (isTableCellBlank(value)) return { kind: 'blank', cellType: 'blank', value };\n  if (value == null || isTableCellEmpty(value)) {\n    return { kind: 'empty', cellType: 'empty', value };\n  }\n  if (isTableCellIcon(value)) return { kind: 'icon', cellType: 'icon', value };\n  if (isTableCellIconText(value)) {\n    const text = resolveTextPresentation(value, column, {\n      primaryText: false,\n      allowTertiary: true,\n    });\n    return {\n      kind: 'icon-text',\n      cellType: 'icon-text',\n      icon: value.icon,\n      ...(value.iconColor ? { iconColor: value.iconColor } : {}),\n      ...(value.iconLabel ? { iconLabel: value.iconLabel } : {}),\n      value: text.value,\n      variant: text.variant === 'primary-pair' ? 'single' : text.variant,\n      wraps: text.wraps,\n      lineClamp: text.lineClamp,\n    };\n  }\n  if (isTableCellScoreText(value)) {\n    const text = resolveTextPresentation(value, column, {\n      primaryText: false,\n      allowTertiary: true,\n    });\n    return {\n      kind: 'score-text',\n      cellType: 'score-text',\n      score: value.score,\n      ...(value.scoreLevel ? { scoreLevel: value.scoreLevel } : {}),\n      scoreLabel: value.scoreLabel?.trim() || 'Safety score',\n      scoreLoading: value.scoreLoading === true,\n      value: text.value,\n      variant: text.variant === 'primary-pair' ? 'single' : text.variant,\n      wraps: text.wraps,\n      lineClamp: text.lineClamp,\n    };\n  }\n  if (isTableCellImage(value)) {\n    return {\n      kind: 'image',\n      cellType: 'image',\n      value,\n      variant: tableCellImageVariant(resolveTableCellImageTracks(value.tracks)),\n    };\n  }\n  if (isTableCellAction(value)) return { kind: 'action', cellType: 'action', value };\n  if (isTableCellTag(value)) {\n    return {\n      kind: 'tag',\n      cellType: 'tag',\n      value,\n      variant: value.variant ?? 'tag-only',\n    };\n  }\n  if (isTableCellTags(value)) {\n    const inline = value.variant === 'inline';\n    const tracks = inline ? (value.text?.trim() ? 2 : 1) : resolveTableCellTagsTracks(value.tracks);\n    return {\n      kind: 'tags',\n      cellType: 'tags',\n      value: inline ? { ...value, items: value.items.slice(0, 3) as typeof value.items } : value,\n      tracks,\n      variant: inline ? 'inline' : `${tracks}-track`,\n    };\n  }\n\n  const primaryText = isTableCellPrimaryText(value);\n  const source =\n    isTableCellText(value) || primaryText\n      ? value\n      : {\n          primary: value,\n          fontFeature: typeof value === 'number' ? ('tabular-nums' as const) : ('normal' as const),\n        };\n  const text = resolveTextPresentation(isTableCellText(value) ? value : source, column, {\n    primaryText,\n    allowTertiary: isTableCellText(value),\n  });\n  return {\n    kind: 'text',\n    cellType: primaryText ? 'primary-text' : 'text',\n    value: text.value,\n    primaryText,\n    singleLine: text.singleLine,\n    variant: text.variant,\n    wraps: text.wraps,\n    lineClamp: text.lineClamp,\n  };\n}\n",
       "type": "registry:ui"
     },
     {
@@ -1440,7 +1440,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 rowInteractive =\n    !row.disabled &&\n    (model.selectable && model.selectedRowIds.size > 0 ? rowSelectable : !!row.interactive);\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': rowInteractive,\n        'ds-focus-ring': rowInteractive,\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={rowInteractive ? 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",
+      "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 rowInteractive =\n    !row.disabled &&\n    (model.selectable && model.selectedRowIds.size > 0 ? rowSelectable : !!row.interactive);\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': rowInteractive,\n        'ds-focus-ring': rowInteractive,\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={rowInteractive ? 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    if (cell.value.variant === 'inline') {\n      return (\n        <span class=\"ds-table__cell-tag-stack ds-table__cell-tag-stack--tag-with-text ds-table__cell-inline-tags-stack\">\n          <span class=\"ds-table__cell-inline-tags\">\n            {cell.value.items.map((item, index) => [\n              index > 0 && (\n                <ds-text\n                  class=\"ds-table__cell-tag-separator\"\n                  as=\"span\"\n                  variant=\"text-body-medium\"\n                  color=\"quaternary\"\n                  aria-hidden=\"true\"\n                >\n                  /\n                </ds-text>\n              ),\n              <ds-tag\n                key={`${item.label}-${index}`}\n                label={item.label}\n                intent={item.intent ?? 'neutral'}\n                contrast={item.contrast ?? 'faint'}\n                size=\"md\"\n                icon={item.icon ?? ''}\n                rounded={item.rounded ?? false}\n                isInset\n                insetDepth=\"double\"\n              />,\n            ])}\n          </span>\n          {cell.tracks === 2 && (\n            <ds-text\n              class=\"ds-table__cell-tag-text ds-table__cell-track\"\n              as=\"span\"\n              variant=\"text-body-small\"\n              color=\"secondary\"\n              lineTruncation={1}\n              data-table-truncate=\"\"\n            >\n              {renderHighlightedText(cell.value.text, tableCellFieldMatcher(options, 1))}\n            </ds-text>\n          )}\n        </span>\n      );\n    }\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"
     },
     {
@@ -1455,7 +1455,7 @@
     },
     {
       "path": "src/wc/components/Table/table-types.ts",
-      "content": "import type { TagContrast, TagIntent } from '../Tag/Tag';\nimport type { IconColor } from '../Icon/Icon';\nimport type { SafetyScoreLevel } from '../Score/score-types';\nimport type { TextColor } from '../Text/text-types';\nimport type { PaginationState } from '../Pagination/pagination-types';\n\nexport type TableSortDirection = 'asc' | 'desc';\nexport type TableSelectionMode = 'none' | 'multiple';\nexport type TableCellAlign = 'start' | 'center' | 'end';\nexport type TableCellLinkTarget = '_self' | '_blank';\nexport type TableColumnSticky = 'start' | 'end';\nexport type TableCaptionVisibility = 'visible' | 'hidden';\nexport type TableLoadMoreMode = 'auto' | 'manual';\nexport type TableDataMode = 'infinite' | 'pagination' | 'virtual';\nexport interface TableDataModeChangeDetail {\n  dataMode: TableDataMode;\n}\nexport type TableLoadMoreReason = 'auto' | 'manual' | 'retry';\nexport type TableColumnWidth = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n/** Visible line budget before a text track ellipsizes. */\nexport type TableCellMaxLines = 1 | 2 | 3;\n/** Resolved clamp, including unlimited wrapping. */\nexport type TableCellLineClamp = TableCellMaxLines | 'none';\n/** Semantic color for a group section header (faint surface + bold title). */\nexport type TableGroupIntent =\n  | 'brand'\n  | 'neutral'\n  | 'negative'\n  | 'warning'\n  | 'caution'\n  | 'positive';\n\n/** Independently sortable label within a compound column header. */\nexport interface TableHeaderSegment {\n  /** Compact label rendered inside the table header. */\n  label: string;\n  /** Complete data-point label used when the segment is named outside the table header. */\n  dataLabel?: string;\n  /** Whether this data point is offered by TableSearch. Defaults to true. */\n  searchable?: boolean;\n  /** Stable key emitted through TableSortState.columnId. */\n  sortKey: string;\n  /** Visible separator rendered after this label when another segment follows. */\n  separator?: string;\n}\n\n/** Controlled member-row sort state. Group order is controlled separately. */\nexport interface TableSortState {\n  columnId: string;\n  direction: TableSortDirection;\n}\n\n/** One controlled grouping level. Applications supply groups in their final fixed order. */\nexport interface TableGroupingState {\n  columnId: string;\n  direction: TableSortDirection;\n  /** Optional application-owned data point used to order the group sections. */\n  orderBy?: string;\n}\n\n/** One independently colored run inside a secondary or tertiary track. */\nexport interface TableCellTextRun {\n  text: string;\n  /** Defaults to the track’s standard color. */\n  color?: TextColor;\n  /** Optional supplementary copy shown from a dotted-underlined tooltip trigger. */\n  help?: string;\n}\n\n/** A secondary or tertiary track: one string, or up to three colorable runs. */\nexport type TableCellTextTrack = string | TableCellTextRun[];\n\n/** Standard two- or three-line cell content owned by the table renderer. */\nexport interface TableCellText {\n  primary: string | number;\n  secondary?: TableCellTextTrack;\n  /** Third subdued track; ignored on dual-primary cells. */\n  tertiary?: TableCellTextTrack;\n  /** Optional semantic foreground for a string secondary track. */\n  secondaryColor?: TextColor;\n  /** Optional semantic foreground for a string tertiary track. */\n  tertiaryColor?: TextColor;\n  /** Application-owned URL for the primary track only. Scalars stay unlinked. */\n  href?: string;\n  /** Native anchor target for a resolved primary link. */\n  target?: TableCellLinkTarget;\n  /** Allow this cell to wrap even when its column truncates by default. */\n  wrap?: boolean;\n  /** Clamp wrapping text after 1, 2, or 3 lines. Overrides column wrap. */\n  maxLines?: TableCellMaxLines;\n  fontFeature?: 'normal' | 'tabular-nums';\n}\n\n/** Two-line text content where both tracks use primary body text. */\nexport interface TableCellPrimaryText {\n  kind: 'primary-text';\n  primary: string | number;\n  secondary: string | number;\n  /** Application-owned URL for the primary track only. */\n  href?: string;\n  /** Native anchor target for a resolved primary link. */\n  target?: TableCellLinkTarget;\n  /** Allow this cell to wrap even when its column truncates by default. */\n  wrap?: boolean;\n  /** Clamp wrapping text after 1, 2, or 3 lines. Overrides column wrap. */\n  maxLines?: TableCellMaxLines;\n  fontFeature?: 'normal' | 'tabular-nums';\n}\n\n/** Applicable data point whose value is currently unavailable. */\nexport interface TableCellEmpty {\n  kind: 'empty';\n}\n\n/** Data point that is intentionally not applicable to this row. */\nexport interface TableCellBlank {\n  kind: 'blank';\n}\n\n/** Declarative icon-only content rendered by the table's standard cell primitive. */\nexport interface TableCellIcon {\n  kind: 'icon';\n  /** Exact canonical IcoMo export name. */\n  icon: string;\n  color?: IconColor;\n  /** Accessible label for informative icons. Omit only when the icon is decorative. */\n  label?: string;\n  /** Application-owned value used when this icon column participates in sorting. */\n  sortValue?: string | number | boolean;\n}\n\n/**\n * Prefix icon beside a text copy stack. Independent of icon-only and plain\n * text cells so those recipes stay unchanged.\n */\nexport interface TableCellIconText {\n  kind: 'icon-text';\n  /** Exact canonical IcoMo export name. */\n  icon: string;\n  iconColor?: IconColor;\n  /** Accessible name. Omit when the glyph is decorative. */\n  iconLabel?: string;\n  primary: string | number;\n  secondary?: TableCellTextTrack;\n  tertiary?: TableCellTextTrack;\n  secondaryColor?: TextColor;\n  tertiaryColor?: TextColor;\n  href?: string;\n  target?: TableCellLinkTarget;\n  wrap?: boolean;\n  maxLines?: TableCellMaxLines;\n  fontFeature?: 'normal' | 'tabular-nums';\n}\n\n/**\n * Compact safety-score fill at the top-right of a text copy stack. The score\n * occupies one 24px track while the copy keeps the standard text-cell anatomy.\n */\nexport interface TableCellScoreText {\n  kind: 'score-text';\n  /** Display-ready safety score. Numeric values infer their semantic level. */\n  score: string | number;\n  scoreLevel?: SafetyScoreLevel;\n  /** Accessible name prefix. Defaults to “Safety score”. */\n  scoreLabel?: string;\n  /** Replace the score figure with its matching sm skeleton. */\n  scoreLoading?: boolean;\n  primary: string | number;\n  secondary?: TableCellTextTrack;\n  tertiary?: TableCellTextTrack;\n  secondaryColor?: TextColor;\n  tertiaryColor?: TextColor;\n  href?: string;\n  target?: TableCellLinkTarget;\n  wrap?: boolean;\n  maxLines?: TableCellMaxLines;\n  fontFeature?: 'normal' | 'tabular-nums';\n}\n\n/** Body-row track stack an image preview occupies. */\nexport type TableCellImageTracks = 1 | 2 | 3;\n\n/** Declarative 16:9 image preview rendered by the table's standard cell primitive. */\nexport interface TableCellImage {\n  kind: 'image';\n  /** Optional image source. Omit it to render the standard bordered placeholder. */\n  src?: string;\n  /** Accessible description for either the image or its placeholder. */\n  alt: string;\n  /**\n   * Which body-row contract the preview fills. The thumbnail height is that\n   * cell height minus 8px padding; width follows 16:9. Defaults to 1.\n   */\n  tracks?: TableCellImageTracks;\n}\n\ninterface TableCellActionBase {\n  kind: 'action';\n  /** Add the ButtonUnfilled resting border. Action cells are unbordered by default. */\n  hasBorder?: boolean;\n  isInactive?: boolean;\n  isLoading?: boolean;\n}\n\n/** One command inside an overflow action menu. */\nexport interface TableCellActionMenuItem {\n  /** Stable application-owned action identity emitted with dsCellAction. */\n  actionId: string;\n  label: string;\n  isInactive?: boolean;\n  isDestructive?: boolean;\n}\n\n/** Visual separator between overflow action-menu commands. */\nexport interface TableCellActionDivider {\n  kind: 'divider';\n}\n\nexport type TableCellActionMenuEntry = TableCellActionMenuItem | TableCellActionDivider;\n\n/** Declarative ButtonUnfilled content rendered by the table's standard action cell. */\nexport type TableCellAction = TableCellActionBase &\n  (\n    | {\n        variant?: 'label';\n        /** Stable application-owned action identity emitted with dsCellAction. */\n        actionId: string;\n        label: string;\n        icon?: never;\n        ariaLabel?: string;\n        items?: never;\n      }\n    | {\n        variant: 'icon-label';\n        actionId: string;\n        label: string;\n        icon: string;\n        ariaLabel?: string;\n        items?: never;\n      }\n    | {\n        variant: 'icon';\n        actionId: string;\n        label?: never;\n        icon: string;\n        ariaLabel: string;\n        items?: never;\n      }\n    | {\n        variant?: 'icon';\n        /** Overflow commands. The Ellipses trigger opens ds-menu instead of emitting on click. */\n        items: TableCellActionMenuEntry[];\n        ariaLabel: string;\n        icon?: string;\n        actionId?: never;\n        label?: never;\n      }\n  );\n\n/** Declarative Tag content rendered by the table's standard cell primitive. */\nexport type TableCellTagVariant = 'tag-only' | 'tag-with-text' | 'text-with-tag';\n\n/** One Tag inside a single- or multiple-Tag table cell. */\nexport interface TableCellTagItem {\n  label: string;\n  intent?: TagIntent;\n  contrast?: TagContrast;\n  icon?: string;\n  rounded?: boolean;\n}\n\nexport type TableCellTag = TableCellTagItem & { kind: 'tag' } & (\n    | {\n        variant?: 'tag-only';\n        text?: never;\n      }\n    | {\n        variant: Exclude<TableCellTagVariant, 'tag-only'>;\n        text: string;\n      }\n  );\n\n/** Multiple Tags that wrap inline while retaining the table's named track rhythm. */\nexport interface TableCellTags {\n  kind: 'tags';\n  items: TableCellTagItem[];\n  /** Expected positive wrapped-line count used for row geometry and virtual estimates. */\n  tracks: number;\n}\n\nexport type TableCellValue =\n  | string\n  | number\n  | null\n  | undefined\n  | TableCellText\n  | TableCellPrimaryText\n  | TableCellTag\n  | TableCellTags\n  | TableCellIcon\n  | TableCellIconText\n  | TableCellScoreText\n  | TableCellImage\n  | TableCellAction\n  | TableCellEmpty\n  | TableCellBlank;\n\nexport type TableSkeletonWidth = string | number;\n\n/** Representative loading geometry for one table column. */\nexport type TableCellSkeleton =\n  | {\n      kind: 'text';\n      /** One track for scalar content, two for primary and secondary, three when tertiary is present. */\n      lines?: 1 | 2 | 3;\n      primaryWidth?: TableSkeletonWidth;\n      secondaryWidth?: TableSkeletonWidth;\n      tertiaryWidth?: TableSkeletonWidth;\n    }\n  | {\n      kind: 'image';\n      /** Match the loaded image cell's track stack. Defaults to 1. */\n      tracks?: TableCellImageTracks;\n    }\n  | {\n      kind: 'tag';\n      width?: TableSkeletonWidth;\n    }\n  | {\n      kind: 'icon';\n      rounded?: boolean;\n    }\n  | {\n      kind: 'icon-text';\n      lines?: 1 | 2 | 3;\n      primaryWidth?: TableSkeletonWidth;\n      secondaryWidth?: TableSkeletonWidth;\n      tertiaryWidth?: TableSkeletonWidth;\n    }\n  | {\n      kind: 'score-text';\n      lines?: 1 | 2 | 3;\n      primaryWidth?: TableSkeletonWidth;\n      secondaryWidth?: TableSkeletonWidth;\n      tertiaryWidth?: TableSkeletonWidth;\n    }\n  | {\n      kind: 'action';\n      /** Icon actions use a square control canvas; labeled actions may provide a wider width. */\n      variant?: 'icon' | 'label' | 'icon-label';\n      width?: TableSkeletonWidth;\n    }\n  | {\n      kind: 'blank';\n    };\n\nexport interface TableColumn {\n  /** Stable column identity. */\n  id: string;\n  /** Visible column label. May be empty when headerLabel supplies a non-visual name. */\n  header: string;\n  /** Complete data-point label used by controls such as Sort and Search. */\n  dataLabel?: string;\n  /** Whether this data point is offered by TableSearch. Defaults to true for data columns. */\n  searchable?: boolean;\n  /** Screen-reader-only column name for an intentionally blank visual header. */\n  headerLabel?: string;\n  /** Supplementary header help. Does not replace the visible or accessible column name. */\n  help?: string;\n  /** Optional labels for columns that present and sort multiple related data points. */\n  headerSegments?: TableHeaderSegment[];\n  align?: TableCellAlign;\n  sortable?: boolean;\n  /** Preferred TokoMo table-column width. Numbers remain available for exceptional custom pixel widths. */\n  size?: TableColumnWidth | number;\n  /** Derive a fixed image-column width from the matching 1, 2, or 3 track cell geometry. Ignored when size is set. */\n  imageTracks?: TableCellImageTracks;\n  /** Minimum accepted preferred width in CSS pixels. */\n  minSize?: number;\n  /** Maximum accepted preferred width in CSS pixels. */\n  maxSize?: number;\n  /** Wrap cell text instead of truncating it to one line. */\n  wrap?: boolean;\n  /** Clamp wrapping text after 1, 2, or 3 lines. Omit with wrap for unlimited wrap. */\n  maxLines?: TableCellMaxLines;\n  /** Pin one application column to either inline edge during horizontal scrolling. */\n  sticky?: TableColumnSticky;\n  /**\n   * Declare a trailing application-action lane. Action columns keep fixed\n   * geometry and may host grouped table-level controls in their header.\n   */\n  kind?: 'data' | 'action';\n  /** Representative loading geometry for this column. Defaults to one text line. */\n  skeleton?: TableCellSkeleton;\n}\n\nexport interface TableRow {\n  /** Stable identity, unique across all groups. */\n  id: string;\n  cells: Record<string, TableCellValue>;\n  /** Accessible row name used by its selection control. Falls back to the first cell. */\n  selectionLabel?: string;\n  /** Exclude this row from selection without muting its content. */\n  selectable?: boolean;\n  /** Keep the row visible while disabling its selection control and styling it as inactive. */\n  disabled?: boolean;\n  /** Make the complete row a keyboard- and pointer-activatable application target. */\n  interactive?: boolean;\n}\n\n/** Supporting copy on a group section header's second track. */\nexport interface TableGroupAccessory {\n  text: string;\n  /** Optional tooltip. Uses the shared dotted underline when present. */\n  help?: string;\n}\n\n/** Leading group-header accessory. Score is the first supported hero. */\nexport interface TableGroupHeroScore {\n  kind: 'score';\n  value: string | number;\n  level?: SafetyScoreLevel;\n  /** Span one label track by default, or center a larger score across two tracks. */\n  tracks?: 1 | 2;\n  /** Accessible name prefix, for example “Safety score”. */\n  label?: string;\n  isLoading?: boolean;\n}\n\nexport type TableGroupHero = TableGroupHeroScore;\n\nexport interface TableGroup {\n  /** Stable group identity. */\n  id: string;\n  label: string;\n  value?: string | number;\n  /** Total server-side member count; may exceed the currently loaded row count. */\n  totalCount?: number;\n  /** Optional localized total-count phrase such as “166 events” for accessible loaded progress. */\n  countLabel?: string;\n  /**\n   * Optional semantic intent for the group section header. Applies a faint\n   * intent background and bold intent title color.\n   */\n  intent?: TableGroupIntent;\n  /**\n   * Optional accessory copy on a second 24px track under the label and count.\n   * Middle-dot separated. At most four items are shown.\n   */\n  accessories?: TableGroupAccessory[];\n  /**\n   * Optional leading hero before the label and count. A score uses sm on both\n   * single-track and two-track headers and sits at the start of the copy stack.\n   */\n  hero?: TableGroupHero;\n  /** Whether this group has more member rows available to load. */\n  hasMore?: boolean;\n  /** Controlled incremental loading state for this group's member rows. */\n  loadingMore?: boolean;\n  /** Controlled incremental loading failure for this group's member rows. */\n  loadMoreError?: string;\n  /** Reset key for this group's query, sort, or filter state. Defaults to the group ID. */\n  loadIdentity?: string | number;\n  rows: TableRow[];\n}\n\nexport interface TableSortChangeDetail {\n  sort: TableSortState | null;\n}\n\nexport interface TableSelectionChangeDetail {\n  selectedRowIds: string[];\n  scope: 'row' | 'all-loaded' | 'group';\n  changedRowId?: string;\n  /** Present when scope is `group`. */\n  groupId?: string;\n  selected?: boolean;\n}\n\nexport interface TableLoadMoreDetail {\n  reason: TableLoadMoreReason;\n  loadIdentity: string | number;\n  loadedRowCount: number;\n}\n\nexport interface TableGroupLoadMoreDetail extends TableLoadMoreDetail {\n  groupId: string;\n}\n\nexport interface TableCellActionDetail {\n  actionId: string;\n  rowId: string;\n  columnId: string;\n}\n\nexport interface TableGroupCollapseChangeDetail {\n  scope: 'group' | 'all';\n  /** Present when a single group was toggled. */\n  groupId?: string;\n  collapsed: boolean;\n  collapsedGroupIds: string[];\n}\n\nexport interface TableRowActivateDetail {\n  rowId: string;\n}\n\n/** Controlled show/hide and data-column order for the table-owned customizer. */\nexport interface TableColumnsConfigChangeDetail {\n  hiddenColumnIds: string[];\n  columnOrder: string[];\n}\n\n/** Controlled top-level pagination state. Rows or groups contain only the active page. */\nexport interface TablePaginationState extends PaginationState {\n  /** Change to request one fresh fitted-capacity snapshot for the current query shape. */\n  fitIdentity?: string | number;\n}\n",
+      "content": "import type { TagContrast, TagIntent } from '../Tag/Tag';\nimport type { IconColor } from '../Icon/Icon';\nimport type { SafetyScoreLevel } from '../Score/score-types';\nimport type { TextColor } from '../Text/text-types';\nimport type { PaginationState } from '../Pagination/pagination-types';\n\nexport type TableSortDirection = 'asc' | 'desc';\nexport type TableSelectionMode = 'none' | 'multiple';\nexport type TableCellAlign = 'start' | 'center' | 'end';\nexport type TableCellLinkTarget = '_self' | '_blank';\nexport type TableColumnSticky = 'start' | 'end';\nexport type TableCaptionVisibility = 'visible' | 'hidden';\nexport type TableLoadMoreMode = 'auto' | 'manual';\nexport type TableDataMode = 'infinite' | 'pagination' | 'virtual';\nexport interface TableDataModeChangeDetail {\n  dataMode: TableDataMode;\n}\nexport type TableLoadMoreReason = 'auto' | 'manual' | 'retry';\nexport type TableColumnWidth = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n/** Visible line budget before a text track ellipsizes. */\nexport type TableCellMaxLines = 1 | 2 | 3;\n/** Resolved clamp, including unlimited wrapping. */\nexport type TableCellLineClamp = TableCellMaxLines | 'none';\n/** Semantic color for a group section header (faint surface + bold title). */\nexport type TableGroupIntent =\n  | 'brand'\n  | 'neutral'\n  | 'negative'\n  | 'warning'\n  | 'caution'\n  | 'positive';\n\n/** Independently sortable label within a compound column header. */\nexport interface TableHeaderSegment {\n  /** Compact label rendered inside the table header. */\n  label: string;\n  /** Complete data-point label used when the segment is named outside the table header. */\n  dataLabel?: string;\n  /** Whether this data point is offered by TableSearch. Defaults to true. */\n  searchable?: boolean;\n  /** Stable key emitted through TableSortState.columnId. */\n  sortKey: string;\n  /** Visible separator rendered after this label when another segment follows. */\n  separator?: string;\n}\n\n/** Controlled member-row sort state. Group order is controlled separately. */\nexport interface TableSortState {\n  columnId: string;\n  direction: TableSortDirection;\n}\n\n/** One controlled grouping level. Applications supply groups in their final fixed order. */\nexport interface TableGroupingState {\n  columnId: string;\n  direction: TableSortDirection;\n  /** Optional application-owned data point used to order the group sections. */\n  orderBy?: string;\n}\n\n/** One independently colored run inside a secondary or tertiary track. */\nexport interface TableCellTextRun {\n  text: string;\n  /** Defaults to the track’s standard color. */\n  color?: TextColor;\n  /** Optional supplementary copy shown from a dotted-underlined tooltip trigger. */\n  help?: string;\n}\n\n/** A secondary or tertiary track: one string, or up to three colorable runs. */\nexport type TableCellTextTrack = string | TableCellTextRun[];\n\n/** Standard two- or three-line cell content owned by the table renderer. */\nexport interface TableCellText {\n  primary: string | number;\n  secondary?: TableCellTextTrack;\n  /** Third subdued track; ignored on dual-primary cells. */\n  tertiary?: TableCellTextTrack;\n  /** Optional semantic foreground for a string secondary track. */\n  secondaryColor?: TextColor;\n  /** Optional semantic foreground for a string tertiary track. */\n  tertiaryColor?: TextColor;\n  /** Application-owned URL for the primary track only. Scalars stay unlinked. */\n  href?: string;\n  /** Native anchor target for a resolved primary link. */\n  target?: TableCellLinkTarget;\n  /** Allow this cell to wrap even when its column truncates by default. */\n  wrap?: boolean;\n  /** Clamp wrapping text after 1, 2, or 3 lines. Overrides column wrap. */\n  maxLines?: TableCellMaxLines;\n  fontFeature?: 'normal' | 'tabular-nums';\n}\n\n/** Two-line text content where both tracks use primary body text. */\nexport interface TableCellPrimaryText {\n  kind: 'primary-text';\n  primary: string | number;\n  secondary: string | number;\n  /** Application-owned URL for the primary track only. */\n  href?: string;\n  /** Native anchor target for a resolved primary link. */\n  target?: TableCellLinkTarget;\n  /** Allow this cell to wrap even when its column truncates by default. */\n  wrap?: boolean;\n  /** Clamp wrapping text after 1, 2, or 3 lines. Overrides column wrap. */\n  maxLines?: TableCellMaxLines;\n  fontFeature?: 'normal' | 'tabular-nums';\n}\n\n/** Applicable data point whose value is currently unavailable. */\nexport interface TableCellEmpty {\n  kind: 'empty';\n}\n\n/** Data point that is intentionally not applicable to this row. */\nexport interface TableCellBlank {\n  kind: 'blank';\n}\n\n/** Declarative icon-only content rendered by the table's standard cell primitive. */\nexport interface TableCellIcon {\n  kind: 'icon';\n  /** Exact canonical IcoMo export name. */\n  icon: string;\n  color?: IconColor;\n  /** Accessible label for informative icons. Omit only when the icon is decorative. */\n  label?: string;\n  /** Application-owned value used when this icon column participates in sorting. */\n  sortValue?: string | number | boolean;\n}\n\n/**\n * Prefix icon beside a text copy stack. Independent of icon-only and plain\n * text cells so those recipes stay unchanged.\n */\nexport interface TableCellIconText {\n  kind: 'icon-text';\n  /** Exact canonical IcoMo export name. */\n  icon: string;\n  iconColor?: IconColor;\n  /** Accessible name. Omit when the glyph is decorative. */\n  iconLabel?: string;\n  primary: string | number;\n  secondary?: TableCellTextTrack;\n  tertiary?: TableCellTextTrack;\n  secondaryColor?: TextColor;\n  tertiaryColor?: TextColor;\n  href?: string;\n  target?: TableCellLinkTarget;\n  wrap?: boolean;\n  maxLines?: TableCellMaxLines;\n  fontFeature?: 'normal' | 'tabular-nums';\n}\n\n/**\n * Compact safety-score fill at the top-right of a text copy stack. The score\n * occupies one 24px track while the copy keeps the standard text-cell anatomy.\n */\nexport interface TableCellScoreText {\n  kind: 'score-text';\n  /** Display-ready safety score. Numeric values infer their semantic level. */\n  score: string | number;\n  scoreLevel?: SafetyScoreLevel;\n  /** Accessible name prefix. Defaults to “Safety score”. */\n  scoreLabel?: string;\n  /** Replace the score figure with its matching sm skeleton. */\n  scoreLoading?: boolean;\n  primary: string | number;\n  secondary?: TableCellTextTrack;\n  tertiary?: TableCellTextTrack;\n  secondaryColor?: TextColor;\n  tertiaryColor?: TextColor;\n  href?: string;\n  target?: TableCellLinkTarget;\n  wrap?: boolean;\n  maxLines?: TableCellMaxLines;\n  fontFeature?: 'normal' | 'tabular-nums';\n}\n\n/** Body-row track stack an image preview occupies. */\nexport type TableCellImageTracks = 1 | 2 | 3;\n\n/** Declarative 16:9 image preview rendered by the table's standard cell primitive. */\nexport interface TableCellImage {\n  kind: 'image';\n  /** Optional image source. Omit it to render the standard bordered placeholder. */\n  src?: string;\n  /** Accessible description for either the image or its placeholder. */\n  alt: string;\n  /**\n   * Which body-row contract the preview fills. The thumbnail height is that\n   * cell height minus 8px padding; width follows 16:9. Defaults to 1.\n   */\n  tracks?: TableCellImageTracks;\n}\n\ninterface TableCellActionBase {\n  kind: 'action';\n  /** Add the ButtonUnfilled resting border. Action cells are unbordered by default. */\n  hasBorder?: boolean;\n  isInactive?: boolean;\n  isLoading?: boolean;\n}\n\n/** One command inside an overflow action menu. */\nexport interface TableCellActionMenuItem {\n  /** Stable application-owned action identity emitted with dsCellAction. */\n  actionId: string;\n  label: string;\n  isInactive?: boolean;\n  isDestructive?: boolean;\n}\n\n/** Visual separator between overflow action-menu commands. */\nexport interface TableCellActionDivider {\n  kind: 'divider';\n}\n\nexport type TableCellActionMenuEntry = TableCellActionMenuItem | TableCellActionDivider;\n\n/** Declarative ButtonUnfilled content rendered by the table's standard action cell. */\nexport type TableCellAction = TableCellActionBase &\n  (\n    | {\n        variant?: 'label';\n        /** Stable application-owned action identity emitted with dsCellAction. */\n        actionId: string;\n        label: string;\n        icon?: never;\n        ariaLabel?: string;\n        items?: never;\n      }\n    | {\n        variant: 'icon-label';\n        actionId: string;\n        label: string;\n        icon: string;\n        ariaLabel?: string;\n        items?: never;\n      }\n    | {\n        variant: 'icon';\n        actionId: string;\n        label?: never;\n        icon: string;\n        ariaLabel: string;\n        items?: never;\n      }\n    | {\n        variant?: 'icon';\n        /** Overflow commands. The Ellipses trigger opens ds-menu instead of emitting on click. */\n        items: TableCellActionMenuEntry[];\n        ariaLabel: string;\n        icon?: string;\n        actionId?: never;\n        label?: never;\n      }\n  );\n\n/** Declarative Tag content rendered by the table's standard cell primitive. */\nexport type TableCellTagVariant = 'tag-only' | 'tag-with-text' | 'text-with-tag';\n\n/** One Tag inside a single- or multiple-Tag table cell. */\nexport interface TableCellTagItem {\n  label: string;\n  intent?: TagIntent;\n  contrast?: TagContrast;\n  icon?: string;\n  rounded?: boolean;\n}\n\nexport type TableCellTag = TableCellTagItem & { kind: 'tag' } & (\n    | {\n        variant?: 'tag-only';\n        text?: never;\n      }\n    | {\n        variant: Exclude<TableCellTagVariant, 'tag-only'>;\n        text: string;\n      }\n  );\n\n/** Multiple Tags in wrapping tracks or a compact slash-separated primary track. */\nexport type TableCellTags = { kind: 'tags' } & (\n  | {\n      variant?: 'wrap';\n      items: TableCellTagItem[];\n      /** Expected positive wrapped-line count used for row geometry and virtual estimates. */\n      tracks: number;\n      text?: never;\n    }\n  | {\n      variant: 'inline';\n      /** One to three tags. Runtime inputs beyond three are capped. */\n      items:\n        | [TableCellTagItem]\n        | [TableCellTagItem, TableCellTagItem]\n        | [TableCellTagItem, TableCellTagItem, TableCellTagItem];\n      /** Optional secondary text beneath the non-wrapping tag track. */\n      text?: string;\n      tracks?: never;\n    }\n);\n\nexport type TableCellValue =\n  | string\n  | number\n  | null\n  | undefined\n  | TableCellText\n  | TableCellPrimaryText\n  | TableCellTag\n  | TableCellTags\n  | TableCellIcon\n  | TableCellIconText\n  | TableCellScoreText\n  | TableCellImage\n  | TableCellAction\n  | TableCellEmpty\n  | TableCellBlank;\n\nexport type TableSkeletonWidth = string | number;\n\n/** Representative loading geometry for one table column. */\nexport type TableCellSkeleton =\n  | {\n      kind: 'text';\n      /** One track for scalar content, two for primary and secondary, three when tertiary is present. */\n      lines?: 1 | 2 | 3;\n      primaryWidth?: TableSkeletonWidth;\n      secondaryWidth?: TableSkeletonWidth;\n      tertiaryWidth?: TableSkeletonWidth;\n    }\n  | {\n      kind: 'image';\n      /** Match the loaded image cell's track stack. Defaults to 1. */\n      tracks?: TableCellImageTracks;\n    }\n  | {\n      kind: 'tag';\n      width?: TableSkeletonWidth;\n    }\n  | {\n      kind: 'icon';\n      rounded?: boolean;\n    }\n  | {\n      kind: 'icon-text';\n      lines?: 1 | 2 | 3;\n      primaryWidth?: TableSkeletonWidth;\n      secondaryWidth?: TableSkeletonWidth;\n      tertiaryWidth?: TableSkeletonWidth;\n    }\n  | {\n      kind: 'score-text';\n      lines?: 1 | 2 | 3;\n      primaryWidth?: TableSkeletonWidth;\n      secondaryWidth?: TableSkeletonWidth;\n      tertiaryWidth?: TableSkeletonWidth;\n    }\n  | {\n      kind: 'action';\n      /** Icon actions use a square control canvas; labeled actions may provide a wider width. */\n      variant?: 'icon' | 'label' | 'icon-label';\n      width?: TableSkeletonWidth;\n    }\n  | {\n      kind: 'blank';\n    };\n\nexport interface TableColumn {\n  /** Stable column identity. */\n  id: string;\n  /** Visible column label. May be empty when headerLabel supplies a non-visual name. */\n  header: string;\n  /** Complete data-point label used by controls such as Sort and Search. */\n  dataLabel?: string;\n  /** Whether this data point is offered by TableSearch. Defaults to true for data columns. */\n  searchable?: boolean;\n  /** Screen-reader-only column name for an intentionally blank visual header. */\n  headerLabel?: string;\n  /** Supplementary header help. Does not replace the visible or accessible column name. */\n  help?: string;\n  /** Optional labels for columns that present and sort multiple related data points. */\n  headerSegments?: TableHeaderSegment[];\n  align?: TableCellAlign;\n  sortable?: boolean;\n  /** Preferred TokoMo table-column width. Numbers remain available for exceptional custom pixel widths. */\n  size?: TableColumnWidth | number;\n  /** Derive a fixed image-column width from the matching 1, 2, or 3 track cell geometry. Ignored when size is set. */\n  imageTracks?: TableCellImageTracks;\n  /** Minimum accepted preferred width in CSS pixels. */\n  minSize?: number;\n  /** Maximum accepted preferred width in CSS pixels. */\n  maxSize?: number;\n  /** Wrap cell text instead of truncating it to one line. */\n  wrap?: boolean;\n  /** Clamp wrapping text after 1, 2, or 3 lines. Omit with wrap for unlimited wrap. */\n  maxLines?: TableCellMaxLines;\n  /** Pin one application column to either inline edge during horizontal scrolling. */\n  sticky?: TableColumnSticky;\n  /**\n   * Declare a trailing application-action lane. Action columns keep fixed\n   * geometry and may host grouped table-level controls in their header.\n   */\n  kind?: 'data' | 'action';\n  /** Representative loading geometry for this column. Defaults to one text line. */\n  skeleton?: TableCellSkeleton;\n}\n\nexport interface TableRow {\n  /** Stable identity, unique across all groups. */\n  id: string;\n  cells: Record<string, TableCellValue>;\n  /** Accessible row name used by its selection control. Falls back to the first cell. */\n  selectionLabel?: string;\n  /** Exclude this row from selection without muting its content. */\n  selectable?: boolean;\n  /** Keep the row visible while disabling its selection control and styling it as inactive. */\n  disabled?: boolean;\n  /** Make the complete row a keyboard- and pointer-activatable application target. */\n  interactive?: boolean;\n}\n\n/** Supporting copy on a group section header's second track. */\nexport interface TableGroupAccessory {\n  text: string;\n  /** Optional tooltip. Uses the shared dotted underline when present. */\n  help?: string;\n}\n\n/** Leading group-header accessory. Score is the first supported hero. */\nexport interface TableGroupHeroScore {\n  kind: 'score';\n  value: string | number;\n  level?: SafetyScoreLevel;\n  /** Span one label track by default, or center a larger score across two tracks. */\n  tracks?: 1 | 2;\n  /** Accessible name prefix, for example “Safety score”. */\n  label?: string;\n  isLoading?: boolean;\n}\n\nexport type TableGroupHero = TableGroupHeroScore;\n\nexport interface TableGroup {\n  /** Stable group identity. */\n  id: string;\n  label: string;\n  value?: string | number;\n  /** Total server-side member count; may exceed the currently loaded row count. */\n  totalCount?: number;\n  /** Optional localized total-count phrase such as “166 events” for accessible loaded progress. */\n  countLabel?: string;\n  /**\n   * Optional semantic intent for the group section header. Applies a faint\n   * intent background and bold intent title color.\n   */\n  intent?: TableGroupIntent;\n  /**\n   * Optional accessory copy on a second 24px track under the label and count.\n   * Middle-dot separated. At most four items are shown.\n   */\n  accessories?: TableGroupAccessory[];\n  /**\n   * Optional leading hero before the label and count. A score uses sm on both\n   * single-track and two-track headers and sits at the start of the copy stack.\n   */\n  hero?: TableGroupHero;\n  /** Whether this group has more member rows available to load. */\n  hasMore?: boolean;\n  /** Controlled incremental loading state for this group's member rows. */\n  loadingMore?: boolean;\n  /** Controlled incremental loading failure for this group's member rows. */\n  loadMoreError?: string;\n  /** Reset key for this group's query, sort, or filter state. Defaults to the group ID. */\n  loadIdentity?: string | number;\n  rows: TableRow[];\n}\n\nexport interface TableSortChangeDetail {\n  sort: TableSortState | null;\n}\n\nexport interface TableSelectionChangeDetail {\n  selectedRowIds: string[];\n  scope: 'row' | 'all-loaded' | 'group';\n  changedRowId?: string;\n  /** Present when scope is `group`. */\n  groupId?: string;\n  selected?: boolean;\n}\n\nexport interface TableLoadMoreDetail {\n  reason: TableLoadMoreReason;\n  loadIdentity: string | number;\n  loadedRowCount: number;\n}\n\nexport interface TableGroupLoadMoreDetail extends TableLoadMoreDetail {\n  groupId: string;\n}\n\nexport interface TableCellActionDetail {\n  actionId: string;\n  rowId: string;\n  columnId: string;\n}\n\nexport interface TableGroupCollapseChangeDetail {\n  scope: 'group' | 'all';\n  /** Present when a single group was toggled. */\n  groupId?: string;\n  collapsed: boolean;\n  collapsedGroupIds: string[];\n}\n\nexport interface TableRowActivateDetail {\n  rowId: string;\n}\n\n/** Controlled show/hide and data-column order for the table-owned customizer. */\nexport interface TableColumnsConfigChangeDetail {\n  hiddenColumnIds: string[];\n  columnOrder: string[];\n}\n\n/** Controlled top-level pagination state. Rows or groups contain only the active page. */\nexport interface TablePaginationState extends PaginationState {\n  /** Change to request one fresh fitted-capacity snapshot for the current query shape. */\n  fitIdentity?: string | number;\n}\n",
       "type": "registry:ui"
     },
     {

package/dist/styles/table.css

@@ -916,7 +916,7 @@
 /*
  * Multiple Tags use the 20px small single-inset control. Each wrap line is a
  * 24px track (2px block margin around the tag) with no row-gap, so wrap lines
- * land on the same 40 / 64 / 88 ladder as text. Same-line tags keep a 2px
+ * land on the same 40 / 64 / 88 ladder as text. Same-line tags keep a 4px
  * column gap.
  */
 :where(.ds-table__cell--tags .ds-table__cell-content) {
@@ -928,7 +928,7 @@
   flex-wrap: wrap;
   align-content: flex-start;
   align-items: center;
-  gap: 0 var(--dimension-space-025);
+  gap: 0 var(--dimension-space-050);
   box-sizing: border-box;
   inline-size: 100%;
   min-inline-size: 0;
@@ -1807,3 +1807,27 @@
     outline-color: var(--ds-forced-color-selected);
   }
 }
+
+/* Inline tag groups share the primary-tag recipe and shrink within one track. */
+:where(.ds-table__cell-inline-tags-stack) {
+  inline-size: 100%;
+}
+
+:where(.ds-table__cell-inline-tags) {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: var(--dimension-space-050);
+  inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: var(--_table-cell-track-min-block-size);
+}
+
+:where(.ds-table__cell-inline-tags > ds-tag) {
+  flex: 0 1 auto;
+  max-inline-size: 100%;
+}
+
+:where(.ds-table__cell-tag-separator) {
+  flex: none;
+}

package/dist/types/components/Table/table-cell-model.d.ts

@@ -67,7 +67,7 @@ export type TableCellPresentation = {
     cellType: 'tags';
     value: TableCellTags;
     tracks: number;
-    variant: `${number}-track`;
+    variant: `${number}-track` | 'inline';
 } | {
     kind: 'text';
     cellType: 'text' | 'primary-text';

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

@@ -243,13 +243,23 @@ export type TableCellTag = TableCellTagItem & {
     variant: Exclude<TableCellTagVariant, 'tag-only'>;
     text: string;
 });
-/** Multiple Tags that wrap inline while retaining the table's named track rhythm. */
-export interface TableCellTags {
+/** Multiple Tags in wrapping tracks or a compact slash-separated primary track. */
+export type TableCellTags = {
     kind: 'tags';
+} & ({
+    variant?: 'wrap';
     items: TableCellTagItem[];
     /** Expected positive wrapped-line count used for row geometry and virtual estimates. */
     tracks: number;
-}
+    text?: never;
+} | {
+    variant: 'inline';
+    /** One to three tags. Runtime inputs beyond three are capped. */
+    items: [TableCellTagItem] | [TableCellTagItem, TableCellTagItem] | [TableCellTagItem, TableCellTagItem, TableCellTagItem];
+    /** Optional secondary text beneath the non-wrapping tag track. */
+    text?: string;
+    tracks?: never;
+});
 export type TableCellValue = string | number | null | undefined | TableCellText | TableCellPrimaryText | TableCellTag | TableCellTags | TableCellIcon | TableCellIconText | TableCellScoreText | TableCellImage | TableCellAction | TableCellEmpty | TableCellBlank;
 export type TableSkeletonWidth = string | number;
 /** Representative loading geometry for one table column. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "14.33.2",
+  "version": "14.34.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",