@spectrum-web-components/overlay 0.40.2 → 0.40.3

package/src/PlacementController.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["PlacementController.ts"],
-  "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport type {\n    ReactiveController,\n    ReactiveElement,\n} from '@spectrum-web-components/base';\nimport {\n    arrow,\n    autoUpdate,\n    computePosition,\n    flip,\n    offset,\n    Placement,\n    shift,\n    size,\n} from '@floating-ui/dom';\nimport type { VirtualTrigger } from './VirtualTrigger.js';\nimport { topLayerOverTransforms } from './topLayerOverTransforms.js';\nimport type { OpenableElement } from './overlay-types.js';\nimport type { Overlay } from './Overlay.js';\n\ntype OverlayOptionsV1 = {\n    abortPromise?: Promise<boolean>;\n    delayed?: boolean;\n    offset?: number | [number, number]; // supporting multi-axis\n    placement: Placement;\n    notImmediatelyClosable?: boolean; // rename or place behind other API options\n    receivesFocus?: 'auto';\n    root?: HTMLElement;\n    tipPadding?: number;\n    trigger: HTMLElement | VirtualTrigger;\n    type?: 'modal' | 'page' | 'hint' | 'auto' | 'manual';\n};\n\nfunction roundByDPR(num?: number): number {\n    if (typeof num === 'undefined') return 0;\n    const dpr = window.devicePixelRatio || 1;\n    return Math.round(num * dpr) / dpr ?? -10000;\n}\n\n// See: https://spectrum.adobe.com/page/popover/#Container-padding\nconst REQUIRED_DISTANCE_TO_EDGE = 8;\n// See: https://github.com/adobe/spectrum-web-components/issues/910\nconst MIN_OVERLAY_HEIGHT = 100;\n\nconst getFallbackPlacements = (placement: Placement): Placement[] => {\n    const fallbacks: Record<Placement, Placement[]> = {\n        left: ['right', 'bottom', 'top'],\n        'left-start': ['right-start', 'bottom', 'top'],\n        'left-end': ['right-end', 'bottom', 'top'],\n        right: ['left', 'bottom', 'top'],\n        'right-start': ['left-start', 'bottom', 'top'],\n        'right-end': ['left-end', 'bottom', 'top'],\n        top: ['bottom', 'left', 'right'],\n        'top-start': ['bottom-start', 'left', 'right'],\n        'top-end': ['bottom-end', 'left', 'right'],\n        bottom: ['top', 'left', 'right'],\n        'bottom-start': ['top-start', 'left', 'right'],\n        'bottom-end': ['top-end', 'left', 'right'],\n    };\n    return fallbacks[placement] ?? [placement];\n};\n\nexport const placementUpdatedSymbol = Symbol('placement updated');\n\nexport class PlacementController implements ReactiveController {\n    private cleanup?: () => void;\n\n    initialHeight?: number;\n\n    isConstrained?: boolean;\n\n    private host!: ReactiveElement & { elements: OpenableElement[] };\n\n    private options!: OverlayOptionsV1;\n\n    private originalPlacements = new WeakMap<HTMLElement, Placement>();\n\n    private target!: HTMLElement;\n\n    constructor(host: ReactiveElement & { elements: OpenableElement[] }) {\n        this.host = host;\n        // Add the controller after the MutationObserver has been created in preparation\n        // for the `hostConnected`/`hostDisconnected` callbacks to be run.\n        this.host.addController(this);\n    }\n\n    public async placeOverlay(\n        target: HTMLElement = this.target,\n        options: OverlayOptionsV1 = this.options\n    ): Promise<void> {\n        this.target = target;\n        this.options = options;\n        if (!target || !options) return;\n\n        const cleanup = autoUpdate(\n            options.trigger,\n            target,\n            this.updatePlacement,\n            {\n                elementResize: false,\n                layoutShift: false,\n            }\n        );\n        this.cleanup = () => {\n            this.host.elements?.forEach((element) => {\n                element.addEventListener(\n                    'sp-closed',\n                    () => {\n                        const placement = this.originalPlacements.get(element);\n                        if (placement) {\n                            element.setAttribute('placement', placement);\n                        }\n                        this.originalPlacements.delete(element);\n                    },\n                    { once: true }\n                );\n            });\n            cleanup();\n        };\n    }\n\n    allowPlacementUpdate = false;\n\n    updatePlacement = (): void => {\n        if (\n            !this.allowPlacementUpdate &&\n            this.options.type !== 'modal' &&\n            this.cleanup\n        ) {\n            this.target.dispatchEvent(new Event('close', { bubbles: true }));\n            return;\n        }\n        this.computePlacement();\n        this.allowPlacementUpdate = false;\n    };\n\n    async computePlacement(): Promise<void> {\n        const { options, target } = this;\n\n        await (document.fonts ? document.fonts.ready : Promise.resolve());\n\n        const flipMiddleware = !(options.trigger instanceof HTMLElement)\n            ? flip({\n                  padding: REQUIRED_DISTANCE_TO_EDGE,\n                  fallbackPlacements: getFallbackPlacements(options.placement),\n              })\n            : flip();\n\n        const [mainAxis = 0, crossAxis = 0] = Array.isArray(options?.offset)\n            ? options.offset\n            : [options.offset, 0];\n\n        const tipElement = this.host.elements.find(\n            (el) => el.tipElement\n        )?.tipElement;\n\n        const middleware = [\n            offset({\n                mainAxis,\n                crossAxis,\n            }),\n            shift({ padding: REQUIRED_DISTANCE_TO_EDGE }),\n            flipMiddleware,\n            size({\n                padding: REQUIRED_DISTANCE_TO_EDGE,\n                apply: ({\n                    availableWidth,\n                    availableHeight,\n                    rects: { floating },\n                }) => {\n                    const maxHeight = Math.max(\n                        MIN_OVERLAY_HEIGHT,\n                        Math.floor(availableHeight)\n                    );\n                    const actualHeight = floating.height;\n                    this.initialHeight = !this.isConstrained // && !this.virtualTrigger\n                        ? actualHeight\n                        : this.initialHeight || actualHeight;\n                    this.isConstrained =\n                        actualHeight < this.initialHeight ||\n                        maxHeight <= actualHeight;\n                    const appliedHeight = this.isConstrained\n                        ? `${maxHeight}px`\n                        : '';\n                    Object.assign(target.style, {\n                        maxWidth: `${Math.floor(availableWidth)}px`,\n                        maxHeight: appliedHeight,\n                        height: appliedHeight,\n                    });\n                },\n            }),\n            ...(tipElement\n                ? [\n                      arrow({\n                          element: tipElement,\n                          padding:\n                              options.tipPadding || REQUIRED_DISTANCE_TO_EDGE,\n                      }),\n                  ]\n                : []),\n            topLayerOverTransforms(),\n        ];\n        const { x, y, placement, middlewareData } = await computePosition(\n            options.trigger,\n            target,\n            {\n                placement: options.placement,\n                middleware,\n                strategy: 'fixed',\n            }\n        );\n        Object.assign(target.style, {\n            top: '0px',\n            left: '0px',\n            translate: `${roundByDPR(x)}px ${roundByDPR(y)}px`,\n        });\n\n        target.setAttribute('actual-placement', placement);\n        this.host.elements?.forEach((element) => {\n            this.originalPlacements.set(\n                element,\n                element.getAttribute('placement') as Placement\n            );\n            element.setAttribute('placement', placement);\n        });\n\n        if (tipElement && middlewareData.arrow) {\n            const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n            Object.assign(tipElement.style, {\n                top:\n                    placement.startsWith('right') ||\n                    placement.startsWith('left')\n                        ? '0px'\n                        : '',\n                left:\n                    placement.startsWith('bottom') ||\n                    placement.startsWith('top')\n                        ? '0px'\n                        : '',\n                translate: `${roundByDPR(arrowX)}px ${roundByDPR(arrowY)}px`,\n            });\n        }\n    }\n\n    public resetOverlayPosition = (): void => {\n        if (!this.target || !this.options) return;\n\n        this.target.style.removeProperty('max-height');\n        this.target.style.removeProperty('height');\n        this.initialHeight = undefined;\n        this.isConstrained = false;\n        // force paint\n        this.host.offsetHeight;\n        this.computePlacement();\n    };\n\n    hostConnected(): void {\n        document.addEventListener(\n            'sp-update-overlays',\n            this.resetOverlayPosition\n        );\n    }\n\n    hostUpdated(): void {\n        if (!(this.host as Overlay).open) {\n            this.cleanup?.();\n            this.cleanup = undefined;\n        }\n    }\n\n    hostDisconnected(): void {\n        this.cleanup?.();\n        this.cleanup = undefined;\n        document.removeEventListener(\n            'sp-update-overlays',\n            this.resetOverlayPosition\n        );\n    }\n}\n"],
-  "mappings": "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",
-  "names": ["arrow", "autoUpdate", "computePosition", "flip", "offset", "shift", "size", "topLayerOverTransforms", "roundByDPR", "num", "dpr", "REQUIRED_DISTANCE_TO_EDGE", "MIN_OVERLAY_HEIGHT", "getFallbackPlacements", "placement", "_a", "host", "target", "options", "cleanup", "element", "_b", "flipMiddleware", "mainAxis", "crossAxis", "tipElement", "el", "middleware", "availableWidth", "availableHeight", "floating", "maxHeight", "actualHeight", "appliedHeight", "x", "y", "middlewareData", "arrowX", "arrowY"]
+  "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport type {\n    ReactiveController,\n    ReactiveElement,\n} from '@spectrum-web-components/base';\nimport {\n    arrow,\n    autoUpdate,\n    computePosition,\n    flip,\n    offset,\n    Placement,\n    shift,\n    size,\n} from '@floating-ui/dom';\nimport type { VirtualTrigger } from './VirtualTrigger.js';\nimport { topLayerOverTransforms } from './topLayerOverTransforms.js';\nimport type { OpenableElement } from './overlay-types.js';\nimport type { Overlay } from './Overlay.js';\n\ntype OverlayOptionsV1 = {\n    abortPromise?: Promise<boolean>;\n    delayed?: boolean;\n    offset?: number | [number, number]; // supporting multi-axis\n    placement: Placement;\n    notImmediatelyClosable?: boolean; // rename or place behind other API options\n    receivesFocus?: 'auto';\n    root?: HTMLElement;\n    tipPadding?: number;\n    trigger: HTMLElement | VirtualTrigger;\n    type?: 'modal' | 'page' | 'hint' | 'auto' | 'manual';\n};\n\nfunction roundByDPR(num?: number): number {\n    if (typeof num === 'undefined') return 0;\n    const dpr = window.devicePixelRatio || 1;\n    return Math.round(num * dpr) / dpr ?? -10000;\n}\n\n// See: https://spectrum.adobe.com/page/popover/#Container-padding\nconst REQUIRED_DISTANCE_TO_EDGE = 8;\n// See: https://github.com/adobe/spectrum-web-components/issues/910\nconst MIN_OVERLAY_HEIGHT = 100;\n\nconst getFallbackPlacements = (placement: Placement): Placement[] => {\n    const fallbacks: Record<Placement, Placement[]> = {\n        left: ['right', 'bottom', 'top'],\n        'left-start': ['right-start', 'bottom', 'top'],\n        'left-end': ['right-end', 'bottom', 'top'],\n        right: ['left', 'bottom', 'top'],\n        'right-start': ['left-start', 'bottom', 'top'],\n        'right-end': ['left-end', 'bottom', 'top'],\n        top: ['bottom', 'left', 'right'],\n        'top-start': ['bottom-start', 'left', 'right'],\n        'top-end': ['bottom-end', 'left', 'right'],\n        bottom: ['top', 'left', 'right'],\n        'bottom-start': ['top-start', 'left', 'right'],\n        'bottom-end': ['top-end', 'left', 'right'],\n    };\n    return fallbacks[placement] ?? [placement];\n};\n\nexport const placementUpdatedSymbol = Symbol('placement updated');\n\nexport class PlacementController implements ReactiveController {\n    private cleanup?: () => void;\n\n    initialHeight?: number;\n\n    isConstrained?: boolean;\n\n    private host!: ReactiveElement & { elements: OpenableElement[] };\n\n    private options!: OverlayOptionsV1;\n\n    private originalPlacements = new WeakMap<HTMLElement, Placement>();\n\n    private target!: HTMLElement;\n\n    constructor(host: ReactiveElement & { elements: OpenableElement[] }) {\n        this.host = host;\n        // Add the controller after the MutationObserver has been created in preparation\n        // for the `hostConnected`/`hostDisconnected` callbacks to be run.\n        this.host.addController(this);\n    }\n\n    public async placeOverlay(\n        target: HTMLElement = this.target,\n        options: OverlayOptionsV1 = this.options\n    ): Promise<void> {\n        this.target = target;\n        this.options = options;\n        if (!target || !options) return;\n\n        const cleanupAncestorResize = autoUpdate(\n            options.trigger,\n            target,\n            this.closeForAncestorUpdate,\n            {\n                ancestorResize: false,\n                elementResize: false,\n                layoutShift: false,\n            }\n        );\n        const cleanupElementResize = autoUpdate(\n            options.trigger,\n            target,\n            this.updatePlacement,\n            {\n                ancestorScroll: false,\n            }\n        );\n        this.cleanup = () => {\n            this.host.elements?.forEach((element) => {\n                element.addEventListener(\n                    'sp-closed',\n                    () => {\n                        const placement = this.originalPlacements.get(element);\n                        if (placement) {\n                            element.setAttribute('placement', placement);\n                        }\n                        this.originalPlacements.delete(element);\n                    },\n                    { once: true }\n                );\n            });\n            cleanupAncestorResize();\n            cleanupElementResize();\n        };\n    }\n\n    allowPlacementUpdate = false;\n\n    closeForAncestorUpdate = (): void => {\n        if (\n            !this.allowPlacementUpdate &&\n            this.options.type !== 'modal' &&\n            this.cleanup\n        ) {\n            this.target.dispatchEvent(new Event('close', { bubbles: true }));\n        }\n        this.allowPlacementUpdate = false;\n    };\n\n    updatePlacement = (): void => {\n        this.computePlacement();\n    };\n\n    async computePlacement(): Promise<void> {\n        const { options, target } = this;\n\n        await (document.fonts ? document.fonts.ready : Promise.resolve());\n\n        const flipMiddleware = !(options.trigger instanceof HTMLElement)\n            ? flip({\n                  padding: REQUIRED_DISTANCE_TO_EDGE,\n                  fallbackPlacements: getFallbackPlacements(options.placement),\n              })\n            : flip();\n\n        const [mainAxis = 0, crossAxis = 0] = Array.isArray(options?.offset)\n            ? options.offset\n            : [options.offset, 0];\n\n        const tipElement = this.host.elements.find(\n            (el) => el.tipElement\n        )?.tipElement;\n\n        const middleware = [\n            offset({\n                mainAxis,\n                crossAxis,\n            }),\n            shift({ padding: REQUIRED_DISTANCE_TO_EDGE }),\n            flipMiddleware,\n            size({\n                padding: REQUIRED_DISTANCE_TO_EDGE,\n                apply: ({\n                    availableWidth,\n                    availableHeight,\n                    rects: { floating },\n                }) => {\n                    const maxHeight = Math.max(\n                        MIN_OVERLAY_HEIGHT,\n                        Math.floor(availableHeight)\n                    );\n                    const actualHeight = floating.height;\n                    this.initialHeight = !this.isConstrained // && !this.virtualTrigger\n                        ? actualHeight\n                        : this.initialHeight || actualHeight;\n                    this.isConstrained =\n                        actualHeight < this.initialHeight ||\n                        maxHeight <= actualHeight;\n                    const appliedHeight = this.isConstrained\n                        ? `${maxHeight}px`\n                        : '';\n                    Object.assign(target.style, {\n                        maxWidth: `${Math.floor(availableWidth)}px`,\n                        maxHeight: appliedHeight,\n                    });\n                },\n            }),\n            ...(tipElement\n                ? [\n                      arrow({\n                          element: tipElement,\n                          padding:\n                              options.tipPadding || REQUIRED_DISTANCE_TO_EDGE,\n                      }),\n                  ]\n                : []),\n            topLayerOverTransforms(),\n        ];\n        const { x, y, placement, middlewareData } = await computePosition(\n            options.trigger,\n            target,\n            {\n                placement: options.placement,\n                middleware,\n                strategy: 'fixed',\n            }\n        );\n        Object.assign(target.style, {\n            top: '0px',\n            left: '0px',\n            translate: `${roundByDPR(x)}px ${roundByDPR(y)}px`,\n        });\n\n        target.setAttribute('actual-placement', placement);\n        this.host.elements?.forEach((element) => {\n            if (!this.originalPlacements.has(element)) {\n                this.originalPlacements.set(\n                    element,\n                    element.getAttribute('placement') as Placement\n                );\n            }\n            element.setAttribute('placement', placement);\n        });\n\n        if (tipElement && middlewareData.arrow) {\n            const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n            Object.assign(tipElement.style, {\n                top:\n                    placement.startsWith('right') ||\n                    placement.startsWith('left')\n                        ? '0px'\n                        : '',\n                left:\n                    placement.startsWith('bottom') ||\n                    placement.startsWith('top')\n                        ? '0px'\n                        : '',\n                translate: `${roundByDPR(arrowX)}px ${roundByDPR(arrowY)}px`,\n            });\n        }\n    }\n\n    public resetOverlayPosition = (): void => {\n        if (!this.target || !this.options) return;\n\n        this.target.style.removeProperty('max-height');\n        this.target.style.removeProperty('height');\n        this.initialHeight = undefined;\n        this.isConstrained = false;\n        // force paint\n        this.host.offsetHeight;\n        this.computePlacement();\n    };\n\n    hostConnected(): void {\n        document.addEventListener(\n            'sp-update-overlays',\n            this.resetOverlayPosition\n        );\n    }\n\n    hostUpdated(): void {\n        if (!(this.host as Overlay).open) {\n            this.cleanup?.();\n            this.cleanup = undefined;\n        }\n    }\n\n    hostDisconnected(): void {\n        this.cleanup?.();\n        this.cleanup = undefined;\n        document.removeEventListener(\n            'sp-update-overlays',\n            this.resetOverlayPosition\n        );\n    }\n}\n"],
+  "mappings": "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",
+  "names": ["arrow", "autoUpdate", "computePosition", "flip", "offset", "shift", "size", "topLayerOverTransforms", "roundByDPR", "num", "dpr", "REQUIRED_DISTANCE_TO_EDGE", "MIN_OVERLAY_HEIGHT", "getFallbackPlacements", "placement", "_a", "host", "target", "options", "cleanupAncestorResize", "cleanupElementResize", "element", "_b", "flipMiddleware", "mainAxis", "crossAxis", "tipElement", "el", "middleware", "availableWidth", "availableHeight", "floating", "maxHeight", "actualHeight", "appliedHeight", "x", "y", "middlewareData", "arrowX", "arrowY"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["overlay-trigger.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([disabled]) ::slotted([slot=trigger]){pointer-events:none}slot[name=longpress-describedby-descriptor]{display:none}\n`;\nexport default styles;"],
+  "sourcesContent": ["/*\nCopyright 2024 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([disabled]) ::slotted([slot=trigger]){pointer-events:none}slot[name=longpress-describedby-descriptor]{display:none}\n`;\nexport default styles;"],
   "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["overlay-trigger.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([disabled]) ::slotted([slot=trigger]){pointer-events:none}slot[name=longpress-describedby-descriptor]{display:none}\n`;\nexport default styles;"],
+  "sourcesContent": ["/*\nCopyright 2024 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([disabled]) ::slotted([slot=trigger]){pointer-events:none}slot[name=longpress-describedby-descriptor]{display:none}\n`;\nexport default styles;"],
   "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
   "names": ["css", "styles"]
 }

