@tensor_1/tokens 2.45.1 → 2.46.0

package/build/css/tokens.css

@@ -116,6 +116,18 @@
     --uix-dur: 160ms;
     --uix-dur-slow: 240ms;
     --uix-dur-slower: 320ms;
+    --uix-dur-exit-fast: 80ms;
+    --uix-dur-exit: 110ms;
+    --uix-dur-exit-slow: 160ms;
+    --uix-dur-highlight: 2400ms;
+    --uix-delay-tooltip: 400ms;
+    --uix-delay-tooltip-skip: 300ms;
+    --uix-loop-spin: 600ms;
+    --uix-loop-progress: 1200ms;
+    --uix-loop-shimmer: 1400ms;
+    --uix-loop-ping: 1600ms;
+    --uix-loop-blink: 1100ms;
+    --uix-loop-pulse: 2000ms;
     --uix-lift: 4px;
     --uix-z-raised: 1;
     --uix-z-sticky: 3;

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" | "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" | "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 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

@@ -117,6 +117,18 @@ export const cssVar = {
   "dur": "var(--uix-dur)",
   "dur-slow": "var(--uix-dur-slow)",
   "dur-slower": "var(--uix-dur-slower)",
+  "dur-exit-fast": "var(--uix-dur-exit-fast)",
+  "dur-exit": "var(--uix-dur-exit)",
+  "dur-exit-slow": "var(--uix-dur-exit-slow)",
+  "dur-highlight": "var(--uix-dur-highlight)",
+  "delay-tooltip": "var(--uix-delay-tooltip)",
+  "delay-tooltip-skip": "var(--uix-delay-tooltip-skip)",
+  "loop-spin": "var(--uix-loop-spin)",
+  "loop-progress": "var(--uix-loop-progress)",
+  "loop-shimmer": "var(--uix-loop-shimmer)",
+  "loop-ping": "var(--uix-loop-ping)",
+  "loop-blink": "var(--uix-loop-blink)",
+  "loop-pulse": "var(--uix-loop-pulse)",
   "lift": "var(--uix-lift)",
   "z-raised": "var(--uix-z-raised)",
   "z-sticky": "var(--uix-z-sticky)",
@@ -296,6 +308,18 @@ export const light = {
   "dur": "160ms",
   "dur-slow": "240ms",
   "dur-slower": "320ms",
+  "dur-exit-fast": "80ms",
+  "dur-exit": "110ms",
+  "dur-exit-slow": "160ms",
+  "dur-highlight": "2400ms",
+  "delay-tooltip": "400ms",
+  "delay-tooltip-skip": "300ms",
+  "loop-spin": "600ms",
+  "loop-progress": "1200ms",
+  "loop-shimmer": "1400ms",
+  "loop-ping": "1600ms",
+  "loop-blink": "1100ms",
+  "loop-pulse": "2000ms",
   "lift": "4px",
   "z-raised": "1",
   "z-sticky": "3",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/tokens",
-  "version": "2.45.1",
+  "version": "2.46.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": [
@@ -47,7 +47,7 @@
     "build:styles": "node scripts/build-styles.mjs",
     "build": "npm run build:tokens && npm run build:themes && npm run build:styles",
     "test:parity": "node scripts/check-parity.mjs",
-    "test:contract": "node scripts/check-contract.mjs",
+    "test:contract": "node scripts/check-contract.mjs && node scripts/check-motion.mjs",
     "docs:serve": "serve -l 4178 ../..",
     "size:css": "node scripts/size-report.mjs --check",
     "size:css:update": "node scripts/size-report.mjs --update",

package/styles/components/app-shell.css

@@ -7,9 +7,9 @@
     grid-template-rows: var(--uix-topbar-h) 1fr;
     height: 100%; min-height: 360px;
     border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); overflow: hidden;
-    transition: grid-template-columns var(--uix-dur) var(--uix-ease-out), grid-template-rows var(--uix-dur) var(--uix-ease-out);
+    /* No transition: collapsing the nav is frequent, so the tracks switch instantly (grid tracks never animate). */
   }
-  .uix-shell__sidebar { grid-row: 1 / 3; background: var(--uix-bg-subtle); border-right: 1px solid var(--uix-border); overflow-y: auto; overflow-x: hidden; visibility: visible; transition: visibility var(--uix-dur) var(--uix-ease-out); }
+  .uix-shell__sidebar { grid-row: 1 / 3; background: var(--uix-bg-subtle); border-right: 1px solid var(--uix-border); overflow-y: auto; overflow-x: hidden; visibility: visible; }
   .uix-shell__topbar { grid-column: 2; display: flex; align-items: center; gap: var(--uix-space-3); padding: 0 var(--uix-space-6); background: var(--uix-bg-app); border-bottom: 1px solid var(--uix-border); }
   .uix-shell__main { grid-column: 2; overflow: auto; padding: var(--uix-space-7); background: var(--uix-bg-app); }
 
@@ -19,7 +19,7 @@
   .uix-shell[data-nav="rail"], .uix-shell[data-collapsed] { grid-template-columns: var(--uix-sidebar-w-rail) 1fr; }
   .uix-shell[data-nav="hidden"] { grid-template-columns: 0 1fr; }
   /* the 0-width column still renders its links — visibility removes them from the tab
-     order / accessibility tree while keeping the width transition (UIX-A11Y-2) */
+     order / accessibility tree (UIX-A11Y-2) */
   .uix-shell[data-nav="hidden"] .uix-shell__sidebar { visibility: hidden; }
 
   /* ── focus / immersive mode ───────────────────────────────────────────────────

package/styles/components/arrival.css

@@ -6,23 +6,24 @@
   .uix-arrival {
     border-radius: var(--uix-radius-md);
     scroll-margin-block: var(--uix-space-10);
-    animation: uix-arrival 2.4s var(--uix-ease-out) both;
+    animation: uix-arrival var(--uix-dur-highlight) var(--uix-ease-out) both;
   }
   @keyframes uix-arrival {
-    0%, 40% { background-color: var(--uix-brand-muted); box-shadow: 0 0 0 var(--uix-space-2) var(--uix-brand-muted); }
-    100% { background-color: transparent; box-shadow: 0 0 0 var(--uix-space-2) transparent; }
+    /* the outline carries the tint past the element's edge; only its colour fades */
+    0%, 40% { background-color: var(--uix-brand-muted); outline: var(--uix-space-2) solid var(--uix-brand-muted); outline-offset: 0; }
+    100% { background-color: transparent; outline: var(--uix-space-2) solid transparent; outline-offset: 0; }
   }
 
