pixelize-native-library 1.2.0 → 1.3.0

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 { 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),
@@ -77,6 +81,18 @@ 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 decrementEnabled = canDecrementNumberInput({
+    value,
+    min,
+    disabled
+  });
+  const incrementEnabled = canIncrementNumberInput({
+    value,
+    max,
+    disabled
+  });
+  const decrementPress = usePressState(!decrementEnabled);
+  const incrementPress = usePressState(!incrementEnabled);
   const a11y = resolveNumberInputAccessibility({
     value,
     min,
@@ -88,16 +104,6 @@ export const NumberInput = /*#__PURE__*/memo(function NumberInput(props) {
     status,
     errorText
   });
-  const decrementEnabled = canDecrementNumberInput({
-    value,
-    min,
-    disabled
-  });
-  const incrementEnabled = canIncrementNumberInput({
-    value,
-    max,
-    disabled
-  });
   const handleChangeText = raw => {
     setDraft(raw);
     const parsed = parseNumberInputDraft(raw);
@@ -142,7 +148,6 @@ export const NumberInput = /*#__PURE__*/memo(function NumberInput(props) {
         borderColor: statusColors.border
       }, disabled && styles.dimmed],
       children: [focused && !disabled && /*#__PURE__*/_jsx(View, {
-        pointerEvents: "none",
         testID: "number-input-focus-ring",
         style: {
           position: "absolute",
@@ -152,46 +157,51 @@ 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",
+          pointerEvents: "none"
         }
-      }), /*#__PURE__*/_jsx(Pressable, {
-        testID: testID ? `${testID}-decrement` : undefined,
-        accessibilityRole: "button",
-        accessibilityLabel: "Decrease",
-        "aria-disabled": !decrementEnabled,
-        disabled: !decrementEnabled
-        // RN's Pressable stays `focusable` when disabled, so a TV remote could otherwise land on an
-        // at-limit stepper, which renders no ring (WCAG 2.4.7). RNW already excludes it (tabIndex -1).
-        ,
-        focusable: 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, {
+          testID: "number-input-decrement-focus-ring",
+          style: [stepperFocusRingStyle(theme, "leading"), {
+            pointerEvents: "none"
+          }]
+        }), /*#__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,
@@ -219,41 +229,47 @@ 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",
-        "aria-disabled": !incrementEnabled,
-        disabled: !incrementEnabled,
-        focusable: 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, {
+          testID: "number-input-increment-focus-ring",
+          style: [stepperFocusRingStyle(theme, "trailing"), {
+            pointerEvents: "none"
+          }]
+        }), /*#__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,
@@ -267,13 +283,12 @@ export const NumberInput = /*#__PURE__*/memo(function NumberInput(props) {
   });
 });
 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: {
     outlineStyle: "solid",
     outlineWidth: 0,

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

@@ -16,14 +16,12 @@
  * 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 };
 
 /** A state, not a brand tone — same reasoning as Input's `status`. */
 
-/** Same floor as Button/Input/Select — 44dp (WCAG 2.5.5 / HIG). Duplicated, not imported: modules
- *  stay isolated. */
-export const MIN_TOUCH_TARGET = 44;
-const slopFor = height => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - height) / 2));
 /** Same numbers as Input's sizes, so a NumberInput lines up beside a plain field. */
 export const NUMBER_INPUT_SIZES = {
   sm: {
@@ -168,7 +166,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: {
@@ -193,7 +192,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 => ({
@@ -217,13 +216,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"
       }
     }
   },

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

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

package/lib/module/modules/org-switcher/MODULE.md

@@ -52,7 +52,7 @@ mode — `bg.selected` is not, which is exactly why `Select` refuses to tint.
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `options` | `OrgSwitcherOption[]` | — | `{ value, label, role?, avatarSource?, avatarInitials? }`. `avatarInitials` defaults to the first letters of `label`'s first two words. |
-| `value` | `string` | — | Active org id. |
+| `value` | `string` | — | Optional — active org id. Absent shows the `placeholder`. |
 | `onValueChange` | `(value: string) => void` | — | |
 | `placeholder` | `string` | `"Select organization"` | Shown with a `building-2` glyph when nothing is selected. |
 | `size` | `sm \| md \| lg` | `md` | Trigger heights 32 / 40 / 48 dp; avatar `xs` / `sm` / `md`. |
@@ -69,8 +69,12 @@ mode — `bg.selected` is not, which is exactly why `Select` refuses to tint.
 - The trigger is a `button` named **"Switch organization, <org>"** — the org name alone would
   not tell a screen-reader user what the control does — with `aria-expanded` tracking the sheet
   (WCAG 4.1.2).
-- Rows are `menuitem` with `aria-selected`; the tint is never the *only* selection cue.
-- Rows and trigger both clear the 44dp touch target (trigger via `hitSlop`).
+- Rows are `role="radio"` with `aria-checked` — picking an org is choosing exactly one from a
+  mutually exclusive set, and `aria-selected` is invalid ARIA on `role="menuitem"` (2026-08 sweep;
+  React Native's typed `accessibilityRole` has no `menuitemradio`, so `radio` is the closest valid
+  role). The tint is never the *only* selection cue.
+- Rows and trigger both clear the 44dp touch target (trigger via `hitSlop`), and both carry
+  `android_ripple` on Android.
 - **2.1.1 keyboard (web only)** — on the `ModalPortalProvider` branch there is no RN `<Modal>`, so
   `react-native-web`'s own Escape / focus trap / focus restore never run. The sheet wires
   `useDismissOnEscape` + `useFocusTrap` (`core/a11y/keyboard`) gated on `portalled && open`;
@@ -89,6 +93,10 @@ The host app owns fetching the org list and the active org id, passing `role` as
 - **No roving tabindex / arrow keys on the row list** — each row is still its own tab stop, which is
   acceptable at real org counts (the same reason there is no search box) but would want
   `useRovingKeys` if that list ever grows.
+- **No `role="radiogroup"` on the sheet's row list.** Each row is individually a valid `radio`, but
+  nothing groups them, so a screen reader doesn't announce "N options" up front. Not added alongside
+  the `menuitem` → `radio` fix because `radiogroup` semantics conventionally pair with arrow-key
+  roving, which the gap above says this list doesn't have — revisit both together.
 
 ## Performance contract
 
@@ -113,9 +121,6 @@ The host app owns fetching the org list and the active org id, passing `role` as
   conditional render.
 - **Sheet** — `useEnterExit(open)` on the panel; the `Modal` keeps `visible={open}` with
   `animationType="none"` so the library owns the reveal and the sheet always fully unmounts when
-  closed (never gated on an animation callback). This replaced the old `reducedMotion ? "none" :
-  "fade"` — reduce-motion is now handled inside `core/motion` (`motion.enabled === false` snaps).
+  closed (never gated on an animation callback). Reduce-motion is handled inside `core/motion`
+  (`motion.enabled === false` snaps). The backdrop scrim uses `MOTION_TRANSFORM.scrimOpacity`.
 
-## Modernization (v1.0.7)
-
-- Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.

package/lib/module/modules/org-switcher/OrgSwitcher.js

@@ -20,21 +20,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 { useDismissOnEscape, useFocusTrap } from "../../core/a11y/keyboard";
 import { Icon } from "../../core/icon/index.js";
 import { VirtualList } from "../../core/list/index.js";
-import { useAnimatedValue, useEnterExit, useMotion, usePressMotion } from "../../core/motion/index.js";
+import { withAlpha } from "../../core/gradient/index.js";
+import { MOTION_TRANSFORM, useEnterExit, useMotion, useAnimatedValue, usePressMotion } from "../../core/motion/index.js";
 import { useTheme } from "../../theme/hooks.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { Avatar } from "../avatar/index.js";
-import { ModalPortalContext } from "../modal/ModalPortalContext.js";
-import { renderWebPortal } from "../modal/renderWebPortal";
+import { ModalPortalContext, renderWebPortal } from "../../core/overlay/index.js";
 import { ORG_SWITCHER_ROW_ICON_SIZE, ORG_SWITCHER_ROW_MIN_HEIGHT, ORG_SWITCHER_SIZES, orgInitials, orgSwitcherOverlayStructure, orgSwitcherRowBodyStructure, orgSwitcherRowContentStructure, orgSwitcherRowStructure, orgSwitcherSheetStructure, orgSwitcherTriggerContentStructure, orgSwitcherTriggerStructure, orgSwitcherTriggerValueStructure, resolveOrgSwitcherAccessibility, resolveOrgSwitcherRowColors, resolveOrgSwitcherTriggerColors } from "./OrgSwitcher.variants.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const ICON_STROKE = 2;
 // Decorative dismiss scrim behind the sheet — a design constant, not a role token: it is neither
 // text nor an interactive boundary, so WCAG's contrast minimums don't apply to it.
-const BACKDROP_SCRIM = "#00000099";
+const BACKDROP_SCRIM = withAlpha("#000000", MOTION_TRANSFORM.scrimOpacity);
 const OrgSwitcherRow = /*#__PURE__*/memo(function OrgSwitcherRow({
   option,
   selected,
@@ -51,6 +53,9 @@ const OrgSwitcherRow = /*#__PURE__*/memo(function OrgSwitcherRow({
   const rowStructure = useMemo(() => orgSwitcherRowStructure(theme), [theme]);
   const contentStructure = useMemo(() => orgSwitcherRowContentStructure(theme), [theme]);
   const bodyStructure = useMemo(() => orgSwitcherRowBodyStructure(theme), [theme]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode)
+  } : undefined, [theme.mode]);
   const rowStyle = useCallback(({
     pressed
   }) => [rowStructure, {
@@ -65,21 +70,20 @@ const OrgSwitcherRow = /*#__PURE__*/memo(function OrgSwitcherRow({
     color: restingColors.subtitle
   }], [theme, restingColors]);
   const checkOpacity = useAnimatedValue(selected ? 1 : 0);
-  const checkStyle = useMemo(() => ({
-    opacity: checkOpacity
-  }), [checkOpacity]);
+  const checkStyle = useAnimatedStyle(() => ({
+    opacity: checkOpacity.value
+  }));
   const skipFirst = useRef(true);
   const running = useRef(null);
   useEffect(() => {
     running.current?.stop();
-    // A row scrolled into view already-selected must snap, never fade — no motion during scroll.
     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, {
@@ -91,13 +95,14 @@ const OrgSwitcherRow = /*#__PURE__*/memo(function OrgSwitcherRow({
   useEffect(() => () => running.current?.stop(), []);
   return /*#__PURE__*/_jsx(Pressable, {
     testID: testID ? `${testID}-option-${option.value}` : undefined,
-    accessibilityRole: "menuitem",
-    "aria-selected": selected,
+    accessibilityRole: "radio",
+    "aria-checked": selected,
     onPress: handlePress,
     onPressIn: press.onPressIn,
     onPressOut: press.onPressOut,
+    android_ripple: androidRipple,
     style: rowStyle,
-    children: /*#__PURE__*/_jsxs(Animated.View, {
+    children: /*#__PURE__*/_jsxs(Reanimated.View, {
       style: [contentStructure, press.style],
       children: [/*#__PURE__*/_jsx(Avatar, {
         size: spec.avatarSize,
@@ -116,7 +121,7 @@ const OrgSwitcherRow = /*#__PURE__*/memo(function OrgSwitcherRow({
           style: roleStyle,
           children: option.role
         })]
-      }), selected && /*#__PURE__*/_jsx(Animated.View, {
+      }), selected && /*#__PURE__*/_jsx(Reanimated.View, {
         style: checkStyle,
         children: /*#__PURE__*/_jsx(Icon, {
           name: "check",
@@ -155,6 +160,9 @@ export const OrgSwitcher = /*#__PURE__*/memo(function OrgSwitcher({
   const triggerStructure = useMemo(() => orgSwitcherTriggerStructure(theme, {
     size
   }), [theme, size]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode)
+  } : undefined, [theme.mode]);
   const triggerStyle = useCallback(({
     pressed
   }) => [triggerStructure, {
@@ -205,9 +213,10 @@ export const OrgSwitcher = /*#__PURE__*/memo(function OrgSwitcher({
       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, sheetMotion.style],
         children: /*#__PURE__*/_jsx(VirtualList, {
@@ -220,12 +229,15 @@ export const OrgSwitcher = /*#__PURE__*/memo(function OrgSwitcher({
     })]
   }) : null;
   const menu = portalled ? 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
@@ -241,8 +253,9 @@ export const OrgSwitcher = /*#__PURE__*/memo(function OrgSwitcher({
       onPressIn: triggerPress.onPressIn,
       onPressOut: triggerPress.onPressOut,
       hitSlop: spec.hitSlop,
+      android_ripple: androidRipple,
       style: triggerStyle,
-      children: /*#__PURE__*/_jsxs(Animated.View, {
+      children: /*#__PURE__*/_jsxs(Reanimated.View, {
         style: [triggerContentStructure, triggerPress.style],
         children: [/*#__PURE__*/_jsxs(View, {
           style: triggerValueStructure,

package/lib/module/modules/org-switcher/OrgSwitcher.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 (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 const ORG_SWITCHER_SIZES = {
   sm: {
     height: 32,
@@ -100,7 +102,8 @@ export function orgInitials(label) {
 export const orgSwitcherTriggerStructure = createThemedVariants(theme => ({
   base: {
     justifyContent: "center",
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     borderWidth: theme.borderWidths.thin
   },
   variants: {
@@ -152,7 +155,8 @@ export const orgSwitcherOverlayStructure = createThemedVariants(theme => ({
 }));
 export const orgSwitcherSheetStructure = createThemedVariants(theme => ({
   base: {
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     paddingVertical: theme.space[2],
     maxHeight: 320,
     ...theme.elevation.lg

package/lib/module/modules/org-switcher/OrgSwitcherProps.js

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

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

@@ -89,8 +89,8 @@ for a closed union to resolve.
   also set on the rendered summary text: `useAnnounce` already announces on both platforms, so
   keeping both would double-announce on Android (same rule `Input`/`FormField`/`FileUpload` follow).
 - **2.3.3** — the compact summary's fade is skipped and its opacity `setValue`'d whenever
-  `useMotion().enabled` is false (reduced motion or the global kill switch). Press feedback is a
-  conditional background, not a transition, so it needs no gating.
+  `useMotion().enabled` is false (reduced motion or the global kill switch). Page controls and the
+  load-more button use `usePressState` (scale + state-layer overlay), which snaps under reduce motion.
 
 ## Page-change motion
 
@@ -98,6 +98,8 @@ for a closed union to resolve.
 `fast` + `decelerate`) — opacity only, native driver, no fade on first mount, stopped on effect
 cleanup and unmount. That is the whole motion budget for this module.
 
+A page change also fires `useHaptics().selection()`, skipped under reduced motion.
+
 `numbered` deliberately animates **nothing**: it is a row of up to nine controls, and moving or
 fading each one on every page change reads as noise rather than feedback. `loadMore` keeps its
 existing spinner and no transition.
@@ -156,8 +158,3 @@ most `2·siblingCount + 5` items, so `VirtualizedList` setup would be pure cost
 benefit (Menu's rows document the same measurement). The themed structural resolvers compile once
 per `(theme, size)` via the `WeakMap` cache and never rebuild per render.
 
-## 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.