@astryxdesign/core 0.7.7 → 0.7.8-canary.0588a13

package/src/SegmentedControl/useSegmentedSelectionMotion.ts

@@ -25,7 +25,7 @@ import {
   type RefObject,
 } from 'react';
 import {
-  createAnimator,
+  createMotionAnimator,
   type AnimateOptions,
   type Animator,
   type MotionCurve,
@@ -539,7 +539,7 @@ export class SegmentedSelectionMotion {
   private readonly after: Animator;
 
   constructor(
-    private readonly animator: Animator = createAnimator(null, {
+    private readonly animator: Animator = createMotionAnimator(null, {
       pseudoElement: '::before',
     }),
     options: SegmentedSelectionMotionOptions = {},
@@ -552,7 +552,10 @@ export class SegmentedSelectionMotion {
     this.now = options.now ?? defaultNow;
     this.after =
       options.afterAnimator ??
-      createAnimator(null, {pseudoElement: '::after', initial: {opacity: 0}});
+      createMotionAnimator(null, {
+        pseudoElement: '::after',
+        initial: {opacity: 0},
+      });
   }
 
   /** Attaches the radiogroup whose pseudo-elements are the lens (null detaches). */

package/src/SelectableCard/SelectableCard.tsx

@@ -23,6 +23,8 @@
  * A hidden <input type="checkbox"> inside the card provides the accessible
  * role, label, and checked state — the card surface itself has no role/tabIndex.
  * Space toggles it natively; Enter is wired up as an additional toggle key.
+ * Inside a single-choice group (Lab's SelectableCardGroup, through an internal
+ * context) the input is a radio: the card selects and never deselects itself.
  *
  * For static display, use Card.
  * For navigation or action cards, use ClickableCard.
@@ -34,13 +36,14 @@ import {
   type KeyboardEvent,
   useRef,
   useCallback,
+  use,
   type Ref,
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import type {StyleXStyles} from '@stylexjs/stylex';
 import {colorVars, durationVars, easeVars} from '../theme/tokens.stylex';
 import type {Elevation, SizeValue, SpacingStep} from '../utils/types';
-import {mergeProps} from '../utils';
+import {isImeKeyEvent, mergeProps} from '../utils';
 import {Card} from '../Card/Card';
 import type {CardVariant} from '../Card/Card';
 import {useClickableContainer} from '../hooks/useClickableContainer';
@@ -52,6 +55,7 @@ import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import {usePressFeedback} from '../hooks/usePressFeedback';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import {SelectableCardInputContext} from './selectableCardInput';
 // =============================================================================
 // Styles — selection + interaction; Card handles the rest
 // =============================================================================
@@ -412,20 +416,34 @@ export function SelectableCard({
   const containerRef = useRef<HTMLDivElement | null>(null);
   const interactiveRef = useRef<HTMLInputElement | null>(null);
 
+  // A group can make the input a radio. A radio only selects: a native radio
+  // stays checked when it is clicked again.
+  const groupInput = use(SelectableCardInputContext);
+  const isRadio = groupInput?.type === 'radio';
+  const requestChange = useCallback(() => {
+    if (!isRadio) {
+      onChange(!isSelected);
+    } else if (!isSelected) {
+      onChange(true);
+    }
+  }, [isRadio, isSelected, onChange]);
+
   const handleClick = useCallback(
     (_event: MouseEvent<HTMLElement>) => {
       if (!isDisabled) {
-        onChange(!isSelected);
+        requestChange();
       }
     },
-    [isDisabled, isSelected, onChange],
+    [isDisabled, requestChange],
   );
 
-  // The focusable control is a native checkbox, which toggles on Space but
-  // ignores Enter. Add Enter as an extra toggle key; Space keeps its native
-  // handling, so we deliberately do not toggle on Space here (would double).
+  // A native checkbox or radio reacts to Space but not to Enter. This handler
+  // adds Enter. Space is not handled here, because it would act twice.
   const handleKeyDown = useCallback(
     (event: KeyboardEvent<HTMLInputElement>) => {
+      if (isImeKeyEvent(event.nativeEvent)) {
+        return;
+      }
       if (isDisabled) {
         if (event.key === ' ' || event.key === 'Enter') {
           event.preventDefault();
@@ -434,10 +452,10 @@ export function SelectableCard({
       }
       if (event.key === 'Enter') {
         event.preventDefault();
-        onChange(!isSelected);
+        requestChange();
       }
     },
-    [isDisabled, isSelected, onChange],
+    [isDisabled, requestChange],
   );
 
   const {onClick, onMouseUp} = useClickableContainer({
@@ -523,7 +541,18 @@ export function SelectableCard({
       }>
       <input
         ref={interactiveRef}
-        type="checkbox"
+        type={isRadio ? 'radio' : 'checkbox'}
+        name={groupInput?.name}
+        value={groupInput?.value}
+        // Radios group by name and form owner, so every radio card leaves
+        // the form together and the group stays one tab stop. The group
+        // submits its choice itself. A disabled checkbox card submits
+        // nothing, so it leaves the form too.
+        form={
+          groupInput != null && (groupInput.type === 'radio' || isDisabled)
+            ? ''
+            : undefined
+        }
         checked={isSelected}
         aria-label={label}
         aria-disabled={isDisabled ? 'true' : undefined}
@@ -531,7 +560,7 @@ export function SelectableCard({
           if (isDisabled) {
             return;
           }
-          onChange(!isSelected);
+          requestChange();
         }}
         onKeyDown={handleKeyDown}
         {...stylex.props(styles.srOnly)}

package/src/SelectableCard/selectableCardInput.ts

@@ -0,0 +1,30 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file selectableCardInput.ts
+ * @input A card group's choice of native input for each card it renders
+ * @output SelectableCardInputContext: the input type, name and value a group
+ *   gives one SelectableCard
+ * @position Internal: Lab's SelectableCardGroup provides it through
+ *   `@astryxdesign/core/internal/selectable-card`. It is not public API, so
+ *   SelectableCard's public props do not change.
+ */
+
+import {createContext} from 'react';
+
+/** The native input a group gives one card. */
+export interface SelectableCardInput {
+  /** `radio` makes the card one choice of a single-choice set. */
+  readonly type: 'checkbox' | 'radio';
+  /** The input's `name`. Radios that share it form one native group. */
+  readonly name: string;
+  /** The input's `value`. A checkbox card submits it when it is selected. */
+  readonly value: string;
+}
+
+/** Without a provider, a card renders its own checkbox. */
+export const SelectableCardInputContext =
+  createContext<SelectableCardInput | null>(null);
+SelectableCardInputContext.displayName = 'SelectableCardInputContext';

package/src/Selector/Selector.tsx

@@ -79,6 +79,7 @@ import {SelectorOption} from './SelectorOption';
 import {SelectorRowLayoutContext} from './SelectorRowLayoutContext';
 import {getInputARIA, isImeKeyEvent, mergeProps} from '../utils';
 import {joinAriaIDs} from '../utils/inputAria';
+import {withholdCallerHandlers} from '../utils/disabledInteraction';
 import {warnOnce} from '../utils/devWarning';
 import {useSize} from '../SizeContext/SizeContext';
 import {
@@ -1907,7 +1908,7 @@ export function Selector<T extends SelectorOptionType>(
         ref={attachListbox}
         id={listboxId}
         role="listbox"
-        aria-labelledby={triggerId}
+        aria-label={label}
         {...listboxPress.menuProps}
         {...stylex.props(
           styles.dropdown,
@@ -1927,17 +1928,10 @@ export function Selector<T extends SelectorOptionType>(
       id={listboxId}
       role="listbox"
       {...listboxPress.menuProps}
-      // The bottom sheet is a modal layer, so Chromium drops the trigger
-      // outside it from the accessibility tree and a reference to it yields
-      // no name. Name only this no-search sheet directly from the component's
-      // label; the searchable sheet and the popovers keep the trigger
-      // relationship.
-      aria-label={
-        surface.activePresentation === 'bottom-sheet' ? label : undefined
-      }
-      aria-labelledby={
-        surface.activePresentation === 'bottom-sheet' ? undefined : triggerId
-      }
+      // The trigger shows the value, so it cannot name the list.
+      // A modal sheet removes an outside label from the accessibility tree.
+      // The label element also holds the required marker and the tooltip.
+      aria-label={label}
       aria-activedescendant={
         surface.isOpen && highlightedIndex >= 0
           ? getItemId(highlightedIndex)
@@ -1995,13 +1989,7 @@ export function Selector<T extends SelectorOptionType>(
   // A disabled trigger stays focusable but, like a natively disabled button,
   // runs no caller event handler other than focus and blur, and a press on it
   // reaches no handler at all (`spec:AST-085` FR2).
-  const callerProps = isDisabled
-    ? Object.fromEntries(
-        Object.entries(rest).filter(
-          ([key]) => !/^on[A-Z]/.test(key) || /^on(Focus|Blur)/.test(key),
-        ),
-      )
-    : rest;
+  const callerProps = withholdCallerHandlers(rest, isDisabled);
   const triggerSharedProps: React.HTMLAttributes<HTMLElement> = {
     ...callerProps,
     onClick: isDisabled

package/src/SideNav/SideNav.tsx

@@ -438,6 +438,12 @@ interface PendingRailFocus {
   wasOnToggle: boolean;
 }
 
+/** The timeline holds one time per frame, so two reads in one frame match. */
+function frameTimeOf(doc: Document | undefined): number | null {
+  const time = doc?.timeline?.currentTime;
+  return time == null ? null : Number(time);
+}
+
 /**
  * Sidebar navigation container for application pages.
  *
@@ -456,6 +462,7 @@ interface PendingRailFocus {
  * </SideNav>
  * ```
  */
+
 export function SideNav({
   header,
   topContent,
@@ -498,7 +505,27 @@ export function SideNav({
   // The nav's own document's last input decides the moved focus's ring
   // (AR3), so a SideNav in a second document tracks input there.
   const {ref: modalityRef} = useInteractionModalityTracking();
-  const mergedNavRef = useMergedRefs(ref, navRef, modalityRef);
+  // The initial state never animates. A change before the rail's first paint
+  // lands at once, unless the rail's own toggle made it. Until a frame runs
+  // after the nav attaches, the document timeline reads the frame it read
+  // then.
+  const mountFrameRef = useRef<number | null>(null);
+  const mountedNavRef = useRef<HTMLElement | null>(null);
+  const isOwnToggleRef = useRef(false);
+  const recordMountFrame = useCallback((nav: HTMLElement | null) => {
+    // An inline ref re-attaches the same nav on each render. Only a new nav
+    // starts a new initial state.
+    if (nav != null && nav !== mountedNavRef.current) {
+      mountedNavRef.current = nav;
+      mountFrameRef.current = frameTimeOf(nav.ownerDocument);
+    }
+  }, []);
+  const mergedNavRef = useMergedRefs(
+    ref,
+    navRef,
+    modalityRef,
+    recordMountFrame,
+  );
   const collapseStateRef = useRef<SideNavCollapseState>({
     isCollapsed: false,
     toggle: () => {},
@@ -522,10 +549,10 @@ export function SideNav({
 
   const collapsed = resizableHook.isCollapsed;
 
-  // Every collapse or expand, whatever caused it, plays the rail's motion
-  // (`component:SideNav` FR6): measured in the commit before the DOM changes,
-  // played after it before paint. Inside AppShell the content area moves with
-  // it through AppShell's own handle (`component:AppShell` FR17); outside,
+  // A collapse or expand plays the rail's motion, except an app's change
+  // before the rail's first paint. It is measured in the commit before the
+  // DOM changes and played after it, before paint. Inside AppShell the
+  // content area moves with it through AppShell's own handle; outside,
   // SideNav holds its own over its parent.
   const shell = use(SideNavShellContext);
   // A resizable rail's wrapper holds the nav and the handle; outside AppShell
@@ -548,6 +575,14 @@ export function SideNav({
       running?.rail.end();
       running?.endContent();
       motionRef.current = null;
+      const isOwnToggle = isOwnToggleRef.current;
+      isOwnToggleRef.current = false;
+      const frame = frameTimeOf(navRef.current?.ownerDocument);
+      if (!isOwnToggle && (frame == null || frame === mountFrameRef.current)) {
+        railSnapshotRef.current = null;
+        shell?.landContent();
+        return;
+      }
       railSnapshotRef.current = snapshotRail(
         shell?.rail() ?? ownRail(),
         shell?.animatedLayout ?? ownLayout,
@@ -707,6 +742,7 @@ export function SideNav({
 
   const toggle = useCallback(() => {
     const next = !collapsed;
+    isOwnToggleRef.current = true;
 
     // Deprecated `handleRef` path only: an out-of-tree button reads this
     // snapshot while rendering, which can happen before SideNav re-renders.

package/src/Slider/Slider.tsx

@@ -48,6 +48,7 @@ import {VisuallyHidden} from '../VisuallyHidden';
 import type {InputStatus} from '../Field/types';
 import {mergeProps, rtlStyles} from '../utils';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
+import {withholdCallerHandlers} from '../utils/disabledInteraction';
 import {joinAriaIDs} from '../utils/inputAria';
 import {useInteractionModalityTracking} from '../utils/interactionModality';
 import {isRtlElement} from '../hooks/isRtlElement';
@@ -742,15 +743,20 @@ export function Slider({ref, ...props}: SliderProps) {
 
   const isHorizontal = orientation === 'horizontal';
 
-  // Consumer handlers run after the component's own and always run: the
-  // component's handlers call preventDefault() for their own reasons, which
-  // must not silence a consumer.
+  // Consumer handlers run after the component's own, so the component's
+  // preventDefault() calls never silence an enabled slider's consumer.
   const after =
     <E,>(own: (event: E) => void, consumer?: (event: E) => void) =>
     (event: E) => {
       own(event);
       consumer?.(event);
     };
+
+  // A disabled slider keeps its tab stop, so the browser still sends its events.
+  // Drop the caller's handlers, but keep focus and blur.
+  const callerProps = withholdCallerHandlers(rest, isDisabled);
+  const callerHandler = <E,>(handler?: (event: E) => void) =>
+    isDisabled ? undefined : handler;
   const generatedId = useId();
   const id = idProp ?? generatedId;
   const labelID = useId();
@@ -1475,7 +1481,7 @@ export function Slider({ref, ...props}: SliderProps) {
     ) => (
       <div
         key={thumbIndex}
-        {...(!isRange ? rest : undefined)}
+        {...(!isRange ? callerProps : undefined)}
         ref={trigger != null ? trigger.ref : !isRange ? ref : undefined}
         id={!isRange ? id : undefined}
         role="slider"
@@ -1504,7 +1510,7 @@ export function Slider({ref, ...props}: SliderProps) {
         }
         onKeyDown={after(
           e => handleKeyDown(thumbIndex, e),
-          !isRange ? onKeyDown : undefined,
+          !isRange ? callerHandler(onKeyDown) : undefined,
         )}
         onFocus={after(
           e => handleThumbFocus(thumbIndex, e),
@@ -1634,10 +1640,10 @@ export function Slider({ref, ...props}: SliderProps) {
         <div
           // In range mode the role="group" control takes the base props; a
           // single slider gives them to its role="slider" thumb.
-          {...(isRange ? rest : undefined)}
+          {...(isRange ? callerProps : undefined)}
           {...(isRange
             ? {
-                onKeyDown,
+                onKeyDown: callerHandler(onKeyDown),
                 onFocus,
                 onBlur,
                 'aria-describedby': ariaDescribedByProp,
@@ -1655,10 +1661,13 @@ export function Slider({ref, ...props}: SliderProps) {
                 'aria-labelledby': joinAriaIDs(labelID, ariaLabelledByProp),
               }
             : undefined)}
-          onPointerDown={after(handlePointerDown, onPointerDown)}
-          onPointerMove={after(handlePointerMove, onPointerMove)}
-          onPointerUp={after(handlePointerUp, onPointerUp)}
-          onPointerCancel={after(handlePointerUp, onPointerCancel)}
+          onPointerDown={after(handlePointerDown, callerHandler(onPointerDown))}
+          onPointerMove={after(handlePointerMove, callerHandler(onPointerMove))}
+          onPointerUp={after(handlePointerUp, callerHandler(onPointerUp))}
+          onPointerCancel={after(
+            handlePointerUp,
+            callerHandler(onPointerCancel),
+          )}
           {...mergeProps(
             themeProps('slider-control', {
               orientation,

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>
   );