@spectrum-web-components/overlay 0.19.6-overlay.12 → 0.19.6-overlay.13

package/src/OverlayDialog.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["OverlayDialog.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 { ReactiveElement } from 'lit';\nimport {\n    firstFocusableIn,\n    firstFocusableSlottedIn,\n} from '@spectrum-web-components/shared/src/first-focusable-in.js';\nimport {\n    BeforetoggleClosedEvent,\n    BeforetoggleOpenEvent,\n    guaranteedTransitionend,\n    OpenableElement,\n    OverlayBase,\n} from './OverlayBase.dev.js'\nimport { VirtualTrigger } from './VirtualTrigger.dev.js'\n\ntype Constructor<T = Record<string, unknown>> = {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    new (...args: any[]): T;\n    prototype: T;\n};\n\nfunction nextFrame(): Promise<void> {\n    return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nexport function OverlayDialog<T extends Constructor<OverlayBase>>(\n    constructor: T\n): T & Constructor<ReactiveElement> {\n    class OverlayWithDialog extends constructor {\n        protected override async manageDialogOpen(): Promise<void> {\n            const targetOpenState = this.open;\n            await this.managePosition();\n            await this.dialogEnsureOnDOM();\n            const focusEl = await this.dialogMakeTransition(targetOpenState);\n            await this.dialogApplyFocus(focusEl);\n        }\n\n        protected async dialogEnsureOnDOM(): Promise<void> {\n            await nextFrame();\n            await nextFrame();\n            await nextFrame();\n            await nextFrame();\n        }\n\n        protected async dialogMakeTransition(\n            targetOpenState: boolean\n        ): Promise<HTMLElement | null> {\n            let focusEl = null as HTMLElement | null;\n            const start =\n                (el: OpenableElement, index: number) =>\n                async (): Promise<void> => {\n                    if (typeof el.open !== 'undefined') {\n                        el.open = targetOpenState;\n                    }\n                    if (!targetOpenState) {\n                        const close = (): void => {\n                            el.removeEventListener('close', close);\n                            finish(el, index);\n                        };\n                        el.addEventListener('close', close);\n                    }\n                    if (index > 0 || !targetOpenState) {\n                        return;\n                    }\n                    const event = targetOpenState\n                        ? BeforetoggleOpenEvent\n                        : BeforetoggleClosedEvent;\n                    this.dispatchEvent(new event());\n                    focusEl = focusEl || firstFocusableIn(el);\n                    if (!focusEl) {\n                        const childSlots = el.querySelectorAll('slot');\n                        childSlots.forEach((slot) => {\n                            if (!focusEl) {\n                                focusEl = firstFocusableSlottedIn(slot);\n                            }\n                        });\n                    }\n                    if (!this.isConnected || this.dialogEl.open) {\n                        return;\n                    }\n                    this.dialogEl.showModal();\n                };\n            const finish = (el: OpenableElement, index: number) => (): void => {\n                if (this.open !== targetOpenState) {\n                    return;\n                }\n                const eventName = targetOpenState ? 'sp-opened' : 'sp-closed';\n                if (index > 0) {\n                    el.dispatchEvent(\n                        new Event(eventName, {\n                            bubbles: false,\n                            composed: false,\n                        })\n                    );\n                    return;\n                }\n                if (!this.isConnected || targetOpenState !== this.open) {\n                    return;\n                }\n                const reportChange = (): void => {\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 Event(eventName, {\n                            bubbles: false,\n                            composed: false,\n                        })\n                    );\n                    if (this.triggerElement && !hasVirtualTrigger) {\n                        (this.triggerElement as HTMLElement).dispatchEvent(\n                            new CustomEvent(eventName, {\n                                bubbles: true,\n                                composed: true,\n                                detail: { interaction: this.type },\n                            })\n                        );\n                    }\n                };\n                if (!targetOpenState && this.dialogEl.open) {\n                    this.dialogEl.addEventListener(\n                        'close',\n                        () => {\n                            reportChange();\n                        },\n                        { once: true }\n                    );\n                    this.dialogEl.close();\n                } else {\n                    reportChange();\n                }\n            };\n            this.elements.forEach((el, index) => {\n                guaranteedTransitionend(\n                    el,\n                    start(el, index),\n                    finish(el, index)\n                );\n            });\n            return focusEl;\n        }\n\n        protected async dialogApplyFocus(\n            focusEl: HTMLElement | null\n        ): Promise<void> {\n            /**\n             * Focus should handled natively in `<dialog>` elements when leveraging `.showModal()`, but it's NOT.\n             * - webkit bug: https://bugs.webkit.org/show_bug.cgi?id=255507\n             * - firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1828398\n             **/\n            if (this.receivesFocus === 'false') {\n                return;\n            }\n\n            await nextFrame();\n            await nextFrame();\n            if (!this.open) {\n                if (\n                    // Do not return focus to trigger when overlay is a \"hint\" (tooltip)\n                    this.type !== 'hint' &&\n                    // Only return focus when the trigger is not \"virtual\"\n                    this.triggerElement &&\n                    !(this.triggerElement instanceof VirtualTrigger)\n                ) {\n                    // This has a bug where the current overlay and the focused content could share the same `activeElement` shadow root...\n                    const relationEvent = new Event('overlay-relation-query', {\n                        bubbles: true,\n                        composed: true,\n                    });\n                    this.addEventListener(\n                        relationEvent.type,\n                        (event: Event) => {\n                            /* eslint-disable @spectrum-web-components/document-active-element */\n                            if (\n                                document.activeElement &&\n                                event\n                                    .composedPath()\n                                    .includes(document.activeElement)\n                            ) {\n                                (this.triggerElement as HTMLElement).focus();\n                            }\n                            /* eslint-enable @spectrum-web-components/document-active-element */\n                        }\n                    );\n                    this.dispatchEvent(relationEvent);\n                }\n                return;\n            }\n\n            focusEl?.focus();\n        }\n    }\n    return OverlayWithDialog;\n}\n"],
-  "mappings": ";AAYA;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OAGG;AACP,SAAS,sBAAsB;AAQ/B,SAAS,YAA2B;AAChC,SAAO,IAAI,QAAQ,CAAC,QAAQ,sBAAsB,MAAM,IAAI,CAAC,CAAC;AAClE;AAEO,gBAAS,cACZ,aACgC;AAChC,QAAM,0BAA0B,YAAY;AAAA,IACxC,MAAyB,mBAAkC;AACvD,YAAM,kBAAkB,KAAK;AAC7B,YAAM,KAAK,eAAe;AAC1B,YAAM,KAAK,kBAAkB;AAC7B,YAAM,UAAU,MAAM,KAAK,qBAAqB,eAAe;AAC/D,YAAM,KAAK,iBAAiB,OAAO;AAAA,IACvC;AAAA,IAEA,MAAgB,oBAAmC;AAC/C,YAAM,UAAU;AAChB,YAAM,UAAU;AAChB,YAAM,UAAU;AAChB,YAAM,UAAU;AAAA,IACpB;AAAA,IAEA,MAAgB,qBACZ,iBAC2B;AAC3B,UAAI,UAAU;AACd,YAAM,QACF,CAAC,IAAqB,UACtB,YAA2B;AACvB,YAAI,OAAO,GAAG,SAAS,aAAa;AAChC,aAAG,OAAO;AAAA,QACd;AACA,YAAI,CAAC,iBAAiB;AAClB,gBAAM,QAAQ,MAAY;AACtB,eAAG,oBAAoB,SAAS,KAAK;AACrC,mBAAO,IAAI,KAAK;AAAA,UACpB;AACA,aAAG,iBAAiB,SAAS,KAAK;AAAA,QACtC;AACA,YAAI,QAAQ,KAAK,CAAC,iBAAiB;AAC/B;AAAA,QACJ;AACA,cAAM,QAAQ,kBACR,wBACA;AACN,aAAK,cAAc,IAAI,MAAM,CAAC;AAC9B,kBAAU,WAAW,iBAAiB,EAAE;AACxC,YAAI,CAAC,SAAS;AACV,gBAAM,aAAa,GAAG,iBAAiB,MAAM;AAC7C,qBAAW,QAAQ,CAAC,SAAS;AACzB,gBAAI,CAAC,SAAS;AACV,wBAAU,wBAAwB,IAAI;AAAA,YAC1C;AAAA,UACJ,CAAC;AAAA,QACL;AACA,YAAI,CAAC,KAAK,eAAe,KAAK,SAAS,MAAM;AACzC;AAAA,QACJ;AACA,aAAK,SAAS,UAAU;AAAA,MAC5B;AACJ,YAAM,SAAS,CAAC,IAAqB,UAAkB,MAAY;AAC/D,YAAI,KAAK,SAAS,iBAAiB;AAC/B;AAAA,QACJ;AACA,cAAM,YAAY,kBAAkB,cAAc;AAClD,YAAI,QAAQ,GAAG;AACX,aAAG;AAAA,YACC,IAAI,MAAM,WAAW;AAAA,cACjB,SAAS;AAAA,cACT,UAAU;AAAA,YACd,CAAC;AAAA,UACL;AACA;AAAA,QACJ;AACA,YAAI,CAAC,KAAK,eAAe,oBAAoB,KAAK,MAAM;AACpD;AAAA,QACJ;AACA,cAAM,eAAe,MAAY;AAC7B,gBAAM,oBACF,KAAK,0BAA0B;AACnC,eAAK;AAAA,YACD,IAAI,MAAM,WAAW;AAAA,cACjB,SAAS;AAAA,cACT,UAAU;AAAA,YACd,CAAC;AAAA,UACL;AACA,aAAG;AAAA,YACC,IAAI,MAAM,WAAW;AAAA,cACjB,SAAS;AAAA,cACT,UAAU;AAAA,YACd,CAAC;AAAA,UACL;AACA,cAAI,KAAK,kBAAkB,CAAC,mBAAmB;AAC3C,YAAC,KAAK,eAA+B;AAAA,cACjC,IAAI,YAAY,WAAW;AAAA,gBACvB,SAAS;AAAA,gBACT,UAAU;AAAA,gBACV,QAAQ,EAAE,aAAa,KAAK,KAAK;AAAA,cACrC,CAAC;AAAA,YACL;AAAA,UACJ;AAAA,QACJ;AACA,YAAI,CAAC,mBAAmB,KAAK,SAAS,MAAM;AACxC,eAAK,SAAS;AAAA,YACV;AAAA,YACA,MAAM;AACF,2BAAa;AAAA,YACjB;AAAA,YACA,EAAE,MAAM,KAAK;AAAA,UACjB;AACA,eAAK,SAAS,MAAM;AAAA,QACxB,OAAO;AACH,uBAAa;AAAA,QACjB;AAAA,MACJ;AACA,WAAK,SAAS,QAAQ,CAAC,IAAI,UAAU;AACjC;AAAA,UACI;AAAA,UACA,MAAM,IAAI,KAAK;AAAA,UACf,OAAO,IAAI,KAAK;AAAA,QACpB;AAAA,MACJ,CAAC;AACD,aAAO;AAAA,IACX;AAAA,IAEA,MAAgB,iBACZ,SACa;AAMb,UAAI,KAAK,kBAAkB,SAAS;AAChC;AAAA,MACJ;AAEA,YAAM,UAAU;AAChB,YAAM,UAAU;AAChB,UAAI,CAAC,KAAK,MAAM;AACZ;AAAA;AAAA,UAEI,KAAK,SAAS;AAAA,UAEd,KAAK,kBACL,EAAE,KAAK,0BAA0B;AAAA,UACnC;AAEE,gBAAM,gBAAgB,IAAI,MAAM,0BAA0B;AAAA,YACtD,SAAS;AAAA,YACT,UAAU;AAAA,UACd,CAAC;AACD,eAAK;AAAA,YACD,cAAc;AAAA,YACd,CAAC,UAAiB;AAEd,kBACI,SAAS,iBACT,MACK,aAAa,EACb,SAAS,SAAS,aAAa,GACtC;AACE,gBAAC,KAAK,eAA+B,MAAM;AAAA,cAC/C;AAAA,YAEJ;AAAA,UACJ;AACA,eAAK,cAAc,aAAa;AAAA,QACpC;AACA;AAAA,MACJ;AAEA,yCAAS;AAAA,IACb;AAAA,EACJ;AACA,SAAO;AACX;",
+  "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 { ReactiveElement } from 'lit';\nimport {\n    firstFocusableIn,\n    firstFocusableSlottedIn,\n} from '@spectrum-web-components/shared/src/first-focusable-in.js';\nimport {\n    BeforetoggleClosedEvent,\n    BeforetoggleOpenEvent,\n    guaranteedTransitionend,\n    OpenableElement,\n    OverlayBase,\n} from './OverlayBase.dev.js'\nimport { VirtualTrigger } from './VirtualTrigger.dev.js'\n\ntype Constructor<T = Record<string, unknown>> = {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    new (...args: any[]): T;\n    prototype: T;\n};\n\nfunction nextFrame(): Promise<void> {\n    return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nexport function OverlayDialog<T extends Constructor<OverlayBase>>(\n    constructor: T\n): T & Constructor<ReactiveElement> {\n    class OverlayWithDialog extends constructor {\n        protected override async manageDialogOpen(): Promise<void> {\n            const targetOpenState = this.open;\n            await this.managePosition();\n            await this.dialogEnsureOnDOM();\n            const focusEl = await this.dialogMakeTransition(targetOpenState);\n            await this.dialogApplyFocus(targetOpenState, focusEl);\n        }\n\n        protected async dialogEnsureOnDOM(): Promise<void> {\n            await nextFrame();\n            await nextFrame();\n            await nextFrame();\n            await nextFrame();\n        }\n\n        protected async dialogMakeTransition(\n            targetOpenState: boolean\n        ): Promise<HTMLElement | null> {\n            let focusEl = null as HTMLElement | null;\n            const start =\n                (el: OpenableElement, index: number) =>\n                async (): Promise<void> => {\n                    if (typeof el.open !== 'undefined') {\n                        el.open = targetOpenState;\n                    }\n                    if (!targetOpenState) {\n                        const close = (): void => {\n                            el.removeEventListener('close', close);\n                            finish(el, index);\n                        };\n                        el.addEventListener('close', close);\n                    }\n                    if (index > 0 || !targetOpenState) {\n                        return;\n                    }\n                    const event = targetOpenState\n                        ? BeforetoggleOpenEvent\n                        : BeforetoggleClosedEvent;\n                    this.dispatchEvent(new event());\n                    focusEl = focusEl || firstFocusableIn(el);\n                    if (!focusEl) {\n                        const childSlots = el.querySelectorAll('slot');\n                        childSlots.forEach((slot) => {\n                            if (!focusEl) {\n                                focusEl = firstFocusableSlottedIn(slot);\n                            }\n                        });\n                    }\n                    if (!this.isConnected || this.dialogEl.open) {\n                        return;\n                    }\n                    this.dialogEl.showModal();\n                };\n            const finish = (el: OpenableElement, index: number) => (): void => {\n                if (this.open !== targetOpenState) {\n                    return;\n                }\n                const eventName = targetOpenState ? 'sp-opened' : 'sp-closed';\n                if (index > 0) {\n                    el.dispatchEvent(\n                        new Event(eventName, {\n                            bubbles: false,\n                            composed: false,\n                        })\n                    );\n                    return;\n                }\n                if (!this.isConnected || targetOpenState !== this.open) {\n                    return;\n                }\n                const reportChange = (): void => {\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 Event(eventName, {\n                            bubbles: false,\n                            composed: false,\n                        })\n                    );\n                    if (this.triggerElement && !hasVirtualTrigger) {\n                        (this.triggerElement as HTMLElement).dispatchEvent(\n                            new CustomEvent(eventName, {\n                                bubbles: true,\n                                composed: true,\n                                detail: { interaction: this.type },\n                            })\n                        );\n                    }\n                };\n                if (!targetOpenState && this.dialogEl.open) {\n                    this.dialogEl.addEventListener(\n                        'close',\n                        () => {\n                            reportChange();\n                        },\n                        { once: true }\n                    );\n                    this.dialogEl.close();\n                } else {\n                    reportChange();\n                }\n            };\n            this.elements.forEach((el, index) => {\n                guaranteedTransitionend(\n                    el,\n                    start(el, index),\n                    finish(el, index)\n                );\n            });\n            return focusEl;\n        }\n\n        protected async dialogApplyFocus(\n            targetOpenState: boolean,\n            focusEl: HTMLElement | null\n        ): Promise<void> {\n            /**\n             * Focus should handled natively in `<dialog>` elements when leveraging `.showModal()`, but it's NOT.\n             * - webkit bug: https://bugs.webkit.org/show_bug.cgi?id=255507\n             * - firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1828398\n             **/\n            if (this.receivesFocus === 'false') {\n                return;\n            }\n\n            await nextFrame();\n            await nextFrame();\n            if (targetOpenState === this.open && !this.open) {\n                if (\n                    // Do not return focus to trigger when overlay is a \"hint\" (tooltip)\n                    this.type !== 'hint' &&\n                    // Only return focus when the trigger is not \"virtual\"\n                    this.triggerElement &&\n                    !(this.triggerElement instanceof VirtualTrigger)\n                ) {\n                    // This has a bug where the current overlay and the focused content could share the same `activeElement` shadow root...\n                    const relationEvent = new Event('overlay-relation-query', {\n                        bubbles: true,\n                        composed: true,\n                    });\n                    this.addEventListener(\n                        relationEvent.type,\n                        (event: Event) => {\n                            /* eslint-disable @spectrum-web-components/document-active-element */\n                            if (\n                                document.activeElement &&\n                                event\n                                    .composedPath()\n                                    .includes(document.activeElement)\n                            ) {\n                                (this.triggerElement as HTMLElement).focus();\n                            }\n                            /* eslint-enable @spectrum-web-components/document-active-element */\n                        }\n                    );\n                    this.dispatchEvent(relationEvent);\n                }\n                return;\n            }\n\n            focusEl?.focus();\n        }\n    }\n    return OverlayWithDialog;\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/src/OverlayDialog.js

