@astryxdesign/core 0.7.6-canary.fdabeba → 0.7.6

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

@@ -0,0 +1 @@
+{"version":3,"file":"inputStream.d.ts","sourceRoot":"","sources":["../../src/utils/inputStream.ts"],"names":[],"mappings":"AA4CA,0CAA0C;AAC1C,MAAM,WAAW,wBAAwB;IACvC;;;;OAIG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,6EAA6E;AAC7E,MAAM,MAAM,aAAa,GAAG,cAAc,GAAG,gBAAgB,CAAC;AAI9D;;;GAGG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,aAAa,EAC1D,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,IAAI,EAC3C,EAAC,OAAe,EAAC,GAAE,wBAA6B,GAC/C,MAAM,IAAI,CAoCZ"}

package/dist/utils/inputStream.js

@@ -0,0 +1,136 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file inputStream.ts
+ * @input A window, and subscribers to its input events (the press feedback
+ *   controller, the gesture host)
+ * @output subscribeInput
+ * @position The one entry for document-wide input listeners in core: one
+ *   native listener per event type on the window's capture phase, shared by
+ *   every subscriber
+ *
+ * SYNC: When modified, update inputStream.test.ts.
+ */
+
+// The window's capture phase runs before document listeners, so an app's
+// `stopPropagation` there does not hide input from press feedback or the
+// gesture host. A claiming recognizer still needs the touch to reach its
+// element. A passivity switch or a new first subscriber adds a type's
+// listener again. App window-capture listeners added meanwhile then run
+// before it. Document events and element
+// `scroll` reach the window's capture phase too, and so does an element's
+// `blur` or `focus`. A subscriber for the window's own event checks
+// `event.target`.
+//
+// Subscribers run in subscription order. One that throws is reported, and
+// the rest still run.
+//
+// A type's native listener is passive, so it blocks no scroll. It is
+// non-passive only while a subscriber that cancels the event
+// (`{cancels: true}`) is subscribed. With no subscriber left, it is removed.
+
+/** Options for {@link subscribeInput}. */
+
+/** The events a window's capture phase sees: its own, and the document's. */
+
+const streams = new WeakMap();
+
+/**
+ * Listen to `type` on `view`'s capture phase through its shared native
+ * listener. Returns the unsubscribe; calling it again does nothing.
+ */
+export function subscribeInput(view, type, listener, {
+  cancels = false
+} = {}) {
+  let channels = streams.get(view);
+  if (channels == null) {
+    channels = new Map();
+    streams.set(view, channels);
+  }
+  let channel = channels.get(type);
+  if (channel == null) {
+    channel = {
+      subscribers: [],
+      native: null
+    };
+    channels.set(type, channel);
+  }
+  const subscriber = {
+    listener: listener,
+    cancels
+  };
+  channel.subscribers.push(subscriber);
+  register(view, type, channel);
+  let isSubscribed = true;
+  return () => {
+    if (!isSubscribed) {
+      return;
+    }
+    isSubscribed = false;
+    const current = streams.get(view)?.get(type);
+    if (current == null) {
+      return;
+    }
+    const index = current.subscribers.indexOf(subscriber);
+    if (index !== -1) {
+      current.subscribers.splice(index, 1);
+    }
+    register(view, type, current);
+    if (current.subscribers.length === 0) {
+      streams.get(view)?.delete(type);
+    }
+  };
+}
+
+/**
+ * Bring the channel's native listener in line with its subscribers: none
+ * without subscribers, non-passive while one of them cancels.
+ */
+function register(view, type, channel) {
+  const wanted = channel.subscribers.length === 0 ? null : channel.subscribers.some(subscriber => subscriber.cancels);
+  const native = channel.native;
+  if (native != null && native.cancels === wanted) {
+    return;
+  }
+  if (native != null) {
+    view.removeEventListener(type, native.listener, {
+      capture: true
+    });
+    channel.native = null;
+  }
+  if (wanted == null) {
+    return;
+  }
+  const listener = event => dispatch(channel, event);
+  view.addEventListener(type, listener, {
+    capture: true,
+    passive: !wanted
+  });
+  channel.native = {
+    listener,
+    cancels: wanted
+  };
+}
+function dispatch(channel, event) {
+  // A subscriber may subscribe or unsubscribe while the event runs; the
+  // event goes to those subscribed when it arrived.
+  for (const subscriber of [...channel.subscribers]) {
+    if (!channel.subscribers.includes(subscriber)) {
+      continue;
+    }
+    try {
+      subscriber.listener(event);
+    } catch (error) {
+      report(error);
+    }
+  }
+}
+function report(error) {
+  if (typeof globalThis.reportError === 'function') {
+    globalThis.reportError(error);
+    return;
+  }
+  queueMicrotask(() => {
+    throw error;
+  });
+}

