From 83b72137107c1b854d57f251f21cb52f90b362df Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Wed, 24 Apr 2024 16:32:57 -0400
Subject: [PATCH] Add support for dialog popovers.

---
 index.html          |  3 ++-
 src/popover.ts      | 12 ++++++++----
 tests/basic.spec.ts |  5 +++++
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 02ff26a..adc1f32 100644
--- a/index.html
+++ b/index.html
@@ -72,7 +72,7 @@ <h1>Popover Attribute Polyfill</h1>
         Menu with shadowed popover
         <div id="menu-host"></div>
       </div>
-      <dialog popover>I'm a dialog!</dialog>
+      <dialog id="dialog" popover>This is a dialog</dialog>
       <div id="host"></div>
 
       <script type="module">
@@ -137,6 +137,7 @@ <h1>Popover Attribute Polyfill</h1>
       <button popovertarget="menu-with-shadowed-popover">
         Toggle menu with shadowed nested popover
       </button>
+      <button popovertarget="dialog">Click to toggle dialog</button>
 
       <script type="module">
         const shadowInInvoker = document.getElementById('shadowInInvoker');
diff --git a/src/popover.ts b/src/popover.ts
index 98812d2..7e33235 100644
--- a/src/popover.ts
+++ b/src/popover.ts
@@ -71,6 +71,14 @@ ${useLayer ? '@layer popover-polyfill {' : ''}
     margin: auto;
   }
 
+  :where([popover]:not(.\\:popover-open)) {
+    display: none;
+  }
+
+  :where(dialog[popover].\\:popover-open) {
+    display: block;
+  }
+
   :where(dialog[popover][open]) {
     display: revert;
   }
@@ -105,10 +113,6 @@ ${useLayer ? '@layer popover-polyfill {' : ''}
       bottom: 0;
     }
   }
-
-  :where([popover]:not(.\\:popover-open)) {
-    display: none;
-  }
 ${useLayer ? '}' : ''}
 `;
 }
diff --git a/tests/basic.spec.ts b/tests/basic.spec.ts
index 39b87b3..20a55f5 100644
--- a/tests/basic.spec.ts
+++ b/tests/basic.spec.ts
@@ -78,3 +78,8 @@ test('popover as "invalid"', async ({ page }) => {
   const popover = (await page.locator('#popover6')).nth(0);
   await expect(popover).toBeFunctionalPopover();
 });
+
+test('dialog popover', async ({ page }) => {
+  const popover = (await page.locator('#dialog')).nth(0);
+  await expect(popover).toBeFunctionalPopover();
+});