@astryxdesign/core 0.7.7-canary.c0929c8 → 0.7.7-canary.c19ca12

package/src/Selector/utils.ts

@@ -6,61 +6,15 @@
  * @position Utilities; used by Selector.tsx
  */
 
-import type {
-  SelectorOptionType,
-  SelectorOptionData,
-  SelectorDivider,
-  SelectorSection,
-} from './types';
+import type {SelectorOptionType, SelectorOptionData} from './types';
+import {getSelectableOptionEntries} from './selectableOptionEntries';
 
-/**
- * Type guard: check if option is a selectable option (string or OptionData)
- */
-export function isOptionData(
-  option: SelectorOptionType,
-): option is SelectorOptionData | string {
-  if (typeof option === 'string') {
-    return true;
-  }
-  return !('type' in option);
-}
-
-/**
- * Type guard: check if option is a divider
- */
-export function isDivider(
-  option: SelectorOptionType,
-): option is SelectorDivider {
-  return (
-    typeof option === 'object' && 'type' in option && option.type === 'divider'
-  );
-}
-
-/**
- * Type guard: check if option is a section
- */
-export function isSection(
-  option: SelectorOptionType,
-): option is SelectorSection {
-  return (
-    typeof option === 'object' && 'type' in option && option.type === 'section'
-  );
-}
-
-/**
- * Normalize string or option to consistent shape
- */
-export function normalizeOption(
-  option: string | SelectorOptionData,
-): SelectorOptionData {
-  if (typeof option === 'string') {
-    return {value: option, label: option};
-  }
-  return {
-    ...option,
-    label: option.label ?? option.value,
-  };
-}
+export {
+  isOptionData,
+  isDivider,
+  isSection,
+  normalizeOption,
+} from './optionShape';
 
 /**
  * Get all selectable options (flattening sections)
@@ -68,18 +22,5 @@ export function normalizeOption(
 export function getSelectableOptions(
   options: SelectorOptionType[],
 ): SelectorOptionData[] {
-  const result: SelectorOptionData[] = [];
-
-  for (const option of options) {
-    if (isOptionData(option)) {
-      result.push(normalizeOption(option));
-    } else if (isSection(option)) {
-      for (const opt of option.options) {
-        result.push(normalizeOption(opt));
-      }
-    }
-    // Skip dividers
-  }
-
-  return result;
+  return getSelectableOptionEntries(options).map(entry => entry.item);
 }

package/src/SideNav/SideNavItem.tsx

@@ -72,7 +72,7 @@ import {
   SideNavCollapseContext,
 } from './SideNavCollapseContext';
 import {useSideNavRenderMode} from './SideNavRenderContext';
-import {useAppShellMobile} from '../AppShell/AppShellMobileContext';
+import {useCloseMobileDrawerOnActivate} from '../AppShell/useCloseMobileDrawerOnActivate';
 import {themeProps} from '../utils/themeProps';
 import {disabledInteractionProps} from '../utils/disabledInteraction';
 
@@ -535,8 +535,8 @@ export function SideNavItem({
   const t = useComponentTranslator();
   const {isCollapsed} = useSideNavCollapse();
   const renderMode = useSideNavRenderMode();
-  const {closeMobileNav} = useAppShellMobile();
   const isInDrawer = renderMode === 'drawer' || renderMode === 'drawer-content';
+  const closeDrawerAfter = useCloseMobileDrawerOnActivate(isInDrawer);
   const id = useId();
   const hasChildren = !!children;
   const depth = use(SideNavItemDepthContext);
@@ -625,11 +625,7 @@ export function SideNavItem({
       toggleItemCollapse();
       return;
     }
-    onClick?.(e);
-    // Close the mobile nav when a nav item is activated inside the drawer
-    if (isInDrawer) {
-      closeMobileNav();
-    }
+    closeDrawerAfter(onClick)?.(e);
   };
 
   const handleToggleClick = (e: React.MouseEvent) => {

package/src/Slider/sliderTouchController.ts

@@ -29,7 +29,7 @@ import {TapGestureRecognizer} from '../gestures/TapGestureRecognizer';
 import type {PointerKind} from '../gestures/types';
 import {isRtlElement} from '../hooks/isRtlElement';
 import {
-  createAnimator,
+  createMotionAnimator,
   type Animator,
   type MotionCurve,
   type MotionHandle,
@@ -1186,7 +1186,7 @@ export class SliderTouchController {
   private animatorFor(element: HTMLElement): Animator {
     let animator = this.animators.get(element);
     if (animator == null) {
-      animator = createAnimator(element);
+      animator = createMotionAnimator(element);
       this.animators.set(element, animator);
     }
     return animator;

package/src/Spinner/Spinner.tsx

@@ -10,7 +10,7 @@
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Spinner/Spinner.doc.mjs
- * - /packages/core/src/Spinner/Spinner.test.tsx
+ * - /packages/core/src/Spinner/Spinner.test.tsx and __tests__/SpinnerMotion.a11y.chromium.spec.ts (rotor timing)
  * - /packages/core/src/Spinner/index.ts
  * - /apps/storybook/stories/Spinner.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/Spinner/ (showcase blocks)
@@ -153,60 +153,57 @@ function registerSpinnerVars(): void {
 registerSpinnerVars();
 
 /**
- * Pin every ring's dash motion to the document timeline's origin instead of
- * its own start time, so spinners mounted seconds apart stay in phase.
+ * Pin every ring's rotation to the document timeline's origin instead of its
+ * own start time, so spinners mounted seconds apart stay in phase.
  *
- * Setting `startTime` is exact where arithmetic on a clock read is not: a
+ * Setting `startTime` is exact where arithmetic on a clock read is not. A
  * negative `animation-delay` computed at mount is only as good as the gap
- * between reading the clock and the frame the animation starts in, which at
- * 10x CPU throttling measured 116deg of drift (from when this animated a
- * literal rotation; the same drift risk applies to the dash offset now).
+ * between the clock read and the frame the animation starts in. At 10x CPU
+ * throttling that gap measured 116 degrees of drift.
  *
- * Rings are collected and pinned in one frame because `getAnimations()`
- * resolves style and `startTime` dirties it again, so pinning them one at a
- * time makes each mount re-force what the previous one invalidated — 53 style
- * recalcs for 38 spinners against 19 batched.
+ * Rotors are collected and pinned in one frame. `getAnimations()` resolves
+ * style, and `startTime` dirties it again. So pinning them one at a time makes
+ * each mount re-force what the previous one invalidated: 53 style recalcs for
+ * 38 spinners, against 19 batched.
  */
