Offer M3's standard side sheet beside the content

Plan step 23, containment.md § Missing ("Side sheets: a genuine standard
variant"). `<x-drawer standard>` is M3's other side-sheet variant: from
`expanded` it is co-planar with the content — no scrim, no focus trap,
nothing inert, 0dp elevation, `surface` rather than surface-container-low,
no corner, and an outline-variant rule down its inner edge in place of the
scrim — sitting in the page flow at the window's full height. Below
`expanded` it is the modal sheet, since M3 caps a side sheet at 400dp and
a medium window has too little left beside one. Capped at that 400dp
whatever `width` says, and it always draws the close affordance M3
requires, because nothing else closes it there.

`pane` is untouched and the header and SKILL.md say how the two differ:
pane is the list-detail companion, standard is supplementary content.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 06:38:16 +02:00
co-authored by Claude Fable 5.1
parent b1f64771f3
commit 07759cd664
4 changed files with 100 additions and 9 deletions
@@ -140,6 +140,27 @@
</x-modal>
</div>
BLADE,
'A standard side sheet: co-planar from expanded, modal below' => <<<'BLADE'
<div x-data="{ open: true }" class="w-full">
<div class="expanded:flex expanded:items-start expanded:gap-6">
<div class="min-w-0 flex-1 space-y-4">
<x-button label="Show or hide the filters" variant="tonal" x-on:click="open = ! open" />
<p class="type-body-md text-on-surface-variant">
From <code>expanded</code> (840px) the sheet beside this text is co-planar: no scrim, no focus trap, flat on the surface, divided from this column by a rule. Narrow the window and the same sheet becomes the modal one.
</p>
</div>
<x-drawer standard title="Filters" subtitle="Narrow the list down">
<x-list selectable label="Expiry">
<x-list-item title="One hour" :selected="false" />
<x-list-item title="Three days" :selected="true" />
<x-list-item title="Thirty days" :selected="false" />
</x-list>
<x-slot:actions><x-button label="Apply" variant="filled" /></x-slot:actions>
</x-drawer>
</div>
</div>
BLADE,
'Sheets' => <<<'BLADE'
<div x-data="{ open: false }">
<x-button label="Side sheet" variant="tonal" x-on:click="open = true" />