# Side Panel

Follows: **Layering & Elevation**, **Visual Hierarchy**, **Density & Spacing**, and **Interaction States** from `../principles.md`.

`SidePanel` is a focused, contextual surface anchored to the right edge of the viewport. It reveals object details or a short single-object workflow without navigating away from a collection.

## Anatomy

- A translucent dismissible overlay.
- Fixed right-edge panel with header, optional description, scrollable body, and optional footer actions. Header/body hierarchy comes from spacing, not a divider.
- Header close control is icon-only with an accessible label.

## Rules

- Use for inspection and focused creation flows. Do not use it as a substitute for a broad settings page or a multi-step wizard.
- Preserve the list/table behind the panel so object context remains clear.
- Close via escape, overlay, or the close control.
- Use `sm` for simple confirmations, `md` as the default inspection width, and `lg` only for dense source material or form workflows.
- The body scrolls; the header and footer remain fixed within the panel.
- On open, the overlay fades in and the panel slides in from the right over 180ms using `cubic-bezier(0.16, 1, 0.3, 1)`. Respect reduced-motion preferences.