The Lumos Trigger and State system is an advanced way to manage CSS interactions without using custom code embeds or javascript. It allows you to fine-tune inheritance so that you can have elements animate based on the data attribute of a parent, giving you fine-tuned control over if you want the interaction to happen on hover, focus or more defined parameters.

To learn more start by watching this video:

https://www.youtube.com/watch?v=H6BdmNK0bME

Benefits

Rename classes and variables without breaking custom code
Keep all styles visible in the style panel for no-coders
Easily override states natively with component variants

State

Elements with the following attributes are made active when a condition is met.

data-state="checked"

If element is or contains a checkbox or radio that's checked

data-state="current"

If element is or contains a link block pointed to the current page or anchor link pointed to the current section

data-state="open"

If element is or contains an open menu button, open dropdown toggle, or open dropdown list

data-state="expanded"

If element is or contains a child with an attribute of aria-expanded="true" including open dropdown toggles or custom accordions

data-state="external"

If element is or contains a link that opens in a new tab