import { Canvas, Meta } from '@storybook/blocks';
import * as DialogStories from './dialog.stories';

<Meta title="Primitives/Dialog" />

# Dialog

#### A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

<Canvas sourceState="hidden" of={DialogStories.Default} />

## Features
- ✅ Supports modal and non-modal modes.
- ✅ Focus is automatically trapped when modal.
- ✅ Can be controlled or uncontrolled.
- ✅ Esc closes the component automatically.

### Anatomy
Import all parts and piece them together.

```html

<button [rdxDialogTrigger]="dialog">Open Dialog</button>

<ng-template #dialog>
    <div rdxDialogContent>
        <h2 rdxDialogTitle></h2>
        <p rdxDialogDescription></p>
        <button rdxDialogClose></button>
        <button rdxDialogDismiss>X</button>
    </div>
</ng-template>

```
