From 998fec2b0a780a20e1bc81d31097cba688cc69ec Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Fri, 19 Jun 2026 21:10:57 +0200
Subject: [PATCH] Build out feature

---
 .../maplibre/Geocoder/Geocoder.stories.svelte | 19 +++++++++++++++----
 .../src/maplibre/Geocoder/Geocoder.svelte     |  3 ++-
 .../src/maplibre/Geocoder/GeocoderProps.ts    |  1 +
 .../src/maplibre/Geocoder/geocoder.scss       | 12 ++++++++++++
 .../GeocoderControl/GeocoderControl.svelte    |  1 +
 5 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/components/src/maplibre/Geocoder/Geocoder.stories.svelte b/components/src/maplibre/Geocoder/Geocoder.stories.svelte
index 54d9b6d9..848f2939 100644
--- a/components/src/maplibre/Geocoder/Geocoder.stories.svelte
+++ b/components/src/maplibre/Geocoder/Geocoder.stories.svelte
@@ -1,7 +1,5 @@
 <script module lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { within, expect } from 'storybook/test';
-
 	import Geocoder from './Geocoder.svelte';
 	import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
 	import { SWRDataLabLight } from '../MapStyle';
@@ -19,8 +17,6 @@
 <Story
 	asChild
 	name="Default"
-	play={async ({ canvasElement, step }) => {
-	}}
 >
 	<DesignTokens theme="light">
 	<div class="container">
@@ -36,6 +32,21 @@
 	</div>
 	</DesignTokens>
 </Story>
+<Story
+	asChild
+	name="size=small"
+>
+	<DesignTokens theme="light">
+	<div class="container">
+			<Geocoder
+				languages="de"
+				size="small"
+				service="maptiler"
+				key="V32kPHZjMa0Mkn6YvSzA"
+		/>
+	</div>
+	</DesignTokens>
+</Story>
 
 <style>
   .container {
diff --git a/components/src/maplibre/Geocoder/Geocoder.svelte b/components/src/maplibre/Geocoder/Geocoder.svelte
index 7e3aac5a..7122de24 100644
--- a/components/src/maplibre/Geocoder/Geocoder.svelte
+++ b/components/src/maplibre/Geocoder/Geocoder.svelte
@@ -14,6 +14,7 @@
 		types = [],
 		placeholder,
 		limit = 3,
+		size = "default",
 		map,
 	}: GeocoderProps = $props();
 
@@ -53,7 +54,7 @@
 	}
 </script>
 
-<div class="container" {@attach attachGeocoder}></div>
+<div class={["container", size]} {@attach attachGeocoder}></div>
 
 <style lang="scss">
   @use "geocoder.scss"
diff --git a/components/src/maplibre/Geocoder/GeocoderProps.ts b/components/src/maplibre/Geocoder/GeocoderProps.ts
index c19633f4..8b1b2a71 100644
--- a/components/src/maplibre/Geocoder/GeocoderProps.ts
+++ b/components/src/maplibre/Geocoder/GeocoderProps.ts
@@ -34,4 +34,5 @@ export default interface GeocoderProps {
 		 * Overwrite the default input placeholder
 		 */
 		placeholder?: string;
+		size?: "small" | "default"
 	}
diff --git a/components/src/maplibre/Geocoder/geocoder.scss b/components/src/maplibre/Geocoder/geocoder.scss
index 91b7cd69..bceab6a6 100644
--- a/components/src/maplibre/Geocoder/geocoder.scss
+++ b/components/src/maplibre/Geocoder/geocoder.scss
@@ -8,6 +8,10 @@
 			font-size: var(--fs-base);
 			border: 1px solid var(--color-textSecondary);
 
+			.small & {
+			  font-size: var(--fs-small-1);
+			}
+
 			button {
 				cursor: pointer;
 			}
@@ -86,6 +90,10 @@
 			padding: 0.7em 0.75em;
 			padding-bottom: 0.65em;
 			border-bottom: 1px solid var(--color-surfaceBorder);
+			.small & {
+			  padding: 0.65em 0.7em;
+			padding-bottom: 0.6em;
+			}
 		}
 		.maplibregl-ctrl-geocoder .suggestions > li:last-child > a {
 			border-bottom: 0;
@@ -128,6 +136,10 @@
 			color: var(--color-textPrimary);
 			font-weight: 600;
 			letter-spacing: 0;
+			.small & {
+			  font-size: var(--fs-small-2);
+	  		letter-spacing: 0.01em;
+			}
 		}
 		.maplibregl-ctrl-geocoder--result-address {
 			font-size: var(--fs-small-2);
diff --git a/components/src/maplibre/GeocoderControl/GeocoderControl.svelte b/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
index 403e174b..49b66aa7 100644
--- a/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
+++ b/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
@@ -15,6 +15,7 @@
 		countries = 'de',
 		languages = 'en',
 		types = [],
+		size="default",
 		placeholder,
 		position = 'top-left',
 		limit = 3