@ds-mo/ui 14.24.0 → 14.26.0

package/dist/styles/table.css

@@ -13,12 +13,8 @@
   --_table-cell-track-label-inset: var(--dimension-space-025);
   --_table-caption-bar-block-size: var(--dimension-size-600);
   --_table-image-block-size: var(--_table-cell-track-min-block-size);
-  --_table-image-block-size-multi: calc(
-    var(--_table-cell-track-min-block-size) + var(--dimension-space-025) + var(--dimension-size-250)
-  );
-  --_table-image-block-size-triple: calc(
-    var(--_table-image-block-size-multi) + var(--dimension-space-025) + var(--dimension-size-250)
-  );
+  --_table-image-block-size-multi: calc(2 * var(--_table-cell-track-min-block-size));
+  --_table-image-block-size-triple: calc(3 * var(--_table-cell-track-min-block-size));
   --_table-image-column-inline-size: calc(
     ((var(--_table-image-block-size) * 16) / 9) + (var(--_table-cell-padding-inline) * 2)
   );
@@ -29,27 +25,13 @@
     ((var(--_table-image-block-size-triple) * 16) / 9) + (var(--_table-cell-padding-inline) * 2)
   );
   /*
-   * Wrapping primary on a 1-track cell occupies later tracks instead of a
-   * private leading scale. Keep body-medium size; add the 2px stack gap to
-   * line-height and leave the leftover first-track inset as padding-block
-   * so 1 / 2 / 3 wrapped lines measure 40 / 62 / 84 like named tracks.
+   * Every body-row track is 24px with no stack gap (40 / 64 / 88 / 112).
+   * Wrapping primary and secondary use that same 24px as line-height so
+   * extra lines land on named tracks without a private leading scale.
    */
-  --_table-wrap-primary-line-height: calc(
-    var(--typography-lineheight-md) + var(--dimension-space-025)
-  );
-  --_table-wrap-primary-padding-block: calc(
-    (
-        var(--_table-cell-track-min-block-size) - var(--typography-lineheight-md) -
-          var(--dimension-space-025)
-      ) /
-      2
-  );
-  /*
-   * Wrapping secondary on a 2-track cell occupies later tracks. Zero the copy
-   * gap and use later-track + gap as line-height so 1 / 2 / 3 secondary lines
-   * land on 62 / 84 / 106 with primary remaining the first 24px track.
-   */
-  --_table-wrap-secondary-line-height: calc(var(--dimension-size-250) + var(--dimension-space-025));
+  --_table-wrap-primary-line-height: var(--_table-cell-track-min-block-size);
+  --_table-wrap-primary-padding-block: 0px;
+  --_table-wrap-secondary-line-height: var(--_table-cell-track-min-block-size);
   --_table-wrap-secondary-padding-block: 0;
   --_table-surface: var(--ds-table-surface, var(--color-background-primary));
   --_table-header-surface: var(--ds-table-header-surface, var(--color-background-primary));
@@ -209,10 +191,22 @@
 }
 
 /* Bound style and layout invalidation to recycled row shells during window updates. */
