--- /** * AnimatedModal — a fullscreen overlay dialog triggered by a slotted * button. Opening blurs/fades in a backdrop while the panel scales and * tilts into place; closing reverses the transition instead of snapping * away. Content and footer come from the consumer via static named * slots; the trigger, close button, backdrop, and panel markup all live * here. * * A custom element (`nular-animated-modal`) owns the state: it exposes * public `open()` / `close()` methods, reflects the open state via a * `data-open` attribute (consumed by the stylesheet for the entrance/ * exit transition), locks body scroll while open, and wires * Escape/outside-click listeners only while the panel is visible. */ interface Props { /** Accessible label for the dialog, used when no visible heading * inside the slotted content already labels it. */ label?: string; /** Close the modal when clicking outside the panel. Default true. */ closeOnOutsideClick?: boolean; /** Close the modal when pressing Escape. Default true. */ closeOnEscape?: boolean; /** Additional classes for the root element. */ class?: string; } const { label, closeOnOutsideClick = true, closeOnEscape = true, class: className, } = Astro.props; ---

Installation

Install dependencies

Add these files

Configuration

Use it