@astryxdesign/core 0.7.8-canary.ffd29c5 → 0.7.8

package/dist/utils/pressFeedback.js

@@ -138,6 +138,66 @@ export function pressFadeMs(element) {
   const reduced = typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
   return reduced ? Math.min(scaled, PRESS_FADE_MS) : scaled;
 }
+
+/**
+ * The release animations that still run for `element`'s press. Each is a
+ * finite CSS animation that has not finished. It runs on the element, on its
+ * `::before` or `::after`, or on a descendant whose nearest press owner is
+ * the element, because a component can draw its release on a part inside the
+ * surface. A press owner nested inside plays the release of its own press,
+ * so it never extends this one. The list is empty where the engine has no Web
+ * Animations.
+ */
+function releaseAnimationsOf(element) {
+  if (typeof element.getAnimations !== 'function') {
+    return [];
+  }
+  return element.getAnimations({
+    subtree: true
+  }).filter(animation => {
+    // The effect of a CSS animation is a KeyframeEffect. Its target is the
+    // element, also when the animation runs on a pseudo-element.
+    const effect = animation.effect;
+    const target = effect?.target ?? null;
+    if (effect == null || target == null || !('animationName' in animation) || target !== element && target.closest(`[${PRESSABLE_ATTRIBUTE}]`) !== element) {
+      return false;
+    }
+    if (!Number.isFinite(Number(effect.getComputedTiming().endTime))) {
+      return false;
+    }
+    return animation.playState !== 'finished';
+  });
+}
+
+/**
+ * Calls `end` when the release on `element` is over. A busy main thread
+ * delays the first frame of the release animation, and with it the end. So a
+ * clock that starts at the `fading` write can cut the release short. When
+ * `clockMs` runs out, the release waits for each release animation that still
+ * runs or still waits for its first frame. It ends when those finish or are
+ * cancelled, as when the surface is unmounted or restyled. With no release
+ * animation (an instant release, a surface without one, an engine without Web
+ * Animations), the release ends at the clock. Returns a cancel.
+ */
+function endAfterRelease(element, clockMs, end) {
+  let waiting = true;
+  const timer = setTimeout(() => {
+    const running = releaseAnimationsOf(element);
+    if (running.length === 0) {
+      end();
+      return;
+    }
+    void Promise.allSettled(running.map(async animation => animation.finished)).then(() => {
+      if (waiting) {
+        end();
+      }
+    });
+  }, clockMs);
+  return () => {
+    waiting = false;
+    clearTimeout(timer);
+  };
+}
 const TIMER_EVENT = {
   fade: 'fadeEnd',
   flash: 'flashEnd',
@@ -152,7 +212,7 @@ function paintElement(element, paint) {
 }
 function clearTimer(slot) {
   if (slot.live?.timer != null) {
-    clearTimeout(slot.live.timer);
+    slot.live.timer();
     slot.live.timer = null;
   }
 }
@@ -188,20 +248,25 @@ function apply(slot, step) {
   }
   if (step.timer != null) {
     const kind = step.timer;
-    // A TIMER, never `requestAnimationFrame`: iOS throttles frame callbacks
-    // while a scroll runs, so a frame-based delay would fire late, after the
-    // scroll, and paint a control nobody is pressing any more.
-    live.timer = setTimeout(() => {
+    const fire = () => {
       if (slot.live != null) {
         slot.live.timer = null;
       }
       apply(slot, pressGestureStep(slot.live?.gesture ?? idlePressGesture(), {
         kind: TIMER_EVENT[kind]
       }));
-    },
-    // The release fade follows the theme's tempo (AST-108). The onset delay
-    // and the tap flash do not.
-    kind === 'fade' ? pressFadeMs(live.element) : TIMER_MS[kind]);
+    };
+    if (kind === 'fade') {
+      // The release fade follows the theme's tempo (AST-108). It ends when
+      // its animation ends, however late a busy main thread let it start.
+      live.timer = endAfterRelease(live.element, pressFadeMs(live.element), fire);
+    } else {
+      // A TIMER, never `requestAnimationFrame`: iOS throttles frame callbacks
+      // while a scroll runs, so a frame-based delay would fire late, after the
+      // scroll, and paint a control nobody is pressing any more.
+      const timer = setTimeout(fire, TIMER_MS[kind]);
+      live.timer = () => clearTimeout(timer);
+    }
   }
 }
 

package/dist/utils/pressGesture.d.ts

@@ -31,7 +31,9 @@ export declare const PRESS_FLASH_MS = 100;
  * How long the paint takes to leave after a release: UIKit's deselect
  * crossfade. The one number, shared with the stylesheet: the release
  * animation in interactionOverlay.stylex.ts runs on the same constant, so the
- * timer that removes the attribute and the fade cannot drift apart.
+ * controller's release clock and the fade cannot drift apart. When the clock
+ * runs out, the controller waits for a release animation that still runs,
+ * then removes the attribute.
  */
 export declare const PRESS_FADE_MS: number;
 /**
@@ -98,7 +100,7 @@ export type PressEvent = {
  | {
     kind: 'flashEnd';
 }
-/** {@link PRESS_FADE_MS} elapsed; the paint is gone. */
+/** The release is over: its animation ended, or its clock ran out with none running. */
  | {
     kind: 'fadeEnd';
 };

