@esri/calcite-components 1.0.0-next.444 → 1.0.0-next.447

package/hydrate/index.js

@@ -1,14 +1,14 @@
 /*!
  * 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.444
+ * v1.0.0-next.447
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
 /*!
- Stencil Mock Doc v2.15.0 | MIT Licensed | https://stenciljs.com
+ Stencil Mock Doc v2.15.1 | MIT Licensed | https://stenciljs.com
  */
 const CONTENT_REF_ID = 'r';
 const ORG_LOCATION_ID = 'o';
@@ -387,7 +387,7 @@ function toDataAttribute(str) {
       .toLowerCase());
 }
 function dashToPascalCase(str) {
-  str = String(str).substr(5);
+  str = String(str).slice(5);
   return str
     .split('-')
     .map((segment, index) => {
@@ -591,7 +591,7 @@ function cssCaseToJsCase(str) {
       .split('-')
       .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
       .join('');
-    str = str.substr(0, 1).toLowerCase() + str.substr(1);
+    str = str.slice(0, 1).toLowerCase() + str.slice(1);
   }
   return str;
 }
@@ -3171,6 +3171,15 @@ class MockResponse {
   }
 }
 
+class MockDOMParser {
+  parseFromString(htmlToParse, mimeType) {
+    if (mimeType !== 'text/html') {
+      console.error('XML parsing not implemented yet, continuing as html');
+    }
+    return parseHtmlToDocument(htmlToParse);
+  }
+}
+
 function setupGlobal(gbl) {
   if (gbl.window == null) {
     const win = (gbl.window = new MockWindow());
@@ -3300,6 +3309,7 @@ const GLOBAL_CONSTRUCTORS = [
   ['MouseEvent', MockMouseEvent],
   ['Request', MockRequest],
   ['Response', MockResponse],
+  ['DOMParser', MockDOMParser],
   ['HTMLAnchorElement', MockAnchorElement],
   ['HTMLBaseElement', MockBaseElement],
   ['HTMLButtonElement', MockButtonElement],
@@ -6352,7 +6362,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 = (hAsync("calcite-action", { icon: expanded ? expandIcon : collapseIcon, onClick: toggle, ref: (referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref }), scale: scale, text: expandText, textEnabled: expanded }));
-  return tooltip ? hAsync("calcite-tooltip-manager", null, actionNode) : actionNode;
+  return actionNode;
 };
 
 const CSS$N = {
@@ -7745,6 +7755,7 @@ class ActionBar {
     };
     this.toggleExpand = () => {
       this.expanded = !this.expanded;
+      this.calciteActionBarToggle.emit();
     };
     this.setExpandToggleRef = (el) => {
       this.expandToggleEl = el;
@@ -7755,7 +7766,6 @@ class ActionBar {
   }
   expandedHandler(expanded) {
     toggleChildActionText({ parent: this.el, expanded });
-    this.calciteActionBarToggle.emit();
   }
   overflowDisabledHandler(overflowActionsDisabled) {
     overflowActionsDisabled
@@ -8195,9 +8205,9 @@ class ActionMenu {
     focusElement(this.open ? this.menuEl : this.menuButtonEl);
   }
   renderMenuButton() {
-    const { el, label, scale } = this;
+    const { label, scale } = this;
     const menuButtonSlot = (hAsync("slot", { name: SLOTS$p.trigger }, hAsync("calcite-action", { class: CSS$O.defaultTrigger, icon: ICONS$f.menu, ref: this.setDefaultMenuButtonEl, scale: scale, text: label })));
-    return getSlotted(el, SLOTS$p.tooltip) ? (hAsync("calcite-tooltip-manager", null, menuButtonSlot)) : (menuButtonSlot);
+    return menuButtonSlot;
   }
   renderMenuItems() {
     const { actionElements, activeMenuItemIndex, open, menuId, menuButtonEl, label, placement, overlayPositioning, flipPlacements } = this;
@@ -8299,6 +8309,7 @@ class ActionPad {
     };
     this.toggleExpand = () => {
       this.expanded = !this.expanded;
+      this.calciteActionPadToggle.emit();
     };
     this.setExpandToggleRef = (el) => {
       this.expandToggleEl = el;
@@ -8306,7 +8317,6 @@ class ActionPad {
   }
   expandedHandler(expanded) {
     toggleChildActionText({ parent: this.el, expanded });
-    this.calciteActionPadToggle.emit();
   }
   // --------------------------------------------------------------------------
   //
@@ -15551,7 +15561,7 @@ class Combobox {
       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 ||
@@ -15878,8 +15888,7 @@ class Combobox {
     return this.items.map((item) => ({
       constant: item.constant,
       value: item.value,
-      label: item.textLabel,
-      guid: item.guid
+      label: item.textLabel
     }));
   }
   getNeedsIcon() {
@@ -23279,13 +23288,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*/.sc-calcite-popover: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*/.calcite-animate.sc-calcite-popover{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*/.calcite-animate__in.sc-calcite-popover{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-popover{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-popover{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-popover{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:root*/.sc-calcite-popover:root{--calcite-popper-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-popover-h{display:none}/*!@:host*/.sc-calcite-popover-h{display:block;position:absolute;z-index:900;-webkit-transform:scale(0);transform:scale(0)}/*!@.calcite-popper-anim*/.calcite-popper-anim.sc-calcite-popover{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*/[data-popper-placement^=bottom].sc-calcite-popover-h .calcite-popper-anim.sc-calcite-popover{-webkit-transform:translateY(-5px);transform:translateY(-5px)}/*!@:host([data-popper-placement^=top]) .calcite-popper-anim*/[data-popper-placement^=top].sc-calcite-popover-h .calcite-popper-anim.sc-calcite-popover{-webkit-transform:translateY(5px);transform:translateY(5px)}/*!@:host([data-popper-placement^=left]) .calcite-popper-anim*/[data-popper-placement^=left].sc-calcite-popover-h .calcite-popper-anim.sc-calcite-popover{-webkit-transform:translateX(5px);transform:translateX(5px)}/*!@:host([data-popper-placement^=right]) .calcite-popper-anim*/[data-popper-placement^=right].sc-calcite-popover-h .calcite-popper-anim.sc-calcite-popover{-webkit-transform:translateX(-5px);transform:translateX(-5px)}/*!@:host([data-popper-placement]) .calcite-popper-anim--active*/[data-popper-placement].sc-calcite-popover-h .calcite-popper-anim--active.sc-calcite-popover{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}/*!@:host([data-popper-placement][data-popper-reference-hidden])*/[data-popper-placement][data-popper-reference-hidden].sc-calcite-popover-h{pointer-events:none;opacity:0}/*!@.arrow,\n.arrow::before*/.arrow.sc-calcite-popover,.arrow.sc-calcite-popover::before{position:absolute;width:8px;height:8px;z-index:-1}/*!@.arrow::before*/.arrow.sc-calcite-popover::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*/[data-popper-placement^=top].sc-calcite-popover-h .arrow.sc-calcite-popover{bottom:-4px}/*!@:host([data-popper-placement^=bottom]) .arrow*/[data-popper-placement^=bottom].sc-calcite-popover-h .arrow.sc-calcite-popover{top:-4px}/*!@:host([data-popper-placement^=left]) .arrow*/[data-popper-placement^=left].sc-calcite-popover-h .arrow.sc-calcite-popover{right:-4px}/*!@:host([data-popper-placement^=right]) .arrow*/[data-popper-placement^=right].sc-calcite-popover-h .arrow.sc-calcite-popover{left:-4px}/*!@:host*/.sc-calcite-popover-h{pointer-events:none}/*!@:host([open])*/[open].sc-calcite-popover-h{pointer-events:initial}/*!@.calcite-popper-anim*/.calcite-popper-anim.sc-calcite-popover{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*/.arrow.sc-calcite-popover::before{outline:1px solid var(--calcite-ui-border-3)}/*!@.header*/.header.sc-calcite-popover{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*/.heading.sc-calcite-popover{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*/.container.sc-calcite-popover{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*/.container.has-header.sc-calcite-popover{-ms-flex-direction:column;flex-direction:column}/*!@.content*/.content.sc-calcite-popover{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*/.close-button-container.sc-calcite-popover{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)*/.sc-calcite-popover-s>calcite-panel,.sc-calcite-popover-s>calcite-flow{height:100%}";
 
+const manager$1 = new PopoverManager$1();
 /**
  * @slot - A slot for adding custom content.
  */
@@ -23299,6 +23367,10 @@ class Popover {
     //  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.
@@ -23381,8 +23453,8 @@ class Popover {
         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 = () => {
@@ -23390,9 +23462,9 @@ class Popover {
       if (!effectiveReferenceElement) {
         return;
       }
-      effectiveReferenceElement.removeAttribute(POPOVER_REFERENCE);
       effectiveReferenceElement.removeAttribute(ARIA_CONTROLS);
       effectiveReferenceElement.removeAttribute(ARIA_EXPANDED);
+      manager$1.unregisterElement(effectiveReferenceElement);
     };
     this.hide = () => {
       this.open = false;
@@ -23572,6 +23644,7 @@ class Popover {
     "$flags$": 9,
     "$tagName$": "calcite-popover",
     "$members$": {
+      "autoClose": [516, "auto-close"],
       "closeButton": [516, "close-button"],
       "dismissible": [516],
       "disableFlip": [516, "disable-flip"],
@@ -23594,7 +23667,7 @@ class Popover {
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["closeButton", "close-button"], ["dismissible", "dismissible"], ["disableFlip", "disable-flip"], ["disablePointer", "disable-pointer"], ["offsetDistance", "offset-distance"], ["offsetSkidding", "offset-skidding"], ["open", "open"], ["placement", "placement"]]
+    "$attrsToReflect$": [["autoClose", "auto-close"], ["closeButton", "close-button"], ["dismissible", "dismissible"], ["disableFlip", "disable-flip"], ["disablePointer", "disable-pointer"], ["offsetDistance", "offset-distance"], ["offsetSkidding", "offset-skidding"], ["open", "open"], ["placement", "placement"]]
   }; }
 }
 
@@ -23602,10 +23675,12 @@ const popoverManagerCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@k
 
 /**
  * @slot - A slot for adding elements that reference a 'calcite-popover' by the 'selector' property.
+ * @deprecated No longer required for popover usage.
  */
 class PopoverManager {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.mutationObserver = createObserver();
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -23615,28 +23690,28 @@ class PopoverManager {
      * 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();
   }
   // --------------------------------------------------------------------------
   //
@@ -23646,27 +23721,19 @@ class PopoverManager {
   render() {
     return hAsync("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 getElement(this); }
+  static get watchers() { return {
+    "autoClose": ["autoCloseHandler"]
+  }; }
   static get style() { return popoverManagerCss; }
   static get cmpMeta() { return {
     "$flags$": 9,
@@ -23675,7 +23742,7 @@ class PopoverManager {
       "selector": [1],
       "autoClose": [516, "auto-close"]
     },
-    "$listeners$": [[10, "click", "closeOpenPopovers"]],
+    "$listeners$": undefined,
     "$lazyBundleId$": "-",
     "$attrsToReflect$": [["autoClose", "auto-close"]]
   }; }
@@ -31947,11 +32014,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*/.sc-calcite-tooltip: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*/.calcite-animate.sc-calcite-tooltip{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*/.calcite-animate__in.sc-calcite-tooltip{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-tooltip{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-tooltip{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-tooltip{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:root*/.sc-calcite-tooltip:root{--calcite-popper-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-tooltip-h{display:none}/*!@:host*/.sc-calcite-tooltip-h{display:block;position:absolute;z-index:999;-webkit-transform:scale(0);transform:scale(0)}/*!@.calcite-popper-anim*/.calcite-popper-anim.sc-calcite-tooltip{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*/[data-popper-placement^=bottom].sc-calcite-tooltip-h .calcite-popper-anim.sc-calcite-tooltip{-webkit-transform:translateY(-5px);transform:translateY(-5px)}/*!@:host([data-popper-placement^=top]) .calcite-popper-anim*/[data-popper-placement^=top].sc-calcite-tooltip-h .calcite-popper-anim.sc-calcite-tooltip{-webkit-transform:translateY(5px);transform:translateY(5px)}/*!@:host([data-popper-placement^=left]) .calcite-popper-anim*/[data-popper-placement^=left].sc-calcite-tooltip-h .calcite-popper-anim.sc-calcite-tooltip{-webkit-transform:translateX(5px);transform:translateX(5px)}/*!@:host([data-popper-placement^=right]) .calcite-popper-anim*/[data-popper-placement^=right].sc-calcite-tooltip-h .calcite-popper-anim.sc-calcite-tooltip{-webkit-transform:translateX(-5px);transform:translateX(-5px)}/*!@:host([data-popper-placement]) .calcite-popper-anim--active*/[data-popper-placement].sc-calcite-tooltip-h .calcite-popper-anim--active.sc-calcite-tooltip{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}/*!@:host([data-popper-placement][data-popper-reference-hidden])*/[data-popper-placement][data-popper-reference-hidden].sc-calcite-tooltip-h{pointer-events:none;opacity:0}/*!@.arrow,\n.arrow::before*/.arrow.sc-calcite-tooltip,.arrow.sc-calcite-tooltip::before{position:absolute;width:8px;height:8px;z-index:-1}/*!@.arrow::before*/.arrow.sc-calcite-tooltip::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*/[data-popper-placement^=top].sc-calcite-tooltip-h .arrow.sc-calcite-tooltip{bottom:-4px}/*!@:host([data-popper-placement^=bottom]) .arrow*/[data-popper-placement^=bottom].sc-calcite-tooltip-h .arrow.sc-calcite-tooltip{top:-4px}/*!@:host([data-popper-placement^=left]) .arrow*/[data-popper-placement^=left].sc-calcite-tooltip-h .arrow.sc-calcite-tooltip{right:-4px}/*!@:host([data-popper-placement^=right]) .arrow*/[data-popper-placement^=right].sc-calcite-tooltip-h .arrow.sc-calcite-tooltip{left:-4px}/*!@.container*/.container.sc-calcite-tooltip{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*/.calcite-popper-anim.sc-calcite-tooltip{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*/.arrow.sc-calcite-tooltip::before{outline:1px solid var(--calcite-ui-border-3)}";
 
+const manager = new TooltipManager$1();
 /**
  * @slot - A slot for adding text.
  */
@@ -32005,22 +32224,16 @@ class Tooltip {
         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() {
@@ -32165,11 +32378,11 @@ const tooltipManagerCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@k
 
 /**
  * @slot - A slot for adding elements that reference a 'calcite-tooltip' by the 'selector' property.
+ * @deprecated No longer required for tooltip usage.
  */
 class TooltipManager {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.hoverTimeouts = new WeakMap();
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -32179,93 +32392,7 @@ class TooltipManager {
      * 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]";
   }
   // --------------------------------------------------------------------------
   //
@@ -32275,36 +32402,6 @@ class TooltipManager {
   render() {
     return hAsync("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 getElement(this); }
   static get style() { return tooltipManagerCss; }
   static get cmpMeta() { return {
     "$flags$": 9,
@@ -32312,7 +32409,7 @@ class TooltipManager {
     "$members$": {
       "selector": [1]
     },
-    "$listeners$": [[4, "keyup", "keyUpHandler"], [3, "mouseover", "mouseEnterShow"], [3, "mouseout", "mouseLeaveHide"], [2, "click", "clickHandler"], [2, "focus", "focusShow"], [2, "blur", "blurHide"]],
+    "$listeners$": undefined,
     "$lazyBundleId$": "-",
     "$attrsToReflect$": []
   }; }
@@ -33967,7 +34064,7 @@ const templateWindows = new Map, createHydrateBuildId = () => {
 }, commentre = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//g, getCssSelectors = e => {
  SELECTORS.all.length = SELECTORS.tags.length = SELECTORS.classNames.length = SELECTORS.ids.length = SELECTORS.attrs.length = 0;
  const t = (e = e.replace(/\./g, " .").replace(/\#/g, " #").replace(/\[/g, " [").replace(/\>/g, " > ").replace(/\+/g, " + ").replace(/\~/g, " ~ ").replace(/\*/g, " * ").replace(/\:not\((.*?)\)/g, " ")).split(" ");
- for (let e = 0, r = t.length; e < r; e++) t[e] = t[e].split(":")[0], 0 !== t[e].length && ("." === t[e].charAt(0) ? SELECTORS.classNames.push(t[e].substr(1)) : "#" === t[e].charAt(0) ? SELECTORS.ids.push(t[e].substr(1)) : "[" === t[e].charAt(0) ? (t[e] = t[e].substr(1).split("=")[0].split("]")[0].trim(), 
+ for (let e = 0, r = t.length; e < r; e++) t[e] = t[e].split(":")[0], 0 !== t[e].length && ("." === t[e].charAt(0) ? SELECTORS.classNames.push(t[e].slice(1)) : "#" === t[e].charAt(0) ? SELECTORS.ids.push(t[e].slice(1)) : "[" === t[e].charAt(0) ? (t[e] = t[e].slice(1).split("=")[0].split("]")[0].trim(), 
  SELECTORS.attrs.push(t[e].toLowerCase())) : /[a-z]/g.test(t[e].charAt(0)) && SELECTORS.tags.push(t[e].toLowerCase()));
  return SELECTORS.classNames = SELECTORS.classNames.sort(((e, t) => e.length < t.length ? -1 : e.length > t.length ? 1 : 0)), 
  SELECTORS;