material-bottom-sheet — @viewflow/material

Modal — action list (menu alternative)

Declarative trigger via data-dialog-target. Dismiss by scrim tap, Esc, swipe-down on the handle, or picking an item (data-dialog-close).

Modal — tall content (peek at 50%, drag to full)

Content exceeds half the screen: the sheet opens capped at 50% of the viewport, the handle drags it to full height (72dp top margin, 56dp when the window is wider than 640px), the body scrolls internally. Fast downward flick dismisses.

Filter results

Non-dismissible + no handle

dismissible="false" ignores Esc/scrim/swipe; drag-handle="false" hides the handle — only the explicit button closes.

Save changes before leaving?

Standard variant — page stays interactive

variant="standard": no scrim, no focus trap — like a persistent player/cart bar. Toggle it and keep clicking the counter.

clicks: 0

Take Five — Dave Brubeck

Time Out · 1959

Events

(none)

Sample usage

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

<material-bottom-sheet id="sheet1">
  <material-list>
    <material-list-item label="Copy link" leading-icon="link"
                        data-dialog-close="copy"></material-list-item>
  </material-list>
</material-bottom-sheet>

<script>
  document.getElementById('sheet1').addEventListener('materialSheetClose',
    e => console.log(e.detail.returnValue));
</script>