diff --git a/tests/Feature/Components/ContainmentStylesheetsTest.php b/tests/Feature/Components/ContainmentStylesheetsTest.php
new file mode 100644
index 00000000..f3621925
--- /dev/null
+++ b/tests/Feature/Components/ContainmentStylesheetsTest.php
@@ -0,0 +1,108 @@
+<?php
+
+use Illuminate\Support\Facades\File;
+use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
+use NoNameWeb\LivewireMaterial\Tests\Support\ViewClasses;
+
+/**
+ * The containment components, rewritten without Tailwind (plan step 36): each view renders
+ * `data-md-*` attributes and no class list of its own beyond the interaction and text classes
+ * (tests/Support/ViewClasses.php), and each has a stylesheet in `material.components` that imports
+ * the stylesheets of the components its view renders, writes its values from the tokens and its
+ * breakpoints as px range queries, and is imported from the "Containment" block of components.css.
+ *
+ * The dataset grows by one name per component commit (`divider`, `collapse`, `card`, then `list`
+ * and `list-item` together), the same rule InputStylesheetsTest.php and ActionStylesheetsTest.php
+ * follow. It starts empty: this file lands before any containment component is rewritten.
+ */
+dataset('containment components', [
+    //
+]);
+
+/**
+ * Fails unless every media query in the stylesheet writes its lengths in px, at one of M3's four
+ * breakpoints. `rem` and `em` would grow with the reader's text size, which a breakpoint must not.
+ */
+function assertContainmentBreakpointsInPx(ComponentStylesheet $css, string $label): void
+{
+    foreach ($css->mediaQueries() as $query) {
+        preg_match_all('/\(([^()]*)\)/', $query, $features);
+
+        foreach ($features[1] as $feature) {
+            preg_match_all('/(\d*\.?\d+)(px|rem|em)\b/', $feature, $lengths, PREG_SET_ORDER);
+
+            foreach ($lengths as [, $number, $unit]) {
+                expect($unit)->toBe('px', "{$label}: {$query}");
+                expect(in_array($number, ['600', '840', '1200', '1600'], true))->toBeTrue("{$label}: {$query} is not at an M3 breakpoint");
+            }
+        }
+    }
+}
+
+/**
+ * Colours are roles, shadows are elevation levels or a ring, type is a type style, and breakpoints
+ * are px, at one of M3's four.
+ */
+function assertContainmentTokensAndPxBreakpoints(ComponentStylesheet $css, string $label): void
+{
+    $source = (string) preg_replace('~/\*.*?\*/~s', '', $css->css);
+
+    expect($source)->not->toMatch('/#[0-9a-f]{3,8}\b|\b(?:rgba?|hsla?|oklch|oklab|lab|lch)\(/i')
+        ->not->toMatch('/\bfont:(?!\s*var\(--md-sys-typescale-)/')
+        ->not->toMatch('/\btransition[a-z-]*:[^;]*(?:\d+m?s\b|\bease\b|ease-in|ease-out|cubic-bezier)/');
+
+    // A box-shadow is `none`, an elevation level, or a ring: `[inset] 0 0 0 <n>px` in a colour role.
+    $colour = 'var\(--md-sys-color-[a-z-]+\)|color-mix\(in srgb, var\(--md-sys-color-[a-z-]+\) [^;]+?, transparent\)';
+
+    preg_match_all('/\bbox-shadow:\s*([^;]+);/', $source, $shadows, PREG_SET_ORDER);
+
+    foreach ($shadows as [, $value]) {
+        expect(trim($value))->toMatch("/^(?:none|var\\(--md-sys-elevation-[0-5]\\)|(?:inset )?0 0 0 \\d+px (?:{$colour}))$/", "{$label}: box-shadow: {$value} is not none, an elevation or a ring in a colour role");
+    }
+
+    assertContainmentBreakpointsInPx($css, $label);
+}
+
+it('draws the component from a stylesheet shaped like every package stylesheet', function (string $name) {
+    $css = ComponentStylesheet::read($name);
+
+    expect($css->css)->toStartWith('/*')
+        ->and($css->statements()[0] ?? null)->toBe('@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;')
+        ->and(array_slice($css->statements(), 1))->each->toMatch('/^@import \'\.\/[a-z-]+\.css\';$/')
+        ->and($css->blocks())->each->toBe('@layer material.components')
+        ->and($css->css)->not->toMatch('/@(?:tailwind|theme|utility|variant|custom-variant|apply|source|config|plugin|reference)\b|--(?:theme|spacing|alpha)\(|\btheme\(/');
+
+    foreach ($css->imports() as $import) {
+        expect(is_file(dirname(ComponentStylesheet::path($name)).'/'.$import))->toBeTrue("{$name}.css imports {$import}, which does not exist");
+    }
+})->with('containment components');
+
+it('imports the stylesheet of every component its view renders', function (string $name) {
+    preg_match_all('/<x-livewire-material::([a-z-]+)/', File::get(__DIR__."/../../../resources/views/components/{$name}.blade.php"), $tags);
+
+    $rendered = collect($tags[1])->unique()
+        // A component still written for Tailwind has no stylesheet of its own to import yet; its
+        // old stylesheet, if it has one, lives in tailwind.css without the layer statement.
+        ->filter(fn (string $tag): bool => is_file(ComponentStylesheet::path($tag)) && str_contains(File::get(ComponentStylesheet::path($tag)), '@layer material.components'))
+        ->map(fn (string $tag): string => "./{$tag}.css")
+        ->values()
+        ->all();
+
+    expect(array_values(array_diff($rendered, ComponentStylesheet::read($name)->imports())))->toBe([]);
+})->with('containment components');
+
+it('writes no class list into the view but the interaction and text classes', function (string $name) {
+    expect(ViewClasses::violations(File::get(__DIR__."/../../../resources/views/components/{$name}.blade.php")))->toBe([]);
+})->with('containment components');
+
+it('takes its values from the tokens and its breakpoints in px', function (string $name) {
+    assertContainmentTokensAndPxBreakpoints(ComponentStylesheet::read($name), "{$name}.css");
+})->with('containment components');
+
+it('is imported from the containment block of components.css', function (string $name) {
+    $components = File::get(__DIR__.'/../../../resources/css/components.css');
+    $block = substr($components, (int) strpos($components, '/* Containment */'));
+    $block = substr($block, 0, (int) strpos($block, '/* Navigation */'));
+
+    expect($block)->toContain("@import './components/{$name}.css';");
+})->with('containment components');