@nectary/components 5.29.1 → 5.29.2

package/bundle.js

@@ -143,6 +143,38 @@ const getScrollableParents = (node) => {
   scrollableParents.push(document);
   return scrollableParents;
 };
+const isTransformedElement = (element) => {
+  if (element == null) {
+    return false;
+  }
+  const style = getComputedStyle(element);
+  const backdropFilter = style.getPropertyValue("backdrop-filter");
+  const hasTransform = style.transform !== "none" || style.perspective !== "none" || style.filter !== "none" || backdropFilter !== "" && backdropFilter !== "none";
+  const hasWillChange = style.willChange.split(",").map((value) => value.trim().toLowerCase()).some((value) => value === "transform" || value === "perspective" || value === "filter" || value === "backdrop-filter");
+  return hasTransform || hasWillChange;
+};
+const getTransformedAncestor = (node) => {
+  let current = node;
+  while (current != null) {
+    if (current !== node) {
+      if (isTransformedElement(current)) {
+        return current;
+      }
+    }
+    const parent = current.parentElement;
+    if (parent != null) {
+      current = parent;
+      continue;
+    }
+    const root = current.getRootNode();
+    if (root instanceof ShadowRoot && root.host instanceof HTMLElement) {
+      current = root.host;
+      continue;
+    }
+    break;
+  }
+  return null;
+};
 class NectaryElementBase extends HTMLElement {
   static _isGlobal = false;
   static get elementName() {
@@ -3138,6 +3170,79 @@ const createThrottle = (delayFn, cancelFn) => (cb) => {
   };
 };
 const throttleAnimationFrame = createThrottle(globalThis.requestAnimationFrame, globalThis.cancelAnimationFrame);
+const resolveTransformedAncestor = (node, ancestorHint) => {
+  if (node != null && ancestorHint != null && ancestorHint.isConnected && isTransformedElement(ancestorHint) && (ancestorHint === node || ancestorHint.contains(node))) {
+    return ancestorHint;
+  }
+  return getTransformedAncestor(node);
+};
+const getTransformedAncestorScale = (ancestor) => {
+  if (ancestor == null) {
+    return { scaleX: 1, scaleY: 1 };
+  }
+  const transform = getComputedStyle(ancestor).transform;
+  let matrixScaleX = null;
+  let matrixScaleY = null;
+  if (transform !== "none") {
+    try {
+      const matrix = new DOMMatrixReadOnly(transform);
+      matrixScaleX = Math.hypot(matrix.a, matrix.b);
+      matrixScaleY = Math.hypot(matrix.c, matrix.d);
+    } catch {
+      matrixScaleX = null;
+      matrixScaleY = null;
+    }
+  }
+  if (matrixScaleX !== null && matrixScaleY !== null) {
+    return {
+      scaleX: Number.isFinite(matrixScaleX) && matrixScaleX > 0 ? matrixScaleX : 1,
+      scaleY: Number.isFinite(matrixScaleY) && matrixScaleY > 0 ? matrixScaleY : 1
+    };
+  }
+  const rect = ancestor.getBoundingClientRect();
+  const baseWidth = ancestor.offsetWidth;
+  const baseHeight = ancestor.offsetHeight;
+  const scaleX = baseWidth > 0 ? rect.width / baseWidth : 1;
+  const scaleY = baseHeight > 0 ? rect.height / baseHeight : 1;
+  return {
+    scaleX: Number.isFinite(scaleX) && scaleX > 0 ? scaleX : 1,
+    scaleY: Number.isFinite(scaleY) && scaleY > 0 ? scaleY : 1
+  };
+};
+const getPlacementContext = (node, ancestorHint) => {
+  const transformedAncestor = resolveTransformedAncestor(node, ancestorHint);
+  const ancestorRect = transformedAncestor?.getBoundingClientRect() ?? null;
+  const ancestorClientLeft = transformedAncestor?.clientLeft ?? 0;
+  const ancestorClientTop = transformedAncestor?.clientTop ?? 0;
+  const ancestorClientWidth = transformedAncestor?.clientWidth ?? 0;
+  const ancestorClientHeight = transformedAncestor?.clientHeight ?? 0;
+  const { scaleX, scaleY } = getTransformedAncestorScale(transformedAncestor);
+  const boundsLeft = ancestorRect != null ? ancestorRect.x + ancestorClientLeft * scaleX : 0;
+  const boundsTop = ancestorRect != null ? ancestorRect.y + ancestorClientTop * scaleY : 0;
+  const boundsWidth = ancestorRect != null && ancestorClientWidth > 0 ? ancestorClientWidth : ancestorRect != null ? ancestorRect.width / scaleX : window.innerWidth;
+  const boundsHeight = ancestorRect != null && ancestorClientHeight > 0 ? ancestorClientHeight : ancestorRect != null ? ancestorRect.height / scaleY : window.innerHeight;
+  return {
+    transformedAncestor,
+    ancestorRect,
+    scaleX,
+    scaleY,
+    boundsLeft,
+    boundsTop,
+    boundsWidth,
+    boundsHeight
+  };
+};
+const toLocalRect = (rect, placementContext) => {
+  if (placementContext.transformedAncestor == null) {
+    return rect;
+  }
+  return {
+    x: (rect.x - placementContext.boundsLeft) / placementContext.scaleX,
+    y: (rect.y - placementContext.boundsTop) / placementContext.scaleY,
+    width: rect.width / placementContext.scaleX,
+    height: rect.height / placementContext.scaleY
+  };
+};
 const orientationValues$2 = [
   "top-left",
   "top-right",
@@ -3150,6 +3255,50 @@ const orientationValues$2 = [
   "center-left",
   "center-right"
 ];
+const getAnchorPosition = (rect, width, height, orient) => {
+  let x = 0;
+  let y = 0;
+  if (orient === "bottom-right" || orient === "top-right" || orient === "top-stretch" || orient === "bottom-stretch") {
+    x = rect.x;
+  }
+  if (orient === "bottom-left" || orient === "top-left") {
+    x = rect.x + rect.width - width;
+  }
+  if (orient === "bottom-center" || orient === "top-center") {
+    x = rect.x + rect.width / 2 - width / 2;
+  }
+  if (orient === "center-right") {
+    x = rect.x + rect.width;
+  }
+  if (orient === "center-left") {
+    x = rect.x - width;
+  }
+  if (orient === "bottom-left" || orient === "bottom-right" || orient === "bottom-stretch" || orient === "bottom-center") {
+    y = rect.y + rect.height;
+  }
+  if (orient === "top-left" || orient === "top-right" || orient === "top-stretch" || orient === "top-center") {
+    y = rect.y - height;
+  }
+  if (orient === "center-left" || orient === "center-right") {
+    y = rect.y + rect.height / 2 - height / 2;
+  }
+  return { x, y };
+};
+const clampPosition = ({
+  x,
+  y,
+  boundsWidth,
+  boundsHeight,
+  insetX,
+  insetY,
+  modalWidth,
+  modalHeight
+}) => {
+  return {
+    x: Math.max(insetX, Math.min(x, boundsWidth - modalWidth - insetX)),
+    y: Math.max(insetY, Math.min(y, boundsHeight - modalHeight - insetY))
+  };
+};
 const bodyEl$1 = document.body;
 const disableOverscroll = () => {
   bodyEl$1.__pop_counter__ = (bodyEl$1.__pop_counter__ ?? 0) + 1;
@@ -3165,7 +3314,7 @@ const enableOverscroll = () => {
     document.documentElement.style.removeProperty("overscroll-behavior");
   }
 };
-const templateHTML$U = '<style>:host{display:contents;position:relative}dialog{position:fixed;left:0;top:0;margin:0;outline:0;padding:0;border:none;box-sizing:border-box;max-width:unset;max-height:unset;z-index:1;background:0 0;overflow:visible}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}#content{position:relative;z-index:1}#target-open{display:flex;flex-direction:column;position:absolute;left:0;top:0}#focus{display:none;position:absolute;width:0;height:0}</style><slot id="target" name="target" aria-haspopup="dialog" aria-expanded="false"></slot><div id="focus"></div><dialog id="dialog"><div id="target-open"><slot name="target-open"></slot></div><div id="content"><slot name="content"></slot></div></dialog>';
+const templateHTML$U = '<style>:host{display:contents;position:relative}dialog{position:fixed;left:0;top:0;transform:translate(var(--sinch-pop-offset-x),var(--sinch-pop-offset-y));margin:0;outline:0;padding:0;border:none;box-sizing:border-box;max-width:unset;max-height:unset;z-index:1;background:0 0;overflow:visible}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}#content{position:relative;z-index:1}#target-open{display:flex;flex-direction:column;position:absolute;left:0;top:0}#focus{display:none;position:absolute;width:0;height:0}</style><slot id="target" name="target" aria-haspopup="dialog" aria-expanded="false"></slot><div id="focus"></div><dialog id="dialog"><div id="target-open"><slot name="target-open"></slot></div><div id="content"><slot name="content"></slot></div></dialog>';
 const template$U = document.createElement("template");
 template$U.innerHTML = templateHTML$U;
 class Pop extends NectaryElement {
@@ -3173,6 +3322,7 @@ class Pop extends NectaryElement {
   #$focus;
   #$dialog;
   #resizeThrottle;
+  #scrollPositionThrottle;
   #resizeObserver;
   #$targetSlot;
   #$targetOpenSlot;
@@ -3182,10 +3332,15 @@ class Pop extends NectaryElement {
   #controller;
   #keydownContext;
   #visibilityContext;
-  #targetStyleValue = null;
   #modalWidth = 0;
   #modalHeight = 0;
   #scrollableParents = [];
+  #openSession = {
+    effectiveAllowScroll: false,
+    modalSemantics: false,
+    targetStyleValue: null,
+    transformedAncestor: null
+  };
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -3198,6 +3353,9 @@ class Pop extends NectaryElement {
     this.#$contentSlot = shadowRoot.querySelector('slot[name="content"]');
     this.#$targetOpenWrapper = shadowRoot.querySelector("#target-open");
     this.#resizeThrottle = throttleAnimationFrame(this.#updateOrientation);
+    this.#scrollPositionThrottle = throttleAnimationFrame(() => {
+      this.#updatePosition(false);
+    });
     this.#resizeObserver = new ResizeObserver(() => {
       this.#resizeThrottle.fn();
     });
@@ -3227,6 +3385,7 @@ class Pop extends NectaryElement {
     this.#controller.abort();
     this.#controller = null;
     this.#resizeThrottle.cancel();
+    this.#scrollPositionThrottle.cancel();
     this.#resizeObserver.disconnect();
     this.#onCollapse();
   }
@@ -3322,10 +3481,68 @@ class Pop extends NectaryElement {
     }
     return item;
   }
