# Confirm

An approval card with a body, optional tone, and labelled action buttons — resolves itself after the user picks so the same action can never double-fire.

<p class="kai-tag-sub">kai-confirm</p>

A structured approval card that pairs a body message with labelled action buttons — use it when the model needs an explicit go-ahead before a consequential operation runs.

## Preview

> **tip:** 
Use `<kai-confirm>` when the model proposes an action the user must explicitly approve — deploying, deleting, sending. `tone: 'warning'` signals caution; `tone: 'danger'` signals destructive intent via colour **and** icon. For equally-weighted choices that aren't approval-gated, use `<kai-choice>` instead.

## Usage

Set `data` in JavaScript (it's an object) and listen for the `kai-card` CustomEvent:

```html
<kai-confirm heading="Run database migration?"></kai-confirm>

<script type="module">

  await customElements.whenDefined('kai-confirm');

  const el = document.querySelector('kai-confirm');

  el.data = {
    body: 'This will apply 3 pending migrations to production. This cannot be undone.',
    tone: 'warning',
    actions: [
      { id: 'approve', label: 'Run migration', style: 'primary', default: true },
      { id: 'reject',  label: 'Cancel' },
    ],
  };

  el.addEventListener('kai-card', (e) => {
    const ev = e.detail; // { kind: 'action', cardId, action, payload? }
    if (ev.kind === 'action') console.log('chose', ev.action);
  });
</script>
```

- **`data`** — shape: `ConfirmCardData` from `@kitn.ai/ui`. Malformed payloads render an inline error.
- **Action styles** — `'primary' | 'default' | 'destructive'`. Mark one `default: true` to make it the keyboard default; combine with `autofocus` to focus it on mount.
- **Restore resolved state** via `el.resolution = { kind: 'action', action: 'approve' }` — useful when replaying past conversations.

## Examples

### Approve or Reject

The canonical two-action pattern: `warning` tone, primary confirm, plain cancel.

### Destructive Action

`tone: 'danger'` with `style: 'destructive'` — colour and icon both signal severity.

### Choice Set

More than two actions work naturally — each becomes a button.

### Dismissible

`dismissible: true` adds a close (×) affordance that fires `{ kind: 'dismiss', cardId }` — the card stays in the DOM.

### Resolved (Read-only)

Set the `resolution` property to render the chromed read-only view for a replayed conversation.

### Error State

An empty `actions` array renders the inline error view and fires `{ kind: 'error', cardId, message }`.

## Props

## Methods

## Composed from