Modernize the existing BottomNavigationBar to reuse theme tokens (color, shape, motion, typography etc) and make sure the MD3 specs are respected. See the expressive update too: https://m3.material.io/components/navigation-bar/overview

Current State

Bottom Navigation

MD3 spec: Navigation bar
Specs link: https://m3.material.io/components/navigation-bar/specs

Notes

• BottomNavigation is a router-aware wrapper around BottomNavigation.Bar that handles scene management and tab transitions. MD3 compliance is governed by BottomNavigation.Bar below.

Bottom Navigation Bar

MD3 spec: Navigation bar
Specs link: https://m3.material.io/components/navigation-bar/specs

Color tokens

• Container surfaceContainer ✅
• Active icon onSecondaryContainer ✅
• Active indicator secondaryContainer ✅
• Inactive icon onSurfaceVariant ✅
• Inactive label onSurfaceVariant ✅
• Active label uses onSurface. Spec token Nav bar item active label text color maps to secondary

Spacing / sizing

• Active indicator 64x32dp with 16dp corner radius ✅
• Icon-to-label gap 4dp (marginBottom: 4 on icon container) ✅
• v3NoLabelContainer height is hardcoded to 80dp. Spec requires 64dp
• BAR_HEIGHT = 56 constant is used for label height styling. Spec bar height is 64dp

Behavior

• shifting mode (inactive tabs hide labels) is an MD2 pattern not present in MD3
• labeled={false} hides all labels (not in MD3 spec, but a deliberate extension used by Google’s own products e.g. Gmail) ✅
• rippleColor: 'transparent' suppresses state layer feedback. MD3 requires visible state layers (8% hovered, 10% focused/pressed)
• Flexible navigation bar (horizontal items for medium windows) not implemented. M3 Expressive requires horizontal layout support
• Baseline navigation bar is not recommended in M3 Expressive; flexible variant should replace it

Notes

• Rename to match MD3: NavigationBar