{{-- 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. 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. --}} @props([ 'title' => null, 'subtitle' => null, 'separator' => false, 'side' => 'end', 'right' => true, 'withCloseButton' => true, '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'; // 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
$pane]) aria-hidden="true" >