Components · Overlays
A list of actions hung off a trigger. The dropdown is opened by a button (the row / toolbar overflow) and is keyboard-navigable — arrows, type-ahead, Esc, close-on-select. The context menu is the same .popup floor summoned by a right-click. Rows are a real role="menu": plain items, a checked toggle, a divider, a submenu caret, and a destructive action in the bad ink.
The .is-hl row on each menu is pinned to the surface-2 highlight (the roving-focus / hover state); every other row wears the live :hover — pass over them to see it, and over the red Remove to see the bad-tinted destructive hover. The checked Show archived paints accent ink + a trailing check; Assign to team › carries the submenu caret.
Source · <Menu> (Root / Trigger / Content / Item / Separator / GroupLabel / CheckboxItem / SubmenuTrigger) & <ContextMenu> from @phauna/ds/overlays · .popup / .popup__item / .popup__sep / .popup__label (styles/components.css) · DropdownMenu.tsx · demo OverlaysDemo.tsx
.popup floor — surface-3, --radius-md (6px), the overlay shadow + inner-glow, 6px padding, min-width 10rem. The context menu is the identical popup, just anchored to the pointer..popup__item — 32px tall, 12px inline padding, --radius-sm corners, 13px text, a 16px leading icon. Highlight (hover / roving focus) is the surface-2 fill.menuitemcheckbox — data-selected paints the row in accent ink with a trailing check. It toggles in place and the menu stays open..popup__sep is a 1px rule hairline with 6px margins; .popup__label is a non-interactive uppercase faint group heading (here “Manage”).chevron-right caret and opens a nested popup on hover / →. A disabled item drops to 0.45 opacity and stops pointer events.--bad and hovers to a red-tinted fill — the visual guardrail before a removal. A genuinely irreversible action should still route through a ConfirmDialog.role="menu" with roving tabindex — arrows / Home / End move, type-ahead jumps, Esc closes and focus returns to the trigger; selecting an item closes on click.