@aurodesignsystem/auro-formkit 6.2.1 → 6.2.2

package/components/dropdown/dist/index.js

@@ -189,12 +189,12 @@ function getOppositePlacement(placement) {
   return oppositeSideMap[side] + placement.slice(side.length);
 }
 function expandPaddingObject(padding) {
+  var _padding$top, _padding$right, _padding$bottom, _padding$left;
   return {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    ...padding
+    top: (_padding$top = padding.top) != null ? _padding$top : 0,
+    right: (_padding$right = padding.right) != null ? _padding$right : 0,
+    bottom: (_padding$bottom = padding.bottom) != null ? _padding$bottom : 0,
+    left: (_padding$left = padding.left) != null ? _padding$left : 0
   };
 }
 function getPaddingObject(padding) {
@@ -269,13 +269,9 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
         y: reference.y
       };
   }
-  switch (getAlignment(placement)) {
-    case 'start':
-      coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
-      break;
-    case 'end':
-      coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
-      break;
+  const alignment = getAlignment(placement);
+  if (alignment) {
+    coords[alignmentAxis] += commonAlign * (alignment === 'end' ? 1 : -1) * (rtl && isVertical ? -1 : 1);
   }
   return coords;
 }
@@ -324,10 +320,7 @@ async function detectOverflow(state, options) {
     height: rects.floating.height
   } : rects.reference;
   const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
-  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
-    x: 1,
-    y: 1
-  } : {
+  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) && (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
     x: 1,
     y: 1
   };
@@ -482,13 +475,11 @@ const autoPlacement$1 = function (options) {
         ...detectOverflowOptions
       } = evaluate(options, state);
       const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
-      const overflow = await platform.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) {
@@ -498,6 +489,8 @@ const autoPlacement$1 = function (options) {
           }
         };
       }
+      const overflow = await platform.detectOverflow(state, detectOverflowOptions);
+      const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
       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,
@@ -805,23 +798,16 @@ const shift$1 = function (options) {
         y
       };
       const overflow = await platform.detectOverflow(state, detectOverflowOptions);
-      const crossAxis = getSideAxis(getSide(placement));
+      const crossAxis = getSideAxis(placement);
       const mainAxis = getOppositeAxis(crossAxis);
       let mainAxisCoord = coords[mainAxis];
       let crossAxisCoord = coords[crossAxis];
