diff --git a/apps/storybook/stories/Drawer.stories.tsx b/apps/storybook/stories/Drawer.stories.tsx
index 2020a72e56c..48dfaa61df6 100644
--- a/apps/storybook/stories/Drawer.stories.tsx
+++ b/apps/storybook/stories/Drawer.stories.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.

 import type {Meta, StoryObj} from '@storybook/react';
-import {useState} from 'react';
+import {useRef, useState} from 'react';
 import {Drawer} from '@astryxdesign/lab';
 import {Button} from '@astryxdesign/core/Button';
 import {CheckboxInput} from '@astryxdesign/core/CheckboxInput';
@@ -149,6 +149,82 @@ export const RowInspector: Story = {
   },
 };

+/**
+ * `containerRef` binds the drawer to an element instead of the viewport: the
+ * panel slides against the pane's edge, at the pane's height, and its scrim
+ * dims only that pane. The rest of the page stays live — the browser top
+ * layer is always viewport-sized, so containment and modality cannot both be
+ * had. Give the container `position: relative`.
+ */
+export const Bounded: Story = {
+  render: () => {
+    const paneRef = useRef<HTMLDivElement>(null);
+    const [selectedId, setSelectedId] = useState<string | null>(null);
+    const selected = HOSTS.find(host => host.id === selectedId);
+    return (
+      <VStack gap={3}>
+        <Text type="supporting" color="secondary">
+          The drawer is bound to the bordered pane. Everything outside it stays
+          interactive while the drawer is open.
+        </Text>
+        <div
+          ref={paneRef}
+          style={{
+            position: 'relative',
+            overflow: 'hidden',
+            height: 300,
+            border: '1px solid var(--color-border)',
+            borderRadius: 'var(--radius-md)',
+          }}>
+          <Section padding={4}>
+            <VStack gap={1}>
+              <Heading level={3}>Hosts</Heading>
+              {HOSTS.map(host => (
+                <Button
+                  key={host.id}
+                  variant="ghost"
+                  label={`${host.id} / ${host.region}`}
+                  onClick={() => setSelectedId(host.id)}
+                />
+              ))}
+            </VStack>
+          </Section>
+        </div>
+        <Button
+          label="Still clickable while the drawer is open"
+          variant="secondary"
+        />
+        <Drawer
+          isOpen={selected != null}
+          onOpenChange={isOpen => !isOpen && setSelectedId(null)}
+          label={selected ? `Host details: ${selected.id}` : 'Host details'}
+          containerRef={paneRef}
+          width={260}>
+          {selected != null && (
+            <Section padding={4}>
+              <VStack gap={4}>
+                <VStack gap={1}>
+                  <Heading level={3}>{selected.id}</Heading>
+                  <Text type="supporting" color="secondary">
+                    {selected.region}
+                  </Text>
+                </VStack>
+                <Divider />
+                <VStack gap={2}>
+                  <Text type="label">Status</Text>
+                  <Text type="body">{selected.status}</Text>
+                  <Text type="label">CPU</Text>
+                  <Text type="body">{selected.cpu}</Text>
+                </VStack>
+              </VStack>
+            </Section>
+          )}
+        </Drawer>
+      </VStack>
+    );
+  },
+};
+
 /**
  * Both edges. `side="start"` is left in LTR (and right in RTL) — use it for
  * navigation-adjacent content; `end` is the inspector convention.
diff --git a/packages/lab/src/Drawer/Drawer.doc.mjs b/packages/lab/src/Drawer/Drawer.doc.mjs
index f01610273c1..1bb1c22cada 100644
--- a/packages/lab/src/Drawer/Drawer.doc.mjs
+++ b/packages/lab/src/Drawer/Drawer.doc.mjs
@@ -77,9 +77,15 @@ export const docs = {
       name: 'hasScrim',
       type: 'boolean',
       description:
-        'Modal scrim behind the drawer. true uses showModal() (top layer, focus trap, scroll lock; clicking the scrim closes; modal only); false uses show() for a non-modal overlay that does NOT trap focus and keeps the page behind interactive.',
+        'Modal scrim behind the drawer. true uses showModal() (top layer, focus trap, scroll lock; clicking the scrim closes; modal only); false uses show() for a non-modal overlay that does NOT trap focus and keeps the page behind interactive. With containerRef the drawer is never modal — true renders a container-confined scrim instead.',
       default: 'true',
     },
+    {
+      name: 'containerRef',
+      type: 'React.RefObject<HTMLElement | null>',
+      description:
+        "Bind the drawer to an element instead of the viewport: the panel is portalled into it and slides against ITS edge, at its height — the inspector that belongs to one pane rather than the whole screen. Give the container position: relative; it needs no overflow rule — the drawer clips itself to the container. A bounded drawer is never modal (the top layer is always viewport-sized), so hasScrim renders a scrim confined to the container that dims and dismisses without trapping focus or making the page inert.",
+    },
     {
       name: 'hasCloseButton',
       type: 'boolean',
@@ -90,7 +96,7 @@ export const docs = {
   ],
   usage: {
     description:
-      'A side panel that floats above page content for inspectors and detail views: the "click a table row, see its details" pattern. Unlike a docked panel it overlays the layout instead of reflowing it. Works on desktop and touch: the width budget applies on desktop and the panel preserves a 56px page reveal below 640px without exceeding the width budget. Escape closes the drawer and focus returns to the element that opened it. Entry/exit slide animation respects prefers-reduced-motion. Stacking contract: sibling drawers stack last-opened on top, Escape closes only the topmost, and closing peels innermost-first; render them as siblings, never nested.',
+      'A side panel that floats above page content for inspectors and detail views: the "click a table row, see its details" pattern. Unlike a docked panel it overlays the layout instead of reflowing it. Works on desktop and touch: the width budget applies on desktop and the panel preserves a 56px page reveal below 640px without exceeding the width budget. Escape closes the drawer and focus returns to the element that opened it. Entry/exit slide animation respects prefers-reduced-motion. Stacking contract: sibling drawers stack last-opened on top, Escape closes only the topmost, and closing peels innermost-first; render them as siblings, never nested. containerRef binds the drawer to an element instead of the viewport, for a pane-level inspector; a bounded drawer is contextual, never modal.',
     bestPractices: [
       {
         guidance: true,
@@ -112,6 +118,16 @@ export const docs = {
         description:
           'Keep the last-selected item rendered on close: children stay mounted during the exit animation, so nulling content mid-close blanks the panel while it slides out.',
       },
+      {
+        guidance: true,
+        description:
+          'Use containerRef when the drawer belongs to one pane rather than the page — a split view, a dashboard card, a canvas. Give the container position: relative; it needs no overflow rule — the drawer clips itself to the container.',
+      },
+      {
+        guidance: false,
+        description:
+          'Expect a bounded drawer to be modal: the browser top layer is always viewport-sized, so containerRef trades modality for containment. Use the viewport drawer when the rest of the page must be blocked.',
+      },
       {
         guidance: false,
         description:
@@ -169,6 +185,22 @@ const [lineItem, setLineItem] = useState(null);
 </>
 // Last-opened stacks on top; Escape closes the line item first.`,
     },
+    {
+      label: 'Bounded to a pane (containerRef)',
+      code: `const paneRef = useRef(null);
+const [selected, setSelected] = useState(null);
+<div ref={paneRef} style={{position: 'relative'}}>
+  <HostTable onSelect={setSelected} />
+</div>
+<Drawer
+  isOpen={selected != null}
+  onOpenChange={isOpen => !isOpen && setSelected(null)}
+  label="Host details"
+  containerRef={paneRef}>
+  <HostDetails host={selected} />
+</Drawer>
+// The panel slides against the pane's edge, at the pane's height.`,
+    },
   ],
 };

@@ -176,7 +208,7 @@ const [lineItem, setLineItem] = useState(null);
 export const docsZh = {
   usage: {
     description:
-      '浮在页面内容之上的侧边面板，用于检查器和详情视图——"点击表格行查看详情"的模式。与停靠面板不同，它覆盖在布局之上，不会挤压页面。桌面端按 width 设定宽度，宽度小于 640px 时保留 56px 的底层页面，并且不超过 width 上限。按 Escape 关闭抽屉，焦点返回到打开它的元素。滑入/滑出动画遵循 prefers-reduced-motion。堆叠约定：同级抽屉后开的在上层，Escape 只关闭最上层的，关闭顺序由内向外——请以同级方式渲染，切勿嵌套。',
+      '浮在页面内容之上的侧边面板，用于检查器和详情视图——"点击表格行查看详情"的模式。与停靠面板不同，它覆盖在布局之上，不会挤压页面。桌面端按 width 设定宽度，宽度小于 640px 时保留 56px 的底层页面，并且不超过 width 上限。按 Escape 关闭抽屉，焦点返回到打开它的元素。滑入/滑出动画遵循 prefers-reduced-motion。堆叠约定：同级抽屉后开的在上层，Escape 只关闭最上层的，关闭顺序由内向外——请以同级方式渲染，切勿嵌套。containerRef 可将抽屉绑定到某个元素而非视口，用于面板级检查器；受限抽屉是上下文式的，永远不是模态。',
     bestPractices: [
       {
         guidance: true,
@@ -198,6 +230,16 @@ export const docsZh = {
         description:
           '关闭时保留最后选中的内容：退出动画期间子内容仍然挂载，中途置空会让面板在滑出时变为空白。',
       },
+      {
+        guidance: true,
+        description:
+          '当抽屉属于某个面板而非整个页面（分栏视图、仪表盘卡片、画布）时使用 containerRef，并给容器设置 position: relative；无需设置 overflow，抽屉会自行裁剪到容器内。',
+      },
+      {
+        guidance: false,
+        description:
+          '不要期望受限抽屉是模态的：浏览器顶层始终是视口大小，containerRef 以模态性换取受限范围。需要阻挡整个页面时请使用视口抽屉。',
+      },
       {
         guidance: false,
         description:
@@ -228,7 +270,7 @@ export const docsDense = {
     'side panel floating over content (native <dialog>): start/end edge, full height',
   usage: {
     description:
-      'Overlay side panel for inspectors and detail views; floats over content, never reflows it. width = desktop budget; 56px page reveal below 640px, capped by width (isFullWidthOnMobile for all of it). Escape closes topmost; focus restores to the opener. Siblings stack last-opened on top; never nest. Slide animation respects prefers-reduced-motion.',
+      'Overlay side panel for inspectors and detail views; floats over content, never reflows it. width = desktop budget; 56px page reveal below 640px, capped by width (isFullWidthOnMobile for all of it). Escape closes topmost; focus restores to the opener. Siblings stack last-opened on top; never nest. Slide animation respects prefers-reduced-motion. containerRef binds it to an element (needs position: relative) for a pane-level inspector — contextual, never modal.',
     bestPractices: [
       {
         guidance: true,
@@ -249,6 +291,11 @@ export const docsDense = {
         description:
           'Keep last-selected content rendered on close (children stay mounted during exit).',
       },
+      {
+        guidance: true,
+        description:
+          'Use containerRef for a pane-level inspector; container needs position: relative.',
+      },
       {
         guidance: false,
         description:
diff --git a/packages/lab/src/Drawer/Drawer.test.tsx b/packages/lab/src/Drawer/Drawer.test.tsx
index d2d289670bb..16a154cb604 100644
--- a/packages/lab/src/Drawer/Drawer.test.tsx
+++ b/packages/lab/src/Drawer/Drawer.test.tsx
@@ -11,7 +11,7 @@

 import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
 import {render, screen, fireEvent, act} from '@testing-library/react';
-import {useState} from 'react';
+import {useEffect, useRef, useState} from 'react';
 import {Drawer} from './Drawer';

 // Mock dialog methods since they're not fully implemented in jsdom
@@ -650,6 +650,116 @@ describe('Drawer', () => {
     });
   });

+  describe('bounded to a container', () => {
+    function BoundedHarness({
+      hasScrim = true,
+      isOpen = true,
+    }: {
+      hasScrim?: boolean;
+      isOpen?: boolean;
+    }) {
+      const containerRef = useRef<HTMLDivElement>(null);
+      const [, force] = useState(0);
+      // One re-render so the ref is populated for the portal.
+      useEffect(() => {
+        force(1);
+      }, []);
+      // The Drawer is deliberately NOT a JSX child of the container — the
+      // point of containerRef is that the panel goes there regardless of
+      // where it is declared.
+      return (
+        <>
+          <div
+            ref={containerRef}
+            data-testid="pane"
+            style={{position: 'relative', width: 600, height: 400}}>
+            <span>pane content</span>
+          </div>
+          <Drawer
+            isOpen={isOpen}
+            onOpenChange={onOpenChange}
+            label="Row details"
+            hasScrim={hasScrim}
+            containerRef={containerRef}>
+            Bounded content
+          </Drawer>
+        </>
+      );
+    }
+
+    let onOpenChange: (isOpen: boolean) => void;
+    beforeEach(() => {
+      onOpenChange = vi.fn();
+    });
+
+    it('renders the panel inside the container, not the document body', () => {
+      render(<BoundedHarness />);
+      const pane = screen.getByTestId('pane');
+      const dialog = screen.getByRole('dialog');
+      expect(pane).toContainElement(dialog);
+    });
+
+    it('never uses the top layer, even with a scrim', () => {
+      render(<BoundedHarness hasScrim />);
+      expect(HTMLDialogElement.prototype.show).toHaveBeenCalled();
+      expect(HTMLDialogElement.prototype.showModal).not.toHaveBeenCalled();
+    });
+
+    it('is not aria-modal — the page behind stays live', () => {
+      render(<BoundedHarness hasScrim />);
+      expect(screen.getByRole('dialog')).not.toHaveAttribute('aria-modal');
+    });
+
+    it('renders its own scrim, because ::backdrop needs the top layer', () => {
+      const {rerender} = render(<BoundedHarness hasScrim />);
+      const pane = screen.getByTestId('pane');
+      const scrim = pane.querySelector('button[aria-hidden="true"]');
+      expect(scrim).not.toBeNull();
+
+      fireEvent.click(scrim as Element);
+      expect(onOpenChange).toHaveBeenCalledWith(false);
+
+      rerender(<BoundedHarness hasScrim={false} />);
+      expect(
+        screen.getByTestId('pane').querySelector('button[aria-hidden="true"]'),
+      ).toBeNull();
+    });
+
+    it('wraps the panel in a clip box, so the container is never scrolled', () => {
+      // overflow:hidden would make the container a scroll container, and the
+      // browser's focus scroll-into-view would then scroll it by exactly the
+      // entry transform — freezing the panel while the page content flies.
+      render(<BoundedHarness />);
+      const dialog = screen.getByRole('dialog');
+      const clip = dialog.parentElement as HTMLElement;
+      expect(window.getComputedStyle(clip).overflow).toBe('clip');
+      expect(screen.getByTestId('pane')).toContainElement(clip);
+    });
+
+    it('closes on Escape', () => {
+      render(<BoundedHarness />);
+      fireEvent.keyDown(screen.getByRole('dialog'), {key: 'Escape'});
+      expect(onOpenChange).toHaveBeenCalledWith(false);
+    });
+
+    it('renders nothing before the container ref resolves', () => {
+      function Unresolved() {
+        const containerRef = useRef<HTMLDivElement>(null);
+        return (
+          <Drawer
+            isOpen
+            onOpenChange={() => {}}
+            label="Details"
+            containerRef={containerRef}>
+            Content
+          </Drawer>
+        );
+      }
+      render(<Unresolved />);
+      expect(screen.queryByRole('dialog')).toBeNull();
+    });
+  });
+
   describe('container padding isolation', () => {
     it('resets container padding custom properties on the root dialog element', () => {
       render(
diff --git a/packages/lab/src/Drawer/Drawer.tsx b/packages/lab/src/Drawer/Drawer.tsx
index 2416be6b3f8..dce990f059e 100644
--- a/packages/lab/src/Drawer/Drawer.tsx
+++ b/packages/lab/src/Drawer/Drawer.tsx
@@ -4,7 +4,7 @@

 /**
  * @file Drawer.tsx
- * @input Uses React, StyleX, theme tokens, Icon/IconButton, useScrollLock, BaseProps, mergeProps/mergeRefs, themeProps
+ * @input Uses React (incl. createPortal/flushSync), StyleX, theme tokens, Icon/IconButton, useScrollLock/useDevWarning, BaseProps, mergeProps/mergeRefs, themeProps
  * @output Exports Drawer component and DrawerProps
  * @position Lab implementation; consumed by index.ts, tested by Drawer.test.tsx, demonstrated in Storybook
  *
@@ -16,6 +16,11 @@
  * Inline axis only (start/end). Block-axis sheets are BottomSheet's job;
  * a drawer is always a full-height side panel.
  *
+ * Bounded to the viewport by default; `containerRef` binds it to an element
+ * instead, so the panel slides against that element's edge at its height. A
+ * bounded drawer cannot be modal — the top layer is always viewport-sized —
+ * so it is `show()`n and carries its own scrim in place of `::backdrop`.
+ *
  * 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`).
@@ -51,7 +56,7 @@ import {
   useState,
   type ReactNode,
 } from 'react';
-import {flushSync} from 'react-dom';
+import {createPortal, flushSync} from 'react-dom';
 import * as stylex from '@stylexjs/stylex';
 import type {BaseProps} from '@astryxdesign/core';
 import {
@@ -64,7 +69,7 @@ import {
 } from '@astryxdesign/core/theme/tokens.stylex';
 import {Icon} from '@astryxdesign/core/Icon';
 import {IconButton} from '@astryxdesign/core/IconButton';
-import {useScrollLock} from '@astryxdesign/core/hooks';
+import {useDevWarning, useScrollLock} from '@astryxdesign/core/hooks';
 import {
   composeEventHandlers,
   mergeProps,
@@ -176,6 +181,11 @@ const MOBILE_BREAKPOINT = 640;
 const MOBILE_PAGE_REVEAL = 56;
 const MOBILE_WIDTH_FULL = '100dvw';

+// The bounded panel measures its reveal against the container, not the
+// viewport: `100%` on an absolutely positioned box resolves against its
+// containing block, which is the container the consumer handed us.
+const BOUNDED_WIDTH_FULL = '100%';
+
 const styles = stylex.create({
   dialog: {
     // Reset native <dialog> defaults — the dialog element IS the panel.
@@ -225,6 +235,73 @@ const styles = stylex.create({
   rendered: {
     display: 'flex',
   },
+  // Bounded: the panel is pinned to an edge of the container rather than the
+  // viewport. `position: absolute` resolves against the container (which the
+  // consumer positions), and `height: 100%` fills it instead of the screen.
+  // Never in the top layer — a top-layer element is always viewport-sized, so
+  // a bounded drawer cannot be a modal `<dialog>` and is `show()`n instead.
+  bounded: {
+    position: 'absolute',
+    height: '100%',
+  },
+  // Scrim for the bounded panel. `::backdrop` only paints for a top-layer
+  // element, so a bounded drawer renders its own and confines it to the
+  // container — which is the point: the area the drawer belongs to is the
+  // area it blocks.
+  boundedScrim: {
+    position: 'absolute',
+    insetBlockStart: 0,
+    insetBlockEnd: 0,
+    insetInlineStart: 0,
+    insetInlineEnd: 0,
+    border: 'none',
+    padding: 0,
+    cursor: 'default',
+    backgroundColor: colorVars['--color-overlay'],
+    backdropFilter: 'blur(2px)',
+    opacity: {
+      default: 1,
+      '@starting-style': 0,
+    },
+    transitionProperty: 'opacity',
+    transitionDuration: durationVars['--duration-medium'],
+    transitionTimingFunction: easeVars['--ease-standard'],
+    '@media (prefers-reduced-motion: reduce)': {
+      transitionDuration: '0.01s',
+    },
+  },
+  boundedScrimClosed: {
+    opacity: 0,
+  },
+  // The bounded panel's own clipping box, filling the container.
+  //
+  // `overflow: clip`, NOT `hidden`, and this is the whole reason the wrapper
+  // exists. `hidden` makes a box a SCROLL container: the panel enters at
+  // translateX(100%), which overflows it, and the browser's focus
+  // scroll-into-view then scrolls that box to reveal the panel — by exactly
+  // the transform, so the panel appears frozen while the page content flies
+  // past it. Measured in Chromium: with `hidden` the panel sits at x=437 for
+  // every frame while the container scrolls 0 -> 260px; with `clip` the panel
+  // animates 697 -> 437 and the container never scrolls. `clip` provides no
+  // scrolling mechanism at all, so nothing can be scrolled away.
+  //
+  // It also means the consumer's container needs no `overflow` rule of its
+  // own for the panel to stay inside it.
+  boundedClip: {
+    position: 'absolute',
+    insetBlockStart: 0,
+    insetBlockEnd: 0,
+    insetInlineStart: 0,
+    insetInlineEnd: 0,
+    overflow: 'clip',
+    // The wrapper spans the whole container, so it must not intercept the
+    // clicks the container is still meant to receive; the scrim and the panel
+    // re-enable pointer events for themselves.
+    pointerEvents: 'none',
+  },
+  boundedInteractive: {
+    pointerEvents: 'auto',
+  },
   // start/end transforms flip under RTL so the panel always slides in from
   // the edge it is anchored to.
   end: {
@@ -330,6 +407,14 @@ const dynamicStyles = stylex.create({
     },
     maxWidth: '100dvw',
   }),
+  // Bounded panels cap against the container, not the viewport.
+  boundedInlineSize: (desktopWidth: string, mobileWidth: string) => ({
+    width: {
+      default: desktopWidth,
+      [`@media (max-width: ${MOBILE_BREAKPOINT}px)`]: mobileWidth,
+    },
+    maxWidth: '100%',
+  }),
   stackZ: (z: number) => ({
     zIndex: z,
   }),
@@ -394,10 +479,29 @@ export interface DrawerProps extends BaseProps<HTMLDialogElement> {
    *   lock, click-outside-to-close.
    * - `false` — `show()`: non-modal overlay; the page behind stays
    *   interactive. Escape still closes while focus is inside the drawer.
+   *
+   * With `containerRef` the drawer is never modal: `true` renders a scrim
+   * confined to the container, which dims and dismisses but does not trap
+   * focus or make the page inert.
    * @default true
    */
   hasScrim?: boolean;

