Unify UI workflows and streamline fleet management

src/lib/ui/components/primitives/Field.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import type { Snippet } from 'svelte';
+    import { setContext, type Snippet } from 'svelte';
+    import { fieldContext, type FieldContext } from '../../field-context.js';
 
     interface Props {
         label?: string;
@@ -11,22 +12,28 @@
     }
 
     let { label, hint = null, error = null, required = false, forId, children }: Props = $props();
+    const id = $props.id();
+    setContext<FieldContext>(fieldContext, {
+        get labelId() { return `${id}-label`; },
+        get messageId() { return error || hint ? `${id}-message` : undefined; },
+        get invalid() { return !!error; }
+    });
 </script>
 
 <div class="field">
     {#if label}
-        <label class="label" for={forId}>
+        <svelte:element this={forId ? 'label' : 'div'} class="label" id={`${id}-label`} for={forId}>
             {label}
             {#if required}<span class="req" aria-hidden="true">*</span>{/if}
-        </label>
+        </svelte:element>
     {/if}
     <div class="control" class:has-error={!!error}>
         {@render children?.()}
     </div>
     {#if error}
-        <div class="msg msg-error" role="alert">{error}</div>
+        <div id={`${id}-message`} class="msg msg-error" role="alert">{error}</div>
     {:else if hint}
-        <div class="msg msg-hint">{hint}</div>
+        <div id={`${id}-message`} class="msg msg-hint">{hint}</div>
     {/if}
 </div>
 
@@ -40,9 +47,7 @@
     .label {
         font-size: var(--text-xs);
         font-weight: var(--weight-semibold);
-        text-transform: uppercase;
-        letter-spacing: var(--tracking-label);
-        color: var(--text-tertiary);
+        color: var(--text-secondary);
     }
     .req { color: var(--state-danger); margin-left: 3px; }
     .control { display: flex; flex-direction: column; }