package/src/overlay-types.d.ts

@@ -35,12 +35,6 @@ export declare type OverlayOptionsV1 = {
     abortPromise?: Promise<boolean>;
     virtualTrigger?: VirtualTrigger;
 };
-declare global {
-    interface GlobalEventHandlersEventMap {
-        'sp-open': CustomEvent<OverlayOpenCloseDetail>;
-        'sp-close': CustomEvent<OverlayOpenCloseDetail>;
-    }
-}
 export declare type OpenableElement = HTMLElement & {
     open: boolean;
     tipElement?: HTMLElement;

package/src/overlay-types.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["overlay-types.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*/\n\nimport type { Placement } from '@floating-ui/dom';\nimport type { VirtualTrigger } from './VirtualTrigger.dev.js'\n\nexport type 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\nexport { Placement };\n\nexport type OverlayTypes = 'auto' | 'hint' | 'manual' | 'modal' | 'page';\n\nexport type TriggerInteractions = OverlayTypes;\n\nexport type TriggerInteractionsV1 =\n    | 'click'\n    | 'longpress'\n    | 'hover'\n    | 'custom'\n    | 'replace'\n    | 'inline'\n    | 'modal';\n\nexport type OverlayTriggerInteractions = Extract<\n    TriggerInteractions,\n    'inline' | 'modal' | 'replace'\n>;\n\nexport interface OverlayOpenCloseDetail {\n    interaction: TriggerInteractions;\n    reason?: 'external-click';\n}\n\nexport interface OverlayCloseReasonDetail {\n    reason?: 'external-click';\n}\n\nexport type OverlayOptions = {\n    delayed?: boolean;\n    notImmediatelyClosable?: boolean;\n    offset?: number | [number, number]; // supporting multi-axis\n    placement?: Placement;\n    receivesFocus?: 'auto' | 'true' | 'false';\n    trigger?: HTMLElement | VirtualTrigger;\n    type?: 'modal' | 'page' | 'hint' | 'auto' | 'manual';\n};\n\nexport type OverlayOptionsV1 = {\n    root?: HTMLElement;\n    delayed?: boolean;\n    placement?: Placement;\n    offset?: number;\n    receivesFocus?: 'true' | 'false' | 'auto';\n    notImmediatelyClosable?: boolean;\n    abortPromise?: Promise<boolean>;\n    virtualTrigger?: VirtualTrigger;\n};\n\ndeclare global {\n    interface GlobalEventHandlersEventMap {\n        'sp-open': CustomEvent<OverlayOpenCloseDetail>;\n        'sp-close': CustomEvent<OverlayOpenCloseDetail>;\n    }\n}\n\nexport type OpenableElement = HTMLElement & {\n    open: boolean;\n    tipElement?: HTMLElement;\n    updateComplete?: Promise<void>;\n};\n\nexport type OverlayState = 'closed' | 'opening' | 'opened' | 'closing';\n"],
+  "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*/\n\nimport type { Placement } from '@floating-ui/dom';\nimport type { VirtualTrigger } from './VirtualTrigger.dev.js'\n\nexport type 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\nexport { Placement };\n\nexport type OverlayTypes = 'auto' | 'hint' | 'manual' | 'modal' | 'page';\n\nexport type TriggerInteractions = OverlayTypes;\n\nexport type TriggerInteractionsV1 =\n    | 'click'\n    | 'longpress'\n    | 'hover'\n    | 'custom'\n    | 'replace'\n    | 'inline'\n    | 'modal';\n\nexport type OverlayTriggerInteractions = Extract<\n    TriggerInteractions,\n    'inline' | 'modal' | 'replace'\n>;\n\nexport interface OverlayOpenCloseDetail {\n    interaction: TriggerInteractions;\n    reason?: 'external-click';\n}\n\nexport interface OverlayCloseReasonDetail {\n    reason?: 'external-click';\n}\n\nexport type OverlayOptions = {\n    delayed?: boolean;\n    notImmediatelyClosable?: boolean;\n    offset?: number | [number, number]; // supporting multi-axis\n    placement?: Placement;\n    receivesFocus?: 'auto' | 'true' | 'false';\n    trigger?: HTMLElement | VirtualTrigger;\n    type?: 'modal' | 'page' | 'hint' | 'auto' | 'manual';\n};\n\nexport type OverlayOptionsV1 = {\n    root?: HTMLElement;\n    delayed?: boolean;\n    placement?: Placement;\n    offset?: number;\n    receivesFocus?: 'true' | 'false' | 'auto';\n    notImmediatelyClosable?: boolean;\n    abortPromise?: Promise<boolean>;\n    virtualTrigger?: VirtualTrigger;\n};\n\nexport type OpenableElement = HTMLElement & {\n    open: boolean;\n    tipElement?: HTMLElement;\n    updateComplete?: Promise<void>;\n};\n\nexport type OverlayState = 'closed' | 'opening' | 'opened' | 'closing';\n"],
   "mappings": ";AAqBA;",
   "names": []
 }

