@spectrum-web-components/overlay 0.32.0 → 0.32.1-overlay.41

package/stories/overlay.stories.js

@@ -3,20 +3,22 @@ import { html } from "@spectrum-web-components/base";
 import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
 import {
   openOverlay,
-  Overlay,
   VirtualTrigger
 } from "@spectrum-web-components/overlay";
 import "@spectrum-web-components/action-button/sp-action-button.js";
 import "@spectrum-web-components/action-group/sp-action-group.js";
 import "@spectrum-web-components/button/sp-button.js";
+import "@spectrum-web-components/dialog/sp-dialog.js";
 import "@spectrum-web-components/dialog/sp-dialog-wrapper.js";
 import "@spectrum-web-components/field-label/sp-field-label.js";
 import "@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js";
 import "@spectrum-web-components/icons-workflow/icons/sp-icon-open-in.js";
 import "@spectrum-web-components/overlay/overlay-trigger.js";
 import "@spectrum-web-components/picker/sp-picker.js";
+import "@spectrum-web-components/overlay/sp-overlay.js";
 import "@spectrum-web-components/menu/sp-menu.js";
 import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/menu/sp-menu-group.js";
 import "@spectrum-web-components/menu/sp-menu-divider.js";
 import "@spectrum-web-components/popover/sp-popover.js";
 import "@spectrum-web-components/slider/sp-slider.js";
