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

resources/css/components.css

@@ -78,3 +78,4 @@
 @import './components/navigation-rail.css';
 @import './components/navigation-rail-item.css';
 @import './components/navigation-rail-section.css';
+@import './components/section-nav.css';

resources/css/components/section-nav.css

@@ -0,0 +1,70 @@
+/*
+ * <x-section-nav>: the navigation inside one area of an application — M3's secondary tabs from
+ * `medium` (600px), five or more of them the scrollable tab bar M3's own accessibility page
+ * blesses rather than a grid that would break the tab bar's divider and strand the upper rows'
+ * indicators against nothing (docs/audits/m3-alignment/navigation.md N-16); below `medium`, where a
+ * row of them never fits, a button naming the current section opens the same list as a menu.
+ *
+ *   [data-md-section-nav]                min-inline-size: 0
+ *     [data-md-section-nav-picker]       hidden from medium
+ *       [data-md-section-nav-trigger]    48px, an outlined field-like button
+ *         [data-md-section-nav-trigger-label]  the current section's title, truncated
+ *     nav                                hidden below medium
+ *       [data-md-tabs-bar]               tabs.css, reused whole
+ *
+ * Reuses `<x-tabs>`'s own hooks and stylesheet rather than a tab bar of its own: a link marked
+ * `aria-current="page"` takes the same active indicator and colour tabs.css already draws for
+ * `aria-selected="true"` (N-21), so nothing here repeats a rule tabs.css owns; the only addition is
+ * `min-inline-size: 0` on this bar's own items, so a long title still truncates inside the row
+ * `<x-tabs>`'s own layout does not otherwise need. The picker's trigger is not one of M3's controls
+ * — an outlined field-like button naming the current section, 48px tall to meet the target M3 asks
+ * for everywhere, at the tab bar's own body-large type (a text class on the view, `md-type-body-lg
+ * md-ink md-text-start`, since it is prose on a plain button rather than a component's own type).
+ */
+
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
+
+@import './tabs.css';
+@import './icon.css';
+@import './menu.css';
+@import './menu-item.css';
+@import './badge.css';
+
+@layer material.components {
+    [data-md-section-nav] {
+        min-inline-size: 0;
+    }
+
+    [data-md-section-nav-picker] {
+        @media (width >= 600px) {
+            display: none;
+        }
+    }
+
+    [data-md-section-nav] > nav {
+        @media (width < 600px) {
+            display: none;
+        }
+    }
+
+    [data-md-section-nav-trigger] {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        block-size: var(--md-sys-measurement-space600);
+        inline-size: min(320px, calc(100vw - 32px));
+        cursor: pointer;
+        border: 1px solid var(--md-sys-color-outline);
+        border-radius: var(--md-sys-shape-corner-xs);
+        padding-inline: var(--md-sys-measurement-space200);
+    }
+
+    [data-md-section-nav-trigger-label] {
+        min-inline-size: 0;
+        flex: 1 1 0%;
+    }
+
+    [data-md-section-nav] [data-md-tabs-bar] > li {
+        min-inline-size: 0;
+    }
+}

resources/views/components/section-nav.blade.php

@@ -40,17 +40,17 @@
     $scrollable = count($items) >= 5;
 @endphp
 
-<div {{ $attributes->class(['min-w-0']) }} data-section-nav>
+<div {{ $attributes }} data-md-section-nav>
     @if ($current)
-        <div class="medium:hidden" data-section-picker>
+        <div data-md-section-nav-picker>
             <x-livewire-material::menu :$label position="bottom-start">
                 <x-slot:trigger>
-                    <button type="button" class="focus-ring flex h-12 w-[min(20rem,calc(100vw-2rem))] cursor-pointer items-center gap-3 rounded-corner-xs border border-outline px-4 text-start type-body-lg text-on-surface">
+                    <button type="button" data-md-section-nav-trigger class="md-focus-ring md-type-body-lg md-ink md-text-start">
                         @isset($current['icon'])
-                            <x-livewire-material::icon :name="$current['icon']" optical="20" class="size-5 text-on-surface-variant" />
+                            <x-livewire-material::icon :name="$current['icon']" :size="20" class="md-ink-variant" />
                         @endisset
-                        <span class="min-w-0 flex-1 truncate">{{ $current['title'] }}</span>
+                        <span data-md-section-nav-trigger-label class="md-truncate">{{ $current['title'] }}</span>
-                        <x-livewire-material::icon name="arrow_drop_down" class="size-6 text-on-surface-variant" />
+                        <x-livewire-material::icon name="arrow_drop_down" class="md-ink-variant" />
                     </button>
                 </x-slot:trigger>
 
@@ -61,12 +61,12 @@
         </div>
     @endif
 
-    <nav aria-label="{{ $label }}" class="max-medium:hidden">
+    <nav aria-label="{{ $label }}">
         <ul data-md-tabs-bar data-md-variant="secondary" @if ($scrollable) data-md-scrollable @endif>
             @foreach ($items as $item)
                 @php($on = $isCurrent($item))
 
