Add a search to the showcase

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

README.md

@@ -124,7 +124,7 @@ Every component, prop and slot is documented in the Boost skill (`resources/boos
 
 ## Showcase
 
-While the application runs locally (or with `MATERIAL_SHOWCASE=true`), `/material` renders every token and component, in every variant, in the application's own scheme and theme.
+While the application runs locally (or with `MATERIAL_SHOWCASE=true`), `/material` shows every token and component, in every variant, in the application's own scheme and theme: an overview, and a page per section behind a navigation rail (the package's own app shell), with a search over every section, example and component (press `/`).
 
 ## Testing the design
 

docs/plans/livewire-material.md

@@ -589,12 +589,22 @@ pages and the mail theme by an agent in its own worktree. What changed from the
   `__DIR__.'/../resources/views/components'`: Blade names the view namespace after its hash, and
   compiled views keep that name.
 - **A test checks that every component appears in the showcase.**
+- **The showcase is the package's own app shell**: an overview at `/material` and a page per section
+  (`/material/{section}`, `Showcase\Sections`), grouped in the navigation rail, moved between with
+  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
   a toast works without console errors; `/material` and the 404 page render in its scheme.
-- **Known gap:** `<x-datepicker>` has no clear button (`<x-timepicker clearable>` does); a date can be
+- **`<x-datepicker clearable>`** empties a date, or both ends of a range, as `<x-timepicker clearable>`
-  emptied through its text input.
+  does.
 
 ### Phase 11 — SealShare 2.0.0
 

resources/boost/skills/livewire-material-development/SKILL.md

@@ -523,7 +523,7 @@ M3 date pickers on a text field. `wire:model` stores `Y-m-d` strings (`x-model`
 ```blade
 <x-datepicker label="Expires on" wire:model.live="expiresOn" :min="now()" :max="now()->addMonth()" />
 <x-datepicker label="Birthday" mode="modal" wire:model="birthday" :max="now()" />
-<x-datepicker label="Trip" range wire:model="trip" hint="Start and end" />
+<x-datepicker label="Trip" range wire:model="trip" hint="Start and end" clearable />
 ```
 
 | Prop | Default | |
@@ -534,6 +534,7 @@ M3 date pickers on a text field. `wire:model` stores `Y-m-d` strings (`x-model`
 | `label`, `hint`, `icon`, `variant`, `size` | | the field's |
 | `value` | `null` | the initial value without `wire:model` |
 | `name` | | adds hidden inputs with `Y-m-d` for a plain form post (`name[start]`, `name[end]` for a range) |
+| `clearable` | `false` | a button that empties the field (both ends of a range) once it holds a date |
 
 Picking in the calendar is a draft; OK or Enter on a day keeps it, Cancel or Escape does not. A typed date is the value once it is whole and allowed; otherwise the field says why. Month and weekday names, the week's first day and the typed format follow `app()->getLocale()`. Keyboard: arrows, Home/End (week), PageUp/PageDown (month; with Shift, year), Space, Enter, Escape. `min` and `max` are read when the picker starts: when they change on the server, give the component a `wire:key` that changes with them. `required`, `disabled` and `readonly` reach the text field.
 

resources/js/carousel.js

@@ -69,6 +69,9 @@ const MEDIUM_ITEM_FLEX_PERCENTAGE = 0.1
 /** A programmatic scroll still counts as where the carousel is going for this long. */
 const TARGET_MS = 700
 
+// How long the row must go without a scroll event to count as having come to rest.
+const SETTLE_MS = 150
+
 const ITEM = '[data-material-carousel-item]'
 const INTERACTIVE = 'a[href], button, input, select, textarea, summary, [contenteditable], [tabindex]:not([tabindex="-1"])'
 
@@ -805,6 +808,7 @@ document.addEventListener('alpine:init', () => {
             frame: null,
             target: null,
             targetAt: 0,
+            settle: null,
             listeners: [],
             mutations: null,
             resizes: null,
@@ -817,7 +821,12 @@ document.addEventListener('alpine:init', () => {
 
                 state.reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)')
 
-                this.listen(scroller, 'scroll', () => this.schedule(), { passive: true })
+                this.listen(scroller, 'scroll', () => this.scrolled(), { passive: true })
+
+                // A scroll the person makes themselves is theirs to end wherever it ends.
+                for (const type of ['pointerdown', 'wheel', 'touchstart']) {
+                    this.listen(scroller, type, () => (state.target = null), { passive: true })
+                }
                 this.listen(scroller, 'keydown', (event) => this.navigate(event))
                 this.listen(scroller, 'focusin', (event) => this.reveal(event))
                 this.listen(scroller, 'click', (event) => this.open(event))
@@ -913,6 +922,33 @@ document.addEventListener('alpine:init', () => {
                 state.frame ??= requestAnimationFrame(() => this.render())
             },
 
+            /**
+             * Each scroll frame, and once the row comes to rest: a scroll the buttons or keys started
+             * must end on its item. WebKit on Linux can re-snap a smooth scroll to the item it left
+             * when the masks change the layout under it, so an arrival somewhere else is sent on
+             * again, once, at once.
+             */
+            scrolled() {
+                this.schedule()
+
+                clearTimeout(state.settle)
+                state.settle = setTimeout(() => {
+                    const target = state.target
+
+                    if (target === null || performance.now() - state.targetAt > TARGET_MS * 3) {
+                        return
+                    }
+
+                    state.target = null
+
+                    const left = state.snaps[target]
+
+                    if (left !== undefined && Math.abs(this.scrollOffset() - left) > 1) {
+                        this.$refs.scroller.scrollTo({ left: state.rtl ? -left : left, behavior: 'instant' })
+                    }
+                }, SETTLE_MS)
+            },
+
             /** Carousel.kt's carouselItem layer block, for every item. */
             render() {
                 cancelAnimationFrame(state.frame)
@@ -1076,6 +1112,7 @@ document.addEventListener('alpine:init', () => {
 
             destroy() {
                 cancelAnimationFrame(state.frame)
+                clearTimeout(state.settle)
                 state.listeners.forEach((remove) => remove())
                 state.resizes?.disconnect()
                 state.mutations?.disconnect()

resources/js/datepicker.js

@@ -366,6 +366,18 @@ document.addEventListener('alpine:init', () => {
             }
         },
 
+        /** The clear button: no date (no start and no end), closed, and focus back in the field. */
+        clear() {
+            if (this.open) {
+                this.cancel(false)
+            }
+
+            this.fieldError = ''
+            this.text = ''
+            this.write(null)
+            this.$refs.input.focus()
+        },
+
         fieldProblem(value) {
             if (!config.range) {
                 return this.problem(value)

resources/js/menu.js

@@ -15,6 +15,7 @@ document.addEventListener('alpine:init', () => {
     window.Alpine.data('materialMenu', () => ({
         closedAt: -Infinity,
         returnFocus: true,
+        focusWasInside: false,
         listeners: [],
 
         init() {
@@ -26,6 +27,13 @@ document.addEventListener('alpine:init', () => {
             // and close() have already done their part, synchronously, because this event is
             // queued and a screen reader or a test reading aria-expanded in between would be told
             // the menu is shut.
+            // Whether focus was in the menu is read before it closes: once closed, a browser may
+            // already have handed focus to what had it before the menu opened (WebKit does, when
+            // that was a focusable region around the trigger).
+            this.listen(menu, 'beforetoggle', (event) => {
+                this.focusWasInside = event.newState === 'closed' && menu.contains(document.activeElement)
+            })
+
             this.listen(menu, 'toggle', (event) => {
                 const opened = event.newState === 'open'
 
@@ -37,9 +45,11 @@ document.addEventListener('alpine:init', () => {
 
                 this.closedAt = performance.now()
 
-                if (this.returnFocus && menu.contains(document.activeElement)) {
+                if (this.returnFocus && (this.focusWasInside || menu.contains(document.activeElement))) {
                     this.control()?.focus()
                 }
+
+                this.focusWasInside = false
             })
 
             // A press outside closes the menu without pulling focus back to the trigger.

resources/views/components/datepicker.blade.php

@@ -21,7 +21,8 @@
      with, and the errors for `period`, `period.start` and `period.end` all belong to this field.
      `min` and `max` (`Y-m-d` or a date object) disable the days outside them and keep the
      keyboard inside them. `label`, `hint`, `icon`, `variant` (`outlined`, `filled`) and `size`
-     are the field's; `name` adds hidden inputs carrying `Y-m-d` for a plain form post, and every
+     are the field's; `clearable` adds a button that empties it (a date, or both ends of a range)
+     once it holds one; `name` adds hidden inputs carrying `Y-m-d` for a plain form post, and every
      other attribute (`required`, `disabled`, `readonly`) reaches the text field. Errors under
      the `wire:model` name replace the hint, and so does a typed date that cannot be read.
 
@@ -48,6 +49,7 @@
     'min' => null,
     'max' => null,
     'value' => null,
+    'clearable' => false,
 ])
 
 @php
@@ -179,6 +181,19 @@
             />
 
             <x-slot:trailing>
+                @if ($clearable)
+                    <button
+                        type="button"
+                        class="field-trailing field-clear field-button"
+                        aria-label="{{ __('Clear') }}"
+                        x-on:click="clear()"
+                        @disabled($attributes->get('disabled') || $attributes->get('readonly'))
+                        data-field-clear
+                    >
+                        <x-livewire-material::icon name="close" class="size-(--field-icon)" />
+                    </button>
+                @endif
+
                 <button
                     type="button"
                     class="field-trailing field-button"

resources/views/showcase/components/example.blade.php

@@ -18,7 +18,7 @@
     }
 @endphp
 
-<div class="space-y-4 rounded-corner-lg bg-surface-container p-4">
+<div @if ($title) id="{{ \NoNameWeb\LivewireMaterial\Showcase\Sections::anchor($title) }}" @endif class="scroll-mt-24 space-y-4 rounded-corner-lg bg-surface-container p-4">
     @if ($title)
         <h3 class="type-title-md">{{ $title }}</h3>
     @endif

resources/views/showcase/index.blade.php

@@ -1,31 +1,36 @@
 @extends('livewire-material::showcase.layout')
 
 @section('content')
-    <main class="mx-auto max-w-6xl space-y-16 px-4 py-10">
+    <div class="mx-auto w-full max-w-6xl space-y-12 px-4 pt-4 pb-16 sm:px-6">
-        <p class="max-w-3xl type-body-lg text-on-surface-variant">
+        <div class="max-w-3xl space-y-3">
-            Every token and component, in this application's own scheme.
+            <h1 class="type-headline-lg">Livewire Material</h1>
+            <p class="type-title-lg">Material 3 Expressive for Laravel and Livewire.</p>
+            <p class="type-body-lg text-on-surface-variant">
+                Every token and component, rendered in this application's own scheme and theme. Pick a section in the
+                navigation, search for one above (or press <kbd class="rounded-corner-xs bg-surface-container-highest px-1.5 type-label-md">/</kbd>), or start below.
             </p>
+        </div>
 
-        @include('livewire-material::showcase.sections.colour')
+        @foreach (collect($sections)->groupBy('group', preserveKeys: true) as $group => $entries)
-        @include('livewire-material::showcase.sections.type')
+            <section class="space-y-4" aria-labelledby="group-{{ \Illuminate\Support\Str::slug($group) }}">
-        @include('livewire-material::showcase.sections.shape')
+                <h2 id="group-{{ \Illuminate\Support\Str::slug($group) }}" class="type-title-lg">{{ $group }}</h2>
-        @include('livewire-material::showcase.sections.elevation')
+
-        @include('livewire-material::showcase.sections.motion')
+                <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
-        @include('livewire-material::showcase.sections.icons')
+                    @foreach ($entries as $key => $entry)
-        @include('livewire-material::showcase.sections.buttons')
+                        <x-livewire-material::card variant="outlined" data-list-row wire:key="section-{{ $key }}">
-        @include('livewire-material::showcase.sections.menus')
+                            <div class="flex items-start gap-4">
-        @include('livewire-material::showcase.sections.communication')
+                                <span class="grid size-12 shrink-0 place-items-center rounded-corner-lg bg-secondary-container text-on-secondary-container">
-        @include('livewire-material::showcase.sections.progress')
+                                    <x-livewire-material::icon :name="$entry['icon']" />
-        @include('livewire-material::showcase.sections.containment')
+                                </span>
-        @include('livewire-material::showcase.sections.carousel')
+                                <div class="min-w-0">
-        @include('livewire-material::showcase.sections.fields')
+                                    <a href="{{ route('livewire-material.section', $key) }}" wire:navigate data-list-open class="type-title-md">{{ $entry['title'] }}</a>
-        @include('livewire-material::showcase.sections.chips')
+                                    <p class="mt-1 type-body-md text-on-surface-variant">{{ $entry['description'] }}</p>
-        @include('livewire-material::showcase.sections.sliders')
+                                </div>
-        @include('livewire-material::showcase.sections.pickers')
+                            </div>
-        @include('livewire-material::showcase.sections.timepickers')
+                        </x-livewire-material::card>
-        @include('livewire-material::showcase.sections.bars')
+                    @endforeach
-        @include('livewire-material::showcase.sections.navigation')
+                </div>
-        @include('livewire-material::showcase.sections.data')
+            </section>
-        @include('livewire-material::showcase.sections.pages')
+        @endforeach
-    </main>
+    </div>
 @endsection

resources/views/showcase/layout.blade.php

@@ -1,47 +1,166 @@
+{{-- The showcase's frame, and the package's own app shell at work: the rail groups every section,
+     collapses and expands from `lg`, and opens as a modal from the app bar's menu button on a phone.
+     Pages move with wire:navigate, so the rail keeps its place and the theme stays. --}}
+
+@php
+    $sections ??= \NoNameWeb\LivewireMaterial\Showcase\Sections::all();
+    $section ??= null;
+    $title = $section !== null ? $sections[$section]['title'] : 'Livewire Material';
+
+    $destinations = [[
+        'title' => 'Overview',
+        'icon' => 'home',
+        'url' => route('livewire-material.showcase'),
+        'active' => $section === null,
+        'bar' => false,
+    ]];
+
+    foreach ($sections as $key => $entry) {
+        $destinations[] = [
+            'title' => $entry['title'],
+            'icon' => $entry['icon'],
+            'url' => route('livewire-material.section', $key),
+            'active' => $key === $section,
+            'section' => $entry['group'],
+            'bar' => false,
+        ];
+    }
+@endphp
+
 <!DOCTYPE html>
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
     <head>
         <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
         <meta name="robots" content="noindex" />
 
-        <title>@yield('title', 'Livewire Material')</title>
+        <title>{{ $section !== null ? $title.' · Livewire Material' : 'Livewire Material' }}</title>
 
         <x-livewire-material::theme-script />
 
         @vite(config('livewire-material.showcase.vite'))
         @livewireStyles
     </head>
-    <body class="min-h-screen bg-surface font-sans text-on-surface antialiased">
+    <body class="bg-surface font-sans text-on-surface antialiased">
-        <header class="sticky top-0 z-10 border-b border-divider bg-surface-container">
+        <x-livewire-material::app-shell :destinations="$destinations" label="Showcase" rail-width="17rem">
-            <div class="mx-auto flex max-w-6xl items-center gap-x-6 px-4 py-3">
+            <x-slot:brand>
-                <a href="{{ route('livewire-material.showcase') }}" class="shrink-0 type-title-lg max-sm:hidden">Livewire Material</a>
+                <a href="{{ route('livewire-material.showcase') }}" wire:navigate class="block truncate rounded-corner-xs type-title-lg focus-ring">Livewire Material</a>
+            </x-slot:brand>
 
-                <nav class="-my-2 flex min-w-0 flex-1 gap-x-4 overflow-x-auto py-2 whitespace-nowrap type-label-lg text-on-surface-variant [scrollbar-width:none]" aria-label="Sections">
+            <x-slot:top>
-                    @foreach (['colour' => 'Colour', 'type' => 'Type', 'shape' => 'Shape', 'elevation' => 'Elevation', 'motion' => 'Motion', 'icons' => 'Icons', 'buttons' => 'Buttons', 'menus' => 'Menus', 'communication' => 'Communication', 'progress' => 'Progress', 'containment' => 'Containment', 'carousel' => 'Carousel', 'fields' => 'Fields', 'chips' => 'Chips', 'sliders' => 'Sliders', 'pickers' => 'Date pickers', 'timepickers' => 'Time pickers', 'bars' => 'Bars', 'navigation' => 'Navigation', 'data' => 'Data', 'pages' => 'Pages'] as $anchor => $section)
+                <x-livewire-material::app-bar variant="search">
-                        <a href="#{{ $anchor }}" class="rounded-corner-xs hover:text-on-surface focus-ring">{{ $section }}</a>
+                    <x-slot:navigation>
-                    @endforeach
+                        <span class="sm:hidden"><x-livewire-material::button icon="menu" tooltip="Open navigation" x-data x-on:click="$store.rail.show()" data-test="showcase-menu" /></span>
-                </nav>
+                    </x-slot:navigation>
 
-                <div class="ms-auto flex shrink-0 rounded-corner-full border border-outline" role="group" aria-label="Theme" x-data x-cloak>
+                    {{-- The search looks through every section, example and component: the index is
-                    @foreach (['light' => 'Light', 'dark' => 'Dark', 'system' => 'System'] as $choice => $label)
+                         fetched on first focus, and / or Ctrl+K (⌘K) reaches it from anywhere. Its names
-                        <button
+                         keep clear of <x-search>'s own (`results`, `open`), which the slot also sees. --}}
-                            type="button"
+                    <div
-                            data-test="theme-{{ $choice }}"
+                        class="mx-auto w-full max-w-2xl"
-                            class="state-layer focus-ring px-4 py-1.5 type-label-lg first:rounded-s-corner-full last:rounded-e-corner-full"
+                        x-data="{
-                            x-on:click="$store.theme.set('{{ $choice }}')"
+                            query: '',
-                            x-bind:class="$store.theme.choice === '{{ $choice }}' && 'bg-secondary-container text-on-secondary-container'"
+                            entries: null,
-                            x-bind:aria-pressed="($store.theme.choice === '{{ $choice }}').toString()"
+                            async load() {
-                        >{{ $label }}</button>
+                                this.entries ??= await (await fetch(@js(route('livewire-material.search', [], false)))).json();
-                    @endforeach
+                            },
+                            get matches() {
+                                const words = this.query.toLowerCase().split(/\s+/).filter(Boolean);
+                                if (! this.entries || words.length === 0) return [];
+                                const phrase = words.join(' ');
+                                return this.entries
+                                    .map((entry) => {
+                                        const title = entry.title.toLowerCase().replace(/[<>]/g, '');
+                                        const text = `${title} ${entry.context} ${entry.kind} ${entry.keywords}`.toLowerCase();
+                                        if (! words.every((word) => text.includes(word))) return null;
+                                        const rank = title === phrase ? 0 : title.startsWith(phrase) ? 1 : title.includes(phrase) ? 2 : 3;
+                                        return { ...entry, rank };
+                                    })
+                                    .filter(Boolean)
+                                    .sort((a, b) => a.rank - b.rank)
+                                    .slice(0, 30);
+                            },
+                            go(event, result) {
+                                if (! result || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || (event.button ?? 0) !== 0) return;
+                                event.preventDefault();
+                                const url = new URL(result.url, window.location.href);
+                                const search = this.$root.querySelector('[data-search]');
+                                this.query = '';
+                                if (search) window.Alpine.$data(search).close();
+                                if (url.pathname === window.location.pathname) {
+                                    window.location.hash = url.hash;
+                                    document.getElementById(url.hash.slice(1))?.scrollIntoView({ block: 'start' });
+                                } else {
+                                    window.Livewire.navigate(url.pathname + url.hash);
+                                }
+                            },
+                            shortcut(event) {
+                                const typing = event.target.closest('input, textarea, select, [contenteditable]');
+                                if ((event.key === '/' && ! typing) || (event.key.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey))) {
+                                    event.preventDefault();
+                                    document.getElementById('showcase-search').focus();
+                                }
+                            },
+                        }"
+                        x-on:keydown.window="shortcut($event)"
+                    >
+                        <x-livewire-material::search
+                            id="showcase-search"
+                            placeholder="Search components, examples and sections"
+                            x-model="query"
+                            x-on:focus.once="load()"
+                            x-on:keydown.enter.prevent="go($event, matches[0])"
+                        >
+                            <p x-show="query.trim() === ''" class="px-4 py-3 type-body-md text-on-surface-variant">
+                                Type a component (<code>datepicker</code>), an example or a section. Press <kbd class="rounded-corner-xs bg-surface-container-highest px-1.5 type-label-md">/</kbd> to search from anywhere.
+                            </p>
+                            <p x-cloak x-show="query.trim() !== '' && entries !== null && matches.length === 0" class="px-4 py-3 type-body-md text-on-surface-variant">
+                                Nothing matches “<span x-text="query.trim()"></span>”.
+                            </p>
+                            <template x-for="result in matches" x-bind:key="result.url + result.title">
+                                <a
+                                    x-bind:href="result.url"
+                                    x-on:click="go($event, result)"
+                                    class="state-layer focus-ring flex min-h-14 flex-col justify-center px-4 py-2 outline-none"
+                                    data-showcase-result
+                                >
+                                    <span class="truncate type-body-lg text-on-surface" x-text="result.title"></span>
+                                    <span class="truncate type-body-sm text-on-surface-variant" x-text="`${result.kind} · ${result.context}`"></span>
+                                </a>
+                            </template>
+                        </x-livewire-material::search>
                     </div>
-            </div>
+
-        </header>
+                    <x-slot:actions>
+                        <span class="ms-2 me-3 max-md:hidden"><x-livewire-material::theme-toggle mode="picker" /></span>
+                        <span class="md:hidden"><x-livewire-material::theme-toggle mode="cycle" /></span>
+                    </x-slot:actions>
+                </x-livewire-material::app-bar>
+            </x-slot:top>
 
             @yield('content')
-
+        </x-livewire-material::app-shell>
-        <x-livewire-material::toast />
 
         @livewireScripts
+
+        {{-- wire:navigate keeps the URL's hash but not the scroll to it: a search result that opens an
+             example on another page lands on the example. --}}
+        <script data-navigate-once>
+            document.addEventListener('livewire:navigated', () => {
+                const target = () => (window.location.hash.length > 1 ? document.getElementById(decodeURIComponent(window.location.hash.slice(1))) : null);
+                const land = () => target()?.scrollIntoView({ block: 'start' });
+
+                // After the swap's own scroll to the top and the page transition, and once more when
+                // the page's components have settled their size.
+                requestAnimationFrame(() => requestAnimationFrame(land));
+                setTimeout(() => {
+                    const box = target()?.getBoundingClientRect();
+
+                    if (box && (box.top < 0 || box.top > window.innerHeight / 2)) {
+                        land();
+                    }
+                }, 400);
+            });
+        </script>
     </body>
 </html>

resources/views/showcase/section.blade.php

@@ -0,0 +1,36 @@
+{{-- One section of the showcase on a page of its own, with the way on to the next. The page's
+     heading names the section, so the section's own heading is only for a screen reader. --}}
+
+@extends('livewire-material::showcase.layout')
+
+@php
+    $keys = array_keys($sections);
+    $at = array_search($section, $keys, true);
+    $previous = $keys[$at - 1] ?? null;
+    $next = $keys[$at + 1] ?? null;
+@endphp
+
+@section('content')
+    <div class="mx-auto w-full max-w-6xl px-4 pt-4 pb-16 sm:px-6">
+        <header class="mb-6 space-y-1">
+            <p class="type-label-lg text-on-surface-variant">{{ $sections[$section]['group'] }}</p>
+            <h1 class="type-headline-lg">{{ $sections[$section]['title'] }}</h1>
+        </header>
+
+        <div class="space-y-16 [&>section>h2]:sr-only">
+            @include('livewire-material::showcase.sections.'.$section)
+
+            <nav aria-label="Sections" class="flex flex-wrap items-center justify-between gap-4 border-t border-divider pt-6">
+                @if ($previous)
+                    <x-livewire-material::button variant="text" icon="arrow_back" :label="$sections[$previous]['title']" :link="route('livewire-material.section', $previous)" data-test="previous-section" />
+                @else
+                    <x-livewire-material::button variant="text" icon="arrow_back" label="Overview" :link="route('livewire-material.showcase')" data-test="previous-section" />
+                @endif
+
+                @if ($next)
+                    <x-livewire-material::button variant="tonal" icon-right="arrow_forward" :label="$sections[$next]['title']" :link="route('livewire-material.section', $next)" data-test="next-section" />
+                @endif
+            </nav>
+        </div>
+    </div>
+@endsection

resources/views/showcase/sections/pickers.blade.php

@@ -1,9 +1,9 @@
 @php
     $examples = [
-        'docked' => <<<'BLADE'
+        'Docked' => <<<'BLADE'
             <div class="grid w-full gap-6 md:grid-cols-2" x-data="{ expires: '{{ now()->addWeek()->format('Y-m-d') }}', starts: null }">
                 <div class="grid content-start gap-4">
-                    <x-datepicker label="Expires on" x-model="expires" hint="Type a date or pick one" />
+                    <x-datepicker label="Expires on" clearable x-model="expires" hint="Type a date or pick one" />
                     <p class="type-body-sm text-on-surface-variant">Bound value: <code x-text="JSON.stringify(expires)"></code></p>
                 </div>
 
@@ -13,7 +13,7 @@
                 </div>
             </div>
             BLADE,
-        'modal and modal input' => <<<'BLADE'
+        'Modal and modal input' => <<<'BLADE'
             <div class="grid w-full gap-6 md:grid-cols-2" x-data="{ birthday: '1990-05-17', delivery: null }">
                 <div class="grid content-start gap-4">
                     <x-datepicker label="Birthday" mode="modal" x-model="birthday" :max="now()" />
@@ -26,7 +26,7 @@
                 </div>
             </div>
             BLADE,
-        'range' => <<<'BLADE'
+        'Range' => <<<'BLADE'
             <div class="grid w-full gap-6 md:grid-cols-2" x-data="{ trip: { start: '{{ now()->addDays(3)->format('Y-m-d') }}', end: '{{ now()->addDays(9)->format('Y-m-d') }}' }, leave: { start: null, end: null } }">
                 <div class="grid content-start gap-4">
                     <x-datepicker label="Trip" range x-model="trip" />
@@ -39,7 +39,7 @@
                 </div>
             </div>
             BLADE,
-        'limits, errors and states' => <<<'BLADE'
+        'Limits, errors and states' => <<<'BLADE'
             <div class="grid w-full gap-6 md:grid-cols-2">
                 <div class="grid content-start gap-4">
                     <x-datepicker label="Within the next 30 days" :min="now()" :max="now()->addDays(30)" hint="Days outside are disabled" />

resources/views/showcase/sections/timepickers.blade.php

@@ -1,6 +1,6 @@
 @php
     $examples = [
-        'Time pickers: 12 and 24 hours, outlined and filled' => <<<'BLADE'
+        '12 and 24 hours, outlined and filled' => <<<'BLADE'
             <div class="grid w-full gap-6 md:grid-cols-2">
                 <div class="grid content-start gap-4">
                     <x-timepicker label="Meeting starts" value="09:30" hint="The locale's clock" />
@@ -15,7 +15,7 @@
                 </div>
             </div>
             BLADE,
-        'Time pickers: steps and limits' => <<<'BLADE'
+        'Steps and limits' => <<<'BLADE'
             <div class="grid w-full gap-6 md:grid-cols-2">
                 <div class="grid content-start gap-4">
                     <x-timepicker label="Appointment" value="10:00" format="24" step="15" min="08:00" max="17:30" hint="Quarter hours from 08:00 to 17:30" />

resources/views/showcase/shell.blade.php

@@ -77,7 +77,7 @@
 
                 <div class="flex flex-wrap gap-2">
                     <x-livewire-material::button label="Show a toast" variant="tonal" x-data x-on:click="materialToast('Moved to archive', { action: { label: 'Undo', handler: () => {} } })" />
-                    <x-livewire-material::button label="Back to the showcase" link="{{ route('livewire-material.showcase') }}#navigation" no-wire-navigate />
+                    <x-livewire-material::button label="Back to the showcase" link="{{ route('livewire-material.section', 'navigation') }}" no-wire-navigate />
                 </div>
             </div>
         </x-livewire-material::app-shell>

routes/showcase.php

@@ -1,10 +1,12 @@
 <?php
 
 use Illuminate\Support\Facades\Route;
+use NoNameWeb\LivewireMaterial\Http\Controllers\ShowcaseController;
 use NoNameWeb\LivewireMaterial\Http\Controllers\ShowcasePageController;
 use NoNameWeb\LivewireMaterial\Http\Controllers\ShowcaseSymbolController;
+use NoNameWeb\LivewireMaterial\Showcase\Sections;
 
-Route::view('/', 'livewire-material::showcase.index')->name('showcase');
+Route::get('/', [ShowcaseController::class, 'index'])->name('showcase');
 
 Route::get('symbols.json', [ShowcaseSymbolController::class, 'index'])->name('symbols');
 Route::get('symbols/{style}/{name}.svg', [ShowcaseSymbolController::class, 'show'])->name('symbol');
@@ -17,3 +19,9 @@ Route::get('errors/{code}', [ShowcasePageController::class, 'error'])
     ->whereIn('code', ['401', '402', '403', '404', '419', '429', '500', '503'])
     ->name('error');
 Route::get('mail', [ShowcasePageController::class, 'mail'])->name('mail');
+
+Route::get('search.json', [ShowcaseController::class, 'search'])->name('search');
+
+Route::get('{section}', [ShowcaseController::class, 'section'])
+    ->whereIn('section', array_keys(Sections::all()))
+    ->name('section');

src/Http/Controllers/ShowcaseController.php

@@ -0,0 +1,34 @@
+<?php
+
+namespace NoNameWeb\LivewireMaterial\Http\Controllers;
+
+use Illuminate\Contracts\View\View;
+use Illuminate\Http\JsonResponse;
+use NoNameWeb\LivewireMaterial\Showcase\Sections;
+
+/**
+ * The showcase: an overview of every section, and a page for each.
+ */
+class ShowcaseController
+{
+    public function index(): View
+    {
+        return view('livewire-material::showcase.index', ['sections' => Sections::all()]);
+    }
+
+    public function section(string $section): View
+    {
+        return view('livewire-material::showcase.section', [
+            'sections' => Sections::all(),
+            'section' => $section,
+        ]);
+    }
+
+    /**
+     * The search's index, fetched when the search is first focused rather than written into every page.
+     */
+    public function search(): JsonResponse
+    {
+        return response()->json(Sections::index());
+    }
+}

src/Showcase/Sections.php

@@ -0,0 +1,108 @@
+<?php
+
+namespace NoNameWeb\LivewireMaterial\Showcase;
+
+use Illuminate\Support\Str;
+use NoNameWeb\LivewireMaterial\LivewireMaterialServiceProvider;
+
+/**
+ * The showcase's pages: one per section, grouped as the rail groups them.
+ */
+class Sections
+{
+    /**
+     * What the showcase's search looks through: every section, every example in it (linked to the
+     * example's anchor), and every component, linked to the first section that introduces it.
+     *
+     * @return list<array{title: string, kind: string, context: string, url: string, keywords: string}>
+     */
+    public static function index(): array
+    {
+        $sections = static::all();
+        $components = collect(glob(LivewireMaterialServiceProvider::componentPath().'/*.blade.php'))
+            ->map(fn (string $path): string => basename($path, '.blade.php'))
+            ->all();
+        $sources = collect($sections)->map(fn (array $section, string $key): string => (string) file_get_contents(static::path($key)));
+
+        $entries = [];
+        $homes = [];
+
+        foreach ($sections as $key => $section) {
+            $url = route('livewire-material.section', $key, false);
+
+            $entries[] = ['title' => $section['title'], 'kind' => 'Section', 'context' => $section['group'], 'url' => $url, 'keywords' => $section['description']];
+
+            preg_match_all("/^\\s*'((?:[^'\\\\]|\\\\.)*)'\\s*=>\\s*<<<'BLADE'/m", $sources[$key], $examples);
+
+            foreach ($examples[1] as $title) {
+                $title = stripslashes($title);
+                $entries[] = ['title' => $title, 'kind' => 'Example', 'context' => $section['title'], 'url' => $url.'#'.static::anchor($title), 'keywords' => ''];
+            }
+        }
+
+        // A section that names a component in its introduction is its home; otherwise the first that uses it.
+        foreach (['/&lt;x-([a-z0-9-]+)&gt;/', '/<x-(?:livewire-material::)?([a-z0-9-]+)(?=[\\s\\/>])/'] as $pattern) {
+            foreach ($sources as $key => $source) {
+                preg_match_all($pattern, $source, $tags);
+
+                foreach ($tags[1] as $tag) {
+                    if (in_array($tag, $components, true)) {
+                        $homes[$tag] ??= $key;
+                    }
+                }
+            }
+        }
+
+        foreach ($homes as $tag => $key) {
+            $entries[] = ['title' => "<x-{$tag}>", 'kind' => 'Component', 'context' => $sections[$key]['title'], 'url' => route('livewire-material.section', $key, false), 'keywords' => str_replace('-', ' ', $tag)];
+        }
+
+        return $entries;
+    }
+
+    /**
+     * The anchor of an example on its section's page.
+     */
+    public static function anchor(string $title): string
+    {
+        return 'example-'.Str::slug($title);
+    }
+
+    /**
+     * A section's view file.
+     */
+    public static function path(string $key): string
+    {
+        return dirname(__DIR__, 2).'/resources/views/showcase/sections/'.$key.'.blade.php';
+    }
+
+    /**
+     * @return array<string, array{title: string, icon: string, group: string, description: string}>
+     */
+    public static function all(): array
+    {
+        return [
+            'colour' => ['title' => 'Colour', 'icon' => 'palette', 'group' => 'Foundations', 'description' => 'Every colour role of the generated scheme, light and dark.'],
+            'type' => ['title' => 'Type', 'icon' => 'text_fields', 'group' => 'Foundations', 'description' => 'The typescale, emphasized styles included, in Google Sans Flex.'],
+            'shape' => ['title' => 'Shape', 'icon' => 'interests', 'group' => 'Foundations', 'description' => 'Corner radii and the 35 M3 Expressive shapes.'],
+            'elevation' => ['title' => 'Elevation', 'icon' => 'layers', 'group' => 'Foundations', 'description' => 'Shadows for what floats over content.'],
+            'motion' => ['title' => 'Motion', 'icon' => 'animation', 'group' => 'Foundations', 'description' => 'Spatial springs and effects easings.'],
+            'icons' => ['title' => 'Icons', 'icon' => 'emoji_symbols', 'group' => 'Foundations', 'description' => 'Every Material Symbol, searchable, outlined and filled.'],
+            'buttons' => ['title' => 'Buttons', 'icon' => 'smart_button', 'group' => 'Actions', 'description' => 'Buttons, icon buttons, groups, split buttons and FABs.'],
+            'menus' => ['title' => 'Menus', 'icon' => 'menu_open', 'group' => 'Actions', 'description' => 'Menus with items, groups, choices and shortcuts.'],
+            'chips' => ['title' => 'Chips', 'icon' => 'sell', 'group' => 'Actions', 'description' => 'Assist, filter, input and suggestion chips.'],
+            'communication' => ['title' => 'Communication', 'icon' => 'notifications', 'group' => 'Communication', 'description' => 'Badges, snackbars, tooltips, alerts, stats and empty states.'],
+            'progress' => ['title' => 'Progress', 'icon' => 'progress_activity', 'group' => 'Communication', 'description' => 'Linear, circular and wavy progress, and the loading indicator.'],
+            'containment' => ['title' => 'Containment', 'icon' => 'web_asset', 'group' => 'Containment', 'description' => 'Cards, lists, dividers, dialogs and sheets.'],
+            'carousel' => ['title' => 'Carousel', 'icon' => 'view_carousel', 'group' => 'Containment', 'description' => 'Multi-browse, hero, uncontained and full-screen carousels.'],
+            'fields' => ['title' => 'Text fields', 'icon' => 'edit_note', 'group' => 'Inputs', 'description' => 'Text fields, selects, checkboxes, radios, switches, choices and search.'],
+            'sliders' => ['title' => 'Sliders', 'icon' => 'tune', 'group' => 'Inputs', 'description' => 'Standard, centered and range sliders in five sizes.'],
+            'pickers' => ['title' => 'Date pickers', 'icon' => 'calendar_month', 'group' => 'Inputs', 'description' => 'Docked, modal and input date pickers, single and range.'],
+            'timepickers' => ['title' => 'Time pickers', 'icon' => 'schedule', 'group' => 'Inputs', 'description' => 'The dial and input time picker.'],
+            'bars' => ['title' => 'App bars and tabs', 'icon' => 'toolbar', 'group' => 'Navigation', 'description' => 'Top app bars, toolbars, tabs, section navigation and the account menu.'],
+            'navigation' => ['title' => 'Navigation', 'icon' => 'explore', 'group' => 'Navigation', 'description' => 'The navigation bar, the navigation rail and the app shell.'],
+            'data' => ['title' => 'Data', 'icon' => 'table_chart', 'group' => 'Data and pages', 'description' => 'Data tables, sort headers and pagination.'],
+            'pages' => ['title' => 'Error pages and mail', 'icon' => 'page_info', 'group' => 'Data and pages', 'description' => 'The HTTP error pages and the Markdown mail theme.'],
+        ];
+    }
+}

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/DatepickerTest.php

@@ -33,10 +33,10 @@ class DateProbe extends Component
                 <p>trip: <span id="trip">{{ json_encode($trip) }}</span></p>
                 <p>renders: <span id="renders">{{ $renders }}</span></p>
 
-                <x-datepicker id="expires-field" label="Expires" wire:model.live="expires" min="2026-09-10" max="2026-10-20" />
+                <x-datepicker id="expires-field" label="Expires" wire:model.live="expires" min="2026-09-10" max="2026-10-20" clearable />
                 <x-datepicker id="birthday-field" label="Birthday" mode="modal" wire:model.live="birthday" />
                 <x-datepicker id="delivery-field" label="Delivery" mode="input" wire:model.live="delivery" min="2026-01-01" />
-                <x-datepicker id="trip-field" label="Trip" range wire:model.live="trip" />
+                <x-datepicker id="trip-field" label="Trip" range wire:model.live="trip" clearable />
             </div>
             BLADE;
     }
@@ -296,3 +296,18 @@ it('opens a docked picker as a modal one on a compact window', function () {
         ->assertScript("document.querySelector('#expires-field-picker').matches(':modal')")
         ->assertScript("getComputedStyle(document.querySelector('#expires-field-picker [data-datepicker-header]')).display !== 'none'");
 });
+
+it('empties a date, or both ends of a range, with its clear button', function () {
+    $page = dateProbe()
+        ->assertScript("getComputedStyle(document.querySelector('#expires-field').closest('.field').querySelector('[data-field-clear]')).display !== 'none'");
+
+    $page->click('[data-datepicker]:has(#expires-field) [data-field-clear]')
+        ->assertScript("document.querySelector('#expires').textContent === ''")
+        ->assertValue('#expires-field', '')
+        ->assertScript("document.activeElement.id === 'expires-field'")
+        ->assertScript("getComputedStyle(document.querySelector('[data-datepicker]:has(#expires-field) [data-field-clear]')).display === 'none'");
+
+    $page->click('[data-datepicker]:has(#trip-field) [data-field-clear]')
+        ->assertSeeIn('#trip', '{"start":null,"end":null}')
+        ->assertValue('#trip-field', '');
+});

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,51 @@ 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();
+});
+
+it('finds a component from anywhere and opens its section', function () {
+    $page = visit('/material/buttons')->waitForEvent('networkidle')
+        ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
+
+    $page->keys('#content', '/')
+        ->assertScript("document.activeElement.id === 'showcase-search'");
+
+    $page->type('#showcase-search', 'datepicker')
+        ->assertSeeIn('[data-search-view]', '<x-datepicker>');
+
+    $page->keys('#showcase-search', 'Enter')
+        ->assertScript("location.pathname.endsWith('/material/pickers')")
+        ->assertScript("document.title === 'Date pickers · Livewire Material'");
+});
+
+it('opens an example on another page at the example', function () {
+    $page = visit('/material')->waitForEvent('networkidle')
+        ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
+
+    $page->click('#showcase-search')
+        ->type('#showcase-search', 'split button')
+        ->click('[data-showcase-result]:has-text("Example")')
+        ->assertScript("location.pathname.endsWith('/material/buttons') && location.hash.startsWith('#example-')")
+        ->assertScript('(() => { const box = document.getElementById(decodeURIComponent(location.hash.slice(1))).getBoundingClientRect(); return box.top >= 0 && box.top < innerHeight; })()');
+});
+
+it('says so when nothing matches', function () {
+    visit('/material')->waitForEvent('networkidle')
+        ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'")
+        ->click('#showcase-search')
+        ->type('#showcase-search', 'zzzz')
+        ->assertSeeIn('[data-search-view]', 'Nothing matches');
+});

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/Components/DatepickerTest.php

@@ -163,3 +163,12 @@ it('replaces the hint with the errors for the property and its start and end', f
         ->toContain('data-datepicker-error')
         ->and(substr_count($html, 'data-invalid=""'))->toBe(2);
 });
+
+it('offers a clear button on request', function () {
+    expect((string) $this->blade('<x-datepicker label="Expires" clearable />'))
+        ->toContain('data-field-clear')
+        ->toContain('x-on:click="clear()"')
+        ->toContain('aria-label="Clear"')
+        ->and((string) $this->blade('<x-datepicker label="Expires" />'))
+        ->not->toContain('data-field-clear');
+});

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,42 @@ 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('indexes every section, example and component for the search, each linking to a place that exists', function () {
+    $index = collect($this->getJson('/material/search.json')->assertOk()->json());
+
+    expect($index->where('kind', 'Section')->pluck('title')->all())
+        ->toBe(collect(Sections::all())->pluck('title')->all())
+        ->and($index->where('kind', 'Component')->pluck('title')->all())
+        ->toContain('<x-datepicker>', '<x-button>', '<x-app-shell>')
+        ->and($index->firstWhere('title', '<x-datepicker>')['url'])->toBe('/material/pickers');
+
+    $index->where('kind', 'Example')
+        ->groupBy(fn (array $entry): string => strtok($entry['url'], '#'))
+        ->each(function ($examples, string $page): void {
+            $html = $this->withoutVite()->get($page)->assertOk()->getContent();
+
+            foreach ($examples as $example) {
+                expect($html)->toContain('id="'.substr($example['url'], strpos($example['url'], '#') + 1).'"');
+            }
+        });
+});
+
 it('does not mount the showcase when disabled', function () {
     rebootWithShowcase(false);
 
@@ -77,7 +114,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();