@spectrum-web-components/overlay 0.35.1-rc.43 → 0.37.0

package/src/OverlayTrigger.dev.js

@@ -20,17 +20,16 @@ import {
   state
 } from "@spectrum-web-components/base/src/decorators.js";
 import overlayTriggerStyles from "./overlay-trigger.css.js";
-import "../sp-overlay.dev.js";
 export class OverlayTrigger extends SpectrumElement {
   constructor() {
     super(...arguments);
+    this.content = "click hover longpress";
     this.offset = 6;
     this.disabled = false;
     this.clickContent = [];
     this.longpressContent = [];
     this.hoverContent = [];
     this.targetContent = [];
-    this._longpressId = `longpress-describedby-descriptor`;
   }
   static get styles() {
     return [overlayTriggerStyles];
@@ -41,14 +40,24 @@ export class OverlayTrigger extends SpectrumElement {
   handleTriggerContent(event) {
     this.targetContent = this.getAssignedElementsFromSlot(event.target);
   }
-  handleClickContent(event) {
-    this.clickContent = this.getAssignedElementsFromSlot(event.target);
-  }
-  handleLongpressContent(event) {
-    this.longpressContent = this.getAssignedElementsFromSlot(event.target);
-  }
-  handleHoverContent(event) {
-    this.hoverContent = this.getAssignedElementsFromSlot(event.target);
+  handleSlotContent(event) {
+    switch (event.target.name) {
+      case "click-content":
+        this.clickContent = this.getAssignedElementsFromSlot(
+          event.target
+        );
+        break;
+      case "longpress-content":
+        this.longpressContent = this.getAssignedElementsFromSlot(
+          event.target
+        );
+        break;
+      case "hover-content":
+        this.hoverContent = this.getAssignedElementsFromSlot(
+          event.target
+        );
+        break;
+    }
   }
   handleBeforetoggle(event) {
     const { target } = event;
@@ -87,65 +96,91 @@ export class OverlayTrigger extends SpectrumElement {
     }
     super.update(changes);
   }
+  renderSlot(name) {
+    return html`
+            <slot name=${name} @slotchange=${this.handleSlotContent}></slot>
+        `;
+  }
+  renderClickOverlay() {
+    import("@spectrum-web-components/overlay/sp-overlay.js");
+    const slot = this.renderSlot("click-content");
+    if (!this.clickContent.length) {
+      return slot;
+    }
+    return html`
+            <sp-overlay
+                id="click-overlay"
+                ?disabled=${this.disabled || !this.clickContent.length}
+                ?open=${this.open === "click" && !!this.clickContent.length}
+                .offset=${this.offset}
+                .placement=${this.clickPlacement || this.placement}
+                .triggerElement=${this.targetContent[0]}
+                .triggerInteraction=${"click"}
+                .type=${this.type !== "modal" ? "auto" : "modal"}
+                @beforetoggle=${this.handleBeforetoggle}
+            >
+                ${slot}
+            </sp-overlay>
+        `;
+  }
+  renderHoverOverlay() {
+    import("@spectrum-web-components/overlay/sp-overlay.js");
+    const slot = this.renderSlot("hover-content");
+    if (!this.hoverContent.length) {
+      return slot;
+    }
+    return html`
+            <sp-overlay
+                id="hover-overlay"
+                ?disabled=${this.disabled || !this.hoverContent.length || !!this.open && this.open !== "hover"}
+                ?open=${this.open === "hover" && !!this.hoverContent.length}
+                .offset=${this.offset}
+                .placement=${this.hoverPlacement || this.placement}
+                .triggerElement=${this.targetContent[0]}
+                .triggerInteraction=${"hover"}
+                .type=${"hint"}
+                @beforetoggle=${this.handleBeforetoggle}
+            >
+                ${slot}
+            </sp-overlay>
+        `;
+  }
+  renderLongpressOverlay() {
+    import("@spectrum-web-components/overlay/sp-overlay.js");
+    const slot = this.renderSlot("longpress-content");
+    if (!this.longpressContent.length) {
+      return slot;
+    }
+    return html`
+            <sp-overlay
+                id="longpress-overlay"
+                ?disabled=${this.disabled || !this.longpressContent.length}
+                ?open=${this.open === "longpress" && !!this.longpressContent.length}
+                .offset=${this.offset}
+                .placement=${this.longpressPlacement || this.placement}
+                .triggerElement=${this.targetContent[0]}
+                .triggerInteraction=${"longpress"}
+                .type=${"auto"}
+                @beforetoggle=${this.handleBeforetoggle}
+            >
+                ${slot}
+            </sp-overlay>
+            <slot name="longpress-describedby-descriptor"></slot>
+        `;
+  }
   render() {
+    const content = this.content.split(" ");
     return html`
             <slot
                 id="trigger"
                 name="trigger"
                 @slotchange=${this.handleTriggerContent}
             ></slot>
-            <div id="overlay-content">
-                <sp-overlay
-                    id="click-overlay"
-                    ?disabled=${this.disabled || !this.clickContent.length}
-                    ?open=${this.open === "click" && !!this.clickContent.length}
-                    .offset=${this.offset}
-                    .placement=${this.clickPlacement || this.placement}
-                    .triggerElement=${this.targetContent[0]}
-                    .triggerInteraction=${"click"}
-                    .type=${this.type !== "modal" ? "auto" : "modal"}
-                    @beforetoggle=${this.handleBeforetoggle}
-                >
-                    <slot
-                        name="click-content"
-                        @slotchange=${this.handleClickContent}
-                    ></slot>
-                </sp-overlay>
-                <sp-overlay
-                    id="longpress-overlay"
-                    ?disabled=${this.disabled || !this.longpressContent.length}
-                    ?open=${this.open === "longpress" && !!this.longpressContent.length}
-                    .offset=${this.offset}
-                    .placement=${this.longpressPlacement || this.placement}
-                    .triggerElement=${this.targetContent[0]}
-                    .triggerInteraction=${"longpress"}
-                    .type=${"auto"}
-                    @beforetoggle=${this.handleBeforetoggle}
-                >
-                    <slot
-                        name="longpress-content"
-                        @slotchange=${this.handleLongpressContent}
-                    ></slot>
-                    <slot name="longpress-describedby-descriptor"></slot>
-                </sp-overlay>
-                <sp-overlay
-                    id="hover-overlay"
-                    ?disabled=${this.disabled || !this.hoverContent.length || !!this.open && this.open !== "hover"}
-                    ?open=${this.open === "hover" && !!this.hoverContent.length}
-                    .offset=${this.offset}
-                    .placement=${this.hoverPlacement || this.placement}
-                    .triggerElement=${this.targetContent[0]}
-                    .triggerInteraction=${"hover"}
-                    .type=${"hint"}
-                    @beforetoggle=${this.handleBeforetoggle}
-                >
-                    <slot
-                        name="hover-content"
-                        @slotchange=${this.handleHoverContent}
-                    ></slot>
-                </sp-overlay>
-                <slot name=${this._longpressId}></slot>
-            </div>
+            ${[
+      content.includes("click") ? this.renderClickOverlay() : html``,
+      content.includes("hover") ? this.renderHoverOverlay() : html``,
+      content.includes("longpress") ? this.renderLongpressOverlay() : html``
+    ]}
         `;
   }
   updated(changes) {
@@ -160,6 +195,9 @@ export class OverlayTrigger extends SpectrumElement {
     return complete;
   }
 }
+__decorateClass([
+  property()
+], OverlayTrigger.prototype, "content", 2);
 __decorateClass([
   property({ reflect: true })
 ], OverlayTrigger.prototype, "placement", 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';\n\nimport { OverlayTriggerInteractions } from './overlay-types';\nimport overlayTriggerStyles from './overlay-trigger.css.js';\nimport '../sp-overlay.dev.js'\nimport { Placement } from '@floating-ui/dom';\nimport { BeforetoggleOpenEvent } from './AbstractOverlay.dev.js'\nimport type { Overlay } from './Overlay.dev.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    /**\n     * @type {\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"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 _longpressId = `longpress-describedby-descriptor`;\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 handleClickContent(\n        event: Event & { target: HTMLSlotElement }\n    ): void {\n        this.clickContent = this.getAssignedElementsFromSlot(event.target);\n    }\n\n    private handleLongpressContent(\n        event: Event & { target: HTMLSlotElement }\n    ): void {\n        this.longpressContent = this.getAssignedElementsFromSlot(event.target);\n    }\n\n    private handleHoverContent(\n        event: Event & { target: HTMLSlotElement }\n    ): void {\n        this.hoverContent = this.getAssignedElementsFromSlot(event.target);\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 override render(): TemplateResult {\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            <div id=\"overlay-content\">\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                        name=\"click-content\"\n                        @slotchange=${this.handleClickContent}\n                    ></slot>\n                </sp-overlay>\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                        name=\"longpress-content\"\n                        @slotchange=${this.handleLongpressContent}\n                    ></slot>\n                    <slot name=\"longpress-describedby-descriptor\"></slot>\n                </sp-overlay>\n                <sp-overlay\n                    id=\"hover-overlay\"\n                    ?disabled=${this.disabled ||\n                    !this.hoverContent.length ||\n                    (!!this.open && this.open !== 'hover')}\n                    ?open=${this.open === 'hover' && !!this.hoverContent.length}\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                        name=\"hover-content\"\n                        @slotchange=${this.handleHoverContent}\n                    ></slot>\n                </sp-overlay>\n                <slot name=${this._longpressId}></slot>\n            </div>\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 './AbstractOverlay.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                ?disabled=${this.disabled ||\n                !this.hoverContent.length ||\n                (!!this.open && this.open !== 'hover')}\n                ?open=${this.open === 'hover' && !!this.hoverContent.length}\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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",
   "names": []
 }

package/src/OverlayTrigger.js

@@ -1,60 +1,54 @@
-"use strict";var m=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var n=(p,r,e,o)=>{for(var t=o>1?void 0:o?g(r,e):r,l=p.length-1,s;l>=0;l--)(s=p[l])&&(t=(o?s(r,e,t):s(t))||t);return o&&t&&m(r,e,t),t};import{html as v,SpectrumElement as f}from"@spectrum-web-components/base";import{property as i,query as c,state as a}from"@spectrum-web-components/base/src/decorators.js";import u from"./overlay-trigger.css.js";import"../sp-overlay.js";export class OverlayTrigger extends f{constructor(){super(...arguments);this.offset=6;this.disabled=!1;this.clickContent=[];this.longpressContent=[];this.hoverContent=[];this.targetContent=[];this._longpressId="longpress-describedby-descriptor"}static get styles(){return[u]}getAssignedElementsFromSlot(e){return e.assignedElements({flatten:!0})}handleTriggerContent(e){this.targetContent=this.getAssignedElementsFromSlot(e.target)}handleClickContent(e){this.clickContent=this.getAssignedElementsFromSlot(e.target)}handleLongpressContent(e){this.longpressContent=this.getAssignedElementsFromSlot(e.target)}handleHoverContent(e){this.hoverContent=this.getAssignedElementsFromSlot(e.target)}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,h,d;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=((h=this.longpressContent[0])==null?void 0:h.getAttribute("placement"))||((d=this.longpressContent[0])==null?void 0:d.getAttribute("direction"))||void 0),super.update(e)}render(){return v`
+"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`
+            <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
+                id="click-overlay"
+                ?disabled=${this.disabled||!this.clickContent.length}
+                ?open=${this.open==="click"&&!!this.clickContent.length}
+                .offset=${this.offset}
+                .placement=${this.clickPlacement||this.placement}
+                .triggerElement=${this.targetContent[0]}
+                .triggerInteraction=${"click"}
+                .type=${this.type!=="modal"?"auto":"modal"}
+                @beforetoggle=${this.handleBeforetoggle}
+            >
+                ${e}
+            </sp-overlay>
+        `:e}renderHoverOverlay(){import("@spectrum-web-components/overlay/sp-overlay.js");const e=this.renderSlot("hover-content");return this.hoverContent.length?r`
+            <sp-overlay
+                id="hover-overlay"
+                ?disabled=${this.disabled||!this.hoverContent.length||!!this.open&&this.open!=="hover"}
+                ?open=${this.open==="hover"&&!!this.hoverContent.length}
+                .offset=${this.offset}
+                .placement=${this.hoverPlacement||this.placement}
+                .triggerElement=${this.targetContent[0]}
+                .triggerInteraction=${"hover"}
+                .type=${"hint"}
+                @beforetoggle=${this.handleBeforetoggle}
+            >
+                ${e}
+            </sp-overlay>
+        `:e}renderLongpressOverlay(){import("@spectrum-web-components/overlay/sp-overlay.js");const e=this.renderSlot("longpress-content");return this.longpressContent.length?r`
+            <sp-overlay
+                id="longpress-overlay"
+                ?disabled=${this.disabled||!this.longpressContent.length}
+                ?open=${this.open==="longpress"&&!!this.longpressContent.length}
+                .offset=${this.offset}
+                .placement=${this.longpressPlacement||this.placement}
+                .triggerElement=${this.targetContent[0]}
+                .triggerInteraction=${"longpress"}
+                .type=${"auto"}
+                @beforetoggle=${this.handleBeforetoggle}
+            >
+                ${e}
+            </sp-overlay>
+            <slot name="longpress-describedby-descriptor"></slot>
+        `:e}render(){const e=this.content.split(" ");return r`
             <slot
                 id="trigger"
                 name="trigger"
                 @slotchange=${this.handleTriggerContent}
             ></slot>
-            <div id="overlay-content">
-                <sp-overlay
-                    id="click-overlay"
-                    ?disabled=${this.disabled||!this.clickContent.length}
-                    ?open=${this.open==="click"&&!!this.clickContent.length}
-                    .offset=${this.offset}
-                    .placement=${this.clickPlacement||this.placement}
-                    .triggerElement=${this.targetContent[0]}
-                    .triggerInteraction=${"click"}
-                    .type=${this.type!=="modal"?"auto":"modal"}
-                    @beforetoggle=${this.handleBeforetoggle}
-                >
-                    <slot
-                        name="click-content"
-                        @slotchange=${this.handleClickContent}
-                    ></slot>
-                </sp-overlay>
-                <sp-overlay
-                    id="longpress-overlay"
-                    ?disabled=${this.disabled||!this.longpressContent.length}
-                    ?open=${this.open==="longpress"&&!!this.longpressContent.length}
-                    .offset=${this.offset}
-                    .placement=${this.longpressPlacement||this.placement}
-                    .triggerElement=${this.targetContent[0]}
-                    .triggerInteraction=${"longpress"}
-                    .type=${"auto"}
-                    @beforetoggle=${this.handleBeforetoggle}
-                >
-                    <slot
-                        name="longpress-content"
-                        @slotchange=${this.handleLongpressContent}
-                    ></slot>
-                    <slot name="longpress-describedby-descriptor"></slot>
-                </sp-overlay>
-                <sp-overlay
-                    id="hover-overlay"
-                    ?disabled=${this.disabled||!this.hoverContent.length||!!this.open&&this.open!=="hover"}
-                    ?open=${this.open==="hover"&&!!this.hoverContent.length}
-                    .offset=${this.offset}
-                    .placement=${this.hoverPlacement||this.placement}
-                    .triggerElement=${this.targetContent[0]}
-                    .triggerInteraction=${"hover"}
-                    .type=${"hint"}
-                    @beforetoggle=${this.handleBeforetoggle}
-                >
-                    <slot
-                        name="hover-content"
-                        @slotchange=${this.handleHoverContent}
-                    ></slot>
-                </sp-overlay>
-                <slot name=${this._longpressId}></slot>
-            </div>
-        `}updated(e){if(super.updated(e),this.disabled&&e.has("disabled")){this.open=void 0;return}}async getUpdateComplete(){return await super.getUpdateComplete()}}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([a()],OverlayTrigger.prototype,"clickContent",2),n([a()],OverlayTrigger.prototype,"longpressContent",2),n([a()],OverlayTrigger.prototype,"hoverContent",2),n([a()],OverlayTrigger.prototype,"targetContent",2),n([c("#click-overlay",!0)],OverlayTrigger.prototype,"clickOverlayElement",2),n([c("#longpress-overlay",!0)],OverlayTrigger.prototype,"longpressOverlayElement",2),n([c("#hover-overlay",!0)],OverlayTrigger.prototype,"hoverOverlayElement",2);
+            ${[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);
 //# 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';\n\nimport { OverlayTriggerInteractions } from './overlay-types';\nimport overlayTriggerStyles from './overlay-trigger.css.js';\nimport '../sp-overlay.js';\nimport { Placement } from '@floating-ui/dom';\nimport { BeforetoggleOpenEvent } from './AbstractOverlay.js';\nimport type { Overlay } from './Overlay.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    /**\n     * @type {\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"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 _longpressId = `longpress-describedby-descriptor`;\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 handleClickContent(\n        event: Event & { target: HTMLSlotElement }\n    ): void {\n        this.clickContent = this.getAssignedElementsFromSlot(event.target);\n    }\n\n    private handleLongpressContent(\n        event: Event & { target: HTMLSlotElement }\n    ): void {\n        this.longpressContent = this.getAssignedElementsFromSlot(event.target);\n    }\n\n    private handleHoverContent(\n        event: Event & { target: HTMLSlotElement }\n    ): void {\n        this.hoverContent = this.getAssignedElementsFromSlot(event.target);\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 override render(): TemplateResult {\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            <div id=\"overlay-content\">\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                        name=\"click-content\"\n                        @slotchange=${this.handleClickContent}\n                    ></slot>\n                </sp-overlay>\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                        name=\"longpress-content\"\n                        @slotchange=${this.handleLongpressContent}\n                    ></slot>\n                    <slot name=\"longpress-describedby-descriptor\"></slot>\n                </sp-overlay>\n                <sp-overlay\n                    id=\"hover-overlay\"\n                    ?disabled=${this.disabled ||\n                    !this.hoverContent.length ||\n                    (!!this.open && this.open !== 'hover')}\n                    ?open=${this.open === 'hover' && !!this.hoverContent.length}\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                        name=\"hover-content\"\n                        @slotchange=${this.handleHoverContent}\n                    ></slot>\n                </sp-overlay>\n                <slot name=${this._longpressId}></slot>\n            </div>\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", "__decorateClass"]
+  "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 './AbstractOverlay.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                ?disabled=${this.disabled ||\n                !this.hoverContent.length ||\n                (!!this.open && this.open !== 'hover')}\n                ?open=${this.open === 'hover' && !!this.hoverContent.length}\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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",
+  "names": ["html", "SpectrumElement", "property", "query", "state", "overlayTriggerStyles", "slot", "event", "target", "type", "changes", "_a", "_b", "_c", "_d", "_e", "_f", "name", "content", "__decorateClass"]
 }

package/src/overlay-trigger.css.dev.js

@@ -1,7 +1,7 @@
 "use strict";
 import { css } from "@spectrum-web-components/base";
 const styles = css`
-:host([disabled]) ::slotted([slot=trigger]){pointer-events:none}
+:host([disabled]) ::slotted([slot=trigger]){pointer-events:none}slot[name=longpress-describedby-descriptor]{display:none}
 `;
 export default styles;
 //# sourceMappingURL=overlay-trigger.css.dev.js.map

package/src/overlay-trigger.css.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["overlay-trigger.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host([disabled]) ::slotted([slot=trigger]){pointer-events:none}\n`;\nexport default styles;"],
+  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host([disabled]) ::slotted([slot=trigger]){pointer-events:none}slot[name=longpress-describedby-descriptor]{display:none}\n`;\nexport default styles;"],
   "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
   "names": []
 }

package/src/overlay-trigger.css.js

@@ -1,4 +1,4 @@
-"use strict";import{css as t}from"@spectrum-web-components/base";const e=t`
-:host([disabled]) ::slotted([slot=trigger]){pointer-events:none}
-`;export default e;
+"use strict";import{css as e}from"@spectrum-web-components/base";const s=e`
+:host([disabled]) ::slotted([slot=trigger]){pointer-events:none}slot[name=longpress-describedby-descriptor]{display:none}
+`;export default s;
 //# sourceMappingURL=overlay-trigger.css.js.map

package/src/overlay-trigger.css.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["overlay-trigger.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host([disabled]) ::slotted([slot=trigger]){pointer-events:none}\n`;\nexport default styles;"],
+  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host([disabled]) ::slotted([slot=trigger]){pointer-events:none}slot[name=longpress-describedby-descriptor]{display:none}\n`;\nexport default styles;"],
   "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
   "names": ["css", "styles"]
 }

package/src/overlay.css.dev.js

@@ -3,7 +3,7 @@ import { css } from "@spectrum-web-components/base";
 const styles = css`
 :host{--swc-overlay-animation-distance:var(
 --spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)
-);display:contents;pointer-events:none}.dialog{--sp-overlay-open:true;background:none;border:0;box-sizing:border-box;display:flex;inset:auto;left:0;margin:0;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);opacity:1!important;overflow:visible;padding:0;position:fixed;top:0}:host(:not([open])) .dialog{--sp-overlay-open:false}.dialog:not([is-visible]){translate:-999em -999em!important}.dialog:focus{outline:none}.dialog::backdrop{display:none}.dialog:before{content:"";inset:-999em;pointer-events:auto!important;position:absolute}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto}::slotted(sp-popover){--mod-popover-pointer-width:max(var(--spectrum-popover-pointer-width),var(--spectrum-popover-pointer-height));--mod-popover-pointer-height:max(var(--spectrum-popover-pointer-width),var(--spectrum-popover-pointer-height));position:static}::slotted(sp-tooltip){--swc-tooltip-margin:0}.dialog:not([actual-placement])[placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports (not selector(:open)) and (not selector(:popover-open)){:host:not([open]) .dialog{pointer-events:none}.dialog[actual-placement]{z-index:calc(var(--swc-overlay-z-index-base, 1000) + var(--swc-overlay-open-count))}}
+);display:contents;pointer-events:none}.dialog{--sp-overlay-open:true;background:none;border:0;box-sizing:border-box;display:flex;height:auto;inset:auto;left:0;margin:0;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);opacity:1!important;overflow:visible;padding:0;position:fixed;top:0}.dialog:not([is-visible]){translate:-999em -999em!important}.dialog:focus{outline:none}dialog:modal{--mod-popover-filter:var(--spectrum-popover-filter)}:host(:not([open])) .dialog{--sp-overlay-open:false}.dialog::backdrop{display:none}.dialog:before{content:"";inset:-999em;pointer-events:auto!important;position:absolute}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto}::slotted(sp-popover){position:static}::slotted(sp-tooltip){--swc-tooltip-margin:0}.dialog:not([actual-placement])[placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports (not selector(:open)) and (not selector(:popover-open)){:host:not([open]) .dialog{pointer-events:none}.dialog[actual-placement]{z-index:calc(var(--swc-overlay-z-index-base, 1000) + var(--swc-overlay-open-count))}}
 `;
 export default styles;
 //# sourceMappingURL=overlay.css.dev.js.map

package/src/overlay.css.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["overlay.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--swc-overlay-animation-distance:var(\n--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)\n);display:contents;pointer-events:none}.dialog{--sp-overlay-open:true;background:none;border:0;box-sizing:border-box;display:flex;inset:auto;left:0;margin:0;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);opacity:1!important;overflow:visible;padding:0;position:fixed;top:0}:host(:not([open])) .dialog{--sp-overlay-open:false}.dialog:not([is-visible]){translate:-999em -999em!important}.dialog:focus{outline:none}.dialog::backdrop{display:none}.dialog:before{content:\"\";inset:-999em;pointer-events:auto!important;position:absolute}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto}::slotted(sp-popover){--mod-popover-pointer-width:max(var(--spectrum-popover-pointer-width),var(--spectrum-popover-pointer-height));--mod-popover-pointer-height:max(var(--spectrum-popover-pointer-width),var(--spectrum-popover-pointer-height));position:static}::slotted(sp-tooltip){--swc-tooltip-margin:0}.dialog:not([actual-placement])[placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports (not selector(:open)) and (not selector(:popover-open)){:host:not([open]) .dialog{pointer-events:none}.dialog[actual-placement]{z-index:calc(var(--swc-overlay-z-index-base, 1000) + var(--swc-overlay-open-count))}}\n`;\nexport default styles;"],
+  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--swc-overlay-animation-distance:var(\n--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)\n);display:contents;pointer-events:none}.dialog{--sp-overlay-open:true;background:none;border:0;box-sizing:border-box;display:flex;height:auto;inset:auto;left:0;margin:0;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);opacity:1!important;overflow:visible;padding:0;position:fixed;top:0}.dialog:not([is-visible]){translate:-999em -999em!important}.dialog:focus{outline:none}dialog:modal{--mod-popover-filter:var(--spectrum-popover-filter)}:host(:not([open])) .dialog{--sp-overlay-open:false}.dialog::backdrop{display:none}.dialog:before{content:\"\";inset:-999em;pointer-events:auto!important;position:absolute}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto}::slotted(sp-popover){position:static}::slotted(sp-tooltip){--swc-tooltip-margin:0}.dialog:not([actual-placement])[placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports (not selector(:open)) and (not selector(:popover-open)){:host:not([open]) .dialog{pointer-events:none}.dialog[actual-placement]{z-index:calc(var(--swc-overlay-z-index-base, 1000) + var(--swc-overlay-open-count))}}\n`;\nexport default styles;"],
   "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAKf,eAAe;",
   "names": []
 }

package/src/overlay.css.js

@@ -1,6 +1,6 @@
 "use strict";import{css as a}from"@spectrum-web-components/base";const o=a`
 :host{--swc-overlay-animation-distance:var(
 --spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)
-);display:contents;pointer-events:none}.dialog{--sp-overlay-open:true;background:none;border:0;box-sizing:border-box;display:flex;inset:auto;left:0;margin:0;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);opacity:1!important;overflow:visible;padding:0;position:fixed;top:0}:host(:not([open])) .dialog{--sp-overlay-open:false}.dialog:not([is-visible]){translate:-999em -999em!important}.dialog:focus{outline:none}.dialog::backdrop{display:none}.dialog:before{content:"";inset:-999em;pointer-events:auto!important;position:absolute}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto}::slotted(sp-popover){--mod-popover-pointer-width:max(var(--spectrum-popover-pointer-width),var(--spectrum-popover-pointer-height));--mod-popover-pointer-height:max(var(--spectrum-popover-pointer-width),var(--spectrum-popover-pointer-height));position:static}::slotted(sp-tooltip){--swc-tooltip-margin:0}.dialog:not([actual-placement])[placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports (not selector(:open)) and (not selector(:popover-open)){:host:not([open]) .dialog{pointer-events:none}.dialog[actual-placement]{z-index:calc(var(--swc-overlay-z-index-base, 1000) + var(--swc-overlay-open-count))}}
+);display:contents;pointer-events:none}.dialog{--sp-overlay-open:true;background:none;border:0;box-sizing:border-box;display:flex;height:auto;inset:auto;left:0;margin:0;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);opacity:1!important;overflow:visible;padding:0;position:fixed;top:0}.dialog:not([is-visible]){translate:-999em -999em!important}.dialog:focus{outline:none}dialog:modal{--mod-popover-filter:var(--spectrum-popover-filter)}:host(:not([open])) .dialog{--sp-overlay-open:false}.dialog::backdrop{display:none}.dialog:before{content:"";inset:-999em;pointer-events:auto!important;position:absolute}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto}::slotted(sp-popover){position:static}::slotted(sp-tooltip){--swc-tooltip-margin:0}.dialog:not([actual-placement])[placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{--mod-popover-filter:var(--spectrum-popover-filter);opacity:1}}@supports (not selector(:open)) and (not selector(:popover-open)){:host:not([open]) .dialog{pointer-events:none}.dialog[actual-placement]{z-index:calc(var(--swc-overlay-z-index-base, 1000) + var(--swc-overlay-open-count))}}
 `;export default o;
 //# sourceMappingURL=overlay.css.js.map