@astryxdesign/core 0.6.2 → 0.6.3-canary.01fa439

package/src/Selector/__tests__/Selector.listbox.a11y.test.tsx

@@ -0,0 +1,121 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Selector.listbox.a11y.test.tsx
+ * @input Uses Selector, its explicit part/state inventory, and the Listbox contract
+ * @output DOM evidence for real single-select listbox, group, and option parts
+ * @position Component-facing binding; keyboard, callbacks, forms, and styles stay local.
+ */
+
+import {cleanup, render, screen, within} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {describe, expect, it} from 'vitest';
+import {
+  expectAccessibilitySpec,
+  LISTBOX_PATTERN,
+} from '@astryxdesign/a11y-spec';
+import {Selector} from '../Selector';
+import {LISTBOX_SCENARIOS, listboxParts} from './Listbox.a11y.states';
+import {installListboxDialogStubs} from './Listbox.a11y.dom';
+
+installListboxDialogStubs();
+
+const scenarios = LISTBOX_SCENARIOS.filter(
+  scenario => scenario.component === 'Selector',
+);
+
+describe('Selector Listbox semantic binding', () => {
+  it.each(scenarios)('$id', async scenario => {
+    for (const part of listboxParts(scenario)) {
+      await expectAccessibilitySpec({
+        spec: LISTBOX_PATTERN,
+        binding: `Selector.${part.role}`,
+        state: part.state,
+        facts: part.facts,
+        render: async () => {
+          render(
+            <div dir={scenario.direction ?? 'ltr'}>
+              <Selector
+                label="Fruit"
+                options={scenario.options}
+                value={scenario.values[0]}
+                onChange={() => {}}
+                hasSearch={scenario.hasSearch}
+                presentation={scenario.presentation}
+                isLoading={scenario.isLoading}
+                isLabelHidden={scenario.hiddenLabel}
+                renderOption={
+                  scenario.customContent
+                    ? option => <span>{option.label} details</span>
+                    : undefined
+                }
+                isDefaultOpen
+              />
+            </div>,
+          );
+          await screen.findByRole('listbox', {hidden: true});
+          if (scenario.query != null) {
+            await userEvent
+              .setup()
+              .type(
+                screen.getByRole('combobox', {hidden: true}),
+                scenario.query,
+              );
+          }
+        },
+        subject: () =>
+          part.role === 'listbox'
+            ? screen.getByRole('listbox', {hidden: true})
+            : part.role === 'group'
+              ? within(
+                  screen.getByRole('listbox', {hidden: true}),
+                ).getAllByRole('group', {hidden: true})[
+                  scenario.groups.indexOf(part.name ?? '')
+                ]
+              : within(screen.getByRole('listbox', {hidden: true})).getByRole(
+                  'option',
+                  {name: part.name, hidden: true},
+                ),
+        related: () => {
+          const listbox = screen.getByRole('listbox', {hidden: true});
+          expect(
+            within(listbox).getAllByRole('option', {hidden: true}),
+          ).toHaveLength(scenario.expectedOptions.length);
+          return {
+            listbox,
+            ...Object.fromEntries(
+              scenario.expectedOptions.map(option => [
+                `option:${option.value}`,
+                within(listbox).getByRole('option', {
+                  name: option.name,
+                  hidden: true,
+                }),
+              ]),
+            ),
+            ...Object.fromEntries(
+              scenario.groups.map((name, index) => [
+                `group:${name}`,
+                within(listbox).getAllByRole('group', {hidden: true})[index],
+              ]),
+            ),
+          };
+        },
+        cleanup,
+      });
+    }
+  });
+
+  it('keeps the bounded state matrix explicit', () => {
+    expect(scenarios.map(scenario => scenario.id)).toEqual([
+      'single-unset',
+      'single-selected',
+      'single-disabled-selected',
+      'single-grouped',
+      'single-filtered',
+      'single-custom-rtl',
+      'single-sheet',
+      'single-sheet-search',
+      'single-loading',
+    ]);
+  });
+});

package/src/SideNav/SideNav.doc.mjs

@@ -25,7 +25,7 @@ export const docs = {
       {className: 'astryx-side-nav-section'},
     ],
   },
