pixelize-native-library 1.2.0 → 1.2.1

package/lib/module/modules/banner/Banner.js

@@ -11,10 +11,16 @@
  */
 
 import { memo, useCallback, useMemo } from "react";
-import { Animated, Pressable, Text, View } from "react-native";
+import { Animated, Platform, Pressable, Text as RNText, View } from "react-native";
+import Reanimated, { FadeInDown, FadeOut, LinearTransition, ReduceMotion } from "react-native-reanimated";
 import { Icon } from "../../core/icon/index.js";
 import { useEnterExit } from "../../core/motion/index.js";
+import { concentric } from "../../core/style/index.js";
+import { elevation, 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 { useTheme } from "../../theme/hooks.js";
+import { resolveTextStyle } from "../text/Text.variants.js";
 import { BANNER_DISMISS_ICON_SIZE, BANNER_ICON_SIZE, BANNER_MIN_TOUCH_TARGET, bannerStructure, resolveBannerAccessibility, resolveBannerIcon, resolveBannerTone } from "./Banner.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_STROKE = 2;
@@ -38,6 +44,7 @@ export const Banner = /*#__PURE__*/memo(function Banner({
   onDismiss,
   dismissLabel = "Dismiss",
   action,
+  actions,
   style,
   testID
 }) {
@@ -50,13 +57,25 @@ export const Banner = /*#__PURE__*/memo(function Banner({
     message
   }), [tone, title, message]);
   const glyph = icon === null ? undefined : icon ?? resolveBannerIcon(tone);
-  const handleAction = useCallback(() => action?.onPress(), [action]);
+  const handleAction = useCallback(item => item.onPress(), []);
+  const bannerActions = useMemo(() => {
+    const list = [];
+    if (action !== undefined) list.push(action);
+    if (actions !== undefined) list.push(...actions);
+    return list;
+  }, [action, actions]);
+  const floatingStyle = useMemo(() => {
+    highlight("subtle", theme.mode);
+    elevation(elevationTokens.sm);
+    void theme.elevatedSurfaces;
+    return floatingSurfaceStyle(theme, "sm");
+  }, [theme]);
+  const iconChipRadius = useMemo(() => concentric(theme.radii.lg, theme.space[3]), [theme.radii.lg, theme.space]);
 
   // `style` stays last; the enter/exit style holds only opacity/transform, which `LayoutStyle` cannot name.
   const rootStyle = useMemo(() => [bannerStructure(theme), {
-    backgroundColor: colors.fill,
-    borderColor: colors.border
-  }, enterExit.style, style], [theme, colors, enterExit.style, style]);
+    backgroundColor: colors.fill
+  }, floatingStyle, enterExit.style, style], [theme, floatingStyle, colors, enterExit.style, style]);
   const contentStyle = useMemo(() => ({
     flex: 1,
     rowGap: theme.space[1]
@@ -64,72 +83,99 @@ export const Banner = /*#__PURE__*/memo(function Banner({
   const textBlockStyle = useMemo(() => ({
     rowGap: theme.space[1]
   }), [theme]);
-  const titleStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.semibold), {
-    fontSize: theme.fontSizes.md,
+  const titleStyle = useMemo(() => [resolveTextStyle(theme, "subheading"), {
     color: colors.text
-  }], [theme, colors]);
-  const messageStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
-    fontSize: theme.fontSizes.sm,
+  }], [theme, colors.text]);
+  const messageStyle = useMemo(() => [resolveTextStyle(theme, "body-sm"), {
     color: colors.text
-  }], [theme, colors]);
-  const actionStyle = useMemo(() => ({
-    alignSelf: "flex-start",
-    paddingVertical: theme.space[1]
-  }), [theme]);
-  const actionLabelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.semibold), {
-    fontSize: theme.fontSizes.sm,
+  }], [theme, colors.text]);
+  const actionLabelStyle = useMemo(() => [resolveTextStyle(theme, "label-sm"), {
     color: colors.text,
     textDecorationLine: "underline"
-  }], [theme, colors]);
+  }], [theme, colors.text]);
+  const actionRowStyle = useMemo(() => ({
+    flexDirection: "row",
+    flexWrap: "wrap",
+    columnGap: theme.space[3]
+  }), [theme]);
   const actionHitSlop = useMemo(() => hitSlopFor(theme.fontSizes.sm), [theme]);
