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
@@ -347,6 +347,20 @@ An M3 side sheet, bound like `<x-modal>`; `close()` in scope. Props: `title`, `s

 An M3 bottom sheet, bound like `<x-modal>`: modal by default (scrim, inert page, drag the handle down or press Escape to close), `standard` for one that is part of the page. Props: `title`, `height` (`90dvh`), `actions` slot.

+### `<x-carousel>`, `<x-carousel-item>`
+
+```blade
+<x-carousel label="Recent uploads" item-width="220">
+    @foreach ($photos as $photo)
+        <x-carousel-item :label="$photo->title" wire:key="photo-{{ $photo->id }}">
+            <img src="{{ $photo->url }}" alt="{{ $photo->alt }}" />
+        </x-carousel-item>
+    @endforeach
+</x-carousel>
+```
+
+A row of items that change size between M3's keylines as it scrolls (native scroll snap; items are masked, content keeps its size). `<x-carousel>`: `layout` (`multi-browse` default, `hero`, `uncontained`, `full-screen`), `item-width` (px or any CSS length; the large size multi-browse aims for, the fixed size uncontained keeps, the cap for hero; 186 by default), `height` (205px), `padding` (px at the ends, 0), `centered` (hero), `label` (the region's name, "Carousel" by default), `controls` (previous/next buttons: default fine pointers only, `true` always, `false` never). `<x-carousel-item>`: slot is an `<img>` (fills and crops) or an element sized `size-full`; `label` overlays a line of text. A focusable `region` of `slide` groups named "n of m"; arrow keys move one item while the row has focus, Home/End to the ends. Works after a Livewire morph, in RTL and under reduced motion. Give items a `wire:key` in a loop.
+
 ## Testing the design

 ```php