diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index d9f9719f..99e97e92 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -21,7 +21,7 @@ jobs:
       - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
-          node-version: 24
+          node-version: 24.15.0
       - run: npm ci --workspace=components --include=dev
       - run: npm run sync --workspace=components
       - run: npm ci --workspace=mock-sveltekit
diff --git a/.github/workflows/test-storybook.yml b/.github/workflows/test-storybook.yml
index 5e500bf1..93110406 100644
--- a/.github/workflows/test-storybook.yml
+++ b/.github/workflows/test-storybook.yml
@@ -14,14 +14,15 @@ on:
 jobs:
   run-tests:
     runs-on: ubuntu-latest
+    timeout-minutes: 10
     defaults:
       run:
         working-directory: ./components
     steps:
-      - uses: actions/checkout@v6
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
-          node-version: 24
+          node-version: 24.15.0
       - run: npm ci
       - run: npx playwright install --with-deps
       - run: npm run sync
diff --git a/components/package.json b/components/package.json
index 70a87334..1da04504 100644
--- a/components/package.json
+++ b/components/package.json
@@ -64,7 +64,7 @@
 		"layercake": "^10.0.2",
 		"mdx-mermaid": "2.0.3",
 		"nodemon": "^3.1.11",
-		"playwright": "1.58.1",
+		"playwright": "1.60.0",
 		"publint": "0.3.17",
 		"sass": "1.93.2",
 		"sass-embedded": "1.97.3",
diff --git a/components/src/DesignTokens/DesignTokens.svelte b/components/src/DesignTokens/DesignTokens.svelte
index d8f32d23..69ba4ac9 100644
--- a/components/src/DesignTokens/DesignTokens.svelte
+++ b/components/src/DesignTokens/DesignTokens.svelte
@@ -62,6 +62,7 @@
 		--color-pageFill: var(--pageFill-light);
 		--color-surfaceFill: var(--surfaceFill-light);
 		--color-surfaceHover: var(--surfaceHover-light);
+		--color-raisedSurfaceFill: var(--raisedSurfaceFill-light);
 		--color-surfaceBorder: var(--surfaceBorder-light);
 		--color-dropShadow: var(--dropShadow-light);
 
@@ -70,6 +71,7 @@
 			--color-logoFillHover: var(--logoFillHover-dark);
 			--color-pageFill: var(--pageFill-dark);
 			--color-surfaceFill: var(--surfaceFill-dark);
+			--color-raisedSurfaceFill: var(--raisedSurfaceFill-dark);
 			--color-surfaceBorder: var(--surfaceBorder-dark);
 			--color-surfaceHover: var(--surfaceHover-dark);
 			--color-textPrimary: var(--textPrimary-dark);
