@astryxdesign/core 0.7.8 → 0.7.9-canary.07992bb

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/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/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),

package/dist/Layout/LayoutPanel.d.ts

@@ -1,6 +1,7 @@
 /**
  * @file LayoutPanel.tsx
- * @input Uses React StyleX, LayoutAreaContext, LayoutSlotsContext
+ * @input Uses React StyleX, LayoutAreaContext, LayoutSlotsContext,
+ *   useScrollRegionProps
  * @output Exports LayoutPanel component and LayoutPanelProps
  * @position Sidebar panel for Layout start/end slots. Use for navigation panels,
  *   settings sidebars, detail panels, or any fixed-width side content.
@@ -47,6 +48,8 @@ export interface LayoutPanelProps extends BaseProps<HTMLDivElement> {
     /**
      * Accessible label for the landmark.
      * Required when role is set and multiple landmarks of the same type exist.
+     * While the panel scrolls, it also names the scrolling region, which
+     * otherwise takes a translated "Content".
      */
     label?: string;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"LayoutPanel.d.ts","sourceRoot":"","sources":["../../src/Layout/LayoutPanel.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;AAO5C,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAC3D,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,2BAA2B,CAAC;AAmF9D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,OAAO,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;IAEhB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;;;;;;;;;;OAaG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,UAAkB,EAClB,YAAmB,EACnB,KAAK,EACL,OAAO,EACP,IAAI,EACJ,KAAK,EACL,SAAS,EACT,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAkElB;yBAhFe,WAAW"}
