pixelize-native-library 1.0.7 → 1.2.0

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

@@ -20,11 +20,11 @@
  * "Controlled-state contract" for why these two — and only these two — are internal.
  */
 
-import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Animated, Pressable, ScrollView, StyleSheet, Text, useWindowDimensions, View } from "react-native";
-import { useReducedMotion } from "../../core/a11y/index.js";
 import { Icon } from "../../core/icon/index.js";
-import { useTheme } from "../../theme/index.js";
+import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { useTheme } from "../../theme/hooks.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";
@@ -46,7 +46,6 @@ export const BottomNavOverflowSheet = /*#__PURE__*/memo(function BottomNavOverfl
   testID
 }) {
   const theme = useTheme();
-  const reducedMotion = useReducedMotion();
   const {
     height: windowHeight
   } = useWindowDimensions();
@@ -106,9 +105,7 @@ export const BottomNavOverflowSheet = /*#__PURE__*/memo(function BottomNavOverfl
       accessibilityLabel: destination.accessibilityLabel,
       badge: resolveBottomNavBadge(destination.badge)
     }),
-    accessibilityState: {
-      selected: isRowSelected(destination.id)
-    },
+    "aria-selected": isRowSelected(destination.id),
     onPress: () => handleRowPress(destination),
     style: overflowRowStructure(theme),
     children: [/*#__PURE__*/_jsx(BottomNavIconWithBadge, {
@@ -138,129 +135,144 @@ export const BottomNavOverflowSheet = /*#__PURE__*/memo(function BottomNavOverfl
       children: label
     })
   });
