@nectary/components 5.31.0 → 5.31.2

package/accordion-item/index.js

@@ -1,7 +1,7 @@
 import "../icon/index.js";
 import "../text/index.js";
 import "../title/index.js";
-import { isAttrEqual, updateAttribute, updateExplicitBooleanAttribute, isAttrTrue, updateBooleanAttribute, getAttribute, getBooleanAttribute, getLiteralAttribute, updateLiteralAttribute } from "../utils/dom.js";
+import { isAttrEqual, updateBooleanAttribute, isAttrTrue, updateExplicitBooleanAttribute, updateAttribute, getAttribute, getBooleanAttribute, getLiteralAttribute, updateLiteralAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { statusValues } from "./utils.js";
 const templateHTML = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-comp-accordion-color-default-border-initial)}:host(:last-child)>#wrapper{border-bottom:none}#button{all:initial;display:flex;position:relative;align-items:flex-start;gap:8px;box-sizing:border-box;width:100%;min-height:48px;padding:12px 4px 12px 8px;cursor:pointer;--sinch-global-color-icon:var(--sinch-comp-accordion-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-accordion-size-icon)}#button>*{pointer-events:none}#button:disabled{cursor:initial;--sinch-global-color-icon:var(--sinch-comp-accordion-color-disabled-icon-initial)}#button:focus-visible::after{content:"";position:absolute;inset:0;border:2px solid var(--sinch-comp-accordion-color-default-outline-focus);pointer-events:none}#status-wrapper{display:none;width:18px;height:24px;padding:8px 8px 8px 2px;box-sizing:border-box}#status{width:8px;height:8px;border-radius:50%}:host([status]:not([status=""])) #status-wrapper{display:block}:host([status=success]) #status{background-color:var(--sinch-comp-accordion-color-default-status-success)}:host([status=warn]) #status{background-color:var(--sinch-comp-accordion-color-default-status-warning)}:host([status=error]) #status{background-color:var(--sinch-comp-accordion-color-default-status-error)}:host([status=info]) #status{background-color:var(--sinch-comp-accordion-color-default-status-info)}#title{flex:1;min-width:0;--sinch-comp-title-font:var(--sinch-comp-accordion-font-title);--sinch-global-color-text:var(--sinch-comp-accordion-color-default-title-initial)}#button:disabled>#title{--sinch-global-color-text:var(--sinch-comp-accordion-color-disabled-title-initial)}#content{display:none;overflow-y:auto;flex-shrink:1;min-height:0;padding:0 8px 12px}#dropdown-icon{flex-shrink:0;margin-top:2px;transform:rotate(0);will-change:transform;transition:transform .25s ease-in-out}#button[aria-expanded=true]>#dropdown-icon{transform:rotate(180deg)}#button[aria-expanded=true]+#content{display:block}#optional{flex-shrink:0;--sinch-comp-text-font:var(--sinch-comp-accordion-font-optional-text);--sinch-global-color-text:var(--sinch-comp-accordion-color-default-optional-text-initial)}#button:disabled>#optional{--sinch-global-color-text:var(--sinch-comp-accordion-color-disabled-optional-text-initial)}</style><div id="wrapper"><button id="button" aria-controls="content" aria-expanded="false"><div id="status-wrapper"><div id="status"></div></div><slot name="icon"></slot><sinch-title id="title" level="3" type="m" ellipsis></sinch-title><sinch-text id="optional" type="m"></sinch-text><sinch-icon icons-version="2" name="fa-chevron-down" id="dropdown-icon"></sinch-icon></button><div id="content" role="region" aria-labelledby="button"><slot name="content"></slot></div></div>';
