Toggle
A label on an ink rule that holds a state.
States
-
Off
aria-pressed="false"
A label on its rule.
-
Off, hot
hover
The rule develops in --state.
-
On
aria-pressed="true"
The ink fill.
-
Disabled
disabled
Muted; nothing develops.
Anatomy
| Off | a label in ink on a short ink rule, 40px tall |
|---|---|
| Hover, off | a flare under the pointer and the rule develops in --state in 140ms |
| On | aria-pressed="true": the selected tab’s ink fill with --chip-fg text |
| Turning on | the fill lands with a flare on the rule (280ms) |
| Reduced motion | the fill lands at once; nothing fires |
Timings are read from the engine at build time (rule.ts).
Decisions
-
The tab’s fill
On is the same ink fill a selected tab takes: ink means selected everywhere in the system, and red is kept for hover and current.
-
On its own rule
A toggle is a single option with nothing to choose between, so it stands on a rule of its own rather than sharing one with peers.