The app navigation on a phone: a floating bar of 3–5 icon tabs and the main action beside it, dark on a light page and light on a dark one.
Installation
Default
BottomNavList holds a BottomNavLink current per page and BottomNavMore, which morphs the bar into a list of the rest, one BottomNavMoreItem per link. A BottomNavMoreGroup opens a page of its own under a Back row, nested as deep as needed (Settings, then Appearance): the bar springs to each page's height, rows come in from the side they go. BottomNavAction is the main action. Labels are for screen readers; a count is a Badge in the tab. A tapped tab looks current at once (data-optimistic-current), before the router's next page sets aria-current. Open "More".
Labels
BottomNavList labels: the label under each icon (--bottom-nav-tab-width × --bottom-nav-tab-height) and a fill that springs to the tab (duration-indicator ease-spring-bounce). Tabs shrink to fit four or five on a phone. fill spans the bar across the nav, in line with the page's content, the tabs sharing it evenly. The page keeps pb-36.
With selection
Under a BottomNavProvider, a page's open ActionBar docks in the nav: the bar squeezes, springs to the toolbar's size and its actions cascade in; clearing morphs it back. Select a task.
Stacked bars and radius
Several ActionBars may be open; one docks: the highest priority, of those the last opened. The next takes its place when it closes. --bottom-nav-radius sets the bar's corner, capped at half its height, so 9999px makes a pill ("Pill bar"); off, it takes the Customize radius preset. The tabs, the panel's rows and a docked bar's buttons follow, concentric. Rename the project, then select a task.