@@ -51,7 +51,7 @@ class AccordionItem extends NectaryElement {
         break;
       }
       case "ellipsis": {
-        updateAttribute(this.#$title, "ellipsis", newVal);
+        updateBooleanAttribute(this.#$title, name, isAttrTrue(newVal));
         break;
       }
     }

package/bundle.js

@@ -452,7 +452,7 @@ class AccordionItem extends NectaryElement {
         break;
       }
       case "ellipsis": {
-        updateAttribute(this.#$title, "ellipsis", newVal);
+        updateBooleanAttribute(this.#$title, name, isAttrTrue(newVal));
         break;
       }
     }
@@ -3466,6 +3466,9 @@ class Pop extends NectaryElement {
   get shouldCloseOnBackdropClick() {
     return !getBooleanAttribute(this, "disable-backdrop-close");
   }
+  get shouldRestoreFocusOnClose() {
+    return !getBooleanAttribute(this, "disable-focus-restore");
+  }
   attributeChangedCallback(name, oldVal, newVal) {
     if (isAttrEqual(oldVal, newVal)) {
       return;
@@ -3651,7 +3654,7 @@ class Pop extends NectaryElement {
     if (isNonModal && !effectiveAllowScroll) {
       this.#restoreTransferredTarget();
     }
-    if (this.#targetActiveElement !== null) {
+    if (this.shouldRestoreFocusOnClose && this.#targetActiveElement !== null) {
       if (!isElementFocused(this.#targetActiveElement)) {
         this.#$targetSlot.addEventListener("focus", this.#stopEventPropagation, true);
         this.#targetActiveElement.focus({ preventScroll: true });
@@ -3666,9 +3669,9 @@ class Pop extends NectaryElement {
             }
           });
         }
-        this.#targetActiveElement = null;
       }
     }
+    this.#targetActiveElement = null;
     if (!effectiveAllowScroll) {
       enableOverscroll();
     } else {
@@ -3827,6 +3830,9 @@ class TooltipState {
   #timerId = null;
   #state = "hide";
   #options;
+  get isInHideState() {
+    return this.#state === "hide";
+  }
   constructor(options) {
     this.#options = options;
   }
@@ -3983,10 +3989,15 @@ const SHOW_DELAY_SLOW = 1e3;
 const SHOW_DELAY_FAST = 250;
 const HIDE_DELAY = 0;
 const ANIMATION_DURATION = 100;
+const FOCUSABLE_OUTSIDE_TARGET_SELECTOR = 'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable=""], [contenteditable="true"]';
 const OVERLAP_TOLERANCE = 1;
 const MAX_ZERO_DIMENSION_PLACEMENT_RETRIES = 8;
 const MIN_FIRST_REVEAL_STABILITY_FRAMES = 3;
 const MAX_FIRST_REVEAL_STABILITY_FRAMES = 6;
+let activeTooltip = null;
+let focusedTooltip = null;
+let hoveredTooltip = null;
+let suspendedFocusedTooltip = null;
 const template$T = document.createElement("template");
 template$T.innerHTML = templateHTML$T;
 class Tooltip extends NectaryElement {
@@ -3996,10 +4007,15 @@ class Tooltip extends NectaryElement {
   #$contentWrapper;
   #$tip;
   #$target;
+  #targetElements = [];
   #resizeObserver = null;
   #tooltipState;
   #animation = null;
   #shouldReduceMotion = false;
+  #hasFocus = false;
+  #suppressFocusIn = false;
+  #suppressedFocusOutArmed = false;
+  #isSuspendedByHover = false;
   #isSubscribed = false;
   #controller;
   #placementScheduled = false;
@@ -4036,6 +4052,7 @@ class Tooltip extends NectaryElement {
     };
     this.setAttribute("role", "tooltip");
     this.#$pop.addEventListener("-close", this.#onPopClose, options);
+    this.#$target.addEventListener("slotchange", this.#onTargetSlotChange, options);
     this.addEventListener("-show", this.#onShowReactHandler, options);
     this.addEventListener("-hide", this.#onHideReactHandler, options);
     this.#resizeObserver = new ResizeObserver(() => {
@@ -4044,10 +4061,23 @@ class Tooltip extends NectaryElement {
     this.#resizeObserver.observe(this.#$content);
     updateAttribute(this.#$pop, "orientation", getPopOrientation$1(this.orientation));
     updateBooleanAttribute(this.#$pop, "hide-outside-viewport", !this.showOutsideViewport);
+    updateBooleanAttribute(this.#$pop, "disable-focus-restore", true);
     this.#updateText();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
+    if (activeTooltip === this) {
+      activeTooltip = null;
+    }
+    if (focusedTooltip === this) {
+      focusedTooltip = null;
+    }
+    if (hoveredTooltip === this) {
+      hoveredTooltip = null;
+    }
+    if (suspendedFocusedTooltip === this) {
+      suspendedFocusedTooltip = null;
+    }
     this.#tooltipState.destroy();
     this.#controller.abort();
     this.#controller = null;
@@ -4165,14 +4195,217 @@ class Tooltip extends NectaryElement {
     this.#tooltipState.destroy();
   };
   #onMouseEnter = () => {
+    this.#claimHoverOwnership();
+    this.#suspendFocusedTooltip();
+    this.#closeActiveTooltip();
+    this.#tooltipState.show();
+  };
+  #onContentMouseEnter = () => {
+    this.#claimHoverOwnership();
+    if (this.#hasFocus) {
+      return;
+    }
+    this.#suspendFocusedTooltip();
+    this.#closeActiveTooltip();
+    this.#tooltipState.show();
+  };
+  #onFocusIn = () => {
+    if (this.#suppressFocusIn) {
+      return;
+    }
+    this.#closeFocusedTooltip();
+    this.#closeActiveTooltip();
+    this.#hasFocus = true;
+    focusedTooltip = this;
     this.#tooltipState.show();
   };
-  #onMouseLeave = (e) => {
-    if (!this.#isOpen() || e.relatedTarget !== this.#$contentWrapper && e.relatedTarget !== this.#$target) {
+  #closeFocusedTooltip() {
+    if (!this.#isOtherUncontrolledTooltip(focusedTooltip)) {
+      return;
+    }
+    const previousFocusedTooltip = focusedTooltip;
+    previousFocusedTooltip.#clearTrackedFocus();
+    previousFocusedTooltip.#tooltipState.destroy();
+  }
+  #closeActiveTooltip() {
+    if (this.#isOtherUncontrolledTooltip(activeTooltip) && !activeTooltip.#hasFocus) {
+      activeTooltip.#tooltipState.destroy();
+    }
+  }
+  #suspendFocusedTooltip() {
+    if (this.#isOtherUncontrolledTooltip(focusedTooltip)) {
+      suspendedFocusedTooltip = focusedTooltip;
+      focusedTooltip.#suppressFocusIn = true;
+      focusedTooltip.#isSuspendedByHover = true;
+      focusedTooltip.#armSuppressedFocusOut();
+      if (!focusedTooltip.#tooltipState.isInHideState) {
+        focusedTooltip.#tooltipState.destroy();
+      }
+    }
+  }
+  #resumeFocusedTooltip() {
+    const tooltipToResume = suspendedFocusedTooltip;
+    if (tooltipToResume === null || tooltipToResume === this) {
+      return;
+    }
+    if (hoveredTooltip !== null) {
+      if (hoveredTooltip === this && !this.#isPointerWithinHoverSurface()) {
+        this.#releaseHoverOwnership();
+      } else {
+        return;
+      }
+    }
+    if (!tooltipToResume.#isSuspendedByHover) {
+      if (suspendedFocusedTooltip === tooltipToResume) {
+        suspendedFocusedTooltip = null;
+      }
+      return;
+    }
+    const activeEl = document.activeElement;
+    if (activeEl instanceof HTMLElement && tooltipToResume.#isFocusableOutsideTarget(activeEl)) {
+      tooltipToResume.#clearTrackedFocus();
+      return;
+    }
+    tooltipToResume.#clearFocusSuppression();
+    tooltipToResume.#hasFocus = true;
+    focusedTooltip = tooltipToResume;
+    suspendedFocusedTooltip = null;
+    tooltipToResume.#tooltipState.show();
+  }
+  #isOtherUncontrolledTooltip(tooltip) {
+    return tooltip !== null && tooltip !== this && tooltip.isOpenedControlled !== true;
+  }
+  #claimHoverOwnership() {
+    hoveredTooltip = this;
+  }
+  #releaseHoverOwnership() {
+    if (hoveredTooltip === this) {
+      hoveredTooltip = null;
+    }
+  }
+  #isPointerWithinHoverSurface() {
+    return this.#$contentWrapper.matches(":hover") || this.#$target.assignedElements().some((el) => el.matches(":hover"));
+  }
+  #finalizeFocusOut() {
+    if (!this.isDomConnected) {
+      return;
+    }
+    const activeEl = document.activeElement;
+    if (activeEl instanceof Node) {
+      if (this.#targetContains(activeEl) || this.shadowRoot?.contains(activeEl) === true) {
+        return;
+      }
+    }
+    this.#clearTrackedFocus();
+    this.#tooltipState.hide();
+  }
+  #onFocusOut = (e) => {
+    if (this.#isSuspendedByHover) {
+      return;
+    }
+    if (e.relatedTarget instanceof Node) {
+      if (this.#targetContains(e.relatedTarget) || this.shadowRoot?.contains(e.relatedTarget) === true) {
+        return;
+      }
+    }
+    requestAnimationFrame(() => {
+      this.#finalizeFocusOut();
+    });
+  };
+  #onMouseLeave = () => {
+    requestAnimationFrame(() => {
+      if (!this.isDomConnected) {
+        return;
+      }
+      if (this.#isPointerWithinHoverSurface()) {
+        this.#claimHoverOwnership();
+        return;
+      }
+      this.#releaseHoverOwnership();
+      if (this.#hasFocus) {
+        return;
+      }
       this.#tooltipState.hide();
+    });
+  };
+  #targetContains(node) {
+    return this.#$target.assignedElements().some((el) => el.contains(node));
+  }
+  #getTargetElements() {
+    return this.#$target.assignedElements().filter((el) => el instanceof HTMLElement);
+  }
+  #isFocusableOutsideTarget(el) {
+    if (this.#targetContains(el) || this.shadowRoot?.contains(el) === true || this.#isFocusInFloatingLayer(el)) {
+      return false;
+    }
+    return el.matches(FOCUSABLE_OUTSIDE_TARGET_SELECTOR);
+  }
+  #isFocusInFloatingLayer(el) {
+    return el.tagName === "SINCH-POP" || el.tagName === "SINCH-TOOLTIP";
+  }
+  #clearFocusSuppression() {
+    this.#suppressFocusIn = false;
+    this.#isSuspendedByHover = false;
+    if (this.#suppressedFocusOutArmed) {
+      this.#$target.removeEventListener("focusout", this.#onSuppressedFocusOut);
+      this.#suppressedFocusOutArmed = false;
+    }
+  }
+  #clearTrackedFocus() {
+    this.#hasFocus = false;
+    if (focusedTooltip === this) {
+      focusedTooltip = null;
+    }
+    if (suspendedFocusedTooltip === this) {
+      suspendedFocusedTooltip = null;
+    }
+    this.#clearFocusSuppression();
+  }
+  #armSuppressedFocusOut() {
+    if (this.#suppressedFocusOutArmed || this.#controller === null) {
+      return;
     }