package/dist/utils/interactionModality.d.ts

@@ -1,21 +1,63 @@
+/**
+ * @file interactionModality.ts
+ * @input Global pointerdown/keydown events
+ * @output useInteractionModalityTracking, useInteractionModalityTrackingFor,
+ *   and getInteractionModality, which reads how the user last interacted in a
+ *   document
+ * @position Internal document-wide singleton; used where `:focus-visible`
+ *   alone is too broad
+ */
+import { type RefCallback, type RefObject } from 'react';
 export type InteractionModality = 'keyboard' | 'pointer';
 declare function trackInteractionModality(): () => void;
-/** Activate shared modality tracking when the first consumer mounts. */
-export declare function useInteractionModalityTracking(): void;
 /**
  * Track a second document while a consumer there is mounted: a component an
  * app renders into a same-origin iframe or a Document Picture-in-Picture
  * window gets input there that never reaches the page's listeners. The first
  * consumer installs the document's listener pair and the last one's cleanup
- * removes it. Read the value with `getInteractionModality(doc)`. The page's
- * own document keeps its document-lifetime listeners.
+ * removes it. The page's own document keeps its document-lifetime listeners.
+ */
+declare function trackInteractionModalityIn(targetDocument: Document): () => void;
+/** What a component gets from its one modality call. */
+export type InteractionModalityTracking = {
+    /**
+     * Attach to the element the component renders (merge it with the element's
+     * other refs with useMergedRefs, or call it with each node and `null` from
+     * a callback ref of the component's own without returning its cleanup).
+     * While the element lives in a second document (a same-origin iframe, a
+     * Document Picture-in-Picture window), that document is tracked; detaching
+     * or replacing the node releases it first.
+     */
+    ref: RefCallback<Element>;
+    /** How the user last interacted in the element's own document. */
+    readModality: () => InteractionModality;
+};
+/**
+ * Activate shared modality tracking when the first consumer mounts, and read
+ * it for the element the component renders: attach the returned `ref` to that
+ * element. The component makes this one call and adds no effect, listener or
+ * tracker of its own for modality.
+ */
+export declare function useInteractionModalityTracking(): InteractionModalityTracking;
+/**
+ * The same, for a hook that receives an object ref its consumer owns
+ * (useMenuPress's `menuRef`, useTouchTrigger's trigger), so it cannot attach a
+ * callback ref. After every commit it holds the ref's CURRENT owner document,
+ * and the same Effect's cleanup releases it, so a detached, replaced or moved
+ * node releases the old document before the new one is held.
+ */
+export declare function useInteractionModalityTrackingFor(elementRef: RefObject<Element | null>): () => InteractionModality;
+/**
+ * How the user last interacted with the page, or in `target`'s own document
+ * (a document, or any node in one: an element in a same-origin iframe or a
+ * Document Picture-in-Picture window answers for that document).
  */
-export declare function trackInteractionModalityIn(targetDocument: Document): () => void;
-/** How the user last interacted with the page, or with `targetDocument`. */
-export declare function getInteractionModality(targetDocument?: Document): InteractionModality;
+export declare function getInteractionModality(target?: Document | Node | null): InteractionModality;
 /** Test-only: restore the initial state between cases. */
 export declare function __resetInteractionModalityForTest(): void;
 /** Test-only: activate the tracker without rendering a hook. */
 export declare const __startInteractionModalityTrackingForTest: typeof trackInteractionModality;
