pixelize-native-library 1.2.0 → 1.2.1

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

@@ -35,11 +35,14 @@
 
 import { memo, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Animated, Modal, Platform, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
+import Reanimated, { FadeInDown, ReduceMotion } 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 { 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";
@@ -109,6 +112,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,
@@ -134,6 +141,7 @@ const ComboboxOptionRow = /*#__PURE__*/memo(function ComboboxOptionRow({
     onPress: handlePress,
     onPressIn: press.onPressIn,
     onPressOut: press.onPressOut,
+    android_ripple: androidRipple,
     style: pressableStyle,
     children: /*#__PURE__*/_jsxs(Animated.View, {
       testID: testID ? `${testID}-option-${option.value}-content` : undefined,
@@ -373,7 +381,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 +400,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 +409,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 +421,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
@@ -432,60 +461,63 @@ export const Combobox = /*#__PURE__*/memo(function Combobox(props) {
     }), /*#__PURE__*/_jsx(View, {
       style: overlayStyle,
       pointerEvents: "box-none",
-      children: /*#__PURE__*/_jsxs(Animated.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.
+      children: /*#__PURE__*/_jsx(Reanimated.View, {
+        entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
+        children: /*#__PURE__*/_jsxs(Animated.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.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;
@@ -499,6 +531,8 @@ export const Combobox = /*#__PURE__*/memo(function Combobox(props) {
   }), 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,6 +559,7 @@ 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",
@@ -548,6 +583,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

@@ -78,6 +78,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 +143,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 +158,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 +178,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 +204,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 +244,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/MODULE.md

@@ -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.
@@ -181,3 +185,9 @@ Via `core/motion` only — `opacity`/`transform`, native driver, all reduce-moti
 - 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 2 visual** — radii retarget (`radii.md`/`lg`/`xl`/`full`), `borderCurve: continuous` on md+ corners; floating surfaces wire platform elevation/highlight where applicable.
+- **Round 5 (Android parity)** — `android_ripple` (`borderless: false`) added to the trigger field
+  (gated `!disabled`), the clear button, and each option row (gated `!rowDisabled`). The trigger
+  field and clear button also gained `overflow: "hidden"` so their ripple clips to the field/button
+  shape instead of escaping it.

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

@@ -13,6 +13,7 @@ import { memo, useCallback, useEffect, useMemo, useRef } from "react";
 import { ActivityIndicator, Animated, Platform, Pressable, StyleSheet, TextInput, View } from "react-native";
 import { Icon } from "../../core/icon/index.js";
 import { useAnimatedValue, useMotion } from "../../core/motion/index.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";
@@ -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
@@ -110,7 +116,8 @@ 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,
@@ -128,7 +135,7 @@ export const Composer = /*#__PURE__*/memo(function Composer({
         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/MODULE.md

@@ -68,3 +68,8 @@ 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.
+
+- **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 (Android parity)** — the round send button now gets `android_ripple` (`borderless: true`,
+  matching its circular shape), gated on `Platform.OS === "android" && canSend` so a disabled send
+  button shows no ripple.

package/lib/module/modules/copy-button/CopyButton.js

@@ -6,9 +6,10 @@
  */
 
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { AccessibilityInfo, Animated, Pressable, Text, View } from "react-native";
+import { AccessibilityInfo, Animated, Platform, Pressable, Text, View } from "react-native";
 import { Icon } from "../../core/icon/index.js";
 import { usePressMotion } from "../../core/motion/index.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
 import { COPY_BUTTON_SIZES, copyButtonMenuRowStructure, copyButtonOutlineStructure, COPY_FEEDBACK_MS, resolveCopyButtonColors, writeClipboard } from "./CopyButton.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -65,8 +66,9 @@ export const CopyButton = /*#__PURE__*/memo(function CopyButton({
     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
-  }), [theme.colors.border.focus, theme.radii.base]);
+    borderRadius: theme.radii.md + FOCUS_RING_GAP + FOCUS_RING_WIDTH,
+    borderCurve: "continuous"
+  }), [theme.colors.border.focus, theme.radii.md]);
   const spec = COPY_BUTTON_SIZES[size];
   const iconName = status === "copied" ? "check" : status === "failed" ? "triangle-alert" : "link";
   const ink = status === "copied" ? colors.success : status === "failed" ? colors.danger : colors.default;
@@ -83,9 +85,15 @@ export const CopyButton = /*#__PURE__*/memo(function CopyButton({
       onPress: handlePress,
       onFocus: onFocus,
       onBlur: onBlur,
+      android_ripple: Platform.OS === "android" ? {
+        color: rippleColor(theme.mode),
+        borderless: false
+      } : undefined,
       style: ({
         pressed
-      }) => [copyButtonMenuRowStructure(theme), pressed ? {
+      }) => [copyButtonMenuRowStructure(theme), {
+        overflow: "hidden"
+      }, pressed ? {
         backgroundColor: theme.colors.bg.sunken
       } : null, style],
       children: [focusRing, /*#__PURE__*/_jsx(Icon, {
@@ -110,9 +118,15 @@ export const CopyButton = /*#__PURE__*/memo(function CopyButton({
       onPress: handlePress,
       onFocus: onFocus,
       onBlur: onBlur,
+      android_ripple: Platform.OS === "android" ? {
+        color: rippleColor(theme.mode),
+        borderless: false
+      } : undefined,
       style: ({
         pressed
       }) => [copyButtonOutlineStructure(theme), {
+        overflow: "hidden"
+      }, {
         borderColor: status === "copied" ? colors.success : status === "failed" ? colors.danger : colors.border,
         backgroundColor: pressed ? theme.colors.bg.sunken : theme.colors.bg.surface
       }, style],
@@ -140,6 +154,10 @@ export const CopyButton = /*#__PURE__*/memo(function CopyButton({
     onFocus: onFocus,
     onBlur: onBlur,
     hitSlop: spec.hitSlop,
+    android_ripple: Platform.OS === "android" ? {
+      color: rippleColor(theme.mode),
+      borderless: true
+    } : undefined,
     style: style,
     children: [focusRing, /*#__PURE__*/_jsx(Animated.View, {
       testID: "copy-button-glyph",

package/lib/module/modules/copy-button/CopyButton.variants.js

@@ -42,7 +42,8 @@ export const copyButtonMenuRowStructure = createThemedVariants(theme => ({
     columnGap: theme.space[2],
     paddingHorizontal: theme.space[3],
     paddingVertical: theme.space[2],
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   }
 }));
 export const copyButtonOutlineStructure = createThemedVariants(theme => ({
@@ -53,7 +54,8 @@ export const copyButtonOutlineStructure = createThemedVariants(theme => ({
     columnGap: theme.space[1],
     paddingHorizontal: theme.space[3],
     paddingVertical: theme.space[2],
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     borderWidth: theme.borderWidths.thin
   }
 }));

package/lib/module/modules/copy-button/MODULE.md

@@ -71,3 +71,8 @@ variant) until the user retries.
 ## Performance
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`).
+
+- **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 (Android parity)** — all three variants get `android_ripple`: `icon` (round, icon-only)
+  is `borderless: true`; `button` and `menu-item` are `borderless: false` and also gained
+  `overflow: "hidden"` so the ripple clips to the row/outline shape.

package/lib/module/modules/data-table/DataTable.js

@@ -13,9 +13,12 @@
 
 import { memo, useCallback, useMemo, useState } from "react";
 import { Platform, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import Animated from "react-native-reanimated";
 import { HEADING_LEVEL, HeadingView } from "../../core/heading/index.js";
 import { Icon } from "../../core/icon/index.js";
+import { usePressState } from "../../core/motion/usePressState.js";
 import { VirtualList } from "../../core/list/index.js";
+import { rippleColor, stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
 import { Checkbox } from "../checkbox/index.js";
 import { EmptyState } from "../empty-state/index.js";
@@ -23,6 +26,7 @@ import { Skeleton } from "../skeleton/index.js";
 import { DATA_TABLE_DEFAULT_ROW_HEIGHT, DATA_TABLE_HEADER_HEIGHT, DATA_TABLE_SKELETON_CELL_HEIGHT, DATA_TABLE_SKELETON_ROW_COUNT, DATA_TABLE_SORT_ICON_SIZE, dataTableCellStructure, dataTableFocusRingStructure, dataTableHeaderRowStructure, dataTableRowStructure, dataTableSelectCellStructure, nextSortDirection, resolveColumnWidth, resolveDataTableColors, resolveDefaultCellText, resolveRowBackground, resolveSelectAllSelection, resolveSelectAllState, resolveSortAccessibilityLabel, resolveSortIcon, resolveTotalWidth, rowTouchSlop, toggleSelectionKey } from "./DataTable.variants.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const ICON_STROKE = 2;
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 const EMPTY_SELECTION = [];
 const SKELETON_ROW_INDICES = Array.from({
   length: DATA_TABLE_SKELETON_ROW_COUNT
@@ -396,7 +400,7 @@ function DataTableRowInner({
   specs,
   rowStyle,
   background,
-  pressedBackground,
+  pressedBackground: _pressedBackground,
   textStyle,
   focusRingStyle,
   selectable,
@@ -406,7 +410,8 @@ function DataTableRowInner({
   hitSlop,
   testID
 }) {
-  // Keyboard / external-keyboard / assistive-tech focus (no-op on pure touch, correct everywhere else).
+  const theme = useTheme();
+  const press = usePressState(onPress === undefined);
   const [focused, setFocused] = useState(false);
   const handleToggle = useCallback(() => onToggleSelect(rowKey), [onToggleSelect, rowKey]);
   const handlePress = useCallback(() => onPress?.(row, index), [onPress, row, index]);
@@ -415,11 +420,15 @@ function DataTableRowInner({
   const staticStyle = useMemo(() => [rowStyle, {
     backgroundColor: background
   }], [rowStyle, background]);
-  const pressableStyle = useCallback(({
-    pressed
-  }) => [rowStyle, {
-    backgroundColor: pressed ? pressedBackground : background
-  }], [rowStyle, background, pressedBackground]);
+  const pressableStyle = useMemo(() => [rowStyle, {
+    backgroundColor: background,
+    overflow: "hidden"
+  }, press.animatedStyle], [rowStyle, background, press.animatedStyle]);
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.md]);
   const cells = /*#__PURE__*/_jsxs(_Fragment, {
     children: [selectable && /*#__PURE__*/_jsx(View, {
       style: SELECT_CELL_STRUCTURE,
@@ -444,15 +453,25 @@ function DataTableRowInner({
       children: cells
     });
   }
-  return /*#__PURE__*/_jsxs(Pressable, {
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
     testID: testID,
     accessibilityRole: "button",
     hitSlop: hitSlop,
     onPress: handlePress,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onLayout: press.onLayout,
     onFocus: handleFocus,
     onBlur: handleBlur,
+    android_ripple: Platform.OS === "android" ? {
+      color: rippleColor(theme.mode),
+      borderless: false
+    } : undefined,
     style: pressableStyle,
-    children: [focused && /*#__PURE__*/_jsx(View, {
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+    }), focused && /*#__PURE__*/_jsx(View, {
       pointerEvents: "none",
       testID: testID === undefined ? undefined : `${testID}-focus-ring`,
       style: focusRingStyle

package/lib/module/modules/data-table/DataTable.variants.js

@@ -1,5 +1,6 @@
 "use strict";
 
+import { StyleSheet } from "react-native";
 /**
  * DataTable's style + behaviour resolution — the same split every sibling module copies
  * (see `Select.variants.ts` / `Menu.variants.ts`):
@@ -129,12 +130,12 @@ export const dataTableRowStructure = createVariants({
     alignItems: "stretch"
   }
 });
-export const dataTableHeaderRowStructure = createThemedVariants(theme => ({
+export const dataTableHeaderRowStructure = createThemedVariants(_theme => ({
   base: {
     flexDirection: "row",
     alignItems: "stretch",
     height: DATA_TABLE_HEADER_HEIGHT,
-    borderBottomWidth: theme.borderWidths.thin
+    borderBottomWidth: StyleSheet.hairlineWidth
   }
 }));
 export const dataTableCellStructure = createThemedVariants(theme => ({

package/lib/module/modules/data-table/MODULE.md

@@ -118,6 +118,7 @@ never sorts `data` itself and never owns `selectedKeys` — it reports the next
 - **Row press vs. the selection checkbox** — the checkbox is its own nested `Pressable`; RN's
   responder system lets the innermost element claim a touch, so pressing the checkbox never also
   fires `onRowPress` (the standard, well-established RN pattern for a checkbox-in-row).
+- **Row press feedback** — `usePressState` (scale + state-layer overlay) when `onRowPress` is set.
 - **Default cell text** reads `row[column.key]` through a narrow, documented `unknown` escape —
   `T` is intentionally unconstrained so any row shape works without a `render`.