Feat: FormLabel component

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;

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/>

components/src/FormLabel/FormLabel.stories.svelte

@@ -0,0 +1,50 @@
+<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';
+	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"
+	play={async ({ canvasElement, step }) => {
+		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();
+		});
+	}}
+>
+	<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>

components/src/FormLabel/FormLabel.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface FormLabelProps {
+		as?: string;
+		htmlFor?: string;
+		children?: Snippet;
+	}
+	let { as = 'label', htmlFor, children }: FormLabelProps = $props();
+</script>
+
+{#if as == 'legend'}
+	<legend class="container" data-testid="label-container">
+		{#if children}
+			{@render children()}
+		{/if}
+	</legend>
+{/if}
+{#if as == 'label'}
+	<label class="container" for={htmlFor} data-testid="label-container">
+		{#if children}
+			{@render children()}
+		{/if}
+	</label>
+{/if}
+
+<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>

components/src/FormLabel/index.ts

@@ -0,0 +1,2 @@
+import FormLabel from './FormLabel.svelte';
+export default FormLabel;

components/src/Input/Input.svelte

@@ -1,21 +1,20 @@
 <script lang="ts">
+	import FormLabel from '../FormLabel/FormLabel.svelte';
+
 	export let label: string = '';
 	export let name: string = '';
 	export let placeholder: string = '';
 	export let value: string = '';
 </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;
 	}

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"

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;

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}>
@@ -50,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;

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);