-  return /*#__PURE__*/_jsxs(View, {
-    testID: testID,
-    style: {
-      maxHeight: sheetHeight
-    },
-    children: [edit !== undefined && /*#__PURE__*/_jsx(View, {
-      style: [styles.editHeader, {
-        paddingHorizontal: theme.space[4],
-        paddingTop: theme.space[2]
-      }],
-      children: /*#__PURE__*/_jsx(Button, {
-        variant: "ghost",
-        tone: "neutral",
-        size: "sm",
-        label: edit.editing ? edit.doneLabel ?? "Done" : edit.editLabel ?? "Edit",
-        onPress: handleEditToggle,
-        testID: testID ? `${testID}-edit-toggle` : undefined
-      })
-    }), edit !== undefined && edit.editing && /*#__PURE__*/_jsxs(View, {
-      testID: testID ? `${testID}-edit-slots` : undefined,
-      children: [coreTabs.map((tab, index) => {
-        const rowState = resolveEditRowState({
-          slotIndex: index,
-          selectedSlotIndex
-        });
-        return /*#__PURE__*/_jsx(EditSlotChip, {
-          tab: tab,
-          index: index,
-          selected: rowState.selected,
-          reducedMotion: reducedMotion,
-          theme: theme,
-          onPress: handleSlotPress,
-          testID: testID ? `${testID}-edit-slot-${index}` : undefined
-        }, tab.id);
-      }), edit.onResetToDefault !== undefined && /*#__PURE__*/_jsxs(Pressable, {
-        testID: testID ? `${testID}-reset` : undefined,
-        accessibilityRole: "menuitem",
-        onPress: edit.onResetToDefault,
-        style: editRowStructure(theme),
-        children: [/*#__PURE__*/_jsx(Icon, {
-          name: "refresh-cw",
-          size: OVERFLOW_ROW_ICON_SIZE,
-          color: theme.colors.fg.default,
-          strokeWidth: ICON_STROKE
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
-            flex: 1,
-            fontSize: theme.fontSizes.md,
-            color: theme.colors.fg.default
-          }],
-          children: edit.resetLabel ?? "Reset to default"
-        })]
-      })]
-    }), /*#__PURE__*/_jsx(View, {
+  return (
+    /*#__PURE__*/
+    // Keyboard avoidance for this sheet is handled by `Drawer` itself (it grows its own bottom
+    // padding by the keyboard height, since it — not this content — owns the bottom-anchored
+    // position); this stays a plain height-capped View.
+    _jsxs(View, {
+      testID: testID,
       style: {
-        paddingHorizontal: theme.space[4],
-        paddingBottom: theme.space[2]
+        maxHeight: sheetHeight
       },
-      children: /*#__PURE__*/_jsx(Input, {
-        value: query,
-        onChangeText: setQuery,
-        leadingIcon: "search",
-        placeholder: searchPlaceholder,
-        accessibilityLabel: searchAccessibilityLabel,
-        testID: testID ? `${testID}-search` : undefined
-      })
-    }), /*#__PURE__*/_jsx(ScrollView, {
-      bounces: false,
-      keyboardShouldPersistTaps: "handled",
-      children: isSearching ? matches.length > 0 ? matches.map(match => renderRow(match.destination, "result")) : /*#__PURE__*/_jsx(Text, {
-        testID: testID ? `${testID}-no-results` : undefined,
-        style: [theme.fontStyleForWeight(theme.fontWeights.regular), styles.noResults, {
-          color: theme.colors.fg.muted,
-          fontSize: theme.fontSizes.md,
-          paddingVertical: theme.space[6]
+      children: [edit !== undefined && /*#__PURE__*/_jsx(View, {
+        style: [styles.editHeader, {
+          paddingHorizontal: theme.space[4],
+          paddingTop: theme.space[2]
         }],
-        children: noResultsLabel
-      }) : /*#__PURE__*/_jsxs(_Fragment, {
-        children: [recent.length > 0 && /*#__PURE__*/_jsxs(View, {
-          children: [renderSectionHeader(recentLabel), recent.map(destination => renderRow(destination, "recent"))]
-        }), overflowSections.map(section => /*#__PURE__*/_jsxs(View, {
-          children: [section.label !== undefined && renderSectionHeader(section.label), section.destinations.map(destination => renderRow(destination, "result"))]
-        }, section.id))]
-      })
-    })]
-  });
+        children: /*#__PURE__*/_jsx(Button, {
+          variant: "ghost",
+          tone: "neutral",
+          size: "sm",
+          label: edit.editing ? edit.doneLabel ?? "Done" : edit.editLabel ?? "Edit",
+          onPress: handleEditToggle,
+          testID: testID ? `${testID}-edit-toggle` : undefined
+        })
+      }), edit !== undefined && edit.editing && /*#__PURE__*/_jsxs(View, {
+        testID: testID ? `${testID}-edit-slots` : undefined,
+        children: [coreTabs.map((tab, index) => {
+          const rowState = resolveEditRowState({
+            slotIndex: index,
+            selectedSlotIndex
+          });
+          return /*#__PURE__*/_jsx(EditSlotChip, {
+            tab: tab,
+            index: index,
+            selected: rowState.selected,
+            theme: theme,
+            onPress: handleSlotPress,
+            testID: testID ? `${testID}-edit-slot-${index}` : undefined
+          }, tab.id);
+        }), edit.onResetToDefault !== undefined && /*#__PURE__*/_jsxs(Pressable, {
+          testID: testID ? `${testID}-reset` : undefined,
+          accessibilityRole: "menuitem",
+          onPress: edit.onResetToDefault,
+          style: editRowStructure(theme),
+          children: [/*#__PURE__*/_jsx(Icon, {
+            name: "refresh-cw",
+            size: OVERFLOW_ROW_ICON_SIZE,
+            color: theme.colors.fg.default,
+            strokeWidth: ICON_STROKE
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
+              flex: 1,
+              fontSize: theme.fontSizes.md,
+              color: theme.colors.fg.default
+            }],
+            children: edit.resetLabel ?? "Reset to default"
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          paddingHorizontal: theme.space[4],
+          paddingBottom: theme.space[2]
+        },
+        children: /*#__PURE__*/_jsx(Input, {
+          value: query,
+          onChangeText: setQuery,
+          leadingIcon: "search",
+          placeholder: searchPlaceholder,
+          accessibilityLabel: searchAccessibilityLabel,
+          testID: testID ? `${testID}-search` : undefined,
+          autoComplete: "off"
+        })
+      }), /*#__PURE__*/_jsx(ScrollView, {
+        bounces: false,
+        keyboardShouldPersistTaps: "handled",
+        children: isSearching ? matches.length > 0 ? matches.map(match => renderRow(match.destination, "result")) : /*#__PURE__*/_jsx(Text, {
+          testID: testID ? `${testID}-no-results` : undefined,
+          style: [theme.fontStyleForWeight(theme.fontWeights.regular), styles.noResults, {
+            color: theme.colors.fg.muted,
+            fontSize: theme.fontSizes.md,
+            paddingVertical: theme.space[6]
+          }],
+          children: noResultsLabel
+        }) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [recent.length > 0 && /*#__PURE__*/_jsxs(View, {
+            children: [renderSectionHeader(recentLabel), recent.map(destination => renderRow(destination, "recent"))]
+          }), overflowSections.map(section => /*#__PURE__*/_jsxs(View, {
+            children: [section.label !== undefined && renderSectionHeader(section.label), section.destinations.map(destination => renderRow(destination, "result"))]
+          }, section.id))]
+        })
+      })]
+    })
+  );
 });
