@ai-matrx/design-system 0.39.1 → 0.39.3

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## 0.39.3
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/design-system/v0.39.2..npm/design-system/v0.39.3 -- apps/shared/design-system`).
+No source changes intended and no consumer action required.
+
+## Unreleased
+
+### Lane UI-FIX-19 (2026-09-24)
+
+* **A row's colour wins at every width.** `MatrxDataTable` decides a row's background once, in
+  `row-background.ts` (`rowBackground`), for the row and its frozen cells alike: colour tint, then
+  keyboard highlight / open row / ticked row, then the zebra stripe, then the card. The stripe was
+  `sm:bg-muted/20` and the tint a bare `bg-*`; tailwind-merge keeps both, and at ≥640px the stripe
+  won the cascade, so every other coloured row went plain on a desktop (VERIFIER-19 #5). Under a
+  tint no stripe, selection wash or hover wash is emitted; the keyboard's ring stays. Suite
+  `MatrxDataTable.tint-beats-zebra.test.tsx`: RED on the prior bytes ("row 2 (Quoting) stripe:
+  sm:bg-muted/20"), GREEN 3/3. No consumer action.
+
+## 0.39.2
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/design-system/v0.39.1..npm/design-system/v0.39.2 -- apps/shared/design-system`).
+No source changes intended and no consumer action required.
+
 ## 0.39.1
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see

package/dist/data-table/index.cjs

@@ -10194,6 +10194,40 @@ var FROZEN_CELL_TINT_CLASS = {
 };
 var FROZEN_EDGE_CLASS = "sm:shadow-[inset_-1px_0_0_var(--border)]";
 
+// src/data-table/row-background.ts
+function rowBackground(state) {
+  const ring = state.highlighted ? " ring-1 ring-inset ring-primary/60" : "";
+  if (state.tint) {
+    return {
+      row: ROW_TINT_CLASS[state.tint] + ring,
+      frozen: FROZEN_ROW_TINT_CLASS[state.tint],
+      frozenHover: false
+    };
+  }
+  const hover = state.hoverable ? "sm:hover:bg-muted/50" : "";
+  if (state.highlighted) {
+    return { row: `bg-muted${ring} ${hover}`.trim(), frozen: "sm:bg-muted", frozenHover: state.hoverable };
+  }
+  if (state.selected) {
+    return { row: `bg-muted ${hover}`.trim(), frozen: "sm:bg-muted", frozenHover: state.hoverable };
+  }
+  if (state.checked) {
+    return {
+      row: `bg-primary/5 ${hover}`.trim(),
+      frozen: "sm:bg-[color-mix(in_oklab,var(--color-primary)_5%,var(--color-card))]",
+      frozenHover: state.hoverable
+    };
+  }
+  if (state.zebraOdd) {
+    return {
+      row: `sm:bg-muted/20 ${hover}`.trim(),
+      frozen: "sm:bg-[color-mix(in_oklab,var(--color-muted)_20%,var(--color-card))]",
+      frozenHover: state.hoverable
+    };
+  }
+  return { row: hover, frozen: "sm:bg-card", frozenHover: state.hoverable };
+}
+
 // src/field-formats/registry.ts
 var import_format3 = require("@ai-matrx/kit/format");
 function formatSignedDuration(totalSeconds) {
@@ -12892,10 +12926,6 @@ function MatrxDataTableCore({
       tableStyle.choiceColorFor ?? noChoiceColor
     );
   };
-  const rowTintClass = (row, id) => {
-    const color = rowTintColor(row, id);
-    return color ? ROW_TINT_CLASS[color] : void 0;
-  };
   const cellTintColor = (row, id, colId) => {
     if (!tableStyle) return null;
     return resolveCellColor(
@@ -14563,8 +14593,8 @@ function MatrxDataTableCore({
                     role: "status",
                     className: "flex shrink-0 items-start gap-2 rounded-md border border-amber-300/70 bg-amber-50 px-3 py-2 text-xs text-amber-900 dark:border-amber-500/40 dark:bg-amber-950/40 dark:text-amber-200",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "font-semibold", children: coverageResult.badge }),
-                      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { children: coverageResult.notice })
+                      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "shrink-0 whitespace-nowrap font-semibold", children: coverageResult.badge }),
+                      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "min-w-0", children: coverageResult.notice })
                     ]
                   }
                 ) : null,
@@ -15026,9 +15056,16 @@ function MatrxDataTableCore({
                                   const displayRow = applyRowEdits(row, rowEdits);
                                   const controls = buildRecordControls(displayRow);
                                   const isChecked = selectedIdSet.has(id);
-                                  const rowTint = rowTintColor(row, id);
-                                  const canHoverFrozenCell = !rowTint && (detailEnabled || Boolean(onRowOpen) || canExpandRow(row));
-                                  const frozenRowBackgroundClass = rowTint ? FROZEN_ROW_TINT_CLASS[rowTint] : highlightedIndex === index || isSelected ? "sm:bg-muted" : isChecked ? "sm:bg-[color-mix(in_oklab,var(--color-primary)_5%,var(--color-card))]" : zebra && index % 2 === 1 ? "sm:bg-[color-mix(in_oklab,var(--color-muted)_20%,var(--color-card))]" : "sm:bg-card";
+                                  const background = rowBackground({
+                                    tint: rowTintColor(row, id),
+                                    highlighted: highlightedIndex === index,
+                                    selected: isSelected,
+                                    checked: isChecked,
+                                    zebraOdd: zebra && index % 2 === 1,
+                                    hoverable: detailEnabled || Boolean(onRowOpen) || canExpandRow(row)
+                                  });
+                                  const canHoverFrozenCell = background.frozenHover;
+                                  const frozenRowBackgroundClass = background.frozen;
                                   const rowNode = /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                                     "tr",
                                     {
@@ -15057,19 +15094,13 @@ function MatrxDataTableCore({
                                         // horizontally. The translucent zebra/hover tints remain
                                         // desktop-only so densely layered mobile content stays crisp.
                                         "group/matrx-row border-b border-border/60 bg-card transition-colors",
-                                        (detailEnabled || Boolean(onRowOpen) || canExpandRow(row)) && "cursor-pointer sm:hover:bg-muted/50",
-                                        isSelected && "bg-muted",
-                                        isChecked && "bg-primary/5",
-                                        highlightedIndex === index && "bg-muted ring-1 ring-inset ring-primary/60",
+                                        (detailEnabled || Boolean(onRowOpen) || canExpandRow(row)) && "cursor-pointer",
                                         rowClassName?.(row, index),
                                         draggedRowId === id && "opacity-40",
-                                        zebra && index % 2 === 1 && !isSelected && !isChecked && "sm:bg-muted/20",
-                                        // LAST so a colored row STAYS colored while selected
-                                        // and on an odd zebra stripe — `cn` is tailwind-merge
-                                        // and keeps the last background of a group. The
-                                        // checkbox already says the row is selected; the tint
-                                        // is the only thing saying WHY the row matters.
-                                        rowTintClass(row, id)
+                                        // LAST, and decided once: tint, then highlight / open / ticked, then
+                                        // the zebra stripe (./row-background.ts). Under a tint no stripe is
+                                        // emitted at all, so no `sm:` class can win the cascade over it.
+                                        background.row
                                       ),
                                       children: [
                                         selection ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(