pixelize-native-library 1.2.0 → 1.3.0

package/lib/module/modules/skeleton/Skeleton.js

@@ -1,79 +1,68 @@
 "use strict";
 
 /**
- * Skeleton — a loading placeholder box that shimmers while the real content it stands in for is
- * still on its way. It is its own size (`width`/`height` are component-owned props, not
- * `LayoutStyle` — sizing IS the point of this component) and has exactly one neutral appearance:
- * a resting `bg.sunken` fill cross-faded with a fixed-alpha `fg.default` overlay composited over it
- * (see `resolveSkeletonColors`), pulsing on an `Animated` opacity loop. Purely decorative by default
- * (see `Skeleton.variants.ts` →
- * `resolveSkeletonAccessibility`, the same "decorative unless labelled" contract as `Avatar`).
- *
- * The shimmer is gated on `motion.decorative`, so it runs on high-tier devices only. A skeleton is
- * usually rendered one-per-row across a whole loading list, and a per-row loop is the single most
- * expensive thing a placeholder can do — low/mid tiers and reduce-motion get the static fill. Even
- * on high tier the loop is shaped so it costs zero JS per iteration: see the effect below.
+ * Skeleton — a loading placeholder with a translating highlight-band shimmer over a neutral base.
  */
 
-import { memo, useEffect, useMemo, useRef } from "react";
-import { Animated, StyleSheet } from "react-native";
-import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
-import { useTheme } from "../../theme/hooks.js";
-import { resolveSkeletonAccessibility, resolveSkeletonColors, resolveSkeletonSize, skeletonStructure } from "./Skeleton.variants.js";
+import { memo, useEffect, useMemo } from "react";
+import { StyleSheet } from "react-native";
+import Animated, { Easing, ReduceMotion, useAnimatedStyle, useSharedValue, withDelay, withRepeat, withTiming } from "react-native-reanimated";
+import { useReducedMotion } from "../../core/a11y/index.js";
+import { ShimmerGradientFill } from "../../core/gradient/index.js";
+import { useTheme, useThemeColors } from "../../theme/hooks.js";
+import { resolveSkeletonAccessibility, resolveSkeletonColors, resolveSkeletonSize, SKELETON_BAND_WIDTH_RATIO, SKELETON_SHIMMER_DURATION_MS, SKELETON_STAGGER_MS, skeletonStructure } from "./Skeleton.variants.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Skeleton = /*#__PURE__*/memo(function Skeleton({
   shape = "rect",
   width,
   height,
