From 12b94c4c45878b39396f5c0b062dec88d574310e Mon Sep 17 00:00:00 2001
From: Simon Jockers <449739+sjockers@users.noreply.github.com>
Date: Wed, 4 Feb 2026 14:07:16 +0100
Subject: [PATCH 1/5] Add `forceRow` option, preventing wrapping on small
 screens

---
 .../src/Switcher/Switcher.stories.svelte      | 17 +++++++++
 components/src/Switcher/Switcher.svelte       | 36 +++++++++++++++----
 2 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/components/src/Switcher/Switcher.stories.svelte b/components/src/Switcher/Switcher.stories.svelte
index 1fbb77e9..a6c534a2 100644
--- a/components/src/Switcher/Switcher.stories.svelte
+++ b/components/src/Switcher/Switcher.stories.svelte
@@ -57,6 +57,23 @@
 	</DesignTokens>
 </Story>
 
+<Story
+	name="Force row (inline) layout"
+	asChild
+	play={async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+		console.log(canvas);
+		await step('Options are displayed in a row', async () => {
+			const list = canvas.getByRole('list');
+			expect(list.classList).toContain('force-row');
+		});
+	}}
+>
+	<DesignTokens theme="light">
+		<Switcher options={['Do not wrap', 'on mobile']} value="Do not wrap" label="Label" forceRow />
+	</DesignTokens>
+</Story>
+
 <Story
 	name="onchange event"
 	asChild
diff --git a/components/src/Switcher/Switcher.svelte b/components/src/Switcher/Switcher.svelte
index b917c8a1..2fc2a8a9 100644
--- a/components/src/Switcher/Switcher.svelte
+++ b/components/src/Switcher/Switcher.svelte
@@ -14,7 +14,14 @@
 		 * Display size
 		 */
 		size?: 'default' | 'small';
+		/**
+		 * Hide the main label visually
+		 */
 		hideLabel?: boolean;
+		/**
+		 * Force the options to be displayed in a row (even on small screens)
+		 */
+		forceRow?: boolean;
 		/**
 		 * The currently-selected option (bindable)
 		 */
@@ -30,6 +37,7 @@
 		options,
 		size = 'default',
 		hideLabel = false,
+		forceRow = false,
 		value = $bindable(null),
 		onchange
 	}: SwitcherProps = $props();
@@ -46,7 +54,7 @@
 	<div class="legend" class:hidden={hideLabel}>
 		<FormLabel as="legend">{label}</FormLabel>
 	</div>
