pixelize-native-library 1.2.0 → 1.2.1

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

@@ -10,6 +10,7 @@ import { focusItemProps, useDismissOnEscape, useFocusTrap, useRovingKeys, useSpa
 import { Icon } from "../../core/icon/index.js";
 import { VirtualList } from "../../core/list/index.js";
 import { useMotion, 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";
@@ -71,6 +72,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,6 +94,7 @@ const MultiSelectOptionRow = /*#__PURE__*/memo(function MultiSelectOptionRow({
     onPress: handlePress,
     onPressIn: press.onPressIn,
     onPressOut: press.onPressOut,
+    android_ripple: androidRipple,
     style: rowStyle,
     children: /*#__PURE__*/_jsxs(Animated.View, {
       testID: testID ? `${testID}-option-${option.value}-content` : undefined,
@@ -204,10 +210,22 @@ export const MultiSelect = /*#__PURE__*/memo(function MultiSelect({
   }), {
     backgroundColor: triggerColors.background,
     borderColor: triggerColors.border
+  }, {
+    overflow: "hidden"
   }, disabled && styles.dimmed], [theme, size, triggerColors, disabled]);
+  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]);
@@ -242,6 +260,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",
@@ -267,6 +286,8 @@ export const MultiSelect = /*#__PURE__*/memo(function MultiSelect({
   }), portalContainer) : null : /*#__PURE__*/_jsx(Modal, {
     visible: open,
     transparent: true,
+    statusBarTranslucent: true,
+    navigationBarTranslucent: true,
     animationType: "none",
     onRequestClose: closeMenu,
     children: sheet
@@ -287,6 +308,7 @@ export const MultiSelect = /*#__PURE__*/memo(function MultiSelect({
       onFocus: handleFocus,
       onBlur: handleBlur,
       hitSlop: spec.hitSlop,
+      android_ripple: triggerRipple,
       style: triggerStyle,
       children: [/*#__PURE__*/_jsx(Text, {
         numberOfLines: 1,

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

@@ -115,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: {
@@ -150,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

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

@@ -89,7 +89,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

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);
@@ -152,46 +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",
-        "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, {
+          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,
@@ -219,41 +228,46 @@ 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, {
+          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,
@@ -267,13 +281,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

@@ -168,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: {
@@ -193,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 => ({
@@ -217,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"
       }
     }
   },

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

@@ -69,7 +69,10 @@ 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 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`).
 - **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
@@ -89,6 +92,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
 
@@ -119,3 +126,8 @@ The host app owns fetching the org list and the active org id, passing `role` as
 ## Modernization (v1.0.7)
 
 - Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.
+
+- **Round 2 visual** — radii retarget (`radii.md`/`lg`/`xl`/`full`), `borderCurve: continuous` on md+ corners; floating surfaces wire platform elevation/highlight where applicable.
+- **Round 5 tonal** — the trigger's `border.interactive` hairline is KEPT: it's a form-control
+  affordance (opens a picker), the identical role `Select`'s own trigger border plays, not decorative
+  container chrome. Trigger and rows both gained `android_ripple` for Android parity.

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

@@ -26,6 +26,7 @@ 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 { 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";
@@ -51,6 +52,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, {
@@ -91,11 +95,12 @@ 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, {
       style: [contentStructure, press.style],
@@ -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, {
@@ -226,6 +234,8 @@ export const OrgSwitcher = /*#__PURE__*/memo(function OrgSwitcher({
   }), portalContainer) : null : /*#__PURE__*/_jsx(Modal, {
     visible: open,
     transparent: true,
+    statusBarTranslucent: true,
+    navigationBarTranslucent: true,
     animationType: "none",
     onRequestClose: closeMenu,
     children: sheet
@@ -241,6 +251,7 @@ 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, {
         style: [triggerContentStructure, triggerPress.style],

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

@@ -100,7 +100,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 +153,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/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