@astryxdesign/core 0.7.7 → 0.7.8-canary.36cde5e

package/dist/DateInput/wheelStrip.d.ts

@@ -0,0 +1,92 @@
+import { type WheelCurve, type WheelLayout } from './wheelPhysics.js';
+/** How a motion ended: arrived on its row, or stopped before. */
+export type WheelMotionOutcome = 'arrived' | 'stopped';
+/** Options for one motion. */
+export interface PlayOptions {
+    /** Tick as rows reach the band (a drag's release); a tap's spin does not. */
+    ticks?: boolean;
+    /** Called once when the motion ends, either way. */
+    onEnd?: (outcome: WheelMotionOutcome, offset: number) => void;
+    /** Started by a touch drag's release, which cross-fades under Reduce Motion. */
+    touchRelease?: boolean;
+    /**
+     * The momentum that continues a throw: a coast, and its bounce at an end.
+     * It is direct movement, so it plays under Reduce Motion too, as scrolling
+     * keeps decelerating under iOS Reduce Motion.
+     */
+    momentum?: boolean;
+}
+/** One picker column's offset and everything that moves it. */
+export interface WheelStrip {
+    /** The strip the offset moves (null detaches it). */
+    attach(strip: HTMLElement | null): void;
+    /** Update the rows (a new option list); keeps the offset. */
+    setLayout(layout: WheelLayout): void;
+    /**
+     * Tell `listener` the position of the row nearest the band whenever it
+     * changes. That is on a drag frame, where a motion stops or ends, and at
+     * rest. A cross-fade's landing counts as an end. A motion itself reports
+     * nothing until it ends, so the compositor plays it without the main thread
+     * painting a mark per row.
+     */
+    onNearestChange(listener: ((position: number) => void) | null): void;
+    /** Whether a motion is playing. */
+    isMoving(): boolean;
+    /**
+     * The offset on screen at `time` (ms, the document timeline's clock; default
+     * now). It is the animator's presentation value. So a motion that has not
+     * started on screen yet shows its start.
+     */
+    offset(time?: number): number;
+    /** Where the wheel will be at rest: the motion's end, or the offset now. */
+    target(): number;
+    /**
+     * Show `offset` at once, stopping any motion: a drag frame or a park. A drag
+     * frame passes `ticks`, which also keeps the strip on its own compositing
+     * layer for the frames that follow.
+     */
+    setOffset(offset: number, options?: {
+        ticks?: boolean;
+    }): void;
+    /** Forget the previous drag frame (a new gesture starts). */
+    resetDrag(): void;
+    /**
+     * Stop the motion where it was on screen at `time` (a finger landing on a
+     * spinning wheel: its touch-down time). Returns that offset.
+     */
+    stop(time?: number): number;
+    /** Play `curve` from the current offset; the strip ends at `curve.to`. */
+    play(curve: WheelCurve, options?: PlayOptions): void;
+    /**
+     * Forget the row last reported nearest the band, so the next report names it
+     * again even unchanged. A caller that clears its mark as a motion starts then
+     * gets it back. That happens when the motion ends on the row it began on.
+     */
+    forgetNearest(): void;
+    /** Stop everything; a motion still running ends as stopped. */
+    dispose(): void;
+}
+/**
+ * Creates a wheel's strip on a fresh animator. It uses the internal animator
+ * for three jobs the public handle lacks:
+ *
+ * - It plays a closed-form curve on the compositor: a coast onto a row, a
+ *   snap, a spin.
+ * - It times haptic ticks on that curve's clock.
+ * - It substitutes Reduce Motion's cross-fade for a move.
+ *
+ * A release's coast and its bounce at an end are momentum (`decay`), so they
+ * keep their motion under Reduce Motion. Every other curve is a transition
+ * (`play`). Under Reduce Motion the animator cross-fades it after a touch or
+ * on a coarse pointer. Otherwise it lands at once.
+ *
+ * @example
+ * ```
+ * const strip = createWheelStrip({rowHeight: 28, rowCount: 60});
+ * strip.attach(element);
+ * strip.setOffset(30 * 28);
+ * strip.play(planRelease(strip.offset(), 900, layout).curve, {ticks: true, momentum: true});
+ * ```
+ */
+export declare function createWheelStrip(initialLayout: WheelLayout): WheelStrip;
+//# sourceMappingURL=wheelStrip.d.ts.map

