Draw the section navigation without Tailwind

Plan step 36 (navigation group, third batch): <x-section-nav>'s class
lists move into resources/css/components/section-nav.css, keyed on
data-md-section-nav (data-md-section-nav-picker, its own trigger and
label) and <x-tabs>'s own hooks, reused whole rather than copied
(N-16's fix keeps the real scrollable tab bar it landed): the bar's
outline-variant divider, active indicator and aria-current colouring
are tabs.css's rules, not this file's. The picker's trigger takes the
shared md-focus-ring class and the fixed md-type-body-lg/md-ink/
md-text-start text classes for its own body-large type, since it is
prose on a plain button rather than a component's own type; icons
take a size prop instead of a size class.

Hooks renamed: data-section-nav to data-md-section-nav,
data-section-picker to data-md-section-nav-picker, updated in
TabsTest.php (which carries section-nav's render tests) and
tests/Browser/BarsTest.php.

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

tests/Feature/Components/NavigationStylesheetsTest.php

@@ -20,6 +20,8 @@ use NoNameWeb\LivewireMaterial\Tests\Support\ViewClasses;
  * published that variable through a Tailwind utility, which no layered rule could outrank; now
  * scaffold.css sets it in `material.layout`, which this file's `material.components` always beats,
  * so the whole stylesheet fits one `@layer material.components` block like every other entry here.
+ * `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',
@@ -30,6 +32,7 @@ dataset('navigation components', [
     'navigation-rail',
     'navigation-rail-item',
     'navigation-rail-section',
+    'section-nav',
 ]);
 
 /**