# `<llumi-mermaid>`

Renders a [Mermaid](https://mermaid.js.org) diagram from a definition string, with
trackpad/mouse pan + zoom and a fit-to-view button.

> **Breaking change (v2):** The `code` property has been removed. Pass the diagram
> definition as the element's text content (light-DOM slot) instead.

## Usage

```html
<llumi-mermaid theme="dark">
  graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Done]
    B -->|No| D[Retry]
</llumi-mermaid>
```

The diagram source is the element's **light-DOM text content** — whitespace is
automatically dedented. Re-renders whenever the text content changes.

## Properties / Attributes

| Name | Attribute | Type | Default | Description |
|------|-----------|------|---------|-------------|
| `theme` | `theme` | `string` | `"default"` | Built-in mermaid theme: `default`, `neutral`, `dark`, `forest`, `base`, `null`. |

### Custom theming

There is no `themeVariables` property. Use Mermaid's native in-diagram directive, which
overrides the element's `theme`:

```
%%{init: {'theme':'base','themeVariables':{'primaryColor':'#dbeafe'}}}%%
graph TD
  A --> B
```

## Events

| Event | Detail | When |
|-------|--------|------|
| `llumi-mermaid-render` | — | A diagram rendered successfully. |
| `llumi-mermaid-error` | `{ error: string }` | The definition failed to parse; the error box is shown instead of the diagram. |

Both bubble and cross shadow boundaries (`composed: true`).

## Interaction

- **Pan:** two-finger scroll (trackpad) / drag.
- **Zoom:** pinch (trackpad) or ctrl+wheel; scale clamped to `[0.25, 4]`.
- **Fit:** the top-right button resets the view.

## Dependencies

`mermaid`, `d3-selection`, `d3-zoom`, `d3-transition`. This package ships ESM only; consume
this component via `import "@llumi/design-system/mermaid"`.