-const INDICATOR_FADE_MS = 150;
-
 /**
  * One core-tab slot chip in the edit-mode mini-list. Its own component (not inlined in the `.map()`
  * above) for the same reason `Reorder`'s own `ReorderRow` is split out: the selected-indicator fade
  * needs a per-row `useEffect` instance, and Rules of Hooks forbid calling one inside a loop body.
  *
- * The selected indicator is an `Animated.Value` opacity fade (0 → 1), not a colour swap — the same
- * "presence/absence, not a re-tint" principle the bar's own active dot documents — collapsed to an
- * instant `setValue` under reduced motion (WCAG 2.3.3), the identical idiom `Reorder`'s row-shift and
- * `Accordion`'s chevron rotation already use for their own per-item animated values.
+ * The selected indicator is an opacity fade (0 → 1), not a colour swap — the same "presence/absence,
+ * not a re-tint" principle the bar's own active dot documents — timed by `core/motion` and collapsed
+ * to the resting state under reduced motion (WCAG 2.3.3), exactly as `BottomNavTab`'s own dot is.
  */
 const EditSlotChip = /*#__PURE__*/memo(function EditSlotChip({
   tab,
   index,
   selected,
-  reducedMotion,
   theme,
   onPress,
   testID
 }) {
-  const opacity = useRef(new Animated.Value(selected ? 1 : 0)).current;
+  const motion = useMotion();
+  const opacity = useAnimatedValue(selected ? 1 : 0);
+  const running = useRef(null);
+  const opacityMotionStyle = useMemo(() => ({
+    opacity
+  }), [opacity]);
   useEffect(() => {
-    if (reducedMotion) {
-      opacity.setValue(selected ? 1 : 0);
+    const toValue = selected ? 1 : 0;
+    running.current?.stop();
+    if (!motion.enabled) {
+      opacity.setValue(toValue);
       return;
     }
-    Animated.timing(opacity, {
-      toValue: selected ? 1 : 0,
-      duration: INDICATOR_FADE_MS,
-      useNativeDriver: true
-    }).start();
-  }, [opacity, selected, reducedMotion]);
+    running.current = motion.timing(opacity, toValue, {
+      duration: "fast"
+    });
+    running.current.start();
+    return () => running.current?.stop();
+  }, [opacity, selected, motion]);
+  useEffect(() => () => running.current?.stop(), []);
   return /*#__PURE__*/_jsxs(Pressable, {
     testID: testID,
-    accessibilityRole: "button",
+    accessibilityRole: "button"
+    // A toggle button, not a tab/option, so the correct WEB signal is `aria-pressed` — `aria-
+    // selected` is invalid on `role="button"`. `aria-pressed` has no RN equivalent, so native
+    // rides `accessibilityState` instead (RNW discards that object, so the two never collide).
+    ,
+    "aria-pressed": selected,
     accessibilityState: {
       selected
     },
@@ -282,13 +294,9 @@ const EditSlotChip = /*#__PURE__*/memo(function EditSlotChip({
       children: tab.label
     }), /*#__PURE__*/_jsx(Animated.View, {
       testID: testID ? `${testID}-indicator` : undefined,
-      style: {
-        width: EDIT_SLOT_INDICATOR_SIZE,
-        height: EDIT_SLOT_INDICATOR_SIZE,
-        borderRadius: EDIT_SLOT_INDICATOR_SIZE / 2,
-        backgroundColor: theme.colors.accent.solid,
-        opacity
-      }
+      style: [styles.slotIndicator, {
+        backgroundColor: theme.colors.accent.solid
+      }, motion.enabled ? opacityMotionStyle : selected ? styles.slotIndicatorShown : styles.slotIndicatorHidden]
     })]
   });
 });
