@ds-mo/ui 14.33.1 → 14.34.0

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.1",
+  "version": "14.34.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",