@spectrum-web-components/overlay 0.36.0 → 0.38.0

package/stories/overlay-element.stories.js

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

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

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

package/stories/overlay-story-components.js

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