From ab1d195663d9e63bb9957ec15ef4203f8099d35a Mon Sep 17 00:00:00 2001
From: Christopher Chedeau <vjeuxx@gmail.com>
Date: Mon, 2 Nov 2026 21:40:36 -0800
Subject: [PATCH] fix(core): no press scale or card color fade under reduced
 motion

Under reduced motion a press never scales a Button, and ClickableCard,
SelectableCard and Thumbnail change their hover and selection colors
at once on every pointer.

The three cards drop their own copy of the press release and compose
the shared pressedAlpha alone. Under the touch presentation their
press release fades on the theme's exit duration and easing, as other
touch press releases do (component:ClickableCard FR5,
component:SelectableCard FR4, component:Thumbnail FR4). The press
still shows at once. Under reduced motion that fade takes at most
200 ms, opacity only. A mouse press keeps the cards' desktop press
styling.
---
 .changeset/reduced-motion-button-cards.md     |   7 +
 docs/design/reduced-motion.md                 |  36 +-
 docs/specs/components/Button/Button.spec.md   |  26 +-
 .../ClickableCard/ClickableCard.spec.md       |  33 +-
 .../SelectableCard/SelectableCard.spec.md     |  48 +-
 .../components/Thumbnail/Thumbnail.spec.md    |  31 +-
 packages/core/src/Button/Button.tsx           |  22 +-
 .../core/src/ClickableCard/ClickableCard.tsx  |  45 +-
 .../src/SelectableCard/SelectableCard.tsx     |  45 +-
 packages/core/src/Thumbnail/Thumbnail.tsx     |  22 +-
 .../ReducedMotionPress.a11y.chromium.spec.ts  | 459 ++++++++++++++++++
 .../src/motion/reducedMotionValues.test.ts    |  78 +++
 12 files changed, 768 insertions(+), 84 deletions(-)
 create mode 100644 .changeset/reduced-motion-button-cards.md
 create mode 100644 packages/core/src/__tests__/ReducedMotionPress.a11y.chromium.spec.ts
 create mode 100644 packages/core/src/motion/reducedMotionValues.test.ts

diff --git a/.changeset/reduced-motion-button-cards.md b/.changeset/reduced-motion-button-cards.md
new file mode 100644
index 0000000000000..f37dd9ea46698
--- /dev/null
+++ b/.changeset/reduced-motion-button-cards.md
@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[fix] Under reduced motion, a pressed Button no longer shrinks, and ClickableCard, SelectableCard and Thumbnail change their hover, border and selection colors at once on every pointer, whatever the theme's duration. A finger's press highlight still fades out on release, within 200 ms.
+
+@vjeux
diff --git a/docs/design/reduced-motion.md b/docs/design/reduced-motion.md
index 31995ac89528e..449334d4dbbb8 100644
--- a/docs/design/reduced-motion.md
+++ b/docs/design/reduced-motion.md
@@ -10,7 +10,11 @@ approved_by: cixzhang
 approved_at: 2026-10-24
 owners: [cixzhang]
 review_triggers: [motion, interaction, accessibility]
-verified_by: [scripts/check-knowledge.mjs]
+verified_by:
+  [
+    scripts/check-knowledge.mjs,
+    packages/core/src/__tests__/ReducedMotionPress.a11y.chromium.spec.ts,
+  ]
 architecture: [architecture:interaction-modality]
 components: []
 families: []
@@ -32,8 +36,8 @@ deciding_specs: []
 A person who asks their device to reduce motion still sees every change Astryx
 shows, with no travel, scaling, or springing. On a touch screen a change
 cross-fades, as iOS does with Reduce Motion and Prefer Cross-Fade, except an
-in-place value change, which applies at once; with a mouse,
-trackpad, or keyboard the change is immediate.
+in-place value change and a hover or selection color, which apply at once;
+with a mouse, trackpad, or keyboard the change is immediate.
 
 ## Design principles
 
@@ -56,7 +60,7 @@ trackpad, or keyboard the change is immediate.
 
 | State                                             | Required representation                                                                         | Allowed variation          |
 | ------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------- |
-| reduced motion, coarse pointer                    | Opacity-only cross-fade of 200 ms or less (DR2); an in-place value change applies at once (DR2) | A shorter cross-fade       |
+| reduced motion, coarse pointer                    | Opacity-only cross-fade of 200 ms or less (DR2); in-place values and colors apply at once (DR2) | A shorter cross-fade       |
 | reduced motion, any other pointer                 | Immediate change (DR3), except a touch drag's release (DR2)                                     | None                       |
 | no reduced-motion preference, theme on `'system'` | Outside this record                                                                             | Component and theme motion |
 | a theme on `'always'` (DR2a)                      | As reduced motion, whatever the person's setting                                                | DR1–DR3                    |
@@ -75,7 +79,13 @@ trackpad, or keyboard the change is immediate.
   coast Astryx animates itself after a throw behaves like native momentum
   under Reduce Motion. An in-place value change, such as a progress fill's length or
   another continuous value, does not cross-fade: under reduced motion it
-  applies at once on any pointer, with no added element (DEC-3).
+  applies at once on any pointer, with no added element (DEC-3). A control's
+  hover or selection color, such as SelectableCard's selection border and
+  ring, also applies at once on any pointer, as on iOS (DEC-4). So does the
+  onset of its press color. A color that changes with a part that cross-fades
+  follows that cross-fade, such as Switch's track with its thumb
+  (`component:Switch` FR15). A touch press's release keeps its fade of 200 ms
+  or less.
 - **DR2a — A theme may reduce motion for everyone.** A theme's
   `reducedMotion: 'always'` applies DR1–DR3 for every person, whatever their
   setting; `'system'` follows each person's setting (`spec:AST-108`). No theme
@@ -131,6 +141,7 @@ No normative assets are included.
 | DR1, DR2     | Real-browser computed animations under reduced motion, coarse pointer          | Layer entrance and exit (Tooltip, Popover, menu); Dialog; modal BottomSheet; a presentation switch            | An animated transform, size, or position; a spring; a property other than opacity; over 200 ms; a change with no cross-fade |
 | DR2 momentum | Real-browser computed animations under reduced motion after a touch throw      | A flick that coasts and settles at an edge; a release that snaps to a detent, dismisses, or pages to a target | A coast replaced by a cross-fade or stopped at release; a snap, dismissal, or page that travels instead of cross-fading     |
 | DR2 values   | Real-browser computed animations under reduced motion, coarse and fine pointer | A determinate ProgressBar's fill and another continuous value changing in place                               | A value that animates, cross-fades, or adds an element under reduced motion fails                                           |
+| DR2 colors   | Real-browser computed animations under reduced motion, coarse and fine pointer | Button's press onset; ClickableCard's, SelectableCard's and Thumbnail's hover, border and selection colors    | A hover or selection color, or a press onset, that animates or cross-fades; a touch release fade over 200 ms                |
 | DR1, DR3     | Real-browser computed animations under reduced motion, fine pointer            | The same components                                                                                           | Any animated property, or a frame where the change is partly applied                                                        |
 | DR4          | Component prop and theme review plus the browser checks above                  | A component with a motion prop or theme motion value set                                                      | A prop or theme value that restores travel or a longer animation under reduced motion                                       |
 
@@ -174,6 +185,21 @@ Under reduced motion they take the new value at once on any pointer.
 
 Rejected: a cross-fade between the old and new value on a touch screen.
 
+### DEC-4 — A color-only change of state applies at once
+
+**Reference:** `design:reduced-motion/DEC-4`
+**Decider:** `cixzhang`, `2026-11-03`; companion clause per the owner's motion rule (2026-11-04)
+
+A control's hover and selection colors, and the onset of its press color,
+change where they are and move nothing, so reduced motion has nothing to
+remove from them. Under reduced motion they take the new color at once on any
+pointer, as iOS does and as an in-place value does (DEC-3). A color that
+changes with a part that cross-fades, such as Switch's track with its thumb,
+follows that cross-fade, so the two never show different states. A touch
+press's release keeps its fade of 200 ms or less, which confirms the tap.
+
+Rejected: a cross-fade of a hover or selection color on a touch screen.
+
 ## Open questions
 
 None.
diff --git a/docs/specs/components/Button/Button.spec.md b/docs/specs/components/Button/Button.spec.md
index c7eb2a83fa65c..e19ef3c6789af 100644
--- a/docs/specs/components/Button/Button.spec.md
+++ b/docs/specs/components/Button/Button.spec.md
@@ -16,6 +16,7 @@ verified_by:
     packages/core/src/ButtonGroup/ButtonGroup.test.tsx,
     packages/core/src/Button/__tests__/Button.a11y.test.tsx,
     packages/core/src/Button/__tests__/Button.a11y.chromium.spec.ts,
+    packages/core/src/__tests__/ReducedMotionPress.a11y.chromium.spec.ts,
     packages/core/src/Layout/__tests__/edgeCompensation.test.tsx,
     packages/core/src/utils/pressFeedback.test.ts,
   ]
@@ -37,15 +38,15 @@ system_specs: [spec:AST-005, spec:AST-085, spec:AST-086]
 
 ## Contract at a glance
 
