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

package/dist/utils/plainDate.js

@@ -7,6 +7,7 @@
  * @position Shared utility; replaces scattered Date usage across Calendar hooks
  */
 
+import { formatCalendarDate, isCalendarSystem } from "./calendarSystem.js";
 import { firstCharacter } from "./characters.js";
 import { standaloneMonthCapitalLanguages } from "./standaloneMonthCapitals.generated.js";
 export function plainDateCreate(year, month, day) {
@@ -278,8 +279,11 @@ export const DATE_FORMAT_MONTH_YEAR = {
  * stand-alone forms (`component:Calendar` FR1). Internal: not re-exported from
  * `utils/index.ts`.
  */
-export function plainDateFormatStandaloneMonthYear(pd, locale) {
-  const label = plainDateFormat(pd, DATE_FORMAT_MONTH_YEAR, locale);
+export function plainDateFormatStandaloneMonthYear(pd, locale, calendar = 'gregory') {
+  const label = plainDateFormat(pd, {
+    ...DATE_FORMAT_MONTH_YEAR,
+    calendar
+  }, locale);
   let language;
   try {
     language = new Intl.Locale(locale).language;
@@ -357,33 +361,51 @@ export const DATE_FORMAT_SHORT_WITH_YEAR = {
  * 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, options, locale = 'en') {
+  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, options, locale) {
+  const [format, date] = plainDateFormatInput(pd, options, locale);
+  return format.formatToParts(date);
+}
+function plainDateFormatInput(pd, options, locale) {
   const calendar = options.calendar ?? 'gregory';
   if (options.timeZone != null) {
-    return dateTimeFormatFor(locale, {
+    return [dateTimeFormatFor(locale, {
       ...options,
       calendar
-    }).format(plainDateToDate(pd));
+    }), 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, {
+    return [new Intl.DateTimeFormat(locale, {
       ...options,
       calendar
-    }).format(plainDateToDate(pd));
+    }), 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, {
+  return [dateTimeFormatFor(locale, {
     ...options,
     calendar,
     timeZone: 'UTC'
-  }).format(utcTime(pd.year, pd.month - 1, pd.day));
+  }), utcTime(pd.year, pd.month - 1, pd.day)];
 }
 
 /** Options that print a time of day or a zone, which a PlainDate lacks. */
@@ -409,6 +431,15 @@ export function dateTimeFormatFor(locale, options) {
   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, options) {
+  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
@@ -437,18 +468,21 @@ const dayNumberFormats = new Map();
 
 /**
  * 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, locale) {
-  let format = dayNumberFormats.get(locale);
+export function plainDateFormatDayNumber(value, locale, numberingSystem) {
+  const key = `${locale}|${numberingSystem ?? ''}`;
+  let format = dayNumberFormats.get(key);
   if (format == null) {
     format = new Intl.NumberFormat(locale, {
-      useGrouping: false
+      useGrouping: false,
+      numberingSystem
     });
-    dayNumberFormats.set(locale, format);
+    dayNumberFormats.set(key, format);
   }
   return format.format(value);
 }
@@ -489,10 +523,15 @@ export const SHARED_DATE_FORMAT_OPTIONS = {
  * 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, format, locale = 'en') {
+export function formatSharedDate(pd, format, locale = 'en', calendar = 'gregory') {
   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/dist/utils/pressFeedback.d.ts

@@ -25,10 +25,18 @@ export declare const pressableProps: {
 export declare const PRESS_GESTURE_MEMORY_MS = 3000;
 /**
  * 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 declare function pressFadeMs(element: Element): number;
+/**
+ * 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 declare function cancelPress(element: Element): void;
 /**
  * Install the touch press controller on this document, once, however many
  * times it is called: the listeners exist while at least one caller holds it.

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

@@ -1 +1 @@
-{"version":3,"file":"pressFeedback.d.ts","sourceRoot":"","sources":["../../src/utils/pressFeedback.ts"],"names":[],"mappings":"AAkDA;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,0BAA0B,CAAC;AAE3D;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC;AAErD,qDAAqD;AACrD,eAAO,MAAM,cAAc,EAAE;IAAC,QAAQ,CAAC,CAAC,mBAAmB,CAAC,EAAE,EAAE,CAAA;CAE/D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,OAAO,CAAC;AA0E5C;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAUpD;AAkoBD;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,IAAI,CA0BjD"}
+{"version":3,"file":"pressFeedback.d.ts","sourceRoot":"","sources":["../../src/utils/pressFeedback.ts"],"names":[],"mappings":"AAyDA;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,0BAA0B,CAAC;AAE3D;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC;AAErD,qDAAqD;AACrD,eAAO,MAAM,cAAc,EAAE;IAAC,QAAQ,CAAC,CAAC,mBAAmB,CAAC,EAAE,EAAE,CAAA;CAE/D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,OAAO,CAAC;AA0E5C;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAcpD;AA6ND;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAOlD;AA4aD;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,IAAI,CA0BjD"}

package/dist/utils/pressFeedback.js

@@ -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
@@ -35,7 +39,10 @@
 import { MENU_PRESS_MARKER } from "../hooks/menuPressMarker.js";
 import { idlePressGesture, PRESS_FADE_MS, PRESS_FLASH_MS, PRESS_ONSET_MS, PRESS_SCROLL_BRAKE_MS, pressGestureStep } from "./pressGesture.js";
 import { isCoarsePointer, watchCoarsePointer } from "./coarsePointer.js";
+import { reducedMotionFadeConsts } from "../motion/reducedMotion.stylex.js";
+import { parseMotionRoleValue } from "../motion/roles.js";
 import { subscribeInput } from "./inputStream.js";
+import { isInsideScrollView } from "./scrollView.js";
 import { TOUCH_QUERY } from "./touchPresentation.js";
 import { holdsPressThroughDrag } from "../privateAttributes/pressHoldsDrag.stylex.js";
 import { isTrackedByGroup } from "../privateAttributes/pressGroupItem.stylex.js";
@@ -126,17 +133,15 @@ const TIMER_MS = {
 
 /**
  * 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) {
-  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;
 }
 
 /**
@@ -208,7 +213,11 @@ function paintElement(element, paint) {
     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) {
   if (slot.live?.timer != null) {
@@ -334,6 +343,21 @@ function finish(slot) {
   }
 }
 
+/**
+ * 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) {
+  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, element) {
   if (other.live?.element === element) {
@@ -466,7 +490,8 @@ function onPointerDown(event) {
   apply(finger, pressGestureStep(finger.live.gesture, {
     kind: 'down',
     x: event.clientX,
-    y: event.clientY
+    y: event.clientY,
+    delayed: isInsideScrollView(element)
   }));
 }
 function onPointerMove(event) {

package/dist/utils/pressGesture.d.ts

@@ -28,12 +28,12 @@ export declare const PRESS_SLOP_PX = 10;
  */
 export declare const PRESS_FLASH_MS = 100;
 /**
- * How long the paint takes to leave after a release: UIKit's deselect
- * crossfade. The one number, shared with the stylesheet: the release
- * animation in interactionOverlay.stylex.ts runs on the same constant, so the
- * controller's release clock and the fade cannot drift apart. When the clock
- * runs out, the controller waits for a release animation that still runs,
- * then removes the attribute.
+ * How long the paint takes to leave after a release when no theme sets
+ * `--duration-exit`: that token's default. The release plays the theme's
+ * exit motion tokens, so the controller reads the token on
+ * the pressed element (`pressFadeMs` in pressFeedback.ts) and falls back to
+ * this. When the clock runs out, the controller waits for a release
+ * animation that still runs, then removes the attribute.
  */
 export declare const PRESS_FADE_MS: number;
 /**
@@ -71,6 +71,12 @@ export type PressEvent = {
     kind: 'down';
     x: number;
     y: number;
+    /**
+     * Whether this touch waits {@link PRESS_ONSET_MS} before it paints:
+     * a surface inside a scroller. Defaults to
+     * `true`.
+     */
+    delayed?: boolean;
 }
 /**
  * A mouse button or the Space key went down on the surface. The

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

@@ -1 +1 @@
-{"version":3,"file":"pressGesture.d.ts","sourceRoot":"","sources":["../../src/utils/pressGesture.ts"],"names":[],"mappings":"AA4BA;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,KAAK,CAAC;AAEhC;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,EAAE,MAA8B,CAAC;AAE3D;;;;;;;;GAQG;AACH,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC,2EAA2E;AAC3E,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,IAAI,GAAG,QAAQ,CAAC;AAElD;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,UAAU,GACpB,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5E,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B,sDAAsD;IACtD,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,MAAM,UAAU,GAClB;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAC;AACtC;;;;GAIG;GACD;IAAC,IAAI,EAAE,YAAY,CAAA;CAAC;AACtB,0EAA0E;GACxE;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAC,GACpC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAC;AACd,4FAA4F;GAC1F;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC;AAClB,iEAAiE;GAC/D;IAAC,IAAI,EAAE,OAAO,CAAA;CAAC;AACjB,yDAAyD;GACvD;IAAC,IAAI,EAAE,UAAU,CAAA;CAAC;AACpB,wFAAwF;GACtF;IAAC,IAAI,EAAE,SAAS,CAAA;CAAC,CAAC;AAEtB,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC;IAC/B,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B;;;;;;;;;OASG;IACH,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,IAAI,CAAC;CACnD;AAkBD;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,YAAY,EACrB,KAAK,EAAE,UAAU,GAChB,SAAS,CA6GX;AAED,wBAAgB,gBAAgB,IAAI,YAAY,CAE/C"}
+{"version":3,"file":"pressGesture.d.ts","sourceRoot":"","sources":["../../src/utils/pressGesture.ts"],"names":[],"mappings":"AAiCA;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,KAAK,CAAC;AAEhC;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,EAAE,MAE3B,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC,2EAA2E;AAC3E,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,IAAI,GAAG,QAAQ,CAAC;AAElD;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,UAAU,GACpB,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5E,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B,sDAAsD;IACtD,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,MAAM,UAAU,GAClB;IACE,IAAI,EAAE,MAAM,CAAC;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AACH;;;;GAIG;GACD;IAAC,IAAI,EAAE,YAAY,CAAA;CAAC;AACtB,0EAA0E;GACxE;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAC,GACpC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAC;AACd,4FAA4F;GAC1F;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC;AAClB,iEAAiE;GAC/D;IAAC,IAAI,EAAE,OAAO,CAAA;CAAC;AACjB,yDAAyD;GACvD;IAAC,IAAI,EAAE,UAAU,CAAA;CAAC;AACpB,wFAAwF;GACtF;IAAC,IAAI,EAAE,SAAS,CAAA;CAAC,CAAC;AAEtB,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC;IAC/B,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B;;;;;;;;;OASG;IACH,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,IAAI,CAAC;CACnD;AAkBD;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,YAAY,EACrB,KAAK,EAAE,UAAU,GAChB,SAAS,CAsHX;AAED,wBAAgB,gBAAgB,IAAI,YAAY,CAE/C"}

package/dist/utils/pressGesture.js

@@ -21,10 +21,15 @@
 // primary pointer, so a mouse, trackpad or Space press on such a device comes
 // here as `buttonDown`: painted at once and faded on release.
 //
+// Only a finger inside a scroller waits. The controller tells the machine
+// which touch waits (`down`'s `delayed`), and a touch that does not wait goes
+// straight to `pressed`. After that the machine is the same.
+//
 // The constants were measured against native apps. The machine knows nothing
 // of the DOM, so {@link pressGestureStep}'s cases are the state diagram.
 
-import { pressConsts } from "./interactionOverlay.stylex.js";
+import { resolveTokenReferences } from "../theme/tokenReferences.js";
+import { durationDefaults } from "../theme/tokens.stylex.js";
 
 /**
  * How long a finger must stay put before the surface believes it.
@@ -59,14 +64,14 @@ export const PRESS_SLOP_PX = 10;
 export const PRESS_FLASH_MS = 100;
 
 /**
- * How long the paint takes to leave after a release: UIKit's deselect
- * crossfade. The one number, shared with the stylesheet: the release
- * animation in interactionOverlay.stylex.ts runs on the same constant, so the
- * controller's release clock and the fade cannot drift apart. When the clock
- * runs out, the controller waits for a release animation that still runs,
- * then removes the attribute.
+ * How long the paint takes to leave after a release when no theme sets
+ * `--duration-exit`: that token's default. The release plays the theme's
+ * exit motion tokens, so the controller reads the token on
+ * the pressed element (`pressFadeMs` in pressFeedback.ts) and falls back to
+ * this. When the clock runs out, the controller waits for a release
+ * animation that still runs, then removes the attribute.
  */
-export const PRESS_FADE_MS = pressConsts.releaseMs;
+export const PRESS_FADE_MS = Number.parseFloat(resolveTokenReferences(durationDefaults)['--duration-exit']);
 
 /**
  * How recently a scroller must have moved for a touch on it to be a BRAKE
@@ -123,6 +128,19 @@ function step(gesture, phase, paint, timer) {
  */
 export function pressGestureStep(gesture, event) {
   if (event.kind === 'down') {
+    // A surface with no scroller above it: nothing can turn this touch into a
+    // scroll, so it paints in the frame it lands, as a UIControl highlights.
+    if (event.delayed === false) {
+      return {
+        gesture: {
+          originX: event.x,
+          originY: event.y,
+          phase: 'pressed'
+        },
+        paint: 'on',
+        timer: null
+      };
+    }
     // A new touch always starts armed and painting nothing, whatever the last
     // gesture ended as. This is the only way out of `dead`.
     return {

package/dist/utils/scrollView.d.ts

@@ -0,0 +1,25 @@
+/** Overflow values that let a box scroll. */
+export declare const SCROLLABLE_OVERFLOW: ReadonlySet<string>;
+export interface AllowedPans {
+    readonly x: boolean;
+    readonly y: boolean;
+}
+/** Which pans a `touch-action` value lets the browser perform. */
+export declare function parseTouchAction(value: string): AllowedPans;
+/**
+ * The viewport's overflow on an axis. It scrolls unless the root or the body
+ * clips it, as a scroll lock does with `overflow: hidden`.
+ */
+export declare function rootOverflow(doc: Document, axis: 'x' | 'y'): string;
+/**
+ * Whether a touch on `element` lands inside a scroll view, UIKit's question
+ * for a touch: a box above it, the page included, overflows on an axis it
+ * scrolls, and `touch-action` on the way up leaves that axis to the browser.
+ * A `position: fixed` box ends the walk, because it does not move with any
+ * scroller above it. A wheel scrolls whatever `touch-action` says, so a
+ * wheel's question passes `readsTouchAction: false`.
+ */
+export declare function isInsideScrollView(element: Element, { readsTouchAction }?: {
+    readsTouchAction?: boolean;
+}): boolean;
+//# sourceMappingURL=scrollView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scrollView.d.ts","sourceRoot":"","sources":["../../src/utils/scrollView.ts"],"names":[],"mappings":"AAgBA,6CAA6C;AAC7C,eAAO,MAAM,mBAAmB,EAAE,WAAW,CAAC,MAAM,CAIlD,CAAC;AAKH,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,kEAAkE;AAClE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,CAiB3D;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,MAAM,CAgBnE;AAQD;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,OAAO,EAChB,EAAC,gBAAuB,EAAC,GAAE;IAAC,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAAM,GAC3D,OAAO,CA4CT"}

package/dist/utils/scrollView.js

@@ -0,0 +1,108 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file scrollView.ts
+ * @input An element and its computed styles
+ * @output Exports parseTouchAction, rootOverflow, SCROLLABLE_OVERFLOW and
+ *   isInsideScrollView: whether a touch on the element lands inside a box the
+ *   browser can scroll
+ * @position The one definition of "inside a scroll view", shared by the
+ *   press feedback controller (utils/pressFeedback.ts) and the gesture
+ *   core's native-scroll probe (gestures/nativeScroll.ts), so Core's main
+ *   entry can ask it without the gesture core
+ */
+
+import { parentAcrossShadow } from "./flatTree.js";
+
+/** Overflow values that let a box scroll. */
+export const SCROLLABLE_OVERFLOW = new Set(['auto', 'scroll', 'overlay']);
+
+/** How far a box must overflow, in px, before it counts as scrolling. */
+const OVERFLOW_TOLERANCE_PX = 1;
+/** Which pans a `touch-action` value lets the browser perform. */
+export function parseTouchAction(value) {
+  const tokens = value.trim().split(/\s+/);
+  if (tokens.includes('auto') || tokens.includes('manipulation')) {
+    return {
+      x: true,
+      y: true
+    };
+  }
+  if (tokens.includes('none')) {
+    return {
+      x: false,
+      y: false
+    };
+  }
+  return {
+    x: tokens.some(token => token === 'pan-x' || token === 'pan-left' || token === 'pan-right'),
+    y: tokens.some(token => token === 'pan-y' || token === 'pan-up' || token === 'pan-down')
+  };
+}
+
+/**
+ * The viewport's overflow on an axis. It scrolls unless the root or the body
+ * clips it, as a scroll lock does with `overflow: hidden`.
+ */
+export function rootOverflow(doc, axis) {
+  const view = doc.defaultView;
+  if (view == null) {
+    return 'hidden';
+  }
+  for (const element of [doc.documentElement, doc.body]) {
+    if (element == null) {
+      continue;
+    }
+    const style = view.getComputedStyle(element);
+    const value = axis === 'x' ? style.overflowX : style.overflowY;
+    if (value === 'hidden' || value === 'clip') {
+      return 'hidden';
+    }
+  }
+  return 'auto';
+}
+function overflows(element, axis) {
+  return axis === 'y' ? element.scrollHeight - element.clientHeight > OVERFLOW_TOLERANCE_PX : element.scrollWidth - element.clientWidth > OVERFLOW_TOLERANCE_PX;
+}
+
+/**
+ * Whether a touch on `element` lands inside a scroll view, UIKit's question
+ * for a touch: a box above it, the page included, overflows on an axis it
+ * scrolls, and `touch-action` on the way up leaves that axis to the browser.
+ * A `position: fixed` box ends the walk, because it does not move with any
+ * scroller above it. A wheel scrolls whatever `touch-action` says, so a
+ * wheel's question passes `readsTouchAction: false`.
+ */
+export function isInsideScrollView(element, {
+  readsTouchAction = true
+} = {}) {
+  const doc = element.ownerDocument;
+  const view = doc.defaultView;
+  if (view == null) {
+    return false;
+  }
+  const root = doc.scrollingElement ?? doc.documentElement;
+  let panX = true;
+  let panY = true;
+  for (let node = element; node != null;) {
+    if (node instanceof Element) {
+      const style = view.getComputedStyle(node);
+      if (readsTouchAction) {
+        const pans = parseTouchAction(style.touchAction || 'auto');
+        panX &&= pans.x;
+        panY &&= pans.y;
+      }
+      if (node === root || node === doc.documentElement) {
+        break;
+      }
+      if (panY && SCROLLABLE_OVERFLOW.has(style.overflowY) && overflows(node, 'y') || panX && SCROLLABLE_OVERFLOW.has(style.overflowX) && overflows(node, 'x')) {
+        return true;
+      }
+      if (style.position === 'fixed') {
+        return false;
+      }
+    }
+    node = parentAcrossShadow(node);
+  }
+  return panY && SCROLLABLE_OVERFLOW.has(rootOverflow(doc, 'y')) && overflows(root, 'y') || panX && SCROLLABLE_OVERFLOW.has(rootOverflow(doc, 'x')) && overflows(root, 'x');
+}

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

@@ -1 +1 @@
-{"version":3,"file":"selectionLock.d.ts","sourceRoot":"","sources":["../../src/utils/selectionLock.ts"],"names":[],"mappings":"AAoDA;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAE9D;AAWD;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,EAC3B,MAAM,EAAE,WAAW,GAAG,IAAI,GACzB,MAAM,IAAI,CA4BZ;AAED,mEAAmE;AACnE,MAAM,WAAW,2BAA2B;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,4DAA4D;AAC5D,MAAM,WAAW,iBAAiB;IAChC,CAAC,OAAO,CAAC,EAAE,2BAA2B,GAAG,IAAI,CAAC;IAC9C;;;OAGG;IACH,iBAAiB,IAAI,IAAI,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,EAC3B,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAC/B,IAAI,EAAE,aAAa,CAAC,aAAa,CAAC,EAClC,UAAU,CAAC,EAAE,MAAM,IAAI,GACtB,iBAAiB,CAuGnB;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAC9B,aAAa,CAAC,aAAa,CAAC,CAiB9B;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CACpC,GAAG,EAAE,QAAQ,EACb,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,MAAM,EAAE,WAAW,GAAG,IAAI,GACzB,OAAO,CA+CT"}
+{"version":3,"file":"selectionLock.d.ts","sourceRoot":"","sources":["../../src/utils/selectionLock.ts"],"names":[],"mappings":"AAwDA;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAE9D;AAWD;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,EAC3B,MAAM,EAAE,WAAW,GAAG,IAAI,GACzB,MAAM,IAAI,CA4BZ;AAED,mEAAmE;AACnE,MAAM,WAAW,2BAA2B;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,4DAA4D;AAC5D,MAAM,WAAW,iBAAiB;IAChC,CAAC,OAAO,CAAC,EAAE,2BAA2B,GAAG,IAAI,CAAC;IAC9C;;;OAGG;IACH,iBAAiB,IAAI,IAAI,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,EAC3B,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAC/B,IAAI,EAAE,aAAa,CAAC,aAAa,CAAC,EAClC,UAAU,CAAC,EAAE,MAAM,IAAI,GACtB,iBAAiB,CAuGnB;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAC9B,aAAa,CAAC,aAAa,CAAC,CAiB9B;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CACpC,GAAG,EAAE,QAAQ,EACb,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,MAAM,EAAE,WAAW,GAAG,IAAI,GACzB,OAAO,CA+CT"}

package/dist/utils/selectionLock.js

@@ -28,7 +28,7 @@
 //
 // A mouse never takes the lock, so its released behavior stays (AST-017).
 
-import { containsAlongFlatTree, parentAcrossShadow } from "./flatTree.js";
+import { containsAlongFlatTree, deepActiveElement, parentAcrossShadow } from "./flatTree.js";
 import { subscribeInput } from "./inputStream.js";
 import { isIosWebKit } from "./touchQueries.js";
 
@@ -477,15 +477,6 @@ function openShadowRootsOf(target) {
   return roots;
 }
 
-/** The focused element, inside open shadow roots too. */
-function deepActiveElement(doc) {
-  let active = doc?.activeElement ?? null;
-  while (active?.shadowRoot?.activeElement != null) {
-    active = active.shadowRoot.activeElement;
-  }
-  return active;
-}
-
 /**
  * The selection-lock styles on `set`, refcounted per element; idempotent
  * release.

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

@@ -0,0 +1,35 @@
+/**
+ * @file touchHitArea.stylex.ts
+ * @input Uses StyleX and the insets that utils/hitArea.ts writes on a host
+ * @output Exports `touchHitAreaStyles.layer`, a host's invisible hit band
+ *   under a coarse pointer
+ * @position Internal styling utility for CheckboxInput and RadioListItem
+ *
+ * The band is the host's `::after`, grown past each edge by the measured
+ * inset. A clip path cuts out the host's box, so its content keeps its taps.
+ * A tap on the band lands on the host. SYNC: hitArea.ts HIT_INSET_PROPERTIES.
+ */
+import * as stylex from '@stylexjs/stylex';
+export declare const touchHitAreaStyles: Readonly<{
+    readonly layer: Readonly<{
+        readonly '::after': stylex.StyleXClassNameFor<"::after", {
+            readonly content: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": "\"\"";
+            };
+            readonly position: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": "absolute";
+            };
+            readonly inset: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": "calc(var(--astryx-hit-inset-top, 0px) * -1) calc(var(--astryx-hit-inset-right, 0px) * -1) calc(var(--astryx-hit-inset-bottom, 0px) * -1) calc(var(--astryx-hit-inset-left, 0px) * -1)";
+            };
+            readonly clipPath: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": "polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, var(--astryx-hit-inset-left, 0px) var(--astryx-hit-inset-top, 0px), calc(100% - var(--astryx-hit-inset-right, 0px)) var(--astryx-hit-inset-top, 0px), calc(100% - var(--astryx-hit-inset-right, 0px)) calc(100% - var(--astryx-hit-inset-bottom, 0px)), var(--astryx-hit-inset-left, 0px) calc(100% - var(--astryx-hit-inset-bottom, 0px)), var(--astryx-hit-inset-left, 0px) var(--astryx-hit-inset-top, 0px))";
+            };
+        }>;
+    }>;
+}>;
+//# sourceMappingURL=touchHitArea.stylex.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"touchHitArea.stylex.d.ts","sourceRoot":"","sources":["../../src/utils/touchHitArea.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAU3C,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;EAgB7B,CAAC"}

package/dist/utils/touchHitArea.stylex.js

@@ -0,0 +1,32 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file touchHitArea.stylex.ts
+ * @input Uses StyleX and the insets that utils/hitArea.ts writes on a host
+ * @output Exports `touchHitAreaStyles.layer`, a host's invisible hit band
+ *   under a coarse pointer
+ * @position Internal styling utility for CheckboxInput and RadioListItem
+ *
+ * The band is the host's `::after`, grown past each edge by the measured
+ * inset. A clip path cuts out the host's box, so its content keeps its taps.
+ * A tap on the band lands on the host. SYNC: hitArea.ts HIT_INSET_PROPERTIES.
+ */
+
+import * as stylex from '@stylexjs/stylex';
+
+// StyleX reads these at build time, so they are spelled out.
+const TOUCH = '@media (pointer: coarse)';
+// The insets are measured in the viewport, so the sides are physical.
+const TOP = 'var(--astryx-hit-inset-top, 0px)';
+const RIGHT = 'var(--astryx-hit-inset-right, 0px)';
+const BOTTOM = 'var(--astryx-hit-inset-bottom, 0px)';
+const LEFT = 'var(--astryx-hit-inset-left, 0px)';
+export const touchHitAreaStyles = {
+  layer: {
+    k5JduY: "x1fjtqre",
+    kwXMNM: "x7b72wb",
+    kv0HGH: "x16x82qr",
+    kJYu5r: "x1c440c0",
+    $$css: true
+  }
+};

package/dist/utils/triggerFocus.d.ts

@@ -21,6 +21,11 @@ export declare function isFocusableTrigger(element: HTMLElement): boolean;
  * too, so a plain wrapper ignores its children's focus.
  */
 export declare function isFocusForTrigger(event: Event, mode: TriggerFocusMode): boolean;
+/**
+ * `isFocusForTrigger` for focus already on `target`, inside `trigger`: the
+ * same rule, read when a trigger attaches with focus inside it.
+ */
+export declare function isFocusOnTrigger(target: EventTarget | null, trigger: HTMLElement | null, mode: TriggerFocusMode): boolean;
 /** Remembers whether a trigger's current focus counted when it arrived. */
 export interface TriggerFocusGate {
     /** On focusin: whether this focus opens the layer. */

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

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