@spectrum-web-components/overlay 1.1.0-beta.9 → 1.1.1

package/src/PlacementController.dev.js

@@ -35,18 +35,53 @@ const getFallbackPlacements = (placement) => {
 };
 export const placementUpdatedSymbol = Symbol("placement updated");
 export class PlacementController {
+  /**
+   * Creates an instance of the PlacementController.
+   *
+   * @param {ReactiveElement & { elements: OpenableElement[] }} host - The host element that uses this controller.
+   */
   constructor(host) {
+    /**
+     * A WeakMap to store the original placements of overlay elements.
+     *
+     * @private
+     * @type {WeakMap<HTMLElement, Placement>}
+     */
     this.originalPlacements = /* @__PURE__ */ new WeakMap();
+    /**
+     * Flag to allow or disallow placement updates.
+     *
+     * @type {boolean}
+     */
     this.allowPlacementUpdate = false;
+    /**
+     * Closes the overlay if an ancestor element is updated.
+     *
+     * This method checks if placement updates are allowed and if the overlay type is not 'modal'.
+     * If these conditions are met and a cleanup function is defined, it dispatches a 'close' event
+     * on the target element to close the overlay.
+     */
     this.closeForAncestorUpdate = () => {
       if (!this.allowPlacementUpdate && this.options.type !== "modal" && this.cleanup) {
         this.target.dispatchEvent(new Event("close", { bubbles: true }));
       }
       this.allowPlacementUpdate = false;
     };
+    /**
+     * Updates the placement of the overlay.
+     *
+     * This method calls the computePlacement method to recalculate the overlay's position.
+     *
+     * @private
+     */
     this.updatePlacement = () => {
       this.computePlacement();
     };
+    /**
+     * Resets the overlay's position.
+     *
+     * This method clears the overlay's position, forces a reflow, and recomputes the placement.
+     */
     this.resetOverlayPosition = () => {
       if (!this.target || !this.options) return;
       this.clearOverlayPosition();
@@ -56,6 +91,16 @@ export class PlacementController {
     this.host = host;
     this.host.addController(this);
   }
+  /**
+   * Places the overlay relative to the target element.
+   *
+   * This method sets up the necessary configurations and event listeners to manage the
+   * positioning and constraints of the overlay element.
+   *
+   * @param {HTMLElement} [target=this.target] - The target element for the overlay.
+   * @param {OverlayOptionsV1} [options=this.options] - The options for configuring the overlay placement.
+   * @returns {Promise<void>} A promise that resolves when the overlay has been placed.
+   */
   async placeOverlay(target = this.target, options = this.options) {
     this.target = target;
     this.options = options;
@@ -97,6 +142,15 @@ export class PlacementController {
       cleanupElementResize();
     };
   }
+  /**
+   * Computes the placement of the overlay relative to the target element.
+   *
+   * This method calculates the necessary positioning and constraints for the overlay element
+   * using various middleware functions. It updates the overlay's style and attributes based
+   * on the computed position.
+   *
+   * @returns {Promise<void>} A promise that resolves when the placement has been computed.
+   */
   async computePlacement() {
     var _a, _b;
     const { options, target } = this;
@@ -177,6 +231,12 @@ export class PlacementController {
       });
     }
   }
+  /**
+   * Clears the overlay's position styles.
+   *
+   * This method removes the max-height and max-width styles from the target element,
+   * and resets the initial height and constrained state of the overlay.
+   */
   clearOverlayPosition() {
     if (!this.target) {
       return;
@@ -186,12 +246,22 @@ export class PlacementController {
     this.initialHeight = void 0;
     this.isConstrained = false;
   }
+  /**
+   * Lifecycle method called when the host element is connected to the DOM.
+   *
+   * This method sets up an event listener to reset the overlay's position when the 'sp-update-overlays' event is dispatched.
+   */
   hostConnected() {
     document.addEventListener(
       "sp-update-overlays",
       this.resetOverlayPosition
     );
   }
+  /**
+   * Lifecycle method called when the host element is updated.
+   *
+   * This method cleans up resources if the overlay is not open.
+   */
   hostUpdated() {
     var _a;
     if (!this.host.open) {
@@ -199,6 +269,11 @@ export class PlacementController {
       this.cleanup = void 0;
     }
   }
+  /**
+   * Lifecycle method called when the host element is disconnected from the DOM.
+   *
+   * This method removes the event listener and cleans up resources.
+   */
   hostDisconnected() {
     var _a;
     (_a = this.cleanup) == null ? void 0 : _a.call(this);

package/src/PlacementController.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["PlacementController.ts"],
-  "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\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 type {\n    ReactiveController,\n    ReactiveElement,\n} from '@spectrum-web-components/base';\nimport {\n    arrow,\n    autoUpdate,\n    computePosition,\n    flip,\n    offset,\n    Placement,\n    shift,\n    size,\n} from '@floating-ui/dom';\nimport type { VirtualTrigger } from './VirtualTrigger.dev.js'\nimport type { OpenableElement } from './overlay-types.dev.js'\nimport type { Overlay } from './Overlay.dev.js'\n\ntype OverlayOptionsV1 = {\n    abortPromise?: Promise<boolean>;\n    delayed?: boolean;\n    offset?: number | [number, number]; // supporting multi-axis\n    placement: Placement;\n    notImmediatelyClosable?: boolean; // rename or place behind other API options\n    receivesFocus?: 'auto';\n    root?: HTMLElement;\n    tipPadding?: number;\n    trigger: HTMLElement | VirtualTrigger;\n    type?: 'modal' | 'page' | 'hint' | 'auto' | 'manual';\n};\n\nfunction roundByDPR(num?: number): number {\n    if (typeof num === 'undefined') return 0;\n    const dpr = window.devicePixelRatio || 1;\n    return Math.round(num * dpr) / dpr ?? -10000;\n}\n\n// See: https://spectrum.adobe.com/page/popover/#Container-padding\nconst REQUIRED_DISTANCE_TO_EDGE = 8;\n// See: https://github.com/adobe/spectrum-web-components/issues/910\nconst MIN_OVERLAY_HEIGHT = 100;\n\nconst getFallbackPlacements = (placement: Placement): Placement[] => {\n    const fallbacks: Record<Placement, Placement[]> = {\n        left: ['right', 'bottom', 'top'],\n        'left-start': ['right-start', 'bottom', 'top'],\n        'left-end': ['right-end', 'bottom', 'top'],\n        right: ['left', 'bottom', 'top'],\n        'right-start': ['left-start', 'bottom', 'top'],\n        'right-end': ['left-end', 'bottom', 'top'],\n        top: ['bottom', 'left', 'right'],\n        'top-start': ['bottom-start', 'left', 'right'],\n        'top-end': ['bottom-end', 'left', 'right'],\n        bottom: ['top', 'left', 'right'],\n        'bottom-start': ['top-start', 'left', 'right'],\n        'bottom-end': ['top-end', 'left', 'right'],\n    };\n    return fallbacks[placement] ?? [placement];\n};\n\nexport const placementUpdatedSymbol = Symbol('placement updated');\n\nexport class PlacementController implements ReactiveController {\n    private cleanup?: () => void;\n\n    initialHeight?: number;\n\n    isConstrained?: boolean;\n\n    private host!: ReactiveElement & { elements: OpenableElement[] };\n\n    private options!: OverlayOptionsV1;\n\n    private originalPlacements = new WeakMap<HTMLElement, Placement>();\n\n    private target!: HTMLElement;\n\n    constructor(host: ReactiveElement & { elements: OpenableElement[] }) {\n        this.host = host;\n        // Add the controller after the MutationObserver has been created in preparation\n        // for the `hostConnected`/`hostDisconnected` callbacks to be run.\n        this.host.addController(this);\n    }\n\n    public async placeOverlay(\n        target: HTMLElement = this.target,\n        options: OverlayOptionsV1 = this.options\n    ): Promise<void> {\n        this.target = target;\n        this.options = options;\n        if (!target || !options) return;\n\n        const cleanupAncestorResize = autoUpdate(\n            options.trigger,\n            target,\n            this.closeForAncestorUpdate,\n            {\n                ancestorResize: false,\n                elementResize: false,\n                layoutShift: false,\n            }\n        );\n        const cleanupElementResize = autoUpdate(\n            options.trigger,\n            target,\n            this.updatePlacement,\n            {\n                ancestorScroll: false,\n            }\n        );\n        this.cleanup = () => {\n            this.host.elements?.forEach((element) => {\n                element.addEventListener(\n                    'sp-closed',\n                    () => {\n                        const placement = this.originalPlacements.get(element);\n                        if (placement) {\n                            element.setAttribute('placement', placement);\n                        }\n                        this.originalPlacements.delete(element);\n                    },\n                    { once: true }\n                );\n            });\n            cleanupAncestorResize();\n            cleanupElementResize();\n        };\n    }\n\n    allowPlacementUpdate = false;\n\n    closeForAncestorUpdate = (): void => {\n        if (\n            !this.allowPlacementUpdate &&\n            this.options.type !== 'modal' &&\n            this.cleanup\n        ) {\n            this.target.dispatchEvent(new Event('close', { bubbles: true }));\n        }\n        this.allowPlacementUpdate = false;\n    };\n\n    updatePlacement = (): void => {\n        this.computePlacement();\n    };\n\n    async computePlacement(): Promise<void> {\n        const { options, target } = this;\n\n        await (document.fonts ? document.fonts.ready : Promise.resolve());\n\n        const flipMiddleware = !(options.trigger instanceof HTMLElement)\n            ? flip({\n                  padding: REQUIRED_DISTANCE_TO_EDGE,\n                  fallbackPlacements: getFallbackPlacements(options.placement),\n              })\n            : flip();\n\n        const [mainAxis = 0, crossAxis = 0] = Array.isArray(options?.offset)\n            ? options.offset\n            : [options.offset, 0];\n\n        const tipElement = this.host.elements.find(\n            (el) => el.tipElement\n        )?.tipElement;\n\n        const middleware = [\n            offset({\n                mainAxis,\n                crossAxis,\n            }),\n            shift({ padding: REQUIRED_DISTANCE_TO_EDGE }),\n            flipMiddleware,\n            size({\n                padding: REQUIRED_DISTANCE_TO_EDGE,\n                apply: ({\n                    availableWidth,\n                    availableHeight,\n                    rects: { floating },\n                }) => {\n                    const maxHeight = Math.max(\n                        MIN_OVERLAY_HEIGHT,\n                        Math.floor(availableHeight)\n                    );\n                    const actualHeight = floating.height;\n                    this.initialHeight = !this.isConstrained // && !this.virtualTrigger\n                        ? actualHeight\n                        : this.initialHeight || actualHeight;\n                    this.isConstrained =\n                        actualHeight < this.initialHeight ||\n                        maxHeight <= actualHeight;\n                    const appliedHeight = this.isConstrained\n                        ? `${maxHeight}px`\n                        : '';\n                    Object.assign(target.style, {\n                        maxWidth: `${Math.floor(availableWidth)}px`,\n                        maxHeight: appliedHeight,\n                    });\n                },\n            }),\n            ...(tipElement\n                ? [\n                      arrow({\n                          element: tipElement,\n                          padding:\n                              options.tipPadding || REQUIRED_DISTANCE_TO_EDGE,\n                      }),\n                  ]\n                : []),\n        ];\n        const { x, y, placement, middlewareData } = await computePosition(\n            options.trigger,\n            target,\n            {\n                placement: options.placement,\n                middleware,\n                strategy: 'fixed',\n            }\n        );\n        Object.assign(target.style, {\n            top: '0px',\n            left: '0px',\n            translate: `${roundByDPR(x)}px ${roundByDPR(y)}px`,\n        });\n\n        target.setAttribute('actual-placement', placement);\n        this.host.elements?.forEach((element) => {\n            if (!this.originalPlacements.has(element)) {\n                this.originalPlacements.set(\n                    element,\n                    element.getAttribute('placement') as Placement\n                );\n            }\n            element.setAttribute('placement', placement);\n        });\n\n        if (tipElement && middlewareData.arrow) {\n            const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n            Object.assign(tipElement.style, {\n                top:\n                    placement.startsWith('right') ||\n                    placement.startsWith('left')\n                        ? '0px'\n                        : '',\n                left:\n                    placement.startsWith('bottom') ||\n                    placement.startsWith('top')\n                        ? '0px'\n                        : '',\n                translate: `${roundByDPR(arrowX)}px ${roundByDPR(arrowY)}px`,\n            });\n        }\n    }\n\n    public clearOverlayPosition(): void {\n        if (!this.target) {\n            return;\n        }\n        this.target.style.removeProperty('max-height');\n        this.target.style.removeProperty('max-width');\n        this.initialHeight = undefined;\n        this.isConstrained = false;\n    }\n\n    public resetOverlayPosition = (): void => {\n        if (!this.target || !this.options) return;\n        this.clearOverlayPosition();\n\n        // force paint\n        this.host.offsetHeight;\n        this.computePlacement();\n    };\n\n    hostConnected(): void {\n        document.addEventListener(\n            'sp-update-overlays',\n            this.resetOverlayPosition\n        );\n    }\n\n    hostUpdated(): void {\n        if (!(this.host as Overlay).open) {\n            this.cleanup?.();\n            this.cleanup = undefined;\n        }\n    }\n\n    hostDisconnected(): void {\n        this.cleanup?.();\n        this.cleanup = undefined;\n        document.removeEventListener(\n            'sp-update-overlays',\n            this.resetOverlayPosition\n        );\n    }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\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 type {\n    ReactiveController,\n    ReactiveElement,\n} from '@spectrum-web-components/base';\nimport {\n    arrow,\n    autoUpdate,\n    computePosition,\n    flip,\n    offset,\n    Placement,\n    shift,\n    size,\n} from '@floating-ui/dom';\nimport type { VirtualTrigger } from './VirtualTrigger.dev.js'\nimport type { OpenableElement } from './overlay-types.dev.js'\nimport type { Overlay } from './Overlay.dev.js'\n\ntype OverlayOptionsV1 = {\n    abortPromise?: Promise<boolean>;\n    delayed?: boolean;\n    offset?: number | [number, number]; // supporting multi-axis\n    placement: Placement;\n    notImmediatelyClosable?: boolean; // rename or place behind other API options\n    receivesFocus?: 'auto';\n    root?: HTMLElement;\n    tipPadding?: number;\n    trigger: HTMLElement | VirtualTrigger;\n    type?: 'modal' | 'page' | 'hint' | 'auto' | 'manual';\n};\n\n/**\n * Rounds a number by the device pixel ratio (DPR).\n *\n * @param {number} [num] - The number to round.\n * @returns {number} The rounded number.\n */\nfunction roundByDPR(num?: number): number {\n    if (typeof num === 'undefined') return 0;\n    const dpr = window.devicePixelRatio || 1;\n    return Math.round(num * dpr) / dpr;\n}\n\n// Minimum distance required between the overlay and the edge of the container.\n// See: https://spectrum.adobe.com/page/popover/#Container-padding\nconst REQUIRED_DISTANCE_TO_EDGE = 8;\n// Minimum height for the overlay.\n// See: https://github.com/adobe/spectrum-web-components/issues/910\nconst MIN_OVERLAY_HEIGHT = 100;\n\n/**\n * Gets fallback placements for the overlay based on the initial placement.\n *\n * @param {Placement} placement - The initial placement of the overlay.\n * @returns {Placement[]} An array of fallback placements.\n */\nconst getFallbackPlacements = (placement: Placement): Placement[] => {\n    const fallbacks: Record<Placement, Placement[]> = {\n        left: ['right', 'bottom', 'top'],\n        'left-start': ['right-start', 'bottom', 'top'],\n        'left-end': ['right-end', 'bottom', 'top'],\n        right: ['left', 'bottom', 'top'],\n        'right-start': ['left-start', 'bottom', 'top'],\n        'right-end': ['left-end', 'bottom', 'top'],\n        top: ['bottom', 'left', 'right'],\n        'top-start': ['bottom-start', 'left', 'right'],\n        'top-end': ['bottom-end', 'left', 'right'],\n        bottom: ['top', 'left', 'right'],\n        'bottom-start': ['top-start', 'left', 'right'],\n        'bottom-end': ['top-end', 'left', 'right'],\n    };\n    return fallbacks[placement] ?? [placement];\n};\n\n/**\n * Symbol used to indicate that the placement has been updated.\n */\nexport const placementUpdatedSymbol = Symbol('placement updated');\n\n/**\n * Controller for managing the placement of an overlay.\n *\n * This class implements the ReactiveController interface and provides methods\n * for managing the positioning and constraints of an overlay element.\n */\nexport class PlacementController implements ReactiveController {\n    /**\n     * Function to clean up resources when the controller is no longer needed.\n     *\n     * @private\n     */\n    private cleanup?: () => void;\n\n    /**\n     * Initial height of the overlay.\n     *\n     * @type {number}\n     */\n    initialHeight?: number;\n\n    /**\n     * Indicates whether the overlay is constrained by available space.\n     *\n     * @type {boolean}\n     */\n    isConstrained?: boolean;\n\n    /**\n     * The host element that uses this controller.\n     *\n     * @private\n     * @type {ReactiveElement & { elements: OpenableElement[] }}\n     */\n    private host!: ReactiveElement & { elements: OpenableElement[] };\n\n    /**\n     * Options for configuring the overlay placement.\n     *\n     * @private\n     * @type {OverlayOptionsV1}\n     */\n    private options!: OverlayOptionsV1;\n\n    /**\n     * A WeakMap to store the original placements of overlay elements.\n     *\n     * @private\n     * @type {WeakMap<HTMLElement, Placement>}\n     */\n    private originalPlacements = new WeakMap<HTMLElement, Placement>();\n\n    /**\n     * The target element for the overlay.\n     *\n     * @private\n     * @type {HTMLElement}\n     */\n    private target!: HTMLElement;\n\n    /**\n     * Creates an instance of the PlacementController.\n     *\n     * @param {ReactiveElement & { elements: OpenableElement[] }} host - The host element that uses this controller.\n     */\n    constructor(host: ReactiveElement & { elements: OpenableElement[] }) {\n        this.host = host;\n        // Add the controller after the MutationObserver has been created in preparation\n        // for the `hostConnected`/`hostDisconnected` callbacks to be run.\n        this.host.addController(this);\n    }\n\n    /**\n     * Places the overlay relative to the target element.\n     *\n     * This method sets up the necessary configurations and event listeners to manage the\n     * positioning and constraints of the overlay element.\n     *\n     * @param {HTMLElement} [target=this.target] - The target element for the overlay.\n     * @param {OverlayOptionsV1} [options=this.options] - The options for configuring the overlay placement.\n     * @returns {Promise<void>} A promise that resolves when the overlay has been placed.\n     */\n    public async placeOverlay(\n        target: HTMLElement = this.target,\n        options: OverlayOptionsV1 = this.options\n    ): Promise<void> {\n        // Set the target and options for the overlay.\n        this.target = target;\n        this.options = options;\n        if (!target || !options) return;\n\n        // Set up auto-update for ancestor resize events.\n        const cleanupAncestorResize = autoUpdate(\n            options.trigger,\n            target,\n            this.closeForAncestorUpdate,\n            {\n                ancestorResize: false,\n                elementResize: false,\n                layoutShift: false,\n            }\n        );\n\n        // Set up auto-update for element resize events.\n        const cleanupElementResize = autoUpdate(\n            options.trigger,\n            target,\n            this.updatePlacement,\n            {\n                ancestorScroll: false,\n            }\n        );\n\n        // Define the cleanup function to remove event listeners and reset placements.\n        this.cleanup = () => {\n            this.host.elements?.forEach((element) => {\n                element.addEventListener(\n                    'sp-closed',\n                    () => {\n                        const placement = this.originalPlacements.get(element);\n\n                        if (placement) {\n                            element.setAttribute('placement', placement);\n                        }\n\n                        this.originalPlacements.delete(element);\n                    },\n                    { once: true }\n                );\n            });\n            cleanupAncestorResize();\n            cleanupElementResize();\n        };\n    }\n\n    /**\n     * Flag to allow or disallow placement updates.\n     *\n     * @type {boolean}\n     */\n    public allowPlacementUpdate = false;\n\n    /**\n     * Closes the overlay if an ancestor element is updated.\n     *\n     * This method checks if placement updates are allowed and if the overlay type is not 'modal'.\n     * If these conditions are met and a cleanup function is defined, it dispatches a 'close' event\n     * on the target element to close the overlay.\n     */\n    closeForAncestorUpdate = (): void => {\n        if (\n            !this.allowPlacementUpdate &&\n            this.options.type !== 'modal' &&\n            this.cleanup\n        ) {\n            // Dispatch a 'close' event to close the overlay.\n            this.target.dispatchEvent(new Event('close', { bubbles: true }));\n        }\n\n        // Reset the flag to disallow placement updates.\n        this.allowPlacementUpdate = false;\n    };\n\n    /**\n     * Updates the placement of the overlay.\n     *\n     * This method calls the computePlacement method to recalculate the overlay's position.\n     *\n     * @private\n     */\n    private updatePlacement = (): void => {\n        this.computePlacement();\n    };\n\n    /**\n     * Computes the placement of the overlay relative to the target element.\n     *\n     * This method calculates the necessary positioning and constraints for the overlay element\n     * using various middleware functions. It updates the overlay's style and attributes based\n     * on the computed position.\n     *\n     * @returns {Promise<void>} A promise that resolves when the placement has been computed.\n     */\n    async computePlacement(): Promise<void> {\n        const { options, target } = this;\n\n        // Wait for document fonts to be ready before computing placement.\n        await (document.fonts ? document.fonts.ready : Promise.resolve());\n\n        // Determine the flip middleware based on the type of trigger element.\n        const flipMiddleware = !(options.trigger instanceof HTMLElement)\n            ? flip({\n                  padding: REQUIRED_DISTANCE_TO_EDGE,\n                  fallbackPlacements: getFallbackPlacements(options.placement),\n              })\n            : flip();\n\n        // Extract main axis and cross axis offsets from options.\n        const [mainAxis = 0, crossAxis = 0] = Array.isArray(options?.offset)\n            ? options.offset\n            : [options.offset, 0];\n\n        // Find the tip element within the host elements.\n        const tipElement = this.host.elements.find(\n            (el) => el.tipElement\n        )?.tipElement;\n\n        // Define middleware functions for positioning and constraints.\n        const middleware = [\n            offset({\n                mainAxis,\n                crossAxis,\n            }),\n            shift({ padding: REQUIRED_DISTANCE_TO_EDGE }),\n            flipMiddleware,\n            size({\n                padding: REQUIRED_DISTANCE_TO_EDGE,\n                apply: ({\n                    availableWidth,\n                    availableHeight,\n                    rects: { floating },\n                }) => {\n                    const maxHeight = Math.max(\n                        MIN_OVERLAY_HEIGHT,\n                        Math.floor(availableHeight)\n                    );\n                    const actualHeight = floating.height;\n                    this.initialHeight = !this.isConstrained // && !this.virtualTrigger\n                        ? actualHeight\n                        : this.initialHeight || actualHeight;\n                    this.isConstrained =\n                        actualHeight < this.initialHeight ||\n                        maxHeight <= actualHeight;\n                    const appliedHeight = this.isConstrained\n                        ? `${maxHeight}px`\n                        : '';\n                    Object.assign(target.style, {\n                        maxWidth: `${Math.floor(availableWidth)}px`,\n                        maxHeight: appliedHeight,\n                    });\n                },\n            }),\n            ...(tipElement\n                ? [\n                      arrow({\n                          element: tipElement,\n                          padding:\n                              options.tipPadding || REQUIRED_DISTANCE_TO_EDGE,\n                      }),\n                  ]\n                : []),\n        ];\n\n        // Compute the position of the overlay using the defined middleware.\n        const { x, y, placement, middlewareData } = await computePosition(\n            options.trigger,\n            target,\n            {\n                placement: options.placement,\n                middleware,\n                strategy: 'fixed',\n            }\n        );\n\n        // Update the overlay's style with the computed position.\n        Object.assign(target.style, {\n            top: '0px',\n            left: '0px',\n            translate: `${roundByDPR(x)}px ${roundByDPR(y)}px`,\n        });\n\n        // Set the 'actual-placement' attribute on the target element.\n        target.setAttribute('actual-placement', placement);\n\n        // Update the placement attribute for each host element.\n        this.host.elements?.forEach((element) => {\n            if (!this.originalPlacements.has(element)) {\n                this.originalPlacements.set(\n                    element,\n                    element.getAttribute('placement') as Placement\n                );\n            }\n            element.setAttribute('placement', placement);\n        });\n\n        // Update the tip element's style with the computed arrow position.\n        if (tipElement && middlewareData.arrow) {\n            const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n            Object.assign(tipElement.style, {\n                top:\n                    placement.startsWith('right') ||\n                    placement.startsWith('left')\n                        ? '0px'\n                        : '',\n                left:\n                    placement.startsWith('bottom') ||\n                    placement.startsWith('top')\n                        ? '0px'\n                        : '',\n                translate: `${roundByDPR(arrowX)}px ${roundByDPR(arrowY)}px`,\n            });\n        }\n    }\n\n    /**\n     * Clears the overlay's position styles.\n     *\n     * This method removes the max-height and max-width styles from the target element,\n     * and resets the initial height and constrained state of the overlay.\n     */\n    public clearOverlayPosition(): void {\n        if (!this.target) {\n            return;\n        }\n        // Remove max-height and max-width styles from the target element.\n        this.target.style.removeProperty('max-height');\n        this.target.style.removeProperty('max-width');\n        // Reset the initial height and constrained state.\n        this.initialHeight = undefined;\n        this.isConstrained = false;\n    }\n\n    /**\n     * Resets the overlay's position.\n     *\n     * This method clears the overlay's position, forces a reflow, and recomputes the placement.\n     */\n    public resetOverlayPosition = (): void => {\n        if (!this.target || !this.options) return;\n        // Clear the overlay's position.\n        this.clearOverlayPosition();\n\n        // Force a reflow.\n        this.host.offsetHeight;\n        // Recompute the placement.\n        this.computePlacement();\n    };\n\n    /**\n     * Lifecycle method called when the host element is connected to the DOM.\n     *\n     * This method sets up an event listener to reset the overlay's position when the 'sp-update-overlays' event is dispatched.\n     */\n    hostConnected(): void {\n        document.addEventListener(\n            'sp-update-overlays',\n            this.resetOverlayPosition\n        );\n    }\n\n    /**\n     * Lifecycle method called when the host element is updated.\n     *\n     * This method cleans up resources if the overlay is not open.\n     */\n    hostUpdated(): void {\n        if (!(this.host as Overlay).open) {\n            // Clean up resources if the overlay is not open.\n            this.cleanup?.();\n            this.cleanup = undefined;\n        }\n    }\n\n    /**\n     * Lifecycle method called when the host element is disconnected from the DOM.\n     *\n     * This method removes the event listener and cleans up resources.\n     */\n    hostDisconnected(): void {\n        // Clean up resources.\n        this.cleanup?.();\n        this.cleanup = undefined;\n        // Remove the event listener.\n        document.removeEventListener(\n            'sp-update-overlays',\n            this.resetOverlayPosition\n        );\n    }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/src/PlacementController.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["PlacementController.ts"],
-  "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\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 type {\n    ReactiveController,\n    ReactiveElement,\n} from '@spectrum-web-components/base';\nimport {\n    arrow,\n    autoUpdate,\n    computePosition,\n    flip,\n    offset,\n    Placement,\n    shift,\n    size,\n} from '@floating-ui/dom';\nimport type { VirtualTrigger } from './VirtualTrigger.js';\nimport type { OpenableElement } from './overlay-types.js';\nimport type { Overlay } from './Overlay.js';\n\ntype OverlayOptionsV1 = {\n    abortPromise?: Promise<boolean>;\n    delayed?: boolean;\n    offset?: number | [number, number]; // supporting multi-axis\n    placement: Placement;\n    notImmediatelyClosable?: boolean; // rename or place behind other API options\n    receivesFocus?: 'auto';\n    root?: HTMLElement;\n    tipPadding?: number;\n    trigger: HTMLElement | VirtualTrigger;\n    type?: 'modal' | 'page' | 'hint' | 'auto' | 'manual';\n};\n\nfunction roundByDPR(num?: number): number {\n    if (typeof num === 'undefined') return 0;\n    const dpr = window.devicePixelRatio || 1;\n    return Math.round(num * dpr) / dpr ?? -10000;\n}\n\n// See: https://spectrum.adobe.com/page/popover/#Container-padding\nconst REQUIRED_DISTANCE_TO_EDGE = 8;\n// See: https://github.com/adobe/spectrum-web-components/issues/910\nconst MIN_OVERLAY_HEIGHT = 100;\n\nconst getFallbackPlacements = (placement: Placement): Placement[] => {\n    const fallbacks: Record<Placement, Placement[]> = {\n        left: ['right', 'bottom', 'top'],\n        'left-start': ['right-start', 'bottom', 'top'],\n        'left-end': ['right-end', 'bottom', 'top'],\n        right: ['left', 'bottom', 'top'],\n        'right-start': ['left-start', 'bottom', 'top'],\n        'right-end': ['left-end', 'bottom', 'top'],\n        top: ['bottom', 'left', 'right'],\n        'top-start': ['bottom-start', 'left', 'right'],\n        'top-end': ['bottom-end', 'left', 'right'],\n        bottom: ['top', 'left', 'right'],\n        'bottom-start': ['top-start', 'left', 'right'],\n        'bottom-end': ['top-end', 'left', 'right'],\n    };\n    return fallbacks[placement] ?? [placement];\n};\n\nexport const placementUpdatedSymbol = Symbol('placement updated');\n\nexport class PlacementController implements ReactiveController {\n    private cleanup?: () => void;\n\n    initialHeight?: number;\n\n    isConstrained?: boolean;\n\n    private host!: ReactiveElement & { elements: OpenableElement[] };\n\n    private options!: OverlayOptionsV1;\n\n    private originalPlacements = new WeakMap<HTMLElement, Placement>();\n\n    private target!: HTMLElement;\n\n    constructor(host: ReactiveElement & { elements: OpenableElement[] }) {\n        this.host = host;\n        // Add the controller after the MutationObserver has been created in preparation\n        // for the `hostConnected`/`hostDisconnected` callbacks to be run.\n        this.host.addController(this);\n    }\n\n    public async placeOverlay(\n        target: HTMLElement = this.target,\n        options: OverlayOptionsV1 = this.options\n    ): Promise<void> {\n        this.target = target;\n        this.options = options;\n        if (!target || !options) return;\n\n        const cleanupAncestorResize = autoUpdate(\n            options.trigger,\n            target,\n            this.closeForAncestorUpdate,\n            {\n                ancestorResize: false,\n                elementResize: false,\n                layoutShift: false,\n            }\n        );\n        const cleanupElementResize = autoUpdate(\n            options.trigger,\n            target,\n            this.updatePlacement,\n            {\n                ancestorScroll: false,\n            }\n        );\n        this.cleanup = () => {\n            this.host.elements?.forEach((element) => {\n                element.addEventListener(\n                    'sp-closed',\n                    () => {\n                        const placement = this.originalPlacements.get(element);\n                        if (placement) {\n                            element.setAttribute('placement', placement);\n                        }\n                        this.originalPlacements.delete(element);\n                    },\n                    { once: true }\n                );\n            });\n            cleanupAncestorResize();\n            cleanupElementResize();\n        };\n    }\n\n    allowPlacementUpdate = false;\n\n    closeForAncestorUpdate = (): void => {\n        if (\n            !this.allowPlacementUpdate &&\n            this.options.type !== 'modal' &&\n            this.cleanup\n        ) {\n            this.target.dispatchEvent(new Event('close', { bubbles: true }));\n        }\n        this.allowPlacementUpdate = false;\n    };\n\n    updatePlacement = (): void => {\n        this.computePlacement();\n    };\n\n    async computePlacement(): Promise<void> {\n        const { options, target } = this;\n\n        await (document.fonts ? document.fonts.ready : Promise.resolve());\n\n        const flipMiddleware = !(options.trigger instanceof HTMLElement)\n            ? flip({\n                  padding: REQUIRED_DISTANCE_TO_EDGE,\n                  fallbackPlacements: getFallbackPlacements(options.placement),\n              })\n            : flip();\n\n        const [mainAxis = 0, crossAxis = 0] = Array.isArray(options?.offset)\n            ? options.offset\n            : [options.offset, 0];\n\n        const tipElement = this.host.elements.find(\n            (el) => el.tipElement\n        )?.tipElement;\n\n        const middleware = [\n            offset({\n                mainAxis,\n                crossAxis,\n            }),\n            shift({ padding: REQUIRED_DISTANCE_TO_EDGE }),\n            flipMiddleware,\n            size({\n                padding: REQUIRED_DISTANCE_TO_EDGE,\n                apply: ({\n                    availableWidth,\n                    availableHeight,\n                    rects: { floating },\n                }) => {\n                    const maxHeight = Math.max(\n                        MIN_OVERLAY_HEIGHT,\n                        Math.floor(availableHeight)\n                    );\n                    const actualHeight = floating.height;\n                    this.initialHeight = !this.isConstrained // && !this.virtualTrigger\n                        ? actualHeight\n                        : this.initialHeight || actualHeight;\n                    this.isConstrained =\n                        actualHeight < this.initialHeight ||\n                        maxHeight <= actualHeight;\n                    const appliedHeight = this.isConstrained\n                        ? `${maxHeight}px`\n                        : '';\n                    Object.assign(target.style, {\n                        maxWidth: `${Math.floor(availableWidth)}px`,\n                        maxHeight: appliedHeight,\n                    });\n                },\n            }),\n            ...(tipElement\n                ? [\n                      arrow({\n                          element: tipElement,\n                          padding:\n                              options.tipPadding || REQUIRED_DISTANCE_TO_EDGE,\n                      }),\n                  ]\n                : []),\n        ];\n        const { x, y, placement, middlewareData } = await computePosition(\n            options.trigger,\n            target,\n            {\n                placement: options.placement,\n                middleware,\n                strategy: 'fixed',\n            }\n        );\n        Object.assign(target.style, {\n            top: '0px',\n            left: '0px',\n            translate: `${roundByDPR(x)}px ${roundByDPR(y)}px`,\n        });\n\n        target.setAttribute('actual-placement', placement);\n        this.host.elements?.forEach((element) => {\n            if (!this.originalPlacements.has(element)) {\n                this.originalPlacements.set(\n                    element,\n                    element.getAttribute('placement') as Placement\n                );\n            }\n            element.setAttribute('placement', placement);\n        });\n\n        if (tipElement && middlewareData.arrow) {\n            const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n            Object.assign(tipElement.style, {\n                top:\n                    placement.startsWith('right') ||\n                    placement.startsWith('left')\n                        ? '0px'\n                        : '',\n                left:\n                    placement.startsWith('bottom') ||\n                    placement.startsWith('top')\n                        ? '0px'\n                        : '',\n                translate: `${roundByDPR(arrowX)}px ${roundByDPR(arrowY)}px`,\n            });\n        }\n    }\n\n    public clearOverlayPosition(): void {\n        if (!this.target) {\n            return;\n        }\n        this.target.style.removeProperty('max-height');\n        this.target.style.removeProperty('max-width');\n        this.initialHeight = undefined;\n        this.isConstrained = false;\n    }\n\n    public resetOverlayPosition = (): void => {\n        if (!this.target || !this.options) return;\n        this.clearOverlayPosition();\n\n        // force paint\n        this.host.offsetHeight;\n        this.computePlacement();\n    };\n\n    hostConnected(): void {\n        document.addEventListener(\n            'sp-update-overlays',\n            this.resetOverlayPosition\n        );\n    }\n\n    hostUpdated(): void {\n        if (!(this.host as Overlay).open) {\n            this.cleanup?.();\n            this.cleanup = undefined;\n        }\n    }\n\n    hostDisconnected(): void {\n        this.cleanup?.();\n        this.cleanup = undefined;\n        document.removeEventListener(\n            'sp-update-overlays',\n            this.resetOverlayPosition\n        );\n    }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\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 type {\n    ReactiveController,\n    ReactiveElement,\n} from '@spectrum-web-components/base';\nimport {\n    arrow,\n    autoUpdate,\n    computePosition,\n    flip,\n    offset,\n    Placement,\n    shift,\n    size,\n} from '@floating-ui/dom';\nimport type { VirtualTrigger } from './VirtualTrigger.js';\nimport type { OpenableElement } from './overlay-types.js';\nimport type { Overlay } from './Overlay.js';\n\ntype OverlayOptionsV1 = {\n    abortPromise?: Promise<boolean>;\n    delayed?: boolean;\n    offset?: number | [number, number]; // supporting multi-axis\n    placement: Placement;\n    notImmediatelyClosable?: boolean; // rename or place behind other API options\n    receivesFocus?: 'auto';\n    root?: HTMLElement;\n    tipPadding?: number;\n    trigger: HTMLElement | VirtualTrigger;\n    type?: 'modal' | 'page' | 'hint' | 'auto' | 'manual';\n};\n\n/**\n * Rounds a number by the device pixel ratio (DPR).\n *\n * @param {number} [num] - The number to round.\n * @returns {number} The rounded number.\n */\nfunction roundByDPR(num?: number): number {\n    if (typeof num === 'undefined') return 0;\n    const dpr = window.devicePixelRatio || 1;\n    return Math.round(num * dpr) / dpr;\n}\n\n// Minimum distance required between the overlay and the edge of the container.\n// See: https://spectrum.adobe.com/page/popover/#Container-padding\nconst REQUIRED_DISTANCE_TO_EDGE = 8;\n// Minimum height for the overlay.\n// See: https://github.com/adobe/spectrum-web-components/issues/910\nconst MIN_OVERLAY_HEIGHT = 100;\n\n/**\n * Gets fallback placements for the overlay based on the initial placement.\n *\n * @param {Placement} placement - The initial placement of the overlay.\n * @returns {Placement[]} An array of fallback placements.\n */\nconst getFallbackPlacements = (placement: Placement): Placement[] => {\n    const fallbacks: Record<Placement, Placement[]> = {\n        left: ['right', 'bottom', 'top'],\n        'left-start': ['right-start', 'bottom', 'top'],\n        'left-end': ['right-end', 'bottom', 'top'],\n        right: ['left', 'bottom', 'top'],\n        'right-start': ['left-start', 'bottom', 'top'],\n        'right-end': ['left-end', 'bottom', 'top'],\n        top: ['bottom', 'left', 'right'],\n        'top-start': ['bottom-start', 'left', 'right'],\n        'top-end': ['bottom-end', 'left', 'right'],\n        bottom: ['top', 'left', 'right'],\n        'bottom-start': ['top-start', 'left', 'right'],\n        'bottom-end': ['top-end', 'left', 'right'],\n    };\n    return fallbacks[placement] ?? [placement];\n};\n\n/**\n * Symbol used to indicate that the placement has been updated.\n */\nexport const placementUpdatedSymbol = Symbol('placement updated');\n\n/**\n * Controller for managing the placement of an overlay.\n *\n * This class implements the ReactiveController interface and provides methods\n * for managing the positioning and constraints of an overlay element.\n */\nexport class PlacementController implements ReactiveController {\n    /**\n     * Function to clean up resources when the controller is no longer needed.\n     *\n     * @private\n     */\n    private cleanup?: () => void;\n\n    /**\n     * Initial height of the overlay.\n     *\n     * @type {number}\n     */\n    initialHeight?: number;\n\n    /**\n     * Indicates whether the overlay is constrained by available space.\n     *\n     * @type {boolean}\n     */\n    isConstrained?: boolean;\n\n    /**\n     * The host element that uses this controller.\n     *\n     * @private\n     * @type {ReactiveElement & { elements: OpenableElement[] }}\n     */\n    private host!: ReactiveElement & { elements: OpenableElement[] };\n\n    /**\n     * Options for configuring the overlay placement.\n     *\n     * @private\n     * @type {OverlayOptionsV1}\n     */\n    private options!: OverlayOptionsV1;\n\n    /**\n     * A WeakMap to store the original placements of overlay elements.\n     *\n     * @private\n     * @type {WeakMap<HTMLElement, Placement>}\n     */\n    private originalPlacements = new WeakMap<HTMLElement, Placement>();\n\n    /**\n     * The target element for the overlay.\n     *\n     * @private\n     * @type {HTMLElement}\n     */\n    private target!: HTMLElement;\n\n    /**\n     * Creates an instance of the PlacementController.\n     *\n     * @param {ReactiveElement & { elements: OpenableElement[] }} host - The host element that uses this controller.\n     */\n    constructor(host: ReactiveElement & { elements: OpenableElement[] }) {\n        this.host = host;\n        // Add the controller after the MutationObserver has been created in preparation\n        // for the `hostConnected`/`hostDisconnected` callbacks to be run.\n        this.host.addController(this);\n    }\n\n    /**\n     * Places the overlay relative to the target element.\n     *\n     * This method sets up the necessary configurations and event listeners to manage the\n     * positioning and constraints of the overlay element.\n     *\n     * @param {HTMLElement} [target=this.target] - The target element for the overlay.\n     * @param {OverlayOptionsV1} [options=this.options] - The options for configuring the overlay placement.\n     * @returns {Promise<void>} A promise that resolves when the overlay has been placed.\n     */\n    public async placeOverlay(\n        target: HTMLElement = this.target,\n        options: OverlayOptionsV1 = this.options\n    ): Promise<void> {\n        // Set the target and options for the overlay.\n        this.target = target;\n        this.options = options;\n        if (!target || !options) return;\n\n        // Set up auto-update for ancestor resize events.\n        const cleanupAncestorResize = autoUpdate(\n            options.trigger,\n            target,\n            this.closeForAncestorUpdate,\n            {\n                ancestorResize: false,\n                elementResize: false,\n                layoutShift: false,\n            }\n        );\n\n        // Set up auto-update for element resize events.\n        const cleanupElementResize = autoUpdate(\n            options.trigger,\n            target,\n            this.updatePlacement,\n            {\n                ancestorScroll: false,\n            }\n        );\n\n        // Define the cleanup function to remove event listeners and reset placements.\n        this.cleanup = () => {\n            this.host.elements?.forEach((element) => {\n                element.addEventListener(\n                    'sp-closed',\n                    () => {\n                        const placement = this.originalPlacements.get(element);\n\n                        if (placement) {\n                            element.setAttribute('placement', placement);\n                        }\n\n                        this.originalPlacements.delete(element);\n                    },\n                    { once: true }\n                );\n            });\n            cleanupAncestorResize();\n            cleanupElementResize();\n        };\n    }\n\n    /**\n     * Flag to allow or disallow placement updates.\n     *\n     * @type {boolean}\n     */\n    public allowPlacementUpdate = false;\n\n    /**\n     * Closes the overlay if an ancestor element is updated.\n     *\n     * This method checks if placement updates are allowed and if the overlay type is not 'modal'.\n     * If these conditions are met and a cleanup function is defined, it dispatches a 'close' event\n     * on the target element to close the overlay.\n     */\n    closeForAncestorUpdate = (): void => {\n        if (\n            !this.allowPlacementUpdate &&\n            this.options.type !== 'modal' &&\n            this.cleanup\n        ) {\n            // Dispatch a 'close' event to close the overlay.\n            this.target.dispatchEvent(new Event('close', { bubbles: true }));\n        }\n\n        // Reset the flag to disallow placement updates.\n        this.allowPlacementUpdate = false;\n    };\n\n    /**\n     * Updates the placement of the overlay.\n     *\n     * This method calls the computePlacement method to recalculate the overlay's position.\n     *\n     * @private\n     */\n    private updatePlacement = (): void => {\n        this.computePlacement();\n    };\n\n    /**\n     * Computes the placement of the overlay relative to the target element.\n     *\n     * This method calculates the necessary positioning and constraints for the overlay element\n     * using various middleware functions. It updates the overlay's style and attributes based\n     * on the computed position.\n     *\n     * @returns {Promise<void>} A promise that resolves when the placement has been computed.\n     */\n    async computePlacement(): Promise<void> {\n        const { options, target } = this;\n\n        // Wait for document fonts to be ready before computing placement.\n        await (document.fonts ? document.fonts.ready : Promise.resolve());\n\n        // Determine the flip middleware based on the type of trigger element.\n        const flipMiddleware = !(options.trigger instanceof HTMLElement)\n            ? flip({\n                  padding: REQUIRED_DISTANCE_TO_EDGE,\n                  fallbackPlacements: getFallbackPlacements(options.placement),\n              })\n            : flip();\n\n        // Extract main axis and cross axis offsets from options.\n        const [mainAxis = 0, crossAxis = 0] = Array.isArray(options?.offset)\n            ? options.offset\n            : [options.offset, 0];\n\n        // Find the tip element within the host elements.\n        const tipElement = this.host.elements.find(\n            (el) => el.tipElement\n        )?.tipElement;\n\n        // Define middleware functions for positioning and constraints.\n        const middleware = [\n            offset({\n                mainAxis,\n                crossAxis,\n            }),\n            shift({ padding: REQUIRED_DISTANCE_TO_EDGE }),\n            flipMiddleware,\n            size({\n                padding: REQUIRED_DISTANCE_TO_EDGE,\n                apply: ({\n                    availableWidth,\n                    availableHeight,\n                    rects: { floating },\n                }) => {\n                    const maxHeight = Math.max(\n                        MIN_OVERLAY_HEIGHT,\n                        Math.floor(availableHeight)\n                    );\n                    const actualHeight = floating.height;\n                    this.initialHeight = !this.isConstrained // && !this.virtualTrigger\n                        ? actualHeight\n                        : this.initialHeight || actualHeight;\n                    this.isConstrained =\n                        actualHeight < this.initialHeight ||\n                        maxHeight <= actualHeight;\n                    const appliedHeight = this.isConstrained\n                        ? `${maxHeight}px`\n                        : '';\n                    Object.assign(target.style, {\n                        maxWidth: `${Math.floor(availableWidth)}px`,\n                        maxHeight: appliedHeight,\n                    });\n                },\n            }),\n            ...(tipElement\n                ? [\n                      arrow({\n                          element: tipElement,\n                          padding:\n                              options.tipPadding || REQUIRED_DISTANCE_TO_EDGE,\n                      }),\n                  ]\n                : []),\n        ];\n\n        // Compute the position of the overlay using the defined middleware.\n        const { x, y, placement, middlewareData } = await computePosition(\n            options.trigger,\n            target,\n            {\n                placement: options.placement,\n                middleware,\n                strategy: 'fixed',\n            }\n        );\n\n        // Update the overlay's style with the computed position.\n        Object.assign(target.style, {\n            top: '0px',\n            left: '0px',\n            translate: `${roundByDPR(x)}px ${roundByDPR(y)}px`,\n        });\n\n        // Set the 'actual-placement' attribute on the target element.\n        target.setAttribute('actual-placement', placement);\n\n        // Update the placement attribute for each host element.\n        this.host.elements?.forEach((element) => {\n            if (!this.originalPlacements.has(element)) {\n                this.originalPlacements.set(\n                    element,\n                    element.getAttribute('placement') as Placement\n                );\n            }\n            element.setAttribute('placement', placement);\n        });\n\n        // Update the tip element's style with the computed arrow position.\n        if (tipElement && middlewareData.arrow) {\n            const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n            Object.assign(tipElement.style, {\n                top:\n                    placement.startsWith('right') ||\n                    placement.startsWith('left')\n                        ? '0px'\n                        : '',\n                left:\n                    placement.startsWith('bottom') ||\n                    placement.startsWith('top')\n                        ? '0px'\n                        : '',\n                translate: `${roundByDPR(arrowX)}px ${roundByDPR(arrowY)}px`,\n            });\n        }\n    }\n\n    /**\n     * Clears the overlay's position styles.\n     *\n     * This method removes the max-height and max-width styles from the target element,\n     * and resets the initial height and constrained state of the overlay.\n     */\n    public clearOverlayPosition(): void {\n        if (!this.target) {\n            return;\n        }\n        // Remove max-height and max-width styles from the target element.\n        this.target.style.removeProperty('max-height');\n        this.target.style.removeProperty('max-width');\n        // Reset the initial height and constrained state.\n        this.initialHeight = undefined;\n        this.isConstrained = false;\n    }\n\n    /**\n     * Resets the overlay's position.\n     *\n     * This method clears the overlay's position, forces a reflow, and recomputes the placement.\n     */\n    public resetOverlayPosition = (): void => {\n        if (!this.target || !this.options) return;\n        // Clear the overlay's position.\n        this.clearOverlayPosition();\n\n        // Force a reflow.\n        this.host.offsetHeight;\n        // Recompute the placement.\n        this.computePlacement();\n    };\n\n    /**\n     * Lifecycle method called when the host element is connected to the DOM.\n     *\n     * This method sets up an event listener to reset the overlay's position when the 'sp-update-overlays' event is dispatched.\n     */\n    hostConnected(): void {\n        document.addEventListener(\n            'sp-update-overlays',\n            this.resetOverlayPosition\n        );\n    }\n\n    /**\n     * Lifecycle method called when the host element is updated.\n     *\n     * This method cleans up resources if the overlay is not open.\n     */\n    hostUpdated(): void {\n        if (!(this.host as Overlay).open) {\n            // Clean up resources if the overlay is not open.\n            this.cleanup?.();\n            this.cleanup = undefined;\n        }\n    }\n\n    /**\n     * Lifecycle method called when the host element is disconnected from the DOM.\n     *\n     * This method removes the event listener and cleans up resources.\n     */\n    hostDisconnected(): void {\n        // Clean up resources.\n        this.cleanup?.();\n        this.cleanup = undefined;\n        // Remove the event listener.\n        document.removeEventListener(\n            'sp-update-overlays',\n            this.resetOverlayPosition\n        );\n    }\n}\n"],
+  "mappings": "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",
   "names": ["arrow", "autoUpdate", "computePosition", "flip", "offset", "shift", "size", "roundByDPR", "num", "dpr", "REQUIRED_DISTANCE_TO_EDGE", "MIN_OVERLAY_HEIGHT", "getFallbackPlacements", "placement", "_a", "host", "target", "options", "cleanupAncestorResize", "cleanupElementResize", "element", "_b", "flipMiddleware", "mainAxis", "crossAxis", "tipElement", "el", "middleware", "availableWidth", "availableHeight", "floating", "maxHeight", "actualHeight", "appliedHeight", "x", "y", "middlewareData", "arrowX", "arrowY"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["overlay-trigger.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2024 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;"],
+  "sourcesContent": ["/*\nCopyright 2025 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.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["overlay-trigger.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2024 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;"],
+  "sourcesContent": ["/*\nCopyright 2025 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.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["overlay.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2024 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{pointer-events:none;--swc-overlay-animation-distance:var(--spectrum-spacing-100);display:contents}:host(:has(>sp-tooltip)){--swc-overlay-animation-distance:var(--spectrum-tooltip-animation-distance)}.dialog{box-sizing:border-box;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);height:auto;--sp-overlay-open:true;background:0 0;border:0;margin:0;padding:0;display:flex;position:fixed;inset:0 auto auto 0;overflow:visible;opacity:1!important}.dialog:not([is-visible]){display:none}.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:\"\";position:absolute;inset:-999em;pointer-events:auto!important}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto;visibility:visible!important}::slotted(sp-popover){position:static}.dialog:not([actual-placement])[placement*=top]{padding-block:var(--swc-overlay-animation-distance);margin-top:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=right]{padding-inline:var(--swc-overlay-animation-distance);margin-left:calc(-1*var(--swc-overlay-animation-distance))}.dialog:not([actual-placement])[placement*=bottom]{padding-block:var(--swc-overlay-animation-distance);margin-top:calc(-1*var(--swc-overlay-animation-distance))}.dialog:not([actual-placement])[placement*=left]{padding-inline:var(--swc-overlay-animation-distance);margin-left:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=top]{padding-block:var(--swc-overlay-animation-distance);margin-top:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=right]{padding-inline:var(--swc-overlay-animation-distance);margin-left:calc(-1*var(--swc-overlay-animation-distance))}.dialog[actual-placement*=bottom]{padding-block:var(--swc-overlay-animation-distance);margin-top:calc(-1*var(--swc-overlay-animation-distance))}.dialog[actual-placement*=left]{padding-inline:var(--swc-overlay-animation-distance);margin-left:var(--swc-overlay-animation-distance)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{opacity:1;--mod-popover-filter:var(--spectrum-popover-filter)}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{opacity:1;--mod-popover-filter:var(--spectrum-popover-filter)}}@supports (overlay:auto){.dialog{transition:all var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s)),translate 0s,display var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s));transition-behavior:allow-discrete;display:none}.dialog:popover-open,.dialog:modal{display:flex}}@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 2025 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{pointer-events:none;--swc-overlay-animation-distance:var(--spectrum-spacing-100);display:contents}:host(:has(>sp-tooltip)){--swc-overlay-animation-distance:var(--spectrum-tooltip-animation-distance)}.dialog{box-sizing:border-box;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);height:auto;--sp-overlay-open:true;background:0 0;border:0;margin:0;padding:0;display:flex;position:fixed;inset:0 auto auto 0;overflow:visible;opacity:1!important}.dialog:not([is-visible]){display:none}.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:\"\";position:absolute;inset:-999em;pointer-events:auto!important}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto;visibility:visible!important}::slotted(sp-popover){position:static}.dialog:not([actual-placement])[placement*=top]{padding-block:var(--swc-overlay-animation-distance);margin-top:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=right]{padding-inline:var(--swc-overlay-animation-distance);margin-left:calc(-1*var(--swc-overlay-animation-distance))}.dialog:not([actual-placement])[placement*=bottom]{padding-block:var(--swc-overlay-animation-distance);margin-top:calc(-1*var(--swc-overlay-animation-distance))}.dialog:not([actual-placement])[placement*=left]{padding-inline:var(--swc-overlay-animation-distance);margin-left:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=top]{padding-block:var(--swc-overlay-animation-distance);margin-top:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=right]{padding-inline:var(--swc-overlay-animation-distance);margin-left:calc(-1*var(--swc-overlay-animation-distance))}.dialog[actual-placement*=bottom]{padding-block:var(--swc-overlay-animation-distance);margin-top:calc(-1*var(--swc-overlay-animation-distance))}.dialog[actual-placement*=left]{padding-inline:var(--swc-overlay-animation-distance);margin-left:var(--swc-overlay-animation-distance)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{opacity:1;--mod-popover-filter:var(--spectrum-popover-filter)}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{opacity:1;--mod-popover-filter:var(--spectrum-popover-filter)}}@supports (overlay:auto){.dialog{transition:all var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s)),translate 0s,display var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s));transition-behavior:allow-discrete;display:none}.dialog:popover-open,.dialog:modal{display:flex}}@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;AAGf,eAAe;",
   "names": []
 }

package/src/overlay.css.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["overlay.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2024 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{pointer-events:none;--swc-overlay-animation-distance:var(--spectrum-spacing-100);display:contents}:host(:has(>sp-tooltip)){--swc-overlay-animation-distance:var(--spectrum-tooltip-animation-distance)}.dialog{box-sizing:border-box;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);height:auto;--sp-overlay-open:true;background:0 0;border:0;margin:0;padding:0;display:flex;position:fixed;inset:0 auto auto 0;overflow:visible;opacity:1!important}.dialog:not([is-visible]){display:none}.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:\"\";position:absolute;inset:-999em;pointer-events:auto!important}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto;visibility:visible!important}::slotted(sp-popover){position:static}.dialog:not([actual-placement])[placement*=top]{padding-block:var(--swc-overlay-animation-distance);margin-top:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=right]{padding-inline:var(--swc-overlay-animation-distance);margin-left:calc(-1*var(--swc-overlay-animation-distance))}.dialog:not([actual-placement])[placement*=bottom]{padding-block:var(--swc-overlay-animation-distance);margin-top:calc(-1*var(--swc-overlay-animation-distance))}.dialog:not([actual-placement])[placement*=left]{padding-inline:var(--swc-overlay-animation-distance);margin-left:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=top]{padding-block:var(--swc-overlay-animation-distance);margin-top:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=right]{padding-inline:var(--swc-overlay-animation-distance);margin-left:calc(-1*var(--swc-overlay-animation-distance))}.dialog[actual-placement*=bottom]{padding-block:var(--swc-overlay-animation-distance);margin-top:calc(-1*var(--swc-overlay-animation-distance))}.dialog[actual-placement*=left]{padding-inline:var(--swc-overlay-animation-distance);margin-left:var(--swc-overlay-animation-distance)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{opacity:1;--mod-popover-filter:var(--spectrum-popover-filter)}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{opacity:1;--mod-popover-filter:var(--spectrum-popover-filter)}}@supports (overlay:auto){.dialog{transition:all var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s)),translate 0s,display var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s));transition-behavior:allow-discrete;display:none}.dialog:popover-open,.dialog:modal{display:flex}}@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 2025 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{pointer-events:none;--swc-overlay-animation-distance:var(--spectrum-spacing-100);display:contents}:host(:has(>sp-tooltip)){--swc-overlay-animation-distance:var(--spectrum-tooltip-animation-distance)}.dialog{box-sizing:border-box;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);height:auto;--sp-overlay-open:true;background:0 0;border:0;margin:0;padding:0;display:flex;position:fixed;inset:0 auto auto 0;overflow:visible;opacity:1!important}.dialog:not([is-visible]){display:none}.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:\"\";position:absolute;inset:-999em;pointer-events:auto!important}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto;visibility:visible!important}::slotted(sp-popover){position:static}.dialog:not([actual-placement])[placement*=top]{padding-block:var(--swc-overlay-animation-distance);margin-top:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=right]{padding-inline:var(--swc-overlay-animation-distance);margin-left:calc(-1*var(--swc-overlay-animation-distance))}.dialog:not([actual-placement])[placement*=bottom]{padding-block:var(--swc-overlay-animation-distance);margin-top:calc(-1*var(--swc-overlay-animation-distance))}.dialog:not([actual-placement])[placement*=left]{padding-inline:var(--swc-overlay-animation-distance);margin-left:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=top]{padding-block:var(--swc-overlay-animation-distance);margin-top:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=right]{padding-inline:var(--swc-overlay-animation-distance);margin-left:calc(-1*var(--swc-overlay-animation-distance))}.dialog[actual-placement*=bottom]{padding-block:var(--swc-overlay-animation-distance);margin-top:calc(-1*var(--swc-overlay-animation-distance))}.dialog[actual-placement*=left]{padding-inline:var(--swc-overlay-animation-distance);margin-left:var(--swc-overlay-animation-distance)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{opacity:1;--mod-popover-filter:var(--spectrum-popover-filter)}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{opacity:1;--mod-popover-filter:var(--spectrum-popover-filter)}}@supports (overlay:auto){.dialog{transition:all var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s)),translate 0s,display var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s));transition-behavior:allow-discrete;display:none}.dialog:popover-open,.dialog:modal{display:flex}}@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,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
   "names": ["css", "styles"]
 }

package/stories/index.js

@@ -6,9 +6,17 @@ function nextFrame() {
 class IsOverlayOpen extends HTMLElement {
   constructor() {
     super();
+    this.sendFocus = async () => {
+      var _a;
+      const selectedItem = (_a = document.querySelector("[focusable]")) == null ? void 0 : _a.querySelector("[selected]");
+      if (selectedItem) {
+        selectedItem.focus();
+        selectedItem.focused = true;
+      }
+    };
     this.handleOpened = async (event) => {
       const overlay = event.target;
-      const actions = [nextFrame(), overlay.updateComplete];
+      const actions = [nextFrame(), overlay.updateComplete, this.sendFocus()];
       await Promise.all(actions);
       await nextFrame();
       await nextFrame();

package/stories/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["index.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*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport type { Overlay } from '@spectrum-web-components/overlay';\n\nfunction nextFrame(): Promise<void> {\n    return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nclass IsOverlayOpen extends HTMLElement {\n    ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n    constructor() {\n        super();\n        this.readyPromise = new Promise((res) => {\n            this.ready = res;\n            this.setup();\n        });\n    }\n\n    async setup(): Promise<void> {\n        await nextFrame();\n\n        document.addEventListener('sp-opened', this.handleOpened);\n    }\n\n    handleOpened = async (event: Event): Promise<void> => {\n        const overlay = event.target as Overlay;\n        const actions = [nextFrame(), overlay.updateComplete];\n\n        await Promise.all(actions);\n        // Focus happens _after_ `sp-opened` by at least two frames.\n        await nextFrame();\n        await nextFrame();\n        await nextFrame();\n        await nextFrame();\n\n        this.ready(true);\n    };\n\n    private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n    get updateComplete(): Promise<boolean> {\n        return this.readyPromise;\n    }\n}\n\ncustomElements.define('is-overlay-open', IsOverlayOpen);\n\nexport const isOverlayOpen = (story: () => TemplateResult): TemplateResult => {\n    return html`\n        ${story()}\n        <is-overlay-open></is-overlay-open>\n    `;\n};\n"],
-  "mappings": ";AAYA,SAAS,YAA4B;AAGrC,SAAS,YAA2B;AAChC,SAAO,IAAI,QAAQ,CAAC,QAAQ,sBAAsB,MAAM,IAAI,CAAC,CAAC;AAClE;AAEA,MAAM,sBAAsB,YAAY;AAAA,EAGpC,cAAc;AACV,UAAM;AAaV,wBAAe,OAAO,UAAgC;AAClD,YAAM,UAAU,MAAM;AACtB,YAAM,UAAU,CAAC,UAAU,GAAG,QAAQ,cAAc;AAEpD,YAAM,QAAQ,IAAI,OAAO;AAEzB,YAAM,UAAU;AAChB,YAAM,UAAU;AAChB,YAAM,UAAU;AAChB,YAAM,UAAU;AAEhB,WAAK,MAAM,IAAI;AAAA,IACnB;AAEA,SAAQ,eAAiC,QAAQ,QAAQ,KAAK;AA1B1D,SAAK,eAAe,IAAI,QAAQ,CAAC,QAAQ;AACrC,WAAK,QAAQ;AACb,WAAK,MAAM;AAAA,IACf,CAAC;AAAA,EACL;AAAA,EAEA,MAAM,QAAuB;AACzB,UAAM,UAAU;AAEhB,aAAS,iBAAiB,aAAa,KAAK,YAAY;AAAA,EAC5D;AAAA,EAkBA,IAAI,iBAAmC;AACnC,WAAO,KAAK;AAAA,EAChB;AACJ;AAEA,eAAe,OAAO,mBAAmB,aAAa;AAE/C,aAAM,gBAAgB,CAAC,UAAgD;AAC1E,SAAO;AAAA,UACD,MAAM,CAAC;AAAA;AAAA;AAGjB;",
+  "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*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport type { Overlay } from '@spectrum-web-components/overlay';\n\nfunction nextFrame(): Promise<void> {\n    return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nclass IsOverlayOpen extends HTMLElement {\n    ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n    constructor() {\n        super();\n        this.readyPromise = new Promise((res) => {\n            this.ready = res;\n            this.setup();\n        });\n    }\n\n    async setup(): Promise<void> {\n        await nextFrame();\n        document.addEventListener('sp-opened', this.handleOpened);\n    }\n\n    private sendFocus = async (): Promise<void> => {\n        const selectedItem = document\n            .querySelector('[focusable]')\n            ?.querySelector('[selected]') as HTMLElement & {\n            focused?: boolean;\n        };\n\n        if (selectedItem) {\n            selectedItem.focus();\n            selectedItem.focused = true;\n        }\n    };\n\n    handleOpened = async (event: Event): Promise<void> => {\n        const overlay = event.target as Overlay;\n        const actions = [nextFrame(), overlay.updateComplete, this.sendFocus()];\n\n        await Promise.all(actions);\n        // Focus happens _after_ `sp-opened` by at least two frames.\n        await nextFrame();\n        await nextFrame();\n        await nextFrame();\n        await nextFrame();\n\n        this.ready(true);\n    };\n\n    private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n    get updateComplete(): Promise<boolean> {\n        return this.readyPromise;\n    }\n}\n\ncustomElements.define('is-overlay-open', IsOverlayOpen);\n\nexport const isOverlayOpen = (story: () => TemplateResult): TemplateResult => {\n    return html`\n        ${story()}\n        <is-overlay-open></is-overlay-open>\n    `;\n};\n"],
+  "mappings": ";AAYA,SAAS,YAA4B;AAGrC,SAAS,YAA2B;AAChC,SAAO,IAAI,QAAQ,CAAC,QAAQ,sBAAsB,MAAM,IAAI,CAAC,CAAC;AAClE;AAEA,MAAM,sBAAsB,YAAY;AAAA,EAGpC,cAAc;AACV,UAAM;AAYV,SAAQ,YAAY,YAA2B;AAnCnD;AAoCQ,YAAM,gBAAe,cAChB,cAAc,aAAa,MADX,mBAEf,cAAc;AAIpB,UAAI,cAAc;AACd,qBAAa,MAAM;AACnB,qBAAa,UAAU;AAAA,MAC3B;AAAA,IACJ;AAEA,wBAAe,OAAO,UAAgC;AAClD,YAAM,UAAU,MAAM;AACtB,YAAM,UAAU,CAAC,UAAU,GAAG,QAAQ,gBAAgB,KAAK,UAAU,CAAC;AAEtE,YAAM,QAAQ,IAAI,OAAO;AAEzB,YAAM,UAAU;AAChB,YAAM,UAAU;AAChB,YAAM,UAAU;AAChB,YAAM,UAAU;AAEhB,WAAK,MAAM,IAAI;AAAA,IACnB;AAEA,SAAQ,eAAiC,QAAQ,QAAQ,KAAK;AAtC1D,SAAK,eAAe,IAAI,QAAQ,CAAC,QAAQ;AACrC,WAAK,QAAQ;AACb,WAAK,MAAM;AAAA,IACf,CAAC;AAAA,EACL;AAAA,EAEA,MAAM,QAAuB;AACzB,UAAM,UAAU;AAChB,aAAS,iBAAiB,aAAa,KAAK,YAAY;AAAA,EAC5D;AAAA,EA+BA,IAAI,iBAAmC;AACnC,WAAO,KAAK;AAAA,EAChB;AACJ;AAEA,eAAe,OAAO,mBAAmB,aAAa;AAE/C,aAAM,gBAAgB,CAAC,UAAgD;AAC1E,SAAO;AAAA,UACD,MAAM,CAAC;AAAA;AAAA;AAGjB;",
   "names": []
 }

package/stories/overlay-directive.stories.js

@@ -226,10 +226,18 @@ export const Default = ({ open } = {}) => {
 Default.swc_vrt = {
   skip: true
 };
+Default.parameters = {
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true }
+};
 export const configured = (args) => template(args);
 configured.swc_vrt = {
   skip: true
 };
+configured.parameters = {
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true }
+};
 export const insertionOptions = (args = {}) => html`
     ${template(args)}
     <div id="other-element"></div>
@@ -243,6 +251,10 @@ insertionOptions.args = {
 insertionOptions.swc_vrt = {
   skip: true
 };
+insertionOptions.parameters = {
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true }
+};
 class ManagedOverlayTrigger extends LitElement {
   constructor() {
     super(...arguments);
@@ -321,4 +333,8 @@ export const managedOverlayTrigger = () => html`
 managedOverlayTrigger.swc_vrt = {
   skip: true
 };
+managedOverlayTrigger.parameters = {
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true }
+};
 //# sourceMappingURL=overlay-directive.stories.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["overlay-directive.stories.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n    html,\n    LitElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    OverlayContentTypes,\n    OverlayOpenCloseDetail,\n    Placement,\n    TriggerInteractions,\n} from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/dialog/sp-dialog-wrapper.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-open-in.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport {\n    InsertionOptions,\n    trigger,\n} from '@spectrum-web-components/overlay/src/overlay-trigger-directive.js';\n\nimport '@spectrum-web-components/dialog/sp-dialog.js';\nimport '@spectrum-web-components/picker/sp-picker.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/slider/sp-slider.js';\nimport '@spectrum-web-components/radio/sp-radio.js';\nimport '@spectrum-web-components/radio/sp-radio-group.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport '@spectrum-web-components/theme/src/themes.js';\nimport '@spectrum-web-components/accordion/sp-accordion.js';\nimport '@spectrum-web-components/accordion/sp-accordion-item.js';\nimport '../../../projects/story-decorator/src/types.js';\n\nimport './overlay-story-components.js';\nimport { tooltip } from '@spectrum-web-components/tooltip/src/tooltip-directive.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { state } from '@spectrum-web-components/base/src/decorators.js';\n\nconst storyStyles = html`\n    <style>\n        html,\n        body,\n        #root,\n        #root-inner,\n        sp-story-decorator {\n            height: 100%;\n            margin: 0;\n        }\n\n        sp-story-decorator::part(container) {\n            display: flex;\n            flex-direction: column;\n            width: 100%;\n            height: 100%;\n            align-items: center;\n            justify-content: center;\n        }\n\n        overlay-trigger {\n            flex: none;\n        }\n\n        #styled-div {\n            background-color: var(--styled-div-background-color, blue);\n            color: white;\n            padding: 4px 10px;\n            margin-bottom: 10px;\n        }\n\n        #inner-trigger {\n            display: inline-block;\n        }\n    </style>\n`;\n\nexport default {\n    title: 'Overlay Directive',\n    argTypes: {\n        offset: { control: 'number' },\n        placement: {\n            control: {\n                type: 'inline-radio',\n                options: [\n                    'top',\n                    'top-start',\n                    'top-end',\n                    'bottom',\n                    'bottom-start',\n                    'bottom-end',\n                    'left',\n                    'left-start',\n                    'left-end',\n                    'right',\n                    'right-start',\n                    'right-end',\n                    'auto',\n                    'auto-start',\n                    'auto-end',\n                    'none',\n                ],\n            },\n        },\n        type: {\n            control: {\n                type: 'inline-radio',\n                options: ['modal', 'replace', 'inline'],\n            },\n        },\n        colorStop: {\n            control: {\n                type: 'inline-radio',\n                options: ['light', 'dark'],\n            },\n        },\n        open: {\n            name: 'open',\n            type: { name: 'boolean', required: false },\n            description: 'Whether the second accordion item is open.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n    },\n    args: {\n        placement: 'bottom',\n        offset: 0,\n        colorStop: 'light',\n        triggerOn: 'click',\n        open: false,\n    },\n};\n\ninterface Properties {\n    placement?: Placement;\n    offset?: number;\n    triggerOn?: OverlayContentTypes;\n    type?: Extract<TriggerInteractions, 'inline' | 'modal' | 'replace'>;\n    insertionOptions?: InsertionOptions;\n    open?: boolean;\n}\n\nconst template = ({\n    placement,\n    offset,\n    open,\n    triggerOn,\n    insertionOptions,\n}: Properties): TemplateResult => {\n    const renderTooltip = (): TemplateResult => html`\n        Click to open a popover.\n    `;\n    const renderPopover = (): TemplateResult => html`\n        <sp-popover placement=\"${ifDefined(placement)}\" tip>\n            <sp-dialog no-divider>\n                <div class=\"options-popover-content\">\n                    <sp-slider\n                        value=\"5\"\n                        step=\"0.5\"\n                        min=\"0\"\n                        max=\"20\"\n                        label=\"Awesomeness\"\n                    ></sp-slider>\n                    <div id=\"styled-div\">\n                        The background of this div should be blue\n                    </div>\n                    <sp-button\n                        ${tooltip(\n                            () => html`\n                                Click to open another popover.\n                            `\n                        )}\n                        ${trigger(\n                            () => html`\n                                <sp-popover placement=\"bottom\" tip open>\n                                    <sp-dialog size=\"s\" no-divider>\n                                        <div class=\"options-popover-content\">\n                                            Another Popover\n                                        </div>\n                                    </sp-dialog>\n                                </sp-popover>\n                            `,\n                            {\n                                triggerInteraction: 'click',\n                                overlayOptions: {\n                                    placement: 'bottom',\n                                },\n                            }\n                        )}\n                    >\n                        Press Me\n                    </sp-button>\n                </div>\n            </sp-dialog>\n        </sp-popover>\n    `;\n    return html`\n        ${storyStyles}\n        <sp-button\n            variant=\"primary\"\n            ${tooltip(renderTooltip)}\n            ${trigger(renderPopover, {\n                open,\n                triggerInteraction: triggerOn,\n                overlayOptions: {\n                    placement,\n                    offset,\n                },\n                insertionOptions: insertionOptions,\n            })}\n        >\n            Show Popover\n        </sp-button>\n    `;\n};\n\nexport const Default = ({ open }: Properties = {}): TemplateResult => {\n    const renderPopover = (): TemplateResult => html`\n        <sp-popover>\n            <sp-dialog no-divider>Popover content goes here</sp-dialog>\n        </sp-popover>\n    `;\n    const options = typeof open !== 'undefined' ? { open } : undefined;\n    return html`\n        <sp-button ${trigger(renderPopover, options)}>Open Popover</sp-button>\n    `;\n};\n\nDefault.swc_vrt = {\n    skip: true,\n};\n\nexport const configured = (args: Properties): TemplateResult => template(args);\n\nconfigured.swc_vrt = {\n    skip: true,\n};\n\nexport const insertionOptions = (args: Properties = {}): TemplateResult => html`\n    ${template(args)}\n    <div id=\"other-element\"></div>\n`;\n\ninsertionOptions.args = {\n    insertionOptions: {\n        el: () => document.querySelector('#other-element'),\n        where: 'afterbegin',\n    },\n} as Properties;\n\ninsertionOptions.swc_vrt = {\n    skip: true,\n};\n\nclass ManagedOverlayTrigger extends LitElement {\n    @state()\n    private isRenderOverlay = false;\n\n    @state()\n    private isOpenState = false;\n\n    protected override render(): TemplateResult {\n        return html`\n            <sp-button\n                @click=${() => {\n                    this.isRenderOverlay = !this.isRenderOverlay;\n                }}\n            >\n                Toggle Overlay Render Button\n            </sp-button>\n\n            <sp-button\n                @click=${() => {\n                    this.isRenderOverlay = true;\n                    this.isOpenState = true;\n                }}\n            >\n                Create Overlay Render Button And Open Overlay\n            </sp-button>\n\n            ${this.isRenderOverlay ? this.renderOverlayButton() : html``}\n        `;\n    }\n\n    private renderOverlayButton(): TemplateResult {\n        return html`\n            <sp-button\n                ?selected=${this.isOpenState}\n                ${trigger(\n                    () => html`\n                        <sp-popover\n                            @sp-opened=${(\n                                event: CustomEvent<OverlayOpenCloseDetail>\n                            ) => {\n                                if (event.target !== event.currentTarget) {\n                                    return;\n                                }\n                                console.log('sp-opened');\n                                this.isOpenState = true;\n                            }}\n                            @sp-closed=${(\n                                event: CustomEvent<OverlayOpenCloseDetail>\n                            ) => {\n                                if (event.target !== event.currentTarget) {\n                                    return;\n                                }\n                                console.log('sp-closed');\n                                this.isOpenState = false;\n                            }}\n                        >\n                            <h1>My Test Popover</h1>\n                        </sp-popover>\n                    `,\n                    {\n                        triggerInteraction: 'click',\n                        overlayOptions: { placement: 'bottom-end' },\n                        open: this.isOpenState,\n                    }\n                )}\n            >\n                Toggle Popover\n            </sp-button>\n        `;\n    }\n}\n\ncustomElements.define('managed-overlay-trigger', ManagedOverlayTrigger);\n\nexport const managedOverlayTrigger = (): TemplateResult => html`\n    <managed-overlay-trigger></managed-overlay-trigger>\n`;\n\nmanagedOverlayTrigger.swc_vrt = {\n    skip: true,\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n    html,\n    LitElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    OverlayContentTypes,\n    OverlayOpenCloseDetail,\n    Placement,\n    TriggerInteractions,\n} from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/dialog/sp-dialog-wrapper.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-open-in.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport {\n    InsertionOptions,\n    trigger,\n} from '@spectrum-web-components/overlay/src/overlay-trigger-directive.js';\n\nimport '@spectrum-web-components/dialog/sp-dialog.js';\nimport '@spectrum-web-components/picker/sp-picker.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/slider/sp-slider.js';\nimport '@spectrum-web-components/radio/sp-radio.js';\nimport '@spectrum-web-components/radio/sp-radio-group.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport '@spectrum-web-components/theme/src/themes.js';\nimport '@spectrum-web-components/accordion/sp-accordion.js';\nimport '@spectrum-web-components/accordion/sp-accordion-item.js';\nimport '../../../projects/story-decorator/src/types.js';\n\nimport './overlay-story-components.js';\nimport { tooltip } from '@spectrum-web-components/tooltip/src/tooltip-directive.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { state } from '@spectrum-web-components/base/src/decorators.js';\n\nconst storyStyles = html`\n    <style>\n        html,\n        body,\n        #root,\n        #root-inner,\n        sp-story-decorator {\n            height: 100%;\n            margin: 0;\n        }\n\n        sp-story-decorator::part(container) {\n            display: flex;\n            flex-direction: column;\n            width: 100%;\n            height: 100%;\n            align-items: center;\n            justify-content: center;\n        }\n\n        overlay-trigger {\n            flex: none;\n        }\n\n        #styled-div {\n            background-color: var(--styled-div-background-color, blue);\n            color: white;\n            padding: 4px 10px;\n            margin-bottom: 10px;\n        }\n\n        #inner-trigger {\n            display: inline-block;\n        }\n    </style>\n`;\n\nexport default {\n    title: 'Overlay Directive',\n    argTypes: {\n        offset: { control: 'number' },\n        placement: {\n            control: {\n                type: 'inline-radio',\n                options: [\n                    'top',\n                    'top-start',\n                    'top-end',\n                    'bottom',\n                    'bottom-start',\n                    'bottom-end',\n                    'left',\n                    'left-start',\n                    'left-end',\n                    'right',\n                    'right-start',\n                    'right-end',\n                    'auto',\n                    'auto-start',\n                    'auto-end',\n                    'none',\n                ],\n            },\n        },\n        type: {\n            control: {\n                type: 'inline-radio',\n                options: ['modal', 'replace', 'inline'],\n            },\n        },\n        colorStop: {\n            control: {\n                type: 'inline-radio',\n                options: ['light', 'dark'],\n            },\n        },\n        open: {\n            name: 'open',\n            type: { name: 'boolean', required: false },\n            description: 'Whether the second accordion item is open.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n    },\n    args: {\n        placement: 'bottom',\n        offset: 0,\n        colorStop: 'light',\n        triggerOn: 'click',\n        open: false,\n    },\n};\n\ninterface Properties {\n    placement?: Placement;\n    offset?: number;\n    triggerOn?: OverlayContentTypes;\n    type?: Extract<TriggerInteractions, 'inline' | 'modal' | 'replace'>;\n    insertionOptions?: InsertionOptions;\n    open?: boolean;\n}\n\nconst template = ({\n    placement,\n    offset,\n    open,\n    triggerOn,\n    insertionOptions,\n}: Properties): TemplateResult => {\n    const renderTooltip = (): TemplateResult => html`\n        Click to open a popover.\n    `;\n    const renderPopover = (): TemplateResult => html`\n        <sp-popover placement=\"${ifDefined(placement)}\" tip>\n            <sp-dialog no-divider>\n                <div class=\"options-popover-content\">\n                    <sp-slider\n                        value=\"5\"\n                        step=\"0.5\"\n                        min=\"0\"\n                        max=\"20\"\n                        label=\"Awesomeness\"\n                    ></sp-slider>\n                    <div id=\"styled-div\">\n                        The background of this div should be blue\n                    </div>\n                    <sp-button\n                        ${tooltip(\n                            () => html`\n                                Click to open another popover.\n                            `\n                        )}\n                        ${trigger(\n                            () => html`\n                                <sp-popover placement=\"bottom\" tip open>\n                                    <sp-dialog size=\"s\" no-divider>\n                                        <div class=\"options-popover-content\">\n                                            Another Popover\n                                        </div>\n                                    </sp-dialog>\n                                </sp-popover>\n                            `,\n                            {\n                                triggerInteraction: 'click',\n                                overlayOptions: {\n                                    placement: 'bottom',\n                                },\n                            }\n                        )}\n                    >\n                        Press Me\n                    </sp-button>\n                </div>\n            </sp-dialog>\n        </sp-popover>\n    `;\n    return html`\n        ${storyStyles}\n        <sp-button\n            variant=\"primary\"\n            ${tooltip(renderTooltip)}\n            ${trigger(renderPopover, {\n                open,\n                triggerInteraction: triggerOn,\n                overlayOptions: {\n                    placement,\n                    offset,\n                },\n                insertionOptions: insertionOptions,\n            })}\n        >\n            Show Popover\n        </sp-button>\n    `;\n};\n\nexport const Default = ({ open }: Properties = {}): TemplateResult => {\n    const renderPopover = (): TemplateResult => html`\n        <sp-popover>\n            <sp-dialog no-divider>Popover content goes here</sp-dialog>\n        </sp-popover>\n    `;\n    const options = typeof open !== 'undefined' ? { open } : undefined;\n    return html`\n        <sp-button ${trigger(renderPopover, options)}>Open Popover</sp-button>\n    `;\n};\n\nDefault.swc_vrt = {\n    skip: true,\n};\n\nDefault.parameters = {\n    // Disables Chromatic's snapshotting on a global level\n    chromatic: { disableSnapshot: true },\n};\n\nexport const configured = (args: Properties): TemplateResult => template(args);\n\nconfigured.swc_vrt = {\n    skip: true,\n};\n\nconfigured.parameters = {\n    // Disables Chromatic's snapshotting on a global level\n    chromatic: { disableSnapshot: true },\n};\n\nexport const insertionOptions = (args: Properties = {}): TemplateResult => html`\n    ${template(args)}\n    <div id=\"other-element\"></div>\n`;\n\ninsertionOptions.args = {\n    insertionOptions: {\n        el: () => document.querySelector('#other-element'),\n        where: 'afterbegin',\n    },\n} as Properties;\n\ninsertionOptions.swc_vrt = {\n    skip: true,\n};\n\ninsertionOptions.parameters = {\n    // Disables Chromatic's snapshotting on a global level\n    chromatic: { disableSnapshot: true },\n};\n\nclass ManagedOverlayTrigger extends LitElement {\n    @state()\n    private isRenderOverlay = false;\n\n    @state()\n    private isOpenState = false;\n\n    protected override render(): TemplateResult {\n        return html`\n            <sp-button\n                @click=${() => {\n                    this.isRenderOverlay = !this.isRenderOverlay;\n                }}\n            >\n                Toggle Overlay Render Button\n            </sp-button>\n\n            <sp-button\n                @click=${() => {\n                    this.isRenderOverlay = true;\n                    this.isOpenState = true;\n                }}\n            >\n                Create Overlay Render Button And Open Overlay\n            </sp-button>\n\n            ${this.isRenderOverlay ? this.renderOverlayButton() : html``}\n        `;\n    }\n\n    private renderOverlayButton(): TemplateResult {\n        return html`\n            <sp-button\n                ?selected=${this.isOpenState}\n                ${trigger(\n                    () => html`\n                        <sp-popover\n                            @sp-opened=${(\n                                event: CustomEvent<OverlayOpenCloseDetail>\n                            ) => {\n                                if (event.target !== event.currentTarget) {\n                                    return;\n                                }\n                                console.log('sp-opened');\n                                this.isOpenState = true;\n                            }}\n                            @sp-closed=${(\n                                event: CustomEvent<OverlayOpenCloseDetail>\n                            ) => {\n                                if (event.target !== event.currentTarget) {\n                                    return;\n                                }\n                                console.log('sp-closed');\n                                this.isOpenState = false;\n                            }}\n                        >\n                            <h1>My Test Popover</h1>\n                        </sp-popover>\n                    `,\n                    {\n                        triggerInteraction: 'click',\n                        overlayOptions: { placement: 'bottom-end' },\n                        open: this.isOpenState,\n                    }\n                )}\n            >\n                Toggle Popover\n            </sp-button>\n        `;\n    }\n}\n\ncustomElements.define('managed-overlay-trigger', ManagedOverlayTrigger);\n\nexport const managedOverlayTrigger = (): TemplateResult => html`\n    <managed-overlay-trigger></managed-overlay-trigger>\n`;\n\nmanagedOverlayTrigger.swc_vrt = {\n    skip: true,\n};\n\nmanagedOverlayTrigger.parameters = {\n    // Disables Chromatic's snapshotting on a global level\n    chromatic: { disableSnapshot: true },\n};\n"],
+  "mappings": "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",
   "names": ["insertionOptions"]
 }

package/stories/overlay-element.stories.js

@@ -161,6 +161,10 @@ export const withSlider = () => html`
 withSlider.swc_vrt = {
   skip: true
 };
+withSlider.parameters = {
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true }
+};
 export const hover = (args) => Template(args);
 hover.args = {
   interaction: "hover",
@@ -633,6 +637,10 @@ export const transientHover = () => html`
 transientHover.swc_vrt = {
   skip: true
 };
+transientHover.parameters = {
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true }
+};
 export const lazyElements = () => {
   const handleSlottableRequest = (event) => {
     const template = event.data === removeSlottableRequest ? void 0 : html`
@@ -672,4 +680,8 @@ export const lazyElements = () => {
 lazyElements.swc_vrt = {
   skip: true
 };
+lazyElements.parameters = {
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true }
+};
 //# sourceMappingURL=overlay-element.stories.js.map