# <aihio-alert>

A callout for a message the user should notice where it is shown: a failed save, a confirmation that something worked, a warning about a setting. Only the destructive variant interrupts a screen reader.

Intents: `alert`, `informational`, `status`.

## Attributes

- `variant` (`default` | `success` | `warning` | `destructive`): Visual and live-region emphasis. destructive announces assertively; success, warning, and default announce politely. Default: `default`.

## Slots

- `default`: Alert content.
- `title`: Alert title (use slot="title").
- `description`: Alert description (use slot="description").

## Accessibility obligations

- (warn, alert-announced-content) When variant="destructive": Include slot="title" or slot="description" so assistive tech has content to announce. Colour alone is not a sufficient signal.
- (error, alert-role) When role is set on the alert to anything but its variant's own (alert for destructive, status otherwise): Remove the role and let the variant set it: role="alert" for destructive, which interrupts the screen reader, and role="status" for the rest, which waits its turn.

## Examples

### Default

Neutral information, announced politely as role="status".

```html
<aihio-alert>
  <div slot="title">Heads up!</div>
  <div slot="description">You can add components to your app.</div>
</aihio-alert>
```

### Destructive

A failure: the one variant announced assertively, as role="alert".

```html
<aihio-alert variant="destructive">
  <div slot="title">Error</div>
  <div slot="description">Something went wrong.</div>
</aihio-alert>
```

### Success

A confirmation that something worked.

```html
<aihio-alert variant="success">
  <div slot="title">Changes saved</div>
  <div slot="description">Your profile is up to date.</div>
</aihio-alert>
```

### Warning

Something that needs attention but has not failed.

```html
<aihio-alert variant="warning">
  <div slot="title">Trial ends in 3 days</div>
  <div slot="description">Add a payment method to keep your workspace active.</div>
</aihio-alert>
```

## Mistakes

### variant="error" is not valid. Use variant="destructive" for error states.

Don't (aihio lint: invalid-enum-attribute):

```html
<aihio-alert variant="error">Oops</aihio-alert>
```

Do:

```html
<aihio-alert variant="destructive">
  <div slot="title">Could not save</div>
</aihio-alert>
```

### Alerts are non-interactive surfaces. For acknowledgeable prompts use aihio-dialog.

Don't (aihio lint: forbidden-descendant):

```html
<aihio-alert><aihio-button>OK</aihio-button></aihio-alert>
```

Do:

```html
<aihio-alert>
  <div slot="title">Your changes were saved</div>
</aihio-alert>
```

### role="alert" interrupts the screen reader. A confirmation should announce politely — drop the role and let the success variant set role="status".

Don't (aihio lint: alert-role):

```html
<aihio-alert variant="success" role="alert">Saved</aihio-alert>
```

Do:

```html
<aihio-alert variant="success">Saved</aihio-alert>
```