{{-- An M3 side sheet: detail or controls that slide in from the edge over a scrim; on a phone it is the whole screen. With `pane`, from `expanded` (840px) it is a second pane beside the list instead — M3 shows two panes for list-detail from expanded upwards, and puts a supporting pane on the side of the focus pane at expanded, 360dp wide (docs/reference/m3/foundations-supplement.md § Canonical layout examples). The open state is the Livewire property in `wire:model` (entangled live, so a detail held in the URL follows a close) — a flag or an id — and closing writes back `false` or `null`. Without `wire:model` it reads and writes `open` in the Alpine scope around it. `close()` is in scope for anything inside the sheet, so it can draw its own close button. As a sheet it is modal: the page inert and still (`x-trap.inert.noscroll`), and it enters on emphasized decelerate rather than a spring — a sheet anchored to the edge that overshot would open a gap. M3's modal side sheet: surface-container-low, a large corner on its inner edge, elevation 1; `side` `end` (the default) or `start`; `width` from `medium` (a caller's `w-*` would race the sheet's own — a compact window gets the full-bleed sheet). As a pane (`pane`, from `expanded`) nothing is covered: the page renders the drawer after its list in an `expanded:flex expanded:items-start expanded:gap-6` row, the drawer sticks under the top of the viewport, the list stays usable and another row swaps what it shows — no scrim, no trap, no inert page. While closed it takes no room. `pane-width` sizes the pane (`22.5rem`, M3's 360dp fixed pane). Escape closes the sheet but leaves a pane open, since the page beside it is still in use; `pane-close-on-escape` closes the pane on Escape too, for a pane that is a transient detail. The body is a size container, so its contents lay out by the room the sheet or pane actually has (`@md:`), never by the viewport. maryUI's API, kept: `title`, `subtitle`, `separator`, `with-close-button`, `close-on-escape`, `without-backdrop-close`, `right` (ignored; use `side`), and an `actions` slot. --}} @props([ 'title' => null, 'subtitle' => null, 'separator' => false, 'side' => 'end', 'right' => true, 'withCloseButton' => false, 'closeOnEscape' => true, 'withoutBackdropClose' => false, 'width' => '25rem', 'pane' => false, 'paneWidth' => '22.5rem', 'paneCloseOnEscape' => false, ]) @php $model = $attributes->wire('model')->value() ?: null; $id = $attributes->get('id') ?? 'material-sheet-'.substr(md5($model.'|'.$title), 0, 10); $start = $side === 'start'; @endphp
$pane]) aria-hidden="true" >