livewire-material/resources/views/components/bottom-sheet.blade.php

{{-- An M3 bottom sheet: secondary content or actions anchored to the bottom of the screen.

     Modal by default: over a scrim, the page inert and still, dismissed by the scrim, Escape, or a
     downward drag on its handle (or anywhere on the sheet when its content is scrolled to the top).
     `standard` makes it part of the page instead — no scrim, nothing inert, and it stays until closed.
     The open state works as for `<x-drawer>`: `wire:model` (a flag or an id, written back `false` or
     `null` on close) or `open` in the surrounding Alpine scope; `close()` is in scope inside it.

     SheetBottomTokens (androidx Compose Material 3, Apache-2.0): surface-container-low, extra-large
     top corners, elevation 1, a 32×4px drag handle in on-surface-variant; 640px wide at most, centred
     on a wide screen; it rises on emphasized decelerate. `title` and `actions` as on a dialog.
     `height` caps it (default: 90% of the screen); content scrolls inside. --}}

@props([
    'title' => null,
    'standard' => false,
    'height' => '90dvh',
])

@php
    $model = $attributes->wire('model')->value() ?: null;
    $id = $attributes->get('id') ?? 'material-bottom-sheet-'.substr(md5($model.'|'.$title), 0, 10);
@endphp

<div
    x-data="{
        ...materialBottomSheet({{ $standard ? 'true' : 'false' }}),
        @if ($model !== null) open: @entangle($attributes->wire('model')).live, @endif
    }"
    x-on:keydown.window.escape="if (open && ! standard) close()"
>
    @unless ($standard)
        <div x-cloak x-show="open" x-transition.opacity.duration.200ms x-on:click="close()" class="fixed inset-0 z-40 bg-scrim/32" aria-hidden="true"></div>
    @endunless

    <section
        x-cloak
        x-show="open"
        x-ref="sheet"
        @unless ($standard) x-trap.inert.noscroll="open" @endunless
        x-transition:enter="transition-[translate] duration-(--md-sys-motion-spatial-default-duration) ease-emphasized-decelerate"
        x-transition:enter-start="translate-y-full"
        x-transition:enter-end="translate-y-0"
        x-transition:leave="transition-[translate] duration-(--md-sys-motion-effects-default-duration) ease-emphasized-accelerate"
        x-transition:leave-start="translate-y-0"
        x-transition:leave-end="translate-y-full"
        x-bind:style="dragged ? { translate: `0 ${dragged}px`, transition: 'none' } : {}"
        x-on:pointerdown="dragStart($event)"
        id="{{ $id }}"
        role="dialog"
        @unless ($standard) aria-modal="true" @endunless
        @if (filled($title)) aria-labelledby="{{ $id }}-title" @endif
        style="--sheet-max-height: {{ $height }}"
        {{ $attributes->whereDoesntStartWith('wire:model')->except(['id', 'class'])->class([
            'fixed inset-x-0 bottom-0 z-50 mx-auto flex max-h-(--sheet-max-height) w-full max-w-160 touch-pan-y flex-col rounded-t-corner-xl bg-surface-container-low pb-[env(safe-area-inset-bottom)] text-on-surface shadow-elevation-1',
            $attributes->get('class'),
        ]) }}
    >
        <div class="flex shrink-0 cursor-grab justify-center py-4 active:cursor-grabbing" data-drag-handle>
            <button type="button" class="h-1 w-8 rounded-corner-full bg-on-surface-variant/40 outline-offset-4 focus-visible:outline-3 focus-visible:outline-secondary" aria-label="{{ __('Close') }}" x-on:click="close()"></button>
        </div>

        <div x-ref="body" class="min-h-0 flex-1 overflow-y-auto px-6 pb-6">
            @if (filled($title))
                <h2 id="{{ $id }}-title" class="mb-4 type-title-lg">{{ $title }}</h2>
            @endif

            {{ $slot }}
        </div>

        @isset($actions)
            <div class="flex shrink-0 flex-wrap items-center justify-end gap-2 px-6 pb-6">{{ $actions }}</div>
        @endisset
    </section>
</div>