From 6b5ef92a52572e34e4d9e625fccb886f909bc3b0 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Thu, 8 May 2025 13:42:57 +0200
Subject: [PATCH 1/4] Block out FormLabel component

---
 components/src/FormLabel/FormLabel.mdx        | 13 ++++++++
 .../src/FormLabel/FormLabel.stories.svelte    | 33 +++++++++++++++++++
 components/src/FormLabel/FormLabel.svelte     | 26 +++++++++++++++
 components/src/FormLabel/index.ts             |  2 ++
 4 files changed, 74 insertions(+)
 create mode 100644 components/src/FormLabel/FormLabel.mdx
 create mode 100644 components/src/FormLabel/FormLabel.stories.svelte
 create mode 100644 components/src/FormLabel/FormLabel.svelte
 create mode 100644 components/src/FormLabel/index.ts

diff --git a/components/src/FormLabel/FormLabel.mdx b/components/src/FormLabel/FormLabel.mdx
new file mode 100644
index 00000000..6cc0776d
--- /dev/null
+++ b/components/src/FormLabel/FormLabel.mdx
@@ -0,0 +1,13 @@
+import { Story, Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
+ 
+import * as FormLabelStories from './FormLabel.stories.svelte';
+
+<Meta of={FormLabelStories}/>
+
+# Form Label
+
+Standard form label. The `htmlFor` prop is required to semantically link the label to the form element it describes. 
+
+<Controls  />
+
+<Stories/>
\ No newline at end of file
diff --git a/components/src/FormLabel/FormLabel.stories.svelte b/components/src/FormLabel/FormLabel.stories.svelte
new file mode 100644
index 00000000..87b67cf9
--- /dev/null
+++ b/components/src/FormLabel/FormLabel.stories.svelte
@@ -0,0 +1,33 @@
+<script context="module">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+
+	import FormLabel from './FormLabel.svelte';
+	import Select from '../Select/Select.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Form/Label'
+	});
+</script>
+
+<Story name="Default">
+	<DesignTokens>
+		<FormLabel htmlFor="">Deine Gemeinde</FormLabel>
+	</DesignTokens>
+</Story>
+
+<Story name="With Select">
+	<DesignTokens>
+		<FormLabel htmlFor="select-gemeinde">Deine Gemeinde</FormLabel>
+		<Select
+			inputId="select-gemeinde"
+			placeholder="..."
+			value={undefined}
+			items={[
+				{ value: 'konstanz', label: 'Konstanz' },
+				{ value: 'stuttgart', label: 'Stuttgart' },
+				{ value: 'heidelberg', label: 'Heidelberg' }
+			]}
+		></Select>
+	</DesignTokens>
+</Story>
diff --git a/components/src/FormLabel/FormLabel.svelte b/components/src/FormLabel/FormLabel.svelte
new file mode 100644
index 00000000..f08f982a
--- /dev/null
+++ b/components/src/FormLabel/FormLabel.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface FormLabelProps {
+		htmlFor: string;
+		children?: Snippet;
+	}
+	let { htmlFor, children }: FormLabelProps = $props();
+</script>
+
+<label class="container" for={htmlFor}>
+	{#if children}
+		{@render children()}
+	{/if}
+</label>
+
+<style>
+	.container {
+		font-family: var(--swr-text);
+		font-size: var(--fs-small-1);
+		font-weight: 400;
+		margin-bottom: 0.25em;
+		display: inline-block;
+		letter-spacing: 0.005em;
+	}
+</style>
diff --git a/components/src/FormLabel/index.ts b/components/src/FormLabel/index.ts
new file mode 100644
index 00000000..407b11b6
--- /dev/null
+++ b/components/src/FormLabel/index.ts
@@ -0,0 +1,2 @@
+import FormLabel from './FormLabel.svelte';
+export default FormLabel;

From da505c6ee46eddc5c4f2b6a459d1c6fa4456e341 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Thu, 8 May 2025 13:50:31 +0200
Subject: [PATCH 2/4] Replace existing labels with FormLabel

---
 .../src/Autocomplete/Autocomplete.svelte      |  3 ---
 components/src/FormLabel/FormLabel.svelte     | 24 +++++++++++++------
 components/src/Input/Input.svelte             |  7 +++---
 components/src/Select/Select.stories.svelte   |  3 ++-
 .../src/Select/SelectStoriesTemplate.svelte   |  8 ++-----
 components/src/Switcher/Switcher.svelte       |  4 +++-
 components/src/styles/base.scss               |  8 -------
 7 files changed, 27 insertions(+), 30 deletions(-)

diff --git a/components/src/Autocomplete/Autocomplete.svelte b/components/src/Autocomplete/Autocomplete.svelte
index 5e91e5dd..59b6c2eb 100644
--- a/components/src/Autocomplete/Autocomplete.svelte
+++ b/components/src/Autocomplete/Autocomplete.svelte
@@ -161,9 +161,6 @@ Data should be provided as array of objects. Each object contains the informatio
 		color: white;
 		display: flex;
 		flex-flow: column;
-		label {
-			@extend %form-label;
-		}
 
 		input {
 			@extend %form-input;
diff --git a/components/src/FormLabel/FormLabel.svelte b/components/src/FormLabel/FormLabel.svelte
index f08f982a..6869f877 100644
--- a/components/src/FormLabel/FormLabel.svelte
+++ b/components/src/FormLabel/FormLabel.svelte
@@ -2,17 +2,27 @@
 	import type { Snippet } from 'svelte';
 
 	interface FormLabelProps {
-		htmlFor: string;
+		as?: string;
+		htmlFor?: string;
 		children?: Snippet;
 	}
-	let { htmlFor, children }: FormLabelProps = $props();
+	let { as = 'label', htmlFor, children }: FormLabelProps = $props();
 </script>
 
-<label class="container" for={htmlFor}>
-	{#if children}
-		{@render children()}
-	{/if}
-</label>
+{#if as == 'legend'}
+	<legend class="container">
+		{#if children}
+			{@render children()}
+		{/if}
+	</legend>
+{/if}
+{#if as == 'label'}
+	<label class="container" for={htmlFor}>
+		{#if children}
+			{@render children()}
+		{/if}
+	</label>
+{/if}
 
 <style>
 	.container {
diff --git a/components/src/Input/Input.svelte b/components/src/Input/Input.svelte
index 151bf7f5..66b50edc 100644
--- a/components/src/Input/Input.svelte
+++ b/components/src/Input/Input.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import FormLabel from '../FormLabel/FormLabel.svelte';
+
 	export let label: string = '';
 	export let name: string = '';
 	export let placeholder: string = '';
@@ -6,16 +8,13 @@
 </script>
 
 <div class="container">
-	<label for={name}>{label}</label>
+	<FormLabel htmlFor={name}>{label}</FormLabel>
 	<input {name} type="text" {placeholder} bind:value />
 </div>
 
 <style lang="scss">
 	@use '../styles/base.scss';
 
-	label {
-		@extend %form-label;
-	}
 	input {
 		@extend %form-input;
 	}
diff --git a/components/src/Select/Select.stories.svelte b/components/src/Select/Select.stories.svelte
index 2a12b707..b92cf976 100644
--- a/components/src/Select/Select.stories.svelte
+++ b/components/src/Select/Select.stories.svelte
@@ -1,6 +1,7 @@
 <script context="module" lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import Select from './Select.svelte';
+	import FormLabel from '../FormLabel/FormLabel.svelte';
 	import StoryTemplate from './SelectStoriesTemplate.svelte';
 	import jobsData from './mock_data/jobs.json';
 
@@ -147,7 +148,7 @@
 >
 	<StoryTemplate>
 		{#snippet demoComponent()}
-			<label for="job-select">Berufe</label>
+			<FormLabel htmlFor="job-select">Berufe</FormLabel>
 			<Select
 				bind:value={selectedItem}
 				inputId="job-select"
diff --git a/components/src/Select/SelectStoriesTemplate.svelte b/components/src/Select/SelectStoriesTemplate.svelte
index b9454cdd..54954620 100644
--- a/components/src/Select/SelectStoriesTemplate.svelte
+++ b/components/src/Select/SelectStoriesTemplate.svelte
@@ -1,5 +1,6 @@
 <script>
 	import Select from './Select.svelte';
+	import FormLabel from '../FormLabel/FormLabel.svelte';
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 
 	let { args = null, selectedItem = $bindable(), demoComponent = null } = $props();
@@ -9,7 +10,7 @@
 	{#if demoComponent}
 		{@render demoComponent()}
 	{:else}
-		<label for={args.inputId}>Select</label>
+		<FormLabel htmlFor={args.inputId}>Select</FormLabel>
 		<Select {...args} bind:value={selectedItem} />
 	{/if}
 </DesignTokens>
@@ -20,11 +21,6 @@ value = {JSON.stringify(selectedItem, null, ' ')}</pre>
 {/if}
 
 <style>
-	label {
-		display: block;
-		font-family: var(--swr-sans);
-		margin-bottom: 0.25em;
-	}
 	.output {
 		display: block;
 		margin-top: 1rem;
diff --git a/components/src/Switcher/Switcher.svelte b/components/src/Switcher/Switcher.svelte
index 7a99c735..8a1a12b9 100644
--- a/components/src/Switcher/Switcher.svelte
+++ b/components/src/Switcher/Switcher.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import FormLabel from '../FormLabel/FormLabel.svelte';
+
 	interface SwitcherProps {
 		/**
 		 * Human-readable label
@@ -29,7 +31,7 @@
 </script>
 
 <fieldset class="container" class:small={size === 'small'}>
-	<legend>{label}</legend>
+	<FormLabel as="legend">{label}</FormLabel>
 	<ul>
 		{#each options as o (o)}
 			<li class:is-selected={o === value}>
diff --git a/components/src/styles/base.scss b/components/src/styles/base.scss
index a9a05184..92b9406b 100644
--- a/components/src/styles/base.scss
+++ b/components/src/styles/base.scss
@@ -7,14 +7,6 @@ $bp-l: 1024px;
 $bp-xl: 1440px;
 
 // TODO drop everything below
-%form-label {
-	font-family: var(--swr-sans);
-	font-size: 0.9rem;
-	line-height: 1;
-	letter-spacing: 0.0045em;
-	display: block;
-	margin-bottom: 0.5em;
-}
 
 %form-input {
 	font-family: var(--swr-sans);

From 4fd12bbd73b21c8ba24565d8494aa29a5d0e1cef Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Thu, 8 May 2025 14:05:47 +0200
Subject: [PATCH 3/4] Add test

---
 components/src/FormLabel/FormLabel.stories.svelte | 15 ++++++++++++++-
 components/src/FormLabel/FormLabel.svelte         |  4 ++--
 components/src/Switcher/Switcher.svelte           |  6 ------
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/components/src/FormLabel/FormLabel.stories.svelte b/components/src/FormLabel/FormLabel.stories.svelte
index 87b67cf9..4cfe9d89 100644
--- a/components/src/FormLabel/FormLabel.stories.svelte
+++ b/components/src/FormLabel/FormLabel.stories.svelte
@@ -1,5 +1,7 @@
 <script context="module">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { userEvent, within, expect } from 'storybook/test';
+
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 
 	import FormLabel from './FormLabel.svelte';
@@ -16,7 +18,18 @@
 	</DesignTokens>
 </Story>
 
-<Story name="With Select">
+<Story
+	name="With Select"
+	play={async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+		const label = canvas.getByTestId('label-container');
+		const input = canvas.getByPlaceholderText('...');
+		await step('Clicking the label focuses the input', async () => {
+			await userEvent.click(label);
+			expect(input).toHaveFocus();
+		});
+	}}
+>
 	<DesignTokens>
 		<FormLabel htmlFor="select-gemeinde">Deine Gemeinde</FormLabel>
 		<Select
diff --git a/components/src/FormLabel/FormLabel.svelte b/components/src/FormLabel/FormLabel.svelte
index 6869f877..4e1eb3b6 100644
--- a/components/src/FormLabel/FormLabel.svelte
+++ b/components/src/FormLabel/FormLabel.svelte
@@ -10,14 +10,14 @@
 </script>
 
 {#if as == 'legend'}
-	<legend class="container">
+	<legend class="container" data-testid="label-container">
 		{#if children}
 			{@render children()}
 		{/if}
 	</legend>
 {/if}
 {#if as == 'label'}
-	<label class="container" for={htmlFor}>
+	<label class="container" for={htmlFor} data-testid="label-container">
 		{#if children}
 			{@render children()}
 		{/if}
diff --git a/components/src/Switcher/Switcher.svelte b/components/src/Switcher/Switcher.svelte
index 8a1a12b9..73bed7cb 100644
--- a/components/src/Switcher/Switcher.svelte
+++ b/components/src/Switcher/Switcher.svelte
@@ -52,12 +52,6 @@
 		font-family: var(--swr-sans);
 	}
 
-	legend {
-		font-size: var(--fs-small-2);
-		font-weight: 500;
-		margin-bottom: 0.35em;
-	}
-
 	ul {
 		width: 100%;
 		display: flex;

From 6b4516889d7796253807f8487cdff9df82a891a5 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Fri, 9 May 2025 09:05:24 +0200
Subject: [PATCH 4/4] Add test

---
 components/src/FormLabel/FormLabel.stories.svelte | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/components/src/FormLabel/FormLabel.stories.svelte b/components/src/FormLabel/FormLabel.stories.svelte
index 4cfe9d89..1c7ac577 100644
--- a/components/src/FormLabel/FormLabel.stories.svelte
+++ b/components/src/FormLabel/FormLabel.stories.svelte
@@ -24,6 +24,10 @@
 		const canvas = within(canvasElement);
 		const label = canvas.getByTestId('label-container');
 		const input = canvas.getByPlaceholderText('...');
+		await step('Label renders children', async () => {
+			await userEvent.click(label);
+			expect(label).toHaveTextContent('Deine Gemeinde');
+		});
 		await step('Clicking the label focuses the input', async () => {
 			await userEvent.click(label);
 			expect(input).toHaveFocus();