decrement()

Subtracts a step from a number or dimension state. In an :on() rule it is the mutation --count: decrement(1).

Syntax

--<state>: decrement(<step>?);

registry syntax: decrement(--state [, step] [, closest(selector)])

Parameters

stepnumber, dimension or typed expressionoptional

Default 1, in the state’s unit. In :on() it can be an expression: decrement(var(--step)), decrement(event(movement-x)).

Effect

No value.

Example

.stock {  --left: state(10);}.stock .take:on(click) {  --left: decrement(1);}.stock:when(--left <= 0) .take {  display: none;}

Behavior

• A mutation of the state on the left. In an :on() rule, --x: decrement(1) 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.
• Conceptually, --left: decrement(1) is --left: set(calc(var(--left) - 1)), with a unitless step taken in the state’s unit.
• Goes below zero unless you hide or disable the control, as in the example, or clamp: --left: set(max(var(--left) - 1, 0)).

Supported contexts

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

Limitations

• No minimum or maximum of its own.

Examples

• Counter · API examples, runs the real runtime

Related