pixelize-native-library 1.2.1 → 1.3.0

package/lib/module/modules/select/Select.js

@@ -5,22 +5,23 @@
  */
 
 import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { Animated, Modal, Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { Modal, Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import Reanimated, { useAnimatedStyle } from "react-native-reanimated";
 import { focusItemProps, useDismissOnEscape, useFocusTrap, useRovingKeys, useSpaceActivation } from "../../core/a11y/keyboard";
 import { Icon } from "../../core/icon/index.js";
 import { VirtualList } from "../../core/list/index.js";
-import { useMotion, usePressMotion, useReveal } from "../../core/motion/index.js";
+import { renderNodeSlot } from "../../core/slot/index.js";
+import { MOTION_TRANSFORM, useMotion, useAnimatedValue, usePressMotion, useReveal } from "../../core/motion/index.js";
 import { elevation, floatingBackground, floatingSurfaceStyle, highlight } from "../../theme/platform/index.js";
 import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { elevation as elevationTokens } from "../../theme/tokens/primitives/index.js";
 import { withAlpha } from "../../core/gradient/index.js";
 import { useTheme } from "../../theme/hooks.js";
-import { ModalPortalContext } from "../modal/ModalPortalContext.js";
-import { renderWebPortal } from "../modal/renderWebPortal";
+import { ModalPortalContext, renderWebPortal } from "../../core/overlay/index.js";
 import { resolveSelectAccessibility, resolveSelectOptionLabelColor, resolveSelectRowColors, resolveSelectTriggerColors, SELECT_LISTBOX_ROLE, SELECT_OPTION_ROLE, SELECT_ROW_ICON_SIZE, SELECT_ROW_MIN_HEIGHT, SELECT_SIZES, selectOverlayStructure, selectRowLeadingStructure, selectRowStructure, selectSheetStructure, selectTriggerStructure, selectTriggerValueStructure } from "./Select.variants.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const ICON_STROKE = 2;
-const BACKDROP_SCRIM = "#00000099";
+const BACKDROP_SCRIM = withAlpha("#000000", MOTION_TRANSFORM.scrimOpacity);
 const SelectOptionRow = /*#__PURE__*/memo(function SelectOptionRow({
   option,
   selected,
@@ -49,19 +50,18 @@ const SelectOptionRow = /*#__PURE__*/memo(function SelectOptionRow({
 
   // `option` is not `button`, so RNW never presses on Space — see `core/a11y/keyboard.web.ts`.
   useSpaceActivation(rowRef, handlePress);
-  const checkOpacity = useRef(new Animated.Value(selected ? 1 : 0)).current;
+  const checkOpacity = useAnimatedValue(selected ? 1 : 0);
   const skipFirst = useRef(true);
   const running = useRef(null);
   useEffect(() => {
     running.current?.stop();
-    // A row scrolled into view already-selected must snap, never fade.
     if (skipFirst.current) {
       skipFirst.current = false;
-      checkOpacity.setValue(selected ? 1 : 0);
+      checkOpacity.value = selected ? 1 : 0;
       return;
     }
     if (!motion.enabled) {
-      checkOpacity.setValue(selected ? 1 : 0);
+      checkOpacity.value = selected ? 1 : 0;
       return;
     }
     running.current = motion.timing(checkOpacity, selected ? 1 : 0, {
@@ -71,6 +71,9 @@ const SelectOptionRow = /*#__PURE__*/memo(function SelectOptionRow({
     return () => running.current?.stop();
   }, [selected, motion, checkOpacity]);
   useEffect(() => () => running.current?.stop(), []);
+  const checkStyle = useAnimatedStyle(() => ({
+    opacity: checkOpacity.value
+  }));
   const rowStructure = useMemo(() => selectRowStructure(theme), [theme]);
   const leadingStructure = useMemo(() => selectRowLeadingStructure(theme), [theme]);
   const rowStyle = useCallback(({
@@ -94,21 +97,19 @@ const SelectOptionRow = /*#__PURE__*/memo(function SelectOptionRow({
     onPressOut: press.onPressOut,
     android_ripple: androidRipple,
     style: rowStyle,
-    children: /*#__PURE__*/_jsxs(Animated.View, {
+    children: /*#__PURE__*/_jsxs(Reanimated.View, {
       testID: testID ? `${testID}-option-${option.value}-content` : undefined,
       style: [rowStructure, press.style],
       children: [option.leading !== undefined && /*#__PURE__*/_jsx(View, {
         style: leadingStructure,
-        children: option.leading
+        children: renderNodeSlot(option.leading, labelStyle)
       }), /*#__PURE__*/_jsx(Text, {
         numberOfLines: 1,
         style: labelStyle,
         children: option.label
-      }), selected && /*#__PURE__*/_jsx(Animated.View, {
+      }), selected && /*#__PURE__*/_jsx(Reanimated.View, {
         testID: testID ? `${testID}-option-${option.value}-check` : undefined,
-        style: {
-          opacity: checkOpacity
-        },
+        style: checkStyle,
         children: /*#__PURE__*/_jsx(Icon, {
           name: "check",
           size: SELECT_ROW_ICON_SIZE,
@@ -125,6 +126,8 @@ export const Select = /*#__PURE__*/memo(function Select({
   onValueChange,
   placeholder,
   label,
+  status = "default",
+  errorText,
   disabled = false,
   size = "md",
   containerStyle,
@@ -193,10 +196,10 @@ export const Select = /*#__PURE__*/memo(function Select({
     size
   }), {
     backgroundColor: focused || open ? withAlpha(theme.colors.accent.solid, 0.04) : triggerColors.background,
-    borderColor: triggerColors.border,
-    borderWidth: focused || open ? 2 : theme.borderWidths.thin,
+    borderColor: status === "error" ? theme.colors.status.danger.solid : triggerColors.border,
+    borderWidth: focused || open || status === "error" ? 2 : theme.borderWidths.thin,
     overflow: "hidden"
-  }, disabled && styles.dimmed], [theme, size, triggerColors, disabled, focused, open]);
+  }, disabled && styles.dimmed], [theme, size, triggerColors, disabled, focused, open, status]);
   const valueStructure = useMemo(() => selectTriggerValueStructure(theme), [theme]);
   const overlayStructure = useMemo(() => selectOverlayStructure(theme), [theme]);
   const floatingStyle = useMemo(() => {
@@ -233,9 +236,10 @@ export const Select = /*#__PURE__*/memo(function Select({
       style: styles.backdrop,
       onPress: closeMenu
     }), /*#__PURE__*/_jsx(View, {
-      style: overlayStructure,
-      pointerEvents: "box-none",
-      children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [overlayStructure, {
+        pointerEvents: 'box-none'
+      }],
+      children: /*#__PURE__*/_jsx(Reanimated.View, {
         ref: sheetRef,
         style: [sheetStyle, reveal.style],
         children: /*#__PURE__*/_jsx(VirtualList, {
@@ -249,8 +253,9 @@ export const Select = /*#__PURE__*/memo(function Select({
     })]
   }) : null;
   const menu = Platform.OS === "web" && portalContainer != null ? open ? renderWebPortal(/*#__PURE__*/_jsx(View, {
-    style: StyleSheet.absoluteFill,
-    pointerEvents: "box-none",
+    style: [StyleSheet.absoluteFill, {
+      pointerEvents: 'box-none'
+    }],
     children: sheet
   }), portalContainer) : null : /*#__PURE__*/_jsx(Modal, {
     visible: open,
@@ -271,6 +276,7 @@ export const Select = /*#__PURE__*/memo(function Select({
       accessibilityRole: a11y.accessibilityRole,
       accessibilityLabel: accessibleName,
       "aria-disabled": a11y["aria-disabled"],
+      "aria-invalid": status === "error" ? true : undefined,
       "aria-expanded": a11y["aria-expanded"],
       disabled: a11y.disabled,
       onPress: openMenu,
@@ -281,7 +287,7 @@ export const Select = /*#__PURE__*/memo(function Select({
       style: triggerStyle,
       children: [/*#__PURE__*/_jsxs(View, {
         style: valueStructure,
-        children: [selectedOption?.leading, /*#__PURE__*/_jsx(Text, {
+        children: [renderNodeSlot(selectedOption?.leading, valueTextStyle), /*#__PURE__*/_jsx(Text, {
           numberOfLines: 1,
           style: valueTextStyle,
           children: displayText
@@ -292,7 +298,14 @@ export const Select = /*#__PURE__*/memo(function Select({
         color: triggerColors.icon,
         strokeWidth: ICON_STROKE
       })]
-    }), menu]
+    }), status === "error" && errorText ? /*#__PURE__*/_jsx(Text, {
+      style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
+        fontSize: theme.fontSizes.xs,
+        color: theme.colors.status.danger.solid,
+        marginTop: theme.space[1]
+      }],
+      children: errorText
+    }) : null, menu]
   });
 });
 const styles = StyleSheet.create({

package/lib/module/modules/select/Select.variants.js

@@ -13,6 +13,7 @@
  * directly (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
  */
 
+import { MIN_TOUCH_TARGET, slopFor } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants } from "../../core/style/index.js";
 /**
  * The option list's container role. RN 0.86's role unions have no `listbox` — both `Role` and
@@ -30,10 +31,7 @@ export const SELECT_LISTBOX_ROLE = "listbox";
  * `option` either.
  */
 export const SELECT_OPTION_ROLE = "option";
-
-/** Same touch-target floor as Button (44dp — Apple HIG minimum, WCAG 2.5.5 AAA). */
-export const MIN_TOUCH_TARGET = 44;
-const slopFor = height => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - height) / 2));
+export { MIN_TOUCH_TARGET, slopFor };
 export const SELECT_SIZES = {
   sm: {
     height: 44,
@@ -167,11 +165,12 @@ export const selectOverlayStructure = createThemedVariants(theme => ({
     paddingHorizontal: theme.space[6]
   }
 }));
+
+// No vertical padding — rows must tile edge-to-edge so the sheet's own fill never shows through.
 export const selectSheetStructure = createThemedVariants(theme => ({
   base: {
     borderRadius: theme.radii.lg,
     borderCurve: "continuous",
-    paddingVertical: theme.space[2],
     maxHeight: 320
   }
 }));

package/lib/module/modules/select/SelectProps.js

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

package/lib/module/modules/setting-row/MODULE.md

@@ -0,0 +1,8 @@
+# setting-row/ — a settings line with a title and a trailing control
+
+Settings line: title + optional description left, arbitrary `control` right.
+
+## Exports
+
+- `SettingRow` — `title` (required), `description`, `control` (required `ReactNode`, trailing
+  edge), `isDanger` (danger ink for destructive zones), `style` (layout-only, last), `testID`

package/lib/module/modules/setting-row/SettingRow.js

@@ -0,0 +1,50 @@
+"use strict";
+
+import { memo, useMemo } from "react";
+import { View } from "react-native";
+import { renderNodeSlot } from "../../core/slot/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { Text } from "../text/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SettingRow = /*#__PURE__*/memo(function SettingRow({
+  title,
+  description,
+  control,
+  isDanger = false,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const rowStyle = useMemo(() => ({
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.space[3],
+    paddingVertical: theme.space[3],
+    minHeight: 56
+  }), [theme]);
+  const controlSlotStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    fontSize: theme.fontSizes.md,
+    color: theme.colors.fg.default
+  }], [theme]);
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    style: [rowStyle, style],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: {
+        flex: 1,
+        gap: theme.space[1]
+      },
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "body-sm",
+        color: isDanger ? "danger" : "default",
+        children: title
+      }), description ? /*#__PURE__*/_jsx(Text, {
+        variant: "caption",
+        color: "muted",
+        children: description
+      }) : null]
+    }), renderNodeSlot(control, controlSlotStyle)]
+  });
+});
+//# sourceMappingURL=SettingRow.js.map

package/lib/module/modules/setting-row/SettingRowProps.js

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

package/lib/module/modules/setting-row/index.js

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

package/lib/module/modules/settings-section/MODULE.md

@@ -0,0 +1,7 @@
+# settings-section/ — a grouped settings block with an optional title
+
+Grouped settings block with optional section title. Compose with `setting-row`.
+
+## Exports
+
+- `SettingsSection` — `title` (optional), `children` (required), `style` (layout-only, last), `testID`

package/lib/module/modules/settings-section/SettingsSection.js

@@ -0,0 +1,37 @@
+"use strict";
+
+import { memo, useMemo } from "react";
+import { View } from "react-native";
+import { renderNodeSlot } from "../../core/slot/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { Text } from "../text/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SettingsSection = /*#__PURE__*/memo(function SettingsSection({
+  title,
+  children,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const sectionStyle = useMemo(() => ({
+    gap: theme.space[1],
+    marginBottom: theme.space[4]
+  }), [theme]);
+  const childrenSlotStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    color: theme.colors.fg.default,
+    fontSize: theme.fontSizes.md
+  }], [theme]);
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    style: [sectionStyle, style],
+    children: [title ? /*#__PURE__*/_jsx(Text, {
+      variant: "overline",
+      color: "muted",
+      style: {
+        marginBottom: theme.space[2]
+      },
+      children: title
+    }) : null, renderNodeSlot(children, childrenSlotStyle)]
+  });
+});
+//# sourceMappingURL=SettingsSection.js.map

package/lib/module/modules/settings-section/SettingsSectionProps.js

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

package/lib/module/modules/settings-section/index.js

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

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

@@ -27,7 +27,8 @@ neutral fills. It takes no children and no interaction; it IS its own size, whic
 | `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
 | `testID` | `string` | — | The shimmer band (when mounted) also gets `${testID}-shimmer`. |
 
-No `tone`/`color` prop: a skeleton has exactly one neutral appearance (`resolveSkeletonColors`),
+No `tone`/`color` prop: a skeleton has exactly one neutral appearance (`resolveSkeletonColors` from
+`bg.sunken` / `bg.skeletonShimmer` roles; shimmer band via `core/gradient/ShimmerGradientFill`),
 the same reasoning as `Avatar`'s and `Divider`'s colour resolvers — there is nothing for an app to
 widen.
 

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

@@ -8,7 +8,8 @@ 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 { useTheme } from "../../theme/hooks.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({
@@ -21,13 +22,14 @@ export const Skeleton = /*#__PURE__*/memo(function Skeleton({
   testID
 }) {
   const theme = useTheme();
+  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.palette), [theme.palette]);
+  const colors = useMemo(() => resolveSkeletonColors(roleColors), [roleColors]);
   const shimmer = !reducedMotion;
   const bandWidth = size.width * SKELETON_BAND_WIDTH_RATIO;
   useEffect(() => {
@@ -57,11 +59,10 @@ export const Skeleton = /*#__PURE__*/memo(function Skeleton({
       translateX: translateX.value
     }]
   }));
-  const highlightStaticStyle = useMemo(() => ({
+  const bandSizeStyle = useMemo(() => ({
     width: bandWidth,
-    height: size.height,
-    backgroundColor: colors.highlight
-  }), [bandWidth, size.height, colors.highlight]);
+    height: size.height
+  }), [bandWidth, size.height]);
   return /*#__PURE__*/_jsx(Animated.View, {
     testID: testID,
     accessible: a11y.accessible,
@@ -72,8 +73,13 @@ export const Skeleton = /*#__PURE__*/memo(function Skeleton({
     style: rootStyle,
     children: shimmer && /*#__PURE__*/_jsx(Animated.View, {
       testID: testID === undefined ? undefined : `${testID}-shimmer`,
-      pointerEvents: "none",
-      style: [styles.band, highlightStaticStyle, bandStyle]
+      style: [styles.band, bandSizeStyle, bandStyle, {
+        pointerEvents: 'none'
+      }],
+      children: /*#__PURE__*/_jsx(ShimmerGradientFill, {
+        base: colors.base,
+        highlight: colors.highlight
+      })
     })
   });
 });

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

@@ -40,18 +40,13 @@ export function resolveSkeletonSize(shape, width, height) {
     height: height ?? fallback.height
   };
 }
-/** Neutral ramp step 3 (base) and step 5 (highlight band) on the gray ramp. */
-export function resolveSkeletonColors(palette) {
+/** Sunken base + skeleton-only shimmer highlight (not shared `bg.hover`). */
+export function resolveSkeletonColors(colors) {
   return {
-    base: palette.gray[300],
-    highlight: palette.gray[500]
+    base: colors.bg.sunken,
+    highlight: colors.bg.skeletonShimmer
   };
 }
-
-/** @deprecated Use palette-based resolver — kept for tests importing RoleColors. */
-export function resolveSkeletonColorsFromRoles(_colors, palette) {
-  return resolveSkeletonColors(palette);
-}
 export function resolveSkeletonAccessibility(input) {
   const hasLabel = input.accessibilityLabel !== undefined && input.accessibilityLabel.length > 0;
   return {

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`.

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

@@ -188,19 +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.md + FOCUS_RING_GAP + FOCUS_RING_WIDTH,
-        borderCurve: "continuous"
+        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`,
@@ -210,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
@@ -218,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. |
+| `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
 
@@ -40,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)