@astryxdesign/core 0.7.7-canary.ae97fa8 → 0.7.7-canary.b377b21

package/src/Resizable/ResizeHandle.tsx

@@ -8,29 +8,12 @@
  * @output Styled drag handle with WAI-ARIA separator role and keyboard support
  * @position Between resizable panels; consumed directly by builders
  *
- * The handle element is 1px wide (the divider line itself), with an
- * absolutely-positioned wider hit area for pointer interaction.
- * Pill grip indicator can sit on either side of the divider (or centered)
- * via pillPlacement. Default 'auto' places the pill on the panel side and
- * flips when the panel collapses to 0px so it stays accessible.
- *
- * Pill placement uses a single stylex dynamic style that accepts a direction
- * multiplier (-1 or 1). The pill element has its own themeProps
- * ('resize-handle-pill') so themes can target size/shape directly.
- *
- * While the panel is collapsed, aria-valuenow is clamped to aria-valuemin
- * (a value below the minimum is invalid per WCAG 4.1.2) and a localized
- * "Collapsed" aria-valuetext announces the real state.
- *
- * The handle's input (the pointer drag, the keys, the double-click) is
- * resizeGesture.ts. ResizeHandle forwards its React events to it, over the
- * region its `resizable` prop describes. A drag takes pointer capture on the grab zone.
- * The gesture's move, up and cancel events then go there, as in Slider, even
- * over an embedded frame.
+ * A drag takes pointer capture on the element it starts on, so moves over an
+ * embedded frame still arrive.
  */
 
 import {useEffect, useRef, useState} from 'react';