package/dist/utils/pressGesture.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pressGesture.d.ts","sourceRoot":"","sources":["../../src/utils/pressGesture.ts"],"names":[],"mappings":"AA4BA;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,KAAK,CAAC;AAEhC;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC;;;;;GAKG;AACH,eAAO,MAAM,aAAa,EAAE,MAA8B,CAAC;AAE3D;;;;;;;;GAQG;AACH,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC,2EAA2E;AAC3E,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,IAAI,GAAG,QAAQ,CAAC;AAElD;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,UAAU,GACpB,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5E,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B,sDAAsD;IACtD,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,MAAM,UAAU,GAClB;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAC;AACtC;;;;GAIG;GACD;IAAC,IAAI,EAAE,YAAY,CAAA;CAAC;AACtB,0EAA0E;GACxE;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAC,GACpC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAC;AACd,4FAA4F;GAC1F;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC;AAClB,iEAAiE;GAC/D;IAAC,IAAI,EAAE,OAAO,CAAA;CAAC;AACjB,yDAAyD;GACvD;IAAC,IAAI,EAAE,UAAU,CAAA;CAAC;AACpB,wDAAwD;GACtD;IAAC,IAAI,EAAE,SAAS,CAAA;CAAC,CAAC;AAEtB,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC;IAC/B,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B;;;;;;;;;OASG;IACH,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,IAAI,CAAC;CACnD;AAkBD;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,YAAY,EACrB,KAAK,EAAE,UAAU,GAChB,SAAS,CA6GX;AAED,wBAAgB,gBAAgB,IAAI,YAAY,CAE/C"}
+{"version":3,"file":"pressGesture.d.ts","sourceRoot":"","sources":["../../src/utils/pressGesture.ts"],"names":[],"mappings":"AA4BA;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,KAAK,CAAC;AAEhC;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,EAAE,MAA8B,CAAC;AAE3D;;;;;;;;GAQG;AACH,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC,2EAA2E;AAC3E,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,IAAI,GAAG,QAAQ,CAAC;AAElD;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,UAAU,GACpB,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5E,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B,sDAAsD;IACtD,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,MAAM,UAAU,GAClB;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAC;AACtC;;;;GAIG;GACD;IAAC,IAAI,EAAE,YAAY,CAAA;CAAC;AACtB,0EAA0E;GACxE;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAC,GACpC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAC;AACd,4FAA4F;GAC1F;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC;AAClB,iEAAiE;GAC/D;IAAC,IAAI,EAAE,OAAO,CAAA;CAAC;AACjB,yDAAyD;GACvD;IAAC,IAAI,EAAE,UAAU,CAAA;CAAC;AACpB,wFAAwF;GACtF;IAAC,IAAI,EAAE,SAAS,CAAA;CAAC,CAAC;AAEtB,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC;IAC/B,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B;;;;;;;;;OASG;IACH,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,IAAI,CAAC;CACnD;AAkBD;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,YAAY,EACrB,KAAK,EAAE,UAAU,GAChB,SAAS,CA6GX;AAED,wBAAgB,gBAAgB,IAAI,YAAY,CAE/C"}

package/dist/utils/pressGesture.js

@@ -62,7 +62,9 @@ export const PRESS_FLASH_MS = 100;
  * How long the paint takes to leave after a release: UIKit's deselect
  * crossfade. The one number, shared with the stylesheet: the release
  * animation in interactionOverlay.stylex.ts runs on the same constant, so the
- * timer that removes the attribute and the fade cannot drift apart.
+ * controller's release clock and the fade cannot drift apart. When the clock
+ * runs out, the controller waits for a release animation that still runs,
+ * then removes the attribute.
  */
 export const PRESS_FADE_MS = pressConsts.releaseMs;
 

package/dist/utils/selectionLock.d.ts

@@ -19,6 +19,15 @@ export interface DragSelectionReleaseOptions {
      */
     isCancel?: boolean;
 }
+/** A drag's selection hold: call it to release the hold. */
+export interface DragSelectionHold {
+    (options?: DragSelectionReleaseOptions): void;
+    /**
+     * Called after the lift's own handlers ran. A selection they made since
+     * the release stays: the hold then puts it back, not the press's.
+     */
+    keepLiftSelection(): void;
+}
 /**
  * Refuse a new selection while a mouse or pen drag that a recognizer claimed
  * runs, until the returned function runs. `kept` is the page's selection
@@ -38,7 +47,7 @@ export interface DragSelectionReleaseOptions {
  * follows a cancel. `onReleased` runs once the document's hold has ended.
  * The page listeners exist only during a press. Idempotent.
  */
