@candor-ui/react 2.1.0 → 2.3.0

package/dist/styles.css

@@ -248,12 +248,16 @@
  * text and 15px body and label text, with a wider thread and sidebar. Both set the
  * same four tokens, so one overrides the other when nested.
  *
- * Motion: data-motion="none" | "subtle" | "expressive" on <html> (or any container).
- * Subtle is the default: a change that happened is shown settling (a collapse,
- * a drawn tick, a fade). None turns every animation and transition off, with or
- * without the OS setting. Expressive adds scale to pops and a shake to a locked
- * control that was pressed. Motion reports a state change and never invents one;
- * the OS's reduced-motion setting wins over all three.
+ * Motion: fourteen families (reveal, arrive, pop, mark, fill, value, move, overlay,
+ * press, tint, refuse, attention, live, clock), each with a level (0 off, 1 subtle,
+ * 2 expressive), a duration, an easing, an amplitude and a variant. A brand file sets
+ * --cd-motion-<family>-* for a family everywhere, or --cd-motion-<item>-<moment>-* for
+ * one moment; components put the chain on the moving element (lib/motion.ts) and add
+ * a family utility (cd-pop, cd-overlay…) only at the honest moment. The person
+ * outranks the brand: data-motion="subtle" | "expressive" | "calm" | "none" on <html>
+ * (or any container), and the OS's reduced-motion setting, which is the calm level
+ * (opacity and colour only, 150 ms at most, nothing loops). None is the hard off.
+ * Motion reports a state change and never invents one.
  */
 @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
@@ -301,9 +305,6 @@
   --cd-dur-quick: 120ms;
   --cd-dur-base: 200ms;
   --cd-dur-slow: 360ms;
-  /* What data-motion="expressive" turns on. Subtle pops only fade (a scale of 1) and never shakes. */
-  --cd-pop-from: 1;
-  --cd-motion-shake: none;
 
   /* The message column's width, and the app sidebar's. (Not --sidebar-width: shadcn's SidebarProvider sets that.) */
   --cd-thread-width: 48rem;
@@ -350,10 +351,108 @@
   }
 }
 
