Sheet

The same <dialog>, edge-anchored with dialog-sheet (inline-end). Add dialog-sheet-start for the other side. There is no wrapper — same native element as Dialog, plus the sheet class.

Preview

Code

<button class="button" type="button" onclick={() => sheet.showModal()}>Open</button>

<dialog class="dialog dialog-sheet" bind:this={sheet} aria-labelledby="sheet-title">
	<div class="dialog-header">
		<div class="dialog-title" id="sheet-title">Menu</div>
		<p class="dialog-description">A side panel on the same dialog element.</p>
	</div>
	<div class="dialog-sheet-body">
		<p>Sheet body.</p>
	</div>
	<div class="dialog-footer">
		<button class="button" type="button" onclick={() => sheet.close()}>Close</button>
	</div>
</dialog>