pixelize-native-library 1.2.0 → 1.3.0

package/lib/module/modules/combobox/Combobox.js

@@ -34,24 +34,21 @@
  */
 
 import { memo, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
-import { Animated, Modal, Platform, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
+import { Modal, Platform, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
+import Reanimated, { FadeInDown, ReduceMotion, useAnimatedStyle } from "react-native-reanimated";
 import { useAnnounce } from "../../core/a11y/index.js";
 import { useDismissOnEscape, useFocusTrap, useSpaceActivation } from "../../core/a11y/keyboard";
 import { Icon } from "../../core/icon/index.js";
 import { VirtualList } from "../../core/list/index.js";
-import { useMotion, usePressMotion, useReveal } from "../../core/motion/index.js";
+import { useAnimatedValue, useMotion, usePressMotion, useReveal } from "../../core/motion/index.js";
+import { elevation, floatingBackground, floatingSurfaceStyle, highlight, rippleColor } from "../../theme/platform/index.js";
+import { elevation as elevationTokens } from "../../theme/tokens/primitives/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { ModalPortalContext } from "../modal/ModalPortalContext.js";
 import { renderWebPortal } from "../modal/renderWebPortal";
 import { Spinner } from "../spinner/index.js";
 import { useComboboxKeys } from "./comboboxKeys";
 import { COMBOBOX_CLEAR_BUTTON_HIT_SLOP, COMBOBOX_FIELD_FONT_SIZE, COMBOBOX_FIELD_HIT_SLOP, COMBOBOX_FIELD_ICON_SIZE, COMBOBOX_LISTBOX_ROLE, COMBOBOX_ROW_ICON_SIZE, comboboxOptionNativeId, DEFAULT_EMPTY_MESSAGE, DEFAULT_MAX_HEIGHT, DEFAULT_PLACEHOLDER, DEFAULT_SEARCH_PLACEHOLDER, FILTER_DEBOUNCE_MS, SEARCH_DEBOUNCE_MS, comboboxClearButtonStructure, comboboxFieldStructure, comboboxFieldValueStructure, comboboxListStateStructure, comboboxOverlayStructure, comboboxRowStructure, comboboxRowTextStructure, comboboxSearchRowStructure, comboboxSheetStructure, COMBOBOX_ROW_MIN_HEIGHT, normalizeForSearch, resolveComboboxAccessibility, resolveComboboxErrorTextColor, resolveComboboxRowAccessibility, resolveComboboxRowColors, resolveComboboxSummary, resolveComboboxTriggerColors } from "./Combobox.variants.js";
-
-/**
- * A discriminated union, not one flat interface with every field optional: `multiple: true` requires
- * `values`/`onValuesChange`, the default (`multiple` absent/`false`) requires `value`/`onChange` — a
- * caller can never wire the wrong pair for the active mode and have it silently do nothing.
- */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const ICON_STROKE = 2;
 const FOCUS_RING_WIDTH = 2;
@@ -72,7 +69,7 @@ const ComboboxOptionRow = /*#__PURE__*/memo(function ComboboxOptionRow({
   const rowDisabled = option.disabled === true;
   const motion = useMotion();
   const press = usePressMotion(rowDisabled);
-  const checkOpacity = useRef(new Animated.Value(selected ? 1 : 0)).current;
+  const checkOpacity = useAnimatedValue(selected ? 1 : 0);
   const skipFirst = useRef(true);
   const running = useRef(null);
 
@@ -81,11 +78,11 @@ const ComboboxOptionRow = /*#__PURE__*/memo(function ComboboxOptionRow({
     running.current?.stop();
     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, {
@@ -95,6 +92,9 @@ const ComboboxOptionRow = /*#__PURE__*/memo(function ComboboxOptionRow({
     return () => running.current?.stop();
   }, [selected, motion, checkOpacity]);
   useEffect(() => () => running.current?.stop(), []);
+  const checkStyle = useAnimatedStyle(() => ({
+    opacity: checkOpacity.value
+  }));
   const rowA11y = useMemo(() => resolveComboboxRowAccessibility({
     selected,
     disabled: rowDisabled
@@ -109,6 +109,10 @@ const ComboboxOptionRow = /*#__PURE__*/memo(function ComboboxOptionRow({
     backgroundColor: pressed || active ? rowColors.pressedRow : rowColors.background
   }, rowDisabled && styles.dimmed], [rowColors.pressedRow, rowColors.background, rowDisabled, active]);
   const contentStyle = useMemo(() => [comboboxRowStructure(theme), press.style], [theme, press.style]);
+  const androidRipple = useMemo(() => Platform.OS === "android" && !rowDisabled ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [rowDisabled, theme.mode]);
   const textWrapStyle = useMemo(() => comboboxRowTextStructure(theme), [theme]);
   const labelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
     fontSize: theme.fontSizes.md,
@@ -118,9 +122,6 @@ const ComboboxOptionRow = /*#__PURE__*/memo(function ComboboxOptionRow({
     fontSize: theme.fontSizes.xs,
     color: rowColors.muted
   }], [theme, rowColors.muted]);
-  const checkStyle = useMemo(() => ({
-    opacity: checkOpacity
-  }), [checkOpacity]);
   return /*#__PURE__*/_jsx(Pressable, {
     testID: testID ? `${testID}-option-${option.value}` : undefined,
     nativeID: nativeID,
@@ -134,8 +135,9 @@ const ComboboxOptionRow = /*#__PURE__*/memo(function ComboboxOptionRow({
     onPress: handlePress,
     onPressIn: press.onPressIn,
     onPressOut: press.onPressOut,
+    android_ripple: androidRipple,
     style: pressableStyle,
-    children: /*#__PURE__*/_jsxs(Animated.View, {
+    children: /*#__PURE__*/_jsxs(Reanimated.View, {
       testID: testID ? `${testID}-option-${option.value}-content` : undefined,
       style: contentStyle,
       children: [option.icon !== undefined && /*#__PURE__*/_jsx(Icon, {
@@ -154,7 +156,7 @@ const ComboboxOptionRow = /*#__PURE__*/memo(function ComboboxOptionRow({
           style: descriptionStyle,
           children: option.description
         })]
-      }), selected && /*#__PURE__*/_jsx(Animated.View, {
+      }), selected && /*#__PURE__*/_jsx(Reanimated.View, {
         testID: testID ? `${testID}-option-${option.value}-check` : undefined,
         style: checkStyle,
         children: /*#__PURE__*/_jsx(Icon, {
@@ -373,7 +375,17 @@ export const Combobox = /*#__PURE__*/memo(function Combobox(props) {
   const fieldStyle = useMemo(() => [comboboxFieldStructure(theme), {
     backgroundColor: triggerColors.background,
     borderColor: triggerColors.border
+  }, {
+    overflow: "hidden"
   }, disabled && styles.dimmed], [theme, triggerColors.background, triggerColors.border, disabled]);
+  const triggerRipple = useMemo(() => Platform.OS === "android" && !disabled ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [disabled, theme.mode]);
+  const clearButtonRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
   const focusRingStyle = useMemo(() => ({
     position: "absolute",
     top: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
@@ -382,7 +394,8 @@ export const Combobox = /*#__PURE__*/memo(function Combobox(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"
   }), [theme]);
   const fieldValueStyle = useMemo(() => comboboxFieldValueStructure(theme), [theme]);
   const summaryStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
@@ -390,7 +403,9 @@ export const Combobox = /*#__PURE__*/memo(function Combobox(props) {
     fontSize: COMBOBOX_FIELD_FONT_SIZE,
     color: isPlaceholder ? triggerColors.placeholder : triggerColors.text
   }], [theme, isPlaceholder, triggerColors.placeholder, triggerColors.text]);
-  const clearButtonStyle = useMemo(() => comboboxClearButtonStructure(theme), [theme]);
+  const clearButtonStyle = useMemo(() => [comboboxClearButtonStructure(theme), {
+    overflow: "hidden"
+  }], [theme]);
   const errorTextStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
     fontSize: theme.fontSizes.xs,
     color: resolveComboboxErrorTextColor(theme.colors),
@@ -400,10 +415,18 @@ export const Combobox = /*#__PURE__*/memo(function Combobox(props) {
     backgroundColor: BACKDROP_SCRIM
   }], []);
   const overlayStyle = useMemo(() => comboboxOverlayStructure(theme), [theme]);
-  const sheetSurfaceStyle = useMemo(() => [comboboxSheetStructure(theme), {
-    backgroundColor: theme.colors.bg.surface,
+  const sheetFloating = useMemo(() => {
+    highlight("subtle", theme.mode);
+    elevation(elevationTokens.md);
+    void theme.elevatedSurfaces;
+    return {
+      backgroundColor: floatingBackground(theme, "md"),
+      ...floatingSurfaceStyle(theme, "md")
+    };
+  }, [theme]);
+  const sheetSurfaceStyle = useMemo(() => [comboboxSheetStructure(theme), sheetFloating, {
     maxHeight
-  }], [theme, maxHeight]);
+  }], [theme, sheetFloating, maxHeight]);
   const sheetStyle = useMemo(() => [sheetSurfaceStyle, reveal.style], [sheetSurfaceStyle, reveal.style]);
   const searchRowStyle = useMemo(() => [comboboxSearchRowStructure(theme), {
     borderBottomColor: theme.colors.border.default
@@ -430,62 +453,66 @@ export const Combobox = /*#__PURE__*/memo(function Combobox(props) {
       style: backdropStyle,
       onPress: closeSheet
     }), /*#__PURE__*/_jsx(View, {
-      style: overlayStyle,
-      pointerEvents: "box-none",
-      children: /*#__PURE__*/_jsxs(Animated.View, {
+      style: [overlayStyle, {
+        pointerEvents: "box-none"
+      }],
+      children: /*#__PURE__*/_jsx(Reanimated.View, {
         ref: sheetRef,
-        style: sheetStyle,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: searchRowStyle,
-          children: [/*#__PURE__*/_jsx(Icon, {
-            name: "search",
-            size: COMBOBOX_FIELD_ICON_SIZE,
-            color: rowColors.icon,
-            strokeWidth: ICON_STROKE
-          }), /*#__PURE__*/_jsx(TextInput, {
-            ref: searchInputRef,
-            testID: testID ? `${testID}-search` : undefined,
-            value: query,
-            onChangeText: handleQueryChange,
-            placeholder: searchPlaceholder,
-            placeholderTextColor: rowColors.muted,
-            accessibilityLabel: searchPlaceholder
-            // Hyphenated JSX attributes are not type-checked at all, which is exactly why the id
-            // comes from `comboboxOptionNativeId` and is never interpolated here.
+        entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
+        children: /*#__PURE__*/_jsxs(Reanimated.View, {
+          style: sheetStyle,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: searchRowStyle,
+            children: [/*#__PURE__*/_jsx(Icon, {
+              name: "search",
+              size: COMBOBOX_FIELD_ICON_SIZE,
+              color: rowColors.icon,
+              strokeWidth: ICON_STROKE
+            }), /*#__PURE__*/_jsx(TextInput, {
+              ref: searchInputRef,
+              testID: testID ? `${testID}-search` : undefined,
+              value: query,
+              onChangeText: handleQueryChange,
+              placeholder: searchPlaceholder,
+              placeholderTextColor: rowColors.placeholder,
+              accessibilityLabel: searchPlaceholder
+              // Hyphenated JSX attributes are not type-checked at all, which is exactly why the id
+              // comes from `comboboxOptionNativeId` and is never interpolated here.
+              ,
+              "aria-activedescendant": activeOptionId,
+              autoFocus: true,
+              autoCapitalize: "none",
+              autoCorrect: false,
+              autoComplete: "off",
+              importantForAutofill: "no",
+              style: searchInputStyle
+            })]
+          }), loading ? /*#__PURE__*/_jsx(View, {
+            style: listStateStyle,
+            children: /*#__PURE__*/_jsx(Spinner, {
+              size: "md",
+              tone: "neutral",
+              testID: testID ? `${testID}-spinner` : undefined
+            })
+          }) : filteredOptions.length === 0 ? /*#__PURE__*/_jsx(View, {
+            style: listStateStyle,
+            children: /*#__PURE__*/_jsx(Text, {
+              accessibilityLiveRegion: Platform.OS === "android" ? "polite" : undefined,
+              style: emptyTextStyle,
+              children: emptyMessage
+            })
+          }) : /*#__PURE__*/_jsx(VirtualList, {
+            data: filteredOptions,
+            keyExtractor: keyExtractor,
+            renderItem: renderRow,
+            itemHeight: uniformRowHeight ? COMBOBOX_ROW_MIN_HEIGHT : undefined,
+            accessibilityRole: COMBOBOX_LISTBOX_ROLE
+            // The search field holds focus while the sheet is open, so the default `"never"`
+            // spends the first tap on any row dismissing the keyboard instead of selecting.
             ,
-            "aria-activedescendant": activeOptionId,
-            autoFocus: true,
-            autoCapitalize: "none",
-            autoCorrect: false,
-            autoComplete: "off",
-            importantForAutofill: "no",
-            style: searchInputStyle
+            keyboardShouldPersistTaps: "handled"
           })]
-        }), loading ? /*#__PURE__*/_jsx(View, {
-          style: listStateStyle,
-          children: /*#__PURE__*/_jsx(Spinner, {
-            size: "md",
-            tone: "neutral",
-            testID: testID ? `${testID}-spinner` : undefined
-          })
-        }) : filteredOptions.length === 0 ? /*#__PURE__*/_jsx(View, {
-          style: listStateStyle,
-          children: /*#__PURE__*/_jsx(Text, {
-            accessibilityLiveRegion: Platform.OS === "android" ? "polite" : undefined,
-            style: emptyTextStyle,
-            children: emptyMessage
-          })
-        }) : /*#__PURE__*/_jsx(VirtualList, {
-          data: filteredOptions,
-          keyExtractor: keyExtractor,
-          renderItem: renderRow,
-          itemHeight: uniformRowHeight ? COMBOBOX_ROW_MIN_HEIGHT : undefined,
-          accessibilityRole: COMBOBOX_LISTBOX_ROLE
-          // The search field holds focus while the sheet is open, so the default `"never"`
-          // spends the first tap on any row dismissing the keyboard instead of selecting.
-          ,
-          keyboardShouldPersistTaps: "handled"
-        })]
+        })
       })
     })]
   }) : null;
@@ -493,12 +520,15 @@ export const Combobox = /*#__PURE__*/memo(function Combobox(props) {
   // Web portal opt-in — see Modal.tsx's/Select.tsx's identical branch + ModalPortalContext.ts. Every
   // other case (native, or web with no ModalPortalProvider) renders through RN's own <Modal> below.
   const menu = Platform.OS === "web" && portalContainer != null ? open ? renderWebPortal(/*#__PURE__*/_jsx(View, {
-    style: StyleSheet.absoluteFill,
-    pointerEvents: "box-none",
+    style: [StyleSheet.absoluteFill, {
+      pointerEvents: "box-none"
+    }],
     children: sheet
   }), portalContainer) : null : /*#__PURE__*/_jsx(Modal, {
     visible: open,
     transparent: true,
+    statusBarTranslucent: true,
+    navigationBarTranslucent: true,
     animationType: "none",
     onRequestClose: closeSheet
     // `autoFocus` on the search TextInput alone is timing-flaky inside a native Modal on iOS
@@ -525,11 +555,13 @@ export const Combobox = /*#__PURE__*/memo(function Combobox(props) {
       onFocus: handleFocus,
       onBlur: handleBlur,
       hitSlop: COMBOBOX_FIELD_HIT_SLOP,
+      android_ripple: triggerRipple,
       style: fieldStyle,
       children: [showFocusRing && /*#__PURE__*/_jsx(View, {
-        pointerEvents: "none",
         testID: testID ? `${testID}-focus-ring` : undefined,
-        style: focusRingStyle
+        style: [focusRingStyle, {
+          pointerEvents: "none"
+        }]
       }), /*#__PURE__*/_jsxs(View, {
         style: fieldValueStyle,
         children: [singleSelectedOption?.icon !== undefined && /*#__PURE__*/_jsx(Icon, {
@@ -548,6 +580,7 @@ export const Combobox = /*#__PURE__*/memo(function Combobox(props) {
         accessibilityLabel: "Clear",
         onPress: handleClear,
         hitSlop: COMBOBOX_CLEAR_BUTTON_HIT_SLOP,
+        android_ripple: clearButtonRipple,
         style: clearButtonStyle,
         children: /*#__PURE__*/_jsx(Icon, {
           name: "x",

package/lib/module/modules/combobox/Combobox.variants.js

@@ -25,11 +25,9 @@
  * this 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";
 /** Same touch-target floor as Button/Select/Input (44dp — Apple HIG minimum, WCAG 2.5.5 AAA). */
-export const MIN_TOUCH_TARGET = 44;
-const slopFor = dimension => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - dimension) / 2));
-
 /** No `size` prop (unlike Select/MultiSelect) — not part of this module's spec, and a search sheet's
  *  proportions don't benefit from the sm/lg range those triggers offer. One fixed box, sized exactly
  *  like Input's/Select's `md`, so a Combobox lines up with either in the same form. */
@@ -65,6 +63,7 @@ export const FILTER_DEBOUNCE_MS = 140;
  * Strips combining diacritical marks after Unicode NFD decomposition, so "José" and "jose" match the
  * same query. Lowercased last so the comparison is also case-insensitive.
  */
+export { MIN_TOUCH_TARGET };
 export function normalizeForSearch(value) {
   return value.normalize("NFD").replace(/\p{Diacritic}/gu, "").toLowerCase();
 }
@@ -78,6 +77,16 @@ export function normalizeForSearch(value) {
  */
 export const COMBOBOX_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 `COMBOBOX_LISTBOX_ROLE` container, so `option` is the
+ * textbook-correct pairing (2026-08 sweep fixed the row from the invalid `menuitem`+`aria-selected`
+ * combination — a followup to `select/Select.tsx`'s identical fix, both listbox/option/aria-selected
+ * per the ARIA 1.2 combobox-with-listbox-popup pattern). Same type gap as `COMBOBOX_LISTBOX_ROLE`:
+ * RN 0.86's `AccessibilityRole` union has no `option` either.
+ */
+export const COMBOBOX_OPTION_ROLE = "option";
+
 /**
  * The DOM id of one option row. `aria-activedescendant` and `nativeID` must agree exactly, and
  * every `aria-*` prop is UNCHECKED by TypeScript on an RN component (hyphenated JSX attributes are
@@ -133,7 +142,7 @@ export function resolveComboboxTriggerColors(colors, state) {
     background: colors.bg.surface,
     border: state.error ? colors.status.danger.solid : colors.border.interactive,
     text: colors.fg.default,
-    placeholder: colors.fg.muted,
+    placeholder: colors.fg.placeholder,
     icon: colors.fg.muted
   };
 }
@@ -148,6 +157,7 @@ export function resolveComboboxRowColors(colors) {
     background: colors.bg.surface,
     text: colors.fg.default,
     muted: colors.fg.muted,
+    placeholder: colors.fg.placeholder,
     icon: colors.fg.muted,
     checkIcon: colors.fg.default,
     pressedRow: colors.bg.sunken
@@ -167,13 +177,15 @@ export function resolveComboboxAccessibility(input) {
   };
 }
 /**
- * Every row is `menuitem` (matching this library's `Menu`), in BOTH single and multiple mode — the
- * spec this module was built against fixes this role regardless of mode, unlike `MultiSelect`'s own
- * `checkbox` rows. Selection state rides `aria-selected`, never `aria-checked`.
+ * Every row is `option` (2026-08 sweep — was `menuitem`, which made `aria-selected` invalid ARIA;
+ * the row sits inside `COMBOBOX_LISTBOX_ROLE`, so `option` is the textbook-correct pairing), in BOTH
+ * single and multiple mode: this module's `aria-activedescendant` pattern is one listbox regardless
+ * of mode, unlike `MultiSelect`'s own separate `checkbox` rows. Selection state rides `aria-selected`,
+ * never `aria-checked`.
  */
 export function resolveComboboxRowAccessibility(input) {
   return {
-    accessibilityRole: "menuitem",
+    accessibilityRole: COMBOBOX_OPTION_ROLE,
     "aria-selected": input.selected,
     "aria-disabled": input.disabled,
     disabled: input.disabled
@@ -191,7 +203,8 @@ export const comboboxFieldStructure = createThemedVariants(theme => ({
     columnGap: theme.space[2],
     height: COMBOBOX_FIELD_HEIGHT,
     paddingHorizontal: theme.space[4],
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     borderWidth: theme.borderWidths.thin
   }
 }));
@@ -230,7 +243,8 @@ export const comboboxOverlayStructure = createThemedVariants(theme => ({
  *  default `DEFAULT_MAX_HEIGHT`) and is applied inline over this at the component boundary. */
 export const comboboxSheetStructure = createThemedVariants(theme => ({
   base: {
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     ...theme.elevation.lg
   }
 }));

package/lib/module/modules/combobox/ComboboxProps.js

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

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

@@ -25,7 +25,7 @@ reuses directly, e.g. from `SearchBar`).
 | `__tests__/Combobox.keyboard.test.tsx` | Web keyboard: `aria-activedescendant` tracks the arrows, Enter selects, Space stays with the search field, Escape closes, trigger opens on Space. |
 | `__tests__/Combobox.filter.test.tsx` | The memoized filter matches `defaultComboboxFilter` exactly across diacritics/mixed case; a `filterFn` still runs per option. |
 | `__tests__/Combobox.layout.test.tsx` | `getItemLayout` is derived for uniform rows and absent as soon as one option has a `description`. |
-| `__tests__/Combobox.motion.test.tsx` | Reduce-motion (WCAG 2.3.3): check-glyph and press feedback snap to their final values, and `Animated.timing` is never called. |
+| `__tests__/Combobox.motion.test.tsx` | Reduce-motion (WCAG 2.3.3): check-glyph and press feedback snap to their final values, with no tween scheduled. |
 
 ## Props
 
@@ -61,10 +61,14 @@ through the same collapsing rule): 0 → placeholder, 1 → that option's label,
 ## Accessibility contract (WCAG)
 
 - **4.1.2** — the field is `accessibilityRole="combobox"` with flat `aria-expanded` tracking the
-  sheet. Rows are `accessibilityRole="menuitem"` (matching `Menu`, in BOTH single and multiple
-  mode — this module's own spec, unlike `MultiSelect`'s `checkbox` rows) with flat `aria-selected` /
-  `aria-disabled`. Flat, never `accessibilityState={{…}}`: react-native-web discards the object form
-  — see `docs/PLATFORM-A11Y-PROPS.md`.
+  sheet. Rows are `accessibilityRole="option"` (in BOTH single and multiple mode — this module's own
+  spec, unlike `MultiSelect`'s `checkbox` rows) with flat `aria-selected` / `aria-disabled`. Flat,
+  never `accessibilityState={{…}}`: react-native-web discards the object form — see
+  `docs/PLATFORM-A11Y-PROPS.md`. **2026-08 sweep:** rows were `accessibilityRole="menuitem"`, which
+  made `aria-selected` invalid ARIA (only valid on `option`/`row`/`tab`/`gridcell`/`treeitem`); rows
+  sit inside `COMBOBOX_LISTBOX_ROLE` (`"listbox"`), so `option` + `aria-selected` is the
+  textbook-correct ARIA listbox pattern — the same fix `select/Select.tsx`'s identical bug got, only
+  the row's `accessibilityRole` changed.
 - **2.5.x target size** — the field reaches ≥ 44dp via `hitSlop`; the clear button — nested inside
   the field `Pressable`, same structure as `DatePicker`'s — reaches 44×44 the same way; option rows
   have a 44dp `minHeight` directly.
@@ -167,7 +171,7 @@ handler.
 
 Via `core/motion` only — `opacity`/`transform`, native driver, all reduce-motion aware.
 
-- **Row press** — `usePressMotion(rowDisabled)`; the row's content `Animated.View` (which carries
+- **Row press** — `usePressMotion(rowDisabled)`; the row's content `Reanimated.View` (which carries
   `comboboxRowStructure`, including the 44dp `minHeight`) scales/dips, while the `Pressable` keeps
   the `pressedRow` background. `scale` is a transform, so the row's hit area is unaffected.
 - **Check glyph** — fades in/out on selection change, but a row that mounts already-selected
@@ -176,8 +180,8 @@ Via `core/motion` only — `opacity`/`transform`, native driver, all reduce-moti
   (the same flag `<Modal visible>` uses), so there is no second source of truth and no extra render
   per open/close. See `Select`/`MultiSelect` — all three pickers use this one gate.
 
-## Modernization (v1.0.7)
+## Android
 
-- 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.
+`android_ripple` (`borderless: false`) on the trigger field (gated `!disabled`), the clear button and
+each option row (gated `!rowDisabled`); the field and clear button set `overflow: "hidden"` so the
+ripple clips to their shape. The backdrop scrim uses `MOTION_TRANSFORM.scrimOpacity`, aligned with `Modal`.

package/lib/module/modules/composer/Composer.js

@@ -10,16 +10,17 @@
  */
 
 import { memo, useCallback, useEffect, useMemo, useRef } from "react";
-import { ActivityIndicator, Animated, Platform, Pressable, StyleSheet, TextInput, View } from "react-native";
+import { ActivityIndicator, Platform, Pressable, StyleSheet, TextInput, View } from "react-native";
+import Reanimated, { useAnimatedStyle } from "react-native-reanimated";
 import { Icon } from "../../core/icon/index.js";
-import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { useMotion, useAnimatedValue } from "../../core/motion/index.js";
+import { FOCUS_RING_GAP, FOCUS_RING_WIDTH } from "../../core/style/focusRing.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
 import { composerFieldStructure, composerInputStructure, composerSendStructure, composerStructure } from "./Composer.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_STROKE = 2;
 const ICON_SIZE = 18;
-const FOCUS_RING_WIDTH = 2;
-const FOCUS_RING_GAP = 2;
 const FIELD_STYLE = composerFieldStructure();
 /** Split out so the icon/spinner subtree survives the parent's per-keystroke `value` re-render. */
 const ComposerSend = /*#__PURE__*/memo(function ComposerSend({
@@ -32,6 +33,10 @@ const ComposerSend = /*#__PURE__*/memo(function ComposerSend({
   const sendStyle = useMemo(() => [composerSendStructure(theme), {
     backgroundColor: canSend ? theme.colors.accent.solid : theme.colors.bg.sunken
   }], [theme, canSend]);
+  const androidRipple = useMemo(() => Platform.OS === "android" && canSend ? {
+    color: rippleColor(theme.mode),
+    borderless: true
+  } : undefined, [canSend, theme.mode]);
   return /*#__PURE__*/_jsx(Pressable, {
     testID: testID,
     accessibilityRole: "button",
@@ -39,6 +44,7 @@ const ComposerSend = /*#__PURE__*/memo(function ComposerSend({
     "aria-disabled": !canSend,
     disabled: !canSend,
     onPress: onPress,
+    android_ripple: androidRipple,
     style: sendStyle,
     children: sending ? /*#__PURE__*/_jsx(ActivityIndicator, {
       color: theme.colors.accent.onSolid
@@ -71,11 +77,14 @@ export const Composer = /*#__PURE__*/memo(function Composer({
   }, [canSend, onSend]);
   const ringOpacity = useAnimatedValue(0);
   const ringAnimation = useRef(null);
+  const ringAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: ringOpacity.value
+  }));
   const setRingVisible = useCallback(visible => {
     ringAnimation.current?.stop();
     const to = visible ? 1 : 0;
     if (!motion.enabled) {
-      ringOpacity.setValue(to);
+      ringOpacity.value = to;
       return;
     }
     ringAnimation.current = motion.timing(ringOpacity, to, {
@@ -110,25 +119,25 @@ export const Composer = /*#__PURE__*/memo(function Composer({
     bottom: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
     borderWidth: FOCUS_RING_WIDTH,
     borderColor: theme.colors.border.focus,
-    borderRadius: theme.radii.lg + FOCUS_RING_GAP + FOCUS_RING_WIDTH
+    borderRadius: theme.radii.lg + FOCUS_RING_GAP + FOCUS_RING_WIDTH,
+    borderCurve: "continuous"
   }), [theme]);
   return /*#__PURE__*/_jsxs(View, {
     testID: testID,
     style: rootStyle,
     children: [/*#__PURE__*/_jsxs(View, {
       style: FIELD_STYLE,
-      children: [/*#__PURE__*/_jsx(Animated.View, {
-        pointerEvents: "none",
+      children: [/*#__PURE__*/_jsx(Reanimated.View, {
         testID: "composer-focus-ring",
-        style: [focusRingStyle, {
-          opacity: ringOpacity
+        style: [focusRingStyle, ringAnimatedStyle, {
+          pointerEvents: 'none'
         }]
       }), /*#__PURE__*/_jsx(TextInput, {
         testID: testID ? `${testID}-input` : undefined,
         value: value,
         onChangeText: onChangeText,
         placeholder: placeholder,
-        placeholderTextColor: theme.colors.fg.muted,
+        placeholderTextColor: theme.colors.fg.placeholder,
         editable: editable,
         accessibilityLabel: accessibilityLabel ?? placeholder,
         "aria-disabled": !editable,

package/lib/module/modules/composer/Composer.variants.js

@@ -26,6 +26,7 @@ export const composerInputStructure = createThemedVariants(theme => ({
     paddingHorizontal: theme.space[3],
     paddingVertical: theme.space[2],
     borderRadius: theme.radii.lg,
+    borderCurve: "continuous",
     borderWidth: theme.borderWidths.thin,
     fontSize: theme.fontSizes.md
   }
@@ -35,6 +36,7 @@ export const composerSendStructure = createThemedVariants(theme => ({
     width: 40,
     height: 40,
     borderRadius: theme.radii.full,
+    borderCurve: "continuous",
     alignItems: "center",
     justifyContent: "center"
   }

package/lib/module/modules/composer/ComposerProps.js

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

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

@@ -11,6 +11,7 @@ whitespace-only.
 | `Composer.tsx` | The component, plus the internal memo'd `ComposerSend` child. |
 | `Composer.variants.ts` | Structural resolvers (root row, field wrapper, input, send circle). No colour resolver — every colour here is a single non-branching role lookup, read at the component. |
 | `index.ts` | Public surface: `Composer`, `ComposerProps`. |
+| `__tests__/Composer.test.ts` | Pure: the structural resolvers and the send-enabled predicate. |
 | `__tests__/Composer.render.test.tsx` | Send fires with text present, stays inert when empty; focus-ring opacity on focus/blur/disabled/sending; web outline reset. |
 
 ## Props
@@ -21,7 +22,7 @@ whitespace-only.
 | `onChangeText` | `(text: string) => void` | — | Required. |
 | `onSend` | `() => void` | — | Required. Never fires while send is disabled. |
 | `placeholder` | `string` | `"Message"` | Falls back into the field's `accessibilityLabel`. |
-| `accessibilityLabel` | `string` | `placeholder` | Names the field. Previously absent — `ComposerProps` exposed no label prop at all, so a consumer with more than one composer on screen (or a placeholder unsuited as a name) could not give it an accessible name. |
+| `accessibilityLabel` | `string` | `placeholder` | Names the field. A placeholder disappears once there is a value, so a screen with more than one composer needs this to tell them apart. |
 | `disabled` | `boolean` | `false` | Blocks typing and sending. |
 | `sending` | `boolean` | `false` | Blocks typing and sending; shows the spinner. |
 | `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
@@ -31,7 +32,7 @@ whitespace-only.
 
 - **Focus ring (WCAG 2.4.7 / 2.4.11).** Same offset-ring pattern as Input: a `border.focus` ring
   2px wide, 2px outside the field, crossfaded on the field's `onFocus`/`onBlur` through
-  `useMotion()`. It is always mounted at opacity 0 (`testID="composer-focus-ring"`,
+  `useMotion()` on a Reanimated node. It is always mounted at opacity 0 (`testID="composer-focus-ring"`,
   `pointerEvents="none"`) and never raised while `disabled` or `sending`. The ring is an absolutely
   positioned sibling of the `TextInput` inside a `composerFieldStructure` wrapper — that wrapper
   carries the row's `flex: 1`.
@@ -68,3 +69,7 @@ controlled), so:
   fresh literal per keystroke would defeat the memo above. `aria-disabled={!canSend}` is a primitive,
   not an object, so it needs no memo of its own.
 - `ComposerSend` reads `useTheme()` itself rather than taking a `theme` prop.
+
+- The round send button takes `android_ripple` (`borderless: true`, matching its circular shape),
+  gated on `Platform.OS === "android" && canSend`, so a disabled send button shows no ripple.
+