@spectrum-web-components/overlay 0.36.0 → 0.37.0

package/src/overlay.css.js

@@ -0,0 +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))}}
+`;export default o;
+//# sourceMappingURL=overlay.css.js.map

package/src/overlay.css.js.map

@@ -0,0 +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;"],
+  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA,EAKf,eAAeC",
+  "names": ["css", "styles"]
+}

package/src/topLayerOverTransforms.d.ts

@@ -0,0 +1,2 @@
+import type { Middleware } from '@floating-ui/dom';
+export declare const topLayerOverTransforms: () => Middleware;

package/src/topLayerOverTransforms.dev.js

@@ -0,0 +1,91 @@
+"use strict";
+import {
+  getContainingBlock,
+  getWindow,
+  isContainingBlock
+} from "@floating-ui/utils/dom";
+import { VirtualTrigger } from "./VirtualTrigger.dev.js";
+export const topLayerOverTransforms = () => ({
+  name: "topLayer",
+  async fn(middlewareArguments) {
+    const {
+      x,
+      y,
+      elements: { reference, floating }
+    } = middlewareArguments;
+    let onTopLayer = false;
+    let topLayerIsFloating = false;
+    let withinReference = false;
+    const diffCoords = {
+      x: 0,
+      y: 0
+    };
+    try {
+      onTopLayer = onTopLayer || floating.matches(":popover-open");
+    } catch (error) {
+    }
+    try {
+      onTopLayer = onTopLayer || floating.matches(":open");
+    } catch (error) {
+    }
+    try {
+      onTopLayer = onTopLayer || floating.matches(":modal");
+    } catch (error) {
+    }
+    topLayerIsFloating = onTopLayer;
+    const dialogAncestorQueryEvent = new Event("floating-ui-dialog-test", {
+      composed: true,
+      bubbles: true
+    });
+    floating.addEventListener(
+      "floating-ui-dialog-test",
+      (event) => {
+        event.composedPath().forEach((el) => {
+          withinReference = withinReference || el === reference;
+          if (el === floating || el.localName !== "dialog")
+            return;
+          try {
+            onTopLayer = onTopLayer || el.matches(":modal");
+          } catch (error) {
+          }
+        });
+      },
+      { once: true }
+    );
+    floating.dispatchEvent(dialogAncestorQueryEvent);
+    let overTransforms = false;
+    if (!(reference instanceof VirtualTrigger)) {
+      const root = withinReference ? reference : floating;
+      const containingBlock = isContainingBlock(root) ? root : getContainingBlock(root);
+      if (containingBlock !== null && getWindow(containingBlock) !== containingBlock) {
+        const css = getComputedStyle(containingBlock);
+        overTransforms = css.transform !== "none" || css.filter ? css.filter !== "none" : false;
+      }
+      if (onTopLayer && overTransforms && containingBlock) {
+        const rect = containingBlock.getBoundingClientRect();
+        diffCoords.x = rect.x;
+        diffCoords.y = rect.y;
+      }
+    }
+    if (onTopLayer && topLayerIsFloating) {
+      return {
+        x: x + diffCoords.x,
+        y: y + diffCoords.y,
+        data: diffCoords
+      };
+    }
+    if (onTopLayer) {
+      return {
+        x,
+        y,
+        data: diffCoords
+      };
+    }
+    return {
+      x: x - diffCoords.x,
+      y: y - diffCoords.y,
+      data: diffCoords
+    };
+  }
+});
+//# sourceMappingURL=topLayerOverTransforms.dev.js.map

package/src/topLayerOverTransforms.dev.js.map

@@ -0,0 +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            if (\n                containingBlock !== null &&\n                getWindow(containingBlock) !==\n                    (containingBlock as unknown as Window)\n            ) {\n                const css = getComputedStyle(containingBlock);\n                overTransforms =\n                    css.transform !== 'none' || css.filter\n                        ? css.filter !== 'none'\n                        : false;\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\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,UACI,oBAAoB,QACpB,UAAU,eAAe,MACpB,iBACP;AACE,cAAM,MAAM,iBAAiB,eAAe;AAC5C,yBACI,IAAI,cAAc,UAAU,IAAI,SAC1B,IAAI,WAAW,SACf;AAAA,MACd;AAEA,UAAI,cAAc,kBAAkB,iBAAiB;AACjD,cAAM,OAAO,gBAAgB,sBAAsB;AACnD,mBAAW,IAAI,KAAK;AACpB,mBAAW,IAAI,KAAK;AAAA,MACxB;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

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

package/src/topLayerOverTransforms.js.map

@@ -0,0 +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            if (\n                containingBlock !== null &&\n                getWindow(containingBlock) !==\n                    (containingBlock as unknown as Window)\n            ) {\n                const css = getComputedStyle(containingBlock);\n                overTransforms =\n                    css.transform !== 'none' || css.filter\n                        ? css.filter !== 'none'\n                        : false;\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\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,GACIC,IAAoB,MACpBlB,EAAUkB,CAAe,IACpBA,EACP,CACE,MAAMC,EAAM,iBAAiBD,CAAe,EAC5CF,EACIG,EAAI,YAAc,QAAUA,EAAI,OAC1BA,EAAI,SAAW,OACf,EACd,CAEA,GAAIX,GAAcQ,GAAkBE,EAAiB,CACjD,MAAME,EAAOF,EAAgB,sBAAsB,EACnDP,EAAW,EAAIS,EAAK,EACpBT,EAAW,EAAIS,EAAK,CACxB,CACJ,CAEA,OAAIZ,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", "rect"]
+}

package/stories/overlay-element.stories.js

@@ -0,0 +1,476 @@
+"use strict";
+import { html } from "@spectrum-web-components/base";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.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";
+import "@spectrum-web-components/action-group/sp-action-group.js";
+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/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";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-rect-select.js";
+import { notAgain } from "../../dialog/stories/dialog-base.stories.js";
+export default {
+  title: "Overlay Element",
+  component: "sp-overlay",
+  args: {
+    open: true,
+    delayed: false
+  },
+  argTypes: {
+    open: {
+      name: "open",
+      type: { name: "boolean", required: false },
+      description: "Whether the second accordion item is open.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      },
+      control: {
+        type: "boolean"
+      }
+    },
+    delayed: {
+      name: "delayed",
+      type: { name: "boolean", required: false },
+      description: "Whether the tooltips are delayed.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      },
+      control: {
+        type: "boolean"
+      }
+    }
+  }
+};
+const Template = ({
+  interaction,
+  open,
+  placement,
+  type
+}) => html`
+    <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-popover dialog>
+            <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>
+    </sp-overlay>
+`;
+export const modal = (args) => Template(args);
+modal.args = {
+  interaction: "click",
+  placement: "right",
+  type: "modal"
+};
+export const page = ({
+  interaction,
+  open,
+  placement,
+  type
+}) => html`
+    <sp-action-button id="trigger">Open the overlay</sp-action-button>
+    <sp-overlay
+        ?open=${open}
+        trigger="trigger@${interaction}"
+        type=${ifDefined(type)}
+        placement=${ifDefined(placement)}
+    >
+        ${notAgain()}
+    </sp-overlay>
+`;
+page.args = {
+  interaction: "click",
+  placement: "right",
+  type: "page"
+};
+export const click = (args) => Template(args);
+click.args = {
+  interaction: "click",
+  placement: "right",
+  type: "auto"
+};
+export const hover = (args) => Template(args);
+hover.args = {
+  interaction: "hover",
+  placement: "right"
+};
+export const longpress = (args) => Template(args);
+longpress.args = {
+  interaction: "longpress",
+  placement: "right",
+  type: "auto"
+};
+export const all = ({ delayed }) => html`
+    <sp-action-button id="trigger" hold-affordance>
+        Open the overlay
+    </sp-action-button>
+    <sp-overlay trigger="trigger@click" type="auto" placement="right">
+        <sp-popover dialog>Click content</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-overlay>
+`;
+export const actionGroup = ({ delayed }) => {
+  const popoverOffset = [6, -13];
+  return html`
+        <style>
+            sp-popover sp-action-group {
+                padding: calc(
+                        var(--spectrum-actiongroup-vertical-spacing-regular) *
+                            0.75
+                    )
+                    calc(
+                        var(--spectrum-actiongroup-vertical-spacing-regular) / 2
+                    );
+            }
+            .root {
+                inset-inline-end: 0em;
+                inset-block-start: 3em;
+                padding-block-end: 3em;
+            }
+            .root > sp-action-group > sp-action-button,
+            .root > sp-action-group > sp-action-menu {
+                top: 3em;
+                position: relative;
+            }
+        </style>
+        <sp-popover open class="root">
+            <sp-action-group vertical quiet emphasized selects="single">
+                <sp-action-button id="trigger-1" hold-affordance>
+                    <sp-icon-anchor-select slot="icon"></sp-icon-anchor-select>
+                </sp-action-button>
+                <sp-action-button id="trigger-2" hold-affordance>
+                    <sp-icon-polygon-select
+                        slot="icon"
+                    ></sp-icon-polygon-select>
+                </sp-action-button>
+                <sp-action-button id="trigger-3" hold-affordance>
+                    <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
+                </sp-action-button>
+                <sp-action-menu placement="left">
+                    <sp-menu-group id="cms">
+                        <span slot="header">cms</span>
+                        <sp-menu-item value="updateAllSiteContent">
+                            Update All Content
+                        </sp-menu-item>
+                        <sp-menu-item value="refreshAllXDs">
+                            Refresh All XDs
+                        </sp-menu-item>
+                    </sp-menu-group>
+                    <sp-menu-group id="ssg">
+                        <span slot="header">ssg</span>
+                        <sp-menu-item value="clearCache">
+                            Clear Cache
+                        </sp-menu-item>
+                    </sp-menu-group>
+                    <sp-menu-group id="vrt">
+                        <span slot="header">vrt</span>
+                        <sp-menu-item value="vrt-contributions">
+                            Contributions
+                        </sp-menu-item>
+                        <sp-menu-item value="vrt-internal">
+                            Internal
+                        </sp-menu-item>
+                        <sp-menu-item value="vrt-public">Public</sp-menu-item>
+                        <sp-menu-item value="vrt-patterns">
+                            Patterns
+                        </sp-menu-item>
+                        <sp-menu-item value="vrt">All</sp-menu-item>
+                    </sp-menu-group>
+                    <sp-menu-divider></sp-menu-divider>
+                    <sp-menu-group id="misc">
+                        <sp-menu-item value="logout">Logout</sp-menu-item>
+                    </sp-menu-group>
+                </sp-action-menu>
+            </sp-action-group>
+        </sp-popover>
+        <sp-overlay ?delayed=${delayed} trigger="trigger-1@hover" type="hint">
+            <sp-tooltip>Hover</sp-tooltip>
+        </sp-overlay>
+        <sp-overlay
+            trigger="trigger-1@longpress"
+            type="auto"
+            placement="right-start"
+            .offset=${popoverOffset}
+        >
+            <sp-popover tip>
+                <sp-action-group vertical quiet>
+                    <sp-action-button>
+                        <sp-icon-anchor-select
+                            slot="icon"
+                        ></sp-icon-anchor-select>
+                    </sp-action-button>
+                    <sp-action-button>
+                        <sp-icon-polygon-select
+                            slot="icon"
+                        ></sp-icon-polygon-select>
+                    </sp-action-button>
+                    <sp-action-button>
+                        <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
+                    </sp-action-button>
+                </sp-action-group>
+            </sp-popover>
+        </sp-overlay>
+        <sp-overlay ?delayed=${delayed} trigger="trigger-2@hover" type="hint">
+            <sp-tooltip>Hover</sp-tooltip>
+        </sp-overlay>
+        <sp-overlay
+            trigger="trigger-2@longpress"
+            type="auto"
+            placement="right-start"
+            .offset=${popoverOffset}
+        >
+            <sp-popover tip>
+                <sp-action-group vertical quiet>
+                    <sp-action-button>
+                        <sp-icon-anchor-select
+                            slot="icon"
+                        ></sp-icon-anchor-select>
+                    </sp-action-button>
+                    <sp-action-button>
+                        <sp-icon-polygon-select
+                            slot="icon"
+                        ></sp-icon-polygon-select>
+                    </sp-action-button>
+                    <sp-action-button>
+                        <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
+                    </sp-action-button>
+                </sp-action-group>
+            </sp-popover>
+        </sp-overlay>
+        <sp-overlay
+            ?delayed=${delayed}
+            trigger="trigger-3@hover"
+            type="hint"
+            open
+        >
+            <sp-tooltip>Hover</sp-tooltip>
+        </sp-overlay>
+        <sp-overlay
+            trigger="trigger-3@longpress"
+            type="auto"
+            placement="right-start"
+            .offset=${popoverOffset}
+        >
+            <sp-popover tip>
+                <sp-action-group vertical quiet>
+                    <sp-action-button>
+                        <sp-icon-anchor-select
+                            slot="icon"
+                        ></sp-icon-anchor-select>
+                    </sp-action-button>
+                    <sp-action-button>
+                        <sp-icon-polygon-select
+                            slot="icon"
+                        ></sp-icon-polygon-select>
+                    </sp-action-button>
+                    <sp-action-button>
+                        <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
+                    </sp-action-button>
+                </sp-action-group>
+            </sp-popover>
+        </sp-overlay>
+    `;
+};
+export const actionGroupWithFilters = ({
+  delayed
+}) => {
+  const popoverOffset = [6, -13];
+  return html`
+        <style>
+            sp-popover sp-action-group {
+                padding: calc(
+                        var(--spectrum-actiongroup-vertical-spacing-regular) *
+                            0.75
+                    )
+                    calc(
+                        var(--spectrum-actiongroup-vertical-spacing-regular) / 2
+                    );
+            }
+            .root {
+                inset-inline-end: 0em;
+                inset-block-start: 3em;
+                padding-block-end: 3em;
+                overflow: hidden;
+            }
+            .root > sp-action-group > sp-action-button,
+            .root > sp-action-group > sp-action-menu {
+                top: 3em;
+                position: relative;
+            }
+            sp-action-button,
+            sp-action-menu {
+                background-image: linear-gradient(
+                    rgba(125, 125, 125, 0.2),
+                    rgba(125, 125, 125, 0.2)
+                );
+                background-blend-mode: multiply;
+                filter: brightness(1) saturate(1);
+            }
+        </style>
+        <p>
+            This story outlines some CSS usage that is not yet covered by the
+            placement calculations within the Overlay API.
+        </p>
+        <sp-popover open class="root">
+            <sp-action-group vertical quiet emphasized selects="single">
+                <sp-action-button id="trigger-1" hold-affordance>
+                    <sp-icon-anchor-select slot="icon"></sp-icon-anchor-select>
+                    <sp-tooltip ?delayed=${delayed} self-managed>
+                        Hover
+                    </sp-tooltip>
+                    <sp-overlay
+                        trigger="trigger-1@longpress"
+                        type="auto"
+                        placement="right-start"
+                        .offset=${popoverOffset}
+                    >
+                        <sp-popover tip>
+                            <sp-action-group vertical quiet>
+                                <sp-action-button>
+                                    <sp-icon-anchor-select
+                                        slot="icon"
+                                    ></sp-icon-anchor-select>
+                                </sp-action-button>
+                                <sp-action-button>
+                                    <sp-icon-polygon-select
+                                        slot="icon"
+                                    ></sp-icon-polygon-select>
+                                </sp-action-button>
+                                <sp-action-button>
+                                    <sp-icon-rect-select
+                                        slot="icon"
+                                    ></sp-icon-rect-select>
+                                </sp-action-button>
+                            </sp-action-group>
+                        </sp-popover>
+                    </sp-overlay>
+                </sp-action-button>
+                <sp-action-button id="trigger-2" hold-affordance>
+                    <sp-icon-polygon-select
+                        slot="icon"
+                    ></sp-icon-polygon-select>
+                </sp-action-button>
+                <sp-action-button id="trigger-3" hold-affordance>
+                    <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
+                    <sp-tooltip ?delayed=${delayed} self-managed>
+                        Hover
+                    </sp-tooltip>
+                </sp-action-button>
+                <sp-action-menu>
+                    <sp-menu-group id="cms">
+                        <span slot="header">cms</span>
+                        <sp-menu-item value="updateAllSiteContent">
+                            Update All Content
+                        </sp-menu-item>
+                        <sp-menu-item value="refreshAllXDs">
+                            Refresh All XDs
+                        </sp-menu-item>
+                    </sp-menu-group>
+                    <sp-menu-group id="ssg">
+                        <span slot="header">ssg</span>
+                        <sp-menu-item value="clearCache">
+                            Clear Cache
+                        </sp-menu-item>
+                    </sp-menu-group>
+                    <sp-menu-group id="vrt">
+                        <span slot="header">vrt</span>
+                        <sp-menu-item value="vrt-contributions">
+                            Contributions
+                        </sp-menu-item>
+                        <sp-menu-item value="vrt-internal">
+                            Internal
+                        </sp-menu-item>
+                        <sp-menu-item value="vrt-public">Public</sp-menu-item>
+                        <sp-menu-item value="vrt-patterns">
+                            Patterns
+                        </sp-menu-item>
+                        <sp-menu-item value="vrt">All</sp-menu-item>
+                    </sp-menu-group>
+                    <sp-menu-divider></sp-menu-divider>
+                    <sp-menu-group id="misc">
+                        <sp-menu-item value="logout">Logout</sp-menu-item>
+                    </sp-menu-group>
+                </sp-action-menu>
+            </sp-action-group>
+        </sp-popover>
+        <sp-overlay ?delayed=${delayed} trigger="trigger-2@hover" type="hint">
+            <sp-tooltip>Hover</sp-tooltip>
+        </sp-overlay>
+        <sp-overlay
+            trigger="trigger-2@longpress"
+            type="auto"
+            placement="right-start"
+            .offset=${popoverOffset}
+        >
+            <sp-popover tip>
+                <sp-action-group vertical quiet>
+                    <sp-action-button>
+                        <sp-icon-anchor-select
+                            slot="icon"
+                        ></sp-icon-anchor-select>
+                    </sp-action-button>
+                    <sp-action-button>
+                        <sp-icon-polygon-select
+                            slot="icon"
+                        ></sp-icon-polygon-select>
+                    </sp-action-button>
+                    <sp-action-button>
+                        <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
+                    </sp-action-button>
+                </sp-action-group>
+            </sp-popover>
+        </sp-overlay>
+        <sp-overlay
+            trigger="trigger-3@longpress"
+            type="auto"
+            placement="right-start"
+            .offset=${popoverOffset}
+        >
+            <sp-popover tip>
+                <sp-action-group vertical quiet>
+                    <sp-action-button>
+                        <sp-icon-anchor-select
+                            slot="icon"
+                        ></sp-icon-anchor-select>
+                    </sp-action-button>
+                    <sp-action-button>
+                        <sp-icon-polygon-select
+                            slot="icon"
+                        ></sp-icon-polygon-select>
+                    </sp-action-button>
+                    <sp-action-button>
+                        <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
+                    </sp-action-button>
+                </sp-action-group>
+            </sp-popover>
+        </sp-overlay>
+    `;
+};
+//# sourceMappingURL=overlay-element.stories.js.map