Tabs
All copy is placeholder. Real strings come from the i18n layer.
Sections of one screen
Arrow keys move between them, Home and End jump to the ends. Try it —
the keyboard contract is what carrying role="tablist" promises, and it is
not something CSS can supply.
Forty guests, ten to a page.
What the night should cost, and bring in.
Four open, one overdue.
Nothing packed for this event yet.
The count is shown at zero as well. "Nothing is out" is information; a
count that disappears makes the reader wonder whether it failed to load.
Selection is never colour alone
Three signals on the selected tab: weight, the accent rule beneath it, and
aria-selected. Remove any one and two remain.
Narrow, and long labels
They wrap. A horizontally scrolling tab strip hides its own last entry, which is how a destination becomes undiscoverable — and translated labels run far longer than English.
Where not to use it
Tabs hide content. Use them where the sections are peers and a reader wants one at a
time — never to hide a step of a sequence, and never for something that must be seen
without being sought. The Event screen keeps its two headline numbers above the
tabs for exactly that reason: they are facts about the night, not about a section.