@astryxdesign/core 0.7.7-canary.bf14580 → 0.7.7-canary.c19ca12

package/src/internal/indicatorPress.stylex.ts

@@ -0,0 +1,24 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file indicatorPress.stylex.ts
+ * @input Uses StyleX
+ * @output Exports `indicatorPressScope`, the marker of a first-party
+ *   indicator that paints its own press
+ * @position Internal entry for Astryx's own replacement indicators;
+ *   CheckboxInput reads it
+ */
+
+import * as stylex from '@stylexjs/stylex';
+
+/**
+ * Marks a first-party replacement indicator that paints its own press, for
+ * a shape that CheckboxInput's rounded-square press layer would tint past,
+ * such as a circle. CheckboxInput leaves that layer off over an indicator
+ * with this marker.
+ *
+ * @internal Not public API: the touch press reaches the indicator through a
+ * private property.
+ */
+export const indicatorPressScope: ReturnType<typeof stylex.defineMarker> =
+  stylex.defineMarker();

package/src/motion/README.md

@@ -19,6 +19,7 @@ roles through `resolveMotion`.
 | `uikit/scroll.ts`                                | UIScrollView: deceleration rates, rubber band, bounce-back spring, `delaysContentTouches`, scroll to top.                                                            |
 | `uikit/timing.ts`                                | Non-spring clocks and curves: press highlight, Core Animation's named curves, keyboard, Reduced Motion cross-fade.                                                   |
 | `uikit/paging.ts`                                | A paging UIScrollView: the integrator that settles a release on its page, the page rule, the catch, `setContentOffset(animated:)`.                                   |
+| `uikit/alert.ts`                                 | UIAlertController: how a finger is tracked across the actions (highlight onset and bounds).                                                                          |
 | `uikit/navigation.ts`                            | UINavigationController: push velocity, parallax, dimming, transition clock, interactive pop finish rule.                                                             |
 | `uikit/progressBar.ts`                           | UIProgressView's fill: the whole-track duration and curve, its minimum length and empty alpha; the reduced-motion pulse (three roles).                               |
 | `uikit/gestures.ts`                              | Gesture recognizer thresholds, the velocity filter and haptic stand-ins, as `{value, unit}` entries (sources in JSDoc).                                              |
