pixelize-native-library 1.0.7 → 1.2.1

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

@@ -7,10 +7,10 @@
  * screen reader announces one "Loading" node — never the indicator as a second, redundant element.
  */
 
-import { memo } from "react";
+import { memo, useMemo } from "react";
 import { ActivityIndicator, View } from "react-native";
-import { useReducedMotion } from "../../core/a11y/index.js";
-import { useThemeColors } from "../../theme/index.js";
+import { useMotion } from "../../core/motion/index.js";
+import { useThemeColors } from "../../theme/hooks.js";
 import { resolveSpinnerAccessibility, resolveSpinnerTone, spinnerBox, spinnerGlyphScale } from "./Spinner.variants.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Spinner = /*#__PURE__*/memo(function Spinner({
@@ -21,37 +21,41 @@ export const Spinner = /*#__PURE__*/memo(function Spinner({
   accessibilityLabel
 }) {
   const colors = useThemeColors();
-  const reducedMotion = useReducedMotion();
+  const motion = useMotion();
   const color = resolveSpinnerTone(colors, tone);
   const a11y = resolveSpinnerAccessibility({
     accessibilityLabel
   });
+  const rootStyle = useMemo(() => [spinnerBox({
+    size
+  }), style], [size, style]);
+  const glyphStyle = useMemo(() => spinnerGlyphScale({
+    size
+  }), [size]);
   return /*#__PURE__*/_jsx(View, {
     testID: testID,
     accessible: true,
     accessibilityRole: a11y.accessibilityRole,
     accessibilityLabel: a11y.accessibilityLabel,
-    accessibilityState: a11y.accessibilityState,
-    style: [spinnerBox({
-      size
-    }), style],
+    "aria-busy": a11y["aria-busy"],
+    style: rootStyle,
     children: /*#__PURE__*/_jsx(ActivityIndicator, {
       testID: testID === undefined ? undefined : `${testID}-glyph`,
       size: "small",
       color: color
       // A frozen (non-spinning) glyph for a reduced-motion user (WCAG 2.3.3) — the box's own
       // `busy` state + label above is the real signal, exactly how `Button` treats ITS embedded
-      // spinner as decoration on top of `accessibilityState.busy`. `hidesWhenStopped={false}`
+      // spinner as decoration on top of `aria-busy`. `hidesWhenStopped={false}`
       // (iOS 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.
       ,
-      animating: !reducedMotion,
-      hidesWhenStopped: false,
-      accessibilityElementsHidden: true,
-      importantForAccessibility: "no-hide-descendants",
-      style: spinnerGlyphScale({
-        size
-      })
+      animating: motion.enabled,
+      hidesWhenStopped: false
+      // Covers both platforms: RN maps this onto accessibilityElementsHidden +
+      // importantForAccessibility, which react-native-web discards entirely.
+      ,
+      "aria-hidden": true,
+      style: glyphStyle
     })
   });
 });

package/lib/module/modules/spinner/Spinner.variants.js

@@ -55,14 +55,16 @@ export const DEFAULT_SPINNER_LABEL = "Loading";
  * renderer. There is no interaction to gate (a Spinner is never pressable) — unlike
  * `resolveButtonAccessibility`, the only decision here is the label fallback; `busy` is always true
  * because a mounted Spinner, by definition, means work is in progress.
+ *
+ * Flat `aria-busy` rather than `accessibilityState={{ busy }}`: RN's `View` folds the flat prop back
+ * into `accessibilityState`, while react-native-web forwards only the flat form — the object reaches
+ * nothing at all on web, leaving the spinner announcing a role with no state.
  */
 export function resolveSpinnerAccessibility(input) {
   return {
     accessibilityRole: "progressbar",
     accessibilityLabel: input.accessibilityLabel ?? DEFAULT_SPINNER_LABEL,
-    accessibilityState: {
-      busy: true
-    }
+    "aria-busy": true
   };
 }
 

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