-  /* no fade: a steady outline for two seconds, then nothing */
+  /* no fade: a steady outline for the highlight time, then nothing */
   @keyframes uix-arrival-static {
     0% { outline: 2px solid var(--uix-ring); outline-offset: var(--uix-space-1); }
     100% { outline: 2px solid transparent; outline-offset: var(--uix-space-1); }
   }
   @media (prefers-reduced-motion: reduce) {
-    .uix-arrival { animation: uix-arrival-static 2s step-end both; }
+    .uix-arrival { animation: uix-arrival-static var(--uix-dur-highlight) step-end both; }
   }
 
   @media (forced-colors: active) {
-    .uix-arrival { animation: uix-arrival-static 2s step-end both; }
+    .uix-arrival { animation: uix-arrival-static var(--uix-dur-highlight) step-end both; }
   }
 }

package/styles/components/avatar.css

@@ -30,7 +30,8 @@
   .uix-avatar--editable { cursor: pointer; }
   .uix-avatar__edit { position: absolute; inset: 0; display: grid; place-items: center; background: var(--uix-scrim); color: var(--uix-text-reverse); opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
   .uix-avatar__edit svg { width: 45%; height: 45%; }
-  .uix-avatar--editable:hover .uix-avatar__edit, .uix-avatar--editable:focus-visible .uix-avatar__edit { opacity: 1; }
+  .uix-avatar--editable:focus-visible .uix-avatar__edit { opacity: 1; }
+  @media (hover: hover) and (pointer: fine) { .uix-avatar--editable:hover .uix-avatar__edit { opacity: 1; } }
   .uix-avatar--empty { background: var(--uix-bg-subtle); border: 1.5px dashed var(--uix-border-strong); color: var(--uix-text-muted); }
 }
 

