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

This commit is contained in:

Andreas Reinhold / reini

2026-09-15 00:40:39 +02:00

co-authored by

Claude Sonnet 5

parent ed93222d22

commit f1cd6e4eb4

6 changed files with 100 additions and 19 deletions

									
										resources/css/components.css
									
		+1
		
												View File
												
				@@ -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';