@swisspost/design-system-components 10.0.0-next.39 → 10.0.0-next.41

package/dist/components/{post-popovercontainer2.js → p-elg4VvHg.js}

@@ -1,7 +1,7 @@
-import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host } from '@stencil/core/internal/client';
-import { I as IS_BROWSER } from './breakpoints.js';
-import { a as checkEmptyOrOneOf, d as checkEmptyOrType } from './index2.js';
-import { v as version } from './package.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { I as IS_BROWSER } from './p-Cx0AiN2A.js';
+import { d as checkEmptyOrOneOf, e as checkEmptyOrType } from './p-CV7fm1rW.js';
+import { v as version } from './p-1KLiMO0w.js';
 
 const PLACEMENT_TYPES = [
     'top',
@@ -23,9 +23,6 @@ const PLACEMENT_TYPES = [
  * @see https://floating-ui.com/docs/virtual-elements
  */
 
-const sides = ['top', 'right', 'bottom', 'left'];
-const alignments = ['start', 'end'];
-const placements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
 const min = Math.min;
 const max = Math.max;
 const round = Math.round;
@@ -62,8 +59,9 @@ function getOppositeAxis(axis) {
 function getAxisLength(axis) {
   return axis === 'y' ? 'height' : 'width';
 }
+const yAxisSides = /*#__PURE__*/new Set(['top', 'bottom']);
 function getSideAxis(placement) {
-  return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';
+  return yAxisSides.has(getSide(placement)) ? 'y' : 'x';
 }
 function getAlignmentAxis(placement) {
   return getOppositeAxis(getSideAxis(placement));
@@ -88,19 +86,19 @@ function getExpandedPlacements(placement) {
 function getOppositeAlignmentPlacement(placement) {
   return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
 }
+const lrPlacement = ['left', 'right'];
+const rlPlacement = ['right', 'left'];
+const tbPlacement = ['top', 'bottom'];
+const btPlacement = ['bottom', 'top'];
 function getSideList(side, isStart, rtl) {
-  const lr = ['left', 'right'];
-  const rl = ['right', 'left'];
-  const tb = ['top', 'bottom'];
-  const bt = ['bottom', 'top'];
   switch (side) {
     case 'top':
     case 'bottom':
-      if (rtl) return isStart ? rl : lr;
-      return isStart ? lr : rl;
+      if (rtl) return isStart ? rlPlacement : lrPlacement;
+      return isStart ? lrPlacement : rlPlacement;
     case 'left':
     case 'right':
-      return isStart ? tb : bt;
+      return isStart ? tbPlacement : btPlacement;
     default:
       return [];
   }
@@ -449,109 +447,6 @@ const arrow$1 = options => ({
   }
 });
 
-function getPlacementList(alignment, autoAlignment, allowedPlacements) {
-  const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);
-  return allowedPlacementsSortedByAlignment.filter(placement => {
-    if (alignment) {
-      return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
-    }
-    return true;
-  });
-}
-/**
- * Optimizes the visibility of the floating element by choosing the placement
- * that has the most space available automatically, without needing to specify a
- * preferred placement. Alternative to `flip`.
- * @see https://floating-ui.com/docs/autoPlacement
- */
-const autoPlacement = function (options) {
-  if (options === void 0) {
-    options = {};
-  }
-  return {
-    name: 'autoPlacement',
-    options,
-    async fn(state) {
-      var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
-      const {
-        rects,
-        middlewareData,
-        placement,
-        platform,
-        elements
-      } = state;
-      const {
-        crossAxis = false,
-        alignment,
-        allowedPlacements = placements,
-        autoAlignment = true,
-        ...detectOverflowOptions
-      } = evaluate(options, state);
-      const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
-      const overflow = await detectOverflow(state, detectOverflowOptions);
-      const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
-      const currentPlacement = placements$1[currentIndex];
-      if (currentPlacement == null) {
-        return {};
-      }
-      const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
-
-      // Make `computeCoords` start from the right place.
-      if (placement !== currentPlacement) {
-        return {
-          reset: {
-            placement: placements$1[0]
-          }
-        };
-      }
-      const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]];
-      const allOverflows = [...(((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || []), {
-        placement: currentPlacement,
-        overflows: currentOverflows
-      }];
-      const nextPlacement = placements$1[currentIndex + 1];
-
-      // There are more placements to check.
-      if (nextPlacement) {
-        return {
-          data: {
-            index: currentIndex + 1,
-            overflows: allOverflows
-          },
-          reset: {
-            placement: nextPlacement
-          }
-        };
-      }
-      const placementsSortedByMostSpace = allOverflows.map(d => {
-        const alignment = getAlignment(d.placement);
-        return [d.placement, alignment && crossAxis ?
-        // Check along the mainAxis and main crossAxis side.
-        d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0) :
-        // Check only the mainAxis.
-        d.overflows[0], d.overflows];
-      }).sort((a, b) => a[1] - b[1]);
-      const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter(d => d[2].slice(0,
-      // Aligned placements should not check their opposite crossAxis
-      // side.
-      getAlignment(d[0]) ? 2 : 3).every(v => v <= 0));
-      const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0];
-      if (resetPlacement !== placement) {
-        return {
-          data: {
-            index: currentIndex + 1,
-            overflows: allOverflows
-          },
-          reset: {
-            placement: resetPlacement
-          }
-        };
-      }
-      return {};
-    }
-  };
-};
-
 /**
  * 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
@@ -623,10 +518,11 @@ 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) {
-          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) {
+          if (!ignoreCrossAxisOverflow ||
+          // We leave the current main axis only if every placement on that axis
+          // overflows the main axis.
+          overflowsData.every(d => d.overflows[0] > 0 && getSideAxis(d.placement) === initialSideAxis)) {
             // Try next placement and re-run the lifecycle.
             return {
               data: {
@@ -683,75 +579,6 @@ const flip$1 = function (options) {
   };
 };
 
-function getSideOffsets(overflow, rect) {
-  return {
-    top: overflow.top - rect.height,
-    right: overflow.right - rect.width,
-    bottom: overflow.bottom - rect.height,
-    left: overflow.left - rect.width
-  };
-}
-function isAnySideFullyClipped(overflow) {
-  return sides.some(side => overflow[side] >= 0);
-}
-/**
- * Provides data to hide the floating element in applicable situations, such as
- * when it is not in the same clipping context as the reference element.
- * @see https://floating-ui.com/docs/hide
- */
-const hide = function (options) {
-  if (options === void 0) {
-    options = {};
-  }
-  return {
-    name: 'hide',
-    options,
-    async fn(state) {
-      const {
-        rects
-      } = state;
-      const {
-        strategy = 'referenceHidden',
-        ...detectOverflowOptions
-      } = evaluate(options, state);
-      switch (strategy) {
-        case 'referenceHidden':
-          {
-            const overflow = await detectOverflow(state, {
-              ...detectOverflowOptions,
-              elementContext: 'reference'
-            });
-            const offsets = getSideOffsets(overflow, rects.reference);
-            return {
-              data: {
-                referenceHiddenOffsets: offsets,
-                referenceHidden: isAnySideFullyClipped(offsets)
-              }
-            };
-          }
-        case 'escaped':
-          {
-            const overflow = await detectOverflow(state, {
-              ...detectOverflowOptions,
-              altBoundary: true
-            });
-            const offsets = getSideOffsets(overflow, rects.floating);
-            return {
-              data: {
-                escapedOffsets: offsets,
-                escaped: isAnySideFullyClipped(offsets)
-              }
-            };
-          }
-        default:
-          {
-            return {};
-          }
-      }
-    }
-  };
-};
-
 function getBoundingRect(rects) {
   const minX = min(...rects.map(rect => rect.left));
   const minY = min(...rects.map(rect => rect.top));
@@ -883,6 +710,8 @@ const inline$1 = function (options) {
   };
 };
 
+const originSides = /*#__PURE__*/new Set(['left', 'top']);
+
 // For type backwards-compatibility, the `OffsetOptions` type was also
 // Derivable.
 
@@ -896,7 +725,7 @@ async function convertValueToCoords(state, options) {
   const side = getSide(placement);
   const alignment = getAlignment(placement);
   const isVertical = getSideAxis(placement) === 'y';
-  const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
+  const mainAxisMulti = originSides.has(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
   const rawValue = evaluate(options, state);
 
@@ -1096,7 +925,7 @@ const limitShift$1 = function (options) {
       if (checkCrossAxis) {
         var _middlewareData$offse, _middlewareData$offse2;
         const len = mainAxis === 'y' ? 'width' : 'height';
-        const isOriginSide = ['top', 'left'].includes(getSide(placement));
+        const isOriginSide = originSides.has(getSide(placement));
         const limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide ? ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse[crossAxis]) || 0 : 0) + (isOriginSide ? 0 : computedOffset.crossAxis);
         const limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : ((_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) || 0) - (isOriginSide ? computedOffset.crossAxis : 0);
         if (crossAxisCoord < limitMin) {
@@ -1241,6 +1070,7 @@ function isShadowRoot(value) {
   }
   return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
 }
+const invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);
 function isOverflowElement(element) {
   const {
     overflow,
@@ -1248,27 +1078,32 @@ function isOverflowElement(element) {
     overflowY,
     display
   } = getComputedStyle$1(element);
-  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
+  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
 }
+const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
 function isTableElement(element) {
-  return ['table', 'td', 'th'].includes(getNodeName(element));
+  return tableElements.has(getNodeName(element));
 }
+const topLayerSelectors = [':popover-open', ':modal'];
 function isTopLayer(element) {
-  return [':popover-open', ':modal'].some(selector => {
+  return topLayerSelectors.some(selector => {
     try {
       return element.matches(selector);
-    } catch (e) {
+    } catch (_e) {
       return false;
     }
   });
 }
+const transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective'];
+const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'];
+const containValues = ['paint', 'layout', 'strict', 'content'];
 function isContainingBlock(elementOrCss) {
   const webkit = isWebKit();
   const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   // 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));
+  return transformProperties.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) || willChangeValues.some(value => (css.willChange || '').includes(value)) || containValues.some(value => (css.contain || '').includes(value));
 }
 function getContainingBlock(element) {
   let currentNode = getParentNode(element);
@@ -1286,8 +1121,9 @@ function isWebKit() {
   if (typeof CSS === 'undefined' || !CSS.supports) return false;
   return CSS.supports('-webkit-backdrop-filter', 'none');
 }
+const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);
 function isLastTraversableNode(node) {
-  return ['html', 'body', '#document'].includes(getNodeName(node));
+  return lastTraversableNodeNames.has(getNodeName(node));
 }
 function getComputedStyle$1(element) {
   return getWindow(element).getComputedStyle(element);
@@ -1592,6 +1428,7 @@ function getViewportRect(element, strategy) {
   };
 }
 
+const absoluteOrFixed = /*#__PURE__*/new Set(['absolute', 'fixed']);
 // Returns the inner client rect, subtracting scrollbars if present.
 function getInnerBoundingClientRect(element, strategy) {
   const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
@@ -1656,7 +1493,7 @@ function getClippingElementAncestors(element, cache) {
     if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
       currentContainingBlockComputedStyle = null;
     }
-    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
     if (shouldDropCurrentNode) {
       // Drop non-containing blocks.
       result = result.filter(ancestor => ancestor !== currentNode);
@@ -2013,14 +1850,6 @@ function autoUpdate(reference, floating, update, options) {
  */
 const offset = offset$1;
 
-/**
- * Optimizes the visibility of the floating element by choosing the placement
- * that has the most space available automatically, without needing to specify a
- * preferred placement. Alternative to `flip`.
- * @see https://floating-ui.com/docs/autoPlacement
- */
-autoPlacement;
-
 /**
  * Optimizes the visibility of the floating element by shifting it in order to
  * keep it in view when it will overflow the clipping boundary.
@@ -2044,13 +1873,6 @@ const flip = flip$1;
  */
 const size = size$1;
 
-/**
- * Provides data to hide the floating element in applicable situations, such as
- * when it is not in the same clipping context as the reference element.
- * @see https://floating-ui.com/docs/hide
- */
-hide;
-
 /**
  * Provides data to position an inner element of the floating element so that it
  * appears centered to the reference element.
@@ -2127,11 +1949,15 @@ var HTMLDialogElement = globalThis.HTMLDialogElement || function() {
 };
 var topLayerElements = /* @__PURE__ */ new WeakMap();
 var autoPopoverList = /* @__PURE__ */ new WeakMap();
+var hintPopoverList = /* @__PURE__ */ new WeakMap();
 var visibilityState = /* @__PURE__ */ new WeakMap();
 function getPopoverVisibilityState(popover) {
   return visibilityState.get(popover) || "hidden";
 }
 var popoverInvoker = /* @__PURE__ */ new WeakMap();
+function lastSetElement(set) {
+  return [...set].pop();
+}
 function popoverTargetAttributeActivationBehavior(element) {
   const popover = element.popoverTargetElement;
   if (!(popover instanceof HTMLElement)) {
@@ -2150,7 +1976,7 @@ function popoverTargetAttributeActivationBehavior(element) {
   }
 }
 function checkPopoverValidity(element, expectedToBeShowing) {
-  if (element.popover !== "auto" && element.popover !== "manual") {
+  if (element.popover !== "auto" && element.popover !== "manual" && element.popover !== "hint") {
     return false;
   }
   if (!element.isConnected) return false;
@@ -2168,9 +1994,15 @@ function checkPopoverValidity(element, expectedToBeShowing) {
 }
 function getStackPosition(popover) {
   if (!popover) return 0;
-  return Array.from(autoPopoverList.get(popover.ownerDocument) || []).indexOf(
-    popover
-  ) + 1;
+  const autoPopovers = autoPopoverList.get(document) || /* @__PURE__ */ new Set();
+  const hintPopovers = hintPopoverList.get(document) || /* @__PURE__ */ new Set();
+  if (hintPopovers.has(popover)) {
+    return [...hintPopovers].indexOf(popover) + autoPopovers.size + 1;
+  }
+  if (autoPopovers.has(popover)) {
+    return [...autoPopovers].indexOf(popover) + 1;
+  }
+  return 0;
 }
 function topMostClickedPopover(target) {
   const clickedPopover = nearestInclusiveOpenPopover(target);
@@ -2180,11 +2012,25 @@ function topMostClickedPopover(target) {
   }
   return invokerPopover;
 }
-function topMostAutoPopover(document2) {
-  const documentPopovers = autoPopoverList.get(document2);
-  for (const popover of documentPopovers || []) {
+function topmostAutoOrHintPopover(document2) {
+  let topmostPopover;
+  const hintPopovers = hintPopoverList.get(document2) || /* @__PURE__ */ new Set();
+  const autoPopovers = autoPopoverList.get(document2) || /* @__PURE__ */ new Set();
+  const usedStack = hintPopovers.size > 0 ? hintPopovers : autoPopovers.size > 0 ? autoPopovers : null;
+  if (usedStack) {
+    topmostPopover = lastSetElement(usedStack);
+    if (!topmostPopover.isConnected) {
+      usedStack.delete(topmostPopover);
+      return topmostAutoOrHintPopover(document2);
+    }
+    return topmostPopover;
+  }
+  return null;
+}
+function topMostPopoverInList(list) {
+  for (const popover of list || []) {
     if (!popover.isConnected) {
-      documentPopovers.delete(popover);
+      list.delete(popover);
     } else {
       return popover;
     }
@@ -2217,10 +2063,10 @@ function nearestInclusiveTargetPopoverForInvoker(node) {
     if (node instanceof Document) return;
   }
 }
-function topMostPopoverAncestor(newPopover) {
+function topMostPopoverAncestor(newPopover, list) {
   const popoverPositions = /* @__PURE__ */ new Map();
   let i = 0;
-  for (const popover of autoPopoverList.get(newPopover.ownerDocument) || []) {
+  for (const popover of list || []) {
     popoverPositions.set(popover, i);
     i += 1;
   }
@@ -2228,9 +2074,22 @@ function topMostPopoverAncestor(newPopover) {
   i += 1;
   let topMostPopoverAncestor2 = null;
   function checkAncestor(candidate) {
-    const candidateAncestor = nearestInclusiveOpenPopover(candidate);
-    if (candidateAncestor === null) return null;
-    const candidatePosition = popoverPositions.get(candidateAncestor);
+    if (!candidate) return;
+    let okNesting = false;
+    let candidateAncestor = null;
+    let candidatePosition = null;
+    while (!okNesting) {
+      candidateAncestor = nearestInclusiveOpenPopover(candidate) || null;
+      if (candidateAncestor === null) return;
+      if (!popoverPositions.has(candidateAncestor)) return;
+      if (newPopover.popover === "hint" || candidateAncestor.popover === "auto") {
+        okNesting = true;
+      }
+      if (!okNesting) {
+        candidate = candidateAncestor.parentElement;
+      }
+    }
+    candidatePosition = popoverPositions.get(candidateAncestor);
     if (topMostPopoverAncestor2 === null || popoverPositions.get(topMostPopoverAncestor2) < candidatePosition) {
       topMostPopoverAncestor2 = candidateAncestor;
     }
@@ -2312,16 +2171,62 @@ function showPopover(element) {
     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;
+  const originalType = element.popover;
+  let stackToAppendTo = null;
+  const autoAncestor = topMostPopoverAncestor(
+    element,
+    autoPopoverList.get(document2) || /* @__PURE__ */ new Set()
+  );
+  const hintAncestor = topMostPopoverAncestor(
+    element,
+    hintPopoverList.get(document2) || /* @__PURE__ */ new Set()
+  );
+  if (originalType === "auto") {
+    closeAllOpenPopoversInList(
+      hintPopoverList.get(document2) || /* @__PURE__ */ new Set(),
+      shouldRestoreFocus,
+      true
+    );
+    const ancestor = autoAncestor || document2;
+    hideAllPopoversUntil(ancestor, shouldRestoreFocus, true);
+    stackToAppendTo = "auto";
+  }
+  if (originalType === "hint") {
+    if (hintAncestor) {
+      hideAllPopoversUntil(hintAncestor, shouldRestoreFocus, true);
+      stackToAppendTo = "hint";
+    } else {
+      closeAllOpenPopoversInList(
+        hintPopoverList.get(document2) || /* @__PURE__ */ new Set(),
+        shouldRestoreFocus,
+        true
+      );
+      if (autoAncestor) {
+        hideAllPopoversUntil(autoAncestor, shouldRestoreFocus, true);
+        stackToAppendTo = "auto";
+      } else {
+        stackToAppendTo = "hint";
+      }
     }
   }
-  if (!topMostAutoPopover(document2)) {
-    shouldRestoreFocus = true;
+  if (originalType === "auto" || originalType === "hint") {
+    if (originalType !== element.popover || !checkPopoverValidity(element, false)) {
+      return;
+    }
+    if (!topmostAutoOrHintPopover(document2)) {
+      shouldRestoreFocus = true;
+    }
+    if (stackToAppendTo === "auto") {
+      if (!autoPopoverList.has(document2)) {
+        autoPopoverList.set(document2, /* @__PURE__ */ new Set());
+      }
+      autoPopoverList.get(document2).add(element);
+    } else if (stackToAppendTo === "hint") {
+      if (!hintPopoverList.has(document2)) {
+        hintPopoverList.set(document2, /* @__PURE__ */ new Set());
+      }
+      hintPopoverList.get(document2).add(element);
+    }
   }
   previouslyFocusedElements.delete(element);
   const originallyFocusedElement = document2.activeElement;
@@ -2331,14 +2236,8 @@ function showPopover(element) {
     topLayerElements.set(document2, /* @__PURE__ */ new Set());
   }
   topLayerElements.get(document2).add(element);
+  setInvokerAriaExpanded(popoverInvoker.get(element), true);
   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);
   }
@@ -2349,12 +2248,14 @@ function hidePopover(element, focusPreviousElement = false, fireEvents = false)
     return;
   }
   const document2 = element.ownerDocument;
-  if (element.popover === "auto") {
+  if (["auto", "hint"].includes(element.popover)) {
     hideAllPopoversUntil(element, focusPreviousElement, fireEvents);
     if (!checkPopoverValidity(element, true)) {
       return;
     }
   }
+  const autoList = autoPopoverList.get(document2) || /* @__PURE__ */ new Set();
+  const autoPopoverListContainsElement = autoList.has(element) && lastSetElement(autoList) === element;
   setInvokerAriaExpanded(popoverInvoker.get(element), false);
   popoverInvoker.delete(element);
   if (fireEvents) {
@@ -2364,12 +2265,16 @@ function hidePopover(element, focusPreviousElement = false, fireEvents = false)
         newState: "closed"
       })
     );
+    if (autoPopoverListContainsElement && lastSetElement(autoList) !== element) {
+      hideAllPopoversUntil(element, focusPreviousElement, fireEvents);
+    }
     if (!checkPopoverValidity(element, true)) {
       return;
     }
   }
   topLayerElements.get(document2)?.delete(element);
-  autoPopoverList.get(document2)?.delete(element);
+  autoList.delete(element);
+  hintPopoverList.get(document2)?.delete(element);
   element.classList.remove(":popover-open");
   visibilityState.set(element, "hidden");
   if (fireEvents) {
@@ -2384,10 +2289,44 @@ function hidePopover(element, focusPreviousElement = false, fireEvents = false)
   }
 }
 function closeAllOpenPopovers(document2, focusPreviousElement = false, fireEvents = false) {
-  let popover = topMostAutoPopover(document2);
+  let popover = topmostAutoOrHintPopover(document2);
   while (popover) {
     hidePopover(popover, focusPreviousElement, fireEvents);
-    popover = topMostAutoPopover(document2);
+    popover = topmostAutoOrHintPopover(document2);
+  }
+}
+function closeAllOpenPopoversInList(list, focusPreviousElement = false, fireEvents = false) {
+  let popover = topMostPopoverInList(list);
+  while (popover) {
+    hidePopover(popover, focusPreviousElement, fireEvents);
+    popover = topMostPopoverInList(list);
+  }
+}
+function hidePopoverStackUntil(endpoint, set, focusPreviousElement, fireEvents) {
+  let repeatingHide = false;
+  let hasRunOnce = false;
+  while (repeatingHide || !hasRunOnce) {
+    hasRunOnce = true;
+    let lastToHide = null;
+    let foundEndpoint = false;
+    for (const popover of set) {
+      if (popover === endpoint) {
+        foundEndpoint = true;
+      } else if (foundEndpoint) {
+        lastToHide = popover;
+        break;
+      }
+    }
+    if (!lastToHide) return;
+    while (getPopoverVisibilityState(lastToHide) === "showing" && set.size) {
+      hidePopover(lastSetElement(set), focusPreviousElement, fireEvents);
+    }
+    if (set.has(endpoint) && lastSetElement(set) !== endpoint) {
+      repeatingHide = true;
+    }
+    if (repeatingHide) {
+      fireEvents = false;
+    }
   }
 }
 function hideAllPopoversUntil(endpoint, focusPreviousElement, fireEvents) {
@@ -2395,22 +2334,29 @@ function hideAllPopoversUntil(endpoint, focusPreviousElement, fireEvents) {
   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);
+  if (hintPopoverList.get(document2)?.has(endpoint)) {
+    hidePopoverStackUntil(
+      endpoint,
+      hintPopoverList.get(document2),
+      focusPreviousElement,
+      fireEvents
+    );
+    return;
   }
-  while (lastToHide && getPopoverVisibilityState(lastToHide) === "showing" && autoPopoverList.get(document2)?.size) {
-    hidePopover(lastToHide, focusPreviousElement, fireEvents);
+  closeAllOpenPopoversInList(
+    hintPopoverList.get(document2) || /* @__PURE__ */ new Set(),
+    focusPreviousElement,
+    fireEvents
+  );
+  if (!autoPopoverList.get(document2)?.has(endpoint)) {
+    return;
   }
+  hidePopoverStackUntil(
+    endpoint,
+    autoPopoverList.get(document2),
+    focusPreviousElement,
+    fireEvents
+  );
 }
 var popoverPointerDownTargets = /* @__PURE__ */ new WeakMap();
 function lightDismissOpenPopovers(event) {
@@ -2418,7 +2364,7 @@ function lightDismissOpenPopovers(event) {
   const target = event.composedPath()[0];
   if (!target) return;
   const document2 = target.ownerDocument;
-  const topMostPopover = topMostAutoPopover(document2);
+  const topMostPopover = topmostAutoOrHintPopover(document2);
   if (!topMostPopover) return;
   const ancestor = topMostClickedPopover(target);
   if (ancestor && event.type === "pointerdown") {
@@ -2588,6 +2534,7 @@ function apply() {
         if (!this.hasAttribute("popover")) return null;
         const value = (this.getAttribute("popover") || "").toLowerCase();
         if (value === "" || value == "auto") return "auto";
+        if (value == "hint") return "hint";
         return "manual";
       },
       set(value) {
@@ -2601,7 +2548,8 @@ function apply() {
     showPopover: {
       enumerable: true,
       configurable: true,
-      value() {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      value(options = {}) {
         showPopover(this);
       }
     },
@@ -2615,12 +2563,16 @@ function apply() {
     togglePopover: {
       enumerable: true,
       configurable: true,
-      value(force) {
-        if (visibilityState.get(this) === "showing" && force === void 0 || force === false) {
+      value(options = {}) {
+        if (typeof options === "boolean") {
+          options = { force: options };
+        }
+        if (visibilityState.get(this) === "showing" && options.force === void 0 || options.force === false) {
           hidePopover(this, true, true);
-        } else if (force === void 0 || force === true) {
+        } else if (options.force === void 0 || options.force === true) {
           showPopover(this);
         }
+        return visibilityState.get(this) === "showing";
       }
     }
   });
@@ -2755,20 +2707,35 @@ function apply() {
   injectStyles(document);
 }
 
-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 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-radius:4px}:where(post-popovercontainer)>div.animate-pop-in{animation:popIn .25s ease-out forwards}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(post-popovercontainer)>div{border:2px solid rgba(0,0,0,0)}}: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 PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopovercontainer extends HTMLElement$1 {
+const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopovercontainer extends H {
     constructor() {
         super();
         this.__registerHost();
-        this.postToggle = createEvent(this, "postToggle", 7);
+        this.postToggle = createEvent(this, "postToggle");
+        /**
+         * 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.
+         */
         this.placement = 'top';
+        /**
+         * Gap between the edge of the page and the popovercontainer
+         */
         this.edgeGap = 8;
+        /**
+         * Animation style
+         */
         this.animation = null;
+        /**
+         * Whether or not to display a little pointer arrow
+         */
         this.arrow = false;
+        /**
+         * Whether or not the popovercontainer should close when user clicks outside of it
+         */
         this.manualClose = false;
-        this.safeSpace = undefined;
     }
     validatePlacement() {
         checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
@@ -2806,11 +2773,11 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
      * @param target An element with [data-popover-target="id"] where the popovercontainer should be shown
      */
     async show(target) {
-        if (!this.toggleTimeoutId) {
-            this.eventTarget = target;
-            this.calculatePosition();
-            this.host.showPopover();
-        }
+        if (this.toggleTimeoutId)
+            return;
+        this.eventTarget = target;
+        this.calculatePosition();
+        this.host.showPopover();
     }
     /**
      * Programmatically hide the popovercontainer
@@ -2988,9 +2955,9 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
     }
     render() {
         const animationClass = this.animation ? `animate-${this.animation}` : '';
-        return (h(Host, { key: '7b5c3ad89739db0387473db9228014ca9596b8a3', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: '0db14a34b3bb8e248bb0adead08afc9b7007edf6', class: animationClass }, this.arrow && (h("span", { key: 'e7061112aebb882194b79e82535074f34ddbbfd1', class: "arrow", ref: el => {
+        return (h(Host, { key: '357f53696ca28ab2c137d47e2192038dc756c289', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: '9c40bdc5034ccf14157ee1ae8ce33fe58a9049e4', class: animationClass }, this.arrow && (h("span", { key: '6133ab54aaea6f198560ca5cb30f5604318203f6', class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), h("slot", { key: 'efc25097a97f87a9eb742379d8a70b0fc2c78682' }))));
+            } })), h("slot", { key: '39f53833a3f570b2c8807a5903b531c6733b0ada' }))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -2998,7 +2965,7 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         "edgeGap": ["validateEdgeGap"],
         "safeSpace": ["validateSafeSpace"]
     }; }
-    static get style() { return PostPopovercontainerStyle0; }
+    static get style() { return postPopovercontainerCss; }
 }, [4, "post-popovercontainer", {
         "placement": [1],
         "edgeGap": [2, "edge-gap"],
@@ -3047,5 +3014,6 @@ function defineCustomElement() {
             break;
     } });
 }
+defineCustomElement();
 
 export { PostPopovercontainer as P, PLACEMENT_TYPES as a, defineCustomElement as d };