@tensor_1/tokens 2.45.1 → 2.47.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.47.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/busy-region.css

@@ -0,0 +1,47 @@
+/* uix busy region — keep what is on screen while it is fetched again (HAR-2582, motion
+   standard §2.5). A refetch dims the content under an indeterminate bar along the top instead
+   of swapping it for skeletons, so nothing the person was looking at vanishes. The React
+   BusyBar sets [data-shown] after 300 ms and holds it 500 ms; the parent reads it with :has(),
+   so `BusyRegion` and `TableWrap refreshing` stay server components. Depends only on --uix-*
+   tokens. */
+@layer uix.components {
+  .uix-busy-region { position: relative; }
+  .uix-busy-region__content { transition: opacity var(--uix-dur-exit) var(--uix-ease-out); }
+  .uix-busy-region:has(> .uix-busy-bar[data-shown]) > .uix-busy-region__content { opacity: .6; transition-duration: var(--uix-dur); }
+
+  .uix-busy-bar {
+    position: absolute; inset-block-start: 0; inset-inline: 0; z-index: var(--uix-z-sticky);
+    display: block; height: 2px; overflow: hidden; pointer-events: none;
+    opacity: 0; transition: opacity var(--uix-dur-exit) var(--uix-ease-out);
+  }
+  .uix-busy-bar[data-shown] { opacity: 1; transition-duration: var(--uix-dur); }
+  .uix-busy-bar::before {
+    content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 40%;
+    background: var(--uix-accent); transform: translateX(-100%);
+  }
+  /* constant motion is linear (§2.4) */
+  .uix-busy-bar[data-shown]::before { animation: uix-busy-sweep var(--uix-loop-progress) linear infinite; }
+  @keyframes uix-busy-sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
+  /* right to left: the stripe starts at the right (inline-start) edge and sweeps leftwards */
+  @keyframes uix-busy-sweep-rtl { from { transform: translateX(100%); } to { transform: translateX(-250%); } }
+  .uix-busy-bar[data-shown]:dir(rtl)::before { animation-name: uix-busy-sweep-rtl; }
+
+  /* Reduced motion: no sweep; the full bar pulses (the kit's uix-pulse), so "still working" survives (§2.7). */
+  @media (prefers-reduced-motion: reduce) {
+    .uix-busy-bar::before { width: 100%; transform: none; }
+    /* !important: the kit's reduced-motion policy ends keyframes at once; a still-working signal opts back in */
+    .uix-busy-bar[data-shown]::before, .uix-busy-bar[data-shown]:dir(rtl)::before { animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; }
+  }
+  @media (forced-colors: active) {
+    .uix-busy-bar::before { background: Highlight; }
+  }
+
+  /* A refreshing table: the bar sticks to the top of the scrolling wrap (over the sticky
+     header) and takes no room: it is 0 tall and draws its 2 px stripe below its own edge. It
+     clips sideways only (overflow-x: clip), so the sweep never widens the wrap's scroll area.
+     The rows dim; the header stays. */
+  .uix-table-wrap > .uix-busy-bar { position: sticky; inset-inline-start: 0; height: 0; overflow-x: clip; overflow-y: visible; z-index: calc(var(--uix-z-sticky) + 1); }
+  .uix-table-wrap > .uix-busy-bar::before { inset-block: 0 auto; height: 2px; }
+  .uix-table-wrap > .uix-table > tbody { transition: opacity var(--uix-dur-exit) var(--uix-ease-out); }
+  .uix-table-wrap:has(> .uix-busy-bar[data-shown]) > .uix-table > tbody { opacity: .6; transition-duration: var(--uix-dur); }
+}

package/styles/components/button.css

@@ -52,19 +52,49 @@
   .uix-btn--wrap.uix-btn--lg:not(.uix-btn--icon) { min-height: 44px; }
   .uix-btn--wrap.uix-btn--link { min-height: 0; padding-block: 0; }
 