package/src/overlay-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["overlay-types.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*/\n\nimport type { Placement } from '@floating-ui/dom';\nimport type { VirtualTrigger } from './VirtualTrigger.js';\n\nexport type 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\nexport { Placement };\n\nexport type OverlayTypes = 'auto' | 'hint' | 'manual' | 'modal' | 'page';\n\nexport type TriggerInteractions = OverlayTypes;\n\nexport type TriggerInteractionsV1 =\n    | 'click'\n    | 'longpress'\n    | 'hover'\n    | 'custom'\n    | 'replace'\n    | 'inline'\n    | 'modal';\n\nexport type OverlayTriggerInteractions = Extract<\n    TriggerInteractions,\n    'inline' | 'modal' | 'replace'\n>;\n\nexport interface OverlayOpenCloseDetail {\n    interaction: TriggerInteractions;\n    reason?: 'external-click';\n}\n\nexport interface OverlayCloseReasonDetail {\n    reason?: 'external-click';\n}\n\nexport type OverlayOptions = {\n    delayed?: boolean;\n    notImmediatelyClosable?: boolean;\n    offset?: number | [number, number]; // supporting multi-axis\n    placement?: Placement;\n    receivesFocus?: 'auto' | 'true' | 'false';\n    trigger?: HTMLElement | VirtualTrigger;\n    type?: 'modal' | 'page' | 'hint' | 'auto' | 'manual';\n};\n\nexport type OverlayOptionsV1 = {\n    root?: HTMLElement;\n    delayed?: boolean;\n    placement?: Placement;\n    offset?: number;\n    receivesFocus?: 'true' | 'false' | 'auto';\n    notImmediatelyClosable?: boolean;\n    abortPromise?: Promise<boolean>;\n    virtualTrigger?: VirtualTrigger;\n};\n\ndeclare global {\n    interface GlobalEventHandlersEventMap {\n        'sp-open': CustomEvent<OverlayOpenCloseDetail>;\n        'sp-close': CustomEvent<OverlayOpenCloseDetail>;\n    }\n}\n\nexport type OpenableElement = HTMLElement & {\n    open: boolean;\n    tipElement?: HTMLElement;\n    updateComplete?: Promise<void>;\n};\n\nexport type OverlayState = 'closed' | 'opening' | 'opened' | 'closing';\n"],
+  "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*/\n\nimport type { Placement } from '@floating-ui/dom';\nimport type { VirtualTrigger } from './VirtualTrigger.js';\n\nexport type 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\nexport { Placement };\n\nexport type OverlayTypes = 'auto' | 'hint' | 'manual' | 'modal' | 'page';\n\nexport type TriggerInteractions = OverlayTypes;\n\nexport type TriggerInteractionsV1 =\n    | 'click'\n    | 'longpress'\n    | 'hover'\n    | 'custom'\n    | 'replace'\n    | 'inline'\n    | 'modal';\n\nexport type OverlayTriggerInteractions = Extract<\n    TriggerInteractions,\n    'inline' | 'modal' | 'replace'\n>;\n\nexport interface OverlayOpenCloseDetail {\n    interaction: TriggerInteractions;\n    reason?: 'external-click';\n}\n\nexport interface OverlayCloseReasonDetail {\n    reason?: 'external-click';\n}\n\nexport type OverlayOptions = {\n    delayed?: boolean;\n    notImmediatelyClosable?: boolean;\n    offset?: number | [number, number]; // supporting multi-axis\n    placement?: Placement;\n    receivesFocus?: 'auto' | 'true' | 'false';\n    trigger?: HTMLElement | VirtualTrigger;\n    type?: 'modal' | 'page' | 'hint' | 'auto' | 'manual';\n};\n\nexport type OverlayOptionsV1 = {\n    root?: HTMLElement;\n    delayed?: boolean;\n    placement?: Placement;\n    offset?: number;\n    receivesFocus?: 'true' | 'false' | 'auto';\n    notImmediatelyClosable?: boolean;\n    abortPromise?: Promise<boolean>;\n    virtualTrigger?: VirtualTrigger;\n};\n\nexport type OpenableElement = HTMLElement & {\n    open: boolean;\n    tipElement?: HTMLElement;\n    updateComplete?: Promise<void>;\n};\n\nexport type OverlayState = 'closed' | 'opening' | 'opened' | 'closing';\n"],
   "mappings": "aAqBA",
   "names": []
 }

package/src/overlay.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)
-);display:contents;pointer-events:none}.dialog{--sp-overlay-open:true;background:none;border:0;box-sizing:border-box;display:flex;height:auto;inset:auto;left:0;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;top:0}.dialog:not([is-visible]){translate:-999em -999em!important}.dialog:focus{outline:none}dialog:modal{--mod-popover-filter:var(--spectrum-popover-filter)}:host(:not([open])) .dialog{--sp-overlay-open:false}.dialog::backdrop{display:none}.dialog:before{content:"";inset:-999em;pointer-events:auto!important;position:absolute}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto}::slotted(sp-popover){position:static}::slotted(sp-tooltip){--swc-tooltip-margin:0}.dialog:not([actual-placement])[placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}.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)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports (not selector(:open)) and (not selector(:popover-open)){:host:not([open]) .dialog{pointer-events:none}.dialog[actual-placement]{z-index:calc(var(--swc-overlay-z-index-base, 1000) + var(--swc-overlay-open-count))}}
+);display:contents;pointer-events:none}.dialog{--sp-overlay-open:true;background:none;border:0;box-sizing:border-box;display:flex;height:auto;inset:auto;left:0;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;top:0}.dialog:not([is-visible]){display:none}.dialog:focus{outline:none}dialog:modal{--mod-popover-filter:var(--spectrum-popover-filter)}:host(:not([open])) .dialog{--sp-overlay-open:false}.dialog::backdrop{display:none}.dialog:before{content:"";inset:-999em;pointer-events:auto!important;position:absolute}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto;visibility:visible!important}::slotted(sp-popover){position:static}.dialog:not([actual-placement])[placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}.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)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports (not selector(:open)) and (not selector(:popover-open)){:host:not([open]) .dialog{pointer-events:none}.dialog[actual-placement]{z-index:calc(var(--swc-overlay-z-index-base, 1000) + var(--swc-overlay-open-count))}}
 `;
 export default styles;
 //# sourceMappingURL=overlay.css.dev.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["overlay.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);display:contents;pointer-events:none}.dialog{--sp-overlay-open:true;background:none;border:0;box-sizing:border-box;display:flex;height:auto;inset:auto;left:0;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;top:0}.dialog:not([is-visible]){translate:-999em -999em!important}.dialog:focus{outline:none}dialog:modal{--mod-popover-filter:var(--spectrum-popover-filter)}:host(:not([open])) .dialog{--sp-overlay-open:false}.dialog::backdrop{display:none}.dialog:before{content:\"\";inset:-999em;pointer-events:auto!important;position:absolute}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto}::slotted(sp-popover){position:static}::slotted(sp-tooltip){--swc-tooltip-margin:0}.dialog:not([actual-placement])[placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}.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)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports (not selector(:open)) and (not selector(:popover-open)){:host:not([open]) .dialog{pointer-events:none}.dialog[actual-placement]{z-index:calc(var(--swc-overlay-z-index-base, 1000) + var(--swc-overlay-open-count))}}\n`;\nexport default styles;"],
