pixelize-native-library 1.2.0 → 1.2.1

package/lib/module/modules/date-picker/Calendar.js

@@ -19,15 +19,20 @@
  */
 
 import { memo, useCallback, useMemo, useRef, useState } from "react";
-import { Pressable, Text, View } from "react-native";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import Animated from "react-native-reanimated";
 import { Icon } from "../../core/icon/index.js";
+import { usePressState } from "../../core/motion/usePressState.js";
+import { concentric } from "../../core/style/index.js";
+import { stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
 import { Button } from "../button/index.js";
 import { useCalendarGridFocus, useCalendarGridKeys } from "./Calendar.keys";
-import { addMonths, atNoon, buildMonthGrid, calendarDayCellStructure, calendarGridStructure, calendarHeaderButtonStructure, calendarHeaderStructure, calendarStructure, calendarWeekRowStructure, calendarWeekdayCellStructure, canShowMonth, canShowYear, chunkIntoWeeks, clampToRange, DEFAULT_FIRST_DAY_OF_WEEK, DEFAULT_LOCALE, EMPTY_RANGE, dayOrdinal, formatMonthYear, formatYear, isDateDisabled, isSameDay, isWithinRange, monthCursorOf, monthShortNames, nextRangeSelection, quickJumpCellStructure, quickJumpGridStructure, resolveCalendarChromeColors, resolveCalendarDayAccessibility, resolveCalendarDayColors, resolveCalendarFocusMove, toDayKey, weekdayLabels } from "./DatePicker.variants.js";
+import { addMonths, atNoon, buildMonthGrid, calendarDayCellStructure, calendarGridStructure, calendarHeaderButtonStructure, calendarHeaderStructure, calendarStructure, calendarWeekRowStructure, calendarWeekdayCellStructure, canShowMonth, canShowYear, chunkIntoWeeks, clampToRange, DEFAULT_FIRST_DAY_OF_WEEK, DEFAULT_LOCALE, EMPTY_RANGE, dayOrdinal, formatMonthYear, formatYear, isDateDisabled, isSameDay, isWithinRange, monthCursorOf, monthShortNames, nextRangeSelection, quickJumpCellStructure, quickJumpGridStructure, resolveCalendarChromeColors, resolveCalendarDayAccessibility, resolveCalendarDayColors, resolveCalendarFocusMove, resolvePressedAccessibilityState, toDayKey, weekdayLabels } from "./DatePicker.variants.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const ICON_STROKE = 2;
 const HEADER_ICON_SIZE = 18;
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 const CalendarDayCell = /*#__PURE__*/memo(function CalendarDayCell({
   date,
   dayOfMonth,
@@ -42,6 +47,7 @@ const CalendarDayCell = /*#__PURE__*/memo(function CalendarDayCell({
   onPress,
   testID
 }) {
+  const press = usePressState(disabled);
   const a11y = useMemo(() => resolveCalendarDayAccessibility({
     date,
     selected,
@@ -74,26 +80,39 @@ const CalendarDayCell = /*#__PURE__*/memo(function CalendarDayCell({
   const handlePress = useCallback(() => {
     if (!disabled) onPress(date);
   }, [disabled, onPress, date]);
-  const cellStyle = useCallback(({
-    pressed
-  }) => [cellStructure, {
-    backgroundColor: pressed ? pressedBackground : resting.background,
-    borderColor: resting.ring
-  }], [cellStructure, pressedBackground, resting.background, resting.ring]);
-  return /*#__PURE__*/_jsx(Pressable, {
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: concentric(theme.radii.md, theme.space[1]),
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.md]);
+  const cellStyle = useMemo(() => [cellStructure, {
+    backgroundColor: resting.background,
+    borderColor: resting.ring,
+    overflow: "hidden"
+  }, press.pressed && !disabled && {
+    backgroundColor: pressedBackground
+  }, press.animatedStyle], [cellStructure, resting, pressedBackground, press.pressed, press.animatedStyle, disabled]);
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
     testID: testID,
     accessibilityRole: a11y.accessibilityRole,
     accessibilityLabel: a11y.accessibilityLabel,
-    "aria-selected": a11y["aria-selected"],
+    "aria-pressed": a11y["aria-pressed"],
+    accessibilityState: a11y.accessibilityState,
     "aria-disabled": a11y["aria-disabled"],
     disabled: disabled,
     tabIndex: tabIndex,
     onPress: handlePress,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onLayout: press.onLayout,
     style: cellStyle,
-    children: /*#__PURE__*/_jsx(Text, {
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+    }), /*#__PURE__*/_jsx(Text, {
       style: labelStyle,
       children: dayOfMonth
-    })
+    })]
   });
 });
 const QuickJumpCell = /*#__PURE__*/memo(function QuickJumpCell({
@@ -105,6 +124,7 @@ const QuickJumpCell = /*#__PURE__*/memo(function QuickJumpCell({
   onPress,
   testID
 }) {
+  const press = usePressState(disabled);
   const resting = useMemo(() => resolveCalendarDayColors(theme.colors, {
     selected,
     inRange: false,
@@ -129,24 +149,38 @@ const QuickJumpCell = /*#__PURE__*/memo(function QuickJumpCell({
   const handlePress = useCallback(() => {
     if (!disabled) onPress(month);
   }, [disabled, onPress, month]);
-  const cellStyle = useCallback(({
-    pressed
-  }) => [cellStructure, {
-    backgroundColor: pressed ? pressedBackground : resting.background
-  }], [cellStructure, pressedBackground, resting.background]);
-  return /*#__PURE__*/_jsx(Pressable, {
+  const pressedState = useMemo(() => resolvePressedAccessibilityState(selected), [selected]);
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: concentric(theme.radii.md, theme.space[1]),
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.md]);
+  const cellStyle = useMemo(() => [cellStructure, {
+    backgroundColor: resting.background,
+    overflow: "hidden"
+  }, press.pressed && !disabled && {
+    backgroundColor: pressedBackground
+  }, press.animatedStyle], [cellStructure, resting.background, pressedBackground, press.pressed, press.animatedStyle, disabled]);
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
     testID: testID,
     accessibilityRole: "button",
     accessibilityLabel: name,
-    "aria-selected": selected,
+    "aria-pressed": pressedState["aria-pressed"],
+    accessibilityState: pressedState.accessibilityState,
     "aria-disabled": disabled,
     disabled: disabled,
     onPress: handlePress,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onLayout: press.onLayout,
     style: cellStyle,
-    children: /*#__PURE__*/_jsx(Text, {
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+    }), /*#__PURE__*/_jsx(Text, {
       style: labelStyle,
       children: name
-    })
+    })]
   });
 });
 export const Calendar = /*#__PURE__*/memo(function Calendar({
@@ -165,6 +199,7 @@ export const Calendar = /*#__PURE__*/memo(function Calendar({
   testID
 }) {
   const theme = useTheme();
+  const headerPress = usePressState(false);
   const chrome = useMemo(() => resolveCalendarChromeColors(theme.colors), [theme.colors]);
   const range = rangeValue ?? EMPTY_RANGE;
   const anchor = mode === "range" ? range.start : value ?? null;
@@ -225,11 +260,14 @@ export const Calendar = /*#__PURE__*/memo(function Calendar({
     color: chrome.headerLabel
   }], [theme, chrome.headerLabel]);
   const headerButtonBase = useMemo(() => calendarHeaderButtonStructure(theme), [theme]);
-  const headerButtonStyle = useCallback(({
-    pressed
-  }) => [headerButtonBase, pressed && {
-    backgroundColor: chrome.headerPressed
-  }], [headerButtonBase, chrome.headerPressed]);
+  const headerButtonStyle = useMemo(() => [headerButtonBase, {
+    overflow: "hidden"
+  }, headerPress.animatedStyle], [headerButtonBase, headerPress.animatedStyle]);
+  const headerOverlayStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.md]);
   const weekDescriptors = useMemo(() => weeks.map(week => week.map(day => {
     const disabled = isDateDisabled(day.date, {
       minDate,
@@ -290,14 +328,22 @@ export const Calendar = /*#__PURE__*/memo(function Calendar({
         disabled: !canGoBack,
         onPress: goBack,
         testID: testID ? `${testID}-previous` : undefined
-      }), /*#__PURE__*/_jsxs(Pressable, {
+      }), /*#__PURE__*/_jsxs(AnimatedPressable, {
         testID: testID ? `${testID}-header` : undefined,
         accessibilityRole: "button",
         accessibilityLabel: quickJumpOpen ? formatYear(cursor.year, locale) : formatMonthYear(cursor, locale),
         "aria-expanded": quickJumpOpen,
         onPress: toggleQuickJump,
-        style: headerButtonStyle,
-        children: [/*#__PURE__*/_jsx(Text, {
+        onPressIn: headerPress.handlers.onPressIn,
+        onPressOut: headerPress.handlers.onPressOut,
+        onLayout: headerPress.onLayout,
+        style: [headerButtonStyle, headerPress.pressed && {
+          backgroundColor: chrome.headerPressed
+        }],
+        children: [/*#__PURE__*/_jsx(Animated.View, {
+          pointerEvents: "none",
+          style: [StyleSheet.absoluteFill, headerOverlayStyle, headerPress.overlayStyle]
+        }), /*#__PURE__*/_jsx(Text, {
           numberOfLines: 1,
           style: headerLabelStyle,
           children: quickJumpOpen ? formatYear(cursor.year, locale) : formatMonthYear(cursor, locale)

package/lib/module/modules/date-picker/DatePicker.variants.js

@@ -494,6 +494,14 @@ export function resolveDateFieldAccessibility(input) {
     disabled
   };
 }
+export function resolvePressedAccessibilityState(selected) {
+  return {
+    "aria-pressed": selected,
+    accessibilityState: {
+      selected
+    }
+  };
+}
 /** Appended to a day's label when the grid conveys the state with colour only (WCAG 1.4.1). */
 export const TODAY_SUFFIX = "today";
 export const IN_RANGE_SUFFIX = "in selected range";
@@ -505,14 +513,15 @@ export function resolveCalendarDayAccessibility(input) {
   return {
     accessibilityRole: "button",
     accessibilityLabel: parts.join(", "),
-    "aria-selected": input.selected,
-    "aria-disabled": input.disabled
+    "aria-disabled": input.disabled,
+    ...resolvePressedAccessibilityState(input.selected)
   };
 }
 export const calendarStructure = createThemedVariants(theme => ({
   base: {
     alignSelf: "stretch",
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     paddingHorizontal: theme.space[2],
     paddingVertical: theme.space[2],
     rowGap: theme.space[1]
@@ -538,7 +547,8 @@ export const calendarHeaderButtonStructure = createThemedVariants(theme => ({
     flexShrink: 1,
     minHeight: MIN_TOUCH_TARGET,
     paddingHorizontal: theme.space[2],
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   }
 }));
 
@@ -578,7 +588,8 @@ export const calendarDayCellStructure = createThemedVariants(theme => ({
     alignItems: "center",
     justifyContent: "center",
     minHeight: DAY_CELL_MIN_HEIGHT,
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     // Every cell reserves the today-ring's width so a month's rows don't shift when today scrolls
     // into view; only today's cell paints a colour over it.
     borderWidth: theme.borderWidths.thick,
@@ -602,7 +613,8 @@ export const quickJumpCellStructure = createThemedVariants(theme => ({
     alignItems: "center",
     justifyContent: "center",
     minHeight: QUICK_JUMP_CELL_MIN_HEIGHT,
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   }
 }));
 
@@ -630,7 +642,8 @@ export const timeOptionStructure = createThemedVariants(theme => ({
     height: TIME_OPTION_HEIGHT,
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   }
 }));
 
@@ -642,7 +655,8 @@ export const dateFieldStructure = createThemedVariants(theme => ({
     height: DATE_FIELD_HEIGHT,
     paddingHorizontal: theme.space[4],
     borderWidth: theme.borderWidths.thin,
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     columnGap: theme.space[2]
   }
 }));
@@ -666,7 +680,8 @@ export const pickerOverlayStructure = createThemedVariants(theme => ({
 }));
 export const pickerSheetStructure = createThemedVariants(theme => ({
   base: {
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     padding: theme.space[2],
     rowGap: theme.space[2],
     ...theme.elevation.lg

package/lib/module/modules/date-picker/MODULE.md

@@ -54,14 +54,27 @@ No `mode`/`use24Hour` — a range has no time-of-day dimension in this module.
   with a role and no state. RN's own `View`/`Text`/`Pressable` merge the flat props back into
   `accessibilityState` (`View.js`), so native loses nothing — which is why the render tests can still
   read `props.accessibilityState.*` truthfully. The resolvers therefore return literal quoted keys
-  (`"aria-selected"`, `"aria-expanded"`, `"aria-disabled"`) and the JSX spells each one out.
+  (`"aria-expanded"`, `"aria-disabled"`) and the JSX spells each one out. `aria-pressed` is the one
+  exception: React Native doesn't recognize it, so it isn't merged/stripped — it reaches the rendered
+  node as-is on both platforms, and `resolvePressedAccessibilityState` supplies the native
+  `accessibilityState.selected` fallback explicitly alongside it (`core/a11y/MODULE.md`).
 - **1.3.1 / 4.1.2** — every day cell's `accessibilityLabel` is the FULL readable date
-  (`formatFullDate`, e.g. "Friday, March 15, 2024"), never the bare number; `aria-selected` /
+  (`formatFullDate`, e.g. "Friday, March 15, 2024"), never the bare number; `aria-pressed` /
   `aria-disabled` carry its state. The field is `accessibilityRole="button"` with `aria-expanded`
   tracking the sheet, matching Select's trigger contract.
+- **A day cell, a quick-jump month cell and an hour/minute/meridiem option are all `role="button"`,
+  so their chosen state is `aria-pressed`, never `aria-selected`** (invalid ARIA on `role="button"`,
+  browsers ignore it — 2026-08 sweep, same fix `chip`'s filter toggle uses). Kept `role="button"`
+  rather than switching to `option`/`gridcell`: those roles aren't in React Native's typed
+  `accessibilityRole`, and RNW only treats a literal `role="button"` as buttonish for Space-key
+  activation — changing the role would have silently broken keyboard operability
+  (`core/a11y/MODULE.md`'s "do not fix Space by changing the role"). The shared
+  `resolvePressedAccessibilityState(selected)` returns the flat `aria-pressed` (WEB) +
+  `accessibilityState={{ selected }}` (NATIVE fallback — RN has no "pressed" state) pair all three
+  use; `resolveCalendarDayAccessibility` composes it in.
 - **1.4.1 — colour is never the only channel.** "today" and range membership are colour in the grid,
   so `resolveCalendarDayAccessibility` folds them into the label too (`", today"`,
-  `", in selected range"`). `aria-selected` marks only the two range ENDPOINTS, so without the
+  `", in selected range"`). `aria-pressed` marks only the two range ENDPOINTS, so without the
   suffix the days between them read as unselected.
 - **4.1.2 — the sheet is a real modal**: `accessibilityViewIsModal` **and** `aria-modal` (a genuine
   both-props case — RN's `View` reads only the first, `react-native-web` only the second), plus
@@ -103,8 +116,14 @@ No `mode`/`use24Hour` — a range has no time-of-day dimension in this module.
   and the field border are measured ≥ 3:1 against their surface.
 - **2.3.3** — the sheet's RN `<Modal>` is `animationType="none"` unconditionally; the fade/slide is
   `core/motion`'s `useReveal`, which `setValue`s opacity/translateY straight to their end state under
-  `useReducedMotion()` (`usePressMotion` likewise for a time option's press). `DatePicker.motion.test.tsx`
+  `useReducedMotion()` (`usePressState` likewise for calendar cells, quick-jump cells, and time
+  options). `DatePicker.motion.test.tsx`
   covers it — the old `animationType={reducedMotion ? "none" : "fade"}` prop it replaced is gone.
+- **Android touch feedback** — `TimeOption`, the field `Pressable`, and the clear button all carry
+  `android_ripple` (`rippleColor(theme.mode)`, `borderless: false`), gated on
+  `Platform.OS === "android"`. The field box and the clear button each gained `overflow: "hidden"`
+  so the ripple clips to their rounded bounds instead of escaping them. The backdrop stays
+  ripple-free, consistent with its `accessible={false}` decoy status above.
 
 ## Patterns copied from the reference modules
 
@@ -167,3 +186,5 @@ accessible day labels, and constructing a fresh formatter per cell measurably do
 - 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.

package/lib/module/modules/date-picker/PickerField.js

@@ -8,10 +8,11 @@
  * a11y wiring and focus/error treatment are otherwise identical.
  */
 
-import { memo, useState } from "react";
-import { Pressable, StyleSheet, Text, View } from "react-native";
+import { memo, useMemo, useState } from "react";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
 import { Icon } from "../../core/icon/index.js";
 import { useTheme } from "../../theme/hooks.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { CLEAR_BUTTON_HIT_SLOP, DATE_FIELD_FONT_SIZE, DATE_FIELD_HIT_SLOP, DATE_FIELD_ICON_SIZE, clearButtonStructure, dateFieldStructure, resolveDateFieldAccessibility, resolveDateFieldColors } from "./DatePicker.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_STROKE = 2;
@@ -43,6 +44,10 @@ export const PickerField = /*#__PURE__*/memo(function PickerField({
     open
   });
   const showClear = clearable && !disabled && displayText !== "";
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
   return /*#__PURE__*/_jsxs(View, {
     style: styles.container,
     children: [label !== undefined &&
@@ -63,7 +68,8 @@ export const PickerField = /*#__PURE__*/memo(function PickerField({
       // picker — the padding stayed here and killed 16dp of target on each side (WCAG 2.5.5).
       {
         borderColor: fieldColors.border,
-        paddingHorizontal: 0
+        paddingHorizontal: 0,
+        overflow: "hidden"
       }, disabled && styles.dimmed],
       children: [/*#__PURE__*/_jsxs(Pressable, {
         testID: testID,
@@ -76,6 +82,7 @@ export const PickerField = /*#__PURE__*/memo(function PickerField({
         onFocus: () => setFocused(true),
         onBlur: () => setFocused(false),
         hitSlop: DATE_FIELD_HIT_SLOP,
+        android_ripple: androidRipple,
         style: [styles.fieldPressable, {
           paddingLeft: theme.space[4],
           paddingRight: showClear ? 0 : theme.space[4]
@@ -100,8 +107,10 @@ export const PickerField = /*#__PURE__*/memo(function PickerField({
         accessibilityLabel: clearAccessibilityLabel,
         hitSlop: CLEAR_BUTTON_HIT_SLOP,
         onPress: onClear,
+        android_ripple: androidRipple,
         style: [clearButtonStructure(theme), {
-          marginRight: theme.space[4]
+          marginRight: theme.space[4],
+          overflow: "hidden"
         }],
         children: /*#__PURE__*/_jsx(Icon, {
           name: "x",

package/lib/module/modules/date-picker/PickerShell.js

@@ -118,6 +118,8 @@ export const PickerShell = /*#__PURE__*/memo(function PickerShell({
   return /*#__PURE__*/_jsx(Modal, {
     visible: open,
     transparent: true,
+    statusBarTranslucent: true,
+    navigationBarTranslucent: true,
     animationType: "none",
     onRequestClose: onCancel,
     children: sheet

package/lib/module/modules/date-picker/TimePicker.js

@@ -1,19 +1,15 @@
 "use strict";
 
 /**
- * TimePicker — hour / minute (/ AM-PM) selection as independent scrollable columns, never an analog
- * clock face. Hour and minute are virtualized `FlatList`s (Select's precedent — a minute column can
- * hold up to 60 rows); the two-item AM/PM column is a plain view, matching Tabs' own choice not to
- * virtualize a handful of items.
- *
- * All arithmetic (12/24-hour conversion, AM/PM flip, option lists) lives in `DatePicker.variants.ts`.
+ * TimePicker — hour / minute (/ AM-PM) selection columns.
  */
 
 import { memo, useCallback, useMemo } from "react";
-import { Animated, FlatList, Pressable, Text, View } from "react-native";
+import { Animated, FlatList, Platform, Pressable, Text, View } from "react-native";
 import { usePressMotion } from "../../core/motion/index.js";
 import { useTheme } from "../../theme/hooks.js";
-import { applyMeridiem, buildHourOptions, buildMinuteOptions, DEFAULT_TIME_HOUR, fromDisplayHour, resolveTimeOptionColors, TIME_OPTION_HEIGHT, timeColumnStructure, timeColumnsStructure, timeOptionStructure, toDisplayHour, toMeridiem, withTime } from "./DatePicker.variants.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
+import { applyMeridiem, buildHourOptions, buildMinuteOptions, DEFAULT_TIME_HOUR, fromDisplayHour, resolvePressedAccessibilityState, resolveTimeOptionColors, TIME_OPTION_HEIGHT, timeColumnStructure, timeColumnsStructure, timeOptionStructure, toDisplayHour, toMeridiem, withTime } from "./DatePicker.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const MERIDIEMS = ["AM", "PM"];
 const TimeOption = /*#__PURE__*/memo(function TimeOption({
@@ -40,19 +36,27 @@ const TimeOption = /*#__PURE__*/memo(function TimeOption({
     color: resting.label
   }], [theme, selected, resting.label]);
   const handlePress = useCallback(() => onPress(value), [onPress, value]);
+  const pressedState = useMemo(() => resolvePressedAccessibilityState(selected), [selected]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
   const optionStyle = useCallback(({
     pressed
   }) => [optionStructure, {
+    overflow: "hidden",
     backgroundColor: pressed ? pressedBackground : resting.background
   }], [optionStructure, pressedBackground, resting.background]);
   return /*#__PURE__*/_jsx(Pressable, {
     testID: testID,
     accessibilityRole: "button",
     accessibilityLabel: accessibilityLabel,
-    "aria-selected": selected,
+    "aria-pressed": pressedState["aria-pressed"],
+    accessibilityState: pressedState.accessibilityState,
     onPress: handlePress,
     onPressIn: press.onPressIn,
     onPressOut: press.onPressOut,
+    android_ripple: androidRipple,
     style: optionStyle,
     children: /*#__PURE__*/_jsx(Animated.View, {
       testID: testID ? `${testID}-motion` : undefined,
@@ -64,9 +68,6 @@ const TimeOption = /*#__PURE__*/memo(function TimeOption({
     })
   });
 });
-
-/** The index of `options`' closest value to `target`. Pure and option-list-agnostic, so it works
- *  for any `minuteStep` (a `:37` value with a 5-minute step has no exact match in `options`). */
 function nearestIndex(options, target) {
   let bestIndex = 0;
   let bestDiff = Infinity;
@@ -95,12 +96,6 @@ export const TimePicker = /*#__PURE__*/memo(function TimePicker({
   const meridiem = toMeridiem(hour24);
   const hours = useMemo(() => buildHourOptions(use24Hour), [use24Hour]);
   const minutes = useMemo(() => buildMinuteOptions(minuteStep), [minuteStep]);
-
-  // Opens each column scrolled to the current value (or the noon/00 default) instead of the top —
-  // `getItemLayout` below already gives `FlatList` a fixed row height, so `initialScrollIndex` needs
-  // no measurement pass. `minute` may fall between two `minuteStep` rungs (e.g. a `:37` value with a
-  // 5-minute step), so the minute column opens on the CLOSEST option rather than requiring an exact
-  // match.
   const initialHourIndex = Math.max(0, hours.indexOf(displayHour));
   const initialMinuteIndex = nearestIndex(minutes, minute);
   const commitHour = useCallback(nextDisplayHour => {

package/lib/module/modules/divider/Divider.variants.js

@@ -1,8 +1,9 @@
 "use strict";
 
+import { StyleSheet } from "react-native";
 /**
  * Divider's style resolution — same split as `Card.variants` / `Button.variants`:
- *  - STRUCTURE (the hairline's thickness on the cross axis) lives in the themed `dividerStructure`
+ *  - STRUCTURE (the StyleSheet.hairlineWidth's thickness on the cross axis) lives in the themed `dividerStructure`
  *    resolver, static per (brand, mode), registered once via `StyleSheet.create`.
  *  - COLOUR is resolved from the theme's ROLE colours by `resolveDividerColor`, never a raw ramp
  *    and never a hardcoded hex.
@@ -27,19 +28,19 @@ export function resolveDividerColor(colors) {
 }
 
 /**
- * Structural styles only — the hairline's thickness on the theme's `borderWidths` scale, spanning
+ * Structural styles only — the StyleSheet.hairlineWidth's thickness on the theme's `borderWidths` scale, spanning
  * the full cross axis. No colour (resolved separately, applied inline over this), so this compiles
  * once per theme identity via the `WeakMap`-cached themed resolver and never rebuilds per render.
  */
-export const dividerStructure = createThemedVariants(theme => ({
+export const dividerStructure = createThemedVariants(_theme => ({
   variants: {
     orientation: {
       horizontal: {
-        height: theme.borderWidths.thin,
+        height: StyleSheet.hairlineWidth,
         width: "100%"
       },
       vertical: {
-        width: theme.borderWidths.thin,
+        width: StyleSheet.hairlineWidth,
         alignSelf: "stretch"
       }
     }

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

@@ -65,3 +65,5 @@ Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLA
 - 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.

package/lib/module/modules/drawer/Drawer.js

@@ -39,16 +39,18 @@
 
 import { memo, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Animated, Keyboard, Modal as RNModal, Platform, Pressable, StyleSheet, useWindowDimensions, View } from "react-native";
-import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { MOTION_TRANSFORM, useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { withAlpha } from "../../core/gradient/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 { ModalPortalContext } from "../modal/ModalPortalContext.js";
 import { renderWebPortal } from "../modal/renderWebPortal";
 import { drawerGrabberStructure, drawerHandleStructure, drawerOverlayStructure, drawerPanelStructure, resolveDrawerBottomInset, resolveDrawerPanelColors } from "./Drawer.variants.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// Decorative dismiss scrim behind the panel — a design constant, not a role token: it is neither
-// text nor an interactive boundary, so WCAG's contrast minimums don't apply to it. Same
-// justification as Modal's MODAL_BACKDROP / Select's BACKDROP_SCRIM.
-const DRAWER_BACKDROP = "#00000080";
+// Decorative dismiss scrim, not a role token — same reasoning Modal's MODAL_BACKDROP records.
+// Opacity is the shared `scrimOpacity` knob, not a locally-guessed hex.
+const DRAWER_BACKDROP = withAlpha("#000000", MOTION_TRANSFORM.scrimOpacity);
 export const Drawer = /*#__PURE__*/memo(function Drawer({
   visible,
   onRequestClose,
@@ -167,15 +169,23 @@ export const Drawer = /*#__PURE__*/memo(function Drawer({
 
   // Slides from fully off-screen (the window's own height, always ≥ the panel's own, since the
   // panel is capped to 90% of it) to resting at the bottom edge.
-  const panelStyle = useMemo(() => [drawerPanelStructure(theme), {
-    backgroundColor: panelColors.background,
+  const floatingStyle = useMemo(() => {
+    highlight("subtle", theme.mode);
+    elevation(elevationTokens.lg);
+    void theme.elevatedSurfaces;
+    return {
+      backgroundColor: floatingBackground(theme, "lg"),
+      ...floatingSurfaceStyle(theme, "lg")
+    };
+  }, [theme]);
+  const panelStyle = useMemo(() => [drawerPanelStructure(theme), floatingStyle, {
     transform: [{
       translateY: progress.interpolate({
         inputRange: [0, 1],
         outputRange: [windowHeight, 0]
       })
     }]
-  }], [theme, panelColors.background, progress, windowHeight]);
+  }], [theme, floatingStyle, progress, windowHeight]);
   const backdropStyle = useMemo(() => [styles.backdrop, {
     opacity: progress
   }], [progress]);
@@ -239,6 +249,8 @@ export const Drawer = /*#__PURE__*/memo(function Drawer({
   return /*#__PURE__*/_jsx(RNModal, {
     visible: mounted,
     transparent: true,
+    statusBarTranslucent: true,
+    navigationBarTranslucent: true,
     animationType: "none",
     onRequestClose: onRequestClose,
     children: content

package/lib/module/modules/drawer/Drawer.variants.js

@@ -75,10 +75,10 @@ export const drawerPanelStructure = createThemedVariants(theme => ({
   base: {
     width: "100%",
     maxHeight: "90%",
-    borderTopLeftRadius: theme.radii.lg,
-    borderTopRightRadius: theme.radii.lg,
-    paddingHorizontal: theme.space[5],
-    ...theme.elevation.lg
+    borderTopLeftRadius: theme.radii.xl,
+    borderTopRightRadius: theme.radii.xl,
+    borderCurve: "continuous",
+    paddingHorizontal: theme.space[5]
   }
 }));
 

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

@@ -131,3 +131,6 @@ Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLA
 - 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 motion** — dropped the ad hoc reanimated `FadeInDown` wrapper around the handle/children (entrance-only, no exit — purely redundant with `progress`, which already drives panel+backdrop together). `DRAWER_BACKDROP`'s opacity now comes from the shared `MOTION_TRANSFORM.scrimOpacity`.