state

data

Sugar over an element's own data-* attribute selector: matches &[data-{attribute}] (any value, including a bare boolean attribute) with no value argument, or &[data-{attribute}="{value}"] with one.

import { data } from "@sdxc/u/state";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.data("orientation", "vertical", u.flexCol())`	`css({ '&[data-orientation="vertical"]': { flexDirection: "column" } })`
`u.data("disabled", u.opacity(50))`	`css({ "&[data-disabled]": { opacity: 0.5 } })`

Using a custom value

Every scale argument also takes a raw CSS value, which passes through untouched.

u.data("orientation", "vertical", u.flexCol())

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.data("orientation", "vertical", u.flexCol()))

Signature

u.data(attribute: string, input: UtilityInput<Node>)