Draw the search without Tailwind

<x-search> renders data-md-search with data-md-trigger and binds
data-md-open and data-md-full-screen; its parts become data-md-search-*
and the empty row data-md-search-empty. search.css moves into
material.components on px, spacing and state tokens (plan step 36).
search.js and the showcase layout follow the renamed hooks.

Browser tests cover the polite result count as it changes, the icon
entry point expanding full screen and returning focus, and suggestions
swapping to results on the first key.

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

resources/views/showcase/layout.blade.php

@@ -84,7 +84,7 @@
                                 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]');
+                                const search = this.$root.querySelector('[data-md-search]');
                                 this.query = '';
                                 if (search) window.Alpine.$data(search).close();
                                 if (url.pathname === window.location.pathname) {