@astryxdesign/core 0.7.8 → 0.7.9-canary.0200dfe

package/dist/Layer/preserveAnimations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preserveAnimations.d.ts","sourceRoot":"","sources":["../../src/Layer/preserveAnimations.ts"],"names":[],"mappings":"AAoPA;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,GAAG,IAAI,CAkDzE"}
+{"version":3,"file":"preserveAnimations.d.ts","sourceRoot":"","sources":["../../src/Layer/preserveAnimations.ts"],"names":[],"mappings":"AA0BA;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,GAAG,IAAI,CASzE"}

package/dist/Layer/preserveAnimations.js

@@ -11,189 +11,23 @@
  *
  * Taking an element out of rendering cancels every CSS animation and
  * transition of it and its subtree. When it returns, the browser creates the
- * animations again from the stylesheet, at their start, and the transitions
- * not at all; script-created animations are untouched. `preserveAnimations`
- * reads every animation's state first and, afterwards, gives each recreated
- * CSS animation that state and resumes each cancelled transition with a
- * script animation at the same point.
- *
- * The state is read generically, from what the platform exposes: every
- * accessor with a setter on the animation's and its effect's prototype
- * chains, every field of the effect's timing, and its keyframes. Only values
- * that differ from the recreated animation's are written, so a value the
- * stylesheet controls stays under its control. A few members are not plain
- * state and are handled in their own step (`ORDERED`); the rest need no
- * handling (`DERIVED`). What cannot be carried over is the Animation and
- * effect objects themselves: the old ones are idle, their `addEventListener`
- * listeners and `finished`/`ready` promises stay with them, and the browser
- * fires `animationcancel`/`transitioncancel` for them and `animationstart`
+ * animations again from the stylesheet, at their start. It starts no
+ * transition but one from `@starting-style`, and script-created animations
+ * are untouched. `preserveAnimations` reads every animation's state first.
+ * Afterwards it gives each recreated CSS animation that state, and resumes
+ * each cancelled transition with a script animation at the same point. Any
+ * other animation the return started is finished, unless it never ends
+ * (motion/carryAnimations.ts). The browser fires
+ * `animationcancel`/`transitioncancel` for the old ones and `animationstart`
  * for the new ones.
  */
 
