@spectrum-web-components/overlay 0.41.1 → 0.42.0

package/src/slottable-request-directive.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["slottable-request-directive.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 {\n    ElementPart,\n    nothing,\n    render,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { AsyncDirective, directive } from 'lit/async-directive.js';\nimport {\n    removeSlottableRequest,\n    SlottableRequestEvent,\n} from './slottable-request-event.js';\n\nexport class SlottableRequestDirective extends AsyncDirective {\n    protected template!: () => TemplateResult;\n    protected target!: HTMLElement;\n    private renderBefore: HTMLElement | undefined;\n    protected listenerHost!: HTMLElement;\n    protected listeners!: AbortController;\n\n    /* c8 ignore next 9 */\n    render(_template: () => TemplateResult): unknown {\n        // render function here just defines the interface to the update call later\n        // we don't have anything to render since this is intended to be an ElementPart directive\n        // so will be used on an element and is not itself rendered\n        return nothing;\n    }\n\n    override update(\n        part: ElementPart,\n        [template]: Parameters<this['render']>\n    ): void {\n        this.template = template;\n        if (this.target !== part.element) {\n            this.target = part.element as HTMLElement;\n            this.renderBefore = this.target.children[0] as HTMLElement;\n        }\n        this.listenerHost = this.target;\n        this.init();\n    }\n\n    handleSlottableRequest(event: SlottableRequestEvent): void {\n        /* c8 ignore next 1 */\n        if (event.target !== event.currentTarget) return;\n\n        const willRemoveSlottable = event.data === removeSlottableRequest;\n\n        render(willRemoveSlottable ? undefined : this.template(), this.target, {\n            renderBefore: this.renderBefore,\n        });\n    }\n\n    init(): void {\n        this.listeners?.abort();\n        this.listeners = new AbortController();\n        const { signal } = this.listeners;\n        this.listenerHost.addEventListener(\n            'slottable-request',\n            (event: Event) =>\n                this.handleSlottableRequest(event as SlottableRequestEvent),\n            { signal }\n        );\n\n        if (window.__swc.DEBUG) {\n            window.__swc.warn(\n                undefined,\n                `\u26A0\uFE0F  WARNING \u26A0\uFE0F : The Overlay Trigger Directive is experimental and there is no guarantees behind its usage in an application!! Its API and presence within the library could be changed at anytime. See \"sp-overlay\" or \"Overlay.open()\" for a stable API for overlaying content on your application.`,\n                'https://opensource.adobe.com/spectrum-web-components/components/overlay',\n                {\n                    level: 'high',\n                    type: 'api',\n                }\n            );\n        }\n    }\n\n    override disconnected(): void {\n        this.listeners.abort();\n    }\n\n    /* c8 ignore next 3 */\n    override reconnected(): void {\n        this.init();\n    }\n}\n\nexport const slottableRequest = directive(SlottableRequestDirective);\n"],
+  "mappings": "aAWA,OAEI,WAAAA,EACA,UAAAC,MAEG,gCACP,OAAS,kBAAAC,EAAgB,aAAAC,MAAiB,yBAC1C,OACI,0BAAAC,MAEG,+BAEA,aAAM,kCAAkCF,CAAe,CAQ1D,OAAOG,EAA0C,CAI7C,OAAOL,CACX,CAES,OACLM,EACA,CAACC,CAAQ,EACL,CACJ,KAAK,SAAWA,EACZ,KAAK,SAAWD,EAAK,UACrB,KAAK,OAASA,EAAK,QACnB,KAAK,aAAe,KAAK,OAAO,SAAS,CAAC,GAE9C,KAAK,aAAe,KAAK,OACzB,KAAK,KAAK,CACd,CAEA,uBAAuBE,EAAoC,CAEvD,GAAIA,EAAM,SAAWA,EAAM,cAAe,OAE1C,MAAMC,EAAsBD,EAAM,OAASJ,EAE3CH,EAAOQ,EAAsB,OAAY,KAAK,SAAS,EAAG,KAAK,OAAQ,CACnE,aAAc,KAAK,YACvB,CAAC,CACL,CAEA,MAAa,CA9DjB,IAAAC,GA+DQA,EAAA,KAAK,YAAL,MAAAA,EAAgB,QAChB,KAAK,UAAY,IAAI,gBACrB,KAAM,CAAE,OAAAC,CAAO,EAAI,KAAK,UACxB,KAAK,aAAa,iBACd,oBACCH,GACG,KAAK,uBAAuBA,CAA8B,EAC9D,CAAE,OAAAG,CAAO,CACb,CAaJ,CAES,cAAqB,CAC1B,KAAK,UAAU,MAAM,CACzB,CAGS,aAAoB,CACzB,KAAK,KAAK,CACd,CACJ,CAEO,aAAM,iBAAmBR,EAAU,yBAAyB",
+  "names": ["nothing", "render", "AsyncDirective", "directive", "removeSlottableRequest", "_template", "part", "template", "event", "willRemoveSlottable", "_a", "signal"]
+}

package/src/slottable-request-event.d.ts

@@ -0,0 +1,12 @@
+export declare class SlottableRequestEvent extends Event {
+    readonly data: unknown;
+    readonly name: string;
+    readonly slotName: string;
+    constructor(name: string, data: unknown, key?: string);
+}
+export declare const removeSlottableRequest: unique symbol;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'slottable-request': SlottableRequestEvent;
+    }
+}

package/src/slottable-request-event.dev.js

@@ -0,0 +1,28 @@
+"use strict";
+export class SlottableRequestEvent extends Event {
+  constructor(name, data, key) {
+    super("slottable-request", {
+      bubbles: false,
+      cancelable: true,
+      composed: false
+    });
+    this.name = name;
+    this.data = data;
+    this.slotName = key !== void 0 ? `${name}.${key}` : name;
+    if (true) {
+      window.__swc.warn(
+        void 0,
+        `\u26A0\uFE0F  WARNING \u26A0\uFE0F : \`slottable-request\` events are experimental and there is no guarantees behind usage of them in an application!! Their shape and presence within the library could be changed at anytime.
+                
+Learn more about the protocol these events are based on below:`,
+        "https://github.com/webcomponents-cg/community-protocols/pull/45",
+        {
+          level: "high",
+          type: "api"
+        }
+      );
+    }
+  }
+}
+export const removeSlottableRequest = Symbol("remove-slottable-request");
+//# sourceMappingURL=slottable-request-event.dev.js.map

