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

src/routes/leaderboard/+page.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+    import Field from '$ui/components/primitives/Field.svelte';
+    import Input from '$ui/components/primitives/Input.svelte';
+    import Select from '$ui/components/primitives/Select.svelte';
     import RelativeTime from '$ui/components/RelativeTime.svelte';
     let { data: initial }: { data: import('./$types').PageData } = $props();
     import { onMount, untrack } from 'svelte';
@@ -262,9 +265,8 @@
 
     {#snippet filterFields(suffix: string)}
         <div class="filters">
-            <div class="field">
-                <label for={`leaderboard-game${suffix}`}>Game</label>
-                <select
+            <Field label="Game" forId={`leaderboard-game${suffix}`}>
+                <Select
                     id={`leaderboard-game${suffix}`}
                     value={game}
                     onchange={(event) =>
@@ -273,11 +275,10 @@
                     <option value="">All games</option>{#each games as item (item.key)}<option
                             value={item.key}>{item.label}</option
                         >{/each}
-                </select>
-            </div>
-            <div class="field">
-                <label for={`leaderboard-map${suffix}`}>Map</label>
-                <select
+                </Select>
+            </Field>
+            <Field label="Map" forId={`leaderboard-map${suffix}`}>
+                <Select
                     id={`leaderboard-map${suffix}`}
                     value={map}
                     onchange={(event) => updateFilters({ map: event.currentTarget.value })}
@@ -291,11 +292,10 @@
                                 ? ` · ${item.game === 't5' ? 'BO1' : 'BO2'}`
                                 : ''}</option
                         >{/each}
-                </select>
-            </div>
-            <div class="field">
-                <label for={`leaderboard-players${suffix}`}>Players</label>
-                <select
+                </Select>
+            </Field>
+            <Field label="Players" forId={`leaderboard-players${suffix}`}>
+                <Select
                     id={`leaderboard-players${suffix}`}
                     value={players}
                     onchange={(event) => updateFilters({ players: event.currentTarget.value })}
@@ -304,14 +304,13 @@
                     <option value="">All squad sizes</option>{#each squadSizes as size}<option
                             value={size.key}>{size.label}</option
                         >{/each}
-                </select><span id={`players-help${suffix}`} class="sr-only"
+                </Select><span id={`players-help${suffix}`} class="sr-only"
                     >Players recorded at the start of each match. Matches with unknown starting
                     counts appear only under All squad sizes.</span
                 >
-            </div>
-            <div class="field">
-                <label for={`leaderboard-metric${suffix}`}>Rank by</label>
-                <select
+            </Field>
+            <Field label="Rank by" forId={`leaderboard-metric${suffix}`}>
+                <Select
                     id={`leaderboard-metric${suffix}`}
                     value={metric}
                     onchange={(event) => updateFilters({ metric: event.currentTarget.value })}
@@ -319,8 +318,8 @@
                     {#each leaderboardMetrics as item (item.key)}<option value={item.key}
                             >{item.label}</option
                         >{/each}
-                </select>
-            </div>
+                </Select>
+            </Field>
             <form
                 class="search"
                 onsubmit={(event) => {
@@ -330,15 +329,16 @@
                 }}
                 role="search"
             >
-                <label for={`leaderboard-search${suffix}`}>Find a player</label>
-                <input
-                    id={`leaderboard-search${suffix}`}
-                    type="search"
-                    bind:value={search}
-                    maxlength="100"
-                    placeholder="Name or GUID"
-                    aria-describedby={`search-help${suffix}`}
-                /><span id={`search-help${suffix}`} class="sr-only"
+                <Field label="Find a player" forId={`leaderboard-search${suffix}`}>
+                    <Input
+                        id={`leaderboard-search${suffix}`}
+                        type="search"
+                        bind:value={search}
+                        maxlength={100}
+                        placeholder="Name or GUID"
+                        aria-describedby={`search-help${suffix}`}
+                    /></Field
+                ><span id={`search-help${suffix}`} class="sr-only"
                     >Press Enter to search. Player ranks are preserved.</span
                 >
             </form>
@@ -700,7 +700,6 @@
     .search {
         grid-column: 1 / -1;
     }
-    .field,
     .search {
         display: flex;
         flex-direction: column;
@@ -712,12 +711,10 @@
         font-size: var(--text-xs);
     }
     input,
-    select,
     button {
         font: inherit;
     }
-    input,
-    select {
+    input {
         min-height: 42px;
         width: 100%;
         padding: 9px 12px;