@spectrum-web-components/overlay 0.35.1-rc.43 → 0.36.0

package/test/overlay.test.js

@@ -1,21 +1,20 @@
 "use strict";
 import "@spectrum-web-components/button/sp-button.js";
 import "@spectrum-web-components/dialog/sp-dialog.js";
-import "@spectrum-web-components/overlay/sp-overlay.js";
-import "@spectrum-web-components/overlay/overlay-trigger.js";
-import "@spectrum-web-components/tooltip/sp-tooltip.js";
 import "@spectrum-web-components/popover/sp-popover.js";
 import { setViewport } from "@web/test-runner-commands";
 import {
-  Overlay,
-  VirtualTrigger
+  Overlay
 } from "@spectrum-web-components/overlay";
+import { isVisible } from "../../../test/testing-helpers.js";
 import {
   elementUpdated,
   expect,
+  fixture,
   html,
   nextFrame,
-  oneEvent
+  oneEvent,
+  waitUntil
 } from "@open-wc/testing";
 import { sendKeys } from "@web/test-runner-commands";
 import {
@@ -23,28 +22,11 @@ import {
   virtualElement
 } from "../stories/overlay.stories";
 import { sendMouse } from "../../../test/plugins/browser.js";
-import { spy } from "sinon";
-import "@spectrum-web-components/theme/sp-theme.js";
-import "@spectrum-web-components/theme/src/themes.js";
-import { render } from "@spectrum-web-components/base";
-import {
-  fixture,
-  isInteractive,
-  isOnTopLayer
-} from "../../../test/testing-helpers.js";
-async function styledFixture(story) {
-  const test = await fixture(html`
-        <sp-theme theme="spectrum" scale="medium" color="dark">
-            ${story}
-        </sp-theme>
-    `);
-  return test.children[0];
-}
-describe("Overlays, v2", () => {
+describe("Overlays", () => {
   let testDiv;
   let openOverlays = [];
   beforeEach(async () => {
-    testDiv = await styledFixture(
+    testDiv = await fixture(
       html`
                 <div id="top">
                     <style>
@@ -66,28 +48,31 @@ describe("Overlays, v2", () => {
                             display: none;
                         }
                     </style>
-                    <sp-button id="first-button" variant="primary">
+                    <sp-button
+                        id="first-button"
+                        variant="primary"
+                        slot="trigger"
+                    >
                         Show Popover
                     </sp-button>
                     <div id="overlay-content">
-                        <sp-popover id="outer-popover" direction="bottom" tip>
-                            <sp-dialog no-divider>
-                                <div class="options-popover-content">
-                                    A popover message
-                                </div>
-                                <sp-button id="outer-focus-target">
-                                    Test 1
-                                </sp-button>
-                                <sp-button>Test 2</sp-button>
-                                <sp-button>Test 3</sp-button>
+                        <sp-popover
+                            id="outer-popover"
+                            slot="click-content"
+                            direction="bottom"
+                            tip
+                            open
+                        >
+                            <sp-dialog class="options-popover-content">
+                                A popover message
                             </sp-dialog>
                         </sp-popover>
-                        <sp-tooltip id="hover-1" class="hover-content">
+                        <div id="hover-1" class="hover-content">
                             Hover message
-                        </sp-tooltip>
-                        <sp-tooltip id="hover-2" class="hover-content">
+                        </div>
+                        <div id="hover-2" class="hover-content">
                             Other hover message
-                        </sp-tooltip>
+                        </div>
                     </div>
                 </div>
             `
@@ -95,7 +80,7 @@ describe("Overlays, v2", () => {
     await elementUpdated(testDiv);
   });
   afterEach(() => {
-    openOverlays.map((overlay) => overlay.open = false);
+    openOverlays.map((close) => close());
     openOverlays = [];
   });
   [
@@ -110,126 +95,88 @@ describe("Overlays, v2", () => {
     "left-end",
     "right",
     "right-start",
-    "right-end"
+    "right-end",
+    "none"
   ].map((direction) => {
     const placement = direction;
     it(`opens a popover - ${placement}`, async () => {
-      const clickSpy = spy();
       const button = testDiv.querySelector(
         "#first-button"
       );
       const outerPopover = testDiv.querySelector(
         "#outer-popover"
       );
-      outerPopover.addEventListener("click", () => {
-        clickSpy();
-      });
-      expect(await isInteractive(outerPopover)).to.be.false;
+      expect(outerPopover.parentElement).to.exist;
+      if (outerPopover.parentElement) {
+        expect(outerPopover.parentElement.id).to.equal(
+          "overlay-content"
+        );
+      }
+      expect(isVisible(outerPopover)).to.be.false;
       expect(button).to.exist;
-      const opened = oneEvent(outerPopover, "sp-opened");
+      const opened = oneEvent(button, "sp-opened");
       openOverlays.push(
-        await Overlay.open(outerPopover, {
-          trigger: button,
-          type: "auto",
+        await Overlay.open(button, "click", outerPopover, {
           delayed: false,
           placement,
           offset: 10
         })
       );
-      button.insertAdjacentElement(
-        "afterend",
-        openOverlays.at(-1)
-      );
       await opened;
-      expect(await isInteractive(outerPopover)).to.be.true;
-    });
-  });
-  it(`opens a modal dialog`, async () => {
-    const button = testDiv.querySelector("#first-button");
-    const outerPopover = testDiv.querySelector("#outer-popover");
-    expect(await isInteractive(outerPopover)).to.be.false;
-    expect(button).to.exist;
-    const opened = oneEvent(outerPopover, "sp-opened");
-    openOverlays.push(
-      await Overlay.open(outerPopover, {
-        trigger: button
-      })
-    );
-    button.insertAdjacentElement(
-      "afterend",
-      openOverlays.at(-1)
-    );
-    await opened;
-    const firstFocused = outerPopover.querySelector(
-      "#outer-focus-target"
-    );
-    expect(document.activeElement === firstFocused).to.be.true;
-    await sendKeys({
-      press: "Tab"
-    });
-    expect(document.activeElement === button).to.be.false;
-    await sendKeys({
-      press: "Tab"
-    });
-    expect(document.activeElement === button).to.be.false;
-    await sendKeys({
-      press: "Shift+Tab"
-    });
-    expect(document.activeElement === button).to.be.false;
-    await sendKeys({
-      press: "Shift+Tab"
+      expect(outerPopover.parentElement).to.exist;
+      if (outerPopover.parentElement) {
+        expect(outerPopover.parentElement.id).not.to.equal(
+          "overlay-content"
+        );
+      }
+      expect(isVisible(outerPopover)).to.be.true;
     });
-    expect(document.activeElement === button).to.be.false;
-    await sendKeys({
-      press: "Shift+Tab"
-    });
-    expect(document.activeElement === button).to.be.false;
   });
   it(`updates a popover`, async () => {
     const button = testDiv.querySelector("#first-button");
     const outerPopover = testDiv.querySelector("#outer-popover");
-    expect(await isInteractive(outerPopover)).to.be.false;
+    expect(outerPopover.parentElement).to.exist;
+    if (outerPopover.parentElement) {
+      expect(outerPopover.parentElement.id).to.equal("overlay-content");
+    }
+    expect(isVisible(outerPopover)).to.be.false;
     expect(button).to.exist;
-    const opened = oneEvent(outerPopover, "sp-opened");
+    const opened = oneEvent(button, "sp-opened");
     openOverlays.push(
-      await Overlay.open(outerPopover, {
-        trigger: button,
-        type: "auto",
+      await Overlay.open(button, "click", outerPopover, {
+        delayed: false,
         offset: 10
       })
     );
-    button.insertAdjacentElement(
-      "afterend",
-      openOverlays.at(-1)
-    );
     await opened;
-    expect(await isInteractive(outerPopover)).to.be.true;
+    expect(isVisible(outerPopover)).to.be.true;
     Overlay.update();
-    expect(await isInteractive(outerPopover)).to.be.true;
+    expect(isVisible(outerPopover)).to.be.true;
   });
   it(`opens a popover w/ delay`, async () => {
     const button = testDiv.querySelector("#first-button");
     const outerPopover = testDiv.querySelector("#outer-popover");
-    expect(await isInteractive(outerPopover)).to.be.false;
+    expect(outerPopover.parentElement).to.exist;
+    if (outerPopover.parentElement) {
+      expect(outerPopover.parentElement.id).to.equal("overlay-content");
+    }
+    expect(isVisible(outerPopover)).to.be.false;
     expect(button).to.exist;
-    const opened = oneEvent(outerPopover, "sp-opened");
-    const start = performance.now();
+    const opened = oneEvent(button, "sp-opened");
     openOverlays.push(
-      await Overlay.open(outerPopover, {
-        trigger: button,
-        type: "auto",
+      await Overlay.open(button, "click", outerPopover, {
         delayed: true,
         offset: 10
       })
     );
-    button.insertAdjacentElement(
-      "afterend",
-      openOverlays.at(-1)
-    );
     await opened;
-    const end = performance.now();
-    expect(await isInteractive(outerPopover)).to.be.true;
-    expect(end - start).to.be.greaterThan(1e3);
+    expect(outerPopover.parentElement).to.exist;
+    if (outerPopover.parentElement) {
+      expect(outerPopover.parentElement.id).not.to.equal(
+        "overlay-content"
+      );
+    }
+    expect(isVisible(outerPopover)).to.be.true;
   });
   it("opens hover overlay", async () => {
     const button = testDiv.querySelector("#first-button");
@@ -237,44 +184,38 @@ describe("Overlays, v2", () => {
     const clickOverlay = testDiv.querySelector(
       "#outer-popover"
     );
-    expect(await isOnTopLayer(hoverOverlay)).to.be.false;
-    expect(await isOnTopLayer(clickOverlay)).to.be.false;
-    let opened = oneEvent(hoverOverlay, "sp-opened");
+    expect(isVisible(hoverOverlay)).to.be.false;
+    expect(isVisible(clickOverlay)).to.be.false;
+    let opened = oneEvent(button, "sp-opened");
     openOverlays.push(
-      await Overlay.open(hoverOverlay, {
-        trigger: button,
-        type: "hint",
+      await Overlay.open(button, "hover", hoverOverlay, {
+        delayed: false,
         placement: "top",
         offset: 10
       })
     );
-    button.insertAdjacentElement(
-      "afterend",
-      openOverlays.at(-1)
-    );
     await opened;
-    expect(await isOnTopLayer(hoverOverlay)).to.be.true;
-    opened = oneEvent(clickOverlay, "sp-opened");
-    const closed = oneEvent(hoverOverlay, "sp-closed");
+    expect(hoverOverlay.parentElement).to.exist;
+    if (hoverOverlay.parentElement) {
+      expect(hoverOverlay.parentElement.id).not.to.equal(
+        "overlay-content"
+      );
+    }
+    expect(isVisible(hoverOverlay)).to.be.true;
+    opened = oneEvent(button, "sp-opened");
     openOverlays.push(
-      await Overlay.open(clickOverlay, {
-        trigger: button,
-        type: "auto",
+      await Overlay.open(button, "click", clickOverlay, {
+        delayed: false,
         placement: "bottom",
         offset: 10
       })
     );
-    button.insertAdjacentElement(
-      "afterend",
-      openOverlays.at(-1)
-    );
     await opened;
-    await closed;
-    expect(
-      await isInteractive(clickOverlay),
-      "click overlay not interactive"
-    ).to.be.true;
-    expect(await isOnTopLayer(hoverOverlay), "hover overlay interactive").to.be.false;
+    if (hoverOverlay.parentElement) {
+      expect(hoverOverlay.parentElement.id).to.equal("overlay-content");
+    }
+    expect(isVisible(hoverOverlay)).to.be.false;
+    expect(isVisible(clickOverlay)).to.be.true;
   });
   it("opens custom overlay", async () => {
     const button = testDiv.querySelector("#first-button");
@@ -284,148 +225,94 @@ describe("Overlays, v2", () => {
     );
     expect(button).to.exist;
     expect(customOverlay).to.exist;
-    expect(await isOnTopLayer(customOverlay)).to.be.false;
-    expect(await isOnTopLayer(clickOverlay)).to.be.false;
-    let opened = oneEvent(customOverlay, "sp-opened");
+    expect(isVisible(customOverlay)).to.be.false;
+    expect(isVisible(clickOverlay)).to.be.false;
+    let opened = oneEvent(button, "sp-opened");
     openOverlays.push(
-      await Overlay.open(customOverlay, {
-        trigger: button,
-        type: "auto",
+      await Overlay.open(button, "custom", customOverlay, {
+        delayed: false,
         placement: "top",
         offset: 10
       })
     );
-    button.insertAdjacentElement(
-      "afterend",
-      openOverlays.at(-1)
-    );
     await opened;
-    expect(await isOnTopLayer(customOverlay)).to.be.true;
-    opened = oneEvent(clickOverlay, "sp-opened");
+    expect(customOverlay.parentElement).to.exist;
+    if (customOverlay.parentElement) {
+      expect(customOverlay.parentElement.id).not.to.equal(
+        "overlay-content"
+      );
+    }
+    expect(isVisible(customOverlay)).to.be.true;
+    opened = oneEvent(button, "sp-opened");
     openOverlays.push(
-      await Overlay.open(clickOverlay, {
-        trigger: button,
-        type: "auto",
+      await Overlay.open(button, "click", clickOverlay, {
+        delayed: false,
         placement: "bottom",
         offset: 10
       })
     );
-    button.insertAdjacentElement(
-      "afterend",
-      openOverlays.at(-1)
-    );
     await opened;
-    expect(await isOnTopLayer(clickOverlay), "click content open").to.be.true;
+    expect(isVisible(customOverlay)).to.be.true;
+    expect(isVisible(clickOverlay)).to.be.true;
   });
   it("closes via events", async () => {
-    const test = await fixture(html`
-            <div>
-                <sp-popover id="root">
-                    <sp-dialog dismissable>
-                        Some Content for the Dialog.
-                    </sp-dialog>
-                </sp-popover>
+    const el = await fixture(html`
+            <div id="root">
+                <sp-dialog dismissable></sp-dialog>
             </div>
         `);
-    const el = test.querySelector("sp-popover");
     const dialog = el.querySelector("sp-dialog");
     const opened = oneEvent(el, "sp-opened");
     openOverlays.push(
-      await Overlay.open(el, {
-        trigger: test,
-        type: "auto",
+      await Overlay.open(el, "click", dialog, {
+        delayed: false,
         placement: "bottom",
         offset: 10
       })
     );
-    test.insertAdjacentElement(
-      "afterend",
-      openOverlays.at(-1)
-    );
     await opened;
-    expect(await isInteractive(el)).to.be.true;
-    const closed = oneEvent(el, "sp-closed");
     dialog.close();
-    await closed;
-    expect(await isInteractive(el)).to.be.false;
-  });
-  it("positions with a VirtualTrigger", async () => {
-    const test = await fixture(html`
-            <div>
-                <sp-popover id="root" placement="right">
-                    <sp-dialog dismissable>
-                        Some Content for the Dialog.
-                    </sp-dialog>
-                </sp-popover>
-            </div>
-        `);
-    const el = test.querySelector("sp-popover");
-    const trigger = new VirtualTrigger(100, 100);
-    const opened = oneEvent(el, "sp-opened");
-    openOverlays.push(
-      await Overlay.open(el, {
-        trigger,
-        type: "auto",
-        placement: "right",
-        offset: 10
-      })
-    );
-    test.insertAdjacentElement(
-      "afterend",
-      openOverlays.at(-1)
+    await waitUntil(
+      () => !!dialog.parentElement && dialog.parentElement.tagName !== "ACTIVE-OVERLAY",
+      "content is returned"
     );
-    await opened;
-    expect(await isInteractive(el)).to.be.true;
-    const initial = el.getBoundingClientRect();
-    trigger.updateBoundingClientRect(500, 500);
-    await nextFrame();
-    await nextFrame();
-    const final = el.getBoundingClientRect();
-    expect(initial.x).to.not.equal(8);
-    expect(initial.y).to.not.equal(8);
-    expect(initial.x).to.not.equal(final.x);
-    expect(initial.y).to.not.equal(final.y);
   });
   it("closes an inline overlay when tabbing past the content", async () => {
     const el = await fixture(html`
             <div>
                 <sp-button class="trigger">Trigger</sp-button>
-                <sp-popover class="content">
+                <div class="content">
                     <input />
-                </sp-popover>
+                </div>
                 <input value="After" id="after" />
             </div>
         `);
     const trigger = el.querySelector(".trigger");
     const content = el.querySelector(".content");
     const input = el.querySelector("input");
-    const after2 = el.querySelector("#after");
-    const opened = oneEvent(content, "sp-opened");
-    openOverlays.push(
-      await Overlay.open(content, {
-        trigger,
-        type: "auto",
-        receivesFocus: "auto"
-      })
-    );
-    trigger.insertAdjacentElement(
-      "afterend",
-      openOverlays.at(-1)
-    );
-    await opened;
-    expect(await isInteractive(content)).to.be.true;
+    const after = el.querySelector("#after");
+    openOverlays.push(await Overlay.open(trigger, "inline", content, {}));
+    trigger.focus();
+    await sendKeys({
+      press: "Tab"
+    });
     expect(document.activeElement).to.equal(input);
-    const closed = oneEvent(content, "sp-closed");
+    expect(input.closest("active-overlay") !== null);
     await sendKeys({
       press: "Shift+Tab"
     });
-    await closed;
     expect(document.activeElement).to.equal(trigger);
     await sendKeys({
       press: "Tab"
     });
-    expect(document.activeElement).to.equal(after2);
-    expect(await isInteractive(content)).to.be.false;
+    expect(document.activeElement).to.equal(input);
+    await sendKeys({
+      press: "Tab"
+    });
+    expect(document.activeElement).to.equal(after);
+    await waitUntil(
+      () => document.querySelector("active-overlay") === null
+    );
   });
   it("closes an inline overlay when tabbing before the trigger", async () => {
     const el = await fixture(html`
@@ -443,22 +330,14 @@ describe("Overlays, v2", () => {
     const trigger = el.querySelector(".trigger");
     const content = el.querySelector(".content");
     const input = el.querySelector(".content input");
-    const before2 = el.querySelector("#before");
-    openOverlays.push(
-      await Overlay.open(content, {
-        trigger,
-        type: "auto"
-      })
-    );
-    trigger.insertAdjacentElement(
-      "afterend",
-      openOverlays.at(-1)
-    );
+    const before = el.querySelector("#before");
+    openOverlays.push(await Overlay.open(trigger, "inline", content, {}));
     trigger.focus();
     await sendKeys({
       press: "Tab"
     });
     expect(document.activeElement).to.equal(input);
+    expect(input.closest("active-overlay") !== null);
     await sendKeys({
       press: "Shift+Tab"
     });
@@ -466,7 +345,10 @@ describe("Overlays, v2", () => {
     await sendKeys({
       press: "Shift+Tab"
     });
-    expect(document.activeElement).to.equal(before2);
+    expect(document.activeElement).to.equal(before);
+    await waitUntil(
+      () => document.querySelector("active-overlay") === null
+    );
   });
   it("opens detached content", async () => {
     const textContent = "This is a detached element that has been overlaid";
@@ -475,130 +357,118 @@ describe("Overlays, v2", () => {
                 <button>Trigger</button>
             `
     );
-    const content = document.createElement("sp-popover");
+    const content = document.createElement("div");
     content.textContent = textContent;
-    const opened = oneEvent(content, "sp-opened");
-    const overlay = await Overlay.open(content, {
-      trigger: el,
-      type: "auto",
+    const opened = oneEvent(el, "sp-opened");
+    const closeOverlay = await Overlay.open(el, "click", content, {
       placement: "bottom"
     });
-    el.insertAdjacentElement("afterend", overlay);
     await opened;
-    expect(await isInteractive(content)).to.be.true;
-    const closed = oneEvent(content, "sp-closed");
-    overlay.open = false;
+    let activeOverlay = document.querySelector("active-overlay");
+    if (activeOverlay) {
+      expect(activeOverlay.textContent).to.equal(textContent);
+    } else {
+      expect(activeOverlay).to.not.be.null;
+    }
+    const closed = oneEvent(el, "sp-closed");
+    closeOverlay();
     await closed;
-    expect(await isInteractive(content)).to.be.false;
+    activeOverlay = document.querySelector("active-overlay");
+    expect(activeOverlay).to.be.null;
     content.remove();
   });
 });
-describe('Overlay - type="modal", v2', () => {
-  describe("handle multiple separate `contextmenu` events", async () => {
-    let width = 0;
-    let height = 0;
-    let firstMenu;
-    let firstRect;
-    let secondMenu;
-    let secondRect;
-    before(async () => {
-      render(
-        html`
-                    <sp-theme color="light" scale="large">
-                        ${virtualElement({
-          ...virtualElement.args,
-          offset: 6
-        })}
-                    </sp-theme>
-                `,
-        document.body
-      );
-      width = window.innerWidth;
-      height = window.innerHeight;
-    });
-    after(() => {
-      var _a;
-      (_a = document.querySelector("sp-theme")) == null ? void 0 : _a.remove();
-    });
-    it('opens the first "contextmenu" overlay', async () => {
-      const opened = oneEvent(document, "sp-opened");
-      await sendMouse({
-        steps: [
-          {
-            type: "move",
-            position: [width / 2 + 50, height / 2]
+describe('Overlay - type="modal"', () => {
+  it("closes on `contextmenu` and passes that to the underlying page", async () => {
+    await fixture(html`
+            ${virtualElement({
+      ...virtualElement.args,
+      offset: 6
+    })}
+        `);
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    let opened = oneEvent(document, "sp-opened");
+    sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [width / 2 + 50, height / 2]
+        },
+        {
+          type: "click",
+          options: {
+            button: "right"
           },
-          {
-            type: "click",
-            options: {
-              button: "right"
-            },
-            position: [width / 2 + 50, height / 2]
-          }
-        ]
-      });
-      await opened;
-      firstMenu = document.querySelector("sp-popover");
-      expect(firstMenu.textContent).to.include("Menu source: end");
-      firstRect = firstMenu.getBoundingClientRect();
-      expect(firstMenu).to.not.be.null;
+          position: [width / 2 + 50, height / 2]
+        }
+      ]
     });
-    it('closes the first "contextmenu" when opening a second', async () => {
-      var _a, _b, _c, _d;
-      const closed = oneEvent(document, "sp-closed");
-      const opened = oneEvent(document, "sp-opened");
-      const trigger = document.querySelector(
-        "start-end-contextmenu"
-      );
-      (_b = (_a = trigger.shadowRoot) == null ? void 0 : _a.querySelector("#start")) == null ? void 0 : _b.dispatchEvent(
-        new Event("contextmenu", {
-          composed: true
-        })
-      );
-      await nextFrame();
-      (_d = (_c = trigger.shadowRoot) == null ? void 0 : _c.querySelector("#start")) == null ? void 0 : _d.dispatchEvent(
-        new Event("pointerup", {
-          composed: true,
-          bubbles: true
-        })
-      );
-      await closed;
-      await opened;
-      secondMenu = document.querySelector("sp-popover");
-      expect(secondMenu.textContent).to.include("Menu source: start");
-      secondRect = secondMenu.getBoundingClientRect();
-      expect(secondMenu).to.not.be.null;
+    await opened;
+    const firstOverlay = document.querySelector(
+      "active-overlay"
+    );
+    const firstHeadline = firstOverlay.querySelector(
+      '[slot="header"]'
+    );
+    expect(firstOverlay, "first overlay").to.not.be.null;
+    expect(firstOverlay.isConnected).to.be.true;
+    expect(firstHeadline.textContent).to.equal("Menu source: end");
+    let closed = oneEvent(document, "sp-closed");
+    opened = oneEvent(document, "sp-opened");
+    sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [width / 4, height / 4]
+        },
+        {
+          type: "click",
+          options: {
+            button: "right"
+          },
+          position: [width / 4, height / 4]
+        }
+      ]
     });
-    it('closes the second "contextmenu" when clicking away', async () => {
-      const closed = oneEvent(document, "sp-closed");
-      sendMouse({
-        steps: [
-          {
-            type: "click",
-            position: [width - width / 8, height - height / 8]
-          }
-        ]
-      });
-      await closed;
-      expect(firstRect.top).to.not.equal(secondRect.top);
-      expect(firstRect.left).to.not.equal(secondRect.left);
+    await closed;
+    await opened;
+    const secondOverlay = document.querySelector(
+      "active-overlay"
+    );
+    const secondHeadline = secondOverlay.querySelector(
+      '[slot="header"]'
+    );
+    expect(secondOverlay, "second overlay").to.not.be.null;
+    expect(secondOverlay).to.not.equal(firstOverlay);
+    expect(firstOverlay.isConnected).to.be.false;
+    expect(secondOverlay.isConnected).to.be.true;
+    expect(secondHeadline.textContent).to.equal("Menu source: start");
+    closed = oneEvent(document, "sp-closed");
+    sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [width / 8, height / 8]
+        },
+        {
+          type: "click",
+          position: [width / 8, height / 8]
+        }
+      ]
     });
+    await closed;
+    await nextFrame();
   });
   it("does not open content off of the viewport", async () => {
-    before(async () => {
-      await setViewport({ width: 360, height: 640 });
-      await nextFrame();
-    });
-    after(async () => {
-      await setViewport({ width: 800, height: 600 });
-      await nextFrame();
-    });
     await fixture(html`
             ${virtualElement({
       ...virtualElement.args,
       offset: 6
     })}
         `);
+    await setViewport({ width: 360, height: 640 });
+    await nextFrame();
     const opened = oneEvent(document, "sp-opened");
     sendMouse({
       steps: [
@@ -616,15 +486,19 @@ describe('Overlay - type="modal", v2', () => {
       ]
     });
     await opened;
-    const firstMenu = document.querySelector("sp-menu");
-    expect(firstMenu).to.not.be.null;
-    expect(await isInteractive(firstMenu)).to.be.true;
+    const activeOverlay = document.querySelector(
+      "active-overlay"
+    );
+    expect(activeOverlay.placement).to.equal("right-start");
+    expect(activeOverlay.getAttribute("actual-placement")).to.equal(
+      "bottom"
+    );
     const closed = oneEvent(document, "sp-closed");
     sendKeys({
       press: "Escape"
     });
     await closed;
-    expect(await isInteractive(firstMenu)).to.be.false;
+    await nextFrame();
   });
   it("opens children in the modal stack through shadow roots", async () => {
     const el = await fixture(definedOverlayElement());
@@ -634,47 +508,51 @@ describe('Overlay - type="modal", v2', () => {
     let open = oneEvent(el, "sp-opened");
     trigger.click();
     await open;
-    expect(el.open).to.equal("click");
     const content = document.querySelector(
       "popover-content"
     );
     open = oneEvent(content, "sp-opened");
     content.button.click();
     await open;
-    expect(content.trigger.open).to.equal("click");
+    const activeOverlays = document.querySelectorAll("active-overlay");
+    activeOverlays.forEach((overlay) => {
+      expect(overlay.slot).to.equal("open");
+    });
     let close = oneEvent(content, "sp-closed");
     content.trigger.removeAttribute("open");
     await close;
-    expect(content.trigger.open).to.be.null;
     close = oneEvent(el, "sp-closed");
     el.removeAttribute("open");
     await close;
-    expect(el.open).to.be.null;
   });
 });
-describe("Overlay - timing, v2", () => {
+describe("Overlay - timing", () => {
   it("manages multiple modals in a row without preventing them from closing", async () => {
     const test = await fixture(html`
             <div>
-                <overlay-trigger id="test-1" placement="right">
+                <overlay-trigger>
                     <sp-button slot="trigger">Trigger 1</sp-button>
                     <sp-popover slot="hover-content">
                         <p>Hover contentent for "Trigger 1".</p>
                     </sp-popover>
                 </overlay-trigger>
-                <overlay-trigger id="test-2" placement="right">
+                <overlay-trigger>
                     <sp-button slot="trigger">Trigger 2</sp-button>
-                    <sp-popover slot="click-content">
-                        <p>Click contentent for "Trigger 2".</p>
-                    </sp-popover>
                     <sp-popover slot="hover-content">
                         <p>Hover contentent for "Trigger 2".</p>
                     </sp-popover>
+                    <sp-popover slot="click-content">
+                        <p>Click contentent for "Trigger 2".</p>
+                    </sp-popover>
                 </overlay-trigger>
             </div>
         `);
-    const overlayTrigger1 = test.querySelector("#test-1");
-    const overlayTrigger2 = test.querySelector("#test-2");
+    const overlayTrigger1 = test.querySelector(
+      "overlay-trigger:first-child"
+    );
+    const overlayTrigger2 = test.querySelector(
+      "overlay-trigger:last-child"
+    );
     const trigger1 = overlayTrigger1.querySelector(
       '[slot="trigger"]'
     );
@@ -687,13 +565,17 @@ describe("Overlay - timing, v2", () => {
       boundingRectTrigger1.left + boundingRectTrigger1.width / 2,
       boundingRectTrigger1.top + boundingRectTrigger1.height / 2
     ];
-    const outsideTriggers = [
-      boundingRectTrigger1.left + boundingRectTrigger1.width / 2,
-      300
+    const outsideTrigger1 = [
+      boundingRectTrigger1.left + boundingRectTrigger1.width * 2,
+      boundingRectTrigger1.top + boundingRectTrigger1.height * 2
     ];
     const trigger2Position = [
       boundingRectTrigger2.left + boundingRectTrigger2.width / 2,
-      boundingRectTrigger2.top + boundingRectTrigger2.height / 4
+      boundingRectTrigger2.top + boundingRectTrigger2.height / 2
+    ];
+    const outsideTrigger2 = [
+      boundingRectTrigger2.left + boundingRectTrigger2.width * 2,
+      boundingRectTrigger2.top + boundingRectTrigger2.height / 2
     ];
     await sendMouse({
       steps: [
@@ -709,7 +591,7 @@ describe("Overlay - timing, v2", () => {
       steps: [
         {
           type: "move",
-          position: outsideTriggers
+          position: outsideTrigger1
         }
       ]
     });
@@ -726,7 +608,7 @@ describe("Overlay - timing, v2", () => {
     await nextFrame();
     await nextFrame();
     const opened = oneEvent(trigger2, "sp-opened");
-    await sendMouse({
+    sendMouse({
       steps: [
         {
           type: "click",
@@ -735,23 +617,23 @@ describe("Overlay - timing, v2", () => {
       ]
     });
     await opened;
-    await nextFrame();
-    await nextFrame();
     expect(overlayTrigger1.hasAttribute("open")).to.be.false;
     expect(overlayTrigger2.hasAttribute("open")).to.be.true;
     expect(overlayTrigger2.getAttribute("open")).to.equal("click");
     const closed = oneEvent(overlayTrigger2, "sp-closed");
-    await sendMouse({
+    sendMouse({
       steps: [
         {
           type: "click",
-          position: outsideTriggers
+          position: outsideTrigger2
         }
       ]
     });
     await closed;
+    for (let i = 0; i < 3; i++)
+      await nextFrame();
     expect(overlayTrigger1.hasAttribute("open")).to.be.false;
-    expect(overlayTrigger2.hasAttribute("open")).to.be.false;
+    expect(overlayTrigger2.hasAttribute("open"), overlayTrigger2.open).to.be.false;
   });
 });
 //# sourceMappingURL=overlay.test.js.map