@astryxdesign/lab 0.4.0-canary.e144ea7 → 0.4.0-canary.faedff7

package/dist/BottomSheet/BottomSheet.d.ts

@@ -17,7 +17,8 @@
  * 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).
+ * taps pass through). Both modes keep the native dialog presented but inert
+ * until the slide-out transition ends.
  *
  * The drag/snap/dismiss machinery lives in `useSheetGestures`; the offset
  * geometry lives in the pure, tested `snapOffsets` module. Both are internal
@@ -82,9 +83,10 @@ export interface BottomSheetProps extends BaseProps<HTMLDialogElement> {
      * - `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
+     * - `false`: `show()` renders a viewport-anchored overlay with **no scrim**. It is
+     *   still layered above the page, not rendered inline, but the page behind
      *   stays interactive and scrollable (like Material's *standard* bottom
-     *   sheet, or an iOS undimmed detent). Escape still closes while focus is
+     *   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

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,EAA2C,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE/E,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;AAoL5D,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;;;;;;;;;;;;OAYG;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,+BAoMlB;yBA9Me,WAAW"}

package/dist/BottomSheet/BottomSheet.js

@@ -21,7 +21,8 @@
  * 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).
+ * taps pass through). Both modes keep the native dialog presented but inert
+ * until the slide-out transition ends.
  *
  * The drag/snap/dismiss machinery lives in `useSheetGestures`; the offset
  * geometry lives in the pure, tested `snapOffsets` module. Both are internal
@@ -33,7 +34,7 @@
  * - /packages/lab/src/BottomSheet/index.ts (exports if types change)
  * - /apps/storybook/stories/BottomSheet.stories.tsx (examples and visual coverage)
  */
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import '@astryxdesign/core/theme/tokens.stylex';
 import { colorVars, durationVars, easeVars, radiusVars, shadowVars, sizeVars, spacingVars } from '@astryxdesign/core/theme/tokens.stylex';
@@ -116,6 +117,10 @@ const styles = {
     k3aq6I: "x1weeur4",
     $$css: true
   },
+  sheetExiting: {
+    kfzvcC: "x47corl",
+    $$css: true
+  },
   budget: {
     kZKoxP: "x1tpcejd",
     $$css: true
@@ -159,6 +164,8 @@ export function BottomSheet({
   xstyle,
   ...props
 }) {
+  const [isPresented, setIsPresented] = useState(isOpen);
+  const isExiting = !isOpen && isPresented;
   const dialogRef = useRef(null);
   const triggerRef = useRef(null);
   const sheetNodeRef = useRef(null);
@@ -191,6 +198,7 @@ export function BottomSheet({
       return;
     }
     if (isOpen) {
+      setIsPresented(true);
       dialog.style.setProperty('--_sheet-scrim-opacity', '1');
       if (!dialog.open) {
         // Only remember/restore focus for modal sheets; a non-modal sheet must
@@ -211,6 +219,9 @@ export function BottomSheet({
         }
       }
     } else if (dialog.open) {
+      if (hasScrim) {
+        dialog.style.setProperty('--_sheet-scrim-opacity', '0');
+      }
       // Wait for the slide-out (sheetClosing, applied this render) before
       // close() releases the top layer. Timeout backstops a missing
       // transitionend (reduced motion, hidden tab).
@@ -226,6 +237,7 @@ export function BottomSheet({
         if (dialog.open) {
           dialog.close();
         }
+        setIsPresented(false);
         triggerRef.current?.focus();
         triggerRef.current = null;
       };
@@ -235,8 +247,8 @@ export function BottomSheet({
         }
       };
       sheet?.addEventListener('transitionend', onEnd);
-      // Backstop above --duration-medium (410ms) so transitionend normally
-      // fires first; this only covers environments that don't emit it.
+      // Backstop above --duration-medium so transitionend normally fires
+      // first; this only covers environments that don't emit it.
       const timer = setTimeout(finish, 450);
       return () => {
         clearTimeout(timer);
@@ -247,7 +259,7 @@ export function BottomSheet({
 
   // Only a modal sheet locks body scroll; a non-modal sheet leaves the page
   // scrollable behind it.
-  useScrollLock(isOpen && hasScrim);
+  useScrollLock(isPresented && hasScrim);
 
   // Enforce an accessible name: label is required by types, but a JS caller
   // can still pass an empty string, leaving the sheet unnamed.
@@ -302,10 +314,12 @@ export function BottomSheet({
       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 << 2 | !!hasScrim << 1 | !!!hasScrim << 0],
+    }[!!(isOpen || isPresented) << 2 | !!hasScrim << 1 | !!!hasScrim << 0],
     ref: mergeRefs(ref, dialogRef),
     "aria-label": label,
-    "aria-modal": hasScrim ? 'true' : undefined,
+    "aria-hidden": isExiting ? 'true' : undefined,
+    "aria-modal": hasScrim && isOpen ? 'true' : undefined,
+    inert: isExiting ? true : undefined,
     onCancel: handleCancel,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
@@ -317,9 +331,9 @@ export function BottomSheet({
       children: /*#__PURE__*/_jsxs("div", {
         ref: mergeRefs(sheetRef, sheetNodeRef),
         tabIndex: -1,
-        ...mergeProps(themeProps('bottom-sheet'), stylex.props(styles.sheet, isHug ? styles.hugHeight : styles.budget, !isOpen && styles.sheetClosing, xstyle), undefined, {
+        ...mergeProps(themeProps('bottom-sheet'), stylex.props(styles.sheet, isHug ? styles.hugHeight : styles.budget, !isOpen && styles.sheetClosing, isExiting && styles.sheetExiting, xstyle), undefined, {
           ['--_sheet-budget']: budget,
-          ...contentProps.style
+          ...(isOpen ? contentProps.style : {})
         }),
         children: [/*#__PURE__*/_jsx("div", {
           ...{

package/dist/index.d.ts

@@ -30,5 +30,4 @@ export * from './Stepper';
 export * from './CircularProgress';
 export * from './ListInput';
 export { LogStream, type LogStreamProps, type LogEntry, type LogStreamLevel, } from './LogStream';
-export { RichTextEditor, type RichTextEditorProps, type RichTextEditorRef, type RichTextEditorStatus, type RichTextEditorStatusType, type RichTextEditorSize, type Transformer, RichTextView, type RichTextViewProps, sharedEditorTheme, markdownToEditorStateJSON, editorStateJSONToMarkdown, type MarkdownSerializerOptions, RichTextEditorToolbar, type RichTextEditorToolbarProps, RICHTEXT_ICON_KEYS, RichTextEditorAutoLinkPlugin, type RichTextEditorAutoLinkPluginProps, DEFAULT_LINK_MATCHERS, NEW_TAB_LINK_ATTRIBUTES, sanitizeUrl, validateUrl, URL_MATCHER, EMAIL_MATCHER, } from './RichTextEditor';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -70,6 +70,7 @@ export * from "./ListInput/index.js";
 // LogStream — experimental streaming log viewer
 export { LogStream } from "./LogStream/index.js";
 
-// RichTextEditor — experimental Lexical WYSIWYG editor (RFC facebook/astryx#3899)
-// Optional peer deps: lexical + @lexical/*. Read-only rendering via RichTextView.
-export { RichTextEditor, RichTextView, sharedEditorTheme, markdownToEditorStateJSON, editorStateJSONToMarkdown, RichTextEditorToolbar, RICHTEXT_ICON_KEYS, RichTextEditorAutoLinkPlugin, DEFAULT_LINK_MATCHERS, NEW_TAB_LINK_ATTRIBUTES, sanitizeUrl, validateUrl, URL_MATCHER, EMAIL_MATCHER } from "./RichTextEditor/index.js";
+// RichTextEditor (RFC facebook/astryx#3899) has graduated out of @astryxdesign/lab
+// into its own canary-only package, @astryxdesign/richtext, so it can be canaried
+// independently (e.g. into EPS/Nest). Import it from there:
+//   import {RichTextEditor, RichTextView} from '@astryxdesign/richtext';

package/dist/lab.css

@@ -122,12 +122,8 @@
   .x15daork:not(#\#):not(#\#){grid-row:auto}
   .x33j1x8:not(#\#):not(#\#){grid-row:var(--x-gridRow)}
   .x17y0mx6:not(#\#):not(#\#){inset-inline:0}
-  .x10im51j:not(#\#):not(#\#){margin-block:0}
   .x1yqqeh1:not(#\#):not(#\#){margin-block:var(--spacing-0-5)}
-  .xsq74q5:not(#\#):not(#\#){margin-block:var(--spacing-1)}
-  .x1g06x3t:not(#\#):not(#\#){margin-block:var(--spacing-2)}
   .x1oqu0vw:not(#\#):not(#\#){margin-block:var(--x-marginBlock)}
-  .xrxpjvj:not(#\#):not(#\#){margin-inline:0}
   .x1a2a7pz:not(#\#):not(#\#){outline:none}
   .xysyzu8:not(#\#):not(#\#){overflow:auto}
   .xb3r6kr:not(#\#):not(#\#){overflow:hidden}
@@ -149,9 +145,7 @@
   .x1pzlopt:not(#\#):not(#\#){padding-inline:var(--spacing-4)}
   .x30g6up:not(#\#):not(#\#){padding-inline:var(--x-paddingInline)}
   .x1ku5rj1:not(#\#):not(#\#){place-items:center}
-  .xmqliwb:not(#\#):not(#\#){text-decoration:line-through}
   .x1hl2dhg:not(#\#):not(#\#){text-decoration:none}
-  .x1bvjpef:not(#\#):not(#\#){text-decoration:underline}
   .xb0j27v:not(#\#):not(#\#){transition:grid-template-rows var(--duration-medium) var(--ease-standard)}
   .x1ob6yzd:not(#\#):not(#\#){transition:transform var(--duration-fast) var(--ease-standard)}
   .x1xfd4ba:hover:not(#\#):not(#\#){border-color:transparent}
@@ -256,10 +250,8 @@
   .x18b5jzi:not(#\#):not(#\#):not(#\#){border-inline-end-style:solid}
   .x10w94by:not(#\#):not(#\#):not(#\#){border-inline-end-width:0}
   .xw8tdv1:not(#\#):not(#\#):not(#\#){border-inline-end-width:var(--border-width)}
-  .x14ydlgx:not(#\#):not(#\#):not(#\#){border-inline-start-color:var(--color-border-emphasized)}
   .x1j92z86:not(#\#):not(#\#):not(#\#){border-inline-start-color:var(--color-border)}
   .x1t7ytsu:not(#\#):not(#\#):not(#\#){border-inline-start-style:solid}
-  .xct1zlm:not(#\#):not(#\#):not(#\#){border-inline-start-width:3px}
   .xgbv0en:not(#\#):not(#\#):not(#\#){border-inline-start-width:var(--border-width)}
   .x7hs6f1:not(#\#):not(#\#):not(#\#){border-start-end-radius:var(--radius-container)}
   .x81l70g:not(#\#):not(#\#):not(#\#){border-start-start-radius:var(--radius-container)}
@@ -326,7 +318,6 @@
   .xb5mbof:not(#\#):not(#\#):not(#\#){content-visibility:auto}
   .x1jm3nie:not(#\#):not(#\#):not(#\#){cursor:grab}
   .xi9pz9s:not(#\#):not(#\#):not(#\#){cursor:grabbing}
-  .x1h6gzvc:not(#\#):not(#\#):not(#\#){cursor:not-allowed}
   .x1ypdohk:not(#\#):not(#\#):not(#\#){cursor:pointer}
   .x1lliihq:not(#\#):not(#\#):not(#\#){display:block}
   .xjp7ctv:not(#\#):not(#\#):not(#\#){display:contents}
@@ -346,10 +337,6 @@
   .x9ynric:not(#\#):not(#\#):not(#\#){font-family:var(--font-family-body)}
   .x9m5x89:not(#\#):not(#\#):not(#\#){font-family:var(--font-family-code)}
   .x1g81bgm:not(#\#):not(#\#):not(#\#){font-family:var(--font-family-heading)}
-  .xeb7xqv:not(#\#):not(#\#):not(#\#){font-size:.9em}
-  .x1c3i2sq:not(#\#):not(#\#):not(#\#){font-size:1.125rem}
-  .x1603h9y:not(#\#):not(#\#):not(#\#){font-size:1.25rem}
-  .xngnso2:not(#\#):not(#\#):not(#\#){font-size:1.5rem}
   .x1jvydc1:not(#\#):not(#\#):not(#\#){font-size:15px}
   .xosj86m:not(#\#):not(#\#):not(#\#){font-size:18px}
   .xhs0kqb:not(#\#):not(#\#):not(#\#){font-size:var(--font-size-2xl)}
@@ -361,7 +348,6 @@
   .xjm74w1:not(#\#):not(#\#):not(#\#){font-size:var(--text-body-size)}
   .xcr08ib:not(#\#):not(#\#):not(#\#){font-size:var(--text-label-size)}
   .x141an7d:not(#\#):not(#\#):not(#\#){font-size:var(--text-supporting-size)}
-  .x1k4tb9n:not(#\#):not(#\#):not(#\#){font-style:italic}
   .xss6m8b:not(#\#):not(#\#):not(#\#){font-variant-numeric:tabular-nums}
   .x1lvx875:not(#\#):not(#\#):not(#\#){font-weight:var(--font-weight-bold)}
   .x1e4wzip:not(#\#):not(#\#):not(#\#){font-weight:var(--font-weight-medium)}
@@ -417,15 +403,7 @@
   .x1cpk1wn:not(#\#):not(#\#):not(#\#){line-height:var(--text-heading-2-leading)}
   .x1kq96og:not(#\#):not(#\#):not(#\#){line-height:var(--text-label-leading)}
   .x1ltkj2j:not(#\#):not(#\#):not(#\#){line-height:var(--text-supporting-leading)}
-  .x43c9pm:not(#\#):not(#\#):not(#\#){list-style-position:outside}
-  .xrylv2j:not(#\#):not(#\#):not(#\#){list-style-type:circle}
-  .x3yw8vx:not(#\#):not(#\#):not(#\#){list-style-type:decimal}
-  .xtaz4m5:not(#\#):not(#\#):not(#\#){list-style-type:disc}
-  .x1sle589:not(#\#):not(#\#):not(#\#){list-style-type:inherit}
-  .x1rrqm6h:not(#\#):not(#\#):not(#\#){list-style-type:lower-alpha}
-  .x19k9dhg:not(#\#):not(#\#):not(#\#){list-style-type:lower-roman}
   .x3ct3a4:not(#\#):not(#\#):not(#\#){list-style-type:none}
-  .x152237o:not(#\#):not(#\#):not(#\#){list-style-type:square}
   .x1h1dc9q:not(#\#):not(#\#):not(#\#){margin-inline-end:calc(var(--spacing-0-5) + var(--border-width))}
   .x1pezmd8:not(#\#):not(#\#):not(#\#){margin-inline-end:var(--spacing-2)}
   .x1m70ojl:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(-1 * var(--spacing-1-5))}
@@ -447,8 +425,6 @@
   .xmarwi5:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--icon-inline-offset)}
   .x18gyask:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--spacing-0)}
   .x1vsv5vr:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--spacing-1)}
-  .x12gdq22:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--spacing-2)}
-  .x126nfab:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--spacing-3)}
   .x1rey3nv:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--spacing-4)}
   .x31w388:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--spacing-6)}
   .xchaq28:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--spacing-7)}
@@ -532,7 +508,6 @@
   @media (prefers-reduced-motion: reduce){.xnh0sag.xnh0sag:not(#\#):not(#\#):not(#\#){animation-duration:3s}}
   @media (prefers-reduced-motion: reduce){.xy02sl2.xy02sl2:not(#\#):not(#\#):not(#\#){animation-duration:4s}}
   @media (prefers-reduced-motion: reduce){.x1aquc0h.x1aquc0h:not(#\#):not(#\#):not(#\#){animation-name:none}}
-  @media (pointer: coarse){.x6pjikd.x6pjikd:not(#\#):not(#\#):not(#\#){font-size:max(1rem,var(--text-body-size))}}
   @media (prefers-reduced-motion: reduce){.xsagj69.xsagj69:not(#\#):not(#\#):not(#\#){transition-duration:.01ms}}
   @media (prefers-reduced-motion: reduce){.xzg1mie.xzg1mie:not(#\#):not(#\#):not(#\#){transition-duration:.01s}}
   @media (prefers-reduced-motion: reduce){.x12w9bfk.x12w9bfk:not(#\#):not(#\#):not(#\#){transition-duration:0s}}
@@ -607,8 +582,6 @@
   .xisnujt:not(#\#):not(#\#):not(#\#):not(#\#){min-height:20px}
   .xjwf9q1:not(#\#):not(#\#):not(#\#):not(#\#){min-height:24px}
   .x1cy360x:not(#\#):not(#\#):not(#\#):not(#\#){min-height:3em}
-  .x17qorbb:not(#\#):not(#\#):not(#\#):not(#\#){min-height:4.5rem}
-  .x65nank:not(#\#):not(#\#):not(#\#):not(#\#){min-height:auto}
   .x1uogy3y:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--size-element-md)}
   .x175cymr:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--spacing-2)}
   .xu95rz8:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--transfer-list-panel-min-block-size)}
@@ -629,7 +602,6 @@
   .x1xye8es:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--spacing-2)}
   .x13vifvy:not(#\#):not(#\#):not(#\#):not(#\#){top:0}
   .x80663w:not(#\#):not(#\#):not(#\#):not(#\#){top:auto}
-  .x8d4r5l:not(#\#):not(#\#):not(#\#):not(#\#){top:var(--spacing-1)}
   .xctzyg:not(#\#):not(#\#):not(#\#):not(#\#){top:var(--spacing-2)}
   .xyx6v2t:not(#\#):not(#\#):not(#\#):not(#\#){top:var(--spacing-3)}
   .xjbys53:not(#\#):not(#\#):not(#\#):not(#\#){top:var(--x-top)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.4.0-canary.e144ea7",
+  "version": "0.4.0-canary.faedff7",
   "description": "Experimental Astryx components — published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -45,20 +45,9 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.4.0-canary.e144ea7",
+    "@astryxdesign/core": "0.4.0-canary.faedff7",
     "react": ">=19.0.0",
-    "react-dom": ">=19.0.0",
-    "lexical": "^0.46.0",
-    "@lexical/react": "^0.46.0",
-    "@lexical/markdown": "^0.46.0",
-    "@lexical/headless": "^0.46.0",
-    "@lexical/html": "^0.46.0",
-    "@lexical/link": "^0.46.0",
-    "@lexical/list": "^0.46.0",
-    "@lexical/rich-text": "^0.46.0",
-    "@lexical/selection": "^0.46.0",
-    "@lexical/code": "^0.46.0",
-    "@lexical/utils": "^0.46.0"
+    "react-dom": ">=19.0.0"
   },
   "dependencies": {
     "d3-array": "^3.2.4",
@@ -66,56 +55,10 @@
     "d3-shape": "^3.2.0"
   },
   "devDependencies": {
-    "@astryxdesign/cli": "0.4.0-canary.e144ea7",
-    "@lexical/code": "^0.46.0",
-    "@lexical/headless": "^0.46.0",
-    "@lexical/html": "^0.46.0",
-    "@lexical/link": "^0.46.0",
-    "@lexical/list": "^0.46.0",
-    "@lexical/markdown": "^0.46.0",
-    "@lexical/react": "^0.46.0",
-    "@lexical/rich-text": "^0.46.0",
-    "@lexical/selection": "^0.46.0",
-    "@lexical/utils": "^0.46.0",
+    "@astryxdesign/cli": "0.4.0-canary.faedff7",
     "@types/d3-array": "^3.2.2",
     "@types/d3-scale": "^4.0.9",
-    "@types/d3-shape": "^3.1.8",
-    "lexical": "^0.46.0"
-  },
-  "peerDependenciesMeta": {
-    "lexical": {
-      "optional": true
-    },
-    "@lexical/react": {
-      "optional": true
-    },
-    "@lexical/markdown": {
-      "optional": true
-    },
-    "@lexical/headless": {
-      "optional": true
-    },
-    "@lexical/html": {
-      "optional": true
-    },
-    "@lexical/link": {
-      "optional": true
-    },
-    "@lexical/list": {
-      "optional": true
-    },
-    "@lexical/rich-text": {
-      "optional": true
-    },
-    "@lexical/selection": {
-      "optional": true
-    },
-    "@lexical/code": {
-      "optional": true
-    },
-    "@lexical/utils": {
-      "optional": true
-    }
+    "@types/d3-shape": "^3.1.8"
   },
   "scripts": {
     "build": "rm -rf dist && pnpm build:esm && tsc --project tsconfig.build.json && pnpm build:css && node ../../scripts/check-no-dev-jsx.mjs && node ../../scripts/check-fully-specified.mjs",

package/src/BottomSheet/BottomSheet.doc.mjs

@@ -6,59 +6,97 @@ export const docs = {
   displayName: 'BottomSheet',
   group: 'BottomSheet',
   category: 'Overlay',
-  keywords: ["bottom sheet","sheet","mobile","touch","drag","swipe","dismiss","grab handle","dialog","overlay","modal"],
+  keywords: [
+    'bottom sheet',
+    'sheet',
+    'mobile',
+    'touch',
+    'drag',
+    'swipe',
+    'dismiss',
+    'grab handle',
+    'dialog',
+    'overlay',
+    'modal',
+  ],
   theming: {
-    targets: [
-      {className: 'astryx-bottom-sheet', visualProps: []},
-    ],
+    targets: [{className: 'astryx-bottom-sheet', visualProps: []}],
   },
-  description: 'A mobile touch sheet that rises from the bottom edge, with a grab handle, drag-to-resize snap points, and swipe-to-dismiss. Built on a native modal <dialog>.',
+  description:
+    'A mobile touch sheet that rises from the bottom edge, with animated entrance and exit, a grab handle, drag-to-resize snap points, and swipe-to-dismiss. Built on a native modal <dialog>.',
   props: [
     {
       name: 'isOpen',
       type: 'boolean',
-      description: 'Whether the sheet is open. Fully controlled; pair with onOpenChange.',
+      description:
+        'Whether the sheet is open. Fully controlled; pair with onOpenChange.',
       required: true,
     },
     {
       name: 'onOpenChange',
       type: '(isOpen: boolean) => void',
-      description: 'Called when the sheet opens or closes. The boolean is the requested next state (false on Escape, scrim click, or a swipe past the dismiss threshold). The caller owns the open state.',
+      description:
+        'Called when the sheet opens or closes. The boolean is the requested next state (false on Escape, scrim click, or a swipe past the dismiss threshold). The caller owns the open state.',
       required: true,
     },
     {
       name: 'label',
       type: 'string',
-      description: 'Accessible label for the sheet. Required; the sheet has no built-in heading to derive a name from.',
+      description:
+        'Accessible label for the sheet. Required; the sheet has no built-in heading to derive a name from.',
       required: true,
     },
     {
       name: 'children',
       type: 'ReactNode',
-      description: 'Sheet content, rendered below the grab handle in a scrollable area.',
+      description:
+        'Sheet content, rendered below the grab handle in a scrollable area.',
       required: true,
     },
     {
       name: 'height',
       type: "'hug' | 'capped' | 'tall' | number | string",
-      description: "How tall the sheet is. Named budgets: 'hug' fits its content up to 92% of the viewport, 'capped' is a scrolling mid-height panel (~62%), and 'tall' is a pinned near-full panel (~92%) for content that streams in. Or pass a number (px) / CSS length for a custom budget. The user can drag between snap points regardless. On shorter viewports the sheet fills the available height.",
+      description:
+        "How tall the sheet is. Named budgets: 'hug' fits its content up to 92% of the viewport, 'capped' is a scrolling mid-height panel (~62%), and 'tall' is a pinned near-full panel (~92%) for content that streams in. Or pass a number (px) / CSS length for a custom budget. The user can drag between snap points regardless. On shorter viewports the sheet fills the available height.",
       default: "'capped'",
     },
     {
       name: 'hasScrim',
       type: 'boolean',
-      description: "Whether to render a modal scrim behind the sheet. true (default) uses showModal(): top layer, focus trap, ::backdrop scrim, body scroll lock, and tap-scrim-to-dismiss, with the background inert. false uses show(): a non-modal sheet with no scrim, leaving the page behind interactive and scrollable (like Material's standard bottom sheet or an iOS undimmed detent). Escape still closes while focus is inside, and drag/flick-to-dismiss still work.",
+      description:
+        'Whether to render a scrim, the semi-transparent overlay that covers and blocks the background, behind the sheet. true (default) uses showModal(): top layer, focus trap, ::backdrop scrim, body scroll lock, and tap-scrim-to-dismiss, with the background inert. false still renders a viewport-anchored overlay above the page, not inline content, but uses show() with no scrim, leaving the page behind interactive and scrollable. Escape still closes while focus is inside, and drag/flick-to-dismiss still work.',
       default: 'true',
     },
   ],
   usage: {
-    description: 'A mobile touch surface for filters, actions, and detail views that should rise from the bottom of the screen. Drag the grab handle to resize: a slow drag settles to the nearest snap point (a short peek, ~half, and ~full detent, filtered to those shorter than the sheet), a fast flick down dismisses, a fast flick up expands. Pulling down on the content when it is scrolled to the top also drags the sheet, giving a larger, more forgiving target. The scrim thins to a faint glance state (but never fully clears) as the sheet collapses onto its shortest "peek" detent; the sheet stays modal, so the background remains inert until dismissed; a residual dim keeps that legible. The sheet is modal: focus is trapped while open and restored to the opener on close, and Escape dismisses, so the swipe gesture always has a keyboard equivalent. Content padding clears the home indicator via env(safe-area-inset-bottom).',
+    description:
+      'A mobile touch surface for filters, actions, and detail views that should rise from the bottom of the screen. Opening slides the sheet in; closing keeps its native dialog presented but inert until the slide-out and scrim fade complete. Drag the grab handle to resize: a slow drag settles to the nearest snap point (a short peek, ~half, and ~full detent, filtered to those shorter than the sheet), a fast flick down dismisses, a fast flick up expands. Pulling down on the content when it is scrolled to the top also drags the sheet, giving a larger, more forgiving target. The scrim thins to a faint glance state (but never fully clears) as the sheet collapses onto its shortest "peek" detent; the sheet stays modal, so the background remains inert until dismissed; a residual dim keeps that legible. The sheet is modal: focus is trapped while open and restored to the opener after its exit, and Escape dismisses, so the swipe gesture always has a keyboard equivalent. Content padding clears the home indicator via env(safe-area-inset-bottom).',
     bestPractices: [
-      { guidance: true, description: 'Use for mobile-first surfaces (filters, share sheets, quick actions) where the content should rise from the bottom edge.' },
-      { guidance: true, description: 'Keep the caller as the source of truth: derive isOpen from state and clear it in onOpenChange.' },
-      { guidance: true, description: "Pick the starting height that fits the content: 'hug' for short bounded content, 'capped' for lists, 'tall' for streaming/resizing content; the user can then drag between snap points." },
-      { guidance: true, description: "Use hasScrim={false} (non-modal, no scrim) for a peek surface that must coexist with a live page behind it (e.g. a panel over a map); keep the default (hasScrim) for focused tasks where the background should be inert." },
-      { guidance: false, description: 'Use a BottomSheet for desktop inspectors or master-detail; use Drawer (side="end", hasScrim={false}) instead.' },
+      {
+        guidance: true,
+        description:
+          'Use for mobile-first surfaces (filters, share sheets, quick actions) where the content should rise from the bottom edge.',
+      },
+      {
+        guidance: true,
+        description:
+          'Keep the caller as the source of truth: derive isOpen from state and clear it in onOpenChange.',
+      },
+      {
+        guidance: true,
+        description:
+          "Pick the starting height that fits the content: 'hug' for short bounded content, 'capped' for lists, 'tall' for streaming/resizing content; the user can then drag between snap points.",
+      },
+      {
+        guidance: true,
+        description:
+          'Use hasScrim={false} for a floating, no-scrim overlay that must coexist with a live page behind it (e.g. a panel over a map). It remains viewport-anchored rather than rendering inline. Keep the default for focused tasks where the background should be inert.',
+      },
+      {
+        guidance: false,
+        description:
+          'Use a BottomSheet for desktop inspectors or master-detail; use Drawer (side="end", hasScrim={false}) instead.',
+      },
     ],
   },
   examples: [
@@ -95,7 +133,7 @@ export const docs = {
 </BottomSheet>`,
     },
     {
-      label: 'Non-modal sheet (no scrim): page stays interactive',
+      label: 'No scrim',
       code: `const [isOpen, setIsOpen] = useState(true);
 <BottomSheet
   isOpen={isOpen}
@@ -110,15 +148,36 @@ export const docs = {
 
 /** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
-  description: 'mobile touch sheet rising from the bottom edge (native <dialog>): grab handle, drag-to-resize snap points, swipe-to-dismiss, named height scale, modal (default) or non-modal (hasScrim={false}) presentation',
+  description:
+    'mobile touch sheet rising from the bottom edge (native <dialog>): grab handle, drag-to-resize snap points, swipe-to-dismiss, named height scale, modal (default) or non-modal (hasScrim={false}) presentation',
   usage: {
-    description: 'Mobile surface for filters, actions, and detail views. Drag the handle to resize between snap points; flick down to dismiss, up to expand. Modal: focus trap + restore, and Escape dismisses so swipe has a keyboard equivalent. Content clears the home indicator via safe-area inset.',
+    description:
+      'Mobile surface for filters, actions, and detail views. Drag the handle to resize between snap points; flick down to dismiss, up to expand. Modal: focus trap + restore, and Escape dismisses so swipe has a keyboard equivalent. Content clears the home indicator via safe-area inset.',
     bestPractices: [
-      { guidance: true, description: 'Use for mobile-first bottom surfaces (filters, share sheets, quick actions).' },
-      { guidance: true, description: 'Derive isOpen from state; clear it in onOpenChange.' },
-      { guidance: true, description: "Pick a height that fits: 'hug' for short content, 'capped' for lists, 'tall' for streaming content." },
-      { guidance: true, description: "hasScrim={false} for a non-modal peek over a live page; default (hasScrim) for focused tasks (inert background)." },
-      { guidance: false, description: 'Use for desktop inspectors or master-detail; use Drawer instead.' },
+      {
+        guidance: true,
+        description:
+          'Use for mobile-first bottom surfaces (filters, share sheets, quick actions).',
+      },
+      {
+        guidance: true,
+        description: 'Derive isOpen from state; clear it in onOpenChange.',
+      },
+      {
+        guidance: true,
+        description:
+          "Pick a height that fits: 'hug' for short content, 'capped' for lists, 'tall' for streaming content.",
+      },
+      {
+        guidance: true,
+        description:
+          'hasScrim={false} for a floating no-scrim overlay over a live page; it is not inline. Keep the default for focused tasks (inert background).',
+      },
+      {
+        guidance: false,
+        description:
+          'Use for desktop inspectors or master-detail; use Drawer instead.',
+      },
     ],
   },
 };

package/src/BottomSheet/BottomSheet.test.tsx

@@ -59,6 +59,25 @@ function getSheet(): HTMLElement {
   return sheet;
 }
 
+function finishSheetExit() {
+  fireEvent.transitionEnd(getSheet(), {propertyName: 'transform'});
+}
+
+function ExitHarness({hasScrim}: {hasScrim?: boolean}) {
+  const [isOpen, setIsOpen] = useState(true);
+  return (
+    <BottomSheet
+      isOpen={isOpen}
+      onOpenChange={setIsOpen}
+      label="Filters"
+      hasScrim={hasScrim}>
+      <button type="button" onClick={() => setIsOpen(false)}>
+        Close sheet
+      </button>
+    </BottomSheet>
+  );
+}
+
 // The grab handle is the panel's first child (decorative, aria-hidden).
 function getHandle(): HTMLElement {
   const handle = getSheet().querySelector<HTMLElement>('[aria-hidden="true"]');
@@ -134,6 +153,25 @@ describe('BottomSheet', () => {
     expect(onOpenChange).toHaveBeenCalledWith(false);
   });
 
+  it('keeps a standalone modal sheet presented through its exit animation', () => {
+    render(<ExitHarness />);
+    const dialog = screen.getByRole('dialog', {name: 'Filters'});
+
+    fireEvent.click(screen.getByRole('button', {name: 'Close sheet'}));
+
+    expect(dialog).toHaveAttribute('open');
+    expect(dialog).toHaveAttribute('inert');
+    expect(dialog).toHaveAttribute('aria-hidden', 'true');
+    expect(dialog).not.toHaveAttribute('aria-modal');
+    expect(dialog).toHaveStyle({'--_sheet-scrim-opacity': '0'});
+    expect(document.body.style.position).toBe('fixed');
+
+    finishSheetExit();
+
+    expect(dialog).not.toHaveAttribute('open');
+    expect(document.body.style.position).not.toBe('fixed');
+  });
+
   it('does not dismiss when the sheet surface itself is clicked', () => {
     const onOpenChange = vi.fn();
     render(
@@ -238,6 +276,21 @@ describe('BottomSheet', () => {
         screen.getByRole('textbox', {name: 'Search'}),
       );
     });
+
+    it('keeps a standalone non-modal sheet visible until its exit ends', () => {
+      render(<ExitHarness hasScrim={false} />);
+      const dialog = screen.getByRole('dialog', {name: 'Filters'});
+
+      fireEvent.click(screen.getByRole('button', {name: 'Close sheet'}));
+
+      expect(dialog).toHaveAttribute('open');
+      expect(dialog).toHaveAttribute('inert');
+      expect(document.body.style.position).not.toBe('fixed');
+
+      finishSheetExit();
+
+      expect(dialog).not.toHaveAttribute('open');
+    });
   });
 
   describe('grab handle', () => {