From af5019ba917ca89c314de1240dfc5a1beb61b4ed Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Fri, 12 Sep 2025 10:05:41 +0200
Subject: [PATCH] Add prop, test

---
 .../src/Switcher/Switcher.stories.svelte      | 32 +++++++++++++++++--
 components/src/Switcher/Switcher.svelte       | 23 +++++++++++--
 2 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/components/src/Switcher/Switcher.stories.svelte b/components/src/Switcher/Switcher.stories.svelte
index 6b3f3aff..9ecdac7c 100644
--- a/components/src/Switcher/Switcher.stories.svelte
+++ b/components/src/Switcher/Switcher.stories.svelte
@@ -1,13 +1,15 @@
-<script context="module">
+<script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import Switcher from './Switcher.svelte';
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-	import { userEvent, within, expect } from 'storybook/test';
+	import { userEvent, within, expect, fn } from 'storybook/test';
 
 	const { Story } = defineMeta({
 		title: 'Form/Switcher',
 		component: Switcher
 	});
+
+	const onChangeSpy = fn();
 </script>
 
 <Story name="Two Options" asChild>
@@ -42,3 +44,29 @@
 		/>
 	</DesignTokens>
 </Story>
+
+<Story
+	name="onchange event"
+	asChild
+	play={async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+		await step('onchange handler is called', async () => {
+			const optionA = canvas.getByLabelText('Option A');
+			const optionB = canvas.getByLabelText('Option B');
+			await userEvent.click(optionB);
+			expect(onChangeSpy).toHaveBeenCalledTimes(1);
+			await userEvent.click(optionA);
+			expect(onChangeSpy).toHaveBeenCalledTimes(2);
+		});
+	}}
+>
+	<DesignTokens>
+		<Switcher
+			options={['Option A', 'Option B']}
+			value="Option A"
+			size="default"
+			label="Label"
+			onchange={onChangeSpy}
+		/>
+	</DesignTokens>
+</Story>
diff --git a/components/src/Switcher/Switcher.svelte b/components/src/Switcher/Switcher.svelte
index 0545eae0..7e64b94c 100644
--- a/components/src/Switcher/Switcher.svelte
+++ b/components/src/Switcher/Switcher.svelte
@@ -15,12 +15,22 @@
 		 */
 		size?: 'default' | 'small';
 		/**
-		 * The currently-selected option
+		 * The currently-selected option (bindable)
 		 */
 		value: string | null;
+		/**
+		 * Fired when the selected value changes (Prefer `value` if possible)
+		 */
+		onchange?: (e: Event) => void;
 	}
 
-	let { label, options, size = 'default', value = $bindable(null) }: SwitcherProps = $props();
+	let {
+		label,
+		options,
+		size = 'default',
+		value = $bindable(null),
+		onchange
+	}: SwitcherProps = $props();
 
 	const groupId = $props.id();
 	const groupName = 'select-' + groupId;
@@ -38,7 +48,14 @@
 				<label for={optionToID(o)}>
 					{o}
 				</label>
-				<input id={optionToID(o)} name={groupName} value={o} type="radio" bind:group={value} />
+				<input
+					id={optionToID(o)}
+					name={groupName}
+					value={o}
+					type="radio"
+					bind:group={value}
+					{onchange}
+				/>
 			</li>
 		{/each}
 	</ul>