@swr-data-lab/components 1.12.2 → 1.12.4

package/package.json

@@ -20,7 +20,6 @@
 	},
 	"dependencies": {
 		"@maplibre/maplibre-gl-geocoder": "^1.8.0",
-		"@versatiles/style": "^5.6.0",
 		"maplibre-gl": "^5.5.0",
 		"svelte-select": "^5.8.3"
 	},
@@ -38,6 +37,7 @@
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@versatiles/style": "^5.6.0",
 		"@vitest/browser": "^3.1.1",
 		"@vitest/coverage-v8": "^3.1.1",
 		"concurrently": "^9.0.1",
@@ -67,7 +67,7 @@
 			"svelte": "./src/index.js"
 		}
 	},
-	"version": "1.12.2",
+	"version": "1.12.4",
 	"overrides": {
 		"storybook": "$storybook"
 	}

package/src/index.js

@@ -1,16 +1,23 @@
-export { default as Card } from './Card/Card.svelte';
-export { default as Autocomplete } from './Autocomplete/Autocomplete.svelte';
-export { default as Switcher } from './Switcher/Switcher.svelte';
-export { default as Input } from './Input/Input.svelte';
-export { default as Button } from './Button/Button.svelte';
-export { default as Select } from './Select/Select.svelte';
+// Design Tokens
 export { default as DesignTokens } from './DesignTokens/DesignTokens.svelte';
 export { tokens as tokens } from './DesignTokens/index.js';
+
+// Typography
+export { default as Headline } from './Headline/Headline.svelte';
+export { default as Copy } from './Copy/Copy.svelte';
+export { default as Caption } from './Caption/Caption.svelte';
+export { default as Note } from './Note/Note.svelte';
+
+// Display
+export { default as Card } from './Card/Card.svelte';
+
+// Chart
 export { default as ChartHeader } from './ChartHeader/ChartHeader.svelte';
 export { default as ChartFooter } from './ChartFooter/ChartFooter.svelte';
+export { default as Logotype } from './Logotype/Logotype.svelte';
 export { default as Middot } from './Middot/Middot.svelte';
-export { default as FormLabel } from './FormLabel/FormLabel.svelte';
 
+// Maplibre
 export { default as Map } from './maplibre/Map/Map.svelte';
 export { SWRDataLabLight } from './maplibre/MapStyle';
 export { default as MapControl } from './maplibre/MapControl/MapControl.svelte';
@@ -22,3 +29,13 @@ export { default as VectorLayer } from './maplibre/VectorLayer/VectorLayer.svelt
 export { default as VectorTileSource } from './maplibre/VectorTileSource/VectorTileSource.svelte';
 export { default as Tooltip } from './maplibre/Tooltip/Tooltip.svelte';
 export { default as WithLinkLocation } from './maplibre/WithLinkLocation/WithLinkLocation.svelte';
+
+// Form
+export { default as FormLabel } from './FormLabel/FormLabel.svelte';
+export { default as Switcher } from './Switcher/Switcher.svelte';
+export { default as Input } from './Input/Input.svelte';
+export { default as Button } from './Button/Button.svelte';
+export { default as Select } from './Select/Select.svelte';
+
+// Deprecated
+export { default as Autocomplete } from './Autocomplete/Autocomplete.svelte';

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/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;
 	}