Add a search to the showcase
tests / feature (8.5) (push) Successful in 1m14s
tests / lint (push) Successful in 1m1s
tests / feature (8.4) (push) Successful in 1m9s
tests / browser (chrome, chromium) (push) Successful in 3m22s
tests / browser (firefox, firefox) (push) Successful in 4m37s
tests / browser (safari, webkit) (push) Successful in 5m4s

A search app bar looks through every section, example and component,
opens the section, or the example at its anchor on its page, and is
reached from anywhere with / or Ctrl+K. Section pages now carry their
own heading.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
This commit is contained in:
Andreas Reinhold / reini
2026-09-13 09:56:00 +02:00
co-authored by Claude Opus 5
parent 7ebcb0565f
commit 51bf034b74
13 changed files with 272 additions and 27 deletions
+5
View File
@@ -594,6 +594,11 @@ pages and the mail theme by an agent in its own worktree. What changed from the
wire:navigate. It turned up a WebKit bug in `<x-menu>`: inside a focusable region (the shell's
`<main tabindex="-1">`), WebKit hands focus back to that region as the popover closes, so the
menu now reads whether focus was inside on `beforetoggle` before returning it to the trigger.
- **The showcase has a search** in a search app bar (`<x-search>`, `/` or Ctrl+K): an index of every
section, every example (by its anchor) and every component, read from the section views and fetched
as `/material/search.json` on first focus. Names in a slot's Alpine scope must keep clear of the
component's own: `results` and `open` in `<x-search>`'s scope hid the page's. wire:navigate keeps a
URL's hash but scrolls to the top, so the layout lands on the hash after the swap settles.
- **Verified in a fresh Laravel 13.31 application** (`composer create-project`, the package from a
path repository, the README's CSS, JS and layout, `material:scheme "#4f46e5"`, `npm run build`):
a Livewire page with an app bar, tabs, a card, a form with validation, a date picker, a dialog and