@commercetools/nimbus-mcp 0.1.0 → 2.10.0

package/data/docs/routes/components-feedback-drawer.json

@@ -0,0 +1,600 @@
+{
+  "meta": {
+    "id": "Components-Drawer",
+    "title": "Drawer",
+    "exportName": "Drawer",
+    "description": "A foundational drawer component for overlays that require user attention and interaction. Built with React Aria Components for accessibility and WCAG 2.1 AA compliance.",
+    "lifecycleState": "Stable",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/components/drawer/drawer.mdx",
+    "menu": [
+      "Components",
+      "Feedback",
+      "Drawer"
+    ],
+    "route": "components/feedback/drawer",
+    "tags": [
+      "component",
+      "overlay",
+      "dialog",
+      "modal",
+      "interactive"
+    ],
+    "toc": [
+      {
+        "value": "Overview",
+        "href": "#overview",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Key features",
+        "href": "#key-features",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Resources",
+        "href": "#resources",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Variables",
+        "href": "#variables",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Basic Usage",
+        "href": "#basic-usage",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Size",
+        "href": "#size",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Placement Options",
+        "href": "#placement-options",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Controlled State",
+        "href": "#controlled-state",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          4
+        ],
+        "parent": "root"
+      }
+    ],
+    "figmaLink": "https://www.figma.com/design/gHbAJGfcrCv7f2bgzUQgHq/NIMBUS-Guidelines?node-id=1695-45519&m",
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      },
+      {
+        "key": "guidelines",
+        "title": "Guidelines",
+        "order": 2
+      },
+      {
+        "key": "dev",
+        "title": "Implementation",
+        "order": 3
+      },
+      {
+        "key": "a11y",
+        "title": "Accessibility",
+        "order": 4
+      }
+    ]
+  },
+  "mdx": "\n## Overview\n\nDrawers are overlay windows that appear on top of the main content to display\nimportant information, gather user input, or require user decisions. They\ntemporarily disable the main interface until the user completes an action or\ndismisses the drawer.\n\n### Key features\n\n- **Accessibility First**: Built with React Aria Components for WCAG 2.1 AA\n  compliance\n- **Flexible Positioning**: Support for left, right, top, and bottom placements\n- **Responsive Sizing**: Multiple size variants from xs to full-screen\n- **Smooth Animations**: Customizable motion presets for entrance/exit\n- **Focus Management**: Automatic focus trapping and restoration\n- **Keyboard Navigation**: Full keyboard support including Escape to close\n- **Scroll Handling**: Options for inside or outside scrolling behavior\n\n### Resources\n\nDeep dive into implementation details and access the Nimbus design library.\n\n[React Aria Drawer Docs](https://react-spectrum.adobe.com/react-aria/Drawer.html)\n[ARIA Drawer Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)\n[Figma Design Library](https://www.figma.com/design/gHbAJGfcrCv7f2bgzUQgHq/NIMBUS-Guidelines?node-id=1695-45519&m)\n\n## Variables\n\nGet familiar with the features.\n\n### Basic Usage\n\n```jsx live\nconst App = () => (\n  <Drawer.Root>\n    <Drawer.Trigger>Anything can be a trigger</Drawer.Trigger>\n    <Drawer.Content>\n      <Drawer.Header>\n        <Drawer.Title>Drawer Title</Drawer.Title>\n        <Drawer.CloseTrigger />\n      </Drawer.Header>\n      <Drawer.Body>\n        This is a basic drawer with default settings. It includes a backdrop\n        overlay (enabled by default), title, and close button for a complete\n        experience.\n      </Drawer.Body>\n      <Drawer.Footer>\n        <Button variant=\"outline\" slot=\"close\">\n          Cancel\n        </Button>\n        <Button>Save</Button>\n      </Drawer.Footer>\n    </Drawer.Content>\n  </Drawer.Root>\n);\n```\n\n### Size\n\nControl the drawer width by applying `width` prop on the Content component, it's\na regular style-prop, so you can use all size-tokens but also custom values.\n\n```jsx live\nconst App = () => (\n  <Drawer.Root>\n    <Drawer.Trigger asChild>\n      <Button>Open Large Drawer</Button>\n    </Drawer.Trigger>\n    <Drawer.Content width=\"3xl\">\n      <Drawer.Header>\n        <Drawer.Title>Large Drawer</Drawer.Title>\n        <Drawer.CloseTrigger />\n      </Drawer.Header>\n      <Drawer.Body>\n        This drawer uses a custom width. You can change the width by adjusting\n        the width prop on Drawer.Root to values like \"xs\", \"sm\", \"md\", \"lg\",\n        \"xl\", or \"full\", but also raw css values.\n      </Drawer.Body>\n    </Drawer.Content>\n  </Drawer.Root>\n);\n```\n\n### Placement Options\n\nPosition the drawer at different locations using the `placement` prop. You can\nalso control the backdrop overlay with the `showBackdrop` prop (enabled by\ndefault):\n\n```jsx live\nconst App = () => {\n  const [showBackdrop, setShowBackdrop] = useState(true);\n\n  const placements = [\n    {\n      value: \"left\",\n      label: \"Left\",\n      description:\n        \"Slides in from the left side, ideal for navigation panels or filters\",\n    },\n    {\n      value: \"right\",\n      label: \"Right (default)\",\n      description:\n        \"Slides in from the right side, commonly used for details panels and forms\",\n    },\n    {\n      value: \"top\",\n      label: \"Top\",\n      description: \"Slides in from the top, useful for notifications or alerts\",\n    },\n    {\n      value: \"bottom\",\n      label: \"Bottom\",\n      description:\n        \"Slides in from the bottom, good for mobile-friendly sheets or action panels\",\n    },\n  ];\n\n  return (\n    <Stack direction=\"column\" gap=\"400\">\n      <Checkbox isSelected={showBackdrop} onChange={setShowBackdrop}>\n        Show backdrop\n      </Checkbox>\n\n      <Stack direction=\"row\" gap=\"400\" wrap=\"wrap\">\n        {placements.map((placement) => (\n          <Drawer.Root\n            key={placement.value}\n            placement={placement.value}\n            showBackdrop={showBackdrop}\n          >\n            <Drawer.Trigger asChild>\n              <Button>{placement.label}</Button>\n            </Drawer.Trigger>\n            <Drawer.Content>\n              <Drawer.Header>\n                <Drawer.Title>{placement.label} Placement</Drawer.Title>\n                <Drawer.CloseTrigger />\n              </Drawer.Header>\n              <Drawer.Body>{placement.description}</Drawer.Body>\n            </Drawer.Content>\n          </Drawer.Root>\n        ))}\n      </Stack>\n    </Stack>\n  );\n};\n```\n\n### Controlled State\n\nUse external state to control the dialog programmatically:\n\n```jsx live\nconst App = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  return (\n    <Stack>\n      <Button alignSelf=\"flex-start\" onPress={() => setIsOpen(true)}>\n        Open Controlled Drawer\n      </Button>\n\n      <Text>Drawer is currently: {isOpen ? \"open\" : \"closed\"}</Text>\n\n      <Drawer.Root isOpen={isOpen} onOpenChange={setIsOpen}>\n        <Drawer.Content>\n          <Drawer.Header>\n            <Drawer.Title>Controlled Drawer</Drawer.Title>\n            <Drawer.CloseTrigger />\n          </Drawer.Header>\n          <Drawer.Body>\n            This drawer's state is controlled by the parent component. You can\n            open/close it programmatically or through user interaction.\n          </Drawer.Body>\n          <Drawer.Footer>\n            <Button variant=\"outline\" onPress={() => setIsOpen(false)}>\n              Cancel\n            </Button>\n            <Button onPress={() => setIsOpen(false)}>Save</Button>\n          </Drawer.Footer>\n        </Drawer.Content>\n      </Drawer.Root>\n    </Stack>\n  );\n};\n```\n",
+  "views": {
+    "overview": {
+      "mdx": "\n## Overview\n\nDrawers are overlay windows that appear on top of the main content to display\nimportant information, gather user input, or require user decisions. They\ntemporarily disable the main interface until the user completes an action or\ndismisses the drawer.\n\n### Key features\n\n- **Accessibility First**: Built with React Aria Components for WCAG 2.1 AA\n  compliance\n- **Flexible Positioning**: Support for left, right, top, and bottom placements\n- **Responsive Sizing**: Multiple size variants from xs to full-screen\n- **Smooth Animations**: Customizable motion presets for entrance/exit\n- **Focus Management**: Automatic focus trapping and restoration\n- **Keyboard Navigation**: Full keyboard support including Escape to close\n- **Scroll Handling**: Options for inside or outside scrolling behavior\n\n### Resources\n\nDeep dive into implementation details and access the Nimbus design library.\n\n[React Aria Drawer Docs](https://react-spectrum.adobe.com/react-aria/Drawer.html)\n[ARIA Drawer Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)\n[Figma Design Library](https://www.figma.com/design/gHbAJGfcrCv7f2bgzUQgHq/NIMBUS-Guidelines?node-id=1695-45519&m)\n\n## Variables\n\nGet familiar with the features.\n\n### Basic Usage\n\n```jsx live\nconst App = () => (\n  <Drawer.Root>\n    <Drawer.Trigger>Anything can be a trigger</Drawer.Trigger>\n    <Drawer.Content>\n      <Drawer.Header>\n        <Drawer.Title>Drawer Title</Drawer.Title>\n        <Drawer.CloseTrigger />\n      </Drawer.Header>\n      <Drawer.Body>\n        This is a basic drawer with default settings. It includes a backdrop\n        overlay (enabled by default), title, and close button for a complete\n        experience.\n      </Drawer.Body>\n      <Drawer.Footer>\n        <Button variant=\"outline\" slot=\"close\">\n          Cancel\n        </Button>\n        <Button>Save</Button>\n      </Drawer.Footer>\n    </Drawer.Content>\n  </Drawer.Root>\n);\n```\n\n### Size\n\nControl the drawer width by applying `width` prop on the Content component, it's\na regular style-prop, so you can use all size-tokens but also custom values.\n\n```jsx live\nconst App = () => (\n  <Drawer.Root>\n    <Drawer.Trigger asChild>\n      <Button>Open Large Drawer</Button>\n    </Drawer.Trigger>\n    <Drawer.Content width=\"3xl\">\n      <Drawer.Header>\n        <Drawer.Title>Large Drawer</Drawer.Title>\n        <Drawer.CloseTrigger />\n      </Drawer.Header>\n      <Drawer.Body>\n        This drawer uses a custom width. You can change the width by adjusting\n        the width prop on Drawer.Root to values like \"xs\", \"sm\", \"md\", \"lg\",\n        \"xl\", or \"full\", but also raw css values.\n      </Drawer.Body>\n    </Drawer.Content>\n  </Drawer.Root>\n);\n```\n\n### Placement Options\n\nPosition the drawer at different locations using the `placement` prop. You can\nalso control the backdrop overlay with the `showBackdrop` prop (enabled by\ndefault):\n\n```jsx live\nconst App = () => {\n  const [showBackdrop, setShowBackdrop] = useState(true);\n\n  const placements = [\n    {\n      value: \"left\",\n      label: \"Left\",\n      description:\n        \"Slides in from the left side, ideal for navigation panels or filters\",\n    },\n    {\n      value: \"right\",\n      label: \"Right (default)\",\n      description:\n        \"Slides in from the right side, commonly used for details panels and forms\",\n    },\n    {\n      value: \"top\",\n      label: \"Top\",\n      description: \"Slides in from the top, useful for notifications or alerts\",\n    },\n    {\n      value: \"bottom\",\n      label: \"Bottom\",\n      description:\n        \"Slides in from the bottom, good for mobile-friendly sheets or action panels\",\n    },\n  ];\n\n  return (\n    <Stack direction=\"column\" gap=\"400\">\n      <Checkbox isSelected={showBackdrop} onChange={setShowBackdrop}>\n        Show backdrop\n      </Checkbox>\n\n      <Stack direction=\"row\" gap=\"400\" wrap=\"wrap\">\n        {placements.map((placement) => (\n          <Drawer.Root\n            key={placement.value}\n            placement={placement.value}\n            showBackdrop={showBackdrop}\n          >\n            <Drawer.Trigger asChild>\n              <Button>{placement.label}</Button>\n            </Drawer.Trigger>\n            <Drawer.Content>\n              <Drawer.Header>\n                <Drawer.Title>{placement.label} Placement</Drawer.Title>\n                <Drawer.CloseTrigger />\n              </Drawer.Header>\n              <Drawer.Body>{placement.description}</Drawer.Body>\n            </Drawer.Content>\n          </Drawer.Root>\n        ))}\n      </Stack>\n    </Stack>\n  );\n};\n```\n\n### Controlled State\n\nUse external state to control the dialog programmatically:\n\n```jsx live\nconst App = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  return (\n    <Stack>\n      <Button alignSelf=\"flex-start\" onPress={() => setIsOpen(true)}>\n        Open Controlled Drawer\n      </Button>\n\n      <Text>Drawer is currently: {isOpen ? \"open\" : \"closed\"}</Text>\n\n      <Drawer.Root isOpen={isOpen} onOpenChange={setIsOpen}>\n        <Drawer.Content>\n          <Drawer.Header>\n            <Drawer.Title>Controlled Drawer</Drawer.Title>\n            <Drawer.CloseTrigger />\n          </Drawer.Header>\n          <Drawer.Body>\n            This drawer's state is controlled by the parent component. You can\n            open/close it programmatically or through user interaction.\n          </Drawer.Body>\n          <Drawer.Footer>\n            <Button variant=\"outline\" onPress={() => setIsOpen(false)}>\n              Cancel\n            </Button>\n            <Button onPress={() => setIsOpen(false)}>Save</Button>\n          </Drawer.Footer>\n        </Drawer.Content>\n      </Drawer.Root>\n    </Stack>\n  );\n};\n```\n",
+      "toc": [
+        {
+          "value": "Overview",
+          "href": "#overview",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Key features",
+          "href": "#key-features",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Variables",
+          "href": "#variables",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic Usage",
+          "href": "#basic-usage",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Size",
+          "href": "#size",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Placement Options",
+          "href": "#placement-options",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Controlled State",
+          "href": "#controlled-state",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            4
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "a11y": {
+      "mdx": "\n## Accessibility\n\nAccessibility ensures that digital content and functionality are usable by\neveryone, including people with disabilities, by addressing visual, auditory,\ncognitive, and physical limitations.\n\n```jsx live\nconst App = () => (\n  <Drawer.Root>\n    <Drawer.Trigger>\n      <Button>Open drawer</Button>\n    </Drawer.Trigger>\n    <Drawer.Content>\n      <Drawer.Header>\n        <Drawer.Title>Drawer Title</Drawer.Title>\n        <Drawer.CloseTrigger />\n      </Drawer.Header>\n      <Drawer.Body>\n          This is a basic drawer with default settings. It includes a backdrop overlay\n          (enabled by default), title, and close button for a complete experience.\n      </Drawer.Body>\n      <Drawer.Footer>\n        <Button variant=\"outline\" slot=\"close\">Cancel</Button>\n        <Button>Save</Button>\n      </Drawer.Footer>\n    </Drawer.Content>\n  </Drawer.Root>\n)\n```\n\n### Accessibility standards\n\n- **Role identification:** Drawer has `dialog` role with proper labeling.\n- **Focus management:** Focus moves to drawer on open and returns to trigger on\n  close.\n- **Focus containment:** Tab navigation stays within drawer boundaries.\n- **Accessible names:** Title and description properly associate with drawer.\n- **State announcements:** Screen readers announce when drawer opens/closes.\n- **Info and relationships:** Proper semantic structure with header, body, and\n  footer.\n- **Contrast:** All text meets minimum contrast requirements.\n- **Non-text contrast:** Focus indicators and UI components meet contrast\n  standards.\n- **Keyboard navigation:** Full keyboard navigation support.\n- **No keyboard trap:** Focus contained but escapable via Escape key.\n- **Focus order:** Logical focus progression through drawer elements.\n- **Focus visible:** Clear focus indicators on all interactive elements.\n- **On focus:** No unexpected context changes when focusing elements.\n- **On input:** Predictable behavior for all user interactions.\n- **Labels or instructions:** Clear labeling and instructions where needed.\n- **Name, role, value:** Proper semantic markup and ARIA attributes.\n- **Status messages:** Appropriate announcements for state changes.\n\n### Resources\n\n- [W3C ARIA Authoring Practices Guide (APG) - Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)\n- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)\n",
+      "toc": [
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility standards",
+          "href": "#accessibility-standards",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "dev": {
+      "mdx": "\n## Getting started\n\n### Import\n\n```tsx\nimport { Drawer } from '@commercetools/nimbus';\n```\n\n### Basic usage\n\nThe Drawer component is a compound component with multiple parts that work together. This basic implementation shows a `Trigger` element that toggles the drawer's `Content` wrapper which contains `Header`, `Body`, and `Footer` sections:\n\n```jsx live-dev\nconst App = () => (\n  <Drawer.Root>\n    <Drawer.Trigger>Open Drawer</Drawer.Trigger>\n    <Drawer.Content>\n      <Drawer.Header>\n        <Drawer.Title>Drawer Title</Drawer.Title>\n        <Drawer.CloseTrigger />\n      </Drawer.Header>\n      <Drawer.Body>\n        <Text>This is the drawer body content.</Text>\n      </Drawer.Body>\n      <Drawer.Footer>\n        <Button variant=\"outline\" slot=\"close\">Cancel</Button>\n        <Button variant=\"solid\" slot=\"close\">Confirm</Button>\n      </Drawer.Footer>\n    </Drawer.Content>\n  </Drawer.Root>\n)\n```\n\n## Usage examples\n\n### Placement options\n\nControl where the drawer appears on screen using the `placement` prop on `Drawer.Root`. Available placements are `left`, `right` (default), `top`, and `bottom`:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"row\" gap=\"400\" flexWrap=\"wrap\">\n    {['left', 'right', 'top', 'bottom'].map((placement) => (\n      <Drawer.Root key={placement} placement={placement}>\n        <Drawer.Trigger>{placement}</Drawer.Trigger>\n        <Drawer.Content>\n          <Drawer.Header>\n            <Drawer.Title>Placement: {placement}</Drawer.Title>\n            <Drawer.CloseTrigger />\n          </Drawer.Header>\n          <Drawer.Body>\n            <Text>This drawer slides in from the {placement}.</Text>\n          </Drawer.Body>\n          <Drawer.Footer>\n            <Button slot=\"close\">Close</Button>\n          </Drawer.Footer>\n        </Drawer.Content>\n      </Drawer.Root>\n    ))}\n  </Stack>\n)\n```\n\n**Placement behavior:**\n- `placement=\"left\"`: Slides in from the left edge, full viewport height\n- `placement=\"right\"`: Slides in from the right edge, full viewport height (default)\n- `placement=\"top\"`: Slides in from the top edge, full viewport width\n- `placement=\"bottom\"`: Slides in from the bottom edge, full viewport width\n\n### Backdrop variants\n\nControl whether to show a backdrop overlay behind the drawer using the `showBackdrop` prop (enabled by default):\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"row\" gap=\"400\">\n    <Drawer.Root showBackdrop={false}>\n      <Drawer.Trigger>No Backdrop</Drawer.Trigger>\n      <Drawer.Content>\n        <Drawer.Header>\n          <Drawer.Title>No Backdrop</Drawer.Title>\n          <Drawer.CloseTrigger />\n        </Drawer.Header>\n        <Drawer.Body>\n          <Text>This drawer has no backdrop overlay.</Text>\n        </Drawer.Body>\n        <Drawer.Footer>\n          <Button slot=\"close\">Close</Button>\n        </Drawer.Footer>\n      </Drawer.Content>\n    </Drawer.Root>\n\n    <Drawer.Root showBackdrop={true}>\n      <Drawer.Trigger>With Backdrop</Drawer.Trigger>\n      <Drawer.Content>\n        <Drawer.Header>\n          <Drawer.Title>With Backdrop</Drawer.Title>\n          <Drawer.CloseTrigger />\n        </Drawer.Header>\n        <Drawer.Body>\n          <Text>This drawer has a blurred backdrop overlay.</Text>\n        </Drawer.Body>\n        <Drawer.Footer>\n          <Button slot=\"close\">Close</Button>\n        </Drawer.Footer>\n      </Drawer.Content>\n    </Drawer.Root>\n  </Stack>\n)\n```\n\n**Backdrop behavior:**\n- `showBackdrop={true}`: Blurred backdrop overlay with semi-transparent background (default)\n- `showBackdrop={false}`: No backdrop overlay\n\n### Custom trigger with asChild\n\nUse your own button or interactive element as the trigger using the `asChild` prop:\n\n```jsx live-dev\nconst App = () => (\n  <Drawer.Root>\n    <Drawer.Trigger asChild>\n      <Button variant=\"solid\">Custom Button Trigger</Button>\n    </Drawer.Trigger>\n    <Drawer.Content>\n      <Drawer.Header>\n        <Drawer.Title>Custom Trigger</Drawer.Title>\n        <Drawer.CloseTrigger />\n      </Drawer.Header>\n      <Drawer.Body>\n        <Text>This drawer was opened with a custom Button component.</Text>\n      </Drawer.Body>\n      <Drawer.Footer>\n        <Button slot=\"close\">Close</Button>\n      </Drawer.Footer>\n    </Drawer.Content>\n  </Drawer.Root>\n)\n```\n\n### Size control\n\nControl the drawer content width using style props on `Drawer.Content`. You can use design tokens or custom values:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"row\" gap=\"400\" flexWrap=\"wrap\">\n    {['sm', 'md', 'lg', '512px', 'full'].map((size) => (\n      <Drawer.Root key={size}>\n        <Drawer.Trigger>{size}</Drawer.Trigger>\n        <Drawer.Content width={size}>\n          <Drawer.Header>\n            <Drawer.Title>Width: {size}</Drawer.Title>\n            <Drawer.CloseTrigger />\n          </Drawer.Header>\n          <Drawer.Body>\n            <Text>\n              This drawer uses <Code>width=\"{size}\"</Code> on Drawer.Content.\n            </Text>\n          </Drawer.Body>\n          <Drawer.Footer>\n            <Button slot=\"close\">Close</Button>\n          </Drawer.Footer>\n        </Drawer.Content>\n      </Drawer.Root>\n    ))}\n  </Stack>\n)\n```\n\n### Scrollable content\n\nThe drawer body automatically handles overflow with scroll support when content exceeds available height:\n\n```jsx live-dev\nconst App = () => (\n  <Drawer.Root>\n    <Drawer.Trigger>Open Scrollable Drawer</Drawer.Trigger>\n    <Drawer.Content>\n      <Drawer.Header>\n        <Drawer.Title>Scrollable Content</Drawer.Title>\n        <Drawer.CloseTrigger />\n      </Drawer.Header>\n      <Drawer.Body>\n        <Stack direction=\"column\" gap=\"400\">\n          {Array.from({ length: 20 }, (_, i) => (\n            <Text key={i}>\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n              This is paragraph {i + 1} of scrollable content.\n            </Text>\n          ))}\n        </Stack>\n      </Drawer.Body>\n      <Drawer.Footer>\n        <Button slot=\"close\">Close</Button>\n      </Drawer.Footer>\n    </Drawer.Content>\n  </Drawer.Root>\n)\n```\n\n### Dismissal control\n\nControl how users can dismiss the drawer using `isDismissable` and `isKeyboardDismissDisabled` props:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <Drawer.Root isDismissable={true} isKeyboardDismissDisabled={false}>\n      <Drawer.Trigger>Fully Dismissable</Drawer.Trigger>\n      <Drawer.Content>\n        <Drawer.Header>\n          <Drawer.Title>Fully Dismissable</Drawer.Title>\n          <Drawer.CloseTrigger />\n        </Drawer.Header>\n        <Drawer.Body>\n          <Text>Can dismiss by: backdrop click, Escape key, or close button</Text>\n        </Drawer.Body>\n        <Drawer.Footer>\n          <Button slot=\"close\">Close</Button>\n        </Drawer.Footer>\n      </Drawer.Content>\n    </Drawer.Root>\n\n    <Drawer.Root isDismissable={false} isKeyboardDismissDisabled={true}>\n      <Drawer.Trigger>Modal Drawer</Drawer.Trigger>\n      <Drawer.Content>\n        <Drawer.Header>\n          <Drawer.Title>Modal Drawer</Drawer.Title>\n          <Drawer.CloseTrigger />\n        </Drawer.Header>\n        <Drawer.Body>\n          <Text>Can only dismiss using the close button</Text>\n        </Drawer.Body>\n        <Drawer.Footer>\n          <Button slot=\"close\">Close</Button>\n        </Drawer.Footer>\n      </Drawer.Content>\n    </Drawer.Root>\n  </Stack>\n)\n```\n\n**Dismissal options:**\n- `isDismissable={true}`: Allow closing by clicking backdrop (default: true)\n- `isKeyboardDismissDisabled={false}`: Allow closing with Escape key (default: false)\n- Both can be combined for fine-grained control\n\n### Intercepting close for unsaved changes\n\nUse `isDismissable={false}` with controlled mode to prevent accidental closing when forms have unsaved changes. Backdrop click is disabled, while Escape key and close buttons still fire `onOpenChange(false)`, allowing close attempts to be intercepted:\n\n```jsx live-dev\nconst App = () => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(true);\n  const [showConfirmation, setShowConfirmation] = useState(false);\n\n  const handleOpenChange = (open) => {\n    if (open) {\n      setIsOpen(true);\n      return;\n    }\n    if (hasUnsavedChanges) {\n      setShowConfirmation(true);\n      return;\n    }\n    setIsOpen(false);\n  };\n\n  return (\n    <Stack gap=\"400\">\n      <Button onPress={() => setIsOpen(true)}>Open Protected Drawer</Button>\n\n      <Drawer.Root\n        isOpen={isOpen}\n        onOpenChange={handleOpenChange}\n        isDismissable={!hasUnsavedChanges}\n        placement=\"right\"\n      >\n        <Drawer.Content>\n          <Drawer.Header>\n            <Drawer.Title>Edit Form</Drawer.Title>\n            <Drawer.CloseTrigger />\n          </Drawer.Header>\n          <Drawer.Body>\n            <Stack gap=\"400\">\n              <Switch isSelected={hasUnsavedChanges} onChange={setHasUnsavedChanges}>\n                Has unsaved changes\n              </Switch>\n              {showConfirmation && (\n                <Stack gap=\"300\" p=\"400\" borderWidth=\"1px\" borderColor=\"border\" borderRadius=\"200\">\n                  <Text fontWeight=\"semibold\">You have unsaved changes. Discard them?</Text>\n                  <Stack direction=\"row\" gap=\"300\">\n                    <Button variant=\"outline\" size=\"xs\" onPress={() => setShowConfirmation(false)}>\n                      Keep Editing\n                    </Button>\n                    <Button variant=\"solid\" size=\"xs\" onPress={() => {\n                      setShowConfirmation(false);\n                      setHasUnsavedChanges(false);\n                      setIsOpen(false);\n                    }}>\n                      Discard Changes\n                    </Button>\n                  </Stack>\n                </Stack>\n              )}\n            </Stack>\n          </Drawer.Body>\n          <Drawer.Footer>\n            <Button variant=\"outline\" slot=\"close\">Cancel</Button>\n            <Button variant=\"solid\" onPress={() => { setHasUnsavedChanges(false); setIsOpen(false); }}>\n              Save\n            </Button>\n          </Drawer.Footer>\n        </Drawer.Content>\n      </Drawer.Root>\n    </Stack>\n  );\n}\n```\n\n**Key behavior:**\n- `isDismissable={false}`: Backdrop click is disabled. Escape and close buttons still fire `onOpenChange(false)` which can be intercepted to show a confirmation dialog.\n- Combine with controlled mode (`isOpen` + `onOpenChange`) to intercept close attempts\n- Toggle `isDismissable` dynamically based on form state (e.g. `isDismissable={!hasUnsavedChanges}`)\n\n### Uncontrolled mode\n\nFor simpler use cases, use uncontrolled mode with `defaultOpen` and `onOpenChange`:\n\n```jsx live-dev\nconst App = () => {\n  const [lastAction, setLastAction] = useState('No action yet');\n\n  return (\n    <Stack direction=\"column\" gap=\"400\">\n      <Drawer.Root\n        defaultOpen={false}\n        onOpenChange={(isOpen) => {\n          setLastAction(isOpen ? 'Drawer opened' : 'Drawer closed');\n        }}\n      >\n        <Drawer.Trigger>Open Drawer</Drawer.Trigger>\n        <Drawer.Content>\n          <Drawer.Header>\n            <Drawer.Title>Uncontrolled Drawer</Drawer.Title>\n            <Drawer.CloseTrigger />\n          </Drawer.Header>\n          <Drawer.Body>\n            <Text>This drawer manages its own open state.</Text>\n          </Drawer.Body>\n          <Drawer.Footer>\n            <Button slot=\"close\">Close</Button>\n          </Drawer.Footer>\n        </Drawer.Content>\n      </Drawer.Root>\n      <Text fontSize=\"sm\">Last action: {lastAction}</Text>\n    </Stack>\n  );\n}\n```\n\nUse uncontrolled mode when you only need to react to state changes without managing the state yourself.\n\n### Controlled mode\n\nFor scenarios requiring programmatic control or coordination with other components, use controlled mode:\n\n```jsx live-dev\nconst App = () => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <Stack direction=\"column\" gap=\"400\">\n      <Switch isSelected={isOpen} onChange={setIsOpen}>\n        Drawer is {isOpen ? 'open' : 'closed'}\n      </Switch>\n      <Drawer.Root isOpen={isOpen} onOpenChange={setIsOpen}>\n        <Drawer.Content>\n          <Drawer.Header>\n            <Drawer.Title>Controlled Drawer</Drawer.Title>\n            <Drawer.CloseTrigger />\n          </Drawer.Header>\n          <Drawer.Body>\n            <Text>This drawer's state is controlled externally via the Switch.</Text>\n          </Drawer.Body>\n          <Drawer.Footer>\n            <Button slot=\"close\">Close</Button>\n          </Drawer.Footer>\n        </Drawer.Content>\n      </Drawer.Root>\n    </Stack>\n  );\n}\n```\n\nUse controlled mode when you need to:\n- Synchronize the drawer state with external state\n- Open/close the drawer programmatically\n- Coordinate the drawer with other UI elements\n\n## Component requirements\n\n## Accessibility\n\nThe Drawer component handles most accessibility requirements internally through React Aria Components. However, you must provide an accessible label for the drawer using one of these approaches:\n\n- **Using Drawer.Title** (recommended):\n```tsx\n<Drawer.Content>\n  <Drawer.Header>\n    <Drawer.Title>Drawer Title</Drawer.Title>\n  </Drawer.Header>\n  <Drawer.Body>...</Drawer.Body>\n</Drawer.Content>\n```\n\n- **Using aria-label** (when no visual title is needed):\n```tsx\n<Drawer.Root aria-label={msg.format(drawerMessage)}>\n  <Drawer.Trigger>Open</Drawer.Trigger>\n  <Drawer.Content>...</Drawer.Content>\n</Drawer.Root>\n```\n\nIf your use case requires tracking and analytics for this component, it is good practice to add a **persistent**, **unique** id to the component:\n\n```tsx\nconst PERSISTENT_ID = \"example-drawer\";\n\nexport const Example = () => (\n  <Drawer.Root id={PERSISTENT_ID}>\n    <Drawer.Trigger>Open</Drawer.Trigger>\n    <Drawer.Content>...</Drawer.Content>\n  </Drawer.Root>\n);\n```\n\n#### Keyboard navigation\n\nThe component supports full keyboard interaction:\n- `Tab` / `Shift+Tab`: Navigate between focusable elements inside the drawer\n- `Escape`: Close the drawer (unless `isKeyboardDismissDisabled` is true)\n- Focus is automatically trapped within the drawer when open\n- Focus is restored to the trigger element when the drawer closes\n\n#### ARIA attributes\n\n- `role=\"dialog\"`: Applied to the drawer content\n- `aria-label` or `aria-labelledby`: Associates the drawer with its title\n- `aria-modal=\"true\"`: Indicates the drawer is modal (blocks interaction with background)\n\n## API reference\n\n<PropsTable id=\"Drawer\" />\n\n## Common patterns\n\n### Nested drawers\n\nDrawers can be nested to create multi-level workflows. Each drawer maintains proper z-index stacking:\n\n```jsx live-dev\nconst App = () => (\n  <Drawer.Root>\n    <Drawer.Trigger>Open First Drawer</Drawer.Trigger>\n    <Drawer.Content>\n      <Drawer.Header>\n        <Drawer.Title>First Level</Drawer.Title>\n        <Drawer.CloseTrigger />\n      </Drawer.Header>\n      <Drawer.Body>\n        <Stack direction=\"column\" gap=\"400\">\n          <Text>This is the first level drawer.</Text>\n          <Drawer.Root>\n            <Drawer.Trigger asChild>\n              <Button size=\"xs\">Open Second Drawer</Button>\n            </Drawer.Trigger>\n            <Drawer.Content>\n              <Drawer.Header>\n                <Drawer.Title>Second Level</Drawer.Title>\n                <Drawer.CloseTrigger />\n              </Drawer.Header>\n              <Drawer.Body>\n                <Text>This nested drawer appears above the first with proper z-index.</Text>\n              </Drawer.Body>\n              <Drawer.Footer>\n                <Button slot=\"close\">Close Second</Button>\n              </Drawer.Footer>\n            </Drawer.Content>\n          </Drawer.Root>\n        </Stack>\n      </Drawer.Body>\n      <Drawer.Footer>\n        <Button slot=\"close\">Close First</Button>\n      </Drawer.Footer>\n    </Drawer.Content>\n  </Drawer.Root>\n)\n```\n\n### Conditional dismissal with shouldCloseOnInteractOutside\n\nControl whether the drawer should close when clicking outside based on custom logic:\n\n```jsx live-dev\nconst App = () => {\n  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);\n\n  return (\n    <Drawer.Root\n      shouldCloseOnInteractOutside={() => {\n        if (hasUnsavedChanges) {\n          alert('You have unsaved changes!');\n          return false;\n        }\n        return true;\n      }}\n    >\n      <Drawer.Trigger>Open Editor</Drawer.Trigger>\n      <Drawer.Content>\n        <Drawer.Header>\n          <Drawer.Title>Document Editor</Drawer.Title>\n          <Drawer.CloseTrigger />\n        </Drawer.Header>\n        <Drawer.Body>\n          <Stack direction=\"column\" gap=\"400\">\n            <Text>Make changes to simulate unsaved data:</Text>\n            <Switch\n              isSelected={hasUnsavedChanges}\n              onChange={setHasUnsavedChanges}\n            >\n              Has unsaved changes\n            </Switch>\n            <Text fontSize=\"sm\" color=\"neutral.11\">\n              Try clicking outside when changes are unsaved\n            </Text>\n          </Stack>\n        </Drawer.Body>\n        <Drawer.Footer>\n          <Button variant=\"outline\" slot=\"close\">Cancel</Button>\n          <Button\n            variant=\"solid\"\n            slot=\"close\"\n            onClick={() => setHasUnsavedChanges(false)}\n          >\n            Save\n          </Button>\n        </Drawer.Footer>\n      </Drawer.Content>\n    </Drawer.Root>\n  );\n}\n```\n\n## Testing your implementation\n\nThese examples demonstrate how to test your implementation when using Drawer in your application. As the component's internal functionality is already tested by Nimbus, these patterns help you verify your integration and application-specific logic.\n\n### Basic Rendering Tests\n\nVerify the drawer renders with expected elements\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen, waitFor } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { useState } from \"react\";\nimport { Drawer, Button, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"Drawer - Basic rendering\", () => {\n  it(\"renders trigger button\", () => {\n    render(\n      <NimbusProvider>\n        <Drawer.Root>\n          <Drawer.Trigger>Open Drawer</Drawer.Trigger>\n          <Drawer.Content>\n            <Drawer.Body>Content</Drawer.Body>\n          </Drawer.Content>\n        </Drawer.Root>\n      </NimbusProvider>\n    );\n\n    expect(\n      screen.getByRole(\"button\", { name: \"Open Drawer\" })\n    ).toBeInTheDocument();\n  });\n\n  it(\"does not render dialog when closed\", () => {\n    render(\n      <NimbusProvider>\n        <Drawer.Root>\n          <Drawer.Trigger>Open</Drawer.Trigger>\n          <Drawer.Content>\n            <Drawer.Body>Content</Drawer.Body>\n          </Drawer.Content>\n        </Drawer.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.queryByRole(\"dialog\")).not.toBeInTheDocument();\n  });\n});\n```\n\n### Interaction Tests\n\nTest drawer opening and closing behavior\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen, waitFor } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { useState } from \"react\";\nimport { Drawer, Button, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"Drawer - Interactions\", () => {\n  it(\"opens drawer when trigger is clicked\", async () => {\n    const user = userEvent.setup();\n    render(\n      <NimbusProvider>\n        <Drawer.Root>\n          <Drawer.Trigger>Open Drawer</Drawer.Trigger>\n          <Drawer.Content>\n            <Drawer.Header>\n              <Drawer.Title>Test Drawer</Drawer.Title>\n            </Drawer.Header>\n            <Drawer.Body>Content</Drawer.Body>\n          </Drawer.Content>\n        </Drawer.Root>\n      </NimbusProvider>\n    );\n\n    const trigger = screen.getByRole(\"button\", { name: \"Open Drawer\" });\n    await user.click(trigger);\n\n    await waitFor(() => {\n      expect(screen.getByRole(\"dialog\")).toBeInTheDocument();\n      expect(\n        screen.getByRole(\"heading\", { name: \"Test Drawer\" })\n      ).toBeInTheDocument();\n    });\n  });\n\n  it(\"closes drawer when close button is clicked\", async () => {\n    const user = userEvent.setup();\n    render(\n      <NimbusProvider>\n        <Drawer.Root>\n          <Drawer.Trigger>Open</Drawer.Trigger>\n          <Drawer.Content>\n            <Drawer.Header>\n              <Drawer.Title>Test</Drawer.Title>\n              <Drawer.CloseTrigger />\n            </Drawer.Header>\n            <Drawer.Body>Content</Drawer.Body>\n          </Drawer.Content>\n        </Drawer.Root>\n      </NimbusProvider>\n    );\n\n    await user.click(screen.getByRole(\"button\", { name: \"Open\" }));\n    await waitFor(() => {\n      expect(screen.getByRole(\"dialog\")).toBeInTheDocument();\n    });\n\n    const closeButton = screen.getByRole(\"button\", { name: /close/i });\n    await user.click(closeButton);\n\n    await waitFor(() => {\n      expect(screen.queryByRole(\"dialog\")).not.toBeInTheDocument();\n    });\n  });\n\n  it(\"closes drawer when Escape key is pressed\", async () => {\n    const user = userEvent.setup();\n    render(\n      <NimbusProvider>\n        <Drawer.Root>\n          <Drawer.Trigger>Open</Drawer.Trigger>\n          <Drawer.Content>\n            <Drawer.Body>Content</Drawer.Body>\n          </Drawer.Content>\n        </Drawer.Root>\n      </NimbusProvider>\n    );\n\n    await user.click(screen.getByRole(\"button\", { name: \"Open\" }));\n    await waitFor(() => {\n      expect(screen.getByRole(\"dialog\")).toBeInTheDocument();\n    });\n\n    await user.keyboard(\"{Escape}\");\n\n    await waitFor(() => {\n      expect(screen.queryByRole(\"dialog\")).not.toBeInTheDocument();\n    });\n  });\n});\n```\n\n### Controlled State Tests\n\nTest controlled mode behavior\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen, waitFor } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { useState } from \"react\";\nimport { Drawer, Button, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"Drawer - Controlled state\", () => {\n  it(\"opens and closes via controlled prop\", async () => {\n    const user = userEvent.setup();\n\n    const ControlledDrawer = () => {\n      const [isOpen, setIsOpen] = useState(false);\n\n      return (\n        <NimbusProvider>\n          <Button onPress={() => setIsOpen(true)}>External Open</Button>\n          <Drawer.Root isOpen={isOpen} onOpenChange={setIsOpen}>\n            <Drawer.Content aria-label=\"Controlled drawer\">\n              <Drawer.Body>Content</Drawer.Body>\n            </Drawer.Content>\n          </Drawer.Root>\n        </NimbusProvider>\n      );\n    };\n\n    render(<ControlledDrawer />);\n\n    expect(screen.queryByRole(\"dialog\")).not.toBeInTheDocument();\n\n    await user.click(screen.getByRole(\"button\", { name: \"External Open\" }));\n\n    await waitFor(() => {\n      expect(screen.getByRole(\"dialog\")).toBeInTheDocument();\n    });\n  });\n\n  it(\"calls onOpenChange when drawer state changes\", async () => {\n    const user = userEvent.setup();\n    const handleOpenChange = vi.fn();\n\n    render(\n      <NimbusProvider>\n        <Drawer.Root onOpenChange={handleOpenChange}>\n          <Drawer.Trigger>Open</Drawer.Trigger>\n          <Drawer.Content>\n            <Drawer.Body>Content</Drawer.Body>\n          </Drawer.Content>\n        </Drawer.Root>\n      </NimbusProvider>\n    );\n\n    await user.click(screen.getByRole(\"button\", { name: \"Open\" }));\n\n    await waitFor(() => {\n      expect(handleOpenChange).toHaveBeenCalledWith(true);\n    });\n\n    await user.keyboard(\"{Escape}\");\n\n    await waitFor(() => {\n      expect(handleOpenChange).toHaveBeenCalledWith(false);\n    });\n  });\n});\n```\n\n### Portal Content Tests\n\nTest drawer content rendering in portal\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen, waitFor } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { useState } from \"react\";\nimport { Drawer, Button, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"Drawer - Portal content\", () => {\n  it(\"renders drawer content in portal\", async () => {\n    const user = userEvent.setup();\n    render(\n      <NimbusProvider>\n        <Drawer.Root>\n          <Drawer.Trigger>Open</Drawer.Trigger>\n          <Drawer.Content>\n            <Drawer.Body>\n              <div data-testid=\"portal-content\">Portal Content</div>\n            </Drawer.Body>\n          </Drawer.Content>\n        </Drawer.Root>\n      </NimbusProvider>\n    );\n\n    await user.click(screen.getByRole(\"button\", { name: \"Open\" }));\n\n    await waitFor(() => {\n      const dialog = screen.getByRole(\"dialog\");\n      expect(dialog).toBeInTheDocument();\n      expect(screen.getByTestId(\"portal-content\")).toBeInTheDocument();\n    });\n  });\n});\n```\n\n### Dismissal Behavior Tests\n\nTest different dismissal configurations\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen, waitFor } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { useState } from \"react\";\nimport { Drawer, Button, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"Drawer - Dismissal\", () => {\n  it(\"prevents Escape key dismissal when isKeyboardDismissDisabled\", async () => {\n    const user = userEvent.setup();\n    render(\n      <NimbusProvider>\n        <Drawer.Root isKeyboardDismissDisabled={true}>\n          <Drawer.Trigger>Open</Drawer.Trigger>\n          <Drawer.Content>\n            <Drawer.Body>Content</Drawer.Body>\n          </Drawer.Content>\n        </Drawer.Root>\n      </NimbusProvider>\n    );\n\n    await user.click(screen.getByRole(\"button\", { name: \"Open\" }));\n    await waitFor(() => {\n      expect(screen.getByRole(\"dialog\")).toBeInTheDocument();\n    });\n\n    await user.keyboard(\"{Escape}\");\n\n    // Drawer should still be open\n    expect(screen.getByRole(\"dialog\")).toBeInTheDocument();\n  });\n\n  it(\"accepts shouldCloseOnInteractOutside callback prop\", () => {\n    const shouldClose = vi.fn(() => false);\n\n    render(\n      <NimbusProvider>\n        <Drawer.Root shouldCloseOnInteractOutside={shouldClose}>\n          <Drawer.Trigger>Open</Drawer.Trigger>\n          <Drawer.Content>\n            <Drawer.Body>Content</Drawer.Body>\n          </Drawer.Content>\n        </Drawer.Root>\n      </NimbusProvider>\n    );\n\n    // Verify component renders with the callback prop without errors\n    expect(screen.getByRole(\"button\", { name: \"Open\" })).toBeInTheDocument();\n  });\n});\n```\n\n\n## Resources\n\n- [Storybook](https://nimbus-storybook.vercel.app/?path=/docs/components-overlay-drawer--docs)\n- [React Aria DialogTrigger](https://react-spectrum.adobe.com/react-aria/Dialog.html#dialogtrigger)\n- [React Aria Modal](https://react-spectrum.adobe.com/react-aria/Modal.html)\n- [ARIA Dialog Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)\n",
+      "toc": [
+        {
+          "value": "Getting started",
+          "href": "#getting-started",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Import",
+          "href": "#import",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic usage",
+          "href": "#basic-usage",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage examples",
+          "href": "#usage-examples",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Placement options",
+          "href": "#placement-options",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Backdrop variants",
+          "href": "#backdrop-variants",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Custom trigger with asChild",
+          "href": "#custom-trigger-with-aschild",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Size control",
+          "href": "#size-control",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Scrollable content",
+          "href": "#scrollable-content",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Dismissal control",
+          "href": "#dismissal-control",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Intercepting close for unsaved changes",
+          "href": "#intercepting-close-for-unsaved-changes",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Uncontrolled mode",
+          "href": "#uncontrolled-mode",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            8
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Controlled mode",
+          "href": "#controlled-mode",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            9
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Component requirements",
+          "href": "#component-requirements",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Keyboard navigation",
+          "href": "#keyboard-navigation",
+          "depth": 4,
+          "numbering": [
+            1,
+            4,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "ARIA attributes",
+          "href": "#aria-attributes",
+          "depth": 4,
+          "numbering": [
+            1,
+            4,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "API reference",
+          "href": "#api-reference",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Common patterns",
+          "href": "#common-patterns",
+          "depth": 2,
+          "numbering": [
+            1,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Nested drawers",
+          "href": "#nested-drawers",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Conditional dismissal with shouldCloseOnInteractOutside",
+          "href": "#conditional-dismissal-with-shouldcloseoninteractoutside",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Testing your implementation",
+          "href": "#testing-your-implementation",
+          "depth": 2,
+          "numbering": [
+            1,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic Rendering Tests",
+          "href": "#basic-rendering-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Interaction Tests",
+          "href": "#interaction-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Controlled State Tests",
+          "href": "#controlled-state-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Portal Content Tests",
+          "href": "#portal-content-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Dismissal Behavior Tests",
+          "href": "#dismissal-behavior-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 2,
+          "numbering": [
+            1,
+            8
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "guidelines": {
+      "mdx": "\n## Guidelines\n\nUse drawers strategically to enhance user workflow without disrupting the\nexperience.\n\n### Best practices\n\n- **Use drawers sparingly**: Only when you need to interrupt the user's flow for\n  critical actions\n- **Keep content focused**: Drawers should have a single, clear purpose\n- **Provide clear actions**: Always include obvious ways to proceed or dismiss\n- **Make dismissal easy**: Support Escape key, close buttons, and click-outside\n  behavior. For forms with unsaved changes, use `isDismissable={false}` with\n  controlled mode to intercept close attempts and show a confirmation before\n  discarding data\n- **Maintain focus flow**: Focus should move logically through interactive\n  elements\n- **Size appropriately**: Choose sizes that fit your content without\n  overwhelming the viewport. For complex full-page editing workflows, use the\n  ModalPage component instead\n- **Consider mobile**: Ensure drawers work well on small screens\n\n> [!TIP]\\\n> When to use\n\n- **Confirming destructive actions**: Delete confirmations and critical warnings\n- **Collecting focused input**: Forms, settings, and data entry that requires\n  attention\n- **Displaying critical alerts**: Important information that requires immediate\n  user attention\n- **Showing detailed information**: Content that doesn't require navigation to a\n  new page\n- **Authentication flows**: Login, signup, and security-related interactions\n\n> [!CAUTION]\\\n> When not to use\n\n- **Complex multi-step workflows**: Use pages instead for lengthy processes\n- **Non-critical information**: Use inline content for supplementary information\n- **Navigation**: Use proper routing instead of drawers for moving between\n  sections\n- **Content that needs to be referenced**: Avoid for information users need\n  while working elsewhere\n",
+      "toc": [
+        {
+          "value": "Guidelines",
+          "href": "#guidelines",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Best practices",
+          "href": "#best-practices",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}