Switch
A short axon with a node at each end.
States
-
Off
aria-checked="false"
An open node on the left.
-
On
aria-checked="true"
A solid ink node on the right.
-
Off, hot
hover
The open node turns --state.
-
On, hot
hover
The solid node turns --state.
-
Disabled
disabled
The axon and the node fall back to tissue.
Anatomy
| Size | 48 × 24px: two modules by one |
|---|---|
| Axon | a --tissue line a dot wide between the two ends |
| Off | an open --ink node on the left |
| On | a solid --ink node on the right |
| Toggle | a pulse runs down the axon in 200ms and the node lands with a 280ms flare |
| Hot | the node turns --state |
| Semantics | a button with role="switch" and aria-checked, beside a visible label |
Timings are read from the engine at build time (rule.ts, ui.ts).
Decisions
-
An axon, not a track
A switch is drawn in the culture’s grammar: a fibre with a node at each end, rather than a pill with a sliding knob, which would be a box with rounded ends.
-
A pulse between peers
On and off are two places on one line, so changing sends a pulse along it from the old to the new and the node lands with a flare: the fill move, as tabs do along their rule.
-
Nothing slides
The node doesn’t travel; the pulse does. Nothing in the system wipes, slides or fades.