@spectrum-web-components/overlay 0.31.1-overlay.29 → 0.31.1-react.21

package/test/index.js

@@ -1,19 +1,22 @@
 "use strict";
-import { fixture, isOnTopLayer } from "../../../test/testing-helpers.js";
+import { escapeEvent, isVisible } from "../../../test/testing-helpers.js";
 import {
   aTimeout,
   elementUpdated,
   expect,
+  fixture,
   html,
   nextFrame,
   oneEvent,
   waitUntil
 } from "@open-wc/testing";
+import {
+  OverlayTrigger
+} from "@spectrum-web-components/overlay";
 import "@spectrum-web-components/button/sp-button.js";
 import "@spectrum-web-components/popover/sp-popover.js";
+import { Popover } from "@spectrum-web-components/popover";
 import "@spectrum-web-components/theme/sp-theme.js";
-import { sendMouse } from "../../../test/plugins/browser.js";
-import { sendKeys } from "@web/test-runner-commands";
 function pressKey(code) {
   const up = new KeyboardEvent("keyup", {
     bubbles: true,
@@ -23,12 +26,23 @@ function pressKey(code) {
   });
   document.dispatchEvent(up);
 }
+const pressEscape = () => {
+  document.dispatchEvent(escapeEvent());
+};
 const pressSpace = () => pressKey("Space");
-export const runOverlayTriggerTests = (type) => {
-  describe(`Overlay Trigger - ${type}`, () => {
+export const runOverlayTriggerTests = () => {
+  describe("Overlay Trigger - sync", () => {
     describe("open/close", () => {
-      beforeEach(async function() {
-        this.testDiv = await fixture(
+      let testDiv;
+      let innerTrigger;
+      let outerTrigger;
+      let innerButton;
+      let outerButton;
+      let innerClickContent;
+      let outerClickContent;
+      let hoverContent;
+      beforeEach(async () => {
+        testDiv = await fixture(
           html`
                         <div>
                             <style>
@@ -48,12 +62,16 @@ export const runOverlayTriggerTests = (type) => {
                                 </sp-button>
                                 <sp-popover
                                     id="outer-popover"
-                                    dialog
                                     slot="click-content"
                                     direction="bottom"
                                     tip
+                                    open
+                                    tabindex="0"
                                 >
-                                    <div class="options-popover-content">
+                                    <sp-dialog
+                                        no-divider
+                                        class="options-popover-content"
+                                    >
                                         <overlay-trigger
                                             id="inner-trigger"
                                             placement="bottom"
@@ -66,19 +84,21 @@ export const runOverlayTriggerTests = (type) => {
                                             </sp-button>
                                             <sp-popover
                                                 id="inner-popover"
-                                                dialog
                                                 slot="click-content"
                                                 direction="bottom"
                                                 tip
+                                                open
+                                                tabindex="0"
                                             >
-                                                <div
+                                                <sp-dialog
+                                                    no-divider
                                                     class="options-popover-content"
                                                 >
                                                     Another Popover
-                                                </div>
+                                                </sp-dialog>
                                             </sp-popover>
                                         </overlay-trigger>
-                                    </div>
+                                    </sp-dialog>
                                 </sp-popover>
                                 <div
                                     id="hover-content"
@@ -92,505 +112,407 @@ export const runOverlayTriggerTests = (type) => {
                         </div>
                     `
         );
-        this.innerTrigger = this.testDiv.querySelector(
+        innerTrigger = testDiv.querySelector(
           "#inner-trigger"
         );
-        this.outerTrigger = this.testDiv.querySelector(
+        outerTrigger = testDiv.querySelector(
           "#trigger"
         );
-        this.innerButton = this.testDiv.querySelector(
-          "#inner-button"
-        );
-        this.outerButton = this.testDiv.querySelector(
-          "#outer-button"
-        );
-        this.innerClickContent = this.testDiv.querySelector(
+        innerButton = testDiv.querySelector("#inner-button");
+        outerButton = testDiv.querySelector("#outer-button");
+        innerClickContent = testDiv.querySelector(
           "#inner-popover"
         );
-        this.outerClickContent = this.testDiv.querySelector(
+        outerClickContent = testDiv.querySelector(
           "#outer-popover"
         );
-        this.hoverContent = this.testDiv.querySelector(
+        hoverContent = testDiv.querySelector(
           "#hover-content"
         );
       });
-      it("opens a popover", async function() {
-        expect(
-          await isOnTopLayer(this.outerClickContent),
-          "popover not available at point"
-        ).to.be.false;
-        expect(this.outerButton).to.exist;
-        const open = oneEvent(this.outerTrigger, "sp-opened");
-        this.outerButton.click();
+      afterEach(async () => {
+        if (outerTrigger.open) {
+          const closed = oneEvent(outerTrigger, "sp-closed");
+          outerTrigger.open = void 0;
+          await closed;
+        }
+        outerTrigger.removeAttribute("type");
+        if (innerTrigger.open) {
+          const closed = oneEvent(innerTrigger, "sp-closed");
+          innerTrigger.open = void 0;
+          await closed;
+        }
+        innerTrigger.removeAttribute("type");
+      });
+      it("loads", async () => {
+        if (!(outerClickContent instanceof Popover))
+          throw new Error("popover is not an instance of Popover");
+        expect(outerClickContent).to.exist;
+        expect(outerClickContent.shadowRoot).to.exist;
+        expect(outerClickContent.parentElement).to.be.an.instanceOf(
+          OverlayTrigger
+        );
+      });
+      it("opens a popover", async () => {
+        expect(isVisible(outerClickContent)).to.be.false;
+        expect(outerButton).to.exist;
+        const open = oneEvent(outerTrigger, "sp-opened");
+        outerButton.click();
         await open;
-        expect(
-          await isOnTopLayer(this.outerClickContent),
-          "popover available at point"
-        ).to.be.true;
+        expect(outerClickContent.parentElement).to.not.be.an.instanceOf(
+          OverlayTrigger
+        );
+        expect(isVisible(outerClickContent)).to.be.true;
       });
-      it("[disabled] closes a popover", async function() {
-        expect(
-          await isOnTopLayer(this.outerClickContent),
-          "popover not available at point"
-        ).to.be.false;
-        expect(this.outerTrigger.disabled).to.be.false;
-        expect(this.outerButton).to.exist;
-        const opened = oneEvent(this.outerButton, "sp-opened");
-        this.outerButton.click();
+      it("[disabled] closes a popover", async () => {
+        expect(isVisible(outerClickContent)).to.be.false;
+        expect(outerTrigger.disabled).to.be.false;
+        expect(outerButton).to.exist;
+        const opened = oneEvent(outerButton, "sp-opened");
+        outerButton.click();
         await opened;
-        expect(
-          await isOnTopLayer(this.outerClickContent),
-          "popover available at point"
-        ).to.be.true;
-        const closed = oneEvent(this.outerButton, "sp-closed");
-        this.outerTrigger.disabled = true;
+        expect(outerClickContent.parentElement).to.not.be.an.instanceOf(
+          OverlayTrigger
+        );
+        expect(isVisible(outerClickContent)).to.be.true;
+        const closed = oneEvent(outerButton, "sp-closed");
+        outerTrigger.disabled = true;
         await closed;
-        expect(
-          await isOnTopLayer(this.outerClickContent),
-          "popover not available at point"
-        ).to.be.false;
+        expect(isVisible(outerClickContent)).to.be.false;
+        expect(outerTrigger.disabled).to.be.true;
       });
-      it("resizes a popover", async function() {
-        expect(
-          await isOnTopLayer(this.outerClickContent),
-          "popover not available at point"
-        ).to.be.false;
-        expect(this.outerButton).to.exist;
-        const open = oneEvent(this.outerTrigger, "sp-opened");
-        this.outerButton.click();
+      it("resizes a popover", async () => {
+        expect(isVisible(outerClickContent)).to.be.false;
+        expect(outerButton).to.exist;
+        const open = oneEvent(outerTrigger, "sp-opened");
+        outerButton.click();
         await open;
-        expect(
-          await isOnTopLayer(this.outerClickContent),
-          "popover available at point"
-        ).to.be.true;
+        expect(outerClickContent.parentElement).to.not.be.an.instanceOf(
+          OverlayTrigger
+        );
+        expect(isVisible(outerClickContent)).to.be.true;
         window.dispatchEvent(new Event("resize"));
         window.dispatchEvent(new Event("resize"));
-        expect(
-          await isOnTopLayer(this.outerClickContent),
-          "popover available at point"
-        ).to.be.true;
+        expect(outerClickContent.parentElement).to.not.be.an.instanceOf(
+          OverlayTrigger
+        );
+        expect(isVisible(outerClickContent)).to.be.true;
       });
-      ["modal", "replace", "inline"].map((type2) => {
-        it(`opens a popover - [type="${type2}"]`, async function() {
-          this.outerTrigger.type = type2;
-          await elementUpdated(this.outerTrigger);
-          expect(
-            await isOnTopLayer(this.outerClickContent),
-            "popover not available at point"
-          ).to.be.false;
-          expect(this.outerButton).to.exist;
-          const opened = oneEvent(this.outerTrigger, "sp-opened");
-          this.outerButton.click();
+      ["modal", "replace", "inline"].map((type) => {
+        it(`opens a popover - [type="${type}"]`, async () => {
+          outerTrigger.type = type;
+          await elementUpdated(outerTrigger);
+          expect(isVisible(outerClickContent)).to.be.false;
+          expect(outerButton).to.exist;
+          const opened = oneEvent(outerTrigger, "sp-opened");
+          outerButton.click();
           await opened;
           expect(
-            await isOnTopLayer(this.outerClickContent),
-            "popover available at point"
-          ).to.be.true;
+            outerClickContent.parentElement
+          ).to.not.be.an.instanceOf(OverlayTrigger);
+          expect(isVisible(outerClickContent)).to.be.true;
         });
       });
-      it("does not open a hover popover when a click popover is open", async function() {
+      it("does not open a hover popover when a click popover is open", async () => {
         expect(
-          await isOnTopLayer(this.outerClickContent),
-          "popover not available at point"
+          isVisible(outerClickContent),
+          "outer popover not visible"
         ).to.be.false;
-        expect(
-          await isOnTopLayer(this.hoverContent),
-          "hover not available at point"
-        ).to.be.false;
-        expect(this.outerButton).to.exist;
-        const open = oneEvent(this.outerTrigger, "sp-opened");
-        this.outerButton.click();
+        expect(isVisible(hoverContent), "hover popover not visible").to.be.false;
+        expect(outerButton).to.exist;
+        const open = oneEvent(outerTrigger, "sp-opened");
+        outerButton.click();
         await open;
+        expect(outerClickContent.parentElement).to.not.be.an.instanceOf(
+          OverlayTrigger
+        );
+        expect(isVisible(outerClickContent), "outer popover visible").to.be.true;
         expect(
-          await isOnTopLayer(this.outerClickContent),
-          "popover available at point"
-        ).to.be.true;
-        expect(
-          await isOnTopLayer(this.hoverContent),
-          "hover not available at point"
+          isVisible(hoverContent),
+          "hover popover still not visible"
         ).to.be.false;
-        this.outerButton.dispatchEvent(
+        outerButton.dispatchEvent(
           new Event("mouseenter", {
             bubbles: true,
             composed: true
           })
         );
         await nextFrame();
+        expect(hoverContent.parentElement).to.be.instanceOf(
+          OverlayTrigger
+        );
         expect(
-          await isOnTopLayer(this.outerClickContent),
-          "popover available at point"
+          isVisible(outerClickContent),
+          "outer popover visible again"
         ).to.be.true;
         expect(
-          await isOnTopLayer(this.hoverContent),
-          "hover not available at point"
+          isVisible(hoverContent),
+          "hover popover not visible again"
         ).to.be.false;
       });
-      it("does not open a popover when [disabled]", async function() {
-        const triggerZone = this.outerTrigger.shadowRoot.querySelector(
+      it("does not open a popover when [disabled]", async () => {
+        var _a, _b, _c, _d, _e, _f;
+        const root = outerTrigger.shadowRoot ? outerTrigger.shadowRoot : outerTrigger;
+        const triggerZone = root.querySelector(
           "#trigger"
         );
-        expect(this.outerTrigger.disabled).to.be.false;
-        let open = oneEvent(this.outerTrigger, "sp-opened");
-        this.outerButton.click();
+        expect(outerTrigger.disabled).to.be.false;
+        let open = oneEvent(outerTrigger, "sp-opened");
+        outerButton.click();
         await open;
-        expect(
-          await isOnTopLayer(this.outerClickContent),
-          "hover available at point"
-        ).to.be.true;
-        let closed = oneEvent(this.outerTrigger, "sp-closed");
-        sendMouse({
-          steps: [
-            {
-              type: "click",
-              position: [1, 1]
-            }
-          ]
-        });
+        expect((_a = outerClickContent.parentElement) == null ? void 0 : _a.localName).to.equal(
+          "active-overlay"
+        );
+        let closed = oneEvent(outerTrigger, "sp-closed");
+        document.body.click();
         await closed;
-        expect(
-          await isOnTopLayer(this.outerClickContent),
-          "hover not available at point"
-        ).to.be.false;
-        this.outerTrigger.disabled = true;
-        await elementUpdated(this.outerTrigger);
-        expect(this.outerTrigger.disabled).to.be.true;
-        expect(this.outerTrigger.hasAttribute("disabled")).to.be.true;
-        this.outerButton.click();
-        await aTimeout(150);
-        expect(
-          await isOnTopLayer(this.outerClickContent),
-          "hover not available at point"
-        ).to.be.false;
+        expect((_b = outerClickContent.parentElement) == null ? void 0 : _b.localName).to.equal(
+          "overlay-trigger"
+        );
+        outerTrigger.disabled = true;
+        await elementUpdated(outerTrigger);
+        expect(outerTrigger.disabled).to.be.true;
+        expect(outerTrigger.hasAttribute("disabled")).to.be.true;
+        outerButton.click();
+        await aTimeout(200);
+        expect((_c = outerClickContent.parentElement) == null ? void 0 : _c.localName).to.equal(
+          "overlay-trigger"
+        );
         triggerZone.dispatchEvent(new Event("mouseenter"));
-        await aTimeout(150);
-        expect(
-          await isOnTopLayer(this.outerClickContent),
-          "hover not available at point"
-        ).to.be.false;
-        this.outerTrigger.disabled = false;
-        await elementUpdated(this.outerTrigger);
-        expect(this.outerTrigger.disabled).to.be.false;
-        expect(this.outerTrigger.hasAttribute("disabled")).to.be.false;
-        open = oneEvent(this.outerTrigger, "sp-opened");
-        this.outerButton.click();
+        await aTimeout(200);
+        expect((_d = outerClickContent.parentElement) == null ? void 0 : _d.localName).to.equal(
+          "overlay-trigger"
+        );
+        outerTrigger.disabled = false;
+        await elementUpdated(outerTrigger);
+        expect(outerTrigger.disabled).to.be.false;
+        expect(outerTrigger.hasAttribute("disabled")).to.be.false;
+        open = oneEvent(outerTrigger, "sp-opened");
+        outerButton.click();
         await open;
-        expect(
-          await isOnTopLayer(this.outerClickContent),
-          "hover available at point"
-        ).to.be.true;
-        closed = oneEvent(this.outerTrigger, "sp-closed");
-        this.outerButton.click();
+        expect((_e = outerClickContent.parentElement) == null ? void 0 : _e.localName).to.equal(
+          "active-overlay"
+        );
+        closed = oneEvent(outerTrigger, "sp-closed");
+        outerButton.click();
         await closed;
-        expect(
-          await isOnTopLayer(this.outerClickContent),
-          "hover not available at point"
-        ).to.be.false;
+        expect((_f = outerClickContent.parentElement) == null ? void 0 : _f.localName).to.equal(
+          "overlay-trigger"
+        );
       });
-      it("opens a nested popover", async function() {
-        expect(
-          await isOnTopLayer(this.outerClickContent),
-          "hover not available at point"
-        ).to.be.false;
-        expect(
-          await isOnTopLayer(this.innerClickContent),
-          "hover not available at point"
-        ).to.be.false;
-        expect(this.outerButton).to.exist;
-        let open = oneEvent(this.outerTrigger, "sp-opened");
-        this.outerButton.click();
+      it("opens a nested popover", async () => {
+        expect(isVisible(outerClickContent)).to.be.false;
+        expect(isVisible(innerClickContent)).to.be.false;
+        expect(outerButton).to.exist;
+        let open = oneEvent(outerTrigger, "sp-opened");
+        outerButton.click();
         await open;
-        expect(
-          await isOnTopLayer(this.outerClickContent),
-          "outer click content available at point"
-        ).to.be.true;
-        expect(await isOnTopLayer(this.innerClickContent)).to.be.false;
-        open = oneEvent(this.innerTrigger, "sp-opened");
-        this.innerButton.click();
+        expect(outerClickContent.parentElement).to.not.be.an.instanceOf(
+          OverlayTrigger
+        );
+        expect(isVisible(outerClickContent)).to.be.true;
+        expect(isVisible(innerClickContent)).to.be.false;
+        open = oneEvent(innerTrigger, "sp-opened");
+        innerButton.click();
         await open;
-        expect(
-          await isOnTopLayer(this.outerClickContent),
-          "outer click content available at point"
-        ).to.be.true;
-        expect(
-          await isOnTopLayer(this.innerClickContent),
-          "inner click content available at point"
-        ).to.be.true;
+        expect(innerClickContent.parentElement).to.not.be.instanceOf(
+          OverlayTrigger
+        );
+        expect(isVisible(outerClickContent)).to.be.true;
+        expect(isVisible(innerClickContent)).to.be.true;
       });
-      it('focus previous "modal" when closing nested "modal"', async function() {
-        this.outerTrigger.type = "modal";
-        this.innerTrigger.type = "modal";
+      it('focus previous "modal" when closing nested "modal"', async () => {
+        outerTrigger.type = "modal";
+        innerTrigger.type = "modal";
         expect(
-          await isOnTopLayer(this.outerClickContent),
-          "outer click content not available at point"
+          isVisible(outerClickContent),
+          "outer popover starts closed"
         ).to.be.false;
         expect(
-          await isOnTopLayer(this.innerClickContent),
-          "inner click content not available at point"
+          isVisible(innerClickContent),
+          "inner popover starts closed"
         ).to.be.false;
-        const outerOpen = oneEvent(this.outerButton, "sp-opened");
-        this.outerButton.click();
+        expect(outerButton).to.exist;
+        const outerOpen = oneEvent(outerButton, "sp-opened");
+        outerButton.click();
         await outerOpen;
+        expect(outerClickContent.parentElement).to.not.be.an.instanceOf(
+          OverlayTrigger
+        );
+        expect(isVisible(outerClickContent), "outer popover opens").to.be.true;
         expect(
-          await isOnTopLayer(this.outerClickContent),
-          "outer click content available at point"
-        ).to.be.true;
-        expect(
-          await isOnTopLayer(this.innerClickContent),
-          "inner click content available at point"
+          isVisible(innerClickContent),
+          "inner popover stays closed"
         ).to.be.false;
-        const innerOpen = oneEvent(this.innerButton, "sp-opened");
-        this.innerButton.click();
+        const innerOpen = oneEvent(innerButton, "sp-opened");
+        innerButton.click();
         await innerOpen;
-        expect(
-          await isOnTopLayer(this.outerClickContent),
-          "outer click content available at point"
-        ).to.be.true;
-        expect(
-          await isOnTopLayer(this.innerClickContent),
-          "inner click content available at point"
-        ).to.be.true;
-        const innerClose = oneEvent(this.innerButton, "sp-closed");
-        await sendKeys({
-          press: "Escape"
-        });
+        expect(innerClickContent.parentElement).to.not.be.instanceOf(
+          OverlayTrigger
+        );
+        expect(isVisible(outerClickContent), "outer popover stays open").to.be.true;
+        expect(isVisible(innerClickContent), "inner popover opens").to.be.true;
+        const innerClose = oneEvent(innerButton, "sp-closed");
+        pressEscape();
         await innerClose;
+        expect(innerClickContent.parentElement).to.be.instanceOf(
+          OverlayTrigger
+        );
         expect(
-          await isOnTopLayer(this.outerClickContent),
-          "outer click content available at point"
-        ).to.be.true;
-        expect(
-          await isOnTopLayer(this.innerClickContent),
-          "inner click content not available at point"
-        ).to.be.false;
-        expect(
-          document.activeElement === this.innerButton,
+          document.activeElement === innerButton,
           "outer popover recieved focus"
         ).to.be.true;
       });
-      it("escape closes an open popover", async function() {
-        this.outerTrigger.type = "modal";
-        this.innerTrigger.type = "modal";
-        const outerOpen = oneEvent(this.outerButton, "sp-opened");
-        this.outerButton.click();
+      it("escape closes an open popover", async () => {
+        outerTrigger.type = "modal";
+        innerTrigger.type = "modal";
+        const outerOpen = oneEvent(outerButton, "sp-opened");
+        outerButton.click();
         await outerOpen;
         expect(
-          await isOnTopLayer(this.outerClickContent),
-          "outer click content available at point"
-        ).to.be.true;
-        const innerOpen = oneEvent(this.innerButton, "sp-opened");
-        this.innerButton.click();
+          outerClickContent.parentElement instanceof OverlayTrigger,
+          "outer content stolen and reparented"
+        ).to.be.false;
+        const innerOpen = oneEvent(innerButton, "sp-opened");
+        innerButton.click();
         await innerOpen;
         expect(
-          await isOnTopLayer(this.outerClickContent),
-          "outer click content available at point"
-        ).to.be.true;
-        expect(
-          await isOnTopLayer(this.innerClickContent),
-          "inner click content available at point"
-        ).to.be.true;
+          innerClickContent.parentElement instanceof OverlayTrigger,
+          "inner content stolen and reparented"
+        ).to.be.false;
+        expect(isVisible(outerClickContent)).to.be.true;
+        expect(isVisible(innerClickContent)).to.be.true;
         pressSpace();
-        expect(
-          await isOnTopLayer(this.outerClickContent),
-          "outer click content available at point"
-        ).to.be.true;
-        expect(
-          await isOnTopLayer(this.innerClickContent),
-          "inner click content available at point"
-        ).to.be.true;
-        const innerClose = oneEvent(this.innerButton, "sp-closed");
-        await sendKeys({
-          press: "Escape"
-        });
+        expect(isVisible(outerClickContent)).to.be.true;
+        expect(isVisible(innerClickContent)).to.be.true;
+        const innerClose = oneEvent(innerButton, "sp-closed");
+        pressEscape();
         await innerClose;
         expect(
-          await isOnTopLayer(this.outerClickContent),
-          "outer click content available at point"
+          innerClickContent.parentElement instanceof OverlayTrigger,
+          "inner content returned"
         ).to.be.true;
-        expect(
-          await isOnTopLayer(this.innerClickContent),
-          "inner click content not available at point"
-        ).to.be.false;
-        const outerClose = oneEvent(this.outerButton, "sp-closed");
-        await sendKeys({
-          press: "Escape"
-        });
+        expect(isVisible(outerClickContent)).to.be.true;
+        expect(isVisible(innerClickContent)).to.be.false;
+        const outerClose = oneEvent(outerButton, "sp-closed");
+        pressEscape();
         await outerClose;
         expect(
-          await isOnTopLayer(this.outerClickContent),
-          "outer click content not available at point"
-        ).to.be.false;
-        expect(
-          await isOnTopLayer(this.innerClickContent),
-          "inner click content not available at point"
-        ).to.be.false;
+          outerClickContent.parentElement instanceof OverlayTrigger,
+          "outer content returned"
+        ).to.be.true;
+        expect(isVisible(outerClickContent)).to.be.false;
+        expect(isVisible(innerClickContent)).to.be.false;
       });
-      it("click closes an open popover", async function() {
-        this.outerTrigger.type = "modal";
-        this.innerTrigger.type = "modal";
-        const outerOpen = oneEvent(this.outerButton, "sp-opened");
-        this.outerButton.click();
+      it("click closes an open popover", async () => {
+        outerTrigger.type = "modal";
+        innerTrigger.type = "modal";
+        const outerOpen = oneEvent(outerButton, "sp-opened");
+        outerButton.click();
         await outerOpen;
         expect(
-          await isOnTopLayer(this.outerClickContent),
-          "outer click content is available at point"
-        ).to.be.true;
-        const innerOpen = oneEvent(this.innerButton, "sp-opened");
-        this.innerButton.click();
+          outerClickContent.parentElement instanceof OverlayTrigger,
+          "outer content stolen and reparented"
+        ).to.be.false;
+        const innerOpen = oneEvent(innerButton, "sp-opened");
+        innerButton.click();
         await innerOpen;
         expect(
-          await isOnTopLayer(this.outerClickContent),
-          "outer click content is available at point"
-        ).to.be.true;
-        expect(
-          await isOnTopLayer(this.innerClickContent),
-          "inner click content is available at point"
-        ).to.be.true;
-        this.innerClickContent.click();
+          innerClickContent.parentElement instanceof OverlayTrigger,
+          "inner content stolen and reparented"
+        ).to.be.false;
+        expect(isVisible(outerClickContent)).to.be.true;
+        expect(isVisible(innerClickContent)).to.be.true;
+        innerClickContent.click();
         await aTimeout(200);
-        expect(
-          await isOnTopLayer(this.outerClickContent),
-          "outer click content is available at point"
-        ).to.be.true;
-        expect(
-          await isOnTopLayer(this.innerClickContent),
-          "inner click content is available at point"
-        ).to.be.true;
-        const innerClose = oneEvent(this.innerButton, "sp-closed");
-        sendMouse({
-          steps: [
-            {
-              type: "click",
-              position: [1, 1]
-            }
-          ]
-        });
+        expect(isVisible(outerClickContent)).to.be.true;
+        expect(isVisible(innerClickContent)).to.be.true;
+        const innerClose = oneEvent(innerButton, "sp-closed");
+        document.body.click();
         await innerClose;
         expect(
-          await isOnTopLayer(this.outerClickContent),
-          "outer click content is available at point"
+          innerClickContent.parentElement instanceof OverlayTrigger,
+          "inner content returned"
         ).to.be.true;
-        expect(
-          await isOnTopLayer(this.innerClickContent),
-          "inner click content is not available at point"
-        ).to.be.false;
-        const outerClose = oneEvent(this.outerButton, "sp-closed");
-        sendMouse({
-          steps: [
-            {
-              type: "click",
-              position: [1, 1]
-            }
-          ]
-        });
+        expect(isVisible(outerClickContent)).to.be.true;
+        expect(isVisible(innerClickContent)).to.be.false;
+        const outerClose = oneEvent(outerButton, "sp-closed");
+        document.body.click();
         await outerClose;
         expect(
-          await isOnTopLayer(this.outerClickContent),
-          "outer click content is not available at point"
-        ).to.be.not;
-        expect(
-          await isOnTopLayer(this.innerClickContent),
-          "inner click content is not available at point"
-        ).to.be.not;
+          outerClickContent.parentElement instanceof OverlayTrigger,
+          "outer content returned"
+        ).to.be.true;
+        expect(isVisible(outerClickContent)).to.be.false;
+        expect(isVisible(innerClickContent)).to.be.false;
       });
-      it("opens a hover popover", async function() {
-        expect(await isOnTopLayer(this.hoverContent)).to.be.false;
-        const rect = this.outerTrigger.getBoundingClientRect();
-        const open = oneEvent(this.outerTrigger, "sp-opened");
-        sendMouse({
-          steps: [
-            {
-              type: "move",
-              position: [
-                rect.left + rect.width / 2,
-                rect.top + rect.height / 2
-              ]
-            }
-          ]
-        });
+      it("opens a hover popover", async () => {
+        const root = outerTrigger.shadowRoot ? outerTrigger.shadowRoot : outerTrigger;
+        const triggerZone = root.querySelector(
+          "#trigger"
+        );
+        expect(triggerZone).to.exist;
+        if (!triggerZone)
+          return;
+        expect(outerButton).to.exist;
+        expect(hoverContent).to.exist;
+        expect(isVisible(hoverContent)).to.be.false;
+        const open = oneEvent(outerTrigger, "sp-opened");
+        const mouseEnter = new MouseEvent("mouseenter");
+        triggerZone.dispatchEvent(mouseEnter);
         await open;
-        expect(
-          await isOnTopLayer(this.hoverContent),
-          "hover content is available at point"
-        ).to.be.true;
-        const close = oneEvent(this.outerTrigger, "sp-closed");
-        sendMouse({
-          steps: [
-            {
-              type: "move",
-              position: [
-                rect.left + rect.width * 2,
-                rect.top + rect.height / 2
-              ]
-            }
-          ]
-        });
+        expect(hoverContent.parentElement).to.not.be.instanceOf(
+          OverlayTrigger
+        );
+        expect(isVisible(hoverContent)).to.be.true;
+        const close = oneEvent(outerTrigger, "sp-closed");
+        const mouseLeave = new MouseEvent("mouseleave");
+        triggerZone.dispatchEvent(mouseLeave);
         await close;
-        expect(
-          await isOnTopLayer(this.hoverContent),
-          "hover content is not available at point"
-        ).to.be.false;
+        expect(hoverContent.parentElement).to.be.instanceOf(
+          OverlayTrigger
+        );
+        expect(isVisible(hoverContent)).to.be.false;
       });
-      it("closes a hover popover", async function() {
-        expect(await isOnTopLayer(this.hoverContent)).to.be.false;
-        const rect = this.outerTrigger.getBoundingClientRect();
-        const close = oneEvent(this.outerTrigger, "sp-closed");
-        await sendMouse({
-          steps: [
-            {
-              type: "move",
-              position: [
-                rect.left + rect.width / 2,
-                rect.top + rect.height / 2
-              ]
-            }
-          ]
-        });
-        await nextFrame();
-        await nextFrame();
-        await nextFrame();
-        await nextFrame();
-        await sendMouse({
-          steps: [
-            {
-              type: "move",
-              position: [
-                rect.left + rect.width * 2,
-                rect.top + rect.height / 2
-              ]
-            }
-          ]
-        });
-        await close;
-        expect(
-          await isOnTopLayer(this.hoverContent),
-          "hover content is not available at point"
+      it("closes a hover popover", async () => {
+        const root = outerTrigger.shadowRoot ? outerTrigger.shadowRoot : outerTrigger;
+        const triggerZone = root.querySelector(
+          "#trigger"
+        );
+        expect(triggerZone).to.exist;
+        if (!triggerZone)
+          return;
+        expect(outerButton).to.exist;
+        expect(hoverContent).to.exist;
+        expect(
+          isVisible(hoverContent),
+          "hoverContent should not be visible"
         ).to.be.false;
+        const mouseEnter = new MouseEvent("mouseenter");
+        const mouseLeave = new MouseEvent("mouseleave");
+        triggerZone.dispatchEvent(mouseEnter);
+        await nextFrame();
+        triggerZone.dispatchEvent(mouseLeave);
+        await waitUntil(
+          () => isVisible(hoverContent) === false,
+          "hoverContent should still not be visible"
+        );
       });
-      it("dispatches events on open/close", async function() {
-        const opened = oneEvent(this.outerButton, "sp-opened");
-        this.outerButton.click();
+      it("dispatches events on open/close", async () => {
+        const opened = oneEvent(outerButton, "sp-opened");
+        outerButton.click();
         const openedEvent = await opened;
-        expect(
-          await isOnTopLayer(this.outerClickContent),
-          "hover content is available at point"
-        ).to.be.true;
-        expect(this.outerTrigger.open).to.equal("click");
-        expect(openedEvent.detail.interaction).to.equal("auto");
-        const closed = oneEvent(this.outerButton, "sp-closed");
-        sendMouse({
-          steps: [
-            {
-              type: "click",
-              position: [1, 1]
-            }
-          ]
-        });
+        expect(isVisible(outerClickContent)).to.be.true;
+        expect(outerTrigger.open).to.equal("click");
+        expect(openedEvent.detail.interaction).to.equal("click");
+        const closed = oneEvent(outerButton, "sp-closed");
+        document.body.click();
         const closedEvent = await closed;
-        expect(closedEvent.detail.interaction).to.equal("auto");
-        expect(
-          await isOnTopLayer(this.outerClickContent),
-          "hover content is not available at point"
-        ).to.be.false;
+        expect(outerClickContent.parentElement).to.be.instanceOf(
+          OverlayTrigger
+        );
+        expect(closedEvent.detail.interaction).to.equal("click");
+        expect(isVisible(outerClickContent)).to.be.false;
       });
     });
     describe("System interactions", () => {
@@ -606,46 +528,98 @@ export const runOverlayTriggerTests = (type) => {
         });
         await Promise.all(closes);
       });
-      it.skip('manages multiple layers of `type="modal"', async () => {
+      it("acquires a `color` and `size` from `sp-theme`", async () => {
+        const el = await fixture(html`
+                    <sp-theme color="dark">
+                        <sp-theme color="light">
+                            <overlay-trigger id="trigger" placement="top">
+                                <sp-button
+                                    id="outer-button"
+                                    variant="primary"
+                                    slot="trigger"
+                                >
+                                    Show Popover
+                                </sp-button>
+                                <sp-popover
+                                    id="outer-popover"
+                                    dialog
+                                    slot="click-content"
+                                    direction="bottom"
+                                    tip
+                                    open
+                                >
+                                    Popover content!
+                                </sp-popover>
+                            </overlay-trigger>
+                        </sp-theme>
+                    </sp-theme>
+                `);
+        await elementUpdated(el);
+        expect(document.querySelector("active-overlay")).to.be.null;
+        const button = el.querySelector("sp-button");
+        const opened = oneEvent(button, "sp-opened");
+        button.click();
+        await opened;
+        await elementUpdated(el);
+        const overlay = document.querySelector(
+          "active-overlay"
+        );
+        expect(overlay).to.exist;
+        expect(overlay.theme.color).to.not.equal("dark");
+        expect(overlay.theme.color).to.equal("light");
+      });
+      it('manages multiple layers of `type="modal"', async () => {
         var _a, _b, _c;
         const el = await fixture(html`
                     <overlay-trigger type="modal" placement="none">
                         <sp-button slot="trigger" variant="accent">
                             Toggle Dialog
                         </sp-button>
-                        <sp-popover dialog slot="click-content">
-                            <overlay-trigger>
-                                <sp-button slot="trigger" variant="primary">
-                                    Toggle Dialog
-                                </sp-button>
-                                <sp-popover dialog slot="click-content">
-                                    <overlay-trigger type="modal">
-                                        <sp-button
-                                            slot="trigger"
-                                            variant="secondary"
-                                        >
-                                            Toggle Dialog
-                                        </sp-button>
-                                        <sp-popover dialog slot="click-content">
-                                            <p>
-                                                When you get this deep, this
-                                                ActiveOverlay should be the only
-                                                one in [slot="open"].
-                                            </p>
-                                            <p>
-                                                All of the rest of the
-                                                ActiveOverlay elements should
-                                                have had their [slot] attribute
-                                                removed.
-                                            </p>
-                                            <p>
-                                                Closing this ActiveOverlay
-                                                should replace them...
-                                            </p>
-                                        </sp-popover>
-                                    </overlay-trigger>
-                                </sp-popover>
-                            </overlay-trigger>
+                        <sp-popover slot="click-content">
+                            <sp-dialog no-divider>
+                                <overlay-trigger>
+                                    <sp-button slot="trigger" variant="primary">
+                                        Toggle Dialog
+                                    </sp-button>
+                                    <sp-popover slot="click-content">
+                                        <sp-dialog no-divider>
+                                            <overlay-trigger type="modal">
+                                                <sp-button
+                                                    slot="trigger"
+                                                    variant="secondary"
+                                                >
+                                                    Toggle Dialog
+                                                </sp-button>
+                                                <sp-popover
+                                                    slot="click-content"
+                                                >
+                                                    <sp-dialog no-divider>
+                                                        <p>
+                                                            When you get this
+                                                            deep, this
+                                                            ActiveOverlay should
+                                                            be the only one in
+                                                            [slot="open"].
+                                                        </p>
+                                                        <p>
+                                                            All of the rest of
+                                                            the ActiveOverlay
+                                                            elements should have
+                                                            had their [slot]
+                                                            attribute removed.
+                                                        </p>
+                                                        <p>
+                                                            Closing this
+                                                            ActiveOverlay should
+                                                            replace them...
+                                                        </p>
+                                                    </sp-dialog>
+                                                </sp-popover>
+                                            </overlay-trigger>
+                                        </sp-dialog>
+                                    </sp-popover>
+                                </overlay-trigger>
+                            </sp-dialog>
                         </sp-popover>
                     </overlay-trigger>
                 `);
@@ -720,14 +694,7 @@ export const runOverlayTriggerTests = (type) => {
         ).to.equal("open");
         await nextFrame();
         const closed = oneEvent(triggers[2], "sp-closed");
-        sendMouse({
-          steps: [
-            {
-              type: "click",
-              position: [1, 1]
-            }
-          ]
-        });
+        document.body.click();
         await closed;
         await elementUpdated(overlayTriggers[2]);
         activeOverlays = [