# Alert

Displays a callout for user attention.

Use Alert for inline status callouts, destructive warnings, upgrade prompts, and other situations where the message should stay anchored in the current page flow.

## Import

```ts
import {
  AlertActionComponent,
  AlertComponent,
  AlertDescriptionComponent,
  AlertTitleComponent,
} from '@edsis/component/alert';
import { ButtonComponent } from '@edsis/component/button';
```

## Composition

The Angular structure mirrors the shadcn composition while leaving icon choice to the consuming app.

```text
Alert
├── svg (optional icon)
├── AlertTitle
├── AlertDescription
└── AlertAction (optional)
```

## Usage

```html
<Alert class="max-w-md">
  <svg aria-hidden="true" class="size-4"><!-- icon --></svg>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the CLI.
  </AlertDescription>
</Alert>

<Alert class="max-w-md">
  <AlertTitle>Dark mode is now available</AlertTitle>
  <AlertDescription> Enable it under your profile settings to get started. </AlertDescription>
  <AlertAction>
    <button Button variant="outline" size="sm">Enable</button>
  </AlertAction>
</Alert>
```

## Common patterns

### Basic

Use an optional icon plus title and description for successful or informative states.

```html
<Alert class="max-w-md">
  <svg aria-hidden="true" class="size-4"><!-- success icon --></svg>
  <AlertTitle>Account updated successfully</AlertTitle>
  <AlertDescription>
    Your profile information has been saved. Changes will be reflected immediately.
  </AlertDescription>
</Alert>
```

### Destructive

Apply `variant="destructive"` for failures, expired sessions, and other high-priority issues.

```html
<Alert variant="destructive" class="max-w-md">
  <svg aria-hidden="true" class="size-4"><!-- warning icon --></svg>
  <AlertTitle>Payment failed</AlertTitle>
  <AlertDescription>
    Your payment could not be processed. Please check your payment method and try again.
  </AlertDescription>
</Alert>
```

### Action

Wrap a trailing control in `AlertAction`. The wrapper aligns the control at the end of the message and anchors it to the top-right on wider layouts.

```html
<Alert class="max-w-md">
  <AlertTitle>Dark mode is now available</AlertTitle>
  <AlertDescription> Enable it under your profile settings to get started. </AlertDescription>
  <AlertAction>
    <button Button variant="default" size="sm">Enable</button>
  </AlertAction>
</Alert>
```

### Custom colors

Pass custom classes to the root when the alert should adopt a contextual palette.

```html
<Alert class="max-w-md border-amber-300 bg-amber-50 text-amber-950 [&>svg]:text-amber-700">
  <svg aria-hidden="true" class="size-4"><!-- warning icon --></svg>
  <AlertTitle>Your subscription will expire in 3 days.</AlertTitle>
  <AlertDescription>
    Renew now to avoid service interruption or upgrade to a paid plan to continue using the service.
  </AlertDescription>
</Alert>
```

### RTL

For right-to-left interfaces, place the alert inside a container with `dir="rtl"` or manage direction globally in the app shell.

```html
<section dir="rtl" lang="ar" class="max-w-md text-right">
  <Alert>
    <svg aria-hidden="true" class="size-4"><!-- icon --></svg>
    <AlertTitle>تم الدفع بنجاح</AlertTitle>
    <AlertDescription>
      تمت معالجة دفعتك البالغة 29.99 دولارًا. تم إرسال إيصال إلى عنوان بريدك الإلكتروني.
    </AlertDescription>
  </Alert>
</section>
```

## API reference

### `AlertComponent`

| Input     | Type                         | Default     |
| --------- | ---------------------------- | ----------- |
| `variant` | `'default' \| 'destructive'` | `'default'` |
| `class`   | `string`                     | `''`        |

### `AlertTitleComponent`

| Input   | Type     | Default |
| ------- | -------- | ------- |
| `class` | `string` | `''`    |

### `AlertDescriptionComponent`

| Input   | Type     | Default |
| ------- | -------- | ------- |
| `class` | `string` | `''`    |

### `AlertActionComponent`

| Input   | Type     | Default |
| ------- | -------- | ------- |
| `class` | `string` | `''`    |

### Parts

- `AlertTitle` renders the heading of the callout.
- `AlertDescription` renders the supporting copy.
- `AlertAction` is an optional layout wrapper for a trailing button or link.

Re-export: `alertVariants` and `AlertVariant`.

## Styling and theming

Tokens consumed: `--border`, `--background`, `--foreground`, `--destructive`.
Leading SVG children are auto-positioned via descendant selectors so an icon slots in cleanly without extra wrapper markup.

Pass `class` to the root when you need wider layouts, custom color treatments, or embedded card styling. Pass `class` to the title, description, or action parts when a specific example needs spacing or typography overrides.

## Accessibility

The root has `role="alert"` so assistive technologies announce the message when
it appears. For polite, non-interrupting messages, prefer a toast or another live-region pattern instead.

When you include a call-to-action, keep the control a native `<button Button>` or `<a Button>` so standard keyboard and assistive-technology behavior remains intact.

## Keyboard interactions

The alert itself does not handle keyboard input. Any nested actions inherit native keyboard behavior from the projected button or link.

## Angular notes

The Angular version keeps the same shadcn parts while translating them to standalone imports, `input()` bindings, and utility-first host classes. Icons are application-level concerns, so bring your own icon component or inline SVG instead of expecting an icon export from the alert primitive.

## Source parity

This implementation follows the shadcn Alert structure and examples while adapting the API to Angular selectors, standalone imports, and the local button primitive for action content.