@tensor_1/tokens 2.45.0 → 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.0",
+  "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/relationship-graph.css

@@ -57,15 +57,23 @@
   /* Map controls (controls="compact", TENSOR HAR-2501): an icon cluster in the map's corner,
      the map itself focusable, and a full-screen state that covers the page. */
   .uix-relationship-graph--map .uix-relationship-graph__viewport:focus-visible { outline:2px solid var(--uix-ring); outline-offset:2px; }
-  .uix-relationship-graph__controls { position:absolute; right:var(--uix-space-3); bottom:var(--uix-space-3); z-index:var(--uix-z-raised, 1); display:flex; align-items:center; gap:var(--uix-space-2); }
-  .uix-relationship-graph__control-cluster { display:flex; padding:var(--uix-space-1); border:1px solid var(--uix-border-strong); border-radius:var(--uix-radius-md); background:var(--uix-surface); box-shadow:var(--uix-shadow-sm); }
+  /* The hint, the zoom level and the cluster share one row along the map's bottom edge (TENSOR
+     HAR-2512: positioned apart, "Zoom 75 %" was drawn over the hint on a 500–600 px map). The hint
+     takes only the room the controls leave: it ellipsises, then hides; then the zoom level gives
+     way; the cluster always stays. The row lets the pointer through to the map. */
+  .uix-relationship-graph__footer { position:absolute; right:var(--uix-space-3); bottom:var(--uix-space-3); left:var(--uix-space-3); z-index:var(--uix-z-raised, 1); display:flex; align-items:center; justify-content:flex-end; gap:var(--uix-space-3); container:uix-relationship-graph-footer / inline-size; pointer-events:none; }
+  .uix-relationship-graph__controls { display:flex; flex:0 1 auto; align-items:center; gap:var(--uix-space-2); min-width:0; pointer-events:auto; }
+  .uix-relationship-graph__control-cluster { display:flex; flex:none; padding:var(--uix-space-1); border:1px solid var(--uix-border-strong); border-radius:var(--uix-radius-md); background:var(--uix-surface); box-shadow:var(--uix-shadow-sm); }
   .uix-relationship-graph__control { display:inline-grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:var(--uix-radius-sm); background:transparent; color:var(--uix-text-muted); cursor:pointer; }
   .uix-relationship-graph__control:hover:not(:disabled) { background:var(--uix-bg-hover); color:var(--uix-text); }
   .uix-relationship-graph__control:focus-visible { outline:2px solid var(--uix-ring); outline-offset:1px; }
   .uix-relationship-graph__control:disabled { opacity:.45; cursor:not-allowed; }
   .uix-relationship-graph__control svg { width:16px; height:16px; }
-  .uix-relationship-graph__zoom-level { padding:0 var(--uix-space-1); border-radius:var(--uix-radius-sm); background:color-mix(in srgb, var(--uix-bg-subtle) 85%, transparent); color:var(--uix-text-muted); font-size:var(--uix-text-meta); font-variant-numeric:tabular-nums; white-space:nowrap; }
-  .uix-relationship-graph__hint { position:absolute; left:var(--uix-space-3); bottom:var(--uix-space-3); z-index:var(--uix-z-raised, 1); max-width:calc(100% - 15rem); margin:0; overflow:hidden; color:var(--uix-text-muted); font-size:var(--uix-text-meta); white-space:nowrap; text-overflow:ellipsis; pointer-events:none; }
+  .uix-relationship-graph__zoom-level { flex:0 1 auto; min-width:0; overflow:hidden; padding:0 var(--uix-space-1); border-radius:var(--uix-radius-sm); background:color-mix(in srgb, var(--uix-bg-subtle) 85%, transparent); color:var(--uix-text-muted); font-size:var(--uix-text-meta); font-variant-numeric:tabular-nums; white-space:nowrap; text-overflow:ellipsis; }
+  .uix-relationship-graph__hint { flex:1 1 0; min-width:0; margin:0; overflow:hidden; color:var(--uix-text-muted); font-size:var(--uix-text-meta); white-space:nowrap; text-overflow:ellipsis; }
+  /* A hint cut to a few words says nothing, so it goes; on the narrowest map so does the zoom level. */
+  @container uix-relationship-graph-footer (max-width:24rem) { .uix-relationship-graph__hint { display:none; } }
+  @container uix-relationship-graph-footer (max-width:17rem) { .uix-relationship-graph__zoom-level { display:none; } }
   .uix-relationship-graph__toast { position:absolute; top:var(--uix-space-3); left:50%; z-index:var(--uix-z-toast, 3); max-width:calc(100% - 2 * var(--uix-space-3)); margin:0; padding:var(--uix-space-1) var(--uix-space-3); border-radius:var(--uix-radius-sm); background:var(--uix-text); color:var(--uix-surface); font-size:var(--uix-text-meta); transform:translateX(-50%); pointer-events:none; }
   .uix-relationship-graph--fullscreen { position:fixed; inset:0; z-index:var(--uix-z-overlay, 1000); display:flex; flex-direction:column; padding:var(--uix-space-4); background:var(--uix-bg-app, var(--uix-surface)); }
   .uix-relationship-graph--fullscreen .uix-relationship-graph__viewport { flex:1; min-height:0; height:auto; }

package/styles/components/rich-text.css

