@esri/calcite-components 1.0.0-next.443 → 1.0.0-next.446

package/dist/custom-elements/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.443
+ * v1.0.0-next.446
  */
 import { HTMLElement as HTMLElement$1, createEvent, h, Host, Build, forceUpdate, Fragment, getAssetPath, proxyCustomElement } from '@stencil/core/internal/client';
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
@@ -769,7 +769,7 @@ const ExpandToggle = ({ expanded, intlExpand, intlCollapse, toggle, el, position
   const expandIcon = end ? icons[1] : icons[0];
   const collapseIcon = end ? icons[0] : icons[1];
   const actionNode = (h("calcite-action", { icon: expanded ? expandIcon : collapseIcon, onClick: toggle, ref: (referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref }), scale: scale, text: expandText, textEnabled: expanded }));
-  return tooltip ? h("calcite-tooltip-manager", null, actionNode) : actionNode;
+  return actionNode;
 };
 
 const CSS$N = {
@@ -2574,9 +2574,9 @@ const ActionMenu = class extends HTMLElement$1 {
     focusElement(this.open ? this.menuEl : this.menuButtonEl);
   }
   renderMenuButton() {
-    const { el, label, scale } = this;
+    const { label, scale } = this;
     const menuButtonSlot = (h("slot", { name: SLOTS$p.trigger }, h("calcite-action", { class: CSS$O.defaultTrigger, icon: ICONS$f.menu, ref: this.setDefaultMenuButtonEl, scale: scale, text: label })));
-    return getSlotted(el, SLOTS$p.tooltip) ? (h("calcite-tooltip-manager", null, menuButtonSlot)) : (menuButtonSlot);
+    return menuButtonSlot;
   }
   renderMenuItems() {
     const { actionElements, activeMenuItemIndex, open, menuId, menuButtonEl, label, placement, overlayPositioning, flipPlacements } = this;
@@ -9646,7 +9646,7 @@ const Combobox = class extends HTMLElement$1 {
       const find = (item, filteredData) => item &&
         filteredData.some(({ label, value }) => {
           if (isGroup(item)) {
-            return value === item.label || value === item.label;
+            return value === item.label;
           }
           return (value === item.textLabel ||
             value === item.value ||
@@ -9973,8 +9973,7 @@ const Combobox = class extends HTMLElement$1 {
     return this.items.map((item) => ({
       constant: item.constant,
       value: item.value,
-      label: item.textLabel,
-      guid: item.guid
+      label: item.textLabel
     }));
   }
   getNeedsIcon() {
@@ -14121,15 +14120,24 @@ const InputDatePicker = class extends HTMLElement$1 {
   }
   clearCurrentValue() {
     if (!this.range) {
+      if (typeof this.value === "string" && this.value) {
+        this.calciteDatePickerChange.emit();
+      }
       this.value = "";
       return;
     }
     const { focusedInput } = this;
     if (focusedInput === "start") {
+      if (this.start) {
+        this.calciteDatePickerRangeChange.emit();
+      }
       this.value = Array.isArray(this.value) ? ["", this.value[1] || ""] : [""];
       this.start = undefined;
     }
     else if (focusedInput === "end") {
+      if (this.end) {
+        this.calciteDatePickerRangeChange.emit();
+      }
       this.value = Array.isArray(this.value) ? [this.value[0] || "", ""] : ["", ""];
       this.end = undefined;
     }
@@ -15907,6 +15915,7 @@ const Panel = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.calcitePanelDismiss = createEvent(this, "calcitePanelDismiss", 7);
     this.calcitePanelDismissedChange = createEvent(this, "calcitePanelDismissedChange", 7);
     this.calcitePanelScroll = createEvent(this, "calcitePanelScroll", 7);
     this.calcitePanelBackClick = createEvent(this, "calcitePanelBackClick", 7);
@@ -15960,6 +15969,7 @@ const Panel = class extends HTMLElement$1 {
     };
     this.dismiss = () => {
       this.dismissed = true;
+      this.calcitePanelDismiss.emit();
     };
     this.panelScrollHandler = () => {
       this.calcitePanelScroll.emit();
@@ -16815,13 +16825,72 @@ const TEXT$6 = {
   close: "Close"
 };
 const defaultPopoverPlacement = "auto";
-const POPOVER_REFERENCE = "data-calcite-popover-reference";
 const ARIA_CONTROLS = "aria-controls";
 const ARIA_EXPANDED = "aria-expanded";
 const HEADING_LEVEL$2 = 2;
 
+class PopoverManager$1 {
+  constructor() {
+    // --------------------------------------------------------------------------
+    //
+    //  Private Properties
+    //
+    // --------------------------------------------------------------------------
+    this.registeredElements = new WeakMap();
+    this.registeredElementCount = 0;
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.queryPopover = (composedPath) => {
+      const { registeredElements } = this;
+      const registeredElement = composedPath.find((pathEl) => registeredElements.has(pathEl));
+      return registeredElements.get(registeredElement);
+    };
+    this.clickHandler = (event) => {
+      const composedPath = event.composedPath();
+      const popover = this.queryPopover(composedPath);
+      if (popover) {
+        popover.toggle();
+        return;
+      }
+      queryElementsRoots(event.target, "calcite-popover")
+        .filter((popover) => popover.autoClose && popover.open && !composedPath.includes(popover))
+        .forEach((popover) => popover.toggle(false));
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  registerElement(referenceEl, popover) {
+    this.registeredElementCount++;
+    this.registeredElements.set(referenceEl, popover);
+    if (this.registeredElementCount === 1) {
+      this.addListeners();
+    }
+  }
+  unregisterElement(referenceEl) {
+    if (this.registeredElements.delete(referenceEl)) {
+      this.registeredElementCount--;
+    }
+    if (this.registeredElementCount === 0) {
+      this.removeListeners();
+    }
+  }
+  addListeners() {
+    document.addEventListener("pointerdown", this.clickHandler, { capture: true });
+  }
+  removeListeners() {
+    document.removeEventListener("pointerdown", this.clickHandler, { capture: true });
+  }
+}
+
 const popoverCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:block;position:absolute;z-index:900;-webkit-transform:scale(0);transform:scale(0)}.calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}:host([data-popper-placement^=bottom]) .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}:host([data-popper-placement^=top]) .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}:host([data-popper-placement^=left]) .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}:host([data-popper-placement^=right]) .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}:host([data-popper-placement]) .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}:host([data-popper-placement][data-popper-reference-hidden]){pointer-events:none;opacity:0}.arrow,.arrow::before{position:absolute;width:8px;height:8px;z-index:-1}.arrow::before{content:\"\";--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-transform:rotate(45deg);transform:rotate(45deg);background:var(--calcite-ui-foreground-1)}:host([data-popper-placement^=top]) .arrow{bottom:-4px}:host([data-popper-placement^=bottom]) .arrow{top:-4px}:host([data-popper-placement^=left]) .arrow{right:-4px}:host([data-popper-placement^=right]) .arrow{left:-4px}:host{pointer-events:none}:host([open]){pointer-events:initial}.calcite-popper-anim{border-radius:0.25rem;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);background-color:var(--calcite-ui-foreground-1)}.arrow::before{outline:1px solid var(--calcite-ui-border-3)}.header{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:start;justify-content:flex-start;border-width:0px;border-bottom-width:1px;border-style:solid;background-color:var(--calcite-ui-foreground-1);border-bottom-color:var(--calcite-ui-border-3)}.heading{margin:0px;display:block;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-item-align:center;align-self:center;white-space:normal;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);word-wrap:break-word;word-break:break-word}.container{position:relative;display:-ms-flexbox;display:flex;height:100%;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;border-radius:0.25rem;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-1)}.container.has-header{-ms-flex-direction:column;flex-direction:column}.content{display:-ms-flexbox;display:flex;height:100%;width:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-item-align:center;align-self:center;word-wrap:break-word;word-break:break-word}.close-button-container{display:-ms-flexbox;display:flex;overflow:hidden;-ms-flex:0 0 auto;flex:0 0 auto;border-start-end-radius:0.25rem;border-end-end-radius:0.25rem}::slotted(calcite-panel),::slotted(calcite-flow){height:100%}";
 
+const manager$1 = new PopoverManager$1();
 const Popover = class extends HTMLElement$1 {
   constructor() {
     super();
@@ -16834,6 +16903,10 @@ const Popover = class extends HTMLElement$1 {
     //  Properties
     //
     // --------------------------------------------------------------------------
+    /**
+     * Automatically closes any currently open popovers when clicking outside of a popover.
+     */
+    this.autoClose = false;
     /**
      * Display a close button within the Popover.
      * @deprecated use dismissible instead.
@@ -16916,8 +16989,8 @@ const Popover = class extends HTMLElement$1 {
         return;
       }
       const id = this.getId();
-      effectiveReferenceElement.setAttribute(POPOVER_REFERENCE, id);
       effectiveReferenceElement.setAttribute(ARIA_CONTROLS, id);
+      manager$1.registerElement(effectiveReferenceElement, this.el);
       this.setExpandedAttr();
     };
     this.removeReferences = () => {
@@ -16925,9 +16998,9 @@ const Popover = class extends HTMLElement$1 {
       if (!effectiveReferenceElement) {
         return;
       }
-      effectiveReferenceElement.removeAttribute(POPOVER_REFERENCE);
       effectiveReferenceElement.removeAttribute(ARIA_CONTROLS);
       effectiveReferenceElement.removeAttribute(ARIA_EXPANDED);
+      manager$1.unregisterElement(effectiveReferenceElement);
     };
     this.hide = () => {
       this.open = false;
@@ -17112,6 +17185,7 @@ const PopoverManager = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.mutationObserver = createObserver("mutation", () => this.setAutoClose());
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -17121,28 +17195,28 @@ const PopoverManager = class extends HTMLElement$1 {
      * CSS Selector to match reference elements for popovers. Reference elements will be identified by this selector in order to open their associated popover.
      * @default `[data-calcite-popover-reference]`
      */
-    this.selector = `[${POPOVER_REFERENCE}]`;
+    this.selector = "[data-calcite-popover-reference]";
     /**
      * Automatically closes any currently open popovers when clicking outside of a popover.
      */
     this.autoClose = false;
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    this.queryPopover = (composedPath) => {
-      const { el } = this;
-      if (!composedPath.includes(el)) {
-        return null;
-      }
-      const referenceElement = composedPath.find((pathEl) => { var _a; return (_a = pathEl === null || pathEl === void 0 ? void 0 : pathEl.hasAttribute) === null || _a === void 0 ? void 0 : _a.call(pathEl, POPOVER_REFERENCE); });
-      if (!referenceElement) {
-        return null;
-      }
-      const id = referenceElement.getAttribute(POPOVER_REFERENCE);
-      return queryElementRoots(el, { id });
-    };
+  }
+  autoCloseHandler() {
+    this.setAutoClose();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    var _a;
+    this.setAutoClose();
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   // --------------------------------------------------------------------------
   //
@@ -17152,27 +17226,19 @@ const PopoverManager = class extends HTMLElement$1 {
   render() {
     return h("slot", null);
   }
-  //--------------------------------------------------------------------------
+  // --------------------------------------------------------------------------
   //
-  //  Event Listeners
+  //  Private Methods
   //
-  //--------------------------------------------------------------------------
-  closeOpenPopovers(event) {
+  // --------------------------------------------------------------------------
+  setAutoClose() {
     const { autoClose, el } = this;
-    const popoverSelector = "calcite-popover";
-    const composedPath = event.composedPath();
-    const popover = this.queryPopover(composedPath);
-    if (popover) {
-      popover.toggle();
-      return;
-    }
-    if (autoClose) {
-      queryElementsRoots(el, popoverSelector)
-        .filter((popover) => popover.open && !composedPath.includes(popover))
-        .forEach((popover) => popover.toggle(false));
-    }
+    el.querySelectorAll("calcite-popover").forEach((popover) => (popover.autoClose = autoClose));
   }
   get el() { return this; }
+  static get watchers() { return {
+    "autoClose": ["autoCloseHandler"]
+  }; }
   static get style() { return popoverManagerCss; }
 };
 
@@ -24920,11 +24986,163 @@ const CSS$2 = {
   arrow: "arrow"
 };
 const TOOLTIP_DELAY_MS = 500;
-const TOOLTIP_REFERENCE = "data-calcite-tooltip-reference";
 const ARIA_DESCRIBED_BY = "aria-describedby";
 
+class TooltipManager$1 {
+  constructor() {
+    // --------------------------------------------------------------------------
+    //
+    //  Private Properties
+    //
+    // --------------------------------------------------------------------------
+    this.registeredElements = new WeakMap();
+    this.hoverTimeouts = new WeakMap();
+    this.registeredElementCount = 0;
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.queryTooltip = (composedPath) => {
+      const { registeredElements } = this;
+      const registeredElement = composedPath.find((pathEl) => registeredElements.has(pathEl));
+      return registeredElements.get(registeredElement);
+    };
+    this.keyDownHandler = (event) => {
+      if (event.key === "Escape") {
+        const { activeTooltipEl } = this;
+        if (activeTooltipEl) {
+          this.clearHoverTimeout(activeTooltipEl);
+          this.toggleTooltip(activeTooltipEl, false);
+        }
+      }
+    };
+    this.mouseEnterShow = (event) => {
+      this.hoverEvent(event, true);
+    };
+    this.mouseLeaveHide = (event) => {
+      this.hoverEvent(event, false);
+    };
+    this.clickHandler = (event) => {
+      this.clickedTooltip = this.queryTooltip(event.composedPath());
+    };
+    this.focusShow = (event) => {
+      this.focusEvent(event, true);
+    };
+    this.blurHide = (event) => {
+      this.focusEvent(event, false);
+    };
+    this.hoverToggle = (tooltip, value) => {
+      const { hoverTimeouts } = this;
+      hoverTimeouts.delete(tooltip);
+      if (value) {
+        this.closeExistingTooltip();
+      }
+      this.toggleTooltip(tooltip, value);
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  registerElement(referenceEl, tooltip) {
+    this.registeredElementCount++;
+    this.registeredElements.set(referenceEl, tooltip);
+    if (this.registeredElementCount === 1) {
+      this.addListeners();
+    }
+  }
+  unregisterElement(referenceEl) {
+    if (this.registeredElements.delete(referenceEl)) {
+      this.registeredElementCount--;
+    }
+    if (this.registeredElementCount === 0) {
+      this.removeListeners();
+    }
+  }
+  addListeners() {
+    document.addEventListener("keydown", this.keyDownHandler);
+    document.addEventListener("mouseover", this.mouseEnterShow, { capture: true });
+    document.addEventListener("mouseout", this.mouseLeaveHide, { capture: true });
+    document.addEventListener("pointerdown", this.clickHandler, { capture: true });
+    document.addEventListener("focusin", this.focusShow), { capture: true };
+    document.addEventListener("focusout", this.blurHide, { capture: true });
+  }
+  removeListeners() {
+    document.removeEventListener("keydown", this.keyDownHandler);
+    document.removeEventListener("mouseover", this.mouseEnterShow, { capture: true });
+    document.removeEventListener("mouseout", this.mouseLeaveHide, { capture: true });
+    document.removeEventListener("pointerdown", this.clickHandler, { capture: true });
+    document.removeEventListener("focusin", this.focusShow, { capture: true });
+    document.removeEventListener("focusout", this.blurHide, { capture: true });
+  }
+  clearHoverTimeout(tooltip) {
+    const { hoverTimeouts } = this;
+    if (hoverTimeouts.has(tooltip)) {
+      window.clearTimeout(hoverTimeouts.get(tooltip));
+      hoverTimeouts.delete(tooltip);
+    }
+  }
+  closeExistingTooltip() {
+    const { activeTooltipEl } = this;
+    if (activeTooltipEl) {
+      this.toggleTooltip(activeTooltipEl, false);
+    }
+  }
+  focusTooltip(tooltip, value) {
+    this.closeExistingTooltip();
+    if (value) {
+      this.clearHoverTimeout(tooltip);
+    }
+    this.toggleTooltip(tooltip, value);
+  }
+  toggleTooltip(tooltip, value) {
+    tooltip.open = value;
+    if (value) {
+      this.activeTooltipEl = tooltip;
+    }
+  }
+  hoverTooltip(tooltip, value) {
+    this.clearHoverTimeout(tooltip);
+    const { hoverTimeouts } = this;
+    const timeoutId = window.setTimeout(() => this.hoverToggle(tooltip, value), TOOLTIP_DELAY_MS );
+    hoverTimeouts.set(tooltip, timeoutId);
+  }
+  activeTooltipHover(event) {
+    const { activeTooltipEl, hoverTimeouts } = this;
+    const { type } = event;
+    if (!activeTooltipEl) {
+      return;
+    }
+    if (type === "mouseover" && event.composedPath().includes(activeTooltipEl)) {
+      this.clearHoverTimeout(activeTooltipEl);
+    }
+    else if (type === "mouseout" && !hoverTimeouts.has(activeTooltipEl)) {
+      this.hoverTooltip(activeTooltipEl, false);
+    }
+  }
+  hoverEvent(event, value) {
+    const tooltip = this.queryTooltip(event.composedPath());
+    this.activeTooltipHover(event);
+    if (!tooltip) {
+      return;
+    }
+    this.hoverTooltip(tooltip, value);
+  }
+  focusEvent(event, value) {
+    const tooltip = this.queryTooltip(event.composedPath());
+    if (!tooltip || tooltip === this.clickedTooltip) {
+      this.clickedTooltip = null;
+      return;
+    }
+    this.focusTooltip(tooltip, value);
+  }
+}
+
 const tooltipCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:block;position:absolute;z-index:999;-webkit-transform:scale(0);transform:scale(0)}.calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}:host([data-popper-placement^=bottom]) .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}:host([data-popper-placement^=top]) .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}:host([data-popper-placement^=left]) .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}:host([data-popper-placement^=right]) .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}:host([data-popper-placement]) .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}:host([data-popper-placement][data-popper-reference-hidden]){pointer-events:none;opacity:0}.arrow,.arrow::before{position:absolute;width:8px;height:8px;z-index:-1}.arrow::before{content:\"\";--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-transform:rotate(45deg);transform:rotate(45deg);background:var(--calcite-ui-foreground-1)}:host([data-popper-placement^=top]) .arrow{bottom:-4px}:host([data-popper-placement^=bottom]) .arrow{top:-4px}:host([data-popper-placement^=left]) .arrow{right:-4px}:host([data-popper-placement^=right]) .arrow{left:-4px}.container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;overflow:hidden;border-radius:0.25rem;background-color:var(--calcite-ui-foreground-1);padding-top:0.75rem;padding-bottom:0.75rem;padding-left:1rem;padding-right:1rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);max-width:20rem;max-height:20rem}.calcite-popper-anim{border-radius:0.25rem;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);background-color:var(--calcite-ui-foreground-1)}.arrow::before{outline:1px solid var(--calcite-ui-border-3)}";
 
+const manager = new TooltipManager$1();
 const Tooltip = class extends HTMLElement$1 {
   constructor() {
     super();
@@ -24977,22 +25195,16 @@ const Tooltip = class extends HTMLElement$1 {
         return;
       }
       const id = this.getId();
-      effectiveReferenceElement.setAttribute(TOOLTIP_REFERENCE, id);
       effectiveReferenceElement.setAttribute(ARIA_DESCRIBED_BY, id);
+      manager.registerElement(effectiveReferenceElement, this.el);
     };
     this.removeReferences = () => {
       const { effectiveReferenceElement } = this;
       if (!effectiveReferenceElement) {
         return;
       }
-      effectiveReferenceElement.removeAttribute(TOOLTIP_REFERENCE);
       effectiveReferenceElement.removeAttribute(ARIA_DESCRIBED_BY);
-    };
-    this.show = () => {
-      this.open = true;
-    };
-    this.hide = () => {
-      this.open = false;
+      manager.unregisterElement(effectiveReferenceElement);
     };
   }
   offsetDistanceOffsetHandler() {
@@ -25122,7 +25334,6 @@ const TooltipManager = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.hoverTimeouts = new WeakMap();
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -25132,93 +25343,7 @@ const TooltipManager = class extends HTMLElement$1 {
      * CSS Selector to match reference elements for tooltips. Reference elements will be identified by this selector in order to open their associated tooltip.
      * @default `[data-calcite-tooltip-reference]`
      */
-    this.selector = `[${TOOLTIP_REFERENCE}]`;
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    this.queryTooltip = (composedPath) => {
-      const { el } = this;
-      if (!composedPath.includes(el)) {
-        return null;
-      }
-      const referenceElement = composedPath.find((pathEl) => { var _a; return (_a = pathEl === null || pathEl === void 0 ? void 0 : pathEl.hasAttribute) === null || _a === void 0 ? void 0 : _a.call(pathEl, TOOLTIP_REFERENCE); });
-      if (!referenceElement) {
-        return null;
-      }
-      const id = referenceElement.getAttribute(TOOLTIP_REFERENCE);
-      return queryElementRoots(el, { id });
-    };
-    this.clearHoverTimeout = (tooltip) => {
-      const { hoverTimeouts } = this;
-      if (hoverTimeouts.has(tooltip)) {
-        window.clearTimeout(hoverTimeouts.get(tooltip));
-        hoverTimeouts.delete(tooltip);
-      }
-    };
-    this.closeExistingTooltip = () => {
-      const { tooltipEl } = this;
-      if (tooltipEl) {
-        this.toggleTooltip(tooltipEl, false);
-      }
-    };
-    this.focusTooltip = ({ tooltip, value }) => {
-      this.closeExistingTooltip();
-      if (value) {
-        this.clearHoverTimeout(tooltip);
-      }
-      this.toggleTooltip(tooltip, value);
-    };
-    this.toggleTooltip = (tooltip, value) => {
-      tooltip.open = value;
-      if (value) {
-        this.tooltipEl = tooltip;
-      }
-    };
-    this.hoverToggle = ({ tooltip, value }) => {
-      const { hoverTimeouts } = this;
-      hoverTimeouts.delete(tooltip);
-      if (value) {
-        this.closeExistingTooltip();
-      }
-      this.toggleTooltip(tooltip, value);
-    };
-    this.hoverTooltip = ({ tooltip, value }) => {
-      this.clearHoverTimeout(tooltip);
-      const { hoverTimeouts } = this;
-      const timeoutId = window.setTimeout(() => this.hoverToggle({ tooltip, value }), TOOLTIP_DELAY_MS );
-      hoverTimeouts.set(tooltip, timeoutId);
-    };
-    this.activeTooltipHover = (event) => {
-      const { tooltipEl, hoverTimeouts } = this;
-      const { type } = event;
-      if (!tooltipEl) {
-        return;
-      }
-      if (type === "mouseover" && event.composedPath().includes(tooltipEl)) {
-        this.clearHoverTimeout(tooltipEl);
-      }
-      else if (type === "mouseout" && !hoverTimeouts.has(tooltipEl)) {
-        this.hoverTooltip({ tooltip: tooltipEl, value: false });
-      }
-    };
-    this.hoverEvent = (event, value) => {
-      const tooltip = this.queryTooltip(event.composedPath());
-      this.activeTooltipHover(event);
-      if (!tooltip) {
-        return;
-      }
-      this.hoverTooltip({ tooltip, value });
-    };
-    this.focusEvent = (event, value) => {
-      const tooltip = this.queryTooltip(event.composedPath());
-      if (!tooltip || tooltip === this.clickedTooltip) {
-        this.clickedTooltip = null;
-        return;
-      }
-      this.focusTooltip({ tooltip, value });
-    };
+    this.selector = "[data-calcite-tooltip-reference]";
   }
   // --------------------------------------------------------------------------
   //
@@ -25228,36 +25353,6 @@ const TooltipManager = class extends HTMLElement$1 {
   render() {
     return h("slot", null);
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Event Listeners
-  //
-  //--------------------------------------------------------------------------
-  keyUpHandler(event) {
-    if (event.key === "Escape") {
-      const { tooltipEl } = this;
-      if (tooltipEl) {
-        this.clearHoverTimeout(tooltipEl);
-        this.toggleTooltip(tooltipEl, false);
-      }
-    }
-  }
-  mouseEnterShow(event) {
-    this.hoverEvent(event, true);
-  }
-  mouseLeaveHide(event) {
-    this.hoverEvent(event, false);
-  }
-  clickHandler(event) {
-    this.clickedTooltip = this.queryTooltip(event.composedPath());
-  }
-  focusShow(event) {
-    this.focusEvent(event, true);
-  }
-  blurHide(event) {
-    this.focusEvent(event, false);
-  }
-  get el() { return this; }
   static get style() { return tooltipManagerCss; }
 };
 
@@ -26125,8 +26220,8 @@ const CalcitePanel = /*@__PURE__*/proxyCustomElement(Panel, [1,"calcite-panel",{
 const CalcitePickList = /*@__PURE__*/proxyCustomElement(PickList, [1,"calcite-pick-list",{"disabled":[516],"filterEnabled":[516,"filter-enabled"],"filterPlaceholder":[513,"filter-placeholder"],"headingLevel":[2,"heading-level"],"loading":[516],"multiple":[516],"selectionFollowsFocus":[4,"selection-follows-focus"],"selectedValues":[32],"dataForFilter":[32]},[[0,"calciteListItemRemove","calciteListItemRemoveHandler"],[0,"calciteListItemChange","calciteListItemChangeHandler"],[0,"calciteListItemPropsChange","calciteListItemPropsChangeHandler"],[0,"calciteListItemValueChange","calciteListItemValueChangeHandler"],[0,"focusout","calciteListFocusOutHandler"]]]);
 const CalcitePickListGroup = /*@__PURE__*/proxyCustomElement(PickListGroup, [1,"calcite-pick-list-group",{"groupTitle":[513,"group-title"],"headingLevel":[2,"heading-level"]}]);
 const CalcitePickListItem = /*@__PURE__*/proxyCustomElement(PickListItem, [1,"calcite-pick-list-item",{"description":[513],"disabled":[516],"disableDeselect":[4,"disable-deselect"],"nonInteractive":[516,"non-interactive"],"icon":[513],"label":[513],"metadata":[16],"removable":[516],"selected":[1540],"intlRemove":[513,"intl-remove"],"value":[8]}]);
-const CalcitePopover = /*@__PURE__*/proxyCustomElement(Popover, [1,"calcite-popover",{"closeButton":[516,"close-button"],"dismissible":[516],"disableFlip":[516,"disable-flip"],"disablePointer":[516,"disable-pointer"],"flipPlacements":[16],"heading":[1],"headingLevel":[2,"heading-level"],"label":[1],"offsetDistance":[514,"offset-distance"],"offsetSkidding":[514,"offset-skidding"],"open":[1540],"overlayPositioning":[1,"overlay-positioning"],"placement":[513],"referenceElement":[1,"reference-element"],"intlClose":[1,"intl-close"],"effectiveReferenceElement":[32]}]);
-const CalcitePopoverManager = /*@__PURE__*/proxyCustomElement(PopoverManager, [1,"calcite-popover-manager",{"selector":[1],"autoClose":[516,"auto-close"]},[[10,"click","closeOpenPopovers"]]]);
+const CalcitePopover = /*@__PURE__*/proxyCustomElement(Popover, [1,"calcite-popover",{"autoClose":[516,"auto-close"],"closeButton":[516,"close-button"],"dismissible":[516],"disableFlip":[516,"disable-flip"],"disablePointer":[516,"disable-pointer"],"flipPlacements":[16],"heading":[1],"headingLevel":[2,"heading-level"],"label":[1],"offsetDistance":[514,"offset-distance"],"offsetSkidding":[514,"offset-skidding"],"open":[1540],"overlayPositioning":[1,"overlay-positioning"],"placement":[513],"referenceElement":[1,"reference-element"],"intlClose":[1,"intl-close"],"effectiveReferenceElement":[32]}]);
+const CalcitePopoverManager = /*@__PURE__*/proxyCustomElement(PopoverManager, [1,"calcite-popover-manager",{"selector":[1],"autoClose":[516,"auto-close"]}]);
 const CalciteProgress = /*@__PURE__*/proxyCustomElement(Progress, [1,"calcite-progress",{"type":[1],"value":[2],"label":[1],"text":[1],"reversed":[4]}]);
 const CalciteRadioButton = /*@__PURE__*/proxyCustomElement(RadioButton, [1,"calcite-radio-button",{"checked":[1540],"disabled":[516],"focused":[1540],"guid":[1537],"hidden":[516],"hovered":[1540],"label":[1],"name":[513],"required":[516],"scale":[513],"value":[1032]},[[1,"mouseenter","mouseenter"],[1,"mouseleave","mouseleave"]]]);
 const CalciteRadioButtonGroup = /*@__PURE__*/proxyCustomElement(RadioButtonGroup, [1,"calcite-radio-button-group",{"disabled":[516],"hidden":[516],"layout":[513],"name":[513],"required":[516],"scale":[513]},[[0,"calciteRadioButtonChange","radioButtonChangeHandler"]]]);
@@ -26156,7 +26251,7 @@ const CalciteTip = /*@__PURE__*/proxyCustomElement(Tip, [1,"calcite-tip",{"dismi
 const CalciteTipGroup = /*@__PURE__*/proxyCustomElement(TipGroup, [1,"calcite-tip-group",{"groupTitle":[1,"group-title"]}]);
 const CalciteTipManager = /*@__PURE__*/proxyCustomElement(TipManager, [1,"calcite-tip-manager",{"closed":[1540],"headingLevel":[2,"heading-level"],"intlClose":[1,"intl-close"],"intlDefaultTitle":[1,"intl-default-title"],"intlNext":[1,"intl-next"],"intlPaginationLabel":[1,"intl-pagination-label"],"intlPrevious":[1,"intl-previous"],"selectedIndex":[32],"tips":[32],"total":[32],"direction":[32],"groupTitle":[32]}]);
 const CalciteTooltip = /*@__PURE__*/proxyCustomElement(Tooltip, [1,"calcite-tooltip",{"label":[1],"offsetDistance":[514,"offset-distance"],"offsetSkidding":[514,"offset-skidding"],"open":[516],"overlayPositioning":[1,"overlay-positioning"],"placement":[513],"referenceElement":[1,"reference-element"],"effectiveReferenceElement":[32]}]);
-const CalciteTooltipManager = /*@__PURE__*/proxyCustomElement(TooltipManager, [1,"calcite-tooltip-manager",{"selector":[1]},[[4,"keyup","keyUpHandler"],[3,"mouseover","mouseEnterShow"],[3,"mouseout","mouseLeaveHide"],[2,"click","clickHandler"],[2,"focus","focusShow"],[2,"blur","blurHide"]]]);
+const CalciteTooltipManager = /*@__PURE__*/proxyCustomElement(TooltipManager, [1,"calcite-tooltip-manager",{"selector":[1]}]);
 const CalciteTree = /*@__PURE__*/proxyCustomElement(Tree, [1,"calcite-tree",{"lines":[1540],"inputEnabled":[4,"input-enabled"],"child":[1540],"scale":[1537],"selectionMode":[1537,"selection-mode"]},[[0,"focus","onFocus"],[0,"focusin","onFocusIn"],[0,"focusout","onFocusOut"],[0,"calciteTreeItemSelect","onClick"],[0,"keydown","keyDownHandler"]]]);
 const CalciteTreeItem = /*@__PURE__*/proxyCustomElement(TreeItem, [1,"calcite-tree-item",{"selected":[1540],"expanded":[1540],"parentExpanded":[4,"parent-expanded"],"depth":[1538],"hasChildren":[1540,"has-children"],"lines":[1540],"inputEnabled":[4,"input-enabled"],"scale":[1537],"indeterminate":[516],"selectionMode":[1025,"selection-mode"]},[[0,"click","onClick"],[0,"keydown","keyDownHandler"]]]);
 const CalciteValueList = /*@__PURE__*/proxyCustomElement(ValueList, [1,"calcite-value-list",{"disabled":[516],"dragEnabled":[516,"drag-enabled"],"filterEnabled":[516,"filter-enabled"],"filterPlaceholder":[513,"filter-placeholder"],"group":[1],"loading":[516],"multiple":[516],"selectionFollowsFocus":[4,"selection-follows-focus"],"selectedValues":[32],"dataForFilter":[32]},[[0,"focusout","calciteListFocusOutHandler"],[0,"calciteListItemRemove","calciteListItemRemoveHandler"],[0,"calciteListItemChange","calciteListItemChangeHandler"],[0,"calciteListItemPropsChange","calciteListItemPropsChangeHandler"],[0,"calciteListItemValueChange","calciteListItemValueChangeHandler"]]]);