# Feedback & overlays

Callouts, modal dialogs, and the image lightbox for surfacing feedback and overlaying content above the page.

## Alert (callout)

A callout box framed by the 1.5px rule with a label chip sitting on its top edge, like the website's notes. The variant sets the chip and the tint: `info` is labelled **Note** (white chip, plain surface), `success`**Tip** (mint), `warning`**Watch out** (yellow) and `error`**Error** (a red tint). `label` overrides the chip text. `<docs-alert>` and the markdown `:::alert` block share the `.docs-callout` styles, so both render alike.

### Variants

> **Note:**
>
> Lists are views on a model: create as many as you need, they share the data.

> **Tip:**
>
> Name a list when you create it, so you can find it again with `getList()`.

> **Watch out:**
>
> Only index properties you actually query. Every index costs memory and load time.

> **Error:**
>
> The model key must be unique. A second model with the same key replaces the first.

> **Index on purpose:**
>
> A custom label replaces the default chip text.

#### Usage

```html
<docs-alert variant="warning">Only index properties you actually query.</docs-alert>
<docs-alert variant="success" label="Pro tip">Name your lists.</docs-alert>

<!-- Markdown -->
:::alert{variant="warning"}
Only index properties you actually query.
:::
```

## Modal

A dialog: a flat panel framed by the 1.5px rule (6px corners) with the overlay shadow — the one place a shadow is allowed — a tinted header strip and a footer slot (`[modal-footer]`), over a dimmed backdrop. Traps focus, closes on Escape and on the backdrop (both configurable).

### Example

### Sizes

#### Usage

```html
<docs-button (click)="modalOpen = true">Open</docs-button>

<docs-modal
  [(open)]="modalOpen"
  title="Modal Title"
  size="md"
  [closeOnBackdrop]="true"
  [closeOnEscape]="true"
>
  <p>Modal content</p>

  <div modal-footer>
    <docs-button (click)="modalOpen = false">Close</docs-button>
  </div>
</docs-modal>
```

## Lightbox

A click-to-zoom image: the thumbnail is framed with a hairline that turns into the rule on hover; the overlay is a black stage with square-ish controls and square position markers for grouped galleries.

### Single image

### Gallery (grouped)

Click any image, then use arrow keys or buttons to navigate.

#### Usage

```html
<!-- Single image -->
<docs-lightbox
  src="/image.jpg"
  alt="Description"
  caption="Optional caption"
/>

<!-- Gallery (grouped images) -->
<docs-lightbox src="/img1.jpg" group="gallery" />
<docs-lightbox src="/img2.jpg" group="gallery" />
```