+  /**
+   * Bound the drawer to an element instead of the viewport. The panel is
+   * portalled into that element and slides against ITS edge, at its height —
+   * the master-detail inspector that belongs to one pane rather than the whole
+   * screen.
+   *
+   * The container must establish a containing block for absolute positioning:
+   * give it `position: relative` (a dev warning fires if it is `static`).
+   *
+   * A bounded drawer is never modal — the top layer is always viewport-sized,
+   * so a bounded panel cannot live in it. With `hasScrim` it dims and blocks
+   * the container; the rest of the page stays live and focus is not trapped.
+   */
+  containerRef?: React.RefObject<HTMLElement | null>;
+
   /**
    * Whether to render the built-in close button in the top-trailing
    * corner. Enabled by default for both modal and non-modal drawers so every
@@ -454,6 +558,7 @@ export function Drawer({
   label,
   hasScrim = true,
   hasCloseButton = true,
+  containerRef,
   children,
   xstyle,
   className,
@@ -486,6 +591,27 @@ export function Drawer({
     setIsRendered(true);
   }

+  // Bounded mode. The portal target is read in an effect because the
+  // consumer's ref is not populated on our first render.
+  const isBounded = containerRef != null;
+  const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(null);
+  useEffect(() => {
+    setPortalTarget(containerRef?.current ?? null);
+  }, [containerRef, isRendered]);
+  // The top layer is always viewport-sized, so a bounded panel cannot be in
+  // it — a bounded drawer is contextual, never modal, whatever hasScrim says.
+  const isModal = hasScrim && !isBounded;
+  useDevWarning(
+    'Drawer',
+    'containerRef points at a `position: static` element, so the panel will ' +
+      'escape it and pin to the nearest positioned ancestor instead. Give ' +
+      'the container `position: relative`.',
+    isBounded &&
+      portalTarget != null &&
+      typeof window !== 'undefined' &&
+      window.getComputedStyle(portalTarget).position === 'static',
+  );
+
   // Open/close the native dialog. close() waits for the slide-out to finish,
   // and the panel stops rendering in the same commit so it is never painted
   // outside the top layer. Focus restore happens after close() because a
@@ -506,7 +632,7 @@ export function Drawer({
       if (!dialog.open) {
         triggerElementRef.current =
           document.activeElement as HTMLElement | null;
-        if (hasScrim) {
+        if (isModal) {
           dialog.showModal();
         } else {
           dialog.show();
@@ -571,7 +697,7 @@ export function Drawer({
         closeTimeoutRef.current = null;
       }
     };
-  }, [isOpen, hasScrim]);
+  }, [isOpen, isModal, portalTarget]);

   // Close the native dialog on unmount if it's still open. When the drawer
   // is mounted inside an <Activity> that flips to mode="hidden", React runs
@@ -603,7 +729,8 @@ export function Drawer({
   }, [isOpen, drawerId]);

   // Lock body scroll while a modal drawer is open (iOS Safari workaround).
-  useScrollLock(isOpen && hasScrim);
+  // A bounded drawer blocks its container, not the page.
+  useScrollLock(isOpen && isModal);

   // Escape closes. The native `cancel` event only fires for showModal();
   // this React keydown handler covers the non-modal show() path too. Only the
@@ -639,17 +766,21 @@ export function Drawer({
   // drawer content always target a child (the content area fills the panel).
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLDialogElement>) => {
-      if (event.target === event.currentTarget && hasScrim) {
+      if (event.target === event.currentTarget && isModal) {
         onOpenChange(false);
       }
     },
-    [hasScrim, onOpenChange],
+    [isModal, onOpenChange],
   );

   const widthValue = typeof width === 'number' ? `${width}px` : width;
-  const mobileWidth = isFullWidthOnMobile
-    ? MOBILE_WIDTH_FULL
-    : `min(${widthValue}, calc(100dvw - ${MOBILE_PAGE_REVEAL}px))`;
+  const mobileWidth = isBounded
+    ? isFullWidthOnMobile
+      ? BOUNDED_WIDTH_FULL
+      : `min(${widthValue}, calc(100% - ${MOBILE_PAGE_REVEAL}px))`
+    : isFullWidthOnMobile
+      ? MOBILE_WIDTH_FULL
+      : `min(${widthValue}, calc(100dvw - ${MOBILE_PAGE_REVEAL}px))`;

   // The side the panel is ANCHORED to, which is the side it must slide back
   // out to. Latched at open, because a consumer commonly derives `side` from
@@ -670,7 +801,7 @@ export function Drawer({
   // Filter out native `open` to prevent InvalidStateError when passed
   const {open: _open, ...safeProps} = props as Record<string, unknown>;

-  return (
+  const panel = (
     <dialog
       ref={mergeRefs(ref, dialogRef)}
       {...mergeProps(
@@ -679,11 +810,15 @@ export function Drawer({
           styles.dialog,
           overlayPaddingReset.reset,
           sideStyle,
-          dynamicStyles.inlineSize(widthValue, mobileWidth),
+          isBounded
+            ? dynamicStyles.boundedInlineSize(widthValue, mobileWidth)
+            : dynamicStyles.inlineSize(widthValue, mobileWidth),
+          isBounded && styles.bounded,
+          isBounded && styles.boundedInteractive,
           isRendered && styles.rendered,
           isOpen && sideOpenStyle,
-          hasScrim ? styles.scrim : dynamicStyles.stackZ(stackZ),
-          hasScrim && isOpen && styles.scrimOpen,
+          isModal ? styles.scrim : dynamicStyles.stackZ(stackZ),
+          isModal && isOpen && styles.scrimOpen,
           xstyle,
         ),
         className,
@@ -691,7 +826,7 @@ export function Drawer({
       )}
       {...safeProps}
       aria-label={label}
-      aria-modal={hasScrim ? 'true' : undefined}
+      aria-modal={isModal ? 'true' : undefined}
       onClick={composeEventHandlers(onClickProp, handleClick)}
       onKeyDown={composeEventHandlers(onKeyDownProp, handleKeyDown)}
       onCancel={handleCancel}>
@@ -712,6 +847,42 @@ export function Drawer({
       )}
     </dialog>
   );
+
+  if (!isBounded) {
+    return panel;
+  }
+
+  // Bounded: portal the panel into the container so it positions against it,
+  // and carry its own scrim — `::backdrop` paints only for the top layer.
+  // Nothing is rendered until the container ref resolves.
+  if (portalTarget == null) {
+    return null;
+  }
+
+  return createPortal(
+    <div {...stylex.props(styles.boundedClip)}>
+      {hasScrim && isRendered && (
+        <button
+          type="button"
+          // Not an interactive control a keyboard user should land on: the
+          // close button and Escape are the keyboard paths, and this only
+          // exists so a pointer dismiss outside the panel works. Same shape
+          // Dialog's scrim click takes, which is also pointer-only.
+          tabIndex={-1}
+          aria-hidden="true"
+          {...stylex.props(
+            styles.boundedScrim,
+            styles.boundedInteractive,
+            !isOpen && styles.boundedScrimClosed,
+            dynamicStyles.stackZ(stackZ),
+          )}
+          onClick={() => onOpenChange(false)}
+        />
+      )}
+      {panel}
+    </div>,
+    portalTarget,
+  );
 }

 Drawer.displayName = 'Drawer';