@astryxdesign/core 0.5.2-canary.c9c8564 → 0.5.2-canary.e4f7677

package/dist/BottomSheet/BottomSheet.d.ts

@@ -20,7 +20,7 @@
  * - /apps/storybook/stories/BottomSheet.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/BottomSheet/BottomSheetShowcase.tsx
  */
-import { type ReactNode } from 'react';
+import { type RefObject, type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
 import type { DialogPurpose } from '../Dialog';
 export type { BottomSheetHeight, BottomSheetSnapPoint } from './BottomSheetPanel';
@@ -56,6 +56,8 @@ interface StandaloneBottomSheetProps extends BottomSheetSharedProps {
     isOpen: boolean;
     onOpenChange: (isOpen: boolean) => void;
     hasScrim?: boolean;
+    /** Element that receives focus after the sheet closes. */
+    finalFocusRef?: RefObject<HTMLElement | null>;
     sheetId?: never;
 }
 interface SwitcherBottomSheetProps extends BottomSheetSharedProps {

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAe7C,YAAY,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAChF,OAAO,KAAK,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAyEhF,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,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,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D,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;AA4XxD;;;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;;;;;;;;;;;;;;;;;;;;;GAqBG;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;AAe7C,YAAY,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAChF,OAAO,KAAK,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAyEhF,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,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,0DAA0D;IAC1D,aAAa,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D,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;AA4XxD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BA6BlD;yBA7Be,WAAW"}

package/dist/BottomSheet/BottomSheet.js

@@ -93,6 +93,7 @@ function StandaloneBottomSheet({
   height = 'capped',
   snapPoints,
   hasScrim = true,
+  finalFocusRef,
   purpose = 'info',
   xstyle,
   ...props
@@ -162,9 +163,9 @@ function StandaloneBottomSheet({
       dialog.close();
     }
     setIsPresented(false);
-    triggerRef.current?.focus();
+    (finalFocusRef?.current ?? triggerRef.current)?.focus();
     triggerRef.current = null;
-  }, [isOpen]);
+  }, [finalFocusRef, isOpen]);
   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);
   const handleCancel = useCallback(event => {
@@ -274,7 +275,7 @@ function StandaloneBottomSheet({
         onMotionComplete: handleMotionComplete,
         children: children
       })
-    }), hasScrim ? null : /*#__PURE__*/_jsx(BottomSheetEdgeTint, {})]
+    }), /*#__PURE__*/_jsx(BottomSheetEdgeTint, {})]
   });
 }
 function SwitcherBottomSheetItem({

package/dist/BottomSheet/BottomSheetEdgeTint.d.ts

@@ -1,6 +1,6 @@
 /**
- * Colours the iOS Safari toolbar strip below a non-modal sheet. Renders
- * nothing visible; see the file header for why it exists.
+ * Colours the iOS Safari toolbar strip below a sheet. Renders nothing visible;
+ * see the file header for why it exists.
  */
 export declare function BottomSheetEdgeTint(): import("react").JSX.Element;
 //# sourceMappingURL=BottomSheetEdgeTint.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetEdgeTint.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetEdgeTint.tsx"],"names":[],"mappings":"AAqEA;;;GAGG;AACH,wBAAgB,mBAAmB,gCAQlC"}
+{"version":3,"file":"BottomSheetEdgeTint.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetEdgeTint.tsx"],"names":[],"mappings":"AAkEA;;;GAGG;AACH,wBAAgB,mBAAmB,gCAQlC"}

package/dist/BottomSheet/BottomSheetEdgeTint.js

@@ -6,7 +6,7 @@
  * @file BottomSheetEdgeTint.tsx
  * @input Uses StyleX and core color tokens
  * @output Exports BottomSheetEdgeTint, an internal decorative element
- * @position Private helper rendered inside a non-modal BottomSheet dialog
+ * @position Private helper rendered inside every BottomSheet dialog
  *
  * iOS 26 Safari dropped `<meta name="theme-color">` and instead derives the
  * colour it paints behind its translucent toolbars by sampling the page: it
@@ -14,13 +14,10 @@
  * `fixed`/`sticky` ancestor, and extends that element's declared
  * `background-color` into the browser chrome.
  *
- * A modal sheet is served by that heuristic already — WebKit has a dedicated
- * branch for a dialog's `::backdrop`. A non-modal sheet is not: the nearest
- * fixed ancestor of the panel is the sheet's own full-viewport `<dialog>`,
- * which is transparent and viewport-sized, and WebKit answers a viewport-sized
- * candidate by *keeping the colour it already had* — the host page's. The page
- * then shows through behind the address bar while the sheet covers the screen
- * above it.
+ * WebKit may otherwise extend either the dialog backdrop or the host page into
+ * the browser chrome. Which one wins varies with dialog mode and the page's
+ * own fixed or sticky edge content, so relying on the backdrop makes otherwise
+ * identical BottomSheets produce different toolbar colours.
  *
  * This element gives the heuristic something unambiguous to sample: fixed,
  * full width, flush with the bottom edge, taller than WebKit's 10px minimum
@@ -48,8 +45,8 @@ import { colorVars } from "../theme/tokens.stylex.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const SAMPLE_HEIGHT_PX = 12;
 /**
- * Colours the iOS Safari toolbar strip below a non-modal sheet. Renders
- * nothing visible; see the file header for why it exists.
+ * Colours the iOS Safari toolbar strip below a sheet. Renders nothing visible;
+ * see the file header for why it exists.
  */
 export function BottomSheetEdgeTint() {
   return /*#__PURE__*/_jsx("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetSwitcher.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetSwitcher.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,EAQL,KAAK,SAAS,EACd,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAqI5C,MAAM,WAAW,wBAAyB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC5E,iDAAiD;IACjD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC,oEAAoE;IACpE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAE9D;;;;;OAKG;IACH,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAE3B,iEAAiE;IACjE,mBAAmB,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAEtD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0DAA0D;IAC1D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,WAAW,EACX,mBAAmB,EACnB,QAAe,EACf,QAAQ,EACR,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,wBAAwB,+BA+Z1B;yBA5ae,mBAAmB"}
+{"version":3,"file":"BottomSheetSwitcher.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetSwitcher.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,EAQL,KAAK,SAAS,EACd,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAqI5C,MAAM,WAAW,wBAAyB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC5E,iDAAiD;IACjD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC,oEAAoE;IACpE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAE9D;;;;;OAKG;IACH,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAE3B,iEAAiE;IACjE,mBAAmB,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAEtD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0DAA0D;IAC1D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,WAAW,EACX,mBAAmB,EACnB,QAAe,EACf,QAAQ,EACR,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,wBAAwB,+BA8Z1B;yBA3ae,mBAAmB"}

package/dist/BottomSheet/BottomSheetSwitcher.js

@@ -410,7 +410,7 @@ export function BottomSheetSwitcher({
       ...(activeSheetPurpose === 'required' ? {
         role: 'alertdialog'
       } : undefined),
-      children: [children, hasScrim ? null : /*#__PURE__*/_jsx(BottomSheetEdgeTint, {})]
+      children: [children, /*#__PURE__*/_jsx(BottomSheetEdgeTint, {})]
     })
   });
 }

