noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rewrite the bottom sheet without Tailwind

Browse Source 
Plan step 36 (containment group): <x-bottom-sheet>'s class lists move
into resources/css/components/bottom-sheet.css, keyed on
data-md-bottom-sheet (data-md-open, data-md-standard) and
data-md-bottom-sheet-scrim/-probe/-panel (data-md-preset while
heights/snap gives it stops)/-handle/-grip/-announce/-body/-title/
-actions. x-transition's enter/leave classes are replaced the same way
as drawer.css: @starting-style + transition-behavior: allow-discrete
on the x-show-driven panel, the asymmetric open (spatial-default,
emphasized-decelerate) vs close (effects-default, emphasized-
accelerate) timing coming from the more specific open-state selector's
own transition-duration/-timing-function, which a CSS transition
always takes from the after-change style. data-md-preset adds the
height-between-stops transition (the spatial spring) alongside it,
independent of the open/close slide.

The drag handle (C-01, already fixed in the Tailwind-era markup this
replaces) renders the shared md-focus-ring and md-touch-target classes
instead of a hand-rolled ring: unlike the datepicker's day, its own
visible bar is not a smaller indicator drawn inside a bigger box those
classes cannot reach, so nothing here refines them further. Its 22px
vertical padding (SheetDefaults.kt's DragHandleVerticalPadding) is a
literal, matching alert.css's 12px for the same reason: 22 is not on
the measurement scale.

Hooks renamed data-drag-handle -> data-md-bottom-sheet-handle,
updated in resources/js/bottom-sheet.js and
tests/Browser/ContainmentTest.php; data-sheet -> data-md-drawer in
that test's comment. <x-menu sheet-at-compact> renders this component
unchanged; menu.css now imports bottom-sheet.css, and
tests/Feature/Components/MenuTest.php's stale Tailwind-class assertion
for the embedded sheet is replaced with a hook check. The two
sheet-at-compact browser tests in ActionsTest.php stay on
assertVisible(): the sheet is still x-show-driven (a deliberate choice
for this batch, keeping the existing modal/side-sheet/bottom-sheet
architecture and converting only their styling), so open still shows
as visibility rather than :popover-open; their comments no longer say
"not rewritten in this batch".

Imported from the Containment block of components.css. Browser tests
owed by docs/plans/material-3-browser-tests.md, added to
ContainmentTest.php but not run: dialog divider marks on scroll
(including that a nested dialog keeps its own marks), the full-screen
phone bar, separator always, no fade under reduced motion, the
scrolling body's inset focus ring; bottom sheet preset-height cycling
with its announcement and a drag settling on the nearest stop; the
standard side sheet from 840px without a scrim or a focus trap, modal
below it.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 21:16:22 +02:00
co-authored by Claude Sonnet 5
parent 9dd527f303
commit 287340b066
10 changed files with 469 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components.css
+1
View File
@@ -63,5 +63,6 @@
@import './components/list.css';
@import './components/modal.css';
@import './components/drawer.css';
@import './components/bottom-sheet.css';
/* Navigation */
resources/css/components/bottom-sheet.css
+154
View File
@@ -0,0 +1,154 @@
/*
* `<x-bottom-sheet>`: M3's modal and standard bottom sheets (SheetBottomTokens.kt, androidx
* Compose Material 3, Apache-2.0; docs/reference/m3/
* components-actions-communication-containment.md § Bottom sheets → Specs).
*
* [data-md-bottom-sheet] the wrapper; data-md-open, data-md-standard
* [data-md-bottom-sheet-scrim] modal only
* [data-md-bottom-sheet-probe] hidden, measures a stop's px height for a drag to settle on
* [data-md-bottom-sheet-panel] surface-container-low, extra-large top corners, elevation 1;
* data-md-preset while `heights`/`snap` gives it stops
* [data-md-bottom-sheet-handle] the drag target and M3's 48dp hit area (C-01)
* [data-md-bottom-sheet-grip] the 32×4px bar, the shared classes' touch target
* [data-md-bottom-sheet-announce] a live region, only while stops exist
* [data-md-bottom-sheet-body], [data-md-bottom-sheet-title], [data-md-bottom-sheet-actions]
*
* 640px max width, centred; 28px top corners only (`DockedContainerShape` = CornerExtraLargeTop);
* 50dvh default open height under a ceiling of the screen less M3's 72dp top margin (C-19). It
* rises on emphasized decelerate and only falls on emphasized accelerate — the asymmetric timing a
* more specific selector for the open state supplies, since a CSS transition always takes its
* duration and easing from the *after-change* style (the technique resources/css/components/
* drawer.css also uses). `data-md-preset` adds the height-between-stops transition on the spatial
* spring, independent of the open/close slide.
*
* The handle's own 22px top/bottom padding (`SheetDefaults.kt`'s `DragHandleVerticalPadding`) is a
* literal — 22 is not on the measurement scale — matching alert.css's 12px for the same reason.
* The grip button draws the shared `md-focus-ring` and `md-touch-target` classes rather than a
* hand-rolled ring: its own visible bar is not a smaller indicator drawn inside a bigger box those
* classes cannot reach (unlike the datepicker's day) — the box they draw *is* the button's whole
* hit area, so nothing here refines them further.
*/
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@layer material.components {
[data-md-bottom-sheet-scrim] {
position: fixed;
inset: 0;
z-index: 40;
background-color: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent);
transition-property: opacity, display;
transition-duration: var(--md-sys-motion-effects-default-duration);
transition-timing-function: var(--md-sys-motion-effects-default);
transition-behavior: allow-discrete;
}
@starting-style {
[data-md-bottom-sheet-scrim] {
opacity: 0;
}
}
[data-md-bottom-sheet-probe] {
position: fixed;
inset-inline-start: 0;
top: 0;
width: 0;
visibility: hidden;
pointer-events: none;
}
[data-md-bottom-sheet-panel] {
position: fixed;
inset-inline: 0;
bottom: 0;
z-index: 50;
display: flex;
width: 100%;
max-width: 640px;
margin-inline: auto;
flex-direction: column;
max-height: var(--sheet-max-height);
touch-action: pan-y;
border-radius: var(--md-sys-shape-corner-xl) var(--md-sys-shape-corner-xl) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none);
background-color: var(--md-sys-color-surface-container-low);
color: var(--md-sys-color-on-surface);
box-shadow: var(--md-sys-elevation-1);
padding-bottom: var(--material-safe-bottom, env(safe-area-inset-bottom));
translate: 0 100%;
transition-property: translate, display;
transition-duration: var(--md-sys-motion-effects-default-duration);
transition-timing-function: var(--md-sys-motion-easing-emphasized-accelerate);
transition-behavior: allow-discrete;
}
[data-md-bottom-sheet][data-md-open] [data-md-bottom-sheet-panel] {
translate: 0 0;
transition-duration: var(--md-sys-motion-spatial-default-duration);
transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate);
}
@starting-style {
[data-md-bottom-sheet][data-md-open] [data-md-bottom-sheet-panel] {
translate: 0 100%;
}
}
/* With stops the panel is the height of its current one, moving between them on the spatial
spring, independent of the translate that opens and closes the sheet. */
[data-md-bottom-sheet-panel][data-md-preset] {
height: var(--sheet-max-height);
transition-property: translate, height, display;
transition-duration: var(--md-sys-motion-effects-default-duration), var(--md-sys-motion-spatial-default-duration), var(--md-sys-motion-effects-default-duration);
transition-timing-function: var(--md-sys-motion-easing-emphasized-accelerate), var(--md-sys-motion-spatial-default), var(--md-sys-motion-easing-emphasized-accelerate);
}
[data-md-bottom-sheet][data-md-open] [data-md-bottom-sheet-panel][data-md-preset] {
transition-duration: var(--md-sys-motion-spatial-default-duration), var(--md-sys-motion-spatial-default-duration), var(--md-sys-motion-spatial-default-duration);
transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate), var(--md-sys-motion-spatial-default), var(--md-sys-motion-easing-emphasized-decelerate);
}
[data-md-bottom-sheet-handle] {
display: flex;
flex-shrink: 0;
justify-content: center;
padding-block: 22px;
cursor: grab;
}
[data-md-bottom-sheet-handle]:active {
cursor: grabbing;
}
[data-md-bottom-sheet-grip] {
width: 32px;
height: 4px;
border-radius: var(--md-sys-shape-corner-full);
background-color: var(--md-sys-color-on-surface-variant);
}
[data-md-bottom-sheet-body] {
min-height: 0;
flex: 1 1 0%;
overflow-y: auto;
padding-inline: var(--md-sys-measurement-space300);
padding-bottom: var(--md-sys-measurement-space300);
}
[data-md-bottom-sheet-title] {
margin-bottom: var(--md-sys-measurement-space200);
font: var(--md-sys-typescale-title-lg);
letter-spacing: var(--md-sys-typescale-title-lg-tracking);
}
[data-md-bottom-sheet-actions] {
display: flex;
flex-shrink: 0;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: var(--md-sys-measurement-space100);
padding-inline: var(--md-sys-measurement-space300);
padding-bottom: var(--md-sys-measurement-space300);
}
}
resources/css/components/menu.css
+1
View File
@@ -38,6 +38,7 @@
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@import './icon.css';
@import './bottom-sheet.css';
@layer material.components {
[data-md-menu] {
resources/js/bottom-sheet.js
+1 -1
View File
@@ -111,7 +111,7 @@ window.materialBottomSheet = (standard = false, presets = {}) => ({
dragStart(event) {
const sheet = this.$refs.sheet
const onHandle = event.target.closest('[data-drag-handle]')
const onHandle = event.target.closest('[data-md-bottom-sheet-handle]')
const atTop = this.$refs.body.scrollTop <= 0
if (event.button !== 0 || (!onHandle && !atTop) || event.target.closest('input, textarea, select, [contenteditable]')) {
resources/views/components/bottom-sheet.blade.php
+28 -24
View File
@@ -33,9 +33,19 @@
flick (docs/reference/m3/components-actions-communication-containment.md § Bottom sheets →
Behaviour, Accessibility).
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
`DragHandleVerticalPadding = 22.dp` (docs/reference/m3/components-actions-communication-containment.md § Bottom sheets → Specs). --}}
The handle's wrapper is the drag target and M3's 48dp hit area: the button's own visual bar is
32×4px, and `md-touch-target` (foundation/interaction.css) extends it, while the wrapper's own
22px top/bottom padding (`SheetDefaults.kt`'s `DragHandleVerticalPadding`) gives the row its
M3-specified height regardless — 4 + 22 + 22 = 48px (C-01). The button renders the shared
`md-focus-ring` and `md-touch-target` classes rather than a hand-rolled ring: unlike the
datepicker's day, its own visible bar is not a smaller indicator drawn inside a bigger box the
classes cannot reach — the box the classes draw is the button's whole hit area.
The root renders `data-md-bottom-sheet` (data-md-open, data-md-standard); the parts are
`data-md-bottom-sheet-scrim`, `-panel` (data-md-preset while stops exist), `-handle` (the drag
target), `-grip` (the 32×4px bar), `-announce`, `-body`, `-title`, `-actions` — drawn by
resources/css/components/bottom-sheet.css. `<x-menu sheet-at-compact>` renders this component
for its compact presentation. --}}
@props([
'title' => null,
@@ -89,15 +99,18 @@
@if ($model !== null) open: @entangle($attributes->wire('model')).live, @endif
}"
x-on:keydown.window.escape="if (open && ! standard) close()"
x-bind:data-md-open="open ? '' : null"
data-md-bottom-sheet
@if ($standard) data-md-standard @endif
>
@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>
<div data-md-bottom-sheet-scrim x-cloak x-show="open" x-on:click="close()" aria-hidden="true"></div>
@endunless
@if ($stops !== [])
{{-- A stop is a CSS length, and only the browser can say what `25dvh` is in pixels; this
measures one when a drag has to find the nearest. --}}
<div x-ref="probe" aria-hidden="true" class="pointer-events-none invisible fixed start-0 top-0 w-0"></div>
<div x-ref="probe" data-md-bottom-sheet-probe aria-hidden="true"></div>
@endif
<section
@@ -105,35 +118,26 @@
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="sheetStyle"
x-on:pointerdown="dragStart($event)"
id="{{ $id }}"
role="dialog"
@unless ($standard) aria-modal="true" @endunless
@if (filled($title)) aria-labelledby="{{ $id }}-title" @endif
data-md-bottom-sheet-panel
@if ($stops !== []) data-md-preset @endif
@if ($stops === [])
style="--sheet-max-height: min({{ $height }}, calc(100dvh - 72px))"
@else
style="--sheet-stop: {{ $stops[$start] }}; --sheet-max-height: min(var(--sheet-stop), calc(100dvh - 72px))"
@endif
{{ $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',
// With stops the sheet is the height of its stop, not of its content, and it moves
// between them on the spatial track — anything that changes size does.
'h-(--sheet-max-height) transition-[height] duration-(--md-sys-motion-spatial-default-duration) ease-spatial-default' => $stops !== [],
$attributes->get('class'),
]) }}
{{ $attributes->whereDoesntStartWith('wire:model')->except(['id']) }}
>
<div class="flex shrink-0 cursor-grab justify-center py-5.5 active:cursor-grabbing" data-drag-handle>
<div data-md-bottom-sheet-handle>
<button
type="button"
class="touch-target h-1 w-8 rounded-corner-full bg-on-surface-variant outline-offset-4 focus-visible:outline-3 focus-visible:outline-secondary"
class="md-focus-ring md-touch-target"
data-md-bottom-sheet-grip
aria-label="{{ $stops === [] ? __('Close') : __('Change the sheet height') }}"
@if ($stops !== []) x-bind:aria-label="handleLabel" @endif
x-on:click="activate()"
@@ -141,19 +145,19 @@
</div>
@if ($stops !== [])
<span class="sr-only" aria-live="polite" x-text="announcement"></span>
<span data-md-bottom-sheet-announce class="md-visually-hidden" aria-live="polite" x-text="announcement"></span>
@endif
<div x-ref="body" class="min-h-0 flex-1 overflow-y-auto px-6 pb-6">
<div x-ref="body" data-md-bottom-sheet-body>
@if (filled($title))
<h2 id="{{ $id }}-title" class="mb-4 type-title-lg">{{ $title }}</h2>
<h2 id="{{ $id }}-title" data-md-bottom-sheet-title>{{ $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>
<div data-md-bottom-sheet-actions>{{ $actions }}</div>
@endisset
</section>
</div>