@ds-mo/ui 14.4.2 → 14.5.0

package/dist/styles/table.css

@@ -8,16 +8,22 @@
  */
 
 :where(.ds-table) {
-  --_table-cell-track-min-block-size: calc(
-    var(--dimension-size-400) - var(--dimension-space-050)
-  );
+  --_table-cell-track-min-block-size: var(--dimension-size-300);
   --_table-cell-track-padding-inline: calc(
     var(--dimension-space-075) - var(--dimension-space-025)
   );
   --_table-cell-track-label-inset: var(--dimension-space-025);
   --_table-caption-bar-block-size: var(--dimension-size-600);
-  --_table-image-block-size: calc(
-    var(--dimension-size-800) - var(--dimension-space-200)
+  --_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-surface: var(--ds-table-surface, var(--color-background-primary));
   --_table-header-surface: var(--ds-table-header-surface, var(--color-background-primary));
@@ -762,34 +768,43 @@
 
 :where(.ds-table__cell-track--text) {
   inline-size: 100%;
-  padding-inline: var(--_table-cell-track-label-inset);
-}
-
-:where(.ds-table__cell--text-single),
-:where(.ds-table__cell--text-multi),
-:where(.ds-table__cell--primary-text),
-:where(.ds-table__cell--empty),
-:where(.ds-table__cell--blank) {
-  padding: var(--dimension-space-125);
+  padding-inline: var(--_table-cell-track-padding-inline);
 }
 
 :where(.ds-table__cell--text-single .ds-table__cell-content),
 :where(.ds-table__cell--text-multi .ds-table__cell-content),
+:where(.ds-table__cell--text-triple .ds-table__cell-content),
 :where(.ds-table__cell--primary-text .ds-table__cell-content),
 :where(.ds-table__cell--empty .ds-table__cell-content),
 :where(.ds-table__cell--blank .ds-table__cell-content),
 :where(.ds-table__cell--text-single .ds-table__cell-track),
 :where(.ds-table__cell--text-multi .ds-table__cell-track),
+:where(.ds-table__cell--text-triple .ds-table__cell-track),
 :where(.ds-table__cell--primary-text .ds-table__cell-track),
 :where(.ds-table__cell--empty .ds-table__cell-track) {
   min-block-size: 0;
 }
 
-:where(.ds-table__cell--text-multi .ds-table__cell-copy) {
-  gap: var(--dimension-space-050);
+: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);
+}
+
+/*
+ * 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. Header and group rows keep their own recipes.
+ */
+:where(.ds-table__cell-primary),
+:where(.ds-table__cell--empty .ds-table__cell-track) {
+  padding-block: var(--dimension-space-025);
 }
 
-:where(.ds-table__cell--text-multi .ds-table__cell-secondary) {
+: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);
 }
 
@@ -797,13 +812,8 @@
   padding-block: 0;
 }
 
