@tensor_1/tokens 2.19.2 → 2.21.0

package/build/css/tokens.css

@@ -33,6 +33,7 @@
     --uix-warning-fg: #1A1A1A;
     --uix-warning-bg: #FEF3D6;
     --uix-warning-text: #92400E;
+    --uix-warning-border: #D97706;
     --uix-info: #1447E6;
     --uix-info-fg: #FFFFFF;
     --uix-info-bg: #E3EBFF;
@@ -40,6 +41,7 @@
     --uix-danger: #E40014;
     --uix-danger-fg: #FFFFFF;
     --uix-danger-bg: #FFE4E6;
+    --uix-danger-border: #E40014;
     --uix-danger-text: #C20012;
     --uix-amber: #C98A1E;
     --uix-amber-text: #795006;
@@ -81,6 +83,7 @@
     --uix-scrim: rgba(0,0,0,.5);
     --uix-scrim-strong: rgba(0,0,0,.7);
     --uix-shadow-sm: 0 1px 2px rgba(0,0,0,.06);
+    --uix-shadow-md: 0 4px 12px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
     --uix-shadow-popover: 0 8px 24px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.05);
     --uix-shadow-overlay: 0 16px 48px rgba(0,0,0,.18);
     --uix-highlight-top: inset 0 1px 0 rgba(255,255,255,0);
@@ -182,6 +185,7 @@
     --uix-warning: #FCBB00;
     --uix-warning-fg: #1A1A1A;
     --uix-warning-bg: rgba(249,156,0,.16);
+    --uix-warning-border: #CA8A04;
     --uix-warning-text: var(--uix-warning,#FCBB00);
     --uix-info: #2563EB;
     --uix-info-fg: #FFFFFF;
@@ -190,6 +194,7 @@
     --uix-danger: #DC2626;
     --uix-danger-fg: #FFFFFF;
     --uix-danger-bg: rgba(220,38,38,.20);
+    --uix-danger-border: #DC2626;
     --uix-danger-text: #F87171;
     --uix-amber: #E6B25C;
     --uix-amber-text: #E6B25C;
@@ -222,5 +227,9 @@
     --uix-scrollbar-thumb: rgba(255,255,255,.18);
     --uix-scrollbar-thumb-hover: rgba(255,255,255,.30);
     --uix-highlight-top: inset 0 1px 0 rgba(255,255,255,.04);
+    --uix-shadow-sm: 0 1px 2px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.04);
+    --uix-shadow-md: 0 4px 12px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04);
+    --uix-shadow-popover: 0 8px 24px rgba(0,0,0,.50),0 1px 2px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.05);
+    --uix-shadow-overlay: 0 16px 48px rgba(0,0,0,.60),inset 0 1px 0 rgba(255,255,255,.05);
   }
 }

package/build/tailwind/preset.cjs

