@tensor_1/tokens 2.14.2 → 2.16.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;
@@ -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",
@@ -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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/tokens",
-  "version": "2.14.2",
+  "version": "2.16.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/breadcrumbs.css

@@ -1,6 +1,6 @@
 /* uix breadcrumbs — depends only on --uix-* tokens. */
 @layer uix.components {
-  .uix-breadcrumbs { display: flex; align-items: center; gap: var(--uix-space-2); flex-wrap: wrap; font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
+  .uix-breadcrumbs { display: flex; align-items: center; gap: var(--uix-space-2); flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
   .uix-breadcrumbs a { color: var(--uix-text-muted); text-decoration: none; }
   /* already a quiet link by its own design — hover/focus parity with the quiet-link
      contract in link.css, so the keyboard state matches the pointer state. */

package/styles/components/card.css

@@ -6,4 +6,15 @@
   .uix-card__subtitle { font-size: var(--uix-text-meta); color: var(--uix-text-muted); margin-top: var(--uix-space-1); }
   .uix-card__body { padding: var(--uix-space-6); }
   .uix-card__footer { padding: var(--uix-space-4) var(--uix-space-6); border-top: 1px solid var(--uix-border); display: flex; gap: var(--uix-space-2); justify-content: flex-end; }
+  .uix-card--interactive { display: block; color: inherit; text-decoration: none; cursor: pointer; transition: border-color var(--uix-dur-fast) var(--uix-ease-out), box-shadow var(--uix-dur-fast) var(--uix-ease-out), transform var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-card--interactive:is(:hover, :focus-visible) { border-color: var(--uix-border-strong); box-shadow: var(--uix-shadow-md); text-decoration: none; transform: translateY(-1px); }
+  .uix-card--interactive:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
+  .uix-collapsible { border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); background: var(--uix-surface); }
+  .uix-collapsible__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--uix-space-3); padding: var(--uix-space-4) var(--uix-space-5); cursor: pointer; list-style: none; }
+  .uix-collapsible__summary::-webkit-details-marker { display: none; }
+  .uix-collapsible__title { color: var(--uix-text); font-weight: 600; }
+  .uix-collapsible__meta { margin-left: var(--uix-space-2); color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
+  .uix-collapsible__chevron { transition: transform var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-collapsible[open] .uix-collapsible__chevron { transform: rotate(180deg); }
+  .uix-collapsible__body { padding: 0 var(--uix-space-5) var(--uix-space-5); }
 }

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/combobox.css

@@ -1,6 +1,8 @@
 /* uix combobox / listbox surface — depends only on --uix-* tokens. */
 @layer uix.components {
   .uix-combobox { position: relative; }
+  .uix-combobox > .uix-input { width: 100%; }
+  .uix-combobox__listbox { position: absolute; z-index: var(--uix-z-dropdown); inset-inline: 0; top: calc(100% + var(--uix-space-1)); max-height: 240px; overflow-y: auto; }
   .uix-listbox {
     list-style: none; margin: 0; padding: var(--uix-space-1); min-width: 200px;
     background: var(--uix-surface-2); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md);
@@ -11,6 +13,7 @@
     cursor: pointer; display: flex; align-items: center; gap: var(--uix-space-2);
   }
   .uix-listbox__option:hover, .uix-listbox__option[aria-selected="true"], .uix-listbox__option[data-active] { background: var(--uix-bg-hover); }
+  .uix-listbox__option[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
   .uix-listbox__option[aria-selected="true"] { color: var(--uix-link); }
   .uix-listbox__empty { padding: var(--uix-space-3); text-align: center; color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
 }

package/styles/components/detail-layout.css

@@ -3,5 +3,11 @@
   .uix-detail { display: grid; grid-template-columns: 1fr 280px; gap: var(--uix-space-5); align-items: start; }
   .uix-detail__main { min-width: 0; display: flex; flex-direction: column; gap: var(--uix-space-4); }
   .uix-detail__side { display: flex; flex-direction: column; gap: var(--uix-space-4); }
+  .uix-detail-page { display: flex; flex-direction: column; gap: var(--uix-space-5); }
+  .uix-detail-page__back { align-self: flex-start; }
+  .uix-detail-page__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--uix-space-3); margin: 0; }
+  .uix-detail-page__metrics > div { padding: var(--uix-space-3) var(--uix-space-4); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface); }
+  .uix-detail-page__metrics dt { color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
+  .uix-detail-page__metrics dd { margin: var(--uix-space-1) 0 0; color: var(--uix-text); font-size: var(--uix-text-h3); font-weight: 600; }
   @media (max-width: 820px) { .uix-detail { grid-template-columns: 1fr; } }
 }

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