-	<ul>
+	<ul class:force-row={forceRow}>
 		{#each options as o (o)}
 			<li class:is-selected={o === value}>
 				<label for={optionToID(o)}>
@@ -95,6 +103,11 @@
 		@media (min-width: base.$bp-s) {
 			flex-flow: row;
 		}
+
+		&.force-row {
+			flex-flow: row;
+			overflow-x: auto;
+		}
 	}
 	li {
 		display: contents;
@@ -127,24 +140,33 @@
 		text-underline-offset: 0.1em;
 		border-right: 1px solid var(--color-textSecondary);
 		height: 2.25em;
-		@media (min-width: base.$bp-s) {
+
+		@mixin row-labels {
 			justify-content: center;
 			padding: 0 1em;
 			flex-basis: 0;
 			flex-grow: 1;
 			border-bottom: 0;
+			height: 2.5em;
 		}
+
 		@media (min-width: base.$bp-s) {
-			height: 2.5em;
+			@include row-labels;
 		}
-		&:hover,
-		&:focus-visible {
-			text-decoration: underline;
-			text-decoration-color: var(--color-textSecondary);
+
+		.force-row & {
+			@include row-labels;
 		}
+
 		.is-selected & {
 			background: var(--color-surfaceHover);
 			font-weight: 700;
 		}
+
+		&:hover,
+		&:focus-visible {
+			text-decoration: underline;
+			text-decoration-color: var(--color-textSecondary);
+		}
 	}
 </style>

From 103d347dc7b33844dc6560da28fc0a9d3a8ee40b Mon Sep 17 00:00:00 2001
From: Simon Jockers <449739+sjockers@users.noreply.github.com>
Date: Wed, 4 Feb 2026 14:11:54 +0100
Subject: [PATCH 2/5] On mobile, add borders between options

---
 components/src/Switcher/Switcher.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/src/Switcher/Switcher.svelte b/components/src/Switcher/Switcher.svelte
index 2fc2a8a9..af23dafb 100644
--- a/components/src/Switcher/Switcher.svelte
+++ b/components/src/Switcher/Switcher.svelte
@@ -138,14 +138,15 @@
 		position: relative;
 		transition: var(--fast);
 		text-underline-offset: 0.1em;
-		border-right: 1px solid var(--color-textSecondary);
 		height: 2.25em;
+		border-bottom: 1px solid var(--color-textSecondary);
 
 		@mixin row-labels {
 			justify-content: center;
 			padding: 0 1em;
 			flex-basis: 0;
 			flex-grow: 1;
+			border-right: 1px solid var(--color-textSecondary);
 			border-bottom: 0;
 			height: 2.5em;
 		}

From d9850e4c38fafe548c94d1a2d01d33140596ac10 Mon Sep 17 00:00:00 2001
From: Simon Jockers <449739+sjockers@users.noreply.github.com>
Date: Wed, 4 Feb 2026 16:05:55 +0100
Subject: [PATCH 3/5] Change layout setting (`row`/`column`/`auto`)

---
 .../src/Switcher/Switcher.stories.svelte      | 32 ++++++++++-
 components/src/Switcher/Switcher.svelte       | 56 ++++++++++---------
 2 files changed, 58 insertions(+), 30 deletions(-)

diff --git a/components/src/Switcher/Switcher.stories.svelte b/components/src/Switcher/Switcher.stories.svelte
index a6c534a2..561cbf44 100644
--- a/components/src/Switcher/Switcher.stories.svelte
+++ b/components/src/Switcher/Switcher.stories.svelte
@@ -58,22 +58,48 @@
 </Story>
 
 <Story
-	name="Force row (inline) layout"
+	name="Force row layout"
 	asChild
 	play={async ({ canvasElement, step }) => {
 		const canvas = within(canvasElement);
 		console.log(canvas);
 		await step('Options are displayed in a row', async () => {
 			const list = canvas.getByRole('list');
-			expect(list.classList).toContain('force-row');
+			expect(list.classList).toContain('layout-row');
 		});
 	}}
 >
 	<DesignTokens theme="light">
-		<Switcher options={['Do not wrap', 'on mobile']} value="Do not wrap" label="Label" forceRow />
+		<Switcher
+			options={['Do not wrap', 'on mobile']}
+			value="Do not wrap"
+			label="Label"
+			layout="row"
+		/>
 	</DesignTokens>
 </Story>
 
+<Story
+	name="Force column layout"
+	asChild
+	play={async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+		console.log(canvas);
+		await step('Options are displayed in a row', async () => {
+			const list = canvas.getByRole('list');
+			expect(list.classList).toContain('layout-column');
+		});
+	}}
+>
+	<DesignTokens theme="light">
+		<Switcher
+			options={['Always wrap', 'even on', 'large screens']}
+			value="Always wrap"
+			label="Label"
+			layout="column"
+		/>
+	</DesignTokens>
+</Story>
 <Story
 	name="onchange event"
 	asChild
diff --git a/components/src/Switcher/Switcher.svelte b/components/src/Switcher/Switcher.svelte
index af23dafb..ecddc93d 100644
--- a/components/src/Switcher/Switcher.svelte
+++ b/components/src/Switcher/Switcher.svelte
@@ -21,7 +21,7 @@
 		/**
 		 * Force the options to be displayed in a row (even on small screens)
 		 */
-		forceRow?: boolean;
+		layout?: 'row' | 'column' | 'auto' = 'auto';
 		/**
 		 * The currently-selected option (bindable)
 		 */
@@ -37,7 +37,7 @@
 		options,
 		size = 'default',
 		hideLabel = false,
-		forceRow = false,
+		layout = 'auto',
 		value = $bindable(null),
 		onchange
 	}: SwitcherProps = $props();
@@ -54,7 +54,12 @@
 	<div class="legend" class:hidden={hideLabel}>
 		<FormLabel as="legend">{label}</FormLabel>
 	</div>