@@ -34,6 +34,7 @@ module.exports = {
       "uix-warning-fg": "var(--uix-warning-fg)",
       "uix-warning-bg": "var(--uix-warning-bg)",
       "uix-warning-text": "var(--uix-warning-text)",
+      "uix-warning-border": "var(--uix-warning-border)",
       "uix-info": "var(--uix-info)",
       "uix-info-fg": "var(--uix-info-fg)",
       "uix-info-bg": "var(--uix-info-bg)",
@@ -41,6 +42,7 @@ module.exports = {
       "uix-danger": "var(--uix-danger)",
       "uix-danger-fg": "var(--uix-danger-fg)",
       "uix-danger-bg": "var(--uix-danger-bg)",
+      "uix-danger-border": "var(--uix-danger-border)",
       "uix-danger-text": "var(--uix-danger-text)",
       "uix-amber": "var(--uix-amber)",
       "uix-amber-text": "var(--uix-amber-text)",

package/build/tailwind/theme.css

@@ -31,6 +31,7 @@
   --color-uix-warning-fg: var(--uix-warning-fg);
   --color-uix-warning-bg: var(--uix-warning-bg);
   --color-uix-warning-text: var(--uix-warning-text);
+  --color-uix-warning-border: var(--uix-warning-border);
   --color-uix-info: var(--uix-info);
   --color-uix-info-fg: var(--uix-info-fg);
   --color-uix-info-bg: var(--uix-info-bg);
@@ -38,6 +39,7 @@
   --color-uix-danger: var(--uix-danger);
   --color-uix-danger-fg: var(--uix-danger-fg);
   --color-uix-danger-bg: var(--uix-danger-bg);
+  --color-uix-danger-border: var(--uix-danger-border);
   --color-uix-danger-text: var(--uix-danger-text);
   --color-uix-amber: var(--uix-amber);
   --color-uix-amber-text: var(--uix-amber-text);

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" | "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 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" | "warning-border" | "info" | "info-fg" | "info-bg" | "info-text" | "danger" | "danger-fg" | "danger-bg" | "danger-border" | "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-md" | "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

@@ -34,6 +34,7 @@ export const cssVar = {
   "warning-fg": "var(--uix-warning-fg)",
   "warning-bg": "var(--uix-warning-bg)",
   "warning-text": "var(--uix-warning-text)",
+  "warning-border": "var(--uix-warning-border)",
   "info": "var(--uix-info)",
   "info-fg": "var(--uix-info-fg)",
   "info-bg": "var(--uix-info-bg)",
@@ -41,6 +42,7 @@ export const cssVar = {
   "danger": "var(--uix-danger)",
   "danger-fg": "var(--uix-danger-fg)",
   "danger-bg": "var(--uix-danger-bg)",
+  "danger-border": "var(--uix-danger-border)",
   "danger-text": "var(--uix-danger-text)",
   "amber": "var(--uix-amber)",
   "amber-text": "var(--uix-amber-text)",
@@ -82,6 +84,7 @@ export const cssVar = {
   "scrim": "var(--uix-scrim)",
   "scrim-strong": "var(--uix-scrim-strong)",
   "shadow-sm": "var(--uix-shadow-sm)",
+  "shadow-md": "var(--uix-shadow-md)",
   "shadow-popover": "var(--uix-shadow-popover)",
   "shadow-overlay": "var(--uix-shadow-overlay)",
   "highlight-top": "var(--uix-highlight-top)",
@@ -189,6 +192,7 @@ export const light = {
   "warning-fg": "#1A1A1A",
   "warning-bg": "#FEF3D6",
   "warning-text": "#92400E",
+  "warning-border": "#D97706",
   "info": "#1447E6",
   "info-fg": "#FFFFFF",
   "info-bg": "#E3EBFF",
@@ -196,6 +200,7 @@ export const light = {
   "danger": "#E40014",
   "danger-fg": "#FFFFFF",
   "danger-bg": "#FFE4E6",
+  "danger-border": "#E40014",
   "danger-text": "#C20012",
   "amber": "#C98A1E",
   "amber-text": "#795006",
@@ -237,6 +242,7 @@ export const light = {
   "scrim": "rgba(0,0,0,.5)",
   "scrim-strong": "rgba(0,0,0,.7)",
   "shadow-sm": "0 1px 2px rgba(0,0,0,.06)",
+  "shadow-md": "0 4px 12px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05)",
   "shadow-popover": "0 8px 24px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.05)",
   "shadow-overlay": "0 16px 48px rgba(0,0,0,.18)",
   "highlight-top": "inset 0 1px 0 rgba(255,255,255,0)",
@@ -338,6 +344,7 @@ export const dark = {
   "warning": "#FCBB00",
   "warning-fg": "#1A1A1A",
   "warning-bg": "rgba(249,156,0,.16)",
+  "warning-border": "#CA8A04",
   "warning-text": "#FCBB00",
   "info": "#2563EB",
   "info-fg": "#FFFFFF",
@@ -346,6 +353,7 @@ export const dark = {
   "danger": "#DC2626",
   "danger-fg": "#FFFFFF",
   "danger-bg": "rgba(220,38,38,.20)",
+  "danger-border": "#DC2626",
   "danger-text": "#F87171",
   "amber": "#E6B25C",
   "amber-text": "#E6B25C",
@@ -378,6 +386,10 @@ export const dark = {
   "scrollbar-thumb": "rgba(255,255,255,.18)",
   "scrollbar-thumb-hover": "rgba(255,255,255,.30)",
   "highlight-top": "inset 0 1px 0 rgba(255,255,255,.04)",
+  "shadow-sm": "0 1px 2px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.04)",
+  "shadow-md": "0 4px 12px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04)",
+  "shadow-popover": "0 8px 24px rgba(0,0,0,.50),0 1px 2px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.05)",
+  "shadow-overlay": "0 16px 48px rgba(0,0,0,.60),inset 0 1px 0 rgba(255,255,255,.05)",
 };
 
 export const num = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/tokens",
-  "version": "2.19.2",
+  "version": "2.21.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/button.css

@@ -35,11 +35,18 @@
   .uix-btn--icon.uix-btn--lg { width: 44px; }
 
   .uix-btn[data-loading] { color: transparent !important; position: relative; pointer-events: none; }
+  /* The label is hidden (color: transparent), so the ring cannot inherit
+     currentColor from the button; each variant names its own foreground.
+     TENSOR RX-125 (UIX-01): the ring was on-accent for every variant, so a
+     loading secondary/outline/ghost button rendered blank. */
   .uix-btn[data-loading]::after {
     content: ""; position: absolute; width: 1em; height: 1em;
     border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
-    color: var(--uix-accent-fg); animation: uix-spin .6s linear infinite;
+    color: var(--uix-text); animation: uix-spin .6s linear infinite;
   }
+  .uix-btn--primary[data-loading]::after { color: var(--uix-accent-fg); }
+  .uix-btn--danger[data-loading]::after { color: var(--uix-danger-fg); }
+  .uix-btn--link[data-loading]::after { color: var(--uix-link); }
 
   /* attached group */
   .uix-btn-group { display: inline-flex; }

package/styles/components/chart.css

@@ -36,8 +36,10 @@
   .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; }
+  /* TENSOR RX-125 (UIX-05): the loading text is a real, translatable child
+     (ChartLabels.loading), not CSS content. */
+  .uix-chart__loading { color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
+  .uix-chart__plot[data-loading] > :not(.uix-chart__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);

package/styles/components/copy-button.css

@@ -0,0 +1,8 @@
+/* uix copy button — an icon-only ghost button that copies a value and confirms with a check.
+   Pair it with .uix-btn .uix-btn--ghost .uix-btn--icon; depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-copy-button { flex: none; color: var(--uix-text-muted); }
+  .uix-copy-button:hover { color: var(--uix-text); }
+  .uix-copy-button svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
+  .uix-copy-button[data-copied] { color: var(--uix-success); }
+}

package/styles/components/flow.css

@@ -217,6 +217,10 @@
 
   @media (max-width: 720px) {
     .uix-flow--panel { padding: var(--uix-space-4); overflow-x: auto; }
+    /* TENSOR RX-125 (UIX-16): branch, loop and mind-map nodes are positioned over a
+       scaled canvas; below this width the nodes would overlap, so the canvas keeps a
+       minimum width and the panel scrolls, as the linear layout already does. */
+    .uix-flow--branch, .uix-flow--loop, .uix-flow--mindmap { min-width: 640px; }
     .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/pipeline.css

@@ -18,7 +18,9 @@
     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);
+    /* TENSOR RX-125 (UIX-17): a border-color alone draws nothing. */
+    border: 1px solid var(--stage-border, transparent);
+    overflow-wrap: anywhere;
   }
   .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; }

package/styles/components/relationship-graph.css

@@ -9,7 +9,9 @@
   .uix-relationship-graph__node[data-selected] rect,.uix-relationship-graph__node[data-highlighted] rect { fill:var(--uix-brand-muted); stroke:var(--uix-accent); stroke-width:3; } .uix-relationship-graph__node[data-conflicted] rect { fill:var(--uix-danger-bg); stroke:var(--uix-danger); stroke-dasharray:4 2; }
   .uix-relationship-graph__node:focus-visible rect { stroke:var(--uix-ring); stroke-width:4; }
   .uix-relationship-graph__legend { display:flex; gap:var(--uix-space-4); flex-wrap:wrap; margin:0; padding:0; list-style:none; color:var(--uix-text-muted); font-size:var(--uix-text-meta); }
-  .uix-relationship-graph__legend li::before { content:""; display:inline-block; width:.8rem; height:.8rem; margin-right:var(--uix-space-1); border:2px solid var(--uix-chart-1); border-radius:var(--uix-radius-pill); vertical-align:middle; }
+  .uix-relationship-graph__legend li::before { content:""; display:inline-block; width:.8rem; height:.8rem; margin-right:var(--uix-space-1); border:2px solid var(--uix-graph-type-color, var(--uix-chart-1)); border-radius:var(--uix-radius-pill); vertical-align:middle; }
+  /* TENSOR RX-125 (UIX-14): an edge whose type is in the legend draws that type's colour. */
+  .uix-relationship-graph__edge[data-typed] { stroke:var(--uix-graph-type-color, var(--uix-border-strong)); }
   .uix-relationship-graph__list { padding:var(--uix-space-3); border:1px solid var(--uix-border); border-radius:var(--uix-radius-lg); background:var(--uix-surface); }
   .uix-relationship-graph__list>ul { display:grid; gap:var(--uix-space-2); margin:var(--uix-space-2) 0 0; padding:0; list-style:none; }
   .uix-relationship-graph__list li { display:flex; justify-content:space-between; gap:var(--uix-space-2); padding:var(--uix-space-2); border-radius:var(--uix-radius-md); background:var(--uix-bg-subtle); }

package/styles/components/stat-tile.css

@@ -2,12 +2,39 @@
 @layer uix.components {
   .uix-stat { background: var(--uix-surface); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); padding: var(--uix-space-6); }
   .uix-stat__label { font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase; color: var(--uix-text-muted); display: flex; align-items: center; justify-content: space-between; gap: var(--uix-space-2); }
+  .uix-stat__label > span { min-width: 0; overflow-wrap: anywhere; }
   .uix-stat__label svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }
-  .uix-stat__value { font-size: var(--uix-text-data-hero); font-weight: 600; line-height: var(--uix-leading-data-hero); margin-top: var(--uix-space-3); }
-  .uix-stat__meta { font-size: var(--uix-text-meta); color: var(--uix-text-muted); margin-top: var(--uix-space-2); display: flex; align-items: center; gap: var(--uix-space-2); }
+  .uix-stat__value { display: block; font-size: var(--uix-text-data-hero); font-weight: 600; line-height: var(--uix-leading-data-hero); margin-top: var(--uix-space-3); overflow-wrap: anywhere; }
+  .uix-stat__meta { font-size: var(--uix-text-meta); color: var(--uix-text-muted); margin-top: var(--uix-space-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--uix-space-2); overflow-wrap: anywhere; }
   .uix-stat__trend { display: inline-flex; align-items: center; gap: var(--uix-space-1); font-size: var(--uix-text-meta); font-weight: 600; padding: var(--uix-space-1) var(--uix-space-2); border-radius: var(--uix-radius-pill); }
   /* direction glyph inside the chip (UIX-A11Y-4) — sized to sit on the text baseline row */
   .uix-stat__trend svg { width: 10px; height: 10px; flex: none; }
   .uix-stat__trend--up { color: var(--uix-success); background: var(--uix-success-bg); }
   .uix-stat__trend--down { color: var(--uix-danger-text); background: var(--uix-danger-bg); }
+
+  /* tones — an outlined tile whose value carries the tone; the label keeps its muted colour */
+  .uix-stat--warning { border-color: var(--uix-warning-border); }
+  .uix-stat--warning .uix-stat__value { color: var(--uix-warning-text); }
+  .uix-stat--danger { border-color: var(--uix-danger-border); }
+  .uix-stat--danger .uix-stat__value { color: var(--uix-danger-text); }
+
+  /* compact — for dense fact bands */
+  .uix-stat--compact { padding: var(--uix-space-3) var(--uix-space-4); }
+  .uix-stat--compact .uix-stat__value { font-size: var(--uix-text-h3); line-height: var(--uix-leading-h3); margin-top: var(--uix-space-1); }
+  .uix-stat--compact .uix-stat__meta { margin-top: var(--uix-space-1); }
+
+  /* interactive — the whole tile is a <button> that opens an editor */
+  .uix-stat--interactive {
+    display: block; width: 100%; font: inherit; color: inherit; text-align: start; cursor: pointer;
+    transition: background-color var(--uix-dur-fast) var(--uix-ease-out), border-color var(--uix-dur-fast) var(--uix-ease-out);
+  }
+  .uix-stat--interactive:hover { background: var(--uix-bg-hover); border-color: var(--uix-border-strong); }
+  .uix-stat--interactive.uix-stat--warning:hover { border-color: var(--uix-warning-border); }
+  .uix-stat--interactive.uix-stat--danger:hover { border-color: var(--uix-danger-border); }
+  .uix-stat--interactive:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
+  .uix-stat--interactive[aria-expanded="true"] { border-color: var(--uix-ring); }
+  .uix-stat__chevron { display: inline-flex; flex: none; margin-inline-start: auto; color: var(--uix-text-muted); }
+  .uix-stat__label .uix-stat__chevron svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); transition: transform var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-stat--interactive[aria-expanded="true"] .uix-stat__chevron svg { transform: rotate(180deg); }
+  @media (prefers-reduced-motion: reduce) { .uix-stat--interactive, .uix-stat__label .uix-stat__chevron svg { transition: none; } }
 }

package/styles/components/table.css

@@ -2,7 +2,11 @@
    column sizing, bulk actions, row actions, expandable rows, inline edit, resize,
    search highlight, responsive ladder + compare. Depends only on --uix-* tokens. */
 @layer uix.components {
-  .uix-table-wrap { overflow: auto; max-height: 460px; border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); background: var(--uix-surface); }
+  /* TENSOR RX-125 (UIX-07): no height cap by default — a nested scroller hid rows
+     below 460px on every table. Opt in with .uix-table-wrap--scroll or set
+     --uix-table-max-height. */
+  .uix-table-wrap { overflow: auto; border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); background: var(--uix-surface); }
+  .uix-table-wrap--scroll { max-height: var(--uix-table-max-height, 460px); }
   .uix-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--uix-text-body); }
 
   .uix-table thead th {

package/styles/components/tabs.css

@@ -4,6 +4,8 @@
   .uix-tab {
     border: 0; background: transparent; font: inherit; font-size: var(--uix-text-body); font-weight: 500;
     color: var(--uix-text-hushed); padding: var(--uix-space-3) var(--uix-space-3); cursor: pointer; position: relative;
+    /* long or translated labels wrap (two lines at the 16rem cap) instead of truncating */
+    white-space: normal; max-width: 16rem; text-align: start;
     transition: color var(--uix-dur-fast) var(--uix-ease-out), background-color var(--uix-dur-fast) var(--uix-ease-out);
   }
   .uix-tab:hover { color: var(--uix-text); }
@@ -28,4 +30,38 @@
   .uix-tabs--pill { display: inline-flex; background: var(--uix-bg-subtle); padding: var(--uix-space-1); border-radius: var(--uix-radius-md); }
   .uix-tabs--pill .uix-tab { padding: var(--uix-space-2) var(--uix-space-4); border-radius: calc(var(--uix-radius-md) - 3px); }
   .uix-tabs--pill .uix-tab[aria-selected="true"] { background: var(--uix-surface); box-shadow: var(--uix-shadow-sm); }
+
+  /* overflow="scroll" — one scrolling row inside .uix-tabs-scroller; edge buttons appear only
+     on the side that has hidden tabs. Keyboard users move with Arrow/Home/End, so the buttons
+     are pointer-only (aria-hidden, tabindex -1). */
+  .uix-tabs-scroller { position: relative; min-width: 0; max-width: 100%; }
+  .uix-tabs--scroll {
+    display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
+    scrollbar-width: none; scroll-behavior: smooth; overscroll-behavior-x: contain;
+  }
+  .uix-tabs--scroll::-webkit-scrollbar { display: none; }
+  .uix-tabs--scroll .uix-tab { flex: none; }
+  /* a scroll container clips the -1px overlaps the line/enclosed variants use, so the base
+     rule is drawn inside the box instead */
+  .uix-tabs--scroll.uix-tabs--line, .uix-tabs--scroll.uix-tabs--enclosed { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--uix-border); }
+  .uix-tabs--scroll.uix-tabs--line .uix-tab::after { bottom: 0; }
+  .uix-tabs--scroll.uix-tabs--enclosed .uix-tab { margin-bottom: 0; }
+  .uix-tabs--scroll.uix-tabs--pill { display: flex; }
+
+  .uix-tabs-scroller__prev, .uix-tabs-scroller__next {
+    position: absolute; top: 0; bottom: 0; z-index: var(--uix-z-raised);
+    display: flex; align-items: center; justify-content: center;
+    width: var(--uix-control-h); padding: 0; border: 0; cursor: pointer;
+    color: var(--uix-text-hushed); font: inherit;
+  }
+  .uix-tabs-scroller__prev[hidden], .uix-tabs-scroller__next[hidden] { display: none; }
+  .uix-tabs-scroller__prev { inset-inline-start: 0; background: linear-gradient(to right, var(--uix-bg-app) 60%, transparent); }
+  .uix-tabs-scroller__next { inset-inline-end: 0; background: linear-gradient(to left, var(--uix-bg-app) 60%, transparent); }
+  .uix-tabs-scroller__prev:dir(rtl) { background: linear-gradient(to left, var(--uix-bg-app) 60%, transparent); }
+  .uix-tabs-scroller__next:dir(rtl) { background: linear-gradient(to right, var(--uix-bg-app) 60%, transparent); }
+  .uix-tabs-scroller__prev:hover, .uix-tabs-scroller__next:hover { color: var(--uix-text); }
+  .uix-tabs-scroller__prev svg, .uix-tabs-scroller__next svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
+  .uix-tabs-scroller__prev:dir(rtl) svg, .uix-tabs-scroller__next:dir(rtl) svg { transform: scaleX(-1); }
+
+  @media (prefers-reduced-motion: reduce) { .uix-tabs--scroll { scroll-behavior: auto; } }
 }

