Styling

Cascade layer

Every rule ships inside @layer surface-elements. Any rule you write outside a layer wins, whatever its specificity, so you never need !important.

/* Beats the library's padding, no specificity games. */
surface-drawer > dialog {
  padding: 2rem;
}

If you use layers yourself, declare the order once:

@layer reset, surface-elements, components;

Custom properties

Set them on the dialog, on <surface-drawer> or on any ancestor.

Property	Default	Description
--surface-drawer-size	28rem	Inline size for start/end, block size for top/bottom (auto).
--surface-drawer-max-size	calc(100% - 3rem)	Upper bound for the size.
--surface-drawer-padding	1rem	Padding of the dialog.
--surface-drawer-background	Canvas	Background of the dialog.
--surface-drawer-color	CanvasText	Text color of the dialog.
--surface-drawer-border	none	Border of the dialog.
--surface-drawer-radius	0	Border radius of the dialog.
--surface-drawer-shadow	0 0 2rem rgb(0 0 0 / 0.2)	Shadow of the dialog.
--surface-drawer-backdrop	rgb(0 0 0 / 0.5)	Backdrop background.
--surface-drawer-backdrop-filter	none	Backdrop filter.
--surface-drawer-duration	0.3s	Enter and exit transition duration.
--surface-drawer-easing	cubic-bezier(0.38, 0.005, 0.215, 1)	Enter and exit easing.

Themed drawer

Open themed drawer

Rounded, blurred, slower

✕

<surface-drawer edge="bottom">
  <dialog
    style="
      --surface-drawer-radius: 1rem 1rem 0 0;
      --surface-drawer-padding: 1.5rem;
      --surface-drawer-backdrop: rgb(0 0 0 / 0.25);
      --surface-drawer-backdrop-filter: blur(4px);
      --surface-drawer-duration: 0.5s;
      --surface-drawer-max-size: 60vh;
    "
  ></dialog>
</surface-drawer>

State hooks

Selector	Matches
surface-drawer > dialog[open]	An open drawer.
surface-drawer > dialog[data-closing]	A drawer playing a fallback exit animation.
surface-drawer:state(open)	The web component while its dialog is open.

/* Dim the trigger area while the cart is open. */
body:has(surface-drawer:state(open)) .toolbar {
  opacity: 0.5;
}

Motion

The drawer slides in from its edge. Under prefers-reduced-motion: reduce it fades instead, and the duration drops to 0.15s.