Drawer
A Dialog that slides in from an edge of the window: filters or details from the side, the app's navigation on a phone (what some systems call a sheet or a side sheet). It is modal, like a dialog: the page behind waits. A panel that stays beside the content while people keep working is a sidebar, not a drawer. Specification: docs/components/drawer.md
Basics
A Dialog with data-side: the same <dialog class="canon-dialog">, header, body and footer, opened with command="show-modal"; it closes the same ways and gives focus back. data-side="end" (here, on the right) for content beside what it's about: filters, a record's details, a form. It floats just inside the window's edge, with the dialog's corners.
From the start
data-side="start" (on the left in left-to-right text): the app's navigation on a small screen, opened by a menu button. A drawer of links needs no footer.
Width
On the side, data-width: sm for navigation, the default for filters and forms, lg for a record's details. Always narrower than the window by 3rem, so the page shows beside it and a click there can close it.
Edge cases
Right to left, end is the left edge and start the right; the drawer slides in from there.