package/styles/components/tree.css

@@ -3,15 +3,27 @@
    selection, and collapse styling all key off the item, not the row (UIX-FIX-04). */
 @layer uix.components {
   .uix-tree, .uix-tree ul { list-style: none; margin: 0; padding: 0; }
-  .uix-tree__group { padding-left: var(--uix-space-5); }
+  .uix-tree__group { padding-left: var(--uix-tree-indent-step, var(--uix-space-5)); }
+  /* TENSOR RX-125 (UIX-08): the indent stops growing past level 4 — a guide line
+     marks the depth instead, so deep nodes keep room for their names. */
+  .uix-tree__group .uix-tree__group .uix-tree__group .uix-tree__group .uix-tree__group {
+    padding-left: var(--uix-space-1); margin-left: var(--uix-space-1); border-left: 1px solid var(--uix-border);
+  }
   .uix-tree__item { outline: none; } /* the focus ring is drawn on the row, below */
   .uix-tree__row { display: flex; align-items: center; gap: var(--uix-space-2); padding: var(--uix-space-2) var(--uix-space-2); border-radius: var(--uix-radius-sm); cursor: pointer; color: var(--uix-text); font-size: var(--uix-text-body); }
-  .uix-tree__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  /* Labels wrap to two lines rather than truncating to one (UIX-08). */
+  .uix-tree__label {
+    min-width: 0; overflow: hidden; overflow-wrap: anywhere;
+    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
+  }
   .uix-tree__item > .uix-tree__row:hover { background: var(--uix-bg-hover); }
   .uix-tree__item[aria-selected="true"] > .uix-tree__row { background: var(--uix-bg-active); }
   .uix-tree__item:focus-visible > .uix-tree__row { outline: 2px solid var(--uix-ring); outline-offset: -2px; }
   .uix-tree__toggle { width: 16px; height: 16px; flex: none; display: grid; place-items: center; color: var(--uix-text-muted); transition: transform var(--uix-dur) var(--uix-ease-out); }
   .uix-tree__toggle svg { width: 14px; height: 14px; }
+  /* UIX-09: the chevron is a button (pointer target for toggling without selecting). */
+  button.uix-tree__toggle { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; border-radius: var(--uix-radius-sm); }
+  button.uix-tree__toggle:hover { background: var(--uix-bg-hover); color: var(--uix-text); }
   .uix-tree__item[aria-expanded="false"] > .uix-tree__row .uix-tree__toggle { transform: rotate(-90deg); }
   .uix-tree__item[aria-expanded="false"] > .uix-tree__group { display: none; }
 }