package/dist/Button/Button.d.ts

@@ -78,7 +78,8 @@ export interface ButtonProps extends BaseProps<HTMLButtonElement> {
      */
     isDisabled?: boolean;
     /**
-     * Whether the button is in a loading state.
+     * Whether the button is in a loading state. Loading prevents interaction
+     * without dimming the spinner; explicit disabled states remain dimmed.
      * @default false
      */
     isLoading?: boolean;

package/dist/Button/Button.d.ts.map

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

package/dist/Button/Button.js

@@ -66,16 +66,19 @@ const styles = {
     $$css: true
   },
   pressable: {
-    k3aq6I: "x3oybdh xk4oym4",
+    k3aq6I: "x3oybdh x8ppqj",
     $$css: true
   },
-  disabled: {
+  inactive: {
     kkrTdU: "xt0e3qv",
-    kSiTet: "xbyyjgo",
     kKwaWg: "x18o3ruo",
     k3aq6I: "x1c071of x1pdlv7q",
     $$css: true
   },
+  disabled: {
+    kSiTet: "xbyyjgo",
+    $$css: true
+  },
   ariaDisabled: {
     kKwaWg: "x18o3ruo xuqm82a",
     $$css: true
@@ -374,6 +377,10 @@ export function Button({
   // When interruptible, the loading state drives the spinner and aria-busy but
   // not disabled, so clicks keep landing and can interrupt the in-flight action.
   const buttonDisabled = isDisabled || groupDisabled || isLoadingState && !isInterruptible;
+  // A loading button remains non-interactive, but its spinner communicates an
+  // active state and must retain contrast. Only explicitly disabled controls
+  // receive the visually dimmed treatment.
+  const visuallyDisabled = isDisabled || groupDisabled;
   // isIconOnly prop is the source of truth for icon-only rendering.
   // When false (default), label is always rendered as visible text.
 
@@ -434,7 +441,7 @@ export function Button({
   } : null;
 
   // Shared StyleX props for both button and link rendering
-  const sharedStylexProps = focusOutlineProps.focusVisible(styles.base, sizeStyles[size], isIconOnly && styles.iconOnly, interactionOverlayStyles.backgroundImage, buttonDisabled && styles.disabled, useAriaDisabled && styles.ariaDisabled, renderAsLink && styles.link, !buttonGroup && styles.pressable, buttonGroup && (buttonGroup.orientation === 'horizontal' ? groupStyles.horizontal : groupStyles.vertical), buttonGroup && (variant === 'primary' || variant === 'destructive') && (buttonGroup.orientation === 'horizontal' ? groupStyles.onSolidHorizontal : groupStyles.onSolidVertical),
+  const sharedStylexProps = focusOutlineProps.focusVisible(styles.base, sizeStyles[size], isIconOnly && styles.iconOnly, interactionOverlayStyles.backgroundImage, buttonDisabled && styles.inactive, visuallyDisabled && styles.disabled, useAriaDisabled && styles.ariaDisabled, renderAsLink && styles.link, !buttonGroup && styles.pressable, buttonGroup && (buttonGroup.orientation === 'horizontal' ? groupStyles.horizontal : groupStyles.vertical), buttonGroup && (variant === 'primary' || variant === 'destructive') && (buttonGroup.orientation === 'horizontal' ? groupStyles.onSolidHorizontal : groupStyles.onSolidVertical),
   // Standalone floating buttons only — a grouped button's elevation is owned
   // by the ButtonGroup so the shared surface lifts as one unit.
   !buttonGroup && elevationStyles[elevation], width != null && dynamicStyles.width(width),

package/dist/Chat/ChatToolCalls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatToolCalls.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatToolCalls.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAA+B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAwB5C,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAE9E,MAAM,WAAW,gBAAgB;IAC/B,0BAA0B;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,2FAA2F;IAC3F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oFAAoF;IACpF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6FAA6F;IAC7F,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,+BAA+B;IAC/B,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wEAAwE;IACxE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAmaD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,4BA0JtD;yBA1Je,aAAa"}
+{"version":3,"file":"ChatToolCalls.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatToolCalls.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAA+B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAwB5C,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAE9E,MAAM,WAAW,gBAAgB;IAC/B,0BAA0B;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,2FAA2F;IAC3F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oFAAoF;IACpF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6FAA6F;IAC7F,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,+BAA+B;IAC/B,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wEAAwE;IACxE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAkbD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,4BAgKtD;yBAhKe,aAAa"}

package/dist/Chat/ChatToolCalls.js

@@ -102,6 +102,23 @@ const STATUS_STYLES = {
   complete: styles.colorComplete,
   error: styles.colorError
 };
+function getStatusAnnouncement(t, status, errorMessage) {
+  if (status === 'error' && errorMessage != null) {
+    return t('@astryx.chatToolCalls.error', {
+      message: errorMessage
+    });
+  }
+  switch (status) {
+    case 'pending':
+      return t('@astryx.chatToolCalls.status.pending');
+    case 'running':
+      return t('@astryx.chatToolCalls.status.running');
+    case 'complete':
+      return t('@astryx.chatToolCalls.status.complete');
+    case 'error':
+      return t('@astryx.chatToolCalls.status.error');
+  }
+}
 function getToolCallKey(call) {
   return getKey(call.key, () => [call.name, call.status ?? 'complete', call.target ?? '', call.node ?? '', call.duration ?? '', call.additions?.toString() ?? '', call.deletions?.toString() ?? '', call.errorMessage ?? ''].join('\u001F'));
 }
@@ -118,6 +135,7 @@ function CallRow({
   const hasDetail = call.resultDetail != null;
   const [isDetailOpen, setIsDetailOpen] = useState(false);
   const detailId = useId();
+  const statusAnnouncement = getStatusAnnouncement(t, status, call.errorMessage);
   const toggleDetail = hasDetail ? () => setIsDetailOpen(prev => !prev) : undefined;
   const row = /*#__PURE__*/_jsxs("div", {
     role: hasDetail ? 'button' : undefined,
@@ -144,10 +162,12 @@ function CallRow({
       ...stylex.props(styles.statusIcon, STATUS_STYLES[status]),
       children: [status === 'running' ? /*#__PURE__*/_jsx(Spinner, {
         size: "sm",
-        shade: "subtle"
+        shade: "subtle",
+        "aria-hidden": "true"
       }) : status === 'pending' ? /*#__PURE__*/_jsx(Spinner, {
         size: "sm",
-        shade: "subtle"
+        shade: "subtle",
+        "aria-hidden": "true"
       }) : /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx("span", {
           ...{
@@ -163,16 +183,8 @@ function CallRow({
             color: "inherit"
           })
         })]
-      }), status === 'error' && call.errorMessage != null &&
-      /*#__PURE__*/
-      // The title attribute above is hover-only; expose the error detail
-      // as real text so it reaches screen readers, keyboard, and touch
-      // users. Rendering it inside the row also folds it into the
-      // accessible name of expandable (role="button") rows.
-      _jsx(VisuallyHidden, {
-        children: t('@astryx.chatToolCalls.error', {
-          message: call.errorMessage ?? ''
-        })
+      }), /*#__PURE__*/_jsx(VisuallyHidden, {
+        children: statusAnnouncement
       })]
     }), /*#__PURE__*/_jsx("span", {
       ...{
@@ -304,6 +316,7 @@ export function ChatToolCalls(props) {
   // Multiple calls: latest call at surface with chevron to expand all
   const latestCall = calls[calls.length - 1];
   const latestStatus = latestCall.status ?? 'complete';
+  const latestStatusAnnouncement = getStatusAnnouncement(t, latestStatus, latestCall.errorMessage);
   return /*#__PURE__*/_jsxs("div", {
     ref: ref,
     ...mergeProps(themeProps('chat-tool-calls'), stylex.props(styles.root, xstyle), className, style),
@@ -342,14 +355,16 @@ export function ChatToolCalls(props) {
           })
         })]
       }) : /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx("span", {
+        children: [/*#__PURE__*/_jsxs("span", {
           ...stylex.props(styles.statusIcon, STATUS_STYLES[latestStatus]),
-          children: latestStatus === 'running' ? /*#__PURE__*/_jsx(Spinner, {
+          children: [latestStatus === 'running' ? /*#__PURE__*/_jsx(Spinner, {
             size: "sm",
-            shade: "subtle"
+            shade: "subtle",
+            "aria-hidden": "true"
           }) : latestStatus === 'pending' ? /*#__PURE__*/_jsx(Spinner, {
             size: "sm",
-            shade: "subtle"
+            shade: "subtle",
+            "aria-hidden": "true"
           }) : /*#__PURE__*/_jsxs(_Fragment, {
             children: [/*#__PURE__*/_jsx("span", {
               ...{
@@ -365,7 +380,9 @@ export function ChatToolCalls(props) {
                 color: "inherit"
               })
             })]
-          })
+          }), /*#__PURE__*/_jsx(VisuallyHidden, {
+            children: latestStatusAnnouncement
+          })]
         }), /*#__PURE__*/_jsx("span", {
           ...{
             className: "x141an7d x1ltkj2j x9m5x89 x1e4wzip xv1l7n4 xuxw1ft xb3r6kr xlyipyv xs83m0k x13n9wmd"

package/dist/ContextMenu/ContextMenu.d.ts

@@ -1,7 +1,8 @@
 /**
  * @file ContextMenu.tsx
- * @input Uses React, StyleX, useLayer (context mode), useListFocus
- * @output Exports ContextMenu component
+ * @input Uses React, StyleX, useLayer, BottomSheet, useListFocus, and the
+ *   shared menu-presentation resolver
+ * @output Exports ContextMenu with cursor-popover and touch-sheet presentations
  * @position Core implementation; consumed by index.ts
  *
  * Right-click context menu positioned at the cursor. The cursor point is
@@ -31,6 +32,7 @@ import type { ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
 import type { StyleXStyles } from '../theme/types';
 import type { DropdownMenuOption, DropdownMenuItemData, DropdownMenuDividerData, DropdownMenuSection } from '../DropdownMenu/DropdownMenu';
+import { type AdaptivePresentation } from '../hooks/useAdaptivePresentation';
 export type ContextMenuItemData = DropdownMenuItemData;
 export type ContextMenuDividerData = DropdownMenuDividerData;
 export type ContextMenuSection = DropdownMenuSection;
@@ -60,6 +62,15 @@ interface ContextMenuBaseProps extends BaseProps {
     isDisabled?: boolean;
     /** Called when the menu opens or closes. */
     onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Presentation policy for the menu.
+     * - `popover`: open beside the pointer position.
+     * - `bottom-sheet`: open as an action sheet.
+     * - `adaptive`: use a BottomSheet on compact coarse-pointer viewports and
+     *   the cursor-positioned popover elsewhere.
+     * @default 'popover'
+     */
+    presentation?: AdaptivePresentation;
     'data-testid'?: string;
 }
 interface ContextMenuDataProps extends ContextMenuBaseProps {
@@ -96,7 +107,7 @@ export type ContextMenuProps = ContextMenuDataProps | ContextMenuCompoundProps;
  * </ContextMenu>
  * ```
  */
-export declare function ContextMenu({ children, menuWidth, size, label: labelFromProps, isDisabled, onOpenChange, ref, className, style, xstyle, triggerXstyle, 'data-testid': testId, ...rest }: ContextMenuProps): React.JSX.Element;
+export declare function ContextMenu({ children, menuWidth, size, label: labelFromProps, isDisabled, onOpenChange, presentation, ref, className, style, xstyle, triggerXstyle, 'data-testid': testId, ...rest }: ContextMenuProps): React.JSX.Element;
 export declare namespace ContextMenu {
     var displayName: string;
 }

package/dist/ContextMenu/ContextMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AA0BrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAGjD,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,8BAA8B,CAAC;AAsDtC,MAAM,MAAM,mBAAmB,GAAG,oBAAoB,CAAC;AAEvD,MAAM,MAAM,sBAAsB,GAAG,uBAAuB,CAAC;AAE7D,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,CAAC;AAMnD,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,oDAAoD;IACpD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAC9C,+DAA+D;IAC/D,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,wCAAwC;IACxC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,gDAAgD;IAChD,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,UAAU,wBAAyB,SAAQ,oBAAoB;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+CAA+C;IAC/C,WAAW,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,wBAAwB,CAAC;AAM/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,IAAW,EACX,KAAK,EAAE,cAAc,EACrB,UAAkB,EAClB,YAAY,EACZ,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EACb,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,gBAAgB,qBA0SlB;yBAxTe,WAAW"}
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,KASN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AA8BrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAGjD,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,8BAA8B,CAAC;AAGtC,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,kCAAkC,CAAC;AAuF1C,MAAM,MAAM,mBAAmB,GAAG,oBAAoB,CAAC;AAEvD,MAAM,MAAM,sBAAsB,GAAG,uBAAuB,CAAC;AAE7D,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,CAAC;AAMnD,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,oDAAoD;IACpD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAC9C,+DAA+D;IAC/D,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,wCAAwC;IACxC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,gDAAgD;IAChD,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,UAAU,wBAAyB,SAAQ,oBAAoB;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+CAA+C;IAC/C,WAAW,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,wBAAwB,CAAC;AAM/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,IAAW,EACX,KAAK,EAAE,cAAc,EACrB,UAAkB,EAClB,YAAY,EACZ,YAAwB,EACxB,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EACb,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,gBAAgB,qBAyZlB;yBAxae,WAAW"}

package/dist/ContextMenu/ContextMenu.js

@@ -3,8 +3,9 @@
 
 /**
  * @file ContextMenu.tsx
- * @input Uses React, StyleX, useLayer (context mode), useListFocus
- * @output Exports ContextMenu component
+ * @input Uses React, StyleX, useLayer, BottomSheet, useListFocus, and the
+ *   shared menu-presentation resolver
+ * @output Exports ContextMenu with cursor-popover and touch-sheet presentations
  * @position Core implementation; consumed by index.ts
  *
  * Right-click context menu positioned at the cursor. The cursor point is
@@ -29,9 +30,13 @@
  * - /apps/storybook/stories/ContextMenu.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/ContextMenu/ (showcase blocks)
  */
-import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useId, lazy, useMemo, useRef, useState, Suspense } from 'react';
 import * as stylex from '@stylexjs/stylex';
+import { Button } from "../Button/index.js";
+import { Heading } from "../Heading/index.js";
+import { Icon } from "../Icon/index.js";
 import { useLayer } from "../Layer/useLayer.js";
+import { MenuBottomSheetActionList } from "../DropdownMenu/MenuBottomSheetActionList.js";
 import { renderDropdownItems } from "../DropdownMenu/renderDropdownItems.js";
 import { DropdownMenuContext } from "../DropdownMenu/DropdownMenuContext.js";
 import { MENU_ITEM_ROLES, MENU_ITEM_SELECTOR, MENU_BOUNDARY_SELECTOR } from "../DropdownMenu/menuItemRoles.js";
@@ -41,15 +46,21 @@ import { useLongPress } from "../hooks/useLongPress.js";
 import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, durationVars, easeVars, shadowVars } from "../theme/tokens.stylex.js";
-import { mergeProps, isImeKeyEvent } from "../utils/index.js";
+import { mergeProps, isImeKeyEvent, rtlStyles } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useTranslator } from "../i18n/index.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { useAdaptivePresentation } from "../hooks/useAdaptivePresentation.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const LazyMenuBottomSheet = /*#__PURE__*/lazy(async () => import("../DropdownMenu/MenuBottomSheet.js").then(module => ({
+  default: module.MenuBottomSheet
+})));
 const styles = {
   trigger: {
     kVAEAm: "x1n2onr6",
     k7VYTy: "xpdipgo",
+    kO7zv1: "x1winvzj",
+    kfSwDN: "x87ps6o",
     $$css: true
   },
   menu: {
@@ -81,7 +92,30 @@ const styles = {
     $$css: true
   }, {
     "--x-minWidth": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(typeof width === 'number' ? `${width}px` : width)
-  }]
+  }],
+  sheetMenu: {
+    kB7OPa: "x9f619",
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kOIVth: "x1lsbc85",
+    kzqmXN: "xh8yej3",
+    "--_dropdown-menu-radius": "x1fcsqxe",
+    "--_dropdown-menu-padding": "xgory14",
+    kmVPX3: "x9epnlk",
+    kaIpWk: "x1n97fys",
+    kWkggS: "x10xzikg",
+    kI3sdo: "x1a2a7pz",
+    kfSwDN: "x87ps6o",
+    $$css: true
+  },
+  sheetRootHeading: {
+    keTefX: "x6i7dpz",
+    $$css: true
+  },
+  sheetViewHeading: {
+    kI3sdo: "x1a2a7pz",
+    $$css: true
+  }
 };
 
 // =============================================================================
@@ -126,6 +160,7 @@ export function ContextMenu({
   label: labelFromProps,
   isDisabled = false,
   onOpenChange,
+  presentation = 'popover',
   ref,
   className,
   style,
@@ -136,6 +171,9 @@ export function ContextMenu({
 }) {
   const t = useTranslator();
   const label = labelFromProps ?? t('@astryx.contextMenu.label');
+  const backLabel = t('@astryx.dropdownMenu.back');
+  const resolvedPresentation = useAdaptivePresentation(presentation);
+  const usesBottomSheet = resolvedPresentation === 'bottom-sheet';
   // Separate content props (union discriminant) from DOM pass-through attrs.
   // The union means exactly one of items/menuContent exists in rest; destructure
   // both so triggerProps contains only DOM-safe attributes.
@@ -160,7 +198,20 @@ export function ContextMenu({
   // Element focused before the menu opened, restored when it closes so focus
   // does not fall to <body> after Escape or outside-click dismissal.
   const triggerFocusRef = useRef(null);
+  const sheetHeadingRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
+  const [submenuPath, setSubmenuPath] = useState([]);
+  const currentSubmenu = submenuPath.at(-1);
+  const currentItems = currentSubmenu?.items ?? items;
+  const currentTitle = currentSubmenu?.label ?? label;
+  const sheetLabel = typeof currentTitle === 'string' ? currentTitle : label;
+  const updateOpenState = useCallback(nextIsOpen => {
+    if (!nextIsOpen) {
+      setSubmenuPath([]);
+    }
+    setIsOpen(nextIsOpen);
+    onOpenChange?.(nextIsOpen);
+  }, [onOpenChange]);
   const layer = useLayer({
     mode: 'context',
     onHide: useCallback(() => {
@@ -180,8 +231,32 @@ export function ContextMenu({
     lightDismiss: false
   });
   const closeMenu = useCallback(() => {
-    layer.hide();
-  }, [layer]);
+    if (usesBottomSheet) {
+      updateOpenState(false);
+    } else {
+      layer.hide();
+    }
+  }, [layer, updateOpenState, usesBottomSheet]);
+  const handleBottomSheetSelect = useCallback(item => {
+    if (item.isDisabled) {
+      return;
+    }
+    item.onClick?.();
+    if (item.hasCloseOnSelect !== false) {
+      closeMenu();
+    }
+  }, [closeMenu]);
+  useEffect(() => {
+    if (!isOpen || submenuPath.length === 0) {
+      return;
+    }
+    const frame = requestAnimationFrame(() => {
+      sheetHeadingRef.current?.focus({
+        preventScroll: true
+      });
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [isOpen, submenuPath.length]);
   const {
     listRef,
     handleKeyDown: listNavKeyDown,
@@ -210,7 +285,7 @@ export function ContextMenu({
   // opening right-click as a dismiss event. Handling it ourselves via
   // mousedown avoids that race.
   useEffect(() => {
-    if (!isOpen) {
+    if (!isOpen || usesBottomSheet) {
       return;
     }
     const handleClickOutside = e => {
@@ -223,14 +298,14 @@ export function ContextMenu({
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [isOpen, closeMenu, listRef]);
+  }, [isOpen, closeMenu, listRef, usesBottomSheet]);
 
   // Dismiss on Escape from anywhere while open. The menu div's own onKeyDown
   // only fires when focus is inside the menu; a document-level listener is
   // kept as a reliable fallback Escape path (e.g. if focus has moved out of
   // the menu). Guards against IME composition-cancel.
   useEffect(() => {
-    if (!isOpen) {
+    if (!isOpen || usesBottomSheet) {
       return;
     }
     const handleEscape = e => {
@@ -249,7 +324,7 @@ export function ContextMenu({
     return () => {
       document.removeEventListener('keydown', handleEscape);
     };
-  }, [isOpen, closeMenu]);
+  }, [isOpen, closeMenu, usesBottomSheet]);
   const listKeyDown = useCallback(e => {
     // A submenu flyout renders inline inside this menu; its key events bubble
     // up here. Let that level own them — only handle events from this level.
@@ -298,9 +373,13 @@ export function ContextMenu({
     // Remember the element focused before opening so we can restore it on
     // close (Escape or outside-click), instead of dropping focus to <body>.
     triggerFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : focusEl;
-    layer.show();
-    requestAnimationFrame(() => focusFirst());
-  }, [layer, focusFirst]);
+    if (usesBottomSheet) {
+      updateOpenState(true);
+    } else {
+      layer.show();
+      requestAnimationFrame(() => focusFirst());
+    }
+  }, [layer, focusFirst, updateOpenState, usesBottomSheet]);
   const handleContextMenu = useCallback(e => {
     if (isDisabled) {
       return;
@@ -337,6 +416,54 @@ export function ContextMenu({
     menuSize: size
   }), [closeMenu, size]);
   const resolvedMenuContent = itemsProp !== undefined ? renderDropdownItems(items) : menuContent;
+  const renderedMenu = /*#__PURE__*/_jsx("div", {
+    ref: listRef,
+    id: menuId,
+    role: "menu",
+    "data-autofocus": usesBottomSheet ? '' : undefined,
+    tabIndex: usesBottomSheet ? 0 : -1,
+    "aria-label": label,
+    onKeyDown: listKeyDown,
+    onContextMenu: e => e.preventDefault(),
+    ...mergeProps(themeProps('context-menu'), stylex.props(usesBottomSheet ? styles.sheetMenu : styles.menu, xstyle), className, style),
+    children: /*#__PURE__*/_jsx(DropdownMenuContext, {
+      value: contextValue,
+      children: resolvedMenuContent
+    })
+  });
+  const renderedBottomSheetContent = itemsProp !== undefined ? /*#__PURE__*/_jsxs("div", {
+    ref: listRef,
+    "data-autofocus": "",
+    tabIndex: 0,
+    ...mergeProps(themeProps('context-menu'), stylex.props(styles.sheetMenu, xstyle), className, style),
+    children: [/*#__PURE__*/_jsxs("div", {
+      ...{
+        className: "x78zum5 x1q0g3np x6s0dn4 xzye2dw x1p37lm5"
+      },
+      children: [submenuPath.length > 0 && /*#__PURE__*/_jsx(Button, {
+        label: backLabel,
+        variant: "ghost",
+        size: "sm",
+        icon: /*#__PURE__*/_jsx(Icon, {
+          icon: "chevronLeft",
+          size: "sm",
+          xstyle: rtlStyles.mirror
+        }),
+        isIconOnly: true,
+        onClick: () => setSubmenuPath(path => path.slice(0, -1))
+      }), /*#__PURE__*/_jsx(Heading, {
+        ref: sheetHeadingRef,
+        level: 3,
+        tabIndex: -1,
+        xstyle: [styles.sheetViewHeading, submenuPath.length === 0 && styles.sheetRootHeading],
+        children: currentTitle
+      })]
+    }), /*#__PURE__*/_jsx(MenuBottomSheetActionList, {
+      items: currentItems,
+      onSelect: handleBottomSheetSelect,
+      onOpenSubmenu: item => setSubmenuPath(path => [...path, item])
+    })]
+  }) : renderedMenu;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs("div", {
       ref: useMergedRefs(ref, triggerRef),
@@ -357,19 +484,15 @@ export function ContextMenu({
           }
         })
       })]
-    }), layer.render(/*#__PURE__*/_jsx("div", {
-      ref: listRef,
-      id: menuId,
-      role: "menu",
-      "aria-label": label,
-      onKeyDown: listKeyDown,
-      onContextMenu: e => e.preventDefault(),
-      ...mergeProps(themeProps('context-menu'), stylex.props(styles.menu, xstyle), className, style),
-      children: /*#__PURE__*/_jsx(DropdownMenuContext, {
-        value: contextValue,
-        children: resolvedMenuContent
+    }), usesBottomSheet ? /*#__PURE__*/_jsx(Suspense, {
+      fallback: null,
+      children: /*#__PURE__*/_jsx(LazyMenuBottomSheet, {
+        isOpen: isOpen,
+        onOpenChange: updateOpenState,
+        label: sheetLabel,
+        children: renderedBottomSheetContent
       })
-    }), {
+    }) : layer.render(renderedMenu, {
       placement: 'below',
       alignment: 'start',
       xstyle: [popoverXstyle, layerAnimations.below]