@astryxdesign/core 0.7.8 → 0.7.9-canary.0200dfe

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.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @file touchHitArea.ts
+ * @input Whether an element takes taps, the shared touch hit area
+ *   (utils/hitArea.ts) and the Web Animations around the element
+ * @output `useTouchHitArea`, a callback ref that keeps an element's hit insets
+ *   live for its invisible layer (`touchHitAreaStyles.layer`)
+ * @position Core-internal hook for the coarse-only 44 px target. List rows,
+ *   InfoTip, CheckboxInput and RadioListItem use it, and so can any control
+ *   whose target grows under a finger without growing its box.
+ *
+ * SYNC: When modified, update utils/touchHitArea.stylex.ts and
+ * touchHitArea.test.tsx.
+ */
+import { type RefCallback } from 'react';
+/**
+ * A callback ref that keeps its element's hit insets live while `enabled`:
+ * the element takes taps, so it is interactive and not disabled or read-only.
+ * Merge it into the element's ref, and pair it with `touchHitAreaStyles.layer`
+ * on the same element. The watch lasts while the element is attached, so a
+ * replaced element starts its own. A re-render that hands the same element a
+ * new merged ref keeps its watch.
+ *
+ * @example
+ * ```
+ * const hitAreaRef = useTouchHitArea(isInteractive && !isDisabled);
+ * <li ref={hitAreaRef} {...stylex.props(isInteractive && touchHitAreaStyles.layer)} />
+ * ```
+ */
+export declare function useTouchHitArea(enabled: boolean): RefCallback<HTMLElement>;
+//# sourceMappingURL=touchHitArea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"touchHitArea.d.ts","sourceRoot":"","sources":["../../src/utils/touchHitArea.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAc,KAAK,WAAW,EAAC,MAAM,OAAO,CAAC;AAmIpD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,OAAO,GAAG,WAAW,CAAC,WAAW,CAAC,CAa1E"}

package/dist/utils/touchHitArea.js

