# list-style

> Applies `list-style`.

```ts
import { listStyle } from "@sdxc/u/general";
```

Applies `list-style`. Defaults to `"none"`, the common case of a `<ul>` or
`<ol>` serving as a plain layout container.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.listStyle()` | `css({ listStyle: "none" })` |
| `u.listStyle("decimal")` | `css({ listStyle: "decimal" })` |

## Examples

### Basic example

Use `listStyle("disc")` or `listStyle("decimal")` to draw bullets or numbers beside list items, and `listStyle()` to remove them:

```tsx
<div mix={[grid(), gridTemplate({ columns: "repeat(3, auto)" }), gap(10)]}>
	<div>
		<p mix={[...]}>listStyle()</p>
		<ul mix={[listStyle()]}>
			<li>Passport</li>
			<li>Charger</li>
			<li>Rain jacket</li>
		</ul>
	</div>
	<div>
		<p mix={[...]}>listStyle("disc")</p>
		<ul mix={[listStyle("disc"), pis(5)]}>
			<li>Passport</li>
			<li>Charger</li>
			<li>Rain jacket</li>
		</ul>
	</div>
	<div>
		<p mix={[...]}>listStyle("decimal")</p>
		<ol mix={[listStyle("decimal"), pis(5)]}>
			<li>Passport</li>
			<li>Charger</li>
			<li>Rain jacket</li>
		</ol>
	</div>
</div>
```

### Other markers

Pass any `list-style` value, like a counter style, a position or a quoted string to use as the marker:

```tsx
<div mix={[grid(), gridTemplate({ columns: "repeat(3, auto)" }), gap(10)]}>
	<div>
		<p mix={[...]}>listStyle("lower-roman")</p>
		<ol mix={[listStyle("lower-roman"), pis(6)]}>
			<li>Preface</li>
			<li>Methods</li>
			<li>Results</li>
		</ol>
	</div>
	<div>
		<p mix={[...]}>listStyle("square inside")</p>
		<ul mix={[listStyle("square inside"), ...]}>
			<li>Preface</li>
			<li>Methods</li>
			<li>Results</li>
		</ul>
	</div>
	<div>
		<p mix={[...]}>listStyle('"✓ "')</p>
		<ul mix={[listStyle('"✓ "'), pis(5)]}>
			<li>Preface</li>
			<li>Methods</li>
			<li>Results</li>
		</ul>
	</div>
</div>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.listStyle())
```

## Responsive design

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

```ts
u.at("md", u.listStyle())
```

## Signature

```ts
u.listStyle(value?: ListStyleValue)
```