@@ -1,11 +1,11 @@
-/* uix rich-text editor — markdown editing surface (.uix-prose), a roving-tabindex toolbar that
-   scrolls sideways on narrow screens, source mode, counter/status footer, link popover and the
+/* uix rich-text editor — markdown editing surface (.uix-prose), a roving-tabindex toolbar whose
+   groups wrap on narrow screens, source mode, counter/status footer, link popover and the
    :shortcode emoji list. Composes with .uix-composer for comment boxes. Depends only on --uix-* tokens. */
 @layer uix.components {
   .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); }
@@ -17,16 +17,22 @@
   .uix-rich-text--fallback { border: 0; background: transparent; }
   .uix-rich-text--fallback:focus-within { box-shadow: none; }
 
-  /* toolbar — one row; scrolls instead of wrapping so a narrow screen never loses a control */
+  /* toolbar — the groups wrap onto more rows, so a narrow field shows every control and never
+     scrolls sideways (a collection wraps; TENSOR HAR-2511: at 320 px two thirds of the tools hid
+     behind a scroll inside the field). Each group draws its separator on its left edge, 1px
+     outside the toolbar's left padding edge for a group that starts a row, where the clip hides it. */
   .uix-rich-text__toolbar {
-    display: flex; align-items: center; gap: var(--uix-space-1); min-width: 0;
-    padding: var(--uix-space-1) var(--uix-space-2); border-bottom: 1px solid var(--uix-border);
-    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
+    display: flex; flex-wrap: wrap; align-items: center; gap: var(--uix-space-1); min-width: 0;
+    padding: var(--uix-space-1) var(--uix-space-1) var(--uix-space-1) 0; border-bottom: 1px solid var(--uix-border);
+    overflow-x: clip;
     /* size to the container, never to the row of tools (keeps grid/flex parents from widening) */
     contain: inline-size;
   }
-  .uix-rich-text__group { display: flex; align-items: center; gap: var(--uix-space-0); flex: none; }
-  .uix-rich-text__group + .uix-rich-text__group { padding-left: var(--uix-space-1); border-left: 1px solid var(--uix-border); }
+  /* A group wider than the whole row (a very narrow field) wraps its own tools. */
+  .uix-rich-text__group {
+    display: flex; flex-wrap: wrap; align-items: center; gap: var(--uix-space-0); flex: 0 1 auto; min-width: 0;
+    margin-left: -1px; padding-left: var(--uix-space-1); border-left: 1px solid var(--uix-border);
+  }
   .uix-rich-text__group--end { margin-left: auto; }
   .uix-rich-text__tool {
     display: inline-flex; align-items: center; justify-content: center; flex: none;
@@ -60,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; }
@@ -75,8 +81,12 @@
   .uix-rich-text__content h1 { font-size: var(--uix-text-h2); line-height: var(--uix-leading-h2); }
   .uix-rich-text__content h2 { font-size: var(--uix-text-h3); line-height: var(--uix-leading-h3); }
   .uix-rich-text__content h3 { font-size: var(--uix-text-body); line-height: var(--uix-leading-body); }
+  /* The placeholder floats full width with no width of its own, so the caret stays at the start
+     of its first line; it keeps its height, so a long placeholder grows the editor instead of
+     running over what follows the field (TENSOR HAR-2511). */
   .uix-rich-text__content .is-editor-empty:first-child::before {
-    content: attr(data-placeholder); float: left; height: 0; pointer-events: none; color: var(--uix-text-muted);
+    content: attr(data-placeholder); float: left; width: 100%; margin-right: -100%;
+    pointer-events: none; color: var(--uix-text-muted);
   }
   .uix-rich-text__content a { cursor: text; }
   /* the glyph stays in the text for editing and copying; its fallback image is drawn beside it */
@@ -123,11 +133,16 @@
   /* composer variant — the composer draws the box; the toolbar joins the action bar */
   .uix-rich-text--composer { border-radius: var(--uix-radius-md); }
   .uix-rich-text--composer.uix-rich-text:focus-within { box-shadow: 0 0 0 3px var(--uix-brand-muted); }
-  /* the tool row scrolls and keeps five tools; the counter and toolbarEnd wrap below it first (a
-     toggle + submit on one row left the tools 0 px on a phone, TENSOR HAR-1125) */
+  /* the tool row asks for one row of tools and keeps at least five; the counter and toolbarEnd wrap
+     below it first, then the row wraps its groups (a toggle + submit on one row left the tools 0 px
+     on a phone, TENSOR HAR-1125; tools wrapped five to a row beside a submit, HAR-2511). Its start
+     margin keeps the first tool flush with the bar: a group's left padding and separator sit in it. */
   .uix-rich-text--composer .uix-rich-text__bar { flex-wrap: wrap; align-items: center; justify-content: flex-start; min-width: 0; }
-  .uix-rich-text--composer .uix-rich-text__toolbar { flex: 1 1 0; min-width: min(5 * 32px, 100%); padding: 0; border-bottom: 0; }
-  .uix-rich-text--composer .uix-rich-text__group--end { margin-left: 0; }
+  .uix-rich-text--composer .uix-rich-text__toolbar {
+    flex: 1 1 auto; min-width: min(5 * 32px + var(--uix-space-1), 100%); margin-left: calc(-1 * var(--uix-space-1));
+    padding: 0; border-bottom: 0; contain: none;
+  }
+  .uix-rich-text--composer .uix-rich-text__group--end { margin-left: -1px; }
   .uix-rich-text--composer .uix-rich-text__counter,
   .uix-rich-text--composer .uix-rich-text__status { flex: none; margin-right: 0; }
   .uix-rich-text--composer .uix-rich-text__bar > :last-child:not(.uix-rich-text__toolbar) { margin-left: auto; }
@@ -166,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); }