Tabs
Labels on one shared ink rule; the selected tab is an ink fill.
A tablist on one ink rule. The panel under it changes by a hard cut.
Choosing a tab sends a pulse along the rule from the old tab to the new one.
The fill lands with a flare where the pulse arrives.
States
-
At rest
aria-selected="true" on one
The selected tab is an ink fill.
-
Hovering another
hover
Its segment of the rule develops in --state.
Anatomy
| Tabs | labels in the label voice on one shared ink rule, 40px tall |
|---|---|
| Selected | aria-selected="true": an ink fill with --chip-fg text; tabindex 0 on it, -1 on the rest |
| Choosing | a pulse along the rule in 200ms, then a flare (280ms) as the fill lands |
| Hover | an unselected tab develops its segment of the rule in 140ms |
| Panels | aria-controls names each panel; the others are hidden at once |
| Keyboard | the left and right arrows move the selection and focus |
Timings are read from the engine at build time (rule.ts, ui.ts).
Decisions
-
Fills are state
The selected tab is an ink fill, the same fill a toggle and a selected cell take. Red is kept for hover and current.
-
Hard cut
Panels and slides change by a hard cut; nothing slides or fades. The pulse along the rule is the only motion, and it says where the choice went.