Rewrite the carousel without Tailwind

Plan step 36 (containment group): <x-carousel>'s and <x-carousel-item>'s
class lists move into resources/css/components/carousel.css and
carousel-item.css, keyed on data-md-carousel (its value is the layout)
and the parts' data-md-carousel-* hooks (-probe, -scroller, -controls
with "auto"/"always", -previous/-next, -item, -surface, -content,
-label/-label-text). Every selector uses a `>` combinator rather than a
bare descendant one, because a carousel item can itself hold a nested
carousel whose own root would otherwise match its parent's layout
rules too (list.css already solves the same problem for segmented
list rows).

Behaviour is unchanged: resources/js/carousel.js (the keyline maths,
C-05's reduced-motion fix, C-11's vertical full-screen layout, C-12's
padding, C-18's item-as-tab-stop, the multi-aspect layout) is touched
only where it reads or writes the renamed hooks and dataset
properties; every inline custom property it writes
(--material-carousel-*) is untouched. The item renders the shared
md-focus-ring class (foundation/interaction.css) instead of a
hand-rolled ring, refined to an inset offset since an outward one
would draw under the neighbouring item. The previous/next buttons
mirror whole in RTL from carousel.css rather than through
<x-icon mirror-rtl>, which <x-button icon> has no prop to reach (a
component outside this batch); the technique matches how the
Tailwind-era markup already mirrored the whole button. The overlay
label's literal white ink over the scrim (C-25) is kept, with the
same reasoning as before.

Hooks renamed data-material-carousel(-item/-surface/-content/-label)
-> data-md-carousel(-item/-surface/-content/-label), data-padding(-end)
-> data-md-padding(-end), data-centered -> data-md-centered, updated in
the same commit: resources/js/carousel.js, tests/Feature/Components/
CarouselTest.php (rewritten on data-md-* and ComponentStylesheet) and
tests/Browser/CarouselTest.php. Browser tests owed by
docs/plans/material-3-browser-tests.md, added but not run: the
multi-aspect carousel's previous/next, arrow keys, Home and End
(scoped by data-md-carousel="multi-aspect" rather than a position in
the showcase, so reordering its examples cannot silently mis-target
the wrong carousel); a reduced-motion click on an item cut off only by
the row's own edge, which documents rather than fixes a real gap —
isMasked()'s inset check is always false once C-05 zeroes every
item's inset, so the click-to-reveal affordance does not fire there
(found by the Chromium baseline, step 32; fixing it is outside a hook
rename).

Imported from the Containment block of components.css.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/js/carousel.js

@@ -81,7 +81,7 @@ const TARGET_MS = 700
 // How long the row must go without a scroll event to count as having come to rest.
 const SETTLE_MS = 150
 
-const ITEM = '[data-material-carousel-item]'
+const ITEM = '[data-md-carousel-item]'
 const INTERACTIVE = 'a[href], button, input, select, textarea, summary, [contenteditable], [tabindex]:not([tabindex="-1"])'
 
 const clamp = (value, min, max) => Math.min(Math.max(value, min), max)
@@ -870,14 +870,14 @@ document.addEventListener('alpine:init', () => {
                 const style = getComputedStyle(scroller)
 
                 state.rtl = style.direction === 'rtl'
-                state.vertical = root.dataset.materialCarousel === 'full-screen'
-                state.measured = root.dataset.materialCarousel === 'multi-aspect'
+                state.vertical = root.dataset.mdCarousel === 'full-screen'
+                state.measured = root.dataset.mdCarousel === 'multi-aspect'
                 state.items = [...scroller.children]
                     .filter((element) => element.matches(ITEM))
                     .map((element) => ({
                         element,
-                        surface: element.querySelector('[data-material-carousel-surface]'),
-                        label: element.querySelector('[data-material-carousel-label]'),
+                        surface: element.querySelector('[data-md-carousel-surface]'),
+                        label: element.querySelector('[data-md-carousel-label]'),
                         labelWidth: 0,
                         written: '',
                     }))
@@ -922,16 +922,16 @@ document.addEventListener('alpine:init', () => {
 
                 const space = scroller.clientWidth
                 const itemSpacing = parseFloat(style.columnGap) || 0
-                const padding = Number(root.dataset.padding) || 0
-                const paddingEnd = Number(root.dataset.paddingEnd) || 0
+                const padding = Number(root.dataset.mdPadding) || 0
+                const paddingEnd = Number(root.dataset.mdPaddingEnd) || 0
                 const probe = this.$refs.probe
                 const preferred = probe ? probe.getBoundingClientRect().width : null
 
                 const count = state.items.length
                 const keylines = {
-                    hero: () => heroKeylineList(space, preferred, itemSpacing, count, root.dataset.centered !== undefined),
+                    hero: () => heroKeylineList(space, preferred, itemSpacing, count, root.dataset.mdCentered !== undefined),
                     uncontained: () => uncontainedKeylineList(space, preferred ?? 0, itemSpacing),
-                }[root.dataset.materialCarousel] ?? (() => multiBrowseKeylineList(space, preferred ?? 0, itemSpacing, count))
+                }[root.dataset.mdCarousel] ?? (() => multiBrowseKeylineList(space, preferred ?? 0, itemSpacing, count))
 
                 const strategy = count === 0 ? createStrategy(EMPTY, space, itemSpacing, 0, 0) : createStrategy(keylines(), space, itemSpacing, padding, paddingEnd)