@@ -11,4 +11,9 @@
   .uix-validation-summary strong { color: var(--uix-danger-text); }
   .uix-validation-summary ul { margin: var(--uix-space-2) 0 0; padding-left: var(--uix-space-5); }
   .uix-validation-summary a { color: var(--uix-danger-text); text-decoration: underline; }
+  .uix-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--uix-space-5); padding-block: var(--uix-space-3); }
+  .uix-toggle-row + .uix-toggle-row { border-top: 1px solid var(--uix-border); }
+  .uix-toggle-row__copy { min-width: 0; }
+  .uix-toggle-row__label { color: var(--uix-text); font-weight: 500; }
+  .uix-toggle-row__description { margin-top: var(--uix-space-1); color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
 }

package/styles/components/link.css

@@ -96,3 +96,9 @@
      link.css is imported last, so a blanket display here would flatten them. */
   a:is(.uix-card, .uix-stat, .uix-kanban__card) { display: block; }
 }
+
+@layer uix.components {
+  .uix-related-links__title { margin: 0 0 var(--uix-space-3); font-size: var(--uix-text-h3); }
+  .uix-related-links__list { display: grid; gap: var(--uix-space-2); margin: 0; padding: 0; list-style: none; }
+  .uix-related-links__list li { display: flex; justify-content: space-between; gap: var(--uix-space-3); color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
+}

package/styles/components/modal.css

@@ -29,3 +29,8 @@
   .uix-dialog__body { padding: var(--uix-space-5); color: var(--uix-text-hushed); }
   .uix-dialog__footer { display: flex; gap: var(--uix-space-2); justify-content: flex-end; padding: var(--uix-space-4) var(--uix-space-5); border-top: 1px solid var(--uix-border); }
 }
+
+@layer uix.components {
+  .uix-prompt { display: grid; gap: var(--uix-space-3); }
+  .uix-prompt__actions { margin: var(--uix-space-3) calc(var(--uix-space-5) * -1) calc(var(--uix-space-5) * -1); }
+}

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/sidebar.css

@@ -34,7 +34,7 @@
   .uix-navitem[aria-current="page"] .uix-navitem__badge { color: var(--uix-text-hushed); }
   .uix-navitem__star { display: grid; place-items: center; width: 22px; height: 22px; border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; border-radius: var(--uix-radius-xs); opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
   .uix-navitem__star svg { width: 15px; height: 15px; }
-  .uix-navitem:hover .uix-navitem__star { opacity: 1; }
+  .uix-navitem:hover .uix-navitem__star, .uix-navitem:focus-within .uix-navitem__star, .uix-navitem__star:focus-visible { opacity: 1; }
   .uix-navitem__star[data-on] { opacity: 1; color: var(--uix-warning); }
   .uix-navitem__star[data-on] svg { fill: currentColor; }
 
@@ -47,13 +47,13 @@
     border: 0; background: transparent; cursor: pointer; color: inherit;
   }
   .uix-favourites__list { display: flex; flex-direction: column; gap: calc(var(--uix-space-1) / 4); list-style: none; margin: 0; padding: 0; }
-  .uix-favourites__empty { padding: calc(var(--uix-space-1) * 1.5) var(--uix-space-2); color: color-mix(in srgb, var(--uix-text) 50%, transparent); }
+  .uix-favourites__empty { padding: calc(var(--uix-space-1) * 1.5) var(--uix-space-2); color: var(--uix-text-hushed); }
   .uix-favourites__row { position: relative; display: flex; align-items: center; }
   .uix-favourites__link { min-width: 0; flex: 1; }
   .uix-favourites__menu-trigger {
     margin-left: auto; display: inline-flex; height: 20px; width: 20px; flex-shrink: 0;
     align-items: center; justify-content: center; border: 0; border-radius: calc(var(--uix-radius-xs) / 2);
-    background: transparent; cursor: pointer; color: color-mix(in srgb, var(--uix-text) 50%, transparent);
+    background: transparent; cursor: pointer; color: var(--uix-text-muted);
     opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out);
   }
   .uix-favourites__row:hover .uix-favourites__menu-trigger,
