From 27028bfb7a5b612888e94ec7f436f3564f24eac2 Mon Sep 17 00:00:00 2001
From: Andreas Reinhold / reini <reini@kadenpartner.ch>
Date: Tue, 15 Sep 2026 01:14:07 +0200
Subject: [PATCH] Import the button stylesheet from list-detail.css for its
 back button

Plan step 36, navigation review sweep. <x-list-detail> renders an
<x-button> as the single-pane back action, but only pane.css picked up
button.css when the carry-over landed; an application importing
layout/list-detail.css alone got an unstyled back button. A new check
reads every layout view's component tags against its stylesheet's
imports, as the group stylesheet tests do for components.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
---
 resources/css/layout/list-detail.css |  4 +++-
 tests/Feature/StylesheetsTest.php    | 32 ++++++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/resources/css/layout/list-detail.css b/resources/css/layout/list-detail.css
index 2349fa9d..4ef0a1f7 100644
--- a/resources/css/layout/list-detail.css
+++ b/resources/css/layout/list-detail.css
@@ -25,12 +25,14 @@
  * what is inside it that the margin is drawn. A pane that is focused as a whole draws no outline:
  * it is not a control, and the element focus lands on inside it is what shows the ring.
  *
- * In `material.layout`; the state and focus are resources/js/layout.js.
+ * In `material.layout`; the state and focus are resources/js/layout.js. Imports button.css for the
+ * detail pane's back button.
  */
 
 @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
 
 @import './visibility.css';
+@import '../components/button.css';
 
 @layer material.layout {
     [data-md-list-detail] {
diff --git a/tests/Feature/StylesheetsTest.php b/tests/Feature/StylesheetsTest.php
index 1915cdd3..02c160a8 100644
--- a/tests/Feature/StylesheetsTest.php
+++ b/tests/Feature/StylesheetsTest.php
@@ -357,6 +357,38 @@ it('imports a stylesheet for every layout component from layout.css, each beside
     }
 });
 
+it('imports, from every layout stylesheet, the stylesheet of each component its view renders', function () {
+    $checked = 0;
+
+    foreach (File::files(stylesheetPath('layout')) as $file) {
+        $name = $file->getBasename('.css');
+        $view = __DIR__."/../../resources/views/components/{$name}.blade.php";
+
+        if (! File::exists($view)) {
+            continue;
+        }
+
+        preg_match_all('/<x-livewire-material::([a-z-]+)/', File::get($view), $tags);
+        $imports = stylesheetImports($file->getPathname());
+
+        foreach (array_unique($tags[1]) as $tag) {
+            $import = match (true) {
+                File::exists(stylesheetPath()."/components/{$tag}.css") => "../components/{$tag}.css",
+                File::exists(stylesheetPath()."/layout/{$tag}.css") => "./{$tag}.css",
+                default => null,
+            };
+
+            if ($import !== null) {
+                $checked++;
+
+                expect(in_array($import, $imports, true))->toBeTrue("layout/{$name}.css renders <x-{$tag}> without importing {$import}");
+            }
+        }
+    }
+
+    expect($checked)->toBeGreaterThan(0);
+});
+
 it('opens every layout stylesheet with a header, the layer statement and plain imports', function () {
     foreach (layoutStylesheets() as $file) {
         $name = stylesheetName($file);