+  staggerIndex = 0,
   accessibilityLabel,
   style,
   testID
 }) {
   const theme = useTheme();
-  const motion = useMotion();
-  const pulse = useAnimatedValue(0);
-  const loop = useRef(null);
+  const roleColors = useThemeColors();
+  const reducedMotion = useReducedMotion();
+  const translateX = useSharedValue(0);
   const size = resolveSkeletonSize(shape, width, height);
   const a11y = resolveSkeletonAccessibility({
     accessibilityLabel
   });
-  const colors = useMemo(() => resolveSkeletonColors(theme.colors), [theme.colors]);
-  const shimmer = motion.decorative;
+  const colors = useMemo(() => resolveSkeletonColors(roleColors), [roleColors]);
+  const shimmer = !reducedMotion;
+  const bandWidth = size.width * SKELETON_BAND_WIDTH_RATIO;
   useEffect(() => {
-    if (!shimmer) return undefined;
-    pulse.setValue(0);
-    // A BARE timing, never a sequence: `Animated.loop` only takes RN's `_startNativeLoop` path when
-    // what it wraps reports `_isUsingNativeDriver()`, and `Animated.sequence` returns false for that
-    // unconditionally — a looped sequence restarts each leg from the JS thread, per row, forever.
-    // The fade back out is the interpolation below, not a second leg (ProgressBar's sweep, same shape).
-    loop.current = Animated.loop(motion.timing(pulse, 1, {
-      duration: "deliberate"
-    }));
-    loop.current.start();
-    return () => {
-      loop.current?.stop();
-      loop.current = null;
-    };
-  }, [shimmer, motion, pulse]);
-
-  // The effect cleanup above already stops the loop, but only while `shimmer` stays true across the
-  // unmount — this guarantees it regardless of the order React tears the tree down in.
-  useEffect(() => () => loop.current?.stop(), []);
+    if (!shimmer || size.width <= 0) {
+      translateX.value = 0;
+      return undefined;
+    }
+    const travel = size.width + bandWidth;
+    const delay = staggerIndex * SKELETON_STAGGER_MS;
+    translateX.value = -bandWidth;
+    translateX.value = withDelay(delay, withRepeat(withTiming(travel, {
+      duration: SKELETON_SHIMMER_DURATION_MS,
+      easing: Easing.linear,
+      reduceMotion: ReduceMotion.System
+    }), -1, false));
+    return undefined;
+  }, [shimmer, size.width, bandWidth, staggerIndex, translateX]);
   const rootStyle = useMemo(() => [skeletonStructure(theme, {
     shape
   }), {
     width: size.width,
     height: size.height,
     backgroundColor: colors.base
-  }, style], [theme, shape, size.width, size.height, colors, style]);
-  const pulseOpacity = useMemo(() => pulse.interpolate({
-    inputRange: [0, 0.5, 1],
-    outputRange: [0, 1, 0]
-  }), [pulse]);
-  const pulseStyle = useMemo(() => [StyleSheet.absoluteFill, {
-    backgroundColor: colors.pulse,
-    opacity: pulseOpacity
-  }], [colors, pulseOpacity]);
+  }, style], [theme, shape, size.width, size.height, colors.base, style]);
+  const bandStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: translateX.value
+    }]
+  }));
+  const bandSizeStyle = useMemo(() => ({
+    width: bandWidth,
+    height: size.height
+  }), [bandWidth, size.height]);
   return /*#__PURE__*/_jsx(Animated.View, {
     testID: testID,
     accessible: a11y.accessible,
@@ -83,10 +72,22 @@ export const Skeleton = /*#__PURE__*/memo(function Skeleton({
     "aria-hidden": a11y["aria-hidden"],
     style: rootStyle,
     children: shimmer && /*#__PURE__*/_jsx(Animated.View, {
-      testID: testID === undefined ? undefined : `${testID}-pulse`,
-      pointerEvents: "none",
-      style: pulseStyle
+      testID: testID === undefined ? undefined : `${testID}-shimmer`,
+      style: [styles.band, bandSizeStyle, bandStyle, {
+        pointerEvents: 'none'
+      }],
+      children: /*#__PURE__*/_jsx(ShimmerGradientFill, {
+        base: colors.base,
+        highlight: colors.highlight
+      })
     })
   });
 });
+const styles = StyleSheet.create({
+  band: {
+    position: "absolute",
+    top: 0,
+    left: 0
+  }
+});
 //# sourceMappingURL=Skeleton.js.map

package/lib/module/modules/skeleton/Skeleton.variants.js

@@ -3,28 +3,8 @@
 /**
  * Skeleton's style + accessibility resolution — the pure functions the component (and its tests)
  * depend on, plus the themed structural variant resolver.
- *
- * The split every sibling module copies (see `Button.variants.ts` / `Avatar.variants.ts`):
- *  - STRUCTURE (the shape's corner radius) lives in the `createThemedVariants` resolver below —
- *    static per (brand, mode), registered once via `StyleSheet.create`.
- *  - SIZE is NOT theme-driven: a skeleton's whole job is standing in for a specific piece of
- *    content, so `width`/`height` are per-instance numbers the caller supplies (or a per-shape
- *    fallback), resolved by `resolveSkeletonSize` and applied inline — never a themed variant,
- *    since there is no closed set of values to register.
- *  - COLOUR is resolved from the theme's ROLE colours (`resolveSkeletonColors`), never a raw ramp,
- *    never a hardcoded hex. There is no `tone` prop to widen — a loading placeholder has exactly
- *    one neutral appearance (same reasoning as `resolveAvatarColors`). `pulse` is `base` composited
- *    with a fixed-alpha overlay (see `resolveSkeletonColors`), not a second role lookup — two
- *    arbitrary role rungs are not guaranteed to differ enough to read as a shimmer.
- *  - ACCESSIBILITY prop derivation is `resolveSkeletonAccessibility`, kept pure so the "decorative
- *    unless labelled" contract is unit-testable without rendering React Native (same shape as
- *    `resolveAvatarAccessibility`).
- *
- * Free of React and of any lucide import, so the WCAG + behaviour tests import it directly (mocking
- * only `react-native`'s `StyleSheet`, as `core/style` and every sibling module's tests do).
  */
 
-import { compositeOver } from "../../theme/tokens/builders/color.js";
 import { createThemedVariants } from "../../core/style/index.js";
 /** Fallback dp size per shape, used whenever the caller gives neither `width` nor `height`. */
 export const SKELETON_DEFAULT_SIZE = {
@@ -42,12 +22,10 @@ export const SKELETON_DEFAULT_SIZE = {
   }
 };
 
-/**
- * Resolves the box's actual dp size. `circle` is the one shape that cannot take independent
- * width/height — an unequal pair would render an ellipse under the shared `radii.full` corner
- * radius, not a circle — so a single given dimension mirrors onto the other rather than the two
- * silently drifting apart.
- */
+// Ambient loop, not a one-shot transition — deliberately outside `MOTION_DURATION`; see MODULE.md.
+export const SKELETON_SHIMMER_DURATION_MS = 1400;
+export const SKELETON_BAND_WIDTH_RATIO = 0.4;
+export const SKELETON_STAGGER_MS = 100;
 export function resolveSkeletonSize(shape, width, height) {
   const fallback = SKELETON_DEFAULT_SIZE[shape];
   if (shape === "circle") {
@@ -62,45 +40,13 @@ export function resolveSkeletonSize(shape, width, height) {
     height: height ?? fallback.height
   };
 }
-// Fixed-alpha overlay composited onto `base` (Button's `PRESS_SCRIM_DARK`/`LIGHT` precedent for "I
-// need a guaranteed visible delta, not a role lookup"). `fg.default` is dark in light mode and light
-// in dark mode, so compositing it darkens/lightens `base` for free with no `if (dark)` branch. ~30%
-// alpha keeps the composited contrast ratio ≥ `MIN_PULSE_CONTRAST` (see `Skeleton.test.ts`) on every
-// brand × mode, with comfortable headroom above the floor.
-const PULSE_OVERLAY_ALPHA_HEX = "4d"; // 0x4d / 0xff ≈ 30%
-
-/**
- * Maps the placeholder onto role colours, then derives `pulse` as `base` composited with a small,
- * fixed-alpha overlay — never a second role lookup. A prior version returned `base: bg.sunken, pulse:
- * bg.raised`: two role rungs whose luminance gap is whatever the brand's ramp happens to produce, and
- * an independent re-measurement found that gap collapses to visually-indistinguishable on every
- * brand × mode — the shimmer was a silent no-op everywhere, not just on one theme. Compositing a
- * fixed-alpha overlay makes the luminance delta a controlled constant instead of an incidental one,
- * so it can't collapse regardless of how a brand's `bg.raised`/`bg.sunken` rungs happen to relate.
- */
+/** Sunken base + skeleton-only shimmer highlight (not shared `bg.hover`). */
 export function resolveSkeletonColors(colors) {
-  const base = colors.bg.sunken;
-  const pulse = compositeOver(`${colors.fg.default}${PULSE_OVERLAY_ALPHA_HEX}`, base);
   return {
-    base,
-    pulse
+    base: colors.bg.sunken,
+    highlight: colors.bg.skeletonShimmer
   };
 }
-/**
- * Derives the accessibility surface once, purely, so the "decorative unless labelled" contract is
- * testable without a renderer (same shape as `resolveAvatarAccessibility`):
- *  - no label → the placeholder stands in for content that hasn't rendered yet and carries no
- *    meaning of its own, so it is hidden from assistive tech rather than read as a bare,
- *    unexplained box.
- *  - a label (e.g. `"Loading"`) → exposed as one `"progressbar"`-role element carrying it, with
- *    `busy: true` (WCAG 1.4.1 — the loading state is announced, not left to be inferred from a box
- *    appearing on screen).
- *
- * `aria-hidden` covers BOTH platforms in one prop: RN maps it onto `accessibilityElementsHidden`
- * (iOS) + `importantForAccessibility="no-hide-descendants"` (Android), and react-native-web forwards
- * it to the DOM — where those two native props reach nothing, so an unlabelled skeleton used to stay
- * fully exposed to a screen reader on web.
- */
 export function resolveSkeletonAccessibility(input) {
   const hasLabel = input.accessibilityLabel !== undefined && input.accessibilityLabel.length > 0;
   return {
@@ -111,17 +57,6 @@ export function resolveSkeletonAccessibility(input) {
     "aria-hidden": hasLabel ? undefined : true
   };
 }
-
-/**
- * Structural styles only — the shape's corner radius, plus `overflow: "hidden"` so the animated
- * shimmer overlay (an absolutely-positioned sibling, see `Skeleton.tsx`) clips to it without each
- * shape recomputing the same radius on that overlay. No colour (state-driven, applied inline over
- * this), so this compiles once per theme identity via the `WeakMap`-cached themed resolver and
- * never rebuilds per render.
- *
- * Unlike `Button`, there is no focus ring here that needs to escape the bounds, so `overflow:
- * "hidden"` is safe — nothing else needs to be drawn outside this box.
- */
 export const skeletonStructure = createThemedVariants(theme => ({
   base: {
     overflow: "hidden"
@@ -129,10 +64,12 @@ export const skeletonStructure = createThemedVariants(theme => ({
   variants: {
     shape: {
       rect: {
-        borderRadius: theme.radii.base
+        borderRadius: theme.radii.md,
+        borderCurve: "continuous"
       },
       circle: {
-        borderRadius: theme.radii.full
+        borderRadius: theme.radii.full,
+        borderCurve: "continuous"
       },
       text: {
         borderRadius: theme.radii.sm

package/lib/module/modules/skeleton/SkeletonProps.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=SkeletonProps.js.map

package/lib/module/modules/slider/MODULE.md

@@ -13,6 +13,7 @@ primitive" philosophy `Modal`/`Select` already apply to RN's raw `<Modal>`.
 | `index.ts` | Public surface: `Slider`, `SliderProps`, `SliderSize`. |
 | `__tests__/Slider.test.ts` | Pure: WCAG contrast (all brands × modes) + drag-math/step/accessibility contracts. |
 | `__tests__/Slider.render.test.tsx` | Render: layout-driven positioning, the REAL `PanResponder` gesture fired end-to-end, increment/decrement actions, disabled. |
+| `__tests__/Slider.dom.test.tsx` | Real DOM (`jest.web.config.js`): the flat `aria-value*` props and the Tab stop. |
 
 ## Props
 
@@ -67,7 +68,7 @@ primitive" philosophy `Modal`/`Select` already apply to RN's raw `<Modal>`.
 - **2.5.5 / 2.5.8 (target size)** — the row's rendered height is `thumbSize` (16sm/20md);
   `SLIDER_SIZES[size].hitSlop`, applied as the row's `hitSlop`, expands it to the 44dp floor —
   ACHIEVED via `hitSlop` on the actual responder node, not just arithmetic (`Slider.test.ts`).
-- **1.4.11 (non-text contrast)** — measured, not assumed, for all 8 brands × both modes
+- **1.4.11 (non-text contrast)** — measured, not assumed, for all 9 brands × both modes
   (`Slider.test.ts`):
   - Fill vs track: `accent.text` (NOT `accent.solid` — measured as low as ~1.6:1 against `bg.sunken`
     on rosewood light, the same class of gap `ProgressBar` found) clears ≥ 4.4:1 against `bg.sunken`.
@@ -119,3 +120,5 @@ Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLA
 - Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.
 - List-heavy surfaces use `VirtualList` with device-tier window sizing where applicable.
 - `React.memo` + stable callbacks retained; render-item/key-extractor hoisted per ESLint perf rules.
+
+- **Round 2 visual** — radii retarget (`radii.md`/`lg`/`xl`/`full`), `borderCurve: continuous` on md+ corners; floating surfaces wire platform elevation/highlight where applicable.

package/lib/module/modules/slider/Slider.js

@@ -188,18 +188,19 @@ export const Slider = /*#__PURE__*/memo(function Slider(props) {
       size
     }), disabled && styles.dimmed, style],
     children: [focused && !disabled && /*#__PURE__*/_jsx(View, {
-      pointerEvents: "none",
       testID: testID === undefined ? undefined : `${testID}-focus-ring`,
       style: [styles.focusRing, {
         borderColor: theme.colors.border.focus,
-        borderRadius: theme.radii.base + FOCUS_RING_GAP + FOCUS_RING_WIDTH
+        borderRadius: theme.radii.md + FOCUS_RING_GAP + FOCUS_RING_WIDTH,
+        borderCurve: "continuous",
+        pointerEvents: "none"
       }]
     }), /*#__PURE__*/_jsx(View, {
-      pointerEvents: "none",
       style: [sliderTrackStructure(theme, {
         size
       }), {
-        backgroundColor: trackColors.track
+        backgroundColor: trackColors.track,
+        pointerEvents: "none"
       }],
       children: /*#__PURE__*/_jsx(View, {
         testID: testID === undefined ? undefined : `${testID}-fill`,
@@ -209,7 +210,6 @@ export const Slider = /*#__PURE__*/memo(function Slider(props) {
         }]
       })
     }), /*#__PURE__*/_jsx(View, {
-      pointerEvents: "none",
       testID: testID === undefined ? undefined : `${testID}-thumb`,
       style: [sliderThumbStructure(theme, {
         size
@@ -217,7 +217,8 @@ export const Slider = /*#__PURE__*/memo(function Slider(props) {
         left: `${fraction * 100}%`,
         marginLeft: -(spec.thumbSize / 2),
         backgroundColor: thumbColors.fill,
-        borderColor: thumbColors.border
+        borderColor: thumbColors.border,
+        pointerEvents: "none"
       }]
     })]
   });

package/lib/module/modules/slider/Slider.variants.js

@@ -16,10 +16,12 @@
  * only `react-native`'s `StyleSheet`, as `core/style` and `Button.variants.ts` do).
  */
 
+import { MIN_TOUCH_TARGET, slopFor } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants } from "../../core/style/index.js";
+export { MIN_TOUCH_TARGET };
+
 /** Same touch-target floor as every other interactive control in this library (44dp, WCAG 2.5.5 AAA). */
-export const MIN_TOUCH_TARGET = 44;
-const slopFor = dimension => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - dimension) / 2));
+
 export const SLIDER_SIZES = {
   sm: {
     trackHeight: 4,

package/lib/module/modules/slider/SliderProps.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=SliderProps.js.map

package/lib/module/modules/spinner/MODULE.md

@@ -12,6 +12,7 @@ mounting it always means work is in progress.
 | `index.ts` | Public surface: `Spinner`, `SpinnerProps`, `SpinnerSize`, `SpinnerTone`. No `icon` prop, so no `IconName` re-export. |
 | `__tests__/Spinner.test.ts` | Pure: WCAG 1.4.11 contrast (all brands × modes) + the size→box invariant + the accessibility contract. |
 | `__tests__/Spinner.render.test.tsx` | Render: name/busy, each size's resolved box, tone's resolved colour, reduced-motion freeze, glyph hidden from AT, consumer `style` last. |
+| `__tests__/Spinner.dom.test.tsx` | Real DOM (`jest.web.config.js`): the flat `aria-busy` / `aria-hidden` pair reaching the DOM. |
 
 ## Props
 
@@ -53,13 +54,13 @@ the scale lives on the child, never the box.
   `accessibilityElementsHidden` + `importantForAccessibility="no-hide-descendants"` for native.
 - **1.4.11 (Graphical Objects)** — a spinner is a graphical object required to understand that work
   is ongoing, so both tones are measured ≥ 3:1 against `bg.canvas`, `bg.surface`, AND `bg.raised` on
-  all 8 brands × both modes (`Spinner.test.ts`) — never eyeballed.
+  all 9 brands × both modes (`Spinner.test.ts`) — never eyeballed.
 - **2.3.3 (reduced motion)** — see "Reduced motion" below.
 - **Touch target (2.5.x)** — N/A. A Spinner is never interactive; there is no `hitSlop`.
 
 ## Reduced motion — frozen, not removed
 
-`useReducedMotion()` gates `animating`: when the OS setting is on, the glyph stops spinning
+`useMotion().enabled` gates `animating`: when reduce-motion is on, the glyph stops spinning
 (`animating={false}`) rather than being conveyed through motion alone. `hidesWhenStopped={false}`
 (iOS otherwise defaults this to `true`) keeps a still-visible ring rather than the glyph vanishing —
 freezing the motion shouldn't also remove the only visual cue a sighted, non-AT user has that

package/lib/module/modules/spinner/SpinnerProps.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=SpinnerProps.js.map

package/lib/module/modules/stage-progress/MODULE.md

@@ -1,18 +1,32 @@
-# stage-progress/
+# stage-progress/ — a horizontal pipeline in pills, bar, stepper or chevron form
 
-Horizontal pipeline — `variant`: `pills` | `bar` | `stepper`. `value` is active stage id.
+Horizontal pipeline — `variant`: `pills` | `bar` | `stepper` | `chevron`. `value` is active stage id.
 
 ## Files
 
 | File | Role |
 |------|------|
 | `StageProgress.variants.ts` | `resolveStageState` / `resolveActiveStageIndex`, the accessibility resolvers, `resolveStageProgressColors(RoleColors)`, and the structure resolvers. Plain, hook-free. |
-| `StageProgress.tsx` | Renders the row; picks the fill/text pair per stage state and wraps a pressable stage in `Pressable` only when it is interactive. |
+| `index.ts` | Public surface: `StageProgress`, `StageProgressProps`, `StageProgressStage`, `StageProgressVariant`, `StageState`. |
+| `__tests__/StageProgress.test.ts` | Pure: stage state, active index, the accessibility + colour resolvers. |
+| `__tests__/StageProgress.render.test.tsx` | Render: each variant, press gating, focus ring, `aria-busy`. |
+| `StageProgress.tsx` | Renders the row; picks the fill/text pair per stage state and wraps an interactive stage in the memoized `StagePressable` (scale/opacity via `usePressState` + `android_ripple`), same pattern as `Button`/`RadioGroup`. |
 
 ## Props
 
-`stages` (`StageProgressStage[]`: id, label, disabled) · `value` · `variant` · `readOnly` (default
-`true`) · `onStagePress(id)` · `style` (layout-only, outermost, once, last) · `testID`.
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `stages` | `readonly StageProgressStage[]` | — | `{ id, label, disabled? }`. |
+| `value` | `string` | — | Active stage id. |
+| `variant` | `pills \| bar \| stepper \| chevron` | `pills` | `chevron` uses the same pill geometry with a chevron separator. |
+| `size` | `sm \| md \| lg` | `md` | Pill/stepper typography and min heights. |
+| `colorScheme` | `default \| neutral` | `default` | `neutral` mutes fills to sunken/canvas tones. |
+| `isLoading` | `boolean` | `false` | When true, the active stage shows a `Spinner` instead of its label; root sets `aria-busy`. |
+| `minStageWidth` | `number` | from `size` | Minimum width per stage pill (layout). |
+| `readOnly` | `boolean` | `true` | `false` makes stages pressable, but only when `onStagePress` is also given. |
+| `onStagePress` | `(stageId: string) => void` | — | Omitted → stages render read-only regardless of `readOnly`. |
+| `style` | `LayoutStyle` | — | Outermost, once, last. |
+| `testID` | `string` | — | Seeds per-stage and focus-ring ids. |
 
 ## Accessibility
 
@@ -24,9 +38,11 @@ Horizontal pipeline — `variant`: `pills` | `bar` | `stepper`. `value` is activ
 - **`pills` / `stepper`** label each stage instead: `resolveStageAccessibilityLabel` appends the
   state — `", completed"` / `", current stage"` / `", not started"`. That suffix is the WCAG 1.4.1
   fix; fill colour is otherwise the only thing separating a completed stage from an upcoming one, and
-  there is no "completed" state to announce directly. `resolveStageAccessibilityState` supplies flat
-  `aria-selected` (active only) / `aria-disabled` — not `accessibilityState={{…}}`, which
-  react-native-web 0.21.2 drops entirely on web.
+  there is no "completed" state to announce directly. `resolveStageAccessibilityState` supplies
+  `aria-current="step"` (active only, WEB) + `accessibilityState={{ selected }}` (the NATIVE
+  fallback — React Native has no "current" concept) — not `aria-selected`, which is invalid ARIA on
+  `role="button"` and on a read-only stage's bare `View` alike (2026-08 sweep; mirrors `pagination`'s
+  `aria-current="page"` for "the page you're on", token `"step"` here instead).
 - **WCAG 2.4.7** — an interactive stage (`readOnly={false}`, not `disabled`) draws a `border.focus`
   ring (`${testID}-focus-ring-${stage.id}`) while focused. It is drawn **inside** the stage's
   bounds: `stageProgressRowStructure` clips to `overflow: "hidden"` and spaces stages one space step
@@ -38,8 +54,8 @@ Horizontal pipeline — `variant`: `pills` | `bar` | `stepper`. `value` is activ
 `MIN_TOUCH_TARGET` 44. `STAGE_PILL_MIN_HEIGHT` 32 and `STAGE_STEPPER_CIRCLE` 28 are padded to it by
 vertical-only `hitSlop` (`STAGE_PILL_HIT_SLOP`, `STAGE_STEPPER_HIT_SLOP`) — both shapes already
 exceed 44 horizontally (`minWidth` 72 / 64), so horizontal slop would only overlap neighbours. Slop
-is applied only where a stage is pressable; `readOnly` (and `disabled`) stages render a plain `View`,
-no `Pressable`, and need no target.
+is applied only where a stage is pressable; `readOnly`, `disabled`, and no-`onStagePress` stages
+render a plain `View`, no `Pressable`, and need no target.
 
 ## Contrast (measured, 9 brands × both modes)
 
@@ -50,10 +66,10 @@ no `Pressable`, and need no target.
 | `upcomingText` on `upcomingFill` (`fg.muted` / `bg.sunken`) | 6.45 |
 | `upcomingText` on `bg.canvas` (the `stepper` label under the circle) | 6.52 |
 
-`track` is `border.default` — a decorative pill/circle outline at 1.08–1.43 on the canvas, never
-escalated to `border.interactive` / `border.focus`. Bar-segment fills are deliberately quiet
-(`bg.sunken` at ~1.01–1.12 on the canvas); the state they encode is carried by the progressbar
-label, not by contrast.
+Pills and stepper circles carry no outline any more — `theme.elevation.sm` lifts them off the row
+instead (Wave 5 tonal restyle), the same "tone/depth, not a hairline" treatment `Card`'s elevated
+variant uses. Bar-segment fills are deliberately quiet (`bg.sunken` at ~1.01–1.12 on the canvas); the
+state they encode is carried by the progressbar label, not by contrast.
 
 ## Known gaps
 
@@ -62,3 +78,5 @@ label, not by contrast.
   cannot move outside the stage — the row clips — so a fix would be a token-level decision, not a
   change here.
 - There is no arrow-key path between stages: each interactive stage is its own tab stop.
+
+- **Round 2 visual** — radii retarget (`radii.md`/`lg`/`xl`/`full`), `borderCurve: continuous` on md+ corners; floating surfaces wire platform elevation/highlight where applicable.