From 35c93dddf00c1759fc8876ea55b87d2d555c50df Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 23 Sep 2026 18:41:13 +0200
Subject: [PATCH] web/ui: let fields label a group and take a snippet subtitle

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/ui/Field.svelte | 34 ++++++++++++++++++--------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/web/src/lib/components/ui/Field.svelte b/web/src/lib/components/ui/Field.svelte
index e92a36461..d75d7493f 100644
--- a/web/src/lib/components/ui/Field.svelte
+++ b/web/src/lib/components/ui/Field.svelte
@@ -27,8 +27,9 @@
 
 	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class" | "children"> {
 		label?: string;
-		subtitle?: string;
+		subtitle?: string | Snippet;
 		for?: string;
+		group?: boolean;
 		required?: boolean;
 		labelCase?: FieldVariants["labelCase"];
 		class?: string;
@@ -39,6 +40,7 @@
 		label,
 		subtitle,
 		for: forId,
+		group = false,
 		required = false,
 		labelCase,
 		class: className,
@@ -48,20 +50,32 @@
 
 	const generatedId = $props.id();
 	const id = $derived(forId ?? generatedId);
+	const labelId = $derived(`${id}-label`);
 	const slot = $derived(field({ labelCase }));
 </script>
 
-<div class={slot.root({ class: className })} {...rest}>
-	{#if label}
-		<label for={id} class={slot.label()}>
-			{label}
-			{#if required}
-				<span class="text-foreground-danger">*</span>
-			{/if}
-		</label>
+{#snippet labelText()}
+	{label}
+	{#if required}
+		<span class="text-foreground-danger">*</span>
+	{/if}
+{/snippet}
+
+<div
+	class={slot.root({ class: className })}
+	role={group ? "group" : undefined}
+	aria-labelledby={group && label ? labelId : undefined}
+	{...rest}
+>
+	{#if label && group}
+		<span id={labelId} class={slot.label()}>{@render labelText()}</span>
+	{:else if label}
+		<label for={id} class={slot.label()}>{@render labelText()}</label>
 	{/if}
 	{@render children({ id })}
-	{#if subtitle}
+	{#if typeof subtitle === "function"}
+		<p class={slot.subtitle()}>{@render subtitle()}</p>
+	{:else if subtitle}
 		<p class={slot.subtitle()}>{subtitle}</p>
 	{/if}
 </div>
-- 
2.51.2