package/dist/DateInput/wheelStrip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wheelStrip.d.ts","sourceRoot":"","sources":["../../src/DateInput/wheelStrip.ts"],"names":[],"mappings":"AAqBA,OAAO,EAIL,KAAK,UAAU,EACf,KAAK,WAAW,EACjB,MAAM,gBAAgB,CAAC;AAExB,iEAAiE;AACjE,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,SAAS,CAAC;AAEvD,8BAA8B;AAC9B,MAAM,WAAW,WAAW;IAC1B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oDAAoD;IACpD,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,kBAAkB,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9D,gFAAgF;IAChF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,+DAA+D;AAC/D,MAAM,WAAW,UAAU;IACzB,qDAAqD;IACrD,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,6DAA6D;IAC7D,SAAS,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC;;;;;;OAMG;IACH,eAAe,CAAC,QAAQ,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC;IACrE,mCAAmC;IACnC,QAAQ,IAAI,OAAO,CAAC;IACpB;;;;OAIG;IACH,MAAM,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,4EAA4E;IAC5E,MAAM,IAAI,MAAM,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;QAAC,KAAK,CAAC,EAAE,OAAO,CAAA;KAAC,GAAG,IAAI,CAAC;IAC7D,6DAA6D;IAC7D,SAAS,IAAI,IAAI,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,0EAA0E;IAC1E,IAAI,CAAC,KAAK,EAAE,UAAU,EAAE,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACrD;;;;OAIG;IACH,aAAa,IAAI,IAAI,CAAC;IACtB,+DAA+D;IAC/D,OAAO,IAAI,IAAI,CAAC;CACjB;AAgBD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,gBAAgB,CAAC,aAAa,EAAE,WAAW,GAAG,UAAU,CA+MvE"}

package/dist/DateInput/wheelStrip.js

