feat: convert :open to :popover-open

related whatwg/html#9077
whatwg/html#9055

.gitignore

@@ -1,4 +1,4 @@
 /dist/
 /node_modules/
 /package-lock.json
-/.DS_Store
+.DS_Store

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', ''));

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>

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;
       }

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);