@@ -1,2 +1,2 @@
-"use strict";import{firstFocusableIn as h,firstFocusableSlottedIn as E}from"@spectrum-web-components/shared/src/first-focusable-in.js";import{BeforetoggleClosedEvent as p,BeforetoggleOpenEvent as v,guaranteedTransitionend as f}from"./OverlayBase.js";import{VirtualTrigger as m}from"./VirtualTrigger.js";function r(){return new Promise(l=>requestAnimationFrame(()=>l()))}export function OverlayDialog(l){class u extends l{async manageDialogOpen(){const e=this.open;await this.managePosition(),await this.dialogEnsureOnDOM();const n=await this.dialogMakeTransition(e);await this.dialogApplyFocus(n)}async dialogEnsureOnDOM(){await r(),await r(),await r(),await r()}async dialogMakeTransition(e){let n=null;const c=(t,i)=>async()=>{if(typeof t.open!="undefined"&&(t.open=e),!e){const s=()=>{t.removeEventListener("close",s),d(t,i)};t.addEventListener("close",s)}if(i>0||!e)return;const o=e?v:p;this.dispatchEvent(new o),n=n||h(t),n||t.querySelectorAll("slot").forEach(a=>{n||(n=E(a))}),!(!this.isConnected||this.dialogEl.open)&&this.dialogEl.showModal()},d=(t,i)=>()=>{if(this.open!==e)return;const o=e?"sp-opened":"sp-closed";if(i>0){t.dispatchEvent(new Event(o,{bubbles:!1,composed:!1}));return}if(!this.isConnected||e!==this.open)return;const s=()=>{const a=this.triggerElement instanceof m;this.dispatchEvent(new Event(o,{bubbles:a,composed:a})),t.dispatchEvent(new Event(o,{bubbles:!1,composed:!1})),this.triggerElement&&!a&&this.triggerElement.dispatchEvent(new CustomEvent(o,{bubbles:!0,composed:!0,detail:{interaction:this.type}}))};!e&&this.dialogEl.open?(this.dialogEl.addEventListener("close",()=>{s()},{once:!0}),this.dialogEl.close()):s()};return this.elements.forEach((t,i)=>{f(t,c(t,i),d(t,i))}),n}async dialogApplyFocus(e){if(this.receivesFocus!=="false"){if(await r(),await r(),!this.open){if(this.type!=="hint"&&this.triggerElement&&!(this.triggerElement instanceof m)){const n=new Event("overlay-relation-query",{bubbles:!0,composed:!0});this.addEventListener(n.type,c=>{document.activeElement&&c.composedPath().includes(document.activeElement)&&this.triggerElement.focus()}),this.dispatchEvent(n)}return}e==null||e.focus()}}}return u}
+"use strict";import{firstFocusableIn as h,firstFocusableSlottedIn as p}from"@spectrum-web-components/shared/src/first-focusable-in.js";import{BeforetoggleClosedEvent as E,BeforetoggleOpenEvent as v,guaranteedTransitionend as f}from"./OverlayBase.js";import{VirtualTrigger as m}from"./VirtualTrigger.js";function r(){return new Promise(d=>requestAnimationFrame(()=>d()))}export function OverlayDialog(d){class u extends d{async manageDialogOpen(){const t=this.open;await this.managePosition(),await this.dialogEnsureOnDOM();const n=await this.dialogMakeTransition(t);await this.dialogApplyFocus(t,n)}async dialogEnsureOnDOM(){await r(),await r(),await r(),await r()}async dialogMakeTransition(t){let n=null;const l=(e,i)=>async()=>{if(typeof e.open!="undefined"&&(e.open=t),!t){const s=()=>{e.removeEventListener("close",s),c(e,i)};e.addEventListener("close",s)}if(i>0||!t)return;const o=t?v:E;this.dispatchEvent(new o),n=n||h(e),n||e.querySelectorAll("slot").forEach(a=>{n||(n=p(a))}),!(!this.isConnected||this.dialogEl.open)&&this.dialogEl.showModal()},c=(e,i)=>()=>{if(this.open!==t)return;const o=t?"sp-opened":"sp-closed";if(i>0){e.dispatchEvent(new Event(o,{bubbles:!1,composed:!1}));return}if(!this.isConnected||t!==this.open)return;const s=()=>{const a=this.triggerElement instanceof m;this.dispatchEvent(new Event(o,{bubbles:a,composed:a})),e.dispatchEvent(new Event(o,{bubbles:!1,composed:!1})),this.triggerElement&&!a&&this.triggerElement.dispatchEvent(new CustomEvent(o,{bubbles:!0,composed:!0,detail:{interaction:this.type}}))};!t&&this.dialogEl.open?(this.dialogEl.addEventListener("close",()=>{s()},{once:!0}),this.dialogEl.close()):s()};return this.elements.forEach((e,i)=>{f(e,l(e,i),c(e,i))}),n}async dialogApplyFocus(t,n){if(this.receivesFocus!=="false"){if(await r(),await r(),t===this.open&&!this.open){if(this.type!=="hint"&&this.triggerElement&&!(this.triggerElement instanceof m)){const l=new Event("overlay-relation-query",{bubbles:!0,composed:!0});this.addEventListener(l.type,c=>{document.activeElement&&c.composedPath().includes(document.activeElement)&&this.triggerElement.focus()}),this.dispatchEvent(l)}return}n==null||n.focus()}}}return u}
 //# sourceMappingURL=OverlayDialog.js.map

