set()

Sets a state to a value. In an :on() rule it is a mutation of the state on the left, --x: set(5), with typed expressions.

Syntax

--<state>: set(<expr>);

registry syntax: set(--state, value | attr(name) | pick(...) | sibling-index() | sibling-count() [, closest(selector)])

Parameters

exprtyped expressionrequired

A literal, var(--name, fallback?), typed calc(), min(), max(), clamp(), round() and abs(), the operators + - * /, event(), and one-time mouse(), element(), viewport(), random(), pick(), attr(), sibling-index() and sibling-count().

Effect

No value. Subscribers of the state re-evaluate in the urgent lane.

Example

.dial { --level: state(5); }.dial .reset:on(click) { --level: set(5); }.dial .max:on(click) { --level: set(10); }.dial .half:on(click) { --level: set(round(var(--level) / 2)); }.dial .value { content: var(--level); }

Behavior

• A mutation of the state on the left. In an :on() rule, --x: set(<expr>) changes the nearest --x owner of the element the rule matched. set(), toggle(), increment(), decrement() and cycle() share one model: one winner per state through the cascade, and one transaction per event, read against the values from before it.
• Typed values. Booleans count as 1 or 0 in arithmetic, dimensions convert within a unit family (px and cm, deg and turn, s and ms), and percentages are their own unit. As in CSS, + and - need spaces around them. Mixing incompatible units (10px + 5%), dividing by zero or comparing strings with numbers is an event-time error: one diagnostic and no write.
• At the event. mouse(), element(), viewport(), random(), pick() and attr() are read once, when the event fires; they are snapshots, not subscriptions.
• A value that the state’s type cannot hold is reported once and ignored. A unitless 0 can be stored in a dimension state, and 0 and 1 in a boolean state.
• A write that keeps the same value is a no-op: no subscribers run and :changed() doesn’t match.

Supported contexts

• As a mutation in an :on() rule.

Limitations

• Not a general-purpose language: no comparisons, no when() and no string functions in the expression.
• Units that need layout (em, vw) are not resolved: use element() or viewport().
• attr() reads the attribute of the element the rule matched, at event time; see attr().

Examples

• Click coordinates · API examples, runs the real runtime
• Persistent preference · API examples, runs the real runtime

Related