@swisspost/internet-header 10.6.0 → 10.8.0

package/dist/esm/post-popovercontainer.entry.js

@@ -1,10 +1,25 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-h3opCZqH.js';
-import { v as version } from './package-T8T3po4z.js';
+import { v as version } from './package-BdiQsTQm.js';
 import { O as OneOf } from './one-of-w2eXPAzD.js';
 import { P as PLACEMENT_TYPES } from './placement-DRiVosES.js';
 import { T as Type } from './type-Daxpt5v6.js';
 import './create-validator-decorator--a-qkYfP.js';
 
+const duration = 250;
+const easing = 'ease-out';
+function popIn(el) {
+    if (!el)
+        return;
+    return el.animate([
+        { transform: 'scale(0.9)', opacity: 0 },
+        { transform: 'scale(1)', opacity: 1 },
+    ], {
+        duration,
+        easing,
+        fill: 'forwards',
+    });
+}
+
 /**
  * Custom positioning reference element.
  * @see https://floating-ui.com/docs/virtual-elements
@@ -50,23 +65,6 @@ function getSideAxis(placement) {
 function getAlignmentAxis(placement) {
   return getOppositeAxis(getSideAxis(placement));
 }
-function getAlignmentSides(placement, rects, rtl) {
-  if (rtl === void 0) {
-    rtl = false;
-  }
-  const alignment = getAlignment(placement);
-  const alignmentAxis = getAlignmentAxis(placement);
-  const length = getAxisLength(alignmentAxis);
-  let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
-  if (rects.reference[length] > rects.floating[length]) {
-    mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
-  }
-  return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
-}
-function getExpandedPlacements(placement) {
-  const oppositePlacement = getOppositePlacement(placement);
-  return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
-}
 function getOppositeAlignmentPlacement(placement) {
   return placement.includes('start') ? placement.replace('start', 'end') : placement.replace('end', 'start');
 }
@@ -92,7 +90,7 @@ function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
   let list = getSideList(getSide(placement), direction === 'start', rtl);
   if (alignment) {
     list = list.map(side => side + "-" + alignment);
-    if (flipAlignment) {
+    {
       list = list.concat(list.map(getOppositeAlignmentPlacement));
     }
   }
@@ -198,7 +196,7 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
  * - 0 = lies flush with the boundary
  * @see https://floating-ui.com/docs/detectOverflow
  */