package/src/OverlayDialog.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["OverlayDialog.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 { ReactiveElement } from 'lit';\nimport {\n    firstFocusableIn,\n    firstFocusableSlottedIn,\n} from '@spectrum-web-components/shared/src/first-focusable-in.js';\nimport {\n    BeforetoggleClosedEvent,\n    BeforetoggleOpenEvent,\n    guaranteedTransitionend,\n    OpenableElement,\n    OverlayBase,\n} from './OverlayBase.js';\nimport { VirtualTrigger } from './VirtualTrigger.js';\n\ntype Constructor<T = Record<string, unknown>> = {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    new (...args: any[]): T;\n    prototype: T;\n};\n\nfunction nextFrame(): Promise<void> {\n    return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nexport function OverlayDialog<T extends Constructor<OverlayBase>>(\n    constructor: T\n): T & Constructor<ReactiveElement> {\n    class OverlayWithDialog extends constructor {\n        protected override async manageDialogOpen(): Promise<void> {\n            const targetOpenState = this.open;\n            await this.managePosition();\n            await this.dialogEnsureOnDOM();\n            const focusEl = await this.dialogMakeTransition(targetOpenState);\n            await this.dialogApplyFocus(focusEl);\n        }\n\n        protected async dialogEnsureOnDOM(): Promise<void> {\n            await nextFrame();\n            await nextFrame();\n            await nextFrame();\n            await nextFrame();\n        }\n\n        protected async dialogMakeTransition(\n            targetOpenState: boolean\n        ): Promise<HTMLElement | null> {\n            let focusEl = null as HTMLElement | null;\n            const start =\n                (el: OpenableElement, index: number) =>\n                async (): Promise<void> => {\n                    if (typeof el.open !== 'undefined') {\n                        el.open = targetOpenState;\n                    }\n                    if (!targetOpenState) {\n                        const close = (): void => {\n                            el.removeEventListener('close', close);\n                            finish(el, index);\n                        };\n                        el.addEventListener('close', close);\n                    }\n                    if (index > 0 || !targetOpenState) {\n                        return;\n                    }\n                    const event = targetOpenState\n                        ? BeforetoggleOpenEvent\n                        : BeforetoggleClosedEvent;\n                    this.dispatchEvent(new event());\n                    focusEl = focusEl || firstFocusableIn(el);\n                    if (!focusEl) {\n                        const childSlots = el.querySelectorAll('slot');\n                        childSlots.forEach((slot) => {\n                            if (!focusEl) {\n                                focusEl = firstFocusableSlottedIn(slot);\n                            }\n                        });\n                    }\n                    if (!this.isConnected || this.dialogEl.open) {\n                        return;\n                    }\n                    this.dialogEl.showModal();\n                };\n            const finish = (el: OpenableElement, index: number) => (): void => {\n                if (this.open !== targetOpenState) {\n                    return;\n                }\n                const eventName = targetOpenState ? 'sp-opened' : 'sp-closed';\n                if (index > 0) {\n                    el.dispatchEvent(\n                        new Event(eventName, {\n                            bubbles: false,\n                            composed: false,\n                        })\n                    );\n                    return;\n                }\n                if (!this.isConnected || targetOpenState !== this.open) {\n                    return;\n                }\n                const reportChange = (): void => {\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 Event(eventName, {\n                            bubbles: false,\n                            composed: false,\n                        })\n                    );\n                    if (this.triggerElement && !hasVirtualTrigger) {\n                        (this.triggerElement as HTMLElement).dispatchEvent(\n                            new CustomEvent(eventName, {\n                                bubbles: true,\n                                composed: true,\n                                detail: { interaction: this.type },\n                            })\n                        );\n                    }\n                };\n                if (!targetOpenState && this.dialogEl.open) {\n                    this.dialogEl.addEventListener(\n                        'close',\n                        () => {\n                            reportChange();\n                        },\n                        { once: true }\n                    );\n                    this.dialogEl.close();\n                } else {\n                    reportChange();\n                }\n            };\n            this.elements.forEach((el, index) => {\n                guaranteedTransitionend(\n                    el,\n                    start(el, index),\n                    finish(el, index)\n                );\n            });\n            return focusEl;\n        }\n\n        protected async dialogApplyFocus(\n            focusEl: HTMLElement | null\n        ): Promise<void> {\n            /**\n             * Focus should handled natively in `<dialog>` elements when leveraging `.showModal()`, but it's NOT.\n             * - webkit bug: https://bugs.webkit.org/show_bug.cgi?id=255507\n             * - firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1828398\n             **/\n            if (this.receivesFocus === 'false') {\n                return;\n            }\n\n            await nextFrame();\n            await nextFrame();\n            if (!this.open) {\n                if (\n                    // Do not return focus to trigger when overlay is a \"hint\" (tooltip)\n                    this.type !== 'hint' &&\n                    // Only return focus when the trigger is not \"virtual\"\n                    this.triggerElement &&\n                    !(this.triggerElement instanceof VirtualTrigger)\n                ) {\n                    // This has a bug where the current overlay and the focused content could share the same `activeElement` shadow root...\n                    const relationEvent = new Event('overlay-relation-query', {\n                        bubbles: true,\n                        composed: true,\n                    });\n                    this.addEventListener(\n                        relationEvent.type,\n                        (event: Event) => {\n                            /* eslint-disable @spectrum-web-components/document-active-element */\n                            if (\n                                document.activeElement &&\n                                event\n                                    .composedPath()\n                                    .includes(document.activeElement)\n                            ) {\n                                (this.triggerElement as HTMLElement).focus();\n                            }\n                            /* eslint-enable @spectrum-web-components/document-active-element */\n                        }\n                    );\n                    this.dispatchEvent(relationEvent);\n                }\n                return;\n            }\n\n            focusEl?.focus();\n        }\n    }\n    return OverlayWithDialog;\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 { ReactiveElement } from 'lit';\nimport {\n    firstFocusableIn,\n    firstFocusableSlottedIn,\n} from '@spectrum-web-components/shared/src/first-focusable-in.js';\nimport {\n    BeforetoggleClosedEvent,\n    BeforetoggleOpenEvent,\n    guaranteedTransitionend,\n    OpenableElement,\n    OverlayBase,\n} from './OverlayBase.js';\nimport { VirtualTrigger } from './VirtualTrigger.js';\n\ntype Constructor<T = Record<string, unknown>> = {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    new (...args: any[]): T;\n    prototype: T;\n};\n\nfunction nextFrame(): Promise<void> {\n    return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nexport function OverlayDialog<T extends Constructor<OverlayBase>>(\n    constructor: T\n): T & Constructor<ReactiveElement> {\n    class OverlayWithDialog extends constructor {\n        protected override async manageDialogOpen(): Promise<void> {\n            const targetOpenState = this.open;\n            await this.managePosition();\n            await this.dialogEnsureOnDOM();\n            const focusEl = await this.dialogMakeTransition(targetOpenState);\n            await this.dialogApplyFocus(targetOpenState, focusEl);\n        }\n\n        protected async dialogEnsureOnDOM(): Promise<void> {\n            await nextFrame();\n            await nextFrame();\n            await nextFrame();\n            await nextFrame();\n        }\n\n        protected async dialogMakeTransition(\n            targetOpenState: boolean\n        ): Promise<HTMLElement | null> {\n            let focusEl = null as HTMLElement | null;\n            const start =\n                (el: OpenableElement, index: number) =>\n                async (): Promise<void> => {\n                    if (typeof el.open !== 'undefined') {\n                        el.open = targetOpenState;\n                    }\n                    if (!targetOpenState) {\n                        const close = (): void => {\n                            el.removeEventListener('close', close);\n                            finish(el, index);\n                        };\n                        el.addEventListener('close', close);\n                    }\n                    if (index > 0 || !targetOpenState) {\n                        return;\n                    }\n                    const event = targetOpenState\n                        ? BeforetoggleOpenEvent\n                        : BeforetoggleClosedEvent;\n                    this.dispatchEvent(new event());\n                    focusEl = focusEl || firstFocusableIn(el);\n                    if (!focusEl) {\n                        const childSlots = el.querySelectorAll('slot');\n                        childSlots.forEach((slot) => {\n                            if (!focusEl) {\n                                focusEl = firstFocusableSlottedIn(slot);\n                            }\n                        });\n                    }\n                    if (!this.isConnected || this.dialogEl.open) {\n                        return;\n                    }\n                    this.dialogEl.showModal();\n                };\n            const finish = (el: OpenableElement, index: number) => (): void => {\n                if (this.open !== targetOpenState) {\n                    return;\n                }\n                const eventName = targetOpenState ? 'sp-opened' : 'sp-closed';\n                if (index > 0) {\n                    el.dispatchEvent(\n                        new Event(eventName, {\n                            bubbles: false,\n                            composed: false,\n                        })\n                    );\n                    return;\n                }\n                if (!this.isConnected || targetOpenState !== this.open) {\n                    return;\n                }\n                const reportChange = (): void => {\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 Event(eventName, {\n                            bubbles: false,\n                            composed: false,\n                        })\n                    );\n                    if (this.triggerElement && !hasVirtualTrigger) {\n                        (this.triggerElement as HTMLElement).dispatchEvent(\n                            new CustomEvent(eventName, {\n                                bubbles: true,\n                                composed: true,\n                                detail: { interaction: this.type },\n                            })\n                        );\n                    }\n                };\n                if (!targetOpenState && this.dialogEl.open) {\n                    this.dialogEl.addEventListener(\n                        'close',\n                        () => {\n                            reportChange();\n                        },\n                        { once: true }\n                    );\n                    this.dialogEl.close();\n                } else {\n                    reportChange();\n                }\n            };\n            this.elements.forEach((el, index) => {\n                guaranteedTransitionend(\n                    el,\n                    start(el, index),\n                    finish(el, index)\n                );\n            });\n            return focusEl;\n        }\n\n        protected async dialogApplyFocus(\n            targetOpenState: boolean,\n            focusEl: HTMLElement | null\n        ): Promise<void> {\n            /**\n             * Focus should handled natively in `<dialog>` elements when leveraging `.showModal()`, but it's NOT.\n             * - webkit bug: https://bugs.webkit.org/show_bug.cgi?id=255507\n             * - firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1828398\n             **/\n            if (this.receivesFocus === 'false') {\n                return;\n            }\n\n            await nextFrame();\n            await nextFrame();\n            if (targetOpenState === this.open && !this.open) {\n                if (\n                    // Do not return focus to trigger when overlay is a \"hint\" (tooltip)\n                    this.type !== 'hint' &&\n                    // Only return focus when the trigger is not \"virtual\"\n                    this.triggerElement &&\n                    !(this.triggerElement instanceof VirtualTrigger)\n                ) {\n                    // This has a bug where the current overlay and the focused content could share the same `activeElement` shadow root...\n                    const relationEvent = new Event('overlay-relation-query', {\n                        bubbles: true,\n                        composed: true,\n                    });\n                    this.addEventListener(\n                        relationEvent.type,\n                        (event: Event) => {\n                            /* eslint-disable @spectrum-web-components/document-active-element */\n                            if (\n                                document.activeElement &&\n                                event\n                                    .composedPath()\n                                    .includes(document.activeElement)\n                            ) {\n                                (this.triggerElement as HTMLElement).focus();\n                            }\n                            /* eslint-enable @spectrum-web-components/document-active-element */\n                        }\n                    );\n                    this.dispatchEvent(relationEvent);\n                }\n                return;\n            }\n\n            focusEl?.focus();\n        }\n    }\n    return OverlayWithDialog;\n}\n"],
+  "mappings": "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",
   "names": ["firstFocusableIn", "firstFocusableSlottedIn", "BeforetoggleClosedEvent", "BeforetoggleOpenEvent", "guaranteedTransitionend", "VirtualTrigger", "nextFrame", "res", "constructor", "OverlayWithDialog", "targetOpenState", "focusEl", "start", "el", "index", "close", "finish", "event", "slot", "eventName", "reportChange", "hasVirtualTrigger", "relationEvent"]
 }

package/src/OverlayNoPopover.dev.js

@@ -19,7 +19,7 @@ export function OverlayNoPopover(constructor) {
       await this.managePosition();
       await this.ensureOnDOM();
       const focusEl = await this.makeTransition(targetOpenState);
-      await this.applyFocus(focusEl);
+      await this.applyFocus(targetOpenState, focusEl);
     }
     async ensureOnDOM() {
       await nextFrame();
@@ -92,13 +92,13 @@ export function OverlayNoPopover(constructor) {
       });
       return focusEl;
     }
