Drawer
Drawer holds navigation off screen and slides it in over a scrim when you need it.
Preview
The drawer covers the leading edge of the screen and dims everything behind it. Open it from the button, dismiss it from the scrim or from the close control in its own header.
The shell is a fixed 852, not a hug. A Spacer set to fill takes the 36 left between Recents and Account, so the account row holds the bottom edge whatever the list above it does. The phone and the Open button are stand-ins. The avatar is Avatar's Acronym type at Size lg, one initial on colors/gray/200. The account row also carries a Badge instance, which belongs on the Badge page.
Anatomy
Eight bands in one vertical frame with no gap and no padding of its own. Each band carries its own, so these numbers are the whole layout.
The eight heights add up to 852 exactly. The account rule is drawn inside the frame, so it costs no height: as a CSS border the shell would measure 853.
The row
Every line in the drawer is one component, Drawer / Item, on two axes: State says how the row is doing, Trailing says what it opens.
Default and Pressed take text/sub-700 at 400; Active and Accent step up to 600, one on bg/soft-100 and one on no fill. Chevron and more hold fg/soft-500 in all four states, so the trailing mark never carries the state. More is the only variant that moves geometry, dropping right padding from 12 to 8 for a 24 box.
Properties
All five sit on the row. The shell has no property and no variant: you build a drawer by stacking rows in it.
Label is one line and truncates rather than wraps. Icon turns the 20 leading slot off, which is how every Recents row runs. Trailing and State multiply out to the twelve variants.
Tokens
Every colour is bound to a variable and turns with the mode. The shell takes bg/white-0, the search field and Pressed row bg/weak-50, the Active row bg/soft-100, the divider and account rule border/soft-100, the mark and Accent row brand/base.
The scrim is bg/scrim, black at 40 percent in light and 48 in dark. fg and text hold the same value at every step, but icons bind to fg and words to text, so a later split reaches both. Search field radius 18 is dimensions/radius/xl, the close control is dimensions/radius/full, and the shell 28 and row 10 are typed on the frame.
Guidelines
A drawer is a list of destinations with one thing happening in it. Two emphasis states, used once each, keep it readable.
One Accent row for the action that starts something, one Active row for the conversation on screen.
Accent on more than one row. Emphasis spread across the list is emphasis spent, and the row that acts stops standing out.
Pick the trailing mark for the gesture: chevron on a row that opens another list, more on a row with its own menu, nothing on a row that simply goes somewhere. Recents rows run with Icon off, so the conversations read as text.