Structure
Class Description
.mdst-drawer Applied to a <dialog> element to style it as a side panel
.mdst-drawer-header Header section with title and close button
.mdst-drawer-close Close button in header
.mdst-drawer-body Scrollable main content area
.mdst-drawer-footer Footer with action buttons
Positions
Right Drawer

This drawer slides in from the right. It uses a native <dialog> element — you get backdrop, focus trapping, Escape to close, and accessibility for free. No JavaScript required.

Left Drawer

This drawer opens from the left via .mdst-drawer--left.
Sizes
Class Width
.mdst-drawer--sm 16rem
.mdst-drawer 20rem (default)
.mdst-drawer--lg 28rem
.mdst-drawer--full 100%
Small

16rem wide.
Large

28rem wide — room for more content.
Full Width

Takes up the full viewport width.
With Footer
Edit Profile

Form content would go here. The body scrolls independently if content overflows.
What you get for free

The drawer uses a native <dialog> element with command="show-modal" and command="close" — no JavaScript at all. You get backdrop via ::backdrop, focus trapping, Escape to close, scroll lock on the page behind, and proper accessibility (role="dialog", aria-modal) for free.

Usage
<!-- Trigger button -->
<button commandfor="my-drawer" command="show-modal">Open Drawer</button>

<!-- Right drawer (default) -->
<dialog id="my-drawer" class="mdst-drawer">
  <div class="mdst-drawer-header">
    <span>Drawer Title</span>
    <button class="mdst-drawer-close" commandfor="my-drawer" command="close">&#10005;</button>
  </div>
  <div class="mdst-drawer-body">
    <p>Content goes here.</p>
  </div>
  <div class="mdst-drawer-footer">
    <button commandfor="my-drawer" command="close">Cancel</button>
    <button commandfor="my-drawer" command="close">Save</button>
  </div>
</dialog>

<!-- Left position -->
<dialog class="mdst-drawer mdst-drawer--left">...</dialog>

<!-- Sizes -->
<dialog class="mdst-drawer mdst-drawer--sm">...</dialog>
<dialog class="mdst-drawer mdst-drawer--lg">...</dialog>
<dialog class="mdst-drawer mdst-drawer--full">...</dialog>