-    async applyFocus(focusEl) {
+    async applyFocus(targetOpenState, focusEl) {
       if (this.receivesFocus === "false") {
         return;
       }
       await nextFrame();
       await nextFrame();
-      if (!this.open) {
+      if (targetOpenState === this.open && !this.open) {
         if (
           // Do not return focus to trigger when overlay is a "hint" (tooltip)
           this.type !== "hint" && // Only return focus when the trigger is not "virtual"

package/src/OverlayNoPopover.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["OverlayNoPopover.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 { ReactiveElement } from 'lit';\nimport {\n    BeforetoggleClosedEvent,\n    BeforetoggleOpenEvent,\n    guaranteedTransitionend,\n    OpenableElement,\n    OverlayBase,\n} from './OverlayBase.dev.js'\nimport { VirtualTrigger } from './VirtualTrigger.dev.js'\n\ntype Constructor<T = Record<string, unknown>> = {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    new (...args: any[]): T;\n    prototype: T;\n};\n\nfunction nextFrame(): Promise<void> {\n    return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nexport function OverlayNoPopover<T extends Constructor<OverlayBase>>(\n    constructor: T\n): T & Constructor<ReactiveElement> {\n    class OverlayWithNoPopover extends constructor {\n        protected override async managePopoverOpen(): Promise<void> {\n            const targetOpenState = this.open;\n            await this.managePosition();\n            await this.ensureOnDOM();\n            const focusEl = await this.makeTransition(targetOpenState);\n            await this.applyFocus(focusEl);\n        }\n\n        private async ensureOnDOM(): Promise<void> {\n            await nextFrame();\n            await nextFrame();\n        }\n\n        private async makeTransition(\n            targetOpenState: boolean\n        ): Promise<HTMLElement | null> {\n            let focusEl = null as HTMLElement | null;\n            const start = (el: OpenableElement, index: number) => (): void => {\n                if (targetOpenState !== this.open) {\n                    return;\n                }\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 !== true) {\n                    return;\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 = (el: OpenableElement, index: number) => (): void => {\n                if (this.open !== targetOpenState) {\n                    return;\n                }\n                const eventName = targetOpenState ? 'sp-opened' : 'sp-closed';\n                el.dispatchEvent(\n                    new Event(eventName, {\n                        bubbles: false,\n                        composed: false,\n                    })\n                );\n                if (index > 0) {\n                    return;\n                }\n                const hasVirtualTrigger =\n                    this.triggerElement instanceof VirtualTrigger;\n                this.dispatchEvent(\n                    new Event(eventName, {\n                        bubbles: hasVirtualTrigger,\n                        composed: hasVirtualTrigger,\n                    })\n                );\n                if (this.triggerElement && !hasVirtualTrigger) {\n                    (this.triggerElement as HTMLElement).dispatchEvent(\n                        new CustomEvent(eventName, {\n                            bubbles: true,\n                            composed: true,\n                            detail: { interaction: this.type },\n                        })\n                    );\n                }\n            };\n            this.elements.forEach((el, index) => {\n                guaranteedTransitionend(\n                    el,\n                    start(el, index),\n                    finish(el, index)\n                );\n            });\n            return focusEl;\n        }\n\n        private async applyFocus(focusEl: HTMLElement | null): Promise<void> {\n            if (this.receivesFocus === 'false') {\n                return;\n            }\n\n            await nextFrame();\n            await nextFrame();\n            if (!this.open) {\n                if (\n                    // Do not return focus to trigger when overlay is a \"hint\" (tooltip)\n                    this.type !== 'hint' &&\n                    // Only return focus when the trigger is not \"virtual\"\n                    this.triggerElement &&\n                    !(this.triggerElement instanceof VirtualTrigger)\n                ) {\n                    // This has a bug where the current overlay and the focused content could share the same `activeElement` shadow root...\n                    const relationEvent = new Event('overlay-relation-query', {\n                        bubbles: true,\n                        composed: true,\n                    });\n                    this.addEventListener(\n                        relationEvent.type,\n                        (event: Event) => {\n                            /* eslint-disable @spectrum-web-components/document-active-element */\n                            if (\n                                document.activeElement &&\n                                event\n                                    .composedPath()\n                                    .includes(document.activeElement)\n                            ) {\n                                (this.triggerElement as HTMLElement).focus();\n                            }\n                            /* eslint-enable @spectrum-web-components/document-active-element */\n                        }\n                    );\n                    this.dispatchEvent(relationEvent);\n                }\n                return;\n            }\n\n            focusEl?.focus();\n        }\n    }\n    return OverlayWithNoPopover;\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 { ReactiveElement } from 'lit';\nimport {\n    BeforetoggleClosedEvent,\n    BeforetoggleOpenEvent,\n    guaranteedTransitionend,\n    OpenableElement,\n    OverlayBase,\n} from './OverlayBase.dev.js'\nimport { VirtualTrigger } from './VirtualTrigger.dev.js'\n\ntype Constructor<T = Record<string, unknown>> = {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    new (...args: any[]): T;\n    prototype: T;\n};\n\nfunction nextFrame(): Promise<void> {\n    return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nexport function OverlayNoPopover<T extends Constructor<OverlayBase>>(\n    constructor: T\n): T & Constructor<ReactiveElement> {\n    class OverlayWithNoPopover extends constructor {\n        protected override async managePopoverOpen(): Promise<void> {\n            const targetOpenState = this.open;\n            await this.managePosition();\n            await this.ensureOnDOM();\n            const focusEl = await this.makeTransition(targetOpenState);\n            await this.applyFocus(targetOpenState, focusEl);\n        }\n\n        private async ensureOnDOM(): Promise<void> {\n            await nextFrame();\n            await nextFrame();\n        }\n\n        private async makeTransition(\n            targetOpenState: boolean\n        ): Promise<HTMLElement | null> {\n            let focusEl = null as HTMLElement | null;\n            const start = (el: OpenableElement, index: number) => (): void => {\n                if (targetOpenState !== this.open) {\n                    return;\n                }\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 !== true) {\n                    return;\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 = (el: OpenableElement, index: number) => (): void => {\n                if (this.open !== targetOpenState) {\n                    return;\n                }\n                const eventName = targetOpenState ? 'sp-opened' : 'sp-closed';\n                el.dispatchEvent(\n                    new Event(eventName, {\n                        bubbles: false,\n                        composed: false,\n                    })\n                );\n                if (index > 0) {\n                    return;\n                }\n                const hasVirtualTrigger =\n                    this.triggerElement instanceof VirtualTrigger;\n                this.dispatchEvent(\n                    new Event(eventName, {\n                        bubbles: hasVirtualTrigger,\n                        composed: hasVirtualTrigger,\n                    })\n                );\n                if (this.triggerElement && !hasVirtualTrigger) {\n                    (this.triggerElement as HTMLElement).dispatchEvent(\n                        new CustomEvent(eventName, {\n                            bubbles: true,\n                            composed: true,\n                            detail: { interaction: this.type },\n                        })\n                    );\n                }\n            };\n            this.elements.forEach((el, index) => {\n                guaranteedTransitionend(\n                    el,\n                    start(el, index),\n                    finish(el, index)\n                );\n            });\n            return focusEl;\n        }\n\n        private async applyFocus(targetOpenState: boolean, focusEl: HTMLElement | null): Promise<void> {\n            if (this.receivesFocus === 'false') {\n                return;\n            }\n\n            await nextFrame();\n            await nextFrame();\n            if (targetOpenState === this.open && !this.open) {\n                if (\n                    // Do not return focus to trigger when overlay is a \"hint\" (tooltip)\n                    this.type !== 'hint' &&\n                    // Only return focus when the trigger is not \"virtual\"\n                    this.triggerElement &&\n                    !(this.triggerElement instanceof VirtualTrigger)\n                ) {\n                    // This has a bug where the current overlay and the focused content could share the same `activeElement` shadow root...\n                    const relationEvent = new Event('overlay-relation-query', {\n                        bubbles: true,\n                        composed: true,\n                    });\n                    this.addEventListener(\n                        relationEvent.type,\n                        (event: Event) => {\n                            /* eslint-disable @spectrum-web-components/document-active-element */\n                            if (\n                                document.activeElement &&\n                                event\n                                    .composedPath()\n                                    .includes(document.activeElement)\n                            ) {\n                                (this.triggerElement as HTMLElement).focus();\n                            }\n                            /* eslint-enable @spectrum-web-components/document-active-element */\n                        }\n                    );\n                    this.dispatchEvent(relationEvent);\n                }\n                return;\n            }\n\n            focusEl?.focus();\n        }\n    }\n    return OverlayWithNoPopover;\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/src/OverlayNoPopover.js

@@ -1,2 +1,2 @@
-"use strict";import{firstFocusableIn as p,firstFocusableSlottedIn as v}from"@spectrum-web-components/shared/src/first-focusable-in.js";import{BeforetoggleClosedEvent as d,BeforetoggleOpenEvent as h,guaranteedTransitionend as f}from"./OverlayBase.js";import{VirtualTrigger as c}from"./VirtualTrigger.js";function s(){return new Promise(a=>requestAnimationFrame(()=>a()))}export function OverlayNoPopover(a){class m extends a{async managePopoverOpen(){const e=this.open;await this.managePosition(),await this.ensureOnDOM();const t=await this.makeTransition(e);await this.applyFocus(t)}async ensureOnDOM(){await s(),await s()}async makeTransition(e){let t=null;const l=(n,o)=>()=>{if(e!==this.open)return;if(typeof n.open!="undefined"&&(n.open=e),o===0){const i=e?h:d;this.dispatchEvent(new i)}if(e!==!0||(t=t||p(n),t))return;n.querySelectorAll("slot").forEach(i=>{t||(t=v(i))})},u=(n,o)=>()=>{if(this.open!==e)return;const r=e?"sp-opened":"sp-closed";if(n.dispatchEvent(new Event(r,{bubbles:!1,composed:!1})),o>0)return;const i=this.triggerElement instanceof c;this.dispatchEvent(new Event(r,{bubbles:i,composed:i})),this.triggerElement&&!i&&this.triggerElement.dispatchEvent(new CustomEvent(r,{bubbles:!0,composed:!0,detail:{interaction:this.type}}))};return this.elements.forEach((n,o)=>{f(n,l(n,o),u(n,o))}),t}async applyFocus(e){if(this.receivesFocus!=="false"){if(await s(),await s(),!this.open){if(this.type!=="hint"&&this.triggerElement&&!(this.triggerElement instanceof c)){const t=new Event("overlay-relation-query",{bubbles:!0,composed:!0});this.addEventListener(t.type,l=>{document.activeElement&&l.composedPath().includes(document.activeElement)&&this.triggerElement.focus()}),this.dispatchEvent(t)}return}e==null||e.focus()}}}return m}
+"use strict";import{firstFocusableIn as p,firstFocusableSlottedIn as v}from"@spectrum-web-components/shared/src/first-focusable-in.js";import{BeforetoggleClosedEvent as h,BeforetoggleOpenEvent as d,guaranteedTransitionend as f}from"./OverlayBase.js";import{VirtualTrigger as m}from"./VirtualTrigger.js";function a(){return new Promise(l=>requestAnimationFrame(()=>l()))}export function OverlayNoPopover(l){class u extends l{async managePopoverOpen(){const t=this.open;await this.managePosition(),await this.ensureOnDOM();const e=await this.makeTransition(t);await this.applyFocus(t,e)}async ensureOnDOM(){await a(),await a()}async makeTransition(t){let e=null;const r=(n,o)=>()=>{if(t!==this.open)return;if(typeof n.open!="undefined"&&(n.open=t),o===0){const i=t?d:h;this.dispatchEvent(new i)}if(t!==!0||(e=e||p(n),e))return;n.querySelectorAll("slot").forEach(i=>{e||(e=v(i))})},c=(n,o)=>()=>{if(this.open!==t)return;const s=t?"sp-opened":"sp-closed";if(n.dispatchEvent(new Event(s,{bubbles:!1,composed:!1})),o>0)return;const i=this.triggerElement instanceof m;this.dispatchEvent(new Event(s,{bubbles:i,composed:i})),this.triggerElement&&!i&&this.triggerElement.dispatchEvent(new CustomEvent(s,{bubbles:!0,composed:!0,detail:{interaction:this.type}}))};return this.elements.forEach((n,o)=>{f(n,r(n,o),c(n,o))}),e}async applyFocus(t,e){if(this.receivesFocus!=="false"){if(await a(),await a(),t===this.open&&!this.open){if(this.type!=="hint"&&this.triggerElement&&!(this.triggerElement instanceof m)){const r=new Event("overlay-relation-query",{bubbles:!0,composed:!0});this.addEventListener(r.type,c=>{document.activeElement&&c.composedPath().includes(document.activeElement)&&this.triggerElement.focus()}),this.dispatchEvent(r)}return}e==null||e.focus()}}}return u}
 //# sourceMappingURL=OverlayNoPopover.js.map

package/src/OverlayNoPopover.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["OverlayNoPopover.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 { ReactiveElement } from 'lit';\nimport {\n    BeforetoggleClosedEvent,\n    BeforetoggleOpenEvent,\n    guaranteedTransitionend,\n    OpenableElement,\n    OverlayBase,\n} from './OverlayBase.js';\nimport { VirtualTrigger } from './VirtualTrigger.js';\n\ntype Constructor<T = Record<string, unknown>> = {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    new (...args: any[]): T;\n    prototype: T;\n};\n\nfunction nextFrame(): Promise<void> {\n    return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nexport function OverlayNoPopover<T extends Constructor<OverlayBase>>(\n    constructor: T\n): T & Constructor<ReactiveElement> {\n    class OverlayWithNoPopover extends constructor {\n        protected override async managePopoverOpen(): Promise<void> {\n            const targetOpenState = this.open;\n            await this.managePosition();\n            await this.ensureOnDOM();\n            const focusEl = await this.makeTransition(targetOpenState);\n            await this.applyFocus(focusEl);\n        }\n\n        private async ensureOnDOM(): Promise<void> {\n            await nextFrame();\n            await nextFrame();\n        }\n\n        private async makeTransition(\n            targetOpenState: boolean\n        ): Promise<HTMLElement | null> {\n            let focusEl = null as HTMLElement | null;\n            const start = (el: OpenableElement, index: number) => (): void => {\n                if (targetOpenState !== this.open) {\n                    return;\n                }\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 !== true) {\n                    return;\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 = (el: OpenableElement, index: number) => (): void => {\n                if (this.open !== targetOpenState) {\n                    return;\n                }\n                const eventName = targetOpenState ? 'sp-opened' : 'sp-closed';\n                el.dispatchEvent(\n                    new Event(eventName, {\n                        bubbles: false,\n                        composed: false,\n                    })\n                );\n                if (index > 0) {\n                    return;\n                }\n                const hasVirtualTrigger =\n                    this.triggerElement instanceof VirtualTrigger;\n                this.dispatchEvent(\n                    new Event(eventName, {\n                        bubbles: hasVirtualTrigger,\n                        composed: hasVirtualTrigger,\n                    })\n                );\n                if (this.triggerElement && !hasVirtualTrigger) {\n                    (this.triggerElement as HTMLElement).dispatchEvent(\n                        new CustomEvent(eventName, {\n                            bubbles: true,\n                            composed: true,\n                            detail: { interaction: this.type },\n                        })\n                    );\n                }\n            };\n            this.elements.forEach((el, index) => {\n                guaranteedTransitionend(\n                    el,\n                    start(el, index),\n                    finish(el, index)\n                );\n            });\n            return focusEl;\n        }\n\n        private async applyFocus(focusEl: HTMLElement | null): Promise<void> {\n            if (this.receivesFocus === 'false') {\n                return;\n            }\n\n            await nextFrame();\n            await nextFrame();\n            if (!this.open) {\n                if (\n                    // Do not return focus to trigger when overlay is a \"hint\" (tooltip)\n                    this.type !== 'hint' &&\n                    // Only return focus when the trigger is not \"virtual\"\n                    this.triggerElement &&\n                    !(this.triggerElement instanceof VirtualTrigger)\n                ) {\n                    // This has a bug where the current overlay and the focused content could share the same `activeElement` shadow root...\n                    const relationEvent = new Event('overlay-relation-query', {\n                        bubbles: true,\n                        composed: true,\n                    });\n                    this.addEventListener(\n                        relationEvent.type,\n                        (event: Event) => {\n                            /* eslint-disable @spectrum-web-components/document-active-element */\n                            if (\n                                document.activeElement &&\n                                event\n                                    .composedPath()\n                                    .includes(document.activeElement)\n                            ) {\n                                (this.triggerElement as HTMLElement).focus();\n                            }\n                            /* eslint-enable @spectrum-web-components/document-active-element */\n                        }\n                    );\n                    this.dispatchEvent(relationEvent);\n                }\n                return;\n            }\n\n            focusEl?.focus();\n        }\n    }\n    return OverlayWithNoPopover;\n}\n"],
-  "mappings": "aAWA,OACI,oBAAAA,EACA,2BAAAC,MACG,4DAEP,OACI,2BAAAC,EACA,yBAAAC,EACA,2BAAAC,MAGG,mBACP,OAAS,kBAAAC,MAAsB,sBAQ/B,SAASC,GAA2B,CAChC,OAAO,IAAI,QAASC,GAAQ,sBAAsB,IAAMA,EAAI,CAAC,CAAC,CAClE,CAEO,gBAAS,iBACZC,EACgC,CAChC,MAAMC,UAA6BD,CAAY,CAC3C,MAAyB,mBAAmC,CACxD,MAAME,EAAkB,KAAK,KAC7B,MAAM,KAAK,eAAe,EAC1B,MAAM,KAAK,YAAY,EACvB,MAAMC,EAAU,MAAM,KAAK,eAAeD,CAAe,EACzD,MAAM,KAAK,WAAWC,CAAO,CACjC,CAEA,MAAc,aAA6B,CACvC,MAAML,EAAU,EAChB,MAAMA,EAAU,CACpB,CAEA,MAAc,eACVI,EAC2B,CAC3B,IAAIC,EAAU,KACd,MAAMC,EAAQ,CAACC,EAAqBC,IAAkB,IAAY,CAC9D,GAAIJ,IAAoB,KAAK,KACzB,OAKJ,GAHI,OAAOG,EAAG,MAAS,cACnBA,EAAG,KAAOH,GAEVI,IAAU,EAAG,CACb,MAAMC,EAAQL,EACRP,EACAD,EACN,KAAK,cAAc,IAAIa,CAAO,CAClC,CAKA,GAJIL,IAAoB,KAGxBC,EAAUA,GAAWX,EAAiBa,CAAE,EACpCF,GACA,OAEeE,EAAG,iBAAiB,MAAM,EAClC,QAASG,GAAS,CACpBL,IACDA,EAAUV,EAAwBe,CAAI,EAE9C,CAAC,CACL,EACMC,EAAS,CAACJ,EAAqBC,IAAkB,IAAY,CAC/D,GAAI,KAAK,OAASJ,EACd,OAEJ,MAAMQ,EAAYR,EAAkB,YAAc,YAOlD,GANAG,EAAG,cACC,IAAI,MAAMK,EAAW,CACjB,QAAS,GACT,SAAU,EACd,CAAC,CACL,EACIJ,EAAQ,EACR,OAEJ,MAAMK,EACF,KAAK,0BAA0Bd,EACnC,KAAK,cACD,IAAI,MAAMa,EAAW,CACjB,QAASC,EACT,SAAUA,CACd,CAAC,CACL,EACI,KAAK,gBAAkB,CAACA,GACvB,KAAK,eAA+B,cACjC,IAAI,YAAYD,EAAW,CACvB,QAAS,GACT,SAAU,GACV,OAAQ,CAAE,YAAa,KAAK,IAAK,CACrC,CAAC,CACL,CAER,EACA,YAAK,SAAS,QAAQ,CAACL,EAAIC,IAAU,CACjCV,EACIS,EACAD,EAAMC,EAAIC,CAAK,EACfG,EAAOJ,EAAIC,CAAK,CACpB,CACJ,CAAC,EACMH,CACX,CAEA,MAAc,WAAWA,EAA4C,CACjE,GAAI,KAAK,gBAAkB,QAM3B,IAFA,MAAML,EAAU,EAChB,MAAMA,EAAU,EACZ,CAAC,KAAK,KAAM,CACZ,GAEI,KAAK,OAAS,QAEd,KAAK,gBACL,EAAE,KAAK,0BAA0BD,GACnC,CAEE,MAAMe,EAAgB,IAAI,MAAM,yBAA0B,CACtD,QAAS,GACT,SAAU,EACd,CAAC,EACD,KAAK,iBACDA,EAAc,KACbL,GAAiB,CAGV,SAAS,eACTA,EACK,aAAa,EACb,SAAS,SAAS,aAAa,GAEnC,KAAK,eAA+B,MAAM,CAGnD,CACJ,EACA,KAAK,cAAcK,CAAa,CACpC,CACA,MACJ,CAEAT,GAAA,MAAAA,EAAS,QACb,CACJ,CACA,OAAOF,CACX",
+  "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 { ReactiveElement } from 'lit';\nimport {\n    BeforetoggleClosedEvent,\n    BeforetoggleOpenEvent,\n    guaranteedTransitionend,\n    OpenableElement,\n    OverlayBase,\n} from './OverlayBase.js';\nimport { VirtualTrigger } from './VirtualTrigger.js';\n\ntype Constructor<T = Record<string, unknown>> = {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    new (...args: any[]): T;\n    prototype: T;\n};\n\nfunction nextFrame(): Promise<void> {\n    return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nexport function OverlayNoPopover<T extends Constructor<OverlayBase>>(\n    constructor: T\n): T & Constructor<ReactiveElement> {\n    class OverlayWithNoPopover extends constructor {\n        protected override async managePopoverOpen(): Promise<void> {\n            const targetOpenState = this.open;\n            await this.managePosition();\n            await this.ensureOnDOM();\n            const focusEl = await this.makeTransition(targetOpenState);\n            await this.applyFocus(targetOpenState, focusEl);\n        }\n\n        private async ensureOnDOM(): Promise<void> {\n            await nextFrame();\n            await nextFrame();\n        }\n\n        private async makeTransition(\n            targetOpenState: boolean\n        ): Promise<HTMLElement | null> {\n            let focusEl = null as HTMLElement | null;\n            const start = (el: OpenableElement, index: number) => (): void => {\n                if (targetOpenState !== this.open) {\n                    return;\n                }\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 !== true) {\n                    return;\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 = (el: OpenableElement, index: number) => (): void => {\n                if (this.open !== targetOpenState) {\n                    return;\n                }\n                const eventName = targetOpenState ? 'sp-opened' : 'sp-closed';\n                el.dispatchEvent(\n                    new Event(eventName, {\n                        bubbles: false,\n                        composed: false,\n                    })\n                );\n                if (index > 0) {\n                    return;\n                }\n                const hasVirtualTrigger =\n                    this.triggerElement instanceof VirtualTrigger;\n                this.dispatchEvent(\n                    new Event(eventName, {\n                        bubbles: hasVirtualTrigger,\n                        composed: hasVirtualTrigger,\n                    })\n                );\n                if (this.triggerElement && !hasVirtualTrigger) {\n                    (this.triggerElement as HTMLElement).dispatchEvent(\n                        new CustomEvent(eventName, {\n                            bubbles: true,\n                            composed: true,\n                            detail: { interaction: this.type },\n                        })\n                    );\n                }\n            };\n            this.elements.forEach((el, index) => {\n                guaranteedTransitionend(\n                    el,\n                    start(el, index),\n                    finish(el, index)\n                );\n            });\n            return focusEl;\n        }\n\n        private async applyFocus(targetOpenState: boolean, focusEl: HTMLElement | null): Promise<void> {\n            if (this.receivesFocus === 'false') {\n                return;\n            }\n\n            await nextFrame();\n            await nextFrame();\n            if (targetOpenState === this.open && !this.open) {\n                if (\n                    // Do not return focus to trigger when overlay is a \"hint\" (tooltip)\n                    this.type !== 'hint' &&\n                    // Only return focus when the trigger is not \"virtual\"\n                    this.triggerElement &&\n                    !(this.triggerElement instanceof VirtualTrigger)\n                ) {\n                    // This has a bug where the current overlay and the focused content could share the same `activeElement` shadow root...\n                    const relationEvent = new Event('overlay-relation-query', {\n                        bubbles: true,\n                        composed: true,\n                    });\n                    this.addEventListener(\n                        relationEvent.type,\n                        (event: Event) => {\n                            /* eslint-disable @spectrum-web-components/document-active-element */\n                            if (\n                                document.activeElement &&\n                                event\n                                    .composedPath()\n                                    .includes(document.activeElement)\n                            ) {\n                                (this.triggerElement as HTMLElement).focus();\n                            }\n                            /* eslint-enable @spectrum-web-components/document-active-element */\n                        }\n                    );\n                    this.dispatchEvent(relationEvent);\n                }\n                return;\n            }\n\n            focusEl?.focus();\n        }\n    }\n    return OverlayWithNoPopover;\n}\n"],
+  "mappings": "aAWA,OACI,oBAAAA,EACA,2BAAAC,MACG,4DAEP,OACI,2BAAAC,EACA,yBAAAC,EACA,2BAAAC,MAGG,mBACP,OAAS,kBAAAC,MAAsB,sBAQ/B,SAASC,GAA2B,CAChC,OAAO,IAAI,QAASC,GAAQ,sBAAsB,IAAMA,EAAI,CAAC,CAAC,CAClE,CAEO,gBAAS,iBACZC,EACgC,CAChC,MAAMC,UAA6BD,CAAY,CAC3C,MAAyB,mBAAmC,CACxD,MAAME,EAAkB,KAAK,KAC7B,MAAM,KAAK,eAAe,EAC1B,MAAM,KAAK,YAAY,EACvB,MAAMC,EAAU,MAAM,KAAK,eAAeD,CAAe,EACzD,MAAM,KAAK,WAAWA,EAAiBC,CAAO,CAClD,CAEA,MAAc,aAA6B,CACvC,MAAML,EAAU,EAChB,MAAMA,EAAU,CACpB,CAEA,MAAc,eACVI,EAC2B,CAC3B,IAAIC,EAAU,KACd,MAAMC,EAAQ,CAACC,EAAqBC,IAAkB,IAAY,CAC9D,GAAIJ,IAAoB,KAAK,KACzB,OAKJ,GAHI,OAAOG,EAAG,MAAS,cACnBA,EAAG,KAAOH,GAEVI,IAAU,EAAG,CACb,MAAMC,EAAQL,EACRP,EACAD,EACN,KAAK,cAAc,IAAIa,CAAO,CAClC,CAKA,GAJIL,IAAoB,KAGxBC,EAAUA,GAAWX,EAAiBa,CAAE,EACpCF,GACA,OAEeE,EAAG,iBAAiB,MAAM,EAClC,QAASG,GAAS,CACpBL,IACDA,EAAUV,EAAwBe,CAAI,EAE9C,CAAC,CACL,EACMC,EAAS,CAACJ,EAAqBC,IAAkB,IAAY,CAC/D,GAAI,KAAK,OAASJ,EACd,OAEJ,MAAMQ,EAAYR,EAAkB,YAAc,YAOlD,GANAG,EAAG,cACC,IAAI,MAAMK,EAAW,CACjB,QAAS,GACT,SAAU,EACd,CAAC,CACL,EACIJ,EAAQ,EACR,OAEJ,MAAMK,EACF,KAAK,0BAA0Bd,EACnC,KAAK,cACD,IAAI,MAAMa,EAAW,CACjB,QAASC,EACT,SAAUA,CACd,CAAC,CACL,EACI,KAAK,gBAAkB,CAACA,GACvB,KAAK,eAA+B,cACjC,IAAI,YAAYD,EAAW,CACvB,QAAS,GACT,SAAU,GACV,OAAQ,CAAE,YAAa,KAAK,IAAK,CACrC,CAAC,CACL,CAER,EACA,YAAK,SAAS,QAAQ,CAACL,EAAIC,IAAU,CACjCV,EACIS,EACAD,EAAMC,EAAIC,CAAK,EACfG,EAAOJ,EAAIC,CAAK,CACpB,CACJ,CAAC,EACMH,CACX,CAEA,MAAc,WAAWD,EAA0BC,EAA4C,CAC3F,GAAI,KAAK,gBAAkB,QAM3B,IAFA,MAAML,EAAU,EAChB,MAAMA,EAAU,EACZI,IAAoB,KAAK,MAAQ,CAAC,KAAK,KAAM,CAC7C,GAEI,KAAK,OAAS,QAEd,KAAK,gBACL,EAAE,KAAK,0BAA0BL,GACnC,CAEE,MAAMe,EAAgB,IAAI,MAAM,yBAA0B,CACtD,QAAS,GACT,SAAU,EACd,CAAC,EACD,KAAK,iBACDA,EAAc,KACbL,GAAiB,CAGV,SAAS,eACTA,EACK,aAAa,EACb,SAAS,SAAS,aAAa,GAEnC,KAAK,eAA+B,MAAM,CAGnD,CACJ,EACA,KAAK,cAAcK,CAAa,CACpC,CACA,MACJ,CAEAT,GAAA,MAAAA,EAAS,QACb,CACJ,CACA,OAAOF,CACX",
   "names": ["firstFocusableIn", "firstFocusableSlottedIn", "BeforetoggleClosedEvent", "BeforetoggleOpenEvent", "guaranteedTransitionend", "VirtualTrigger", "nextFrame", "res", "constructor", "OverlayWithNoPopover", "targetOpenState", "focusEl", "start", "el", "index", "event", "slot", "finish", "eventName", "hasVirtualTrigger", "relationEvent"]
 }

package/src/OverlayPopover.dev.js

@@ -19,7 +19,7 @@ export function OverlayPopover(constructor) {
       await this.managePosition();
       await this.ensureOnDOM(targetOpenState);
       const focusEl = await this.makeTransition(targetOpenState);
-      await this.applyFocus(focusEl);
+      await this.applyFocus(targetOpenState, focusEl);
     }
     async ensureOnDOM(targetOpenState) {
       await nextFrame();
@@ -94,7 +94,10 @@ export function OverlayPopover(constructor) {
             );
           }
         };
-        if (!targetOpenState && this.open === targetOpenState && this.dialogEl.matches(":open") && this.isConnected) {
+        if (this.open !== targetOpenState) {
+          return;
+        }
+        if (targetOpenState !== true && this.dialogEl.matches(":open") && this.isConnected) {
           this.dialogEl.addEventListener(
             "beforetoggle",
             () => {
@@ -116,13 +119,13 @@ export function OverlayPopover(constructor) {
       });
       return focusEl;
     }
-    async applyFocus(focusEl) {
+    async applyFocus(targetOpenState, focusEl) {
       if (this.receivesFocus === "false") {
         return;
       }
       await nextFrame();
       await nextFrame();
-      if (!this.open) {
+      if (targetOpenState === this.open && !this.open) {
         if (
           // Do not return focus to trigger when overlay is a "hint" (tooltip)
           this.type !== "hint" && // Only return focus when the trigger is not "virtual"

package/src/OverlayPopover.dev.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 { ReactiveElement } from 'lit';\nimport {\n    BeforetoggleClosedEvent,\n    BeforetoggleOpenEvent,\n    guaranteedTransitionend,\n    OpenableElement,\n    OverlayBase,\n} from './OverlayBase.dev.js'\nimport { VirtualTrigger } from './VirtualTrigger.dev.js'\n\ntype Constructor<T = Record<string, unknown>> = {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    new (...args: any[]): T;\n    prototype: T;\n};\n\nfunction nextFrame(): Promise<void> {\n    return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nexport function OverlayPopover<T extends Constructor<OverlayBase>>(\n    constructor: T\n): T & Constructor<ReactiveElement> {\n    class OverlayWithPopover extends constructor {\n        protected override async managePopoverOpen(): Promise<void> {\n            const targetOpenState = this.open;\n            await this.managePosition();\n            await this.ensureOnDOM(targetOpenState);\n            const focusEl = await this.makeTransition(targetOpenState);\n            await this.applyFocus(focusEl);\n        }\n\n        private async ensureOnDOM(targetOpenState: boolean): Promise<void> {\n            await nextFrame();\n            if (\n                targetOpenState &&\n                this.open === targetOpenState &&\n                !this.dialogEl.matches(':open') &&\n                this.isConnected\n            ) {\n                this.dialogEl.showPopover();\n            }\n            await nextFrame();\n        }\n\n        private async makeTransition(\n            targetOpenState: boolean\n        ): Promise<HTMLElement | null> {\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                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 Event(eventName, {\n                                bubbles: false,\n                                composed: false,\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 Event(eventName, {\n                                bubbles: false,\n                                composed: false,\n                            })\n                        );\n                        if (this.triggerElement && !hasVirtualTrigger) {\n                            (this.triggerElement as HTMLElement).dispatchEvent(\n                                new CustomEvent(eventName, {\n                                    bubbles: true,\n                                    composed: true,\n                                    detail: { interaction: this.type },\n                                })\n                            );\n                        }\n                    };\n                    if (\n                        !targetOpenState &&\n                        this.open === targetOpenState &&\n                        this.dialogEl.matches(':open') &&\n                        this.isConnected\n                    ) {\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                guaranteedTransitionend(\n                    el,\n                    start(el, index),\n                    finish(el, index)\n                );\n            });\n            return focusEl;\n        }\n\n        private async applyFocus(focusEl: HTMLElement | null): Promise<void> {\n            if (this.receivesFocus === 'false') {\n                return;\n            }\n\n            await nextFrame();\n            await nextFrame();\n            if (!this.open) {\n                if (\n                    // Do not return focus to trigger when overlay is a \"hint\" (tooltip)\n                    this.type !== 'hint' &&\n                    // Only return focus when the trigger is not \"virtual\"\n                    this.triggerElement &&\n                    !(this.triggerElement instanceof VirtualTrigger)\n                ) {\n                    // This has a bug where the current overlay and the focused content could share the same `activeElement` shadow root...\n                    const relationEvent = new Event('overlay-relation-query', {\n                        bubbles: true,\n                        composed: true,\n                    });\n                    this.addEventListener(\n                        relationEvent.type,\n                        (event: Event) => {\n                            /* eslint-disable @spectrum-web-components/document-active-element */\n                            if (\n                                document.activeElement &&\n                                event\n                                    .composedPath()\n                                    .includes(document.activeElement)\n                            ) {\n                                (this.triggerElement as HTMLElement).focus();\n                            }\n                            /* eslint-enable @spectrum-web-components/document-active-element */\n                        }\n                    );\n                    this.dispatchEvent(relationEvent);\n                }\n                return;\n            }\n\n            focusEl?.focus();\n        }\n    }\n    return OverlayWithPopover;\n}\n"],
-  "mappings": ";AAWA;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAEP;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OAGG;AACP,SAAS,sBAAsB;AAQ/B,SAAS,YAA2B;AAChC,SAAO,IAAI,QAAQ,CAAC,QAAQ,sBAAsB,MAAM,IAAI,CAAC,CAAC;AAClE;AAEO,gBAAS,eACZ,aACgC;AAChC,QAAM,2BAA2B,YAAY;AAAA,IACzC,MAAyB,oBAAmC;AACxD,YAAM,kBAAkB,KAAK;AAC7B,YAAM,KAAK,eAAe;AAC1B,YAAM,KAAK,YAAY,eAAe;AACtC,YAAM,UAAU,MAAM,KAAK,eAAe,eAAe;AACzD,YAAM,KAAK,WAAW,OAAO;AAAA,IACjC;AAAA,IAEA,MAAc,YAAY,iBAAyC;AAC/D,YAAM,UAAU;AAChB,UACI,mBACA,KAAK,SAAS,mBACd,CAAC,KAAK,SAAS,QAAQ,OAAO,KAC9B,KAAK,aACP;AACE,aAAK,SAAS,YAAY;AAAA,MAC9B;AACA,YAAM,UAAU;AAAA,IACpB;AAAA,IAEA,MAAc,eACV,iBAC2B;AAC3B,UAAI,UAAU;AACd,YAAM,QAAQ,CAAC,IAAqB,UAAkB,MAAY;AAC9D,YAAI,OAAO,GAAG,SAAS,aAAa;AAChC,aAAG,OAAO;AAAA,QACd;AACA,YAAI,UAAU,GAAG;AACb,gBAAM,QAAQ,kBACR,wBACA;AACN,eAAK,cAAc,IAAI,MAAM,CAAC;AAAA,QAClC;AACA,YAAI,CAAC,iBAAiB;AAClB;AAAA,QACJ;AACA,kBAAU,WAAW,iBAAiB,EAAE;AACxC,YAAI,SAAS;AACT;AAAA,QACJ;AACA,cAAM,aAAa,GAAG,iBAAiB,MAAM;AAC7C,mBAAW,QAAQ,CAAC,SAAS;AACzB,cAAI,CAAC,SAAS;AACV,sBAAU,wBAAwB,IAAI;AAAA,UAC1C;AAAA,QACJ,CAAC;AAAA,MACL;AACA,YAAM,SACF,CAAC,IAAqB,UACtB,YAA2B;AACvB,YAAI,KAAK,SAAS,iBAAiB;AAC/B;AAAA,QACJ;AACA,cAAM,YAAY,kBACZ,cACA;AACN,YAAI,QAAQ,GAAG;AACX,aAAG;AAAA,YACC,IAAI,MAAM,WAAW;AAAA,cACjB,SAAS;AAAA,cACT,UAAU;AAAA,YACd,CAAC;AAAA,UACL;AACA;AAAA,QACJ;AACA,cAAM,eAAe,YAA2B;AAC5C,cAAI,KAAK,SAAS,iBAAiB;AAC/B;AAAA,UACJ;AACA,gBAAM,UAAU;AAChB,gBAAM,oBACF,KAAK,0BAA0B;AACnC,eAAK;AAAA,YACD,IAAI,MAAM,WAAW;AAAA,cACjB,SAAS;AAAA,cACT,UAAU;AAAA,YACd,CAAC;AAAA,UACL;AACA,aAAG;AAAA,YACC,IAAI,MAAM,WAAW;AAAA,cACjB,SAAS;AAAA,cACT,UAAU;AAAA,YACd,CAAC;AAAA,UACL;AACA,cAAI,KAAK,kBAAkB,CAAC,mBAAmB;AAC3C,YAAC,KAAK,eAA+B;AAAA,cACjC,IAAI,YAAY,WAAW;AAAA,gBACvB,SAAS;AAAA,gBACT,UAAU;AAAA,gBACV,QAAQ,EAAE,aAAa,KAAK,KAAK;AAAA,cACrC,CAAC;AAAA,YACL;AAAA,UACJ;AAAA,QACJ;AACA,YACI,CAAC,mBACD,KAAK,SAAS,mBACd,KAAK,SAAS,QAAQ,OAAO,KAC7B,KAAK,aACP;AACE,eAAK,SAAS;AAAA,YACV;AAAA,YACA,MAAM;AACF,2BAAa;AAAA,YACjB;AAAA,YACA,EAAE,MAAM,KAAK;AAAA,UACjB;AACA,eAAK,SAAS,YAAY;AAAA,QAC9B,OAAO;AACH,uBAAa;AAAA,QACjB;AAAA,MACJ;AACJ,WAAK,SAAS,QAAQ,CAAC,IAAI,UAAU;AACjC;AAAA,UACI;AAAA,UACA,MAAM,IAAI,KAAK;AAAA,UACf,OAAO,IAAI,KAAK;AAAA,QACpB;AAAA,MACJ,CAAC;AACD,aAAO;AAAA,IACX;AAAA,IAEA,MAAc,WAAW,SAA4C;AACjE,UAAI,KAAK,kBAAkB,SAAS;AAChC;AAAA,MACJ;AAEA,YAAM,UAAU;AAChB,YAAM,UAAU;AAChB,UAAI,CAAC,KAAK,MAAM;AACZ;AAAA;AAAA,UAEI,KAAK,SAAS;AAAA,UAEd,KAAK,kBACL,EAAE,KAAK,0BAA0B;AAAA,UACnC;AAEE,gBAAM,gBAAgB,IAAI,MAAM,0BAA0B;AAAA,YACtD,SAAS;AAAA,YACT,UAAU;AAAA,UACd,CAAC;AACD,eAAK;AAAA,YACD,cAAc;AAAA,YACd,CAAC,UAAiB;AAEd,kBACI,SAAS,iBACT,MACK,aAAa,EACb,SAAS,SAAS,aAAa,GACtC;AACE,gBAAC,KAAK,eAA+B,MAAM;AAAA,cAC/C;AAAA,YAEJ;AAAA,UACJ;AACA,eAAK,cAAc,aAAa;AAAA,QACpC;AACA;AAAA,MACJ;AAEA,yCAAS;AAAA,IACb;AAAA,EACJ;AACA,SAAO;AACX;",
+  "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 { ReactiveElement } from 'lit';\nimport {\n    BeforetoggleClosedEvent,\n    BeforetoggleOpenEvent,\n    guaranteedTransitionend,\n    OpenableElement,\n    OverlayBase,\n} from './OverlayBase.dev.js'\nimport { VirtualTrigger } from './VirtualTrigger.dev.js'\n\ntype Constructor<T = Record<string, unknown>> = {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    new (...args: any[]): T;\n    prototype: T;\n};\n\nfunction nextFrame(): Promise<void> {\n    return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nexport function OverlayPopover<T extends Constructor<OverlayBase>>(\n    constructor: T\n): T & Constructor<ReactiveElement> {\n    class OverlayWithPopover extends constructor {\n        protected override async managePopoverOpen(): Promise<void> {\n            const targetOpenState = this.open;\n            await this.managePosition();\n            await this.ensureOnDOM(targetOpenState);\n            const focusEl = await this.makeTransition(targetOpenState);\n            await this.applyFocus(targetOpenState, focusEl);\n        }\n\n        private async ensureOnDOM(targetOpenState: boolean): Promise<void> {\n            await nextFrame();\n            if (\n                targetOpenState &&\n                this.open === targetOpenState &&\n                !this.dialogEl.matches(':open') &&\n                this.isConnected\n            ) {\n                this.dialogEl.showPopover();\n            }\n            await nextFrame();\n        }\n\n        private async makeTransition(\n            targetOpenState: boolean\n        ): Promise<HTMLElement | null> {\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                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 Event(eventName, {\n                                bubbles: false,\n                                composed: false,\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 Event(eventName, {\n                                bubbles: false,\n                                composed: false,\n                            })\n                        );\n                        if (this.triggerElement && !hasVirtualTrigger) {\n                            (this.triggerElement as HTMLElement).dispatchEvent(\n                                new CustomEvent(eventName, {\n                                    bubbles: true,\n                                    composed: true,\n                                    detail: { interaction: this.type },\n                                })\n                            );\n                        }\n                    };\n                    if (this.open !== targetOpenState) {\n                        return;\n                    }\n                    if (\n                        targetOpenState !== true &&\n                        this.dialogEl.matches(':open') &&\n                        this.isConnected\n                    ) {\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                guaranteedTransitionend(\n                    el,\n                    start(el, index),\n                    finish(el, index)\n                );\n            });\n            return focusEl;\n        }\n\n        private async applyFocus(targetOpenState: boolean, focusEl: HTMLElement | null): Promise<void> {\n            if (this.receivesFocus === 'false') {\n                return;\n            }\n\n            await nextFrame();\n            await nextFrame();\n            if (targetOpenState === this.open && !this.open) {\n                if (\n                    // Do not return focus to trigger when overlay is a \"hint\" (tooltip)\n                    this.type !== 'hint' &&\n                    // Only return focus when the trigger is not \"virtual\"\n                    this.triggerElement &&\n                    !(this.triggerElement instanceof VirtualTrigger)\n                ) {\n                    // This has a bug where the current overlay and the focused content could share the same `activeElement` shadow root...\n                    const relationEvent = new Event('overlay-relation-query', {\n                        bubbles: true,\n                        composed: true,\n                    });\n                    this.addEventListener(\n                        relationEvent.type,\n                        (event: Event) => {\n                            /* eslint-disable @spectrum-web-components/document-active-element */\n                            if (\n                                document.activeElement &&\n                                event\n                                    .composedPath()\n                                    .includes(document.activeElement)\n                            ) {\n                                (this.triggerElement as HTMLElement).focus();\n                            }\n                            /* eslint-enable @spectrum-web-components/document-active-element */\n                        }\n                    );\n                    this.dispatchEvent(relationEvent);\n                }\n                return;\n            }\n\n            focusEl?.focus();\n        }\n    }\n    return OverlayWithPopover;\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/src/OverlayPopover.js

@@ -1,2 +1,2 @@
-"use strict";import{firstFocusableIn as d,firstFocusableSlottedIn as p}from"@spectrum-web-components/shared/src/first-focusable-in.js";import{BeforetoggleClosedEvent as v,BeforetoggleOpenEvent as E,guaranteedTransitionend as f}from"./OverlayBase.js";import{VirtualTrigger as m}from"./VirtualTrigger.js";function r(){return new Promise(a=>requestAnimationFrame(()=>a()))}export function OverlayPopover(a){class h extends a{async managePopoverOpen(){const e=this.open;await this.managePosition(),await this.ensureOnDOM(e);const t=await this.makeTransition(e);await this.applyFocus(t)}async ensureOnDOM(e){await r(),e&&this.open===e&&!this.dialogEl.matches(":open")&&this.isConnected&&this.dialogEl.showPopover(),await r()}async makeTransition(e){let t=null;const l=(n,i)=>()=>{if(typeof n.open!="undefined"&&(n.open=e),i===0){const o=e?E:v;this.dispatchEvent(new o)}if(!e||(t=t||d(n),t))return;n.querySelectorAll("slot").forEach(o=>{t||(t=p(o))})},u=(n,i)=>async()=>{if(this.open!==e)return;const s=e?"sp-opened":"sp-closed";if(i>0){n.dispatchEvent(new Event(s,{bubbles:!1,composed:!1}));return}const o=async()=>{if(this.open!==e)return;await r();const c=this.triggerElement instanceof m;this.dispatchEvent(new Event(s,{bubbles:c,composed:c})),n.dispatchEvent(new Event(s,{bubbles:!1,composed:!1})),this.triggerElement&&!c&&this.triggerElement.dispatchEvent(new CustomEvent(s,{bubbles:!0,composed:!0,detail:{interaction:this.type}}))};!e&&this.open===e&&this.dialogEl.matches(":open")&&this.isConnected?(this.dialogEl.addEventListener("beforetoggle",()=>{o()},{once:!0}),this.dialogEl.hidePopover()):o()};return this.elements.forEach((n,i)=>{f(n,l(n,i),u(n,i))}),t}async applyFocus(e){if(this.receivesFocus!=="false"){if(await r(),await r(),!this.open){if(this.type!=="hint"&&this.triggerElement&&!(this.triggerElement instanceof m)){const t=new Event("overlay-relation-query",{bubbles:!0,composed:!0});this.addEventListener(t.type,l=>{document.activeElement&&l.composedPath().includes(document.activeElement)&&this.triggerElement.focus()}),this.dispatchEvent(t)}return}e==null||e.focus()}}}return h}
+"use strict";import{firstFocusableIn as p,firstFocusableSlottedIn as d}from"@spectrum-web-components/shared/src/first-focusable-in.js";import{BeforetoggleClosedEvent as v,BeforetoggleOpenEvent as E,guaranteedTransitionend as f}from"./OverlayBase.js";import{VirtualTrigger as h}from"./VirtualTrigger.js";function r(){return new Promise(l=>requestAnimationFrame(()=>l()))}export function OverlayPopover(l){class u extends l{async managePopoverOpen(){const e=this.open;await this.managePosition(),await this.ensureOnDOM(e);const t=await this.makeTransition(e);await this.applyFocus(e,t)}async ensureOnDOM(e){await r(),e&&this.open===e&&!this.dialogEl.matches(":open")&&this.isConnected&&this.dialogEl.showPopover(),await r()}async makeTransition(e){let t=null;const a=(n,i)=>()=>{if(typeof n.open!="undefined"&&(n.open=e),i===0){const o=e?E:v;this.dispatchEvent(new o)}if(!e||(t=t||p(n),t))return;n.querySelectorAll("slot").forEach(o=>{t||(t=d(o))})},c=(n,i)=>async()=>{if(this.open!==e)return;const s=e?"sp-opened":"sp-closed";if(i>0){n.dispatchEvent(new Event(s,{bubbles:!1,composed:!1}));return}const o=async()=>{if(this.open!==e)return;await r();const m=this.triggerElement instanceof h;this.dispatchEvent(new Event(s,{bubbles:m,composed:m})),n.dispatchEvent(new Event(s,{bubbles:!1,composed:!1})),this.triggerElement&&!m&&this.triggerElement.dispatchEvent(new CustomEvent(s,{bubbles:!0,composed:!0,detail:{interaction:this.type}}))};this.open===e&&(e!==!0&&this.dialogEl.matches(":open")&&this.isConnected?(this.dialogEl.addEventListener("beforetoggle",()=>{o()},{once:!0}),this.dialogEl.hidePopover()):o())};return this.elements.forEach((n,i)=>{f(n,a(n,i),c(n,i))}),t}async applyFocus(e,t){if(this.receivesFocus!=="false"){if(await r(),await r(),e===this.open&&!this.open){if(this.type!=="hint"&&this.triggerElement&&!(this.triggerElement instanceof h)){const a=new Event("overlay-relation-query",{bubbles:!0,composed:!0});this.addEventListener(a.type,c=>{document.activeElement&&c.composedPath().includes(document.activeElement)&&this.triggerElement.focus()}),this.dispatchEvent(a)}return}t==null||t.focus()}}}return u}
 //# 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 { ReactiveElement } from 'lit';\nimport {\n    BeforetoggleClosedEvent,\n    BeforetoggleOpenEvent,\n    guaranteedTransitionend,\n    OpenableElement,\n    OverlayBase,\n} from './OverlayBase.js';\nimport { VirtualTrigger } from './VirtualTrigger.js';\n\ntype Constructor<T = Record<string, unknown>> = {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    new (...args: any[]): T;\n    prototype: T;\n};\n\nfunction nextFrame(): Promise<void> {\n    return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nexport function OverlayPopover<T extends Constructor<OverlayBase>>(\n    constructor: T\n): T & Constructor<ReactiveElement> {\n    class OverlayWithPopover extends constructor {\n        protected override async managePopoverOpen(): Promise<void> {\n            const targetOpenState = this.open;\n            await this.managePosition();\n            await this.ensureOnDOM(targetOpenState);\n            const focusEl = await this.makeTransition(targetOpenState);\n            await this.applyFocus(focusEl);\n        }\n\n        private async ensureOnDOM(targetOpenState: boolean): Promise<void> {\n            await nextFrame();\n            if (\n                targetOpenState &&\n                this.open === targetOpenState &&\n                !this.dialogEl.matches(':open') &&\n                this.isConnected\n            ) {\n                this.dialogEl.showPopover();\n            }\n            await nextFrame();\n        }\n\n        private async makeTransition(\n            targetOpenState: boolean\n        ): Promise<HTMLElement | null> {\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                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 Event(eventName, {\n                                bubbles: false,\n                                composed: false,\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 Event(eventName, {\n                                bubbles: false,\n                                composed: false,\n                            })\n                        );\n                        if (this.triggerElement && !hasVirtualTrigger) {\n                            (this.triggerElement as HTMLElement).dispatchEvent(\n                                new CustomEvent(eventName, {\n                                    bubbles: true,\n                                    composed: true,\n                                    detail: { interaction: this.type },\n                                })\n                            );\n                        }\n                    };\n                    if (\n                        !targetOpenState &&\n                        this.open === targetOpenState &&\n                        this.dialogEl.matches(':open') &&\n                        this.isConnected\n                    ) {\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                guaranteedTransitionend(\n                    el,\n                    start(el, index),\n                    finish(el, index)\n                );\n            });\n            return focusEl;\n        }\n\n        private async applyFocus(focusEl: HTMLElement | null): Promise<void> {\n            if (this.receivesFocus === 'false') {\n                return;\n            }\n\n            await nextFrame();\n            await nextFrame();\n            if (!this.open) {\n                if (\n                    // Do not return focus to trigger when overlay is a \"hint\" (tooltip)\n                    this.type !== 'hint' &&\n                    // Only return focus when the trigger is not \"virtual\"\n                    this.triggerElement &&\n                    !(this.triggerElement instanceof VirtualTrigger)\n                ) {\n                    // This has a bug where the current overlay and the focused content could share the same `activeElement` shadow root...\n                    const relationEvent = new Event('overlay-relation-query', {\n                        bubbles: true,\n                        composed: true,\n                    });\n                    this.addEventListener(\n                        relationEvent.type,\n                        (event: Event) => {\n                            /* eslint-disable @spectrum-web-components/document-active-element */\n                            if (\n                                document.activeElement &&\n                                event\n                                    .composedPath()\n                                    .includes(document.activeElement)\n                            ) {\n                                (this.triggerElement as HTMLElement).focus();\n                            }\n                            /* eslint-enable @spectrum-web-components/document-active-element */\n                        }\n                    );\n                    this.dispatchEvent(relationEvent);\n                }\n                return;\n            }\n\n            focusEl?.focus();\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 { ReactiveElement } from 'lit';\nimport {\n    BeforetoggleClosedEvent,\n    BeforetoggleOpenEvent,\n    guaranteedTransitionend,\n    OpenableElement,\n    OverlayBase,\n} from './OverlayBase.js';\nimport { VirtualTrigger } from './VirtualTrigger.js';\n\ntype Constructor<T = Record<string, unknown>> = {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    new (...args: any[]): T;\n    prototype: T;\n};\n\nfunction nextFrame(): Promise<void> {\n    return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nexport function OverlayPopover<T extends Constructor<OverlayBase>>(\n    constructor: T\n): T & Constructor<ReactiveElement> {\n    class OverlayWithPopover extends constructor {\n        protected override async managePopoverOpen(): Promise<void> {\n            const targetOpenState = this.open;\n            await this.managePosition();\n            await this.ensureOnDOM(targetOpenState);\n            const focusEl = await this.makeTransition(targetOpenState);\n            await this.applyFocus(targetOpenState, focusEl);\n        }\n\n        private async ensureOnDOM(targetOpenState: boolean): Promise<void> {\n            await nextFrame();\n            if (\n                targetOpenState &&\n                this.open === targetOpenState &&\n                !this.dialogEl.matches(':open') &&\n                this.isConnected\n            ) {\n                this.dialogEl.showPopover();\n            }\n            await nextFrame();\n        }\n\n        private async makeTransition(\n            targetOpenState: boolean\n        ): Promise<HTMLElement | null> {\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                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 Event(eventName, {\n                                bubbles: false,\n                                composed: false,\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 Event(eventName, {\n                                bubbles: false,\n                                composed: false,\n                            })\n                        );\n                        if (this.triggerElement && !hasVirtualTrigger) {\n                            (this.triggerElement as HTMLElement).dispatchEvent(\n                                new CustomEvent(eventName, {\n                                    bubbles: true,\n                                    composed: true,\n                                    detail: { interaction: this.type },\n                                })\n                            );\n                        }\n                    };\n                    if (this.open !== targetOpenState) {\n                        return;\n                    }\n                    if (\n                        targetOpenState !== true &&\n                        this.dialogEl.matches(':open') &&\n                        this.isConnected\n                    ) {\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                guaranteedTransitionend(\n                    el,\n                    start(el, index),\n                    finish(el, index)\n                );\n            });\n            return focusEl;\n        }\n\n        private async applyFocus(targetOpenState: boolean, focusEl: HTMLElement | null): Promise<void> {\n            if (this.receivesFocus === 'false') {\n                return;\n            }\n\n            await nextFrame();\n            await nextFrame();\n            if (targetOpenState === this.open && !this.open) {\n                if (\n                    // Do not return focus to trigger when overlay is a \"hint\" (tooltip)\n                    this.type !== 'hint' &&\n                    // Only return focus when the trigger is not \"virtual\"\n                    this.triggerElement &&\n                    !(this.triggerElement instanceof VirtualTrigger)\n                ) {\n                    // This has a bug where the current overlay and the focused content could share the same `activeElement` shadow root...\n                    const relationEvent = new Event('overlay-relation-query', {\n                        bubbles: true,\n                        composed: true,\n                    });\n                    this.addEventListener(\n                        relationEvent.type,\n                        (event: Event) => {\n                            /* eslint-disable @spectrum-web-components/document-active-element */\n                            if (\n                                document.activeElement &&\n                                event\n                                    .composedPath()\n                                    .includes(document.activeElement)\n                            ) {\n                                (this.triggerElement as HTMLElement).focus();\n                            }\n                            /* eslint-enable @spectrum-web-components/document-active-element */\n                        }\n                    );\n                    this.dispatchEvent(relationEvent);\n                }\n                return;\n            }\n\n            focusEl?.focus();\n        }\n    }\n    return OverlayWithPopover;\n}\n"],
+  "mappings": "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",
   "names": ["firstFocusableIn", "firstFocusableSlottedIn", "BeforetoggleClosedEvent", "BeforetoggleOpenEvent", "guaranteedTransitionend", "VirtualTrigger", "nextFrame", "res", "constructor", "OverlayWithPopover", "targetOpenState", "focusEl", "start", "el", "index", "event", "slot", "finish", "eventName", "reportChange", "hasVirtualTrigger", "relationEvent"]
 }

package/src/overlay-base.css.dev.js

@@ -3,7 +3,7 @@ import { css } from "@spectrum-web-components/base";
 const styles = css`
 :host{--swc-overlay-animation-distance:var(
 --spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)
-)}dialog{background:none;border:0;box-sizing:border-box;display:flex;margin:0;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);opacity:1!important;overflow:visible;padding:0;position:fixed}:host(:not([open])) dialog{left:0;pointer-events:none;top:0;transform:translate(-999em,-999em)}dialog::backdrop{display:none}dialog>div{width:100%}::slotted(sp-popover){position:static}dialog[actual-placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}dialog[actual-placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}dialog[actual-placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}dialog[actual-placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}@supports selector(:open){dialog{opacity:0}dialog:open{opacity:1}}@supports not selector(:open){:host:not([open]) dialog{pointer-events:none}dialog[actual-placement]{z-index:var(--swc-overlay-z-index)}}
+);position:fixed}dialog{background:none;border:0;box-sizing:border-box;display:flex;margin:0;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);opacity:1!important;overflow:visible;padding:0;position:fixed}:host(:not([open])) dialog{left:0;pointer-events:none;top:0;transform:translate(-999em,-999em)}dialog::backdrop{display:none}dialog>div{width:100%}::slotted(sp-popover){position:static}dialog[actual-placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}dialog[actual-placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}dialog[actual-placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}dialog[actual-placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}@supports selector(:open){dialog{opacity:0}dialog:open{opacity:1}}@supports not selector(:open){:host:not([open]) dialog{pointer-events:none}dialog[actual-placement]{z-index:var(--swc-overlay-z-index)}}
 `;
 export default styles;
 //# sourceMappingURL=overlay-base.css.dev.js.map

package/src/overlay-base.css.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["overlay-base.css.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*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--swc-overlay-animation-distance:var(\n--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)\n)}dialog{background:none;border:0;box-sizing:border-box;display:flex;margin:0;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);opacity:1!important;overflow:visible;padding:0;position:fixed}:host(:not([open])) dialog{left:0;pointer-events:none;top:0;transform:translate(-999em,-999em)}dialog::backdrop{display:none}dialog>div{width:100%}::slotted(sp-popover){position:static}dialog[actual-placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}dialog[actual-placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}dialog[actual-placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}dialog[actual-placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}@supports selector(:open){dialog{opacity:0}dialog:open{opacity:1}}@supports not selector(:open){:host:not([open]) dialog{pointer-events:none}dialog[actual-placement]{z-index:var(--swc-overlay-z-index)}}\n`;\nexport default styles;"],
+  "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*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--swc-overlay-animation-distance:var(\n--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)\n);position:fixed}dialog{background:none;border:0;box-sizing:border-box;display:flex;margin:0;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);opacity:1!important;overflow:visible;padding:0;position:fixed}:host(:not([open])) dialog{left:0;pointer-events:none;top:0;transform:translate(-999em,-999em)}dialog::backdrop{display:none}dialog>div{width:100%}::slotted(sp-popover){position:static}dialog[actual-placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}dialog[actual-placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}dialog[actual-placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}dialog[actual-placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}@supports selector(:open){dialog{opacity:0}dialog:open{opacity:1}}@supports not selector(:open){:host:not([open]) dialog{pointer-events:none}dialog[actual-placement]{z-index:var(--swc-overlay-z-index)}}\n`;\nexport default styles;"],
   "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAKf,eAAe;",
   "names": []
 }

package/src/overlay-base.css.js

@@ -1,6 +1,6 @@
 "use strict";import{css as a}from"@spectrum-web-components/base";const o=a`
 :host{--swc-overlay-animation-distance:var(
 --spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)
-)}dialog{background:none;border:0;box-sizing:border-box;display:flex;margin:0;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);opacity:1!important;overflow:visible;padding:0;position:fixed}:host(:not([open])) dialog{left:0;pointer-events:none;top:0;transform:translate(-999em,-999em)}dialog::backdrop{display:none}dialog>div{width:100%}::slotted(sp-popover){position:static}dialog[actual-placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}dialog[actual-placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}dialog[actual-placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}dialog[actual-placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}@supports selector(:open){dialog{opacity:0}dialog:open{opacity:1}}@supports not selector(:open){:host:not([open]) dialog{pointer-events:none}dialog[actual-placement]{z-index:var(--swc-overlay-z-index)}}
+);position:fixed}dialog{background:none;border:0;box-sizing:border-box;display:flex;margin:0;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);opacity:1!important;overflow:visible;padding:0;position:fixed}:host(:not([open])) dialog{left:0;pointer-events:none;top:0;transform:translate(-999em,-999em)}dialog::backdrop{display:none}dialog>div{width:100%}::slotted(sp-popover){position:static}dialog[actual-placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}dialog[actual-placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}dialog[actual-placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}dialog[actual-placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}@supports selector(:open){dialog{opacity:0}dialog:open{opacity:1}}@supports not selector(:open){:host:not([open]) dialog{pointer-events:none}dialog[actual-placement]{z-index:var(--swc-overlay-z-index)}}
 `;export default o;
 //# sourceMappingURL=overlay-base.css.js.map

package/src/overlay-base.css.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["overlay-base.css.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*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--swc-overlay-animation-distance:var(\n--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)\n)}dialog{background:none;border:0;box-sizing:border-box;display:flex;margin:0;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);opacity:1!important;overflow:visible;padding:0;position:fixed}:host(:not([open])) dialog{left:0;pointer-events:none;top:0;transform:translate(-999em,-999em)}dialog::backdrop{display:none}dialog>div{width:100%}::slotted(sp-popover){position:static}dialog[actual-placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}dialog[actual-placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}dialog[actual-placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}dialog[actual-placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}@supports selector(:open){dialog{opacity:0}dialog:open{opacity:1}}@supports not selector(:open){:host:not([open]) dialog{pointer-events:none}dialog[actual-placement]{z-index:var(--swc-overlay-z-index)}}\n`;\nexport default styles;"],
+  "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*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--swc-overlay-animation-distance:var(\n--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)\n);position:fixed}dialog{background:none;border:0;box-sizing:border-box;display:flex;margin:0;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);opacity:1!important;overflow:visible;padding:0;position:fixed}:host(:not([open])) dialog{left:0;pointer-events:none;top:0;transform:translate(-999em,-999em)}dialog::backdrop{display:none}dialog>div{width:100%}::slotted(sp-popover){position:static}dialog[actual-placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}dialog[actual-placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}dialog[actual-placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}dialog[actual-placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}@supports selector(:open){dialog{opacity:0}dialog:open{opacity:1}}@supports not selector(:open){:host:not([open]) dialog{pointer-events:none}dialog[actual-placement]{z-index:var(--swc-overlay-z-index)}}\n`;\nexport default styles;"],
   "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA,EAKf,eAAeC",
   "names": ["css", "styles"]
 }

package/test/overlay.test.js

@@ -444,23 +444,10 @@ describe('Overlay - type="modal"', () => {
     it('closes the first "contextmenu" when opening a second', async () => {
       const closed = oneEvent(document, "sp-closed");
       const opened = oneEvent(document, "sp-opened");
-      await sendMouse({
-        steps: [
-          {
-            type: "move",
-            position: [width / 4, height / 4]
-          },
-          {
-            type: "click",
-            options: {
-              button: "right"
-            },
-            position: [width / 4, height / 4]
-          }
-        ]
-      });
-      await opened;
+      const trigger = document.querySelector("start-end-contextmenu");
+      trigger.dispatchEvent(new Event("contextmenu"));
       await closed;
+      await opened;
       secondMenu = document.querySelector("sp-popover");
       secondRect = secondMenu.getBoundingClientRect();
       expect(secondMenu).to.not.be.null;
@@ -469,13 +456,9 @@ describe('Overlay - type="modal"', () => {
       const closed = oneEvent(document, "sp-closed");
       sendMouse({
         steps: [
-          {
-            type: "move",
-            position: [width / 8, height / 8]
-          },
           {
             type: "click",
-            position: [width / 8, height / 8]
+            position: [width - width / 8, height - height / 8]
           }
         ]
       });