Foundations · Surfaces

Bottom sheet

The mobile counterpart to the modal — a panel that docks to the bottom edge and snaps to its own content height (up to ~85vh, then it scrolls). A drag grabber caps the top; below it a title and a stack of tappable rows. It sits on the modal elevation with only its top corners rounded, over the same dimmed scrim.

Bottom-docked sheet · grab handle · list rows

Reassign foster is pinned :hover to show the row fill; hover any row (or tab in) for the live hover / focus ring. The grabber, Esc, and a scrim press all dismiss.

edge · snap

Docks to the bottom edge (a Sheet's left/right sibling); the panel snaps to its content height and caps at max-height: 85vh, after which the body scrolls under a pinned head + foot.

elevation · tone

elevation="modal" on the base surface tone (#12151a). Only the top corners round to --radius-xl — the bottom two meet the screen edge square.

grabber

A 40 × 6px --radius-pill bar in --border-strong, centred with pt-3 pb-1. Purely affordance — aria-hidden, it signals the sheet is draggable to dismiss.

scrim

The shared .overlay-backdrop — var(--scrim) at 62% with a 2px blur. Focus is trapped and scroll locked while open; a scrim press resolves onOpenChange(false).

list rows

Full-width buttons: accent-soft icon tile · title + muted sub · trailing chevron. Hover / focus paints surface-2; the row is the whole hit target, one per action.

foot

Optional, divided off by a --rule hairline, with bottom padding that respects env(safe-area-inset-bottom) so the primary action clears the home indicator.