-:where(.ds-table__table--virtual .ds-table__row) {
+:where(.ds-table__table--windowed .ds-table__row) {
   contain: layout style;
 }
 
+/*
+ * Pagination and infinite windows keep every loaded semantic row in the DOM.
+ * Let the browser skip off-screen row contents while retaining a stable scroll
+ * range from the same token-aligned row estimates used by virtual mode. The
+ * `auto` form caches each real height after the row has been laid out.
+ */
+:where(.ds-table__table--deferred-rows .ds-table__row) {
+  content-visibility: auto;
+  contain-intrinsic-block-size: auto
+    var(--_table-row-intrinsic-block-size, var(--_table-row-min-block-size));
+}
+
 :where(.ds-table__table--native-group-sticky .ds-table__header-row),
 :where(.ds-table__table--native-group-sticky .ds-table__row),
 :where(.ds-table__table--native-group-sticky .ds-table__skeleton-row) {
@@ -882,18 +876,18 @@
 
 :where(.ds-table__cell--text-multi .ds-table__cell-copy),
 :where(.ds-table__cell--text-triple .ds-table__cell-copy) {
-  gap: var(--dimension-space-025);
+  gap: 0;
 }
 
 /*
- * Body cells share 8px chrome. 20px content (body-medium text, md icon,
- * checkbox) sits in a 24px track (2px block inset). Text tracks keep that
- * 2px plus the 2px label inset, so padding-inline is 4px and copy lines up
- * with column-header labels. Later body-small tracks stay 20px, stacked with
- * a 2px gap. Wrapping 1-track primary folds that gap into line-height so
- * extra lines land on the same 62px and 84px rows as 2- and 3-track cells.
- * Wrapping secondary keeps primary on track 1 and consumes later tracks the
- * same way, including a 106px fourth track when secondary wraps to three lines.
+ * Body cells share 8px chrome. Every named track is 24px with no stack gap,
+ * so 20px content (body-medium text, md icon, checkbox, sm tag) sits in that
+ * track with a 2px block inset. Text tracks keep that 2px plus the 2px label
+ * inset, so padding-inline is 4px and copy lines up with column-header labels.
+ * Wrapping 1-track primary uses the 24px track as line-height so extra lines
+ * land on the same 64px and 88px rows as 2- and 3-track cells. Wrapping
+ * secondary keeps primary on track 1 and consumes later tracks the same way,
+ * including a 112px fourth track when secondary wraps to three lines.
  * Header and group rows keep their own recipes.
  */
 :where(.ds-table__cell-primary),
@@ -903,12 +897,16 @@
 
 :where(.ds-table__cell--text-multi .ds-table__cell-secondary),
 :where(.ds-table__cell--text-triple .ds-table__cell-secondary),
-:where(.ds-table__cell--text-triple .ds-table__cell-tertiary) {
-  padding-block: var(--dimension-space-025);
-}
-
+:where(.ds-table__cell--text-triple .ds-table__cell-tertiary),
+:where(.ds-table__cell--icon-text-multi .ds-table__cell-secondary),
+:where(.ds-table__cell--icon-text-triple .ds-table__cell-secondary),
+:where(.ds-table__cell--icon-text-triple .ds-table__cell-tertiary),
+:where(.ds-table__cell--score-text-multi .ds-table__cell-secondary),
+:where(.ds-table__cell--score-text-triple .ds-table__cell-secondary),
+:where(.ds-table__cell--score-text-triple .ds-table__cell-tertiary),
 :where(.ds-table__cell--primary-text .ds-table__cell-secondary) {
-  padding-block: 0;
+  padding-block: var(--dimension-space-025);
+  min-block-size: var(--_table-cell-track-min-block-size);
 }
 
 :where(.ds-table__cell--tag-tag-only .ds-table__cell-content) {
@@ -916,10 +914,10 @@
 }
 
 /*
- * Multiple Tags use the 20px small single-inset control so each wrapped line
- * occupies one later-track slot. The 2px block inset forms the 24px first
- * track; subsequent lines add a 20px track and 2px gap, preserving the named
- * row ladder for any declared number of tracks.
+ * 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
+ * column gap.
  */
 :where(.ds-table__cell--tags .ds-table__cell-content) {
   min-block-size: 0;
@@ -930,18 +928,19 @@
   flex-wrap: wrap;
   align-content: flex-start;
   align-items: center;
-  gap: var(--dimension-space-025);
+  gap: 0 var(--dimension-space-025);
   box-sizing: border-box;
   inline-size: 100%;
   min-inline-size: 0;
   max-inline-size: 100%;
   min-block-size: var(--_table-cell-tags-min-block-size, var(--_table-cell-track-min-block-size));
-  padding-block: var(--dimension-space-025);
+  padding-block: 0;
 }
 
 :where(.ds-table__cell-tags > ds-tag) {
   flex: none;
   max-inline-size: 100%;
+  margin-block: var(--dimension-space-025);
 }
 
 :where(.ds-table__cell-tag-stack) {
@@ -960,21 +959,21 @@
 :where(.ds-table__cell-tag-stack--tag-with-text .ds-table__cell-tag-text) {
   padding-inline: var(--_table-cell-track-padding-inline);
   padding-block: var(--dimension-space-025);
-  min-block-size: 0;
+  min-block-size: var(--_table-cell-track-min-block-size);
 }
 
 :where(.ds-table__cell-tag-stack--tag-with-text) {
-  gap: var(--dimension-space-025);
+  gap: 0;
 }
 
 :where(.ds-table__cell-tag-stack--text-with-tag .ds-table__cell-tag-text) {
   padding-inline: var(--_table-cell-track-padding-inline);
   padding-block: var(--dimension-space-025);
-  min-block-size: 0;
+  min-block-size: var(--_table-cell-track-min-block-size);
 }
 
 :where(.ds-table__cell-tag-stack--text-with-tag) {
-  gap: var(--dimension-space-025);
+  gap: 0;
 }
 
 :where(.ds-table__cell-tag-control-track) {
@@ -983,10 +982,6 @@
   min-block-size: var(--_table-cell-track-min-block-size);
 }
 
-:where(.ds-table__cell-tag-stack--text-with-tag .ds-table__cell-tag-control-track) {
-  min-block-size: var(--dimension-size-250);
-}
-
 :where(.ds-table__cell--icon .ds-table__cell-content) {
   align-items: center;
   justify-content: center;
@@ -1023,19 +1018,58 @@
 
 :where(.ds-table__cell--icon-text-multi .ds-table__cell-copy),
 :where(.ds-table__cell--icon-text-triple .ds-table__cell-copy) {
-  gap: var(--dimension-space-025);
+  gap: 0;
 }
 
 :where(.ds-table__cell--icon-text-multi .ds-table__cell-secondary),
 :where(.ds-table__cell--icon-text-triple .ds-table__cell-secondary),
 :where(.ds-table__cell--icon-text-triple .ds-table__cell-tertiary) {
   padding-block: var(--dimension-space-025);
+  min-block-size: var(--_table-cell-track-min-block-size);
+}
+
+/*
+ * Score-and-text: copy fills from the start edge while the sm Score owns the
+ * top-right 24px track. The score has no padding that would enlarge or
+ * misalign its fill.
+ */
+:where(.ds-table__cell-score-text) {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--dimension-space-075);
+  inline-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+}
+
+:where(.ds-table__cell-score-text-score) {
+  box-sizing: border-box;
+  display: flex;
+  flex: none;
+  align-items: flex-start;
+  min-block-size: var(--_table-cell-track-min-block-size);
+}
+
+:where(.ds-table__cell--score-text .ds-table__cell-content),
+:where(.ds-table__cell--score-text .ds-table__cell-track) {
+  min-block-size: 0;
+}
+
+:where(.ds-table__cell--score-text-multi .ds-table__cell-copy),
+:where(.ds-table__cell--score-text-triple .ds-table__cell-copy) {
+  gap: 0;
+}
+
+:where(.ds-table__cell--score-text-multi .ds-table__cell-secondary),
+:where(.ds-table__cell--score-text-triple .ds-table__cell-secondary),
+:where(.ds-table__cell--score-text-triple .ds-table__cell-tertiary) {
+  padding-block: var(--dimension-space-025);
+  min-block-size: var(--_table-cell-track-min-block-size);
 }
 
 /*
  * Image previews fill the matching body-row content box (cell height minus
- * 8px padding) at 16:9. Track 1 is the 24px first-track stack; tracks 2 and
- * 3 add the same 20px later-track and 2px gap as text.
+ * 8px padding) at 16:9. Each track is 24px with no stack gap.
  */
 :where(.ds-table__cell-image) {
   display: block;
@@ -1109,25 +1143,32 @@
  * to the 40px single-track row.
  */
 :where(.ds-table__cell--text-wrap .ds-table__cell-track--text),
-:where(.ds-table__cell--icon-text-wrap .ds-table__cell-track--text) {
+:where(.ds-table__cell--icon-text-wrap .ds-table__cell-track--text),
+:where(.ds-table__cell--score-text-wrap .ds-table__cell-track--text) {
   display: block;
 }
 
 :where(.ds-table__cell--text-wrap.ds-table__cell--text-single .ds-table__cell-primary),
 :where(.ds-table__cell--text-wrap.ds-table__cell--text-multi .ds-table__cell-primary),
 :where(.ds-table__cell--icon-text-wrap.ds-table__cell--icon-text-single .ds-table__cell-primary),
-:where(.ds-table__cell--icon-text-wrap.ds-table__cell--icon-text-multi .ds-table__cell-primary) {
+:where(.ds-table__cell--icon-text-wrap.ds-table__cell--icon-text-multi .ds-table__cell-primary),
+:where(.ds-table__cell--score-text-wrap.ds-table__cell--score-text-single .ds-table__cell-primary),
+:where(.ds-table__cell--score-text-wrap.ds-table__cell--score-text-multi .ds-table__cell-primary) {
   line-height: var(--_table-wrap-primary-line-height);
   padding-block: var(--_table-wrap-primary-padding-block);
 }
 
 :where(.ds-table__cell--text-wrap.ds-table__cell--text-multi .ds-table__cell-copy),
-:where(.ds-table__cell--icon-text-wrap.ds-table__cell--icon-text-multi .ds-table__cell-copy) {
+:where(.ds-table__cell--icon-text-wrap.ds-table__cell--icon-text-multi .ds-table__cell-copy),
+:where(.ds-table__cell--score-text-wrap.ds-table__cell--score-text-multi .ds-table__cell-copy) {
   gap: 0;
 }
 
 :where(.ds-table__cell--text-wrap.ds-table__cell--text-multi .ds-table__cell-secondary),
-:where(.ds-table__cell--icon-text-wrap.ds-table__cell--icon-text-multi .ds-table__cell-secondary) {
+:where(.ds-table__cell--icon-text-wrap.ds-table__cell--icon-text-multi .ds-table__cell-secondary),
+:where(
+  .ds-table__cell--score-text-wrap.ds-table__cell--score-text-multi .ds-table__cell-secondary
+) {
   line-height: var(--_table-wrap-secondary-line-height);
   padding-block: var(--_table-wrap-secondary-padding-block);
 }
@@ -1390,6 +1431,28 @@
   border-block-end: 0;
   background: var(--_table-group-surface);
   background-clip: border-box;
+  cursor: default;
+}
+
+/* Hover/press wash. Keep this on ::before so the dedicated trailing-edge
+ * separator on ::after stays the original 1px surface rule. */
+:where(.ds-table__group-content)::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  background: transparent;
+  pointer-events: none;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  :where(.ds-table__group-content:hover)::before {
+    background: var(--_table-row-hover);
+  }
+}
+
+:where(.ds-table__group-content:active)::before {
+  background: var(--_table-row-pressed);
 }
 
 :where(.ds-table__group-content)::after {
@@ -1397,6 +1460,7 @@
   position: absolute;
   inset-inline: 0;
   inset-block-end: 0;
+  z-index: 1;
   block-size: var(--dimension-stroke-width-012);
   background: var(--_table-border);
   pointer-events: none;
@@ -1434,31 +1498,94 @@
   block-size: var(--dimension-iconography-md);
 }
 
-:where(.ds-table__group-copy) {
-  /* The full-size sm count tag owns the 24px content height; inline padding
-   * preserves the shared text track without making the 40px section row grow. */
+:where(.ds-table__group-content--hero) {
+  align-items: flex-start;
+}
+
+:where(.ds-table__group-hero) {
+  position: relative;
   box-sizing: border-box;
   display: inline-flex;
-  align-items: center;
+  flex: 0 0 auto;
+  align-self: flex-start;
+  /* Same 6px as the extra group-copy inset so the sm figure sits on the text column. */
+  margin-inline-start: var(--dimension-space-075);
+}
+
+:where(.ds-table__group-hero)::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  box-sizing: border-box;
+  border-radius: var(--dimension-radius-025);
+  border: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);
+  pointer-events: none;
+}
+
+:where(.ds-table__table--selectable .ds-table__group-hero),
+:where(.ds-table__sticky-group--selectable .ds-table__group-hero) {
+  /* Margin, not padding: ::after inset:0 must hug the 24px sm fill. */
+  margin-inline-end: var(--dimension-space-100);
+}
+
+:where(.ds-table__group-content--multi) {
+  align-items: flex-start;
+  min-block-size: calc(var(--_table-row-min-block-size) + var(--_table-cell-track-min-block-size));
+}
+
+:where(.ds-table__group-copy) {
+  /* One or two 24px tracks; 8px chrome on group-content keeps 40 / 64 row height. */
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   min-inline-size: 0;
   flex: 1 1 auto;
-  gap: var(--dimension-space-050);
+  gap: 0;
   padding-block: 0;
   padding-inline: var(--dimension-space-050);
 }
 
+:where(.ds-table__group-primary),
+:where(.ds-table__group-accessories) {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  min-inline-size: 0;
+  min-block-size: var(--_table-cell-track-min-block-size);
+  gap: var(--dimension-space-050);
+}
+
+:where(.ds-table__group-accessories ds-tooltip),
+:where(.ds-table__group-accessory-tip) {
+  display: inline-flex;
+  align-items: center;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  min-block-size: var(--_table-cell-track-min-block-size);
+}
+
 :where(.ds-table__table--selectable .ds-table__group-copy),
 :where(.ds-table__sticky-group--selectable .ds-table__group-copy) {
-  padding-inline-start: calc(var(--dimension-space-100) + var(--_table-cell-track-label-inset));
+  /* 8px cell chrome + 4px text-track inset matches header 8+2+2 and body copy. */
+  padding-inline-start: calc(var(--dimension-space-100) + var(--_table-cell-track-padding-inline));
+}
+
+:where(.ds-table__table--selectable .ds-table__group-content--hero .ds-table__group-copy),
+:where(.ds-table__sticky-group--selectable .ds-table__group-content--hero .ds-table__group-copy) {
+  padding-inline-start: var(--dimension-space-050);
 }
 
 :where(.ds-table__group-separator),
-:where(.ds-table__group-count) {
+:where(.ds-table__group-count),
+:where(.ds-table__group-accessory-separator) {
   flex: 0 0 auto;
 }
 
 :where(.ds-table__group-toggle) {
-  align-self: center;
+  --color-interaction-hover: transparent;
+  --color-interaction-pressed: transparent;
   flex: 0 0 auto;
   margin-inline-start: auto;
 }
@@ -1611,6 +1738,10 @@
     background: var(--ds-forced-color-surface);
   }
 
+  :where(.ds-table__group-hero)::after {
+    border-color: var(--ds-forced-color-content);
+  }
+
   :where(.ds-table__row--disabled) {
     color: var(--ds-forced-color-disabled);
     opacity: 1;

package/dist/types/components/CardOverview/card-overview-controller.d.ts

@@ -1,4 +1,5 @@
-import type { CardOverviewVariant, OverviewMetric, SafetyScoreLevel } from './card-overview-types';
+import type { CardOverviewVariant, OverviewMetric } from './card-overview-types';
+export { resolveSafetyScoreLevel } from '../Score/score-model';
 export interface CardOverviewCollapseGeometry {
     active: boolean;
     expandedHeight: number;
@@ -33,7 +34,6 @@ export declare function resolveCardOverviewCollapseGeometry(options: {
     expandedHeight: number;
     compactHeight: number;
 }): CardOverviewCollapseGeometry;
-export declare function resolveSafetyScoreLevel(value: string | number): SafetyScoreLevel | undefined;
 export declare function resolveOverviewRovingIndex(metrics: readonly OverviewMetric[], focusedIndex: number): number;
 export declare function findNextOverviewMetricIndex(metrics: readonly OverviewMetric[], from: number, step: -1 | 1): number;
 //# sourceMappingURL=card-overview-controller.d.ts.map

package/dist/types/components/CardOverview/card-overview-types.d.ts

@@ -1,7 +1,8 @@
 import type { MetricTrend } from '../../utils/metric-change';
+import type { SafetyScoreLevel } from '../Score/score-types';
+export type { SafetyScoreLevel } from '../Score/score-types';
 export type CardOverviewVariant = 'default' | 'compact';
 export type CardOverviewLayout = 'auto' | 'stacked';
-export type SafetyScoreLevel = 'fair' | 'good' | 'excellent';
 /**
  * Leading summary block — the headline figure the rest of the bar contextualises.
  *

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

@@ -0,0 +1,21 @@
+import type { SafetyScoreLevel, ScoreSize } from './score-types';
+export declare class Score {
+    /** Display-ready headline figure. */
+    value: string | number;
+    /**
+     * Visual density matching control height: `sm` 24px, `md` 32px, `lg` 40px.
+     * `lg` is the Card Overview recipe.
+     */
+    size: ScoreSize;
+    /**
+     * Safety-score color level. Numeric values from 0–100 infer fair (0–50),
+     * good (51–80), or excellent (81–100) when this is omitted.
+     */
+    level: SafetyScoreLevel | undefined;
+    /** Replace the figure with a skeleton while data resolves. */
+    isLoading: boolean;
+    /** Accessible name prefix, for example “Safety score”. */
+    label: string;
+    render(): any;
+}
+//# sourceMappingURL=Score.d.ts.map

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

@@ -0,0 +1,3 @@
+export type { SafetyScoreLevel, ScoreSize } from './score-types';
+export { resolveSafetyScoreLevel, resolveScoreLevel } from './score-model';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/Score/score-model.d.ts

@@ -0,0 +1,14 @@
+import { type SafetyScoreLevel } from './score-types';
+export declare function isSafetyScoreLevel(value: unknown): value is SafetyScoreLevel;
+/**
+ * Infer a safety-score color level from a 0–100 figure. Non-numeric or out-of-range
+ * values return undefined so the owner can supply `level` explicitly.
+ */
+export declare function resolveSafetyScoreLevel(value: string | number): SafetyScoreLevel | undefined;
+export declare function resolveScoreLevel(value: string | number, level?: SafetyScoreLevel): SafetyScoreLevel | undefined;
+export declare const SCORE_VALUE_VARIANT: {
+    readonly sm: "text-title-small";
+    readonly md: "text-title-large";
+    readonly lg: "text-display-small";
+};
+//# sourceMappingURL=score-model.d.ts.map

package/dist/types/components/Score/score-types.d.ts

@@ -0,0 +1,5 @@
+export type SafetyScoreLevel = 'fair' | 'good' | 'excellent';
+export type ScoreSize = 'sm' | 'md' | 'lg';
+export declare const SCORE_SIZES: readonly ["sm", "md", "lg"];
+export declare const SAFETY_SCORE_LEVELS: readonly ["fair", "good", "excellent"];
+//# sourceMappingURL=score-types.d.ts.map

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

@@ -230,13 +230,13 @@ export declare class Table {
     private currentLoadedRowCount;
     private createRenderModel;
     private get highlightMatcher();
-    private get virtualizationEnabled();
+    private get rowWindowingEnabled();
     private get virtualViewportMissing();
     private get hasVirtualViewportBounds();
     private estimateVirtualViewportSize;
     private virtualPinnedRowIds;
     private syncVirtualItems;
-    private shouldVirtualize;
+    private shouldWindowRows;
     private get resolvedMaxHeight();
     private get resolvedHeight();
     private warnModelIssues;
@@ -248,6 +248,8 @@ export declare class Table {
     private emitAllSelection;
     private emitGroupSelection;
     private rowEventOwnsActivation;
+    private groupRowEventOwnsCollapse;
+    private handleGroupRowClick;
     private emitRowActivation;
     private syncActionMenu;
     private closeActionMenu;
@@ -275,6 +277,7 @@ export declare class Table {
     private renderRow;
     private emitGroupCollapse;
     private emitAllGroupsCollapse;
+    private renderGroupAccessory;
     private renderGroupContent;
     private formatGroupLoadLabel;
     private renderGroupLoadRow;

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

@@ -1,2 +1,2 @@
-export type { TableCaptionVisibility, TableCellAlign, TableCellAction, TableCellActionDetail, TableCellActionDivider, TableCellActionMenuEntry, TableCellActionMenuItem, TableCellBlank, TableCellEmpty, TableCellLinkTarget, TableCellIcon, TableCellIconText, TableCellImage, TableCellImageTracks, TableCellPrimaryText, TableCellSkeleton, TableCellText, TableCellTextRun, TableCellTextTrack, TableCellTag, TableCellTagItem, TableCellTags, TableCellTagVariant, TableCellValue, TableSkeletonWidth, TableColumn, TableColumnsConfigChangeDetail, TableColumnSticky, TableColumnWidth, TableDataMode, TableDataModeChangeDetail, TableGroup, TableGroupCollapseChangeDetail, TableGroupLoadMoreDetail, TableGroupIntent, TableHeaderSegment, TableGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TableLoadMoreReason, TablePaginationState, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortDirection, TableSortState, } from './table-types';
+export type { TableCaptionVisibility, TableCellAlign, TableCellAction, TableCellActionDetail, TableCellActionDivider, TableCellActionMenuEntry, TableCellActionMenuItem, TableCellBlank, TableCellEmpty, TableCellLinkTarget, TableCellIcon, TableCellIconText, TableCellScoreText, TableCellImage, TableCellImageTracks, TableCellPrimaryText, TableCellSkeleton, TableCellText, TableCellTextRun, TableCellTextTrack, TableCellTag, TableCellTagItem, TableCellTags, TableCellTagVariant, TableCellValue, TableSkeletonWidth, TableColumn, TableColumnsConfigChangeDetail, TableColumnSticky, TableColumnWidth, TableDataMode, TableDataModeChangeDetail, TableGroup, TableGroupAccessory, TableGroupHero, TableGroupCollapseChangeDetail, TableGroupLoadMoreDetail, TableGroupIntent, TableHeaderSegment, TableGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TableLoadMoreReason, TablePaginationState, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortDirection, TableSortState, } from './table-types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,5 +1,6 @@
 import type { TableCellAction, TableCellBlank, TableCellEmpty, TableCellIcon, TableCellImage, TableCellImageTracks, TableCellTag, TableCellTags, TableCellTagVariant, TableCellTextRun, TableCellTextTrack, TableCellValue, TableCellLinkTarget, TableCellLineClamp, TableCellMaxLines, TableColumn } from './table-types';
 import type { IconColor } from '../Icon/Icon';
+import type { SafetyScoreLevel } from '../Score/score-types';
 import type { TextColor } from '../Text/text-types';
 /** Maximum independently colored runs on one secondary or tertiary track. */
 export declare const TABLE_CELL_TEXT_RUN_LIMIT = 3;
@@ -36,6 +37,17 @@ export type TableCellPresentation = {
     variant: 'single' | 'multi' | 'triple';
     wraps: boolean;
     lineClamp: TableCellLineClamp;
+} | {
+    kind: 'score-text';
+    cellType: 'score-text';
+    score: string | number;
+    scoreLevel?: SafetyScoreLevel;
+    scoreLabel: string;
+    scoreLoading: boolean;
+    value: ResolvedTableCellText;
+    variant: 'single' | 'multi' | 'triple';
+    wraps: boolean;
+    lineClamp: TableCellLineClamp;
 } | {
     kind: 'image';
     cellType: 'image';

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

@@ -1,4 +1,4 @@
-import type { TableCellBlank, TableCellAction, TableCellEmpty, TableCellIcon, TableCellIconText, TableCellImage, TableCellPrimaryText, TableCellText, TableCellTag, TableCellTags, TableCellValue, TableColumn, TableGroup, TableRow, TableSortState } from './table-types';
+import type { TableCellBlank, TableCellAction, TableCellEmpty, TableCellIcon, TableCellIconText, TableCellScoreText, TableCellImage, TableCellPrimaryText, TableCellText, TableCellTag, TableCellTags, TableCellValue, TableColumn, TableGroup, TableGroupAccessory, TableGroupHero, TableRow, TableSortState } from './table-types';
 export interface TableSelectionState {
     selectableRowIds: string[];
     selectedLoadedCount: number;
@@ -11,6 +11,7 @@ export declare function isTableCellTag(value: TableCellValue): value is TableCel
 export declare function isTableCellTags(value: TableCellValue): value is TableCellTags;
 export declare function isTableCellIcon(value: TableCellValue): value is TableCellIcon;
 export declare function isTableCellIconText(value: TableCellValue): value is TableCellIconText;
+export declare function isTableCellScoreText(value: TableCellValue): value is TableCellScoreText;
 export declare function isTableCellImage(value: TableCellValue): value is TableCellImage;
 export declare function isTableCellAction(value: TableCellValue): value is TableCellAction;
 export declare function isTableCellEmpty(value: TableCellValue): value is TableCellEmpty;
@@ -44,6 +45,14 @@ export declare function toggleAllLoadedTableRows(selectedRowIds: readonly string
 /** Toggle every selectable loaded row that belongs to a group. */
 export declare function toggleTableGroupSelection(selectedRowIds: readonly string[], groupRows: TableRow[]): string[];
 export declare function resolvedTableGroupCount(group: TableGroup): number;
+/** Accessory items shown on a group header's second track. */
+export declare const TABLE_GROUP_ACCESSORY_LIMIT = 4;
+/** Trim, drop empty copy, and cap accessories at the second-track limit. */
+export declare function tableGroupAccessories(group: TableGroup): TableGroupAccessory[];
+/** Group-header score fill. Same sm density on one- and two-track headers. */
+export declare const TABLE_GROUP_HERO_SCORE_SIZE: "sm";
+/** Resolve a supported group-header hero, or undefined when none is supplied. */
+export declare function tableGroupHero(group: TableGroup): TableGroupHero | undefined;
 export declare const TABLE_GROUP_INTENTS: readonly ["brand", "neutral", "negative", "warning", "caution", "positive"];
 export declare function isTableGroupIntent(value: unknown): value is (typeof TABLE_GROUP_INTENTS)[number];
 export declare function tableGroupIntentClass(intent: (typeof TABLE_GROUP_INTENTS)[number] | undefined): string | undefined;

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

@@ -1,5 +1,5 @@
 import { tableGroupLabelColor, type TableCollapseAllHost, type TableSelectionState } from './table-model';
-import type { TableColumn, TableGroup, TableGroupIntent, TableRow, TableSelectionMode } from './table-types';
+import type { TableColumn, TableGroup, TableGroupAccessory, TableGroupHero, TableGroupIntent, TableRow, TableSelectionMode } from './table-types';
 export type TableGroupCountPresentation = 'loaded-progress' | 'total';
 export interface TableGroupRenderModel {
     group: TableGroup;
@@ -11,6 +11,8 @@ export interface TableGroupRenderModel {
     intentClass: string | undefined;
     labelColor: ReturnType<typeof tableGroupLabelColor>;
     collapsed: boolean;
+    accessories: TableGroupAccessory[];
+    hero: TableGroupHero | undefined;
     selection: TableSelectionState | null;
 }
 export interface TableRenderModel {

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

@@ -15,6 +15,7 @@ export interface TableRowViewOptions {
     highlightFieldIds: string[];
     ariaRowIndex?: number;
     variableVirtualSize?: boolean;
+    intrinsicBlockSize?: number;
     rowKey?: string;
     renderSelectionControl: (label: string, checked: boolean, indeterminate: boolean, disabled: boolean, onActivate: () => void) => unknown;
     renderStickyEdge: (sticky: TableColumn['sticky']) => unknown;
@@ -25,5 +26,5 @@ export interface TableRowViewOptions {
     onActionMenuToggle: (row: TableRow, column: TableColumn, event: MouseEvent) => void;
 }
 /** Render one semantic body row and the complete declarative table-cell vocabulary. */
-export declare function renderTableRow({ row, model, visibleColumns, emptyCellLabel, actionMenuElementId, actionMenu, highlightMatcher, highlightFieldIds, ariaRowIndex, variableVirtualSize, rowKey, renderSelectionControl, renderStickyEdge, onRowActivate, onRowKeyDown, onRowSelection, onCellAction, onActionMenuToggle, }: TableRowViewOptions): any;
+export declare function renderTableRow({ row, model, visibleColumns, emptyCellLabel, actionMenuElementId, actionMenu, highlightMatcher, highlightFieldIds, ariaRowIndex, variableVirtualSize, intrinsicBlockSize, rowKey, renderSelectionControl, renderStickyEdge, onRowActivate, onRowKeyDown, onRowSelection, onCellAction, onActionMenuToggle, }: TableRowViewOptions): any;
 //# sourceMappingURL=table-row-view.d.ts.map