@swr-data-lab/components 2.26.1 → 2.29.0

package/dist/Breakout/Breakout.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">let { layout = 'medium', children } = $props();
+export {};
+</script>
+
+<div class={`container ${layout}`}>
+	{@render children?.()}
+</div>
+
+<style>.container {
+  --margin: 16px;
+  --column-gap: 16px;
+  --column-width: calc((var(--grid-width) - var(--column-gap) * 11) / 12);
+  --grid-width: calc(100vw - var(--margin) * 2);
+}
+@media (min-width: 640px) {
+  .container {
+    --margin: 40px;
+  }
+}
+@media (min-width: 768px) {
+  .container {
+    --margin: 40px;
+  }
+}
+@media (min-width: 1024px) {
+  .container {
+    --margin: 48px;
+    --column-gap: 32px;
+  }
+}
+@media (min-width: 1440px) {
+  .container {
+    --grid-width: calc(Min(1312px, 100vw));
+    --margin: calc((100vw - var(--grid-width)) * 0.5);
+  }
+}
+
+@media (min-width: 1024px) {
+  .medium {
+    width: calc(var(--column-width) * 10 + var(--column-gap) * 9);
+    margin-left: calc(var(--column-width) * -1 + (var(--column-gap)) * -1);
+  }
+}
+@media (min-width: 1440px) {
+  .medium {
+    width: calc(var(--column-width) * 8 + var(--column-gap) * 7);
+    margin-left: calc(var(--column-width) * -1 + (var(--column-gap)) * -1);
+  }
+}
+
+@media (min-width: 640px) {
+  .large {
+    width: calc(var(--column-width) * 12 + var(--column-gap) * 11);
+    margin-left: calc(var(--column-width) * -1 + var(--column-gap) * -1);
+  }
+}
+@media (min-width: 1024px) {
+  .large {
+    width: calc(var(--column-width) * 12 + var(--column-gap) * 11);
+    margin-left: calc(var(--column-width) * -2 + var(--column-gap) * -2);
+  }
+}
+@media (min-width: 1440px) {
+  .large {
+    width: calc(var(--column-width) * 10 + var(--column-gap) * 11);
+    margin-left: calc(var(--column-width) * -2 + var(--column-gap) * -3);
+  }
+}
+
+.bleed {
+  width: 100vw;
+  margin-left: calc(var(--margin) * -1);
+}
+@media (min-width: 640px) {
+  .bleed {
+    margin-left: calc(var(--column-width) * -1 + (var(--column-gap)) * -1 - var(--margin) * 1);
+  }
+}
+@media (min-width: 768px) {
+  .bleed {
+    margin-left: calc(var(--column-width) * -1 + (var(--column-gap)) * -1 - var(--margin) * 1);
+  }
+}
+@media (min-width: 1024px) {
+  .bleed {
+    margin-left: calc(var(--column-width) * -2 + (var(--column-gap)) * -2 - var(--margin) * 1);
+  }
+}
+@media (min-width: 1440px) {
+  .bleed {
+    margin-left: calc(var(--column-width) * -3 + (var(--column-gap)) * -3 - var(--margin) * 1);
+  }
+}</style>

package/dist/Breakout/Breakout.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface BreakoutProps {
+    layout: 'medium' | 'large' | 'bleed';
+    children?: Snippet;
+}
+declare const Breakout: import("svelte").Component<BreakoutProps, {}, "">;
+type Breakout = ReturnType<typeof Breakout>;
+export default Breakout;

package/dist/Breakout/index.d.ts

@@ -0,0 +1,2 @@
+import Breakout from './Breakout.svelte';
+export default Breakout;

package/dist/Breakout/index.js

@@ -0,0 +1,2 @@
+import Breakout from './Breakout.svelte';
+export default Breakout;

package/dist/ChartList/ChartList.svelte

@@ -30,8 +30,8 @@ let { project, charts, baseUrl } = $props();
 				</tbody>
 			</table>
 		{/if}
+		<p class="notes">Nutze die "Embed URL" um Grafiken in Sophora einzubinden.</p>
 	</div>
