@astryxdesign/core 0.7.5 → 0.7.6-canary.0d71e8d

package/src/SideNav/SideNavItem.spec.md

@@ -39,7 +39,7 @@ system_specs: [spec:AST-085]
 | Behavior                | One SideNav row: a link or button with optional icon and passive end content, optional row-level actions beside it, and optional nested children that can expand and collapse. In a collapsed rail it is icon-only with a tooltip or a flyout.                |
 | End-user impact         | Users see and hear the current page, reach row actions before nested items, expand or collapse groups without navigating, and return to the page after choosing a destination in the mobile drawer.                                                           |
 | Builder impact          | None.                                                                                                                                                                                                                                                         |
-| Compatibility/readiness | Records shipped behavior; no public change. Four implementation gaps (see Current-state impact).                                                                                                                                                              |
+| Compatibility/readiness | Records shipped behavior; no public change. Three implementation gaps (see Current-state impact).                                                                                                                                                             |
 | Review checks           | Reject an interactive control rendered inside the primary element, a link that also toggles collapse, a toggle or action that activates the row, collapsed children that stay reachable, or a drawer activation that leaves the drawer open after navigating. |
 | Governing rules         | `component:SideNav` FR1–FR5, DD1 (nesting and row geometry); `family:navigation-destinations`; `architecture:interaction-modality`; `architecture:public-component-api`.                                                                                      |
 
@@ -68,10 +68,6 @@ Consumer migration instructions belong in consumer docs and release notes.
 
 ## Current-state impact
 
-- **A disabled item leaves the tab order.** A disabled item renders a
-  `<button>` with the native `disabled` attribute, so it is skipped by Tab and
-  exposes no focusable disabled state. `spec:AST-085` FR1 has a disabled control
-  expose `aria-disabled="true"` and keep its tab stop.
 - **A disabled parent stays operable in a collapsed rail.** In a collapsed rail,
   a disabled item with children renders its flyout trigger with neither
   `disabled` nor `aria-disabled`, so it keeps its tab stop and announces no
@@ -125,7 +121,7 @@ Consumer migration instructions belong in consumer docs and release notes.
 
 | ID   | Invariant                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Basis                    |
 | ---- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
-| FR1  | The primary element is the `as` component, else the `LinkProvider` link, else `<a>`, when `href` is set and the item is enabled; otherwise a `<button type="button">`. A disabled item MUST stay focusable with `aria-disabled="true"` and keep its tab stop (`spec:AST-085` FR1). Implementation gap: a disabled item renders native `disabled` instead, which removes it from the tab order. It shows the icon (`selectedIcon` when selected and given), the label, `endContent`, and, for a whole-row collapsible item, a chevron. `endContent` is passive and renders inside the primary element.                                                                       | Current source and tests |
+| FR1  | The primary element is the `as` component, else the `LinkProvider` link, else `<a>`, when `href` is set and the item is enabled; otherwise a `<button type="button">`. A disabled item stays focusable with `aria-disabled="true"`, keeps its tab stop, and keeps focus when it becomes disabled (`spec:AST-085` FR1, FR4). It shows the icon (`selectedIcon` when selected and given), the label, `endContent`, and, for a whole-row collapsible item, a chevron. `endContent` is passive and renders inside the primary element.                                                                                                                                          | Current source and tests |
 | FR2  | In an expanded rail and on a collapsed leaf, `isSelected` sets `aria-current="page"` on the primary element, never on a row wrapper. A collapsed parent's flyout trigger carries no `aria-current`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Current source and tests |
 | FR3  | A disabled item does not fire `onClick` or navigate. Its row actions stay operable.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Current source and tests |
 | FR4  | `actions` render as siblings of the primary element at the row's trailing edge, after the toggle and before nested children in DOM and focus order, at the row's control size (`sm`) unless a control sets its own (`architecture:component-size-cascade`). Clicking an action neither activates nor toggles the row. A row wrapper exists only when there are actions or an independent toggle; a falsy `actions` adds none.                                                                                                                                                                                                                                               | Current source and tests |
@@ -146,16 +142,16 @@ Consumer migration instructions belong in consumer docs and release notes.
 
 ### Representative states
 