package/styles/components/button.css

@@ -60,8 +60,9 @@
   .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-text); animation: uix-spin .6s linear infinite;
+    color: var(--uix-text); animation: uix-spin var(--uix-loop-spin) linear infinite;
   }
+  @media (prefers-reduced-motion: reduce) { .uix-btn[data-loading]::after { animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; } }
   .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); }

package/styles/components/card.css

@@ -8,8 +8,10 @@
   .uix-card__body { padding: var(--uix-space-6); }
   /* wraps at 320 px (WCAG 1.4.10) */
   .uix-card__footer { padding: var(--uix-space-4) var(--uix-space-6); border-top: 1px solid var(--uix-border); display: flex; flex-wrap: wrap; gap: var(--uix-space-2); justify-content: flex-end; }
-  .uix-card--interactive { display: block; color: inherit; text-decoration: none; cursor: pointer; transition: border-color var(--uix-dur-fast) var(--uix-ease-out), box-shadow var(--uix-dur-fast) var(--uix-ease-out), transform var(--uix-dur-fast) var(--uix-ease-out); }
-  .uix-card--interactive:is(:hover, :focus-visible) { border-color: var(--uix-border-strong); box-shadow: var(--uix-shadow-md); text-decoration: none; transform: translateY(-1px); }
+  .uix-card--interactive { display: block; color: inherit; text-decoration: none; cursor: pointer; transition: border-color var(--uix-dur-fast) var(--uix-ease-out), transform var(--uix-dur-fast) var(--uix-ease-out); }
+  /* The shadow steps (box-shadow never animates); the lift is hover-only, and keyboard focus gets no movement. */
+  .uix-card--interactive:focus-visible { border-color: var(--uix-border-strong); box-shadow: var(--uix-shadow-md); text-decoration: none; }
+  @media (hover: hover) and (pointer: fine) { .uix-card--interactive:hover { border-color: var(--uix-border-strong); box-shadow: var(--uix-shadow-md); text-decoration: none; transform: translateY(-1px); } }
   .uix-card--interactive:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
   .uix-collapsible { border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); background: var(--uix-surface); }
   .uix-collapsible__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--uix-space-3); padding: var(--uix-space-4) var(--uix-space-5); cursor: pointer; list-style: none; }

package/styles/components/flow.css

@@ -67,7 +67,7 @@
   .uix-node--active, .uix-node--running { box-shadow: var(--uix-shadow-sm), 0 0 0 3px var(--tone-bg); }
 
   /* running node spins its icon */
-  .uix-node--running .uix-node__icon svg { animation: uix-flow-spin 1s linear infinite; }
+  .uix-node--running .uix-node__icon svg { animation: uix-flow-spin var(--uix-loop-spin) linear infinite; }
 
   /* ---- decision / diamond ---- */
   .uix-node--decision {
@@ -175,8 +175,7 @@
     border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md);
     background: var(--uix-surface); color: var(--uix-text);
     font-size: var(--uix-text-meta); cursor: grab; box-shadow: var(--uix-shadow-sm);
-    transition: box-shadow var(--uix-dur-fast) var(--uix-ease-out),
-                transform var(--uix-dur-fast) var(--uix-ease-out);
+    transition: transform var(--uix-dur-fast) var(--uix-ease-out);
   }
   .uix-flow__chip svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); color: var(--uix-text-muted); flex: none; }
   .uix-flow__chip:active { cursor: grabbing; }
