@astryxdesign/core 0.7.8-canary.f10bc91 → 0.7.8-canary.f60d2bb

package/dist/PowerSearch/PowerSearchBottomSheet.d.ts

@@ -76,8 +76,9 @@ export interface PowerSearchBottomSheetProps {
     filters: ReadonlyArray<PowerSearchFilter>;
     /**
      * The field's `onChange`. Done replays the draft's edits through it, in
-     * order, each with the list as it stood after that edit; nothing is
-     * reported before Done.
+     * order, onto the field's latest filters, each call carrying that list
+     * with the edit applied; nothing is reported before Done, and nothing when
+     * the field is read-only or disabled at Done.
      */
     onChange: (filters: ReadonlyArray<PowerSearchFilter>, changeType: PowerSearchChangeType, index: number) => void;
     /** The field typeahead source; the content search lists its suggestions. */
@@ -96,7 +97,7 @@ export interface PowerSearchBottomSheetProps {
     components?: PowerSearchComponents;
     editors: PowerSearchSheetEditors;
 }
-/** One edit of the draft: the list before it, the list after it, and how it was reported. */
+/** One edit of the draft: the draft before and after it, and its type and index in the draft; Done replays it onto the field's latest filters. */
 interface DraftEdit {
     before: ReadonlyArray<PowerSearchFilter>;
     after: ReadonlyArray<PowerSearchFilter>;

package/dist/PowerSearch/PowerSearchBottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PowerSearchBottomSheet.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearchBottomSheet.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PowerSearchBottomSheet.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearchBottomSheet.tsx"],"names":[],"mappings":"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"}

package/dist/PowerSearch/PowerSearchBottomSheet.js

@@ -104,7 +104,7 @@ registerEnglishFallback(english);
 // Styles
 // =============================================================================
 
-/** One edit of the draft: the list before it, the list after it, and how it was reported. */
+/** One edit of the draft: the draft before and after it, and its type and index in the draft; Done replays it onto the field's latest filters. */
 
 // Whether two filter lists hold the same filters in the same order, by the
 // key-order-insensitive signature the sheet matches filters with.
@@ -765,12 +765,13 @@ export function PowerSearchBottomSheet({
   // consumer gets the calls a popover session makes and keeps a filter it
   // added meanwhile.
   const commitAndClose = useCallback(() => {
-    if (isDraftDirty) {
+    // A field that became read-only while the flow was open reports nothing.
+    if (isDraftDirty && isInteractive) {
       replayDraftEdits(committedFilters, draftEditsRef.current, onCommit);
     }
     draftEditsRef.current = [];
     closeFlow();
-  }, [closeFlow, committedFilters, isDraftDirty, onCommit]);
+  }, [closeFlow, committedFilters, isDraftDirty, isInteractive, onCommit]);
   const requestDismiss = useCallback(() => {
     if (isDraftDirty) {
       setIsDiscardConfirmationOpen(true);

package/dist/utils/interactionOverlay.stylex.d.ts

@@ -33,8 +33,9 @@ export declare const pressVars: stylex.VarGroup<Readonly<{
  *
  * `defineConsts`, so the one number is inlined here at build time and is the
  * controller's constant at run time (`PRESS_FADE_MS` in pressGesture.ts):
- * the release animation and the timer that removes the attribute after it
- * cannot drift apart.
+ * the release animation and the controller's clock cannot drift apart. When
+ * that clock runs out, the controller waits for a release animation that a
+ * busy main thread started late, then removes the attribute.
  */
 export declare const pressConsts: {
     /** How long the release takes, in ms. UIKit's deselect clock. */

package/dist/utils/interactionOverlay.stylex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interactionOverlay.stylex.d.ts","sourceRoot":"","sources":["../../src/utils/interactionOverlay.stylex.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;GAcG;AAmCH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS;;WAEpB,CAAC;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW;IACtB,iEAAiE;;CAEjE,CAAC;AA8HH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8HnC,CAAC"}
+{"version":3,"file":"interactionOverlay.stylex.d.ts","sourceRoot":"","sources":["../../src/utils/interactionOverlay.stylex.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;GAcG;AAmCH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS;;WAEpB,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW;IACtB,iEAAiE;;CAEjE,CAAC;AA8HH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8HnC,CAAC"}

package/dist/utils/interactionOverlay.stylex.js

@@ -78,8 +78,9 @@ export const pressVars = {
  *
  * `defineConsts`, so the one number is inlined here at build time and is the
  * controller's constant at run time (`PRESS_FADE_MS` in pressGesture.ts):
- * the release animation and the timer that removes the attribute after it
- * cannot drift apart.
+ * the release animation and the controller's clock cannot drift apart. When
+ * that clock runs out, the controller waits for a release animation that a
+ * busy main thread started late, then removes the attribute.
  */
 export const pressConsts = {
   releaseMs: 200

package/dist/utils/pressFeedback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pressFeedback.d.ts","sourceRoot":"","sources":["../../src/utils/pressFeedback.ts"],"names":[],"mappings":"AAkDA;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,0BAA0B,CAAC;AAE3D;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC;AAErD,qDAAqD;AACrD,eAAO,MAAM,cAAc,EAAE;IAAC,QAAQ,CAAC,CAAC,mBAAmB,CAAC,EAAE,EAAE,CAAA;CAE/D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,OAAO,CAAC;AAyE5C;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAUpD;AAqjBD;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,IAAI,CA0BjD"}
+{"version":3,"file":"pressFeedback.d.ts","sourceRoot":"","sources":["../../src/utils/pressFeedback.ts"],"names":[],"mappings":"AAkDA;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,0BAA0B,CAAC;AAE3D;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC;AAErD,qDAAqD;AACrD,eAAO,MAAM,cAAc,EAAE;IAAC,QAAQ,CAAC,CAAC,mBAAmB,CAAC,EAAE,EAAE,CAAA;CAE/D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,OAAO,CAAC;AA0E5C;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAUpD;AAkoBD;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,IAAI,CA0BjD"}

package/dist/utils/pressFeedback.js

@@ -138,6 +138,66 @@ export function pressFadeMs(element) {
   const reduced = typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
   return reduced ? Math.min(scaled, PRESS_FADE_MS) : scaled;
 }
+
+/**
+ * The release animations that still run for `element`'s press. Each is a
+ * finite CSS animation that has not finished. It runs on the element, on its
+ * `::before` or `::after`, or on a descendant whose nearest press owner is
+ * the element, because a component can draw its release on a part inside the
+ * surface. A press owner nested inside plays the release of its own press,
+ * so it never extends this one. The list is empty where the engine has no Web
+ * Animations.
+ */
+function releaseAnimationsOf(element) {
+  if (typeof element.getAnimations !== 'function') {
+    return [];
+  }
+  return element.getAnimations({
+    subtree: true
+  }).filter(animation => {
+    // The effect of a CSS animation is a KeyframeEffect. Its target is the
+    // element, also when the animation runs on a pseudo-element.
+    const effect = animation.effect;
+    const target = effect?.target ?? null;
+    if (effect == null || target == null || !('animationName' in animation) || target !== element && target.closest(`[${PRESSABLE_ATTRIBUTE}]`) !== element) {
+      return false;
+    }
+    if (!Number.isFinite(Number(effect.getComputedTiming().endTime))) {
+      return false;
+    }
+    return animation.playState !== 'finished';
+  });
+}
+
+/**
+ * Calls `end` when the release on `element` is over. A busy main thread
+ * delays the first frame of the release animation, and with it the end. So a
+ * clock that starts at the `fading` write can cut the release short. When
+ * `clockMs` runs out, the release waits for each release animation that still
+ * runs or still waits for its first frame. It ends when those finish or are
+ * cancelled, as when the surface is unmounted or restyled. With no release
+ * animation (an instant release, a surface without one, an engine without Web
+ * Animations), the release ends at the clock. Returns a cancel.
+ */
+function endAfterRelease(element, clockMs, end) {
+  let waiting = true;
+  const timer = setTimeout(() => {
+    const running = releaseAnimationsOf(element);
+    if (running.length === 0) {
+      end();
+      return;
+    }
+    void Promise.allSettled(running.map(async animation => animation.finished)).then(() => {
+      if (waiting) {
+        end();
+      }
+    });
+  }, clockMs);
+  return () => {
+    waiting = false;
+    clearTimeout(timer);
+  };
+}
 const TIMER_EVENT = {
   fade: 'fadeEnd',
   flash: 'flashEnd',
@@ -152,7 +212,7 @@ function paintElement(element, paint) {
 }
 function clearTimer(slot) {
   if (slot.live?.timer != null) {
-    clearTimeout(slot.live.timer);
+    slot.live.timer();
     slot.live.timer = null;
   }
 }
@@ -188,20 +248,25 @@ function apply(slot, step) {
   }
   if (step.timer != null) {
     const kind = step.timer;
-    // A TIMER, never `requestAnimationFrame`: iOS throttles frame callbacks
-    // while a scroll runs, so a frame-based delay would fire late, after the
-    // scroll, and paint a control nobody is pressing any more.
-    live.timer = setTimeout(() => {
+    const fire = () => {
       if (slot.live != null) {
         slot.live.timer = null;
       }
       apply(slot, pressGestureStep(slot.live?.gesture ?? idlePressGesture(), {
         kind: TIMER_EVENT[kind]
       }));
-    },
-    // The release fade follows the theme's tempo (AST-108). The onset delay
-    // and the tap flash do not.
-    kind === 'fade' ? pressFadeMs(live.element) : TIMER_MS[kind]);
+    };
+    if (kind === 'fade') {
+      // The release fade follows the theme's tempo (AST-108). It ends when
+      // its animation ends, however late a busy main thread let it start.
+      live.timer = endAfterRelease(live.element, pressFadeMs(live.element), fire);
+    } else {
+      // A TIMER, never `requestAnimationFrame`: iOS throttles frame callbacks
+      // while a scroll runs, so a frame-based delay would fire late, after the
+      // scroll, and paint a control nobody is pressing any more.
+      const timer = setTimeout(fire, TIMER_MS[kind]);
+      live.timer = () => clearTimeout(timer);
+    }
   }
 }
 

package/dist/utils/pressGesture.d.ts

@@ -31,7 +31,9 @@ export declare const PRESS_FLASH_MS = 100;
  * How long the paint takes to leave after a release: UIKit's deselect
  * crossfade. The one number, shared with the stylesheet: the release
  * animation in interactionOverlay.stylex.ts runs on the same constant, so the
- * timer that removes the attribute and the fade cannot drift apart.
+ * controller's release clock and the fade cannot drift apart. When the clock
+ * runs out, the controller waits for a release animation that still runs,
+ * then removes the attribute.
  */
 export declare const PRESS_FADE_MS: number;
 /**
@@ -98,7 +100,7 @@ export type PressEvent = {
  | {
     kind: 'flashEnd';
 }
-/** {@link PRESS_FADE_MS} elapsed; the paint is gone. */
+/** The release is over: its animation ended, or its clock ran out with none running. */
  | {
     kind: 'fadeEnd';
 };

package/dist/utils/pressGesture.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pressGesture.d.ts","sourceRoot":"","sources":["../../src/utils/pressGesture.ts"],"names":[],"mappings":"AA4BA;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,KAAK,CAAC;AAEhC;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC;;;;;GAKG;AACH,eAAO,MAAM,aAAa,EAAE,MAA8B,CAAC;AAE3D;;;;;;;;GAQG;AACH,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC,2EAA2E;AAC3E,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,IAAI,GAAG,QAAQ,CAAC;AAElD;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,UAAU,GACpB,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5E,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B,sDAAsD;IACtD,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,MAAM,UAAU,GAClB;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAC;AACtC;;;;GAIG;GACD;IAAC,IAAI,EAAE,YAAY,CAAA;CAAC;AACtB,0EAA0E;GACxE;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAC,GACpC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAC;AACd,4FAA4F;GAC1F;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC;AAClB,iEAAiE;GAC/D;IAAC,IAAI,EAAE,OAAO,CAAA;CAAC;AACjB,yDAAyD;GACvD;IAAC,IAAI,EAAE,UAAU,CAAA;CAAC;AACpB,wDAAwD;GACtD;IAAC,IAAI,EAAE,SAAS,CAAA;CAAC,CAAC;AAEtB,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC;IAC/B,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B;;;;;;;;;OASG;IACH,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,IAAI,CAAC;CACnD;AAkBD;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,YAAY,EACrB,KAAK,EAAE,UAAU,GAChB,SAAS,CA6GX;AAED,wBAAgB,gBAAgB,IAAI,YAAY,CAE/C"}
+{"version":3,"file":"pressGesture.d.ts","sourceRoot":"","sources":["../../src/utils/pressGesture.ts"],"names":[],"mappings":"AA4BA;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,KAAK,CAAC;AAEhC;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,EAAE,MAA8B,CAAC;AAE3D;;;;;;;;GAQG;AACH,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC,2EAA2E;AAC3E,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,IAAI,GAAG,QAAQ,CAAC;AAElD;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,UAAU,GACpB,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5E,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B,sDAAsD;IACtD,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,MAAM,UAAU,GAClB;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAC;AACtC;;;;GAIG;GACD;IAAC,IAAI,EAAE,YAAY,CAAA;CAAC;AACtB,0EAA0E;GACxE;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAC,GACpC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAC;AACd,4FAA4F;GAC1F;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC;AAClB,iEAAiE;GAC/D;IAAC,IAAI,EAAE,OAAO,CAAA;CAAC;AACjB,yDAAyD;GACvD;IAAC,IAAI,EAAE,UAAU,CAAA;CAAC;AACpB,wFAAwF;GACtF;IAAC,IAAI,EAAE,SAAS,CAAA;CAAC,CAAC;AAEtB,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC;IAC/B,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B;;;;;;;;;OASG;IACH,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,IAAI,CAAC;CACnD;AAkBD;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,YAAY,EACrB,KAAK,EAAE,UAAU,GAChB,SAAS,CA6GX;AAED,wBAAgB,gBAAgB,IAAI,YAAY,CAE/C"}

package/dist/utils/pressGesture.js

@@ -62,7 +62,9 @@ export const PRESS_FLASH_MS = 100;
  * How long the paint takes to leave after a release: UIKit's deselect
  * crossfade. The one number, shared with the stylesheet: the release
  * animation in interactionOverlay.stylex.ts runs on the same constant, so the
- * timer that removes the attribute and the fade cannot drift apart.
+ * controller's release clock and the fade cannot drift apart. When the clock
+ * runs out, the controller waits for a release animation that still runs,
+ * then removes the attribute.
  */
 export const PRESS_FADE_MS = pressConsts.releaseMs;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.7.8-canary.f10bc91",
+  "version": "0.7.8-canary.f60d2bb",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -870,9 +870,9 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.8-canary.f10bc91",
-    "@astryxdesign/cli": "0.7.8-canary.f10bc91",
-    "@astryxdesign/interaction-harness": "0.7.8-canary.f10bc91",
+    "@astryxdesign/a11y-spec": "0.7.8-canary.f60d2bb",
+    "@astryxdesign/cli": "0.7.8-canary.f60d2bb",
+    "@astryxdesign/interaction-harness": "0.7.8-canary.f60d2bb",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/PowerSearch/PowerSearchBottomSheet.tsx

@@ -185,8 +185,9 @@ export interface PowerSearchBottomSheetProps {
   filters: ReadonlyArray<PowerSearchFilter>;
   /**
    * The field's `onChange`. Done replays the draft's edits through it, in
-   * order, each with the list as it stood after that edit; nothing is
-   * reported before Done.
+   * order, onto the field's latest filters, each call carrying that list
+   * with the edit applied; nothing is reported before Done, and nothing when
+   * the field is read-only or disabled at Done.
    */
   onChange: (
     filters: ReadonlyArray<PowerSearchFilter>,
@@ -214,7 +215,7 @@ export interface PowerSearchBottomSheetProps {
 // Styles
 // =============================================================================
 
-/** One edit of the draft: the list before it, the list after it, and how it was reported. */
+/** One edit of the draft: the draft before and after it, and its type and index in the draft; Done replays it onto the field's latest filters. */
 interface DraftEdit {
   before: ReadonlyArray<PowerSearchFilter>;
   after: ReadonlyArray<PowerSearchFilter>;
@@ -1159,12 +1160,13 @@ export function PowerSearchBottomSheet({
   // consumer gets the calls a popover session makes and keeps a filter it
   // added meanwhile.
   const commitAndClose = useCallback(() => {
-    if (isDraftDirty) {
+    // A field that became read-only while the flow was open reports nothing.
+    if (isDraftDirty && isInteractive) {
       replayDraftEdits(committedFilters, draftEditsRef.current, onCommit);
     }
     draftEditsRef.current = [];
     closeFlow();
-  }, [closeFlow, committedFilters, isDraftDirty, onCommit]);
+  }, [closeFlow, committedFilters, isDraftDirty, isInteractive, onCommit]);
   const requestDismiss = useCallback(() => {
     if (isDraftDirty) {
       setIsDiscardConfirmationOpen(true);

package/src/utils/interactionOverlay.stylex.ts

@@ -76,8 +76,9 @@ export const pressVars = stylex.defineVars({
  *
  * `defineConsts`, so the one number is inlined here at build time and is the
  * controller's constant at run time (`PRESS_FADE_MS` in pressGesture.ts):
- * the release animation and the timer that removes the attribute after it
- * cannot drift apart.
+ * the release animation and the controller's clock cannot drift apart. When
+ * that clock runs out, the controller waits for a release animation that a
+ * busy main thread started late, then removes the attribute.
  */
 export const pressConsts = stylex.defineConsts({
   /** How long the release takes, in ms. UIKit's deselect clock. */

package/src/utils/pressFeedback.ts

@@ -109,7 +109,8 @@ interface LiveGesture {
    * for a press of the Space key.
    */
   pointerId: number | null;
-  timer: ReturnType<typeof setTimeout> | null;
+  /** Cancels the clock the current phase owes, or the release it waits for. */
+  timer: (() => void) | null;
 }
 
 /**
@@ -165,6 +166,76 @@ export function pressFadeMs(element: Element): number {
   return reduced ? Math.min(scaled, PRESS_FADE_MS) : scaled;
 }
 
+/**
+ * The release animations that still run for `element`'s press. Each is a
+ * finite CSS animation that has not finished. It runs on the element, on its
+ * `::before` or `::after`, or on a descendant whose nearest press owner is
+ * the element, because a component can draw its release on a part inside the
+ * surface. A press owner nested inside plays the release of its own press,
+ * so it never extends this one. The list is empty where the engine has no Web
+ * Animations.
+ */
+function releaseAnimationsOf(element: Element): Animation[] {
+  if (typeof element.getAnimations !== 'function') {
+    return [];
+  }
+  return element.getAnimations({subtree: true}).filter(animation => {
+    // The effect of a CSS animation is a KeyframeEffect. Its target is the
+    // element, also when the animation runs on a pseudo-element.
+    const effect = animation.effect as KeyframeEffect | null;
+    const target = effect?.target ?? null;
+    if (
+      effect == null ||
+      target == null ||
+      !('animationName' in animation) ||
+      (target !== element &&
+        target.closest(`[${PRESSABLE_ATTRIBUTE}]`) !== element)
+    ) {
+      return false;
+    }
+    if (!Number.isFinite(Number(effect.getComputedTiming().endTime))) {
+      return false;
+    }
+    return animation.playState !== 'finished';
+  });
+}
+
+/**
+ * Calls `end` when the release on `element` is over. A busy main thread
+ * delays the first frame of the release animation, and with it the end. So a
+ * clock that starts at the `fading` write can cut the release short. When
+ * `clockMs` runs out, the release waits for each release animation that still
+ * runs or still waits for its first frame. It ends when those finish or are
+ * cancelled, as when the surface is unmounted or restyled. With no release
+ * animation (an instant release, a surface without one, an engine without Web
+ * Animations), the release ends at the clock. Returns a cancel.
+ */
+function endAfterRelease(
+  element: Element,
+  clockMs: number,
+  end: () => void,
+): () => void {
+  let waiting = true;
+  const timer = setTimeout(() => {
+    const running = releaseAnimationsOf(element);
+    if (running.length === 0) {
+      end();
+      return;
+    }
+    void Promise.allSettled(
+      running.map(async animation => animation.finished),
+    ).then(() => {
+      if (waiting) {
+        end();
+      }
+    });
+  }, clockMs);
+  return () => {
+    waiting = false;
+    clearTimeout(timer);
+  };
+}
+
 const TIMER_EVENT = {
   fade: 'fadeEnd',
   flash: 'flashEnd',
@@ -181,7 +252,7 @@ function paintElement(element: HTMLElement, paint: PressPaint): void {
 
 function clearTimer(slot: Slot): void {
   if (slot.live?.timer != null) {
-    clearTimeout(slot.live.timer);
+    slot.live.timer();
     slot.live.timer = null;
   }
 }
@@ -217,25 +288,32 @@ function apply(slot: Slot, step: PressStep): void {
   }
   if (step.timer != null) {
     const kind = step.timer;
-    // A TIMER, never `requestAnimationFrame`: iOS throttles frame callbacks
-    // while a scroll runs, so a frame-based delay would fire late, after the
-    // scroll, and paint a control nobody is pressing any more.
-    live.timer = setTimeout(
-      () => {
-        if (slot.live != null) {
-          slot.live.timer = null;
-        }
-        apply(
-          slot,
-          pressGestureStep(slot.live?.gesture ?? idlePressGesture(), {
-            kind: TIMER_EVENT[kind],
-          }),
-        );
-      },
-      // The release fade follows the theme's tempo (AST-108). The onset delay
-      // and the tap flash do not.
-      kind === 'fade' ? pressFadeMs(live.element) : TIMER_MS[kind],
-    );
+    const fire = () => {
+      if (slot.live != null) {
+        slot.live.timer = null;
+      }
+      apply(
+        slot,
+        pressGestureStep(slot.live?.gesture ?? idlePressGesture(), {
+          kind: TIMER_EVENT[kind],
+        }),
+      );
+    };
+    if (kind === 'fade') {
+      // The release fade follows the theme's tempo (AST-108). It ends when
+      // its animation ends, however late a busy main thread let it start.
+      live.timer = endAfterRelease(
+        live.element,
+        pressFadeMs(live.element),
+        fire,
+      );
+    } else {
+      // A TIMER, never `requestAnimationFrame`: iOS throttles frame callbacks
+      // while a scroll runs, so a frame-based delay would fire late, after the
+      // scroll, and paint a control nobody is pressing any more.
+      const timer = setTimeout(fire, TIMER_MS[kind]);
+      live.timer = () => clearTimeout(timer);
+    }
   }
 }
 

package/src/utils/pressGesture.ts

@@ -62,7 +62,9 @@ export const PRESS_FLASH_MS = 100;
  * How long the paint takes to leave after a release: UIKit's deselect
  * crossfade. The one number, shared with the stylesheet: the release
  * animation in interactionOverlay.stylex.ts runs on the same constant, so the
- * timer that removes the attribute and the fade cannot drift apart.
+ * controller's release clock and the fade cannot drift apart. When the clock
+ * runs out, the controller waits for a release animation that still runs,
+ * then removes the attribute.
  */
 export const PRESS_FADE_MS: number = pressConsts.releaseMs;
 
@@ -119,7 +121,7 @@ export type PressEvent =
   | {kind: 'onset'}
   /** {@link PRESS_FLASH_MS} elapsed on a too-quick tap. */
   | {kind: 'flashEnd'}
-  /** {@link PRESS_FADE_MS} elapsed; the paint is gone. */
+  /** The release is over: its animation ended, or its clock ran out with none running. */
   | {kind: 'fadeEnd'};
 
 export interface PressStep {