+    this.#suppressedFocusOutArmed = true;
+    const options = { signal: this.#controller.signal };
+    this.#$target.addEventListener("focusout", this.#onSuppressedFocusOut, options);
+  }
+  #onSuppressedFocusOut = (e) => {
+    if (e.relatedTarget instanceof Node) {
+      if (this.#targetContains(e.relatedTarget) || this.shadowRoot?.contains(e.relatedTarget) === true) {
+        return;
+      }
+    }
+    requestAnimationFrame(() => {
+      if (!this.isDomConnected) {
+        return;
+      }
+      if (this.#targetContainsFocus()) {
+        return;
+      }
+      if (this.#isSuspendedByHover) {
+        if (e.relatedTarget instanceof HTMLElement && this.#isFocusInFloatingLayer(e.relatedTarget)) {
+          return;
+        }
+        const activeEl2 = document.activeElement;
+        if (activeEl2 instanceof HTMLElement && this.#isFocusInFloatingLayer(activeEl2)) {
+          return;
+        }
+        if (activeEl2 instanceof HTMLElement && this.#isFocusableOutsideTarget(activeEl2)) {
+          this.#clearTrackedFocus();
+        }
+        return;
+      }
+      const activeEl = document.activeElement;
+      if (activeEl instanceof HTMLElement && this.#isFocusInFloatingLayer(activeEl)) {
+        return;
+      }
+      this.#clearTrackedFocus();
+    });
   };
   #onScroll = () => {