+  "sourcesContent": ["/*\nCopyright 2024 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);display:contents;pointer-events:none}.dialog{--sp-overlay-open:true;background:none;border:0;box-sizing:border-box;display:flex;height:auto;inset:auto;left:0;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;top:0}.dialog:not([is-visible]){display:none}.dialog:focus{outline:none}dialog:modal{--mod-popover-filter:var(--spectrum-popover-filter)}:host(:not([open])) .dialog{--sp-overlay-open:false}.dialog::backdrop{display:none}.dialog:before{content:\"\";inset:-999em;pointer-events:auto!important;position:absolute}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto;visibility:visible!important}::slotted(sp-popover){position:static}.dialog:not([actual-placement])[placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}.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)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports (not selector(:open)) and (not selector(:popover-open)){:host:not([open]) .dialog{pointer-events:none}.dialog[actual-placement]{z-index:calc(var(--swc-overlay-z-index-base, 1000) + var(--swc-overlay-open-count))}}\n`;\nexport default styles;"],
   "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAKf,eAAe;",
   "names": []
 }

package/src/overlay.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)
-);display:contents;pointer-events:none}.dialog{--sp-overlay-open:true;background:none;border:0;box-sizing:border-box;display:flex;height:auto;inset:auto;left:0;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;top:0}.dialog:not([is-visible]){translate:-999em -999em!important}.dialog:focus{outline:none}dialog:modal{--mod-popover-filter:var(--spectrum-popover-filter)}:host(:not([open])) .dialog{--sp-overlay-open:false}.dialog::backdrop{display:none}.dialog:before{content:"";inset:-999em;pointer-events:auto!important;position:absolute}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto}::slotted(sp-popover){position:static}::slotted(sp-tooltip){--swc-tooltip-margin:0}.dialog:not([actual-placement])[placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}.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)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports (not selector(:open)) and (not selector(:popover-open)){:host:not([open]) .dialog{pointer-events:none}.dialog[actual-placement]{z-index:calc(var(--swc-overlay-z-index-base, 1000) + var(--swc-overlay-open-count))}}
+);display:contents;pointer-events:none}.dialog{--sp-overlay-open:true;background:none;border:0;box-sizing:border-box;display:flex;height:auto;inset:auto;left:0;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;top:0}.dialog:not([is-visible]){display:none}.dialog:focus{outline:none}dialog:modal{--mod-popover-filter:var(--spectrum-popover-filter)}:host(:not([open])) .dialog{--sp-overlay-open:false}.dialog::backdrop{display:none}.dialog:before{content:"";inset:-999em;pointer-events:auto!important;position:absolute}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto;visibility:visible!important}::slotted(sp-popover){position:static}.dialog:not([actual-placement])[placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}.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)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports (not selector(:open)) and (not selector(:popover-open)){:host:not([open]) .dialog{pointer-events:none}.dialog[actual-placement]{z-index:calc(var(--swc-overlay-z-index-base, 1000) + var(--swc-overlay-open-count))}}
 `;export default o;
 //# sourceMappingURL=overlay.css.js.map

package/src/overlay.css.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["overlay.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);display:contents;pointer-events:none}.dialog{--sp-overlay-open:true;background:none;border:0;box-sizing:border-box;display:flex;height:auto;inset:auto;left:0;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;top:0}.dialog:not([is-visible]){translate:-999em -999em!important}.dialog:focus{outline:none}dialog:modal{--mod-popover-filter:var(--spectrum-popover-filter)}:host(:not([open])) .dialog{--sp-overlay-open:false}.dialog::backdrop{display:none}.dialog:before{content:\"\";inset:-999em;pointer-events:auto!important;position:absolute}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto}::slotted(sp-popover){position:static}::slotted(sp-tooltip){--swc-tooltip-margin:0}.dialog:not([actual-placement])[placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}.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)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports (not selector(:open)) and (not selector(:popover-open)){:host:not([open]) .dialog{pointer-events:none}.dialog[actual-placement]{z-index:calc(var(--swc-overlay-z-index-base, 1000) + var(--swc-overlay-open-count))}}\n`;\nexport default styles;"],
+  "sourcesContent": ["/*\nCopyright 2024 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);display:contents;pointer-events:none}.dialog{--sp-overlay-open:true;background:none;border:0;box-sizing:border-box;display:flex;height:auto;inset:auto;left:0;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;top:0}.dialog:not([is-visible]){display:none}.dialog:focus{outline:none}dialog:modal{--mod-popover-filter:var(--spectrum-popover-filter)}:host(:not([open])) .dialog{--sp-overlay-open:false}.dialog::backdrop{display:none}.dialog:before{content:\"\";inset:-999em;pointer-events:auto!important;position:absolute}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto;visibility:visible!important}::slotted(sp-popover){position:static}.dialog:not([actual-placement])[placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}.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)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports (not selector(:open)) and (not selector(:popover-open)){:host:not([open]) .dialog{pointer-events:none}.dialog[actual-placement]{z-index:calc(var(--swc-overlay-z-index-base, 1000) + var(--swc-overlay-open-count))}}\n`;\nexport default styles;"],
   "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA,EAKf,eAAeC",
   "names": ["css", "styles"]
 }

package/src/topLayerOverTransforms.dev.js

