pixelize-native-library 1.2.0 → 1.3.0

package/lib/module/modules/more-items/MoreItems.js

@@ -5,13 +5,16 @@
  */
 
 import { memo, useCallback, useMemo, useState } from "react";
-import { Animated, Modal, Pressable, StyleSheet, Text, View } from "react-native";
+import { Modal, Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import Reanimated from "react-native-reanimated";
 import { VirtualList } from "../../core/list/index.js";
-import { useEnterExit, usePressMotion } from "../../core/motion/index.js";
+import { withAlpha } from "../../core/gradient/index.js";
+import { MOTION_TRANSFORM, useEnterExit, usePressMotion } from "../../core/motion/index.js";
 import { useTheme } from "../../theme/hooks.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { moreItemsBadgeStructure, moreItemsDotStructure, moreItemsOverlayStructure, moreItemsRowStructure, moreItemsSheetStructure, moreItemsTriggerContentStructure, moreItemsTriggerStructure, resolveMoreItemsCount, resolveMoreItemsDotColor } from "./MoreItems.variants.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const BACKDROP = "#00000080";
+const BACKDROP = withAlpha("#000000", MOTION_TRANSFORM.scrimOpacity);
 const MoreItemsRow = /*#__PURE__*/memo(function MoreItemsRow({
   item,
   theme,
@@ -72,6 +75,10 @@ export const MoreItems = /*#__PURE__*/memo(function MoreItems({
     backgroundColor: theme.colors.accent.subtle
   }], [theme]);
   const overlayStructure = useMemo(() => moreItemsOverlayStructure(theme), [theme]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
   const sheetStyle = useMemo(() => [moreItemsSheetStructure(theme), {
     backgroundColor: theme.colors.bg.surface
   }], [theme]);
@@ -102,8 +109,9 @@ export const MoreItems = /*#__PURE__*/memo(function MoreItems({
       onPress: openSheet,
       onPressIn: press.onPressIn,
       onPressOut: press.onPressOut,
+      android_ripple: androidRipple,
       style: triggerStyle,
-      children: /*#__PURE__*/_jsxs(Animated.View, {
+      children: /*#__PURE__*/_jsxs(Reanimated.View, {
         style: [triggerContentStructure, press.style],
         children: [triggerText !== undefined && /*#__PURE__*/_jsx(Text, {
           numberOfLines: 1,
@@ -131,9 +139,10 @@ export const MoreItems = /*#__PURE__*/memo(function MoreItems({
           style: styles.backdrop
         })
       }), /*#__PURE__*/_jsx(View, {
-        style: overlayStructure,
-        pointerEvents: "box-none",
-        children: /*#__PURE__*/_jsx(Animated.View, {
+        style: [overlayStructure, {
+          pointerEvents: 'box-none'
+        }],
+        children: /*#__PURE__*/_jsx(Reanimated.View, {
           testID: testID ? `${testID}-sheet` : undefined
           // The modal-semantics pair every other overlay in this library gives its panel, plus a
           // name: the sheet had neither, so VoiceOver could wander into the row behind it.

package/lib/module/modules/more-items/MoreItems.variants.js

@@ -1,7 +1,9 @@
 "use strict";
 
+import { MIN_TOUCH_TARGET } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants } from "../../core/style/index.js";
 import { resolveBadgeTone } from "../badge/Badge.variants.js";
+export { MIN_TOUCH_TARGET };
 export function resolveMoreItemsCount(moreCount, itemsLength) {
   return moreCount ?? itemsLength;
 }
@@ -18,7 +20,6 @@ export const MORE_ITEMS_SHEET_MAX_HEIGHT = 280;
  * neighbouring target to overlap, and a slop-expanded rectangle would still leave a ~22dp visual
  * control that misses under an unsteady finger.
  */
-export const MIN_TOUCH_TARGET = 44;
 export const moreItemsTriggerStructure = createThemedVariants(_theme => ({
   base: {
     maxWidth: 250,
@@ -48,7 +49,8 @@ export const moreItemsDotStructure = createThemedVariants(theme => ({
   base: {
     width: MORE_ITEMS_DOT_SIZE,
     height: MORE_ITEMS_DOT_SIZE,
-    borderRadius: theme.radii.full
+    borderRadius: theme.radii.full,
+    borderCurve: "continuous"
   }
 }));
 export const moreItemsOverlayStructure = createThemedVariants(theme => ({
@@ -61,6 +63,7 @@ export const moreItemsOverlayStructure = createThemedVariants(theme => ({
 export const moreItemsSheetStructure = createThemedVariants(theme => ({
   base: {
     borderRadius: theme.radii.lg,
+    borderCurve: "continuous",
     padding: theme.space[3],
     maxHeight: MORE_ITEMS_SHEET_MAX_HEIGHT
   }
@@ -71,6 +74,7 @@ export const moreItemsBadgeStructure = createThemedVariants(theme => ({
     paddingHorizontal: theme.space[2],
     paddingVertical: 2,
     borderRadius: theme.radii.full,
+    borderCurve: "continuous",
     fontSize: theme.fontSizes.xs
   }
 }));

package/lib/module/modules/more-items/MoreItemsProps.js

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

package/lib/module/modules/multi-select/MODULE.md

@@ -35,6 +35,8 @@ context + a stateless helper with no React-tree footprint of its own, not a depe
 | `onValuesChange` | `(values: string[]) => void` | — | Required. Fired immediately on row press with the next array — no separate Apply/Cancel. |
 | `placeholder` | `string` | — | Shown when `values` is empty. |
 | `label` | `string` | — | Field label above the trigger; also folded into its accessible name. |
+| `status` | `InputStatus` (`Input.variants`) | `default` | `"error"` swaps the trigger border to `status.danger.solid` at `2`dp and sets `aria-invalid`. |
+| `errorText` | `string` | — | Rendered under the trigger, only while `status === "error"`. |
 | `disabled` | `boolean` | `false` | Blocks opening the sheet; dimmed like Select's disabled state. |
 | `size` | `sm \| md \| lg` | `md` | 32 / 40 / 48 dp; short sizes reach 44 via `hitSlop`. |
 | `containerStyle` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
@@ -67,6 +69,8 @@ caller-configurable.
 - Each option row is `accessibilityRole="checkbox"` with flat `aria-checked`, toggled immediately on
   press — the indicator box (outline when unchecked, `accent.solid` fill + "check" glyph when
   checked) is the sighted echo of the same state, never the only signal.
+- **Android** — the trigger (gated `!disabled`), the header close button and every option row carry
+  `android_ripple` (`borderless: false`); trigger and close button clip it with `overflow: "hidden"`.
 - The header close button is `accessibilityRole="button"` with a fixed `accessibilityLabel="Close"`
   (icon-only, hardcoded — not a caller-configurable slot); its icon shares the row label's colour
   pairing, already measured ≥ 3:1 (in practice ≥ 4.5:1) on the sheet fill.
@@ -84,8 +88,7 @@ caller-configurable.
 2. **Pure, testable resolvers** in `MultiSelect.variants.ts` — the WCAG + behaviour contract is
    unit-tested against real palettes, never eyeballed.
 3. **Row indicator colours mirror `Checkbox`'s role mapping** (`border.interactive` /
-   `accent.solid` / `accent.onSolid`) — duplicated locally, not imported: modules never import
-   across `src/modules/*`.
+   `accent.solid` / `accent.onSolid`) — duplicated locally rather than imported from `checkbox/`.
 4. **Closed-ish surface** — `size` is a closed union; `options`/`values`/`onValuesChange` are the
    data contract a multi-select inherently needs, not a colour escape hatch. `containerStyle` is the
    one `style` exception (a component wrapping a native primitive's outer box), not a second `style` prop.
@@ -160,7 +163,3 @@ Via `core/motion` only — `opacity`/`transform`, native driver, all reduce-moti
   why `useEnterExit`'s `mounted` gate was dropped; `Select`/`Combobox` use the identical gate.
 - No chip/token UI on the trigger, so there is nothing to animate there (see Known gaps).
 
-## 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.

package/lib/module/modules/multi-select/MultiSelect.js

@@ -5,18 +5,21 @@
  */
 
 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 { withAlpha } from "../../core/gradient/index.js";
+import { MOTION_TRANSFORM, useMotion, useAnimatedValue, usePressMotion, useReveal } from "../../core/motion/index.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.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 { MULTI_SELECT_CLOSE_BUTTON_HIT_SLOP, MULTI_SELECT_CLOSE_ICON_SIZE, MULTI_SELECT_LISTBOX_ROLE, MULTI_SELECT_ROW_ICON_SIZE, MULTI_SELECT_ROW_MIN_HEIGHT, MULTI_SELECT_SIZES, multiSelectCloseButtonStructure, multiSelectHeaderStructure, multiSelectOverlayStructure, multiSelectRowIndicatorStructure, multiSelectRowLeadingStructure, multiSelectRowStructure, multiSelectSheetStructure, multiSelectTriggerStructure, resolveMultiSelectAccessibility, resolveMultiSelectRowColors, resolveMultiSelectTriggerColors } from "./MultiSelect.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 MultiSelectOptionRow = /*#__PURE__*/memo(function MultiSelectOptionRow({
   option,
   checked,
@@ -41,19 +44,18 @@ const MultiSelectOptionRow = /*#__PURE__*/memo(function MultiSelectOptionRow({
 
   // `checkbox` is not `button`, so RNW never presses on Space — see `core/a11y/keyboard.web.ts`.
   useSpaceActivation(rowRef, handlePress);
-  const checkOpacity = useRef(new Animated.Value(checked ? 1 : 0)).current;
+  const checkOpacity = useAnimatedValue(checked ? 1 : 0);
   const skipFirst = useRef(true);
   const running = useRef(null);
   useEffect(() => {
     running.current?.stop();
-    // A row scrolled into view already-checked must snap, never fade.
     if (skipFirst.current) {
       skipFirst.current = false;
-      checkOpacity.setValue(checked ? 1 : 0);
+      checkOpacity.value = checked ? 1 : 0;
       return;
     }
     if (!motion.enabled) {
-      checkOpacity.setValue(checked ? 1 : 0);
+      checkOpacity.value = checked ? 1 : 0;
       return;
     }
     running.current = motion.timing(checkOpacity, checked ? 1 : 0, {
@@ -63,6 +65,9 @@ const MultiSelectOptionRow = /*#__PURE__*/memo(function MultiSelectOptionRow({
     return () => running.current?.stop();
   }, [checked, motion, checkOpacity]);
   useEffect(() => () => running.current?.stop(), []);
+  const checkStyle = useAnimatedStyle(() => ({
+    opacity: checkOpacity.value
+  }));
   const rowStructure = useMemo(() => multiSelectRowStructure(theme), [theme]);
   const indicatorStructure = useMemo(() => multiSelectRowIndicatorStructure(theme), [theme]);
   const leadingStructure = useMemo(() => multiSelectRowLeadingStructure(theme), [theme]);
@@ -71,6 +76,10 @@ const MultiSelectOptionRow = /*#__PURE__*/memo(function MultiSelectOptionRow({
   }) => ({
     backgroundColor: pressed ? rowColors.pressedRow : rowColors.background
   }), [rowColors]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
   const indicatorStyle = useMemo(() => [indicatorStructure, {
     borderColor: checked ? rowColors.indicatorFill : rowColors.indicatorBorder,
     backgroundColor: checked ? rowColors.indicatorFill : "transparent"
@@ -89,17 +98,16 @@ const MultiSelectOptionRow = /*#__PURE__*/memo(function MultiSelectOptionRow({
     onPress: handlePress,
     onPressIn: press.onPressIn,
     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: [/*#__PURE__*/_jsx(View, {
         style: indicatorStyle,
-        children: checked && /*#__PURE__*/_jsx(Animated.View, {
+        children: checked && /*#__PURE__*/_jsx(Reanimated.View, {
           testID: testID ? `${testID}-option-${option.value}-check` : undefined,
-          style: {
-            opacity: checkOpacity
-          },
+          style: checkStyle,
           children: /*#__PURE__*/_jsx(Icon, {
             name: "check",
             size: MULTI_SELECT_ROW_ICON_SIZE,
@@ -109,7 +117,7 @@ const MultiSelectOptionRow = /*#__PURE__*/memo(function MultiSelectOptionRow({
         })
       }), option.leading !== undefined && /*#__PURE__*/_jsx(View, {
         style: leadingStructure,
-        children: option.leading
+        children: renderNodeSlot(option.leading, labelStyle)
       }), /*#__PURE__*/_jsx(Text, {
         numberOfLines: 1,
         style: labelStyle,
@@ -124,6 +132,8 @@ export const MultiSelect = /*#__PURE__*/memo(function MultiSelect({
   onValuesChange,
   placeholder,
   label,
+  status = "default",
+  errorText,
   disabled = false,
   size = "md",
   containerStyle,
@@ -203,11 +213,24 @@ export const MultiSelect = /*#__PURE__*/memo(function MultiSelect({
     size
   }), {
     backgroundColor: triggerColors.background,
-    borderColor: triggerColors.border
-  }, disabled && styles.dimmed], [theme, size, triggerColors, disabled]);
+    borderColor: status === "error" ? theme.colors.status.danger.solid : triggerColors.border,
+    borderWidth: status === "error" ? 2 : theme.borderWidths.thin
+  }, {
+    overflow: "hidden"
+  }, disabled && styles.dimmed], [theme, size, triggerColors, disabled, status]);
+  const triggerRipple = useMemo(() => Platform.OS === "android" && !disabled ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [disabled, theme.mode]);
   const overlayStructure = useMemo(() => multiSelectOverlayStructure(theme), [theme]);
   const headerStructure = useMemo(() => multiSelectHeaderStructure(theme), [theme]);
-  const closeButtonStructure = useMemo(() => multiSelectCloseButtonStructure(theme), [theme]);
+  const closeButtonStructure = useMemo(() => [multiSelectCloseButtonStructure(theme), {
+    overflow: "hidden"
+  }], [theme]);
+  const closeButtonRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
   const sheetStyle = useMemo(() => [multiSelectSheetStructure(theme), {
     backgroundColor: theme.colors.bg.surface
   }], [theme]);
@@ -229,9 +252,10 @@ export const MultiSelect = /*#__PURE__*/memo(function MultiSelect({
       style: styles.backdrop,
       onPress: closeMenu
     }), /*#__PURE__*/_jsx(View, {
-      style: overlayStructure,
-      pointerEvents: "box-none",
-      children: /*#__PURE__*/_jsxs(Animated.View, {
+      style: [overlayStructure, {
+        pointerEvents: 'box-none'
+      }],
+      children: /*#__PURE__*/_jsxs(Reanimated.View, {
         ref: sheetRef,
         style: [sheetStyle, reveal.style],
         children: [/*#__PURE__*/_jsx(View, {
@@ -242,6 +266,7 @@ export const MultiSelect = /*#__PURE__*/memo(function MultiSelect({
             accessibilityLabel: "Close",
             onPress: closeMenu,
             hitSlop: MULTI_SELECT_CLOSE_BUTTON_HIT_SLOP,
+            android_ripple: closeButtonRipple,
             style: closeButtonStructure,
             children: /*#__PURE__*/_jsx(Icon, {
               name: "x",
@@ -261,12 +286,15 @@ export const MultiSelect = /*#__PURE__*/memo(function MultiSelect({
     })]
   }) : 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,
     transparent: true,
+    statusBarTranslucent: true,
+    navigationBarTranslucent: true,
     animationType: "none",
     onRequestClose: closeMenu,
     children: sheet
@@ -281,12 +309,14 @@ export const MultiSelect = /*#__PURE__*/memo(function MultiSelect({
       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,
       onFocus: handleFocus,
       onBlur: handleBlur,
       hitSlop: spec.hitSlop,
+      android_ripple: triggerRipple,
       style: triggerStyle,
       children: [/*#__PURE__*/_jsx(Text, {
         numberOfLines: 1,
@@ -298,7 +328,14 @@ export const MultiSelect = /*#__PURE__*/memo(function MultiSelect({
         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/multi-select/MultiSelect.variants.js

@@ -18,10 +18,12 @@
  * 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";
+export { MIN_TOUCH_TARGET };
+
 /** Same touch-target floor as Button/Select (44dp — Apple HIG minimum, 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 MULTI_SELECT_SIZES = {
   sm: {
     height: 32,
@@ -115,7 +117,8 @@ export const multiSelectTriggerStructure = createThemedVariants(theme => ({
     alignItems: "center",
     justifyContent: "space-between",
     columnGap: theme.space[2],
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     borderWidth: theme.borderWidths.thin
   },
   variants: {
@@ -150,7 +153,8 @@ export const multiSelectOverlayStructure = createThemedVariants(theme => ({
 }));
 export const multiSelectSheetStructure = createThemedVariants(theme => ({
   base: {
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     paddingBottom: theme.space[2],
     maxHeight: 360,
     ...theme.elevation.lg

package/lib/module/modules/multi-select/MultiSelectProps.js

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

package/lib/module/modules/notification-bell/MODULE.md

@@ -0,0 +1,8 @@
+# notification-bell/ — an icon trigger with an unread count badge
+
+Ghost `Button` (bell icon) with an `UnreadBadge` overlay, shown only when `unreadCount > 0`. Panel
+composition stays in the app (`BottomSheet` / `Menu`).
+
+## Exports
+
+- `NotificationBell` — `unreadCount` (`number`, default `0`), `onPress` (required), `style`, `testID`

package/lib/module/modules/notification-bell/NotificationBell.js

@@ -0,0 +1,43 @@
+"use strict";
+
+import { memo } from "react";
+import { View } from "react-native";
+import { Button } from "../button/index.js";
+import { UnreadBadge } from "../unread-badge/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const NotificationBell = /*#__PURE__*/memo(function NotificationBell({
+  unreadCount = 0,
+  onPress,
+  style,
+  testID
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    style: style,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: {
+        position: "relative",
+        alignSelf: "flex-start"
+      },
+      children: [/*#__PURE__*/_jsx(Button, {
+        variant: "ghost",
+        icon: "bell",
+        accessibilityLabel: "Notifications",
+        onPress: onPress,
+        testID: testID ? `${testID}-button` : undefined
+      }), unreadCount > 0 ? /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          top: 4,
+          right: 4,
+          pointerEvents: 'none'
+        },
+        children: /*#__PURE__*/_jsx(UnreadBadge, {
+          count: unreadCount,
+          size: "sm"
+        })
+      }) : null]
+    })
+  });
+});
+//# sourceMappingURL=NotificationBell.js.map

package/lib/module/modules/notification-bell/NotificationBellProps.js

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

package/lib/module/modules/notification-bell/index.js

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

package/lib/module/modules/number-input/MODULE.md

@@ -8,8 +8,8 @@ TWO trailing controls, which doesn't fit Input's single leading/trailing icon sl
 
 | File | Role |
 |------|------|
-| `NumberInput.tsx` | The component. Composition, draft/clamp wiring, a11y, focus ring, stepper buttons. |
-| `NumberInput.variants.ts` | Pure resolvers (`NUMBER_INPUT_SIZES`, `resolveNumberInputStatus`, `resolveNumberInputStepperPressColors`, `resolveNumberInputAccessibility`, `clampNumberInputValue`, `parseNumberInputDraft`, `canDecrementNumberInput`, `canIncrementNumberInput`) + the themed structural resolvers `numberInputStructure` / `numberInputStepperStructure`. No React, no lucide. |
+| `NumberInput.tsx` | The component. Composition, draft/clamp wiring, a11y, focus ring (local `FOCUS_RING_WIDTH`/`FOCUS_RING_GAP` + `stepperFocusRingStyle`), stepper buttons. |
+| `NumberInput.variants.ts` | Pure resolvers (`NUMBER_INPUT_SIZES`, `resolveNumberInputStatus`, `resolveNumberInputStepperPressColors`, `resolveNumberInputAccessibility`, `clampNumberInputValue`, `parseNumberInputDraft`, `canDecrementNumberInput`, `canIncrementNumberInput`) + the themed structural resolvers `numberInputStructure` / `numberInputStepperStructure`. `MIN_TOUCH_TARGET` / `slopFor` from `core/a11y/touchTarget`. No React, no lucide. |
 | `index.ts` | Public surface: `NumberInput`, `NumberInputProps`, the closed unions. No `icon` prop, so `IconName` is not re-exported. |
 | `__tests__/NumberInput.test.ts` | Pure: WCAG contrast (all brands × modes, incl. the stepper pressed-fill) + touch target + clamp/parse/limit + a11y contract. |
 | `__tests__/NumberInput.render.test.tsx` | Render: stepper press, typed input, clamping, disabled/at-limit, the field's and each stepper's own focus ring, the rendered `hitSlop`, `accessibilityValue`, and the increment/decrement accessibility actions. |
@@ -26,7 +26,7 @@ TWO trailing controls, which doesn't fit Input's single leading/trailing icon sl
 | `status` | `default \| error` | `default` | Closed union — a **state**, not a brand `tone` (same reasoning as Input). |
 | `disabled` | `boolean` | `false` | Dims the field; blocks editing and both steppers. |
 | `label` | `string` | — | Rendered above the field; falls back into `accessibilityLabel`. |
-| `errorText` | `string` | — | Shown below the field and folded into the accessible name (`aria-invalid` set) when `status="error"` — same prop name and rule as `Input`/`FormField`. Previously `status="error"` was border-colour only, with no message and no programmatic invalid flag (WCAG 3.3.1 / 1.4.1). |
+| `errorText` | `string` | — | Shown below the field and folded into the accessible name (`aria-invalid` set) when `status="error"` — same prop name and rule as `Input`/`FormField`. |
 | `accessibilityLabel` | `string` | `label` | Overrides the label fallback. |
 | `containerStyle` | `LayoutStyle` | — | The documented exception for a native-primitive wrapper. Outermost, last, once. Never `inputStyle`. |
 | `testID` | `string` | — | Forwarded to the `TextInput`; the steppers get `${testID}-decrement` / `${testID}-increment`. |
@@ -62,11 +62,9 @@ typed values are clamped to range but never snapped to a `step` grid.
   `accessibilityValue`, so object-only would be silently dropped on web. Both forms, one per
   platform. A bound the caller omitted is **left out**, never defaulted to `0` — absent means "no
   floor"/"no ceiling" here.
-  **Corrected claim:** this file previously said the announced text is `String(value)` "verbatim" —
-  false. `value` and the field's own visible `draft` state diverge while typing (e.g. a keystroke
-  that doesn't parse yet, or one that clamps), and the announcement used to speak `value` while the
-  screen showed `draft` — a 4.1.2 failure in itself. The announced text is now `draft`, matching what
-  is actually on screen; `now` stays the raw, unclamped `value` (unlike `Slider`'s clamped `now`).
+  `aria-valuetext` announces the visible `draft`, not `value` — the two diverge while typing (a
+  keystroke that doesn't parse yet, or one that clamps). `now` stays the raw, unclamped `value`
+  (unlike `Slider`'s clamped `now`).
 - **2.5.7 non-pointer alternative** — the field also declares
   `accessibilityActions: [{name:"increment"},{name:"decrement"}]` + `onAccessibilityAction`, reusing
   the same `handleIncrement`/`handleDecrement` (so an at-limit or disabled action is a no-op).
@@ -89,7 +87,8 @@ typed values are clamped to range but never snapped to a `step` grid.
   `fg.default` is already proven ≥ 4.5:1 against `bg.canvas` by the 1.4.3 test above, and contrast is
   symmetric, so the fill clears the 3:1 non-text minimum AND the inverted glyph clears 4.5:1 text
   contrast on it, for free, on every brand × mode — measured directly by its own `it.each` in
-  `NumberInput.test.ts` (not assumed safe by borrowing another component's test).
+  `NumberInput.test.ts` (not assumed safe by borrowing another component's test). Press choreography
+  is `usePressState` scale on the stepper `Pressable`s (background swap still keys off `press.pressed`).
 - **2.4.7 / 2.4.11 focus** — a visible focus ring (`border.focus`, offset a small gap outside the
   control, same geometry/token as Button/Input/Checkbox) appears independently on: the `TextInput`
   (whole-row ring), the decrement `Pressable`, and the increment `Pressable` (each stepper gets its
@@ -109,6 +108,8 @@ typed values are clamped to range but never snapped to a `step` grid.
 - Decrement/increment each carry `accessibilityRole="button"` and their own
   `accessibilityLabel` ("Decrease" / "Increase") plus flat `aria-disabled`, so a screen
   reader announces the control and its at-limit state even though it shows no visible text.
+- **Android** — both steppers carry `android_ripple` (`rippleColor(theme.mode)`, `borderless: false`),
+  gated on the stepper being enabled.
 - A disabled field is exempt from the contrast minimum (WCAG 1.4.3) and dims via `opacity: 0.5`, same
   as Input/Button. An at-limit stepper (value already at `min`/`max`) dims the same way *without*
   double-dimming when the whole field is also `disabled` (the outer dim already covers that case).
@@ -135,8 +136,3 @@ typed values are clamped to range but never snapped to a `step` grid.
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). Same shape as `MultiSelect`: `Icon` gets only primitive props, no `.map()` list, every handler goes to host `Pressable`/`TextInput` — nothing to memoize.
 
-## 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.