@@ -0,0 +1,167 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file touchHitArea.ts
+ * @input Whether an element takes taps, the shared touch hit area
+ *   (utils/hitArea.ts) and the Web Animations around the element
+ * @output `useTouchHitArea`, a callback ref that keeps an element's hit insets
+ *   live for its invisible layer (`touchHitAreaStyles.layer`)
+ * @position Core-internal hook for the coarse-only 44 px target. List rows,
+ *   InfoTip, CheckboxInput and RadioListItem use it, and so can any control
+ *   whose target grows under a finger without growing its box.
+ *
+ * SYNC: When modified, update utils/touchHitArea.stylex.ts and
+ * touchHitArea.test.tsx.
+ */
+import { useCallback } from 'react';
+import { MIN_TOUCH_TARGET, NO_HIT_INSETS, watchHitArea, writeHitInsets } from "./hitArea.js";
+
+/**
+ * The finite animations running or held in the element's parent, the element
+ * included: a row's own motion and its neighbors'. An endless one (a spinner)
+ * moves nothing that comes to rest, so it holds nothing.
+ */
+function settlingAnimations(element) {
+  const scope = element.parentElement ?? element;
+  if (typeof scope.getAnimations !== 'function') {
+    return [];
+  }
+  return scope.getAnimations({
+    subtree: true
+  }).filter(animation => {
+    if (animation.playState !== 'running' && animation.playState !== 'paused') {
+      return false;
+    }
+    const end = animation.effect?.getComputedTiming().endTime;
+    return typeof end === 'number' && Number.isFinite(end);
+  });
+}
+
+/**
+ * Watches `element` and takes its insets only at rest. Returns the stop.
+ *
+ * Under a coarse primary pointer, the shared utility measures how far the
+ * element's hit target may grow without reaching a neighbor's half of the
+ * gap. This writes those insets on the element, where its layer reads them.
+ * Under a fine pointer the shared utility starts no observer.
+ *
+ * Elements move by transform: a list row in an update's slide, a swipe, or
+ * neighbors that slide past. The shared measurement reads them as they stand
+ * in one frame. So a measurement that arrives while the parent has a finite
+ * animation running or held is dropped. When those animations end, the
+ * element is watched again. The insets are then taken at rest, and no frame
+ * of a compositor-only motion lays out or paints for them.
+ */
+function watchAtRest(element, minSize) {
+  let stopWatch = () => {};
+  let isStopped = false;
+  let isWaiting = false;
+  let hasWritten = false;
+  // A stopped watch clears the insets it wrote. A fresh watch skips a
+  // measurement equal to its start, zero, so old insets would otherwise stay.
+  // A watch that wrote nothing, as under a mouse, writes nothing.
+  const stop = () => {
+    stopWatch();
+    if (hasWritten) {
+      hasWritten = false;
+      writeHitInsets(element, NO_HIT_INSETS);
+    }
+  };
+  const watch = () => {
+    stopWatch = watchHitArea(element, insets => {
+      const moving = settlingAnimations(element);
+      if (moving.length === 0) {
+        hasWritten = true;
+        writeHitInsets(element, insets);
+        return;
+      }
+      if (isWaiting) {
+        return;
+      }
+      isWaiting = true;
+      void Promise.allSettled(moving.map(async animation => animation.finished)).then(() => {
+        isWaiting = false;
+        if (!isStopped) {
+          stop();
+          watch();
+        }
+      });
+    },
+    // The layer is the host's own `::after`, so a touch on the host's
+    // content is the host's, even where that content paints past its box.
+    {
+      minSize,
+      ownsDescendantTouches: true
+    });
+  };
+  watch();
+  return () => {
+    isStopped = true;
+    stop();
+  };
+}
+
+/** The watch on an element, and how many attached refs hold it. */
+
+const heldWatches = new WeakMap();
+
+/**
+ * Holds the element's watch, and starts it on the first hold. Returns the
+ * release. A ref that changes, such as a merge with a caller's inline ref,
+ * detaches and attaches again in one commit. So the last release waits a
+ * microtask, and an attach in between keeps the watch and its insets.
+ */
+function holdWatch(element) {
+  let held = heldWatches.get(element);
+  if (held == null) {
+    held = {
+      stop: watchAtRest(element, MIN_TOUCH_TARGET),
+      holders: 0
+    };
+    heldWatches.set(element, held);
+  }
+  held.holders += 1;
+  const entry = held;
+  let isReleased = false;
+  return () => {
+    if (isReleased) {
+      return;
+    }
+    isReleased = true;
+    entry.holders -= 1;
+    queueMicrotask(() => {
+      if (entry.holders === 0 && heldWatches.get(element) === entry) {
+        heldWatches.delete(element);
+        entry.stop();
+      }
+    });
+  };
+}
+
+/**
+ * A callback ref that keeps its element's hit insets live while `enabled`:
+ * the element takes taps, so it is interactive and not disabled or read-only.
+ * Merge it into the element's ref, and pair it with `touchHitAreaStyles.layer`
+ * on the same element. The watch lasts while the element is attached, so a
+ * replaced element starts its own. A re-render that hands the same element a
+ * new merged ref keeps its watch.
+ *
+ * @example
+ * ```
+ * const hitAreaRef = useTouchHitArea(isInteractive && !isDisabled);
+ * <li ref={hitAreaRef} {...stylex.props(isInteractive && touchHitAreaStyles.layer)} />
+ * ```
+ */
+export function useTouchHitArea(enabled) {
+  // Syncs with an external system: the shared touch hit area
+  // (utils/hitArea.ts) measures the element against its neighbors and writes
+  // its insets on it. The ref's cleanup stops the watch.
+  return useCallback(element => {
+    if (!enabled || element == null) {
+      return undefined;
+    }
+    return holdWatch(element);
+  }, [enabled]);
+}

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