+/** Test-only: track a second document without rendering a hook. */
+export declare const __trackInteractionModalityInForTest: typeof trackInteractionModalityIn;
 export {};
 //# sourceMappingURL=interactionModality.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"interactionModality.d.ts","sourceRoot":"","sources":["../../src/utils/interactionModality.ts"],"names":[],"mappings":"AAwCA,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,SAAS,CAAC;AAgDzD,iBAAS,wBAAwB,IAAI,MAAM,IAAI,CAsB9C;AAED,wEAAwE;AACxE,wBAAgB,8BAA8B,IAAI,IAAI,CAErD;AAED;;;;;;;GAOG;AACH,wBAAgB,0BAA0B,CACxC,cAAc,EAAE,QAAQ,GACvB,MAAM,IAAI,CAkCZ;AAED,4EAA4E;AAC5E,wBAAgB,sBAAsB,CACpC,cAAc,CAAC,EAAE,QAAQ,GACxB,mBAAmB,CAOrB;AAED,0DAA0D;AAC1D,wBAAgB,iCAAiC,IAAI,IAAI,CAIxD;AAED,gEAAgE;AAChE,eAAO,MAAM,yCAAyC,iCAC5B,CAAC"}
+{"version":3,"file":"interactionModality.d.ts","sourceRoot":"","sources":["../../src/utils/interactionModality.ts"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAeH,OAAO,EAIL,KAAK,WAAW,EAChB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,SAAS,CAAC;AAgFzD,iBAAS,wBAAwB,IAAI,MAAM,IAAI,CAU9C;AAED;;;;;;GAMG;AACH,iBAAS,0BAA0B,CAAC,cAAc,EAAE,QAAQ,GAAG,MAAM,IAAI,CAkBxE;AAED,wDAAwD;AACxD,MAAM,MAAM,2BAA2B,GAAG;IACxC;;;;;;;OAOG;IACH,GAAG,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC1B,kEAAkE;IAClE,YAAY,EAAE,MAAM,mBAAmB,CAAC;CACzC,CAAC;AA+BF;;;;;GAKG;AACH,wBAAgB,8BAA8B,IAAI,2BAA2B,CAsB5E;AAED;;;;;;GAMG;AACH,wBAAgB,iCAAiC,CAC/C,UAAU,EAAE,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,GACpC,MAAM,mBAAmB,CAgB3B;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CACpC,MAAM,CAAC,EAAE,QAAQ,GAAG,IAAI,GAAG,IAAI,GAC9B,mBAAmB,CAarB;AAED,0DAA0D;AAC1D,wBAAgB,iCAAiC,IAAI,IAAI,CAIxD;AAED,gEAAgE;AAChE,eAAO,MAAM,yCAAyC,iCAC5B,CAAC;AAE3B,mEAAmE;AACnE,eAAO,MAAM,mCAAmC,mCAA6B,CAAC"}

package/dist/utils/interactionModality.js

@@ -5,37 +5,26 @@
 /**
  * @file interactionModality.ts
  * @input Global pointerdown/keydown events
- * @output `useInteractionModalityTracking()` activates document-lifetime tracking;
- *   `getInteractionModality()` reads how the user last interacted;
- *   `trackInteractionModalityIn(doc)` and `getInteractionModality(doc)` do the
- *   same for a second document
- * @position Internal document-wide singleton; used where `:focus-visible` alone
- *   is too broad
- *
- * `:focus-visible` is the right selector for a focus ring and should stay the
- * condition that draws one. It is not, on its own, "focused by keyboard":
- * per CSS Selectors 4 a pointer-focused element that supports text entry
- * matches it too, deliberately, so that a clicked text field still shows where
- * typing will go. Measured in Chromium — a bare `<input>` clicked with a mouse
- * matches `:focus-visible`.
- *
- * A component that wants a ring for keyboard focus ONLY therefore needs one bit
- * `:focus-visible` cannot give it: which device moved focus. This records that,
- * to be used as a gate ALONGSIDE `:focus-visible`, never as a replacement for
- * it — the browser's heuristic still decides everything else, including
- * `focus({focusVisible: true})`.
- *
- * The store lives on `document`, so duplicate Astryx bundles share one state
- * value and one listener pair. The first mounted consumer activates tracking;
- * the listeners then remain for the document lifetime so input during a gap
- * between consumers is not lost. A second document (a same-origin iframe, a
- * Document Picture-in-Picture window) gets its own store when a component
- * tracks it, since input there never reaches the page's listeners; its
- * listeners stay only while a consumer there is mounted. Importing this module
- * has no DOM side effects, and server rendering keeps the keyboard-safe
- * default.
+ * @output useInteractionModalityTracking, useInteractionModalityTrackingFor,
+ *   and getInteractionModality, which reads how the user last interacted in a
+ *   document
+ * @position Internal document-wide singleton; used where `:focus-visible`
+ *   alone is too broad
  */
-import { useEffect } from 'react';
+
+// `:focus-visible` stays the condition that draws a focus ring. But it also
+// matches a text field that a pointer focused, so a clicked field shows where
+// typing goes. A ring for keyboard focus only needs to know which device
+// moved focus. Use this as a gate beside `:focus-visible`, never in its
+// place.
+//
+// The store lives on `document`, so duplicate Astryx bundles share one state
+// and one listener pair. The page's listeners stay for the document lifetime,
+// so input between consumers is not lost. A second document (a same-origin
+// iframe, a Document Picture-in-Picture window) gets its own store while a
+// consumer there is mounted. Importing this module has no DOM side effects,
+// and server rendering keeps the keyboard-safe default.
+import { useCallback, useEffect, useRef } from 'react';
 const interactionModalityStoreKey = Symbol.for('@astryxdesign/core/interaction-modality/v1');
 function getStore(targetDocument) {
   const singletonDocument = targetDocument;
@@ -67,14 +56,17 @@ function getStore(targetDocument) {
   });
   return store;
 }
-function trackInteractionModality() {
-  if (typeof document === 'undefined') {
-    return () => {};
+
+/**
+ * Start or stop hearing a document's input. The one place that listens, so a
+ * change in how input is heard touches nothing else.
+ */
+function setListening(targetDocument, store, isListening) {
+  if (store.isListening === isListening) {
+    return;
   }
-  const targetDocument = document;
-  const store = getStore(targetDocument);
-  if (!store.isListening) {
-    store.isListening = true;
+  store.isListening = isListening;
+  if (isListening) {
     targetDocument.addEventListener('pointerdown', store.onPointerDown, {
       capture: true,
       passive: true
@@ -83,43 +75,40 @@ function trackInteractionModality() {
       capture: true,
       passive: true
     });
+  } else {
+    targetDocument.removeEventListener('pointerdown', store.onPointerDown, {
+      capture: true
+    });
+    targetDocument.removeEventListener('keydown', store.onKeyDown, {
+      capture: true
+    });
+  }
+}
+function trackInteractionModality() {
+  if (typeof document === 'undefined') {
+    return () => {};
   }
+  setListening(document, getStore(document), true);
 
   // The document owns these listeners once activated. Removing them when the
   // last consumer unmounts would miss input before the next consumer mounts.
   return () => {};
 }
 
-/** Activate shared modality tracking when the first consumer mounts. */
-export function useInteractionModalityTracking() {
-  useEffect(() => trackInteractionModality(), []);
-}
-
 /**
  * Track a second document while a consumer there is mounted: a component an
  * app renders into a same-origin iframe or a Document Picture-in-Picture
  * window gets input there that never reaches the page's listeners. The first
  * consumer installs the document's listener pair and the last one's cleanup
- * removes it. Read the value with `getInteractionModality(doc)`. The page's
- * own document keeps its document-lifetime listeners.
+ * removes it. The page's own document keeps its document-lifetime listeners.
  */
-export function trackInteractionModalityIn(targetDocument) {
+function trackInteractionModalityIn(targetDocument) {
   if (typeof document !== 'undefined' && targetDocument === document) {
     return trackInteractionModality();
   }
   const store = getStore(targetDocument);
   store.consumers = (store.consumers ?? 0) + 1;
-  if (store.consumers === 1) {
-    store.isListening = true;
-    targetDocument.addEventListener('pointerdown', store.onPointerDown, {
-      capture: true,
-      passive: true
-    });
-    targetDocument.addEventListener('keydown', store.onKeyDown, {
-      capture: true,
-      passive: true
-    });
-  }
+  setListening(targetDocument, store, true);
   let isReleased = false;
   return () => {
     if (isReleased) {
@@ -128,19 +117,94 @@ export function trackInteractionModalityIn(targetDocument) {
     isReleased = true;
     store.consumers = (store.consumers ?? 1) - 1;
     if (store.consumers === 0) {
-      store.isListening = false;
-      targetDocument.removeEventListener('pointerdown', store.onPointerDown, {
-        capture: true
-      });
-      targetDocument.removeEventListener('keydown', store.onKeyDown, {
-        capture: true
-      });
+      setListening(targetDocument, store, false);
     }
   };
 }
 
-/** How the user last interacted with the page, or with `targetDocument`. */
-export function getInteractionModality(targetDocument) {
+/** What a component gets from its one modality call. */
+
+/**
+ * A second-document hold for the node a ref callback receives: called with
+ * each node and with `null`, it releases the previous document before it holds
+ * a new one, and its returned cleanup releases it too, so React's ref cleanup
+ * and `null` calls both work and a release never runs twice.
+ */
+function holdNodeDocument(node, previous) {
+  previous.release?.();
+  previous.release = null;
+  const ownerDocument = node?.ownerDocument;
+  if (ownerDocument == null || typeof document !== 'undefined' && ownerDocument === document) {
+    return undefined;
+  }
+  const release = trackInteractionModalityIn(ownerDocument);
+  previous.release = release;
+  return () => {
+    release();
+    if (previous.release === release) {
+      previous.release = null;
+    }
+  };
+}
+
+/**
+ * Activate shared modality tracking when the first consumer mounts, and read
+ * it for the element the component renders: attach the returned `ref` to that
+ * element. The component makes this one call and adds no effect, listener or
+ * tracker of its own for modality.
+ */
+export function useInteractionModalityTracking() {
+  useEffect(() => trackInteractionModality(), []);
+  const nodeRef = useRef(null);
+  const holdRef = useRef({
+    release: null
+  });
+  const ref = useCallback(node => {
+    nodeRef.current = node;
+    const release = holdNodeDocument(node, holdRef.current);
+    // React's ref cleanup runs instead of a `null` call; it must also forget
+    // the detached node, so the reader never answers from a document whose
+    // listeners are gone.
+    return () => {
+      release?.();
+      if (nodeRef.current === node) {
+        nodeRef.current = null;
+      }
+    };
+  }, []);
+  const readModality = useCallback(() => getInteractionModality(nodeRef.current), []);
+  return {
+    ref,
+    readModality
+  };
+}
+
+/**
+ * The same, for a hook that receives an object ref its consumer owns
+ * (useMenuPress's `menuRef`, useTouchTrigger's trigger), so it cannot attach a
+ * callback ref. After every commit it holds the ref's CURRENT owner document,
+ * and the same Effect's cleanup releases it, so a detached, replaced or moved
+ * node releases the old document before the new one is held.
+ */
+export function useInteractionModalityTrackingFor(elementRef) {
+  useEffect(() => trackInteractionModality(), []);
+  useEffect(() => {
+    const ownerDocument = elementRef.current?.ownerDocument;
+    if (ownerDocument == null || typeof document !== 'undefined' && ownerDocument === document) {
+      return undefined;
+    }
+    return trackInteractionModalityIn(ownerDocument);
+  });
+  return useCallback(() => getInteractionModality(elementRef.current), [elementRef]);
+}
+
+/**
+ * How the user last interacted with the page, or in `target`'s own document
+ * (a document, or any node in one: an element in a same-origin iframe or a
+ * Document Picture-in-Picture window answers for that document).
+ */
+export function getInteractionModality(target) {
+  const targetDocument = target == null ? null : target.nodeType === 9 ? target : target.ownerDocument;
   if (targetDocument != null) {
     return getStore(targetDocument).modality;
   }
@@ -155,4 +219,7 @@ export function __resetInteractionModalityForTest() {
 }
 
 /** Test-only: activate the tracker without rendering a hook. */
-export const __startInteractionModalityTrackingForTest = trackInteractionModality;
+export const __startInteractionModalityTrackingForTest = trackInteractionModality;
+
+/** Test-only: track a second document without rendering a hook. */
+export const __trackInteractionModalityInForTest = trackInteractionModalityIn;

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

@@ -1,77 +1,11 @@
 /**
  * @file Shared hover and pressed overlay states
- * @input Uses StyleX and the semantic interaction-overlay color tokens
- * @output Exports reusable background-color and background-image state styles,
- *   the touch press's registered strength variable (`pressVars`) and its
- *   clocks (`pressConsts`)
+ * @input StyleX and the semantic interaction-overlay color tokens
+ * @output Reusable background-color and background-image state styles, the
+ *   touch press's registered strength variable (`pressVars`) and its clocks
+ *   (`pressConsts`)
  * @position Internal styling utility for interactive core surfaces
  *
- * Every surface that paints a press composes one of these (or carries its own
- * `:active` rule in the same shape), so a change to how the system answers a
- * press is made here once. `pressedBackgroundColor` is the press without the
- * hover, for controls whose hover is a colour or nothing. `pressedAlpha` is the
- * touch press's strength alone, for an owner whose pressed paint lives on a
- * descendant or a pseudo-element.
- *
- * Keep the enabled guard outside the individual states. StyleX assigns an
- * extra priority bucket (and generated selector specificity) to media-nested
- * rules. Repeating `:active` inside the hover-capable branch gives hover and
- * press the same generated specificity; StyleX's native pseudo-state ordering
- * then emits `:active` last.
- *
- * TWO POINTERS, TWO PRESS MODELS. A mouse keeps `:active`. A finger does not:
- * on iOS Safari `:active` paints on the touch itself and can outlive the start
- * of a scroll, so under `@media (pointer: coarse)` the bare `:active` arm is
- * dropped and the press is written by the touch press controller
- * (`utils/pressFeedback.ts`) as `data-astryx-press="on"` once the press is
- * believed (150 ms, no travel, no scroll) and `data-astryx-press="fading"` for the
- * 200 ms release. The query reads the PRIMARY pointer, so on a phone or tablet
- * a mouse, trackpad or Space-key press loses `:active` too; the controller
- * writes the same attribute for those, at once. The two arms paint those
- * through ONE number:
- *
- *  - `--astryx-press-alpha` is the press's strength, 0 to 1. It is a
- *    registered custom property (`@property`, syntax `<number>`, declared once
- *    in the shipped stylesheet by {@link pressVars}), which is what lets it
- *    animate: the overlay itself is a gradient layer, and gradients do not
- *    interpolate, but a registered number does, and every declaration that
- *    reads it is re-resolved on each frame. The touch paint is the pressed
- *    token at that strength — `color-mix(in srgb, pressed calc(alpha * 100%),
- *    transparent)` — declared once here as `--_press-paint` and painted as a
- *    background IMAGE: an image change is discrete, so a composer's colour
- *    transition cannot fade the onset in.
- *  - `[data-astryx-press="on"]` sets the strength to 1 and paints, on the
- *    first frame. Nothing transitions a custom property a composer never named.
- *  - `[data-astryx-press="fading"]` keeps the same paint and runs the release
- *    animation, strength 1 → 0 over {@link PRESS_RELEASE_DURATION} (UIKit's
- *    deselect crossfade; the controller removes the attribute when the same
- *    clock runs out, and by then the paint is gone). It fades to nothing, not
- *    to the hover strength: under a finger there is no hover to land on.
- *
- * WHY AN ANIMATION AND NOT A TRANSITION. Two reasons, both about composers.
- * StyleX is last-wins per property, and composers own their `transition-*`
- * longhands (Button, Item, Tab, Link, ...): the utility can neither append the
- * strength to their transition list nor set one of its own without taking the
- * whole property from them. No composer sets `animation-*` on the element that
- * composes these, so those longhands are free. And a transition needs the
- * declared value to change at the style change, which would make the release
- * arm declare strength 0; every property reading the strength would then
- * change computed value at the lift, and a composer that transitions
- * `background-image` (Button, Token, TreeListItem — Chromium interpolates
- * same-shape gradients) would start its own, shorter fade over this one. With
- * keyframes owning both ends the release arm declares 1 like the on arm, so at
- * the lift nothing a composer transitions changes; only the animation moves.
- *
- * Browser support: Chromium 111+, Safari 16.4+ and Firefox 128+ register the
- * property and interpolate. An engine without `@property` ignores the rule,
- * animates the unregistered value discretely (the paint holds for half the
- * release, then goes) — a step, no worse than the arm before this one.
- *
- * Composers must not set `backgroundImage` of their own on the colour variants
- * (none do): the touch arms own it. Composers must not set `animation-*` on
- * the element that composes any of these (none do): StyleX would drop either
- * the release animation or theirs.
- *
  * SYNC: When modified, update pressFeedback.ts, pressGesture.ts (the fade
  * clock), hooks/usePressFeedback.doc.mjs, the components that paint the touch
  * press off an ancestor scope or a pseudo-element (Switch, Tab,
@@ -108,49 +42,49 @@ export declare const pressConsts: {
 export declare const interactionOverlayStyles: Readonly<{
     readonly backgroundColor: Readonly<{
         readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "light-dark(#0536590C, #FFFFFF0C)" | "light-dark(#05365919, #FFFFFF19)" | "transparent" | null>;
-        readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", unknown>;
+        readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", "var(--_press-paint-image)" | null>;
         readonly '--_press-paint': stylex.StyleXClassNameFor<"--_press-paint", string>;
         readonly '--_press-paint-image': stylex.StyleXClassNameFor<"--_press-paint-image", string>;
-        readonly animationName: stylex.StyleXClassNameFor<"animationName", unknown>;
-        readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration", unknown>;
-        readonly animationTimingFunction: stylex.StyleXClassNameFor<"animationTimingFunction", unknown>;
-        readonly animationFillMode: stylex.StyleXClassNameFor<"animationFillMode", unknown>;
+        readonly animationName: stylex.StyleXClassNameFor<"animationName", string | null>;
+        readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration", string | null>;
+        readonly animationTimingFunction: stylex.StyleXClassNameFor<"animationTimingFunction", string | null>;
+        readonly animationFillMode: stylex.StyleXClassNameFor<"animationFillMode", "both" | null>;
     }>;
     readonly backgroundImage: Readonly<{
         readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", string | null>;
         readonly '--_press-paint': stylex.StyleXClassNameFor<"--_press-paint", string>;
         readonly '--_press-paint-image': stylex.StyleXClassNameFor<"--_press-paint-image", string>;
-        readonly animationName: stylex.StyleXClassNameFor<"animationName", unknown>;
-        readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration", unknown>;
-        readonly animationTimingFunction: stylex.StyleXClassNameFor<"animationTimingFunction", unknown>;
-        readonly animationFillMode: stylex.StyleXClassNameFor<"animationFillMode", unknown>;
+        readonly animationName: stylex.StyleXClassNameFor<"animationName", string | null>;
+        readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration", string | null>;
+        readonly animationTimingFunction: stylex.StyleXClassNameFor<"animationTimingFunction", string | null>;
+        readonly animationFillMode: stylex.StyleXClassNameFor<"animationFillMode", "both" | null>;
     }>;
     readonly backgroundImageOnNeutral: Readonly<{
         readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", string | null>;
         readonly '--_press-paint': stylex.StyleXClassNameFor<"--_press-paint", string>;
         readonly '--_press-paint-image': stylex.StyleXClassNameFor<"--_press-paint-image", string>;
-        readonly animationName: stylex.StyleXClassNameFor<"animationName", unknown>;
-        readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration", unknown>;
-        readonly animationTimingFunction: stylex.StyleXClassNameFor<"animationTimingFunction", unknown>;
-        readonly animationFillMode: stylex.StyleXClassNameFor<"animationFillMode", unknown>;
+        readonly animationName: stylex.StyleXClassNameFor<"animationName", string | null>;
+        readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration", string | null>;
+        readonly animationTimingFunction: stylex.StyleXClassNameFor<"animationTimingFunction", string | null>;
+        readonly animationFillMode: stylex.StyleXClassNameFor<"animationFillMode", "both" | null>;
     }>;
     readonly pressedBackgroundColor: Readonly<{
         readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "light-dark(#05365919, #FFFFFF19)" | "transparent" | null>;
-        readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", unknown>;
+        readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", "var(--_press-paint-image)" | null>;
         readonly '--_press-paint': stylex.StyleXClassNameFor<"--_press-paint", string>;
         readonly '--_press-paint-image': stylex.StyleXClassNameFor<"--_press-paint-image", string>;
-        readonly animationName: stylex.StyleXClassNameFor<"animationName", unknown>;
-        readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration", unknown>;
-        readonly animationTimingFunction: stylex.StyleXClassNameFor<"animationTimingFunction", unknown>;
-        readonly animationFillMode: stylex.StyleXClassNameFor<"animationFillMode", unknown>;
+        readonly animationName: stylex.StyleXClassNameFor<"animationName", string | null>;
+        readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration", string | null>;
+        readonly animationTimingFunction: stylex.StyleXClassNameFor<"animationTimingFunction", string | null>;
+        readonly animationFillMode: stylex.StyleXClassNameFor<"animationFillMode", "both" | null>;
     }>;
     readonly pressedAlpha: Readonly<{
         readonly '--_press-paint': stylex.StyleXClassNameFor<"--_press-paint", string>;
         readonly '--_press-paint-image': stylex.StyleXClassNameFor<"--_press-paint-image", string>;
-        readonly animationName: stylex.StyleXClassNameFor<"animationName", unknown>;
-        readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration", unknown>;
-        readonly animationTimingFunction: stylex.StyleXClassNameFor<"animationTimingFunction", unknown>;
-        readonly animationFillMode: stylex.StyleXClassNameFor<"animationFillMode", unknown>;
+        readonly animationName: stylex.StyleXClassNameFor<"animationName", string | null>;
+        readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration", string | null>;
+        readonly animationTimingFunction: stylex.StyleXClassNameFor<"animationTimingFunction", string | null>;
+        readonly animationFillMode: stylex.StyleXClassNameFor<"animationFillMode", "both" | null>;
     }>;
 }>;
 //# sourceMappingURL=interactionOverlay.stylex.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"interactionOverlay.stylex.d.ts","sourceRoot":"","sources":["../../src/utils/interactionOverlay.stylex.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS;;WAEpB,CAAC;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW;IACtB,iEAAiE;;CAEjE,CAAC;AA6GH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8HnC,CAAC"}
+{"version":3,"file":"interactionOverlay.stylex.d.ts","sourceRoot":"","sources":["../../src/utils/interactionOverlay.stylex.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;GAaG;AAmCH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS;;WAEpB,CAAC;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW;IACtB,iEAAiE;;CAEjE,CAAC;AA8HH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8HnC,CAAC"}