Merge pull request #154 from khuongduybui/master

feat: Add <dialog> support

.changeset/real-bananas-beam.md

@@ -0,0 +1,5 @@
+---
+"water.css": minor
+---
+
+Add styles for <dialog> element

docs/index.html

@@ -278,6 +278,27 @@
       <p>Lorem ipsum dolor sit blah blah.</p>
     </details>
 
+    <p>The dialog (form, and menu) tag</p>
+
+    <div>
+      <button type="button" id="dialog-trigger">
+        Show me the dialog!
+      </button>
+      <span id="dialog-result"></span>
+    </div>
+
+    <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,12 @@ copyButton.addEventListener('click', () => {
     .catch(() => { copyButtonFeedback.textContent = '❌' })
     .then(() => setTimeout(() => { copyButtonFeedback.textContent = '' }, 1000))
 })
+
+document.getElementById('dialog-trigger').addEventListener('click', () => {
+  document.getElementById('dialog-result').innerText = ''
+  document.getElementById('dialog').showModal()
+})
+
+document.getElementById('dialog').addEventListener('close', (event) => {
+  document.getElementById('dialog-result').innerText = `Your answer: ${event.target.returnValue}`
+})

src/parts/_misc.css

@@ -109,6 +109,28 @@ summary::-webkit-details-marker {
   color: var(--text-main);
 }
 
+dialog {
+  background-color: var(--background-alt);
+  color: var(--text-main);
+  border: none;
+  border-radius: 6px;
+  border-color: var(--border);
+  padding: 10px 30px;
+}
+
+dialog > header:first-child {
+  background-color: var(--background);
+  border-radius: 6px 6px 0 0;
+  margin: -10px -30px 10px;
+  padding: 10px;
+  text-align: center;
+}
+
+dialog::backdrop {
+  background: #0000009c;
+  backdrop-filter: blur(4px);
+}
+
 footer {
   border-top: 1px solid var(--border);
   padding-top: 10px;