# Alert

A block-level informational box for inline content — tips, warnings, status. Class + data-attribute API: one `.x-alert` class plus `data-variant`, `data-size`, `data-accent`. Two-column grid: icon slot on the left, body on the right.

`.x-alert` is purely visual. It does **not** apply `role="alert"` (the ARIA live-region semantic). Add `role="alert"` or `role="status"` yourself when the content is dynamic and needs to be announced.



## Install

```ts
import "elements-kit/ui/styles.css";

import "elements-kit/ui/styles/palette/gray.css";
import "elements-kit/ui/styles/neutral/gray.css";
import "elements-kit/ui/styles/palette/amber.css";
import "elements-kit/ui/styles/accent/amber.css";

import "elements-kit/ui/alert/alert.css";
```

## API

```html
<div class="x-alert" data-variant="soft" data-accent="amber" data-size="2">
  <svg class="x-alert-icon" aria-hidden="true" viewBox="0 0 16 16" width="16" height="16">
    <path d="..." fill="currentColor" />
  </svg>
  <div>Your trial ends in 7 days.</div>
</div>
```

| Attribute            | Values                                                   |
| -------------------- | -------------------------------------------------------- |
| `data-variant`       | `soft` (default), `surface`, `outline`                   |
| `data-size`          | `1`, `2` (default), `3`                                  |
| `data-accent`        | any imported color scale (`amber`, `iris`, `crimson`, …) |
| `data-high-contrast` | modifier — bumps color to `--accent-12`                  |

`unset` is **not required** on `<div>` / `<aside>`. Add it only if the alert is a `<button>` or `<a>` wrapper.

## Sizing

| `data-size`     | padding     | gap         | radius       |
| --------------- | ----------- | ----------- | ------------ |
| `1`             | `--space-3` | `--space-2` | `--radius-3` |
| `2` *(default)* | `--space-4` | `--space-3` | `--radius-4` |
| `3`             | `--space-5` | `--space-4` | `--radius-5` |

The icon slot height is `--line-height-2` for sizes 1–2 and `--line-height-3` for size 3.

## Variants

* **`soft`** *(default)* — tinted background using `--accent-a3`. The everyday alert.
* **`surface`** — `--accent-a2` background + 1px `--accent-a6` border. Sits closer to neutral.
* **`outline`** — 1px `--accent-a7` border, no background. For minimal noise.

## Icon slot

Any direct child with `class="x-alert-icon"` lands in the icon column. Other direct children flow into the content column. Wrap multi-line content in a single `<div>` if you want it to share a column.

```html
<div class="x-alert" data-variant="soft" data-accent="iris">
  <svg class="x-alert-icon" aria-hidden="true">…</svg>
  <div>
    <strong>Heads up.</strong>
    <p>This change applies to everyone in your workspace.</p>
  </div>
</div>
```

## Theming

Set `data-accent` to pick the accent. Light/dark flips via `.dark` on a parent — see [Light & dark](/ui/styles#light--dark).

## Accessibility

* `.x-alert` is visual only. Add `role="alert"` (urgent) or `role="status"` (advisory) yourself when content changes dynamically.
* Pair icons with `aria-hidden="true"` and put the meaning in the text — icons alone don't read in screen readers.

> **Don't**
>
> Slap `role="alert"` on every static alert. The role makes screen readers interrupt to announce content, which is disruptive for non-dynamic notices.