---

## Toast
Container that renders and manages toast notifications.
Place once in your root layout. Use the toaster store to trigger toasts from anywhere.

**Import:** `import { Toast } from '@urbicon-ui/blocks';`

### Examples
```svelte
<!-- +layout.svelte -->
<Toaster placement="bottom-right" />
```

```svelte
<script>
  import { toaster } from '@urbicon-ui/blocks';

  toaster.success('Saved!', { description: 'Changes applied.' });
  toaster.danger('Error', { description: 'Something went wrong.', duration: 8000 });
</script>
```

### Variants
- intent: danger, info, neutral, primary, success, warning (default: neutral)
- placement: bottom-center, bottom-left, bottom-right, top-center, top-left, top-right (default: bottom-right)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| ...HTMLAttributes<HTMLDivElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
| class | `string` | no |  | Extra classes merged onto the container element. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| max | `number` | no | 5 | Maximum number of toasts visible at once. Oldest are hidden first. |
| placement | `ToastPlacement` | no | 'bottom-right' | Screen corner where toasts stack. |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Toaster: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
| slotClasses | `Partial<Record<ToasterSlots, string>>` | no |  | Per-slot class overrides merged with (or replacing, when `unstyled`) the default styles. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| transitionDuration | `number` | no |  | Override the enter/exit fly animation duration in milliseconds for every toast in this toaster. Defaults to the overlay token `--blocks-overlay-enter-duration` (200ms). Set globally via the CSS custom property or per-instance via this prop. Respects `prefers-reduced-motion`. |
| transitionEasing | `(t: number) => number` | no |  | Override the enter/exit fly easing. Defaults to the overlay token easing (`quintOut`). |
| unstyled | `boolean` | no |  | Strip all default tv classes. Use with `slotClasses` for a fully custom look. |
| intent | `'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning'` | no | neutral | Controls the color theme and semantic meaning of the Toast. Affects the overall appearance and user perception. Available options: danger, info, neutral, and 3 more. |

Inherited from:
- Omit<HTMLAttributes<HTMLDivElement>, 'children'> (omit-pattern)

### Types
```ts
type ToastIntent = (typeof TOAST_INTENTS)[number]
```

```ts
interface ToastAction {
/** Button label. */
  label: string;
  /** Click handler. Receives the toast id so the handler can dismiss/update it. */
  onClick?: (id: string) => void;
  /** Dismiss the toast after the click. @default true */
  dismissOnClick?: boolean;
}
```

```ts
interface ToastData {
/** Unique identifier assigned automatically. Used for programmatic dismissal via `toaster.dismiss(id)`. */
  id: string;
  /** Semantic color of the toast. Affects border, icon, and progress bar color. @default 'neutral' */
  intent: ToastIntent;
  /** Bold heading line. Omit for a minimal notification. */
  title?: string;
  /** Secondary text below the title. */
  description?: string;
  /** Auto-dismiss delay in milliseconds. Set to `0` for persistent toasts that require manual dismissal. @default 5000 */
  duration: number;
  /** Show a close button so the user can dismiss manually. @default true */
  dismissible: boolean;
  /** Show an animated progress bar that counts down the remaining `duration`. @default true */
  showProgress: boolean;
  /** Primary action button (prominent). */
  action?: ToastAction;
  /** Secondary/cancel button (quiet). */
  cancel?: ToastAction;
  /** Render a spinner instead of the intent icon (used by `toaster.promise` while pending). @default false */
  loading?: boolean;
}
```

```ts
interface ToastPromiseOptions {
/** Shown while the promise is pending (spinner, persistent, not dismissible). */
  loading: string | ToastInput;
  /** Shown when the promise resolves. */
  success: string | ToastInput | ((value: T) => string | ToastInput);
  /** Shown when the promise rejects. */
  error: string | ToastInput | ((reason: unknown) => string | ToastInput);
}
```

```ts
type ToastInput = Partial<Omit<ToastData, 'id'>>
```

```ts
type ToastShorthandOpts = Omit<ToastInput, 'intent' | 'title'>
```

```ts
type ToastPlacement = | 'top-right'
  | 'top-left'
  | 'top-center'
  | 'bottom-right'
  | 'bottom-left'
  | 'bottom-center'
```

### Slots (slotClasses keys)
`container`, `toast`, `icon`, `content`, `title`, `description`, `actions`, `actionButton`, `cancelButton`, `dismissButton`, `progress`