Add M3's uncontained multi-aspect-ratio carousel

Plan step 23, containment.md § Missing ("Carousel: the uncontained
multi-aspect-ratio layout"). `<x-carousel layout="multi-aspect">` is the
layout M3 added in November 2025: each `<x-carousel-item aspect="…">`
keeps its own ratio at the row's fixed height, held inside M3's 9:16 to
16:9 range (a square by default), with 16dp leading padding, 8dp gaps,
the extra-large corner and uncontained (default) scrolling.

The keyline machinery does not fit it: an Arrangement counts items of
one size each, and every snap position and mask follows from that size.
So the layout is a plain flex row, unmasked, and carousel.js only
measures each item's resting position off the DOM, which keeps the
previous/next buttons, the arrow keys, Home/End and bring-into-view
working. The header and SKILL.md say so.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/views/showcase/sections/carousel.blade.php

@@ -55,6 +55,24 @@
                 @endforeach
             </x-carousel>
             BLADE,
+        'Uncontained, multi-aspect ratio: every item keeps its own shape' => <<<'BLADE'
+            <x-carousel layout="multi-aspect" label="Clips" height="200">
+                @foreach ([
+                    ['16/9', 'pill', 'bg-primary-container text-on-primary-container'],
+                    ['1/1', 'cookie-12', 'bg-tertiary-container text-on-tertiary-container'],
+                    ['9/16', 'arch', 'bg-secondary-container text-on-secondary-container'],
+                    ['4/3', 'slanted', 'bg-surface-container-highest text-primary'],
+                    ['3/4', 'bun', 'bg-primary text-on-primary'],
+                    ['16/9', 'very-sunny', 'bg-secondary text-on-secondary'],
+                ] as [$aspect, $shape, $colours])
+                    <x-carousel-item :aspect="$aspect" :label="$aspect">
+                        <div class="grid size-full place-items-center {{ $colours }}">
+                            <x-shape :name="$shape" class="size-20" />
+                        </div>
+                    </x-carousel-item>
+                @endforeach
+            </x-carousel>
+            BLADE,
         'Full-screen: one item at a time, scrolled down' => <<<'BLADE'
             <x-carousel layout="full-screen" label="Wallpapers" height="320" :controls="true">
                 @foreach ([