noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Draw the section navigation without Tailwind

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
tests/Browser/BarsTest.php
+5 -5
View File
@@ -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'")
->click('[data-section-picker] button')
->assertScript("document.querySelector('[data-section-picker] [popover]').matches(':popover-open')")
->assertScript("getComputedStyle(document.querySelector('[data-md-section-nav] nav')).display === 'none'")
->click('[data-md-section-nav-picker] button')
->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')
->assertScript("! document.querySelector('[data-section-picker] [role=\"menuitem\"][href=\"#security\"]').hasAttribute('aria-current')");
->assertAttribute('[data-md-section-nav-picker] [role="menuitem"][href="#profile"]', 'aria-current', 'page')
->assertScript("! document.querySelector('[data-md-section-nav-picker] [role=\"menuitem\"][href=\"#security\"]').hasAttribute('aria-current')");
});
class AppBarOverflowProbe extends Component