From cbd058f948d1945256c267a0d9601eafd6b089d3 Mon Sep 17 00:00:00 2001
From: Andreas Reinhold / reini <reini@kadenpartner.ch>
Date: Tue, 15 Sep 2026 01:11:12 +0200
Subject: [PATCH] Check navigation-item.css's shape like every navigation
 stylesheet

Plan step 36, navigation review. The shared indicator and state-layer
stylesheet has no view of its own, so it was in no group dataset, and
since 9c134b2d the layout stylesheet tests skip the component files
scaffold.css reaches it through. Its layer, Tailwind, token, scoping
and components.css checks now run with the navigation components'.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
---
 .../Components/NavigationStylesheetsTest.php  | 49 ++++++++++++-------
 1 file changed, 31 insertions(+), 18 deletions(-)

diff --git a/tests/Feature/Components/NavigationStylesheetsTest.php b/tests/Feature/Components/NavigationStylesheetsTest.php
index 000bd972..1d237a90 100644
--- a/tests/Feature/Components/NavigationStylesheetsTest.php
+++ b/tests/Feature/Components/NavigationStylesheetsTest.php
@@ -23,20 +23,33 @@ use NoNameWeb\LivewireMaterial\Tests\Support\ViewClasses;
  * `section-nav` renders `<x-tabs>`'s hooks rather than `<x-tabs>` itself (it reuses its stylesheet
  * whole, tabs.css, N-16), so `navigationViews()` need not special-case it the way it does 'tabs'.
  */
-dataset('navigation components', [
-    'app-bar',
-    'toolbar',
-    'tabs',
-    'navigation-bar',
-    'navigation-bar-item',
-    'navigation-rail',
-    'navigation-rail-item',
-    'navigation-rail-section',
-    'section-nav',
-    'account-menu',
-    'theme-toggle',
-    'scheme-picker',
-]);
+function navigationComponents(): array
+{
+    return [
+        'app-bar',
+        'toolbar',
+        'tabs',
+        'navigation-bar',
+        'navigation-bar-item',
+        'navigation-rail',
+        'navigation-rail-item',
+        'navigation-rail-section',
+        'section-nav',
+        'account-menu',
+        'theme-toggle',
+        'scheme-picker',
+    ];
+}
+
+dataset('navigation components', navigationComponents());
+
+/**
+ * The checks that read a stylesheet alone also run on the one no view renders by itself:
+ * navigation-item.css, the indicator fill and state layer the bar's and the rail's items share and
+ * both import. Nothing else reaches it — the layout stylesheet tests skip component files they
+ * import — so without this its layer, tokens and scoping would go unchecked.
+ */
+dataset('navigation stylesheets', [...navigationComponents(), 'navigation-item']);
 
 /**
  * The blade view(s) a dataset name's checks read. One file for every name but 'tabs', whose panel
@@ -105,7 +118,7 @@ it('draws the component from a stylesheet shaped like every package stylesheet',
     foreach ($css->imports() as $import) {
         expect(is_file(dirname(ComponentStylesheet::path($name)).'/'.$import))->toBeTrue("{$name}.css imports {$import}, which does not exist");
     }
-})->with('navigation components');
+})->with('navigation stylesheets');
 
 it('imports the stylesheet of every component its view renders', function (string $name) {
     $rendered = collect(navigationViews($name))
@@ -133,14 +146,14 @@ it('writes no class list into the view but the interaction and text classes', fu
 
 it('takes its values from the tokens and its breakpoints in px', function (string $name) {
     assertNavigationTokensAndPxBreakpoints(ComponentStylesheet::read($name), "{$name}.css");
-})->with('navigation components');
+})->with('navigation stylesheets');
 
 it('is imported from the navigation block of components.css', function (string $name) {
     $components = File::get(__DIR__.'/../../../resources/css/components.css');
     $block = substr($components, (int) strpos($components, '/* Navigation */'));
 
     expect($block)->toContain("@import './components/{$name}.css';");
-})->with('navigation components');
+})->with('navigation stylesheets');
 
 it('scopes every element-wide selector to a data-md hook', function (string $name) {
     // `all.css` bundles every component stylesheet into every page, so a bare `html`, `body`,
@@ -148,4 +161,4 @@ it('scopes every element-wide selector to a data-md hook', function (string $nam
     $source = (string) preg_replace('~/\*.*?\*/~s', '', ComponentStylesheet::read($name)->css);
 
     expect($source)->not->toMatch('/(?:^|[,{};]\s*)(?:html|body|dialog|:root)(?![\w-])(?!\[data-md-|:has\(> \[data-md-)/m');
-})->with('navigation components');
+})->with('navigation stylesheets');