@astryxdesign/core 0.7.6-canary.e482998 → 0.7.6-canary.e64b41b

package/dist/AppShell/AppShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAgCf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAsChD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAAG,MAAM,CAAC;AAE9D;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAE7B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,SAAS,CAAC;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAqND,wBAAgB,QAAQ,CAAC,EACvB,OAAoB,EACpB,MAAM,EACN,QAAQ,EACR,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,MAAe,EACf,SAAS,EACT,OAAO,EACP,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,aAAa,qBAykBf;yBAxlBe,QAAQ"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAiCf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAwChD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAAG,MAAM,CAAC;AAE9D;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAE7B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,SAAS,CAAC;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAuOD,wBAAgB,QAAQ,CAAC,EACvB,OAAoB,EACpB,MAAM,EACN,QAAQ,EACR,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,MAAe,EACf,SAAS,EACT,OAAO,EACP,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,aAAa,qBAowBf;yBAnxBe,QAAQ"}

package/dist/AppShell/AppShell.js

@@ -23,7 +23,7 @@ import React from 'react';
 import { isValidElement, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
-import { colorVars, fontWeightVars, radiusVars, spacingVars, typeScaleVars } from "../theme/tokens.stylex.js";
+import { colorVars, focusVars, fontWeightVars, radiusVars, spacingVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { Layout } from "../Layout/Layout.js";
 import { LayoutHeader } from "../Layout/LayoutHeader.js";
 import { LayoutPanel } from "../Layout/LayoutPanel.js";
@@ -38,7 +38,7 @@ import { TopNavRenderContext } from "../TopNav/TopNavRenderContext.js";
 import { TopNavMobileContentContext } from "../TopNav/TopNavMobileContentContext.js";
 import { AppShellMobileContext } from "./AppShellMobileContext.js";
 import { mergeProps, isRenderable } from "../utils/index.js";
-import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
+import { focusOutlineProps, focusOutlineStyles } from "../utils/focusOutline.stylex.js";
 import { useMediaQuery } from "../hooks/useMediaQuery.js";
 import { observeResize } from "../utils/sharedResizeObserver.js";
 import { themeProps } from "../utils/themeProps.js";
@@ -46,6 +46,8 @@ import { useTranslator } from "../i18n/index.js";
 import { useThemeDefinition } from "../theme/useTheme.js";
 import { DEFAULT_WIDTH_BREAKPOINTS } from "../theme/themeAdaptations.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { attachScrollKeyboardDelegation } from "../hooks/scrollKeyboardDelegation.js";
+import { observeMainOverflow } from "./observeMainOverflow.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const HasActivity = typeof React.Activity !== 'undefined';
 const ActivityWrapper = HasActivity ? ({
@@ -168,6 +170,14 @@ const styles = {
     kI3sdo: "x1uvtmcs",
     $$css: true
   },
+  mainElevatedCorner: {
+    krdFHd: "x9a4xmf",
+    $$css: true
+  },
+  mainScrollRegionInset: {
+    kInvED: "x1wfwxd8 x1nw7mhf",
+    $$css: true
+  },
   contentBgSurface: {
     kWkggS: "x10xzikg",
     $$css: true
@@ -332,9 +342,81 @@ export function AppShell({
   const handleSkipLinkClick = useCallback(() => {
     document.getElementById(MAIN_CONTENT_ID)?.focus();
   }, []);
+
+  // Main draws its focus ring only for focus a Tab press moved onto it, and
+  // keeps it for as long as that focus stays, even once the content fits.
+  // Programmatic focus (the skip link, a script's focus() on a route change)
+  // draws none (FR4), even after keyboard input, where :focus-visible alone
+  // would match. See the effect below for how a Tab move is told apart.
+  const [isTabFocus, setIsTabFocus] = useState(false);
+  // A window or tab switch blurs main without moving focus off it: main stays
+  // the document's active element, and focus comes back to it with no Tab
+  // press. The ring holds across that round trip; any real focus move ends it.
+  const isMainAwayRef = useRef(false);
+  const handleMainBlur = useCallback(event => {
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+    if (document.activeElement === event.currentTarget) {
+      isMainAwayRef.current = true;
+      return;
+    }
+    isMainAwayRef.current = false;
+    setIsTabFocus(false);
+  }, []);
   const isFill = height === 'fill';
   const isAuto = height === 'auto';
 
+  // With `fill`, main is the page's scroller. While its content overflows it
+  // must be reachable from the keyboard even when nothing inside it is
+  // focusable (AST-025 FR12): it joins the tab order, and Tab entry moves on
+  // to its first link or button when it has one. Only `fill` observes main
+  // (PR1); LayoutContent keeps owning main's overflow and styles.
+  const [isMainOverflowing, setIsMainOverflowing] = useState(false);
+  const isMainScrollRegion = isFill && isMainOverflowing;
+  // Main's node is owned through a ref, never React state. Under `fill` its
+  // overflow is observed while the node is attached, and while main is a
+  // scroll region the keyboard delegation is attached to it. The ref callback
+  // changes with `fill`, so switching modes detaches and re-attaches main in
+  // the same commit; a detached or replaced node releases both before the new
+  // node takes over.
+  const mainNodeRef = useRef(null);
+  const mainOverflowRef = useRef(null);
+  const mainDelegationRef = useRef(null);
+  const isMainScrollRegionRef = useRef(isMainScrollRegion);
+  const syncMainDelegation = useCallback(() => {
+    const node = isMainScrollRegionRef.current ? mainNodeRef.current : null;
+    const current = mainDelegationRef.current;
+    if (current?.node === node) {
+      return;
+    }
+    current?.release();
+    mainDelegationRef.current = node == null ? null : {
+      node,
+      release: attachScrollKeyboardDelegation(node, node)
+    };
+  }, []);
+  const setMainNode = useCallback(node => {
+    mainNodeRef.current = node;
+    const observed = isFill ? node : null;
+    const current = mainOverflowRef.current;
+    if (current?.node !== observed) {
+      current?.stop();
+      mainOverflowRef.current = observed == null ? null : {
+        node: observed,
+        stop: observeMainOverflow(observed, setIsMainOverflowing)
+      };
+      if (observed == null) {
+        setIsMainOverflowing(false);
+      }
+    }
+    syncMainDelegation();
+  }, [isFill, syncMainDelegation]);
+  useEffect(() => {
+    isMainScrollRegionRef.current = isMainScrollRegion;
+    syncMainDelegation();
+  }, [isMainScrollRegion, syncMainDelegation]);
+
   // Nav style derived values
   const hasBanner = isRenderable(banner);
   const hasTopNav = isRenderable(topNav);
@@ -459,6 +541,9 @@ export function AppShell({
   // (`component:SideNav` FR6).
   const railRef = useRef(null);
   const mainRef = useRef(null);
+  // Main's node goes to the glide above and to the overflow observation
+  // that, under `fill`, makes main a keyboard stop.
+  const mainRefs = useMergedRefs(mainRef, setMainNode);
   const backdropRef = useRef(null);
   const contentLayout = useAnimatedLayout({
     containerRef: shellRef
@@ -617,17 +702,104 @@ export function AppShell({
   // Build main content
   // =========================================================================
   const shouldElevateWithCorner = isElevated && hasTopNav && showSideNavInline;
+  // While main is a keyboard stop, a Tab keydown anywhere in the document
+  // (capture, so Shift+Tab from the page start counts too) marks the next
+  // focus move, and so does the window's focus event for keyboard focus that
+  // enters the document from outside (Tab or Shift+Tab from the page
+  // embedding this one), where the browser's own `:focus-visible` then tells
+  // a key from a pointer. A mark counts only once its event's dispatch has
+  // finished uncancelled (`eventPhase === 0`): the browser's own focus move
+  // follows that dispatch in the same task, while a focus() a page's handler
+  // calls during it is programmatic and draws no ring (FR4). The marks expire
+  // on a zero-delay timer, so a cancelled Tab, a Tab out of the document or a
+  // window focus with nothing focused leaves nothing for a later focus().
+  useEffect(() => {
+    if (!isMainScrollRegion) {
+      return;
+    }
+    let tabKeydown = null;
+    let windowFocus = null;
+    let expiry;
+    const expireMarks = () => {
+      clearTimeout(expiry);
+      expiry = setTimeout(() => {
+        tabKeydown = null;
+        windowFocus = null;
+      }, 0);
+    };
+    const onKeyDown = event => {
+      tabKeydown = event.key === 'Tab' ? event : null;
+      windowFocus = null;
+      expireMarks();
+    };
+    const onPointerDown = () => {
+      tabKeydown = null;
+      windowFocus = null;
+    };
+    const onWindowFocus = event => {
+      windowFocus = event;
+      expireMarks();
+    };
+    const onFocusIn = event => {
+      // Still dispatching: this focus move is a handler's focus(), so it
+      // reads no mark and leaves the mark for the browser's own move.
+      const tabDone = tabKeydown != null && tabKeydown.eventPhase === 0;
+      const focusDone = windowFocus != null && windowFocus.eventPhase === 0;
+      const arrivedByTab = tabDone && tabKeydown?.defaultPrevented === false;
+      const enteredDocument = focusDone;
+      if (tabDone) {
+        tabKeydown = null;
+      }
+      if (focusDone) {
+        windowFocus = null;
+      }
+      const main = mainNodeRef.current;
+      const isMain = event.target != null && event.target === main;
+      if (isMainAwayRef.current) {
+        // Focus comes back after a window or tab switch (main keeps the ring
+        // it had), or lands elsewhere (main's ring is over).
+        isMainAwayRef.current = false;
+        if (isMain && !arrivedByTab) {
+          return;
+        }
+        if (!isMain) {
+          setIsTabFocus(false);
+          return;
+        }
+      }
+      if (isMain) {
+        setIsTabFocus(arrivedByTab || enteredDocument && main.matches(':focus-visible'));
+      }
+    };
+    document.addEventListener('keydown', onKeyDown, true);
+    document.addEventListener('pointerdown', onPointerDown, true);
+    document.addEventListener('focusin', onFocusIn, true);
+    window.addEventListener('focus', onWindowFocus);
+    return () => {
+      document.removeEventListener('keydown', onKeyDown, true);
+      document.removeEventListener('pointerdown', onPointerDown, true);
+      document.removeEventListener('focusin', onFocusIn, true);
+      window.removeEventListener('focus', onWindowFocus);
+      clearTimeout(expiry);
+    };
+  }, [isMainScrollRegion]);
+
+  // Tab focus on main draws the ring until main loses focus; programmatic
+  // focus never does (FR4).
+  const drawsMainFocusRing = isTabFocus;
   const mainInner = /*#__PURE__*/_jsx(LayoutContent, {
-    ref: mainRef,
+    ref: mainRefs,
     padding: contentPadding ?? 0,
     role: "main",
     id: MAIN_CONTENT_ID
     // Focusable skip-link target (WCAG 2.4.1) — without tabIndex, several
     // browsers won't move focus to the div when the skip link is activated.
+    // A keyboard stop only while it scrolls overflowing content.
     ,
-    tabIndex: -1,
+    tabIndex: isMainScrollRegion ? 0 : -1,
     isScrollable: isFill,
-    xstyle: [contentAreaStyle, styles.mainFocusTarget],
+    onBlur: handleMainBlur,
+    xstyle: [contentAreaStyle, drawsMainFocusRing && shouldElevateWithCorner && styles.mainElevatedCorner, drawsMainFocusRing ? [focusOutlineStyles.focusVisible, styles.mainScrollRegionInset] : styles.mainFocusTarget],
     children: children
   });
 

package/dist/AppShell/observeMainOverflow.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Calls `onChange` with whether `main`'s content overflows it on either axis:
+ * once with the first measurement, then whenever the answer changes. Signals
+ * coalesce into one measurement per frame. A hidden, disconnected or
+ * zero-size main is unknown rather than fitting: the last answer stands until
+ * a later signal measures it.
+ */
+export declare function observeMainOverflow(main: HTMLElement, onChange: (overflows: boolean) => void): () => void;
+//# sourceMappingURL=observeMainOverflow.d.ts.map

package/dist/AppShell/observeMainOverflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"observeMainOverflow.d.ts","sourceRoot":"","sources":["../../src/AppShell/observeMainOverflow.ts"],"names":[],"mappings":"AAyCA;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,WAAW,EACjB,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,GACrC,MAAM,IAAI,CA2FZ"}

package/dist/AppShell/observeMainOverflow.js

@@ -0,0 +1,125 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file observeMainOverflow.ts
+ * @input AppShell's main region under `height="fill"`: its own scroll
+ *   container, holding its content as direct children with no wrapper
+ * @output observeMainOverflow(main, onChange): reports whether main's content
+ *   overflows it on either axis, once at the start and on every change, and
+ *   returns the function that stops observing
+ * @position Internal to AppShell and never exported. AppShell makes main a
+ *   keyboard stop only while it overflows (`spec:AST-025` FR12,
+ *   `component:AppShell` FR4 and PR1). Main has no inner content box, so its
+ *   content grows inside it without resizing it: its direct children's sizes
+ *   are watched instead.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/AppShell/AppShell.tsx
+ * - /packages/core/src/AppShell/observeMainOverflow.test.ts
+ */
+import { getLogicalAxisMapping, measureLogicalScrollAxis } from "../hooks/scrollGeometry.js";
+import { observeMutations } from "../utils/sharedMutationObserver.js";
+import { observeResize } from "../utils/sharedResizeObserver.js";
+
+/**
+ * Main's content: layout attributes, text and children, all the way down.
+ * One shared observer serves every registration with these options.
+ */
+const CONTENT_MUTATIONS = {
+  attributes: true,
+  attributeFilter: ['class', 'dir', 'hidden', 'style'],
+  characterData: true,
+  childList: true,
+  subtree: true
+};
+
+/**
+ * Calls `onChange` with whether `main`'s content overflows it on either axis:
+ * once with the first measurement, then whenever the answer changes. Signals
+ * coalesce into one measurement per frame. A hidden, disconnected or
+ * zero-size main is unknown rather than fitting: the last answer stands until
+ * a later signal measures it.
+ */
+export function observeMainOverflow(main, onChange) {
+  let isActive = true;
+  let frame = null;
+  let overflows = null;
+  const measure = () => {
+    frame = null;
+    if (!isActive) {
+      return;
+    }
+    const computedStyle = getComputedStyle(main);
+    const mapping = getLogicalAxisMapping(computedStyle.writingMode, computedStyle.direction);
+    const inline = measureLogicalScrollAxis(main, 'inline', mapping);
+    const block = measureLogicalScrollAxis(main, 'block', mapping);
+    if (inline == null || block == null) {
+      return;
+    }
+    const next = inline.isScrollable || block.isScrollable;
+    if (next !== overflows) {
+      overflows = next;
+      onChange(next);
+    }
+  };
+  const scheduleMeasure = () => {
+    if (isActive && frame == null) {
+      frame = window.requestAnimationFrame(measure);
+    }
+  };
+
+  // Main keeps its size while its content grows; its children do not. Each
+  // direct child's size is watched, following the children as they change.
+  const childObservers = new Map();
+  const syncChildObservers = () => {
+    const children = new Set(Array.from(main.children));
+    for (const [child, stop] of childObservers) {
+      if (!children.has(child)) {
+        stop();
+        childObservers.delete(child);
+      }
+    }
+    for (const child of children) {
+      if (!childObservers.has(child)) {
+        childObservers.set(child, observeResize(child, scheduleMeasure));
+      }
+    }
+  };
+  const onContentChange = () => {
+    syncChildObservers();
+    scheduleMeasure();
+  };
+  measure();
+  syncChildObservers();
+  const stopObservingMain = observeResize(main, scheduleMeasure);
+  const stopObservingContent = observeMutations(main, CONTENT_MUTATIONS, onContentChange);
+  window.addEventListener('resize', scheduleMeasure);
+  window.visualViewport?.addEventListener('resize', scheduleMeasure);
+  main.addEventListener('load', scheduleMeasure, true);
+  main.addEventListener('transitionend', scheduleMeasure);
+  main.addEventListener('animationend', scheduleMeasure);
+  const fonts = document.fonts;
+  fonts?.addEventListener?.('loadingdone', scheduleMeasure);
+  void fonts?.ready.then(scheduleMeasure);
+  return () => {
+    isActive = false;
+    if (frame != null) {
+      window.cancelAnimationFrame(frame);
+      frame = null;
+    }
+    stopObservingMain();
+    stopObservingContent();
+    for (const stop of childObservers.values()) {
+      stop();
+    }
+    childObservers.clear();
+    window.removeEventListener('resize', scheduleMeasure);
+    window.visualViewport?.removeEventListener('resize', scheduleMeasure);
+    main.removeEventListener('load', scheduleMeasure, true);
+    main.removeEventListener('transitionend', scheduleMeasure);
+    main.removeEventListener('animationend', scheduleMeasure);
+    fonts?.removeEventListener?.('loadingdone', scheduleMeasure);
+  };
+}

package/dist/Badge/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAwJ7C;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,KAAK,CAAC,EACpB,OAAmB,EACnB,KAAK,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,+BA6CZ;yBAtDe,KAAK"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAY5C,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAwJ7C;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,KAAK,CAAC,EACpB,OAAmB,EACnB,KAAK,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,+BA6CZ;yBAtDe,KAAK"}

package/dist/Badge/Badge.js

@@ -19,6 +19,7 @@ import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
+import { isRenderable } from "../utils/isRenderable.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Base badge styles
@@ -187,7 +188,7 @@ export function Badge({
   // a client component, so it is tracked in #5585.
   const labelTitle = typeof label === 'number' ? String(label) : typeof label === 'string' && label.length > 0 ? label : undefined;
   // Whether the label renders anything, which is when the badge grows with it.
-  const hasLabel = label !== '' && label != null && typeof label !== 'boolean';
+  const hasLabel = isRenderable(label);
   return /*#__PURE__*/_jsxs("span", {
     ref: ref,
     ...mergeProps(themeProps('badge', {

package/dist/Banner/Banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAEH,OAAO,EAA0B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgB5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,+BAA+B,CAAC;AAErE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C,OAAO,KAAK,EAAC,eAAe,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAMjE;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;;;;;;OAkBG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA4QD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,aAAqB,EACrB,SAAS,EACT,YAAY,EACZ,UAAU,EACV,SAAkB,EAClB,SAAkB,EAClB,WAAkB,EAClB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,cAAc,EACd,oBAAoB,EACpB,GAAG,IAAI,EACR,EAAE,WAAW,sCAqQb;yBAzRe,MAAM"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAEH,OAAO,EAA0B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgB5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,+BAA+B,CAAC;AAErE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C,OAAO,KAAK,EAAC,eAAe,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAMjE;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;;;;;;OAkBG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAgRD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,aAAqB,EACrB,SAAS,EACT,YAAY,EACZ,UAAU,EACV,SAAkB,EAClB,SAAkB,EAClB,WAAkB,EAClB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,cAAc,EACd,oBAAoB,EACpB,GAAG,IAAI,EACR,EAAE,WAAW,sCAqQb;yBAzRe,MAAM"}

package/dist/Banner/Banner.js

@@ -471,20 +471,20 @@ export function Banner({
         children: [/*#__PURE__*/_jsx("div", {
           ...{
             0: {
-              className: "x1ghz6dp xjb2p0i xcr08ib x2mo6ok x1kq96og x1tgivj0 xj0a0fe"
+              className: "x1ghz6dp xjb2p0i xcr08ib x2mo6ok x1kq96og x1tgivj0 xj0a0fe x5ujdhh"
             },
             1: {
-              className: "x1ghz6dp xjb2p0i xcr08ib x2mo6ok x1kq96og xj0a0fe x1heor9g"
+              className: "x1ghz6dp xjb2p0i xcr08ib x2mo6ok x1kq96og xj0a0fe x5ujdhh x1heor9g"
             }
           }[!!hasStatusStyle(status) << 0],
           children: title
         }), isRenderable(description) && /*#__PURE__*/_jsx("div", {
           ...mergeProps(themeProps('banner-description'), {
             0: {
-              className: "x1ghz6dp xjb2p0i x141an7d x1sodnla x1ltkj2j xv1l7n4 xj0a0fe"
+              className: "x1ghz6dp xjb2p0i x141an7d x1sodnla x1ltkj2j xv1l7n4 xj0a0fe x5ujdhh"
             },
             1: {
-              className: "x1ghz6dp xjb2p0i x141an7d x1sodnla x1ltkj2j xj0a0fe x1heor9g"
+              className: "x1ghz6dp xjb2p0i x141an7d x1sodnla x1ltkj2j xj0a0fe x5ujdhh x1heor9g"
             }
           }[!!hasStatusStyle(status) << 0]),
           children: description

package/dist/BottomSheet/BottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyEG;AAEH,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAsDhD,YAAY,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAChF,OAAO,KAAK,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAsJhF,UAAU,sBAAuB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,qDAAqD;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB,wGAAwG;IACxG,MAAM,CAAC,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAE7C;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAEjD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,UAAU,0BAA2B,SAAQ,sBAAsB;IACjE,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED,MAAM,MAAM,gBAAgB,GAC1B,0BAA0B,GAAG,wBAAwB,CAAC;AAm0BxD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BA6BlD;yBA7Be,WAAW"}
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyEG;AAEH,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAuDhD,YAAY,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAChF,OAAO,KAAK,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AA6JhF,UAAU,sBAAuB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,qDAAqD;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB,wGAAwG;IACxG,MAAM,CAAC,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAE7C;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAEjD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,UAAU,0BAA2B,SAAQ,sBAAsB;IACjE,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED,MAAM,MAAM,gBAAgB,GAC1B,0BAA0B,GAAG,wBAAwB,CAAC;AAg2BxD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BA6BlD;yBA7Be,WAAW"}

package/dist/BottomSheet/BottomSheet.js

@@ -77,11 +77,14 @@
  * - /packages/cli/assets/templates/blocks/components/BottomSheet/BottomSheetShowcase.tsx
  */
 import { use, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useIsHydrating } from "../hooks/useIsHydrating.js";
+import { useSettledOpen } from "../hooks/useSettledOpen.js";
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, durationVars, easeVars, spacingVars } from "../theme/tokens.stylex.js";
 import { useDevWarning } from "../hooks/useDevWarning.js";
 import { useScrollLock } from "../hooks/useScrollLock.js";
+import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { mergeProps } from "../utils/mergeProps.js";
 import { LayerDepthProvider } from "../Layer/LayerDepthContext.js";
 import { ModalAnnounceProvider } from "../hooks/ModalAnnounceProvider.js";
@@ -150,6 +153,10 @@ const styles = {
     k4oj2o: "x15l12jy",
     $$css: true
   },
+  scrimSettled: {
+    k9an0g: "x108qnu8",
+    $$css: true
+  },
   scrimClosing: {
     kb4ib: "x1cz9k3x",
     $$css: true
@@ -271,7 +278,20 @@ function StandaloneBottomSheet({
   // state stays the consumer's; nothing here writes it.
   const host = use(BottomSheetHostContext);
   const isHostOpen = host?.isOpen ?? true;
-  const isOpen = isOpenProp && isHostOpen;
+  // A sheet open on the server renders closed until hydration, and opens in
+  // the render after it, the first one that can enter its native host: a
+  // <dialog> painted open with aria-modal before it is modal claims a state it
+  // does not have (FR17).
+  const isHydrating = useIsHydrating();
+  const isOpen = isOpenProp && isHostOpen && !isHydrating;
+  // A sheet open on the server was present on page load, so it opens settled,
+  // with no rise or fade-in; its later opens and closes animate as usual
+  // (spec:AST-013 FR13). It latches on its own request, not its host's state:
+  // a host sheet hydrating reads as closed to the sheets inside it.
+  // The latch is released when the settled entry's transition ends, so a
+  // drag's settle later in the same open glides as usual.
+  const [settledOpen, releaseSettledOpen] = useSettledOpen(isOpenProp, isOpen, false);
+  const isEntrySettled = settledOpen && isOpen;
   // Presentation outlives the controlled prop: a closing sheet stays mounted
   // and in its native host through its exit, and only its motion completion
   // (or a replace finishing) clears it. The open flip is derived during
@@ -523,7 +543,10 @@ function StandaloneBottomSheet({
     }
     triggerRef.current = null;
   }, [finalFocusRef, hasScrim, isOpen]);
-  useInteractionModalityTracking();
+  const {
+    ref: modalityRef
+  } = useInteractionModalityTracking();
+  const dialogComposedRef = useMergedRefs(dialogRef, modalityRef);
   useScrollLock(shouldPresent && hasScrim);
   useDevWarning('BottomSheet', 'requires a non-empty `label` for an accessible name; the open sheet ' + 'has no built-in heading to derive one from.', isOpen && !label);
 
@@ -585,8 +608,8 @@ function StandaloneBottomSheet({
     // The dialog is the panel's positioner, so the stack's recede
     // transforms the dialog: panel, grabber and all shrink and lift as
     // one. The backdrop is not a descendant and stays put.
-    ...stackPositionerStyles(stackView), hasScrim && styles.scrim, hasScrim && isExiting && styles.scrimClosing, !hasScrim && styles.dialogNonModal),
-    ref: dialogRef
+    ...stackPositionerStyles(stackView), hasScrim && styles.scrim, hasScrim && isEntrySettled && styles.scrimSettled, hasScrim && isExiting && styles.scrimClosing, !hasScrim && styles.dialogNonModal),
+    ref: dialogComposedRef
     // A non-modal sheet is hosted in the top layer as a manual popover
     // (no light dismiss, no backdrop), so sheets order by presentation
     // without a page-level z-index. Below the Popover API floor the
@@ -607,6 +630,8 @@ function StandaloneBottomSheet({
       ...props,
       ref: ref,
       state: panelState,
+      isEntrySettled: isEntrySettled,
+      onEntrySettled: releaseSettledOpen,
       isOpenRequested: isOpen,
       height: height,
       label: label,
@@ -668,7 +693,9 @@ function SwitcherBottomSheetItem({
     dialogProps,
     onDialogCancel,
     onDialogClick,
-    onDialogKeyDown
+    onDialogKeyDown,
+    settledSheet,
+    releaseSettledSheet
   } = switcher;
   const hasValidSheetId = typeof sheetId === 'string' && sheetId.length > 0;
   const phase = hasValidSheetId ? getSheetPhase(sheetId) : 'hidden';
@@ -677,6 +704,8 @@ function SwitcherBottomSheetItem({
   const isInteractive = phase === 'active' || phase === 'entering';
   const isInactive = phase === 'covered' || phase === 'aligning' || phase === 'fading' || phase === 'exiting';
   const isPresented = phase !== 'hidden';
+  // The step open on the server opens settled (spec:AST-013 FR13).
+  const isEntrySettled = hasValidSheetId && isPresented && settledSheet === sheetId;
   const isTopSheet = phase === 'active' || phase === 'entering';
   const ownsScrim = hasValidSheetId && isScrimOwner(sheetId);
   // The flow is one level of the bottom-sheet stack; a sheet outside the flow
@@ -829,7 +858,7 @@ function SwitcherBottomSheetItem({
     'data-testid': switcherTestId,
     ...switcherDialogProps
   } = dialogProps;
-  const dialogPresentationProps = mergeProps(stylex.props(styles.dialog, isPresented && styles.dialogOpen, hasScrim && styles.scrim, hasScrim && ownsScrim && isFlowClosing && styles.scrimClosing, !hasScrim && styles.dialogNonModalItem, !hasScrim && isTopSheet && styles.dialogNonModalItemTop, switcherXstyle), switcherClassName, switcherStyle);
+  const dialogPresentationProps = mergeProps(stylex.props(styles.dialog, isPresented && styles.dialogOpen, hasScrim && styles.scrim, hasScrim && isEntrySettled && styles.scrimSettled, hasScrim && ownsScrim && isFlowClosing && styles.scrimClosing, !hasScrim && styles.dialogNonModalItem, !hasScrim && isTopSheet && styles.dialogNonModalItemTop, switcherXstyle), switcherClassName, switcherStyle);
   return /*#__PURE__*/_jsxs("dialog", {
     ...switcherDialogProps,
     ...dialogPresentationProps,
@@ -856,6 +885,8 @@ function SwitcherBottomSheetItem({
         ...props,
         ref: ref,
         state: panelState,
+        isEntrySettled: isEntrySettled,
+        onEntrySettled: releaseSettledSheet,
         isOpenRequested: hasValidSheetId && activeSheet === sheetId,
         height: height,
         label: label,

package/dist/BottomSheet/BottomSheetPanel.d.ts

@@ -47,6 +47,16 @@ interface BottomSheetPanelProps extends BaseProps<HTMLDivElement> {
     /** Ref forwarded to the visual sheet panel. */
     ref?: React.Ref<HTMLDivElement>;
     state: BottomSheetPanelState;
+    /**
+     * Whether the sheet was open on page load: it then opens where it rests,
+     * with no entry motion (spec:AST-013 FR13).
+     */
+    isEntrySettled?: boolean;
+    /**
+     * Called when the settled entry's transition ends, so the host can release
+     * it and later motion in the same open (a drag's settle) animates as usual.
+     */
+    onEntrySettled?: () => void;
     /**
      * The host's controlled open state — false as soon as the host has taken
      * a close, true while it is open or has refused one — distinct from
@@ -74,7 +84,7 @@ interface BottomSheetPanelProps extends BaseProps<HTMLDivElement> {
     onMotionComplete?: (motion: BottomSheetPanelMotion) => void;
 }
 /** Internal visual and gesture surface shared by every BottomSheet host. */
-export declare function BottomSheetPanel({ ref, state, isOpenRequested, height, label, children, padding, snapPoints, className, style, tabIndex, xstyle, isSwipeDismissAllowed, isPageScrollLocked, onDismiss, onScrimOpacity, onElementChange, onMotionStart, onMotionComplete, ...props }: BottomSheetPanelProps): import("react").JSX.Element;
+export declare function BottomSheetPanel({ ref, state, isOpenRequested, height, label, children, padding, snapPoints, className, style, tabIndex, xstyle, isEntrySettled, onEntrySettled, onTransitionEnd, isSwipeDismissAllowed, isPageScrollLocked, onDismiss, onScrimOpacity, onElementChange, onMotionStart, onMotionComplete, ...props }: BottomSheetPanelProps): import("react").JSX.Element;
 export declare namespace BottomSheetPanel {
     var displayName: string;
 }

package/dist/BottomSheet/BottomSheetPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetPanel.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA+B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,eAAe,CAAC;AAIvB,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAC5D,YAAY,EAAC,oBAAoB,EAAC,CAAC;AA+CnC,eAAO,MAAM,2BAA2B,2DACkB,CAAC;AAiN3D,MAAM,MAAM,sBAAsB,GAChC,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEjD,MAAM,MAAM,qBAAqB,GAC7B;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GAChB;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAC,GACjC;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC1C,eAAe,EAAE,MAAM,CAAC;CACzB,GACD;IAAC,IAAI,EAAE,SAAS,CAAA;CAAC,CAAC;AAEtB,UAAU,qBAAsB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,KAAK,EAAE,qBAAqB,CAAC;IAC7B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,UAAU,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACjD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3D,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACzD,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;CAC7D;AA4HD,4EAA4E;AAC5E,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,eAAe,EACf,MAAM,EACN,KAAK,EACL,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,qBAA4B,EAC5B,kBAA0B,EAC1B,SAAS,EACT,cAAc,EACd,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAyXvB;yBA9Ye,gBAAgB"}
+{"version":3,"file":"BottomSheetPanel.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA+B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,eAAe,CAAC;AAQvB,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAC5D,YAAY,EAAC,oBAAoB,EAAC,CAAC;AA+CnC,eAAO,MAAM,2BAA2B,2DACkB,CAAC;AAsN3D,MAAM,MAAM,sBAAsB,GAChC,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEjD,MAAM,MAAM,qBAAqB,GAC7B;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GAChB;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAC,GACjC;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC1C,eAAe,EAAE,MAAM,CAAC;CACzB,GACD;IAAC,IAAI,EAAE,SAAS,CAAA;CAAC,CAAC;AAEtB,UAAU,qBAAsB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,KAAK,EAAE,qBAAqB,CAAC;IAC7B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,UAAU,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACjD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3D,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACzD,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;CAC7D;AA4HD,4EAA4E;AAC5E,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,eAAe,EACf,MAAM,EACN,KAAK,EACL,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,cAAsB,EACtB,cAAc,EACd,eAAe,EACf,qBAA4B,EAC5B,kBAA0B,EAC1B,SAAS,EACT,cAAc,EACd,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,qBAAqB,+BA2ZvB;yBAnbe,gBAAgB"}