Studio
Studio/Kits
New kit
Canonical inventory
Overlays · core

Bottom sheet

overlay.bottom-sheet

Bottom sheet: A temporary surface presented above the current interface for focused information or action.

bottom sheetthe panel that slides up from the bottommobile sheetbottom drawerthe surface above the pagethe temporary panel
States4
Touch target44px
Evidence8
Introduced by4 kits
Visual specimen

Same contract. Every kit voice.

MAVAN renderingopen
Translation table

What code calls it.

Web<dialog>The closest native or standardized web primitive.direct
ARIAdialogThe primary accessibility role or state pattern.direct
SwiftUI.sheetThe nearest named SwiftUI API.direct
AppKitNSWindow sheetThe nearest named AppKit API.direct
Anatomy

Every part, named.

  1. 1Trigger relationship
  2. 2Backdrop or anchoring context
  3. 3Overlay surface
  4. 4Title and content
  5. 5Dismissal and focus return
Often confused with

Similar shape. Different contract.

Dialogoverlay.dialog

Shares a visual family, but has a different role, state model, or interaction contract.

Action sheetoverlay.action-sheet

Shares a visual family, but has a different role, state model, or interaction contract.

Navigation drawernavigation.drawer

Can look similar in context, but belongs to a different semantic and behavioral family.

Prompt · paste into your agent

Ask for the exact thing.

Implement the canonical Bottom sheet component (overlay.bottom-sheet). Bottom sheet: A temporary surface presented above the current interface for focused information or action. Support these states: closed, open, busy, error. Use semantic design tokens rather than raw visual values. Preserve a minimum 44px touch target where interactive. Provide and verify: implementation, state-matrix, responsive, keyboard, touch, reduced-motion, focus-containment, focus-return. Keep the component API stable so every Studio kit can supply its own rendering without changing the behavior contract.
Studio contract

What must be proven.

Required states

closed · open · busy · error

Required evidence

implementation · state-matrix · responsive · keyboard · touch · reduced-motion · focus-containment · focus-return

Source union

jade · lumen · aurora · purple-rain