@tensor_1/tokens 2.50.0 → 2.51.1

package/build/css/tokens.css

@@ -147,6 +147,7 @@
     --uix-radius-pill: 999px;
     --uix-row-h: 56px;
     --uix-row-h-compact: 44px;
+    --uix-row-h-standard: 56px;
     --uix-row-h-comfortable: 68px;
     --uix-control-h: 36px;
     --uix-sidebar-w: 248px;

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" | "success-text" | "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" | "neutral-solid" | "neutral-text" | "neutral-bg" | "neutral-border" | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-6" | "chart-7" | "chart-8" | "chart-neutral" | "chart-grid" | "chart-axis" | "chart-reference" | "chart-zone-warning" | "chart-zone-danger" | "chart-forecast-band" | "chart-event" | "chart-partial" | "chart-comparison" | "row" | "row-alt" | "row-pinned-bg" | "row-selected-bg" | "scrollbar-thumb" | "scrollbar-thumb-hover" | "scrollbar-track" | "scrim" | "scrim-strong" | "print-ink" | "print-ink-quiet" | "print-paper" | "print-paper-quiet" | "print-line" | "print-danger" | "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" | "dur-exit-fast" | "dur-exit" | "dur-exit-slow" | "dur-highlight" | "dur-change" | "delay-pending" | "hold-pending" | "hold-result" | "delay-tooltip" | "delay-tooltip-skip" | "loop-spin" | "loop-progress" | "loop-shimmer" | "loop-ping" | "loop-blink" | "loop-pulse" | "lift" | "z-raised" | "z-sticky" | "z-dropdown" | "z-overlay" | "z-tooltip" | "z-toast" | "radius-xs" | "radius-sm" | "radius-md" | "radius-lg" | "radius-xl" | "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" | "success-text" | "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" | "neutral-solid" | "neutral-text" | "neutral-bg" | "neutral-border" | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-6" | "chart-7" | "chart-8" | "chart-neutral" | "chart-grid" | "chart-axis" | "chart-reference" | "chart-zone-warning" | "chart-zone-danger" | "chart-forecast-band" | "chart-event" | "chart-partial" | "chart-comparison" | "row" | "row-alt" | "row-pinned-bg" | "row-selected-bg" | "scrollbar-thumb" | "scrollbar-thumb-hover" | "scrollbar-track" | "scrim" | "scrim-strong" | "print-ink" | "print-ink-quiet" | "print-paper" | "print-paper-quiet" | "print-line" | "print-danger" | "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" | "dur-exit-fast" | "dur-exit" | "dur-exit-slow" | "dur-highlight" | "dur-change" | "delay-pending" | "hold-pending" | "hold-result" | "delay-tooltip" | "delay-tooltip-skip" | "loop-spin" | "loop-progress" | "loop-shimmer" | "loop-ping" | "loop-blink" | "loop-pulse" | "lift" | "z-raised" | "z-sticky" | "z-dropdown" | "z-overlay" | "z-tooltip" | "z-toast" | "radius-xs" | "radius-sm" | "radius-md" | "radius-lg" | "radius-xl" | "radius-pill" | "row-h" | "row-h-compact" | "row-h-standard" | "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