-  .uix-btn[data-loading] { color: transparent !important; position: relative; pointer-events: none; }
+  /* Pending (React `loading`, HAR-2580): the button stops taking presses at once but looks the
+     same for the first 300 ms; a fast action shows nothing new. It keeps full colour while it
+     works (a spinner, never a greyed-out control), which overrides the aria-disabled dim. */
+  .uix-btn[data-pending], .uix-btn:has(> [data-uix-btn-busy]) { opacity: 1; pointer-events: none; }
+
+  /* The spinner: `data-loading` (plain markup, shows at once) or React's delayed busy marker. */
+  .uix-btn:has(> [data-uix-btn-busy]), .uix-btn[data-loading] { color: transparent !important; position: relative; pointer-events: none; }
   /* The label is hidden (color: transparent), so the ring cannot inherit
      currentColor from the button; each variant names its own foreground.
      TENSOR RX-125 (UIX-01): the ring was on-accent for every variant, so a
      loading secondary/outline/ghost button rendered blank. */
-  .uix-btn[data-loading]::after {
+  .uix-btn:has(> [data-uix-btn-busy])::after, .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;
   }
-  .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); }
+  @media (prefers-reduced-motion: reduce) { .uix-btn:has(> [data-uix-btn-busy])::after, .uix-btn[data-loading]::after { animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; } }
+  .uix-btn--primary:has(> [data-uix-btn-busy])::after, .uix-btn--primary[data-loading]::after { color: var(--uix-accent-fg); }
+  .uix-btn--danger:has(> [data-uix-btn-busy])::after, .uix-btn--danger[data-loading]::after { color: var(--uix-danger-fg); }
+  .uix-btn--link:has(> [data-uix-btn-busy])::after, .uix-btn--link[data-loading]::after { color: var(--uix-link); }
+  /* The result face hides with the label while the spinner shows. */
+  .uix-btn:has(> [data-uix-btn-busy]) .uix-btn__result { visibility: hidden; }
+
+  /* Result (React `result`, HAR-2581): the label and both result wordings share one grid cell,
+     so the button is always as wide as the widest and nothing beside it moves. A result
+     crossfades in over the label (opacity only), holds, and fades back. Text and icon carry
+     the meaning; colour only tints the icon. */
+  .uix-btn__face { display: inline-grid; justify-items: center; align-items: center; }
+  .uix-btn__face > * { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .5em; transition: opacity var(--uix-dur) var(--uix-ease-out); }
+  .uix-btn__result { opacity: 0; transition-duration: var(--uix-dur-exit); }
+  .uix-btn__face[data-result] > .uix-btn__label { opacity: 0; transition-duration: var(--uix-dur-exit-fast); }
+  .uix-btn__face[data-result="success"] > [data-kind="success"],
+  .uix-btn__face[data-result="error"] > [data-kind="error"] { opacity: 1; transition-duration: var(--uix-dur); }
+  .uix-btn--secondary .uix-btn__result[data-kind="success"] svg,
+  .uix-btn--outline .uix-btn__result[data-kind="success"] svg,
+  .uix-btn--ghost .uix-btn__result[data-kind="success"] svg { color: var(--uix-success-text); }
+  .uix-btn--secondary .uix-btn__result[data-kind="error"] svg,
+  .uix-btn--outline .uix-btn__result[data-kind="error"] svg,
+  .uix-btn--ghost .uix-btn__result[data-kind="error"] svg { color: var(--uix-danger-text); }
+  .uix-btn--wrap .uix-btn__face > * { white-space: normal; }
+  .uix-btn--xs .uix-btn__face > * { gap: .25em; }
+  /* An icon-only button keeps its square: the result is the mark alone (the words are spoken). */
+  .uix-btn--icon .uix-btn__result-text { display: none; }
 
   /* attached group */
   .uix-btn-group { display: inline-flex; }

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