hp-alert-dialog

role="alertdialog" variant of <hp-dialog> for messages the user must acknowledge or act on (delete confirmations, blocking errors). Backdrop clicks don't dismiss — only an explicit action button or Escape closes it.

Examples

API

Intent

Changelog

delete project

Delete project?

This can't be undone. 47 files will be removed.

cancel

delete

<body> <hp-button onclick="confirmDelete.show()">delete</hp-button> <hp-alert-dialog id="confirmDelete"> <h3>Delete project?</h3> <p>This can't be undone.</p> <div slot="actions"> <hp-button onclick="confirmDelete.close()">cancel</hp-button> <hp-button filled onclick="confirmDelete.close()">delete</hp-button> </div> </hp-alert-dialog> </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 opens / closes.

Events

Event	Type	Description
`hp-alert-dialog-open`	`Event`	When the dialog opens
`hp-alert-dialog-close`	`Event`	When the dialog closes

Slots

Slot	Description
`(default)`	Dialog message body
`actions`	Action buttons (typically cancel + confirm)

CSS Parts

Part	Description
`dialog`	The native <dialog> element
`actions`	The action button container

When to use

Destructive confirmations, blocking errors, license / compliance acknowledgements — anything the user must explicitly act on.

Use for ordinary dismissable modals — that's <hp-dialog>. The alert dialog disables backdrop-click dismiss to force a deliberate choice.

No per-component entries in CHANGELOG.md yet.