@jsenv/dom 0.15.0 → 0.17.0

package/dist/jsenv_dom.js

@@ -5550,7 +5550,22 @@ const performTabNavigation = (
     if (hasNegativeTabIndex(element)) {
       return false;
     }
-    return elementIsFocusable(element, { excludeAriaHidden });
+    if (!elementIsFocusable(element, { excludeAriaHidden })) {
+      return false;
+    }
+    // Native radio-group semantics: within a named radio group only ONE radio
+    // is a Tab stop — the checked one, or the first focusable one when none is
+    // checked. The rest are reachable with arrow keys, not Tab. Without this,
+    // tabbing into a group would land on its first radio instead of its checked
+    // value (e.g. tabbing between two wheels of a WheelGroup).
+    if (
+      element.matches?.('input[type="radio"]') &&
+      element.name &&
+      !radioIsGroupTabStop(element)
+    ) {
+      return false;
+    }
+    return true;
   };
 
   // A focus group "owns" the activeElement when activeElement is inside it.
@@ -5701,6 +5716,43 @@ const performTabNavigation = (
   }
 };
 
+// Whether a radio is the single Tab stop of its native radio group (checked, or
+// the first enabled radio when none is checked). Mirrors how the browser puts
+// only one radio of a group in the Tab order.
+const radioIsGroupTabStop = (radio) => {
+  const scope = radio.form || radio.getRootNode();
+  if (!scope || !scope.querySelectorAll) {
+    return true;
+  }
+  const sameName = scope.querySelectorAll(
+    `input[type="radio"][name="${CSS.escape(radio.name)}"]`,
+  );
+  const radioForm = radio.form || null;
+  let checked = null;
+  let firstEnabled = null;
+  let groupSize = 0;
+  for (const candidate of sameName) {
+    // Radios only form one group when they share the same form owner.
+    if ((candidate.form || null) !== radioForm) {
+      continue;
+    }
+    groupSize++;
+    if (candidate.disabled) {
+      continue;
+    }
+    if (!firstEnabled) {
+      firstEnabled = candidate;
+    }
+    if (candidate.checked && !checked) {
+      checked = candidate;
+    }
+  }
+  if (groupSize <= 1) {
+    return true;
+  }
+  return radio === (checked || firstEnabled);
+};
+
 const isTabEvent$1 = (event) => event.key === "Tab" || event.keyCode === 9;
 
 const hasNegativeTabIndex = (element) => {
@@ -6323,7 +6375,10 @@ const getScrollContainer = (arg, { includeHidden } = {}) => {
     }
     return null;
   }
