@astryxdesign/core 0.7.7 → 0.7.8-canary.07ee4b5

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
@@ -38,6 +38,7 @@ 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
@@ -288,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 tracker that follows a mouse paints a mouse press on its own actions.
+  if (pointerId != null && isTrackedByGroup(element, 'mouse')) {
+    return null;
+  }
   if (pointerId == null && element !== target) {
     return null;
   }
@@ -379,7 +385,10 @@ 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 that follows this pointer paints its action, so two
+  // writers would erase each other's paint. The touch still counts for the
+  // brake above.
+  if (element == null || braking || isTrackedByGroup(element, event.pointerType)) {
     return;
   }
   takeOver(button, element);
@@ -509,6 +518,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
@@ -516,7 +530,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/dist/utils/triggerFocus.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @file triggerFocus.ts
+ * @input A focus event on a hover-layer trigger and its focusTrigger value
+ * @output Whether that focus counts as focus on the trigger, and a gate that
+ *   remembers it for the matching blur
+ * @position Shared focus-trigger judgement for Tooltip and HoverCard
+ */
+/** When focus on a trigger opens its layer. */
+export type TriggerFocusMode = 'auto' | 'always' | 'never';
+/** Whether `element` is in the tab order or naturally focusable. */
+export declare function isFocusableTrigger(element: HTMLElement): boolean;
+/**
+ * Whether a focus event on a trigger (its `currentTarget`) counts as focus on
+ * the trigger.
+ *
+ * Under `auto` it is decided when focus arrives, not when listeners attach: a
+ * roving-tabindex member that was `tabindex="-1"` then can be the tab stop
+ * now. A trigger that receives focus is focusable by definition, which covers
+ * focusable elements this check does not list, such as a `<summary>` or an SVG
+ * link. Focus inside the trigger counts only while the trigger is focusable
+ * too, so a plain wrapper ignores its children's focus.
+ */
+export declare function isFocusForTrigger(event: Event, mode: TriggerFocusMode): boolean;
+/** Remembers whether a trigger's current focus counted when it arrived. */
+export interface TriggerFocusGate {
+    /** On focusin: whether this focus opens the layer. */
+    focusIn(event: Event, mode: TriggerFocusMode): boolean;
+    /**
+     * On focusout: whether this blur closes the layer. A focus that counted
+     * closes on blur even if the trigger has since left the tab order.
+     */
+    focusOut(event: Event, mode: TriggerFocusMode): boolean;
+}
+/** A gate for one trigger; each hook keeps one for its lifetime. */
+export declare function createTriggerFocusGate(): TriggerFocusGate;
+//# sourceMappingURL=triggerFocus.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"triggerFocus.d.ts","sourceRoot":"","sources":["../../src/utils/triggerFocus.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,+CAA+C;AAC/C,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3D,oEAAoE;AACpE,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAShE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,gBAAgB,GACrB,OAAO,CAWT;AAED,2EAA2E;AAC3E,MAAM,WAAW,gBAAgB;IAC/B,sDAAsD;IACtD,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,gBAAgB,GAAG,OAAO,CAAC;IACvD;;;OAGG;IACH,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,gBAAgB,GAAG,OAAO,CAAC;CACzD;AAED,oEAAoE;AACpE,wBAAgB,sBAAsB,IAAI,gBAAgB,CAezD"}

package/dist/utils/triggerFocus.js