-| State                      | Required invariant                                                                     | Allowed variation |
-| -------------------------- | -------------------------------------------------------------------------------------- | ----------------- |
-| Link, selected             | `aria-current="page"` on the link; selected icon if given.                             | Fill.             |
-| Disabled button            | `aria-disabled`; focusable; no `onClick`. Implementation gap: native `disabled` (FR1). | Muted styling.    |
-| Collapsible without action | Whole row toggles; chevron turns.                                                      | —                 |
-| Collapsible with `href`    | Link navigates; separate toggle button collapses.                                      | —                 |
-| Actions                    | Actions after toggle, before children; never activate the row.                         | Action content.   |
-| Collapsed rail leaf        | Icon-only; tooltip with label.                                                         | —                 |
-| Collapsed rail parent      | Icon-only trigger; flyout with header and children.                                    | Delay.            |
-| Mobile drawer              | Activation closes the drawer.                                                          | —                 |
+| State                      | Required invariant                                             | Allowed variation |
+| -------------------------- | -------------------------------------------------------------- | ----------------- |
+| Link, selected             | `aria-current="page"` on the link; selected icon if given.     | Fill.             |
+| Disabled button            | `aria-disabled`; focusable; no `onClick`.                      | Muted styling.    |
+| Collapsible without action | Whole row toggles; chevron turns.                              | —                 |
+| Collapsible with `href`    | Link navigates; separate toggle button collapses.              | —                 |
+| Actions                    | Actions after toggle, before children; never activate the row. | Action content.   |
+| Collapsed rail leaf        | Icon-only; tooltip with label.                                 | —                 |
+| Collapsed rail parent      | Icon-only trigger; flyout with header and children.            | Delay.            |
+| Mobile drawer              | Activation closes the drawer.                                  | —                 |
 
 ### Transformation and precedence order
 
@@ -211,16 +207,10 @@ is recorded. Row geometry visual intent is `component:SideNav` DD1.
 | FR11          | `SideNav.test.tsx` focus ring suite                                 | Plain, split, actions rows                                                                                                | Missing shared ring classes fail.                                                 | `audit:SideNavItem/accessibility` |
 | FR3, FR7, FR9 | `SideNav.test.tsx` keyboard operation and focus management suites   | Tab order, Enter/Space toggle, flyout Escape                                                                              | Lost order, a stranded focus, or no focus return fails.                           | `audit:SideNavItem/accessibility` |
 
-Pending conformance: the SideNavItem suite's native-`disabled` assertion and
-the keyboard suite's disabled Tab-skip assertion pin FR1's implementation gap;
-they change when disabled items follow `spec:AST-085`.
-
 Read from source, with no focused test yet:
 
-- FR1 and ORD1–ORD2: a disabled item with `href` rendering a button, the
-  required focusable `aria-disabled` shape (no item renders it yet), the
-  button's `type="button"`, the icon, the selected-icon swap, and the whole-row
-  chevron.
+- FR1 and ORD1–ORD2: the button's `type="button"`, the icon, the
+  selected-icon swap, and the whole-row chevron.
 - FR4: the actions' trailing-edge placement and the wrapper for an independent
   toggle without actions.
 - FR5: the forwarded `ref` and `xstyle` on the outer box.

package/src/SideNav/SideNavItem.tsx

@@ -13,8 +13,8 @@
  * provided and fall back to `label` when it is missing or blank. Their label
  * tooltip binds to the interactive control through a callback ref, so hover,
  * keyboard focus, and `aria-describedby` follow the control from the first
