Toggle group
Options on one ink rule; choosing one sends a pulse from the old to the new.
States
-
At rest
aria-pressed="true" on one
The chosen option is an ink fill.
-
Hovering another
hover
Its segment of the rule develops in --state.
-
Small
.sh-tab--sm
32px tall, half a module of padding: the menu’s Theme tabs.
Anatomy
| Options | labels on one shared ink rule, 40px tall (32px small), a module of padding each side |
|---|---|
| Selected | an ink fill with --chip-fg text |
| Choosing | a pulse runs along the rule from the old option to the new in 200ms (--duration-pulse); the fill lands with a flare (280ms) |
| Hover | an unselected option develops its segment of the rule in 140ms |
| Keyboard | Tab reaches the group; the arrow keys move the choice |
| Controlled | data-sh-controlled leaves the attributes to their owner (a React island, the theme script) and animates when they change |
| Reduced motion | the fill moves at once; nothing pulses or fires |
Timings are read from the engine at build time (rule.ts, ui.ts).
Decisions
-
The theme switch
The site menu’s Light and Dark choice is a toggle group. It replaced a sun and moon glyph pair whose sizes eased past each other: the menu had become the system’s list, and the pair was the last control in it not built from the four moves.
-
A pulse between peers
A choice between peers moves along the line they share, from the old item to the new, so the change has a direction and a place.
-
Hard cut
Whatever the choice shows (a picture, a prototype) changes by a hard cut. Nothing slides or fades.