# @progressive-development/pd-dialog

[![npm version](https://img.shields.io/npm/v/@progressive-development/pd-dialog.svg)](https://www.npmjs.com/package/@progressive-development/pd-dialog)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)

Dialog and popup components for modals, confirmations, and form submissions.

## Features

- **Lit 3 & TypeScript** – Modern, type-safe web components
- **Accessible** – WCAG 2.1 compliant, keyboard navigation, ARIA support
- **Themeable** – CSS Custom Properties for easy customization
- **Localized** – Built-in i18n support (EN, DE, BE)
- **Lightweight** – No heavy dependencies, tree-shakeable
- **Framework-agnostic** – Works with React, Vue, Angular, or vanilla JS
- **Flexible Close Strategies** – Close via Escape key, backdrop click, or programmatically
- **Multi-State Submit Dialog** – Visual progression through send, success, and error states
- **Configurable Buttons** – Typed button arrays with primary/disabled states and event delegation
- **Full ARIA Support** – Proper dialog roles, modal behavior, and focus management

## Installation

```bash
npm install @progressive-development/pd-dialog
```

## Quick Start

```html
<script type="module">
  import '@progressive-development/pd-dialog';
</script>

<pd-popup-dialog title="Confirm">
  <p>Are you sure?</p>
</pd-popup-dialog>
```

## Components

| Component | Description |
|-----------|-------------|
| `<pd-popup>` | Basic popup container |
| `<pd-popup-dialog>` | Modal dialog with header, content, and footer |
| `<pd-submit-dialog>` | Form submission dialog with loading/success/error states |

## Documentation

📖 **Full documentation:** [pd-components.web.app](https://pd-components.web.app/)

## License

MIT © [PD Progressive Development UG](https://progressive-development.com)