Give the carousel M3's end padding and a role for its label

Plan step 19, containment.md C-12 and C-25. `padding` defaulted to 0
where M3's specs table gives every layout 16dp of leading and trailing
padding — leading only for `uncontained`, none for the edge-to-edge
`full-screen` — so the default is 16 and each layout now says which
ends it applies to (`data-padding`, `data-padding-end`). The row gains
the 8dp above and below that goes with it, without shortening the
items. The overlay label is `inverse-on-surface` instead of a literal
`white`, which no scheme or contrast profile follows.

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

@@ -7,7 +7,9 @@
 
      `label` lays a short line of text over the bottom of the art, on a scrim, pinned to the
      item's visible edge and fading out as the item narrows — Compose's carousel sample, which
-     fades its label chip in once the mask is wide enough to hold it.
+     fades its label chip in once the mask is wide enough to hold it. The scrim is what M3 asks
+     for under text on an image; the text itself is `inverse-on-surface`, a role a scheme and a
+     contrast profile follow, rather than a literal white.
 
      A `group` with `aria-roledescription="slide"`, named "n of m" by the carousel around it
      (WAI-ARIA's carousel pattern). The item is laid out at the carousel's large size and masked:
@@ -43,7 +45,7 @@
                 data-material-carousel-label
                 class="pointer-events-none absolute inset-x-0 bottom-0 flex bg-linear-to-t from-scrim/60 to-transparent px-4 pt-10 pb-4 opacity-(--material-carousel-label)"
             >
-                <span class="truncate type-title-md text-white translate-x-(--material-carousel-label-shift)">{{ $label }}</span>
+                <span class="truncate type-title-md text-inverse-on-surface translate-x-(--material-carousel-label-shift)">{{ $label }}</span>
             </div>
         @endif
     </div>

resources/views/components/carousel.blade.php

@@ -22,9 +22,11 @@
      - `full-screen`: one item the width of the carousel at a time
        (FullScreenCarouselStrategy).
      `item-width` takes pixels or any CSS length. `height` is the items' height (205px, Compose's
-     sample). `padding` is Compose's `contentPadding` in pixels (0): the first and last items
-     rest that far in from the edges while items in between scroll to them. Items are 8px apart
-     with M3's extra-large corner.
+     sample). `padding` is Compose's `contentPadding` in pixels: the first and last items rest
+     that far in from the edges while items in between scroll to them. M3's specs table gives
+     every layout 16dp of it — `uncontained` at the leading edge only, `full-screen` none — so
+     that is the default, with the 8dp above and below the row that goes with it. Items are 8px
+     apart with M3's extra-large corner.
 
      The row is a native scroll container with CSS scroll snap, one item per swipe, as Compose's
      single-advance fling; touch, trackpad and Shift with the wheel scroll it. resources/js/
@@ -54,7 +56,7 @@
     'layout' => 'multi-browse',
     'itemWidth' => null,
     'height' => null,
-    'padding' => 0,
+    'padding' => 16,
     'centered' => false,
     'label' => null,
     'controls' => null,
@@ -99,12 +101,19 @@
         $slides,
     );
 
+    // The specs table's leading and trailing padding: 16dp for multi-browse and hero, leading
+    // only for uncontained, none for full-screen, which is edge to edge.
+    $padding = max(0, (float) $padding);
+    $paddingStart = $layout === 'full-screen' ? 0.0 : $padding;
+    $paddingEnd = in_array($layout, ['uncontained', 'full-screen'], true) ? 0.0 : $padding;
+
     $attributes = $attributes
         ->class('relative')
         ->merge(array_filter([
             'data-material-carousel' => $layout,
             'data-centered' => $layout === 'hero' && $centered ? true : null,
-            'data-padding' => (string) max(0, (float) $padding),
+            'data-padding' => (string) $paddingStart,
+            'data-padding-end' => (string) $paddingEnd,
             'style' => implode('; ', array_filter([
                 $preferredWidth ? "--material-carousel-item-width: {$preferredWidth}" : null,
                 "--material-carousel-slot: {$slotWidth}",
@@ -127,8 +136,10 @@
         aria-label="{{ $label }}"
         tabindex="0"
         @class([
-            'focus-ring flex h-(--material-carousel-height) gap-2 overflow-x-auto overflow-y-hidden overscroll-x-contain',
+            'focus-ring flex gap-2 overflow-x-auto overflow-y-hidden overscroll-x-contain',
             '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+            'h-(--material-carousel-height)' => $layout === 'full-screen',
+            'h-[calc(var(--material-carousel-height)+1rem)] py-2' => $layout !== 'full-screen',
             'snap-x snap-mandatory' => $layout !== 'uncontained',
         ])
     >