@@ -148,6 +148,7 @@ export const cssVar = {
   "radius-pill": "var(--uix-radius-pill)",
   "row-h": "var(--uix-row-h)",
   "row-h-compact": "var(--uix-row-h-compact)",
+  "row-h-standard": "var(--uix-row-h-standard)",
   "row-h-comfortable": "var(--uix-row-h-comfortable)",
   "control-h": "var(--uix-control-h)",
   "sidebar-w": "var(--uix-sidebar-w)",
@@ -343,6 +344,7 @@ export const light = {
   "radius-pill": "999px",
   "row-h": "56px",
   "row-h-compact": "44px",
+  "row-h-standard": "56px",
   "row-h-comfortable": "68px",
   "control-h": "36px",
   "sidebar-w": "248px",
@@ -487,6 +489,7 @@ export const num = {
   "radius-pill": 999,
   "row-h": 56,
   "row-h-compact": 44,
+  "row-h-standard": 56,
   "row-h-comfortable": 68,
   "control-h": 36,
   "sidebar-w": 248,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/tokens",
-  "version": "2.50.0",
+  "version": "2.51.1",
   "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/data-workspace.css

@@ -54,6 +54,11 @@
   .uix-data-workspace__id-text { display: inline-flex; flex-direction: column; align-items: flex-start; min-inline-size: 0; text-align: start; }
   .uix-data-workspace__id-text > * { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .uix-data-workspace__id-link { color: var(--uix-text); text-decoration: none; }
+  /* in a fixed layout the id column has a width: a long id ends in an ellipsis there, not drawn
+     over the next column (an auto layout grows the column instead) */
+  .uix-data-workspace .uix-table--fixed td.uix-id-cell { overflow: hidden; }
+  .uix-data-workspace__id .uix-id-cell__btn { min-inline-size: 0; max-inline-size: 100%; }
+  .uix-data-workspace__id-label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
   /* row groups: each group is a tbody under its header row. The zebra restarts under every header
      with a plain row: the group swaps the two row colours its rows read (no selector here outranks
@@ -65,6 +70,9 @@
     height: auto; padding-block: var(--uix-space-2); border-bottom: 1px solid var(--uix-border);
     background: linear-gradient(var(--uix-row-bg), var(--uix-row-bg)), var(--uix-surface);
   }
+  /* a group header is as tall as its content at every density: the density heights on the table
+     (0,3,1) outrank the rule above, so this one names the header row at a higher weight */
+  .uix-data-workspace .uix-table tbody tr.uix-data-workspace__group-head > :is(th, td) { height: auto; }
   .uix-data-workspace__group-label { font-weight: 400; text-align: start; }
   /* the label spans several columns: its words stay in view while the table scrolls sideways,
      the cell itself does not stick (it would slide over the aggregates) */
@@ -125,7 +133,7 @@
   .uix-data-workspace .uix-table--cards td[data-col="actions"] .uix-rowact { opacity: 1; }
   /* the id's words wrap in a card rather than run under the actions */
   .uix-data-workspace .uix-table--cards .uix-data-workspace__id, .uix-data-workspace .uix-table--cards .uix-id-cell__btn { white-space: normal; text-align: start; }
-  .uix-data-workspace .uix-table--cards .uix-data-workspace__id-text > * { white-space: normal; overflow-wrap: anywhere; }
+  .uix-data-workspace .uix-table--cards .uix-data-workspace__id-text > *, .uix-data-workspace .uix-table--cards .uix-data-workspace__id-label { white-space: normal; overflow-wrap: anywhere; }
   /* a group's header in cards: one line above its cards (checkbox, toggle, name, count, then the aggregates) */
   .uix-data-workspace .uix-table--cards tbody tr.uix-data-workspace__group-head {
     display: flex; flex-wrap: wrap; align-items: center; gap: var(--uix-space-1) var(--uix-space-3);

package/styles/components/print-layout.css

@@ -48,6 +48,8 @@
     font-size: 10pt;
     line-height: 1.45;
     --uix-row-h: var(--uix-row-h-compact);
+    /* the paper's rows are compact, also in a table that names standard (HAR-2631) */
+    --uix-row-h-standard: var(--uix-row-h-compact);
     background: var(--uix-print-paper);
     color: var(--uix-print-ink);
     box-shadow: var(--uix-shadow-md);

package/styles/components/table.css

@@ -5,7 +5,11 @@
   /* 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); }
+  /* position: relative (HAR-2632): the wrap is the frame for anything absolute in a cell (a
+     visually hidden label), which otherwise sat at its place in the scrolled table, outside the
+     wrap, and widened the page (TENSOR: 1377 px of content in a 1032 px main). Sticky headers and
+     frozen cells, the sticky busy bar and the top-layer menus and popovers do not depend on it. */
+  .uix-table-wrap { position: relative; 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); }
 
@@ -53,13 +57,24 @@
   .uix-table--no-zebra tbody tr:where(:nth-child(even)) { --uix-row-bg: var(--uix-row); }
   .uix-table tbody tr:where([data-pinned]) { --uix-row-bg: var(--uix-row-pinned-bg); }
   .uix-table tbody tr:where([data-selected]) { --uix-row-bg: var(--uix-row-selected-bg); }
+  /* Muted text in a selected row reads on the selection tint at AA (HAR-2635: 4.36:1 before). It is
+     derived, not a fixed colour: the table keeps the muted colour of its scope (a theme, more
+     contrast, print), and a selected row moves it 30 % toward that scope's text, so any scope that
+     sets --uix-text-muted gets a darker (light) or lighter (dark) muted on its selection, never a
+     weaker one. */
+  .uix-table { --uix-table-muted: var(--uix-text-muted); }
+  .uix-table tbody tr:where([data-selected], [aria-selected="true"]) { --uix-text-muted: color-mix(in srgb, var(--uix-table-muted) 70%, var(--uix-text)); }
   @media (hover: hover) { .uix-table tbody tr:where(:hover) { --uix-row-bg: var(--uix-bg-hover); } }
   /* Row links stay calm on hover/focus: the row tint is the affordance, so neither the base
      layer's `a:hover` underline nor link.css reaches them. `:not(.uix-btn)` keeps buttons
      styled; the global :focus-visible ring still marks keyboard focus. */
   .uix-table tbody a:not(.uix-btn):is(:hover, :focus-visible) { color: var(--uix-text); text-decoration: none; }
-  .uix-table[data-density="compact"] td, .uix-table--compact td { height: var(--uix-row-h-compact); }
-  .uix-table[data-density="comfortable"] td { height: var(--uix-row-h-comfortable); }
+  /* not in cards: a card's cells are as tall as their content (HAR-2631 item 3, the density rules
+     outranked the cards reset and a two-line id ran over the card's top border) */
+  .uix-table:not(.uix-table--cards)[data-density="compact"] td, .uix-table--compact:not(.uix-table--cards) td { height: var(--uix-row-h-compact); }
+  .uix-table:not(.uix-table--cards)[data-density="comfortable"] td { height: var(--uix-row-h-comfortable); }
+  /* a table that asks for standard keeps it under a page-wide --uix-row-h re-point (HAR-2631) */
+  .uix-table:not(.uix-table--cards)[data-density="standard"] td { height: var(--uix-row-h-standard); }
 
   .uix-table__pin { border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; padding: var(--uix-space-1); border-radius: var(--uix-radius-xs); transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
   /* Hidden until hover only where hover exists; a touch screen always shows the pin. The
@@ -165,6 +180,9 @@
 
   /* ── row hover actions + kebab ─────────────────────────────────────────────────── */
   .uix-table__actions { width: 84px; text-align: right; white-space: nowrap; }
+  /* the controls share one centre line: an icon-only button has no text baseline, so on the
+     baseline it sat a few px above the word buttons beside it */
+  .uix-table__actions :is(.uix-btn, .uix-rowact) { vertical-align: middle; }
   .uix-rowact { border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; padding: var(--uix-space-1); border-radius: var(--uix-radius-sm); transition: opacity var(--uix-dur-fast) var(--uix-ease-out), background-color var(--uix-dur-fast) var(--uix-ease-out); }
   .uix-rowact svg { width: 16px; height: 16px; display: block; }
   /* Row actions hide until hover only where hover exists: on a touch screen they stay visible, so

package/tokens/base/size.json

@@ -8,6 +8,7 @@
 
   "row-h":             { "$type": "dimension", "$value": "56px" },
   "row-h-compact":     { "$type": "dimension", "$value": "44px" },
+  "row-h-standard":    { "$type": "dimension", "$value": "56px", "$description": "The standard row height, held by a table that asks for it (Table density=\"standard\", HAR-2631): a page-wide re-point of --uix-row-h (a density or spacing preference) does not reach it. A table that names no density follows --uix-row-h." },
   "row-h-comfortable": { "$type": "dimension", "$value": "68px" },
   "control-h":         { "$type": "dimension", "$value": "36px" },
   "sidebar-w":         { "$type": "dimension", "$value": "248px" },