@astryxdesign/lab 0.4.5-canary.a7ba3a0 → 0.4.5-canary.c2bb31b

package/dist/Drawer/Drawer.d.ts

@@ -4,10 +4,17 @@
  * @output Exports Drawer component and DrawerProps
  * @position Lab implementation; consumed by index.ts, tested by Drawer.test.tsx, demonstrated in Storybook
  *
- * Edge-anchored overlay panel for inspectors, detail views, and sheets —
- * the "click a table row, see its details" pattern. Slides in from any of
- * the four edges: inline start/end (side panels) or block top/bottom
- * (full-width sheets).
+ * Overlay panel for inspectors and detail views — the "click a table row,
+ * see its details" pattern. Slides in from the inline start or end edge and
+ * floats above the page content: unlike a docked panel it never reflows the
+ * layout underneath, it overlays it (with or without a scrim).
+ *
+ * Inline axis only (start/end). Block-axis sheets are BottomSheet's job;
+ * a drawer is always a full-height side panel.
+ *
+ * Sizing is viewport-aware: `width` is the desktop budget, and below
+ * the mobile breakpoint it preserves a 56px reveal of the page behind, capped
+ * by the requested width (or fills the viewport with `isFullWidthOnMobile`).
  *
  * Uses the native `<dialog>` element (same precedent as Dialog/MobileNav):
  * - `showModal()` when `hasScrim` (default) — top-layer rendering, focus
