@astryxdesign/core 0.7.7 → 0.7.8-canary.36cde5e

package/src/theme/Theme.tsx

@@ -45,6 +45,11 @@ import {registerTheme} from './themeRegistry';
 import {dataAttr} from '../naming';
 import {ThemeContext} from './useTheme';
 import {warnOnce} from '../utils/devWarning';
+import {REDUCED_MOTION_PROPERTY, resolveMotionKnobs} from './themeMotion';
+import {
+  reducedMotionMarkProps,
+  setRootReducedMotionMark,
+} from '../privateAttributes/reducedMotion.stylex';
 
 /**
  * Theme provider props
@@ -76,6 +81,11 @@ const wrapperStyles = stylex.create({
   system: {
     colorScheme: 'light dark',
   },
+  // The mark's custom property (REDUCED_MOTION_PROPERTY), which every element
+  // under the mark inherits.
+  reducedMotion: {
+    '--_astryx-reduced-motion': '1',
+  },
 });
 
 // =============================================================================
@@ -110,6 +120,7 @@ const THEME_LAYER_ORDER = '@layer reset, astryx-base, astryx-theme;';
 function useThemeStyleInjection(theme: DefinedTheme): void {
   const id = useId();
 
+  // Syncs the document's stylesheets with the runtime theme CSS.
   useInsertionEffect(() => {
     // Built themes have their CSS in a separate file — skip injection
     if (theme.__built) {
@@ -197,12 +208,18 @@ function useThemeStyleInjection(theme: DefinedTheme): void {
  *
  * - 'light' | 'dark' → sets data-theme="light" | "dark"
  * - 'system' → removes data-theme (reset.css defaults to color-scheme: light dark)
+ *
+ * A theme that reduces motion for everyone also marks `<html>` with
+ * `data-astryx-reduced-motion` and its custom property, so layers portaled
+ * outside the wrapper reduce their motion too.
  */
 function useRootThemeSync(
   isNested: boolean,
   mode: ThemeMode,
   themeName: string,
+  reducesMotion: boolean,
 ): void {
+  // Syncs the theme attributes on the root `<html>` element.
   useIsomorphicLayoutEffect(() => {
     if (isNested) {
       return;
@@ -220,12 +237,20 @@ function useRootThemeSync(
 
     // Sync theme name so @scope rules reach portals/fallback viewports.
     document.documentElement.setAttribute(dataAttr('theme'), themeName);
+    setRootReducedMotionMark(document.documentElement, reducesMotion);
+    if (reducesMotion) {
+      document.documentElement.style.setProperty(REDUCED_MOTION_PROPERTY, '1');
+    } else {
+      document.documentElement.style.removeProperty(REDUCED_MOTION_PROPERTY);
+    }
 
     return () => {
       document.documentElement.removeAttribute('data-theme');
       document.documentElement.removeAttribute(dataAttr('theme'));
+      setRootReducedMotionMark(document.documentElement, false);
+      document.documentElement.style.removeProperty(REDUCED_MOTION_PROPERTY);
     };
-  }, [isNested, mode, themeName]);
+  }, [isNested, mode, themeName, reducesMotion]);
 }
 
 // =============================================================================