@@ -62,7 +62,14 @@ export const topLayerOverTransforms = () => ({
         css = getComputedStyle(containingBlock);
         overTransforms = // the `transform` property
         css.transform !== "none" || // the `translate` property
-        css.translate !== "none" || // the `backdropFilter` property
+        css.translate !== "none" || // the `containerType` property
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        (css.containerType ? (
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          css.containerType !== "normal"
+        ) : false) || // the `backdropFilter` property
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         (css.backdropFilter ? (

package/src/topLayerOverTransforms.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["topLayerOverTransforms.ts"],
-  "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\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 type { Middleware, MiddlewareState } from '@floating-ui/dom';\nimport {\n    getContainingBlock,\n    getWindow,\n    isContainingBlock,\n} from '@floating-ui/utils/dom';\nimport { VirtualTrigger } from './VirtualTrigger.dev.js'\n\nexport const topLayerOverTransforms = (): Middleware => ({\n    name: 'topLayer',\n    async fn(middlewareArguments: MiddlewareState) {\n        const {\n            x,\n            y,\n            elements: { reference, floating },\n        } = middlewareArguments;\n        let onTopLayer = false;\n        let topLayerIsFloating = false;\n        let withinReference = false;\n        const diffCoords = {\n            x: 0,\n            y: 0,\n        };\n        try {\n            onTopLayer = onTopLayer || floating.matches(':popover-open');\n            // eslint-disable-next-line no-empty\n        } catch (error) {}\n        try {\n            onTopLayer = onTopLayer || floating.matches(':open');\n            // eslint-disable-next-line no-empty\n        } catch (error) {}\n        try {\n            onTopLayer = onTopLayer || floating.matches(':modal');\n            // eslint-disable-next-line no-empty\n            /* c8 ignore next 3 */\n        } catch (error) {}\n        topLayerIsFloating = onTopLayer;\n        const dialogAncestorQueryEvent = new Event('floating-ui-dialog-test', {\n            composed: true,\n            bubbles: true,\n        });\n        floating.addEventListener(\n            'floating-ui-dialog-test',\n            (event: Event) => {\n                (event.composedPath() as unknown as Element[]).forEach((el) => {\n                    withinReference = withinReference || el === reference;\n                    if (el === floating || el.localName !== 'dialog') return;\n                    try {\n                        onTopLayer = onTopLayer || el.matches(':modal');\n                        // eslint-disable-next-line no-empty\n                        /* c8 ignore next */\n                    } catch (error) {}\n                });\n            },\n            { once: true }\n        );\n        floating.dispatchEvent(dialogAncestorQueryEvent);\n        let overTransforms = false;\n        if (!(reference instanceof VirtualTrigger)) {\n            const root = (withinReference ? reference : floating) as Element;\n            const containingBlock = isContainingBlock(root)\n                ? root\n                : getContainingBlock(root);\n            let css: CSSStyleDeclaration | Record<string, string> = {};\n            if (\n                containingBlock !== null &&\n                getWindow(containingBlock) !==\n                    (containingBlock as unknown as Window)\n            ) {\n                css = getComputedStyle(containingBlock);\n                // The overlay is \"over transforms\" when the containing block uses specific CSS...\n                overTransforms =\n                    // the `transform` property\n                    css.transform !== 'none' ||\n                    // the `translate` property\n                    css.translate !== 'none' ||\n                    // the `backdropFilter` property\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    (css.backdropFilter\n                        ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                          // @ts-ignore\n                          css.backdropFilter !== 'none'\n                        : false) ||\n                    // the `filter` property for anything other than \"none\"\n                    (css.filter ? css.filter !== 'none' : false) ||\n                    // the `transform` property \"will-change\"\n                    css.willChange.search('transform') > -1 ||\n                    // the `transform` property \"will-change\"\n                    css.willChange.search('translate') > -1 ||\n                    // a value of \"paint\", \"layout\", \"strict\", or \"content\" for `contain`\n                    ['paint', 'layout', 'strict', 'content'].some((value) =>\n                        (css.contain || '').includes(value)\n                    );\n            }\n\n            if (onTopLayer && overTransforms && containingBlock) {\n                const rect = containingBlock.getBoundingClientRect();\n                // Margins are not included in the bounding client rect and need to be handled separately.\n                const { marginInlineStart = '0', marginBlockStart = '0' } = css;\n                diffCoords.x = rect.x + parseFloat(marginInlineStart);\n                diffCoords.y = rect.y + parseFloat(marginBlockStart);\n            }\n        }\n\n        if (onTopLayer && topLayerIsFloating) {\n            return {\n                x: x + diffCoords.x,\n                y: y + diffCoords.y,\n                data: diffCoords,\n            };\n        }\n\n        if (onTopLayer) {\n            return {\n                x,\n                y,\n                data: diffCoords,\n            };\n        }\n\n        return {\n            x: x - diffCoords.x,\n            y: y - diffCoords.y,\n            data: diffCoords,\n        };\n    },\n});\n"],
-  "mappings": ";AAYA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,SAAS,sBAAsB;AAExB,aAAM,yBAAyB,OAAmB;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,GAAG,qBAAsC;AAC3C,UAAM;AAAA,MACF;AAAA,MACA;AAAA,MACA,UAAU,EAAE,WAAW,SAAS;AAAA,IACpC,IAAI;AACJ,QAAI,aAAa;AACjB,QAAI,qBAAqB;AACzB,QAAI,kBAAkB;AACtB,UAAM,aAAa;AAAA,MACf,GAAG;AAAA,MACH,GAAG;AAAA,IACP;AACA,QAAI;AACA,mBAAa,cAAc,SAAS,QAAQ,eAAe;AAAA,IAE/D,SAAS,OAAO;AAAA,IAAC;AACjB,QAAI;AACA,mBAAa,cAAc,SAAS,QAAQ,OAAO;AAAA,IAEvD,SAAS,OAAO;AAAA,IAAC;AACjB,QAAI;AACA,mBAAa,cAAc,SAAS,QAAQ,QAAQ;AAAA,IAGxD,SAAS,OAAO;AAAA,IAAC;AACjB,yBAAqB;AACrB,UAAM,2BAA2B,IAAI,MAAM,2BAA2B;AAAA,MAClE,UAAU;AAAA,MACV,SAAS;AAAA,IACb,CAAC;AACD,aAAS;AAAA,MACL;AAAA,MACA,CAAC,UAAiB;AACd,QAAC,MAAM,aAAa,EAA2B,QAAQ,CAAC,OAAO;AAC3D,4BAAkB,mBAAmB,OAAO;AAC5C,cAAI,OAAO,YAAY,GAAG,cAAc;AAAU;AAClD,cAAI;AACA,yBAAa,cAAc,GAAG,QAAQ,QAAQ;AAAA,UAGlD,SAAS,OAAO;AAAA,UAAC;AAAA,QACrB,CAAC;AAAA,MACL;AAAA,MACA,EAAE,MAAM,KAAK;AAAA,IACjB;AACA,aAAS,cAAc,wBAAwB;AAC/C,QAAI,iBAAiB;AACrB,QAAI,EAAE,qBAAqB,iBAAiB;AACxC,YAAM,OAAQ,kBAAkB,YAAY;AAC5C,YAAM,kBAAkB,kBAAkB,IAAI,IACxC,OACA,mBAAmB,IAAI;AAC7B,UAAI,MAAoD,CAAC;AACzD,UACI,oBAAoB,QACpB,UAAU,eAAe,MACpB,iBACP;AACE,cAAM,iBAAiB,eAAe;AAEtC;AAAA,QAEI,IAAI,cAAc;AAAA,QAElB,IAAI,cAAc;AAAA;AAAA;AAAA,SAIjB,IAAI;AAAA;AAAA;AAAA,UAGC,IAAI,mBAAmB;AAAA,YACvB;AAAA,SAEL,IAAI,SAAS,IAAI,WAAW,SAAS;AAAA,QAEtC,IAAI,WAAW,OAAO,WAAW,IAAI;AAAA,QAErC,IAAI,WAAW,OAAO,WAAW,IAAI;AAAA,QAErC,CAAC,SAAS,UAAU,UAAU,SAAS,EAAE;AAAA,UAAK,CAAC,WAC1C,IAAI,WAAW,IAAI,SAAS,KAAK;AAAA,QACtC;AAAA,MACR;AAEA,UAAI,cAAc,kBAAkB,iBAAiB;AACjD,cAAM,OAAO,gBAAgB,sBAAsB;AAEnD,cAAM,EAAE,oBAAoB,KAAK,mBAAmB,IAAI,IAAI;AAC5D,mBAAW,IAAI,KAAK,IAAI,WAAW,iBAAiB;AACpD,mBAAW,IAAI,KAAK,IAAI,WAAW,gBAAgB;AAAA,MACvD;AAAA,IACJ;AAEA,QAAI,cAAc,oBAAoB;AAClC,aAAO;AAAA,QACH,GAAG,IAAI,WAAW;AAAA,QAClB,GAAG,IAAI,WAAW;AAAA,QAClB,MAAM;AAAA,MACV;AAAA,IACJ;AAEA,QAAI,YAAY;AACZ,aAAO;AAAA,QACH;AAAA,QACA;AAAA,QACA,MAAM;AAAA,MACV;AAAA,IACJ;AAEA,WAAO;AAAA,MACH,GAAG,IAAI,WAAW;AAAA,MAClB,GAAG,IAAI,WAAW;AAAA,MAClB,MAAM;AAAA,IACV;AAAA,EACJ;AACJ;",
+  "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\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 type { Middleware, MiddlewareState } from '@floating-ui/dom';\nimport {\n    getContainingBlock,\n    getWindow,\n    isContainingBlock,\n} from '@floating-ui/utils/dom';\nimport { VirtualTrigger } from './VirtualTrigger.dev.js'\n\nexport const topLayerOverTransforms = (): Middleware => ({\n    name: 'topLayer',\n    async fn(middlewareArguments: MiddlewareState) {\n        const {\n            x,\n            y,\n            elements: { reference, floating },\n        } = middlewareArguments;\n        let onTopLayer = false;\n        let topLayerIsFloating = false;\n        let withinReference = false;\n        const diffCoords = {\n            x: 0,\n            y: 0,\n        };\n        try {\n            onTopLayer = onTopLayer || floating.matches(':popover-open');\n            // eslint-disable-next-line no-empty\n        } catch (error) {}\n        try {\n            onTopLayer = onTopLayer || floating.matches(':open');\n            // eslint-disable-next-line no-empty\n        } catch (error) {}\n        try {\n            onTopLayer = onTopLayer || floating.matches(':modal');\n            // eslint-disable-next-line no-empty\n            /* c8 ignore next 3 */\n        } catch (error) {}\n        topLayerIsFloating = onTopLayer;\n        const dialogAncestorQueryEvent = new Event('floating-ui-dialog-test', {\n            composed: true,\n            bubbles: true,\n        });\n        floating.addEventListener(\n            'floating-ui-dialog-test',\n            (event: Event) => {\n                (event.composedPath() as unknown as Element[]).forEach((el) => {\n                    withinReference = withinReference || el === reference;\n                    if (el === floating || el.localName !== 'dialog') return;\n                    try {\n                        onTopLayer = onTopLayer || el.matches(':modal');\n                        // eslint-disable-next-line no-empty\n                        /* c8 ignore next */\n                    } catch (error) {}\n                });\n            },\n            { once: true }\n        );\n        floating.dispatchEvent(dialogAncestorQueryEvent);\n        let overTransforms = false;\n        if (!(reference instanceof VirtualTrigger)) {\n            const root = (withinReference ? reference : floating) as Element;\n            const containingBlock = isContainingBlock(root)\n                ? root\n                : getContainingBlock(root);\n            let css: CSSStyleDeclaration | Record<string, string> = {};\n            if (\n                containingBlock !== null &&\n                getWindow(containingBlock) !==\n                    (containingBlock as unknown as Window)\n            ) {\n                css = getComputedStyle(containingBlock);\n                // The overlay is \"over transforms\" when the containing block uses specific CSS...\n                overTransforms =\n                    // the `transform` property\n                    css.transform !== 'none' ||\n                    // the `translate` property\n                    css.translate !== 'none' ||\n                    // the `containerType` property\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    (css.containerType\n                        ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                          // @ts-ignore\n                          css.containerType !== 'normal'\n                        : false) ||\n                    // the `backdropFilter` property\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    (css.backdropFilter\n                        ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                          // @ts-ignore\n                          css.backdropFilter !== 'none'\n                        : false) ||\n                    // the `filter` property for anything other than \"none\"\n                    (css.filter ? css.filter !== 'none' : false) ||\n                    // the `transform` property \"will-change\"\n                    css.willChange.search('transform') > -1 ||\n                    // the `transform` property \"will-change\"\n                    css.willChange.search('translate') > -1 ||\n                    // a value of \"paint\", \"layout\", \"strict\", or \"content\" for `contain`\n                    ['paint', 'layout', 'strict', 'content'].some((value) =>\n                        (css.contain || '').includes(value)\n                    );\n            }\n\n            if (onTopLayer && overTransforms && containingBlock) {\n                const rect = containingBlock.getBoundingClientRect();\n                // Margins are not included in the bounding client rect and need to be handled separately.\n                const { marginInlineStart = '0', marginBlockStart = '0' } = css;\n                diffCoords.x = rect.x + parseFloat(marginInlineStart);\n                diffCoords.y = rect.y + parseFloat(marginBlockStart);\n            }\n        }\n\n        if (onTopLayer && topLayerIsFloating) {\n            return {\n                x: x + diffCoords.x,\n                y: y + diffCoords.y,\n                data: diffCoords,\n            };\n        }\n\n        if (onTopLayer) {\n            return {\n                x,\n                y,\n                data: diffCoords,\n            };\n        }\n\n        return {\n            x: x - diffCoords.x,\n            y: y - diffCoords.y,\n            data: diffCoords,\n        };\n    },\n});\n"],
+  "mappings": ";AAYA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,SAAS,sBAAsB;AAExB,aAAM,yBAAyB,OAAmB;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,GAAG,qBAAsC;AAC3C,UAAM;AAAA,MACF;AAAA,MACA;AAAA,MACA,UAAU,EAAE,WAAW,SAAS;AAAA,IACpC,IAAI;AACJ,QAAI,aAAa;AACjB,QAAI,qBAAqB;AACzB,QAAI,kBAAkB;AACtB,UAAM,aAAa;AAAA,MACf,GAAG;AAAA,MACH,GAAG;AAAA,IACP;AACA,QAAI;AACA,mBAAa,cAAc,SAAS,QAAQ,eAAe;AAAA,IAE/D,SAAS,OAAO;AAAA,IAAC;AACjB,QAAI;AACA,mBAAa,cAAc,SAAS,QAAQ,OAAO;AAAA,IAEvD,SAAS,OAAO;AAAA,IAAC;AACjB,QAAI;AACA,mBAAa,cAAc,SAAS,QAAQ,QAAQ;AAAA,IAGxD,SAAS,OAAO;AAAA,IAAC;AACjB,yBAAqB;AACrB,UAAM,2BAA2B,IAAI,MAAM,2BAA2B;AAAA,MAClE,UAAU;AAAA,MACV,SAAS;AAAA,IACb,CAAC;AACD,aAAS;AAAA,MACL;AAAA,MACA,CAAC,UAAiB;AACd,QAAC,MAAM,aAAa,EAA2B,QAAQ,CAAC,OAAO;AAC3D,4BAAkB,mBAAmB,OAAO;AAC5C,cAAI,OAAO,YAAY,GAAG,cAAc;AAAU;AAClD,cAAI;AACA,yBAAa,cAAc,GAAG,QAAQ,QAAQ;AAAA,UAGlD,SAAS,OAAO;AAAA,UAAC;AAAA,QACrB,CAAC;AAAA,MACL;AAAA,MACA,EAAE,MAAM,KAAK;AAAA,IACjB;AACA,aAAS,cAAc,wBAAwB;AAC/C,QAAI,iBAAiB;AACrB,QAAI,EAAE,qBAAqB,iBAAiB;AACxC,YAAM,OAAQ,kBAAkB,YAAY;AAC5C,YAAM,kBAAkB,kBAAkB,IAAI,IACxC,OACA,mBAAmB,IAAI;AAC7B,UAAI,MAAoD,CAAC;AACzD,UACI,oBAAoB,QACpB,UAAU,eAAe,MACpB,iBACP;AACE,cAAM,iBAAiB,eAAe;AAEtC;AAAA,QAEI,IAAI,cAAc;AAAA,QAElB,IAAI,cAAc;AAAA;AAAA;AAAA,SAIjB,IAAI;AAAA;AAAA;AAAA,UAGC,IAAI,kBAAkB;AAAA,YACtB;AAAA;AAAA;AAAA,SAIL,IAAI;AAAA;AAAA;AAAA,UAGC,IAAI,mBAAmB;AAAA,YACvB;AAAA,SAEL,IAAI,SAAS,IAAI,WAAW,SAAS;AAAA,QAEtC,IAAI,WAAW,OAAO,WAAW,IAAI;AAAA,QAErC,IAAI,WAAW,OAAO,WAAW,IAAI;AAAA,QAErC,CAAC,SAAS,UAAU,UAAU,SAAS,EAAE;AAAA,UAAK,CAAC,WAC1C,IAAI,WAAW,IAAI,SAAS,KAAK;AAAA,QACtC;AAAA,MACR;AAEA,UAAI,cAAc,kBAAkB,iBAAiB;AACjD,cAAM,OAAO,gBAAgB,sBAAsB;AAEnD,cAAM,EAAE,oBAAoB,KAAK,mBAAmB,IAAI,IAAI;AAC5D,mBAAW,IAAI,KAAK,IAAI,WAAW,iBAAiB;AACpD,mBAAW,IAAI,KAAK,IAAI,WAAW,gBAAgB;AAAA,MACvD;AAAA,IACJ;AAEA,QAAI,cAAc,oBAAoB;AAClC,aAAO;AAAA,QACH,GAAG,IAAI,WAAW;AAAA,QAClB,GAAG,IAAI,WAAW;AAAA,QAClB,MAAM;AAAA,MACV;AAAA,IACJ;AAEA,QAAI,YAAY;AACZ,aAAO;AAAA,QACH;AAAA,QACA;AAAA,QACA,MAAM;AAAA,MACV;AAAA,IACJ;AAEA,WAAO;AAAA,MACH,GAAG,IAAI,WAAW;AAAA,MAClB,GAAG,IAAI,WAAW;AAAA,MAClB,MAAM;AAAA,IACV;AAAA,EACJ;AACJ;",
   "names": []
 }

package/src/topLayerOverTransforms.js

@@ -1,2 +1,2 @@
-"use strict";import{getContainingBlock as h,getWindow as w,isContainingBlock as x}from"@floating-ui/utils/dom";import{VirtualTrigger as k}from"./VirtualTrigger.js";export const topLayerOverTransforms=()=>({name:"topLayer",async fn(g){const{x:s,y:l,elements:{reference:c,floating:o}}=g;let e=!1,f=!1,d=!1;const r={x:0,y:0};try{e=e||o.matches(":popover-open")}catch(a){}try{e=e||o.matches(":open")}catch(a){}try{e=e||o.matches(":modal")}catch(a){}f=e;const p=new Event("floating-ui-dialog-test",{composed:!0,bubbles:!0});o.addEventListener("floating-ui-dialog-test",a=>{a.composedPath().forEach(n=>{if(d=d||n===c,!(n===o||n.localName!=="dialog"))try{e=e||n.matches(":modal")}catch(t){}})},{once:!0}),o.dispatchEvent(p);let m=!1;if(!(c instanceof k)){const a=d?c:o,n=x(a)?a:h(a);let t={};if(n!==null&&w(n)!==n&&(t=getComputedStyle(n),m=t.transform!=="none"||t.translate!=="none"||(t.backdropFilter?t.backdropFilter!=="none":!1)||(t.filter?t.filter!=="none":!1)||t.willChange.search("transform")>-1||t.willChange.search("translate")>-1||["paint","layout","strict","content"].some(i=>(t.contain||"").includes(i))),e&&m&&n){const i=n.getBoundingClientRect(),{marginInlineStart:y="0",marginBlockStart:u="0"}=t;r.x=i.x+parseFloat(y),r.y=i.y+parseFloat(u)}}return e&&f?{x:s+r.x,y:l+r.y,data:r}:e?{x:s,y:l,data:r}:{x:s-r.x,y:l-r.y,data:r}}});
+"use strict";import{getContainingBlock as h,getWindow as w,isContainingBlock as x}from"@floating-ui/utils/dom";import{VirtualTrigger as k}from"./VirtualTrigger.js";export const topLayerOverTransforms=()=>({name:"topLayer",async fn(g){const{x:l,y:s,elements:{reference:c,floating:o}}=g;let t=!1,f=!1,d=!1;const a={x:0,y:0};try{t=t||o.matches(":popover-open")}catch(r){}try{t=t||o.matches(":open")}catch(r){}try{t=t||o.matches(":modal")}catch(r){}f=t;const p=new Event("floating-ui-dialog-test",{composed:!0,bubbles:!0});o.addEventListener("floating-ui-dialog-test",r=>{r.composedPath().forEach(n=>{if(d=d||n===c,!(n===o||n.localName!=="dialog"))try{t=t||n.matches(":modal")}catch(e){}})},{once:!0}),o.dispatchEvent(p);let m=!1;if(!(c instanceof k)){const r=d?c:o,n=x(r)?r:h(r);let e={};if(n!==null&&w(n)!==n&&(e=getComputedStyle(n),m=e.transform!=="none"||e.translate!=="none"||(e.containerType?e.containerType!=="normal":!1)||(e.backdropFilter?e.backdropFilter!=="none":!1)||(e.filter?e.filter!=="none":!1)||e.willChange.search("transform")>-1||e.willChange.search("translate")>-1||["paint","layout","strict","content"].some(i=>(e.contain||"").includes(i))),t&&m&&n){const i=n.getBoundingClientRect(),{marginInlineStart:y="0",marginBlockStart:u="0"}=e;a.x=i.x+parseFloat(y),a.y=i.y+parseFloat(u)}}return t&&f?{x:l+a.x,y:s+a.y,data:a}:t?{x:l,y:s,data:a}:{x:l-a.x,y:s-a.y,data:a}}});
 //# sourceMappingURL=topLayerOverTransforms.js.map

package/src/topLayerOverTransforms.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["topLayerOverTransforms.ts"],
-  "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\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 type { Middleware, MiddlewareState } from '@floating-ui/dom';\nimport {\n    getContainingBlock,\n    getWindow,\n    isContainingBlock,\n} from '@floating-ui/utils/dom';\nimport { VirtualTrigger } from './VirtualTrigger.js';\n\nexport const topLayerOverTransforms = (): Middleware => ({\n    name: 'topLayer',\n    async fn(middlewareArguments: MiddlewareState) {\n        const {\n            x,\n            y,\n            elements: { reference, floating },\n        } = middlewareArguments;\n        let onTopLayer = false;\n        let topLayerIsFloating = false;\n        let withinReference = false;\n        const diffCoords = {\n            x: 0,\n            y: 0,\n        };\n        try {\n            onTopLayer = onTopLayer || floating.matches(':popover-open');\n            // eslint-disable-next-line no-empty\n        } catch (error) {}\n        try {\n            onTopLayer = onTopLayer || floating.matches(':open');\n            // eslint-disable-next-line no-empty\n        } catch (error) {}\n        try {\n            onTopLayer = onTopLayer || floating.matches(':modal');\n            // eslint-disable-next-line no-empty\n            /* c8 ignore next 3 */\n        } catch (error) {}\n        topLayerIsFloating = onTopLayer;\n        const dialogAncestorQueryEvent = new Event('floating-ui-dialog-test', {\n            composed: true,\n            bubbles: true,\n        });\n        floating.addEventListener(\n            'floating-ui-dialog-test',\n            (event: Event) => {\n                (event.composedPath() as unknown as Element[]).forEach((el) => {\n                    withinReference = withinReference || el === reference;\n                    if (el === floating || el.localName !== 'dialog') return;\n                    try {\n                        onTopLayer = onTopLayer || el.matches(':modal');\n                        // eslint-disable-next-line no-empty\n                        /* c8 ignore next */\n                    } catch (error) {}\n                });\n            },\n            { once: true }\n        );\n        floating.dispatchEvent(dialogAncestorQueryEvent);\n        let overTransforms = false;\n        if (!(reference instanceof VirtualTrigger)) {\n            const root = (withinReference ? reference : floating) as Element;\n            const containingBlock = isContainingBlock(root)\n                ? root\n                : getContainingBlock(root);\n            let css: CSSStyleDeclaration | Record<string, string> = {};\n            if (\n                containingBlock !== null &&\n                getWindow(containingBlock) !==\n                    (containingBlock as unknown as Window)\n            ) {\n                css = getComputedStyle(containingBlock);\n                // The overlay is \"over transforms\" when the containing block uses specific CSS...\n                overTransforms =\n                    // the `transform` property\n                    css.transform !== 'none' ||\n                    // the `translate` property\n                    css.translate !== 'none' ||\n                    // the `backdropFilter` property\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    (css.backdropFilter\n                        ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                          // @ts-ignore\n                          css.backdropFilter !== 'none'\n                        : false) ||\n                    // the `filter` property for anything other than \"none\"\n                    (css.filter ? css.filter !== 'none' : false) ||\n                    // the `transform` property \"will-change\"\n                    css.willChange.search('transform') > -1 ||\n                    // the `transform` property \"will-change\"\n                    css.willChange.search('translate') > -1 ||\n                    // a value of \"paint\", \"layout\", \"strict\", or \"content\" for `contain`\n                    ['paint', 'layout', 'strict', 'content'].some((value) =>\n                        (css.contain || '').includes(value)\n                    );\n            }\n\n            if (onTopLayer && overTransforms && containingBlock) {\n                const rect = containingBlock.getBoundingClientRect();\n                // Margins are not included in the bounding client rect and need to be handled separately.\n                const { marginInlineStart = '0', marginBlockStart = '0' } = css;\n                diffCoords.x = rect.x + parseFloat(marginInlineStart);\n                diffCoords.y = rect.y + parseFloat(marginBlockStart);\n            }\n        }\n\n        if (onTopLayer && topLayerIsFloating) {\n            return {\n                x: x + diffCoords.x,\n                y: y + diffCoords.y,\n                data: diffCoords,\n            };\n        }\n\n        if (onTopLayer) {\n            return {\n                x,\n                y,\n                data: diffCoords,\n            };\n        }\n\n        return {\n            x: x - diffCoords.x,\n            y: y - diffCoords.y,\n            data: diffCoords,\n        };\n    },\n});\n"],
-  "mappings": "aAYA,OACI,sBAAAA,EACA,aAAAC,EACA,qBAAAC,MACG,yBACP,OAAS,kBAAAC,MAAsB,sBAExB,aAAM,uBAAyB,KAAmB,CACrD,KAAM,WACN,MAAM,GAAGC,EAAsC,CAC3C,KAAM,CACF,EAAAC,EACA,EAAAC,EACA,SAAU,CAAE,UAAAC,EAAW,SAAAC,CAAS,CACpC,EAAIJ,EACJ,IAAIK,EAAa,GACbC,EAAqB,GACrBC,EAAkB,GACtB,MAAMC,EAAa,CACf,EAAG,EACH,EAAG,CACP,EACA,GAAI,CACAH,EAAaA,GAAcD,EAAS,QAAQ,eAAe,CAE/D,OAASK,EAAO,CAAC,CACjB,GAAI,CACAJ,EAAaA,GAAcD,EAAS,QAAQ,OAAO,CAEvD,OAASK,EAAO,CAAC,CACjB,GAAI,CACAJ,EAAaA,GAAcD,EAAS,QAAQ,QAAQ,CAGxD,OAASK,EAAO,CAAC,CACjBH,EAAqBD,EACrB,MAAMK,EAA2B,IAAI,MAAM,0BAA2B,CAClE,SAAU,GACV,QAAS,EACb,CAAC,EACDN,EAAS,iBACL,0BACCO,GAAiB,CACbA,EAAM,aAAa,EAA2B,QAASC,GAAO,CAE3D,GADAL,EAAkBA,GAAmBK,IAAOT,EACxC,EAAAS,IAAOR,GAAYQ,EAAG,YAAc,UACxC,GAAI,CACAP,EAAaA,GAAcO,EAAG,QAAQ,QAAQ,CAGlD,OAASH,EAAO,CAAC,CACrB,CAAC,CACL,EACA,CAAE,KAAM,EAAK,CACjB,EACAL,EAAS,cAAcM,CAAwB,EAC/C,IAAIG,EAAiB,GACrB,GAAI,EAAEV,aAAqBJ,GAAiB,CACxC,MAAMe,EAAQP,EAAkBJ,EAAYC,EACtCW,EAAkBjB,EAAkBgB,CAAI,EACxCA,EACAlB,EAAmBkB,CAAI,EAC7B,IAAIE,EAAoD,CAAC,EAiCzD,GA/BID,IAAoB,MACpBlB,EAAUkB,CAAe,IACpBA,IAELC,EAAM,iBAAiBD,CAAe,EAEtCF,EAEIG,EAAI,YAAc,QAElBA,EAAI,YAAc,SAIjBA,EAAI,eAGCA,EAAI,iBAAmB,OACvB,MAELA,EAAI,OAASA,EAAI,SAAW,OAAS,KAEtCA,EAAI,WAAW,OAAO,WAAW,EAAI,IAErCA,EAAI,WAAW,OAAO,WAAW,EAAI,IAErC,CAAC,QAAS,SAAU,SAAU,SAAS,EAAE,KAAMC,IAC1CD,EAAI,SAAW,IAAI,SAASC,CAAK,CACtC,GAGJZ,GAAcQ,GAAkBE,EAAiB,CACjD,MAAMG,EAAOH,EAAgB,sBAAsB,EAE7C,CAAE,kBAAAI,EAAoB,IAAK,iBAAAC,EAAmB,GAAI,EAAIJ,EAC5DR,EAAW,EAAIU,EAAK,EAAI,WAAWC,CAAiB,EACpDX,EAAW,EAAIU,EAAK,EAAI,WAAWE,CAAgB,CACvD,CACJ,CAEA,OAAIf,GAAcC,EACP,CACH,EAAGL,EAAIO,EAAW,EAClB,EAAGN,EAAIM,EAAW,EAClB,KAAMA,CACV,EAGAH,EACO,CACH,EAAAJ,EACA,EAAAC,EACA,KAAMM,CACV,EAGG,CACH,EAAGP,EAAIO,EAAW,EAClB,EAAGN,EAAIM,EAAW,EAClB,KAAMA,CACV,CACJ,CACJ",
+  "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\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 type { Middleware, MiddlewareState } from '@floating-ui/dom';\nimport {\n    getContainingBlock,\n    getWindow,\n    isContainingBlock,\n} from '@floating-ui/utils/dom';\nimport { VirtualTrigger } from './VirtualTrigger.js';\n\nexport const topLayerOverTransforms = (): Middleware => ({\n    name: 'topLayer',\n    async fn(middlewareArguments: MiddlewareState) {\n        const {\n            x,\n            y,\n            elements: { reference, floating },\n        } = middlewareArguments;\n        let onTopLayer = false;\n        let topLayerIsFloating = false;\n        let withinReference = false;\n        const diffCoords = {\n            x: 0,\n            y: 0,\n        };\n        try {\n            onTopLayer = onTopLayer || floating.matches(':popover-open');\n            // eslint-disable-next-line no-empty\n        } catch (error) {}\n        try {\n            onTopLayer = onTopLayer || floating.matches(':open');\n            // eslint-disable-next-line no-empty\n        } catch (error) {}\n        try {\n            onTopLayer = onTopLayer || floating.matches(':modal');\n            // eslint-disable-next-line no-empty\n            /* c8 ignore next 3 */\n        } catch (error) {}\n        topLayerIsFloating = onTopLayer;\n        const dialogAncestorQueryEvent = new Event('floating-ui-dialog-test', {\n            composed: true,\n            bubbles: true,\n        });\n        floating.addEventListener(\n            'floating-ui-dialog-test',\n            (event: Event) => {\n                (event.composedPath() as unknown as Element[]).forEach((el) => {\n                    withinReference = withinReference || el === reference;\n                    if (el === floating || el.localName !== 'dialog') return;\n                    try {\n                        onTopLayer = onTopLayer || el.matches(':modal');\n                        // eslint-disable-next-line no-empty\n                        /* c8 ignore next */\n                    } catch (error) {}\n                });\n            },\n            { once: true }\n        );\n        floating.dispatchEvent(dialogAncestorQueryEvent);\n        let overTransforms = false;\n        if (!(reference instanceof VirtualTrigger)) {\n            const root = (withinReference ? reference : floating) as Element;\n            const containingBlock = isContainingBlock(root)\n                ? root\n                : getContainingBlock(root);\n            let css: CSSStyleDeclaration | Record<string, string> = {};\n            if (\n                containingBlock !== null &&\n                getWindow(containingBlock) !==\n                    (containingBlock as unknown as Window)\n            ) {\n                css = getComputedStyle(containingBlock);\n                // The overlay is \"over transforms\" when the containing block uses specific CSS...\n                overTransforms =\n                    // the `transform` property\n                    css.transform !== 'none' ||\n                    // the `translate` property\n                    css.translate !== 'none' ||\n                    // the `containerType` property\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    (css.containerType\n                        ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                          // @ts-ignore\n                          css.containerType !== 'normal'\n                        : false) ||\n                    // the `backdropFilter` property\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    (css.backdropFilter\n                        ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                          // @ts-ignore\n                          css.backdropFilter !== 'none'\n                        : false) ||\n                    // the `filter` property for anything other than \"none\"\n                    (css.filter ? css.filter !== 'none' : false) ||\n                    // the `transform` property \"will-change\"\n                    css.willChange.search('transform') > -1 ||\n                    // the `transform` property \"will-change\"\n                    css.willChange.search('translate') > -1 ||\n                    // a value of \"paint\", \"layout\", \"strict\", or \"content\" for `contain`\n                    ['paint', 'layout', 'strict', 'content'].some((value) =>\n                        (css.contain || '').includes(value)\n                    );\n            }\n\n            if (onTopLayer && overTransforms && containingBlock) {\n                const rect = containingBlock.getBoundingClientRect();\n                // Margins are not included in the bounding client rect and need to be handled separately.\n                const { marginInlineStart = '0', marginBlockStart = '0' } = css;\n                diffCoords.x = rect.x + parseFloat(marginInlineStart);\n                diffCoords.y = rect.y + parseFloat(marginBlockStart);\n            }\n        }\n\n        if (onTopLayer && topLayerIsFloating) {\n            return {\n                x: x + diffCoords.x,\n                y: y + diffCoords.y,\n                data: diffCoords,\n            };\n        }\n\n        if (onTopLayer) {\n            return {\n                x,\n                y,\n                data: diffCoords,\n            };\n        }\n\n        return {\n            x: x - diffCoords.x,\n            y: y - diffCoords.y,\n            data: diffCoords,\n        };\n    },\n});\n"],
+  "mappings": "aAYA,OACI,sBAAAA,EACA,aAAAC,EACA,qBAAAC,MACG,yBACP,OAAS,kBAAAC,MAAsB,sBAExB,aAAM,uBAAyB,KAAmB,CACrD,KAAM,WACN,MAAM,GAAGC,EAAsC,CAC3C,KAAM,CACF,EAAAC,EACA,EAAAC,EACA,SAAU,CAAE,UAAAC,EAAW,SAAAC,CAAS,CACpC,EAAIJ,EACJ,IAAIK,EAAa,GACbC,EAAqB,GACrBC,EAAkB,GACtB,MAAMC,EAAa,CACf,EAAG,EACH,EAAG,CACP,EACA,GAAI,CACAH,EAAaA,GAAcD,EAAS,QAAQ,eAAe,CAE/D,OAASK,EAAO,CAAC,CACjB,GAAI,CACAJ,EAAaA,GAAcD,EAAS,QAAQ,OAAO,CAEvD,OAASK,EAAO,CAAC,CACjB,GAAI,CACAJ,EAAaA,GAAcD,EAAS,QAAQ,QAAQ,CAGxD,OAASK,EAAO,CAAC,CACjBH,EAAqBD,EACrB,MAAMK,EAA2B,IAAI,MAAM,0BAA2B,CAClE,SAAU,GACV,QAAS,EACb,CAAC,EACDN,EAAS,iBACL,0BACCO,GAAiB,CACbA,EAAM,aAAa,EAA2B,QAASC,GAAO,CAE3D,GADAL,EAAkBA,GAAmBK,IAAOT,EACxC,EAAAS,IAAOR,GAAYQ,EAAG,YAAc,UACxC,GAAI,CACAP,EAAaA,GAAcO,EAAG,QAAQ,QAAQ,CAGlD,OAASH,EAAO,CAAC,CACrB,CAAC,CACL,EACA,CAAE,KAAM,EAAK,CACjB,EACAL,EAAS,cAAcM,CAAwB,EAC/C,IAAIG,EAAiB,GACrB,GAAI,EAAEV,aAAqBJ,GAAiB,CACxC,MAAMe,EAAQP,EAAkBJ,EAAYC,EACtCW,EAAkBjB,EAAkBgB,CAAI,EACxCA,EACAlB,EAAmBkB,CAAI,EAC7B,IAAIE,EAAoD,CAAC,EAyCzD,GAvCID,IAAoB,MACpBlB,EAAUkB,CAAe,IACpBA,IAELC,EAAM,iBAAiBD,CAAe,EAEtCF,EAEIG,EAAI,YAAc,QAElBA,EAAI,YAAc,SAIjBA,EAAI,cAGCA,EAAI,gBAAkB,SACtB,MAILA,EAAI,eAGCA,EAAI,iBAAmB,OACvB,MAELA,EAAI,OAASA,EAAI,SAAW,OAAS,KAEtCA,EAAI,WAAW,OAAO,WAAW,EAAI,IAErCA,EAAI,WAAW,OAAO,WAAW,EAAI,IAErC,CAAC,QAAS,SAAU,SAAU,SAAS,EAAE,KAAMC,IAC1CD,EAAI,SAAW,IAAI,SAASC,CAAK,CACtC,GAGJZ,GAAcQ,GAAkBE,EAAiB,CACjD,MAAMG,EAAOH,EAAgB,sBAAsB,EAE7C,CAAE,kBAAAI,EAAoB,IAAK,iBAAAC,EAAmB,GAAI,EAAIJ,EAC5DR,EAAW,EAAIU,EAAK,EAAI,WAAWC,CAAiB,EACpDX,EAAW,EAAIU,EAAK,EAAI,WAAWE,CAAgB,CACvD,CACJ,CAEA,OAAIf,GAAcC,EACP,CACH,EAAGL,EAAIO,EAAW,EAClB,EAAGN,EAAIM,EAAW,EAClB,KAAMA,CACV,EAGAH,EACO,CACH,EAAAJ,EACA,EAAAC,EACA,KAAMM,CACV,EAGG,CACH,EAAGP,EAAIO,EAAW,EAClB,EAAGN,EAAIM,EAAW,EAClB,KAAMA,CACV,CACJ,CACJ",
   "names": ["getContainingBlock", "getWindow", "isContainingBlock", "VirtualTrigger", "middlewareArguments", "x", "y", "reference", "floating", "onTopLayer", "topLayerIsFloating", "withinReference", "diffCoords", "error", "dialogAncestorQueryEvent", "event", "el", "overTransforms", "root", "containingBlock", "css", "value", "rect", "marginInlineStart", "marginBlockStart"]
 }