+    if (this.#hasFocus) {
+      return;
+    }
     this.#tooltipState.destroy();
   };
   // Tooltip begins to wait for SHOW_DELAY on mouseenter
@@ -4185,6 +4418,7 @@ class Tooltip extends NectaryElement {
   // SHOW_DELAY ended, tooltip can be shown with animation
   #onStateShowEnd = () => {
     const revealRequestId = ++this.#revealRequestId;
+    activeTooltip = this;
     this.#dispatchShowEvent();
     updateBooleanAttribute(this.#$pop, "open", true);
     this.#schedulePlacement();
@@ -4258,12 +4492,30 @@ class Tooltip extends NectaryElement {
       this.#dispatchHideEvent();
       updateBooleanAttribute(this.#$pop, "open", false);
     }
+    if (activeTooltip === this) {
+      activeTooltip = null;
+    }
+    if (!this.#isSuspendedByHover) {
+      if (!this.#targetContainsFocus()) {
+        this.#clearTrackedFocus();
+      }
+    }
     this.#resetTipOrientation();
     this.#resetContentOffset();
     this.#zeroDimensionPlacementRetries = 0;
     this.#unsubscribeMouseLeaveEvents();
     this.#unsubscribeScroll();
+    if (!this.#isPointerWithinHoverSurface()) {
+      this.#releaseHoverOwnership();
+    }
+    if (!this.#hasFocus) {
+      this.#resumeFocusedTooltip();
+    }
   };
+  #targetContainsFocus() {
+    const activeEl = document.activeElement;
+    return activeEl instanceof Node && this.#targetContains(activeEl);
+  }
   #resetTipOrientation() {
     this.#$tip.style.top = "";
     this.#$tip.style.left = "";
@@ -4410,28 +4662,64 @@ class Tooltip extends NectaryElement {
     if (!this.isDomConnected || this.#isSubscribed) {
       return;
     }
-    this.#$target.addEventListener("mouseenter", this.#onMouseEnter, {
-      signal: this.#controller.signal
+    const options = { signal: this.#controller.signal };
+    this.#targetElements = this.#getTargetElements();
+    if (this.#targetElements.length === 0) {
+      requestAnimationFrame(() => {
+        if (!this.isDomConnected || this.#isSubscribed || this.text.length === 0) {
+          return;
+        }
+        this.#subscribeMouseEnterEvent();
+      });
+      return;
+    }
+    this.#targetElements.forEach((el) => {
+      el.addEventListener("mouseenter", this.#onMouseEnter, options);
     });
+    this.#$target.addEventListener("focusin", this.#onFocusIn, options);
     this.#isSubscribed = true;
   }
   #unsubscribeMouseEnterEvent() {
-    this.#$target.removeEventListener("mouseenter", this.#onMouseEnter);
+    this.#targetElements.forEach((el) => {
+      el.removeEventListener("mouseenter", this.#onMouseEnter);
+    });
+    this.#$target.removeEventListener("focusin", this.#onFocusIn);
+    this.#targetElements = [];
     this.#isSubscribed = false;
   }
   #subscribeMouseLeaveEvents() {
     const options = { signal: this.#controller.signal };
-    this.#$target.addEventListener("mousedown", this.#onMouseDown, options);
-    this.#$target.addEventListener("mouseleave", this.#onMouseLeave, options);
-    this.#$contentWrapper.addEventListener("mouseenter", this.#onMouseEnter, options);
+    this.#targetElements.forEach((el) => {
+      el.addEventListener("mousedown", this.#onMouseDown, options);
+      el.addEventListener("mouseleave", this.#onMouseLeave, options);
+    });
+    this.#$target.addEventListener("focusout", this.#onFocusOut, options);
+    this.#$contentWrapper.addEventListener("mouseenter", this.#onContentMouseEnter, options);
     this.#$contentWrapper.addEventListener("mouseleave", this.#onMouseLeave, options);
   }
   #unsubscribeMouseLeaveEvents() {
