Bottom sheet

The bottom sheet (.bottom-sheet) is a panel that slides up from the bottom edge of the viewport, overlaying the page behind a dimmed scrim — commonly used for action lists, filters, or short forms on small screens. It is always modal (no standard/inline mode like side sheet has) — opening it always shows the scrim and locks interaction until dismissed.

<button type="button" class="btn toggle-target" aria-controls="bottom-sheet-demo">
  <span class="btn-label">Filters</span>
</button>

<div class="bottom-sheet is-closed" id="bottom-sheet-demo">
  <div class="bottom-sheet-scrim action-close"></div>
  <div class="bottom-sheet-panel" role="dialog" aria-labelledby="bottom-sheet-demo-title">
    <div class="bottom-sheet-handle" aria-hidden="true"></div>
    <div class="bottom-sheet-header" id="bottom-sheet-demo-title">Filters</div>
    <div class="bottom-sheet-content">
      <p>Filter options go here.</p>
    </div>
  </div>
</div>