@@ -0,0 +1,68 @@
+# stage-progress/
+
+Horizontal pipeline — `variant`: `pills` | `bar` | `stepper`. `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 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`.
+
+## Accessibility
+
+- **`bar`** renders no text at all — only coloured rectangles — so the container carries one
+  `progressbar` summary from `resolveStageProgressAccessibility`: label `"Stage 2 of 3: Review"` and
+  the 0-indexed `{ min, max, now }` triple. Segments themselves are unlabelled; per-segment labels
+  would read the same track three times. No matching stage (`activeIndex` -1) clamps to ordinal 0,
+  `now` 0, and no `": label"` suffix.
+- **`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
+  `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
+  apart, so a gap-outside ring would be cut off at the ends and overlap its neighbour elsewhere.
+  Over `activeFill` (`accent.solid`) the grey ring's contrast is unmeasured — see Known gaps.
+
+## Touch targets
+
+`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.
+
+## Contrast (measured, 9 brands × both modes)
+
+| Pair | Min |
+|------|-----|
+| `activeText` on `activeFill` (`accent.onSolid` / `accent.solid`) | 4.63 |
+| `completedText` on `completedFill` (`status.success.text` / `.subtle`) | 5.66 |
+| `upcomingText` on `upcomingFill` (`fg.muted` / `bg.sunken`) | 6.45 |
+| `upcomingText` on `bg.canvas` (the `stepper` label under the circle) | 6.52 |
+
+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
+
+- The focus ring's `border.focus` is the grey proven ≥ 3:1 against the **canvas**; over a stage's
+  own fill (notably `activeFill` = `accent.solid`) that ratio is unmeasured (WCAG 2.4.11). The ring
+  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.

package/lib/module/modules/stage-progress/StageProgress.js

@@ -0,0 +1,221 @@
+"use strict";
+
+/**
+ * StageProgress — horizontal pipeline stages (pills, bar, or stepper). Read-only by default;
+ * optional `onStagePress` when not `readOnly`.
+ */
+
+import { memo, useCallback, useMemo, useState } from "react";
+import { Platform, Pressable, Text, View } from "react-native";
+import Animated from "react-native-reanimated";
+import { usePressState } from "../../core/motion/usePressState.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
+import { useTheme } from "../../theme/hooks.js";
+import { resolveActiveStageIndex, resolveStageAccessibilityLabel, resolveStageAccessibilityState, resolveStageProgressAccessibility, resolveStageProgressColors, resolveStageState, stageBarStructure, stageFocusRingStructure, stagePillStructure, stageProgressRowStructure, stageStepperCircleStructure, STAGE_PILL_HIT_SLOP, STAGE_STEPPER_HIT_SLOP } from "./StageProgress.variants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+function fillFor(state, palette) {
+  if (state === "active") return palette.activeFill;
+  return state === "completed" ? palette.completedFill : palette.upcomingFill;
+}
+function textFor(state, palette) {
+  if (state === "active") return palette.activeText;
+  return state === "completed" ? palette.completedText : palette.upcomingText;
+}
+const StagePressable = /*#__PURE__*/memo(function StagePressable({
+  disabled,
+  a11yLabel,
+  a11yState,
+  hitSlop,
+  focusRingStyle,
+  focusRingTestID,
+  focused,
+  onPress,
+  onFocus,
+  onBlur,
+  children
+}) {
+  const theme = useTheme();
+  const press = usePressState(disabled);
+  const androidRipple = useMemo(() => {
+    if (Platform.OS !== "android" || disabled) return undefined;
+    return {
+      color: rippleColor(theme.mode),
+      borderless: true
+    };
+  }, [theme.mode, disabled]);
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
+    accessibilityRole: "button",
+    accessibilityLabel: a11yLabel,
+    "aria-current": a11yState["aria-current"],
+    accessibilityState: a11yState.accessibilityState,
+    "aria-disabled": a11yState["aria-disabled"],
+    hitSlop: hitSlop,
+    android_ripple: androidRipple,
+    onPress: onPress,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onLayout: press.onLayout,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    style: press.animatedStyle,
+    children: [focused && /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      testID: focusRingTestID,
+      style: focusRingStyle
+    }), children]
+  });
+});
+export const StageProgress = /*#__PURE__*/memo(function StageProgress({
+  stages,
+  value,
+  variant = "pills",
+  readOnly = true,
+  onStagePress,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const palette = resolveStageProgressColors(theme.colors);
+  const activeIndex = resolveActiveStageIndex(stages, value);
+  // Which interactive stage holds keyboard/AT focus — one value, since only one stage can be focused.
+  const [focusedStageId, setFocusedStageId] = useState(null);
+  const handlePress = useCallback((stageId, disabled) => {
+    if (readOnly || disabled || onStagePress === undefined) return;
+    onStagePress(stageId);
+  }, [readOnly, onStagePress]);
+  const content = useMemo(() => {
+    if (variant === "bar") {
+      return stages.map((stage, index) => {
+        const state = resolveStageState(index, activeIndex, true);
+        // No label per segment: the container announces the whole track as one progressbar
+        // (`resolveStageProgressAccessibility`), so a per-segment label would read four times over.
+        return /*#__PURE__*/_jsx(View, {
+          testID: testID ? `${testID}-bar-${stage.id}` : undefined,
+          style: [stageBarStructure(theme), {
+            backgroundColor: fillFor(state, palette)
+          }]
+        }, stage.id);
+      });
+    }
+    if (variant === "stepper") {
+      return stages.map((stage, index) => {
+        const state = resolveStageState(index, activeIndex, true);
+        const node = /*#__PURE__*/_jsxs(View, {
+          style: {
+            alignItems: "center",
+            minWidth: 64
+          },
+          children: [/*#__PURE__*/_jsx(View, {
+            testID: testID ? `${testID}-stepper-${stage.id}` : undefined,
+            style: [stageStepperCircleStructure(theme), theme.elevation.sm, {
+              backgroundColor: fillFor(state, palette)
+            }],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {
+                fontSize: theme.fontSizes.sm,
+                color: textFor(state, palette)
+              }],
+              children: index + 1
+            })
+          }), /*#__PURE__*/_jsx(Text, {
+            numberOfLines: 1,
+            style: [theme.fontStyleForWeight(theme.fontWeights.medium), {
+              fontSize: theme.fontSizes.xs,
+              color: palette.upcomingText,
+              marginTop: theme.space[1]
+            }],
+            children: stage.label
+          })]
+        });
+        const a11yLabel = resolveStageAccessibilityLabel(stage.label, state);
+        const a11yState = resolveStageAccessibilityState(state, stage.disabled);
+        if (readOnly || stage.disabled) return /*#__PURE__*/_jsx(View, {
+          accessible: true,
+          accessibilityLabel: a11yLabel,
+          "aria-current": a11yState["aria-current"],
+          accessibilityState: a11yState.accessibilityState,
+          "aria-disabled": a11yState["aria-disabled"],
+          children: node
+        }, stage.id);
+        return /*#__PURE__*/_jsx(StagePressable, {
+          disabled: false,
+          a11yLabel: a11yLabel,
+          a11yState: a11yState,
+          hitSlop: STAGE_STEPPER_HIT_SLOP,
+          focused: focusedStageId === stage.id,
+          focusRingTestID: testID ? `${testID}-focus-ring-${stage.id}` : undefined,
+          focusRingStyle: [stageFocusRingStructure(theme, {
+            variant: "stepper"
+          }), {
+            borderColor: theme.colors.border.focus
+          }],
+          onPress: () => handlePress(stage.id, stage.disabled),
+          onFocus: () => setFocusedStageId(stage.id),
+          onBlur: () => setFocusedStageId(current => current === stage.id ? null : current),
+          children: node
+        }, stage.id);
+      });
+    }
+    return stages.map((stage, index) => {
+      const state = resolveStageState(index, activeIndex, true);
+      const pill = /*#__PURE__*/_jsx(View, {
+        testID: testID ? `${testID}-pill-${stage.id}` : undefined,
+        style: [stagePillStructure(theme), theme.elevation.sm, {
+          backgroundColor: fillFor(state, palette)
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          numberOfLines: 1,
+          style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {
+            fontSize: theme.fontSizes.sm,
+            color: textFor(state, palette)
+          }],
+          children: stage.label
+        })
+      });
+      const a11yLabel = resolveStageAccessibilityLabel(stage.label, state);
+      const a11yState = resolveStageAccessibilityState(state, stage.disabled);
+      if (readOnly || stage.disabled) return /*#__PURE__*/_jsx(View, {
+        accessible: true,
+        accessibilityLabel: a11yLabel,
+        "aria-current": a11yState["aria-current"],
+        accessibilityState: a11yState.accessibilityState,
+        "aria-disabled": a11yState["aria-disabled"],
+        children: pill
+      }, stage.id);
+      return /*#__PURE__*/_jsx(StagePressable, {
+        disabled: false,
+        a11yLabel: a11yLabel,
+        a11yState: a11yState,
+        hitSlop: STAGE_PILL_HIT_SLOP,
+        focused: focusedStageId === stage.id,
+        focusRingTestID: testID ? `${testID}-focus-ring-${stage.id}` : undefined,
+        focusRingStyle: [stageFocusRingStructure(theme, {
+          variant: "pill"
+        }), {
+          borderColor: theme.colors.border.focus
+        }],
+        onPress: () => handlePress(stage.id, stage.disabled),
+        onFocus: () => setFocusedStageId(stage.id),
+        onBlur: () => setFocusedStageId(current => current === stage.id ? null : current),
+        children: pill
+      }, stage.id);
+    });
+  }, [stages, variant, activeIndex, palette, theme, testID, readOnly, handlePress, focusedStageId]);
+
+  // Only the `bar` variant collapses into one announcement — `pills`/`stepper` render real text per
+  // stage, and swallowing it behind a container summary would lose the per-stage labels.
+  const barA11y = variant === "bar" ? resolveStageProgressAccessibility(stages, activeIndex) : null;
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    accessible: barA11y !== null,
+    accessibilityRole: barA11y?.accessibilityRole,
+    "aria-valuemin": barA11y?.["aria-valuemin"],
+    "aria-valuemax": barA11y?.["aria-valuemax"],
+    "aria-valuenow": barA11y?.["aria-valuenow"],
+    accessibilityLabel: barA11y?.accessibilityLabel,
+    style: [stageProgressRowStructure(theme), style],
+    children: content
+  });
+});
+//# sourceMappingURL=StageProgress.js.map

package/lib/module/modules/stage-progress/StageProgress.variants.js

@@ -0,0 +1,169 @@
+"use strict";
+
+import { createThemedVariants } from "../../core/style/index.js";
+/** WCAG 2.5.5 target size, the library-wide floor (`Tabs`/`Pagination`/`Reorder` all pin the same 44). */
+export const MIN_TOUCH_TARGET = 44;
+const slopFor = dimension => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - dimension) / 2));
+
+/**
+ * Floor for the pill's height. The pill sizes itself from padding + its label's font metrics, so
+ * without a floor there is no number the touch-target maths can be proven against; pinned here at
+ * the value the natural layout already exceeds (2×`space[2]` + a 14dp line + two hairlines ≈ 35dp),
+ * so it changes no pixel and makes the `hitSlop` guarantee below arithmetic rather than a hope.
+ */
+export const STAGE_PILL_MIN_HEIGHT = 32;
+
+/** Stepper circle diameter. Shared by the structure resolver and the touch-target maths. */
+export const STAGE_STEPPER_CIRCLE = 28;
+
+/**
+ * Vertical-only `hitSlop` for the two pressable stage shapes. Both are wider than 44dp already
+ * (`minWidth` 72 / 64), so widening horizontally would only make adjacent stages' targets overlap.
+ * Height is the short axis, so it is padded to the floor the `Tabs`/`CopyButton` `slopFor` idiom
+ * defines. Applied only where a stage is actually pressable — `readOnly` stages render no
+ * `Pressable` and need no target at all.
+ */
+export const STAGE_PILL_HIT_SLOP = {
+  top: slopFor(STAGE_PILL_MIN_HEIGHT),
+  bottom: slopFor(STAGE_PILL_MIN_HEIGHT)
+};
+export const STAGE_STEPPER_HIT_SLOP = {
+  top: slopFor(STAGE_STEPPER_CIRCLE),
+  bottom: slopFor(STAGE_STEPPER_CIRCLE)
+};
+export function resolveStageState(index, activeIndex, markCompleted) {
+  if (index === activeIndex) return "active";
+  if (markCompleted && activeIndex > -1 && index < activeIndex) return "completed";
+  return "upcoming";
+}
+export function resolveActiveStageIndex(stages, value) {
+  return stages.findIndex(s => s.id === value);
+}
+const STATE_SUFFIX = {
+  completed: "completed",
+  active: "current stage",
+  upcoming: "not started"
+};
+
+/**
+ * The stage's spoken name. The suffix is the whole point (WCAG 1.4.1): fill colour is the ONLY
+ * thing that separates a completed stage from an upcoming one on screen, so without it a screen
+ * reader hears four identical labels and learns nothing about progress. The state props alone
+ * cannot carry it — there is no "completed" flag, only `selected`, which is the active stage.
+ */
+export function resolveStageAccessibilityLabel(label, state) {
+  return `${label}, ${STATE_SUFFIX[state]}`;
+}
+/**
+ * Flat `aria-current` for web + explicit `accessibilityState` for native — see the field comments
+ * above for why this pair (not a single flat prop) is required here specifically.
+ */
+export function resolveStageAccessibilityState(state, disabled) {
+  const active = state === "active";
+  return {
+    "aria-current": active ? "step" : undefined,
+    accessibilityState: {
+      selected: active
+    },
+    "aria-disabled": disabled === true
+  };
+}
+/**
+ * ONE summary announcement for the whole track — "Stage 2 of 4: Review" — the same collapsing idiom
+ * (and the same shape) `resolveStepperAccessibility` uses. This is what the `bar` variant depends
+ * on: it renders nothing but coloured rectangles, with no text anywhere, so without a label on the
+ * container a screen-reader user gets literally nothing from the component.
+ */
+export function resolveStageProgressAccessibility(stages, activeIndex) {
+  const activeLabel = stages[activeIndex]?.label;
+  const ordinal = activeIndex < 0 ? 0 : activeIndex + 1;
+  const summary = `Stage ${ordinal} of ${stages.length}` + (activeLabel === undefined ? "" : `: ${activeLabel}`);
+  return {
+    accessibilityRole: "progressbar",
+    "aria-valuemin": 0,
+    "aria-valuemax": Math.max(stages.length - 1, 0),
+    "aria-valuenow": Math.max(activeIndex, 0),
+    accessibilityLabel: summary
+  };
+}
+export function resolveStageProgressColors(colors) {
+  return {
+    activeFill: colors.accent.solid,
+    activeText: colors.accent.onSolid,
+    completedFill: colors.status.success.subtle,
+    completedText: colors.status.success.text,
+    upcomingFill: colors.bg.sunken,
+    upcomingText: colors.fg.muted
+  };
+}
+export const stageProgressRowStructure = createThemedVariants(theme => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[1],
+    overflow: "hidden"
+  }
+}));
+export const stagePillStructure = createThemedVariants(theme => ({
+  base: {
+    paddingHorizontal: theme.space[3],
+    paddingVertical: theme.space[2],
+    borderRadius: theme.radii.full,
+    borderCurve: "continuous",
+    minWidth: 72,
+    minHeight: STAGE_PILL_MIN_HEIGHT,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+}));
+
+/**
+ * The keyboard/AT focus ring for an interactive stage, drawn INSIDE the stage's own bounds:
+ * `stageProgressRowStructure` clips to `overflow: "hidden"` and spaces stages a single space step
+ * apart, so the gap-outside ring `Button`/`CopyButton` use would be cut off on the first and last
+ * stage and overlap its neighbour everywhere else. Its colour is applied inline over this.
+ */
+export const stageFocusRingStructure = createThemedVariants(theme => ({
+  base: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderWidth: theme.borderWidths.thick
+  },
+  variants: {
+    variant: {
+      pill: {
+        borderRadius: theme.radii.full,
+        borderCurve: "continuous"
+      },
+      stepper: {
+        borderRadius: theme.radii.md,
+        borderCurve: "continuous"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "pill"
+  }
+}));
+export const stageBarStructure = createThemedVariants(theme => ({
+  base: {
+    flex: 1,
+    height: 8,
+    borderRadius: theme.radii.full,
+    borderCurve: "continuous"
+  }
+}));
+export const stageStepperCircleStructure = createThemedVariants(theme => ({
+  base: {
+    width: STAGE_STEPPER_CIRCLE,
+    height: STAGE_STEPPER_CIRCLE,
+    borderRadius: theme.radii.full,
+    borderCurve: "continuous",
+    alignItems: "center",
+    justifyContent: "center"
+  }
+}));
+//# sourceMappingURL=StageProgress.variants.js.map

package/lib/module/modules/stage-progress/index.js

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

package/lib/module/modules/stat-tile/MODULE.md

@@ -23,14 +23,15 @@ chip. Tappable when `onPress` is set; shows a `Skeleton` in place of the value w
 | `icon` | `ReactNode` | — | Rendered inside a tone-tinted chip. Consumer resolves its color via `useThemeColors()`. |
 | `tone` | `accent \| neutral \| success \| warning \| danger \| info` | `accent` | Tints the icon chip only (subtle fills); label/value stay fixed `fg` roles. |
 | `onPress` | `() => void` | — | Makes the tile a `button`-role Pressable with a `bg.sunken` pressed fill (measured — `fg.default` fails AA on `bg.hover` on 4 light brands). |
-| `loading` | `boolean` | `false` | Skeleton in place of the value; announced via `accessibilityState.busy`. |
+| `loading` | `boolean` | `false` | Skeleton in place of the value; announced via `aria-busy` (flat, not `accessibilityState` — see Accessibility). |
 | `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
 | `testID` | `string` | — | Also derives `-icon` / `-skeleton` sub-ids. |
 
 ## Accessibility
 
 - The tile is ONE accessible node: role `button` (pressable) or `text`, label `"label, value"`
-  (just `label` while loading, with `busy: true`).
+  (just `label` while loading, with `aria-busy={true}`). Flat `aria-busy`, not
+  `accessibilityState={{ busy }}` — react-native-web 0.21.2 forwards only the flat form to the DOM.
 - Label (`fg.muted`) and value (`fg.default`) are measured ≥ 4.5:1 on `bg.raised` for all
   8 brands × both modes (`StatTile.test.ts`).
 
@@ -42,3 +43,11 @@ chip. Tappable when `onPress` is set; shows a `Skeleton` in place of the value w
 ## Performance
 
 Wrapped in `React.memo`; the Pressable style function is `useCallback`'d.
+
+## Modernization (v1.0.7)
+
+- 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.