-  if (element.hasAttribute("popover") && element.matches(":popover-open")) {
+  if (element.hasAttribute("popover")) {
+    return getScrollingElement(element.ownerDocument);
+  }
+  if (element.tagName === "DIALOG" && element.matches(":modal")) {
     return getScrollingElement(element.ownerDocument);
   }
   const position = getStyle(element, "position");
@@ -7173,49 +7228,61 @@ const getPaddingSizes = (element) => {
  */
 const trapScrollInside = (element) => {
   const cleanupCallbackSet = new Set();
-  const lockScroll = (el) => {
+
+  // Collect every element to lock first (preceding scrollable siblings + all
+  // ancestor scroll containers).
+  const elementsToLock = [];
+  let previous = element.previousSibling;
+  while (previous) {
+    if (previous.nodeType === 1 && isScrollable(previous)) {
+      elementsToLock.push(previous);
+    }
+    previous = previous.previousSibling;
+  }
+  for (const selfOrAncestorScroll of getSelfAndAncestorScrolls(element)) {
+    elementsToLock.push(selfOrAncestorScroll.scrollContainer);
+  }
+
+  // Phase 1 — MEASURE. Batch every layout/style read (scrollTop, scrollbar
+  // size, padding) before any style write, so the layout that showModal
+  // invalidated is recomputed once rather than thrashing between each write and
+  // the next read. (measureScrollbar still forces its own reflow per element via
+  // its probe node — that one is inherent.)
+  const plans = elementsToLock.map((el) => {
     const savedScrollTop = el.scrollTop;
     const savedScrollLeft = el.scrollLeft;
     const scrollbarGutter = getStyle(el, "scrollbar-gutter");
-    const hasScrollbarGutterStrategy =
-      scrollbarGutter && scrollbarGutter !== "auto";
-    if (hasScrollbarGutterStrategy) {
-      // The element manages its own gutter — just hide overflow, no padding needed.
-      const removeScrollLockStyles = setStyles(el, { overflow: "hidden" });
-      cleanupCallbackSet.add(() => {
-        removeScrollLockStyles();
-        el.scrollTop = savedScrollTop;
-        el.scrollLeft = savedScrollLeft;
-      });
-      return;
+    if (scrollbarGutter && scrollbarGutter !== "auto") {
+      // The element manages its own gutter — just hide overflow, no padding.
+      return {
+        el,
+        savedScrollTop,
+        savedScrollLeft,
+        styles: { overflow: "hidden" },
+      };
     }
     const [scrollbarWidth, scrollbarHeight] = measureScrollbar(el);
     const { right, bottom } = getPaddingSizes(el);
-    const removeScrollLockStyles = setStyles(el, {
-      "padding-right": `${right + scrollbarWidth}px`,
-      "padding-bottom": `${bottom + scrollbarHeight}px`,
-      "overflow": "hidden",
-    });
+    return {
+      el,
+      savedScrollTop,
+      savedScrollLeft,
+      styles: {
+        "padding-right": `${right + scrollbarWidth}px`,
+        "padding-bottom": `${bottom + scrollbarHeight}px`,
+        "overflow": "hidden",
+      },
+    };
+  });
+
+  // Phase 2 — MUTATE. All style writes together.
+  for (const { el, savedScrollTop, savedScrollLeft, styles } of plans) {
+    const removeScrollLockStyles = setStyles(el, styles);
     cleanupCallbackSet.add(() => {
       removeScrollLockStyles();
       el.scrollTop = savedScrollTop;
       el.scrollLeft = savedScrollLeft;
     });
-  };
-  let previous = element.previousSibling;
-  while (previous) {
-    if (previous.nodeType === 1) {
-      if (isScrollable(previous)) {
-        lockScroll(previous);
-      }
-    }
-    previous = previous.previousSibling;
-  }
-
-  const selfAndAncestorScrolls = getSelfAndAncestorScrolls(element);
-  for (const selfOrAncestorScroll of selfAndAncestorScrolls) {
-    const elementToScrollLock = selfOrAncestorScroll.scrollContainer;
-    lockScroll(elementToScrollLock);
   }
 
   return () => {
@@ -7363,6 +7430,74 @@ const applyWheelScrollThrough = (element, wheelEvent) => {
   });
 };
 
+/**
+ * The element `element` is genuinely `position: absolute`/`fixed` relative
+ * to: its own nearest positioned ancestor (walking up the DOM tree), or
+ * `document.documentElement` (the viewport) if none is found.
+ *
+ * Also aware of `element` itself being promoted to the top layer: a
+ * `<dialog>` actually shown modally (`showModal()`, matches `:modal` — a
+ * `.show()`'d, non-modal dialog does NOT match and is positioned like any
+ * other in-flow element instead, walked up normally below), or *any*
+ * `[popover]` element, always uses the initial containing block (the
+ * viewport) regardless of its own `position` or DOM ancestry — walking up
+ * its own parent chain (what the rest of this function does) would give
+ * the wrong answer for these two specifically, since their real DOM
+ * position becomes irrelevant to their own containing block the moment
+ * they're actually promoted. Checked via the `popover` attribute itself,
+ * not the live `:popover-open` state — unlike `<dialog>`, a `[popover]`
+ * element has no "local" mode: it's always top-layer-bound once shown,
+ * regardless of whether it happens to be open right this moment, so the
+ * static attribute alone is enough (and correct even when called just
+ * before `showPopover()` actually runs, when `:popover-open` isn't true
+ * yet).
+ *
+ * `document.documentElement` (not `document.body`, not `null`) is this
+ * function's own "no real container — use the viewport" sentinel:
+ * `documentElement` is the actual initial containing block, so the walk
+ * below stops there without testing its own `position` (there's nothing
+ * beyond it to fall back to anyway) — unlike the previous version of this
+ * function, which stopped one level too early, at `document.body`, without
+ * ever testing *its* `position` either (a `position: relative` body, for
+ * instance, would have been silently skipped). Returning `documentElement`
+ * instead of `null` also means no special-casing is needed by callers that
+ * already compare a resolved container against `document.documentElement`
+ * (see e.g. visible_rect.js's own `hasRealContainer` check).
+ */
+const getPositionedParent = (element) => {
+  const isPromotedToTopLayer =
+    (element.tagName === "DIALOG" && element.matches(":modal")) ||
+    element.hasAttribute("popover");
+  if (isPromotedToTopLayer) {
+    return document.documentElement;
+  }
+  let parent = element.parentElement;
+  while (parent && parent !== document.documentElement) {
+    const position = window.getComputedStyle(parent).position;
+    if (
+      position === "relative" ||
+      position === "absolute" ||
+      position === "fixed"
+    ) {
+      return parent;
+    }
+    parent = parent.parentElement;
+  }
+  return document.documentElement;
+};
+
+/**
+ * Walks `element` and its ancestors (stopping at, but not including,
+ * `document.documentElement`) looking for the first one whose *computed*
+ * `position` is `fixed` — i.e. pinned to the viewport, ignoring document
+ * scroll, regardless of what `element` itself is positioned relative to.
+ *
+ * @param {Element} element
+ * @returns {[left: number, top: number] | null} The fixed ancestor's own
+ *   viewport-relative `getBoundingClientRect()` origin, or `null` if neither
+ *   `element` nor any ancestor is fixed (i.e. `element` genuinely scrolls
+ *   with the document).
+ */
 const findSelfOrAncestorFixedPosition = (element) => {
   let current = element;
   while (true) {
@@ -7460,14 +7595,18 @@ const createDragElementPositioner = (
   let scrollableTop;
   let convertScrollablePosition;
 
-  const positionedParent = elementToMove
-    ? elementToMove.offsetParent
-    : element.offsetParent;
+  // getPositionedParent, not raw .offsetParent — offsetParent is null for a
+  // position: fixed element, and also for one promoted to the top layer
+  // (e.g. a <dialog>/[popover] being dragged by its own handle), which
+  // crashes the fixed-position lookup below (findSelfOrAncestorFixedPosition
+  // assumes a real starting element, not null). getPositionedParent never
+  // returns null (document.documentElement instead — see its own doc).
+  const positionedParent = getPositionedParent(elementToMove || element);
   const scrollContainer = getScrollContainer(element);
   const [getPositionOffsets, getScrollOffsets] = createGetOffsets({
     positionedParent,
     referencePositionedParent: referenceElement
-      ? referenceElement.offsetParent
+      ? getPositionedParent(referenceElement)
       : positionedParent,
     scrollContainer,
     referenceScrollContainer: referenceElement
@@ -7721,7 +7860,7 @@ const isOverlayOf = (element, potentialTarget) => {
   if (overlayTarget === potentialTarget) {
     return true;
   }
-  const overlayTargetPositionedParent = overlayTarget.offsetParent;
+  const overlayTargetPositionedParent = getPositionedParent(overlayTarget);
   if (overlayTargetPositionedParent === potentialTarget) {
     return true;
   }
@@ -10864,42 +11003,160 @@ const getResizeDirection = (element) => {
   return { x, y };
 };
 
-const getPositionedParent = (element) => {
-  let parent = element.parentElement;
-  while (parent && parent !== document.body) {
-    const position = window.getComputedStyle(parent).position;
-    if (
-      position === "relative" ||
-      position === "absolute" ||
-      position === "fixed"
-    ) {
-      return parent;
-    }
-    parent = parent.parentElement;
+// Shared by navi's own use_displayed_layout_effect.js (rich "navi_displayed"
+// CustomEvent, open transitions only) and visible_rect.js (needs both
+// directions: hide when a container closes, recheck when it reopens) — the
+// selector/open-detection/timing primitives are identical for both, only
+// what each does with a transition differs.
+const ANCESTOR_OPEN_SELECTOR = "dialog, details, [popover], [aria-expanded]";
+
+const closestOpenableAncestor = (element) => {
+  const parentElement = element.parentElement;
+  if (!parentElement) {
+    return null;
   }
-  return document.body;
+  if (!parentElement.closest) {
+    return null;
+  }
+  return parentElement.closest(ANCESTOR_OPEN_SELECTOR);
+};
+
+const isAncestorOpen = (ancestor) => {
+  if (ancestor.tagName === "DIALOG" || ancestor.hasAttribute("popover")) {
+    return ancestor.matches(":popover-open, [open]");
+  }
+  if (ancestor.tagName === "DETAILS") {
+    return ancestor.open;
+  }
+  if (ancestor.hasAttribute("aria-expanded")) {
+    return ancestor.getAttribute("aria-expanded") === "true";
+  }
+  return true;
+};
+
+const getAncestorOpenType = (ancestor) => {
+  if (ancestor === document) {
+    return "document";
+  }
+  if (ancestor.tagName === "DIALOG") {
+    return "dialog";
+  }
+  if (ancestor.hasAttribute("popover")) {
+    return "popover";
+  }
+  if (ancestor.tagName === "DETAILS") {
+    return "details";
+  }
+  if (ancestor.hasAttribute("aria-expanded")) {
+    return `${ancestor.tagName}[aria-expanded]`;
+  }
+  return `${ancestor.tagName}`;
 };
 
 /**
- * Like `getPositionedParent`, but aware of `element` itself being promoted
- * to the top layer: an element with a `popover` attribute, or a `<dialog>`,
- * always uses the initial containing block (the viewport) once shown,
- * regardless of `position` or DOM ancestry — walking up its own parent
- * chain looking for a positioned ancestor (what `getPositionedParent` does)
- * would give the wrong answer for these two specifically, since their real
- * DOM position becomes irrelevant to their own containing block the moment
- * they're actually open.
- *
- * Returns `null` to mean "the viewport" (matching how a real anchor
- * resolves to `null`/no-anchor callers already treat that as a request for
- * viewport-relative positioning) for a popover/dialog element;
- * `getPositionedParent(element)` otherwise.
+ * Notifies `callback({ isOpen, ancestor, ancestorType, toggleEvent })` the
+ * moment `ancestor`'s open state changes, in either direction — timed to
+ * land strictly before the browser's next paint, so a caller reacting to it
+ * (measurement, visibility tracking, layout) never flashes the stale state
+ * first. Plain object, not a CustomEvent — there's no real DOM event behind
+ * most of these transitions (see `toggleEvent` below), so wrapping the info
+ * in one would mostly be manufacturing a fake event for no benefit.
+ *
+ * We deliberately do NOT use the native `toggle` event as the primary
+ * signal, even though every <dialog>/<details>/[popover] fires one: per the
+ * WHATWG spec it's dispatched via a *queued task* ("queue a popover toggle
+ * event task"), not synchronously and not as a microtask. The element's
+ * shown state itself (showPopover()/showModal()) still flips synchronously,
+ * so the browser can — and does — paint it in its default, uncorrected
+ * state before that queued task ever runs. Relying on `toggle` alone means
+ * a reaction to it always arrives one paint late.
+ *
+ * Instead we watch `open`/`aria-expanded` via MutationObserver:
+ *   - <dialog>/<details> reflect `open` themselves, natively, synchronously.
+ *   - navi's own Popover.jsx sets `aria-expanded` synchronously in the same
+ *     call stack as showPopover() (see popover.jsx's own aria-expanded
+ *     comments) — not part of any web standard, just that library's own
+ *     convention, but reliable for anything built through it.
+ * MutationObserver callbacks run as a microtask, strictly before paint —
+ * exactly the timing needed, no ambiguity. `toggleEvent` is `undefined` on
+ * this path (there's no native event to report — a mutation record isn't
+ * one).
+ *
+ * The `toggle` listener is kept as a fallback, attached ONLY where the
+ * MutationObserver above has no chance of ever firing: a bare [popover]
+ * element with no `aria-expanded` of its own — i.e. one not built through
+ * navi's own Popover.jsx (the only thing that reliably sets it). That's the
+ * one case with no other synchronously-observable signal at all. It still
+ * arrives a paint late, but a late correction beats none. `toggleEvent` is
+ * the real `toggle` event on this path.
+ *
+ * @param {Element} ancestor
+ * @param {(info: { isOpen: boolean, ancestor: Element, ancestorType: string, toggleEvent: Event | undefined }) => void} callback
+ * @returns {() => void} cleanup — removes the observer/listener
  */
-const getPositioningContainer = (element) => {
-  if (element.hasAttribute("popover") || element.tagName === "DIALOG") {
-    return null;
+const observeAncestorOpenState = (ancestor, callback) => {
+  const ancestorType = getAncestorOpenType(ancestor);
+  const needsToggleFallback =
+    ancestor.hasAttribute("popover") && !ancestor.hasAttribute("aria-expanded");
+  if (needsToggleFallback) {
+    const onToggle = (toggleEvent) => {
+      callback({
+        isOpen: isAncestorOpen(ancestor),
+        ancestor,
+        ancestorType,
+        toggleEvent,
+      });
+    };
+    ancestor.addEventListener("toggle", onToggle);
+    return () => {
+      ancestor.removeEventListener("toggle", onToggle);
+    };
   }
-  return getPositionedParent(element);
+
+  // Edge-triggered on purpose: some consumers (e.g. Popover.jsx) set
+  // aria-expanded both imperatively (in their own openEffect, for precise
+  // ordering relative to forced reflows/transitions) AND declaratively via a
+  // JSX prop derived from the same open state — the latter is a deliberate
+  // "always reflect current truth" prop, but Preact diffs against its own
+  // previous *rendered* value, not the live DOM, so any later re-render that
+  // happens to occur while already open re-applies the same "true" value as
+  // a genuinely new attribute mutation. Tracking wasOpen here collapses that
+  // redundant open→open (or close→close) mutation instead of notifying
+  // callback a second time for the same state.
+  let wasOpen = isAncestorOpen(ancestor);
+  const observer = new MutationObserver(() => {
+    const isOpen = isAncestorOpen(ancestor);
+    if (isOpen === wasOpen) {
+      return;
+    }
+    wasOpen = isOpen;
+    callback({
+      isOpen,
+      ancestor,
+      ancestorType,
+      toggleEvent: undefined,
+    });
+  });
+  observer.observe(ancestor, {
+    attributes: true,
+    attributeFilter: ["open", "aria-expanded"],
+  });
+  return () => {
+    observer.disconnect();
+  };
+};
+
+const onAncestorReopen = (el, callback) => {
+  const nearestOpenableAncestor = closestOpenableAncestor(el);
+  if (!nearestOpenableAncestor) {
+    return () => {};
+  }
+  return observeAncestorOpenState(nearestOpenableAncestor, ({ isOpen }) => {
+    if (!isOpen) {
+      return;
+    }
+    callback();
+  });
 };
 
 const getHeight = (element) => {
@@ -11296,10 +11553,10 @@ const MIN_CONTENT_VISIBILITY_RATIO = 0.6;
  *   Is 0 when ancestorClosed is true.
  *
  * @typedef {Object} VisibleRectInfo
- * @property {Event}   event          - The DOM event (or CustomEvent) that triggered the check.
- * @property {number}  width          - Raw getBoundingClientRect() width of the element.
- * @property {number}  height         - Raw getBoundingClientRect() height of the element.
- * @property {boolean} ancestorClosed - True when a popover, dialog, or details ancestor is
+ * @property {Event}   event                 - The DOM event (or CustomEvent) that triggered the check.
+ * @property {number}  width                 - Raw getBoundingClientRect() width of the element.
+ * @property {number}  height                - Raw getBoundingClientRect() height of the element.
+ * @property {boolean} ancestorClosed        - True when a popover, dialog, or details ancestor is
  *   currently closed so the element is not rendered. All visibleRect values are 0 in that case.
  *   update() is called immediately on ancestor close and again (with false) on reopen.
  *
@@ -11307,6 +11564,7 @@ const MIN_CONTENT_VISIBILITY_RATIO = 0.6;
  *   - Once synchronously on initialization (event.type = "initialization")
  *   - On document/container scroll, window resize, element resize, intersection changes, touch move
  *   - Immediately when an ancestor popover/dialog/details opens or closes
+ *   - Immediately when an ancestor popover/dialog starts or stops repositioning itself
  *
  * A bit like https://tetherjs.dev/ but different
  */
@@ -11332,8 +11590,72 @@ const visibleRectEffect = (
   let lastMeasuredWidth;
   let lastMeasuredHeight;
   let ancestorClosedCount = 0;
+  // Every ResizeObserver this effect owns (its own element-resize watcher
+  // below, plus one per observeSize() call) unobserves itself the moment an
+  // ancestor closes, reobserving once it reopens (see on_ancestor_events) —
+  // closing a dialog/popover containing several watched elements can make
+  // them all collapse to zero size in the same reflow, which is what trips
+  // the browser's "ResizeObserver loop completed with undelivered
+  // notifications" warning. Proactively unobserving avoids generating those
+  // notifications instead of just reacting differently to them.
+  // Set while an ancestor is itself mid-repositioning — on_ancestor_events'
+  // own onNaviPositionTransition already drives this element's position
+  // every frame for that duration, more accurately than the direct
+  // window/visualViewport resize reaction below (on_resize) could. Gates
+  // that reaction so it doesn't also fire mid-transition and animate its
+  // own competing move toward a target computed from the anchor's still
+  // mid-flight rect, racing the frame-by-frame follow loop.
+  let ancestorRepositioningCount = 0;
+  // check() runs on every scroll/resize/frame of an ancestor's own
+  // transition, but plenty of those land on an identical result — skip
+  // calling update() again when neither snapshot changed. Two snapshots,
+  // not one, because pickPositionRelativeTo depends on both separately:
+  //   - lastVisibleRect: left/top/width/height, plus visibilityRatio (which
+  //     can change on its own — see its own ratio formula further down —
+  //     without any of the other four moving).
+  //   - lastViewportRect: not part of visibleRect at all, but an on-screen
+  //     keyboard opening/closing can shrink the viewport without moving
+  //     this element's own visibleRect by a single pixel, and
+  //     pickPositionRelativeTo's available space depends on it too.
+  let lastVisibleRect = null;
+  let lastViewportRect = null;
+  let resizeWatchingPaused = false;
+  const [publishResizeWatchingPausedChange, onResizeWatchingPausedChange] =
+    createPubSub();
+  const pauseResizeWatching = () => {
+    if (resizeWatchingPaused) {
+      return;
+    }
+    resizeWatchingPaused = true;
+    publishResizeWatchingPausedChange(true);
+  };
+  const resumeResizeWatching = () => {
+    if (!resizeWatchingPaused) {
+      return;
+    }
+    resizeWatchingPaused = false;
+    publishResizeWatchingPausedChange(false);
+  };
   const check = (event) => {
 
+    // visualViewport, not window.innerWidth/Height: the layout viewport
+    // doesn't shrink when the on-screen keyboard opens (same reasoning as
+    // pickPositionRelativeTo's own identical choice). offsetLeft/Top matter
+    // too, for pinch-zoom/pan. Computed here regardless of scroll container
+    // (not just where the non-document branch below needs it) because a
+    // keyboard opening can change pickPositionRelativeTo's available space
+    // without moving this element's own visibleRect at all — see
+    // viewportRectChanged further down.
+    const visualViewport = window.visualViewport;
+    const viewportWidth = visualViewport
+      ? visualViewport.width
+      : window.innerWidth;
+    const viewportHeight = visualViewport
+      ? visualViewport.height
+      : window.innerHeight;
+    const viewportOffsetLeft = visualViewport ? visualViewport.offsetLeft : 0;
+    const viewportOffsetTop = visualViewport ? visualViewport.offsetTop : 0;
+
     // 1. Calculate element position relative to scrollable parent
     const { scrollLeft, scrollTop } = scrollContainer;
     const visibleAreaLeft = scrollLeft;
@@ -11434,22 +11756,26 @@ const visibleRectEffect = (
     if (scrollContainerIsDocument) {
       visibilityRatio = (widthVisible * heightVisible) / (width * height);
     } else {
-      // widthVisible/heightVisible are already clipped to the scroll container.
-      // Now clip their viewport-relative counterparts against the viewport.
-      const viewportWidth = window.innerWidth;
-      const viewportHeight = window.innerHeight;
+      // widthVisible/heightVisible are already clipped to the scroll
+      // container. Now clip their viewport-relative counterparts against
+      // the viewport (viewportWidth/Height/OffsetLeft/OffsetTop computed
+      // once, at the top of check() — see their own comment there).
       // Container-clipped visible rect in viewport coordinates
       const visibleLeft = overlayLeft;
       const visibleTop = overlayTop;
       const visibleRight = overlayLeft + widthVisible;
       const visibleBottom = overlayTop + heightVisible;
       // Intersect with viewport
-      const clippedLeft = visibleLeft < 0 ? 0 : visibleLeft;
-      const clippedTop = visibleTop < 0 ? 0 : visibleTop;
+      const clippedLeft =
+        visibleLeft < viewportOffsetLeft ? viewportOffsetLeft : visibleLeft;
+      const clippedTop =
+        visibleTop < viewportOffsetTop ? viewportOffsetTop : visibleTop;
+      const viewportRight = viewportOffsetLeft + viewportWidth;
+      const viewportBottom = viewportOffsetTop + viewportHeight;
       const clippedRight =
-        visibleRight > viewportWidth ? viewportWidth : visibleRight;
+        visibleRight > viewportRight ? viewportRight : visibleRight;
       const clippedBottom =
-        visibleBottom > viewportHeight ? viewportHeight : visibleBottom;
+        visibleBottom > viewportBottom ? viewportBottom : visibleBottom;
       const clippedWidth =
         clippedRight > clippedLeft ? clippedRight - clippedLeft : 0;
       const clippedHeight =
@@ -11466,12 +11792,49 @@ const visibleRectEffect = (
       height: heightVisible,
       visibilityRatio,
     };
-    update(visibleRect, {
-      event,
-      width,
-      height,
-      ancestorClosed: ancestorClosedCount > 0,
-    });
+    // Not part of visibleRect itself, tracked only so viewportRectChanged
+    // below can catch a keyboard opening/closing even when it doesn't move
+    // this element's own visibleRect.
+    const viewportRect = {
+      viewportWidth,
+      viewportHeight,
+      viewportOffsetLeft,
+      viewportOffsetTop,
+    };
+    const notify = (reason) => {
+      update(visibleRect, {
+        event,
+        width,
+        height,
+        ancestorClosed: ancestorClosedCount > 0,
+      });
+    };
+
+    const visibleRectChanged =
+      !lastVisibleRect ||
+      lastVisibleRect.left !== visibleRect.left ||
+      lastVisibleRect.top !== visibleRect.top ||
+      lastVisibleRect.width !== visibleRect.width ||
+      lastVisibleRect.height !== visibleRect.height ||
+      lastVisibleRect.visibilityRatio !== visibleRect.visibilityRatio;
+    if (visibleRectChanged) {
+      lastVisibleRect = visibleRect;
+      lastViewportRect = viewportRect;
+      notify();
+      return;
+    }
+    const viewportRectChanged =
+      !lastViewportRect ||
+      lastViewportRect.viewportWidth !== viewportRect.viewportWidth ||
+      lastViewportRect.viewportHeight !== viewportRect.viewportHeight ||
+      lastViewportRect.viewportOffsetLeft !== viewportRect.viewportOffsetLeft ||
+      lastViewportRect.viewportOffsetTop !== viewportRect.viewportOffsetTop;
+    if (viewportRectChanged) {
+      lastVisibleRect = visibleRect;
+      lastViewportRect = viewportRect;
+      notify();
+      return;
+    }
   };
 
   check(initialEvent);
@@ -11549,8 +11912,24 @@ const visibleRectEffect = (
     {
       // See window_size.js's own module comment for why both of these go
       // through their shared debounce instead of each keeping its own timer.
-      addTeardown(subscribeVisualViewportResizeSettled(autoCheck));
-      addTeardown(subscribeWindowResizeSettled(autoCheck));
+      const onWindowOrViewportResize = (event) => {
+        // An ancestor's own navi_position_transition follow loop (see
+        // on_ancestor_events below) is already re-checking this element's
+        // position every frame, tracking the ancestor's live in-flight
+        // position — more accurately than this debounced, ~100ms-after-the-
+        // fact check could. Reacting here too would race it: a real
+        // "resize" event makes shouldTransition true, so this would animate
+        // its own competing move toward a target computed from the
+        // anchor's current (still mid-flight) rect.
+        if (ancestorRepositioningCount > 0) {
+          return;
+        }
+        autoCheck(event);
+      };
+      addTeardown(
+        subscribeVisualViewportResizeSettled(onWindowOrViewportResize),
+      );
+      addTeardown(subscribeWindowResizeSettled(onWindowOrViewportResize));
     }
     on_element_resize: {
       if (skipElementResize) {
@@ -11585,16 +11964,30 @@ const visibleRectEffect = (
         handlingResize = false;
       });
       resizeObserver.observe(element);
+      const unsubscribeResizeWatchingPausedChange =
+        onResizeWatchingPausedChange((paused) => {
+          if (paused) {
+            resizeObserver.unobserve(element);
+          } else {
+            resizeObserver.observe(element);
+          }
+        });
       // Temporarily disconnect ResizeObserver to prevent feedback loops eventually caused by update function
       onBeforeAutoCheck(() => {
         resizeObserver.unobserve(element);
         return () => {
-          // This triggers a new call to the resive observer that will be ignored thanks to
-          // the widthDiff/heightDiff early return
-          resizeObserver.observe(element);
+          // Not reobserved at all while an ancestor is closed (see
+          // pauseResizeWatching/resumeResizeWatching above) — resumeResizeWatching's
+          // own publish is what reobserves once it reopens instead.
+          if (!resizeWatchingPaused) {
+            // This triggers a new call to the resive observer that will be ignored thanks to
+            // the widthDiff/heightDiff early return
+            resizeObserver.observe(element);
+          }
         };
       });
       addTeardown(() => {
+        unsubscribeResizeWatchingPausedChange();
         resizeObserver.disconnect();
       });
     }
@@ -11648,29 +12041,27 @@ const visibleRectEffect = (
       });
     }
     {
-      let current = element.parentElement;
-      while (current) {
-        if (
-          current.hasAttribute("popover") ||
-          current.tagName === "DIALOG" ||
-          current.tagName === "DETAILS"
-        ) {
-          const ancestor = current;
-          const isInitiallyClosed =
-            ancestor.tagName === "DIALOG" || ancestor.tagName === "DETAILS"
-              ? !ancestor.open
-              : !ancestor.matches(":popover-open");
-          if (isInitiallyClosed) {
-            ancestorClosedCount++;
-          }
+      let currentOpenableAncestor = closestOpenableAncestor(element);
+      while (currentOpenableAncestor) {
+        const openableAncestor = currentOpenableAncestor;
+        if (!isAncestorOpen(openableAncestor)) {
+          ancestorClosedCount++;
+          pauseResizeWatching();
+        }
+        const removeOpenStateObserver = observeAncestorOpenState(
+          openableAncestor,
           // eslint-disable-next-line no-loop-func
-          const onToggle = (e) => {
-            const isClosed =
-              ancestor.tagName === "DETAILS"
-                ? !ancestor.open
-                : e.newState === "closed";
-            if (isClosed) {
+          ({ isOpen, toggleEvent }) => {
+            if (!isOpen) {
               ancestorClosedCount++;
+              pauseResizeWatching();
+              // Invalidates check()'s own "did anything actually change"
+              // caches — without this, reopening onto the exact same
+              // geometry/viewport as before closing would look unchanged to
+              // check() and it would skip calling update() again, leaving a
+              // consumer stuck showing this closed/zeroed state.
+              lastVisibleRect = null;
+              lastViewportRect = null;
               update(
                 {
                   left: 0,
@@ -11681,35 +12072,91 @@ const visibleRectEffect = (
                   height: 0,
                   visibilityRatio: 0,
                 },
-                { event: e, width: 0, height: 0, ancestorClosed: true },
+                {
+                  event: toggleEvent ?? new CustomEvent("ancestor_close"),
+                  width: 0,
+                  height: 0,
+                  ancestorClosed: true,
+                },
               );
-            } else {
-              if (ancestorClosedCount > 0) {
-                ancestorClosedCount--;
-              }
-              if (ancestorClosedCount === 0) {
-                check(e);
-              }
+              return;
             }
-          };
-          ancestor.addEventListener("toggle", onToggle);
+            if (ancestorClosedCount > 0) {
+              ancestorClosedCount--;
+            }
+            if (ancestorClosedCount === 0) {
+              resumeResizeWatching();
+              check(toggleEvent ?? new CustomEvent("ancestor_open"));
+            }
+          },
+        );
 
-          const onNaviPositionChange = (e) => {
+        const onNaviPositionChange = (e) => {
+          autoCheck(e);
+        };
+        openableAncestor.addEventListener(
+          "navi_position_change",
+          onNaviPositionChange,
+        );
+        // Dispatched by applyNewPosition's own notifyPositionTransition
+        // around this ancestor's own left/top animation (distinct from
+        // navi_position_change, fired once with the final target, not per
+        // frame). The anchor this element is positioned against may live
+        // inside that ancestor and be moving right now — rather than hiding
+        // for the duration (an opacity flicker once it settles reads worse
+        // than a slightly-behind position), autoCheck() every frame for as
+        // long as the animation runs, so this element stays in lockstep.
+        // autoCheck, not check directly, so this element's own
+        // ResizeObserver(s) stay unobserved for the loop's duration too —
+        // repositioning every frame can itself cause reflows. e.detail.onEnd
+        // stops the loop and settles on one final check once it ends.
+        let positionTransitionRafId = null;
+        let isTrackingPositionTransition = false;
+        // ancestorRepositioningCount is intentionally shared across every
+        // ancestor level (declared once, outside this loop) — it's a
+        // single "is this element's position currently being driven by
+        // some ancestor's transition" flag for the element itself, not
+        // per-ancestor state.
+        // eslint-disable-next-line no-loop-func
+        const onNaviPositionTransition = (e) => {
+          cancelAnimationFrame(positionTransitionRafId);
+          if (!isTrackingPositionTransition) {
+            isTrackingPositionTransition = true;
+            ancestorRepositioningCount++;
+          }
+          const loop = () => {
             autoCheck(e);
+            positionTransitionRafId = requestAnimationFrame(loop);
           };
-          ancestor.addEventListener(
+          loop();
+          e.detail.onEnd(() => {
+            cancelAnimationFrame(positionTransitionRafId);
+            if (isTrackingPositionTransition) {
+              isTrackingPositionTransition = false;
+              ancestorRepositioningCount--;
+            }
+            autoCheck(e);
+          });
+        };
+        openableAncestor.addEventListener(
+          "navi_position_transition",
+          onNaviPositionTransition,
+        );
+        addTeardown(() => {
+          removeOpenStateObserver();
+          cancelAnimationFrame(positionTransitionRafId);
+          openableAncestor.removeEventListener(
             "navi_position_change",
             onNaviPositionChange,
           );
-          addTeardown(() => {
-            ancestor.removeEventListener("toggle", onToggle);
-            ancestor.removeEventListener(
-              "navi_position_change",
-              onNaviPositionChange,
-            );
-          });
-        }
-        current = current.parentElement;
+          openableAncestor.removeEventListener(
+            "navi_position_transition",
+            onNaviPositionTransition,
+          );
+        });
+        currentOpenableAncestor = closestOpenableAncestor(
+          currentOpenableAncestor,
+        );
       }
     }
   }
@@ -11774,20 +12221,45 @@ const visibleRectEffect = (
       });
     });
     resizeObserver.observe(elementToObserve);
+    // An ancestor may already be closed by the time a consumer calls
+    // observeSize (e.g. Callout's own observeSize(calloutMessageElement)
+    // call happens after visibleRectEffect itself returns) — keep this new
+    // observer consistent with that already-paused state instead of
+    // observing it only to immediately generate a closed-container
+    // notification.
+    if (resizeWatchingPaused) {
+      resizeObserver.unobserve(elementToObserve);
+    }
+    const unsubscribeResizeWatchingPausedChange = onResizeWatchingPausedChange(
+      (paused) => {
+        if (paused) {
+          resizeObserver.unobserve(elementToObserve);
+        } else {
+          resizeObserver.observe(elementToObserve);
+        }
+      },
+    );
     const cleanupAutoCheck = onBeforeAutoCheck(() => {
       resizeObserver.unobserve(elementToObserve);
       return () => {
-        resizeObserver.observe(elementToObserve);
+        // Not reobserved at all while an ancestor is closed (see
+        // pauseResizeWatching/resumeResizeWatching) — resumeResizeWatching's
+        // own publish is what reobserves once it reopens instead.
+        if (!resizeWatchingPaused) {
+          resizeObserver.observe(elementToObserve);
+        }
       };
     });
     addTeardown(() => {
       if (pendingFrame !== null) {
         cancelAnimationFrame(pendingFrame);
       }
+      unsubscribeResizeWatchingPausedChange();
       resizeObserver.disconnect();
     });
     return () => {
       cleanupAutoCheck();
+      unsubscribeResizeWatchingPausedChange();
       if (pendingFrame !== null) {
         cancelAnimationFrame(pendingFrame);
       }
@@ -11984,17 +12456,18 @@ const toContainerAlignedPosition = (value) => {
  *   there's a real `anchor`, since `element` can be container-relative either way (e.g. the
  *   custom renderer in popover.jsx, always relative to its own positioned ancestor whether
  *   or not it also has a real anchor). Whenever not explicitly given, this is always
- *   resolved automatically via `getPositioningContainer(element)` instead — regardless of
+ *   resolved automatically via `getPositionedParent(element)` instead — regardless of
  *   `hasValidAnchor` — so a caller that never thinks about `container` at all still gets the
- *   right behavior on its own: `null` from `getPositioningContainer` (an `element` with a
- *   `popover` attribute, or a `<dialog>` — e.g. Callout's own element) falls back to the
- *   traditional document-relative path below, exactly as if `container` genuinely didn't
- *   apply; anything else `getPositioningContainer` finds (a real positioned ancestor) is
- *   used the same way an explicit `container` would be. A container that resolves to
- *   `document.documentElement` (the viewport) produces identical output to the plain
- *   document-relative path either way, since the document's own scroll and the viewport's
- *   own origin already coincide with what this generically computes for any other container
- *   element. When there's a real container (explicit or resolved) either way: the final
+ *   right behavior on its own: `document.documentElement` from `getPositionedParent` (an
+ *   `element` promoted to the top layer — a `[popover]` while shown, or a `<dialog>` while
+ *   actually modal — or one with no positioned ancestor at all, e.g. Callout's own element)
+ *   falls back to the traditional document-relative path below, exactly as if `container`
+ *   genuinely didn't apply; anything else `getPositionedParent` finds (a real positioned
+ *   ancestor) is used the same way an explicit `container` would be. A container that
+ *   resolves to `document.documentElement` (the viewport) produces identical output to the
+ *   plain document-relative path either way, since the document's own scroll and the
+ *   viewport's own origin already coincide with what this generically computes for any other
+ *   container element. When there's a real container (explicit or resolved) either way: the final
  *   `left`/`top` (and the returned `anchorLeft/Top/Right/Bottom`) are expressed relative to
  *   its own padding-box origin plus its own scroll, instead of the document's — `element`'s
  *   own computed `position` is *not* consulted in that case, unlike the traditional path.
@@ -12040,9 +12513,11 @@ const pickPositionRelativeTo = (
   // never gets offered more room (anchor-too-big check, flip decisions,
   // clamp) than its own container — resolvedContainer's own padding-box
   // edges when there is one — actually has.
-  const resolvedContainer = container ?? getPositioningContainer(element);
-  const hasRealContainer =
-    resolvedContainer && resolvedContainer !== document.documentElement;
+  // Always a real element now (never null/undefined) — getPositionedParent
+  // itself never returns anything falsy, document.documentElement (the
+  // viewport) included.
+  const resolvedContainer = container ?? getPositionedParent(element);
+  const hasRealContainer = resolvedContainer !== document.documentElement;
   const containerRect = hasRealContainer
     ? resolvedContainer.getBoundingClientRect()
     : null;
@@ -12118,14 +12593,13 @@ const pickPositionRelativeTo = (
     positionXFixed = positionX;
     positionYFixed = positionY;
   }
-  // resolvedContainer was already resolved above. `null` from
-  // getPositioningContainer (a popover/dialog element, e.g. Callout's own)
-  // falls through to the traditional document-relative path below all the
-  // same, so an existing caller that never thinks about `container` at all
-  // keeps behaving exactly as before.
-  const effectiveAnchor = hasValidAnchor
-    ? anchor
-    : resolvedContainer || document.documentElement;
+  // resolvedContainer was already resolved above. document.documentElement
+  // from getPositionedParent (a popover/dialog element, e.g. Callout's own,
+  // or one with no positioned ancestor at all) falls through to the
+  // traditional document-relative path below all the same, so an existing
+  // caller that never thinks about `container` at all keeps behaving
+  // exactly as before.
+  const effectiveAnchor = hasValidAnchor ? anchor : resolvedContainer;
   // document.documentElement is used as a sentinel "the viewport" value: an
   // anchorless popup should center/place itself against the visual
   // viewport, not against <html>'s own box — which, unlike the viewport,
@@ -12317,7 +12791,14 @@ const pickPositionRelativeTo = (
       if (currentFitsEnough) {
         finalX = activeX;
       } else {
-        finalX = oppositeX[activeX];
+        // Only flip if the opposite side has more space — avoids oscillation
+        // when neither side has enough room (both fail the ratio). Mirrors
+        // the Y-axis branch above; missing here was the actual cause of a
+        // real left/right flicker on a narrow viewport (neither side ever
+        // "fits enough", so this branch ran on every reposition).
+        const opposite = oppositeX[activeX];
+        const oppositeHasMoreSpace = spaceFor(opposite) > spaceFor(activeX);
+        finalX = oppositeHasMoreSpace ? opposite : activeX;
       }
     }
   }
@@ -12549,14 +13030,110 @@ const pickPositionRelativeTo = (
   };
 };
 
+// Per-element bookkeeping for the currently in-flight, self-driven position
+// transition, if any — see notifyPositionTransition's own doc for why this
+// is animation-driven rather than listening for the browser's own
+// transitionrun/transitionend: element -> { animation, endCallbacks }.
+const pendingPositionTransitions = new WeakMap();
+
+// Reads `cssVarName` off `element` (getComputedStyle, so it's whatever the
+// cascade resolves to — a consumer can set it inline, in its own CSS rule,
+// or not at all) and converts it to milliseconds: "0.25s" -> 250, "250ms" ->
+// 250. Falls back to `fallbackMs` when unset/empty/unparsable, so a caller
+// never has to declare the CSS var itself just to get a sane default
+// duration — it only needs to when it actually wants to override it.
+const parseTransitionDurationMs = (element, cssVarName, fallbackMs) => {
+  const trimmed = getStyle(element, cssVarName).trim();
+  if (!trimmed) {
+    return fallbackMs;
+  }
+  if (trimmed.endsWith("ms")) {
+    return parseFloat(trimmed);
+  }
+  if (trimmed.endsWith("s")) {
+    return parseFloat(trimmed) * 1000;
+  }
+  const parsed = parseFloat(trimmed);
+  return Number.isNaN(parsed) ? fallbackMs : parsed;
+};
+
 /**
- * Applies a `pickPositionRelativeTo` result to `element`. Drives
- * `--popup-position-transition-duration` (0s unless `shouldTransition`) so
- * a scroll-triggered reposition stays instant while a resize-triggered one
- * eases in — set via a CSS var rather than `transitionProperty` directly so
- * it doesn't clobber Popover/Dialog's own opacity/scale transition on the
- * same element; consumers declare `transition-duration:
- * var(--popup-position-transition-duration, 0s)` on `left`/`top` in CSS.
+ * Dispatches a single "navi_position_transition" event on `element`,
+ * self-driven rather than confirmed by the browser's own `transitionrun` —
+ * `applyNewPosition` calls this exactly when it knows it just started a
+ * left/top `animation`, so there's nothing to wait for. transitionrun was
+ * tried first and dropped: it reacts to *any* transition sharing the
+ * element (a scale/opacity entrance would wrongly hide a descendant too),
+ * and filtering by `propertyName` is unreliable (observed firing for "top"
+ * instead of "left" in practice, despite the transition-property order).
+ * A dedicated `Animation` sidesteps both.
+ *
+ * A descendant anchored inside `element` (see on_ancestor_events)
+ * re-checks its own position every frame for as long as this animation
+ * runs, instead of showing a stale position. `event.detail.onEnd(callback)`
+ * is how it learns when the animation actually ends.
+ *
+ * A second reposition landing mid-animation cancels the pending one and
+ * flushes its own registered callbacks immediately (same spirit as a real
+ * `transitioncancel`), so nothing is left waiting on a superseded `onEnd`.
+ *
+ * `commitStyles()` below isn't what makes the final position correct —
+ * `applyNewPosition` already sets the specified `left`/`top` before this
+ * animation starts, so it takes back over once the active duration elapses
+ * regardless. It just makes that explicit instead of relying on `fill:
+ * "none"` timing, and drops the finished Animation instead of leaving it.
+ */
+const notifyPositionTransition = (element, animation) => {
+  const pending = pendingPositionTransitions.get(element);
+  if (pending) {
+    pending.animation.cancel();
+    for (const callback of pending.endCallbacks) {
+      callback();
+    }
+  }
+  const endCallbacks = [];
+  dispatchCustomEvent(element, "navi_position_transition", {
+    onEnd: (callback) => {
+      endCallbacks.push(callback);
+    },
+  });
+  const current = { animation, endCallbacks };
+  pendingPositionTransitions.set(element, current);
+  animation.finished
+    .then(() => {
+      if (pendingPositionTransitions.get(element) === current) {
+        pendingPositionTransitions.delete(element);
+      }
+      try {
+        animation.commitStyles();
+      } catch {
+        // Element no longer rendered (removed/hidden mid-animation) —
+        // nothing to commit to, and left/top were already final anyway.
+      }
+      animation.cancel();
+      for (const callback of endCallbacks) {
+        callback();
+      }
+    })
+    .catch(() => {
+      // Cancelled by a subsequent reposition — already flushed above.
+    });
+};
+
+/**
+ * Applies a `pickPositionRelativeTo` result to `element`. `left`/`top` are
+ * set instantly (a scroll-triggered reposition should never lag its
+ * target); when `shouldTransition` is set (a resize-triggered reposition),
+ * the visual move is played out via `element.animate()` instead — kept
+ * independent of Popover/Dialog/Callout's own opacity/scale/display CSS
+ * transition on the same element, so neither can clobber the other (see
+ * notifyPositionTransition's own doc for why a dedicated Animation over a
+ * CSS one). Duration comes from `--popup-position-transition-duration`
+ * (parseTransitionDurationMs), falling back to 180ms unset.
+ * Dispatches navi_position_transition when it starts such an animation, and
+ * navi_position_change unconditionally — every caller (Dialog, Popover,
+ * Callout) wants both, so a descendant anchored inside `element` can always
+ * recheck its own position whenever `element` moves.
  */
 const applyNewPosition = (
   element,
@@ -12571,15 +13148,7 @@ const applyNewPosition = (
     spaceAbove,
     spaceBelow,
   },
-  { transitionDuration = "0.25s" } = {},
 ) => {
-  element.style.setProperty(
-    "--popup-position-transition-duration",
-    shouldTransition ? transitionDuration : "0s",
-  );
-  element.style.left = `${left}px`;
-  element.style.top = `${top}px`;
-
   if (positionY === "top" || positionY === "inset-bottom") {
     element.style.setProperty(
       "--container-position-remaining-height",
@@ -12606,6 +13175,42 @@ const applyNewPosition = (
   } else {
     element.style.removeProperty("--container-position-remaining-width");
   }
+
+  // A single implicit keyframe turned out not to work here: the WAAPI
+  // "neutral" start keyframe isn't frozen at `animate()` call time, it's
+  // resolved from the underlying value when the animation is first
+  // *sampled* (the next frame) — by then `element.style.left`/`top` below
+  // has already been overwritten with the new target, so start === end and
+  // nothing visibly moves (observed as the dialog just jumping). Reading
+  // the previous value ourselves, before overwriting it, and passing both
+  // keyframes explicitly sidesteps that entirely.
+  const previousLeft = parseFloat(element.style.left) || left;
+  const previousTop = parseFloat(element.style.top) || top;
+  if (shouldTransition) {
+    const animation = element.animate(
+      [
+        { left: `${previousLeft}px`, top: `${previousTop}px` },
+        { left: `${left}px`, top: `${top}px` },
+      ],
+      {
+        duration: parseTransitionDurationMs(
+          element,
+          "--popup-position-transition-duration",
+          250,
+        ),
+        easing: "ease",
+      },
+    );
+    notifyPositionTransition(element, animation);
+  }
+  // The specified `left`/`top` are set to their final target right away,
+  // regardless of `shouldTransition` — the animation above only plays the
+  // visual move from the old position, it never becomes the actual
+  // specified style (see notifyPositionTransition's own commitStyles for
+  // why that matters once it ends).
+  element.style.left = `${left}px`;
+  element.style.top = `${top}px`;
+  dispatchCustomEvent(element, "navi_position_change");
 };
 
 const [publishDebugger, subscribeDebugger] = createPubSub();
@@ -15858,4 +16463,4 @@ const useResizeStatus = (elementRef, { as = "number" } = {}) => {
   };
 };
 
-export { EASING, activeElementSignal, addActiveElementEffect, addAttributeEffect, allowWheelThrough, appendStyles, applyNewPosition, captureScrollState, chainEvent, contrastColor, createBackgroundColorTransition, createBackgroundTransition, createBorderRadiusTransition, createBorderTransition, createDragGestureController, createDragToMoveGestureController, createEventGroupLogger, createGroupTransitionController, createHeightTransition, createIterableWeakSet, createOpacityTransition, createPubSub, createStyleController, createTimelineTransition, createTransition, createTranslateXTransition, createValueEffect, createWidthTransition, cubicBezier, dispatchCustomEvent, dispatchInternalCustomEvent, dispatchPublicCustomEvent, dragAfterThreshold, elementIsFocusable, elementIsVisibleForFocus, elementIsVisuallyVisible, findAfter, findAncestor, findBefore, findDescendant, findEvent, findFocusDelegateTarget, findFocusable, formatEventSideEffect, getAvailableHeight, getAvailableWidth, getBackground, getBackgroundColor, getBorder, getBorderRadius, getBorderSizes, getContrastRatio, getDefaultStyles, getDragCoordinates, getDropTargetInfo, getElementSignature, getFirstVisuallyVisibleAncestor, getFocusVisibilityInfo, getHeight, getHeightWithoutTransition, getInnerHeight, getInnerWidth, getKeyboardEventDefaultAction, getLuminance, getMarginSizes, getMaxHeight, getMaxWidth, getMinHeight, getMinWidth, getOpacity, getOpacityWithoutTransition, getPaddingSizes, getPositionedParent, getPositioningContainer, getPositioningScrollOffset, getPreferedColorScheme, getScrollBox, getScrollContainer, getScrollContainerSet, getScrollRelativeRect, getSelfAndAncestorScrolls, getStyle, getTranslateX, getTranslateXWithoutTransition, getTranslateY, getVisuallyVisibleInfo, getWidth, getWidthWithoutTransition, hasCSSSizeUnit, initFlexDetailsSet, initFocusGroup, initPositionSticky, isSameColor, isScrollable, measureLongestVisualLineWidth, measureScrollbar, measureWidestChildRow, mergeOneStyle, mergeTwoStyles, normalizeKeyboardKey, normalizeStyle, normalizeStyles, parsePositionArea, parseStyle, performTabNavigation, pickPositionRelativeTo, prefersDarkColors, prefersLightColors, preventFocusNav, preventFocusNavViaKeyboard, preventIntermediateScrollbar, resolveCSSColor, resolveCSSSize, resolveColorLuminance, resolveOklchLightness, scrollIntoViewScoped, scrollIntoViewWithStickyAwareness, setAttribute, setAttributes, setStyles, snapToPixel, startDragToReorder, startDragToResizeGesture, stickyAsRelativeCoords, stringifyStyle, subscribeVisualViewportResizeSettled, subscribeWindowResizeSettled, trapFocusInside, trapScrollInside, useActiveElement, useAvailableHeight, useAvailableWidth, useMaxHeight, useMaxWidth, useResizeStatus, visibleRectEffect };
+export { EASING, activeElementSignal, addActiveElementEffect, addAttributeEffect, allowWheelThrough, appendStyles, applyNewPosition, captureScrollState, chainEvent, closestOpenableAncestor, contrastColor, createBackgroundColorTransition, createBackgroundTransition, createBorderRadiusTransition, createBorderTransition, createDragGestureController, createDragToMoveGestureController, createEventGroupLogger, createGroupTransitionController, createHeightTransition, createIterableWeakSet, createOpacityTransition, createPubSub, createStyleController, createTimelineTransition, createTransition, createTranslateXTransition, createValueEffect, createWidthTransition, cubicBezier, dispatchCustomEvent, dispatchInternalCustomEvent, dispatchPublicCustomEvent, dragAfterThreshold, elementIsFocusable, elementIsVisibleForFocus, elementIsVisuallyVisible, findAfter, findAncestor, findBefore, findDescendant, findEvent, findFocusDelegateTarget, findFocusable, findSelfOrAncestorFixedPosition, formatEventSideEffect, getAncestorOpenType, getAvailableHeight, getAvailableWidth, getBackground, getBackgroundColor, getBorder, getBorderRadius, getBorderSizes, getContrastRatio, getDefaultStyles, getDragCoordinates, getDropTargetInfo, getElementSignature, getFirstVisuallyVisibleAncestor, getFocusVisibilityInfo, getHeight, getHeightWithoutTransition, getInnerHeight, getInnerWidth, getKeyboardEventDefaultAction, getLuminance, getMarginSizes, getMaxHeight, getMaxWidth, getMinHeight, getMinWidth, getOpacity, getOpacityWithoutTransition, getPaddingSizes, getPositionedParent, getPositioningScrollOffset, getPreferedColorScheme, getScrollBox, getScrollContainer, getScrollContainerSet, getScrollRelativeRect, getSelfAndAncestorScrolls, getStyle, getTranslateX, getTranslateXWithoutTransition, getTranslateY, getVisuallyVisibleInfo, getWidth, getWidthWithoutTransition, hasCSSSizeUnit, initFlexDetailsSet, initFocusGroup, initPositionSticky, isAncestorOpen, isSameColor, isScrollable, measureLongestVisualLineWidth, measureScrollbar, measureWidestChildRow, mergeOneStyle, mergeTwoStyles, normalizeKeyboardKey, normalizeStyle, normalizeStyles, observeAncestorOpenState, onAncestorReopen, parsePositionArea, parseStyle, performTabNavigation, pickPositionRelativeTo, prefersDarkColors, prefersLightColors, preventFocusNav, preventFocusNavViaKeyboard, preventIntermediateScrollbar, resolveCSSColor, resolveCSSSize, resolveColorLuminance, resolveOklchLightness, scrollIntoViewScoped, scrollIntoViewWithStickyAwareness, setAttribute, setAttributes, setStyles, snapToPixel, startDragToReorder, startDragToResizeGesture, stickyAsRelativeCoords, stringifyStyle, subscribeVisualViewportResizeSettled, subscribeWindowResizeSettled, trapFocusInside, trapScrollInside, useActiveElement, useAvailableHeight, useAvailableWidth, useMaxHeight, useMaxWidth, useResizeStatus, visibleRectEffect };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/dom",
-  "version": "0.15.0",
+  "version": "0.17.0",
   "type": "module",
   "description": "DOM utilities for writing frontend code",
   "repository": {
@@ -40,8 +40,8 @@
     "@jsenv/core": "../../../",
     "@jsenv/navi": "../navi",
     "@jsenv/snapshot": "../../tooling/snapshot",
-    "@preact/signals": "2.9.3",
-    "preact": "11.0.0-beta.1"
+    "@preact/signals": "2.9.4",
+    "preact": "11.0.0-beta.2"
   },
   "publishConfig": {
     "access": "public"