package/stories/overlay-element.stories.js

@@ -1,6 +1,7 @@
 "use strict";
 import { html } from "@spectrum-web-components/base";
 import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import "@spectrum-web-components/dialog/sp-dialog.js";
 import "@spectrum-web-components/overlay/sp-overlay.js";
 import "@spectrum-web-components/action-button/sp-action-button.js";
 import "@spectrum-web-components/action-menu/sp-action-menu.js";
@@ -9,6 +10,7 @@ import "@spectrum-web-components/popover/sp-popover.js";
 import "@spectrum-web-components/menu/sp-menu-group.js";
 import "@spectrum-web-components/menu/sp-menu-item.js";
 import "@spectrum-web-components/menu/sp-menu-divider.js";
+import "@spectrum-web-components/link/sp-link.js";
 import "@spectrum-web-components/tooltip/sp-tooltip.js";
 import "@spectrum-web-components/icons-workflow/icons/sp-icon-anchor-select.js";
 import "@spectrum-web-components/icons-workflow/icons/sp-icon-polygon-select.js";
@@ -54,13 +56,22 @@ const Template = ({
   open,
   placement,
   type,
-  delayed
+  delayed,
+  style
 }) => html`
-    <style>
-        .wrapper {
-            will-change: transform;
-        }
-    </style>
+    ${style === "will-change" ? html`
+              <style>
+                  .wrapper {
+                      will-change: transform;
+                  }
+              </style>
+          ` : html`
+              <style>
+                  .wrapper {
+                      container-type: size;
+                  }
+              </style>
+          `}
     <div class="wrapper">
         <sp-action-button id="trigger">Open the overlay</sp-action-button>
         <sp-overlay
@@ -70,19 +81,21 @@ const Template = ({
             placement=${ifDefined(placement)}
             offset="-10"
         >
-            <sp-popover dialog ?delayed=${delayed}>
-                <p>
-                    Content goes here.
-                    ${type === "modal" || type === "page" ? html`
-                              Or, a link,
-                              <sp-link
-                                  href="https://opensource.adobe.com/spectrum-web-components"
-                              >
-                                  Spectrum Web Components
-                              </sp-link>
-                              .
-                          ` : ""}
-                </p>
+            <sp-popover ?delayed=${delayed}>
+                <sp-dialog size="s" no-divider>
+                    <p>
+                        Content goes here.
+                        ${type === "modal" || type === "page" ? html`
+                                  Or, a link,
+                                  <sp-link
+                                      href="https://opensource.adobe.com/spectrum-web-components"
+                                  >
+                                      Spectrum Web Components
+                                  </sp-link>
+                                  .
+                              ` : ""}
+                    </p>
+                </sp-dialog>
             </sp-popover>
         </sp-overlay>
     </div>
@@ -91,6 +104,7 @@ export const modal = (args) => Template(args);
 modal.args = {
   interaction: "click",
   placement: "right",
+  style: "will-change",
   type: "modal"
 };
 export const page = ({
@@ -118,10 +132,40 @@ export const click = (args) => Template(args);
 click.args = {
   interaction: "click",
   placement: "right",
+  style: "container-type",
   type: "auto"
 };
 export const hover = (args) => Template(args);
 hover.args = {
+  interaction: "hover",
+  placement: "right",
+  style: "will-change"
+};
+export const hoverTooltip = ({
+  interaction,
+  open,
+  placement,
+  type
+}) => html`
+    <style>
+        .wrapper {
+            will-change: transform;
+        }
+    </style>
+    <div class="wrapper">
+        <sp-action-button id="trigger">Open the overlay</sp-action-button>
+        <sp-overlay
+            ?open=${open}
+            trigger="trigger@${interaction}"
+            type=${ifDefined(type)}
+            placement=${ifDefined(placement)}
+            offset="-10"
+        >
+            <sp-tooltip>Tooltip goes here.</sp-tooltip>
+        </sp-overlay>
+    </div>
+`;
+hoverTooltip.args = {
   interaction: "hover",
   placement: "right"
 };
@@ -129,6 +173,7 @@ export const longpress = (args) => Template(args);
 longpress.args = {
   interaction: "longpress",
   placement: "right",
+  style: "container-type",
   type: "auto"
 };
 export const receivesFocus = ({
@@ -148,7 +193,11 @@ export const receivesFocus = ({
         placement=${ifDefined(placement)}
         .receivesFocus=${receivesFocus2}
     >
-        <a href="https://example.com">Click Content</a>
+        <sp-popover>
+            <sp-dialog size="s" no-divider>
+                <a href="https://example.com">Click Content</a>
+            </sp-dialog>
+        </sp-popover>
     </sp-overlay>
 `;
 receivesFocus.args = {
@@ -202,13 +251,17 @@ export const all = ({ delayed }) => html`
         Open the overlay
     </sp-action-button>
     <sp-overlay trigger="trigger@click" type="auto" placement="right">
-        <sp-popover dialog>Click content</sp-popover>
+        <sp-popover>
+            <sp-dialog size="s" no-divider>Click content</sp-dialog>
+        </sp-popover>
     </sp-overlay>
     <sp-overlay ?delayed=${delayed} trigger="trigger@hover" type="hint">
         <sp-tooltip>Hover content</sp-tooltip>
     </sp-overlay>
     <sp-overlay trigger="trigger@longpress" type="auto" placement="right">
-        <sp-popover dialog>Longpress content</sp-popover>
+        <sp-popover>
+            <sp-dialog size="s" no-divider>Longpress content</sp-dialog>
+        </sp-popover>
     </sp-overlay>
 `;
 export const actionGroup = ({ delayed }) => {