# 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.

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

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.

## 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 } })` |

## Examples

### Basic example

Pass an attribute and a value to `data()` to style an element by one of its `data-*` attributes:

```tsx
<div
	mix={[hstack({ gap: 1 }), p(1), rounded("lg"), border({ color: "neutral.border", width: 1 })]}
>
	<span
		data-state="inactive"
		mix={[
			fg("neutral.muted"),
			data("state", "active", [bg("brand.solid"), fg("brand.onSolid")]),
			...,
		]}
	>
		Account
	</span>
	<span
		data-state="active"
		mix={[
			fg("neutral.muted"),
			data("state", "active", [bg("brand.solid"), fg("brand.onSolid")]),
			...,
		]}
	>
		Billing
	</span>
	<span
		data-state="inactive"
		mix={[
			fg("neutral.muted"),
			data("state", "active", [bg("brand.solid"), fg("brand.onSolid")]),
			...,
		]}
	>
		Team
	</span>
</div>
```

### Matching a flag

Leave out the value to match the attribute whenever it is present, like a bare `data-done` flag:

```tsx
<ul mix={[...]}>
	<li data-done mix={[fg(), data("done", [textDecoration("line-through"), opacity(50)])]}>
		Write the README
	</li>
	<li mix={[fg(), data("done", [textDecoration("line-through"), opacity(50)])]}>
		Publish to npm
	</li>
	<li mix={[fg(), data("done", [textDecoration("line-through"), opacity(50)])]}>Announce it</li>
</ul>
```

### Switching layout

Any utility works inside `data()`, like `flexCol()` to stack a toolbar marked `data-orientation="vertical"`:

```tsx
<div mix={[...]}>
	<div
		data-orientation="horizontal"
		mix={[hstack({ gap: 2 }), data("orientation", "vertical", flexCol())]}
	>
		<div mix={[...]}>1</div>
		<div mix={[...]}>2</div>
		<div mix={[...]}>3</div>
	</div>
	<div
		data-orientation="vertical"
		mix={[hstack({ gap: 2 }), data("orientation", "vertical", flexCol())]}
	>
		<div mix={[...]}>1</div>
		<div mix={[...]}>2</div>
		<div mix={[...]}>3</div>
	</div>
</div>
```

## Responsive design

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

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

## Signature

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