-  description: 'Container with five zones: header, topContent, children (scrollable), footer, and footerIcons. Supports collapsible mode.',
+  description: 'Container with five zones: header, topContent, children (scrollable), footer, and footerIcons. Supports collapsible and resizable modes.',
   props: [
     {
       name: 'header',

package/src/SideNav/SideNav.test.tsx

@@ -989,6 +989,16 @@ describe('SideNav resizable', () => {
     ).toBeInTheDocument();
   });
 
+  it('clips the overlay drag handle within the resizable nav bounds', () => {
+    render(<SideNav resizable>Content</SideNav>);
+    const nav = screen.getByRole('navigation');
+    const container = nav.parentElement;
+    const handle = screen.getByTestId('astryx-sidenav-resize-handle');
+
+    expect(container).toContainElement(handle);
+    expect(getComputedStyle(container!).overflow).toBe('clip');
+  });
+
   it('does not render drag handle without resizable', () => {
     render(<SideNav>Content</SideNav>);
     expect(

package/src/SideNav/SideNav.tsx

@@ -11,7 +11,8 @@
  * Sidebar navigation container with five zones: header + topContent (sticky together),
  * children (scrollable), footer, and footerIcons (sticky bottom).
  *
- * Supports optional resize via drag handle at the inline-end edge.
+ * Supports optional resize via a drag handle at the inline-end edge. The
+ * resizable wrapper clips handle overflow while keeping its focus ring inside.
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/SideNav/SideNav.doc.mjs
@@ -25,7 +26,7 @@ import {useCallback, useImperativeHandle, useRef, type ReactNode} from 'react';
 import type {BaseProps} from '../BaseProps';
 import * as stylex from '@stylexjs/stylex';
 import type {StyleXStyles} from '@stylexjs/stylex';
-import {spacingVars} from '../theme/tokens.stylex';
+import {focusVars, spacingVars} from '../theme/tokens.stylex';
 import {mergeProps} from '../utils';
 import {
   SideNavCollapseContext,
@@ -241,6 +242,16 @@ const styles = stylex.create({
     display: 'flex',
     flexShrink: 0,
     height: '100%',
+    overflow: 'clip',
+  },
+  resizableHandle: {
+    // Keep the shared ring inside the clipping boundary. The wrapper cannot
+    // use overflow-clip-margin: that paint allowance also contributes the
+    // overlay's half-pixel spill to AppShell's scrollable overflow.
+    outlineOffset: {
+      default: '0',
+      ':focus-visible': `calc(0px - ${focusVars['--focus-outline-width']})`,
+    },
   },
   // Topbar mode — horizontal layout for mobile top bar
   topbar: {
@@ -658,6 +669,7 @@ export function SideNav({
         position="overlay"
         pillPlacement="end"
         isAlwaysVisible={false}
+        xstyle={styles.resizableHandle}
         resizable={resizableHook.props}
         label={t('@astryx.sideNav.resizeSidebar')}
       />

package/src/Slider/Slider.doc.mjs

@@ -160,7 +160,8 @@ export const docs = {
     {
       name: 'marks',
       type: 'Array<{ value: number; label?: string }>',
-      description: 'Tick marks at specified positions with optional labels.',
+      description:
+        'Tick marks at specified positions with optional labels. Unfilled marks use the track color; marks inside the filled region (at or behind the thumb, or between the thumbs in range mode) use the fill color.',
     },
     {
       name: 'minStepsBetweenThumbs',
@@ -255,6 +256,17 @@ export const docs = {
     ],
   },
   usage: {
+    accessibility: [
+      {
+        name: 'Thumb',
+        category: 'Color contrast',
+        criterion: '1.4.11 Non-text Contrast',
+        requirement: '3:1',
+        states: ['Rest', 'Hover', 'Pointer down'],
+        description:
+          'The thumb must have at least 3:1 contrast with the track and the surface behind it. Pointer down is the whole drag: measure the thumb with the pressed overlay applied.',
+      },
+    ],
     anatomy,
     description:
       'A draggable control for selecting a numeric value or range within defined bounds. Supports single value and range selection, tick marks, custom value formatting, and vertical orientation. Use it when users need to explore a continuous range, such as volume, price, or percentage.',
@@ -354,7 +366,8 @@ export const docsZh = {
     {
       name: 'marks',
       type: 'Array<{ value: number; label?: string }>',
-      description: '在指定位置的刻度标记，带可选标签。',
+      description:
+        '在指定位置的刻度标记，带可选标签。未填充区域的标记使用轨道颜色；填充区域内的标记使用强调色。',
     },
     {
       name: 'minStepsBetweenThumbs',
@@ -520,7 +533,8 @@ export const docsDense = {
     orientation: 'Slider orientation.',
     formatValue: 'Custom value formatting fn for display + aria-valuetext.',
     valueDisplay: 'How current value is displayed.',
-    marks: 'Tick marks at specified positions w/ optional labels.',
+    marks:
+      'Tick marks at specified positions w/ optional labels. Unfilled marks use the track color; filled marks use the accent color.',
     minStepsBetweenThumbs:
       'Min steps between thumbs in range mode; prevents overlap.',
     isDisabled: 'Whether slider is disabled.',

package/src/Slider/Slider.test.tsx

@@ -13,6 +13,10 @@ import {useState} from 'react';
 import {describe, it, expect, vi, beforeEach} from 'vitest';
 import {render, screen, act, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import {
+  declaresPressedOverlay,
+  rulesDeclaredFor,
+} from '../__tests__/pressState';
 import * as stylex from '@stylexjs/stylex';
 import {Slider} from './Slider';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
@@ -727,6 +731,96 @@ describe('Slider', () => {
     expect(handleChange).toHaveBeenCalledWith(100);
   });
 
+  // --- Marks color ---
+
+  /** Whether the element has an unconditional rule painting a token. */
+  function declaresColorToken(el: Element, token: string): boolean {
+    return rulesDeclaredFor(el).some(rule => {
+      const selector = rule
+        .slice(0, rule.indexOf('{'))
+        .replaceAll(':not(#\\#)', '');
+      return !selector.includes(':') && rule.includes(`var(${token})`);
+    });
+  }
+
+  it('uses the track color for unfilled marks and the accent for filled marks', () => {
+    render(
+      <Slider
+        label="Volume"
+        value={50}
+        min={0}
+        max={100}
+        marks={[{value: 25}, {value: 75}]}
+      />,
+    );
+    const marks = screen.getAllByTestId('slider-mark');
+
+    expect(marks).toHaveLength(2);
+    expect(declaresColorToken(marks[0], '--color-track')).toBe(false);
+    expect(declaresColorToken(marks[0], '--color-accent')).toBe(true);
+    expect(declaresColorToken(marks[1], '--color-track')).toBe(true);
+    expect(declaresColorToken(marks[1], '--color-accent')).toBe(false);
+  });
+
+  function declaresFillColor(el: Element): boolean {
+    return declaresColorToken(el, '--color-accent');
+  }
+
+  it('colors marks at or behind the thumb with the fill color', () => {
+    render(
+      <Slider
+        label="Volume"
+        value={50}
+        min={0}
+        max={100}
+        marks={[
+          {value: 0},
+          {value: 25},
+          {value: 50},
+          {value: 75},
+          {value: 100},
+        ]}
+      />,
+    );
+    const marks = screen.getAllByTestId('slider-mark');
+    expect(marks).toHaveLength(5);
+    // Marks at 0, 25, and 50 sit at or behind the thumb: fill color.
+    expect(declaresFillColor(marks[0])).toBe(true);
+    expect(declaresFillColor(marks[1])).toBe(true);
+    expect(declaresFillColor(marks[2])).toBe(true);
+    // Marks at 75 and 100 sit ahead of the thumb: default mark color.
+    expect(declaresFillColor(marks[3])).toBe(false);
+    expect(declaresFillColor(marks[4])).toBe(false);
+  });
+
+  it('colors marks between the thumbs with the fill color in range mode', () => {
+    render(
+      <Slider
+        label="Price range"
+        value={[20, 80] as [number, number]}
+        min={0}
+        max={100}
+        marks={[
+          {value: 0},
+          {value: 20},
+          {value: 50},
+          {value: 80},
+          {value: 100},
+        ]}
+      />,
+    );
+    const marks = screen.getAllByTestId('slider-mark');
+    expect(marks).toHaveLength(5);
+    // The mark at 0 sits before the range: default mark color.
+    expect(declaresFillColor(marks[0])).toBe(false);
+    // Marks at 20, 50, and 80 sit between (or at) the thumbs: fill color.
+    expect(declaresFillColor(marks[1])).toBe(true);
+    expect(declaresFillColor(marks[2])).toBe(true);
+    expect(declaresFillColor(marks[3])).toBe(true);
+    // The mark at 100 sits after the range: default mark color.
+    expect(declaresFillColor(marks[4])).toBe(false);
+  });
+
   // --- Boundary clamping ---
 
   it('clamps value at max boundary', async () => {
@@ -1101,3 +1195,130 @@ describe('Slider', () => {
     });
   });
 });
+
+describe('pressed state', () => {
+  it('paints the pressed overlay on the thumb for as long as it is dragged, from wherever the press lands', () => {
+    render(
+      <Slider label="Volume" value={50} min={0} max={100} onChange={vi.fn()} />,
+    );
+    const thumb = screen.getByRole('slider');
+    const trackContainer = thumb.parentElement!;
+    trackContainer.getBoundingClientRect = () => ({
+      left: 0,
+      top: 0,
+      right: 200,
+      bottom: 20,
+      width: 200,
+      height: 20,
+      x: 0,
+      y: 0,
+      toJSON: () => {},
+    });
+
+    expect(declaresPressedOverlay(thumb)).toBe(false);
+    // A slider is a drag: the press lands on the track, not the thumb, and
+    // the thumb follows it. The pressed paint follows the drag.
+    fireEvent.pointerDown(trackContainer, {
+      clientX: 20,
+      clientY: 10,
+      pointerId: 1,
+    });
+    expect(declaresPressedOverlay(thumb)).toBe(true);
+    fireEvent.pointerMove(trackContainer, {
+      clientX: 120,
+      clientY: 10,
+      pointerId: 1,
+    });
+    expect(declaresPressedOverlay(thumb)).toBe(true);
+    fireEvent.pointerUp(trackContainer, {
+      clientX: 120,
+      clientY: 10,
+      pointerId: 1,
+    });
+    expect(declaresPressedOverlay(thumb)).toBe(false);
+  });
+
+  it('paints only the thumb being dragged in a range slider', () => {
+    render(
+      <Slider
+        label="Price"
+        value={[20, 80] as [number, number]}
+        min={0}
+        max={100}
+        onChange={vi.fn()}
+      />,
+    );
+    const [start, end] = screen.getAllByRole('slider');
+    // In range mode the control is the group; each thumb sits in its own
+    // value-tooltip wrapper.
+    const trackContainer = screen.getByRole('group');
+    trackContainer.getBoundingClientRect = () => ({
+      left: 0,
+      top: 0,
+      right: 200,
+      bottom: 20,
+      width: 200,
+      height: 20,
+      x: 0,
+      y: 0,
+      toJSON: () => {},
+    });
+    fireEvent.pointerDown(trackContainer, {
+      clientX: 170,
+      clientY: 10,
+      pointerId: 1,
+    });
+    expect(declaresPressedOverlay(end)).toBe(true);
+    expect(declaresPressedOverlay(start)).toBe(false);
+    fireEvent.pointerUp(trackContainer, {
+      clientX: 170,
+      clientY: 10,
+      pointerId: 1,
+    });
+    expect(declaresPressedOverlay(end)).toBe(false);
+  });
+
+  it('keeps a direct press on the visible upper thumb when range values coincide', () => {
+    render(
+      <Slider
+        label="Price"
+        value={[50, 50] as [number, number]}
+        min={0}
+        max={100}
+        onChange={vi.fn()}
+      />,
+    );
+    const [start, end] = screen.getAllByRole('slider');
+    const trackContainer = screen.getByRole('group');
+    trackContainer.getBoundingClientRect = () => ({
+      left: 0,
+      top: 0,
+      right: 200,
+      bottom: 20,
+      width: 200,
+      height: 20,
+      x: 0,
+      y: 0,
+      toJSON: () => {},
+    });
+
+    fireEvent.pointerDown(end, {
+      clientX: 100,
+      clientY: 10,
+      pointerId: 1,
+    });
+    expect(declaresPressedOverlay(end)).toBe(true);
+    expect(declaresPressedOverlay(start)).toBe(false);
+  });
+
+  it('does not press a disabled slider', () => {
+    render(<Slider label="Volume" value={50} isDisabled onChange={vi.fn()} />);
+    const thumb = screen.getByRole('slider');
+    fireEvent.pointerDown(thumb.parentElement!, {
+      clientX: 20,
+      clientY: 10,
+      pointerId: 1,
+    });
+    expect(declaresPressedOverlay(thumb)).toBe(false);
+  });
+});

package/src/Slider/Slider.tsx

@@ -5,7 +5,7 @@
 /**
  * @file Slider.tsx
  * @input Uses React, useId, useRef, useCallback, Field, Tooltip, useTooltip, VisuallyHidden
- * @output Exports Slider and its props; modifier-only key presses do not restore the thumb focus ring
+ * @output Exports Slider and its props; unfilled marks share the track token; modifier-only key presses do not restore the thumb focus ring
  * @position Core implementation; consumed by index.ts, tested by Slider.test.tsx
  *
  * SYNC: When modified, update these files to stay in sync:
@@ -288,6 +288,15 @@ const styles = stylex.create({
       },
     },
   },
+  // Pressed: the system's pressed overlay over the thumb's fill for as long
+  // as the thumb is being dragged. A slider is a drag, not a tap — the finger
+  // lands anywhere on the track and the thumb follows it — so the pressed
+  // paint follows the drag state the pointer handlers already keep, on a
+  // mouse and on a finger alike, rather than `:active` on the thumb itself
+  // (which a press on the track never activates).
+  thumbPressed: {
+    backgroundImage: `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`,
+  },
   thumbDisabled: {
     backgroundColor: colorVars['--color-background-muted'],
     cursor: 'default',
@@ -314,9 +323,15 @@ const styles = stylex.create({
   },
   mark: {
     position: 'absolute',
-    backgroundColor: colorVars['--color-border-emphasized'],
+    backgroundColor: colorVars['--color-track'],
     borderRadius: radiusVars['--radius-full'],
   },
+  // Marks over the filled region (at or behind the thumb in single mode,
+  // between the thumbs in range mode) take the fill color so they read as
+  // part of the filled track rather than the unfilled rail.
+  markFilled: {
+    backgroundColor: colorVars['--color-accent'],
+  },
   markHorizontal: {
     width: 2,
     height: 8,
@@ -701,17 +716,25 @@ export function Slider({ref, ...props}: SliderProps) {
       const newVal = markEl
         ? Number(markEl.dataset.markValue)
         : getValueFromPosition(e.clientX, e.clientY);
-      const thumbIndex = getClosestThumb(newVal);
+      const track = trackRef.current;
+      const thumbs = track?.querySelectorAll<HTMLElement>('[role="slider"]');
+      const pressedThumb = (e.target as Element).closest<HTMLElement>(
+        '[role="slider"]',
+      );
+      const pressedThumbIndex =
+        pressedThumb == null || thumbs == null
+          ? -1
+          : Array.from(thumbs).indexOf(pressedThumb);
+      // A direct thumb press owns that thumb even when range values coincide.
+      // Track and mark presses still choose the nearest value.
+      const thumbIndex =
+        pressedThumbIndex >= 0 ? pressedThumbIndex : getClosestThumb(newVal);
       draggingThumbRef.current = thumbIndex;
       setDraggingThumb(thumbIndex);
       updateValue(thumbIndex, newVal);
 
-      // Focus the closest thumb
-      const track = trackRef.current;
-      if (track) {
-        const thumbs = track.querySelectorAll<HTMLElement>('[role="slider"]');
-        thumbs[thumbIndex]?.focus();
-      }
+      // Focus the thumb that owns this drag.
+      thumbs?.[thumbIndex]?.focus();
       // Also clear it explicitly: focusing an already-focused thumb fires no
       // focus event, so a thumb the user had tabbed to would keep its ring
       // through the drag.
@@ -908,6 +931,7 @@ export function Slider({ref, ...props}: SliderProps) {
               ? styles.thumbHorizontal
               : rtlStyles.centerInline('50%'),
             !isDisabled && styles.thumbHover,
+            !isDisabled && draggingThumb === thumbIndex && styles.thumbPressed,
             !isDisabled &&
               keyboardFocusThumb === thumbIndex &&
               focusOutlineStyles.focusVisible,
@@ -1085,6 +1109,12 @@ export function Slider({ref, ...props}: SliderProps) {
                 const markPos = isHorizontal
                   ? {insetInlineStart: insetPosition(percent)}
                   : {bottom: insetPosition(percent)};
+                // Marks at or inside the filled region take the fill color:
+                // at or behind the thumb in single mode, between the thumbs
+                // in range mode.
+                const isFilled = isRange
+                  ? mark.value >= values[0] && mark.value <= values[1]
+                  : mark.value <= values[0];
                 return (
                   <div key={mark.value}>
                     <div
@@ -1096,6 +1126,7 @@ export function Slider({ref, ...props}: SliderProps) {
                           isHorizontal
                             ? styles.markHorizontal
                             : styles.markVertical,
+                          isFilled && styles.markFilled,
                         ),
                         {style: markPos},
                       )}

package/src/Spinner/Spinner.test.tsx

@@ -404,6 +404,10 @@ describe('Spinner ring', () => {
       frames.forEach(cb => cb(0));
       expect(animations).toHaveLength(5);
       expect(animations.every(a => a.startTime === 0)).toBe(true);
+      // The dash animation lives on the arc <circle>, a descendant of the
+      // <svg> this ref sits on, not the <svg> itself (#6253) — subtree:true
+      // is what lets getAnimations() find it from here.
+      expect(getAnimations).toHaveBeenCalledWith({subtree: true});
       // The pin runs on the branch the other shade cases cannot reach, so the
       // no-read assertion is made here too.
       expect(

package/src/Spinner/Spinner.tsx

@@ -147,13 +147,14 @@ function registerSpinnerVars(): void {
 registerSpinnerVars();
 
 /**
- * Pin every ring's rotation to the document timeline's origin instead of its
- * own start time, so spinners mounted seconds apart turn in phase.
+ * 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.
  *
  * 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.
+ * 10x CPU throttling measured 116deg of drift (from when this animated a
+ * literal rotation; the same drift risk applies to the dash offset now).
  *
  * Rings are collected and pinned in one frame because `getAnimations()`
  * resolves style and `startTime` dirties it again, so pinning them one at a
@@ -167,7 +168,9 @@ function pinRingsToTimelineOrigin(): void {
   flushScheduled = false;
   const animations: Animation[] = [];
   for (const svg of pendingRings) {
-    animations.push(...svg.getAnimations());
+    // 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}));
   }
   pendingRings.clear();
   for (const animation of animations) {
@@ -205,9 +208,20 @@ function syncRotationPhase(
 // Animation
 // =============================================================================
 
-const rotation = stylex.keyframes({
-  '0%': {transform: 'rotate(0deg)'},
-  '100%': {transform: 'rotate(360deg)'},
+/**
+ * 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.
+ */
+const dashMotion = stylex.keyframes({
+  '0%': {strokeDashoffset: '0px'},
+  '100%': {strokeDashoffset: `calc(var(${RESOLVED_DIAMETER}) * -${PI})`},
 });
 
 // =============================================================================
@@ -271,7 +285,6 @@ const styles = stylex.create({
     // One expression, one source of truth, resolves in any layout.
     width: `var(${BOX_SIZE})`,
     height: `var(${BOX_SIZE})`,
-    willChange: 'transform',
     // The svg is sized in CSS (100% of the span) rather than from the size
     // constant, so one user unit is one CSS pixel AND the frame follows a
     // themed diameter: the span's box is `diameter + 2 x stroke`, both public
@@ -280,16 +293,6 @@ const styles = stylex.create({
     // diameter — an overflowing grid item aligns to start rather than centre,
     // which put the ring 1.5-3.3px off across the four sizes.
     overflow: 'visible',
-    // Slow the rotation 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: {
-      default: durationVars['--duration-slow-min'],
-      '@media (prefers-reduced-motion: reduce)': '3s',
-    },
-    animationIterationCount: 'infinite',
-    animationName: rotation,
-    animationTimingFunction: 'linear',
   },
   circle: {
     fill: 'none',
@@ -327,6 +330,16 @@ 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: {
+      default: 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)))`,