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/components/carousel-item.blade.php

@@ -21,40 +21,67 @@
      extra-large corner (28px, CarouselDefaults' item shape) and moved by
      `--material-carousel-shift`, both written by resources/js/carousel.js. Without script the
      item shows unmasked, at its `item-width`. In a `full-screen` carousel it is none of that: the
-     item fills the row, edge to edge, with no corner and no mask. Only inside `<x-carousel>`. --}}
+     item fills the row, edge to edge, with no corner and no mask.
+
+     In a `multi-aspect` carousel the item is as wide as its own `aspect` makes it at the row's
+     height, and nothing masks it: M3's uncontained multi-aspect-ratio layout is for items whose
+     widths "vary… ranging from a 9:16 minimum to a 16:9 maximum aspect ratio", so `aspect` is
+     held inside that range (`16/9`, `16:9` or a plain number; a square by default, and ignored in
+     every other layout, where the keylines size the items)
+     (docs/reference/m3/components-actions-communication-containment.md § Carousel → Variants,
+     Specs). Only inside `<x-carousel>`. --}}
 
 @props([
     'label' => null,
+    'aspect' => null,
 ])
 
 {{-- The layout of the `<x-carousel>` around it: the full-screen one is a vertical row of
-     edge-to-edge items, which M3 gives no corner and no mask. --}}
+     edge-to-edge items, which M3 gives no corner and no mask, and the multi-aspect one sizes each
+     item by its own aspect ratio and masks none of them. --}}
 @aware([
     'layout' => 'multi-browse',
 ])
 
 @php
     $vertical = $layout === 'full-screen';
+    $multiAspect = $layout === 'multi-aspect';
+
+    // M3's 9:16 minimum and 16:9 maximum. `16/9`, `16:9` and `1.78` all say the same thing.
+    $ratio = null;
+
+    if ($multiAspect) {
+        $value = $aspect ?? 1;
+
+        if (is_string($value) && preg_match('/^\s*([\d.]+)\s*[\/:]\s*([\d.]+)\s*$/', $value, $parts) && (float) $parts[2] > 0) {
+            $value = (float) $parts[1] / (float) $parts[2];
+        }
+
+        $ratio = round(min(max((float) $value, 9 / 16), 16 / 9), 4);
+    }
 @endphp
 
 <div {{ $attributes
     ->class([
         'focus-ring relative h-full shrink-0 snap-start snap-always focus-visible:-outline-offset-3',
         'w-full' => $vertical,
-        'w-(--material-carousel-slot) max-w-full rounded-corner-xl' => ! $vertical,
+        'w-auto rounded-corner-xl' => $multiAspect,
+        'w-(--material-carousel-slot) max-w-full rounded-corner-xl' => ! $vertical && ! $multiAspect,
     ])
-    ->merge([
+    ->merge(array_filter([
         'role' => 'group',
         'aria-roledescription' => __('slide'),
         'aria-label' => '[material-carousel-position]',
         'data-material-carousel-item' => true,
         'tabindex' => '0',
-    ]) }}>
+        'style' => $ratio === null ? null : "aspect-ratio: {$ratio}",
+    ], fn ($value): bool => $value !== null)) }}>
     <div
         data-material-carousel-surface
         @class([
             'relative size-full overflow-hidden bg-surface-container-highest text-on-surface',
-            'rounded-corner-xl translate-x-(--material-carousel-shift) [clip-path:inset(0_var(--material-carousel-inset,0px)_round_var(--md-sys-shape-corner-xl))]' => ! $vertical,
+            'rounded-corner-xl' => $multiAspect,
+            'rounded-corner-xl translate-x-(--material-carousel-shift) [clip-path:inset(0_var(--material-carousel-inset,0px)_round_var(--md-sys-shape-corner-xl))]' => ! $vertical && ! $multiAspect,
         ])
     >
         <div data-material-carousel-content class="size-full [&>img]:size-full [&>img]:object-cover">