@@ -210,7 +209,8 @@
   @keyframes uix-flow-march { to { stroke-dashoffset: -18; } }
 
   @media (prefers-reduced-motion: reduce) {
-    .uix-node--running .uix-node__icon svg,
+    /* a running node keeps showing it runs: the icon breathes instead of turning */
+    .uix-node--running .uix-node__icon svg { animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; }
     .uix-flow:hover .uix-flow__edge,
     .uix-flow:focus-within .uix-flow__edge { animation: none; }
   }

package/styles/components/heartbeat.css

@@ -1,12 +1,17 @@
-/* uix heartbeat / live status indicator — a pulsing ping. Respects reduced-motion (guard stops the ping). */
+/* uix heartbeat / live status indicator — a pulsing ping. Under reduced motion the ping (it grows) goes
+   and the dot itself breathes, so "live" is still visible. */
 @layer uix.components {
   .uix-heartbeat { position: relative; display: inline-grid; place-items: center; width: 8px; height: 8px; flex: none; }
   .uix-heartbeat__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--uix-success); z-index: var(--uix-z-raised); }
-  .uix-heartbeat__ping { position: absolute; inset: 0; border-radius: 50%; background: var(--uix-success); animation: uix-ping 1.6s var(--uix-ease-out) infinite; }
+  .uix-heartbeat__ping { position: absolute; inset: 0; border-radius: 50%; background: var(--uix-success); animation: uix-ping var(--uix-loop-ping) var(--uix-ease-out) infinite; }
   @keyframes uix-ping { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.8); opacity: 0; } }
   .uix-heartbeat--warning .uix-heartbeat__dot, .uix-heartbeat--warning .uix-heartbeat__ping { background: var(--uix-warning); }
   .uix-heartbeat--danger  .uix-heartbeat__dot, .uix-heartbeat--danger  .uix-heartbeat__ping { background: var(--uix-danger); }
   .uix-heartbeat--idle .uix-heartbeat__dot { background: var(--uix-text-muted); }
   .uix-heartbeat--idle .uix-heartbeat__ping { display: none; }
+  @media (prefers-reduced-motion: reduce) {
+    .uix-heartbeat__ping { display: none; }
+    .uix-heartbeat:not(.uix-heartbeat--idle) .uix-heartbeat__dot { animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; }
+  }
   .uix-live { display: inline-flex; align-items: center; gap: var(--uix-space-2); font-size: var(--uix-text-meta); font-weight: 500; color: var(--uix-text-hushed); }
 }

package/styles/components/inline-edit.css

@@ -19,7 +19,8 @@
   .uix-inline-edit__placeholder { color: var(--uix-text-muted); }
   /* 75% at rest keeps the pencil above 3:1 (the same floor as the view menu's quiet controls). */
   .uix-inline-edit__icon { display: inline-flex; flex: none; color: var(--uix-text-muted); opacity: .75; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
-  .uix-inline-edit__view:is(:hover, :focus-visible) .uix-inline-edit__icon { opacity: 1; }
+  .uix-inline-edit__view:focus-visible .uix-inline-edit__icon { opacity: 1; }
+  @media (hover: hover) and (pointer: fine) { .uix-inline-edit__view:hover .uix-inline-edit__icon { opacity: 1; } }
   .uix-inline-edit__editor { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--uix-space-2); flex: 1; min-width: 0; }
   .uix-inline-edit__control { flex: 1 1 12rem; min-width: 0; }
   .uix-inline-edit__control > * { width: 100%; }

package/styles/components/input.css

@@ -20,7 +20,7 @@
     height: var(--uix-control-h); width: 100%;
     padding: 0 var(--uix-space-3); 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);
-    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-input::placeholder { color: var(--uix-text-muted); }
   .uix-input:hover { border-color: var(--uix-border-strong); }

package/styles/components/kanban.css

