This follows my troubleshooting from how Webstudio integrates Radix components (https://discord.com/channels/955905230107738152/1209297578265673798) and discovering the hidden and non-documented use case of design token element states.

Turns out they exist, and that should've been apparent if none of the Webstudio Design Token documentation mentions 'states' apart from a single screenshot https://docs.webstudio.is/university/foundations/design-tokens#how-to-use-tokens-in-webstudio. Even so, Webstudio doesn't have a filtered-view to show 'hover', 'focus', or 'active' element states styles making it very difficult to understand the entire webpage styling and/or functionality of multiple components (e.g Radix components as per my other suggestions post) if a certain state is applied.

For example, if I were to make a temporary e-commerce store to sell limited edition merchandise or tickets to a geographically-local event, 1. I would assume people immediately say that it's not the best way to implement such a feature, but 2. there's no way to view the store components (e.g. menu button, image banner on homepage etc.) being disabled or enabled during the front-end development stages.

Looking in past discussions, there are already some weird behaviours of the design tokens trying to display properties used across multiple design token states, however this probably shows how complicated this integration of design tokens is to begin with.

To start, I'll disclose that I'm a UI & UX Front-End Development dumbass, i.e I have no good prerequisite knowledge on how Radix components works or functions.

That being said, I appreciate the integration of Radix into Webstudio, however because of its integration it's hard to understand how it handles the component's functionality. An example would be the navigation menu where I can see and edit layer elements (e.g. button, text, containers etc.), but cannot seem to find or configure any of the logic integrated in the component (e.g. cursor hover to change background, click to open sub-menu).

Perhaps, again, I'm a dumbass, but the Webstudio canvas UI doesn't do a great job of highlighting logic-changing components (i.e. finding and highlighting the source of element styling changes), as if there's a hidden layer containing all of the scripting/logic that I can't access in someway.

I would note though, as of writing, there is some documentation being drafted on the official webstudio docs (https://docs.webstudio.is/university/marketplace/ui-kits-and-components/radix) but nothing has been published yet.