@spectrum-web-components/overlay 0.34.1-rc.0 → 0.35.1-rc.15

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 { MiddlewareArguments } from '@floating-ui/dom';\n\nexport const topLayerOverTransforms = () => ({\n    name: 'topLayer',\n    async fn(middlewareArguments: MiddlewareArguments) {\n        const {\n            x,\n            y,\n            elements: { reference, floating },\n        } = middlewareArguments;\n        let onTopLayer = false;\n        let topLayerIsFloating = 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 (e) {}\n        try {\n            onTopLayer = onTopLayer || floating.matches(':open');\n            // eslint-disable-next-line no-empty\n        } catch (e) {}\n        try {\n            onTopLayer = onTopLayer || floating.matches(':modal');\n            // eslint-disable-next-line no-empty\n        } catch (e) {}\n        topLayerIsFloating = onTopLayer;\n        if (!onTopLayer) {\n            const dialogAncestorQueryEvent = new Event(\n                'floating-ui-dialog-test',\n                { composed: true, bubbles: true }\n            );\n            floating.addEventListener(\n                'floating-ui-dialog-test',\n                (event: Event) => {\n                    (event.composedPath() as unknown as Element[]).forEach(\n                        (el) => {\n                            if (el === floating || el.localName !== 'dialog')\n                                return;\n                            try {\n                                onTopLayer = onTopLayer || el.matches(':modal');\n                                if (onTopLayer) {\n                                    // console.log(el);\n                                }\n                                // eslint-disable-next-line no-empty\n                            } catch (e) {}\n                        }\n                    );\n                },\n                { once: true }\n            );\n            floating.dispatchEvent(dialogAncestorQueryEvent);\n        }\n        let overTransforms = false;\n        const containingBlock = getContainingBlock(reference as Element);\n        if (containingBlock !== null && !isWindow(containingBlock)) {\n            overTransforms = true;\n        }\n\n        if (onTopLayer && overTransforms) {\n            const rect = containingBlock!.getBoundingClientRect();\n            diffCoords.x = rect.x;\n            diffCoords.y = rect.y;\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\n/* COPY/PASTE from Floating UI */\n\nfunction getContainingBlock(element: Element) {\n    let currentNode: Node | null = getParentNode(element);\n\n    if (isShadowRoot(currentNode)) {\n        currentNode = currentNode.host;\n    }\n\n    while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {\n        if (isContainingBlock(currentNode)) {\n            return currentNode;\n        } else {\n            const parent = (\n                currentNode.assignedSlot\n                    ? currentNode.assignedSlot\n                    : currentNode.parentNode\n            ) as Node;\n            currentNode = isShadowRoot(parent) ? parent.host : parent;\n        }\n    }\n\n    return null;\n}\n\nexport function isLastTraversableNode(node: Node) {\n    return ['html', 'body', '#document'].includes(getNodeName(node));\n}\n\nfunction isContainingBlock(element: HTMLElement) {\n    const safari = isSafari();\n    const css = getComputedStyle(element) as CSSStyleDeclaration & {\n        backdropFilter: string;\n    };\n\n    // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block\n    return (\n        css.transform !== 'none' ||\n        css.perspective !== 'none' ||\n        (!safari &&\n            (css.backdropFilter ? css.backdropFilter !== 'none' : false)) ||\n        (!safari && (css.filter ? css.filter !== 'none' : false)) ||\n        ['transform', 'perspective', 'filter'].some((value) =>\n            (css.willChange || '').includes(value)\n        ) ||\n        ['paint', 'layout', 'strict', 'content'].some((value) =>\n            (css.contain || '').includes(value)\n        )\n    );\n}\n\nexport function isSafari(): boolean {\n    if (typeof CSS === 'undefined' || !CSS.supports) return false;\n    return CSS.supports('-webkit-backdrop-filter', 'none');\n}\n\ninterface NavigatorUAData {\n    brands: Array<{ brand: string; version: string }>;\n    mobile: boolean;\n    platform: string;\n}\n\nexport function getUAString(): string {\n    const uaData = (navigator as any).userAgentData as\n        | NavigatorUAData\n        | undefined;\n\n    if (uaData?.brands) {\n        return uaData.brands\n            .map((item) => `${item.brand}/${item.version}`)\n            .join(' ');\n    }\n\n    return navigator.userAgent;\n}\n\nexport function getParentNode(node: Node): Node {\n    if (getNodeName(node) === 'html') {\n        return node;\n    }\n\n    return (\n        // this is a quicker (but less type safe) way to save quite some bytes from the bundle\n        // @ts-ignore\n        node.assignedSlot || // step into the shadow DOM of the parent of a slotted node\n        node.parentNode || // DOM Element detected\n        (isShadowRoot(node) ? node.host : null) || // ShadowRoot detected\n        getDocumentElement(node) // fallback\n    );\n}\n\nexport function getNodeName(node: Node | Window): string {\n    return isWindow(node)\n        ? ''\n        : node\n        ? (node.nodeName || '').toLowerCase()\n        : '';\n}\n\nexport function getDocumentElement(node: Node | Window): HTMLElement {\n    return (\n        (isNode(node) ? node.ownerDocument : node.document) || window.document\n    ).documentElement;\n}\n\nexport function isNode(value: any): value is Node {\n    return value instanceof (getWindow(value) as unknown as { Node: any }).Node;\n}\n\nexport function isWindow(value: any): value is Window {\n    return (\n        value &&\n        value.document &&\n        value.location &&\n        value.alert &&\n        value.setInterval\n    );\n}\n\nexport function getWindow(node: Node | Window): Window {\n    if (node == null) {\n        return window;\n    }\n\n    if (!isWindow(node)) {\n        const ownerDocument = node.ownerDocument;\n        return ownerDocument ? ownerDocument.defaultView || window : window;\n    }\n\n    return node;\n}\n\nexport function isShadowRoot(node: Node): node is ShadowRoot {\n    // Browsers without `ShadowRoot` support\n    if (typeof ShadowRoot === 'undefined') {\n        return false;\n    }\n\n    const OwnElement = (\n        getWindow(node) as unknown as { ShadowRoot: ShadowRoot }\n    ).ShadowRoot;\n    const testNode = node as Node;\n    return (\n        node instanceof (OwnElement as unknown as any) ||\n        testNode instanceof ShadowRoot\n    );\n}\n\nexport function isHTMLElement(value: any): value is HTMLElement {\n    return (\n        value instanceof\n        (getWindow(value) as unknown as { HTMLElement: any }).HTMLElement\n    );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\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 { getContainingBlock, getWindow } from '@floating-ui/utils/dom';\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        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        } catch (error) {}\n        topLayerIsFloating = onTopLayer;\n        if (!onTopLayer) {\n            const dialogAncestorQueryEvent = new Event(\n                'floating-ui-dialog-test',\n                { composed: true, bubbles: true }\n            );\n            floating.addEventListener(\n                'floating-ui-dialog-test',\n                (event: Event) => {\n                    (event.composedPath() as unknown as Element[]).forEach(\n                        (el) => {\n                            if (el === floating || el.localName !== 'dialog')\n                                return;\n                            try {\n                                onTopLayer = onTopLayer || el.matches(':modal');\n                                if (onTopLayer) {\n                                    // console.log(el);\n                                }\n                                // eslint-disable-next-line no-empty\n                            } catch (error) {}\n                        }\n                    );\n                },\n                { once: true }\n            );\n            floating.dispatchEvent(dialogAncestorQueryEvent);\n        }\n        let overTransforms = false;\n        const containingBlock = getContainingBlock(reference as Element);\n        if (\n            containingBlock !== null &&\n            getWindow(containingBlock) !==\n                (containingBlock as unknown as Window)\n        ) {\n            overTransforms = true;\n        }\n\n        if (onTopLayer && overTransforms && containingBlock) {\n            const rect = containingBlock.getBoundingClientRect();\n            diffCoords.x = rect.x;\n            diffCoords.y = rect.y;\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,SAAS,oBAAoB,iBAAiB;AAEvC,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,UAAM,aAAa;AAAA,MACf,GAAG;AAAA,MACH,GAAG;AAAA,IACP;AACA,QAAI;AACA,mBAAa,cAAc,SAAS,QAAQ,eAAe;AAAA,IAE/D,SAAS,OAAP;AAAA,IAAe;AACjB,QAAI;AACA,mBAAa,cAAc,SAAS,QAAQ,OAAO;AAAA,IAEvD,SAAS,OAAP;AAAA,IAAe;AACjB,QAAI;AACA,mBAAa,cAAc,SAAS,QAAQ,QAAQ;AAAA,IAExD,SAAS,OAAP;AAAA,IAAe;AACjB,yBAAqB;AACrB,QAAI,CAAC,YAAY;AACb,YAAM,2BAA2B,IAAI;AAAA,QACjC;AAAA,QACA,EAAE,UAAU,MAAM,SAAS,KAAK;AAAA,MACpC;AACA,eAAS;AAAA,QACL;AAAA,QACA,CAAC,UAAiB;AACd,UAAC,MAAM,aAAa,EAA2B;AAAA,YAC3C,CAAC,OAAO;AACJ,kBAAI,OAAO,YAAY,GAAG,cAAc;AACpC;AACJ,kBAAI;AACA,6BAAa,cAAc,GAAG,QAAQ,QAAQ;AAC9C,oBAAI,YAAY;AAAA,gBAEhB;AAAA,cAEJ,SAAS,OAAP;AAAA,cAAe;AAAA,YACrB;AAAA,UACJ;AAAA,QACJ;AAAA,QACA,EAAE,MAAM,KAAK;AAAA,MACjB;AACA,eAAS,cAAc,wBAAwB;AAAA,IACnD;AACA,QAAI,iBAAiB;AACrB,UAAM,kBAAkB,mBAAmB,SAAoB;AAC/D,QACI,oBAAoB,QACpB,UAAU,eAAe,MACpB,iBACP;AACE,uBAAiB;AAAA,IACrB;AAEA,QAAI,cAAc,kBAAkB,iBAAiB;AACjD,YAAM,OAAO,gBAAgB,sBAAsB;AACnD,iBAAW,IAAI,KAAK;AACpB,iBAAW,IAAI,KAAK;AAAA,IACxB;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";export const topLayerOverTransforms=()=>({name:"topLayer",async fn(e){const{x:t,y:n,elements:{reference:s,floating:i}}=e;let o=!1,u=!1;const r={x:0,y:0};try{o=o||i.matches(":popover-open")}catch(a){}try{o=o||i.matches(":open")}catch(a){}try{o=o||i.matches(":modal")}catch(a){}if(u=o,!o){const a=new Event("floating-ui-dialog-test",{composed:!0,bubbles:!0});i.addEventListener("floating-ui-dialog-test",f=>{f.composedPath().forEach(l=>{if(!(l===i||l.localName!=="dialog"))try{o=o||l.matches(":modal")}catch(g){}})},{once:!0}),i.dispatchEvent(a)}let d=!1;const c=m(s);if(c!==null&&!isWindow(c)&&(d=!0),o&&d){const a=c.getBoundingClientRect();r.x=a.x,r.y=a.y}return o&&u?{x:t+r.x,y:n+r.y,data:r}:o?{x:t,y:n,data:r}:{x:t-r.x,y:n-r.y,data:r}}});function m(e){let t=getParentNode(e);for(isShadowRoot(t)&&(t=t.host);isHTMLElement(t)&&!isLastTraversableNode(t);){if(p(t))return t;{const n=t.assignedSlot?t.assignedSlot:t.parentNode;t=isShadowRoot(n)?n.host:n}}return null}export function isLastTraversableNode(e){return["html","body","#document"].includes(getNodeName(e))}function p(e){const t=isSafari(),n=getComputedStyle(e);return n.transform!=="none"||n.perspective!=="none"||!t&&(n.backdropFilter?n.backdropFilter!=="none":!1)||!t&&(n.filter?n.filter!=="none":!1)||["transform","perspective","filter"].some(s=>(n.willChange||"").includes(s))||["paint","layout","strict","content"].some(s=>(n.contain||"").includes(s))}export function isSafari(){return typeof CSS=="undefined"||!CSS.supports?!1:CSS.supports("-webkit-backdrop-filter","none")}export function getUAString(){const e=navigator.userAgentData;return e!=null&&e.brands?e.brands.map(t=>`${t.brand}/${t.version}`).join(" "):navigator.userAgent}export function getParentNode(e){return getNodeName(e)==="html"?e:e.assignedSlot||e.parentNode||(isShadowRoot(e)?e.host:null)||getDocumentElement(e)}export function getNodeName(e){return isWindow(e)?"":e?(e.nodeName||"").toLowerCase():""}export function getDocumentElement(e){return((isNode(e)?e.ownerDocument:e.document)||window.document).documentElement}export function isNode(e){return e instanceof getWindow(e).Node}export function isWindow(e){return e&&e.document&&e.location&&e.alert&&e.setInterval}export function getWindow(e){if(e==null)return window;if(!isWindow(e)){const t=e.ownerDocument;return t&&t.defaultView||window}return e}export function isShadowRoot(e){if(typeof ShadowRoot=="undefined")return!1;const t=getWindow(e).ShadowRoot,n=e;return e instanceof t||n instanceof ShadowRoot}export function isHTMLElement(e){return e instanceof getWindow(e).HTMLElement}
+"use strict";import{getContainingBlock as y,getWindow as u}from"@floating-ui/utils/dom";export const topLayerOverTransforms=()=>({name:"topLayer",async fn(d){const{x:n,y:i,elements:{reference:f,floating:r}}=d;let e=!1,c=!1;const t={x:0,y:0};try{e=e||r.matches(":popover-open")}catch(o){}try{e=e||r.matches(":open")}catch(o){}try{e=e||r.matches(":modal")}catch(o){}if(c=e,!e){const o=new Event("floating-ui-dialog-test",{composed:!0,bubbles:!0});r.addEventListener("floating-ui-dialog-test",m=>{m.composedPath().forEach(s=>{if(!(s===r||s.localName!=="dialog"))try{e=e||s.matches(":modal")}catch(g){}})},{once:!0}),r.dispatchEvent(o)}let l=!1;const a=y(f);if(a!==null&&u(a)!==a&&(l=!0),e&&l&&a){const o=a.getBoundingClientRect();t.x=o.x,t.y=o.y}return e&&c?{x:n+t.x,y:i+t.y,data:t}:e?{x:n,y:i,data:t}:{x:n-t.x,y:i-t.y,data:t}}});
 //# 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 { MiddlewareArguments } from '@floating-ui/dom';\n\nexport const topLayerOverTransforms = () => ({\n    name: 'topLayer',\n    async fn(middlewareArguments: MiddlewareArguments) {\n        const {\n            x,\n            y,\n            elements: { reference, floating },\n        } = middlewareArguments;\n        let onTopLayer = false;\n        let topLayerIsFloating = 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 (e) {}\n        try {\n            onTopLayer = onTopLayer || floating.matches(':open');\n            // eslint-disable-next-line no-empty\n        } catch (e) {}\n        try {\n            onTopLayer = onTopLayer || floating.matches(':modal');\n            // eslint-disable-next-line no-empty\n        } catch (e) {}\n        topLayerIsFloating = onTopLayer;\n        if (!onTopLayer) {\n            const dialogAncestorQueryEvent = new Event(\n                'floating-ui-dialog-test',\n                { composed: true, bubbles: true }\n            );\n            floating.addEventListener(\n                'floating-ui-dialog-test',\n                (event: Event) => {\n                    (event.composedPath() as unknown as Element[]).forEach(\n                        (el) => {\n                            if (el === floating || el.localName !== 'dialog')\n                                return;\n                            try {\n                                onTopLayer = onTopLayer || el.matches(':modal');\n                                if (onTopLayer) {\n                                    // console.log(el);\n                                }\n                                // eslint-disable-next-line no-empty\n                            } catch (e) {}\n                        }\n                    );\n                },\n                { once: true }\n            );\n            floating.dispatchEvent(dialogAncestorQueryEvent);\n        }\n        let overTransforms = false;\n        const containingBlock = getContainingBlock(reference as Element);\n        if (containingBlock !== null && !isWindow(containingBlock)) {\n            overTransforms = true;\n        }\n\n        if (onTopLayer && overTransforms) {\n            const rect = containingBlock!.getBoundingClientRect();\n            diffCoords.x = rect.x;\n            diffCoords.y = rect.y;\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\n/* COPY/PASTE from Floating UI */\n\nfunction getContainingBlock(element: Element) {\n    let currentNode: Node | null = getParentNode(element);\n\n    if (isShadowRoot(currentNode)) {\n        currentNode = currentNode.host;\n    }\n\n    while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {\n        if (isContainingBlock(currentNode)) {\n            return currentNode;\n        } else {\n            const parent = (\n                currentNode.assignedSlot\n                    ? currentNode.assignedSlot\n                    : currentNode.parentNode\n            ) as Node;\n            currentNode = isShadowRoot(parent) ? parent.host : parent;\n        }\n    }\n\n    return null;\n}\n\nexport function isLastTraversableNode(node: Node) {\n    return ['html', 'body', '#document'].includes(getNodeName(node));\n}\n\nfunction isContainingBlock(element: HTMLElement) {\n    const safari = isSafari();\n    const css = getComputedStyle(element) as CSSStyleDeclaration & {\n        backdropFilter: string;\n    };\n\n    // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block\n    return (\n        css.transform !== 'none' ||\n        css.perspective !== 'none' ||\n        (!safari &&\n            (css.backdropFilter ? css.backdropFilter !== 'none' : false)) ||\n        (!safari && (css.filter ? css.filter !== 'none' : false)) ||\n        ['transform', 'perspective', 'filter'].some((value) =>\n            (css.willChange || '').includes(value)\n        ) ||\n        ['paint', 'layout', 'strict', 'content'].some((value) =>\n            (css.contain || '').includes(value)\n        )\n    );\n}\n\nexport function isSafari(): boolean {\n    if (typeof CSS === 'undefined' || !CSS.supports) return false;\n    return CSS.supports('-webkit-backdrop-filter', 'none');\n}\n\ninterface NavigatorUAData {\n    brands: Array<{ brand: string; version: string }>;\n    mobile: boolean;\n    platform: string;\n}\n\nexport function getUAString(): string {\n    const uaData = (navigator as any).userAgentData as\n        | NavigatorUAData\n        | undefined;\n\n    if (uaData?.brands) {\n        return uaData.brands\n            .map((item) => `${item.brand}/${item.version}`)\n            .join(' ');\n    }\n\n    return navigator.userAgent;\n}\n\nexport function getParentNode(node: Node): Node {\n    if (getNodeName(node) === 'html') {\n        return node;\n    }\n\n    return (\n        // this is a quicker (but less type safe) way to save quite some bytes from the bundle\n        // @ts-ignore\n        node.assignedSlot || // step into the shadow DOM of the parent of a slotted node\n        node.parentNode || // DOM Element detected\n        (isShadowRoot(node) ? node.host : null) || // ShadowRoot detected\n        getDocumentElement(node) // fallback\n    );\n}\n\nexport function getNodeName(node: Node | Window): string {\n    return isWindow(node)\n        ? ''\n        : node\n        ? (node.nodeName || '').toLowerCase()\n        : '';\n}\n\nexport function getDocumentElement(node: Node | Window): HTMLElement {\n    return (\n        (isNode(node) ? node.ownerDocument : node.document) || window.document\n    ).documentElement;\n}\n\nexport function isNode(value: any): value is Node {\n    return value instanceof (getWindow(value) as unknown as { Node: any }).Node;\n}\n\nexport function isWindow(value: any): value is Window {\n    return (\n        value &&\n        value.document &&\n        value.location &&\n        value.alert &&\n        value.setInterval\n    );\n}\n\nexport function getWindow(node: Node | Window): Window {\n    if (node == null) {\n        return window;\n    }\n\n    if (!isWindow(node)) {\n        const ownerDocument = node.ownerDocument;\n        return ownerDocument ? ownerDocument.defaultView || window : window;\n    }\n\n    return node;\n}\n\nexport function isShadowRoot(node: Node): node is ShadowRoot {\n    // Browsers without `ShadowRoot` support\n    if (typeof ShadowRoot === 'undefined') {\n        return false;\n    }\n\n    const OwnElement = (\n        getWindow(node) as unknown as { ShadowRoot: ShadowRoot }\n    ).ShadowRoot;\n    const testNode = node as Node;\n    return (\n        node instanceof (OwnElement as unknown as any) ||\n        testNode instanceof ShadowRoot\n    );\n}\n\nexport function isHTMLElement(value: any): value is HTMLElement {\n    return (\n        value instanceof\n        (getWindow(value) as unknown as { HTMLElement: any }).HTMLElement\n    );\n}\n"],
-  "mappings": "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",
-  "names": ["middlewareArguments", "x", "y", "reference", "floating", "onTopLayer", "topLayerIsFloating", "diffCoords", "e", "dialogAncestorQueryEvent", "event", "el", "overTransforms", "containingBlock", "getContainingBlock", "rect", "element", "currentNode", "isContainingBlock", "parent", "node", "safari", "css", "value", "uaData", "item", "ownerDocument", "OwnElement", "testNode"]
+  "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 { getContainingBlock, getWindow } from '@floating-ui/utils/dom';\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        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        } catch (error) {}\n        topLayerIsFloating = onTopLayer;\n        if (!onTopLayer) {\n            const dialogAncestorQueryEvent = new Event(\n                'floating-ui-dialog-test',\n                { composed: true, bubbles: true }\n            );\n            floating.addEventListener(\n                'floating-ui-dialog-test',\n                (event: Event) => {\n                    (event.composedPath() as unknown as Element[]).forEach(\n                        (el) => {\n                            if (el === floating || el.localName !== 'dialog')\n                                return;\n                            try {\n                                onTopLayer = onTopLayer || el.matches(':modal');\n                                if (onTopLayer) {\n                                    // console.log(el);\n                                }\n                                // eslint-disable-next-line no-empty\n                            } catch (error) {}\n                        }\n                    );\n                },\n                { once: true }\n            );\n            floating.dispatchEvent(dialogAncestorQueryEvent);\n        }\n        let overTransforms = false;\n        const containingBlock = getContainingBlock(reference as Element);\n        if (\n            containingBlock !== null &&\n            getWindow(containingBlock) !==\n                (containingBlock as unknown as Window)\n        ) {\n            overTransforms = true;\n        }\n\n        if (onTopLayer && overTransforms && containingBlock) {\n            const rect = containingBlock.getBoundingClientRect();\n            diffCoords.x = rect.x;\n            diffCoords.y = rect.y;\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,OAAS,sBAAAA,EAAoB,aAAAC,MAAiB,yBAEvC,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,GACzB,MAAMC,EAAa,CACf,EAAG,EACH,EAAG,CACP,EACA,GAAI,CACAF,EAAaA,GAAcD,EAAS,QAAQ,eAAe,CAE/D,OAASI,EAAP,CAAe,CACjB,GAAI,CACAH,EAAaA,GAAcD,EAAS,QAAQ,OAAO,CAEvD,OAASI,EAAP,CAAe,CACjB,GAAI,CACAH,EAAaA,GAAcD,EAAS,QAAQ,QAAQ,CAExD,OAASI,EAAP,CAAe,CAEjB,GADAF,EAAqBD,EACjB,CAACA,EAAY,CACb,MAAMI,EAA2B,IAAI,MACjC,0BACA,CAAE,SAAU,GAAM,QAAS,EAAK,CACpC,EACAL,EAAS,iBACL,0BACCM,GAAiB,CACbA,EAAM,aAAa,EAA2B,QAC1CC,GAAO,CACJ,GAAI,EAAAA,IAAOP,GAAYO,EAAG,YAAc,UAExC,GAAI,CACAN,EAAaA,GAAcM,EAAG,QAAQ,QAAQ,CAKlD,OAASH,EAAP,CAAe,CACrB,CACJ,CACJ,EACA,CAAE,KAAM,EAAK,CACjB,EACAJ,EAAS,cAAcK,CAAwB,EAEnD,IAAIG,EAAiB,GACrB,MAAMC,EAAkBf,EAAmBK,CAAoB,EAS/D,GAPIU,IAAoB,MACpBd,EAAUc,CAAe,IACpBA,IAELD,EAAiB,IAGjBP,GAAcO,GAAkBC,EAAiB,CACjD,MAAMC,EAAOD,EAAgB,sBAAsB,EACnDN,EAAW,EAAIO,EAAK,EACpBP,EAAW,EAAIO,EAAK,EAGxB,OAAIT,GAAcC,EACP,CACH,EAAGL,EAAIM,EAAW,EAClB,EAAGL,EAAIK,EAAW,EAClB,KAAMA,CACV,EAGAF,EACO,CACH,EAAAJ,EACA,EAAAC,EACA,KAAMK,CACV,EAGG,CACH,EAAGN,EAAIM,EAAW,EAClB,EAAGL,EAAIK,EAAW,EAClB,KAAMA,CACV,CACJ,CACJ",
+  "names": ["getContainingBlock", "getWindow", "middlewareArguments", "x", "y", "reference", "floating", "onTopLayer", "topLayerIsFloating", "diffCoords", "error", "dialogAncestorQueryEvent", "event", "el", "overTransforms", "containingBlock", "rect"]
 }

package/stories/overlay-element.stories.js

@@ -117,9 +117,7 @@ longpress.args = {
   placement: "right",
   type: "auto"
 };
-export const all = ({
-  delayed
-}) => html`
+export const all = ({ delayed }) => html`
     <sp-action-button id="trigger" hold-affordance>
         Open the overlay
     </sp-action-button>
@@ -133,9 +131,7 @@ export const all = ({
         <sp-popover dialog>Longpress content</sp-popover>
     </sp-overlay>
 `;
-export const actionGroup = ({
-  delayed
-}) => {
+export const actionGroup = ({ delayed }) => {
   const popoverOffset = [6, -9];
   return html`
         <style>

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["overlay-element.stories.ts"],
-  "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-anchor-select.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-polygon-select.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-rect-select.js';\nimport { Placement } from '@floating-ui/dom';\nimport { OverlayTypes } from '../src/overlay-types.js';\nimport { notAgain } from '../../dialog/stories/dialog-base.stories.js';\n\nexport default {\n    title: 'Overlay Element',\n    component: 'sp-overlay',\n    args: {\n        open: true,\n        delayed: false,\n    },\n    argTypes: {\n        open: {\n            name: 'open',\n            type: { name: 'boolean', required: false },\n            description: 'Whether the second accordion item is open.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        delayed: {\n            name: 'delayed',\n            type: { name: 'boolean', required: false },\n            description: 'Whether the tooltips are delayed.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n    },\n};\n\ntype Properties = {\n    delayed: boolean;\n    interaction: 'click' | 'hover' | 'longpress';\n    open?: boolean;\n    placement?: Placement;\n    type?: OverlayTypes;\n};\n\nconst Template = ({\n    interaction,\n    open,\n    placement,\n    type,\n}: Properties): TemplateResult => html`\n    <sp-action-button id=\"trigger\">Open the overlay</sp-action-button>\n    <sp-overlay\n        ?open=${open}\n        trigger=\"trigger@${interaction}\"\n        type=${ifDefined(type)}\n        placement=${ifDefined(placement)}\n        offset=\"-10\"\n    >\n        <sp-popover dialog>\n            <p>\n                Content goes here.\n                ${type === 'modal' || type === 'page'\n                    ? html`\n                          Or, a link,\n                          <sp-link\n                              href=\"https://opensource.adobe.com/spectrum-web-components\"\n                          >\n                              Spectrum Web Components\n                          </sp-link>\n                          .\n                      `\n                    : ''}\n            </p>\n        </sp-popover>\n    </sp-overlay>\n`;\n\nexport const modal = (args: Properties): TemplateResult => Template(args);\nmodal.args = {\n    interaction: 'click',\n    placement: 'right',\n    type: 'modal',\n};\n\nexport const page = ({\n    interaction,\n    open,\n    placement,\n    type,\n}: Properties): TemplateResult => html`\n    <sp-action-button id=\"trigger\">Open the overlay</sp-action-button>\n    <sp-overlay\n        ?open=${open}\n        trigger=\"trigger@${interaction}\"\n        type=${ifDefined(type)}\n        placement=${ifDefined(placement)}\n    >\n        ${notAgain()}\n    </sp-overlay>\n`;\npage.args = {\n    interaction: 'click',\n    placement: 'right',\n    type: 'page',\n};\n\nexport const click = (args: Properties): TemplateResult => Template(args);\nclick.args = {\n    interaction: 'click',\n    placement: 'right',\n    type: 'auto',\n};\n\nexport const hover = (args: Properties): TemplateResult => Template(args);\nhover.args = {\n    interaction: 'hover',\n    placement: 'right',\n};\n\nexport const longpress = (args: Properties): TemplateResult => Template(args);\nlongpress.args = {\n    interaction: 'longpress',\n    placement: 'right',\n    type: 'auto',\n};\n\nexport const all = ({\n    delayed,\n}: Properties): TemplateResult => html`\n    <sp-action-button id=\"trigger\" hold-affordance>\n        Open the overlay\n    </sp-action-button>\n    <sp-overlay trigger=\"trigger@click\" type=\"auto\" placement=\"right\">\n        <sp-popover dialog>Click content</sp-popover>\n    </sp-overlay>\n    <sp-overlay ?delayed=${delayed} trigger=\"trigger@hover\">\n        <sp-tooltip>Hover content</sp-tooltip>\n    </sp-overlay>\n    <sp-overlay trigger=\"trigger@longpress\" type=\"auto\" placement=\"right\">\n        <sp-popover dialog>Longpress content</sp-popover>\n    </sp-overlay>\n`;\n\nexport const actionGroup = ({\n    delayed\n}: Properties): TemplateResult => {\n    const popoverOffset = [6, -9] as [number, number];\n    return html`\n        <style>\n            sp-popover sp-action-group {\n                padding: var(--spectrum-actiongroup-vertical-spacing-regular);\n            }\n            sp-popover {\n                position: static;\n            }\n        </style>\n        <sp-popover open>\n            <sp-action-group vertical quiet emphasized selects=\"single\">\n                <sp-action-button id=\"trigger-1\" hold-affordance>\n                    <sp-icon-anchor-select slot=\"icon\"></sp-icon-anchor-select>\n                </sp-action-button>\n                <sp-action-button id=\"trigger-2\" hold-affordance>\n                    <sp-icon-polygon-select\n                        slot=\"icon\"\n                    ></sp-icon-polygon-select>\n                </sp-action-button>\n                <sp-action-button id=\"trigger-3\" hold-affordance>\n                    <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n                </sp-action-button>\n            </sp-action-group>\n        </sp-popover>\n        <sp-overlay ?delayed=${delayed} trigger=\"trigger-1@hover\">\n            <sp-tooltip>Hover</sp-tooltip>\n        </sp-overlay>\n        <sp-overlay\n            trigger=\"trigger-1@longpress\"\n            type=\"auto\"\n            placement=\"right-start\"\n            .offset=${popoverOffset}\n        >\n            <sp-popover tip>\n                <sp-action-group vertical quiet>\n                    <sp-action-button>\n                        <sp-icon-anchor-select\n                            slot=\"icon\"\n                        ></sp-icon-anchor-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-polygon-select\n                            slot=\"icon\"\n                        ></sp-icon-polygon-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n                    </sp-action-button>\n                </sp-action-group>\n            </sp-popover>\n        </sp-overlay>\n        <sp-overlay ?delayed=${delayed} trigger=\"trigger-2@hover\">\n            <sp-tooltip>Hover</sp-tooltip>\n        </sp-overlay>\n        <sp-overlay\n            trigger=\"trigger-2@longpress\"\n            type=\"auto\"\n            placement=\"right-start\"\n            .offset=${popoverOffset}\n        >\n            <sp-popover tip>\n                <sp-action-group vertical quiet>\n                    <sp-action-button>\n                        <sp-icon-anchor-select\n                            slot=\"icon\"\n                        ></sp-icon-anchor-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-polygon-select\n                            slot=\"icon\"\n                        ></sp-icon-polygon-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n                    </sp-action-button>\n                </sp-action-group>\n            </sp-popover>\n        </sp-overlay>\n        <sp-overlay ?delayed=${delayed} trigger=\"trigger-3@hover\">\n            <sp-tooltip>Hover</sp-tooltip>\n        </sp-overlay>\n        <sp-overlay\n            trigger=\"trigger-3@longpress\"\n            type=\"auto\"\n            placement=\"right-start\"\n            .offset=${popoverOffset}\n        >\n            <sp-popover tip>\n                <sp-action-group vertical quiet>\n                    <sp-action-button>\n                        <sp-icon-anchor-select\n                            slot=\"icon\"\n                        ></sp-icon-anchor-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-polygon-select\n                            slot=\"icon\"\n                        ></sp-icon-polygon-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n                    </sp-action-button>\n                </sp-action-group>\n            </sp-popover>\n        </sp-overlay>\n    `;\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-anchor-select.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-polygon-select.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-rect-select.js';\nimport { Placement } from '@floating-ui/dom';\nimport { OverlayTypes } from '../src/overlay-types.js';\nimport { notAgain } from '../../dialog/stories/dialog-base.stories.js';\n\nexport default {\n    title: 'Overlay Element',\n    component: 'sp-overlay',\n    args: {\n        open: true,\n        delayed: false,\n    },\n    argTypes: {\n        open: {\n            name: 'open',\n            type: { name: 'boolean', required: false },\n            description: 'Whether the second accordion item is open.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        delayed: {\n            name: 'delayed',\n            type: { name: 'boolean', required: false },\n            description: 'Whether the tooltips are delayed.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n    },\n};\n\ntype Properties = {\n    delayed: boolean;\n    interaction: 'click' | 'hover' | 'longpress';\n    open?: boolean;\n    placement?: Placement;\n    type?: OverlayTypes;\n};\n\nconst Template = ({\n    interaction,\n    open,\n    placement,\n    type,\n}: Properties): TemplateResult => html`\n    <sp-action-button id=\"trigger\">Open the overlay</sp-action-button>\n    <sp-overlay\n        ?open=${open}\n        trigger=\"trigger@${interaction}\"\n        type=${ifDefined(type)}\n        placement=${ifDefined(placement)}\n        offset=\"-10\"\n    >\n        <sp-popover dialog>\n            <p>\n                Content goes here.\n                ${type === 'modal' || type === 'page'\n                    ? html`\n                          Or, a link,\n                          <sp-link\n                              href=\"https://opensource.adobe.com/spectrum-web-components\"\n                          >\n                              Spectrum Web Components\n                          </sp-link>\n                          .\n                      `\n                    : ''}\n            </p>\n        </sp-popover>\n    </sp-overlay>\n`;\n\nexport const modal = (args: Properties): TemplateResult => Template(args);\nmodal.args = {\n    interaction: 'click',\n    placement: 'right',\n    type: 'modal',\n};\n\nexport const page = ({\n    interaction,\n    open,\n    placement,\n    type,\n}: Properties): TemplateResult => html`\n    <sp-action-button id=\"trigger\">Open the overlay</sp-action-button>\n    <sp-overlay\n        ?open=${open}\n        trigger=\"trigger@${interaction}\"\n        type=${ifDefined(type)}\n        placement=${ifDefined(placement)}\n    >\n        ${notAgain()}\n    </sp-overlay>\n`;\npage.args = {\n    interaction: 'click',\n    placement: 'right',\n    type: 'page',\n};\n\nexport const click = (args: Properties): TemplateResult => Template(args);\nclick.args = {\n    interaction: 'click',\n    placement: 'right',\n    type: 'auto',\n};\n\nexport const hover = (args: Properties): TemplateResult => Template(args);\nhover.args = {\n    interaction: 'hover',\n    placement: 'right',\n};\n\nexport const longpress = (args: Properties): TemplateResult => Template(args);\nlongpress.args = {\n    interaction: 'longpress',\n    placement: 'right',\n    type: 'auto',\n};\n\nexport const all = ({ delayed }: Properties): TemplateResult => html`\n    <sp-action-button id=\"trigger\" hold-affordance>\n        Open the overlay\n    </sp-action-button>\n    <sp-overlay trigger=\"trigger@click\" type=\"auto\" placement=\"right\">\n        <sp-popover dialog>Click content</sp-popover>\n    </sp-overlay>\n    <sp-overlay ?delayed=${delayed} trigger=\"trigger@hover\">\n        <sp-tooltip>Hover content</sp-tooltip>\n    </sp-overlay>\n    <sp-overlay trigger=\"trigger@longpress\" type=\"auto\" placement=\"right\">\n        <sp-popover dialog>Longpress content</sp-popover>\n    </sp-overlay>\n`;\n\nexport const actionGroup = ({ delayed }: Properties): TemplateResult => {\n    const popoverOffset = [6, -9] as [number, number];\n    return html`\n        <style>\n            sp-popover sp-action-group {\n                padding: var(--spectrum-actiongroup-vertical-spacing-regular);\n            }\n            sp-popover {\n                position: static;\n            }\n        </style>\n        <sp-popover open>\n            <sp-action-group vertical quiet emphasized selects=\"single\">\n                <sp-action-button id=\"trigger-1\" hold-affordance>\n                    <sp-icon-anchor-select slot=\"icon\"></sp-icon-anchor-select>\n                </sp-action-button>\n                <sp-action-button id=\"trigger-2\" hold-affordance>\n                    <sp-icon-polygon-select\n                        slot=\"icon\"\n                    ></sp-icon-polygon-select>\n                </sp-action-button>\n                <sp-action-button id=\"trigger-3\" hold-affordance>\n                    <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n                </sp-action-button>\n            </sp-action-group>\n        </sp-popover>\n        <sp-overlay ?delayed=${delayed} trigger=\"trigger-1@hover\">\n            <sp-tooltip>Hover</sp-tooltip>\n        </sp-overlay>\n        <sp-overlay\n            trigger=\"trigger-1@longpress\"\n            type=\"auto\"\n            placement=\"right-start\"\n            .offset=${popoverOffset}\n        >\n            <sp-popover tip>\n                <sp-action-group vertical quiet>\n                    <sp-action-button>\n                        <sp-icon-anchor-select\n                            slot=\"icon\"\n                        ></sp-icon-anchor-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-polygon-select\n                            slot=\"icon\"\n                        ></sp-icon-polygon-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n                    </sp-action-button>\n                </sp-action-group>\n            </sp-popover>\n        </sp-overlay>\n        <sp-overlay ?delayed=${delayed} trigger=\"trigger-2@hover\">\n            <sp-tooltip>Hover</sp-tooltip>\n        </sp-overlay>\n        <sp-overlay\n            trigger=\"trigger-2@longpress\"\n            type=\"auto\"\n            placement=\"right-start\"\n            .offset=${popoverOffset}\n        >\n            <sp-popover tip>\n                <sp-action-group vertical quiet>\n                    <sp-action-button>\n                        <sp-icon-anchor-select\n                            slot=\"icon\"\n                        ></sp-icon-anchor-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-polygon-select\n                            slot=\"icon\"\n                        ></sp-icon-polygon-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n                    </sp-action-button>\n                </sp-action-group>\n            </sp-popover>\n        </sp-overlay>\n        <sp-overlay ?delayed=${delayed} trigger=\"trigger-3@hover\">\n            <sp-tooltip>Hover</sp-tooltip>\n        </sp-overlay>\n        <sp-overlay\n            trigger=\"trigger-3@longpress\"\n            type=\"auto\"\n            placement=\"right-start\"\n            .offset=${popoverOffset}\n        >\n            <sp-popover tip>\n                <sp-action-group vertical quiet>\n                    <sp-action-button>\n                        <sp-icon-anchor-select\n                            slot=\"icon\"\n                        ></sp-icon-anchor-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-polygon-select\n                            slot=\"icon\"\n                        ></sp-icon-polygon-select>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n                    </sp-action-button>\n                </sp-action-group>\n            </sp-popover>\n        </sp-overlay>\n    `;\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/stories/overlay.stories.js

@@ -154,7 +154,7 @@ const template = ({
                             placement="bottom"
                             tip
                         >
-                            <sp-dialog size="s" no-divder>
+                            <sp-dialog size="s" no-divider>
                                 Another Popover
                             </sp-dialog>
                         </sp-popover>
@@ -203,7 +203,7 @@ export const accordion = () => {
                 slot="click-content"
                 style="overflow-y: scroll;position: static;"
             >
-                <sp-dialog size="s" no-divder>
+                <sp-dialog size="s" no-divider>
                     <sp-accordion allow-multiple>
                         <sp-accordion-item label="Some things">
                             <p>
@@ -449,7 +449,7 @@ export const complexModal = () => {
                 --swc-test-duration: 1ms;
             }
         </style>
-        <overlay-trigger type="modal" placement="none" open="click">
+        <overlay-trigger type="modal" open="click">
             <sp-dialog-wrapper
                 slot="click-content"
                 headline="Dialog title"
@@ -497,7 +497,7 @@ export const deep = () => html`
             Open popover 1 with buttons + selfmanaged Tooltips
         </sp-button>
         <sp-popover slot="click-content" direction="bottom" tip>
-            <sp-dialog size="s" no-divder>
+            <sp-dialog size="s" no-divider>
                 <sp-action-button>
                     <sp-tooltip self-managed placement="bottom" offset="0">
                         My Tooltip 1
@@ -519,7 +519,7 @@ export const deep = () => html`
             Open popover 2 with buttons without ToolTips
         </sp-button>
         <sp-popover slot="click-content" direction="bottom" tip>
-            <sp-dialog size="s" no-divder>
+            <sp-dialog size="s" no-divider>
                 <sp-action-button>X</sp-action-button>
                 <sp-action-button>Y</sp-action-button>
             </sp-dialog>
@@ -529,6 +529,36 @@ export const deep = () => html`
 deep.swc_vrt = {
   skip: true
 };
+export const deepChildTooltip = () => html`
+    <overlay-trigger>
+        <sp-button variant="primary" slot="trigger">Open popover</sp-button>
+        <sp-popover slot="click-content" direction="bottom" tip>
+            <sp-dialog no-divider>
+                <p>Let us open another overlay here</p>
+                <overlay-trigger>
+                    <sp-button variant="primary" slot="trigger">
+                        Open sub popover
+                    </sp-button>
+                    <sp-popover slot="click-content" direction="bottom" tip>
+                        <sp-dialog no-divider>
+                            <p>
+                                Render an action button with tooltips. Clicking
+                                the action button shouldn't close everything
+                            </p>
+                            <sp-action-button>
+                                Button with self-managed tooltip
+                                <sp-tooltip self-managed placement="top">
+                                    Deep Child ToolTip
+                                </sp-tooltip>
+                            </sp-action-button>
+                            <sp-action-button>Just a button</sp-action-button>
+                        </sp-dialog>
+                    </sp-popover>
+                </overlay-trigger>
+            </sp-dialog>
+        </sp-popover>
+    </overlay-trigger>
+`;
 export const deepNesting = () => {
   const color = window.__swc_hack_knobs__.defaultColor;
   const outter = color === "light" ? "dark" : "light";
@@ -626,7 +656,7 @@ export const definedOverlayElement = () => {
         <overlay-trigger placement="bottom" type="modal">
             <sp-button variant="primary" slot="trigger">Open popover</sp-button>
             <sp-popover slot="click-content" direction="bottom">
-                <sp-dialog no-divder>
+                <sp-dialog no-divider>
                     <popover-content></popover-content>
                 </sp-dialog>
             </sp-popover>
@@ -808,7 +838,7 @@ export const longpress = () => {
 export const modalLoose = () => {
   const closeEvent = new Event("close", { bubbles: true, composed: true });
   return html`
-        <overlay-trigger type="modal" placement="none">
+        <overlay-trigger type="modal">
             <sp-button slot="trigger">Open</sp-button>
             <sp-dialog
                 size="s"
@@ -838,7 +868,7 @@ export const modalLoose = () => {
 export const modalManaged = () => {
   const closeEvent = new Event("close", { bubbles: true, composed: true });
   return html`
-        <overlay-trigger type="modal" placement="none">
+        <overlay-trigger type="modal">
             <sp-button slot="trigger">Open</sp-button>
             <sp-dialog-wrapper
                 underlay
@@ -878,13 +908,13 @@ export const modalWithinNonModal = () => {
                 Open inline overlay
             </sp-button>
             <sp-popover slot="click-content">
-                <sp-dialog size="s" no-divder>
+                <sp-dialog size="s" no-divider>
                     <overlay-trigger type="modal">
                         <sp-button variant="primary" slot="trigger">
                             Open modal overlay
                         </sp-button>
                         <sp-popover slot="click-content">
-                            <sp-dialog size="s" no-divder>
+                            <sp-dialog size="s" no-divider>
                                 Modal overlay
                             </sp-dialog>
                         </sp-popover>
@@ -967,7 +997,7 @@ export const sideHoverDraggable = () => {
 };
 export const superComplexModal = () => {
   return html`
-        <overlay-trigger type="modal" placement="none">
+        <overlay-trigger type="modal">
             <sp-button slot="trigger" variant="accent">Toggle Dialog</sp-button>
             <sp-popover slot="click-content">
                 <sp-dialog size="s">
@@ -1030,7 +1060,7 @@ export const updated = () => {
                     Click to open popover
                 </sp-tooltip>
                 <sp-popover slot="click-content" position="bottom" tip>
-                    <sp-dialog size="s" no-divder>
+                    <sp-dialog size="s" no-divider>
                         <sp-slider
                             value="5"
                             step="0.5"
@@ -1048,7 +1078,7 @@ export const updated = () => {
                                 placement="bottom"
                                 tip
                             >
-                                <sp-dialog size="s" no-divder>
+                                <sp-dialog size="s" no-divider>
                                     Another Popover
                                 </sp-dialog>
                             </sp-popover>
@@ -1080,7 +1110,7 @@ export const updating = () => {
                 Open inline overlay
             </sp-button>
             <sp-popover slot="click-content">
-                <sp-dialog size="s" no-divder>
+                <sp-dialog size="s" no-divider>
                     <sp-button variant="primary" @click=${update}>
                         Update trigger location.
                     </sp-button>
@@ -1218,7 +1248,8 @@ export const virtualElement = (args) => {
       trigger: virtualTrigger,
       placement: args.placement,
       offset: 0,
-      notImmediatelyClosable: true
+      notImmediatelyClosable: true,
+      type: "auto"
     });
     trigger.insertAdjacentElement("afterend", overlay);
   };