-/* The motion presets. Subtle needs no attribute; expressive adds scale and a shake; none is below, after the keyframes. */
+/*
+ * The motion layer's numbers. --cd-motion-preset is the level every family defaults to, --cd-motion-cap the highest
+ * level allowed where it's read, --cd-motion-speed multiplies every duration but the clock's and the attention ring's
+ * (which WCAG 2.2.2 caps at five seconds). They're registered so a
+ * data-motion container anywhere in the tree changes them for what's inside.
+ */
+@property --cd-motion-preset { syntax: "<number>"; inherits: true; initial-value: 1; }
+@property --cd-motion-cap { syntax: "<number>"; inherits: true; initial-value: 2; }
+@property --cd-motion-speed { syntax: "<number>"; inherits: true; initial-value: 1; }
+
+/*
+ * A moment's chain (lib/motion.ts puts it in the moving element's style): its level, duration, easing, amplitude and
+ * variant, each falling back to the family's token, then the default. Registered as not inherited, so a child never
+ * plays with its parent's moment. Not for brand files: set --cd-motion-* instead.
+ */
+@property --cd-m-reveal { syntax: "*"; inherits: false; }
+@property --cd-m-reveal-dur { syntax: "*"; inherits: false; }
+@property --cd-m-reveal-ease { syntax: "*"; inherits: false; }
+@property --cd-m-reveal-variant { syntax: "*"; inherits: false; }
+@property --cd-m-arrive { syntax: "*"; inherits: false; }
+@property --cd-m-arrive-dur { syntax: "*"; inherits: false; }
+@property --cd-m-arrive-ease { syntax: "*"; inherits: false; }
+@property --cd-m-arrive-amp { syntax: "*"; inherits: false; }
+@property --cd-m-arrive-variant { syntax: "*"; inherits: false; }
+@property --cd-m-pop { syntax: "*"; inherits: false; }
+@property --cd-m-pop-dur { syntax: "*"; inherits: false; }
+@property --cd-m-pop-out-dur { syntax: "*"; inherits: false; }
+@property --cd-m-pop-ease { syntax: "*"; inherits: false; }
+@property --cd-m-pop-amp { syntax: "*"; inherits: false; }
+@property --cd-m-pop-variant { syntax: "*"; inherits: false; }
+@property --cd-m-mark { syntax: "*"; inherits: false; }
+@property --cd-m-mark-dur { syntax: "*"; inherits: false; }
+@property --cd-m-mark-ease { syntax: "*"; inherits: false; }
+@property --cd-m-mark-variant { syntax: "*"; inherits: false; }
+@property --cd-m-fill { syntax: "*"; inherits: false; }
+@property --cd-m-fill-dur { syntax: "*"; inherits: false; }
+@property --cd-m-fill-ease { syntax: "*"; inherits: false; }
+@property --cd-m-value { syntax: "*"; inherits: false; }
+@property --cd-m-value-dur { syntax: "*"; inherits: false; }
+@property --cd-m-value-ease { syntax: "*"; inherits: false; }
+@property --cd-m-value-amp { syntax: "*"; inherits: false; }
+@property --cd-m-value-variant { syntax: "*"; inherits: false; }
+@property --cd-m-move { syntax: "*"; inherits: false; }
+@property --cd-m-move-dur { syntax: "*"; inherits: false; }
+@property --cd-m-move-ease { syntax: "*"; inherits: false; }
+@property --cd-m-overlay { syntax: "*"; inherits: false; }
+@property --cd-m-overlay-dur { syntax: "*"; inherits: false; }
+@property --cd-m-overlay-out-dur { syntax: "*"; inherits: false; }
+@property --cd-m-overlay-ease { syntax: "*"; inherits: false; }
+@property --cd-m-overlay-amp { syntax: "*"; inherits: false; }
+@property --cd-m-overlay-variant { syntax: "*"; inherits: false; }
+@property --cd-m-press { syntax: "*"; inherits: false; }
+@property --cd-m-press-dur { syntax: "*"; inherits: false; }
+@property --cd-m-press-ease { syntax: "*"; inherits: false; }
+@property --cd-m-press-amp { syntax: "*"; inherits: false; }
+@property --cd-m-tint { syntax: "*"; inherits: false; }
+@property --cd-m-tint-dur { syntax: "*"; inherits: false; }
+@property --cd-m-tint-ease { syntax: "*"; inherits: false; }
+@property --cd-m-refuse { syntax: "*"; inherits: false; }
+@property --cd-m-refuse-dur { syntax: "*"; inherits: false; }
+@property --cd-m-refuse-ease { syntax: "*"; inherits: false; }
+@property --cd-m-refuse-amp { syntax: "*"; inherits: false; }
+@property --cd-m-attention { syntax: "*"; inherits: false; }
+@property --cd-m-attention-dur { syntax: "*"; inherits: false; }
+@property --cd-m-attention-ease { syntax: "*"; inherits: false; }
+@property --cd-m-attention-amp { syntax: "*"; inherits: false; }
+@property --cd-m-live { syntax: "*"; inherits: false; }
+@property --cd-m-live-dur { syntax: "*"; inherits: false; }
+@property --cd-m-live-ease { syntax: "*"; inherits: false; }
+@property --cd-m-clock { syntax: "*"; inherits: false; }
+
+/*
+ * The person's setting, which outranks the brand. No attribute: the brand's levels, up to expressive. Subtle caps every
+ * family at 1; expressive raises the ones the brand didn't set; calm is the reduced-motion level by choice; none is the
+ * hard off (its rules are in the base layer, below the keyframes). Under the OS setting the cap is 1 and the calm forms
+ * apply whatever the attribute says, except none.
+ */
+[data-motion="subtle"] { --cd-motion-preset: 1; --cd-motion-cap: 1; }
 [data-motion="expressive"] {
-  --cd-pop-from: 0.85;
-  --cd-motion-shake: shake var(--cd-dur-slow) var(--cd-ease) both;
+  --cd-motion-preset: 2;
+  --cd-motion-cap: 2;
+  /* 2.2's expressive values, for apps that use the animate-pop-in and animate-shake utilities directly. */
+  --cd-pop-from-preset: 0.85;
+  --cd-motion-shake-preset: shake var(--cd-dur-slow) var(--cd-ease) both;
+}
+[data-motion="calm"] { --cd-motion-cap: 1; }
+[data-motion="none"] { --cd-motion-preset: 0; --cd-motion-cap: 0; }
+@media (prefers-reduced-motion: reduce) {
+  :root, [data-motion]:not([data-motion="none"]) { --cd-motion-cap: 1; }
+}
+
+/*
+ * The calm level, as a variant the family utilities use: the OS's reduced-motion setting, or inside data-motion="calm".
+ * (The ancestor form, so it also works on ::before and ::after.)
+ */
+@custom-variant calm {
+  @media (prefers-reduced-motion: reduce) {
+    @slot;
+  }
+  :where([data-motion="calm"]) & {
+    @slot;
+  }
 }
 
 @theme inline {
@@ -458,28 +557,26 @@
   --ease-inout: var(--cd-ease-inout);
   --ease-spring: var(--cd-ease-spring);
 
-  --animate-shimmer: shimmer 2.2s linear infinite;
-  --animate-pulse-dot: pulse-dot 1.6s var(--cd-ease) infinite;
-  --animate-rise-in: rise-in 240ms var(--cd-ease) both;
-  --animate-caret: caret 1s steps(2, start) infinite;
-
   /*
-   * Motion that reports a change. Tailwind has no --duration-* namespace, so use the tokens directly:
-   * duration-(--cd-dur-base). A collapse follows Radix's measured height; a pop is a fade (and a scale under
-   * expressive); tick-draw draws a mark whose path has pathLength="1"; fill grows a bar from --cd-fill-from; shake is
-   * none unless expressive; attention is one ring pulse, attention-wait three slow ones (then still: WCAG 2.2.2 wants moving content to stop).
+   * 2.2's animation utilities, kept for apps that use them in their own screens. Candor's components use the motion
+   * families below (cd-pop, cd-reveal…), which a brand file and data-motion reach moment by moment; these read only the
+   * family's duration. attention-wait is three pulses of 1.6 s (4.8 s in all, then still: WCAG 2.2.2 wants moving
+   * content to stop).
    */
-  --animate-collapse-down: collapse-down var(--cd-dur-base) var(--cd-ease);
-  --animate-collapse-up: collapse-up var(--cd-dur-base) var(--cd-ease);
-  --animate-pop-in: pop-in var(--cd-dur-base) var(--cd-ease) both;
-  --animate-pop-out: pop-out var(--cd-dur-quick) var(--cd-ease) both;
-  --animate-tick-draw: tick-draw var(--cd-dur-slow) var(--cd-ease) both;
-  --animate-fill: fill var(--cd-dur-slow) var(--cd-ease) both;
-  --animate-shake: var(--cd-motion-shake);
-  --animate-attention: attention 900ms var(--cd-ease) 1;
-  --animate-attention-wait: attention 2.4s var(--cd-ease) 3;
-  /* A prompt that was clicked around instead of answered: one attention ring, and a shake when expressive. */
-  --animate-nudge: var(--cd-motion-shake), attention 900ms var(--cd-ease) 1;
+  --animate-shimmer: shimmer 2.2s linear infinite;
+  --animate-pulse-dot: pulse-dot var(--cd-motion-live-dur, 1.6s) var(--cd-ease) infinite;
+  --animate-rise-in: rise-in var(--cd-motion-arrive-dur, 240ms) var(--cd-ease) both;
+  --animate-caret: caret 1s steps(2, start) infinite;
+  --animate-collapse-down: collapse-down var(--cd-motion-reveal-dur, var(--cd-dur-base)) var(--cd-ease);
+  --animate-collapse-up: collapse-up var(--cd-motion-reveal-dur, var(--cd-dur-base)) var(--cd-ease);
+  --animate-pop-in: pop-in var(--cd-motion-pop-dur, var(--cd-dur-base)) var(--cd-ease) both;
+  --animate-pop-out: pop-out var(--cd-motion-pop-out-dur, var(--cd-dur-quick)) var(--cd-ease) both;
+  --animate-tick-draw: tick-draw var(--cd-motion-mark-dur, var(--cd-dur-slow)) var(--cd-ease) both;
+  --animate-fill: fill var(--cd-motion-fill-dur, var(--cd-dur-slow)) var(--cd-ease) both;
+  --animate-shake: var(--cd-motion-shake, var(--cd-motion-shake-preset, none));
+  --animate-attention: attention var(--cd-motion-attention-dur, 900ms) var(--cd-ease) 1;
+  --animate-attention-wait: attention 1.6s var(--cd-ease) 3;
+  --animate-nudge: var(--cd-motion-shake, var(--cd-motion-shake-preset, none)), attention var(--cd-motion-attention-dur, 900ms) var(--cd-ease) 1;
 }
 
 @keyframes shimmer {
@@ -508,12 +605,12 @@
 }
 /* Something added or removed: a fade, and a scale from --cd-pop-from (1 unless expressive). */
 @keyframes pop-in {
-  from { opacity: 0; transform: scale(var(--cd-pop-from)); }
+  from { opacity: 0; transform: scale(var(--cd-pop-from, var(--cd-pop-from-preset, 1))); }
   to { opacity: 1; transform: none; }
 }
 @keyframes pop-out {
   from { opacity: 1; transform: none; }
-  to { opacity: 0; transform: scale(var(--cd-pop-from)); }
+  to { opacity: 0; transform: scale(var(--cd-pop-from, var(--cd-pop-from-preset, 1))); }
 }
 /* A tick or cross drawn along its path; the path has pathLength="1" and stroke-dasharray 1. */
 @keyframes tick-draw {
@@ -560,27 +657,424 @@
 [data-slot="payload"][data-syntax="highlight"] :is([data-token="property"], [data-token="tag"], [data-token="type"]) { color: var(--warning-text); }
 
 /*
- * data-motion="none": nothing moves, with or without the OS setting. An element leaving with a pop-out (data-leaving)
- * is simply gone. The reduced-motion block below comes last and stays authoritative for every preset.
+ * ---------------------------------------------------------------- The motion families
+ *
+ * One utility (or an in and out pair) per family. A component adds it only at the honest moment, and puts the
+ * moment's chain from lib/motion.ts in the same element's style; with no chain, the family's tokens apply. Every
+ * value is worked out here, on the element that moves, so the nearest data-motion and the brand's tokens apply:
+ *
+ *   level  = min(moment ?? family ?? preset, cap)
+ *   time   = duration × speed × min(level, 1)              (level 0: the end state at once; events still fire)
+ *   amount = amplitude × (subtle share + (1 − share) × clamp(0, level − 1, 1))
+ *
+ * Each has a calm form (@variant calm: the OS's reduced-motion setting or data-motion="calm"): opacity and colour only,
+ * 150 ms at most, nothing loops. Defaults here must equal lib/motion.ts's; `npm run check:motion` compares them.
  */
-[data-motion="none"], [data-motion="none"] *, [data-motion="none"] *::before, [data-motion="none"] *::after {
-  animation: none !important;
-  transition: none !important;
-  scroll-behavior: auto !important;
+
+/* reveal: content opened or closed to its measured size (Radix's), or faded with the size snapping. */
+@utility cd-reveal {
+  --cd-reveal-l: min(var(--cd-m-reveal, var(--cd-motion-reveal, var(--cd-motion-preset))), var(--cd-motion-cap));
+  --cd-reveal-t: calc(var(--cd-m-reveal-dur, var(--cd-motion-reveal-dur, 200ms)) * var(--cd-motion-speed) * min(var(--cd-reveal-l), 1));
+  --cd-size: var(--radix-collapsible-content-height, var(--radix-accordion-content-height, auto));
+  animation: var(--cd-m-reveal-variant, var(--cd-motion-reveal-variant, cd-size)) var(--cd-reveal-t) var(--cd-m-reveal-ease, var(--cd-motion-reveal-ease, var(--cd-ease)));
+  @variant calm {
+    animation-name: none !important;
+  }
+}
+@utility cd-reveal-out {
+  --cd-reveal-l: min(var(--cd-m-reveal, var(--cd-motion-reveal, var(--cd-motion-preset))), var(--cd-motion-cap));
+  --cd-reveal-t: calc(var(--cd-m-reveal-dur, var(--cd-motion-reveal-dur, 200ms)) * var(--cd-motion-speed) * min(var(--cd-reveal-l), 1));
+  --cd-size: var(--radix-collapsible-content-height, var(--radix-accordion-content-height, auto));
+  animation: var(--cd-m-reveal-variant, var(--cd-motion-reveal-variant, cd-size)) var(--cd-reveal-t) var(--cd-m-reveal-ease, var(--cd-motion-reveal-ease, var(--cd-ease))) reverse both;
+  @variant calm {
+    animation-name: none !important;
+  }
+}
+/* A disclosure's chevron turning with its content. */
+@utility cd-reveal-turn {
+  --cd-reveal-l: min(var(--cd-m-reveal, var(--cd-motion-reveal, var(--cd-motion-preset))), var(--cd-motion-cap));
+  --cd-reveal-t: calc(var(--cd-m-reveal-dur, var(--cd-motion-reveal-dur, 200ms)) * var(--cd-motion-speed) * min(var(--cd-reveal-l), 1));
+  transition-property: transform, rotate;
+  transition-duration: var(--cd-reveal-t);
+  transition-timing-function: var(--cd-m-reveal-ease, var(--cd-motion-reveal-ease, var(--cd-ease)));
+  @variant calm {
+    transition-property: none !important;
+  }
+}
+
+/* arrive: something new after the first draw rises in (or fades, or pops). */
+@utility cd-arrive {
+  --cd-arrive-l: min(var(--cd-m-arrive, var(--cd-motion-arrive, var(--cd-motion-preset))), var(--cd-motion-cap));
+  --cd-arrive-t: calc(var(--cd-m-arrive-dur, var(--cd-motion-arrive-dur, 240ms)) * var(--cd-motion-speed) * min(var(--cd-arrive-l), 1));
+  --cd-arrive-f: calc(0.5 + 0.5 * clamp(0, var(--cd-arrive-l) - 1, 1));
+  --cd-from-y: calc(var(--cd-m-arrive-amp, var(--cd-motion-arrive-distance, 8px)) * var(--cd-arrive-f));
+  --cd-from-scale: calc(1 - 0.04 * var(--cd-arrive-f));
+  animation: var(--cd-m-arrive-variant, var(--cd-motion-arrive-variant, cd-rise)) var(--cd-arrive-t) var(--cd-m-arrive-ease, var(--cd-motion-arrive-ease, var(--cd-ease))) both;
+  @variant calm {
+    animation-name: cd-fade !important;
+    animation-duration: min(var(--cd-arrive-t), 150ms) !important;
+  }
+}
+
+/* pop: added, removed, or a small mark appearing. A fade, with a scale from the amplitude at expressive. */
+@utility cd-pop {
+  --cd-pop-l: min(var(--cd-m-pop, var(--cd-motion-pop, var(--cd-motion-preset))), var(--cd-motion-cap));
+  --cd-pop-t: calc(var(--cd-m-pop-dur, var(--cd-motion-pop-dur, 200ms)) * var(--cd-motion-speed) * min(var(--cd-pop-l), 1));
+  /* A 2.2 brand's --cd-pop-from still wins. */
+  --cd-from-scale: var(--cd-pop-from, calc(1 - (1 - var(--cd-m-pop-amp, var(--cd-motion-pop-scale, 0.85))) * clamp(0, var(--cd-pop-l) - 1, 1)));
+  animation: var(--cd-m-pop-variant, var(--cd-motion-pop-variant, cd-scale)) var(--cd-pop-t) var(--cd-m-pop-ease, var(--cd-motion-pop-ease, var(--cd-ease))) both;
+  @variant calm {
+    animation-name: cd-fade !important;
+    animation-duration: min(var(--cd-pop-t), 150ms) !important;
+  }
+}
+@utility cd-pop-out {
+  --cd-pop-l: min(var(--cd-m-pop, var(--cd-motion-pop, var(--cd-motion-preset))), var(--cd-motion-cap));
+  --cd-pop-t: calc(var(--cd-m-pop-out-dur, var(--cd-motion-pop-out-dur, 120ms)) * var(--cd-motion-speed) * min(var(--cd-pop-l), 1));
+  --cd-from-scale: var(--cd-pop-from, calc(1 - (1 - var(--cd-m-pop-amp, var(--cd-motion-pop-scale, 0.85))) * clamp(0, var(--cd-pop-l) - 1, 1)));
+  animation: var(--cd-m-pop-variant, var(--cd-motion-pop-variant, cd-scale)) var(--cd-pop-t) var(--cd-m-pop-ease, var(--cd-motion-pop-ease, var(--cd-ease))) reverse both;
+  @variant calm {
+    animation-name: cd-fade !important;
+    animation-duration: min(var(--cd-pop-t), 150ms) !important;
+  }
+}
+
+/*
+ * mark: a tick or cross drawn when a result settles. Put it on each path (pathLength="1"); set --cd-mark-step to 1 on a
+ * second stroke to draw it after the first.
+ */
+@utility cd-mark {
+  --cd-mark-l: min(var(--cd-m-mark, var(--cd-motion-mark, var(--cd-motion-preset))), var(--cd-motion-cap));
+  --cd-mark-t: calc(var(--cd-m-mark-dur, var(--cd-motion-mark-dur, 360ms)) * var(--cd-motion-speed) * min(var(--cd-mark-l), 1));
+  --cd-from-scale: 0.6;
+  --cd-from-y: -4px;
+  stroke-dasharray: 1;
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: var(--cd-m-mark-variant, var(--cd-motion-mark-variant, cd-draw)) var(--cd-mark-t) var(--cd-m-mark-ease, var(--cd-motion-mark-ease, var(--cd-ease))) both;
+  animation-delay: calc(var(--cd-mark-step, 0) * var(--cd-mark-t) / 3);
+  @variant calm {
+    animation-name: cd-fade !important;
+    animation-duration: min(var(--cd-mark-t), 150ms) !important;
+    animation-delay: 0s !important;
+  }
+}
+
+/* fill: a bar or ring moving between measured values (a transition on its width, dash or scale). */
+@utility cd-fill {
+  --cd-fill-l: min(var(--cd-m-fill, var(--cd-motion-fill, var(--cd-motion-preset))), var(--cd-motion-cap));
+  --cd-fill-t: calc(var(--cd-m-fill-dur, var(--cd-motion-fill-dur, 360ms)) * var(--cd-motion-speed) * min(var(--cd-fill-l), 1));
+  transition-property: width, inline-size, height, block-size, scale, stroke-dasharray, stroke-dashoffset, stroke, background-color;
+  transition-duration: var(--cd-fill-t);
+  transition-timing-function: var(--cd-m-fill-ease, var(--cd-motion-fill-ease, var(--cd-ease)));
+  @variant calm {
+    transition-property: stroke, background-color !important;
+    transition-duration: min(var(--cd-fill-t), 150ms) !important;
+  }
+}
+/* A bar that grows into place from --cd-fill-from (along its width; "1 0" for height), when a step it reports finishes. */
+@utility cd-fill-grow {
+  --cd-fill-l: min(var(--cd-m-fill, var(--cd-motion-fill, var(--cd-motion-preset))), var(--cd-motion-cap));
+  --cd-fill-t: calc(var(--cd-m-fill-dur, var(--cd-motion-fill-dur, 360ms)) * var(--cd-motion-speed) * min(var(--cd-fill-l), 1));
+  animation: cd-grow var(--cd-fill-t) var(--cd-m-fill-ease, var(--cd-motion-fill-ease, var(--cd-ease))) both;
+  @variant calm {
+    animation-name: none !important;
+  }
+}
+
+/* value: a number or word changed in place, crossfaded (and slid by the distance at expressive). Key the element on the value. */
+@utility cd-value {
+  --cd-value-l: min(var(--cd-m-value, var(--cd-motion-value, var(--cd-motion-preset))), var(--cd-motion-cap));
+  --cd-value-t: calc(var(--cd-m-value-dur, var(--cd-motion-value-dur, 120ms)) * var(--cd-motion-speed) * min(var(--cd-value-l), 1));
+  --cd-from-y: calc(var(--cd-m-value-amp, var(--cd-motion-value-distance, 2px)) * clamp(0, var(--cd-value-l) - 1, 1));
+  animation: var(--cd-m-value-variant, var(--cd-motion-value-variant, cd-fade)) var(--cd-value-t) var(--cd-m-value-ease, var(--cd-motion-value-ease, var(--cd-ease))) both;
+  @variant calm {
+    animation-name: cd-fade !important;
+    animation-duration: min(var(--cd-value-t), 150ms) !important;
+  }
+}
+
+/* move: a thing changed place (a transition on its position). */
+@utility cd-move {
+  --cd-move-l: min(var(--cd-m-move, var(--cd-motion-move, var(--cd-motion-preset))), var(--cd-motion-cap));
+  --cd-move-t: calc(var(--cd-m-move-dur, var(--cd-motion-move-dur, 200ms)) * var(--cd-motion-speed) * min(var(--cd-move-l), 1));
+  transition-property: transform, translate, inset-inline-start, inset-inline-end, inset-block-start, left, right, top, width;
+  transition-duration: var(--cd-move-t);
+  transition-timing-function: var(--cd-m-move-ease, var(--cd-motion-move-ease, var(--cd-ease)));
+  @variant calm {
+    transition-property: none !important;
+  }
+}
+
+/*
+ * overlay: a dialog, sheet, popover, menu or tooltip opening (cd-overlay) or closing (cd-overlay-out), from the
+ * trigger's origin (set transform-origin) and nudged from its side (Radix's data-side, or --cd-side-x/-y of -1, 0 or 1).
+ * A sheet sets --cd-overlay-distance to how far it travels. cd-scrim is the backdrop behind a dialog or sheet: always a fade.
+ */
+@utility cd-overlay {
+  --cd-overlay-l: min(var(--cd-m-overlay, var(--cd-motion-overlay, var(--cd-motion-preset))), var(--cd-motion-cap));
+  --cd-overlay-t: calc(var(--cd-m-overlay-dur, var(--cd-motion-overlay-dur, 150ms)) * var(--cd-motion-speed) * min(var(--cd-overlay-l), 1));
+  --cd-from-scale: var(--cd-m-overlay-amp, var(--cd-motion-overlay-scale, 0.95));
+  --cd-nudge-x: calc(var(--cd-side-x, 0) * 0.5rem);
+  --cd-nudge-y: calc(var(--cd-side-y, 0) * 0.5rem);
+  --cd-from-x: calc(var(--cd-side-x, 0) * var(--cd-overlay-distance, 0.5rem));
+  --cd-from-y: calc(var(--cd-side-y, 0) * var(--cd-overlay-distance, 0.5rem));
+  animation: var(--cd-m-overlay-variant, var(--cd-motion-overlay-variant, cd-scale)) var(--cd-overlay-t) var(--cd-m-overlay-ease, var(--cd-motion-overlay-ease, var(--cd-ease))) both;
+  &[data-side="bottom"] { --cd-side-y: -1; }
+  &[data-side="top"] { --cd-side-y: 1; }
+  &[data-side="left"] { --cd-side-x: 1; }
+  &[data-side="right"] { --cd-side-x: -1; }
+  @variant calm {
+    animation-name: cd-fade !important;
+    animation-duration: min(var(--cd-overlay-t), 150ms) !important;
+  }
+}
+@utility cd-overlay-out {
+  --cd-overlay-l: min(var(--cd-m-overlay, var(--cd-motion-overlay, var(--cd-motion-preset))), var(--cd-motion-cap));
+  --cd-overlay-t: calc(var(--cd-m-overlay-out-dur, var(--cd-motion-overlay-out-dur, 150ms)) * var(--cd-motion-speed) * min(var(--cd-overlay-l), 1));
+  --cd-from-scale: var(--cd-m-overlay-amp, var(--cd-motion-overlay-scale, 0.95));
+  /* Leaving isn't nudged; a sheet still slides back to its edge. */
+  --cd-nudge-x: 0;
+  --cd-nudge-y: 0;
+  --cd-from-x: calc(var(--cd-side-x, 0) * var(--cd-overlay-distance, 0.5rem));
+  --cd-from-y: calc(var(--cd-side-y, 0) * var(--cd-overlay-distance, 0.5rem));
+  animation: var(--cd-m-overlay-variant, var(--cd-motion-overlay-variant, cd-scale)) var(--cd-overlay-t) var(--cd-m-overlay-ease, var(--cd-motion-overlay-ease, var(--cd-ease))) reverse both;
+  @variant calm {
+    animation-name: cd-fade !important;
+    animation-duration: min(var(--cd-overlay-t), 150ms) !important;
+  }
+}
+@utility cd-scrim {
+  --cd-overlay-l: min(var(--cd-m-overlay, var(--cd-motion-overlay, var(--cd-motion-preset))), var(--cd-motion-cap));
+  --cd-overlay-t: calc(var(--cd-m-overlay-dur, var(--cd-motion-overlay-dur, 150ms)) * var(--cd-motion-speed) * min(var(--cd-overlay-l), 1));
+  animation: cd-fade var(--cd-overlay-t) var(--cd-m-overlay-ease, var(--cd-motion-overlay-ease, var(--cd-ease))) both;
+  @variant calm {
+    animation-duration: min(var(--cd-overlay-t), 150ms) !important;
+  }
+}
+@utility cd-scrim-out {
+  --cd-overlay-l: min(var(--cd-m-overlay, var(--cd-motion-overlay, var(--cd-motion-preset))), var(--cd-motion-cap));
+  --cd-overlay-t: calc(var(--cd-m-overlay-out-dur, var(--cd-motion-overlay-out-dur, 150ms)) * var(--cd-motion-speed) * min(var(--cd-overlay-l), 1));
+  animation: cd-fade var(--cd-overlay-t) var(--cd-m-overlay-ease, var(--cd-motion-overlay-ease, var(--cd-ease))) reverse both;
+  @variant calm {
+    animation-duration: min(var(--cd-overlay-t), 150ms) !important;
+  }
 }
-[data-motion="none"] [data-leaving] {
-  display: none !important;
+
+/*
+ * tint and press share one transition, so either utility (or both) on an element gives colours, opacity, shadows and
+ * filters the tint family's timing and the press scale the press family's. cd-press also scales the element while it
+ * is pressed.
+ */
+@utility cd-tint {
+  --cd-tint-l: min(var(--cd-m-tint, var(--cd-motion-tint, var(--cd-motion-preset))), var(--cd-motion-cap));
+  --cd-tint-t: calc(var(--cd-m-tint-dur, var(--cd-motion-tint-dur, 150ms)) * var(--cd-motion-speed) * min(var(--cd-tint-l), 1));
+  --cd-tint-e: var(--cd-m-tint-ease, var(--cd-motion-tint-ease, var(--cd-ease)));
+  --cd-press-l: min(var(--cd-m-press, var(--cd-motion-press, var(--cd-motion-preset))), var(--cd-motion-cap));
+  --cd-press-t: calc(var(--cd-m-press-dur, var(--cd-motion-press-dur, 150ms)) * var(--cd-motion-speed) * min(var(--cd-press-l), 1));
+  --cd-press-e: var(--cd-m-press-ease, var(--cd-motion-press-ease, var(--cd-ease)));
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, filter, scale;
+  transition-duration: var(--cd-tint-t), var(--cd-tint-t), var(--cd-tint-t), var(--cd-tint-t), var(--cd-tint-t), var(--cd-tint-t), var(--cd-tint-t), var(--cd-tint-t), var(--cd-tint-t), var(--cd-tint-t), var(--cd-press-t);
+  transition-timing-function: var(--cd-tint-e), var(--cd-tint-e), var(--cd-tint-e), var(--cd-tint-e), var(--cd-tint-e), var(--cd-tint-e), var(--cd-tint-e), var(--cd-tint-e), var(--cd-tint-e), var(--cd-tint-e), var(--cd-press-e);
+  @variant calm {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity !important;
+    transition-duration: min(var(--cd-tint-t), 150ms) !important;
+    transition-timing-function: var(--cd-tint-e) !important;
+  }
+}
+@utility cd-press {
+  --cd-tint-l: min(var(--cd-m-tint, var(--cd-motion-tint, var(--cd-motion-preset))), var(--cd-motion-cap));
+  --cd-tint-t: calc(var(--cd-m-tint-dur, var(--cd-motion-tint-dur, 150ms)) * var(--cd-motion-speed) * min(var(--cd-tint-l), 1));
+  --cd-tint-e: var(--cd-m-tint-ease, var(--cd-motion-tint-ease, var(--cd-ease)));
+  --cd-press-l: min(var(--cd-m-press, var(--cd-motion-press, var(--cd-motion-preset))), var(--cd-motion-cap));
+  --cd-press-t: calc(var(--cd-m-press-dur, var(--cd-motion-press-dur, 150ms)) * var(--cd-motion-speed) * min(var(--cd-press-l), 1));
+  --cd-press-e: var(--cd-m-press-ease, var(--cd-motion-press-ease, var(--cd-ease)));
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, filter, scale;
+  transition-duration: var(--cd-tint-t), var(--cd-tint-t), var(--cd-tint-t), var(--cd-tint-t), var(--cd-tint-t), var(--cd-tint-t), var(--cd-tint-t), var(--cd-tint-t), var(--cd-tint-t), var(--cd-tint-t), var(--cd-press-t);
+  transition-timing-function: var(--cd-tint-e), var(--cd-tint-e), var(--cd-tint-e), var(--cd-tint-e), var(--cd-tint-e), var(--cd-tint-e), var(--cd-tint-e), var(--cd-tint-e), var(--cd-tint-e), var(--cd-tint-e), var(--cd-press-e);
+  /* :where keeps it below an item's own active:scale-100 (a link, a locked control). */
+  &:where(:active) {
+    scale: calc(1 - (1 - var(--cd-m-press-amp, var(--cd-motion-press-scale, 0.96))) * (0.5 + 0.5 * clamp(0, var(--cd-press-l) - 1, 1)) * min(var(--cd-press-l), 1));
+  }
+  @variant calm {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity !important;
+    transition-duration: min(var(--cd-tint-t), 150ms) !important;
+    transition-timing-function: var(--cd-tint-e) !important;
+    &:where(:active) {
+      scale: none !important;
+    }
+  }
+}
+
+/* refuse: a locked control was pressed. The reason is shown in words (a tint); at expressive the control shakes. */
+@utility cd-refuse {
+  --cd-refuse-l: min(var(--cd-m-refuse, var(--cd-motion-refuse, var(--cd-motion-preset))), var(--cd-motion-cap));
+  --cd-refuse-t: calc(var(--cd-m-refuse-dur, var(--cd-motion-refuse-dur, 360ms)) * var(--cd-motion-speed) * min(var(--cd-refuse-l), 1));
+  --cd-shake: calc(var(--cd-m-refuse-amp, var(--cd-motion-refuse-distance, 3px)) * clamp(0, var(--cd-refuse-l) - 1, 1));
+  /* A 2.2 brand's --cd-motion-shake still wins. */
+  animation: var(--cd-motion-shake, cd-shake var(--cd-refuse-t) var(--cd-m-refuse-ease, var(--cd-motion-refuse-ease, var(--cd-ease))) both);
+  @variant calm {
+    animation-name: none !important;
+  }
+}
+
+/* attention: something new waits on the person. A ring that grows and fades, --cd-motion-…-count times. */
+@utility cd-attention {
+  --cd-attention-l: min(var(--cd-m-attention, var(--cd-motion-attention, var(--cd-motion-preset))), var(--cd-motion-cap));
+  /* Not scaled by the speed token: count × duration must stay under five seconds (WCAG 2.2.2). */
+  --cd-attention-t: calc(var(--cd-m-attention-dur, var(--cd-motion-attention-dur, 900ms)) * min(var(--cd-attention-l), 1));
+  animation: cd-ring var(--cd-attention-t) var(--cd-m-attention-ease, var(--cd-motion-attention-ease, var(--cd-ease))) var(--cd-m-attention-amp, var(--cd-motion-attention-count, 1));
+  @variant calm {
+    animation-name: cd-ring-calm !important;
+    animation-duration: min(var(--cd-attention-t), 150ms) !important;
+    animation-iteration-count: 1 !important;
+  }
+}
+/* A prompt that was clicked around instead of answered: refuse's shake (expressive only) and one attention ring. */
+@utility cd-nudge {
+  --cd-refuse-l: min(var(--cd-m-refuse, var(--cd-motion-refuse, var(--cd-motion-preset))), var(--cd-motion-cap));
+  --cd-refuse-t: calc(var(--cd-m-refuse-dur, var(--cd-motion-refuse-dur, 360ms)) * var(--cd-motion-speed) * min(var(--cd-refuse-l), 1));
+  --cd-shake: calc(var(--cd-m-refuse-amp, var(--cd-motion-refuse-distance, 3px)) * clamp(0, var(--cd-refuse-l) - 1, 1));
+  --cd-attention-l: min(var(--cd-m-attention, var(--cd-motion-attention, var(--cd-motion-preset))), var(--cd-motion-cap));
+  --cd-attention-t: calc(var(--cd-m-attention-dur, var(--cd-motion-attention-dur, 900ms)) * var(--cd-motion-speed) * min(var(--cd-attention-l), 1));
+  animation:
+    var(--cd-motion-shake, cd-shake var(--cd-refuse-t) var(--cd-m-refuse-ease, var(--cd-motion-refuse-ease, var(--cd-ease))) both),
+    cd-ring var(--cd-attention-t) var(--cd-m-attention-ease, var(--cd-motion-attention-ease, var(--cd-ease))) 1;
+  @variant calm {
+    animation: cd-ring-calm min(var(--cd-attention-t), 150ms) var(--cd-ease) 1 !important;
+  }
+}
+
+/*
+ * live: work that is being heard from. Each indicator has its own drawing and period; all of them are still at level 0
+ * and under calm, so keep the word beside them ("Running", "Sending…").
+ */
+@utility cd-live-dot {
+  --cd-live-l: min(var(--cd-m-live, var(--cd-motion-live, var(--cd-motion-preset))), var(--cd-motion-cap));
+  animation: cd-pulse-dot calc(var(--cd-m-live-dur, var(--cd-motion-live-dur, 1600ms)) * var(--cd-motion-speed) * min(var(--cd-live-l), 1)) var(--cd-m-live-ease, var(--cd-motion-live-ease, var(--cd-ease))) infinite;
+  @variant calm {
+    animation: none !important;
+  }
+}
+@utility cd-live-pulse {
+  --cd-live-l: min(var(--cd-m-live, var(--cd-motion-live, var(--cd-motion-preset))), var(--cd-motion-cap));
+  animation: cd-pulse calc(var(--cd-m-live-dur, var(--cd-motion-live-dur, 2000ms)) * var(--cd-motion-speed) * min(var(--cd-live-l), 1)) var(--cd-m-live-ease, var(--cd-motion-live-ease, var(--cd-ease-inout))) infinite;
+  @variant calm {
+    animation: none !important;
+  }
+}
+@utility cd-live-spin {
+  --cd-live-l: min(var(--cd-m-live, var(--cd-motion-live, var(--cd-motion-preset))), var(--cd-motion-cap));
+  animation: cd-spin calc(var(--cd-m-live-dur, var(--cd-motion-live-dur, 1000ms)) * var(--cd-motion-speed) * min(var(--cd-live-l), 1)) linear infinite;
+  @variant calm {
+    animation: none !important;
+  }
+}
+@utility cd-live-caret {
+  --cd-live-l: min(var(--cd-m-live, var(--cd-motion-live, var(--cd-motion-preset))), var(--cd-motion-cap));
+  animation: cd-caret calc(var(--cd-m-live-dur, var(--cd-motion-live-dur, 1000ms)) * var(--cd-motion-speed) * min(var(--cd-live-l), 1)) steps(2, start) infinite;
+  @variant calm {
+    animation: none !important;
+  }
 }
 
+@keyframes cd-fade {
+  from { opacity: 0; }
+}
+@keyframes cd-rise {
+  from { opacity: 0; transform: translateY(var(--cd-from-y, 4px)); }
+}
+@keyframes cd-pop {
+  from { opacity: 0; transform: scale(var(--cd-from-scale, 1)); }
+}
+@keyframes cd-scale {
+  from { opacity: 0; transform: translate(var(--cd-nudge-x, 0), var(--cd-nudge-y, 0)) scale(var(--cd-from-scale, 1)); }
+}
+@keyframes cd-slide {
+  from { opacity: 0; transform: translate(var(--cd-from-x, 0), var(--cd-from-y, 0)); }
+}
+@keyframes cd-drop {
+  from { opacity: 0; transform: translateY(var(--cd-from-y, -4px)); }
+}
+/* Overflow is hidden only while it moves. */
+@keyframes cd-size {
+  from { height: 0; overflow: hidden; }
+  to { height: var(--cd-size, auto); overflow: hidden; }
+}
+/* Along a path with pathLength="1" and stroke-dasharray 1. */
+@keyframes cd-draw {
+  from { stroke-dashoffset: 1; }
+  to { stroke-dashoffset: 0; }
+}
+@keyframes cd-grow {
+  from { scale: var(--cd-fill-from, 0 1); }
+}
+@keyframes cd-shake {
+  0%, 100% { transform: none; }
+  20%, 60% { transform: translateX(calc(-1 * var(--cd-shake, 0px))); }
+  40%, 80% { transform: translateX(var(--cd-shake, 0px)); }
+}
+/* In --cd-attention-color (the text colour unless set). */
+@keyframes cd-ring {
+  0%, 100% { outline: 0 solid color-mix(in oklab, var(--cd-attention-color, currentColor) 45%, transparent); }
+  60% { outline: 6px solid transparent; }
+}
+/* The calm ring: a fixed width whose colour fades. */
+@keyframes cd-ring-calm {
+  from { outline: 3px solid color-mix(in oklab, var(--cd-attention-color, currentColor) 45%, transparent); }
+  to { outline: 3px solid transparent; }
+}
+@keyframes cd-pulse-dot {
+  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, currentColor 45%, transparent); }
+  70% { box-shadow: 0 0 0 5px transparent; }
+}
+@keyframes cd-pulse {
+  50% { opacity: 0.5; }
+}
+@keyframes cd-spin {
+  to { transform: rotate(360deg); }
+}
+@keyframes cd-caret {
+  to { visibility: hidden; }
+}
+
+/*
+ * data-motion="none", the hard off: nothing animates or transitions, under any setting, and an element leaving with an
+ * out moment (data-leaving) is simply gone. In the base layer with !important, which beats every later layer's
+ * !important (the calm forms) and the unlayered one below.
+ */
+@layer base {
+  [data-motion="none"], [data-motion="none"] *, [data-motion="none"] *::before, [data-motion="none"] *::after {
+    animation: none !important;
+    transition: none !important;
+    scroll-behavior: auto !important;
+  }
+  [data-motion="none"] [data-leaving] {
+    display: none !important;
+  }
+}
+
+/*
+ * The calm level for everything outside the families (an app's own keyframes, a third-party widget): its animations
+ * end at once, nothing loops, only opacity and colour transition, scrolling is instant. Unlayered !important is the
+ * weakest important, so the families' own calm forms win over it.
+ */
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
     animation-duration: 0.001ms !important;
     animation-delay: 0s !important;
     animation-iteration-count: 1 !important;
-    transition-duration: 0.001ms !important;
+    transition-property: opacity, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke !important;
     scroll-behavior: auto !important;
   }
 }
