@swr-data-lab/components 2.26.0 → 2.28.0

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/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/SwrHeader/SwrHeader.svelte

@@ -1,11 +1,10 @@
-<script lang="ts">import { getContext } from 'svelte';
+<script lang="ts">import {} from 'svelte';
 import Caption from '../Caption/Caption.svelte';
-let theme = getContext('theme');
 const { title, subtitle, eyebrow, imageModules, updated, bylines = [] } = $props();
 const updated_on = updated ? (updated instanceof Date ? updated : new Date(updated)) : null;
 </script>
 
-<header class={`container theme-${theme}`}>
+<header class="container">
 	{#if eyebrow}
 		<p class="eyebrow">{eyebrow}</p>
 	{/if}
@@ -46,10 +45,7 @@ const updated_on = updated ? (updated instanceof Date ? updated : new Date(updat
   margin: 0 auto;
   margin-bottom: 1rem;
   max-width: 44rem;
-  text-shadow: 0 0 4px white;
-}
-.container.theme-dark {
-  text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
+  text-shadow: 0 0 6px var(--color-pageFill);
 }
 
 .eyebrow {
@@ -74,7 +70,6 @@ const updated_on = updated ? (updated instanceof Date ? updated : new Date(updat
   line-height: 1.4;
   font-size: var(--fs-base);
   font-weight: 400;
-  text-shadow: none;
   hyphens: auto;
 }
 

package/dist/index.d.ts

@@ -7,6 +7,7 @@ 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 Scroller } from "./Scroller/Scroller.svelte";
+export { default as ScrollerSection } from "./ScrollerSection/ScrollerSection.svelte";
 export { default as SwrHeader } from "./SwrHeader/SwrHeader.svelte";
 export { default as ChartHeader } from "./ChartHeader/ChartHeader.svelte";
 export { default as ChartFooter } from "./ChartFooter/ChartFooter.svelte";

package/dist/index.js

@@ -12,6 +12,7 @@ export { default as Note } from './Note/Note.svelte';
 // Display
 export { default as Card } from './Card/Card.svelte';
 export { default as Scroller } from './Scroller/Scroller.svelte';
+export { default as ScrollerSection } from './ScrollerSection/ScrollerSection.svelte';
 export { default as SwrHeader } from './SwrHeader/SwrHeader.svelte';
 
 // Chart

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.0",
+	"version": "2.28.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"
 	},