+{"version":3,"file":"LayoutPanel.d.ts","sourceRoot":"","sources":["../../src/Layout/LayoutPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,QAAQ,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAC3D,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,2BAA2B,CAAC;AAmF9D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,OAAO,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;IAEhB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;;;;;;;;;;OAaG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,UAAkB,EAClB,YAAmB,EACnB,KAAK,EACL,OAAO,EACP,IAAI,EACJ,KAAK,EACL,SAAS,EACT,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAoElB;yBAlFe,WAAW"}

package/dist/Layout/LayoutPanel.js

@@ -4,7 +4,8 @@
 
 /**
  * @file LayoutPanel.tsx
- * @input Uses React StyleX, LayoutAreaContext, LayoutSlotsContext
+ * @input Uses React StyleX, LayoutAreaContext, LayoutSlotsContext,
+ *   useScrollRegionProps
  * @output Exports LayoutPanel component and LayoutPanelProps
  * @position Sidebar panel for Layout start/end slots. Use for navigation panels,
  *   settings sidebars, detail panels, or any fixed-width side content.
@@ -20,6 +21,8 @@ import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars } from "../theme/tokens.stylex.js";
 import { LayoutAreaContext } from "./LayoutAreaContext.js";
 import { LayoutSlotsContext } from "./LayoutSlotsContext.js";
+import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { useScrollRegionProps } from "../hooks/useScrollRegionProps.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles } from "./padding.stylex.js";
@@ -160,6 +163,12 @@ export function LayoutPanel({
 
   // When no divider, collapse spacing for seamless visual flow
   const shouldCollapseSpacing = !hasDivider && !isZeroPadding && padding == null;
+  const region = useScrollRegionProps({
+    isScrollable,
+    role,
+    label
+  });
+  const mergedRef = useMergedRefs(ref, region.ref);
 
   // Select divider style based on position
   const dividerStyle = isStartPanel ? styles.dividerEnd : isEndPanel ? styles.dividerStart : null;
@@ -167,9 +176,9 @@ export function LayoutPanel({
   // Select collapse style based on position (collapse the side where divider would be)
   const collapseStyle = isStartPanel ? styles.collapseEnd : isEndPanel ? styles.collapseStart : null;
   return /*#__PURE__*/_jsx("div", {
-    ref: ref,
-    role: role,
-    "aria-label": label,
+    ref: mergedRef,
+    role: region.role,
+    "aria-label": region['aria-label'],
     ...mergeProps(themeProps('layout-panel'), stylex.props(styles.panel, dynamicStyles.sizing(effectiveWidth ?? null),
     // Outer padding on container edges (unless component is full bleed)
     isStartPanel && !isZeroPadding && padding == null && styles.startPanel, isEndPanel && !isZeroPadding && padding == null && styles.endPanel, !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], hasDivider && dividerStyle, shouldCollapseSpacing && collapseStyle, xstyle), className, style),

package/dist/Lightbox/Lightbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAuB5C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACjE,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,aAAa,GAAG,aAAa,EAAE,CAAC;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAmKD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,KAAK,EAAE,eAAe,EACtB,YAAgB,EAChB,aAAa,EACb,OAAe,EACf,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,KAAK,EACT,EAAE,aAAa,sCAwef;yBAxfe,QAAQ"}
+{"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAwB5C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACjE,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,aAAa,GAAG,aAAa,EAAE,CAAC;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAmKD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,KAAK,EAAE,eAAe,EACtB,YAAgB,EAChB,aAAa,EACb,OAAe,EACf,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,KAAK,EACT,EAAE,aAAa,sCA2ef;yBA3fe,QAAQ"}

package/dist/Lightbox/Lightbox.js

@@ -37,6 +37,7 @@ import { ModalAnnounceProvider } from "../hooks/ModalAnnounceProvider.js";
 import { overlayPaddingReset } from "../Layout/overlayPaddingReset.stylex.js";
 import { LayerDepthProvider } from "../Layer/LayerDepthContext.js";
 import { useLayerDismissal } from "../Layer/useLayerDismissal.js";
+import { useFocusRegionContainment } from "../hooks/useFocusTrap.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { isRtlElement } from "../hooks/isRtlElement.js";
 import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
@@ -218,6 +219,9 @@ export function Lightbox({
   const t = useComponentTranslator();
   const dialogRef = useRef(null);
   const mergedDialogRef = useMergedRefs(ref, dialogRef);
+  // Native showModal() lets Tab leave for the browser's own UI, so the shared
+  // module wraps it.
+  useFocusRegionContainment(dialogRef, isOpen);
   const containerRef = useRef(null);
   const imageWrapperRef = useRef(null);
   const triggerElementRef = useRef(null);

package/dist/MetadataList/MetadataList.js

@@ -216,7 +216,7 @@ export function MetadataList({
         "aria-expanded": isShowAll,
         onClick: () => setIsShowAll(prev => !prev),
         ...{
-          className: "xjyslct xjbqb8w xc342km xng3xce x15nmkw0 x1ypdohk x16khyan xqwr325 xjm74w1 xw6l6zx x1e4wzip xjb2p0i x1yc453h xqcrz7y"
+          className: "xjyslct xjbqb8w xc342km xng3xce x15nmkw0 x1ypdohk x16khyan xjse4m1 xjm74w1 xw6l6zx x1e4wzip xjb2p0i x1yc453h xqcrz7y"
         },
         children: isShowAll ? t('@astryx.metadataList.showLess') : t('@astryx.metadataList.showMore')
       })]

package/dist/MobileNav/MobileNav.d.ts

@@ -1,6 +1,7 @@
 /**
  * @file MobileNav.tsx
- * @input Uses React, useEffect, useRef, useCallback, ReactNode, StyleX
+ * @input Uses React, useEffect, useRef, useCallback, ReactNode, StyleX and
+ *   the Layer module's entrance hold
  * @output Exports MobileNav component and MobileNavProps
  * @position Core implementation; consumed by index.ts
  *
@@ -34,6 +35,7 @@
  * - /packages/core/src/MobileNav/index.ts (exports if types change)
  * - /packages/core/src/Layer/useLayerDismissal.ts (dismissal stack)
  * - /packages/core/src/hooks/useScrollLock.ts (the page's scroll lock)
+ * - /packages/core/src/MobileNav/MobileNavTouchPresentation.test.tsx (touch)
  * - /packages/cli/assets/templates/blocks/components/MobileNav/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
@@ -47,6 +49,14 @@ import type { BaseProps } from '../BaseProps.js';
  * own scheduled `dialog.close()` has a chance to run (#5701).
  */
 export declare const MAX_CLOSE_DELAY_MS = 250;
+/**
+ * Longest the drawer slides in or out for, in ms. Both run for the theme's
+ * `--duration-medium`: 410 ms by default, and at most 545 ms on the default
+ * scale (`--duration-medium-max`). The slide-out keeps playing after the
+ * dialog closes, while the dialog's `display` transition keeps it rendered.
+ * The touch hold on the slide-in ends by this time.
+ */
+export declare const MAX_EXIT_MS = 550;
 /**
  * Shortest duration in a `transition-duration` list, in ms; null if unreadable.
  *

package/dist/MobileNav/MobileNav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MobileNav.d.ts","sourceRoot":"","sources":["../../src/MobileNav/MobileNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,OAAO,EAOL,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAsBf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAyM5C;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAItC;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAkBpE;AA+DD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EAAE,UAAU,EAClB,YAAY,EAAE,gBAAgB,EAC9B,QAAQ,EACR,MAAM,EACN,KAAW,EACX,IAAa,EACb,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAsQhB;yBArRe,SAAS"}
+{"version":3,"file":"MobileNav.d.ts","sourceRoot":"","sources":["../../src/MobileNav/MobileNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEH,OAAO,EAOL,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAuBf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0M5C;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,MAAM,CAAC;AAI/B;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAkBpE;AA+DD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EAAE,UAAU,EAClB,YAAY,EAAE,gBAAgB,EAC9B,QAAQ,EACR,MAAM,EACN,KAAW,EACX,IAAa,EACb,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAgShB;yBA/Se,SAAS"}