-async function detectOverflow(state, options) {
+async function detectOverflow$1(state, options) {
   var _await$platform$isEle;
   if (options === void 0) {
     options = {};
@@ -271,7 +269,7 @@ const computePosition$1 = async (reference, floating, config) => {
   } = config;
   const platformWithDetectOverflow = platform.detectOverflow ? platform : {
     ...platform,
-    detectOverflow
+    detectOverflow: detectOverflow$1
   };
   const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
   let rects = await platform.getElementRects({
@@ -431,138 +429,6 @@ const arrow$1 = options => ({
   }
 });
 
-/**
- * Optimizes the visibility of the floating element by flipping the `placement`
- * in order to keep it in view when the preferred placement(s) will overflow the
- * clipping boundary. Alternative to `autoPlacement`.
- * @see https://floating-ui.com/docs/flip
- */
-const flip$1 = function (options) {
-  if (options === void 0) {
-    options = {};
-  }
-  return {
-    name: 'flip',
-    options,
-    async fn(state) {
-      var _middlewareData$arrow, _middlewareData$flip;
-      const {
-        placement,
-        middlewareData,
-        rects,
-        initialPlacement,
-        platform,
-        elements
-      } = state;
-      const {
-        mainAxis: checkMainAxis = true,
-        crossAxis: checkCrossAxis = true,
-        fallbackPlacements: specifiedFallbackPlacements,
-        fallbackStrategy = 'bestFit',
-        fallbackAxisSideDirection = 'none',
-        flipAlignment = true,
-        ...detectOverflowOptions
-      } = evaluate(options, state);
-
-      // If a reset by the arrow was caused due to an alignment offset being
-      // added, we should skip any logic now since `flip()` has already done its
-      // work.
-      // https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
-      if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
-        return {};
-      }
-      const side = getSide(placement);
-      const initialSideAxis = getSideAxis(initialPlacement);
-      const isBasePlacement = getSide(initialPlacement) === initialPlacement;
-      const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
-      const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
-      const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
-      if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
-        fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
-      }
-      const placements = [initialPlacement, ...fallbackPlacements];
-      const overflow = await platform.detectOverflow(state, detectOverflowOptions);
-      const overflows = [];
-      let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
-      if (checkMainAxis) {
-        overflows.push(overflow[side]);
-      }
-      if (checkCrossAxis) {
-        const sides = getAlignmentSides(placement, rects, rtl);
-        overflows.push(overflow[sides[0]], overflow[sides[1]]);
-      }
-      overflowsData = [...overflowsData, {
-        placement,
-        overflows
-      }];
-
-      // One or more sides is overflowing.
-      if (!overflows.every(side => side <= 0)) {
-        var _middlewareData$flip2, _overflowsData$filter;
-        const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
-        const nextPlacement = placements[nextIndex];
-        if (nextPlacement) {
-          const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
-          if (!ignoreCrossAxisOverflow ||
-          // We leave the current main axis only if every placement on that axis
-          // overflows the main axis.
-          overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
-            // Try next placement and re-run the lifecycle.
-            return {
-              data: {
-                index: nextIndex,
-                overflows: overflowsData
-              },
-              reset: {
-                placement: nextPlacement
-              }
-            };
-          }
-        }
-
-        // First, find the candidates that fit on the mainAxis side of overflow,
-        // then find the placement that fits the best on the main crossAxis side.
-        let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
-
-        // Otherwise fallback.
-        if (!resetPlacement) {
-          switch (fallbackStrategy) {
-            case 'bestFit':
-              {
-                var _overflowsData$filter2;
-                const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
-                  if (hasFallbackAxisSideDirection) {
-                    const currentSideAxis = getSideAxis(d.placement);
-                    return currentSideAxis === initialSideAxis ||
-                    // Create a bias to the `y` side axis due to horizontal
-                    // reading directions favoring greater width.
-                    currentSideAxis === 'y';
-                  }
-                  return true;
-                }).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
-                if (placement) {
-                  resetPlacement = placement;
-                }
-                break;
-              }
-            case 'initialPlacement':
-              resetPlacement = initialPlacement;
-              break;
-          }
-        }
-        if (placement !== resetPlacement) {
-          return {
-            reset: {
-              placement: resetPlacement
-            }
-          };
-        }
-      }
-      return {};
-    }
-  };
-};
-
 function getSideOffsets(overflow, rect) {
   return {
     top: overflow.top - rect.height,
@@ -1445,7 +1311,7 @@ function getDocumentRect(html) {
 // calculation is affected by unusual styles.
 // Most scrollbars leave 15-18px of space.
 const SCROLLBAR_MAX = 25;
-function getViewportRect(element, strategy, rootBoundary) {
+function getViewportRect$1(element, strategy, rootBoundary) {
   if (rootBoundary === void 0) {
     rootBoundary = 'viewport';
   }
@@ -1523,7 +1389,7 @@ function getInnerBoundingClientRect(element, strategy) {
 function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
   let rect;
   if (clippingAncestor === 'viewport' || clippingAncestor === 'layoutViewport') {
-    rect = getViewportRect(element, strategy, clippingAncestor);
+    rect = getViewportRect$1(element, strategy, clippingAncestor);
   } else if (clippingAncestor === 'document') {
     rect = getDocumentRect(getDocumentElement(element));
   } else if (isElement(clippingAncestor)) {
@@ -1919,6 +1785,16 @@ function autoUpdate(reference, floating, update, options) {
   };
 }
 
+/**
+ * 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
+ */
+const detectOverflow = detectOverflow$1;
+
 /**
  * Modifies the placement by translating the floating element along the
  * specified axes.
@@ -1935,14 +1811,6 @@ const offset = offset$1;
  */
 const shift = shift$1;
 
-/**
- * Optimizes the visibility of the floating element by flipping the `placement`
- * in order to keep it in view when the preferred placement(s) will overflow the
- * clipping boundary. Alternative to `autoPlacement`.
- * @see https://floating-ui.com/docs/flip
- */
-const flip = flip$1;
-
 /**
  * Provides data that allows you to change the size of the floating element —
  * for instance, prevent it from overflowing the clipping boundary or match the
@@ -1998,19 +1866,211 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
-const duration = 250;
-const easing = 'ease-out';
-function popIn(el) {
-    if (!el)
+/**
+ * Returns the nth side in clockwise direction relative to the given side.
+ */
+function getRelativeSide(side, n) {
+    return sides[(sides.indexOf(side) + n) % 4];
+}
+const getNextSide = (side) => getRelativeSide(side, 1);
+const getOppositeSide = (side) => getRelativeSide(side, 2);
+const getPreviousSide = (side) => getRelativeSide(side, 3);
+
+const FLIP_MIDDLEWARE = 'post-flip';
+/**
+ * Changes the placement of the floating element to keep it in view.
+ *
+ * Unlike the Floating UI `flip` middleware, placements are measured against `minSize` rather than
+ * against the current size of the floating element, and the placement with the smallest deficit is
+ * used when none of them fits.
+ */
+function flip(options = {}) {
+    return {
+        name: FLIP_MIDDLEWARE,
+        options,
+        async fn(state) {
+            const { middlewareData, placement } = state;
+            // see https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
+            if (middlewareData.arrow?.alignmentOffset)
+                return {};
+            const { minSize = {}, ...detectOverflowOptions } = evaluate(options, state);
+            const gap = Math.abs(middlewareData.offset?.[getSideAxis(placement)] ?? 0);
+            const side = getSide(placement);
+            const referenceOverflow = await detectOverflow(state, {
+                ...detectOverflowOptions,
+                elementContext: 'reference',
+            });
+            const floatingOverflow = await detectOverflow(state, {
+                ...detectOverflowOptions,
+                elementContext: 'floating',
+            });
+            // The floating element fits at its current placement, there is nothing left to do.
+            if (Math.max(referenceOverflow[side], floatingOverflow[side]) <= 0)
+                return {};
+            const previous = middlewareData[FLIP_MIDDLEWARE];
+            const measurement = { overflow: referenceOverflow, minSize, gap };
+            let deficits = previous?.deficits ?? [];
+            const placements = previous?.placements ?? (await getPlacements(state, measurement));
+            if (deficits.length < placements.length) {
+                deficits = [...deficits, getDeficit(side, measurement)];
+            }
+            const data = { placements, deficits };
+            // If there are still placements to try, move on to the next one.
+            if (deficits.length < placements.length) {
+                return { data, reset: { placement: placements[deficits.length] } };
+            }
+            // If none of the placements fit, fall back to the one that loses the least space.
+            const fallback = data.placements[data.deficits.indexOf(Math.min(...data.deficits))];
+            return fallback === placement ? { data } : { data, reset: { placement: fallback } };
+        },
+    };
+}
+/**
+ * Returns the placements to try, ordered from most to least promising.
+ */
+async function getPlacements(state, measurement) {
+    const { placement, platform, elements } = state;
+    const { overflow } = measurement;
+    const side = getSide(placement);
+    const placements = [placement, getOppositePlacement(placement)];
+    const mainAxisDeficit = Math.min(getDeficit(side, measurement), getDeficit(getOppositeSide(side), measurement));
+    if (mainAxisDeficit <= 0)
+        return placements;
+    const rtl = (await platform.isRTL?.(elements.floating)) ?? false;
+    const crossAxisPlacements = getOppositeAxisPlacements(placement, true, 'start', rtl);
+    // Try the side with the most available space first.
+    crossAxisPlacements.sort((a, b) => overflow[getSide(a)] - overflow[getSide(b)]);
+    return [...placements, ...crossAxisPlacements];
+}
+/**
+ * Returns the amount of space required to display the floating element at its minimum size on the
+ * given side of the reference element.
+ */
+function getDeficit(side, { minSize, overflow, gap }) {
+    const minLength = minSize[getAxisLength(getSideAxis(side))] ?? 0;
+    return gap + minLength + overflow[side];
+}
+
+/**
+ * This utility is covered by the end-to-end tests under 'clipping' in `popovercontainer.cy.ts`.
+ */
+const CLIPPING_RECT_CACHE = Symbol('Clipping Rect Cache');
+/**
+ * A custom floating UI platform that restricts clipping rectangles to the safe area.
+ */
+const safeAreaPlatform = { ...platform, getClippingRect };
+/**
+ * Computes the clipping rectangle of an element while accounting for the safe area.
+ */
+async function getClippingRect(...args) {
+    const element = args[0].element;
+    // Check whether the clipping rectangle of the given element has already been computed during
+    // this pass.
+    const hit = this[CLIPPING_RECT_CACHE].get(element);
+    if (hit)
+        return hit;
+    // Compute the clipping rectangle with the Floating UI DOM platform, then restrict it to the safe
+    // area.
+    const clippingRect = await platform.getClippingRect.apply(this, args);
+    applySafeArea(clippingRect, element);
+    this[CLIPPING_RECT_CACHE].set(element, clippingRect);
+    return clippingRect;
+}
+/**
+ * Restricts the `clippingRect` computed for `element` to the safe area, modifying it in place.
+ *
+ * The safe area only applies to elements that the header can actually cover, which excludes
+ * elements without a header on their page, elements on a top layer and elements within the header.
+ */
+function applySafeArea(clippingRect, element) {
+    const headerElement = element.ownerDocument.querySelector('post-header');
+    if (headerElement === null)
         return;
-    return el.animate([
-        { transform: 'scale(0.9)', opacity: 0 },
-        { transform: 'scale(1)', opacity: 1 },
-    ], {
-        duration,
-        easing,
-        fill: 'forwards',
+    let parent = element;
+    while (!isLastTraversableNode(parent)) {
+        parent = getParentNode(parent);
+        if (!isHTMLElement(parent))
+            continue;
+        // Do not apply the safe area of the header to
+        // - elements that are on a top layer, such as a dialog.
+        // - elements that are located within the header itself.
+        if (isTopLayer(parent) || parent === headerElement)
+            return;
+    }
+    const headerRect = headerElement.getBoundingClientRect();
+    const top = Math.max(clippingRect.y, headerRect.bottom);
+    clippingRect.height -= top - clippingRect.y;
+    clippingRect.y = top;
+}
+/**
+ * Computes the coordinates that will position the `floating` element next to a given `reference`
+ * element while accounting for the safe area.
+ *
+ * The safe area is the part of the viewport that the header does not cover. Restricting the
+ * clipping rectangles to it makes floating elements behave as if they were clipped by the header.
+ */
+const computePositionWithSafeArea = (reference, floating, options) => {
+    // Adapted from https://github.com/floating-ui/floating-ui/blob/27629b74ba36ab8ceb2a968051927b9b69511a3b/packages/dom/src/index.ts#L15
+    options ??= {};
+    return computePosition(reference, floating, {
+        ...options,
+        platform: {
+            ...safeAreaPlatform,
+            ...options.platform,
+            [CLIPPING_RECT_CACHE]: new Map(),
+        },
+    });
+};
+
+const SAFE_SPACE_MIDDLEWARE = 'post-safe-space';
+/**
+ * Computes the safe space, the area the pointer can travel through to get from the reference to
+ * the floating element.
+ */
+function safeSpace() {
+    return {
+        name: SAFE_SPACE_MIDDLEWARE,
+        async fn(state) {
+            const { placement, rects, x, y } = state;
+            const side = getSide(placement);
+            const reference = await getViewportRect(state, rects.reference);
+            const floating = await getViewportRect(state, { ...rects.floating, x, y });
+            const path = [
+                ...getPathAlongSide(floating, getOppositeSide(side)),
+                ...getPathAlongSide(reference, side),
+            ];
+            const points = [];
+            for (let i = 0; i < path.length; i += 2) {
+                points.push(`${path[i]}px ${path[i + 1]}px`);
+            }
+            const data = { polygon: `polygon(${points.join(', ')})` };
+            return { data };
+        },
+    };
+}
+/**
+ * Converts a rectangle from the floating element's offset parent's coordinate system to viewport
+ * coordinates.
+ */
+async function getViewportRect({ elements, platform, strategy }, rect) {
+    const viewportRect = await platform.convertOffsetParentRelativeRectToViewportRelativeRect?.({
+        offsetParent: await platform.getOffsetParent?.(elements.floating),
+        rect,
+        elements,
+        strategy,
     });
+    return rectToClientRect(viewportRect ?? rect);
+}
+/**
+ * Returns the path along the specified side of the given rectangle.
+ *
+ * The path is a list of coordinates in the form of [x₁, y₁, x₂, y₂] and is given in clockwise order.
+ */
+function getPathAlongSide(rect, side) {
+    const self = rect[side];
+    const prev = rect[getPreviousSide(side)];
+    const next = rect[getNextSide(side)];
+    return getSideAxis(side) === 'x' ? [self, prev, self, next] : [prev, self, next, self];
 }
 
 // src/events.ts
@@ -2805,78 +2865,7 @@ function apply() {
   injectStyles(document);
 }
 
-/**
- * This utility is covered by the end-to-end tests under 'clipping' in `popovercontainer.cy.ts`.
- */
-const CLIPPING_RECT_CACHE = Symbol('Clipping Rect Cache');
-/**
- * A custom floating UI platform that restricts clipping rectangles to the safe area.
- */
-const safeAreaPlatform = { ...platform, getClippingRect };
-/**
- * Computes the clipping rectangle of an element while accounting for the safe area.
- */
-async function getClippingRect(...args) {
-    const element = args[0].element;
-    // Check whether the clipping rectangle of the given element has already been computed during
-    // this pass.
-    const hit = this[CLIPPING_RECT_CACHE].get(element);
-    if (hit)
-        return hit;
-    // Compute the clipping rectangle with the Floating UI DOM platform, then restrict it to the safe
-    // area.
-    const clippingRect = await platform.getClippingRect.apply(this, args);
-    applySafeArea(clippingRect, element);
-    this[CLIPPING_RECT_CACHE].set(element, clippingRect);
-    return clippingRect;
-}
-/**
- * Restricts the `clippingRect` computed for `element` to the safe area, modifying it in place.
- *
- * The safe area only applies to elements that the header can actually cover, which excludes
- * elements without a header on their page, elements on a top layer and elements within the header.
- */
-function applySafeArea(clippingRect, element) {
-    const headerElement = element.ownerDocument.querySelector('post-header');
-    if (headerElement === null)
-        return;
-    let parent = element;
-    while (!isLastTraversableNode(parent)) {
-        parent = getParentNode(parent);
-        if (!isHTMLElement(parent))
-            continue;
-        // Do not apply the safe area of the header to
-        // - elements that are on a top layer, such as a dialog.
-        // - elements that are located within the header itself.
-        if (isTopLayer(parent) || parent === headerElement)
-            return;
-    }
-    const headerRect = headerElement.getBoundingClientRect();
-    const top = Math.max(clippingRect.y, headerRect.bottom);
-    clippingRect.height -= top - clippingRect.y;
-    clippingRect.y = top;
-}
-/**
- * Computes the coordinates that will position the `floating` element next to a given `reference`
- * element while accounting for the safe area.
- *
- * The safe area is the part of the viewport that the header does not cover. Restricting the
- * clipping rectangles to it makes floating elements behave as if they were clipped by the header.
- */
-const computePositionWithSafeArea = (reference, floating, options) => {
-    // Adapted from https://github.com/floating-ui/floating-ui/blob/27629b74ba36ab8ceb2a968051927b9b69511a3b/packages/dom/src/index.ts#L15
-    options ??= {};
-    return computePosition(reference, floating, {
-        ...options,
-        platform: {
-            ...safeAreaPlatform,
-            ...options.platform,
-            [CLIPPING_RECT_CACHE]: new Map(),
-        },
-    });
-};
-
-const postPopovercontainerCss = () => `@layer polyfill{@supports not selector(:popover-open){:host([popover]:not(.\\:popover-open)){display:none}}}:host{background-color:rgba(0,0,0,0);border:rgba(0,0,0,0);position:fixed;margin:0;padding:0;overflow:visible}:host>div{-webkit-box-shadow:var(--post-device-elevation-300);box-shadow:var(--post-device-elevation-300);width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:100%;color:var(--post-current-fg);background-color:var(--post-current-bg);border-radius:4px;position:relative}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host>div{border:2px solid rgba(0,0,0,0)}}:host [part=post-popovercontainer-border-mask]{display:none;position:absolute;inset:0;border-radius:4px;pointer-events:none}:host .arrow{--post-popovercontainer-arrow-border: var(--post-popovercontainer-arrow-border-width, 0px) solid var(--post-popovercontainer-arrow-border-color, transparent);position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:host .arrow[dynamic-placement=top]{border-bottom-right-radius:2px;border-bottom:var(--post-popovercontainer-arrow-border);border-right:var(--post-popovercontainer-arrow-border)}:host .arrow[dynamic-placement=right]{border-bottom-left-radius:2px;border-bottom:var(--post-popovercontainer-arrow-border);border-left:var(--post-popovercontainer-arrow-border)}:host .arrow[dynamic-placement=bottom]{border-top-left-radius:2px;border-top:var(--post-popovercontainer-arrow-border);border-left:var(--post-popovercontainer-arrow-border)}:host .arrow[dynamic-placement=left]{border-top-right-radius:2px;border-top:var(--post-popovercontainer-arrow-border);border-right:var(--post-popovercontainer-arrow-border)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .arrow[dynamic-placement=top]{-webkit-border-after:2px solid rgba(0,0,0,0);border-block-end:2px solid rgba(0,0,0,0);-webkit-border-end:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0);bottom:-0.3796735336rem !important}:host .arrow[dynamic-placement=left]{-webkit-border-before:2px solid rgba(0,0,0,0);border-block-start:2px solid rgba(0,0,0,0);-webkit-border-end:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0);right:-0.3796735336rem !important}:host .arrow[dynamic-placement=right]{-webkit-border-after:2px solid rgba(0,0,0,0);border-block-end:2px solid rgba(0,0,0,0);-webkit-border-start:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0);left:-0.3796735336rem !important}:host .arrow[dynamic-placement=bottom]{-webkit-border-before:2px solid rgba(0,0,0,0);border-block-start:2px solid rgba(0,0,0,0);-webkit-border-start:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0);top:-0.3796735336rem !important}}:host([tooltip]){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:host([safe-space])::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:auto}:host([safe-space=triangle])::after{-webkit-clip-path:polygon(var(--post-safe-space-cursor-x, 0) var(--post-safe-space-cursor-y, 0), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)));clip-path:polygon(var(--post-safe-space-cursor-x, 0) var(--post-safe-space-cursor-y, 0), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)))}:host([safe-space=trapezoid])::after{-webkit-clip-path:polygon(var(--post-safe-space-trigger-x-start, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-start, 0)), var(--post-safe-space-trigger-x-end, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-end, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)));clip-path:polygon(var(--post-safe-space-trigger-x-start, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-start, 0)), var(--post-safe-space-trigger-x-end, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-end, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)))}:host(:not(:has(.arrow)))>div{-webkit-box-shadow:var(--post-device-elevation-300);box-shadow:var(--post-device-elevation-300)}:host(:has(.arrow))>div{-webkit-filter:drop-shadow(1px 2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(2px 4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(4px 8px 12px hsla(225, 7%, 11%, 0.15));filter:drop-shadow(1px 2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(2px 4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(4px 8px 12px hsla(225, 7%, 11%, 0.15))}:host(:has(.arrow[dynamic-placement=top]))>div{-webkit-filter:drop-shadow(0px -2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(0px -4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(0px -8px 12px hsla(225, 7%, 11%, 0.15));filter:drop-shadow(0px -2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(0px -4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(0px -8px 12px hsla(225, 7%, 11%, 0.15))}:host(:has(.arrow[dynamic-placement=left]))>div{-webkit-filter:drop-shadow(-2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(-4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(-8px 0px 12px hsla(225, 7%, 11%, 0.15));filter:drop-shadow(-2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(-4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(-8px 0px 12px hsla(225, 7%, 11%, 0.15))}:host(:has(.arrow[dynamic-placement=right]))>div{-webkit-filter:drop-shadow(2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(8px 0px 12px hsla(225, 7%, 11%, 0.15));filter:drop-shadow(2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(8px 0px 12px hsla(225, 7%, 11%, 0.15))}`;
+const postPopovercontainerCss = () => `@layer polyfill{@supports not selector(:popover-open){:host([popover]:not(.\\:popover-open)){display:none}}}:host{background-color:rgba(0,0,0,0);border:rgba(0,0,0,0);position:fixed;margin:0;padding:0;overflow:visible}:host [part=post-popovercontainer-content]{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:var(--post-device-elevation-300);box-shadow:var(--post-device-elevation-300);width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:var(--post-popovercontainer-available-width);max-height:var(--post-popovercontainer-available-height);color:var(--post-current-fg);background-color:var(--post-current-bg);border-radius:4px;position:relative;display:-ms-flexbox;display:flex}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host [part=post-popovercontainer-content]{border:2px solid rgba(0,0,0,0)}}:host [part=post-popovercontainer-border-mask]{display:none;position:absolute;inset:0;border-radius:4px;pointer-events:none}:host .arrow{--post-popovercontainer-arrow-border: var(--post-popovercontainer-arrow-border-width, 0px) solid var(--post-popovercontainer-arrow-border-color, transparent);position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:host .arrow[data-side=top]{border-bottom-right-radius:2px;border-bottom:var(--post-popovercontainer-arrow-border);border-right:var(--post-popovercontainer-arrow-border)}:host .arrow[data-side=right]{border-bottom-left-radius:2px;border-bottom:var(--post-popovercontainer-arrow-border);border-left:var(--post-popovercontainer-arrow-border)}:host .arrow[data-side=bottom]{border-top-left-radius:2px;border-top:var(--post-popovercontainer-arrow-border);border-left:var(--post-popovercontainer-arrow-border)}:host .arrow[data-side=left]{border-top-right-radius:2px;border-top:var(--post-popovercontainer-arrow-border);border-right:var(--post-popovercontainer-arrow-border)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .arrow[data-side=top]{-webkit-border-after:2px solid rgba(0,0,0,0);border-block-end:2px solid rgba(0,0,0,0);-webkit-border-end:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0);bottom:-0.3796735336rem !important}:host .arrow[data-side=left]{-webkit-border-before:2px solid rgba(0,0,0,0);border-block-start:2px solid rgba(0,0,0,0);-webkit-border-end:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0);right:-0.3796735336rem !important}:host .arrow[data-side=right]{-webkit-border-after:2px solid rgba(0,0,0,0);border-block-end:2px solid rgba(0,0,0,0);-webkit-border-start:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0);left:-0.3796735336rem !important}:host .arrow[data-side=bottom]{-webkit-border-before:2px solid rgba(0,0,0,0);border-block-start:2px solid rgba(0,0,0,0);-webkit-border-start:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0);top:-0.3796735336rem !important}}:host([tooltip]){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:host([safe-space])::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:auto;-webkit-clip-path:var(--post-popovercontainer-safe-space, polygon(0 0, 0 0, 0 0));clip-path:var(--post-popovercontainer-safe-space, polygon(0 0, 0 0, 0 0))}:host(:not(:has(.arrow)))>div{-webkit-box-shadow:var(--post-device-elevation-300);box-shadow:var(--post-device-elevation-300)}:host(:has(.arrow))>div{-webkit-filter:drop-shadow(1px 2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(2px 4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(4px 8px 12px hsla(225, 7%, 11%, 0.15));filter:drop-shadow(1px 2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(2px 4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(4px 8px 12px hsla(225, 7%, 11%, 0.15))}:host(:has(.arrow[data-side=top]))>div{-webkit-filter:drop-shadow(0px -2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(0px -4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(0px -8px 12px hsla(225, 7%, 11%, 0.15));filter:drop-shadow(0px -2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(0px -4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(0px -8px 12px hsla(225, 7%, 11%, 0.15))}:host(:has(.arrow[data-side=left]))>div{-webkit-filter:drop-shadow(-2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(-4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(-8px 0px 12px hsla(225, 7%, 11%, 0.15));filter:drop-shadow(-2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(-4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(-8px 0px 12px hsla(225, 7%, 11%, 0.15))}:host(:has(.arrow[data-side=right]))>div{-webkit-filter:drop-shadow(2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(8px 0px 12px hsla(225, 7%, 11%, 0.15));filter:drop-shadow(2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(8px 0px 12px hsla(225, 7%, 11%, 0.15))}`;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -2888,34 +2877,10 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
                 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const ANIMATIONS = {
-    'pop-in': popIn,
-};
+const AVAILABLE_WIDTH_PROPERTY = '--post-popovercontainer-available-width';
+const AVAILABLE_HEIGHT_PROPERTY = '--post-popovercontainer-available-height';
+const SAFE_SPACE_PROPERTY = '--post-popovercontainer-safe-space';
 const PostPopovercontainer = class {
-    static {
-        this.STATIC_SIDES = {
-            top: 'bottom',
-            right: 'left',
-            bottom: 'top',
-            left: 'right',
-        };
-    }
-    static {
-        this.PROPERTIES_TO_CLEAR = [
-            '--post-safe-space-popover-x',
-            '--post-safe-space-popover-y',
-            '--post-safe-space-popover-x-start',
-            '--post-safe-space-popover-x-end',
-            '--post-safe-space-popover-y-start',
-            '--post-safe-space-popover-y-end',
-            '--post-safe-space-trigger-x',
-            '--post-safe-space-trigger-y',
-            '--post-safe-space-trigger-x-start',
-            '--post-safe-space-trigger-x-end',
-            '--post-safe-space-trigger-y-start',
-            '--post-safe-space-trigger-y-end',
-        ];
-    }
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.postBeforeShow = createEvent(this, "postBeforeShow");
@@ -2923,37 +2888,25 @@ const PostPopovercontainer = class {
         this.postHide = createEvent(this, "postHide");
         this.postBeforeToggle = createEvent(this, "postBeforeToggle");
         this.postToggle = createEvent(this, "postToggle");
+        /** The element the popover is anchored to */
+        this.anchorRef = null;
+        this.arrowRef = null;
+        this.hasBeenOpened = false;
         this.toggleTimeoutId = null;
-        this.hasOpenedOnce = true;
+        this.runningAnimation = null;
+        this.stopAutoUpdate = null;
         /**
-         * Defines the placement of the popovercontainer according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
-         * Popovercontainers are automatically flipped to the opposite side if there is not enough available space and are shifted
-         * towards the viewport if they would overlap edge boundaries.
+         * Placement of the popover according to the floating-ui options.
          */
         this.placement = 'top';
         /**
-         * Gap between the edge of the page and the popovercontainer
+         * Gap between the edge of the viewport and the popover.
          */
         this.edgeGap = 8;
         /**
-         * Whether or not to display a little pointer arrow
+         * Show a little indicator arrow
          */
         this.arrow = false;
-        /**
-         * Animation style
-         */
-        this.animation = 'pop-in';
-        this.currentAnimation = null;
-        this.boundMouseTrackingHandler = this.mouseTrackingHandler.bind(this);
-    }
-    /**
-     * Updates cursor position for safe space feature when popover is open.
-     * Sets CSS custom properties for dynamic styling of safe area.
-     * @param event MouseEvent with cursor position
-     */
-    mouseTrackingHandler(event) {
-        this.host.style.setProperty('--post-safe-space-cursor-x', `${event.clientX}px`);
-        this.host.style.setProperty('--post-safe-space-cursor-y', `${event.clientY}px`);
     }
     connectedCallback() {
         if (!isSupported()) {
@@ -2964,296 +2917,197 @@ const PostPopovercontainer = class {
         this.host.addEventListener('beforetoggle', this.handleToggle.bind(this));
     }
     disconnectedCallback() {
-        if (typeof this.clearAutoUpdate === 'function') {
-            this.clearAutoUpdate();
-        }
+        this.cleanup();
         this.host.removeEventListener('beforetoggle', this.handleToggle.bind(this));
     }
+    cleanup() {
+        this.stopAutoUpdate?.();
+        if (this.runningAnimation) {
+            this.runningAnimation.cancel();
+            this.runningAnimation = null;
+        }
+    }
+    isOpen() {
+        return this.host?.matches(':where(:popover-open, .popover-open)');
+    }
+    getContent() {
+        return this.host?.shadowRoot.querySelector('[part="post-popovercontainer-content"]');
+    }
+    getContentMinSize() {
+        const content = this.getContent();
+        if (!content)
+            return {};
+        const { minWidth, minHeight } = getComputedStyle(content);
+        return {
+            width: Number.parseFloat(minWidth) || 0,
+            height: Number.parseFloat(minHeight) || 0,
+        };
+    }
     /**
-     * Programmatically display the popovercontainer
-     * @param target The element that invokes the popover and to which it is visually anchored.
+     * Shows the popover.
+     * @param anchor the element that the popover is visually anchored to.
      */
-    async show(target) {
-        if (this.toggleTimeoutId || !target)
+    async show(anchor) {
+        if (this.toggleTimeoutId || !anchor || this.isOpen())
             return;
-        this.eventTarget = target;
-        this.updatePosition();
+        this.anchorRef = anchor;
         this.host.showPopover();
     }
     /**
-     * Programmatically hide the popovercontainer
+     * Hides the popover.
      */
     async hide() {
-        if (!this.toggleTimeoutId) {
-            this.eventTarget = null;
-            this.host.hidePopover();
-            this.postHide.emit();
-        }
+        if (this.toggleTimeoutId || !this.isOpen())
+            return;
+        this.anchorRef = null;
+        this.host.hidePopover();
+        this.postHide.emit();
     }
     /**
-     * Toggle popovercontainer display
-     * @param target The element that invokes the popover and to which it is visually anchored.
-     * @param force Pass true to always show or false to always hide
+     * Toggles the popover's state from hidden to showing and vice versa.
+     *
+     * If `state` is specified, the popover is forced to be shown if the is set to `true`, or hidden
+     * if it is set to `false`.
+     *
+     * @param anchor the element that the popover is visually anchored to.
+     * @param force the next state of the popover.
+     * @returns the new state of the popover: `true` if it is shown, `false` if it is hidden.
      */
-    async toggle(target, force) {
-        const isOpen = this.host.matches(':where(:popover-open, .popover-open)');
-        const willOpen = force === true || (force === undefined && !isOpen);
-        if (willOpen && !target)
+    async toggle(anchor, force) {
+        const isOpen = this.isOpen();
+        if (!this.host || this.toggleTimeoutId)
             return isOpen;
-        this.eventTarget = target;
-        // Prevent instant double toggle
-        if (!this.toggleTimeoutId) {
-            this.updatePosition();
-            this.host.togglePopover(force);
-            this.toggleTimeoutId = null;
-        }
-        return this.host.matches(':where(:popover-open, .popover-open)');
+        const shouldOpen = force === true || (force === undefined && !isOpen);
+        if (isOpen === shouldOpen || (shouldOpen && !anchor))
+            return isOpen;
+        this.anchorRef = shouldOpen ? anchor : null;
+        this.host.togglePopover(force);
+        this.toggleTimeoutId = null;
+        return this.isOpen();
     }
     /**
-     * Handles the popover opening process and emits related events.
+     * Handles the popover's state transition from hidden to showing and vice versa.
      */
-    open() {
-        const content = this.host.shadowRoot?.querySelector('.popover-content');
-        this.startAutoupdates();
-        if (content) {
-            const animationFn = ANIMATIONS[this.animation];
-            // Only run the animation if it corresponds to a valid, registered animation function
-            if (typeof animationFn === 'function') {
-                this.runOpenAnimation(animationFn, content);
-            }
-            else {
-                // No animation case
-                this.postBeforeToggle.emit({ willOpen: true });
-                this.postBeforeShow.emit({ first: this.hasOpenedOnce });
-                this.postToggle.emit({ isOpen: true });
-                this.postShow.emit({ first: this.hasOpenedOnce });
-                if (this.hasOpenedOnce)
-                    this.hasOpenedOnce = false;
-            }
-        }
-        if (this.safeSpace) {
-            globalThis.addEventListener('mousemove', this.boundMouseTrackingHandler);
-        }
+    async handleToggle(event) {
+        this.toggleTimeoutId = globalThis.setTimeout(() => (this.toggleTimeoutId = null), 10);
+        if (event.newState === 'open')
+            await this.handleOpen();
+        else
+            await this.handleClose();
     }
     /**
-     * Handles the popover closing process and emits related events.
+     * Handles the popover's state transition from hidden to showing, emitting related events.
      */
-    close() {
-        if (typeof this.clearAutoUpdate === 'function') {
-            this.clearAutoUpdate();
-        }
-        if (this.safeSpace) {
-            globalThis.removeEventListener('mousemove', this.boundMouseTrackingHandler);
+    async handleOpen() {
+        this.postBeforeToggle.emit({ willOpen: true });
+        this.postBeforeShow.emit({ first: !this.hasBeenOpened });
+        await this.updatePosition(true);
+        this.startAutoUpdate();
+        try {
+            await this.runOpenAnimation();
         }
-        // Cancel any running animation
-        if (this.currentAnimation) {
-            this.currentAnimation.cancel();
-            this.currentAnimation = null;
+        catch {
+            return;
         }
-        this.postBeforeToggle.emit({ willOpen: false });
-        this.postToggle.emit({ isOpen: false });
-        this.postHide.emit();
+        this.postToggle.emit({ isOpen: true });
+        this.postShow.emit({ first: !this.hasBeenOpened });
+        this.hasBeenOpened = true;
     }
     /**
-     * Runs the animation and emits the toggle/show/hide events in the correct timing
+     * Run the open animation for the popover.
      */
-    async runOpenAnimation(animationFn, element) {
-        let animation;
-        try {
-            animation = animationFn(element);
-            if (!animation) {
-                // Fallback: no animation, just emit open events directly
-                this.postBeforeToggle.emit({ willOpen: true });
-                this.postBeforeShow.emit({ first: this.hasOpenedOnce });
-                this.postToggle.emit({ isOpen: true });
-                this.postShow.emit({ first: this.hasOpenedOnce });
-                return;
-            }
-            this.currentAnimation = animation;
-            if (animation.playState === 'running') {
-                this.postBeforeToggle.emit({ willOpen: true });
-                this.postBeforeShow.emit({ first: this.hasOpenedOnce });
-            }
-            await animation.finished;
-            this.postToggle.emit({ isOpen: true });
-            this.postShow.emit({ first: this.hasOpenedOnce });
-            this.hasOpenedOnce = true;
-        }
-        catch (err) {
-            console.warn('Animation failed or was interrupted:', err);
-            // Reset all states to closing
-            this.postBeforeToggle.emit({ willOpen: false });
-            this.postBeforeShow.emit({ first: this.hasOpenedOnce });
-            this.postToggle.emit({ isOpen: false });
-        }
-        finally {
-            if (this.currentAnimation === animation) {
-                this.currentAnimation = null;
-            }
-        }
+    async runOpenAnimation() {
+        const content = this.getContent();
+        if (!content)
+            return;
+        this.runningAnimation = popIn(content);
+        await this.runningAnimation.finished;
     }
     /**
-     * Start or stop auto updates based on popovercontainer events.
-     * Popovercontainers can be closed or opened with other methods than class members,
-     * therefore listening to the toggle event is safer for cleaning up.
-     * @param e ToggleEvent
+     * Handles the popover's state transition from showing to hidden, emitting related events.
      */
-    handleToggle(e) {
-        this.toggleTimeoutId = globalThis.setTimeout(() => (this.toggleTimeoutId = null), 10);
-        const isOpen = e.newState === 'open';
-        if (isOpen) {
-            this.open();
-        }
-        else {
-            this.close();
-        }
+    async handleClose() {
+        this.postBeforeToggle.emit({ willOpen: false });
+        this.cleanup();
+        this.host.style.removeProperty(AVAILABLE_WIDTH_PROPERTY);
+        this.host.style.removeProperty(AVAILABLE_HEIGHT_PROPERTY);
+        this.host.style.removeProperty(SAFE_SPACE_PROPERTY);
+        this.postToggle.emit({ isOpen: false });
+        this.postHide.emit();
     }
     /**
-     * Start listening for DOM updates, scroll events etc. that have
-     * an influence on popovercontainer positioning
+     * Listen for changes that affect the popover's position and update it accordingly.
      */
-    startAutoupdates() {
-        if (!this.eventTarget || !this.host)
+    startAutoUpdate() {
+        if (!this.host || !this.anchorRef)
             return;
-        this.clearAutoUpdate = autoUpdate(this.eventTarget, this.host, this.updatePosition.bind(this));
+        this.stopAutoUpdate = autoUpdate(this.anchorRef, this.host, () => this.updatePosition(this.autoResize));
     }
-    async updatePosition() {
-        const { x, y, middlewareData, placement } = await this.calculatePosition();
-        // Hide the popover if the target is outside the viewport
+    /**
+     * Updates the position of the popover based on the anchor's position and the specified placement.
+     * @param withSize whether to resize the popover based on the available space.
+     */
+    async updatePosition(withSize = false) {
+        const { x, y, middlewareData, placement } = await this.computePosition(withSize);
+        // Hide the popover if the anchor is outside the scrollport.
         if (middlewareData.hide?.referenceHidden) {
             this.host.hidePopover();
+            return;
         }
-        const currentPlacement = placement.split('-')[0];
-        this.dynamicPlacement = currentPlacement;
-        // Position popover
+        this.side = getSide(placement);
+        // Position the popover.
         this.host.style.left = `${x}px`;
         this.host.style.top = `${y}px`;
-        // Position arrow if enabled
-        if (this.arrow && middlewareData.arrow) {
-            const { x: arrowX, y: arrowY } = middlewareData.arrow;
-            const staticSide = PostPopovercontainer.STATIC_SIDES[currentPlacement];
-            const arrowSizePx = this.arrowRef.offsetWidth;
-            const halfSide = -0.5 * arrowSizePx;
-            if (staticSide) {
-                Object.assign(this.arrowRef.style, {
-                    left: arrowX ? `${arrowX}px` : '',
-                    top: arrowY ? `${arrowY}px` : '',
-                    [staticSide]: `${halfSide}px`,
-                });
-            }
+        // Position the indicator arrow.
+        if (middlewareData.arrow) {
+            this.arrowRef.style.left = middlewareData.arrow.x ? `${middlewareData.arrow.x}px` : '';
+            this.arrowRef.style.top = middlewareData.arrow.y ? `${middlewareData.arrow.y}px` : '';
+            this.arrowRef.style[getOppositeSide(this.side)] = `-${this.arrowRef.offsetWidth / 2}px`;
         }
-        // Handle safe space if enabled
-        if (this.safeSpace && this.eventTarget) {
-            await this.updateSafeSpaceBoundaries(currentPlacement);
+        // Set the safe space polygon.
+        if (middlewareData[SAFE_SPACE_MIDDLEWARE]) {
+            this.host.style.setProperty(SAFE_SPACE_PROPERTY, middlewareData[SAFE_SPACE_MIDDLEWARE].polygon);
         }
     }
-    async calculatePosition() {
-        const gap = this.edgeGap;
-        const isAligned = (this.placement || 'top').includes('-');
-        const flipMiddleware = [
-            // Flip the popover if the target moves outside the viewport
-            flip({ elementContext: 'reference', crossAxis: false }),
-            // Flip the popover if the popover itself moves outside the viewport
-            flip({ elementContext: 'floating', crossAxis: false }),
-        ];
-        const shiftMiddleware = shift({
-            padding: gap,
-            limiter: limitShift({
-                offset: 32,
-            }),
-        });
+    async computePosition(withSize) {
+        const padding = this.edgeGap ?? 0;
         const middleware = [
-            offset(this.offset ?? (this.arrow ? gap + 4 : gap)),
+            offset(this.offset ?? (this.arrow ? padding + 4 : padding)),
             inline(),
-            // Per floating-ui docs: for aligned placements (e.g. bottom-end),
-            // flip should come before shift. For non-aligned, shift before flip.
-            ...(isAligned ? [...flipMiddleware, shiftMiddleware] : [shiftMiddleware, ...flipMiddleware]),
-            size({
-                apply({ availableWidth, elements }) {
-                    Object.assign(elements.floating.style, {
-                        maxWidth: `${availableWidth - gap * 2}px`,
-                    });
-                },
-            }),
         ];
-        if (this.arrow) {
-            middleware.push(arrow({ element: this.arrowRef, padding: gap }));
+        const flipMiddleware = flip({ padding, minSize: this.getContentMinSize() });
+        const shiftMiddleware = shift({ limiter: limitShift({ offset: 32 }), padding });
+        // `flip` should come before `shift` for edge-aligned placements
+        // (see https://floating-ui.com/docs/flip#combining-with-shift).
+        if (this.placement?.includes('-'))
+            middleware.push(flipMiddleware, shiftMiddleware);
+        else
+            middleware.push(shiftMiddleware, flipMiddleware);
+        if (withSize) {
+            middleware.push(size({
+                padding,
+                apply({ availableWidth, availableHeight, elements }) {
+                    elements.floating.style.setProperty(AVAILABLE_WIDTH_PROPERTY, `${Math.max(0, availableWidth)}px`);
+                    elements.floating.style.setProperty(AVAILABLE_HEIGHT_PROPERTY, `${Math.max(0, availableHeight)}px`);
+                },
+            }));
         }
-        // Automatically hide the popover if the target moves outside the scrollport.
-        if (this.autoHide) {
-            // Per floating-ui docs: hide should generally be placed at the end.
+        if (this.arrow)
+            middleware.push(arrow({ element: this.arrowRef, padding }));
+        if (this.safeSpace)
+            middleware.push(safeSpace());
+        // `hide` should generally be placed at the end of the middleware chain
+        // (see https://floating-ui.com/docs/hide#order).
+        if (this.autoHide)
             middleware.push(hide({ strategy: 'referenceHidden' }));
-        }
-        return computePositionWithSafeArea(this.eventTarget, this.host, {
-            placement: this.placement || 'top',
+        return computePositionWithSafeArea(this.anchorRef, this.host, {
+            placement: this.placement ?? 'top',
             strategy: 'fixed',
             middleware,
         });
     }
-    async updateSafeSpaceBoundaries(currentPlacement) {
-        const targetRect = this.eventTarget.getBoundingClientRect();
-        const popoverRect = this.host.getBoundingClientRect();
-        const isVertical = currentPlacement === 'top' || currentPlacement === 'bottom';
-        // Helper function to get positioning data based on placement
-        const getPositioningData = (placement, popoverRect, targetRect) => {
-            if (placement === 'top' || placement === 'bottom') {
-                return {
-                    popover: {
-                        y: placement === 'top' ? popoverRect.bottom : popoverRect.top,
-                        xStart: popoverRect.left,
-                        xEnd: popoverRect.right,
-                    },
-                    trigger: {
-                        y: placement === 'top' ? targetRect.top : targetRect.bottom,
-                        xStart: targetRect.left,
-                        xEnd: targetRect.right,
-                    },
-                };
-            }
-            else {
-                // left or right
-                return {
-                    popover: {
-                        x: placement === 'left' ? popoverRect.right : popoverRect.left,
-                        yStart: popoverRect.top,
-                        yEnd: popoverRect.bottom,
-                    },
-                    trigger: {
-                        x: placement === 'left' ? targetRect.left : targetRect.right,
-                        yStart: targetRect.top,
-                        yEnd: targetRect.bottom,
-                    },
-                };
-            }
-        };
-        const posData = getPositioningData(currentPlacement, popoverRect, targetRect);
-        // Clear previous values
-        PostPopovercontainer.PROPERTIES_TO_CLEAR.forEach(prop => {
-            this.host.style.removeProperty(prop);
-        });
-        if (isVertical) {
-            // For top/bottom placement
-            this.host.style.setProperty('--post-safe-space-popover-y', `${posData.popover.y}px`);
-            this.host.style.setProperty('--post-safe-space-popover-x-start', `${posData.popover.xStart}px`);
-            this.host.style.setProperty('--post-safe-space-popover-x-end', `${posData.popover.xEnd}px`);
-            this.host.style.setProperty('--post-safe-space-trigger-y', `${posData.trigger.y}px`);
-            this.host.style.setProperty('--post-safe-space-trigger-x-start', `${posData.trigger.xStart}px`);
-            this.host.style.setProperty('--post-safe-space-trigger-x-end', `${posData.trigger.xEnd}px`);
-        }
-        else {
-            // For left/right placement
-            this.host.style.setProperty('--post-safe-space-popover-x', `${posData.popover.x}px`);
-            this.host.style.setProperty('--post-safe-space-popover-y-start', `${posData.popover.yStart}px`);
-            this.host.style.setProperty('--post-safe-space-popover-y-end', `${posData.popover.yEnd}px`);
-            this.host.style.setProperty('--post-safe-space-trigger-x', `${posData.trigger.x}px`);
-            this.host.style.setProperty('--post-safe-space-trigger-y-start', `${posData.trigger.yStart}px`);
-            this.host.style.setProperty('--post-safe-space-trigger-y-end', `${posData.trigger.yEnd}px`);
-        }
-    }
     render() {
-        return (h(Host, { key: 'f3ea4bfc9a59faa2fbf1e413a1ec648f598a6779', "data-version": version, popover: "auto" }, h("div", { key: 'a328c73c7e08eca1e423fcbe736798188cca2a87', part: "post-popovercontainer-content", class: "popover-content" }, this.arrow && (h("span", { key: '8fad0095fb8d8c903ba84a639b4efc3e321c6aef', "dynamic-placement": this.dynamicPlacement, class: "arrow", ref: el => {
-                this.arrowRef = el;
-            } })), h("span", { key: 'deadbcc5892ed545a64b4a0e5e0936e0dd1feb70', part: "post-popovercontainer-border-mask" }), h("slot", { key: '48c4db7ab222f3ef18157ce19d8ba15d75441f98' }))));
+        return (h(Host, { key: 'd48b21174f74b790f8a72b4294e9f741c3b64d14', "data-version": version, popover: "auto" }, h("div", { key: '455e84294ecb36e25cc62582eb6c41058f24f6bc', part: "post-popovercontainer-content" }, this.arrow && (h("span", { key: '9d11f2596443876123eeaf5a02430d049c1c8b25', "data-side": this.side, class: "arrow", ref: el => (this.arrowRef = el) })), h("span", { key: 'a562460cdfa5539e7d9c23f1d044a2c045df5b9f', part: "post-popovercontainer-border-mask" }), h("slot", { key: '5aa546bbdf6c70e2a0afabf818d421581060f8a7' }))));
     }
     get host() { return getElement(this); }
 };
@@ -3263,9 +3117,6 @@ __decorate([
 __decorate([
     Type('number')
 ], PostPopovercontainer.prototype, "edgeGap", void 0);
-__decorate([
-    OneOf(['triangle', 'trapezoid'])
-], PostPopovercontainer.prototype, "safeSpace", void 0);
 PostPopovercontainer.style = postPopovercontainerCss();
 
 export { PostPopovercontainer as post_popovercontainer };