Give every side sheet the close affordance M3 requires

Plan step 12, containment.md C-04. `with-close-button` defaulted to
false, so a drawer could render with no exit at all once
`close-on-escape` and the scrim were off. It now defaults to true, and
`:with-close-button="false"` is ignored where nothing else closes the
sheet: Escape off, the scrim off, or a pane, which has neither.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 05:57:55 +02:00
co-authored by Claude Opus 5
parent d64fb91303
commit 335ea4f4f1
3 changed files with 24 additions and 4 deletions
+14 -3
View File
@@ -25,6 +25,13 @@
a size container, so its contents lay out by the room the sheet or pane actually has (`@md:`),
never by the viewport.
M3 **requires** a close affordance on a side sheet without one nobody can predict the
sheet's open/close flow or tell whether it is transient or permanent
(docs/reference/m3/components-actions-communication-containment.md § Side sheets →
Accessibility) — so `with-close-button` is on by default, and `:with-close-button="false"` is
ignored where nothing else closes the sheet: Escape off, the scrim off, or a pane, which has
neither.
maryUI's API, kept: `title`, `subtitle`, `separator`, `with-close-button`, `close-on-escape`,
`without-backdrop-close`, `right` (ignored; use `side`), and an `actions` slot. --}}
@@ -34,7 +41,7 @@
'separator' => false,
'side' => 'end',
'right' => true,
'withCloseButton' => false,
'withCloseButton' => true,
'closeOnEscape' => true,
'withoutBackdropClose' => false,
'width' => '25rem',
@@ -47,6 +54,10 @@
$model = $attributes->wire('model')->value() ?: null;
$id = $attributes->get('id') ?? 'material-sheet-'.substr(md5($model.'|'.$title), 0, 10);
$start = $side === 'start';
// M3 requires a close affordance; the prop can only ever add one, never take away the last
// way out of the sheet.
$closeButton = $withCloseButton || ! $closeOnEscape || $withoutBackdropClose || ($pane && ! $paneCloseOnEscape);
@endphp
<div
@@ -105,7 +116,7 @@
$attributes->get('class'),
]) }}
>
@if (filled($title) || $withCloseButton)
@if (filled($title) || $closeButton)
<div class="mb-4">
<div class="flex items-start justify-between gap-3">
<div class="min-w-0">
@@ -118,7 +129,7 @@
@endif
</div>
@if ($withCloseButton)
@if ($closeButton)
<span class="-me-3 -mt-2 inline-flex shrink-0">
<x-livewire-material::button icon="close" :tooltip-left="__('Close')" x-on:click="close()" />
</span>