Closed

nothing set

Labels on the rule.
A trigger hot

hover or :focus-visible

Its segment of the rule develops in --state.
Selected works All work

Open

aria-expanded="true"

The trigger fills ink; its layer hangs under it, the current section a --state row.
Experiments System

A row hot

hover or :focus-visible

The row’s hairline develops from the pointer and its name turns --state.

Anatomy

Bar	labels in the label voice on one ink rule, each developing its segment on hover
Open	aria-expanded="true": the trigger takes the tab’s ink fill and its layer hangs under it
Layer	paper in a 1px ink frame, ten modules wide, half a module of padding: the one place a frame stays
Rows	the site menu’s: the name in the clean cut at 16/24 on a hairline
Current	the section you are in is a --state fill running to the frame
Closing	the trigger again, Escape, or a click elsewhere

Decisions

The site menu’s rows

The layer uses the rows of the site menu, so a visitor who has opened one has opened them all.
Current is red

The section you are in is the one --state fill in the layer: current is a state, so it is allowed to be red.