# Drawer

## Overview

_[Design to fill]_

- **When to use**: _[Design to fill]_
- **When not to use**: _[Design to fill]_

## Anatomy

_[Design to fill]_

## Props / API

The `Drawer` is a compound component. `Drawer` itself renders `Drawer.Root`.

### `Drawer.Root`

The positioning container for the drawer. Extends `HTMLAttributes<HTMLDivElement>`. Renders a `<div>`.

### `Drawer.Panel`

| Prop       | Type                             | Default    | Description                                                              |
| ---------- | -------------------------------- | ---------- | ------------------------------------------------------------------------ |
| `open`     | `boolean`                        | -          | Whether the panel is open. When closed, the panel is `inert` and hidden. |
| `size`     | `'small' \| 'medium' \| 'large'` | `'medium'` | The panel width.                                                         |
| `children` | `React.ReactNode`                | -          | The panel content, typically a `Drawer.Content`.                         |

Renders an `<aside>`. Extends `HTMLAttributes<HTMLElement>`.

### `Drawer.Content`

The scrollable content wrapper inside the panel. Extends `HTMLAttributes<HTMLElement>`. Renders a `<section>`.

### `Drawer.Header`

Renders a `<header>`. Extends `HTMLAttributes<HTMLDivElement>`.

#### `Drawer.Header.Title`

Renders an `<h3>`. Extends `HTMLAttributes<HTMLHeadingElement>`.

### `Drawer.Body`

The main body region. Renders a `<div>`. Extends `HTMLAttributes<HTMLDivElement>`.

### `Drawer.Footer`

Renders a `<footer>`. Extends `HTMLAttributes<HTMLElement>`.

## States

- Closed
- Open

## Code examples

```tsx
import { useState } from "react";
import { Button, Drawer } from "@mylighthouse/prism-react";

export default function DrawerExample(): React.JSX.Element {
  const [open, setOpen] = useState(false);

  return (
    <Drawer.Root>
      <Drawer.Content>
        <Button
          aria-controls="details-drawer"
          aria-expanded={open}
          onClick={() => setOpen((value) => !value)}
        >
          Toggle drawer
        </Button>
      </Drawer.Content>
      <Drawer.Panel
        aria-labelledby="details-drawer-title"
        id="details-drawer"
        open={open}
        size="medium"
      >
        <Drawer.Header>
          <Drawer.Header.Title id="details-drawer-title">
            Details
          </Drawer.Header.Title>
          <Button
            aria-label="Close drawer"
            buttonType="ghost"
            icon="cross"
            onClick={() => setOpen(false)}
          />
        </Drawer.Header>
        <Drawer.Body>Drawer content goes here.</Drawer.Body>
        <Drawer.Footer>
          <Button onClick={() => setOpen(false)}>Got it</Button>
        </Drawer.Footer>
      </Drawer.Panel>
    </Drawer.Root>
  );
}
```

## A11y intent

_[Design to fill]_

- The panel is a landmark `<aside>` and is marked `inert` when closed, so its content is removed from the accessibility tree and taken out of the tab order.
- The header title renders a real `<h3>`; associate it with the panel via `aria-labelledby` (pointing at the title `id`) so the drawer's purpose is announced.
- Wire the trigger with `aria-controls` (the panel `id`) and `aria-expanded` (the open state), and give any icon-only close control an `aria-label`.
- Semantic regions (`<header>`, `<section>`, `<footer>`) structure the panel content for assistive technology.
- Unlike [Modal](./modal.md), the drawer does not render a backdrop or trap focus; it is an in-container panel. Focus management on open/close and Escape-to-close behaviour is the responsibility of the consumer wiring the `open` state.

## Cross-references

- **[Modal](./modal.md)**: a centered, focus-trapping overlay with a backdrop, for flows that must interrupt the whole page.