diff --git a/resources/boost/skills/livewire-material-development/SKILL.md b/resources/boost/skills/livewire-material-development/SKILL.md index 361a3660..d5e7b2ef 100644 --- a/resources/boost/skills/livewire-material-development/SKILL.md +++ b/resources/boost/skills/livewire-material-development/SKILL.md @@ -485,7 +485,7 @@ An M3 side sheet, bound like ``; `close()` in scope. Props: `title`, `s ### `` -An M3 bottom sheet, bound like ``: modal by default (scrim, inert page, drag the handle down or press Escape to close), `standard` for one that is part of the page. Props: `title`, `height` (`90dvh`), `actions` slot. +An M3 bottom sheet, bound like ``: modal by default (scrim, inert page, drag the handle down or press Escape to close), `standard` for one that is part of the page. Props: `title`, `height` (`50dvh` — M3 caps a modal sheet's initial position at half the screen; whatever you pass is held under a ceiling of the screen less M3's 72dp top margin), `actions` slot. ### ``, `` diff --git a/resources/views/components/bottom-sheet.blade.php b/resources/views/components/bottom-sheet.blade.php index 428e8510..d8a85acb 100644 --- a/resources/views/components/bottom-sheet.blade.php +++ b/resources/views/components/bottom-sheet.blade.php @@ -9,7 +9,11 @@ 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. + + `height` is where it opens, and M3 caps a modal sheet's initial position at half the screen — + "if content exceeds that, it can be pulled to full screen and scrolled internally" — so the + default is `50dvh`, under a ceiling of the screen less M3's 72dp top margin. Content scrolls + inside. The handle is drawn 32×4px and pressed 48×48: `touch-target` on the button and 22px above and below it, which is M3's "drag handle has an accessible 48dp hit target" and SheetDefaults.kt's @@ -18,7 +22,7 @@ @props([ 'title' => null, 'standard' => false, - 'height' => '90dvh', + 'height' => '50dvh', ]) @php @@ -54,14 +58,14 @@ role="dialog" @unless ($standard) aria-modal="true" @endunless @if (filled($title)) aria-labelledby="{{ $id }}-title" @endif - style="--sheet-max-height: {{ $height }}" + style="--sheet-max-height: min({{ $height }}, calc(100dvh - 72px))" {{ $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-[var(--material-safe-bottom,env(safe-area-inset-bottom))] text-on-surface shadow-elevation-1', $attributes->get('class'), ]) }} >
- +
diff --git a/tests/Feature/Components/OverlayTest.php b/tests/Feature/Components/OverlayTest.php index 76733274..316b444d 100644 --- a/tests/Feature/Components/OverlayTest.php +++ b/tests/Feature/Components/OverlayTest.php @@ -129,9 +129,12 @@ it('draws a modal bottom sheet with a drag handle, or a standard one without a s ->toContain('data-drag-handle') ->toContain('aria-modal="true"') ->toContain('py-5.5') - ->toContain('touch-target h-1 w-8') + ->toContain('touch-target h-1 w-8 rounded-corner-full bg-on-surface-variant ') + ->toContain('--sheet-max-height: min(50dvh, calc(100dvh - 72px))') ->and((string) $this->blade('Body')) ->toContain('...materialBottomSheet(true)') ->not->toContain('bg-scrim/32') - ->not->toContain('aria-modal'); + ->not->toContain('aria-modal') + ->and((string) $this->blade('Body')) + ->toContain('--sheet-max-height: min(90dvh, calc(100dvh - 72px))'); });