Dropdowns

Every dropdown here is live: click a trigger to open its menu, and use the picker to cycle the ready-made compositions the source directory ships.

8 parts from one module. Root wires a trigger to a popover, the popover holds a menu, and the menu holds sections, items, and separators.

What one row can carry: a plain label, a leading icon, avatar, status dot, or product logo, an inset that keeps mixed menus aligned, trailing addon text, and section headers between groups. Two-line account rows compose from the same API, and below them sit the header and footer blocks a menu wraps itself in. These menus render standalone, without a popover, so every row is visible at once; they are still live, so hover, selection, and arrow keys paint the kit’s own treatments.

The 4 indicator forms plus none, mirroring the selectionIndicator union. Selection here is real state: click rows and the kit moves its own checks, boxes, dots, and switches. With a leading icon or avatar the indicator renders trailing instead of leading, read from the kit source.

All 14 trigger compositions from the sheet’s Type axis, every one live: click to open. The simple and advanced pairs share a trigger and differ in the menu behind it, and the account family steps from a bare avatar up to the full md card.

Selected and disabled are forced through real props below. Hover and keyboard focus cannot be forced from outside, because the kit exports no style object to borrow classes from, so this menu stays live instead: hover a row or Tab into it and arrow around, and what you see is the kit’s own painting.