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

Rewrite the collapse without Tailwind

Browse Source 
Plan step 36 (containment group): <x-collapse>'s Tailwind-era
resources/css/components/collapse.css (the height animation, C-24)
becomes the plain stylesheet, keyed on data-md-collapse and
data-md-variant; the summary renders the shared md-state-layer and
md-focus-ring classes instead of copying their rules. Leaves
tailwind.css for the Containment block of components.css.

Icon-to-title and title-to-chevron gaps stay 12px (not an M3 number;
collapse isn't an M3 component), written as the average of the two
adjacent spacing steps since the scale has no exact token for 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 20:26:52 +02:00
co-authored by Claude Sonnet 5
parent c887bcd054
commit 76abdd6242
6 changed files with 109 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/collapse.blade.php
+17 -18
View File
@@ -4,10 +4,10 @@
state through a Livewire morph (`wire:ignore.self` stops the server's HTML from closing it),
and is announced as a disclosure. Drawn in M3's terms: a title-medium `title` (or a
`heading` slot), an optional leading `icon`, a chevron that turns over on the spatial spring,
and — where the browser supports animating `details` content (`interpolate-size`) — a height
that eases open on the same spring (`data-collapse`, resources/css/components/collapse.css).
`open` starts it open. `variant`: `plain` (the default, on the surface around
it) or `filled` (a surface-container tile with a large corner).
and a height that eases open on the same spring
(`data-md-collapse`, resources/css/components/collapse.css). `open` starts it open.
`variant`: `plain` (the default, on the surface around it) or `filled` (a surface-container
tile with a large corner).
Its open state can be bound, both ways:
- `wire:model` (any modifiers; `.live` tells the server at once) entangles it with a Livewire
@@ -18,7 +18,10 @@
paint, until Alpine starts and applies the property.
The state lives in `collapseOpen` on the `<details>`, a name kept clear of `open`, which a
dialog inside the slot may be reading from a scope around it. Without a binding there is no
Alpine on it at all. --}}
Alpine on it at all.
It renders the foundation's `md-state-layer` and `md-focus-ring` (foundation/interaction.css)
on the summary; nothing here copies their rules. --}}
@props([
'title' => null,
@@ -31,6 +34,7 @@
$model = $attributes->wire('model')->value() ?: null;
$bound = $model !== null || count($attributes->whereStartsWith('x-model')->getAttributes()) > 0;
$expanded = (bool) $open;
$variant = $variant === 'filled' ? 'filled' : 'plain';
if ($model !== null && ($component = \Livewire\Livewire::current()) !== null) {
$expanded = (bool) data_get($component, $model);
@@ -39,7 +43,8 @@
<details
wire:ignore.self
data-collapse
data-md-collapse
data-md-variant="{{ $variant }}"
@if ($bound)
x-data="{ collapseOpen: @if ($model !== null) @entangle($attributes->wire('model')) @else @js($expanded) @endif }"
@if ($model === null) x-modelable="collapseOpen" @endif
@@ -47,25 +52,19 @@
x-on:toggle="collapseOpen = $el.open"
@endif
@if ($expanded) open @endif
{{ $attributes->whereDoesntStartWith('wire:model')->class([
'group/collapse [interpolate-size:allow-keywords]',
'rounded-corner-lg bg-surface-container' => $variant === 'filled',
]) }}
{{ $attributes->whereDoesntStartWith('wire:model') }}
>
<summary @class([
'state-layer focus-ring flex min-h-12 cursor-pointer list-none items-center gap-3 rounded-[inherit] type-title-md [&::-webkit-details-marker]:hidden',
'px-4' => $variant === 'filled',
])>
<summary data-md-collapse-summary class="md-state-layer md-focus-ring">
@if ($icon)
<x-livewire-material::icon :name="$icon" class="size-6 text-on-surface-variant" />
<x-livewire-material::icon :name="$icon" data-md-collapse-icon />
@endif
<span class="min-w-0 flex-1">{{ $heading ?? $title }}</span>
<span data-md-collapse-title>{{ $heading ?? $title }}</span>
<x-livewire-material::icon name="expand_more" class="size-6 text-on-surface-variant transition-[rotate] duration-(--md-sys-motion-spatial-fast-duration) ease-spatial-fast group-open/collapse:rotate-180" />
<x-livewire-material::icon name="expand_more" data-md-collapse-chevron />
</summary>
<div @class(['pb-4 type-body-md text-on-surface-variant', 'px-4' => $variant === 'filled', 'pt-1'])>
<div data-md-collapse-body>
{{ $slot }}
</div>
</details>