WhatTheStar · /design
compositions floating-nav

    FloatingNav

    The map shell's navigation, built on the <Panel> primitive: a vertical pill of icon links on desktop, a bottom tab bar on phones. Destinations come from design/compositions/nav-items.ts, the same list AppLayout renders as a top bar, so the two shells cannot disagree about what the site contains. The active link is resolved from the URL at runtime because the nav is transition:persist.

    Live render — navigation appears fixed in viewport.

    Names, on hover and on focus

    The rail sits 8px above InstrumentBar and reads as the same control surface, so it answers a hover the same way: the shared primitives/_internal/RailLabel.astro chip, beside the icon, on :hover and on :focus-visible. It replaced a title attribute — the browser's own tooltip, half a second late, unstyled, and unreachable from the keyboard. The chip is the link's accessible name, so a pointer user and a screen-reader user hear the same word.

    It shows the terse label, never the blurb: a sentence does not belong beside a 40px glyph. The phone tab bar prints the same label under each icon permanently, so it takes no chip and nothing doubles up.