From 0203693d075a357f9931f76ecf8fd194fca6ac78 Mon Sep 17 00:00:00 2001
From: Stephanie Jauss <stephanie.jauss@swr.de>
Date: Mon, 22 Jun 2026 16:44:45 +0200
Subject: [PATCH 1/3] Add optional fuzzy search to searchable select component

---
 components/package.json                     |  1 +
 components/src/Select/Select.stories.svelte | 57 +++++++++++++++++++++
 components/src/Select/Select.svelte         | 40 +++++++++++++++
 package-lock.json                           | 14 +++++
 4 files changed, 112 insertions(+)

diff --git a/components/package.json b/components/package.json
index 78b59808..349f4bb5 100644
--- a/components/package.json
+++ b/components/package.json
@@ -36,6 +36,7 @@
 	"dependencies": {
 		"@maplibre/maplibre-gl-geocoder": "1.9.1",
 		"@maplibre/maplibre-gl-inspect": "1.7.1",
+		"fuse.js": "^7.4.2",
 		"maplibre-gl": "5.20.0",
 		"svelte-select": "5.8.3"
 	},
diff --git a/components/src/Select/Select.stories.svelte b/components/src/Select/Select.stories.svelte
index 882bcaa8..1835e1b0 100644
--- a/components/src/Select/Select.stories.svelte
+++ b/components/src/Select/Select.stories.svelte
@@ -183,6 +183,63 @@
 	</StoryTemplate>
 </Story>
 
