SideSheet

aidsgn-side-sheet presents a longer modal workflow at the viewport’s logical end edge. It moves to the left in RTL documents without changing source or focus order.

Open SideSheet

Refine the visible results without leaving the current page.

Cancel

Apply filters

<aidsgn-side-sheet id="filters" heading="Filters">
  <p>Refine the visible results.</p>
  <form method="dialog" data-aidsgn-modal-actions>
    <button value="cancel">Cancel</button>
    <button value="apply">Apply filters</button>
  </form>
</aidsgn-side-sheet>
<script>document.querySelector("#filters").show()</script>

SideSheet shares Dialog’s open, heading, close-label, show(), close(), aidsgn-close, and aidsgn-cancel API. Its scrollable body keeps the heading and close control visible.

--aidsgn-side-sheet-inline-size defaults to 28rem and never exceeds the viewport. At narrow widths it may cover the viewport, so underlying page content must not be required to complete the modal task.