@@ -36,36 +43,42 @@ export interface DrawerProps extends BaseProps<HTMLDialogElement> {
     /** Ref forwarded to the root <dialog> element */
     ref?: React.Ref<HTMLDialogElement>;
     /**
-     * Whether the drawer is open. Fully controlled — pair with `onClose`.
+     * Whether the drawer is open. Fully controlled — pair with `onOpenChange`.
      */
     isOpen: boolean;
     /**
-     * Called when the drawer requests to be closed
-     * (Escape key, scrim click, built-in close button). The caller owns the
-     * open state. When sibling drawers are open, Escape only closes the
-     * top (last-opened) drawer.
+     * Called when the drawer requests an open-state change. Escape, scrim
+     * click, and the built-in close button call it with `false`. The caller owns
+     * the open state. When sibling drawers are open, Escape only closes the top
+     * (last-opened) drawer.
      */
-    onClose: () => void;
+    onOpenChange: (isOpen: boolean) => void;
     /**
      * Which edge the drawer slides from.
      * - `'end'` — inline-end edge (right in LTR) — the inspector convention
      * - `'start'` — inline-start edge (left in LTR)
-     * - `'top'` / `'bottom'` — full-width sheets on the block axis
      * @default 'end'
      */
-    side?: 'start' | 'end' | 'top' | 'bottom';
+    side?: 'start' | 'end';
     /**
-     * Size budget of the panel along its slide axis: width for
-     * `side="start"/"end"`, height for `side="top"/"bottom"`. A number is
-     * pixels; a string is any CSS length (`'50%'`, `'40dvh'`). On viewports
-     * smaller than the budget the drawer fills the axis.
+     * Desktop width budget. A number is pixels; a string is any CSS length
+     * (`'50%'`, `'32rem'`). Below the mobile breakpoint (640px), this
+     * remains the maximum while the drawer preserves a 56px reveal of the page
+     * behind — see `isFullWidthOnMobile`.
      * @default 400
      */
-    size?: number | string;
+    width?: number | string;
+    /**
+     * Whether the drawer covers the full viewport width on mobile
+     * (below 640px) instead of preserving the default 56px reveal of the page
+     * behind. The reveal makes the drawer read as an overlay rather than a
+     * navigation.
+     * @default false
+     */
+    isFullWidthOnMobile?: boolean;
     /**
      * Accessible label for the drawer (required — the drawer has no
-     * built-in heading to derive a name from). Also names the built-in
-     * collapse/expand affordances.
+     * built-in heading to derive a name from).
      */
     label: string;
     /**
@@ -79,24 +92,11 @@ export interface DrawerProps extends BaseProps<HTMLDialogElement> {
     hasScrim?: boolean;
     /**
      * Whether to render the built-in close button in the top-trailing
-     * corner. Defaults to the `hasScrim` value: modal drawers get a close
-     * button, non-modal drawers don't.
-     * @default hasScrim
+     * corner. Enabled by default for both modal and non-modal drawers so every
+     * overlay has an obvious dismissal affordance.
+     * @default true
      */
     hasCloseButton?: boolean;
-    /**
-     * Collapse the drawer to a narrow click-to-expand rail. Only supported
-     * for non-modal (`hasScrim={false}`) drawers with `side="start"/"end"`;
-     * ignored (with a dev warning) otherwise. Controlled — pair with
-     * `onCollapsedChange`.
-     */
-    isCollapsed?: boolean;
-    /**
-     * Called when the built-in collapse/expand affordances are used.
-     * Providing it renders a collapse toggle next to the close button while
-     * expanded; the collapsed rail always expands on click.
-     */
-    onCollapsedChange?: (collapsed: boolean) => void;
     /**
      * Drawer content. Rendered inside a full-height scrollable area.
      * Focus the element with `data-autofocus` on open, if present.
@@ -108,27 +108,29 @@ export interface DrawerProps extends BaseProps<HTMLDialogElement> {
     'data-testid'?: string;
 }
 /**
- * An edge-anchored overlay panel for inspectors, detail views, and sheets.
+ * An overlay panel for inspectors and detail views.
  *
- * Slides in from the logical start/end edge (side panel) or the top/bottom
- * edge (full-width sheet) using the native `<dialog>` element: modal with a
- * scrim by default, or a non-modal inline overlay with `hasScrim={false}`.
- * Escape closes the top-most open drawer; focus returns to the element that
- * opened the drawer. Non-modal side drawers can collapse to a rail via
- * `isCollapsed`/`onCollapsedChange`.
+ * Slides in from the logical start or end edge and floats above the page
+ * using the native `<dialog>` element: modal with a scrim by default, or a
+ * non-modal overlay with `hasScrim={false}` that leaves the page behind
+ * interactive. `width` is the desktop budget; below 640px the panel preserves
+ * a 56px page reveal without exceeding that budget (or fills the viewport
+ * with `isFullWidthOnMobile`). Escape
+ * closes the top-most open drawer; focus returns to the element that
+ * opened it.
  *
  * @example
  * ```
  * const [selected, setSelected] = useState(null);
  * <Drawer
  *   isOpen={selected != null}
- *   onClose={() => setSelected(null)}
+ *   onOpenChange={isOpen => !isOpen && setSelected(null)}
  *   label={`Details: ${selected?.name}`}>
  *   <HostDetails host={selected} />
  * </Drawer>
  * ```
  */
-export declare function Drawer({ isOpen, onClose, side, size, label, hasScrim, hasCloseButton, isCollapsed, onCollapsedChange, children, xstyle, className, style, ref, ...props }: DrawerProps): import("react").JSX.Element;
+export declare function Drawer({ isOpen, onOpenChange, side, width, isFullWidthOnMobile, label, hasScrim, hasCloseButton, children, xstyle, className, style, onClick: onClickProp, onKeyDown: onKeyDownProp, ref, ...props }: DrawerProps): import("react").JSX.Element;
 export declare namespace Drawer {
     var displayName: string;
 }

package/dist/Drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AA8SlD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,iDAAiD;IACjD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,CAAC;IAE1C;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEvB;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAEjD;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,OAAO,EACP,IAAY,EACZ,IAAU,EACV,KAAK,EACL,QAAe,EACf,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAoQb;yBApRe,MAAM"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAsOlD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,iDAAiD;IACjD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAEvB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,YAAY,EACZ,IAAY,EACZ,KAAW,EACX,mBAA2B,EAC3B,KAAK,EACL,QAAe,EACf,cAAqB,EACrB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAmMb;yBApNe,MAAM"}