+  #prepareTransferredTarget() {
+    const targetEl = this.#getFirstTargetElement(this.#$targetSlot);
+    const targetElComputedStyle = getComputedStyle(targetEl);
+    const marginLeft = parseInt(targetElComputedStyle.marginLeft, 10);
+    const marginRight = parseInt(targetElComputedStyle.marginRight, 10);
+    const marginTop = parseInt(targetElComputedStyle.marginTop, 10);
+    const marginBottom = parseInt(targetElComputedStyle.marginBottom, 10);
+    const targetRect = this.#getTargetRect();
+    this.#$targetWrapper.style.setProperty("display", "block");
+    this.#$targetWrapper.style.setProperty("width", `${targetRect.width + marginLeft + marginRight}px`);
+    this.#$targetWrapper.style.setProperty("height", `${targetRect.height + marginTop + marginBottom}px`);
+    this.#$targetOpenWrapper.style.setProperty("width", `${targetRect.width}px`);
+    this.#$targetOpenWrapper.style.setProperty("height", `${targetRect.height}px`);
+    this.#openSession.targetStyleValue = targetEl.getAttribute("style");
+    targetEl.style.setProperty("margin", "0");
+    targetEl.style.setProperty("position", "static");
+    if (targetElComputedStyle.transform !== "none") {
+      const matrix = new DOMMatrixReadOnly(targetElComputedStyle.transform);
+      targetEl.style.setProperty("transform", matrix.translate(-matrix.e, -matrix.f).toString());
+    }
+    getFirstSlotElement(this.#$targetSlot)?.setAttribute("slot", "target-open");
+  }
+  #restoreTransferredTarget() {
+    const targetEl = this.#getFirstTargetElement(this.#$targetOpenSlot);
+    const { targetStyleValue } = this.#openSession;
+    if (targetStyleValue === null) {
+      targetEl.style.removeProperty("margin");
+      targetEl.style.removeProperty("position");
+      targetEl.style.removeProperty("transform");
+    } else {
+      targetEl.setAttribute("style", targetStyleValue);
+    }
+    getFirstSlotElement(this.#$targetOpenSlot)?.setAttribute("slot", "target");
+    this.#$targetWrapper.style.removeProperty("display");
+    this.#$targetWrapper.style.removeProperty("width");
+    this.#$targetWrapper.style.removeProperty("height");
+  }
+  #subscribeScrollTracking() {
+    this.#scrollableParents = getScrollableParents(this.#getFirstTargetElement(this.#$targetSlot));
+    this.#scrollableParents.forEach((el) => {
+      el.addEventListener("scroll", this.#onScrollableParentScroll, { passive: true, capture: true });
+    });
+  }
+  #unsubscribeScrollTracking() {
+    this.#scrollableParents.forEach((el) => {
+      el.removeEventListener("scroll", this.#onScrollableParentScroll, { capture: true });
+    });
+  }
   #onExpand() {
     if (!this.isDomConnected || this.#$dialog.open) {
       return;
     }
