Dialog

aidsgn-dialog presents a focused decision or short task in the native modal top layer. The browser owns focus containment, Escape behavior, background inertness, and focus restoration.

Open dialog

This action cannot be undone.

Cancel

Delete project

<aidsgn-dialog id="delete-dialog" heading="Delete project">
  <p>This action cannot be undone.</p>
  <form method="dialog" data-aidsgn-modal-actions>
    <button value="cancel">Cancel</button>
    <button value="delete">Delete project</button>
  </form>
</aidsgn-dialog>
<script>document.querySelector("#delete-dialog").show()</script>

Set open declaratively or call show(). Call close(returnValue) to dismiss it programmatically. The visible heading labels the native dialog; close-label localizes its generated close control.

Clicking the close button or backdrop, pressing Escape, and submitting a descendant <form method="dialog"> close the modal. aidsgn-close bubbles with its reason and native returnValue. Prevent the cancelable aidsgn-cancel event only when Escape would discard important work.

Dialog is centered and bounded by --aidsgn-dialog-max-inline-size, which defaults to 36rem. Long content scrolls inside the body while the header remains visible.