@uniflowed/ui 0.8.0 → 0.10.0

package/accordion.js

@@ -99,7 +99,8 @@ import {
 } from "./internal/merge-props.js";
 import { moveOnKey } from "./internal/roving-focus.js";
 import type { RovingSet } from "./internal/roving-focus.js";
-import { useMeasuredHeight, usePresence, useUntilFound } from "./internal/disclosure.js";
+import { useDisclosurePanel, useRegistered } from "./internal/disclosure.js";
+import { presenceProps } from "./internal/presence.js";
 import { useControlled } from "./internal/controlled-state.js";
 
 /** Whether one section is open at a time, or any number of them. */
@@ -333,15 +334,17 @@ component AccordionContent(children: React.Node, render?: RenderProp, ...rest: R
   const accordion = useAccordion("Accordion.Content");
   const item = useAccordionItem("Accordion.Content");
   const contentRef = useRef<HTMLElement | null>(null);
-  usePresence(item.registerContent);
-  useUntilFound(contentRef, item.open);
-  useMeasuredHeight(contentRef, accordion.measure);
+  useRegistered(item.registerContent);
+  const presence = useDisclosurePanel(contentRef, item.open, accordion.measure);
 
   const props = withProps(withoutComposed(rest, ["ref"]), {
+    ...presenceProps(presence),
     // The name a reader hears for this landmark is the header they pressed.
     "aria-labelledby": item.triggerId,
     children,
-    hidden: !item.open,
+    // After the panel's closing transition, not at the moment it closes; see
+    // `collapsible.js`'s header.
+    hidden: !presence.present,
     id: item.contentId,
     // React calls callback refs during commit; this node is only read by effects.
     // uf-lint-disable-next-line react-compiler/refs

package/collapsible.js

@@ -35,12 +35,21 @@
 //
 //   [data-collapsible-content] {
 //     overflow: hidden;
-//     transition: height 150ms;
-//     height: 0;
-//   }
-//   [data-collapsible-content]:not([hidden]) {
 //     height: var(--uf-collapsible-height);
+//     transition: height 200ms;
+//   }
+//   @starting-style {
+//     [data-collapsible-content] { height: 0; }
 //   }
+//   [data-collapsible-content][data-state=closed] {
+//     height: 0;
+//     transition-duration: 150ms;
+//   }
+//
+// It opens from the `@starting-style` and closes on `[data-state=closed]`.
+// A closing panel is not `hidden` yet: it stays on screen, closed and `inert`,
+// until that transition has finished, and becomes `hidden` (and findable) only
+// then. With no transition to wait for it is hidden at once.
 //
 // The selector is the caller's — a class, a `data-*` of their own, whatever
 // they already style with. This package emits the number and no styles at all,
@@ -59,7 +68,8 @@ import {
   withProps,
   withoutComposed,
 } from "./internal/merge-props.js";
-import { useMeasuredHeight, usePresence, useUntilFound } from "./internal/disclosure.js";
+import { useDisclosurePanel, useRegistered } from "./internal/disclosure.js";
+import { presenceProps } from "./internal/presence.js";
 import { useControlled } from "./internal/controlled-state.js";
 
 type CollapsibleState = {|
@@ -144,18 +154,19 @@ component CollapsibleTrigger(
  *
  * It is always rendered and `hidden` while closed, rather than removed — see
  * the module header, and `internal/disclosure.js` for what `hidden` is upgraded
- * to and why that takes an effect.
+ * to and why that takes an effect. `data-state` says whether it is open or
+ * closing, and `hidden` waits for a closing transition to finish.
  */
 component CollapsibleContent(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const collapsible = useCollapsible("Collapsible.Content");
   const contentRef = useRef<HTMLElement | null>(null);
-  usePresence(collapsible.registerContent);
-  useUntilFound(contentRef, collapsible.open);
-  useMeasuredHeight(contentRef, collapsible.measure);
+  useRegistered(collapsible.registerContent);
+  const presence = useDisclosurePanel(contentRef, collapsible.open, collapsible.measure);
 
   const props = withProps(withoutComposed(rest, ["ref"]), {
+    ...presenceProps(presence),
     children,
-    hidden: !collapsible.open,
+    hidden: !presence.present,
     id: collapsible.contentId,
     // React calls callback refs during commit; this node is only read by effects.
     // uf-lint-disable-next-line react-compiler/refs

package/combobox.js

@@ -136,6 +136,7 @@ import { composeHandlers, composeRefs, withoutComposed } from "./internal/merge-
 import { itemsOf, moveTo } from "./internal/roving-focus.js";
 import { useControlled } from "./internal/controlled-state.js";
 import { FormValue } from "./internal/form-value.js";
+import { presenceProps, usePresence } from "./internal/presence.js";
 
 export type { Align, LogicalSide, Side } from "./internal/anchor.js";
 
@@ -458,6 +459,9 @@ component ComboboxList(
     combobox.setOpen(false);
     combobox.setActiveId(null);
   });
+  // On the page while its exit runs. The field's `aria-controls` and
+  // `aria-activedescendant`, and the outside press, stay keyed on `open`.
+  const presence = usePresence(combobox.open, listRef);
 
   // Anchored to the *field*, not to a wrapper the caller may not have written.
   // `align="start"` because a list of options belongs under the edge the text
@@ -469,7 +473,7 @@ component ComboboxList(
     anchorRef: inputRef,
     avoidCollisions,
     collisionPadding,
-    open: combobox.open,
+    open: presence.present,
     overlayRef: listRef,
     side,
     sideOffset,
@@ -521,7 +525,7 @@ component ComboboxList(
     refs: [listRef, inputRef],
   });
 
-  if (!combobox.open) {
+  if (!presence.present) {
     return null;
   }
 
@@ -530,6 +534,7 @@ component ComboboxList(
   return (
     <div
       {...passed}
+      {...presenceProps(presence)}
       aria-labelledby={combobox.labelled ? `${combobox.base}-label` : undefined}
       data-align={anchored.align}
       data-side={anchored.side}

package/dialog.js

@@ -89,6 +89,7 @@ import {
 } from "./internal/merge-props.js";
 import { focusable } from "./internal/focus.js";
 import { useControlled } from "./internal/controlled-state.js";
+import { presenceProps, usePresence } from "./internal/presence.js";
 
 /**
  * What a screen reader is told the dialog is.
@@ -205,10 +206,22 @@ component DialogTrigger(children: React.Node, render?: RenderProp, ...rest: Rest
  */
 component DialogOverlay(render?: RenderProp, ...rest: Rest) {
   const dialog = useDialog("Dialog.Overlay");
-  if (!dialog.open) {
+  const overlayRef = useRef<HTMLElement | null>(null);
+  // It fades out with the panel rather than vanishing under it, and it is
+  // `inert` while it does, so a press on the fading scrim reaches the page.
+  const presence = usePresence(dialog.open, overlayRef);
+  if (!presence.present) {
     return null;
   }
-  const props = withProps(rest, { "aria-hidden": "true", "data-state": "open" });
+  const props = withProps(withoutComposed(rest, ["ref"]), {
+    ...presenceProps(presence),
+    "aria-hidden": "true",
+    // React calls callback refs during commit; the presence hook reads it later.
+    // uf-lint-disable-next-line react-compiler/refs
+    ref: composeRefs(rest.ref, (element: HTMLElement | null) => {
+      overlayRef.current = element;
+    }),
+  });
   if (render != null) {
     return render(props);
   }
@@ -251,6 +264,10 @@ component DialogBody(
   // shared one is the one that also pads out the scrollbar's width — a page
   // that jumps sideways when a dialog opens is this component's doing.
   useScrollLock(dialog.open);
+  // On the page for as long as its exit runs. Everything above and below is
+  // keyed on `dialog.open` instead, so the lock lifts, the page comes back and
+  // focus returns at the moment of closing, not when the panel has faded.
+  const presence = usePresence(dialog.open, bodyRef);
 
   useEffect(() => {
     const body = bodyRef.current;
@@ -299,7 +316,7 @@ component DialogBody(
     refs: [bodyRef, dialog.triggerRef],
   });
 
-  if (!dialog.open) {
+  if (!presence.present) {
     return null;
   }
 
@@ -314,8 +331,11 @@ component DialogBody(
     // the caller passed instead.
     "aria-describedby": dialog.described ? `${dialog.base}-description` : undefined,
     "aria-labelledby": dialog.titled ? `${dialog.base}-title` : undefined,
-    "aria-modal": "true",
+    // Only while open: a closing panel is `inert`, and a modal a reader cannot
+    // reach must not go on telling them the rest of the page is unavailable.
+    "aria-modal": dialog.open ? "true" : undefined,
     children,
+    ...presenceProps(presence),
     id: `${dialog.base}-body`,
     // Key handling closes the mounted dialog and restores focus after events.
     // uf-lint-disable-next-line react-compiler/refs
@@ -519,7 +539,11 @@ function concealOutside(element: HTMLElement): () => void {
       } else {
         entry.element.setAttribute("aria-hidden", entry.hidden);
       }
-      if (!entry.inert) {
+      // Nor a part that is on its way out. A scrim beside the panel was
+      // concealed with the rest of the page, and is now fading out `inert` of
+      // its own accord (`internal/presence.js`); taking that away would leave
+      // an invisible layer over the page that swallows the next press.
+      if (!entry.inert && entry.element.getAttribute("data-state") !== "closed") {
         entry.element.removeAttribute("inert");
       }
     }

package/hover-card.js

@@ -39,7 +39,15 @@
 "use client";
 
 import * as React from "@uniflowed/react";
-import { createContext, useContext, useEffect, useId, useMemo, useRef } from "@uniflowed/react";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+} from "@uniflowed/react";
 import { useEventListener } from "@uniflowed/hooks/dom";
 import { useStableCallback } from "@uniflowed/hooks/lifecycle";
 
@@ -56,6 +64,7 @@ import {
 } from "./internal/hover-intent.js";
 import { useAnchor } from "./internal/anchor.js";
 import { useControlled } from "./internal/controlled-state.js";
+import { presenceProps, usePresence } from "./internal/presence.js";
 
 export type { Align, LogicalSide, Side } from "./internal/anchor.js";
 
@@ -218,15 +227,17 @@ component HoverCardBody(
   const bodyRef = useRef<HTMLElement | null>(null);
   // Whether the reader is *in* the card, as opposed to over it. It decides one
   // thing and it cannot be asked afterwards: a card closed while it held focus
-  // has to hand focus back, and by the time the effect below is cleaned up the
-  // element is gone from the document and `activeElement` has already fallen to
-  // `<body>` — so the answer is kept while it is still true.
+  // has to hand focus back, and by the time the card has closed the element is
+  // `inert` or gone and `activeElement` may already have fallen to `<body>` —
+  // so the answer is kept while it is still true.
   const heldRef = useRef(false);
   const close = useStableCallback(() => {
     dismissedRef.current = true;
     intent.cancel();
     card.setOpen(false);
   });
+  // On the page while its exit runs; everything else stays keyed on `open`.
+  const presence = usePresence(open, bodyRef);
 
   const anchored = useAnchor({
     align,
@@ -234,7 +245,7 @@ component HoverCardBody(
     anchorRef: triggerRef,
     avoidCollisions,
     collisionPadding,
-    open,
+    open: presence.present,
     overlayRef: bodyRef,
     side,
     sideOffset,
@@ -287,7 +298,13 @@ component HoverCardBody(
   // dependencies change — and `closeDelay` is a caller's prop. A caller
   // changing it while the card was open with focus inside pulled focus off the
   // link the reader was on, and the effect then re-attached with `held` reset.
-  useEffect(() => {
+  //
+  // A layout effect, so it runs in the commit that closed the card. The card
+  // stays on the page, `inert`, while its exit plays, and a browser moves focus
+  // out of an inert element when it next renders. That move fires `focusout`,
+  // which would say the reader had left before this could ask whether they were
+  // inside.
+  useLayoutEffect(() => {
     if (open) {
       return;
     }
@@ -309,7 +326,7 @@ component HoverCardBody(
     [triggerRef],
   );
 
-  if (!open) {
+  if (!presence.present) {
     return null;
   }
 
@@ -317,7 +334,7 @@ component HoverCardBody(
     children,
     "data-align": anchored.align,
     "data-side": anchored.side,
-    "data-state": "open",
+    ...presenceProps(presence),
     id: `${card.base}-body`,
     // React calls callback refs during commit; placement effects read it later.
     // uf-lint-disable-next-line react-compiler/refs

package/internal/anchor.js

@@ -202,7 +202,16 @@ export type AnchorRequest = {|
    */
   readonly anchorRect?: Rect | null,
   readonly overlayRef: { current: HTMLElement | null },
-  /** Nothing is measured while it is closed: there is nothing to measure. */
+  /**
+   * Whether the overlay is on the page. Nothing is measured while it is not:
+   * there is nothing to measure.
+   *
+   * A part that plays an exit passes its presence here (`usePresence`'s
+   * `present`) rather than its open state, so a closing overlay keeps its place
+   * against the trigger, and keeps its `data-side`, until it has gone. An exit
+   * that slid towards the side it was asked for rather than the side it
+   * flipped to would leave in the wrong direction.
+   */
   readonly open: boolean,
   /** Resolved against the trigger's writing direction; see `LogicalSide`. */
   readonly side: LogicalSide,

package/internal/collection.js

@@ -31,7 +31,7 @@
 // inside a popover still lets the popover close on the Escape that follows.
 
 import * as React from "@uniflowed/react";
-import { useId, useRef, useState } from "@uniflowed/react";
+import { useEffect, useId, useRef, useState } from "@uniflowed/react";
 import { useStableCallback } from "@uniflowed/hooks/lifecycle";
 import { useDragAndDrop } from "../drag-drop.js";
 import { useControlled } from "./controlled-state.js";
@@ -177,6 +177,36 @@ export component CollectionRoot(kind: Kind, options: CollectionProps) {
     defaultExpandedKeys,
     onExpandedChange,
   );
+  // The expansion as the last keystroke left it, which can be ahead of the
+  // `expanded` this render read: two tree keys can land before React renders the
+  // first, and `keydown` is a `useStableCallback`, so it runs with the values of
+  // the render that installed it. Adding to the render's array meant the second
+  // write dropped what the first had opened — `*` then `ArrowRight` collapsed the
+  // sibling `*` had just expanded (#1621). #1611 and #1620 hold a ref for the same
+  // window. It is cleared after every commit, so it only ever spans a batch React
+  // has not rendered, and a controlled parent still wins the next keystroke.
+  const proposedExpanded = useRef<$ReadOnlyArray<string> | null>(null);
+  // The selection as the last gesture left it, for the same reason and with the same
+  // lifetime: `Ctrl+A` followed by a toggle in one batch recomputed the toggle from
+  // the empty selection its own render saw, so it *selected* the row it meant to
+  // deselect and dropped everything else (#1624).
+  const proposedSelected = useRef<$ReadOnlySet<string> | null>(null);
+  useEffect(() => {
+    proposedExpanded.current = null;
+    proposedSelected.current = null;
+  });
+  const latestExpanded = useStableCallback(
+    (): $ReadOnlyArray<string> => proposedExpanded.current ?? expanded,
+  );
+  // Only the array written back comes from the latest keystroke. Every *decision*
+  // in `keydown` — which branch to take, where focus lands — keeps reading this
+  // render's `expandedSet`, `rows` and `enabled`, because those describe the tree
+  // the reader is looking at rather than one that has not been rendered yet.
+  const expand = useStableCallback((next: $ReadOnlyArray<string>) => {
+    const unique = [...new Set(next)];
+    proposedExpanded.current = unique;
+    setExpanded(unique);
+  });
   const [active, setActive] = useState<string | null>(null);
   const [scrollTop, setScrollTop] = useState(0);
   const [announcement, announce] = useState("");
@@ -210,20 +240,30 @@ export component CollectionRoot(kind: Kind, options: CollectionProps) {
     enabled[0];
   const activeKey = focused?.item.key;
 
+  // What the selection helpers are given, and what "nothing changed" is measured
+  // against. They return their own input when a gesture is a no-op, so the comparison
+  // has to be with the set that went in: measuring against this render's `selectedSet`
+  // instead would let a no-op Escape look like a change, claim the key, and stop an
+  // enclosing popover from closing.
+  const latestSelected = useStableCallback(
+    (): $ReadOnlySet<string> => proposedSelected.current ?? selectedSet,
+  );
   /** Report a selection, unless the gesture changed nothing. */
   const commit = (next: $ReadOnlySet<string>) => {
-    if (next === selectedSet) return;
+    if (next === latestSelected()) return;
     const keys = orderedKeys(next, order);
+    proposedSelected.current = next;
     setSelected(keys);
     announce(`${keys.length} selected`);
   };
   /** A plain or Ctrl/Cmd gesture on one row: toggle or replace, and move the anchor. */
   const selectOne = (key: string, toggle: boolean) => {
     if (mode === "none") return;
+    const previous = latestSelected();
     commit(
       toggle || selectionBehavior === "toggle"
-        ? toggleKey(policy, selectedSet, key)
-        : replaceWith(policy, selectedSet, key),
+        ? toggleKey(policy, previous, key)
+        : replaceWith(policy, previous, key),
     );
     anchor.current = key;
     lead.current = key;
@@ -231,7 +271,7 @@ export component CollectionRoot(kind: Kind, options: CollectionProps) {
   /** A Shift gesture: grow from the anchor, which is the active row if nothing set one. */
   const extend = (key: string, from: string | void) => {
     if (anchor.current == null || !order.includes(anchor.current)) anchor.current = from ?? key;
-    commit(extendTo(policy, selectedSet, order, anchor.current, lead.current, key));
+    commit(extendTo(policy, latestSelected(), order, anchor.current, lead.current, key));
     lead.current = key;
   };
   const scrollTo = (row: Entry) => {
@@ -325,7 +365,7 @@ export component CollectionRoot(kind: Kind, options: CollectionProps) {
         (row) => row.parent === focused.parent && (row.item.children?.length ?? 0) > 0,
       );
       const missing = siblings.map((row) => row.item.key).filter((key) => !expandedSet.has(key));
-      if (missing.length > 0) setExpanded([...expanded, ...missing]);
+      if (missing.length > 0) expand([...latestExpanded(), ...missing]);
     } else if (
       kind === "tree" &&
       focused != null &&
@@ -334,19 +374,20 @@ export component CollectionRoot(kind: Kind, options: CollectionProps) {
       const open = event.key === (rtl ? "ArrowLeft" : "ArrowRight");
       const key = focused.item.key;
       if (open && (focused.item.children?.length ?? 0) > 0) {
-        if (!expandedSet.has(key)) setExpanded([...expanded, key]);
+        if (!expandedSet.has(key)) expand([...latestExpanded(), key]);
         else next = enabled[at + 1];
       } else if (!open && expandedSet.has(key))
-        setExpanded(expanded.filter((each) => each !== key));
+        expand(latestExpanded().filter((each) => each !== key));
       else if (!open) next = enabled.find((row) => row.item.key === focused.parent);
     } else if (modifier && event.key.toLowerCase() === "a" && !event.altKey) {
       if (mode !== "multiple") return;
-      commit(selectAll(policy, selectedSet, order));
+      commit(selectAll(policy, latestSelected(), order));
     } else if (event.key === "Escape") {
       if (escapeKeyBehavior !== "clearSelection") return;
-      const cleared = clearAll(policy, selectedSet);
+      const previous = latestSelected();
+      const cleared = clearAll(policy, previous);
       // Unclaimed when nothing changed, so an enclosing popover still closes.
-      if (cleared === selectedSet) return;
+      if (cleared === previous) return;
       commit(cleared);
     } else if (event.key === "Enter" && activeKey != null && onAction != null) {
       onAction(activeKey);

package/internal/disclosure.js

@@ -109,6 +109,9 @@
 
 import { useEffect } from "@uniflowed/react";
 
+import type { Presence } from "./presence.js";
+import { isAnimating, usePresence } from "./presence.js";
+
 /**
  * Report that this part is in the document, for as long as it is.
  *
@@ -117,7 +120,7 @@ import { useEffect } from "@uniflowed/react";
  * function lets a part be rendered outside the thing that would name it
  * without the caller having to care.
  */
-export hook usePresence(register: ((present: boolean) => void) | void): void {
+export hook useRegistered(register: ((present: boolean) => void) | void): void {
   useEffect(() => {
     if (register == null) {
       return;
@@ -130,22 +133,51 @@ export hook usePresence(register: ((present: boolean) => void) | void): void {
 /**
  * Keep a closed panel hidden the way the platform means it: findable.
  *
- * The element must be rendered with a plain boolean `hidden` as well — see the
- * module header. This only upgrades the attribute React has already committed,
- * so a browser that has never heard of `until-found` sees exactly the `hidden`
- * it would have seen, and one that has can reveal the section for a
- * find-in-page hit.
+ * `shown` is whether the panel is on screen, which for a panel that animates
+ * its height is longer than it is open: see `useDisclosurePanel`. The element
+ * must be rendered with a plain boolean `hidden` whenever `shown` is false —
+ * see the module header. This only upgrades the attribute React has already
+ * committed, so a browser that has never heard of `until-found` sees exactly
+ * the `hidden` it would have seen, and one that has can reveal the section for
+ * a find-in-page hit.
  */
-export hook useUntilFound(ref: { current: HTMLElement | null }, open: boolean): void {
+export hook useUntilFound(ref: { current: HTMLElement | null }, shown: boolean): void {
   useEffect(() => {
     const element = ref.current;
-    // Nothing to do while it is open: React has removed the attribute, and
-    // adding one back would hide a panel the reader just opened.
-    if (element == null || open) {
+    // Nothing to do while it is shown: React has removed the attribute, and
+    // adding one back would hide a panel the reader just opened, or cut short
+    // one that is still closing.
+    if (element == null || shown) {
       return;
     }
     element.setAttribute("hidden", "until-found");
-  }, [ref, open]);
+  }, [ref, shown]);
+}
+
+/**
+ * A disclosure's panel: whether it is shown, and the state it is in.
+ *
+ * `open` is the disclosure's state, which the trigger's `aria-expanded` says.
+ * The panel is shown for longer than that. When it closes it stays on screen,
+ * with `data-state="closed"` and `inert`, for as long as its height transition
+ * runs, and only then becomes `hidden` — so a stylesheet can take it from
+ * `var(--uf-collapsible-height)` down to `0`, which it could not if the panel
+ * were `display: none` at the moment of closing. `internal/presence.js` decides
+ * when the transition has finished, and with nothing animating the panel is
+ * hidden in the same commit, as it always was.
+ *
+ * The caller renders `hidden={!presence.present}` and spreads
+ * `presenceProps(presence)`.
+ */
+export hook useDisclosurePanel(
+  ref: { current: HTMLElement | null },
+  open: boolean,
+  measure: boolean,
+): Presence {
+  const presence = usePresence(open, ref);
+  useUntilFound(ref, presence.present);
+  useMeasuredHeight(ref, measure);
+  return presence;
 }
 
 /** The custom property a stylesheet transitions a disclosure's height to. */
@@ -202,10 +234,20 @@ function widthInFlow(element: HTMLElement): string | null {
  * inline declaration this wrote.
  */
 function heightOf(element: HTMLElement): number {
+  const style = element.style;
   if (!element.hasAttribute("hidden")) {
-    return element.getBoundingClientRect().height;
+    // Shown, so it has a box, but not necessarily the height of its content:
+    // the stylesheet this property exists for holds an open panel at
+    // `var(--uf-collapsible-height)`, and a panel whose content grew or shrank
+    // would measure the old number for ever. `height: auto` for the one read,
+    // as below. `useMeasuredHeight` only asks while nothing is transitioning,
+    // so this cannot cut a transition short.
+    const height = style.height;
+    style.height = "auto";
+    const measured = element.getBoundingClientRect().height;
+    style.height = height;
+    return measured;
   }
-  const style = element.style;
   const before = {
     boxSizing: style.boxSizing,
     contentVisibility: style.getPropertyValue("content-visibility"),
@@ -267,12 +309,7 @@ export hook useMeasuredHeight(ref: { current: HTMLElement | null }, enabled: boo
     if (!enabled || element == null) {
       return;
     }
-    const measured = `${String(heightOf(element))}px`;
-    // Compared before writing, so a render that changed nothing does not dirty
-    // the element's style and invite another style recalculation.
-    if (element.style.getPropertyValue(HEIGHT_PROPERTY) !== measured) {
-      element.style.setProperty(HEIGHT_PROPERTY, measured);
-    }
+    remeasure(element);
   });
 
   useEffect(() => {
@@ -289,10 +326,35 @@ export hook useMeasuredHeight(ref: { current: HTMLElement | null }, enabled: boo
     if (typeof host.ResizeObserver !== "function") {
       return;
     }
-    const sizes = new host.ResizeObserver(() => {
-      element.style.setProperty(HEIGHT_PROPERTY, `${String(heightOf(element))}px`);
-    });
+    const sizes = new host.ResizeObserver(() => remeasure(element));
     sizes.observe(element);
+    // And what is inside it. An open panel is held at the height it was
+    // measured at, so its own box does not change when an image inside it
+    // loads; the content's does.
+    for (const child of Array.from(element.children)) {
+      sizes.observe(child);
+    }
     return () => sizes.disconnect();
   }, [ref, enabled]);
 }
+
+/**
+ * Write what `element` would measure into `HEIGHT_PROPERTY`, unless it is
+ * moving.
+ *
+ * A panel opening or closing is mid-transition, and asking then reads a frame
+ * of the transition and, for a shown panel, cancels it: `heightOf` sets
+ * `height: auto` for its read. The panel was measured before it started to
+ * move, and it is measured again once it has stopped.
+ */
+function remeasure(element: HTMLElement): void {
+  if (!element.hasAttribute("hidden") && isAnimating(element)) {
+    return;
+  }
+  const measured = `${String(heightOf(element))}px`;
+  // Compared before writing, so a render that changed nothing does not dirty
+  // the element's style and invite another style recalculation.
+  if (element.style.getPropertyValue(HEIGHT_PROPERTY) !== measured) {
+    element.style.setProperty(HEIGHT_PROPERTY, measured);
+  }
+}