From d5e2d1dff0289c2f3cd132b76515ffaea083edf0 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Wed, 26 Nov 2025 15:41:43 +0100
Subject: [PATCH 1/7] Iterate UI

---
 components/src/DesignTokens/Tokens.ts         |  2 +-
 .../GeocoderControl/GeocoderControl.svelte    | 23 ++++++++-----------
 .../src/maplibre/Map/Map.stories.svelte       |  2 +-
 components/src/maplibre/Map/Map.svelte        |  2 +-
 4 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/components/src/DesignTokens/Tokens.ts b/components/src/DesignTokens/Tokens.ts
index 7b4759af..b93c76b5 100644
--- a/components/src/DesignTokens/Tokens.ts
+++ b/components/src/DesignTokens/Tokens.ts
@@ -183,7 +183,7 @@ const semantics: ColourMap = {
 	},
 	surfaceHover: {
 		dark: '#0d0d0e',
-		light: '#ebebeb'
+		light: '#eee'
 	},
 	raisedSurfaceFill: {
 		dark: '#393a3b',
diff --git a/components/src/maplibre/GeocoderControl/GeocoderControl.svelte b/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
index 1aaf0aa8..ff2d4319 100644
--- a/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
+++ b/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
@@ -67,9 +67,7 @@
 			z-index: 1;
 			font-family: var(--swr-sans);
 			font-size: var(--fs-small-1);
-			border-radius: var(--br-small);
-			border: 1px solid var(--color-textSecondary);
-			box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.075);
+			border: 1px solid var(--color-textPrimary);
 
 			button {
 				cursor: pointer;
@@ -83,15 +81,14 @@
 		}
 
 		.maplibregl-ctrl-geocoder--input {
-			width: calc(100% - 3.7em);
 			height: 100%;
 			font-family: inherit;
 			font-size: inherit;
 			background-color: transparent;
 			color: var(--color-textPrimary);
 			border: 0;
-			height: 1.95em;
-			padding: 0 1.95em;
+			height: 2em;
+			padding: 0 1.85em;
 			padding-top: 0.1em;
 			text-overflow: ellipsis;
 			white-space: nowrap;
@@ -120,14 +117,12 @@
 		/* Suggestions */
 		.maplibregl-ctrl-geocoder .suggestions {
 			background: var(--color-surfaceFill);
-			border: 1px solid rgba(0, 0, 0, 0.75);
-			box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
-			border-radius: var(--br-small);
-			left: 0;
+			border: 1px solid var(--color-textPrimary);
+			left: -1px;
 			list-style: none;
 			position: absolute;
 			width: 100%;
-			top: calc(100% + 0.5em);
+			top: 100%;
 			z-index: 1000;
 			overflow: hidden;
 		}
@@ -199,7 +194,6 @@
 			position: absolute;
 			top: 50%;
 			transform: translateY(-50%);
-			height: 1em;
 			path {
 				fill: var(--color-textPrimary);
 			}
@@ -207,10 +201,13 @@
 
 		.maplibregl-ctrl-geocoder--icon-close {
 			right: 0;
+			height: 1.15em;
+			opacity: 0.5;
 		}
 		.maplibregl-ctrl-geocoder--icon-search {
 			left: 0.5em;
-			height: 1.5em;
+			height: 1.25em;
+			width: auto;
 		}
 	}
 </style>
diff --git a/components/src/maplibre/Map/Map.stories.svelte b/components/src/maplibre/Map/Map.stories.svelte
index a7815f2d..9ab91cd4 100644
--- a/components/src/maplibre/Map/Map.stories.svelte
+++ b/components/src/maplibre/Map/Map.stories.svelte
@@ -74,7 +74,7 @@
 			<Map style={SWRDataLabLight()}>
 				<ScaleControl />
 				<AttributionControl />
-				<NavigationControl showCompass visualizePitch />
+				<NavigationControl showCompass visualizePitch position="bottom-left" />
 				<GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
 			</Map>
 		</DesignTokens>