package/src/slottable-request-event.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["slottable-request-event.ts"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\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\nexport class SlottableRequestEvent extends Event {\n    readonly data: unknown;\n    readonly name: string;\n    readonly slotName: string;\n    constructor(name: string, data: unknown, key?: string) {\n        super('slottable-request', {\n            bubbles: false,\n            cancelable: true,\n            composed: false,\n        });\n        this.name = name;\n        this.data = data;\n        this.slotName = key !== undefined ? `${name}.${key}` : name;\n        if (window.__swc.DEBUG) {\n            window.__swc.warn(\n                undefined,\n                `\u26A0\uFE0F  WARNING \u26A0\uFE0F : \\`slottable-request\\` events are experimental and there is no guarantees behind usage of them in an application!! Their shape and presence within the library could be changed at anytime.\n                \nLearn more about the protocol these events are based on below:`,\n                'https://github.com/webcomponents-cg/community-protocols/pull/45',\n                {\n                    level: 'high',\n                    type: 'api',\n                }\n            );\n        }\n    }\n}\n\nexport const removeSlottableRequest = Symbol('remove-slottable-request');\n\ndeclare global {\n    interface GlobalEventHandlersEventMap {\n        'slottable-request': SlottableRequestEvent;\n    }\n}\n"],
+  "mappings": ";AAWO,aAAM,8BAA8B,MAAM;AAAA,EAI7C,YAAY,MAAc,MAAe,KAAc;AACnD,UAAM,qBAAqB;AAAA,MACvB,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,UAAU;AAAA,IACd,CAAC;AACD,SAAK,OAAO;AACZ,SAAK,OAAO;AACZ,SAAK,WAAW,QAAQ,SAAY,GAAG,IAAI,IAAI,GAAG,KAAK;AACvD,QAAI,MAAoB;AACpB,aAAO,MAAM;AAAA,QACT;AAAA,QACA;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,UACI,OAAO;AAAA,UACP,MAAM;AAAA,QACV;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ;AACJ;AAEO,aAAM,yBAAyB,OAAO,0BAA0B;",
+  "names": []
+}

package/src/slottable-request-event.js

@@ -0,0 +1,2 @@
+"use strict";export class SlottableRequestEvent extends Event{constructor(e,n,t){super("slottable-request",{bubbles:!1,cancelable:!0,composed:!1});this.name=e,this.data=n,this.slotName=t!==void 0?`${e}.${t}`:e}}export const removeSlottableRequest=Symbol("remove-slottable-request");
+//# sourceMappingURL=slottable-request-event.js.map

package/src/slottable-request-event.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["slottable-request-event.ts"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\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\nexport class SlottableRequestEvent extends Event {\n    readonly data: unknown;\n    readonly name: string;\n    readonly slotName: string;\n    constructor(name: string, data: unknown, key?: string) {\n        super('slottable-request', {\n            bubbles: false,\n            cancelable: true,\n            composed: false,\n        });\n        this.name = name;\n        this.data = data;\n        this.slotName = key !== undefined ? `${name}.${key}` : name;\n        if (window.__swc.DEBUG) {\n            window.__swc.warn(\n                undefined,\n                `\u26A0\uFE0F  WARNING \u26A0\uFE0F : \\`slottable-request\\` events are experimental and there is no guarantees behind usage of them in an application!! Their shape and presence within the library could be changed at anytime.\n                \nLearn more about the protocol these events are based on below:`,\n                'https://github.com/webcomponents-cg/community-protocols/pull/45',\n                {\n                    level: 'high',\n                    type: 'api',\n                }\n            );\n        }\n    }\n}\n\nexport const removeSlottableRequest = Symbol('remove-slottable-request');\n\ndeclare global {\n    interface GlobalEventHandlersEventMap {\n        'slottable-request': SlottableRequestEvent;\n    }\n}\n"],
+  "mappings": "aAWO,aAAM,8BAA8B,KAAM,CAI7C,YAAYA,EAAcC,EAAeC,EAAc,CACnD,MAAM,oBAAqB,CACvB,QAAS,GACT,WAAY,GACZ,SAAU,EACd,CAAC,EACD,KAAK,KAAOF,EACZ,KAAK,KAAOC,EACZ,KAAK,SAAWC,IAAQ,OAAY,GAAGF,CAAI,IAAIE,CAAG,GAAKF,CAc3D,CACJ,CAEO,aAAM,uBAAyB,OAAO,0BAA0B",
+  "names": ["name", "data", "key"]
+}

package/stories/overlay-directive.stories.js

