@spectrum-web-components/overlay 0.18.0 → 0.18.2

package/test/overlay-trigger.test.js

@@ -1,4 +1,49 @@
-import{isVisible as n}from"../../../test/testing-helpers.js";import{aTimeout as g,elementUpdated as y,expect as e,fixture as f,html as h,nextFrame as w,oneEvent as a,waitUntil as k}from"@open-wc/testing";import"@spectrum-web-components/overlay/overlay-trigger.js";import{OverlayTrigger as i}from"@spectrum-web-components/overlay";import"@spectrum-web-components/button/sp-button.js";import"@spectrum-web-components/popover/sp-popover.js";import{Popover as S}from"@spectrum-web-components/popover";import"@spectrum-web-components/theme/sp-theme.js";function O(v){const d=new KeyboardEvent("keyup",{bubbles:!0,cancelable:!0,key:v,code:v});document.dispatchEvent(d)}const E=()=>O("Escape"),x=()=>O("Space");describe("Overlay Trigger",()=>{describe("open/close",()=>{let v,d,t,l,r,c,o,u;beforeEach(async()=>{v=await f(h`
+"use strict";
+import { escapeEvent, isVisible } from "../../../test/testing-helpers.js";
+import {
+  aTimeout,
+  elementUpdated,
+  expect,
+  fixture,
+  html,
+  nextFrame,
+  oneEvent,
+  waitUntil
+} from "@open-wc/testing";
+import "@spectrum-web-components/overlay/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 pressEscape = () => {
+  document.dispatchEvent(escapeEvent());
+};
+const pressSpace = () => pressKey("Space");
+describe("Overlay Trigger", () => {
+  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 {
@@ -63,7 +108,398 @@ import{isVisible as n}from"../../../test/testing-helpers.js";import{aTimeout as
                             </div>
                         </overlay-trigger>
                     </div>
-                `),d=v.querySelector("#inner-trigger"),t=v.querySelector("#trigger"),l=v.querySelector("#inner-button"),r=v.querySelector("#outer-button"),c=v.querySelector("#inner-popover"),o=v.querySelector("#outer-popover"),u=v.querySelector("#hover-content")}),afterEach(async()=>{if(t.open){const s=a(t,"sp-closed");t.open=void 0,await s}if(t.removeAttribute("type"),d.open){const s=a(d,"sp-closed");d.open=void 0,await s}d.removeAttribute("type")}),it("loads",async()=>{if(!(o instanceof S))throw new Error("popover is not an instance of Popover");e(o).to.exist,e(o.shadowRoot).to.exist,e(o.parentElement).to.be.an.instanceOf(i)}),it("opens a popover",async()=>{e(n(o)).to.be.false,e(r).to.exist;const s=a(t,"sp-opened");r.click(),await s,e(o.parentElement).to.not.be.an.instanceOf(i),e(n(o)).to.be.true}),it("[disabled] closes a popover",async()=>{e(n(o)).to.be.false,e(t.disabled).to.be.false,e(r).to.exist;const s=a(r,"sp-opened");r.click(),await s,e(o.parentElement).to.not.be.an.instanceOf(i),e(n(o)).to.be.true;const p=a(r,"sp-closed");t.disabled=!0,await p,e(n(o)).to.be.false,e(t.disabled).to.be.true}),it("resizes a popover",async()=>{e(n(o)).to.be.false,e(r).to.exist;const s=a(t,"sp-opened");r.click(),await s,e(o.parentElement).to.not.be.an.instanceOf(i),e(n(o)).to.be.true,window.dispatchEvent(new Event("resize")),window.dispatchEvent(new Event("resize")),e(o.parentElement).to.not.be.an.instanceOf(i),e(n(o)).to.be.true}),["modal","replace","inline"].map(s=>{it(`opens a popover - [type="${s}"]`,async()=>{t.type=s,await y(t),e(n(o)).to.be.false,e(r).to.exist;const p=a(t,"sp-opened");r.click(),await p,e(o.parentElement).to.not.be.an.instanceOf(i),e(n(o)).to.be.true})}),it("does not open a hover popover when a click popover is open",async()=>{e(n(o),"outer popover not visible").to.be.false,e(n(u),"hover popover not visible").to.be.false,e(r).to.exist;const s=a(t,"sp-opened");r.click(),await s,e(o.parentElement).to.not.be.an.instanceOf(i),e(n(o),"outer popover visible").to.be.true,e(n(u),"hover popover still not visible").to.be.false,r.dispatchEvent(new Event("mouseenter",{bubbles:!0,composed:!0})),await w(),e(u.parentElement).to.be.instanceOf(i),e(n(o),"outer popover visible again").to.be.true,e(n(u),"hover popover not visible again").to.be.false}),it("does not open a popover when [disabled]",async()=>{const p=(t.shadowRoot?t.shadowRoot:t).querySelector("#trigger");e(t.disabled).to.be.false;let b=a(t,"sp-opened");r.click(),await b,e(o.parentElement).to.not.be.an.instanceOf(i);let m=a(t,"sp-closed");document.body.click(),await m,e(o.parentElement).to.be.an.instanceOf(i),t.disabled=!0,await y(t),e(t.disabled).to.be.true,e(t.hasAttribute("disabled")).to.be.true,r.click(),await g(200),e(o.parentElement).to.be.an.instanceOf(i),p.dispatchEvent(new Event("mouseenter")),await g(200),e(o.parentElement).to.be.an.instanceOf(i),t.disabled=!1,await y(t),e(t.disabled).to.be.false,e(t.hasAttribute("disabled")).to.be.false,b=a(t,"sp-opened"),r.click(),await b,e(o.parentElement).to.not.be.an.instanceOf(i),m=a(t,"sp-closed"),r.click(),await m,e(o.parentElement).to.be.an.instanceOf(i)}),it("opens a nested popover",async()=>{e(n(o)).to.be.false,e(n(c)).to.be.false,e(r).to.exist;let s=a(t,"sp-opened");r.click(),await s,e(o.parentElement).to.not.be.an.instanceOf(i),e(n(o)).to.be.true,e(n(c)).to.be.false,s=a(d,"sp-opened"),l.click(),await s,e(c.parentElement).to.not.be.instanceOf(i),e(n(o)).to.be.true,e(n(c)).to.be.true}),it('focus previous "modal" when closing nested "modal"',async()=>{t.type="modal",d.type="modal",e(n(o),"outer popover starts closed").to.be.false,e(n(c),"inner popover starts closed").to.be.false,e(r).to.exist;const s=a(r,"sp-opened");r.click(),await s,e(o.parentElement).to.not.be.an.instanceOf(i),e(n(o),"outer popover opens").to.be.true,e(n(c),"inner popover stays closed").to.be.false;const p=a(l,"sp-opened");l.click(),await p,e(c.parentElement).to.not.be.instanceOf(i),e(n(o),"outer popover stays open").to.be.true,e(n(c),"inner popover opens").to.be.true;const b=a(l,"sp-closed");E(),await b,e(c.parentElement).to.be.instanceOf(i),e(document.activeElement===o,"outer popover recieved focus").to.be.true}),it("escape closes an open popover",async()=>{t.type="modal",d.type="modal";const s=a(r,"sp-opened");r.click(),await s,e(o.parentElement instanceof i,"outer content stolen and reparented").to.be.false;const p=a(l,"sp-opened");l.click(),await p,e(c.parentElement instanceof i,"inner content stolen and reparented").to.be.false,e(n(o)).to.be.true,e(n(c)).to.be.true,x(),e(n(o)).to.be.true,e(n(c)).to.be.true;const b=a(l,"sp-closed");E(),await b,e(c.parentElement instanceof i,"inner content returned").to.be.true,e(n(o)).to.be.true,e(n(c)).to.be.false;const m=a(r,"sp-closed");E(),await m,e(o.parentElement instanceof i,"outer content returned").to.be.true,e(n(o)).to.be.false,e(n(c)).to.be.false}),it("click closes an open popover",async()=>{t.type="modal",d.type="modal";const s=a(r,"sp-opened");r.click(),await s,e(o.parentElement instanceof i,"outer content stolen and reparented").to.be.false;const p=a(l,"sp-opened");l.click(),await p,e(c.parentElement instanceof i,"inner content stolen and reparented").to.be.false,e(n(o)).to.be.true,e(n(c)).to.be.true,c.click(),await g(200),e(n(o)).to.be.true,e(n(c)).to.be.true;const b=a(l,"sp-closed");document.body.click(),await b,e(c.parentElement instanceof i,"inner content returned").to.be.true,e(n(o)).to.be.true,e(n(c)).to.be.false;const m=a(r,"sp-closed");document.body.click(),await m,e(o.parentElement instanceof i,"outer content returned").to.be.true,e(n(o)).to.be.false,e(n(c)).to.be.false}),it("opens a hover popover",async()=>{const p=(t.shadowRoot?t.shadowRoot:t).querySelector("#trigger");if(e(p).to.exist,!p)return;e(r).to.exist,e(u).to.exist,e(n(u)).to.be.false;const b=a(t,"sp-opened"),m=new MouseEvent("mouseenter");p.dispatchEvent(m),await b,e(u.parentElement).to.not.be.instanceOf(i),e(n(u)).to.be.true;const q=a(t,"sp-closed"),T=new MouseEvent("mouseleave");p.dispatchEvent(T),await q,e(u.parentElement).to.be.instanceOf(i),e(n(u)).to.be.false}),it("closes a hover popover",async()=>{const p=(t.shadowRoot?t.shadowRoot:t).querySelector("#trigger");if(e(p).to.exist,!p)return;e(r).to.exist,e(u).to.exist,e(n(u),"hoverContent should not be visible").to.be.false;const b=new MouseEvent("mouseenter"),m=new MouseEvent("mouseleave");p.dispatchEvent(b),await w(),p.dispatchEvent(m),await k(()=>n(u)===!1,"hoverContent should still not be visible")}),it("dispatches events on open/close",async()=>{const s=a(r,"sp-opened");r.click();const p=await s;e(n(o)).to.be.true,e(t.open).to.equal("click"),e(p.detail.interaction).to.equal("click");const b=a(r,"sp-closed");document.body.click();const m=await b;e(o.parentElement).to.be.instanceOf(i),e(m.detail.interaction).to.equal("click"),e(n(o)).to.be.false})}),describe("System interactions",()=>{afterEach(async()=>{const v=document.querySelectorAll("overlay-trigger"),d=[];v.forEach(t=>{if(t.open){const l=a(t,"sp-closed");t.open=void 0,d.push(l)}}),await Promise.all(d)}),it("acquires a `color` and `size` from `sp-theme`",async()=>{const v=await f(h`
+                `
+      );
+      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;
+    });
+    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 === innerButton,
+        "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">
@@ -87,7 +523,24 @@ import{isVisible as n}from"../../../test/testing-helpers.js";import{aTimeout as
                         </overlay-trigger>
                     </sp-theme>
                 </sp-theme>
-            `);await y(v),e(document.querySelector("active-overlay")).to.be.null;const d=v.querySelector("sp-button"),t=a(d,"sp-opened");d.click(),await t,await y(v);const l=document.querySelector("active-overlay");e(l).to.exist,e(l.theme.color).to.not.equal("dark"),e(l.theme.color).to.equal("light")}),it('manages multiple layers of `type="modal"',async()=>{var o,u,s;const v=await f(h`
+            `);
+      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
@@ -126,5 +579,84 @@ import{isVisible as n}from"../../../test/testing-helpers.js";import{aTimeout as
                         </overlay-trigger>
                     </sp-popover>
                 </overlay-trigger>
-            `),d=[...v.querySelectorAll("overlay-trigger")];let t=[...document.querySelectorAll("active-overlay")];const l=[...v.querySelectorAll('sp-button[slot="trigger"]')];e(t.length,"no previous overlays").to.equal(0);let r=a(l[0],"sp-opened");(o=l[0])==null||o.click(),await r,await y(d[0]),t=[...document.querySelectorAll("active-overlay")],e(t.length,"The first `active-overlay` element has been added.").to.equal(1),e(t[0].slot,"first overlay, first time").to.equal("open"),r=a(l[1],"sp-opened"),(u=l[1])==null||u.click(),await r,await y(d[1]),t=[...document.querySelectorAll("active-overlay")],e(t.length,"The second `active-overlay` element has been added.").to.equal(2),e(t[0].slot,"first overlay, second time").to.equal("open"),e(t[1].slot,"second overlay, second time").to.equal("open"),r=a(l[2],"sp-opened"),(s=l[2])==null||s.click(),await r,await y(d[2]),t=[...document.querySelectorAll("active-overlay")],e(t.length,"The third `active-overlay` element has been added.").to.equal(3),e(t[0].hasAttribute("slot"),"first overlay, third time").to.be.false,e(t[1].hasAttribute("slot"),"second overlay, third time").to.be.false,e(t[2].slot,"third overlay, third time").to.equal("open"),await w();const c=a(l[2],"sp-closed");document.body.click(),await c,await y(d[2]),t=[...document.querySelectorAll("active-overlay")],e(t.length,"The third `active-overlay` element has been removed.").to.equal(2),await k(()=>t[0].slot==="open","first overlay, last time"),e(t[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.test.js.map