diff --git a/components/src/maplibre/Map/Map.svelte b/components/src/maplibre/Map/Map.svelte
index d5496465..8886d1b2 100644
--- a/components/src/maplibre/Map/Map.svelte
+++ b/components/src/maplibre/Map/Map.svelte
@@ -311,6 +311,7 @@
 		.maplibregl-ctrl-bottom-right {
 			bottom: 0.5em;
 			right: 0.5em;
+			align-items: flex-end;
 		}
 
 		.maplibregl-ctrl {
@@ -322,7 +323,6 @@
 			background: var(--color-surfaceFill);
 			border: 1px solid var(--color-textSecondary);
 			box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.075);
-			border-radius: var(--br-small);
 			overflow: hidden;
 		}
 

From 07bc289304c89a8cadce0980872d16b6c78d9272 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Wed, 26 Nov 2025 15:54:24 +0100
Subject: [PATCH 2/7] Iterate UI

---
 .../GeocoderControl/GeocoderControl.svelte       | 16 ++++++++--------
 components/src/maplibre/Map/Map.stories.svelte   |  8 ++++----
 components/src/maplibre/Map/Map.svelte           |  9 ++++++---
 .../maplibre/ScaleControl/ScaleControl.svelte    |  1 +
 4 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/components/src/maplibre/GeocoderControl/GeocoderControl.svelte b/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