@@ -0,0 +1,232 @@
+"use strict";
+import { html } from "@spectrum-web-components/base";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import "@spectrum-web-components/action-group/sp-action-group.js";
+import "@spectrum-web-components/button/sp-button.js";
+import "@spectrum-web-components/dialog/sp-dialog-wrapper.js";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-open-in.js";
+import "@spectrum-web-components/overlay/overlay-trigger.js";
+import {
+  trigger
+} from "@spectrum-web-components/overlay/src/overlay-trigger-directive.js";
+import "@spectrum-web-components/dialog/sp-dialog.js";
+import "@spectrum-web-components/picker/sp-picker.js";
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/menu/sp-menu-divider.js";
+import "@spectrum-web-components/popover/sp-popover.js";
+import "@spectrum-web-components/slider/sp-slider.js";
+import "@spectrum-web-components/radio/sp-radio.js";
+import "@spectrum-web-components/radio/sp-radio-group.js";
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
+import "@spectrum-web-components/theme/sp-theme.js";
+import "@spectrum-web-components/theme/src/themes.js";
+import "@spectrum-web-components/accordion/sp-accordion.js";
+import "@spectrum-web-components/accordion/sp-accordion-item.js";
+import "../../../projects/story-decorator/src/types.js";
+import "./overlay-story-components.js";
+import { tooltip } from "@spectrum-web-components/tooltip/src/tooltip-directive.js";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+const storyStyles = html`
+    <style>
+        html,
+        body,
+        #root,
+        #root-inner,
+        sp-story-decorator {
+            height: 100%;
+            margin: 0;
+        }
+
+        sp-story-decorator::part(container) {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            height: 100%;
+            align-items: center;
+            justify-content: center;
+        }
+
+        overlay-trigger {
+            flex: none;
+        }
+
+        #styled-div {
+            background-color: var(--styled-div-background-color, blue);
+            color: white;
+            padding: 4px 10px;
+            margin-bottom: 10px;
+        }
+
+        #inner-trigger {
+            display: inline-block;
+        }
+    </style>
+`;
+export default {
+  title: "Overlay Directive",
+  argTypes: {
+    offset: { control: "number" },
+    placement: {
+      control: {
+        type: "inline-radio",
+        options: [
+          "top",
+          "top-start",
+          "top-end",
+          "bottom",
+          "bottom-start",
+          "bottom-end",
+          "left",
+          "left-start",
+          "left-end",
+          "right",
+          "right-start",
+          "right-end",
+          "auto",
+          "auto-start",
+          "auto-end",
+          "none"
+        ]
+      }
+    },
+    type: {
+      control: {
+        type: "inline-radio",
+        options: ["modal", "replace", "inline"]
+      }
+    },
+    colorStop: {
+      control: {
+        type: "inline-radio",
+        options: ["light", "dark"]
+      }
+    },
+    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"
+      }
+    }
+  },
+  args: {
+    placement: "bottom",
+    offset: 0,
+    colorStop: "light",
+    triggerOn: "click",
+    open: false
+  }
+};
+const template = ({
+  placement,
+  offset,
+  open,
+  triggerOn,
+  insertionOptions: insertionOptions2
+}) => {
+  const renderTooltip = () => html`
+        Click to open a popover.
+    `;
+  const renderPopover = () => html`
+        <sp-popover placement="${ifDefined(placement)}" tip>
+            <sp-dialog no-divider>
+                <div class="options-popover-content">
+                    <sp-slider
+                        value="5"
+                        step="0.5"
+                        min="0"
+                        max="20"
+                        label="Awesomeness"
+                    ></sp-slider>
+                    <div id="styled-div">
+                        The background of this div should be blue
+                    </div>
+                    <sp-button
+                        ${tooltip(
+    () => html`
+                                    Click to open another popover.
+                                `
+  )}
+                        ${trigger(
+    () => html`
+                                <sp-popover placement="bottom" tip open>
+                                    <sp-dialog size="s" no-divider>
+                                        <div class="options-popover-content">
+                                            Another Popover
+                                        </div>
+                                    </sp-dialog>
+                                </sp-popover>
+                            `,
+    {
+      triggerInteraction: "click",
+      overlayOptions: {
+        placement: "bottom"
+      }
+    }
+  )}
+                    >
+                        Press Me
+                    </sp-button>
+                </div>
+            </sp-dialog>
+        </sp-popover>
+    `;
+  return html`
+        ${storyStyles}
+        <sp-button
+            variant="primary"
+            ${tooltip(renderTooltip)}
+            ${trigger(renderPopover, {
+    open,
+    triggerInteraction: triggerOn,
+    overlayOptions: {
+      placement,
+      offset
+    },
+    insertionOptions: insertionOptions2
+  })}
+        >
+            Show Popover
+        </sp-button>
+    `;
+};
+export const Default = ({ open } = {}) => {
+  const renderPopover = () => html`
+        <sp-popover>
+            <sp-dialog no-divider>Popover content goes here</sp-dialog>
+        </sp-popover>
+    `;
+  const options = typeof open !== "undefined" ? { open } : void 0;
+  return html`
+        <sp-button ${trigger(renderPopover, options)}>Open Popover</sp-button>
+    `;
+};
+Default.swc_vrt = {
+  skip: true
+};
+export const congifured = (args) => template(args);
+congifured.swc_vrt = {
+  skip: true
+};
+export const insertionOptions = (args = {}) => html`
+    ${template(args)}
+    <div id="other-element"></div>
+`;
+insertionOptions.args = {
+  insertionOptions: {
+    el: () => document.querySelector("#other-element"),
+    where: "afterbegin"
+  }
+};
+insertionOptions.swc_vrt = {
+  skip: true
+};
+//# sourceMappingURL=overlay-directive.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["overlay-directive.stories.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\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 { html, TemplateResult } from '@spectrum-web-components/base';\nimport {\n    OverlayContentTypes,\n    Placement,\n    TriggerInteractions,\n} from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/dialog/sp-dialog-wrapper.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-open-in.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport {\n    InsertionOptions,\n    trigger,\n} from '@spectrum-web-components/overlay/src/overlay-trigger-directive.js';\n\nimport '@spectrum-web-components/dialog/sp-dialog.js';\nimport '@spectrum-web-components/picker/sp-picker.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/slider/sp-slider.js';\nimport '@spectrum-web-components/radio/sp-radio.js';\nimport '@spectrum-web-components/radio/sp-radio-group.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport '@spectrum-web-components/theme/src/themes.js';\nimport '@spectrum-web-components/accordion/sp-accordion.js';\nimport '@spectrum-web-components/accordion/sp-accordion-item.js';\nimport '../../../projects/story-decorator/src/types.js';\n\nimport './overlay-story-components.js';\nimport { tooltip } from '@spectrum-web-components/tooltip/src/tooltip-directive.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nconst storyStyles = html`\n    <style>\n        html,\n        body,\n        #root,\n        #root-inner,\n        sp-story-decorator {\n            height: 100%;\n            margin: 0;\n        }\n\n        sp-story-decorator::part(container) {\n            display: flex;\n            flex-direction: column;\n            width: 100%;\n            height: 100%;\n            align-items: center;\n            justify-content: center;\n        }\n\n        overlay-trigger {\n            flex: none;\n        }\n\n        #styled-div {\n            background-color: var(--styled-div-background-color, blue);\n            color: white;\n            padding: 4px 10px;\n            margin-bottom: 10px;\n        }\n\n        #inner-trigger {\n            display: inline-block;\n        }\n    </style>\n`;\n\nexport default {\n    title: 'Overlay Directive',\n    argTypes: {\n        offset: { control: 'number' },\n        placement: {\n            control: {\n                type: 'inline-radio',\n                options: [\n                    'top',\n                    'top-start',\n                    'top-end',\n                    'bottom',\n                    'bottom-start',\n                    'bottom-end',\n                    'left',\n                    'left-start',\n                    'left-end',\n                    'right',\n                    'right-start',\n                    'right-end',\n                    'auto',\n                    'auto-start',\n                    'auto-end',\n                    'none',\n                ],\n            },\n        },\n        type: {\n            control: {\n                type: 'inline-radio',\n                options: ['modal', 'replace', 'inline'],\n            },\n        },\n        colorStop: {\n            control: {\n                type: 'inline-radio',\n                options: ['light', 'dark'],\n            },\n        },\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    },\n    args: {\n        placement: 'bottom',\n        offset: 0,\n        colorStop: 'light',\n        triggerOn: 'click',\n        open: false,\n    },\n};\n\ninterface Properties {\n    placement?: Placement;\n    offset?: number;\n    triggerOn?: OverlayContentTypes;\n    type?: Extract<TriggerInteractions, 'inline' | 'modal' | 'replace'>;\n    insertionOptions?: InsertionOptions;\n    open?: boolean;\n}\n\nconst template = ({\n    placement,\n    offset,\n    open,\n    triggerOn,\n    insertionOptions,\n}: Properties): TemplateResult => {\n    const renderTooltip = (): TemplateResult => html`\n        Click to open a popover.\n    `;\n    const renderPopover = (): TemplateResult => html`\n        <sp-popover placement=\"${ifDefined(placement)}\" tip>\n            <sp-dialog no-divider>\n                <div class=\"options-popover-content\">\n                    <sp-slider\n                        value=\"5\"\n                        step=\"0.5\"\n                        min=\"0\"\n                        max=\"20\"\n                        label=\"Awesomeness\"\n                    ></sp-slider>\n                    <div id=\"styled-div\">\n                        The background of this div should be blue\n                    </div>\n                    <sp-button\n                        ${tooltip(\n                            () =>\n                                html`\n                                    Click to open another popover.\n                                `\n                        )}\n                        ${trigger(\n                            () => html`\n                                <sp-popover placement=\"bottom\" tip open>\n                                    <sp-dialog size=\"s\" no-divider>\n                                        <div class=\"options-popover-content\">\n                                            Another Popover\n                                        </div>\n                                    </sp-dialog>\n                                </sp-popover>\n                            `,\n                            {\n                                triggerInteraction: 'click',\n                                overlayOptions: {\n                                    placement: 'bottom',\n                                },\n                            }\n                        )}\n                    >\n                        Press Me\n                    </sp-button>\n                </div>\n            </sp-dialog>\n        </sp-popover>\n    `;\n    return html`\n        ${storyStyles}\n        <sp-button\n            variant=\"primary\"\n            ${tooltip(renderTooltip)}\n            ${trigger(renderPopover, {\n                open,\n                triggerInteraction: triggerOn,\n                overlayOptions: {\n                    placement,\n                    offset,\n                },\n                insertionOptions: insertionOptions,\n            })}\n        >\n            Show Popover\n        </sp-button>\n    `;\n};\n\nexport const Default = ({ open }: Properties = {}): TemplateResult => {\n    const renderPopover = (): TemplateResult => html`\n        <sp-popover>\n            <sp-dialog no-divider>Popover content goes here</sp-dialog>\n        </sp-popover>\n    `;\n    const options = typeof open !== 'undefined' ? { open } : undefined;\n    return html`\n        <sp-button ${trigger(renderPopover, options)}>Open Popover</sp-button>\n    `;\n};\n\nDefault.swc_vrt = {\n    skip: true,\n};\n\nexport const congifured = (args: Properties): TemplateResult => template(args);\n\ncongifured.swc_vrt = {\n    skip: true,\n};\n\nexport const insertionOptions = (args: Properties = {}): TemplateResult => html`\n    ${template(args)}\n    <div id=\"other-element\"></div>\n`;\n\ninsertionOptions.args = {\n    insertionOptions: {\n        el: () => document.querySelector('#other-element'),\n        where: 'afterbegin',\n    },\n} as Properties;\n\ninsertionOptions.swc_vrt = {\n    skip: true,\n};\n"],
+  "mappings": "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",
+  "names": ["insertionOptions"]
+}

