/** * PXM Dialog Component * * A flexible, accessible dialog (modal) component inspired by Radix UI Dialog. * Bring your own styling and animation. This component provides structure and behavior only. * * Features: * - Keyboard navigation (Escape to close, Tab trap) * - Focus management (auto-focus, return focus) * - Event-driven animation system (bring your own animation library) * - Dynamic content support * - ARIA and data attributes for accessibility and styling * * Basic Usage: * ```html * * Open Dialog * *

Dialog Title

*

Dialog content goes here...

* *
*
* ``` * * Consumer Styling Examples: * ```css * pxm-dialog-content[data-state="open"] { display: block; } * pxm-dialog-content[data-state="closed"] { display: none; } * pxm-dialog[data-disabled="true"] { opacity: 0.5; } * ``` * * Accessibility: * - Manages ARIA attributes (aria-modal, aria-hidden, aria-expanded) * - Manages data attributes (data-state, data-disabled) * - Consumer should provide labels/roles as needed * * Events: * - `pxm:dialog:before-open` (cancelable) * - `pxm:dialog:after-open` * - `pxm:dialog:before-close` (cancelable) * - `pxm:dialog:after-close` * * Keyboard: * - Escape: Close dialog * - Tab: Trap focus within dialog */ export interface DialogEventDetail { dialog: HTMLElement; trigger?: HTMLElement; content?: HTMLElement; complete?: () => void; } declare class PxmDialog extends HTMLElement { private config; private state; private trigger?; private content?; private lastFocusedElement?; private mutationObserver?; private originalParent?; private originalNextSibling?; private teleportContainer?; static get observedAttributes(): string[]; constructor(); connectedCallback(): void; disconnectedCallback(): void; attributeChangedCallback(_: string): void; private setupTrigger; private setupContent; private observeChildChanges; private setupDialogListeners; private handleDialogClick; private handleTriggerClick; private removeListeners; private openDialog; private teleportContent; private returnContent; private finishOpen; private closeDialog; private finishClose; private handleKeyDown; private trapFocus; private updateState; /** * Remove default animation listeners (useful when using custom animation libraries) */ removeDefaultAnimations(): void; open(): void; close(): void; isOpen(): boolean; } declare class PxmDialogTrigger extends HTMLElement { constructor(); } declare class PxmDialogContent extends HTMLElement { constructor(); } export type { PxmDialog, PxmDialogTrigger, PxmDialogContent };