@astryxdesign/core 0.7.8 → 0.7.9-canary.07992bb

package/dist/motion/uikit/gestures.js

@@ -295,6 +295,30 @@ export const UIKIT_PRESS = {
     unit: 'ms'
   }
 };
+
+/**
+ * UIMenu presented by a button whose menu is its primary action: how far the
+ * finger that opened it travels before it picks. DropdownMenu's press model
+ * reads a copy in `hooks/menuPressValues.ts`.
+ */
+export const UIKIT_MENU_PRESS = {
+  /**
+   * After the menu opens under a still-held finger, the finger travels this
+   * far before it starts picking. The distance is a straight line from the
+   * first sample the menu receives after it opened. Until then nothing is
+   * lit, and lifting acts on nothing.
+   * @source measured: UIKit lab (injected host app), iOS 26.2 simulator,
+   *   iPhone 17 Pro, gesture-state hook, steps 150 ms apart, Oct 23 2026
+   *   (M-MN2): with the menu open under a held finger and a 1 pt first step,
+   *   moves of (0, 9) and (7, 7) picked nothing; (0, 10), (0, 11), (10, 0),
+   *   (9, 9) and (10, 10) picked; a 9 pt step followed by 3 pt more picked
+   *   nothing
+   */
+  handoff: {
+    value: 10,
+    unit: 'px'
+  }
+};
 export const UIKIT_VELOCITY = {
   /**
    * UIPanGestureRecognizer.velocity(in:) is this times the newest event's
@@ -374,6 +398,7 @@ export const UIKIT_GESTURES = {
   screenEdgePan: UIKIT_SCREEN_EDGE_PAN,
   control: UIKIT_CONTROL,
   press: UIKIT_PRESS,
+  menuPress: UIKIT_MENU_PRESS,
   velocity: UIKIT_VELOCITY
 };
 

package/dist/motion/uikit/index.d.ts

@@ -17,7 +17,7 @@
  * SYNC: When a domain file is added, re-export it here and list it in
  * /packages/core/src/motion/README.md.
  */
-export { HAPTIC_FEEDBACK_KINDS, HAPTIC_VIBRATION_PATTERNS, UIKIT_CLICK, UIKIT_CONTROL, UIKIT_GESTURES, UIKIT_LONG_PRESS, UIKIT_PAN, UIKIT_PINCH, UIKIT_PRESS, UIKIT_ROTATION, UIKIT_SCREEN_EDGE_PAN, UIKIT_SWIPE, UIKIT_TAP, UIKIT_VELOCITY, type GestureConstant, type GestureConstantUnit, type HapticFeedbackKind, } from './gestures.js';
+export { HAPTIC_FEEDBACK_KINDS, HAPTIC_VIBRATION_PATTERNS, UIKIT_CLICK, UIKIT_CONTROL, UIKIT_GESTURES, UIKIT_LONG_PRESS, UIKIT_MENU_PRESS, UIKIT_PAN, UIKIT_PINCH, UIKIT_PRESS, UIKIT_ROTATION, UIKIT_SCREEN_EDGE_PAN, UIKIT_SWIPE, UIKIT_TAP, UIKIT_VELOCITY, type GestureConstant, type GestureConstantUnit, type HapticFeedbackKind, } from './gestures.js';
 export { datePicker } from './datePicker.js';
 export { navigation, registerNavigationTable } from './navigation.js';
 export { picker } from './picker.js';

package/dist/motion/uikit/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/motion/uikit/index.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EACL,qBAAqB,EACrB,yBAAyB,EACzB,WAAW,EACX,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,SAAS,EACT,WAAW,EACX,WAAW,EACX,cAAc,EACd,qBAAqB,EACrB,WAAW,EACX,SAAS,EACT,cAAc,EACd,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,GACxB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,OAAO,EAAC,UAAU,EAAE,uBAAuB,EAAC,MAAM,cAAc,CAAC;AACjE,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,OAAO,EAAC,WAAW,EAAE,wBAAwB,EAAC,MAAM,eAAe,CAAC;AACpE,OAAO,EAAC,mBAAmB,EAAE,MAAM,EAAC,MAAM,UAAU,CAAC;AACrD,OAAO,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,OAAO,EACL,2BAA2B,EAC3B,2BAA2B,EAC3B,oBAAoB,EACpB,oBAAoB,EACpB,aAAa,EACb,2BAA2B,EAC3B,wBAAwB,EACxB,yBAAyB,EACzB,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACtB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,0BAA0B,EAC1B,8BAA8B,EAC9B,wCAAwC,EACxC,qBAAqB,EACrB,sBAAsB,EACtB,mBAAmB,EACnB,aAAa,EACb,mBAAmB,EACnB,oBAAoB,EACpB,0BAA0B,EAC1B,oBAAoB,EACpB,yBAAyB,EACzB,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,wBAAwB,EACxB,mBAAmB,EACnB,kBAAkB,EAClB,oBAAoB,EACpB,OAAO,GACR,MAAM,WAAW,CAAC;AACnB,OAAO,EAAC,aAAa,EAAC,MAAM,UAAU,CAAC;AACvC,OAAO,EAAC,mBAAmB,EAAE,MAAM,EAAC,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/motion/uikit/index.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EACL,qBAAqB,EACrB,yBAAyB,EACzB,WAAW,EACX,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,SAAS,EACT,WAAW,EACX,WAAW,EACX,cAAc,EACd,qBAAqB,EACrB,WAAW,EACX,SAAS,EACT,cAAc,EACd,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,GACxB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,OAAO,EAAC,UAAU,EAAE,uBAAuB,EAAC,MAAM,cAAc,CAAC;AACjE,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,OAAO,EAAC,WAAW,EAAE,wBAAwB,EAAC,MAAM,eAAe,CAAC;AACpE,OAAO,EAAC,mBAAmB,EAAE,MAAM,EAAC,MAAM,UAAU,CAAC;AACrD,OAAO,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,OAAO,EACL,2BAA2B,EAC3B,2BAA2B,EAC3B,oBAAoB,EACpB,oBAAoB,EACpB,aAAa,EACb,2BAA2B,EAC3B,wBAAwB,EACxB,yBAAyB,EACzB,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACtB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,0BAA0B,EAC1B,8BAA8B,EAC9B,wCAAwC,EACxC,qBAAqB,EACrB,sBAAsB,EACtB,mBAAmB,EACnB,aAAa,EACb,mBAAmB,EACnB,oBAAoB,EACpB,0BAA0B,EAC1B,oBAAoB,EACpB,yBAAyB,EACzB,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,wBAAwB,EACxB,mBAAmB,EACnB,kBAAkB,EAClB,oBAAoB,EACpB,OAAO,GACR,MAAM,WAAW,CAAC;AACnB,OAAO,EAAC,aAAa,EAAC,MAAM,UAAU,CAAC;AACvC,OAAO,EAAC,mBAAmB,EAAE,MAAM,EAAC,MAAM,UAAU,CAAC"}

package/dist/motion/uikit/index.js

@@ -20,7 +20,7 @@
  * /packages/core/src/motion/README.md.
  */
 
-export { HAPTIC_FEEDBACK_KINDS, HAPTIC_VIBRATION_PATTERNS, UIKIT_CLICK, UIKIT_CONTROL, UIKIT_GESTURES, UIKIT_LONG_PRESS, UIKIT_PAN, UIKIT_PINCH, UIKIT_PRESS, UIKIT_ROTATION, UIKIT_SCREEN_EDGE_PAN, UIKIT_SWIPE, UIKIT_TAP, UIKIT_VELOCITY } from "./gestures.js";
+export { HAPTIC_FEEDBACK_KINDS, HAPTIC_VIBRATION_PATTERNS, UIKIT_CLICK, UIKIT_CONTROL, UIKIT_GESTURES, UIKIT_LONG_PRESS, UIKIT_MENU_PRESS, UIKIT_PAN, UIKIT_PINCH, UIKIT_PRESS, UIKIT_ROTATION, UIKIT_SCREEN_EDGE_PAN, UIKIT_SWIPE, UIKIT_TAP, UIKIT_VELOCITY } from "./gestures.js";
 export { datePicker } from "./datePicker.js";
 export { navigation, registerNavigationTable } from "./navigation.js";
 export { picker } from "./picker.js";

package/dist/motion/uikit/timing.d.ts

@@ -22,17 +22,19 @@ export declare const press: {
      */
     readonly flashMs: 100;
     /**
-     * Highlight fade after release: UIKit's deselect cross-fade.
+     * Highlight fade after release: UIKit's deselect cross-fade. Reference
+     * only, not played: a press release plays the theme's exit motion tokens
+     * (`--duration-exit`, `--ease-exit`).
      * @source measured: Settings and Contacts, iOS 26.2, simulator driven
-     *   with real HID touches at 60 fps (PRESS_FADE_MS / pressConsts.releaseMs,
+     *   with real HID touches at 60 fps (touch press model,
      *   packages/core/src/utils/pressGesture.ts, 2026-10-06)
      */
     readonly highlightOutMs: 200;
     /**
      * The highlight fade's curve after release: an ease-out that spends the
-     * whole clock fading (strength about 0.2 at the midpoint).
-     * @source GUESS — the release curve the touch press model ships with
-     *   (`RELEASE_EASE`, packages/core/src/utils/interactionOverlay.stylex.ts),
+     * whole clock fading (strength about 0.2 at the midpoint). Reference only,
+     * not played: a press release plays the theme's `--ease-exit`.
+     * @source GUESS — the release curve the touch press model shipped with,
      *   chosen to read as UIKit's deselect cross-fade, not read from UIKit
      * @measure M-PR1
      */
@@ -106,17 +108,19 @@ export declare const timing: {
          */
         readonly flashMs: 100;
         /**
-         * Highlight fade after release: UIKit's deselect cross-fade.
+         * Highlight fade after release: UIKit's deselect cross-fade. Reference
+         * only, not played: a press release plays the theme's exit motion tokens
+         * (`--duration-exit`, `--ease-exit`).
          * @source measured: Settings and Contacts, iOS 26.2, simulator driven
-         *   with real HID touches at 60 fps (PRESS_FADE_MS / pressConsts.releaseMs,
+         *   with real HID touches at 60 fps (touch press model,
          *   packages/core/src/utils/pressGesture.ts, 2026-10-06)
          */
         readonly highlightOutMs: 200;
         /**
          * The highlight fade's curve after release: an ease-out that spends the
-         * whole clock fading (strength about 0.2 at the midpoint).
-         * @source GUESS — the release curve the touch press model ships with
-         *   (`RELEASE_EASE`, packages/core/src/utils/interactionOverlay.stylex.ts),
+         * whole clock fading (strength about 0.2 at the midpoint). Reference only,
+         * not played: a press release plays the theme's `--ease-exit`.
+         * @source GUESS — the release curve the touch press model shipped with,
          *   chosen to read as UIKit's deselect cross-fade, not read from UIKit
          * @measure M-PR1
          */

package/dist/motion/uikit/timing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timing.d.ts","sourceRoot":"","sources":["../../../src/motion/uikit/timing.ts"],"names":[],"mappings":"AA4BA;;;;GAIG;AACH,eAAO,MAAM,KAAK;IAChB;;;;;;;OAOG;;IAEH;;;;;;OAMG;;IAEH;;;;;OAKG;;IAEH;;;;;;;OAOG;;IAEH;;;;;;OAMG;;IAEH;;;;;;OAMG;;CAEK,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB;IACjC;;;;;;;;;;;;;OAaG;;IAEH;;;;;;;OAOG;;CAEK,CAAC;AAOX,eAAO,MAAM,MAAM;;QAzFjB;;;;;;;WAOG;;QAEH;;;;;;WAMG;;QAEH;;;;;WAKG;;QAEH;;;;;;;WAOG;;QAEH;;;;;;WAMG;;QAEH;;;;;;WAMG;;;;QA6CD;;;;;;;WAOG;;;QAIH;;;;;;WAMG;;QAEH;;;;;;WAMG;;;IAGL;;;;;;OAMG;;IAEH;;;;;;;OAOG;;IAEH;;;;;OAKG;;;CAIK,CAAC;AAEX;;;;;GAKG;AACH,wBAAgB,mBAAmB,IAAI,IAAI,CAqB1C;AAKD;;;;GAIG;AACH,wBAAgB,8BAA8B,IAAI,IAAI,CAIrD"}
+{"version":3,"file":"timing.d.ts","sourceRoot":"","sources":["../../../src/motion/uikit/timing.ts"],"names":[],"mappings":"AA4BA;;;;GAIG;AACH,eAAO,MAAM,KAAK;IAChB;;;;;;;OAOG;;IAEH;;;;;;OAMG;;IAEH;;;;;;;OAOG;;IAEH;;;;;;;OAOG;;IAEH;;;;;;OAMG;;IAEH;;;;;;OAMG;;CAEK,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB;IACjC;;;;;;;;;;;;;OAaG;;IAEH;;;;;;;OAOG;;CAEK,CAAC;AAOX,eAAO,MAAM,MAAM;;QA3FjB;;;;;;;WAOG;;QAEH;;;;;;WAMG;;QAEH;;;;;;;WAOG;;QAEH;;;;;;;WAOG;;QAEH;;;;;;WAMG;;QAEH;;;;;;WAMG;;;;QA6CD;;;;;;;WAOG;;;QAIH;;;;;;WAMG;;QAEH;;;;;;WAMG;;;IAGL;;;;;;OAMG;;IAEH;;;;;;;OAOG;;IAEH;;;;;OAKG;;;CAIK,CAAC;AAEX;;;;;GAKG;AACH,wBAAgB,mBAAmB,IAAI,IAAI,CAqB1C;AAKD;;;;GAIG;AACH,wBAAgB,8BAA8B,IAAI,IAAI,CAIrD"}

package/dist/motion/uikit/timing.js

@@ -50,17 +50,19 @@ export const press = {
    */
   flashMs: 100,
   /**
-   * Highlight fade after release: UIKit's deselect cross-fade.
+   * Highlight fade after release: UIKit's deselect cross-fade. Reference
+   * only, not played: a press release plays the theme's exit motion tokens
+   * (`--duration-exit`, `--ease-exit`).
    * @source measured: Settings and Contacts, iOS 26.2, simulator driven
-   *   with real HID touches at 60 fps (PRESS_FADE_MS / pressConsts.releaseMs,
+   *   with real HID touches at 60 fps (touch press model,
    *   packages/core/src/utils/pressGesture.ts, 2026-10-06)
    */
   highlightOutMs: 200,
   /**
    * The highlight fade's curve after release: an ease-out that spends the
-   * whole clock fading (strength about 0.2 at the midpoint).
-   * @source GUESS — the release curve the touch press model ships with
-   *   (`RELEASE_EASE`, packages/core/src/utils/interactionOverlay.stylex.ts),
+   * whole clock fading (strength about 0.2 at the midpoint). Reference only,
+   * not played: a press release plays the theme's `--ease-exit`.
+   * @source GUESS — the release curve the touch press model shipped with,
    *   chosen to read as UIKit's deselect cross-fade, not read from UIKit
    * @measure M-PR1
    */

package/dist/privateAttributes/menuPressLit.stylex.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @file privateAttributes/menuPressLit.stylex.ts
+ * @input The row that a held finger or pen lights in a menu
+ * @output Exports markMenuPressLit and clearMenuPressLit, which mark that row,
+ *   and isMenuPressLit, which reads the mark. It also exports
+ *   menuPressLitRowStyle, which paints the marked row. The hold pair,
+ *   holdMenuPressPaint and releaseMenuPressPaint, keeps the other rows off
+ *   their pressed paint, and isMenuPressPaintHeld reads that hold.
+ * @position Owner module of the private menu-press-lit attribute: the only
+ *   file that writes its name. The menu press model (hooks/useMenuPress.ts)
+ *   marks the row; DropdownMenu's rows compose the styles. No package entry
+ *   exports it.
+ *
+ * SYNC: Each row that composes menuPressLitRowStyle reads
+ *   `--_menu-row-focus-paint` in its `:focus` background, and a row with an
+ *   `:active` background reads `--_menu-row-active-paint` there:
+ * - /packages/core/src/DropdownMenu/DropdownMenuItem.tsx
+ * - /packages/core/src/DropdownMenu/DropdownMenuCheckboxItem.tsx
+ * - /packages/core/src/DropdownMenu/DropdownMenuRadioItem.tsx
+ * - /packages/core/src/DropdownMenu/DropdownMenuSubMenu.tsx
+ */
+import type { StyleXStyles } from '@stylexjs/stylex';
+/** Marks `row` as the row that a held finger or pen lights. */
+export declare function markMenuPressLit(row: Element): void;
+/** Removes the mark from `row`. */
+export declare function clearMenuPressLit(row: Element): void;
+/** Whether a held finger or pen lights `row`. */
+export declare function isMenuPressLit(row: Element): boolean;
+/**
+ * Keeps `menu`'s rows off their `:active` paint while a held finger or pen
+ * presses in it. The row the press began on stays `:active` as the press
+ * moves on. The lit row keeps the pressed overlay through its own mark.
+ */
+export declare function holdMenuPressPaint(menu: HTMLElement): void;
+/** Gives `menu`'s rows their `:active` paint back. */
+export declare function releaseMenuPressPaint(menu: HTMLElement): void;
+/** Whether a held finger or pen keeps `menu`'s rows off their `:active` paint. */
+export declare function isMenuPressPaintHeld(menu: HTMLElement): boolean;
+/**
+ * Compose on a menu row whose `:focus` background is
+ * `var(--_menu-row-focus-paint, <hover overlay>)`, and whose `:active`
+ * background, if any, is `var(--_menu-row-active-paint, <pressed overlay>)`.
+ * The row paints the hover overlay on focus, and the pressed overlay while a
+ * held finger or pen lights it.
+ * Under a finger, the hover overlay is too faint to follow. The variable has
+ * no default: a layered stylesheet emits a default unlayered, and it would
+ * beat the attribute arm. The value resolves on the row, so a theme set on any
+ * ancestor applies. The style sets only a custom property, which shares no
+ * key with StyleX's CSS property type, so TypeScript needs the wider type.
+ */
+export declare const menuPressLitRowStyle: StyleXStyles;
+//# sourceMappingURL=menuPressLit.stylex.d.ts.map

package/dist/privateAttributes/menuPressLit.stylex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menuPressLit.stylex.d.ts","sourceRoot":"","sources":["../../src/privateAttributes/menuPressLit.stylex.ts"],"names":[],"mappings":"AACA;;;;;;;;;;;;;;;;;;;;GAoBG;AAGH,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAMnD,+DAA+D;AAC/D,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,OAAO,GAAG,IAAI,CAEnD;AAED,mCAAmC;AACnC,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,OAAO,GAAG,IAAI,CAEpD;AAED,iDAAiD;AACjD,wBAAgB,cAAc,CAAC,GAAG,EAAE,OAAO,GAAG,OAAO,CAEpD;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CAE1D;AAED,sDAAsD;AACtD,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CAE7D;AAED,kFAAkF;AAClF,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO,CAE/D;AA6BD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,oBAAoB,EAAiB,YAAY,CAAC"}

package/dist/privateAttributes/menuPressLit.stylex.js

@@ -0,0 +1,99 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+/**
+ * @file privateAttributes/menuPressLit.stylex.ts
+ * @input The row that a held finger or pen lights in a menu
+ * @output Exports markMenuPressLit and clearMenuPressLit, which mark that row,
+ *   and isMenuPressLit, which reads the mark. It also exports
+ *   menuPressLitRowStyle, which paints the marked row. The hold pair,
+ *   holdMenuPressPaint and releaseMenuPressPaint, keeps the other rows off
+ *   their pressed paint, and isMenuPressPaintHeld reads that hold.
+ * @position Owner module of the private menu-press-lit attribute: the only
+ *   file that writes its name. The menu press model (hooks/useMenuPress.ts)
+ *   marks the row; DropdownMenu's rows compose the styles. No package entry
+ *   exports it.
+ *
+ * SYNC: Each row that composes menuPressLitRowStyle reads
+ *   `--_menu-row-focus-paint` in its `:focus` background, and a row with an
+ *   `:active` background reads `--_menu-row-active-paint` there:
+ * - /packages/core/src/DropdownMenu/DropdownMenuItem.tsx
+ * - /packages/core/src/DropdownMenu/DropdownMenuCheckboxItem.tsx
+ * - /packages/core/src/DropdownMenu/DropdownMenuRadioItem.tsx
+ * - /packages/core/src/DropdownMenu/DropdownMenuSubMenu.tsx
+ */
+
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { colorVars } from "../theme/tokens.stylex.js";
+const MENU_PRESS_LIT = 'data-astryx-menu-press-lit';
+const ACTIVE_PAINT = '--_menu-row-active-paint';
+
+/** Marks `row` as the row that a held finger or pen lights. */
+export function markMenuPressLit(row) {
+  row.setAttribute(MENU_PRESS_LIT, '');
+}
+
+/** Removes the mark from `row`. */
+export function clearMenuPressLit(row) {
+  row.removeAttribute(MENU_PRESS_LIT);
+}
+
+/** Whether a held finger or pen lights `row`. */
+export function isMenuPressLit(row) {
+  return row.hasAttribute(MENU_PRESS_LIT);
+}
+
+/**
+ * Keeps `menu`'s rows off their `:active` paint while a held finger or pen
+ * presses in it. The row the press began on stays `:active` as the press
+ * moves on. The lit row keeps the pressed overlay through its own mark.
+ */
+export function holdMenuPressPaint(menu) {
+  menu.style.setProperty(ACTIVE_PAINT, 'transparent');
+}
+
+/** Gives `menu`'s rows their `:active` paint back. */
+export function releaseMenuPressPaint(menu) {
+  menu.style.removeProperty(ACTIVE_PAINT);
+}
+
+/** Whether a held finger or pen keeps `menu`'s rows off their `:active` paint. */
+export function isMenuPressPaintHeld(menu) {
+  return menu.style.getPropertyValue(ACTIVE_PAINT) !== '';
+}
+
+/**
+ * A value for each attribute state. The index signature gives StyleX the value
+ * type, which it cannot read from a literal attribute key.
+ */
+
+const litRowPaint = {
+  '--_menu-row-focus-paint': {
+    default: null,
+    '[data-astryx-menu-press-lit]': colorVars['--color-overlay-pressed']
+  },
+  '--_menu-row-active-paint': {
+    default: null,
+    '[data-astryx-menu-press-lit]': colorVars['--color-overlay-pressed']
+  }
+};
+const styles = {
+  row: {
+    "--_menu-row-focus-paint": "x1ar3rj9",
+    "--_menu-row-active-paint": "xcukuoe",
+    $$css: true
+  }
+};
+
+/**
+ * Compose on a menu row whose `:focus` background is
+ * `var(--_menu-row-focus-paint, <hover overlay>)`, and whose `:active`
+ * background, if any, is `var(--_menu-row-active-paint, <pressed overlay>)`.
+ * The row paints the hover overlay on focus, and the pressed overlay while a
+ * held finger or pen lights it.
+ * Under a finger, the hover overlay is too faint to follow. The variable has
+ * no default: a layered stylesheet emits a default unlayered, and it would
+ * beat the attribute arm. The value resolves on the row, so a theme set on any
+ * ancestor applies. The style sets only a custom property, which shares no
+ * key with StyleX's CSS property type, so TypeScript needs the wider type.
+ */
+export const menuPressLitRowStyle = styles.row;

package/dist/privateAttributes/press.stylex.d.ts

@@ -0,0 +1,139 @@
+/**
+ * @file privateAttributes/press.stylex.ts
+ * @input StyleX, the semantic overlay color tokens, the touch press strength
+ *   (`pressVars`, utils/interactionOverlay.stylex.ts) and the row layer's
+ *   clocks (utils/rowPressLayer.stylex.ts)
+ * @output `rowPressLayerStyles`: the compositor press layer for list rows
+ *   (`cell`) and its own-image arms for a row on the `backgroundImage`
+ *   variant (`cellOnImage`)
+ * @position Owner module of the private press attribute for the row layer:
+ *   the press controller (utils/pressFeedback.ts) writes the attribute, and
+ *   this file reads it. No package entry exports it. Item and TreeList
+ *   compose these styles after their overlay variant;
+ *   utils/interactionOverlay.cell.test.ts tests them.
+ */
+import * as stylex from '@stylexjs/stylex';
+export declare const rowPressLayerStyles: Readonly<{
+    readonly cell: Readonly<{
+        readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", unknown>;
+        readonly animationName: stylex.StyleXClassNameFor<"animationName", unknown>;
+        readonly isolation: stylex.StyleXClassNameFor<"isolation", "isolate" | null>;
+        readonly '::before': stylex.StyleXClassNameFor<"::before", {
+            readonly content: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": {
+                    readonly default: null;
+                    readonly ":where(:not(:disabled,[aria-disabled=\"true\"]))": {
+                        readonly default: null;
+                        readonly ":is([data-astryx-press=\"on\"],[data-astryx-press=\"fading\"])": "\"\"";
+                    };
+                };
+            };
+            readonly position: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": {
+                    readonly default: null;
+                    readonly ":is([data-astryx-press=\"on\"],[data-astryx-press=\"fading\"])": "absolute";
+                };
+            };
+            readonly inset: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": {
+                    readonly default: null;
+                    readonly ":is([data-astryx-press=\"on\"],[data-astryx-press=\"fading\"])": 0;
+                };
+            };
+            readonly zIndex: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": {
+                    readonly default: null;
+                    readonly ":is([data-astryx-press=\"on\"],[data-astryx-press=\"fading\"])": -1;
+                };
+            };
+            readonly borderRadius: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": {
+                    readonly default: null;
+                    readonly ":is([data-astryx-press=\"on\"],[data-astryx-press=\"fading\"])": "inherit";
+                };
+            };
+            readonly pointerEvents: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": {
+                    readonly default: null;
+                    readonly ":is([data-astryx-press=\"on\"],[data-astryx-press=\"fading\"])": "none";
+                };
+            };
+            readonly backgroundColor: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": {
+                    readonly default: null;
+                    readonly ":is([data-astryx-press=\"on\"],[data-astryx-press=\"fading\"])": stylex.StyleXVar<"light-dark(#05365919, #FFFFFF19)">;
+                };
+            };
+            readonly opacity: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": {
+                    readonly default: null;
+                    readonly "[data-astryx-press=\"on\"]": 1;
+                    readonly "[data-astryx-press=\"fading\"]": 0;
+                };
+            };
+            readonly animationName: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": {
+                    readonly default: null;
+                    readonly ":where(:not(:disabled,[aria-disabled=\"true\"]))": {
+                        readonly default: null;
+                        readonly "[data-astryx-press=\"fading\"]": string;
+                    };
+                };
+            };
+            readonly animationDuration: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": {
+                    readonly default: null;
+                    readonly "[data-astryx-press=\"fading\"]": {
+                        readonly default: stylex.StyleXVar<"var(--duration-fast)">;
+                        readonly "@media (prefers-reduced-motion: reduce)": string;
+                    };
+                };
+            };
+            readonly animationTimingFunction: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": {
+                    readonly default: null;
+                    readonly "[data-astryx-press=\"fading\"]": stylex.StyleXVar<"cubic-bezier(0.3, 0, 0.6, 0.6)">;
+                };
+            };
+            readonly animationFillMode: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": {
+                    readonly default: null;
+                    readonly "[data-astryx-press=\"fading\"]": "both";
+                };
+            };
+        }>;
+    }>;
+    readonly cellWithoutLayer: Readonly<{
+        readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", "none">;
+        readonly animationName: stylex.StyleXClassNameFor<"animationName", unknown>;
+        readonly isolation: stylex.StyleXClassNameFor<"isolation", "auto" | null>;
+        readonly '::before': stylex.StyleXClassNameFor<"::before", {
+            readonly content: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": {
+                    readonly default: null;
+                    readonly ":where(:not(:disabled,[aria-disabled=\"true\"]))": {
+                        readonly default: null;
+                        readonly ":is([data-astryx-press=\"on\"],[data-astryx-press=\"fading\"])": "none";
+                    };
+                };
+            };
+        }>;
+    }>;
+    readonly cellOnImage: Readonly<{
+        readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", string | null>;
+    }>;
+}>;
+//# sourceMappingURL=press.stylex.d.ts.map