@@ -96,7 +96,16 @@
   .uix-sidebar[data-collapsed] .uix-sidebar__brand,
   .uix-sidebar[data-collapsed] .uix-navgroup__chevron,
   .uix-sidebar[data-collapsed] .uix-navgroup__panel { display: none; }
+  .uix-sidebar[data-nav="rail"] .uix-navitem__label,
+  .uix-sidebar[data-nav="rail"] .uix-navitem__badge,
+  .uix-sidebar[data-nav="rail"] .uix-navitem__star,
+  .uix-sidebar[data-nav="rail"] .uix-sidebar__eyebrow,
+  .uix-sidebar[data-nav="rail"] .uix-sidebar__brand,
+  .uix-sidebar[data-nav="rail"] .uix-navgroup__chevron,
+  .uix-sidebar[data-nav="rail"] .uix-navgroup__panel { display: none; }
   /* center the icon-only rail; head keeps just the toggle, centered */
   .uix-sidebar[data-collapsed] .uix-navitem { justify-content: center; padding: 0; gap: 0; }
   .uix-sidebar[data-collapsed] .uix-sidebar__head { justify-content: center; padding-inline: 0; }
+  .uix-sidebar[data-nav="rail"] .uix-navitem { justify-content: center; padding: 0; gap: 0; }
+  .uix-sidebar[data-nav="rail"] .uix-sidebar__head { justify-content: center; padding-inline: 0; }
 }

package/styles/components/states.css

@@ -4,10 +4,20 @@
   .uix-empty__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--uix-bg-subtle); color: var(--uix-text-muted); }
   .uix-empty__icon svg { width: 22px; height: 22px; }
   .uix-empty__title { font-size: var(--uix-text-h3); font-weight: 600; color: var(--uix-text); }
+  .uix-empty > p { max-width: 52ch; margin: 0; }
+  .uix-empty--drawer { padding: var(--uix-space-5); }
+  .uix-empty--inline { align-items: flex-start; padding: var(--uix-space-4); text-align: left; }
+  .uix-empty--page, .uix-empty--full-page { min-height: min(55vh, 520px); justify-content: center; }
   /* error tone — ErrorState reuses .uix-empty with a danger-toned icon */
   .uix-empty__icon--danger { background: var(--uix-danger-bg); color: var(--uix-danger); }
+  .uix-empty__icon--warning { background: var(--uix-warning-bg); color: var(--uix-warning-text); }
+  .uix-stack--compact { gap: var(--uix-space-2); }
 
   .uix-skeleton { background: linear-gradient(90deg, var(--uix-bg-subtle) 25%, var(--uix-bg-hover) 50%, var(--uix-bg-subtle) 75%); background-size: 200% 100%; animation: uix-shimmer 1.4s linear infinite; border-radius: var(--uix-radius-sm); }
   .uix-skeleton--text { height: 12px; border-radius: var(--uix-radius-pill); }
   .uix-skeleton--circle { border-radius: 50%; }
+  .uix-operation { display: grid; gap: var(--uix-space-3); padding: var(--uix-space-4); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface); }
+  .uix-operation__head { display: flex; align-items: center; justify-content: space-between; gap: var(--uix-space-3); }
+  .uix-operation__description { color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
+  .uix-operation__action { justify-self: start; }
 }

package/styles/components/table-toolbar.css

@@ -15,6 +15,10 @@
     transition: background-color var(--uix-dur-fast) var(--uix-ease-out), border-color var(--uix-dur-fast) var(--uix-ease-out), color var(--uix-dur-fast) var(--uix-ease-out);
   }
   .uix-chip:hover { border-color: var(--uix-border-strong); color: var(--uix-text); }