-const pendingRings = new Set<SVGSVGElement>();
+const pendingRotors = new Set<HTMLSpanElement>();
 let flushScheduled = false;
 
-function pinRingsToTimelineOrigin(): void {
+function pinRotorsToTimelineOrigin(): void {
   flushScheduled = false;
   const animations: Animation[] = [];
-  for (const svg of pendingRings) {
-    // The animation now runs on the arc <circle>, a descendant of the ring
-    // this ref sits on (#6253), so it needs subtree:true to be found here.
-    animations.push(...svg.getAnimations({subtree: true}));
+  for (const rotor of pendingRotors) {
+    animations.push(...rotor.getAnimations());
   }
-  pendingRings.clear();
+  pendingRotors.clear();
   for (const animation of animations) {
     animation.startTime = 0;
   }
 }
 
 /**
- * Ref callback for the ring: the one place a mounted ring touches the DOM.
+ * Ref callback for the rotor: the one place a mounted ring touches the DOM.
  *
  * It reads nothing back — the geometry is resolved by the cascade, not in JS.
  */
 function syncRotationPhase(
-  svg: SVGSVGElement | null,
+  rotor: HTMLSpanElement | null,
 ): (() => void) | undefined {
-  if (svg == null) {
+  if (rotor == null) {
     return undefined;
   }
   // jsdom implements no Web Animations, and this runs in every consumer's
   // component tests.
-  if (typeof svg.getAnimations !== 'function') {
+  if (typeof rotor.getAnimations !== 'function') {
     return undefined;
   }
-  pendingRings.add(svg);
+  pendingRotors.add(rotor);
   if (!flushScheduled) {
     flushScheduled = true;
-    requestAnimationFrame(pinRingsToTimelineOrigin);
+    requestAnimationFrame(pinRotorsToTimelineOrigin);
   }
   return () => {
-    pendingRings.delete(svg);
+    pendingRotors.delete(rotor);
   };
 }
 
@@ -215,19 +212,13 @@ function syncRotationPhase(
 // =============================================================================
 
 /**
- * Moves the dash around a stationary circle instead of rotating the whole
- * ring. WebKit re-antialiases a rotating stroked shape's rounded cap
- * (`strokeLinecap: 'round'`, below) slightly differently at each intermediate
- * angle, which reads as a visible wobble on iOS Safari independent of
- * compositing (#6253) — confirmed by a real-device test against this exact
- * fix, since `willChange`/layer promotion alone (the earlier fix for #3617)
- * only smooths the rotation's motion, not the per-frame stroke rasterization.
- * A static circle with an animated `stroke-dashoffset` never rotates, so
- * WebKit never re-rasterizes the cap at an intermediate angle at all.
+ * A `transform` animation runs on the compositor, so the ring keeps turning
+ * while a script runs. A `stroke-dashoffset` animation would repaint the arc
+ * on the main thread every frame, so it would stop while a script runs.
  */
-const dashMotion = stylex.keyframes({
-  '0%': {strokeDashoffset: '0px'},
-  '100%': {strokeDashoffset: `calc(var(${RESOLVED_DIAMETER}) * -${PI})`},
+const rotation = stylex.keyframes({
+  '0%': {transform: 'rotate(0deg)'},
+  '100%': {transform: 'rotate(360deg)'},
 });
 
 // =============================================================================
@@ -283,6 +274,8 @@ const styles = stylex.create({
   ring: {
     backfaceVisibility: 'hidden',
     display: 'block',
+    // The track and the rotor share the one grid cell, stacked and centred.
+    gridArea: '1 / 1',
     // The frame is the box, read from the same composed var the span is sized
     // from — not from the size constant, which a theme cannot reach, and not
     // from a percentage, which needs the grid area to be a definite size in
@@ -300,6 +293,27 @@ const styles = stylex.create({
     // which put the ring 1.5-3.3px off across the four sizes.
     overflow: 'visible',
   },
+  // The rotor is the frame's size, so it turns about the ring's centre.
+  rotor: {
+    display: 'block',
+    gridArea: '1 / 1',
+    width: `var(${BOX_SIZE})`,
+    height: `var(${BOX_SIZE})`,
+    // Mobile Safari keeps a re-timed animation off the main thread only on an
+    // element with its own layer. So the rotor declares one before the start
+    // time is set (see `pinRotorsToTimelineOrigin`).
+    willChange: 'transform',
+    // Reduced motion slows the turn but never stops it: a still ring reads as
+    // broken. The status role and its name still say that work is busy.
+    animationDuration: {
+      // The loop reads the duration before a theme's tempo scales it.
+      default: `var(--_astryx-pre-tempo-duration-slow-min, ${durationVars['--duration-slow-min']})`,
+      '@media (prefers-reduced-motion: reduce)': '3s',
+    },
+    animationIterationCount: 'infinite',
+    animationName: rotation,
+    animationTimingFunction: 'linear',
+  },
   circle: {
     fill: 'none',
     // The ring is centred on the box (cx/cy 50%), so the arc's start offset
@@ -336,18 +350,6 @@ const styles = stylex.create({
   // `0` the way the registered length pair guards against, so it needs no
   // registration.
   arc: {
-    // Slow the motion dramatically under reduced-motion rather than freezing
-    // it (a frozen spinner reads as broken), matching ProgressBar's approach.
-    // The role="status" + "Loading" label still convey busy state (obs-6).
-    animationDuration: {
-      // The loop reads the duration before a theme's tempo scales it
-      // (spec:AST-108 FR4).
-      default: `var(--_astryx-pre-tempo-duration-slow-min, ${durationVars['--duration-slow-min']})`,
-      '@media (prefers-reduced-motion: reduce)': '3s',
-    },
-    animationIterationCount: 'infinite',
-    animationName: dashMotion,
-    animationTimingFunction: 'linear',
     stroke: 'var(--spinner-color)',
     transform: 'rotate(-90deg)',
     strokeDasharray: `calc(var(${RESOLVED_DIAMETER}) * ${PI} * var(--spinner-arc-fraction)) calc(var(${RESOLVED_DIAMETER}) * ${PI} * (1 - var(--spinner-arc-fraction)))`,
@@ -569,10 +571,12 @@ export function Spinner({
           height: `var(${BOX_SIZE}, ${frameSize}px)`,
         },
       )}>
+      {/* The track is zero-sized by attribute. With no stylesheet, the
+          rotor's arc alone fills the box, instead of two discs side by side.
+          `ring` sizes both to the box. */}
       <svg
-        ref={syncRotationPhase}
-        width={frameSize}
-        height={frameSize}
+        width={0}
+        height={0}
         aria-hidden="true"
         {...stylex.props(styles.ring)}>
         <circle
@@ -586,18 +590,28 @@ export function Spinner({
             trackOpacityStyles[shade],
           )}
         />
-        <circle
-          cx="50%"
-          cy="50%"
-          r={diameter / 2}
-          strokeWidth={border}
-          // The size's own dash, for the render with no stylesheet. The rule
-          // above composes the same lengths from the resolved diameter, so a
-          // themed ring keeps this fraction of arc rather than this length.
-          strokeDasharray={`${arcLength} ${circumference - arcLength}`}
-          {...stylex.props(styles.circle, styles.arc)}
-        />
       </svg>
+      <span
+        ref={syncRotationPhase}
+        aria-hidden="true"
+        {...stylex.props(styles.rotor)}>
+        <svg
+          width={frameSize}
+          height={frameSize}
+          {...stylex.props(styles.ring)}>
+          <circle
+            cx="50%"
+            cy="50%"
+            r={diameter / 2}
+            strokeWidth={border}
+            // The size's own dash, for the render with no stylesheet. The rule
+            // above composes the same lengths from the resolved diameter, so a
+            // themed ring keeps this fraction of arc rather than this length.
+            strokeDasharray={`${arcLength} ${circumference - arcLength}`}
+            {...stylex.props(styles.circle, styles.arc)}
+          />
+        </svg>
+      </span>
     </span>
   );
 

package/src/Switch/switchTouch.ts

@@ -4,8 +4,8 @@
  * @file switchTouch.ts
  * @input The UIKit switch constants (motion/uikit/switch.ts) and a track size
  * @output The pure model of Switch's touch presentation: thumb geometry, the
- *   drag's target, the flip rule, the commit on release and its click wait,
- *   and when the lifted thumb may settle
+ *   drag's target, the flip rule, the commit on release, and when the lifted
+ *   thumb may settle
  * @position Pure half of Switch's touch presentation; driven by
  *   useSwitchTouch.ts, tested by switchTouch.test.ts without a browser
  *
@@ -158,14 +158,6 @@ export function stepFlip(
   return isPast === flip.isArmed ? flip : {...flip, isArmed: isPast};
 }
 
-/**
- * Passive: how long a lift waits for the browser's own click before the
- * switch clicks its input itself, ms. The browser sends that click with the
- * lift's `touchend`. The surface's `touch-action` leaves no double-tap delay.
- * So this only runs out for a lift the browser does not count as a click.
- */
-export const BROWSER_CLICK_WAIT_MS = 300;
-
 /**
  * What a release commits: the side a drag flipped to; when nothing flipped,
  * the other side of the value, wherever the finger lifts. A press slid off

package/src/Switch/useSwitchTouch.ts

@@ -23,7 +23,7 @@ import type {GestureTouch} from '../gestures/types';
 import {isRtlElement} from '../hooks/isRtlElement';
 import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
 import {
-  createAnimator,
+  createMotionAnimator,
   type Animator,
   type MotionCurve,
 } from '../motion/animator';
@@ -31,9 +31,9 @@ import {solveSpring, toSpring, type SpringDescription} from '../motion/spring';
 import {UIKIT_GESTURES} from '../motion/uikit/gestures';
 import {registerSwitchTable, switchControl} from '../motion/uikit/switch';
 import {useTouchPresentation} from '../utils/touchPresentation';
-import {armClickGuard, withoutClickGuard} from '../utils/clickGuard';
+import {awaitBrowserClick, clickForLift} from '../utils/browserClickWait';
+import {armClickGuard} from '../utils/clickGuard';
 import {
-  BROWSER_CLICK_WAIT_MS,
   commitOnRelease,
   dragTarget,
   settleTime,
@@ -253,11 +253,8 @@ export class SwitchTouchController {
   private isTracking = false;
   /** Which presentation the switch has: the touch one, or its own. */
   private presentation: SwitchPresentation = 'touch';
-  /** The press-time listeners under a fine pointer, while armed. */
-  private pressListeners: (() => void) | null = null;
-  private pressListenersTimer: ReturnType<typeof setTimeout> | null = null;
-  /** Passive: a lift is waiting for the browser's own click. */
-  private browserClickTimer: ReturnType<typeof setTimeout> | null = null;
+  /** Passive: a lift is waiting for the browser's own click; this ends it. */
+  private endBrowserClickWait: (() => void) | null = null;
   private reconcileTimer: ReturnType<typeof setTimeout> | null = null;
 
   constructor(isOn: boolean, geometry: SwitchTouchGeometry) {
@@ -285,15 +282,15 @@ export class SwitchTouchController {
       return;
     }
     registerSwitchTable();
-    this.thumb = createAnimator(elements.thumb);
+    this.thumb = createMotionAnimator(elements.thumb);
     // The layer rests clear (its class's opacity 0) while the visuals show
     // the value; from here its opacity is the animator's.
-    this.fade = createAnimator(elements.track, {
+    this.fade = createMotionAnimator(elements.track, {
       pseudoElement: '::after',
       initial: {opacity: 0},
     });
     this.fade.set({opacity: 0});
-    this.shadow = createAnimator(elements.thumb, {
+    this.shadow = createMotionAnimator(elements.thumb, {
       pseudoElement: '::after',
       initial: {opacity: 0},
     });
@@ -328,73 +325,7 @@ export class SwitchTouchController {
         }
       },
     });
-    // The lift's own click activates the input natively: the switch then
-    // clicks nothing itself.
-    const onClick = (event: MouseEvent) => {
-      if (event.isTrusted && this.browserClickTimer != null) {
-        clearTimeout(this.browserClickTimer);
-        this.browserClickTimer = null;
-        this.scheduleReconcile();
-      }
-    };
-    const listen = (): (() => void) => {
-      surface.addEventListener('click', onClick, true);
-      return () => {
-        surface.removeEventListener('click', onClick, true);
-      };
-    };
-    if (this.presentation === 'pointer') {
-      // Under a fine pointer only the press the host arms listens at rest.
-      // The switch's click listener comes with a press and goes after its
-      // click wait.
-      this.listenForPress = listen;
-      return [
-        host.attachConsumer(surface, tracker),
-        () => tracker.dispose(),
-        () => this.stopPressListeners(),
-      ];
-    }
-    return [
-      host.attachConsumer(surface, tracker),
-      () => tracker.dispose(),
-      listen(),
-    ];
-  }
-
-  /** Under a fine pointer: adds the switch's own listeners for a press. */
-  private listenForPress: (() => () => void) | null = null;
-
-  private startPressListeners(): void {
-    if (this.pressListenersTimer != null) {
-      clearTimeout(this.pressListenersTimer);
-      this.pressListenersTimer = null;
-    }
-    if (this.pressListeners == null && this.listenForPress != null) {
-      this.pressListeners = this.listenForPress();
-    }
-  }
-
-  /** The press's click window is over: its listeners go. */
-  private endPressListeners(afterMs: number): void {
-    if (this.pressListeners == null) {
-      return;
-    }
-    if (this.pressListenersTimer != null) {
-      clearTimeout(this.pressListenersTimer);
-    }
-    this.pressListenersTimer = setTimeout(() => {
-      this.pressListenersTimer = null;
-      this.stopPressListeners();
-    }, afterMs);
-  }
-
-  private stopPressListeners(): void {
-    if (this.pressListenersTimer != null) {
-      clearTimeout(this.pressListenersTimer);
-      this.pressListenersTimer = null;
-    }
-    this.pressListeners?.();
-    this.pressListeners = null;
+    return [host.attachConsumer(surface, tracker), () => tracker.dispose()];
   }
 
   /** Undo everything: listeners, timers, animations and inline styles. */
@@ -403,7 +334,6 @@ export class SwitchTouchController {
       detach();
     }
     this.detachers = [];
-    this.listenForPress = null;
     this.clearTimers();
     for (const animator of [this.thumb, this.fade, this.shadow]) {
       const element = animator?.element;
@@ -576,7 +506,6 @@ export class SwitchTouchController {
     switch (event) {
       case 'touchDown':
         this.isTracking = true;
-        this.startPressListeners();
         this.touchDown(time);
         return;
       case 'touchDragInside':
@@ -612,16 +541,18 @@ export class SwitchTouchController {
             byBrowserClick: true,
             clicksIfNoBrowserClick: touch.pointerType === 'touch',
           });
-          this.endPressListeners(BROWSER_CLICK_WAIT_MS);
           return;
         }
-        if (this.drag?.flip.didFlip !== true && touch.pointerType !== 'touch') {
-          // A mouse or a pen slid off and released outside, with no flip:
-          // the switch is left alone, as the native checkbox is. Only a
-          // finger's press slid off toggles.
+        if (
+          touch.pointerType !== 'touch' &&
+          (event === 'touchUpOutside' || this.drag?.flip.didFlip !== true)
+        ) {
+          // A mouse or a pen released outside the tracking bounds, flipped or
+          // not, leaves the switch alone, as the native checkbox does. So the
+          // press can be taken back (WCAG 2.5.2). Only a finger's press slid
+          // off toggles.
           this.released = true;
           this.abandon(time);
-          this.endPressListeners(0);
           return;
         }
         // A drag that flipped, or a press slid off and lifted outside, which
@@ -633,7 +564,6 @@ export class SwitchTouchController {
           armClickGuard(this.elements.input.ownerDocument);
         }
         this.release(time);
-        this.endPressListeners(0);
         return;
       case 'touchCancel':
         // The browser took the touch for its scroll, or a recognizer above
@@ -643,7 +573,6 @@ export class SwitchTouchController {
           this.released = true;
           this.abandon(time);
         }
-        this.endPressListeners(0);
         return;
       case 'touchDragEnter':
       case 'touchDragExit':
@@ -725,14 +654,23 @@ export class SwitchTouchController {
       this.showSide(commit, time, undefined, true);
     }
     this.pressEnded(time, true);
-    if (byBrowserClick) {
-      this.browserClickTimer = setTimeout(() => {
-        this.browserClickTimer = null;
-        if (clicksIfNoBrowserClick && commit !== this.isOn) {
-          this.clickInput();
-        }
-        this.scheduleReconcile();
-      }, BROWSER_CLICK_WAIT_MS);
+    const surface = this.elements?.surface;
+    if (byBrowserClick && surface != null) {
+      // The lift's own click activates the input natively: the switch then
+      // clicks nothing itself.
+      this.endBrowserClickWait = awaitBrowserClick(surface, {
+        onClicked: () => {
+          this.endBrowserClickWait = null;
+          this.scheduleReconcile();
+        },
+        onNoClick: () => {
+          this.endBrowserClickWait = null;
+          if (clicksIfNoBrowserClick && commit !== this.isOn) {
+            this.clickInput();
+          }
+          this.scheduleReconcile();
+        },
+      });
       return;
     }
     if (commit !== this.isOn) {
@@ -749,11 +687,9 @@ export class SwitchTouchController {
    */
   private clickInput(): void {
     const input = this.elements?.input;
-    if (input == null) {
-      return;
+    if (input != null) {
+      clickForLift(input);
     }
-    armClickGuard(input.ownerDocument);
-    withoutClickGuard(() => input.click());
   }
 
   /** If the owner kept the old value, the visuals go back to it. */
@@ -1034,10 +970,8 @@ export class SwitchTouchController {
   }
 
   private clearTimers(): void {
-    if (this.browserClickTimer != null) {
-      clearTimeout(this.browserClickTimer);
-      this.browserClickTimer = null;
-    }
+    this.endBrowserClickWait?.();
+    this.endBrowserClickWait = null;
     if (this.reconcileTimer != null) {
       clearTimeout(this.reconcileTimer);
       this.reconcileTimer = null;