feat(core): the press paint's timers follow the theme

PRESS_PROFILES name the timing.press motion roles behind their release and
flash clocks (releaseRole, flashRole). The delegated press consumer
resolves them under the pressed element's theme with resolveMotion, the
flash when the touch lands and the release when it starts, so the fading
timer lasts as long as the CSS fade the theme sets. The content-touch
delay and the scroll brake stay table constants: they arbitrate, they do
not move anything.

Author: vjeux

.changeset/press-paint-theme.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[experimental] The delegated press consumer's release fade and quick-tap flash follow the pressed element's theme: `PRESS_PROFILES` (in `@astryxdesign/core/gestures/experimental`) name the `timing.press` motion roles behind their clocks (`releaseRole`, `flashRole`), resolved with `resolveMotion` when the touch lands and when the release starts, so the `fading` timer matches the CSS fade a theme sets.
+
+@vjeux

packages/core/src/gestures/PressTracker.ts

@@ -120,8 +120,16 @@ export interface PressProfile {
   readonly highlightDelay: PressHighlightDelay;
   readonly cancelTravel?: number;
   readonly quickTapFlash: number;
-  /** The release (`fading`) clock a painter uses, ms. */
+  /** The release (`fading`) clock a painter uses, ms: the table's value. */
   readonly releaseMs: number;
+  /**
+   * The `timing.press` motion role behind `releaseMs`: a painter resolves
+   * it under the pressed element's theme, so its fade timer matches the CSS
+   * fade the theme sets. Without it, `releaseMs` is used as is.
+   */
+  readonly releaseRole?: 'buttonReleaseMs' | 'highlightOutMs';
+  /** The motion role behind `quickTapFlash`, resolved the same way. */
+  readonly flashRole?: 'flashMs';
 }
 
 /** @experimental */
@@ -131,13 +139,16 @@ export const PRESS_PROFILES = {
     highlightDelay: 'inScrollers',
     quickTapFlash: PRESS.quickTapFlash.value,
     releaseMs: timing.press.buttonReleaseMs,
+    releaseRole: 'buttonReleaseMs',
+    flashRole: 'flashMs',
   },
   /** A table or collection cell: delayed highlight, cancelled by the scroll. */
   cell: {
     highlightDelay: 'always',
     cancelTravel: UIKIT_GESTURES.pan.hysteresis.value,
     quickTapFlash: 0,
     releaseMs: timing.press.highlightOutMs,
+    releaseRole: 'highlightOutMs',
   },
 } as const satisfies Record<string, PressProfile>;
 

packages/core/src/gestures/README.md

@@ -165,6 +165,13 @@ assistive-technology activation keep working.
   lift straight into the release, and the release takes the list's
   deselect clock.
 
+The release and the flash are motion roles (`timing.press.buttonReleaseMs`,
+`.highlightOutMs`, `.flashMs`): a theme retunes them, and the delegated
+press consumer resolves them under the pressed element's theme when the
+touch lands and when the release starts, so its `fading` timer lasts as long
+as the CSS fade the theme sets. The arbitration windows (the content-touch
+delay, the scroll brake) are not motion and stay the table's.
+
 `paintPress(element, 'on' | 'held' | 'fading' | 'none', {releaseMs})` is
 the one writer of `data-astryx-press`. It owns the release timer and writes
 only over values the caller may replace (by default none, `on` and

packages/core/src/gestures/__tests__/delegatedPress.test.ts

@@ -183,6 +183,31 @@ describe('installPressAttribute', () => {
     expect(types.every(type => type.startsWith('touch'))).toBe(true);
   });
 
+  it("fades a release and flashes a quick tap on the theme's press timings", () => {
+    const {theme, row, cell} = mount(
+      `<div id="theme" data-astryx-theme="slow">
+         <div id="row" data-astryx-pressable>Row</div>
+         <div id="cell" data-astryx-pressable="cell">Cell</div>
+       </div>`,
+    );
+    theme.style.setProperty('--motion-timing-press-button-release-ms', '400ms');
+    theme.style.setProperty('--motion-timing-press-highlight-out-ms', '320ms');
+    touch('touchstart', row, {id: 1, x: 5, y: 5}, 0);
+    touch('touchend', row, {id: 1, x: 5, y: 5}, 80);
+    vi.advanceTimersByTime(399);
+    expect(row.getAttribute('data-astryx-press')).toBe('fading');
+    vi.advanceTimersByTime(1);
+    expect(row.hasAttribute('data-astryx-press')).toBe(false);
+
+    touch('touchstart', cell, {id: 2, x: 5, y: 5}, 1000);
+    vi.advanceTimersByTime(UIKIT_GESTURES.press.contentTouchDelay.value);
+    touch('touchend', cell, {id: 2, x: 5, y: 5}, 1300);
+    vi.advanceTimersByTime(319);
+    expect(cell.getAttribute('data-astryx-press')).toBe('fading');
+    vi.advanceTimersByTime(1);
+    expect(cell.hasAttribute('data-astryx-press')).toBe(false);
+  });
+
   it('presses a cell with the cell profile: delayed, cancelled by travel, its own release', () => {
     const {row} = mount('<div id="row" data-astryx-pressable="cell">Row</div>');
     touch('touchstart', row, {id: 1, x: 5, y: 5}, 0);

packages/core/src/gestures/delegatedPress.ts

@@ -32,7 +32,11 @@
  * - the marker's value picks the press profile (PRESS_PROFILES): empty or
  *   `control` for a button-like control, `cell` for a row, which waits the
  *   content-touch delay everywhere, is cancelled by travel past the pan
- *   hysteresis, and releases on its own clock.
+ *   hysteresis, and releases on its own clock;
+ * - the release fade and the quick-tap flash follow the element's theme:
+ *   they are resolved from the profile's motion roles (`resolveMotion`) when
+ *   the touch lands and when the release starts, so the `fading` timer
+ *   lasts exactly as long as the CSS fade the theme sets.
  *
  * Install it once per attribute (installs are counted, and the first one's
  * options hold); do not install it on the same attribute as the older
@@ -42,6 +46,8 @@
  */
 
 import {useEffect, useState} from 'react';
+import {resolveMotion} from '../motion/resolveMotion';
+import {timing} from '../motion/uikit/timing';
 import {PRESSABLE_ATTRIBUTE, PRESSED_ATTRIBUTE} from '../utils/pressFeedback';
 import {getGestureHost} from './GestureHost';
 import {paintPress} from './pressPaint';
@@ -155,7 +161,11 @@ function addPressType(
       // control does not.
       paintPress(element, 'fading', {
         attribute: pressed,
-        releaseMs: profile.releaseMs,
+        // The theme's value when the release starts, as the CSS fade reads it.
+        releaseMs:
+          profile.releaseRole == null
+            ? profile.releaseMs
+            : resolveMotion(element, timing.press, profile.releaseRole),
       });
     } else {
       paintPress(element, 'none', {attribute: pressed});
@@ -180,7 +190,10 @@ function addPressType(
         trackingExpansion: options.trackingExpansion,
         highlightDelay: profile.highlightDelay,
         cancelTravel: profile.cancelTravel,
-        quickTapFlash: profile.quickTapFlash,
+        quickTapFlash:
+          profile.flashRole == null
+            ? profile.quickTapFlash
+            : resolveMotion(element, timing.press, profile.flashRole),
         isBraking: () => host.isScrollBraking(element),
         onControlEvent: (event, touch) => {
           last = event;