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

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/motion/uikit/index.ts

@@ -4,10 +4,10 @@
  * @file index.ts
  * @input The domain files of the UIKit constants table
  * @output Re-exports `springs` and one constant per spring (`SHEET_PRESENT_SPRING`,
- *   …), `scroll`, `timing`, `navigation`, `progressBar`, the `slider` and
- *   switch (`switchControl`) domains, and the gesture thresholds (one
- *   `UIKIT_*` group per recognizer, their union `UIKIT_GESTURES`, and the
- *   haptic tables)
+ *   …), `scroll`, `timing`, `navigation`, `progressBar`, `segmentedControl`,
+ *   the `slider` and switch (`switchControl`) domains, and the gesture
+ *   thresholds (one `UIKIT_*` group per recognizer, their union
+ *   `UIKIT_GESTURES`, and the haptic tables)
  * @position Entry of the UIKit constants table (motion/uikit). Internal to
  *   core: not exported from the package entry point
  *
@@ -42,6 +42,7 @@ export {
 export {navigation, registerNavigationTable} from './navigation';
 export {progressBar, registerProgressBarTable} from './progressBar';
 export {registerScrollTable, scroll} from './scroll';
+export {segmentedControl} from './segmented';
 export {slider} from './slider';
 export {
   ACTION_SHEET_DISMISS_SPRING,
@@ -64,7 +65,6 @@ export {
   NAVIGATION_POP_SPRING,
   NAVIGATION_PUSH_SPRING,
   QUICK_CHANGE_SPRING,
-  SEGMENTED_THUMB_SPRING,
   SETTLE_SPRING,
   SHEET_DETENT_SPRING,
   SHEET_DISMISS_SPRING,

package/src/motion/uikit/segmented.ts

@@ -0,0 +1,74 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file segmented.ts
+ * @input Nothing; data only
+ * @output Exports `segmentedControl`, UISegmentedControl's selection slide
+ *   spring and its drag overshoot; and `registerSegmentedTable`, which
+ *   registers the spring as an internal motion role
+ * @position The segmented-control domain of the UIKit constants table
+ *   (motion/uikit); read by SegmentedControl's touch presentation
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/SegmentedControl/useSegmentedSelectionMotion.ts
+ * - /packages/core/src/motion/README.md (domain list)
+ */
+
+import {registerMotionTable} from '../roles';
+
+/**
+ * UIKit's own UISegmentedControl, measured with three text segments in a
+ * 300 × 31 pt control. A tap and a programmatic change follow the same
+ * spring. Every leaf carries a `@source`, and uikit.test.ts checks it.
+ *
+ * Some UIKit motion is left out on purpose. UIKit cross-fades the two titles
+ * that change, over 0.2 s. Astryx switches them at once, because a
+ * cross-fade needs a second copy of each title. Under Reduce Motion, UIKit's
+ * lens fades in at the new segment and scales from 0.88. Astryx allows no
+ * scaling there, so the animator's Reduce Motion cross-fade replaces it.
+ * UIKit's lens also lifts and stretches under a finger. A theme role owns
+ * the lift, and the stretch is not modeled. The lens chases a dragging
+ * finger on the shared `springs.fingerTracking` role, which matches the
+ * values UIKit reports for this control.
+ */
+export const segmentedControl = {
+  /**
+   * The selection indicator's slide from the old segment to the new one,
+   * after a tap or a programmatic change. Its response is 0.40 s and its
+   * damping ratio 0.85. That gives about 1.25 pt of overshoot on a 200 pt
+   * move, settled by about 0.6 s. The width follows the same spring when the
+   * segments differ in width.
+   * @source measured: UIKit lab (injected host app), iOS 26.2 simulator,
+   *   iPhone 17 Pro, UIViewSpringAnimationBehavior read on the lens position
+   *   for a tap and a programmatic set (dampingRatio 0.85, response 0.40,
+   *   tracking off), Oct 23 2026
+   * @source measured: UIKit lab (injected host app), iOS 26.2 simulator,
+   *   iPhone 17 Pro, per-frame log of the lens's presentation position and
+   *   velocity (method C) for a tap, a programmatic set and an animated set,
+   *   least-squares spring fit (response 0.395 / 0.405 / 0.400 s, damping
+   *   ratio 0.855 / 0.845 / 0.850, rms at most 0.65 pt over 200 pt),
+   *   Oct 23 2026
+   */
+  selectionSpring: {response: 0.4, dampingRatio: 0.85},
+  /**
+   * How far past the first or last segment's center the lens follows a
+   * dragging finger, in pt. Beyond that, the lens stays put while the finger
+   * goes on.
+   * @source measured: UIKit lab (injected host app), iOS 26.2 simulator,
+   *   iPhone 17 Pro, a drag 60 pt past the last segment: the lens stops about
+   *   11 pt past its center (312 vs 301), Oct 23 2026
+   */
+  dragOvershoot: 11,
+} as const;
+
+/**
+ * Registers this table with the motion registry (motion/roles.ts). The
+ * slide's spring becomes an internal motion role. The drag overshoot is not
+ * motion, so it stays an internal constant. Nothing registers on import, and
+ * a second call does nothing.
+ */
+export function registerSegmentedTable(): void {
+  registerMotionTable('segmented', segmentedControl, {
+    roles: ['selectionSpring'],
+  });
+}

package/src/motion/uikit/springs.ts

@@ -15,11 +15,11 @@
  * that will confirm or replace them (MEASUREMENTS.md lists them all).
  * uikit.test.ts enforces both.
  *
- * Most springs are measured on iOS 26.2 or documented by Apple; two are still
- * GUESSES (`segmentedThumb`, `banner`). `switchThumbMove` is the switch's
- * measured travel, which uikit/switch.ts reads. A guess starts from the
- * nearest sourced spring and names it. A component built on the table gets
- * the measured value the moment it lands, without changing.
+ * Most springs are measured on iOS 26.2 or documented by Apple; one is still
+ * a GUESS (`banner`). `switchThumbMove` is the switch's measured travel,
+ * which uikit/switch.ts reads. A guess starts from the nearest sourced
+ * spring and names it. A component built on the table gets the measured
+ * value the moment it lands, without changing.
  *
  * Press highlight in/out are fades, not springs: see timing.ts.
  *
@@ -400,21 +400,6 @@ export const SWITCH_THUMB_MOVE_SPRING = {
   dampingRatio: 1,
 } as const;
 
-/**
- * UISegmentedControl selection thumb sliding to a new segment.
- * @source GUESS — WebKit's UIKit-matched switch thumb spring
- *   (RenderThemeCocoa.mm `thumbMoveSpring`: response 0.30 s, ratio 0.75),
- *   kept only until UISegmentedControl's measured spring replaces it;
- *   UISwitch's measured travel (`SWITCH_THUMB_MOVE_SPRING`)
- *   belongs to another control
- * @measure M-SG02
- * @measure M-SG03
- */
-export const SEGMENTED_THUMB_SPRING = {
-  response: 0.3,
-  dampingRatio: 0.75,
-} as const;
-
 // ---------------------------------------------------------------------
 // System
 // ---------------------------------------------------------------------
@@ -504,7 +489,6 @@ export const springs = {
   contextMenuMorph: CONTEXT_MENU_MORPH_SPRING,
   menuReducedMotion: MENU_REDUCED_MOTION_SPRING,
   switchThumbMove: SWITCH_THUMB_MOVE_SPRING,
-  segmentedThumb: SEGMENTED_THUMB_SPRING,
   keyboard: KEYBOARD_SPRING,
   banner: BANNER_SPRING,
   sliderRelease: SLIDER_RELEASE_SPRING,

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/privateAttributes/segmentTitle.stylex.ts

@@ -0,0 +1,22 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file privateAttributes/segmentTitle.stylex.ts
+ * @input Nothing
+ * @output segmentTitleProps, which marks a SegmentedControl segment's title,
+ *   and titleOfSegment, which finds that title in a segment
+ * @position Owner module of the private segment-title attribute: the only
+ *   file that writes its name. No package entry exports it.
+ */
+
+const SEGMENT_TITLE = 'data-astryx-segment-title';
+
+/** Spread on a segment's title: marks it for the touch layer. */
+export const segmentTitleProps: Readonly<Record<string, string>> = {
+  [SEGMENT_TITLE]: '',
+};
+
+/** The title inside `segment`, or null when the label is hidden. */
+export function titleOfSegment(segment: Element): HTMLElement | null {
+  return segment.querySelector<HTMLElement>(`[${SEGMENT_TITLE}]`);
+}

package/src/utils/browserClickWait.ts

@@ -0,0 +1,133 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file browserClickWait.ts
+ * @input An element a tap's lift released on, and the control that acts on
+ *   its click
+ * @output BROWSER_CLICK_WAIT_MS, awaitBrowserClick, clickForLift and
+ *   clickAndReport
+ * @position The one wait for the browser's click after a tap, shared by
+ *   Switch/useSwitchTouch.ts and SegmentedControl/useSegmentedTouchTracking.ts.
+ *   It swallows nothing: utils/clickGuard.ts is the one guard for a late click.
+ *
+ * SYNC: When modified, update browserClickWait.test.ts.
+ */
+
+import {armClickGuard, withoutClickGuard} from './clickGuard';
+import {subscribeInput} from './inputStream';
+
+/**
+ * How long a tap's lift waits for the browser's own click, ms. The browser
+ * sends that click with the lift when the page has no double-tap delay. The
+ * wait runs out for a lift that the browser does not count as a click, such
+ * as a hold. It also runs out when a busy main thread holds the click back.
+ */
+export const BROWSER_CLICK_WAIT_MS = 300;
+
+/** What a control does when the browser's click comes, or does not. */
+export interface BrowserClickWaitHandlers {
+  /** The browser's click ran its handlers. `isCancelled`: one cancelled it. */
+  readonly onClicked: (isCancelled: boolean) => void;
+  /** No browser click came in time. */
+  readonly onNoClick: () => void;
+}
+
+/**
+ * Waits for the browser's own click inside `target` after a tap's lift. That
+ * click is the activation: `onClicked` runs once its handlers have run. With
+ * no click in time, `onNoClick` runs. The returned call ends the wait at once
+ * and leaves no listener or timer behind.
+ */
+export function awaitBrowserClick(
+  target: Element,
+  {onClicked, onNoClick}: BrowserClickWaitHandlers,
+): () => void {
+  const view = target.ownerDocument.defaultView;
+  if (view == null) {
+    // A document with no window gets no click: the wait runs out at once.
+    let isEnded = false;
+    queueMicrotask(() => {
+      if (!isEnded) {
+        onNoClick();
+      }
+    });
+    return () => {
+      isEnded = true;
+    };
+  }
+  let isDone = false;
+  let report: number | null = null;
+  let timer: number | null = null;
+  let stopListening: (() => void) | null = null;
+  const stop = () => {
+    isDone = true;
+    stopListening?.();
+    stopListening = null;
+    if (timer != null) {
+      view.clearTimeout(timer);
+      timer = null;
+    }
+  };
+  stopListening = subscribeInput(view, 'click', event => {
+    if (
+      isDone ||
+      !event.isTrusted ||
+      !target.contains(event.target as Node | null)
+    ) {
+      return;
+    }
+    stop();
+    // After every handler has run: was it cancelled?
+    report = view.setTimeout(() => {
+      report = null;
+      onClicked(event.defaultPrevented);
+    }, 0);
+  });
+  timer = view.setTimeout(() => {
+    if (isDone) {
+      return;
+    }
+    stop();
+    onNoClick();
+  }, BROWSER_CLICK_WAIT_MS);
+  return () => {
+    stop();
+    if (report != null) {
+      view.clearTimeout(report);
+      report = null;
+    }
+  };
+}
+
+/**
+ * Click `element` (its own `click()`, so its activation behavior and every
+ * handler run as for any click) and report whether a handler cancelled it.
+ * The event is read from a capture listener that exists only for the call.
+ */
+export function clickAndReport(element: HTMLElement): boolean {
+  const view = element.ownerDocument.defaultView;
+  let clicked: Event | null = null;
+  const grab = (event: Event) => {
+    if (clicked == null && event.target === element) {
+      clicked = event;
+    }
+  };
+  view?.addEventListener('click', grab, true);
+  try {
+    element.click();
+  } finally {
+    view?.removeEventListener('click', grab, true);
+  }
+  return (clicked as Event | null)?.defaultPrevented === true;
+}
+
+/**
+ * Clicks `element` for a lift the control decided itself, and reports
+ * whether a handler cancelled the click. The shared click guard swallows the
+ * browser's own click for the same lift, if it comes later, so the lift
+ * activates once.
+ */
+export function clickForLift(element: HTMLElement): boolean {
+  armClickGuard(element.ownerDocument);
+  return withoutClickGuard(() => clickAndReport(element));
+}

package/src/utils/clickGuard.ts

@@ -21,6 +21,16 @@
 // page adds later (AST-057, AST-094). If only the gesture host arms it, the
 // click listener stays only while the guard is armed.
 //
+// An arm at a claimed touch's lift also takes that touch's late `mousedown`
+// and `mouseup`. WebKit sends them a few ms after a held tap's cancelled
+// `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;
@@ -45,6 +55,19 @@ export interface ClickGuardOptions {
    * @default false
    */
   readonly staysInstalled?: boolean;
+  /**
+   * The gesture host's arm at a claimed touch's lift: the guard also takes
+   * that touch's late `mousedown` and `mouseup` while it is armed.
+   * @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 {
@@ -78,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}: ClickGuardOptions = {},
+  {
+    staysInstalled = false,
+    takesLateMouse = false,
+    cancelsTouchEnd = false,
+  }: ClickGuardOptions = {},
 ): void {
   const view = doc.defaultView;
   if (view == null) {
@@ -98,6 +125,33 @@ export function armClickGuard(
     // The next press is a new gesture: its click must never be eaten.
     subscribeInput(view, 'pointerdown', () => disarmClickGuard(doc)),
   );
+  if (takesLateMouse) {
+    for (const type of ['mousedown', 'mouseup'] as const) {
+      guard.unsubscribers.push(
+        subscribeInput(view, type, swallowLateMouse, {cancels: true}),
+      );
+    }
+  }
+  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);
 }
 
@@ -149,6 +203,15 @@ export function __resetClickGuardForTest(): void {
   }
 }
 
+/** Swallows a claimed touch's late `mousedown` or `mouseup`. */
+function swallowLateMouse(event: MouseEvent): void {
+  if (isExempt(event)) {
+    return;
+  }
+  event.preventDefault();
+  event.stopImmediatePropagation();
+}
+
 function isExempt(event: MouseEvent): boolean {
   if (event.detail === 0 || unguardedDepth > 0) {
     return true;

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;
   }