+<Story
+	name="Fuzzy (custom items)"
+	asChild
+	play={async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+		const select = canvas.getByLabelText('Berufe');
+
+		await step('An exact title still selects that item with fuzzy enabled', async () => {
+			await userEvent.type(select, 'Tierpflege{enter}');
+			expect(selectedItem?.details.title).toEqual('Tierpflege');
+		});
+
+		await step('A typo in the title still matches the closest item', async () => {
+			await userEvent.type(select, 'Journlismus{enter}');
+			expect(selectedItem?.details.title).toEqual('Journalismus');
+		});
+
+		await step('A typo in the add-on still matches the closest item', async () => {
+			await userEvent.type(select, 'Hundetrener{enter}');
+			expect(selectedItem?.details.title).toEqual('Tierpflege');
+		});
+	}}
+>
+	<StoryTemplate>
+		{#snippet demoComponent()}
+			<FormLabel htmlFor="job-select">Berufe</FormLabel>
+			<Select
+				bind:value={selectedItem}
+				inputId="job-select"
+				placeholder="z.B. Taxifahrer/in"
+				fuzzy
+				items={jobsData
+					.sort((a, b) => a.label.localeCompare(b.label))
+					.map((item) => ({
+						value: item.value,
+						label: `${item.label}: ${item.add_on}`, // used for filtering
+						details: {
+							title: item.label, // used for display
+							addon: item.add_on // used for display
+						}
+					}))}
+				groupHeaderSelectable={false}
+			>
+				<div slot="item" let:item class="custom-item">
+					<h4 class="custom-item-title" data-testid="custom-item-title">
+						{item.details.title}
+					</h4>
+					<p class="custom-item-addon" data-testid="custom-item-addon">{item.details.addon}</p>
+				</div>
+				<div slot="selection" let:selection class="selection">
+					{selection.details.title}
+				</div>
+			</Select>
+		{/snippet}
+	</StoryTemplate>
+</Story>
+
 <style>
 	.custom-item {
 		font-size: 0.9rem;
diff --git a/components/src/Select/Select.svelte b/components/src/Select/Select.svelte
index 3104df9a..3e1c938a 100644
--- a/components/src/Select/Select.svelte
+++ b/components/src/Select/Select.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Select from 'svelte-select';
+	import Fuse from 'fuse.js';
 	import { type SelectItem } from './Select.types';
 
 	interface SelectProps {
@@ -24,6 +25,17 @@
 		 */
 		groupHeaderSelectable?: boolean;
 		clearable?: boolean;
+		/**
+		 * Enable fuzzy matching of the filter text against item labels (powered by Fuse.js).
+		 * When disabled (default), items are filtered with a plain case-insensitive substring match.
+		 */
+		fuzzy?: boolean;
+		/**
+		 * Fuse.js match tolerance (0 = exact, 1 = match anything). Lower is stricter.
+		 * Tune per dataset: short labels usually want a lower value than long, wordy ones.
+		 * Only applies when `fuzzy` is enabled.
+		 */
+		fuzzyThreshold?: number;
 		value: SelectItem | undefined;
 	}
 
@@ -34,10 +46,37 @@
 		groupBy,
 		groupHeaderSelectable = false,
 		clearable = true,
+		fuzzy = false,
+		fuzzyThreshold = 0.35,
 		value = $bindable(undefined)
 	}: SelectProps = $props();
 
 	const groupByFn = $derived(groupBy || ((item: SelectItem) => item.group as string));
+
+	// Index is rebuilt only when the option list or threshold changes, not on every keystroke.
+	const fuse = $derived(
+		fuzzy
+			? new Fuse(items, { keys: ['label'], threshold: fuzzyThreshold, ignoreLocation: true })
+			: null
+	);
+
+	// Replaces svelte-select's default substring matching with Fuse ranking
+	// (svelte-select handling of grouping untouched).
+	function fuzzyFilter({
+		filterText,
+		items: filterItems,
+		groupBy: groupByKey,
+		filterGroupedItems
+	}: {
+		filterText: string;
+		items: SelectItem[];
+		groupBy: unknown;
+		filterGroupedItems: (items: SelectItem[]) => SelectItem[];
+	}) {
+		const matched =
+			filterText && fuse ? fuse.search(filterText).map((result) => result.item) : filterItems;
+		return groupByKey ? filterGroupedItems(matched) : matched;
+	}
 </script>
 
 <div class="container">
@@ -48,6 +87,7 @@
 		{placeholder}
 		{groupHeaderSelectable}
 		{clearable}
+		filter={fuzzy ? fuzzyFilter : undefined}
 		class="container"
 		bind:value
 	>
diff --git a/package-lock.json b/package-lock.json
index 336af8e0..c8ec7beb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
 			"dependencies": {
 				"@maplibre/maplibre-gl-geocoder": "1.9.1",
 				"@maplibre/maplibre-gl-inspect": "1.7.1",
+				"fuse.js": "^7.4.2",
 				"maplibre-gl": "5.20.0",
 				"svelte-select": "5.8.3"
 			},
@@ -12852,6 +12853,19 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/fuse.js": {
+			"version": "7.4.2",
+			"resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.4.2.tgz",
+			"integrity": "sha512-LVbzjD4WA6UP5B1UnP8wuaXJiLnqMdM/E4fiJXTJ5haJ5b/MBNsK29h2fm6swEoQaVQjvYFWKLE2RanyZIoRVQ==",
+			"license": "Apache-2.0",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/krisk"
+			}
+		},
 		"node_modules/fuzzy": {
 			"version": "0.1.3",
 			"resolved": "https://registry.npmjs.org/fuzzy/-/fuzzy-0.1.3.tgz",

From 5cc5635fea46cfc3bdbbfc1f3f36eadb19796bff Mon Sep 17 00:00:00 2001
From: Stephanie Jauss <stephanie.jauss@swr.de>
Date: Mon, 22 Jun 2026 17:27:56 +0200
Subject: [PATCH 2/3] Select: Make default empty state German, allow custom
 empty message

---
 components/src/Select/Select.stories.svelte | 32 +++++++++++++++++++++
 components/src/Select/Select.svelte         | 16 +++++++++++
 2 files changed, 48 insertions(+)

diff --git a/components/src/Select/Select.stories.svelte b/components/src/Select/Select.stories.svelte
index 1835e1b0..d4033c7f 100644
--- a/components/src/Select/Select.stories.svelte
+++ b/components/src/Select/Select.stories.svelte
@@ -45,6 +45,11 @@
 			await userEvent.click(clearButton);
 			expect(selectedItem).toEqual(undefined);
 		});
