- Shipped
- September 10, 2026 at 7:50 PM UTC
- Author
- Kamo
- Commit
- 5d551ac
Every dropdown that hangs off NavTop — the eight option menus (Mail, Docs, Call / Text, Calculator, Support, Settings, Linux Desktop, Games), the availability pill and the language picker — now opens into ONE shared surface instead of its own white MUI popover. - Painted in the organization's primary colour with white labels and icons. Its top edge sits flush on the bar's bottom edge, in the bar's own colour at that spot (the gradient stops now live in navtop/menu/navTopSeam.ts and NavTop builds its background from them), with square top corners and a concave join either side, so it reads as the bar reaching down rather than a pane laid over the page. A brand too light for white text is darkened in its own hue only as far as WCAG AA needs (a luminance ceiling in CSS relative-colour maths); every other brand is drawn as chosen. - Opens under a resting mouse, follows the pointer along the bar — the surface glides and resizes to the next menu while the content slides in the direction of travel — and folds back into the bar shortly after the pointer leaves both the trigger and the panel. A click or a tap pins it until an outside press, Escape or a choice; a tap never focuses a text field. - Keyboard: Enter / Space / ArrowDown open onto the first row, arrows walk the rows, Home / End, type-ahead, Right / Left open and close groups and step to the neighbouring menu, Escape hands focus back to the trigger. - One highlight that glides from row to row, groups that open beneath their row on a guide thread, a single ring on count badges, the Cheddar balance counting up. All motion off under reduced motion. - Settings gets a search box that searches inside its groups and marks the match; Enter opens the first hit. The language picker is a two-column grid of all 22 languages, searchable by native name, English name or code. Settings pin toggle and the Cheddar wallet turn white on the brand and are unchanged in the rail. The rail fly-outs are unchanged — the rail already peeks open on hover. When a menu opens, switches and closes is a React-free state machine (navtop/menu/hoverIntent.ts) with tests of its own. Verified in real Chrome against the real components (esbuild harness, data sources stubbed): 170 measured checks across 11 brands — hover timing, the flush seam and corners, both concave joins, white text at 4.5:1 or better on every part of the panel, white ink throughout, the glide between menus, the leave grace, a diagonal across a neighbour not stealing the menu, click-to-pin, touch, keyboard, both searches and reduced motion. 287 tests in the nav and navtop suites, tsc, and the image-build guards against the dictionary's current en.json.