Build a reusable bottom sheet component for use in the Mobile Page Previews experiment, designed to be product-agnostic so it can be upstreamed into Codex when possible.
=== Context
The Mobile Page Previews experiment (T418812) needs a slide-up panel to display preview content. MobileFrontend's reference drawer provides a similar interaction pattern already familiar to mobile Wikipedia readers.
Codex has a Sheet component planned (T366048) but it is still in early design stages with no spec or implementation yet. We should build a local implementation in ReaderExperiments that is generic enough to upstream later. This means the sheet component itself should have no knowledge of page preview content — all content should be passed in via slots and/or props. The sheet handles presentation (slide-up, dismiss, backdrop, accessibility) while the consumer handles what goes inside it.
Worth adding Mobile Page Previews as a known use case on T366048.
=== Requirements
- Slides up from the bottom of the viewport
- Dismiss via: X button, tap outside the sheet, or swipe down (stretch)
- Content passed in via slot; optional props for configuration (e.g., title, show/hide close button)
- Accessible: focus trapping, screen reader announcements, escape key dismissal
- Smooth animation, minimal layout shift
- Responsive to varying content heights
- Works across mobile browsers targeted by the experiment (Android Chrome, iOS Safari at minimum)
=== Open questions
- Should swipe-to-dismiss be included for the experiment, or is that a fast-follow?
- How should the sheet behave when the virtual keyboard is open (e.g., if the reader tapped a link while focused on search)?
- What props does the sheet need beyond a content slot? (title, closable, height constraints, backdrop opacity, etc.)
=== Prior Art
* [[ https://github.com/vaban-ru/vue-bottom-sheet | Vue-bottom-sheet ]] is worth studying as a reference implementation of what we want to do here