main character

Action menu

The ⋯ button that holds the actions too rare to sit in a row: closing the chapter, editing, downloading or uploading the life summary. A native <details> whose summary is the trigger and whose menu is a raised .popover opening upward, right-aligned to it. The nav's overflow menu and the cost panel use the same popover card.

A quiet button made taller (44px, the touch minimum) and left-aligned. Hover fills --bg-muted, a step up from the card it sits on.

.popover: a --bg-raised card at --radius-lg, .5rem padding, items .35rem apart, under a deep 0 10px 30px shadow. As wide as its longest item.

The trigger is a 2.8 × 2.2rem box with a tracked ⋯, quiet-styled: hover, and open, bring it to --text-default on --bg-raised. Open, the menu sits .5rem above it, its right edge on the trigger's. In Figma the menu is placed outside the component's frame, as it is on screen.

Popovers, menus and tooltips are mutually exclusive (popover.js): opening one closes the rest; Escape, or a click anywhere outside, closes it. Choosing an item closes the menu before the action runs.

details.action-menu[open]
  summary                 the ⋯ trigger
  div.menu.popover        opens upward, right-aligned
    button.quiet × n      44px items

Fills --bg-raised, --bg-muted; labels --text-muted, --text-default; rule --border-default; radius --radius-base, --radius-lg; the shadow is a literal. In Figma: Menu item (state), Menu (items, made of Menu items) and Action menu (open × state, holding a Menu when open).