@@ -0,0 +1,38 @@
+/**
+ * @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, RadioListItem, List
+ *   rows and InfoTip. Each keeps its insets live with `useTouchHitArea`
+ *   (utils/touchHitArea.ts).
+ *
+ * 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,
+ * touchHitArea.ts and touchHitArea.test.tsx.
+ */
+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) + var(--_hit-border-top, 0px)) * -1) calc((var(--astryx-hit-inset-right, 0px) + var(--_hit-border-right, 0px)) * -1) calc((var(--astryx-hit-inset-bottom, 0px) + var(--_hit-border-bottom, 0px)) * -1) calc((var(--astryx-hit-inset-left, 0px) + var(--_hit-border-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;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAsB3C,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;EAgB7B,CAAC"}

package/dist/utils/touchHitArea.stylex.js

@@ -0,0 +1,48 @@
+// 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, RadioListItem, List
+ *   rows and InfoTip. Each keeps its insets live with `useTouchHitArea`
+ *   (utils/touchHitArea.ts).
+ *
+ * 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,
+ * touchHitArea.ts and touchHitArea.test.tsx.
+ */
+
+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)';
+// The insets start at the host's border box, but the band's offsets start at
+// its padding box. So a host that draws a border declares its width on that
+// side, 0 by default. It declares it on its own `::after`, so content inside
+// the host never inherits it.
+const BORDER_TOP = 'var(--_hit-border-top, 0px)';
+const BORDER_RIGHT = 'var(--_hit-border-right, 0px)';
+const BORDER_BOTTOM = 'var(--_hit-border-bottom, 0px)';
+const BORDER_LEFT = 'var(--_hit-border-left, 0px)';
+
+// The host is the band's containing block, so a host that is not positioned
+// sets `position: relative`. The band has no z-index of its own. Inside a
+// List, which isolates its rows, ListItem raises it. Under a finger the host's
+// `::after` is this band, so decorate the host with a child.
+export const touchHitAreaStyles = {
+  layer: {
+    k5JduY: "x1fjtqre",
+    kwXMNM: "x7b72wb",
+    kv0HGH: "x1ukc1h5",
+    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"}

package/dist/utils/triggerFocus.js

@@ -34,14 +34,21 @@ export function isFocusableTrigger(element) {
  * too, so a plain wrapper ignores its children's focus.
  */
 export function isFocusForTrigger(event, mode) {
+  return isFocusOnTrigger(event.target, event.currentTarget, mode);
+}
+
+/**
+ * `isFocusForTrigger` for focus already on `target`, inside `trigger`: the
+ * same rule, read when a trigger attaches with focus inside it.
+ */
+export function isFocusOnTrigger(target, trigger, mode) {
   if (mode === 'always') {
     return true;
   }
   if (mode === 'never') {
     return false;
   }
-  const trigger = event.currentTarget;
-  return trigger != null && (event.target === trigger || isFocusableTrigger(trigger));
+  return trigger != null && (target === trigger || isFocusableTrigger(trigger));
 }
 
 /** Remembers whether a trigger's current focus counted when it arrived. */

package/locales/en.json

@@ -1121,7 +1121,23 @@
   },
   "@astryx.dateInput.invalidDate": {
     "defaultMessage": "Invalid date",
-    "description": "Screen-reader-only live-region alert in DateInput / DateTimeInput when the typed date cannot be parsed. The field silently reverts on blur, so this is the only rejection feedback a screen-reader user gets."
+    "description": "Screen-reader-only live-region alert in DateInput / DateTimeInput when the typed text cannot be read as a date. Text the field cannot finish, such as a one-digit year, stays on Enter or blur and shows this message as the field status."
+  },
+  "@astryx.dateInput.nonexistentDate": {
+    "defaultMessage": "This date does not exist in the {calendar}",
+    "description": "Error in DateInput / DateTimeInput, shown below the field and announced, when the typed date is readable but the calendar does not have it, such as 30 Esfand in a common Persian year or February 30. {calendar} is the calendar's localized name from the platform, such as \"Persian Calendar\" or \"Gregorian Calendar\"."
+  },
+  "@astryx.dateInput.outOfRangeDate": {
+    "defaultMessage": "{bounds, select, both {Enter a date from {min} to {max}} min {Enter a date on or after {min}} max {Enter a date on or before {max}} other {This date is not available}}",
+    "description": "Error in DateInput / DateTimeInput, shown below the field and announced, when the typed date is outside the allowed range. {min} and {max} are the bounds, written as dates in the field's calendar. `bounds` is `both`, `min`, or `max` for a date outside those bounds, and `other` for a date that a custom rule rejects."
+  },
+  "@astryx.dateInput.formatHint": {
+    "defaultMessage": "e.g., {example}",
+    "description": "Placeholder hint in a DateInput / DateTimeInput date field that uses a calendar other than the Gregorian calendar, shown when the field is focused and empty. {example} is today's date, or the nearest date the field accepts, written in that calendar's numeric pattern, such as ۱۴۰۵/۸/۱۱."
+  },
+  "@astryx.dateInput.calendarDescription": {
+    "defaultMessage": "Dates use the {calendar}",
+    "description": "Screen-reader-only description of a DateInput / DateTimeInput date field whose calendar differs from the app's calendar, such as a Persian field in a Gregorian app or a Gregorian field in a Persian app. {calendar} is the calendar's localized name from the platform, such as \"Persian Calendar\" or \"Gregorian Calendar\"."
   },
   "@astryx.dateInput.resetPicking": {
     "defaultMessage": "Reset",
@@ -1323,6 +1339,10 @@
     "defaultMessage": "Loading",
     "description": "Screen-reader-only default name for a standalone Spinner's role=\"status\" element, used when the consumer supplies neither `aria-label` nor a visible string label; also announced once when a busy input or selector starts loading, in place of its decorative Spinner. Present-progressive form. Kept separate from `button.loading` and `typeahead.loading` — translations may diverge."
   },
+  "@astryx.scrollRegion.label": {
+    "defaultMessage": "Content",
+    "description": "Accessible name of a scrolling content region (LayoutContent, LayoutPanel or StackItem) when the caller gives none. A screen reader announces it with the region's group role while the region scrolls."
+  },
   "@astryx.chatComposerDrawer.expand": {
     "defaultMessage": "Expand {label}",
     "description": "Screen-reader-only label on the ChatComposerDrawer toggle when the drawer is collapsed. `{label}` is the drawer's visible name — example: `Expand Attachments`. Pairs with `collapse`."

package/locales/pseudo.json

@@ -842,6 +842,18 @@
   "@astryx.dateInput.invalidDate": {
     "defaultMessage": "⟦Íñṽàłíð ðàţé⟧"
   },
+  "@astryx.dateInput.nonexistentDate": {
+    "defaultMessage": "⟦Ţĥíš ðàţé ðóéš ñóţ éẋíšţ íñ ţĥé {calendar}⟧"
+  },
+  "@astryx.dateInput.outOfRangeDate": {
+    "defaultMessage": "⟦{bounds, select, both {Enter a date from {min} to {max}} min {Enter a date on or after {min}} max {Enter a date on or before {max}} other {This date is not available}}⟧"
+  },
+  "@astryx.dateInput.formatHint": {
+    "defaultMessage": "⟦é.ĝ., {example}⟧"
+  },
+  "@astryx.dateInput.calendarDescription": {
+    "defaultMessage": "⟦Ðàţéš úšé ţĥé {calendar}⟧"
+  },
   "@astryx.dateInput.resetPicking": {
     "defaultMessage": "⟦Řéšéţ⟧"
   },
@@ -992,6 +1004,9 @@
   "@astryx.spinner.loading": {
     "defaultMessage": "⟦Łóàðíñĝ⟧"
   },
+  "@astryx.scrollRegion.label": {
+    "defaultMessage": "⟦Çóñţéñţ⟧"
+  },
   "@astryx.chatComposerDrawer.expand": {
     "defaultMessage": "⟦Éẋþàñð {label}⟧"
   },