@@ -299,6 +307,17 @@ const styles = StyleSheet.create({
   },
   noResults: {
     textAlign: "center"
+  },
+  slotIndicator: {
+    width: EDIT_SLOT_INDICATOR_SIZE,
+    height: EDIT_SLOT_INDICATOR_SIZE,
+    borderRadius: EDIT_SLOT_INDICATOR_SIZE / 2
+  },
+  slotIndicatorShown: {
+    opacity: 1
+  },
+  slotIndicatorHidden: {
+    opacity: 0
   }
 });
 //# sourceMappingURL=BottomNavOverflowSheet.js.map

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

@@ -0,0 +1,138 @@
+"use strict";
+
+/**
+ * BottomNavTab — PRIVATE sub-component (not exported from `index.ts`, same status as
+ * `BottomNavOverflowSheet` / `BottomNavIconWithBadge`). ONE slot of the bar: icon + badge, label,
+ * focus ring, and the active-indicator dot. Both the core tabs and the trailing More slot render
+ * through it, so the two can never drift apart.
+ *
+ * Split out of `BottomNav.tsx`'s `coreTabs.map()` for two reasons. Rules of Hooks: the indicator's
+ * transition needs a per-tab `useEffect`, which a loop body can't hold. And re-renders: with the
+ * slot memoized, a selection change re-renders the two tabs whose `selected` actually flipped
+ * instead of the whole bar, and the press/focus handlers stop being fresh closures per render.
+ *
+ * Keyboard/AT focus lives here, not in the parent — nothing outside one tab reads it, and holding
+ * it locally keeps a focus change from re-rendering the bar.
+ */
+
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Animated, Pressable, StyleSheet, Text } from "react-native";
+import { useAnimatedValue, useMotion } from "../../core/motion/index.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";
+export const BottomNavTab = /*#__PURE__*/memo(function BottomNavTab({
+  id,
+  label,
+  icon,
+  accessibilityLabel,
+  badgeCount,
+  badgeAppearance,
+  selected,
+  expanded,
+  onPress,
+  testID
+}) {
+  const theme = useTheme();
+  const motion = useMotion();
+  const [focused, setFocused] = useState(false);
+  const colors = resolveBottomNavTabColors(theme.colors, selected);
+  const a11y = resolveBottomNavAccessibility({
+    selected,
+    expanded
+  });
+  const indicator = useAnimatedValue(selected ? 1 : 0);
+  const running = useRef(null);
+  const indicatorMotionStyle = useMemo(() => ({
+    opacity: indicator,
+    transform: [{
+      scale: indicator.interpolate({
+        inputRange: [0, 1],
+        outputRange: [BOTTOM_NAV_SETTLE_SCALE, 1]
+      })
+    }]
+  }), [indicator]);
+  useEffect(() => {
+    const toValue = selected ? 1 : 0;
+    running.current?.stop();
+    if (!motion.enabled) {
+      indicator.setValue(toValue);
+      return;
+    }
+    running.current = motion.timing(indicator, toValue, {
+      duration: "fast",
+      easing: selected ? "decelerate" : "accelerate"
+    });
+    running.current.start();
+    return () => running.current?.stop();
+  }, [selected, motion, indicator]);
+  useEffect(() => () => running.current?.stop(), []);
+  const handlePress = useCallback(() => onPress(id), [onPress, id]);
+  const handleFocus = useCallback(() => setFocused(true), []);
+  const handleBlur = useCallback(() => setFocused(false), []);
+  return /*#__PURE__*/_jsxs(Pressable, {
+    testID: testID,
+    accessibilityRole: a11y.accessibilityRole,
+    accessibilityLabel: resolveBottomNavDestinationAccessibilityLabel({
+      label,
+      accessibilityLabel,
+      badge: resolveBottomNavBadge(badgeCount)
+    }),
+    "aria-selected": a11y["aria-selected"],
+    "aria-expanded": a11y["aria-expanded"],
+    "aria-disabled": a11y["aria-disabled"],
+    onPress: handlePress,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    style: bottomNavTabStructure(theme),
+    children: [focused && /*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      testID: testID ? `${testID}-focus-ring` : undefined,
+      style: [bottomNavFocusRingStructure(theme), {
+        borderColor: theme.colors.border.focus
+      }]
+    }), /*#__PURE__*/_jsx(BottomNavIconWithBadge, {
+      icon: icon,
+      iconSize: BOTTOM_NAV_ICON_SIZE,
+      iconColor: colors.icon,
+      badgeCount: badgeCount,
+      appearance: badgeAppearance,
+      badgeTestID: testID ? `${testID}-badge` : undefined
+    }), /*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      style: [theme.fontStyleForWeight(selected ? theme.fontWeights.semibold : theme.fontWeights.regular), {
+        fontSize: theme.fontSizes.xs,
+        color: colors.label
+      }],
+      children: label
+    }), /*#__PURE__*/_jsx(Animated.View, {
+      testID: testID ? `${testID}-indicator` : undefined,
+      style: [styles.indicator, {
+        backgroundColor: colors.indicator
+      },
+      // No animation runs under reduce motion, so the resting style is rendered directly.
+      motion.enabled ? indicatorMotionStyle : selected ? styles.indicatorShown : styles.indicatorHidden]
+    })]
+  });
+});
+const styles = StyleSheet.create({
+  indicator: {
+    width: BOTTOM_NAV_ACTIVE_DOT_SIZE,
+    height: BOTTOM_NAV_ACTIVE_DOT_SIZE,
+    borderRadius: BOTTOM_NAV_ACTIVE_DOT_SIZE / 2
+  },
+  indicatorShown: {
+    opacity: 1,
+    transform: [{
+      scale: 1
+    }]
+  },
+  indicatorHidden: {
+    opacity: 0,
+    transform: [{
+      scale: BOTTOM_NAV_SETTLE_SCALE
+    }]
+  }
+});
+//# sourceMappingURL=BottomNavTab.js.map

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

