@spectrum-web-components/overlay 0.41.0 → 0.41.2

package/stories/overlay-directive.stories.js

@@ -0,0 +1,203 @@
+"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"]
+      }
+    }
+  },
+  args: {
+    placement: "bottom",
+    offset: 0,
+    colorStop: "light",
+    triggerOn: "click"
+  }
+};
+const template = ({
+  placement,
+  offset,
+  triggerOn,
+  insertionOptions
+}) => {
+  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, {
+    triggerInteraction: triggerOn,
+    overlayOptions: {
+      placement,
+      offset
+    },
+    insertionOptions
+  })}
+        >
+            Show Popover
+        </sp-button>
+    `;
+};
+export const Default = (args) => template(args);
+Default.swc_vrt = {
+  skip: true
+};
+export const elsewhere = (args = {}) => html`
+    ${template(args)}
+    <div id="other-element"></div>
+`;
+elsewhere.args = {
+  insertionOptions: {
+    el: () => document.querySelector("#other-element"),
+    where: "afterbegin"
+  }
+};
+elsewhere.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    },\n    args: {\n        placement: 'bottom',\n        offset: 0,\n        colorStop: 'light',\n        triggerOn: 'click',\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}\n\nconst template = ({\n    placement,\n    offset,\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                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 = (args: Properties): TemplateResult => template(args);\n\nDefault.swc_vrt = {\n    skip: true,\n};\n\nexport const elsewhere = (args: Properties = {}): TemplateResult => html`\n    ${template(args)}\n    <div id=\"other-element\"></div>\n`;\n\nelsewhere.args = {\n    insertionOptions: {\n        el: () => document.querySelector('#other-element'),\n        where: 'afterbegin',\n    },\n} as Properties;\n\nelsewhere.swc_vrt = {\n    skip: true,\n};\n"],
+  "mappings": "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",
+  "names": []
+}

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",
@@ -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 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\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.stories.js

@@ -144,6 +144,7 @@ const template = ({
                         min="0"
                         max="20"
                         label="Awesomeness"
+                        default-value="10"
                     ></sp-slider>
                     <div id="styled-div">
                         The background of this div should be blue
@@ -160,15 +161,14 @@ const template = ({
                             </sp-dialog>
                         </sp-popover>
 
-                            <sp-tooltip
-                                slot="hover-content"
-                                delayed
-                                tip="bottom"
-                            >
-                                Click to open another popover.
-                            </sp-tooltip>
-                        </overlay-trigger>
-                    </div>
+                        <sp-tooltip
+                            slot="hover-content"
+                            delayed
+                            tip="bottom"
+                        >
+                            Click to open another popover.
+                        </sp-tooltip>
+                    </overlay-trigger>
                 </sp-dialog>
             </sp-popover>
             <sp-tooltip