@spectrum-web-components/overlay 0.16.4 → 0.16.6-devmode.7

package/src/ActiveOverlay.js

@@ -1,409 +1,388 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import { __decorate } from "tslib";
-import { html, SpectrumElement, } from '@spectrum-web-components/base';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-import { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.js';
-import { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focusable-in.js';
-import styles from './active-overlay.css.js';
-import { parentOverlayOf } from './overlay-utils.js';
-import { arrow, computePosition, flip, offset, shift, size, } from '@floating-ui/dom';
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+import {
+  html,
+  SpectrumElement
+} from "@spectrum-web-components/base";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import { reparentChildren } from "@spectrum-web-components/shared/src/reparent-children.js";
+import { firstFocusableIn } from "@spectrum-web-components/shared/src/first-focusable-in.js";
+import styles from "./active-overlay.css.js";
+import { parentOverlayOf } from "./overlay-utils.js";
+import {
+  arrow,
+  computePosition,
+  flip,
+  offset,
+  shift,
+  size
+} from "@floating-ui/dom";
 const stateMachine = {
-    initial: 'idle',
-    states: {
-        idle: {
-            on: {
-                active: 'active',
-            },
-        },
-        active: {
-            on: {
-                hiding: 'hiding',
-                idle: 'idle',
-            },
-        },
-        hiding: {
-            on: {
-                dispose: 'dispose',
-            },
-        },
-        dispose: {
-            on: {
-                disposed: 'disposed',
-            },
-        },
-        disposed: {
-            on: {},
-        },
+  initial: "idle",
+  states: {
+    idle: {
+      on: {
+        active: "active"
+      }
+    },
+    active: {
+      on: {
+        hiding: "hiding",
+        idle: "idle"
+      }
+    },
+    hiding: {
+      on: {
+        dispose: "dispose"
+      }
+    },
+    dispose: {
+      on: {
+        disposed: "disposed"
+      }
     },
+    disposed: {
+      on: {}
+    }
+  }
 };
 const stateTransition = (state, event) => {
-    if (!state)
-        return stateMachine.initial;
-    /* c8 ignore next */
-    if (!event)
-        return state;
-    return stateMachine.states[state].on[event] || state;
+  if (!state)
+    return stateMachine.initial;
+  if (!event)
+    return state;
+  return stateMachine.states[state].on[event] || state;
 };
 const getFallbackPlacements = (placement) => {
-    var _a;
-    const fallbacks = {
-        left: ['right', 'bottom', 'top'],
-        'left-start': ['right-start', 'bottom', 'top'],
-        'left-end': ['right-end', 'bottom', 'top'],
-        right: ['left', 'bottom', 'top'],
-        'right-start': ['left-start', 'bottom', 'top'],
-        'right-end': ['left-end', 'bottom', 'top'],
-        top: ['bottom', 'left', 'right'],
-        'top-start': ['bottom-start', 'left', 'right'],
-        'top-end': ['bottom-end', 'left', 'right'],
-        bottom: ['top', 'left', 'right'],
-        'bottom-start': ['top-start', 'left', 'right'],
-        'bottom-end': ['top-end', 'left', 'right'],
-    };
-    return (_a = fallbacks[placement]) !== null && _a !== void 0 ? _a : [placement];
+  var _a;
+  const fallbacks = {
+    left: ["right", "bottom", "top"],
+    "left-start": ["right-start", "bottom", "top"],
+    "left-end": ["right-end", "bottom", "top"],
+    right: ["left", "bottom", "top"],
+    "right-start": ["left-start", "bottom", "top"],
+    "right-end": ["left-end", "bottom", "top"],
+    top: ["bottom", "left", "right"],
+    "top-start": ["bottom-start", "left", "right"],
+    "top-end": ["bottom-end", "left", "right"],
+    bottom: ["top", "left", "right"],
+    "bottom-start": ["top-start", "left", "right"],
+    "bottom-end": ["top-end", "left", "right"]
+  };
+  return (_a = fallbacks[placement]) != null ? _a : [placement];
 };
-/**
- * @element active-overlay
- *
- * @slot - content to display in the overlay
- */
-export class ActiveOverlay extends SpectrumElement {
-    constructor() {
-        super();
-        this._state = stateTransition();
-        this.animating = false;
-        this.theme = {};
-        this.tabbingAway = false;
-        this.offset = 6;
-        this.skidding = 0;
-        this.interaction = 'hover';
-        this.positionAnimationFrame = 0;
-        this.willNotifyClosed = false;
-        this.isConstrained = false;
-        this.updateOverlayPosition = async () => {
-            if (!this.placement || this.placement === 'none') {
-                return;
-            }
-            await (document.fonts ? document.fonts.ready : Promise.resolve());
-            function roundByDPR(num) {
-                const dpr = window.devicePixelRatio || 1;
-                return Math.round(num * dpr) / dpr || -10000;
-            }
-            // See: https://spectrum.adobe.com/page/popover/#Container-padding
-            const REQUIRED_DISTANCE_TO_EDGE = 8;
-            // See: https://github.com/adobe/spectrum-web-components/issues/910
-            const MIN_OVERLAY_HEIGHT = 100;
-            const flipMiddleware = this.virtualTrigger
-                ? flip({
-                    padding: REQUIRED_DISTANCE_TO_EDGE,
-                    fallbackPlacements: getFallbackPlacements(this.placement),
-                })
-                : flip({
-                    padding: REQUIRED_DISTANCE_TO_EDGE,
-                });
-            const middleware = [
-                offset({
-                    mainAxis: this.offset,
-                    crossAxis: this.skidding,
-                }),
-                shift({ padding: REQUIRED_DISTANCE_TO_EDGE }),
-                flipMiddleware,
-                size({
-                    padding: REQUIRED_DISTANCE_TO_EDGE,
-                    apply: ({ availableWidth, availableHeight, rects: { floating }, }) => {
-                        const maxHeight = Math.max(MIN_OVERLAY_HEIGHT, Math.floor(availableHeight));
-                        const actualHeight = floating.height;
-                        this.initialHeight =
-                            !this.isConstrained && !this.virtualTrigger
-                                ? actualHeight
-                                : this.initialHeight || actualHeight;
-                        this.isConstrained =
-                            actualHeight < this.initialHeight ||
-                                maxHeight <= actualHeight;
-                        const appliedHeight = this.isConstrained
-                            ? `${maxHeight}px`
-                            : '';
-                        Object.assign(this.style, {
-                            maxWidth: `${Math.floor(availableWidth)}px`,
-                            maxHeight: appliedHeight,
-                            height: appliedHeight,
-                        });
-                    },
-                }),
-            ];
-            if (this.overlayContentTip) {
-                middleware.push(arrow({ element: this.overlayContentTip }));
-            }
-            const { x, y, placement, middlewareData } = await computePosition(this.virtualTrigger || this.trigger, this, {
-                placement: this.placement,
-                middleware,
-            });
+const _ActiveOverlay = class extends SpectrumElement {
+  constructor() {
+    super();
+    this._state = stateTransition();
+    this.animating = false;
+    this.theme = {};
+    this.tabbingAway = false;
+    this.offset = 6;
+    this.skidding = 0;
+    this.interaction = "hover";
+    this.positionAnimationFrame = 0;
+    this.willNotifyClosed = false;
+    this.isConstrained = false;
+    this.updateOverlayPosition = async () => {
+      if (!this.placement || this.placement === "none") {
+        return;
+      }
+      await (document.fonts ? document.fonts.ready : Promise.resolve());
+      function roundByDPR(num) {
+        const dpr = window.devicePixelRatio || 1;
+        return Math.round(num * dpr) / dpr || -1e4;
+      }
+      const REQUIRED_DISTANCE_TO_EDGE = 8;
+      const MIN_OVERLAY_HEIGHT = 100;
+      const flipMiddleware = this.virtualTrigger ? flip({
+        padding: REQUIRED_DISTANCE_TO_EDGE,
+        fallbackPlacements: getFallbackPlacements(this.placement)
+      }) : flip({
+        padding: REQUIRED_DISTANCE_TO_EDGE
+      });
+      const middleware = [
+        offset({
+          mainAxis: this.offset,
+          crossAxis: this.skidding
+        }),
+        shift({ padding: REQUIRED_DISTANCE_TO_EDGE }),
+        flipMiddleware,
+        size({
+          padding: REQUIRED_DISTANCE_TO_EDGE,
+          apply: ({
+            availableWidth,
+            availableHeight,
+            rects: { floating }
+          }) => {
+            const maxHeight = Math.max(MIN_OVERLAY_HEIGHT, Math.floor(availableHeight));
+            const actualHeight = floating.height;
+            this.initialHeight = !this.isConstrained && !this.virtualTrigger ? actualHeight : this.initialHeight || actualHeight;
+            this.isConstrained = actualHeight < this.initialHeight || maxHeight <= actualHeight;
+            const appliedHeight = this.isConstrained ? `${maxHeight}px` : "";
             Object.assign(this.style, {
-                top: '0px',
-                left: '0px',
-                transform: `translate(${roundByDPR(x)}px, ${roundByDPR(y)}px)`,
+              maxWidth: `${Math.floor(availableWidth)}px`,
+              maxHeight: appliedHeight,
+              height: appliedHeight
             });
-            if (placement !== this.getAttribute('actual-placement')) {
-                this.setAttribute('actual-placement', placement);
-                this.overlayContent.setAttribute('placement', placement);
-            }
-            if (this.overlayContentTip && middlewareData.arrow) {
-                const { x: arrowX, y: arrowY } = middlewareData.arrow;
-                Object.assign(this.overlayContentTip.style, {
-                    left: arrowX != null ? `${roundByDPR(arrowX)}px` : '',
-                    top: arrowY != null ? `${roundByDPR(arrowY)}px` : '',
-                    right: '',
-                    bottom: '',
-                });
-            }
-        };
-        this.handleInlineTriggerKeydown = (event) => {
-            const { code, shiftKey } = event;
-            /* c8 ignore next */
-            if (code !== 'Tab')
-                return;
-            if (shiftKey) {
-                this.tabbingAway = true;
-                this.dispatchEvent(new Event('close'));
-                return;
-            }
-            event.stopPropagation();
-            event.preventDefault();
-            this.focus();
-        };
-        this.stealOverlayContentPromise = Promise.resolve();
-        this.stealOverlayContentPromise = new Promise((res) => (this.stealOverlayContentResolver = res));
-    }
-    get state() {
-        return this._state;
-    }
-    set state(state) {
-        const nextState = stateTransition(this.state, state);
-        if (nextState === this.state) {
-            return;
-        }
-        this._state = nextState;
-        if (this.state === 'active' || this.state === 'hiding') {
-            this.setAttribute('state', this.state);
-        }
-        else {
-            this.removeAttribute('state');
-        }
+          }
+        })
+      ];
+      if (this.overlayContentTip) {
+        middleware.push(arrow({ element: this.overlayContentTip }));
+      }
+      const { x, y, placement, middlewareData } = await computePosition(this.virtualTrigger || this.trigger, this, {
+        placement: this.placement,
+        middleware
+      });
+      Object.assign(this.style, {
+        top: "0px",
+        left: "0px",
+        transform: `translate(${roundByDPR(x)}px, ${roundByDPR(y)}px)`
+      });
+      if (placement !== this.getAttribute("actual-placement")) {
+        this.setAttribute("actual-placement", placement);
+        this.overlayContent.setAttribute("placement", placement);
+      }
+      if (this.overlayContentTip && middlewareData.arrow) {
+        const { x: arrowX, y: arrowY } = middlewareData.arrow;
+        Object.assign(this.overlayContentTip.style, {
+          left: arrowX != null ? `${roundByDPR(arrowX)}px` : "",
+          top: arrowY != null ? `${roundByDPR(arrowY)}px` : "",
+          right: "",
+          bottom: ""
+        });
+      }
+    };
+    this.handleInlineTriggerKeydown = (event) => {
+      const { code, shiftKey } = event;
+      if (code !== "Tab")
+        return;
+      if (shiftKey) {
+        this.tabbingAway = true;
+        this.dispatchEvent(new Event("close"));
+        return;
+      }
+      event.stopPropagation();
+      event.preventDefault();
+      this.focus();
+    };
+    this.stealOverlayContentPromise = Promise.resolve();
+    this.stealOverlayContentPromise = new Promise((res) => this.stealOverlayContentResolver = res);
+  }
+  get state() {
+    return this._state;
+  }
+  set state(state) {
+    const nextState = stateTransition(this.state, state);
+    if (nextState === this.state) {
+      return;
     }
-    async focus() {
-        const firstFocusable = firstFocusableIn(this);
-        if (firstFocusable) {
-            if (firstFocusable.updateComplete) {
-                await firstFocusable.updateComplete;
-            }
-            const activeElement = this.getRootNode()
-                .activeElement;
-            if (activeElement === this || !this.contains(activeElement)) {
-                firstFocusable.focus();
-            }
-            /* c8 ignore next 3 */
-        }
-        else {
-            super.focus();
-        }
-        this.removeAttribute('tabindex');
+    this._state = nextState;
+    if (this.state === "active" || this.state === "hiding") {
+      this.setAttribute("state", this.state);
+    } else {
+      this.removeAttribute("state");
     }
-    get hasTheme() {
-        return !!this.theme.color || !!this.theme.scale || !!this.theme.lang;
+  }
+  async focus() {
+    const firstFocusable = firstFocusableIn(this);
+    if (firstFocusable) {
+      if (firstFocusable.updateComplete) {
+        await firstFocusable.updateComplete;
+      }
+      const activeElement = this.getRootNode().activeElement;
+      if (activeElement === this || !this.contains(activeElement)) {
+        firstFocusable.focus();
+      }
+    } else {
+      super.focus();
     }
-    static get styles() {
-        return [styles];
+    this.removeAttribute("tabindex");
+  }
+  get hasTheme() {
+    return !!this.theme.color || !!this.theme.scale || !!this.theme.lang;
+  }
+  static get styles() {
+    return [styles];
+  }
+  get hasModalRoot() {
+    return !!this._modalRoot;
+  }
+  feature() {
+    this.tabIndex = -1;
+    const parentOverlay = parentOverlayOf(this.trigger);
+    const parentIsModal = parentOverlay && parentOverlay.slot === "open";
+    if (parentIsModal) {
+      this._modalRoot = parentOverlay._modalRoot || parentOverlay;
     }
-    get hasModalRoot() {
-        return !!this._modalRoot;
+    if (this.interaction === "modal" || this._modalRoot) {
+      this.slot = "open";
+      if (this.interaction === "modal") {
+        this.setAttribute("aria-modal", "true");
+      }
+      if (this._modalRoot) {
+        parentOverlay == null ? void 0 : parentOverlay.feature();
+      }
     }
-    feature() {
-        this.tabIndex = -1;
+  }
+  obscure(nextOverlayInteraction) {
+    if (this.slot && nextOverlayInteraction === "modal") {
+      this.removeAttribute("slot");
+      this.removeAttribute("aria-modal");
+      if (this.interaction !== "modal") {
         const parentOverlay = parentOverlayOf(this.trigger);
-        const parentIsModal = parentOverlay && parentOverlay.slot === 'open';
-        if (parentIsModal) {
-            this._modalRoot = parentOverlay._modalRoot || parentOverlay;
-        }
-        // If an overlay it triggered from within a "modal" overlay, it needs to continue
-        // to act like one to get treated correctly in regards to tab trapping.
-        if (this.interaction === 'modal' || this._modalRoot) {
-            this.slot = 'open';
-            if (this.interaction === 'modal') {
-                this.setAttribute('aria-modal', 'true');
-            }
-            // If this isn't a modal root, walk up the overlays to the next modal root
-            // and "feature" each on of the intervening overlays.
-            if (this._modalRoot) {
-                parentOverlay === null || parentOverlay === void 0 ? void 0 : parentOverlay.feature();
-            }
-        }
+        this._modalRoot = parentOverlay == null ? void 0 : parentOverlay.obscure(nextOverlayInteraction);
+        return this._modalRoot;
+      }
+      return this;
     }
-    obscure(nextOverlayInteraction) {
-        if (this.slot && nextOverlayInteraction === 'modal') {
-            this.removeAttribute('slot');
-            this.removeAttribute('aria-modal');
-            // Obscure upto and including the next modal root.
-            if (this.interaction !== 'modal') {
-                const parentOverlay = parentOverlayOf(this.trigger);
-                this._modalRoot = parentOverlay === null || parentOverlay === void 0 ? void 0 : parentOverlay.obscure(nextOverlayInteraction);
-                return this._modalRoot;
-            }
-            return this;
-        }
-        return undefined;
+    return void 0;
+  }
+  async willUpdate() {
+    if (this.hasUpdated)
+      return;
+    if (!this.overlayContent || !this.trigger)
+      return;
+    this.stealOverlayContent(this.overlayContent);
+    this.state = "active";
+    this.feature();
+    if (this.placement === "none") {
+      this.style.setProperty("--swc-visual-viewport-height", `${window.innerHeight}px`);
+    } else if (this.placement) {
+      await this.updateOverlayPosition();
+      document.addEventListener("sp-update-overlays", this.updateOverlayPosition);
+      window.addEventListener("scroll", this.updateOverlayPosition);
     }
-    async willUpdate() {
-        if (this.hasUpdated)
-            return;
-        /* c8 ignore next */
-        if (!this.overlayContent || !this.trigger)
-            return;
-        this.stealOverlayContent(this.overlayContent);
-        this.state = 'active';
-        this.feature();
-        if (this.placement === 'none') {
-            this.style.setProperty('--swc-visual-viewport-height', `${window.innerHeight}px`);
-        }
-        else if (this.placement) {
-            await this.updateOverlayPosition();
-            document.addEventListener('sp-update-overlays', this.updateOverlayPosition);
-            window.addEventListener('scroll', this.updateOverlayPosition);
-        }
-        const actions = [];
-        if (this.placement && this.placement !== 'none') {
-            actions.push(this.applyContentAnimation('sp-overlay-fade-in'));
-        }
-        if (typeof this.overlayContent.updateComplete !==
-            'undefined') {
-            actions.push(this.overlayContent.updateComplete);
-        }
-        this.childrenReady = Promise.all(actions);
+    const actions = [];
+    if (this.placement && this.placement !== "none") {
+      actions.push(this.applyContentAnimation("sp-overlay-fade-in"));
     }
-    async openCallback(lifecycleCallback) {
-        await this.updateComplete;
-        if (this.receivesFocus) {
-            await this.focus();
-        }
-        await lifecycleCallback();
-        this.trigger.dispatchEvent(new CustomEvent('sp-opened', {
-            bubbles: true,
-            composed: true,
-            cancelable: true,
-            detail: {
-                interaction: this.interaction,
-            },
-        }));
+    if (typeof this.overlayContent.updateComplete !== "undefined") {
+      actions.push(this.overlayContent.updateComplete);
     }
-    open(openDetail) {
-        this.extractDetail(openDetail);
+    this.childrenReady = Promise.all(actions);
+  }
+  async openCallback(lifecycleCallback) {
+    await this.updateComplete;
+    if (this.receivesFocus) {
+      await this.focus();
     }
-    extractDetail(detail) {
-        this.overlayContent = detail.content;
-        this.overlayContentTip = detail.contentTip;
-        this.trigger = detail.trigger;
-        this.virtualTrigger = detail.virtualTrigger;
-        this.placement = detail.placement;
-        this.offset = detail.offset;
-        this.skidding = detail.skidding || 0;
-        this.interaction = detail.interaction;
-        this.theme = detail.theme;
-        this.receivesFocus = detail.receivesFocus;
-        this.root = detail.root;
+    await lifecycleCallback();
+    this.trigger.dispatchEvent(new CustomEvent("sp-opened", {
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+      detail: {
+        interaction: this.interaction
+      }
+    }));
+  }
+  open(openDetail) {
+    this.extractDetail(openDetail);
+  }
+  extractDetail(detail) {
+    this.overlayContent = detail.content;
+    this.overlayContentTip = detail.contentTip;
+    this.trigger = detail.trigger;
+    this.virtualTrigger = detail.virtualTrigger;
+    this.placement = detail.placement;
+    this.offset = detail.offset;
+    this.skidding = detail.skidding || 0;
+    this.interaction = detail.interaction;
+    this.theme = detail.theme;
+    this.receivesFocus = detail.receivesFocus;
+    this.root = detail.root;
+  }
+  dispose() {
+    if (this.state !== "dispose")
+      return;
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+      delete this.timeout;
     }
-    dispose() {
-        /* c8 ignore next */
-        if (this.state !== 'dispose')
-            return;
-        /* c8 ignore next 4 */
-        if (this.timeout) {
-            clearTimeout(this.timeout);
-            delete this.timeout;
-        }
-        this.trigger.removeEventListener('keydown', this.handleInlineTriggerKeydown);
-        this.returnOverlayContent();
-        this.state = 'disposed';
-        if (this.willNotifyClosed) {
-            this.overlayContent.dispatchEvent(new Event('sp-overlay-closed'));
-            this.willNotifyClosed = false;
-        }
-    }
-    stealOverlayContent(element) {
-        this.originalPlacement = element.getAttribute('placement');
-        this.restoreContent = reparentChildren([element], this, {
-            position: 'beforeend',
-            prepareCallback: (el) => {
-                const slotName = el.slot;
-                const placement = el.placement;
-                el.removeAttribute('slot');
-                return (el) => {
-                    el.slot = slotName;
-                    el.placement = placement;
-                };
-            },
-        });
-        this.stealOverlayContentResolver();
+    this.trigger.removeEventListener("keydown", this.handleInlineTriggerKeydown);
+    this.returnOverlayContent();
+    this.state = "disposed";
+    if (this.willNotifyClosed) {
+      this.overlayContent.dispatchEvent(new Event("sp-overlay-closed"));
+      this.willNotifyClosed = false;
     }
-    returnOverlayContent() {
-        /* c8 ignore next */
-        if (!this.restoreContent)
-            return;
-        const [element] = this.restoreContent();
-        this.restoreContent = undefined;
-        this.willNotifyClosed = true;
-        if (this.originalPlacement) {
-            element.setAttribute('placement', this.originalPlacement);
-            delete this.originalPlacement;
-        }
-    }
-    async hide(animated = true) {
-        this.state = 'hiding';
-        if (animated) {
-            await this.applyContentAnimation('sp-overlay-fade-out');
-        }
-        this.state = 'dispose';
+  }
+  stealOverlayContent(element) {
+    this.originalPlacement = element.getAttribute("placement");
+    this.restoreContent = reparentChildren([element], this, {
+      position: "beforeend",
+      prepareCallback: (el) => {
+        const slotName = el.slot;
+        const placement = el.placement;
+        el.removeAttribute("slot");
+        return (el2) => {
+          el2.slot = slotName;
+          el2.placement = placement;
+        };
+      }
+    });
+    this.stealOverlayContentResolver();
+  }
+  returnOverlayContent() {
+    if (!this.restoreContent)
+      return;
+    const [element] = this.restoreContent();
+    this.restoreContent = void 0;
+    this.willNotifyClosed = true;
+    if (this.originalPlacement) {
+      element.setAttribute("placement", this.originalPlacement);
+      delete this.originalPlacement;
     }
-    schedulePositionUpdate() {
-        // Edge needs a little time to update the DOM before computing the layout
-        cancelAnimationFrame(this.positionAnimationFrame);
-        this.positionAnimationFrame = requestAnimationFrame(() => this.updateOverlayPosition());
+  }
+  async hide(animated = true) {
+    this.state = "hiding";
+    if (animated) {
+      await this.applyContentAnimation("sp-overlay-fade-out");
     }
-    onSlotChange() {
-        this.schedulePositionUpdate();
+    this.state = "dispose";
+  }
+  schedulePositionUpdate() {
+    cancelAnimationFrame(this.positionAnimationFrame);
+    this.positionAnimationFrame = requestAnimationFrame(() => this.updateOverlayPosition());
+  }
+  onSlotChange() {
+    this.schedulePositionUpdate();
+  }
+  applyContentAnimation(animation) {
+    if (this.placement === "none") {
+      return Promise.resolve(true);
     }
-    applyContentAnimation(animation) {
-        if (this.placement === 'none') {
-            return Promise.resolve(true);
-        }
-        return new Promise((resolve) => {
-            const contents = this.shadowRoot.querySelector('#contents');
-            const doneHandler = (event) => {
-                if (animation !== event.animationName)
-                    return;
-                contents.removeEventListener('animationend', doneHandler);
-                contents.removeEventListener('animationcancel', doneHandler);
-                this.animating = false;
-                resolve(event.type === 'animationcancel');
-            };
-            contents.addEventListener('animationend', doneHandler);
-            contents.addEventListener('animationcancel', doneHandler);
-            contents.style.animationName = animation;
-            this.animating = true;
-        });
-    }
-    renderTheme(content) {
-        const { color, scale, lang, theme } = this.theme;
-        return html `
+    return new Promise((resolve) => {
+      const contents = this.shadowRoot.querySelector("#contents");
+      const doneHandler = (event) => {
+        if (animation !== event.animationName)
+          return;
+        contents.removeEventListener("animationend", doneHandler);
+        contents.removeEventListener("animationcancel", doneHandler);
+        this.animating = false;
+        resolve(event.type === "animationcancel");
+      };
+      contents.addEventListener("animationend", doneHandler);
+      contents.addEventListener("animationcancel", doneHandler);
+      contents.style.animationName = animation;
+      this.animating = true;
+    });
+  }
+  renderTheme(content) {
+    const { color, scale, lang, theme } = this.theme;
+    return html`
             <sp-theme
                 theme=${ifDefined(theme)}
                 color=${ifDefined(color)}
@@ -414,52 +393,53 @@ export class ActiveOverlay extends SpectrumElement {
                 ${content}
             </sp-theme>
         `;
-    }
-    render() {
-        const content = html `
+  }
+  render() {
+    const content = html`
             <div id="contents">
                 <slot @slotchange=${this.onSlotChange}></slot>
             </div>
         `;
-        return this.hasTheme ? this.renderTheme(content) : content;
+    return this.hasTheme ? this.renderTheme(content) : content;
+  }
+  static create(details) {
+    const overlay = new _ActiveOverlay();
+    if (details.content) {
+      overlay.open(details);
     }
-    static create(details) {
-        const overlay = new ActiveOverlay();
-        if (details.content) {
-            overlay.open(details);
-        }
-        return overlay;
+    return overlay;
+  }
+  async getUpdateComplete() {
+    const actions = [
+      super.getUpdateComplete(),
+      this.stealOverlayContentPromise
+    ];
+    if (this.childrenReady) {
+      actions.push(this.childrenReady);
     }
-    async getUpdateComplete() {
-        const actions = [
-            super.getUpdateComplete(),
-            this.stealOverlayContentPromise,
-        ];
-        if (this.childrenReady) {
-            actions.push(this.childrenReady);
-        }
-        const [complete] = await Promise.all(actions);
-        return complete;
-    }
-    disconnectedCallback() {
-        document.removeEventListener('sp-update-overlays', this.updateOverlayPosition);
-        window.removeEventListener('scroll', this.updateOverlayPosition);
-        super.disconnectedCallback();
-    }
-}
-__decorate([
-    property()
-], ActiveOverlay.prototype, "_state", void 0);
-__decorate([
-    property({ reflect: true, type: Boolean })
-], ActiveOverlay.prototype, "animating", void 0);
-__decorate([
-    property({ reflect: true })
-], ActiveOverlay.prototype, "placement", void 0);
-__decorate([
-    property({ attribute: false })
-], ActiveOverlay.prototype, "theme", void 0);
-__decorate([
-    property({ attribute: false })
-], ActiveOverlay.prototype, "receivesFocus", void 0);
-//# sourceMappingURL=ActiveOverlay.js.map
+    const [complete] = await Promise.all(actions);
+    return complete;
+  }
+  disconnectedCallback() {
+    document.removeEventListener("sp-update-overlays", this.updateOverlayPosition);
+    window.removeEventListener("scroll", this.updateOverlayPosition);
+    super.disconnectedCallback();
+  }
+};
+export let ActiveOverlay = _ActiveOverlay;
+__decorateClass([
+  property()
+], ActiveOverlay.prototype, "_state", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], ActiveOverlay.prototype, "animating", 2);
+__decorateClass([
+  property({ reflect: true })
+], ActiveOverlay.prototype, "placement", 2);
+__decorateClass([
+  property({ attribute: false })
+], ActiveOverlay.prototype, "theme", 2);
+__decorateClass([
+  property({ attribute: false })
+], ActiveOverlay.prototype, "receivesFocus", 2);
+//# sourceMappingURL=ActiveOverlay.js.map