Menu
A card of actions and options that slides out from under its key. The key stays down while the card is out; an option that is on lights its lamp.
Kit parts
Swatch fan
A dropdown drawn as a paint swatch fan pinned on a rivet. The one blade it shows closed is the current choice, its tone and its printed name set once, nowhere else; a press swings the rest of the blades open from that same rivet, each stopped at its own angle, and picking one furls the fan again on the new choice. A real select carries the value and is the whole control with no script at all.
Anatomy
The select is the single source of truth. Arrow keys, Home, End, paging and type-ahead reuse listboxMove() and typeaheadFind(), the same pure functions moves its own rows with, so the fan answers a keyboard exactly as the kit’s other lists do.
Variants
- Opening on Sea
- No visible label (aria-label on the select)
States
- Furled
- Open
- Chosen
- Disabled blade
Props and options
| Name | Kind | Description |
|---|---|---|
| data-tone | attribute | Which of the kit’s five printed tones the blade carries (clay, brass, moss, sea, mist), its own lamp colours borrowed as ink, never a colour of its own. |
| change | event | Fires as any select’s does, once a blade is chosen. |
| swatchFanAngle(i, n, spread) | function | |
| swatchFanSpread(w, h, rivet, room) | function |
Usage notes
Press the rivet: the blades fan open from it. Arrow keys or a letter move the pick, Enter or a press chooses, Escape or a click outside furls it without choosing. Mist is out of stock and cannot be picked.
Accessibility
- A real select underneath carries the value and the name: label it with a or aria-label as any select is labelled.
- Arrow keys, Home, End and type-ahead move the pick, exactly as does, the same two pure functions underneath; Enter or Space chooses, Escape furls the fan without choosing.
- A disabled blade is skipped by every key, by type-ahead and by a press; it can never become the one shown closed.
- Focus returns to the rivet when the fan furls, whether by a choice, Escape or a click outside.
- Under reduced motion the blades are never mid-swing: the mechanism only ever changes a state, it never plays a motion of its own.
Related parts
Select
A choice from a longer list, in the same recess as a field, with a printed chevron. The browser’s own menu opens it.
Listbox
An always-open list let into the plate as a recess. The rows are printed on its floor and a chosen row is a cap let down into it with its lamp lit. One row may be chosen, or several; typing a few letters finds the next row that starts with them. It starts as a native select with a size, so it posts with the form and works without a script.