@tensor_1/tokens 2.45.1 → 2.47.0

package/styles/components/table.css

@@ -47,9 +47,14 @@
   .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); }
 
-  .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); opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
-  /* :focus-visible reveal mirrors .uix-rowact so keyboard users can find the pin (UIX-A11Y-2) */
-  .uix-table tbody tr:hover .uix-table__pin, .uix-table__pin:focus-visible, .uix-table__pin[data-on] { opacity: 1; }
+  .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
+     :focus-visible reveal mirrors .uix-rowact so keyboard users can find it (UIX-A11Y-2). */
+  @media (hover: hover) and (pointer: fine) {
+    .uix-table__pin { opacity: 0; }
+    .uix-table tbody tr:hover .uix-table__pin { opacity: 1; }
+  }
+  .uix-table__pin:focus-visible, .uix-table__pin[data-on] { opacity: 1; }
   .uix-table__pin:hover { background: var(--uix-bg-active); color: var(--uix-text); }
   .uix-table__pin[data-on] { color: var(--uix-accent); }
   .uix-table__pin svg { width: 15px; height: 15px; }
@@ -112,10 +117,14 @@
   .uix-id-cell__btn:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; border-radius: var(--uix-radius-xs); }
   .uix-id-cell__arrow {
     width: var(--uix-icon-sm); height: var(--uix-icon-sm); flex-shrink: 0; color: var(--uix-text-muted);
-    opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out);
+    transition: opacity var(--uix-dur-fast) var(--uix-ease-out);
   }
   /* :focus-within as well: a keyboard user on the id link sees the arrow too (HAR-1814). */
-  .uix-table tbody tr:hover .uix-id-cell__arrow, .uix-table tbody tr:focus-within .uix-id-cell__arrow { opacity: 1; }
+  @media (hover: hover) and (pointer: fine) {
+    .uix-id-cell__arrow { opacity: 0; }
+    .uix-table tbody tr:hover .uix-id-cell__arrow { opacity: 1; }
+  }
+  .uix-table tbody tr:focus-within .uix-id-cell__arrow { opacity: 1; }
 
   /* ── selection column + select-all ────────────────────────────────────────────── */
   .uix-table th.uix-table__selcol, .uix-table td.uix-table__selcell { width: 44px; padding-left: var(--uix-space-3); padding-right: 0; text-align: center; }
@@ -136,10 +145,15 @@
 
   /* ── row hover actions + kebab ─────────────────────────────────────────────────── */
   .uix-table__actions { width: 84px; text-align: right; white-space: nowrap; }
-  .uix-rowact { border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; padding: var(--uix-space-1); border-radius: var(--uix-radius-sm); opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out), background-color var(--uix-dur-fast) var(--uix-ease-out); }
+  .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; }
-  /* A row the keyboard is in shows its actions, as a hovered one does (HAR-1814). */
-  .uix-table tbody tr:hover .uix-rowact, .uix-table tbody tr:focus-within .uix-rowact, .uix-rowact:focus-visible, .uix-rowact[aria-expanded="true"] { opacity: 1; }
+  /* Row actions hide until hover only where hover exists: on a touch screen they stay visible, so
+     hover is never the only way to reach them. A row the keyboard is in shows them too (HAR-1814). */
+  @media (hover: hover) and (pointer: fine) {
+    .uix-rowact { opacity: 0; }
+    .uix-table tbody tr:hover .uix-rowact { opacity: 1; }
+  }
+  .uix-table tbody tr:focus-within .uix-rowact, .uix-rowact:focus-visible, .uix-rowact[aria-expanded="true"] { opacity: 1; }
   .uix-rowact:hover { background: var(--uix-bg-active); color: var(--uix-text); }
 
   /* ── expandable inline row ─────────────────────────────────────────────────────── */
@@ -155,10 +169,13 @@
   @media (prefers-reduced-motion: reduce) { .uix-table__expand svg { transition: none; } }
 
   /* ── inline cell edit ──────────────────────────────────────────────────────────── */
