# Drawer

> A preset of Dialog docked flush against one physical edge of the viewport, sized to fill that edge, sliding into place from it on open and fading out with a short drift toward it on close.

```ts
import { Drawer } from "@sdxc/ui";
```

Renders Dialog pinned to one edge of the viewport, animating a
`transform` off the native `open` attribute so `@starting-style` can
animate the close; a `mix` prop composes alongside this placement styling.

## Examples

```tsx
<Button commandfor="cart" command="show-modal">{t("cart.open")}</Button>
<Drawer id="cart" placement="right" aria-labelledby="cart-title">
	<Drawer.Header>
		<Drawer.Title id="cart-title">{t("cart.title")}</Drawer.Title>
	</Drawer.Header>
	<Drawer.Close commandfor="cart" aria-label={t("actions.close")} />
</Drawer>
```

```tsx
<Drawer id="filters" placement="bottom" aria-labelledby="filters-title">
	<Drawer.Header>
		<Drawer.Title id="filters-title">{t("filters.title")}</Drawer.Title>
	</Drawer.Header>
	<Drawer.Footer>
		<Button commandfor="filters" command="close">{t("actions.apply")}</Button>
	</Drawer.Footer>
</Drawer>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `placement?` | `"top" \| "right" \| "bottom" \| "left"` | Physical edge of the viewport to dock against and slide in from. Defaults to DEFAULT_PLACEMENT. |

Also accepts everything in `Dialog.Props`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Placement` | `"top" \| "right" \| "bottom" \| "left"` | Physical edge of the viewport the panel docks against and slides in from. |