@@ -0,0 +1,65 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file triggerFocus.ts
+ * @input A focus event on a hover-layer trigger and its focusTrigger value
+ * @output Whether that focus counts as focus on the trigger, and a gate that
+ *   remembers it for the matching blur
+ * @position Shared focus-trigger judgement for Tooltip and HoverCard
+ */
+
+/** When focus on a trigger opens its layer. */
+
+/** Whether `element` is in the tab order or naturally focusable. */
+export function isFocusableTrigger(element) {
+  if (element.hasAttribute('tabindex')) {
+    return element.tabIndex >= 0;
+  }
+  const focusableTags = ['A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'];
+  if (focusableTags.includes(element.tagName)) {
+    return !element.disabled;
+  }
+  return element.isContentEditable;
+}
+
+/**
+ * Whether a focus event on a trigger (its `currentTarget`) counts as focus on
+ * the trigger.
+ *
+ * Under `auto` it is decided when focus arrives, not when listeners attach: a
+ * roving-tabindex member that was `tabindex="-1"` then can be the tab stop
+ * now. A trigger that receives focus is focusable by definition, which covers
+ * focusable elements this check does not list, such as a `<summary>` or an SVG
+ * link. Focus inside the trigger counts only while the trigger is focusable
+ * too, so a plain wrapper ignores its children's focus.
+ */
+export function isFocusForTrigger(event, mode) {
+  if (mode === 'always') {
+    return true;
+  }
+  if (mode === 'never') {
+    return false;
+  }
+  const trigger = event.currentTarget;
+  return trigger != null && (event.target === trigger || isFocusableTrigger(trigger));
+}
+
+/** Remembers whether a trigger's current focus counted when it arrived. */
+
+/** A gate for one trigger; each hook keeps one for its lifetime. */
+export function createTriggerFocusGate() {
+  let isCounted = false;
+  return {
+    focusIn(event, mode) {
+      isCounted = isFocusForTrigger(event, mode);
+      return isCounted;
+    },
+    focusOut(event, mode) {
+      if (!isCounted && !isFocusForTrigger(event, mode)) {
+        return false;
+      }
+      isCounted = false;
+      return true;
+    }
+  };
+}

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."

package/locales/pseudo.json

@@ -191,6 +191,96 @@
   "@astryx.powersearch.resultCount": {
     "defaultMessage": "⟦{count, number} {count, plural, one {result} other {results}}⟧"
   },
+  "@astryx.powersearch.sheet.filtersTitle": {
+    "defaultMessage": "⟦Ƒíłţéřš⟧"
+  },
+  "@astryx.powersearch.sheet.addFilter": {
+    "defaultMessage": "⟦Àðð ƒíłţéř⟧"
+  },
+  "@astryx.powersearch.sheet.noFilters": {
+    "defaultMessage": "⟦Ñó ƒíłţéřš àþþłíéð⟧"
+  },
+  "@astryx.powersearch.sheet.noFiltersDescription": {
+    "defaultMessage": "⟦Àðð à ƒíłţéř ţó ñàřřóŵ ýóúř řéšúłţš àñð ƒíñð ŵĥàţ ýóú ñééð ƒàšţéř.⟧"
+  },
+  "@astryx.powersearch.sheet.clearAll": {
+    "defaultMessage": "⟦Çłéàř àłł⟧"
+  },
+  "@astryx.powersearch.sheet.clearAllTitle": {
+    "defaultMessage": "⟦Çłéàř àłł ƒíłţéřš?⟧"
+  },
+  "@astryx.powersearch.sheet.clearAllDescription": {
+    "defaultMessage": "⟦Ţĥíš řéɱóṽéš àłł éðíţàƀłé ƒíłţéřš ƒřóɱ ţĥíš šéàřçĥ.⟧"
+  },
+  "@astryx.powersearch.sheet.clearAllConfirm": {
+    "defaultMessage": "⟦Çłéàř ƒíłţéřš⟧"
+  },
+  "@astryx.powersearch.sheet.clearAllCancel": {
+    "defaultMessage": "⟦Ķééþ ƒíłţéřš⟧"
+  },
+  "@astryx.powersearch.sheet.done": {
+    "defaultMessage": "⟦Ðóñé⟧"
+  },
+  "@astryx.powersearch.sheet.search": {
+    "defaultMessage": "⟦Šéàřçĥ⟧"
+  },
+  "@astryx.powersearch.sheet.searchResults": {
+    "defaultMessage": "⟦Šéàřçĥ řéšúłţš⟧"
+  },
+  "@astryx.powersearch.sheet.searchFields": {
+    "defaultMessage": "⟦Šéàřçĥ ƒíłţéřš⟧"
+  },
+  "@astryx.powersearch.sheet.searchFieldsPlaceholder": {
+    "defaultMessage": "⟦Šéàřçĥ ƒíłţéřš…⟧"
+  },
+  "@astryx.powersearch.sheet.ungroupedFields": {
+    "defaultMessage": "⟦Ĝéñéřàł⟧"
+  },
+  "@astryx.powersearch.sheet.noMatchingFields": {
+    "defaultMessage": "⟦Ñó ƒíłţéřš ɱàţçĥ ýóúř šéàřçĥ⟧"
+  },
+  "@astryx.powersearch.sheet.tryDifferentSearch": {
+    "defaultMessage": "⟦Ţřý à ð탃éřéñţ šéàřçĥ.⟧"
+  },
+  "@astryx.powersearch.sheet.noResults": {
+    "defaultMessage": "⟦Ñó řéšúłţš ƒóúñð⟧"
+  },
+  "@astryx.powersearch.sheet.filterUnavailable": {
+    "defaultMessage": "⟦Ţĥíš ƒíłţéř íš ñó łóñĝéř àṽàíłàƀłé⟧"
+  },
+  "@astryx.powersearch.sheet.removeFilter": {
+    "defaultMessage": "⟦Řéɱóṽé {field} ƒíłţéř⟧"
+  },
+  "@astryx.powersearch.sheet.relativeDaysAgo": {
+    "defaultMessage": "⟦{count, number} {count, plural, one {day} other {days}} àĝó⟧"
+  },
+  "@astryx.powersearch.sheet.relativeDaysFromNow": {
+    "defaultMessage": "⟦{count, number} {count, plural, one {day} other {days}} ƒřóɱ ñóŵ⟧"
+  },
+  "@astryx.powersearch.sheet.relativeWeeksAgo": {
+    "defaultMessage": "⟦{count, number} {count, plural, one {week} other {weeks}} àĝó⟧"
+  },
+  "@astryx.powersearch.sheet.relativeWeeksFromNow": {
+    "defaultMessage": "⟦{count, number} {count, plural, one {week} other {weeks}} ƒřóɱ ñóŵ⟧"
+  },
+  "@astryx.powersearch.sheet.relativeMonthsAgo": {
+    "defaultMessage": "⟦{count, number} {count, plural, one {month} other {months}} àĝó⟧"
+  },
+  "@astryx.powersearch.sheet.relativeMonthsFromNow": {
+    "defaultMessage": "⟦{count, number} {count, plural, one {month} other {months}} ƒřóɱ ñóŵ⟧"
+  },
+  "@astryx.powersearch.sheet.fieldOperator": {
+    "defaultMessage": "⟦{field} {operator}⟧"
+  },
+  "@astryx.powersearch.sheet.labelValue": {
+    "defaultMessage": "⟦{label} {value}⟧"
+  },
+  "@astryx.powersearch.sheet.filtersClearedWithCount": {
+    "defaultMessage": "⟦Àłł ƒíłţéřš řéɱóṽéð. {resultCount}⟧"
+  },
+  "@astryx.powersearch.sheet.editableFiltersClearedWithCount": {
+    "defaultMessage": "⟦Éðíţàƀłé ƒíłţéřš řéɱóṽéð. {resultCount}⟧"
+  },
   "@astryx.alertDialog.cancel": {
     "defaultMessage": "⟦Çàñçéł⟧"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.7.7",
+  "version": "0.7.8-canary.07ee4b5",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -824,15 +824,20 @@
       "types": "./dist/Markdown/remark.d.ts",
       "default": "./dist/Markdown/remark.js"
     },
+    "./internal/indicatorPress.stylex": {
+      "source": "./src/internal/indicatorPress.stylex.ts",
+      "types": "./dist/internal/indicatorPress.stylex.d.ts",
+      "default": "./dist/internal/indicatorPress.stylex.js"
+    },
     "./internal/touch": {
       "source": "./src/internal/touch.ts",
       "types": "./dist/internal/touch.d.ts",
       "default": "./dist/internal/touch.js"
     },
