# Sheet

> An edge-docked panel that renders through Dialog — the same native `<dialog>` host, Invoker Commands, backdrop dimming, and missing-`id` dev warning — repositioned from a centered panel to a fixed inline-side column entirely through CSS keyed off a `data-side` attribute.

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

Renders the panel through Dialog: fixed, pinned to whichever
inline edge `side` names with the far edge released to `auto`, and slid
via `@starting-style`/`allow-discrete` so the close animates too.

## Examples

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

```tsx
<Sheet id="filters" side="left" aria-labelledby="filters-title">
	<Sheet.Header>
		<Sheet.Title id="filters-title">{t("filters.title")}</Sheet.Title>
	</Sheet.Header>
</Sheet>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `side?` | `"left" \| "right"` | Physical side of the viewport to dock to. Defaults to DEFAULT_SIDE. |

Also accepts everything in `Dialog.Props`.


### Sheet.Header

Renders Sheet.HeaderProps.children as the panel's header slot: a tightly-stacked column of Sheet.Title and Sheet.Description, start-aligned at every width rather than centering like Dialog.Header.

Also accepts everything in `Dialog.HeaderProps`.


### Sheet.Description

Renders Sheet.DescriptionProps.children as the panel's supporting copy, in a native `<p>` set to the panel's own foreground color rather than Dialog.Description's more muted one.

Also accepts everything in `Dialog.DescriptionProps`.


### Sheet.Footer

Renders Sheet.FooterProps.children as the panel's action row: a single end-aligned row pinned to the block-end edge at every width, unlike Dialog.Footer's column that only becomes a row as its container grows.

Also accepts everything in `Dialog.FooterProps`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Side` | `"left" \| "right"` | Physical side of the viewport the panel docks to and slides in from, fixed rather than reading-direction-relative so it keeps docking to the same edge under any `dir` value, matching the safe-area padding's edge. |