Dialog

<el-dm-dialog> wraps a native HTML <dialog> and applies @duskmoon-dev/core dialog styles. Opening uses showModal() so you get the browser’s focus trap, Escape handling, and ::backdrop. Invoker Commands (command / commandfor) are forwarded to the inner native dialog (show-modal, close, request-close).

Installation

npm install @duskmoon-dev/el-dialog

Usage

import '@duskmoon-dev/el-dialog/register';

<button command="show-modal" commandfor="my-dialog">Open Dialog</button>

<el-dm-dialog id="my-dialog">
  <span slot="header">Dialog Title</span>
  <p>Dialog content goes here.</p>
  <div slot="footer">
    <el-dm-button variant="ghost" onclick="document.querySelector('#my-dialog').close()">Cancel</el-dm-button>
    <el-dm-button variant="primary">Confirm</el-dm-button>
  </div>
</el-dm-dialog>

Live Demo

Dialog Demo

Open Dialog

Example Dialog

This is an example dialog. You can put any content here.

Properties

Property	Type	Default	Description
`open`	`boolean`	`false`	Whether the dialog is visible
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`'md'`	Dialog size
`dismissible`	`boolean`	`true`	Allow closing via backdrop click or Escape
`no-dismiss`	`boolean`	`false`	Prevent closing via backdrop or Escape
`no-backdrop`	`boolean`	`false`	Open as non-modal (no `::backdrop`)

Methods

Method	Description
`show()`	Opens the dialog as a modal (`showModal()`)
`showModal()`	Alias for `show()`
`close()`	Closes the dialog
`toggle()`	Toggles the dialog state

Sizes

<el-dm-dialog size="sm">Small dialog</el-dm-dialog>
<el-dm-dialog size="md">Medium dialog</el-dm-dialog>
<el-dm-dialog size="lg">Large dialog</el-dm-dialog>
<el-dm-dialog size="xl">Extra large dialog</el-dm-dialog>
<el-dm-dialog size="full">Fullscreen dialog</el-dm-dialog>

Slots

Slot	Description
default	Main dialog content
`header`	Dialog header/title
`footer`	Dialog footer/actions

Events

Event	Description
`open`	Fired when dialog opens
`close`	Fired when dialog closes

Event Handling

const dialog = document.querySelector('el-dm-dialog');
dialog.addEventListener('open', () => {
  console.log('Dialog opened');
});
dialog.addEventListener('close', () => {
  console.log('Dialog closed');
});

CSS Parts

Part	Description
`dialog`	The native `<dialog>` element
`box`	Inner `dialog-box` container
`header`	The header section
`title`	The title wrapper
`body`	The body section
`footer`	The footer section
`close`	The close button

Backdrop styling uses native ::backdrop. Override --color-scrim to change the overlay color.

Accessibility

Native <dialog> provides role="dialog" and modal semantics
showModal() traps focus and restores it on close
Escape fires cancel; dismissible dialogs close, no-dismiss prevents it
Backdrop is native ::backdrop, not a custom overlay