@spectrum-web-components/overlay 0.35.1-rc.15 → 0.35.1-rc.24

package/README.md

@@ -68,76 +68,79 @@ By leveraging the `trigger` attribute to pass an ID reference to another element
             <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
         </sp-action-button>
     </sp-action-group>
+    <sp-overlay trigger="trigger-1@hover">
+        <sp-tooltip>Hover</sp-tooltip>
+    </sp-overlay>
+    <sp-overlay
+        trigger="trigger-1@longpress"
+        type="auto"
+        placement="right-start"
+    >
+        <sp-popover class="overlay-demo-popover" tip>
+            <sp-action-group vertical quiet>
+                <sp-action-button>
+                    <sp-icon-anchor-select slot="icon"></sp-icon-anchor-select>
+                </sp-action-button>
+                <sp-action-button>
+                    <sp-icon-polygon-select
+                        slot="icon"
+                    ></sp-icon-polygon-select>
+                </sp-action-button>
+                <sp-action-button>
+                    <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
+                </sp-action-button>
+            </sp-action-group>
+        </sp-popover>
+    </sp-overlay>
+    <sp-overlay trigger="trigger-2@hover">
+        <sp-tooltip>Hover</sp-tooltip>
+    </sp-overlay>
+    <sp-overlay
+        trigger="trigger-2@longpress"
+        type="auto"
+        placement="right-start"
+    >
+        <sp-popover class="overlay-demo-popover" tip>
+            <sp-action-group vertical quiet>
+                <sp-action-button>
+                    <sp-icon-anchor-select slot="icon"></sp-icon-anchor-select>
+                </sp-action-button>
+                <sp-action-button>
+                    <sp-icon-polygon-select
+                        slot="icon"
+                    ></sp-icon-polygon-select>
+                </sp-action-button>
+                <sp-action-button>
+                    <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
+                </sp-action-button>
+            </sp-action-group>
+        </sp-popover>
+    </sp-overlay>
+    <sp-overlay trigger="trigger-3@hover">
+        <sp-tooltip>Hover</sp-tooltip>
+    </sp-overlay>
+    <sp-overlay
+        trigger="trigger-3@longpress"
+        type="auto"
+        placement="right-start"
+    >
+        <sp-popover class="overlay-demo-popover" tip>
+            <sp-action-group vertical quiet>
+                <sp-action-button>
+                    <sp-icon-anchor-select slot="icon"></sp-icon-anchor-select>
+                </sp-action-button>
+                <sp-action-button>
+                    <sp-icon-polygon-select
+                        slot="icon"
+                    ></sp-icon-polygon-select>
+                </sp-action-button>
+                <sp-action-button>
+                    <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
+                </sp-action-button>
+            </sp-action-group>
+        </sp-popover>
+    </sp-overlay>
 </sp-popover>
