@astryxdesign/lab 0.2.0-canary.fce8b64 → 0.3.0-canary.041a0ef

package/README.md

@@ -20,6 +20,12 @@ See the **[Component Lifecycle](https://github.com/facebook/astryx/wiki/Componen
 
 **Core:** Full keyboard/a11y, hover guards, theming story, status states, spec compliance, vibe tested. Shipped to consumers on `latest`.
 
+## Promotion gate: accessibility
+
+The [Accessibility Checklist](https://github.com/facebook/astryx/wiki/Accessibility-Checklist) is a hard requirement for graduating to core — every item, verified in the promotion PR, alongside the hardening bar linked above.
+
+Lab components get the same scan coverage as core (the `pr-a11y` axe audit and the weekly full scan run against lab too), but a11y findings on a lab component do not block lab merges — they block **promotion**. Iterate freely in lab; clear the checklist to graduate.
+
 ## Usage
 
 Inside the monorepo (storybook/sandbox), imports resolve via pnpm workspaces:

package/dist/BottomSheet/BottomSheet.d.ts

@@ -5,7 +5,7 @@
  * @position Lab implementation; consumed by index.ts, tested by BottomSheet.test.tsx, demonstrated in Storybook
  *
  * A mobile touch surface that rises from the bottom edge: grab handle, snap
- * points, and swipe-to-dismiss. It owns a native modal `<dialog>` directly and
+ * points, and swipe-to-dismiss. It owns a native `<dialog>` directly and
  * composes core primitives (`useScrollLock`, `<dialog>.showModal()` for the
  * top layer + focus trap, a `::backdrop` scrim) rather than delegating to a
  * heavier overlay component — so it controls its own sizing and can render a
@@ -13,6 +13,12 @@
  * That shell is what lets the sheet translate freely (including a little past
  * fully-open) without clipping against a fixed dialog edge.
  *
+ * `hasScrim` picks the presentation: `true` (default) uses `showModal()` (top
+ * layer, focus trap, scrim, scroll lock, background inert); `false` uses
+ * `show()` for a non-modal sheet with no scrim, leaving the page behind
+ * interactive and scrollable (the transparent shell is pointer-events:none so
+ * taps pass through).
+ *
  * The drag/snap/dismiss machinery lives in `useSheetGestures`; the offset
  * geometry lives in the pure, tested `snapOffsets` module. Both are internal
  * to BottomSheet and not exported from the lab entry point.
@@ -71,16 +77,32 @@ export interface BottomSheetProps extends BaseProps<HTMLDialogElement> {
      * @default 'capped'
      */
     height?: BottomSheetHeight | number | string;
+    /**
+     * Whether to render a modal scrim behind the sheet.
+     * - `true` (default) — `showModal()`: renders in the top layer with a focus
+     *   trap, a `::backdrop` scrim, body scroll lock, and tap-scrim-to-dismiss.
+     *   The background is inert. Use for focused tasks (filters, forms).
+     * - `false` — `show()`: a non-modal sheet with **no scrim**. The page behind
+     *   stays interactive and scrollable (like Material's *standard* bottom
+     *   sheet, or an iOS undimmed detent). Escape still closes while focus is
+     *   inside the sheet, and drag/flick-to-dismiss still work. Use for a peek
+     *   surface that coexists with the page (e.g. a panel over a live map).
+     * @default true
+     */
+    hasScrim?: boolean;
     /** Test ID for the root element. */
     'data-testid'?: string;
 }
 /**
  * A mobile touch sheet that rises from the bottom edge, with a grab handle,
- * drag-to-resize snap points, and swipe-to-dismiss. It owns a native modal
- * `<dialog>` (top layer, focus trap, `::backdrop` scrim) and locks body scroll
- * while open; a slow drag settles to the nearest snap point, a flick down
- * dismisses, and Escape closes — so the swipe always has a keyboard
- * equivalent.
+ * drag-to-resize snap points, and swipe-to-dismiss. It owns a native
+ * `<dialog>` and, by default (`hasScrim`), enters the top layer with a focus
+ * trap + `::backdrop` scrim and locks body scroll; a slow drag settles to the
+ * nearest snap point, a flick down dismisses, and Escape closes — so the swipe
+ * always has a keyboard equivalent.
+ *
+ * With `hasScrim={false}` it opens non-modally (`show()`, no scrim), leaving
+ * the page behind interactive and scrollable.
  *
  * @example
  * ```
@@ -93,7 +115,7 @@ export interface BottomSheetProps extends BaseProps<HTMLDialogElement> {
  * </BottomSheet>
  * ```
  */
-export declare function BottomSheet({ ref, isOpen, onOpenChange, label, children, height, xstyle, ...props }: BottomSheetProps): import("react").JSX.Element;
+export declare function BottomSheet({ ref, isOpen, onOpenChange, label, children, height, hasScrim, xstyle, ...props }: BottomSheetProps): import("react").JSX.Element;
 export declare namespace BottomSheet {
     var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAqBlD;;;;;;GAMG;AACH,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAyJ5D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACpE,wDAAwD;IACxD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC,8EAA8E;IAC9E,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAE7C,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,MAAiB,EACjB,MAAM,EACN,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAyKlB;yBAlLe,WAAW"}
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AA2BlD;;;;;;GAMG;AACH,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAiL5D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACpE,wDAAwD;IACxD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC,8EAA8E;IAC9E,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAE7C;;;;;;;;;;;OAWG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,MAAiB,EACjB,QAAe,EACf,MAAM,EACN,GAAG,KAAK,EACT,EAAE,gBAAgB,+BA0LlB;yBApMe,WAAW"}

package/dist/BottomSheet/BottomSheet.js

@@ -9,7 +9,7 @@
  * @position Lab implementation; consumed by index.ts, tested by BottomSheet.test.tsx, demonstrated in Storybook
  *
  * A mobile touch surface that rises from the bottom edge: grab handle, snap
- * points, and swipe-to-dismiss. It owns a native modal `<dialog>` directly and
+ * points, and swipe-to-dismiss. It owns a native `<dialog>` directly and
  * composes core primitives (`useScrollLock`, `<dialog>.showModal()` for the
  * top layer + focus trap, a `::backdrop` scrim) rather than delegating to a
  * heavier overlay component — so it controls its own sizing and can render a
@@ -17,6 +17,12 @@
  * That shell is what lets the sheet translate freely (including a little past
  * fully-open) without clipping against a fixed dialog edge.
  *
+ * `hasScrim` picks the presentation: `true` (default) uses `showModal()` (top
+ * layer, focus trap, scrim, scroll lock, background inert); `false` uses
+ * `show()` for a non-modal sheet with no scrim, leaving the page behind
+ * interactive and scrollable (the transparent shell is pointer-events:none so
+ * taps pass through).
+ *
  * The drag/snap/dismiss machinery lives in `useSheetGestures`; the offset
  * geometry lives in the pure, tested `snapOffsets` module. Both are internal
  * to BottomSheet and not exported from the lab entry point.
@@ -35,12 +41,18 @@ import { useDevWarning, useScrollLock } from '@astryxdesign/core/hooks';
 import { mergeProps, mergeRefs, themeProps } from '@astryxdesign/core/utils';
 import { useSheetGestures } from "./useSheetGestures.js";
 
+// A non-modal sheet (hasScrim={false}) uses show() instead of showModal(), so
+// it isn't in the native top layer and needs an explicit z-index to sit above
+// page content. No z-index token exists in the theme; 1000 matches the Drawer
+// / app-level overlay convention.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const NON_MODAL_Z = 1000;
+
 // Detent fractions of the viewport, ascending (peek / mid / full). Detents
 // that land within DETENT_DEDUP_PX of each other (e.g. a hug height next to a
 // snap) are de-duped in the gesture hook, and any taller than the sheet are
 // dropped, so a full set is safe to offer. The shortest is a glance "peek";
 // the scrim hides as the sheet collapses onto it (see onScrimOpacity).
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SNAP_FRACTIONS = [0.14, 0.5, 0.92];
 
 /**
@@ -116,11 +128,14 @@ const styles = {
 };
 /**
  * A mobile touch sheet that rises from the bottom edge, with a grab handle,
- * drag-to-resize snap points, and swipe-to-dismiss. It owns a native modal
- * `<dialog>` (top layer, focus trap, `::backdrop` scrim) and locks body scroll
- * while open; a slow drag settles to the nearest snap point, a flick down
- * dismisses, and Escape closes — so the swipe always has a keyboard
- * equivalent.
+ * drag-to-resize snap points, and swipe-to-dismiss. It owns a native
+ * `<dialog>` and, by default (`hasScrim`), enters the top layer with a focus
+ * trap + `::backdrop` scrim and locks body scroll; a slow drag settles to the
+ * nearest snap point, a flick down dismisses, and Escape closes — so the swipe
+ * always has a keyboard equivalent.
+ *
+ * With `hasScrim={false}` it opens non-modally (`show()`, no scrim), leaving
+ * the page behind interactive and scrollable.
  *
  * @example
  * ```
@@ -140,6 +155,7 @@ export function BottomSheet({
   label,
   children,
   height = 'capped',
+  hasScrim = true,
   xstyle,
   ...props
 }) {
@@ -149,7 +165,7 @@ export function BottomSheet({
   const close = useCallback(() => onOpenChange(false), [onOpenChange]);
 
   // Set imperatively (not via state) so a 60fps drag doesn't re-render. The
-  // hook reports the scrim opacity for the current detent (hidden at the peek).
+  // hook reports the scrim opacity for the current detent (a faint floor at the peek).
   const handleScrimOpacity = useCallback(opacity => {
     dialogRef.current?.style.setProperty('--_sheet-scrim-opacity', String(opacity));
   }, []);
@@ -165,24 +181,32 @@ export function BottomSheet({
     onScrimOpacity: handleScrimOpacity
   });
 
-  // showModal() enters the top layer with a focus trap + ::backdrop; on close
-  // we animate out (below) then restore focus to the opener.
+  // Modal: showModal() enters the top layer with a focus trap + ::backdrop and
+  // we restore focus to the opener on close. Standard: show() is non-modal, so
+  // we neither trap nor steal focus (the background stays interactive) — we
+  // only honor an explicit data-autofocus.
   useEffect(() => {
     const dialog = dialogRef.current;
     if (!dialog) {
       return;
     }
     if (isOpen) {
-      triggerRef.current = document.activeElement;
       dialog.style.setProperty('--_sheet-scrim-opacity', '1');
       if (!dialog.open) {
-        dialog.showModal();
-        // Override showModal()'s default (first tabbable) to land on the panel,
-        // so AT reads from the label — unless a descendant sets data-autofocus.
+        // Only remember/restore focus for modal sheets; a non-modal sheet must
+        // not yank focus back from whatever the user does in the live page.
+        if (hasScrim) {
+          triggerRef.current = document.activeElement;
+          dialog.showModal();
+        } else {
+          dialog.show();
+        }
+        // Land on the panel (so AT reads from the label) for modal sheets;
+        // otherwise only honor a descendant data-autofocus.
         const autofocus = dialog.querySelector('[data-autofocus]');
         if (autofocus) {
           autofocus.focus();
-        } else {
+        } else if (hasScrim) {
           sheetNodeRef.current?.focus();
         }
       }
@@ -219,8 +243,11 @@ export function BottomSheet({
         sheet?.removeEventListener('transitionend', onEnd);
       };
     }
-  }, [isOpen]);
-  useScrollLock(isOpen);
+  }, [isOpen, hasScrim]);
+
+  // Only a modal sheet locks body scroll; a non-modal sheet leaves the page
+  // scrollable behind it.
+  useScrollLock(isOpen && hasScrim);
 
   // Enforce an accessible name: label is required by types, but a JS caller
   // can still pass an empty string, leaving the sheet unnamed.
@@ -230,33 +257,55 @@ export function BottomSheet({
     close();
   }, [close]);
   // Explicit Escape handler in addition to the native `cancel` event, for
-  // environments that don't synthesize `cancel`.
+  // environments that don't synthesize `cancel` (and the show() path, which
+  // never fires `cancel`). Only fires when focus is inside the sheet.
   const handleKeyDown = useCallback(event => {
     if (event.key === 'Escape') {
       event.preventDefault();
       close();
     }
   }, [close]);
+  // Tap-outside-to-dismiss only applies to modal sheets (the scrim). A non-modal
+  // sheet has no scrim and its transparent shell is pointer-events:none, so taps
+  // pass through to the page rather than dismissing.
   const handleClick = useCallback(event => {
-    if (event.target === event.currentTarget) {
+    if (hasScrim && event.target === event.currentTarget) {
       close();
     }
-  }, [close]);
+  }, [close, hasScrim]);
   const isNamed = typeof height === 'string' && height in HEIGHT_BUDGETS;
   const budget = isNamed ? HEIGHT_BUDGETS[height] : typeof height === 'number' ? `${height}px` : height;
   const isHug = height === 'hug';
   return /*#__PURE__*/_jsx("dialog", {
     ...{
       0: {
-        className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz xnixb3f x1abwkk1 xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w"
+        className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz"
+      },
+      4: {
+        className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq"
+      },
+      2: {
+        className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w"
+      },
+      6: {
+        className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w"
       },
       1: {
-        className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq xnixb3f x1abwkk1 xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w"
+        className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz x47corl xfo81ep xh8yej3 x5yr21d"
+      },
+      5: {
+        className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq x47corl xfo81ep xh8yej3 x5yr21d"
+      },
+      3: {
+        className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w x47corl xfo81ep xh8yej3 x5yr21d"
+      },
+      7: {
+        className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w x47corl xfo81ep xh8yej3 x5yr21d"
       }
-    }[!!isOpen << 0],
+    }[!!isOpen << 2 | !!hasScrim << 1 | !!!hasScrim << 0],
     ref: mergeRefs(ref, dialogRef),
     "aria-label": label,
-    "aria-modal": "true",
+    "aria-modal": hasScrim ? 'true' : undefined,
     onCancel: handleCancel,
     onClick: handleClick,
     onKeyDown: handleKeyDown,

package/dist/BottomSheet/snapOffsets.d.ts

@@ -36,12 +36,20 @@ export declare function computeDetentOffsets(sheetHeight: number, detentHeights:
 /** Nearest value in `offsets` to `value` (offsets must be non-empty). */
 export declare function nearestOffset(value: number, offsets: readonly number[]): number;
 /**
- * Scrim opacity (1 = fully visible, 0 = hidden) for a drag/settle `offset`.
+ * Minimum scrim opacity at the peek detent. The scrim thins to a glance state
+ * but never fully vanishes, because a modal sheet keeps the background inert —
+ * a fully clear backdrop would read as "interactive" when it isn't. (For a
+ * genuinely interactive, undimmed peek, use a non-modal sheet, `hasScrim=false`.)
+ */
+export declare const MIN_PEEK_SCRIM_OPACITY = 0.3;
+/**
+ * Scrim opacity (1 = fully visible) for a drag/settle `offset`.
  * The scrim stays full while the sheet is at or above its second-shortest
- * detent, then fades to 0 as it collapses onto the shortest ("peek") detent —
- * a glance state that reveals the content behind — and stays hidden below it.
- * A single-detent sheet has no peek, so it instead fades across the dismiss
- * overshoot toward `dismissOffset`.
+ * detent, then fades as it collapses onto the shortest ("peek") detent — a
+ * glance state that thins the backdrop to `MIN_PEEK_SCRIM_OPACITY` (not fully
+ * gone, since the sheet is still modal) and holds there below it.
+ * A single-detent sheet has no peek, so it instead fades all the way to 0
+ * across the dismiss overshoot toward `dismissOffset` (the sheet is leaving).
  */
 export declare function scrimOpacityForOffset(offset: number, offsets: readonly number[], dismissOffset: number): number;
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"snapOffsets.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/snapOffsets.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AAEH;;;;;GAKG;AACH,eAAO,MAAM,eAAe,KAAK,CAAC;AAElC,4EAA4E;AAC5E,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,SAAS,MAAM,EAAE,EAC5B,UAAU,EAAE,MAAM,GACjB,MAAM,EAAE,CAEV;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAClC,WAAW,EAAE,MAAM,EACnB,aAAa,EAAE,SAAS,MAAM,EAAE,EAChC,OAAO,GAAE,MAAwB,GAChC,MAAM,EAAE,CAcV;AAED,yEAAyE;AACzE,wBAAgB,aAAa,CAC3B,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,SAAS,MAAM,EAAE,GACzB,MAAM,CAKR;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,SAAS,MAAM,EAAE,EAC1B,aAAa,EAAE,MAAM,GACpB,MAAM,CAWR;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,SAAS,MAAM,EAAE,EAC1B,GAAG,EAAE,MAAM,EACX,UAAU,EAAE,MAAM,GACjB,MAAM,CAcR"}
+{"version":3,"file":"snapOffsets.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/snapOffsets.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AAEH;;;;;GAKG;AACH,eAAO,MAAM,eAAe,KAAK,CAAC;AAElC,4EAA4E;AAC5E,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,SAAS,MAAM,EAAE,EAC5B,UAAU,EAAE,MAAM,GACjB,MAAM,EAAE,CAEV;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAClC,WAAW,EAAE,MAAM,EACnB,aAAa,EAAE,SAAS,MAAM,EAAE,EAChC,OAAO,GAAE,MAAwB,GAChC,MAAM,EAAE,CAcV;AAED,yEAAyE;AACzE,wBAAgB,aAAa,CAC3B,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,SAAS,MAAM,EAAE,GACzB,MAAM,CAKR;AAED;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,SAAS,MAAM,EAAE,EAC1B,aAAa,EAAE,MAAM,GACpB,MAAM,CAeR;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,SAAS,MAAM,EAAE,EAC1B,GAAG,EAAE,MAAM,EACX,UAAU,EAAE,MAAM,GACjB,MAAM,CAcR"}

package/dist/BottomSheet/snapOffsets.js

@@ -58,24 +58,37 @@ export function nearestOffset(value, offsets) {
 }
 
 /**
- * Scrim opacity (1 = fully visible, 0 = hidden) for a drag/settle `offset`.
+ * Minimum scrim opacity at the peek detent. The scrim thins to a glance state
+ * but never fully vanishes, because a modal sheet keeps the background inert —
+ * a fully clear backdrop would read as "interactive" when it isn't. (For a
+ * genuinely interactive, undimmed peek, use a non-modal sheet, `hasScrim=false`.)
+ */
+export const MIN_PEEK_SCRIM_OPACITY = 0.3;
+
+/**
+ * Scrim opacity (1 = fully visible) for a drag/settle `offset`.
  * The scrim stays full while the sheet is at or above its second-shortest
- * detent, then fades to 0 as it collapses onto the shortest ("peek") detent —
- * a glance state that reveals the content behind — and stays hidden below it.
- * A single-detent sheet has no peek, so it instead fades across the dismiss
- * overshoot toward `dismissOffset`.
+ * detent, then fades as it collapses onto the shortest ("peek") detent — a
+ * glance state that thins the backdrop to `MIN_PEEK_SCRIM_OPACITY` (not fully
+ * gone, since the sheet is still modal) and holds there below it.
+ * A single-detent sheet has no peek, so it instead fades all the way to 0
+ * across the dismiss overshoot toward `dismissOffset` (the sheet is leaving).
  */
 export function scrimOpacityForOffset(offset, offsets, dismissOffset) {
   const shortest = offsets[offsets.length - 1];
-  const fadeStart = offsets.length >= 2 ? offsets[offsets.length - 2] : 0;
-  const fadeEnd = offsets.length >= 2 ? shortest : dismissOffset;
+  const hasPeek = offsets.length >= 2;
+  const fadeStart = hasPeek ? offsets[offsets.length - 2] : 0;
+  const fadeEnd = hasPeek ? shortest : dismissOffset;
+  // Peek is a resting state on a still-modal sheet, so keep a floor; the
+  // dismiss overshoot is a sheet on its way out, so let it clear completely.
+  const floor = hasPeek ? MIN_PEEK_SCRIM_OPACITY : 0;
   if (offset <= fadeStart) {
     return 1;
   }
   if (offset >= fadeEnd) {
-    return 0;
+    return floor;
   }
-  return 1 - (offset - fadeStart) / (fadeEnd - fadeStart);
+  return 1 - (1 - floor) * ((offset - fadeStart) / (fadeEnd - fadeStart));
 }
 
 /**

package/dist/BottomSheet/useSheetGestures.d.ts

@@ -43,7 +43,7 @@ export interface UseSheetGesturesOptions {
      * Called with the scrim opacity the sheet should show (1 = fully visible,
      * 0 = hidden) as the drag moves and on settle. Full while the sheet is at
      * or above its mid detent, fading to 0 as it collapses onto the shortest
-     * "peek" detent — so a glance-height sheet reveals the content behind — and
+     * "peek" detent — thinning to a faint glance state without fully clearing — and
      * on the dismiss overshoot. Lets the owner mirror it onto the scrim.
      */
     onScrimOpacity?: (opacity: number) => void;

package/dist/BottomSheet/useSheetGestures.js

@@ -213,7 +213,7 @@ export function useSheetGestures({
     const target = resolveSettleOffset(offset, offsets, dir, baseOffset);
     setSettledOffset(target);
     onSnapRef.current?.(height - target);
-    // Keep the scrim in sync with the resting detent (hidden at the peek).
+    // Keep the scrim in sync with the resting detent (faint floor at the peek).
     const dismissOffset = maxOffset + shortestDetentHeight * DISMISS_OVERSHOOT_RATIO;
     onScrimOpacityRef.current?.(scrimOpacityForOffset(target, offsets, dismissOffset));
     // Haptic "tick" when landing on a different detent (where supported).

package/dist/ChatReasoning/ChatReasoning.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatReasoning.d.ts","sourceRoot":"","sources":["../../src/ChatReasoning/ChatReasoning.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAwB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAkBlD,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,mFAAmF;IACnF,QAAQ,EAAE,SAAS,CAAC;IACpB,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAkKD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BA0FtD;yBA1Fe,aAAa"}
+{"version":3,"file":"ChatReasoning.d.ts","sourceRoot":"","sources":["../../src/ChatReasoning/ChatReasoning.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAA+B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACnE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAkBlD,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,mFAAmF;IACnF,QAAQ,EAAE,SAAS,CAAC;IACpB,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAkKD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BAkGtD;yBAlGe,aAAa"}

package/dist/ChatReasoning/ChatReasoning.js

@@ -14,7 +14,7 @@
  * Design: extremely compact by default. One line with ellipsis overflow.
  * Expandable on click.
  */
-import { useState, useCallback } from 'react';
+import { useCallback, useId, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import '@astryxdesign/core/theme/tokens.stylex';
 import { colorVars, spacingVars, typeScaleVars, typographyVars, fontWeightVars, durationVars, easeVars } from '@astryxdesign/core/theme/tokens.stylex';
@@ -127,6 +127,7 @@ export function ChatReasoning(props) {
   const [internalExpanded, setInternalExpanded] = useState(defaultIsExpanded);
   const isControlled = controlledExpanded !== undefined;
   const isExpanded = isControlled ? controlledExpanded : internalExpanded;
+  const contentId = useId();
   const toggle = useCallback(() => {
     const next = !isExpanded;
     if (!isControlled) {
@@ -145,6 +146,7 @@ export function ChatReasoning(props) {
       role: "button",
       tabIndex: 0,
       "aria-expanded": isExpanded,
+      "aria-controls": contentId,
       onClick: toggle,
       onKeyDown: e => {
         if (e.key === 'Enter' || e.key === ' ') {
@@ -211,6 +213,13 @@ export function ChatReasoning(props) {
         children: /*#__PURE__*/_jsx(ChevronDownIcon, {})
       })]
     }), /*#__PURE__*/_jsx("div", {
+      id: contentId
+      // Collapsed content is only clipped visually (0fr grid row + overflow
+      // hidden), which leaves it in the accessibility tree. `inert` removes
+      // it from AT and the tab order while keeping the element rendered, so
+      // the grid-template-rows expand/collapse transition still runs.
+      ,
+      inert: !isExpanded,
       ...{
         0: {
           className: "xrvj5dj xihq33y xb0j27v"

package/dist/ListInput/ListInput.d.ts

@@ -0,0 +1,138 @@
+/**
+ * @file ListInput.tsx
+ * @input React, StyleX, Astryx field/list/button/icon/layer/empty-state primitives, compact size context, browser scroll geometry, programmatic theme tokens, and shared Lab reorder styles
+ * @output Exports ListInput and its controlled data, column, renderer, and change types
+ * @position Lab experiment (RFC facebook/astryx#4531) for editing compact repeated records
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/lab/src/ListInput/ListInput.doc.mjs
+ * - /packages/lab/src/ListInput/ListInput.test.tsx
+ * - /packages/lab/src/ListInput/index.ts
+ * - /apps/storybook/stories/ListInput.stories.tsx
+ */
+import { type Key, type ReactNode } from 'react';
+import type { BaseProps } from '@astryxdesign/core';
+import { type InputStatus } from '@astryxdesign/core/Field';
+import type { ColumnWidth } from '@astryxdesign/core/Table';
+export type ListInputChange<T> = {
+    type: 'add';
+    item: T;
+    index: number;
+} | {
+    type: 'update';
+    item: T;
+    previousItem: T;
+    index: number;
+    columnKey?: string;
+} | {
+    type: 'remove';
+    item: T;
+    index: number;
+} | {
+    type: 'reorder';
+    item: T;
+    fromIndex: number;
+    toIndex: number;
+};
+export interface ListInputValueContext<T> {
+    /** Current record. */
+    item: T;
+    /** Current visual position. */
+    index: number;
+    /** Accessible cell label, including the record position. */
+    label: string;
+    /** True because ListInput owns the visible column label. */
+    isLabelHidden: boolean;
+}
+export interface ListInputRenderContext<T> extends ListInputValueContext<T> {
+    /** Complete validation status scoped to this field. */
+    status?: InputStatus;
+    /** Forward to the rendered Astryx control so status uses its native tooltip. */
+    statusVariant: 'tooltip';
+    /** Whether the rendered control should be disabled. */
+    isDisabled: boolean;
+    /** Whether an asynchronous list operation is in progress. */
+    isLoading: boolean;
+    /** Replace this record in the controlled list. */
+    updateItem: (nextItem: T, columnKey?: string) => void;
+}
+export interface ListInputColumn<T> {
+    /** Stable column identifier, also passed to getFieldStatus. */
+    key: string;
+    /** Field label shown on the first record and repeated when rows stack. */
+    header: string;
+    /**
+     * Column sizing. Use proportional() or pixel() from @astryxdesign/core/Table
+     * to tune the width ratio. Defaults to a proportional column with a 140px floor.
+     */
+    width?: ColumnWidth;
+    /** Renders the editable control for one cell. */
+    renderInput: (context: ListInputRenderContext<T>) => ReactNode;
+}
+export interface ListInputProps<T> extends Omit<BaseProps<HTMLDivElement>, 'onChange'> {
+    /** Ref forwarded to the outer field element. */
+    ref?: React.Ref<HTMLDivElement>;
+    /** Visible and accessible label for the list. */
+    label: string;
+    /** Optional supporting text. */
+    description?: string;
+    /** Controlled records. */
+    value: T[];
+    /** Called for every record mutation with the next value and mutation detail. */
+    onChange: (nextValue: T[], change: ListInputChange<T>) => void;
+    /** Returns a stable key for focus preservation and reordering. */
+    getItemKey: (item: T) => Key;
+    /** Creates a new record when the Add action is used. */
+    createItem: () => T;
+    /** Column definitions and cell renderers. */
+    columns: ListInputColumn<T>[];
+    /** Singular name used in action labels and announcements. @default 'item' */
+    itemName?: string;
+    /** Validation status for the whole list. */
+    status?: InputStatus;
+    /** Returns a validation status displayed across one record. */
+    getItemStatus?: (item: T, index: number) => InputStatus | undefined;
+    /** Returns a validation status passed to one field renderer. */
+    getFieldStatus?: (item: T, columnKey: string, index: number) => InputStatus | undefined;
+    /** Enables handle-only pointer and keyboard reordering. @default false */
+    isReorderable?: boolean;
+    /** Disables fields and mutation controls. @default false */
+    isDisabled?: boolean;
+    /** Marks the list busy and prevents mutations. @default false */
+    isLoading?: boolean;
+    /** Maximum record count. Reaching it disables, but does not remove, Add. */
+    maxItems?: number;
+    /** Visually hides the list label while preserving its accessible name. */
+    isLabelHidden?: boolean;
+    /** Marks the list optional. */
+    isOptional?: boolean;
+    /** Marks the list required. */
+    isRequired?: boolean;
+}
+/**
+ * A compact editor for short collections of consistent, simple records.
+ *
+ * ListInput owns list semantics, add/remove controls, handle-only reordering,
+ * live collection motion, focus restoration, announcements, and list/item/
+ * field validation placement. Consumers keep ownership of the controlled data
+ * and render each field with standard Astryx inputs.
+ *
+ * @example
+ * ```
+ * <ListInput
+ *   label="Guests"
+ *   value={guests}
+ *   onChange={setGuests}
+ *   getItemKey={guest => guest.id}
+ *   createItem={() => ({id: crypto.randomUUID(), name: '', email: ''})}
+ *   columns={columns}
+ *   itemName="guest"
+ *   isReorderable
+ * />
+ * ```
+ */
+export declare function ListInput<T>({ label, description, value, onChange, getItemKey, createItem, columns, itemName, status, getItemStatus, getFieldStatus, isReorderable, isDisabled, isLoading, maxItems, isLabelHidden, isOptional, isRequired, ref, ...rest }: ListInputProps<T>): ReactNode;
+export declare namespace ListInput {
+    var displayName: string;
+}
+//# sourceMappingURL=ListInput.d.ts.map

package/dist/ListInput/ListInput.d.ts.map

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