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
34 lines
2.2 KiB
PHP
34 lines
2.2 KiB
PHP
@php
|
|
$corners = ['none', 'xs', 'sm', 'md', 'lg', 'lg-increased', 'xl', 'xl-increased', 'xxl', 'full'];
|
|
@endphp
|
|
|
|
<x-livewire-material::stack as="section" id="shape" gap="space300">
|
|
<h2 class="md-visually-hidden">Shape</h2>
|
|
|
|
<p class="md-type-body-md md-ink-variant">
|
|
The corner scale as a <code>--md-sys-shape-corner-*</code> token, and M3 Expressive's shapes as <code><x-shape name="…" /></code>.
|
|
</p>
|
|
|
|
<p class="md-type-body-md md-ink-variant" data-test="when-to-use">
|
|
When to use which: <code>full</code> for buttons, icon buttons, chips' avatars, badges, switches, sliders, the search bar and navigation indicators; <code>xs</code> for text fields, menus, snackbars and plain tooltips; <code>sm</code> for chips; <code>md</code> for cards and rich tooltips; <code>lg</code> for the FAB and a side sheet's inner corners; <code>xl</code> for dialogs, bottom sheets, pickers and carousel items; <code>xxl</code> for hero containers. A nested corner is the outer radius minus the padding. A press squares a round shape; nothing morphs on hover. The shapes below are decoration, never meaning.
|
|
</p>
|
|
|
|
<x-livewire-material::grid :columns="['compact' => 2, 'medium' => 5]" gap="space200">
|
|
@foreach ($corners as $corner)
|
|
<x-livewire-material::stack gap="space100">
|
|
<span data-md-showcase-shape-swatch data-md-corner="{{ $corner }}"></span>
|
|
<code class="md-type-label-md md-ink-variant">{{ $corner }}</code>
|
|
</x-livewire-material::stack>
|
|
@endforeach
|
|
</x-livewire-material::grid>
|
|
|
|
<x-livewire-material::grid :columns="['compact' => 3, 'medium' => 5, 'expanded' => 7]" gap="space200">
|
|
@foreach (\NoNameWeb\LivewireMaterial\Support\SvgFile::shapeNames() as $shape)
|
|
<x-livewire-material::stack gap="space100" align="center">
|
|
<x-livewire-material::shape :name="$shape" :size="80" style="color: var(--md-sys-color-secondary-container)" />
|
|
<code class="md-type-label-md md-ink-variant md-text-center">{{ $shape }}</code>
|
|
</x-livewire-material::stack>
|
|
@endforeach
|
|
</x-livewire-material::grid>
|
|
</x-livewire-material::stack>
|