diff --git a/components/src/DesignTokens/Tokens.ts b/components/src/DesignTokens/Tokens.ts
index 173aef18..5024943e 100644
--- a/components/src/DesignTokens/Tokens.ts
+++ b/components/src/DesignTokens/Tokens.ts
@@ -179,19 +179,19 @@ const semantics: ColourMap = {
 	},
 	surfaceFill: {
 		dark: '#222325',
-		light: '#ffffff'
+		light: '#fbfbfb'
 	},
 	surfaceHover: {
-		dark: '#121212',
-		light: '#eee'
+		dark: '#272830',
+		light: '#fdfdfd'
 	},
 	raisedSurfaceFill: {
 		dark: '#393a3b',
 		light: '#ffffff'
 	},
 	surfaceBorder: {
-		dark: 'rgba(255,255,255,.15)',
-		light: shades.gray.light3
+		dark: shades.gray.dark2,
+		light: shades.gray.light2
 	},
 	pageFill: {
 		dark: '#0C0C0C',
diff --git a/components/src/Switcher/Switcher.stories.svelte b/components/src/Switcher/Switcher.stories.svelte
index c7a6a7ae..58b19a2e 100644
--- a/components/src/Switcher/Switcher.stories.svelte
+++ b/components/src/Switcher/Switcher.stories.svelte
@@ -6,27 +6,50 @@
 
 	const { Story } = defineMeta({
 		title: 'Form/Switcher',
-		component: Switcher
+		component: Switcher,
+		parameters: {
+			layout: 'fullscreen'
+		}
 	});
 
 	const onChangeSpy = fn();
+	const dwIds = ['GjkbO', 'R5jey'];
+	let selectedDw = $state(dwIds[0]);
 </script>
 
 <Story name="Two Options" asChild>
 	<DesignTokens theme="auto">
-		<Switcher options={['Option A', 'Option B']} value="Option A" size="default" label="Label" />
+		<div class="container">
+			<Switcher options={['Option A', 'Option B']} value="Option A" size="default" label="Label" />
+		</div>
+	</DesignTokens>
+</Story>
+
+<Story name="Two Options, Centered Label" asChild>
+	<DesignTokens theme="auto">
+		<div class="container">
+			<Switcher
+				align="center"
+				options={['Option A', 'Option B']}
+				value="Option A"
+				size="default"
+				label="Label"
+			/>
+		</div>
 	</DesignTokens>
 </Story>
 
 <Story name="Hidden Label" asChild>
 	<DesignTokens theme="auto">
-		<Switcher
-			hideLabel
-			options={['Option A', 'Option B']}
-			value="Option A"
-			size="default"
-			label="Label"
-		/>
+		<div class="container">
+			<Switcher
+				hideLabel
+				options={['Option A', 'Option B']}
+				value="Option A"
+				size="default"
+				label="Label"
+			/>
+		</div>
 	</DesignTokens>
 </Story>
 
@@ -48,12 +71,14 @@
 	}}
 >
 	<DesignTokens theme="auto">
-		<Switcher
-			options={['Apples', 'Oranges', 'Bananas', 'Peaches']}
-			value="Oranges"
-			label="Label"
-			size="small"
-		/>
+		<div class="container">
+			<Switcher
+				options={['Apples', 'Oranges', 'Bananas', 'Peaches']}
+				value="Oranges"
+				label="Label"
+				size="small"
+			/>
+		</div>
 	</DesignTokens>
 </Story>
 
@@ -69,12 +94,14 @@
 	}}
 >
 	<DesignTokens theme="auto">
-		<Switcher
-			options={['Do not wrap', 'on mobile']}
-			value="Do not wrap"
-			label="Label"
-			layout="row"
-		/>
+		<div class="container">
+			<Switcher
+				options={['This switcher', 'will not wrap', 'on mobile']}
+				value="This switcher"
+				label="Label"
+				layout="row"
+			/>
+		</div>
 	</DesignTokens>
 </Story>
 
@@ -90,12 +117,14 @@
 	}}
 >
 	<DesignTokens theme="auto">
-		<Switcher
-			options={['Always wrap', 'even on', 'large screens']}
-			value="Always wrap"
-			label="Label"
-			layout="column"
-		/>
+		<div class="container">
+			<Switcher
+				options={['Always wrap', 'even on', 'large screens']}
+				value="Always wrap"
+				label="Label"
+				layout="column"
+			/>
+		</div>
 	</DesignTokens>
 </Story>
 <Story
@@ -114,12 +143,60 @@
 	}}
 >
 	<DesignTokens>
-		<Switcher
-			options={['Option A', 'Option B']}
-			value="Option A"
-			size="default"
-			label="Label"
-			onchange={onChangeSpy}
-		/>
+		<div class="container">
+			<Switcher
+				options={['Option A', 'Option B']}
+				value="Option A"
+				size="default"
+				label="Label"
+				onchange={onChangeSpy}
+			/>
+		</div>
 	</DesignTokens>
 </Story>
