@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-type-headline-md">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>&lt;x-shape name="…" /&gt;</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>