From 10d9c2e312a094658d9a7510b24cf4924fe917d6 Mon Sep 17 00:00:00 2001
From: Wesley Luyten <me@wesleyluyten.com>
Date: Sat, 17 Jun 2023 13:44:40 -0500
Subject: [PATCH] feat: convert `:open` to `:popover-open` related
 https://github.com/whatwg/html/pull/9077
 https://github.com/whatwg/html/issues/9055

---
 .gitignore              |  2 +-
 examples/edgedemos.html |  2 +-
 examples/index.html     |  4 ++--
 examples/jhey.html      |  4 ++--
 src/selectmenu.js       | 10 +++++-----
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/.gitignore b/.gitignore
index 8b3d846..823c54f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,4 @@
 /dist/
 /node_modules/
 /package-lock.json
-/.DS_Store
+.DS_Store
diff --git a/examples/edgedemos.html b/examples/edgedemos.html
index e42bd86..754f722 100644
--- a/examples/edgedemos.html
+++ b/examples/edgedemos.html
@@ -578,7 +578,7 @@ <h2>Combobox</h2>
       });
 
       // Detecting if the popover is shown or hidden.
-      // There should be a :open pseudo-class in CSS to do this, but it doesn't
+      // There should be a :popover-open pseudo-class in CSS to do this, but it doesn't
       // seem to be implemented yet. There is :-internal-popover-hidden that could be
       // used, but for now, let's do our own thing using the show/hide events.
       combobox.addEventListener('popovershow', () => combobox.setAttribute('open', ''));
diff --git a/examples/index.html b/examples/index.html
index 79ec7d6..bf9e7a9 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -123,10 +123,10 @@ <h3>Use your own markup 2</h3>
           border: 1px solid;
           background: #f7f7f7;
         }
-        .my-custom-select2 .\:open {
+        .my-custom-select2 .\:popover-open {
           display: grid;
         }
-        .my-custom-select2 :open {
+        .my-custom-select2 :popover-open {
           display: grid;
         }
       </style>
diff --git a/examples/jhey.html b/examples/jhey.html
index ab8d7d4..eee9e85 100644
--- a/examples/jhey.html
+++ b/examples/jhey.html
@@ -2,7 +2,7 @@
 
 <script type="module" src="https://cdn.jsdelivr.net/npm/super-template"></script>
 <link rel="preload" href="./layout.html" as="fetch" crossorigin>
-<link rel="preload" href="https://fonts.gstatic.com/s/materialsymbolsoutlined/v100/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="preload" href="https://fonts.gstatic.com/s/materialsymbolsoutlined/v120/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2" as="font" type="font/woff2" crossorigin>
 
 <title>selectmenu polyfill</title>
 <script src="../dist/polyfill.js"></script>
@@ -47,7 +47,7 @@
         gap: var(--size-2);
       }
 
-      .selectmenu [popover]:is(:open, .\:open) {
+      .selectmenu [popover]:is(:popover-open, .\:popover-open) {
         transition: opacity 0.2s, translate 0.2s;
         --open: 1;
       }
diff --git a/src/selectmenu.js b/src/selectmenu.js
index 98caac7..34d1027 100644
--- a/src/selectmenu.js
+++ b/src/selectmenu.js
@@ -16,7 +16,7 @@ const popoverStyles = popoverSupported ? '' : /* css */`
     margin: auto;
   }
 
-  [popover]:not(.\\:open) {
+  [popover]:not(.\\:popover-open) {
     display: none;
   }
 `;
@@ -414,9 +414,9 @@ class SelectMenuElement extends globalThis.HTMLElement {
 
   #isOpen() {
     try {
-      return this.#listboxEl.matches(':open');
+      return this.#listboxEl.matches(':popover-open');
     } catch {
-      return this.#listboxEl.matches('.\\:open');
+      return this.#listboxEl.matches('.\\:popover-open');
     }
   }
 
@@ -426,7 +426,7 @@ class SelectMenuElement extends globalThis.HTMLElement {
     if (this.#listboxEl.showPopover) {
       this.#listboxEl.showPopover();
     } else {
-      this.#listboxEl.classList.add(':open');
+      this.#listboxEl.classList.add(':popover-open');
     }
 
     reposition(this, this.#listboxEl);
@@ -452,7 +452,7 @@ class SelectMenuElement extends globalThis.HTMLElement {
     if (this.#listboxEl.hidePopover) {
       this.#listboxEl.hidePopover();
     } else {
-      this.#listboxEl.classList.remove(':open');
+      this.#listboxEl.classList.remove(':popover-open');
     }
 
     document.removeEventListener('click', this.#onBlur);