package/styles/utilities.css

@@ -17,9 +17,9 @@
   .uix-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
   /* elevation — apply the surface shadow tokens as a utility (cards/panels,
-     floating popovers/menus/dialogs, pressed/active pills). In dark mode
-     --uix-shadow-sm resolves to the inset top highlight, so elevated surfaces
-     keep their lift cue without a heavy drop shadow. */
+     floating popovers/menus/dialogs, pressed/active pills). In dark mode the
+     shadow tokens are redefined (tokens/dark/effect.json) as a stronger drop
+     plus the inset top highlight, so an elevated surface still reads as lifted. */
   .uix-elevated         { box-shadow: var(--uix-shadow-sm); }
   .uix-elevated-popover { box-shadow: var(--uix-shadow-popover); }
   .uix-elevated-pill    { box-shadow: var(--uix-shadow-sm); }

package/tokens/base/color.json

@@ -32,6 +32,7 @@
   "warning-fg":   { "$type": "color", "$value": "#1A1A1A" },
   "warning-bg":   { "$type": "color", "$value": "#FEF3D6" },
   "warning-text": { "$type": "color", "$value": "#92400E", "$description": "Warning-toned TEXT, legible on the faint --uix-warning-bg in light mode — the bright --uix-warning (#F99C00) fails contrast on pale yellow, so the foreground is a hand-darkened amber. Dark mode overrides to track --uix-warning. Used by status-pill --warning." },