package/dist/Drawer/Drawer.js

@@ -8,10 +8,17 @@
  * @output Exports Drawer component and DrawerProps
  * @position Lab implementation; consumed by index.ts, tested by Drawer.test.tsx, demonstrated in Storybook
  *
- * Edge-anchored overlay panel for inspectors, detail views, and sheets —
- * the "click a table row, see its details" pattern. Slides in from any of
- * the four edges: inline start/end (side panels) or block top/bottom
- * (full-width sheets).
+ * Overlay panel for inspectors and detail views — the "click a table row,
+ * see its details" pattern. Slides in from the inline start or end edge and
+ * floats above the page content: unlike a docked panel it never reflows the
+ * layout underneath, it overlays it (with or without a scrim).
+ *
+ * Inline axis only (start/end). Block-axis sheets are BottomSheet's job;
+ * a drawer is always a full-height side panel.
+ *
+ * Sizing is viewport-aware: `width` is the desktop budget, and below
+ * the mobile breakpoint it preserves a 56px reveal of the page behind, capped
+ * by the requested width (or fills the viewport with `isFullWidthOnMobile`).
  *
  * Uses the native `<dialog>` element (same precedent as Dialog/MobileNav):
  * - `showModal()` when `hasScrim` (default) — top-layer rendering, focus
