## ConfirmDialog A compact modal for confirming a decision. Wraps `BaseModal` (inheriting its refresh-design container polish: 2-layer shadow, lighter overlay, 15px title hierarchy, horizontal divider between header and body). ### Anatomy (refresh layout) ``` ┌─────────────────────────────────────────────┐ │ Title × │ ← BaseModal header │ Subtitle line (context) │ (title + optional subtitle) ├─────────────────────────────────────────────┤ │ │ │ The message explains what will happen and │ ← body: just the message │ any consequences the user should know. │ │ │ ├─────────────────────────────────────────────┤ │ [ Cancel ] [ Action ] │ ← footer: buttons flush-right └─────────────────────────────────────────────┘ ``` - **Title + subtitle** live at the top in `BaseModal`'s header — the subtitle is a one-line context string (plugin name · version, experiment code, etc.) - **Body** holds only the message. No forced icon sidebar — the variant's intent is carried by the confirm button's color - **Icon is opt-in**: pass a `#icon` slot only if your message needs an extra visual signal. Most confirmations don't. ### Button tactile system The Cancel + Confirm buttons use the **same system as BaseButton**: - Hover: `translateY(-1px)` + `var(--shadow-sm)` over 150ms with `--mint-ease-out-quart` - Press: snap to `translateY(0)`, shadow cleared, gradient flattened at 50ms - Filled confirm gets the 12% white gradient overlay - `prefers-reduced-motion` guarded ### Variant semantics | Variant | Confirm button color | When to use | |---|---|---| | `danger` | `--mint-error` | Destructive or irreversible actions (delete, uninstall, drop table) | | `warning` | `--mint-warning` | Potentially lossy actions (discard unsaved, overwrite config) | | `info` | `--color-primary` | Affirmative CTAs (save, submit, export, publish) | **Why `info` uses `--color-primary` not `--mint-info`**: info-as-CTA means "proceed with this positive action" — it should match the primary button color, not the informational-banner cyan that's reserved for non-action status pills. ### Loading state contract When `loading: true`: - Confirm button replaces its label with a spinner, disables hover - Cancel button is disabled - Overlay click and Escape-to-close are both blocked — the user can't accidentally dismiss an in-flight operation