@spectrum-web-components/overlay 0.35.0 → 0.35.1-rc.24

package/src/overlay.css.js

@@ -0,0 +1,6 @@
+"use strict";import{css as o}from"@spectrum-web-components/base";const e=o`
+:host{--swc-overlay-animation-distance:var(
+--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)
+);--mod-popover-pointer-width:var(--spectrum-popover-pointer-width);--mod-popover-pointer-height:var(--spectrum-popover-pointer-width);display:contents;pointer-events:none}.dialog{--sp-overlay-open:true;background:none;border:0;box-sizing:border-box;display:flex;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}:host(:not([open])) .dialog{--sp-overlay-open:false}.dialog:not([is-visible]){translate:-999em -999em!important}.dialog:focus{outline:none}.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}.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 e;
+//# 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);--mod-popover-pointer-width:var(--spectrum-popover-pointer-width);--mod-popover-pointer-height:var(--spectrum-popover-pointer-width);display:contents;pointer-events:none}.dialog{--sp-overlay-open:true;background:none;border:0;box-sizing:border-box;display:flex;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}:host(:not([open])) .dialog{--sp-overlay-open:false}.dialog:not([is-visible]){translate:-999em -999em!important}.dialog:focus{outline:none}.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}.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,84 @@
+"use strict";
+import { getContainingBlock, getWindow } from "@floating-ui/utils/dom";
+export const topLayerOverTransforms = () => ({
+  name: "topLayer",
+  async fn(middlewareArguments) {
+    const {
+      x,
+      y,
+      elements: { reference, floating }
+    } = middlewareArguments;
+    let onTopLayer = false;
+    let topLayerIsFloating = 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;
+    if (!onTopLayer) {
+      const dialogAncestorQueryEvent = new Event(
+        "floating-ui-dialog-test",
+        { composed: true, bubbles: true }
+      );
+      floating.addEventListener(
+        "floating-ui-dialog-test",
+        (event) => {
+          event.composedPath().forEach(
+            (el) => {
+              if (el === floating || el.localName !== "dialog")
+                return;
+              try {
+                onTopLayer = onTopLayer || el.matches(":modal");
+              } catch (error) {
+              }
+            }
+          );
+        },
+        { once: true }
+      );
+      floating.dispatchEvent(dialogAncestorQueryEvent);
+    }
+    let overTransforms = false;
+    const containingBlock = getContainingBlock(reference);
+    if (containingBlock !== null && getWindow(containingBlock) !== containingBlock) {
+      overTransforms = true;
+    }
+    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 { 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            /* c8 ignore next 3 */\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                                // eslint-disable-next-line no-empty\n                                /* c8 ignore next */\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,IAGxD,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;AAAA,cAGlD,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

@@ -0,0 +1,2 @@
+"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

@@ -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 { 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            /* c8 ignore next 3 */\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                                // eslint-disable-next-line no-empty\n                                /* c8 ignore next */\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,CAGxD,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,CAGlD,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

@@ -0,0 +1,243 @@
+"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-group/sp-action-group.js";
+import "@spectrum-web-components/popover/sp-popover.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">
+        <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, -9];
+  return html`
+        <style>
+            sp-popover sp-action-group {
+                padding: var(--spectrum-actiongroup-vertical-spacing-regular);
+            }
+            sp-popover {
+                position: static;
+            }
+        </style>
+        <sp-popover open>
+            <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-group>
+        </sp-popover>
+        <sp-overlay ?delayed=${delayed} trigger="trigger-1@hover">
+            <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">
+            <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">
+            <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>
+    `;
+};
+//# sourceMappingURL=overlay-element.stories.js.map

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

@@ -0,0 +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 = ({ 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-story-components.js

@@ -99,7 +99,7 @@ class OverlayDrag extends LitElement {
     if (!this.targetElement)
       return;
     this.targetElement.addEventListener(
-      "mousedown",
+      "pointerdown",
       (event2) => this.onMouseDown(event2)
     );
     this.resetTargetPosition();
@@ -109,6 +109,7 @@ class OverlayDrag extends LitElement {
     const parent = target.parentElement;
     if (!parent)
       return;
+    target.setPointerCapture(event.pointerId);
     const max = {
       x: parent.offsetWidth - target.offsetWidth,
       y: parent.offsetHeight - target.offsetHeight
@@ -134,12 +135,13 @@ class OverlayDrag extends LitElement {
       this.top = Math.min(Math.max(newPosition.y, 0), max.y);
       Overlay.update();
     };
-    const onMouseUp = () => {
-      document.removeEventListener("mousemove", onMouseMove);
-      document.removeEventListener("mouseup", onMouseUp);
+    const onMouseUp = (event2) => {
+      target.setPointerCapture(event2.pointerId);
+      document.removeEventListener("pointermove", onMouseMove);
+      document.removeEventListener("pointerup", onMouseUp);
     };
-    document.addEventListener("mousemove", onMouseMove);
-    document.addEventListener("mouseup", onMouseUp);
+    document.addEventListener("pointermove", onMouseMove);
+    document.addEventListener("pointerup", onMouseUp);
   }
   resetTargetPosition() {
     if (!this.targetElement)
@@ -256,7 +258,6 @@ class RecursivePopover extends LitElement {
                     slot="click-content"
                     direction="${this.placement}"
                     tip
-                    open
                 >
                     <sp-dialog size="s" no-divider>
                         ${this.depth < MAX_DEPTH ? html`
@@ -287,7 +288,7 @@ customElements.define("recursive-popover", RecursivePopover);
 export class PopoverContent extends LitElement {
   render() {
     return html`
-            <overlay-trigger>
+            <overlay-trigger type="modal" placement="bottom">
                 <sp-button slot="trigger">Open me</sp-button>
                 <sp-popover slot="click-content" direction="bottom">
                     <sp-dialog no-divider>

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

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