@astryxdesign/core 0.7.8 → 0.7.9-canary.048476f

package/dist/motion/transientCopy.js

@@ -15,9 +15,12 @@
  * technology, carries no ids or test ids, joins no form or radio group (a
  * copied checked radio would uncheck the live one), and its frames and media
  * load nothing. Laying it out changes no ancestor's position, and a scaled
- * host draws it at the old size. Laid in a host outside the element's own
- * ancestors, it keeps what it inherited from them: its inherited properties
- * and custom properties that differ from the host's are written on it.
+ * host draws it at the old size. A clone restarts each CSS animation and runs
+ * no transition but a `@starting-style` one; the copy carries on its
+ * element's from where they were.
+ * Laid in a host outside the element's own ancestors, it keeps what it
+ * inherited from them: its inherited properties and custom properties that
+ * differ from the host's are written on it.
  * Limits: a rule keyed on a removed `id`, or matched through an ancestor
  * between the host and the element (`.collapsed .label`), does not style the
  * copy as it styled the element; and content holding a canvas whose pixels read back
@@ -28,6 +31,8 @@
  * SYNC: When modified, update /packages/core/src/motion/animatedLayout.ts
  */
 
+import { carryAnimations, saveAnimations } from "./carryAnimations.js";
+
 /** Above this many elements, old content is not copied: the new one enters. */
 const MAX_COPIED_ELEMENTS = 1500;
 