@@ -5,9 +5,8 @@
   .uix-kanban__head { display: flex; align-items: center; gap: var(--uix-space-2); padding: var(--uix-space-3) var(--uix-space-4); font-weight: 600; font-size: var(--uix-text-meta); }
   .uix-kanban__count { margin-left: auto; color: var(--uix-text-muted); font-weight: 500; }
   .uix-kanban__body { padding: 0 var(--uix-space-3) var(--uix-space-3); display: flex; flex-direction: column; gap: var(--uix-space-2); overflow-y: auto; }
-  .uix-kanban__card { background: var(--uix-surface); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); padding: var(--uix-space-3); box-shadow: var(--uix-shadow-sm); cursor: grab; transition: box-shadow var(--uix-dur-fast) var(--uix-ease-out), transform var(--uix-dur-fast) var(--uix-ease-out); }
-  .uix-kanban__card:hover { box-shadow: var(--uix-shadow-popover); }
-  @media (hover: hover) and (pointer: fine) { .uix-kanban__card:hover { transform: translateY(calc(-1 * var(--uix-lift))); } }
+  .uix-kanban__card { background: var(--uix-surface); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); padding: var(--uix-space-3); box-shadow: var(--uix-shadow-sm); cursor: grab; transition: transform var(--uix-dur-fast) var(--uix-ease-out); }
+  @media (hover: hover) and (pointer: fine) { .uix-kanban__card:hover { box-shadow: var(--uix-shadow-popover); transform: translateY(calc(-1 * var(--uix-lift))); } }
   .uix-kanban__card:active { cursor: grabbing; }
   .uix-kanban__card-title { font-weight: 500; font-size: var(--uix-text-body); margin-bottom: var(--uix-space-2); }
   .uix-kanban__card-meta { display: flex; align-items: center; gap: var(--uix-space-2); }

package/styles/components/meter.css

@@ -1,7 +1,11 @@
 /* uix meter / utilization bar (threshold tones) — depends only on --uix-* tokens. */
 @layer uix.components {
   .uix-meter { height: 8px; background: var(--uix-bg-active); border-radius: var(--uix-radius-pill); overflow: hidden; }
-  .uix-meter__fill { height: 100%; border-radius: inherit; background: var(--uix-success); transition: width var(--uix-dur) var(--uix-ease-out); }
+  /* --val (0–1) slides a full-width fill into the clipped track: transform, never width (see progress.css).
+     A legacy inline `width: n%` still works: --val then defaults to 1 and nothing slides. */
+  .uix-meter__fill { width: 100%; height: 100%; border-radius: inherit; background: var(--uix-success);
+    transform: translateX(calc((var(--val, 1) - 1) * 100%)); transition: transform var(--uix-dur) var(--uix-ease-out); }
+  .uix-meter__fill:dir(rtl) { transform: translateX(calc((1 - var(--val, 1)) * 100%)); }
   .uix-meter__fill[data-tone="warning"]   { background: var(--uix-warning); }
   .uix-meter__fill[data-tone="danger"]    { background: var(--uix-danger); }
   .uix-meter__fill[data-tone="attention"] { background: var(--uix-attention); }

package/styles/components/org-chart.css

@@ -90,7 +90,7 @@
     border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md);
     background: var(--uix-surface); color: var(--uix-text); box-shadow: var(--uix-shadow-sm);
     text-align: left; cursor: pointer;
