@swr-data-lab/components 1.13.2 → 1.13.4

package/dist/ChartList/ChartList.svelte

@@ -35,12 +35,6 @@ let { project, charts, baseUrl } = $props();
 </main>
 
 <style>
-	:global(*) {
-		margin: 0;
-		padding: 0;
-		box-sizing: border-box;
-		color: inherit;
-	}
 	main {
 		display: flex;
 		justify-content: center;

package/dist/maplibre/AttributionControl/AttributionControl.svelte

@@ -11,5 +11,24 @@ const { position = 'bottom-right', customAttribution } = $props();
 	})}
 />
 
-<style>
-</style>
+<style>:global(.maplibregl-ctrl.maplibregl-ctrl-attrib) {
+  font-size: var(--fs-small-3);
+  letter-spacing: 0.005em;
+  word-spacing: 0.005em;
+  font-family: var(--swr-sans);
+}
+:global(.maplibregl-ctrl-attrib.maplibregl-compact-show) :global(.maplibregl-ctrl-attrib-inner) {
+  display: block;
+}
+:global(.maplibregl-ctrl-attrib-button) {
+  display: none;
+}
+:global(.maplibregl-ctrl-attrib) :global(a) {
+  color: inherit;
+  text-decoration: none;
+  text-underline-offset: 0.2em;
+}
+:global(.maplibregl-ctrl-attrib) :global(a:hover) {
+  color: inherit;
+  text-decoration: underline;
+}</style>

package/dist/maplibre/GeocoderControl/GeocoderControl.svelte