@@ -0,0 +1,258 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file wheelStrip.ts
+ * @input The touch wheel's strip (its flat rows in one element), its layout,
+ *   and curves from wheelPhysics.ts
+ * @output createWheelStrip: the one owner of a wheel's offset. It writes a
+ *   drag's frames, plays and stops curves, ticks, and reports the nearest row
+ * @position Glue of the touch picker wheel (PickerWheel.tsx) over the shared
+ *   animator (motion/animator.ts)
+ *
+ * The strip is the one element that moves, on `translate`, so a motion plays
+ * on the compositor with no layout or paint per frame.
+ *
+ * SYNC: When modified, update wheelStrip.test.ts and PickerWheel.tsx.
+ */
+
+import { canVibrate, playHaptic } from "../gestures/haptics.js";
+import { createMotionAnimator } from "../motion/animator.js";
+import { reducedMotionFade } from "../motion/reducedMotion.js";
+import { picker } from "../motion/uikit/picker.js";
+import { nearestIndex, reachesRow, tickTimes } from "./wheelPhysics.js";
+
+/** How a motion ended: arrived on its row, or stopped before. */
+
+/** Options for one motion. */
+
+/** One picker column's offset and everything that moves it. */
+
+function now() {
+  const time = typeof document !== 'undefined' ? document.timeline?.currentTime : null;
+  return typeof time === 'number' ? time : performance.now();
+}
+
+/**
+ * Creates a wheel's strip on a fresh animator. It uses the internal animator
+ * for three jobs the public handle lacks:
+ *
+ * - It plays a closed-form curve on the compositor: a coast onto a row, a
+ *   snap, a spin.
+ * - It times haptic ticks on that curve's clock.
+ * - It substitutes Reduce Motion's cross-fade for a move.
+ *
+ * A release's coast and its bounce at an end are momentum (`decay`), so they
+ * keep their motion under Reduce Motion. Every other curve is a transition
+ * (`play`). Under Reduce Motion the animator cross-fades it after a touch or
+ * on a coarse pointer. Otherwise it lands at once.
+ *
+ * @example
+ * ```
+ * const strip = createWheelStrip({rowHeight: 28, rowCount: 60});
+ * strip.attach(element);
+ * strip.setOffset(30 * 28);
+ * strip.play(planRelease(strip.offset(), 900, layout).curve, {ticks: true, momentum: true});
+ * ```
+ */
+export function createWheelStrip(initialLayout) {
+  const animator = createMotionAnimator(null);
+  let layout = initialLayout;
+  let running = null;
+  let nearestListener = null;
+  let lastNearest = null;
+  let lastTick = -Infinity;
+  /** Last offset a drag frame showed, for its ticks. */
+  let dragPrevious = null;
+  const shown = time =>
+  // The strip's top sits on the band's row: offset `o` is `translate` −o.
+  -animator.get('y', time);
+  const reportNearest = offset => {
+    const position = nearestIndex(offset, layout);
+    if (position === lastNearest) {
+      return;
+    }
+    lastNearest = position;
+    nearestListener?.(position);
+  };
+  const tick = time => {
+    if (time - lastTick < picker.selectionTick.minimumIntervalMs) {
+      return;
+    }
+    lastTick = time;
+    playHaptic('selection');
+  };
+  const clear = motion => {
+    for (const timer of motion.timers) {
+      clearTimeout(timer);
+    }
+    motion.timers.length = 0;
+    if (running === motion) {
+      running = null;
+    }
+  };
+
+  /**
+   * The motion's timers, from `origin` (when it started on screen): its
+   * ticks, a cross-fade's landing, and its end.
+   */
+  const schedule = (motion, origin, {
+    endMs,
+    ticks,
+    landingMs
+  }) => {
+    for (const timer of motion.timers) {
+      clearTimeout(timer);
+    }
+    motion.timers.length = 0;
+    const elapsed = now() - origin;
+    if (ticks) {
+      for (const t of tickTimes(motion.curve, layout.rowHeight)) {
+        motion.timers.push(setTimeout(() => {
+          if (running === motion) {
+            tick(now());
+          }
+        }, Math.max(0, t * 1000 - elapsed)));
+      }
+    }
+    if (landingMs != null) {
+      motion.timers.push(setTimeout(() => {
+        if (running === motion) {
+          reportNearest(motion.curve.to);
+        }
+      }, Math.max(0, landingMs - elapsed)));
+    }
+    motion.timers.push(setTimeout(() => {
+      if (running !== motion) {
+        return;
+      }
+      clear(motion);
+      reportNearest(motion.curve.to);
+      motion.onEnd?.('arrived', motion.curve.to);
+    }, Math.max(0, endMs - elapsed)));
+  };
+  const stop = time => {
+    const motion = running;
+    if (motion == null) {
+      return shown();
+    }
+    const offset = shown(time);
+    clear(motion);
+    // `set` ends the strip's animation and puts it where it was shown.
+    animator.set({
+      y: -offset
+    });
+    reportNearest(offset);
+    motion.onEnd?.('stopped', offset);
+    return offset;
+  };
+  return {
+    attach(strip) {
+      animator.attach(strip);
+    },
+    setLayout(next) {
+      layout = next;
+    },
+    onNearestChange(listener) {
+      nearestListener = listener;
+      lastNearest = null;
+    },
+    isMoving() {
+      return running != null;
+    },
+    offset(time) {
+      return shown(time);
+    },
+    target() {
+      return running?.curve.to ?? shown();
+    },
+    setOffset(offset, {
+      ticks = false
+    } = {}) {
+      if (running != null) {
+        stop();
+      }
+      if (ticks && dragPrevious != null && canVibrate() && reachesRow(dragPrevious, offset, layout.rowHeight)) {
+        tick(now());
+      }
+      dragPrevious = offset;
+      // A park is a one-off write: no layer for a strip at rest.
+      animator.set({
+        y: -offset
+      }, {
+        promote: ticks
+      });
+      reportNearest(offset);
+    },
+    resetDrag() {
+      dragPrevious = null;
+    },
+    stop,
+    play(curve, {
+      ticks = false,
+      onEnd,
+      touchRelease = false,
+      momentum = false
+    } = {}) {
+      stop();
+      dragPrevious = null;
+      const element = animator.element;
+      // What Reduce Motion makes of a transition: null while motion plays.
+      // Momentum is never substituted.
+      const fade = momentum ? null : reducedMotionFade(element, {
+        touchRelease
+      });
+      const endMs = fade == null ? curve.duration * 1000 : fade.duration;
+      if (!(endMs > 0)) {
+        animator.set({
+          y: -curve.to
+        });
+        reportNearest(curve.to);
+        onEnd?.('arrived', curve.to);
+        return;
+      }
+      const motionCurve = {
+        duration: curve.duration,
+        at: t => -curve.value(t),
+        velocity: t => -curve.velocity(t)
+      };
+      const handle = momentum ? animator.decay({
+        y: motionCurve
+      }, {
+        touchRelease
+      }) : animator.play({
+        y: motionCurve
+      }, {
+        touchRelease
+      });
+      const motion = {
+        curve,
+        onEnd,
+        timers: []
+      };
+      running = motion;
+      const plan = {
+        endMs,
+        // A cross-fade has no travel to tick through.
+        ticks: ticks && fade == null && canVibrate(),
+        // A cross-fade lands its rows at its midpoint, faded out.
+        landingMs: fade == null ? null : endMs / 2
+      };
+      schedule(motion, now(), plan);
+      // A busy main thread can hold a motion's first frame: its timers then
+      // follow the start the browser gives it. The animator's start promise
+      // only resolves, so nothing here waits on a rejection.
+      void handle.started.then(start => {
+        if (running === motion) {
+          schedule(motion, start, plan);
+        }
+      });
+    },
+    forgetNearest() {
+      lastNearest = null;
+    },
+    dispose() {
+      stop();
+      animator.dispose();
+    }
+  };
+}