+  "warning-border": { "$type": "color", "$value": "#D97706", "$description": "Warning-toned BORDER for an outlined container on a neutral surface (stat tile --warning). The bright --uix-warning is 2.1:1 on white; this amber clears the 3:1 non-text minimum on --uix-surface and --uix-bg-app." },
   "info":       { "$type": "color", "$value": "#1447E6" },
   "info-fg":    { "$type": "color", "$value": "#FFFFFF" },
   "info-bg":    { "$type": "color", "$value": "#E3EBFF" },
@@ -39,6 +40,7 @@
   "danger":     { "$type": "color", "$value": "#E40014" },
   "danger-fg":  { "$type": "color", "$value": "#FFFFFF" },
   "danger-bg":  { "$type": "color", "$value": "#FFE4E6" },
+  "danger-border": { "$type": "color", "$value": "#E40014", "$description": "Danger-toned BORDER for an outlined container on a neutral surface (stat tile --danger). 4.9:1 on white, so it clears the 3:1 non-text minimum; a separate role so a theme can soften the outline without touching the solid --uix-danger." },
   "danger-text": { "$type": "color", "$value": "#C20012", "$description": "Danger-toned TEXT, legible on --uix-danger-bg (the bright --uix-danger #E40014 is only 4.05:1 on #FFE4E6). A hand-darkened red for text; --uix-danger stays the SOLID role (danger button bg, critical pill, dots). Dark mode brightens it. Used by pill/alert/stat-trend/field-error/menu/sla/node/audit --danger." },
   "amber":      { "$type": "color", "$value": "#C98A1E", "$description": "SEV-3 / medium-severity tone — the third tier of the severity ramp (danger = SEV-1, warning = SEV-2, amber = SEV-3). A muted ochre, deliberately distinct from the brighter --uix-warning so the three tiers read apart." },
   "amber-text": { "$type": "color", "$value": "#795006", "$description": "Amber-toned TEXT, legible on a faint amber tint and on dark surfaces (the SEV-3 ochre is too light as text on pale fills). Dark mode brightens it to track --uix-amber. Used by severity-3 badges." },

