{{-- 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 `xl` it is a list-detail pane beside the list instead. 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 `sm` (a caller's `w-*` would race the sheet's own). As a pane (`pane`, from `xl`) nothing is covered: the page renders the drawer after its list in an `xl:flex xl:items-start xl: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 (the sheet's width by default). 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' => null, ]) @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" >