@@ -255,7 +280,11 @@ export function Theme({
   registerTheme(theme);
 
   useThemeStyleInjection(theme);
-  useRootThemeSync(isNested, mode, theme.name);
+  // resolveMotionKnobs resolves no public theme to 'always', so no theme
+  // marks its root.
+  const reducesMotion =
+    resolveMotionKnobs(theme.__axes?.motion).reducedMotion === 'always';
+  useRootThemeSync(isNested, mode, theme.name, reducesMotion);
 
   // Get color-scheme style
   const colorSchemeStyle =
@@ -272,8 +301,13 @@ export function Theme({
     <ThemeContext value={ctxValue}>
       <ThemeNestingContext value={true}>
         <div
-          {...stylex.props(wrapperStyles.base, colorSchemeStyle)}
+          {...stylex.props(
+            wrapperStyles.base,
+            colorSchemeStyle,
+            reducesMotion && wrapperStyles.reducedMotion,
+          )}
           data-astryx-theme={theme.name}
+          {...reducedMotionMarkProps(reducesMotion)}
           data-theme={mode === 'system' ? undefined : mode}>
           {children}
         </div>

package/src/theme/motionKnobs.ts

@@ -20,10 +20,11 @@
 export type MotionCharacter = 'crisp' | 'standard' | 'expressive';
 
 /**
- * Whose Reduce Motion setting a theme follows: `'system'`, each person's own.
- * Internal: no theme sets it until `'always'` ships (`spec:AST-108` FR6).
+ * Whose Reduce Motion setting a theme follows: `'system'`, each person's own,
+ * or `'always'`, reduced for everyone. Internal: `resolveKnobs` resolves
+ * every theme to `'system'` until `'always'` ships (`spec:AST-108` FR6).
  */
-export type ThemeReducedMotion = 'system';
+export type ThemeReducedMotion = 'system' | 'always';
 
 /** The motion knobs a theme sets (`spec:AST-108` FR1). */
 export interface ThemeMotionKnobs {

package/src/theme/themeMotion.ts

@@ -87,6 +87,13 @@ function msOf(value: string): number {
  */
 export const MOTION_TEMPO_PROPERTY = '--_astryx-motion-tempo';
 
+/**
+ * The custom property a theme whose `reducedMotion` resolves to `'always'`
+ * sets to `1` on its root, and the root theme on `<html>`: styles that cannot
+ * key a selector on the mark read it in a value.
+ */
+export const REDUCED_MOTION_PROPERTY = '--_astryx-reduced-motion';
+
 /** The duration tokens at `tempo`: today's values times it, to the ms. */
 export function durationTokensAt(tempo: number): Record<string, string> {
   const tokens: Record<string, string> = {};

package/src/utils/dateParser.ts

@@ -32,6 +32,11 @@ export function isLocaleDayFirst(locale: Locale = 'en'): boolean {
   return dayIndex < monthIndex;
 }
 
+// Built at run time: a Unicode property escape in a literal fails a source
+// build whose Babel lacks the Unicode data.
+const LETTER_FREE = new RegExp('^[^\\p{L}]+$', 'u');
+const YEAR_FIRST = new RegExp('^\\d{4}[^\\p{L}\\d]', 'u');
+
 /**
  * Parses user input into a PlainDate.
  *
@@ -138,6 +143,17 @@ export function parseDateInput(
   if (/^\d+$/.test(trimmed)) {
     return null;
   }
+  // In a day-first locale, letter-free text that no form above matched is not
+  // a date. Native `Date` reads `a/b/c` month first. It also takes a year of
+  // one to three digits. So "12/01/2" gives a wrong date. A four-digit year
+  // written first is not ambiguous.
+  if (
+    isLocaleDayFirst(locale) &&
+    LETTER_FREE.test(trimmed) &&
+    !YEAR_FIRST.test(trimmed)
+  ) {
+    return null;
+  }
 
   const parsed = new Date(trimmed);
   if (!isNaN(parsed.getTime())) {

package/src/utils/focusReturn.ts

@@ -151,3 +151,33 @@ export function focusForLastInput(
   }
   element.focus({...options, focusVisible: false});
 }
+
+/**
+ * Prepares the focus return for an open surface that may be removed while
+ * open (rendered only while open, or removed with its view). Removing a
+ * `<dialog>` runs no close and no browser focus return. Call this while the
+ * surface is mounted: it reads the frame that hosts the surface now, because a
+ * removed frame's document has no window. Call the returned function from the
+ * effect cleanup with the opener.
+ *
+ * Once the commit has finished, focus moves to the opener only when the
+ * surface really left the document (StrictMode's simulated unmount keeps it),
+ * the opener is still on the page, and the removal lost focus, both in the
+ * surface's document and in the document that hosts its frame. A control the
+ * user pressed outside the surface, or outside its frame, keeps its focus.
+ */
+export function prepareFocusReturnOnRemoval(
+  surface: Element,
+): (opener: Element | null) => void {
+  const host = surface.ownerDocument.defaultView?.frameElement ?? null;
+  return opener => {
+    queueMicrotask(() => {
+      if (surface.isConnected || opener == null || !opener.isConnected) {
+        return;
+      }
+      if (isFocusLost(surface) && (host == null || isFocusLost(host))) {
+        focusForLastInput(opener as HTMLElement);
+      }
+    });
+  };
+}

package/src/utils/interactionModality.ts

@@ -203,6 +203,7 @@ function holdNodeDocument(
  * tracker of its own for modality.
  */
 export function useInteractionModalityTracking(): InteractionModalityTracking {
+  // Syncs the document's interaction-modality tracking with this mount.
   useEffect(() => trackInteractionModality(), []);
   const nodeRef = useRef<Element | null>(null);
   const holdRef = useRef<{release: (() => void) | null}>({release: null});
@@ -236,7 +237,10 @@ export function useInteractionModalityTracking(): InteractionModalityTracking {
 export function useInteractionModalityTrackingFor(
   elementRef: RefObject<Element | null>,
 ): () => InteractionModality {
+  // Syncs the document's interaction-modality tracking with this mount.
   useEffect(() => trackInteractionModality(), []);
+  // Syncs modality tracking in the element's second document, such as an iframe
+  // or a Picture-in-Picture window.
   useEffect(() => {
     const ownerDocument = elementRef.current?.ownerDocument;
     if (

package/src/utils/interactionOverlay.stylex.ts

@@ -15,8 +15,9 @@
  * SYNC: When modified, update pressFeedback.ts, pressGesture.ts (the fade
  * clock), hooks/usePressFeedback.doc.mjs, the components that paint the touch
  * press off an ancestor scope or a pseudo-element (Switch, Tab,
- * CheckboxInput, RadioListItem, ClickableCard, SelectableCard, Thumbnail)
- * and scripts/build-css.test.mjs.
+ * CheckboxInput, RadioListItem, ClickableCard, SelectableCard, Thumbnail),
+ * Button (a tracked action sizes its `:active` image to zero) and
+ * scripts/build-css.test.mjs.
  */
 
 // Every surface that paints a press uses one of these styles, so a change to

package/src/utils/plainDate.ts

@@ -488,6 +488,27 @@ export function plainDateWeekFieldName(locale: Locale = 'en'): string {
   return 'week';
 }
 
+const dayNumberFormats = new Map<Locale, 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.
+ * Internal: not re-exported from `utils/index.ts`.
+ */
+export function plainDateFormatDayNumber(
+  value: number,
+  locale: Locale,
+): string {
+  let format = dayNumberFormats.get(locale);
+  if (format == null) {
+    format = new Intl.NumberFormat(locale, {useGrouping: false});
+    dayNumberFormats.set(locale, format);
+  }
+  return format.format(value);
+}
+
 // =============================================================================
 // Shared date-only format vocabulary
 // =============================================================================

package/src/utils/pressFeedback.ts

@@ -2,8 +2,8 @@
 
 /**
  * @file pressFeedback.ts
- * @input The press state machine (pressGesture.ts), the menu-press marker
- *   (hooks/menuPressMarker.ts) and the document's pointer, keyboard, scroll and
+ * @input The press state machine (pressGesture.ts), the menu-press and
+ *   press-group markers and the document's pointer, keyboard, scroll and
  *   visibility events
  * @output PRESSABLE_ATTRIBUTE, PRESSED_ATTRIBUTE, pressableProps and
  *   installPressFeedback
@@ -46,6 +46,7 @@ import {isCoarsePointer, watchCoarsePointer} from './coarsePointer';
 import {subscribeInput} from './inputStream';
 import {TOUCH_QUERY} from './touchPresentation';
 import {holdsPressThroughDrag} from '../privateAttributes/pressHoldsDrag.stylex';
+import {isTrackedByGroup} from '../privateAttributes/pressGroupItem.stylex';
 
 /**
  * The marker the controller finds with `closest()`. Every Astryx component
@@ -325,8 +326,9 @@ function stylesheetDroppedActive(): boolean {
 
 /**
  * The surface a mouse button's or the Space key's press paints, if any: the
- * innermost marked surface, outside a menu. A key's press paints only a
- * focused element that is itself the surface, as `:active` does.
+ * innermost marked surface, outside a menu and off a tracked action. A key's
+ * press paints only a focused element that is itself the surface, as
+ * `:active` does.
  */
 function buttonSurfaceAt(
   target: EventTarget | null,
@@ -336,6 +338,10 @@ function buttonSurfaceAt(
   if (element == null || element.closest(MENU_PRESS_ROOT) != null) {
     return null;
   }
+  // A tracker that follows a mouse paints a mouse press on its own actions.
+  if (pointerId != null && isTrackedByGroup(element, 'mouse')) {
+    return null;
+  }
   if (pointerId == null && element !== target) {
     return null;
   }
@@ -414,7 +420,14 @@ function onPointerDown(event: PointerEvent): void {
   const braking = element != null && scrollerIsBraking(element);
   lastTouchAt = Date.now();
   lastTouchTarget = event.target instanceof Node ? event.target : null;
-  if (element == null || braking) {
+  // A group's tracker that follows this pointer paints its action, so two
+  // writers would erase each other's paint. The touch still counts for the
+  // brake above.
+  if (
+    element == null ||
+    braking ||
+    isTrackedByGroup(element, event.pointerType)
+  ) {
     return;
   }
   takeOver(button, element);
@@ -560,6 +573,11 @@ function activatesOnSpace(target: EventTarget | null): boolean {
   );
 }
 
+/** A tracked action takes no `:active` paint, so a key's press paints here. */
+function isTrackedAction(target: EventTarget | null): boolean {
+  return target instanceof Element && isTrackedByGroup(target);
+}
+
 /**
  * Space went down on a focused button that is itself a pressable surface.
  * Heard in the BUBBLE phase, after the page's own handlers, so a press the
@@ -573,7 +591,7 @@ function onKeyDown(event: KeyboardEvent): void {
     event.isComposing ||
     event.defaultPrevented ||
     !activatesOnSpace(event.target) ||
-    !stylesheetDroppedActive()
+    !(stylesheetDroppedActive() || isTrackedAction(event.target))
   ) {
     return;
   }

package/src/utils/triggerFocus.ts

@@ -0,0 +1,80 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file triggerFocus.ts
+ * @input A focus event on a hover-layer trigger and its focusTrigger value
+ * @output Whether that focus counts as focus on the trigger, and a gate that
+ *   remembers it for the matching blur
+ * @position Shared focus-trigger judgement for Tooltip and HoverCard
+ */
+
+/** When focus on a trigger opens its layer. */
+export type TriggerFocusMode = 'auto' | 'always' | 'never';
+
+/** Whether `element` is in the tab order or naturally focusable. */
+export function isFocusableTrigger(element: HTMLElement): boolean {
+  if (element.hasAttribute('tabindex')) {
+    return element.tabIndex >= 0;
+  }
+  const focusableTags = ['A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'];
+  if (focusableTags.includes(element.tagName)) {
+    return !(element as HTMLButtonElement).disabled;
+  }
+  return element.isContentEditable;
+}
+
+/**
+ * Whether a focus event on a trigger (its `currentTarget`) counts as focus on
+ * the trigger.
+ *
+ * Under `auto` it is decided when focus arrives, not when listeners attach: a
+ * roving-tabindex member that was `tabindex="-1"` then can be the tab stop
+ * now. A trigger that receives focus is focusable by definition, which covers
+ * focusable elements this check does not list, such as a `<summary>` or an SVG
+ * link. Focus inside the trigger counts only while the trigger is focusable
+ * too, so a plain wrapper ignores its children's focus.
+ */
+export function isFocusForTrigger(
+  event: Event,
+  mode: TriggerFocusMode,
+): boolean {
+  if (mode === 'always') {
+    return true;
+  }
+  if (mode === 'never') {
+    return false;
+  }
+  const trigger = event.currentTarget as HTMLElement | null;
+  return (
+    trigger != null && (event.target === trigger || isFocusableTrigger(trigger))
+  );
+}
+
+/** Remembers whether a trigger's current focus counted when it arrived. */
+export interface TriggerFocusGate {
+  /** On focusin: whether this focus opens the layer. */
+  focusIn(event: Event, mode: TriggerFocusMode): boolean;
+  /**
+   * On focusout: whether this blur closes the layer. A focus that counted
+   * closes on blur even if the trigger has since left the tab order.
+   */
+  focusOut(event: Event, mode: TriggerFocusMode): boolean;
+}
+
+/** A gate for one trigger; each hook keeps one for its lifetime. */
+export function createTriggerFocusGate(): TriggerFocusGate {
+  let isCounted = false;
+  return {
+    focusIn(event, mode) {
+      isCounted = isFocusForTrigger(event, mode);
+      return isCounted;
+    },
+    focusOut(event, mode) {
+      if (!isCounted && !isFocusForTrigger(event, mode)) {
+        return false;
+      }
+      isCounted = false;
+      return true;
+    },
+  };
+}

package/dist/internal/touch-sheet.d.ts

@@ -1,21 +0,0 @@
-/**
- * @file touch-sheet.ts
- * @input The touch sheets' shared confirmation, search-drag dismissal and
- *   draft rules
- * @output `@astryxdesign/core/internal/touch-sheet`: SheetConfirmation,
- *   useDismissSearchOnTouchDrag, hasSameSelection and nameSheetDraftChange,
- *   re-exported by name for Lab's sheets
- * @position An internal entry reserved for Astryx's own packages:
- *   undocumented, outside the public API and its compatibility promise,
- *   versioned in lockstep with Core, and allowed only in Core and Lab by the
- *   `@astryx/no-core-internal-import` lint rule. Core components import the
- *   same modules by relative path. Named re-exports only.
- *
- * SYNC: When modified, update scripts/sync-exports.js.
- */
-export { SheetConfirmation } from './SheetConfirmation.js';
-export type { SheetConfirmationProps } from './SheetConfirmation.js';
-export { useDismissSearchOnTouchDrag } from './useDismissSearchOnTouchDrag.js';
-export { hasSameSelection, nameSheetDraftChange } from './sheetDraft.js';
-export type { SheetDraftChange } from './sheetDraft.js';
-//# sourceMappingURL=touch-sheet.d.ts.map

package/dist/internal/touch-sheet.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"touch-sheet.d.ts","sourceRoot":"","sources":["../../src/internal/touch-sheet.ts"],"names":[],"mappings":"AACA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,YAAY,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAC,2BAA2B,EAAC,MAAM,+BAA+B,CAAC;AAC1E,OAAO,EAAC,gBAAgB,EAAE,oBAAoB,EAAC,MAAM,cAAc,CAAC;AACpE,YAAY,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC"}

package/dist/internal/touch-sheet.js

@@ -1,19 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-/**
- * @file touch-sheet.ts
- * @input The touch sheets' shared confirmation, search-drag dismissal and
- *   draft rules
- * @output `@astryxdesign/core/internal/touch-sheet`: SheetConfirmation,
- *   useDismissSearchOnTouchDrag, hasSameSelection and nameSheetDraftChange,
- *   re-exported by name for Lab's sheets
- * @position An internal entry reserved for Astryx's own packages:
- *   undocumented, outside the public API and its compatibility promise,
- *   versioned in lockstep with Core, and allowed only in Core and Lab by the
- *   `@astryx/no-core-internal-import` lint rule. Core components import the
- *   same modules by relative path. Named re-exports only.
- *
- * SYNC: When modified, update scripts/sync-exports.js.
- */
-export { SheetConfirmation } from "./SheetConfirmation.js";
-export { useDismissSearchOnTouchDrag } from "./useDismissSearchOnTouchDrag.js";
-export { hasSameSelection, nameSheetDraftChange } from "./sheetDraft.js";

package/src/internal/touch-sheet.ts

@@ -1,21 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-/**
- * @file touch-sheet.ts
- * @input The touch sheets' shared confirmation, search-drag dismissal and
- *   draft rules
- * @output `@astryxdesign/core/internal/touch-sheet`: SheetConfirmation,
- *   useDismissSearchOnTouchDrag, hasSameSelection and nameSheetDraftChange,
- *   re-exported by name for Lab's sheets
- * @position An internal entry reserved for Astryx's own packages:
- *   undocumented, outside the public API and its compatibility promise,
- *   versioned in lockstep with Core, and allowed only in Core and Lab by the
- *   `@astryx/no-core-internal-import` lint rule. Core components import the
- *   same modules by relative path. Named re-exports only.
- *
- * SYNC: When modified, update scripts/sync-exports.js.
- */
-export {SheetConfirmation} from './SheetConfirmation';
-export type {SheetConfirmationProps} from './SheetConfirmation';
-export {useDismissSearchOnTouchDrag} from './useDismissSearchOnTouchDrag';
-export {hasSameSelection, nameSheetDraftChange} from './sheetDraft';
-export type {SheetDraftChange} from './sheetDraft';