-    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-org-chart__item > .uix-org-chart__node:hover { border-color: var(--uix-border-strong); }
   .uix-org-chart__item[aria-selected="true"] > .uix-org-chart__node {

package/styles/components/progress.css

@@ -1,10 +1,16 @@
 /* uix progress bar + ring — depends only on --uix-* tokens. */
 @layer uix.components {
   .uix-progress { height: 8px; background: var(--uix-bg-active); border-radius: var(--uix-radius-pill); overflow: hidden; }
-  .uix-progress__bar { height: 100%; background: var(--uix-accent); border-radius: inherit; transition: width var(--uix-dur) var(--uix-ease-out); }
+  /* --val (0–1) slides a full-width bar into the clipped track: transform, never width, and the rounded
+     leading end survives. A legacy inline `width: n%` still works (--val then defaults to 1, no slide). */
+  .uix-progress__bar { width: 100%; height: 100%; background: var(--uix-accent); border-radius: inherit;
+    transform: translateX(calc((var(--val, 1) - 1) * 100%)); transition: transform var(--uix-dur) var(--uix-ease-out); }
+  .uix-progress__bar:dir(rtl) { transform: translateX(calc((1 - var(--val, 1)) * 100%)); }
   .uix-progress--indeterminate { position: relative; }
-  .uix-progress--indeterminate .uix-progress__bar { width: 40%; animation: uix-progress-slide 1.2s var(--uix-ease-in-out) infinite; }
+  .uix-progress--indeterminate .uix-progress__bar { width: 40%; animation: uix-progress-slide var(--uix-loop-progress) var(--uix-ease-in-out) infinite; }
   @keyframes uix-progress-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(280%); } }
+  /* reduced motion: the bar fills the track and breathes instead of sweeping */
+  @media (prefers-reduced-motion: reduce) { .uix-progress--indeterminate .uix-progress__bar { width: 100%; animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; } }
 
   .uix-ring { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
     background: conic-gradient(var(--uix-accent) calc(var(--val, .66) * 360deg), var(--uix-bg-active) 0); }

package/styles/components/radio.css

@@ -28,7 +28,7 @@
   .uix-radio-card {
     position: relative; display: flex; flex-direction: column; gap: var(--uix-space-3); min-width: 0; padding: var(--uix-space-4);
     border: 1px solid var(--uix-border-strong); border-radius: var(--uix-radius-lg); background: var(--uix-surface); color: var(--uix-text); cursor: pointer;
-    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-radio-card > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
   .uix-radio-card:hover { border-color: var(--uix-text-muted); }

package/styles/components/rich-text.css

@@ -5,7 +5,7 @@
   .uix-rich-text {
     display: flex; flex-direction: column; min-width: 0;
     border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface);
-    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-rich-text:hover { border-color: var(--uix-border-strong); }
   .uix-rich-text:focus-within { border-color: var(--uix-ring); box-shadow: 0 0 0 3px var(--uix-brand-muted); }
@@ -66,7 +66,7 @@
   .uix-rich-text__content .ProseMirror-gapcursor { display: none; position: absolute; margin: 0; pointer-events: none; }
   .uix-rich-text__content .ProseMirror-gapcursor::after {
     content: ""; display: block; position: absolute; top: -2px; width: 20px; border-top: 1px solid var(--uix-text);
-    animation: uix-rich-text-caret 1.1s steps(2, start) infinite;
+    animation: uix-rich-text-caret var(--uix-loop-blink) steps(2, start) infinite;
   }
   .uix-rich-text__content.ProseMirror-focused .ProseMirror-gapcursor { display: block; }
   .uix-rich-text__content.ProseMirror-hideselection *::selection { background: transparent; }
@@ -181,5 +181,7 @@
 
   @media (prefers-reduced-motion: reduce) {
     .uix-rich-text, .uix-rich-text__tool { transition: none; }
+    /* a steady gap cursor: no blink */
+    .uix-rich-text__content .ProseMirror-gapcursor::after { animation: none; }
   }
 }

package/styles/components/save-status.css

@@ -7,12 +7,12 @@
   .uix-save-status__icon { width: var(--uix-space-2); height: var(--uix-space-2); flex-shrink: 0; border-radius: var(--uix-radius-pill); }
   .uix-save-status[data-state="idle"] .uix-save-status__icon { display: none; }
 
