Use shared form controls and enforce UI patterns (Refs #110)

src/lib/ui/components/CommandPalette.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import Field from '$ui/components/primitives/Field.svelte';
+    import Input from '$ui/components/primitives/Input.svelte';
     import { tick } from 'svelte';
     import { goto } from '$app/navigation';
     import type { UserRole } from '$lib/auth.js';
@@ -154,23 +156,24 @@
     description="Jump to a page, server, host, player, or match."
 >
     <div class="palette">
-        <label class="sr-only" for={`${id}-search`}>Search Electric Cherry</label>
-        <input
-            bind:this={input}
-            bind:value={query}
-            id={`${id}-search`}
-            type="search"
-            maxlength="100"
-            placeholder="Search Electric Cherry…"
-            role="combobox"
-            aria-autocomplete="list"
-            aria-expanded={open}
-            aria-controls={`${id}-results`}
-            aria-activedescendant={items.length ? `${id}-option-${activeIndex}` : undefined}
-            aria-describedby={`${id}-hint`}
-            autocomplete="off"
-            onkeydown={keydown}
-        />
+        <Field label="Search Electric Cherry" forId={`${id}-search`} hiddenLabel>
+            <Input
+                bind:element={input}
+                bind:value={query}
+                id={`${id}-search`}
+                type="search"
+                maxlength={100}
+                placeholder="Search Electric Cherry…"
+                role="combobox"
+                aria-autocomplete="list"
+                aria-expanded={open}
+                aria-controls={`${id}-results`}
+                aria-activedescendant={items.length ? `${id}-option-${activeIndex}` : undefined}
+                aria-describedby={`${id}-hint`}
+                autocomplete="off"
+                onkeydown={keydown}
+            /></Field
+        >
         <p class="hint" id={`${id}-hint`}>
             Try a lobby, player name, or #match number. <span>↑ ↓ to choose · Enter to open</span>
         </p>
@@ -228,17 +231,7 @@
         gap: var(--space-3);
         min-width: 0;
     }
-    input {
-        width: 100%;
-        min-height: 44px;
-        padding: var(--space-3);
-        font: inherit;
-        font-size: var(--text-base);
-        color: var(--text-primary);
-        background: var(--surface-sunken);
-        border: 1px solid var(--border-control);
-        border-radius: var(--radius-sm);
-    }
+
     .hint,
     .status,
     .error {
@@ -296,15 +289,4 @@
     .error {
         color: var(--state-warning);
     }
-    .sr-only {
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        padding: 0;
-        margin: -1px;
-        overflow: hidden;
-        clip-path: inset(50%);
-        white-space: nowrap;
-        border: 0;
-    }
 </style>