# Sheet

> A document pane: one surface divided into sections.

- **Level**: molecule · **Status**: stable · **Role**: surface
- **Import**: `import { Sheet, SheetSection, SheetContext } from "@rrios-forge/ui/molecules/sheet";`
- **Source**: `packages/ui/src/molecules/sheet`

One continuous surface, many sections. A Sheet is a DOCUMENT pane: several regions of one entity that belong on one surface — no gaps between cards, the seam is a divider (hairline on solid, bevelled glass edge on vibrant) and every section owns its padding, chosen once via the sheet's inset. Built ON the Card recipe per the R10 consult (Patterns/Page Shells · DataPage). material=vibrant is the translucent member of ADR-022: it admits the app's ambient backdrop through blur + tint, exists in BOTH light (frosted white) and dark (night glass); high-contrast and prefers-reduced-transparency collapse it to solid. NOT shadcn's Sheet — their side drawer is Poesía's Drawer (ADR-015).

## Use it for

- Side panel → `Drawer` or `Sheet`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `material` | — | `solid` `vibrant` | `vibrant` | The layer's material (ADR-022, ADR-027). |
| `inset` | — | `sm` `md` `lg` | `md` | Inner spacing of a sheet section. |
| `bleed` | — | `true` `false` | `false` | Sheet section runs edge to edge. |

## Stories

- [Playground](/?path=/story/components-molecules-sheet--playground) · frame: `/iframe.html?id=components-molecules-sheet--playground&viewMode=story`
- [Vibrant](/?path=/story/components-molecules-sheet--vibrant) · frame: `/iframe.html?id=components-molecules-sheet--vibrant&viewMode=story`
- [Solid](/?path=/story/components-molecules-sheet--solid) · frame: `/iframe.html?id=components-molecules-sheet--solid&viewMode=story`
- [Bleed Section](/?path=/story/components-molecules-sheet--bleed-section) · frame: `/iframe.html?id=components-molecules-sheet--bleed-section&viewMode=story`

## Decisions that name it

- ADR-009 — Editorial Frame: PageShell v3 + new `TopBar` molecule
- ADR-022 — The material family: `solid` and `vibrant`
- ADR-027 — Vibrant is the system's material, not one of its members
- ADR-029 — The page gutter belongs outside the frame

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).