-	<p class="notes">Nutze die "Embed URL" um Grafiken in Sophora einzubinden.</p>
 </main>
 
 <style>main {
@@ -41,8 +41,8 @@ let { project, charts, baseUrl } = $props();
   flex-flow: column;
   font-family: var(--swr-sans);
   font-size: var(--fs-small-1);
+  background: var(--color-pageFill);
   color: var(--color-textPrimary);
-  max-width: 40rem;
   margin: 0 auto;
   height: 90vh;
 }
@@ -52,16 +52,14 @@ main * {
 }
 
 .inner {
+  margin: 0 auto;
   width: 100%;
-  background: var(--color-surfaceFill);
-  border: 1px solid var(--color-surfaceBorder);
+  max-width: 40rem;
 }
 
 h1 {
   font-size: var(--fs-base);
-  border-bottom: 1px solid var(--color-textSecondary);
-  padding-bottom: 0.2em;
-  background-color: rgba(0, 0, 0, 0.2);
+  margin-bottom: 0.2em;
 }
 h1 em {
   background: rgba(134, 139, 84, 0.4);
@@ -74,6 +72,7 @@ table {
   border-collapse: collapse;
   border-spacing: 0;
   width: 100%;
+  border: 1px solid var(--color-surfaceBorder);
 }
 
 a {
@@ -83,8 +82,7 @@ a {
 }
 
 th,
-td,
-h1 {
+td {
   padding: 0.2em 0.4em;
   text-align: left;
 }

package/dist/Copy/Copy.svelte

@@ -1,12 +1,10 @@
-<script lang="ts">let { weight = 'regular', children } = $props();
+<script lang="ts">let { as = 'div', weight = 'regular', children } = $props();
 export {};
 </script>
 
-<div class={['container', weight]}>
-	{#if children}
-		{@render children()}
-	{/if}
-</div>
+<svelte:element this={as} class={['container', weight]}>
+	{@render children?.()}
+</svelte:element>
 
 <style>.container {
   font-family: var(--swr-sans);

package/dist/Copy/Copy.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 interface CopyProps {
     weight?: 'regular' | 'bold';
+    as?: string;
     children?: Snippet;
 }
 declare const Copy: import("svelte").Component<CopyProps, {}, "">;

package/dist/DesignTokens/DesignTokens.svelte

@@ -47,6 +47,7 @@ const rules = [
   --color-pageFill: var(--pageFill-light);
   --color-surfaceFill: var(--surfaceFill-light);
   --color-surfaceBorder: var(--surfaceBorder-light);
+  --color-dropShadow: var(--dropShadow-light);
 }
 .container[data-theme=dark] {
   --color-logoFill: var(--logoFill-dark);
@@ -56,6 +57,7 @@ const rules = [
   --color-textPrimary: var(--textPrimary-dark);
   --color-textSecondary: var(--textSecondary-dark);
   --color-textSecondaryHover: var(--textSecondaryHover-dark);
+  --color-dropShadow: var(--dropShadow-dark);
 }
 .container {
   --swr-text: "SWR-VAR-Text", sans-serif;

package/dist/DesignTokens/Tokens.js

@@ -169,12 +169,16 @@ const semantics = {
         light: '#ffffff'
     },
     surfaceBorder: {
-        dark: 'hsl(0, 0%, 35%)',
-        light: shades.gray.base
+        dark: 'rgba(255,255,255,.15)',
+        light: shades.gray.light3
     },
     pageFill: {
         dark: '#0C0C0C',
         light: '#fff'
+    },
+    dropShadow: {
+        dark: 'rgba(0,0,0, 0.25)',
+        light: 'rgba(0,0,0, 0.0375)'
     }
 };
 const scales = {

package/dist/DevContainer/DevContainer.svelte

@@ -0,0 +1,423 @@
+<script lang="ts">import SwrLogo from './SwrLogo.svg.svelte';
+import GridInspector from './GridInspector.svelte';
+import Copy from '../Copy/Copy.svelte';
+import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+let { showHeader = true, showNav = true, showArticleHeader = true, showPlayer = true, eyebrow = 'Wärmewende in Ihrer Gemeinde', title = 'Baden-Württemberg heizt noch größtenteils fossil', intro = 'Fast drei Viertel der privaten Heizungen in Baden-Württemberg liefen 2022 noch mit Öl und Gas. In Neubauten werden inzwischen überwiegend Wärmepumpen eingebaut, doch es gibt regionale Unterschiede.', showBreadcrumbs = true, showGrid = false, paragraphsAbove = 0, paragraphsBelow = 0, children } = $props();
+const date = new Date();
+let articleEl = $state();
+</script>
+
+<DesignTokens>
+	<div class="container">
+		{#if showHeader}
+			<header>
+				<div class="header-inner">
+					<i class="logo">
+						<SwrLogo />
+					</i>
+				</div>
+			</header>
+		{/if}
+		{#if showNav}
+			<div class="nav">
+				<div class="nav-inner grid">
+					<i class="circle"></i>
+					<ul>
+						<li>Nachrichten Übersicht</li>
+						<li>Baden-Württemberg</li>
+						<li>Rheinland-Pfalz</li>
+					</ul>
+				</div>
+			</div>
+		{/if}
+		{#if showBreadcrumbs}
+			<div class="breadcrumbs"></div>
+		{/if}
+
+		{#if showPlayer}
+			<div class="player">
+				<i class="circle"></i>
+				<div class="player-buttons">
+					<i class="button"></i>
+					<i class="button"></i>
+				</div>
+			</div>
+		{/if}
+		<article bind:this={articleEl} class="grid article">
+			{#if showGrid}
+				<GridInspector target={articleEl}></GridInspector>
+			{/if}
+			{#if showArticleHeader}
+				<div class="article-header">
+					<span class="article-eyebrow">{eyebrow}</span>
+					<h1 class="article-title">{title}</h1>
+					<p class="article-intro">{intro}</p>
+					<div class="article-meta">
+						<p class="article-date">
+							<span>Stand </span>
+							{date.toLocaleDateString('de-DE')}
+						</p>
+						<div class="article-byline">
+							<div class="byline-images">
+								<i class="byline-image"></i>
+								<i class="byline-image"></i>
+								<i class="byline-image"></i>
+							</div>
+						</div>
+					</div>
+					<div class="article-actions">
+						<i class="action-button"></i>
+						<i class="action-button"></i>
+					</div>
+				</div>
+			{/if}
+			<div class="article-body">
+				{#if paragraphsAbove > 0}
+					{#each { length: paragraphsAbove }}
+						<Copy as="p">
+							Das SWR Data Lab hat Kaufpreise, Fahrzeugdaten und Betriebskosten von über 5.500
+							Neuwagenmodellen von 2024 bis April 2025 aus dem ADAC-Autokatalog untersucht. Die
+							Analyse zeigt, wie teuer ein Elektroauto, Diesel oder Benziner der unteren
+							Mittelklasse beim Kauf und Betrieb über viele Jahre im Mittel ist.
+						</Copy>
+					{/each}
+				{/if}
+				<div class="embed">
+					{@render children?.()}
+				</div>
+				{#if paragraphsBelow > 0}
+					{#each { length: paragraphsBelow }}
+						<Copy as="p">
+							Das SWR Data Lab hat Kaufpreise, Fahrzeugdaten und Betriebskosten von über 5.500
+							Neuwagenmodellen von 2024 bis April 2025 aus dem ADAC-Autokatalog untersucht. Die
+							Analyse zeigt, wie teuer ein Elektroauto, Diesel oder Benziner der unteren
+							Mittelklasse beim Kauf und Betrieb über viele Jahre im Mittel ist.
+						</Copy>
+					{/each}
+				{/if}
+			</div>
+		</article>
+	</div>
+</DesignTokens>
+
+<style>* {
+  box-sizing: border-box;
+}
+
+:global(svg) {
+  display: block;
+}
+
+.container {
+  --blue: hsl(221, 75%, 46%);
+  --blue-light: hsl(221, 100%, 95%);
+  color: var(--blue);
+  font-family: "SWR-VAR-Sans", sans-serif;
+}
+
+header {
+  display: flex;
+  align-items: center;
+  background: var(--blue-light);
+  border-bottom: 1px solid var(--blue);
+  height: 48px;
+  padding: 0 16px;
+}
+@media (min-width: 640px) {
+  header {
+    padding: 0 40px;
+    height: 64px;
+  }
+}
+
+.header-inner {
+  width: 100%;
+  max-width: 1312px;
+  margin: 0 auto;
+}
+
+.logo {
+  display: block;
+  height: 24px;
+}
+@media (min-width: 1440px) {
+  .logo {
+    height: 28px;
+  }
+}
+.logo :global(svg) {
+  height: 100%;
+}
+
+.nav {
+  border-bottom: 1px solid var(--blue);
+}
+.nav .nav-inner {
+  width: 100%;
+}
+.nav ul {
+  display: flex;
+  align-items: center;
+  grid-column: 2/-1;
+  list-style: none;
+  gap: 2.1em;
+  white-space: nowrap;
+  overflow: hidden;
+}
+@media (min-width: 1440px) {
+  .nav ul {
+    margin-left: -32px;
+  }
+}
+
+.nav,
+.breadcrumbs {
+  height: 48px;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+}
+@media (min-width: 640px) {
+  .nav,
+  .breadcrumbs {
+    padding: 0 40px;
+  }
+}
+
+.circle {
+  display: block;
+  border-radius: 1000px;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--blue);
+}
+
+.button {
+  display: block;
+  border: 1px solid var(--blue);
+  border-radius: 4px;
+  width: 40px;
+  height: 40px;
+}
+
+.player {
+  width: 638px;
+  height: 58px;
+  bottom: 16px;
+  left: 50%;
+  border-radius: 4px;
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transform: translateX(-50%);
+  background: var(--blue-light);
+  border: 1px solid var(--blue);
+  z-index: 100;
+  position: fixed;
+}
+
+.player-buttons {
+  column-gap: 8px;
+  display: flex;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  column-gap: 16px;
+  max-width: 1312px;
+  width: auto;
+  position: relative;
+}
+@media (min-width: 1440px) {
+  .grid {
+    column-gap: 32px;
+    margin: 0 auto;
+  }
+}
+
+.article {
+  margin: 0 16px;
+}
+@media (min-width: 640px) {
+  .article {
+    margin: 0 40px;
+  }
+}
+@media (min-width: 1024px) {
+  .article {
+    margin: 0 48px;
+  }
+}
+@media (min-width: 1440px) {
+  .article {
+    margin: 0 auto;
+  }
+}
+
+.article-body {
+  display: contents;
+}
+.article-body :global(p) {
+  margin-bottom: 1.5em;
+  grid-column: 1/13;
+}
+@media (min-width: 640px) {
+  .article-body :global(p) {
+    grid-column: 2/12;
+  }
+}
+@media (min-width: 1024px) {
+  .article-body :global(p) {
+    grid-column: 3/11;
+  }
+}
+@media (min-width: 1440px) {
+  .article-body :global(p) {
+    grid-column: 4/10;
+  }
+}
+
+.article-header {
+  margin-bottom: 24px;
+  grid-column: 1/13;
+}
+@media (min-width: 640px) {
+  .article-header {
+    grid-column: 2/12;
+  }
+}
+@media (min-width: 1024px) {
+  .article-header {
+    grid-column: 3/11;
+  }
+}
+@media (min-width: 1440px) {
+  .article-header {
+    grid-column: 4/10;
+  }
+}
+
+.article-eyebrow {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+@media (min-width: 1024px) {
+  .article-eyebrow {
+    font-size: 1.25rem;
+  }
+}
+
+.article-title {
+  font-size: 2rem;
+  line-height: 1.3;
+}
+@media (min-width: 1024px) {
+  .article-title {
+    line-height: 1.25;
+    font-size: 3rem;
+  }
+}
+
+.article-intro {
+  margin-top: 0.5em;
+  hyphens: auto;
+  font-size: 1.25rem;
+  line-height: 1.25;
+}
+@media (min-width: 1024px) {
+  .article-intro {
+    font-size: 1.5rem;
+  }
+}
+
+.article-meta {
+  display: flex;
+  font-size: 0.875rem;
+  border-bottom: 1px solid var(--blue);
+  flex-flow: column;
+  gap: 8px;
+  margin-top: 1rem;
+  padding-bottom: 1rem;
+}
+@media (min-width: 768px) {
+  .article-meta {
+    gap: 0;
+    height: 72px;
+    margin-top: 0;
+    padding-bottom: 0;
+    align-items: center;
+    flex-flow: row;
+  }
+}
+
+.article-date {
+  flex-basis: 35%;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+}
+.article-date span {
+  display: block;
+}
+
+.article-byline {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.byline-images {
+  display: flex;
+  flex-flow: row-reverse;
+}
+
+.byline-image {
+  display: block;
+  border: 1px solid var(--blue);
+  border-radius: 100px;
+  width: 47px;
+  background: white;
+  height: 47px;
+  margin-right: -10px;
+}
+.byline-image:first-child {
+  margin-right: 0;
+}
+
+.article-actions {
+  border-bottom: 1px solid var(--blue);
+  height: 64px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.action-button {
+  display: block;
+  border: 1px solid var(--blue);
+  border-radius: 4px;
+  width: 60px;
+  height: 32px;
+}
+
+.embed {
+  width: 100%;
+  grid-column: 1/13;
+}
+@media (min-width: 640px) {
+  .embed {
+    grid-column: 2/12;
+  }
+}
+@media (min-width: 1024px) {
+  .embed {
+    grid-column: 3/11;
+  }
+}
+@media (min-width: 1440px) {
+  .embed {
+    grid-column: 4/10;
+  }
+}</style>

package/dist/DevContainer/DevContainer.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+interface DevContainerProps {
+    showHeader?: boolean;
+    showNav?: boolean;
+    showPlayer?: boolean;
+    showGrid?: boolean;
+    showArticleHeader?: boolean;
+    showBreadcrumbs?: boolean;
+    paragraphsAbove?: number;
+    paragraphsBelow?: number;
+    title?: string;
+    eyebrow?: string;
+    intro?: string;
+    children?: Snippet;
+}
+declare const DevContainer: import("svelte").Component<DevContainerProps, {}, "">;
+type DevContainer = ReturnType<typeof DevContainer>;
+export default DevContainer;

package/dist/DevContainer/GridInspector.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">"use strict";
+const { target } = $props();
+let w = $state(0);
+let cols = $derived.by(() => {
+    w;
+    if (!target)
+        return [];
+    return window.getComputedStyle(target).gridTemplateColumns.split(' ');
+});
+</script>
+
+<div class="container">
+	{#each cols as c}
+		<i class="col" style:width={c}></i>
+	{/each}
+</div>
+
+<svelte:window bind:innerWidth={w} />
+
+<style>
+	.container {
+		display: flex;
+		justify-content: space-between;
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		opacity: 0.1;
+		pointer-events: none;
+		z-index: 0;
+	}
+	.col {
+		background: rgb(104, 120, 179);
+		flex-grow: 0;
+		&:first-child {
+			border-left: 0;
+		}
+		&:last-child {
+			border-right: 0;
+		}
+	}
+</style>

package/dist/DevContainer/GridInspector.svelte.d.ts

@@ -0,0 +1,6 @@
+interface GridInspectorProps {
+    target: HTMLElement | undefined;
+}
+declare const GridInspector: import("svelte").Component<GridInspectorProps, {}, "">;
+type GridInspector = ReturnType<typeof GridInspector>;
+export default GridInspector;

package/dist/DevContainer/SwrLogo.svg.svelte

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480.8 141.7">
+	<path
+		fill="currentColor"
+		d="M347.5 0v46.1l24.7 24.7-24.7 24.8v46.1l70.2-70.9L347.5 0zm-61.1 46.4c0-10-5.9-16-19.7-16-3 0-6.5.2-8.2.4v32.6c1.5.2 4.6.4 7.4.4 12.5 0 20.5-6.6 20.5-17.4zm39.4 88.1H290l-30.4-49.8h-1.1v49.8H229V7.1c10.8-.8 24.6-.9 39.9-.9C299 6.2 316.6 17 316.6 44c0 17.2-10.6 31.1-27.6 35.3 3.4 4.9 6.6 9.6 9.8 14.3l27 40.9zm-295.6 2c-8.9 0-18.1-.9-26.3-2.8l1.3-27.9c7.2 2.6 18 5.4 27.2 5.4 10.8 0 18.6-4.5 18.6-13.6C51 75.9.9 86.6 0 44.3c-.5-24 18.9-39.8 50.9-39.8 6.8 0 15.3.8 23.2 2.3l-.1 26c-7.2-2.1-16.7-4-24.3-4-12.3 0-18.2 5.3-18.2 12.5 0 19.8 51 12.3 51 52.1.1 24.7-19.8 43.1-52.3 43.1zM192.1 7.1 179.3 86 166.4 7.1h-29.7L123.9 86 111 7.1H81.3l22.6 127.5h33.2l14.5-81.8 14.4 81.8h33.3L221.8 7.1h-29.7z"
+	></path>
+	<path fill="currentColor" d="M347.5 0v46.1l24.7 24.7-24.7 24.8v46.1l70.2-70.9L347.5 0z"></path>
+	<path fill="currentColor" d="M410.6 0v46.1l24.7 24.7-24.7 24.8v46.1l70.2-70.9L410.6 0z"></path>
+</svg>

package/dist/DevContainer/SwrLogo.svg.svelte.d.ts

@@ -0,0 +1,26 @@
+export default SwrLogo;
+type SwrLogo = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const SwrLogo: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/DevContainer/index.d.ts

@@ -0,0 +1,2 @@
+import DevContainer from './DevContainer.svelte';
+export default DevContainer;

package/dist/DevContainer/index.js

@@ -0,0 +1,2 @@
+import DevContainer from './DevContainer.svelte';
+export default DevContainer;

package/dist/Headline/Headline.svelte

@@ -3,9 +3,7 @@ export {};
 </script>
 
 <h2 class="container">
-	{#if children}
-		{@render children()}
-	{/if}
+	{@render children?.()}
 </h2>
 
 <style>

package/dist/ScrollerSection/ScrollerSection.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">import {} from 'svelte';
+let { height = '100vh', children } = $props();
+</script>
+
+<section class="container" style:height>
+	<div class="inner">
+		{@render children?.()}
+	</div>
+</section>
+
+<style>.container {
+  display: flex;
+  align-items: center;
+}
+
+.inner {
+  margin: 0 auto;
+  padding: 1em 1.5em;
+  color: var(--color-textPrimary);
+  max-width: 40em;
+  font-family: var(--swr-sans);
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: 0.01em;
+  font-size: var(--fs-small-1);
+  border-radius: 8px;
+  background: var(--color-surfaceFill);
+  box-shadow: 0 0 8px 1px var(--color-dropShadow);
+  border: 1px solid var(--color-surfaceBorder);
+}
+@media (min-width: 500px) {
+  .inner {
+    padding: 1.25em;
+    margin: 1em auto;
+  }
+}</style>

package/dist/ScrollerSection/ScrollerSection.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type Snippet } from 'svelte';
+interface SlideContentProps {
+    height?: string;
+    children: Snippet;
+}
+declare const ScrollerSection: import("svelte").Component<SlideContentProps, {}, "">;
+type ScrollerSection = ReturnType<typeof ScrollerSection>;
+export default ScrollerSection;

package/dist/ScrollerSection/index.d.ts

@@ -0,0 +1,2 @@
+import ScrollerSection from './ScrollerSection.svelte';
+export default ScrollerSection;

package/dist/ScrollerSection/index.js

@@ -0,0 +1,2 @@
+import ScrollerSection from './ScrollerSection.svelte';
+export default ScrollerSection;

package/dist/index.d.ts

@@ -1,13 +1,14 @@
 export { default as DesignTokens } from "./DesignTokens/DesignTokens.svelte";
 export { tokens } from "./DesignTokens/index.js";
-export { default as isDarkMode } from "./isDarkMode/isDarkMode.svelte";
 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";
-export { default as Card } from "./Card/Card.svelte";
+export { default as ScrollerSection } from "./ScrollerSection/ScrollerSection.svelte";
 export { default as Scroller } from "./Scroller/Scroller.svelte";
 export { default as SwrHeader } from "./SwrHeader/SwrHeader.svelte";
+export { default as Breakout } from "./Breakout/Breakout.svelte";
+export { default as Card } from "./Card/Card.svelte";
 export { default as ChartHeader } from "./ChartHeader/ChartHeader.svelte";
 export { default as ChartFooter } from "./ChartFooter/ChartFooter.svelte";
 export { default as Logotype } from "./Logotype/Logotype.svelte";
@@ -32,4 +33,6 @@ export { default as Button } from "./Button/Button.svelte";
 export { default as Select } from "./Select/Select.svelte";
 export { default as Autocomplete } from "./Autocomplete/Autocomplete.svelte";
 export { default as ChartList } from "./ChartList/ChartList.svelte";
+export { default as DevContainer } from "./DevContainer/DevContainer.svelte";
+export { default as isDarkMode } from "./isDarkMode/isDarkMode.svelte";
 export { SWRDataLabLight, SWRDataLabDark } from "./maplibre/MapStyle";

package/dist/index.js

@@ -1,7 +1,6 @@
 // Design Tokens
 export { default as DesignTokens } from './DesignTokens/DesignTokens.svelte';
 export { tokens as tokens } from './DesignTokens/index.js';
-export { default as isDarkMode } from './isDarkMode/isDarkMode.svelte';
 
 // Typography
 export { default as Headline } from './Headline/Headline.svelte';
@@ -9,10 +8,14 @@ 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';
+// Layout
+export { default as ScrollerSection } from './ScrollerSection/ScrollerSection.svelte';
 export { default as Scroller } from './Scroller/Scroller.svelte';
 export { default as SwrHeader } from './SwrHeader/SwrHeader.svelte';
+export { default as Breakout } from './Breakout/Breakout.svelte';
+
+// Display
+export { default as Card } from './Card/Card.svelte';
 
 // Chart
 export { default as ChartHeader } from './ChartHeader/ChartHeader.svelte';
@@ -48,3 +51,5 @@ export { default as Autocomplete } from './Autocomplete/Autocomplete.svelte';
 
 // Meta
 export { default as ChartList } from './ChartList/ChartList.svelte';
+export { default as DevContainer } from './DevContainer/DevContainer.svelte';
+export { default as isDarkMode } from './isDarkMode/isDarkMode.svelte';

package/dist/maplibre/MapStyle/SWRDataLabDark.d.ts

@@ -1,5 +1,5 @@
-import type { StyleSpecification } from 'maplibre-gl';
 import type { StyleOptions } from './types';
+import type { StyleSpecification } from 'maplibre-gl';
 interface styleFunction {
     (options?: StyleOptions): StyleSpecification;
 }

package/dist/maplibre/MapStyle/SWRDataLabDark.js

@@ -1,3 +1,4 @@
+import defaultOptions from './defaultOptions';
 import makeAdmin from './components/Admin';
 import makeBuildings from './components/Buildings';
 import makeLanduse from './components/Landuse';
@@ -46,10 +47,7 @@ const { roadLabels, roadBridges, roadSurface, roadTunnels } = makeRoads(tokens);
 const { buildingFootprints, buildingExtrusions, structureExtrusions } = makeBuildings(tokens);
 const style = (opts) => {
     const options = {
-        enableBuildingExtrusions: false,
-        roads: {
-            showLabels: true
-        },
+        ...defaultOptions,
         ...opts
     };
     return {
@@ -113,7 +111,8 @@ const style = (opts) => {
             // 8. Building extrusions
             ...(options.enableBuildingExtrusions ? [buildingExtrusions] : []),
             // 8. Point labels
-            ...placeLabels,
+            ...(options.places?.showLabels ? placeLabels : []),
+            // 9. Admin boundary labels
             ...boundaryLabels
         ]
     };

package/dist/maplibre/MapStyle/SWRDataLabLight.d.ts

@@ -1,5 +1,5 @@
-import type { StyleSpecification } from 'maplibre-gl';
 import type { StyleOptions } from './types';
+import type { StyleSpecification } from 'maplibre-gl';
 interface styleFunction {
     (options?: StyleOptions): StyleSpecification;
 }

package/dist/maplibre/MapStyle/SWRDataLabLight.js

@@ -5,6 +5,7 @@ import makeTransit from './components/Transit';
 import makePlaceLabels from './components/PlaceLabels';
 import makeWalking from './components/Walking';
 import makeRoads from './components/Roads';
+import defaultOptions from './defaultOptions';
 const tokens = {
     sans_regular: ['SWR Sans Regular'],
     sans_medium: ['SWR Sans Medium'],
@@ -46,7 +47,7 @@ const { roadLabels, roadBridges, roadSurface, roadTunnels } = makeRoads(tokens);
 const { buildingFootprints, buildingExtrusions, structureExtrusions } = makeBuildings(tokens);
 const style = (opts) => {
     const options = {
-        enableBuildingExtrusions: false,
+        ...defaultOptions,
         ...opts
     };
     return {
@@ -110,7 +111,8 @@ const style = (opts) => {
             // 8. Building extrusions
             ...(options.enableBuildingExtrusions ? [buildingExtrusions] : []),
             // 8. Point labels
-            ...placeLabels,
+            ...(options.places?.showLabels ? placeLabels : []),
+            // 9. Admin boundary labels
             ...boundaryLabels
         ]
     };

package/dist/maplibre/MapStyle/defaultOptions.d.ts

@@ -0,0 +1,3 @@
+import type { StyleOptions } from './types';
+declare const opts: StyleOptions;
+export default opts;

package/dist/maplibre/MapStyle/defaultOptions.js

@@ -0,0 +1,10 @@
+const opts = {
+    enableBuildingExtrusions: false,
+    places: {
+        showLabels: true
+    },
+    roads: {
+        showLabels: true
+    }
+};
+export default opts;

package/dist/maplibre/MapStyle/types.d.ts

@@ -1,5 +1,8 @@
 interface StyleOptions {
     enableBuildingExtrusions?: boolean;
+    places?: {
+        showLabels?: boolean;
+    };
     roads?: {
         showLabels?: boolean;
     };

package/dist/maplibre/Tooltip/Tooltip.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { onDestroy } from 'svelte';
+<script lang="ts">import { onDestroy, tick } from 'svelte';
 import maplibre, {} from 'maplibre-gl';
 import { getMapContext } from '../context.svelte.js';
 import { resetPopupEventListener } from '../utils';
@@ -14,6 +14,10 @@ let el = $state();
 $effect(() => {
     if (position && el && map) {
         tooltip.setLngLat(position).setDOMContent(el).addTo(map);
+        // Ensure tooltip doesn't extend beyond the map canvas, see #223
+        tick().then(() => {
+            tooltip._update();
+        });
     }
     else {
         tooltip.remove();

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@swr-data-lab/components",
 	"description": "SWR Data Lab component library",
-	"version": "2.26.1",
+	"version": "2.29.0",
 	"author": "SWR Data Lab",
 	"license": "UNLICENSED",
 	"type": "module",
@@ -59,7 +59,7 @@
 		"concurrently": "^9.2.1",
 		"http-server": "^14.1.1",
 		"mdx-mermaid": "^2.0.3",
-		"playwright": "^1.55.0",
+		"playwright": "^1.55.1",
 		"publint": "^0.3.12",
 		"sass": "^1.91.0",
 		"sass-embedded": "^1.93.2",
@@ -69,7 +69,7 @@
 		"svelte-check": "^4.3.2",
 		"svelte-preprocess": "^6.0.3",
 		"typescript": "^5.9.2",
-		"vite": "^7.1.7",
+		"vite": "^7.1.11",
 		"vitest": "^3.1.1",
 		"wait-on": "^8.0.1"
 	},