-	<ul class:force-row={forceRow}>
+	<ul
+		class:layout-row={layout === 'row'}
+		class:layout-column={layout === 'column'}
+		class:layout-auto={layout === 'auto'}
+		role="list"
+	>
 		{#each options as o (o)}
 			<li class:is-selected={o === value}>
 				<label for={optionToID(o)}>
@@ -92,10 +97,11 @@
 		width: 100%;
 		display: flex;
 		flex-direction: column;
-		overflow: hidden;
+		overflow-x: auto;
 		padding: 0;
 		margin: 0;
-		border: 1px solid var(--color-textSecondary);
+		border-top: 1px solid var(--color-textSecondary);
+		border-left: 1px solid var(--color-textSecondary);
 		color: var(--color-textPrimary);
 		background: var(--color-surfaceFill);
 		border-radius: var(--br-small);
@@ -103,17 +109,20 @@
 		@media (min-width: base.$bp-s) {
 			flex-flow: row;
 		}
-
-		&.force-row {
+		&.layout-row {
 			flex-flow: row;
-			overflow-x: auto;
+		}
+		&.layout-column {
+			flex-direction: column;
 		}
 	}
 	li {
 		display: contents;
 		&:last-child label {
-			border-right: 0;
-			border-bottom: 0;
+			border-bottom-right-radius: var(--br-small);
+		}
+		&:first-child label {
+			border-top-left-radius: var(--br-small);
 		}
 	}
 	input {
@@ -130,40 +139,33 @@
 		line-height: 1;
 		white-space: nowrap;
 		padding: 0 1em;
-		cursor: pointer;
 		margin: 0;
-		align-items: center;
+		cursor: pointer;
 		display: flex;
+		justify-content: center;
+		align-items: center;
 		color: currentColor;
 		position: relative;
 		transition: var(--fast);
 		text-underline-offset: 0.1em;
 		height: 2.25em;
+		border-right: 1px solid var(--color-textSecondary);
 		border-bottom: 1px solid var(--color-textSecondary);
+		flex-grow: 1;
 
-		@mixin row-labels {
-			justify-content: center;
-			padding: 0 1em;
+		@media (min-width: base.$bp-s) {
 			flex-basis: 0;
-			flex-grow: 1;
-			border-right: 1px solid var(--color-textSecondary);
-			border-bottom: 0;
-			height: 2.5em;
 		}
-
-		@media (min-width: base.$bp-s) {
-			@include row-labels;
+		.layout-row & {
+			flex-basis: 0;
 		}
-
-		.force-row & {
-			@include row-labels;
+		.layout-column & {
+			flex-basis: auto;
 		}
-
 		.is-selected & {
 			background: var(--color-surfaceHover);
 			font-weight: 700;
 		}
-
 		&:hover,
 		&:focus-visible {
 			text-decoration: underline;

From 005762fadda92be9ab763a0a60a3432a17ab0de3 Mon Sep 17 00:00:00 2001
From: Simon Jockers <449739+sjockers@users.noreply.github.com>
Date: Wed, 4 Feb 2026 16:18:21 +0100
Subject: [PATCH 4/5] Slightly more contrast between options in dark mode

---
 components/src/Switcher/Switcher.stories.svelte | 10 +++++-----
 components/src/Switcher/Switcher.svelte         |  4 ++++
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/components/src/Switcher/Switcher.stories.svelte b/components/src/Switcher/Switcher.stories.svelte
index 561cbf44..64c85962 100644
--- a/components/src/Switcher/Switcher.stories.svelte
+++ b/components/src/Switcher/Switcher.stories.svelte
@@ -13,13 +13,13 @@
 </script>
 
 <Story name="Two Options" asChild>
-	<DesignTokens theme="light">
+	<DesignTokens theme="auto">
 		<Switcher options={['Option A', 'Option B']} value="Option A" size="default" label="Label" />
 	</DesignTokens>
 </Story>
 
 <Story name="Hidden Label" asChild>
-	<DesignTokens theme="light">
+	<DesignTokens theme="auto">
 		<Switcher
 			hideLabel
 			options={['Option A', 'Option B']}
@@ -47,7 +47,7 @@
 		});
 	}}
 >
-	<DesignTokens theme="light">
+	<DesignTokens theme="auto">
 		<Switcher
 			options={['Apples', 'Oranges', 'Bananas', 'Peaches']}
 			value="Oranges"
@@ -69,7 +69,7 @@
 		});
 	}}
 >
-	<DesignTokens theme="light">
+	<DesignTokens theme="auto">
 		<Switcher
 			options={['Do not wrap', 'on mobile']}
 			value="Do not wrap"
@@ -91,7 +91,7 @@
 		});
 	}}
 >
-	<DesignTokens theme="light">
+	<DesignTokens theme="auto">
 		<Switcher
 			options={['Always wrap', 'even on', 'large screens']}
 			value="Always wrap"
diff --git a/components/src/Switcher/Switcher.svelte b/components/src/Switcher/Switcher.svelte
index ecddc93d..5b475fdb 100644
--- a/components/src/Switcher/Switcher.svelte
+++ b/components/src/Switcher/Switcher.svelte
@@ -165,6 +165,10 @@
 		.is-selected & {
 			background: var(--color-surfaceHover);
 			font-weight: 700;
+
+			@media (prefers-color-scheme: dark) {
+				background: var(--gray-dark-2);
+			}
 		}
 		&:hover,
 		&:focus-visible {

From 4d0d7853ae2c4ac07ea08478515191c47358a077 Mon Sep 17 00:00:00 2001
From: Simon Jockers <449739+sjockers@users.noreply.github.com>
Date: Wed, 4 Feb 2026 16:43:43 +0100
Subject: [PATCH 5/5] Remove default from type description, not valid syntax
 apparently

---
 components/src/Switcher/Switcher.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/src/Switcher/Switcher.svelte b/components/src/Switcher/Switcher.svelte
index 5b475fdb..e114fced 100644
--- a/components/src/Switcher/Switcher.svelte
+++ b/components/src/Switcher/Switcher.svelte
@@ -21,7 +21,7 @@
 		/**
 		 * Force the options to be displayed in a row (even on small screens)
 		 */
-		layout?: 'row' | 'column' | 'auto' = 'auto';
+		layout?: 'row' | 'column' | 'auto';
 		/**
 		 * The currently-selected option (bindable)
 		 */