Bottom Sheet

Features

• Modal pane fixed to the bottom edge, toggled by a trigger button
• Panel-slide entrance combining transform, opacity, and blur with separate open (400ms) and close (350ms) durations
• Stock ticker page with price and daily change indicator
• Quick-trade pane with a quantity stepper and live estimated total
• Buy and Sell actions on the paired semantic success and error roles
• Visible Apple system blue accent decoupled from the focus-ring primary
• Escape key dismisses the open pane
• Responsive layout down to 280px, fully respecting prefers-reduced-motion

Accessibility

Dialog role

role="dialog" with aria-modal="true" and aria-label on the pane, inert while closed

Trigger wiring

aria-expanded and aria-controls on the trigger, synced by JS

Button labels

Every control carries an explicit aria-label

Focus management

Focus moves into the pane on open, Tab is trapped inside, and returns to the trigger on close

Escape to close

The Escape key closes the open pane

Focus indicators

:focus-visible with a --primary outline on all interactive elements

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Bottom Sheet in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the dialog is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.