@@ -64,7 +65,7 @@ the timings that decide who gets a touch are not roles.
 ## Animator
 
 ```
-import {createAnimator} from '../motion/animator';
+import {createMotionAnimator} from '../motion/animator';
 import {coast} from '../motion/coast';
 import {solveSpringTowardRamp, toSpring} from '../motion/spring';
 import {resolveMotion} from '../motion/resolveMotion';
@@ -73,7 +74,7 @@ import {registerSpringsTable, springs} from '../motion/uikit';
 // Once, so the springs are registered as their roles:
 registerSpringsTable();
 
-const animator = createAnimator(sheet);
+const animator = createMotionAnimator(sheet);
 // The animator plays a motion role (spec:AST-094 FR4), its table value, as the
 // per-role tables stay internal (DEC-15); math on a spring reads the role with
 // resolveMotion.
@@ -138,8 +139,10 @@ await handle.finished; // true if it ran to the end, false if interrupted
   presented call's second frame) runs on over two frames, the start moves to
   the call's first read after it, with every call of that task. Everything
   the call starts shares that start
-  (`handle.started`); a retarget keeps an explicit one, and `{at}` puts
-  several animators on one clock. `{start: 'commit'}` lets the browser date
+  (`handle.started`); a retarget of a curve that still moves keeps an
+  explicit one, while one on a tail that already shows as at rest (within two
+  sample tolerances of its target, and slower than one a frame) counts as a
+  call from rest. `{at}` puts several animators on one clock. `{start: 'commit'}` lets the browser date
   a retarget too; `{start: 'presented'}` waits two frames, until the
   element at rest has been presented. `handle.curve(property)` is the curve
   a call plays, for a companion to follow. `{additive: true}` retargets the
@@ -168,7 +171,7 @@ await handle.finished; // true if it ran to the end, false if interrupted
 - `animatorFor(element)` returns the one animator for an element, so code
   that animates it from several places (a swipe on x, a removal on y)
   composes in one `translate` track.
-- `createAnimator(dialog, {pseudoElement: '::backdrop'})` drives a
+- `createMotionAnimator(dialog, {pseudoElement: '::backdrop'})` drives a
   pseudo-element; with no inline style to hold it, a static filling animation
   holds its end value until the next animation replaces it, while the
   pseudo-element exists. A dialog's `::backdrop` is made again each time the

package/src/motion/animator.ts

@@ -4,11 +4,12 @@
  * @file animator.ts
  * @input An element, target values, and a spring, momentum curves (coast.ts)
  *   or any closed-form curve
- * @output Exports `createAnimator`: a compositor animator for translate,
- *   rotate, scale and opacity, with presentation values and velocities read
- *   from the analytic curves, velocity-preserving retargeting, freeze-in-place
- *   `stop`, completion promises, a shared clock, and UIKit's Reduced Motion
- *   substitution; plus its option, handle and transition types
+ * @output Exports `createMotionAnimator`, a compositor animator for
+ *   translate, rotate, scale and opacity, and its option, handle and
+ *   transition types. It reads presentation values and velocities from the
+ *   analytic curves. It retargets with the velocity kept, freezes in place on
+ *   `stop`, and gives completion promises, a shared clock, and UIKit's
+ *   Reduced Motion substitution.
  * @position Motion foundation (DOM). Internal to core: components use it for
  *   every touch-presentation animation; not exported from the package entry
  *
@@ -244,18 +245,18 @@ export interface AnimateOptions {
   crossfadeAs?: 'entrance' | 'exit';
   /**
    * When the call's animations start. By default a call from rest starts
-   * when the browser commits it, and a call that continues motion on screen
-   * (a retarget) starts now, from the value on screen. Ignored with `at`.
+   * when the browser commits it. A call that continues motion on screen (a
+   * retarget) starts now, from the value on screen. A curve whose tail
+   * already shows as at rest counts as rest. Ignored with `at`.
    * - `'commit'`: a call that continues motion also starts when the browser
-   *   commits it, dated by the browser rather than by the main thread, as a
-   *   call from rest is.
-   * - `'presented'`: a call from rest leaves its element at rest and creates
-   *   its animations two frames later, once the frame that carries the
-   *   element at rest has been presented; they then start at their commit. A
-   *   busy UI process delays the motion instead of skipping into it, for two
-   *   frames more before an idle start. Any other change to the animator
-   *   before then creates the animations first, in call order. A call that
-   *   continues motion on screen (a retarget) starts now, as by default.
+   *   commits it. The browser dates it, as it dates a call from rest.
+   * - `'presented'`: a call from rest leaves its element at rest. Its
+   *   animations are created two frames later, once the frame with the
+   *   element at rest has been presented. They then start at their commit,
+   *   so a busy UI process delays the motion instead of skipping into it.
+   *   Any other change to the animator before then creates the animations
+   *   first, in call order. A call that continues motion on screen starts
+   *   now, as by default.
    */
   start?: 'commit' | 'presented';
   /**
@@ -297,7 +298,7 @@ export interface MotionCurve {
 }
 
 /**
- * Options of `createAnimator`.
+ * Options of `createMotionAnimator`.
  */
 /** How `set` puts values in place. */
 export interface SetOptions {
@@ -652,6 +653,18 @@ const SAMPLE_TOLERANCE: Record<MotionProperty, number> = {
 /** Keyframes start on this grid (ms) and are split where the curve needs it. */
 const SAMPLE_GRID_MS = 1000 / 30;
 
+/**
+ * A curve within this many sample tolerances of its target can show as at
+ * rest. A call on it then starts as one from rest does, at the browser's start.
+ */
+const REST_DISTANCE_TOLERANCES = 2;
+
+/**
+ * A curve shows as at rest only while it moves at most one `SAMPLE_TOLERANCE`
+ * a frame at this rate.
+ */
+const REST_FRAMES_PER_SECOND = 60;
+
 /** A curve that has not settled by then (an undamped spring) snaps. */
 const MAX_DURATION_MS = 30_000;
 
@@ -803,7 +816,7 @@ export function animatorFor(
   const key = options.pseudoElement ?? '';
   let animator = byPseudo.get(key);
   if (animator == null) {
-    animator = createAnimator(element, options);
+    animator = createMotionAnimator(element, options);
     byPseudo.set(key, animator);
   }
   return animator;
@@ -920,7 +933,7 @@ const REDUCED_TRANSITION: SpringTransition = {
  *
  * @example
  * ```