-  .uix-save-status[data-state="saving"] .uix-save-status__icon { border: 1px solid var(--uix-border-strong); border-top-color: transparent; animation: uix-spin var(--uix-dur-slower) linear infinite; }
+  .uix-save-status[data-state="saving"] .uix-save-status__icon { border: 1px solid var(--uix-border-strong); border-top-color: transparent; animation: uix-spin var(--uix-loop-spin) linear infinite; }
   .uix-save-status[data-state="saved"] .uix-save-status__icon { background: var(--uix-success); }
   .uix-save-status[data-state="failed"] { color: var(--uix-danger-text); }
   .uix-save-status[data-state="failed"] .uix-save-status__icon { background: var(--uix-danger); }
 
   @media (prefers-reduced-motion: reduce) {
-    .uix-save-status[data-state="saving"] .uix-save-status__icon { animation: none; }
+    .uix-save-status[data-state="saving"] .uix-save-status__icon { animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; }
   }
 }

package/styles/components/select.css

@@ -8,7 +8,7 @@
     background-color: var(--uix-surface); color: var(--uix-text); font: inherit; font-size: var(--uix-text-body); cursor: pointer;
     background-repeat: no-repeat; background-position: right 12px center;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
-    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-select:hover { border-color: var(--uix-border-strong); }
   .uix-select:focus { outline: none; border-color: var(--uix-ring); box-shadow: 0 0 0 3px var(--uix-brand-muted); }

package/styles/components/sidebar.css

@@ -40,11 +40,16 @@
   .uix-navitem[aria-current="page"] .uix-navitem__desc { color: var(--uix-text-hushed); }
   /* on the active tint, muted badge dips below AA — hushed composites darker on the tint */
   .uix-navitem[aria-current="page"] .uix-navitem__badge { color: var(--uix-text-hushed); }
-  .uix-navitem__star { position: relative; display: grid; place-items: center; width: 22px; height: 22px; border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; border-radius: var(--uix-radius-xs); opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-navitem__star { position: relative; display: grid; place-items: center; width: 22px; height: 22px; border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; border-radius: var(--uix-radius-xs); transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
   /* invisible halo → 24px effective target with zero visual change (UIX-A11Y-2) */
   .uix-navitem__star::before { content: ""; position: absolute; inset: -1px; }
   .uix-navitem__star svg { width: 15px; height: 15px; }
-  .uix-navitem:hover .uix-navitem__star, .uix-navitem:focus-within .uix-navitem__star, .uix-navitem__star:focus-visible { opacity: 1; }
+  /* Hidden until hover only where hover exists; a touch screen always shows the star. */
+  @media (hover: hover) and (pointer: fine) {
+    .uix-navitem__star { opacity: 0; }
+    .uix-navitem:hover .uix-navitem__star { opacity: 1; }
+  }
+  .uix-navitem:focus-within .uix-navitem__star, .uix-navitem__star:focus-visible { opacity: 1; }
   .uix-navitem__star[data-on] { opacity: 1; color: var(--uix-warning); }
   .uix-navitem__star[data-on] svg { fill: currentColor; }
 
@@ -64,9 +69,12 @@
     margin-left: auto; display: inline-flex; height: 20px; width: 20px; flex-shrink: 0;
     align-items: center; justify-content: center; border: 0; border-radius: calc(var(--uix-radius-xs) / 2);
     background: transparent; cursor: pointer; 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);
+  }
+  @media (hover: hover) and (pointer: fine) {
+    .uix-favourites__menu-trigger { opacity: 0; }
+    .uix-favourites__row:hover .uix-favourites__menu-trigger { opacity: 1; }
   }
-  .uix-favourites__row:hover .uix-favourites__menu-trigger,
   .uix-favourites__row:focus-within .uix-favourites__menu-trigger,
   .uix-favourites__menu-trigger[aria-expanded="true"] { opacity: 1; }
   .uix-favourites__backdrop { position: fixed; inset: 0; cursor: default; background: transparent; z-index: calc(var(--uix-z-tooltip) + 10); }