-  .uix-cell-edit { display: inline-flex; align-items: center; gap: var(--uix-space-2); cursor: text; border-radius: var(--uix-radius-sm); padding: var(--uix-space-1) var(--uix-space-2); margin: calc(-1 * var(--uix-space-1)) calc(-1 * var(--uix-space-2)); transition: background-color var(--uix-dur-fast) var(--uix-ease-out), box-shadow var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-cell-edit { display: inline-flex; align-items: center; gap: var(--uix-space-2); cursor: text; border-radius: var(--uix-radius-sm); padding: var(--uix-space-1) var(--uix-space-2); margin: calc(-1 * var(--uix-space-1)) calc(-1 * var(--uix-space-2)); transition: background-color var(--uix-dur-fast) var(--uix-ease-out); }
   .uix-cell-edit:hover { background: var(--uix-bg-active); }
-  .uix-cell-edit__pencil { width: 13px; height: 13px; color: var(--uix-text-muted); opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
-  .uix-table tbody tr:hover .uix-cell-edit__pencil { opacity: 1; }
+  .uix-cell-edit__pencil { width: 13px; height: 13px; color: var(--uix-text-muted); transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
+  @media (hover: hover) and (pointer: fine) {
+    .uix-cell-edit__pencil { opacity: 0; }
+    .uix-table tbody tr:hover .uix-cell-edit__pencil { opacity: 1; }
+  }
   .uix-cell-edit[data-editing] { background: var(--uix-surface); box-shadow: 0 0 0 2px var(--uix-ring); cursor: default; }
   .uix-cell-edit__ok { color: var(--uix-success); width: 14px; height: 14px; opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
   .uix-cell-edit[data-saved] .uix-cell-edit__ok { opacity: 1; }

package/styles/components/textarea.css

@@ -5,7 +5,7 @@
     border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md);
     background: var(--uix-surface); color: var(--uix-text); font: inherit; font-size: var(--uix-text-body);
     line-height: var(--uix-leading-body);
-    transition: border-color var(--uix-dur-fast) var(--uix-ease-out), box-shadow var(--uix-dur-fast) var(--uix-ease-out);
+    transition: border-color var(--uix-dur-fast) var(--uix-ease-out);
   }
   .uix-textarea::placeholder { color: var(--uix-text-muted); }
   .uix-textarea:hover { border-color: var(--uix-border-strong); }

package/styles/components/toast.css

@@ -6,7 +6,12 @@
     background: var(--uix-surface-2); border: 1px solid var(--uix-border); box-shadow: var(--uix-shadow-popover);
     animation: uix-slide-in-right var(--uix-dur-slow) var(--uix-ease-out);
   }
-  .uix-toast[data-leaving] { animation: uix-toast-out var(--uix-dur) var(--uix-ease-in) forwards; }
+  .uix-toast[data-leaving] { animation: uix-toast-out var(--uix-dur-exit) var(--uix-ease-out) forwards; }
+  @media (prefers-reduced-motion: reduce) {
+    .uix-toast { animation: uix-fade-in var(--uix-dur) var(--uix-ease-out) !important; }
+    .uix-toast[data-leaving] { animation: uix-toast-fade-out var(--uix-dur-exit) var(--uix-ease-out) forwards !important; }
+  }
+  @keyframes uix-toast-fade-out { to { opacity: 0; } }
   @keyframes uix-toast-out { to { opacity: 0; transform: translateX(16px); } }
   .uix-toast__icon { flex: none; margin-top: 1px; }
   .uix-toast__icon svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }

package/styles/components/tooltip.css

@@ -40,7 +40,8 @@
     opacity: 0; pointer-events: none; z-index: var(--uix-z-tooltip);
     transition: opacity var(--uix-dur-fast) var(--uix-ease-out), transform var(--uix-dur-fast) var(--uix-ease-out);
   }