@@ -13,7 +13,8 @@ stability contract" below, the actual deliverable of this module.
 
 | File | Role |
 |------|------|
-| `BottomNav.tsx` | The component. The fixed bar: per-tab focus tracking, the active-indicator render, press → `onDestinationPress` wiring, composing `Drawer` as the sheet's shell. Data types (`BottomNavDestination`, `BottomNavOverflowSection`, `BottomNavActiveState`, `BottomNavEditConfig`) live here, same precedent as Select's `SelectOption`. |
+| `BottomNav.tsx` | The component. The fixed bar's composition only: laying out the slots (`BottomNavTab` for the core tabs AND the More slot), press → `onDestinationPress` wiring, composing `Drawer` as the sheet's shell. Data types (`BottomNavDestination`, `BottomNavOverflowSection`, `BottomNavActiveState`, `BottomNavEditConfig`) live here, same precedent as Select's `SelectOption`. |
+| `BottomNavTab.tsx` | PRIVATE — ONE bar slot (icon + badge, label, focus ring, active-indicator dot), rendered for the core tabs AND the More slot so the two can never drift. Owns the per-tab focus state and the indicator's `core/motion` transition — a `useEffect` per slot, which a `.map()` body can't hold. |
 | `BottomNavOverflowSheet.tsx` | PRIVATE (not exported) — the sheet's content: search (reuses `../input`'s `Input`), pre-search Recent row, grouped sections, edit mode, no-results state. |
 | `BottomNavIconWithBadge.tsx` | PRIVATE — a destination icon + its optional badge (count pill, or the More trigger's presence-only dot), shared by the bar tabs, the More trigger, and every sheet row so the badge renders identically everywhere. |
 | `BottomNav.variants.ts` | Pure resolvers (`resolveBottomNavTabColors`, `resolveBottomNavAccessibility`, `resolveEditRowState`, `resolveBottomNavBottomInset`, `resolveOverflowSheetHeight`; badge: `resolveBottomNavBadge`, `resolveBottomNavBadgeColors`, `resolveBottomNavOverflowBadgeTotal`, `resolveBottomNavDestinationAccessibilityLabel`) + themed structural resolvers (`bottomNavBarStructure`, `bottomNavTabStructure`, `overflowRowStructure`, `overflowSectionHeaderStructure`, `editRowStructure`, `bottomNavBadgePillStructure`). No React, no lucide. |
@@ -21,7 +22,7 @@ stability contract" below, the actual deliverable of this module.
 | `index.ts` | Public surface: `BottomNav`, `BottomNavProps`, `BottomNavActiveState`, `BottomNavDestination`, `BottomNavOverflowSection`, `BottomNavEditConfig`. Re-exports `MenuItem` (from `../menu`) and `IconName`. |
 | `__tests__/BottomNav.test.ts` | Pure: WCAG contrast (8 brands × both modes, tab + badge colours), touch-target floor, accessibility/edit-row/inset/detent/badge resolvers. |
 | `__tests__/BottomNav.search.test.ts` | Pure: levenshtein/typo-budget arithmetic, `fuzzyScore` tiering, `matchDestinations` ranking/stability/empty-query. |
-| `__tests__/BottomNav.render.test.tsx` | Render: press wiring, sheet open/close, live typo-tolerant search, Recent/grouped/no-results, edit-mode flow, opt-in quick-actions trigger, badges (pill / 0 / 99+ cap / sheet rows / More dot / a11y-label override). |
+| `__tests__/BottomNav.render.test.tsx` | Render: press wiring, the active dot (including the reduce-motion snap), sheet open/close, live typo-tolerant search, Recent/grouped/no-results, edit-mode flow, opt-in quick-actions trigger, badges (pill / 0 / 99+ cap / sheet rows / More dot / a11y-label override). |
 
 ## Props
 
@@ -113,8 +114,13 @@ imports `@react-native-async-storage/async-storage` and never reads a value it w
 ## Accessibility contract (WCAG)
 
 - **4.1.2** — bar container `accessibilityRole="tablist"`; each core tab and the More slot
-  `accessibilityRole="tab"` with `accessibilityState={{ selected, expanded }}` (`expanded` on More
-  only, tracking `moreVisible`). Sheet rows are `accessibilityRole="menuitem"`; section headers are
+  `accessibilityRole="tab"` with flat `aria-selected` / `aria-expanded` (`expanded` on More only,
+  tracking `moreVisible`; both React-drop as `undefined` when the caller doesn't pass them, so a
+  plain core tab renders neither attribute). `aria-selected`, not `aria-current`: this is a
+  `tablist`, and `aria-selected` is the signal the `tab` role defines — `aria-current="page"` marks
+  navigation links, a different pattern (`Pagination` uses it for exactly that reason). Flat, never
+  `accessibilityState={{…}}`: react-native-web discards the object form — see
+  `docs/PLATFORM-A11Y-PROPS.md`. Sheet rows are `accessibilityRole="menuitem"`; section headers are
   `accessibilityRole="header"` (same role Modal uses for its title). Badged tabs/rows announce ONE
   folded name (see Badges) — the pill's own text never leaks as a separate announcement.
 - **2.5.x target size** — `BOTTOM_NAV_HEIGHT` (56dp) asserted ≥ 44dp in a pure unit test, same
@@ -126,8 +132,11 @@ imports `@react-native-async-storage/async-storage` and never reads a value it w
 - **1.4.3 / 1.4.11** — `resolveBottomNavTabColors` measured ≥ 4.5:1 (label) and ≥ 3:1 (icon +
   indicator) against the bar's own `bg.surface`, active AND inactive, across all 8 brands × both
   modes, in `BottomNav.test.ts` — never eyeballed.
-- **2.3.3** — the edit-mode slot indicator's fade collapses to an instant `setValue` under
-  `useReducedMotion()`; the sheet's own slide/fade is inherited transitively through Drawer.
+- **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
+  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
   Button/Input's own ring.
 - **2.5.7 (Dragging)** — not applicable: no drag interaction anywhere in this module.
@@ -211,3 +220,9 @@ not a runtime guarantee); core tabs are not independently searchable from the sh
 ## Performance
 
 `BottomNav`, and the internal (non-exported) `BottomNavOverflowSheet`/`EditSlotChip`, are wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`) — the sheet/chip need it too or the callback stabilization below is a no-op. `closeSheet`/`handleSheetPress` and (in the overflow sheet) `handleEditToggle`/`handleSlotPress` are `useCallback`'d; a module-level `EMPTY_RECENT` constant replaces `recent ?? []` (was a fresh array every render); the `Menu` trigger element is `useMemo`'d (was a freshly-created element every render, which would defeat `Menu`'s own memo); `EditSlotChip`'s `onPress` now takes `(index: number) => void` so every chip gets the SAME stable function instead of a per-item closure.
+
+## Modernization (v1.0.7)
+
+- 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.