# Sheet

A dialog that enters from an edge: from the bottom on phones, from the right on wide screens.

* Kind: component
* Page: https://design.werklist.com/components/sheet
* Version: 2.1.2

## When to use it

* The phone form of a dialog, below 640 px
* A popover that holds a form, on a touch screen below 640 px
* Details or settings read beside the page, as a side sheet from the right
* A long list tied to the page, such as members or history

## When not to use it

* A task that needs full attention on a wide screen: use a dialog
* A side sheet from the left edge: that edge belongs to navigation
* A second sheet over the first: close it first
* A task in several steps with a Back button: make it a page

## Anatomy

* Frame, bottom: full width. Height fits the content, up to 92 percent of the window
* Frame, bottom, full height: the whole window inside the top and bottom safe areas. For large dialogs and forms longer than the window
* Top corners, bottom sheet: 16 px (--radius-2xl)
* Grabber: 40 by 4 px, centered, 10 px from the top edge. Only when the sheet can be swiped (--surface-control, --radius-full)
* Bottom padding: the bottom safe area, at least 12 px (--space-3)
* Frame, side: right edge, full window height, 448 px wide. Full width below 640 px
* Header, body, footer: as in a dialog. The close button is 44 px on phones (--space-4, --space-5)
* Surface: raised fill and shadow, near opaque. In the dark theme a 1 px top highlight and a 0.5 px ring (--glass-fill-raised, --elevation-3, --glass-highlight, --glass-ring-raised)
* Scrim: no blur (--overlay)

## Variants

* Bottom: Below 640 px, the form every dialog takes. Swipe to close
* Bottom, full height: Large dialogs and forms longer than the window
* Side: From the right on wide screens, for details and settings read beside the page

## Sizes

* Side, 448 px wide
* Bottom, content height up to 92 percent of the window
* Bottom, full height inside the safe areas

## States

* Opening, bottom: Rises from below the window edge over 300 ms (--duration-slow, --ease-soft)
* Closing, bottom: Falls back below the edge over 200 ms (--duration-base, --ease-standard)
* Opening, side: Fades in while traveling 40 px from the right, over 200 ms (--duration-base, --ease-soft)
* Closing, side: Reverse, over 150 ms (--duration-fast, --ease-standard)
* Dragging: Follows the finger downward at 70 percent of its travel. Upward travel does nothing. Released short of 90 px and slower than 500 px per second, it springs back
* Unsaved entries: A swipe springs back and asks Discard the changes? first
* Reduced motion: A fade only (--duration-fast)
* Scrolled: As in a dialog: the 1 px line under the header or above the footer while content is hidden behind it (--border-rule)

## Keyboard

* Tab, Shift+Tab: Move within the sheet, wrapping
* Escape: Closes the sheet, or asks first when entries are unsaved
* Enter in a single line field: Submits the form

## Accessibility

* As a dialog: role dialog, aria-modal true, labeled by its title, focus kept inside and returned on close, the page behind out of reach
* The grabber is aria-hidden. The close button, named Close, does the same job
* Swipe starts only from the grabber or the header, so scrolling the body never closes the sheet
* Controls at least 44 px high on phones

## Content

* The title and the buttons follow the rules of a dialog

## Tokens

* --overlay
* --glass-fill-raised
* --glass-highlight
* --glass-ring-raised
* --elevation-3
* --radius-2xl
* --radius-full
* --surface-control
* --space-2
* --space-3
* --space-4
* --space-5
* --border-rule
* --duration-fast
* --duration-base
* --duration-slow
* --ease-soft
* --ease-standard