@tensor_1/tokens 2.15.0 → 2.17.0

package/build/css/tokens.css

@@ -23,6 +23,7 @@
     --uix-accent-hover: color-mix(in srgb, var(--uix-accent) 88%, #000000);
     --uix-accent-fg: var(--uix-brand-fg,#FFFFFF);
     --uix-link: var(--uix-brand,#1447E6);
+    --uix-accent-text: color-mix(in srgb, var(--uix-accent) 65%, #000000);
     --uix-ring: var(--uix-brand,#1447E6);
     --uix-brand-muted: color-mix(in srgb, var(--uix-accent) 12%, transparent);
     --uix-success: #047857;
@@ -138,19 +139,19 @@
     --uix-font-sans: "Inter",system-ui,sans-serif;
     --uix-font-heading: "IBM Plex Sans","Inter",system-ui,sans-serif;
     --uix-font-mono: "IBM Plex Mono",ui-monospace,monospace;
-    --uix-text-display: 40px;
+    --uix-text-display: 2.5rem;
     --uix-leading-display: 1.05;
-    --uix-text-data-hero: 34px;
+    --uix-text-data-hero: 2.125rem;
     --uix-leading-data-hero: 1.1;
-    --uix-text-h2: 24px;
+    --uix-text-h2: 1.5rem;
     --uix-leading-h2: 1.15;
-    --uix-text-h3: 15px;
+    --uix-text-h3: 0.9375rem;
     --uix-leading-h3: 1.3;
-    --uix-text-body: 14px;
+    --uix-text-body: 0.875rem;
     --uix-leading-body: 1.5;
-    --uix-text-meta: 12.5px;
+    --uix-text-meta: 0.78125rem;
     --uix-leading-meta: 1.4;
-    --uix-text-eyebrow: 11px;
+    --uix-text-eyebrow: 0.6875rem;
     --uix-leading-eyebrow: 1.2;
     --uix-tracking-tight: -0.02em;
     --uix-tracking-eyebrow: 0.06em;
@@ -172,6 +173,7 @@
     --uix-accent: var(--uix-brand,#2563EB);
     --uix-accent-hover: color-mix(in srgb, var(--uix-accent) 82%, #FFFFFF);
     --uix-link: color-mix(in srgb, var(--uix-brand,#5B8DEF) 70%, #FFFFFF);
+    --uix-accent-text: color-mix(in srgb, var(--uix-accent) 70%, #FFFFFF);
     --uix-ring: var(--uix-brand,#3080FF);
     --uix-brand-muted: color-mix(in srgb, var(--uix-accent) 16%, transparent);
     --uix-success: #00D294;

package/build/tailwind/preset.cjs

@@ -24,6 +24,7 @@ module.exports = {
       "uix-accent-hover": "var(--uix-accent-hover)",
       "uix-accent-fg": "var(--uix-accent-fg)",
       "uix-link": "var(--uix-link)",
+      "uix-accent-text": "var(--uix-accent-text)",
       "uix-ring": "var(--uix-ring)",
       "uix-brand-muted": "var(--uix-brand-muted)",
       "uix-success": "var(--uix-success)",

package/build/tailwind/theme.css

@@ -21,6 +21,7 @@
   --color-uix-accent-hover: var(--uix-accent-hover);
   --color-uix-accent-fg: var(--uix-accent-fg);
   --color-uix-link: var(--uix-link);
+  --color-uix-accent-text: var(--uix-accent-text);
   --color-uix-ring: var(--uix-ring);
   --color-uix-brand-muted: var(--uix-brand-muted);
   --color-uix-success: var(--uix-success);

package/build/ts/tokens.d.ts

@@ -1,5 +1,5 @@
 /* GENERATED — do not edit. */
-export type UixTokenName = "bg-app" | "bg-subtle" | "bg-hover" | "bg-active" | "surface" | "surface-2" | "surface-3" | "border" | "border-strong" | "text" | "text-hushed" | "text-muted" | "text-reverse" | "text-hushed-reverse" | "accent" | "accent-dark" | "accent-light" | "accent-hover" | "accent-fg" | "link" | "ring" | "brand-muted" | "success" | "success-fg" | "success-bg" | "warning" | "warning-fg" | "warning-bg" | "warning-text" | "info" | "info-fg" | "info-bg" | "info-text" | "danger" | "danger-fg" | "danger-bg" | "danger-text" | "amber" | "amber-text" | "amber-bg" | "attention" | "attention-bg" | "attention-text" | "attention-solid" | "overdue" | "overdue-bg" | "overdue-text" | "overdue-solid" | "sev-4" | "sev-4-bg" | "sev-4-text" | "sev-5" | "sev-5-bg" | "sev-5-text" | "success-solid" | "warning-solid" | "info-solid" | "danger-solid" | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-6" | "chart-7" | "chart-8" | "chart-neutral" | "row" | "row-alt" | "row-pinned-bg" | "row-selected-bg" | "scrollbar-thumb" | "scrollbar-thumb-hover" | "scrollbar-track" | "scrim" | "scrim-strong" | "shadow-sm" | "shadow-popover" | "shadow-overlay" | "highlight-top" | "ease-out" | "ease-out-strong" | "ease-in" | "ease-in-out" | "ease-spring" | "dur-fast" | "dur" | "dur-slow" | "dur-slower" | "lift" | "z-raised" | "z-sticky" | "z-dropdown" | "z-overlay" | "z-tooltip" | "z-toast" | "radius-xs" | "radius-sm" | "radius-md" | "radius-lg" | "radius-pill" | "row-h" | "row-h-compact" | "row-h-comfortable" | "control-h" | "sidebar-w" | "sidebar-w-rail" | "topbar-h" | "scrollbar-size" | "icon-sm" | "icon-md" | "icon-lg" | "peek-w" | "col-w-xs" | "col-w-sm" | "col-w-md" | "col-w-lg" | "col-w-xl" | "col-title-min" | "space-0" | "space-1" | "space-2" | "space-3" | "space-4" | "space-5" | "space-6" | "space-7" | "space-8" | "space-9" | "space-10" | "space-11" | "space-12" | "font-sans" | "font-heading" | "font-mono" | "text-display" | "leading-display" | "text-data-hero" | "leading-data-hero" | "text-h2" | "leading-h2" | "text-h3" | "leading-h3" | "text-body" | "leading-body" | "text-meta" | "leading-meta" | "text-eyebrow" | "leading-eyebrow" | "tracking-tight" | "tracking-eyebrow";
+export type UixTokenName = "bg-app" | "bg-subtle" | "bg-hover" | "bg-active" | "surface" | "surface-2" | "surface-3" | "border" | "border-strong" | "text" | "text-hushed" | "text-muted" | "text-reverse" | "text-hushed-reverse" | "accent" | "accent-dark" | "accent-light" | "accent-hover" | "accent-fg" | "link" | "accent-text" | "ring" | "brand-muted" | "success" | "success-fg" | "success-bg" | "warning" | "warning-fg" | "warning-bg" | "warning-text" | "info" | "info-fg" | "info-bg" | "info-text" | "danger" | "danger-fg" | "danger-bg" | "danger-text" | "amber" | "amber-text" | "amber-bg" | "attention" | "attention-bg" | "attention-text" | "attention-solid" | "overdue" | "overdue-bg" | "overdue-text" | "overdue-solid" | "sev-4" | "sev-4-bg" | "sev-4-text" | "sev-5" | "sev-5-bg" | "sev-5-text" | "success-solid" | "warning-solid" | "info-solid" | "danger-solid" | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-6" | "chart-7" | "chart-8" | "chart-neutral" | "row" | "row-alt" | "row-pinned-bg" | "row-selected-bg" | "scrollbar-thumb" | "scrollbar-thumb-hover" | "scrollbar-track" | "scrim" | "scrim-strong" | "shadow-sm" | "shadow-popover" | "shadow-overlay" | "highlight-top" | "ease-out" | "ease-out-strong" | "ease-in" | "ease-in-out" | "ease-spring" | "dur-fast" | "dur" | "dur-slow" | "dur-slower" | "lift" | "z-raised" | "z-sticky" | "z-dropdown" | "z-overlay" | "z-tooltip" | "z-toast" | "radius-xs" | "radius-sm" | "radius-md" | "radius-lg" | "radius-pill" | "row-h" | "row-h-compact" | "row-h-comfortable" | "control-h" | "sidebar-w" | "sidebar-w-rail" | "topbar-h" | "scrollbar-size" | "icon-sm" | "icon-md" | "icon-lg" | "peek-w" | "col-w-xs" | "col-w-sm" | "col-w-md" | "col-w-lg" | "col-w-xl" | "col-title-min" | "space-0" | "space-1" | "space-2" | "space-3" | "space-4" | "space-5" | "space-6" | "space-7" | "space-8" | "space-9" | "space-10" | "space-11" | "space-12" | "font-sans" | "font-heading" | "font-mono" | "text-display" | "leading-display" | "text-data-hero" | "leading-data-hero" | "text-h2" | "leading-h2" | "text-h3" | "leading-h3" | "text-body" | "leading-body" | "text-meta" | "leading-meta" | "text-eyebrow" | "leading-eyebrow" | "tracking-tight" | "tracking-eyebrow";
 export declare const cssVar: Record<UixTokenName, string>;
 export declare const light: Record<UixTokenName, string>;
 export declare const dark: Partial<Record<UixTokenName, string>>;

package/build/ts/tokens.js

@@ -24,6 +24,7 @@ export const cssVar = {
   "accent-hover": "var(--uix-accent-hover)",
   "accent-fg": "var(--uix-accent-fg)",
   "link": "var(--uix-link)",
+  "accent-text": "var(--uix-accent-text)",
   "ring": "var(--uix-ring)",
   "brand-muted": "var(--uix-brand-muted)",
   "success": "var(--uix-success)",
@@ -178,6 +179,7 @@ export const light = {
   "accent-hover": "color-mix(in srgb, var(--uix-accent) 88%, #000000)",
   "accent-fg": "#FFFFFF",
   "link": "#1447E6",
+  "accent-text": "color-mix(in srgb, var(--uix-accent) 65%, #000000)",
   "ring": "#1447E6",
   "brand-muted": "color-mix(in srgb, var(--uix-accent) 12%, transparent)",
   "success": "#047857",
@@ -293,19 +295,19 @@ export const light = {
   "font-sans": "\"Inter\",system-ui,sans-serif",
   "font-heading": "\"IBM Plex Sans\",\"Inter\",system-ui,sans-serif",
   "font-mono": "\"IBM Plex Mono\",ui-monospace,monospace",
-  "text-display": "40px",
+  "text-display": "2.5rem",
   "leading-display": "1.05",
-  "text-data-hero": "34px",
+  "text-data-hero": "2.125rem",
   "leading-data-hero": "1.1",
-  "text-h2": "24px",
+  "text-h2": "1.5rem",
   "leading-h2": "1.15",
-  "text-h3": "15px",
+  "text-h3": "0.9375rem",
   "leading-h3": "1.3",
-  "text-body": "14px",
+  "text-body": "0.875rem",
   "leading-body": "1.5",
-  "text-meta": "12.5px",
+  "text-meta": "0.78125rem",
   "leading-meta": "1.4",
-  "text-eyebrow": "11px",
+  "text-eyebrow": "0.6875rem",
   "leading-eyebrow": "1.2",
   "tracking-tight": "-0.02em",
   "tracking-eyebrow": "0.06em",
@@ -327,6 +329,7 @@ export const dark = {
   "accent": "#2563EB",
   "accent-hover": "color-mix(in srgb, var(--uix-accent) 82%, #FFFFFF)",
   "link": "#5B8DEF",
+  "accent-text": "color-mix(in srgb, var(--uix-accent) 70%, #FFFFFF)",
   "ring": "#3080FF",
   "brand-muted": "color-mix(in srgb, var(--uix-accent) 16%, transparent)",
   "success": "#00D294",
@@ -414,11 +417,4 @@ export const num = {
   "space-10": 64,
   "space-11": 80,
   "space-12": 96,
-  "text-display": 40,
-  "text-data-hero": 34,
-  "text-h2": 24,
-  "text-h3": 15,
-  "text-body": 14,
-  "text-meta": 12.5,
-  "text-eyebrow": 11,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/tokens",
-  "version": "2.15.0",
+  "version": "2.17.0",
   "description": "UIx v2 design tokens — the --uix-* contract for house products (Tensor, POSx, SHOPx). One DTCG source -> CSS variables, Tailwind theme, and typed TS constants.",
   "type": "module",
   "sideEffects": [

package/styles/components/app-shell.css

@@ -9,7 +9,7 @@
     border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); overflow: hidden;
     transition: grid-template-columns var(--uix-dur) var(--uix-ease-out), grid-template-rows var(--uix-dur) var(--uix-ease-out);
   }
-  .uix-shell__sidebar { grid-row: 1 / 3; background: var(--uix-bg-subtle); border-right: 1px solid var(--uix-border); overflow-y: auto; overflow-x: hidden; }
+  .uix-shell__sidebar { grid-row: 1 / 3; background: var(--uix-bg-subtle); border-right: 1px solid var(--uix-border); overflow-y: auto; overflow-x: hidden; visibility: visible; transition: visibility var(--uix-dur) var(--uix-ease-out); }
   .uix-shell__topbar { grid-column: 2; display: flex; align-items: center; gap: var(--uix-space-3); padding: 0 var(--uix-space-6); background: var(--uix-bg-app); border-bottom: 1px solid var(--uix-border); }
   .uix-shell__main { grid-column: 2; overflow: auto; padding: var(--uix-space-7); background: var(--uix-bg-app); }
 
@@ -18,17 +18,39 @@
      only) → hidden (0). data-collapsed stays a back-compat alias for the rail. */
   .uix-shell[data-nav="rail"], .uix-shell[data-collapsed] { grid-template-columns: var(--uix-sidebar-w-rail) 1fr; }
   .uix-shell[data-nav="hidden"] { grid-template-columns: 0 1fr; }
+  /* the 0-width column still renders its links — visibility removes them from the tab
+     order / accessibility tree while keeping the width transition (UIX-A11Y-2) */
+  .uix-shell[data-nav="hidden"] .uix-shell__sidebar { visibility: hidden; }
 
   /* ── focus / immersive mode ───────────────────────────────────────────────────
      A table-scoped escape hatch: hide the sidebar AND the topbar so a dense grid
      uses the whole frame. The app toggles [data-focus] (from a toolbar maximize
      control) and restores the previous nav state + focus on Esc. */
   .uix-shell[data-focus] { grid-template-columns: 0 1fr; grid-template-rows: 0 1fr; }
+  .uix-shell[data-focus] .uix-shell__sidebar { visibility: hidden; } /* see [data-nav="hidden"] above (UIX-A11Y-2) */
   .uix-shell[data-focus] .uix-shell__topbar { display: none; }
 
   /* a floating host for the "exit focus" affordance (Esc also exits) */
   .uix-shell__focus-exit { position: absolute; top: var(--uix-space-3); right: var(--uix-space-3); z-index: var(--uix-z-overlay); }
 
+  /* ── skip link ────────────────────────────────────────────────────────────────
+     First tab stop in the shell (UIX-A11Y-2): visually hidden until keyboard focus,
+     then a small pill floating over the shell's top-left corner. */
+  .uix-skiplink {
+    position: absolute; top: var(--uix-space-3); left: var(--uix-space-3); z-index: var(--uix-z-overlay);
+    width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
+  }
+  .uix-skiplink:focus-visible {
+    width: auto; height: auto; clip: auto;
+    display: inline-flex; align-items: center;
+    padding: var(--uix-space-2) var(--uix-space-4);
+    background: var(--uix-surface); color: var(--uix-text);
+    border: 1px solid var(--uix-border); border-radius: var(--uix-radius-pill);
+    box-shadow: var(--uix-shadow-popover);
+    outline: 2px solid var(--uix-ring); outline-offset: 2px;
+    font-size: var(--uix-text-meta); font-weight: 500; text-decoration: none;
+  }
+
   /* ── full-bleed main ──────────────────────────────────────────────────────────
      Opt-in per surface: a genuinely wide grid drops the content gutter and runs
      edge to edge, reclaiming 2 x --uix-space-7. Not the default — most pages want

package/styles/components/chart.css

@@ -1,9 +1,83 @@
-/* uix chart container + legend — palette + framing only; pair sample SVGs / a chart lib using --uix-chart-*. */
+/* uix chart — analytical card chrome and token-aware legend/annotation primitives.
+   Pair with semantic SVG/canvas output or the optional @tensor_1/react chart adapter. */
 @layer uix.components {
-  .uix-chart { background: var(--uix-surface); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); padding: var(--uix-space-5); }
-  .uix-chart__title { font-size: var(--uix-text-h3); font-weight: 600; }
-  .uix-chart__subtitle { font-size: var(--uix-text-meta); color: var(--uix-text-muted); margin-bottom: var(--uix-space-4); }
-  .uix-legend { display: flex; flex-wrap: wrap; gap: var(--uix-space-3); margin-top: var(--uix-space-3); }
-  .uix-legend__item { display: inline-flex; align-items: center; gap: var(--uix-space-2); font-size: var(--uix-text-meta); color: var(--uix-text-hushed); }
-  .uix-legend__swatch { width: 10px; height: 10px; border-radius: var(--uix-radius-xs); flex: none; }
+  .uix-chart {
+    position: relative; min-width: 0; overflow: hidden; padding: var(--uix-space-5);
+    border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg);
+    background: var(--uix-surface); box-shadow: var(--uix-shadow-sm);
+  }
+  .uix-chart--flat { box-shadow: none; }
+  .uix-chart--hero { padding: var(--uix-space-6); }
+  .uix-chart__header {
+    display: flex; align-items: flex-start; justify-content: space-between;
+    gap: var(--uix-space-4); min-width: 0; margin-bottom: var(--uix-space-4);
+  }
+  .uix-chart__heading { min-width: 0; }
+  .uix-chart__eyebrow {
+    margin-bottom: var(--uix-space-2); color: var(--uix-text-muted);
+    font-size: var(--uix-text-eyebrow); font-weight: 600;
+    letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase;
+  }
+  .uix-chart__title { color: var(--uix-text); font-size: var(--uix-text-h3); font-weight: 600; }
+  .uix-chart__subtitle { color: var(--uix-text-muted); font-size: var(--uix-text-meta); line-height: var(--uix-leading-meta); }
+  .uix-chart__title + .uix-chart__subtitle { margin-top: var(--uix-space-1); }
+  .uix-chart__metric { flex: none; text-align: right; }
+  .uix-chart__metric-value {
+    color: var(--uix-text); font-family: var(--uix-font-mono); font-size: var(--uix-text-h2);
+    font-weight: 600; letter-spacing: var(--uix-tracking-tight); line-height: var(--uix-leading-h2);
+  }
+  .uix-chart__metric-label { margin-top: var(--uix-space-1); color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
+  .uix-chart__delta {
+    display: inline-flex; align-items: center; gap: var(--uix-space-1);
+    margin-top: var(--uix-space-2); color: var(--uix-text-hushed); font-size: var(--uix-text-meta); font-weight: 600;
+  }
+  .uix-chart__delta[data-tone="positive"] { color: var(--uix-success); }
+  .uix-chart__delta[data-tone="negative"] { color: var(--uix-danger-text); }
+  .uix-chart__delta[data-tone="warning"] { color: var(--uix-warning-text); }
+  .uix-chart__plot { position: relative; min-width: 0; }
+  .uix-chart__plot[data-loading] { display: grid; min-height: 180px; place-items: center; border-radius: var(--uix-radius-md); background: var(--uix-bg-subtle); }
+  .uix-chart__plot[data-loading]::after { content: "Loading chart…"; color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
+  .uix-chart__plot[data-loading] > * { position: absolute; opacity: 0; pointer-events: none; }
+  .uix-chart__plot[data-empty] {
+    display: grid; min-height: 180px; place-items: center; padding: var(--uix-space-6);
+    border: 1px dashed var(--uix-border-strong); border-radius: var(--uix-radius-md);
+    color: var(--uix-text-muted); text-align: center;
+  }
+  .uix-chart__annotation {
+    display: flex; align-items: flex-start; gap: var(--uix-space-2);
+    margin-top: var(--uix-space-3); padding: var(--uix-space-3);
+    border-left: 3px solid var(--uix-accent); border-radius: 0 var(--uix-radius-sm) var(--uix-radius-sm) 0;
+    background: var(--uix-brand-muted); color: var(--uix-text-hushed);
+    font-size: var(--uix-text-meta); line-height: var(--uix-leading-meta);
+  }
+  .uix-chart__footer {
+    display: flex; align-items: center; justify-content: space-between;
+    gap: var(--uix-space-4); min-width: 0; margin-top: var(--uix-space-4);
+    padding-top: var(--uix-space-3); border-top: 1px solid var(--uix-border);
+    color: var(--uix-text-muted); font-size: var(--uix-text-meta);
+  }
+  .uix-chart__source { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .uix-legend { display: flex; flex-wrap: wrap; gap: var(--uix-space-2) var(--uix-space-4); margin: 0; padding: 0; list-style: none; }
+  .uix-legend__item { display: inline-flex; align-items: center; gap: var(--uix-space-2); color: var(--uix-text-hushed); font-size: var(--uix-text-meta); }
+  .uix-legend__swatch { width: 10px; height: 10px; flex: none; border-radius: var(--uix-radius-xs); background: var(--legend-color, var(--uix-chart-1)); }
+  .uix-legend__swatch--line { width: 18px; height: 3px; border-radius: var(--uix-radius-pill); }
+  .uix-legend__swatch--dash { width: 18px; height: 0; border-top: 2px dashed var(--legend-color, var(--uix-chart-1)); border-radius: 0; background: transparent; }
+
+  /* Runtime-free throughput/history strip. Put its accessible summary on the parent figure. */
+  .uix-chart-ticks { display: grid; grid-template-columns: repeat(var(--tick-count, 12), minmax(3px, 1fr)); align-items: end; gap: var(--uix-space-1); height: 72px; }
+  .uix-chart-tick {
+    min-height: 4px; height: calc(var(--tick-value, .25) * 100%);
+    border-radius: var(--uix-radius-xs) var(--uix-radius-xs) 0 0;
+    background: var(--tick-color, var(--uix-chart-1));
+  }
+  .uix-chart-tick[data-state="quiet"] { --tick-color: var(--uix-bg-active); }
+  .uix-chart-tick[data-state="warning"] { --tick-color: var(--uix-warning); }
+  .uix-chart-tick[data-state="danger"] { --tick-color: var(--uix-danger); }
+  .uix-chart-tick[data-current] { box-shadow: 0 0 0 2px var(--uix-surface), 0 0 0 4px var(--uix-ring); }
+  @media (max-width: 520px) {
+    .uix-chart, .uix-chart--hero { padding: var(--uix-space-4); }
+    .uix-chart__header { flex-direction: column; }
+    .uix-chart__metric { text-align: left; }
+    .uix-chart__footer { align-items: flex-start; flex-direction: column; gap: var(--uix-space-2); }
+  }
 }

package/styles/components/checkbox.css

@@ -14,7 +14,8 @@
   }
   .uix-checkbox > input:checked + .uix-checkbox__box,
   .uix-checkbox > input:indeterminate + .uix-checkbox__box { background: var(--uix-accent); border-color: var(--uix-accent); }
-  .uix-checkbox > input:checked + .uix-checkbox__box svg { opacity: 1; transform: none; }
+  .uix-checkbox > input:checked + .uix-checkbox__box svg,
+  .uix-checkbox > input:indeterminate + .uix-checkbox__box svg { opacity: 1; transform: none; } /* indeterminate shows its dash icon, not just the filled box (UIX-A11Y-3) */
   .uix-checkbox > input:focus-visible + .uix-checkbox__box { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
   .uix-checkbox > input:disabled ~ * { opacity: .5; }
 }

package/styles/components/command-palette.css

@@ -3,6 +3,9 @@
   .uix-cmdk { width: min(560px, 92vw); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); background: var(--uix-surface-2); box-shadow: var(--uix-shadow-overlay); overflow: hidden; }
   .uix-cmdk__input { width: 100%; height: 48px; border: 0; border-bottom: 1px solid var(--uix-border); background: transparent; color: var(--uix-text); font: inherit; font-size: var(--uix-text-h3); padding: 0 var(--uix-space-4); }
   .uix-cmdk__input:focus { outline: none; }
+  /* visible focus replacement for the suppressed outline (UIX-A11Y-1): the divider under the
+     input thickens to a 2px ring-colored line */
+  .uix-cmdk__input:focus-visible { border-bottom-color: var(--uix-ring); box-shadow: 0 1px 0 0 var(--uix-ring); }
   .uix-cmdk__list { max-height: 320px; overflow-y: auto; padding: var(--uix-space-2); }
   .uix-cmdk__group { font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase; color: var(--uix-text-muted); padding: var(--uix-space-2) var(--uix-space-3) var(--uix-space-1); }
   .uix-cmdk__item { display: flex; align-items: center; gap: var(--uix-space-3); padding: var(--uix-space-3) var(--uix-space-3); border-radius: var(--uix-radius-sm); color: var(--uix-text); cursor: pointer; font-size: var(--uix-text-body); }

package/styles/components/flow.css

@@ -22,9 +22,22 @@
     color: var(--tone-fg, var(--uix-text-muted));
   }
   .uix-node__icon svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
+  .uix-node--no-icon { grid-template-columns: 1fr; }
   .uix-node__body { min-width: 0; }
+  .uix-node__eyebrow {
+    margin-bottom: var(--uix-space-1); color: var(--tone-fg, var(--uix-text-muted));
+    font-size: var(--uix-text-eyebrow); font-weight: 600;
+    letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase;
+  }
   .uix-node__title { font-weight: 500; line-height: 1.25; }
   .uix-node__meta { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
+  .uix-node__footer {
+    grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between;
+    gap: var(--uix-space-3); min-width: 0; margin-top: var(--uix-space-1);
+    padding-top: var(--uix-space-2); border-top: 1px solid var(--uix-border);
+    color: var(--uix-text-hushed); font-size: var(--uix-text-meta);
+  }
+  .uix-node--wide { min-width: 208px; max-width: 280px; }
   .uix-node__status {
     display: inline-flex; align-items: center; gap: var(--uix-space-2); margin-top: var(--uix-space-1);
     font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow);
@@ -87,6 +100,12 @@
     position: relative; width: 100%;
     color: var(--uix-border-strong);            /* edges inherit via currentColor */
   }
+  .uix-flow--panel {
+    padding: var(--uix-space-6); border: 1px solid var(--uix-border);
+    border-radius: var(--uix-radius-lg); background-color: var(--uix-bg-subtle);
+    background-image: radial-gradient(var(--uix-border) 1px, transparent 1px);
+    background-size: 22px 22px; box-shadow: inset 0 1px 0 var(--uix-surface);
+  }
   .uix-flow__edges {
     position: absolute; inset: 0; width: 100%; height: 100%;
     overflow: visible; pointer-events: none;    /* never block node hover/focus */
@@ -120,6 +139,8 @@
   }
   .uix-flow__connector[data-done] { border-color: var(--uix-success); }
   .uix-flow__connector[data-done]::after { border-color: var(--uix-success); }
+  .uix-flow__connector[data-running] { border-color: var(--uix-accent); border-top-style: dashed; }
+  .uix-flow__connector[data-running]::after { border-color: var(--uix-accent); }
 
   /* ---- branch / loop / mindmap: absolutely-positioned nodes over an SVG edge layer.
          Container aspect-ratio matches each SVG viewBox so % node positions and path
@@ -193,4 +214,10 @@
     .uix-flow:hover .uix-flow__edge,
     .uix-flow:focus-within .uix-flow__edge { animation: none; }
   }
+
+  @media (max-width: 720px) {
+    .uix-flow--panel { padding: var(--uix-space-4); overflow-x: auto; }
+    .uix-flow--linear .uix-flow__row { min-width: max-content; flex-wrap: nowrap; }
+    .uix-flow--linear .uix-flow__connector { flex-basis: 38px; }
+  }
 }

package/styles/components/form.css

@@ -3,6 +3,11 @@
   .uix-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--uix-space-5); }
   .uix-fieldset { border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); padding: var(--uix-space-6); }
   .uix-fieldset > legend { padding: 0 var(--uix-space-2); font-size: var(--uix-text-meta); font-weight: 600; color: var(--uix-text); }
+  /* Labeled RadioGroup renders as a fieldset (UIX-A11Y-3): strip the UA chrome so it
+     looks identical to the plain-div group; the legend spaces itself (fieldset gap
+     doesn't reach a legend). */
+  fieldset.uix-radio-group { border: 0; margin: 0; padding: 0; min-inline-size: auto; }
+  .uix-radio-group__legend { padding: 0; margin: 0 0 var(--uix-space-2); font-size: var(--uix-text-meta); font-weight: 600; color: var(--uix-text); }
   .uix-form-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--uix-space-4); }
   .uix-validation-summary {
     border: 1px solid var(--uix-danger); background: var(--uix-danger-bg); color: var(--uix-text);

package/styles/components/inbox.css

@@ -4,10 +4,19 @@
   .uix-inbox__list { border-right: 1px solid var(--uix-border); overflow-y: auto; background: var(--uix-surface); }
   .uix-inbox__item { position: relative; display: flex; flex-direction: column; gap: var(--uix-space-1); padding: var(--uix-space-3) var(--uix-space-4); border-bottom: 1px solid var(--uix-border); cursor: pointer; }
   .uix-inbox__item:hover { background: var(--uix-bg-hover); }
+  /* keyboard active option (aria-activedescendant) mirrors the hover style (UIX-A11Y-2) */
+  .uix-inbox__item[data-active] { background: var(--uix-bg-hover); }
   .uix-inbox__item[aria-selected="true"] { background: linear-gradient(to right, var(--uix-accent) 3px, var(--uix-brand-muted) 3px); }
   .uix-inbox__item[data-unread] .uix-inbox__subject { font-weight: 600; }
   .uix-inbox__subject { font-size: var(--uix-text-body); }
   .uix-inbox__preview { font-size: var(--uix-text-meta); color: var(--uix-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .uix-inbox__detail { overflow-y: auto; padding: var(--uix-space-5); background: var(--uix-bg-app); }
-  @media (max-width: 700px) { .uix-inbox { grid-template-columns: 1fr; } .uix-inbox__detail { display: none; } }
+  /* narrow viewports stack to one pane: list by default, detail when the app sets
+     view="detail" — with a consumer-rendered Back control in the detail pane (UIX-A11Y-2) */
+  @media (max-width: 700px) {
+    .uix-inbox { grid-template-columns: 1fr; }
+    .uix-inbox__detail { display: none; }
+    .uix-inbox[data-view="detail"] .uix-inbox__list { display: none; }
+    .uix-inbox[data-view="detail"] .uix-inbox__detail { display: block; }
+  }
 }

package/styles/components/link.css

@@ -39,7 +39,8 @@
  *   2 · TITLE / NAME SLOTS — quiet by default. `:not(.uix-btn)` so an anchor deliberately
  *       styled as a button inside a title slot keeps its button treatment.
  *   3 · DATA CELLS — table cells and description-list values. `:not([class])` so
- *       class-bearing anchors (`.uix-btn--link`, pills, tags) stay styled.
+ *       class-bearing anchors (`.uix-btn--link`, pills, tags) stay styled. Table BODY
+ *       links skip the hover underline too — see table.css (the row hover is the cue).
  *   4 · CONTAINER ANCHORS — the anchor IS the kit block (`<a class="uix-card">`). Without
  *       this the base `a { color }` tints every word in the block brand-blue.
  * Depends only on --uix-* tokens. */
@@ -79,7 +80,8 @@
     .uix-audit__actor
   ) a:not(.uix-btn):is(:hover, :focus-visible),
 
-  :is(.uix-table td, .uix-dl dd) a:not([class]):is(:hover, :focus-visible) { text-decoration: underline; }
+  /* body-row links are excluded: table.css keeps them calm on hover (the row tint is the cue) */
+  :is(.uix-table :is(thead, tfoot) td, .uix-dl dd) a:not([class]):is(:hover, :focus-visible) { text-decoration: underline; }
 
   /* Container anchors never underline: the anchor wraps the whole block, so an underline
      would strike through every word in it. They take the kit's standard row-hover tint

package/styles/components/modal.css

@@ -22,7 +22,9 @@
   @starting-style { .uix-dialog[open]::backdrop { opacity: 0; } }
 
   .uix-dialog__header { display: flex; align-items: center; gap: var(--uix-space-3); padding: var(--uix-space-4) var(--uix-space-5); border-bottom: 1px solid var(--uix-border); }
-  .uix-dialog__title { font-size: var(--uix-text-h3); font-weight: 600; }
+  /* title is an <h2> for SR navigation (UIX-A11Y-1); inherits neutralize the base h2
+     heading font/tracking/leading so it renders exactly like the old <div> */
+  .uix-dialog__title { font-size: var(--uix-text-h3); font-weight: 600; font-family: inherit; letter-spacing: inherit; line-height: inherit; }
   .uix-dialog__close { margin-left: auto; border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--uix-radius-sm); }
   .uix-dialog__close:hover { background: var(--uix-bg-hover); color: var(--uix-text); }
   .uix-dialog__close svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }

package/styles/components/peek.css

@@ -27,7 +27,13 @@
   .uix-peek__nav { display: inline-flex; gap: var(--uix-space-1); }
   .uix-peek__navbtn { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--uix-border); background: var(--uix-surface); color: var(--uix-text); border-radius: var(--uix-radius-sm); cursor: pointer; }
   .uix-peek__navbtn:hover { background: var(--uix-bg-hover); }
-  .uix-peek__title { font-size: var(--uix-text-h3); font-weight: 600; }
+  /* boundary nav uses aria-disabled (still focusable, so focus isn't stranded — UIX-A11Y-1);
+     mute it and suppress the hover cue like a disabled control */
+  .uix-peek__navbtn[aria-disabled="true"] { color: var(--uix-text-muted); cursor: default; }
+  .uix-peek__navbtn[aria-disabled="true"]:hover { background: var(--uix-surface); }
+  /* title is an <h2> for SR navigation (UIX-A11Y-1); inherits neutralize the base h2
+     heading font/tracking/leading so it renders exactly like the old <div> */
+  .uix-peek__title { font-size: var(--uix-text-h3); font-weight: 600; font-family: inherit; letter-spacing: inherit; line-height: inherit; }
   .uix-peek__title a { color: var(--uix-link); }
   .uix-peek__close { margin-left: auto; border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--uix-radius-sm); }
   .uix-peek__close:hover { background: var(--uix-bg-hover); color: var(--uix-text); }

package/styles/components/pipeline.css

@@ -1,9 +1,144 @@
-/* uix deal / pipeline stage bar — depends only on --uix-* tokens. */
+/* uix pipeline — compact stage bar + detailed operational stage rail.
+   Depends only on --uix-* tokens; state is always repeated in visible text. */
 @layer uix.components {
-  .uix-pipeline { display: flex; gap: var(--uix-space-1); }
-  .uix-pipeline__stage { flex: 1; text-align: center; padding: var(--uix-space-2) var(--uix-space-2); font-size: var(--uix-text-meta); color: var(--uix-text-muted); background: var(--uix-bg-subtle); }
+  .uix-pipeline {
+    display: flex;
+    gap: var(--uix-space-1);
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .uix-pipeline__stage {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+    padding: var(--uix-space-2);
+    text-align: center;
+    font-size: var(--uix-text-meta);
+    color: var(--stage-fg, var(--uix-text-muted));
+    background: var(--stage-bg, var(--uix-bg-subtle));
+    border-color: var(--stage-border, transparent);
+  }
   .uix-pipeline__stage:first-child { border-radius: var(--uix-radius-pill) 0 0 var(--uix-radius-pill); }
   .uix-pipeline__stage:last-child { border-radius: 0 var(--uix-radius-pill) var(--uix-radius-pill) 0; }
-  .uix-pipeline__stage[data-state="done"] { background: var(--uix-accent); color: var(--uix-accent-fg); }
-  .uix-pipeline__stage[data-state="active"] { background: var(--uix-brand-muted); color: var(--uix-link); font-weight: 600; }
+  .uix-pipeline__stage[data-state="done"],
+  .uix-pipeline__stage[data-state="complete"] {
+    --stage-bg: var(--uix-accent); --stage-fg: var(--uix-accent-fg); --stage-dot: var(--uix-success);
+  }
+  .uix-pipeline__stage[data-state="active"],
+  .uix-pipeline__stage[data-state="current"],
+  .uix-pipeline__stage[data-state="running"] {
+    --stage-bg: var(--uix-brand-muted); --stage-fg: var(--uix-link);
+    --stage-border: var(--uix-accent); --stage-dot: var(--uix-accent); font-weight: 600;
+  }
+  .uix-pipeline__stage[data-state="failed"],
+  .uix-pipeline__stage[data-state="error"] {
+    --stage-bg: var(--uix-danger-bg); --stage-fg: var(--uix-danger-text);
+    --stage-border: var(--uix-danger); --stage-dot: var(--uix-danger);
+  }
+  .uix-pipeline__stage[data-state="blocked"] {
+    --stage-bg: var(--uix-warning-bg); --stage-fg: var(--uix-warning-text);
+    --stage-border: var(--uix-warning); --stage-dot: var(--uix-warning);
+  }
+  .uix-pipeline__stage[data-state="waiting"],
+  .uix-pipeline__stage[data-state="pending"] { --stage-dot: var(--uix-text-muted); }
+
+  /* Detailed mode scrolls at narrow widths instead of crushing timing and state. */
+  .uix-pipeline--detailed {
+    position: relative;
+    gap: 0;
+    overflow-x: auto;
+    padding: var(--uix-space-1) var(--uix-space-1) var(--uix-space-4);
+    scrollbar-width: thin;
+    scrollbar-color: var(--uix-border-strong) transparent;
+    scroll-snap-type: x proximity;
+  }
+  .uix-pipeline--detailed::before {
+    content: "";
+    position: absolute;
+    top: calc(var(--uix-space-1) + 21px);
+    right: var(--uix-space-8);
+    left: var(--uix-space-8);
+    height: 2px;
+    background: var(--uix-border);
+  }
+  .uix-pipeline--detailed .uix-pipeline__stage {
+    flex: 1 0 168px;
+    display: grid;
+    grid-template-rows: 42px auto;
+    gap: var(--uix-space-3);
+    padding: 0 var(--uix-space-2);
+    text-align: left;
+    color: var(--uix-text);
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    scroll-snap-align: start;
+  }
+  .uix-pipeline__marker {
+    position: relative;
+    z-index: var(--uix-z-raised);
+    display: grid;
+    place-items: center;
+    align-self: start;
+    width: 42px;
+    height: 42px;
+    border: 1px solid var(--stage-border, var(--uix-border-strong));
+    border-radius: var(--uix-radius-pill);
+    background: var(--stage-bg, var(--uix-surface));
+    color: var(--stage-fg, var(--uix-text-muted));
+    box-shadow: 0 0 0 var(--uix-space-1) var(--uix-surface), var(--uix-shadow-sm);
+    font-family: var(--uix-font-mono);
+    font-size: var(--uix-text-meta);
+    font-weight: 600;
+  }
+  .uix-pipeline__marker svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
+  .uix-pipeline__content {
+    min-width: 0;
+    padding: var(--uix-space-3);
+    border: 1px solid var(--stage-border, var(--uix-border));
+    border-radius: var(--uix-radius-md);
+    background: var(--uix-surface);
+    box-shadow: var(--uix-shadow-sm);
+  }
+  .uix-pipeline__stage[data-state="active"] .uix-pipeline__content,
+  .uix-pipeline__stage[data-state="current"] .uix-pipeline__content,
+  .uix-pipeline__stage[data-state="running"] .uix-pipeline__content {
+    box-shadow: var(--uix-shadow-sm), 0 0 0 3px var(--uix-brand-muted);
+  }
+  .uix-pipeline__eyebrow {
+    display: flex; align-items: center; justify-content: space-between; gap: var(--uix-space-2);
+    margin-bottom: var(--uix-space-2); color: var(--stage-fg, var(--uix-text-muted));
+    font-size: var(--uix-text-eyebrow); font-weight: 600;
+    letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase;
+  }
+  .uix-pipeline__state { display: inline-flex; align-items: center; gap: var(--uix-space-2); }
+  .uix-pipeline__state::before {
+    content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%;
+    background: var(--stage-dot, var(--uix-text-muted));
+  }
+  .uix-pipeline__stage[data-state="blocked"] .uix-pipeline__state::before { border-radius: var(--uix-radius-xs); }
+  .uix-pipeline__title {
+    overflow: hidden; color: var(--uix-text); font-size: var(--uix-text-body); font-weight: 600;
+    line-height: var(--uix-leading-body); text-overflow: ellipsis; white-space: nowrap;
+  }
+  .uix-pipeline__description {
+    margin-top: var(--uix-space-1); color: var(--uix-text-muted);
+    font-size: var(--uix-text-meta); font-weight: 400; line-height: var(--uix-leading-meta);
+  }
+  .uix-pipeline__meta {
+    display: flex; align-items: center; gap: var(--uix-space-2); min-width: 0;
+    margin-top: var(--uix-space-3); padding-top: var(--uix-space-3); border-top: 1px solid var(--uix-border);
+    color: var(--uix-text-hushed); font-size: var(--uix-text-meta); font-weight: 400;
+  }
+  .uix-pipeline__meta > :last-child { margin-left: auto; }
+  .uix-pipeline__stage:focus-visible,
+  .uix-pipeline__stage:has(:focus-visible) .uix-pipeline__content {
+    outline: none; border-color: var(--uix-ring);
+    box-shadow: 0 0 0 2px var(--uix-surface), 0 0 0 4px var(--uix-ring);
+  }
+  @media (max-width: 640px) {
+    .uix-pipeline--detailed .uix-pipeline__stage { flex-basis: min(78vw, 240px); }
+  }
 }

package/styles/components/segmented.css

@@ -7,6 +7,6 @@
     transition: background-color var(--uix-dur-fast) var(--uix-ease-out), color var(--uix-dur-fast) var(--uix-ease-out);
   }
   .uix-segmented__option:hover { color: var(--uix-text); }
-  .uix-segmented__option[aria-selected="true"], .uix-segmented__option[aria-pressed="true"] { background: var(--uix-surface); color: var(--uix-text); box-shadow: var(--uix-shadow-sm); }
+  .uix-segmented__option[aria-pressed="true"] { background: var(--uix-surface); color: var(--uix-text); box-shadow: var(--uix-shadow-sm); }
   .uix-segmented__option:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 1px; }
 }