-import type {ReactNode} from 'react';
+import type {HTMLAttributes, ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import type {BaseProps} from '../BaseProps';
 import {
@@ -81,30 +64,6 @@ function resolveEffectiveSide(
   return panelSide;
 }
 
-/**
- * Hit-area inline bias, expressed as a fraction of the pill's per-side offset.
- *
- * The visible pill is placed by `pillOffsetX`/`pillOffsetY`: anchored at the
- * divider's inline-start edge and pushed one grip-width-plus-gap toward the
- * panel side via a PHYSICAL translate (dir −1 = start, +1 = end). Because that
- * offset is physical, the pill sits on the same physical side of the divider in
- * both LTR and RTL. The grab zone must sit OVER that pill, so it has to use the
- * exact same anchor + physical-offset construction as the pill (just wider) —
- * anchoring the hit area at the divider centre (`insetInlineStart: 50%`) and
- * biasing with a percentage translate mixes a logical anchor (which flips under
- * RTL) with a physical translate (which doesn't), leaving the grab zone stranded
- * to one side under RTL. Returning the pill's `dir` here lets the hit area reuse
- * `pillOffsetX`/`pillOffsetY` so the two elements are positioned identically.
- */
-function hitAreaBiasDir(
-  effectiveSide: 'start' | 'end' | 'center',
-): number | null {
-  if (effectiveSide === 'center') {
-    return null;
-  }
-  return effectiveSide === 'start' ? -1 : 1;
-}
-
 const styles = stylex.create({
   handle: {
     position: 'relative',
@@ -137,6 +96,12 @@ const styles = stylex.create({
     insetInlineEnd: 0,
     height: 'var(--resize-handle-hit-area, 16px)',
   },
+  overlayHorizontalOnShortPane: {
+    width: 'min(var(--resize-handle-hit-area, 16px), 50%)',
+  },
+  overlayVerticalOnShortPane: {
+    height: 'min(var(--resize-handle-hit-area, 16px), 50%)',
+  },
   horizontal: {
     width: 1,
     height: '100%',
@@ -196,19 +161,27 @@ const styles = stylex.create({
       ':is(:disabled,[aria-disabled="true"])': 'default',
     },
   },
-  // Centered grab zone (pillPlacement 'center' / no bias): sit the hit area on
-  // the divider itself. Inline centering comes from rtlStyles.centerInline at
-  // the call site (correct in LTR and RTL); this block owns only the block axis.
+  // The grab zone sits centred on the Handle whatever `pillPlacement` says,
+  // which only places the pill. Inline centering comes from
+  // rtlStyles.centerInline at the call site (correct in LTR and RTL); this
+  // block owns only the block axis.
   hitAreaCenteredY: {
     insetBlockStart: '50%',
     transform: 'translateY(-50%)',
   },
+  hitAreaWithinHandleX: {
+    width: `min(${spacingVars['--spacing-4']}, 100%)`,
+  },
+  hitAreaWithinHandleY: {
+    height: `min(${spacingVars['--spacing-4']}, 100%)`,
+  },
 
   // Pill base — themes target .astryx-resize-handle-pill for size/shape.
   pill: {
     position: 'absolute',
     zIndex: 2,
-    pointerEvents: 'none',
+    touchAction: 'none',
+    userSelect: 'none',
     borderRadius: radiusVars['--radius-full'],
     backgroundColor: colorVars['--color-border'],
     transitionProperty: 'opacity, background-color, transform',
@@ -216,6 +189,18 @@ const styles = stylex.create({
     transitionTimingFunction: easeVars['--ease-standard'],
     top: '50%',
   },
+  pillGrabHorizontal: {
+    cursor: {
+      default: 'col-resize',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
+  },
+  pillGrabVertical: {
+    cursor: {
+      default: 'row-resize',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
+  },
   pillHorizontal: {
     width: 3,
     height: spacingVars['--spacing-8'],
@@ -224,59 +209,93 @@ const styles = stylex.create({
     width: spacingVars['--spacing-8'],
     height: 3,
   },
-  pillHidden: {opacity: 0},
+  // A hidden pill paints nothing, so it takes no pointer either.
+  pillHidden: {opacity: 0, pointerEvents: 'none'},
   pillVisible: {opacity: 1},
   pillHover: {
     opacity: 1,
+    pointerEvents: 'auto',
     backgroundColor: colorVars['--color-border'],
   },
   pillActive: {
     opacity: 1,
+    pointerEvents: 'auto',
     backgroundColor: colorVars['--color-border-emphasized'],
   },
+  // A pill shown on hover can sit outside the Grab zone. This invisible
+  // extension spans the gap toward the Handle, so the pointer keeps the hover
+  // on its way to the pill. It reaches no further than the pill, and it takes
+  // the pointer only while the pill does. The pill's offset is a physical
+  // translate, so the side toward the Handle is physical too.
+  pillBridgeRight: {
+    '::before': {
+      content: '""',
+      position: 'absolute',
+      insetBlock: 0,
+      insetInlineStart: {
+        default: 0,
+        ':is([dir="rtl"] *)': `calc(-1 * ${spacingVars['--spacing-1']} - 1px)`,
+      },
+      insetInlineEnd: {
+        default: `calc(-1 * ${spacingVars['--spacing-1']} - 1px)`,
+        ':is([dir="rtl"] *)': 0,
+      },
+    },
+  },
+  pillBridgeLeft: {
+    '::before': {
+      content: '""',
+      position: 'absolute',
+      insetBlock: 0,
+      insetInlineStart: {
+        default: `calc(-1 * ${spacingVars['--spacing-1']} - 1px)`,
+        ':is([dir="rtl"] *)': 0,
+      },
+      insetInlineEnd: {
+        default: 0,
+        ':is([dir="rtl"] *)': `calc(-1 * ${spacingVars['--spacing-1']} - 1px)`,
+      },
+    },
+  },
+  pillBridgeDown: {
+    '::before': {
+      content: '""',
+      position: 'absolute',
+      insetInline: 0,
+      insetBlockStart: 0,
+      insetBlockEnd: `calc(-1 * ${spacingVars['--spacing-1']} - 1px)`,
+    },
+  },
+  pillBridgeUp: {
+    '::before': {
+      content: '""',
+      position: 'absolute',
+      insetInline: 0,
+      insetBlockStart: `calc(-1 * ${spacingVars['--spacing-1']} - 1px)`,
+      insetBlockEnd: 0,
+    },
+  },
 });
 
 // Dynamic styles — avoids inline style overrides.
 // Each axis gets its own function since StyleX requires static structure.
 const dynamicStyles = stylex.create({
-  // Hit-area inline offset — mirrors the pill's `pillOffsetX`/`pillOffsetY`
-  // construction so the grab zone sits centred on the visible pill in BOTH
-  // directions. Both anchor at the divider's inline-start edge
-  // (`insetInlineStart: 0`) and travel toward the panel side with the SAME
-  // physical translate `dir * (gripWidth + gap)`, so they share the pill's
-  // near edge. The hit area is wider, so it also shifts by half the width
-  // difference `(16px − 3px) / 2 = 6.5px` to align the two CENTRES. That
-  // centring shift is along the inline axis (a box grows from its inline-start
-  // edge toward inline-end), so it must flip physical sign under RTL — unlike
-  // the `dir * (...)` travel, which is physical and identical in both
-  // directions because the pill's own offset is physical. Mixing the previous
-  // divider-relative `50%` anchor with a percentage translate stranded the grab
-  // zone to one side under RTL; this construction keeps it on the pill.
-  //
-  // Only the offset axis is translated. Unlike the pill — a small box anchored
-  // at the divider's midpoint, so it needs a −50% self-shift to centre — the
-  // grab zone is STRETCHED along the handle by hitAreaHorizontal/Vertical's
-  // 0/0 insets, so it is already in place on that axis. A percentage there
-  // would displace it by half the handle's own length, growing with the panel.
-  hitAreaOffsetX: (dir: number) => ({
-    insetInlineStart: 0,
-    transform: {
-      default: `translateX(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) - 6.5px))`,
-      ':is([dir="rtl"] *)': `translateX(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) + 6.5px))`,
-    },
+  // An inline Handle's zone is centred on its line, so half of it reaches into
+  // the pane.
+  hitAreaLengthX: (pane: number) => ({
+    width: `min(${spacingVars['--spacing-4']}, ${pane}px)`,
   }),
-  hitAreaOffsetY: (dir: number) => ({
-    insetBlockStart: 0,
-    transform: `translateY(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) - 6.5px))`,
+  hitAreaLengthY: (pane: number) => ({
+    height: `min(${spacingVars['--spacing-4']}, ${pane}px)`,
   }),
-  pillOffsetX: (dir: number) => ({
+  pillOffsetX: (dir: -1 | 1) => ({
     insetInlineStart: 0,
     transform: `translate(calc(${dir} * (100% + ${spacingVars['--spacing-1']})), -50%)`,
   }),
   // Vertical offset: no rotation — use explicit landscape dimensions.
   // Rotation + offset creates confusing coordinate math since translate
   // operates in pre-rotation local space.
-  pillOffsetY: (dir: number) => ({
+  pillOffsetY: (dir: -1 | 1) => ({
     top: 0,
     transform: `translate(-50%, calc(${dir} * (100% + ${spacingVars['--spacing-1']})))`,
   }),
@@ -333,7 +352,8 @@ export interface ResizeHandleProps extends Omit<
   isAlwaysVisible?: boolean;
 
   /**
-   * Which side of the divider line the pill sits on.
+   * Which side of the divider line the pill sits on. It moves only the pill:
+   * the grab zone stays centred on the divider.
    * - `'auto'` — panel side by default, flips when panel is collapsed to 0px
    * - `'start'` — left (horizontal) or top (vertical)
    * - `'end'` — right (horizontal) or bottom (vertical)
@@ -468,9 +488,12 @@ export function ResizeHandle({
     isReversed,
     isCollapsed,
   );
-  // Physical offset direction shared by the pill and the grab zone (null =
-  // centered / no bias). Keeps the two positioned identically in LTR and RTL.
-  const hitBiasDir = hitAreaBiasDir(effectiveSide);
+  // An inline zone reaches at most half of the pane the Handle resizes. An
+  // overlay Handle takes at most half of it. A collapsed pane, or one at 0px,
+  // has nothing to protect and keeps the whole zone.
+  const paneSize = resizable?._size;
+  const paneLength =
+    isCollapsed || paneSize == null || paneSize <= 0 ? undefined : paneSize;
   const isInteracting = isHovered || isFocused;
 
   // A handle whose axis disagrees with its region drags along one axis while
@@ -533,6 +556,35 @@ export function ResizeHandle({
       ? t('@astryx.resizable.collapsed')
       : undefined;
 
+  // The Grip pill takes the pointer as the Grab zone does, so a pill drawn
+  // outside the zone still resizes.
+  const grabHandlers: Pick<
+    HTMLAttributes<HTMLDivElement>,
+    | 'onPointerDown'
+    | 'onPointerMove'
+    | 'onPointerUp'
+    | 'onPointerCancel'
+    | 'onLostPointerCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+  > = {
+    onPointerDown: e => {
+      if (!isDisabled) {
+        gesture?.pointerDown(e);
+      }
+    },
+    onPointerMove: e => gesture?.pointerMove(e),
+    onPointerUp: e => gesture?.pointerUp(e),
+    onPointerCancel: e => gesture?.pointerCancel(e),
+    onLostPointerCapture: e => gesture?.pointerCancel(e),
+    onPointerEnter: () => setIsHovered(true),
+    onPointerLeave: () => {
+      if (!isDragging) {
+        setIsHovered(false);
+      }
+    },
+  };
+
   return (
     <div
       ref={useMergedRefs(ref, handleRef)}
@@ -560,6 +612,11 @@ export function ResizeHandle({
           isOverlay && styles.overlay,
           isOverlay &&
             (isHorizontal ? styles.overlayHorizontal : styles.overlayVertical),
+          isOverlay &&
+            paneLength != null &&
+            (isHorizontal
+              ? styles.overlayHorizontalOnShortPane
+              : styles.overlayVerticalOnShortPane),
           !isOverlay && (isHorizontal ? styles.horizontal : styles.vertical),
           !isOverlay &&
             !hasDivider &&
@@ -594,34 +651,21 @@ export function ResizeHandle({
         {...stylex.props(
           styles.hitArea,
           isHorizontal ? styles.hitAreaHorizontal : styles.hitAreaVertical,
-          // Bias the grab zone to sit over the visible pill. When the pill is
-          // centered (no bias) just center the hit area on the divider; when
-          // it's offset to a panel side, reuse the pill's physical-offset
-          // construction so the two stay aligned in LTR and RTL alike.
-          hitBiasDir == null
-            ? isHorizontal
-              ? rtlStyles.centerInline('0px')
-              : styles.hitAreaCenteredY
-            : isHorizontal
-              ? dynamicStyles.hitAreaOffsetX(hitBiasDir)
-              : dynamicStyles.hitAreaOffsetY(hitBiasDir),
+          isHorizontal
+            ? rtlStyles.centerInline('0px')
+            : styles.hitAreaCenteredY,
+          isOverlay &&
+            (isHorizontal
+              ? styles.hitAreaWithinHandleX
+              : styles.hitAreaWithinHandleY),
+          !isOverlay &&
+            paneLength != null &&
+            (isHorizontal
+              ? dynamicStyles.hitAreaLengthX(paneLength)
+              : dynamicStyles.hitAreaLengthY(paneLength)),
           isDisabled && styles.disabled,
         )}
-        onPointerDown={e => {
-          if (!isDisabled) {
-            gesture?.pointerDown(e);
-          }
-        }}
-        onPointerMove={e => gesture?.pointerMove(e)}
-        onPointerUp={e => gesture?.pointerUp(e)}
-        onPointerCancel={e => gesture?.pointerCancel(e)}
-        onLostPointerCapture={e => gesture?.pointerCancel(e)}
-        onPointerEnter={() => setIsHovered(true)}
-        onPointerLeave={() => {
-          if (!isDragging) {
-            setIsHovered(false);
-          }
-        }}
+        {...grabHandlers}
       />
       {/* Pill grip indicator — themed via .astryx-resize-handle-pill */}
       {children ?? (
@@ -640,11 +684,25 @@ export function ResizeHandle({
                   : dynamicStyles.pillOffsetY(
                       effectiveSide === 'start' ? -1 : 1,
                     ),
+              isHorizontal
+                ? styles.pillGrabHorizontal
+                : styles.pillGrabVertical,
               isAlwaysVisible ? styles.pillVisible : styles.pillHidden,
+              !isAlwaysVisible &&
+                effectiveSide !== 'center' &&
+                (isHorizontal
+                  ? effectiveSide === 'start'
+                    ? styles.pillBridgeRight
+                    : styles.pillBridgeLeft
+                  : effectiveSide === 'start'
+                    ? styles.pillBridgeDown
+                    : styles.pillBridgeUp),
               isInteracting && !isDragging && styles.pillHover,
               isDragging && styles.pillActive,
+              isDisabled && styles.disabled,
             ),
           )}
+          {...grabHandlers}
         />
       )}
     </div>

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