Dialog

A native <dialog>, opened by a button with data-open="#id" and closed by anything with data-close, by Escape or by a click on the backdrop.

Basic

<button data-open="#stop-build" data-variant="line">Stop the build</button>
<dialog id="stop-build">
  <header><h3>Stop this build?</h3><button data-close data-variant="ghost" aria-label="Close">×</button></header>
  <p>The build stops at once. Pages already rendered stay in <code>_site/</code>.</p>
  <menu>
    <li><button data-close data-variant="line">Keep building</button></li>
    <li><button data-close value="stop" data-toast="Build stopped" data-toast-tone="stop">Stop the build</button></li>
  </menu>
</dialog>

A value on a close button is passed to dialog.close(), so the page can read returnValue afterwards.

Notes

• s72.js wires [data-open] to showModal(), so focus is trapped and the rest of the page is inert.
• Escape is the browser's own; the backdrop close is a click handler that checks the target is the dialog itself.
• <dialog > header> puts the title and the close button on one line, and a <menu> at the end is right-aligned.
• The float tokens give it its edge and shadow, so it matches dropdown menus and popovers.