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')");