Conditional state
One stored state with three values, and styles chosen from it.
Press the button repeatedly, or Tab to it and press Enter.
| name | value | previous | changes |
|---|---|---|---|
| Waiting for the preview to start. | |||
- Interact with the preview to record events.
How it works
- cycle()line 5Moves a state to the next value in a list, wrapping around. In an :on() rule it is the mutation --mode: cycle(light, dark).
- when()lines 8, 11, 12Picks one of two values from a condition. Boolean conditions compile to native if() where supported.
- :when()lines 9, 12Matches elements for which the condition is true, with states resolved from that element.
The difference between a stored state and conditional styling. --phase stores one keyword; cycle() moves it through idle, loading and done. Everything else is derived from it: when() chooses single values, and :when() applies whole rules.
Native CSS alternative
None for the stored value. Native if() (where supported) chooses values from conditions, but CSS cannot store which step the widget is on.
Limitations
- A demonstration of state only: nothing actually loads.
- The pulse animation stops under
prefers-reduced-motionin the site previews.
Implementation
2 files · 12 lines/* ---- Reactive CSS -------------------------------------------------------------------------- *//* The stored state: one of three keywords. */.status { --phase: state(idle); }.status .next:on(click) { --phase: cycle(idle, loading, done); }/* Conditional styling: values from when(), whole rules from :when(). */.status .dot { background: when(--phase == done, #1a7f37, #b8b2a8); }.status:when(--phase == loading) .dot { background: var(--accent); animation: pulse 900ms infinite; }.status .label { content: var(--phase); }.status .action { content: when(--phase == done, "Reset", "Next"); }.status:when(--phase == idle) .action { content: when(--phase == idle, "Start", ""); }Source: site/src/catalog/api/conditional-state/. style.css from its Reactive CSS divider; the layout above it and the shared api.css run but are not shown.
Context menu
Right-click anywhere on the desk to open a custom menu where you clicked.
Counter
A number controlled entirely through CSS state and events.