package/dist/DateTimeInput/TouchDateTimeField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TouchDateTimeField.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/TouchDateTimeField.tsx"],"names":[],"mappings":"AA6GA,OAAO,KAAK,EAAC,kBAAkB,EAAoB,MAAM,iBAAiB,CAAC;AAoV3E,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,UAAkB,EAClB,UAAkB,EAElB,aAAa,EAAE,cAAc,EAC7B,kBAAkB,EAAE,mBAAmB,EACvC,QAAgB,EAChB,WAAW,EAAE,oBAAoB,EACjC,eAAe,EAAE,wBAAwB,EACzC,SAAS,EACT,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,YAAY,EAEZ,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,gBAAoB,EAClC,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,GAAG,SAAS,EACb,EAAE,kBAAkB,+BA8/BpB;yBAriCe,kBAAkB"}
+{"version":3,"file":"TouchDateTimeField.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/TouchDateTimeField.tsx"],"names":[],"mappings":"AA6GA,OAAO,KAAK,EAAC,kBAAkB,EAAoB,MAAM,iBAAiB,CAAC;AAoV3E,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,UAAkB,EAClB,UAAkB,EAElB,aAAa,EAAE,cAAc,EAC7B,kBAAkB,EAAE,mBAAmB,EACvC,QAAgB,EAChB,WAAW,EAAE,oBAAoB,EACjC,eAAe,EAAE,wBAAwB,EACzC,SAAS,EACT,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,YAAY,EAEZ,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,gBAAoB,EAClC,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,GAAG,SAAS,EACb,EAAE,kBAAkB,+BAggCpB;yBAviCe,kBAAkB"}

package/dist/DateTimeInput/TouchDateTimeField.js

@@ -545,6 +545,8 @@ export function TouchDateTimeField({
       return {
         value: hour,
         label: String(hour),
+        // Keys step in time order: 12 PM comes before 1 PM.
+        order: hour24,
         isDisabled: !rangeOverlaps(hour24 * 3600, hour24 * 3600 + 3599, timeBounds.min, timeBounds.max)
       };
     });

