pixelize-native-library 1.0.7 → 1.2.1

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

@@ -0,0 +1,181 @@
+"use strict";
+
+/**
+ * Banner — a persistent, INLINE message that sits in the layout and stays until dismissed.
+ * Distinct from the two neighbours it is easy to confuse it with: `toast` is a transient overlay
+ * that disappears on a timer, and `alert-dialog` is a modal that blocks the screen for a decision.
+ *
+ * `visible` drives a fade+slide enter/exit through `useEnterExit`. It defaults to `true`, and
+ * `useEnterExit` deliberately skips the enter for a banner that mounts already visible — so a
+ * consumer that never passes `visible` sees exactly the old, animation-free behaviour.
+ */
+
+import { memo, useCallback, useMemo } from "react";
+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;
+const hitSlopFor = size => {
+  const inset = Math.max(0, (BANNER_MIN_TOUCH_TARGET - size) / 2);
+  return {
+    top: inset,
+    bottom: inset,
+    left: inset,
+    right: inset
+  };
+};
+const DISMISS_HIT_SLOP = hitSlopFor(BANNER_DISMISS_ICON_SIZE);
+export const Banner = /*#__PURE__*/memo(function Banner({
+  tone = "info",
+  variant = "subtle",
+  message,
+  title,
+  icon,
+  visible = true,
+  onDismiss,
+  dismissLabel = "Dismiss",
+  action,
+  actions,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const enterExit = useEnterExit(visible);
+  const colors = useMemo(() => resolveBannerTone(theme.colors, tone, variant), [theme.colors, tone, variant]);
+  const a11y = useMemo(() => resolveBannerAccessibility({
+    tone,
+    title,
+    message
+  }), [tone, title, message]);
+  const glyph = icon === null ? undefined : icon ?? resolveBannerIcon(tone);
+  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
+  }, floatingStyle, enterExit.style, style], [theme, floatingStyle, colors, enterExit.style, style]);
+  const contentStyle = useMemo(() => ({
+    flex: 1,
+    rowGap: theme.space[1]
+  }), [theme]);
+  const textBlockStyle = useMemo(() => ({
+    rowGap: theme.space[1]
+  }), [theme]);
+  const titleStyle = useMemo(() => [resolveTextStyle(theme, "subheading"), {
+    color: colors.text
+  }], [theme, colors.text]);
+  const messageStyle = useMemo(() => [resolveTextStyle(theme, "body-sm"), {
+    color: colors.text
+  }], [theme, colors.text]);
+  const actionLabelStyle = useMemo(() => [resolveTextStyle(theme, "label-sm"), {
+    color: colors.text,
+    textDecorationLine: "underline"
+  }], [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__*/_jsx(Reanimated.View, {
+    testID: testID,
+    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}`))
+        })]
+      }), onDismiss && /*#__PURE__*/_jsx(Pressable, {
+        testID: testID ? `${testID}-dismiss` : undefined,
+        accessibilityRole: "button",
+        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
+        })
+      })]
+    })
+  });
+});
+//# sourceMappingURL=Banner.js.map

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

@@ -0,0 +1,118 @@
+"use strict";
+
+/**
+ * Banner's style resolution — the same split Badge/Button use:
+ *  - STRUCTURE (padding, radius, gaps, border WIDTH) in the themed `bannerStructure` resolver.
+ *  - COLOUR is `tone` × `variant` driven, resolved from ROLE colours only.
+ *
+ * Free of React and of `lucide`, so the WCAG tests import it directly (mocking only
+ * `react-native`'s `StyleSheet`, as `core/style` does).
+ */
+
+import { createThemedVariants } from "../../core/style/index.js";
+/**
+ * `subtle` reuses Badge's exact role mapping, which is already measured ≥ 4.5:1 for the label on its
+ * own fill and ≥ 3:1 for `status.text`-as-border against both the canvas and that fill, on every
+ * brand × mode. `solid` inverts onto the designed `solid`/`onSolid` pairing; `neutral` has no solid
+ * rung, so it inverts onto `fg.default` + `bg.surface` — the body-text pairing, high-contrast by
+ * construction.
+ */
+export function resolveBannerTone(colors, tone, variant) {
+  if (variant === "solid") {
+    switch (tone) {
+      case "accent":
+        return {
+          fill: colors.accent.solid,
+          text: colors.accent.onSolid,
+          border: colors.accent.solid
+        };
+      case "neutral":
+        return {
+          fill: colors.fg.default,
+          text: colors.bg.surface,
+          border: colors.fg.default
+        };
+      default:
+        {
+          // `status.solid` is tuned for a compact badge/toast chip, not a page-width surface — it
+          // measures only 1.8-2.6:1 against a near-white canvas for success/warning/info on every
+          // brand. `status.text` (already proven >=3:1 against canvas, via the subtle variant's own
+          // border) doubles as the fill here, paired with its own `onText` label.
+          const status = colors.status[tone];
+          return {
+            fill: status.text,
+            text: status.onText,
+            border: status.text
+          };
+        }
+    }
+  }
+  switch (tone) {
+    case "accent":
+      return {
+        fill: colors.accent.subtle,
+        text: colors.accent.text,
+        border: colors.border.interactive
+      };
+    case "neutral":
+      return {
+        fill: colors.bg.sunken,
+        text: colors.fg.default,
+        border: colors.border.interactive
+      };
+    default:
+      {
+        const status = colors.status[tone];
+        return {
+          fill: status.subtle,
+          text: status.text,
+          border: status.text
+        };
+      }
+  }
+}
+
+/** Leading glyph when the caller passes none. `accent`/`neutral` carry no severity, so they get none. */
+export function resolveBannerIcon(tone) {
+  switch (tone) {
+    case "success":
+      return "circle-check";
+    case "warning":
+      return "triangle-alert";
+    case "danger":
+      return "circle-alert";
+    case "info":
+      return "info";
+    default:
+      return undefined;
+  }
+}
+/**
+ * `danger`/`warning` announce as `alert` so a screen reader interrupts; the rest are passive text.
+ * Title and message collapse into ONE accessible node (WCAG 4.1.2) rather than two stray strings.
+ */
+export function resolveBannerAccessibility(input) {
+  const interrupts = input.tone === "danger" || input.tone === "warning";
+  return {
+    accessible: true,
+    accessibilityRole: interrupts ? "alert" : "text",
+    accessibilityLabel: input.title ? `${input.title}. ${input.message}` : input.message
+  };
+}
+export const BANNER_ICON_SIZE = 20;
+/** Dismiss and action are real touch targets; the visual glyph is smaller than its 44dp hit area. */
+export const BANNER_DISMISS_ICON_SIZE = 16;
+export const BANNER_MIN_TOUCH_TARGET = 44;
+export const bannerStructure = createThemedVariants(theme => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    columnGap: theme.space[3],
+    padding: theme.space[3],
+    borderRadius: theme.radii.lg,
+    borderCurve: "continuous"
+  },
+  variants: {},
+  defaultVariants: {}
+}));
+//# sourceMappingURL=Banner.variants.js.map

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

@@ -0,0 +1,118 @@
+# banner/ — a persistent inline message
+
+`Banner` sits IN the layout and stays until the user (or the app) removes it. It is the third member
+of a family that is easy to confuse:
+
+| Use | Module |
+|-----|--------|
+| Transient, floats over the screen, disappears on a timer | `toast` |
+| Modal, blocks the screen, demands a decision | `alert-dialog` |
+| **Persistent, inline, does not block** | **`banner`** |
+
+## Files
+
+| File | Role |
+|------|------|
+| `Banner.tsx` | The component. Composition + a11y wiring; the dismiss and action affordances are separate `Pressable`s, both siblings of the accessible title+message block rather than descendants of it. |
+| `Banner.variants.ts` | Pure resolvers (`resolveBannerTone`, `resolveBannerIcon`, `resolveBannerAccessibility`) + the themed `bannerStructure`. No React, no lucide. |
+| `index.ts` | Public surface: `Banner`, `BannerProps`, `BannerAction`, the closed unions, `IconName`. |
+| `__tests__/Banner.test.ts` | Pure: WCAG contrast (all brands × modes, both variants) + glyph and a11y contracts. |
+| `__tests__/Banner.render.test.tsx` | Render: tones/variants, dismiss vs action isolation, alert-role announcement, and the structural check that neither control is a descendant of the accessible text block. |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `message` | `string` | — | Required. |
+| `title` | `string` | — | Optional heading above the message. |
+| `tone` | `accent \| neutral \| success \| warning \| danger \| info` | `info` | Closed union. |
+| `variant` | `subtle \| solid` | `subtle` | `subtle` tints; `solid` inverts onto a filled surface. |
+| `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; 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-{index}`. |
+
+## Accessibility contract (WCAG)
+
+- **4.1.2 / semantics** — title + message collapse into ONE accessible node, so a screen reader
+  announces the banner as a unit instead of two loose strings. Dismiss and action are their own
+  `button`-role elements with their own labels, so activating either can never be confused with the
+  other (they are also separate code paths — `onDismiss` vs `action.onPress`). Crucially, **both sit
+  OUTSIDE that accessible node**: an accessible node collapses its whole subtree into a single
+  element, so the action — which used to render inside it — could be tapped but never focused or
+  activated by VoiceOver/TalkBack, and its existence was not announced at all (the accessible name
+  is only `"title. message"`). The content column is now a plain layout `View` holding two siblings:
+  the accessible title+message block, and the action. `Banner.render.test.tsx` pins that structure.
+- **4.1.3 status messages** — `danger` and `warning` announce with `accessibilityRole="alert"` so the
+  reader interrupts; the passive tones (`accent`, `neutral`, `success`, `info`) use `text` and are
+  read when focus reaches them. Severity, not styling, decides this.
+- **1.4.3** — text is measured ≥ 4.5:1 against its own fill for every tone × **both** variants,
+  across all brands × both modes. The icon reuses the text colour exactly (never a second lookup), so
+  it inherits that proven ratio and clears its looser 3:1 non-text minimum for free — the same
+  reasoning `menu` and `badge` rely on.
+- **1.4.11** — the `subtle` variant's border is measured ≥ 3:1 against both the page canvas and its
+  own fill; the `solid` variant has no distinct border, so its *fill* is measured ≥ 3:1 against the
+  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
+  must not reach assistive tech as a second, unexplained element. `Banner` never wraps it in a hidden
+  container itself — it relies on `core/icon`'s `Icon` defaulting to `aria-hidden` when rendered with
+  no `label`, which is every call site in this file (`Banner` never passes one). Fixed at the `Icon`
+  level rather than here because this exact gap — an un-wrapped `<Icon>` — was a repeated, per-consumer
+  mistake across the library, not a `Banner`-specific one.
+
+## Patterns copied from the reference modules
+
+1. **Structure vs colour split** — padding/radius/border-width via `createThemedVariants`; colour
+   resolved from `RoleColors` per `tone` × `variant`, applied inline.
+2. **Pure, testable resolvers** in `Banner.variants.ts` — contrast is unit-tested against real
+   palettes, never eyeballed.
+3. **Closed `tone` union** — resolved from role colours, never a free-form `color` prop.
+4. **`subtle` reuses `badge`'s exact role mapping**, which is already measured safe on every brand ×
+   mode, rather than deriving a second, unproven tint.
+
+## Design decisions specific to this module
+
+- **`neutral` + `solid` inverts onto `fg.default` / `bg.surface`.** There is no `neutral.solid` rung
+  in the token set; the body-text pairing is high-contrast by construction, so it is the honest
+  inversion rather than inventing a rung.
+- **`accent` and `neutral` get no default glyph.** An icon on a banner communicates *severity*; those
+  two tones carry none, so a glyph would be decoration pretending to be meaning. Callers can still
+  pass one explicitly.
+- **Exactly one `action`.** Two or more competing actions is a decision, and a decision belongs in
+  `alert-dialog` where it can block. Keeping this to one keeps banners non-blocking by design.
+- **No `onPress` on the banner body.** A whole-surface tap target next to a dismiss button produces
+  mis-taps; if the banner should navigate, use the `action`.
+- **The action is a sibling of the accessible text block, not a child of it.** The dismiss control
+  was always shaped that way; the action was not, and that is exactly why it was invisible to
+  assistive tech. The content column carries the layout (`flex: 1` + `rowGap`), the inner block
+  carries `accessible` + the role + the combined name and only the `rowGap` between title and
+  message — so the rendered spacing is unchanged.
+
+## Known gaps
+
+- No auto-dismiss timer — that is `toast`'s job by definition.
+- No stacking/queueing of multiple banners; a caller rendering several owns their order and spacing.
+- No enter/exit animation. Adding one would need `useReducedMotion()` gating (see `2.3.3` above).
+
+## Performance
+
+Wrapped in `React.memo`. `bannerStructure` is a themed resolver, so the structural `StyleSheet`
+compiles once per theme identity rather than per render. The action handler is `useCallback`'d;
+`onDismiss` is passed to the `Pressable` verbatim, since the caller already owns its identity.
+
+## 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.

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

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

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

@@ -9,30 +9,32 @@
  * escape hooks (backdrop press, Android hardware back, iOS VoiceOver escape, the web-portal opt-in)
  * is inherited for free.
  *
- * `BottomNav.tsx` owns only the fixed bar: per-tab focus tracking, the active-indicator render
- * (presence/absence + a label-weight switch, never colour alone — see the accessibility contract in
- * MODULE.md), wiring press → `onDestinationPress`, and closing the sheet after a sheet-row selection.
- * The sheet's actual content (search, Recent, grouped sections, edit mode, no-results) is
- * `BottomNavOverflowSheet` — a private sub-component in its own file, the same "this warrants its own
- * file" call this library already made for Reorder's private `ReorderRow`.
+ * `BottomNav.tsx` owns only the bar's composition: laying out the slots, wiring press →
+ * `onDestinationPress`, and closing the sheet after a sheet-row selection. One slot — icon, badge,
+ * label, focus ring, active indicator, and that indicator's transition — is `BottomNavTab`, rendered
+ * for the core tabs AND the More slot. The sheet's actual content (search, Recent, grouped sections,
+ * edit mode, no-results) is `BottomNavOverflowSheet`. Both are private sub-components in their own
+ * files, the same "this warrants its own file" call this library already made for Reorder's private
+ * `ReorderRow`.
  *
  * Every piece of state here was classified against one question: does anything OUTSIDE this
  * component plausibly need to read or set it? `active`, `moreVisible`, `recent`, `coreTabs`, and
  * `edit.editing` all answer yes (the app's own router/persistence owns them) and are therefore
  * controlled props, never internal state — see MODULE.md's "Controlled-state contract" for the full,
- * item-by-item reasoning. Only per-tab keyboard/AT focus is internal here, the same idiom
- * Button/Input/Select already use for their own focus rings.
+ * item-by-item reasoning. Only per-tab keyboard/AT focus is internal, and it lives inside
+ * `BottomNavTab` — the same idiom Button/Input/Select use for their own focus rings.
  */
 
-import { memo, useCallback, useMemo, useState } from "react";
-import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
-import { useTheme } from "../../theme/index.js";
+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";
 import { Menu } from "../menu/index.js";
-import { BOTTOM_NAV_ICON_SIZE, bottomNavBarStructure, bottomNavTabStructure, resolveBottomNavAccessibility, resolveBottomNavBadge, resolveBottomNavBottomInset, resolveBottomNavDestinationAccessibilityLabel, resolveBottomNavOverflowBadgeTotal, resolveBottomNavTabColors } from "./BottomNav.variants.js";
-import { BottomNavIconWithBadge } from "./BottomNavIconWithBadge.js";
+import { bottomNavBarStructure, resolveBottomNavBottomInset, resolveBottomNavOverflowBadgeTotal } from "./BottomNav.variants.js";
 import { BottomNavOverflowSheet } from "./BottomNavOverflowSheet.js";
+import { BottomNavTab } from "./BottomNavTab.js";
 
 /** Fully app-supplied. The library never hardcodes a destination's id, label, icon, or grouping. */
 
@@ -54,31 +56,11 @@ const DEFAULT_MORE_QUICK_ACTIONS_LABEL = "More options";
 // Nudges the quick-actions badge toward the More tab's corner without clipping its own ≥44dp target
 // (Button's `hitSlop` still expands outward from this offset position).
 const QUICK_ACTIONS_BADGE_OFFSET = -4;
-// The active-tab dot — presence/absence conveys selection (WCAG 1.4.1), never a colour swap alone.
-const ACTIVE_DOT_SIZE = 6;
 // Stable identity so an omitted `recent` hands `BottomNavOverflowSheet` the SAME empty array every
 // render, rather than a fresh `[]` literal that would defeat its memo.
 const EMPTY_RECENT = [];
-
-/** Which tab currently holds keyboard/AT focus — a discriminated shape (not a bare id) so the More
- *  tab, whose "id" isn't one of `coreTabs`, can't collide with a core tab that happens to share it. */
-
-function focusRing(theme, testID) {
-  return /*#__PURE__*/_jsx(View, {
-    pointerEvents: "none",
-    testID: testID,
-    style: {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      borderWidth: 2,
-      borderColor: theme.colors.border.focus,
-      borderRadius: theme.radii.base
-    }
-  });
-}
+// The More slot has no destination id; its own press handler takes no argument.
+const MORE_TAB_ID = "more";
 export const BottomNav = /*#__PURE__*/memo(function BottomNav(props) {
   const {
     coreTabs,
@@ -101,15 +83,14 @@ export const BottomNav = /*#__PURE__*/memo(function BottomNav(props) {
     testID
   } = props;
   const theme = useTheme();
-  const [focused, setFocused] = useState(null);
+  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 moreColors = resolveBottomNavTabColors(theme.colors, moreSelected);
-  const moreA11y = resolveBottomNavAccessibility({
-    selected: moreSelected,
-    expanded: moreVisible
-  });
   const overflowBadgeTotal = resolveBottomNavOverflowBadgeTotal(overflowSections);
+  const openSheet = useCallback(() => onMoreVisibleChange(true), [onMoreVisibleChange]);
   const closeSheet = useCallback(() => onMoreVisibleChange(false), [onMoreVisibleChange]);
   // Every navigation intent inside the sheet reports through the same `onDestinationPress` the core
   // tabs use, then closes the sheet — see the interaction model in MODULE.md. Stable via useCallback
@@ -133,97 +114,30 @@ 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 => {
-        const selected = active.kind === "core" && active.id === tab.id;
-        const colors = resolveBottomNavTabColors(theme.colors, selected);
-        const a11y = resolveBottomNavAccessibility({
-          selected
-        });
-        const isFocused = focused?.kind === "core" && focused.id === tab.id;
-        const tabTestID = testID ? `${testID}-tab-${tab.id}` : undefined;
-        return /*#__PURE__*/_jsxs(Pressable, {
-          testID: tabTestID,
-          accessibilityRole: a11y.accessibilityRole,
-          accessibilityLabel: resolveBottomNavDestinationAccessibilityLabel({
-            label: tab.label,
-            accessibilityLabel: tab.accessibilityLabel,
-            badge: resolveBottomNavBadge(tab.badge)
-          }),
-          accessibilityState: a11y.accessibilityState,
-          onPress: () => onDestinationPress(tab.id),
-          onFocus: () => setFocused({
-            kind: "core",
-            id: tab.id
-          }),
-          onBlur: () => setFocused(prev => prev?.kind === "core" && prev.id === tab.id ? null : prev),
-          style: bottomNavTabStructure(theme),
-          children: [isFocused && focusRing(theme, tabTestID ? `${tabTestID}-focus-ring` : undefined), /*#__PURE__*/_jsx(BottomNavIconWithBadge, {
-            icon: tab.icon,
-            iconSize: BOTTOM_NAV_ICON_SIZE,
-            iconColor: colors.icon,
-            badgeCount: tab.badge,
-            badgeTestID: tabTestID ? `${tabTestID}-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: tab.label
-          }), selected && /*#__PURE__*/_jsx(View, {
-            testID: tabTestID ? `${tabTestID}-indicator` : undefined,
-            style: {
-              width: ACTIVE_DOT_SIZE,
-              height: ACTIVE_DOT_SIZE,
-              borderRadius: ACTIVE_DOT_SIZE / 2,
-              backgroundColor: colors.indicator
-            }
-          })]
-        }, tab.id);
-      }), /*#__PURE__*/_jsxs(View, {
+      children: [coreTabs.map(tab => /*#__PURE__*/_jsx(BottomNavTab, {
+        id: tab.id,
+        label: tab.label,
+        icon: tab.icon,
+        accessibilityLabel: tab.accessibilityLabel,
+        badgeCount: tab.badge,
+        selected: active.kind === "core" && active.id === tab.id,
+        onPress: onDestinationPress,
+        testID: testID ? `${testID}-tab-${tab.id}` : undefined
+      }, tab.id)), /*#__PURE__*/_jsxs(View, {
         style: styles.moreSlot,
-        children: [/*#__PURE__*/_jsxs(Pressable, {
-          testID: testID ? `${testID}-more` : undefined,
-          accessibilityRole: moreA11y.accessibilityRole,
-          accessibilityLabel: resolveBottomNavDestinationAccessibilityLabel({
-            label: moreLabel,
-            badge: resolveBottomNavBadge(overflowBadgeTotal)
-          }),
-          accessibilityState: moreA11y.accessibilityState,
-          onPress: () => onMoreVisibleChange(true),
-          onFocus: () => setFocused({
-            kind: "more"
-          }),
-          onBlur: () => setFocused(prev => prev?.kind === "more" ? null : prev),
-          style: bottomNavTabStructure(theme),
-          children: [focused?.kind === "more" && focusRing(theme, testID ? `${testID}-more-focus-ring` : undefined), /*#__PURE__*/_jsx(BottomNavIconWithBadge, {
-            icon: moreIcon,
-            iconSize: BOTTOM_NAV_ICON_SIZE,
-            iconColor: moreColors.icon,
-            badgeCount: overflowBadgeTotal,
-            appearance: "dot",
-            badgeTestID: testID ? `${testID}-more-badge` : undefined
-          }), /*#__PURE__*/_jsx(Text, {
-            numberOfLines: 1,
-            style: [theme.fontStyleForWeight(moreSelected ? theme.fontWeights.semibold : theme.fontWeights.regular), {
-              fontSize: theme.fontSizes.xs,
-              color: moreColors.label
-            }],
-            children: moreLabel
-          }), moreSelected && /*#__PURE__*/_jsx(View, {
-            testID: testID ? `${testID}-more-indicator` : undefined,
-            style: {
-              width: ACTIVE_DOT_SIZE,
-              height: ACTIVE_DOT_SIZE,
-              borderRadius: ACTIVE_DOT_SIZE / 2,
-              backgroundColor: moreColors.indicator
-            }
-          })]
+        children: [/*#__PURE__*/_jsx(BottomNavTab, {
+          id: MORE_TAB_ID,
+          label: moreLabel,
+          icon: moreIcon,
+          badgeCount: overflowBadgeTotal,
+          badgeAppearance: "dot",
+          selected: moreSelected,
+          expanded: moreVisible,
+          onPress: openSheet,
+          testID: testID ? `${testID}-more` : undefined
         }), moreQuickActions !== undefined && /*#__PURE__*/_jsx(View, {
           style: styles.quickActionsBadge,
           children: /*#__PURE__*/_jsx(Menu, {