@astryxdesign/core 0.7.7-canary.550ff21 → 0.7.7-canary.58c5b8a

package/dist/utils/browserClickWait.d.ts

@@ -0,0 +1,35 @@
+/**
+ * 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 declare 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 declare function awaitBrowserClick(target: Element, { onClicked, onNoClick }: BrowserClickWaitHandlers): () => void;
+/**
+ * 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 declare function clickAndReport(element: HTMLElement): boolean;
+/**
+ * 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 declare function clickForLift(element: HTMLElement): boolean;
+//# sourceMappingURL=browserClickWait.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"browserClickWait.d.ts","sourceRoot":"","sources":["../../src/utils/browserClickWait.ts"],"names":[],"mappings":"AAkBA;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC,uEAAuE;AACvE,MAAM,WAAW,wBAAwB;IACvC,6EAA6E;IAC7E,QAAQ,CAAC,SAAS,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD,qCAAqC;IACrC,QAAQ,CAAC,SAAS,EAAE,MAAM,IAAI,CAAC;CAChC;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,OAAO,EACf,EAAC,SAAS,EAAE,SAAS,EAAC,EAAE,wBAAwB,GAC/C,MAAM,IAAI,CAwDZ;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAe5D;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAG1D"}

package/dist/utils/browserClickWait.js

@@ -0,0 +1,123 @@
+// 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.js";
+import { subscribeInput } from "./inputStream.js";
+
+/**
+ * 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. */
+
+/**
+ * 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, {
+  onClicked,
+  onNoClick
+}) {
+  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 = null;
+  let timer = null;
+  let stopListening = 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)) {
+      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) {
+  const view = element.ownerDocument.defaultView;
+  let clicked = null;
+  const grab = 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?.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) {
+  armClickGuard(element.ownerDocument);
+  return withoutClickGuard(() => clickAndReport(element));
+}

package/dist/utils/clickGuard.d.ts

@@ -12,9 +12,22 @@ 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;
 }
 /** Swallow the browser's next click on `doc` (see the file header). */
-export declare function armClickGuard(doc: Document, { staysInstalled }?: ClickGuardOptions): void;
+export declare function armClickGuard(doc: Document, { staysInstalled, takesLateMouse, cancelsTouchEnd, }?: ClickGuardOptions): void;
 /** Stop swallowing on `doc`; idempotent. */
 export declare function disarmClickGuard(doc: Document): void;
 /** Whether the guard on `doc` would swallow the next click. */

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

@@ -1 +1 @@
-{"version":3,"file":"clickGuard.d.ts","sourceRoot":"","sources":["../../src/utils/clickGuard.ts"],"names":[],"mappings":"AAgCA;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC,yCAAyC;AACzC,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;CACnC;AA8BD,uEAAuE;AACvE,wBAAgB,aAAa,CAC3B,GAAG,EAAE,QAAQ,EACb,EAAC,cAAsB,EAAC,GAAE,iBAAsB,GAC/C,IAAI,CAoBN;AAED,4CAA4C;AAC5C,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,CAYpD;AAED,+DAA+D;AAC/D,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,QAAQ,GAAG,OAAO,CAExD;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,GAAG,CAAC,CAOzD;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,IAAI,IAAI,CAQ/C"}
+{"version":3,"file":"clickGuard.d.ts","sourceRoot":"","sources":["../../src/utils/clickGuard.ts"],"names":[],"mappings":"AA0CA;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC,yCAAyC;AACzC,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC;;;;OAIG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC;;;;;OAKG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;CACpC;AA8BD,uEAAuE;AACvE,wBAAgB,aAAa,CAC3B,GAAG,EAAE,QAAQ,EACb,EACE,cAAsB,EACtB,cAAsB,EACtB,eAAuB,GACxB,GAAE,iBAAsB,GACxB,IAAI,CA+CN;AAED,4CAA4C;AAC5C,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,CAYpD;AAED,+DAA+D;AAC/D,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,QAAQ,GAAG,OAAO,CAExD;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,GAAG,CAAC,CAOzD;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,IAAI,IAAI,CAQ/C"}