package/dist/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAMhD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AA+B9C;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzD,4EAA4E;AAC5E,UAAU,mBAAmB;IAC3B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAe,SAAQ,mBAAmB;IACzD,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAuBD,2FAA2F;AAC3F,eAAO,MAAM,uCAAuC;;;;;;;;;;;CAW1C,CAAC;AAwLX;;;;;;;;;GASG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,cAAc;;;;;EAUpE;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EAAE,UAAU,EAClB,QAAgB,EAChB,YAAY,EACZ,KAAW,EACX,SAAmB,EACnB,QAAQ,EACR,OAAoB,EACpB,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCAgbb;yBAhce,MAAM"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAMhD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAkC9C;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzD,4EAA4E;AAC5E,UAAU,mBAAmB;IAC3B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAe,SAAQ,mBAAmB;IACzD,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAuBD,2FAA2F;AAC3F,eAAO,MAAM,uCAAuC;;;;;;;;;;;CAW1C,CAAC;AAwLX;;;;;;;;;GASG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,cAAc;;;;;EAUpE;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EAAE,UAAU,EAClB,QAAgB,EAChB,YAAY,EACZ,KAAW,EACX,SAAmB,EACnB,QAAQ,EACR,OAAoB,EACpB,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCAyZb;yBAzae,MAAM"}

package/dist/Dialog/Dialog.js

@@ -55,7 +55,7 @@ import { DialogContext } from "./DialogContext.js";
 import { themeProps } from "../utils/themeProps.js";
 import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 import { useInteractionModalityTracking } from "../utils/interactionModality.js";
-import { focusForLastInput, isFocusLost } from "../utils/focusReturn.js";
+import { focusForLastInput, prepareFocusReturnOnRemoval } from "../utils/focusReturn.js";
 import { ModalAnnounceProvider } from "../hooks/ModalAnnounceProvider.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -414,7 +414,8 @@ export function Dialog({
   const allowEscape = purpose !== 'required';
   const allowBackdropClick = purpose === 'info';
 
