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/js/carousel.js

@@ -864,6 +864,7 @@ document.addEventListener('alpine:init', () => {
                 const space = scroller.clientWidth
                 const itemSpacing = parseFloat(getComputedStyle(scroller).columnGap) || 0
                 const padding = Number(root.dataset.padding) || 0
+                const paddingEnd = Number(root.dataset.paddingEnd) || 0
                 const probe = this.$refs.probe
                 const preferred = probe ? probe.getBoundingClientRect().width : null
 
@@ -885,7 +886,7 @@ document.addEventListener('alpine:init', () => {
                     'full-screen': () => fullScreenKeylineList(space, itemSpacing),
                 }[root.dataset.materialCarousel] ?? (() => multiBrowseKeylineList(space, preferred ?? 0, itemSpacing, count))
 
-                const strategy = count === 0 ? createStrategy(EMPTY, space, itemSpacing, 0, 0) : createStrategy(keylines(), space, itemSpacing, padding, padding)
+                const strategy = count === 0 ? createStrategy(EMPTY, space, itemSpacing, 0, 0) : createStrategy(keylines(), space, itemSpacing, padding, paddingEnd)
 
                 state.strategy = strategy