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

package/src/utils/hitArea.ts

@@ -24,6 +24,9 @@
 // live control measures: only under a coarse primary pointer (AST-094), only on
 // screen, and in one read pass per frame within a 4 ms budget. Until the first
 // pass the insets are 0, so first paint never overlaps anything.
+// The insets are lengths in the control's own box, so a pass measures in its
+// layout px. A layer that opens from a smaller scale then keeps the insets of
+// the size it settles at.
 
 import {observeContent} from './sharedMutationObserver';
 
@@ -330,6 +333,95 @@ function plainRect(element: Element): HitRect {
   return {left, top, right, bottom};
 }
 
+/** A box that the transforms around it leave at its layout size. */
+const UNSCALED = {x: 1, y: 1} as const;
+
+/** One axis of a box's scale on screen: its client size over its layout size. */
+function axisScale(onScreen: number, layout: number): number {
+  if (!(layout > 0) || !(onScreen > 0)) {
+    return 1;
+  }
+  const scale = onScreen / layout;
+  // Within rounding of 1 the box is at its layout size: no change to the rects.
+  return Math.abs(scale - 1) < 1e-3 ? 1 : scale;
+}
+
+/**
+ * How far the transforms around `element` scale its box on screen, per axis.
+ * A layer that opens from a smaller scale scales every rect inside it, while
+ * the layout box keeps the size the layer settles at. Only a scale is
+ * expected: a rotated or skewed box would read as a larger scale.
+ */
+function screenScale(
+  element: Element,
+  onScreen: HitRect,
+): {x: number; y: number} {
+  // The offset size is the layout size in whole pixels, unaffected by
+  // transforms, and costs no style resolution. A box with none, such as an SVG
+  // element or a jsdom box, reads as unscaled.
+  const box = element as Partial<HTMLElement>;
+  const offsetWidth = box.offsetWidth ?? 0;
+  const offsetHeight = box.offsetHeight ?? 0;
+  if (offsetWidth === 0 || offsetHeight === 0) {
+    return UNSCALED;
+  }
+  // Within a pixel of its layout size the box reads as unscaled, which bounds
+  // the inset error at about a pixel. Only a box that a transform shrinks or
+  // grows reads its exact size from the computed style.
+  if (
+    Math.abs(onScreen.right - onScreen.left - offsetWidth) <= 1 &&
+    Math.abs(onScreen.bottom - onScreen.top - offsetHeight) <= 1
+  ) {
+    return UNSCALED;
+  }
+  const style = element.ownerDocument.defaultView?.getComputedStyle(element);
+  if (style == null || !style.width.endsWith('px')) {
+    return UNSCALED;
+  }
+  const px = (value: string) => Number.parseFloat(value) || 0;
+  const isContentBox = style.boxSizing !== 'border-box';
+  const width =
+    px(style.width) +
+    (isContentBox
+      ? px(style.paddingLeft) +
+        px(style.paddingRight) +
+        px(style.borderLeftWidth) +
+        px(style.borderRightWidth)
+      : 0);
+  const height =
+    px(style.height) +
+    (isContentBox
+      ? px(style.paddingTop) +
+        px(style.paddingBottom) +
+        px(style.borderTopWidth) +
+        px(style.borderBottomWidth)
+      : 0);
+  return {
+    x: axisScale(onScreen.right - onScreen.left, width),
+    y: axisScale(onScreen.bottom - onScreen.top, height),
+  };
+}
+
+/**
+ * `rect` in the layout px of the box at `origin`: its offset from `origin`,
+ * divided by that box's scale on screen.
+ */
+function inLayout(
+  rect: HitRect,
+  origin: HitRect,
+  scale: {x: number; y: number},
+): HitRect {
+  if (scale.x === 1 && scale.y === 1) {
+    return rect;
+  }
+  return {
+    left: origin.left + (rect.left - origin.left) / scale.x,
+    top: origin.top + (rect.top - origin.top) / scale.y,
+    right: origin.left + (rect.right - origin.left) / scale.x,
+    bottom: origin.top + (rect.bottom - origin.top) / scale.y,
+  };
+}
+
 interface Candidate {
   readonly element: Element;
   readonly rect: HitRect;
@@ -373,14 +465,15 @@ function measureOne(
   candidates: ReadonlyArray<Candidate>,
 ): {target: HitRect; insets: HitInsets; neighbours: HitRect[]} {
   const target = plainRect(watch.element);
+  const scale = screenScale(watch.element, target);
   // Two targets each growing up to half the minimum reach each other from a
   // minimum apart.
   const reach = Math.max(0, watch.minSize);
   const band = grown(target, {
-    top: reach,
-    right: reach,
-    bottom: reach,
-    left: reach,
+    top: reach * scale.y,
+    right: reach * scale.x,
+    bottom: reach * scale.y,
+    left: reach * scale.x,
   });
   const neighbours = candidates
     .filter(
@@ -393,7 +486,16 @@ function measureOne(
     .map(({rect}) => rect);
   return {
     target,
-    insets: clampedHitInsets(target, neighbours, watch.minSize),
+    // The insets are in the control's layout px. The returned rects stay in
+    // screen px for a touch's distance checks. A neighbour maps by the
+    // control's scale, as if it is in the same layer. A neighbour outside that
+    // layer then reads farther away. A touch compares screen distances, so it
+    // still counts that neighbour.
+    insets: clampedHitInsets(
+      inLayout(target, target, scale),
+      neighbours.map(rect => inLayout(rect, target, scale)),
+      watch.minSize,
+    ),
     neighbours,
   };
 }

package/src/utils/inputStream.ts

@@ -4,7 +4,8 @@
  * @file inputStream.ts
  * @input A window, and subscribers to its input events (the press feedback
  *   controller, the gesture host)
- * @output subscribeInput
+ * @output subscribeInput, and getLastPointerType: the type of the latest
+ *   pointer event the stream delivered
  * @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
@@ -22,18 +23,21 @@
 // `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.
+// Subscribers run in subscription order, after the ones subscribed `first`.
+// A first subscriber that returns `true` ends the dispatch: no later
+// subscriber hears the event. 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.
 
-type InputListener = (event: Event) => void;
+type InputListener = (event: Event) => unknown;
 
 interface Subscriber {
   readonly listener: InputListener;
   readonly cancels: boolean;
+  readonly isFirst: boolean;
 }
 
 interface Channel {
@@ -50,12 +54,30 @@ export interface InputSubscriptionOptions {
    * @default false
    */
   readonly cancels?: boolean;
+  /**
+   * The subscriber runs before every subscriber that is not first. When it
+   * returns `true`, no later subscriber hears the event.
+   * @default false
+   */
+  readonly first?: boolean;
 }
 
 /** The events a window's capture phase sees: its own, and the document's. */
 export type InputEventMap = WindowEventMap & DocumentEventMap;
 
 const streams = new WeakMap<Window, Map<string, Channel>>();
+/** The type of the latest pointer event each window's stream delivered. */
+const lastPointerTypes = new WeakMap<Window, string>();
+
+/**
+ * The type of the latest pointer event `view`'s stream delivered: `mouse`,
+ * `pen` or `touch`, or `null` before any. The stream hears a pointer event
+ * type only while a subscriber listens to it, as press feedback does on any
+ * page with a pressable. Reading it adds no listener.
+ */
+export function getLastPointerType(view: Window): string | null {
+  return lastPointerTypes.get(view) ?? null;
+}
 
 /**
  * Listen to `type` on `view`'s capture phase through its shared native
@@ -64,8 +86,8 @@ const streams = new WeakMap<Window, Map<string, Channel>>();
 export function subscribeInput<K extends keyof InputEventMap>(
   view: Window,
   type: K,
-  listener: (event: InputEventMap[K]) => void,
-  {cancels = false}: InputSubscriptionOptions = {},
+  listener: (event: InputEventMap[K]) => unknown,
+  {cancels = false, first = false}: InputSubscriptionOptions = {},
 ): () => void {
   let channels = streams.get(view);
   if (channels == null) {
@@ -80,8 +102,16 @@ export function subscribeInput<K extends keyof InputEventMap>(
   const subscriber: Subscriber = {
     listener: listener as InputListener,
     cancels,
+    isFirst: first,
   };
-  channel.subscribers.push(subscriber);
+  const firstLater = first
+    ? channel.subscribers.findIndex(other => !other.isFirst)
+    : -1;
+  if (firstLater === -1) {
+    channel.subscribers.push(subscriber);
+  } else {
+    channel.subscribers.splice(firstLater, 0, subscriber);
+  }
   register(view, type, channel);
   let isSubscribed = true;
   return () => {
@@ -124,12 +154,17 @@ function register(view: Window, type: string, channel: Channel): void {
   if (wanted == null) {
     return;
   }
-  const listener: InputListener = event => dispatch(channel, event);
+  const listener: InputListener = event => dispatch(view, channel, event);
   view.addEventListener(type, listener, {capture: true, passive: !wanted});
   channel.native = {listener, cancels: wanted};
 }
 
-function dispatch(channel: Channel, event: Event): void {
+function dispatch(view: Window, channel: Channel, event: Event): void {
+  // Recorded before any subscriber runs, so each reads the pointer at hand.
+  const {pointerType} = event as Partial<PointerEvent>;
+  if (typeof pointerType === 'string' && pointerType !== '') {
+    lastPointerTypes.set(view, pointerType);
+  }
   // 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]) {
@@ -137,7 +172,9 @@ function dispatch(channel: Channel, event: Event): void {
       continue;
     }
     try {
-      subscriber.listener(event);
+      if (subscriber.listener(event) === true && subscriber.isFirst) {
+        return;
+      }
     } catch (error) {
       report(error);
     }

package/src/utils/interactionOverlay.stylex.ts

@@ -9,7 +9,8 @@
  * @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`)
+ *   (`pressConsts`). The list row's compositor press layer and its clocks
+ *   are internal (privateAttributes/press.stylex.ts, utils/rowPressLayer.stylex.ts)
  * @position Internal styling utility for interactive core surfaces
  *
  * SYNC: When modified, update pressFeedback.ts, pressGesture.ts (the fade
@@ -41,7 +42,7 @@
 // background image, so a composer's color transition cannot fade the onset
 // in. `on` sets the strength to 1 on the first frame. `fading` animates it
 // from 1 to 0, not to the hover strength, because a finger has no hover. The
-// theme's motion tempo scales the release clock (AST-108).
+// release plays the theme's exit motion tokens, which follow its tempo.
 //
 // The release is an animation, not a transition. Composers own their
 // `transition-*` longhands, and StyleX is last-wins per property. A
@@ -54,7 +55,8 @@
 // `animation-*` on the element that composes them. The touch arms own both.
 
 import * as stylex from '@stylexjs/stylex';
-import {colorVars} from '../theme/tokens.stylex';
+import {reducedMotionFadeConsts} from '../motion/reducedMotion.stylex';
+import {colorVars, durationVars, easeVars} from '../theme/tokens.stylex';
 
 /**
  * The touch press's strength on the surface the controller painted, 0 to 1.
@@ -72,26 +74,22 @@ export const pressVars = stylex.defineVars({
 });
 
 /**
- * The touch press's clocks that both the stylesheet and the controller read.
- *
- * `defineConsts`, so the one number is inlined here at build time and is the
- * controller's constant at run time (`PRESS_FADE_MS` in pressGesture.ts):
- * the release animation and the controller's clock cannot drift apart. When
- * that clock runs out, the controller waits for a release animation that a
- * busy main thread started late, then removes the attribute.
+ * The touch press's measured release clock, kept as a reference value. Press
+ * releases now play the theme's `--duration-exit`.
  */
 export const pressConsts = stylex.defineConsts({
-  /** How long the release takes, in ms. UIKit's deselect clock. */
+  /** UIKit's deselect clock, in ms: the measured reference value. */
   releaseMs: 200,
 });
 
 /**
- * The release's clock as CSS, scaled by the theme's `--_astryx-motion-tempo`
- * up to 1.5, its maximum. The controller's timer reads the same property.
+ * The release's clock: the theme's exit duration. The token already
+ * follows the theme's tempo. The controller's timer reads the
+ * same property.
  */
-const PRESS_RELEASE_DURATION = `calc(${pressConsts.releaseMs}ms * min(var(--_astryx-motion-tempo, 1), 1.5))`;
-/** The same clock under Reduce Motion: a tempo may shorten it, never lengthen it. */
-const PRESS_RELEASE_DURATION_REDUCED = `min(${pressConsts.releaseMs}ms, calc(${pressConsts.releaseMs}ms * var(--_astryx-motion-tempo, 1)))`;
+const PRESS_RELEASE_DURATION = durationVars['--duration-exit'];
+/** The same clock under Reduce Motion, no longer than the Reduce Motion fade. */
+const PRESS_RELEASE_DURATION_REDUCED = `min(${durationVars['--duration-exit']}, ${reducedMotionFadeConsts.duration})`;
 
 const ENABLED = ':where(:not(:disabled,[aria-disabled="true"]))';
 const HOVER_HOVER = '@media (hover: hover)';
@@ -144,13 +142,12 @@ const pressRelease = stylex.keyframes({
 });
 
 /**
- * The release's curve: a gentle ease-out that spends the whole clock fading
- * (strength ≈ 0.2 at the midpoint), which is what a deselect crossfade reads
- * as. Not the system's `--ease-standard`: that curve is for things that move,
- * and is so front-loaded (strength 0.05 at the midpoint) that the release
- * would read as half its clock.
+ * The release's curve: the theme's exit easing. The list row's layer
+ * (privateAttributes/press.stylex.ts) and Switch's press layers use the same
+ * token; interactionOverlay.cell.test.ts and Switch.test.tsx fail if they
+ * differ.
  */
-const RELEASE_EASE = 'cubic-bezier(0, 0, 0.2, 1)';
+const RELEASE_EASE = easeVars['--ease-exit'];
 
 /**
  * The touch press's strength and its release, on the element the controller

package/src/utils/plainDate.ts

@@ -9,6 +9,11 @@
 
 import type {ISODateString, PlainDate} from './dateTypes';
 import type {Locale} from '../i18n/types';
+import {
+  formatCalendarDate,
+  isCalendarSystem,
+  type CalendarSystem,
+} from './calendarSystem';
 import {firstCharacter} from './characters';
 import {standaloneMonthCapitalLanguages} from './standaloneMonthCapitals.generated';
 
@@ -374,8 +379,13 @@ export const DATE_FORMAT_MONTH_YEAR: Intl.DateTimeFormatOptions = {
 export function plainDateFormatStandaloneMonthYear(
   pd: PlainDate,
   locale: Locale,
+  calendar: Intl.DateTimeFormatOptions['calendar'] = 'gregory',
 ): string {
-  const label = plainDateFormat(pd, DATE_FORMAT_MONTH_YEAR, locale);
+  const label = plainDateFormat(
+    pd,
+    {...DATE_FORMAT_MONTH_YEAR, calendar},
+    locale,
+  );
   let language: string;
   try {
     language = new Intl.Locale(locale).language;
@@ -450,35 +460,63 @@ export const DATE_FORMAT_SHORT_WITH_YEAR: Intl.DateTimeFormatOptions = {
  * when `options.calendar` is omitted. The explicit option remains supported for
  * compatibility with the public `Intl.DateTimeFormatOptions` signature; it is a
  * display-only escape hatch and does not change PlainDate arithmetic, parsing,
- * serialization, or any Astryx component's calendar semantics.
+ * serialization, or any Astryx component's calendar semantics. Another
+ * calendar names the month and day that Calendar shows in it.
  */
 export function plainDateFormat(
   pd: PlainDate,
   options: Intl.DateTimeFormatOptions,
   locale: Locale = 'en',
 ): string {
+  const calendar = options.calendar ?? 'gregory';
+  if (calendar !== 'gregory' && isCalendarSystem(calendar)) {
+    return formatCalendarDate(calendar, pd, options, locale);
+  }
+  const [format, date] = plainDateFormatInput(pd, options, locale);
+  return format.format(date);
+}
+
+/**
+ * The parts of `plainDateFormat`'s output, from the same formatter and date.
+ * Internal: not re-exported from `utils/index.ts`.
+ */
+export function plainDateFormatToParts(
+  pd: PlainDate,
+  options: Intl.DateTimeFormatOptions,
+  locale: Locale,
+): Intl.DateTimeFormatPart[] {
+  const [format, date] = plainDateFormatInput(pd, options, locale);
+  return format.formatToParts(date);
+}
+
+function plainDateFormatInput(
+  pd: PlainDate,
+  options: Intl.DateTimeFormatOptions,
+  locale: Locale,
+): [Intl.DateTimeFormat, Date | number] {
   const calendar = options.calendar ?? 'gregory';
   if (options.timeZone != null) {
-    return dateTimeFormatFor(locale, {...options, calendar}).format(
+    return [
+      dateTimeFormatFor(locale, {...options, calendar}),
       plainDateToDate(pd),
-    );
+    ];
   }
   if (TIME_OF_DAY_FIELDS.some(field => options[field] != null)) {
     // A zone name or a time of day reads local midnight in the zone current
     // at the call. A cached formatter would keep the zone it was built in,
     // so this one is built for the call.
-    return new Intl.DateTimeFormat(locale, {...options, calendar}).format(
+    return [
+      new Intl.DateTimeFormat(locale, {...options, calendar}),
       plainDateToDate(pd),
-    );
+    ];
   }
   // Date fields alone: UTC midnight formatted in UTC, so neither the cached
   // formatter nor the date depends on the host's zone, which can change while
   // a page is open.
-  return dateTimeFormatFor(locale, {
-    ...options,
-    calendar,
-    timeZone: 'UTC',
-  }).format(utcTime(pd.year, pd.month - 1, pd.day));
+  return [
+    dateTimeFormatFor(locale, {...options, calendar, timeZone: 'UTC'}),
+    utcTime(pd.year, pd.month - 1, pd.day),
+  ];
 }
 
 /** Options that print a time of day or a zone, which a PlainDate lacks. */
@@ -518,6 +556,20 @@ export function dateTimeFormatFor(
   return format;
 }
 
+/**
+ * @internal `dateTimeFormatFor`, except that without `options.timeZone` it
+ * builds a formatter for the call. A cached formatter keeps the host zone it
+ * was built in.
+ */
+export function dateTimeFormatAtCall(
+  locale: Locale,
+  options: Intl.DateTimeFormatOptions,
+): Intl.DateTimeFormat {
+  return options.timeZone === undefined
+    ? new Intl.DateTimeFormat(locale, options)
+    : dateTimeFormatFor(locale, options);
+}
+
 /**
  * The locale's name for the "week of year" date field ("week", "Woche", "週"),
  * from CLDR through `Intl.DisplayNames`. Calendar names its week-number
@@ -543,23 +595,29 @@ export function plainDateWeekFieldName(locale: Locale = 'en'): string {
   return 'week';
 }
 
-const dayNumberFormats = new Map<Locale, Intl.NumberFormat>();
+const dayNumberFormats = new Map<string, Intl.NumberFormat>();
 
 /**
  * A day of the month or a week number in the locale's own digits: `15` in
- * English, `۱۵` in Persian, `١٥` in Egyptian Arabic. Only the digits follow the
- * locale. The number stays the Gregorian day or ISO week that it names, so no
- * other calendar applies, and no grouping separator or unit word is added.
+ * English, `۱۵` in Persian, `١٥` in Egyptian Arabic. A `numberingSystem`
+ * replaces the locale's digits. Only the digits change. The number stays the
+ * value that it is given, so no calendar applies, and no grouping separator or
+ * unit word is added.
  * Internal: not re-exported from `utils/index.ts`.
  */
 export function plainDateFormatDayNumber(
   value: number,
   locale: Locale,
+  numberingSystem?: string,
 ): string {
-  let format = dayNumberFormats.get(locale);
+  const key = `${locale}|${numberingSystem ?? ''}`;
+  let format = dayNumberFormats.get(key);
   if (format == null) {
-    format = new Intl.NumberFormat(locale, {useGrouping: false});
-    dayNumberFormats.set(locale, format);
+    format = new Intl.NumberFormat(locale, {
+      useGrouping: false,
+      numberingSystem,
+    });
+    dayNumberFormats.set(key, format);
   }
   return format.format(value);
 }
@@ -605,14 +663,21 @@ export const SHARED_DATE_FORMAT_OPTIONS: Record<
  * members. The shared entry point DateInput uses for the named-format path;
  * Timestamp maps the same members onto {@link SHARED_DATE_FORMAT_OPTIONS} in
  * its own `formatTimestamp` switch (its input is a `Date`, not a `PlainDate`).
+ * The locale-aware members write the date in `calendar`, which defaults to
+ * Gregorian. `system_date` stays the Gregorian ISO date in every calendar.
  */
 export function formatSharedDate(
   pd: PlainDate,
   format: SharedDateFormat,
   locale: Locale = 'en',
+  calendar: CalendarSystem = 'gregory',
 ): string {
   if (format === 'system_date') {
     return plainDateToISO(pd);
   }
-  return plainDateFormat(pd, SHARED_DATE_FORMAT_OPTIONS[format], locale);
+  return plainDateFormat(
+    pd,
+    {...SHARED_DATE_FORMAT_OPTIONS[format], calendar},
+    locale,
+  );
 }

package/src/utils/pressFeedback.ts

@@ -3,10 +3,10 @@
 /**
  * @file pressFeedback.ts
  * @input The press state machine (pressGesture.ts), the menu-press and
- *   press-group markers and the document's pointer, keyboard, scroll and
+ *   press-group markers, the scroll-view test (scrollView.ts) and the document's pointer, keyboard, scroll and
  *   visibility events
  * @output PRESSABLE_ATTRIBUTE, PRESSED_ATTRIBUTE, pressableProps,
- *   pressFadeMs and installPressFeedback
+ *   pressFadeMs, installPressFeedback and cancelPress
  * @position The DOM half of the touch press model. usePressFeedback installs
  *   it, and the CSS arms live in interactionOverlay.stylex.ts.
  *
@@ -23,9 +23,13 @@
 // Where the primary pointer is fine, the controller ignores the mouse and the
 // keyboard, and CSS `:active` keeps their press. Under a coarse primary
 // pointer the CSS drops `:active`, so the controller paints every press. A
-// finger's press paints after the delay. A mouse, trackpad or Space press
-// paints at once. The controller reads the same query as the stylesheet, so
-// they agree.
+// mouse, trackpad or Space press paints at once. The controller reads the
+// same query as the stylesheet, so they agree.
+//
+// A finger waits only inside a scroller. Outside one, a surface highlights in
+// the frame the finger lands, as a UIControl does. Inside one, it waits the
+// content-touch delay, because the touch can become a scroll. Rows follow the
+// same rule.
 //
 // A surface's hold does nothing, so it keeps the browser's long-press text
 // selection (AST-094). Only an element whose hold does something suppresses
@@ -43,7 +47,10 @@ import {
   pressGestureStep,
 } from './pressGesture';
 import {isCoarsePointer, watchCoarsePointer} from './coarsePointer';
+import {reducedMotionFadeConsts} from '../motion/reducedMotion.stylex';
+import {parseMotionRoleValue} from '../motion/roles';
 import {subscribeInput} from './inputStream';
+import {isInsideScrollView} from './scrollView';
 import {TOUCH_QUERY} from './touchPresentation';
 import {holdsPressThroughDrag} from '../privateAttributes/pressHoldsDrag.stylex';
 import {isTrackedByGroup} from '../privateAttributes/pressGroupItem.stylex';
@@ -151,19 +158,24 @@ const TIMER_MS: Record<NonNullable<PressStep['timer']>, number> = {
 
 /**
  * The release fade's clock on `element`, read once, at the release, from the
- * property its stylesheet reads: the theme's `--_astryx-motion-tempo`. Under
- * Reduce Motion a tempo may shorten the fade, never lengthen it past 200 ms.
+ * token its stylesheet reads: the theme's `--duration-exit`. Without a
+ * readable value it is the token's default. Under Reduce Motion it is no
+ * longer than the Reduce Motion fade, as in the stylesheet.
  */
 export function pressFadeMs(element: Element): number {
-  const style = getComputedStyle(element);
-  const value = style.getPropertyValue('--_astryx-motion-tempo').trim();
-  const read = value === '' ? Number.NaN : Number(value);
-  const tempo = Number.isFinite(read) && read > 0 ? read : 1;
-  const scaled = PRESS_FADE_MS * tempo;
+  const exit =
+    parseMotionRoleValue(
+      'duration',
+      getComputedStyle(element).getPropertyValue('--duration-exit'),
+    ) ?? PRESS_FADE_MS;
   const reduced =
     typeof window.matchMedia === 'function' &&
     window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-  return reduced ? Math.min(scaled, PRESS_FADE_MS) : scaled;
+  const bound = parseMotionRoleValue(
+    'duration',
+    reducedMotionFadeConsts.duration,
+  );
+  return reduced && bound != null ? Math.min(exit, bound) : exit;
 }
 
 /**
@@ -247,7 +259,11 @@ function paintElement(element: HTMLElement, paint: PressPaint): void {
     element.removeAttribute(PRESSED_ATTRIBUTE);
     return;
   }
-  element.setAttribute(PRESSED_ATTRIBUTE, paint);
+  // A step that keeps the paint writes nothing, so the element sees one
+  // change per paint.
+  if (element.getAttribute(PRESSED_ATTRIBUTE) !== paint) {
+    element.setAttribute(PRESSED_ATTRIBUTE, paint);
+  }
 }
 
 function clearTimer(slot: Slot): void {
@@ -381,6 +397,21 @@ function finish(slot: Slot): void {
   }
 }
 
+/**
+ * Ends the press the controller follows on `element`, and its paint, at once.
+ * A clickable container calls it when a press starts on an interactive
+ * element inside it: that press does not activate the container, so the
+ * container shows no press.
+ */
+export function cancelPress(element: Element): void {
+  if (finger.live?.element === element) {
+    finish(finger);
+  }
+  if (button.live?.element === element) {
+    finish(button);
+  }
+}
+
 /** A new press on an element owns its paint: the other slot's gesture there ends. */
 function takeOver(other: Slot, element: HTMLElement): void {
   if (other.live?.element === element) {
@@ -521,6 +552,7 @@ function onPointerDown(event: PointerEvent): void {
       kind: 'down',
       x: event.clientX,
       y: event.clientY,
+      delayed: isInsideScrollView(element),
     }),
   );
 }