BottomSheet

Mobile bottom sheet container: a bottom-risen panel with drag handle and backdrop, closable via drag-down / backdrop click / Esc, with safe-area inset and focus trap built in; the passive passthrough mode doubles as a structural placeholder for overlay components' PC forms.

Basic usage

Basic usage

Open sheet

The panel rises from the bottom with a backdrop; drag the handle past the threshold, click the backdrop, or press Esc to request a close — oas-close's detail.reason tells them apart (drag / backdrop / esc). The component never mutates the controlled open; the host closes it by removing the attribute.

Example

max-height and content scrolling

max-height and content scrolling

Capped sheet (50vh)

max-height caps the panel height (default 85vh); overflowing content scrolls inside the panel instead of breaking the viewport.

Example

Passive passthrough (structural placeholder)

Passive passthrough (structural placeholder)

Passive mode: no backdrop, no handle, no overlay positioning or gestures — a static structural placeholder only (the dashed frame marks the carrier bounds; the host is display:contents in passive mode and leaves no box of its own), letting overlay components reuse the same carrier structure in their PC forms (SSR/client structure strictly identical).

Example

API

oas-bottom-sheet

Attributes

Attribute	Description	Type	Default
max-height	Panel max height, default 85vh; overflowing content scrolls inside the panel	string	—
open	Controlled open state (single source of truth). Shows the bottom panel and backdrop when open; gestures (drag handle / backdrop click / Esc) only emit oas-close requests — the host removes open to actually close (the component never mutates the controlled value)	boolean	—
passive	Passive passthrough mode — hides backdrop and drag handle, disables overlay positioning and gestures; renders a static structure placeholder only (for overlay components PC-form reuse; SSR/client structure strictly identical)	boolean	—

Events

Event	Description
oas-close	Close request; detail.reason is drag (handle dragged past threshold) / backdrop (backdrop click) / esc (Escape key). The component only emits — the host decides to close by removing open

Slots

Name	Description
default	Sheet body content

CSS Variables

CSS Variable	Default
--oas-bottom-sheet-max-height	85vh
--oas-glass-blur	none
--oas-glass-ring	transparent

• open is controlled: component gestures (drag / backdrop / Esc) only emit oas-close; the host completes closing by removing open.
• Focus trap built in: on open, focus moves to the first focusable element inside the panel and stays trapped there; safe-area-inset-bottom is honored for gesture-bar devices.
• passive mode is meant for overlay components' PC-form structure reuse (the carrier behind select/date-picker mobile forms); standalone it is simply a static panel.