+[data-motion="calm"], [data-motion="calm"] *, [data-motion="calm"] *::before, [data-motion="calm"] *::after {
+  animation-duration: 0.001ms !important;
+  animation-delay: 0s !important;
+  animation-iteration-count: 1 !important;
+  transition-property: opacity, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke !important;
+  scroll-behavior: auto !important;
+}
 
 @layer base {
   * {
@@ -597,11 +1091,16 @@
   }
 }
 
+/* Text that is still arriving: a live indicator, so it's still at level 0 and under calm (the words stay readable). */
 @utility shimmer-text {
+  --cd-live-l: min(var(--cd-m-live, var(--cd-motion-live, var(--cd-motion-preset))), var(--cd-motion-cap));
   background: linear-gradient(90deg, var(--muted-foreground) 0%, var(--muted-foreground) 40%, var(--foreground) 50%, var(--muted-foreground) 60%, var(--muted-foreground) 100%);
   background-size: 200% 100%;
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
-  animation: var(--animate-shimmer);
+  animation: shimmer calc(var(--cd-m-live-dur, var(--cd-motion-live-dur, 2200ms)) * var(--cd-motion-speed) * min(var(--cd-live-l), 1)) linear infinite;
+  @variant calm {
+    animation: none !important;
+  }
 }