💡 Proposal: Scoped UI State via Element-Level data-* Attributes #9

Austin1serb · 2025-06-23T18:50:52Z

Austin1serb
Jun 23, 2025
Maintainer

Zero‑UI is built on global data-* attributes — ideal for themes, layouts, etc. But some components (like tooltips, dropdowns, FAQ items) don’t need global state. They need scoped state.

🧠 Idea

Add support for element-level state toggles, like:

<div onMouseEnter={() => setTooltip("on", e)} data-tooltip="off">
  <div className="tooltip-on:opacity-100">Tooltip</div>
</div>

Where useUI('tooltip') sets a data-tooltip on the current element, not <body>.

✅ Benefits

Fully compatible with current Zero‑UI logic
No observers, no refs, no context
Enables atomic, local UI state (perfect for tooltips, menus)
Still < 1KB runtime

🛠 Proposed Change

In build step (buildCss):

@variant tooltip-on (body[data-tooltip="on"] &);
@variant tooltip-on ([data-tooltip="on"] &);
/* or something alike */

That’s it. Two selectors per key-value pair.

🔥 Why Now?

We want to showcase Zero‑UI in a tooltip-heavy demo.
Current global-only pattern doesn't allow for single Item UI updates. it has to update all of them.
This is the natural evolution of the core idea: UI from nothing.

Would love feedback before I ship the PR.
Is this the right direction?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

💡 Proposal: Scoped UI State via Element-Level data-* Attributes #9

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

💡 Proposal: Scoped UI State via Element-Level data-* Attributes #9

Uh oh!

Austin1serb Jun 23, 2025 Maintainer

🧠 Idea

✅ Benefits

🛠 Proposed Change

🔥 Why Now?

Replies: 0 comments

Austin1serb
Jun 23, 2025
Maintainer