Bottom Sheet Dialog

A bottom sheet is a dialog that slides up from the bottom of the viewport. It uses data-position="bottom" on a native <dialog> to get full-width, rounded-top-corners styling with safe-area padding for mobile devices.

Key features:

• Native <dialog> with focus trapping and escape key
• Full viewport width, max 85dvh height
• Rounded top corners with slide-up animation
• Automatic safe-area padding for home indicators
• Zero JavaScript with Invokers API

A common mobile pattern: tapping an item reveals a list of contextual actions.

Add a visual drag handle indicator using a pseudo-element. This signals to mobile users that the sheet can be dismissed.

A share sheet pattern with a grid of share targets, similar to the native iOS/Android share UI.

Add data-gesture="dismiss-down" to enable swipe-down-to-close. The gesture library tracks the vertical drag, applies opacity falloff, and calls dialog.close('dismiss') when the threshold is reached. Buttons and links remain interactive.

The gesture is lazy-loaded and only ships when [data-gesture] attributes are present. Combine with the drag handle CSS (above) for a complete mobile experience.

• Invokers API: Use commandfor + command="show-modal" for declarative control. Fall back to showModal() for older browsers.
• Safe areas: Bottom padding is automatic via var(--safe-bottom) for devices with home indicators.
• Scrolling: Long content scrolls within the sheet. The overscroll-behavior: contain rule prevents scroll chaining to the page.
• Backdrop close: Add a click listener on the dialog for backdrop dismissal (not built-in to native dialog).
• Animation: Uses vb-slide-in-bottom keyframes. Respects prefers-reduced-motion.