@@ -128,33 +130,33 @@ const template = ({
             type=${ifDefined(type)}
         >
             <sp-button variant="primary" slot="trigger">Show Popover</sp-button>
-            <sp-popover slot="click-content" placement="${placement}" tip>
+            <sp-popover
+                slot="click-content"
+                placement="${placement}"
+                tip
+            >
                 <sp-dialog no-divider>
-                    <div class="options-popover-content">
-                        <sp-slider
-                            value="5"
-                            step="0.5"
-                            min="0"
-                            max="20"
-                            label="Awesomeness"
-                        ></sp-slider>
-                        <div id="styled-div">
-                            The background of this div should be blue
-                        </div>
-                        <overlay-trigger id="inner-trigger" placement="bottom">
-                            <sp-button slot="trigger">Press Me</sp-button>
-                            <sp-popover
-                                slot="click-content"
-                                placement="bottom"
-                                tip
-                                open
-                            >
-                                <sp-dialog size="s" no-divider>
-                                    <div class="options-popover-content">
-                                        Another Popover
-                                    </div>
-                                </sp-dialog>
-                            </sp-popover>
+                    <sp-slider
+                        value="5"
+                        step="0.5"
+                        min="0"
+                        max="20"
+                        label="Awesomeness"
+                    ></sp-slider>
+                    <div id="styled-div">
+                        The background of this div should be blue
+                    </div>
+                    <overlay-trigger id="inner-trigger" placement="bottom">
+                        <sp-button slot="trigger">Press Me</sp-button>
+                        <sp-popover
+                            slot="click-content"
+                            placement="bottom"
+                            tip
+                        >
+                            <sp-dialog size="s" no-divder>
+                                Another Popover
+                            </sp-dialog>
+                        </sp-popover>
 
                             <sp-tooltip
                                 slot="hover-content"
@@ -177,18 +179,148 @@ const template = ({
         </overlay-trigger>
     `;
 };
+const extraText = html`
+    <p>This is some text.</p>
+    <p>This is some text.</p>
+    <p>
+        This is a
+        <a href="#anchor">link</a>
+        .
+    </p>
+`;
+function nextFrame() {
+  return new Promise((res) => requestAnimationFrame(() => res()));
+}
 export const Default = (args) => template(args);
-export const openHoverContent = (args) => template({
-  ...args,
-  open: "hover"
-});
-export const openClickContent = (args) => template({
-  ...args,
-  open: "click"
-});
+export const accordion = () => {
+  return html`
+        <overlay-trigger type="modal" placement="right">
+            <sp-button variant="primary" slot="trigger">
+                Open overlay w/ accordion
+            </sp-button>
+            <sp-popover
+                slot="click-content"
+                style="overflow-y: scroll;position: static;"
+            >
+                <sp-dialog size="s" no-divder>
+                    <sp-accordion allow-multiple>
+                        <sp-accordion-item label="Some things">
+                            <p>
+                                Thing
+                                <br />
+                                <br />
+                                <br />
+                                <br />
+                                <br />
+                                <br />
+                                <br />
+                                more things
+                            </p>
+                        </sp-accordion-item>
+                        <sp-accordion-item label="Other things">
+                            <p>
+                                Thing
+                                <br />
+                                <br />
+                                <br />
+                                <br />
+                                <br />
+                                <br />
+                                <br />
+                                more things
+                            </p>
+                        </sp-accordion-item>
+                        <sp-accordion-item label="More things">
+                            <p>
+                                Thing
+                                <br />
+                                <br />
+                                <br />
+                                <br />
+                                <br />
+                                <br />
+                                <br />
+                                more things
+                            </p>
+                        </sp-accordion-item>
+                        <sp-accordion-item label="Additional things">
+                            <p>
+                                Thing
+                                <br />
+                                <br />
+                                <br />
+                                <br />
+                                <br />
+                                <br />
+                                <br />
+                                more things
+                            </p>
+                        </sp-accordion-item>
+                    </sp-accordion>
+                </sp-dialog>
+            </sp-popover>
+        </overlay-trigger>
+    `;
+};
+accordion.swc_vrt = {
+  skip: true
+};
+export const clickAndHoverTargets = () => {
+  return html`
+        <div>
+            ${storyStyles}
+            <style>
+                .friendly-target {
+                    padding: 4px;
+                    margin: 6px;
+                    border: 2px solid black;
+                    border-radius: 6px;
+                    cursor: default;
+                }
+            </style>
+            <overlay-trigger placement="right">
+                <div class="friendly-target" slot="trigger" tabindex="0">
+                    Click me
+                </div>
+                <sp-tooltip slot="click-content" tip="right">
+                    Ok, now hover the other trigger
+                </sp-tooltip>
+            </overlay-trigger>
+            <overlay-trigger placement="left">
+                <div class="friendly-target" slot="trigger" tabindex="0">
+                    Then hover me
+                </div>
+                <sp-tooltip slot="hover-content" tip="right">
+                    Now click my trigger -- I should stay open, but the other
+                    overlay should close
+                </sp-tooltip>
+            </overlay-trigger>
+        </div>
+    `;
+};
+clickAndHoverTargets.swc_vrt = {
+  skip: true
+};
 class ScrollForcer extends HTMLElement {
   constructor() {
     super();
+    this.doScroll = async () => {
+      var _a;
+      (_a = this.previousElementSibling) == null ? void 0 : _a.addEventListener(
+        "sp-opened",
+        this.doScroll
+      );
+      await nextFrame();
+      await nextFrame();
+      await nextFrame();
+      await nextFrame();
+      if (document.scrollingElement) {
+        document.scrollingElement.scrollTop = 100;
+      }
+      await nextFrame();
+      await nextFrame();
+      this.ready(true);
+    };
     this.readyPromise = Promise.resolve(false);
     this.readyPromise = new Promise((res) => {
       this.ready = res;
@@ -196,28 +328,16 @@ class ScrollForcer extends HTMLElement {
     this.setup();
   }
   async setup() {
-    var _a;
+    var _a, _b;
     await nextFrame();
     await nextFrame();
     (_a = this.previousElementSibling) == null ? void 0 : _a.addEventListener(
       "sp-opened",
-      () => {
-        this.doScroll();
-      },
-      { once: true }
+      this.doScroll
     );
-  }
-  async doScroll() {
-    await nextFrame();
-    await nextFrame();
-    await nextFrame();
-    await nextFrame();
-    if (document.scrollingElement) {
-      document.scrollingElement.scrollTop = 100;
-    }
     await nextFrame();
     await nextFrame();
-    this.ready(true);
+    ((_b = this.previousElementSibling) == null ? void 0 : _b.lastElementChild).open = "click";
   }
   get updateComplete() {
     return this.readyPromise;
@@ -227,8 +347,7 @@ customElements.define("scroll-forcer", ScrollForcer);
 export const clickContentClosedOnScroll = (args) => html`
     <div style="margin: 50vh 0 100vh;">
         ${template({
-  ...args,
-  open: "click"
+  ...args
 })}
     </div>
 `;
@@ -247,86 +366,137 @@ clickContentClosedOnScroll.decorators = [
         <scroll-forcer></scroll-forcer>
     `
 ];
-export const noCloseOnResize = (args) => html`
-    <style>
-        sp-button:hover {
-            border: 10px solid;
-            width: 100px;
-        }
-    </style>
-    ${template({
-  ...args,
-  open: "click"
-})}
-`;
-noCloseOnResize.swc_vrt = {
-  skip: true
+class ComplexModalReady extends HTMLElement {
+  constructor() {
+    super();
+    this.handleTriggerOpened = async () => {
+      await nextFrame();
+      const picker = document.querySelector("#test-picker");
+      picker.addEventListener("sp-opened", this.handlePickerOpen);
+      picker.open = true;
+    };
+    this.handlePickerOpen = async () => {
+      const picker = document.querySelector("#test-picker");
+      const actions = [nextFrame, picker.updateComplete];
+      await Promise.all(actions);
+      this.ready(true);
+    };
+    this.readyPromise = Promise.resolve(false);
+    this.readyPromise = new Promise((res) => {
+      this.ready = res;
+      this.setup();
+    });
+  }
+  async setup() {
+    await nextFrame();
+    const overlay = document.querySelector(
+      `overlay-trigger`
+    );
+    overlay.addEventListener("sp-opened", this.handleTriggerOpened);
+  }
+  get updateComplete() {
+    return this.readyPromise;
+  }
+}
+customElements.define("complex-modal-ready", ComplexModalReady);
+const complexModalDecorator = (story) => {
+  return html`
+        ${story()}
+        <complex-modal-ready></complex-modal-ready>
+    `;
+};
+export const complexModal = () => {
+  return html`
+        <style>
+            body {
+                --swc-margin-test: 10px;
+                margin: var(--swc-margin-test);
+            }
+            sp-story-decorator::part(container) {
+                min-height: calc(100vh - (2 * var(--swc-margin-test)));
+                padding: 0;
+                display: grid;
+                place-content: center;
+            }
+            active-overlay > * {
+                --spectrum-global-animation-duration-100: 0ms;
+                --spectrum-global-animation-duration-200: 0ms;
+                --spectrum-global-animation-duration-300: 0ms;
+                --spectrum-global-animation-duration-400: 0ms;
+                --spectrum-global-animation-duration-500: 0ms;
+                --spectrum-global-animation-duration-600: 0ms;
+                --spectrum-global-animation-duration-700: 0ms;
+                --spectrum-global-animation-duration-800: 0ms;
+                --spectrum-global-animation-duration-900: 0ms;
+                --spectrum-global-animation-duration-1000: 0ms;
+                --spectrum-global-animation-duration-2000: 0ms;
+                --spectrum-global-animation-duration-4000: 0ms;
+                --spectrum-animation-duration-0: 0ms;
+                --spectrum-animation-duration-100: 0ms;
+                --spectrum-animation-duration-200: 0ms;
+                --spectrum-animation-duration-300: 0ms;
+                --spectrum-animation-duration-400: 0ms;
+                --spectrum-animation-duration-500: 0ms;
+                --spectrum-animation-duration-600: 0ms;
+                --spectrum-animation-duration-700: 0ms;
+                --spectrum-animation-duration-800: 0ms;
+                --spectrum-animation-duration-900: 0ms;
+                --spectrum-animation-duration-1000: 0ms;
+                --spectrum-animation-duration-2000: 0ms;
+                --spectrum-animation-duration-4000: 0ms;
+                --spectrum-coachmark-animation-indicator-ring-duration: 0ms;
+                --swc-test-duration: 1ms;
+            }
+        </style>
+        <overlay-trigger type="modal" placement="none" open="click">
+            <sp-dialog-wrapper
+                slot="click-content"
+                headline="Dialog title"
+                dismissable
+                underlay
+                footer="Content for footer"
+            >
+                <sp-field-label for="test-picker">
+                    Selection type:
+                </sp-field-label>
+                <sp-picker id="test-picker">
+                    <sp-menu-item>Deselect</sp-menu-item>
+                    <sp-menu-item>Select inverse</sp-menu-item>
+                    <sp-menu-item>Feather...</sp-menu-item>
+                    <sp-menu-item>Select and mask...</sp-menu-item>
+                    <sp-menu-divider></sp-menu-divider>
+                    <sp-menu-item>Save selection</sp-menu-item>
+                    <sp-menu-item disabled>Make work path</sp-menu-item>
+                </sp-picker>
+            </sp-dialog-wrapper>
+            <sp-button slot="trigger" variant="primary">
+                Toggle Dialog
+            </sp-button>
+        </overlay-trigger>
+    `;
 };
+complexModal.decorators = [complexModalDecorator];
 export const customizedClickContent = (args) => html`
     <style>
-        active-overlay::part(theme) {
-            --styled-div-background-color: var(--spectrum-semantic-cta-background-color-default);
-            --spectrum-button-m-cta-texticon-background-color: rebeccapurple;
+        overlay-trigger {
+            --styled-div-background-color: var(
+                --spectrum-semantic-cta-background-color-default
+            );
+            --spectrum-button-m-accent-fill-texticon-background-color: rebeccapurple;
         }
     </style>
-    </style>
     ${template({
   ...args,
   open: "click"
 })}
 `;
-const extraText = html`
-    <p>This is some text.</p>
-    <p>This is some text.</p>
-    <p>
-        This is a
-        <a href="#anchor">link</a>
-        .
-    </p>
-`;
-export const inline = () => {
-  const closeEvent = new Event("close", { bubbles: true, composed: true });
-  return html`
-        <overlay-trigger type="inline">
-            <sp-button slot="trigger">Open</sp-button>
-            <sp-overlay slot="click-content">
-                <sp-button
-                    @click=${(event) => {
-    event.target.dispatchEvent(closeEvent);
-  }}
-                >
-                    Close
-                </sp-button>
-            </sp-overlay>
-        </overlay-trigger>
-        ${extraText}
-    `;
-};
-export const replace = () => {
-  const closeEvent = new Event("close", { bubbles: true, composed: true });
-  return html`
-        <overlay-trigger type="replace">
-            <sp-button slot="trigger">Open</sp-button>
-            <sp-overlay slot="click-content">
-                <sp-button
-                    @click=${(event) => {
-    event.target.dispatchEvent(closeEvent);
-  }}
-                >
-                    Close
-                </sp-button>
-            </sp-overlay>
-        </overlay-trigger>
-        ${extraText}
-    `;
-};
 export const deep = () => html`
     <overlay-trigger>
         <sp-button variant="primary" slot="trigger">
             Open popover 1 with buttons + selfmanaged Tooltips
         </sp-button>
-        <sp-popover slot="click-content" direction="bottom" tip open>
-            <sp-dialog size="s" no-divider>
+        <sp-popover slot="click-content" direction="bottom" tip>
+            <sp-dialog size="s" no-divder>
                 <sp-action-button>
                     <sp-tooltip self-managed placement="bottom" offset="0">
                         My Tooltip 1
@@ -347,8 +517,8 @@ export const deep = () => html`
         <sp-button variant="primary" slot="trigger">
             Open popover 2 with buttons without ToolTips
         </sp-button>
-        <sp-popover slot="click-content" direction="bottom" tip open>
-            <sp-dialog size="s" no-divider>
+        <sp-popover slot="click-content" direction="bottom" tip>
+            <sp-dialog size="s" no-divder>
                 <sp-action-button>X</sp-action-button>
                 <sp-action-button>Y</sp-action-button>
             </sp-dialog>
@@ -358,72 +528,6 @@ export const deep = () => html`
 deep.swc_vrt = {
   skip: true
 };
-export const modalLoose = () => {
-  const closeEvent = new Event("close", { bubbles: true, composed: true });
-  return html`
-        <overlay-trigger type="modal" placement="none">
-            <sp-button slot="trigger">Open</sp-button>
-            <sp-dialog
-                size="s"
-                dismissable
-                slot="click-content"
-                @closed=${(event) => event.target.dispatchEvent(closeEvent)}
-            >
-                <h2 slot="heading">Loose Dialog</h2>
-                <p>
-                    The
-                    <code>sp-dialog</code>
-                    element is not "meant" to be a modal alone. In that way it
-                    does not manage its own
-                    <code>open</code>
-                    attribute or outline when it should have
-                    <code>pointer-events: auto</code>
-                    . It's a part of this test suite to prove that content in
-                    this way can be used in an
-                    <code>overlay-trigger</code>
-                    element.
-                </p>
-            </sp-dialog>
-        </overlay-trigger>
-        ${extraText}
-    `;
-};
-export const modalManaged = () => {
-  const closeEvent = new Event("close", { bubbles: true, composed: true });
-  return html`
-        <overlay-trigger type="modal" placement="none">
-            <sp-button slot="trigger">Open</sp-button>
-            <sp-dialog-wrapper
-                underlay
-                slot="click-content"
-                headline="Wrapped Dialog w/ Hero Image"
-                confirm-label="Keep Both"
-                secondary-label="Replace"
-                cancel-label="Cancel"
-                footer="Content for footer"
-                @confirm=${(event) => {
-    event.target.dispatchEvent(closeEvent);
-  }}
-                @secondary=${(event) => {
-    event.target.dispatchEvent(closeEvent);
-  }}
-                @cancel=${(event) => {
-    event.target.dispatchEvent(closeEvent);
-  }}
-            >
-                <p>
-                    The
-                    <code>sp-dialog-wrapper</code>
-                    element has been prepared for use in an
-                    <code>overlay-trigger</code>
-                    element by it's combination of modal, underlay, etc. styles
-                    and features.
-                </p>
-            </sp-dialog-wrapper>
-        </overlay-trigger>
-        ${extraText}
-    `;
-};
 export const deepNesting = () => {
   const color = window.__swc_hack_knobs__.defaultColor;
   const outter = color === "light" ? "dark" : "light";
@@ -453,6 +557,117 @@ export const deepNesting = () => {
         </sp-theme>
     `;
 };
+class DefinedOverlayReady extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    this.handleTriggerOpened = async () => {
+      this.overlay.removeEventListener("sp-opened", this.handleTriggerOpened);
+      await nextFrame();
+      await nextFrame();
+      await nextFrame();
+      await nextFrame();
+      this.popover = document.querySelector(
+        "popover-content"
+      );
+      if (!this.popover) {
+        return;
+      }
+      this.popover.addEventListener("sp-opened", this.handlePopoverOpen);
+      await nextFrame();
+      await nextFrame();
+      this.popover.button.click();
+    };
+    this.handlePopoverOpen = async () => {
+      await nextFrame();
+      this.ready(true);
+    };
+    this.readyPromise = Promise.resolve(false);
+  }
+  connectedCallback() {
+    if (!!this.ready)
+      return;
+    this.readyPromise = new Promise((res) => {
+      this.ready = res;
+      this.setup();
+    });
+  }
+  async setup() {
+    await nextFrame();
+    await nextFrame();
+    this.overlay = document.querySelector(
+      `overlay-trigger`
+    );
+    const button = document.querySelector(
+      `[slot="trigger"]`
+    );
+    this.overlay.addEventListener("sp-opened", this.handleTriggerOpened);
+    await nextFrame();
+    await nextFrame();
+    button.click();
+  }
+  disconnectedCallback() {
+    this.overlay.removeEventListener("sp-opened", this.handleTriggerOpened);
+    this.popover.removeEventListener("sp-opened", this.handlePopoverOpen);
+  }
+  get updateComplete() {
+    return this.readyPromise;
+  }
+}
+customElements.define("defined-overlay-ready", DefinedOverlayReady);
+const definedOverlayDecorator = (story) => {
+  return html`
+        ${story()}
+        <defined-overlay-ready></defined-overlay-ready>
+    `;
+};
+export const definedOverlayElement = () => {
+  return html`
+        <overlay-trigger placement="bottom" type="modal">
+            <sp-button variant="primary" slot="trigger">Open popover</sp-button>
+            <sp-popover slot="click-content" direction="bottom">
+                <sp-dialog no-divder>
+                    <popover-content></popover-content>
+                </sp-dialog>
+            </sp-popover>
+        </overlay-trigger>
+    `;
+};
+definedOverlayElement.decorators = [definedOverlayDecorator];
+export const detachedElement = () => {
+  let closeOverlay;
+  const openDetachedOverlayContent = async () => {
+    if (closeOverlay) {
+      closeOverlay();
+      closeOverlay = void 0;
+      return;
+    }
+    const div = document.createElement("div");
+    div.textContent = "This div is overlaid";
+    div.setAttribute(
+      "style",
+      `
+            background-color: var(--spectrum-global-color-gray-50);
+            color: var(--spectrum-global-color-gray-800);
+            border: 1px solid;
+            padding: 2em;
+        `
+    );
+  };
+  requestAnimationFrame(() => {
+  });
+  return html`
+        <sp-action-button
+            id="detached-content-trigger"
+            @click=${openDetachedOverlayContent}
+            @sp-closed=${() => closeOverlay = void 0}
+        >
+            <sp-icon-open-in
+                slot="icon"
+                label="Open in overlay"
+            ></sp-icon-open-in>
+        </sp-action-button>
+    `;
+};
 export const edges = () => {
   return html`
         <style>
@@ -482,7 +697,7 @@ export const edges = () => {
                 <br />
                 Left
             </sp-button>
-            <sp-tooltip slot="hover-content" delayed open tip="bottom">
+            <sp-tooltip slot="hover-content" delayed tip="bottom">
                 Triskaidekaphobia and More
             </sp-tooltip>
         </overlay-trigger>
@@ -492,7 +707,7 @@ export const edges = () => {
                 <br />
                 Right
             </sp-button>
-            <sp-tooltip slot="hover-content" delayed open tip="bottom">
+            <sp-tooltip slot="hover-content" delayed tip="bottom">
                 Triskaidekaphobia and More
             </sp-tooltip>
         </overlay-trigger>
@@ -502,7 +717,7 @@ export const edges = () => {
                 <br />
                 Left
             </sp-button>
-            <sp-tooltip slot="hover-content" delayed open tip="top">
+            <sp-tooltip slot="hover-content" delayed tip="top">
                 Triskaidekaphobia and More
             </sp-tooltip>
         </overlay-trigger>
@@ -512,103 +727,28 @@ export const edges = () => {
                 <br />
                 Right
             </sp-button>
-            <sp-tooltip slot="hover-content" delayed open tip="top">
+            <sp-tooltip slot="hover-content" delayed tip="top">
                 Triskaidekaphobia and More
             </sp-tooltip>
         </overlay-trigger>
     `;
 };
-export const updated = () => {
-  return html`
-        ${storyStyles}
-        <style>
-            sp-tooltip {
-                transition: none;
-            }
-        </style>
-        <overlay-drag>
-            <overlay-trigger class="demo top-left" placement="bottom">
-                <overlay-target-icon
-                    slot="trigger"
-                    style="translate(400px, 300px)"
-                ></overlay-target-icon>
-                <sp-tooltip slot="hover-content" delayed tip="bottom">
-                    Click to open popover
-                </sp-tooltip>
-                <sp-popover slot="click-content" position="bottom" tip open>
-                    <sp-dialog size="s" no-divider>
-                        <div class="options-popover-content">
-                            <sp-slider
-                                value="5"
-                                step="0.5"
-                                min="0"
-                                max="20"
-                                label="Awesomeness"
-                            ></sp-slider>
-                            <div id="styled-div">
-                                The background of this div should be blue
-                            </div>
-                            <overlay-trigger
-                                id="inner-trigger"
-                                placement="bottom"
-                            >
-                                <sp-button slot="trigger">Press Me</sp-button>
-                                <sp-popover
-                                    slot="click-content"
-                                    placement="bottom"
-                                    tip
-                                    open
-                                >
-                                    <sp-dialog size="s" no-divider>
-                                        <div class="options-popover-content">
-                                            Another Popover
-                                        </div>
-                                    </sp-dialog>
-                                </sp-popover>
-
-                                <sp-tooltip
-                                    slot="hover-content"
-                                    delayed
-                                    tip="bottom"
-                                >
-                                    Click to open another popover.
-                                </sp-tooltip>
-                            </overlay-trigger>
-                        </div>
-                    </sp-dialog>
-                </sp-popover>
-            </overlay-trigger>
-        </overlay-drag>
-    `;
-};
-export const sideHoverDraggable = () => {
+export const inline = () => {
+  const closeEvent = new Event("close", { bubbles: true, composed: true });
   return html`
-        ${storyStyles}
-        <style>
-            sp-tooltip {
-                transition: none;
-            }
-        </style>
-        <overlay-drag>
-            <overlay-trigger placement="right">
-                <overlay-target-icon slot="trigger"></overlay-target-icon>
-                <sp-tooltip slot="hover-content" delayed tip="right">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                    Vivamus egestas sed enim sed condimentum. Nunc facilisis
-                    scelerisque massa sed luctus. Orci varius natoque penatibus
-                    et magnis dis parturient montes, nascetur ridiculus mus.
-                    Suspendisse sagittis sodales purus vitae ultricies. Integer
-                    at dui sem. Sed quam tortor, ornare in nisi et, rhoncus
-                    lacinia mauris. Sed vel rutrum mauris, ac pellentesque nibh.
-                    Sed feugiat semper libero, sit amet vehicula orci fermentum
-                    id. Vivamus imperdiet egestas luctus. Mauris tincidunt
-                    malesuada ante, faucibus viverra nunc blandit a. Fusce et
-                    nisl nisi. Aenean dictum quam id mollis faucibus. Nulla a
-                    ultricies dui. In hac habitasse platea dictumst. Curabitur
-                    gravida lobortis vestibulum.
-                </sp-tooltip>
-            </overlay-trigger>
-        </overlay-drag>
+        <overlay-trigger type="inline">
+            <sp-button slot="trigger">Open</sp-button>
+            <sp-popover slot="click-content">
+                <sp-button
+                    @click=${(event) => {
+    event.target.dispatchEvent(closeEvent);
+  }}
+                >
+                    Close
+                </sp-button>
+            </sp-popover>
+        </overlay-trigger>
+        ${extraText}
     `;
 };
 export const longpress = () => {
@@ -641,155 +781,166 @@ export const longpress = () => {
         </overlay-trigger>
     `;
 };
-export const clickAndHoverTargets = () => {
-  return html`
-        <div>
-            ${storyStyles}
-            <style>
-                .friendly-target {
-                    padding: 4px;
-                    margin: 6px;
-                    border: 2px solid black;
-                    border-radius: 6px;
-                    cursor: default;
-                }
-            </style>
-            <overlay-trigger placement="right">
-                <div class="friendly-target" slot="trigger" tabindex="0">
-                    Click me
-                </div>
-                <sp-tooltip slot="click-content" tip="right">
-                    Ok, now hover the other trigger
-                </sp-tooltip>
-            </overlay-trigger>
-            <overlay-trigger placement="left">
-                <div class="friendly-target" slot="trigger" tabindex="0">
-                    Then hover me
-                </div>
-                <sp-tooltip slot="hover-content" tip="right">
-                    Now click my trigger -- I should stay open, but the other
-                    overlay should close
-                </sp-tooltip>
-            </overlay-trigger>
-        </div>
-    `;
-};
-clickAndHoverTargets.swc_vrt = {
-  skip: true
-};
-function nextFrame() {
-  return new Promise((res) => requestAnimationFrame(() => res()));
-}
-class ComplexModalReady extends HTMLElement {
-  constructor() {
-    super();
-    this.handleTriggerOpened = async () => {
-      await nextFrame();
-      const picker = document.querySelector("#test-picker");
-      picker.addEventListener("sp-opened", this.handlePickerOpen);
-      picker.open = true;
-    };
-    this.handlePickerOpen = async () => {
-      const picker = document.querySelector("#test-picker");
-      const actions = [nextFrame, picker.updateComplete];
-      await Promise.all(actions);
-      this.ready(true);
-    };
-    this.readyPromise = Promise.resolve(false);
-    this.readyPromise = new Promise((res) => {
-      this.ready = res;
-      this.setup();
-    });
-  }
-  async setup() {
-    await nextFrame();
-    const overlay = document.querySelector(
-      `overlay-trigger`
-    );
-    overlay.addEventListener("sp-opened", this.handleTriggerOpened);
-  }
-  get updateComplete() {
-    return this.readyPromise;
-  }
-}
-customElements.define("complex-modal-ready", ComplexModalReady);
-const complexModalDecorator = (story) => {
+export const modalLoose = () => {
+  const closeEvent = new Event("close", { bubbles: true, composed: true });
   return html`
-        ${story()}
-        <complex-modal-ready></complex-modal-ready>
+        <overlay-trigger type="modal" placement="none">
+            <sp-button slot="trigger">Open</sp-button>
+            <sp-dialog
+                size="s"
+                dismissable
+                slot="click-content"
+                @closed=${(event) => event.target.dispatchEvent(closeEvent)}
+            >
+                <h2 slot="heading">Loose Dialog</h2>
+                <p>
+                    The
+                    <code>sp-dialog</code>
+                    element is not "meant" to be a modal alone. In that way it
+                    does not manage its own
+                    <code>open</code>
+                    attribute or outline when it should have
+                    <code>pointer-events: auto</code>
+                    . It's a part of this test suite to prove that content in
+                    this way can be used in an
+                    <code>overlay-trigger</code>
+                    element.
+                </p>
+            </sp-dialog>
+        </overlay-trigger>
+        ${extraText}
     `;
 };
-export const complexModal = () => {
+export const modalManaged = () => {
+  const closeEvent = new Event("close", { bubbles: true, composed: true });
   return html`
-        <style>
-            body {
-                --swc-margin-test: 10px;
-                margin: var(--swc-margin-test);
-            }
-            sp-story-decorator::part(container) {
-                min-height: calc(100vh - (2 * var(--swc-margin-test)));
-                padding: 0;
-                display: grid;
-                place-content: center;
-            }
-            active-overlay > * {
-                --spectrum-global-animation-duration-100: 0ms;
-                --spectrum-global-animation-duration-200: 0ms;
-                --spectrum-global-animation-duration-300: 0ms;
-                --spectrum-global-animation-duration-400: 0ms;
-                --spectrum-global-animation-duration-500: 0ms;
-                --spectrum-global-animation-duration-600: 0ms;
-                --spectrum-global-animation-duration-700: 0ms;
-                --spectrum-global-animation-duration-800: 0ms;
-                --spectrum-global-animation-duration-900: 0ms;
-                --spectrum-global-animation-duration-1000: 0ms;
-                --spectrum-global-animation-duration-2000: 0ms;
-                --spectrum-global-animation-duration-4000: 0ms;
-                --spectrum-animation-duration-0: 0ms;
-                --spectrum-animation-duration-100: 0ms;
-                --spectrum-animation-duration-200: 0ms;
-                --spectrum-animation-duration-300: 0ms;
-                --spectrum-animation-duration-400: 0ms;
-                --spectrum-animation-duration-500: 0ms;
-                --spectrum-animation-duration-600: 0ms;
-                --spectrum-animation-duration-700: 0ms;
-                --spectrum-animation-duration-800: 0ms;
-                --spectrum-animation-duration-900: 0ms;
-                --spectrum-animation-duration-1000: 0ms;
-                --spectrum-animation-duration-2000: 0ms;
-                --spectrum-animation-duration-4000: 0ms;
-                --spectrum-coachmark-animation-indicator-ring-duration: 0ms;
-                --swc-test-duration: 1ms;
-            }
-        </style>
-        <overlay-trigger type="modal" placement="none" open="click">
+        <overlay-trigger type="modal" placement="none">
+            <sp-button slot="trigger">Open</sp-button>
             <sp-dialog-wrapper
-                slot="click-content"
-                headline="Dialog title"
-                dismissable
                 underlay
+                slot="click-content"
+                headline="Wrapped Dialog w/ Hero Image"
+                confirm-label="Keep Both"
+                secondary-label="Replace"
+                cancel-label="Cancel"
                 footer="Content for footer"
+                @confirm=${(event) => {
+    event.target.dispatchEvent(closeEvent);
+  }}
+                @secondary=${(event) => {
+    event.target.dispatchEvent(closeEvent);
+  }}
+                @cancel=${(event) => {
+    event.target.dispatchEvent(closeEvent);
+  }}
             >
-                <sp-field-label for="test-picker">
-                    Selection type:
-                </sp-field-label>
-                <sp-picker id="test-picker">
-                    <sp-menu-item>Deselect</sp-menu-item>
-                    <sp-menu-item>Select inverse</sp-menu-item>
-                    <sp-menu-item>Feather...</sp-menu-item>
-                    <sp-menu-item>Select and mask...</sp-menu-item>
-                    <sp-menu-divider></sp-menu-divider>
-                    <sp-menu-item>Save selection</sp-menu-item>
-                    <sp-menu-item disabled>Make work path</sp-menu-item>
-                </sp-picker>
+                <p>
+                    The
+                    <code>sp-dialog-wrapper</code>
+                    element has been prepared for use in an
+                    <code>overlay-trigger</code>
+                    element by it's combination of modal, underlay, etc. styles
+                    and features.
+                </p>
             </sp-dialog-wrapper>
-            <sp-button slot="trigger" variant="primary">
-                Toggle Dialog
+        </overlay-trigger>
+        ${extraText}
+    `;
+};
+export const modalWithinNonModal = () => {
+  return html`
+        <overlay-trigger type="inline">
+            <sp-button variant="primary" slot="trigger">
+                Open inline overlay
             </sp-button>
+            <sp-popover slot="click-content">
+                <sp-dialog size="s" no-divder>
+                    <overlay-trigger type="modal">
+                        <sp-button variant="primary" slot="trigger">
+                            Open modal overlay
+                        </sp-button>
+                        <sp-popover slot="click-content">
+                            <sp-dialog size="s" no-divder>
+                                Modal overlay
+                            </sp-dialog>
+                        </sp-popover>
+                    </overlay-trigger>
+                </sp-dialog>
+            </sp-popover>
         </overlay-trigger>
     `;
 };
-complexModal.decorators = [complexModalDecorator];
+export const noCloseOnResize = (args) => html`
+    <style>
+        sp-button:hover {
+            border: 10px solid;
+            width: 100px;
+        }
+    </style>
+    ${template({
+  ...args,
+  open: "click"
+})}
+`;
+noCloseOnResize.swc_vrt = {
+  skip: true
+};
+export const openClickContent = (args) => template({
+  ...args,
+  open: "click"
+});
+export const openHoverContent = (args) => template({
+  ...args,
+  open: "hover"
+});
+export const replace = () => {
+  const closeEvent = new Event("close", { bubbles: true, composed: true });
+  return html`
+        <overlay-trigger type="replace">
+            <sp-button slot="trigger">Open</sp-button>
+            <sp-popover slot="click-content">
+                <sp-button
+                    @click=${(event) => {
+    event.target.dispatchEvent(closeEvent);
+  }}
+                >
+                    Close
+                </sp-button>
+            </sp-popover>
+        </overlay-trigger>
+        ${extraText}
+    `;
+};
+export const sideHoverDraggable = () => {
+  return html`
+        ${storyStyles}
+        <style>
+            sp-tooltip {
+                transition: none;
+            }
+        </style>
+        <overlay-drag>
+            <overlay-trigger placement="right">
+                <overlay-target-icon slot="trigger"></overlay-target-icon>
+                <sp-tooltip slot="hover-content" delayed tip="right">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    Vivamus egestas sed enim sed condimentum. Nunc facilisis
+                    scelerisque massa sed luctus. Orci varius natoque penatibus
+                    et magnis dis parturient montes, nascetur ridiculus mus.
+                    Suspendisse sagittis sodales purus vitae ultricies. Integer
+                    at dui sem. Sed quam tortor, ornare in nisi et, rhoncus
+                    lacinia mauris. Sed vel rutrum mauris, ac pellentesque nibh.
+                    Sed feugiat semper libero, sit amet vehicula orci fermentum
+                    id. Vivamus imperdiet egestas luctus. Mauris tincidunt
+                    malesuada ante, faucibus viverra nunc blandit a. Fusce et
+                    nisl nisi. Aenean dictum quam id mollis faucibus. Nulla a
+                    ultricies dui. In hac habitasse platea dictumst. Curabitur
+                    gravida lobortis vestibulum.
+                </sp-tooltip>
+            </overlay-trigger>
+        </overlay-drag>
+    `;
+};
 export const superComplexModal = () => {
   return html`
         <overlay-trigger type="modal" placement="none">
@@ -837,6 +988,86 @@ export const superComplexModal = () => {
         </overlay-trigger>
     `;
 };
+export const updated = () => {
+  return html`
+        ${storyStyles}
+        <style>
+            sp-tooltip {
+                transition: none;
+            }
+        </style>
+        <overlay-drag>
+            <overlay-trigger class="demo top-left" placement="bottom">
+                <overlay-target-icon
+                    slot="trigger"
+                    style="translate(400px, 300px)"
+                ></overlay-target-icon>
+                <sp-tooltip slot="hover-content" delayed tip="bottom">
+                    Click to open popover
+                </sp-tooltip>
+                <sp-popover slot="click-content" position="bottom" tip>
+                    <sp-dialog size="s" no-divder>
+                        <sp-slider
+                            value="5"
+                            step="0.5"
+                            min="0"
+                            max="20"
+                            label="Awesomeness"
+                        ></sp-slider>
+                        <div id="styled-div">
+                            The background of this div should be blue
+                        </div>
+                        <overlay-trigger id="inner-trigger" placement="bottom">
+                            <sp-button slot="trigger">Press Me</sp-button>
+                            <sp-popover
+                                slot="click-content"
+                                placement="bottom"
+                                tip
+                            >
+                                <sp-dialog size="s" no-divder>
+                                    Another Popover
+                                </sp-dialog>
+                            </sp-popover>
+
+                            <sp-tooltip
+                                slot="hover-content"
+                                delayed
+                                tip="bottom"
+                            >
+                                Click to open another popover.
+                            </sp-tooltip>
+                        </overlay-trigger>
+                    </sp-dialog>
+                </sp-popover>
+            </overlay-trigger>
+        </overlay-drag>
+    `;
+};
+export const updating = () => {
+  const update = () => {
+    const button = document.querySelector('[slot="trigger"]');
+    button.style.left = `${Math.floor(Math.random() * 200)}px`;
+    button.style.top = `${Math.floor(Math.random() * 200)}px`;
+    button.style.position = "fixed";
+  };
+  return html`
+        <overlay-trigger type="click">
+            <sp-button variant="primary" slot="trigger">
+                Open inline overlay
+            </sp-button>
+            <sp-popover slot="click-content">
+                <sp-dialog size="s" no-divder>
+                    <sp-button variant="primary" @click=${update}>
+                        Update trigger location.
+                    </sp-button>
+                </sp-dialog>
+            </sp-popover>
+        </overlay-trigger>
+    `;
+};
+updating.swc_vrt = {
+  skip: true
+};
 class StartEndContextmenu extends HTMLElement {
   constructor() {
     super();
@@ -864,9 +1095,11 @@ export const virtualElement = (args) => {
             style="width:300px;"
             @click=${(event) => {
     var _a;
-    return (_a = event.target) == null ? void 0 : _a.dispatchEvent(
-      new Event("close", { bubbles: true })
-    );
+    if (event.target.localName === "sp-menu-item") {
+      (_a = event.target) == null ? void 0 : _a.dispatchEvent(
+        new Event("close", { bubbles: true })
+      );
+    }
   }}
         >
             <sp-menu>
@@ -883,8 +1116,9 @@ export const virtualElement = (args) => {
             </sp-menu>
         </sp-popover>
     `;
-  const pointerenter = async (event) => {
+  const handleContextmenu = async (event) => {
     event.preventDefault();
+    event.stopPropagation();
     const source = event.composedPath()[0];
     const { id } = source;
     const trigger = event.target;
@@ -892,10 +1126,12 @@ export const virtualElement = (args) => {
     const fragment = document.createDocumentFragment();
     render(contextMenuTemplate(id), fragment);
     const popover = fragment.querySelector("sp-popover");
-    openOverlay(trigger, "modal", popover, {
+    openOverlay(trigger, "click", popover, {
       placement: args.placement,
       receivesFocus: "auto",
-      virtualTrigger
+      virtualTrigger,
+      offset: -10,
+      notImmediatelyClosable: true
     });
   };
   return html`
@@ -907,241 +1143,14 @@ export const virtualElement = (args) => {
         </style>
         <start-end-contextmenu
             class="app-root"
-            @contextmenu=${pointerenter}
+            @contextmenu=${{
+    capture: true,
+    handleEvent: handleContextmenu
+  }}
         ></start-end-contextmenu>
     `;
 };
 virtualElement.args = {
   placement: "right-start"
 };
-export const detachedElement = () => {
-  let closeOverlay;
-  const openDetachedOverlayContent = async ({
-    target
-  }) => {
-    if (closeOverlay) {
-      closeOverlay();
-      closeOverlay = void 0;
-      return;
-    }
-    const div = document.createElement("div");
-    div.textContent = "This div is overlaid";
-    div.setAttribute(
-      "style",
-      `
-            background-color: var(--spectrum-global-color-gray-50);
-            color: var(--spectrum-global-color-gray-800);
-            border: 1px solid;
-            padding: 2em;
-        `
-    );
-    closeOverlay = await Overlay.open(target, "click", div, {
-      offset: 0,
-      placement: "bottom"
-    });
-  };
-  requestAnimationFrame(() => {
-    openDetachedOverlayContent({
-      target: document.querySelector(
-        "#detached-content-trigger"
-      )
-    });
-  });
-  return html`
-        <sp-action-button
-            id="detached-content-trigger"
-            @click=${openDetachedOverlayContent}
-            @sp-closed=${() => closeOverlay = void 0}
-        >
-            <sp-icon-open-in
-                slot="icon"
-                label="Open in overlay"
-            ></sp-icon-open-in>
-        </sp-action-button>
-    `;
-};
-class DefinedOverlayReady extends HTMLElement {
-  constructor() {
-    super();
-    this.handleTriggerOpened = async () => {
-      await nextFrame();
-      const popover = document.querySelector("popover-content");
-      if (!popover) {
-        return;
-      }
-      popover.addEventListener("sp-opened", this.handlePopoverOpen);
-      popover.button.click();
-    };
-    this.handlePopoverOpen = async () => {
-      await nextFrame();
-      this.ready(true);
-    };
-    this.readyPromise = Promise.resolve(false);
-    this.readyPromise = new Promise((res) => {
-      this.ready = res;
-      this.setup();
-    });
-  }
-  async setup() {
-    await nextFrame();
-    const overlay = document.querySelector(
-      `overlay-trigger`
-    );
-    const button = document.querySelector(
-      `[slot="trigger"]`
-    );
-    overlay.addEventListener("sp-opened", this.handleTriggerOpened);
-    button.click();
-  }
-  get updateComplete() {
-    return this.readyPromise;
-  }
-}
-customElements.define("defined-overlay-ready", DefinedOverlayReady);
-const definedOverlayDecorator = (story) => {
-  return html`
-        ${story()}
-        <defined-overlay-ready></defined-overlay-ready>
-    `;
-};
-export const definedOverlayElement = () => {
-  return html`
-        <overlay-trigger placement="bottom" type="modal">
-            <sp-button variant="primary" slot="trigger">Open popover</sp-button>
-            <sp-popover slot="click-content" direction="bottom">
-                <sp-dialog no-divider>
-                    <popover-content></popover-content>
-                </sp-dialog>
-            </sp-popover>
-        </overlay-trigger>
-    `;
-};
-definedOverlayElement.decorators = [definedOverlayDecorator];
-export const modalWithinNonModal = () => {
-  return html`
-        <overlay-trigger type="inline">
-            <sp-button variant="primary" slot="trigger">
-                Open inline overlay
-            </sp-button>
-            <sp-popover slot="click-content">
-                <sp-dialog size="s" no-divider>
-                    <overlay-trigger type="modal">
-                        <sp-button variant="primary" slot="trigger">
-                            Open modal overlay
-                        </sp-button>
-                        <sp-popover slot="click-content">
-                            <sp-dialog size="s" no-divider>
-                                Modal overlay
-                            </sp-dialog>
-                        </sp-popover>
-                    </overlay-trigger>
-                </sp-dialog>
-            </sp-popover>
-        </overlay-trigger>
-    `;
-};
-export const updating = () => {
-  const update = () => {
-    const button = document.querySelector('[slot="trigger"]');
-    button.style.left = `${Math.floor(Math.random() * 200)}px`;
-    button.style.top = `${Math.floor(Math.random() * 200)}px`;
-    button.style.position = "fixed";
-    Overlay.update();
-  };
-  return html`
-        <overlay-trigger type="click">
-            <sp-button variant="primary" slot="trigger">
-                Open inline overlay
-            </sp-button>
-            <sp-popover slot="click-content">
-                <sp-dialog size="s" no-divider>
-                    <sp-button variant="primary" @click=${update}>
-                        Update trigger location.
-                    </sp-button>
-                </sp-dialog>
-            </sp-popover>
-        </overlay-trigger>
-    `;
-};
-updating.swc_vrt = {
-  skip: true
-};
-export const accordion = () => {
-  const handleToggle = () => {
-    Overlay.update();
-  };
-  return html`
-        <overlay-trigger type="modal" placement="right">
-            <sp-button variant="primary" slot="trigger">
-                Open overlay w/ accordion
-            </sp-button>
-            <div slot="click-content" style="max-height: 100%;display: flex;">
-                <sp-popover open style="overflow-y: scroll;position: static;">
-                    <sp-dialog size="s" no-divider>
-                        <sp-accordion
-                            allow-multiple
-                            @sp-accordion-item-toggle=${handleToggle}
-                        >
-                            <sp-accordion-item label="Some things">
-                                <p>
-                                    Thing
-                                    <br />
-                                    <br />
-                                    <br />
-                                    <br />
-                                    <br />
-                                    <br />
-                                    <br />
-                                    more things
-                                </p>
-                            </sp-accordion-item>
-                            <sp-accordion-item label="Other things">
-                                <p>
-                                    Thing
-                                    <br />
-                                    <br />
-                                    <br />
-                                    <br />
-                                    <br />
-                                    <br />
-                                    <br />
-                                    more things
-                                </p>
-                            </sp-accordion-item>
-                            <sp-accordion-item label="More things">
-                                <p>
-                                    Thing
-                                    <br />
-                                    <br />
-                                    <br />
-                                    <br />
-                                    <br />
-                                    <br />
-                                    <br />
-                                    more things
-                                </p>
-                            </sp-accordion-item>
-                            <sp-accordion-item label="Additional things">
-                                <p>
-                                    Thing
-                                    <br />
-                                    <br />
-                                    <br />
-                                    <br />
-                                    <br />
-                                    <br />
-                                    <br />
-                                    more things
-                                </p>
-                            </sp-accordion-item>
-                        </sp-accordion>
-                    </sp-dialog>
-                </sp-popover>
-            </div>
-        </overlay-trigger>
-    `;
-};
-accordion.swc_vrt = {
-  skip: true
-};
 //# sourceMappingURL=overlay.stories.js.map