pixelize-native-library 1.2.0 → 1.2.1

package/lib/module/modules/search-bar/SearchBar.variants.js

@@ -25,16 +25,16 @@ const slopFor = height => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - height) / 2)
  */
 export const SEARCH_BAR_SIZES = {
   sm: {
-    height: 32,
+    height: 44,
     fontSize: 14,
     iconSize: 16,
-    hitSlop: slopFor(32)
+    hitSlop: slopFor(44)
   },
   md: {
-    height: 40,
+    height: 52,
     fontSize: 16,
     iconSize: 18,
-    hitSlop: slopFor(40)
+    hitSlop: slopFor(52)
   }
 };
 
@@ -59,7 +59,7 @@ export const CLEAR_BUTTON_WIDTH = MIN_TOUCH_TARGET;
 export function resolveSearchBarColors(colors) {
   return {
     text: colors.fg.default,
-    placeholder: colors.fg.muted,
+    placeholder: colors.fg.placeholder,
     icon: colors.fg.muted,
     border: colors.border.interactive,
     focusBorder: colors.border.focus,
@@ -141,7 +141,8 @@ export const searchBarFieldStructure = createThemedVariants(theme => ({
     alignItems: "center",
     columnGap: theme.space[2],
     borderWidth: theme.borderWidths.thin,
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   },
   variants: {
     size: {
@@ -171,7 +172,8 @@ export const searchBarClearStructure = createThemedVariants(theme => ({
     alignSelf: "stretch",
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   }
 }));
 
@@ -186,7 +188,8 @@ export const searchBarCancelStructure = createThemedVariants(theme => ({
     alignItems: "center",
     justifyContent: "center",
     paddingHorizontal: theme.space[2],
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   },
   variants: {
     size: {

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

@@ -37,3 +37,5 @@ the settings-section pattern re-declared across consumer apps.
 ## Performance
 
 Wrapped in `React.memo`.
+
+- **Round 2 visual** — radii retarget (`radii.md`/`lg`/`xl`/`full`), `borderCurve: continuous` on md+ corners; floating surfaces wire platform elevation/highlight where applicable.

package/lib/module/modules/section/Section.js

@@ -9,10 +9,10 @@
  */
 
 import { memo, useMemo } from "react";
-import { View } from "react-native";
-import { HEADING_LEVEL, HeadingText } from "../../core/heading/index.js";
+import Reanimated, { FadeInDown, ReduceMotion } from "react-native-reanimated";
 import { useTheme } from "../../theme/hooks.js";
-import { resolveSectionColors, sectionContainerStructure, sectionLabelStructure } from "./Section.variants.js";
+import { Text } from "../text/index.js";
+import { sectionContainerStructure } from "./Section.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const Section = /*#__PURE__*/memo(function Section({
   label,
@@ -21,20 +21,13 @@ export const Section = /*#__PURE__*/memo(function Section({
   testID
 }) {
   const theme = useTheme();
-  const colors = useMemo(() => resolveSectionColors(theme.colors), [theme.colors]);
-  const rootStyle = useMemo(() => [sectionContainerStructure(theme), {
-    borderTopColor: colors.border
-  }, style], [theme, colors, style]);
-  const labelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.bold), sectionLabelStructure(theme), {
-    color: colors.label
-  }], [theme, colors]);
-  return /*#__PURE__*/_jsxs(View, {
+  const rootStyle = useMemo(() => [sectionContainerStructure(theme), style], [theme, style]);
+  return /*#__PURE__*/_jsxs(Reanimated.View, {
+    entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
     testID: testID,
     style: rootStyle,
-    children: [/*#__PURE__*/_jsx(HeadingText, {
-      accessibilityRole: "header",
-      "aria-level": HEADING_LEVEL.section,
-      style: labelStyle,
+    children: [/*#__PURE__*/_jsx(Text, {
+      variant: "overline",
       children: label
     }), children]
   });

package/lib/module/modules/section/Section.variants.js

@@ -1,9 +1,5 @@
 "use strict";
 
-/**
- * Section's style resolution — same split as `Divider.variants` / `Card.variants`.
- */
-
 import { createThemedTextVariants, createThemedVariants } from "../../core/style/index.js";
 export function resolveSectionColors(colors) {
   return {
@@ -13,8 +9,7 @@ export function resolveSectionColors(colors) {
 }
 export const sectionContainerStructure = createThemedVariants(theme => ({
   base: {
-    borderTopWidth: theme.borderWidths.thin,
-    paddingTop: theme.space[2],
+    paddingTop: theme.space[4],
     paddingBottom: theme.space[2],
     rowGap: theme.space[2]
   }

package/lib/module/modules/segmented-control/MODULE.md

@@ -74,7 +74,7 @@ The slide goes through **`useMotion()`**, not a direct `MOTION_DURATION` import:
 configured constant straight to `Animated.timing` read the CONFIGURED duration, never the one
 resolved against the device tier, so `MOTION_TIER[tier].durationScale` never reached the pill.
 Reduce-motion is `motion.enabled` — no second `useReducedMotion()` call (`core/motion/MODULE.md`
-rule 6). The in-flight slide is stopped on effect cleanup and on unmount.
+rule 6). Segment presses use `usePressState` (scale + state-layer overlay). The in-flight slide is stopped on effect cleanup and on unmount.
 
 ## Patterns copied from Tabs / ButtonGroup / Card
 
@@ -122,3 +122,5 @@ Wrapped in `React.memo`. `handleSegmentLayout` is `useCallback`'d (mirroring `Ta
 - 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.
+- **Round 5 (Android parity)** — segments were missing `android_ripple` entirely; added, bounded
+  (`borderless: false`), gated off while a segment is disabled.

package/lib/module/modules/segmented-control/SegmentedControl.js

@@ -17,14 +17,102 @@
  * the focused segment (WCAG 2.4.7), the same treatment `BottomNavTab` uses.
  */
 
-import { memo, useCallback, useEffect, useRef, useState } from "react";
-import { Animated, Pressable, StyleSheet, Text, View } from "react-native";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Animated, Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import Reanimated from "react-native-reanimated";
 import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { useHaptics } from "../../core/haptics/index.js";
+import { usePressState } from "../../core/motion/usePressState.js";
 import { Icon } from "../../core/icon/index.js";
+import { rippleColor, stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
+import { floatingBackground, floatingSurfaceStyle } from "../../theme/platform/index.js";
 import { resolveSegmentedControlColors, resolveSegmentedControlSegmentAccessibility, resolveSegmentedControlSegmentHitSlop, SEGMENTED_CONTROL_SIZES, segmentedControlFocusRingStructure, segmentedControlPillStructure, segmentedControlSegmentStructure, segmentedControlTrackStructure } from "./SegmentedControl.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_STROKE = 2;
+const AnimatedPressable = Reanimated.createAnimatedComponent(Pressable);
+const SegmentButton = /*#__PURE__*/memo(function SegmentButton({
+  option,
+  selected,
+  segmentDisabled,
+  size,
+  fullWidth,
+  labelColor,
+  hitSlop,
+  focused,
+  onChange,
+  onLayout,
+  onFocus,
+  onBlur,
+  testID
+}) {
+  const theme = useTheme();
+  const press = usePressState(segmentDisabled);
+  const a11y = resolveSegmentedControlSegmentAccessibility({
+    selected,
+    disabled: segmentDisabled
+  });
+  const spec = SEGMENTED_CONTROL_SIZES[size];
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.md]);
+  const androidRipple = useMemo(() => {
+    if (Platform.OS !== "android" || segmentDisabled) return undefined;
+    return {
+      color: rippleColor(theme.mode),
+      borderless: false
+    };
+  }, [segmentDisabled, theme.mode]);
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
+    testID: testID,
+    accessibilityRole: a11y.accessibilityRole,
+    "aria-selected": a11y["aria-selected"],
+    "aria-disabled": a11y["aria-disabled"],
+    accessibilityLabel: option.label,
+    disabled: a11y.disabled,
+    onPress: segmentDisabled ? undefined : () => onChange(option.value),
+    onLayout: event => {
+      press.onLayout(event);
+      onLayout(option.value, event);
+    },
+    onFocus: () => onFocus(option.value),
+    onBlur: () => onBlur(option.value),
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    hitSlop: hitSlop,
+    android_ripple: androidRipple,
+    style: [segmentedControlSegmentStructure(theme, {
+      size,
+      fullWidth: fullWidth ? "on" : "off"
+    }), {
+      overflow: "hidden"
+    }, press.animatedStyle, option.disabled === true && !segmentDisabled && styles.dimmed],
+    children: [/*#__PURE__*/_jsx(Reanimated.View, {
+      pointerEvents: "none",
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+    }), focused && /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      testID: testID ? `${testID}-focus-ring` : undefined,
+      style: [segmentedControlFocusRingStructure(theme), {
+        borderColor: theme.colors.border.focus
+      }]
+    }), option.icon !== undefined && /*#__PURE__*/_jsx(Icon, {
+      name: option.icon,
+      size: spec.iconSize,
+      color: labelColor,
+      strokeWidth: ICON_STROKE
+    }), /*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      style: [theme.fontStyleForWeight(theme.fontWeights.medium), {
+        fontSize: spec.fontSize,
+        color: labelColor
+      }],
+      children: option.label
+    })]
+  });
+});
 function SegmentedControlImpl({
   options,
   value,
@@ -37,8 +125,8 @@ function SegmentedControlImpl({
 }) {
   const theme = useTheme();
   const motion = useMotion();
+  const haptics = useHaptics();
   const colors = resolveSegmentedControlColors(theme.colors);
-  const spec = SEGMENTED_CONTROL_SIZES[size];
   const hitSlop = resolveSegmentedControlSegmentHitSlop(size);
   const [layouts, setLayouts] = useState({});
   // Which segment holds keyboard/AT focus. One value rather than per-segment state: only one segment
@@ -78,11 +166,16 @@ function SegmentedControlImpl({
     return () => running.current?.stop();
   }, [activeLayout, motion, pillX]);
   useEffect(() => () => running.current?.stop(), []);
+  const handleChange = useCallback(optionValue => {
+    haptics.selection();
+    onChange(optionValue);
+  }, [haptics, onChange]);
   return /*#__PURE__*/_jsxs(View, {
     testID: testID,
     accessibilityRole: "tablist",
     style: [segmentedControlTrackStructure(theme), {
-      backgroundColor: colors.track
+      backgroundColor: floatingBackground(theme, "sm"),
+      ...floatingSurfaceStyle(theme, "sm")
     }, disabled && styles.dimmed, style],
     children: [/*#__PURE__*/_jsx(Animated.View, {
       pointerEvents: "none",
@@ -97,50 +190,21 @@ function SegmentedControlImpl({
     }), options.map(option => {
       const selected = option.value === value;
       const segmentDisabled = disabled || option.disabled === true;
-      const a11y = resolveSegmentedControlSegmentAccessibility({
-        selected,
-        disabled: segmentDisabled
-      });
       const labelColor = selected ? colors.activeLabel : colors.inactiveLabel;
-      return /*#__PURE__*/_jsxs(Pressable, {
-        testID: testID ? `${testID}-${option.value}` : undefined,
-        accessibilityRole: a11y.accessibilityRole,
-        "aria-selected": a11y["aria-selected"],
-        "aria-disabled": a11y["aria-disabled"],
-        accessibilityLabel: option.label,
-        disabled: a11y.disabled,
-        onPress: segmentDisabled ? undefined : () => onChange(option.value),
-        onLayout: event => handleSegmentLayout(option.value, event),
-        onFocus: () => setFocusedValue(option.value),
-        onBlur: () => setFocusedValue(current => current === option.value ? null : current),
+      return /*#__PURE__*/_jsx(SegmentButton, {
+        option: option,
+        selected: selected,
+        segmentDisabled: segmentDisabled,
+        size: size,
+        fullWidth: fullWidth,
+        labelColor: labelColor,
         hitSlop: hitSlop,
-        style: ({
-          pressed
-        }) => [segmentedControlSegmentStructure(theme, {
-          size,
-          fullWidth: fullWidth ? "on" : "off"
-        }), pressed && !selected && !segmentDisabled && {
-          backgroundColor: colors.pressedSegment
-        }, option.disabled === true && !disabled && styles.dimmed],
-        children: [focusedValue === option.value && /*#__PURE__*/_jsx(View, {
-          pointerEvents: "none",
-          testID: testID ? `${testID}-${option.value}-focus-ring` : undefined,
-          style: [segmentedControlFocusRingStructure(theme), {
-            borderColor: theme.colors.border.focus
-          }]
-        }), option.icon !== undefined && /*#__PURE__*/_jsx(Icon, {
-          name: option.icon,
-          size: spec.iconSize,
-          color: labelColor,
-          strokeWidth: ICON_STROKE
-        }), /*#__PURE__*/_jsx(Text, {
-          numberOfLines: 1,
-          style: [theme.fontStyleForWeight(theme.fontWeights.medium), {
-            fontSize: spec.fontSize,
-            color: labelColor
-          }],
-          children: option.label
-        })]
+        focused: focusedValue === option.value,
+        onChange: handleChange,
+        onLayout: handleSegmentLayout,
+        onFocus: setFocusedValue,
+        onBlur: v => setFocusedValue(current => current === v ? null : current),
+        testID: testID ? `${testID}-${option.value}` : undefined
       }, option.value);
     })]
   });

package/lib/module/modules/segmented-control/SegmentedControl.variants.js

@@ -86,13 +86,14 @@ export const segmentedControlTrackStructure = createThemedVariants(theme => ({
   base: {
     flexDirection: "row",
     position: "relative",
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     padding: theme.space[1]
   }
 }));
 
 /**
- * The pill. `theme.radii.sm` — one step down from the track's `theme.radii.base` — nests cleanly
+ * The pill. `theme.radii.sm` — one step down from the track's `theme.radii.md` — nests cleanly
  * inside the track's own `space[1]` inset, the same "inner radius ≈ outer radius − inset" geometry
  * a nested rounded rect needs to read as concentric rather than mismatched. `top`/`bottom` pin it to
  * the row's own height (set by the segments, its flow siblings); `left`/`width` are driven by

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

@@ -27,7 +27,7 @@ context + a stateless helper with no React-tree footprint of its own, not a depe
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
-| `options` | `{ label: string; value: string; leading?: ReactNode }[]` | — | Required. `leading` is an optional fixed-size adornment (status chip / priority glyph / avatar) rendered before the row label AND on the trigger while that option is selected — the ReactNode content-slot precedent set by `ListItem`'s `leading`. |
+| `options` | `SelectOption[]` | — | Required. Each option may set `tone` / `customColors` (same `custom` escape hatch as `Badge`). |
 | `value` | `string` | — | The currently selected option's `value`. |
 | `onValueChange` | `(value: string) => void` | — | Required. Fired on row press; the menu closes right after. |
 | `placeholder` | `string` | — | Shown when `value` matches no option. |
@@ -40,6 +40,16 @@ context + a stateless helper with no React-tree footprint of its own, not a depe
 No `icon` prop — the chevron/check glyphs are fixed to the component's own semantics, not
 caller-configurable.
 
+### `SelectOption`
+
+| Field | Type | Notes |
+|-------|------|-------|
+| `label` | `string` | Row label (required). |
+| `value` | `string` | Stable id (required). |
+| `leading` | `ReactNode` | Optional fixed-size adornment on the row and trigger. |
+| `tone` | `SelectOptionTone` | Optional label colour from role tokens, or `"custom"`. |
+| `customColors` | `{ bg, fg }` | Required when `tone="custom"`. Label reads `fg`. |
+
 ## Accessibility contract (WCAG)
 
 - **2.5.x target size** — every trigger size reaches ≥ 44dp via `hitSlop`; option rows have a
@@ -56,14 +66,25 @@ caller-configurable.
   `bg.selected` isn't proven ≥ 4.5:1 against `fg.default` on every brand (measured: fails on
   radiant/rosewood light), so `resolveSelectRowColors` keeps the row fill at `bg.surface` for every
   row, selected or not.
-- Each option row is `accessibilityRole="menuitem"` with flat `aria-selected`; the "check" icon is
-  the sighted echo of the same state, never the only signal.
+- Each option row is `accessibilityRole="option"` with flat `aria-selected`; the "check" icon is
+  the sighted echo of the same state, never the only signal. **2026-08 sweep:** rows were
+  `accessibilityRole="menuitem"`, which made `aria-selected` invalid ARIA (only valid on
+  `option`/`row`/`tab`/`gridcell`/`treeitem`). Unlike `OrgSwitcher`'s identical bug — fixed to
+  `role="radio"` + `aria-checked` because that sheet's row list carries no `listbox` role — Select's
+  rows sit inside a `SELECT_LISTBOX_ROLE` (`"listbox"`) container, so `option` + `aria-selected` is
+  the textbook-correct ARIA listbox pattern; only the row's `accessibilityRole` changed, `aria-selected`
+  was already the right prop.
 - **2.3.3** — RN's `Modal animationType` is always `"none"`; the reveal is `core/motion`'s
   `useReveal`, which snaps to the final state (no tween) under reduce-motion. Row press feedback
   and the check fade go through the same `motion.enabled` gate. Covered by
   `__tests__/Select.motion.test.tsx`.
 - Disabled is exempt from the contrast minimum (WCAG 1.4.3) — like Button, it's signalled by a
   uniform `opacity: 0.5` dim rather than a separate, still-must-pass colour pair.
+- **Android touch feedback** — the trigger and every option row carry `android_ripple`
+  (`rippleColor(theme.mode)`, `borderless: false`), gated on `Platform.OS === "android"`. The trigger
+  and the sheet container both gained `overflow: "hidden"` so the ripple clips to their rounded
+  bounds — rows have no radius of their own, the sheet does. The backdrop carries no ripple; it is
+  `accessible={false}` and not a real press target.
 
 ## Patterns copied from Button (the reference module)
 
@@ -86,9 +107,9 @@ the tab stop, and `useFocusTrap` needs the focused node to still be tabbable or
 sheet. `useFocusTrap` also restores focus to the trigger on close; `useDismissOnEscape` closes on
 Escape.
 
-**`useRovingKeys` gets no `onActivate`.** RNW already presses a `menuitem` on Enter, and Space is
+**`useRovingKeys` gets no `onActivate`.** RNW already presses on Enter regardless of role, and Space is
 supplied per row by `useSpaceActivation` (RNW's `isValidKeyPress` needs a `button` tag/role, which
-`menuitem` deliberately is not) — passing `onActivate` too would select twice.
+`option` deliberately is not) — passing `onActivate` too would select twice.
 
 The list container is `SELECT_LISTBOX_ROLE`: RN 0.86's role unions have no `listbox`, so the
 widening is one audited cast in `Select.variants.ts` rather than a cast at the call site.

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

@@ -10,10 +10,14 @@ 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 { elevation, floatingBackground, floatingSurfaceStyle, highlight } from "../../theme/platform/index.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
+import { elevation as elevationTokens } from "../../theme/tokens/primitives/index.js";
+import { withAlpha } from "../../core/gradient/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { ModalPortalContext } from "../modal/ModalPortalContext.js";
 import { renderWebPortal } from "../modal/renderWebPortal";
-import { resolveSelectAccessibility, resolveSelectRowColors, resolveSelectTriggerColors, SELECT_LISTBOX_ROLE, SELECT_ROW_ICON_SIZE, SELECT_ROW_MIN_HEIGHT, SELECT_SIZES, selectOverlayStructure, selectRowLeadingStructure, selectRowStructure, selectSheetStructure, selectTriggerStructure, selectTriggerValueStructure } from "./Select.variants.js";
+import { resolveSelectAccessibility, resolveSelectOptionLabelColor, resolveSelectRowColors, resolveSelectTriggerColors, SELECT_LISTBOX_ROLE, SELECT_OPTION_ROLE, SELECT_ROW_ICON_SIZE, SELECT_ROW_MIN_HEIGHT, SELECT_SIZES, selectOverlayStructure, selectRowLeadingStructure, selectRowStructure, selectSheetStructure, selectTriggerStructure, selectTriggerValueStructure } from "./Select.variants.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const ICON_STROKE = 2;
 const BACKDROP_SCRIM = "#00000099";
@@ -29,6 +33,10 @@ const SelectOptionRow = /*#__PURE__*/memo(function SelectOptionRow({
   const motion = useMotion();
   const press = usePressMotion();
   const handlePress = useCallback(() => onSelect(option), [onSelect, option]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
   const rowRef = useRef(null);
   const active = tabIndex === 0;
 
@@ -39,7 +47,7 @@ const SelectOptionRow = /*#__PURE__*/memo(function SelectOptionRow({
     rowRef.current?.focus();
   }, [active]);
 
-  // `menuitem` is not `button`, so RNW never presses on Space — see `core/a11y/keyboard.web.ts`.
+  // `option` is not `button`, so RNW never presses on Space — see `core/a11y/keyboard.web.ts`.
   useSpaceActivation(rowRef, handlePress);
   const checkOpacity = useRef(new Animated.Value(selected ? 1 : 0)).current;
   const skipFirst = useRef(true);
@@ -73,17 +81,18 @@ const SelectOptionRow = /*#__PURE__*/memo(function SelectOptionRow({
   const labelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
     flex: 1,
     fontSize: theme.fontSizes.md,
-    color: rowColors.text
-  }], [theme, rowColors]);
+    color: resolveSelectOptionLabelColor(theme.colors, option.tone, option.customColors)
+  }], [theme, option.tone, option.customColors]);
   return /*#__PURE__*/_jsx(Pressable, {
     ref: rowRef,
     testID: testID ? `${testID}-option-${option.value}` : undefined,
-    accessibilityRole: "menuitem",
+    accessibilityRole: SELECT_OPTION_ROLE,
     "aria-selected": selected,
     tabIndex: tabIndex,
     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,
@@ -156,7 +165,7 @@ export const Select = /*#__PURE__*/memo(function Select({
   const typeaheadLabels = useMemo(() => options.map(option => option.label), [options]);
 
   // Keyboard (web only — every hook below is a no-op on native, see `core/a11y/keyboard.ts`).
-  // No `onActivate`: RNW already presses a `menuitem` on Enter, and each row's own
+  // No `onActivate`: RNW already presses on Enter regardless of role, and each row's own
   // `useSpaceActivation` owns Space — passing it here would select twice.
   useDismissOnEscape(open, closeMenu);
   useFocusTrap(sheetRef, open);
@@ -183,14 +192,29 @@ export const Select = /*#__PURE__*/memo(function Select({
   const triggerStyle = useMemo(() => [selectTriggerStructure(theme, {
     size
   }), {
-    backgroundColor: triggerColors.background,
-    borderColor: triggerColors.border
-  }, disabled && styles.dimmed], [theme, size, triggerColors, disabled]);
+    backgroundColor: focused || open ? withAlpha(theme.colors.accent.solid, 0.04) : triggerColors.background,
+    borderColor: triggerColors.border,
+    borderWidth: focused || open ? 2 : theme.borderWidths.thin,
+    overflow: "hidden"
+  }, disabled && styles.dimmed], [theme, size, triggerColors, disabled, focused, open]);
   const valueStructure = useMemo(() => selectTriggerValueStructure(theme), [theme]);
   const overlayStructure = useMemo(() => selectOverlayStructure(theme), [theme]);
-  const sheetStyle = useMemo(() => [selectSheetStructure(theme), {
-    backgroundColor: theme.colors.bg.surface
-  }], [theme]);
+  const floatingStyle = useMemo(() => {
+    highlight("subtle", theme.mode);
+    elevation(elevationTokens.md);
+    void theme.elevatedSurfaces;
+    return {
+      backgroundColor: floatingBackground(theme, "md"),
+      ...floatingSurfaceStyle(theme, "md")
+    };
+  }, [theme]);
+  const sheetStyle = useMemo(() => [selectSheetStructure(theme), floatingStyle, {
+    overflow: "hidden"
+  }], [theme, floatingStyle]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
   const fieldLabelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.medium), {
     fontSize: theme.fontSizes.sm,
     color: theme.colors.fg.muted,
@@ -231,6 +255,8 @@ export const Select = /*#__PURE__*/memo(function Select({
   }), portalContainer) : null : /*#__PURE__*/_jsx(Modal, {
     visible: open,
     transparent: true,
+    statusBarTranslucent: true,
+    navigationBarTranslucent: true,
     animationType: "none",
     onRequestClose: closeMenu,
     children: sheet
@@ -251,6 +277,7 @@ export const Select = /*#__PURE__*/memo(function Select({
       onFocus: handleFocus,
       onBlur: handleBlur,
       hitSlop: spec.hitSlop,
+      android_ripple: androidRipple,
       style: triggerStyle,
       children: [/*#__PURE__*/_jsxs(View, {
         style: valueStructure,

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

@@ -22,32 +22,41 @@ import { createThemedVariants } from "../../core/style/index.js";
  */
 export const SELECT_LISTBOX_ROLE = "listbox";
 
+/**
+ * Each option row's role. `aria-selected` is only valid ARIA on `option`/`row`/`tab`/`gridcell`/
+ * `treeitem` — the row sits inside a `SELECT_LISTBOX_ROLE` container, so `option` is the
+ * textbook-correct pairing (2026-08 sweep fixed the row from the invalid `menuitem`+`aria-selected`
+ * combination). Same type gap as `SELECT_LISTBOX_ROLE`: RN 0.86's `AccessibilityRole` union has no
+ * `option` either.
+ */
+export const SELECT_OPTION_ROLE = "option";
+
 /** Same touch-target floor as Button (44dp — Apple HIG minimum, WCAG 2.5.5 AAA). */
 export const MIN_TOUCH_TARGET = 44;
 const slopFor = height => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - height) / 2));
 export const SELECT_SIZES = {
   sm: {
-    height: 32,
+    height: 44,
     fontSize: 14,
     iconSize: 16,
-    hitSlop: slopFor(32)
+    hitSlop: slopFor(44)
   },
   md: {
-    height: 40,
+    height: 52,
     fontSize: 16,
     iconSize: 18,
-    hitSlop: slopFor(40)
+    hitSlop: slopFor(52)
   },
   lg: {
-    height: 48,
+    height: 56,
     fontSize: 18,
     iconSize: 20,
-    hitSlop: slopFor(48)
+    hitSlop: slopFor(56)
   }
 };
 
 /** Minimum height for an option row — a list item is still an interactive target (WCAG 2.5.8). */
-export const SELECT_ROW_MIN_HEIGHT = 44;
+export const SELECT_ROW_MIN_HEIGHT = 48;
 
 /** The "check" glyph beside the active row. Fixed — independent of the trigger's own `size`. */
 export const SELECT_ROW_ICON_SIZE = 18;
@@ -60,7 +69,7 @@ export const SELECT_ROW_ICON_SIZE = 18;
 export function resolveSelectTriggerColors(colors, focused) {
   return {
     background: colors.bg.surface,
-    border: focused ? colors.border.focus : colors.border.interactive,
+    border: focused ? colors.accent.solid : colors.border.interactive,
     text: colors.fg.default,
     placeholder: colors.fg.muted,
     icon: colors.fg.muted
@@ -74,6 +83,20 @@ export function resolveSelectRowColors(colors) {
     pressedRow: colors.bg.sunken
   };
 }
+export function resolveSelectOptionLabelColor(colors, tone, customColors) {
+  if (tone === undefined) {
+    return colors.fg.default;
+  }
+  if (tone === "custom") {
+    if (!customColors) {
+      throw new Error('SelectOption tone="custom" requires customColors={{ bg, fg }}.');
+    }
+    return customColors.fg;
+  }
+  if (tone === "accent") return colors.accent.text;
+  if (tone === "neutral") return colors.fg.default;
+  return colors.status[tone].text;
+}
 /**
  * Derives the trigger's accessibility surface once, purely: `expanded` tracks whether the option
  * list is showing (WCAG 4.1.2 — a collapsible control must expose its expanded/collapsed state),
@@ -99,7 +122,8 @@ export const selectTriggerStructure = 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: {
@@ -145,10 +169,10 @@ export const selectOverlayStructure = createThemedVariants(theme => ({
 }));
 export const selectSheetStructure = createThemedVariants(theme => ({
   base: {
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.lg,
+    borderCurve: "continuous",
     paddingVertical: theme.space[2],
-    maxHeight: 320,
-    ...theme.elevation.lg
+    maxHeight: 320
   }
 }));
 export const selectRowStructure = createThemedVariants(theme => ({