@spectrum-web-components/overlay 0.40.0 → 0.40.2

package/src/OverlayPopover.js

@@ -1,2 +1,2 @@
-"use strict";import{firstFocusableIn as f,firstFocusableSlottedIn as E}from"@spectrum-web-components/shared/src/first-focusable-in.js";import{VirtualTrigger as b}from"./VirtualTrigger.js";import{BeforetoggleClosedEvent as y,BeforetoggleOpenEvent as w,guaranteedAllTransitionend as P,nextFrame as h,overlayTimer as m}from"./AbstractOverlay.js";import{userFocusableSelector as g}from"@spectrum-web-components/shared";function u(l){let a=!1;try{a=l.matches(":popover-open")}catch(e){}let c=!1;try{c=l.matches(":open")}catch(e){}return a||c}export function OverlayPopover(l){class a extends l{async manageDelay(e){if(e===!1||e!==this.open){m.close(this);return}this.delayed&&await m.openTimer(this)&&(this.open=!e)}async shouldHidePopover(e){if(e&&this.open!==e)return;const o=async({newState:i}={})=>{i!=="open"&&await this.placementController.resetOverlayPosition()};if(!u(this.dialogEl)){o();return}this.dialogEl.addEventListener("toggle",o,{once:!0})}async shouldShowPopover(e){let o=!1;try{o=this.dialogEl.matches(":popover-open")}catch(p){}let i=!1;try{i=this.dialogEl.matches(":open")}catch(p){}e&&this.open===e&&!o&&!i&&this.isConnected&&(this.dialogEl.showPopover(),await this.managePosition())}async ensureOnDOM(e){await h(),await this.shouldHidePopover(e),await this.shouldShowPopover(e),await h()}async makeTransition(e){if(this.open!==e)return null;let o=null;const i=(t,s)=>()=>{if(typeof t.open!="undefined"&&(t.open=e),s===0){const r=e?w:y;this.dispatchEvent(new r)}if(!e||(t.matches(g)&&(o=t),o=o||f(t),o))return;t.querySelectorAll("slot").forEach(r=>{o||(o=E(r))})},p=(t,s)=>async()=>{if(this.open!==e)return;const n=e?"sp-opened":"sp-closed";if(s>0){t.dispatchEvent(new CustomEvent(n,{bubbles:!1,composed:!1,detail:{interaction:this.type}}));return}const r=async()=>{if(this.open!==e)return;await h();const d=this.triggerElement instanceof b;this.dispatchEvent(new Event(n,{bubbles:d,composed:d})),t.dispatchEvent(new CustomEvent(n,{bubbles:!1,composed:!1,detail:{interaction:this.type}})),this.triggerElement&&!d&&this.triggerElement.dispatchEvent(new CustomEvent(n,{bubbles:!0,composed:!0,detail:{interaction:this.type}})),this.state=e?"opened":"closed"};if(this.open!==e)return;const v=u(this.dialogEl);e!==!0&&v&&this.isConnected?(this.dialogEl.addEventListener("beforetoggle",()=>{r()},{once:!0}),this.dialogEl.hidePopover()):r()};return this.elements.forEach((t,s)=>{P(t,i(t,s),p(t,s))}),o}}return a}
+"use strict";import{firstFocusableIn as f,firstFocusableSlottedIn as E}from"@spectrum-web-components/shared/src/first-focusable-in.js";import{VirtualTrigger as b}from"./VirtualTrigger.js";import{BeforetoggleClosedEvent as y,BeforetoggleOpenEvent as w,guaranteedAllTransitionend as P,nextFrame as d,overlayTimer as m}from"./AbstractOverlay.js";import{userFocusableSelector as g}from"@spectrum-web-components/shared";function u(l){let a=!1;try{a=l.matches(":popover-open")}catch(e){}let c=!1;try{c=l.matches(":open")}catch(e){}return a||c}export function OverlayPopover(l){class a extends l{async manageDelay(e){if(e===!1||e!==this.open){m.close(this);return}this.delayed&&await m.openTimer(this)&&(this.open=!e)}async shouldHidePopover(e){if(e&&this.open!==e)return;const o=async({newState:s}={})=>{s!=="open"&&await this.placementController.resetOverlayPosition()};if(!u(this.dialogEl)){o();return}this.dialogEl.addEventListener("toggle",o,{once:!0})}async shouldShowPopover(e){let o=!1;try{o=this.dialogEl.matches(":popover-open")}catch(p){}let s=!1;try{s=this.dialogEl.matches(":open")}catch(p){}e&&this.open===e&&!o&&!s&&this.isConnected&&(this.dialogEl.showPopover(),await this.managePosition())}async ensureOnDOM(e){await d(),await this.shouldHidePopover(e),await this.shouldShowPopover(e),await d()}async makeTransition(e){if(this.open!==e)return null;let o=null;const s=(t,i)=>()=>{if(t.open=e,i===0){const r=e?w:y;this.dispatchEvent(new r)}if(!e||(t.matches(g)&&(o=t),o=o||f(t),o))return;t.querySelectorAll("slot").forEach(r=>{o||(o=E(r))})},p=(t,i)=>async()=>{if(this.open!==e)return;const n=e?"sp-opened":"sp-closed";if(i>0){t.dispatchEvent(new CustomEvent(n,{bubbles:!1,composed:!1,detail:{interaction:this.type}}));return}const r=async()=>{if(this.open!==e)return;await d();const h=this.triggerElement instanceof b;this.dispatchEvent(new Event(n,{bubbles:h,composed:h})),t.dispatchEvent(new CustomEvent(n,{bubbles:!1,composed:!1,detail:{interaction:this.type}})),this.triggerElement&&!h&&this.triggerElement.dispatchEvent(new CustomEvent(n,{bubbles:!0,composed:!0,detail:{interaction:this.type}})),this.state=e?"opened":"closed"};if(this.open!==e)return;const v=u(this.dialogEl);e!==!0&&v&&this.isConnected?(this.dialogEl.addEventListener("beforetoggle",()=>{r()},{once:!0}),this.dialogEl.hidePopover()):r()};return this.elements.forEach((t,i)=>{P(t,s(t,i),p(t,i))}),o}}return a}
 //# sourceMappingURL=OverlayPopover.js.map