-    this.#$target.removeEventListener("mousedown", this.#onMouseDown);
-    this.#$target.removeEventListener("mouseleave", this.#onMouseLeave);
-    this.#$contentWrapper.removeEventListener("mouseenter", this.#onMouseEnter);
+    this.#targetElements.forEach((el) => {
+      el.removeEventListener("mousedown", this.#onMouseDown);
+      el.removeEventListener("mouseleave", this.#onMouseLeave);
+    });
+    this.#$target.removeEventListener("focusout", this.#onFocusOut);
+    this.#$contentWrapper.removeEventListener("mouseenter", this.#onContentMouseEnter);
     this.#$contentWrapper.removeEventListener("mouseleave", this.#onMouseLeave);
   }
+  #onTargetSlotChange = () => {
+    if (!this.isDomConnected || this.text.length === 0) {
+      return;
+    }
+    const isOpen = this.#isOpen();
+    if (this.#isSubscribed) {
+      this.#unsubscribeMouseLeaveEvents();
+      this.#unsubscribeMouseEnterEvent();
+    }
+    this.#subscribeMouseEnterEvent();
+    if (isOpen) {
+      this.#subscribeMouseLeaveEvents();
+    }
+  };
   #subscribeScroll() {
     window.addEventListener("wheel", this.#onScroll, true);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.31.0",
+  "version": "5.31.2",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/pop/index.d.ts

@@ -27,5 +27,6 @@ export declare class Pop extends NectaryElement {
     get footprintRect(): TRect;
     get popoverRect(): TRect;
     get shouldCloseOnBackdropClick(): boolean;
+    get shouldRestoreFocusOnClose(): boolean;
     attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
 }

package/pop/index.js

@@ -128,6 +128,9 @@ class Pop extends NectaryElement {
   get shouldCloseOnBackdropClick() {
     return !getBooleanAttribute(this, "disable-backdrop-close");
   }
+  get shouldRestoreFocusOnClose() {
+    return !getBooleanAttribute(this, "disable-focus-restore");
+  }
   attributeChangedCallback(name, oldVal, newVal) {
     if (isAttrEqual(oldVal, newVal)) {
       return;
@@ -313,7 +316,7 @@ class Pop extends NectaryElement {
     if (isNonModal && !effectiveAllowScroll) {
       this.#restoreTransferredTarget();
     }
-    if (this.#targetActiveElement !== null) {
+    if (this.shouldRestoreFocusOnClose && this.#targetActiveElement !== null) {
       if (!isElementFocused(this.#targetActiveElement)) {
         this.#$targetSlot.addEventListener("focus", this.#stopEventPropagation, true);
         this.#targetActiveElement.focus({ preventScroll: true });
@@ -328,9 +331,9 @@ class Pop extends NectaryElement {
             }
           });
         }
-        this.#targetActiveElement = null;
       }
     }
+    this.#targetActiveElement = null;
     if (!effectiveAllowScroll) {
       enableOverscroll();
     } else {

package/pop/types.d.ts

@@ -3,6 +3,8 @@ export type TSinchPopOrientation = 'top-left' | 'top-right' | 'bottom-left' | 'b
 export type TSinchPopProps = {
     /** Allow scrolling of the page when pop is open */
     'allow-scroll'?: boolean;
+    /** Skip restoring the previously focused target when the pop closes */
+    'disable-focus-restore'?: boolean;
     /** Open/close state */
     open: boolean;
     /** Orientation, where it *points to* from origin */

package/tooltip/index.js

@@ -13,10 +13,15 @@ const SHOW_DELAY_SLOW = 1e3;
 const SHOW_DELAY_FAST = 250;
 const HIDE_DELAY = 0;
 const ANIMATION_DURATION = 100;
+const FOCUSABLE_OUTSIDE_TARGET_SELECTOR = 'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable=""], [contenteditable="true"]';
 const OVERLAP_TOLERANCE = 1;
 const MAX_ZERO_DIMENSION_PLACEMENT_RETRIES = 8;
 const MIN_FIRST_REVEAL_STABILITY_FRAMES = 3;
 const MAX_FIRST_REVEAL_STABILITY_FRAMES = 6;
+let activeTooltip = null;
+let focusedTooltip = null;
+let hoveredTooltip = null;
+let suspendedFocusedTooltip = null;
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Tooltip extends NectaryElement {
@@ -26,10 +31,15 @@ class Tooltip extends NectaryElement {
   #$contentWrapper;
   #$tip;
   #$target;
+  #targetElements = [];
   #resizeObserver = null;
   #tooltipState;
   #animation = null;
   #shouldReduceMotion = false;
+  #hasFocus = false;
+  #suppressFocusIn = false;
+  #suppressedFocusOutArmed = false;
+  #isSuspendedByHover = false;
   #isSubscribed = false;
   #controller;
   #placementScheduled = false;
@@ -66,6 +76,7 @@ class Tooltip extends NectaryElement {
     };
     this.setAttribute("role", "tooltip");
     this.#$pop.addEventListener("-close", this.#onPopClose, options);
+    this.#$target.addEventListener("slotchange", this.#onTargetSlotChange, options);
     this.addEventListener("-show", this.#onShowReactHandler, options);
     this.addEventListener("-hide", this.#onHideReactHandler, options);
     this.#resizeObserver = new ResizeObserver(() => {
@@ -74,10 +85,23 @@ class Tooltip extends NectaryElement {
     this.#resizeObserver.observe(this.#$content);
     updateAttribute(this.#$pop, "orientation", getPopOrientation(this.orientation));
     updateBooleanAttribute(this.#$pop, "hide-outside-viewport", !this.showOutsideViewport);
+    updateBooleanAttribute(this.#$pop, "disable-focus-restore", true);
     this.#updateText();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
+    if (activeTooltip === this) {
+      activeTooltip = null;
+    }
+    if (focusedTooltip === this) {
+      focusedTooltip = null;
+    }
+    if (hoveredTooltip === this) {
+      hoveredTooltip = null;
+    }
+    if (suspendedFocusedTooltip === this) {
+      suspendedFocusedTooltip = null;
+    }
     this.#tooltipState.destroy();
     this.#controller.abort();
     this.#controller = null;
@@ -195,14 +219,217 @@ class Tooltip extends NectaryElement {
     this.#tooltipState.destroy();
   };
   #onMouseEnter = () => {
+    this.#claimHoverOwnership();
+    this.#suspendFocusedTooltip();
+    this.#closeActiveTooltip();
+    this.#tooltipState.show();
+  };
+  #onContentMouseEnter = () => {
+    this.#claimHoverOwnership();
+    if (this.#hasFocus) {
+      return;
+    }
+    this.#suspendFocusedTooltip();
+    this.#closeActiveTooltip();
     this.#tooltipState.show();
   };
-  #onMouseLeave = (e) => {
-    if (!this.#isOpen() || e.relatedTarget !== this.#$contentWrapper && e.relatedTarget !== this.#$target) {
+  #onFocusIn = () => {
+    if (this.#suppressFocusIn) {
+      return;
+    }
+    this.#closeFocusedTooltip();
+    this.#closeActiveTooltip();
+    this.#hasFocus = true;
+    focusedTooltip = this;
+    this.#tooltipState.show();
+  };
+  #closeFocusedTooltip() {
+    if (!this.#isOtherUncontrolledTooltip(focusedTooltip)) {
+      return;
+    }
+    const previousFocusedTooltip = focusedTooltip;
+    previousFocusedTooltip.#clearTrackedFocus();
+    previousFocusedTooltip.#tooltipState.destroy();
+  }
+  #closeActiveTooltip() {
+    if (this.#isOtherUncontrolledTooltip(activeTooltip) && !activeTooltip.#hasFocus) {
+      activeTooltip.#tooltipState.destroy();
+    }
+  }
+  #suspendFocusedTooltip() {
+    if (this.#isOtherUncontrolledTooltip(focusedTooltip)) {
+      suspendedFocusedTooltip = focusedTooltip;
+      focusedTooltip.#suppressFocusIn = true;
+      focusedTooltip.#isSuspendedByHover = true;
+      focusedTooltip.#armSuppressedFocusOut();
+      if (!focusedTooltip.#tooltipState.isInHideState) {
+        focusedTooltip.#tooltipState.destroy();
+      }
+    }
+  }
+  #resumeFocusedTooltip() {
+    const tooltipToResume = suspendedFocusedTooltip;
+    if (tooltipToResume === null || tooltipToResume === this) {
+      return;
+    }
+    if (hoveredTooltip !== null) {
+      if (hoveredTooltip === this && !this.#isPointerWithinHoverSurface()) {
+        this.#releaseHoverOwnership();
+      } else {
+        return;
+      }
+    }
+    if (!tooltipToResume.#isSuspendedByHover) {
+      if (suspendedFocusedTooltip === tooltipToResume) {
+        suspendedFocusedTooltip = null;
+      }
+      return;
+    }
+    const activeEl = document.activeElement;
+    if (activeEl instanceof HTMLElement && tooltipToResume.#isFocusableOutsideTarget(activeEl)) {
+      tooltipToResume.#clearTrackedFocus();
+      return;
+    }
+    tooltipToResume.#clearFocusSuppression();
+    tooltipToResume.#hasFocus = true;
+    focusedTooltip = tooltipToResume;
+    suspendedFocusedTooltip = null;
+    tooltipToResume.#tooltipState.show();
+  }
+  #isOtherUncontrolledTooltip(tooltip) {
+    return tooltip !== null && tooltip !== this && tooltip.isOpenedControlled !== true;
+  }
+  #claimHoverOwnership() {
+    hoveredTooltip = this;
+  }
+  #releaseHoverOwnership() {
+    if (hoveredTooltip === this) {
+      hoveredTooltip = null;
+    }
+  }
+  #isPointerWithinHoverSurface() {
+    return this.#$contentWrapper.matches(":hover") || this.#$target.assignedElements().some((el) => el.matches(":hover"));
+  }
+  #finalizeFocusOut() {
+    if (!this.isDomConnected) {
+      return;
+    }
+    const activeEl = document.activeElement;
+    if (activeEl instanceof Node) {
+      if (this.#targetContains(activeEl) || this.shadowRoot?.contains(activeEl) === true) {
+        return;
+      }
+    }
+    this.#clearTrackedFocus();
+    this.#tooltipState.hide();
+  }
+  #onFocusOut = (e) => {
+    if (this.#isSuspendedByHover) {
+      return;
+    }
+    if (e.relatedTarget instanceof Node) {
+      if (this.#targetContains(e.relatedTarget) || this.shadowRoot?.contains(e.relatedTarget) === true) {
+        return;
+      }
+    }
+    requestAnimationFrame(() => {
+      this.#finalizeFocusOut();
+    });
+  };
+  #onMouseLeave = () => {
+    requestAnimationFrame(() => {
+      if (!this.isDomConnected) {
+        return;
+      }
+      if (this.#isPointerWithinHoverSurface()) {
+        this.#claimHoverOwnership();
+        return;
+      }
+      this.#releaseHoverOwnership();
+      if (this.#hasFocus) {
+        return;
+      }
       this.#tooltipState.hide();
+    });
+  };
+  #targetContains(node) {
+    return this.#$target.assignedElements().some((el) => el.contains(node));
+  }
+  #getTargetElements() {
+    return this.#$target.assignedElements().filter((el) => el instanceof HTMLElement);
+  }
+  #isFocusableOutsideTarget(el) {
+    if (this.#targetContains(el) || this.shadowRoot?.contains(el) === true || this.#isFocusInFloatingLayer(el)) {
+      return false;
+    }
+    return el.matches(FOCUSABLE_OUTSIDE_TARGET_SELECTOR);
+  }
+  #isFocusInFloatingLayer(el) {
+    return el.tagName === "SINCH-POP" || el.tagName === "SINCH-TOOLTIP";
+  }
+  #clearFocusSuppression() {
+    this.#suppressFocusIn = false;
+    this.#isSuspendedByHover = false;
+    if (this.#suppressedFocusOutArmed) {
+      this.#$target.removeEventListener("focusout", this.#onSuppressedFocusOut);
+      this.#suppressedFocusOutArmed = false;
+    }
+  }
+  #clearTrackedFocus() {
+    this.#hasFocus = false;
+    if (focusedTooltip === this) {
+      focusedTooltip = null;
+    }
+    if (suspendedFocusedTooltip === this) {
+      suspendedFocusedTooltip = null;
+    }
+    this.#clearFocusSuppression();
+  }
+  #armSuppressedFocusOut() {
+    if (this.#suppressedFocusOutArmed || this.#controller === null) {
+      return;
+    }
+    this.#suppressedFocusOutArmed = true;
+    const options = { signal: this.#controller.signal };
+    this.#$target.addEventListener("focusout", this.#onSuppressedFocusOut, options);
+  }
+  #onSuppressedFocusOut = (e) => {
+    if (e.relatedTarget instanceof Node) {
+      if (this.#targetContains(e.relatedTarget) || this.shadowRoot?.contains(e.relatedTarget) === true) {
+        return;
+      }
     }
