Create reusable component variants, bind designer-named interaction/form/link/list states, use the sticky Clicked toggle, and author one auto-animate transition that every instance can inherit.
Where: Design System → Components, or edit a component master/variant on the canvas
Key ideas
- Component-aware copy and paste: Copying a master creates an instance and copying an instance keeps it linked to its master. Cutting a master remains blocked because it would orphan instances.
- Variant-scoped visibility: Hide/delete inside a variant writes a scoped display rule for that variant cell instead of removing the element from the master and every other variant.
- Expanded state catalog: State binding uses a grouped designer-facing catalog across Interaction, Form, Link, and Position in list instead of exposing only five raw pseudo selectors.
- Clicked (toggle): Clicked is a sticky runtime state: one click sets data-f0-toggled and the next removes it. It differs from Pressed/:active, which lasts only while the pointer button is held.
- Inherited auto-animate: An auto-animate authored on the component can run per matched instance. Only geometry or tracked properties that actually change are animated, reducing stray fixed positioning or dimensions.
Steps
- Create a component from the intended root; when using the designer option, keep the lifted master on the Free Canvas and the linked instance in the original location.
- Add variant properties and edit each variant cell. Hide or delete variant-only content while that cell is active.
- Add a state binding, choose a designer-named state such as Hover, Pressed, Clicked (toggle), Checked, Visited, First, or Even, then choose the donor variant/cell whose styles should appear.
- For a persistent on/off component, style Clicked (toggle) and test two consecutive clicks in Preview.
- Add Auto-animate to the component transition and test several instances, including reverse transitions and layouts that change size or position.
State groups
- Interaction: Hover, Pressed, Clicked (toggle), Focus, keyboard-only focus, and contains focus.
- Form: disabled/enabled, checked/unchecked, required/optional, valid/invalid, and placeholder shown.
- Link: visited and unvisited.
- Position in list: first, last, only, odd, even, and empty.
Where masters live
Creating a component through the designer can lift the master to the Free Canvas and leave an instance where the original element was. The Design System Components tab shows one base-variant tile for each master.
Limitations and important notes
- Clicked state is stylesheet-driven; it is configured only for selectors that use the toggle token.
- :not(...) states are not force-mirrored on the editor canvas because rewriting them could match unrelated elements.
- Auto-animate measures each matched instance separately; test large lists for both motion quality and runtime cost.
Troubleshooting
Deleting inside one variant removes more than expected
Confirm the variant cell—not the whole component cell/master—is active before deleting, and use variant-scoped hide when the layer must remain in other cells.
Clicked looks the same as Pressed
Preview and release the pointer: Pressed ends on release, while Clicked should remain until the next click.