-export declare function lockDragSelection(elements: Iterable<Element>, view: Window | null | undefined, kept: ReadonlyArray<AbstractRange>, onReleased?: () => void): (options?: DragSelectionReleaseOptions) => void;
+export declare function lockDragSelection(elements: Iterable<Element>, view: Window | null | undefined, kept: ReadonlyArray<AbstractRange>, onReleased?: () => void): DragSelectionHold;
 /**
  * The page's selection now, its ranges copied; none for a collapsed or empty
  * one. A drag's hold keeps what this read when the press began.

package/dist/utils/selectionLock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selectionLock.d.ts","sourceRoot":"","sources":["../../src/utils/selectionLock.ts"],"names":[],"mappings":"AAoDA;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAE9D;AAWD;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,EAC3B,MAAM,EAAE,WAAW,GAAG,IAAI,GACzB,MAAM,IAAI,CA4BZ;AAED,mEAAmE;AACnE,MAAM,WAAW,2BAA2B;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,EAC3B,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAC/B,IAAI,EAAE,aAAa,CAAC,aAAa,CAAC,EAClC,UAAU,CAAC,EAAE,MAAM,IAAI,GACtB,CAAC,OAAO,CAAC,EAAE,2BAA2B,KAAK,IAAI,CA+EjD;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAC9B,aAAa,CAAC,aAAa,CAAC,CAiB9B;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CACpC,GAAG,EAAE,QAAQ,EACb,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,MAAM,EAAE,WAAW,GAAG,IAAI,GACzB,OAAO,CA+CT"}
+{"version":3,"file":"selectionLock.d.ts","sourceRoot":"","sources":["../../src/utils/selectionLock.ts"],"names":[],"mappings":"AAoDA;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAE9D;AAWD;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,EAC3B,MAAM,EAAE,WAAW,GAAG,IAAI,GACzB,MAAM,IAAI,CA4BZ;AAED,mEAAmE;AACnE,MAAM,WAAW,2BAA2B;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,4DAA4D;AAC5D,MAAM,WAAW,iBAAiB;IAChC,CAAC,OAAO,CAAC,EAAE,2BAA2B,GAAG,IAAI,CAAC;IAC9C;;;OAGG;IACH,iBAAiB,IAAI,IAAI,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,EAC3B,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAC/B,IAAI,EAAE,aAAa,CAAC,aAAa,CAAC,EAClC,UAAU,CAAC,EAAE,MAAM,IAAI,GACtB,iBAAiB,CAuGnB;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAC9B,aAAa,CAAC,aAAa,CAAC,CAiB9B;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CACpC,GAAG,EAAE,QAAQ,EACb,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,MAAM,EAAE,WAAW,GAAG,IAAI,GACzB,OAAO,CA+CT"}

package/dist/utils/selectionLock.js

@@ -84,6 +84,8 @@ export function lockSelection(elements, target) {
 
 /** How a drag's selection hold ends: at a lift, or at a cancel. */
 