-/**
- * Animation members written in a fixed order rather than generically: the
- * timeline before the range that is measured on it, the rate before the
- * time, and the start time (or, for a paused animation, the current time)
- * last, once the play state is set. `effect` is not
- * replaced, because a CSS animation whose effect script replaces leaves the
- * stylesheet's control; its state is copied onto the new effect instead.
- */
-const ORDERED = new Set(['effect', 'timeline', 'rangeStart', 'rangeEnd', 'playbackRate', 'startTime', 'currentTime']);
-/** Every accessor with a setter on `object`'s prototype chain. */
-function writableAccessors(object) {
-  const names = new Set();
-  for (let proto = Object.getPrototypeOf(object); proto != null && proto !== Object.prototype; proto = Object.getPrototypeOf(proto)) {
-    for (const [name, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(proto))) {
-      if (descriptor.set != null) {
-        names.add(name);
-      }
-    }
-  }
-  return [...names];
-}
-
-/**
- * A textual form of a value that is compared by content rather than by
- * identity: a CSS numeric value (as in a timeline range offset) through its
- * serialization, a plain object (a range) through its members. Anything else
- * is compared by identity (`null`).
- */
-function contentOf(value) {
-  if (typeof CSSNumericValue !== 'undefined' && value instanceof CSSNumericValue) {
-    return value.toString();
-  }
-  if (value != null && typeof value === 'object' && Object.getPrototypeOf(value) === Object.prototype) {
-    return Object.entries(value).map(([key, inner]) => `${key}:${contentOf(inner) ?? String(inner)}`).join(';');
-  }
-  return null;
-}
-function differs(a, b) {
-  if (a === b) {
-    return false;
-  }
-  const textA = contentOf(a);
-  return textA == null || textA !== contentOf(b);
-}
-function save(animation) {
-  const effect = animation.effect;
-  const values = {};
-  for (const name of writableAccessors(animation)) {
-    values[name] = animation[name];
-  }
-  const effectValues = {};
-  if (effect != null) {
-    for (const name of writableAccessors(effect)) {
-      effectValues[name] = effect[name];
-    }
-  }
-  return {
-    animation,
-    name: animation.animationName ?? '',
-    target: effect?.target ?? null,
-    pseudoElement: effect?.pseudoElement ?? null,
-    values,
-    effectValues,
-    timing: effect?.getTiming() ?? null,
-    keyframes: effect?.getKeyframes() ?? null,
-    playState: animation.playState,
-    replaceState: animation.replaceState
-  };
-}
-function write(object, name, value) {
-  object[name] = value;
-}
-
-/** Give `next` the effect state `saved` had: every writable member. */
-function restoreEffect(next, saved) {
-  for (const name of writableAccessors(next)) {
-    if (name in saved.effectValues && differs(saved.effectValues[name], next[name])) {
-      write(next, name, saved.effectValues[name]);
-    }
-  }
-  if (saved.timing != null) {
-    const timing = next.getTiming();
-    const changed = {};
-    for (const [field, value] of Object.entries(saved.timing)) {
-      if (differs(value, timing[field])) {
-        changed[field] = value;
-      }
-    }
-    if (Object.keys(changed).length > 0) {
-      next.updateTiming(changed);
-    }
-  }
-  if (saved.keyframes != null && JSON.stringify(saved.keyframes) !== JSON.stringify(next.getKeyframes())) {
-    next.setKeyframes(saved.keyframes);
-  }
-}
-
-/** Give `next` the state `saved` had, member by member. */
-function restore(next, saved) {
-  const effect = next.effect;
-  if (effect != null) {
-    restoreEffect(effect, saved);
-  }
-  const current = next;
-  for (const name of ['timeline', 'rangeStart', 'rangeEnd']) {
-    if (name in saved.values && differs(saved.values[name], current[name])) {
-      write(next, name, saved.values[name]);
-    }
-  }
-  for (const name of writableAccessors(next)) {
-    if (!ORDERED.has(name) && name in saved.values && differs(saved.values[name], current[name])) {
-      write(next, name, saved.values[name]);
-    }
-  }
-  if (saved.replaceState === 'persisted' && next.replaceState !== 'persisted') {
-    next.persist();
-  }
-  const rate = saved.values.playbackRate;
-  if (typeof rate === 'number' && rate !== next.playbackRate) {
-    next.playbackRate = rate;
-  }
-  if (saved.playState === 'paused' && next.playState !== 'paused') {
-    next.pause();
-  } else if (saved.playState !== 'paused' && next.playState === 'paused') {
-    next.play();
-  }
-  // A running animation is anchored to its timeline by its start time, which
-  // carries its current time on exactly. A paused one has none and keeps its
-  // current time. A finished one holds its end: finishing it again holds the
-  // same time, though its start time is then counted from now, since script
-  // cannot set a start time and a held time together.
-  const start = saved.values.startTime;
-  const time = saved.values.currentTime;
-  if (saved.playState === 'finished') {
-    next.finish();
-  } else if (start != null) {
-    next.startTime = start;
-  } else if (time != null) {
-    next.currentTime = time;
-  }
-}
-
-/** Resume a cancelled CSS transition with a script animation in its state. */
-function resumeTransition(saved) {
-  if (saved.target == null || saved.keyframes == null) {
-    return;
-  }
-  const replacement = saved.target.animate(saved.keyframes, {
-    pseudoElement: saved.pseudoElement ?? undefined
-  });
-  restore(replacement, saved);
-}
-function isTransition(animation) {
-  return typeof CSSTransition !== 'undefined' && animation instanceof CSSTransition;
-}
+import { restoreAnimations, saveAnimation } from "../motion/carryAnimations.js";
 
 /**
  * Run `reset`, which takes `root` out of rendering and back, and put every
  * CSS animation and transition of `root` and its subtree back in the state it
- * was in before. Recreated animations are matched to the ones they replace by
- * element, pseudo-element and name, in order, and then by name alone (an
- * effect script moved to another element or pseudo-element); a recreated
- * animation with no predecessor (an entry animation that had already played
- * and been dropped) is finished.
+ * was in before.
  */
 export function preserveAnimations(root, reset) {
   if (typeof root.getAnimations !== 'function') {
@@ -203,43 +37,7 @@ export function preserveAnimations(root, reset) {
   const before = root.getAnimations({
     subtree: true
   });
-  const saved = before.map(save);
+  const saved = before.map(saveAnimation);
   reset();
-  const after = root.getAnimations({
-    subtree: true
-  });
-  const current = new Set(after);
-  const survivors = new Set(before);
-  const cancelled = [];
-  for (const state of saved) {
-    if (current.has(state.animation)) {
-      continue;
-    }
-    if (isTransition(state.animation)) {
-      resumeTransition(state);
-    } else {
-      cancelled.push(state);
-    }
-  }
-  const recreated = after.filter(animation => !survivors.has(animation));
-  const unmatched = [];
-  for (const animation of recreated) {
-    const effect = animation.effect;
-    const name = animation.animationName ?? '';
-    const index = cancelled.findIndex(state => state.name === name && state.target === (effect?.target ?? null) && state.pseudoElement === (effect?.pseudoElement ?? null));
-    if (index === -1) {
-      unmatched.push(animation);
-    } else {
-      restore(animation, cancelled.splice(index, 1)[0]);
-    }
-  }
-  for (const animation of unmatched) {
-    const name = animation.animationName ?? '';
-    const index = cancelled.findIndex(state => state.name === name);
-    if (index === -1) {
-      animation.finish();
-    } else {
-      restore(animation, cancelled.splice(index, 1)[0]);
-    }
-  }
+  restoreAnimations(root, saved, new Set(before));
 }

package/dist/Layer/useBackdropPress.d.ts

@@ -19,6 +19,14 @@ export interface BackdropPressHandlers {
  * ancestor), so a backdrop press dismisses only when its pointer-down and its
  * pointer-up both landed on the backdrop. A cancelled pointer ends the press.
  *
+ * A press that light-dismisses a layer open above the host, such as a menu
+ * open in the dialog, is that layer's: the host stays open, and the next
+ * backdrop press dismisses it, as a second Escape does. The press is the
+ * layer's when it closes one. A `popover="auto"` layer that showed at
+ * pointer-down no longer shows at the click, or a layer counted its close
+ * with noteOutsideDismissal. A layer that hides for another reason, such as a
+ * Tooltip whose trigger lost focus, does not count.
+ *
  * The pointer handlers run in the capture phase. A nested layer, such as a
  * popover open in the dialog, stops its presses at its own root, so a
  * bubble-phase handler here does not see them.

package/dist/Layer/useBackdropPress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBackdropPress.d.ts","sourceRoot":"","sources":["../../src/Layer/useBackdropPress.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AAEH,OAAO,EAAsB,KAAK,YAAY,EAAE,KAAK,UAAU,EAAC,MAAM,OAAO,CAAC;AAE9E,MAAM,WAAW,qBAAqB;IACpC,oBAAoB,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACjE,kBAAkB,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/D,sBAAsB,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnE,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACnD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAC9B,eAAe,EAAE,MAAM,IAAI,EAC3B,SAAS,EAAE,OAAO,GACjB,qBAAqB,CA6CvB"}
+{"version":3,"file":"useBackdropPress.d.ts","sourceRoot":"","sources":["../../src/Layer/useBackdropPress.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AAEH,OAAO,EAAsB,KAAK,YAAY,EAAE,KAAK,UAAU,EAAC,MAAM,OAAO,CAAC;AAG9E,MAAM,WAAW,qBAAqB;IACpC,oBAAoB,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACjE,kBAAkB,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/D,sBAAsB,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnE,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACnD;AAiBD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,gBAAgB,CAC9B,eAAe,EAAE,MAAM,IAAI,EAC3B,SAAS,EAAE,OAAO,GACjB,qBAAqB,CA6DvB"}

package/dist/Layer/useBackdropPress.js

@@ -10,6 +10,19 @@
  * @position Shared backdrop-press rule for Dialog and Drawer
  */
 import { useCallback, useRef } from 'react';
+import { outsideDismissalCount } from "./outsidePress.js";
+function isPopoverShowing(element) {
+  try {
+    return element.matches(':popover-open');
+  } catch {
+    // jsdom and pre-Popover browsers do not recognize :popover-open.
+    return false;
+  }
+}
+function showingAutoPopovers(host) {
+  return Array.from(host.ownerDocument.querySelectorAll('[popover="auto"], [popover=""]')).filter(element => !element.contains(host) && isPopoverShowing(element));
+}
+
 /**
  * A press on a modal layer's backdrop targets the <dialog> root itself. A
  * click there is also what the browser sends when a press starts on one side
@@ -17,6 +30,14 @@ import { useCallback, useRef } from 'react';
  * ancestor), so a backdrop press dismisses only when its pointer-down and its
  * pointer-up both landed on the backdrop. A cancelled pointer ends the press.
  *
+ * A press that light-dismisses a layer open above the host, such as a menu
+ * open in the dialog, is that layer's: the host stays open, and the next
+ * backdrop press dismisses it, as a second Escape does. The press is the
+ * layer's when it closes one. A `popover="auto"` layer that showed at
+ * pointer-down no longer shows at the click, or a layer counted its close
+ * with noteOutsideDismissal. A layer that hides for another reason, such as a
+ * Tooltip whose trigger lost focus, does not count.
+ *
  * The pointer handlers run in the capture phase. A nested layer, such as a
  * popover open in the dialog, stops its presses at its own root, so a
  * bubble-phase handler here does not see them.
@@ -24,9 +45,14 @@ import { useCallback, useRef } from 'react';
 export function useBackdropPress(onBackdropPress, isEnabled) {
   const startedOnBackdropRef = useRef(false);
   const endedOnBackdropRef = useRef(false);
+  const autoPopoversRef = useRef([]);
+  const dismissalCountRef = useRef(0);
   const onPointerDownCapture = useCallback(event => {
-    startedOnBackdropRef.current = event.target === event.currentTarget;
+    const isOnBackdrop = event.target === event.currentTarget;
+    startedOnBackdropRef.current = isOnBackdrop;
     endedOnBackdropRef.current = false;
+    autoPopoversRef.current = isOnBackdrop ? showingAutoPopovers(event.currentTarget) : [];
+    dismissalCountRef.current = outsideDismissalCount(event.currentTarget.ownerDocument);
   }, []);
   const onPointerUpCapture = useCallback(event => {
     endedOnBackdropRef.current = startedOnBackdropRef.current && event.target === event.currentTarget;
@@ -35,12 +61,15 @@ export function useBackdropPress(onBackdropPress, isEnabled) {
   const onPointerCancelCapture = useCallback(() => {
     startedOnBackdropRef.current = false;
     endedOnBackdropRef.current = false;
+    autoPopoversRef.current = [];
   }, []);
   const onClick = useCallback(event => {
     const pressWasOnBackdrop = endedOnBackdropRef.current;
+    const dismissedALayerAbove = autoPopoversRef.current.some(layer => !isPopoverShowing(layer)) || outsideDismissalCount(event.currentTarget.ownerDocument) !== dismissalCountRef.current;
     startedOnBackdropRef.current = false;
     endedOnBackdropRef.current = false;
-    if (isEnabled && pressWasOnBackdrop && event.target === event.currentTarget) {
+    autoPopoversRef.current = [];
+    if (isEnabled && pressWasOnBackdrop && !dismissedALayerAbove && event.target === event.currentTarget) {
       onBackdropPress();
     }
   }, [isEnabled, onBackdropPress]);

package/dist/Layer/useLayer.d.ts

@@ -194,12 +194,14 @@ export interface FixedLayerOptions extends BaseLayerOptions {
 export interface ContextLayerReturn {
     /**
      * Ref to attach to trigger element.
-     * Injects anchorName style for CSS anchor positioning.
+     * While the layer is shown, and until its exit animation ends, the trigger
+     * carries the layer's CSS anchor name.
      */
     ref: RefCallback<HTMLElement>;
     /**
      * The CSS anchor name to use for positioning.
      * Use this when you need to set anchorName manually (e.g., display:contents wrapper).
+     * Set it only while the layer is shown or its exit animation runs.
      */
     anchorId: string;
     /**

package/dist/Layer/useLayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLayer.d.ts","sourceRoot":"","sources":["../../src/Layer/useLayer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"useLayer.d.ts","sourceRoot":"","sources":["../../src/Layer/useLayer.tsx"],"names":[],"mappings":"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"}

package/dist/Layer/useLayer.js

@@ -256,6 +256,20 @@ function untransform(rect, layer, style) {
   return new DOMRect(left, top, width, height);
 }
 
+/**
+ * The finite animations still running on `layer` and its content. A layer
+ * that fades out keeps running them after the browser hides it, and it stays
+ * placed against its anchor until they end.
+ */
+function exitAnimations(layer) {
+  if (layer == null || typeof layer.getAnimations !== 'function') {
+    return [];
+  }
+  return layer.getAnimations({
+    subtree: true
+  }).filter(animation => animation.playState === 'running' && animation.effect?.getComputedTiming().endTime !== Infinity);
+}
+
 /**
  * The layer's box where its position option put it, without the transform an
  * entry animation (or anything else) applies to it: a Tooltip enters from a
@@ -837,6 +851,34 @@ function useLayerImplementation(options) {
   // stale-closure reads of the previous isOpen value.
   const isOpenRef = useRef(false);
 
+  // The exit of the layer that closed last, while it still paints. Its
+  // trigger stays an anchor until it ends, also when the trigger attaches
+  // again during it. Null once it has ended.
+  const exitRef = useRef(null);
+
+  // A closed trigger is no anchor, once the layer stops painting. A show
+  // during the exit keeps the name, and so does a later exit.
+  const releaseAnchor = useCallback(layer => {
+    const exit = {};
+    exitRef.current = exit;
+    const release = () => {
+      if (exitRef.current !== exit) {
+        return;
+      }
+      exitRef.current = null;
+      const trigger = triggerRef.current;
+      if (!isOpenRef.current && trigger != null) {
+        removeAnchorName(trigger, anchorId);
+      }
+    };
+    const running = exitAnimations(layer);
+    if (running.length === 0) {
+      release();
+      return;
+    }
+    void Promise.all(running.map(async animation => animation.finished.catch(() => undefined))).then(release);
+  }, [anchorId]);
+
   // The gesture during which the browser last closed this layer on its own.
   // Read through wasJustDismissed by triggers deciding whether a click is
   // theirs to act on.
@@ -1006,6 +1048,12 @@ function useLayerImplementation(options) {
       popover.removeAttribute(LAYER_CLEARS_ANCHOR_ATTRIBUTE);
       popover.removeAttribute(LAYER_SCROLLS_ATTRIBUTE);
       applyDeferredWritingContext(popover);
+      // The trigger takes the layer's anchor name in the task that shows the
+      // layer, so the layer's first frame is placed against it.
+      const anchor = triggerRef.current;
+      if (anchor != null) {
+        addAnchorName(anchor, anchorId);
+      }
       // A hide the browser runs itself (an Escape its close watcher answers)
       // is counted too, from `beforetoggle` until the element's `toggle`, a
       // task after the hide has returned. The show is asked of the browser
@@ -1013,6 +1061,11 @@ function useLayerImplementation(options) {
       // light dismiss at pointerup, then this show at the click); only a show
       // it refuses replays once the hide's count has ended.
       if (!showPopoverElement(popover)) {
+        // The replay anchors the trigger again; until then it is closed. An
+        // exit still running keeps the name.
+        if (anchor != null && exitRef.current == null) {
+          removeAnchorName(anchor, anchorId);
+        }
         replayWhenSettled();
         return;
       }
@@ -1023,7 +1076,7 @@ function useLayerImplementation(options) {
       setIsOpen(true);
       onShow?.();
     }
-  }, [onShow, keepsAnchorClear, requestContextMount, applyDeferredWritingContext, showPopoverElement, isCurrentContextPopover, wasJustDismissed]);
+  }, [anchorId, onShow, keepsAnchorClear, requestContextMount, applyDeferredWritingContext, showPopoverElement, isCurrentContextPopover, wasJustDismissed]);
   const hide = useCallback(() => {
     pendingShowRef.current = false;
     if (isOpenRef.current) {
@@ -1051,8 +1104,9 @@ function useLayerImplementation(options) {
       setIsOpen(false);
       onHide?.();
     }
+    releaseAnchor(popoverRef.current);
     clearContextMount();
-  }, [onHide, clearContextMount]);
+  }, [onHide, clearContextMount, releaseAnchor]);
 
   // A deferred show() replays through a ref so the queued closure reaches the
   // current callback rather than the one captured when it was queued.
@@ -1072,7 +1126,12 @@ function useLayerImplementation(options) {
     if (triggerRef.current && triggerRef.current !== el) {
       removeAnchorName(triggerRef.current, anchorId);
     }
-    if (el) {
+
+    // Only a shown layer's trigger is an anchor. WebKit's Linux ports run the
+    // transform animation of an element that holds an anchor on the main
+    // thread. A busy task would then freeze a surface that moves around a
+    // closed trigger.
+    if (el && (isOpenRef.current || exitRef.current != null)) {
       addAnchorName(el, anchorId);
     }
     const previous = triggerRef.current;
@@ -1171,11 +1230,12 @@ function useLayerImplementation(options) {
       openedPopoverRef.current = null;
       isOpenRef.current = false;
       rememberDismissal(e.currentTarget?.ownerDocument ?? document);
+      releaseAnchor(e.currentTarget);
       setIsOpen(false);
       onHide?.();
       clearContextMount();
     }
-  }, [onHide, clearContextMount, rememberDismissal]);
+  }, [onHide, clearContextMount, rememberDismissal, releaseAnchor]);
 
   // Ref callback for popover element — sets up the `toggle` listener.
   // Tracks the element + handler currently bound so the listener is removed

package/dist/Layer/useTouchTrigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTouchTrigger.d.ts","sourceRoot":"","sources":["../../src/Layer/useTouchTrigger.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,OAAO,EAIL,KAAK,UAAU,IAAI,eAAe,EAClC,KAAK,YAAY,IAAI,iBAAiB,EACtC,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;AAExD;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,aAA4B,CAAC;AAE7D,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG;IAC1C,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAC3D,OAAO,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;CACpD,CAAC;AACF,wBAAgB,UAAU,CAAC,KAAK,EAAE,WAAW,GAAG;IAC9C,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAC3D,WAAW,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;CACxD,CAAC;AAwCF;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CA8B7D;AAiBD;;;;;;;GAOG;AACH,wBAAgB,yBAAyB,CAAC,MAAM,EAAE,OAAO,GAAG,OAAO,CAUlE;AAeD,MAAM,WAAW,sBAAsB;IACrC,sDAAsD;IACtD,YAAY,EAAE,iBAAiB,CAAC;IAEhC,oDAAoD;IACpD,SAAS,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,EAAE,OAAO,CAAC;IAEtB,2CAA2C;IAC3C,MAAM,EAAE,OAAO,CAAC;IAEhB,0EAA0E;IAC1E,OAAO,EAAE,MAAM,CAAC;IAEhB,oDAAoD;IACpD,UAAU,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAE1C,uDAAuD;IACvD,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB,mCAAmC;IACnC,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAED,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,iBAAiB,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAEtC;;;;OAIG;IACH,kBAAkB,EAAE,MAAM,OAAO,CAAC;IAElC;;;;OAIG;IACH,kBAAkB,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAElD;;;;;;OAMG;IACH,iBAAiB,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,OAAO,CAAC;IAEpD,gFAAgF;IAChF,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,WAAW,6BAA8B,SAAQ,qBAAqB;IAC1E;;;;OAIG;IACH,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,sBAAsB,GAC9B,qBAAqB,CASvB;AAED;;;;;GAKG;AACH,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,sBAAsB;AAC/B;;;;GAIG;AACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,GAC5B,6BAA6B,CAkO/B"}
+{"version":3,"file":"useTouchTrigger.d.ts","sourceRoot":"","sources":["../../src/Layer/useTouchTrigger.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,OAAO,EAIL,KAAK,UAAU,IAAI,eAAe,EAClC,KAAK,YAAY,IAAI,iBAAiB,EACtC,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAUf;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;AAExD;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,aAA4B,CAAC;AAE7D,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG;IAC1C,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAC3D,OAAO,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;CACpD,CAAC;AACF,wBAAgB,UAAU,CAAC,KAAK,EAAE,WAAW,GAAG;IAC9C,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAC3D,WAAW,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;CACxD,CAAC;AAwCF;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CA8B7D;AAiBD;;;;;;;GAOG;AACH,wBAAgB,yBAAyB,CAAC,MAAM,EAAE,OAAO,GAAG,OAAO,CAUlE;AAeD,MAAM,WAAW,sBAAsB;IACrC,sDAAsD;IACtD,YAAY,EAAE,iBAAiB,CAAC;IAEhC,oDAAoD;IACpD,SAAS,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,EAAE,OAAO,CAAC;IAEtB,2CAA2C;IAC3C,MAAM,EAAE,OAAO,CAAC;IAEhB,0EAA0E;IAC1E,OAAO,EAAE,MAAM,CAAC;IAEhB,oDAAoD;IACpD,UAAU,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAE1C,uDAAuD;IACvD,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB,mCAAmC;IACnC,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAED,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,iBAAiB,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAEtC;;;;OAIG;IACH,kBAAkB,EAAE,MAAM,OAAO,CAAC;IAElC;;;;OAIG;IACH,kBAAkB,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAElD;;;;;;OAMG;IACH,iBAAiB,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,OAAO,CAAC;IAEpD,gFAAgF;IAChF,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,WAAW,6BAA8B,SAAQ,qBAAqB;IAC1E;;;;OAIG;IACH,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,sBAAsB,GAC9B,qBAAqB,CASvB;AAED;;;;;GAKG;AACH,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,sBAAsB;AAC/B;;;;GAIG;AACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,GAC5B,6BAA6B,CAqO/B"}

package/dist/Layer/useTouchTrigger.js

@@ -45,6 +45,7 @@
  */
 import { useCallback, useEffect, useRef } from 'react';
 import { currentGesture } from "./gestureCounter.js";
+import { noteOutsideDismissal } from "./outsidePress.js";
 import { innermostInteractive, matchesInteractiveSelectors } from "../hooks/useClickableContainer.js";
 import { isDisabledControl } from "../utils/pressDisabled.js";
 import { useInteractionModalityTrackingFor } from "../utils/interactionModality.js";
@@ -306,6 +307,9 @@ onReleaseInLayer) {
         }
       }
       disarmOutsideDismiss();
+      if (target != null) {
+        noteOutsideDismissal(target.ownerDocument ?? document);
+      }
       hideRef.current();
     };
     outsideListenerRef.current = handleOutsidePointerEnd;

