Studio
Studio/Kits
New kit
Canonical inventory
Overlays · core

Action sheet

overlay.action-sheet

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

action sheetthe surface above the pagethe temporary panel
States4
Touch target44px
Evidence8
Introduced by3 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
ARIAdialogNo single ARIA role represents the complete component.pattern
SwiftUIconfirmationDialogThe nearest named SwiftUI API.direct
AppKitCustom NSView compositionAppKit has no single direct equivalent; use a custom view or controller composition.approximation
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.

Bottom sheetoverlay.bottom-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 Action sheet component (overlay.action-sheet). Action 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 · purple-rain