+/** A drag's selection hold: call it to release the hold. */
+
 /**
  * Refuse a new selection while a mouse or pen drag that a recognizer claimed
  * runs, until the returned function runs. `kept` is the page's selection
@@ -105,7 +107,11 @@ export function lockSelection(elements, target) {
  */
 export function lockDragSelection(elements, view, kept, onReleased) {
   const doc = view?.document ?? null;
-  const roots = shadowRootsOfRanges(kept);
+  let keptRanges = kept;
+  let roots = shadowRootsOfRanges(keptRanges);
+  // The selection when the lift released the hold, until the lift's
+  // handlers ran.
+  let atLift = null;
   const restore = () => {
     const selection = view?.getSelection();
     // The focused field keeps its own selection (a drag never starts in one).
@@ -113,7 +119,7 @@ export function lockDragSelection(elements, view, kept, onReleased) {
       return;
     }
     const held = heldRanges(selection, roots);
-    if (kept.length === 0) {
+    if (keptRanges.length === 0) {
       if (held.some(range => !range.collapsed)) {
         selection.removeAllRanges();
       }
@@ -121,10 +127,10 @@ export function lockDragSelection(elements, view, kept, onReleased) {
     }
     // A render can remove what the kept selection held: then there is
     // nothing to put back.
-    if (sameRanges(held, kept) || !kept.every(isValidRange)) {
+    if (sameRanges(held, keptRanges) || !keptRanges.every(isValidRange)) {
       return;
     }
-    selectRanges(selection, kept);
+    selectRanges(selection, keptRanges);
   };
   restore();
   const set = new Set(elements);
@@ -160,11 +166,12 @@ export function lockDragSelection(elements, view, kept, onReleased) {
       onReleased?.();
     }
   };
-  return ({
+  const release = ({
     isCancel = false
   } = {}) => {
     if (stage === 'held') {
       stage = 'lifted';
+      atLift = selectionRangesOf(view);
       for (const element of set) {
         element.removeEventListener('selectstart', refuse);
       }
@@ -180,6 +187,25 @@ export function lockDragSelection(elements, view, kept, onReleased) {
       releaseDocument();
     }
   };
+  release.keepLiftSelection = () => {
+    if (stage !== 'lifted' || atLift == null) {
+      return;
+    }
+    const before = atLift;
+    atLift = null;
+    const keepIfChanged = () => {
+      const now = selectionRangesOf(view);
+      if (stage !== 'done' && !sameRanges(now, before)) {
+        keptRanges = now;
+        roots = shadowRootsOfRanges(now);
+      }
+    };
+    keepIfChanged();
+    // A click's state update renders in a microtask, and its layout effect
+    // may select then. That still runs before the press's own mouseup.
+    queueMicrotask(keepIfChanged);
+  };
+  return release;
 }
 
 /**

package/dist/utils/sharedMutationObserver.d.ts

@@ -4,7 +4,8 @@
  * @output Exports observeMutations (one shared observer per set of options)
  *   and observeContent, its text-and-children form
  * @position Internal utility; consumed by useTruncation, hitArea, AppShell's
- *   main-overflow observer and ModalAnnounceProvider's presentation watch. The mutation counterpart of sharedResizeObserver:
+ *   main-overflow observer, ModalAnnounceProvider's presentation watch and
+ *   CheckboxList's required group. The mutation counterpart of sharedResizeObserver:
  *   one observer for every element observed with the same options, so a
  *   repeated cell, row or region does not create one observer per instance.
  */

package/dist/utils/sharedMutationObserver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sharedMutationObserver.d.ts","sourceRoot":"","sources":["../../src/utils/sharedMutationObserver.ts"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,KAAK,gBAAgB,GAAG,MAAM,IAAI,CAAC;AA4DnC;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,IAAI,EACb,OAAO,EAAE,oBAAoB,EAC7B,QAAQ,EAAE,gBAAgB,GACzB,MAAM,IAAI,CAmCZ;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAC5B,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,gBAAgB,GACzB,MAAM,IAAI,CAEZ"}
+{"version":3,"file":"sharedMutationObserver.d.ts","sourceRoot":"","sources":["../../src/utils/sharedMutationObserver.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,KAAK,gBAAgB,GAAG,MAAM,IAAI,CAAC;AA4DnC;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,IAAI,EACb,OAAO,EAAE,oBAAoB,EAC7B,QAAQ,EAAE,gBAAgB,GACzB,MAAM,IAAI,CAmCZ;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAC5B,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,gBAAgB,GACzB,MAAM,IAAI,CAEZ"}

package/dist/utils/sharedMutationObserver.js

@@ -8,7 +8,8 @@
  * @output Exports observeMutations (one shared observer per set of options)
  *   and observeContent, its text-and-children form
  * @position Internal utility; consumed by useTruncation, hitArea, AppShell's
- *   main-overflow observer and ModalAnnounceProvider's presentation watch. The mutation counterpart of sharedResizeObserver:
+ *   main-overflow observer, ModalAnnounceProvider's presentation watch and
+ *   CheckboxList's required group. The mutation counterpart of sharedResizeObserver:
  *   one observer for every element observed with the same options, so a
  *   repeated cell, row or region does not create one observer per instance.
  */

package/dist/utils/timeParser.d.ts

@@ -65,7 +65,8 @@ export declare function compareTime(a: ISOTimeString | undefined, b: ISOTimeStri
  */
 export declare function isTimeInRange(time: ISOTimeString, min?: ISOTimeString, max?: ISOTimeString): boolean;
 /**
- * Clamps a time to a min/max range.
+ * Clamps a time to a min/max range. Without seconds, a bound that falls
+ * between whole minutes gives the nearest whole minute inside the range.
  */
 export declare function clampTime(time: ISOTimeString, min?: ISOTimeString, max?: ISOTimeString, includeSeconds?: boolean): ISOTimeString;
 /**

package/dist/utils/timeParser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timeParser.d.ts","sourceRoot":"","sources":["../../src/utils/timeParser.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG;IAAC,QAAQ,CAAC,OAAO,EAAE,eAAe,CAAA;CAAC,CAAC;AAEzE;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,GAAG,IAAI,CAMvE;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,IAAI,CA6B5D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,UAAU,EAChB,cAAc,GAAE,OAAe,GAC9B,aAAa,CAUf;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,aAAa,GAAG,SAAS,EAC/B,cAAc,GAAE,OAAe,GAC9B,MAAM,CAqBR;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,aAAa,GAAG,SAAS,EAC/B,cAAc,GAAE,OAAe,GAC9B,MAAM,CAmBR;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,EACb,cAAc,GAAE,OAAe,GAC9B,aAAa,GAAG,IAAI,CA6HtB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CACzB,CAAC,EAAE,aAAa,GAAG,SAAS,EAC5B,CAAC,EAAE,aAAa,GAAG,SAAS,GAC3B,MAAM,CA4BR;AAED;;GAEG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,aAAa,EACnB,GAAG,CAAC,EAAE,aAAa,EACnB,GAAG,CAAC,EAAE,aAAa,GAClB,OAAO,CAQT;AAED;;GAEG;AACH,wBAAgB,SAAS,CACvB,IAAI,EAAE,aAAa,EACnB,GAAG,CAAC,EAAE,aAAa,EACnB,GAAG,CAAC,EAAE,aAAa,EACnB,cAAc,GAAE,OAAe,GAC9B,aAAa,CAoBf;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CACxB,IAAI,EAAE,aAAa,EACnB,YAAY,EAAE,MAAM,EACpB,cAAc,GAAE,OAAe,GAC9B,aAAa,CA2Bf"}
+{"version":3,"file":"timeParser.d.ts","sourceRoot":"","sources":["../../src/utils/timeParser.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG;IAAC,QAAQ,CAAC,OAAO,EAAE,eAAe,CAAA;CAAC,CAAC;AAEzE;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,GAAG,IAAI,CAMvE;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,IAAI,CA6B5D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,UAAU,EAChB,cAAc,GAAE,OAAe,GAC9B,aAAa,CAUf;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,aAAa,GAAG,SAAS,EAC/B,cAAc,GAAE,OAAe,GAC9B,MAAM,CAqBR;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,aAAa,GAAG,SAAS,EAC/B,cAAc,GAAE,OAAe,GAC9B,MAAM,CAmBR;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,EACb,cAAc,GAAE,OAAe,GAC9B,aAAa,GAAG,IAAI,CA6HtB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CACzB,CAAC,EAAE,aAAa,GAAG,SAAS,EAC5B,CAAC,EAAE,aAAa,GAAG,SAAS,GAC3B,MAAM,CA4BR;AAED;;GAEG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,aAAa,EACnB,GAAG,CAAC,EAAE,aAAa,EACnB,GAAG,CAAC,EAAE,aAAa,GAClB,OAAO,CAQT;AAED;;;GAGG;AACH,wBAAgB,SAAS,CACvB,IAAI,EAAE,aAAa,EACnB,GAAG,CAAC,EAAE,aAAa,EACnB,GAAG,CAAC,EAAE,aAAa,EACnB,cAAc,GAAE,OAAe,GAC9B,aAAa,CA0Bf;AAgCD;;;;;;GAMG;AACH,wBAAgB,UAAU,CACxB,IAAI,EAAE,aAAa,EACnB,YAAY,EAAE,MAAM,EACpB,cAAc,GAAE,OAAe,GAC9B,aAAa,CA2Bf"}

package/dist/utils/timeParser.js

@@ -289,7 +289,8 @@ export function isTimeInRange(time, min, max) {
 }
 
 /**
- * Clamps a time to a min/max range.
+ * Clamps a time to a min/max range. Without seconds, a bound that falls
+ * between whole minutes gives the nearest whole minute inside the range.
  */
 export function clampTime(time, min, max, includeSeconds = false) {
   const parsed = parseISOTime(time);
@@ -299,18 +300,43 @@ export function clampTime(time, min, max, includeSeconds = false) {
   if (min && compareTime(time, min) < 0) {
     const parsedMin = parseISOTime(min);
     if (parsedMin) {
-      return formatISOTime(parsedMin, includeSeconds);
+      return formatISOTime(onWholeMinute(parsedMin, 1, includeSeconds, max), includeSeconds);
     }
   }
   if (max && compareTime(time, max) > 0) {
     const parsedMax = parseISOTime(max);
     if (parsedMax) {
-      return formatISOTime(parsedMax, includeSeconds);
+      return formatISOTime(onWholeMinute(parsedMax, -1, includeSeconds, min), includeSeconds);
     }
   }
   return time;
 }
 
+/**
+ * A bound as a time without seconds reaches it: the next whole minute up from
+ * a minimum, or the whole minute down from a maximum. With no whole minute
+ * before the other bound, the bound stays as it is.
+ */
+function onWholeMinute(bound, direction, includeSeconds, other) {
+  if (includeSeconds || bound.second === 0) {
+    return bound;
+  }
+  const minutes = bound.hour * 60 + bound.minute + (direction === 1 ? 1 : 0);
+  if (minutes > 23 * 60 + 59) {
+    return bound;
+  }
+  const rounded = {
+    hour: Math.floor(minutes / 60),
+    minute: minutes % 60,
+    second: 0
+  };
+  const order = compareTime(formatISOTime(rounded, true), other);
+  if (other && (direction === 1 ? order > 0 : order < 0)) {
+    return bound;
+  }
+  return rounded;
+}
+
 /**
  * Adjusts a time by adding/subtracting minutes.
  *

package/locales/en.json

@@ -267,6 +267,10 @@
     "defaultMessage": "No filters applied",
     "description": "Heading of the PowerSearch Filters sheet empty state when no filter is active (experimental bottom-sheet presentation). Neutral tone."
   },
+  "@astryx.powersearch.sheet.noFiltersInDraft": {
+    "defaultMessage": "No filters",
+    "description": "Heading of the PowerSearch Filters sheet empty state while the sheet's draft is empty but the field still has applied filters, which Done replaces. Must not say the filters are applied or removed yet. Neutral tone."
+  },
   "@astryx.powersearch.sheet.noFiltersDescription": {
     "defaultMessage": "Add a filter to narrow your results and find what you need faster.",
     "description": "Guidance line under the PowerSearch Filters sheet empty state, above its Add filter action. One short sentence."
@@ -293,7 +297,23 @@
   },
   "@astryx.powersearch.sheet.done": {
     "defaultMessage": "Done",
-    "description": "Primary button label in the PowerSearch Filters sheet footer that closes the sheet. Short; marks the end of the filtering task."
+    "description": "Primary button label in the PowerSearch Filters sheet footer that commits the sheet's filter draft and closes the sheet. Short; marks the end of the filtering task."
+  },
+  "@astryx.powersearch.sheet.discardTitle": {
+    "defaultMessage": "Discard changes?",
+    "description": "Title of the confirmation dialog shown when someone tries to dismiss the PowerSearch filter sheet after changing its filter draft. A question."
+  },
+  "@astryx.powersearch.sheet.discardDescription": {
+    "defaultMessage": "Your changes to the filters haven't been applied.",
+    "description": "Body of the dirty-dismiss confirmation inside the PowerSearch filter sheet. Done applies the draft; a dismissal would drop it."
+  },
+  "@astryx.powersearch.sheet.keepEditing": {
+    "defaultMessage": "Keep editing",
+    "description": "Label of the safe cancel action in the PowerSearch dirty-dismiss confirmation. It closes the confirmation and returns to the unchanged draft."
+  },
+  "@astryx.powersearch.sheet.discardConfirm": {
+    "defaultMessage": "Discard changes",
+    "description": "Label of the destructive action in the PowerSearch dirty-dismiss confirmation. It closes the sheet without applying its filter draft."
   },
   "@astryx.powersearch.sheet.search": {
     "defaultMessage": "Search",
@@ -367,14 +387,6 @@
     "defaultMessage": "{label} {value}",
     "description": "A Filters row's \"field operator\" text joined with its value, as the removal announcement reads it (for example \"Status is Open\"). Translators may reorder the two parts."
   },
-  "@astryx.powersearch.sheet.filtersClearedWithCount": {
-    "defaultMessage": "All filters removed. {resultCount}",
-    "description": "Polite screen-reader announcement after Clear all in the PowerSearch touch sheet when the result count changed with it; resultCount is the field's already formatted result count (for example \"240 results\"). Live-region text, never shown on screen."
-  },
-  "@astryx.powersearch.sheet.editableFiltersClearedWithCount": {
-    "defaultMessage": "Editable filters removed. {resultCount}",
-    "description": "Polite screen-reader announcement after Clear all in the PowerSearch touch sheet removes the editable filters, keeps read-only ones, and the result count changed with it; resultCount is the field's already formatted result count (for example \"240 results\"). Live-region text, never shown on screen."
-  },
   "@astryx.alertDialog.cancel": {
     "defaultMessage": "Cancel",
     "description": "Button label on the secondary/dismiss button of an AlertDialog (modal confirmation). Imperative verb; consumers usually override with task-specific text."

package/locales/pseudo.json

@@ -200,6 +200,9 @@
   "@astryx.powersearch.sheet.noFilters": {
     "defaultMessage": "⟦Ñó ƒíłţéřš àþþłíéð⟧"
   },
+  "@astryx.powersearch.sheet.noFiltersInDraft": {
+    "defaultMessage": "⟦Ñó ƒíłţéřš⟧"
+  },
   "@astryx.powersearch.sheet.noFiltersDescription": {
     "defaultMessage": "⟦Àðð à ƒíłţéř ţó ñàřřóŵ ýóúř řéšúłţš àñð ƒíñð ŵĥàţ ýóú ñééð ƒàšţéř.⟧"
   },
@@ -221,6 +224,18 @@
   "@astryx.powersearch.sheet.done": {
     "defaultMessage": "⟦Ðóñé⟧"
   },
+  "@astryx.powersearch.sheet.discardTitle": {
+    "defaultMessage": "⟦Ðíšçàřð çĥàñĝéš?⟧"
+  },
+  "@astryx.powersearch.sheet.discardDescription": {
+    "defaultMessage": "⟦Ýóúř çĥàñĝéš ţó ţĥé ƒíłţéřš ĥàṽéñ'ţ ƀééñ àþþłíéð.⟧"
+  },
+  "@astryx.powersearch.sheet.keepEditing": {
+    "defaultMessage": "⟦Ķééþ éðíţíñĝ⟧"
+  },
+  "@astryx.powersearch.sheet.discardConfirm": {
+    "defaultMessage": "⟦Ðíšçàřð çĥàñĝéš⟧"
+  },
   "@astryx.powersearch.sheet.search": {
     "defaultMessage": "⟦Šéàřçĥ⟧"
   },
@@ -275,12 +290,6 @@
   "@astryx.powersearch.sheet.labelValue": {
     "defaultMessage": "⟦{label} {value}⟧"
   },
-  "@astryx.powersearch.sheet.filtersClearedWithCount": {
-    "defaultMessage": "⟦Àłł ƒíłţéřš řéɱóṽéð. {resultCount}⟧"
-  },
-  "@astryx.powersearch.sheet.editableFiltersClearedWithCount": {
-    "defaultMessage": "⟦Éðíţàƀłé ƒíłţéřš řéɱóṽéð. {resultCount}⟧"
-  },
   "@astryx.alertDialog.cancel": {
     "defaultMessage": "⟦Çàñçéł⟧"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.7.8-canary.ffd29c5",
+  "version": "0.7.8",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -870,9 +870,6 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.8-canary.ffd29c5",
-    "@astryxdesign/cli": "0.7.8-canary.ffd29c5",
-    "@astryxdesign/interaction-harness": "0.7.8-canary.ffd29c5",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",
@@ -883,7 +880,10 @@
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.3.2",
     "@types/babel__core": "^7.20.5",
-    "tailwindcss": "^4.3.2"
+    "tailwindcss": "^4.3.2",
+    "@astryxdesign/cli": "0.7.8",
+    "@astryxdesign/interaction-harness": "0.0.0",
+    "@astryxdesign/a11y-spec": "0.0.0"
   },
   "dependencies": {
     "intl-messageformat": "^11.2.9"

package/src/BottomSheet/BottomSheet.doc.mjs

@@ -152,7 +152,7 @@ export const docs = {
       name: 'height',
       type: "'hug' | 'capped' | 'tall' | number | string",
       description:
-        "How tall the sheet is. Named budgets: 'hug' fits its content up to 92% of the viewport, 'capped' is a scrolling mid-height panel (~62%), and 'tall' is a pinned near-full panel (~92%) for content that streams in. Or pass a number (px) / CSS length for a custom budget. Give snapPoints to let the user drag between heights. On shorter viewports the sheet fills the available height. Only a fully expanded 'tall' sheet provides mobile-keyboard accommodation: it stays put and scrolls each focused control above the keyboard. Hug, Capped, numeric and CSS-length heights never do, and a Tall sheet stops doing it the moment the user drags it to a shorter detent, resuming when they drag it back. Outside that state the sheet neither moves nor adds keyboard scroll space, and the browser's own focus reveal is left in place; on iOS that reveal can shift the whole page.",
+        "How tall the sheet is. Named budgets: 'hug' fits its content up to 92% of the viewport, 'capped' is a scrolling mid-height panel (~62%), and 'tall' is a pinned near-full panel (~92%) for content that streams in. Or pass a number (px) / CSS length for a custom budget. Give snapPoints to let the user drag between heights. On shorter viewports the sheet fills the available height. Only a fully expanded 'tall' sheet provides mobile-keyboard accommodation: it stays put and scrolls each focused control above the keyboard. Hug, Capped, numeric and CSS-length heights never do, and a Tall sheet stops doing it the moment the user drags it to a shorter detent, resuming when they drag it back. Outside that state the sheet neither moves nor adds keyboard scroll space, and the browser's own focus reveal is left in place; on iOS that reveal can shift the whole page. This accommodation applies where the visual viewport shrinks for the keyboard, as in Safari on iOS, Firefox for Android and Chrome on Android, where the sheet places the focused control just above the keyboard as it comes up, and the control rides the rest of Gboard\u2019s slide up, and the slide down after it loses focus; a hide Chrome reports late, such as Back, rides down from Chrome\u2019s report (`astryx docs browser-support`).",
       default: "'capped'",
     },
     {

package/src/BottomSheet/BottomSheetPanel.tsx

@@ -14,7 +14,7 @@
  * - /packages/core/src/BottomSheet/BottomSheet.tsx
  * - /packages/core/src/BottomSheet/BottomSheetPanel.test.tsx
  * - /packages/core/src/BottomSheet/snapOffsets.ts
- * - /packages/core/src/BottomSheet/useMobileKeyboard.ts
+ * - /packages/core/src/keyboard/useMobileKeyboard.ts
  * - /packages/core/src/BottomSheet/useSheetGestures.ts
  * - /packages/core/src/Layout/container.stylex.ts (bottom-sheet padding chain)
  */
@@ -66,7 +66,7 @@ import {
   resolveSnapPoints,
   type BottomSheetSnapPoint,
 } from './snapOffsets';
-import {useMobileKeyboard} from './useMobileKeyboard';
+import {useMobileKeyboard} from '../keyboard/useMobileKeyboard';
 import {
   scrollPreservationPadding,
   sheetLayoutHeight,
@@ -316,13 +316,29 @@ const styles = stylex.create({
   },
   tallKeyboardBody: {
     scrollPaddingBlockEnd: MOBILE_KEYBOARD_BOTTOM_CLEARANCE,
+  },
+  // The inset the keyboard takes at the end of a Tall sheet's content
+  // (useMobileKeyboard), so its last control can scroll above the keyboard.
+  // It is the content box's last in-flow box, after the content's own
+  // children, not a box after the content. Firefox resolves the content's
+  // `min-height: min-content` as `auto` in the block axis. The content box
+  // then keeps the body's height while its children overflow it. An inset
+  // after that box sat inside the overflow and added no scroll range. In
+  // Firefox for Android, the body's scrollHeight was 1491 with and without a
+  // 357 px inset.
+  tallKeyboardContent: {
     '::after': {
       content: '""',
       display: 'block',
-      blockSize: 'var(--_sheet-keyboard-inset, 0px)',
+      blockSize: 0,
       pointerEvents: 'none',
     },
   },
+  keyboardInset: (inset: number) => ({
+    '::after': {
+      blockSize: inset,
+    },
+  }),
   budget: {
     height: `calc(var(--_sheet-budget) + ${OVERSCROLL_PADDING}px)`,
   },
@@ -564,6 +580,9 @@ export function BottomSheetPanel({
   ...props
 }: BottomSheetPanelProps) {
   const elementRef = useRef<HTMLDivElement | null>(null);
+  const dismissKeyboardRef = useRef<
+    ((focusTarget?: HTMLElement) => void) | null
+  >(null);
   const previousStateRef = useRef(state);
   const reactivatedEntranceRef = useRef(false);
   const onMotionStartRef = useRef(onMotionStart);
@@ -639,7 +658,6 @@ export function BottomSheetPanel({
     dragOffset,
     settledOffset,
     isDragging,
-    isTraveling,
     isDismissedByTouchDrag,
     sheetHeight,
     scrollPreservationInset,
@@ -653,6 +671,10 @@ export function BottomSheetPanel({
     offscreenBlockEndInset: OVERSCROLL_PADDING,
     onDismiss,
     snapHeights,
+    onTravelStart: () => {
+      // Focusing the sheet dismisses the keyboard as the sheet starts to move.
+      dismissKeyboardRef.current?.(elementRef.current ?? undefined);
+    },
     onScrimOpacity,
     hasFixedHeight: consumerHeight != null,
   });
@@ -686,17 +708,19 @@ export function BottomSheetPanel({
     isPresentedRef.current = isPresented;
     sheetRef(isPresented ? elementRef.current : null);
   }, [isPresented, sheetRef]);
-  useMobileKeyboard({
-    bodyRef: bodyElementRef,
-    bottomClearance: MOBILE_KEYBOARD_BOTTOM_CLEARANCE,
-    isEnabled: height === 'tall',
-    isFullyExpanded: settledOffset === 0,
-    isPageScrollLocked,
-    isSheetTraveling: isTraveling,
+  const keyboard = useMobileKeyboard(elementRef, {
+    move: 'ride',
+    inset: true,
+    offset: MOBILE_KEYBOARD_BOTTOM_CLEARANCE,
+    isEnabled: height === 'tall' && isPresented,
+    isExpanded: settledOffset === 0,
     isOpen: isInteractive,
-    isPresented,
-    sheetRef: elementRef,
+    isPageScrollLocked,
   });
+  const keyboardInset = keyboard.inset;
+  // The drag's own callback dismisses the keyboard as the sheet starts to
+  // move. It runs in the gesture, so it reads the newest dismiss.
+  dismissKeyboardRef.current = keyboard.dismiss;
   // Keep controller registration attached to one stable host ref. React
   // detaches an old callback ref when a consumer supplies a new identity; if
   // that public ref were merged with setElement, an ordinary parent rerender
@@ -943,6 +967,10 @@ export function BottomSheetPanel({
             getContentProps<HTMLDivElement>(
               stylex.props(
                 styles.content,
+                height === 'tall' && styles.tallKeyboardContent,
+                height === 'tall' &&
+                  keyboardInset > 0 &&
+                  styles.keyboardInset(keyboardInset),
                 ...container(
                   usesThemePadding
                     ? {useThemeDefault: 'bottom-sheet'}

package/src/BottomSheet/BottomSheetSwitcher.doc.mjs

@@ -29,6 +29,11 @@ export const docs = {
   group: 'BottomSheet',
   category: 'Overlay',
   keywords: ['bottom sheet', 'switcher', 'multi-step', 'flow', 'wizard'],
+  deprecated: {
+    replacement: 'BottomSheet',
+    description:
+      'Write each step as its own BottomSheet with isOpen, controlled by one state value that names the open step; moving on from inside the open step replaces it in place (see BottomSheet, Replacing a sheet). BottomSheetSwitcher keeps working until a future minor release removes it.',
+  },
   playground: {
     overlay: true,
     overlayControl: {

package/src/BottomSheet/bottomSheetStack.ts

@@ -1881,7 +1881,7 @@ export function getBottomSheetBeneath(
 
 // preventScroll on both: presenting a sheet must not scroll the page to reveal
 // what it just focused. For an autofocused field that reveal is the mobile
-// keyboard's, and it moves the document under a fixed sheet; useMobileKeyboard
+// keyboard's, and it moves the document under a fixed sheet. useMobileKeyboard
 // brings the field into view within the sheet instead.
 /**
  * Move focus into a sheet panel. Focus already inside the sheet stays put: