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

package/src/Overlay.dev.js

@@ -1,91 +1,736 @@
 "use strict";
-import { noop, OverlayBase } from "./OverlayBase.dev.js";
+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
+} from "@spectrum-web-components/base";
+import {
+  property,
+  query,
+  queryAssignedElements,
+  state
+} from "@spectrum-web-components/base/src/decorators.js";
+import {
+  isAndroid,
+  isIOS
+} from "@spectrum-web-components/shared/src/platform.js";
+import {
+  ElementResolutionController,
+  elementResolverUpdatedSymbol
+} from "@spectrum-web-components/reactive-controllers/src/ElementResolution.js";
+import { conditionAttributeWithId } from "@spectrum-web-components/base/src/condition-attribute-with-id.js";
+import {
+  ifDefined,
+  styleMap
+} from "@spectrum-web-components/base/src/directives.js";
+import { AbstractOverlay, nextFrame } from "./AbstractOverlay.dev.js";
 import { OverlayDialog } from "./OverlayDialog.dev.js";
 import { OverlayPopover } from "./OverlayPopover.dev.js";
 import { OverlayNoPopover } from "./OverlayNoPopover.dev.js";
-import { reparentChildren } from "@spectrum-web-components/shared";
+import { overlayStack } from "./OverlayStack.dev.js";
+import { noop } from "./AbstractOverlay.dev.js";
+import { VirtualTrigger } from "./VirtualTrigger.dev.js";
+import { PlacementController } from "./PlacementController.dev.js";
+import styles from "./overlay.css.js";
+const LONGPRESS_DURATION = 300;
+export const LONGPRESS_INSTRUCTIONS = {
+  touch: "Double tap and long press for additional options",
+  keyboard: "Press Space or Alt+Down Arrow for additional options",
+  mouse: "Click and hold for additional options"
+};
 const supportsPopover = "showPopover" in document.createElement("div");
-let OverlayFeatures = OverlayDialog(OverlayBase);
+let OverlayFeatures = OverlayDialog(AbstractOverlay);
 if (supportsPopover) {
   OverlayFeatures = OverlayPopover(OverlayFeatures);
 } else {
   OverlayFeatures = OverlayNoPopover(OverlayFeatures);
 }