index ff2d4319..eeaa116d 100644
--- a/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
+++ b/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
@@ -61,13 +61,13 @@
 <style lang="scss">
 	:global {
 		.maplibregl-ctrl-geocoder {
-			background-color: var(--color-surfaceFill);
+			background-color: var(--color-pageFill);
 			position: relative;
 			width: 100%;
 			z-index: 1;
 			font-family: var(--swr-sans);
-			font-size: var(--fs-small-1);
-			border: 1px solid var(--color-textPrimary);
+			font-size: var(--fs-base);
+			border: 1px solid var(--color-textSecondary);
 
 			button {
 				cursor: pointer;
@@ -116,8 +116,8 @@
 
 		/* Suggestions */
 		.maplibregl-ctrl-geocoder .suggestions {
-			background: var(--color-surfaceFill);
-			border: 1px solid var(--color-textPrimary);
+			background: var(--color-pageFill);
+			border: 1px solid var(--color-textSecondary);
 			left: -1px;
 			list-style: none;
 			position: absolute;
@@ -136,9 +136,9 @@
 		.maplibregl-ctrl-geocoder .suggestions > li > a {
 			cursor: default;
 			display: block;
-			padding: 0.5em 0.75em;
-			color: var(--gray-dark-5);
-			padding-bottom: 0.5em;
+			font-size: var(--fs-small-1);
+			padding: 0.7em 0.75em;
+			padding-bottom: 0.65em;
 			border-bottom: 1px solid var(--color-surfaceBorder);
 		}
 		.maplibregl-ctrl-geocoder .suggestions > li:last-child > a {
diff --git a/components/src/maplibre/Map/Map.stories.svelte b/components/src/maplibre/Map/Map.stories.svelte
index 9ab91cd4..11cf1c13 100644
--- a/components/src/maplibre/Map/Map.stories.svelte
+++ b/components/src/maplibre/Map/Map.stories.svelte
@@ -9,7 +9,7 @@
 	import AttributionControl from '../AttributionControl/AttributionControl.svelte';
 	import GeocoderControl from '../GeocoderControl/GeocoderControl.svelte';
 
-	import { SWRDataLabLight } from '../MapStyle';
+	import { SWRDataLabLight, SWRDataLabDark } from '../MapStyle';
 
 	import { eclipse } from '@versatiles/style';
 	import { MapContext } from '../context.svelte';
@@ -134,9 +134,9 @@
 
 <Story asChild name="Globe Projection">
 	<div class="container">
-		<DesignTokens theme="light">
+		<DesignTokens theme="dark">
 			<Map
-				style={SWRDataLabLight()}
+				style={SWRDataLabDark()}
 				showDebug
 				projection={{ type: 'globe' }}
 				pitch={52}
@@ -144,7 +144,7 @@
 			>
 				<ScaleControl />
 				<AttributionControl />
-				<NavigationControl showCompass visualizePitch />
+				<NavigationControl showCompass visualizePitch position="top-right" />
 				<GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
 			</Map>
 		</DesignTokens>
diff --git a/components/src/maplibre/Map/Map.svelte b/components/src/maplibre/Map/Map.svelte
index 8886d1b2..d0a72f43 100644
--- a/components/src/maplibre/Map/Map.svelte
+++ b/components/src/maplibre/Map/Map.svelte
@@ -299,8 +299,8 @@
 		}
 
 		.maplibregl-ctrl-top-right {
-			right: 0;
-			top: 0;
+			right: 0.5em;
+			top: 0.5em;
 		}
 
 		.maplibregl-ctrl-bottom-left {
@@ -320,7 +320,7 @@
 		}
 
 		.maplibregl-ctrl-group {
-			background: var(--color-surfaceFill);
+			background: var(--color-pageFill);
 			border: 1px solid var(--color-textSecondary);
 			box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.075);
 			overflow: hidden;
@@ -391,6 +391,9 @@
 		.maplibregl-marker path {
 			fill: var(--color-textPrimary);
 		}
+		.maplibregl-marker circle {
+			fill: var(--color-pageFill);
+		}
 		.maplibregl-cooperative-gesture-screen {
 			align-items: center;
 			font-family: var(--swr-sans);
diff --git a/components/src/maplibre/ScaleControl/ScaleControl.svelte b/components/src/maplibre/ScaleControl/ScaleControl.svelte
index 4e8ec9aa..1023a69c 100644
--- a/components/src/maplibre/ScaleControl/ScaleControl.svelte
+++ b/components/src/maplibre/ScaleControl/ScaleControl.svelte
@@ -21,6 +21,7 @@
 			font-weight: 400;
 			font-size: var(--fs-small-3);
 			font-family: var(--swr-text);
+			margin-bottom: 0.2em;
 		}
 	}
 </style>

From f66df99414f8baace4cef7f21b4c85c92d3b6380 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Wed, 26 Nov 2025 15:58:20 +0100
Subject: [PATCH 3/7] Remove clear button in chrome

---
 .../src/maplibre/GeocoderControl/GeocoderControl.svelte       | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/components/src/maplibre/GeocoderControl/GeocoderControl.svelte b/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
index eeaa116d..fe41c579 100644
--- a/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
+++ b/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
@@ -93,6 +93,10 @@
 			text-overflow: ellipsis;
 			white-space: nowrap;
 			overflow: hidden;
+			&::-webkit-search-cancel-button,
+			&::-webkit-search-decoration {
+				appearance: none;
+			}
 		}
 
 		.maplibregl-ctrl-geocoder--input::placeholder {

From f82bf9f134a98ca15452f44e9427f27823e565fa Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Wed, 26 Nov 2025 16:03:04 +0100
Subject: [PATCH 4/7] Tweak dark mode colours

---
 components/src/maplibre/MapStyle/SWRDataLabDark.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/src/maplibre/MapStyle/SWRDataLabDark.ts b/components/src/maplibre/MapStyle/SWRDataLabDark.ts
index a0899cc4..c69f1149 100644
--- a/components/src/maplibre/MapStyle/SWRDataLabDark.ts
+++ b/components/src/maplibre/MapStyle/SWRDataLabDark.ts
@@ -18,13 +18,13 @@ const tokens = {
 	sans_bold: ['SWR Sans Bold'],
 	background: {
 		stops: [
-			[8, 'hsl(210, 9%, 13%)'],
+			[8, 'hsl(210, 3%, 10%)'],
 			[10, '#1e1f22']
 		]
 	},
 	water: 'hsl(210, 12%, 7%)',
 	water_light: 'hsl(210, 12%, 8%)',
-	water_ocean: 'hsl(214, 25%, 7%)',
+	water_ocean: 'hsl(214, 5%, 5%)',
 	marsh: 'hsl(180, 3%, 35%)',
 	grass: 'hsl(170, 20%, 14%)',
 	grass_dark: 'hsl(170, 16%, 12%)',

From 83c02c4250e2a08443689bb4424ed56cf0401167 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Wed, 26 Nov 2025 16:08:57 +0100
Subject: [PATCH 5/7] Tweak spacing

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

diff --git a/components/src/maplibre/GeocoderControl/GeocoderControl.svelte b/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
index fe41c579..96d872d9 100644
--- a/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
+++ b/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
@@ -209,8 +209,9 @@
 			opacity: 0.5;
 		}
 		.maplibregl-ctrl-geocoder--icon-search {
-			left: 0.5em;
+			left: 0.45em;
 			height: 1.25em;
+			top: 52%; // optical correction
 			width: auto;
 		}
 	}

From 88499b8710e9a11a4d53e29533a06971499cebc4 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Wed, 26 Nov 2025 16:40:35 +0100
Subject: [PATCH 6/7] Tweak spacing

---
 components/src/DesignTokens/Tokens.ts                      | 2 +-
 .../GeocoderControl/GeocoderControl.stories.svelte         | 7 ++++++-
 .../src/maplibre/GeocoderControl/GeocoderControl.svelte    | 6 +++---
 components/src/maplibre/MapControl/MapControl.svelte       | 4 +---
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/components/src/DesignTokens/Tokens.ts b/components/src/DesignTokens/Tokens.ts
index b93c76b5..173aef18 100644
--- a/components/src/DesignTokens/Tokens.ts
+++ b/components/src/DesignTokens/Tokens.ts
@@ -182,7 +182,7 @@ const semantics: ColourMap = {
 		light: '#ffffff'
 	},
 	surfaceHover: {
-		dark: '#0d0d0e',
+		dark: '#121212',
 		light: '#eee'
 	},
 	raisedSurfaceFill: {
diff --git a/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte b/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte
index 73d68fdc..8cf86045 100644
--- a/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte
+++ b/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte
@@ -34,7 +34,12 @@
 	<DesignTokens theme="light">
 		<div class="container">
 			<Map style={SWRDataLabLight()} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
-				<GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
+				<GeocoderControl
+					size="large"
+					languages="de"
+					service="maptiler"
+					key="V32kPHZjMa0Mkn6YvSzA"
+				/>
 			</Map>
 		</div>
 	</DesignTokens>
diff --git a/components/src/maplibre/GeocoderControl/GeocoderControl.svelte b/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
index 96d872d9..dfb8cc2a 100644
--- a/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
+++ b/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
@@ -34,6 +34,7 @@
 		service = 'maptiler',
 		countries = 'de',
 		languages = 'en',
+		size = 'default',
 		placeholder,
 		limit = 3
 	}: GeocoderControlProps = $props();
@@ -89,7 +90,6 @@
 			border: 0;
 			height: 2em;
 			padding: 0 1.85em;
-			padding-top: 0.1em;
 			text-overflow: ellipsis;
 			white-space: nowrap;
 			overflow: hidden;
@@ -209,9 +209,9 @@
 			opacity: 0.5;
 		}
 		.maplibregl-ctrl-geocoder--icon-search {
-			left: 0.45em;
+			left: 0.4em;
 			height: 1.25em;
-			top: 52%; // optical correction
+			top: 51%; // optical correction
 			width: auto;
 		}
 	}
diff --git a/components/src/maplibre/MapControl/MapControl.svelte b/components/src/maplibre/MapControl/MapControl.svelte
index d21e79b2..6ea96462 100644
--- a/components/src/maplibre/MapControl/MapControl.svelte
+++ b/components/src/maplibre/MapControl/MapControl.svelte
@@ -35,7 +35,5 @@
 </script>
 
 <div bind:this={el} class={`maplibregl-ctrl ${className}`}>
-	{#if children}
-		{@render children()}
-	{/if}
+	{@render children?.()}
 </div>

From bc7a2ad429ad1af5985add3769de7e63c427ad1f Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Wed, 26 Nov 2025 16:41:20 +0100
Subject: [PATCH 7/7] Drop unused prop

---
 components/src/maplibre/GeocoderControl/GeocoderControl.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/src/maplibre/GeocoderControl/GeocoderControl.svelte b/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
index dfb8cc2a..55fe9437 100644
--- a/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
+++ b/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
@@ -34,7 +34,6 @@
 		service = 'maptiler',
 		countries = 'de',
 		languages = 'en',
-		size = 'default',
 		placeholder,
 		limit = 3
 	}: GeocoderControlProps = $props();