+    const transformedAncestor = getTransformedAncestor(this);
+    const effectiveAllowScroll = this.allowScroll || transformedAncestor != null;
+    const shouldUseModal = this.modal && transformedAncestor == null;
+    const openAsModal = shouldUseModal || !effectiveAllowScroll;
+    this.#openSession = {
+      effectiveAllowScroll,
+      modalSemantics: shouldUseModal,
+      targetStyleValue: null,
+      transformedAncestor
+    };
     this.#$targetSlot.addEventListener("blur", this.#stopEventPropagation, true);
     this.#$focus.setAttribute("tabindex", "-1");
     this.#$focus.style.display = "block";
@@ -3335,7 +3552,7 @@ class Pop extends NectaryElement {
     this.#$targetSlot.removeEventListener("blur", this.#stopEventPropagation, true);
     this.#$focus.removeAttribute("tabindex");
     this.#$focus.removeAttribute("style");
-    if (this.modal || !this.allowScroll) {
+    if (openAsModal) {
       this.#$dialog.showModal();
     } else {
       this.#$dialog.show();
@@ -3343,32 +3560,13 @@ class Pop extends NectaryElement {
     this.#$targetWrapper.setAttribute("aria-expanded", "true");
     this.#updateOrientation();
     this.#resizeObserver.observe(this.#$dialog);
-    if (this.modal) {
+    if (shouldUseModal) {
       getFirstFocusableElement(this.#$contentSlot)?.focus();
     } else {
-      if (!this.allowScroll) {
-        const $targetEl = this.#getFirstTargetElement(this.#$targetSlot);
-        const targetElComputedStyle = getComputedStyle($targetEl);
-        const marginLeft = parseInt(targetElComputedStyle.marginLeft);
-        const marginRight = parseInt(targetElComputedStyle.marginRight);
-        const marginTop = parseInt(targetElComputedStyle.marginTop);
-        const marginBottom = parseInt(targetElComputedStyle.marginBottom);
-        const targetRect = this.#getTargetRect();
-        this.#$targetWrapper.style.setProperty("display", "block");
-        this.#$targetWrapper.style.setProperty("width", `${targetRect.width + marginLeft + marginRight}px`);
-        this.#$targetWrapper.style.setProperty("height", `${targetRect.height + marginTop + marginBottom}px`);
-        this.#$targetOpenWrapper.style.setProperty("width", `${targetRect.width}px`);
-        this.#$targetOpenWrapper.style.setProperty("height", `${targetRect.height}px`);
-        this.#targetStyleValue = $targetEl.getAttribute("style");
-        $targetEl.style.setProperty("margin", "0");
-        $targetEl.style.setProperty("position", "static");
-        if (targetElComputedStyle.transform !== "none") {
-          const matrix = new DOMMatrixReadOnly(targetElComputedStyle.transform);
-          $targetEl.style.setProperty("transform", matrix.translate(-matrix.e, -matrix.f).toString());
-        }
-        getFirstSlotElement(this.#$targetSlot)?.setAttribute("slot", "target-open");
+      if (!effectiveAllowScroll) {
+        this.#prepareTransferredTarget();
       }
-      const activeSlot = this.allowScroll ? this.#$targetSlot : this.#$targetOpenSlot;
+      const activeSlot = effectiveAllowScroll ? this.#$targetSlot : this.#$targetOpenSlot;
       activeSlot.addEventListener("keydown", this.#onTargetKeydown);
       if (this.#targetActiveElement !== null) {
         activeSlot.addEventListener("focus", this.#stopEventPropagation, true);
@@ -3385,13 +3583,10 @@ class Pop extends NectaryElement {
         }
       }
     }
-    if (!this.allowScroll) {
+    if (!effectiveAllowScroll) {
       disableOverscroll();
     } else {
-      this.#scrollableParents = getScrollableParents(this.#getFirstTargetElement(this.#$targetSlot));
-      this.#scrollableParents.forEach((el) => {
-        el.addEventListener("scroll", () => this.#updatePosition(false), { passive: true, capture: true });
-      });
+      this.#subscribeScrollTracking();
     }
     window.addEventListener("resize", this.#onResize);
     requestAnimationFrame(() => {
@@ -3406,9 +3601,11 @@ class Pop extends NectaryElement {
     if (!this.#$dialog.open) {
       return;
     }
+    const openSession = this.#openSession;
+    const effectiveAllowScroll = openSession.effectiveAllowScroll;
     this.#resizeObserver.disconnect();
-    const isNonModal = !this.modal;
-    const activeSlot = this.allowScroll ? this.#$targetSlot : this.#$targetOpenSlot;
+    const isNonModal = !openSession.modalSemantics;
+    const activeSlot = effectiveAllowScroll ? this.#$targetSlot : this.#$targetOpenSlot;
     this.#dispatchContentVisibility(false);
     activeSlot.removeEventListener("keydown", this.#onTargetKeydown);
     if (isNonModal) {
@@ -3419,19 +3616,8 @@ class Pop extends NectaryElement {
     if (isNonModal) {
       activeSlot.removeEventListener("blur", this.#captureActiveElement, true);
     }
-    if (isNonModal && !this.allowScroll) {
-      const targetEl = this.#getFirstTargetElement(this.#$targetOpenSlot);
-      targetEl.style.removeProperty("margin");
-      targetEl.style.removeProperty("position");
-      targetEl.style.removeProperty("transform");
-      if (this.#targetStyleValue !== null) {
-        targetEl.setAttribute("style", this.#targetStyleValue);
-        this.#targetStyleValue = null;
-      }
-      getFirstSlotElement(this.#$targetOpenSlot)?.setAttribute("slot", "target");
-      this.#$targetWrapper.style.removeProperty("display");
-      this.#$targetWrapper.style.removeProperty("width");
-      this.#$targetWrapper.style.removeProperty("height");
+    if (isNonModal && !effectiveAllowScroll) {
+      this.#restoreTransferredTarget();
     }
     if (this.#targetActiveElement !== null) {
       if (!isElementFocused(this.#targetActiveElement)) {
@@ -3451,57 +3637,69 @@ class Pop extends NectaryElement {
         this.#targetActiveElement = null;
       }
     }
-    if (!this.allowScroll) {
+    if (!effectiveAllowScroll) {
       enableOverscroll();
     } else {
-      this.#scrollableParents.forEach((el) => {
-        el.removeEventListener("scroll", () => this.#updatePosition(false), { capture: true });
-      });
+      this.#unsubscribeScrollTracking();
     }
     this.#resizeThrottle.cancel();
+    this.#scrollPositionThrottle.cancel();
     window.removeEventListener("resize", this.#onResize);
     this.#scrollableParents = [];
     this.#$contentSlot.removeEventListener("slotchange", this.#onContentSlotChange);
+    this.#openSession = {
+      effectiveAllowScroll: false,
+      modalSemantics: false,
+      targetStyleValue: null,
+      transformedAncestor: null
+    };
   }
   #onResize = () => {
     this.#resizeThrottle.fn();
   };
+  #onScrollableParentScroll = () => {
+    this.#scrollPositionThrottle.fn();
+  };
   #updatePosition = (updateWidth) => {
-    const targetRect = this.modal || this.allowScroll ? this.#getTargetRect() : this.#$targetWrapper.getBoundingClientRect();
+    const placementContext = getPlacementContext(this, this.#openSession.transformedAncestor);
+    const { scaleX, scaleY, boundsWidth, boundsHeight } = placementContext;
+    const { modalSemantics, effectiveAllowScroll } = this.#openSession;
+    const shouldClamp = !effectiveAllowScroll;
+    const targetRectViewport = modalSemantics || effectiveAllowScroll ? this.#getTargetRect() : this.#$targetWrapper.getBoundingClientRect();
     const orient = this.orientation;
-    const modalWidth = this.#modalWidth;
-    const modalHeight = this.#modalHeight;
     const inset = this.inset;
-    let xPos = 0;
-    let yPos = 0;
-    if (orient === "bottom-right" || orient === "top-right" || orient === "top-stretch" || orient === "bottom-stretch") {
-      xPos = targetRect.x;
-    }
-    if (orient === "bottom-left" || orient === "top-left") {
-      xPos = targetRect.x + targetRect.width - modalWidth;
-    }
-    if (orient === "bottom-center" || orient === "top-center") {
-      xPos = targetRect.x + targetRect.width / 2 - modalWidth / 2;
-    }
-    if (orient === "center-right") {
-      xPos = targetRect.x + targetRect.width;
-    }
-    if (orient === "center-left") {
-      xPos = targetRect.x - modalWidth;
-    }
-    if (orient === "bottom-left" || orient === "bottom-right" || orient === "bottom-stretch" || orient === "bottom-center") {
-      yPos = targetRect.y + targetRect.height;
-    }
-    if (orient === "top-left" || orient === "top-right" || orient === "top-stretch" || orient === "top-center") {
-      yPos = targetRect.y - modalHeight;
-    }
-    if (orient === "center-left" || orient === "center-right") {
-      yPos = targetRect.y + targetRect.height / 2 - modalHeight / 2;
-    }
-    const clampedXPos = Math.max(inset, Math.min(xPos, window.innerWidth - modalWidth - inset));
-    const clampedYPos = Math.max(inset, Math.min(yPos, window.innerHeight - modalHeight - inset));
-    if (this.hideOutsideViewport && this.#isPopPointInViewport(xPos, yPos)) {
-      this.#$dialog.style.setProperty("visibility", "hidden");
+    const insetX = inset / scaleX;
+    const insetY = inset / scaleY;
+    const targetRect = toLocalRect(targetRectViewport, placementContext);
+    const liveRect = this.#$dialog.open ? this.#$dialog.getBoundingClientRect() : null;
+    const isStretch = orient === "top-stretch" || orient === "bottom-stretch";
+    const modalWidthViewport = isStretch ? this.#modalWidth : liveRect?.width ?? this.#modalWidth;
+    const modalHeightViewport = liveRect?.height ?? this.#modalHeight;
+    const modalWidth = modalWidthViewport / scaleX;
+    const modalHeight = modalHeightViewport / scaleY;
+    const localPos = getAnchorPosition(targetRect, modalWidth, modalHeight, orient);
+    const xPos = localPos.x;
+    const yPos = localPos.y;
+    const localViewportInfos = { boundsWidth, boundsHeight, insetX, insetY, modalWidth, modalHeight };
+    const clampedPosition = shouldClamp ? clampPosition({ x: xPos, y: yPos, ...localViewportInfos }) : { x: xPos, y: yPos };
+    const clampedXPos = clampedPosition.x;
+    const clampedYPos = clampedPosition.y;
+    if (this.hideOutsideViewport) {
+      const viewportPosition = getAnchorPosition(targetRectViewport, modalWidthViewport, modalHeightViewport, orient);
+      const visibilityViewportInfos = {
+        boundsWidth: window.innerWidth,
+        boundsHeight: window.innerHeight,
+        insetX: inset,
+        insetY: inset,
+        modalWidth: modalWidthViewport,
+        modalHeight: modalHeightViewport
+      };
+      const isOutOfViewport = this.#isOutsideViewport(viewportPosition.x, viewportPosition.y, visibilityViewportInfos);
+      if (isOutOfViewport) {
+        this.#$dialog.style.setProperty("visibility", "hidden");
+      } else {
+        this.#$dialog.style.removeProperty("visibility");
+      }
     } else {
       this.#$dialog.style.removeProperty("visibility");
     }
@@ -3510,7 +3708,7 @@ class Pop extends NectaryElement {
     if (updateWidth === true) {
       this.#$dialog.style.setProperty("width", `${modalWidth}px`);
     }
-    if (!this.modal && !this.allowScroll) {
+    if (!modalSemantics && !effectiveAllowScroll) {
       const targetLeftPos = targetRect.x - clampedXPos;
       const targetTopPos = targetRect.y - clampedYPos;
       this.#$targetOpenWrapper.style.setProperty("left", `${targetLeftPos}px`);
@@ -3586,13 +3784,10 @@ class Pop extends NectaryElement {
       this.#updateOrientation();
     }
   };
-  #isPopPointInViewport(x, y) {
-    const inset = this.inset;
-    const modalWidth = this.#modalWidth;
-    const modalHeight = this.#modalHeight;
-    const clampedX = Math.max(inset, Math.min(x, window.innerWidth - modalWidth - inset));
-    const clampedY = Math.max(inset, Math.min(y, window.innerHeight - modalHeight - inset));
-    return Math.abs(clampedX - x) > 2 || Math.abs(clampedY - y) > 2;
+  #isOutsideViewport(x, y, viewportInfos) {
+    const { boundsWidth, boundsHeight, insetX, insetY, modalWidth, modalHeight } = viewportInfos;
+    const clampedPosition = clampPosition({ x, y, boundsWidth, boundsHeight, insetX, insetY, modalWidth, modalHeight });
+    return Math.abs(clampedPosition.x - x) > 2 || Math.abs(clampedPosition.y - y) > 2;
   }
 }
 defineCustomElement("sinch-pop", Pop);
@@ -3756,6 +3951,10 @@ const SHOW_DELAY_SLOW = 1e3;
 const SHOW_DELAY_FAST = 250;
 const HIDE_DELAY = 0;
 const ANIMATION_DURATION = 100;
+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;
 const template$T = document.createElement("template");
 template$T.innerHTML = templateHTML$T;
 class Tooltip extends NectaryElement {
@@ -3765,11 +3964,16 @@ class Tooltip extends NectaryElement {
   #$contentWrapper;
   #$tip;
   #$target;
-  #controller = null;
+  #resizeObserver = null;
   #tooltipState;
   #animation = null;
   #shouldReduceMotion = false;
   #isSubscribed = false;
+  #controller;
+  #placementScheduled = false;
+  #zeroDimensionPlacementRetries = 0;
+  #revealRequestId = 0;
+  #hasCompletedFirstReveal = false;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -3781,6 +3985,7 @@ class Tooltip extends NectaryElement {
     this.#$tip = shadowRoot.querySelector("#tip");
     this.#$target = shadowRoot.querySelector("#target");
     this.#shouldReduceMotion = shouldReduceMotion();
+    this.#controller = null;
     this.#tooltipState = new TooltipState({
       showDelay: SHOW_DELAY_SLOW,
       hideDelay: this.#shouldReduceMotion ? HIDE_DELAY + ANIMATION_DURATION : HIDE_DELAY,
@@ -3801,6 +4006,10 @@ class Tooltip extends NectaryElement {
     this.#$pop.addEventListener("-close", this.#onPopClose, options);
     this.addEventListener("-show", this.#onShowReactHandler, options);
     this.addEventListener("-hide", this.#onHideReactHandler, options);
+    this.#resizeObserver = new ResizeObserver(() => {
+      this.#schedulePlacement();
+    });
+    this.#resizeObserver.observe(this.#$content);
     updateAttribute(this.#$pop, "orientation", getPopOrientation$1(this.orientation));
     updateBooleanAttribute(this.#$pop, "hide-outside-viewport", !this.showOutsideViewport);
     this.#updateText();
@@ -3810,6 +4019,8 @@ class Tooltip extends NectaryElement {
     this.#tooltipState.destroy();
     this.#controller.abort();
     this.#controller = null;
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = null;
   }
   static get observedAttributes() {
     return [
@@ -3941,9 +4152,13 @@ class Tooltip extends NectaryElement {
   };
   // SHOW_DELAY ended, tooltip can be shown with animation
   #onStateShowEnd = () => {
+    const revealRequestId = ++this.#revealRequestId;
     this.#dispatchShowEvent();
     updateBooleanAttribute(this.#$pop, "open", true);
-    requestAnimationFrame(this.#updateTipOrientation);
+    this.#schedulePlacement();
+    this.#scheduleReveal(revealRequestId);
+  };
+  #playShowAnimation() {
     if (this.#animation !== null) {
       this.#animation.updatePlaybackRate(1);
       this.#animation.play();
@@ -3956,20 +4171,64 @@ class Tooltip extends NectaryElement {
         fill: "forwards"
       });
     }
-  };
+  }
+  #isRectStable(previousRect, nextRect) {
+    return Math.abs(previousRect.x - nextRect.x) < 0.5 && Math.abs(previousRect.y - nextRect.y) < 0.5 && Math.abs(previousRect.width - nextRect.width) < 0.5 && Math.abs(previousRect.height - nextRect.height) < 0.5;
+  }
+  #scheduleReveal(revealRequestId) {
+    const reveal = () => {
+      if (!this.isDomConnected || !this.#isOpen() || this.#revealRequestId !== revealRequestId) {
+        return;
+      }
+      this.#playShowAnimation();
+      this.#hasCompletedFirstReveal = true;
+    };
+    if (this.#hasCompletedFirstReveal) {
+      reveal();
+      return;
+    }
+    let previousRect = null;
+    let observedFrames = 0;
+    let remainingFrames = MAX_FIRST_REVEAL_STABILITY_FRAMES;
+    const waitForStableRect = () => {
+      if (!this.isDomConnected || !this.#isOpen() || this.#revealRequestId !== revealRequestId) {
+        return;
+      }
+      const nextRect = this.#$pop.popoverRect;
+      if (observedFrames >= MIN_FIRST_REVEAL_STABILITY_FRAMES && previousRect !== null && this.#isRectStable(previousRect, nextRect)) {
+        reveal();
+        return;
+      }
+      if (remainingFrames === 0) {
+        reveal();
+        return;
+      }
+      previousRect = nextRect;
+      observedFrames += 1;
+      remainingFrames -= 1;
+      requestAnimationFrame(waitForStableRect);
+    };
+    requestAnimationFrame(waitForStableRect);
+  }
   // HIDE_DELAY ended, begin tooltip hide animation
   #onStateHideStart = () => {
+    this.#revealRequestId += 1;
+    if (this.#animation === null) {
+      return;
+    }
     this.#animation.updatePlaybackRate(-1);
     this.#animation.play();
   };
   // Hide animation ended, tooltip can be hidden
   #onStateHideEnd = () => {
     if (this.#isOpen()) {
-      this.#animation.finish();
+      this.#animation?.finish();
       this.#dispatchHideEvent();
       updateBooleanAttribute(this.#$pop, "open", false);
     }
     this.#resetTipOrientation();
+    this.#resetContentOffset();
+    this.#zeroDimensionPlacementRetries = 0;
     this.#unsubscribeMouseLeaveEvents();
     this.#unsubscribeScroll();
   };
@@ -3977,26 +4236,125 @@ class Tooltip extends NectaryElement {
     this.#$tip.style.top = "";
     this.#$tip.style.left = "";
   }
-  #updateTipOrientation = () => {
+  #resetContentOffset() {
+    this.#$pop.style.removeProperty("--sinch-pop-offset-x");
+    this.#$pop.style.removeProperty("--sinch-pop-offset-y");
+  }
+  #schedulePlacement(resetZeroDimensionRetries = true) {
+    if (!this.#isOpen() || this.#placementScheduled) {
+      return;
+    }
+    if (resetZeroDimensionRetries) {
+      this.#zeroDimensionPlacementRetries = 0;
+    }
+    this.#placementScheduled = true;
+    requestAnimationFrame(() => {
+      this.#placementScheduled = false;
+      if (!this.isDomConnected || !this.#isOpen()) {
+        return;
+      }
+      this.#updatePlacement();
+    });
+  }
+  #applyContentOffset(offsetX, offsetY) {
+    if (offsetX === 0 && offsetY === 0) {
+      this.#$pop.style.removeProperty("--sinch-pop-offset-x");
+      this.#$pop.style.removeProperty("--sinch-pop-offset-y");
+      return;
+    }
+    this.#$pop.style.setProperty("--sinch-pop-offset-x", `${offsetX}px`);
+    this.#$pop.style.setProperty("--sinch-pop-offset-y", `${offsetY}px`);
+  }
+  #updatePlacement = () => {
+    if (!this.isDomConnected || !this.#isOpen()) {
+      return;
+    }
+    const popRect = this.#$pop.popoverRect;
+    if (popRect.width === 0 || popRect.height === 0) {
+      if (this.#zeroDimensionPlacementRetries >= MAX_ZERO_DIMENSION_PLACEMENT_RETRIES) {
+        return;
+      }
+      this.#zeroDimensionPlacementRetries += 1;
+      this.#schedulePlacement(false);
+      return;
+    }
+    this.#zeroDimensionPlacementRetries = 0;
+    const placementContext = getPlacementContext(this.#$pop);
+    this.#resetContentOffset();
+    this.#updateTipOrientation(placementContext);
+    const didOffset = this.#resolveOverlap(placementContext);
+    if (didOffset) {
+      requestAnimationFrame(() => {
+        if (!this.isDomConnected || !this.#isOpen()) {
+          return;
+        }
+        this.#updateTipOrientation(placementContext);
+      });
+    }
+  };
+  #resolveOverlap(placementContext) {
+    const orientation = this.orientation;
+    const targetRect = toLocalRect(this.#$pop.footprintRect, placementContext);
+    const contentRect = toLocalRect(this.#$content.getBoundingClientRect(), placementContext);
+    const tipRect = toLocalRect(this.#$tip.getBoundingClientRect(), placementContext);
+    const targetBottom = targetRect.y + targetRect.height;
+    const targetRight = targetRect.x + targetRect.width;
+    const bottomEdge = Math.max(contentRect.y + contentRect.height, tipRect.y + tipRect.height);
+    const topEdge = Math.min(contentRect.y, tipRect.y);
+    const rightEdge = Math.max(contentRect.x + contentRect.width, tipRect.x + tipRect.width);
+    const leftEdge = Math.min(contentRect.x, tipRect.x);
+    let offsetX = 0;
+    let offsetY = 0;
+    if (orientation.startsWith("top")) {
+      if (bottomEdge > targetRect.y + OVERLAP_TOLERANCE) {
+        offsetY = targetRect.y - bottomEdge;
+      }
+    } else if (orientation.startsWith("bottom")) {
+      if (topEdge < targetBottom - OVERLAP_TOLERANCE) {
+        offsetY = targetBottom - topEdge;
+      }
+    } else if (orientation === "left") {
+      if (rightEdge > targetRect.x + OVERLAP_TOLERANCE) {
+        offsetX = targetRect.x - rightEdge;
+      }
+    } else if (orientation === "right") {
+      if (leftEdge < targetRight - OVERLAP_TOLERANCE) {
+        offsetX = targetRight - leftEdge;
+      }
+    }
+    this.#applyContentOffset(offsetX, offsetY);
+    return offsetX !== 0 || offsetY !== 0;
+  }
+  #updateTipOrientation = (placementContext) => {
     const orient = this.orientation;
     if (!("footprintRect" in this.#$pop)) {
-      requestAnimationFrame(this.#updateTipOrientation);
+      requestAnimationFrame(() => {
+        if (!this.isDomConnected || !this.#isOpen()) {
+          return;
+        }
+        this.#updateTipOrientation();
+      });
       return;
     }
-    const targetRect = this.#$pop.footprintRect;
-    const contentRect = this.#$content.getBoundingClientRect();
+    const ctx = placementContext ?? getPlacementContext(this.#$pop);
+    const targetRect = toLocalRect(this.#$pop.footprintRect, ctx);
+    const contentRect = toLocalRect(this.#$content.getBoundingClientRect(), ctx);
     const diffX = targetRect.x - contentRect.x;
     const diffY = targetRect.y - contentRect.y;
+    const targetWidth = targetRect.width;
+    const targetHeight = targetRect.height;
+    const contentWidth = contentRect.width;
+    const contentHeight = contentRect.height;
     if (orient === "left" || orient === "right") {
-      const yPos = Math.max(TIP_SIZE$1, Math.min(diffY + targetRect.height / 2, contentRect.height - TIP_SIZE$1));
+      const yPos = Math.max(TIP_SIZE$1, Math.min(diffY + targetHeight / 2, contentHeight - TIP_SIZE$1));
       this.#$tip.style.top = `${yPos}px`;
     } else {
-      let xPos = Math.max(TIP_SIZE$1, Math.min(diffX + targetRect.width / 2, contentRect.width - TIP_SIZE$1));
+      let xPos = Math.max(TIP_SIZE$1, Math.min(diffX + targetWidth / 2, contentWidth - TIP_SIZE$1));
       if (orient === "bottom-left" || orient === "top-left") {
-        xPos = Math.max(xPos, contentRect.width * 0.75);
+        xPos = Math.max(xPos, contentWidth * 0.75);
       }
       if (orient === "bottom-right" || orient === "top-right") {
-        xPos = Math.min(xPos, contentRect.width * 0.25);
+        xPos = Math.min(xPos, contentWidth * 0.25);
       }
       this.#$tip.style.left = `${xPos}px`;
     }