package/dist/privateAttributes/press.stylex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"press.stylex.d.ts","sourceRoot":"","sources":["../../src/privateAttributes/press.stylex.ts"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAqD3C,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyK9B,CAAC"}

package/dist/privateAttributes/press.stylex.js

@@ -0,0 +1,97 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/* eslint-disable @astryx/no-hover-on-disabled -- Every hover branch is
+ * nested beneath ENABLED below, as in interactionOverlay.stylex.ts. */
+
+/**
+ * @file privateAttributes/press.stylex.ts
+ * @input StyleX, the semantic overlay color tokens, the touch press strength
+ *   (`pressVars`, utils/interactionOverlay.stylex.ts) and the row layer's
+ *   clocks (utils/rowPressLayer.stylex.ts)
+ * @output `rowPressLayerStyles`: the compositor press layer for list rows
+ *   (`cell`) and its own-image arms for a row on the `backgroundImage`
+ *   variant (`cellOnImage`)
+ * @position Owner module of the private press attribute for the row layer:
+ *   the press controller (utils/pressFeedback.ts) writes the attribute, and
+ *   this file reads it. No package entry exports it. Item and TreeList
+ *   compose these styles after their overlay variant;
+ *   utils/interactionOverlay.cell.test.ts tests them.
+ */
+
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { colorVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
+import "../motion/reducedMotion.stylex.js";
+import { reducedMotionFadeConsts } from "../motion/reducedMotion.stylex.js";
+import "../utils/interactionOverlay.stylex.js";
+import { pressVars } from "../utils/interactionOverlay.stylex.js";
+
+// The overlay's arm selectors (interactionOverlay.stylex.ts), restated here:
+// StyleX resolves a style's keys within its own file.
+const ENABLED = ':where(:not(:disabled,[aria-disabled="true"]))';
+const HOVER_HOVER = '@media (hover: hover)';
+const COARSE = '@media (pointer: coarse)';
+const PRESSED_ON = '[data-astryx-press="on"]';
+const PRESSED_FADING = '[data-astryx-press="fading"]';
+/**
+ * A press in any of its states: the row layer exists only then, so at rest a
+ * row's own `::before` and its stacking are untouched.
+ */
+const PRESSED_ANY = ':is([data-astryx-press="on"],[data-astryx-press="fading"])';
+const PRESS_ALPHA = pressVars['--astryx-press-alpha'];
+const hoverImage = `linear-gradient(${colorVars['--color-overlay-hover']}, ${colorVars['--color-overlay-hover']})`;
+const pressedImage = `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`;
+/** The overlay's paint, read back off the element (its gradient layer). */
+const pressedOverlayImage = 'var(--_press-paint-image)';
+
+/**
+ * The overlay's strength release (interactionOverlay.stylex.ts), restated so
+ * a fine pointer keeps it: the same keyframes, so the same animation.
+ */
+const pressRelease = "x10jkm1t-B";
+
+/**
+ * The row layer's clock as CSS: the strength release's clock, the theme's
+ * exit duration, so the layer and the strength land together.
+ */
+const CELL_RELEASE = durationVars['--duration-exit'];
+/** The same clock under Reduce Motion, no longer than the Reduce Motion fade. */
+const CELL_RELEASE_REDUCED = `min(${durationVars['--duration-exit']}, ${reducedMotionFadeConsts.duration})`;
+const REDUCED_MOTION = '@media (prefers-reduced-motion: reduce)';
+
+/** Opacity 1 → 0: the row layer leaves; its fading arm runs it. */
+const cellRelease = "x1jn504y-B";
+
+/** The release's curve: the theme's exit easing, as the strength's. */
+const RELEASE_EASE = easeVars['--ease-exit'];
+export const rowPressLayerStyles = {
+  cell: {
+    kKwaWg: "x7ngsy6 x10ogxw0 xubczrd x18xnkjv",
+    kKVMdj: "x14e4jsf x6su2wr",
+    kHBbk8: "xif6eam",
+    kgeoSG: "x1ocadqd",
+    kEoFBp: "x1ukh9kf",
+    kFcpXp: "xrkptjy",
+    kxmVGU: "xjscm90",
+    kPB484: "x1kec4ew",
+    km8f2m: "x13r5q6d",
+    kLkRvE: "x1dn949c",
+    k5QlbN: "xw7rim2 xr9xsjc",
+    k7EzDT: "x1bxn267",
+    kQZAMR: "x1osot8d xbkwwzw",
+    kZiNAr: "x10t12yn",
+    k8Tatv: "x1dn5vsf",
+    $$css: true
+  },
+  cellWithoutLayer: {
+    kKwaWg: "x18o3ruo",
+    kKVMdj: "x14e4jsf",
+    kHBbk8: "xrqzsdu",
+    kgeoSG: "x1995whq",
+    $$css: true
+  },
+  cellOnImage: {
+    kKwaWg: "x7uyq82 x3f84ok x7ngsy6 x10ogxw0 xubczrd x18xnkjv xmvprkv xetgvay",
+    $$css: true
+  }
+};

package/dist/theme/themeMotion.d.ts

@@ -45,8 +45,9 @@ export declare const CHARACTER_EASE: {
 export declare function resolveMotionKnobs(config: ThemeMotionConfig | undefined): ResolvedMotionKnobs;
 /**
  * The private custom property a theme with a `tempo` writes beside its
- * duration tokens: the press release fade (`utils/interactionOverlay.stylex.ts`)
- * multiplies its clock by it.
+ * duration tokens, for a style that scales a clock of its own by it
+ * (ProgressBar's move). A press release needs none: it plays
+ * `--duration-exit`, which already follows the tempo.
  */
 export declare const MOTION_TEMPO_PROPERTY = "--_astryx-motion-tempo";
 /**

package/dist/theme/themeMotion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"themeMotion.d.ts","sourceRoot":"","sources":["../../src/theme/themeMotion.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAAoB,KAAK,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AAC9E,OAAO,EAGL,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACtB,MAAM,eAAe,CAAC;AAIvB,OAAO,EACL,WAAW,EACX,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,GACxB,MAAM,eAAe,CAAC;AAEvB;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAC3B,gBAAgB,GAAG,CAAC,iBAAiB,GAAG,gBAAgB,CAAC,CAAC;AAE5D;;;;GAIG;AACH,eAAO,MAAM,cAAc;;;;CAIgC,CAAC;AAE5D,kEAAkE;AAClE,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,iBAAiB,GAAG,SAAS,GACpC,mBAAmB,CAErB;AAaD;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,2BAA2B,CAAC;AAE9D;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,6BAA6B,CAAC;AAUlE,0EAA0E;AAC1E,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAMtE;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAElD;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,iBAAiB,GACxB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAmCxB;AAED,qDAAqD;AACrD,MAAM,WAAW,WAAW;IAC1B,qCAAqC;IACrC,QAAQ,CAAC,KAAK,EAAE,mBAAmB,CAAC;IACpC,0CAA0C;IAC1C,QAAQ,CAAC,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACrD,8DAA8D;IAC9D,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;CACpD;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE;IACxC,QAAQ,CAAC,MAAM,CAAC,EAAE,iBAAiB,CAAC;IACpC,QAAQ,CAAC,MAAM,CAAC,EAAE;QAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,iBAAiB,CAAA;KAAC,CAAC;IACxD,QAAQ,CAAC,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IACpD,QAAQ,CAAC,WAAW,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;CAC1D,GAAG,WAAW,CAyCd"}
+{"version":3,"file":"themeMotion.d.ts","sourceRoot":"","sources":["../../src/theme/themeMotion.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAAoB,KAAK,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AAC9E,OAAO,EAGL,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACtB,MAAM,eAAe,CAAC;AAIvB,OAAO,EACL,WAAW,EACX,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,GACxB,MAAM,eAAe,CAAC;AAEvB;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAC3B,gBAAgB,GAAG,CAAC,iBAAiB,GAAG,gBAAgB,CAAC,CAAC;AAE5D;;;;GAIG;AACH,eAAO,MAAM,cAAc;;;;CAIgC,CAAC;AAE5D,kEAAkE;AAClE,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,iBAAiB,GAAG,SAAS,GACpC,mBAAmB,CAErB;AAaD;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,2BAA2B,CAAC;AAE9D;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,6BAA6B,CAAC;AAUlE,0EAA0E;AAC1E,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAMtE;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAElD;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,iBAAiB,GACxB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAmCxB;AAED,qDAAqD;AACrD,MAAM,WAAW,WAAW;IAC1B,qCAAqC;IACrC,QAAQ,CAAC,KAAK,EAAE,mBAAmB,CAAC;IACpC,0CAA0C;IAC1C,QAAQ,CAAC,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACrD,8DAA8D;IAC9D,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;CACpD;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE;IACxC,QAAQ,CAAC,MAAM,CAAC,EAAE,iBAAiB,CAAC;IACpC,QAAQ,CAAC,MAAM,CAAC,EAAE;QAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,iBAAiB,CAAA;KAAC,CAAC;IACxD,QAAQ,CAAC,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IACpD,QAAQ,CAAC,WAAW,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;CAC1D,GAAG,WAAW,CAyCd"}

package/dist/theme/themeMotion.js

@@ -63,8 +63,9 @@ function msOf(value) {
 
 /**
  * The private custom property a theme with a `tempo` writes beside its
- * duration tokens: the press release fade (`utils/interactionOverlay.stylex.ts`)
- * multiplies its clock by it.
+ * duration tokens, for a style that scales a clock of its own by it
+ * (ProgressBar's move). A press release needs none: it plays
+ * `--duration-exit`, which already follows the tempo.
  */
 export const MOTION_TEMPO_PROPERTY = '--_astryx-motion-tempo';
 

package/dist/theme/tokens.stylex.d.ts

@@ -15,7 +15,7 @@
  */
 import * as stylex from '@stylexjs/stylex';
 export declare const colorDefaults: {
-    readonly '--color-accent': "light-dark(#0064E0, #2694FE)";
+    readonly '--color-accent': "light-dark(#0064E0, #0171E3)";
     readonly '--color-accent-muted': "light-dark(#0082FB33, #0082FB3F)";
     readonly '--color-on-accent': "light-dark(#FFFFFF, #FFFFFF)";
     readonly '--color-neutral': "light-dark(rgba(5, 54, 89, 0.1), rgba(223, 226, 229, 0.2))";
@@ -115,7 +115,7 @@ export declare const colorDefaults: {
     readonly '--color-text-yellow': "light-dark(#753F07, #FBCE03)";
 };
 export declare const colorVars: stylex.VarGroup<Readonly<{
-    readonly '--color-accent': "light-dark(#0064E0, #2694FE)";
+    readonly '--color-accent': "light-dark(#0064E0, #0171E3)";
     readonly '--color-accent-muted': "light-dark(#0082FB33, #0082FB3F)";
     readonly '--color-on-accent': "light-dark(#FFFFFF, #FFFFFF)";
     readonly '--color-neutral': "light-dark(rgba(5, 54, 89, 0.1), rgba(223, 226, 229, 0.2))";

package/dist/theme/tokens.stylex.js

@@ -24,7 +24,7 @@ import * as stylex from '@stylexjs/stylex';
 
 export const colorDefaults = {
   // Core semantic
-  '--color-accent': 'light-dark(#0064E0, #2694FE)',
+  '--color-accent': 'light-dark(#0064E0, #0171E3)',
   '--color-accent-muted': 'light-dark(#0082FB33, #0082FB3F)',
   '--color-on-accent': 'light-dark(#FFFFFF, #FFFFFF)',
   '--color-neutral': 'light-dark(rgba(5, 54, 89, 0.1), rgba(223, 226, 229, 0.2))',