Sheet

Docs draft

Component story Figma (Sheet + .Media Summary) ↗React component ↗MediaSummary block ↗DSDS entity ↗

When to use it

useTouch-first previews and quick actions anchored to the bottom edge — the tap equivalent of the cards' hover detail panel.

avoidCentered confirmations and forms; Sheet is for glanceable content, not decisions. modal Modal.

Anatomy

surface — Bottom-anchored, full-width, bg/elevated + shadow/modal, square corners (same review flag as Modal). X alone top-right — Modal's chrome.

content slot — Default filling is .Media Summary — the one anatomy shared by sheet content and hover panels: parent label, title, rating or date row, description, action row (play/watchlist/add accent icons) + Details link.

scrim — dialog ::backdrop in color.bg.scrim.

Variants

content-state · default / loading — Loading lives on .Media Summary as skeleton rows, not on the Sheet surface.

Design specifications

surface	color.bg.elevated, shadow.modal, padding space.16 (top space.8)
close	44px target, color.text.primary
actions	44px accent.text icon buttons; hover accent.hover
scrim	color.bg.scrim

Accessibility

Escape — closes the sheet (native dialog)

Native dialog: focus trap and inert background from the platform. Icon actions carry aria-labels; the Details link is a real Link. aria-label names the dialog.