-  [data-uix-tip]:hover::after, [data-uix-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
+  [data-uix-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
+  @media (hover: hover) and (pointer: fine) { [data-uix-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } }
   /* when JS upgrades [data-uix-tip] to a top-layer bubble, drop the clipped CSS-only one */
   .uix-has-js-tip [data-uix-tip]::after { content: none; }
 }

package/styles/components/view-menu.css

@@ -46,7 +46,8 @@
   /* Grip and ⋯ are quiet until the row is hovered or holds focus, the grip is in use, or the menu is
      open — at 75%, the same WCAG 1.4.11 floor as the saved-views row (see below). */
   :is(.uix-view-menu__grip, .uix-view-menu__actions) { opacity: .75; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
-  .uix-view-menu__col:is(:hover, :focus-within, [data-dragging]) :is(.uix-view-menu__grip, .uix-view-menu__actions),
+  @media (hover: hover) and (pointer: fine) { .uix-view-menu__col:hover :is(.uix-view-menu__grip, .uix-view-menu__actions) { opacity: 1; } }
+  .uix-view-menu__col:is(:focus-within, [data-dragging]) :is(.uix-view-menu__grip, .uix-view-menu__actions),
   .uix-view-menu__actions:has([aria-expanded="true"]) { opacity: 1; }
   /* Saved views: optional titled sections in one scrolling menu; a row is grip · name · overflow.
      Hover and selection paint the WHOLE row; the selected row is an accent tint, never a check glyph. */
@@ -69,7 +70,8 @@
      the grip is in use, or the overflow menu is open. Idle is 75% (not lower): the muted grip on the
      panel surface needs it to keep WCAG 1.4.11 3:1 non-text contrast at rest (3.19:1 light, 4.45:1 dark). */
   :is(.uix-saved-views__grip, .uix-saved-views__actions) { opacity: .75; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
-  .uix-saved-views__row:is(:hover, :focus-within, [data-dragging]) :is(.uix-saved-views__grip, .uix-saved-views__actions),
+  @media (hover: hover) and (pointer: fine) { .uix-saved-views__row:hover :is(.uix-saved-views__grip, .uix-saved-views__actions) { opacity: 1; } }
+  .uix-saved-views__row:is(:focus-within, [data-dragging]) :is(.uix-saved-views__grip, .uix-saved-views__actions),
   .uix-saved-views__actions:has([aria-expanded="true"]) { opacity: 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); }

package/styles/motion.css

@@ -1,12 +1,23 @@
-/* uix motion — shared keyframes, enter/exit helpers, and the reduced-motion guard.
-   Components reference these tokens/keyframes; overlays pair the helpers with @starting-style. */
+/* uix motion — shared keyframes, enter/exit helpers, the instant-surface rule and the reduced-motion policy.
+   Components reference these tokens/keyframes; overlays pair the helpers with @starting-style.
+   The contract (docs → Foundations → Motion) is checked by packages/tokens/scripts/check-motion.mjs. */
 
-/* Reduced-motion guard — UNLAYERED so its !important beats every component transition. */
+/* Reduced-motion policy — UNLAYERED. `prefers-reduced-motion: reduce` removes MOVEMENT, not feedback:
+   - Transitions keep only fades and colour changes. Transform, translate, scale, rotate and any layout
+     glide drop out of every transition list, so a popover or drawer still fades but no longer travels.
+     allow-discrete keeps display/overlay exits painted while their fade runs.
+   - Keyframe animations end at once (we cannot tell a product's keyframes from a fade). UIx's own
+     still-working indicators (Spinner, Button loading, skeleton, indeterminate progress, SaveStatus,
+     a running flow node, Heartbeat) opt back in from their component layer with a slow opacity pulse
+     (`uix-pulse`, --uix-loop-pulse) declared !important — a layered !important beats this unlayered one —
+     so the status stays visibly alive instead of freezing. */
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
+    transition-property: opacity, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, visibility, overlay, display !important;
+    transition-behavior: allow-discrete !important;
+    /* motion-allow: ends product keyframes at once while still firing animationend (a 0s duration is skipped by some engines' event paths) */
     animation-duration: .001ms !important;
     animation-iteration-count: 1 !important;
-    transition-duration: .001ms !important;
     scroll-behavior: auto !important;
   }
 }
@@ -21,15 +32,27 @@
 @keyframes uix-slide-in-up    { from { opacity: 0; transform: translateY(8px); }   to { opacity: 1; transform: none; } }
 @keyframes uix-spin { to { transform: rotate(1turn); } }
 @keyframes uix-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
+/* The reduced-motion stand-in for every looping indicator: no movement, a slow breath of opacity. */
+@keyframes uix-pulse { 50% { opacity: .35; } }
 
 @layer uix.motion {
   .uix-anim-fade { animation: uix-fade-in var(--uix-dur) var(--uix-ease-out); }
   .uix-anim-pop  { animation: uix-pop-in var(--uix-dur-fast) var(--uix-ease-out); }
   .uix-anim-up   { animation: uix-slide-in-up var(--uix-dur) var(--uix-ease-out); }
+  @media (prefers-reduced-motion: reduce) {
+    /* the entrance helpers keep their fade and lose their travel */
+    .uix-anim-fade, .uix-anim-pop, .uix-anim-up { animation: uix-fade-in var(--uix-dur) var(--uix-ease-out) !important; }
+  }
 
-  /* Hover-lift affordance for interactive cards/tiles. Gated so touch devices don't get a stuck hover. */
-  .uix-lift-hover { transition: transform var(--uix-dur-fast) var(--uix-ease-out), box-shadow var(--uix-dur-fast) var(--uix-ease-out); }
+  /* Hover-lift affordance for interactive cards/tiles. Gated so touch devices don't get a stuck hover.
+     The shadow steps; only the lift animates (box-shadow is never animated). */
+  .uix-lift-hover { transition: transform var(--uix-dur-fast) var(--uix-ease-out); }
   @media (hover: hover) and (pointer: fine) {
     .uix-lift-hover:hover { transform: translateY(calc(-1 * var(--uix-lift))); box-shadow: var(--uix-shadow-popover); }
   }
+
+  /* Instant surfaces. Keyboard-initiated and 100×-a-day surfaces (the command palette, an overlay opened
+     from the keyboard) open and close with no animation — the frequency budget is "none". Overlays set
+     [data-uix-instant] themselves (Modal `instant`, CommandPalette, keyboard-opened menus and selects). */
+  [data-uix-instant], [data-uix-instant]::backdrop { transition: none !important; animation: none !important; }
 }

