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

src/lib/ui/components/capacity/RebalancePanel.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+    import Input from '$ui/components/primitives/Input.svelte';
+    import Select from '$ui/components/primitives/Select.svelte';
+    import Field from '$ui/components/primitives/Field.svelte';
     import { onMount, untrack } from 'svelte';
     import type {
         RebalancePreview,
@@ -254,15 +257,15 @@
                         {/each}
                     </div>
                     <div class="settings">
-                        <label
-                            >Game<select bind:value={game} onchange={editSettings}
+                        <Field label="Game">
+                            <Select bind:value={game} onchange={editSettings}
                                 ><option value="all">All games</option><option value="t5"
                                     >Black Ops I</option
-                                ><option value="t6">Black Ops II</option></select
-                            ></label
+                                ><option value="t6">Black Ops II</option></Select
+                            ></Field
                         >
-                        <label
-                            >Maximum moves<input
+                        <Field class="max-moves" label="Maximum moves">
+                            <Input
                                 type="number"
                                 min="1"
                                 max="20"
@@ -270,7 +273,7 @@
                                 required
                                 bind:value={maxMoves}
                                 oninput={editSettings}
-                            /></label
+                            /></Field
                         >
                         <Button
                             type="submit"
@@ -301,16 +304,20 @@
         <section class="runs" aria-labelledby="rebalance-runs-title">
             <div class="heading">
                 <h3 id="rebalance-runs-title">Rebalance runs</h3>
-                {#if report.runs.length}<label class="run-picker"
-                        ><span class="sr-only">Select rebalance run</span><select
+                {#if report.runs.length}<Field
+                        class="run-picker"
+                        hiddenLabel
+                        label="Select rebalance run"
+                    >
+                        <Select
                             value={run?.id ?? ''}
                             onchange={(event) => (selectedRun = event.currentTarget.value)}
                             >{#each report.runs as item (item.id)}<option value={item.id}
                                     >{$timeFormat.dateTime(item.createdAt)} · {rebalanceRunLabels[
                                         item.state
                                     ]}</option
-                                >{/each}</select
-                        ></label
+                                >{/each}</Select
+                        ></Field
                     >{/if}
             </div>
             {#if preferredRun && !report.runs.some((item) => item.id === preferredRun)}<p
@@ -422,37 +429,18 @@
         opacity: 0.65;
         cursor: default;
     }
+    .settings > :global(.max-moves) {
+        width: 110px;
+    }
     .settings {
         justify-content: flex-start;
         align-items: end;
     }
-    .settings label {
-        display: grid;
-        gap: 8px;
-        font-size: var(--text-xs);
-    }
-    .settings input {
-        width: 110px;
-    }
-    select,
-    input[type='number'] {
-        box-sizing: border-box;
-        padding: 9px 12px;
-        color: var(--text-primary);
-        background: var(--surface-sunken);
-        border: 1px solid var(--border-control);
-        border-radius: var(--radius-sm);
-        font: var(--text-sm) var(--font-body);
-        min-width: 0;
-    }
-    input:disabled,
-    select:disabled {
+
+    input:disabled {
         opacity: 0.6;
     }
-    .run-picker {
-        max-width: 100%;
-    }
-    .run-picker select {
+    .heading :global(.run-picker) {
         max-width: 100%;
     }
     .runs {
@@ -490,19 +478,11 @@
         text-decoration: underline;
     }
     button:focus-visible,
-    input:focus-visible,
-    select:focus-visible {
+    input:focus-visible {
         outline: 2px solid var(--accent-primary);
         outline-offset: 3px;
     }
-    .sr-only {
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        overflow: hidden;
-        clip-path: inset(50%);
-        white-space: nowrap;
-    }
+
     @media (max-width: 600px) {
         .panel {
             padding: 16px;