Andreas Reinhold / reiniandClaude Sonnet 5
f04e31b3aa
Plan step 36 (containment group): <x-card>'s class lists move into resources/css/components/card.css, keyed on data-md-card (per variant), data-md-card-figure/-body/-header/-heading/-title/-subtitle/-menu/ -content/-actions. A row (data-md-list-row) renders the shared md-state-layer and md-focus-ring classes for its tint and ring (foundation/interaction.css) instead of copying their rules; card.css adds only the per-state elevation the shared class has no opinion on (ElevatedCardTokens.kt/FilledCardTokens.kt/OutlinedCardTokens.kt), the press/hover exclusion for a card's own nested buttons, and the ring for a non-actionable row whose focus lands on its opener rather than the card. data-md-dragged is read automatically by the shared class's own 16% tint; card.css only adds its elevation levels 3/4. Hooks renamed data-list-row -> data-md-list-row, data-list-open -> data-md-list-open, data-list-actionable -> data-md-list-actionable, data-dragged -> data-md-dragged, updated in the same commit: resources/js/search.js and list-rows.js's consumers, table.css's comment, the showcase (index, data and containment sections), tests/Browser/ContainmentTest.php, and the development skill's card and table examples. Imported from the Containment block of components.css. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
37 lines
2.2 KiB
PHP
37 lines
2.2 KiB
PHP
@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>
|
|
|
|
@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 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>
|
|
@endsection
|