{{-- 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 **standard** side sheet (`standard`, from `expanded`) it is M3's other variant: co-planar with the content rather than over it — no scrim, no focus trap, nothing inert, 0dp elevation (material-components-android's `SideSheet.md`: "standard side sheet elevation = 0dp, coplanar"), `surface` rather than surface-container-low, no corner, and an outline-variant divider down its inner edge in place of the scrim. It sits in the page flow beside the content, spans the window's height and scrolls on its own. M3 calls the standard sheet "supplementary surfaces mainly for medium to expanded breakpoints" and the modal one "preferred at compact breakpoints"; the library switches at `expanded` (840px) rather than at medium, because M3 also caps a side sheet at 400dp and a 600px window has too little left beside one — below `expanded` a `standard` sheet is the modal sheet (docs/reference/m3/components-actions-communication-containment.md § Side sheets). `standard` and `pane` are not the same thing and neither replaces the other: a **pane** is the second pane of a list-detail layout — it shows what the list beside it has selected, is `22.5rem` wide (M3's 360dp fixed pane), sticks under the top of the viewport and sits on `surface-container` with a large corner. A **standard** sheet is supplementary content beside the primary content — filters, details, a list of actions — full height, flat on `surface`, divided from the content by a rule. Pass one or the other; `pane` wins if both are given. 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 or a standard sheet, which have neither from `expanded`. 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, 'standard' => false, ]) @php $model = $attributes->wire('model')->value() ?: null; $id = $attributes->get('id') ?? 'material-sheet-'.substr(md5($model.'|'.$title), 0, 10); $start = $side === 'start'; // One or the other: a pane is the list-detail companion, a standard sheet is supplementary // content beside the primary content. $standard = $standard && ! $pane; // Both stop being modal from `expanded`, so both watch the window for that width. $wide = $pane || $standard; // The side-sheet specs table caps the sheet at 400dp, which is where `width` already starts; // a wider one is the modal sheet's to take, not the co-planar standard sheet's. $sheetWidth = $standard ? "min({$width}, 25rem)" : $width; // M3 requires a close affordance; the prop can only ever add one, never take away the last // way out of the sheet. A standard sheet keeps no scrim and no trap from `expanded`, and // Escape leaves it open there, so it always draws one. $closeButton = $withCloseButton || ! $closeOnEscape || $withoutBackdropClose || $standard || ($pane && ! $paneCloseOnEscape); @endphp
$wide]) aria-hidden="true" >