@esri/calcite-components 1.4.0-next.8 → 1.4.0-next.9

package/dist/loader/index.cjs.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.4.0-next.8
+ * v1.4.0-next.9
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.es2017.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.4.0-next.8
+ * v1.4.0-next.9
  */
 export * from '../esm/polyfills/index.js';
 export * from '../esm/loader.js';

package/dist/loader/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.4.0-next.8
+ * v1.4.0-next.9
  */
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
 export * from '../esm/polyfills/index.js';

package/dist/types/components/avatar/avatar.d.ts

@@ -5,12 +5,14 @@ export declare class Avatar {
   scale: Scale;
   /** Specifies the `src` to an image (remember to add a token if the user is private). */
   thumbnail: string;
-  /** Specifies the full name of the user. */
+  /** Specifies the full name of the user. When `label` and `thumbnail` are not defined, specifies the accessible name for the component. */
   fullName: string;
   /** Specifies the username of the user. */
   username: string;
   /** Specifies the unique id of the user. */
   userId: string;
+  /** Specifies alternative text when `thumbnail` is defined, otherwise specifies an accessible label.*/
+  label: string;
   render(): any;
   thumbnailFailedToLoad: boolean;
   private determineContent;

package/dist/types/components/tooltip/TooltipManager.d.ts

@@ -2,8 +2,9 @@ import { ReferenceElement } from "../../utils/floating-ui";
 export default class TooltipManager {
   private registeredElements;
   private hoverTimeout;
+  private hoveredTooltip;
   private clickedTooltip;
-  private activeTooltipEl;
+  private activeTooltip;
   private registeredElementCount;
   registerElement(referenceEl: ReferenceElement, tooltip: HTMLCalciteTooltipElement): void;
   unregisterElement(referenceEl: ReferenceElement): void;

package/dist/types/components.d.ts

@@ -398,9 +398,13 @@ export namespace Components {
     }
     interface CalciteAvatar {
         /**
-          * Specifies the full name of the user.
+          * Specifies the full name of the user. When `label` and `thumbnail` are not defined, specifies the accessible name for the component.
          */
         "fullName": string;
+        /**
+          * Specifies alternative text when `thumbnail` is defined, otherwise specifies an accessible label.
+         */
+        "label": string;
         /**
           * Specifies the size of the component.
          */
@@ -5521,9 +5525,13 @@ declare namespace LocalJSX {
     }
     interface CalciteAvatar {
         /**
-          * Specifies the full name of the user.
+          * Specifies the full name of the user. When `label` and `thumbnail` are not defined, specifies the accessible name for the component.
          */
         "fullName"?: string;
+        /**
+          * Specifies alternative text when `thumbnail` is defined, otherwise specifies an accessible label.
+         */
+        "label"?: string;
         /**
           * Specifies the size of the component.
          */

package/dist/types/utils/dom.d.ts

@@ -1,3 +1,8 @@
+/**
+ * The default `focus-trap/tabbable` options.
+ *
+ * See https://github.com/focus-trap/tabbable#tabbable
+ */
 export declare const tabbableOptions: {
   getShadowRoot: boolean;
 };
@@ -6,47 +11,115 @@ export declare const tabbableOptions: {
  *
  * If it already has an ID, it will be preserved, otherwise a unique one will be generated and assigned.
  *
- * @param el
+ * @param {Element} el An element.
  * @returns {string} The element's ID.
  */
 export declare function ensureId(el: Element): string;
+/**
+ * This helper returns an array from a NodeList.
+ *
+ * @param {NodeList} nodeList A NodeList.
+ * @returns {Element[]} An array of elements.
+ */
 export declare function nodeListToArray<T extends Element>(nodeList: HTMLCollectionOf<T> | NodeListOf<T> | T[]): T[];
 export type Direction = "ltr" | "rtl";
+/**
+ * This helper returns the Calcite "mode" of an element.
+ *
+ * @param {HTMLElement} el An element.
+ * @returns {"light"|"dark"} The Calcite mode.
+ */
 export declare function getModeName(el: HTMLElement): "light" | "dark";
+/**
+ * This helper returns the direction of a HTML element.
+ *
+ * @param {HTMLElement} el An element.
+ * @returns {Direction} The direction.
+ */
 export declare function getElementDir(el: HTMLElement): Direction;
-export declare function getElementProp(el: Element, prop: string, fallbackValue: any): any;
+/**
+ * This helper returns the value of an attribute on an element.
+ *
+ * @param {HTMLElement} el An element.
+ * @param {string} attribute An attribute name.
+ * @param {any} fallbackValue A fallback value.
+ * @returns {any} The value.
+ * @deprecated
+ */
+export declare function getElementProp(el: Element, attribute: string, fallbackValue: any): any;
+/**
+ * This helper returns the rootNode of an element.
+ *
+ * @param {Element} el An element.
+ * @returns {Document|ShadowRoot} The element's root node.
+ */
 export declare function getRootNode(el: Element): Document | ShadowRoot;
+/**
+ * This helper returns the host of a ShadowRoot.
+ *
+ * @param {Document | ShadowRoot} root A root element.
+ * @returns {Element | null} The host element.
+ */
 export declare function getHost(root: Document | ShadowRoot): Element | null;
 /**
  * This helper queries an element's rootNode and any ancestor rootNodes.
  *
  * If both an 'id' and 'selector' are supplied, 'id' will take precedence over 'selector'.
  *
- * @param element
+ * @param {Element} element An element.
  * @param root0
  * @param root0.selector
  * @param root0.id
- * @returns {Element} The element.
+ * @returns {Element} An element.
  */
 export declare function queryElementRoots<T extends Element = Element>(element: Element, { selector, id }: {
   selector?: string;
   id?: string;
 }): T | null;
+/**
+ * This helper returns the closest element matching the selector by crossing he shadow boundary if necessary.
+ *
+ * @param {Element} element The starting element.
+ * @param {string} selector The selector.
+ * @returns {Element} The targeted element.
+ */
 export declare function closestElementCrossShadowBoundary<T extends Element = Element>(element: Element, selector: string): T | null;
 /**
  * This utility helps invoke a callback as it traverses a node and its ancestors until reaching the root document.
  *
  * Returning early or undefined in `onVisit` will continue traversing up the DOM tree. Otherwise, traversal will halt with the returned value as the result of the function
  *
- * @param element
- * @param onVisit
+ * @param {Element} element An element.
+ * @param {(node: Node) => Element} onVisit The callback.
+ * @returns {Element} The result.
  */
 export declare function walkUpAncestry<T = any>(element: Element, onVisit: (node: Node) => T): T;
+/**
+ * This helper returns true when an element has the descendant in question.
+ *
+ * @param {Element} element The starting element.
+ * @param {Element} maybeDescendant The descendant.
+ * @returns {boolean} The result.
+ */
 export declare function containsCrossShadowBoundary(element: Element, maybeDescendant: Element): boolean;
+/**
+ * An element which may contain a `setFocus` method.
+ */
 export interface FocusableElement extends HTMLElement {
   setFocus?: () => Promise<void>;
 }
+/**
+ * This helper returns true when an element has a setFocus method.
+ *
+ * @param {Element} el An element.
+ * @returns {boolean} The result.
+ */
 export declare function isCalciteFocusable(el: FocusableElement): boolean;
+/**
+ * This helper focuses an element using the `setFocus` method if available and falls back to using the `focus` method if not available.
+ *
+ * @param {Element} el An element.
+ */
 export declare function focusElement(el: FocusableElement): Promise<void>;
 /**
  * Helper to focus the first tabbable element.
@@ -63,9 +136,10 @@ interface GetSlottedOptions {
 /**
  * Gets slotted elements for a named slot.
  *
- * @param element
- * @param slotName
- * @param options
+ * @param {Element} element An element.
+ * @param {string} slotName The slot name.
+ * @param {GetSlottedOptions & { all: true }} options The options.
+ * @returns {Element | Element[] | null} returns element(s) or null.
  * @deprecated Use `onSlotchange` event instead.
  *
  * ```
@@ -78,15 +152,37 @@ export declare function getSlotted<T extends Element = Element>(element: Element
   all: true;
 }): T[];
 export declare function getSlotted<T extends Element = Element>(element: Element, slotName?: string | string[] | GetSlottedOptions, options?: GetSlottedOptions): T | null;
+/**
+ * Filters direct children.
+ *
+ * @param {Element} el An element.
+ * @param {string} selector The selector.
+ * @returns {Element[]} An array of elements.
+ */
 export declare function filterDirectChildren<T extends Element>(el: Element, selector: string): T[];
-export declare function setRequestedIcon(iconObject: Record<string, string>, iconValue: string | boolean, matchedValue: string): string;
+/**
+ * Set a default icon from a defined set or allow an override with an icon name string
+ *
+ * @param {Record<string, string>} iconObject The icon object.
+ * @param {string | boolean} iconValue The icon value.
+ * @param {string} matchedValue The matched value.
+ * @returns {string|undefined} The resulting icon value.
+ */
+export declare function setRequestedIcon(iconObject: Record<string, string>, iconValue: string | boolean, matchedValue: string): string | undefined;
+/**
+ * This helper returns true when two rectangles intersect.
+ *
+ * @param {DOMRect} rect1 The first rectangle.
+ * @param {DOMRect} rect2 The second rectangle.
+ * @returns {boolean} The result.
+ */
 export declare function intersects(rect1: DOMRect, rect2: DOMRect): boolean;
 /**
  * This helper makes sure that boolean aria attributes are properly converted to a string.
  *
  * It should only be used for aria attributes that require a string value of "true" or "false".
  *
- * @param value
+ * @param {boolean} value The value.
  * @returns {string} The string conversion of a boolean value ("true" | "false").
  */
 export declare function toAriaBoolean(value: boolean): string;
@@ -97,7 +193,7 @@ export declare function toAriaBoolean(value: boolean): string;
  * <slot onSlotchange={(event) => this.mySlotHasElement = slotChangeHasAssignedElement(event)} />}
  * ```
  *
- * @param event
+ * @param {Event} event The event.
  * @returns {boolean} Whether the slot has any assigned elements.
  */
 export declare function slotChangeHasAssignedElement(event: Event): boolean;
@@ -108,7 +204,7 @@ export declare function slotChangeHasAssignedElement(event: Event): boolean;
  * <slot onSlotchange={(event) => this.mySlotElements = slotChangeGetAssignedElements(event)} />}
  * ```
  *
- * @param event
+ * @param {Event} event The event.
  * @returns {boolean} Whether the slot has any assigned elements.
  */
 export declare function slotChangeGetAssignedElements(event: Event): Element[];
@@ -117,18 +213,18 @@ export declare function slotChangeGetAssignedElements(event: Event): Element[];
  *
  * See https://www.w3.org/TR/pointerevents/#the-button-property.
  *
- * @param event
- * @returns {boolean}
+ * @param {PointerEvent} event The pointer event.
+ * @returns {boolean} The value.
  */
 export declare function isPrimaryPointerButton(event: PointerEvent): boolean;
+export type FocusElementInGroupDestination = "first" | "last" | "next" | "previous";
 /**
  * This helper sets focus on and returns a destination element from within a group of provided elements.
  *
- * @param elements An array of elements
- * @param currentElement The current element
- * @param destination The target destination element to focus
+ * @param {Element[]} elements An array of elements.
+ * @param {Element} currentElement The current element.
+ * @param {FocusElementInGroupDestination} destination The target destination element to focus.
  * @returns {Element} The focused element
  */
-export type FocusElementInGroupDestination = "first" | "last" | "next" | "previous";
 export declare const focusElementInGroup: (elements: Element[], currentElement: Element, destination: FocusElementInGroupDestination) => Element;
 export {};

package/hydrate/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.4.0-next.8
+ * v1.4.0-next.9
  */
 'use strict';
 
@@ -6537,6 +6537,11 @@ function gen(counts) {
 }
 const guid = () => gen([2, 1, 1, 1, 3]);
 
+/**
+ * The default `focus-trap/tabbable` options.
+ *
+ * See https://github.com/focus-trap/tabbable#tabbable
+ */
 const tabbableOptions = {
   getShadowRoot: true
 };
@@ -6545,7 +6550,7 @@ const tabbableOptions = {
  *
  * If it already has an ID, it will be preserved, otherwise a unique one will be generated and assigned.
  *
- * @param el
+ * @param {Element} el An element.
  * @returns {string} The element's ID.
  */
 function ensureId(el) {
@@ -6554,27 +6559,66 @@ function ensureId(el) {
   }
   return (el.id = el.id || `${el.tagName.toLowerCase()}-${guid()}`);
 }
+/**
+ * This helper returns an array from a NodeList.
+ *
+ * @param {NodeList} nodeList A NodeList.
+ * @returns {Element[]} An array of elements.
+ */
 function nodeListToArray(nodeList) {
   return Array.isArray(nodeList) ? nodeList : Array.from(nodeList);
 }
+/**
+ * This helper returns the Calcite "mode" of an element.
+ *
+ * @param {HTMLElement} el An element.
+ * @returns {"light"|"dark"} The Calcite mode.
+ */
 function getModeName(el) {
   const closestElWithMode = closestElementCrossShadowBoundary(el, `.${CSS_UTILITY.darkMode}, .${CSS_UTILITY.lightMode}`);
   return closestElWithMode?.classList.contains("calcite-mode-dark") ? "dark" : "light";
 }
+/**
+ * This helper returns the direction of a HTML element.
+ *
+ * @param {HTMLElement} el An element.
+ * @returns {Direction} The direction.
+ */
 function getElementDir(el) {
   const prop = "dir";
   const selector = `[${prop}]`;
   const closest = closestElementCrossShadowBoundary(el, selector);
   return closest ? closest.getAttribute(prop) : "ltr";
 }
-function getElementProp(el, prop, fallbackValue) {
-  const selector = `[${prop}]`;
+/**
+ * This helper returns the value of an attribute on an element.
+ *
+ * @param {HTMLElement} el An element.
+ * @param {string} attribute An attribute name.
+ * @param {any} fallbackValue A fallback value.
+ * @returns {any} The value.
+ * @deprecated
+ */
+function getElementProp(el, attribute, fallbackValue) {
+  const selector = `[${attribute}]`;
   const closest = el.closest(selector);
-  return closest ? closest.getAttribute(prop) : fallbackValue;
+  return closest ? closest.getAttribute(attribute) : fallbackValue;
 }
+/**
+ * This helper returns the rootNode of an element.
+ *
+ * @param {Element} el An element.
+ * @returns {Document|ShadowRoot} The element's root node.
+ */
 function getRootNode(el) {
   return el.getRootNode();
 }
+/**
+ * This helper returns the host of a ShadowRoot.
+ *
+ * @param {Document | ShadowRoot} root A root element.
+ * @returns {Element | null} The host element.
+ */
 function getHost(root) {
   return root.host || null;
 }
@@ -6583,11 +6627,11 @@ function getHost(root) {
  *
  * If both an 'id' and 'selector' are supplied, 'id' will take precedence over 'selector'.
  *
- * @param element
+ * @param {Element} element An element.
  * @param root0
  * @param root0.selector
  * @param root0.id
- * @returns {Element} The element.
+ * @returns {Element} An element.
  */
 function queryElementRoots(element, { selector, id }) {
   // Gets the rootNode and any ancestor rootNodes (shadowRoot or document) of an element and queries them for a selector.
@@ -6616,6 +6660,13 @@ function queryElementRoots(element, { selector, id }) {
   }
   return queryFrom(element);
 }
+/**
+ * This helper returns the closest element matching the selector by crossing he shadow boundary if necessary.
+ *
+ * @param {Element} element The starting element.
+ * @param {string} selector The selector.
+ * @returns {Element} The targeted element.
+ */
 function closestElementCrossShadowBoundary(element, selector) {
   // based on https://stackoverflow.com/q/54520554/194216
   function closestFrom(el) {
@@ -6623,9 +6674,20 @@ function closestElementCrossShadowBoundary(element, selector) {
   }
   return closestFrom(element);
 }
+/**
+ * This helper returns true when an element has a setFocus method.
+ *
+ * @param {Element} el An element.
+ * @returns {boolean} The result.
+ */
 function isCalciteFocusable(el) {
   return typeof el?.setFocus === "function";
 }
+/**
+ * This helper focuses an element using the `setFocus` method if available and falls back to using the `focus` method if not available.
+ *
+ * @param {Element} el An element.
+ */
 async function focusElement(el) {
   if (!el) {
     return;
@@ -6685,10 +6747,24 @@ function querySingle(element, slotSelector, options) {
   const selector = options?.selector;
   return selector ? match?.querySelector(selector) : match;
 }
+/**
+ * Filters direct children.
+ *
+ * @param {Element} el An element.
+ * @param {string} selector The selector.
+ * @returns {Element[]} An array of elements.
+ */
 function filterDirectChildren(el, selector) {
   return Array.from(el.children).filter((child) => child.matches(selector));
 }
-// set a default icon from a defined set or allow an override with an icon name string
+/**
+ * Set a default icon from a defined set or allow an override with an icon name string
+ *
+ * @param {Record<string, string>} iconObject The icon object.
+ * @param {string | boolean} iconValue The icon value.
+ * @param {string} matchedValue The matched value.
+ * @returns {string|undefined} The resulting icon value.
+ */
 function setRequestedIcon(iconObject, iconValue, matchedValue) {
   if (typeof iconValue === "string" && iconValue !== "") {
     return iconValue;
@@ -6697,6 +6773,13 @@ function setRequestedIcon(iconObject, iconValue, matchedValue) {
     return iconObject[matchedValue];
   }
 }
+/**
+ * This helper returns true when two rectangles intersect.
+ *
+ * @param {DOMRect} rect1 The first rectangle.
+ * @param {DOMRect} rect2 The second rectangle.
+ * @returns {boolean} The result.
+ */
 function intersects(rect1, rect2) {
   return !(rect2.left > rect1.right ||
     rect2.right < rect1.left ||
@@ -6708,7 +6791,7 @@ function intersects(rect1, rect2) {
  *
  * It should only be used for aria attributes that require a string value of "true" or "false".
  *
- * @param value
+ * @param {boolean} value The value.
  * @returns {string} The string conversion of a boolean value ("true" | "false").
  */
 function toAriaBoolean(value) {
@@ -6721,7 +6804,7 @@ function toAriaBoolean(value) {
  * <slot onSlotchange={(event) => this.mySlotHasElement = slotChangeHasAssignedElement(event)} />}
  * ```
  *
- * @param event
+ * @param {Event} event The event.
  * @returns {boolean} Whether the slot has any assigned elements.
  */
 function slotChangeHasAssignedElement(event) {
@@ -6734,7 +6817,7 @@ function slotChangeHasAssignedElement(event) {
  * <slot onSlotchange={(event) => this.mySlotElements = slotChangeGetAssignedElements(event)} />}
  * ```
  *
- * @param event
+ * @param {Event} event The event.
  * @returns {boolean} Whether the slot has any assigned elements.
  */
 function slotChangeGetAssignedElements(event) {
@@ -6747,12 +6830,20 @@ function slotChangeGetAssignedElements(event) {
  *
  * See https://www.w3.org/TR/pointerevents/#the-button-property.
  *
- * @param event
- * @returns {boolean}
+ * @param {PointerEvent} event The pointer event.
+ * @returns {boolean} The value.
  */
 function isPrimaryPointerButton(event) {
   return !!(event.isPrimary && event.button === 0);
 }
+/**
+ * This helper sets focus on and returns a destination element from within a group of provided elements.
+ *
+ * @param {Element[]} elements An array of elements.
+ * @param {Element} currentElement The current element.
+ * @param {FocusElementInGroupDestination} destination The target destination element to focus.
+ * @returns {Element} The focused element
+ */
 const focusElementInGroup = (elements, currentElement, destination) => {
   const currentIndex = elements.indexOf(currentElement);
   const isFirstItem = currentIndex === 0;
@@ -10645,6 +10736,7 @@ class Avatar {
     this.fullName = undefined;
     this.username = undefined;
     this.userId = undefined;
+    this.label = undefined;
     this.thumbnailFailedToLoad = false;
   }
   //--------------------------------------------------------------------------
@@ -10662,11 +10754,11 @@ class Avatar {
   //--------------------------------------------------------------------------
   determineContent() {
     if (this.thumbnail && !this.thumbnailFailedToLoad) {
-      return (hAsync("img", { alt: "", class: "thumbnail", onError: () => (this.thumbnailFailedToLoad = true), src: this.thumbnail }));
+      return (hAsync("img", { alt: this.label || "", class: "thumbnail", onError: () => (this.thumbnailFailedToLoad = true), src: this.thumbnail }));
     }
     const initials = this.generateInitials();
     const backgroundColor = this.generateFillColor();
-    return (hAsync("span", { class: "background", style: { backgroundColor } }, initials ? (hAsync("span", { "aria-hidden": "true", class: "initials" }, initials)) : (hAsync("calcite-icon", { class: "icon", icon: "user", scale: this.scale }))));
+    return (hAsync("span", { "aria-label": this.label || this.fullName, class: "background", role: "figure", style: { backgroundColor } }, initials ? (hAsync("span", { "aria-hidden": "true", class: "initials" }, initials)) : (hAsync("calcite-icon", { class: "icon", icon: "user", scale: this.scale }))));
   }
   /**
    * Generate a valid background color that is consistent and unique to this user
@@ -10713,6 +10805,7 @@ class Avatar {
       "fullName": [513, "full-name"],
       "username": [513],
       "userId": [513, "user-id"],
+      "label": [1],
       "thumbnailFailedToLoad": [32]
     },
     "$listeners$": undefined,
@@ -37927,8 +38020,9 @@ class TooltipManager {
     // --------------------------------------------------------------------------
     this.registeredElements = new WeakMap();
     this.hoverTimeout = null;
+    this.hoveredTooltip = null;
     this.clickedTooltip = null;
-    this.activeTooltipEl = null;
+    this.activeTooltip = null;
     this.registeredElementCount = 0;
     // --------------------------------------------------------------------------
     //
@@ -37942,11 +38036,11 @@ class TooltipManager {
     };
     this.keyDownHandler = (event) => {
       if (event.key === "Escape" && !event.defaultPrevented) {
-        const { activeTooltipEl } = this;
-        if (activeTooltipEl?.open) {
+        const { activeTooltip } = this;
+        if (activeTooltip?.open) {
           this.clearHoverTimeout();
           this.closeExistingTooltip();
-          const referenceElement = getEffectiveReferenceElement(activeTooltipEl);
+          const referenceElement = getEffectiveReferenceElement(activeTooltip);
           if (referenceElement instanceof Element && referenceElement.contains(event.target)) {
             event.preventDefault();
           }
@@ -37955,13 +38049,14 @@ class TooltipManager {
     };
     this.pointerMoveHandler = (event) => {
       const composedPath = event.composedPath();
-      const { activeTooltipEl } = this;
-      const hoveringActiveTooltip = activeTooltipEl?.open && composedPath.includes(activeTooltipEl);
+      const { activeTooltip } = this;
+      const hoveringActiveTooltip = activeTooltip?.open && composedPath.includes(activeTooltip);
       if (hoveringActiveTooltip) {
         this.clearHoverTimeout();
         return;
       }
       const tooltip = this.queryTooltip(composedPath);
+      this.hoveredTooltip = tooltip;
       if (this.isClosableClickedTooltip(tooltip)) {
         return;
       }
@@ -37969,9 +38064,8 @@ class TooltipManager {
       if (tooltip) {
         this.toggleHoveredTooltip(tooltip, true);
       }
-      else if (activeTooltipEl) {
-        this.clearHoverTimeout();
-        this.toggleHoveredTooltip(activeTooltipEl, false);
+      else if (activeTooltip) {
+        this.toggleHoveredTooltip(activeTooltip, false);
       }
     };
     this.pointerDownHandler = (event) => {
@@ -37997,6 +38091,9 @@ class TooltipManager {
           return;
         }
         this.closeExistingTooltip();
+        if (tooltip !== this.hoveredTooltip) {
+          return;
+        }
         this.toggleTooltip(tooltip, value);
       }, TOOLTIP_DELAY_MS);
     };
@@ -38040,9 +38137,9 @@ class TooltipManager {
     this.hoverTimeout = null;
   }
   closeExistingTooltip() {
-    const { activeTooltipEl } = this;
-    if (activeTooltipEl?.open) {
-      this.toggleTooltip(activeTooltipEl, false);
+    const { activeTooltip } = this;
+    if (activeTooltip?.open) {
+      this.toggleTooltip(activeTooltip, false);
     }
   }
   toggleFocusedTooltip(tooltip, value) {
@@ -38055,7 +38152,7 @@ class TooltipManager {
   toggleTooltip(tooltip, value) {
     tooltip.open = value;
     if (value) {
-      this.activeTooltipEl = tooltip;
+      this.activeTooltip = tooltip;
     }
   }
   queryFocusedTooltip(event, value) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.4.0-next.8",
+  "version": "1.4.0-next.9",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -85,7 +85,7 @@
     "@babel/preset-react": "7.18.6",
     "@esri/calcite-base": "^1.2.0",
     "@esri/calcite-colors": "6.1.0",
-    "@esri/calcite-ui-icons": "3.22.1",
+    "@esri/calcite-ui-icons": "3.22.2",
     "@esri/eslint-plugin-calcite-components": "0.2.2",
     "@stencil-community/eslint-plugin": "0.5.0",
     "@stencil/postcss": "2.1.0",