-| Area                    | Contract                                                                                                                                                                                                                                                                                                                                                            |
-| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Public contract         | None changes. This record states the shipped Button surface: `label`, variant, size, elevation, content mode, loading and `clickAction`, `isInterruptible`, disabled, tooltip, width, form attributes, and link mode.                                                                                                                                               |
-| Behavior                | A named native `<button type="button">` by default. Pending work shows a centered Spinner over content that keeps its space, sets `aria-busy`, and stays focusable. `href` renders a link unless the Button is truly disabled.                                                                                                                                      |
-| End-user impact         | Everyone gets one action control whose size does not move when it loads. Keyboard users keep focus on a busy Button. A disabled Button without a tooltip is still removed from the tab order, so keyboard users cannot find it or hear that it is disabled.                                                                                                         |
-| Builder impact          | None.                                                                                                                                                                                                                                                                                                                                                               |
-| Compatibility/readiness | Records shipped behavior, except FR15's mouse and pen press (Current-state impact); no API, default, or DOM change. Native `disabled` on a truly disabled Button conflicts with `spec:AST-085` FR1 and FR4, and the press scale and Spinner fade under reduced motion conflict with `design:reduced-motion` DR1 and DR3; all are listed under Current-state impact. |
-| Review checks           | Reject a Button with no accessible name, a pending state that changes outer size or drops focus, a fire-once `clickAction` that runs twice for one double-click, a disabled link that still navigates, or `data-*` theme state that disagrees with painted state.                                                                                                   |
-| Governing rules         | `family:buttons` FR1–FR10; `family:navigation-destinations` FR1–FR7; `spec:AST-085` FR1–FR7; `spec:AST-086` FR3–FR4; `architecture:component-size-cascade` INV3–INV5; `architecture:interaction-modality` INV1, INV5; `design:reduced-motion` DR1, DR3.                                                                                                             |
+| Area                    | Contract                                                                                                                                                                                                                                                                                                                                     |
+| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Public contract         | None changes. This record states the shipped Button surface: `label`, variant, size, elevation, content mode, loading and `clickAction`, `isInterruptible`, disabled, tooltip, width, form attributes, and link mode.                                                                                                                        |
+| Behavior                | A named native `<button type="button">` by default. Pending work shows a centered Spinner over content that keeps its space, sets `aria-busy`, and stays focusable. `href` renders a link unless the Button is truly disabled.                                                                                                               |
+| End-user impact         | Everyone gets one action control whose size does not move when it loads. Keyboard users keep focus on a busy Button. A disabled Button without a tooltip is still removed from the tab order, so keyboard users cannot find it or hear that it is disabled.                                                                                  |
+| Builder impact          | None.                                                                                                                                                                                                                                                                                                                                        |
+| Compatibility/readiness | Records shipped behavior, except FR15's mouse and pen press (Current-state impact); no API, default, or DOM change. Native `disabled` on a truly disabled Button conflicts with `spec:AST-085` FR1 and FR4, and the Spinner fade under reduced motion conflicts with `design:reduced-motion` DR3; all are listed under Current-state impact. |
+| Review checks           | Reject a Button with no accessible name, a pending state that changes outer size or drops focus, a fire-once `clickAction` that runs twice for one double-click, a disabled link that still navigates, or `data-*` theme state that disagrees with painted state.                                                                            |
+| Governing rules         | `family:buttons` FR1–FR10; `family:navigation-destinations` FR1–FR7; `spec:AST-085` FR1–FR7; `spec:AST-086` FR3–FR4; `architecture:component-size-cascade` INV3–INV5; `architecture:interaction-modality` INV1, INV5; `design:reduced-motion` DR1, DR3.                                                                                      |
 
 This table is a review projection; the body below is authoritative.
 
@@ -131,7 +132,7 @@ Consumer migration instructions belong in consumer docs and release notes.
 | FR12 | With `tooltip`, the tooltip attaches to the Button element itself (no wrapper element), opens above it, and its content is added to `aria-describedby` after any caller value, unless its trimmed text equals the Button's accessible name as its props decide it (the derived or caller `aria-label`, or `label` when `icon` and `endContent` render nothing or a decorative Icon), as Avatar AR5 does, so a tooltip that repeats the name is not read twice. When the name comes from elsewhere (`aria-labelledby`, or other content in `icon` or `endContent`), the tooltip still describes the Button. IconButton inherits this.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | Current source; real-browser accessibility test                                      |
 | FR13 | A standalone Button paints the shadow token for its `elevation`. Inside a ButtonGroup it paints no shadow and reflects `data-elevation="none"`, whatever `elevation` says.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `family:buttons` FR8–FR10; current source and tests                                  |
 | FR14 | The root carries `astryx-button` and reflects the effective `data-variant`, `data-size`, and `data-elevation`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `family:buttons` FR10; `architecture:component-theming-surface`; tests               |