package/src/OverlayPopover.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["OverlayPopover.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n    firstFocusableIn,\n    firstFocusableSlottedIn,\n} from '@spectrum-web-components/shared/src/first-focusable-in.js';\nimport type { SpectrumElement } from '@spectrum-web-components/base';\nimport { VirtualTrigger } from './VirtualTrigger.js';\nimport {\n    Constructor,\n    OpenableElement,\n    OverlayOpenCloseDetail,\n} from './overlay-types.js';\nimport {\n    BeforetoggleClosedEvent,\n    BeforetoggleOpenEvent,\n    guaranteedAllTransitionend,\n    nextFrame,\n    overlayTimer,\n} from './AbstractOverlay.js';\nimport type { AbstractOverlay } from './AbstractOverlay.js';\nimport { userFocusableSelector } from '@spectrum-web-components/shared';\n\nfunction isOpen(el: HTMLElement): boolean {\n    let popoverOpen = false;\n    try {\n        popoverOpen = el.matches(':popover-open');\n        // eslint-disable-next-line no-empty\n    } catch (error) {}\n    let open = false;\n    try {\n        open = el.matches(':open');\n        // eslint-disable-next-line no-empty\n    } catch (error) {}\n    return popoverOpen || open;\n}\n\nexport function OverlayPopover<T extends Constructor<AbstractOverlay>>(\n    constructor: T\n): T & Constructor<SpectrumElement> {\n    class OverlayWithPopover extends constructor {\n        protected override async manageDelay(\n            targetOpenState: boolean\n        ): Promise<void> {\n            if (targetOpenState === false || targetOpenState !== this.open) {\n                overlayTimer.close(this);\n                return;\n            }\n            if (this.delayed) {\n                const cancelled = await overlayTimer.openTimer(this);\n                if (cancelled) {\n                    this.open = !targetOpenState;\n                }\n            }\n        }\n\n        /**\n         * A popover should be hidden _after_ it is no longer on top-layer because\n         * the position metrics will have changed from when it was originally positioned.\n         */\n        private async shouldHidePopover(\n            targetOpenState: boolean\n        ): Promise<void> {\n            if (targetOpenState && this.open !== targetOpenState) {\n                return;\n            }\n            const update = async ({\n                newState,\n            }: { newState?: string } = {}): Promise<void> => {\n                if (newState === 'open') {\n                    return;\n                }\n                // When in a parent Overlay, this Overlay may need to position itself\n                // while closing in due to the parent _also_ closing which means the\n                // location can no longer rely on \"top layer over transform\" math.\n                await this.placementController.resetOverlayPosition();\n            };\n            if (!isOpen(this.dialogEl)) {\n                // The means the Overlay was closed from the outside, it is already off of top-layer\n                // so we need to position it in regards to this new state.\n                update();\n                return;\n            }\n            // `toggle` is an async event, so it's possible for this handler to run a frame late\n            this.dialogEl.addEventListener('toggle', update as EventListener, {\n                once: true,\n            });\n        }\n\n        private async shouldShowPopover(\n            targetOpenState: boolean\n        ): Promise<void> {\n            let popoverOpen = false;\n            try {\n                popoverOpen = this.dialogEl.matches(':popover-open');\n                // eslint-disable-next-line no-empty\n            } catch (error) {}\n            let open = false;\n            try {\n                open = this.dialogEl.matches(':open');\n                // eslint-disable-next-line no-empty\n            } catch (error) {}\n            if (\n                targetOpenState &&\n                this.open === targetOpenState &&\n                !popoverOpen &&\n                !open &&\n                this.isConnected\n            ) {\n                this.dialogEl.showPopover();\n                await this.managePosition();\n            }\n        }\n\n        protected override async ensureOnDOM(\n            targetOpenState: boolean\n        ): Promise<void> {\n            await nextFrame();\n            await this.shouldHidePopover(targetOpenState);\n            await this.shouldShowPopover(targetOpenState);\n            await nextFrame();\n        }\n\n        protected override async makeTransition(\n            targetOpenState: boolean\n        ): Promise<HTMLElement | null> {\n            if (this.open !== targetOpenState) {\n                return null;\n            }\n            let focusEl = null as HTMLElement | null;\n            const start = (el: OpenableElement, index: number) => (): void => {\n                if (typeof el.open !== 'undefined') {\n                    el.open = targetOpenState;\n                }\n                if (index === 0) {\n                    const event = targetOpenState\n                        ? BeforetoggleOpenEvent\n                        : BeforetoggleClosedEvent;\n                    this.dispatchEvent(new event());\n                }\n                if (!targetOpenState) {\n                    return;\n                }\n                if (el.matches(userFocusableSelector)) {\n                    focusEl = el;\n                }\n                focusEl = focusEl || firstFocusableIn(el);\n                if (focusEl) {\n                    return;\n                }\n                const childSlots = el.querySelectorAll('slot');\n                childSlots.forEach((slot) => {\n                    if (!focusEl) {\n                        focusEl = firstFocusableSlottedIn(slot);\n                    }\n                });\n            };\n            const finish =\n                (el: OpenableElement, index: number) =>\n                async (): Promise<void> => {\n                    if (this.open !== targetOpenState) {\n                        return;\n                    }\n                    const eventName = targetOpenState\n                        ? 'sp-opened'\n                        : 'sp-closed';\n                    if (index > 0) {\n                        el.dispatchEvent(\n                            new CustomEvent<OverlayOpenCloseDetail>(eventName, {\n                                bubbles: false,\n                                composed: false,\n                                detail: { interaction: this.type },\n                            })\n                        );\n                        return;\n                    }\n                    const reportChange = async (): Promise<void> => {\n                        if (this.open !== targetOpenState) {\n                            return;\n                        }\n                        await nextFrame();\n                        const hasVirtualTrigger =\n                            this.triggerElement instanceof VirtualTrigger;\n                        this.dispatchEvent(\n                            new Event(eventName, {\n                                bubbles: hasVirtualTrigger,\n                                composed: hasVirtualTrigger,\n                            })\n                        );\n                        el.dispatchEvent(\n                            new CustomEvent<OverlayOpenCloseDetail>(eventName, {\n                                bubbles: false,\n                                composed: false,\n                                detail: { interaction: this.type },\n                            })\n                        );\n                        if (this.triggerElement && !hasVirtualTrigger) {\n                            (this.triggerElement as HTMLElement).dispatchEvent(\n                                new CustomEvent<OverlayOpenCloseDetail>(\n                                    eventName,\n                                    {\n                                        bubbles: true,\n                                        composed: true,\n                                        detail: { interaction: this.type },\n                                    }\n                                )\n                            );\n                        }\n                        this.state = targetOpenState ? 'opened' : 'closed';\n                    };\n                    if (this.open !== targetOpenState) {\n                        return;\n                    }\n                    const open = isOpen(this.dialogEl);\n                    if (targetOpenState !== true && open && this.isConnected) {\n                        this.dialogEl.addEventListener(\n                            'beforetoggle',\n                            () => {\n                                reportChange();\n                            },\n                            { once: true }\n                        );\n                        this.dialogEl.hidePopover();\n                    } else {\n                        reportChange();\n                    }\n                };\n            this.elements.forEach((el, index) => {\n                guaranteedAllTransitionend(\n                    el,\n                    start(el, index),\n                    finish(el, index)\n                );\n            });\n            return focusEl;\n        }\n    }\n    return OverlayWithPopover;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n    firstFocusableIn,\n    firstFocusableSlottedIn,\n} from '@spectrum-web-components/shared/src/first-focusable-in.js';\nimport type { SpectrumElement } from '@spectrum-web-components/base';\nimport { VirtualTrigger } from './VirtualTrigger.js';\nimport {\n    Constructor,\n    OpenableElement,\n    OverlayOpenCloseDetail,\n} from './overlay-types.js';\nimport {\n    BeforetoggleClosedEvent,\n    BeforetoggleOpenEvent,\n    guaranteedAllTransitionend,\n    nextFrame,\n    overlayTimer,\n} from './AbstractOverlay.js';\nimport type { AbstractOverlay } from './AbstractOverlay.js';\nimport { userFocusableSelector } from '@spectrum-web-components/shared';\n\nfunction isOpen(el: HTMLElement): boolean {\n    let popoverOpen = false;\n    try {\n        popoverOpen = el.matches(':popover-open');\n        // eslint-disable-next-line no-empty\n    } catch (error) {}\n    let open = false;\n    try {\n        open = el.matches(':open');\n        // eslint-disable-next-line no-empty\n    } catch (error) {}\n    return popoverOpen || open;\n}\n\nexport function OverlayPopover<T extends Constructor<AbstractOverlay>>(\n    constructor: T\n): T & Constructor<SpectrumElement> {\n    class OverlayWithPopover extends constructor {\n        protected override async manageDelay(\n            targetOpenState: boolean\n        ): Promise<void> {\n            if (targetOpenState === false || targetOpenState !== this.open) {\n                overlayTimer.close(this);\n                return;\n            }\n            if (this.delayed) {\n                const cancelled = await overlayTimer.openTimer(this);\n                if (cancelled) {\n                    this.open = !targetOpenState;\n                }\n            }\n        }\n\n        /**\n         * A popover should be hidden _after_ it is no longer on top-layer because\n         * the position metrics will have changed from when it was originally positioned.\n         */\n        private async shouldHidePopover(\n            targetOpenState: boolean\n        ): Promise<void> {\n            if (targetOpenState && this.open !== targetOpenState) {\n                return;\n            }\n            const update = async ({\n                newState,\n            }: { newState?: string } = {}): Promise<void> => {\n                if (newState === 'open') {\n                    return;\n                }\n                // When in a parent Overlay, this Overlay may need to position itself\n                // while closing in due to the parent _also_ closing which means the\n                // location can no longer rely on \"top layer over transform\" math.\n                await this.placementController.resetOverlayPosition();\n            };\n            if (!isOpen(this.dialogEl)) {\n                // The means the Overlay was closed from the outside, it is already off of top-layer\n                // so we need to position it in regards to this new state.\n                update();\n                return;\n            }\n            // `toggle` is an async event, so it's possible for this handler to run a frame late\n            this.dialogEl.addEventListener('toggle', update as EventListener, {\n                once: true,\n            });\n        }\n\n        private async shouldShowPopover(\n            targetOpenState: boolean\n        ): Promise<void> {\n            let popoverOpen = false;\n            try {\n                popoverOpen = this.dialogEl.matches(':popover-open');\n                // eslint-disable-next-line no-empty\n            } catch (error) {}\n            let open = false;\n            try {\n                open = this.dialogEl.matches(':open');\n                // eslint-disable-next-line no-empty\n            } catch (error) {}\n            if (\n                targetOpenState &&\n                this.open === targetOpenState &&\n                !popoverOpen &&\n                !open &&\n                this.isConnected\n            ) {\n                this.dialogEl.showPopover();\n                await this.managePosition();\n            }\n        }\n\n        protected override async ensureOnDOM(\n            targetOpenState: boolean\n        ): Promise<void> {\n            await nextFrame();\n            await this.shouldHidePopover(targetOpenState);\n            await this.shouldShowPopover(targetOpenState);\n            await nextFrame();\n        }\n\n        protected override async makeTransition(\n            targetOpenState: boolean\n        ): Promise<HTMLElement | null> {\n            if (this.open !== targetOpenState) {\n                return null;\n            }\n            let focusEl = null as HTMLElement | null;\n            const start = (el: OpenableElement, index: number) => (): void => {\n                el.open = targetOpenState;\n                if (index === 0) {\n                    const event = targetOpenState\n                        ? BeforetoggleOpenEvent\n                        : BeforetoggleClosedEvent;\n                    this.dispatchEvent(new event());\n                }\n                if (!targetOpenState) {\n                    return;\n                }\n                if (el.matches(userFocusableSelector)) {\n                    focusEl = el;\n                }\n                focusEl = focusEl || firstFocusableIn(el);\n                if (focusEl) {\n                    return;\n                }\n                const childSlots = el.querySelectorAll('slot');\n                childSlots.forEach((slot) => {\n                    if (!focusEl) {\n                        focusEl = firstFocusableSlottedIn(slot);\n                    }\n                });\n            };\n            const finish =\n                (el: OpenableElement, index: number) =>\n                async (): Promise<void> => {\n                    if (this.open !== targetOpenState) {\n                        return;\n                    }\n                    const eventName = targetOpenState\n                        ? 'sp-opened'\n                        : 'sp-closed';\n                    if (index > 0) {\n                        el.dispatchEvent(\n                            new CustomEvent<OverlayOpenCloseDetail>(eventName, {\n                                bubbles: false,\n                                composed: false,\n                                detail: { interaction: this.type },\n                            })\n                        );\n                        return;\n                    }\n                    const reportChange = async (): Promise<void> => {\n                        if (this.open !== targetOpenState) {\n                            return;\n                        }\n                        await nextFrame();\n                        const hasVirtualTrigger =\n                            this.triggerElement instanceof VirtualTrigger;\n                        this.dispatchEvent(\n                            new Event(eventName, {\n                                bubbles: hasVirtualTrigger,\n                                composed: hasVirtualTrigger,\n                            })\n                        );\n                        el.dispatchEvent(\n                            new CustomEvent<OverlayOpenCloseDetail>(eventName, {\n                                bubbles: false,\n                                composed: false,\n                                detail: { interaction: this.type },\n                            })\n                        );\n                        if (this.triggerElement && !hasVirtualTrigger) {\n                            (this.triggerElement as HTMLElement).dispatchEvent(\n                                new CustomEvent<OverlayOpenCloseDetail>(\n                                    eventName,\n                                    {\n                                        bubbles: true,\n                                        composed: true,\n                                        detail: { interaction: this.type },\n                                    }\n                                )\n                            );\n                        }\n                        this.state = targetOpenState ? 'opened' : 'closed';\n                    };\n                    if (this.open !== targetOpenState) {\n                        return;\n                    }\n                    const open = isOpen(this.dialogEl);\n                    if (targetOpenState !== true && open && this.isConnected) {\n                        this.dialogEl.addEventListener(\n                            'beforetoggle',\n                            () => {\n                                reportChange();\n                            },\n                            { once: true }\n                        );\n                        this.dialogEl.hidePopover();\n                    } else {\n                        reportChange();\n                    }\n                };\n            this.elements.forEach((el, index) => {\n                guaranteedAllTransitionend(\n                    el,\n                    start(el, index),\n                    finish(el, index)\n                );\n            });\n            return focusEl;\n        }\n    }\n    return OverlayWithPopover;\n}\n"],
+  "mappings": "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",
   "names": ["firstFocusableIn", "firstFocusableSlottedIn", "VirtualTrigger", "BeforetoggleClosedEvent", "BeforetoggleOpenEvent", "guaranteedAllTransitionend", "nextFrame", "overlayTimer", "userFocusableSelector", "isOpen", "el", "popoverOpen", "error", "open", "constructor", "OverlayWithPopover", "targetOpenState", "update", "newState", "focusEl", "start", "index", "event", "slot", "finish", "eventName", "reportChange", "hasVirtualTrigger"]
 }

