diff --git a/resources/css/showcase.css b/resources/css/showcase.css
index 6342ee32..0dcfd750 100644
--- a/resources/css/showcase.css
+++ b/resources/css/showcase.css
@@ -467,6 +467,15 @@
             align-items: stretch;
         }
     }
+
+    /* Carousel: an item's own colour is the caller's inline `style` (its role pair is chosen per
+       item), the same mechanism as the colour swatch above; this only sizes and centres it. */
+    [data-md-showcase-carousel-swatch] {
+        display: grid;
+        place-items: center;
+        width: 100%;
+        height: 100%;
+    }
 }
 
 /* A handful of call sites (<x-input>, <x-datepicker>, <x-slider>) forward only `class` and
diff --git a/resources/views/showcase/sections/carousel.blade.php b/resources/views/showcase/sections/carousel.blade.php
index 8cb37b30..a0167dcc 100644
--- a/resources/views/showcase/sections/carousel.blade.php
+++ b/resources/views/showcase/sections/carousel.blade.php
@@ -3,18 +3,18 @@
         'Multi-browse' => <<<'BLADE'
             <x-carousel label="Shapes" item-width="220">
                 @foreach ([
-                    ['Cookie', 'cookie-9', 'bg-primary-container text-on-primary-container'],
-                    ['Clover', 'clover-4', 'bg-tertiary-container text-on-tertiary-container'],
-                    ['Burst', 'soft-burst', 'bg-secondary-container text-on-secondary-container'],
-                    ['Flower', 'flower', 'bg-primary text-on-primary'],
-                    ['Gem', 'gem', 'bg-surface-container-highest text-primary'],
-                    ['Puffy', 'puffy', 'bg-tertiary text-on-tertiary'],
-                    ['Sunny', 'sunny', 'bg-secondary text-on-secondary'],
-                    ['Heart', 'heart', 'bg-inverse-surface text-inverse-primary'],
+                    ['Cookie', 'cookie-9', 'background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);'],
+                    ['Clover', 'clover-4', 'background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);'],
+                    ['Burst', 'soft-burst', 'background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);'],
+                    ['Flower', 'flower', 'background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);'],
+                    ['Gem', 'gem', 'background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-primary);'],
+                    ['Puffy', 'puffy', 'background-color: var(--md-sys-color-tertiary); color: var(--md-sys-color-on-tertiary);'],
+                    ['Sunny', 'sunny', 'background-color: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary);'],
+                    ['Heart', 'heart', 'background-color: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-primary);'],
                 ] as [$name, $shape, $colours])
                     <x-carousel-item :label="$name">
-                        <div class="grid size-full place-items-center {{ $colours }}">
-                            <x-shape :name="$shape" class="size-36" />
+                        <div data-md-showcase-carousel-swatch style="{{ $colours }}">
+                            <x-shape :name="$shape" size="144" />
                         </div>
                     </x-carousel-item>
                 @endforeach
@@ -23,15 +23,15 @@
         'Hero, centred' => <<<'BLADE'
             <x-carousel layout="hero" centered label="Featured" height="280">
                 @foreach ([
-                    ['Arch', 'arch', 'bg-secondary-container text-on-secondary-container'],
-                    ['Pentagon', 'pentagon', 'bg-primary-container text-on-primary-container'],
-                    ['Boom', 'soft-boom', 'bg-tertiary-container text-on-tertiary-container'],
-                    ['Bun', 'bun', 'bg-surface-container-highest text-secondary'],
-                    ['Ghost', 'ghostish', 'bg-primary text-on-primary'],
+                    ['Arch', 'arch', 'background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);'],
+                    ['Pentagon', 'pentagon', 'background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);'],
+                    ['Boom', 'soft-boom', 'background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);'],
+                    ['Bun', 'bun', 'background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-secondary);'],
+                    ['Ghost', 'ghostish', 'background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);'],
                 ] as [$name, $shape, $colours])
                     <x-carousel-item :label="$name">
-                        <div class="grid size-full place-items-center {{ $colours }}">
-                            <x-shape :name="$shape" class="size-48" />
+                        <div data-md-showcase-carousel-swatch style="{{ $colours }}">
+                            <x-shape :name="$shape" size="192" />
                         </div>
                     </x-carousel-item>
                 @endforeach
@@ -40,16 +40,16 @@
         'Uncontained' => <<<'BLADE'
             <x-carousel layout="uncontained" label="Albums" item-width="180" height="180">
                 @foreach ([
-                    ['cookie-6', 'bg-tertiary-container text-on-tertiary-container'],
-                    ['diamond', 'bg-primary-container text-on-primary-container'],
-                    ['clover-8', 'bg-secondary-container text-on-secondary-container'],
-                    ['pixel-circle', 'bg-surface-container-highest text-tertiary'],
-                    ['burst', 'bg-secondary text-on-secondary'],
-                    ['oval', 'bg-primary text-on-primary'],
+                    ['cookie-6', 'background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);'],
+                    ['diamond', 'background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);'],
+                    ['clover-8', 'background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);'],
+                    ['pixel-circle', 'background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-tertiary);'],
+                    ['burst', 'background-color: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary);'],
+                    ['oval', 'background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);'],
                 ] as [$shape, $colours])
                     <x-carousel-item>
-                        <div class="grid size-full place-items-center {{ $colours }}">
-                            <x-shape :name="$shape" class="size-24" />
+                        <div data-md-showcase-carousel-swatch style="{{ $colours }}">
+                            <x-shape :name="$shape" size="96" />
                         </div>
                     </x-carousel-item>
                 @endforeach
@@ -58,16 +58,16 @@
         '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'],
+                    ['16/9', 'pill', 'background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);'],
+                    ['1/1', 'cookie-12', 'background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);'],
+                    ['9/16', 'arch', 'background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);'],
+                    ['4/3', 'slanted', 'background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-primary);'],
+                    ['3/4', 'bun', 'background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);'],
+                    ['16/9', 'very-sunny', 'background-color: var(--md-sys-color-secondary); color: var(--md-sys-color-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 data-md-showcase-carousel-swatch style="{{ $colours }}">
+                            <x-shape :name="$shape" size="80" />
                         </div>
                     </x-carousel-item>
                 @endforeach
@@ -76,13 +76,13 @@
         'Full-screen: one item at a time, scrolled down' => <<<'BLADE'
             <x-carousel layout="full-screen" label="Wallpapers" height="320" :controls="true">
                 @foreach ([
-                    ['Morning', 'very-sunny', 'bg-linear-to-br from-primary-container to-tertiary-container text-on-primary-container'],
-                    ['Noon', 'clam-shell', 'bg-linear-to-br from-secondary-container to-primary-container text-on-secondary-container'],
-                    ['Night', 'puffy-diamond', 'bg-linear-to-br from-inverse-surface to-primary text-inverse-primary'],
+                    ['Morning', 'very-sunny', 'background: linear-gradient(to bottom right, var(--md-sys-color-primary-container), var(--md-sys-color-tertiary-container)); color: var(--md-sys-color-on-primary-container);'],
+                    ['Noon', 'clam-shell', 'background: linear-gradient(to bottom right, var(--md-sys-color-secondary-container), var(--md-sys-color-primary-container)); color: var(--md-sys-color-on-secondary-container);'],
+                    ['Night', 'puffy-diamond', 'background: linear-gradient(to bottom right, var(--md-sys-color-inverse-surface), var(--md-sys-color-primary)); color: var(--md-sys-color-inverse-primary);'],
                 ] as [$name, $shape, $colours])
                     <x-carousel-item :label="$name">
-                        <div class="grid size-full place-items-center {{ $colours }}">
-                            <x-shape :name="$shape" class="size-40" />
+                        <div data-md-showcase-carousel-swatch style="{{ $colours }}">
+                            <x-shape :name="$shape" size="160" />
                         </div>
                     </x-carousel-item>
                 @endforeach
@@ -91,10 +91,10 @@
     ];
 @endphp
 
-<section id="carousel" class="scroll-mt-24 space-y-6">
-    <h2 class="type-headline-md">Carousel</h2>
+<x-livewire-material::stack as="section" id="carousel" gap="space300">
+    <h2 class="md-type-headline-md">Carousel</h2>
 
-    <p class="max-w-3xl type-body-md text-on-surface-variant">
+    <p class="md-type-body-md md-ink-variant">
         <code>&lt;x-carousel&gt;</code> and <code>&lt;x-carousel-item&gt;</code>: items that change size between M3's keylines as they scroll.
         Swipe, scroll with Shift and the wheel, or tab to an item and use the arrow keys.
     </p>
@@ -102,4 +102,4 @@
     @foreach ($examples as $title => $code)
         <x-showcase::example :$title :$code stack />
     @endforeach
-</section>
+</x-livewire-material::stack>