+    requestAnimationFrame(() => {
+      if (!this.isDomConnected) {
+        return;
+      }
+      if (this.#targetContainsFocus()) {
+        return;
+      }
+      if (this.#isSuspendedByHover) {
+        if (e.relatedTarget instanceof HTMLElement && this.#isFocusInFloatingLayer(e.relatedTarget)) {
+          return;
+        }
+        const activeEl2 = document.activeElement;
+        if (activeEl2 instanceof HTMLElement && this.#isFocusInFloatingLayer(activeEl2)) {
+          return;
+        }
+        if (activeEl2 instanceof HTMLElement && this.#isFocusableOutsideTarget(activeEl2)) {
+          this.#clearTrackedFocus();
+        }
+        return;
+      }
+      const activeEl = document.activeElement;
+      if (activeEl instanceof HTMLElement && this.#isFocusInFloatingLayer(activeEl)) {
+        return;
+      }
+      this.#clearTrackedFocus();
+    });
   };
   #onScroll = () => {
+    if (this.#hasFocus) {
+      return;
+    }
     this.#tooltipState.destroy();
   };
   // Tooltip begins to wait for SHOW_DELAY on mouseenter
@@ -215,6 +442,7 @@ class Tooltip extends NectaryElement {
   // SHOW_DELAY ended, tooltip can be shown with animation
   #onStateShowEnd = () => {
     const revealRequestId = ++this.#revealRequestId;
+    activeTooltip = this;
     this.#dispatchShowEvent();
     updateBooleanAttribute(this.#$pop, "open", true);
     this.#schedulePlacement();
@@ -288,12 +516,30 @@ class Tooltip extends NectaryElement {
       this.#dispatchHideEvent();
       updateBooleanAttribute(this.#$pop, "open", false);
     }
+    if (activeTooltip === this) {
+      activeTooltip = null;
+    }
+    if (!this.#isSuspendedByHover) {
+      if (!this.#targetContainsFocus()) {
+        this.#clearTrackedFocus();
+      }
+    }
     this.#resetTipOrientation();
     this.#resetContentOffset();
     this.#zeroDimensionPlacementRetries = 0;
     this.#unsubscribeMouseLeaveEvents();
     this.#unsubscribeScroll();
+    if (!this.#isPointerWithinHoverSurface()) {
+      this.#releaseHoverOwnership();
+    }
+    if (!this.#hasFocus) {
+      this.#resumeFocusedTooltip();
+    }
   };
+  #targetContainsFocus() {
+    const activeEl = document.activeElement;
+    return activeEl instanceof Node && this.#targetContains(activeEl);
+  }
   #resetTipOrientation() {
     this.#$tip.style.top = "";
     this.#$tip.style.left = "";
@@ -440,28 +686,64 @@ class Tooltip extends NectaryElement {
     if (!this.isDomConnected || this.#isSubscribed) {
       return;
     }
-    this.#$target.addEventListener("mouseenter", this.#onMouseEnter, {
-      signal: this.#controller.signal
+    const options = { signal: this.#controller.signal };
+    this.#targetElements = this.#getTargetElements();
+    if (this.#targetElements.length === 0) {
+      requestAnimationFrame(() => {
+        if (!this.isDomConnected || this.#isSubscribed || this.text.length === 0) {
+          return;
+        }
+        this.#subscribeMouseEnterEvent();
+      });
+      return;
+    }
+    this.#targetElements.forEach((el) => {
+      el.addEventListener("mouseenter", this.#onMouseEnter, options);
     });
+    this.#$target.addEventListener("focusin", this.#onFocusIn, options);
     this.#isSubscribed = true;
   }
   #unsubscribeMouseEnterEvent() {
-    this.#$target.removeEventListener("mouseenter", this.#onMouseEnter);
+    this.#targetElements.forEach((el) => {
+      el.removeEventListener("mouseenter", this.#onMouseEnter);
+    });
+    this.#$target.removeEventListener("focusin", this.#onFocusIn);
+    this.#targetElements = [];
     this.#isSubscribed = false;
   }
   #subscribeMouseLeaveEvents() {
     const options = { signal: this.#controller.signal };
-    this.#$target.addEventListener("mousedown", this.#onMouseDown, options);
-    this.#$target.addEventListener("mouseleave", this.#onMouseLeave, options);
-    this.#$contentWrapper.addEventListener("mouseenter", this.#onMouseEnter, options);
+    this.#targetElements.forEach((el) => {
+      el.addEventListener("mousedown", this.#onMouseDown, options);
+      el.addEventListener("mouseleave", this.#onMouseLeave, options);
+    });
+    this.#$target.addEventListener("focusout", this.#onFocusOut, options);
+    this.#$contentWrapper.addEventListener("mouseenter", this.#onContentMouseEnter, options);
     this.#$contentWrapper.addEventListener("mouseleave", this.#onMouseLeave, options);
   }
   #unsubscribeMouseLeaveEvents() {
