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

Rewrite the showcase frame without Tailwind

Browse Source 
Plan step 38 (first batch): layout.blade.php, index.blade.php,
section.blade.php, shell.blade.php and the example component now
lay out through the layout components (pane, stack, row, grid,
surface) and their props, text through the md-* classes, and
everything else through showcase.css's data-md-showcase-* hooks — no
Tailwind utility remains in any of them. The head links the new
stylesheet route after @vite(...), not before: that entry opens the
document's first @layer statement, and linking the showcase's own
bundle ahead of it re-anchors the material layer before Tailwind's
own and lets its preflight's `padding: 0` beat the search view's
padding-top (found by a failing browser test). @vite(...) stays, its
Tailwind CSS entry included, only for the section views (still
Tailwind until the next batches) and the JS runtime; the config
comment says so.

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-15 03:55:25 +02:00
co-authored by Claude Sonnet 5
parent 62b09c45b5
commit 9c8b39600b
6 changed files with 167 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/showcase/index.blade.php
+32 -30
View File
@@ -1,36 +1,38 @@
@extends('livewire-material::showcase.layout')
@section('content')
<div class="mx-auto w-full max-w-6xl space-y-12 pt-4 pb-16">
<div class="max-w-3xl space-y-3">
<h1 class="type-headline-lg">Livewire Material</h1>
<p class="type-title-lg">Material 3 Expressive for Laravel and Livewire.</p>
<p class="type-body-lg text-on-surface-variant">
Every token and component, rendered in this application's own scheme and theme. Pick a section in the
navigation, search for one above (or press <kbd class="rounded-corner-xs bg-surface-container-highest px-1.5 type-label-md">/</kbd>), or start below.
</p>
</div>
<x-livewire-material::pane width="wide" data-md-showcase-page>
<x-livewire-material::stack gap="space600">
<x-livewire-material::stack gap="space150">
<h1 class="md-type-headline-lg">Livewire Material</h1>
<p class="md-type-title-lg">Material 3 Expressive for Laravel and Livewire.</p>
<p class="md-type-body-lg md-ink-variant">
Every token and component, rendered in this application's own scheme and theme. Pick a section in the
navigation, search for one above (or press <kbd class="md-type-label-md" data-md-showcase-kbd>/</kbd>), or start below.
</p>
</x-livewire-material::stack>
@foreach (collect($sections)->groupBy('group', preserveKeys: true) as $group => $entries)
<section class="space-y-4" aria-labelledby="group-{{ \Illuminate\Support\Str::slug($group) }}">
<h2 id="group-{{ \Illuminate\Support\Str::slug($group) }}" class="type-title-lg">{{ $group }}</h2>
@foreach (collect($sections)->groupBy('group', preserveKeys: true) as $group => $entries)
<x-livewire-material::stack as="section" gap="space200" :aria-labelledby="'group-'.\Illuminate\Support\Str::slug($group)">
<h2 id="group-{{ \Illuminate\Support\Str::slug($group) }}" class="md-type-title-lg">{{ $group }}</h2>
<div class="grid grid-cols-1 gap-3 medium:grid-cols-2 expanded:grid-cols-3">
@foreach ($entries as $key => $entry)
<x-livewire-material::card variant="outlined" data-md-list-row wire:key="section-{{ $key }}">
<div class="flex items-start gap-4">
<span class="grid size-12 shrink-0 place-items-center rounded-corner-lg bg-secondary-container text-on-secondary-container">
<x-livewire-material::icon :name="$entry['icon']" />
</span>
<div class="min-w-0">
<a href="{{ route('livewire-material.section', $key) }}" wire:navigate data-md-list-open class="type-title-md">{{ $entry['title'] }}</a>
<p class="mt-1 type-body-md text-on-surface-variant">{{ $entry['description'] }}</p>
</div>
</div>
</x-livewire-material::card>
@endforeach
</div>
</section>
@endforeach
</div>
<x-livewire-material::grid :columns="['compact' => 1, 'medium' => 2, 'expanded' => 3]" gap="space200">
@foreach ($entries as $key => $entry)
<x-livewire-material::card variant="outlined" data-md-list-row wire:key="section-{{ $key }}">
<x-livewire-material::row gap="space200" align="start">
<span data-md-showcase-section-icon>
<x-livewire-material::icon :name="$entry['icon']" />
</span>
<x-livewire-material::stack gap="space50">
<a href="{{ route('livewire-material.section', $key) }}" wire:navigate data-md-list-open class="md-type-title-md">{{ $entry['title'] }}</a>
<p class="md-type-body-md md-ink-variant">{{ $entry['description'] }}</p>
</x-livewire-material::stack>
</x-livewire-material::row>
</x-livewire-material::card>
@endforeach
</x-livewire-material::grid>
</x-livewire-material::stack>
@endforeach
</x-livewire-material::stack>
</x-livewire-material::pane>
@endsection