material-side-sheet

Trailing detail/filter panel. Modal slides over a scrim; standard opens in-flow next to the content; adaptive picks standard on ≥840px windows, modal below. RTL moves it to the left edge.

Modal — filters over a scrim

data-dialog-target opens it; Esc, scrim, the close icon or an data-dialog-close action dismiss.

Any Open Closed

Priority

Standard — in-flow next to the content

The host sits as a flex sibling of the main region and animates its inline size — the content shrinks, nothing overlaps, the page stays interactive.

Inventory

SKU Item On hand
Item
Hex bolts M8×40, zinc
Warehouse
Central — aisle 12, bin 4
On hand / reserved
1 250 / 300
Reorder point
500 units

Adaptive — variant="adaptive"

Standard panel when the window is ≥840px, modal below — same markup. Shrink the browser window to see it switch (state survives the swap).

Orders

current mode: —

Customer: Acme GmbH

Total: €4 812,00

Status: Awaiting payment

Events

(none)
Sample usage 
<!-- modal anywhere / standard in a flex layout / adaptive picks by width -->
<div class="flex">
  <main class="flex-1 min-w-0">…</main>
  <material-side-sheet id="detail" variant="adaptive" headline="Record">
    …content…
    <div slot="actions">
      <material-button label="Save" data-dialog-close="save"></material-button>
    </div>
  </material-side-sheet>
</div>

<material-button data-dialog-target="detail" label="Open"></material-button>