-    "./internal/touch-sheet": {
-      "source": "./src/internal/touch-sheet.ts",
-      "types": "./dist/internal/touch-sheet.d.ts",
-      "default": "./dist/internal/touch-sheet.js"
+    "./internal/selectable-card": {
+      "source": "./src/internal/selectable-card.ts",
+      "types": "./dist/internal/selectable-card.d.ts",
+      "default": "./dist/internal/selectable-card.js"
     }
   },
   "files": [
@@ -865,6 +870,9 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
+    "@astryxdesign/a11y-spec": "0.7.8-canary.07ee4b5",
+    "@astryxdesign/cli": "0.7.8-canary.07ee4b5",
+    "@astryxdesign/interaction-harness": "0.7.8-canary.07ee4b5",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",
@@ -875,10 +883,7 @@
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.3.2",
     "@types/babel__core": "^7.20.5",
-    "tailwindcss": "^4.3.2",
-    "@astryxdesign/a11y-spec": "0.0.0",
-    "@astryxdesign/interaction-harness": "0.0.0",
-    "@astryxdesign/cli": "0.7.7"
+    "tailwindcss": "^4.3.2"
   },
   "dependencies": {
     "intl-messageformat": "^11.2.9"

package/src/AlertDialog/AlertDialog.doc.mjs

@@ -21,7 +21,7 @@ export const docs = {
   ],
   usage: {
     description:
-      'AlertDialog asks the user to confirm a destructive or irreversible action before it happens. Use it for things like deleting content, revoking access, or discarding unsaved changes.\n\nIt implements the WAI-ARIA APG [Alert Dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/): `role="alertdialog"`, a title linked by `aria-labelledby`, a consequence description linked by `aria-describedby`, focus moved into the dialog on open and returned to the trigger on close, and no dismissal by clicking outside. Escape cancels.\n\nAlertDialog passes its requested width through to Dialog, which clamps the surface to the container and dynamic viewport with token gutters. Generic Dialog footers should wrap, but Dialog does not own action semantics or order; consumer composition controls that. AlertDialog owns its confirmation semantics: above 640px, actions render horizontally and may move onto another row; at 640px and below, the destructive action appears above Cancel and both buttons fill the footer width. Button labels retain their standard single-line behavior. The breakpoint follows available width, not pointer or hover capability. The body scrolls when block space is constrained.\n\nFor cases where you want to show an alert without managing open state, use the `useImperativeAlertDialog` hook: call `alert.show(options)` and render `alert.element` in your tree.',
+      'AlertDialog asks the user to confirm a destructive or irreversible action before it happens. Use it for things like deleting content, revoking access, or discarding unsaved changes.\n\nIt implements the WAI-ARIA APG [Alert Dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/): `role="alertdialog"`, a title linked by `aria-labelledby`, a consequence description linked by `aria-describedby`, focus moved into the dialog on open and returned to the trigger on close, and no dismissal by clicking outside. Escape cancels.\n\nAlertDialog passes its requested width through to Dialog, which clamps the surface to the container and dynamic viewport with token gutters. Generic Dialog footers should wrap, but Dialog does not own action semantics or order; consumer composition controls that. AlertDialog owns its confirmation semantics: above 640px, actions render horizontally and may move onto another row; at 640px and below, the destructive action appears above Cancel and both buttons fill the footer width. Button labels retain their standard single-line behavior. The breakpoint follows available width, not pointer or hover capability. The body scrolls when block space is constrained.\n\nThe two actions are tracked as one group under every pointer, the way iOS tracks the actions of an alert: the action under the pointer highlights as soon as it is pressed, the highlight follows the pointer from one action to the other, and the release runs the action under it. Releasing off both actions runs nothing. The keyboard and assistive technology keep the click of each button.\n\nFor cases where you want to show an alert without managing open state, use the `useImperativeAlertDialog` hook: call `alert.show(options)` and render `alert.element` in your tree.',
     bestPractices: [
       {
         guidance: true,
@@ -196,7 +196,7 @@ export const docsDense = {
     'Confirms destructive/irreversible action before it happens (delete, revoke access, discard unsaved changes).',
   usage: {
     description:
-      'AlertDialog confirms destructive/irreversible action (delete, revoke access, discard changes). Implements WAI-ARIA APG Alert Dialog pattern (https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/): role="alertdialog", aria-labelledby title, aria-describedby description, focus into dialog on open + back to trigger on close, no outside-click dismissal, Escape cancels. Dialog preserves requested width + clamps it to container/dynamic viewport gutters. Generic Dialog footers wrap while consumers own action order. AlertDialog owns confirmation action layout: >640px horizontal buttons may move to another row; <=640px puts the destructive action above Cancel and makes both buttons full width regardless of pointer/hover capability. Button labels remain single-line. Body scrolls when height constrained. To show w/o managing open state, use useImperativeAlertDialog hook: call alert.show(options) + render alert.element in tree.',
+      'AlertDialog confirms destructive/irreversible action (delete, revoke access, discard changes). Implements WAI-ARIA APG Alert Dialog pattern (https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/): role="alertdialog", aria-labelledby title, aria-describedby description, focus into dialog on open + back to trigger on close, no outside-click dismissal, Escape cancels. Dialog preserves requested width + clamps it to container/dynamic viewport gutters. Generic Dialog footers wrap while consumers own action order. AlertDialog owns confirmation action layout: >640px horizontal buttons may move to another row; <=640px puts the destructive action above Cancel and makes both buttons full width regardless of pointer/hover capability. Button labels remain single-line. Body scrolls when height constrained. Every pointer: both actions tracked as one group like iOS alerts (action under pointer highlights at once, highlight follows pointer between actions, release runs action under pointer, release off both runs nothing); keyboard/AT keep each button click. To show w/o managing open state, use useImperativeAlertDialog hook: call alert.show(options) + render alert.element in tree.',
     bestPractices: [
       {
         guidance: true,

package/src/AlertDialog/AlertDialog.tsx

@@ -4,7 +4,9 @@
 
 /**
  * @file AlertDialog.tsx
- * @input Uses React, StyleX, Dialog, Layout, Heading, Text, Button
+ * @input Uses React, StyleX, Dialog, Layout, Heading, Text, Button, the
+ *   action-group tracking (hooks/useActionGroupTracking) and the press-group
+ *   marker (privateAttributes/pressGroupItem.stylex)
  * @output Exports AlertDialog component, AlertDialogProps type
  * @position Core implementation; consumed by index.ts, tested by AlertDialog.test.tsx
  *
@@ -12,11 +14,12 @@
  * - /packages/core/src/AlertDialog/AlertDialog.doc.mjs (props table, features, examples)
  * - /packages/core/src/AlertDialog/AlertDialog.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/AlertDialog/index.ts (exports if types change)
+ * - /packages/core/src/AlertDialog/__tests__/AlertDialog.interaction.browser.spec.ts (touch tracking)
  * - /apps/storybook/stories/AlertDialog.stories.tsx (storybook stories)
  * - /packages/cli/assets/templates/blocks/components/AlertDialog/ (showcase blocks)
  */
 
-import React, {useId, useCallback} from 'react';
+import React, {useId, useCallback, useRef} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {Dialog} from '../Dialog/Dialog';
 import {Layout} from '../Layout/Layout';
@@ -31,17 +34,31 @@ import type {BaseProps} from '../BaseProps';
 import {mergeProps} from '../utils/mergeProps';
 import {themeProps} from '../utils/themeProps';
 import {useMediaQuery} from '../hooks/useMediaQuery';
+import {useTouchPresentation} from '../utils/touchPresentation';
 import {
   registerEnglishFallback,
   useComponentTranslator,
 } from '../i18n/useComponentTranslator';
 import english from '../i18n/generated-english/AlertDialog/AlertDialog.generated';
+import {useActionGroupTracking} from '../hooks/useActionGroupTracking';
+import {PressGroupContext} from '../hooks/pressGroupContext';
+import {alertController} from '../motion/uikit/alert';
+import {pressGroupItemProps} from '../privateAttributes/pressGroupItem.stylex';
 
 registerEnglishFallback(english);
 
+const SLIDING_POINTERS = ['touch', 'pen'] as const;
+const ACTION_TRACKING_PROPS = pressGroupItemProps(SLIDING_POINTERS);
+
 const SMALL_SCREEN_QUERY = '(max-width: 640px)';
 
 const styles = stylex.create({
+  // The browser may pinch-zoom on the actions but never pans there. Chrome on
+  // Android cancels a pointer it pans, which would cancel the group's press.
+  // The gesture host keeps an author's narrower touch-action.
+  trackingRow: {
+    touchAction: 'pinch-zoom',
+  },
   action: {
     maxWidth: '100%',
     minWidth: 0,
@@ -177,6 +194,24 @@ export function AlertDialog({
     onOpenChange(false);
   }, [onOpenChange]);
 
+  // Each action carries the press-group marker from its first render, so the
+  // tracker is its only painter.
+  const actionsRef = useRef<HTMLElement>(null);
+  // Only under the touch presentation does a press slide across the
+  // actions. A desktop press stays the native button's.
+  const {isTouch} = useTouchPresentation();
+  const isTracking = isOpen && isInline !== true && isTouch;
+  useActionGroupTracking(actionsRef, {
+    // The actions row holds only the two buttons.
+    itemSelector: 'button',
+    highlightOnsetMs: alertController.actions.highlightOnsetMs,
+    highlightExpansion: alertController.actions.highlightExpansion,
+    // A mouse press acts as a native button's under any presentation.
+    pointerTypes: SLIDING_POINTERS,
+    isEnabled: isTracking,
+  });
+  const actionTrackingProps = isTracking ? ACTION_TRACKING_PROPS : undefined;
+
   const buttonActionStyle = [
     styles.action,
     isSmallScreen && styles.stackedAction,
@@ -188,6 +223,7 @@ export function AlertDialog({
       label={cancelLabel}
       onClick={handleCancel}
       xstyle={buttonActionStyle}
+      {...actionTrackingProps}
       // Dialog focuses [data-autofocus] itself after showModal(), because
       // React's autoFocus runs during commit while the dialog is invisible.
       // Cancel is least destructive, so it remains the autofocus target even
@@ -203,6 +239,7 @@ export function AlertDialog({
       onClick={onAction}
       isLoading={isActionLoading}
       xstyle={buttonActionStyle}
+      {...actionTrackingProps}
     />
   );
 
@@ -244,13 +281,17 @@ export function AlertDialog({
                 destructive-above-Cancel narrow order because confirmation
                 actions have component-specific meaning here. */}
             <Stack
+              ref={actionsRef}
+              xstyle={isTracking && styles.trackingRow}
               direction={isSmallScreen ? 'vertical' : 'horizontal'}
               gap={2}
               hAlign={isSmallScreen ? 'stretch' : 'end'}
               wrap={isSmallScreen ? 'nowrap' : 'wrap'}>
-              {isSmallScreen
-                ? [actionButton, cancelButton]
-                : [cancelButton, actionButton]}
+              <PressGroupContext value={isTracking}>
+                {isSmallScreen
+                  ? [actionButton, cancelButton]
+                  : [cancelButton, actionButton]}
+              </PressGroupContext>
             </Stack>
           </LayoutFooter>
         }

package/src/AppShell/AppShell.tsx

@@ -59,6 +59,7 @@ import {
   holdLayoutSwap,
   landLayoutGlide,
   layoutMotionFor,
+  layoutStartFor,
   playLayoutFrames,
   playLayoutSwap,
   reportLayoutChange,
@@ -647,6 +648,8 @@ export function AppShell({
   if (isMobileNavOpen && !isMobileNavCloseHeld) {
     setIsMobileNavCloseHeld(true);
   }
+  // Syncs the mobile-nav close hold with a timer. The hold ends after the
+  // slide-out delay.
   useEffect(() => {
     if (!HasActivity || isMobileNavOpen) {
       return;
@@ -814,6 +817,8 @@ export function AppShell({
   const headerRef = useRef<HTMLDivElement>(null);
   const shellRef = useRef<HTMLDivElement>(null);
 
+  // Syncs the header-height CSS variable with a ResizeObserver while the height
+  // is automatic.
   useEffect(() => {
     if (!isAuto || !headerRef.current || !shellRef.current) {
       return;
@@ -996,9 +1001,13 @@ export function AppShell({
         let entering = 0;
         const last = lastSwapRef.current;
         if (last != null && motion.kind === 'spring') {
-          const elapsed =
-            Number(main.ownerDocument.timeline?.currentTime ?? 0) -
-            last.startedAt;
+          // Read at the change's own start, where the glide it retargets
+          // carries on. After a block, that is later than the frame the
+          // timeline still reads.
+          const elapsed = Math.max(
+            0,
+            layoutStartFor(main.ownerDocument) - last.startedAt,
+          );
           if (elapsed < motion.progress.durationMs) {
             const p = 1 - motion.progress.remaining(elapsed);
             held = last.entering + (1 - last.entering) * p;
@@ -1058,7 +1067,7 @@ export function AppShell({
         }
         const {held, entering} = pending;
         lastSwapRef.current = {
-          startedAt: Number(main.ownerDocument.timeline?.currentTime ?? 0),
+          startedAt: layoutStartFor(main.ownerDocument),
           held,
           entering,
         };