+
+		await step('The default empty message is shown when nothing matches', async () => {
+			await userEvent.type(select, 'xyz');
+			expect(canvas.getByText('Keine Treffer')).toBeInTheDocument();
+		});
 	}}
 >
 	<StoryTemplate
@@ -61,6 +66,33 @@
 	/>
 </Story>
 
+<Story
+	name="Custom empty message"
+	asChild
+	play={async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+		const select = canvas.getByLabelText('Select');
+
+		await step('The custom empty message is shown when nothing matches', async () => {
+			await userEvent.type(select, 'Pizza');
+			expect(canvas.getByText('Keine passenden Eissorten')).toBeInTheDocument();
+		});
+	}}
+>
+	<StoryTemplate
+		bind:selectedItem
+		args={{
+			inputId: 'select',
+			emptyText: 'Keine passenden Eissorten',
+			items: [
+				{ value: 'vanilla', label: 'Vanille' },
+				{ value: 'chocolate', label: 'Schokolade' },
+				{ value: 'strawberry', label: 'Erdbeere' }
+			]
+		}}
+	/>
+</Story>
+
 <Story name="Grouped" asChild>
 	<StoryTemplate
 		bind:selectedItem
diff --git a/components/src/Select/Select.svelte b/components/src/Select/Select.svelte
index 3e1c938a..ff330ff9 100644
--- a/components/src/Select/Select.svelte
+++ b/components/src/Select/Select.svelte
@@ -36,6 +36,10 @@
 		 * Only applies when `fuzzy` is enabled.
 		 */
 		fuzzyThreshold?: number;
+		/**
+		 * Message shown in the dropdown when no items match the filter.
+		 */
+		emptyText?: string;
 		value: SelectItem | undefined;
 	}
 
@@ -48,6 +52,7 @@
 		clearable = true,
 		fuzzy = false,
 		fuzzyThreshold = 0.35,
+		emptyText = 'Keine Treffer',
 		value = $bindable(undefined)
 	}: SelectProps = $props();
 
@@ -101,6 +106,11 @@
 				{selection.label}
 			</slot>
 		</div>
+		<div class="empty" slot="empty">
+			<slot name="empty">
+				{emptyText}
+			</slot>
+		</div>
 	</Select>
 </div>
 
@@ -118,4 +128,10 @@
 		--item-hover-color: var(--color-textPrimary);
 		--selected-item-color: var(--color-textPrimary);
 	}
+
+	.empty {
+		text-align: var(--list-empty-text-align, center);
+		padding: var(--list-empty-padding, 20px 0);
+		color: var(--list-empty-color, #78848f);
+	}
 </style>

From a2fb69e00cfde965b6130e140bd2e1eeeb582faf Mon Sep 17 00:00:00 2001
From: Stephanie Jauss <stephanie.jauss@swr.de>
Date: Tue, 23 Jun 2026 08:31:11 +0200
Subject: [PATCH 3/3] Add missing dependency to mock-sveltekit

---
 mock-sveltekit/package.json | 1 +
 package-lock.json           | 1 +
 2 files changed, 2 insertions(+)

diff --git a/mock-sveltekit/package.json b/mock-sveltekit/package.json
index 9bb14a27..d3e9f00c 100644
--- a/mock-sveltekit/package.json
+++ b/mock-sveltekit/package.json
@@ -16,6 +16,7 @@
 	"dependencies": {
 		"@maplibre/maplibre-gl-geocoder": "1.9.1",
 		"@maplibre/maplibre-gl-inspect": "1.7.1",
+		"fuse.js": "7.4.2",
 		"maplibre-gl": "5.20.0",
 		"svelte-select": "5.8.3"
 	},
diff --git a/package-lock.json b/package-lock.json
index c8ec7beb..22ce41fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -314,6 +314,7 @@
 			"dependencies": {
 				"@maplibre/maplibre-gl-geocoder": "1.9.1",
 				"@maplibre/maplibre-gl-inspect": "1.7.1",
+				"fuse.js": "7.4.2",
 				"maplibre-gl": "5.20.0",
 				"svelte-select": "5.8.3"
 			},