Bottom Sheet @astryx-svelte/core v0.5.2 · BottomSheet
Usage
A mobile touch surface for filters, actions, forms, and detail views that should rise from the bottom of the viewport; use BottomSheetSwitcher for multi-step flows.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Use for mobile-first surfaces (filters, share sheets, quick actions) where the content should rise from the bottom edge. |
| Do | Pick the starting height that fits the content: 'hug' for short bounded content, 'capped' for lists, and 'tall' for forms or streaming/resizing content. |
| Do | Use purpose='form' to protect entered data from scrim clicks and swipes while keeping Escape available; reserve purpose='required' for flows that must end through an explicit action. |
| Don't | Don't make the sheet content overly long. Consider breaking it into steps and using Bottom Sheet Switcher. |
Examples
Common configurations, variations, and states.Bottom Sheet — Height variants
Compares hug, capped, and tall starting heights for different amounts of content.
Bottom Sheet — Mobile keyboard
Uses a tall, scrollable form that keeps focused controls visible above the mobile keyboard.
Bottom Sheet — No scrim
Keeps the page visible and interactive behind a non-modal bottom sheet.
Bottom Sheet — Snap points
Drag-to-resize stops: a half-height working surface, and a peek that slides away and thins the scrim.
Dialog — Adaptive presentation
Live preview pending — this block's Svelte rewrite has not landed yet.
Opt-in recipe for an AdaptiveDialog wrapper: Dialog remains the default everywhere, while touchPresentation="bottom-sheet" switches only at lg and below when pointer is coarse and hover is unavailable. Includes a deterministic presentation override for tests/unusual environments and notes that BottomSheet purpose controls swipe and scrim dismissal. Usage examples: touchPresentation="dialog" keeps Dialog, "fullscreen" chooses fullscreen Dialog, and "bottom-sheet" chooses BottomSheet only for the touch-oriented range. Keep presentation as the deterministic override. Do not use this by default for AlertDialog or destructive confirmations.