@@ -21,5 +21,135 @@ const geocoder = new MaplibreGeocoder(geocoderAPI, {
 
 <MapControl control={geocoder} position="top-left" />
 
-<style>
-</style>
+<style>:global(.maplibregl-ctrl-geocoder) {
+  background-color: #fff;
+  position: relative;
+  width: 100%;
+  z-index: 1;
+  font-family: var(--swr-sans);
+  font-size: var(--fs-small-1);
+  border-radius: var(--br-small);
+  border: 1px solid rgba(0, 0, 0, 0.75);
+  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.075);
+}
+:global(.maplibre-gl-geocoder--error) {
+  font-size: var(--fs-small-2);
+  color: var(--gray-dark-2);
+  padding: 0.4em 0.65em;
+}
+:global(.maplibregl-ctrl-geocoder--input) {
+  width: 100%;
+  height: 100%;
+  font-family: inherit;
+  font-size: inherit;
+  background-color: transparent;
+  color: var(--gray-dark-5);
+  border: 0;
+  height: 1.85em;
+  padding: 0 1.85em;
+  padding-top: 0.1em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+:global(.maplibregl-ctrl-geocoder--input::placeholder) {
+  opacity: 1;
+  color: var(--gray-dark-2);
+}
+:global(.maplibregl-ctrl-geocoder--input:focus) {
+  color: var(--gray-dark-5);
+  outline: 0;
+}
+:global(.maplibregl-ctrl-geocoder) :global(.maplibregl-ctrl-geocoder--pin-right) > :global(*) {
+  display: none;
+  position: absolute;
+  z-index: 2;
+  right: 0.5em;
+  top: 50%;
+  transform: translateY(-50%);
+  border: 0;
+}
+:global(.maplibregl-ctrl-geocoder) :global(.suggestions) {
+  background: white;
+  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;
+  list-style: none;
+  position: absolute;
+  width: 100%;
+  top: calc(100% + 0.5em);
+  z-index: 1000;
+  overflow: hidden;
+}
+:global(.maplibregl-ctrl-bottom-left) :global(.suggestions),
+:global(.maplibregl-ctrl-bottom-right) :global(.suggestions) {
+  top: auto;
+  bottom: 100%;
+}
+:global(.maplibregl-ctrl-geocoder) :global(.suggestions) > :global(li) > :global(a) {
+  cursor: default;
+  display: block;
+  padding: 0.5em 0.75em;
+  color: var(--gray-dark-5);
+  padding-bottom: 0.5em;
+  border-bottom: 1px solid var(--gray-light-3);
+}
+:global(.maplibregl-ctrl-geocoder) :global(.suggestions) > :global(li:last-child) > :global(a) {
+  border-bottom: 0;
+}
+:global(.maplibregl-ctrl-geocoder) :global(.suggestions) > :global(.active) > :global(a),
+:global(.maplibregl-ctrl-geocoder) :global(.suggestions) > :global(li) > :global(a:hover) {
+  background: var(--gray-light-5);
+  text-decoration: none;
+  cursor: pointer;
+}
+:global(.maplibregl-ctrl-geocoder) :global(.suggestions) > :global(.active) :global(.maplibregl-ctrl-geocoder--result-title),
+:global(.maplibregl-ctrl-geocoder) :global(.suggestions) > :global(li) > :global(a:hover) :global(.maplibregl-ctrl-geocoder--result-title) {
+  text-decoration: underline;
+}
+:global(.maplibregl-ctrl-geocoder--suggestion) {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+:global(.maplibregl-ctrl-geocoder--suggestion-info) {
+  display: flex;
+  flex-direction: column;
+}
+:global(.maplibregl-ctrl-geocoder--suggestion-match) {
+  font-weight: bold;
+}
+:global(.maplibregl-ctrl-geocoder--suggestion-title),
+:global(.maplibregl-ctrl-geocoder--suggestion-address),
+:global(.maplibregl-ctrl-geocoder--result-address) {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+:global(.maplibregl-ctrl-geocoder--result-icon) {
+  display: none;
+}
+:global(.maplibregl-ctrl-geocoder--result-title) {
+  font-weight: 600;
+  letter-spacing: 0;
+}
+:global(.maplibregl-ctrl-geocoder--result-address) {
+  font-size: var(--fs-small-2);
+  color: var(--gray-dark-2);
+  line-height: 1.3;
+}
+:global(.maplibregl-ctrl-geocoder--icon) {
+  display: inline-block;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 1em;
+}
+:global(.maplibregl-ctrl-geocoder--icon-close) {
+  right: 0;
+}
+:global(.maplibregl-ctrl-geocoder--icon-search) {
+  left: 0.5em;
+  height: 1.5em;
+}</style>

package/dist/maplibre/Map/Map.svelte

@@ -72,20 +72,146 @@ $effect(() => {
 	{/if}
 </div>
 
-<style>
-	.container {
-		width: 100%;
-		height: 100%;
-	}
+<style>.container {
+  width: 100%;
+  height: 100%;
+}
+
+.debug {
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.9);
+  color: white;
+  z-index: 1000;
+  padding: 2px;
+  font-family: monospace;
+}
 
-	.debug {
-		position: absolute;
-		top: 0;
-		right: 0;
-		background: rgba(0, 0, 0, 0.9);
-		color: white;
-		z-index: 1000;
-		padding: 2px;
-		font-family: monospace;
-	}
-</style>
+:global(.maplibregl-map) {
+  overflow: hidden;
+  position: relative;
+}
+:global(.maplibregl-canvas) {
+  left: 0;
+  position: absolute;
+  top: 0;
+}
+:global(.maplibregl-map:fullscreen) {
+  height: 100%;
+  width: 100%;
+}
+:global(.maplibregl-canvas-container.maplibregl-interactive) {
+  cursor: grab;
+  user-select: none;
+}
+:global(.maplibregl-canvas-container.maplibregl-interactive.maplibregl-track-pointer) {
+  cursor: pointer;
+}
+:global(.maplibregl-canvas-container.maplibregl-interactive:active) {
+  cursor: grabbing;
+}
+:global(.maplibregl-canvas-container.maplibregl-touch-zoom-rotate),
+:global(.maplibregl-canvas-container.maplibregl-touch-zoom-rotate) :global(.maplibregl-canvas) {
+  touch-action: pan-x pan-y;
+}
+:global(.maplibregl-canvas-container.maplibregl-touch-drag-pan),
+:global(.maplibregl-canvas-container.maplibregl-touch-drag-pan) :global(.maplibregl-canvas) {
+  touch-action: pinch-zoom;
+}
+:global(.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan),
+:global(.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan) :global(.maplibregl-canvas) {
+  touch-action: none;
+}
+:global(.maplibregl-ctrl-bottom-left),
+:global(.maplibregl-ctrl-bottom-right),
+:global(.maplibregl-ctrl-top-left),
+:global(.maplibregl-ctrl-top-right) {
+  position: absolute;
+  z-index: 2;
+  display: flex;
+  flex-flow: column;
+  gap: 0.75em;
+  align-items: flex-start;
+}
+:global(.maplibregl-ctrl-top-left) {
+  left: 0.5em;
+  top: 0.5em;
+}
+:global(.maplibregl-ctrl-top-right) {
+  right: 0;
+  top: 0;
+}
+:global(.maplibregl-ctrl-bottom-left) {
+  bottom: 0.5em;
+  left: 0.5em;
+}
+:global(.maplibregl-ctrl-bottom-right) {
+  bottom: 0.5em;
+  right: 0.5em;
+}
+:global(.maplibregl-ctrl) {
+  pointer-events: auto;
+  transform: translate(0);
+}
+:global(.maplibregl-ctrl-group) {
+  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);
+  overflow: hidden;
+}
+:global(.maplibregl-ctrl-group) :global(button) {
+  background-color: transparent;
+  border: 0;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: block;
+  height: 29px;
+  outline: none;
+  padding: 0;
+  width: 29px;
+}
+:global(.maplibregl-ctrl-group) :global(button) + :global(button) {
+  border-top: 1px solid rgba(0, 0, 0, 0.35);
+}
+:global(.maplibregl-ctrl) :global(button) :global(.maplibregl-ctrl-icon) {
+  background-position: 50%;
+  background-repeat: no-repeat;
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+:global(.maplibregl-ctrl) :global(button:disabled) {
+  cursor: not-allowed;
+}
+:global(.maplibregl-ctrl) :global(button:disabled) :global(.maplibregl-ctrl-icon) {
+  opacity: 0.5;
+}
+:global(.maplibregl-ctrl) :global(button:not(:disabled):hover) {
+  background-color: var(--gray-light-5);
+}
+:global(.maplibregl-ctrl-group) :global(button:focus:focus-visible) {
+  box-shadow: 0 0 2px 2px #0096ff;
+}
+:global(.maplibregl-ctrl-group) :global(button:focus:not(:focus-visible)) {
+  box-shadow: none;
+}
+:global(.maplibregl-ctrl-group) :global(button:focus:first-child) {
+  border-radius: 4px 4px 0 0;
+}
+:global(.maplibregl-ctrl-group) :global(button:focus:last-child) {
+  border-radius: 0 0 4px 4px;
+}
+:global(.maplibregl-ctrl-group) :global(button:focus:only-child) {
+  border-radius: inherit;
+}
+:global(.maplibregl-marker) {
+  left: 0;
+  top: 0;
+  position: absolute;
+  will-change: transform;
+}
+:global(.maplibregl-marker) :global(path) {
+  fill: var(--violet-dark-5);
+}</style>

package/dist/maplibre/NavigationControl/NavigationControl.svelte

@@ -5,5 +5,12 @@ const { showCompass = false, visualizePitch = false, position = 'bottom-left' }
 
 <MapControl control={new maplibre.NavigationControl({ showCompass, visualizePitch })} {position} />
 
-<style>
-</style>
+<style>:global(button.maplibregl-ctrl-zoom-out) :global(.maplibregl-ctrl-icon) {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E");
+}
+:global(button.maplibregl-ctrl-zoom-in) :global(.maplibregl-ctrl-icon) {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E");
+}
+:global(button.maplibregl-ctrl-compass) :global(.maplibregl-ctrl-icon) {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='m10.5 14 4-8 4 8h-8z'/%3E%3Cpath d='m10.5 16 4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E");
+}</style>

package/dist/maplibre/ScaleControl/ScaleControl.svelte

@@ -5,5 +5,10 @@ let { maxWidth = 100, unit = 'metric', position = 'bottom-left' } = $props();
 
 <MapControl control={new maplibre.ScaleControl({ maxWidth, unit })} {position} />
 
-<style>
-</style>
+<style>:global(.maplibregl-ctrl-scale) {
+  color: inherit;
+  border-bottom: 1px solid currentColor;
+  font-weight: 400;
+  font-size: var(--fs-small-3);
+  font-family: var(--swr-text);
+}</style>

package/dist/maplibre/Tooltip/Tooltip.svelte

@@ -29,18 +29,100 @@ onDestroy(() => tooltip.remove());
 	{@render children?.()}
 </div>
 
-<style>
-	.container {
-		background: white;
-		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;
-	}
+<style>.container {
+  background: white;
+  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;
+}
 
-	.mouseEvents {
-		pointer-events: all;
-	}
-</style>
+.mouseEvents {
+  pointer-events: all;
+}
+
+:global(.maplibregl-popup) {
+  top: 0;
+  left: 0;
+  display: flex;
+  position: absolute;
+  will-change: transform;
+}
+:global(.maplibregl-popup-anchor-top),
+:global(.maplibregl-popup-anchor-top-left),
+:global(.maplibregl-popup-anchor-top-right) {
+  flex-direction: column;
+}
+:global(.maplibregl-popup-anchor-bottom),
+:global(.maplibregl-popup-anchor-bottom-left),
+:global(.maplibregl-popup-anchor-bottom-right) {
+  flex-direction: column-reverse;
+}
+:global(.maplibregl-popup-anchor-left) {
+  flex-direction: row;
+}
+:global(.maplibregl-popup-anchor-right) {
+  flex-direction: row-reverse;
+}
+:global(.maplibregl-popup-anchor-bottom) :global(.maplibregl-popup-tip) {
+  transform: translateY(50%) rotate(45deg);
+  align-self: center;
+}
+:global(.maplibregl-popup-anchor-top) :global(.maplibregl-popup-tip) {
+  transform: translateY(-50%) rotate(-135deg);
+  align-self: center;
+}
+:global(.maplibregl-popup-anchor-left) :global(.maplibregl-popup-tip) {
+  transform: translateX(-50%) rotate(135deg);
+  align-self: center;
+}
+:global(.maplibregl-popup-anchor-top-left) :global(.maplibregl-popup-tip) {
+  transform: translateY(1em) translateX(-50%) rotate(135deg);
+}
+:global(.maplibregl-popup-anchor-bottom-left) :global(.maplibregl-popup-tip) {
+  transform: translateY(-1em) translateX(-50%) rotate(135deg);
+}
+:global(.maplibregl-popup-anchor-right) :global(.maplibregl-popup-tip) {
+  transform: translateX(50%) rotate(-45deg);
+  align-self: center;
+}
+:global(.maplibregl-popup-anchor-top-right) :global(.maplibregl-popup-tip) {
+  transform: translateX(-1em) translateY(-50%) rotate(-135deg);
+  align-self: flex-end;
+}
+:global(.maplibregl-popup-anchor-bottom-right) :global(.maplibregl-popup-tip) {
+  transform: translateX(-1em) translateY(50%) rotate(45deg);
+  align-self: flex-end;
+}
+:global(.maplibregl-popup-close-button) {
+  position: absolute;
+  top: 0.5em;
+  right: 0.5em;
+  cursor: pointer;
+  border-radius: 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  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);
+}
+:global(.maplibregl-popup-close-button:hover),
+:global(.maplibregl-popup-close-button:focus) {
+  background: var(--gray-light-5);
+}
+:global(.maplibregl-popup-tip) {
+  width: 0.65rem;
+  height: 0.65rem;
+  background: white;
+  position: absolute;
+  border-right: 1px solid rgba(0, 0, 0, 0.75);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.75);
+  z-index: 10;
+}</style>

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@swr-data-lab/components",
 	"description": "SWR Data Lab component library",
-	"version": "1.13.2",
+	"version": "1.13.4",
 	"author": "SWR Data Lab",
 	"license": "UNLICENSED",
 	"type": "module",

package/dist/ChartFooter/ChartFooter.mdx

@@ -1,17 +0,0 @@
-import { Story,  Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
- 
-import * as ChartFooterStories from './ChartFooter.stories.svelte';
-
-<Meta of={ChartFooterStories}/>
-
-# Chart Footer
-
-Standard chart footer.
-
-- Nest arbitrary HTML inside component to render your notes
-- Use `one-up` layout unless your footnotes fit two lines or fewer.
-- Use `<Middot/>` to separate sentences
-
-<Controls  />
-
-<Stories/>

package/dist/ChartHeader/ChartHeader.mdx

@@ -1,16 +0,0 @@
-import { Story, Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
- 
-import * as ChartHeaderStories from './ChartHeader.stories.svelte';
-
-<Meta of={ChartHeaderStories}/>
-
-# Chart header
-
-Standard chart header.
-
-- The slugified `title` is set as the header element's `id` attribute (useful for linking to interactives from in-article table of contents)
-- Any nested HTML will render under the description (useful for i.e colour keys and interactives controls).
-
-<Controls  />
-
-<Stories/>

package/dist/ChartList/ChartList.mdx

@@ -1,13 +0,0 @@
-import { Story, Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
-
-import * as ChartListStories from './ChartList.stories.svelte';
-
-<Meta of={ChartListStories} />
-
-# Chart List
-
-Utility component for displaying a list of charts with associated embed URLs during development (typically on the `/` route of your Svelte project).
-
-<Stories />
-
-<Controls />

package/dist/DesignTokens/DesignTokens.mdx

@@ -1,110 +0,0 @@
-import { Title, Story, ColorPalette, ColorItem, Meta, Typeset, Canvas } from '@storybook/addon-docs/blocks';
-import { shades, scales, typography } from "./Tokens"
-
-import * as HeadlineStories from "../Headline/Headline.stories.svelte"
-import * as CopyStories from "../Copy/Copy.stories.svelte"
-import * as CaptionStories from "../Caption/Caption.stories.svelte"
-import * as NoteStories from "../Note/Note.stories.svelte"
-
-<Meta title='Design Tokens'/>
-
-# Design Tokens
-
-## Table of Contents
- 
-- [Usage](#usage)
-  - [Web](#web)
-  - [Figma](#figma) 
-- [Typography](#typography)
-  - [Sizes](#sizes)
-  - [Styles](#styles)
-- [Colours](#colours)
-	- [Shades](#shades)
-	- [Linear scales](#linear-scales)
-	- [Categorical Scales](#categorical-scales)
-	- [Divergent Scales](#divergent-scales)
-
-## Usage
-
-### Web
-
-The `<DesignTokens>` component makes colours, type sizes and other design tokens available to its children as CSS variables.
-
-```html
-<script>
-  import DesignTokens from "@swr-data-lab/components"
-</script>
-
-<DesignTokens>
-  <p>I'm a sample paragraph</p>
-</DesignTokens>
-
-<style>
-  p {
-    color: var(--violet-dark-1) // this works
-  }
-</style>
-```
-
-You can also import `tokens` directly to use them in Javascript:
-
-```jsx
-import tokens from "@swr-data-lab/components"
-import { scaleThreshold } from 'd3-scale';
-const sampleScale = scaleThreshold([0, 10], tokens.scales.red_blue);
-```
-
-### Figma
-
-The tokens on this page are available as a [Figma library](https://www.figma.com/design/Wrd7uUV3GxpNXXkM5ozuHk/Datalab-Design-Tokens?node-id=0-1&t=iOqDxhuMdvEyY8VK-1). This is enabled by default for any file in the [SWR Data Lab team](https://www.figma.com/files/1125823985461580916/team/1415988138343592768). 
-
-
-## Typography
-
-Type sizes and paragraph styles are designed to match the typography on [swr.de](https://www.swr.de/). **Styles** come with built-in settings for `line-height`, `letter-spacing`, etc. and should be preferred over using **sizes** directly.
-
-### Styles
-#### H2
-<Canvas of={HeadlineStories.Default}/>
-
-#### Copy
-<Canvas of={CopyStories.Default}/>
-
-#### Caption
-<Canvas of={CaptionStories.Default}/>
-
-#### Note
-<Canvas of={NoteStories.Default}/>
-
-### Sizes
-<Typeset fontWeight={600} fontFamily='SWR-VAR-Text' sampleText='Pollenflug in BW: Was Heuschnupfengeplagte jetzt wissen sollten' fontSizes={Object.entries(typography.wide.sizes).map(([key, size]) => {
-	return size
-}).reverse()}/>
-
-
-## Colours
-### Shades
-<ColorPalette>
-{["violet", "plum", "pink", "red", "orange", "yellow", "apple" , "forest","teal",    "blue", "gray"].map((el, i) => {
-	return(
-		<ColorItem
-		title={`${el.split("")[0].toUpperCase()}${el.slice(1)}`}
-		colors={shades[el]}
-	/>
-			) 
-})}
-</ColorPalette>
-
-### Linear Scales
-### Categorical Scales
-### Divergent Scales
-
-<ColorPalette>
-{["red_blue", "red_violet", "red_forest", "red_apple", "red_teal", "violet_teal", "violet_orange", "blue_pink", "teal_pink", "forest_plum", "apple_plum", "orange_blue", "orange_teal"].map((el, _) => {
-	return(<ColorItem	
-			title={`${el.split("_").map(c => {return c[0].toUpperCase() + c.slice(1)}).join("/")}`}
-			subtitle={el}
-			colors={scales[el]}
-		/>) 
-})}
-</ColorPalette>

package/dist/FormLabel/FormLabel.mdx

@@ -1,13 +0,0 @@
-import { Story, Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
- 
-import * as FormLabelStories from './FormLabel.stories.svelte';
-
-<Meta of={FormLabelStories}/>
-
-# Form Label
-
-Standard form label. The `htmlFor` prop is required to semantically link the label to the form element it describes. 
-
-<Controls />
-
-<Stories/>

package/dist/Intro.mdx

@@ -1,7 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="About" />
-
-# SWR Data Lab Components
-
-Experimental component library for SWR Data Lab interactives.

package/dist/Select/Select.mdx

@@ -1,25 +0,0 @@
-import { Story,  Meta, Primary, Controls, Stories} from '@storybook/addon-docs/blocks';
- 
-import * as SelectStories from './Select.stories.svelte';
-
-<Meta of={SelectStories}/>
-
-# Select
-
-This component is a select input with a search feature and various options such as grouped items, multi-select etc. based on [svelte-select](https://github.com/rob-balfre/svelte-select).
-
-Select items passed to the `items` prop must be of type `SelectItem`:
-
-```ts
-interface SelectItem {
-    value: string;
-    label: string;
-    group?: string;
-    details?: any;
-}
-```
-
-<Controls/>
-
-<Stories/>
-

package/dist/Switcher/Switcher.mdx

@@ -1,13 +0,0 @@
-import { Story,  Meta, Primary, Controls, Stories} from '@storybook/addon-docs/blocks';
- 
-import * as SwictherStories from './Switcher.stories.svelte';
-
-<Meta of={SwictherStories}/>
-
-# Switcher
-
-Radio-like form component to choose exactly one of a given set of options.
-
-<Controls/>
-
-<Stories/>

package/dist/maplibre/MapControl/MapControl.mdx

@@ -1,12 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-import { Story, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
-import * as MapControlStories from './MapControl.stories.svelte';
-
-<Meta of={MapControlStories} />
-
-# MapControl
-
-Base component used by all other built-in control components. Also useful for building application-specific controls (see demo below).
-
-<Stories />
-<Controls />

package/dist/maplibre/MapStyle/SWRDataLabLight.mdx

@@ -1,86 +0,0 @@
-import { Story, Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
-import Mermaid from '../../../.storybook/blocks/Mermaid';
-import SWRDataLabLight from './SWRDataLabLight';
-import * as MapStyleStories from './SWRDataLabLight.stories.svelte';
-
-<Meta of={MapStyleStories} />
-
-# SWR Data Lab Light
-
-Light-themed general-purpose basemap using SWR colours and typefaces based on
-[versatiles-greybeard](https://github.com/versatiles-org/versatiles-style).
-
-- Data sources
-  - Vector data: [versatiles-osm](https://download.versatiles.org/) in the [Shortbread schema](https://shortbread-tiles.org/) served from `tiles.versatiles.org`
-  - Typefaces: SWR Sans served from `https://static.datenhub.net/maps/fonts/`.
-- Layer count: {SWRDataLabLight.layers.length}
-
-<Story of={MapStyleStories.Default} />
-
-<br />
-
-### Design Notes
-
-We take a two-step design approach:
-
-1. Sort the geographic data we want to present into semantic groups like "Admin Boundaries", "Roads" or "Transit" (inspired by Mapbox's [Style Components](https://docs.mapbox.com/studio-manual/guides/components/)).
-2. Derive physical layers (ie. `MapLayerSpecification`) from these groups and interleave them to produce a convincing image
-3. Use shared design tokens to style each physical layer
-
-<Mermaid chart={`
-block-beta
-columns 10
-
-classDef admin fill:#e5dbf5;
-classDef buildings fill:#FFBA35;
-classDef roads fill:#FFD584;
-classDef transit fill:#C5F0B1;
-classDef walking fill:#65D62B;
-classDef landuse fill:#eee;
-
-block:semantic:6
-columns 1
-columns 1
-s_admin["Admin"]
-s_buildings["Buildings"]
-s_roads["Roads"]
-s_transit["Transit"]
-s_walking["Walking + Cycling"]
-s_landuse["Landuse"]
-end
-
-block:actual:10
-columns 1
-a_admin_labels["Admin Labels"]
-a_walking_labels["Walking (Labels)"]
-a_transit_labels["Transit (Labels)"]
-a_roads_labels["Roads (Labels)"]
-a_admin0["Admin 0 (Countries)"]
-a_admin1["Admin 1 (States/Provinces)"]
-a_admin2["Admin 2 (Districts)"]
-a_buildings["Buildings"]
-a_walking_bridge["Walking (Bridge)"]
-a_transit_bridge["Transit (Bridge)"]
-a_roads_bridge["Roads (Bridge)"]
-a_walking_surface["Walking (Surface)"]
-a_transit_surface["Transit (Surface)"]
-a_roads_surface["Roads (Surface)"]
-a_walking_tunnel["Walking (Tunnel)"]
-a_transit_tunnel["Transit (Tunnel)"]
-a_roads_tunnel["Roads (Tunnel)"]
-a_land["Land"]
-a_ocean["Ocean"]
-a_background["Background"]
-end
-
-class s_admin,a_admin0,a_admin1,a_admin2,a_admin_labels admin
-class s_buildings,a_buildings buildings
-class s_roads,a_roads_bridge,a_roads_surface,a_roads_tunnel,a_roads_labels roads
-class s_transit,a_transit_bridge,a_transit_surface,a_transit_tunnel,a_transit_labels transit
-class s_walking,a_walking_bridge,a_walking_surface,a_walking_tunnel,a_walking_labels walking
-class s_landuse,a_land,a_ocean,a_background landuse
-`}/>
-
-### References
-
-- [Foundational Map Design | BUILD with Mapbox ](https://www.youtube.com/watch?v=QDfj9oGVZmE)

package/dist/maplibre/Maplibre.mdx

@@ -1,91 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-import { Story, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
-import * as MapStories from './Map/Map.stories.svelte';
-import * as MapStyleStories from './MapStyle/SWRDataLabLight.stories.svelte';
-
-<Meta title="Maplibre" />
-
-# Maplibre
-
-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 [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} />
-
-<br />
-
-## Usage
-
-This example initialises a map using the SWRDataLabLight style, adds an additional vector tile source and renders it as a vector layer.
-
-```jsx
-<script>
-  import {
-    Map,
-    VectorLayer,
-    AttributionControl,
-    VectorTileSource,
-    SWRDataLabLight,
-    DesignTokens
-  } from '@swr-data-lab/components';
-</script>
-
-<DesignTokens>
-  <div class='container'>
-    <Map style={SWRDataLabLight}>
-      <VectorTileSource
-        id='ev-infra-source'
-        url='https://static.datenhub.net/data/p108_e_auto_check/ev_infra_merged.versatiles?tiles/{z}/{x}/{y}'>
-      </VectorTileSource>
-      <VectorLayer
-        sourceId='ev-infra-source'
-        sourceLayer='coverage'
-        id='ev-infra-outline'
-        type='line'
-        paint={{'line-width': 1, 'line-color': 'red'}}>
-      </VectorLayer>
-      <AttributionControl />
-    </Map>
-  </div>
-</DesignTokens>
-
-<style>
-  .container {
-    width: 100%;
-    height: 600px;
-  }
-</style>
-```
-
-## Available components
-
-### Sources
-
-- **[VectorTileSource](?path=/docs/maplibre-source-vectortilesource--docs)**: Loads a vector tile source supplied by a tileserver
-
-### Layers
-
-- **[VectorLayer](?path=/docs/maplibre-layer-vectorlayer--docs)**: Renders a layer from a vector tile source.
-
-### Controls
-
-- **[ScaleControl](?path=/docs/maplibre-control-scalecontrol--docs)**: Renders a dynamic scalebar
-- **[NavigationControl](?path=/docs/maplibre-control-navigationcontrol--docs)**: Renders zoom buttons and optional compass
-- **[GeocoderControl](?path=/docs/maplibre-control-geocodercontrol--docs)**: Renders a search input using [maplibre-gl-geocoder](https://github.com/maplibre/maplibre-gl-geocoder) and any supported forward geocoding service (currently [maptiler](https://www.maptiler.com/) only)
-- **[AttributionControl](?path=/docs/maplibre-control-attributioncontrol--docs)**: Renders maplibre's default attribution control
-- **[Custom controls](?path=/docs/maplibre-control-mapcontrol--docs)**: Renders arbitrary HTML inside maplibre's layout
-
-### Misc
-
-- **[Tooltip](?path=/docs/maplibre-extras-tooltip--docs)**
-- **[WithLinkLocation](?path=/docs/maplibre-extras-withlinklocation--docs)**: Derive the maps `initialLocation` from a URL parameter via forward geocoding
-
-### Styles
-
-- **[SWR Data Lab Light](?path=/docs/maplibre-style-swr-data-lab-light--docs)**: Light-themed basemap using SWR colours and typefaces
-- Any valid MapLibre style specification, such as [versatiles-style](https://github.com/versatiles-org/versatiles-style) (see [demo](?path=/story/map-map--alternate-style))
-
-## Known issues
-
-- Firefox throws warning `WebGL warning: texImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads`: Known [upstream mapligre-gl issue](https://github.com/maplibre/maplibre-gl-js/issues/2030) (safe to ignore)

package/dist/maplibre/VectorTileSource/VectorTileSource.mdx

@@ -1,19 +0,0 @@
-import { Story, Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
-
-import * as VectorTileSourceStories from './VectorTileSource.stories.svelte';
-
-<Meta of={VectorTileSourceStories} />
-
-# VectorTileSource
-
-Loads tiled vector data from a tileserver. Any mablibre-supported tileserver will work, but we'll typically use tiles served by `versatiles-rs` or `versatiles-node-static-proxy`.
-
-```jsx
-<Map>
-	<VectorTileSource
-		url="https://static.datenhub.net/rent_merged.versatiles?tiles/{z}/{x}/{y}"
-		id="chargers"
-	/>
-	<VectorLayer sourceId="chargers" />
-</Map>
-```

package/dist/maplibre/WithLinkLocation/WithLinkLocation.mdx

@@ -1,11 +0,0 @@
-import { Story, Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
-
-import * as WithLinkLocationStories from './WithLinkLocation.stories.svelte';
-
-<Meta of={WithLinkLocationStories} />
-
-# WithLinkLocation
-
-<Controls />
-
-<Stories />