+  const actionRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
+  const dismissRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: true
+  } : undefined, [theme.mode]);
   if (!enterExit.mounted) return null;
-  return /*#__PURE__*/_jsxs(Animated.View, {
+  return /*#__PURE__*/_jsx(Reanimated.View, {
     testID: testID,
-    style: rootStyle,
-    children: [glyph && /*#__PURE__*/_jsx(Icon, {
-      name: glyph,
-      size: BANNER_ICON_SIZE,
-      color: colors.text,
-      strokeWidth: ICON_STROKE
-    }), /*#__PURE__*/_jsxs(View, {
-      style: contentStyle,
-      children: [/*#__PURE__*/_jsxs(View, {
-        accessible: a11y.accessible,
-        accessibilityRole: a11y.accessibilityRole,
-        accessibilityLabel: a11y.accessibilityLabel,
-        style: textBlockStyle,
-        children: [title && /*#__PURE__*/_jsx(Text, {
-          style: titleStyle,
-          children: title
-        }), /*#__PURE__*/_jsx(Text, {
-          style: messageStyle,
-          children: message
+    entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
+    exiting: FadeOut.reduceMotion(ReduceMotion.System),
+    layout: LinearTransition.reduceMotion(ReduceMotion.System),
+    children: /*#__PURE__*/_jsxs(Animated.View, {
+      style: rootStyle,
+      children: [glyph && /*#__PURE__*/_jsx(View, {
+        style: {
+          borderRadius: iconChipRadius,
+          borderCurve: "continuous",
+          overflow: "hidden",
+          padding: theme.space[1]
+        },
+        children: /*#__PURE__*/_jsx(Icon, {
+          name: glyph,
+          size: BANNER_ICON_SIZE,
+          color: colors.text,
+          strokeWidth: ICON_STROKE
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: contentStyle,
+        children: [/*#__PURE__*/_jsxs(View, {
+          accessible: a11y.accessible,
+          accessibilityRole: a11y.accessibilityRole,
+          accessibilityLabel: a11y.accessibilityLabel,
+          style: textBlockStyle,
+          children: [title && /*#__PURE__*/_jsx(RNText, {
+            style: titleStyle,
+            children: title
+          }), /*#__PURE__*/_jsx(RNText, {
+            style: messageStyle,
+            children: message
+          })]
+        }), bannerActions.length > 0 && /*#__PURE__*/_jsx(View, {
+          style: actionRowStyle,
+          children: bannerActions.map((item, index) => /*#__PURE__*/_jsx(Pressable, {
+            testID: testID ? `${testID}-action-${index}` : undefined,
+            accessibilityRole: "button",
+            accessibilityLabel: item.label,
+            onPress: () => handleAction(item),
+            hitSlop: actionHitSlop,
+            android_ripple: actionRipple,
+            style: {
+              alignSelf: "flex-start",
+              paddingVertical: theme.space[1]
+            },
+            children: /*#__PURE__*/_jsx(RNText, {
+              style: actionLabelStyle,
+              children: item.label
+            })
+          }, `${item.label}-${index}`))
         })]
-      }), action && /*#__PURE__*/_jsx(Pressable, {
-        testID: testID ? `${testID}-action` : undefined,
+      }), onDismiss && /*#__PURE__*/_jsx(Pressable, {
+        testID: testID ? `${testID}-dismiss` : undefined,
         accessibilityRole: "button",
-        accessibilityLabel: action.label,
-        onPress: handleAction,
-        hitSlop: actionHitSlop,
-        style: actionStyle,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: actionLabelStyle,
-          children: action.label
+        accessibilityLabel: dismissLabel,
+        onPress: onDismiss,
+        hitSlop: DISMISS_HIT_SLOP,
+        android_ripple: dismissRipple,
+        children: /*#__PURE__*/_jsx(Icon, {
+          name: "x",
+          size: BANNER_DISMISS_ICON_SIZE,
+          color: colors.text,
+          strokeWidth: ICON_STROKE
         })
       })]
-    }), onDismiss && /*#__PURE__*/_jsx(Pressable, {
-      testID: testID ? `${testID}-dismiss` : undefined,
-      accessibilityRole: "button",
-      accessibilityLabel: dismissLabel,
-      onPress: onDismiss,
-      hitSlop: DISMISS_HIT_SLOP,
-      children: /*#__PURE__*/_jsx(Icon, {
-        name: "x",
-        size: BANNER_DISMISS_ICON_SIZE,
-        color: colors.text,
-        strokeWidth: ICON_STROKE
-      })
-    })]
+    })
   });
 });
 //# sourceMappingURL=Banner.js.map

package/lib/module/modules/banner/Banner.variants.js

@@ -109,8 +109,8 @@ export const bannerStructure = createThemedVariants(theme => ({
     alignItems: "flex-start",
     columnGap: theme.space[3],
     padding: theme.space[3],
-    borderRadius: theme.radii.base,
-    borderWidth: theme.borderWidths.thin
+    borderRadius: theme.radii.lg,
+    borderCurve: "continuous"
   },
   variants: {},
   defaultVariants: {}

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

@@ -30,9 +30,10 @@ of a family that is easy to confuse:
 | `icon` | `IconName \| null` | per tone | `null` suppresses the glyph entirely. |
 | `onDismiss` | `() => void` | — | Absent = the banner cannot be closed. |
 | `dismissLabel` | `string` | `"Dismiss"` | Screen-reader name for the close control. |
-| `action` | `{ label, onPress }` | — | One inline action; more than one belongs in a dialog. |
+| `action` | `{ label, onPress }` | — | One inline action; use with `actions` for multiple. |
+| `actions` | `BannerAction[]` | — | Additional actions rendered after `action`. |
 | `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
-| `testID` | `string` | — | Seeds `${testID}-dismiss` and `${testID}-action`. |
+| `testID` | `string` | — | Seeds `${testID}-dismiss` and `${testID}-action-{index}`. |
 
 ## Accessibility contract (WCAG)
 
@@ -57,6 +58,10 @@ of a family that is easy to confuse:
   canvas instead — otherwise a solid banner could be invisible on a same-toned page.
 - **2.5.8 / 2.5.5 target size** — the dismiss glyph (16dp) and the action label are padded to a 44dp
   touch target via `hitSlop`, so the visual size never dictates the tap size.
+- **Android touch feedback** — both the dismiss control and the action link carry `android_ripple`
+  (`rippleColor(theme.mode)`), gated on `Platform.OS === "android"`. The dismiss glyph is
+  round/icon-only, so its ripple is `borderless: true`; the action link is a text target, so its
+  ripple is `borderless: false`.
 - **2.3.3** — nothing animates; a banner appears and stays. Nothing to suppress.
 - **1.3.1** — the tone icon is redundant with the accessible title/message node right beside it (the
   glyph repeats what `resolveBannerAccessibility`'s `alert`/`text` role and label already say), so it

package/lib/module/modules/bottom-nav/BottomNav.js

@@ -27,6 +27,7 @@
 
 import { memo, useCallback, useMemo } from "react";
 import { Platform, StyleSheet, View } from "react-native";
+import { floatingBackground, floatingSurfaceStyle } from "../../theme/platform/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { Button } from "../button/index.js";
 import { Drawer } from "../drawer/index.js";
@@ -82,6 +83,10 @@ export const BottomNav = /*#__PURE__*/memo(function BottomNav(props) {
     testID
   } = props;
   const theme = useTheme();
+  const barDepth = useMemo(() => ({
+    backgroundColor: floatingBackground(theme, "md"),
+    ...floatingSurfaceStyle(theme, "md")
+  }), [theme]);
   const bottomInset = resolveBottomNavBottomInset(theme.space[2], Platform.OS);
   const moreSelected = active.kind === "more";
   const overflowBadgeTotal = resolveBottomNavOverflowBadgeTotal(overflowSections);
@@ -109,9 +114,7 @@ export const BottomNav = /*#__PURE__*/memo(function BottomNav(props) {
     children: [/*#__PURE__*/_jsxs(View, {
       testID: testID,
       accessibilityRole: "tablist",
-      style: [bottomNavBarStructure(theme), {
-        backgroundColor: theme.colors.bg.surface,
-        borderTopColor: theme.colors.border.default,
+      style: [bottomNavBarStructure(theme), barDepth, {
         paddingBottom: bottomInset
       }, style],
       children: [coreTabs.map(tab => /*#__PURE__*/_jsx(BottomNavTab, {

package/lib/module/modules/bottom-nav/BottomNav.variants.js

@@ -120,8 +120,8 @@ export function resolveOverflowSheetHeight(windowHeight) {
  */
 export function resolveBottomNavTabColors(colors, active) {
   return {
-    icon: active ? colors.fg.default : colors.fg.muted,
-    label: active ? colors.fg.default : colors.fg.muted,
+    icon: active ? colors.accent.text : colors.fg.muted,
+    label: active ? colors.accent.text : colors.fg.muted,
     indicator: colors.accent.solid
   };
 }
@@ -157,13 +157,10 @@ export function resolveEditRowState(input) {
   };
 }
 
-/** The bar container: tabs laid out as equal-width flex children, top border separating it from the
- *  screen content above. Colour (border, background) is resolved from role tokens and applied
- *  inline over this — never a hardcoded hex here. */
-export const bottomNavBarStructure = createThemedVariants(theme => ({
+/** Tabs laid out as equal-width flex children; the bar separates from content by tone + elevation. */
+export const bottomNavBarStructure = createThemedVariants(_theme => ({
   base: {
-    flexDirection: "row",
-    borderTopWidth: theme.borderWidths.thin
+    flexDirection: "row"
   }
 }));
 
@@ -190,7 +187,8 @@ export const bottomNavFocusRingStructure = createThemedVariants(theme => ({
     right: 0,
     bottom: 0,
     borderWidth: theme.borderWidths.thick,
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   }
 }));
 
@@ -242,7 +240,8 @@ export const editRowStructure = createThemedVariants(theme => ({
     minHeight: MIN_TOUCH_TARGET,
     columnGap: theme.space[2],
     paddingHorizontal: theme.space[3],
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   }
 }));
 //# sourceMappingURL=BottomNav.variants.js.map

package/lib/module/modules/bottom-nav/BottomNavOverflowSheet.js

@@ -21,10 +21,11 @@
  */
 
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Animated, Pressable, ScrollView, StyleSheet, Text, useWindowDimensions, View } from "react-native";
+import { Animated, Platform, Pressable, ScrollView, StyleSheet, Text, useWindowDimensions, View } from "react-native";
 import { Icon } from "../../core/icon/index.js";
 import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
 import { useTheme } from "../../theme/hooks.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { Button } from "../button/index.js";
 import { Input } from "../input/index.js";
 import { editRowStructure, EDIT_SLOT_INDICATOR_SIZE, OVERFLOW_ROW_ICON_SIZE, overflowRowStructure, overflowSectionHeaderStructure, resolveBottomNavBadge, resolveBottomNavDestinationAccessibilityLabel, resolveEditRowState, resolveOverflowSheetHeight } from "./BottomNav.variants.js";
@@ -71,6 +72,14 @@ export const BottomNavOverflowSheet = /*#__PURE__*/memo(function BottomNavOverfl
     }
     wasEditing.current = isEditing;
   }, [edit?.editing, coreTabs.length]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode)
+  } : undefined, [theme.mode]);
+  const rowStyle = useCallback(({
+    pressed
+  }) => [overflowRowStructure(theme), pressed && {
+    backgroundColor: theme.colors.bg.sunken
+  }], [theme]);
   const sheetHeight = resolveOverflowSheetHeight(windowHeight);
   const isSearching = normalizeQuery(query).length > 0;
   const matches = isSearching ? matchDestinations(query, overflowSections) : [];
@@ -107,7 +116,8 @@ export const BottomNavOverflowSheet = /*#__PURE__*/memo(function BottomNavOverfl
     }),
     "aria-selected": isRowSelected(destination.id),
     onPress: () => handleRowPress(destination),
-    style: overflowRowStructure(theme),
+    android_ripple: androidRipple,
+    style: rowStyle,
     children: [/*#__PURE__*/_jsx(BottomNavIconWithBadge, {
       icon: destination.icon,
       iconSize: OVERFLOW_ROW_ICON_SIZE,
@@ -177,7 +187,12 @@ export const BottomNavOverflowSheet = /*#__PURE__*/memo(function BottomNavOverfl
           testID: testID ? `${testID}-reset` : undefined,
           accessibilityRole: "menuitem",
           onPress: edit.onResetToDefault,
-          style: editRowStructure(theme),
+          android_ripple: androidRipple,
+          style: ({
+            pressed
+          }) => [editRowStructure(theme), pressed && {
+            backgroundColor: theme.colors.bg.sunken
+          }],
           children: [/*#__PURE__*/_jsx(Icon, {
             name: "refresh-cw",
             size: OVERFLOW_ROW_ICON_SIZE,
@@ -251,6 +266,14 @@ const EditSlotChip = /*#__PURE__*/memo(function EditSlotChip({
   const opacityMotionStyle = useMemo(() => ({
     opacity
   }), [opacity]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode)
+  } : undefined, [theme.mode]);
+  const chipStyle = useCallback(({
+    pressed
+  }) => [editRowStructure(theme), pressed && {
+    backgroundColor: theme.colors.bg.sunken
+  }], [theme]);
   useEffect(() => {
     const toValue = selected ? 1 : 0;
     running.current?.stop();
@@ -278,7 +301,8 @@ const EditSlotChip = /*#__PURE__*/memo(function EditSlotChip({
     },
     accessibilityLabel: `${tab.label}, slot ${index + 1}`,
     onPress: () => onPress(index),
-    style: editRowStructure(theme),
+    android_ripple: androidRipple,
+    style: chipStyle,
     children: [/*#__PURE__*/_jsx(Icon, {
       name: tab.icon,
       size: OVERFLOW_ROW_ICON_SIZE,

package/lib/module/modules/bottom-nav/BottomNavTab.js

@@ -16,12 +16,16 @@
  */
 
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Animated, Pressable, StyleSheet, Text } from "react-native";
+import { Animated, Platform, Pressable, StyleSheet, Text } from "react-native";
+import Reanimated from "react-native-reanimated";
 import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { usePressState } from "../../core/motion/usePressState.js";
+import { rippleColor, stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
 import { BOTTOM_NAV_ACTIVE_DOT_SIZE, BOTTOM_NAV_ICON_SIZE, BOTTOM_NAV_SETTLE_SCALE, bottomNavFocusRingStructure, bottomNavTabStructure, resolveBottomNavAccessibility, resolveBottomNavBadge, resolveBottomNavDestinationAccessibilityLabel, resolveBottomNavTabColors } from "./BottomNav.variants.js";
 import { BottomNavIconWithBadge } from "./BottomNavIconWithBadge.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedPressable = Reanimated.createAnimatedComponent(Pressable);
 export const BottomNavTab = /*#__PURE__*/memo(function BottomNavTab({
   id,
   label,
@@ -36,6 +40,7 @@ export const BottomNavTab = /*#__PURE__*/memo(function BottomNavTab({
 }) {
   const theme = useTheme();
   const motion = useMotion();
+  const press = usePressState(false);
   const [focused, setFocused] = useState(false);
   const colors = resolveBottomNavTabColors(theme.colors, selected);
   const a11y = resolveBottomNavAccessibility({
@@ -71,7 +76,16 @@ export const BottomNavTab = /*#__PURE__*/memo(function BottomNavTab({
   const handlePress = useCallback(() => onPress(id), [onPress, id]);
   const handleFocus = useCallback(() => setFocused(true), []);
   const handleBlur = useCallback(() => setFocused(false), []);
-  return /*#__PURE__*/_jsxs(Pressable, {
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.md]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
     testID: testID,
     accessibilityRole: a11y.accessibilityRole,
     accessibilityLabel: resolveBottomNavDestinationAccessibilityLabel({
@@ -83,10 +97,20 @@ export const BottomNavTab = /*#__PURE__*/memo(function BottomNavTab({
     "aria-expanded": a11y["aria-expanded"],
     "aria-disabled": a11y["aria-disabled"],
     onPress: handlePress,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onLayout: press.onLayout,
     onFocus: handleFocus,
     onBlur: handleBlur,
-    style: bottomNavTabStructure(theme),
-    children: [focused && /*#__PURE__*/_jsx(Animated.View, {
+    android_ripple: androidRipple,
+    style: [bottomNavTabStructure(theme), {
+      overflow: "hidden"
+    }, press.animatedStyle],
+    children: [/*#__PURE__*/_jsx(Reanimated.View, {
+      pointerEvents: "none",
+      testID: testID ? `${testID}-press-overlay` : undefined,
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+    }), focused && /*#__PURE__*/_jsx(Animated.View, {
       pointerEvents: "none",
       testID: testID ? `${testID}-focus-ring` : undefined,
       style: [bottomNavFocusRingStructure(theme), {

package/lib/module/modules/bottom-nav/MODULE.md

@@ -134,7 +134,8 @@ imports `@react-native-async-storage/async-storage` and never reads a value it w
   modes, in `BottomNav.test.ts` — never eyeballed.
 - **2.3.3** — every animation here runs through `core/motion`'s `useMotion()` (opacity + transform
   only, always native-driver): the active-tab dot, the badge settle, and the edit-mode slot
-  indicator. When `motion.enabled` is false the animated value is `setValue`'d AND the resting style
+  indicator. Tab presses use `usePressState` (scale + state-layer overlay). When `motion.enabled`
+  is false the animated value is `setValue`'d AND the resting style
   is rendered outright, so the state is correct on the very first frame with no tween at all. The
   sheet's own slide/fade is inherited transitively through Drawer.
 - **2.4.7 / 2.4.11** — a `border.focus` offset ring on keyboard/AT focus per tab, identical pattern to
@@ -226,3 +227,11 @@ not a runtime guarantee); core tabs are not independently searchable from the sh
 - 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 tonal
+
+- Bar's top hairline dropped — `floatingBackground`/`floatingSurfaceStyle` already give it a tonal
+  fill plus real shadow/`elevation`, so the extra `borderTopWidth` was redundant decorative chrome.
+- Tabs gained `android_ripple` alongside their existing state-layer overlay (Button's pattern).
+- Overflow-sheet rows and edit-slot chips gained a pressed fill (`bg.sunken`) + `android_ripple` —
+  previously plain `Pressable`s with zero visual press feedback.

package/lib/module/modules/bottom-sheet/BottomSheet.js

@@ -16,12 +16,15 @@
  */
 
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Modal as RNModal, Pressable, StyleSheet, useWindowDimensions, View } from "react-native";
+import { Modal as RNModal, Platform, Pressable, StyleSheet, useWindowDimensions, View } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTiming } from "react-native-reanimated";
+import Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
 import { useMotion } from "../../core/motion/index.js";
+import { elevation, floatingBackground, floatingSurfaceStyle, highlight } from "../../theme/platform/index.js";
+import { elevation as elevationTokens } from "../../theme/tokens/primitives/index.js";
 import { useTheme } from "../../theme/hooks.js";
-import { BOTTOM_SHEET_BACKDROP, bottomSheetGrabberStructure, bottomSheetHandleStructure, bottomSheetPanelStructure, resolveBottomSheetPanelColors, resolveBottomSheetSnapOffset, resolveNearestSnapIndex } from "./BottomSheet.variants.js";
+import { BOTTOM_SHEET_BACKDROP, bottomSheetGrabberStructure, bottomSheetHandleStructure, bottomSheetPanelStructure, resolveBottomSheetBottomInset, resolveBottomSheetPanelColors, resolveBottomSheetSnapOffset, resolveNearestSnapIndex } from "./BottomSheet.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Module-level so the default never hands `snapOffsets` a fresh array identity each render. */
 const DEFAULT_SNAP_POINTS = [0.5];
@@ -44,6 +47,7 @@ export const BottomSheet = /*#__PURE__*/memo(function BottomSheet({
     height: windowHeight
   } = useWindowDimensions();
   const panelColors = useMemo(() => resolveBottomSheetPanelColors(theme.colors), [theme.colors]);
+  const bottomInset = useMemo(() => resolveBottomSheetBottomInset(theme.space[5], Platform.OS), [theme.space]);
   const [mounted, setMounted] = useState(visible);
   const mountedRef = useRef(mounted);
   mountedRef.current = mounted;
@@ -114,7 +118,7 @@ export const BottomSheet = /*#__PURE__*/memo(function BottomSheet({
     if (projected > windowHeight * DISMISS_PROJECTION) {
       slideTo(windowHeight);
       // Sliding away is not closing: the panel stays mounted and `accessibilityViewIsModal`.
-      runOnJS(onRequestClose)();
+      scheduleOnRN(onRequestClose);
       return;
     }
     const index = resolveNearestSnapIndex(projected, snapOffsets);
@@ -130,9 +134,18 @@ export const BottomSheet = /*#__PURE__*/memo(function BottomSheet({
   const scrimStyle = useAnimatedStyle(() => ({
     opacity: scrim.value
   }));
-  const rootPanelStyle = useMemo(() => [bottomSheetPanelStructure(theme), {
-    backgroundColor: panelColors.background
-  }, panelStyle, style], [theme, panelColors.background, panelStyle, style]);
+  const floatingStyle = useMemo(() => {
+    highlight("subtle", theme.mode);
+    elevation(elevationTokens.lg);
+    void theme.elevatedSurfaces;
+    return {
+      backgroundColor: floatingBackground(theme, "lg"),
+      ...floatingSurfaceStyle(theme, "lg")
+    };
+  }, [theme]);
+  const rootPanelStyle = useMemo(() => [bottomSheetPanelStructure(theme), floatingStyle, {
+    paddingBottom: bottomInset
+  }, panelStyle, style], [theme, floatingStyle, bottomInset, panelStyle, style]);
   const grabberStyle = useMemo(() => [bottomSheetGrabberStructure(theme), {
     backgroundColor: panelColors.grabber
   }], [theme, panelColors.grabber]);

package/lib/module/modules/bottom-sheet/BottomSheet.variants.js

@@ -1,7 +1,17 @@
 "use strict";
 
 import { createThemedVariants } from "../../core/style/index.js";
-export const BOTTOM_SHEET_BACKDROP = "#00000080";
+import { withAlpha } from "../../core/gradient/index.js";
+import { MOTION_TRANSFORM } from "../../core/motion/config.js";
+
+// Shared `scrimOpacity` knob, not a locally-guessed hex suffix — same resting value as Modal/Drawer/Menu.
+export const BOTTOM_SHEET_BACKDROP = withAlpha("#000000", MOTION_TRANSFORM.scrimOpacity);
+
+// Duplicated from Drawer's resolver on purpose — no react-native-safe-area-context peer dependency.
+export const BOTTOM_SHEET_IOS_HOME_INDICATOR_INSET = 20;
+export function resolveBottomSheetBottomInset(basePadding, platformOS) {
+  return platformOS === "ios" ? basePadding + BOTTOM_SHEET_IOS_HOME_INDICATOR_INSET : basePadding;
+}
 export function resolveBottomSheetSnapOffset(snapFraction, windowHeight) {
   const clamped = Math.max(0.1, Math.min(0.95, snapFraction));
   return windowHeight * (1 - clamped);
@@ -27,10 +37,10 @@ export function resolveBottomSheetPanelColors(colors) {
 }
 export const bottomSheetPanelStructure = createThemedVariants(theme => ({
   base: {
-    borderTopLeftRadius: theme.radii.lg,
-    borderTopRightRadius: theme.radii.lg,
-    maxHeight: "92%",
-    paddingBottom: theme.space[5]
+    borderTopLeftRadius: theme.radii.xl,
+    borderTopRightRadius: theme.radii.xl,
+    borderCurve: "continuous",
+    maxHeight: "92%"
   }
 }));
 export const bottomSheetHandleStructure = createThemedVariants(theme => ({

package/lib/module/modules/bottom-sheet/MODULE.md

@@ -9,7 +9,7 @@ dismissal path reports through `onRequestClose` and lets the parent flip `visibl
 
 - backdrop press, and `onAccessibilityEscape` on the panel;
 - a swipe released past `DISMISS_PROJECTION` (0.85 of the window, velocity folded in) — the gesture
-  slides the panel out **and** `runOnJS(onRequestClose)()`.
+  slides the panel out **and** `scheduleOnRN(onRequestClose)`.
 
 The panel carries `accessibilityViewIsModal` for as long as it is mounted, so a swipe that only slid
 it off-screen would leave a VoiceOver user sealed inside an invisible modal. That is why the gesture
@@ -41,7 +41,18 @@ Nothing is wired here on purpose. BottomSheet always presents through React Nati
 grabber. The grabber is the sheet's only drag target (the pan is attached to the handle, not the
 panel body), so WCAG 1.4.11 applies: the previous `border.default` is the decorative boundary role
 and measured **1.16–1.43:1** on the surface across all 18 palettes. `border.interactive` clears 3:1
-everywhere (min 3.32, emerald light). The backdrop is a fixed `#00000080` scrim, not a palette role.
+everywhere (min 3.32, emerald light). The backdrop (`BOTTOM_SHEET_BACKDROP`) is
+`withAlpha("#000000", MOTION_TRANSFORM.scrimOpacity)` — the same shared `scrimOpacity` knob as
+Modal/Drawer/Menu's resting scrim, not a locally-guessed hex suffix — still not a palette role.
+
+## Known gaps
+
+- **No `react-native-safe-area-context` wiring** — same gap `Drawer` documents: listed as an
+  optional peer but not a real `peerDependencies` entry. Bottom padding instead uses
+  `resolveBottomSheetBottomInset` (a caller-supplied base padding + a static
+  `BOTTOM_SHEET_IOS_HOME_INDICATOR_INSET` on iOS), duplicated locally rather than sharing `Drawer`'s
+  resolver on purpose — modules never import across `src/modules/*`. Revisit once the package
+  becomes a real peer dependency.
 
 ## Tests