-  // Handle open/close state — skip for inline rendering
+  // Syncs the native dialog with `isOpen` through `showModal()` and `close()`.
+  // An inline dialog is not in the top layer, so it skips this.
   useEffect(() => {
     if (isInline) {
       return;
@@ -461,39 +462,15 @@ export function Dialog({
   }, [isOpen, isInline]);
 
   // A dialog that unmounts while open (rendered only while open, or removed
-  // with the rest of a view) never runs the close branch above, and removing a
-  // <dialog> does not run the browser's own focus return. Focus left inside
-  // it, or dropped to the body by the removal, goes back to the opener.
+  // with the rest of a view) never runs the close branch above. Focus the
+  // removal lost goes back to the opener.
   useEffect(() => {
-    if (isInline) {
+    const dialog = dialogRef.current;
+    if (isInline || dialog == null) {
       return;
     }
-    const dialog = dialogRef.current;
-    // Read now: a removed iframe's document has no window, so its frame
-    // element can no longer be found once the dialog is gone.
-    const host = dialog?.ownerDocument.defaultView?.frameElement ?? null;
-    return () => {
-      const trigger = triggerElementRef.current;
-      if (dialog == null || trigger == null) {
-        return;
-      }
-      // Checked once the commit has finished: StrictMode's simulated unmount
-      // leaves the dialog in the document, and only a real removal returns
-      // focus.
-      queueMicrotask(() => {
-        if (dialog.isConnected || !trigger.isConnected) {
-          return;
-        }
-        // isFocusLost reads the dialog's own document. For a dialog in an
-        // iframe, the document that hosts the frame must also have lost focus
-        // or keep it on that frame, wherever the opener is: a control the
-        // user pressed outside the frame to remove the dialog, or the frame
-        // itself, keeps its focus.
-        if (isFocusLost(dialog) && (host == null || isFocusLost(host))) {
-          focusForLastInput(trigger);
-        }
-      });
-    };
+    const returnFocusOnRemoval = prepareFocusReturnOnRemoval(dialog);
+    return () => returnFocusOnRemoval(triggerElementRef.current);
   }, [isInline]);
 
   // Host app-global surfaces (toasts) inside this modal while it is open, so

package/dist/Drawer/useDrawerDialogPresence.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDrawerDialogPresence.d.ts","sourceRoot":"","sources":["../../src/Drawer/useDrawerDialogPresence.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAGL,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAef,KAAK,8BAA8B,GAAG;IACpC,SAAS,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAC/C,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CAClD,CAAC;AA6DF;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,MAAM,EACN,OAAO,EACP,aAAa,GACd,EAAE,8BAA8B,GAAG,IAAI,CAoEvC"}
+{"version":3,"file":"useDrawerDialogPresence.d.ts","sourceRoot":"","sources":["../../src/Drawer/useDrawerDialogPresence.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAGL,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAef,KAAK,8BAA8B,GAAG;IACpC,SAAS,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAC/C,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CAClD,CAAC;AA6DF;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,MAAM,EACN,OAAO,EACP,aAAa,GACd,EAAE,8BAA8B,GAAG,IAAI,CAsEvC"}

package/dist/Drawer/useDrawerDialogPresence.js

@@ -109,6 +109,9 @@ export function useDrawerDialogPresence({
 }) {
   // Element focused when the drawer opened — restored on close.
   const triggerElementRef = useRef(null);
+
+  // Syncs the drawer's native host with `isOpen`. It shows or hides the
+  // top-layer host, keeps the opener, waits for the exit, and returns focus.
   useEffect(() => {
     const dialog = dialogRef.current;
     if (!dialog) {

package/dist/DropdownMenu/useMenuOverflow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMenuOverflow.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/useMenuOverflow.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AAEH,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACtC,OAAO,EAAE,SAAS,EAClB,MAAM,EAAE,OAAO,EACf,gBAAgB,CAAC,EAAE,OAAO,GACzB,OAAO,CA4ET"}
+{"version":3,"file":"useMenuOverflow.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/useMenuOverflow.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AAEH,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACtC,OAAO,EAAE,SAAS,EAClB,MAAM,EAAE,OAAO,EACf,gBAAgB,CAAC,EAAE,OAAO,GACzB,OAAO,CA+ET"}

package/dist/DropdownMenu/useMenuOverflow.js

@@ -43,6 +43,9 @@ export function useMenuOverflow(menuRef, content, isOpen, expectedOverflow) {
       hasOverflow
     });
   }, [menuRef]);
+
+  // Syncs the overflow measurement with the open menu. It measures, then
+  // observes resize, DOM changes and window resize.
   useIsomorphicLayoutEffect(() => {
     if (!isOpen) {
       return;
@@ -71,6 +74,8 @@ export function useMenuOverflow(menuRef, content, isOpen, expectedOverflow) {
       window.visualViewport?.removeEventListener('resize', measureOverflow);
     };
   }, [isOpen, measureOverflow, menuRef]);
+
+  // Measures overflow again after the content changes while the menu is open.
   useIsomorphicLayoutEffect(() => {
     if (isOpen) {
       measureOverflow();

package/dist/Field/Field.js

@@ -22,11 +22,11 @@ import { FieldStatus } from "../FieldStatus/FieldStatus.js";
 import { useFieldStatusAnnouncement } from "../FieldStatus/useFieldStatusAnnouncement.js";
 import "../theme/tokens.stylex.js";
 import { spacingVars, borderVars, sizeVars } from "../theme/tokens.stylex.js";
-import { mergeProps } from "../utils/index.js";
+import { mergeProps } from "../utils/mergeProps.js";
 import { useDevWarning } from "../hooks/useDevWarning.js";
 import { FormLayoutContext } from "../FormLayout/FormLayoutContext.js";
 import { Text } from "../Text/Text.js";
-import { VisuallyHidden } from "../VisuallyHidden/index.js";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const styles = {

package/dist/FieldStatus/useFieldStatusAnnouncement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFieldStatusAnnouncement.d.ts","sourceRoot":"","sources":["../../src/FieldStatus/useFieldStatusAnnouncement.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAEpD;;;;;;;;;;GAUG;AACH,wBAAgB,0BAA0B,CACxC,OAAO,EAAE,MAAM,GAAG,SAAS,EAC3B,IAAI,EAAE,eAAe,GAAG,SAAS,GAChC,IAAI,CAON"}
+{"version":3,"file":"useFieldStatusAnnouncement.d.ts","sourceRoot":"","sources":["../../src/FieldStatus/useFieldStatusAnnouncement.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAEpD;;;;;;;;;;GAUG;AACH,wBAAgB,0BAA0B,CACxC,OAAO,EAAE,MAAM,GAAG,SAAS,EAC3B,IAAI,EAAE,eAAe,GAAG,SAAS,GAChC,IAAI,CAQN"}

package/dist/FieldStatus/useFieldStatusAnnouncement.js

@@ -30,6 +30,7 @@ import { useAnnounce } from "../hooks/useAnnounce.js";
  */
 export function useFieldStatusAnnouncement(message, type) {
   const announce = useAnnounce();
+  // Syncs the live region with the status message.
   useEffect(() => {
     if (message) {
       announce(message, type === 'error' ? 'assertive' : 'polite');

package/dist/FormLayout/FormLayout.d.ts

@@ -48,7 +48,11 @@ export interface FormLayoutProps extends BaseProps<HTMLDivElement> {
      *   shows an indicator (the "required" one).
      * - `'required'` — fields read as required; only a field with `isOptional`
      *   shows an indicator (the "optional" one). Fields without `isOptional`
-     *   expose `aria-required` even though they show no indicator.
+     *   expose `aria-required` even though they show no indicator. Checkboxes,
+     *   switches and checkbox groups are the exception: an unchecked box, an off
+     *   switch or an empty group is an answer, so they take no required state
+     *   from the default. A checkbox or switch is required only through its own
+     *   `isRequired`.
      * - unset — today's behavior: `isRequired` and `isOptional` each show their
      *   own indicator independently.
      *

package/dist/FormLayout/FormLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormLayout.d.ts","sourceRoot":"","sources":["../../src/FormLayout/FormLayout.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAC;AA2C7B,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAEhC;;;;;;;;;;;;;;;;;OAiBG;IACH,kBAAkB,CAAC,EAAE,eAAe,CAAC;CACtC;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAsB,EACtB,kBAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+BA0BjB;yBAnCe,UAAU"}
+{"version":3,"file":"FormLayout.d.ts","sourceRoot":"","sources":["../../src/FormLayout/FormLayout.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAC;AA2C7B,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAEhC;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,kBAAkB,CAAC,EAAE,eAAe,CAAC;CACtC;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAsB,EACtB,kBAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+BA0BjB;yBAnCe,UAAU"}

package/dist/HoverCard/HoverCard.d.ts

@@ -47,9 +47,10 @@ export interface HoverCardProps extends Pick<BaseProps, 'xstyle' | 'className' |
     hideDelay?: number;
     /**
      * When to trigger on focus:
-     * - `auto`: Only if element is naturally focusable
-     * - `always`: Always attach focus listeners
-     * - `never`: Never attach focus listeners (for composite widgets)
+     * - `auto`: focus on the trigger itself, or within a trigger that is
+     *   focusable when focus arrives
+     * - `always`: focus on the trigger or anything inside it
+     * - `never`: never on focus (for composite widgets)
      *
      * @default 'auto'
      */
@@ -87,7 +88,8 @@ export interface HoverCardProps extends Pick<BaseProps, 'xstyle' | 'className' |
     /**
      * Whether to show hover indication (dashed underline) on a text trigger.
      * An element trigger keeps its own styling, so this has no effect on it.
-     * - `'auto'`: Show when children is a single string or number
+     * - `'auto'`: Show when children is text: strings and numbers, such as
+     *   `Edited {when}`, with holes such as `false` and `null` ignored
      * - `true`: Show on a text trigger
      * - `false`: Never show
      *

package/dist/HoverCard/HoverCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/HoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAsB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG7E,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC3B,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,YAAY,EACV,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,gBAAgB,CAAC;AA6ExB,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;;OAQG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEtC;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAiBD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,SAAmB,EACnB,SAAoB,EACpB,KAAW,EACX,SAAe,EACf,YAAqB,EACrB,YAAqB,EACrB,SAAgB,EAChB,KAAK,EACL,YAAY,EACZ,kBAA2B,EAC3B,MAAM,EACN,aAAa,EACb,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,cAAc,GAAG,YAAY,CAoL/B;yBAtMe,SAAS"}
+{"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/HoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAIL,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC3B,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,YAAY,EACV,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,gBAAgB,CAAC;AA6ExB,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;;;OASG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEtC;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAoCD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,SAAmB,EACnB,SAAoB,EACpB,KAAW,EACX,SAAe,EACf,YAAqB,EACrB,YAAqB,EACrB,SAAgB,EAChB,KAAK,EACL,YAAY,EACZ,kBAA2B,EAC3B,MAAM,EACN,aAAa,EACb,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,cAAc,GAAG,YAAY,CA2M/B;yBA7Ne,SAAS"}

package/dist/HoverCard/HoverCard.js

@@ -15,7 +15,9 @@
  * - /apps/storybook/stories/HoverCard.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/HoverCard/ (showcase blocks)
  */
-import { useCallback, useRef } from 'react';
+import { useCallback, useRef, useState } from 'react';
+import { isRenderable } from "../utils/isRenderable.js";
+import { observeMutations } from "../utils/sharedMutationObserver.js";
 import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
 import * as stylex from '@stylexjs/stylex';
 import { useHoverCard } from "./useHoverCard.js";
@@ -65,7 +67,26 @@ function supportsAriaExpanded(el) {
  * Check if children are text-only (no React elements)
  */
 function isTextOnly(children) {
-  return typeof children === 'string' || typeof children === 'number';
+  if (typeof children === 'string' || typeof children === 'number') {
+    return true;
+  }
+  // Text written around an expression, such as `Edited {when}`, reaches React
+  // as several strings. Holes that render nothing do not change that; one
+  // element does.
+  if (!Array.isArray(children)) {
+    return false;
+  }
+  let hasText = false;
+  for (const child of children.flat(Infinity)) {
+    if (!isRenderable(child)) {
+      continue;
+    }
+    if (typeof child !== 'string' && typeof child !== 'number') {
+      return false;
+    }
+    hasText = true;
+  }
+  return hasText;
 }
 
 /**
@@ -138,6 +159,30 @@ export function HoverCard({
     onHide: handleHide
   });
 
+  // The wrapper's first element is the trigger, and it can be replaced after
+  // mount: by new children, or by a child component that swaps its own root
+  // without a render here. Syncs with the DOM: on a replacement the wiring
+  // below re-runs, so the old element is released before the new one is wired.
+  const [triggerReplacements, setTriggerReplacements] = useState(0);
+  const observedTriggerRef = useRef(null);
+  useIsomorphicLayoutEffect(() => {
+    const wrapper = wrapperRef.current;
+    if (textOnly || wrapper == null) {
+      return;
+    }
+    observedTriggerRef.current = wrapper.firstElementChild;
+    return observeMutations(wrapper, {
+      childList: true
+    }, () => {
+      const trigger = wrapper.firstElementChild;
+      if (trigger === observedTriggerRef.current) {
+        return;
+      }
+      observedTriggerRef.current = trigger;
+      setTriggerReplacements(count => count + 1);
+    });
+  }, [textOnly]);
+
   // For element children with display:contents, attach ref to first child
   useIsomorphicLayoutEffect(() => {
     if (textOnly) {
@@ -224,7 +269,7 @@ export function HoverCard({
         firstChild.removeAttribute('aria-describedby');
       }
     };
-  }, [textOnly, label, hoverCard.ref, hoverCard.id, hoverCard.isOpen, hoverCard.describedBy]);
+  }, [textOnly, label, hoverCard.ref, hoverCard.id, hoverCard.isOpen, hoverCard.describedBy, triggerReplacements]);
 
   // While closed, useLayer leaves only an inert <template> marker at this JSX
   // position. When the card needs to open, it uses that marker to keep the