@@ -115,11 +120,19 @@ function readInherited(element) {
 /** Scroll offsets a copy restores once laid out (a clone carries none). */
 const scrollOffsets = new WeakMap();
 
+/**
+ * The CSS animations and transitions a copy's element ran, and the copy of
+ * each element in the copied subtree. The copy carries them on once laid out
+ * (`placeOver`).
+ */
+const carriedMotion = new WeakMap();
+
 /**
  * A copy that takes no part: no ids or test ids, no form or radio group (a
  * copied checked radio would uncheck the live one), no label for a live
  * control, and copied frames and media load nothing. Scrolled descendants
- * keep their offsets once the copy is laid out (`placeOver`).
+ * keep their offsets. The CSS animations and transitions running in it carry
+ * on from where they were, once the copy is laid out (`placeOver`).
  */
 export function inertCopy(element) {
   const copy = element.cloneNode(true);
@@ -133,6 +146,10 @@ export function inertCopy(element) {
   });
   scrollOffsets.set(copy, offsets);
   inheritedValues.set(copy, readInherited(element));
+  carriedMotion.set(copy, {
+    saved: saveAnimations(element),
+    copyOf: new Map(sourceNodes.map((node, index) => [node, copyNodes[index]]))
+  });
   for (const node of copyNodes) {
     for (const name of ['id', 'data-testid', 'name', 'form', 'for', 'autofocus']) {
       node.removeAttribute(name);
@@ -170,7 +187,8 @@ export function paintedBackground(element) {
 /**
  * Lay `element` over `rect` (viewport coordinates), absolutely, as the last
  * child of `host`, wherever its containing block is: no ancestor's position
- * changes.
+ * changes. A copy's scrolled descendants then restore their offsets, and the
+ * CSS animations and transitions its element ran carry on in it.
  */
 export function placeOver(element, host, rect) {
   Object.assign(element.style, {
@@ -221,6 +239,11 @@ export function placeOver(element, host, rect) {
       node.scrollLeft = left;
     }
   }
+  const carried = carriedMotion.get(element);
+  if (carried != null) {
+    carriedMotion.delete(element);
+    carryAnimations(carried.saved, element, node => carried.copyOf.get(node) ?? null);
+  }
 }
 
 /**
@@ -264,6 +287,12 @@ export function visiblePartCopy(element) {
   if (values != null) {
     inheritedValues.set(holder, values);
   }
+  // The content's CSS motion carries on when the holder is laid out.
+  const carried = carriedMotion.get(content);
+  if (carried != null) {
+    carriedMotion.set(holder, carried);
+    carriedMotion.delete(content);
+  }
   const box = element.getBoundingClientRect();
   return {
     copy: holder,

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

@@ -253,6 +253,29 @@ export declare const UIKIT_PRESS: {
         readonly 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 declare 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
+     */
+    readonly handoff: {
+        readonly value: 10;
+        readonly unit: "px";
+    };
+};
 export declare const UIKIT_VELOCITY: {
     /**
      * UIPanGestureRecognizer.velocity(in:) is this times the newest event's
@@ -567,6 +590,24 @@ export declare const UIKIT_GESTURES: {
             readonly unit: "ms";
         };
     };
+    readonly menuPress: {
+        /**
+         * 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
+         */
+        readonly handoff: {
+            readonly value: 10;
+            readonly unit: "px";
+        };
+    };
     readonly velocity: {
         /**
          * UIPanGestureRecognizer.velocity(in:) is this times the newest event's

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

@@ -1 +1 @@
-{"version":3,"file":"gestures.d.ts","sourceRoot":"","sources":["../../../src/motion/uikit/gestures.ts"],"names":[],"mappings":"AAgDA,MAAM,MAAM,mBAAmB,GAC7B,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,OAAO,CAAC;AAEnD;;;GAGG;AACH,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,MAAM;IACzC,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;IAClB,QAAQ,CAAC,IAAI,EAAE,mBAAmB,CAAC;CACpC;AAED,eAAO,MAAM,SAAS;IACpB;;;;;;;OAOG;;;;;IAEH;;;;;OAKG;;;;;IAEH;;;;;;OAMG;;;;;IAEH;;;;;OAKG;;;;;CAE+C,CAAC;AAErD,eAAO,MAAM,gBAAgB;IAC3B;;;;;;OAMG;;;;;IAEH;;;;;;OAMG;;;;;CAE+C,CAAC;AAErD,eAAO,MAAM,SAAS;IACpB;;;;;;;;;;OAUG;;;;;CAE+C,CAAC;AAErD,eAAO,MAAM,WAAW;IACtB;;;;;OAKG;;;;;IAEH;;;;;OAKG;;;;;IAEH;;;;;OAKG;;;;;IAEH;;;;;;OAMG;;;;;CAE+C,CAAC;AAErD,eAAO,MAAM,WAAW;IACtB;;;;;;;OAOG;;;;;CAE+C,CAAC;AAErD,eAAO,MAAM,cAAc;IACzB;;;;;;OAMG;;;;;CAG+C,CAAC;AAErD,eAAO,MAAM,qBAAqB;IAChC;;;;;;OAMG;;;;;IAEH;;;;OAIG;;;;;CAE+C,CAAC;AAErD,eAAO,MAAM,aAAa;IACxB;;;;;;;OAOG;;;;;CAE+C,CAAC;AAErD,eAAO,MAAM,WAAW;IACtB;;;;;OAKG;;;;;IAEH;;;;;OAKG;;;;;IAEH;;;;;;OAMG;;;;;IAEH;;;;;OAKG;;;;;IAEH;;;;;;OAMG;;;;;CAE+C,CAAC;AAErD,eAAO,MAAM,cAAc;IACzB;;;;;;;;;;;;OAYG;;;;;IAEH;;;;;;;;OAQG;;;;;IAEH;;;;;;;OAOG;;;;;CAE+C,CAAC;AAErD;;;;;GAKG;AACH,eAAO,MAAM,WAAW;IACtB;;;;OAIG;;;;;CAE+C,CAAC;AAErD;;;;;GAKG;AACH,eAAO,MAAM,cAAc;;QAzPzB;;;;;;;WAOG;;;;;QAEH;;;;;WAKG;;;;;QAEH;;;;;;WAMG;;;;;QAEH;;;;;WAKG;;;;;;;QAKH;;;;;;WAMG;;;;;QAEH;;;;;;WAMG;;;;;;;QAKH;;;;;;;;;;WAUG;;;;;;;QAKH;;;;;WAKG;;;;;QAEH;;;;;WAKG;;;;;QAEH;;;;;WAKG;;;;;QAEH;;;;;;WAMG;;;;;;;QAKH;;;;;;;WAOG;;;;;;;QAKH;;;;;;WAMG;;;;;;;QAMH;;;;;;WAMG;;;;;QAEH;;;;WAIG;;;;;;;QAKH;;;;;;;WAOG;;;;;;;QAKH;;;;;WAKG;;;;;QAEH;;;;;WAKG;;;;;QAEH;;;;;;WAMG;;;;;QAEH;;;;;WAKG;;;;;QAEH;;;;;;WAMG;;;;;;;QAKH;;;;;;;;;;;;WAYG;;;;;QAEH;;;;;;;;WAQG;;;;;QAEH;;;;;;;WAOG;;;;;;CAoCK,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,sKAUxB,CAAC;AAEX,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAC;AAExE;;;;;;;;GAQG;AACH,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAC5C,kBAAkB,EAClB,eAAe,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAWvC,CAAC"}
+{"version":3,"file":"gestures.d.ts","sourceRoot":"","sources":["../../../src/motion/uikit/gestures.ts"],"names":[],"mappings":"AAgDA,MAAM,MAAM,mBAAmB,GAC7B,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,OAAO,CAAC;AAEnD;;;GAGG;AACH,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,MAAM;IACzC,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;IAClB,QAAQ,CAAC,IAAI,EAAE,mBAAmB,CAAC;CACpC;AAED,eAAO,MAAM,SAAS;IACpB;;;;;;;OAOG;;;;;IAEH;;;;;OAKG;;;;;IAEH;;;;;;OAMG;;;;;IAEH;;;;;OAKG;;;;;CAE+C,CAAC;AAErD,eAAO,MAAM,gBAAgB;IAC3B;;;;;;OAMG;;;;;IAEH;;;;;;OAMG;;;;;CAE+C,CAAC;AAErD,eAAO,MAAM,SAAS;IACpB;;;;;;;;;;OAUG;;;;;CAE+C,CAAC;AAErD,eAAO,MAAM,WAAW;IACtB;;;;;OAKG;;;;;IAEH;;;;;OAKG;;;;;IAEH;;;;;OAKG;;;;;IAEH;;;;;;OAMG;;;;;CAE+C,CAAC;AAErD,eAAO,MAAM,WAAW;IACtB;;;;;;;OAOG;;;;;CAE+C,CAAC;AAErD,eAAO,MAAM,cAAc;IACzB;;;;;;OAMG;;;;;CAG+C,CAAC;AAErD,eAAO,MAAM,qBAAqB;IAChC;;;;;;OAMG;;;;;IAEH;;;;OAIG;;;;;CAE+C,CAAC;AAErD,eAAO,MAAM,aAAa;IACxB;;;;;;;OAOG;;;;;CAE+C,CAAC;AAErD,eAAO,MAAM,WAAW;IACtB;;;;;OAKG;;;;;IAEH;;;;;OAKG;;;;;IAEH;;;;;;OAMG;;;;;IAEH;;;;;OAKG;;;;;IAEH;;;;;;OAMG;;;;;CAE+C,CAAC;AAErD;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;IAC3B;;;;;;;;;;;OAWG;;;;;CAE+C,CAAC;AAErD,eAAO,MAAM,cAAc;IACzB;;;;;;;;;;;;OAYG;;;;;IAEH;;;;;;;;OAQG;;;;;IAEH;;;;;;;OAOG;;;;;CAE+C,CAAC;AAErD;;;;;GAKG;AACH,eAAO,MAAM,WAAW;IACtB;;;;OAIG;;;;;CAE+C,CAAC;AAErD;;;;;GAKG;AACH,eAAO,MAAM,cAAc;;QA9QzB;;;;;;;WAOG;;;;;QAEH;;;;;WAKG;;;;;QAEH;;;;;;WAMG;;;;;QAEH;;;;;WAKG;;;;;;;QAKH;;;;;;WAMG;;;;;QAEH;;;;;;WAMG;;;;;;;QAKH;;;;;;;;;;WAUG;;;;;;;QAKH;;;;;WAKG;;;;;QAEH;;;;;WAKG;;;;;QAEH;;;;;WAKG;;;;;QAEH;;;;;;WAMG;;;;;;;QAKH;;;;;;;WAOG;;;;;;;QAKH;;;;;;WAMG;;;;;;;QAMH;;;;;;WAMG;;;;;QAEH;;;;WAIG;;;;;;;QAKH;;;;;;;WAOG;;;;;;;QAKH;;;;;WAKG;;;;;QAEH;;;;;WAKG;;;;;QAEH;;;;;;WAMG;;;;;QAEH;;;;;WAKG;;;;;QAEH;;;;;;WAMG;;;;;;;QAUH;;;;;;;;;;;WAWG;;;;;;;QAKH;;;;;;;;;;;;WAYG;;;;;QAEH;;;;;;;;WAQG;;;;;QAEH;;;;;;;WAOG;;;;;;CAqCK,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,sKAUxB,CAAC;AAEX,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAC;AAExE;;;;;;;;GAQG;AACH,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAC5C,kBAAkB,EAClB,eAAe,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAWvC,CAAC"}

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/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: string;
+                        readonly "@media (prefers-reduced-motion: reduce)": string;
+                    };
+                };
+            };
+            readonly animationTimingFunction: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": {
+                    readonly default: null;
+                    readonly "[data-astryx-press=\"fading\"]": string;
+                };
+            };
+            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;AAsD3C,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyK9B,CAAC"}

package/dist/privateAttributes/press.stylex.js

@@ -0,0 +1,98 @@
+// 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 } from "../theme/tokens.stylex.js";
+import "../utils/interactionOverlay.stylex.js";
+import { pressVars } from "../utils/interactionOverlay.stylex.js";
+import "../utils/rowPressLayer.stylex.js";
+import { cellPressConsts } from "../utils/rowPressLayer.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. It is the strength release's clock, scaled
+ * by the theme's `--_astryx-motion-tempo` up to 1.5, so the layer and the
+ * strength land together.
+ */
+const CELL_RELEASE = `calc(${cellPressConsts.cellReleaseMs}ms * min(var(--_astryx-motion-tempo, 1), 1.5))`;
+/** The same clock under Reduce Motion: a tempo may shorten it, never lengthen it. */
+const CELL_RELEASE_REDUCED = `min(${cellPressConsts.cellReleaseMs}ms, calc(${cellPressConsts.cellReleaseMs}ms * var(--_astryx-motion-tempo, 1)))`;
+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 table's gentle ease-out. */
+const RELEASE_EASE = cellPressConsts.cellReleaseEase;
+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: "x16lp0i7 x1bf026e",
+    kZiNAr: "x1gyhjqm",
+    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/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))',