A modal side sheet for connect flows and create forms.
Guidance
Drawers are modal side sheets for work that needs more room than a dialog but should not leave
the page: connecting an agent or a source (CLI and API snippets), or a create form. They slide in
from the inline end by default (placement="start" or "bottom" for the others), on
mm-raised with shadow-dialog over the same flat ink scrim as a dialog. Widths are sm
(360px), md (--blade-w, 36rem, default) and lg (800px); full takes the viewport.
Behaviour is the dialog's: a native modal <dialog>, focus to the first autofocus element or
the first control, Tab wraps, Escape and the close button fire a cancelable mm-request-close,
focus returns to the opener and page scrolling is locked. The slide is a transform over
--mm-dur-dialog (220ms), instant when opened from the keyboard and still under reduced motion.
Placement follows the writing direction, so end is the left edge in right-to-left pages.
Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
Properties
| Property | Attribute | Type | Default | Description |
|---|
placement | placement | DrawerPlacement | 'end' | Edge the drawer comes from: end (default, the inline end), start or bottom. |
heading | heading | string | '' | The heading, which also names the dialog. Required unless the heading slot is used. |
description | description | string | '' | A sentence under the heading, announced with it. |
size | size | DialogSize | 'md' | sm (400px), md (560px, default), lg (800px) or full (the viewport less the page gutter). |
open | open | boolean | false | Opens and closes the dialog. Reflects. |
dismissible | dismissible | boolean | false | Lets a click on the backdrop close the dialog (through mm-request-close). Leave off for forms. |
headingLevel | heading-level | number | 2 | Heading level for the outline, 1 to 6. The look does not change. |
closeLabel | close-label | string | '' | Accessible name of the close button. Defaults to the close string. |
alert | alert | boolean | false | Announces the dialog as an alertdialog: an urgent interruption that needs a response, such as confirming a destructive action (mm-confirm-dialog sets it). Leave off for forms and tasks. Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/ |
returnValue | | string | '' | The value the dialog last closed with. |
Methods
| Method | Description |
|---|
show() | Opens the dialog. |
close() | Closes the dialog with an optional return value, which mm-close carries. |
requestClose() | Asks to close as Escape would: fires a cancelable mm-request-close and closes unless it is cancelled. |
Events
| Event | Detail | Description |
|---|
mm-open | CustomEvent<Record<string, never>> | The drawer opened and focus moved into it. |
mm-close | CustomEvent<DialogCloseDetail> | The drawer closed. |
mm-request-close | CustomEvent<DialogRequestCloseDetail> | Escape, the close button or the backdrop asked to close. Cancel it to keep the drawer open. |
Slots
| Slot | Description |
|---|
| Default | The body. |
heading | A rich heading, in place of the heading attribute. |
description | A rich description, in place of the description attribute. |
footer | Actions, primary last. |
CSS parts
| Part | Description |
|---|
dialog | The native dialog element. |
header | The header row. |
heading | The heading. |
description | The description. |
close | The close button. |
body | The scrolling body. |
footer | The footer row. |
Examples
Every state of mm-drawer in Storybook, with keyboard and screen reader tests.