fix popup

docs/docs/components/select.md

@@ -414,10 +414,3 @@ This can be hard to conceptualize, so heres a fairly large example showing how l
   container.addEventListener("submit", handleLazySubmit)
 </script>
 ```
-
-<script type="module">
-  //
-  // TODO - remove once we switch to the Popover API
-  //
-  document.querySelectorAll('wa-code-demo [slot="preview"] wa-select').forEach(select => select.hoist = true);
-</script>

src/components/popup/popup.css

@@ -19,6 +19,13 @@
   isolation: isolate;
   max-width: var(--auto-size-available-width, none);
   max-height: var(--auto-size-available-height, none);
+
+  /* Clear UA styles for [popover] */
+  :where(&) {
+    border-style: none;
+    inset: auto;
+    padding: 0;
+  }
 }
 
 .popup--fixed {

src/components/popup/popup.ts

@@ -4,6 +4,7 @@ import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { WaRepositionEvent } from '../../events/reposition.js';
+import { watch } from '../../internal/watch.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import styles from './popup.css';
@@ -22,6 +23,8 @@ function isVirtualElement(e: unknown): e is VirtualElement {
   );
 }
 
+const SUPPORTS_POPOVER = globalThis?.HTMLElement?.prototype.hasOwnProperty('popover');
+
 /**
  * @summary Popup is a utility that lets you declaratively anchor "popup" containers to another element.
  * @documentation https://backers.webawesome.com/docs/components/popup
@@ -280,6 +283,9 @@ export default class WaPopup extends WebAwesomeElement {
       return;
     }
 
+    // Should this only be for `strategy="fixed"`? (hoist in most components)
+    if (SUPPORTS_POPOVER) { this.popup.showPopover() }
+
     this.cleanup = autoUpdate(this.anchorEl, this.popup, () => {
       this.reposition();
     });
@@ -287,6 +293,8 @@ export default class WaPopup extends WebAwesomeElement {
 
   private async stop(): Promise<void> {
     return new Promise(resolve => {
+      if (SUPPORTS_POPOVER) { this.popup.hidePopover() }
+
       if (this.cleanup) {
         this.cleanup();
         this.cleanup = undefined;
@@ -562,6 +570,7 @@ export default class WaPopup extends WebAwesomeElement {
       ></span>
 
       <div
+        popover="manual"
         part="popup"
         class=${classMap({
           popup: true,