-:where(.ds-table__cell--tag-tag-only),
-:where(.ds-table__cell--tag-tag-with-text) {
-  padding: var(--dimension-space-100);
-}
-
-:where(.ds-table__cell--tag-text-with-tag) {
-  padding: var(--dimension-space-125);
+:where(.ds-table__cell--tag-tag-only .ds-table__cell-content) {
+  min-block-size: 0;
 }
 
 :where(.ds-table__cell-tag-stack) {
@@ -830,12 +840,13 @@
 }
 
 :where(.ds-table__cell-tag-stack--text-with-tag .ds-table__cell-tag-text) {
-  padding-inline: var(--_table-cell-track-label-inset);
+  padding-inline: var(--_table-cell-track-padding-inline);
+  padding-block: var(--dimension-space-025);
   min-block-size: 0;
 }
 
 :where(.ds-table__cell-tag-stack--text-with-tag) {
-  gap: var(--dimension-space-050);
+  gap: var(--dimension-space-025);
 }
 
 :where(.ds-table__cell-tag-control-track) {
@@ -848,21 +859,56 @@
   min-block-size: var(--dimension-size-250);
 }
 
-:where(.ds-table__cell--icon) {
-  padding: var(--dimension-space-125);
-}
-
 :where(.ds-table__cell--icon .ds-table__cell-content) {
   align-items: center;
   justify-content: center;
   inline-size: 100%;
-  min-block-size: var(--dimension-iconography-md);
+  min-block-size: var(--dimension-size-300);
 }
 
-:where(.ds-table__cell--image) {
-  padding: var(--dimension-space-100);
+/*
+ * Icon-and-text: md prefix in a 24px slot (2px padding on every side), then a
+ * 2px flex gap. Text tracks keep their own 4px inline and 2px block padding.
+ */
+:where(.ds-table__cell-icon-text) {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--dimension-space-025);
+  inline-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+}
+
+:where(.ds-table__cell-icon-text-icon) {
+  box-sizing: border-box;
+  display: flex;
+  flex: none;
+  align-items: flex-start;
+  min-block-size: var(--_table-cell-track-min-block-size);
+  padding: var(--dimension-space-025);
+}
+
+:where(.ds-table__cell--icon-text .ds-table__cell-content),
+:where(.ds-table__cell--icon-text .ds-table__cell-track) {
+  min-block-size: 0;
+}
+
+: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);
+}
+
+: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);
 }
 
+/*
+ * 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.
+ */
 :where(.ds-table__cell-image) {
   display: block;
   box-sizing: border-box;
@@ -874,6 +920,14 @@
   border-radius: var(--dimension-radius-025);
 }
 
+:where(.ds-table__cell--image-multi .ds-table__cell-image) {
+  block-size: var(--_table-image-block-size-multi);
+}
+
+:where(.ds-table__cell--image-triple .ds-table__cell-image) {
+  block-size: var(--_table-image-block-size-triple);
+}
+
 :where(.ds-table__cell-image-content),
 :where(.ds-table__cell-image-placeholder) {
   display: block;
@@ -885,19 +939,33 @@
   object-fit: cover;
 }
 
-:where(.ds-table__cell--action) {
-  padding: var(--dimension-space-100);
-}
-
 :where(.ds-table__cell--action .ds-table__cell-content) {
   min-block-size: var(--dimension-size-300);
 }
 
 :where(.ds-table__cell-primary),
