Andreas Reinhold / reiniandClaude Opus 5
79ca9a28b4
Plan step 38 review: the frame's structural rule that kept a section's own <h2> for screen readers (Tailwind's [&>section>h2]:sr-only before, a showcase.css rule during the rewrite) was removed as dead weight once every section had a real heading, so each page drew its title twice, the <h1> and an identical headline under it. The <h2>s are md-visually-hidden again, the frame's comment says why, and the section page test asserts it. The Layout section's description said "window size classes"; M3's term is breakpoints. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
22 lines
1.3 KiB
PHP
22 lines
1.3 KiB
PHP
<x-livewire-material::stack as="section" id="elevation" gap="space300">
|
|
<h2 class="md-visually-hidden">Elevation</h2>
|
|
|
|
<p class="md-type-body-md md-ink-variant">
|
|
Five shadow levels as <code>--md-sys-elevation-*</code>, for what floats over content.
|
|
</p>
|
|
|
|
<p class="md-type-body-md md-ink-variant" data-test="when-to-use">
|
|
Panels separate by tone first: the <code>surface-container</code> steps are a hierarchy of emphasis, not of height. Shadows are for what floats or lifts — 1 for elevated cards, buttons and modal sheets; 2 for menus, the navigation bar and a scrolled app bar; 3 for the FAB, dialogs, pickers and search; one level more on hover; nothing rests above 3. Fewer shadows carry more meaning.
|
|
</p>
|
|
|
|
<x-livewire-material::surface level="surface-container-low" padding="space300" corner="lg">
|
|
<x-livewire-material::grid :columns="['compact' => 2, 'medium' => 5]" gap="space300">
|
|
@foreach ([1, 2, 3, 4, 5] as $level)
|
|
<div data-md-showcase-elevation-tile data-md-elevation="{{ $level }}">
|
|
<code class="md-type-label-md">--md-sys-elevation-{{ $level }}</code>
|
|
</div>
|
|
@endforeach
|
|
</x-livewire-material::grid>
|
|
</x-livewire-material::surface>
|
|
</x-livewire-material::stack>
|