package/tokens/base/effect.json

@@ -1,5 +1,6 @@
 {
   "shadow-sm":      { "$type": "shadow", "$value": "0 1px 2px rgba(0,0,0,.06)" },
+  "shadow-md":      { "$type": "shadow", "$value": "0 4px 12px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05)", "$description": "RX-125 UIX-03 — a hover lift between sm and popover (the interactive card referenced it; it was never defined)." },
   "shadow-popover": { "$type": "shadow", "$value": "0 8px 24px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.05)" },
   "shadow-overlay": { "$type": "shadow", "$value": "0 16px 48px rgba(0,0,0,.18)" },
   "highlight-top":  { "$type": "shadow", "$value": "inset 0 1px 0 rgba(255,255,255,0)" },

package/tokens/dark/color.json

@@ -26,6 +26,7 @@
   "warning":      { "$type": "color", "$value": "#FCBB00" },
   "warning-fg":   { "$type": "color", "$value": "#1A1A1A" },
   "warning-bg":   { "$type": "color", "$value": "rgba(249,156,0,.16)" },
+  "warning-border": { "$type": "color", "$value": "#CA8A04", "$description": "On dark, a deeper amber than the bright --uix-warning so the outline reads as a tone rather than a highlight; 6:1 on --uix-surface #111111." },
   "warning-text": { "$type": "color", "$value": "var(--uix-warning,#FCBB00)", "$description": "On dark the faint bg is dark enough that the bright warning hue reads as text — track --uix-warning live (fallback to the dark warning value)." },
   "info":       { "$type": "color", "$value": "#2563EB" },
   "info-fg":    { "$type": "color", "$value": "#FFFFFF" },
@@ -34,6 +35,7 @@
   "danger":     { "$type": "color", "$value": "#DC2626" },
   "danger-fg":  { "$type": "color", "$value": "#FFFFFF" },
   "danger-bg":  { "$type": "color", "$value": "rgba(220,38,38,.20)" },
+  "danger-border": { "$type": "color", "$value": "#DC2626", "$description": "On dark, the solid danger red as an outline; 4.3:1 on --uix-surface #111111." },
   "danger-text": { "$type": "color", "$value": "#F87171", "$description": "On dark, the deep --uix-danger #DC2626 fails as text on the faint danger tint and on plain surfaces — brightened so pill/field-error/stat-trend/menu/node/audit text reads AA. --uix-danger stays the solid critical-pill / button bg (with white --uix-danger-fg)." },
   "amber":      { "$type": "color", "$value": "#E6B25C", "$description": "SEV-3 tone lightened for dark surfaces (the light-mode ochre #C98A1E is too dark on dark)." },
   "amber-text": { "$type": "color", "$value": "#E6B25C", "$description": "On dark the lightened amber reads as text directly — tracks --uix-amber." },

package/tokens/dark/effect.json

@@ -1,3 +1,7 @@
 {
-  "highlight-top": { "$type": "shadow", "$value": "inset 0 1px 0 rgba(255,255,255,.04)" }
+  "highlight-top": { "$type": "shadow", "$value": "inset 0 1px 0 rgba(255,255,255,.04)" },
+  "shadow-sm":      { "$type": "shadow", "$value": "0 1px 2px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.04)", "$description": "RX-125 UIX-02 — dark elevation: a stronger drop (a light-mode 6% shadow is invisible on a dark surface) plus the top highlight that reads as the lit edge." },
+  "shadow-md":      { "$type": "shadow", "$value": "0 4px 12px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04)" },
+  "shadow-popover": { "$type": "shadow", "$value": "0 8px 24px rgba(0,0,0,.50),0 1px 2px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.05)" },
+  "shadow-overlay": { "$type": "shadow", "$value": "0 16px 48px rgba(0,0,0,.60),inset 0 1px 0 rgba(255,255,255,.05)" }
 }