@spectrum-web-components/overlay 0.42.5 → 0.44.0

package/custom-elements.json

@@ -2778,6 +2778,16 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "receivesFocus",
+              "type": {
+                "text": "'true' | 'false' | 'auto'"
+              },
+              "privacy": "public",
+              "default": "'auto'",
+              "attribute": "receives-focus"
+            },
             {
               "kind": "field",
               "name": "clickContent",
@@ -3046,6 +3056,14 @@
               },
               "default": "false",
               "fieldName": "disabled"
+            },
+            {
+              "name": "receives-focus",
+              "type": {
+                "text": "'true' | 'false' | 'auto'"
+              },
+              "default": "'auto'",
+              "fieldName": "receivesFocus"
             }
           ],
           "superclass": {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/overlay",
-    "version": "0.42.5",
+    "version": "0.44.0",
     "publishConfig": {
         "access": "public"
     },
@@ -160,11 +160,11 @@
     "dependencies": {
         "@floating-ui/dom": "^1.6.1",
         "@floating-ui/utils": "^0.2.1",
-        "@spectrum-web-components/action-button": "^0.42.5",
-        "@spectrum-web-components/base": "^0.42.5",
-        "@spectrum-web-components/reactive-controllers": "^0.42.5",
-        "@spectrum-web-components/shared": "^0.42.5",
-        "@spectrum-web-components/theme": "^0.42.5"
+        "@spectrum-web-components/action-button": "^0.44.0",
+        "@spectrum-web-components/base": "^0.44.0",
+        "@spectrum-web-components/reactive-controllers": "^0.44.0",
+        "@spectrum-web-components/shared": "^0.44.0",
+        "@spectrum-web-components/theme": "^0.44.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
@@ -176,5 +176,5 @@
         "./stories/overlay-story-components.js",
         "./**/*.dev.js"
     ],
-    "gitHead": "f29fd737947945de8cd6f5bc03fb389d386c9c3a"
+    "gitHead": "0002d42ce82463b85022e5aa5f7aba8484cba096"
 }

package/src/OverlayTrigger.d.ts