-                <li class="flex min-w-0">
+                <li>
                     <a
                         href="{{ $item['url'] }}"
                         data-md-tab
@@ -75,9 +75,9 @@
                     >
                         <span data-md-tab-content>
                             @isset($item['icon'])
-                                <x-livewire-material::icon :name="$item['icon']" :filled="$on" optical="20" class="size-5" />
+                                <x-livewire-material::icon :name="$item['icon']" :filled="$on" :size="20" />
                             @endisset
-                            <span class="truncate">{{ $item['title'] }}</span>
+                            <span class="md-truncate">{{ $item['title'] }}</span>
                             @if (filled($item['badge'] ?? null))
                                 <x-livewire-material::badge :value="$item['badge']" />
                             @endif

tests/Browser/BarsTest.php

@@ -138,12 +138,12 @@ it('switches the theme from a toggle, a cycle and a picker', function () {
 it('turns section tabs into a picker on a phone', function () {
     barsProbe()
         ->resize(400, 800)
-        ->assertScript("getComputedStyle(document.querySelector('[data-section-nav] nav')).display === 'none'")
+        ->assertScript("getComputedStyle(document.querySelector('[data-md-section-nav] nav')).display === 'none'")
-        ->click('[data-section-picker] button')
+        ->click('[data-md-section-nav-picker] button')
-        ->assertScript("document.querySelector('[data-section-picker] [popover]').matches(':popover-open')")
+        ->assertScript("document.querySelector('[data-md-section-nav-picker] [popover]').matches(':popover-open')")
         // A menu of places: the current section is the page, not a checked choice.
-        ->assertAttribute('[data-section-picker] [role="menuitem"][href="#profile"]', 'aria-current', 'page')
+        ->assertAttribute('[data-md-section-nav-picker] [role="menuitem"][href="#profile"]', 'aria-current', 'page')
-        ->assertScript("! document.querySelector('[data-section-picker] [role=\"menuitem\"][href=\"#security\"]').hasAttribute('aria-current')");
+        ->assertScript("! document.querySelector('[data-md-section-nav-picker] [role=\"menuitem\"][href=\"#security\"]').hasAttribute('aria-current')");
 });
 
 class AppBarOverflowProbe extends Component

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',
 ]);
 
 /**

tests/Feature/Components/TabsTest.php

@@ -110,16 +110,23 @@ it('draws section navigation as secondary tabs and a picker', function () {
 
     expect($html)
         ->toContain('aria-label="Settings"')
-        ->toContain('data-section-picker')
+        ->toContain('data-md-section-nav-picker')
         ->toContain('data-md-variant="secondary"')
-        ->toContain('max-medium:hidden')
         ->toMatch('/href="\/settings\/security"\s+data-md-tab\s+aria-current="page"\s+wire:navigate/')
         ->not->toMatch('/href="\/settings\/profile"\s+data-md-tab\s+aria-current/')
         // The picker is a menu of places: the current one is the page, not a checked choice,
         // and a section's badge shows there as well as on its tab.
         ->not->toContain('role="menuitemcheckbox"')
         ->toMatch('/role="menuitem"[^>]*aria-current="page"[^>]*href="\/settings\/security"/')
-        ->toMatch('/data-section-picker.*Security.*>\s*1\s*<.*<nav/s');
+        ->toMatch('/data-md-section-nav-picker.*Security.*>\s*1\s*<.*<nav/s');
+
+    // The picker shows only below medium, the tab bar only from it (N-16's compact fallback).
+    $css = ComponentStylesheet::read('section-nav');
+
+    expect($css->declarations('[data-md-section-nav-picker]', ['@media (width >= 600px)']))
+        ->toBe(['display' => 'none'])
+        ->and($css->declarations('[data-md-section-nav] > nav', ['@media (width < 600px)']))
+        ->toBe(['display' => 'none']);
 });
 
 it('marks the section whose url is the request\'s, and scrolls many sections', function () {
@@ -131,7 +138,7 @@ it('marks the section whose url is the request\'s, and scrolls many sections', f
         // Five or more sections are M3's scrollable tabs, not a grid of wrapped rows (N-16).
         ->toMatch('/<ul data-md-tabs-bar data-md-variant="secondary"\s+data-md-scrollable\s*>/')
         ->not->toContain('grid-cols-')
-        ->toMatch('/data-md-tab\s+aria-current="page"\s*>\s*<span data-md-tab-content>\s*<span class="truncate">S3/')
+        ->toMatch('/data-md-tab\s+aria-current="page"\s*>\s*<span data-md-tab-content>\s*<span class="md-truncate">S3/')
         ->not->toContain('wire:navigate')
         // Four still share the row.
         ->and((string) $this->blade('<x-section-nav :items="$items" no-wire-navigate />', ['items' => array_slice($items, 0, 4)]))