@@ -37,11 +44,11 @@
 import { useCallback, useEffect, useId, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import '@astryxdesign/core/theme/tokens.stylex';
-import { borderVars, colorVars, durationVars, easeVars, shadowVars, spacingVars, typeScaleVars } from '@astryxdesign/core/theme/tokens.stylex';
+import { borderVars, colorVars, durationVars, easeVars, shadowVars, spacingVars } from '@astryxdesign/core/theme/tokens.stylex';
 import { Icon } from '@astryxdesign/core/Icon';
 import { IconButton } from '@astryxdesign/core/IconButton';
-import { useScrollLock, useDevWarning } from '@astryxdesign/core/hooks';
-import { mergeProps, mergeRefs, themeProps } from '@astryxdesign/core/utils';
+import { useScrollLock } from '@astryxdesign/core/hooks';
+import { composeEventHandlers, mergeProps, mergeRefs, themeProps } from '@astryxdesign/core/utils';
 import { overlayPaddingReset } from '@astryxdesign/core/Layout';
 
 // =============================================================================
@@ -86,14 +93,22 @@ function isTopDrawer(id) {
 // Styles
 // =============================================================================
 
-// Structural rail width when collapsed — wide enough for a 44px touch
-// target, matching the raw-number convention used for the size default.
-const RAIL_WIDTH = 44;
+// Below this viewport width the drawer preserves a fixed reveal of the page
+// behind instead of growing proportionally with the viewport. 640px is the
+// repo's mobile breakpoint.
+const MOBILE_BREAKPOINT = 640;
+
+// Material's established mobile drawer pattern leaves a 56dp reveal. Using
+// the same value in CSS pixels gives the overlay a stable visual relationship
+// to the page behind while the requested width remains an upper bound.
+const MOBILE_PAGE_REVEAL = 56;
+const MOBILE_WIDTH_FULL = '100dvw';
 const styles = {
   dialog: {
     kVAEAm: "xixxii4",
     kogj98: "x1ghz6dp",
     kmVPX3: "x1717udv",
+    kaIpWk: "x2u8bby",
     ks0D6T: "x1x1rfll",
     kskxy: "x7ab17h",
     kB7OPa: "x9f619",
@@ -103,8 +118,11 @@ const styles = {
     kVQacm: "xb3r6kr",
     kZeWKH: "xish69e",
     kI3sdo: "x1a2a7pz",
+    k87sOh: "x13vifvy",
+    krVfgx: "x1ey2m1c",
+    kZKoxP: "xtdtrs8",
     k1xSpc: "x1s85apg",
-    k1ekBW: "x1yw18vd",
+    k1ekBW: "xayqnl7",
     kIyJzY: "x80gvsz",
     kAMwcw: "xlr8y92",
     kzIqYQ: "xd00j3c",
@@ -116,11 +134,8 @@ const styles = {
     $$css: true
   },
   end: {
-    k87sOh: "x13vifvy",
-    krVfgx: "x1ey2m1c",
     kt4wiu: "xtijo5x",
     kLqNvP: "xhi6v0a",
-    kZKoxP: "xtdtrs8",
     k2ei4v: "xgbv0en",
     kVhnKS: "x1t7ytsu",
     kGJrpR: "x1j92z86",
@@ -132,11 +147,8 @@ const styles = {
     $$css: true
   },
   start: {
-    k87sOh: "x13vifvy",
-    krVfgx: "x1ey2m1c",
     kLqNvP: "x1o0tod",
     kt4wiu: "x1woyocn",
-    kZKoxP: "xtdtrs8",
     ke9TFa: "xw8tdv1",
     k8ry5P: "x18b5jzi",
     kBCPoo: "x1gejf6u",
@@ -147,38 +159,6 @@ const styles = {
     k3aq6I: "xbryuvx x6mt36l x14gflnl",
     $$css: true
   },
-  top: {
-    kzqmXN: "x1o6l61p",
-    kLqNvP: "x1o0tod",
-    kt4wiu: "xtijo5x",
-    k87sOh: "x13vifvy",
-    krVfgx: "xdd4er5",
-    kt9PQ7: "x92x3c3",
-    kfdmCh: "x1q0q8m5",
-    kL6WhQ: "xw8gpjh",
-    k3aq6I: "x105ttfm",
-    $$css: true
-  },
-  topOpen: {
-    k3aq6I: "xnn1q72 xub2912",
-    $$css: true
-  },
-  bottom: {
-    kzqmXN: "x1o6l61p",
-    kLqNvP: "x1o0tod",
-    kt4wiu: "xtijo5x",
-    krVfgx: "x1ey2m1c",
-    k87sOh: "x80663w",
-    kEafiO: "x11xkdxz",
-    kPef9Z: "x13fuv20",
-    kLZC3w: "x1pc3f07",
-    k3aq6I: "x1weeur4",
-    $$css: true
-  },
-  bottomOpen: {
-    k3aq6I: "xnn1q72 xhbqy3z",
-    $$css: true
-  },
   scrim: {
     kGyWv1: "xnixb3f",
     kba3nw: "x1abwkk1",
@@ -192,32 +172,19 @@ const styles = {
   scrimOpen: {
     k5sjJv: "xb3n6bw xxiuuzi",
     $$css: true
-  },
-  collapsedRail: {
-    ks0D6T: "x1k2d6hx",
-    $$css: true
   }
 };
 const _temp = {
-  kzqmXN: "x1o6l61p",
-  "$$css": true
-};
-const _temp2 = {
-  kZKoxP: "xtdtrs8",
+  ks0D6T: "xlbgzzq",
   "$$css": true
 };
 const dynamicStyles = {
-  inlineSize: s => [_temp, {
-    ks0D6T: s != null ? "xf68679" : s,
+  inlineSize: (desktopWidth, mobileWidth) => [_temp, {
+    kzqmXN: (desktopWidth != null ? "x11ymkkh " : desktopWidth) + (mobileWidth != null ? "xci7e5a" : mobileWidth),
     $$css: true
   }, {
-    "--x-maxWidth": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(s)
-  }],
-  blockSize: s => [_temp2, {
-    kskxy: s != null ? "x1jols5v" : s,
-    $$css: true
-  }, {
-    "--x-maxHeight": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(s)
+    "--x-1xmrurk": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(desktopWidth),
+    "--x-fqzwsx": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(mobileWidth)
   }],
   stackZ: z => [{
     kY2c9j: z != null ? "xr3buco" : z,
@@ -236,21 +203,23 @@ const dynamicStyles = {
 // =============================================================================
 
 /**
- * An edge-anchored overlay panel for inspectors, detail views, and sheets.
+ * An overlay panel for inspectors and detail views.
  *
- * Slides in from the logical start/end edge (side panel) or the top/bottom
- * edge (full-width sheet) using the native `<dialog>` element: modal with a
- * scrim by default, or a non-modal inline overlay with `hasScrim={false}`.
- * Escape closes the top-most open drawer; focus returns to the element that
- * opened the drawer. Non-modal side drawers can collapse to a rail via
- * `isCollapsed`/`onCollapsedChange`.
+ * Slides in from the logical start or end edge and floats above the page
+ * using the native `<dialog>` element: modal with a scrim by default, or a
+ * non-modal overlay with `hasScrim={false}` that leaves the page behind
+ * interactive. `width` is the desktop budget; below 640px the panel preserves
+ * a 56px page reveal without exceeding that budget (or fills the viewport
+ * with `isFullWidthOnMobile`). Escape
+ * closes the top-most open drawer; focus returns to the element that
+ * opened it.
  *
  * @example
  * ```
  * const [selected, setSelected] = useState(null);
  * <Drawer
  *   isOpen={selected != null}
- *   onClose={() => setSelected(null)}
+ *   onOpenChange={isOpen => !isOpen && setSelected(null)}
  *   label={`Details: ${selected?.name}`}>
  *   <HostDetails host={selected} />
  * </Drawer>
@@ -258,18 +227,19 @@ const dynamicStyles = {
  */
 export function Drawer({
   isOpen,
-  onClose,
+  onOpenChange,
   side = 'end',
-  size = 400,
+  width = 400,
+  isFullWidthOnMobile = false,
   label,
   hasScrim = true,
-  hasCloseButton,
-  isCollapsed,
-  onCollapsedChange,
+  hasCloseButton = true,
   children,
   xstyle,
   className,
   style,
+  onClick: onClickProp,
+  onKeyDown: onKeyDownProp,
   ref,
   ...props
 }) {
@@ -277,23 +247,15 @@ export function Drawer({
   const closeTimeoutRef = useRef(null);
   // Element focused when the drawer opened — restored on close.
   const triggerElementRef = useRef(null);
-  // Registry identity + latest onClose (stable across re-renders so the
-  // registration effect doesn't churn on every onClose identity change).
+  // Registry identity + latest onOpenChange (stable across re-renders so the
+  // registration effect doesn't churn on every onOpenChange identity change).
   const drawerId = useId();
-  const onCloseRef = useRef(onClose);
+  const onOpenChangeRef = useRef(onOpenChange);
   useEffect(() => {
-    onCloseRef.current = onClose;
-  }, [onClose]);
+    onOpenChangeRef.current = onOpenChange;
+  }, [onOpenChange]);
   // z-index assigned by the registry on open (non-modal stacking only).
   const [stackZ, setStackZ] = useState(NON_MODAL_BASE_Z);
-  const isSheet = side === 'top' || side === 'bottom';
-  // Collapse only makes sense for a persistent (non-modal) side panel.
-  const canCollapse = !hasScrim && !isSheet;
-  const collapsed = canCollapse && isCollapsed === true;
-  const showCloseButton = hasCloseButton ?? hasScrim;
-
-  // Dev warning for unsupported collapse combinations.
-  useDevWarning('Drawer', '`isCollapsed` is only supported for non-modal drawers ' + '(hasScrim={false}) with side="start" or side="end". The prop is ' + 'ignored.', isCollapsed != null && !canCollapse);
 
   // Open/close the native dialog. close() is delayed so the slide-out
   // transition can play; focus restore happens after close() because a
@@ -365,7 +327,7 @@ export function Drawer({
     if (!isOpen) {
       return;
     }
-    const z = registerDrawer(drawerId, () => onCloseRef.current());
+    const z = registerDrawer(drawerId, () => onOpenChangeRef.current(false));
     setStackZ(z);
     return () => unregisterDrawer(drawerId);
   }, [isOpen, drawerId]);
@@ -374,57 +336,40 @@ export function Drawer({
   useScrollLock(isOpen && hasScrim);
 
   // Escape closes. The native `cancel` event only fires for showModal();
-  // this keydown handler covers the non-modal show() path too. Only the
+  // this React keydown handler covers the non-modal show() path too. Only the
   // top of the drawer stack closes, so stacked siblings peel off
   // innermost-first.
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog || !isOpen) {
-      return;
-    }
-    const handleKeyDown = event => {
-      if (event.key === 'Escape') {
-        event.preventDefault();
-        if (isTopDrawer(drawerId)) {
-          onClose();
-        }
+  const handleKeyDown = useCallback(event => {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      if (isTopDrawer(drawerId)) {
+        onOpenChange(false);
       }
-    };
-    dialog.addEventListener('keydown', handleKeyDown);
-    return () => dialog.removeEventListener('keydown', handleKeyDown);
-  }, [isOpen, onClose, drawerId]);
+    }
+  }, [onOpenChange, drawerId]);
 
   // Native cancel event (browser Escape handling) — prevent the browser
-  // from closing the dialog directly and route through onClose so the
+  // from closing the dialog directly and route through onOpenChange so the
   // caller's state stays the source of truth. Same top-of-stack rule as
   // the keydown path.
   const handleCancel = useCallback(event => {
     event.preventDefault();
     if (isTopDrawer(drawerId)) {
-      onClose();
+      onOpenChange(false);
     }
-  }, [onClose, drawerId]);
+  }, [onOpenChange, drawerId]);
 
   // Clicks on the ::backdrop target the <dialog> element itself; clicks on
   // drawer content always target a child (the content area fills the panel).
   const handleClick = useCallback(event => {
     if (event.target === event.currentTarget && hasScrim) {
-      onClose();
+      onOpenChange(false);
     }
-  }, [hasScrim, onClose]);
-  const sizeValue = typeof size === 'number' ? `${size}px` : size;
-  const sideStyle = {
-    start: styles.start,
-    end: styles.end,
-    top: styles.top,
-    bottom: styles.bottom
-  }[side];
-  const sideOpenStyle = {
-    start: styles.startOpen,
-    end: styles.endOpen,
-    top: styles.topOpen,
-    bottom: styles.bottomOpen
-  }[side];
+  }, [hasScrim, onOpenChange]);
+  const widthValue = typeof width === 'number' ? `${width}px` : width;
+  const mobileWidth = isFullWidthOnMobile ? MOBILE_WIDTH_FULL : `min(${widthValue}, calc(100dvw - ${MOBILE_PAGE_REVEAL}px))`;
+  const sideStyle = side === 'start' ? styles.start : styles.end;
+  const sideOpenStyle = side === 'start' ? styles.startOpen : styles.endOpen;
 
   // Filter out native `open` to prevent InvalidStateError when passed
   const {
@@ -433,56 +378,26 @@ export function Drawer({
   } = props;
   return /*#__PURE__*/_jsxs("dialog", {
     ref: mergeRefs(ref, dialogRef),
-    "aria-label": label,
-    "aria-modal": hasScrim ? 'true' : undefined,
-    onClick: handleClick,
-    onCancel: handleCancel,
     ...mergeProps(themeProps('drawer', {
       side
-    }), stylex.props(styles.dialog, overlayPaddingReset.reset, sideStyle, isSheet ? dynamicStyles.blockSize(sizeValue) : dynamicStyles.inlineSize(sizeValue), isOpen && styles.open, isOpen && sideOpenStyle, hasScrim ? styles.scrim : dynamicStyles.stackZ(stackZ), hasScrim && isOpen && styles.scrimOpen, collapsed && styles.collapsedRail, xstyle), className, style),
+    }), stylex.props(styles.dialog, overlayPaddingReset.reset, sideStyle, dynamicStyles.inlineSize(widthValue, mobileWidth), isOpen && styles.open, isOpen && sideOpenStyle, hasScrim ? styles.scrim : dynamicStyles.stackZ(stackZ), hasScrim && isOpen && styles.scrimOpen, xstyle), className, style),
     ...safeProps,
+    "aria-label": label,
+    "aria-modal": hasScrim ? 'true' : undefined,
+    onClick: composeEventHandlers(onClickProp, handleClick),
+    onKeyDown: composeEventHandlers(onKeyDownProp, handleKeyDown),
+    onCancel: handleCancel,
     children: [/*#__PURE__*/_jsx("div", {
       tabIndex: -1,
       ...{
-        0: {
-          className: "x1iyjqo2 x2lwn1j xh8yej3 x1odjw0f x6ikm8r xish69e xx69xxh x1a2a7pz"
-        },
-        1: {
-          className: "x1iyjqo2 x2lwn1j xh8yej3 x1odjw0f x6ikm8r xish69e xx69xxh x1a2a7pz x1s85apg"
-        }
-      }[!!collapsed << 0],
+        className: "x1iyjqo2 x2lwn1j xh8yej3 x1odjw0f x6ikm8r xish69e xx69xxh x1a148e8 x1a2a7pz"
+      },
       children: children
-    }), collapsed ?
-    /*#__PURE__*/
-    // Collapsed rail: one full-size expand button with the label
-    // reading vertically.
-    _jsx("button", {
-      type: "button",
-      "aria-label": `Expand ${label}`,
-      onClick: () => onCollapsedChange?.(false),
-      ...{
-        0: {
-          className: "xjyslct xng3xce x1ghz6dp x8o8v82 x7a5moj x1iyjqo2 xh8yej3 x2lwn1j x78zum5 x6s0dn4 xl56j7k x1ypdohk xjbqb8w xtao9ic xv1l7n4 xjb2p0i xcr08ib xmhvcl5 x1kq96og xuxw1ft xb3r6kr xlyipyv x98t3bc x1a2a7pz"
-        },
-        1: {
-          className: "xjyslct xng3xce x1ghz6dp x8o8v82 x7a5moj x1iyjqo2 xh8yej3 x2lwn1j x78zum5 x6s0dn4 xl56j7k x1ypdohk xjbqb8w xtao9ic xv1l7n4 xjb2p0i xcr08ib xmhvcl5 x1kq96og xuxw1ft xb3r6kr xlyipyv x98t3bc x1a2a7pz x19jd1h0"
-        }
-      }[!!(side === 'start') << 0],
-      children: label
-    }) : (showCloseButton || canCollapse && onCollapsedChange != null) && /*#__PURE__*/_jsxs("div", {
+    }), hasCloseButton && /*#__PURE__*/_jsx("div", {
       ...{
         className: "x10l6tqk xctzyg x72tfeb x78zum5 xzye2dw x1vjfegm"
       },
-      children: [canCollapse && onCollapsedChange != null && /*#__PURE__*/_jsx(IconButton, {
-        icon: /*#__PURE__*/_jsx(Icon, {
-          icon: side === 'start' ? 'chevronLeft' : 'chevronRight',
-          size: "sm",
-          color: "inherit"
-        }),
-        label: `Collapse ${label}`,
-        variant: "ghost",
-        onClick: () => onCollapsedChange(true)
-      }), showCloseButton && /*#__PURE__*/_jsx(IconButton, {
+      children: /*#__PURE__*/_jsx(IconButton, {
         icon: /*#__PURE__*/_jsx(Icon, {
           icon: "close",
           size: "sm",
@@ -490,8 +405,8 @@ export function Drawer({
         }),
         label: "Close",
         variant: "ghost",
-        onClick: onClose
-      })]
+        onClick: () => onOpenChange(false)
+      })
     })]
   });
 }