Add the M3 Expressive carousel

Multi-browse, hero, uncontained and full-screen layouts on a native scroll-snap row, with Compose's keyline maths masking each item as it scrolls. Completes Phase 5. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
2026-09-13 07:40:30 +02:00
parent fef20a9178
commit ad724662ca
12 changed files with 1792 additions and 1 deletions
@@ -0,0 +1,87 @@
+@php
+    $examples = [
+        'Multi-browse' => <<<'BLADE'
+            <x-carousel label="Shapes" item-width="220">
+                @foreach ([
+                    ['Cookie', 'cookie-9', 'bg-primary-container text-on-primary-container'],
+                    ['Clover', 'clover-4', 'bg-tertiary-container text-on-tertiary-container'],
+                    ['Burst', 'soft-burst', 'bg-secondary-container text-on-secondary-container'],
+                    ['Flower', 'flower', 'bg-primary text-on-primary'],
+                    ['Gem', 'gem', 'bg-surface-container-highest text-primary'],
+                    ['Puffy', 'puffy', 'bg-tertiary text-on-tertiary'],
+                    ['Sunny', 'sunny', 'bg-secondary text-on-secondary'],
+                    ['Heart', 'heart', 'bg-inverse-surface text-inverse-primary'],
+                ] as [$name, $shape, $colours])
+                    <x-carousel-item :label="$name">
+                        <div class="grid size-full place-items-center {{ $colours }}">
+                            <x-shape :name="$shape" class="size-36" />
+                        </div>
+                    </x-carousel-item>
+                @endforeach
+            </x-carousel>
+            BLADE,
+        'Hero, centred' => <<<'BLADE'
+            <x-carousel layout="hero" centered label="Featured" height="280">
+                @foreach ([
+                    ['Arch', 'arch', 'bg-secondary-container text-on-secondary-container'],
+                    ['Pentagon', 'pentagon', 'bg-primary-container text-on-primary-container'],
+                    ['Boom', 'soft-boom', 'bg-tertiary-container text-on-tertiary-container'],
+                    ['Bun', 'bun', 'bg-surface-container-highest text-secondary'],
+                    ['Ghost', 'ghostish', 'bg-primary text-on-primary'],
+                ] as [$name, $shape, $colours])
+                    <x-carousel-item :label="$name">
+                        <div class="grid size-full place-items-center {{ $colours }}">
+                            <x-shape :name="$shape" class="size-48" />
+                        </div>
+                    </x-carousel-item>
+                @endforeach
+            </x-carousel>
+            BLADE,
+        'Uncontained' => <<<'BLADE'
+            <x-carousel layout="uncontained" label="Albums" item-width="180" height="180">
+                @foreach ([
+                    ['cookie-6', 'bg-tertiary-container text-on-tertiary-container'],
+                    ['diamond', 'bg-primary-container text-on-primary-container'],
+                    ['clover-8', 'bg-secondary-container text-on-secondary-container'],
+                    ['pixel-circle', 'bg-surface-container-highest text-tertiary'],
+                    ['burst', 'bg-secondary text-on-secondary'],
+                    ['oval', 'bg-primary text-on-primary'],
+                ] as [$shape, $colours])
+                    <x-carousel-item>
+                        <div class="grid size-full place-items-center {{ $colours }}">
+                            <x-shape :name="$shape" class="size-24" />
+                        </div>
+                    </x-carousel-item>
+                @endforeach
+            </x-carousel>
+            BLADE,
+        'Full-screen' => <<<'BLADE'
+            <x-carousel layout="full-screen" label="Wallpapers" height="240" :controls="true">
+                @foreach ([
+                    ['Morning', 'very-sunny', 'bg-linear-to-br from-primary-container to-tertiary-container text-on-primary-container'],
+                    ['Noon', 'clam-shell', 'bg-linear-to-br from-secondary-container to-primary-container text-on-secondary-container'],
+                    ['Night', 'puffy-diamond', 'bg-linear-to-br from-inverse-surface to-primary text-inverse-primary'],
+                ] as [$name, $shape, $colours])
+                    <x-carousel-item :label="$name">
+                        <div class="grid size-full place-items-center {{ $colours }}">
+                            <x-shape :name="$shape" class="size-40" />
+                        </div>
+                    </x-carousel-item>
+                @endforeach
+            </x-carousel>
+            BLADE,
+    ];
+@endphp
+
+<section id="carousel" class="scroll-mt-24 space-y-6">
+    <h2 class="type-headline-md">Carousel</h2>
+
+    <p class="max-w-3xl type-body-md text-on-surface-variant">
+        <code>&lt;x-carousel&gt;</code> and <code>&lt;x-carousel-item&gt;</code>: items that change size between M3's keylines as they scroll.
+        Swipe, scroll with Shift and the wheel, or focus a row and use the arrow keys.
+    </p>
+
+    @foreach ($examples as $title => $code)
+        <x-showcase::example :$title :$code stack />
+    @endforeach
+</section>