+
+<Story name="Datawrapper Switcher" asChild>
+	<DesignTokens theme="auto">
+		<div class="container">
+			<div class="datawrapper-switcher">
+				<Switcher
+					align="center"
+					options={dwIds}
+					size="small"
+					label="Land auswählen"
+					bind:value={selectedDw}
+				/>
+				{#each dwIds as id}
+					<div class="datawrapper-chart" class:active={id === selectedDw} style:height="600px">
+						<img src={`https://datawrapper.dwcdn.net/${id}/full.png`} />
+					</div>
+				{/each}
+			</div>
+		</div>
+	</DesignTokens>
+</Story>
+
+<style>
+	.container {
+		background: var(--color-pageFill);
+		padding: 5%;
+	}
+
+	.datawrapper-switcher {
+		display: flex;
+		align-items: center;
+		flex-flow: column;
+		gap: 1rem;
+		img {
+			display: block;
+			width: 40rem;
+		}
+	}
+
+	.datawrapper-chart {
+		display: none;
+	}
+	.active {
+		display: block;
+	}
+</style>
diff --git a/components/src/Switcher/Switcher.svelte b/components/src/Switcher/Switcher.svelte
index e114fced..3073b8fd 100644
--- a/components/src/Switcher/Switcher.svelte
+++ b/components/src/Switcher/Switcher.svelte
@@ -26,6 +26,7 @@
 		 * The currently-selected option (bindable)
 		 */
 		value: string | null;
+		align?: 'left' | 'center';
 		/**
 		 * Fired when the selected value changes (Prefer `value` if possible)
 		 */
@@ -38,6 +39,7 @@
 		size = 'default',
 		hideLabel = false,
 		layout = 'auto',
+		align = 'left',
 		value = $bindable(null),
 		onchange
 	}: SwitcherProps = $props();
@@ -50,27 +52,22 @@
 	}
 </script>
 
-<fieldset class="container" class:small={size === 'small'}>
-	<div class="legend" class:hidden={hideLabel}>
+<fieldset class={['container', size, align]}>
+	<div class={['legend', { hidden: hideLabel }]}>
 		<FormLabel as="legend">{label}</FormLabel>
 	</div>
