pixelize-native-library 1.0.7 → 1.2.1

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

@@ -46,6 +46,14 @@ export const MULTI_SELECT_SIZES = {
 /** Minimum height for an option row — a list item is still an interactive target (WCAG 2.5.8). */
 export const MULTI_SELECT_ROW_MIN_HEIGHT = 44;
 
+/**
+ * The option list's container role. RN 0.86's role unions have no `listbox` — both `Role` and
+ * `AccessibilityRole` jump `list` → `listitem` → `log` — so the widening lives on this ONE audited
+ * line instead of a cast at the call site. It is a type gap, not a runtime one: `react-native-web`
+ * emits the string as the DOM `role` verbatim, and native maps roles it doesn't know to nothing.
+ */
+export const MULTI_SELECT_LISTBOX_ROLE = "listbox";
+
 /** Row checkbox-style indicator box side, in dp. Fixed — independent of the trigger's own `size`,
  *  same reasoning as `Select`'s row "check" glyph. */
 export const MULTI_SELECT_ROW_INDICATOR_SIZE = 20;
@@ -78,7 +86,8 @@ export function resolveMultiSelectRowColors(colors) {
     text: colors.fg.default,
     indicatorBorder: colors.border.interactive,
     indicatorFill: colors.accent.solid,
-    indicatorIcon: colors.accent.onSolid
+    indicatorIcon: colors.accent.onSolid,
+    pressedRow: colors.bg.sunken
   };
 }
 /**
@@ -90,10 +99,8 @@ export function resolveMultiSelectAccessibility(input) {
   const disabled = input.disabled === true;
   return {
     accessibilityRole: "button",
-    accessibilityState: {
-      disabled,
-      expanded: input.open
-    },
+    "aria-disabled": disabled,
+    "aria-expanded": input.open,
     disabled
   };
 }
@@ -108,7 +115,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: {
@@ -143,7 +151,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
@@ -180,6 +189,22 @@ export const multiSelectRowStructure = createThemedVariants(theme => ({
   }
 }));
 
+/**
+ * `MultiSelectOption.leading` is an arbitrary consumer node, so an unconstrained one could make a
+ * row taller than `MULTI_SELECT_ROW_MIN_HEIGHT` and silently falsify the list's `getItemLayout`
+ * offsets. This slot bounds it to the row's own indicator box instead, which is what keeps the
+ * uniform-height fast path true by construction (`core/MODULE.md`: `itemHeight` is uniform-only).
+ */
+export const multiSelectRowLeadingStructure = createThemedVariants(() => ({
+  base: {
+    width: MULTI_SELECT_ROW_INDICATOR_SIZE,
+    height: MULTI_SELECT_ROW_INDICATOR_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden"
+  }
+}));
+
 /** Structural indicator-box styles only — size, radius, border WIDTH. No colours: border/fill
  *  colour is checked-state-driven and applied inline over this, same split as `checkboxBoxStructure`. */
 export const multiSelectRowIndicatorStructure = createThemedVariants(theme => ({

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

@@ -12,7 +12,7 @@ TWO trailing controls, which doesn't fit Input's single leading/trailing icon sl
 | `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. |
 | `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. |
+| `__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. |
 
 ## Props
 
@@ -26,6 +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). |
 | `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`. |
@@ -49,8 +50,29 @@ typed values are clamped to range but never snapped to a `step` grid.
   both stepper `Pressable`s. This only holds because every one of the three carries
   `alignSelf: "stretch"` inside the row (`alignItems: "center"` would otherwise shrink each to its
   intrinsic content height) — the same fix Input's `TextInput` needed, carried forward from the
-  start here (see `NumberInput.render.test.tsx`, which asserts the rendered node, not just the
-  `height + 2·hitSlop` arithmetic).
+  start here. `NumberInput.render.test.tsx` asserts BOTH halves on the rendered nodes: the
+  `alignSelf` of all three, and (per size) their real `hitSlop` prop against
+  `NUMBER_INPUT_SIZES[size].hitSlop` — the `height + 2·hitSlop` arithmetic in `NumberInput.test.ts`
+  proves nothing on its own if a refactor drops the prop off a node.
+- **4.1.2 value semantics** — the `TextInput` carries BOTH `accessibilityValue={{…}}` and flat
+  `aria-valuemin`/`aria-valuemax`/`aria-valuenow`/`aria-valuetext` from
+  `resolveNumberInputAccessibility` — the one deliberate exception to "flat-only" in this family.
+  Verified: RN's `TextInput.js` never destructures ANY `aria-value*` prop (unlike `View`/`Pressable`,
+  which merge it), so flat-only would be silently dropped on native; `react-native-web` never reads
+  `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`).
+- **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).
+  Same reasoning as `Slider`: iOS offers adjust gestures from the trait, Android TalkBack only
+  surfaces actions declared here — without them the +/- controls are reachable *only* as two extra
+  swipe stops. The list is always declared; the handler, not the list, does the gating.
 - **1.4.3** — value text and stepper icon colour (`fg.default`) are measured ≥ 4.5:1 against the
   canvas at rest, for all 8 brands × both modes.
 - **1.4.11** — the resting/focus border (`border.interactive` / `border.focus`) and the error border
@@ -67,19 +89,26 @@ 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
   own ring, rounded only on its outer corner via `stepperFocusRingStyle`). Keyboard/AT focus on a
   stepper no longer relies on a background tint — the ring is the sole focus indicator, exactly the
-  pattern Button/Input/Checkbox use.
+  pattern Button/Input/Checkbox use. Each stepper's ring stays gated on `focused && enabled`, and an
+  at-limit/disabled stepper is therefore made **unfocusable** (`focusable={enabled}`) rather than
+  given a ring: RN's `Pressable` keeps `focusable` true when `disabled`, so on a TV remote it could
+  take focus and show no indicator at all (RNW already excludes it — `tabIndex: -1`). Removing the
+  inert control from the focus order fixes that at the source; painting a ring on a control that does
+  nothing when activated would advertise operability it doesn't have. TalkBack still reaches it (that
+  traversal follows `accessible`, not `focusable`) and still announces its disabled state.
 - **Web** — RNW renders the `TextInput` as a real `<input>`, so `styles.webOutlineReset` (`outlineWidth:
   0`, applied only when `Platform.OS === "web"`, matching Input/Textarea) suppresses the browser's own
   default focus outline on the field, which would otherwise double up visibly with the themed ring
   above. Scoped to the `TextInput` only — the stepper `Pressable`s aren't part of this fix.
 - Decrement/increment each carry `accessibilityRole="button"` and their own
-  `accessibilityLabel` ("Decrease" / "Increase") plus `accessibilityState.disabled`, so a screen
+  `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.
 - 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*
@@ -106,3 +135,9 @@ typed values are clamped to range but never snapped to a `step` grid.
 ## Performance
 
 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.

package/lib/module/modules/number-input/NumberInput.js

@@ -15,13 +15,17 @@
 
 import { memo, useEffect, useState } from "react";
 import { Platform, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
+import Animated from "react-native-reanimated";
 import { Icon } from "../../core/icon/index.js";
-import { useTheme } from "../../theme/index.js";
+import { usePressState } from "../../core/motion/usePressState.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
+import { useTheme } from "../../theme/hooks.js";
 import { canDecrementNumberInput, canIncrementNumberInput, clampNumberInputValue, NUMBER_INPUT_SIZES, numberInputStepperStructure, numberInputStructure, parseNumberInputDraft, resolveNumberInputAccessibility, resolveNumberInputStatus, resolveNumberInputStepperPressColors } from "./NumberInput.variants.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_STROKE = 2;
 const FOCUS_RING_WIDTH = 2;
 const FOCUS_RING_GAP = 2;
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
 /**
  * Same offset-ring geometry/token as the field's own ring (and Button/Input/Checkbox), but rounded
@@ -29,7 +33,7 @@ const FOCUS_RING_GAP = 2;
  * radius split — so the ring doesn't square off past the row's rounded corner.
  */
 function stepperFocusRingStyle(theme, position) {
-  const radius = theme.radii.base + FOCUS_RING_GAP + FOCUS_RING_WIDTH;
+  const radius = theme.radii.md + FOCUS_RING_GAP + FOCUS_RING_WIDTH;
   return {
     position: "absolute",
     top: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
@@ -58,6 +62,7 @@ export const NumberInput = /*#__PURE__*/memo(function NumberInput(props) {
     status = "default",
     disabled = false,
     label,
+    errorText,
     accessibilityLabel,
     containerStyle,
     testID
@@ -76,11 +81,6 @@ export const NumberInput = /*#__PURE__*/memo(function NumberInput(props) {
   const spec = NUMBER_INPUT_SIZES[size];
   const statusColors = resolveNumberInputStatus(theme.colors, status);
   const pressColors = resolveNumberInputStepperPressColors(theme.colors);
-  const a11y = resolveNumberInputAccessibility({
-    label,
-    accessibilityLabel,
-    disabled
-  });
   const decrementEnabled = canDecrementNumberInput({
     value,
     min,
@@ -91,6 +91,19 @@ export const NumberInput = /*#__PURE__*/memo(function NumberInput(props) {
     max,
     disabled
   });
+  const decrementPress = usePressState(!decrementEnabled);
+  const incrementPress = usePressState(!incrementEnabled);
+  const a11y = resolveNumberInputAccessibility({
+    value,
+    min,
+    max,
+    label,
+    accessibilityLabel,
+    disabled,
+    displayText: draft,
+    status,
+    errorText
+  });
   const handleChangeText = raw => {
     setDraft(raw);
     const parsed = parseNumberInputDraft(raw);
@@ -109,6 +122,10 @@ export const NumberInput = /*#__PURE__*/memo(function NumberInput(props) {
     if (!incrementEnabled) return;
     onValueChange(clampNumberInputValue(value + step, min, max));
   };
+  const handleAccessibilityAction = event => {
+    if (event.nativeEvent.actionName === "increment") handleIncrement();
+    if (event.nativeEvent.actionName === "decrement") handleDecrement();
+  };
   return /*#__PURE__*/_jsxs(View, {
     style: containerStyle,
     children: [label !== undefined &&
@@ -141,44 +158,49 @@ export const NumberInput = /*#__PURE__*/memo(function NumberInput(props) {
           bottom: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
           borderWidth: FOCUS_RING_WIDTH,
           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"
         }
-      }), /*#__PURE__*/_jsx(Pressable, {
-        testID: testID ? `${testID}-decrement` : undefined,
-        accessibilityRole: "button",
-        accessibilityLabel: "Decrease",
-        accessibilityState: {
-          disabled: !decrementEnabled
-        },
-        disabled: !decrementEnabled,
-        onPress: handleDecrement,
-        onFocus: () => setDecrementFocused(true),
-        onBlur: () => setDecrementFocused(false),
-        hitSlop: spec.hitSlop,
-        style: ({
-          pressed
-        }) => [numberInputStepperStructure(theme, {
-          size,
-          position: "leading"
-        }), {
-          borderColor: statusColors.border
-        }, pressed && decrementEnabled && {
-          backgroundColor: pressColors.fill
-        }, !disabled && !decrementEnabled && styles.dimmed],
-        children: ({
-          pressed
-        }) => /*#__PURE__*/_jsxs(_Fragment, {
-          children: [decrementFocused && decrementEnabled && /*#__PURE__*/_jsx(View, {
-            pointerEvents: "none",
-            testID: "number-input-decrement-focus-ring",
-            style: stepperFocusRingStyle(theme, "leading")
-          }), /*#__PURE__*/_jsx(Icon, {
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.stepperHost,
+        children: [decrementFocused && decrementEnabled && /*#__PURE__*/_jsx(View, {
+          pointerEvents: "none",
+          testID: "number-input-decrement-focus-ring",
+          style: stepperFocusRingStyle(theme, "leading")
+        }), /*#__PURE__*/_jsx(AnimatedPressable, {
+          testID: testID ? `${testID}-decrement` : undefined,
+          accessibilityRole: "button",
+          accessibilityLabel: "Decrease",
+          "aria-disabled": !decrementEnabled,
+          disabled: !decrementEnabled,
+          focusable: decrementEnabled,
+          onPress: handleDecrement,
+          onPressIn: decrementPress.handlers.onPressIn,
+          onPressOut: decrementPress.handlers.onPressOut,
+          onLayout: decrementPress.onLayout,
+          onFocus: () => setDecrementFocused(true),
+          onBlur: () => setDecrementFocused(false),
+          hitSlop: spec.hitSlop,
+          android_ripple: decrementEnabled && Platform.OS === "android" ? {
+            color: rippleColor(theme.mode),
+            borderless: false
+          } : undefined,
+          style: [numberInputStepperStructure(theme, {
+            size,
+            position: "leading"
+          }), {
+            borderColor: statusColors.border,
+            overflow: "hidden"
+          }, decrementPress.pressed && decrementEnabled && {
+            backgroundColor: pressColors.fill
+          }, decrementPress.animatedStyle, !disabled && !decrementEnabled && styles.dimmed],
+          children: /*#__PURE__*/_jsx(Icon, {
             name: "minus",
             size: spec.iconSize,
-            color: pressed && decrementEnabled ? pressColors.icon : theme.colors.fg.default,
+            color: decrementEnabled && decrementPress.pressed ? pressColors.icon : theme.colors.fg.default,
             strokeWidth: ICON_STROKE
-          })]
-        })
+          })
+        })]
       }), /*#__PURE__*/_jsx(TextInput, {
         testID: testID,
         value: draft,
@@ -186,7 +208,15 @@ export const NumberInput = /*#__PURE__*/memo(function NumberInput(props) {
         keyboardType: "numeric",
         editable: a11y.editable,
         accessibilityLabel: a11y.accessibilityLabel,
-        accessibilityState: a11y.accessibilityState,
+        accessibilityValue: a11y.accessibilityValue,
+        "aria-valuemin": a11y["aria-valuemin"],
+        "aria-valuemax": a11y["aria-valuemax"],
+        "aria-valuenow": a11y["aria-valuenow"],
+        "aria-valuetext": a11y["aria-valuetext"],
+        "aria-disabled": a11y["aria-disabled"],
+        "aria-invalid": a11y["aria-invalid"],
+        accessibilityActions: a11y.accessibilityActions,
+        onAccessibilityAction: handleAccessibilityAction,
         hitSlop: spec.hitSlop,
         onFocus: handleFocus,
         onBlur: handleBlur,
@@ -198,56 +228,69 @@ export const NumberInput = /*#__PURE__*/memo(function NumberInput(props) {
           fontSize: spec.fontSize,
           color: theme.colors.fg.default
         }, theme.fontStyleForWeight(theme.fontWeights.regular), Platform.OS === "web" && styles.webOutlineReset]
-      }), /*#__PURE__*/_jsx(Pressable, {
-        testID: testID ? `${testID}-increment` : undefined,
-        accessibilityRole: "button",
-        accessibilityLabel: "Increase",
-        accessibilityState: {
-          disabled: !incrementEnabled
-        },
-        disabled: !incrementEnabled,
-        onPress: handleIncrement,
-        onFocus: () => setIncrementFocused(true),
-        onBlur: () => setIncrementFocused(false),
-        hitSlop: spec.hitSlop,
-        style: ({
-          pressed
-        }) => [numberInputStepperStructure(theme, {
-          size,
-          position: "trailing"
-        }), {
-          borderColor: statusColors.border
-        }, pressed && incrementEnabled && {
-          backgroundColor: pressColors.fill
-        }, !disabled && !incrementEnabled && styles.dimmed],
-        children: ({
-          pressed
-        }) => /*#__PURE__*/_jsxs(_Fragment, {
-          children: [incrementFocused && incrementEnabled && /*#__PURE__*/_jsx(View, {
-            pointerEvents: "none",
-            testID: "number-input-increment-focus-ring",
-            style: stepperFocusRingStyle(theme, "trailing")
-          }), /*#__PURE__*/_jsx(Icon, {
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.stepperHost,
+        children: [incrementFocused && incrementEnabled && /*#__PURE__*/_jsx(View, {
+          pointerEvents: "none",
+          testID: "number-input-increment-focus-ring",
+          style: stepperFocusRingStyle(theme, "trailing")
+        }), /*#__PURE__*/_jsx(AnimatedPressable, {
+          testID: testID ? `${testID}-increment` : undefined,
+          accessibilityRole: "button",
+          accessibilityLabel: "Increase",
+          "aria-disabled": !incrementEnabled,
+          disabled: !incrementEnabled,
+          focusable: incrementEnabled,
+          onPress: handleIncrement,
+          onPressIn: incrementPress.handlers.onPressIn,
+          onPressOut: incrementPress.handlers.onPressOut,
+          onLayout: incrementPress.onLayout,
+          onFocus: () => setIncrementFocused(true),
+          onBlur: () => setIncrementFocused(false),
+          hitSlop: spec.hitSlop,
+          android_ripple: incrementEnabled && Platform.OS === "android" ? {
+            color: rippleColor(theme.mode),
+            borderless: false
+          } : undefined,
+          style: [numberInputStepperStructure(theme, {
+            size,
+            position: "trailing"
+          }), {
+            borderColor: statusColors.border,
+            overflow: "hidden"
+          }, incrementPress.pressed && incrementEnabled && {
+            backgroundColor: pressColors.fill
+          }, incrementPress.animatedStyle, !disabled && !incrementEnabled && styles.dimmed],
+          children: /*#__PURE__*/_jsx(Icon, {
             name: "plus",
             size: spec.iconSize,
-            color: pressed && incrementEnabled ? pressColors.icon : theme.colors.fg.default,
+            color: incrementEnabled && incrementPress.pressed ? pressColors.icon : theme.colors.fg.default,
             strokeWidth: ICON_STROKE
-          })]
-        })
+          })
+        })]
       })]
+    }), a11y.message !== undefined && /*#__PURE__*/_jsx(Text, {
+      testID: testID ? `${testID}-error` : undefined,
+      style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
+        fontSize: theme.fontSizes.xs,
+        color: theme.colors.status.danger.text,
+        marginTop: theme.space[1]
+      }],
+      children: a11y.message
     })]
   });
 });
 const styles = StyleSheet.create({
-  // A disabled control is exempt from the contrast minimum (WCAG 1.4.3), so a uniform dim is correct.
   dimmed: {
     opacity: 0.5
   },
-  // RNW renders `TextInput` as a real `<input>`, which paints the browser's own default focus
-  // outline on top of the themed ring above it — a visible double border. Web-only: `outlineWidth`
-  // also drives native TV remote-control focus, so zeroing it globally would break that.
+  stepperHost: {
+    position: "relative"
+  },
   webOutlineReset: {
-    outlineWidth: 0
+    outlineStyle: "solid",
+    outlineWidth: 0,
+    borderWidth: 0
   }
 });
 //# sourceMappingURL=NumberInput.js.map

package/lib/module/modules/number-input/NumberInput.variants.js

@@ -80,15 +80,49 @@ export function resolveNumberInputStatus(colors, status) {
     border: colors.border.interactive
   };
 }
-/** Same fallback contract as `resolveInputAccessibility`: an explicit `accessibilityLabel` always
- *  wins over the visible label. */
+/**
+ * Same fallback contract as `resolveInputAccessibility`: an explicit `accessibilityLabel` always wins
+ * over the visible label.
+ *
+ * `now` is the RAW `value`, deliberately NOT clamped the way `resolveSliderAccessibility` clamps its
+ * own — the caller's committed value is what the control's value IS. The announced TEXT is
+ * `displayText` (the draft the field is rendering), not `String(value)`: mid-typing the two diverge
+ * whenever a keystroke doesn't parse or clamps, and a reader speaking a different number from the
+ * one on screen is a 4.1.2 failure in itself. `min`/`max` are omitted rather than defaulted — an
+ * absent bound means "no floor"/"no ceiling" here (see `clampNumberInputValue`), and announcing
+ * `min: 0` would invent one. `accessibilityActions` mirrors `Slider`'s reasoning: iOS surfaces
+ * adjust gestures from the trait, Android TalkBack only surfaces actions declared here (WCAG 2.5.7).
+ */
 export function resolveNumberInputAccessibility(input) {
   const disabled = input.disabled === true;
+  const isError = (input.status ?? "default") === "error";
+  const errorInName = isError && input.errorText ? input.errorText : undefined;
+  const name = [input.accessibilityLabel ?? input.label, errorInName].filter(part => part !== undefined && part !== "");
+  const text = input.displayText ?? String(input.value);
   return {
-    accessibilityLabel: input.accessibilityLabel ?? input.label,
-    accessibilityState: {
-      disabled
+    accessibilityLabel: name.length > 0 ? name.join(", ") : undefined,
+    "aria-disabled": disabled,
+    "aria-invalid": isError,
+    message: errorInName,
+    accessibilityValue: {
+      ...(input.min === undefined ? {} : {
+        min: input.min
+      }),
+      ...(input.max === undefined ? {} : {
+        max: input.max
+      }),
+      now: input.value,
+      text
     },
+    "aria-valuemin": input.min,
+    "aria-valuemax": input.max,
+    "aria-valuenow": input.value,
+    "aria-valuetext": text,
+    accessibilityActions: [{
+      name: "increment"
+    }, {
+      name: "decrement"
+    }],
     editable: !disabled
   };
 }
@@ -134,7 +168,8 @@ export const numberInputStructure = createThemedVariants(theme => ({
     flexDirection: "row",
     alignItems: "center",
     borderWidth: theme.borderWidths.thin,
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   },
   variants: {
     size: {
@@ -159,7 +194,7 @@ export const numberInputStructure = createThemedVariants(theme => ({
  * `TextInput` carries: without it, the row's `alignItems: "center"` shrinks the button to its
  * intrinsic content height instead of the row's full `spec.height`, silently voiding the `hitSlop`
  * touch-target math (a real Wave-1 bug on Input — not one to repeat here). The corner radii on the
- * outer edge match the row's own `radii.base` so a pressed/focused fill doesn't square off past the
+ * outer edge match the row's own `radii.md` so a pressed/focused fill doesn't square off past the
  * row's rounded corner.
  */
 export const numberInputStepperStructure = createThemedVariants(theme => ({
@@ -183,13 +218,15 @@ export const numberInputStepperStructure = createThemedVariants(theme => ({
     position: {
       leading: {
         borderRightWidth: theme.borderWidths.thin,
-        borderTopLeftRadius: theme.radii.base,
-        borderBottomLeftRadius: theme.radii.base
+        borderTopLeftRadius: theme.radii.md,
+        borderBottomLeftRadius: theme.radii.md,
+        borderCurve: "continuous"
       },
       trailing: {
         borderLeftWidth: theme.borderWidths.thin,
-        borderTopRightRadius: theme.radii.base,
-        borderBottomRightRadius: theme.radii.base
+        borderTopRightRadius: theme.radii.md,
+        borderBottomRightRadius: theme.radii.md,
+        borderCurve: "continuous"
       }
     }
   },