-export class Overlay extends OverlayFeatures {
-  static update() {
-    const overlayUpdateEvent = new CustomEvent("sp-update-overlays", {
-      bubbles: true,
-      composed: true,
-      cancelable: true
-    });
-    document.dispatchEvent(overlayUpdateEvent);
-  }
-  static async open(targetOrContent, interactionOrOptions, content, options) {
-    var _a, _b, _c;
-    const v2 = arguments.length === 2;
-    const overlayContent = content || targetOrContent;
-    const overlay = new Overlay();
-    overlay.dispose = () => {
-      overlay.addEventListener("sp-closed", () => {
-        if (!restored) {
-          restoreContent();
-          restored = true;
+const _Overlay = class extends OverlayFeatures {
+  constructor() {
+    super(...arguments);
+    this.delayed = false;
+    this._disabled = false;
+    this.longpressed = false;
+    this.isVisible = false;
+    this.offset = 6;
+    this.placementController = new PlacementController(this);
+    this._open = false;
+    this.receivesFocus = "auto";
+    this.releaseAriaDescribedby = noop;
+    this.releaseLongpressDescribedby = noop;
+    this.triggerElement = null;
+    this.type = "hint";
+    this.wasOpen = false;
+    this.elementResolver = new ElementResolutionController(this);
+    this.elementIds = [];
+    this.handlePointerdown = (event) => {
+      if (!this.triggerElement)
+        return;
+      if (event.button !== 0)
+        return;
+      const triggerElement = this.triggerElement;
+      this.longpressed = false;
+      triggerElement.addEventListener("pointerup", this.handlePointerup);
+      triggerElement.addEventListener("pointercancel", this.handlePointerup);
+      this.longressTimeout = setTimeout(() => {
+        if (!triggerElement)
+          return;
+        triggerElement.dispatchEvent(
+          new CustomEvent("longpress", {
+            bubbles: true,
+            composed: true,
+            detail: {
+              source: "pointer"
+            }
+          })
+        );
+      }, LONGPRESS_DURATION);
+    };
+    this.handlePointerup = () => {
+      clearTimeout(this.longressTimeout);
+      if (!this.triggerElement)
+        return;
+      if (this.longpressed) {
+        this.open = true;
+      }
+      setTimeout(() => {
+        this.longpressed = false;
+      });
+      const triggerElement = this.triggerElement;
+      triggerElement.removeEventListener("pointerup", this.handlePointerup);
+      triggerElement.removeEventListener(
+        "pointercancel",
+        this.handlePointerup
+      );
+    };
+    /**
+     * @private
+     */
+    this.handleKeydown = (event) => {
+      const { code, altKey } = event;
+      if (code === "Space" || altKey && code === "ArrowDown") {
+        if (code === "ArrowDown") {
+          event.stopPropagation();
+          event.stopImmediatePropagation();
         }
-        requestAnimationFrame(() => {
-          overlay.remove();
+      }
+    };
+    this.handleKeyup = (event) => {
+      const { code, altKey } = event;
+      if (code === "Space" || altKey && code === "ArrowDown") {
+        event.stopPropagation();
+        this.dispatchEvent(
+          new CustomEvent("longpress", {
+            bubbles: true,
+            composed: true,
+            detail: {
+              source: "keyboard"
+            }
+          })
+        );
+      }
+    };
+    /**
+     * An overlay with a `click` interaction should not close on click `triggerElement`.
+     * When a click is initiated (`pointerdown`), apply `preventNextToggle` when the
+     * overlay is `open` to prevent from toggling the overlay when the click event
+     * propagates later in the interaction.
+     */
+    this.preventNextToggle = false;
+    this.handlePointerdownForClick = () => {
+      this.preventNextToggle = this.open;
+    };
+    this.handleClick = () => {
+      if (this.longpressed)
+        return;
+      if (!this.preventNextToggle) {
+        this.open = !this.open;
+      }
+      this.preventNextToggle = false;
+    };
+    this.focusedin = false;
+    this.handleFocusin = () => {
+      this.open = true;
+      this.focusedin = true;
+    };
+    this.handleFocusout = () => {
+      this.focusedin = false;
+      if (this.pointerentered)
+        return;
+      this.open = false;
+    };
+    this.pointerentered = false;
+    this.handlePointerenter = () => {
+      if (this.disabled)
+        return;
+      this.open = true;
+      this.pointerentered = true;
+    };
+    this.handlePointerleave = (event) => {
+      if (this === event.relatedTarget || this.contains(event.relatedTarget) || [...this.children].find((child) => {
+        if (child.localName !== "slot") {
+          return false;
+        }
+        return child.assignedElements({ flatten: true }).find((el) => {
+          return el === event.relatedTarget || el.contains(event.relatedTarget);
         });
-      });
-      overlay.open = false;
-      overlay.dispose = noop;
+      })) {
+        return;
+      }
+      this.doPointerleave();
     };
-    let restored = false;
-    const restoreContent = reparentChildren([overlayContent], overlay, {
-      position: "beforeend",
-      prepareCallback: (el) => {
-        const slot = el.slot;
-        el.removeAttribute("slot");
-        return () => {
-          el.slot = slot;
-        };
+    this.handleOverlayPointerleave = (event) => {
+      if (this.triggerElement === event.relatedTarget || this.hasNonVirtualTrigger && this.triggerElement.contains(
+        event.relatedTarget
+      )) {
+        return;
       }
+      this.doPointerleave();
+    };
+    this.handleLongpress = () => {
+      this.open = true;
+      this.longpressed = true;
+    };
+    this.willPreventClose = false;
+  }
+  get disabled() {
+    return this._disabled;
+  }
+  set disabled(disabled) {
+    this._disabled = disabled;
+    if (disabled) {
+      if (this.hasNonVirtualTrigger) {
+        this.unbindEvents();
+      }
+      this.wasOpen = this.open;
+      this.open = false;
+    } else {
+      this.bindEvents();
+      this.open = this.open || this.wasOpen;
+      this.wasOpen = false;
+    }
+  }
+  get hasNonVirtualTrigger() {
+    return !!this.triggerElement && !(this.triggerElement instanceof VirtualTrigger);
+  }
+  get open() {
+    return this._open;
+  }
+  set open(open) {
+    if (open && this.disabled)
+      return;
+    if (open === this.open)
+      return;
+    this._open = open;
+    if (this.open) {
+      _Overlay.openCount += 1;
+      this.isVisible = true;
+    }
+    this.requestUpdate("open", !this.open);
+  }
+  get usesDialog() {
+    return this.type === "modal" || this.type === "page";
+  }
+  get popoverValue() {
+    switch (this.type) {
+      case "modal":
+      case "page":
+        return void 0;
+      case "hint":
+        return "manual";
+      default:
+        return this.type;
+    }
+  }
+  get requiresPosition() {
+    if (this.type === "page" || !this.open)
+      return false;
+    if (!this.triggerElement || !this.placement && this.type !== "hint")
+      return false;
+    return true;
+  }
+  managePosition() {
+    if (!this.requiresPosition || !this.open)
+      return;
+    const offset = this.offset || 0;
+    const trigger = this.triggerElement;
+    const placement = this.placement || "right";
+    const tipPadding = this.tipPadding;
+    this.placementController.placeOverlay(this.dialogEl, {
+      offset,
+      placement,
+      tipPadding,
+      trigger,
+      type: this.type
     });
-    if (v2) {
-      const options2 = interactionOrOptions;
-      overlay.append(overlayContent);
-      overlay.receivesFocus = (_a = options2.receivesFocus) != null ? _a : "auto";
-      overlay.triggerElement = options2.trigger || null;
-      overlay.type = options2.type || "modal";
-      overlay.offset = options2.offset || 6;
-      overlay.placement = options2.placement;
-      overlay.willPreventClose = !!options2.notImmediatelyClosable;
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          overlay.open = true;
+  }
+  async managePopoverOpen() {
+    super.managePopoverOpen();
+    const targetOpenState = this.open;
+    if (this.open !== targetOpenState) {
+      return;
+    }
+    await this.manageDelay(targetOpenState);
+    if (this.open !== targetOpenState) {
+      return;
+    }
+    await this.ensureOnDOM(targetOpenState);
+    if (this.open !== targetOpenState) {
+      return;
+    }
+    const focusEl = await this.makeTransition(targetOpenState);
+    if (this.open !== targetOpenState) {
+      return;
+    }
+    await this.applyFocus(targetOpenState, focusEl);
+  }
+  async applyFocus(targetOpenState, focusEl) {
+    if (this.receivesFocus === "false" || this.type === "hint") {
+      return;
+    }
+    await nextFrame();
+    await nextFrame();
+    if (targetOpenState === this.open && !this.open) {
+      if (this.hasNonVirtualTrigger && this.contains(this.getRootNode().activeElement)) {
+        this.triggerElement.focus();
+      }
+      return;
+    }
+    focusEl == null ? void 0 : focusEl.focus();
+  }
+  async manageOpen(oldOpen) {
+    var _a;
+    if (!this.isConnected && this.open)
+      return;
+    if (!this.hasUpdated) {
+      await this.updateComplete;
+    }
+    if (this.open) {
+      overlayStack.add(this);
+      if (this.willPreventClose) {
+        document.addEventListener(
+          "pointerup",
+          () => {
+            this.dialogEl.classList.toggle(
+              "not-immediately-closable",
+              false
+            );
+            this.willPreventClose = false;
+          },
+          { once: true }
+        );
+        this.dialogEl.classList.toggle(
+          "not-immediately-closable",
+          true
+        );
+      }
+    } else {
+      if (oldOpen) {
+        this.dispose();
+      }
+      overlayStack.remove(this);
+    }
+    if (this.usesDialog) {
+      this.manageDialogOpen();
+    } else {
+      this.managePopoverOpen();
+    }
+    if (!this.open) {
+      const getAncestors = () => {
+        var _a2;
+        const ancestors = [];
+        let currentNode = document.activeElement;
+        while ((currentNode == null ? void 0 : currentNode.shadowRoot) && currentNode.shadowRoot.activeElement) {
+          currentNode = currentNode.shadowRoot.activeElement;
+        }
+        while (currentNode) {
+          const ancestor = currentNode.assignedSlot || currentNode.parentElement || ((_a2 = currentNode.getRootNode()) == null ? void 0 : _a2.host);
+          if (ancestor) {
+            ancestors.push(ancestor);
+          }
+          currentNode = ancestor;
+        }
+        return ancestors;
+      };
+      if (((_a = this.triggerElement) == null ? void 0 : _a.focus) && (this.contains(
+        this.getRootNode().activeElement
+      ) || getAncestors().includes(this))) {
+        this.triggerElement.focus();
+      }
+    }
+  }
+  unbindEvents() {
+    var _a;
+    (_a = this.abortController) == null ? void 0 : _a.abort();
+  }
+  bindEvents() {
+    if (!this.hasNonVirtualTrigger)
+      return;
+    this.abortController = new AbortController();
+    const nextTriggerElement = this.triggerElement;
+    switch (this.triggerInteraction) {
+      case "click":
+        this.bindClickEvents(nextTriggerElement);
+        return;
+      case "longpress":
+        this.bindLongpressEvents(nextTriggerElement);
+        return;
+      case "hover":
+        this.bindHoverEvents(nextTriggerElement);
+        return;
+    }
+  }
+  bindClickEvents(triggerElement) {
+    const options = { signal: this.abortController.signal };
+    triggerElement.addEventListener("click", this.handleClick, options);
+    triggerElement.addEventListener(
+      "pointerdown",
+      this.handlePointerdownForClick,
+      options
+    );
+  }
+  bindLongpressEvents(triggerElement) {
+    const options = { signal: this.abortController.signal };
+    triggerElement.addEventListener(
+      "pointerdown",
+      this.handlePointerdown,
+      options
+    );
+    triggerElement.addEventListener("keydown", this.handleKeydown, options);
+    triggerElement.addEventListener("keyup", this.handleKeyup, options);
+    triggerElement.addEventListener(
+      "longpress",
+      this.handleLongpress,
+      options
+    );
+    this.prepareLongpressDescription(triggerElement);
+  }
+  bindHoverEvents(triggerElement) {
+    const options = { signal: this.abortController.signal };
+    triggerElement.addEventListener("focusin", this.handleFocusin, options);
+    triggerElement.addEventListener(
+      "focusout",
+      this.handleFocusout,
+      options
+    );
+    triggerElement.addEventListener(
+      "pointerenter",
+      this.handlePointerenter,
+      options
+    );
+    triggerElement.addEventListener(
+      "pointerleave",
+      this.handlePointerleave,
+      options
+    );
+    this.addEventListener(
+      "pointerleave",
+      this.handleOverlayPointerleave,
+      options
+    );
+    if (this.receivesFocus === "true")
+      return;
+    this.prepareAriaDescribedby(triggerElement);
+  }
+  manageTriggerElement(triggerElement) {
+    if (triggerElement) {
+      this.unbindEvents();
+      this.releaseAriaDescribedby();
+    }
+    const missingOrVirtual = !this.triggerElement || this.triggerElement instanceof VirtualTrigger;
+    if (missingOrVirtual) {
+      return;
+    }
+    this.bindEvents();
+  }
+  prepareLongpressDescription(trigger) {
+    if (
+      // only "longpress" relationships are described this way
+      this.triggerInteraction !== "longpress" || // do not reapply until target it recycled
+      this.releaseLongpressDescribedby !== noop || // require "longpress content" to apply relationship
+      !this.elements.length
+    ) {
+      return;
+    }
+    const longpressDescription = document.createElement("div");
+    longpressDescription.id = `longpress-describedby-descriptor-${crypto.randomUUID().slice(0, 8)}`;
+    const messageType = isIOS() || isAndroid() ? "touch" : "keyboard";
+    longpressDescription.textContent = LONGPRESS_INSTRUCTIONS[messageType];
+    longpressDescription.slot = "longpress-describedby-descriptor";
+    trigger.insertAdjacentElement("afterend", longpressDescription);
+    const releaseLongpressDescribedby = conditionAttributeWithId(
+      trigger,
+      "aria-describedby",
+      [longpressDescription.id]
+    );
+    this.releaseLongpressDescribedby = () => {
+      releaseLongpressDescribedby();
+      longpressDescription.remove();
+      this.releaseLongpressDescribedby = noop;
+    };
+  }
+  prepareAriaDescribedby(trigger) {
+    if (
+      // only "hover" relationships establed described by content
+      this.triggerInteraction !== "hover" || // do not reapply until target is recycled
+      this.releaseAriaDescribedby !== noop || // require "hover content" to apply relationship
+      !this.elements.length
+    ) {
+      return;
+    }
+    const triggerRoot = trigger.getRootNode();
+    const contentRoot = this.elements[0].getRootNode();
+    const overlayRoot = this.getRootNode();
+    if (triggerRoot == overlayRoot) {
+      const releaseAriaDescribedby = conditionAttributeWithId(
+        trigger,
+        "aria-describedby",
+        [this.id]
+      );
+      this.releaseAriaDescribedby = () => {
+        releaseAriaDescribedby();
+        this.releaseAriaDescribedby = noop;
+      };
+    } else if (triggerRoot === contentRoot) {
+      this.elementIds = this.elements.map((el) => el.id);
+      const appliedIds = this.elements.map((el) => {
+        if (!el.id) {
+          el.id = `${this.tagName.toLowerCase()}-helper-${crypto.randomUUID().slice(0, 8)}`;
+        }
+        return el.id;
+      });
+      const releaseAriaDescribedby = conditionAttributeWithId(
+        trigger,
+        "aria-describedby",
+        appliedIds
+      );
+      this.releaseAriaDescribedby = () => {
+        releaseAriaDescribedby();
+        this.elements.map((el, index) => {
+          el.id = this.elementIds[index];
         });
+        this.releaseAriaDescribedby = noop;
+      };
+    }
+  }
+  doPointerleave() {
+    this.pointerentered = false;
+    const triggerElement = this.triggerElement;
+    if (this.focusedin && triggerElement.matches(":focus-visible"))
+      return;
+    this.open = false;
+  }
+  handleBeforetoggle(event) {
+    if (event.newState !== "open") {
+      this.handleBrowserClose();
+    }
+  }
+  handleBrowserClose() {
+    this.open = false;
+  }
+  handleSlotchange() {
+    if (this.triggerElement) {
+      this.prepareAriaDescribedby(this.triggerElement);
+    }
+    if (!this.elements.length) {
+      this.releaseLongpressDescribedby();
+    } else if (this.hasNonVirtualTrigger) {
+      this.prepareLongpressDescription(
+        this.triggerElement
+      );
+    }
+  }
+  shouldPreventClose() {
+    const shouldPreventClose = this.willPreventClose;
+    this.willPreventClose = false;
+    return shouldPreventClose;
+  }
+  willUpdate(changes) {
+    var _a;
+    if (!this.hasUpdated) {
+      this.addEventListener("focusout", (event) => {
+        if (this.type !== "auto") {
+          return;
+        }
+        if (!event.relatedTarget) {
+          return;
+        }
+        const relationEvent = new Event("overlay-relation-query", {
+          bubbles: true,
+          composed: true
+        });
+        event.relatedTarget.addEventListener(
+          relationEvent.type,
+          (event2) => {
+            if (!event2.composedPath().includes(this)) {
+              this.open = false;
+            }
+          }
+        );
+        event.relatedTarget.dispatchEvent(relationEvent);
       });
-      return overlay;
-    } else if (overlayContent && options) {
-      const target = targetOrContent;
-      const interaction = interactionOrOptions;
-      overlay.receivesFocus = (_b = options.receivesFocus) != null ? _b : "auto";
-      overlay.triggerElement = options.virtualTrigger || target;
-      overlay.type = interaction === "modal" ? "modal" : interaction === "hover" ? "hint" : "auto";
-      overlay.offset = (_c = options.offset) != null ? _c : 6;
-      overlay.placement = options.placement;
-      overlay.willPreventClose = !!options.notImmediatelyClosable;
-      const parent = target.getRootNode();
-      if (parent === document) {
-        target.insertAdjacentElement("afterend", overlay);
+    }
+    if (!this.hasAttribute("id")) {
+      this.setAttribute(
+        "id",
+        `${this.tagName.toLowerCase()}-${crypto.randomUUID().slice(0, 8)}`
+      );
+    }
+    if (changes.has("open") && (typeof changes.get("open") !== "undefined" || this.open)) {
+      this.manageOpen(changes.get("open"));
+    }
+    if (changes.has("trigger")) {
+      const [id, interaction] = ((_a = this.trigger) == null ? void 0 : _a.split("@")) || [];
+      this.elementResolver.selector = id ? `#${id}` : "";
+      this.triggerInteraction = interaction;
+    }
+    const oldTrigger = this.triggerElement;
+    if (changes.has(elementResolverUpdatedSymbol)) {
+      this.triggerElement = this.elementResolver.element;
+      this.manageTriggerElement(oldTrigger);
+    }
+    if (changes.has("triggerElement")) {
+      this.manageTriggerElement(changes.get("triggerElement"));
+    }
+  }
+  updated(changes) {
+    super.updated(changes);
+    if (changes.has("placement")) {
+      if (this.placement) {
+        this.dialogEl.setAttribute("actual-placement", this.placement);
       } else {
-        parent.append(overlay);
+        this.dialogEl.removeAttribute("actual-placement");
+      }
+      if (this.open && typeof changes.get("placement") !== "undefined") {
+        this.placementController.resetOverlayPosition();
       }
-      await new Promise(
-        (res) => requestAnimationFrame(() => requestAnimationFrame(() => res()))
-      );
-      overlay.open = true;
-      return overlay.dispose;
     }
-    return overlay;
   }
-}
+  renderContent() {
+    return html`
+            <div style=${styleMap(this.dialogStyleMap)} part="content">
+                <slot @slotchange=${this.handleSlotchange}></slot>
+            </div>
+        `;
+  }
+  get dialogStyleMap() {
+    return {
+      "--swc-overlay-open-count": _Overlay.openCount.toString()
+    };
+  }
+  renderDialog() {
+    return html`
+            <dialog
+                class="dialog"
+                part="dialog"
+                @close=${this.handleBrowserClose}
+                @cancel=${this.handleBrowserClose}
+                @beforetoggle=${this.handleBeforetoggle}
+                ?is-visible=${this.isVisible}
+            >
+                ${this.renderContent()}
+            </dialog>
+        `;
+  }
+  renderPopover() {
+    const hasPopoverAttribute = "popover" in this;
+    const popoverValue = hasPopoverAttribute ? this.popoverValue : void 0;
+    return html`
+            <div
+                class="dialog"
+                part="dialog"
+                popover=${ifDefined(popoverValue)}
+                @beforetoggle=${this.handleBeforetoggle}
+                @close=${this.handleBrowserClose}
+                ?is-visible=${this.isVisible}
+            >
+                ${this.renderContent()}
+            </div>
+        `;
+  }
+  render() {
+    const isDialog = this.type === "modal" || this.type === "page";
+    return html`
+            ${isDialog ? this.renderDialog() : this.renderPopover()}
+            <slot name="longpress-describedby-descriptor"></slot>
+        `;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("close", () => {
+      this.open = false;
+    });
+    if (this.hasNonVirtualTrigger) {
+      this.bindEvents();
+    }
+  }
+  disconnectedCallback() {
+    if (this.hasNonVirtualTrigger) {
+      this.unbindEvents();
+    }
+    this.open = false;
+    super.disconnectedCallback();
+  }
+};
+export let Overlay = _Overlay;
+Overlay.styles = [styles];
+Overlay.openCount = 1;
+__decorateClass([
+  property({ type: Boolean })
+], Overlay.prototype, "delayed", 2);
+__decorateClass([
+  query(".dialog")
+], Overlay.prototype, "dialogEl", 2);
+__decorateClass([
+  property({ type: Boolean })
+], Overlay.prototype, "disabled", 1);
+__decorateClass([
+  queryAssignedElements({
+    flatten: true,
+    selector: ':not([slot="longpress-describedby-descriptor"])'
+    // gather only elements slotted into the default slot
+  })
+], Overlay.prototype, "elements", 2);
+__decorateClass([
+  state()
+], Overlay.prototype, "isVisible", 2);
+__decorateClass([
+  property({ type: Number })
+], Overlay.prototype, "offset", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Overlay.prototype, "open", 1);
+__decorateClass([
+  property()
+], Overlay.prototype, "placement", 2);
+__decorateClass([
+  property({ attribute: "receives-focus" })
+], Overlay.prototype, "receivesFocus", 2);
+__decorateClass([
+  query("slot")
+], Overlay.prototype, "slotEl", 2);
+__decorateClass([
+  property({ type: Number, attribute: "tip-padding" })
+], Overlay.prototype, "tipPadding", 2);
+__decorateClass([
+  property()
+], Overlay.prototype, "trigger", 2);
+__decorateClass([
+  property({ attribute: false })
+], Overlay.prototype, "triggerElement", 2);
+__decorateClass([
+  property({ attribute: false })
+], Overlay.prototype, "triggerInteraction", 2);
+__decorateClass([
+  property()
+], Overlay.prototype, "type", 2);
 //# sourceMappingURL=Overlay.dev.js.map