-	<ul
-		class:layout-row={layout === 'row'}
-		class:layout-column={layout === 'column'}
-		class:layout-auto={layout === 'auto'}
-		role="list"
-	>
+	<ul class={`layout-${layout}`} role="list">
 		{#each options as o (o)}
 			<li class:is-selected={o === value}>
 				<label for={optionToID(o)}>
 					{o}
 				</label>
 				<input
+					bind:group={value}
 					id={optionToID(o)}
 					name={groupName}
 					value={o}
 					type="radio"
-					bind:group={value}
 					{onchange}
 				/>
 			</li>
@@ -84,6 +81,15 @@
 	fieldset {
 		border: 0;
 		font-family: var(--swr-sans);
+		display: flex;
+		flex-flow: column;
+
+		&.left {
+			align-items: flex-start;
+		}
+		&.center {
+			align-items: center;
+		}
 	}
 
 	.legend {
@@ -94,17 +100,11 @@
 	}
 
 	ul {
-		width: 100%;
-		display: flex;
+		display: inline-flex;
 		flex-direction: column;
-		overflow-x: auto;
-		padding: 0;
-		margin: 0;
-		border-top: 1px solid var(--color-textSecondary);
-		border-left: 1px solid var(--color-textSecondary);
+		margin-top: 0.25em;
 		color: var(--color-textPrimary);
-		background: var(--color-surfaceFill);
-		border-radius: var(--br-small);
+		gap: 0;
 
 		@media (min-width: base.$bp-s) {
 			flex-flow: row;
@@ -118,27 +118,17 @@
 	}
 	li {
 		display: contents;
-		&:last-child label {
-			border-bottom-right-radius: var(--br-small);
-		}
-		&:first-child label {
-			border-top-left-radius: var(--br-small);
-		}
 	}
 	input {
 		position: absolute;
 		left: -9999px;
 	}
-	.small label {
-		font-size: var(--fs-small-1);
-		height: 2em;
-		padding: 0 0.65em;
-	}
+
 	label {
 		font-size: var(--fs-base);
 		line-height: 1;
 		white-space: nowrap;
-		padding: 0 1em;
+		padding: 0 0.75em;
 		margin: 0;
 		cursor: pointer;
 		display: flex;
@@ -146,34 +136,47 @@
 		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;
+		user-select: none;
+		height: 2.15em;
+		border: 1px solid var(--color-surfaceBorder);
+		background: var(--color-surfaceFill);
+		margin-bottom: -1px;
 
 		@media (min-width: base.$bp-s) {
 			flex-basis: 0;
+			margin-bottom: 0;
+			margin-right: -1px;
+		}
+		&:hover,
+		&:focus-visible {
+			background: var(--color-surfaceHover);
 		}
 		.layout-row & {
 			flex-basis: 0;
 		}
 		.layout-column & {
 			flex-basis: auto;
+			margin-right: 0;
+			margin-bottom: -1px;
 		}
 		.is-selected & {
-			background: var(--color-surfaceHover);
+			transform: scale(1.125);
+			border: 1px solid var(--color-textSecondary);
+			box-shadow: 0 0 5px 1px var(--color-dropShadow);
+			background: var(--color-raisedSurfaceFill);
+			z-index: 100;
 			font-weight: 700;
-
-			@media (prefers-color-scheme: dark) {
-				background: var(--gray-dark-2);
-			}
+			border-radius: 2px;
 		}
-		&:hover,
-		&:focus-visible {
-			text-decoration: underline;
-			text-decoration-color: var(--color-textSecondary);
+		.small & {
+			font-size: var(--fs-small-1);
+			letter-spacing: 0.01em;
+			height: 2em;
+			padding: 0 0.7em;
+			padding-bottom: 0.025em;
+			.is-selected & {
+				transform: scale(1.1);
+			}
 		}
 	}
 </style>
diff --git a/components/src/SwrHeader/SwrHeader.svelte b/components/src/SwrHeader/SwrHeader.svelte
index bf0176b0..dbcb4c8d 100644
--- a/components/src/SwrHeader/SwrHeader.svelte
+++ b/components/src/SwrHeader/SwrHeader.svelte
@@ -30,7 +30,9 @@
 		showTextShadow = false
 	}: SwrHeaderProps = $props();
 
-	const updated_on = updated ? (updated instanceof Date ? updated : new Date(updated)) : null;
+	const updated_on = $derived(
+		updated ? (updated instanceof Date ? updated : new Date(updated)) : null
+	);
 </script>
 
 <header class="container" class:show-text-shadow={showTextShadow}>
diff --git a/package-lock.json b/package-lock.json
index 98672fb2..6e932c7b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -51,7 +51,7 @@
 				"layercake": "^10.0.2",
 				"mdx-mermaid": "2.0.3",
 				"nodemon": "^3.1.11",
-				"playwright": "1.58.1",
+				"playwright": "1.60.0",
 				"publint": "0.3.17",
 				"sass": "1.93.2",
 				"sass-embedded": "1.97.3",
@@ -19978,13 +19978,13 @@
 			}
 		},
 		"node_modules/playwright": {
-			"version": "1.58.1",
-			"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.1.tgz",
-			"integrity": "sha512-+2uTZHxSCcxjvGc5C891LrS1/NlxglGxzrC4seZiVjcYVQfUa87wBL6rTDqzGjuoWNjnBzRqKmF6zRYGMvQUaQ==",
+			"version": "1.60.0",
+			"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.60.0.tgz",
+			"integrity": "sha512-hheHdokM8cdqCb0lcE3s+zT4t4W+vvjpGxsZlDnikarzx8tSzMebh3UiFtgqwFwnTnjYQcsyMF8ei2mCO/tpeA==",
 			"dev": true,
 			"license": "Apache-2.0",
 			"dependencies": {
-				"playwright-core": "1.58.1"
+				"playwright-core": "1.60.0"
 			},
 			"bin": {
 				"playwright": "cli.js"
@@ -19997,9 +19997,9 @@
 			}
 		},
 		"node_modules/playwright-core": {
-			"version": "1.58.1",
-			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.1.tgz",
-			"integrity": "sha512-bcWzOaTxcW+VOOGBCQgnaKToLJ65d6AqfLVKEWvexyS3AS6rbXl+xdpYRMGSRBClPvyj44njOWoxjNdL/H9UNg==",
+			"version": "1.60.0",
+			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.60.0.tgz",
+			"integrity": "sha512-9bW6zvX/m0lEbgTKJ6YppOKx8H3VOPBMOCFh2irXFOT4BbHgrx5hPjwJYLT40Lu+4qtD36qKc/Hn56StUW57IA==",
 			"dev": true,
 			"license": "Apache-2.0",
 			"bin": {