@nectary/components 5.30.0 → 5.31.1

package/bundle.js

@@ -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();
   };
-  #onMouseLeave = (e) => {
-    if (!this.#isOpen() || e.relatedTarget !== this.#$contentWrapper && e.relatedTarget !== this.#$target) {
+  #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();
+  };
+  #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);
   }
@@ -12599,7 +12887,7 @@ class SelectButton extends NectaryElement {
   };
 }
 defineCustomElement("sinch-select-button", SelectButton);
-const templateHTML$i = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;min-height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;background-color:var(--sinch-comp-select-menu-color-default-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-select-menu-size-icon)}#content{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-option)}#icon-check{display:none;margin-right:-6px}:host([data-checked]) #icon-check{display:block}:host([data-selected])>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-selected)}:host(:hover)>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-hover)}:host([disabled])>#wrapper{cursor:initial;pointer-events:none;background-color:var(--sinch-comp-select-menu-color-disabled-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-disabled-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-disabled-icon-initial)}::slotted([slot=icon]){margin-left:-6px}::slotted([slot=content]){pointer-events:none;flex:1}</style><div id="wrapper"><slot name="icon"></slot><slot name="content"></slot><sinch-text id="content" type="m" ellipsis></sinch-text><sinch-icon icons-version="2" name="fa-check" id="icon-check"></sinch-icon></div>';
+const templateHTML$i = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;min-height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;background-color:var(--sinch-comp-select-menu-color-default-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-select-menu-size-icon)}#content{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-option)}#icon-check{display:none;margin-right:-6px}:host([data-checked]:not([action])) #icon-check{display:block}:host([data-selected])>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-selected)}:host(:hover)>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-hover)}:host([disabled])>#wrapper{cursor:initial;pointer-events:none;background-color:var(--sinch-comp-select-menu-color-disabled-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-disabled-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-disabled-icon-initial)}::slotted([slot=icon]){margin-left:-6px}::slotted([slot=content]){pointer-events:none;flex:1}</style><div id="wrapper"><slot name="icon"></slot><slot name="content"></slot><sinch-text id="content" type="m" ellipsis></sinch-text><sinch-icon icons-version="2" name="fa-check" id="icon-check"></sinch-icon></div>';
 const template$i = document.createElement("template");
 template$i.innerHTML = templateHTML$i;
 class SelectMenuOption extends NectaryElement {
@@ -12665,6 +12953,12 @@ class SelectMenuOption extends NectaryElement {
   get disabled() {
     return getBooleanAttribute(this, "disabled");
   }
+  set action(isAction) {
+    updateBooleanAttribute(this, "action", isAction);
+  }
+  get action() {
+    return getBooleanAttribute(this, "action");
+  }
   matchesSearch(searchValue) {
     return this.text.toLowerCase().includes(searchValue.toLowerCase());
   }
@@ -12736,6 +13030,7 @@ class SelectMenu extends NectaryElement {
       options
     );
     this.addEventListener("-change", this.#onChangeReactHandler, options);
+    this.addEventListener("-action", this.#onActionReactHandler, options);
     subscribeContext(
       this,
       "keydown",
@@ -12894,7 +13189,7 @@ class SelectMenu extends NectaryElement {
     this.focus();
     if (!isTargetEqual(e, this.#$listbox) && !getBooleanAttribute($elem, "disabled")) {
       this.#selectOption($elem);
-      this.#dispatchChangeEvent($elem);
+      this.#handleDispatch($elem);
     }
   };
   #onSearchChange = (e) => {
@@ -12959,7 +13254,7 @@ class SelectMenu extends NectaryElement {
         const $option = this.#findSelectedOption();
         if ($option !== null) {
           e.preventDefault();
-          this.#dispatchChangeEvent($option);
+          this.#handleDispatch($option);
         }
         break;
       }
@@ -12975,6 +13270,13 @@ class SelectMenu extends NectaryElement {
       }
     }
   }
+  #handleDispatch = (option) => {
+    if (getBooleanAttribute(option, "action")) {
+      this.#dispatchActionEvent(option);
+    } else {
+      this.#dispatchChangeEvent(option);
+    }
+  };
   #onOptionSlotChange = () => {
     const searchable = this.searchable;
     const options = this.#getOptionElements();
@@ -12990,7 +13292,7 @@ class SelectMenu extends NectaryElement {
     if (this.multiple) {
       const values = unpackCsv(csv);
       for (const $option of this.#getOptionElements()) {
-        const isChecked = !getBooleanAttribute($option, "disabled") && values.includes(getAttribute($option, "value", ""));
+        const isChecked = !getBooleanAttribute($option, "disabled") && !getBooleanAttribute($option, "action") && values.includes(getAttribute($option, "value", ""));
         updateBooleanAttribute($option, "data-checked", isChecked);
       }
       const formData = new FormData();
@@ -13001,7 +13303,7 @@ class SelectMenu extends NectaryElement {
     } else {
       const value = getFirstCsvValue(csv);
       for (const $option of this.#getOptionElements()) {
-        const isChecked = !getBooleanAttribute($option, "disabled") && value === getAttribute($option, "value", "");
+        const isChecked = !getBooleanAttribute($option, "disabled") && !getBooleanAttribute($option, "action") && value === getAttribute($option, "value", "");
         updateBooleanAttribute($option, "data-checked", isChecked);
       }
       setFormValue(this.#internals, value ?? "");
@@ -13090,7 +13392,7 @@ class SelectMenu extends NectaryElement {
     const elements = this.#getOptionElements();
     const value = this.multiple ? getFirstCsvValue(this.value) : this.value;
     for (const $el of elements) {
-      if (!getBooleanAttribute($el, "disabled") && getAttribute($el, "value") === value) {
+      if (!getBooleanAttribute($el, "disabled") && !getBooleanAttribute($el, "action") && getAttribute($el, "value") === value) {
         return $el;
       }
     }
@@ -13108,10 +13410,17 @@ class SelectMenu extends NectaryElement {
     ) : value;
     this.dispatchEvent(new CustomEvent("-change", { detail: result }));
   }
+  #dispatchActionEvent($opt) {
+    this.dispatchEvent(new CustomEvent("-action", { detail: $opt.value }));
+  }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
     getReactEventHandler(this, "onChange")?.(e);
   };
+  #onActionReactHandler = (e) => {
+    getReactEventHandler(this, "on-action")?.(e);
+    getReactEventHandler(this, "onAction")?.(e);
+  };
   #onSearchChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-search-change")?.(e);
     getReactEventHandler(this, "onSearchChange")?.(e);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.30.0",
+  "version": "5.31.1",
   "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/select-menu/index.js

@@ -71,6 +71,7 @@ class SelectMenu extends NectaryElement {
       options
     );
     this.addEventListener("-change", this.#onChangeReactHandler, options);
+    this.addEventListener("-action", this.#onActionReactHandler, options);
     subscribeContext(
       this,
       "keydown",
@@ -229,7 +230,7 @@ class SelectMenu extends NectaryElement {
     this.focus();
     if (!isTargetEqual(e, this.#$listbox) && !getBooleanAttribute($elem, "disabled")) {
       this.#selectOption($elem);
-      this.#dispatchChangeEvent($elem);
+      this.#handleDispatch($elem);
     }
   };
   #onSearchChange = (e) => {
@@ -294,7 +295,7 @@ class SelectMenu extends NectaryElement {
         const $option = this.#findSelectedOption();
         if ($option !== null) {
           e.preventDefault();
-          this.#dispatchChangeEvent($option);
+          this.#handleDispatch($option);
         }
         break;
       }
@@ -310,6 +311,13 @@ class SelectMenu extends NectaryElement {
       }
     }
   }
+  #handleDispatch = (option) => {
+    if (getBooleanAttribute(option, "action")) {
+      this.#dispatchActionEvent(option);
+    } else {
+      this.#dispatchChangeEvent(option);
+    }
+  };
   #onOptionSlotChange = () => {
     const searchable = this.searchable;
     const options = this.#getOptionElements();
@@ -325,7 +333,7 @@ class SelectMenu extends NectaryElement {
     if (this.multiple) {
       const values = unpackCsv(csv);
       for (const $option of this.#getOptionElements()) {
-        const isChecked = !getBooleanAttribute($option, "disabled") && values.includes(getAttribute($option, "value", ""));
+        const isChecked = !getBooleanAttribute($option, "disabled") && !getBooleanAttribute($option, "action") && values.includes(getAttribute($option, "value", ""));
         updateBooleanAttribute($option, "data-checked", isChecked);
       }
       const formData = new FormData();
@@ -336,7 +344,7 @@ class SelectMenu extends NectaryElement {
     } else {
       const value = getFirstCsvValue(csv);
       for (const $option of this.#getOptionElements()) {
-        const isChecked = !getBooleanAttribute($option, "disabled") && value === getAttribute($option, "value", "");
+        const isChecked = !getBooleanAttribute($option, "disabled") && !getBooleanAttribute($option, "action") && value === getAttribute($option, "value", "");
         updateBooleanAttribute($option, "data-checked", isChecked);
       }
       setFormValue(this.#internals, value ?? "");
@@ -425,7 +433,7 @@ class SelectMenu extends NectaryElement {
     const elements = this.#getOptionElements();
     const value = this.multiple ? getFirstCsvValue(this.value) : this.value;
     for (const $el of elements) {
-      if (!getBooleanAttribute($el, "disabled") && getAttribute($el, "value") === value) {
+      if (!getBooleanAttribute($el, "disabled") && !getBooleanAttribute($el, "action") && getAttribute($el, "value") === value) {
         return $el;
       }
     }
@@ -443,10 +451,17 @@ class SelectMenu extends NectaryElement {
     ) : value;
     this.dispatchEvent(new CustomEvent("-change", { detail: result }));
   }
+  #dispatchActionEvent($opt) {
+    this.dispatchEvent(new CustomEvent("-action", { detail: $opt.value }));
+  }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
     getReactEventHandler(this, "onChange")?.(e);
   };
+  #onActionReactHandler = (e) => {
+    getReactEventHandler(this, "on-action")?.(e);
+    getReactEventHandler(this, "onAction")?.(e);
+  };
   #onSearchChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-search-change")?.(e);
     getReactEventHandler(this, "onSearchChange")?.(e);

package/select-menu/types.d.ts

@@ -24,6 +24,8 @@ export type TSinchSelectMenuEvents = {
     '-search-change'?: (e: CustomEvent<string>) => void;
     /** Change value handler */
     '-change'?: (e: CustomEvent<string>) => void;
+    /** Action option activated handler — detail is the action option's value */
+    '-action'?: (e: CustomEvent<string>) => void;
 };
 export type TSinchSelectMenuStyle = {
     '--sinch-comp-select-menu-color-default-title-initial'?: string;

package/select-menu-option/index.d.ts

@@ -14,5 +14,7 @@ export declare class SelectMenuOption extends NectaryElement {
     get text(): string;
     set disabled(isDisabled: boolean);
     get disabled(): boolean;
+    set action(isAction: boolean);
+    get action(): boolean;
     matchesSearch(searchValue: string): boolean;
 }

package/select-menu-option/index.js

@@ -2,7 +2,7 @@ import "../icon/index.js";
 import "../text/index.js";
 import { isAttrEqual, updateBooleanAttribute, isAttrTrue, updateExplicitBooleanAttribute, updateAttribute, getAttribute, getBooleanAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;min-height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;background-color:var(--sinch-comp-select-menu-color-default-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-select-menu-size-icon)}#content{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-option)}#icon-check{display:none;margin-right:-6px}:host([data-checked]) #icon-check{display:block}:host([data-selected])>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-selected)}:host(:hover)>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-hover)}:host([disabled])>#wrapper{cursor:initial;pointer-events:none;background-color:var(--sinch-comp-select-menu-color-disabled-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-disabled-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-disabled-icon-initial)}::slotted([slot=icon]){margin-left:-6px}::slotted([slot=content]){pointer-events:none;flex:1}</style><div id="wrapper"><slot name="icon"></slot><slot name="content"></slot><sinch-text id="content" type="m" ellipsis></sinch-text><sinch-icon icons-version="2" name="fa-check" id="icon-check"></sinch-icon></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;min-height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;background-color:var(--sinch-comp-select-menu-color-default-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-select-menu-size-icon)}#content{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-option)}#icon-check{display:none;margin-right:-6px}:host([data-checked]:not([action])) #icon-check{display:block}:host([data-selected])>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-selected)}:host(:hover)>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-hover)}:host([disabled])>#wrapper{cursor:initial;pointer-events:none;background-color:var(--sinch-comp-select-menu-color-disabled-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-disabled-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-disabled-icon-initial)}::slotted([slot=icon]){margin-left:-6px}::slotted([slot=content]){pointer-events:none;flex:1}</style><div id="wrapper"><slot name="icon"></slot><slot name="content"></slot><sinch-text id="content" type="m" ellipsis></sinch-text><sinch-icon icons-version="2" name="fa-check" id="icon-check"></sinch-icon></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class SelectMenuOption extends NectaryElement {
@@ -68,6 +68,12 @@ class SelectMenuOption extends NectaryElement {
   get disabled() {
     return getBooleanAttribute(this, "disabled");
   }
+  set action(isAction) {
+    updateBooleanAttribute(this, "action", isAction);
+  }
+  get action() {
+    return getBooleanAttribute(this, "action");
+  }
   matchesSearch(searchValue) {
     return this.text.toLowerCase().includes(searchValue.toLowerCase());
   }

package/select-menu-option/types.d.ts

@@ -6,6 +6,8 @@ export type TSinchSelectMenuOptionProps = {
     text: string;
     /** Disabled state */
     disabled?: boolean;
+    /** Marks this option as an action — activating it triggers an action event instead of changing the select value */
+    action?: boolean;
     /** Label that is used for a11y */
     'aria-label': string;
 };

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;
   }