Put the showcase in the app shell, with a page per section

The showcase is now an overview and one page per section behind a
grouped navigation rail, moved between with wire:navigate, instead of
one long page under a scrolling top bar. The switch exposed a WebKit
bug in the menu: inside a focusable region, WebKit moves focus out of
the closing popover before its toggle event, so Escape no longer
returned focus to the trigger. The menu now reads it on beforetoggle.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy

tests/Browser/ActionsTest.php

@@ -2,9 +2,9 @@
 
 const MORE = '#menus [aria-label="More"]';
 
-function showcase()
+function showcase(string $section = 'buttons')
 {
-    return visit('/material')->waitForEvent('networkidle')
+    return visit("/material/{$section}")->waitForEvent('networkidle')
         ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
 }
 
@@ -14,7 +14,7 @@ function focused(string $expression): string
 }
 
 it('opens a menu on the first item and walks it with the keyboard', function () {
-    $page = showcase()
+    $page = showcase('menus')
         ->assertNoJavaScriptErrors()
         ->click(MORE)
         ->assertAttribute(MORE, 'aria-expanded', 'true')
@@ -38,7 +38,7 @@ it('opens a menu on the first item and walks it with the keyboard', function ()
 });
 
 it('opens a menu from the keyboard, on the last item with ArrowUp', function () {
-    $page = showcase();
+    $page = showcase('menus');
 
     $page->script("document.querySelector('".MORE."').focus()");
 
@@ -50,13 +50,13 @@ it('opens a menu from the keyboard, on the last item with ArrowUp', function ()
 it('opens a menu the moment the page can be used', function () {
     // The guard against a light-dismiss press reopening the menu once measured from the page's
     // time origin, and swallowed every click in the first quarter second.
-    visit('/material')
+    visit('/material/menus')
         ->click(MORE)
         ->assertAttribute(MORE, 'aria-expanded', 'true');
 });
 
 it('closes a menu when an item is chosen, but not one that keeps it open', function () {
-    $page = showcase();
+    $page = showcase('menus');
 
     $page->click(MORE)
         ->click('#menus [role="menuitem"]:has-text("Download")')
@@ -76,7 +76,7 @@ it('shows a tooltip on keyboard focus and hides it on Escape', function () {
     // Firefox only counts a scripted focus as :focus-visible after one. Then focused directly
     // rather than tabbed to: WebKit, like Safari on macOS, leaves buttons out of the Tab order
     // unless full keyboard access is on.
-    $page->keys('body', 'Tab');
+    $page->keys('#content', 'Tab');
     $page->script("document.querySelector('#buttons [aria-label=\"Tonal\"]').focus()");
     $page->assertScript(focused("getAttribute('aria-label') === 'Tonal'"))
         ->assertScript("{$tooltip}.matches(':popover-open')");

tests/Browser/CarouselTest.php

@@ -64,7 +64,7 @@ const FIRST_SCROLLER = '#carousel [role="region"] >> nth=0';
 
 function carouselShowcase(array $options = [])
 {
-    return visit('/material', $options)
+    return visit('/material/carousel', $options)
         ->waitForEvent('networkidle')
         ->assertScript("typeof window.Alpine !== 'undefined'");
 }

tests/Browser/ChipsTest.php

@@ -74,7 +74,7 @@ function chipProbe()
 
 function chipShowcase()
 {
-    return visit('/material')->waitForEvent('networkidle')
+    return visit('/material/chips')->waitForEvent('networkidle')
         ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
 }
 
@@ -99,7 +99,7 @@ it('toggles a filter chip with a click and with Space, and grows its check in',
 
     // A key press first, so the browser is in keyboard modality; focused directly, not tabbed to,
     // because WebKit leaves form controls out of the Tab order unless full keyboard access is on.
-    $page->keys('body', 'Tab');
+    $page->keys('#content', 'Tab');
     $page->script(filterInput('archives').'.focus()');
     $page->keys(':focus', 'Space')
         ->assertScript(filterInput('archives').'.checked')

tests/Browser/CommunicationTest.php

@@ -3,7 +3,7 @@
 const SNACKBAR = "document.querySelector('[x-data=\"materialSnackbar\"] [aria-live]')";
 
 it('shows a toast as a snackbar, then the next in turn', function () {
-    $page = visit('/material')->waitForEvent('networkidle')
+    $page = visit('/material/communication')->waitForEvent('networkidle')
         ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
 
     $page->script("materialToast('First', { type: 'success', timeout: 600 }); materialToast('Second', { type: 'error' })");
@@ -18,7 +18,7 @@ it('shows a toast as a snackbar, then the next in turn', function () {
 });
 
 it('shows a toast dispatched as a browser event, as the Toasts concern does', function () {
-    $page = visit('/material')->waitForEvent('networkidle')
+    $page = visit('/material/communication')->waitForEvent('networkidle')
         ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
 
     // Through Livewire, in the page's own realm: an event built inside Playwright's evaluate
@@ -29,7 +29,7 @@ it('shows a toast dispatched as a browser event, as the Toasts concern does', fu
 });
 
 it('runs a toast\'s action and dismisses it', function () {
-    $page = visit('/material')->waitForEvent('networkidle')
+    $page = visit('/material/communication')->waitForEvent('networkidle')
         ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
 
     $page->script("window.__undone = false; materialToast('Share deleted', { action: { label: 'Undo', handler: () => window.__undone = true } })");
@@ -42,7 +42,7 @@ it('runs a toast\'s action and dismisses it', function () {
 it('opens a persistent rich tooltip on press', function () {
     $bubble = "document.querySelector('#communication [role=\"dialog\"][popover]')";
 
-    visit('/material')->waitForEvent('networkidle')
+    visit('/material/communication')->waitForEvent('networkidle')
         ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'")
         ->click('#communication button:has-text("Press for details")')
         ->assertScript("{$bubble}.matches(':popover-open')");

tests/Browser/ContainmentTest.php

@@ -66,7 +66,7 @@ function overlayProbe()
 
 function containment()
 {
-    return visit('/material')->waitForEvent('networkidle')
+    return visit('/material/containment')->waitForEvent('networkidle')
         ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
 }
 

tests/Browser/ProgressTest.php

@@ -55,7 +55,7 @@ function progressShowcase(array $options = [])
 {
     // networkidle alone can return before a repeated visit has even loaded in Firefox; the
     // assertion retries until the page is complete and Alpine has started.
-    return visit('/material', $options)->waitForEvent('networkidle')
+    return visit('/material/progress', $options)->waitForEvent('networkidle')
         ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
 }
 

tests/Browser/ShowcaseTest.php

@@ -5,3 +5,17 @@ it('opens the showcase in a real browser', function () {
         ->assertSee('Livewire Material')
         ->assertNoJavaScriptErrors();
 });
+
+it('moves between sections through the rail and the next-section link, keeping the rail', function () {
+    $page = visit('/material')->waitForEvent('networkidle')
+        ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
+
+    $page->click('[data-navigation-rail-panel] a[href$="/material/buttons"]')
+        ->assertSee('Variants')
+        ->assertScript("document.querySelector('[data-navigation-rail-panel] [aria-current=\"page\"]').getAttribute('href').endsWith('/material/buttons')")
+        ->assertScript("document.title === 'Buttons · Livewire Material'");
+
+    $page->click('[data-test="next-section"]')
+        ->assertScript("location.pathname.endsWith('/material/menus')")
+        ->assertNoJavaScriptErrors();
+});

tests/Browser/SliderTest.php

@@ -59,7 +59,7 @@ function sliderProbe()
 
 function sliderShowcase()
 {
-    return visit('/material')->waitForEvent('networkidle')
+    return visit('/material/sliders')->waitForEvent('networkidle')
         ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
 }
 

tests/Browser/ThemeTest.php

@@ -25,9 +25,9 @@ it('keeps the visitor\'s choice over the operating system', function () {
         ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'")
         ->assertScript(theme('data-theme', 'dark'));
 
-    $page->click('@theme-light')
+    $page->click('[data-theme-option="light"]')
         ->assertScript(theme('data-theme', 'light'))
-        ->assertAttribute('@theme-light', 'aria-pressed', 'true')
+        ->assertAttribute('[data-theme-option="light"]', 'aria-checked', 'true')
         ->assertScript("localStorage.getItem('material-theme') === 'light'");
 
     $page->refresh()
@@ -52,7 +52,7 @@ it('adopts an earlier toggle\'s choice once', function () {
 it('repaints a section that sets its own theme', function () {
     $swatch = fn (int $index): string => "getComputedStyle(document.querySelectorAll('#colour [data-theme] .bg-primary')[{$index}]).backgroundColor";
 
-    visit('/material')->inLightMode()
+    visit('/material/colour')->inLightMode()
         ->assertScript(theme('data-theme', 'light'))
         ->assertScript("{$swatch(0)} !== {$swatch(1)}");
 });

tests/Feature/ShowcaseTest.php

@@ -1,6 +1,7 @@
 <?php
 
 use Illuminate\Support\Facades\File;
+use NoNameWeb\LivewireMaterial\Showcase\Sections;
 use NoNameWeb\LivewireMaterial\Support\SvgFile;
 
 /**
@@ -28,6 +29,22 @@ it('mounts the showcase when enabled', function () {
         ->assertSee('Livewire Material');
 });
 
+it('gives every section a page of its own, linked from the overview and the rail', function () {
+    $overview = $this->withoutVite()->get('/material')->assertOk();
+
+    foreach (Sections::all() as $key => $section) {
+        $overview->assertSee(route('livewire-material.section', $key), false);
+
+        $this->withoutVite()
+            ->get("/material/{$key}")
+            ->assertOk()
+            ->assertSee("<title>{$section['title']} · Livewire Material</title>", false)
+            ->assertSee('id="'.$key.'"', false);
+    }
+
+    $this->get('/material/not-a-section')->assertNotFound();
+});
+
 it('does not mount the showcase when disabled', function () {
     rebootWithShowcase(false);
 
@@ -77,7 +94,7 @@ it('shows every component somewhere in the showcase', function () {
 
     $absent = collect(File::files(__DIR__.'/../../resources/views/components'))
         ->map(fn (SplFileInfo $file): string => $file->getBasename('.blade.php'))
-        ->reject(fn (string $name): bool => preg_match('/<x-(?:livewire-material::)?'.preg_quote($name, '/').'[\s\/>]/', $showcase) === 1)
+        ->reject(fn (string $name): bool => preg_match('/(?:<|&lt;)x-(?:livewire-material::)?'.preg_quote($name, '/').'(?:[\s\/>]|&gt;)/', $showcase) === 1)
         ->values()
         ->all();