- * collapsed render. A disabled control takes neither pointer nor focus, so its
- * row is the tooltip's trigger instead.
+ * collapsed render. A disabled control takes no pointer, so its row listens
+ * for the tooltip instead, while the control keeps focus and the description.
  *
  * Collapsed items with children open their submenu flyout through
  * `useMenuHover`, the shared hover-intent hook (same one `SideNavHeading` and
@@ -74,6 +74,7 @@ import {
 import {useSideNavRenderMode} from './SideNavRenderContext';
 import {useAppShellMobile} from '../AppShell/AppShellMobileContext';
 import {themeProps} from '../utils/themeProps';
+import {disabledInteractionProps} from '../utils/disabledInteraction';
 import {useTranslator} from '../i18n';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
@@ -324,6 +325,8 @@ interface NavItemElementProps {
 /**
  * Renders `<a>` (via LinkComponent) when `href` is set, otherwise `<button>`.
  * Centralizes the link-vs-button decision used across all SideNavItem paths.
+ * A disabled item is a `<button>` that keeps its tab stop and exposes
+ * `aria-disabled`, but is inert (spec:AST-085 FR1, FR2).
  */
 function NavItemElement({
   href,
@@ -351,8 +354,16 @@ function NavItemElement({
       ref={ref as React.Ref<HTMLButtonElement>}
       type="button"
       onClick={onClick}
-      disabled={isDisabled}
-      {...rest}>
+      {...rest}
+      {...(isDisabled
+        ? {
+            'aria-disabled': true,
+            ...disabledInteractionProps(
+              rest.onKeyDown as
+                React.KeyboardEventHandler<HTMLButtonElement> | undefined,
+            ),
+          }
+        : null)}>
       {children}
     </button>
   );
@@ -539,6 +550,10 @@ export function SideNavItem({
   const isRailLeaf = isCollapsed && !hasChildren;
   const railTooltip = useTooltip({
     placement: 'end',
+    // A disabled leaf's row is the trigger (see the collapsed path). It is not
+    // focusable itself, so `auto` would never hear the focus that bubbles up
+    // from its control.
+    focusTrigger: 'always',
     isEnabled: isRailLeaf,
     isOpen: isRailLeaf ? undefined : false,
   });
@@ -702,14 +717,17 @@ export function SideNavItem({
 
     // Items without children: icon-only link or button, its label in a
     // tooltip. The control is the trigger, so the element that takes focus is
-    // the one described. A disabled control takes neither pointer
-    // (`navItemStyles.disabled`) nor focus, so its row is the trigger instead.
+    // the one described. A disabled control takes no pointer
+    // (`navItemStyles.disabled`), so its row listens for the tooltip instead;
+    // the control still takes focus (focusin reaches the row) and stays the
+    // element described (spec:AST-085 FR5).
     const isRowTrigger = isDisabled;
     const collapsedAriaProps = {
       'aria-current': isSelected ? ('page' as const) : undefined,
-      'aria-describedby': isRowTrigger
-        ? rest['aria-describedby']
-        : joinIds(rest['aria-describedby'], railTooltip.describedBy),
+      'aria-describedby': joinIds(
+        rest['aria-describedby'],
+        railTooltip.describedBy,
+      ),
       'aria-disabled': isDisabled || undefined,
       'aria-label': collapsedAccessibleLabel,
       'data-testid': testId,
@@ -732,7 +750,6 @@ export function SideNavItem({
     return (
       <div
         ref={isRowTrigger ? railTooltip.ref : undefined}
-        aria-describedby={isRowTrigger ? railTooltip.describedBy : undefined}
         {...stylex.props(styles.root, xstyle)}>
         {collapsedElement}
         {railTooltip.renderTooltip(label)}

package/src/SideNav/__tests__/SideNavRailMotion.interaction.browser.spec.ts

@@ -12,7 +12,8 @@
  *   rest, the rail ends icons-only or with its labels, a second press mid-motion
  *   stays continuous, an expand whose old wrap is not copied keeps the edges
  *   together, and Reduce Motion cross-fades under a finger (DR2) and changes at
- *   once under a mouse (DR3)
+ *   once under a mouse (DR3), also on a loaded machine: those two cases read
+ *   the motion by its own start and end, never at a fixed time
  * @position Testing; the components' unit cases are
  *   SideNav/SideNavRailMotion.test.tsx
  *
@@ -216,30 +217,145 @@ function toggleButton(page: Page) {
   return page.getByRole('button', {name: /^(Collapse|Expand) sidebar$/});
 }
 
-/** Every running animation's animated properties and duration. */
-async function runningMotion(page: Page) {
-  return page.evaluate(() =>
-    document.getAnimations().map(animation => {
-      const effect = animation.effect as KeyframeEffect;
-      const properties = new Set<string>();
-      for (const frame of effect.getKeyframes()) {
-        for (const key of Object.keys(frame)) {
-          if (
-            !['offset', 'computedOffset', 'easing', 'composite'].includes(key)
-          ) {
-            properties.add(key);
+/**
+ * A loaded machine, made repeatable: Chromium's CPU throttle slows the page's
+ * main thread four times, or its animation clock runs every animation at a
+ * quarter of its speed, as when frames come late. Neither changes what the
+ * motion is; both move when it starts and ends in real time.
+ */
+const LOADS = ['idle', 'a slow CPU', 'slow frames'] as const;
+type Load = (typeof LOADS)[number];
+
+async function applyLoad(page: Page, load: Load): Promise<void> {
+  if (load === 'idle') {
+    return;
+  }
+  const cdp = await page.context().newCDPSession(page);
+  if (load === 'a slow CPU') {
+    await cdp.send('Emulation.setCPUThrottlingRate', {rate: 4});
+  } else {
+    await cdp.send('Animation.enable');
+    await cdp.send('Animation.setPlaybackRate', {playbackRate: 0.25});
+  }
+}
+
+/** The test-name suffix for a load: nothing when idle. */
+function underLoad(load: Load): string {
+  return load === 'idle' ? '' : `, with ${load}`;
+}
+
+/** One animation of the rail's motion: what it animates and when it ends. */
+interface MotionPart {
+  readonly properties: ReadonlyArray<string>;
+  /**
+   * When it ends on its own clock, in ms: its delay, every iteration and its
+   * end delay, so a delayed or repeated fade counts in full.
+   */
+  readonly endTime: number;
+  /** Whether it animates an element holding the page's main content. */
+  readonly holdsPage: boolean;
+}
+
+/** The record `recordMotion` keeps on the page, for `settledMotion`. */
+interface MotionRecord {
+  readonly seen: Map<Animation, MotionPart>;
+  readonly collect: () => void;
+  sampling: boolean;
+}
+
+/**
+ * Starts recording the motion a press of the toggle causes: every animation
+ * running on any frame from now on, described when first seen. Animations on
+ * the toggle element itself are its press feedback (its highlight's release
+ * fade runs on the button), not the rail's, so they are left out; everything
+ * inside it, its chevron included, stays in. `settledMotion` ends the record.
+ */
+async function recordMotion(page: Page): Promise<void> {
+  await toggleButton(page).evaluate(toggle => {
+    const seen = new Map<Animation, MotionPart>();
+    const collect = () => {
+      for (const animation of document.getAnimations()) {
+        const effect = animation.effect;
+        if (
+          seen.has(animation) ||
+          !(effect instanceof KeyframeEffect) ||
+          effect.target === toggle
+        ) {
+          continue;
+        }
+        const properties = new Set<string>();
+        for (const frame of effect.getKeyframes()) {
+          for (const key of Object.keys(frame)) {
+            if (
+              !['offset', 'computedOffset', 'easing', 'composite'].includes(key)
+            ) {
+              properties.add(key);
+            }
           }
         }
+        seen.set(animation, {
+          properties: [...properties],
+          endTime: Number(effect.getComputedTiming().endTime),
+          holdsPage:
+            effect.target instanceof Element &&
+            effect.target.contains(document.querySelector('[role="main"]')),
+        });
       }
-      return {
-        properties: [...properties],
-        duration: Number(effect.getTiming().duration),
-        holdsPage:
-          effect.target instanceof Element &&
-          effect.target.contains(document.querySelector('[role="main"]')),
-      };
-    }),
-  );
+    };
+    const record: MotionRecord = {seen, collect, sampling: true};
+    (window as unknown as {railMotion: MotionRecord}).railMotion = record;
+    const sample = () => {
+      if (record.sampling) {
+        collect();
+        requestAnimationFrame(sample);
+      }
+    };
+    requestAnimationFrame(sample);
+  });
+}
+
+/**
+ * Ends the record once the motion has ended on its own clock: every recorded
+ * animation has finished or been cancelled, and two more frames have passed
+ * without a new one, so what its end commits has landed. One that never ends
+ * (endless iterations) is not waited for; it is returned with an `endTime`
+ * of Infinity, for the cases to fail on. It never waits a fixed time: a loaded
+ * machine changes how long this takes, not what it reads.
+ */
+async function settledMotion(page: Page): Promise<ReadonlyArray<MotionPart>> {
+  return page.evaluate(async () => {
+    const record = (window as unknown as {railMotion: MotionRecord}).railMotion;
+    const isRunning = (animation: Animation) =>
+      animation.playState === 'running' &&
+      Number.isFinite(Number(animation.effect?.getComputedTiming().endTime));
+    const twoFrames = async () =>
+      new Promise<void>(resolve => {
+        requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+      });
+    for (;;) {
+      record.collect();
+      const running = [...record.seen.keys()].filter(isRunning);
+      if (running.length > 0) {
+        await Promise.all(
+          running.map(async animation =>
+            animation.finished.catch(() => undefined),
+          ),
+        );
+        continue;
+      }
+      const seenBefore = record.seen.size;
+      await twoFrames();
+      record.collect();
+      if (
+        record.seen.size === seenBefore &&
+        ![...record.seen.keys()].some(isRunning)
+      ) {
+        break;
+      }
+    }
+    record.sampling = false;
+    return [...record.seen.values()];
+  });
 }
 
 test.describe('component:SideNav FR6 and component:AppShell FR17 under a finger', () => {
@@ -341,25 +457,29 @@ test.describe('component:SideNav FR6 and component:AppShell FR17 under a finger'
     });
   });
 
-  test('under Reduce Motion a tap only cross-fades, in 200 ms or less, with the page surface still (design:reduced-motion DR2)', async ({
-    page,
-  }) => {
-    await page.emulateMedia({reducedMotion: 'reduce'});
-    await openStory(page, PHONE_STORY);
-    await toggleButton(page).tap();
-    const motion = await runningMotion(page);
-    expect(motion.length).toBeGreaterThan(0);
-    for (const {properties, duration, holdsPage} of motion) {
-      expect(properties).toEqual(['opacity']);
-      expect(duration).toBeLessThanOrEqual(200);
-      expect(holdsPage).toBe(false);
-    }
-    await page.waitForTimeout(400);
-    expect(await railAtRest(page)).toMatchObject({
-      labelsShown: false,
-      copies: 0,
+  for (const load of LOADS) {
+    test(`under Reduce Motion a tap only cross-fades, in 200 ms or less, with the page surface still${underLoad(load)} (design:reduced-motion DR2)`, async ({
+      page,
+    }) => {
+      await page.emulateMedia({reducedMotion: 'reduce'});
+      await openStory(page, PHONE_STORY);
+      await applyLoad(page, load);
+      await recordMotion(page);
+      await toggleButton(page).tap();
+      await expect(toggleButton(page)).toHaveAccessibleName('Expand sidebar');
+      const motion = await settledMotion(page);
+      expect(motion.length).toBeGreaterThan(0);
+      for (const {properties, endTime, holdsPage} of motion) {
+        expect(properties).toEqual(['opacity']);
+        expect(endTime).toBeLessThanOrEqual(200);
+        expect(holdsPage).toBe(false);
+      }
+      expect(await railAtRest(page)).toMatchObject({
+        labelsShown: false,
+        copies: 0,
+      });
     });
-  });
+  }
 });
 
 test.describe('component:SideNav FR6 and component:AppShell FR17 under a mouse', () => {
@@ -402,16 +522,21 @@ test.describe('component:SideNav FR6 and component:AppShell FR17 under a mouse',
     });
   });
 
-  test('under Reduce Motion a click changes the rail and the page at once (design:reduced-motion DR3)', async ({
-    page,
-  }) => {
-    await page.emulateMedia({reducedMotion: 'reduce'});
-    await openStory(page, DESKTOP_STORY);
-    await toggleButton(page).click();
-    expect(await runningMotion(page)).toEqual([]);
-    expect(await railAtRest(page)).toMatchObject({
-      labelsShown: false,
-      copies: 0,
+  for (const load of LOADS) {
+    test(`under Reduce Motion a click changes the rail and the page at once${underLoad(load)} (design:reduced-motion DR3)`, async ({
+      page,
+    }) => {
+      await page.emulateMedia({reducedMotion: 'reduce'});
+      await openStory(page, DESKTOP_STORY);
+      await applyLoad(page, load);
+      await recordMotion(page);
+      await toggleButton(page).click();
+      await expect(toggleButton(page)).toHaveAccessibleName('Expand sidebar');
+      expect(await settledMotion(page)).toEqual([]);
+      expect(await railAtRest(page)).toMatchObject({
+        labelsShown: false,
+        copies: 0,
+      });
     });
-  });
+  }
 });

package/src/Skeleton/Skeleton.tsx

@@ -97,7 +97,9 @@ const styles = stylex.create({
   },
   animate: {
     animationDirection: 'alternate',
-    animationDuration: durationVars['--duration-medium-max'],
+    // The loop reads the duration before a theme's tempo scales it
+    // (spec:AST-108 FR4).
+    animationDuration: `var(--_astryx-pre-tempo-duration-medium-max, ${durationVars['--duration-medium-max']})`,
     animationIterationCount: 'infinite',
     // Disable the pulse under reduced-motion; the static placeholder still
     // reads as loading (complex-20).

package/src/Slider/Slider.test.tsx

@@ -9,6 +9,7 @@
  * SYNC: When Slider.tsx changes, update tests to match new behavior
  */
 
+import {InternationalizationProvider} from '../i18n';
 import {useState} from 'react';
 import {describe, it, expect, vi, beforeEach} from 'vitest';
 import {render, screen, act, fireEvent, waitFor} from '@testing-library/react';
@@ -75,6 +76,24 @@ describe('Slider', () => {
     expect(sliders[1]).toHaveAccessibleName('Maximum value');
   });
 
+  it('translates the range thumb names under another locale', () => {
+    render(
+      <InternationalizationProvider
+        locale="fr"
+        overrides={{
+          fr: {
+            '@astryx.slider.minimumThumb': 'Valeur minimale',
+            '@astryx.slider.maximumThumb': 'Valeur maximale',
+          },
+        }}>
+        <Slider label="Prix" value={[20, 80] as [number, number]} />
+      </InternationalizationProvider>,
+    );
+    const sliders = screen.getAllByRole('slider');
+    expect(sliders[0]).toHaveAccessibleName('Valeur minimale');
+    expect(sliders[1]).toHaveAccessibleName('Valeur maximale');
+  });
+
   it('sets aria-valuetext with formatValue', () => {
     render(
       <Slider label="Temperature" value={72} formatValue={v => `${v}°F`} />,
@@ -337,6 +356,18 @@ describe('Slider', () => {
     expect(slider).not.toHaveAttribute('aria-required');
   });
 
+  it('conveys required state under FormLayout defaultOptionality="required" unless isOptional (FormLayout FR5)', () => {
+    render(
+      <FormLayout defaultOptionality="required">
+        <Slider label="Volume" value={50} />
+        <Slider label="Balance" value={50} isOptional />
+      </FormLayout>,
+    );
+    const [volume, balance] = screen.getAllByRole('slider');
+    expect(volume).toHaveAccessibleDescription(/Required/);
+    expect(balance).not.toHaveAccessibleDescription(/Required/);
+  });
+
   it('conveys required state on both thumbs of a range slider', () => {
     render(
       <Slider

package/src/Slider/Slider.tsx

@@ -58,6 +58,8 @@ import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import {useResolvedRequired} from '../hooks/useResolvedRequired';
+import {useTranslator} from '../i18n';
 // =============================================================================
 // Types
 // =============================================================================
@@ -512,6 +514,7 @@ export function Slider({ref, ...props}: SliderProps) {
     'aria-describedby': ariaDescribedByProp,
     ...restWithRange
   } = props;
+  const t = useTranslator();
   const {minStepsBetweenThumbs: _minSteps, ...restProps} =
     restWithRange as typeof restWithRange & {minStepsBetweenThumbs?: number};
   const {rest, container} = useFieldInputStyling('Slider', restProps, {
@@ -591,7 +594,9 @@ export function Slider({ref, ...props}: SliderProps) {
   // role="slider" in WAI-ARIA 1.2, so the thumb instead points its
   // aria-describedby at a visually hidden "Required" span — mirroring the
   // Field label's visible indicator (where isOptional takes precedence).
-  const conveysRequired = isRequired && !isOptional;
+  // A surrounding FormLayout's defaultOptionality="required" makes an unmarked
+  // field required too (FormLayout FR5).
+  const conveysRequired = useResolvedRequired({isRequired, isOptional});
 
   // Build aria-describedby
   const describedByParts: string[] = [];
@@ -980,8 +985,8 @@ export function Slider({ref, ...props}: SliderProps) {
     // name from the visible label element via aria-labelledby.
     const thumbLabel = isRange
       ? thumbIndex === 0
-        ? 'Minimum value'
-        : 'Maximum value'
+        ? t('@astryx.slider.minimumThumb')
+        : t('@astryx.slider.maximumThumb')
       : undefined;
 
     // ARIA bounds must agree with the movement clamping in updateValue: in

package/src/Slider/__tests__/Slider.a11y.chromium.spec.ts

@@ -87,16 +87,28 @@ async function runState(
   });
 }
 
-test('every slider expectation is exercised by a Slider state', async ({
-  page,
-}) => {
-  const cdp = await page.context().newCDPSession(page);
+// Checking coverage runs every state again, which on a loaded runner nears
+// the per-test timeout as one test. It runs as one serial part per state,
+// sharing their results, then one check over all of them.
+test.describe('every slider expectation is exercised by a Slider state', () => {
+  test.describe.configure({mode: 'serial'});
   const results: BindingResult[] = [];
+
   for (const state of SLIDER_BINDING_STATES) {
-    results.push(await runState(page, cdp, state));
+    test(`runs ${state.id}`, async ({page}) => {
+      const cdp = await page.context().newCDPSession(page);
+      results.push(await runState(page, cdp, state));
+    });
   }
-  expect(neverExercised(results)).toEqual([]);
-  expect(unmatchedKnownFailures(SLIDER_KNOWN_FAILURES, results)).toEqual([]);
+
+  test('no expectation is left unexercised', () => {
+    // Every part ran in this worker; this test alone proves nothing.
+    expect(results.map(result => result.state).sort()).toEqual(
+      SLIDER_BINDING_STATES.map(state => state.id).sort(),
+    );
+    expect(neverExercised(results)).toEqual([]);
+    expect(unmatchedKnownFailures(SLIDER_KNOWN_FAILURES, results)).toEqual([]);
+  });
 });
 
 for (const state of SLIDER_BINDING_STATES) {

package/src/Spinner/Spinner.tsx

@@ -21,8 +21,8 @@ import * as stylex from '@stylexjs/stylex';
 import {colorVars, durationVars, spacingVars} from '../theme/tokens.stylex';
 import type {BaseProps} from '../BaseProps';
 import {Text} from '../Text/Text';
-import {mergeProps} from '../utils';
-import {useTranslator} from '../i18n';
+import {mergeProps} from '../utils/mergeProps';
+import {useTranslator} from '../i18n/useTranslator';
 import {themeProps} from '../utils/themeProps';
 
 // =============================================================================
@@ -334,7 +334,9 @@ const styles = stylex.create({
     // 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'],
+      // 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',

package/src/Stack/Stack.tsx

@@ -30,7 +30,7 @@ import {
   paddingBlockStartStyles,
   paddingBlockEndStyles,
 } from '../Layout/padding.stylex';
-import {mergeProps} from '../utils';
+import {mergeProps} from '../utils/mergeProps';
 import {themeProps} from '../utils/themeProps';
 
 const overflowStyles = stylex.create({

package/src/Stack/StackItem.tsx

@@ -19,7 +19,7 @@ import {
   type StackItemCrossAlignSelf,
   type StackItemSize,
 } from './stackItem.stylex';
-import {mergeProps} from '../utils';
+import {mergeProps} from '../utils/mergeProps';
 import {themeProps} from '../utils/themeProps';
 
 const overflowStyles = stylex.create({