@swisspost/design-system-components 9.0.0-next.9 → 10.0.0-next.37

package/dist/components/post-popovercontainer2.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host } from '@stencil/core/internal/client';
+import { I as IS_BROWSER } from './breakpoints.js';
 import { v as version } from './package.js';
 
 /**
@@ -323,9 +324,10 @@ async function detectOverflow(state, options) {
     strategy
   }));
   const rect = elementContext === 'floating' ? {
-    ...rects.floating,
     x,
-    y
+    y,
+    width: rects.floating.width,
+    height: rects.floating.height
   } : rects.reference;
   const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
   const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
@@ -575,10 +577,12 @@ const flip$1 = function (options) {
         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));
-      if (!specifiedFallbackPlacements && fallbackAxisSideDirection !== 'none') {
+      const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
+      if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
         fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
       }
       const placements = [initialPlacement, ...fallbackPlacements];
@@ -603,16 +607,21 @@ const flip$1 = function (options) {
         const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
         const nextPlacement = placements[nextIndex];
         if (nextPlacement) {
-          // Try next placement and re-run the lifecycle.
-          return {
-            data: {
-              index: nextIndex,
-              overflows: overflowsData
-            },
-            reset: {
-              placement: nextPlacement
-            }
-          };
+          var _overflowsData$;
+          const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
+          const hasInitialMainAxisOverflow = ((_overflowsData$ = overflowsData[0]) == null ? void 0 : _overflowsData$.overflows[0]) > 0;
+          if (!ignoreCrossAxisOverflow || hasInitialMainAxisOverflow) {
+            // 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,
@@ -624,8 +633,17 @@ const flip$1 = function (options) {
           switch (fallbackStrategy) {
             case 'bestFit':
               {
-                var _overflowsData$map$so;
-                const placement = (_overflowsData$map$so = overflowsData.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$map$so[0];
+                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;
                 }
@@ -865,6 +883,8 @@ async function convertValueToCoords(state, options) {
   const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
   const rawValue = evaluate(options, state);
+
+  // eslint-disable-next-line prefer-const
   let {
     mainAxis,
     crossAxis,
@@ -874,10 +894,9 @@ async function convertValueToCoords(state, options) {
     crossAxis: 0,
     alignmentAxis: null
   } : {
-    mainAxis: 0,
-    crossAxis: 0,
-    alignmentAxis: null,
-    ...rawValue
+    mainAxis: rawValue.mainAxis || 0,
+    crossAxis: rawValue.crossAxis || 0,
+    alignmentAxis: rawValue.alignmentAxis
   };
   if (alignment && typeof alignmentAxis === 'number') {
     crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
@@ -999,7 +1018,11 @@ const shift$1 = function (options) {
         ...limitedCoords,
         data: {
           x: limitedCoords.x - x,
-          y: limitedCoords.y - y
+          y: limitedCoords.y - y,
+          enabled: {
+            [mainAxis]: checkMainAxis,
+            [crossAxis]: checkCrossAxis
+          }
         }
       };
     }
@@ -1088,6 +1111,7 @@ const size$1 = function (options) {
     name: 'size',
     options,
     async fn(state) {
+      var _state$middlewareData, _state$middlewareData2;
       const {
         placement,
         rects,
@@ -1115,17 +1139,18 @@ const size$1 = function (options) {
         widthSide = side;
         heightSide = alignment === 'end' ? 'top' : 'bottom';
       }
-      const overflowAvailableHeight = height - overflow[heightSide];
-      const overflowAvailableWidth = width - overflow[widthSide];
+      const maximumClippingHeight = height - overflow.top - overflow.bottom;
+      const maximumClippingWidth = width - overflow.left - overflow.right;
+      const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
+      const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
       const noShift = !state.middlewareData.shift;
       let availableHeight = overflowAvailableHeight;
       let availableWidth = overflowAvailableWidth;
-      if (isYAxis) {
-        const maximumClippingWidth = width - overflow.left - overflow.right;
-        availableWidth = alignment || noShift ? min(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
-      } else {
-        const maximumClippingHeight = height - overflow.top - overflow.bottom;
-        availableHeight = alignment || noShift ? min(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
+      if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
+        availableWidth = maximumClippingWidth;
+      }
+      if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
+        availableHeight = maximumClippingHeight;
       }
       if (noShift && !alignment) {
         const xMin = max(overflow.left, 0);
@@ -1156,6 +1181,9 @@ const size$1 = function (options) {
   };
 };
 
+function hasWindow() {
+  return typeof window !== 'undefined';
+}
 function getNodeName(node) {
   if (isNode(node)) {
     return (node.nodeName || '').toLowerCase();
@@ -1174,17 +1202,25 @@ function getDocumentElement(node) {
   return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
 }
 function isNode(value) {
+  if (!hasWindow()) {
+    return false;
+  }
   return value instanceof Node || value instanceof getWindow(value).Node;
 }
 function isElement(value) {
+  if (!hasWindow()) {
+    return false;
+  }
   return value instanceof Element || value instanceof getWindow(value).Element;
 }
 function isHTMLElement(value) {
+  if (!hasWindow()) {
+    return false;
+  }
   return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
 }
 function isShadowRoot(value) {
-  // Browsers without `ShadowRoot` support.
-  if (typeof ShadowRoot === 'undefined') {
+  if (!hasWindow() || typeof ShadowRoot === 'undefined') {
     return false;
   }
   return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
@@ -1195,7 +1231,7 @@ function isOverflowElement(element) {
     overflowX,
     overflowY,
     display
-  } = getComputedStyle(element);
+  } = getComputedStyle$1(element);
   return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
 }
 function isTableElement(element) {
@@ -1212,10 +1248,11 @@ function isTopLayer(element) {
 }
 function isContainingBlock(elementOrCss) {
   const webkit = isWebKit();
-  const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
+  const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
-  return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
+  // https://drafts.csswg.org/css-transforms-2/#individual-transforms
+  return ['transform', 'translate', 'scale', 'rotate', 'perspective'].some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
 }
 function getContainingBlock(element) {
   let currentNode = getParentNode(element);
@@ -1236,7 +1273,7 @@ function isWebKit() {
 function isLastTraversableNode(node) {
   return ['html', 'body', '#document'].includes(getNodeName(node));
 }
-function getComputedStyle(element) {
+function getComputedStyle$1(element) {
   return getWindow(element).getComputedStyle(element);
 }
 function getNodeScroll(element) {
@@ -1288,13 +1325,17 @@ function getOverflowAncestors(node, list, traverseIframes) {
   const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
   const win = getWindow(scrollableAncestor);
   if (isBody) {
-    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], win.frameElement && traverseIframes ? getOverflowAncestors(win.frameElement) : []);
+    const frameElement = getFrameElement(win);
+    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
   }
   return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
 }
+function getFrameElement(win) {
+  return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
+}
 
 function getCssDimensions(element) {
-  const css = getComputedStyle(element);
+  const css = getComputedStyle$1(element);
   // In testing environments, the `width` and `height` properties are empty
   // strings for SVG elements, returning NaN. Fallback to `0` in this case.
   let width = parseFloat(css.width) || 0;
@@ -1395,11 +1436,11 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     const win = getWindow(domElement);
     const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
     let currentWin = win;
-    let currentIFrame = currentWin.frameElement;
+    let currentIFrame = getFrameElement(currentWin);
     while (currentIFrame && offsetParent && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
-      const css = getComputedStyle(currentIFrame);
+      const css = getComputedStyle$1(currentIFrame);
       const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
       const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
       x *= iframeScale.x;
@@ -1409,7 +1450,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
       x += left;
       y += top;
       currentWin = getWindow(currentIFrame);
-      currentIFrame = currentWin.frameElement;
+      currentIFrame = getFrameElement(currentWin);
     }
   }
   return rectToClientRect({
@@ -1420,6 +1461,31 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
   });
 }
 
+// If <html> has a CSS width greater than the viewport, then this will be
+// incorrect for RTL.
+function getWindowScrollBarX(element, rect) {
+  const leftScroll = getNodeScroll(element).scrollLeft;
+  if (!rect) {
+    return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
+  }
+  return rect.left + leftScroll;
+}
+
+function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {
+  if (ignoreScrollbarX === void 0) {
+    ignoreScrollbarX = false;
+  }
+  const htmlRect = documentElement.getBoundingClientRect();
+  const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 :
+  // RTL <body> scrollbar.
+  getWindowScrollBarX(documentElement, htmlRect));
+  const y = htmlRect.top + scroll.scrollTop;
+  return {
+    x,
+    y
+  };
+}
+
 function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
   let {
     elements,
@@ -1451,11 +1517,12 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
       offsets.y = offsetRect.y + offsetParent.clientTop;
     }
   }
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0);
   return {
     width: rect.width * scale.x,
     height: rect.height * scale.y,
-    x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x,
-    y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y
+    x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
+    y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
   };
 }
 
@@ -1463,12 +1530,6 @@ function getClientRects(element) {
   return Array.from(element.getClientRects());
 }
 
-function getWindowScrollBarX(element) {
-  // If <html> has a CSS width greater than the viewport, then this will be
-  // incorrect for RTL.
-  return getBoundingClientRect(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft;
-}
-
 // Gets the entire size of the scrollable document area, even extending outside
 // of the `<html>` and `<body>` rect bounds if horizontally scrollable.
 function getDocumentRect(element) {
@@ -1479,7 +1540,7 @@ function getDocumentRect(element) {
   const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
   let x = -scroll.scrollLeft + getWindowScrollBarX(element);
   const y = -scroll.scrollTop;
-  if (getComputedStyle(body).direction === 'rtl') {
+  if (getComputedStyle$1(body).direction === 'rtl') {
     x += max(html.clientWidth, body.clientWidth) - width;
   }
   return {
@@ -1543,9 +1604,10 @@ function getClientRectFromClippingAncestor(element, clippingAncestor, strategy)
   } else {
     const visualOffsets = getVisualOffsets(element);
     rect = {
-      ...clippingAncestor,
       x: clippingAncestor.x - visualOffsets.x,
-      y: clippingAncestor.y - visualOffsets.y
+      y: clippingAncestor.y - visualOffsets.y,
+      width: clippingAncestor.width,
+      height: clippingAncestor.height
     };
   }
   return rectToClientRect(rect);
@@ -1555,7 +1617,7 @@ function hasFixedPositionAncestor(element, stopNode) {
   if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
     return false;
   }
-  return getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
+  return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
 }
 
 // A "clipping ancestor" is an `overflow` element with the characteristic of
@@ -1568,12 +1630,12 @@ function getClippingElementAncestors(element, cache) {
   }
   let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
   let currentContainingBlockComputedStyle = null;
-  const elementIsFixed = getComputedStyle(element).position === 'fixed';
+  const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
   let currentNode = elementIsFixed ? getParentNode(element) : element;
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
-    const computedStyle = getComputedStyle(currentNode);
+    const computedStyle = getComputedStyle$1(currentNode);
     const currentNodeIsContaining = isContainingBlock(currentNode);
     if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
       currentContainingBlockComputedStyle = null;
@@ -1641,6 +1703,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
     scrollTop: 0
   };
   const offsets = createCoords(0);
+
+  // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
+  // Firefox with layout.scrollbar.side = 3 in about:config to test this.
+  function setLeftRTLScrollbarOffset() {
+    offsets.x = getWindowScrollBarX(documentElement);
+  }
   if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
     if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
@@ -1650,11 +1718,15 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
       offsets.x = offsetRect.x + offsetParent.clientLeft;
       offsets.y = offsetRect.y + offsetParent.clientTop;
     } else if (documentElement) {
-      offsets.x = getWindowScrollBarX(documentElement);
+      setLeftRTLScrollbarOffset();
     }
   }
-  const x = rect.left + scroll.scrollLeft - offsets.x;
-  const y = rect.top + scroll.scrollTop - offsets.y;
+  if (isFixed && !isOffsetParentAnElement && documentElement) {
+    setLeftRTLScrollbarOffset();
+  }
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
+  const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
+  const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
   return {
     x,
     y,
@@ -1664,17 +1736,26 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
 }
 
 function isStaticPositioned(element) {
-  return getComputedStyle(element).position === 'static';
+  return getComputedStyle$1(element).position === 'static';
 }
 
 function getTrueOffsetParent(element, polyfill) {
-  if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') {
+  if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
     return null;
   }
   if (polyfill) {
     return polyfill(element);
   }
-  return element.offsetParent;
+  let rawOffsetParent = element.offsetParent;
+
+  // Firefox returns the <html> element as the offsetParent if it's non-static,
+  // while Chrome and Safari return the <body> element. The <body> element must
+  // be used to perform the correct calculations even if the <html> element is
+  // non-static.
+  if (getDocumentElement(element) === rawOffsetParent) {
+    rawOffsetParent = rawOffsetParent.ownerDocument.body;
+  }
+  return rawOffsetParent;
 }
 
 // Gets the closest ancestor positioned element. Handles some edge cases,
@@ -1720,7 +1801,7 @@ const getElementRects = async function (data) {
 };
 
 function isRTL(element) {
-  return getComputedStyle(element).direction === 'rtl';
+  return getComputedStyle$1(element).direction === 'rtl';
 }
 
 const platform = {
@@ -1736,6 +1817,10 @@ const platform = {
   isRTL
 };
 
+function rectsAreEqual(a, b) {
+  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
+
 // https://samthor.au/2021/observing-dom/
 function observeMove(element, onMove) {
   let io = null;
@@ -1755,12 +1840,13 @@ function observeMove(element, onMove) {
       threshold = 1;
     }
     cleanup();
+    const elementRectForRootMargin = element.getBoundingClientRect();
     const {
       left,
       top,
       width,
       height
-    } = element.getBoundingClientRect();
+    } = elementRectForRootMargin;
     if (!skip) {
       onMove();
     }
@@ -1793,6 +1879,16 @@ function observeMove(element, onMove) {
           refresh(false, ratio);
         }
       }
+      if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
+        // It's possible that even though the ratio is reported as 1, the
+        // element is not actually fully within the IntersectionObserver's root
+        // area anymore. This can happen under performance constraints. This may
+        // be a bug in the browser's IntersectionObserver implementation. To
+        // work around this, we compare the element's bounding rect now with
+        // what it was at the time we created the IntersectionObserver. If they
+        // are not equal then the element moved, so we refresh.
+        refresh();
+      }
       isFirstUpdate = false;
     }
 
@@ -1804,7 +1900,7 @@ function observeMove(element, onMove) {
         // Handle <iframe>s
         root: root.ownerDocument
       });
-    } catch (e) {
+    } catch (_e) {
       io = new IntersectionObserver(handleObserve, options);
     }
     io.observe(element);
@@ -1870,7 +1966,7 @@ function autoUpdate(reference, floating, update, options) {
   }
   function frameLoop() {
     const nextRefRect = getBoundingClientRect(reference);
-    if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
+    if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
       update();
     }
     prevRefRect = nextRefRect;
@@ -1981,7 +2077,385 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
-(()=>{var c=class extends Event{oldState;newState;constructor(t,{oldState:o="",newState:r="",...i}={}){super(t,i),this.oldState=String(o||""),this.newState=String(r||"");}},R=new WeakMap;function A(e,t,o){R.set(e,setTimeout(()=>{R.has(e)&&e.dispatchEvent(new c("toggle",{cancelable:!1,oldState:t,newState:o}));},0));}var D=globalThis.ShadowRoot||function(){},z=globalThis.HTMLDialogElement||function(){},M=new WeakMap,p=new WeakMap,h=new WeakMap;function L(e){return h.get(e)||"hidden"}var b=new WeakMap;function O(e){let t=e.popoverTargetElement;if(!(t instanceof HTMLElement))return;let o=L(t);e.popoverTargetAction==="show"&&o==="showing"||e.popoverTargetAction==="hide"&&o==="hidden"||(o==="showing"?m(t,!0,!0):d(t,!1)&&(b.set(t,e),S(t)));}function d(e,t){return !(e.popover!=="auto"&&e.popover!=="manual"||!e.isConnected||t&&L(e)!=="showing"||!t&&L(e)!=="hidden"||e instanceof z&&e.hasAttribute("open")||document.fullscreenElement===e)}function N(e){return e?Array.from(p.get(e.ownerDocument)||[]).indexOf(e)+1:0}function V(e){let t=W(e),o=U(e);return N(t)>N(o)?t:o}function y(e){let t=p.get(e);for(let o of t||[])if(!o.isConnected)t.delete(o);else return o;return null}function v(e){return typeof e.getRootNode=="function"?e.getRootNode():e.parentNode?v(e.parentNode):e}function W(e){for(;e;){if(e instanceof HTMLElement&&e.popover==="auto"&&h.get(e)==="showing")return e;if(e=e.parentElement||v(e),e instanceof D&&(e=e.host),e instanceof Document)return}}function U(e){for(;e;){let t=e.popoverTargetElement;if(t instanceof HTMLElement)return t;if(e=e.parentElement||v(e),e instanceof D&&(e=e.host),e instanceof Document)return}}function G(e){let t=new Map,o=0,r=e.ownerDocument;for(let a of p.get(r)||[])t.set(a,o),o+=1;t.set(e,o),o+=1;let i=null;function l(a){let g=W(a);if(g===null)return null;let n=t.get(g);(i===null||t.get(i)<n)&&(i=g);}return l(e?.parentElement),i}function Q(e){return e.hidden||e instanceof D||(e instanceof HTMLButtonElement||e instanceof HTMLInputElement||e instanceof HTMLSelectElement||e instanceof HTMLTextAreaElement||e instanceof HTMLOptGroupElement||e instanceof HTMLOptionElement||e instanceof HTMLFieldSetElement)&&e.disabled||e instanceof HTMLInputElement&&e.type==="hidden"||e instanceof HTMLAnchorElement&&e.href===""?!1:typeof e.tabIndex=="number"&&e.tabIndex!==-1}function _(e){if(e.shadowRoot&&e.shadowRoot.delegatesFocus!==!0)return null;let t=e;t.shadowRoot&&(t=t.shadowRoot);let o=t.querySelector("[autofocus]");if(o)return o;{let l=t.querySelectorAll("slot");for(let a of l){let g=a.assignedElements({flatten:!0});for(let n of g){if(n.hasAttribute("autofocus"))return n;if(o=n.querySelector("[autofocus]"),o)return o}}}let r=e.ownerDocument.createTreeWalker(t,NodeFilter.SHOW_ELEMENT),i=r.currentNode;for(;i;){if(Q(i))return i;i=r.nextNode();}}function $(e){_(e)?.focus();}var H=new WeakMap;function S(e){if(!d(e,!1))return;let t=e.ownerDocument;if(!e.dispatchEvent(new c("beforetoggle",{cancelable:!0,oldState:"closed",newState:"open"}))||!d(e,!1))return;let o=!1;if(e.popover==="auto"){let i=e.getAttribute("popover"),l=G(e)||t;if(T(l,!1,!0),i!==e.getAttribute("popover")||!d(e,!1))return}y(t)||(o=!0),H.delete(e);let r=t.activeElement;e.classList.add(":popover-open"),h.set(e,"showing"),M.has(t)||M.set(t,new Set),M.get(t).add(e),$(e),e.popover==="auto"&&(p.has(t)||p.set(t,new Set),p.get(t).add(e),q(b.get(e),!0)),o&&r&&e.popover==="auto"&&H.set(e,r),A(e,"closed","open");}function m(e,t=!1,o=!1){if(!d(e,!0))return;let r=e.ownerDocument;if(e.popover==="auto"&&(T(e,t,o),!d(e,!0))||(q(b.get(e),!1),b.delete(e),o&&(e.dispatchEvent(new c("beforetoggle",{oldState:"open",newState:"closed"})),!d(e,!0))))return;M.get(r)?.delete(e),p.get(r)?.delete(e),e.classList.remove(":popover-open"),h.set(e,"hidden"),o&&A(e,"open","closed");let i=H.get(e);i&&(H.delete(e),t&&i.focus());}function F(e,t=!1,o=!1){let r=y(e);for(;r;)m(r,t,o),r=y(e);}function T(e,t,o){let r=e.ownerDocument||e;if(e instanceof Document)return F(r,t,o);let i=null,l=!1;for(let a of p.get(r)||[])if(a===e)l=!0;else if(l){i=a;break}if(!l)return F(r,t,o);for(;i&&L(i)==="showing"&&p.get(r)?.size;)m(i,t,o);}var P=new WeakMap;function x(e){if(!e.isTrusted)return;let t=e.composedPath()[0];if(!t)return;let o=t.ownerDocument;if(!y(o))return;let i=V(t);if(i&&e.type==="pointerdown")P.set(o,i);else if(e.type==="pointerup"){let l=P.get(o)===i;P.delete(o),l&&T(i||o,!1,!0);}}var k=new WeakMap;function q(e,t=!1){if(!e)return;k.has(e)||k.set(e,e.getAttribute("aria-expanded"));let o=e.popoverTargetElement;if(o instanceof HTMLElement&&o.popover==="auto")e.setAttribute("aria-expanded",String(t));else {let r=k.get(e);r?e.setAttribute("aria-expanded",r):e.removeAttribute("aria-expanded");}}var B=globalThis.ShadowRoot||function(){};function j(){return typeof HTMLElement<"u"&&typeof HTMLElement.prototype=="object"&&"popover"in HTMLElement.prototype}function f(e,t,o){let r=e[t];Object.defineProperty(e,t,{value(i){return r.call(this,o(i))}});}var J=/(^|[^\\]):popover-open\b/g,C=`
+// src/events.ts
+var ToggleEvent = class extends Event {
+  oldState;
+  newState;
+  constructor(type, { oldState = "", newState = "", ...init } = {}) {
+    super(type, init);
+    this.oldState = String(oldState || "");
+    this.newState = String(newState || "");
+  }
+};
+var popoverToggleTaskQueue = /* @__PURE__ */ new WeakMap();
+function queuePopoverToggleEventTask(element, oldState, newState) {
+  popoverToggleTaskQueue.set(
+    element,
+    setTimeout(() => {
+      if (!popoverToggleTaskQueue.has(element)) return;
+      element.dispatchEvent(
+        new ToggleEvent("toggle", {
+          cancelable: false,
+          oldState,
+          newState
+        })
+      );
+    }, 0)
+  );
+}
+
+// src/popover-helpers.ts
+var ShadowRoot$1 = globalThis.ShadowRoot || function() {
+};
+var HTMLDialogElement = globalThis.HTMLDialogElement || function() {
+};
+var topLayerElements = /* @__PURE__ */ new WeakMap();
+var autoPopoverList = /* @__PURE__ */ new WeakMap();
+var visibilityState = /* @__PURE__ */ new WeakMap();
+function getPopoverVisibilityState(popover) {
+  return visibilityState.get(popover) || "hidden";
+}
+var popoverInvoker = /* @__PURE__ */ new WeakMap();
+function popoverTargetAttributeActivationBehavior(element) {
+  const popover = element.popoverTargetElement;
+  if (!(popover instanceof HTMLElement)) {
+    return;
+  }
+  const visibility = getPopoverVisibilityState(popover);
+  if (element.popoverTargetAction === "show" && visibility === "showing") {
+    return;
+  }
+  if (element.popoverTargetAction === "hide" && visibility === "hidden") return;
+  if (visibility === "showing") {
+    hidePopover(popover, true, true);
+  } else if (checkPopoverValidity(popover, false)) {
+    popoverInvoker.set(popover, element);
+    showPopover(popover);
+  }
+}
+function checkPopoverValidity(element, expectedToBeShowing) {
+  if (element.popover !== "auto" && element.popover !== "manual") {
+    return false;
+  }
+  if (!element.isConnected) return false;
+  if (expectedToBeShowing && getPopoverVisibilityState(element) !== "showing") {
+    return false;
+  }
+  if (!expectedToBeShowing && getPopoverVisibilityState(element) !== "hidden") {
+    return false;
+  }
+  if (element instanceof HTMLDialogElement && element.hasAttribute("open")) {
+    return false;
+  }
+  if (document.fullscreenElement === element) return false;
+  return true;
+}
+function getStackPosition(popover) {
+  if (!popover) return 0;
+  return Array.from(autoPopoverList.get(popover.ownerDocument) || []).indexOf(
+    popover
+  ) + 1;
+}
+function topMostClickedPopover(target) {
+  const clickedPopover = nearestInclusiveOpenPopover(target);
+  const invokerPopover = nearestInclusiveTargetPopoverForInvoker(target);
+  if (getStackPosition(clickedPopover) > getStackPosition(invokerPopover)) {
+    return clickedPopover;
+  }
+  return invokerPopover;
+}
+function topMostAutoPopover(document2) {
+  const documentPopovers = autoPopoverList.get(document2);
+  for (const popover of documentPopovers || []) {
+    if (!popover.isConnected) {
+      documentPopovers.delete(popover);
+    } else {
+      return popover;
+    }
+  }
+  return null;
+}
+function getRootNode(node) {
+  if (typeof node.getRootNode === "function") {
+    return node.getRootNode();
+  }
+  if (node.parentNode) return getRootNode(node.parentNode);
+  return node;
+}
+function nearestInclusiveOpenPopover(node) {
+  while (node) {
+    if (node instanceof HTMLElement && node.popover === "auto" && visibilityState.get(node) === "showing") {
+      return node;
+    }
+    node = node instanceof Element && node.assignedSlot || node.parentElement || getRootNode(node);
+    if (node instanceof ShadowRoot$1) node = node.host;
+    if (node instanceof Document) return;
+  }
+}
+function nearestInclusiveTargetPopoverForInvoker(node) {
+  while (node) {
+    const nodePopover = node.popoverTargetElement;
+    if (nodePopover instanceof HTMLElement) return nodePopover;
+    node = node.parentElement || getRootNode(node);
+    if (node instanceof ShadowRoot$1) node = node.host;
+    if (node instanceof Document) return;
+  }
+}
+function topMostPopoverAncestor(newPopover) {
+  const popoverPositions = /* @__PURE__ */ new Map();
+  let i = 0;
+  for (const popover of autoPopoverList.get(newPopover.ownerDocument) || []) {
+    popoverPositions.set(popover, i);
+    i += 1;
+  }
+  popoverPositions.set(newPopover, i);
+  i += 1;
+  let topMostPopoverAncestor2 = null;
+  function checkAncestor(candidate) {
+    const candidateAncestor = nearestInclusiveOpenPopover(candidate);
+    if (candidateAncestor === null) return null;
+    const candidatePosition = popoverPositions.get(candidateAncestor);
+    if (topMostPopoverAncestor2 === null || popoverPositions.get(topMostPopoverAncestor2) < candidatePosition) {
+      topMostPopoverAncestor2 = candidateAncestor;
+    }
+  }
+  checkAncestor(newPopover.parentElement || getRootNode(newPopover));
+  return topMostPopoverAncestor2;
+}
+function isFocusable(focusTarget) {
+  if (focusTarget.hidden || focusTarget instanceof ShadowRoot$1) return false;
+  if (focusTarget instanceof HTMLButtonElement || focusTarget instanceof HTMLInputElement || focusTarget instanceof HTMLSelectElement || focusTarget instanceof HTMLTextAreaElement || focusTarget instanceof HTMLOptGroupElement || focusTarget instanceof HTMLOptionElement || focusTarget instanceof HTMLFieldSetElement) {
+    if (focusTarget.disabled) return false;
+  }
+  if (focusTarget instanceof HTMLInputElement && focusTarget.type === "hidden") {
+    return false;
+  }
+  if (focusTarget instanceof HTMLAnchorElement && focusTarget.href === "") {
+    return false;
+  }
+  return typeof focusTarget.tabIndex === "number" && focusTarget.tabIndex !== -1;
+}
+function focusDelegate(focusTarget) {
+  if (focusTarget.shadowRoot && focusTarget.shadowRoot.delegatesFocus !== true) {
+    return null;
+  }
+  let whereToLook = focusTarget;
+  if (whereToLook.shadowRoot) {
+    whereToLook = whereToLook.shadowRoot;
+  }
+  let autoFocusDelegate = whereToLook.querySelector("[autofocus]");
+  if (autoFocusDelegate) {
+    return autoFocusDelegate;
+  } else {
+    const slots = whereToLook.querySelectorAll("slot");
+    for (const slot of slots) {
+      const assignedElements = slot.assignedElements({ flatten: true });
+      for (const el of assignedElements) {
+        if (el.hasAttribute("autofocus")) {
+          return el;
+        } else {
+          autoFocusDelegate = el.querySelector("[autofocus]");
+          if (autoFocusDelegate) {
+            return autoFocusDelegate;
+          }
+        }
+      }
+    }
+  }
+  const walker = focusTarget.ownerDocument.createTreeWalker(
+    whereToLook,
+    NodeFilter.SHOW_ELEMENT
+  );
+  let descendant = walker.currentNode;
+  while (descendant) {
+    if (isFocusable(descendant)) {
+      return descendant;
+    }
+    descendant = walker.nextNode();
+  }
+}
+function popoverFocusingSteps(subject) {
+  focusDelegate(subject)?.focus();
+}
+var previouslyFocusedElements = /* @__PURE__ */ new WeakMap();
+function showPopover(element) {
+  if (!checkPopoverValidity(element, false)) {
+    return;
+  }
+  const document2 = element.ownerDocument;
+  if (!element.dispatchEvent(
+    new ToggleEvent("beforetoggle", {
+      cancelable: true,
+      oldState: "closed",
+      newState: "open"
+    })
+  )) {
+    return;
+  }
+  if (!checkPopoverValidity(element, false)) {
+    return;
+  }
+  let shouldRestoreFocus = false;
+  if (element.popover === "auto") {
+    const originalType = element.getAttribute("popover");
+    const ancestor = topMostPopoverAncestor(element) || document2;
+    hideAllPopoversUntil(ancestor, false, true);
+    if (originalType !== element.getAttribute("popover") || !checkPopoverValidity(element, false)) {
+      return;
+    }
+  }
+  if (!topMostAutoPopover(document2)) {
+    shouldRestoreFocus = true;
+  }
+  previouslyFocusedElements.delete(element);
+  const originallyFocusedElement = document2.activeElement;
+  element.classList.add(":popover-open");
+  visibilityState.set(element, "showing");
+  if (!topLayerElements.has(document2)) {
+    topLayerElements.set(document2, /* @__PURE__ */ new Set());
+  }
+  topLayerElements.get(document2).add(element);
+  popoverFocusingSteps(element);
+  if (element.popover === "auto") {
+    if (!autoPopoverList.has(document2)) {
+      autoPopoverList.set(document2, /* @__PURE__ */ new Set());
+    }
+    autoPopoverList.get(document2).add(element);
+    setInvokerAriaExpanded(popoverInvoker.get(element), true);
+  }
+  if (shouldRestoreFocus && originallyFocusedElement && element.popover === "auto") {
+    previouslyFocusedElements.set(element, originallyFocusedElement);
+  }
+  queuePopoverToggleEventTask(element, "closed", "open");
+}
+function hidePopover(element, focusPreviousElement = false, fireEvents = false) {
+  if (!checkPopoverValidity(element, true)) {
+    return;
+  }
+  const document2 = element.ownerDocument;
+  if (element.popover === "auto") {
+    hideAllPopoversUntil(element, focusPreviousElement, fireEvents);
+    if (!checkPopoverValidity(element, true)) {
+      return;
+    }
+  }
+  setInvokerAriaExpanded(popoverInvoker.get(element), false);
+  popoverInvoker.delete(element);
+  if (fireEvents) {
+    element.dispatchEvent(
+      new ToggleEvent("beforetoggle", {
+        oldState: "open",
+        newState: "closed"
+      })
+    );
+    if (!checkPopoverValidity(element, true)) {
+      return;
+    }
+  }
+  topLayerElements.get(document2)?.delete(element);
+  autoPopoverList.get(document2)?.delete(element);
+  element.classList.remove(":popover-open");
+  visibilityState.set(element, "hidden");
+  if (fireEvents) {
+    queuePopoverToggleEventTask(element, "open", "closed");
+  }
+  const previouslyFocusedElement = previouslyFocusedElements.get(element);
+  if (previouslyFocusedElement) {
+    previouslyFocusedElements.delete(element);
+    if (focusPreviousElement) {
+      previouslyFocusedElement.focus();
+    }
+  }
+}
+function closeAllOpenPopovers(document2, focusPreviousElement = false, fireEvents = false) {
+  let popover = topMostAutoPopover(document2);
+  while (popover) {
+    hidePopover(popover, focusPreviousElement, fireEvents);
+    popover = topMostAutoPopover(document2);
+  }
+}
+function hideAllPopoversUntil(endpoint, focusPreviousElement, fireEvents) {
+  const document2 = endpoint.ownerDocument || endpoint;
+  if (endpoint instanceof Document) {
+    return closeAllOpenPopovers(document2, focusPreviousElement, fireEvents);
+  }
+  let lastToHide = null;
+  let foundEndpoint = false;
+  for (const popover of autoPopoverList.get(document2) || []) {
+    if (popover === endpoint) {
+      foundEndpoint = true;
+    } else if (foundEndpoint) {
+      lastToHide = popover;
+      break;
+    }
+  }
+  if (!foundEndpoint) {
+    return closeAllOpenPopovers(document2, focusPreviousElement, fireEvents);
+  }
+  while (lastToHide && getPopoverVisibilityState(lastToHide) === "showing" && autoPopoverList.get(document2)?.size) {
+    hidePopover(lastToHide, focusPreviousElement, fireEvents);
+  }
+}
+var popoverPointerDownTargets = /* @__PURE__ */ new WeakMap();
+function lightDismissOpenPopovers(event) {
+  if (!event.isTrusted) return;
+  const target = event.composedPath()[0];
+  if (!target) return;
+  const document2 = target.ownerDocument;
+  const topMostPopover = topMostAutoPopover(document2);
+  if (!topMostPopover) return;
+  const ancestor = topMostClickedPopover(target);
+  if (ancestor && event.type === "pointerdown") {
+    popoverPointerDownTargets.set(document2, ancestor);
+  } else if (event.type === "pointerup") {
+    const sameTarget = popoverPointerDownTargets.get(document2) === ancestor;
+    popoverPointerDownTargets.delete(document2);
+    if (sameTarget) {
+      hideAllPopoversUntil(ancestor || document2, false, true);
+    }
+  }
+}
+var initialAriaExpandedValue = /* @__PURE__ */ new WeakMap();
+function setInvokerAriaExpanded(el, force = false) {
+  if (!el) return;
+  if (!initialAriaExpandedValue.has(el)) {
+    initialAriaExpandedValue.set(el, el.getAttribute("aria-expanded"));
+  }
+  const popover = el.popoverTargetElement;
+  if (popover instanceof HTMLElement && popover.popover === "auto") {
+    el.setAttribute("aria-expanded", String(force));
+  } else {
+    const initialValue = initialAriaExpandedValue.get(el);
+    if (!initialValue) {
+      el.removeAttribute("aria-expanded");
+    } else {
+      el.setAttribute("aria-expanded", initialValue);
+    }
+  }
+}
+
+// src/popover.ts
+var ShadowRoot2 = globalThis.ShadowRoot || function() {
+};
+function isSupported() {
+  return typeof HTMLElement !== "undefined" && typeof HTMLElement.prototype === "object" && "popover" in HTMLElement.prototype;
+}
+function patchSelectorFn(object, name, mapper) {
+  const original = object[name];
+  Object.defineProperty(object, name, {
+    value(selector) {
+      return original.call(this, mapper(selector));
+    }
+  });
+}
+var nonEscapedPopoverSelector = /(^|[^\\]):popover-open\b/g;
+function hasLayerSupport() {
+  return typeof globalThis.CSSLayerBlockRule === "function";
+}
+function getStyles() {
+  const useLayer = hasLayerSupport();
+  return `
+${useLayer ? "@layer popover-polyfill {" : ""}
   :where([popover]) {
     position: fixed;
     z-index: 2147483647;
@@ -1999,6 +2473,14 @@ const computePosition = (reference, floating, options) => {
     margin: auto;
   }
 
+  :where([popover]:not(.\\:popover-open)) {
+    display: none;
+  }
+
+  :where(dialog[popover].\\:popover-open) {
+    display: block;
+  }
+
   :where(dialog[popover][open]) {
     display: revert;
   }
@@ -2033,21 +2515,233 @@ const computePosition = (reference, floating, options) => {
       bottom: 0;
     }
   }
-
-  :where([popover]:not(.\\:popover-open)) {
-    display: none;
+${useLayer ? "}" : ""}
+`;
+}
+var popoverStyleSheet = null;
+function injectStyles(root) {
+  const styles = getStyles();
+  if (popoverStyleSheet === null) {
+    try {
+      popoverStyleSheet = new CSSStyleSheet();
+      popoverStyleSheet.replaceSync(styles);
+    } catch {
+      popoverStyleSheet = false;
+    }
+  }
+  if (popoverStyleSheet === false) {
+    const sheet = document.createElement("style");
+    sheet.textContent = styles;
+    if (root instanceof Document) {
+      root.head.prepend(sheet);
+    } else {
+      root.prepend(sheet);
+    }
+  } else {
+    root.adoptedStyleSheets = [popoverStyleSheet, ...root.adoptedStyleSheets];
+  }
+}
+function apply() {
+  if (typeof window === "undefined") return;
+  window.ToggleEvent = window.ToggleEvent || ToggleEvent;
+  function rewriteSelector(selector) {
+    if (selector?.includes(":popover-open")) {
+      selector = selector.replace(
+        nonEscapedPopoverSelector,
+        "$1.\\:popover-open"
+      );
+    }
+    return selector;
+  }
+  patchSelectorFn(Document.prototype, "querySelector", rewriteSelector);
+  patchSelectorFn(Document.prototype, "querySelectorAll", rewriteSelector);
+  patchSelectorFn(Element.prototype, "querySelector", rewriteSelector);
+  patchSelectorFn(Element.prototype, "querySelectorAll", rewriteSelector);
+  patchSelectorFn(Element.prototype, "matches", rewriteSelector);
+  patchSelectorFn(Element.prototype, "closest", rewriteSelector);
+  patchSelectorFn(
+    DocumentFragment.prototype,
+    "querySelectorAll",
+    rewriteSelector
+  );
+  Object.defineProperties(HTMLElement.prototype, {
+    popover: {
+      enumerable: true,
+      configurable: true,
+      get() {
+        if (!this.hasAttribute("popover")) return null;
+        const value = (this.getAttribute("popover") || "").toLowerCase();
+        if (value === "" || value == "auto") return "auto";
+        return "manual";
+      },
+      set(value) {
+        if (value === null) {
+          this.removeAttribute("popover");
+        } else {
+          this.setAttribute("popover", value);
+        }
+      }
+    },
+    showPopover: {
+      enumerable: true,
+      configurable: true,
+      value() {
+        showPopover(this);
+      }
+    },
+    hidePopover: {
+      enumerable: true,
+      configurable: true,
+      value() {
+        hidePopover(this, true, true);
+      }
+    },
+    togglePopover: {
+      enumerable: true,
+      configurable: true,
+      value(force) {
+        if (visibilityState.get(this) === "showing" && force === void 0 || force === false) {
+          hidePopover(this, true, true);
+        } else if (force === void 0 || force === true) {
+          showPopover(this);
+        }
+      }
+    }
+  });
+  const originalAttachShadow = Element.prototype.attachShadow;
+  if (originalAttachShadow) {
+    Object.defineProperties(Element.prototype, {
+      attachShadow: {
+        enumerable: true,
+        configurable: true,
+        writable: true,
+        value(options) {
+          const shadowRoot = originalAttachShadow.call(this, options);
+          injectStyles(shadowRoot);
+          return shadowRoot;
+        }
+      }
+    });
   }
-`,E=null;function I(e){if(E===null)try{E=new CSSStyleSheet,E.replaceSync(C);}catch{E=!1;}if(E===!1){let t=document.createElement("style");t.textContent=C,e instanceof Document?e.head.prepend(t):e.prepend(t);}else e.adoptedStyleSheets=[E,...e.adoptedStyleSheets];}function K(){window.ToggleEvent=window.ToggleEvent||c;function e(n){return n?.includes(":popover-open")&&(n=n.replace(J,"$1.\\:popover-open")),n}f(Document.prototype,"querySelector",e),f(Document.prototype,"querySelectorAll",e),f(Element.prototype,"querySelector",e),f(Element.prototype,"querySelectorAll",e),f(Element.prototype,"matches",e),f(Element.prototype,"closest",e),f(DocumentFragment.prototype,"querySelectorAll",e),f(DocumentFragment.prototype,"querySelectorAll",e),Object.defineProperties(HTMLElement.prototype,{popover:{enumerable:!0,configurable:!0,get(){if(!this.hasAttribute("popover"))return null;let n=(this.getAttribute("popover")||"").toLowerCase();return n===""||n=="auto"?"auto":"manual"},set(n){this.setAttribute("popover",n);}},showPopover:{enumerable:!0,configurable:!0,value(){S(this);}},hidePopover:{enumerable:!0,configurable:!0,value(){m(this,!0,!0);}},togglePopover:{enumerable:!0,configurable:!0,value(n){h.get(this)==="showing"&&n===void 0||n===!1?m(this,!0,!0):(n===void 0||n===!0)&&S(this);}}});let t=Element.prototype.attachShadow;t&&Object.defineProperties(Element.prototype,{attachShadow:{enumerable:!0,configurable:!0,writable:!0,value(n){let s=t.call(this,n);return I(s),s}}});let o=HTMLElement.prototype.attachInternals;o&&Object.defineProperties(HTMLElement.prototype,{attachInternals:{enumerable:!0,configurable:!0,writable:!0,value(){let n=o.call(this);return n.shadowRoot&&I(n.shadowRoot),n}}});let r=new WeakMap;function i(n){Object.defineProperties(n.prototype,{popoverTargetElement:{enumerable:!0,configurable:!0,set(s){if(s===null)this.removeAttribute("popovertarget"),r.delete(this);else if(s instanceof Element)this.setAttribute("popovertarget",""),r.set(this,s);else throw new TypeError("popoverTargetElement must be an element or null")},get(){if(this.localName!=="button"&&this.localName!=="input"||this.localName==="input"&&this.type!=="reset"&&this.type!=="image"&&this.type!=="button"||this.disabled||this.form&&this.type==="submit")return null;let s=r.get(this);if(s&&s.isConnected)return s;if(s&&!s.isConnected)return r.delete(this),null;let u=v(this),w=this.getAttribute("popovertarget");return (u instanceof Document||u instanceof B)&&w&&u.getElementById(w)||null}},popoverTargetAction:{enumerable:!0,configurable:!0,get(){let s=(this.getAttribute("popovertargetaction")||"").toLowerCase();return s==="show"||s==="hide"?s:"toggle"},set(s){this.setAttribute("popovertargetaction",s);}}});}i(HTMLButtonElement),i(HTMLInputElement);let l=n=>{if(!n.isTrusted)return;let s=n.composedPath()[0];if(!(s instanceof Element)||s?.shadowRoot)return;let u=v(s);if(!(u instanceof B||u instanceof Document))return;let w=s.closest("[popovertargetaction],[popovertarget]");if(w){O(w),n.preventDefault();return}},a=n=>{let s=n.key,u=n.target;!n.defaultPrevented&&u&&(s==="Escape"||s==="Esc")&&T(u.ownerDocument,!0,!0);};(n=>{n.addEventListener("click",l),n.addEventListener("keydown",a),n.addEventListener("pointerdown",x),n.addEventListener("pointerup",x);})(document),I(document);}j()||K();})();
+  const originalAttachInternals = HTMLElement.prototype.attachInternals;
+  if (originalAttachInternals) {
+    Object.defineProperties(HTMLElement.prototype, {
+      attachInternals: {
+        enumerable: true,
+        configurable: true,
+        writable: true,
+        value() {
+          const internals = originalAttachInternals.call(this);
+          if (internals.shadowRoot) {
+            injectStyles(internals.shadowRoot);
+          }
+          return internals;
+        }
+      }
+    });
+  }
+  const popoverTargetAssociatedElements = /* @__PURE__ */ new WeakMap();
+  function applyPopoverInvokerElementMixin(ElementClass) {
+    Object.defineProperties(ElementClass.prototype, {
+      popoverTargetElement: {
+        enumerable: true,
+        configurable: true,
+        set(targetElement) {
+          if (targetElement === null) {
+            this.removeAttribute("popovertarget");
+            popoverTargetAssociatedElements.delete(this);
+          } else if (!(targetElement instanceof Element)) {
+            throw new TypeError(
+              `popoverTargetElement must be an element or null`
+            );
+          } else {
+            this.setAttribute("popovertarget", "");
+            popoverTargetAssociatedElements.set(this, targetElement);
+          }
+        },
+        get() {
+          if (this.localName !== "button" && this.localName !== "input") {
+            return null;
+          }
+          if (this.localName === "input" && this.type !== "reset" && this.type !== "image" && this.type !== "button") {
+            return null;
+          }
+          if (this.disabled) {
+            return null;
+          }
+          if (this.form && this.type === "submit") {
+            return null;
+          }
+          const targetElement = popoverTargetAssociatedElements.get(this);
+          if (targetElement && targetElement.isConnected) {
+            return targetElement;
+          } else if (targetElement && !targetElement.isConnected) {
+            popoverTargetAssociatedElements.delete(this);
+            return null;
+          }
+          const root = getRootNode(this);
+          const idref = this.getAttribute("popovertarget");
+          if ((root instanceof Document || root instanceof ShadowRoot2) && idref) {
+            return root.getElementById(idref) || null;
+          }
+          return null;
+        }
+      },
+      popoverTargetAction: {
+        enumerable: true,
+        configurable: true,
+        get() {
+          const value = (this.getAttribute("popovertargetaction") || "").toLowerCase();
+          if (value === "show" || value === "hide") return value;
+          return "toggle";
+        },
+        set(value) {
+          this.setAttribute("popovertargetaction", value);
+        }
+      }
+    });
+  }
+  applyPopoverInvokerElementMixin(HTMLButtonElement);
+  applyPopoverInvokerElementMixin(HTMLInputElement);
+  const handleInvokerActivation = (event) => {
+    const composedPath = event.composedPath();
+    const target = composedPath[0];
+    if (!(target instanceof Element) || target?.shadowRoot) {
+      return;
+    }
+    const root = getRootNode(target);
+    if (!(root instanceof ShadowRoot2 || root instanceof Document)) {
+      return;
+    }
+    const invoker = composedPath.find(
+      (el) => el.matches?.("[popovertargetaction],[popovertarget]")
+    );
+    if (invoker) {
+      popoverTargetAttributeActivationBehavior(invoker);
+      event.preventDefault();
+      return;
+    }
+  };
+  const onKeydown = (event) => {
+    const key = event.key;
+    const target = event.target;
+    if (!event.defaultPrevented && target && (key === "Escape" || key === "Esc")) {
+      hideAllPopoversUntil(target.ownerDocument, true, true);
+    }
+  };
+  const addEventListeners = (root) => {
+    root.addEventListener("click", handleInvokerActivation);
+    root.addEventListener("keydown", onKeydown);
+    root.addEventListener("pointerdown", lightDismissOpenPopovers);
+    root.addEventListener("pointerup", lightDismissOpenPopovers);
+  };
+  addEventListeners(document);
+  injectStyles(document);
+}
 
-const postPopovercontainerCss = "@layer polyfill{@supports not selector(:popover-open){[popover]:not(.\\:popover-open){display:none}}}:where(post-popovercontainer){box-shadow:.5px 3px 4px rgba(0,0,0,.1),2px 4px 10px 4px rgba(0,0,0,.12);position:fixed;z-index:1060;width:max-content;margin:0;padding:0;box-sizing:border-box;color:var(--post-contrast-color);background-color:rgb(var(--post-bg-rgb));border:2px solid rgba(0,0,0,0);border-radius:4px;overflow:visible}:where(post-popovercontainer)[tooltip]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:where(post-popovercontainer) .arrow{position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:where(post-popovercontainer) .arrow.top{border-left:2px solid rgba(0,0,0,0);border-top:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.right{border-right:2px solid rgba(0,0,0,0);border-top:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.left{border-left:2px solid rgba(0,0,0,0);border-bottom:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.bottom{border-right:2px solid rgba(0,0,0,0);border-bottom:2px solid rgba(0,0,0,0)}";
+const postPopovercontainerCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}@layer polyfill{@supports not selector(:popover-open){[popover]:not(.\\:popover-open){display:none}}}:where(post-popovercontainer){background-color:rgba(0,0,0,0);border:rgba(0,0,0,0);position:fixed;margin:0;padding:0;overflow:visible}:where(post-popovercontainer)>div{box-shadow:var(--post-device-elevation-300);width:max-content;max-width:100%;color:var(--post-current-palette-fg);background-color:var(--post-current-palette-bg);border:2px solid rgba(0,0,0,0);border-radius:4px}:where(post-popovercontainer)>div.animate-pop-in{animation:popIn .25s ease-out forwards}:where(post-popovercontainer)[tooltip]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:where(post-popovercontainer)[safe-space]::after{content:\"\";position:fixed;inset:0;z-index:-1;pointer-events:auto}:where(post-popovercontainer)[safe-space=triangle]::after{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)))}:where(post-popovercontainer)[safe-space=trapezoid]::after{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)))}:where(post-popovercontainer):not(:has(.arrow))>div{box-shadow:var(--post-device-elevation-300)}:where(post-popovercontainer):has(.arrow)>div{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))}:where(post-popovercontainer):has(.arrow.top)>div{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))}:where(post-popovercontainer):has(.arrow.left)>div{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))}:where(post-popovercontainer):has(.arrow.right)>div{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))}:where(post-popovercontainer) .arrow{position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:where(post-popovercontainer) .arrow.top{border-block-start:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.right{border-block-start:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.left{border-block-end:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.bottom{border-block-end:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0)}";
 const PostPopovercontainerStyle0 = postPopovercontainerCss;
 
-const SIDE_MAP = {
-    top: 'bottom',
-    right: 'left',
-    bottom: 'top',
-    left: 'right',
-};
 const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopovercontainer extends HTMLElement$1 {
     constructor() {
         super();
@@ -2055,19 +2749,36 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         this.postToggle = createEvent(this, "postToggle", 7);
         this.placement = 'top';
         this.edgeGap = 8;
+        this.animation = null;
         this.arrow = false;
+        this.manualClose = false;
+        this.safeSpace = undefined;
+    }
+    /**
+     * 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 (IS_BROWSER && !isSupported()) {
+            apply();
+        }
     }
     componentDidLoad() {
-        this.host.setAttribute('popover', '');
         this.host.addEventListener('beforetoggle', this.handleToggle.bind(this));
     }
     disconnectedCallback() {
-        if (typeof this.clearAutoUpdate === 'function')
+        if (typeof this.clearAutoUpdate === 'function') {
             this.clearAutoUpdate();
+        }
     }
     /**
-     * Programmatically display the tooltip
-     * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
+     * Programmatically display the popovercontainer
+     * @param target An element with [data-popover-target="id"] where the popovercontainer should be shown
      */
     async show(target) {
         if (!this.toggleTimeoutId) {
@@ -2077,7 +2788,7 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         }
     }
     /**
-     * Programmatically hide this tooltip
+     * Programmatically hide the popovercontainer
      */
     async hide() {
         if (!this.toggleTimeoutId) {
@@ -2086,8 +2797,8 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         }
     }
     /**
-     * Toggle tooltip display
-     * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
+     * Toggle popovercontainer display
+     * @param target An element with [data-popover-target="id"] where the popovercontainer should be shown
      * @param force Pass true to always show or false to always hide
      */
     async toggle(target, force) {
@@ -2098,11 +2809,11 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
             this.host.togglePopover(force);
             this.toggleTimeoutId = null;
         }
-        return this.host.matches(':where(:popover-open, .popover-open');
+        return this.host.matches(':where(:popover-open, .popover-open)');
     }
     /**
-     * Start or stop auto updates based on tooltip events.
-     * Tooltips can be closed or opened with other methods than class members,
+     * 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
      */
@@ -2111,29 +2822,63 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         const isOpen = e.newState === 'open';
         if (isOpen) {
             this.startAutoupdates();
+            if (this.safeSpace)
+                window.addEventListener('mousemove', this.mouseTrackingHandler.bind(this));
         }
         else {
             if (typeof this.clearAutoUpdate === 'function')
                 this.clearAutoUpdate();
+            if (this.safeSpace)
+                window.removeEventListener('mousemove', this.mouseTrackingHandler.bind(this));
         }
         this.postToggle.emit(isOpen);
     }
     /**
      * Start listening for DOM updates, scroll events etc. that have
-     * an influence on tooltip positioning
+     * an influence on popovercontainer positioning
      */
     startAutoupdates() {
         this.clearAutoUpdate = autoUpdate(this.eventTarget, this.host, this.calculatePosition.bind(this));
     }
+    /**
+     * Retrieves the dynamic height of the header
+     */
+    getHeaderHeight() {
+        const header = document.querySelector('post-header');
+        return header ? parseFloat(getComputedStyle(header).height) : 0;
+    }
     async calculatePosition() {
+        const { x, y, middlewareData, placement } = await this.computeMainPosition();
+        const currentPlacement = placement.split('-')[0];
+        // Position 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];
+            if (staticSide) {
+                Object.assign(this.arrowRef.style, {
+                    left: arrowX ? `${arrowX}px` : '',
+                    top: arrowY ? `${arrowY}px` : '',
+                    [staticSide]: '-7px',
+                });
+            }
+        }
+        // Handle safe space if enabled
+        if (this.safeSpace && this.eventTarget) {
+            await this.updateSafeSpaceBoundaries(currentPlacement);
+        }
+    }
+    async computeMainPosition() {
         const gap = this.edgeGap;
         const middleware = [
-            flip(),
+            flip({
+                padding: this.getHeaderHeight(),
+            }),
             inline(),
             shift({
                 padding: gap,
-                // Prevents shifting away from the anchor too far, while shifting as far as possible
-                // https://floating-ui.com/docs/shift#limiter
                 limiter: limitShift({
                     offset: 32,
                 }),
@@ -2145,51 +2890,116 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
                     });
                 },
             }),
-            offset(this.arrow ? gap + 4 : gap), // 4px outside of element to account for focus outline + ~arrow size
+            offset(this.arrow ? gap + 4 : gap),
         ];
         if (this.arrow) {
             middleware.push(arrow({ element: this.arrowRef, padding: gap }));
         }
-        const { x, y, middlewareData, placement: currentPlacement, } = await computePosition(this.eventTarget, this.host, {
+        return computePosition(this.eventTarget, this.host, {
             placement: this.placement || 'top',
             strategy: 'fixed',
             middleware,
         });
-        // Tooltip
-        this.host.style.left = `${x}px`;
-        this.host.style.top = `${y}px`;
-        // Arrow
-        if (this.arrow) {
-            // Tutorial: https://codesandbox.io/s/mystifying-kare-ee3hmh?file=/src/index.js
-            const side = currentPlacement.split('-')[0];
-            const { x: arrowX, y: arrowY } = middlewareData.arrow;
-            const staticSide = SIDE_MAP[side];
-            const offsetBorderLineJoin = 2;
-            Object.assign(this.arrowRef.style, {
-                top: arrowY ? `${arrowY}px` : '',
-                left: arrowX ? `${arrowX}px` : '',
-                [staticSide]: `${-this.arrowRef.offsetWidth / 2 - offsetBorderLineJoin}px`,
-            });
-            // Add position as a class to be able to style arrow for HCM
-            this.arrowRef.classList.remove(...Object.values(SIDE_MAP));
-            this.arrowRef.classList.add(staticSide);
+    }
+    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: '23e391236e263f7ae7c66c994b2847bcba269b37', "data-version": version }, this.arrow && (h("span", { key: '6c6053b2fd315a5940a2c3493182249782b2492c', class: "arrow", ref: el => {
+        const animationClass = this.animation ? `animate-${this.animation}` : '';
+        return (h(Host, { key: '980c2d7531ef77f71ea51b069dc20bbf40cd0ac4', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: '9fa08070a5e7f864aade0dc1afc2917e54693109', class: animationClass }, this.arrow && (h("span", { key: '4700f55c721387f2d918214309e87c9057e4831f', class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), h("slot", { key: 'ff998f110f42a22e886eba398285c41d94718bab' })));
+            } })), h("slot", { key: 'ec5304bc77d4f3eb91c79fb2a37d096b4d43b888' }))));
     }
     get host() { return this; }
     static get style() { return PostPopovercontainerStyle0; }
 }, [4, "post-popovercontainer", {
         "placement": [1],
         "edgeGap": [2, "edge-gap"],
+        "animation": [1],
         "arrow": [4],
+        "manualClose": [4, "manual-close"],
+        "safeSpace": [513, "safe-space"],
         "show": [64],
         "hide": [64],
         "toggle": [64]
     }]);
+PostPopovercontainer.STATIC_SIDES = {
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right',
+};
+PostPopovercontainer.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',
+];
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;