@public-ui/hydrate 3.1.1 → 3.1.2-rc.1

package/dist/index.js

@@ -146,7 +146,7 @@ function _mergeNamespaces(n, m) {
 
 const NAMESPACE = 'kolibri';
 const BUILD = /* kolibri */ { hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
-const Env = /* kolibri */ {"kolibriVersion":"3.1.1"};
+const Env = /* kolibri */ {"kolibriVersion":"3.1.2-rc.1"};
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -25552,6 +25552,71 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
   return coords;
 }
 
+/**
+ * Resolves with an object of overflow side offsets that determine how much the
+ * element is overflowing a given clipping boundary on each side.
+ * - positive = overflowing the boundary by that number of pixels
+ * - negative = how many pixels left before it will overflow
+ * - 0 = lies flush with the boundary
+ * @see https://floating-ui.com/docs/detectOverflow
+ */
+async function detectOverflow(state, options) {
+  var _await$platform$isEle;
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    x,
+    y,
+    platform,
+    rects,
+    elements,
+    strategy
+  } = state;
+  const {
+    boundary = 'clippingAncestors',
+    rootBoundary = 'viewport',
+    elementContext = 'floating',
+    altBoundary = false,
+    padding = 0
+  } = evaluate(options, state);
+  const paddingObject = getPaddingObject(padding);
+  const altContext = elementContext === 'floating' ? 'reference' : 'floating';
+  const element = elements[altBoundary ? altContext : elementContext];
+  const clippingClientRect = rectToClientRect(await platform.getClippingRect({
+    element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
+    boundary,
+    rootBoundary,
+    strategy
+  }));
+  const rect = elementContext === 'floating' ? {
+    x,
+    y,
+    width: rects.floating.width,
+    height: rects.floating.height
+  } : rects.reference;
+  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
+  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
+    x: 1,
+    y: 1
+  } : {
+    x: 1,
+    y: 1
+  };
+  const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
+    elements,
+    rect,
+    offsetParent,
+    strategy
+  }) : rect);
+  return {
+    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
+  };
+}
+
 /**
  * Computes the `x` and `y` coordinates that will place the floating element
  * next to a given reference element.
@@ -25581,6 +25646,7 @@ const computePosition$1 = async (reference, floating, config) => {
   let middlewareData = {};
   let resetCount = 0;
   for (let i = 0; i < validMiddleware.length; i++) {
+    var _platform$detectOverf;
     const {
       name,
       fn
@@ -25598,7 +25664,10 @@ const computePosition$1 = async (reference, floating, config) => {
       strategy,
       middlewareData,
       rects,
-      platform,
+      platform: {
+        ...platform,
+        detectOverflow: (_platform$detectOverf = platform.detectOverflow) != null ? _platform$detectOverf : detectOverflow
+      },
       elements: {
         reference,
         floating
@@ -25643,71 +25712,6 @@ const computePosition$1 = async (reference, floating, config) => {
   };
 };
 
-/**
- * Resolves with an object of overflow side offsets that determine how much the
- * element is overflowing a given clipping boundary on each side.
- * - positive = overflowing the boundary by that number of pixels
- * - negative = how many pixels left before it will overflow
- * - 0 = lies flush with the boundary
- * @see https://floating-ui.com/docs/detectOverflow
- */
-async function detectOverflow(state, options) {
-  var _await$platform$isEle;
-  if (options === void 0) {
-    options = {};
-  }
-  const {
-    x,
-    y,
-    platform,
-    rects,
-    elements,
-    strategy
-  } = state;
-  const {
-    boundary = 'clippingAncestors',
-    rootBoundary = 'viewport',
-    elementContext = 'floating',
-    altBoundary = false,
-    padding = 0
-  } = evaluate(options, state);
-  const paddingObject = getPaddingObject(padding);
-  const altContext = elementContext === 'floating' ? 'reference' : 'floating';
-  const element = elements[altBoundary ? altContext : elementContext];
-  const clippingClientRect = rectToClientRect(await platform.getClippingRect({
-    element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
-    boundary,
-    rootBoundary,
-    strategy
-  }));
-  const rect = elementContext === 'floating' ? {
-    x,
-    y,
-    width: rects.floating.width,
-    height: rects.floating.height
-  } : rects.reference;
-  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
-  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
-    x: 1,
-    y: 1
-  } : {
-    x: 1,
-    y: 1
-  };
-  const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
-    elements,
-    rect,
-    offsetParent,
-    strategy
-  }) : rect);
-  return {
-    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
-    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
-    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
-    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
-  };
-}
-
 /**
  * Provides data to position an inner element of the floating element so that it
  * appears centered to the reference element.
@@ -25840,7 +25844,7 @@ const flip$1 = function (options) {
         fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
       }
       const placements = [initialPlacement, ...fallbackPlacements];
-      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const overflow = await platform.detectOverflow(state, detectOverflowOptions);
       const overflows = [];
       let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
       if (checkMainAxis) {
@@ -26024,7 +26028,8 @@ const shift$1 = function (options) {
       const {
         x,
         y,
-        placement
+        placement,
+        platform
       } = state;
       const {
         mainAxis: checkMainAxis = true,
@@ -26047,7 +26052,7 @@ const shift$1 = function (options) {
         x,
         y
       };
-      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const overflow = await platform.detectOverflow(state, detectOverflowOptions);
       const crossAxis = getSideAxis(getSide(placement));
       const mainAxis = getOppositeAxis(crossAxis);
       let mainAxisCoord = coords[mainAxis];
@@ -31000,44 +31005,17 @@ class KolTooltipWc {
                 void this.hideTooltip();
             }
         };
-        this.handleMouseEnter = () => {
-            const isNewVisit = this.isNewVisit();
-            this.hasMouseIn = true;
-            if (isNewVisit) {
-                this.isHiddenForCurrentVisit = false;
-            }
-            this.showOrHideTooltip();
-        };
-        this.handleMouseleave = (event) => {
-            var _a, _b;
-            this.hasMouseIn = (_b = (_a = this.tooltipElement) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)) !== null && _b !== void 0 ? _b : false;
-            this.resetHideFlag();
-            this.showOrHideTooltip();
-        };
-        this.handleFocusIn = () => {
-            const isNewVisit = this.isNewVisit();
-            this.hasFocusIn = true;
-            if (isNewVisit) {
-                this.isHiddenForCurrentVisit = false;
-            }
-            this.showOrHideTooltip();
-        };
-        this.handleFocusout = () => {
-            this.hasFocusIn = false;
-            this.resetHideFlag();
-            this.showOrHideTooltip();
-        };
         this.addListeners = (el) => {
-            el.addEventListener('mouseenter', this.handleMouseEnter);
-            el.addEventListener('mouseleave', this.handleMouseleave);
-            el.addEventListener('focusin', this.handleFocusIn);
-            el.addEventListener('focusout', this.handleFocusout);
+            el.addEventListener('mouseenter', this.handleMouseEnter.bind(this));
+            el.addEventListener('mouseleave', this.handleMouseLeave.bind(this));
+            el.addEventListener('focusin', this.handleFocusIn.bind(this));
+            el.addEventListener('focusout', this.handleFocusOut.bind(this));
         };
         this.removeListeners = (el) => {
-            el.removeEventListener('mouseenter', this.handleMouseEnter);
-            el.removeEventListener('mouseleave', this.handleMouseleave);
-            el.removeEventListener('focusin', this.handleFocusIn);
-            el.removeEventListener('focusout', this.handleFocusout);
+            el.removeEventListener('mouseenter', this.handleMouseEnter.bind(this));
+            el.removeEventListener('mouseleave', this.handleMouseLeave.bind(this));
+            el.removeEventListener('focusin', this.handleFocusIn.bind(this));
+            el.removeEventListener('focusout', this.handleFocusOut.bind(this));
         };
         this.resyncListeners = (last, next, replacePreviousSibling = false) => {
             if (last) {
@@ -31100,8 +31078,34 @@ class KolTooltipWc {
         }
         getDocument().removeEventListener('keyup', this.hideTooltipByEscape);
     }
+    handleMouseEnter() {
+        const isNewVisit = this.isNewVisit();
+        this.hasMouseIn = true;
+        if (isNewVisit) {
+            this.isHiddenForCurrentVisit = false;
+        }
+        this.showOrHideTooltip();
+    }
+    handleMouseLeave() {
+        this.hasMouseIn = false;
+        this.resetHideFlag();
+        this.showOrHideTooltip();
+    }
+    handleFocusIn() {
+        const isNewVisit = this.isNewVisit();
+        this.hasFocusIn = true;
+        if (isNewVisit) {
+            this.isHiddenForCurrentVisit = false;
+        }
+        this.showOrHideTooltip();
+    }
+    handleFocusOut() {
+        this.hasFocusIn = false;
+        this.resetHideFlag();
+        this.showOrHideTooltip();
+    }
     render() {
-        return (hAsync(Host, { key: 'a2f5eaf3bdde31f05706c525fb3382d04449877d', class: "kol-tooltip" }, this.state._label !== '' && (hAsync("div", { key: 'd29670e80057f25e00c3826a093d5baef0106ce6', class: "kol-tooltip__floating", ref: this.catchTooltipElement }, hAsync("div", { key: '5ea823469aa2fcb1c3dbf56b628445814f4fc8d0', class: "kol-tooltip__arrow", ref: this.catchArrowElement }), hAsync(KolSpanFc, { key: '49c40bebd3067ede516b5f7edc9749f52a08cf80', class: "kol-tooltip__content", id: this.state._id, badgeText: this._badgeText, label: this.state._label })))));
+        return (hAsync(Host, { key: '06b88a008110f4aa881af6b482e0a567301e8485', class: "kol-tooltip" }, hAsync("div", { key: 'f90973a436d4462581de6ee6fe819efe42fecd6c', class: "kol-tooltip__floating", hidden: this.state._label.length === 0, ref: this.catchTooltipElement }, hAsync("div", { key: 'c84c65420bd6cf538ccb2e6b5c130c2796d0ddec', class: "kol-tooltip__arrow", ref: this.catchArrowElement }), hAsync(KolSpanFc, { key: '079d51f0417933162ab521d5874d6bc40a3ab572', class: "kol-tooltip__content", id: this.state._id, badgeText: this._badgeText, label: this.state._label }))));
     }
     validateBadgeText(value) {
         validateBadgeText(this, value);
@@ -31124,14 +31128,13 @@ class KolTooltipWc {
         this.validateLabel(this._label);
     }
     handleEventListeners() {
-        var _a, _b;
-        const nextSibling = (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.previousElementSibling) !== null && _b !== void 0 ? _b : null;
-        this.resyncListeners(this.previousSibling, nextSibling, true);
+        var _a;
+        this.resyncListeners(this.previousSibling, (_a = this.host) === null || _a === void 0 ? void 0 : _a.previousElementSibling, true);
         this.resyncListeners(this.tooltipElement, this.tooltipElement);
     }
     connectedCallback() {
-        var _a, _b;
-        this.previousSibling = (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.previousElementSibling) !== null && _b !== void 0 ? _b : null;
+        var _a;
+        this.previousSibling = (_a = this.host) === null || _a === void 0 ? void 0 : _a.previousElementSibling;
     }
     componentDidRender() {
         this.handleEventListeners();

package/dist/index.mjs

@@ -144,7 +144,7 @@ function _mergeNamespaces(n, m) {
 
 const NAMESPACE = 'kolibri';
 const BUILD = /* kolibri */ { hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
-const Env = /* kolibri */ {"kolibriVersion":"3.1.1"};
+const Env = /* kolibri */ {"kolibriVersion":"3.1.2-rc.1"};
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -25550,6 +25550,71 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
   return coords;
 }
 
