# DialogBordered


`src/lib/components/ui/dialog-bordered.svelte`

## Purpose

Wraps `ui/dialog` to give the dialog a **semantic severity color**: either a
colored top strip (default) or a full gradient border (`tone="soft"`). Use it
anywhere a dialog must communicate its category at a glance — confirmations,
error viewers, destructive actions, warnings.

> **Entity delete/restore confirmations must NOT use `DialogBordered`
> directly.** Use the standard entity dialogs instead — they derive title and
> body copy from translation keys by convention. See
> [Entity confirm dialogs](/frontend/dev/components/entity-confirm-dialogs).

## Origin

**Custom** — thin wrapper around the in-repo `ui/dialog` (shadcn-svelte™
extended). Adds the severity accent and forwards `open`/`children` plus any
bits-ui `Dialog.Content` props.

## Usage

### Default (primary top strip)

```svelte
<script lang="ts">
  import DialogBordered from "$lib/components/ui/dialog-bordered.svelte";
  let open = $state(false);
</script>

<DialogBordered bind:open>
  <h2 class="text-lg font-semibold">Confirm action</h2>
  <p class="text-sm text-muted-foreground">Are you sure?</p>
</DialogBordered>
```

### Destructive (animated gradient strip)

```svelte
<DialogBordered bind:open severity="destructive" showCloseButton={false}>
  <h2 class="text-lg font-semibold">Delete cache entry</h2>
  <p class="text-sm text-muted-foreground">This action cannot be undone.</p>
</DialogBordered>
```

### Soft tone (full gradient border, no top strip)

```svelte
<DialogBordered bind:open severity="primary" tone="soft">
  <p>Content framed by a full gradient border.</p>
</DialogBordered>
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `open` | `boolean` (bindable) | — | Dialog visibility |
| `severity` | `'primary' \| 'info' \| 'success' \| 'warning' \| 'destructive' \| 'neutral'` | `'primary'` | Accent color. `warning`/`destructive` animate the gradient. |
| `tone` | `'' \| 'soft'` | `''` | `''` = colored top strip; `'soft'` = full-around gradient border. |
| `showCloseButton` | `boolean` | `true` | Forwarded to `Dialog.Content` |
| `class` | `string` | `''` | Extra classes on `Dialog.Content` |
| `children` | `Snippet` | required | Dialog body |
| `...restProps` | — | — | Pass-through of bits-ui `Dialog.Content` props (`escapeKeydownBehavior`, `onInteractOutside`, …) for persistent dialogs |

## Severity → accent map

| `severity` | Accent |
|---|---|
| `primary` | sky-400 → indigo-400 gradient strip |
| `info` | sky-400 → blue-600 gradient strip |
| `success` | emerald-400 → emerald-600 gradient strip |
| `warning` | animated yellow gradient strip |
| `destructive` | animated rose→red gradient strip |
| `neutral` | solid neutral-500 strip |

## When to use which dialog

| Case | Component |
|---|---|
| Delete/restore an **entity record** (single or bulk) | `DeleteDialog` / `RestoreDialog` / `BulkDeleteDialog` / `BulkRestoreDialog` — never `DialogBordered` directly |
| Destructive action on a **non-entity** thing (cache files, credentials, sessions) | `DialogBordered severity="destructive"` with a custom title |
| Non-destructive confirm / notice / detail viewer | `DialogBordered` with the matching `severity` |
| Generic content dialog with no semantic intent | plain `ui/dialog` |

## Next steps

- [Entity confirm dialogs](/frontend/dev/components/entity-confirm-dialogs)
- [RFCErrorDialog](/frontend/dev/components/rfc-error-dialog)
- [Component catalog](/frontend/dev/components)