-  .uix-chip[data-on] { background: var(--uix-brand-muted); border-color: var(--uix-accent); color: var(--uix-accent); }
+  .uix-chip[data-on] { background: var(--uix-brand-muted); border-color: var(--uix-accent); color: var(--uix-accent-text); }
+  .uix-chip:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
   .uix-chip__count { font-variant-numeric: tabular-nums; opacity: .7; }
+  .uix-filter-popover { display: grid; gap: var(--uix-space-4); min-width: 260px; padding: var(--uix-space-4); }
+  .uix-filter-popover .uix-label { display: grid; gap: var(--uix-space-2); }
+  .uix-filter-popover__actions { display: flex; justify-content: flex-end; gap: var(--uix-space-2); }
 }

package/styles/components/view-menu.css

@@ -11,4 +11,9 @@
   .uix-view-menu .uix-segmented__option { flex: 1; text-align: center; }
   .uix-view-menu__cols { display: flex; flex-direction: column; gap: var(--uix-space-1); max-height: 180px; overflow: auto; }
   .uix-view-menu__cols .uix-menu__item { font-size: var(--uix-text-meta); }
+  .uix-saved-views__row { display: flex; align-items: center; }
+  .uix-saved-views__row > .uix-menu__item { min-width: 0; flex: 1; }
+  .uix-saved-views__pin { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: var(--uix-radius-sm); background: transparent; color: var(--uix-text-muted); cursor: pointer; }
+  .uix-saved-views__pin:is(:hover, :focus-visible), .uix-saved-views__pin[data-on] { color: var(--uix-warning-text); background: var(--uix-bg-hover); }
+  .uix-saved-views__footer { border-top: 1px solid var(--uix-border); margin-top: var(--uix-space-1); padding: var(--uix-space-2); }
 }

package/tokens/base/color.json

@@ -21,6 +21,7 @@
   "accent-hover": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-accent) 88%, #000000)", "$description": "Primary-button hover. Theme-aware: derived from the live accent so it tracks the brand override (light darkens, dark lightens — see tokens/dark)." },
   "accent-fg":    { "$type": "color", "$value": "var(--uix-brand-fg,#FFFFFF)", "$description": "Runtime: chains through --uix-brand-fg." },
   "link":         { "$type": "color", "$value": "var(--uix-brand,#1447E6)", "$description": "Runtime: chains through --uix-brand." },
+  "accent-text":  { "$type": "color", "$value": "color-mix(in srgb, var(--uix-accent) 65%, #000000)", "$description": "The brand hue as TEXT on a neutral or --uix-brand-muted surface (a selected filter chip, an active tab label). The raw accent is a fill colour: a bright brand (POSx green, mission-control blue) reads below 3:1 as text on its own tint. Darkened from the live accent so it tracks the brand override; the worst shipped theme is 5.5:1 on brand-muted. Not for text ON a solid accent fill, which is --uix-accent-fg." },
   "ring":         { "$type": "color", "$value": "var(--uix-brand,#1447E6)", "$description": "Runtime: chains through --uix-brand." },
   "brand-muted":  { "$type": "color", "$value": "color-mix(in srgb, var(--uix-accent) 12%, transparent)", "$description": "Runtime: color-mix of the live accent." },
 

package/tokens/dark/color.json

@@ -16,6 +16,7 @@
   "accent":       { "$type": "color", "$value": "var(--uix-brand,#2563EB)" },
   "accent-hover": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-accent) 82%, #FFFFFF)", "$description": "On dark, primary-button hover LIGHTENS the accent (the light-theme value darkens). Tracks the live brand override." },
   "link":         { "$type": "color", "$value": "color-mix(in srgb, var(--uix-brand,#5B8DEF) 70%, #FFFFFF)", "$description": "Brightened on dark so links read clearly as links and stay distinct from the solid accent button background." },
+  "accent-text":  { "$type": "color", "$value": "color-mix(in srgb, var(--uix-accent) 70%, #FFFFFF)", "$description": "On dark, accent-hued text LIGHTENS the accent (the light-theme value darkens): the solid dark accent measured 3.2:1 on its own 16% tint. Same 70% weight as --uix-link." },
   "ring":         { "$type": "color", "$value": "var(--uix-brand,#3080FF)" },
   "brand-muted": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-accent) 16%, transparent)" },