lunaDOM Docs
lunaDOM Docs

lunaDOM is a collection of lightweight, accessible shadowdom based web components built with JavaScript.

v0.0.25

Dialog

Modal dialog component with overlay and focus trapping.

The <luna-dialog> component displays modal dialogs with overlay, focus trapping, and smooth animations.

Paths

/lunadom/components/dialog/dialog.js REQUIRED

Dark Theme Dialog

Open Dark Dialog System Alert

Your session is about to expire. Would you like to stay signed in?

Sign Out Stay Signed In

Confirmation Dialog

Delete Item Confirm Deletion

Are you sure you want to delete this item? This action cannot be undone.

Cancel Delete

Form Dialog

Create New Item Create New Item
Cancel Create

Customization

Slots
title - Title content for the dialog
footer - Footer content for actions
Attributes
open - Whether the dialog is open
initial-focus - A selector for the element to receive focus when the dialog opens
CSS Variables
--luna-dialog-max-width - Maximum width of the dialog panel
--luna-dialog-bg - Background color of the dialog panel
--luna-dialog-color - Text color for the dialog content
--luna-dialog-radius - Border radius of the dialog panel
--luna-dialog-padding - Internal padding for the dialog sections
--luna-dialog-overlay - Background color/overlay for the backdrop
--luna-dialog-border - Border color of the dialog panel
--luna-dialog-shadow - Box shadow for the dialog panel
Events
luna-show - Emitted when the dialog opens
luna-hide - Emitted when the dialog closes
luna-request-close - Emitted when the dialog is requested to close (via overlay, ESC, or close button). Can be cancelled.

Prevent Flash of Dialogs

<style> luna-dialog:not(:defined) { display: none !important; } </style>

Standard Dialog

Open Standard Dialog Standard Dialog This is the default Luna dialog. It supports accessibility, focus trapping, and smooth animations.
Close Save Changes

Example Code

<!-- Basic Dialog --> <luna-dialog id="dialog"> <span slot="title">Dialog Title</span> Dialog content goes here. <div slot="footer"> <luna-button onclick="dialog.hide()">Close</luna-button> <luna-button variant="primary">Save</luna-button> </div> </luna-dialog> <luna-button onclick="dialog.show()">Open Dialog</luna-button> <!-- Dark Theme Dialog --> <luna-dialog id="darkDialog" style="--luna-bg: #1a1a1a;--luna-color: #fff;"> <span slot="title">Dark Dialog</span> Content with dark theme. </luna-dialog>