@spectrum-web-components/overlay 0.16.4 → 0.16.6-devmode.7

package/test/overlay-trigger-sync.test.js

@@ -1,45 +1,45 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import { isVisible } from '../../../test/testing-helpers.js';
-import { aTimeout, elementUpdated, expect, fixture, html, nextFrame, oneEvent, waitUntil, } from '@open-wc/testing';
-import '../sync/overlay-trigger.js';
-import { OverlayTrigger } from '../';
-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 { isVisible } from "../../../test/testing-helpers.js";
+import {
+  aTimeout,
+  elementUpdated,
+  expect,
+  fixture,
+  html,
+  nextFrame,
+  oneEvent,
+  waitUntil
+} from "@open-wc/testing";
+import "@spectrum-web-components/overlay/sync/overlay-trigger.js";
+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";
 function pressKey(code) {
-    const up = new KeyboardEvent('keyup', {
-        bubbles: true,
-        cancelable: true,
-        key: code,
-        code,
-    });
-    document.dispatchEvent(up);
+  const up = new KeyboardEvent("keyup", {
+    bubbles: true,
+    cancelable: true,
+    key: code,
+    code
+  });
+  document.dispatchEvent(up);
 }
-const pressEscape = () => pressKey('Escape');
-const pressSpace = () => pressKey('Space');
-describe('Overlay Trigger - sync', () => {
-    describe('open/close', () => {
-        let testDiv;
-        let innerTrigger;
-        let outerTrigger;
-        let innerButton;
-        let outerButton;
-        let innerClickContent;
-        let outerClickContent;
-        let hoverContent;
-        beforeEach(async () => {
-            testDiv = await fixture(html `
+const pressEscape = () => pressKey("Escape");
+const pressSpace = () => pressKey("Space");
+describe("Overlay Trigger - sync", () => {
+  describe("open/close", () => {
+    let testDiv;
+    let innerTrigger;
+    let outerTrigger;
+    let innerButton;
+    let outerButton;
+    let innerClickContent;
+    let outerClickContent;
+    let hoverContent;
+    beforeEach(async () => {
+      testDiv = await fixture(html`
                     <div>
                         <style>
                             body {
@@ -105,329 +105,307 @@ describe('Overlay Trigger - sync', () => {
                         </overlay-trigger>
                     </div>
                 `);
-            innerTrigger = testDiv.querySelector('#inner-trigger');
-            outerTrigger = testDiv.querySelector('#trigger');
-            innerButton = testDiv.querySelector('#inner-button');
-            outerButton = testDiv.querySelector('#outer-button');
-            innerClickContent = testDiv.querySelector('#inner-popover');
-            outerClickContent = testDiv.querySelector('#outer-popover');
-            hoverContent = testDiv.querySelector('#hover-content');
-        });
-        afterEach(async () => {
-            if (outerTrigger.open) {
-                const closed = oneEvent(outerTrigger, 'sp-closed');
-                outerTrigger.open = undefined;
-                await closed;
-            }
-            outerTrigger.removeAttribute('type');
-            if (innerTrigger.open) {
-                const closed = oneEvent(innerTrigger, 'sp-closed');
-                innerTrigger.open = undefined;
-                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(outerClickContent.parentElement).to.not.be.an.instanceOf(OverlayTrigger);
-            expect(isVisible(outerClickContent)).to.be.true;
-        });
-        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(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(isVisible(outerClickContent)).to.be.false;
-            expect(outerTrigger.disabled).to.be.true;
-        });
-        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(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(outerClickContent.parentElement).to.not.be.an.instanceOf(OverlayTrigger);
-            expect(isVisible(outerClickContent)).to.be.true;
-        });
-        ['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(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 () => {
-            expect(isVisible(outerClickContent), 'outer popover not visible').to
-                .be.false;
-            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(isVisible(hoverContent), 'hover popover still not visible')
-                .to.be.false;
-            outerButton.dispatchEvent(new Event('mouseenter', {
-                bubbles: true,
-                composed: true,
-            }));
-            await nextFrame();
-            expect(hoverContent.parentElement).to.be.instanceOf(OverlayTrigger);
-            expect(isVisible(outerClickContent), 'outer popover visible again')
-                .to.be.true;
-            expect(isVisible(hoverContent), 'hover popover not visible again')
-                .to.be.false;
-        });
-        it('does not open a popover when [disabled]', async () => {
-            const root = outerTrigger.shadowRoot
-                ? outerTrigger.shadowRoot
-                : outerTrigger;
-            const triggerZone = root.querySelector('#trigger');
-            expect(outerTrigger.disabled).to.be.false;
-            let open = oneEvent(outerTrigger, 'sp-opened');
-            outerButton.click();
-            await open;
-            expect(outerClickContent.parentElement).to.not.be.an.instanceOf(OverlayTrigger);
-            let closed = oneEvent(outerTrigger, 'sp-closed');
-            document.body.click();
-            await closed;
-            expect(outerClickContent.parentElement).to.be.an.instanceOf(OverlayTrigger);
-            outerTrigger.disabled = true;
-            await elementUpdated(outerTrigger);
-            expect(outerTrigger.disabled).to.be.true;
-            expect(outerTrigger.hasAttribute('disabled')).to.be.true;
-            // The overlay shouldn't open here.
-            outerButton.click();
-            await aTimeout(200);
-            expect(outerClickContent.parentElement).to.be.an.instanceOf(OverlayTrigger);
-            // The overlay shouldn't open here, either.
-            triggerZone.dispatchEvent(new Event('mouseenter'));
-            await aTimeout(200);
-            expect(outerClickContent.parentElement).to.be.an.instanceOf(OverlayTrigger);
-            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(outerClickContent.parentElement).to.not.be.an.instanceOf(OverlayTrigger);
-            closed = oneEvent(outerTrigger, 'sp-closed');
-            outerButton.click();
-            await closed;
-            expect(outerClickContent.parentElement).to.be.an.instanceOf(OverlayTrigger);
-        });
-        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(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(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 () => {
-            outerTrigger.type = 'modal';
-            innerTrigger.type = 'modal';
-            expect(isVisible(outerClickContent), 'outer popover starts closed')
-                .to.be.false;
-            expect(isVisible(innerClickContent), 'inner popover starts closed')
-                .to.be.false;
-            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(isVisible(innerClickContent), 'inner popover stays closed')
-                .to.be.false;
-            const innerOpen = oneEvent(innerButton, 'sp-opened');
-            innerButton.click();
-            await innerOpen;
-            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(document.activeElement === outerClickContent, 'outer popover recieved focus').to.be.true;
-        });
-        it('escape closes an open popover', async () => {
-            outerTrigger.type = 'modal';
-            innerTrigger.type = 'modal';
-            const outerOpen = oneEvent(outerButton, 'sp-opened');
-            outerButton.click();
-            await outerOpen;
-            expect(outerClickContent.parentElement instanceof OverlayTrigger, 'outer content stolen and reparented').to.be.false;
-            const innerOpen = oneEvent(innerButton, 'sp-opened');
-            innerButton.click();
-            await innerOpen;
-            expect(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(isVisible(outerClickContent)).to.be.true;
-            expect(isVisible(innerClickContent)).to.be.true;
-            const innerClose = oneEvent(innerButton, 'sp-closed');
-            pressEscape();
-            await innerClose;
-            expect(innerClickContent.parentElement instanceof OverlayTrigger, 'inner content returned').to.be.true;
-            expect(isVisible(outerClickContent)).to.be.true;
-            expect(isVisible(innerClickContent)).to.be.false;
-            const outerClose = oneEvent(outerButton, 'sp-closed');
-            pressEscape();
-            await outerClose;
-            expect(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 () => {
-            outerTrigger.type = 'modal';
-            innerTrigger.type = 'modal';
-            const outerOpen = oneEvent(outerButton, 'sp-opened');
-            outerButton.click();
-            await outerOpen;
-            expect(outerClickContent.parentElement instanceof OverlayTrigger, 'outer content stolen and reparented').to.be.false;
-            const innerOpen = oneEvent(innerButton, 'sp-opened');
-            innerButton.click();
-            await innerOpen;
-            expect(innerClickContent.parentElement instanceof OverlayTrigger, 'inner content stolen and reparented').to.be.false;
-            expect(isVisible(outerClickContent)).to.be.true;
-            expect(isVisible(innerClickContent)).to.be.true;
-            // Test that clicking in the overlay content does not close the overlay
-            // 200ms is slightly more than the overlay animation fade out time (130ms)
-            innerClickContent.click();
-            await aTimeout(200);
-            expect(isVisible(outerClickContent)).to.be.true;
-            expect(isVisible(innerClickContent)).to.be.true;
-            const innerClose = oneEvent(innerButton, 'sp-closed');
-            document.body.click();
-            await innerClose;
-            expect(innerClickContent.parentElement instanceof OverlayTrigger, 'inner content returned').to.be.true;
-            expect(isVisible(outerClickContent)).to.be.true;
-            expect(isVisible(innerClickContent)).to.be.false;
-            const outerClose = oneEvent(outerButton, 'sp-closed');
-            document.body.click();
-            await outerClose;
-            expect(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 () => {
-            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(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(hoverContent.parentElement).to.be.instanceOf(OverlayTrigger);
-            expect(isVisible(hoverContent)).to.be.false;
-        });
-        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 () => {
-            const opened = oneEvent(outerButton, 'sp-opened');
-            outerButton.click();
-            const openedEvent = await opened;
-            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(outerClickContent.parentElement).to.be.instanceOf(OverlayTrigger);
-            expect(closedEvent.detail.interaction).to.equal('click');
-            expect(isVisible(outerClickContent)).to.be.false;
-        });
+      innerTrigger = testDiv.querySelector("#inner-trigger");
+      outerTrigger = testDiv.querySelector("#trigger");
+      innerButton = testDiv.querySelector("#inner-button");
+      outerButton = testDiv.querySelector("#outer-button");
+      innerClickContent = testDiv.querySelector("#inner-popover");
+      outerClickContent = testDiv.querySelector("#outer-popover");
+      hoverContent = testDiv.querySelector("#hover-content");
+    });
+    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(outerClickContent.parentElement).to.not.be.an.instanceOf(OverlayTrigger);
+      expect(isVisible(outerClickContent)).to.be.true;
+    });
+    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(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(isVisible(outerClickContent)).to.be.false;
+      expect(outerTrigger.disabled).to.be.true;
+    });
+    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(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(outerClickContent.parentElement).to.not.be.an.instanceOf(OverlayTrigger);
+      expect(isVisible(outerClickContent)).to.be.true;
+    });
+    ["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(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 () => {
+      expect(isVisible(outerClickContent), "outer popover not visible").to.be.false;
+      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(isVisible(hoverContent), "hover popover still not visible").to.be.false;
+      outerButton.dispatchEvent(new Event("mouseenter", {
+        bubbles: true,
+        composed: true
+      }));
+      await nextFrame();
+      expect(hoverContent.parentElement).to.be.instanceOf(OverlayTrigger);
+      expect(isVisible(outerClickContent), "outer popover visible again").to.be.true;
+      expect(isVisible(hoverContent), "hover popover not visible again").to.be.false;
     });
-    describe('System interactions', () => {
-        afterEach(async () => {
-            const triggers = document.querySelectorAll('overlay-trigger');
-            const closes = [];
-            triggers.forEach((trigger) => {
-                if (trigger.open) {
-                    const close = oneEvent(trigger, 'sp-closed');
-                    trigger.open = undefined;
-                    closes.push(close);
-                }
-            });
-            await Promise.all(closes);
-        });
-        it('acquires a `color` and `size` from `sp-theme`', async () => {
-            const el = await fixture(html `
+    it("does not open a popover when [disabled]", async () => {
+      const root = outerTrigger.shadowRoot ? outerTrigger.shadowRoot : outerTrigger;
+      const triggerZone = root.querySelector("#trigger");
+      expect(outerTrigger.disabled).to.be.false;
+      let open = oneEvent(outerTrigger, "sp-opened");
+      outerButton.click();
+      await open;
+      expect(outerClickContent.parentElement).to.not.be.an.instanceOf(OverlayTrigger);
+      let closed = oneEvent(outerTrigger, "sp-closed");
+      document.body.click();
+      await closed;
+      expect(outerClickContent.parentElement).to.be.an.instanceOf(OverlayTrigger);
+      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(outerClickContent.parentElement).to.be.an.instanceOf(OverlayTrigger);
+      triggerZone.dispatchEvent(new Event("mouseenter"));
+      await aTimeout(200);
+      expect(outerClickContent.parentElement).to.be.an.instanceOf(OverlayTrigger);
+      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(outerClickContent.parentElement).to.not.be.an.instanceOf(OverlayTrigger);
+      closed = oneEvent(outerTrigger, "sp-closed");
+      outerButton.click();
+      await closed;
+      expect(outerClickContent.parentElement).to.be.an.instanceOf(OverlayTrigger);
+    });
+    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(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(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 () => {
+      outerTrigger.type = "modal";
+      innerTrigger.type = "modal";
+      expect(isVisible(outerClickContent), "outer popover starts closed").to.be.false;
+      expect(isVisible(innerClickContent), "inner popover starts closed").to.be.false;
+      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(isVisible(innerClickContent), "inner popover stays closed").to.be.false;
+      const innerOpen = oneEvent(innerButton, "sp-opened");
+      innerButton.click();
+      await innerOpen;
+      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(document.activeElement === outerClickContent, "outer popover recieved focus").to.be.true;
+    });
+    it("escape closes an open popover", async () => {
+      outerTrigger.type = "modal";
+      innerTrigger.type = "modal";
+      const outerOpen = oneEvent(outerButton, "sp-opened");
+      outerButton.click();
+      await outerOpen;
+      expect(outerClickContent.parentElement instanceof OverlayTrigger, "outer content stolen and reparented").to.be.false;
+      const innerOpen = oneEvent(innerButton, "sp-opened");
+      innerButton.click();
+      await innerOpen;
+      expect(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(isVisible(outerClickContent)).to.be.true;
+      expect(isVisible(innerClickContent)).to.be.true;
+      const innerClose = oneEvent(innerButton, "sp-closed");
+      pressEscape();
+      await innerClose;
+      expect(innerClickContent.parentElement instanceof OverlayTrigger, "inner content returned").to.be.true;
+      expect(isVisible(outerClickContent)).to.be.true;
+      expect(isVisible(innerClickContent)).to.be.false;
+      const outerClose = oneEvent(outerButton, "sp-closed");
+      pressEscape();
+      await outerClose;
+      expect(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 () => {
+      outerTrigger.type = "modal";
+      innerTrigger.type = "modal";
+      const outerOpen = oneEvent(outerButton, "sp-opened");
+      outerButton.click();
+      await outerOpen;
+      expect(outerClickContent.parentElement instanceof OverlayTrigger, "outer content stolen and reparented").to.be.false;
+      const innerOpen = oneEvent(innerButton, "sp-opened");
+      innerButton.click();
+      await innerOpen;
+      expect(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(isVisible(outerClickContent)).to.be.true;
+      expect(isVisible(innerClickContent)).to.be.true;
+      const innerClose = oneEvent(innerButton, "sp-closed");
+      document.body.click();
+      await innerClose;
+      expect(innerClickContent.parentElement instanceof OverlayTrigger, "inner content returned").to.be.true;
+      expect(isVisible(outerClickContent)).to.be.true;
+      expect(isVisible(innerClickContent)).to.be.false;
+      const outerClose = oneEvent(outerButton, "sp-closed");
+      document.body.click();
+      await outerClose;
+      expect(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 () => {
+      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(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(hoverContent.parentElement).to.be.instanceOf(OverlayTrigger);
+      expect(isVisible(hoverContent)).to.be.false;
+    });
+    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 () => {
+      const opened = oneEvent(outerButton, "sp-opened");
+      outerButton.click();
+      const openedEvent = await opened;
+      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(outerClickContent.parentElement).to.be.instanceOf(OverlayTrigger);
+      expect(closedEvent.detail.interaction).to.equal("click");
+      expect(isVisible(outerClickContent)).to.be.false;
+    });
+  });
+  describe("System interactions", () => {
+    afterEach(async () => {
+      const triggers = document.querySelectorAll("overlay-trigger");
+      const closes = [];
+      triggers.forEach((trigger) => {
+        if (trigger.open) {
+          const close = oneEvent(trigger, "sp-closed");
+          trigger.open = void 0;
+          closes.push(close);
+        }
+      });
+      await Promise.all(closes);
+    });
+    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">
@@ -452,21 +430,21 @@ describe('Overlay Trigger - sync', () => {
                     </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 `
+      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
@@ -506,50 +484,50 @@ describe('Overlay Trigger - sync', () => {
                     </sp-popover>
                 </overlay-trigger>
             `);
-            const overlayTriggers = [...el.querySelectorAll('overlay-trigger')];
-            let activeOverlays = [
-                ...document.querySelectorAll('active-overlay'),
-            ];
-            const triggers = [
-                ...el.querySelectorAll('sp-button[slot="trigger"]'),
-            ];
-            expect(activeOverlays.length, 'no previous overlays').to.equal(0);
-            let open = oneEvent(triggers[0], 'sp-opened');
-            (_a = triggers[0]) === null || _a === void 0 ? void 0 : _a.click();
-            await open;
-            await elementUpdated(overlayTriggers[0]);
-            activeOverlays = [...document.querySelectorAll('active-overlay')];
-            expect(activeOverlays.length, 'The first `active-overlay` element has been added.').to.equal(1);
-            expect(activeOverlays[0].slot, 'first overlay, first time').to.equal('open');
-            open = oneEvent(triggers[1], 'sp-opened');
-            (_b = triggers[1]) === null || _b === void 0 ? void 0 : _b.click();
-            await open;
-            await elementUpdated(overlayTriggers[1]);
-            activeOverlays = [...document.querySelectorAll('active-overlay')];
-            expect(activeOverlays.length, 'The second `active-overlay` element has been added.').to.equal(2);
-            expect(activeOverlays[0].slot, 'first overlay, second time').to.equal('open');
-            expect(activeOverlays[1].slot, 'second overlay, second time').to.equal('open');
-            open = oneEvent(triggers[2], 'sp-opened');
-            (_c = triggers[2]) === null || _c === void 0 ? void 0 : _c.click();
-            await open;
-            await elementUpdated(overlayTriggers[2]);
-            activeOverlays = [...document.querySelectorAll('active-overlay')];
-            expect(activeOverlays.length, 'The third `active-overlay` element has been added.').to.equal(3);
-            expect(activeOverlays[0].hasAttribute('slot'), 'first overlay, third time').to.be.false;
-            expect(activeOverlays[1].hasAttribute('slot'), 'second overlay, third time').to.be.false;
-            expect(activeOverlays[2].slot, 'third overlay, third time').to.equal('open');
-            await nextFrame();
-            const closed = oneEvent(triggers[2], 'sp-closed');
-            document.body.click();
-            await closed;
-            await elementUpdated(overlayTriggers[2]);
-            activeOverlays = [...document.querySelectorAll('active-overlay')];
-            expect(activeOverlays.length, 'The third `active-overlay` element has been removed.').to.equal(2);
-            await waitUntil(() => {
-                return activeOverlays[0].slot === 'open';
-            }, 'first overlay, last time');
-            expect(activeOverlays[1].slot, 'second overlay, last time').to.equal('open');
-        });
+      const overlayTriggers = [...el.querySelectorAll("overlay-trigger")];
+      let activeOverlays = [
+        ...document.querySelectorAll("active-overlay")
+      ];
+      const triggers = [
+        ...el.querySelectorAll('sp-button[slot="trigger"]')
+      ];
+      expect(activeOverlays.length, "no previous overlays").to.equal(0);
+      let open = oneEvent(triggers[0], "sp-opened");
+      (_a = triggers[0]) == null ? void 0 : _a.click();
+      await open;
+      await elementUpdated(overlayTriggers[0]);
+      activeOverlays = [...document.querySelectorAll("active-overlay")];
+      expect(activeOverlays.length, "The first `active-overlay` element has been added.").to.equal(1);
+      expect(activeOverlays[0].slot, "first overlay, first time").to.equal("open");
+      open = oneEvent(triggers[1], "sp-opened");
+      (_b = triggers[1]) == null ? void 0 : _b.click();
+      await open;
+      await elementUpdated(overlayTriggers[1]);
+      activeOverlays = [...document.querySelectorAll("active-overlay")];
+      expect(activeOverlays.length, "The second `active-overlay` element has been added.").to.equal(2);
+      expect(activeOverlays[0].slot, "first overlay, second time").to.equal("open");
+      expect(activeOverlays[1].slot, "second overlay, second time").to.equal("open");
+      open = oneEvent(triggers[2], "sp-opened");
+      (_c = triggers[2]) == null ? void 0 : _c.click();
+      await open;
+      await elementUpdated(overlayTriggers[2]);
+      activeOverlays = [...document.querySelectorAll("active-overlay")];
+      expect(activeOverlays.length, "The third `active-overlay` element has been added.").to.equal(3);
+      expect(activeOverlays[0].hasAttribute("slot"), "first overlay, third time").to.be.false;
+      expect(activeOverlays[1].hasAttribute("slot"), "second overlay, third time").to.be.false;
+      expect(activeOverlays[2].slot, "third overlay, third time").to.equal("open");
+      await nextFrame();
+      const closed = oneEvent(triggers[2], "sp-closed");
+      document.body.click();
+      await closed;
+      await elementUpdated(overlayTriggers[2]);
+      activeOverlays = [...document.querySelectorAll("active-overlay")];
+      expect(activeOverlays.length, "The third `active-overlay` element has been removed.").to.equal(2);
+      await waitUntil(() => {
+        return activeOverlays[0].slot === "open";
+      }, "first overlay, last time");
+      expect(activeOverlays[1].slot, "second overlay, last time").to.equal("open");
     });
+  });
 });
-//# sourceMappingURL=overlay-trigger-sync.test.js.map
+//# sourceMappingURL=overlay-trigger-sync.test.js.map