package/dist/Layout/LayoutContent.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file LayoutContent.tsx
- * @input Uses React StyleX, LayoutSlotsContext
+ * @input Uses React StyleX, LayoutSlotsContext, useScrollRegionProps
  * @output Exports LayoutContent component and LayoutContentProps
  * @position Scrollable main content area for Layout. Wraps the primary body content
  *   with automatic scroll containment and context-aware padding.
@@ -35,6 +35,8 @@ export interface LayoutContentProps extends BaseProps<HTMLDivElement> {
     /**
      * Accessible label for the landmark.
      * Required when role is set and multiple landmarks of the same type exist.
+     * While the content scrolls, it also names the scrolling region, which
+     * otherwise takes a translated "Content".
      */
     label?: string;
     /**

package/dist/Layout/LayoutContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutContent.d.ts","sourceRoot":"","sources":["../../src/Layout/LayoutContent.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,QAAQ,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAqFhD,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAmB,EACnB,OAAO,EACP,KAAK,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAkDpB;yBA7De,aAAa"}
+{"version":3,"file":"LayoutContent.d.ts","sourceRoot":"","sources":["../../src/Layout/LayoutContent.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,QAAQ,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAqFhD,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAmB,EACnB,OAAO,EACP,KAAK,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAoDpB;yBA/De,aAAa"}

package/dist/Layout/LayoutContent.js

@@ -4,7 +4,7 @@
 
 /**
  * @file LayoutContent.tsx
- * @input Uses React StyleX, LayoutSlotsContext
+ * @input Uses React StyleX, LayoutSlotsContext, useScrollRegionProps
  * @output Exports LayoutContent component and LayoutContentProps
  * @position Scrollable main content area for Layout. Wraps the primary body content
  *   with automatic scroll containment and context-aware padding.
@@ -19,6 +19,8 @@ import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { spacingVars } from "../theme/tokens.stylex.js";
 import { LayoutSlotsContext } from "./LayoutSlotsContext.js";
+import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { useScrollRegionProps } from "../hooks/useScrollRegionProps.js";
 import { mergeProps } from "../utils/mergeProps.js";
 import { themeProps } from "../utils/themeProps.js";
 import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles } from "./padding.stylex.js";
@@ -146,10 +148,16 @@ export function LayoutContent({
     hasEnd
   } = use(LayoutSlotsContext);
   const isZeroPadding = padding === 0;
+  const region = useScrollRegionProps({
+    isScrollable,
+    role,
+    label
+  });
+  const mergedRef = useMergedRefs(ref, region.ref);
   return /*#__PURE__*/_jsx("div", {
-    ref: ref,
-    role: role,
-    "aria-label": label,
+    ref: mergedRef,
+    role: region.role,
+    "aria-label": region['aria-label'],
     ...mergeProps(themeProps('layout-content'), stylex.props(styles.content,
     // Outer padding on container edges (unless content is full bleed)
     !hasStart && !isZeroPadding && padding == null && styles.noStart, !hasEnd && !isZeroPadding && padding == null && styles.noEnd, !hasHeader && !isZeroPadding && padding == null && styles.noHeader, !hasFooter && !isZeroPadding && padding == null && styles.noFooter, isScrollable && styles.scrollable, isZeroPadding && styles.fullBleed, padding != null && paddingStyles[padding], padding != null && containerPaddingInlineVarStyles[padding], padding != null && containerPaddingBlockStartVarStyles[padding], padding != null && containerPaddingBlockEndVarStyles[padding], !hasStart && !hasEnd && !isZeroPadding && styles.constrainedNoPanelsStart, !hasStart && !hasEnd && !isZeroPadding && styles.constrainedNoPanelsEnd, hasStart && !hasEnd && !isZeroPadding && styles.constrainedSingleStartPanel, !hasStart && hasEnd && !isZeroPadding && styles.constrainedSingleEndPanel, xstyle), className, style),