@tensor_1/tokens 2.20.0 → 2.21.0

package/build/css/tokens.css

@@ -83,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);
@@ -226,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/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" | "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-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

@@ -84,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)",
@@ -241,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)",
@@ -384,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.20.0",
+  "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/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/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/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/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/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)" }
 }