-<sp-overlay ?delayed="${delayed}" trigger="trigger-1@hover">
-    <sp-tooltip>Hover</sp-tooltip>
-</sp-overlay>
-<sp-overlay
-    trigger="trigger-1@longpress"
-    type="auto"
-    placement="right-start"
-    .offset="${popoverOffset}"
->
-    <sp-popover class="overlay-demo-popover" tip>
-        <sp-action-group vertical quiet>
-            <sp-action-button>
-                <sp-icon-anchor-select slot="icon"></sp-icon-anchor-select>
-            </sp-action-button>
-            <sp-action-button>
-                <sp-icon-polygon-select slot="icon"></sp-icon-polygon-select>
-            </sp-action-button>
-            <sp-action-button>
-                <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
-            </sp-action-button>
-        </sp-action-group>
-    </sp-popover>
-</sp-overlay>
-<sp-overlay ?delayed="${delayed}" trigger="trigger-2@hover">
-    <sp-tooltip>Hover</sp-tooltip>
-</sp-overlay>
-<sp-overlay
-    trigger="trigger-2@longpress"
-    type="auto"
-    placement="right-start"
-    .offset="${popoverOffset}"
->
-    <sp-popover class="overlay-demo-popover" tip>
-        <sp-action-group vertical quiet>
-            <sp-action-button>
-                <sp-icon-anchor-select slot="icon"></sp-icon-anchor-select>
-            </sp-action-button>
-            <sp-action-button>
-                <sp-icon-polygon-select slot="icon"></sp-icon-polygon-select>
-            </sp-action-button>
-            <sp-action-button>
-                <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
-            </sp-action-button>
-        </sp-action-group>
-    </sp-popover>
-</sp-overlay>
-<sp-overlay ?delayed="${delayed}" trigger="trigger-3@hover">
-    <sp-tooltip>Hover</sp-tooltip>
-</sp-overlay>
-<sp-overlay
-    trigger="trigger-3@longpress"
-    type="auto"
-    placement="right-start"
-    .offset="${popoverOffset}"
->
-    <sp-popover class="overlay-demo-popover" tip>
-        <sp-action-group vertical quiet>
-            <sp-action-button>
-                <sp-icon-anchor-select slot="icon"></sp-icon-anchor-select>
-            </sp-action-button>
-            <sp-action-button>
-                <sp-icon-polygon-select slot="icon"></sp-icon-polygon-select>
-            </sp-action-button>
-            <sp-action-button>
-                <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
-            </sp-action-button>
-        </sp-action-group>
-    </sp-popover>
-</sp-overlay>
 ```
 
 ## API

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/overlay",
-    "version": "0.35.1-rc.15+9b76319e4",
+    "version": "0.35.1-rc.24+e3649e123",
     "publishConfig": {
         "access": "public"
     },
@@ -128,11 +128,11 @@
     "dependencies": {
         "@floating-ui/dom": "^1.5.1",
         "@floating-ui/utils": "0.1.1",
-        "@spectrum-web-components/action-button": "^0.35.1-rc.15+9b76319e4",
-        "@spectrum-web-components/base": "^0.35.1-rc.15+9b76319e4",
-        "@spectrum-web-components/reactive-controllers": "^0.35.1-rc.15+9b76319e4",
-        "@spectrum-web-components/shared": "^0.35.1-rc.15+9b76319e4",
-        "@spectrum-web-components/theme": "^0.35.1-rc.15+9b76319e4"
+        "@spectrum-web-components/action-button": "^0.35.1-rc.24+e3649e123",
+        "@spectrum-web-components/base": "^0.35.1-rc.24+e3649e123",
+        "@spectrum-web-components/reactive-controllers": "^0.35.1-rc.24+e3649e123",
+        "@spectrum-web-components/shared": "^0.35.1-rc.24+e3649e123",
+        "@spectrum-web-components/theme": "^0.35.1-rc.24+e3649e123"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
@@ -144,5 +144,5 @@
         "./stories/overlay-story-components.js",
         "./**/*.dev.js"
     ],
-    "gitHead": "9b76319e4f1cc7cb0dd03e9d9debf544e5bed4e9"
+    "gitHead": "e3649e1230ed727048988a452969c38ced5467ac"
 }

package/src/AbstractOverlay.d.ts

@@ -1,5 +1,5 @@
 import { SpectrumElement } from '@spectrum-web-components/base';
-import type { OpenableElement, OverlayOptions, OverlayOptionsV1, OverlayTypes, TriggerInteractionsV1 } from './overlay-types.js';
+import type { OpenableElement, OverlayOptions, OverlayOptionsV1, OverlayState, OverlayTypes, TriggerInteractionsV1 } from './overlay-types.js';
 import { Overlay } from './Overlay.js';
 import type { VirtualTrigger } from './VirtualTrigger.js';
 import { OverlayTimer } from './overlay-timer.js';
@@ -36,7 +36,6 @@ export declare class AbstractOverlay extends SpectrumElement {
     dispose: () => void;
     protected ensureOnDOM(_targetOpenState: boolean): Promise<void>;
     elements: OpenableElement[];
-    isVisible: boolean;
     protected makeTransition(_targetOpenState: boolean): Promise<HTMLElement | null>;
     protected manageDelay(_targetOpenState: boolean): Promise<void>;
     protected manageDialogOpen(): Promise<void>;
@@ -46,6 +45,9 @@ export declare class AbstractOverlay extends SpectrumElement {
     set open(_open: boolean);
     protected placementController: PlacementController;
     receivesFocus: 'true' | 'false' | 'auto';
+    get state(): OverlayState;
+    set state(_state: OverlayState);
+    protected _state: OverlayState;
     triggerElement: HTMLElement | VirtualTrigger | null;
     type: OverlayTypes;
     static update(): void;

package/src/AbstractOverlay.dev.js

@@ -112,6 +112,12 @@ export class AbstractOverlay extends SpectrumElement {
   set open(_open) {
     return;
   }
+  get state() {
+    return "closed";
+  }
+  set state(_state) {
+    return;
+  }
   static update() {
     const overlayUpdateEvent = new CustomEvent("sp-update-overlays", {
       bubbles: true,

package/src/AbstractOverlay.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["AbstractOverlay.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*/\nimport { SpectrumElement } from '@spectrum-web-components/base';\nimport { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.js';\n\nimport type {\n    OpenableElement,\n    OverlayOptions,\n    OverlayOptionsV1,\n    OverlayTypes,\n    TriggerInteractionsV1,\n} from './overlay-types.dev.js'\nimport { Overlay } from './Overlay.dev.js'\nimport type { VirtualTrigger } from './VirtualTrigger.dev.js'\nimport { OverlayTimer } from './overlay-timer.dev.js'\nimport { PlacementController } from './PlacementController.dev.js'\n\nexport const overlayTimer = new OverlayTimer();\n\nexport const noop = (): void => {\n    return;\n};\n\nexport class BeforetoggleClosedEvent extends Event {\n    currentState = 'open';\n    newState = 'closed';\n    constructor() {\n        super('beforetoggle', {\n            bubbles: false,\n            composed: false,\n        });\n    }\n}\n\nexport class BeforetoggleOpenEvent extends Event {\n    currentState = 'closed';\n    newState = 'open';\n    constructor() {\n        super('beforetoggle', {\n            bubbles: false,\n            composed: false,\n        });\n    }\n}\n\n/**\n * Apply a \"transitionend\" listener to an element that may not transition but\n * guarantee the callback will be fired either way.\n *\n * @param el {HTMLElement} - Target of the \"transition\" listeners.\n * @param action {Function} - Method to trigger the \"transition\".\n * @param cb {Function} - Callback to trigger when the \"transition\" has ended.\n */\nexport const guaranteedAllTransitionend = (\n    el: HTMLElement,\n    action: () => void,\n    cb: () => void\n): void => {\n    const runningTransitions = new Map<string, number>();\n    const cleanup = (): void => {\n        el.removeEventListener('transitionrun', handleTransitionrun);\n        el.removeEventListener('transitionend', handleTransitionend);\n        cb();\n    };\n    let guarantee2: number;\n    let guarantee3: number;\n    // WebKit fires `transitionrun` a little earlier, the multiple guarantees here\n    // allow WebKit to be caught, but doesn't remove the animation listener until\n    // after it would have fired in Chromium.\n    const guarantee1 = requestAnimationFrame(() => {\n        guarantee2 = requestAnimationFrame(() => {\n            guarantee3 = requestAnimationFrame(() => {\n                cleanup();\n            });\n        });\n    });\n    const handleTransitionend = (event: TransitionEvent): void => {\n        if (event.target !== el) {\n            return;\n        }\n        runningTransitions.set(\n            event.propertyName,\n            (runningTransitions.get(event.propertyName) as number) - 1\n        );\n        if (!runningTransitions.get(event.propertyName)) {\n            runningTransitions.delete(event.propertyName);\n        }\n        if (runningTransitions.size === 0) {\n            cleanup();\n        }\n    };\n    const handleTransitionrun = (event: TransitionEvent): void => {\n        if (event.target !== el) {\n            return;\n        }\n        if (!runningTransitions.has(event.propertyName)) {\n            runningTransitions.set(event.propertyName, 0);\n        }\n        runningTransitions.set(\n            event.propertyName,\n            (runningTransitions.get(event.propertyName) as number) + 1\n        );\n        cancelAnimationFrame(guarantee1);\n        cancelAnimationFrame(guarantee2);\n        cancelAnimationFrame(guarantee3);\n    };\n    el.addEventListener('transitionrun', handleTransitionrun);\n    el.addEventListener('transitionend', handleTransitionend);\n    action();\n};\n\nexport function nextFrame(): Promise<void> {\n    return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nexport class AbstractOverlay extends SpectrumElement {\n    protected async applyFocus(\n        _targetOpenState: boolean,\n        _focusEl: HTMLElement | null\n    ): Promise<void> {\n        return;\n    }\n    delayed!: boolean;\n    dialogEl!: HTMLDialogElement & {\n        showPopover(): void;\n        hidePopover(): void;\n    };\n    dispose = noop;\n    protected async ensureOnDOM(_targetOpenState: boolean): Promise<void> {\n        return;\n    }\n    elements!: OpenableElement[];\n    isVisible!: boolean;\n    protected async makeTransition(\n        _targetOpenState: boolean\n    ): Promise<HTMLElement | null> {\n        return null;\n    }\n    protected async manageDelay(_targetOpenState: boolean): Promise<void> {\n        return;\n    }\n    protected async manageDialogOpen(): Promise<void> {\n        return;\n    }\n    protected async managePopoverOpen(): Promise<void> {\n        return;\n    }\n    protected managePosition(): void {\n        return;\n    }\n    get open(): boolean {\n        return false;\n    }\n    set open(_open: boolean) {\n        return;\n    }\n    protected placementController!: PlacementController;\n    receivesFocus!: 'true' | 'false' | 'auto';\n    triggerElement!: HTMLElement | VirtualTrigger | null;\n    type!: OverlayTypes;\n\n    public static update(): void {\n        const overlayUpdateEvent = new CustomEvent('sp-update-overlays', {\n            bubbles: true,\n            composed: true,\n            cancelable: true,\n        });\n        document.dispatchEvent(overlayUpdateEvent);\n    }\n\n    public static async open(\n        trigger: HTMLElement,\n        interaction: TriggerInteractionsV1,\n        content: HTMLElement,\n        optionsV1: OverlayOptionsV1\n    ): Promise<() => void>;\n    public static async open(\n        content: HTMLElement,\n        options?: OverlayOptions\n    ): Promise<Overlay>;\n    public static async open(\n        triggerOrContent: HTMLElement,\n        interactionOrOptions:\n            | TriggerInteractionsV1\n            | OverlayOptions\n            | undefined,\n        content?: HTMLElement,\n        optionsV1?: OverlayOptionsV1\n    ): Promise<Overlay | (() => void)> {\n        const v2 = arguments.length === 2;\n        const overlayContent = content || triggerOrContent;\n        const overlay = new Overlay();\n        let restored = false;\n        overlay.dispose = () => {\n            overlay.addEventListener('sp-closed', () => {\n                if (!restored) {\n                    restoreContent();\n                    restored = true;\n                }\n                requestAnimationFrame(() => {\n                    overlay.remove();\n                });\n            });\n            overlay.open = false;\n            overlay.dispose = noop;\n        };\n        /**\n         * Since content must exist in an <sp-overlay>, we need a way to get it there.\n         * The best & most-direct way is to declaratively use an <sp-overlay> element,\n         * but for imperative users, we'll reparent content into an overlay that we've created for them.\n         **/\n        const restoreContent = reparentChildren([overlayContent], overlay, {\n            position: 'beforeend',\n            prepareCallback: (el) => {\n                // Ensure that content to be overlaid is no longer targetted to a specific `slot`.\n                // This allow for it to be visible in the overlaid context.\n                const slot = el.slot;\n                el.removeAttribute('slot');\n                return () => {\n                    el.slot = slot;\n                };\n            },\n        });\n\n        const v1 = !v2 && overlayContent && optionsV1;\n        if (v1) {\n            if (window.__swc.DEBUG) {\n                window.__swc.warn(\n                    overlay,\n                    `You are interacting with an ${overlay.localName} element via a deprecated imperative API. This API will be removed in a future version of the SWC library. Consider leveraging an ${overlay.localName} directly.`,\n                    'https://opensource.adobe.com/spectrum-web-components/components/overlay/',\n                    { level: 'deprecation' }\n                );\n            }\n            const trigger = triggerOrContent;\n            const interaction = interactionOrOptions;\n            const options = optionsV1;\n            overlay.delayed =\n                options.delayed || overlayContent.hasAttribute('delayed');\n            overlay.receivesFocus = options.receivesFocus ?? 'auto';\n            overlay.triggerElement = options.virtualTrigger || trigger;\n            overlay.type =\n                interaction === 'modal'\n                    ? 'modal'\n                    : interaction === 'hover'\n                    ? 'hint'\n                    : 'auto';\n            overlay.offset = options.offset ?? 6;\n            overlay.placement = options.placement;\n            overlay.willPreventClose = !!options.notImmediatelyClosable;\n            trigger.insertAdjacentElement('afterend', overlay);\n            await overlay.updateComplete;\n            overlay.open = true;\n            return overlay.dispose;\n        }\n\n        const options = interactionOrOptions as OverlayOptions;\n        overlay.append(overlayContent);\n        overlay.delayed =\n            options.delayed || overlayContent.hasAttribute('delayed');\n        overlay.receivesFocus = options.receivesFocus ?? 'auto';\n        overlay.triggerElement = options.trigger || null;\n        overlay.type = options.type || 'modal';\n        overlay.offset = options.offset ?? 6;\n        overlay.placement = options.placement;\n        overlay.willPreventClose = !!options.notImmediatelyClosable;\n        overlay.updateComplete.then(() => {\n            // Do we want to \"open\" this path, or leave that to the consumer?\n            overlay.open = true;\n        });\n        return overlay;\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*/\nimport { SpectrumElement } from '@spectrum-web-components/base';\nimport { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.js';\n\nimport type {\n    OpenableElement,\n    OverlayOptions,\n    OverlayOptionsV1,\n    OverlayState,\n    OverlayTypes,\n    TriggerInteractionsV1,\n} from './overlay-types.dev.js'\nimport { Overlay } from './Overlay.dev.js'\nimport type { VirtualTrigger } from './VirtualTrigger.dev.js'\nimport { OverlayTimer } from './overlay-timer.dev.js'\nimport { PlacementController } from './PlacementController.dev.js'\n\nexport const overlayTimer = new OverlayTimer();\n\nexport const noop = (): void => {\n    return;\n};\n\nexport class BeforetoggleClosedEvent extends Event {\n    currentState = 'open';\n    newState = 'closed';\n    constructor() {\n        super('beforetoggle', {\n            bubbles: false,\n            composed: false,\n        });\n    }\n}\n\nexport class BeforetoggleOpenEvent extends Event {\n    currentState = 'closed';\n    newState = 'open';\n    constructor() {\n        super('beforetoggle', {\n            bubbles: false,\n            composed: false,\n        });\n    }\n}\n\n/**\n * Apply a \"transitionend\" listener to an element that may not transition but\n * guarantee the callback will be fired either way.\n *\n * @param el {HTMLElement} - Target of the \"transition\" listeners.\n * @param action {Function} - Method to trigger the \"transition\".\n * @param cb {Function} - Callback to trigger when the \"transition\" has ended.\n */\nexport const guaranteedAllTransitionend = (\n    el: HTMLElement,\n    action: () => void,\n    cb: () => void\n): void => {\n    const runningTransitions = new Map<string, number>();\n    const cleanup = (): void => {\n        el.removeEventListener('transitionrun', handleTransitionrun);\n        el.removeEventListener('transitionend', handleTransitionend);\n        cb();\n    };\n    let guarantee2: number;\n    let guarantee3: number;\n    // WebKit fires `transitionrun` a little earlier, the multiple guarantees here\n    // allow WebKit to be caught, but doesn't remove the animation listener until\n    // after it would have fired in Chromium.\n    const guarantee1 = requestAnimationFrame(() => {\n        guarantee2 = requestAnimationFrame(() => {\n            guarantee3 = requestAnimationFrame(() => {\n                cleanup();\n            });\n        });\n    });\n    const handleTransitionend = (event: TransitionEvent): void => {\n        if (event.target !== el) {\n            return;\n        }\n        runningTransitions.set(\n            event.propertyName,\n            (runningTransitions.get(event.propertyName) as number) - 1\n        );\n        if (!runningTransitions.get(event.propertyName)) {\n            runningTransitions.delete(event.propertyName);\n        }\n        if (runningTransitions.size === 0) {\n            cleanup();\n        }\n    };\n    const handleTransitionrun = (event: TransitionEvent): void => {\n        if (event.target !== el) {\n            return;\n        }\n        if (!runningTransitions.has(event.propertyName)) {\n            runningTransitions.set(event.propertyName, 0);\n        }\n        runningTransitions.set(\n            event.propertyName,\n            (runningTransitions.get(event.propertyName) as number) + 1\n        );\n        cancelAnimationFrame(guarantee1);\n        cancelAnimationFrame(guarantee2);\n        cancelAnimationFrame(guarantee3);\n    };\n    el.addEventListener('transitionrun', handleTransitionrun);\n    el.addEventListener('transitionend', handleTransitionend);\n    action();\n};\n\nexport function nextFrame(): Promise<void> {\n    return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nexport class AbstractOverlay extends SpectrumElement {\n    protected async applyFocus(\n        _targetOpenState: boolean,\n        _focusEl: HTMLElement | null\n    ): Promise<void> {\n        return;\n    }\n    delayed!: boolean;\n    dialogEl!: HTMLDialogElement & {\n        showPopover(): void;\n        hidePopover(): void;\n    };\n    dispose = noop;\n    protected async ensureOnDOM(_targetOpenState: boolean): Promise<void> {\n        return;\n    }\n    elements!: OpenableElement[];\n    protected async makeTransition(\n        _targetOpenState: boolean\n    ): Promise<HTMLElement | null> {\n        return null;\n    }\n    protected async manageDelay(_targetOpenState: boolean): Promise<void> {\n        return;\n    }\n    protected async manageDialogOpen(): Promise<void> {\n        return;\n    }\n    protected async managePopoverOpen(): Promise<void> {\n        return;\n    }\n    protected managePosition(): void {\n        return;\n    }\n    get open(): boolean {\n        return false;\n    }\n    set open(_open: boolean) {\n        return;\n    }\n    protected placementController!: PlacementController;\n    receivesFocus!: 'true' | 'false' | 'auto';\n    get state(): OverlayState {\n        return 'closed';\n    }\n    set state(_state: OverlayState) {\n        return;\n    }\n    protected _state!: OverlayState;\n    triggerElement!: HTMLElement | VirtualTrigger | null;\n    type!: OverlayTypes;\n\n    public static update(): void {\n        const overlayUpdateEvent = new CustomEvent('sp-update-overlays', {\n            bubbles: true,\n            composed: true,\n            cancelable: true,\n        });\n        document.dispatchEvent(overlayUpdateEvent);\n    }\n\n    public static async open(\n        trigger: HTMLElement,\n        interaction: TriggerInteractionsV1,\n        content: HTMLElement,\n        optionsV1: OverlayOptionsV1\n    ): Promise<() => void>;\n    public static async open(\n        content: HTMLElement,\n        options?: OverlayOptions\n    ): Promise<Overlay>;\n    public static async open(\n        triggerOrContent: HTMLElement,\n        interactionOrOptions:\n            | TriggerInteractionsV1\n            | OverlayOptions\n            | undefined,\n        content?: HTMLElement,\n        optionsV1?: OverlayOptionsV1\n    ): Promise<Overlay | (() => void)> {\n        const v2 = arguments.length === 2;\n        const overlayContent = content || triggerOrContent;\n        const overlay = new Overlay();\n        let restored = false;\n        overlay.dispose = () => {\n            overlay.addEventListener('sp-closed', () => {\n                if (!restored) {\n                    restoreContent();\n                    restored = true;\n                }\n                requestAnimationFrame(() => {\n                    overlay.remove();\n                });\n            });\n            overlay.open = false;\n            overlay.dispose = noop;\n        };\n        /**\n         * Since content must exist in an <sp-overlay>, we need a way to get it there.\n         * The best & most-direct way is to declaratively use an <sp-overlay> element,\n         * but for imperative users, we'll reparent content into an overlay that we've created for them.\n         **/\n        const restoreContent = reparentChildren([overlayContent], overlay, {\n            position: 'beforeend',\n            prepareCallback: (el) => {\n                // Ensure that content to be overlaid is no longer targetted to a specific `slot`.\n                // This allow for it to be visible in the overlaid context.\n                const slot = el.slot;\n                el.removeAttribute('slot');\n                return () => {\n                    el.slot = slot;\n                };\n            },\n        });\n\n        const v1 = !v2 && overlayContent && optionsV1;\n        if (v1) {\n            if (window.__swc.DEBUG) {\n                window.__swc.warn(\n                    overlay,\n                    `You are interacting with an ${overlay.localName} element via a deprecated imperative API. This API will be removed in a future version of the SWC library. Consider leveraging an ${overlay.localName} directly.`,\n                    'https://opensource.adobe.com/spectrum-web-components/components/overlay/',\n                    { level: 'deprecation' }\n                );\n            }\n            const trigger = triggerOrContent;\n            const interaction = interactionOrOptions;\n            const options = optionsV1;\n            overlay.delayed =\n                options.delayed || overlayContent.hasAttribute('delayed');\n            overlay.receivesFocus = options.receivesFocus ?? 'auto';\n            overlay.triggerElement = options.virtualTrigger || trigger;\n            overlay.type =\n                interaction === 'modal'\n                    ? 'modal'\n                    : interaction === 'hover'\n                    ? 'hint'\n                    : 'auto';\n            overlay.offset = options.offset ?? 6;\n            overlay.placement = options.placement;\n            overlay.willPreventClose = !!options.notImmediatelyClosable;\n            trigger.insertAdjacentElement('afterend', overlay);\n            await overlay.updateComplete;\n            overlay.open = true;\n            return overlay.dispose;\n        }\n\n        const options = interactionOrOptions as OverlayOptions;\n        overlay.append(overlayContent);\n        overlay.delayed =\n            options.delayed || overlayContent.hasAttribute('delayed');\n        overlay.receivesFocus = options.receivesFocus ?? 'auto';\n        overlay.triggerElement = options.trigger || null;\n        overlay.type = options.type || 'modal';\n        overlay.offset = options.offset ?? 6;\n        overlay.placement = options.placement;\n        overlay.willPreventClose = !!options.notImmediatelyClosable;\n        overlay.updateComplete.then(() => {\n            // Do we want to \"open\" this path, or leave that to the consumer?\n            overlay.open = true;\n        });\n        return overlay;\n    }\n}\n"],
+  "mappings": "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",
   "names": ["options"]
 }

package/src/AbstractOverlay.js

@@ -1,2 +1,2 @@
-"use strict";import{SpectrumElement as E}from"@spectrum-web-components/base";import{reparentChildren as O}from"@spectrum-web-components/shared/src/reparent-children.js";import{Overlay as T}from"./Overlay.js";import{OverlayTimer as w}from"./overlay-timer.js";export const overlayTimer=new w,noop=()=>{};export class BeforetoggleClosedEvent extends Event{constructor(){super("beforetoggle",{bubbles:!1,composed:!1});this.currentState="open";this.newState="closed"}}export class BeforetoggleOpenEvent extends Event{constructor(){super("beforetoggle",{bubbles:!1,composed:!1});this.currentState="closed";this.newState="open"}}export const guaranteedAllTransitionend=(o,c,n)=>{const t=new Map,d=()=>{o.removeEventListener("transitionrun",m),o.removeEventListener("transitionend",e),n()};let p,u;const a=requestAnimationFrame(()=>{p=requestAnimationFrame(()=>{u=requestAnimationFrame(()=>{d()})})}),e=r=>{r.target===o&&(t.set(r.propertyName,t.get(r.propertyName)-1),t.get(r.propertyName)||t.delete(r.propertyName),t.size===0&&d())},m=r=>{r.target===o&&(t.has(r.propertyName)||t.set(r.propertyName,0),t.set(r.propertyName,t.get(r.propertyName)+1),cancelAnimationFrame(a),cancelAnimationFrame(p),cancelAnimationFrame(u))};o.addEventListener("transitionrun",m),o.addEventListener("transitionend",e),c()};export function nextFrame(){return new Promise(o=>requestAnimationFrame(()=>o()))}export class AbstractOverlay extends E{constructor(){super(...arguments);this.dispose=noop}async applyFocus(n,t){}async ensureOnDOM(n){}async makeTransition(n){return null}async manageDelay(n){}async manageDialogOpen(){}async managePopoverOpen(){}managePosition(){}get open(){return!1}set open(n){}static update(){const n=new CustomEvent("sp-update-overlays",{bubbles:!0,composed:!0,cancelable:!0});document.dispatchEvent(n)}static async open(n,t,d,p){var y,g,b,f;const u=arguments.length===2,a=d||n,e=new T;let m=!1;e.dispose=()=>{e.addEventListener("sp-closed",()=>{m||(r(),m=!0),requestAnimationFrame(()=>{e.remove()})}),e.open=!1,e.dispose=noop};const r=O([a],e,{position:"beforeend",prepareCallback:i=>{const v=i.slot;return i.removeAttribute("slot"),()=>{i.slot=v}}});if(!u&&a&&p){const i=n,v=t,l=p;return e.delayed=l.delayed||a.hasAttribute("delayed"),e.receivesFocus=(y=l.receivesFocus)!=null?y:"auto",e.triggerElement=l.virtualTrigger||i,e.type=v==="modal"?"modal":v==="hover"?"hint":"auto",e.offset=(g=l.offset)!=null?g:6,e.placement=l.placement,e.willPreventClose=!!l.notImmediatelyClosable,i.insertAdjacentElement("afterend",e),await e.updateComplete,e.open=!0,e.dispose}const s=t;return e.append(a),e.delayed=s.delayed||a.hasAttribute("delayed"),e.receivesFocus=(b=s.receivesFocus)!=null?b:"auto",e.triggerElement=s.trigger||null,e.type=s.type||"modal",e.offset=(f=s.offset)!=null?f:6,e.placement=s.placement,e.willPreventClose=!!s.notImmediatelyClosable,e.updateComplete.then(()=>{e.open=!0}),e}}
+"use strict";import{SpectrumElement as E}from"@spectrum-web-components/base";import{reparentChildren as O}from"@spectrum-web-components/shared/src/reparent-children.js";import{Overlay as T}from"./Overlay.js";import{OverlayTimer as w}from"./overlay-timer.js";export const overlayTimer=new w,noop=()=>{};export class BeforetoggleClosedEvent extends Event{constructor(){super("beforetoggle",{bubbles:!1,composed:!1});this.currentState="open";this.newState="closed"}}export class BeforetoggleOpenEvent extends Event{constructor(){super("beforetoggle",{bubbles:!1,composed:!1});this.currentState="closed";this.newState="open"}}export const guaranteedAllTransitionend=(n,c,o)=>{const t=new Map,d=()=>{n.removeEventListener("transitionrun",m),n.removeEventListener("transitionend",e),o()};let p,u;const a=requestAnimationFrame(()=>{p=requestAnimationFrame(()=>{u=requestAnimationFrame(()=>{d()})})}),e=r=>{r.target===n&&(t.set(r.propertyName,t.get(r.propertyName)-1),t.get(r.propertyName)||t.delete(r.propertyName),t.size===0&&d())},m=r=>{r.target===n&&(t.has(r.propertyName)||t.set(r.propertyName,0),t.set(r.propertyName,t.get(r.propertyName)+1),cancelAnimationFrame(a),cancelAnimationFrame(p),cancelAnimationFrame(u))};n.addEventListener("transitionrun",m),n.addEventListener("transitionend",e),c()};export function nextFrame(){return new Promise(n=>requestAnimationFrame(()=>n()))}export class AbstractOverlay extends E{constructor(){super(...arguments);this.dispose=noop}async applyFocus(o,t){}async ensureOnDOM(o){}async makeTransition(o){return null}async manageDelay(o){}async manageDialogOpen(){}async managePopoverOpen(){}managePosition(){}get open(){return!1}set open(o){}get state(){return"closed"}set state(o){}static update(){const o=new CustomEvent("sp-update-overlays",{bubbles:!0,composed:!0,cancelable:!0});document.dispatchEvent(o)}static async open(o,t,d,p){var y,g,b,f;const u=arguments.length===2,a=d||o,e=new T;let m=!1;e.dispose=()=>{e.addEventListener("sp-closed",()=>{m||(r(),m=!0),requestAnimationFrame(()=>{e.remove()})}),e.open=!1,e.dispose=noop};const r=O([a],e,{position:"beforeend",prepareCallback:i=>{const v=i.slot;return i.removeAttribute("slot"),()=>{i.slot=v}}});if(!u&&a&&p){const i=o,v=t,l=p;return e.delayed=l.delayed||a.hasAttribute("delayed"),e.receivesFocus=(y=l.receivesFocus)!=null?y:"auto",e.triggerElement=l.virtualTrigger||i,e.type=v==="modal"?"modal":v==="hover"?"hint":"auto",e.offset=(g=l.offset)!=null?g:6,e.placement=l.placement,e.willPreventClose=!!l.notImmediatelyClosable,i.insertAdjacentElement("afterend",e),await e.updateComplete,e.open=!0,e.dispose}const s=t;return e.append(a),e.delayed=s.delayed||a.hasAttribute("delayed"),e.receivesFocus=(b=s.receivesFocus)!=null?b:"auto",e.triggerElement=s.trigger||null,e.type=s.type||"modal",e.offset=(f=s.offset)!=null?f:6,e.placement=s.placement,e.willPreventClose=!!s.notImmediatelyClosable,e.updateComplete.then(()=>{e.open=!0}),e}}
 //# sourceMappingURL=AbstractOverlay.js.map

package/src/AbstractOverlay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["AbstractOverlay.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*/\nimport { SpectrumElement } from '@spectrum-web-components/base';\nimport { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.js';\n\nimport type {\n    OpenableElement,\n    OverlayOptions,\n    OverlayOptionsV1,\n    OverlayTypes,\n    TriggerInteractionsV1,\n} from './overlay-types.js';\nimport { Overlay } from './Overlay.js';\nimport type { VirtualTrigger } from './VirtualTrigger.js';\nimport { OverlayTimer } from './overlay-timer.js';\nimport { PlacementController } from './PlacementController.js';\n\nexport const overlayTimer = new OverlayTimer();\n\nexport const noop = (): void => {\n    return;\n};\n\nexport class BeforetoggleClosedEvent extends Event {\n    currentState = 'open';\n    newState = 'closed';\n    constructor() {\n        super('beforetoggle', {\n            bubbles: false,\n            composed: false,\n        });\n    }\n}\n\nexport class BeforetoggleOpenEvent extends Event {\n    currentState = 'closed';\n    newState = 'open';\n    constructor() {\n        super('beforetoggle', {\n            bubbles: false,\n            composed: false,\n        });\n    }\n}\n\n/**\n * Apply a \"transitionend\" listener to an element that may not transition but\n * guarantee the callback will be fired either way.\n *\n * @param el {HTMLElement} - Target of the \"transition\" listeners.\n * @param action {Function} - Method to trigger the \"transition\".\n * @param cb {Function} - Callback to trigger when the \"transition\" has ended.\n */\nexport const guaranteedAllTransitionend = (\n    el: HTMLElement,\n    action: () => void,\n    cb: () => void\n): void => {\n    const runningTransitions = new Map<string, number>();\n    const cleanup = (): void => {\n        el.removeEventListener('transitionrun', handleTransitionrun);\n        el.removeEventListener('transitionend', handleTransitionend);\n        cb();\n    };\n    let guarantee2: number;\n    let guarantee3: number;\n    // WebKit fires `transitionrun` a little earlier, the multiple guarantees here\n    // allow WebKit to be caught, but doesn't remove the animation listener until\n    // after it would have fired in Chromium.\n    const guarantee1 = requestAnimationFrame(() => {\n        guarantee2 = requestAnimationFrame(() => {\n            guarantee3 = requestAnimationFrame(() => {\n                cleanup();\n            });\n        });\n    });\n    const handleTransitionend = (event: TransitionEvent): void => {\n        if (event.target !== el) {\n            return;\n        }\n        runningTransitions.set(\n            event.propertyName,\n            (runningTransitions.get(event.propertyName) as number) - 1\n        );\n        if (!runningTransitions.get(event.propertyName)) {\n            runningTransitions.delete(event.propertyName);\n        }\n        if (runningTransitions.size === 0) {\n            cleanup();\n        }\n    };\n    const handleTransitionrun = (event: TransitionEvent): void => {\n        if (event.target !== el) {\n            return;\n        }\n        if (!runningTransitions.has(event.propertyName)) {\n            runningTransitions.set(event.propertyName, 0);\n        }\n        runningTransitions.set(\n            event.propertyName,\n            (runningTransitions.get(event.propertyName) as number) + 1\n        );\n        cancelAnimationFrame(guarantee1);\n        cancelAnimationFrame(guarantee2);\n        cancelAnimationFrame(guarantee3);\n    };\n    el.addEventListener('transitionrun', handleTransitionrun);\n    el.addEventListener('transitionend', handleTransitionend);\n    action();\n};\n\nexport function nextFrame(): Promise<void> {\n    return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nexport class AbstractOverlay extends SpectrumElement {\n    protected async applyFocus(\n        _targetOpenState: boolean,\n        _focusEl: HTMLElement | null\n    ): Promise<void> {\n        return;\n    }\n    delayed!: boolean;\n    dialogEl!: HTMLDialogElement & {\n        showPopover(): void;\n        hidePopover(): void;\n    };\n    dispose = noop;\n    protected async ensureOnDOM(_targetOpenState: boolean): Promise<void> {\n        return;\n    }\n    elements!: OpenableElement[];\n    isVisible!: boolean;\n    protected async makeTransition(\n        _targetOpenState: boolean\n    ): Promise<HTMLElement | null> {\n        return null;\n    }\n    protected async manageDelay(_targetOpenState: boolean): Promise<void> {\n        return;\n    }\n    protected async manageDialogOpen(): Promise<void> {\n        return;\n    }\n    protected async managePopoverOpen(): Promise<void> {\n        return;\n    }\n    protected managePosition(): void {\n        return;\n    }\n    get open(): boolean {\n        return false;\n    }\n    set open(_open: boolean) {\n        return;\n    }\n    protected placementController!: PlacementController;\n    receivesFocus!: 'true' | 'false' | 'auto';\n    triggerElement!: HTMLElement | VirtualTrigger | null;\n    type!: OverlayTypes;\n\n    public static update(): void {\n        const overlayUpdateEvent = new CustomEvent('sp-update-overlays', {\n            bubbles: true,\n            composed: true,\n            cancelable: true,\n        });\n        document.dispatchEvent(overlayUpdateEvent);\n    }\n\n    public static async open(\n        trigger: HTMLElement,\n        interaction: TriggerInteractionsV1,\n        content: HTMLElement,\n        optionsV1: OverlayOptionsV1\n    ): Promise<() => void>;\n    public static async open(\n        content: HTMLElement,\n        options?: OverlayOptions\n    ): Promise<Overlay>;\n    public static async open(\n        triggerOrContent: HTMLElement,\n        interactionOrOptions:\n            | TriggerInteractionsV1\n            | OverlayOptions\n            | undefined,\n        content?: HTMLElement,\n        optionsV1?: OverlayOptionsV1\n    ): Promise<Overlay | (() => void)> {\n        const v2 = arguments.length === 2;\n        const overlayContent = content || triggerOrContent;\n        const overlay = new Overlay();\n        let restored = false;\n        overlay.dispose = () => {\n            overlay.addEventListener('sp-closed', () => {\n                if (!restored) {\n                    restoreContent();\n                    restored = true;\n                }\n                requestAnimationFrame(() => {\n                    overlay.remove();\n                });\n            });\n            overlay.open = false;\n            overlay.dispose = noop;\n        };\n        /**\n         * Since content must exist in an <sp-overlay>, we need a way to get it there.\n         * The best & most-direct way is to declaratively use an <sp-overlay> element,\n         * but for imperative users, we'll reparent content into an overlay that we've created for them.\n         **/\n        const restoreContent = reparentChildren([overlayContent], overlay, {\n            position: 'beforeend',\n            prepareCallback: (el) => {\n                // Ensure that content to be overlaid is no longer targetted to a specific `slot`.\n                // This allow for it to be visible in the overlaid context.\n                const slot = el.slot;\n                el.removeAttribute('slot');\n                return () => {\n                    el.slot = slot;\n                };\n            },\n        });\n\n        const v1 = !v2 && overlayContent && optionsV1;\n        if (v1) {\n            if (window.__swc.DEBUG) {\n                window.__swc.warn(\n                    overlay,\n                    `You are interacting with an ${overlay.localName} element via a deprecated imperative API. This API will be removed in a future version of the SWC library. Consider leveraging an ${overlay.localName} directly.`,\n                    'https://opensource.adobe.com/spectrum-web-components/components/overlay/',\n                    { level: 'deprecation' }\n                );\n            }\n            const trigger = triggerOrContent;\n            const interaction = interactionOrOptions;\n            const options = optionsV1;\n            overlay.delayed =\n                options.delayed || overlayContent.hasAttribute('delayed');\n            overlay.receivesFocus = options.receivesFocus ?? 'auto';\n            overlay.triggerElement = options.virtualTrigger || trigger;\n            overlay.type =\n                interaction === 'modal'\n                    ? 'modal'\n                    : interaction === 'hover'\n                    ? 'hint'\n                    : 'auto';\n            overlay.offset = options.offset ?? 6;\n            overlay.placement = options.placement;\n            overlay.willPreventClose = !!options.notImmediatelyClosable;\n            trigger.insertAdjacentElement('afterend', overlay);\n            await overlay.updateComplete;\n            overlay.open = true;\n            return overlay.dispose;\n        }\n\n        const options = interactionOrOptions as OverlayOptions;\n        overlay.append(overlayContent);\n        overlay.delayed =\n            options.delayed || overlayContent.hasAttribute('delayed');\n        overlay.receivesFocus = options.receivesFocus ?? 'auto';\n        overlay.triggerElement = options.trigger || null;\n        overlay.type = options.type || 'modal';\n        overlay.offset = options.offset ?? 6;\n        overlay.placement = options.placement;\n        overlay.willPreventClose = !!options.notImmediatelyClosable;\n        overlay.updateComplete.then(() => {\n            // Do we want to \"open\" this path, or leave that to the consumer?\n            overlay.open = true;\n        });\n        return overlay;\n    }\n}\n"],
-  "mappings": "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",
-  "names": ["SpectrumElement", "reparentChildren", "Overlay", "OverlayTimer", "el", "action", "cb", "runningTransitions", "cleanup", "handleTransitionrun", "handleTransitionend", "guarantee2", "guarantee3", "guarantee1", "event", "res", "_targetOpenState", "_focusEl", "_open", "overlayUpdateEvent", "triggerOrContent", "interactionOrOptions", "content", "optionsV1", "_a", "_b", "_c", "_d", "v2", "overlayContent", "overlay", "restored", "restoreContent", "slot", "trigger", "interaction", "options"]
+  "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*/\nimport { SpectrumElement } from '@spectrum-web-components/base';\nimport { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.js';\n\nimport type {\n    OpenableElement,\n    OverlayOptions,\n    OverlayOptionsV1,\n    OverlayState,\n    OverlayTypes,\n    TriggerInteractionsV1,\n} from './overlay-types.js';\nimport { Overlay } from './Overlay.js';\nimport type { VirtualTrigger } from './VirtualTrigger.js';\nimport { OverlayTimer } from './overlay-timer.js';\nimport { PlacementController } from './PlacementController.js';\n\nexport const overlayTimer = new OverlayTimer();\n\nexport const noop = (): void => {\n    return;\n};\n\nexport class BeforetoggleClosedEvent extends Event {\n    currentState = 'open';\n    newState = 'closed';\n    constructor() {\n        super('beforetoggle', {\n            bubbles: false,\n            composed: false,\n        });\n    }\n}\n\nexport class BeforetoggleOpenEvent extends Event {\n    currentState = 'closed';\n    newState = 'open';\n    constructor() {\n        super('beforetoggle', {\n            bubbles: false,\n            composed: false,\n        });\n    }\n}\n\n/**\n * Apply a \"transitionend\" listener to an element that may not transition but\n * guarantee the callback will be fired either way.\n *\n * @param el {HTMLElement} - Target of the \"transition\" listeners.\n * @param action {Function} - Method to trigger the \"transition\".\n * @param cb {Function} - Callback to trigger when the \"transition\" has ended.\n */\nexport const guaranteedAllTransitionend = (\n    el: HTMLElement,\n    action: () => void,\n    cb: () => void\n): void => {\n    const runningTransitions = new Map<string, number>();\n    const cleanup = (): void => {\n        el.removeEventListener('transitionrun', handleTransitionrun);\n        el.removeEventListener('transitionend', handleTransitionend);\n        cb();\n    };\n    let guarantee2: number;\n    let guarantee3: number;\n    // WebKit fires `transitionrun` a little earlier, the multiple guarantees here\n    // allow WebKit to be caught, but doesn't remove the animation listener until\n    // after it would have fired in Chromium.\n    const guarantee1 = requestAnimationFrame(() => {\n        guarantee2 = requestAnimationFrame(() => {\n            guarantee3 = requestAnimationFrame(() => {\n                cleanup();\n            });\n        });\n    });\n    const handleTransitionend = (event: TransitionEvent): void => {\n        if (event.target !== el) {\n            return;\n        }\n        runningTransitions.set(\n            event.propertyName,\n            (runningTransitions.get(event.propertyName) as number) - 1\n        );\n        if (!runningTransitions.get(event.propertyName)) {\n            runningTransitions.delete(event.propertyName);\n        }\n        if (runningTransitions.size === 0) {\n            cleanup();\n        }\n    };\n    const handleTransitionrun = (event: TransitionEvent): void => {\n        if (event.target !== el) {\n            return;\n        }\n        if (!runningTransitions.has(event.propertyName)) {\n            runningTransitions.set(event.propertyName, 0);\n        }\n        runningTransitions.set(\n            event.propertyName,\n            (runningTransitions.get(event.propertyName) as number) + 1\n        );\n        cancelAnimationFrame(guarantee1);\n        cancelAnimationFrame(guarantee2);\n        cancelAnimationFrame(guarantee3);\n    };\n    el.addEventListener('transitionrun', handleTransitionrun);\n    el.addEventListener('transitionend', handleTransitionend);\n    action();\n};\n\nexport function nextFrame(): Promise<void> {\n    return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nexport class AbstractOverlay extends SpectrumElement {\n    protected async applyFocus(\n        _targetOpenState: boolean,\n        _focusEl: HTMLElement | null\n    ): Promise<void> {\n        return;\n    }\n    delayed!: boolean;\n    dialogEl!: HTMLDialogElement & {\n        showPopover(): void;\n        hidePopover(): void;\n    };\n    dispose = noop;\n    protected async ensureOnDOM(_targetOpenState: boolean): Promise<void> {\n        return;\n    }\n    elements!: OpenableElement[];\n    protected async makeTransition(\n        _targetOpenState: boolean\n    ): Promise<HTMLElement | null> {\n        return null;\n    }\n    protected async manageDelay(_targetOpenState: boolean): Promise<void> {\n        return;\n    }\n    protected async manageDialogOpen(): Promise<void> {\n        return;\n    }\n    protected async managePopoverOpen(): Promise<void> {\n        return;\n    }\n    protected managePosition(): void {\n        return;\n    }\n    get open(): boolean {\n        return false;\n    }\n    set open(_open: boolean) {\n        return;\n    }\n    protected placementController!: PlacementController;\n    receivesFocus!: 'true' | 'false' | 'auto';\n    get state(): OverlayState {\n        return 'closed';\n    }\n    set state(_state: OverlayState) {\n        return;\n    }\n    protected _state!: OverlayState;\n    triggerElement!: HTMLElement | VirtualTrigger | null;\n    type!: OverlayTypes;\n\n    public static update(): void {\n        const overlayUpdateEvent = new CustomEvent('sp-update-overlays', {\n            bubbles: true,\n            composed: true,\n            cancelable: true,\n        });\n        document.dispatchEvent(overlayUpdateEvent);\n    }\n\n    public static async open(\n        trigger: HTMLElement,\n        interaction: TriggerInteractionsV1,\n        content: HTMLElement,\n        optionsV1: OverlayOptionsV1\n    ): Promise<() => void>;\n    public static async open(\n        content: HTMLElement,\n        options?: OverlayOptions\n    ): Promise<Overlay>;\n    public static async open(\n        triggerOrContent: HTMLElement,\n        interactionOrOptions:\n            | TriggerInteractionsV1\n            | OverlayOptions\n            | undefined,\n        content?: HTMLElement,\n        optionsV1?: OverlayOptionsV1\n    ): Promise<Overlay | (() => void)> {\n        const v2 = arguments.length === 2;\n        const overlayContent = content || triggerOrContent;\n        const overlay = new Overlay();\n        let restored = false;\n        overlay.dispose = () => {\n            overlay.addEventListener('sp-closed', () => {\n                if (!restored) {\n                    restoreContent();\n                    restored = true;\n                }\n                requestAnimationFrame(() => {\n                    overlay.remove();\n                });\n            });\n            overlay.open = false;\n            overlay.dispose = noop;\n        };\n        /**\n         * Since content must exist in an <sp-overlay>, we need a way to get it there.\n         * The best & most-direct way is to declaratively use an <sp-overlay> element,\n         * but for imperative users, we'll reparent content into an overlay that we've created for them.\n         **/\n        const restoreContent = reparentChildren([overlayContent], overlay, {\n            position: 'beforeend',\n            prepareCallback: (el) => {\n                // Ensure that content to be overlaid is no longer targetted to a specific `slot`.\n                // This allow for it to be visible in the overlaid context.\n                const slot = el.slot;\n                el.removeAttribute('slot');\n                return () => {\n                    el.slot = slot;\n                };\n            },\n        });\n\n        const v1 = !v2 && overlayContent && optionsV1;\n        if (v1) {\n            if (window.__swc.DEBUG) {\n                window.__swc.warn(\n                    overlay,\n                    `You are interacting with an ${overlay.localName} element via a deprecated imperative API. This API will be removed in a future version of the SWC library. Consider leveraging an ${overlay.localName} directly.`,\n                    'https://opensource.adobe.com/spectrum-web-components/components/overlay/',\n                    { level: 'deprecation' }\n                );\n            }\n            const trigger = triggerOrContent;\n            const interaction = interactionOrOptions;\n            const options = optionsV1;\n            overlay.delayed =\n                options.delayed || overlayContent.hasAttribute('delayed');\n            overlay.receivesFocus = options.receivesFocus ?? 'auto';\n            overlay.triggerElement = options.virtualTrigger || trigger;\n            overlay.type =\n                interaction === 'modal'\n                    ? 'modal'\n                    : interaction === 'hover'\n                    ? 'hint'\n                    : 'auto';\n            overlay.offset = options.offset ?? 6;\n            overlay.placement = options.placement;\n            overlay.willPreventClose = !!options.notImmediatelyClosable;\n            trigger.insertAdjacentElement('afterend', overlay);\n            await overlay.updateComplete;\n            overlay.open = true;\n            return overlay.dispose;\n        }\n\n        const options = interactionOrOptions as OverlayOptions;\n        overlay.append(overlayContent);\n        overlay.delayed =\n            options.delayed || overlayContent.hasAttribute('delayed');\n        overlay.receivesFocus = options.receivesFocus ?? 'auto';\n        overlay.triggerElement = options.trigger || null;\n        overlay.type = options.type || 'modal';\n        overlay.offset = options.offset ?? 6;\n        overlay.placement = options.placement;\n        overlay.willPreventClose = !!options.notImmediatelyClosable;\n        overlay.updateComplete.then(() => {\n            // Do we want to \"open\" this path, or leave that to the consumer?\n            overlay.open = true;\n        });\n        return overlay;\n    }\n}\n"],
+  "mappings": "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",
+  "names": ["SpectrumElement", "reparentChildren", "Overlay", "OverlayTimer", "el", "action", "cb", "runningTransitions", "cleanup", "handleTransitionrun", "handleTransitionend", "guarantee2", "guarantee3", "guarantee1", "event", "res", "_targetOpenState", "_focusEl", "_open", "_state", "overlayUpdateEvent", "triggerOrContent", "interactionOrOptions", "content", "optionsV1", "_a", "_b", "_c", "_d", "v2", "overlayContent", "overlay", "restored", "restoreContent", "slot", "trigger", "interaction", "options"]
 }

package/src/Overlay.d.ts

@@ -1,6 +1,6 @@
 import { PropertyValues, TemplateResult } from '@spectrum-web-components/base';
 import { AbstractOverlay } from './AbstractOverlay.js';
-import { OpenableElement, OverlayTypes, Placement } from './overlay-types.js';
+import { OpenableElement, OverlayState, OverlayTypes, Placement } from './overlay-types.js';
 import { VirtualTrigger } from './VirtualTrigger.js';
 import { PlacementController } from './PlacementController.js';
 export declare const LONGPRESS_INSTRUCTIONS: {
@@ -40,9 +40,8 @@ export declare class Overlay extends OverlayFeatures {
     elements: OpenableElement[];
     parentOverlayToForceClose?: Overlay;
     private get hasNonVirtualTrigger();
-    protected longpressed: boolean;
+    protected longpressState: 'null' | 'potential' | 'opening' | 'pressed';
     private longressTimeout;
-    isVisible: boolean;
     /**
      * The `offset` property accepts either a single number, to
      * define the offset of the Overlay along the main axis from
@@ -65,6 +64,9 @@ export declare class Overlay extends OverlayFeatures {
     private releaseAriaDescribedby;
     private releaseLongpressDescribedby;
     slotEl: HTMLSlotElement;
+    get state(): OverlayState;
+    set state(state: OverlayState);
+    _state: OverlayState;
     tipPadding?: number;
     /**
      * An optional ID reference for the trigger element combined with the optional

package/src/Overlay.dev.js

@@ -59,14 +59,14 @@ const _Overlay = class extends OverlayFeatures {
     super(...arguments);
     this.delayed = false;
     this._disabled = false;
-    this.longpressed = false;
-    this.isVisible = false;
+    this.longpressState = "null";
     this.offset = 6;
     this.placementController = new PlacementController(this);
     this._open = false;
     this.receivesFocus = "auto";
     this.releaseAriaDescribedby = noop;
     this.releaseLongpressDescribedby = noop;
+    this._state = "closed";
     this.triggerElement = null;
     this.type = "hint";
     this.wasOpen = false;
@@ -78,9 +78,12 @@ const _Overlay = class extends OverlayFeatures {
       if (event.button !== 0)
         return;
       const triggerElement = this.triggerElement;
-      this.longpressed = false;
+      this.longpressState = "potential";
       triggerElement.addEventListener("pointerup", this.handlePointerup);
       triggerElement.addEventListener("pointercancel", this.handlePointerup);
+      if (triggerElement.holdAffordance) {
+        return;
+      }
       this.longressTimeout = setTimeout(() => {
         if (!triggerElement)
           return;
@@ -99,12 +102,7 @@ const _Overlay = class extends OverlayFeatures {
       clearTimeout(this.longressTimeout);
       if (!this.triggerElement)
         return;
-      if (this.longpressed) {
-        this.open = true;
-      }
-      setTimeout(() => {
-        this.longpressed = false;
-      });
+      this.longpressState = this.state === "opening" ? "pressed" : "null";
       const triggerElement = this.triggerElement;
       triggerElement.removeEventListener("pointerup", this.handlePointerup);
       triggerElement.removeEventListener(
@@ -127,8 +125,11 @@ const _Overlay = class extends OverlayFeatures {
     this.handleKeyup = (event) => {
       const { code, altKey } = event;
       if (code === "Space" || altKey && code === "ArrowDown") {
+        if (!this.triggerElement || !this.hasNonVirtualTrigger) {
+          return;
+        }
         event.stopPropagation();
-        this.dispatchEvent(
+        this.triggerElement.dispatchEvent(
           new CustomEvent("longpress", {
             bubbles: true,
             composed: true,
@@ -137,6 +138,9 @@ const _Overlay = class extends OverlayFeatures {
             }
           })
         );
+        setTimeout(() => {
+          this.longpressState = "null";
+        });
       }
     };
     /**
@@ -150,8 +154,9 @@ const _Overlay = class extends OverlayFeatures {
       this.preventNextToggle = this.open;
     };
     this.handleClick = () => {
-      if (this.longpressed)
+      if (this.longpressState === "opening" || this.longpressState === "pressed") {
         return;
+      }
       if (!this.preventNextToggle) {
         this.open = !this.open;
       }
@@ -198,7 +203,7 @@ const _Overlay = class extends OverlayFeatures {
     };
     this.handleLongpress = () => {
       this.open = true;
-      this.longpressed = true;
+      this.longpressState = this.longpressState === "potential" ? "opening" : "pressed";
     };
     this.willPreventClose = false;
   }
@@ -230,17 +235,35 @@ const _Overlay = class extends OverlayFeatures {
       return;
     if (open === this.open)
       return;
+    if ((this.longpressState === "opening" || this.longpressState === "pressed") && !open)
+      return;
     this._open = open;
     if (this.open) {
       _Overlay.openCount += 1;
-      this.isVisible = true;
     }
     this.requestUpdate("open", !this.open);
   }
+  get state() {
+    return this._state;
+  }
+  set state(state2) {
+    if (state2 === this.state)
+      return;
+    const oldState = this.state;
+    this._state = state2;
+    if (this.state === "opened" || this.state === "closed") {
+      this.longpressState = this.longpressState === "pressed" ? "null" : this.longpressState;
+    }
+    this.requestUpdate("state", oldState);
+  }
   get usesDialog() {
     return this.type === "modal" || this.type === "page";
   }
   get popoverValue() {
+    const hasPopoverAttribute = "popover" in this;
+    if (!hasPopoverAttribute) {
+      return void 0;
+    }
     switch (this.type) {
       case "modal":
       case "page":
@@ -339,6 +362,11 @@ const _Overlay = class extends OverlayFeatures {
       }
       overlayStack.remove(this);
     }
+    if (this.open && this.state !== "opened") {
+      this.state = "opening";
+    } else if (!this.open && this.state !== "closed") {
+      this.state = "closing";
+    }
     if (this.usesDialog) {
       this.manageDialogOpen();
     } else {
@@ -401,18 +429,21 @@ const _Overlay = class extends OverlayFeatures {
   bindLongpressEvents(triggerElement) {
     const options = { signal: this.abortController.signal };
     triggerElement.addEventListener(
-      "pointerdown",
-      this.handlePointerdown,
+      "longpress",
+      this.handleLongpress,
       options
     );
-    triggerElement.addEventListener("keydown", this.handleKeydown, options);
-    triggerElement.addEventListener("keyup", this.handleKeyup, options);
     triggerElement.addEventListener(
-      "longpress",
-      this.handleLongpress,
+      "pointerdown",
+      this.handlePointerdown,
       options
     );
     this.prepareLongpressDescription(triggerElement);
+    if (triggerElement.holdAffordance) {
+      return;
+    }
+    triggerElement.addEventListener("keydown", this.handleKeydown, options);
+    triggerElement.addEventListener("keyup", this.handleKeyup, options);
   }
   bindHoverEvents(triggerElement) {
     const options = { signal: this.abortController.signal };
@@ -535,7 +566,12 @@ const _Overlay = class extends OverlayFeatures {
     }
   }
   handleBrowserClose() {
-    this.open = false;
+    if (this.longpressState !== "opening" && this.longpressState !== "pressed") {
+      this.open = false;
+      return;
+    }
+    this.open = true;
+    this.manageOpen(false);
   }
   handleSlotchange() {
     if (this.triggerElement) {
@@ -635,23 +671,21 @@ const _Overlay = class extends OverlayFeatures {
                 @close=${this.handleBrowserClose}
                 @cancel=${this.handleBrowserClose}
                 @beforetoggle=${this.handleBeforetoggle}
-                ?is-visible=${this.isVisible}
+                ?is-visible=${this.state !== "closed"}
             >
                 ${this.renderContent()}
             </dialog>
         `;
   }
   renderPopover() {
-    const hasPopoverAttribute = "popover" in this;
-    const popoverValue = hasPopoverAttribute ? this.popoverValue : void 0;
     return html`
             <div
                 class="dialog"
                 part="dialog"
-                popover=${ifDefined(popoverValue)}
+                popover=${ifDefined(this.popoverValue)}
                 @beforetoggle=${this.handleBeforetoggle}
                 @close=${this.handleBrowserClose}
-                ?is-visible=${this.isVisible}
+                ?is-visible=${this.state !== "closed"}
             >
                 ${this.renderContent()}
             </div>
@@ -700,9 +734,6 @@ __decorateClass([
     // gather only elements slotted into the default slot
   })
 ], Overlay.prototype, "elements", 2);
-__decorateClass([
-  state()
-], Overlay.prototype, "isVisible", 2);
 __decorateClass([
   property({ type: Number })
 ], Overlay.prototype, "offset", 2);
@@ -718,6 +749,9 @@ __decorateClass([
 __decorateClass([
   query("slot")
 ], Overlay.prototype, "slotEl", 2);
+__decorateClass([
+  state()
+], Overlay.prototype, "state", 1);
 __decorateClass([
   property({ type: Number, attribute: "tip-padding" })
 ], Overlay.prototype, "tipPadding", 2);