package/tokens/base/effect.json

@@ -7,8 +7,8 @@
 
   "ease-out":        { "$type": "cubicBezier", "$value": "cubic-bezier(.23,1,.32,1)" },
   "ease-out-strong": { "$type": "cubicBezier", "$value": "cubic-bezier(.2,0,0,1)" },
-  "ease-in":         { "$type": "cubicBezier", "$value": "cubic-bezier(.4,0,1,1)" },
-  "ease-in-out":     { "$type": "cubicBezier", "$value": "cubic-bezier(.77,0,.175,1)" },
+  "ease-in":         { "$type": "cubicBezier", "$value": "cubic-bezier(.4,0,1,1)", "$description": "Kept for compatibility only. An accelerating curve on something the user watches reads as lag, so exits use --uix-ease-out at a --uix-dur-exit-* duration; check-motion.mjs fails component CSS that uses ease-in." },
+  "ease-in-out":     { "$type": "cubicBezier", "$value": "cubic-bezier(.77,0,.175,1)", "$description": "Movement already on screen (a strong in-out, easeInOutQuart). The spec's older cubic-bezier(.4,0,.2,1) was never shipped; this value is canonical." },
   "ease-spring":     { "$type": "cubicBezier", "$value": "cubic-bezier(.34,1.56,.64,1)" },
 
   "dur-fast":   { "$type": "duration", "$value": "120ms" },
@@ -16,6 +16,21 @@
   "dur-slow":   { "$type": "duration", "$value": "240ms" },
   "dur-slower": { "$type": "duration", "$value": "320ms" },
 
+  "dur-exit-fast": { "$type": "duration", "$value": "80ms",  "$description": "Exit paired with --uix-dur-fast (about two-thirds of the enter). Exits are faster than enters and never ease-in." },
+  "dur-exit":      { "$type": "duration", "$value": "110ms", "$description": "Exit paired with --uix-dur (popovers, menus, select, toasts)." },
+  "dur-exit-slow": { "$type": "duration", "$value": "160ms", "$description": "Exit paired with --uix-dur-slow (modal, drawer, side peek)." },
+  "dur-highlight": { "$type": "duration", "$value": "2400ms", "$description": "How long an arrival or change tint takes to fade back to the row colour. Not a transition budget: the tint is a held signal, not movement." },
+
+  "delay-tooltip":      { "$type": "duration", "$value": "400ms", "$description": "Hover delay before a tooltip opens. Keyboard focus opens it at once." },
+  "delay-tooltip-skip": { "$type": "duration", "$value": "300ms", "$description": "Delay-group window: a neighbouring tooltip hovered within this long after one closed opens at once." },
+
+  "loop-spin":     { "$type": "duration", "$value": "600ms",  "$description": "One turn of a spinner (Spinner, Button loading, a running flow node)." },
+  "loop-progress": { "$type": "duration", "$value": "1200ms", "$description": "One sweep of indeterminate progress." },
+  "loop-shimmer":  { "$type": "duration", "$value": "1400ms", "$description": "One pass of the skeleton shimmer." },
+  "loop-ping":     { "$type": "duration", "$value": "1600ms", "$description": "One heartbeat ping." },
+  "loop-blink":    { "$type": "duration", "$value": "1100ms", "$description": "One caret blink cycle." },
+  "loop-pulse":    { "$type": "duration", "$value": "2000ms", "$description": "One cycle of the reduced-motion opacity pulse that replaces spinners, shimmer and indeterminate progress, so a still-working indicator stays visibly alive without movement." },
+
   "lift": { "$type": "dimension", "$value": "4px" },
 
   "z-raised":   { "$type": "number", "$value": "1",   "$description": "z-index ladder (semantic stacking order). raised = locally lifted within a component: a sticky table header & first column, a flow node title over its diamond, a heartbeat dot over its ping." },