package/stories/overlay-element.stories.js

@@ -1,5 +1,5 @@
 "use strict";
-import { html } from "@spectrum-web-components/base";
+import { html, render } from "@spectrum-web-components/base";
 import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
 import "@spectrum-web-components/dialog/sp-dialog.js";
 import "@spectrum-web-components/overlay/sp-overlay.js";
@@ -12,11 +12,15 @@ import "@spectrum-web-components/menu/sp-menu-item.js";
 import "@spectrum-web-components/menu/sp-menu-divider.js";
 import "@spectrum-web-components/link/sp-link.js";
 import "@spectrum-web-components/tooltip/sp-tooltip.js";
+import "@spectrum-web-components/slider/sp-slider.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";
 import "./overlay-story-components.js";
+import {
+  removeSlottableRequest
+} from "../src/slottable-request-event.js";
 export default {
   title: "Overlay Element",
   component: "sp-overlay",
@@ -301,7 +305,7 @@ export const actionGroup = ({ delayed }) => {
                 <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-action-menu label="More Actions" placement="left">
                     <sp-menu-group id="cms">
                         <span slot="header">cms</span>
                         <sp-menu-item value="updateAllSiteContent">
@@ -511,7 +515,7 @@ export const actionGroupWithFilters = ({
                         Hover
                     </sp-tooltip>
                 </sp-action-button>
-                <sp-action-menu>
+                <sp-action-menu label="More Actions">
                     <sp-menu-group id="cms">
                         <span slot="header">cms</span>
                         <sp-menu-item value="updateAllSiteContent">
@@ -607,4 +611,43 @@ export const transientHover = () => html`
 transientHover.swc_vrt = {
   skip: true
 };
+export const lazyElements = () => {
+  const handleSlottableRequest = (event) => {
+    const template = event.data === removeSlottableRequest ? void 0 : html`
+                      <sp-popover>
+                          <sp-dialog no-divider>
+                              <sp-slider
+                                  value="5"
+                                  step="0.5"
+                                  min="0"
+                                  max="20"
+                                  label="Awesomeness"
+                              ></sp-slider>
+                              <div id="styled-div">
+                                  The background of this div should be blue
+                              </div>
+                              <sp-button>
+                                  Press Me
+                                  <sp-tooltip self-managed delayed>
+                                      Click to open another popover.
+                                  </sp-tooltip>
+                              </sp-button>
+                          </sp-dialog>
+                      </sp-popover>
+                  `;
+    render(template, event.target);
+  };
+  return html`
+        <sp-button id="button">Trigger</sp-button>
+        <sp-overlay
+            placement="bottom"
+            type="auto"
+            trigger="button@click"
+            @slottable-request=${handleSlottableRequest}
+        ></sp-overlay>
+    `;
+};
+lazyElements.swc_vrt = {
+  skip: true
+};
 //# sourceMappingURL=overlay-element.stories.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["overlay-element.stories.ts"],
-  "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport '@spectrum-web-components/dialog/sp-dialog.js';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/link/sp-link.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.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';\nimport './overlay-story-components.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 WrapperStyleType = 'will-change' | 'container-type';\n\ntype Properties = {\n    delayed: boolean;\n    interaction: 'click' | 'hover' | 'longpress';\n    open?: boolean;\n    placement?: Placement;\n    receivesFocus: 'true' | 'false' | 'auto';\n    style?: WrapperStyleType;\n    type?: OverlayTypes;\n};\n\nconst Template = ({\n    interaction,\n    open,\n    placement,\n    type,\n    delayed,\n    style,\n}: Properties): TemplateResult => html`\n    ${style === 'will-change'\n        ? html`\n              <style>\n                  .wrapper {\n                      will-change: transform;\n                  }\n              </style>\n          `\n        : html`\n              <style>\n                  .wrapper {\n                      container-type: size;\n                  }\n              </style>\n          `}\n    <div class=\"wrapper\">\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 ?delayed=${delayed}>\n                <sp-dialog size=\"s\" no-divider>\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-dialog>\n            </sp-popover>\n        </sp-overlay>\n    </div>\n`;\n\nexport const modal = (args: Properties): TemplateResult => Template(args);\nmodal.args = {\n    interaction: 'click',\n    placement: 'right',\n    style: 'will-change',\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    style: 'container-type' as WrapperStyleType,\n    type: 'auto',\n};\n\nexport const hover = (args: Properties): TemplateResult => Template(args);\nhover.args = {\n    interaction: 'hover',\n    placement: 'right',\n    style: 'will-change',\n};\n\nexport const hoverTooltip = ({\n    interaction,\n    open,\n    placement,\n    type,\n}: Properties): TemplateResult => html`\n    <style>\n        .wrapper {\n            will-change: transform;\n        }\n    </style>\n    <div class=\"wrapper\">\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-tooltip>Tooltip goes here.</sp-tooltip>\n        </sp-overlay>\n    </div>\n`;\nhoverTooltip.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    style: 'container-type',\n    type: 'auto',\n};\n\n/**\n * Proxy for fully encapsulated overlay containers that need to\n * pass `focus` into a shadow child element.\n */\nexport const receivesFocus = ({\n    interaction,\n    open,\n    placement,\n    receivesFocus,\n    type,\n}: Properties): TemplateResult => html`\n    <sp-action-button id=\"trigger\">\n        Open the overlay (with focus)\n    </sp-action-button>\n    <sp-overlay\n        ?open=${open}\n        trigger=\"trigger@${interaction}\"\n        type=${ifDefined(type)}\n        placement=${ifDefined(placement)}\n        .receivesFocus=${receivesFocus}\n    >\n        <sp-popover>\n            <sp-dialog size=\"s\" no-divider>\n                <a href=\"https://example.com\">Click Content</a>\n            </sp-dialog>\n        </sp-popover>\n    </sp-overlay>\n`;\nreceivesFocus.args = {\n    interaction: 'click',\n    placement: 'bottom-start',\n    type: 'auto',\n    receivesFocus: 'true',\n} as Properties;\n\nexport const transformed = (args: Properties): TemplateResult => html`\n    <style>\n        .transformed {\n            transform: translateX(-50%);\n            position: absolute;\n            inset: auto;\n            inset-inline-start: 200px;\n            inset-block-start: 200px;\n            inline-size: 100px;\n            block-size: 50px;\n        }\n    </style>\n    <div class=\"transformed\">${Template(args)}</div>\n`;\ntransformed.args = {\n    interaction: 'click',\n    placement: 'right',\n    type: 'auto',\n};\n\nexport const contained = (args: Properties): TemplateResult => html`\n    <style>\n        .contained {\n            contain: strict;\n            position: absolute;\n            inset: auto;\n            inset-inline-start: 200px;\n            inset-block-start: 200px;\n            inline-size: 200px;\n            block-size: 50px;\n            padding-block: 75px;\n            padding-inline-start: 300px;\n        }\n    </style>\n    <div class=\"contained\">${Template(args)}</div>\n`;\ncontained.args = {\n    interaction: 'click',\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>\n            <sp-dialog size=\"s\" no-divider>Click content</sp-dialog>\n        </sp-popover>\n    </sp-overlay>\n    <sp-overlay ?delayed=${delayed} trigger=\"trigger@hover\" type=\"hint\">\n        <sp-tooltip>Hover content</sp-tooltip>\n    </sp-overlay>\n    <sp-overlay trigger=\"trigger@longpress\" type=\"auto\" placement=\"right\">\n        <sp-popover>\n            <sp-dialog size=\"s\" no-divider>Longpress content</sp-dialog>\n        </sp-popover>\n    </sp-overlay>\n`;\n\nexport const actionGroup = ({ delayed }: Properties): TemplateResult => {\n    const popoverOffset = [6, -13] as [number, number];\n    return html`\n        <style>\n            sp-popover sp-action-group {\n                padding: calc(\n                        var(--spectrum-actiongroup-vertical-spacing-regular) *\n                            0.75\n                    )\n                    calc(\n                        var(--spectrum-actiongroup-vertical-spacing-regular) / 2\n                    );\n            }\n            .root {\n                inset-inline-end: 0em;\n                inset-block-start: 3em;\n                padding-block-end: 3em;\n            }\n            .root > sp-action-group > sp-action-button,\n            .root > sp-action-group > sp-action-menu {\n                top: 3em;\n                position: relative;\n            }\n        </style>\n        <sp-popover open class=\"root\">\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-menu placement=\"left\">\n                    <sp-menu-group id=\"cms\">\n                        <span slot=\"header\">cms</span>\n                        <sp-menu-item value=\"updateAllSiteContent\">\n                            Update All Content\n                        </sp-menu-item>\n                        <sp-menu-item value=\"refreshAllXDs\">\n                            Refresh All XDs\n                        </sp-menu-item>\n                    </sp-menu-group>\n                    <sp-menu-group id=\"ssg\">\n                        <span slot=\"header\">ssg</span>\n                        <sp-menu-item value=\"clearCache\">\n                            Clear Cache\n                        </sp-menu-item>\n                    </sp-menu-group>\n                    <sp-menu-group id=\"vrt\">\n                        <span slot=\"header\">vrt</span>\n                        <sp-menu-item value=\"vrt-contributions\">\n                            Contributions\n                        </sp-menu-item>\n                        <sp-menu-item value=\"vrt-internal\">\n                            Internal\n                        </sp-menu-item>\n                        <sp-menu-item value=\"vrt-public\">Public</sp-menu-item>\n                        <sp-menu-item value=\"vrt-patterns\">\n                            Patterns\n                        </sp-menu-item>\n                        <sp-menu-item value=\"vrt\">All</sp-menu-item>\n                    </sp-menu-group>\n                    <sp-menu-divider></sp-menu-divider>\n                    <sp-menu-group id=\"misc\">\n                        <sp-menu-item value=\"logout\">Logout</sp-menu-item>\n                    </sp-menu-group>\n                </sp-action-menu>\n            </sp-action-group>\n        </sp-popover>\n        <sp-overlay ?delayed=${delayed} trigger=\"trigger-1@hover\" type=\"hint\">\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\" type=\"hint\">\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\n            ?delayed=${delayed}\n            trigger=\"trigger-3@hover\"\n            type=\"hint\"\n            open\n        >\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\nexport const actionGroupWithFilters = ({\n    delayed,\n}: Properties): TemplateResult => {\n    const popoverOffset = [6, -13] as [number, number];\n    return html`\n        <style>\n            sp-popover sp-action-group {\n                padding: calc(\n                        var(--spectrum-actiongroup-vertical-spacing-regular) *\n                            0.75\n                    )\n                    calc(\n                        var(--spectrum-actiongroup-vertical-spacing-regular) / 2\n                    );\n            }\n            .root {\n                inset-inline-end: 0em;\n                inset-block-start: 3em;\n                padding-block-end: 3em;\n                overflow: hidden;\n            }\n            .root > sp-action-group > sp-action-button,\n            .root > sp-action-group > sp-action-menu {\n                top: 3em;\n                position: relative;\n            }\n            sp-action-button,\n            sp-action-menu {\n                background-image: linear-gradient(\n                    rgba(125, 125, 125, 0.2),\n                    rgba(125, 125, 125, 0.2)\n                );\n                background-blend-mode: multiply;\n                filter: brightness(1) saturate(1);\n            }\n        </style>\n        <p>\n            This story outlines some CSS usage that is not yet covered by the\n            placement calculations within the Overlay API.\n        </p>\n        <sp-popover open class=\"root\">\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-tooltip ?delayed=${delayed} self-managed>\n                        Hover\n                    </sp-tooltip>\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\n                                        slot=\"icon\"\n                                    ></sp-icon-rect-select>\n                                </sp-action-button>\n                            </sp-action-group>\n                        </sp-popover>\n                    </sp-overlay>\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-tooltip ?delayed=${delayed} self-managed>\n                        Hover\n                    </sp-tooltip>\n                </sp-action-button>\n                <sp-action-menu>\n                    <sp-menu-group id=\"cms\">\n                        <span slot=\"header\">cms</span>\n                        <sp-menu-item value=\"updateAllSiteContent\">\n                            Update All Content\n                        </sp-menu-item>\n                        <sp-menu-item value=\"refreshAllXDs\">\n                            Refresh All XDs\n                        </sp-menu-item>\n                    </sp-menu-group>\n                    <sp-menu-group id=\"ssg\">\n                        <span slot=\"header\">ssg</span>\n                        <sp-menu-item value=\"clearCache\">\n                            Clear Cache\n                        </sp-menu-item>\n                    </sp-menu-group>\n                    <sp-menu-group id=\"vrt\">\n                        <span slot=\"header\">vrt</span>\n                        <sp-menu-item value=\"vrt-contributions\">\n                            Contributions\n                        </sp-menu-item>\n                        <sp-menu-item value=\"vrt-internal\">\n                            Internal\n                        </sp-menu-item>\n                        <sp-menu-item value=\"vrt-public\">Public</sp-menu-item>\n                        <sp-menu-item value=\"vrt-patterns\">\n                            Patterns\n                        </sp-menu-item>\n                        <sp-menu-item value=\"vrt\">All</sp-menu-item>\n                    </sp-menu-group>\n                    <sp-menu-divider></sp-menu-divider>\n                    <sp-menu-group id=\"misc\">\n                        <sp-menu-item value=\"logout\">Logout</sp-menu-item>\n                    </sp-menu-group>\n                </sp-action-menu>\n            </sp-action-group>\n        </sp-popover>\n        <sp-overlay ?delayed=${delayed} trigger=\"trigger-2@hover\" type=\"hint\">\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\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\n// Test #3795 in browser\nexport const transientHover = (): TemplateResult => html`\n    <transient-hover></transient-hover>\n`;\ntransientHover.swc_vrt = {\n    skip: true,\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, render, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport '@spectrum-web-components/dialog/sp-dialog.js';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/link/sp-link.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/slider/sp-slider.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';\nimport './overlay-story-components.js';\nimport {\n    removeSlottableRequest,\n    SlottableRequestEvent,\n} from '../src/slottable-request-event.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 WrapperStyleType = 'will-change' | 'container-type';\n\ntype Properties = {\n    delayed: boolean;\n    interaction: 'click' | 'hover' | 'longpress';\n    open?: boolean;\n    placement?: Placement;\n    receivesFocus: 'true' | 'false' | 'auto';\n    style?: WrapperStyleType;\n    type?: OverlayTypes;\n};\n\nconst Template = ({\n    interaction,\n    open,\n    placement,\n    type,\n    delayed,\n    style,\n}: Properties): TemplateResult => html`\n    ${style === 'will-change'\n        ? html`\n              <style>\n                  .wrapper {\n                      will-change: transform;\n                  }\n              </style>\n          `\n        : html`\n              <style>\n                  .wrapper {\n                      container-type: size;\n                  }\n              </style>\n          `}\n    <div class=\"wrapper\">\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 ?delayed=${delayed}>\n                <sp-dialog size=\"s\" no-divider>\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-dialog>\n            </sp-popover>\n        </sp-overlay>\n    </div>\n`;\n\nexport const modal = (args: Properties): TemplateResult => Template(args);\nmodal.args = {\n    interaction: 'click',\n    placement: 'right',\n    style: 'will-change',\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    style: 'container-type' as WrapperStyleType,\n    type: 'auto',\n};\n\nexport const hover = (args: Properties): TemplateResult => Template(args);\nhover.args = {\n    interaction: 'hover',\n    placement: 'right',\n    style: 'will-change',\n};\n\nexport const hoverTooltip = ({\n    interaction,\n    open,\n    placement,\n    type,\n}: Properties): TemplateResult => html`\n    <style>\n        .wrapper {\n            will-change: transform;\n        }\n    </style>\n    <div class=\"wrapper\">\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-tooltip>Tooltip goes here.</sp-tooltip>\n        </sp-overlay>\n    </div>\n`;\nhoverTooltip.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    style: 'container-type',\n    type: 'auto',\n};\n\n/**\n * Proxy for fully encapsulated overlay containers that need to\n * pass `focus` into a shadow child element.\n */\nexport const receivesFocus = ({\n    interaction,\n    open,\n    placement,\n    receivesFocus,\n    type,\n}: Properties): TemplateResult => html`\n    <sp-action-button id=\"trigger\">\n        Open the overlay (with focus)\n    </sp-action-button>\n    <sp-overlay\n        ?open=${open}\n        trigger=\"trigger@${interaction}\"\n        type=${ifDefined(type)}\n        placement=${ifDefined(placement)}\n        .receivesFocus=${receivesFocus}\n    >\n        <sp-popover>\n            <sp-dialog size=\"s\" no-divider>\n                <a href=\"https://example.com\">Click Content</a>\n            </sp-dialog>\n        </sp-popover>\n    </sp-overlay>\n`;\nreceivesFocus.args = {\n    interaction: 'click',\n    placement: 'bottom-start',\n    type: 'auto',\n    receivesFocus: 'true',\n} as Properties;\n\nexport const transformed = (args: Properties): TemplateResult => html`\n    <style>\n        .transformed {\n            transform: translateX(-50%);\n            position: absolute;\n            inset: auto;\n            inset-inline-start: 200px;\n            inset-block-start: 200px;\n            inline-size: 100px;\n            block-size: 50px;\n        }\n    </style>\n    <div class=\"transformed\">${Template(args)}</div>\n`;\ntransformed.args = {\n    interaction: 'click',\n    placement: 'right',\n    type: 'auto',\n};\n\nexport const contained = (args: Properties): TemplateResult => html`\n    <style>\n        .contained {\n            contain: strict;\n            position: absolute;\n            inset: auto;\n            inset-inline-start: 200px;\n            inset-block-start: 200px;\n            inline-size: 200px;\n            block-size: 50px;\n            padding-block: 75px;\n            padding-inline-start: 300px;\n        }\n    </style>\n    <div class=\"contained\">${Template(args)}</div>\n`;\ncontained.args = {\n    interaction: 'click',\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>\n            <sp-dialog size=\"s\" no-divider>Click content</sp-dialog>\n        </sp-popover>\n    </sp-overlay>\n    <sp-overlay ?delayed=${delayed} trigger=\"trigger@hover\" type=\"hint\">\n        <sp-tooltip>Hover content</sp-tooltip>\n    </sp-overlay>\n    <sp-overlay trigger=\"trigger@longpress\" type=\"auto\" placement=\"right\">\n        <sp-popover>\n            <sp-dialog size=\"s\" no-divider>Longpress content</sp-dialog>\n        </sp-popover>\n    </sp-overlay>\n`;\n\nexport const actionGroup = ({ delayed }: Properties): TemplateResult => {\n    const popoverOffset = [6, -13] as [number, number];\n    return html`\n        <style>\n            sp-popover sp-action-group {\n                padding: calc(\n                        var(--spectrum-actiongroup-vertical-spacing-regular) *\n                            0.75\n                    )\n                    calc(\n                        var(--spectrum-actiongroup-vertical-spacing-regular) / 2\n                    );\n            }\n            .root {\n                inset-inline-end: 0em;\n                inset-block-start: 3em;\n                padding-block-end: 3em;\n            }\n            .root > sp-action-group > sp-action-button,\n            .root > sp-action-group > sp-action-menu {\n                top: 3em;\n                position: relative;\n            }\n        </style>\n        <sp-popover open class=\"root\">\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-menu label=\"More Actions\" placement=\"left\">\n                    <sp-menu-group id=\"cms\">\n                        <span slot=\"header\">cms</span>\n                        <sp-menu-item value=\"updateAllSiteContent\">\n                            Update All Content\n                        </sp-menu-item>\n                        <sp-menu-item value=\"refreshAllXDs\">\n                            Refresh All XDs\n                        </sp-menu-item>\n                    </sp-menu-group>\n                    <sp-menu-group id=\"ssg\">\n                        <span slot=\"header\">ssg</span>\n                        <sp-menu-item value=\"clearCache\">\n                            Clear Cache\n                        </sp-menu-item>\n                    </sp-menu-group>\n                    <sp-menu-group id=\"vrt\">\n                        <span slot=\"header\">vrt</span>\n                        <sp-menu-item value=\"vrt-contributions\">\n                            Contributions\n                        </sp-menu-item>\n                        <sp-menu-item value=\"vrt-internal\">\n                            Internal\n                        </sp-menu-item>\n                        <sp-menu-item value=\"vrt-public\">Public</sp-menu-item>\n                        <sp-menu-item value=\"vrt-patterns\">\n                            Patterns\n                        </sp-menu-item>\n                        <sp-menu-item value=\"vrt\">All</sp-menu-item>\n                    </sp-menu-group>\n                    <sp-menu-divider></sp-menu-divider>\n                    <sp-menu-group id=\"misc\">\n                        <sp-menu-item value=\"logout\">Logout</sp-menu-item>\n                    </sp-menu-group>\n                </sp-action-menu>\n            </sp-action-group>\n        </sp-popover>\n        <sp-overlay ?delayed=${delayed} trigger=\"trigger-1@hover\" type=\"hint\">\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\" type=\"hint\">\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\n            ?delayed=${delayed}\n            trigger=\"trigger-3@hover\"\n            type=\"hint\"\n            open\n        >\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\nexport const actionGroupWithFilters = ({\n    delayed,\n}: Properties): TemplateResult => {\n    const popoverOffset = [6, -13] as [number, number];\n    return html`\n        <style>\n            sp-popover sp-action-group {\n                padding: calc(\n                        var(--spectrum-actiongroup-vertical-spacing-regular) *\n                            0.75\n                    )\n                    calc(\n                        var(--spectrum-actiongroup-vertical-spacing-regular) / 2\n                    );\n            }\n            .root {\n                inset-inline-end: 0em;\n                inset-block-start: 3em;\n                padding-block-end: 3em;\n                overflow: hidden;\n            }\n            .root > sp-action-group > sp-action-button,\n            .root > sp-action-group > sp-action-menu {\n                top: 3em;\n                position: relative;\n            }\n            sp-action-button,\n            sp-action-menu {\n                background-image: linear-gradient(\n                    rgba(125, 125, 125, 0.2),\n                    rgba(125, 125, 125, 0.2)\n                );\n                background-blend-mode: multiply;\n                filter: brightness(1) saturate(1);\n            }\n        </style>\n        <p>\n            This story outlines some CSS usage that is not yet covered by the\n            placement calculations within the Overlay API.\n        </p>\n        <sp-popover open class=\"root\">\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-tooltip ?delayed=${delayed} self-managed>\n                        Hover\n                    </sp-tooltip>\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\n                                        slot=\"icon\"\n                                    ></sp-icon-rect-select>\n                                </sp-action-button>\n                            </sp-action-group>\n                        </sp-popover>\n                    </sp-overlay>\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-tooltip ?delayed=${delayed} self-managed>\n                        Hover\n                    </sp-tooltip>\n                </sp-action-button>\n                <sp-action-menu label=\"More Actions\">\n                    <sp-menu-group id=\"cms\">\n                        <span slot=\"header\">cms</span>\n                        <sp-menu-item value=\"updateAllSiteContent\">\n                            Update All Content\n                        </sp-menu-item>\n                        <sp-menu-item value=\"refreshAllXDs\">\n                            Refresh All XDs\n                        </sp-menu-item>\n                    </sp-menu-group>\n                    <sp-menu-group id=\"ssg\">\n                        <span slot=\"header\">ssg</span>\n                        <sp-menu-item value=\"clearCache\">\n                            Clear Cache\n                        </sp-menu-item>\n                    </sp-menu-group>\n                    <sp-menu-group id=\"vrt\">\n                        <span slot=\"header\">vrt</span>\n                        <sp-menu-item value=\"vrt-contributions\">\n                            Contributions\n                        </sp-menu-item>\n                        <sp-menu-item value=\"vrt-internal\">\n                            Internal\n                        </sp-menu-item>\n                        <sp-menu-item value=\"vrt-public\">Public</sp-menu-item>\n                        <sp-menu-item value=\"vrt-patterns\">\n                            Patterns\n                        </sp-menu-item>\n                        <sp-menu-item value=\"vrt\">All</sp-menu-item>\n                    </sp-menu-group>\n                    <sp-menu-divider></sp-menu-divider>\n                    <sp-menu-group id=\"misc\">\n                        <sp-menu-item value=\"logout\">Logout</sp-menu-item>\n                    </sp-menu-group>\n                </sp-action-menu>\n            </sp-action-group>\n        </sp-popover>\n        <sp-overlay ?delayed=${delayed} trigger=\"trigger-2@hover\" type=\"hint\">\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\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\n// Test #3795 in browser\nexport const transientHover = (): TemplateResult => html`\n    <transient-hover></transient-hover>\n`;\ntransientHover.swc_vrt = {\n    skip: true,\n};\n\nexport const lazyElements = (): TemplateResult => {\n    const handleSlottableRequest = (event: SlottableRequestEvent): void => {\n        const template =\n            event.data === removeSlottableRequest\n                ? undefined\n                : html`\n                      <sp-popover>\n                          <sp-dialog no-divider>\n                              <sp-slider\n                                  value=\"5\"\n                                  step=\"0.5\"\n                                  min=\"0\"\n                                  max=\"20\"\n                                  label=\"Awesomeness\"\n                              ></sp-slider>\n                              <div id=\"styled-div\">\n                                  The background of this div should be blue\n                              </div>\n                              <sp-button>\n                                  Press Me\n                                  <sp-tooltip self-managed delayed>\n                                      Click to open another popover.\n                                  </sp-tooltip>\n                              </sp-button>\n                          </sp-dialog>\n                      </sp-popover>\n                  `;\n        render(template, event.target as HTMLElement);\n    };\n    return html`\n        <sp-button id=\"button\">Trigger</sp-button>\n        <sp-overlay\n            placement=\"bottom\"\n            type=\"auto\"\n            trigger=\"button@click\"\n            @slottable-request=${handleSlottableRequest}\n        ></sp-overlay>\n    `;\n};\n\nlazyElements.swc_vrt = {\n    skip: true,\n};\n"],
+  "mappings": "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",
   "names": ["receivesFocus"]
 }

package/stories/overlay-story-components.js

@@ -34,7 +34,7 @@ class OverlayTargetIcon extends LitElement {
             :host {
                 position: absolute;
                 display: block;
-                color: var(--spectrum-global-color-magenta-700);
+                color: var(--spectrum-magenta-900);
                 width: 64px;
                 height: 64px;
                 top: 0;