@@ -26,6 +26,7 @@ export declare class OverlayTrigger extends SpectrumElement {
     offset: number;
     open?: OverlayContentTypes;
     disabled: boolean;
+    receivesFocus: 'true' | 'false' | 'auto';
     private clickContent;
     private clickPlacement?;
     private longpressContent;

package/src/OverlayTrigger.dev.js

@@ -25,6 +25,7 @@ export class OverlayTrigger extends SpectrumElement {
     this.content = "click hover longpress";
     this.offset = 6;
     this.disabled = false;
+    this.receivesFocus = "auto";
     this.clickContent = [];
     this.longpressContent = [];
     this.hoverContent = [];
@@ -117,6 +118,7 @@ export class OverlayTrigger extends SpectrumElement {
                 .triggerInteraction=${"click"}
                 .type=${this.type !== "modal" ? "auto" : "modal"}
                 @beforetoggle=${this.handleBeforetoggle}
+                .receivesFocus=${this.receivesFocus}
             >
                 ${slot}
             </sp-overlay>
@@ -139,6 +141,7 @@ export class OverlayTrigger extends SpectrumElement {
                 .triggerInteraction=${"hover"}
                 .type=${"hint"}
                 @beforetoggle=${this.handleBeforetoggle}
+                .receivesFocus=${this.receivesFocus}
             >
                 ${slot}
             </sp-overlay>
@@ -161,6 +164,7 @@ export class OverlayTrigger extends SpectrumElement {
                 .triggerInteraction=${"longpress"}
                 .type=${"auto"}
                 @beforetoggle=${this.handleBeforetoggle}
+                .receivesFocus=${this.receivesFocus}
             >
                 ${slot}
             </sp-overlay>
@@ -212,6 +216,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], OverlayTrigger.prototype, "disabled", 2);
+__decorateClass([
+  property({ attribute: "receives-focus" })
+], OverlayTrigger.prototype, "receivesFocus", 2);
 __decorateClass([
   state()
 ], OverlayTrigger.prototype, "clickContent", 2);

package/src/OverlayTrigger.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["OverlayTrigger.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    property,\n    query,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport type { Placement } from '@floating-ui/dom';\n\nimport type { BeforetoggleOpenEvent } from './events.dev.js'\nimport type { Overlay } from './Overlay.dev.js'\nimport type { OverlayTriggerInteractions } from './overlay-types';\n\nimport overlayTriggerStyles from './overlay-trigger.css.js';\n\nexport type OverlayContentTypes = 'click' | 'hover' | 'longpress';\n\n/**\n * @element overlay-trigger\n *\n * @slot trigger - The content that will trigger the various overlays\n * @slot hover-content - The content that will be displayed on hover\n * @slot click-content - The content that will be displayed on click\n * @slot longpress-content - The content that will be displayed on click\n *\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class OverlayTrigger extends SpectrumElement {\n    public static override get styles(): CSSResultArray {\n        return [overlayTriggerStyles];\n    }\n\n    @property()\n    content = 'click hover longpress';\n\n    /**\n     * @type {\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"}\n     * @attr\n     */\n    @property({ reflect: true })\n    public placement?: Placement;\n\n    @property()\n    public type?: OverlayTriggerInteractions;\n\n    @property({ type: Number })\n    public offset = 6;\n\n    @property({ reflect: true })\n    public open?: OverlayContentTypes;\n\n    @property({ type: Boolean, reflect: true })\n    public disabled = false;\n\n    @state()\n    private clickContent: HTMLElement[] = [];\n\n    private clickPlacement?: Placement;\n\n    @state()\n    private longpressContent: HTMLElement[] = [];\n\n    private longpressPlacement?: Placement;\n\n    @state()\n    private hoverContent: HTMLElement[] = [];\n\n    private hoverPlacement?: Placement;\n\n    @state()\n    private targetContent: HTMLElement[] = [];\n\n    @query('#click-overlay', true)\n    clickOverlayElement!: Overlay;\n\n    @query('#longpress-overlay', true)\n    longpressOverlayElement!: Overlay;\n\n    @query('#hover-overlay', true)\n    hoverOverlayElement!: Overlay;\n\n    private getAssignedElementsFromSlot(slot: HTMLSlotElement): HTMLElement[] {\n        return slot.assignedElements({ flatten: true }) as HTMLElement[];\n    }\n\n    private handleTriggerContent(\n        event: Event & { target: HTMLSlotElement }\n    ): void {\n        this.targetContent = this.getAssignedElementsFromSlot(event.target);\n    }\n\n    private handleSlotContent(\n        event: Event & { target: HTMLSlotElement }\n    ): void {\n        switch (event.target.name) {\n            case 'click-content':\n                this.clickContent = this.getAssignedElementsFromSlot(\n                    event.target\n                );\n                break;\n            case 'longpress-content':\n                this.longpressContent = this.getAssignedElementsFromSlot(\n                    event.target\n                );\n                break;\n            case 'hover-content':\n                this.hoverContent = this.getAssignedElementsFromSlot(\n                    event.target\n                );\n                break;\n        }\n    }\n\n    private handleBeforetoggle(event: BeforetoggleOpenEvent): void {\n        const { target } = event;\n        let type: OverlayContentTypes;\n        if (target === this.clickOverlayElement) {\n            type = 'click';\n        } else if (target === this.longpressOverlayElement) {\n            type = 'longpress';\n        } else if (target === this.hoverOverlayElement) {\n            type = 'hover';\n            /* c8 ignore next 3 */\n        } else {\n            return;\n        }\n        if (event.newState === 'open') {\n            this.open = type;\n        } else if (this.open === type) {\n            this.open = undefined;\n        }\n    }\n\n    protected override update(changes: PropertyValues): void {\n        if (changes.has('clickContent')) {\n            this.clickPlacement =\n                ((this.clickContent[0]?.getAttribute('placement') ||\n                    this.clickContent[0]?.getAttribute(\n                        'direction'\n                    )) as Placement) || undefined;\n        }\n        if (changes.has('hoverContent')) {\n            this.hoverPlacement =\n                ((this.hoverContent[0]?.getAttribute('placement') ||\n                    this.hoverContent[0]?.getAttribute(\n                        'direction'\n                    )) as Placement) || undefined;\n        }\n        if (changes.has('longpressContent')) {\n            this.longpressPlacement =\n                ((this.longpressContent[0]?.getAttribute('placement') ||\n                    this.longpressContent[0]?.getAttribute(\n                        'direction'\n                    )) as Placement) || undefined;\n        }\n        super.update(changes);\n    }\n\n    protected renderSlot(name: string): TemplateResult {\n        return html`\n            <slot name=${name} @slotchange=${this.handleSlotContent}></slot>\n        `;\n    }\n\n    protected renderClickOverlay(): TemplateResult {\n        import('@spectrum-web-components/overlay/sp-overlay.js');\n        const slot = this.renderSlot('click-content');\n        if (!this.clickContent.length) {\n            return slot;\n        }\n        return html`\n            <sp-overlay\n                id=\"click-overlay\"\n                ?disabled=${this.disabled || !this.clickContent.length}\n                ?open=${this.open === 'click' && !!this.clickContent.length}\n                .offset=${this.offset}\n                .placement=${this.clickPlacement || this.placement}\n                .triggerElement=${this.targetContent[0]}\n                .triggerInteraction=${'click'}\n                .type=${this.type !== 'modal' ? 'auto' : 'modal'}\n                @beforetoggle=${this.handleBeforetoggle}\n            >\n                ${slot}\n            </sp-overlay>\n        `;\n    }\n\n    protected renderHoverOverlay(): TemplateResult {\n        import('@spectrum-web-components/overlay/sp-overlay.js');\n        const slot = this.renderSlot('hover-content');\n        if (!this.hoverContent.length) {\n            return slot;\n        }\n        return html`\n            <sp-overlay\n                id=\"hover-overlay\"\n                ?open=${this.open === 'hover' && !!this.hoverContent.length}\n                ?disabled=${this.disabled ||\n                !this.hoverContent.length ||\n                (!!this.open && this.open !== 'hover')}\n                .offset=${this.offset}\n                .placement=${this.hoverPlacement || this.placement}\n                .triggerElement=${this.targetContent[0]}\n                .triggerInteraction=${'hover'}\n                .type=${'hint'}\n                @beforetoggle=${this.handleBeforetoggle}\n            >\n                ${slot}\n            </sp-overlay>\n        `;\n    }\n\n    protected renderLongpressOverlay(): TemplateResult {\n        import('@spectrum-web-components/overlay/sp-overlay.js');\n        const slot = this.renderSlot('longpress-content');\n        if (!this.longpressContent.length) {\n            return slot;\n        }\n        return html`\n            <sp-overlay\n                id=\"longpress-overlay\"\n                ?disabled=${this.disabled || !this.longpressContent.length}\n                ?open=${this.open === 'longpress' &&\n                !!this.longpressContent.length}\n                .offset=${this.offset}\n                .placement=${this.longpressPlacement || this.placement}\n                .triggerElement=${this.targetContent[0]}\n                .triggerInteraction=${'longpress'}\n                .type=${'auto'}\n                @beforetoggle=${this.handleBeforetoggle}\n            >\n                ${slot}\n            </sp-overlay>\n            <slot name=\"longpress-describedby-descriptor\"></slot>\n        `;\n    }\n\n    protected override render(): TemplateResult {\n        const content = this.content.split(' ');\n        // Keyboard event availability documented in README.md\n        /* eslint-disable lit-a11y/click-events-have-key-events */\n        return html`\n            <slot\n                id=\"trigger\"\n                name=\"trigger\"\n                @slotchange=${this.handleTriggerContent}\n            ></slot>\n            ${[\n                content.includes('click') ? this.renderClickOverlay() : html``,\n                content.includes('hover') ? this.renderHoverOverlay() : html``,\n                content.includes('longpress')\n                    ? this.renderLongpressOverlay()\n                    : html``,\n            ]}\n        `;\n        /* eslint-enable lit-a11y/click-events-have-key-events */\n    }\n\n    protected override updated(changes: PropertyValues): void {\n        super.updated(changes);\n        if (this.disabled && changes.has('disabled')) {\n            this.open = undefined;\n            return;\n        }\n    }\n\n    protected override async getUpdateComplete(): Promise<boolean> {\n        const complete = (await super.getUpdateComplete()) as boolean;\n        return complete;\n    }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    property,\n    query,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport type { Placement } from '@floating-ui/dom';\n\nimport type { BeforetoggleOpenEvent } from './events.dev.js'\nimport type { Overlay } from './Overlay.dev.js'\nimport type { OverlayTriggerInteractions } from './overlay-types';\n\nimport overlayTriggerStyles from './overlay-trigger.css.js';\n\nexport type OverlayContentTypes = 'click' | 'hover' | 'longpress';\n\n/**\n * @element overlay-trigger\n *\n * @slot trigger - The content that will trigger the various overlays\n * @slot hover-content - The content that will be displayed on hover\n * @slot click-content - The content that will be displayed on click\n * @slot longpress-content - The content that will be displayed on click\n *\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class OverlayTrigger extends SpectrumElement {\n    public static override get styles(): CSSResultArray {\n        return [overlayTriggerStyles];\n    }\n\n    @property()\n    content = 'click hover longpress';\n\n    /**\n     * @type {\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"}\n     * @attr\n     */\n    @property({ reflect: true })\n    public placement?: Placement;\n\n    @property()\n    public type?: OverlayTriggerInteractions;\n\n    @property({ type: Number })\n    public offset = 6;\n\n    @property({ reflect: true })\n    public open?: OverlayContentTypes;\n\n    @property({ type: Boolean, reflect: true })\n    public disabled = false;\n\n    @property({ attribute: 'receives-focus' })\n    public receivesFocus: 'true' | 'false' | 'auto' = 'auto';\n\n    @state()\n    private clickContent: HTMLElement[] = [];\n\n    private clickPlacement?: Placement;\n\n    @state()\n    private longpressContent: HTMLElement[] = [];\n\n    private longpressPlacement?: Placement;\n\n    @state()\n    private hoverContent: HTMLElement[] = [];\n\n    private hoverPlacement?: Placement;\n\n    @state()\n    private targetContent: HTMLElement[] = [];\n\n    @query('#click-overlay', true)\n    clickOverlayElement!: Overlay;\n\n    @query('#longpress-overlay', true)\n    longpressOverlayElement!: Overlay;\n\n    @query('#hover-overlay', true)\n    hoverOverlayElement!: Overlay;\n\n    private getAssignedElementsFromSlot(slot: HTMLSlotElement): HTMLElement[] {\n        return slot.assignedElements({ flatten: true }) as HTMLElement[];\n    }\n\n    private handleTriggerContent(\n        event: Event & { target: HTMLSlotElement }\n    ): void {\n        this.targetContent = this.getAssignedElementsFromSlot(event.target);\n    }\n\n    private handleSlotContent(\n        event: Event & { target: HTMLSlotElement }\n    ): void {\n        switch (event.target.name) {\n            case 'click-content':\n                this.clickContent = this.getAssignedElementsFromSlot(\n                    event.target\n                );\n                break;\n            case 'longpress-content':\n                this.longpressContent = this.getAssignedElementsFromSlot(\n                    event.target\n                );\n                break;\n            case 'hover-content':\n                this.hoverContent = this.getAssignedElementsFromSlot(\n                    event.target\n                );\n                break;\n        }\n    }\n\n    private handleBeforetoggle(event: BeforetoggleOpenEvent): void {\n        const { target } = event;\n        let type: OverlayContentTypes;\n        if (target === this.clickOverlayElement) {\n            type = 'click';\n        } else if (target === this.longpressOverlayElement) {\n            type = 'longpress';\n        } else if (target === this.hoverOverlayElement) {\n            type = 'hover';\n            /* c8 ignore next 3 */\n        } else {\n            return;\n        }\n        if (event.newState === 'open') {\n            this.open = type;\n        } else if (this.open === type) {\n            this.open = undefined;\n        }\n    }\n\n    protected override update(changes: PropertyValues): void {\n        if (changes.has('clickContent')) {\n            this.clickPlacement =\n                ((this.clickContent[0]?.getAttribute('placement') ||\n                    this.clickContent[0]?.getAttribute(\n                        'direction'\n                    )) as Placement) || undefined;\n        }\n        if (changes.has('hoverContent')) {\n            this.hoverPlacement =\n                ((this.hoverContent[0]?.getAttribute('placement') ||\n                    this.hoverContent[0]?.getAttribute(\n                        'direction'\n                    )) as Placement) || undefined;\n        }\n        if (changes.has('longpressContent')) {\n            this.longpressPlacement =\n                ((this.longpressContent[0]?.getAttribute('placement') ||\n                    this.longpressContent[0]?.getAttribute(\n                        'direction'\n                    )) as Placement) || undefined;\n        }\n        super.update(changes);\n    }\n\n    protected renderSlot(name: string): TemplateResult {\n        return html`\n            <slot name=${name} @slotchange=${this.handleSlotContent}></slot>\n        `;\n    }\n\n    protected renderClickOverlay(): TemplateResult {\n        import('@spectrum-web-components/overlay/sp-overlay.js');\n        const slot = this.renderSlot('click-content');\n        if (!this.clickContent.length) {\n            return slot;\n        }\n        return html`\n            <sp-overlay\n                id=\"click-overlay\"\n                ?disabled=${this.disabled || !this.clickContent.length}\n                ?open=${this.open === 'click' && !!this.clickContent.length}\n                .offset=${this.offset}\n                .placement=${this.clickPlacement || this.placement}\n                .triggerElement=${this.targetContent[0]}\n                .triggerInteraction=${'click'}\n                .type=${this.type !== 'modal' ? 'auto' : 'modal'}\n                @beforetoggle=${this.handleBeforetoggle}\n                .receivesFocus=${this.receivesFocus}\n            >\n                ${slot}\n            </sp-overlay>\n        `;\n    }\n\n    protected renderHoverOverlay(): TemplateResult {\n        import('@spectrum-web-components/overlay/sp-overlay.js');\n        const slot = this.renderSlot('hover-content');\n        if (!this.hoverContent.length) {\n            return slot;\n        }\n        return html`\n            <sp-overlay\n                id=\"hover-overlay\"\n                ?open=${this.open === 'hover' && !!this.hoverContent.length}\n                ?disabled=${this.disabled ||\n                !this.hoverContent.length ||\n                (!!this.open && this.open !== 'hover')}\n                .offset=${this.offset}\n                .placement=${this.hoverPlacement || this.placement}\n                .triggerElement=${this.targetContent[0]}\n                .triggerInteraction=${'hover'}\n                .type=${'hint'}\n                @beforetoggle=${this.handleBeforetoggle}\n                .receivesFocus=${this.receivesFocus}\n            >\n                ${slot}\n            </sp-overlay>\n        `;\n    }\n\n    protected renderLongpressOverlay(): TemplateResult {\n        import('@spectrum-web-components/overlay/sp-overlay.js');\n        const slot = this.renderSlot('longpress-content');\n        if (!this.longpressContent.length) {\n            return slot;\n        }\n        return html`\n            <sp-overlay\n                id=\"longpress-overlay\"\n                ?disabled=${this.disabled || !this.longpressContent.length}\n                ?open=${this.open === 'longpress' &&\n                !!this.longpressContent.length}\n                .offset=${this.offset}\n                .placement=${this.longpressPlacement || this.placement}\n                .triggerElement=${this.targetContent[0]}\n                .triggerInteraction=${'longpress'}\n                .type=${'auto'}\n                @beforetoggle=${this.handleBeforetoggle}\n                .receivesFocus=${this.receivesFocus}\n            >\n                ${slot}\n            </sp-overlay>\n            <slot name=\"longpress-describedby-descriptor\"></slot>\n        `;\n    }\n\n    protected override render(): TemplateResult {\n        const content = this.content.split(' ');\n        // Keyboard event availability documented in README.md\n        /* eslint-disable lit-a11y/click-events-have-key-events */\n        return html`\n            <slot\n                id=\"trigger\"\n                name=\"trigger\"\n                @slotchange=${this.handleTriggerContent}\n            ></slot>\n            ${[\n                content.includes('click') ? this.renderClickOverlay() : html``,\n                content.includes('hover') ? this.renderHoverOverlay() : html``,\n                content.includes('longpress')\n                    ? this.renderLongpressOverlay()\n                    : html``,\n            ]}\n        `;\n        /* eslint-enable lit-a11y/click-events-have-key-events */\n    }\n\n    protected override updated(changes: PropertyValues): void {\n        super.updated(changes);\n        if (this.disabled && changes.has('disabled')) {\n            this.open = undefined;\n            return;\n        }\n    }\n\n    protected override async getUpdateComplete(): Promise<boolean> {\n        const complete = (await super.getUpdateComplete()) as boolean;\n        return complete;\n    }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/src/OverlayTrigger.js

@@ -1,4 +1,4 @@
-"use strict";var g=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var n=(c,a,e,o)=>{for(var t=o>1?void 0:o?v(a,e):a,l=c.length-1,s;l>=0;l--)(s=c[l])&&(t=(o?s(a,e,t):s(t))||t);return o&&t&&g(a,e,t),t};import{html as r,SpectrumElement as u}from"@spectrum-web-components/base";import{property as i,query as h,state as p}from"@spectrum-web-components/base/src/decorators.js";import f from"./overlay-trigger.css.js";export class OverlayTrigger extends u{constructor(){super(...arguments);this.content="click hover longpress";this.offset=6;this.disabled=!1;this.clickContent=[];this.longpressContent=[];this.hoverContent=[];this.targetContent=[]}static get styles(){return[f]}getAssignedElementsFromSlot(e){return e.assignedElements({flatten:!0})}handleTriggerContent(e){this.targetContent=this.getAssignedElementsFromSlot(e.target)}handleSlotContent(e){switch(e.target.name){case"click-content":this.clickContent=this.getAssignedElementsFromSlot(e.target);break;case"longpress-content":this.longpressContent=this.getAssignedElementsFromSlot(e.target);break;case"hover-content":this.hoverContent=this.getAssignedElementsFromSlot(e.target);break}}handleBeforetoggle(e){const{target:o}=e;let t;if(o===this.clickOverlayElement)t="click";else if(o===this.longpressOverlayElement)t="longpress";else if(o===this.hoverOverlayElement)t="hover";else return;e.newState==="open"?this.open=t:this.open===t&&(this.open=void 0)}update(e){var o,t,l,s,d,m;e.has("clickContent")&&(this.clickPlacement=((o=this.clickContent[0])==null?void 0:o.getAttribute("placement"))||((t=this.clickContent[0])==null?void 0:t.getAttribute("direction"))||void 0),e.has("hoverContent")&&(this.hoverPlacement=((l=this.hoverContent[0])==null?void 0:l.getAttribute("placement"))||((s=this.hoverContent[0])==null?void 0:s.getAttribute("direction"))||void 0),e.has("longpressContent")&&(this.longpressPlacement=((d=this.longpressContent[0])==null?void 0:d.getAttribute("placement"))||((m=this.longpressContent[0])==null?void 0:m.getAttribute("direction"))||void 0),super.update(e)}renderSlot(e){return r`
+"use strict";var g=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var n=(p,a,e,o)=>{for(var t=o>1?void 0:o?v(a,e):a,l=p.length-1,i;l>=0;l--)(i=p[l])&&(t=(o?i(a,e,t):i(t))||t);return o&&t&&g(a,e,t),t};import{html as r,SpectrumElement as u}from"@spectrum-web-components/base";import{property as s,query as h,state as c}from"@spectrum-web-components/base/src/decorators.js";import f from"./overlay-trigger.css.js";export class OverlayTrigger extends u{constructor(){super(...arguments);this.content="click hover longpress";this.offset=6;this.disabled=!1;this.receivesFocus="auto";this.clickContent=[];this.longpressContent=[];this.hoverContent=[];this.targetContent=[]}static get styles(){return[f]}getAssignedElementsFromSlot(e){return e.assignedElements({flatten:!0})}handleTriggerContent(e){this.targetContent=this.getAssignedElementsFromSlot(e.target)}handleSlotContent(e){switch(e.target.name){case"click-content":this.clickContent=this.getAssignedElementsFromSlot(e.target);break;case"longpress-content":this.longpressContent=this.getAssignedElementsFromSlot(e.target);break;case"hover-content":this.hoverContent=this.getAssignedElementsFromSlot(e.target);break}}handleBeforetoggle(e){const{target:o}=e;let t;if(o===this.clickOverlayElement)t="click";else if(o===this.longpressOverlayElement)t="longpress";else if(o===this.hoverOverlayElement)t="hover";else return;e.newState==="open"?this.open=t:this.open===t&&(this.open=void 0)}update(e){var o,t,l,i,d,m;e.has("clickContent")&&(this.clickPlacement=((o=this.clickContent[0])==null?void 0:o.getAttribute("placement"))||((t=this.clickContent[0])==null?void 0:t.getAttribute("direction"))||void 0),e.has("hoverContent")&&(this.hoverPlacement=((l=this.hoverContent[0])==null?void 0:l.getAttribute("placement"))||((i=this.hoverContent[0])==null?void 0:i.getAttribute("direction"))||void 0),e.has("longpressContent")&&(this.longpressPlacement=((d=this.longpressContent[0])==null?void 0:d.getAttribute("placement"))||((m=this.longpressContent[0])==null?void 0:m.getAttribute("direction"))||void 0),super.update(e)}renderSlot(e){return r`
             <slot name=${e} @slotchange=${this.handleSlotContent}></slot>
         `}renderClickOverlay(){import("@spectrum-web-components/overlay/sp-overlay.js");const e=this.renderSlot("click-content");return this.clickContent.length?r`
             <sp-overlay
@@ -11,6 +11,7 @@
                 .triggerInteraction=${"click"}
                 .type=${this.type!=="modal"?"auto":"modal"}
                 @beforetoggle=${this.handleBeforetoggle}
+                .receivesFocus=${this.receivesFocus}
             >
                 ${e}
             </sp-overlay>
@@ -25,6 +26,7 @@
                 .triggerInteraction=${"hover"}
                 .type=${"hint"}
                 @beforetoggle=${this.handleBeforetoggle}
+                .receivesFocus=${this.receivesFocus}
             >
                 ${e}
             </sp-overlay>
@@ -39,6 +41,7 @@
                 .triggerInteraction=${"longpress"}
                 .type=${"auto"}
                 @beforetoggle=${this.handleBeforetoggle}
+                .receivesFocus=${this.receivesFocus}
             >
                 ${e}
             </sp-overlay>
@@ -50,5 +53,5 @@
                 @slotchange=${this.handleTriggerContent}
             ></slot>
             ${[e.includes("click")?this.renderClickOverlay():r``,e.includes("hover")?this.renderHoverOverlay():r``,e.includes("longpress")?this.renderLongpressOverlay():r``]}
-        `}updated(e){if(super.updated(e),this.disabled&&e.has("disabled")){this.open=void 0;return}}async getUpdateComplete(){return await super.getUpdateComplete()}}n([i()],OverlayTrigger.prototype,"content",2),n([i({reflect:!0})],OverlayTrigger.prototype,"placement",2),n([i()],OverlayTrigger.prototype,"type",2),n([i({type:Number})],OverlayTrigger.prototype,"offset",2),n([i({reflect:!0})],OverlayTrigger.prototype,"open",2),n([i({type:Boolean,reflect:!0})],OverlayTrigger.prototype,"disabled",2),n([p()],OverlayTrigger.prototype,"clickContent",2),n([p()],OverlayTrigger.prototype,"longpressContent",2),n([p()],OverlayTrigger.prototype,"hoverContent",2),n([p()],OverlayTrigger.prototype,"targetContent",2),n([h("#click-overlay",!0)],OverlayTrigger.prototype,"clickOverlayElement",2),n([h("#longpress-overlay",!0)],OverlayTrigger.prototype,"longpressOverlayElement",2),n([h("#hover-overlay",!0)],OverlayTrigger.prototype,"hoverOverlayElement",2);
+        `}updated(e){if(super.updated(e),this.disabled&&e.has("disabled")){this.open=void 0;return}}async getUpdateComplete(){return await super.getUpdateComplete()}}n([s()],OverlayTrigger.prototype,"content",2),n([s({reflect:!0})],OverlayTrigger.prototype,"placement",2),n([s()],OverlayTrigger.prototype,"type",2),n([s({type:Number})],OverlayTrigger.prototype,"offset",2),n([s({reflect:!0})],OverlayTrigger.prototype,"open",2),n([s({type:Boolean,reflect:!0})],OverlayTrigger.prototype,"disabled",2),n([s({attribute:"receives-focus"})],OverlayTrigger.prototype,"receivesFocus",2),n([c()],OverlayTrigger.prototype,"clickContent",2),n([c()],OverlayTrigger.prototype,"longpressContent",2),n([c()],OverlayTrigger.prototype,"hoverContent",2),n([c()],OverlayTrigger.prototype,"targetContent",2),n([h("#click-overlay",!0)],OverlayTrigger.prototype,"clickOverlayElement",2),n([h("#longpress-overlay",!0)],OverlayTrigger.prototype,"longpressOverlayElement",2),n([h("#hover-overlay",!0)],OverlayTrigger.prototype,"hoverOverlayElement",2);
 //# sourceMappingURL=OverlayTrigger.js.map

package/src/OverlayTrigger.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["OverlayTrigger.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    property,\n    query,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport type { Placement } from '@floating-ui/dom';\n\nimport type { BeforetoggleOpenEvent } from './events.js';\nimport type { Overlay } from './Overlay.js';\nimport type { OverlayTriggerInteractions } from './overlay-types';\n\nimport overlayTriggerStyles from './overlay-trigger.css.js';\n\nexport type OverlayContentTypes = 'click' | 'hover' | 'longpress';\n\n/**\n * @element overlay-trigger\n *\n * @slot trigger - The content that will trigger the various overlays\n * @slot hover-content - The content that will be displayed on hover\n * @slot click-content - The content that will be displayed on click\n * @slot longpress-content - The content that will be displayed on click\n *\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class OverlayTrigger extends SpectrumElement {\n    public static override get styles(): CSSResultArray {\n        return [overlayTriggerStyles];\n    }\n\n    @property()\n    content = 'click hover longpress';\n\n    /**\n     * @type {\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"}\n     * @attr\n     */\n    @property({ reflect: true })\n    public placement?: Placement;\n\n    @property()\n    public type?: OverlayTriggerInteractions;\n\n    @property({ type: Number })\n    public offset = 6;\n\n    @property({ reflect: true })\n    public open?: OverlayContentTypes;\n\n    @property({ type: Boolean, reflect: true })\n    public disabled = false;\n\n    @state()\n    private clickContent: HTMLElement[] = [];\n\n    private clickPlacement?: Placement;\n\n    @state()\n    private longpressContent: HTMLElement[] = [];\n\n    private longpressPlacement?: Placement;\n\n    @state()\n    private hoverContent: HTMLElement[] = [];\n\n    private hoverPlacement?: Placement;\n\n    @state()\n    private targetContent: HTMLElement[] = [];\n\n    @query('#click-overlay', true)\n    clickOverlayElement!: Overlay;\n\n    @query('#longpress-overlay', true)\n    longpressOverlayElement!: Overlay;\n\n    @query('#hover-overlay', true)\n    hoverOverlayElement!: Overlay;\n\n    private getAssignedElementsFromSlot(slot: HTMLSlotElement): HTMLElement[] {\n        return slot.assignedElements({ flatten: true }) as HTMLElement[];\n    }\n\n    private handleTriggerContent(\n        event: Event & { target: HTMLSlotElement }\n    ): void {\n        this.targetContent = this.getAssignedElementsFromSlot(event.target);\n    }\n\n    private handleSlotContent(\n        event: Event & { target: HTMLSlotElement }\n    ): void {\n        switch (event.target.name) {\n            case 'click-content':\n                this.clickContent = this.getAssignedElementsFromSlot(\n                    event.target\n                );\n                break;\n            case 'longpress-content':\n                this.longpressContent = this.getAssignedElementsFromSlot(\n                    event.target\n                );\n                break;\n            case 'hover-content':\n                this.hoverContent = this.getAssignedElementsFromSlot(\n                    event.target\n                );\n                break;\n        }\n    }\n\n    private handleBeforetoggle(event: BeforetoggleOpenEvent): void {\n        const { target } = event;\n        let type: OverlayContentTypes;\n        if (target === this.clickOverlayElement) {\n            type = 'click';\n        } else if (target === this.longpressOverlayElement) {\n            type = 'longpress';\n        } else if (target === this.hoverOverlayElement) {\n            type = 'hover';\n            /* c8 ignore next 3 */\n        } else {\n            return;\n        }\n        if (event.newState === 'open') {\n            this.open = type;\n        } else if (this.open === type) {\n            this.open = undefined;\n        }\n    }\n\n    protected override update(changes: PropertyValues): void {\n        if (changes.has('clickContent')) {\n            this.clickPlacement =\n                ((this.clickContent[0]?.getAttribute('placement') ||\n                    this.clickContent[0]?.getAttribute(\n                        'direction'\n                    )) as Placement) || undefined;\n        }\n        if (changes.has('hoverContent')) {\n            this.hoverPlacement =\n                ((this.hoverContent[0]?.getAttribute('placement') ||\n                    this.hoverContent[0]?.getAttribute(\n                        'direction'\n                    )) as Placement) || undefined;\n        }\n        if (changes.has('longpressContent')) {\n            this.longpressPlacement =\n                ((this.longpressContent[0]?.getAttribute('placement') ||\n                    this.longpressContent[0]?.getAttribute(\n                        'direction'\n                    )) as Placement) || undefined;\n        }\n        super.update(changes);\n    }\n\n    protected renderSlot(name: string): TemplateResult {\n        return html`\n            <slot name=${name} @slotchange=${this.handleSlotContent}></slot>\n        `;\n    }\n\n    protected renderClickOverlay(): TemplateResult {\n        import('@spectrum-web-components/overlay/sp-overlay.js');\n        const slot = this.renderSlot('click-content');\n        if (!this.clickContent.length) {\n            return slot;\n        }\n        return html`\n            <sp-overlay\n                id=\"click-overlay\"\n                ?disabled=${this.disabled || !this.clickContent.length}\n                ?open=${this.open === 'click' && !!this.clickContent.length}\n                .offset=${this.offset}\n                .placement=${this.clickPlacement || this.placement}\n                .triggerElement=${this.targetContent[0]}\n                .triggerInteraction=${'click'}\n                .type=${this.type !== 'modal' ? 'auto' : 'modal'}\n                @beforetoggle=${this.handleBeforetoggle}\n            >\n                ${slot}\n            </sp-overlay>\n        `;\n    }\n\n    protected renderHoverOverlay(): TemplateResult {\n        import('@spectrum-web-components/overlay/sp-overlay.js');\n        const slot = this.renderSlot('hover-content');\n        if (!this.hoverContent.length) {\n            return slot;\n        }\n        return html`\n            <sp-overlay\n                id=\"hover-overlay\"\n                ?open=${this.open === 'hover' && !!this.hoverContent.length}\n                ?disabled=${this.disabled ||\n                !this.hoverContent.length ||\n                (!!this.open && this.open !== 'hover')}\n                .offset=${this.offset}\n                .placement=${this.hoverPlacement || this.placement}\n                .triggerElement=${this.targetContent[0]}\n                .triggerInteraction=${'hover'}\n                .type=${'hint'}\n                @beforetoggle=${this.handleBeforetoggle}\n            >\n                ${slot}\n            </sp-overlay>\n        `;\n    }\n\n    protected renderLongpressOverlay(): TemplateResult {\n        import('@spectrum-web-components/overlay/sp-overlay.js');\n        const slot = this.renderSlot('longpress-content');\n        if (!this.longpressContent.length) {\n            return slot;\n        }\n        return html`\n            <sp-overlay\n                id=\"longpress-overlay\"\n                ?disabled=${this.disabled || !this.longpressContent.length}\n                ?open=${this.open === 'longpress' &&\n                !!this.longpressContent.length}\n                .offset=${this.offset}\n                .placement=${this.longpressPlacement || this.placement}\n                .triggerElement=${this.targetContent[0]}\n                .triggerInteraction=${'longpress'}\n                .type=${'auto'}\n                @beforetoggle=${this.handleBeforetoggle}\n            >\n                ${slot}\n            </sp-overlay>\n            <slot name=\"longpress-describedby-descriptor\"></slot>\n        `;\n    }\n\n    protected override render(): TemplateResult {\n        const content = this.content.split(' ');\n        // Keyboard event availability documented in README.md\n        /* eslint-disable lit-a11y/click-events-have-key-events */\n        return html`\n            <slot\n                id=\"trigger\"\n                name=\"trigger\"\n                @slotchange=${this.handleTriggerContent}\n            ></slot>\n            ${[\n                content.includes('click') ? this.renderClickOverlay() : html``,\n                content.includes('hover') ? this.renderHoverOverlay() : html``,\n                content.includes('longpress')\n                    ? this.renderLongpressOverlay()\n                    : html``,\n            ]}\n        `;\n        /* eslint-enable lit-a11y/click-events-have-key-events */\n    }\n\n    protected override updated(changes: PropertyValues): void {\n        super.updated(changes);\n        if (this.disabled && changes.has('disabled')) {\n            this.open = undefined;\n            return;\n        }\n    }\n\n    protected override async getUpdateComplete(): Promise<boolean> {\n        const complete = (await super.getUpdateComplete()) as boolean;\n        return complete;\n    }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    property,\n    query,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport type { Placement } from '@floating-ui/dom';\n\nimport type { BeforetoggleOpenEvent } from './events.js';\nimport type { Overlay } from './Overlay.js';\nimport type { OverlayTriggerInteractions } from './overlay-types';\n\nimport overlayTriggerStyles from './overlay-trigger.css.js';\n\nexport type OverlayContentTypes = 'click' | 'hover' | 'longpress';\n\n/**\n * @element overlay-trigger\n *\n * @slot trigger - The content that will trigger the various overlays\n * @slot hover-content - The content that will be displayed on hover\n * @slot click-content - The content that will be displayed on click\n * @slot longpress-content - The content that will be displayed on click\n *\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class OverlayTrigger extends SpectrumElement {\n    public static override get styles(): CSSResultArray {\n        return [overlayTriggerStyles];\n    }\n\n    @property()\n    content = 'click hover longpress';\n\n    /**\n     * @type {\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"}\n     * @attr\n     */\n    @property({ reflect: true })\n    public placement?: Placement;\n\n    @property()\n    public type?: OverlayTriggerInteractions;\n\n    @property({ type: Number })\n    public offset = 6;\n\n    @property({ reflect: true })\n    public open?: OverlayContentTypes;\n\n    @property({ type: Boolean, reflect: true })\n    public disabled = false;\n\n    @property({ attribute: 'receives-focus' })\n    public receivesFocus: 'true' | 'false' | 'auto' = 'auto';\n\n    @state()\n    private clickContent: HTMLElement[] = [];\n\n    private clickPlacement?: Placement;\n\n    @state()\n    private longpressContent: HTMLElement[] = [];\n\n    private longpressPlacement?: Placement;\n\n    @state()\n    private hoverContent: HTMLElement[] = [];\n\n    private hoverPlacement?: Placement;\n\n    @state()\n    private targetContent: HTMLElement[] = [];\n\n    @query('#click-overlay', true)\n    clickOverlayElement!: Overlay;\n\n    @query('#longpress-overlay', true)\n    longpressOverlayElement!: Overlay;\n\n    @query('#hover-overlay', true)\n    hoverOverlayElement!: Overlay;\n\n    private getAssignedElementsFromSlot(slot: HTMLSlotElement): HTMLElement[] {\n        return slot.assignedElements({ flatten: true }) as HTMLElement[];\n    }\n\n    private handleTriggerContent(\n        event: Event & { target: HTMLSlotElement }\n    ): void {\n        this.targetContent = this.getAssignedElementsFromSlot(event.target);\n    }\n\n    private handleSlotContent(\n        event: Event & { target: HTMLSlotElement }\n    ): void {\n        switch (event.target.name) {\n            case 'click-content':\n                this.clickContent = this.getAssignedElementsFromSlot(\n                    event.target\n                );\n                break;\n            case 'longpress-content':\n                this.longpressContent = this.getAssignedElementsFromSlot(\n                    event.target\n                );\n                break;\n            case 'hover-content':\n                this.hoverContent = this.getAssignedElementsFromSlot(\n                    event.target\n                );\n                break;\n        }\n    }\n\n    private handleBeforetoggle(event: BeforetoggleOpenEvent): void {\n        const { target } = event;\n        let type: OverlayContentTypes;\n        if (target === this.clickOverlayElement) {\n            type = 'click';\n        } else if (target === this.longpressOverlayElement) {\n            type = 'longpress';\n        } else if (target === this.hoverOverlayElement) {\n            type = 'hover';\n            /* c8 ignore next 3 */\n        } else {\n            return;\n        }\n        if (event.newState === 'open') {\n            this.open = type;\n        } else if (this.open === type) {\n            this.open = undefined;\n        }\n    }\n\n    protected override update(changes: PropertyValues): void {\n        if (changes.has('clickContent')) {\n            this.clickPlacement =\n                ((this.clickContent[0]?.getAttribute('placement') ||\n                    this.clickContent[0]?.getAttribute(\n                        'direction'\n                    )) as Placement) || undefined;\n        }\n        if (changes.has('hoverContent')) {\n            this.hoverPlacement =\n                ((this.hoverContent[0]?.getAttribute('placement') ||\n                    this.hoverContent[0]?.getAttribute(\n                        'direction'\n                    )) as Placement) || undefined;\n        }\n        if (changes.has('longpressContent')) {\n            this.longpressPlacement =\n                ((this.longpressContent[0]?.getAttribute('placement') ||\n                    this.longpressContent[0]?.getAttribute(\n                        'direction'\n                    )) as Placement) || undefined;\n        }\n        super.update(changes);\n    }\n\n    protected renderSlot(name: string): TemplateResult {\n        return html`\n            <slot name=${name} @slotchange=${this.handleSlotContent}></slot>\n        `;\n    }\n\n    protected renderClickOverlay(): TemplateResult {\n        import('@spectrum-web-components/overlay/sp-overlay.js');\n        const slot = this.renderSlot('click-content');\n        if (!this.clickContent.length) {\n            return slot;\n        }\n        return html`\n            <sp-overlay\n                id=\"click-overlay\"\n                ?disabled=${this.disabled || !this.clickContent.length}\n                ?open=${this.open === 'click' && !!this.clickContent.length}\n                .offset=${this.offset}\n                .placement=${this.clickPlacement || this.placement}\n                .triggerElement=${this.targetContent[0]}\n                .triggerInteraction=${'click'}\n                .type=${this.type !== 'modal' ? 'auto' : 'modal'}\n                @beforetoggle=${this.handleBeforetoggle}\n                .receivesFocus=${this.receivesFocus}\n            >\n                ${slot}\n            </sp-overlay>\n        `;\n    }\n\n    protected renderHoverOverlay(): TemplateResult {\n        import('@spectrum-web-components/overlay/sp-overlay.js');\n        const slot = this.renderSlot('hover-content');\n        if (!this.hoverContent.length) {\n            return slot;\n        }\n        return html`\n            <sp-overlay\n                id=\"hover-overlay\"\n                ?open=${this.open === 'hover' && !!this.hoverContent.length}\n                ?disabled=${this.disabled ||\n                !this.hoverContent.length ||\n                (!!this.open && this.open !== 'hover')}\n                .offset=${this.offset}\n                .placement=${this.hoverPlacement || this.placement}\n                .triggerElement=${this.targetContent[0]}\n                .triggerInteraction=${'hover'}\n                .type=${'hint'}\n                @beforetoggle=${this.handleBeforetoggle}\n                .receivesFocus=${this.receivesFocus}\n            >\n                ${slot}\n            </sp-overlay>\n        `;\n    }\n\n    protected renderLongpressOverlay(): TemplateResult {\n        import('@spectrum-web-components/overlay/sp-overlay.js');\n        const slot = this.renderSlot('longpress-content');\n        if (!this.longpressContent.length) {\n            return slot;\n        }\n        return html`\n            <sp-overlay\n                id=\"longpress-overlay\"\n                ?disabled=${this.disabled || !this.longpressContent.length}\n                ?open=${this.open === 'longpress' &&\n                !!this.longpressContent.length}\n                .offset=${this.offset}\n                .placement=${this.longpressPlacement || this.placement}\n                .triggerElement=${this.targetContent[0]}\n                .triggerInteraction=${'longpress'}\n                .type=${'auto'}\n                @beforetoggle=${this.handleBeforetoggle}\n                .receivesFocus=${this.receivesFocus}\n            >\n                ${slot}\n            </sp-overlay>\n            <slot name=\"longpress-describedby-descriptor\"></slot>\n        `;\n    }\n\n    protected override render(): TemplateResult {\n        const content = this.content.split(' ');\n        // Keyboard event availability documented in README.md\n        /* eslint-disable lit-a11y/click-events-have-key-events */\n        return html`\n            <slot\n                id=\"trigger\"\n                name=\"trigger\"\n                @slotchange=${this.handleTriggerContent}\n            ></slot>\n            ${[\n                content.includes('click') ? this.renderClickOverlay() : html``,\n                content.includes('hover') ? this.renderHoverOverlay() : html``,\n                content.includes('longpress')\n                    ? this.renderLongpressOverlay()\n                    : html``,\n            ]}\n        `;\n        /* eslint-enable lit-a11y/click-events-have-key-events */\n    }\n\n    protected override updated(changes: PropertyValues): void {\n        super.updated(changes);\n        if (this.disabled && changes.has('disabled')) {\n            this.open = undefined;\n            return;\n        }\n    }\n\n    protected override async getUpdateComplete(): Promise<boolean> {\n        const complete = (await super.getUpdateComplete()) as boolean;\n        return complete;\n    }\n}\n"],
+  "mappings": "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",
   "names": ["html", "SpectrumElement", "property", "query", "state", "overlayTriggerStyles", "slot", "event", "target", "type", "changes", "_a", "_b", "_c", "_d", "_e", "_f", "name", "content", "__decorateClass"]
 }

package/stories/overlay-directive.stories.js

@@ -226,8 +226,8 @@ export const Default = ({ open } = {}) => {
 Default.swc_vrt = {
   skip: true
 };
-export const congifured = (args) => template(args);
-congifured.swc_vrt = {
+export const configured = (args) => template(args);
+configured.swc_vrt = {
   skip: true
 };
 export const insertionOptions = (args = {}) => html`

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

@@ -1,7 +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 {\n    html,\n    LitElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    OverlayContentTypes,\n    OverlayOpenCloseDetail,\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';\nimport { state } from '@spectrum-web-components/base/src/decorators.js';\n\nconst storyStyles = html`\n    <style>\n        html,\n        body,\n        #root,\n        #root-inner,\n        sp-story-decorator {\n            height: 100%;\n            margin: 0;\n        }\n\n        sp-story-decorator::part(container) {\n            display: flex;\n            flex-direction: column;\n            width: 100%;\n            height: 100%;\n            align-items: center;\n            justify-content: center;\n        }\n\n        overlay-trigger {\n            flex: none;\n        }\n\n        #styled-div {\n            background-color: var(--styled-div-background-color, blue);\n            color: white;\n            padding: 4px 10px;\n            margin-bottom: 10px;\n        }\n\n        #inner-trigger {\n            display: inline-block;\n        }\n    </style>\n`;\n\nexport default {\n    title: 'Overlay Directive',\n    argTypes: {\n        offset: { control: 'number' },\n        placement: {\n            control: {\n                type: 'inline-radio',\n                options: [\n                    'top',\n                    'top-start',\n                    'top-end',\n                    'bottom',\n                    'bottom-start',\n                    'bottom-end',\n                    'left',\n                    'left-start',\n                    'left-end',\n                    'right',\n                    'right-start',\n                    'right-end',\n                    'auto',\n                    'auto-start',\n                    'auto-end',\n                    'none',\n                ],\n            },\n        },\n        type: {\n            control: {\n                type: 'inline-radio',\n                options: ['modal', 'replace', 'inline'],\n            },\n        },\n        colorStop: {\n            control: {\n                type: 'inline-radio',\n                options: ['light', 'dark'],\n            },\n        },\n        open: {\n            name: 'open',\n            type: { name: 'boolean', required: false },\n            description: 'Whether the second accordion item is open.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n    },\n    args: {\n        placement: 'bottom',\n        offset: 0,\n        colorStop: 'light',\n        triggerOn: 'click',\n        open: false,\n    },\n};\n\ninterface Properties {\n    placement?: Placement;\n    offset?: number;\n    triggerOn?: OverlayContentTypes;\n    type?: Extract<TriggerInteractions, 'inline' | 'modal' | 'replace'>;\n    insertionOptions?: InsertionOptions;\n    open?: boolean;\n}\n\nconst template = ({\n    placement,\n    offset,\n    open,\n    triggerOn,\n    insertionOptions,\n}: Properties): TemplateResult => {\n    const renderTooltip = (): TemplateResult => html`\n        Click to open a popover.\n    `;\n    const renderPopover = (): TemplateResult => html`\n        <sp-popover placement=\"${ifDefined(placement)}\" tip>\n            <sp-dialog no-divider>\n                <div class=\"options-popover-content\">\n                    <sp-slider\n                        value=\"5\"\n                        step=\"0.5\"\n                        min=\"0\"\n                        max=\"20\"\n                        label=\"Awesomeness\"\n                    ></sp-slider>\n                    <div id=\"styled-div\">\n                        The background of this div should be blue\n                    </div>\n                    <sp-button\n                        ${tooltip(\n                            () => html`\n                                Click to open another popover.\n                            `\n                        )}\n                        ${trigger(\n                            () => html`\n                                <sp-popover placement=\"bottom\" tip open>\n                                    <sp-dialog size=\"s\" no-divider>\n                                        <div class=\"options-popover-content\">\n                                            Another Popover\n                                        </div>\n                                    </sp-dialog>\n                                </sp-popover>\n                            `,\n                            {\n                                triggerInteraction: 'click',\n                                overlayOptions: {\n                                    placement: 'bottom',\n                                },\n                            }\n                        )}\n                    >\n                        Press Me\n                    </sp-button>\n                </div>\n            </sp-dialog>\n        </sp-popover>\n    `;\n    return html`\n        ${storyStyles}\n        <sp-button\n            variant=\"primary\"\n            ${tooltip(renderTooltip)}\n            ${trigger(renderPopover, {\n                open,\n                triggerInteraction: triggerOn,\n                overlayOptions: {\n                    placement,\n                    offset,\n                },\n                insertionOptions: insertionOptions,\n            })}\n        >\n            Show Popover\n        </sp-button>\n    `;\n};\n\nexport const Default = ({ open }: Properties = {}): TemplateResult => {\n    const renderPopover = (): TemplateResult => html`\n        <sp-popover>\n            <sp-dialog no-divider>Popover content goes here</sp-dialog>\n        </sp-popover>\n    `;\n    const options = typeof open !== 'undefined' ? { open } : undefined;\n    return html`\n        <sp-button ${trigger(renderPopover, options)}>Open Popover</sp-button>\n    `;\n};\n\nDefault.swc_vrt = {\n    skip: true,\n};\n\nexport const congifured = (args: Properties): TemplateResult => template(args);\n\ncongifured.swc_vrt = {\n    skip: true,\n};\n\nexport const insertionOptions = (args: Properties = {}): TemplateResult => html`\n    ${template(args)}\n    <div id=\"other-element\"></div>\n`;\n\ninsertionOptions.args = {\n    insertionOptions: {\n        el: () => document.querySelector('#other-element'),\n        where: 'afterbegin',\n    },\n} as Properties;\n\ninsertionOptions.swc_vrt = {\n    skip: true,\n};\n\nclass ManagedOverlayTrigger extends LitElement {\n    @state()\n    private isRenderOverlay = false;\n\n    @state()\n    private isOpenState = false;\n\n    protected override render(): TemplateResult {\n        return html`\n            <sp-button\n                @click=${() => {\n                    this.isRenderOverlay = !this.isRenderOverlay;\n                }}\n            >\n                Toggle Overlay Render Button\n            </sp-button>\n\n            <sp-button\n                @click=${() => {\n                    this.isRenderOverlay = true;\n                    this.isOpenState = true;\n                }}\n            >\n                Create Overlay Render Button And Open Overlay\n            </sp-button>\n\n            ${this.isRenderOverlay ? this.renderOverlayButton() : html``}\n        `;\n    }\n\n    private renderOverlayButton(): TemplateResult {\n        return html`\n            <sp-button\n                ?selected=${this.isOpenState}\n                ${trigger(\n                    () => html`\n                        <sp-popover\n                            @sp-opened=${(\n                                event: CustomEvent<OverlayOpenCloseDetail>\n                            ) => {\n                                if (event.target !== event.currentTarget) {\n                                    return;\n                                }\n                                console.log('sp-opened');\n                                this.isOpenState = true;\n                            }}\n                            @sp-closed=${(\n                                event: CustomEvent<OverlayOpenCloseDetail>\n                            ) => {\n                                if (event.target !== event.currentTarget) {\n                                    return;\n                                }\n                                console.log('sp-closed');\n                                this.isOpenState = false;\n                            }}\n                        >\n                            <h1>My Test Popover</h1>\n                        </sp-popover>\n                    `,\n                    {\n                        triggerInteraction: 'click',\n                        overlayOptions: { placement: 'bottom-end' },\n                        open: this.isOpenState,\n                    }\n                )}\n            >\n                Toggle Popover\n            </sp-button>\n        `;\n    }\n}\n\ncustomElements.define('managed-overlay-trigger', ManagedOverlayTrigger);\n\nexport const managedOverlayTrigger = (): TemplateResult => html`\n    <managed-overlay-trigger></managed-overlay-trigger>\n`;\n\nmanagedOverlayTrigger.swc_vrt = {\n    skip: true,\n};\n"],
+  "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 {\n    html,\n    LitElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    OverlayContentTypes,\n    OverlayOpenCloseDetail,\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';\nimport { state } from '@spectrum-web-components/base/src/decorators.js';\n\nconst storyStyles = html`\n    <style>\n        html,\n        body,\n        #root,\n        #root-inner,\n        sp-story-decorator {\n            height: 100%;\n            margin: 0;\n        }\n\n        sp-story-decorator::part(container) {\n            display: flex;\n            flex-direction: column;\n            width: 100%;\n            height: 100%;\n            align-items: center;\n            justify-content: center;\n        }\n\n        overlay-trigger {\n            flex: none;\n        }\n\n        #styled-div {\n            background-color: var(--styled-div-background-color, blue);\n            color: white;\n            padding: 4px 10px;\n            margin-bottom: 10px;\n        }\n\n        #inner-trigger {\n            display: inline-block;\n        }\n    </style>\n`;\n\nexport default {\n    title: 'Overlay Directive',\n    argTypes: {\n        offset: { control: 'number' },\n        placement: {\n            control: {\n                type: 'inline-radio',\n                options: [\n                    'top',\n                    'top-start',\n                    'top-end',\n                    'bottom',\n                    'bottom-start',\n                    'bottom-end',\n                    'left',\n                    'left-start',\n                    'left-end',\n                    'right',\n                    'right-start',\n                    'right-end',\n                    'auto',\n                    'auto-start',\n                    'auto-end',\n                    'none',\n                ],\n            },\n        },\n        type: {\n            control: {\n                type: 'inline-radio',\n                options: ['modal', 'replace', 'inline'],\n            },\n        },\n        colorStop: {\n            control: {\n                type: 'inline-radio',\n                options: ['light', 'dark'],\n            },\n        },\n        open: {\n            name: 'open',\n            type: { name: 'boolean', required: false },\n            description: 'Whether the second accordion item is open.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n    },\n    args: {\n        placement: 'bottom',\n        offset: 0,\n        colorStop: 'light',\n        triggerOn: 'click',\n        open: false,\n    },\n};\n\ninterface Properties {\n    placement?: Placement;\n    offset?: number;\n    triggerOn?: OverlayContentTypes;\n    type?: Extract<TriggerInteractions, 'inline' | 'modal' | 'replace'>;\n    insertionOptions?: InsertionOptions;\n    open?: boolean;\n}\n\nconst template = ({\n    placement,\n    offset,\n    open,\n    triggerOn,\n    insertionOptions,\n}: Properties): TemplateResult => {\n    const renderTooltip = (): TemplateResult => html`\n        Click to open a popover.\n    `;\n    const renderPopover = (): TemplateResult => html`\n        <sp-popover placement=\"${ifDefined(placement)}\" tip>\n            <sp-dialog no-divider>\n                <div class=\"options-popover-content\">\n                    <sp-slider\n                        value=\"5\"\n                        step=\"0.5\"\n                        min=\"0\"\n                        max=\"20\"\n                        label=\"Awesomeness\"\n                    ></sp-slider>\n                    <div id=\"styled-div\">\n                        The background of this div should be blue\n                    </div>\n                    <sp-button\n                        ${tooltip(\n                            () => html`\n                                Click to open another popover.\n                            `\n                        )}\n                        ${trigger(\n                            () => html`\n                                <sp-popover placement=\"bottom\" tip open>\n                                    <sp-dialog size=\"s\" no-divider>\n                                        <div class=\"options-popover-content\">\n                                            Another Popover\n                                        </div>\n                                    </sp-dialog>\n                                </sp-popover>\n                            `,\n                            {\n                                triggerInteraction: 'click',\n                                overlayOptions: {\n                                    placement: 'bottom',\n                                },\n                            }\n                        )}\n                    >\n                        Press Me\n                    </sp-button>\n                </div>\n            </sp-dialog>\n        </sp-popover>\n    `;\n    return html`\n        ${storyStyles}\n        <sp-button\n            variant=\"primary\"\n            ${tooltip(renderTooltip)}\n            ${trigger(renderPopover, {\n                open,\n                triggerInteraction: triggerOn,\n                overlayOptions: {\n                    placement,\n                    offset,\n                },\n                insertionOptions: insertionOptions,\n            })}\n        >\n            Show Popover\n        </sp-button>\n    `;\n};\n\nexport const Default = ({ open }: Properties = {}): TemplateResult => {\n    const renderPopover = (): TemplateResult => html`\n        <sp-popover>\n            <sp-dialog no-divider>Popover content goes here</sp-dialog>\n        </sp-popover>\n    `;\n    const options = typeof open !== 'undefined' ? { open } : undefined;\n    return html`\n        <sp-button ${trigger(renderPopover, options)}>Open Popover</sp-button>\n    `;\n};\n\nDefault.swc_vrt = {\n    skip: true,\n};\n\nexport const configured = (args: Properties): TemplateResult => template(args);\n\nconfigured.swc_vrt = {\n    skip: true,\n};\n\nexport const insertionOptions = (args: Properties = {}): TemplateResult => html`\n    ${template(args)}\n    <div id=\"other-element\"></div>\n`;\n\ninsertionOptions.args = {\n    insertionOptions: {\n        el: () => document.querySelector('#other-element'),\n        where: 'afterbegin',\n    },\n} as Properties;\n\ninsertionOptions.swc_vrt = {\n    skip: true,\n};\n\nclass ManagedOverlayTrigger extends LitElement {\n    @state()\n    private isRenderOverlay = false;\n\n    @state()\n    private isOpenState = false;\n\n    protected override render(): TemplateResult {\n        return html`\n            <sp-button\n                @click=${() => {\n                    this.isRenderOverlay = !this.isRenderOverlay;\n                }}\n            >\n                Toggle Overlay Render Button\n            </sp-button>\n\n            <sp-button\n                @click=${() => {\n                    this.isRenderOverlay = true;\n                    this.isOpenState = true;\n                }}\n            >\n                Create Overlay Render Button And Open Overlay\n            </sp-button>\n\n            ${this.isRenderOverlay ? this.renderOverlayButton() : html``}\n        `;\n    }\n\n    private renderOverlayButton(): TemplateResult {\n        return html`\n            <sp-button\n                ?selected=${this.isOpenState}\n                ${trigger(\n                    () => html`\n                        <sp-popover\n                            @sp-opened=${(\n                                event: CustomEvent<OverlayOpenCloseDetail>\n                            ) => {\n                                if (event.target !== event.currentTarget) {\n                                    return;\n                                }\n                                console.log('sp-opened');\n                                this.isOpenState = true;\n                            }}\n                            @sp-closed=${(\n                                event: CustomEvent<OverlayOpenCloseDetail>\n                            ) => {\n                                if (event.target !== event.currentTarget) {\n                                    return;\n                                }\n                                console.log('sp-closed');\n                                this.isOpenState = false;\n                            }}\n                        >\n                            <h1>My Test Popover</h1>\n                        </sp-popover>\n                    `,\n                    {\n                        triggerInteraction: 'click',\n                        overlayOptions: { placement: 'bottom-end' },\n                        open: this.isOpenState,\n                    }\n                )}\n            >\n                Toggle Popover\n            </sp-button>\n        `;\n    }\n}\n\ncustomElements.define('managed-overlay-trigger', ManagedOverlayTrigger);\n\nexport const managedOverlayTrigger = (): TemplateResult => html`\n    <managed-overlay-trigger></managed-overlay-trigger>\n`;\n\nmanagedOverlayTrigger.swc_vrt = {\n    skip: true,\n};\n"],
   "mappings": "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",
   "names": ["insertionOptions"]
 }

package/stories/overlay.stories.js

@@ -30,6 +30,7 @@ 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 "@spectrum-web-components/button-group/sp-button-group.js";
 import "../../../projects/story-decorator/src/types.js";
 import "./overlay-story-components.js";
 import { render } from "lit-html";
@@ -873,6 +874,48 @@ export const modalLoose = () => {
         ${extraText}
     `;
 };
+export const modalNoFocus = () => {
+  const closeEvent = new Event("close", { bubbles: true, composed: true });
+  return html`
+        <overlay-trigger type="modal" receives-focus="false">
+            <sp-button slot="trigger">Open</sp-button>
+            <sp-dialog-wrapper
+                underlay
+                slot="click-content"
+                headline="Wrapped Dialog w/ Hero Image"
+                size="s"
+            >
+                <p>
+                    The
+                    <code>sp-dialog-wrapper</code>
+                    element has been prepared for use in an
+                    <code>overlay-trigger</code>
+                    element by it's combination of modal, underlay, etc. styles
+                    and features.
+                </p>
+                <sp-button-group style="margin-inline-start: auto">
+                    <sp-button
+                        data-test-id="dialog-cancel-btn"
+                        variant="secondary"
+                        treatment="outline"
+                        size="l"
+                        @click=${(event) => event.target.dispatchEvent(closeEvent)}
+                    >
+                        ${"Cancel"}
+                    </sp-button>
+                    <sp-button
+                        data-test-id="dialog-override-btn"
+                        variant="negative"
+                        size="l"
+                        @click=${(event) => event.target.dispatchEvent(closeEvent)}
+                    >
+                        ${"Override"}
+                    </sp-button>
+                </sp-button-group>
+            </sp-dialog-wrapper>
+        </overlay-trigger>
+    `;
+};
 export const modalManaged = () => {
   const closeEvent = new Event("close", { bubbles: true, composed: true });
   return html`

package/stories/overlay.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["overlay.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 { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport {\n    openOverlay,\n    Overlay,\n    OverlayContentTypes,\n    OverlayTrigger,\n    Placement,\n    TriggerInteractions,\n    VirtualTrigger,\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.js';\nimport '@spectrum-web-components/dialog/sp-dialog-wrapper.js';\nimport { DialogWrapper } from '@spectrum-web-components/dialog';\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';\n\nimport { Picker } from '@spectrum-web-components/picker';\nimport '@spectrum-web-components/picker/sp-picker.js';\nimport '@spectrum-web-components/overlay/sp-overlay.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-group.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 { render } from 'lit-html';\nimport { Popover } from '@spectrum-web-components/popover';\nimport { Button } from '@spectrum-web-components/button';\nimport { PopoverContent } from './overlay-story-components.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',\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    },\n};\n\ninterface Properties {\n    placement: Placement;\n    offset: number;\n    open?: OverlayContentTypes;\n    type?: Extract<TriggerInteractions, 'inline' | 'modal' | 'replace'>;\n}\n\nconst template = ({\n    placement,\n    offset,\n    open,\n    type,\n}: Properties): TemplateResult => {\n    return html`\n        ${storyStyles}\n        <overlay-trigger\n            content=\"click hover\"\n            id=\"trigger\"\n            placement=\"${placement}\"\n            offset=\"${offset}\"\n            open=${ifDefined(open)}\n            type=${ifDefined(type)}\n        >\n            <sp-button variant=\"primary\" slot=\"trigger\">Show Popover</sp-button>\n            <sp-popover slot=\"click-content\" placement=\"${placement}\" tip>\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                        default-value=\"10\"\n                    ></sp-slider>\n                    <div id=\"styled-div\">\n                        The background of this div should be blue\n                    </div>\n                    <overlay-trigger id=\"inner-trigger\" placement=\"bottom\">\n                        <sp-button slot=\"trigger\">Press Me</sp-button>\n                        <sp-popover slot=\"click-content\" placement=\"bottom\" tip>\n                            <sp-dialog size=\"s\" no-divider>\n                                Another Popover\n                            </sp-dialog>\n                        </sp-popover>\n\n                        <sp-tooltip slot=\"hover-content\" delayed tip=\"bottom\">\n                            Click to open another popover.\n                        </sp-tooltip>\n                    </overlay-trigger>\n                </sp-dialog>\n            </sp-popover>\n            <sp-tooltip\n                slot=\"hover-content\"\n                ?delayed=${open !== 'hover'}\n                tip=\"bottom\"\n            >\n                Click to open a popover.\n            </sp-tooltip>\n        </overlay-trigger>\n    `;\n};\n\nconst extraText = html`\n    <p>This is some text.</p>\n    <p>This is some text.</p>\n    <p>\n        This is a\n        <a href=\"#anchor\">link</a>\n        .\n    </p>\n`;\n\nfunction nextFrame(): Promise<void> {\n    return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nexport const Default = (args: Properties): TemplateResult => template(args);\n\nexport const accordion = (): TemplateResult => {\n    return html`\n        <overlay-trigger type=\"modal\" placement=\"top-start\">\n            <style>\n                sp-button {\n                    margin-top: 70vh;\n                }\n            </style>\n            <sp-button variant=\"primary\" slot=\"trigger\">\n                Open overlay w/ accordion\n            </sp-button>\n            <sp-popover\n                slot=\"click-content\"\n                style=\"overflow-y: scroll;position: static;\"\n            >\n                <sp-dialog size=\"s\" no-divider>\n                    <sp-accordion allow-multiple>\n                        <sp-accordion-item label=\"Some things\">\n                            <p>\n                                Thing\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                more things\n                            </p>\n                        </sp-accordion-item>\n                        <sp-accordion-item label=\"Other things\">\n                            <p>\n                                Thing\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                more things\n                            </p>\n                        </sp-accordion-item>\n                        <sp-accordion-item label=\"More things\">\n                            <p>\n                                Thing\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                more things\n                            </p>\n                        </sp-accordion-item>\n                        <sp-accordion-item label=\"Additional things\">\n                            <p>\n                                Thing\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                more things\n                            </p>\n                        </sp-accordion-item>\n                    </sp-accordion>\n                </sp-dialog>\n            </sp-popover>\n        </overlay-trigger>\n    `;\n};\n\naccordion.swc_vrt = {\n    skip: true,\n};\n\nexport const clickAndHoverTargets = (): TemplateResult => {\n    return html`\n        <div>\n            ${storyStyles}\n            <style>\n                .friendly-target {\n                    padding: 4px;\n                    margin: 6px;\n                    border: 2px solid black;\n                    border-radius: 6px;\n                    cursor: default;\n                }\n            </style>\n            <overlay-trigger placement=\"right\">\n                <div class=\"friendly-target\" slot=\"trigger\" tabindex=\"0\">\n                    Click me\n                </div>\n                <sp-tooltip slot=\"click-content\" tip=\"right\">\n                    Ok, now hover the other trigger\n                </sp-tooltip>\n            </overlay-trigger>\n            <overlay-trigger placement=\"left\">\n                <div class=\"friendly-target\" slot=\"trigger\" tabindex=\"0\">\n                    Then hover me\n                </div>\n                <sp-tooltip slot=\"hover-content\" tip=\"right\">\n                    Now click my trigger -- I should stay open, but the other\n                    overlay should close\n                </sp-tooltip>\n            </overlay-trigger>\n        </div>\n    `;\n};\nclickAndHoverTargets.swc_vrt = {\n    skip: true,\n};\n\nclass ScrollForcer extends HTMLElement {\n    ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n    constructor() {\n        super();\n        this.readyPromise = new Promise((res) => {\n            this.ready = res;\n        });\n        this.setup();\n    }\n\n    async setup(): Promise<void> {\n        await nextFrame();\n        await nextFrame();\n\n        this.previousElementSibling?.addEventListener(\n            'sp-opened',\n            this.doScroll\n        );\n        await nextFrame();\n        await nextFrame();\n        (this.previousElementSibling?.lastElementChild as OverlayTrigger).open =\n            'click';\n    }\n\n    doScroll = async (): Promise<void> => {\n        this.previousElementSibling?.addEventListener(\n            'sp-opened',\n            this.doScroll\n        );\n        await nextFrame();\n        await nextFrame();\n        await nextFrame();\n        await nextFrame();\n\n        if (document.scrollingElement) {\n            document.scrollingElement.scrollTop = 100;\n        }\n\n        await nextFrame();\n        await nextFrame();\n        this.ready(true);\n    };\n\n    private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n    get updateComplete(): Promise<boolean> {\n        return this.readyPromise;\n    }\n}\n\ncustomElements.define('scroll-forcer', ScrollForcer);\n\nexport const clickContentClosedOnScroll = (\n    args: Properties\n): TemplateResult => html`\n    <div style=\"margin: 50vh 0 100vh;\">\n        ${template({\n            ...args,\n        })}\n    </div>\n`;\nclickContentClosedOnScroll.decorators = [\n    (story: () => TemplateResult): TemplateResult => html`\n        <style>\n            html,\n            body,\n            #root,\n            #root-inner,\n            sp-story-decorator {\n                height: auto !important;\n            }\n        </style>\n        ${story()}\n        <scroll-forcer></scroll-forcer>\n    `,\n];\n\nclass ComplexModalReady extends HTMLElement {\n    ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n    constructor() {\n        super();\n        this.readyPromise = new Promise((res) => {\n            this.ready = res;\n            this.setup();\n        });\n    }\n\n    async setup(): Promise<void> {\n        await nextFrame();\n\n        const overlay = document.querySelector(\n            `overlay-trigger`\n        ) as OverlayTrigger;\n        overlay.addEventListener('sp-opened', this.handleTriggerOpened);\n    }\n\n    handleTriggerOpened = async (): Promise<void> => {\n        await nextFrame();\n\n        const picker = document.querySelector('#test-picker') as Picker;\n        picker.addEventListener('sp-opened', this.handlePickerOpen);\n        picker.open = true;\n    };\n\n    handlePickerOpen = async (): Promise<void> => {\n        const picker = document.querySelector('#test-picker') as Picker;\n        const actions = [nextFrame, picker.updateComplete];\n\n        await Promise.all(actions);\n\n        this.ready(true);\n    };\n\n    private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n    get updateComplete(): Promise<boolean> {\n        return this.readyPromise;\n    }\n}\n\ncustomElements.define('complex-modal-ready', ComplexModalReady);\n\nconst complexModalDecorator = (story: () => TemplateResult): TemplateResult => {\n    return html`\n        ${story()}\n        <complex-modal-ready></complex-modal-ready>\n    `;\n};\n\nexport const complexModal = (): TemplateResult => {\n    return html`\n        <style>\n            body {\n                --swc-margin-test: 10px;\n                margin: var(--swc-margin-test);\n            }\n            sp-story-decorator::part(container) {\n                min-height: calc(100vh - (2 * var(--swc-margin-test)));\n                padding: 0;\n                display: grid;\n                place-content: center;\n            }\n            active-overlay > * {\n                --spectrum-global-animation-duration-100: 0ms;\n                --spectrum-global-animation-duration-200: 0ms;\n                --spectrum-global-animation-duration-300: 0ms;\n                --spectrum-global-animation-duration-400: 0ms;\n                --spectrum-global-animation-duration-500: 0ms;\n                --spectrum-global-animation-duration-600: 0ms;\n                --spectrum-global-animation-duration-700: 0ms;\n                --spectrum-global-animation-duration-800: 0ms;\n                --spectrum-global-animation-duration-900: 0ms;\n                --spectrum-global-animation-duration-1000: 0ms;\n                --spectrum-global-animation-duration-2000: 0ms;\n                --spectrum-global-animation-duration-4000: 0ms;\n                --spectrum-animation-duration-0: 0ms;\n                --spectrum-animation-duration-100: 0ms;\n                --spectrum-animation-duration-200: 0ms;\n                --spectrum-animation-duration-300: 0ms;\n                --spectrum-animation-duration-400: 0ms;\n                --spectrum-animation-duration-500: 0ms;\n                --spectrum-animation-duration-600: 0ms;\n                --spectrum-animation-duration-700: 0ms;\n                --spectrum-animation-duration-800: 0ms;\n                --spectrum-animation-duration-900: 0ms;\n                --spectrum-animation-duration-1000: 0ms;\n                --spectrum-animation-duration-2000: 0ms;\n                --spectrum-animation-duration-4000: 0ms;\n                --spectrum-coachmark-animation-indicator-ring-duration: 0ms;\n                --swc-test-duration: 1ms;\n            }\n        </style>\n        <overlay-trigger type=\"modal\" open=\"click\">\n            <sp-dialog-wrapper\n                slot=\"click-content\"\n                headline=\"Dialog title\"\n                dismissable\n                underlay\n                footer=\"Content for footer\"\n            >\n                <sp-field-label for=\"test-picker\">\n                    Selection type:\n                </sp-field-label>\n                <sp-picker id=\"test-picker\">\n                    <sp-menu-item>Deselect</sp-menu-item>\n                    <sp-menu-item>Select inverse</sp-menu-item>\n                    <sp-menu-item>Feather...</sp-menu-item>\n                    <sp-menu-item>Select and mask...</sp-menu-item>\n                    <sp-menu-divider></sp-menu-divider>\n                    <sp-menu-item>Save selection</sp-menu-item>\n                    <sp-menu-item disabled>Make work path</sp-menu-item>\n                </sp-picker>\n            </sp-dialog-wrapper>\n            <sp-button slot=\"trigger\" variant=\"primary\">\n                Toggle Dialog\n            </sp-button>\n        </overlay-trigger>\n    `;\n};\n\ncomplexModal.decorators = [complexModalDecorator];\n\nexport const customizedClickContent = (\n    args: Properties\n): TemplateResult => html`\n    <style>\n        sp-popover {\n            --styled-div-background-color: var(\n                --spectrum-accent-background-color-default\n            );\n            --mod-button-background-color-default: rebeccapurple;\n        }\n    </style>\n    ${template({\n        ...args,\n        open: 'click',\n    })}\n`;\n\nexport const deep = (): TemplateResult => html`\n    <overlay-trigger>\n        <sp-button variant=\"primary\" slot=\"trigger\">\n            Open popover 1 with buttons + selfmanaged Tooltips\n        </sp-button>\n        <sp-popover slot=\"click-content\" direction=\"bottom\" tip>\n            <sp-dialog size=\"s\" no-divider>\n                <sp-action-button>\n                    <sp-tooltip self-managed placement=\"bottom\">\n                        My Tooltip 1\n                    </sp-tooltip>\n                    A\n                </sp-action-button>\n                <sp-action-button>\n                    <sp-tooltip self-managed placement=\"bottom\">\n                        My Tooltip 1\n                    </sp-tooltip>\n                    B\n                </sp-action-button>\n            </sp-dialog>\n        </sp-popover>\n    </overlay-trigger>\n\n    <overlay-trigger>\n        <sp-button variant=\"primary\" slot=\"trigger\">\n            Open popover 2 with buttons without ToolTips\n        </sp-button>\n        <sp-popover slot=\"click-content\" direction=\"bottom\" tip>\n            <sp-dialog size=\"s\" no-divider>\n                <sp-action-button>X</sp-action-button>\n                <sp-action-button>Y</sp-action-button>\n            </sp-dialog>\n        </sp-popover>\n    </overlay-trigger>\n`;\ndeep.swc_vrt = {\n    skip: true,\n};\n\nexport const deepChildTooltip = (): TemplateResult => html`\n    <overlay-trigger>\n        <sp-button variant=\"primary\" slot=\"trigger\">Open popover</sp-button>\n        <sp-popover slot=\"click-content\" direction=\"bottom\" tip>\n            <sp-dialog no-divider>\n                <p>Let us open another overlay here</p>\n                <overlay-trigger>\n                    <sp-button variant=\"primary\" slot=\"trigger\">\n                        Open sub popover\n                    </sp-button>\n                    <sp-popover slot=\"click-content\" direction=\"bottom\" tip>\n                        <sp-dialog no-divider>\n                            <p>\n                                Render an action button with tooltips. Clicking\n                                the action button shouldn't close everything\n                            </p>\n                            <sp-action-button>\n                                Button with self-managed tooltip\n                                <sp-tooltip self-managed placement=\"top\">\n                                    Deep Child ToolTip\n                                </sp-tooltip>\n                            </sp-action-button>\n                            <sp-action-button>Just a button</sp-action-button>\n                        </sp-dialog>\n                    </sp-popover>\n                </overlay-trigger>\n            </sp-dialog>\n        </sp-popover>\n    </overlay-trigger>\n`;\n\nexport const deepNesting = (): TemplateResult => {\n    const color = window.__swc_hack_knobs__.defaultColor;\n    const outter = color === 'light' ? 'dark' : 'light';\n    return html`\n        ${storyStyles}\n        <sp-theme\n            color=${outter}\n            system=${window.__swc_hack_knobs__.defaultSystemVariant}\n            scale=${window.__swc_hack_knobs__.defaultScale}\n            dir=${window.__swc_hack_knobs__.defaultDirection}\n        >\n            <sp-theme\n                color=${color}\n                system=${window.__swc_hack_knobs__.defaultSystemVariant}\n                scale=${window.__swc_hack_knobs__.defaultScale}\n                dir=${window.__swc_hack_knobs__.defaultDirection}\n            >\n                <recursive-popover\n                    tabindex=\"\"\n                    style=\"\n                        background-color: var(--spectrum-gray-100);\n                        color: var(--spectrum-gray-800);\n                        padding: calc(var(--swc-scale-factor) * 22px);\n                    \"\n                ></recursive-popover>\n            </sp-theme>\n        </sp-theme>\n    `;\n};\n\nclass DefinedOverlayReady extends HTMLElement {\n    ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n    connectedCallback(): void {\n        if (!!this.ready) return;\n\n        this.readyPromise = new Promise((res) => {\n            this.ready = res;\n            this.setup();\n        });\n    }\n\n    overlayElement!: OverlayTrigger;\n    popoverElement!: PopoverContent;\n\n    async setup(): Promise<void> {\n        await nextFrame();\n        await nextFrame();\n\n        this.overlayElement = document.querySelector(\n            `overlay-trigger`\n        ) as OverlayTrigger;\n        const button = document.querySelector(\n            `[slot=\"trigger\"]`\n        ) as HTMLButtonElement;\n        this.overlayElement.addEventListener(\n            'sp-opened',\n            this.handleTriggerOpened\n        );\n        await nextFrame();\n        await nextFrame();\n        button.click();\n    }\n\n    handleTriggerOpened = async (): Promise<void> => {\n        this.overlayElement.removeEventListener(\n            'sp-opened',\n            this.handleTriggerOpened\n        );\n        await nextFrame();\n        await nextFrame();\n        await nextFrame();\n        await nextFrame();\n\n        this.popoverElement = document.querySelector(\n            'popover-content'\n        ) as PopoverContent;\n        if (!this.popoverElement) {\n            return;\n        }\n        this.popoverElement.addEventListener(\n            'sp-opened',\n            this.handlePopoverOpen\n        );\n        await nextFrame();\n        await nextFrame();\n        this.popoverElement.button.click();\n    };\n\n    handlePopoverOpen = async (): Promise<void> => {\n        await nextFrame();\n\n        this.ready(true);\n    };\n\n    disconnectedCallback(): void {\n        this.overlayElement.removeEventListener(\n            'sp-opened',\n            this.handleTriggerOpened\n        );\n        this.popoverElement.removeEventListener(\n            'sp-opened',\n            this.handlePopoverOpen\n        );\n    }\n\n    private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n    get updateComplete(): Promise<boolean> {\n        return this.readyPromise;\n    }\n}\n\ncustomElements.define('defined-overlay-ready', DefinedOverlayReady);\n\nconst definedOverlayDecorator = (\n    story: () => TemplateResult\n): TemplateResult => {\n    return html`\n        ${story()}\n        <defined-overlay-ready></defined-overlay-ready>\n    `;\n};\n\nexport const definedOverlayElement = (): TemplateResult => {\n    return html`\n        <overlay-trigger placement=\"bottom\" type=\"modal\">\n            <sp-button variant=\"primary\" slot=\"trigger\">Open popover</sp-button>\n            <sp-popover slot=\"click-content\" direction=\"bottom\">\n                <sp-dialog no-divider>\n                    <popover-content></popover-content>\n                </sp-dialog>\n            </sp-popover>\n        </overlay-trigger>\n    `;\n};\n\ndefinedOverlayElement.decorators = [definedOverlayDecorator];\n\nexport const detachedElement = (): TemplateResult => {\n    let overlay: Overlay | undefined;\n    const openDetachedOverlayContent = async ({\n        target,\n    }: {\n        target: HTMLElement;\n    }): Promise<void> => {\n        if (overlay) {\n            overlay.open = false;\n            overlay = undefined;\n            return;\n        }\n        const div = document.createElement('div');\n        (div as HTMLDivElement & { open: boolean }).open = false;\n        div.textContent = 'This div is overlaid';\n        div.setAttribute(\n            'style',\n            `\n            background-color: var(--spectrum-gray-50);\n            color: var(--spectrum-gray-800);\n            border: 1px solid;\n            padding: 2em;\n        `\n        );\n        overlay = await Overlay.open(div, {\n            type: 'auto',\n            trigger: target,\n            receivesFocus: 'auto',\n            placement: 'bottom',\n            offset: 0,\n        });\n        overlay.addEventListener('sp-closed', () => {\n            overlay = undefined;\n        });\n        target.insertAdjacentElement('afterend', overlay);\n    };\n    requestAnimationFrame(() => {\n        openDetachedOverlayContent({\n            target: document.querySelector(\n                '#detached-content-trigger'\n            ) as HTMLElement,\n        });\n    });\n    return html`\n        <style>\n            sp-overlay div:not([placement]) {\n                visibility: hidden;\n            }\n        </style>\n        <sp-action-button\n            id=\"detached-content-trigger\"\n            @click=${openDetachedOverlayContent}\n        >\n            <sp-icon-open-in\n                slot=\"icon\"\n                label=\"Open in overlay\"\n            ></sp-icon-open-in>\n        </sp-action-button>\n    `;\n};\n\nexport const edges = (): TemplateResult => {\n    return html`\n        <style>\n            .demo {\n                position: absolute;\n            }\n            .top-left {\n                top: 0;\n                left: 0;\n            }\n            .top-right {\n                top: 0;\n                right: 0;\n            }\n            .bottom-right {\n                bottom: 0;\n                right: 0;\n            }\n            .bottom-left {\n                bottom: 0;\n                left: 0;\n            }\n        </style>\n        <overlay-trigger class=\"demo top-left\" placement=\"bottom\">\n            <sp-button slot=\"trigger\">\n                Top/\n                <br />\n                Left\n            </sp-button>\n            <sp-tooltip slot=\"hover-content\" delayed tip=\"bottom\">\n                Triskaidekaphobia and More\n            </sp-tooltip>\n        </overlay-trigger>\n        <overlay-trigger class=\"demo top-right\" placement=\"bottom\">\n            <sp-button slot=\"trigger\">\n                Top/\n                <br />\n                Right\n            </sp-button>\n            <sp-tooltip slot=\"hover-content\" delayed tip=\"bottom\">\n                Triskaidekaphobia and More\n            </sp-tooltip>\n        </overlay-trigger>\n        <overlay-trigger class=\"demo bottom-left\" placement=\"top\">\n            <sp-button slot=\"trigger\">\n                Bottom/\n                <br />\n                Left\n            </sp-button>\n            <sp-tooltip slot=\"hover-content\" delayed tip=\"top\">\n                Triskaidekaphobia and More\n            </sp-tooltip>\n        </overlay-trigger>\n        <overlay-trigger placement=\"top\" class=\"demo bottom-right\">\n            <sp-button slot=\"trigger\">\n                Bottom/\n                <br />\n                Right\n            </sp-button>\n            <sp-tooltip slot=\"hover-content\" delayed tip=\"top\">\n                Triskaidekaphobia and More\n            </sp-tooltip>\n        </overlay-trigger>\n    `;\n};\n\nexport const inline = (): TemplateResult => {\n    const closeEvent = new Event('close', { bubbles: true, composed: true });\n    return html`\n        <overlay-trigger type=\"inline\">\n            <sp-button slot=\"trigger\">Open</sp-button>\n            <sp-popover slot=\"click-content\">\n                <sp-button\n                    @click=${(event: Event & { target: HTMLElement }): void => {\n                        event.target.dispatchEvent(closeEvent);\n                    }}\n                >\n                    Close\n                </sp-button>\n            </sp-popover>\n        </overlay-trigger>\n        ${extraText}\n    `;\n};\n\nexport const longpress = (): TemplateResult => {\n    return html`\n        <overlay-trigger placement=\"right-start\">\n            <sp-action-button slot=\"trigger\" hold-affordance>\n                <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n            </sp-action-button>\n            <sp-tooltip slot=\"hover-content\">Search real hard...</sp-tooltip>\n            <sp-popover slot=\"longpress-content\" tip>\n                <sp-action-group\n                    @change=${(event: Event & { target: HTMLElement }) =>\n                        event.target.dispatchEvent(\n                            new Event('close', { bubbles: true })\n                        )}\n                    selects=\"single\"\n                    vertical\n                    style=\"margin: calc(var(--spectrum-actiongroup-button-gap-y,calc(var(--swc-scale-factor) * 10px)) / 2);\"\n                >\n                    <sp-action-button>\n                        <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n                    </sp-action-button>\n                </sp-action-group>\n            </sp-popover>\n        </overlay-trigger>\n    `;\n};\n\nexport const modalLoose = (): TemplateResult => {\n    const closeEvent = new Event('close', { bubbles: true, composed: true });\n    return html`\n        <overlay-trigger type=\"modal\">\n            <sp-button slot=\"trigger\">Open</sp-button>\n            <sp-dialog\n                size=\"s\"\n                dismissable\n                slot=\"click-content\"\n                @closed=${(event: Event & { target: DialogWrapper }) =>\n                    event.target.dispatchEvent(closeEvent)}\n            >\n                <h2 slot=\"heading\">Loose Dialog</h2>\n                <p>\n                    The\n                    <code>sp-dialog</code>\n                    element is not \"meant\" to be a modal alone. In that way it\n                    does not manage its own\n                    <code>open</code>\n                    attribute or outline when it should have\n                    <code>pointer-events: auto</code>\n                    . It's a part of this test suite to prove that content in\n                    this way can be used in an\n                    <code>overlay-trigger</code>\n                    element.\n                </p>\n            </sp-dialog>\n        </overlay-trigger>\n        ${extraText}\n    `;\n};\n\nexport const modalManaged = (): TemplateResult => {\n    const closeEvent = new Event('close', { bubbles: true, composed: true });\n    return html`\n        <overlay-trigger type=\"modal\">\n            <sp-button slot=\"trigger\">Open</sp-button>\n            <sp-dialog-wrapper\n                underlay\n                slot=\"click-content\"\n                headline=\"Wrapped Dialog w/ Hero Image\"\n                confirm-label=\"Keep Both\"\n                secondary-label=\"Replace\"\n                cancel-label=\"Cancel\"\n                footer=\"Content for footer\"\n                @confirm=${(event: Event & { target: DialogWrapper }): void => {\n                    event.target.dispatchEvent(closeEvent);\n                }}\n                @secondary=${(\n                    event: Event & { target: DialogWrapper }\n                ): void => {\n                    event.target.dispatchEvent(closeEvent);\n                }}\n                @cancel=${(event: Event & { target: DialogWrapper }): void => {\n                    event.target.dispatchEvent(closeEvent);\n                }}\n            >\n                <p>\n                    The\n                    <code>sp-dialog-wrapper</code>\n                    element has been prepared for use in an\n                    <code>overlay-trigger</code>\n                    element by it's combination of modal, underlay, etc. styles\n                    and features.\n                </p>\n            </sp-dialog-wrapper>\n        </overlay-trigger>\n        ${extraText}\n    `;\n};\n\nexport const modalWithinNonModal = (): TemplateResult => {\n    return html`\n        <overlay-trigger type=\"inline\">\n            <sp-button variant=\"primary\" slot=\"trigger\">\n                Open inline overlay\n            </sp-button>\n            <sp-popover slot=\"click-content\">\n                <sp-dialog size=\"s\" no-divider>\n                    <overlay-trigger type=\"modal\">\n                        <sp-button variant=\"primary\" slot=\"trigger\">\n                            Open modal overlay\n                        </sp-button>\n                        <sp-popover slot=\"click-content\">\n                            <sp-dialog size=\"s\" no-divider>\n                                Modal overlay\n                            </sp-dialog>\n                        </sp-popover>\n                    </overlay-trigger>\n                </sp-dialog>\n            </sp-popover>\n        </overlay-trigger>\n    `;\n};\n\nexport const noCloseOnResize = (args: Properties): TemplateResult => html`\n    <style>\n        sp-button:hover {\n            border: 10px solid;\n            width: 100px;\n        }\n    </style>\n    ${template({\n        ...args,\n        open: 'click',\n    })}\n`;\nnoCloseOnResize.swc_vrt = {\n    skip: true,\n};\n\nexport const openClickContent = (args: Properties): TemplateResult =>\n    template({\n        ...args,\n        open: 'click',\n    });\n\nexport const openHoverContent = (args: Properties): TemplateResult =>\n    template({\n        ...args,\n        open: 'hover',\n    });\n\nexport const replace = (): TemplateResult => {\n    const closeEvent = new Event('close', { bubbles: true, composed: true });\n    return html`\n        <overlay-trigger type=\"replace\">\n            <sp-button slot=\"trigger\">Open</sp-button>\n            <sp-popover slot=\"click-content\">\n                <sp-button\n                    @click=${(event: Event & { target: HTMLElement }): void => {\n                        event.target.dispatchEvent(closeEvent);\n                    }}\n                >\n                    Close\n                </sp-button>\n            </sp-popover>\n        </overlay-trigger>\n        ${extraText}\n    `;\n};\n\nexport const sideHoverDraggable = (): TemplateResult => {\n    return html`\n        ${storyStyles}\n        <style>\n            sp-tooltip {\n                transition: none;\n            }\n        </style>\n        <overlay-drag>\n            <overlay-trigger placement=\"right\">\n                <overlay-target-icon slot=\"trigger\"></overlay-target-icon>\n                <sp-tooltip slot=\"hover-content\" delayed tip=\"right\">\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n                    Vivamus egestas sed enim sed condimentum. Nunc facilisis\n                    scelerisque massa sed luctus. Orci varius natoque penatibus\n                    et magnis dis parturient montes, nascetur ridiculus mus.\n                    Suspendisse sagittis sodales purus vitae ultricies. Integer\n                    at dui sem. Sed quam tortor, ornare in nisi et, rhoncus\n                    lacinia mauris. Sed vel rutrum mauris, ac pellentesque nibh.\n                    Sed feugiat semper libero, sit amet vehicula orci fermentum\n                    id. Vivamus imperdiet egestas luctus. Mauris tincidunt\n                    malesuada ante, faucibus viverra nunc blandit a. Fusce et\n                    nisl nisi. Aenean dictum quam id mollis faucibus. Nulla a\n                    ultricies dui. In hac habitasse platea dictumst. Curabitur\n                    gravida lobortis vestibulum.\n                </sp-tooltip>\n            </overlay-trigger>\n        </overlay-drag>\n    `;\n};\n\nexport const superComplexModal = (): TemplateResult => {\n    return html`\n        <overlay-trigger type=\"modal\">\n            <sp-button slot=\"trigger\" variant=\"accent\">Toggle Dialog</sp-button>\n            <sp-popover slot=\"click-content\">\n                <sp-dialog size=\"s\">\n                    <overlay-trigger>\n                        <sp-button slot=\"trigger\" variant=\"primary\">\n                            Toggle Dialog\n                        </sp-button>\n                        <sp-popover slot=\"click-content\">\n                            <sp-dialog size=\"s\" no-divider>\n                                <overlay-trigger type=\"modal\">\n                                    <sp-button\n                                        slot=\"trigger\"\n                                        variant=\"secondary\"\n                                    >\n                                        Toggle Dialog\n                                    </sp-button>\n                                    <sp-popover slot=\"click-content\">\n                                        <sp-dialog size=\"s\" no-divider>\n                                            <p>\n                                                When you get this deep, this\n                                                ActiveOverlay should be the only\n                                                one in [slot=\"open\"].\n                                            </p>\n                                            <p>\n                                                All of the rest of the\n                                                ActiveOverlay elements should\n                                                have had their [slot] attribute\n                                                removed.\n                                            </p>\n                                            <p>\n                                                Closing this ActiveOverlay\n                                                should replace them...\n                                            </p>\n                                        </sp-dialog>\n                                    </sp-popover>\n                                </overlay-trigger>\n                            </sp-dialog>\n                        </sp-popover>\n                    </overlay-trigger>\n                </sp-dialog>\n            </sp-popover>\n        </overlay-trigger>\n    `;\n};\n\nexport const updated = (): TemplateResult => {\n    return html`\n        ${storyStyles}\n        <style>\n            sp-tooltip {\n                transition: none;\n            }\n        </style>\n        <overlay-drag>\n            <overlay-trigger class=\"demo top-left\" placement=\"bottom\">\n                <overlay-target-icon\n                    slot=\"trigger\"\n                    style=\"translate(400px, 300px)\"\n                ></overlay-target-icon>\n                <sp-tooltip slot=\"hover-content\" delayed tip=\"bottom\">\n                    Click to open popover\n                </sp-tooltip>\n                <sp-popover slot=\"click-content\" position=\"bottom\" tip>\n                    <sp-dialog size=\"s\" 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                        <overlay-trigger id=\"inner-trigger\" placement=\"bottom\">\n                            <sp-button slot=\"trigger\">Press Me</sp-button>\n                            <sp-popover\n                                slot=\"click-content\"\n                                placement=\"bottom\"\n                                tip\n                            >\n                                <sp-dialog size=\"s\" no-divider>\n                                    Another Popover\n                                </sp-dialog>\n                            </sp-popover>\n\n                            <sp-tooltip\n                                slot=\"hover-content\"\n                                delayed\n                                tip=\"bottom\"\n                            >\n                                Click to open another popover.\n                            </sp-tooltip>\n                        </overlay-trigger>\n                    </sp-dialog>\n                </sp-popover>\n            </overlay-trigger>\n        </overlay-drag>\n    `;\n};\n\nexport const updating = (): TemplateResult => {\n    const update = (): void => {\n        const button = document.querySelector('[slot=\"trigger\"]') as Button;\n        button.style.left = `${Math.floor(Math.random() * 200)}px`;\n        button.style.top = `${Math.floor(Math.random() * 200)}px`;\n        button.style.position = 'fixed';\n    };\n    return html`\n        <overlay-trigger type=\"click\">\n            <sp-button variant=\"primary\" slot=\"trigger\">\n                Open inline overlay\n            </sp-button>\n            <sp-popover slot=\"click-content\">\n                <sp-dialog size=\"s\" no-divider>\n                    <sp-button variant=\"primary\" @click=${update}>\n                        Update trigger location.\n                    </sp-button>\n                </sp-dialog>\n            </sp-popover>\n        </overlay-trigger>\n    `;\n};\n\nupdating.swc_vrt = {\n    skip: true,\n};\n\nclass StartEndContextmenu extends HTMLElement {\n    override shadowRoot!: ShadowRoot;\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        this.shadowRoot.innerHTML = `\n            <style>\n                :host {\n                    display: flex;\n                    align-items: stretch;\n                }\n                div {\n                    width: 50%;\n                    height: 100%;\n                }\n            </style>\n            <div id=\"start\"></div>\n            <div id=\"end\"></div>\n        `;\n    }\n}\n\ncustomElements.define('start-end-contextmenu', StartEndContextmenu);\n\nexport const virtualElementV1 = (args: Properties): TemplateResult => {\n    const contextMenuTemplate = (kind = ''): TemplateResult => html`\n        <sp-popover\n            style=\"width:300px;\"\n            @click=${(event: PointerEvent) => {\n                if (\n                    (event.target as HTMLElement).localName === 'sp-menu-item'\n                ) {\n                    event.target?.dispatchEvent(\n                        new Event('close', { bubbles: true })\n                    );\n                }\n            }}\n        >\n            <sp-menu>\n                <sp-menu-group>\n                    <span slot=\"header\">Menu source: ${kind}</span>\n                    <sp-menu-item>Deselect</sp-menu-item>\n                    <sp-menu-item>Select inverse</sp-menu-item>\n                    <sp-menu-item>Feather...</sp-menu-item>\n                    <sp-menu-item>Select and mask...</sp-menu-item>\n                    <sp-menu-divider></sp-menu-divider>\n                    <sp-menu-item>Save selection</sp-menu-item>\n                    <sp-menu-item disabled>Make work path</sp-menu-item>\n                </sp-menu-group>\n            </sp-menu>\n        </sp-popover>\n    `;\n    const handleContextmenu = async (event: PointerEvent): Promise<void> => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const source = event.composedPath()[0] as HTMLDivElement;\n        const { id } = source;\n        const trigger = event.target as HTMLElement;\n        const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY);\n        const fragment = document.createDocumentFragment();\n        render(contextMenuTemplate(id), fragment);\n        const popover = fragment.querySelector('sp-popover') as Popover;\n\n        openOverlay(trigger, 'click', popover, {\n            placement: args.placement,\n            receivesFocus: 'auto',\n            virtualTrigger,\n            offset: 0,\n            notImmediatelyClosable: true,\n        });\n    };\n    return html`\n        <style>\n            .app-root {\n                position: absolute;\n                inset: 0;\n            }\n        </style>\n        <start-end-contextmenu\n            class=\"app-root\"\n            @contextmenu=${{\n                capture: true,\n                handleEvent: handleContextmenu,\n            }}\n        ></start-end-contextmenu>\n    `;\n};\n\nvirtualElementV1.args = {\n    placement: 'right-start' as Placement,\n};\n\nexport const virtualElement = (args: Properties): TemplateResult => {\n    const contextMenuTemplate = (kind = ''): TemplateResult => html`\n        <sp-popover\n            style=\"width:300px;\"\n            @click=${(event: PointerEvent) => {\n                if (\n                    (event.target as HTMLElement).localName === 'sp-menu-item'\n                ) {\n                    event.target?.dispatchEvent(\n                        new Event('close', { bubbles: true })\n                    );\n                }\n            }}\n        >\n            <sp-menu>\n                <sp-menu-group>\n                    <span slot=\"header\">Menu source: ${kind}</span>\n                    <sp-menu-item>Deselect</sp-menu-item>\n                    <sp-menu-item>Select inverse</sp-menu-item>\n                    <sp-menu-item>Feather...</sp-menu-item>\n                    <sp-menu-item>Select and mask...</sp-menu-item>\n                    <sp-menu-divider></sp-menu-divider>\n                    <sp-menu-item>Save selection</sp-menu-item>\n                    <sp-menu-item disabled>Make work path</sp-menu-item>\n                </sp-menu-group>\n            </sp-menu>\n        </sp-popover>\n    `;\n    const handleContextmenu = async (event: PointerEvent): Promise<void> => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const source = event.composedPath()[0] as HTMLDivElement;\n        const { id } = source;\n        const trigger = event.target as HTMLElement;\n        const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY);\n        const fragment = document.createDocumentFragment();\n        render(contextMenuTemplate(id), fragment);\n        const popover = fragment.querySelector('sp-popover') as Popover;\n\n        const overlay = await openOverlay(popover, {\n            trigger: virtualTrigger,\n            placement: args.placement,\n            offset: 0,\n            notImmediatelyClosable: true,\n            type: 'auto',\n        });\n        trigger.insertAdjacentElement('afterend', overlay);\n    };\n    return html`\n        <style>\n            .app-root {\n                position: absolute;\n                inset: 0;\n            }\n        </style>\n        <start-end-contextmenu\n            class=\"app-root\"\n            @contextmenu=${{\n                capture: true,\n                handleEvent: handleContextmenu,\n            }}\n        ></start-end-contextmenu>\n    `;\n};\n\nvirtualElement.args = {\n    placement: 'right-start' as Placement,\n};\n\nexport const virtualElementDeclaratively = (\n    args: Properties\n): TemplateResult => {\n    const handleContextmenu = async (event: PointerEvent): Promise<void> => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const overlay = document.querySelector(\n            'sp-overlay:not([open])'\n        ) as Overlay;\n\n        if (overlay.triggerElement instanceof VirtualTrigger) {\n            overlay.triggerElement.updateBoundingClientRect(\n                event.clientX,\n                event.clientY\n            );\n        }\n        overlay.willPreventClose = true;\n        overlay.open = true;\n    };\n    const overlay = (): TemplateResult => html`\n        <sp-overlay\n            offset=\"0\"\n            type=\"auto\"\n            placement=${args.placement}\n            .triggerElement=${new VirtualTrigger(0, 0)}\n        >\n            <sp-popover\n                style=\"width:300px;\"\n                @change=${(event: PointerEvent) => {\n                    event.target?.dispatchEvent(\n                        new Event('close', { bubbles: true })\n                    );\n                }}\n            >\n                <sp-menu>\n                    <sp-menu-group>\n                        <span slot=\"header\">Menu</span>\n                        <sp-menu-item>Deselect</sp-menu-item>\n                        <sp-menu-item>Select inverse</sp-menu-item>\n                        <sp-menu-item>Feather...</sp-menu-item>\n                        <sp-menu-item>Select and mask...</sp-menu-item>\n                        <sp-menu-divider></sp-menu-divider>\n                        <sp-menu-item>Save selection</sp-menu-item>\n                        <sp-menu-item disabled>Make work path</sp-menu-item>\n                    </sp-menu-group>\n                </sp-menu>\n            </sp-popover>\n        </sp-overlay>\n    `;\n\n    return html`\n        <style>\n            .app-root {\n                position: absolute;\n                inset: 0;\n            }\n        </style>\n        <div\n            class=\"app-root\"\n            @contextmenu=${{\n                capture: true,\n                handleEvent: handleContextmenu,\n            }}\n        >\n            ${overlay()} ${overlay()}\n        </div>\n    `;\n};\n\nvirtualElementDeclaratively.args = {\n    placement: 'right-start' as Placement,\n};\n\nvirtualElementDeclaratively.swc_vrt = {\n    skip: true,\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\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 { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport {\n    openOverlay,\n    Overlay,\n    OverlayContentTypes,\n    OverlayTrigger,\n    Placement,\n    TriggerInteractions,\n    VirtualTrigger,\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.js';\nimport '@spectrum-web-components/dialog/sp-dialog-wrapper.js';\nimport { DialogWrapper } from '@spectrum-web-components/dialog';\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';\n\nimport { Picker } from '@spectrum-web-components/picker';\nimport '@spectrum-web-components/picker/sp-picker.js';\nimport '@spectrum-web-components/overlay/sp-overlay.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-group.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 '@spectrum-web-components/button-group/sp-button-group.js';\nimport '../../../projects/story-decorator/src/types.js';\n\nimport './overlay-story-components.js';\nimport { render } from 'lit-html';\nimport { Popover } from '@spectrum-web-components/popover';\nimport { Button } from '@spectrum-web-components/button';\nimport { PopoverContent } from './overlay-story-components.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',\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    },\n};\n\ninterface Properties {\n    placement: Placement;\n    offset: number;\n    open?: OverlayContentTypes;\n    type?: Extract<TriggerInteractions, 'inline' | 'modal' | 'replace'>;\n}\n\nconst template = ({\n    placement,\n    offset,\n    open,\n    type,\n}: Properties): TemplateResult => {\n    return html`\n        ${storyStyles}\n        <overlay-trigger\n            content=\"click hover\"\n            id=\"trigger\"\n            placement=\"${placement}\"\n            offset=\"${offset}\"\n            open=${ifDefined(open)}\n            type=${ifDefined(type)}\n        >\n            <sp-button variant=\"primary\" slot=\"trigger\">Show Popover</sp-button>\n            <sp-popover slot=\"click-content\" placement=\"${placement}\" tip>\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                        default-value=\"10\"\n                    ></sp-slider>\n                    <div id=\"styled-div\">\n                        The background of this div should be blue\n                    </div>\n                    <overlay-trigger id=\"inner-trigger\" placement=\"bottom\">\n                        <sp-button slot=\"trigger\">Press Me</sp-button>\n                        <sp-popover slot=\"click-content\" placement=\"bottom\" tip>\n                            <sp-dialog size=\"s\" no-divider>\n                                Another Popover\n                            </sp-dialog>\n                        </sp-popover>\n\n                        <sp-tooltip slot=\"hover-content\" delayed tip=\"bottom\">\n                            Click to open another popover.\n                        </sp-tooltip>\n                    </overlay-trigger>\n                </sp-dialog>\n            </sp-popover>\n            <sp-tooltip\n                slot=\"hover-content\"\n                ?delayed=${open !== 'hover'}\n                tip=\"bottom\"\n            >\n                Click to open a popover.\n            </sp-tooltip>\n        </overlay-trigger>\n    `;\n};\n\nconst extraText = html`\n    <p>This is some text.</p>\n    <p>This is some text.</p>\n    <p>\n        This is a\n        <a href=\"#anchor\">link</a>\n        .\n    </p>\n`;\n\nfunction nextFrame(): Promise<void> {\n    return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nexport const Default = (args: Properties): TemplateResult => template(args);\n\nexport const accordion = (): TemplateResult => {\n    return html`\n        <overlay-trigger type=\"modal\" placement=\"top-start\">\n            <style>\n                sp-button {\n                    margin-top: 70vh;\n                }\n            </style>\n            <sp-button variant=\"primary\" slot=\"trigger\">\n                Open overlay w/ accordion\n            </sp-button>\n            <sp-popover\n                slot=\"click-content\"\n                style=\"overflow-y: scroll;position: static;\"\n            >\n                <sp-dialog size=\"s\" no-divider>\n                    <sp-accordion allow-multiple>\n                        <sp-accordion-item label=\"Some things\">\n                            <p>\n                                Thing\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                more things\n                            </p>\n                        </sp-accordion-item>\n                        <sp-accordion-item label=\"Other things\">\n                            <p>\n                                Thing\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                more things\n                            </p>\n                        </sp-accordion-item>\n                        <sp-accordion-item label=\"More things\">\n                            <p>\n                                Thing\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                more things\n                            </p>\n                        </sp-accordion-item>\n                        <sp-accordion-item label=\"Additional things\">\n                            <p>\n                                Thing\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                <br />\n                                more things\n                            </p>\n                        </sp-accordion-item>\n                    </sp-accordion>\n                </sp-dialog>\n            </sp-popover>\n        </overlay-trigger>\n    `;\n};\n\naccordion.swc_vrt = {\n    skip: true,\n};\n\nexport const clickAndHoverTargets = (): TemplateResult => {\n    return html`\n        <div>\n            ${storyStyles}\n            <style>\n                .friendly-target {\n                    padding: 4px;\n                    margin: 6px;\n                    border: 2px solid black;\n                    border-radius: 6px;\n                    cursor: default;\n                }\n            </style>\n            <overlay-trigger placement=\"right\">\n                <div class=\"friendly-target\" slot=\"trigger\" tabindex=\"0\">\n                    Click me\n                </div>\n                <sp-tooltip slot=\"click-content\" tip=\"right\">\n                    Ok, now hover the other trigger\n                </sp-tooltip>\n            </overlay-trigger>\n            <overlay-trigger placement=\"left\">\n                <div class=\"friendly-target\" slot=\"trigger\" tabindex=\"0\">\n                    Then hover me\n                </div>\n                <sp-tooltip slot=\"hover-content\" tip=\"right\">\n                    Now click my trigger -- I should stay open, but the other\n                    overlay should close\n                </sp-tooltip>\n            </overlay-trigger>\n        </div>\n    `;\n};\nclickAndHoverTargets.swc_vrt = {\n    skip: true,\n};\n\nclass ScrollForcer extends HTMLElement {\n    ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n    constructor() {\n        super();\n        this.readyPromise = new Promise((res) => {\n            this.ready = res;\n        });\n        this.setup();\n    }\n\n    async setup(): Promise<void> {\n        await nextFrame();\n        await nextFrame();\n\n        this.previousElementSibling?.addEventListener(\n            'sp-opened',\n            this.doScroll\n        );\n        await nextFrame();\n        await nextFrame();\n        (this.previousElementSibling?.lastElementChild as OverlayTrigger).open =\n            'click';\n    }\n\n    doScroll = async (): Promise<void> => {\n        this.previousElementSibling?.addEventListener(\n            'sp-opened',\n            this.doScroll\n        );\n        await nextFrame();\n        await nextFrame();\n        await nextFrame();\n        await nextFrame();\n\n        if (document.scrollingElement) {\n            document.scrollingElement.scrollTop = 100;\n        }\n\n        await nextFrame();\n        await nextFrame();\n        this.ready(true);\n    };\n\n    private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n    get updateComplete(): Promise<boolean> {\n        return this.readyPromise;\n    }\n}\n\ncustomElements.define('scroll-forcer', ScrollForcer);\n\nexport const clickContentClosedOnScroll = (\n    args: Properties\n): TemplateResult => html`\n    <div style=\"margin: 50vh 0 100vh;\">\n        ${template({\n            ...args,\n        })}\n    </div>\n`;\nclickContentClosedOnScroll.decorators = [\n    (story: () => TemplateResult): TemplateResult => html`\n        <style>\n            html,\n            body,\n            #root,\n            #root-inner,\n            sp-story-decorator {\n                height: auto !important;\n            }\n        </style>\n        ${story()}\n        <scroll-forcer></scroll-forcer>\n    `,\n];\n\nclass ComplexModalReady extends HTMLElement {\n    ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n    constructor() {\n        super();\n        this.readyPromise = new Promise((res) => {\n            this.ready = res;\n            this.setup();\n        });\n    }\n\n    async setup(): Promise<void> {\n        await nextFrame();\n\n        const overlay = document.querySelector(\n            `overlay-trigger`\n        ) as OverlayTrigger;\n        overlay.addEventListener('sp-opened', this.handleTriggerOpened);\n    }\n\n    handleTriggerOpened = async (): Promise<void> => {\n        await nextFrame();\n\n        const picker = document.querySelector('#test-picker') as Picker;\n        picker.addEventListener('sp-opened', this.handlePickerOpen);\n        picker.open = true;\n    };\n\n    handlePickerOpen = async (): Promise<void> => {\n        const picker = document.querySelector('#test-picker') as Picker;\n        const actions = [nextFrame, picker.updateComplete];\n\n        await Promise.all(actions);\n\n        this.ready(true);\n    };\n\n    private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n    get updateComplete(): Promise<boolean> {\n        return this.readyPromise;\n    }\n}\n\ncustomElements.define('complex-modal-ready', ComplexModalReady);\n\nconst complexModalDecorator = (story: () => TemplateResult): TemplateResult => {\n    return html`\n        ${story()}\n        <complex-modal-ready></complex-modal-ready>\n    `;\n};\n\nexport const complexModal = (): TemplateResult => {\n    return html`\n        <style>\n            body {\n                --swc-margin-test: 10px;\n                margin: var(--swc-margin-test);\n            }\n            sp-story-decorator::part(container) {\n                min-height: calc(100vh - (2 * var(--swc-margin-test)));\n                padding: 0;\n                display: grid;\n                place-content: center;\n            }\n            active-overlay > * {\n                --spectrum-global-animation-duration-100: 0ms;\n                --spectrum-global-animation-duration-200: 0ms;\n                --spectrum-global-animation-duration-300: 0ms;\n                --spectrum-global-animation-duration-400: 0ms;\n                --spectrum-global-animation-duration-500: 0ms;\n                --spectrum-global-animation-duration-600: 0ms;\n                --spectrum-global-animation-duration-700: 0ms;\n                --spectrum-global-animation-duration-800: 0ms;\n                --spectrum-global-animation-duration-900: 0ms;\n                --spectrum-global-animation-duration-1000: 0ms;\n                --spectrum-global-animation-duration-2000: 0ms;\n                --spectrum-global-animation-duration-4000: 0ms;\n                --spectrum-animation-duration-0: 0ms;\n                --spectrum-animation-duration-100: 0ms;\n                --spectrum-animation-duration-200: 0ms;\n                --spectrum-animation-duration-300: 0ms;\n                --spectrum-animation-duration-400: 0ms;\n                --spectrum-animation-duration-500: 0ms;\n                --spectrum-animation-duration-600: 0ms;\n                --spectrum-animation-duration-700: 0ms;\n                --spectrum-animation-duration-800: 0ms;\n                --spectrum-animation-duration-900: 0ms;\n                --spectrum-animation-duration-1000: 0ms;\n                --spectrum-animation-duration-2000: 0ms;\n                --spectrum-animation-duration-4000: 0ms;\n                --spectrum-coachmark-animation-indicator-ring-duration: 0ms;\n                --swc-test-duration: 1ms;\n            }\n        </style>\n        <overlay-trigger type=\"modal\" open=\"click\">\n            <sp-dialog-wrapper\n                slot=\"click-content\"\n                headline=\"Dialog title\"\n                dismissable\n                underlay\n                footer=\"Content for footer\"\n            >\n                <sp-field-label for=\"test-picker\">\n                    Selection type:\n                </sp-field-label>\n                <sp-picker id=\"test-picker\">\n                    <sp-menu-item>Deselect</sp-menu-item>\n                    <sp-menu-item>Select inverse</sp-menu-item>\n                    <sp-menu-item>Feather...</sp-menu-item>\n                    <sp-menu-item>Select and mask...</sp-menu-item>\n                    <sp-menu-divider></sp-menu-divider>\n                    <sp-menu-item>Save selection</sp-menu-item>\n                    <sp-menu-item disabled>Make work path</sp-menu-item>\n                </sp-picker>\n            </sp-dialog-wrapper>\n            <sp-button slot=\"trigger\" variant=\"primary\">\n                Toggle Dialog\n            </sp-button>\n        </overlay-trigger>\n    `;\n};\n\ncomplexModal.decorators = [complexModalDecorator];\n\nexport const customizedClickContent = (\n    args: Properties\n): TemplateResult => html`\n    <style>\n        sp-popover {\n            --styled-div-background-color: var(\n                --spectrum-accent-background-color-default\n            );\n            --mod-button-background-color-default: rebeccapurple;\n        }\n    </style>\n    ${template({\n        ...args,\n        open: 'click',\n    })}\n`;\n\nexport const deep = (): TemplateResult => html`\n    <overlay-trigger>\n        <sp-button variant=\"primary\" slot=\"trigger\">\n            Open popover 1 with buttons + selfmanaged Tooltips\n        </sp-button>\n        <sp-popover slot=\"click-content\" direction=\"bottom\" tip>\n            <sp-dialog size=\"s\" no-divider>\n                <sp-action-button>\n                    <sp-tooltip self-managed placement=\"bottom\">\n                        My Tooltip 1\n                    </sp-tooltip>\n                    A\n                </sp-action-button>\n                <sp-action-button>\n                    <sp-tooltip self-managed placement=\"bottom\">\n                        My Tooltip 1\n                    </sp-tooltip>\n                    B\n                </sp-action-button>\n            </sp-dialog>\n        </sp-popover>\n    </overlay-trigger>\n\n    <overlay-trigger>\n        <sp-button variant=\"primary\" slot=\"trigger\">\n            Open popover 2 with buttons without ToolTips\n        </sp-button>\n        <sp-popover slot=\"click-content\" direction=\"bottom\" tip>\n            <sp-dialog size=\"s\" no-divider>\n                <sp-action-button>X</sp-action-button>\n                <sp-action-button>Y</sp-action-button>\n            </sp-dialog>\n        </sp-popover>\n    </overlay-trigger>\n`;\ndeep.swc_vrt = {\n    skip: true,\n};\n\nexport const deepChildTooltip = (): TemplateResult => html`\n    <overlay-trigger>\n        <sp-button variant=\"primary\" slot=\"trigger\">Open popover</sp-button>\n        <sp-popover slot=\"click-content\" direction=\"bottom\" tip>\n            <sp-dialog no-divider>\n                <p>Let us open another overlay here</p>\n                <overlay-trigger>\n                    <sp-button variant=\"primary\" slot=\"trigger\">\n                        Open sub popover\n                    </sp-button>\n                    <sp-popover slot=\"click-content\" direction=\"bottom\" tip>\n                        <sp-dialog no-divider>\n                            <p>\n                                Render an action button with tooltips. Clicking\n                                the action button shouldn't close everything\n                            </p>\n                            <sp-action-button>\n                                Button with self-managed tooltip\n                                <sp-tooltip self-managed placement=\"top\">\n                                    Deep Child ToolTip\n                                </sp-tooltip>\n                            </sp-action-button>\n                            <sp-action-button>Just a button</sp-action-button>\n                        </sp-dialog>\n                    </sp-popover>\n                </overlay-trigger>\n            </sp-dialog>\n        </sp-popover>\n    </overlay-trigger>\n`;\n\nexport const deepNesting = (): TemplateResult => {\n    const color = window.__swc_hack_knobs__.defaultColor;\n    const outter = color === 'light' ? 'dark' : 'light';\n    return html`\n        ${storyStyles}\n        <sp-theme\n            color=${outter}\n            system=${window.__swc_hack_knobs__.defaultSystemVariant}\n            scale=${window.__swc_hack_knobs__.defaultScale}\n            dir=${window.__swc_hack_knobs__.defaultDirection}\n        >\n            <sp-theme\n                color=${color}\n                system=${window.__swc_hack_knobs__.defaultSystemVariant}\n                scale=${window.__swc_hack_knobs__.defaultScale}\n                dir=${window.__swc_hack_knobs__.defaultDirection}\n            >\n                <recursive-popover\n                    tabindex=\"\"\n                    style=\"\n                        background-color: var(--spectrum-gray-100);\n                        color: var(--spectrum-gray-800);\n                        padding: calc(var(--swc-scale-factor) * 22px);\n                    \"\n                ></recursive-popover>\n            </sp-theme>\n        </sp-theme>\n    `;\n};\n\nclass DefinedOverlayReady extends HTMLElement {\n    ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n    connectedCallback(): void {\n        if (!!this.ready) return;\n\n        this.readyPromise = new Promise((res) => {\n            this.ready = res;\n            this.setup();\n        });\n    }\n\n    overlayElement!: OverlayTrigger;\n    popoverElement!: PopoverContent;\n\n    async setup(): Promise<void> {\n        await nextFrame();\n        await nextFrame();\n\n        this.overlayElement = document.querySelector(\n            `overlay-trigger`\n        ) as OverlayTrigger;\n        const button = document.querySelector(\n            `[slot=\"trigger\"]`\n        ) as HTMLButtonElement;\n        this.overlayElement.addEventListener(\n            'sp-opened',\n            this.handleTriggerOpened\n        );\n        await nextFrame();\n        await nextFrame();\n        button.click();\n    }\n\n    handleTriggerOpened = async (): Promise<void> => {\n        this.overlayElement.removeEventListener(\n            'sp-opened',\n            this.handleTriggerOpened\n        );\n        await nextFrame();\n        await nextFrame();\n        await nextFrame();\n        await nextFrame();\n\n        this.popoverElement = document.querySelector(\n            'popover-content'\n        ) as PopoverContent;\n        if (!this.popoverElement) {\n            return;\n        }\n        this.popoverElement.addEventListener(\n            'sp-opened',\n            this.handlePopoverOpen\n        );\n        await nextFrame();\n        await nextFrame();\n        this.popoverElement.button.click();\n    };\n\n    handlePopoverOpen = async (): Promise<void> => {\n        await nextFrame();\n\n        this.ready(true);\n    };\n\n    disconnectedCallback(): void {\n        this.overlayElement.removeEventListener(\n            'sp-opened',\n            this.handleTriggerOpened\n        );\n        this.popoverElement.removeEventListener(\n            'sp-opened',\n            this.handlePopoverOpen\n        );\n    }\n\n    private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n    get updateComplete(): Promise<boolean> {\n        return this.readyPromise;\n    }\n}\n\ncustomElements.define('defined-overlay-ready', DefinedOverlayReady);\n\nconst definedOverlayDecorator = (\n    story: () => TemplateResult\n): TemplateResult => {\n    return html`\n        ${story()}\n        <defined-overlay-ready></defined-overlay-ready>\n    `;\n};\n\nexport const definedOverlayElement = (): TemplateResult => {\n    return html`\n        <overlay-trigger placement=\"bottom\" type=\"modal\">\n            <sp-button variant=\"primary\" slot=\"trigger\">Open popover</sp-button>\n            <sp-popover slot=\"click-content\" direction=\"bottom\">\n                <sp-dialog no-divider>\n                    <popover-content></popover-content>\n                </sp-dialog>\n            </sp-popover>\n        </overlay-trigger>\n    `;\n};\n\ndefinedOverlayElement.decorators = [definedOverlayDecorator];\n\nexport const detachedElement = (): TemplateResult => {\n    let overlay: Overlay | undefined;\n    const openDetachedOverlayContent = async ({\n        target,\n    }: {\n        target: HTMLElement;\n    }): Promise<void> => {\n        if (overlay) {\n            overlay.open = false;\n            overlay = undefined;\n            return;\n        }\n        const div = document.createElement('div');\n        (div as HTMLDivElement & { open: boolean }).open = false;\n        div.textContent = 'This div is overlaid';\n        div.setAttribute(\n            'style',\n            `\n            background-color: var(--spectrum-gray-50);\n            color: var(--spectrum-gray-800);\n            border: 1px solid;\n            padding: 2em;\n        `\n        );\n        overlay = await Overlay.open(div, {\n            type: 'auto',\n            trigger: target,\n            receivesFocus: 'auto',\n            placement: 'bottom',\n            offset: 0,\n        });\n        overlay.addEventListener('sp-closed', () => {\n            overlay = undefined;\n        });\n        target.insertAdjacentElement('afterend', overlay);\n    };\n    requestAnimationFrame(() => {\n        openDetachedOverlayContent({\n            target: document.querySelector(\n                '#detached-content-trigger'\n            ) as HTMLElement,\n        });\n    });\n    return html`\n        <style>\n            sp-overlay div:not([placement]) {\n                visibility: hidden;\n            }\n        </style>\n        <sp-action-button\n            id=\"detached-content-trigger\"\n            @click=${openDetachedOverlayContent}\n        >\n            <sp-icon-open-in\n                slot=\"icon\"\n                label=\"Open in overlay\"\n            ></sp-icon-open-in>\n        </sp-action-button>\n    `;\n};\n\nexport const edges = (): TemplateResult => {\n    return html`\n        <style>\n            .demo {\n                position: absolute;\n            }\n            .top-left {\n                top: 0;\n                left: 0;\n            }\n            .top-right {\n                top: 0;\n                right: 0;\n            }\n            .bottom-right {\n                bottom: 0;\n                right: 0;\n            }\n            .bottom-left {\n                bottom: 0;\n                left: 0;\n            }\n        </style>\n        <overlay-trigger class=\"demo top-left\" placement=\"bottom\">\n            <sp-button slot=\"trigger\">\n                Top/\n                <br />\n                Left\n            </sp-button>\n            <sp-tooltip slot=\"hover-content\" delayed tip=\"bottom\">\n                Triskaidekaphobia and More\n            </sp-tooltip>\n        </overlay-trigger>\n        <overlay-trigger class=\"demo top-right\" placement=\"bottom\">\n            <sp-button slot=\"trigger\">\n                Top/\n                <br />\n                Right\n            </sp-button>\n            <sp-tooltip slot=\"hover-content\" delayed tip=\"bottom\">\n                Triskaidekaphobia and More\n            </sp-tooltip>\n        </overlay-trigger>\n        <overlay-trigger class=\"demo bottom-left\" placement=\"top\">\n            <sp-button slot=\"trigger\">\n                Bottom/\n                <br />\n                Left\n            </sp-button>\n            <sp-tooltip slot=\"hover-content\" delayed tip=\"top\">\n                Triskaidekaphobia and More\n            </sp-tooltip>\n        </overlay-trigger>\n        <overlay-trigger placement=\"top\" class=\"demo bottom-right\">\n            <sp-button slot=\"trigger\">\n                Bottom/\n                <br />\n                Right\n            </sp-button>\n            <sp-tooltip slot=\"hover-content\" delayed tip=\"top\">\n                Triskaidekaphobia and More\n            </sp-tooltip>\n        </overlay-trigger>\n    `;\n};\n\nexport const inline = (): TemplateResult => {\n    const closeEvent = new Event('close', { bubbles: true, composed: true });\n    return html`\n        <overlay-trigger type=\"inline\">\n            <sp-button slot=\"trigger\">Open</sp-button>\n            <sp-popover slot=\"click-content\">\n                <sp-button\n                    @click=${(event: Event & { target: HTMLElement }): void => {\n                        event.target.dispatchEvent(closeEvent);\n                    }}\n                >\n                    Close\n                </sp-button>\n            </sp-popover>\n        </overlay-trigger>\n        ${extraText}\n    `;\n};\n\nexport const longpress = (): TemplateResult => {\n    return html`\n        <overlay-trigger placement=\"right-start\">\n            <sp-action-button slot=\"trigger\" hold-affordance>\n                <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n            </sp-action-button>\n            <sp-tooltip slot=\"hover-content\">Search real hard...</sp-tooltip>\n            <sp-popover slot=\"longpress-content\" tip>\n                <sp-action-group\n                    @change=${(event: Event & { target: HTMLElement }) =>\n                        event.target.dispatchEvent(\n                            new Event('close', { bubbles: true })\n                        )}\n                    selects=\"single\"\n                    vertical\n                    style=\"margin: calc(var(--spectrum-actiongroup-button-gap-y,calc(var(--swc-scale-factor) * 10px)) / 2);\"\n                >\n                    <sp-action-button>\n                        <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n                    </sp-action-button>\n                    <sp-action-button>\n                        <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n                    </sp-action-button>\n                </sp-action-group>\n            </sp-popover>\n        </overlay-trigger>\n    `;\n};\n\nexport const modalLoose = (): TemplateResult => {\n    const closeEvent = new Event('close', { bubbles: true, composed: true });\n    return html`\n        <overlay-trigger type=\"modal\">\n            <sp-button slot=\"trigger\">Open</sp-button>\n            <sp-dialog\n                size=\"s\"\n                dismissable\n                slot=\"click-content\"\n                @closed=${(event: Event & { target: DialogWrapper }) =>\n                    event.target.dispatchEvent(closeEvent)}\n            >\n                <h2 slot=\"heading\">Loose Dialog</h2>\n                <p>\n                    The\n                    <code>sp-dialog</code>\n                    element is not \"meant\" to be a modal alone. In that way it\n                    does not manage its own\n                    <code>open</code>\n                    attribute or outline when it should have\n                    <code>pointer-events: auto</code>\n                    . It's a part of this test suite to prove that content in\n                    this way can be used in an\n                    <code>overlay-trigger</code>\n                    element.\n                </p>\n            </sp-dialog>\n        </overlay-trigger>\n        ${extraText}\n    `;\n};\n\nexport const modalNoFocus = (): TemplateResult => {\n    const closeEvent = new Event('close', { bubbles: true, composed: true });\n    return html`\n        <overlay-trigger type=\"modal\" receives-focus=\"false\">\n            <sp-button slot=\"trigger\">Open</sp-button>\n            <sp-dialog-wrapper\n                underlay\n                slot=\"click-content\"\n                headline=\"Wrapped Dialog w/ Hero Image\"\n                size=\"s\"\n            >\n                <p>\n                    The\n                    <code>sp-dialog-wrapper</code>\n                    element has been prepared for use in an\n                    <code>overlay-trigger</code>\n                    element by it's combination of modal, underlay, etc. styles\n                    and features.\n                </p>\n                <sp-button-group style=\"margin-inline-start: auto\">\n                    <sp-button\n                        data-test-id=\"dialog-cancel-btn\"\n                        variant=\"secondary\"\n                        treatment=\"outline\"\n                        size=\"l\"\n                        @click=${(event: Event & { target: DialogWrapper }) =>\n                            event.target.dispatchEvent(closeEvent)}\n                    >\n                        ${'Cancel'}\n                    </sp-button>\n                    <sp-button\n                        data-test-id=\"dialog-override-btn\"\n                        variant=\"negative\"\n                        size=\"l\"\n                        @click=${(event: Event & { target: DialogWrapper }) =>\n                            event.target.dispatchEvent(closeEvent)}\n                    >\n                        ${'Override'}\n                    </sp-button>\n                </sp-button-group>\n            </sp-dialog-wrapper>\n        </overlay-trigger>\n    `;\n};\n\nexport const modalManaged = (): TemplateResult => {\n    const closeEvent = new Event('close', { bubbles: true, composed: true });\n    return html`\n        <overlay-trigger type=\"modal\">\n            <sp-button slot=\"trigger\">Open</sp-button>\n            <sp-dialog-wrapper\n                underlay\n                slot=\"click-content\"\n                headline=\"Wrapped Dialog w/ Hero Image\"\n                confirm-label=\"Keep Both\"\n                secondary-label=\"Replace\"\n                cancel-label=\"Cancel\"\n                footer=\"Content for footer\"\n                @confirm=${(event: Event & { target: DialogWrapper }): void => {\n                    event.target.dispatchEvent(closeEvent);\n                }}\n                @secondary=${(\n                    event: Event & { target: DialogWrapper }\n                ): void => {\n                    event.target.dispatchEvent(closeEvent);\n                }}\n                @cancel=${(event: Event & { target: DialogWrapper }): void => {\n                    event.target.dispatchEvent(closeEvent);\n                }}\n            >\n                <p>\n                    The\n                    <code>sp-dialog-wrapper</code>\n                    element has been prepared for use in an\n                    <code>overlay-trigger</code>\n                    element by it's combination of modal, underlay, etc. styles\n                    and features.\n                </p>\n            </sp-dialog-wrapper>\n        </overlay-trigger>\n        ${extraText}\n    `;\n};\n\nexport const modalWithinNonModal = (): TemplateResult => {\n    return html`\n        <overlay-trigger type=\"inline\">\n            <sp-button variant=\"primary\" slot=\"trigger\">\n                Open inline overlay\n            </sp-button>\n            <sp-popover slot=\"click-content\">\n                <sp-dialog size=\"s\" no-divider>\n                    <overlay-trigger type=\"modal\">\n                        <sp-button variant=\"primary\" slot=\"trigger\">\n                            Open modal overlay\n                        </sp-button>\n                        <sp-popover slot=\"click-content\">\n                            <sp-dialog size=\"s\" no-divider>\n                                Modal overlay\n                            </sp-dialog>\n                        </sp-popover>\n                    </overlay-trigger>\n                </sp-dialog>\n            </sp-popover>\n        </overlay-trigger>\n    `;\n};\n\nexport const noCloseOnResize = (args: Properties): TemplateResult => html`\n    <style>\n        sp-button:hover {\n            border: 10px solid;\n            width: 100px;\n        }\n    </style>\n    ${template({\n        ...args,\n        open: 'click',\n    })}\n`;\nnoCloseOnResize.swc_vrt = {\n    skip: true,\n};\n\nexport const openClickContent = (args: Properties): TemplateResult =>\n    template({\n        ...args,\n        open: 'click',\n    });\n\nexport const openHoverContent = (args: Properties): TemplateResult =>\n    template({\n        ...args,\n        open: 'hover',\n    });\n\nexport const replace = (): TemplateResult => {\n    const closeEvent = new Event('close', { bubbles: true, composed: true });\n    return html`\n        <overlay-trigger type=\"replace\">\n            <sp-button slot=\"trigger\">Open</sp-button>\n            <sp-popover slot=\"click-content\">\n                <sp-button\n                    @click=${(event: Event & { target: HTMLElement }): void => {\n                        event.target.dispatchEvent(closeEvent);\n                    }}\n                >\n                    Close\n                </sp-button>\n            </sp-popover>\n        </overlay-trigger>\n        ${extraText}\n    `;\n};\n\nexport const sideHoverDraggable = (): TemplateResult => {\n    return html`\n        ${storyStyles}\n        <style>\n            sp-tooltip {\n                transition: none;\n            }\n        </style>\n        <overlay-drag>\n            <overlay-trigger placement=\"right\">\n                <overlay-target-icon slot=\"trigger\"></overlay-target-icon>\n                <sp-tooltip slot=\"hover-content\" delayed tip=\"right\">\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n                    Vivamus egestas sed enim sed condimentum. Nunc facilisis\n                    scelerisque massa sed luctus. Orci varius natoque penatibus\n                    et magnis dis parturient montes, nascetur ridiculus mus.\n                    Suspendisse sagittis sodales purus vitae ultricies. Integer\n                    at dui sem. Sed quam tortor, ornare in nisi et, rhoncus\n                    lacinia mauris. Sed vel rutrum mauris, ac pellentesque nibh.\n                    Sed feugiat semper libero, sit amet vehicula orci fermentum\n                    id. Vivamus imperdiet egestas luctus. Mauris tincidunt\n                    malesuada ante, faucibus viverra nunc blandit a. Fusce et\n                    nisl nisi. Aenean dictum quam id mollis faucibus. Nulla a\n                    ultricies dui. In hac habitasse platea dictumst. Curabitur\n                    gravida lobortis vestibulum.\n                </sp-tooltip>\n            </overlay-trigger>\n        </overlay-drag>\n    `;\n};\n\nexport const superComplexModal = (): TemplateResult => {\n    return html`\n        <overlay-trigger type=\"modal\">\n            <sp-button slot=\"trigger\" variant=\"accent\">Toggle Dialog</sp-button>\n            <sp-popover slot=\"click-content\">\n                <sp-dialog size=\"s\">\n                    <overlay-trigger>\n                        <sp-button slot=\"trigger\" variant=\"primary\">\n                            Toggle Dialog\n                        </sp-button>\n                        <sp-popover slot=\"click-content\">\n                            <sp-dialog size=\"s\" no-divider>\n                                <overlay-trigger type=\"modal\">\n                                    <sp-button\n                                        slot=\"trigger\"\n                                        variant=\"secondary\"\n                                    >\n                                        Toggle Dialog\n                                    </sp-button>\n                                    <sp-popover slot=\"click-content\">\n                                        <sp-dialog size=\"s\" no-divider>\n                                            <p>\n                                                When you get this deep, this\n                                                ActiveOverlay should be the only\n                                                one in [slot=\"open\"].\n                                            </p>\n                                            <p>\n                                                All of the rest of the\n                                                ActiveOverlay elements should\n                                                have had their [slot] attribute\n                                                removed.\n                                            </p>\n                                            <p>\n                                                Closing this ActiveOverlay\n                                                should replace them...\n                                            </p>\n                                        </sp-dialog>\n                                    </sp-popover>\n                                </overlay-trigger>\n                            </sp-dialog>\n                        </sp-popover>\n                    </overlay-trigger>\n                </sp-dialog>\n            </sp-popover>\n        </overlay-trigger>\n    `;\n};\n\nexport const updated = (): TemplateResult => {\n    return html`\n        ${storyStyles}\n        <style>\n            sp-tooltip {\n                transition: none;\n            }\n        </style>\n        <overlay-drag>\n            <overlay-trigger class=\"demo top-left\" placement=\"bottom\">\n                <overlay-target-icon\n                    slot=\"trigger\"\n                    style=\"translate(400px, 300px)\"\n                ></overlay-target-icon>\n                <sp-tooltip slot=\"hover-content\" delayed tip=\"bottom\">\n                    Click to open popover\n                </sp-tooltip>\n                <sp-popover slot=\"click-content\" position=\"bottom\" tip>\n                    <sp-dialog size=\"s\" 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                        <overlay-trigger id=\"inner-trigger\" placement=\"bottom\">\n                            <sp-button slot=\"trigger\">Press Me</sp-button>\n                            <sp-popover\n                                slot=\"click-content\"\n                                placement=\"bottom\"\n                                tip\n                            >\n                                <sp-dialog size=\"s\" no-divider>\n                                    Another Popover\n                                </sp-dialog>\n                            </sp-popover>\n\n                            <sp-tooltip\n                                slot=\"hover-content\"\n                                delayed\n                                tip=\"bottom\"\n                            >\n                                Click to open another popover.\n                            </sp-tooltip>\n                        </overlay-trigger>\n                    </sp-dialog>\n                </sp-popover>\n            </overlay-trigger>\n        </overlay-drag>\n    `;\n};\n\nexport const updating = (): TemplateResult => {\n    const update = (): void => {\n        const button = document.querySelector('[slot=\"trigger\"]') as Button;\n        button.style.left = `${Math.floor(Math.random() * 200)}px`;\n        button.style.top = `${Math.floor(Math.random() * 200)}px`;\n        button.style.position = 'fixed';\n    };\n    return html`\n        <overlay-trigger type=\"click\">\n            <sp-button variant=\"primary\" slot=\"trigger\">\n                Open inline overlay\n            </sp-button>\n            <sp-popover slot=\"click-content\">\n                <sp-dialog size=\"s\" no-divider>\n                    <sp-button variant=\"primary\" @click=${update}>\n                        Update trigger location.\n                    </sp-button>\n                </sp-dialog>\n            </sp-popover>\n        </overlay-trigger>\n    `;\n};\n\nupdating.swc_vrt = {\n    skip: true,\n};\n\nclass StartEndContextmenu extends HTMLElement {\n    override shadowRoot!: ShadowRoot;\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        this.shadowRoot.innerHTML = `\n            <style>\n                :host {\n                    display: flex;\n                    align-items: stretch;\n                }\n                div {\n                    width: 50%;\n                    height: 100%;\n                }\n            </style>\n            <div id=\"start\"></div>\n            <div id=\"end\"></div>\n        `;\n    }\n}\n\ncustomElements.define('start-end-contextmenu', StartEndContextmenu);\n\nexport const virtualElementV1 = (args: Properties): TemplateResult => {\n    const contextMenuTemplate = (kind = ''): TemplateResult => html`\n        <sp-popover\n            style=\"width:300px;\"\n            @click=${(event: PointerEvent) => {\n                if (\n                    (event.target as HTMLElement).localName === 'sp-menu-item'\n                ) {\n                    event.target?.dispatchEvent(\n                        new Event('close', { bubbles: true })\n                    );\n                }\n            }}\n        >\n            <sp-menu>\n                <sp-menu-group>\n                    <span slot=\"header\">Menu source: ${kind}</span>\n                    <sp-menu-item>Deselect</sp-menu-item>\n                    <sp-menu-item>Select inverse</sp-menu-item>\n                    <sp-menu-item>Feather...</sp-menu-item>\n                    <sp-menu-item>Select and mask...</sp-menu-item>\n                    <sp-menu-divider></sp-menu-divider>\n                    <sp-menu-item>Save selection</sp-menu-item>\n                    <sp-menu-item disabled>Make work path</sp-menu-item>\n                </sp-menu-group>\n            </sp-menu>\n        </sp-popover>\n    `;\n    const handleContextmenu = async (event: PointerEvent): Promise<void> => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const source = event.composedPath()[0] as HTMLDivElement;\n        const { id } = source;\n        const trigger = event.target as HTMLElement;\n        const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY);\n        const fragment = document.createDocumentFragment();\n        render(contextMenuTemplate(id), fragment);\n        const popover = fragment.querySelector('sp-popover') as Popover;\n\n        openOverlay(trigger, 'click', popover, {\n            placement: args.placement,\n            receivesFocus: 'auto',\n            virtualTrigger,\n            offset: 0,\n            notImmediatelyClosable: true,\n        });\n    };\n    return html`\n        <style>\n            .app-root {\n                position: absolute;\n                inset: 0;\n            }\n        </style>\n        <start-end-contextmenu\n            class=\"app-root\"\n            @contextmenu=${{\n                capture: true,\n                handleEvent: handleContextmenu,\n            }}\n        ></start-end-contextmenu>\n    `;\n};\n\nvirtualElementV1.args = {\n    placement: 'right-start' as Placement,\n};\n\nexport const virtualElement = (args: Properties): TemplateResult => {\n    const contextMenuTemplate = (kind = ''): TemplateResult => html`\n        <sp-popover\n            style=\"width:300px;\"\n            @click=${(event: PointerEvent) => {\n                if (\n                    (event.target as HTMLElement).localName === 'sp-menu-item'\n                ) {\n                    event.target?.dispatchEvent(\n                        new Event('close', { bubbles: true })\n                    );\n                }\n            }}\n        >\n            <sp-menu>\n                <sp-menu-group>\n                    <span slot=\"header\">Menu source: ${kind}</span>\n                    <sp-menu-item>Deselect</sp-menu-item>\n                    <sp-menu-item>Select inverse</sp-menu-item>\n                    <sp-menu-item>Feather...</sp-menu-item>\n                    <sp-menu-item>Select and mask...</sp-menu-item>\n                    <sp-menu-divider></sp-menu-divider>\n                    <sp-menu-item>Save selection</sp-menu-item>\n                    <sp-menu-item disabled>Make work path</sp-menu-item>\n                </sp-menu-group>\n            </sp-menu>\n        </sp-popover>\n    `;\n    const handleContextmenu = async (event: PointerEvent): Promise<void> => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const source = event.composedPath()[0] as HTMLDivElement;\n        const { id } = source;\n        const trigger = event.target as HTMLElement;\n        const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY);\n        const fragment = document.createDocumentFragment();\n        render(contextMenuTemplate(id), fragment);\n        const popover = fragment.querySelector('sp-popover') as Popover;\n\n        const overlay = await openOverlay(popover, {\n            trigger: virtualTrigger,\n            placement: args.placement,\n            offset: 0,\n            notImmediatelyClosable: true,\n            type: 'auto',\n        });\n        trigger.insertAdjacentElement('afterend', overlay);\n    };\n    return html`\n        <style>\n            .app-root {\n                position: absolute;\n                inset: 0;\n            }\n        </style>\n        <start-end-contextmenu\n            class=\"app-root\"\n            @contextmenu=${{\n                capture: true,\n                handleEvent: handleContextmenu,\n            }}\n        ></start-end-contextmenu>\n    `;\n};\n\nvirtualElement.args = {\n    placement: 'right-start' as Placement,\n};\n\nexport const virtualElementDeclaratively = (\n    args: Properties\n): TemplateResult => {\n    const handleContextmenu = async (event: PointerEvent): Promise<void> => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const overlay = document.querySelector(\n            'sp-overlay:not([open])'\n        ) as Overlay;\n\n        if (overlay.triggerElement instanceof VirtualTrigger) {\n            overlay.triggerElement.updateBoundingClientRect(\n                event.clientX,\n                event.clientY\n            );\n        }\n        overlay.willPreventClose = true;\n        overlay.open = true;\n    };\n    const overlay = (): TemplateResult => html`\n        <sp-overlay\n            offset=\"0\"\n            type=\"auto\"\n            placement=${args.placement}\n            .triggerElement=${new VirtualTrigger(0, 0)}\n        >\n            <sp-popover\n                style=\"width:300px;\"\n                @change=${(event: PointerEvent) => {\n                    event.target?.dispatchEvent(\n                        new Event('close', { bubbles: true })\n                    );\n                }}\n            >\n                <sp-menu>\n                    <sp-menu-group>\n                        <span slot=\"header\">Menu</span>\n                        <sp-menu-item>Deselect</sp-menu-item>\n                        <sp-menu-item>Select inverse</sp-menu-item>\n                        <sp-menu-item>Feather...</sp-menu-item>\n                        <sp-menu-item>Select and mask...</sp-menu-item>\n                        <sp-menu-divider></sp-menu-divider>\n                        <sp-menu-item>Save selection</sp-menu-item>\n                        <sp-menu-item disabled>Make work path</sp-menu-item>\n                    </sp-menu-group>\n                </sp-menu>\n            </sp-popover>\n        </sp-overlay>\n    `;\n\n    return html`\n        <style>\n            .app-root {\n                position: absolute;\n                inset: 0;\n            }\n        </style>\n        <div\n            class=\"app-root\"\n            @contextmenu=${{\n                capture: true,\n                handleEvent: handleContextmenu,\n            }}\n        >\n            ${overlay()} ${overlay()}\n        </div>\n    `;\n};\n\nvirtualElementDeclaratively.args = {\n    placement: 'right-start' as Placement,\n};\n\nvirtualElementDeclaratively.swc_vrt = {\n    skip: true,\n};\n"],
+  "mappings": "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",
   "names": ["overlay"]
 }