+/**
+ * Resolves with an object of overflow side offsets that determine how much the
+ * element is overflowing a given clipping boundary on each side.
+ * - positive = overflowing the boundary by that number of pixels
+ * - negative = how many pixels left before it will overflow
+ * - 0 = lies flush with the boundary
+ * @see https://floating-ui.com/docs/detectOverflow
+ */
+async function detectOverflow(state, options) {
+  var _await$platform$isEle;
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    x,
+    y,
+    platform,
+    rects,
+    elements,
+    strategy
+  } = state;
+  const {
+    boundary = 'clippingAncestors',
+    rootBoundary = 'viewport',
+    elementContext = 'floating',
+    altBoundary = false,
+    padding = 0
+  } = evaluate(options, state);
+  const paddingObject = getPaddingObject(padding);
+  const altContext = elementContext === 'floating' ? 'reference' : 'floating';
+  const element = elements[altBoundary ? altContext : elementContext];
+  const clippingClientRect = rectToClientRect(await platform.getClippingRect({
+    element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
+    boundary,
+    rootBoundary,
+    strategy
+  }));
+  const rect = elementContext === 'floating' ? {
+    x,
+    y,
+    width: rects.floating.width,
+    height: rects.floating.height
+  } : rects.reference;
+  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
+  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
+    x: 1,
+    y: 1
+  } : {
+    x: 1,
+    y: 1
+  };
+  const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
+    elements,
+    rect,
+    offsetParent,
+    strategy
+  }) : rect);
+  return {
+    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
+  };
+}
+
 /**
  * Computes the `x` and `y` coordinates that will place the floating element
  * next to a given reference element.
@@ -25579,6 +25644,7 @@ const computePosition$1 = async (reference, floating, config) => {
   let middlewareData = {};
   let resetCount = 0;
   for (let i = 0; i < validMiddleware.length; i++) {
+    var _platform$detectOverf;
     const {
       name,
       fn
@@ -25596,7 +25662,10 @@ const computePosition$1 = async (reference, floating, config) => {
       strategy,
       middlewareData,
       rects,
-      platform,
+      platform: {
+        ...platform,
+        detectOverflow: (_platform$detectOverf = platform.detectOverflow) != null ? _platform$detectOverf : detectOverflow
+      },
       elements: {
         reference,
         floating
@@ -25641,71 +25710,6 @@ const computePosition$1 = async (reference, floating, config) => {
   };
 };
 
-/**
- * Resolves with an object of overflow side offsets that determine how much the
- * element is overflowing a given clipping boundary on each side.
- * - positive = overflowing the boundary by that number of pixels
- * - negative = how many pixels left before it will overflow
- * - 0 = lies flush with the boundary
- * @see https://floating-ui.com/docs/detectOverflow
- */
-async function detectOverflow(state, options) {
-  var _await$platform$isEle;
-  if (options === void 0) {
-    options = {};
-  }
-  const {
-    x,
-    y,
-    platform,
-    rects,
-    elements,
-    strategy
-  } = state;
-  const {
-    boundary = 'clippingAncestors',
-    rootBoundary = 'viewport',
-    elementContext = 'floating',
-    altBoundary = false,
-    padding = 0
-  } = evaluate(options, state);
-  const paddingObject = getPaddingObject(padding);
-  const altContext = elementContext === 'floating' ? 'reference' : 'floating';
-  const element = elements[altBoundary ? altContext : elementContext];
-  const clippingClientRect = rectToClientRect(await platform.getClippingRect({
-    element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
-    boundary,
-    rootBoundary,
-    strategy
-  }));
-  const rect = elementContext === 'floating' ? {
-    x,
-    y,
-    width: rects.floating.width,
-    height: rects.floating.height
-  } : rects.reference;
-  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
-  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
-    x: 1,
-    y: 1
-  } : {
-    x: 1,
-    y: 1
-  };
-  const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
-    elements,
-    rect,
-    offsetParent,
-    strategy
-  }) : rect);
-  return {
-    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
-    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
-    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
-    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
-  };
-}
-
 /**
  * Provides data to position an inner element of the floating element so that it
  * appears centered to the reference element.
@@ -25838,7 +25842,7 @@ const flip$1 = function (options) {
         fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
       }
       const placements = [initialPlacement, ...fallbackPlacements];
-      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const overflow = await platform.detectOverflow(state, detectOverflowOptions);
       const overflows = [];
       let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
       if (checkMainAxis) {
@@ -26022,7 +26026,8 @@ const shift$1 = function (options) {
       const {
         x,
         y,
-        placement
+        placement,
+        platform
       } = state;
       const {
         mainAxis: checkMainAxis = true,
@@ -26045,7 +26050,7 @@ const shift$1 = function (options) {
         x,
         y
       };
-      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const overflow = await platform.detectOverflow(state, detectOverflowOptions);
       const crossAxis = getSideAxis(getSide(placement));
       const mainAxis = getOppositeAxis(crossAxis);
       let mainAxisCoord = coords[mainAxis];
@@ -30998,44 +31003,17 @@ class KolTooltipWc {
                 void this.hideTooltip();
             }
         };
-        this.handleMouseEnter = () => {
-            const isNewVisit = this.isNewVisit();
-            this.hasMouseIn = true;
-            if (isNewVisit) {
-                this.isHiddenForCurrentVisit = false;
-            }
-            this.showOrHideTooltip();
-        };
-        this.handleMouseleave = (event) => {
-            var _a, _b;
-            this.hasMouseIn = (_b = (_a = this.tooltipElement) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)) !== null && _b !== void 0 ? _b : false;
-            this.resetHideFlag();
-            this.showOrHideTooltip();
-        };
-        this.handleFocusIn = () => {
-            const isNewVisit = this.isNewVisit();
-            this.hasFocusIn = true;
-            if (isNewVisit) {
-                this.isHiddenForCurrentVisit = false;
-            }
-            this.showOrHideTooltip();
-        };
-        this.handleFocusout = () => {
-            this.hasFocusIn = false;
-            this.resetHideFlag();
-            this.showOrHideTooltip();
-        };
         this.addListeners = (el) => {
-            el.addEventListener('mouseenter', this.handleMouseEnter);
-            el.addEventListener('mouseleave', this.handleMouseleave);
-            el.addEventListener('focusin', this.handleFocusIn);
-            el.addEventListener('focusout', this.handleFocusout);
+            el.addEventListener('mouseenter', this.handleMouseEnter.bind(this));
+            el.addEventListener('mouseleave', this.handleMouseLeave.bind(this));
+            el.addEventListener('focusin', this.handleFocusIn.bind(this));
+            el.addEventListener('focusout', this.handleFocusOut.bind(this));
         };
         this.removeListeners = (el) => {
-            el.removeEventListener('mouseenter', this.handleMouseEnter);
-            el.removeEventListener('mouseleave', this.handleMouseleave);
-            el.removeEventListener('focusin', this.handleFocusIn);
-            el.removeEventListener('focusout', this.handleFocusout);
+            el.removeEventListener('mouseenter', this.handleMouseEnter.bind(this));
+            el.removeEventListener('mouseleave', this.handleMouseLeave.bind(this));
+            el.removeEventListener('focusin', this.handleFocusIn.bind(this));
+            el.removeEventListener('focusout', this.handleFocusOut.bind(this));
         };
         this.resyncListeners = (last, next, replacePreviousSibling = false) => {
             if (last) {
@@ -31098,8 +31076,34 @@ class KolTooltipWc {
         }
         getDocument().removeEventListener('keyup', this.hideTooltipByEscape);
     }
+    handleMouseEnter() {
+        const isNewVisit = this.isNewVisit();
+        this.hasMouseIn = true;
+        if (isNewVisit) {
+            this.isHiddenForCurrentVisit = false;
+        }
+        this.showOrHideTooltip();
+    }
+    handleMouseLeave() {
+        this.hasMouseIn = false;
+        this.resetHideFlag();
+        this.showOrHideTooltip();
+    }
+    handleFocusIn() {
+        const isNewVisit = this.isNewVisit();
+        this.hasFocusIn = true;
+        if (isNewVisit) {
+            this.isHiddenForCurrentVisit = false;
+        }
+        this.showOrHideTooltip();
+    }
+    handleFocusOut() {
+        this.hasFocusIn = false;
+        this.resetHideFlag();
+        this.showOrHideTooltip();
+    }
     render() {
-        return (hAsync(Host, { key: 'a2f5eaf3bdde31f05706c525fb3382d04449877d', class: "kol-tooltip" }, this.state._label !== '' && (hAsync("div", { key: 'd29670e80057f25e00c3826a093d5baef0106ce6', class: "kol-tooltip__floating", ref: this.catchTooltipElement }, hAsync("div", { key: '5ea823469aa2fcb1c3dbf56b628445814f4fc8d0', class: "kol-tooltip__arrow", ref: this.catchArrowElement }), hAsync(KolSpanFc, { key: '49c40bebd3067ede516b5f7edc9749f52a08cf80', class: "kol-tooltip__content", id: this.state._id, badgeText: this._badgeText, label: this.state._label })))));
+        return (hAsync(Host, { key: '06b88a008110f4aa881af6b482e0a567301e8485', class: "kol-tooltip" }, hAsync("div", { key: 'f90973a436d4462581de6ee6fe819efe42fecd6c', class: "kol-tooltip__floating", hidden: this.state._label.length === 0, ref: this.catchTooltipElement }, hAsync("div", { key: 'c84c65420bd6cf538ccb2e6b5c130c2796d0ddec', class: "kol-tooltip__arrow", ref: this.catchArrowElement }), hAsync(KolSpanFc, { key: '079d51f0417933162ab521d5874d6bc40a3ab572', class: "kol-tooltip__content", id: this.state._id, badgeText: this._badgeText, label: this.state._label }))));
     }
     validateBadgeText(value) {
         validateBadgeText(this, value);
@@ -31122,14 +31126,13 @@ class KolTooltipWc {
         this.validateLabel(this._label);
     }
     handleEventListeners() {
-        var _a, _b;
-        const nextSibling = (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.previousElementSibling) !== null && _b !== void 0 ? _b : null;
-        this.resyncListeners(this.previousSibling, nextSibling, true);
+        var _a;
+        this.resyncListeners(this.previousSibling, (_a = this.host) === null || _a === void 0 ? void 0 : _a.previousElementSibling, true);
         this.resyncListeners(this.tooltipElement, this.tooltipElement);
     }
     connectedCallback() {
-        var _a, _b;
-        this.previousSibling = (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.previousElementSibling) !== null && _b !== void 0 ? _b : null;
+        var _a;
+        this.previousSibling = (_a = this.host) === null || _a === void 0 ? void 0 : _a.previousElementSibling;
     }
     componentDidRender() {
         this.handleEventListeners();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/hydrate",
-  "version": "3.1.1",
+  "version": "3.1.2-rc.1",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": {
@@ -52,7 +52,7 @@
     "prettier": "3.8.1",
     "prettier-plugin-organize-imports": "4.3.0",
     "rimraf": "6.1.2",
-    "@public-ui/components": "3.1.1"
+    "@public-ui/components": "3.1.2-rc.1"
   },
   "sideEffects": false,
   "type": "commonjs",