# Alert

Level: molecule.

## Purpose and use

Explain a local status, result or problem near the affected content. Use Toast
for a transient notification and Modal for a decision that blocks continuation.

## Anatomy, behavior, and accessibility

- Optional semantic icon, title, subtitle, one or two flat actions and a close
  button form the alert. Type fixes both the icon and action color treatment.
- Warning/danger use `role="alert"`; neutral/info/success use `role="status"`.
  Icons are decorative; the text must state the outcome without relying on color.
- The second action renders only when the action group and `action2` are enabled.
  Each action passes its own loading value to Button Flat.
- Dismiss and actions emit events. Dismiss does not remove the alert; the parent
  decides visibility. The native close button is named «Закрыть уведомление».
- Replace default Title/Subtitle/Button copy with the issue and a specific next
  action. There is no content-projection slot or automatic timeout.

## Local component contract

This is the active owned contract for `component.alert`. The API below
is verified against the current local implementation, focused test and story.
The Source commit `0112cba0779a2d2a4b6c7a17243201694344d70a` remains
migration provenance, not the runtime owner.

### Classes and selectors

- `WblAlertComponent` — `wbl-alert` (src/app/design-system/patterns/alert/alert.component.ts).

### Inputs

- `WblAlertComponent.type = input<WblAlertType>('neutral')`
- `WblAlertComponent.size = input<WblAlertSize>('M')`
- `WblAlertComponent.leftIcon = input(true)`
- `WblAlertComponent.title = input(true)`
- `WblAlertComponent.titleText = input('Title')`
- `WblAlertComponent.subtitle = input(true)`
- `WblAlertComponent.subtitleText = input('Subtitle')`
- `WblAlertComponent.closable = input(true)`
- `WblAlertComponent.action = input(true)`
- `WblAlertComponent.actionLabel = input('Button')`
- `WblAlertComponent.actionLoading = input(false)`
- `WblAlertComponent.action2 = input(false)`
- `WblAlertComponent.action2Label = input('Button')`
- `WblAlertComponent.action2Loading = input(false)`
- `WblAlertComponent.iconName = input<WblIconName | null>(null)` — A-003:
  replaces the type icon (Figma «Мои заявки» `19223:178822`: `smile-sad` on a
  rejected application, `smile-happy` on an approved one); `null` keeps the
  type icon. Type still sets colors, live role and action variant.
- `WblAlertComponent.grouped = input(false)` — A-003: the alert heads a
  bordered group with a card below it; the group owns the corners, so the
  alert drops its own radius.

### Public types and allowed values

```ts
type WblAlertType = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
type WblAlertSize = 'M' | 'S';
```

### Models

- None.

### Outputs

- `WblAlertComponent.dismiss = output<void>()`
- `WblAlertComponent.actionClick = output<void>()`
- `WblAlertComponent.action2Click = output<void>()`

### Slots and projection markers

- The exact template has no Angular content-projection slot.

### Local evidence

- Code: `src/app/design-system/patterns/alert/alert.component.ts`.
- Focused test: `src/app/design-system/patterns/alert/alert.component.spec.ts`.
- Public export: `export * from './patterns/alert/alert.component';` in `src/app/design-system/index.ts`.
- Storybook: `storybook/stories/alert.stories.ts` (`Design System/Patterns/wbl-alert`).

## Figma status

This runtime contract does not infer a Figma owner. Assembly evidence, when
verified, is maintained separately through the inventory-linked sidecar.

## Provenance

The archived source-document copy is historical evidence only. The active
resolver is local code/test/export and the exact Storybook story above.