- * const animator = createAnimator(sheet);
+ * const animator = createMotionAnimator(sheet);
  * // finger lifts at 1200 px/s heading for the detent at 0 (a component
  * // passes the spring of its motion role):
  * animator.animate({y: 0}, {spring: {response: 0.45, dampingRatio: 0.9}, velocity: {y: 1200}});
@@ -929,7 +942,7 @@ const REDUCED_TRANSITION: SpringTransition = {
  * animator.stop(['y']);
  * ```
  */
-export function createAnimator(
+export function createMotionAnimator(
   element: HTMLElement | null,
   options: AnimatorOptions = {},
 ): Animator {
@@ -1165,6 +1178,22 @@ export function createAnimator(
     return curveAt(property, time);
   };
 
+  /**
+   * Whether a curve's tail already shows as at rest at `time`. Under a
+   * starved main thread the browser commits a call late. A call that starts
+   * at its own time then skips that far into its curve. One that starts at
+   * the commit holds an element that hardly moves.
+   */
+  const showsAtRest = (
+    property: MotionProperty,
+    segment: Segment,
+    time: number,
+  ): boolean =>
+    Math.abs(valueAt(property, time) - segment.target) <=
+      REST_DISTANCE_TOLERANCES * SAMPLE_TOLERANCE[property] &&
+    Math.abs(velocityAt(property, time)) <=
+      SAMPLE_TOLERANCE[property] * REST_FRAMES_PER_SECOND;
+
   const velocityAt = (property: MotionProperty, time: number): number => {
     const held = segments.get(property);
     if (held != null && isHeld(held)) {
@@ -2033,10 +2062,10 @@ export function createAnimator(
   // -- starting from rest ---------------------------------------------------
 
   /**
-   * A call starts from rest when nothing on the channels it drives is moving
-   * (a curve still waiting for its first frame counts as rest) and nothing
-   * pins its clock (`at`). Returns its start group, or null for an explicit
-   * start.
+   * A call starts from rest when nothing on the channels it drives moves on
+   * screen and nothing pins its clock (`at`). A curve still waiting for its
+   * first frame counts as rest, as does one whose tail already shows as at
+   * rest. Returns its start group, or null for an explicit start.
    */
   const beginGroup = (
     time: number,
@@ -2070,10 +2099,12 @@ export function createAnimator(
       }
       return null;
     }
-    // A call that continues motion starts now unless it asks for the
-    // browser's start (`commit`). `presented` asks only for a call from rest:
-    // an element still moving is not at rest, so a retarget starts now, from
-    // the value and velocity on screen (spec:AST-094 FR6).
+    // A call that continues motion starts now, unless it asks for the
+    // browser's start (`commit`). `presented` asks only for a call from rest.
+    // A curve that still moves is not at rest, so a call on it starts now,
+    // from the value and velocity on screen. A tail that shows as at rest
+    // counts as rest, so a call on it waits, under `presented` for its two
+    // frames.
     for (const channel of start === 'commit' ? [] : channels) {
       for (const property of CHANNELS[channel]) {
         const segment = segments.get(property);
@@ -2084,7 +2115,8 @@ export function createAnimator(
           time < endOf(property, segment) &&
           (segment.group == null ||
             segment.group.resolved ||
-            shownSince(property, segment) != null)
+            shownSince(property, segment) != null) &&
+          !showsAtRest(property, segment, time)
         ) {
           return null;
         }

package/src/motion/reducedMotion.ts

@@ -4,7 +4,7 @@
  * @file reducedMotion.ts
  * @input The Reduced Motion preference, the primary pointer, the motion tables
  * @output reducedMotionFade (the fade the animator would play, for motion it
- *   does not drive) and the two media queries a StyleX transition spells
+ *   does not drive), playReducedMotionDip, and the queries a transition spells
  * @position The one Reduced Motion policy (design:reduced-motion) for code
  *   beside the animator: a raw Web Animations fade, a CSS transition
  *
@@ -102,3 +102,81 @@ export function reducedMotionFade(
     easing: `cubic-bezier(${curve.join(', ')})`,
   };
 }
+
+/** A running Reduced Motion dip. */
+export interface ReducedMotionDip {
+  /** Stops the dip. A change that has not landed yet never lands. */
+  cancel(): void;
+}
+
+/**
+ * Plays `fade` on `element` as a dip, and runs `land` at its middle: the
+ * fade-out, the change, then the fade-in. The fade-out holds at 0 until `land`
+ * has run, and the fade-in starts only after it. So the change never shows at
+ * full opacity, however late the main thread runs. A timer at the middle can
+ * fire after the fade-in has begun.
+ *
+ * `land` must apply the change before it returns: the fade-in starts right
+ * after it. `from` is the opacity the fade-out starts at: a leaving element
+ * fades out from where it is.
+ *
+ * @example
+ * ```
+ * const dip = playReducedMotionDip(scroller, fade, () => scroller.scrollTo({top}));
+ * // A newer change replaces it:
+ * dip.cancel();
+ * ```
+ */
+export function playReducedMotionDip(
+  element: Element,
+  fade: ReducedMotionFade,
+  land: () => void,
+  from = 1,
+): ReducedMotionDip {
+  const half = fade.duration / 2;
+  let isCancelled = false;
+  let fadeIn: Animation | null = null;
+  const fadeOut = element.animate(
+    [{opacity: from, easing: fade.easing}, {opacity: 0}],
+    {duration: half, fill: 'forwards'},
+  );
+  fadeOut.finished.then(
+    () => {
+      if (isCancelled) {
+        return;
+      }
+      land();
+      // The fade-in holds 0 until it starts: after a long stall, its start can
+      // come after the frame that runs this.
+      fadeIn = element.animate(
+        [{opacity: 0, easing: fade.easing}, {opacity: 1}],
+        {duration: half, fill: 'backwards'},
+      );
+      // The fade-in keeps the dip's own schedule: it starts where the fade-out
+      // ended, so the dip keeps its length. The clock is read after the
+      // landing, because a frame's timestamp does not count the landing's own
+      // work. After a long stall, half of the fade-in still plays.
+      const fadeOutEnd = endTime(fadeOut, half);
+      if (fadeOutEnd != null) {
+        fadeIn.startTime = Math.max(fadeOutEnd, performance.now() - half / 2);
+      }
+      // The fade-in now holds the opacity, so the held 0 can go.
+      fadeOut.cancel();
+    },
+    // A cancelled fade-out rejects `finished`: nothing lands.
+    () => {},
+  );
+  return {
+    cancel() {
+      isCancelled = true;
+      fadeOut.cancel();
+      fadeIn?.cancel();
+    },
+  };
+}
+
+/** When `animation` was due to end, on its timeline (ms), if it has started. */
+function endTime(animation: Animation, duration: number): number | null {
+  const start = animation.startTime;
+  return typeof start === 'number' ? start + duration : null;
+}

package/src/motion/uikit/alert.ts

@@ -0,0 +1,43 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file alert.ts
+ * @input Nothing; data only
+ * @output Exports `alertController`: how UIAlertController (`.alert`) tracks
+ *   a finger across its actions
+ * @position The alert domain of the UIKit constants table (motion/uikit);
+ *   its springs are `springs.alertPresent` and `springs.alertDismiss`
+ *
+ * Every value was read from UIKit on the iOS 26.2 simulator. A host app
+ * presented `UIAlertController(.alert)` with two and with three actions.
+ * Real HID touches drove it, and the action views' highlight was sampled
+ * every frame. Lengths are in pt (CSS px), durations in ms.
+ *
+ * Every leaf carries one or more `@source`; GUESS values also carry the
+ * `@measure` task that will confirm or replace them. uikit.test.ts enforces
+ * both.
+ *
+ * SYNC: When modified, update /packages/core/src/motion/MEASUREMENTS.md
+ */
+
+export const alertController = {
+  actions: {
+    /**
+     * How long after touch-down the touched action highlights: none, it is
+     * highlighted in the touch-down frame (a tap and a 300 ms hold alike).
+     * @source measured: UIKit lab (injected host app), iOS 26.2 simulator,
+     *   iPhone 17 Pro, per-frame highlight of the action views under real HID
+     *   touches, Oct 23 2026
+     */
+    highlightOnsetMs: 0,
+    /**
+     * How far outside an action the finger may go and keep it highlighted:
+     * none. The highlight cleared 1 pt below the action, and a lift there ran
+     * nothing. UIButton keeps 70 pt; an alert action does not.
+     * @source measured: UIKit lab (injected host app), iOS 26.2 simulator,
+     *   iPhone 17 Pro, per-frame highlight of the action views under real HID
+     *   touches, Oct 23 2026
+     */
+    highlightExpansion: 0,
+  },
+} as const;

package/src/privateAttributes/pressGroupItem.stylex.ts

@@ -0,0 +1,23 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+/**
+ * @file privateAttributes/pressGroupItem.stylex.ts
+ * @input Nothing: the private press-group-item attribute
+ * @output pressGroupItemProps, which marks an action a group's tracker
+ *   follows, and isTrackedByGroup, which reads the mark
+ * @position Owner module of the private press-group-item attribute: the only
+ *   file that writes its name. AlertDialog marks its actions, and the press
+ *   controller (utils/pressFeedback.ts) leaves their press to the group's
+ *   tracker. No package entry exports it.
+ */
+
+const PRESS_GROUP_ITEM = 'data-astryx-press-group-item';
+
+/** Spread on each action that a group's tracker follows. */
+export const pressGroupItemProps: Readonly<Record<string, string>> = {
+  [PRESS_GROUP_ITEM]: '',
+};
+
+/** Whether a group's tracker paints the press on `element` or an ancestor. */
+export function isTrackedByGroup(element: Element): boolean {
+  return element.closest(`[${PRESS_GROUP_ITEM}]`) != null;
+}

package/src/utils/clickGuard.ts

@@ -26,6 +26,11 @@
 // `touchend`, aimed at whatever is under the finger by then. They go with
 // the click, the next `pointerdown` or the window, as the guard does.
 //
+// The menu press model's arm at a finger's release also cancels that touch's
+// `touchend`, so the browser creates no click and no compatibility mouse
+// events. A busy main thread can otherwise hold that click past the window,
+// when a drill-in has put another row under the finger.
+//
 // Some clicks always pass:
 // - a click with `detail` 0: a keyboard's, a screen reader's, or one that the
 //   page dispatches;
@@ -56,6 +61,13 @@ export interface ClickGuardOptions {
    * @default false
    */
   readonly takesLateMouse?: boolean;
+  /**
+   * The menu press model's arm at a finger's release: the guard also cancels
+   * that touch's `touchend`, so the browser creates no click for it. A
+   * cancelled `touchend` disarms the guard.
+   * @default false
+   */
+  readonly cancelsTouchEnd?: boolean;
 }
 
 interface Guard {
@@ -89,7 +101,11 @@ function listenForClicks(view: Window): () => void {
 /** Swallow the browser's next click on `doc` (see the file header). */
 export function armClickGuard(
   doc: Document,
-  {staysInstalled = false, takesLateMouse = false}: ClickGuardOptions = {},
+  {
+    staysInstalled = false,
+    takesLateMouse = false,
+    cancelsTouchEnd = false,
+  }: ClickGuardOptions = {},
 ): void {
   const view = doc.defaultView;
   if (view == null) {
@@ -116,6 +132,26 @@ export function armClickGuard(
       );
     }
   }
+  if (cancelsTouchEnd) {
+    // A touch sends its pointerup before its touchend, so the next touchend is
+    // that touch's own. The next pointerdown disarms the guard first.
+    const stopTouchEnd = subscribeInput(
+      view,
+      'touchend',
+      event => {
+        stopTouchEnd();
+        // A touchend that the browser took for a scroll is not cancelable.
+        // The guard stays armed for a click that may follow it.
+        if (event.cancelable) {
+          event.preventDefault();
+          // No click follows a cancelled touchend.
+          disarmClickGuard(doc);
+        }
+      },
+      {cancels: true},
+    );
+    guard.unsubscribers.push(stopTouchEnd);
+  }
   guard.timer = setTimeout(() => disarmClickGuard(doc), CLICK_GUARD_WINDOW_MS);
 }
 

package/src/utils/dateParser.ts

@@ -32,6 +32,11 @@ export function isLocaleDayFirst(locale: Locale = 'en'): boolean {
   return dayIndex < monthIndex;
 }
 
+// Built at run time: a Unicode property escape in a literal fails a source
+// build whose Babel lacks the Unicode data.
+const LETTER_FREE = new RegExp('^[^\\p{L}]+$', 'u');
+const YEAR_FIRST = new RegExp('^\\d{4}[^\\p{L}\\d]', 'u');
+
 /**
  * Parses user input into a PlainDate.
  *
@@ -138,6 +143,17 @@ export function parseDateInput(
   if (/^\d+$/.test(trimmed)) {
     return null;
   }
+  // In a day-first locale, letter-free text that no form above matched is not
+  // a date. Native `Date` reads `a/b/c` month first. It also takes a year of
+  // one to three digits. So "12/01/2" gives a wrong date. A four-digit year
+  // written first is not ambiguous.
+  if (
+    isLocaleDayFirst(locale) &&
+    LETTER_FREE.test(trimmed) &&
+    !YEAR_FIRST.test(trimmed)
+  ) {
+    return null;
+  }
 
   const parsed = new Date(trimmed);
   if (!isNaN(parsed.getTime())) {

package/src/utils/focusReturn.ts

@@ -151,3 +151,33 @@ export function focusForLastInput(
   }
   element.focus({...options, focusVisible: false});
 }
+
+/**
+ * Prepares the focus return for an open surface that may be removed while
+ * open (rendered only while open, or removed with its view). Removing a
+ * `<dialog>` runs no close and no browser focus return. Call this while the
+ * surface is mounted: it reads the frame that hosts the surface now, because a
+ * removed frame's document has no window. Call the returned function from the
+ * effect cleanup with the opener.
+ *
+ * Once the commit has finished, focus moves to the opener only when the
+ * surface really left the document (StrictMode's simulated unmount keeps it),
+ * the opener is still on the page, and the removal lost focus, both in the
+ * surface's document and in the document that hosts its frame. A control the
+ * user pressed outside the surface, or outside its frame, keeps its focus.
+ */
+export function prepareFocusReturnOnRemoval(
+  surface: Element,
+): (opener: Element | null) => void {
+  const host = surface.ownerDocument.defaultView?.frameElement ?? null;
+  return opener => {
+    queueMicrotask(() => {
+      if (surface.isConnected || opener == null || !opener.isConnected) {
+        return;
+      }
+      if (isFocusLost(surface) && (host == null || isFocusLost(host))) {
+        focusForLastInput(opener as HTMLElement);
+      }
+    });
+  };
+}

package/src/utils/interactionOverlay.stylex.ts

@@ -15,8 +15,9 @@
  * SYNC: When modified, update pressFeedback.ts, pressGesture.ts (the fade
  * clock), hooks/usePressFeedback.doc.mjs, the components that paint the touch
  * press off an ancestor scope or a pseudo-element (Switch, Tab,
- * CheckboxInput, RadioListItem, ClickableCard, SelectableCard, Thumbnail)
- * and scripts/build-css.test.mjs.
+ * CheckboxInput, RadioListItem, ClickableCard, SelectableCard, Thumbnail),
+ * Button (a tracked action sizes its `:active` image to zero) and
+ * scripts/build-css.test.mjs.
  */
 
 // Every surface that paints a press uses one of these styles, so a change to

package/src/utils/pressFeedback.ts

@@ -2,8 +2,8 @@
 
 /**
  * @file pressFeedback.ts
- * @input The press state machine (pressGesture.ts), the menu-press marker
- *   (hooks/menuPressMarker.ts) and the document's pointer, keyboard, scroll and
+ * @input The press state machine (pressGesture.ts), the menu-press and
+ *   press-group markers and the document's pointer, keyboard, scroll and
  *   visibility events
  * @output PRESSABLE_ATTRIBUTE, PRESSED_ATTRIBUTE, pressableProps and
  *   installPressFeedback
@@ -46,6 +46,7 @@ import {isCoarsePointer, watchCoarsePointer} from './coarsePointer';
 import {subscribeInput} from './inputStream';
 import {TOUCH_QUERY} from './touchPresentation';
 import {holdsPressThroughDrag} from '../privateAttributes/pressHoldsDrag.stylex';
+import {isTrackedByGroup} from '../privateAttributes/pressGroupItem.stylex';
 
 /**
  * The marker the controller finds with `closest()`. Every Astryx component
@@ -325,8 +326,9 @@ function stylesheetDroppedActive(): boolean {
 
 /**
  * The surface a mouse button's or the Space key's press paints, if any: the
- * innermost marked surface, outside a menu. A key's press paints only a
- * focused element that is itself the surface, as `:active` does.
+ * innermost marked surface, outside a menu and off a tracked action. A key's
+ * press paints only a focused element that is itself the surface, as
+ * `:active` does.
  */
 function buttonSurfaceAt(
   target: EventTarget | null,
@@ -336,6 +338,10 @@ function buttonSurfaceAt(
   if (element == null || element.closest(MENU_PRESS_ROOT) != null) {
     return null;
   }
+  // A group's tracker follows pointers only, so a key's press stays here.
+  if (pointerId != null && isTrackedByGroup(element)) {
+    return null;
+  }
   if (pointerId == null && element !== target) {
     return null;
   }
@@ -414,7 +420,9 @@ function onPointerDown(event: PointerEvent): void {
   const braking = element != null && scrollerIsBraking(element);
   lastTouchAt = Date.now();
   lastTouchTarget = event.target instanceof Node ? event.target : null;
-  if (element == null || braking) {
+  // A group's tracker paints a tracked action, so two writers would erase each
+  // other's paint. The touch still counts for the brake above.
+  if (element == null || braking || isTrackedByGroup(element)) {
     return;
   }
   takeOver(button, element);
@@ -560,6 +568,11 @@ function activatesOnSpace(target: EventTarget | null): boolean {
   );
 }
 
+/** A tracked action takes no `:active` paint, so a key's press paints here. */
+function isTrackedAction(target: EventTarget | null): boolean {
+  return target instanceof Element && isTrackedByGroup(target);
+}
+
 /**
  * Space went down on a focused button that is itself a pressable surface.
  * Heard in the BUBBLE phase, after the page's own handlers, so a press the
@@ -573,7 +586,7 @@ function onKeyDown(event: KeyboardEvent): void {
     event.isComposing ||
     event.defaultPrevented ||
     !activatesOnSpace(event.target) ||
-    !stylesheetDroppedActive()
+    !(stylesheetDroppedActive() || isTrackedAction(event.target))
   ) {
     return;
   }