@swr-data-lab/components 1.12.3 → 1.12.5

package/package.json

@@ -67,7 +67,7 @@
 			"svelte": "./src/index.js"
 		}
 	},
-	"version": "1.12.3",
+	"version": "1.12.5",
 	"overrides": {
 		"storybook": "$storybook"
 	}

package/src/maplibre/GeocoderControl/GeocoderControl.svelte

@@ -68,7 +68,7 @@
 			font-size: var(--fs-small-1);
 			border-radius: var(--br-small);
 			border: 1px solid rgba(0, 0, 0, 0.75);
-			box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
+			box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.075);
 		}
 
 		.maplibre-gl-geocoder--error {
@@ -85,7 +85,7 @@
 			background-color: transparent;
 			color: var(--gray-dark-5);
 			border: 0;
-			height: 2em;
+			height: 1.85em;
 			padding: 0 1.85em;
 			padding-top: 0.1em;
 			text-overflow: ellipsis;
@@ -93,8 +93,12 @@
 			overflow: hidden;
 		}
 
+		.maplibregl-ctrl-geocoder--input::placeholder {
+			opacity: 1;
+			color: var(--gray-dark-2);
+		}
 		.maplibregl-ctrl-geocoder--input:focus {
-			color: rgba(0, 0, 0, 0.75);
+			color: var(--gray-dark-5);
 			outline: 0;
 		}
 

package/src/maplibre/Map/Map.svelte

@@ -106,9 +106,10 @@
 		{/if}
 	{/if}
 	{#if showDebug}
-		<div class="debug">
-			{JSON.stringify({ ...center, zoom, allowZoom, allowRotation })}
-		</div>
+		<pre class="debug">
+{Object.entries({ ...center, zoom, allowZoom, allowRotation })
+				.map(([key, val]) => `${key}: ${val}`)
+				.join('\n')}</pre>
 	{/if}
 </div>
 
@@ -122,9 +123,10 @@
 		position: absolute;
 		top: 0;
 		right: 0;
-		background: black;
+		background: rgba(0, 0, 0, 0.9);
 		color: white;
 		z-index: 1000;
+		padding: 2px;
 		font-family: monospace;
 	}
 	:global {
@@ -210,9 +212,11 @@
 		}
 
 		.maplibregl-ctrl-group {
-			background: #fff;
+			background: white;
+			border: 1px solid rgba(0, 0, 0, 0.75);
+			box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.075);
 			border-radius: var(--br-small);
-			border: 1px solid var(--violet-dark-5);
+			overflow: hidden;
 		}
 
 		.maplibregl-ctrl-group button {
@@ -244,11 +248,11 @@
 		}
 
 		.maplibregl-ctrl button:disabled .maplibregl-ctrl-icon {
-			opacity: 0.25;
+			opacity: 0.5;
 		}
 
 		.maplibregl-ctrl button:not(:disabled):hover {
-			background-color: rgb(0 0 0/5%);
+			background-color: var(--gray-light-5);
 		}
 
 		.maplibregl-ctrl-group button:focus:focus-visible {

package/src/maplibre/MapStyle/components/Landuse.ts

@@ -15,7 +15,7 @@ export default function makeLanduse(): any {
 			type: 'fill',
 			'source-layer': 'ocean',
 			paint: {
-				'fill-color': 'hsl(219, 56%, 93%)'
+				'fill-color': 'hsl(220, 30%, 96%)'
 			}
 		},
 		{

package/src/maplibre/Maplibre.mdx

@@ -9,7 +9,7 @@ import * as MapStyleStories from './MapStyle/SWRDataLabLight.stories.svelte';
 
 Lightweight svelte components and basemaps for rendering custom slippy maps using the [versatiles](https://docs.versatiles.org/) stack.
 
-Based on [prior work](https://github.com/SWRdata/frontend_svelte_p012_spritpreise/blob/main/src/lib/components/Map/Map.svelte) from [Jakob Bauer](https://github.com/AgricolaJKB), [dimfield](https://github.com/dimfeld/svelte-maplibre) and [MIRUNE](https://github.com/MIERUNE/svelte-maplibre-gl).
+Based on [prior work](https://github.com/SWRdata/frontend_svelte_p012_spritpreise/blob/main/src/lib/components/Map/Map.svelte) from [Michael Kreil](https://github.com/MichaelKreil), [Jakob Bauer](https://github.com/AgricolaJKB), [dimfield](https://github.com/dimfeld/svelte-maplibre) and [MIRUNE](https://github.com/MIERUNE/svelte-maplibre-gl).
 
 <Story of={MapStyleStories.Default} />
 

package/src/maplibre/Tooltip/Tooltip.svelte

@@ -70,9 +70,10 @@
 <style>
 	.container {
 		background: white;
-		padding: 0.65em;
+		padding: 0.75em;
 		border-radius: 2px;
 		border: 1px solid rgba(0, 0, 0, 0.75);
+		border-radius: var(--br-small);
 		filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.1));
 		pointer-events: none;
 	}
@@ -103,13 +104,16 @@
 		.maplibregl-popup-anchor-left {
 			flex-direction: row;
 		}
+
 		.maplibregl-popup-anchor-right {
 			flex-direction: row-reverse;
 		}
+
 		.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
 			transform: translateY(50%) rotate(45deg);
 			align-self: center;
 		}
+
 		.maplibregl-popup-anchor-top .maplibregl-popup-tip {
 			transform: translateY(-50%) rotate(-135deg);
 			align-self: center;
@@ -119,52 +123,56 @@
 			transform: translateX(-50%) rotate(135deg);
 			align-self: center;
 		}
+
 		.maplibregl-popup-anchor-top-left .maplibregl-popup-tip {
 			transform: translateY(1em) translateX(-50%) rotate(135deg);
 		}
+
 		.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip {
 			transform: translateY(-1em) translateX(-50%) rotate(135deg);
 		}
+
 		.maplibregl-popup-anchor-right .maplibregl-popup-tip {
 			transform: translateX(50%) rotate(-45deg);
 			align-self: center;
 		}
+
 		.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
 			transform: translateX(-1em) translateY(-50%) rotate(-135deg);
 			align-self: flex-end;
 		}
+
 		.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
 			transform: translateX(-1em) translateY(50%) rotate(45deg);
 			align-self: flex-end;
 		}
 
 		.maplibregl-popup-close-button {
-			background-color: transparent;
-			border: 0;
-			cursor: pointer;
 			position: absolute;
-			top: 0.45em;
-			right: 0.45em;
+			top: 0.5em;
+			right: 0.5em;
+			cursor: pointer;
+			border-radius: 2px;
 			display: flex;
-			border-radius: var(--br-small);
 			justify-content: center;
 			align-items: center;
-			padding-bottom: 0.1em;
-			border: 1px solid var(--violet-dark-5);
-			font-size: 1.2rem;
-			width: 1em;
-			height: 1em;
+			padding-bottom: 0.15em;
+			font-size: 1.25rem;
+			width: 1.1em;
+			height: 1.1em;
 			z-index: 100;
+			background: white;
+			border: 1px solid var(--gray-dark-5);
 		}
 
 		.maplibregl-popup-close-button:hover,
 		.maplibregl-popup-close-button:focus {
-			background: rgb(245, 245, 245);
+			background: var(--gray-light-5);
 		}
 
 		.maplibregl-popup-tip {
-			width: 0.6rem;
-			height: 0.6rem;
+			width: 0.65rem;
+			height: 0.65rem;
 			background: white;
 			position: absolute;
 			border-right: 1px solid rgba(0, 0, 0, 0.75);