package/dist/utils/clickGuard.js

@@ -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;
@@ -61,7 +71,9 @@ function listenForClicks(view) {
 
 /** Swallow the browser's next click on `doc` (see the file header). */
 export function armClickGuard(doc, {
-  staysInstalled = false
+  staysInstalled = false,
+  takesLateMouse = false,
+  cancelsTouchEnd = false
 } = {}) {
   const view = doc.defaultView;
   if (view == null) {
@@ -83,6 +95,30 @@ export function armClickGuard(doc, {
   guard.unsubscribers.push(
   // 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']) {
+      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);
 }
 
@@ -133,6 +169,15 @@ export function __resetClickGuardForTest() {
     stayingClickListeners.delete(window);
   }
 }
+
+/** Swallows a claimed touch's late `mousedown` or `mouseup`. */
+function swallowLateMouse(event) {
+  if (isExempt(event)) {
+    return;
+  }
+  event.preventDefault();
+  event.stopImmediatePropagation();
+}
 function isExempt(event) {
   if (event.detail === 0 || unguardedDepth > 0) {
     return true;

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

@@ -1 +1 @@
-{"version":3,"file":"dateParser.d.ts","sourceRoot":"","sources":["../../src/utils/dateParser.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAqC,MAAM,aAAa,CAAC;AAC/E,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,eAAe,CAAC;AAE1C,OAAO,EACL,gBAAgB,IAAI,QAAQ,EAC5B,cAAc,IAAI,SAAS,GAC5B,MAAM,aAAa,CAAC;AAErB;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,GAAE,MAAa,GAAG,OAAO,CAO/D;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,EACb,MAAM,GAAE,MAAa,GACpB,SAAS,GAAG,IAAI,CAsGlB"}
+{"version":3,"file":"dateParser.d.ts","sourceRoot":"","sources":["../../src/utils/dateParser.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAqC,MAAM,aAAa,CAAC;AAC/E,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,eAAe,CAAC;AAE1C,OAAO,EACL,gBAAgB,IAAI,QAAQ,EAC5B,cAAc,IAAI,SAAS,GAC5B,MAAM,aAAa,CAAC;AAErB;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,GAAE,MAAa,GAAG,OAAO,CAO/D;AAOD;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,EACb,MAAM,GAAE,MAAa,GACpB,SAAS,GAAG,IAAI,CAiHlB"}

package/dist/utils/dateParser.js

@@ -27,6 +27,11 @@ export function isLocaleDayFirst(locale = 'en') {
   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.
  *
@@ -122,6 +127,13 @@ export function parseDateInput(input, locale = 'en') {
   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())) {
     const fromDate = plainDateFromDate(parsed);

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

@@ -9,8 +9,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.
  */
 import * as stylex from '@stylexjs/stylex';
 /**

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;;;;;;;;;;;;;GAaG;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;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW;IACtB,iEAAiE;;CAEjE,CAAC;AA8HH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8HnC,CAAC"}

package/dist/utils/interactionOverlay.stylex.js

@@ -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/dist/utils/pressFeedback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pressFeedback.d.ts","sourceRoot":"","sources":["../../src/utils/pressFeedback.ts"],"names":[],"mappings":"AAgDA;;;;;;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;AAwnB5C;;;;;;;;;;;;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;AAwoB5C;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,IAAI,CA0BjD"}

package/dist/utils/pressFeedback.js

@@ -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
@@ -37,6 +37,8 @@ import { idlePressGesture, PRESS_FADE_MS, PRESS_FLASH_MS, PRESS_ONSET_MS, PRESS_
 import { isCoarsePointer, watchCoarsePointer } from "./coarsePointer.js";
 import { subscribeInput } from "./inputStream.js";
 import { TOUCH_QUERY } from "./touchPresentation.js";
+import { holdsPressThroughDrag } from "../privateAttributes/pressHoldsDrag.stylex.js";
+import { isTrackedByGroup } from "../privateAttributes/pressGroupItem.stylex.js";
 
 /**
  * The marker the controller finds with `closest()`. Every Astryx component
@@ -287,14 +289,19 @@ function stylesheetDroppedActive() {
 
 /**
  * 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, pointerId) {
   const element = surfaceAt(target);
   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;
   }
@@ -378,7 +385,9 @@ function onPointerDown(event) {
   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);
@@ -399,6 +408,10 @@ function onPointerMove(event) {
   if (live == null || live.pointerId != null && event.pointerId !== live.pointerId) {
     return;
   }
+  // The finger drags the surface's own control: its travel keeps the press.
+  if (holdsPressThroughDrag(live.element)) {
+    return;
+  }
   apply(finger, pressGestureStep(live.gesture, {
     kind: 'move',
     x: event.clientX,
@@ -504,6 +517,11 @@ function activatesOnSpace(target) {
   return target instanceof HTMLInputElement && SPACE_ACTIVATED_INPUT_TYPES.has(target.type);
 }
 
+/** A tracked action takes no `:active` paint, so a key's press paints here. */
+function isTrackedAction(target) {
+  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
@@ -511,7 +529,7 @@ function activatesOnSpace(target) {
  * not engage for one.
  */
 function onKeyDown(event) {
-  if (event.key !== ' ' || event.repeat || event.isComposing || event.defaultPrevented || !activatesOnSpace(event.target) || !stylesheetDroppedActive()) {
+  if (event.key !== ' ' || event.repeat || event.isComposing || event.defaultPrevented || !activatesOnSpace(event.target) || !(stylesheetDroppedActive() || isTrackedAction(event.target))) {
     return;
   }
   pressButton(event.target, null);

package/locales/en.json

@@ -255,6 +255,126 @@
     "defaultMessage": "{count, number} {count, plural, one {result} other {results}}",
     "description": "Live result-count text next to the PowerSearch input, announced to screen readers on change. Example: `12 results`, `1 result`; keep compact."
   },
+  "@astryx.powersearch.sheet.filtersTitle": {
+    "defaultMessage": "Filters",
+    "description": "Heading and accessible name of the PowerSearch touch sheet that lists the active filters (experimental bottom-sheet presentation). Plural noun."
+  },
+  "@astryx.powersearch.sheet.addFilter": {
+    "defaultMessage": "Add filter",
+    "description": "Button label in the PowerSearch touch flow: in the Filters sheet header it opens the field list; in the value step it confirms a new filter. Imperative verb; no leading plus sign."
+  },
+  "@astryx.powersearch.sheet.noFilters": {
+    "defaultMessage": "No filters applied",
+    "description": "Heading of the PowerSearch Filters sheet empty state when no filter is active (experimental bottom-sheet presentation). Neutral tone."
+  },
+  "@astryx.powersearch.sheet.noFiltersDescription": {
+    "defaultMessage": "Add a filter to narrow your results and find what you need faster.",
+    "description": "Guidance line under the PowerSearch Filters sheet empty state, above its Add filter action. One short sentence."
+  },
+  "@astryx.powersearch.sheet.clearAll": {
+    "defaultMessage": "Clear all",
+    "description": "Button label in the PowerSearch Filters sheet footer that asks to remove every editable filter. Imperative verb + determiner."
+  },
+  "@astryx.powersearch.sheet.clearAllTitle": {
+    "defaultMessage": "Clear all filters?",
+    "description": "Title and accessible name of the confirmation dialog that Clear all opens in the PowerSearch touch flow. A short question."
+  },
+  "@astryx.powersearch.sheet.clearAllDescription": {
+    "defaultMessage": "This removes all editable filters from this search.",
+    "description": "Body text of the PowerSearch Clear all confirmation dialog. Read-only filters stay, so it names editable filters."
+  },
+  "@astryx.powersearch.sheet.clearAllConfirm": {
+    "defaultMessage": "Clear filters",
+    "description": "Destructive action of the PowerSearch Clear all confirmation dialog: removes the editable filters. Imperative verb + plural noun."
+  },
+  "@astryx.powersearch.sheet.clearAllCancel": {
+    "defaultMessage": "Keep filters",
+    "description": "Safe action of the PowerSearch Clear all confirmation dialog: closes it and changes nothing. Imperative verb + plural noun."
+  },
+  "@astryx.powersearch.sheet.done": {
+    "defaultMessage": "Done",
+    "description": "Primary button label in the PowerSearch Filters sheet footer that closes the sheet. Short; marks the end of the filtering task."
+  },
+  "@astryx.powersearch.sheet.search": {
+    "defaultMessage": "Search",
+    "description": "Screen-reader-only label of the content-search box at the top of the PowerSearch Add filter sheet; its suggestions list inline below it. Noun or verb as reads best."
+  },
+  "@astryx.powersearch.sheet.searchResults": {
+    "defaultMessage": "Search results",
+    "description": "Screen-reader-only name of the inline suggestion list under the PowerSearch Add filter sheet's content search. Plural noun."
+  },
+  "@astryx.powersearch.sheet.searchFields": {
+    "defaultMessage": "Search filters",
+    "description": "Screen-reader-only label of the field-list filter box in the PowerSearch Add filter sheet, shown once the config has eight or more fields. Imperative verb + plural noun."
+  },
+  "@astryx.powersearch.sheet.searchFieldsPlaceholder": {
+    "defaultMessage": "Search filters…",
+    "description": "Placeholder inside the field-list filter box in the PowerSearch Add filter sheet. Imperative verb; trailing `…` is one character."
+  },
+  "@astryx.powersearch.sheet.ungroupedFields": {
+    "defaultMessage": "General",
+    "description": "Heading of the PowerSearch Add filter sheet's list of fields that belong to no group, shown before the named groups. A short noun."
+  },
+  "@astryx.powersearch.sheet.noMatchingFields": {
+    "defaultMessage": "No filters match your search",
+    "description": "Empty-state text in the PowerSearch Add filter sheet when the field-list filter matches no field. Neutral tone."
+  },
+  "@astryx.powersearch.sheet.tryDifferentSearch": {
+    "defaultMessage": "Try a different search.",
+    "description": "Guidance line under the PowerSearch Add filter sheet's empty search result (\"No results found\", \"No filters match your search\"). One short sentence."
+  },
+  "@astryx.powersearch.sheet.noResults": {
+    "defaultMessage": "No results found",
+    "description": "Empty-state text in the PowerSearch Add filter sheet when the content search has no suggestion for the typed query. Neutral tone (not error-y)."
+  },
+  "@astryx.powersearch.sheet.filterUnavailable": {
+    "defaultMessage": "This filter is no longer available",
+    "description": "Message in the PowerSearch value step when a config update removed the field or operator being edited; Cancel remains as the way out, and the Filters row keeps its remove action."
+  },
+  "@astryx.powersearch.sheet.removeFilter": {
+    "defaultMessage": "Remove {field} filter",
+    "description": "Accessible name and tooltip of the trailing remove button on a PowerSearch Filters sheet row; field is the filter's field label (for example \"Remove Status filter\")."
+  },
+  "@astryx.powersearch.sheet.relativeDaysAgo": {
+    "defaultMessage": "{count, number} {count, plural, one {day} other {days}} ago",
+    "description": "A relative-date choice row in the PowerSearch touch sheet, in the past (for example \"3 days ago\"). The popover editor lists the same choices."
+  },
+  "@astryx.powersearch.sheet.relativeDaysFromNow": {
+    "defaultMessage": "{count, number} {count, plural, one {day} other {days}} from now",
+    "description": "A relative-date choice row in the PowerSearch touch sheet, in the future (for example \"3 days from now\"). The popover editor lists the same choices."
+  },
+  "@astryx.powersearch.sheet.relativeWeeksAgo": {
+    "defaultMessage": "{count, number} {count, plural, one {week} other {weeks}} ago",
+    "description": "A relative-date choice row in the PowerSearch touch sheet, in the past (for example \"3 weeks ago\"). The popover editor lists the same choices."
+  },
+  "@astryx.powersearch.sheet.relativeWeeksFromNow": {
+    "defaultMessage": "{count, number} {count, plural, one {week} other {weeks}} from now",
+    "description": "A relative-date choice row in the PowerSearch touch sheet, in the future (for example \"3 weeks from now\"). The popover editor lists the same choices."
+  },
+  "@astryx.powersearch.sheet.relativeMonthsAgo": {
+    "defaultMessage": "{count, number} {count, plural, one {month} other {months}} ago",
+    "description": "A relative-date choice row in the PowerSearch touch sheet, in the past (for example \"3 months ago\"). The popover editor lists the same choices."
+  },
+  "@astryx.powersearch.sheet.relativeMonthsFromNow": {
+    "defaultMessage": "{count, number} {count, plural, one {month} other {months}} from now",
+    "description": "A relative-date choice row in the PowerSearch touch sheet, in the future (for example \"3 months from now\"). The popover editor lists the same choices."
+  },
+  "@astryx.powersearch.sheet.fieldOperator": {
+    "defaultMessage": "{field} {operator}",
+    "description": "A field label joined with an operator label in the PowerSearch touch sheet: the value step's title, an operator radio's name, and the first part of a Filters row (for example \"Status is\"). Translators may reorder the two parts."
+  },
+  "@astryx.powersearch.sheet.labelValue": {
+    "defaultMessage": "{label} {value}",
+    "description": "A Filters row's \"field operator\" text joined with its value, as the removal announcement reads it (for example \"Status is Open\"). Translators may reorder the two parts."
+  },
+  "@astryx.powersearch.sheet.filtersClearedWithCount": {
+    "defaultMessage": "All filters removed. {resultCount}",
+    "description": "Polite screen-reader announcement after Clear all in the PowerSearch touch sheet when the result count changed with it; resultCount is the field's already formatted result count (for example \"240 results\"). Live-region text, never shown on screen."
+  },
+  "@astryx.powersearch.sheet.editableFiltersClearedWithCount": {
+    "defaultMessage": "Editable filters removed. {resultCount}",
+    "description": "Polite screen-reader announcement after Clear all in the PowerSearch touch sheet removes the editable filters, keeps read-only ones, and the result count changed with it; resultCount is the field's already formatted result count (for example \"240 results\"). Live-region text, never shown on screen."
+  },
   "@astryx.alertDialog.cancel": {
     "defaultMessage": "Cancel",
     "description": "Button label on the secondary/dismiss button of an AlertDialog (modal confirmation). Imperative verb; consumers usually override with task-specific text."
@@ -1123,6 +1243,10 @@
     "defaultMessage": "All filters removed",
     "description": "Screen-reader announcement after a PowerSearch field's Clear all removes every filter. Distinct from @astryx.tokenizer.allRemoved: PowerSearch words its items as filters."
   },
+  "@astryx.powersearch.editableFiltersRemoved": {
+    "defaultMessage": "Editable filters removed",
+    "description": "Screen-reader announcement after a PowerSearch field's Clear all removes the filters the user can edit and keeps its read-only filters. Used instead of @astryx.powersearch.allFiltersRemoved while a read-only filter remains."
+  },
   "@astryx.resizable.collapsed": {
     "defaultMessage": "Collapsed",
     "description": "aria-valuetext for the Resizable drag handle (role=separator) while its panel is collapsed to zero size. Replaces the numeric value announcement, since the numeric value is clamped to the minimum while collapsed. Adjective describing the panel state, not a verb/command."
@@ -2270,5 +2394,9 @@
   "@astryx.comments.postFailed": {
     "defaultMessage": "Your comment couldn't be posted.",
     "description": "Error shown above the new-comment composer of a lab Comments panel when posting failed; the draft is kept and a Retry action follows."
+  },
+  "@astryx.infoTip.label": {
+    "defaultMessage": "More information",
+    "description": "Default accessible name of an InfoTip, the small info-icon button whose press reveals help about the label, value, or metric beside it."
   }
 }