@@ -91,12 +99,12 @@
   .uix-navgroup__trigger .uix-navgroup__chevron { margin-left: auto; transition: transform var(--uix-dur) var(--uix-ease-out); }
   .uix-navgroup__trigger[aria-expanded="false"] .uix-navgroup__chevron { transform: rotate(-90deg); }
   .uix-navgroup__chevron { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
-  .uix-navgroup__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--uix-dur) var(--uix-ease-out); }
+  /* A nav group opens and closes instantly: it is toggled many times a day, and grid tracks never
+     animate. The chevron still turns, so the change is visible. */
+  .uix-navgroup__panel { display: grid; grid-template-rows: 1fr; }
   .uix-navgroup__trigger[aria-expanded="false"] + .uix-navgroup__panel { grid-template-rows: 0fr; }
-  /* visibility keeps the 0fr-collapsed links out of the tab order / accessibility tree
-     (UIX-A11Y-2); the transition delays hiding until the row collapse finishes, and
-     visibility snaps back to visible instantly on expand, so nothing visibly glitches. */
-  .uix-navgroup__panel > div { overflow: hidden; visibility: visible; transition: visibility var(--uix-dur) var(--uix-ease-out); }
+  /* visibility keeps the 0fr-collapsed links out of the tab order / accessibility tree (UIX-A11Y-2) */
+  .uix-navgroup__panel > div { overflow: hidden; visibility: visible; }
   .uix-navgroup__trigger[aria-expanded="false"] + .uix-navgroup__panel > div { visibility: hidden; }
   .uix-subitem { padding-left: var(--uix-space-5); }
   .uix-subitem .uix-navitem__label::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--uix-text-muted); margin-right: var(--uix-space-3); vertical-align: middle; }

package/styles/components/spinner.css

@@ -1,6 +1,8 @@
 /* uix spinner + progress overlay — depends only on --uix-* tokens. */
 @layer uix.components {
-  .uix-spinner { width: 20px; height: 20px; border: 2px solid var(--uix-border-strong); border-right-color: transparent; border-radius: 50%; display: inline-block; animation: uix-spin .6s linear infinite; }
+  .uix-spinner { width: 20px; height: 20px; border: 2px solid var(--uix-border-strong); border-right-color: transparent; border-radius: 50%; display: inline-block; animation: uix-spin var(--uix-loop-spin) linear infinite; }
+  /* reduced motion: the ring stops turning and breathes instead, so "still working" survives */
+  @media (prefers-reduced-motion: reduce) { .uix-spinner { animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; } }
   .uix-spinner--accent { border-color: var(--uix-accent); border-right-color: transparent; }
   .uix-spinner--lg { width: 32px; height: 32px; border-width: 3px; }
   /* HAR-1606: inline, beside a file name or inside a 24 px toggle; the 2 px stroke is kept. */

package/styles/components/states.css

@@ -13,7 +13,8 @@
   .uix-empty__icon--warning { background: var(--uix-warning-bg); color: var(--uix-warning-text); }
   .uix-stack--compact { gap: var(--uix-space-2); }
 
-  .uix-skeleton { background: linear-gradient(90deg, var(--uix-bg-subtle) 25%, var(--uix-bg-hover) 50%, var(--uix-bg-subtle) 75%); background-size: 200% 100%; animation: uix-shimmer 1.4s linear infinite; border-radius: var(--uix-radius-sm); }
+  .uix-skeleton { background: linear-gradient(90deg, var(--uix-bg-subtle) 25%, var(--uix-bg-hover) 50%, var(--uix-bg-subtle) 75%); background-size: 200% 100%; animation: uix-shimmer var(--uix-loop-shimmer) linear infinite; border-radius: var(--uix-radius-sm); }
+  @media (prefers-reduced-motion: reduce) { .uix-skeleton { animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; } }
   .uix-skeleton--text { height: 12px; border-radius: var(--uix-radius-pill); }
   .uix-skeleton--circle { border-radius: 50%; }
   .uix-operation { display: grid; gap: var(--uix-space-3); padding: var(--uix-space-4); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface); }

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); }