-    this.#$target.removeEventListener("mousedown", this.#onMouseDown);
-    this.#$target.removeEventListener("mouseleave", this.#onMouseLeave);
-    this.#$contentWrapper.removeEventListener("mouseenter", this.#onMouseEnter);
+    this.#targetElements.forEach((el) => {
+      el.removeEventListener("mousedown", this.#onMouseDown);
+      el.removeEventListener("mouseleave", this.#onMouseLeave);
+    });
+    this.#$target.removeEventListener("focusout", this.#onFocusOut);
+    this.#$contentWrapper.removeEventListener("mouseenter", this.#onContentMouseEnter);
     this.#$contentWrapper.removeEventListener("mouseleave", this.#onMouseLeave);
   }
+  #onTargetSlotChange = () => {
+    if (!this.isDomConnected || this.text.length === 0) {
+      return;
+    }
+    const isOpen = this.#isOpen();
+    if (this.#isSubscribed) {
+      this.#unsubscribeMouseLeaveEvents();
+      this.#unsubscribeMouseEnterEvent();
+    }
+    this.#subscribeMouseEnterEvent();
+    if (isOpen) {
+      this.#subscribeMouseLeaveEvents();
+    }
+  };
   #subscribeScroll() {
     window.addEventListener("wheel", this.#onScroll, true);
   }

package/tooltip/tooltip-state.d.ts

@@ -10,6 +10,7 @@ type TTooltipStateOptions = {
 };
 export declare class TooltipState {
     #private;
+    get isInHideState(): boolean;
     constructor(options: TTooltipStateOptions);
     updateOptions(options: Partial<TTooltipStateOptions>): void;
     show(): void;

package/tooltip/tooltip-state.js

@@ -2,6 +2,9 @@ class TooltipState {
   #timerId = null;
   #state = "hide";
   #options;
+  get isInHideState() {
+    return this.#state === "hide";
+  }
   constructor(options) {
     this.#options = options;
   }