hp-dialog

Modal dialog backed by the native <dialog> + showModal(). Browser handles focus trap, Escape dismiss, and aria-modal. Backdrop click closes by default — set no-backdrop-close to disable. Imperative API: .show() / .close() or the reflected open property.

Examples

API

Intent

Changelog

open dialog

Confirm

Are you sure you want to deploy?

cancel

deploy

<body> <hp-button onclick="myDialog.show()">open</hp-button> <hp-dialog id="myDialog"> <h3>Confirm</h3> <p>Are you sure?</p> <hp-button onclick="myDialog.close()">cancel</hp-button> <hp-button filled onclick="myDialog.close()">ok</hp-button> </hp-dialog> document .querySelector("hp-dialog") .addEventListener("hp-dialog-close", () => { // fires on backdrop click, Escape, or .close() }); </body>

Install

bun add @hexpunk/core lit

import "@hexpunk/core";

Properties

Property	Attribute	Type	Default	Description
`open`	`open`	`boolean`	`false`	Reflect open state. Setting `open` programmatically calls showModal(); clearing it calls close().
`noBackdropClose`	`no-backdrop-close`	`boolean`	`false`	When set, clicking the backdrop doesn't close. Use for destructive / blocking dialogs that require an explicit action.

Events

Event	Type	Description
`hp-dialog-open`	`Event`	When the dialog opens (open transitions to true)
`hp-dialog-close`	`Event`	When the dialog closes (backdrop click, Escape, or .close())

Slots

Slot	Description
`(default)`	Dialog body content

CSS Parts

Part	Description
`dialog`	The native <dialog> element

Accessibility

Native <dialog> + showModal() handles focus trap and aria-modal="true"; Escape dismisses. The element OUTSIDE the dialog becomes inert while open. For non-modal popovers (no focus trap, no inert siblings), use the forthcoming hp-popover.

No per-component entries in CHANGELOG.md yet.