@progressive-development/pd-dialog

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

npm install @progressive-development/pd-dialog

Quick Start

<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

License

MIT © PD Progressive Development UG