-| FR15 | Hover paints the shared interaction overlay on hover-capable pointers, and a press paints the shared pressed overlay through the press controller: at once under a mouse or a pen (`spec:AST-094` FR11's fine-pointer profile) and on FR11's control profile under a finger, fading out on release on the theme's exit motion tokens (`--duration-exit`, `--ease-exit`; `spec:AST-094` FR5). Without a reduced-motion preference, a standalone Button also scales to 0.98 on a mouse press, or while the touch press reads on; under reduced motion it MUST NOT scale (`design:reduced-motion` DR1). All of this paint follows the element's exposed disabled state: a Button that is natively disabled or exposes `aria-disabled="true"` (busy-only, disabled with a tooltip, or a caller's own `aria-disabled`) shows no overlay and no press scale, even when it stays operable. Inside a ButtonGroup the press scale does not apply. Button's hover and press transitions are fast, and instant under reduced motion. Implementation gap: the 0.98 press scale also applies under reduced motion; only its transition becomes instant.                 | Current source and tests; `spec:AST-094` FR11 and DEC-21 for the mouse and pen press |
+| FR15 | Hover paints the shared interaction overlay on hover-capable pointers, and a press paints the shared pressed overlay through the press controller: at once under a mouse or a pen (`spec:AST-094` FR11's fine-pointer profile) and on FR11's control profile under a finger, fading out on release on the theme's exit motion tokens (`--duration-exit`, `--ease-exit`; `spec:AST-094` FR5). Without a reduced-motion preference, a standalone Button also scales to 0.98 on a mouse press, or while the touch press reads on; under reduced motion it MUST NOT scale (`design:reduced-motion` DR1). All of this paint follows the element's exposed disabled state: a Button that is natively disabled or exposes `aria-disabled="true"` (busy-only, disabled with a tooltip, or a caller's own `aria-disabled`) shows no overlay and no press scale, even when it stays operable. Inside a ButtonGroup the press scale does not apply. Button's hover and press transitions are fast, and instant under reduced motion.                                                                                                                                  | Current source and tests; `spec:AST-094` FR11 and DEC-21 for the mouse and pen press |
 | FR16 | The ghost variant carries the edge-compensation marker so an enclosing container can align it flush with its edge; other variants do not.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | Current source; edge-compensation tests                                              |
 | FR17 | `ref`, `className`, `style`, `xstyle`, and other DOM props reach the root element. A caller's own `aria-busy` and `aria-disabled` are kept beside Button's own (either one sets the attribute); a caller `aria-disabled` changes exposure and paint only and does not make the Button inert. The tooltip trigger shares the caller's `ref`, which stays attached across rerenders.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Current source and tests                                                             |
 
@@ -270,7 +271,7 @@ part, so this record carries no anatomy-theming map.
 | FR14 (per variant)           | Evidence gap: `data-variant` is asserted for `secondary` only                                                                                                                                                                        | Other variants                                                      | —                                                                                                                                                                             | `audit:Button/theming`       |
 | FR15                         | `Button.test.tsx` touch pressed-state suite                                                                                                                                                                                          | Touch press on and fading                                           | Losing the touch press arm or its release fade fails.                                                                                                                         | `audit:Button/behavior`      |
 | FR15 (disabled paint)        | `pressFeedback.test.ts` "paints nothing on a disabled surface, and does not light the row around it" for the touch press. Evidence gap: no test of the hover and pressed overlays or the mouse scale on a Button exposed as disabled | Native disabled; `aria-disabled`                                    | A disabled surface that takes the touch press fails.                                                                                                                          | `audit:Button/behavior`      |
-| FR15 (reduced motion)        | Evidence gap: no test presses a Button under `prefers-reduced-motion: reduce`; the shipped scale fails this clause (Current-state impact)                                                                                            | Mouse press; touch press                                            | A computed transform other than `none` or `scale(1)` during the press.                                                                                                        | `audit:Button/behavior`      |
+| FR15 (reduced motion)        | `ReducedMotionPress.a11y.chromium.spec.ts` ("a pressed button never scales under reduced motion, with a mouse or a finger (DR1)")                                                                                                    | Mouse press; touch press                                            | A computed transform other than `none` or `scale(1)` during the press.                                                                                                        | `audit:Button/behavior`      |
 | FR15 (hover and mouse scale) | Evidence gap: no test asserts the hover overlay or the 0.98 mouse-press scale                                                                                                                                                        | Hover; mouse press, standalone and grouped                          | —                                                                                                                                                                             | `audit:Button/behavior`      |
 | FR16                         | `edgeCompensation.test.tsx` Button data-attribute suite                                                                                                                                                                              | Ghost and primary                                                   | A ghost Button without the marker, or a primary Button with it, fails.                                                                                                        | `audit:Button/layout`        |
 | FR17                         | `Button.test.tsx` ref suites and the caller `aria-disabled`/`aria-busy` case                                                                                                                                                         | Initial render and rerender; caller `aria-busy` and `aria-disabled` | A dropped or detached ref, or a dropped caller `aria-busy` or `aria-disabled`, fails. Evidence gap: no test asserts that a caller `aria-disabled` leaves the Button operable. | `audit:Button/behavior`      |
@@ -302,9 +303,6 @@ part, so this record carries no anatomy-theming map.
 - **Spinner fade under reduced motion (FR8).** With a fine pointer the Spinner
   still fades in over the fast duration when the person prefers reduced motion,
   against `design:reduced-motion` DR3.
-- **Press scale under reduced motion (FR15).** A standalone Button still scales
-  to 0.98 on a press when the person prefers reduced motion, against
-  `design:reduced-motion` DR1.
 - **Self-colored end content while loading (FR8).** A Badge or other content
   that paints its own colors stays visible beside the Spinner.
 
diff --git a/docs/specs/components/ClickableCard/ClickableCard.spec.md b/docs/specs/components/ClickableCard/ClickableCard.spec.md
index 4996d05bf1bf4..459cba23d7a23 100644
--- a/docs/specs/components/ClickableCard/ClickableCard.spec.md
+++ b/docs/specs/components/ClickableCard/ClickableCard.spec.md
@@ -26,6 +26,7 @@ verified_by:
     packages/core/src/Button/__tests__/Button.a11y.test.tsx,
     packages/core/src/Button/__tests__/Button.a11y.chromium.spec.ts,
     packages/core/src/__tests__/CardPress.a11y.chromium.spec.ts,
+    packages/core/src/__tests__/ReducedMotionPress.a11y.chromium.spec.ts,
     packages/core/src/hooks/useClickableContainer.test.tsx,
     packages/core/src/theme/themingTargets.test.ts,
     apps/storybook/stories/ClickableCard.stories.tsx,
@@ -55,10 +56,10 @@ system_specs: [spec:AST-005, spec:AST-009, spec:AST-085]
 | Public contract         | A Card with a required `label` and either `onClick` (action) or `href` (navigation), plus `isDisabled` and Card's padding, variant, elevation, and size inputs. The card is built on `useClickableContainer`, which returns `onPointerDown`, which a container spreads so a touch press that starts on a nested interactive element shows no pressed state (FR5). |
 | Behavior                | A visually hidden native button or link owns the card's action; the whole card surface activates it, while nested controls and selected text keep their own outcomes.                                                                                                                                                                                             |
 | End-user impact         | People can activate a card from anywhere on it, by pointer or keyboard, and a disabled card stays reachable and announced while doing nothing.                                                                                                                                                                                                                    |
-| Builder impact          | None; the record describes shipped behavior.                                                                                                                                                                                                                                                                                                                      |
-| Compatibility/readiness | Released behavior recorded as current; no API, default, or output changes. Two implementation gaps are listed under Current-state impact.                                                                                                                                                                                                                         |
+| Builder impact          | A theme's exit duration and easing set the touch press release (FR5); no API changes.                                                                                                                                                                                                                                                                             |
+| Compatibility/readiness | No API changes; the touch press release changes (FR5, `spec:AST-094` FR5). Two implementation gaps are listed under Current-state impact.                                                                                                                                                                                                                         |
 | Review checks           | Reject a live destination while disabled, duplicate activation, activation from a nested control or selected text, a destination that skips the shared decision, or lost focus paint.                                                                                                                                                                             |
-| Governing rules         | `family:navigation-destinations/FR1,FR3–FR5`; `architecture:interaction-modality/INV2–INV5`; `architecture:public-component-api/INV5–INV8`; `spec:AST-085` FR1, FR2, FR5, FR6.                                                                                                                                                                                    |
+| Governing rules         | `family:navigation-destinations/FR1,FR3–FR5`; `architecture:interaction-modality/INV2–INV5`; `architecture:public-component-api/INV5–INV8`; `spec:AST-085` FR1, FR2, FR5, FR6; `component:ClickableCard/FR5` (the touch press release); `spec:AST-094/FR5` (the press release's exit tokens).                                                                     |
 
 This table is a review projection; the body below is authoritative.
 
@@ -69,9 +70,11 @@ without taking activation away from the interactive content inside it.
 
 ## Compatibility and migration
 
-- Released default preserved: `yes`
-- Compatibility class: records shipped behavior; no public prop, default,
-  DOM, target, or styling output changes
+- Released default preserved: `no` for the touch press release: it fades on
+  the theme's exit duration and easing, as FR5 and `spec:AST-094` FR5. A
+  mouse press keeps the card's desktop press styling.
+- Compatibility class: nonbreaking behavior change; no public prop, default,
+  DOM, or target changes
 - Controlled/uncontrolled behavior: not applicable
 - Migration decision: none
 
@@ -118,14 +121,14 @@ Consumer migration instructions belong in consumer docs and release notes.
 
 ## Behavioral and layout contract
 
-| ID  | Invariant                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Basis                                                                   |
-| --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
-| FR1 | The root is Card's `div`. With `href`, a visually hidden native link holds the destination and `target`; otherwise a visually hidden `button type="button"` calls `onClick`. `label` names that control, and the hidden control is the card's tab stop.                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | Current source and tests                                                |
-| FR2 | A primary-button press on the card surface calls `onClick` once with the card as `currentTarget`, then performs an accepted navigation unless the callback cancels it. A middle press on the surface of a card given `href` opens an accepted destination in a new tab without calling `onClick`. A press inside a nested interactive descendant, inside an open Tooltip or HoverCard surface (`component:Tooltip` FR11), or one that ends a text selection, does not activate the card. Activating the hidden button of an action card calls `onClick` once; activating the hidden link navigates without calling `onClick`.                                                                                                | Current source and tests; `architecture:public-component-api` INV7      |
-| FR3 | Plain, new-tab, modified, middle-click, and surface-delegated navigation use the shared destination decision; a blocked destination does not navigate.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `family:navigation-destinations` FR1, FR3–FR5                           |
-| FR4 | `isDisabled` keeps the hidden control focusable with `aria-disabled="true"`; Enter, Space, and clicks on it do nothing. A disabled link keeps its link role and name but has no `href` or `target`. The control stays focusable and announced (`spec:AST-085` FR1, FR2, FR5); the card's own click and mouseup handling and the caller's `onMouseUp` are removed, other caller event props still reach the root, and the surface shows no hover or pressed paint (`spec:AST-085` FR6), and renders at half opacity. The disabled state is reflected on the owning target (`architecture:component-theming-surface` INV6). Implementation gap: the `clickable-card` target reflects no disabled state (Current-state impact). | Current source and tests                                                |
-| FR5 | While enabled, the root paints the shared hover overlay under a hover-capable pointer and the pressed overlay for mouse and touch presses that would activate the card; a touch press that starts on a nested interactive element shows no pressed paint, since it does not activate the card (the counterpart of FR2's activation rule), while a mouse press there keeps the `:active` paint, and a bordered card's border responds to hover. Keyboard focus on the hidden control shows the shared focus outline on the root.                                                                                                                                                                                              | Current source, stories, and `architecture:interaction-modality`        |
-| FR6 | The root carries the `clickable-card` target reflecting `variant` beside Card's target. `ref` reaches the root; supported DOM, ARIA, data, and event props reach it; a caller `onMouseUp` runs after the card's own; `xstyle`, `className`, and `style` compose after the component styles.                                                                                                                                                                                                                                                                                                                                                                                                                                  | Current source and tests; `architecture:public-component-api` INV5–INV8 |
+| ID  | Invariant                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | Basis                                                                   |
+| --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| FR1 | The root is Card's `div`. With `href`, a visually hidden native link holds the destination and `target`; otherwise a visually hidden `button type="button"` calls `onClick`. `label` names that control, and the hidden control is the card's tab stop.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Current source and tests                                                |
+| FR2 | A primary-button press on the card surface calls `onClick` once with the card as `currentTarget`, then performs an accepted navigation unless the callback cancels it. A middle press on the surface of a card given `href` opens an accepted destination in a new tab without calling `onClick`. A press inside a nested interactive descendant, inside an open Tooltip or HoverCard surface (`component:Tooltip` FR11), or one that ends a text selection, does not activate the card. Activating the hidden button of an action card calls `onClick` once; activating the hidden link navigates without calling `onClick`.                                                                                                                                    | Current source and tests; `architecture:public-component-api` INV7      |
+| FR3 | Plain, new-tab, modified, middle-click, and surface-delegated navigation use the shared destination decision; a blocked destination does not navigate.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `family:navigation-destinations` FR1, FR3–FR5                           |
+| FR4 | `isDisabled` keeps the hidden control focusable with `aria-disabled="true"`; Enter, Space, and clicks on it do nothing. A disabled link keeps its link role and name but has no `href` or `target`. The control stays focusable and announced (`spec:AST-085` FR1, FR2, FR5); the card's own click and mouseup handling and the caller's `onMouseUp` are removed, other caller event props still reach the root, and the surface shows no hover or pressed paint (`spec:AST-085` FR6), and renders at half opacity. The disabled state is reflected on the owning target (`architecture:component-theming-surface` INV6). Implementation gap: the `clickable-card` target reflects no disabled state (Current-state impact).                                     | Current source and tests                                                |
+| FR5 | While enabled, the root paints the shared hover overlay under a hover-capable pointer and the pressed overlay for mouse and touch presses that would activate the card; a touch press that starts on a nested interactive element shows no pressed paint, since it does not activate the card (the counterpart of FR2's activation rule), while a mouse press there keeps the `:active` paint, and a bordered card's border responds to hover. A touch press shows at once. Under the touch presentation, its release fades on the theme's exit motion tokens (`--duration-exit`, `--ease-exit`), per `spec:AST-094` FR5; a mouse press keeps the card's desktop press styling. Keyboard focus on the hidden control shows the shared focus outline on the root. | Current source, stories, and `architecture:interaction-modality`        |
+| FR6 | The root carries the `clickable-card` target reflecting `variant` beside Card's target. `ref` reaches the root; supported DOM, ARIA, data, and event props reach it; a caller `onMouseUp` runs after the card's own; `xstyle`, `className`, and `style` compose after the component styles.                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | Current source and tests; `architecture:public-component-api` INV5–INV8 |
 
 ### Allowed variation
 
@@ -225,7 +228,7 @@ Consumer migration instructions belong in consumer docs and release notes.
 
 ## Decision log
 
-None recorded. The record describes shipped behavior.
+None recorded.
 
 ## Open questions
 
diff --git a/docs/specs/components/SelectableCard/SelectableCard.spec.md b/docs/specs/components/SelectableCard/SelectableCard.spec.md
index 83d3d70d9787b..2bf43ee9063f3 100644
--- a/docs/specs/components/SelectableCard/SelectableCard.spec.md
+++ b/docs/specs/components/SelectableCard/SelectableCard.spec.md
@@ -15,6 +15,7 @@ verified_by:
     packages/core/src/CheckboxInput/__tests__/Checkbox.a11y.test.tsx,
     packages/core/src/CheckboxInput/__tests__/Checkbox.a11y.chromium.spec.ts,
     packages/core/src/__tests__/CardPress.a11y.chromium.spec.ts,
+    packages/core/src/__tests__/ReducedMotionPress.a11y.chromium.spec.ts,
     .github/visual-baseline/manifest.json,
     packages/core/src/SelectableCard/SelectableCard.test.tsx,
     packages/core/src/theme/themingTargets.test.ts,
@@ -38,15 +39,15 @@ system_specs: [spec:AST-009, spec:AST-020, spec:AST-085]
 
 ## Contract at a glance
 
-| Area                    | Contract                                                                                                                                                                                                                        |
-| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Public contract         | A Card that toggles a controlled `isSelected` through `onChange`, named by a required `label`, with `isDisabled` and Card's `variant`, `elevation`, `padding`, and sizing.                                                      |
-| Behavior                | A visually hidden native checkbox carries the role, name, and checked state; the whole surface toggles; selection draws an inset ring without moving layout.                                                                    |
-| End-user impact         | Screen-reader users hear a named checkbox and its state; pointer users click anywhere on the card; disabled cards stay discoverable by keyboard.                                                                                |
-| Builder impact          | At the next minor, a click inside an open layer inside the card (e.g. a Tooltip or HoverCard surface) no longer reaches the caller's `onClick`; a handler that needs those presses moves to the layer content.                  |
-| Compatibility/readiness | No API or default changes. One `[breaking]` behavior change is staged for the next minor and not built: `onClick` stops receiving clicks inside an open layer. Three implementation gaps are listed under Current-state impact. |
-| Review checks           | Reject a toggle that fires twice for one press, a disabled card that toggles or leaves the tab order, a ring that shifts layout, or a nested control that toggles the card.                                                     |
-| Governing rules         | `spec:AST-085/FR1,FR2,FR5,FR6`; `spec:AST-020/FR9`; `architecture:interaction-modality/INV3`; `architecture:component-theming-surface/INV6,INV14`; `architecture:public-component-api/INV5,INV6,INV7,INV8`.                     |
+| Area                    | Contract                                                                                                                                                                                                                                                                                                                    |
+| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Public contract         | A Card that toggles a controlled `isSelected` through `onChange`, named by a required `label`, with `isDisabled` and Card's `variant`, `elevation`, `padding`, and sizing.                                                                                                                                                  |
+| Behavior                | A visually hidden native checkbox carries the role, name, and checked state; the whole surface toggles; selection draws an inset ring without moving layout.                                                                                                                                                                |
+| End-user impact         | Screen-reader users hear a named checkbox and its state; pointer users click anywhere on the card; disabled cards stay discoverable by keyboard.                                                                                                                                                                            |
+| Builder impact          | At the next minor, a click inside an open layer inside the card (e.g. a Tooltip or HoverCard surface) no longer reaches the caller's `onClick`; a handler that needs those presses moves to the layer content. A theme's exit duration and easing set the touch press release (FR4).                                        |
+| Compatibility/readiness | No API changes. One `[breaking]` behavior change is staged for the next minor and not built: `onClick` stops receiving clicks inside an open layer. Three implementation gaps are listed under Current-state impact. The touch press release changes (FR4, `spec:AST-094` FR5).                                             |
+| Review checks           | Reject a toggle that fires twice for one press, a disabled card that toggles or leaves the tab order, a ring that shifts layout, or a nested control that toggles the card.                                                                                                                                                 |
+| Governing rules         | `spec:AST-085/FR1,FR2,FR5,FR6`; `spec:AST-020/FR9`; `architecture:interaction-modality/INV3`; `architecture:component-theming-surface/INV6,INV14`; `architecture:public-component-api/INV5,INV6,INV7,INV8`; `component:SelectableCard/FR4` (the touch press release); `spec:AST-094/FR5` (the press release's exit tokens). |
 
 This table is a review projection; the body below is authoritative.
 
@@ -58,10 +59,13 @@ toggling, and the selection ring; the caller owns the selection state.
 
 ## Compatibility and migration
 
-- Released default preserved: `yes` until the next minor; then `no` for the
-  caller `onClick` (FR2)
-- Compatibility class: no public prop, default, DOM, or styling output
-  changes; one behavior change staged as `[breaking]` for the next minor
+- Released default preserved: `no` for the touch press release: it fades on
+  the theme's exit duration and easing, as FR4 and `spec:AST-094` FR5. A
+  mouse press keeps the card's desktop press styling.
+  Otherwise `yes` until the next minor; then `no` for the caller `onClick`
+  (FR2).
+- Compatibility class: no public prop, default or DOM changes; the touch
+  press release is a nonbreaking behavior change; one behavior change staged as `[breaking]` for the next minor
   (`CLN-0026`): a click inside an open layer inside the card (e.g. a Tooltip
   or HoverCard surface) stops at the layer root and no longer reaches the
   caller's `onClick` (`architecture:layer-runtime` INV17). Until then the
@@ -141,14 +145,14 @@ Consumer migration instructions belong in consumer docs and release notes.
 
 ## Behavioral and layout contract
 
-| ID  | Invariant                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Basis                    |
-| --- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
-| FR1 | SelectableCard renders `component:Card` with the given `variant`, `elevation`, `padding`, and sizing. The root also carries the `selectable-card` target reflecting `variant` and `selected`, and the first child is a visually hidden native `input type="checkbox"` named by `label` with `checked` equal to `isSelected`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Current source and tests |
-| FR2 | While enabled, a click on the card surface, a click or Space on the checkbox, or Enter on the checkbox calls `onChange(!isSelected)` exactly once. A click that belongs to nested interactive content, an open Tooltip or HoverCard surface (`component:Tooltip` FR11), or selected text does not toggle. A caller `onClick` runs after the toggle for a surface click, before it for a click or Space on the checkbox, and not at all for Enter; it also runs for clicks that do not toggle, including a click inside an open Tooltip or HoverCard surface. At the next minor, staged as `[breaking]`, a click inside an open layer stops at the layer root and the caller `onClick` no longer receives it (`architecture:layer-runtime` INV17); implementation gap: not built. A caller `onMouseUp` runs after the card's own handling. | Current source and tests |
-| FR3 | Selection adds a 2px inset ring through Card's ring variable, so layout does not move, and composes with any elevation shadow. `default`, `transparent`, and `muted` ring in `--color-accent`; each palette variant rings in its `--color-border-<name>`; a theme-added variant rings in `--selectable-card-ring-color`. Selection also colors the border in the ring color where Card draws one, which is only the `default` variant.                                                                                                                                                                                                                                                                                                                                                                                                    | Current source and tests |
-| FR4 | While enabled, the surface paints the shared hover overlay under a hover-capable pointer and the pressed overlay for mouse and touch presses; a touch press that starts on a nested interactive element shows no pressed paint, since it does not activate the card, while a mouse press there keeps the `:active` paint. Keyboard focus on the hidden checkbox shows one indicator on the card root (`architecture:interaction-modality` INV3). Implementation gap: the root outlines while any descendant has `:focus-visible`, so focusing a nested control draws both the card outline and the control's own (Current-state impact).                                                                                                                                                                                                  | Current source and tests |
-| FR5 | `isDisabled` dims the card to half opacity, removes the card's own click and mouseup handling and the caller's `onClick` and `onMouseUp` (other caller event props still reach the root) and the hover and pressed overlays (`spec:AST-085` FR6), and keeps the checkbox focusable with `aria-disabled="true"`; no click, Space, or Enter calls `onChange`. The disabled state is reflected on the owning target (`architecture:component-theming-surface` INV6). Implementation gap: the `selectable-card` target reflects `variant` and `selected` but not the disabled state (Current-state impact).                                                                                                                                                                                                                                   | Current source and tests |
-| FR6 | `ref` reaches the Card root. Supported DOM, ARIA, data, and event props reach the root; `xstyle`, `className`, and `style` merge after the component's interactive styles.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Current source and tests |
+| ID  | Invariant                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Basis                    |
+| --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
+| FR1 | SelectableCard renders `component:Card` with the given `variant`, `elevation`, `padding`, and sizing. The root also carries the `selectable-card` target reflecting `variant` and `selected`, and the first child is a visually hidden native `input type="checkbox"` named by `label` with `checked` equal to `isSelected`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Current source and tests |
+| FR2 | While enabled, a click on the card surface, a click or Space on the checkbox, or Enter on the checkbox calls `onChange(!isSelected)` exactly once. A click that belongs to nested interactive content, an open Tooltip or HoverCard surface (`component:Tooltip` FR11), or selected text does not toggle. A caller `onClick` runs after the toggle for a surface click, before it for a click or Space on the checkbox, and not at all for Enter; it also runs for clicks that do not toggle, including a click inside an open Tooltip or HoverCard surface. At the next minor, staged as `[breaking]`, a click inside an open layer stops at the layer root and the caller `onClick` no longer receives it (`architecture:layer-runtime` INV17); implementation gap: not built. A caller `onMouseUp` runs after the card's own handling.                                 | Current source and tests |
+| FR3 | Selection adds a 2px inset ring through Card's ring variable, so layout does not move, and composes with any elevation shadow. `default`, `transparent`, and `muted` ring in `--color-accent`; each palette variant rings in its `--color-border-<name>`; a theme-added variant rings in `--selectable-card-ring-color`. Selection also colors the border in the ring color where Card draws one, which is only the `default` variant.                                                                                                                                                                                                                                                                                                                                                                                                                                    | Current source and tests |
+| FR4 | While enabled, the surface paints the shared hover overlay under a hover-capable pointer and the pressed overlay for mouse and touch presses; a touch press that starts on a nested interactive element shows no pressed paint, since it does not activate the card, while a mouse press there keeps the `:active` paint. A touch press shows at once. Under the touch presentation, its release fades on the theme's exit motion tokens (`--duration-exit`, `--ease-exit`), per `spec:AST-094` FR5; a mouse press keeps the card's desktop press styling. Keyboard focus on the hidden checkbox shows one indicator on the card root (`architecture:interaction-modality` INV3). Implementation gap: the root outlines while any descendant has `:focus-visible`, so focusing a nested control draws both the card outline and the control's own (Current-state impact). | Current source and tests |
+| FR5 | `isDisabled` dims the card to half opacity, removes the card's own click and mouseup handling and the caller's `onClick` and `onMouseUp` (other caller event props still reach the root) and the hover and pressed overlays (`spec:AST-085` FR6), and keeps the checkbox focusable with `aria-disabled="true"`; no click, Space, or Enter calls `onChange`. The disabled state is reflected on the owning target (`architecture:component-theming-surface` INV6). Implementation gap: the `selectable-card` target reflects `variant` and `selected` but not the disabled state (Current-state impact).                                                                                                                                                                                                                                                                   | Current source and tests |
+| FR6 | `ref` reaches the Card root. Supported DOM, ARIA, data, and event props reach the root; `xstyle`, `className`, and `style` merge after the component's interactive styles.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Current source and tests |
 
 ### Allowed variation
 
@@ -250,7 +254,7 @@ Consumer migration instructions belong in consumer docs and release notes.
 
 ## Decision log
 
-None recorded. The record describes shipped behavior.
+None recorded.
 
 ## Open questions
 
diff --git a/docs/specs/components/Thumbnail/Thumbnail.spec.md b/docs/specs/components/Thumbnail/Thumbnail.spec.md
index 6546fd3469a65..9cc0c209c2b11 100644
--- a/docs/specs/components/Thumbnail/Thumbnail.spec.md
+++ b/docs/specs/components/Thumbnail/Thumbnail.spec.md
@@ -13,6 +13,7 @@ review_triggers: [public-api, behavior, layout, theming, accessibility]
 verified_by:
   [
     packages/core/src/Thumbnail/Thumbnail.test.tsx,
+    packages/core/src/__tests__/ReducedMotionPress.a11y.chromium.spec.ts,
     packages/core/src/theme/themingTargets.test.ts,
     apps/storybook/stories/Thumbnail.stories.tsx,
     .github/visual-baseline/manifest.json,
@@ -35,15 +36,15 @@ system_specs: [spec:AST-009, spec:AST-085, spec:AST-086]
 
 ## Contract at a glance
 
-| Area                    | Contract                                                                                                                                                                             |
-| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| Public contract         | A 64px square image preview with `src`, `alt`, `label`, `isLoading`, `isDisabled`, an optional `onClick` open action, and an optional `onRemove` action revealed per `showRemoveOn`. |
-| Behavior                | The preview shows a skeleton, the image, an upload overlay, or a placeholder; it is a named group whose open and remove actions are separate buttons.                                |
-| End-user impact         | Screen-reader users hear the file and image in one group name and reach "Open …" and "Remove …" buttons; keyboard and touch users can always reach a hover-revealed remove button.   |
-| Builder impact          | None; the record describes shipped behavior.                                                                                                                                         |
-| Compatibility/readiness | Released behavior recorded as current; no API, default, or output changes. Six implementation gaps are listed under Current-state impact.                                            |
-| Review checks           | Reject a hover-only remove button that leaves the tab order, a name on a roleless element, an image exposed without `alt`, or a busy spinner that announces itself.                  |
-| Governing rules         | `spec:AST-085/FR1`; `spec:AST-086/FR8`; WCAG 2.2 2.5.8; `architecture:public-component-api/INV5,INV6,INV8`; `architecture:internationalization/INV1a`.                               |
+| Area                    | Contract                                                                                                                                                                                                                                                          |
+| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Public contract         | A 64px square image preview with `src`, `alt`, `label`, `isLoading`, `isDisabled`, an optional `onClick` open action, and an optional `onRemove` action revealed per `showRemoveOn`.                                                                              |
+| Behavior                | The preview shows a skeleton, the image, an upload overlay, or a placeholder; it is a named group whose open and remove actions are separate buttons.                                                                                                             |
+| End-user impact         | Screen-reader users hear the file and image in one group name and reach "Open …" and "Remove …" buttons; keyboard and touch users can always reach a hover-revealed remove button.                                                                                |
+| Builder impact          | A theme's exit duration and easing set the touch press release (FR4); no API changes.                                                                                                                                                                             |
+| Compatibility/readiness | No API changes; the touch press release changes (FR4, `spec:AST-094` FR5). Six implementation gaps are listed under Current-state impact.                                                                                                                         |
+| Review checks           | Reject a hover-only remove button that leaves the tab order, a name on a roleless element, an image exposed without `alt`, or a busy spinner that announces itself.                                                                                               |
+| Governing rules         | `spec:AST-085/FR1`; `spec:AST-086/FR8`; WCAG 2.2 2.5.8; `architecture:public-component-api/INV5,INV6,INV8`; `architecture:internationalization/INV1a`; `component:Thumbnail/FR4` (the touch press release); `spec:AST-094/FR5` (the press release's exit tokens). |
 
 This table is a review projection; the body below is authoritative.
 
@@ -56,9 +57,11 @@ action.
 
 ## Compatibility and migration
 
-- Released default preserved: `yes`
-- Compatibility class: records shipped behavior; no public prop, default, DOM,
-  or styling output changes
+- Released default preserved: `no` for the touch press release: it fades on
+  the theme's exit duration and easing, as FR4 and `spec:AST-094` FR5. A
+  mouse press keeps the card's desktop press styling.
+- Compatibility class: nonbreaking behavior change; no public prop, default
+  or DOM changes
 - Controlled/uncontrolled behavior: not applicable; image-failure tracking is
   internal state
 - Migration decision: none
@@ -128,7 +131,7 @@ Consumer migration instructions belong in consumer docs and release notes.
 | FR1 | The root is a 64px-wide, non-shrinking, isolated inline-flex column carrying the `thumbnail` target. It holds a square image container with `--radius-element` corners, clipped overflow, and a `--color-neutral` background.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Current source and tests |
 | FR2 | `isLoading` without `src` shows a Skeleton; `isLoading` with `src` shows the image, or the placeholder glyph if that `src` failed, under an overlay-colored upload scrim holding a small on-media Spinner; `src` without loading shows the image, cover-fitted, with a 1px inset border; no `src`, or a `src` that failed to load, shows a secondary-colored image placeholder glyph. A failure is tracked per `src`, so a changed `src` is tried again.                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Current source and tests |
 | FR3 | The root is `role="group"` named "{label} — {alt}" when both exist, else `label`, else `alt`, else the translated "Thumbnail"; a caller `aria-label` or `aria-labelledby` reaches the root after it and names the group instead. A joined name is one catalog message (`architecture:internationalization` INV1a); implementation gap: "{label} — {alt}" is joined at the call site (Current-state impact). A defined `label` also wraps the thumbnail in a Tooltip showing it, which also sets the label as the group's accessible description; `label` is never rendered inline. A tooltip can be revealed from the keyboard (WCAG 2.2 2.1.1). Implementation gap: the tooltip attaches to the non-focusable root and opens on hover and touch only; focusing the open or remove button does not show it (Current-state impact). In development, a `src` with no `alt`, `label`, `aria-label`, or `aria-labelledby` logs a warning. | Current source and tests |
-| FR4 | With `onClick`, a full-size `button type="button"` named "Open {name}" wraps the image content and calls `onClick`; hover and pressed overlays show for mouse and touch. While loading or disabled, Open stays mounted and inert, so a focused Open keeps focus (`spec:AST-085` FR1, FR4, FR6). Each focus move shows one indicator (`architecture:interaction-modality` INV3): the image container draws the shared focus-visible outline for the open button. Implementation gap: both the open and the remove button keep their own focus ring inside the container outline, so focusing either draws two indicators (Current-state impact).                                                                                                                                                                                                                                                                                       | Current source and tests |
+| FR4 | With `onClick`, a full-size `button type="button"` named "Open {name}" wraps the image content and calls `onClick`; hover and pressed overlays show for mouse and touch. A touch press shows at once. Under the touch presentation, its release fades on the theme's exit motion tokens (`--duration-exit`, `--ease-exit`), per `spec:AST-094` FR5; a mouse press keeps the card's desktop press styling. While loading or disabled, Open stays mounted and inert, so a focused Open keeps focus (`spec:AST-085` FR1, FR4, FR6). Each focus move shows one indicator (`architecture:interaction-modality` INV3): the image container draws the shared focus-visible outline for the open button. Implementation gap: both the open and the remove button keep their own focus ring inside the container outline, so focusing either draws two indicators (Current-state impact).                                                      | Current source and tests |
 | FR5 | With `onRemove`, a small icon-only secondary Button named "Remove {name}" sits `--spacing-1` from the top and inline-end edges above the image, painted with the overlay scrim and on-dark icon; a click stops propagation before `onRemove`, so it never opens the thumbnail. With `showRemoveOn="hover"` the button is visually hidden at rest by opacity, stays in the tab order and accessibility tree, and is revealed on container hover, on focus within, and always on touch devices. While disabled, Remove stays mounted and inert, so a focused Remove keeps focus (`spec:AST-085` FR1, FR4).                                                                                                                                                                                                                                                                                                                              | Current source and tests |
 | FR6 | `isDisabled` dims the root to half opacity with pointer events off. Its actions stay mounted, focusable, and announced as disabled (`spec:AST-085` FR1, FR4, FR5), and the disabled state is reflected on the owning target (`architecture:component-theming-surface` INV6). Implementation gap: the `thumbnail` target reflects no state (Current-state impact).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Current source and tests |
 | FR7 | `ref` reaches the root. Supported DOM, ARIA, data, and event props reach the root; `data-testid` reaches the root; `xstyle`, `className`, and `style` merge in that order after component styles. A caller `aria-label` or `aria-labelledby` names the group (FR3). The group role is component-owned semantics (`architecture:public-component-api` INV5). Implementation gap: caller props spread after the role, so a caller `role` replaces it (Current-state impact).                                                                                                                                                                                                                                                                                                                                                                                                                                                            | Current source and tests |
@@ -232,7 +235,7 @@ declared.
 
 ## Decision log
 
-None recorded. The record describes shipped behavior.
+None recorded.
 
 ## Open questions
 
diff --git a/packages/core/src/Button/Button.tsx b/packages/core/src/Button/Button.tsx
index 4ad53ceff4141..10d4d0069fe40 100644
--- a/packages/core/src/Button/Button.tsx
+++ b/packages/core/src/Button/Button.tsx
@@ -144,8 +144,20 @@ const styles = stylex.create({
       ':active:where(:not(:disabled,[aria-disabled="true"]))': {
         default: 'scale(0.98)',
         '@media (pointer: coarse)': 'scale(1)',
+        // Under reduced motion a press never scales the button. The overlay
+        // alone shows the press.
+        '@media (prefers-reduced-motion: reduce) and (pointer: coarse)':
+          'scale(1)',
+        '@media (prefers-reduced-motion: reduce) and (not (pointer: coarse))':
+          'scale(1)',
+      },
+      [PRESSED_ON]: {
+        default: 'scale(0.98)',
+        '@media (prefers-reduced-motion: reduce) and (pointer: coarse)':
+          'scale(1)',
+        '@media (prefers-reduced-motion: reduce) and (not (pointer: coarse))':
+          'scale(1)',
       },
-      [PRESSED_ON]: 'scale(0.98)',
     },
   },
   // A tracked action's own `:active` image paints nothing: the tracker paints
@@ -157,7 +169,13 @@ const styles = stylex.create({
   pressableTracked: {
     transform: {
       default: 'scale(1)',
-      [PRESSED_ON]: 'scale(0.98)',
+      [PRESSED_ON]: {
+        default: 'scale(0.98)',
+        '@media (prefers-reduced-motion: reduce) and (pointer: coarse)':
+          'scale(1)',
+        '@media (prefers-reduced-motion: reduce) and (not (pointer: coarse))':
+          'scale(1)',
+      },
     },
   },
   inactive: {
diff --git a/packages/core/src/ClickableCard/ClickableCard.tsx b/packages/core/src/ClickableCard/ClickableCard.tsx
index bc12e6b14f2de..9966915ba19b0 100644
--- a/packages/core/src/ClickableCard/ClickableCard.tsx
+++ b/packages/core/src/ClickableCard/ClickableCard.tsx
@@ -126,9 +126,27 @@ const styles = stylex.create({
         default: 'background-color',
         [PRESSED_ON]: 'none',
         [PRESSED_FADING]: 'none',
+        // Under reduced motion a colour changes at once. Only opacity may
+        // still fade on a touch screen.
+        '@media (prefers-reduced-motion: reduce) and (pointer: coarse)':
+          'opacity',
+      },
+      transitionDuration: {
+        default: durationVars['--duration-fast'],
+        // Under reduced motion a fine pointer gets no transition. A touch
+        // screen's fade keeps the exit tokens, within 200 ms.
+        '@media (prefers-reduced-motion: reduce) and (not (pointer: coarse))':
+          '0s',
+        // The 200 ms bound copies reducedMotionFadeConsts.duration. That
+        // module is internal, and a swizzled component imports only exported
+        // paths. reducedMotionValues.test.ts keeps the copies equal.
+        '@media (prefers-reduced-motion: reduce) and (pointer: coarse)': `min(${durationVars['--duration-exit']}, 200ms)`,
+      },
+      transitionTimingFunction: {
+        default: easeVars['--ease-standard'],
+        '@media (prefers-reduced-motion: reduce) and (pointer: coarse)':
+          easeVars['--ease-exit'],
       },
-      transitionDuration: durationVars['--duration-fast'],
-      transitionTimingFunction: easeVars['--ease-standard'],
       // While the controller paints, the colour yields to the image: a
       // touchscreen beside a fine pointer still matches `:active` under a
       // finger, and the press would otherwise paint twice.
@@ -168,9 +186,26 @@ const styles = stylex.create({
     paddingInlineEnd: `calc(var(--container-padding-inline-end) - ${borderVars['--border-width']})`,
     paddingBlockStart: `calc(var(--container-padding-block-start) - ${borderVars['--border-width']})`,
     paddingBlockEnd: `calc(var(--container-padding-block-end) - ${borderVars['--border-width']})`,
-    transitionProperty: 'border-color',
-    transitionDuration: durationVars['--duration-fast'],
-    transitionTimingFunction: easeVars['--ease-standard'],
+    transitionProperty: {
+      default: 'border-color',
+      // Under reduced motion the border's colour changes at once.
+      '@media (prefers-reduced-motion: reduce) and (pointer: coarse)':
+        'opacity',
+    },
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      // Under reduced motion a fine pointer gets no transition. A touch
+      // screen's opacity fade, such as a disabled card's dimming, takes
+      // 200 ms at most.
+      '@media (prefers-reduced-motion: reduce) and (not (pointer: coarse))':
+        '0s',
+      '@media (prefers-reduced-motion: reduce) and (pointer: coarse)': `min(${durationVars['--duration-exit']}, 200ms)`,
+    },
+    transitionTimingFunction: {
+      default: easeVars['--ease-standard'],
+      '@media (prefers-reduced-motion: reduce) and (pointer: coarse)':
+        easeVars['--ease-exit'],
+    },
   },
   // Emphasize the bordered variant's border on hover. Guarded by
   // @media (hover: hover) so touch devices don't get a stuck hover state.
diff --git a/packages/core/src/SelectableCard/SelectableCard.tsx b/packages/core/src/SelectableCard/SelectableCard.tsx
index 0f2188f70d396..cd315d95dbc6c 100644
--- a/packages/core/src/SelectableCard/SelectableCard.tsx
+++ b/packages/core/src/SelectableCard/SelectableCard.tsx
@@ -82,9 +82,26 @@ const styles = stylex.create({
       default: 'pointer',
       ':is(:disabled,[aria-disabled="true"])': 'default',
     },
-    transitionProperty: 'box-shadow, border-color',
-    transitionDuration: durationVars['--duration-fast'],
-    transitionTimingFunction: easeVars['--ease-standard'],
+    transitionProperty: {
+      default: 'box-shadow, border-color',
+      // Under reduced motion a selection's ring and border change at once.
+      '@media (prefers-reduced-motion: reduce) and (pointer: coarse)':
+        'opacity',
+    },
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      // Under reduced motion a fine pointer gets no transition. A touch
+      // screen's opacity fade, such as a disabled card's dimming, takes
+      // 200 ms at most.
+      '@media (prefers-reduced-motion: reduce) and (not (pointer: coarse))':
+        '0s',
+      '@media (prefers-reduced-motion: reduce) and (pointer: coarse)': `min(${durationVars['--duration-exit']}, 200ms)`,
+    },
+    transitionTimingFunction: {
+      default: easeVars['--ease-standard'],
+      '@media (prefers-reduced-motion: reduce) and (pointer: coarse)':
+        easeVars['--ease-exit'],
+    },
   },
   // Hover and pressed overlay. Hover is guarded by @media (hover: hover) so
   // touch devices don't show a stuck hover state; the press has two arms,
@@ -130,9 +147,27 @@ const styles = stylex.create({
         default: 'background-color',
         [PRESSED_ON]: 'none',
         [PRESSED_FADING]: 'none',
+        // Under reduced motion a colour changes at once. Only opacity may
+        // still fade on a touch screen.
+        '@media (prefers-reduced-motion: reduce) and (pointer: coarse)':
+          'opacity',
+      },
+      transitionDuration: {
+        default: durationVars['--duration-fast'],
+        // Under reduced motion a fine pointer gets no transition. A touch
+        // screen's fade keeps the exit tokens, within 200 ms.
+        '@media (prefers-reduced-motion: reduce) and (not (pointer: coarse))':
+          '0s',
+        // The 200 ms bound copies reducedMotionFadeConsts.duration. That
+        // module is internal, and a swizzled component imports only exported
+        // paths. reducedMotionValues.test.ts keeps the copies equal.
+        '@media (prefers-reduced-motion: reduce) and (pointer: coarse)': `min(${durationVars['--duration-exit']}, 200ms)`,
+      },
+      transitionTimingFunction: {
+        default: easeVars['--ease-standard'],
+        '@media (prefers-reduced-motion: reduce) and (pointer: coarse)':
+          easeVars['--ease-exit'],
       },
-      transitionDuration: durationVars['--duration-fast'],
-      transitionTimingFunction: easeVars['--ease-standard'],
       // While the controller paints, the colour yields to the image: a
       // touchscreen beside a fine pointer still matches `:active` under a
       // finger, and the press would otherwise paint twice.
diff --git a/packages/core/src/Thumbnail/Thumbnail.tsx b/packages/core/src/Thumbnail/Thumbnail.tsx
index a2fa502e01d02..ae619e9f9b722 100644
--- a/packages/core/src/Thumbnail/Thumbnail.tsx
+++ b/packages/core/src/Thumbnail/Thumbnail.tsx
@@ -228,9 +228,27 @@ const styles = stylex.create({
         default: 'background-color',
         [PRESSED_ON]: 'none',
         [PRESSED_FADING]: 'none',
+        // Under reduced motion a colour changes at once. Only opacity may
+        // still fade on a touch screen.
+        '@media (prefers-reduced-motion: reduce) and (pointer: coarse)':
+          'opacity',
+      },
+      transitionDuration: {
+        default: durationVars['--duration-fast'],
+        // Under reduced motion a fine pointer gets no transition. A touch
+        // screen's fade keeps the exit tokens, within 200 ms.
+        '@media (prefers-reduced-motion: reduce) and (not (pointer: coarse))':
+          '0s',
+        // The 200 ms bound copies reducedMotionFadeConsts.duration. That
+        // module is internal, and a swizzled component imports only exported
+        // paths. reducedMotionValues.test.ts keeps the copies equal.
+        '@media (prefers-reduced-motion: reduce) and (pointer: coarse)': `min(${durationVars['--duration-exit']}, 200ms)`,
+      },
+      transitionTimingFunction: {
+        default: easeVars['--ease-standard'],
+        '@media (prefers-reduced-motion: reduce) and (pointer: coarse)':
+          easeVars['--ease-exit'],
       },
-      transitionDuration: durationVars['--duration-fast'],
-      transitionTimingFunction: easeVars['--ease-standard'],
       // While the controller paints, the colour yields to the image: a
       // touchscreen beside a fine pointer still matches `:active` under a
       // finger, and the press would otherwise paint twice.
diff --git a/packages/core/src/__tests__/ReducedMotionPress.a11y.chromium.spec.ts b/packages/core/src/__tests__/ReducedMotionPress.a11y.chromium.spec.ts
new file mode 100644
index 0000000000000..8cba8834a50c3
--- /dev/null
+++ b/packages/core/src/__tests__/ReducedMotionPress.a11y.chromium.spec.ts
@@ -0,0 +1,459 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y scope core/Button core/ClickableCard core/SelectableCard core/Thumbnail ^packages/core/src/(motion/reducedMotion|utils/interactionOverlay)
+
+/**
+ * @file ReducedMotionPress.a11y.chromium.spec.ts
+ * @input The Button Secondary story and the ClickableCard, SelectableCard
+ *   and Thumbnail stories in a built Storybook. Emulated
+ *   `prefers-reduced-motion: reduce`, and real mouse and touch input through
+ *   CDP.
+ * @output Real-engine proof that Button and the cards follow
+ *   `design:reduced-motion`. A press never scales a button (DR1). With a fine
+ *   primary pointer their state changes are immediate (DR3). On a touch screen
+ *   their colors change at once, and only opacity fades, on the exit tokens
+ *   within 200 ms. A card's press release fades on the exit tokens on every
+ *   pointer, and a mouse's timing is unchanged.
+ * @position Run with `pnpm test:a11y-contract`. Browser layer of the
+ *   reduced-motion arms in Button.tsx and the cards' overlays.
+ */
+
+import {
+  expect,
+  test,
+  type Browser,
+  type Page,
+} from '@astryxdesign/a11y-spec/playwright';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+
+let storybook: StaticServer;
+
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+/** A phone: touch screen, primary pointer coarse. */
+const PHONE = {
+  viewport: {width: 402, height: 714},
+  deviceScaleFactor: 1,
+  isMobile: true,
+  hasTouch: true,
+  reducedMotion: 'reduce',
+} as const;
+/** A desktop: primary pointer fine. */
+const DESKTOP = {
+  viewport: {width: 1024, height: 768},
+  deviceScaleFactor: 1,
+  isMobile: false,
+  hasTouch: false,
+  reducedMotion: 'reduce',
+} as const;
+/** The same desktop and phone with Reduce Motion off. */
+const DESKTOP_MOTION = {...DESKTOP, reducedMotion: 'no-preference'} as const;
+const PHONE_MOTION = {...PHONE, reducedMotion: 'no-preference'} as const;
+type Device =
+  typeof PHONE | typeof DESKTOP | typeof PHONE_MOTION | typeof DESKTOP_MOTION;
+
+const BUTTON = 'core-button--secondary';
+const CARDS = [
+  ['ClickableCard', 'core-clickablecard--with-on-click', 0],
+  // The second card: the first starts selected.
+  ['SelectableCard', 'core-selectablecard--single-select', 1],
+  ['Thumbnail', 'core-thumbnail--clickable', 0],
+] as const;
+const SURFACE = '#storybook-root [data-astryx-pressable]';
+
+async function open(
+  browser: Browser,
+  device: Device,
+  story: string,
+): Promise<{page: Page; close: () => Promise<void>}> {
+  const context = await browser.newContext(device);
+  const page = await context.newPage();
+  // Remote demo media never loads here; the styles under test do not need it.
+  await page.route(
+    url => url.origin !== storybook.origin,
+    async route => route.abort(),
+  );
+  await page.goto(`${storybook.origin}/iframe.html?id=${story}&viewMode=story`);
+  await page.locator(SURFACE).first().waitFor();
+  // Each case runs on the device it claims: a coarse primary pointer for the
+  // phone, a fine one for the desktop. Reduce Motion is as the device sets it.
+  const media = await page.evaluate(() => ({
+    coarse: matchMedia('(pointer: coarse)').matches,
+    reduce: matchMedia('(prefers-reduced-motion: reduce)').matches,
+  }));
+  expect(media).toEqual({
+    coarse: device.hasTouch,
+    reduce: device.reducedMotion === 'reduce',
+  });
+  await page.mouse.move(1, 1);
+  return {page, close: async () => context.close()};
+}
+
+/** The element's transform, as the engine resolved it ('none' or a matrix). */
+async function transformOf(page: Page, index = 0): Promise<string> {
+  return page
+    .locator(SURFACE)
+    .nth(index)
+    .evaluate(element => getComputedStyle(element).transform);
+}
+
+const isIdentity = (transform: string) =>
+  transform === 'none' || transform === 'matrix(1, 0, 0, 1, 0, 0)';
+
+/** `0.175s`, `0s`, `175ms` → ms; a list resolves to its longest. */
+const longestMs = (value: string) =>
+  Math.max(
+    ...value.split(',').map(part => {
+      const match = part.trim().match(/^([\d.]+)(ms|s)$/);
+      return match == null
+        ? Number.NaN
+        : Number(match[1]) * (match[2] === 's' ? 1000 : 1);
+    }),
+  );
+
+/** Every transition duration on the element and its overlay, in ms. */
+async function transitionsOf(
+  page: Page,
+  index: number,
+): Promise<{element: number; overlay: number}> {
+  return page
+    .locator(SURFACE)
+    .nth(index)
+    .evaluate(element => ({
+      element: getComputedStyle(element).transitionDuration,
+      overlay: getComputedStyle(element, '::after').transitionDuration,
+    }))
+    .then(({element, overlay}) => ({
+      element: longestMs(element),
+      overlay: longestMs(overlay),
+    }));
+}
+
+/** A duration token and a curve token as the page resolves them. */
+async function tokensOf(
+  page: Page,
+  durationToken: string,
+  curveToken: string,
+): Promise<{duration: number; curve: string}> {
+  const read = await page.evaluate(
+    ([durationName, curveName]) => {
+      const root = getComputedStyle(document.documentElement);
+      const probe = document.createElement('div');
+      probe.style.transitionDuration = root
+        .getPropertyValue(durationName)
+        .trim();
+      probe.style.transitionTimingFunction = root
+        .getPropertyValue(curveName)
+        .trim();
+      document.body.append(probe);
+      const probed = getComputedStyle(probe);
+      const result = {
+        duration: probed.transitionDuration,
+        curve: probed.transitionTimingFunction,
+      };
+      probe.remove();
+      return result;
+    },
+    [durationToken, curveToken] as const,
+  );
+  return {duration: longestMs(read.duration), curve: read.curve};
+}
+
+/** The overlay's transition duration (ms) and curve. */
+async function overlayTimingOf(
+  page: Page,
+  index: number,
+): Promise<{duration: number; curve: string}> {
+  const read = await page
+    .locator(SURFACE)
+    .nth(index)
+    .evaluate(element => {
+      const overlay = getComputedStyle(element, '::after');
+      return {
+        duration: overlay.transitionDuration,
+        curve: overlay.transitionTimingFunction,
+      };
+    });
+  return {duration: longestMs(read.duration), curve: read.curve};
+}
+
+/**
+ * The touch press release's clock (ms) and curve on the element the press
+ * controller writes to, read while it carries the release's attribute.
+ */
+async function releaseTimingOf(
+  page: Page,
+  index: number,
+): Promise<{duration: number; curve: string}> {
+  const read = await page
+    .locator(SURFACE)
+    .nth(index)
+    .evaluate(element => {
+      element.setAttribute('data-astryx-press', 'fading');
+      const style = getComputedStyle(element);
+      const result = {
+        duration: style.animationDuration,
+        curve: style.animationTimingFunction,
+      };
+      element.removeAttribute('data-astryx-press');
+      return result;
+    });
+  return {duration: longestMs(read.duration), curve: read.curve};
+}
+
+/**
+ * The properties that animate, with a duration above 0, on the element and
+ * its `::after` overlay. A shorter duration list repeats, as in CSS.
+ */
+async function animatedPropertiesOf(
+  page: Page,
+  index: number,
+): Promise<{element: string[]; overlay: string[]}> {
+  return page
+    .locator(SURFACE)
+    .nth(index)
+    .evaluate(element => {
+      const animated = (style: CSSStyleDeclaration) => {
+        const properties = style.transitionProperty
+          .split(',')
+          .map(part => part.trim());
+        const durations = style.transitionDuration
+          .split(',')
+          .map(part => part.trim());
+        return properties.filter((property, at) => {
+          const duration = durations[at % durations.length] ?? '0s';
+          return property !== 'none' && Number.parseFloat(duration) > 0;
+        });
+      };
+      return {
+        element: animated(getComputedStyle(element)),
+        overlay: animated(getComputedStyle(element, '::after')),
+      };
+    });
+}
+
+test('a pressed button never scales under reduced motion, with a mouse or a finger (DR1)', async ({
+  browser,
+}) => {
+  const desktop = await open(browser, DESKTOP, BUTTON);
+  try {
+    const box = await desktop.page.locator(SURFACE).first().boundingBox();
+    if (box == null) {
+      throw new Error('the Button story rendered no button');
+    }
+    await desktop.page.mouse.move(
+      box.x + box.width / 2,
+      box.y + box.height / 2,
+    );
+    await desktop.page.mouse.down();
+    const pressed = await transformOf(desktop.page);
+    await desktop.page.mouse.up();
+    expect(isIdentity(pressed), pressed).toBe(true);
+  } finally {
+    await desktop.close();
+  }
+
+  const phone = await open(browser, PHONE, BUTTON);
+  try {
+    const box = await phone.page.locator(SURFACE).first().boundingBox();
+    if (box == null) {
+      throw new Error('the Button story rendered no button');
+    }
+    const cdp = await phone.page.context().newCDPSession(phone.page);
+    const point = {x: box.x + box.width / 2, y: box.y + box.height / 2};
+    await cdp.send('Input.dispatchTouchEvent', {
+      type: 'touchStart',
+      touchPoints: [{...point, id: 1}],
+    });
+    await expect
+      .poll(async () =>
+        phone.page.locator(SURFACE).first().getAttribute('data-astryx-press'),
+      )
+      .toBe('on');
+    const pressed = await transformOf(phone.page);
+    await cdp.send('Input.dispatchTouchEvent', {
+      type: 'touchEnd',
+      touchPoints: [],
+    });
+    expect(isIdentity(pressed), pressed).toBe(true);
+  } finally {
+    await phone.close();
+  }
+});
+
+test('with a fine primary pointer, a button’s and a card’s state changes are immediate under reduced motion (DR3)', async ({
+  browser,
+}) => {
+  const button = await open(browser, DESKTOP, BUTTON);
+  try {
+    expect((await transitionsOf(button.page, 0)).element).toBe(0);
+  } finally {
+    await button.close();
+  }
+  for (const [name, story, index] of CARDS) {
+    const card = await open(browser, DESKTOP, story);
+    try {
+      const {element, overlay} = await transitionsOf(card.page, index);
+      expect(overlay, `${name} overlay`).toBe(0);
+      if (name !== 'Thumbnail') {
+        expect(element, `${name} border`).toBe(0);
+      }
+    } finally {
+      await card.close();
+    }
+  }
+});
+
+test('on a touch screen under reduced motion, a button changes at once and a card cross-fades opacity alone, on the exit tokens within 200 ms (DR2, Button FR15)', async ({
+  browser,
+}) => {
+  const button = await open(browser, PHONE, BUTTON);
+  try {
+    // Button keeps its transitions instant under reduced motion on every
+    // pointer (its record's FR15).
+    expect((await transitionsOf(button.page, 0)).element).toBe(0);
+    expect(await animatedPropertiesOf(button.page, 0)).toEqual({
+      element: [],
+      overlay: [],
+    });
+  } finally {
+    await button.close();
+  }
+  for (const [name, story, index] of CARDS) {
+    const card = await open(browser, PHONE, story);
+    try {
+      // Only opacity may animate, on the card and on its overlay.
+      const {element, overlay} = await animatedPropertiesOf(card.page, index);
+      expect(element, `${name} element`).toEqual(
+        element.length === 0 ? [] : ['opacity'],
+      );
+      expect(overlay, `${name} overlay`).toEqual(['opacity']);
+      // Its fade keeps the exit tokens, within 200 ms.
+      const exit = await tokensOf(card.page, '--duration-exit', '--ease-exit');
+      expect(exit.duration, 'exit token').toBeGreaterThan(0);
+      const timing = await overlayTimingOf(card.page, index);
+      expect(timing.duration, name).toBe(Math.min(exit.duration, 200));
+      expect(timing.curve, name).toBe(exit.curve);
+      // So does a finger's press release.
+      const release = await releaseTimingOf(card.page, index);
+      expect(release.duration, `${name} release`).toBe(
+        Math.min(exit.duration, 200),
+      );
+      expect(release.curve, `${name} release`).toBe(exit.curve);
+    } finally {
+      await card.close();
+    }
+  }
+});
+
+test('on a touch screen under reduced motion, selecting a SelectableCard runs only opacity transitions (DR2)', async ({
+  browser,
+}) => {
+  const [, story, index] = CARDS[1];
+  const card = await open(browser, PHONE, story);
+  try {
+    await card.page.locator(SURFACE).nth(index).tap();
+    const transitions = await card.page.evaluate(() =>
+      document
+        .getAnimations()
+        .filter(
+          (animation): animation is CSSTransition =>
+            animation instanceof CSSTransition,
+        )
+        .map(animation => animation.transitionProperty),
+    );
+    expect(transitions.filter(property => property !== 'opacity')).toEqual([]);
+  } finally {
+    await card.close();
+  }
+});
+
+test('under a coarse primary pointer, a card’s press release fades on the exit tokens', async ({
+  browser,
+}) => {
+  for (const [name, story, index] of CARDS) {
+    const card = await open(browser, PHONE_MOTION, story);
+    try {
+      // The press controller writes the release's attribute on this element.
+      const surface = card.page.locator(SURFACE).nth(index);
+      await surface.evaluate(element => {
+        (window as unknown as {pressSeen: string[]}).pressSeen = [];
+        new MutationObserver(() => {
+          (window as unknown as {pressSeen: string[]}).pressSeen.push(
+            element.getAttribute('data-astryx-press') ?? 'none',
+          );
+        }).observe(element, {attributeFilter: ['data-astryx-press']});
+      });
+      await surface.tap();
+      await expect
+        .poll(async () =>
+          card.page.evaluate(
+            () => (window as unknown as {pressSeen: string[]}).pressSeen,
+          ),
+        )
+        .toContain('fading');
+      const exit = await tokensOf(card.page, '--duration-exit', '--ease-exit');
+      expect(exit.duration, 'exit token').toBeGreaterThan(0);
+      const release = await releaseTimingOf(card.page, index);
+      expect(release.duration, name).toBe(exit.duration);
+      expect(release.curve, name).toBe(exit.curve);
+    } finally {
+      await card.close();
+    }
+  }
+});
+
+test('with a fine primary pointer, a card’s mouse timing is unchanged, and a finger’s release fades on the exit tokens', async ({
+  browser,
+}) => {
+  for (const [name, story, index] of CARDS) {
+    const card = await open(browser, DESKTOP_MOTION, story);
+    try {
+      const surface = card.page.locator(SURFACE).nth(index);
+      const box = await surface.boundingBox();
+      expect(box, `${name} box`).not.toBeNull();
+      if (box == null) {
+        continue;
+      }
+      // A mouse's press fades in and out on the fast duration and the
+      // standard curve, as before.
+      const fast = await tokensOf(
+        card.page,
+        '--duration-fast',
+        '--ease-standard',
+      );
+      expect(fast.duration, 'fast token').toBeGreaterThan(0);
+      expect(
+        await overlayTimingOf(card.page, index),
+        `${name} at rest`,
+      ).toEqual(fast);
+      await card.page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+      await card.page.mouse.down();
+      try {
+        expect(
+          await overlayTimingOf(card.page, index),
+          `${name} pressed`,
+        ).toEqual(fast);
+      } finally {
+        await card.page.mouse.up();
+      }
+      // A finger's release on this desktop fades on the exit tokens too.
+      const exit = await tokensOf(card.page, '--duration-exit', '--ease-exit');
+      expect(exit.duration, 'exit token').toBeGreaterThan(0);
+      expect(await releaseTimingOf(card.page, index), name).toEqual(exit);
+    } finally {
+      await card.close();
+    }
+  }
+});
diff --git a/packages/core/src/motion/reducedMotionValues.test.ts b/packages/core/src/motion/reducedMotionValues.test.ts
new file mode 100644
index 0000000000000..28e88ce8d5f76
--- /dev/null
+++ b/packages/core/src/motion/reducedMotionValues.test.ts
@@ -0,0 +1,78 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file reducedMotionValues.test.ts
+ * @input Core's component sources and reducedMotionFadeConsts
+ * @output Every Reduce Motion fade arm that spells the cross-fade's duration
+ *   or curve as a literal spells reducedMotionFadeConsts' value exactly. So
+ *   does an arm that caps a theme duration at it.
+ * @position Unit test beside reducedMotion.test.ts. A swizzled component
+ *   cannot import the internal reducedMotion.stylex.ts, so it spells the
+ *   values. This test keeps them one definition.
+ */
+
+import {readdirSync, readFileSync} from 'node:fs';
+import {join, resolve} from 'node:path';
+import {describe, expect, it} from 'vitest';
+import {
+  reducedMotionFadeConsts,
+  reducedMotionKeys,
+} from './reducedMotion.stylex';
+
+describe("the cross-fade's values spelled in components", () => {
+  it('equal reducedMotionFadeConsts wherever a fade arm spells them', () => {
+    const root = resolve(__dirname, '..');
+    const arm = new RegExp(
+      `'${reducedMotionKeys.fade.replace(/[()]/g, '\\$&')}':\\s*'([^']*)'`,
+      'g',
+    );
+    // A theme duration capped under Reduce Motion is capped at the
+    // cross-fade's bound: `min(<duration token>, <cap>)`.
+    const capped =
+      /`min\(\$\{durationVars\['--duration-[a-z-]+'\]\},\s*([\d.]+m?s)\)`/g;
+    const spelled: string[] = [];
+    const offenders: string[] = [];
+    const walk = (dir: string) => {
+      for (const entry of readdirSync(dir, {withFileTypes: true})) {
+        const path = join(dir, entry.name);
+        if (entry.isDirectory()) {
+          if (entry.name !== 'node_modules' && entry.name !== '__tests__') {
+            walk(path);
+          }
+        } else if (
+          /\.tsx?$/.test(entry.name) &&
+          !/\.(test|spec|stories)\.tsx?$/.test(entry.name)
+        ) {
+          const source = readFileSync(path, 'utf8');
+          for (const match of source.matchAll(capped)) {
+            const where = `${path.slice(root.length)}: ${match[0]}`;
+            spelled.push(where);
+            if (match[1].trim() !== reducedMotionFadeConsts.duration) {
+              offenders.push(where);
+            }
+          }
+          for (const match of source.matchAll(arm)) {
+            const value = match[1];
+            const where = `${path.slice(root.length)}: ${value}`;
+            // A zero duration applies a change at once; it is not a fade.
+            if (/^[\d.]+m?s$/.test(value) && parseFloat(value) !== 0) {
+              spelled.push(where);
+              if (value !== reducedMotionFadeConsts.duration) {
+                offenders.push(where);
+              }
+            } else if (value.startsWith('cubic-bezier')) {
+              spelled.push(where);
+              if (value !== reducedMotionFadeConsts.easing) {
+                offenders.push(where);
+              }
+            }
+          }
+        }
+      }
+    };
+    walk(root);
+    // A pattern that stopped matching would pass with nothing checked.
+    expect(spelled.length).toBeGreaterThan(0);
+    expect(offenders).toEqual([]);
+  });
+});