feat: Add <dialog> support

docs/index.html

@@ -278,6 +278,21 @@
       <p>Lorem ipsum dolor sit blah blah.</p>
     </details>
 
+    <p>The dialog (form, and menu) tag</p>
+    <button type='button' id='dialog-trigger'>Show me the dialog!</button>
+    <span id='dialog-result'></span>
+    <dialog id='dialog'>
+      <header>This is a sample dialog</header>
+      <form method="dialog">
+        <p>What is your favorite pet animal?</p>
+        <menu>
+          <button value="feline">Cats</button>
+          <button value="canine">Dogs</button>
+          <button value="other">Others</button>
+        </menu>
+      </form>
+    </dialog>
+
     <h3 id="typography">Typography</h3>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis

docs/script.js

@@ -77,3 +77,11 @@ copyButton.addEventListener('click', () => {
     .catch(() => { copyButtonFeedback.textContent = '❌' })
     .then(() => setTimeout(() => { copyButtonFeedback.textContent = '' }, 1000))
 })
+
+document.getElementById('dialog-trigger').addEventListener('click', function (event) {
+  document.getElementById('dialog-result').innerText = '';
+  document.getElementById('dialog').showModal();
+});
+document.getElementById('dialog').addEventListener('close', function (event) {
+  document.getElementById('dialog-result').innerText = `Your answer: ${event.target.returnValue}`;
+});