@tensor_1/tokens 2.37.0 → 2.39.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/tokens",
-  "version": "2.37.0",
+  "version": "2.39.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/chart.css

@@ -59,6 +59,9 @@
     color: var(--uix-text-muted); font-size: var(--uix-text-meta);
   }
   .uix-chart__source { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  /* CorrelationScatter (HAR-1554): the stats caption always says "association, not cause". */
+  .uix-chart__stats { margin: 0; color: var(--uix-text-muted); font-size: var(--uix-text-meta); font-variant-numeric: tabular-nums; }
+  .uix-chart__insufficient { color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
   .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)); }

package/styles/components/insight-card.css

@@ -0,0 +1,73 @@
+/* uix insight card (HAR-1556) — a card whose headline is the answer: status (text + icon), KPIs with a
+   comparison and a bullet against target, the chart, an optional aside (a scatter), coverage, source and
+   one action. The card is an inline-size container: `data-layout="split"` puts the aside beside the
+   chart from 60rem (960 px) of CARD width, and stacks below that. Tones are neutral-first: only a
+   warning or a critical status takes a hue, and it always carries its label and icon. */
+@layer uix.components {
+  .uix-insight {
+    container: uix-insight / inline-size;
+    display: flex; flex-direction: column; gap: var(--uix-space-4);
+    min-width: 0; padding: var(--uix-space-5);
+    border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg);
+    background: var(--uix-surface); color: var(--uix-text);
+  }
+  /* Inside another frame (a dashboard widget): no border, surface or outer padding of its own. */
+  .uix-insight--plain { padding: 0; border: 0; border-radius: 0; background: transparent; }
+  .uix-insight__header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--uix-space-2) var(--uix-space-4); min-width: 0; }
+  .uix-insight__heading { flex: 1 1 18rem; min-width: 0; }
+  .uix-insight__eyebrow {
+    margin-bottom: var(--uix-space-1); color: var(--uix-text-muted);
+    font-size: var(--uix-text-eyebrow); font-weight: 600; letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase;
+  }
+  .uix-insight__headline { margin: 0; color: var(--uix-text); font-size: var(--uix-text-h3); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
+  .uix-insight__sowhat { margin: var(--uix-space-1) 0 0; color: var(--uix-text-hushed); font-size: var(--uix-text-body); line-height: 1.5; overflow-wrap: anywhere; }
+  .uix-insight__status {
+    display: inline-flex; flex: none; align-items: center; gap: var(--uix-space-1);
+    padding: var(--uix-space-1) var(--uix-space-2); line-height: 1; border: 1px solid var(--uix-border); border-radius: var(--uix-radius-pill);
+    color: var(--uix-text-hushed); font-size: var(--uix-text-meta); font-weight: 600; white-space: nowrap;
+  }
+  .uix-insight__status[data-tone="warning"] { border-color: var(--uix-warning-border); color: var(--uix-warning-text); }
+  .uix-insight__status[data-tone="critical"] { border-color: var(--uix-danger-border); color: var(--uix-danger-text); }
+
+  .uix-insight__kpis {
+    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
+    gap: var(--uix-space-3) var(--uix-space-5); margin: 0;
+  }
+  .uix-insight__kpi { display: flex; flex-direction: column; gap: var(--uix-space-1); min-width: 0; }
+  .uix-insight__kpi dd { margin: 0; }
+  .uix-insight__kpi-label { order: 0; color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
+  .uix-insight__kpi-value { order: -1; color: var(--uix-text); font-size: var(--uix-text-h2); font-weight: 600; line-height: 1.15; letter-spacing: var(--uix-tracking-tight); }
+  .uix-insight__kpi-comparison { color: var(--uix-text-hushed); font-size: var(--uix-text-meta); font-weight: 600; }
+  .uix-insight__kpi-comparison[data-tone="positive"] { color: var(--uix-success); }
+  .uix-insight__kpi-comparison[data-tone="negative"] { color: var(--uix-danger-text); }
+  .uix-insight__kpi-comparison[data-tone="warning"] { color: var(--uix-warning-text); }
+  .uix-insight__kpi-target { padding-top: var(--uix-space-1); }
+
+  .uix-insight__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--uix-space-4); min-width: 0; }
+  .uix-insight__main, .uix-insight__aside { min-width: 0; }
+  .uix-insight__body > * > .uix-chart { padding: 0; border: 0; box-shadow: none; background: transparent; }
+  @container uix-insight (min-width: 60rem) {
+    .uix-insight[data-layout="split"] .uix-insight__body:has(> .uix-insight__aside) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
+  }
+
+  .uix-insight__footer {
+    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--uix-space-3) var(--uix-space-4);
+    padding-top: var(--uix-space-3); border-top: 1px solid var(--uix-border);
+  }
+  .uix-insight__meta { display: flex; flex: 1 1 16rem; flex-direction: column; gap: var(--uix-space-1); min-width: 0; color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
+  .uix-insight__coverage, .uix-insight__source { display: flex; flex-wrap: wrap; gap: 0 var(--uix-space-3); margin: 0; overflow-wrap: anywhere; }
+  .uix-insight__partial { color: var(--uix-text-hushed); }
+  .uix-insight__actions { display: flex; flex-wrap: wrap; gap: var(--uix-space-2); }
+
+  /* Bullet (Few): bands in neutral steps, the actual as a dark bar, the target as a tick. */
+  .uix-bullet { position: relative; width: 100%; min-width: 6rem; height: 12px; border-radius: var(--uix-radius-xs); background: var(--uix-bg-subtle); }
+  .uix-bullet__range { position: absolute; top: 0; bottom: 0; background: var(--uix-bg-active); }
+  .uix-bullet__range[data-band="1"] { background: var(--uix-bg-hover); }
+  .uix-bullet__range[data-band="2"] { background: var(--uix-bg-subtle); }
+  .uix-bullet__bar { position: absolute; top: 4px; left: 0; height: 4px; border-radius: var(--uix-radius-xs); background: var(--uix-text); }
+  .uix-bullet__target { position: absolute; top: 0; bottom: 0; width: 2px; translate: -50% 0; background: var(--uix-text); }
+  @media (forced-colors: active) {
+    .uix-bullet { border: 1px solid CanvasText; }
+    .uix-bullet__bar, .uix-bullet__target { background: CanvasText; }
+  }
+}

package/styles/components/search-suggest.css

@@ -62,7 +62,7 @@
   .uix-search-suggest__icon svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }
   .uix-search-suggest__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
   .uix-search-suggest__title {
-    font-size: var(--uix-text-body); font-weight: 500; line-height: 1.35;
+    font-size: var(--uix-text-body); font-weight: 400; line-height: 1.35;
     overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
   }
 

package/styles/components/stat-tile.css

@@ -23,12 +23,13 @@
   .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 */
+  /* interactive — the whole tile is a <button> that opens an editor. A flex column, not a
+     block: a <button> stretched by its row centres block content (HAR-1753). */
   .uix-stat--interactive {
-    display: block; width: 100%; font: inherit; color: inherit; text-align: start; cursor: pointer;
+    display: flex; flex-direction: column; 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:hover:where(:not([aria-busy="true"])) { 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; }
@@ -36,6 +37,8 @@
   .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); }
+  /* pending — aria-busy with aria-disabled, never :disabled, so the button keeps focus */
+  .uix-stat--interactive[aria-busy="true"] { cursor: progress; opacity: .6; }
   /* link — the whole tile is an <a> to a filtered list or a record (HAR-1350) */
   .uix-stat--link { text-decoration: none; }
   /* current: the ring outline only; a brand tint would drop the muted label below AA */