package/stories/index.js

@@ -0,0 +1,40 @@
+"use strict";
+import { html } from "@spectrum-web-components/base";
+function nextFrame() {
+  return new Promise((res) => requestAnimationFrame(() => res()));
+}
+class IsOverlayOpen extends HTMLElement {
+  constructor() {
+    super();
+    this.handleOpened = async (event) => {
+      const overlay = event.target;
+      const actions = [nextFrame(), overlay.updateComplete];
+      await Promise.all(actions);
+      await nextFrame();
+      await nextFrame();
+      await nextFrame();
+      await nextFrame();
+      this.ready(true);
+    };
+    this.readyPromise = Promise.resolve(false);
+    this.readyPromise = new Promise((res) => {
+      this.ready = res;
+      this.setup();
+    });
+  }
+  async setup() {
+    await nextFrame();
+    document.addEventListener("sp-opened", this.handleOpened);
+  }
+  get updateComplete() {
+    return this.readyPromise;
+  }
+}
+customElements.define("is-overlay-open", IsOverlayOpen);
+export const isOverlayOpen = (story) => {
+  return html`
+        ${story()}
+        <is-overlay-open></is-overlay-open>
+    `;
+};
+//# sourceMappingURL=index.js.map

package/stories/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["index.ts"],
+  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport type { Overlay } from '@spectrum-web-components/overlay';\n\nfunction nextFrame(): Promise<void> {\n    return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nclass IsOverlayOpen extends HTMLElement {\n    ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n    constructor() {\n        super();\n        this.readyPromise = new Promise((res) => {\n            this.ready = res;\n            this.setup();\n        });\n    }\n\n    async setup(): Promise<void> {\n        await nextFrame();\n\n        document.addEventListener('sp-opened', this.handleOpened);\n    }\n\n    handleOpened = async (event: Event): Promise<void> => {\n        const overlay = event.target as Overlay;\n        const actions = [nextFrame(), overlay.updateComplete];\n\n        await Promise.all(actions);\n        // Focus happens _after_ `sp-opened` by at least two frames.\n        await nextFrame();\n        await nextFrame();\n        await nextFrame();\n        await nextFrame();\n\n        this.ready(true);\n    };\n\n    private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n    get updateComplete(): Promise<boolean> {\n        return this.readyPromise;\n    }\n}\n\ncustomElements.define('is-overlay-open', IsOverlayOpen);\n\nexport const isOverlayOpen = (story: () => TemplateResult): TemplateResult => {\n    return html`\n        ${story()}\n        <is-overlay-open></is-overlay-open>\n    `;\n};\n"],
+  "mappings": ";AAYA,SAAS,YAA4B;AAGrC,SAAS,YAA2B;AAChC,SAAO,IAAI,QAAQ,CAAC,QAAQ,sBAAsB,MAAM,IAAI,CAAC,CAAC;AAClE;AAEA,MAAM,sBAAsB,YAAY;AAAA,EAGpC,cAAc;AACV,UAAM;AAaV,wBAAe,OAAO,UAAgC;AAClD,YAAM,UAAU,MAAM;AACtB,YAAM,UAAU,CAAC,UAAU,GAAG,QAAQ,cAAc;AAEpD,YAAM,QAAQ,IAAI,OAAO;AAEzB,YAAM,UAAU;AAChB,YAAM,UAAU;AAChB,YAAM,UAAU;AAChB,YAAM,UAAU;AAEhB,WAAK,MAAM,IAAI;AAAA,IACnB;AAEA,SAAQ,eAAiC,QAAQ,QAAQ,KAAK;AA1B1D,SAAK,eAAe,IAAI,QAAQ,CAAC,QAAQ;AACrC,WAAK,QAAQ;AACb,WAAK,MAAM;AAAA,IACf,CAAC;AAAA,EACL;AAAA,EAEA,MAAM,QAAuB;AACzB,UAAM,UAAU;AAEhB,aAAS,iBAAiB,aAAa,KAAK,YAAY;AAAA,EAC5D;AAAA,EAkBA,IAAI,iBAAmC;AACnC,WAAO,KAAK;AAAA,EAChB;AACJ;AAEA,eAAe,OAAO,mBAAmB,aAAa;AAE/C,aAAM,gBAAgB,CAAC,UAAgD;AAC1E,SAAO;AAAA,UACD,MAAM,CAAC;AAAA;AAAA;AAGjB;",
+  "names": []
+}

package/stories/overlay-element.stories.js

@@ -14,6 +14,7 @@ import "@spectrum-web-components/icons-workflow/icons/sp-icon-anchor-select.js";
 import "@spectrum-web-components/icons-workflow/icons/sp-icon-polygon-select.js";
 import "@spectrum-web-components/icons-workflow/icons/sp-icon-rect-select.js";
 import { notAgain } from "../../dialog/stories/dialog-base.stories.js";
+import "./overlay-story-components.js";
 export default {
   title: "Overlay Element",
   component: "sp-overlay",
@@ -547,4 +548,10 @@ export const actionGroupWithFilters = ({
         </sp-overlay>
     `;
 };
+export const transientHover = () => html`
+    <transient-hover></transient-hover>
+`;
+transientHover.swc_vrt = {
+  skip: true
+};
 //# sourceMappingURL=overlay-element.stories.js.map

package/stories/overlay-element.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["overlay-element.stories.ts"],
-  "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-anchor-select.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-polygon-select.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-rect-select.js';\nimport { Placement } from '@floating-ui/dom';\nimport { OverlayTypes } from '../src/overlay-types.js';\nimport { notAgain } from '../../dialog/stories/dialog-base.stories.js';\n\nexport default {\n    title: 'Overlay Element',\n    component: 'sp-overlay',\n    args: {\n        open: true,\n        delayed: false,\n    },\n    argTypes: {\n        open: {\n            name: 'open',\n            type: { name: 'boolean', required: false },\n            description: 'Whether the second accordion item is open.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        delayed: {\n            name: 'delayed',\n            type: { name: 'boolean', required: false },\n            description: 'Whether the tooltips are delayed.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n    },\n};\n\ntype Properties = {\n    delayed: boolean;\n    interaction: 'click' | 'hover' | 'longpress';\n    open?: boolean;\n    placement?: Placement;\n    receivesFocus: 'true' | 'false' | 'auto';\n    type?: OverlayTypes;\n};\n\nconst Template = ({\n    interaction,\n    open,\n    placement,\n    type,\n    delayed,\n}: Properties): TemplateResult => html`\n    <style>\n        .wrapper {\n            will-change: transform;\n        }\n    </style>\n    <div class=\"wrapper\">\n        <sp-action-button id=\"trigger\">Open the overlay</sp-action-button>\n        <sp-overlay\n            ?open=${open}\n            trigger=\"trigger@${interaction}\"\n            type=${ifDefined(type)}\n            placement=${ifDefined(placement)}\n            offset=\"-10\"\n        >\n            <sp-popover dialog ?delayed=${delayed}>\n                <p>\n                    Content goes here.\n                    ${type === 'modal' || type === 'page'\n                        ? html`\n                              Or, a link,\n                              <sp-link\n                                  href=\"https://opensource.adobe.com/spectrum-web-components\"\n                              >\n                                  Spectrum Web Components\n                              </sp-link>\n                              .\n                          `\n                        : ''}\n                </p>\n            </sp-popover>\n        </sp-overlay>\n    </div>\n`;\n\nexport const modal = (args: Properties): TemplateResult => Template(args);\nmodal.args = {\n    interaction: 'click',\n    placement: 'right',\n    type: 'modal',\n};\n\nexport const page = ({\n    interaction,\n    open,\n    placement,\n    type,\n}: Properties): TemplateResult => html`\n    <sp-action-button id=\"trigger\">Open the overlay</sp-action-button>\n    <sp-overlay\n        ?open=${open}\n        trigger=\"trigger@${interaction}\"\n        type=${ifDefined(type)}\n        placement=${ifDefined(placement)}\n    >\n        ${notAgain()}\n    </sp-overlay>\n`;\npage.args = {\n    interaction: 'click',\n    placement: 'right',\n    type: 'page',\n};\n\nexport const click = (args: Properties): TemplateResult => Template(args);\nclick.args = {\n    interaction: 'click',\n    placement: 'right',\n    type: 'auto',\n};\n\nexport const hover = (args: Properties): TemplateResult => Template(args);\nhover.args = {\n    interaction: 'hover',\n    placement: 'right',\n};\n\nexport const longpress = (args: Properties): TemplateResult => Template(args);\nlongpress.args = {\n    interaction: 'longpress',\n    placement: 'right',\n    type: 'auto',\n};\n\n/**\n * Proxy for fully encapsulated overlay containers that need to\n * pass `focus` into a shadow child element.\n */\nexport const receivesFocus = ({\n    interaction,\n    open,\n    placement,\n    receivesFocus,\n    type,\n}: Properties): TemplateResult => html`\n    <sp-action-button id=\"trigger\">\n        Open the overlay (with focus)\n    </sp-action-button>\n    <sp-overlay\n        ?open=${open}\n        trigger=\"trigger@${interaction}\"\n        type=${ifDefined(type)}\n        placement=${ifDefined(placement)}\n        .receivesFocus=${receivesFocus}\n    >\n        <a href=\"https://example.com\">Click Content</a>\n    </sp-overlay>\n`;\nreceivesFocus.args = {\n    interaction: 'click',\n    placement: 'bottom-start',\n    type: 'auto',\n    receivesFocus: 'true',\n} as Properties;\n\nexport const transformed = (args: Properties): TemplateResult => html`\n    <style>\n        .transformed {\n            transform: translateX(-50%);\n            position: absolute;\n            inset: auto;\n            inset-inline-start: 200px;\n            inset-block-start: 200px;\n            inline-size: 100px;\n            block-size: 50px;\n        }\n    </style>\n    <div class=\"transformed\">${Template(args)}</div>\n`;\ntransformed.args = {\n    interaction: 'click',\n    placement: 'right',\n    type: 'auto',\n};\n\nexport const contained = (args: Properties): TemplateResult => html`\n    <style>\n        .contained {\n            contain: strict;\n            position: absolute;\n            inset: auto;\n            inset-inline-start: 200px;\n            inset-block-start: 200px;\n            inline-size: 200px;\n            block-size: 50px;\n            padding-block: 75px;\n            padding-inline-start: 300px;\n        }\n    </style>\n    <div class=\"contained\">${Template(args)}</div>\n`;\ncontained.args = {\n    interaction: 'click',\n    placement: 'right',\n    type: 'auto',\n};\n\nexport const all = ({ delayed }: Properties): TemplateResult => html`\n    <sp-action-button id=\"trigger\" hold-affordance>\n        Open the overlay\n    </sp-action-button>\n    <sp-overlay trigger=\"trigger@click\" type=\"auto\" placement=\"right\">\n        <sp-popover dialog>Click content</sp-popover>\n    </sp-overlay>\n    <sp-overlay ?delayed=${delayed} trigger=\"trigger@hover\" type=\"hint\">\n        <sp-tooltip>Hover content</sp-tooltip>\n    </sp-overlay>\n    <sp-overlay trigger=\"trigger@longpress\" type=\"auto\" placement=\"right\">\n        <sp-popover dialog>Longpress content</sp-popover>\n    </sp-overlay>\n`;\n\nexport const actionGroup = ({ delayed }: Properties): TemplateResult => {\n    const popoverOffset = [6, -13] as [number, number];\n    return html`\n        <style>\n            sp-popover sp-action-group {\n                padding: calc(\n                        var(--spectrum-actiongroup-vertical-spacing-regular) *\n                            0.75\n                    )\n                    calc(\n                        var(--spectrum-actiongroup-vertical-spacing-regular) / 2\n                    );\n            }\n            .root {\n                inset-inline-end: 0em;\n                inset-block-start: 3em;\n                padding-block-end: 3em;\n            }\n            .root > sp-action-group > sp-action-button,\n            .root > sp-action-group > sp-action-menu {\n                top: 3em;\n                position: relative;\n            }\n        </style>\n        <sp-popover open class=\"root\">\n            <sp-action-group vertical quiet emphasized selects=\"single\">\n                <sp-action-button id=\"trigger-1\" hold-affordance>\n                    <sp-icon-anchor-select slot=\"icon\"></sp-icon-anchor-select>\n                </sp-action-button>\n                <sp-action-button id=\"trigger-2\" hold-affordance>\n                    <sp-icon-polygon-select\n                        slot=\"icon\"\n                    ></sp-icon-polygon-select>\n                </sp-action-button>\n                <sp-action-button id=\"trigger-3\" hold-affordance>\n                    <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n                </sp-action-button>\n                <sp-action-menu placement=\"left\">\n                    <sp-menu-group id=\"cms\">\n                        <span slot=\"header\">cms</span>\n                        <sp-menu-item value=\"updateAllSiteContent\">\n                            Update All Content\n                        </sp-menu-item>\n                        <sp-menu-item value=\"refreshAllXDs\">\n                            Refresh All XDs\n                        </sp-menu-item>\n                    </sp-menu-group>\n                    <sp-menu-group id=\"ssg\">\n                        <span slot=\"header\">ssg</span>\n                        <sp-menu-item value=\"clearCache\">\n                            Clear Cache\n                        </sp-menu-item>\n                    </sp-menu-group>\n                    <sp-menu-group id=\"vrt\">\n                        <span slot=\"header\">vrt</span>\n                        <sp-menu-item value=\"vrt-contributions\">\n                            Contributions\n                        </sp-menu-item>\n                        <sp-menu-item value=\"vrt-internal\">\n                            Internal\n                        </sp-menu-item>\n                        <sp-menu-item value=\"vrt-public\">Public</sp-menu-item>\n                        <sp-menu-item value=\"vrt-patterns\">\n                            Patterns\n                        </sp-menu-item>\n                        <sp-menu-item value=\"vrt\">All</sp-menu-item>\n                    </sp-menu-group>\n                    <sp-menu-divider></sp-menu-divider>\n                    <sp-menu-group id=\"misc\">\n                        <sp-menu-item value=\"logout\">Logout</sp-menu-item>\n                    </sp-menu-group>\n                </sp-action-menu>\n            </sp-action-group>\n        </sp-popover>\n        <sp-overlay ?delayed=${delayed} trigger=\"trigger-1@hover\" type=\"hint\">\n            <sp-tooltip>Hover</sp-tooltip>\n        </sp-overlay>\n        <sp-overlay\n            trigger=\"trigger-1@longpress\"\n            type=\"auto\"\n            placement=\"right-start\"\n            .offset=${popoverOffset}\n        >\n            <sp-popover tip>\n                <sp-action-group vertical quiet>\n                    <sp-action-button>\n                        <sp-icon-anchor-select\n                            slot=\"icon\"\n                        ></sp-icon-anchor-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-polygon-select\n                            slot=\"icon\"\n                        ></sp-icon-polygon-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n                    </sp-action-button>\n                </sp-action-group>\n            </sp-popover>\n        </sp-overlay>\n        <sp-overlay ?delayed=${delayed} trigger=\"trigger-2@hover\" type=\"hint\">\n            <sp-tooltip>Hover</sp-tooltip>\n        </sp-overlay>\n        <sp-overlay\n            trigger=\"trigger-2@longpress\"\n            type=\"auto\"\n            placement=\"right-start\"\n            .offset=${popoverOffset}\n        >\n            <sp-popover tip>\n                <sp-action-group vertical quiet>\n                    <sp-action-button>\n                        <sp-icon-anchor-select\n                            slot=\"icon\"\n                        ></sp-icon-anchor-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-polygon-select\n                            slot=\"icon\"\n                        ></sp-icon-polygon-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n                    </sp-action-button>\n                </sp-action-group>\n            </sp-popover>\n        </sp-overlay>\n        <sp-overlay\n            ?delayed=${delayed}\n            trigger=\"trigger-3@hover\"\n            type=\"hint\"\n            open\n        >\n            <sp-tooltip>Hover</sp-tooltip>\n        </sp-overlay>\n        <sp-overlay\n            trigger=\"trigger-3@longpress\"\n            type=\"auto\"\n            placement=\"right-start\"\n            .offset=${popoverOffset}\n        >\n            <sp-popover tip>\n                <sp-action-group vertical quiet>\n                    <sp-action-button>\n                        <sp-icon-anchor-select\n                            slot=\"icon\"\n                        ></sp-icon-anchor-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-polygon-select\n                            slot=\"icon\"\n                        ></sp-icon-polygon-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n                    </sp-action-button>\n                </sp-action-group>\n            </sp-popover>\n        </sp-overlay>\n    `;\n};\n\nexport const actionGroupWithFilters = ({\n    delayed,\n}: Properties): TemplateResult => {\n    const popoverOffset = [6, -13] as [number, number];\n    return html`\n        <style>\n            sp-popover sp-action-group {\n                padding: calc(\n                        var(--spectrum-actiongroup-vertical-spacing-regular) *\n                            0.75\n                    )\n                    calc(\n                        var(--spectrum-actiongroup-vertical-spacing-regular) / 2\n                    );\n            }\n            .root {\n                inset-inline-end: 0em;\n                inset-block-start: 3em;\n                padding-block-end: 3em;\n                overflow: hidden;\n            }\n            .root > sp-action-group > sp-action-button,\n            .root > sp-action-group > sp-action-menu {\n                top: 3em;\n                position: relative;\n            }\n            sp-action-button,\n            sp-action-menu {\n                background-image: linear-gradient(\n                    rgba(125, 125, 125, 0.2),\n                    rgba(125, 125, 125, 0.2)\n                );\n                background-blend-mode: multiply;\n                filter: brightness(1) saturate(1);\n            }\n        </style>\n        <p>\n            This story outlines some CSS usage that is not yet covered by the\n            placement calculations within the Overlay API.\n        </p>\n        <sp-popover open class=\"root\">\n            <sp-action-group vertical quiet emphasized selects=\"single\">\n                <sp-action-button id=\"trigger-1\" hold-affordance>\n                    <sp-icon-anchor-select slot=\"icon\"></sp-icon-anchor-select>\n                    <sp-tooltip ?delayed=${delayed} self-managed>\n                        Hover\n                    </sp-tooltip>\n                    <sp-overlay\n                        trigger=\"trigger-1@longpress\"\n                        type=\"auto\"\n                        placement=\"right-start\"\n                        .offset=${popoverOffset}\n                    >\n                        <sp-popover tip>\n                            <sp-action-group vertical quiet>\n                                <sp-action-button>\n                                    <sp-icon-anchor-select\n                                        slot=\"icon\"\n                                    ></sp-icon-anchor-select>\n                                </sp-action-button>\n                                <sp-action-button>\n                                    <sp-icon-polygon-select\n                                        slot=\"icon\"\n                                    ></sp-icon-polygon-select>\n                                </sp-action-button>\n                                <sp-action-button>\n                                    <sp-icon-rect-select\n                                        slot=\"icon\"\n                                    ></sp-icon-rect-select>\n                                </sp-action-button>\n                            </sp-action-group>\n                        </sp-popover>\n                    </sp-overlay>\n                </sp-action-button>\n                <sp-action-button id=\"trigger-2\" hold-affordance>\n                    <sp-icon-polygon-select\n                        slot=\"icon\"\n                    ></sp-icon-polygon-select>\n                </sp-action-button>\n                <sp-action-button id=\"trigger-3\" hold-affordance>\n                    <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n                    <sp-tooltip ?delayed=${delayed} self-managed>\n                        Hover\n                    </sp-tooltip>\n                </sp-action-button>\n                <sp-action-menu>\n                    <sp-menu-group id=\"cms\">\n                        <span slot=\"header\">cms</span>\n                        <sp-menu-item value=\"updateAllSiteContent\">\n                            Update All Content\n                        </sp-menu-item>\n                        <sp-menu-item value=\"refreshAllXDs\">\n                            Refresh All XDs\n                        </sp-menu-item>\n                    </sp-menu-group>\n                    <sp-menu-group id=\"ssg\">\n                        <span slot=\"header\">ssg</span>\n                        <sp-menu-item value=\"clearCache\">\n                            Clear Cache\n                        </sp-menu-item>\n                    </sp-menu-group>\n                    <sp-menu-group id=\"vrt\">\n                        <span slot=\"header\">vrt</span>\n                        <sp-menu-item value=\"vrt-contributions\">\n                            Contributions\n                        </sp-menu-item>\n                        <sp-menu-item value=\"vrt-internal\">\n                            Internal\n                        </sp-menu-item>\n                        <sp-menu-item value=\"vrt-public\">Public</sp-menu-item>\n                        <sp-menu-item value=\"vrt-patterns\">\n                            Patterns\n                        </sp-menu-item>\n                        <sp-menu-item value=\"vrt\">All</sp-menu-item>\n                    </sp-menu-group>\n                    <sp-menu-divider></sp-menu-divider>\n                    <sp-menu-group id=\"misc\">\n                        <sp-menu-item value=\"logout\">Logout</sp-menu-item>\n                    </sp-menu-group>\n                </sp-action-menu>\n            </sp-action-group>\n        </sp-popover>\n        <sp-overlay ?delayed=${delayed} trigger=\"trigger-2@hover\" type=\"hint\">\n            <sp-tooltip>Hover</sp-tooltip>\n        </sp-overlay>\n        <sp-overlay\n            trigger=\"trigger-2@longpress\"\n            type=\"auto\"\n            placement=\"right-start\"\n            .offset=${popoverOffset}\n        >\n            <sp-popover tip>\n                <sp-action-group vertical quiet>\n                    <sp-action-button>\n                        <sp-icon-anchor-select\n                            slot=\"icon\"\n                        ></sp-icon-anchor-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-polygon-select\n                            slot=\"icon\"\n                        ></sp-icon-polygon-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n                    </sp-action-button>\n                </sp-action-group>\n            </sp-popover>\n        </sp-overlay>\n        <sp-overlay\n            trigger=\"trigger-3@longpress\"\n            type=\"auto\"\n            placement=\"right-start\"\n            .offset=${popoverOffset}\n        >\n            <sp-popover tip>\n                <sp-action-group vertical quiet>\n                    <sp-action-button>\n                        <sp-icon-anchor-select\n                            slot=\"icon\"\n                        ></sp-icon-anchor-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-polygon-select\n                            slot=\"icon\"\n                        ></sp-icon-polygon-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n                    </sp-action-button>\n                </sp-action-group>\n            </sp-popover>\n        </sp-overlay>\n    `;\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-anchor-select.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-polygon-select.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-rect-select.js';\nimport { Placement } from '@floating-ui/dom';\nimport { OverlayTypes } from '../src/overlay-types.js';\nimport { notAgain } from '../../dialog/stories/dialog-base.stories.js';\nimport './overlay-story-components.js';\n\nexport default {\n    title: 'Overlay Element',\n    component: 'sp-overlay',\n    args: {\n        open: true,\n        delayed: false,\n    },\n    argTypes: {\n        open: {\n            name: 'open',\n            type: { name: 'boolean', required: false },\n            description: 'Whether the second accordion item is open.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        delayed: {\n            name: 'delayed',\n            type: { name: 'boolean', required: false },\n            description: 'Whether the tooltips are delayed.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n    },\n};\n\ntype Properties = {\n    delayed: boolean;\n    interaction: 'click' | 'hover' | 'longpress';\n    open?: boolean;\n    placement?: Placement;\n    receivesFocus: 'true' | 'false' | 'auto';\n    type?: OverlayTypes;\n};\n\nconst Template = ({\n    interaction,\n    open,\n    placement,\n    type,\n    delayed,\n}: Properties): TemplateResult => html`\n    <style>\n        .wrapper {\n            will-change: transform;\n        }\n    </style>\n    <div class=\"wrapper\">\n        <sp-action-button id=\"trigger\">Open the overlay</sp-action-button>\n        <sp-overlay\n            ?open=${open}\n            trigger=\"trigger@${interaction}\"\n            type=${ifDefined(type)}\n            placement=${ifDefined(placement)}\n            offset=\"-10\"\n        >\n            <sp-popover dialog ?delayed=${delayed}>\n                <p>\n                    Content goes here.\n                    ${type === 'modal' || type === 'page'\n                        ? html`\n                              Or, a link,\n                              <sp-link\n                                  href=\"https://opensource.adobe.com/spectrum-web-components\"\n                              >\n                                  Spectrum Web Components\n                              </sp-link>\n                              .\n                          `\n                        : ''}\n                </p>\n            </sp-popover>\n        </sp-overlay>\n    </div>\n`;\n\nexport const modal = (args: Properties): TemplateResult => Template(args);\nmodal.args = {\n    interaction: 'click',\n    placement: 'right',\n    type: 'modal',\n};\n\nexport const page = ({\n    interaction,\n    open,\n    placement,\n    type,\n}: Properties): TemplateResult => html`\n    <sp-action-button id=\"trigger\">Open the overlay</sp-action-button>\n    <sp-overlay\n        ?open=${open}\n        trigger=\"trigger@${interaction}\"\n        type=${ifDefined(type)}\n        placement=${ifDefined(placement)}\n    >\n        ${notAgain()}\n    </sp-overlay>\n`;\npage.args = {\n    interaction: 'click',\n    placement: 'right',\n    type: 'page',\n};\n\nexport const click = (args: Properties): TemplateResult => Template(args);\nclick.args = {\n    interaction: 'click',\n    placement: 'right',\n    type: 'auto',\n};\n\nexport const hover = (args: Properties): TemplateResult => Template(args);\nhover.args = {\n    interaction: 'hover',\n    placement: 'right',\n};\n\nexport const longpress = (args: Properties): TemplateResult => Template(args);\nlongpress.args = {\n    interaction: 'longpress',\n    placement: 'right',\n    type: 'auto',\n};\n\n/**\n * Proxy for fully encapsulated overlay containers that need to\n * pass `focus` into a shadow child element.\n */\nexport const receivesFocus = ({\n    interaction,\n    open,\n    placement,\n    receivesFocus,\n    type,\n}: Properties): TemplateResult => html`\n    <sp-action-button id=\"trigger\">\n        Open the overlay (with focus)\n    </sp-action-button>\n    <sp-overlay\n        ?open=${open}\n        trigger=\"trigger@${interaction}\"\n        type=${ifDefined(type)}\n        placement=${ifDefined(placement)}\n        .receivesFocus=${receivesFocus}\n    >\n        <a href=\"https://example.com\">Click Content</a>\n    </sp-overlay>\n`;\nreceivesFocus.args = {\n    interaction: 'click',\n    placement: 'bottom-start',\n    type: 'auto',\n    receivesFocus: 'true',\n} as Properties;\n\nexport const transformed = (args: Properties): TemplateResult => html`\n    <style>\n        .transformed {\n            transform: translateX(-50%);\n            position: absolute;\n            inset: auto;\n            inset-inline-start: 200px;\n            inset-block-start: 200px;\n            inline-size: 100px;\n            block-size: 50px;\n        }\n    </style>\n    <div class=\"transformed\">${Template(args)}</div>\n`;\ntransformed.args = {\n    interaction: 'click',\n    placement: 'right',\n    type: 'auto',\n};\n\nexport const contained = (args: Properties): TemplateResult => html`\n    <style>\n        .contained {\n            contain: strict;\n            position: absolute;\n            inset: auto;\n            inset-inline-start: 200px;\n            inset-block-start: 200px;\n            inline-size: 200px;\n            block-size: 50px;\n            padding-block: 75px;\n            padding-inline-start: 300px;\n        }\n    </style>\n    <div class=\"contained\">${Template(args)}</div>\n`;\ncontained.args = {\n    interaction: 'click',\n    placement: 'right',\n    type: 'auto',\n};\n\nexport const all = ({ delayed }: Properties): TemplateResult => html`\n    <sp-action-button id=\"trigger\" hold-affordance>\n        Open the overlay\n    </sp-action-button>\n    <sp-overlay trigger=\"trigger@click\" type=\"auto\" placement=\"right\">\n        <sp-popover dialog>Click content</sp-popover>\n    </sp-overlay>\n    <sp-overlay ?delayed=${delayed} trigger=\"trigger@hover\" type=\"hint\">\n        <sp-tooltip>Hover content</sp-tooltip>\n    </sp-overlay>\n    <sp-overlay trigger=\"trigger@longpress\" type=\"auto\" placement=\"right\">\n        <sp-popover dialog>Longpress content</sp-popover>\n    </sp-overlay>\n`;\n\nexport const actionGroup = ({ delayed }: Properties): TemplateResult => {\n    const popoverOffset = [6, -13] as [number, number];\n    return html`\n        <style>\n            sp-popover sp-action-group {\n                padding: calc(\n                        var(--spectrum-actiongroup-vertical-spacing-regular) *\n                            0.75\n                    )\n                    calc(\n                        var(--spectrum-actiongroup-vertical-spacing-regular) / 2\n                    );\n            }\n            .root {\n                inset-inline-end: 0em;\n                inset-block-start: 3em;\n                padding-block-end: 3em;\n            }\n            .root > sp-action-group > sp-action-button,\n            .root > sp-action-group > sp-action-menu {\n                top: 3em;\n                position: relative;\n            }\n        </style>\n        <sp-popover open class=\"root\">\n            <sp-action-group vertical quiet emphasized selects=\"single\">\n                <sp-action-button id=\"trigger-1\" hold-affordance>\n                    <sp-icon-anchor-select slot=\"icon\"></sp-icon-anchor-select>\n                </sp-action-button>\n                <sp-action-button id=\"trigger-2\" hold-affordance>\n                    <sp-icon-polygon-select\n                        slot=\"icon\"\n                    ></sp-icon-polygon-select>\n                </sp-action-button>\n                <sp-action-button id=\"trigger-3\" hold-affordance>\n                    <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n                </sp-action-button>\n                <sp-action-menu placement=\"left\">\n                    <sp-menu-group id=\"cms\">\n                        <span slot=\"header\">cms</span>\n                        <sp-menu-item value=\"updateAllSiteContent\">\n                            Update All Content\n                        </sp-menu-item>\n                        <sp-menu-item value=\"refreshAllXDs\">\n                            Refresh All XDs\n                        </sp-menu-item>\n                    </sp-menu-group>\n                    <sp-menu-group id=\"ssg\">\n                        <span slot=\"header\">ssg</span>\n                        <sp-menu-item value=\"clearCache\">\n                            Clear Cache\n                        </sp-menu-item>\n                    </sp-menu-group>\n                    <sp-menu-group id=\"vrt\">\n                        <span slot=\"header\">vrt</span>\n                        <sp-menu-item value=\"vrt-contributions\">\n                            Contributions\n                        </sp-menu-item>\n                        <sp-menu-item value=\"vrt-internal\">\n                            Internal\n                        </sp-menu-item>\n                        <sp-menu-item value=\"vrt-public\">Public</sp-menu-item>\n                        <sp-menu-item value=\"vrt-patterns\">\n                            Patterns\n                        </sp-menu-item>\n                        <sp-menu-item value=\"vrt\">All</sp-menu-item>\n                    </sp-menu-group>\n                    <sp-menu-divider></sp-menu-divider>\n                    <sp-menu-group id=\"misc\">\n                        <sp-menu-item value=\"logout\">Logout</sp-menu-item>\n                    </sp-menu-group>\n                </sp-action-menu>\n            </sp-action-group>\n        </sp-popover>\n        <sp-overlay ?delayed=${delayed} trigger=\"trigger-1@hover\" type=\"hint\">\n            <sp-tooltip>Hover</sp-tooltip>\n        </sp-overlay>\n        <sp-overlay\n            trigger=\"trigger-1@longpress\"\n            type=\"auto\"\n            placement=\"right-start\"\n            .offset=${popoverOffset}\n        >\n            <sp-popover tip>\n                <sp-action-group vertical quiet>\n                    <sp-action-button>\n                        <sp-icon-anchor-select\n                            slot=\"icon\"\n                        ></sp-icon-anchor-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-polygon-select\n                            slot=\"icon\"\n                        ></sp-icon-polygon-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n                    </sp-action-button>\n                </sp-action-group>\n            </sp-popover>\n        </sp-overlay>\n        <sp-overlay ?delayed=${delayed} trigger=\"trigger-2@hover\" type=\"hint\">\n            <sp-tooltip>Hover</sp-tooltip>\n        </sp-overlay>\n        <sp-overlay\n            trigger=\"trigger-2@longpress\"\n            type=\"auto\"\n            placement=\"right-start\"\n            .offset=${popoverOffset}\n        >\n            <sp-popover tip>\n                <sp-action-group vertical quiet>\n                    <sp-action-button>\n                        <sp-icon-anchor-select\n                            slot=\"icon\"\n                        ></sp-icon-anchor-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-polygon-select\n                            slot=\"icon\"\n                        ></sp-icon-polygon-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n                    </sp-action-button>\n                </sp-action-group>\n            </sp-popover>\n        </sp-overlay>\n        <sp-overlay\n            ?delayed=${delayed}\n            trigger=\"trigger-3@hover\"\n            type=\"hint\"\n            open\n        >\n            <sp-tooltip>Hover</sp-tooltip>\n        </sp-overlay>\n        <sp-overlay\n            trigger=\"trigger-3@longpress\"\n            type=\"auto\"\n            placement=\"right-start\"\n            .offset=${popoverOffset}\n        >\n            <sp-popover tip>\n                <sp-action-group vertical quiet>\n                    <sp-action-button>\n                        <sp-icon-anchor-select\n                            slot=\"icon\"\n                        ></sp-icon-anchor-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-polygon-select\n                            slot=\"icon\"\n                        ></sp-icon-polygon-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n                    </sp-action-button>\n                </sp-action-group>\n            </sp-popover>\n        </sp-overlay>\n    `;\n};\n\nexport const actionGroupWithFilters = ({\n    delayed,\n}: Properties): TemplateResult => {\n    const popoverOffset = [6, -13] as [number, number];\n    return html`\n        <style>\n            sp-popover sp-action-group {\n                padding: calc(\n                        var(--spectrum-actiongroup-vertical-spacing-regular) *\n                            0.75\n                    )\n                    calc(\n                        var(--spectrum-actiongroup-vertical-spacing-regular) / 2\n                    );\n            }\n            .root {\n                inset-inline-end: 0em;\n                inset-block-start: 3em;\n                padding-block-end: 3em;\n                overflow: hidden;\n            }\n            .root > sp-action-group > sp-action-button,\n            .root > sp-action-group > sp-action-menu {\n                top: 3em;\n                position: relative;\n            }\n            sp-action-button,\n            sp-action-menu {\n                background-image: linear-gradient(\n                    rgba(125, 125, 125, 0.2),\n                    rgba(125, 125, 125, 0.2)\n                );\n                background-blend-mode: multiply;\n                filter: brightness(1) saturate(1);\n            }\n        </style>\n        <p>\n            This story outlines some CSS usage that is not yet covered by the\n            placement calculations within the Overlay API.\n        </p>\n        <sp-popover open class=\"root\">\n            <sp-action-group vertical quiet emphasized selects=\"single\">\n                <sp-action-button id=\"trigger-1\" hold-affordance>\n                    <sp-icon-anchor-select slot=\"icon\"></sp-icon-anchor-select>\n                    <sp-tooltip ?delayed=${delayed} self-managed>\n                        Hover\n                    </sp-tooltip>\n                    <sp-overlay\n                        trigger=\"trigger-1@longpress\"\n                        type=\"auto\"\n                        placement=\"right-start\"\n                        .offset=${popoverOffset}\n                    >\n                        <sp-popover tip>\n                            <sp-action-group vertical quiet>\n                                <sp-action-button>\n                                    <sp-icon-anchor-select\n                                        slot=\"icon\"\n                                    ></sp-icon-anchor-select>\n                                </sp-action-button>\n                                <sp-action-button>\n                                    <sp-icon-polygon-select\n                                        slot=\"icon\"\n                                    ></sp-icon-polygon-select>\n                                </sp-action-button>\n                                <sp-action-button>\n                                    <sp-icon-rect-select\n                                        slot=\"icon\"\n                                    ></sp-icon-rect-select>\n                                </sp-action-button>\n                            </sp-action-group>\n                        </sp-popover>\n                    </sp-overlay>\n                </sp-action-button>\n                <sp-action-button id=\"trigger-2\" hold-affordance>\n                    <sp-icon-polygon-select\n                        slot=\"icon\"\n                    ></sp-icon-polygon-select>\n                </sp-action-button>\n                <sp-action-button id=\"trigger-3\" hold-affordance>\n                    <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n                    <sp-tooltip ?delayed=${delayed} self-managed>\n                        Hover\n                    </sp-tooltip>\n                </sp-action-button>\n                <sp-action-menu>\n                    <sp-menu-group id=\"cms\">\n                        <span slot=\"header\">cms</span>\n                        <sp-menu-item value=\"updateAllSiteContent\">\n                            Update All Content\n                        </sp-menu-item>\n                        <sp-menu-item value=\"refreshAllXDs\">\n                            Refresh All XDs\n                        </sp-menu-item>\n                    </sp-menu-group>\n                    <sp-menu-group id=\"ssg\">\n                        <span slot=\"header\">ssg</span>\n                        <sp-menu-item value=\"clearCache\">\n                            Clear Cache\n                        </sp-menu-item>\n                    </sp-menu-group>\n                    <sp-menu-group id=\"vrt\">\n                        <span slot=\"header\">vrt</span>\n                        <sp-menu-item value=\"vrt-contributions\">\n                            Contributions\n                        </sp-menu-item>\n                        <sp-menu-item value=\"vrt-internal\">\n                            Internal\n                        </sp-menu-item>\n                        <sp-menu-item value=\"vrt-public\">Public</sp-menu-item>\n                        <sp-menu-item value=\"vrt-patterns\">\n                            Patterns\n                        </sp-menu-item>\n                        <sp-menu-item value=\"vrt\">All</sp-menu-item>\n                    </sp-menu-group>\n                    <sp-menu-divider></sp-menu-divider>\n                    <sp-menu-group id=\"misc\">\n                        <sp-menu-item value=\"logout\">Logout</sp-menu-item>\n                    </sp-menu-group>\n                </sp-action-menu>\n            </sp-action-group>\n        </sp-popover>\n        <sp-overlay ?delayed=${delayed} trigger=\"trigger-2@hover\" type=\"hint\">\n            <sp-tooltip>Hover</sp-tooltip>\n        </sp-overlay>\n        <sp-overlay\n            trigger=\"trigger-2@longpress\"\n            type=\"auto\"\n            placement=\"right-start\"\n            .offset=${popoverOffset}\n        >\n            <sp-popover tip>\n                <sp-action-group vertical quiet>\n                    <sp-action-button>\n                        <sp-icon-anchor-select\n                            slot=\"icon\"\n                        ></sp-icon-anchor-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-polygon-select\n                            slot=\"icon\"\n                        ></sp-icon-polygon-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n                    </sp-action-button>\n                </sp-action-group>\n            </sp-popover>\n        </sp-overlay>\n        <sp-overlay\n            trigger=\"trigger-3@longpress\"\n            type=\"auto\"\n            placement=\"right-start\"\n            .offset=${popoverOffset}\n        >\n            <sp-popover tip>\n                <sp-action-group vertical quiet>\n                    <sp-action-button>\n                        <sp-icon-anchor-select\n                            slot=\"icon\"\n                        ></sp-icon-anchor-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-polygon-select\n                            slot=\"icon\"\n                        ></sp-icon-polygon-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n                    </sp-action-button>\n                </sp-action-group>\n            </sp-popover>\n        </sp-overlay>\n    `;\n};\n\n// Test #3795 in browser\nexport const transientHover = (): TemplateResult => html`\n    <transient-hover></transient-hover>\n`;\ntransientHover.swc_vrt = {\n    skip: true,\n};\n"],
+  "mappings": "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",
   "names": ["receivesFocus"]
 }

package/stories/overlay-story-components.js

@@ -309,4 +309,36 @@ __decorateClass([
   query("overlay-trigger")
 ], PopoverContent.prototype, "trigger", 2);
 customElements.define("popover-content", PopoverContent);
+export default class TransientHover extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+  }
+  render() {
+    return html`
+            <sp-button variant="primary" id="triggerButton">
+                Button popover
+            </sp-button>
+            <sp-overlay
+                type="auto"
+                trigger="triggerButton@click"
+                @sp-opened=${() => {
+      this.open = true;
+    }}
+            >
+                <sp-popover>My Popover</sp-popover>
+            </sp-overlay>
+
+            ${!this.open ? html`
+                      <sp-overlay trigger="triggerButton@hover" type="hint">
+                          <sp-tooltip placement="right">My tooltip</sp-tooltip>
+                      </sp-overlay>
+                  ` : html``}
+        `;
+  }
+}
+__decorateClass([
+  property()
+], TransientHover.prototype, "open", 2);
+customElements.define("transient-hover", TransientHover);
 //# sourceMappingURL=overlay-story-components.js.map

package/stories/overlay-story-components.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["overlay-story-components.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n    css,\n    CSSResultGroup,\n    html,\n    LitElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    property,\n    query,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport {\n    Overlay,\n    OverlayTrigger,\n    Placement,\n} from '@spectrum-web-components/overlay';\nimport { RadioGroup } from '@spectrum-web-components/radio';\nimport '@spectrum-web-components/button/sp-button.js';\nimport { Button } from '@spectrum-web-components/button';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/radio/sp-radio.js';\nimport '@spectrum-web-components/radio/sp-radio-group.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\n\n// Prevent infinite recursion in browser\nconst MAX_DEPTH = 7;\n\nclass OverlayTargetIcon extends LitElement {\n    static override get styles(): CSSResultGroup {\n        return css`\n            :host {\n                position: absolute;\n                display: block;\n                color: var(--spectrum-global-color-magenta-700);\n                width: 64px;\n                height: 64px;\n                top: 0;\n                left: 0;\n            }\n        `;\n    }\n\n    public override render(): TemplateResult {\n        return html`\n            <svg\n                aria-hidden=\"true\"\n                focusable=\"false\"\n                data-prefix=\"fas\"\n                data-icon=\"bullseye\"\n                class=\"svg-inline--fa fa-bullseye fa-w-16\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 496 512\"\n            >\n                <path\n                    fill=\"currentColor\"\n                    d=\"M248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm0 432c-101.69 0-184-82.29-184-184 0-101.69 82.29-184 184-184 101.69 0 184 82.29 184 184 0 101.69-82.29 184-184 184zm0-312c-70.69 0-128 57.31-128 128s57.31 128 128 128 128-57.31 128-128-57.31-128-128-128zm0 192c-35.29 0-64-28.71-64-64s28.71-64 64-64 64 28.71 64 64-28.71 64-64 64z\"\n                ></path>\n            </svg>\n        `;\n    }\n}\ncustomElements.define('overlay-target-icon', OverlayTargetIcon);\n\nclass OverlayDrag extends LitElement {\n    @property({ type: Number })\n    private top = 100;\n    @property({ type: Number })\n    private left = 100;\n\n    private targetElement: HTMLElement | undefined | null;\n\n    static override get styles(): CSSResultGroup {\n        return css`\n            :host {\n                display: block;\n                width: 100%;\n                height: 100%;\n                position: relative;\n            }\n\n            ::slotted(*) {\n                display: block;\n                width: 100%;\n                height: 100%;\n            }\n        `;\n    }\n\n    private onSlotChange(event: Event & { target: HTMLSlotElement }): void {\n        const slot = event.target as HTMLSlotElement;\n        this.targetElement = undefined;\n\n        const nodes = slot.assignedNodes();\n        const slotElement = nodes.find(\n            (node) => node instanceof HTMLElement\n        ) as HTMLElement;\n        if (!slotElement) return;\n\n        this.targetElement = slotElement.querySelector(\n            '[slot=\"trigger\"]'\n        ) as HTMLElement;\n        if (!this.targetElement) return;\n\n        this.targetElement.addEventListener(\n            'pointerdown',\n            (event: PointerEvent) => this.onMouseDown(event)\n        );\n\n        this.resetTargetPosition();\n    }\n\n    private onMouseDown(event: PointerEvent): void {\n        const target = event.target as HTMLElement;\n        const parent = target.parentElement;\n        if (!parent) return;\n        target.setPointerCapture(event.pointerId);\n\n        const max = {\n            x: parent.offsetWidth - target.offsetWidth,\n            y: parent.offsetHeight - target.offsetHeight,\n        };\n        const dragStart = {\n            x: event.clientX,\n            y: event.clientY,\n        };\n        const originalPos = {\n            x: this.left,\n            y: this.top,\n        };\n\n        const onMouseMove = (event: MouseEvent): void => {\n            const dragDelta = {\n                x: event.clientX - dragStart.x,\n                y: event.clientY - dragStart.y,\n            };\n            const newPosition = {\n                x: dragDelta.x + originalPos.x,\n                y: dragDelta.y + originalPos.y,\n            };\n            this.left = Math.min(Math.max(newPosition.x, 0), max.x);\n            this.top = Math.min(Math.max(newPosition.y, 0), max.y);\n            Overlay.update();\n        };\n\n        const onMouseUp = (event: PointerEvent): void => {\n            target.setPointerCapture(event.pointerId);\n            document.removeEventListener('pointermove', onMouseMove);\n            document.removeEventListener('pointerup', onMouseUp);\n        };\n\n        document.addEventListener('pointermove', onMouseMove);\n        document.addEventListener('pointerup', onMouseUp);\n    }\n\n    public resetTargetPosition(): void {\n        if (!this.targetElement) return;\n        const target = this.targetElement as HTMLElement;\n        const parent = target.parentElement;\n        if (!parent) return;\n\n        this.left = (parent.offsetWidth - target.offsetWidth) / 2;\n        this.top = (parent.offsetHeight - target.offsetHeight) / 2;\n    }\n\n    public override updated(): void {\n        if (this.targetElement) {\n            this.targetElement.style.transform = `translate(${this.left}px, ${this.top}px)`;\n        }\n    }\n\n    public override render(): TemplateResult {\n        return html`\n            <slot @slotchange=${this.onSlotChange}></slot>\n        `;\n    }\n}\ncustomElements.define('overlay-drag', OverlayDrag);\n\nclass RecursivePopover extends LitElement {\n    @property({ type: String })\n    private placement: Placement;\n\n    @property({ type: Number })\n    private depth = 0;\n\n    @query('[slot=\"trigger\"]')\n    private trigger!: Button;\n\n    protected isShiftTabbing = false;\n\n    public override shadowRoot!: ShadowRoot;\n\n    public static override get styles(): CSSResultGroup {\n        return [\n            css`\n                :host {\n                    display: block;\n                    text-align: center;\n                }\n\n                overlay-trigger {\n                    display: inline-flex;\n                    margin-top: 11px;\n                }\n            `,\n        ];\n    }\n\n    public constructor() {\n        super();\n        this.placement = 'right';\n        this.depth = 0;\n        this.addEventListener('keydown', (event: KeyboardEvent) => {\n            const { code } = event;\n            if (code === 'Enter') {\n                this.trigger.click();\n            }\n        });\n        this.addEventListener('focusin', this.handleFocusin);\n    }\n\n    private handleFocusin(): void {\n        this.focus();\n    }\n\n    public override focus(): void {\n        if (this.shadowRoot.activeElement !== null) {\n            return;\n        }\n        const firstFocusable = this.shadowRoot.querySelector(\n            'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n        ) as LitElement;\n        if (firstFocusable) {\n            if (firstFocusable.updateComplete) {\n                firstFocusable.updateComplete.then(() =>\n                    firstFocusable.focus()\n                );\n            } else {\n                firstFocusable.focus();\n            }\n            return;\n        }\n        super.focus();\n    }\n\n    public onRadioChange(event: Event): void {\n        const target = event.target as RadioGroup;\n        this.placement = target.selected as Placement;\n    }\n\n    private captureEnter(event: KeyboardEvent): void {\n        const { code } = event;\n        if (code === 'Enter') {\n            event.stopPropagation();\n        }\n    }\n\n    public override render(): TemplateResult {\n        return html`\n            <sp-radio-group\n                horizontal\n                @change=${this.onRadioChange}\n                selected=\"${this.placement}\"\n                name=\"group-example\"\n            >\n                <sp-radio value=\"top\">Top</sp-radio>\n                <sp-radio value=\"right\">Right</sp-radio>\n                <sp-radio value=\"bottom\">Bottom</sp-radio>\n                <sp-radio value=\"left\">Left</sp-radio>\n            </sp-radio-group>\n            <overlay-trigger placement=\"${this.placement}\" type=\"modal\">\n                <sp-button\n                    slot=\"trigger\"\n                    variant=\"accent\"\n                    @keydown=${this.captureEnter}\n                >\n                    Open Popover\n                </sp-button>\n                <sp-popover\n                    slot=\"click-content\"\n                    direction=\"${this.placement}\"\n                    tip\n                >\n                    <sp-dialog size=\"s\" no-divider>\n                        ${this.depth < MAX_DEPTH\n                            ? html`\n                                  <recursive-popover\n                                      position=\"${this.placement}\"\n                                      depth=\"${this.depth + 1}\"\n                                      tabindex=\"0\"\n                                  ></recursive-popover>\n                              `\n                            : html`\n                                  <div>Maximum Depth</div>\n                              `}\n                    </sp-dialog>\n                </sp-popover>\n            </overlay-trigger>\n        `;\n    }\n}\ncustomElements.define('recursive-popover', RecursivePopover);\n\nexport class PopoverContent extends LitElement {\n    @query('[slot=\"trigger\"]')\n    public button!: Button;\n\n    @query('overlay-trigger')\n    public trigger!: OverlayTrigger;\n\n    override render(): TemplateResult {\n        return html`\n            <overlay-trigger type=\"modal\" placement=\"bottom\">\n                <sp-button slot=\"trigger\">Open me</sp-button>\n                <sp-popover slot=\"click-content\" direction=\"bottom\">\n                    <sp-dialog no-divider>\n                        <p>This is all the content.</p>\n                        <p>This is all the content.</p>\n                        <p>This is all the content.</p>\n                        <p>This is all the content.</p>\n                    </sp-dialog>\n                </sp-popover>\n            </overlay-trigger>\n        `;\n    }\n}\n\ncustomElements.define('popover-content', PopoverContent);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'popover-content': PopoverContent;\n    }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n    css,\n    CSSResultGroup,\n    html,\n    LitElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    property,\n    query,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport {\n    Overlay,\n    OverlayTrigger,\n    Placement,\n} from '@spectrum-web-components/overlay';\nimport { RadioGroup } from '@spectrum-web-components/radio';\nimport '@spectrum-web-components/button/sp-button.js';\nimport { Button } from '@spectrum-web-components/button';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/radio/sp-radio.js';\nimport '@spectrum-web-components/radio/sp-radio-group.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\n\n// Prevent infinite recursion in browser\nconst MAX_DEPTH = 7;\n\nclass OverlayTargetIcon extends LitElement {\n    static override get styles(): CSSResultGroup {\n        return css`\n            :host {\n                position: absolute;\n                display: block;\n                color: var(--spectrum-global-color-magenta-700);\n                width: 64px;\n                height: 64px;\n                top: 0;\n                left: 0;\n            }\n        `;\n    }\n\n    public override render(): TemplateResult {\n        return html`\n            <svg\n                aria-hidden=\"true\"\n                focusable=\"false\"\n                data-prefix=\"fas\"\n                data-icon=\"bullseye\"\n                class=\"svg-inline--fa fa-bullseye fa-w-16\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 496 512\"\n            >\n                <path\n                    fill=\"currentColor\"\n                    d=\"M248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm0 432c-101.69 0-184-82.29-184-184 0-101.69 82.29-184 184-184 101.69 0 184 82.29 184 184 0 101.69-82.29 184-184 184zm0-312c-70.69 0-128 57.31-128 128s57.31 128 128 128 128-57.31 128-128-57.31-128-128-128zm0 192c-35.29 0-64-28.71-64-64s28.71-64 64-64 64 28.71 64 64-28.71 64-64 64z\"\n                ></path>\n            </svg>\n        `;\n    }\n}\ncustomElements.define('overlay-target-icon', OverlayTargetIcon);\n\nclass OverlayDrag extends LitElement {\n    @property({ type: Number })\n    private top = 100;\n    @property({ type: Number })\n    private left = 100;\n\n    private targetElement: HTMLElement | undefined | null;\n\n    static override get styles(): CSSResultGroup {\n        return css`\n            :host {\n                display: block;\n                width: 100%;\n                height: 100%;\n                position: relative;\n            }\n\n            ::slotted(*) {\n                display: block;\n                width: 100%;\n                height: 100%;\n            }\n        `;\n    }\n\n    private onSlotChange(event: Event & { target: HTMLSlotElement }): void {\n        const slot = event.target as HTMLSlotElement;\n        this.targetElement = undefined;\n\n        const nodes = slot.assignedNodes();\n        const slotElement = nodes.find(\n            (node) => node instanceof HTMLElement\n        ) as HTMLElement;\n        if (!slotElement) return;\n\n        this.targetElement = slotElement.querySelector(\n            '[slot=\"trigger\"]'\n        ) as HTMLElement;\n        if (!this.targetElement) return;\n\n        this.targetElement.addEventListener(\n            'pointerdown',\n            (event: PointerEvent) => this.onMouseDown(event)\n        );\n\n        this.resetTargetPosition();\n    }\n\n    private onMouseDown(event: PointerEvent): void {\n        const target = event.target as HTMLElement;\n        const parent = target.parentElement;\n        if (!parent) return;\n        target.setPointerCapture(event.pointerId);\n\n        const max = {\n            x: parent.offsetWidth - target.offsetWidth,\n            y: parent.offsetHeight - target.offsetHeight,\n        };\n        const dragStart = {\n            x: event.clientX,\n            y: event.clientY,\n        };\n        const originalPos = {\n            x: this.left,\n            y: this.top,\n        };\n\n        const onMouseMove = (event: MouseEvent): void => {\n            const dragDelta = {\n                x: event.clientX - dragStart.x,\n                y: event.clientY - dragStart.y,\n            };\n            const newPosition = {\n                x: dragDelta.x + originalPos.x,\n                y: dragDelta.y + originalPos.y,\n            };\n            this.left = Math.min(Math.max(newPosition.x, 0), max.x);\n            this.top = Math.min(Math.max(newPosition.y, 0), max.y);\n            Overlay.update();\n        };\n\n        const onMouseUp = (event: PointerEvent): void => {\n            target.setPointerCapture(event.pointerId);\n            document.removeEventListener('pointermove', onMouseMove);\n            document.removeEventListener('pointerup', onMouseUp);\n        };\n\n        document.addEventListener('pointermove', onMouseMove);\n        document.addEventListener('pointerup', onMouseUp);\n    }\n\n    public resetTargetPosition(): void {\n        if (!this.targetElement) return;\n        const target = this.targetElement as HTMLElement;\n        const parent = target.parentElement;\n        if (!parent) return;\n\n        this.left = (parent.offsetWidth - target.offsetWidth) / 2;\n        this.top = (parent.offsetHeight - target.offsetHeight) / 2;\n    }\n\n    public override updated(): void {\n        if (this.targetElement) {\n            this.targetElement.style.transform = `translate(${this.left}px, ${this.top}px)`;\n        }\n    }\n\n    public override render(): TemplateResult {\n        return html`\n            <slot @slotchange=${this.onSlotChange}></slot>\n        `;\n    }\n}\ncustomElements.define('overlay-drag', OverlayDrag);\n\nclass RecursivePopover extends LitElement {\n    @property({ type: String })\n    private placement: Placement;\n\n    @property({ type: Number })\n    private depth = 0;\n\n    @query('[slot=\"trigger\"]')\n    private trigger!: Button;\n\n    protected isShiftTabbing = false;\n\n    public override shadowRoot!: ShadowRoot;\n\n    public static override get styles(): CSSResultGroup {\n        return [\n            css`\n                :host {\n                    display: block;\n                    text-align: center;\n                }\n\n                overlay-trigger {\n                    display: inline-flex;\n                    margin-top: 11px;\n                }\n            `,\n        ];\n    }\n\n    public constructor() {\n        super();\n        this.placement = 'right';\n        this.depth = 0;\n        this.addEventListener('keydown', (event: KeyboardEvent) => {\n            const { code } = event;\n            if (code === 'Enter') {\n                this.trigger.click();\n            }\n        });\n        this.addEventListener('focusin', this.handleFocusin);\n    }\n\n    private handleFocusin(): void {\n        this.focus();\n    }\n\n    public override focus(): void {\n        if (this.shadowRoot.activeElement !== null) {\n            return;\n        }\n        const firstFocusable = this.shadowRoot.querySelector(\n            'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n        ) as LitElement;\n        if (firstFocusable) {\n            if (firstFocusable.updateComplete) {\n                firstFocusable.updateComplete.then(() =>\n                    firstFocusable.focus()\n                );\n            } else {\n                firstFocusable.focus();\n            }\n            return;\n        }\n        super.focus();\n    }\n\n    public onRadioChange(event: Event): void {\n        const target = event.target as RadioGroup;\n        this.placement = target.selected as Placement;\n    }\n\n    private captureEnter(event: KeyboardEvent): void {\n        const { code } = event;\n        if (code === 'Enter') {\n            event.stopPropagation();\n        }\n    }\n\n    public override render(): TemplateResult {\n        return html`\n            <sp-radio-group\n                horizontal\n                @change=${this.onRadioChange}\n                selected=\"${this.placement}\"\n                name=\"group-example\"\n            >\n                <sp-radio value=\"top\">Top</sp-radio>\n                <sp-radio value=\"right\">Right</sp-radio>\n                <sp-radio value=\"bottom\">Bottom</sp-radio>\n                <sp-radio value=\"left\">Left</sp-radio>\n            </sp-radio-group>\n            <overlay-trigger placement=\"${this.placement}\" type=\"modal\">\n                <sp-button\n                    slot=\"trigger\"\n                    variant=\"accent\"\n                    @keydown=${this.captureEnter}\n                >\n                    Open Popover\n                </sp-button>\n                <sp-popover\n                    slot=\"click-content\"\n                    direction=\"${this.placement}\"\n                    tip\n                >\n                    <sp-dialog size=\"s\" no-divider>\n                        ${this.depth < MAX_DEPTH\n                            ? html`\n                                  <recursive-popover\n                                      position=\"${this.placement}\"\n                                      depth=\"${this.depth + 1}\"\n                                      tabindex=\"0\"\n                                  ></recursive-popover>\n                              `\n                            : html`\n                                  <div>Maximum Depth</div>\n                              `}\n                    </sp-dialog>\n                </sp-popover>\n            </overlay-trigger>\n        `;\n    }\n}\ncustomElements.define('recursive-popover', RecursivePopover);\n\nexport class PopoverContent extends LitElement {\n    @query('[slot=\"trigger\"]')\n    public button!: Button;\n\n    @query('overlay-trigger')\n    public trigger!: OverlayTrigger;\n\n    override render(): TemplateResult {\n        return html`\n            <overlay-trigger type=\"modal\" placement=\"bottom\">\n                <sp-button slot=\"trigger\">Open me</sp-button>\n                <sp-popover slot=\"click-content\" direction=\"bottom\">\n                    <sp-dialog no-divider>\n                        <p>This is all the content.</p>\n                        <p>This is all the content.</p>\n                        <p>This is all the content.</p>\n                        <p>This is all the content.</p>\n                    </sp-dialog>\n                </sp-popover>\n            </overlay-trigger>\n        `;\n    }\n}\n\ncustomElements.define('popover-content', PopoverContent);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'popover-content': PopoverContent;\n    }\n}\n\nexport default class TransientHover extends LitElement {\n    @property()\n    open = false;\n\n    protected override render(): TemplateResult {\n        return html`\n            <sp-button variant=\"primary\" id=\"triggerButton\">\n                Button popover\n            </sp-button>\n            <sp-overlay\n                type=\"auto\"\n                trigger=\"triggerButton@click\"\n                @sp-opened=${() => {\n                    this.open = true;\n                }}\n            >\n                <sp-popover>My Popover</sp-popover>\n            </sp-overlay>\n\n            ${!this.open\n                ? html`\n                      <sp-overlay trigger=\"triggerButton@hover\" type=\"hint\">\n                          <sp-tooltip placement=\"right\">My tooltip</sp-tooltip>\n                      </sp-overlay>\n                  `\n                : html``}\n        `;\n    }\n}\n\ncustomElements.define('transient-hover', TransientHover);\n"],
+  "mappings": "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",
   "names": ["event"]
 }

package/test/index.js

@@ -532,7 +532,7 @@ export const runOverlayTriggerTests = (type) => {
       it("closes a hover popover", async function() {
         expect(await isOnTopLayer(this.hoverContent)).to.be.false;
         const rect = this.outerTrigger.getBoundingClientRect();
-        const close = oneEvent(this.outerTrigger, "sp-closed");
+        const open = oneEvent(this.outerTrigger, "sp-opened");
         await sendMouse({
           steps: [
             {
@@ -544,10 +544,12 @@ export const runOverlayTriggerTests = (type) => {
             }
           ]
         });
-        await nextFrame();
-        await nextFrame();
-        await nextFrame();
-        await nextFrame();
+        await open;
+        const close = oneEvent(this.outerTrigger, "sp-closed");
+        expect(
+          await isOnTopLayer(this.hoverContent),
+          "hover content is available at point"
+        ).to.be.true;
         await sendMouse({
           steps: [
             {