+      const clampCoord = (axis, coord) => clamp(coord + overflow[axis === 'y' ? 'top' : 'left'], coord, coord - overflow[axis === 'y' ? 'bottom' : 'right']);
       if (checkMainAxis) {
-        const minSide = mainAxis === 'y' ? 'top' : 'left';
-        const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
-        const min = mainAxisCoord + overflow[minSide];
-        const max = mainAxisCoord - overflow[maxSide];
-        mainAxisCoord = clamp(min, mainAxisCoord, max);
+        mainAxisCoord = clampCoord(mainAxis, mainAxisCoord);
       }
       if (checkCrossAxis) {
-        const minSide = crossAxis === 'y' ? 'top' : 'left';
-        const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
-        const min = crossAxisCoord + overflow[minSide];
-        const max = crossAxisCoord - overflow[maxSide];
-        crossAxisCoord = clamp(min, crossAxisCoord, max);
+        crossAxisCoord = clampCoord(crossAxis, crossAxisCoord);
       }
       const limitedCoords = limiter.fn({
         ...state,
@@ -978,7 +964,7 @@ function getParentNode(node) {
 function getNearestOverflowAncestor(node) {
   const parentNode = getParentNode(node);
   if (isLastTraversableNode(parentNode)) {
-    return node.ownerDocument ? node.ownerDocument.body : node.body;
+    return (node.ownerDocument || node).body;
   }
   if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
     return parentNode;
@@ -1075,10 +1061,7 @@ function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
   if (isFixed === void 0) {
     isFixed = false;
   }
-  if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
-    return false;
-  }
-  return isFixed;
+  return !!floatingOffsetParent && isFixed && floatingOffsetParent === getWindow(element);
 }
 
 function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
@@ -1105,12 +1088,12 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
   let y = (clientRect.top + visualOffsets.y) / scale.y;
   let width = clientRect.width / scale.x;
   let height = clientRect.height / scale.y;
-  if (domElement) {
+  if (domElement && offsetParent) {
     const win = getWindow(domElement);
-    const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
+    const offsetWin = isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
     let currentWin = win;
     let currentIFrame = getFrameElement(currentWin);
-    while (currentIFrame && offsetParent && offsetWin !== currentWin) {
+    while (currentIFrame && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
       const css = getComputedStyle$1(currentIFrame);
@@ -1174,7 +1157,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
   let scale = createCoords(1);
   const offsets = createCoords(0);
   const isOffsetParentAnElement = isHTMLElement(offsetParent);
-  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+  if (isOffsetParentAnElement || !isFixed) {
     if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
     }
@@ -1195,18 +1178,17 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
 }
 
 function getClientRects(element) {
-  return Array.from(element.getClientRects());
+  return element.getClientRects ? Array.from(element.getClientRects()) : [];
 }
 
 // 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) {
-  const html = getDocumentElement(element);
-  const scroll = getNodeScroll(element);
-  const body = element.ownerDocument.body;
+function getDocumentRect(html) {
+  const scroll = getNodeScroll(html);
+  const body = html.ownerDocument.body;
   const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
   const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
-  let x = -scroll.scrollLeft + getWindowScrollBarX(element);
+  let x = -scroll.scrollLeft + getWindowScrollBarX(html);
   const y = -scroll.scrollTop;
   if (getComputedStyle$1(body).direction === 'rtl') {
     x += max(html.clientWidth, body.clientWidth) - width;
@@ -1223,7 +1205,11 @@ function getDocumentRect(element) {
 // calculation is affected by unusual styles.
 // Most scrollbars leave 15-18px of space.
 const SCROLLBAR_MAX = 25;
-function getViewportRect(element, strategy) {
+function getViewportRect(element, strategy, rootBoundary) {
+  if (rootBoundary === void 0) {
+    rootBoundary = 'viewport';
+  }
+  const isLayoutViewport = rootBoundary === 'layoutViewport';
   const win = getWindow(element);
   const html = getDocumentElement(element);
   const visualViewport = win.visualViewport;
@@ -1232,31 +1218,42 @@ function getViewportRect(element, strategy) {
   let x = 0;
   let y = 0;
   if (visualViewport) {
-    width = visualViewport.width;
-    height = visualViewport.height;
-    const visualViewportBased = isWebKit();
-    if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
-      x = visualViewport.offsetLeft;
-      y = visualViewport.offsetTop;
+    // Client coordinates are relative to the layout viewport, except in
+    // WebKit with an `absolute` strategy, where they are relative to the
+    // visual viewport.
+    const layoutRelativeClientCoords = !isWebKit() || strategy === 'fixed';
+    if (isLayoutViewport) {
+      if (!layoutRelativeClientCoords) {
+        x = -visualViewport.offsetLeft;
+        y = -visualViewport.offsetTop;
+      }
+    } else {
+      width = visualViewport.width;
+      height = visualViewport.height;
+      if (layoutRelativeClientCoords) {
+        x = visualViewport.offsetLeft;
+        y = visualViewport.offsetTop;
+      }
     }
   }
   const windowScrollbarX = getWindowScrollBarX(html);
-  // <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
-  // visual width of the <html> but this is not considered in the size
-  // of `html.clientWidth`.
+  // `scrollbar-gutter: stable` on the <html> reserves gutter space that shrinks
+  // the visual width but isn't reflected in `html.clientWidth`, so subtract it.
+  // Only the inline-end (right) gutter can hold the scrollbar; `both-edges` also
+  // reserves an empty inline-start gutter that clips nothing, so exclude just
+  // the one scrollbar-side gutter — halve the measured (two-gutter) total. A
+  // left-side scrollbar (`windowScrollbarX > 0`) is already handled by
+  // `getHTMLOffset`/`visualViewport.width`; skip it here.
   if (windowScrollbarX <= 0) {
     const doc = html.ownerDocument;
     const body = doc.body;
     const bodyStyles = getComputedStyle(body);
     const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
-    const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
-    if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
-      width -= clippingStableScrollbarWidth;
+    const reservedWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
+    const gutter = getComputedStyle(html).scrollbarGutter === 'stable both-edges' ? reservedWidth / 2 : reservedWidth;
+    if (gutter <= SCROLLBAR_MAX) {
+      width -= gutter;
     }
-  } else if (windowScrollbarX <= SCROLLBAR_MAX) {
-    // If the <body> scrollbar is on the left, the width needs to be extended
-    // by the scrollbar amount so there isn't extra space on the right.
-    width += windowScrollbarX;
   }
   return {
     width,
@@ -1271,7 +1268,7 @@ function getInnerBoundingClientRect(element, strategy) {
   const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
   const top = clientRect.top + element.clientTop;
   const left = clientRect.left + element.clientLeft;
-  const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
+  const scale = getScale(element);
   const width = element.clientWidth * scale.x;
   const height = element.clientHeight * scale.y;
   const x = left * scale.x;
@@ -1285,8 +1282,8 @@ function getInnerBoundingClientRect(element, strategy) {
 }
 function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
   let rect;
-  if (clippingAncestor === 'viewport') {
-    rect = getViewportRect(element, strategy);
+  if (clippingAncestor === 'viewport' || clippingAncestor === 'layoutViewport') {
+    rect = getViewportRect(element, strategy, clippingAncestor);
   } else if (clippingAncestor === 'document') {
     rect = getDocumentRect(getDocumentElement(element));
   } else if (isElement(clippingAncestor)) {
@@ -1302,13 +1299,6 @@ function getClientRectFromClippingAncestor(element, clippingAncestor, strategy)
   }
   return rectToClientRect(rect);
 }
-function hasFixedPositionAncestor(element, stopNode) {
-  const parentNode = getParentNode(element);
-  if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
-    return false;
-  }
-  return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
-}
 
 // A "clipping ancestor" is an `overflow` element with the characteristic of
 // clipping (or hiding) child elements. This returns all clipping ancestors
@@ -1319,7 +1309,7 @@ function getClippingElementAncestors(element, cache) {
     return cachedResult;
   }
   let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
-  let currentContainingBlockComputedStyle = null;
+  let lastKeptComputedStyle = null;
   const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
   let currentNode = elementIsFixed ? getParentNode(element) : element;
 
@@ -1327,16 +1317,20 @@ function getClippingElementAncestors(element, cache) {
   while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
     const computedStyle = getComputedStyle$1(currentNode);
     const currentNodeIsContaining = isContainingBlock(currentNode);
-    if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
-      currentContainingBlockComputedStyle = null;
-    }
-    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && (currentContainingBlockComputedStyle.position === 'absolute' || currentContainingBlockComputedStyle.position === 'fixed') || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+    // Position of the containing block chain below the current node. A fixed
+    // element whose containing block hasn't been found yet is a fixed chain.
+    const lastPosition = lastKeptComputedStyle ? lastKeptComputedStyle.position : elementIsFixed ? 'fixed' : '';
+
+    // A non-containing ancestor does not clip the element when the chain
+    // below it escapes it: a fixed chain escapes all ancestors up to the
+    // next containing block, an absolute chain escapes static ancestors.
+    const shouldDropCurrentNode = !currentNodeIsContaining && (lastPosition === 'fixed' || lastPosition === 'absolute' && computedStyle.position === 'static');
     if (shouldDropCurrentNode) {
       // Drop non-containing blocks.
       result = result.filter(ancestor => ancestor !== currentNode);
     } else {
-      // Record last containing block for next iteration.
-      currentContainingBlockComputedStyle = computedStyle;
+      // The kept node carries the chain position for the next iteration.
+      lastKeptComputedStyle = computedStyle;
     }
     currentNode = getParentNode(currentNode);
   }
@@ -1396,13 +1390,7 @@ 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 (isOffsetParentAnElement || !isFixed) {
     if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
     }
@@ -1410,12 +1398,13 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
       const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
       offsets.x = offsetRect.x + offsetParent.clientLeft;
       offsets.y = offsetRect.y + offsetParent.clientTop;
-    } else if (documentElement) {
-      setLeftRTLScrollbarOffset();
     }
   }
-  if (isFixed && !isOffsetParentAnElement && documentElement) {
-    setLeftRTLScrollbarOffset();
+
+  // 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.
+  if (!isOffsetParentAnElement && documentElement) {
+    offsets.x = getWindowScrollBarX(documentElement);
   }
   const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
   const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
@@ -1515,7 +1504,7 @@ function rectsAreEqual(a, b) {
 }
 
 // https://samthor.au/2021/observing-dom/
-function observeMove(element, onMove) {
+function observeMove(element, onMove, ancestorResize) {
   let io = null;
   let timeoutId;
   const root = getDocumentElement(element);
@@ -1558,13 +1547,22 @@ function observeMove(element, onMove) {
     let isFirstUpdate = true;
     function handleObserve(entries) {
       const ratio = entries[0].intersectionRatio;
+
+      // The entry is a snapshot, so the reference may have moved since the
+      // intersection was computed (under performance constraints, or between
+      // consecutive frames of a multi-frame layout shift). The reported ratio
+      // and the observed area are stale in that case and cannot be trusted to
+      // detect subsequent movement, so refresh regardless of the ratio.
+      if (!rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
+        return refresh();
+      }
       if (ratio !== threshold) {
         if (!isFirstUpdate) {
           return refresh();
         }
         if (!ratio) {
-          // If the reference is clipped, the ratio is 0. Throttle the refresh
-          // to prevent an infinite loop of updates.
+          // If the reference is clipped in place, the ratio is 0. Throttle
+          // the refresh to prevent an infinite loop of updates.
           timeoutId = setTimeout(() => {
             refresh(false, 1e-7);
           }, 1000);
@@ -1572,16 +1570,6 @@ 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;
     }
 
@@ -1598,8 +1586,18 @@ function observeMove(element, onMove) {
     }
     io.observe(element);
   }
+  const win = getWindow(element);
+  // The window is a resize ancestor, so when `ancestorResize` is enabled its
+  // listener already runs the update on resize. Here we only need to rebuild
+  // the `IntersectionObserver` for the new root size, skipping a redundant
+  // update. When `ancestorResize` is disabled, this becomes the sole update.
+  const handleResize = () => refresh(ancestorResize);
+  win.addEventListener('resize', handleResize);
   refresh(true);
-  return cleanup;
+  return () => {
+    win.removeEventListener('resize', handleResize);
+    cleanup();
+  };
 }
 
 /**
@@ -1624,12 +1622,10 @@ function autoUpdate(reference, floating, update, options) {
   const referenceEl = unwrapElement(reference);
   const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...(floating ? getOverflowAncestors(floating) : [])] : [];
   ancestors.forEach(ancestor => {
-    ancestorScroll && ancestor.addEventListener('scroll', update, {
-      passive: true
-    });
+    ancestorScroll && ancestor.addEventListener('scroll', update);
     ancestorResize && ancestor.addEventListener('resize', update);
   });
-  const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
+  const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update, ancestorResize) : null;
   let reobserveFrame = -1;
   let resizeObserver = null;
   if (elementResize) {
@@ -1724,11 +1720,9 @@ const computePosition = (reference, floating, options) => {
   // multiple lifecycle resets re-use the same result. It only lives for a
   // single call. If other functions become expensive, we can add them as well.
   const cache = new Map();
-  const mergedOptions = {
-    platform,
-    ...options
-  };
+  const mergedOptions = options != null ? options : {};
   const platformWithCache = {
+    ...platform,
     ...mergedOptions.platform,
     _c: cache
   };
@@ -2067,30 +2061,61 @@ class AuroFloatingUI {
 
   /**
    * @private
-   * Controls whether to lock the scrolling for the document's body.
-   * @param {Boolean} lock - If true, locks the body's scrolling functionlity; otherwise, unlock.
+   * Mirrors `aria-modal` onto the `<dialog>` inside the bib, tracking the page
+   * scroll lock: an overlay that holds the page hides it from assistive tech.
+   *
+   * The removal is called only from inside lockScroll()'s ownership guard: run
+   * outside it, it fired on every autoUpdate tick of every NON-owning instance,
+   * and a repositioning dropdown stripped `aria-modal` off an open modal dialog
+   * it had nothing to do with. The write is unguarded by design — see the call
+   * site — but is skipped when the attribute already reads correctly, so the
+   * repeat costs no mutation record.
+   * @param {Boolean} modal - True to mark the dialog modal; false to unmark it.
    */
-  lockScroll(lock = true) {
+  mirrorAriaModal(modal) {
     const element = this.element;
+    const dialog = element?.bib
+      ? (element.bib?.shadowRoot || element.bib || element).querySelector(
+          "dialog",
+        )
+      : undefined;
 
-    if (!element?.bib) {
+    if (!dialog) {
       return;
     }
 
-    const dialog = (
-      element.bib?.shadowRoot ||
-      element.bib ||
-      element
-    ).querySelector("dialog");
-    if (dialog) {
-      if (lock) {
+    if (modal) {
+      if (dialog.getAttribute("aria-modal") !== "true") {
         dialog.setAttribute("aria-modal", "true");
-      } else {
-        dialog.removeAttribute("aria-modal");
       }
+    } else {
+      dialog.removeAttribute("aria-modal");
+    }
+  }
+
+  /**
+   * @private
+   * Controls whether to lock the scrolling for the document's body.
+   * @param {Boolean} lock - If true, locks the body's scrolling functionlity; otherwise, unlock.
+   */
+  lockScroll(lock = true) {
+    const element = this.element;
+
+    // Locking needs a bib to lock around; unlocking must not, or a bib that has
+    // already been detached would leave the page frozen with no way back.
+    if (lock && !element?.bib) {
+      return;
     }
 
     if (lock) {
+      // Re-asserted on every lock call rather than only on the unlocked ->
+      // locked transition. If the bib's inner <dialog> is replaced while this
+      // instance still holds the lock, the replacement would otherwise go
+      // unmarked until a full unlock/lock cycle. Safe to repeat: it targets
+      // this instance's own element, so it cannot reach another overlay's
+      // dialog, and mirrorAriaModal() skips the write when already correct.
+      this.mirrorAriaModal(true);
+
       if (!this._scrollLocked) {
         this._scrollLocked = true;
         this._savedScrollY = window.scrollY;
@@ -2148,6 +2173,8 @@ class AuroFloatingUI {
       }
     } else {
       if (this._scrollLocked) {
+        this.mirrorAriaModal(false);
+
         if (this._viewportHandler && window.visualViewport) {
           window.visualViewport.removeEventListener(
             "resize",
@@ -2260,15 +2287,47 @@ class AuroFloatingUI {
       } else if (this.configureTrial < MAX_CONFIGURATION_COUNT) {
         this.configureTrial += 1;
 
-        setTimeout(() => {
+        // The id is retained so disconnect() can cancel it. A retry that fires
+        // after teardown re-enters this method with isPopoverVisible still true
+        // — nothing clears it on the teardown path — and takes the page scroll
+        // lock back, with no owner left to release it.
+        //
+        // This is not the rare timing race it reads as: the lookup above wants
+        // a `.container` inside the BIB's own shadow root, which only a bib
+        // that is itself a custom element has. A consumer whose bib is a plain
+        // element (auro-dialog's `#bib` is a div, with its `.container` a
+        // sibling in the host's shadow root) can never satisfy it, so it
+        // retries the full MAX_CONFIGURATION_COUNT every time. Correcting the
+        // lookup would change bib sizing for those consumers and is tracked
+        // separately; cancelling the timer is what keeps it from freezing the
+        // page.
+        this._configureRetryId = setTimeout(() => {
+          this._configureRetryId = undefined;
           this.configureBibStrategy(value);
         }, 0);
       }
 
       if (element.isPopoverVisible) {
-        this.lockScroll(value === "fullscreen");
+        // Positioning strategy is not scroll ownership. Both "fullscreen" and
+        // "dialog" lay the bib over the page and trap focus inside it, so both
+        // must freeze the page behind them (AB#1647843). Gating this on
+        // "fullscreen" alone left dismissible desktop dialogs and drawers
+        // scrollable, and actively released the lock on every reposition
+        // (AB#1625424, AB#1625435). The nested "cover" strategy takes the else
+        // branch and stays scrollable by design — it sits inside its parent
+        // rather than over the page.
+        this.lockScroll(true);
       }
     } else {
+      // The mirror of the lock above: a strategy that does not own the page must
+      // hand the lock back, not merely decline to take it. autoUpdate re-runs
+      // this method on every resize tick, and getPositioningStrategy() flips
+      // "fullscreen" -> "floating" across the breakpoint for dropdown behavior —
+      // so an overlay that locked while narrow can land here while still open.
+      // Without this, the page stays frozen behind a small floating bib until
+      // hideBib() happens to run.
+      this.lockScroll(false);
+
       element.bib.style.position = "";
       element.bib.removeAttribute("isfullscreen");
       element.isBibFullscreen = false;
@@ -2378,6 +2437,46 @@ class AuroFloatingUI {
     this.hideBib("focusloss");
   }
 
+  /**
+   * @private
+   * Installs the handlers that dismiss an open overlay.
+   *
+   * Shared by showBib(), which opens the overlay, and configure(), which has to
+   * put these back after a rewire tore them down under an overlay that is still
+   * open. A non-modal overlay dismisses on outside click, focus loss and
+   * Escape; a modal one instead swallows Escape so the native dialog's
+   * CloseWatcher never sees it (AB#1613688).
+   */
+  setupDismissHandlers() {
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+
+    if (!element.modal) {
+      this.setupHideHandlers();
+      return;
+    }
+
+    if (this.keyDownHandler) {
+      document.removeEventListener("keydown", this.keyDownHandler);
+    }
+    this.keyDownHandler = (evt) => {
+      if (evt.key === "Escape" && element.isPopoverVisible) {
+        // Intercept at keydown so CloseWatcher never sees the keystroke.
+        // Canceling `cancel` alone is insufficient — a second Esc with no
+        // intervening user activation triggers the anti-trap and fires `close`
+        // directly, bypassing any `cancel` preventDefault (AB#1613688).
+        // stopImmediatePropagation is intentional: it prevents other document
+        // keydown handlers (e.g. consumer code, auro-dialog) from also acting
+        // on Escape while the modal owns the key.
+        evt.preventDefault();
+        evt.stopImmediatePropagation();
+      }
+    };
+    document.addEventListener("keydown", this.keyDownHandler);
+  }
+
   setupHideHandlers() {
     const element = this.element;
     if (!element) {
@@ -2550,27 +2649,7 @@ class AuroFloatingUI {
 
       // prevent double showing: isPopovervisible gets first and showBib gets called later
       if (!this.showing) {
-        if (!element.modal) {
-          this.setupHideHandlers();
-        } else {
-          if (this.keyDownHandler) {
-            document.removeEventListener("keydown", this.keyDownHandler);
-          }
-          this.keyDownHandler = (evt) => {
-            if (evt.key === "Escape" && element.isPopoverVisible) {
-              // Intercept at keydown so CloseWatcher never sees the keystroke.
-              // Canceling `cancel` alone is insufficient — a second Esc with no
-              // intervening user activation triggers the anti-trap and fires `close`
-              // directly, bypassing any `cancel` preventDefault (AB#1613688).
-              // stopImmediatePropagation is intentional: it prevents other document
-              // keydown handlers (e.g. consumer code, auro-dialog) from also acting
-              // on Escape while the modal owns the key.
-              evt.preventDefault();
-              evt.stopImmediatePropagation();
-            }
-          };
-          document.addEventListener("keydown", this.keyDownHandler);
-        }
+        this.setupDismissHandlers();
         this.showing = true;
         element.isPopoverVisible = true;
         this.position();
@@ -2810,7 +2889,35 @@ class AuroFloatingUI {
     this.enableKeyboardHandling = enableKeyboardHandling;
 
     this.eventPrefix = eventPrefix;
-    if (this.element !== elem) {
+
+    // A retained scroll lock's saved body styles were captured for whichever
+    // element held it, so only a same-element rewire may keep it. An actual
+    // element swap has to take the full teardown, or this instance is left
+    // holding a lock that no longer describes the page it points at — with no
+    // owner able to release it (AB#1647843).
+    const rewiringSameElement = this.element === elem;
+
+    if (!rewiringSameElement) {
+      // Tear down against the outgoing element, before this.element is
+      // repointed. Everything disconnect() releases is element-scoped:
+      // aria-modal on that element's inner dialog, the bib transform saved for
+      // it, its autoUpdate loop and its trigger listeners. Repointing first
+      // aimed all of it at the incoming element — the outgoing dialog kept
+      // aria-modal="true" for good, its bib stayed transformed, and the
+      // incoming bib had the outgoing element's saved transform written onto
+      // it. The trigger gate below read the incoming element's trigger, which
+      // is not assigned until later in this method, so on a swap teardown was
+      // usually skipped outright and the page stayed locked with no owner.
+      if (this.element?.trigger) {
+        this.disconnect({ teardown: true });
+      }
+
+      // disconnect() does not clear this.showing, and the rewire block at the
+      // end of this method only runs for a same-element rewire. Left true, the
+      // incoming element's first showBib() is silently dropped by its
+      // `!this.showing` guard and the overlay never opens.
+      this.showing = false;
+
       this.element = elem;
     }
 
@@ -2823,8 +2930,10 @@ class AuroFloatingUI {
       this.behavior = element.behavior;
     }
 
-    if (element.trigger) {
-      this.disconnect();
+    if (rewiringSameElement && element.trigger) {
+      // Rewiring, not tearing down — an overlay that is open right now keeps
+      // its page scroll lock across a trigger change.
+      this.disconnect({ teardown: false });
     }
     element.trigger =
       element.triggerElement ||
@@ -2853,11 +2962,61 @@ class AuroFloatingUI {
       element.trigger.addEventListener("focus", this.handleEvent);
       element.trigger.addEventListener("blur", this.handleEvent);
     }
+
+    // disconnect() above stripped the dismissal handlers and killed the
+    // autoUpdate loop; the trigger listeners re-registered here replace
+    // neither. An overlay that is open right now would otherwise be left on
+    // screen with outside-click, focus-loss and Escape all dead and its
+    // position frozen — and, since the lock is deliberately retained, holding
+    // the page with only its original trigger able to give it back.
+    if (rewiringSameElement && this.showing) {
+      this.setupDismissHandlers();
+
+      if (element.bib && (element.trigger || element.parentNode)) {
+        element.cleanup = autoUpdate(
+          element.trigger || element.parentNode,
+          element.bib,
+          () => {
+            this.position();
+          },
+        );
+      }
+    }
   }
 
-  disconnect() {
+  /**
+   * Tears the floater's connections down.
+   *
+   * Two callers with different intent share this: a real teardown, which must
+   * release the page scroll lock, and configure(), which re-runs it purely to
+   * rewire a changed trigger and must leave an open overlay's lock alone.
+   * @param {Object} [options] - Teardown options.
+   * @param {Boolean} [options.teardown] - False when only rewiring; keeps the
+   *   page scroll lock held for an overlay that is still open.
+   * @returns {void}
+   */
+  disconnect({ teardown = true } = {}) {
     this.cleanupHideHandlers();
 
+    // Cancel any pending configureBibStrategy() retry. It would otherwise fire
+    // a macrotask after the unlock below, re-lock the page, and leave it frozen
+    // with the floater already gone. Cancelled on a rewire too: configure()
+    // re-runs position() itself, so a stale retry has nothing to contribute.
+    if (this._configureRetryId !== undefined) {
+      clearTimeout(this._configureRetryId);
+      this._configureRetryId = undefined;
+    }
+
+    // Tearing down while the bib is still open would otherwise strand
+    // body{position:fixed} and leave the page permanently unscrollable —
+    // hideBib() is the only other unlock, and it never runs in this path.
+    // Skipped when merely rewiring: configure() routes through here on every
+    // triggerElement change, and releasing the lock there would unlock the page
+    // behind an overlay that is still open (AB#1625424, AB#1625435).
+    if (teardown) {
+      this.lockScroll(false);
+    }
+
     const element = this.element;
     if (!element) {
       return;
@@ -3843,7 +4002,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202609242008';
+var formkitVersion = '202610081824';
 
 /**
  * AuroElement is the shared base class for layout-aware Auro form components.