-:where(.ds-table__cell-secondary) {
+:where(.ds-table__cell-secondary),
+:where(.ds-table__cell-tertiary),
+:where(.ds-table__cell-run),
+:where(.ds-table__cell-link) {
   min-inline-size: 0;
 }
 
+:where(.ds-table__cell-track--runs) {
+  overflow: hidden;
+  gap: var(--dimension-space-050);
+}
+
+:where(.ds-table__cell-run-separator) {
+  flex: none;
+}
+
+:where(.ds-table__cell-link) {
+  display: flex;
+  max-inline-size: 100%;
+  inline-size: 100%;
+}
+
 :where(.ds-table__cell-copy--wrap) {
   overflow-wrap: anywhere;
 }
@@ -905,6 +973,7 @@
 :where(.ds-table__cell--align-center),
 :where(.ds-table__cell--align-center .ds-table__cell-content),
 :where(.ds-table__cell--align-center .ds-table__cell-track),
+:where(.ds-table__cell--align-center .ds-table__cell-link),
 :where(.ds-table__cell--align-center .ds-table__header-static),
 :where(.ds-table__cell--align-center .ds-table__header-labels),
 :where(.ds-table__cell--align-center .ds-table__header-label) {
@@ -915,6 +984,7 @@
 :where(.ds-table__cell--align-end),
 :where(.ds-table__cell--align-end .ds-table__cell-content),
 :where(.ds-table__cell--align-end .ds-table__cell-track),
+:where(.ds-table__cell--align-end .ds-table__cell-link),
 :where(.ds-table__cell--align-end .ds-table__header-static),
 :where(.ds-table__cell--align-end .ds-table__header-labels),
 :where(.ds-table__cell--align-end .ds-table__header-label) {
@@ -1054,7 +1124,7 @@
 }
 
 :where(.ds-table__cell.ds-table__selection-cell) {
-  padding: var(--dimension-space-125);
+  padding: var(--_table-cell-padding-block) var(--_table-cell-padding-inline);
 }
 
 :where(.ds-table__selection-control) {
@@ -1077,9 +1147,9 @@
 }
 
 :where(.ds-table__cell.ds-table__selection-cell .ds-table__selection-control) {
-  inline-size: var(--dimension-iconography-md);
-  min-block-size: var(--dimension-iconography-md);
-  block-size: var(--dimension-iconography-md);
+  inline-size: var(--dimension-size-300);
+  min-block-size: var(--dimension-size-300);
+  block-size: var(--dimension-size-300);
 }
 
 :where(.ds-table__selection-control:disabled) {

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

@@ -175,6 +175,8 @@ export declare class Table {
     private renderColgroup;
     private renderHeader;
     private renderCellValue;
+    private renderTextCopy;
+    private renderTextTrack;
     private renderRow;
     private emitGroupCollapse;
     private emitAllGroupsCollapse;

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

@@ -1,2 +1,2 @@
-export type { TableCaptionVisibility, TableCellAlign, TableCellAction, TableCellActionDetail, TableCellBlank, TableCellEmpty, TableCellIcon, TableCellImage, TableCellPrimaryText, TableCellSkeleton, TableCellText, TableCellTag, TableCellTagVariant, TableCellValue, TableSkeletonWidth, TableColumn, TableColumnSticky, TableColumnWidth, TableDataMode, 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, TableCellBlank, TableCellEmpty, TableCellLinkTarget, TableCellIcon, TableCellIconText, TableCellImage, TableCellImageTracks, TableCellPrimaryText, TableCellSkeleton, TableCellText, TableCellTextRun, TableCellTextTrack, TableCellTag, TableCellTagVariant, TableCellValue, TableSkeletonWidth, TableColumn, TableColumnSticky, TableColumnWidth, TableDataMode, TableGroup, 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,9 +1,16 @@
-import type { TableCellAction, TableCellBlank, TableCellEmpty, TableCellIcon, TableCellImage, TableCellTag, TableCellTagVariant, TableCellValue, TableColumn } from './table-types';
+import type { TableCellAction, TableCellBlank, TableCellEmpty, TableCellIcon, TableCellImage, TableCellImageTracks, TableCellTag, TableCellTagVariant, TableCellTextRun, TableCellTextTrack, TableCellValue, TableCellLinkTarget, TableColumn } from './table-types';
+import type { IconColor } from '../Icon/Icon';
 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;
 export interface ResolvedTableCellText {
     primary: string | number;
-    secondary?: string | number;
+    secondary?: TableCellTextRun[];
+    tertiary?: TableCellTextRun[];
     secondaryColor?: TextColor;
+    tertiaryColor?: TextColor;
+    href?: string;
+    target?: TableCellLinkTarget;
     wrap?: boolean;
     fontFeature?: 'normal' | 'tabular-nums';
 }
@@ -19,10 +26,20 @@ export type TableCellPresentation = {
     kind: 'icon';
     cellType: 'icon';
     value: TableCellIcon;
+} | {
+    kind: 'icon-text';
+    cellType: 'icon-text';
+    icon: string;
+    iconColor?: IconColor;
+    iconLabel?: string;
+    value: ResolvedTableCellText;
+    variant: 'single' | 'multi' | 'triple';
+    wraps: boolean;
 } | {
     kind: 'image';
     cellType: 'image';
     value: TableCellImage;
+    variant: 'single' | 'multi' | 'triple';
 } | {
     kind: 'action';
     cellType: 'action';
@@ -38,9 +55,15 @@ export type TableCellPresentation = {
     value: ResolvedTableCellText;
     primaryText: boolean;
     singleLine: boolean;
-    variant: 'single' | 'multi' | 'primary-pair';
+    variant: 'single' | 'multi' | 'triple' | 'primary-pair';
     wraps: boolean;
 };
+/** Resolve an image cell's track stack; unknown values fall back to one track. */
+export declare function resolveTableCellImageTracks(tracks: TableCellImage['tracks']): TableCellImageTracks;
+/** Map an image track stack onto the shared single/multi/triple cell variant. */
+export declare function tableCellImageVariant(tracks: TableCellImageTracks): 'single' | 'multi' | 'triple';
+/** Collapse a consumer track into at most three non-empty runs. */
+export declare function normalizeTableCellTextTrack(track: TableCellTextTrack | number | undefined): TableCellTextRun[] | undefined;
 /** Resolve a cell's semantic and visual recipe once for both markup and classes. */
 export declare function resolveTableCellPresentation(value: TableCellValue, column: TableColumn): TableCellPresentation;
 //# sourceMappingURL=table-cell-model.d.ts.map

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

@@ -1,4 +1,4 @@
-import type { TableCellBlank, TableCellAction, TableCellEmpty, TableCellIcon, TableCellImage, TableCellPrimaryText, TableCellText, TableCellTag, TableCellValue, TableColumn, TableGroup, TableRow, TableSortState } from './table-types';
+import type { TableCellBlank, TableCellAction, TableCellEmpty, TableCellIcon, TableCellIconText, TableCellImage, TableCellPrimaryText, TableCellText, TableCellTag, TableCellValue, TableColumn, TableGroup, TableRow, TableSortState } from './table-types';
 export interface TableSelectionState {
     selectableRowIds: string[];
     selectedLoadedCount: number;
@@ -9,6 +9,7 @@ export declare function isTableCellText(value: TableCellValue): value is TableCe
 export declare function isTableCellPrimaryText(value: TableCellValue): value is TableCellPrimaryText;
 export declare function isTableCellTag(value: TableCellValue): value is TableCellTag;
 export declare function isTableCellIcon(value: TableCellValue): value is TableCellIcon;
+export declare function isTableCellIconText(value: TableCellValue): value is TableCellIconText;
 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;

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

@@ -5,6 +5,7 @@ import type { PaginationState } from '../Pagination/pagination-types';
 export type TableSortDirection = 'asc' | 'desc';
 export type TableSelectionMode = 'none' | 'multiple';
 export type TableCellAlign = 'start' | 'center' | 'end';
+export type TableCellLinkTarget = '_self' | '_blank';
 export type TableColumnSticky = 'start' | 'end';
 export type TableCaptionVisibility = 'visible' | 'hidden';
 export type TableLoadMoreMode = 'auto' | 'manual';
@@ -31,12 +32,28 @@ export interface TableGroupingState {
     columnId: string;
     direction: TableSortDirection;
 }
-/** Standard two-line cell content owned by the table renderer. */
+/** One independently colored run inside a secondary or tertiary track. */
+export interface TableCellTextRun {
+    text: string;
+    /** Defaults to the track’s standard color. */
+    color?: TextColor;
+}
+/** A secondary or tertiary track: one string, or up to three colorable runs. */
+export type TableCellTextTrack = string | TableCellTextRun[];
+/** Standard two- or three-line cell content owned by the table renderer. */
 export interface TableCellText {
     primary: string | number;
-    secondary?: string;
-    /** Optional semantic foreground for secondary copy; defaults to the standard secondary color. */
+    secondary?: TableCellTextTrack;
+    /** Third subdued track; ignored on dual-primary cells. */
+    tertiary?: TableCellTextTrack;
+    /** Optional semantic foreground for a string secondary track. */
     secondaryColor?: TextColor;
+    /** Optional semantic foreground for a string tertiary track. */
+    tertiaryColor?: TextColor;
+    /** Application-owned URL for the primary track only. Scalars stay unlinked. */
+    href?: string;
+    /** Native anchor target for a resolved primary link. */
+    target?: TableCellLinkTarget;
     /** Allow this cell to wrap even when its column truncates by default. */
     wrap?: boolean;
     fontFeature?: 'normal' | 'tabular-nums';
@@ -46,6 +63,10 @@ export interface TableCellPrimaryText {
     kind: 'primary-text';
     primary: string | number;
     secondary: string | number;
+    /** Application-owned URL for the primary track only. */
+    href?: string;
+    /** Native anchor target for a resolved primary link. */
+    target?: TableCellLinkTarget;
     /** Allow this cell to wrap even when its column truncates by default. */
     wrap?: boolean;
     fontFeature?: 'normal' | 'tabular-nums';
@@ -69,6 +90,29 @@ export interface TableCellIcon {
     /** Application-owned value used when this icon column participates in sorting. */
     sortValue?: string | number | boolean;
 }
+/**
+ * Prefix icon beside a text copy stack. Independent of icon-only and plain
+ * text cells so those recipes stay unchanged.
+ */
+export interface TableCellIconText {
+    kind: 'icon-text';
+    /** Exact canonical IcoMo export name. */
+    icon: string;
+    iconColor?: IconColor;
+    /** Accessible name. Omit when the glyph is decorative. */
+    iconLabel?: string;
+    primary: string | number;
+    secondary?: TableCellTextTrack;
+    tertiary?: TableCellTextTrack;
+    secondaryColor?: TextColor;
+    tertiaryColor?: TextColor;
+    href?: string;
+    target?: TableCellLinkTarget;
+    wrap?: boolean;
+    fontFeature?: 'normal' | 'tabular-nums';
+}
+/** Body-row track stack an image preview occupies. */
+export type TableCellImageTracks = 1 | 2 | 3;
 /** Declarative 16:9 image preview rendered by the table's standard cell primitive. */
 export interface TableCellImage {
     kind: 'image';
@@ -76,6 +120,11 @@ export interface TableCellImage {
     src?: string;
     /** Accessible description for either the image or its placeholder. */
     alt: string;
+    /**
+     * Which body-row contract the preview fills. The thumbnail height is that
+     * cell height minus 8px padding; width follows 16:9. Defaults to 1.
+     */
+    tracks?: TableCellImageTracks;
 }
 interface TableCellActionBase {
     kind: 'action';
@@ -120,23 +169,32 @@ export type TableCellTag = TableCellTagBase & ({
     variant: Exclude<TableCellTagVariant, 'tag-only'>;
     text: string;
 });
-export type TableCellValue = string | number | null | undefined | TableCellText | TableCellPrimaryText | TableCellTag | TableCellIcon | TableCellImage | TableCellAction | TableCellEmpty | TableCellBlank;
+export type TableCellValue = string | number | null | undefined | TableCellText | TableCellPrimaryText | TableCellTag | TableCellIcon | TableCellIconText | TableCellImage | TableCellAction | TableCellEmpty | TableCellBlank;
 export type TableSkeletonWidth = string | number;
 /** Representative loading geometry for one table column. */
 export type TableCellSkeleton = {
     kind: 'text';
-    /** One track for scalar content, two for primary and secondary copy. */
-    lines?: 1 | 2;
+    /** One track for scalar content, two for primary and secondary, three when tertiary is present. */
+    lines?: 1 | 2 | 3;
     primaryWidth?: TableSkeletonWidth;
     secondaryWidth?: TableSkeletonWidth;
+    tertiaryWidth?: TableSkeletonWidth;
 } | {
     kind: 'image';
+    /** Match the loaded image cell's track stack. Defaults to 1. */
+    tracks?: TableCellImageTracks;
 } | {
     kind: 'tag';
     width?: TableSkeletonWidth;
 } | {
     kind: 'icon';
     rounded?: boolean;
+} | {
+    kind: 'icon-text';
+    lines?: 1 | 2 | 3;
+    primaryWidth?: TableSkeletonWidth;
+    secondaryWidth?: TableSkeletonWidth;
+    tertiaryWidth?: TableSkeletonWidth;
 } | {
     kind: 'action';
     /** Icon actions use a square control canvas; labeled actions may provide a wider width. */

package/package.json

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