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

Put the showcase in the app shell, with a page per section
tests / lint (push) Has been cancelled
Details
tests / feature (8.4) (push) Has been cancelled
Details
tests / feature (8.5) (push) Has been cancelled
Details
tests / browser (chrome, chromium) (push) Has been cancelled
Details
tests / browser (firefox, firefox) (push) Has been cancelled
Details
tests / browser (safari, webkit) (push) Has been cancelled
Details

Browse Source 
The showcase is now an overview and one page per section behind a
grouped navigation rail, moved between with wire:navigate, instead of
one long page under a scrolling top bar. The switch exposed a WebKit
bug in the menu: inside a focusable region, WebKit moves focus out of
the closing popover before its toggle event, so Escape no longer
returned focus to the trigger. The menu now reads it on beforetoggle.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
This commit is contained in:
Andreas Reinhold / reini
2026-09-13 09:30:26 +02:00
co-authored by Claude Opus 5
parent 23218431bf
commit 889f8a8aa1
20 changed files with 251 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/showcase/index.blade.php
+30 -26
View File
@@ -1,31 +1,35 @@
@extends('livewire-material::showcase.layout')
@section('content')
<main class="mx-auto max-w-6xl space-y-16 px-4 py-10">
<p class="max-w-3xl type-body-lg text-on-surface-variant">
Every token and component, in this application's own scheme.
</p>
<div class="mx-auto w-full max-w-6xl space-y-12 px-4 pt-2 pb-16 sm:px-6">
<div class="max-w-3xl space-y-3">
<p class="type-headline-sm">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, or start below.
</p>
</div>
@include('livewire-material::showcase.sections.colour')
@include('livewire-material::showcase.sections.type')
@include('livewire-material::showcase.sections.shape')
@include('livewire-material::showcase.sections.elevation')
@include('livewire-material::showcase.sections.motion')
@include('livewire-material::showcase.sections.icons')
@include('livewire-material::showcase.sections.buttons')
@include('livewire-material::showcase.sections.menus')
@include('livewire-material::showcase.sections.communication')
@include('livewire-material::showcase.sections.progress')
@include('livewire-material::showcase.sections.containment')
@include('livewire-material::showcase.sections.carousel')
@include('livewire-material::showcase.sections.fields')
@include('livewire-material::showcase.sections.chips')
@include('livewire-material::showcase.sections.sliders')
@include('livewire-material::showcase.sections.pickers')
@include('livewire-material::showcase.sections.timepickers')
@include('livewire-material::showcase.sections.bars')
@include('livewire-material::showcase.sections.navigation')
@include('livewire-material::showcase.sections.data')
@include('livewire-material::showcase.sections.pages')
</main>
@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>
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
@foreach ($entries as $key => $entry)
<x-livewire-material::card variant="outlined" data-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-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>
@endsection