@swr-data-lab/components 1.13.13 → 1.15.0

package/dist/ChartFooter/ChartFooter.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">import Logotype from '../Logotype/Logotype.svelte';
 import Note from '../Note/Note.svelte';
-let { layout = 'one-up', children } = $props();
+let { layout = 'one-up', align = 'left', children } = $props();
 </script>
 
-<footer class={`container ${layout}`}>
+<footer class={`container ${layout} align-${align}`}>
 	{#if children}
 		<Note>
 			{@render children()}
@@ -24,6 +24,11 @@ let { layout = 'one-up', children } = $props();
   flex-flow: column;
   align-items: flex-start;
 }
+.one-up.align-center {
+  align-items: center;
+  text-align: center;
+  text-wrap: balance;
+}
 
 .two-up {
   display: grid;

package/dist/ChartFooter/ChartFooter.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 interface ChartFooterProps {
-    layout: 'one-up' | 'two-up';
+    layout?: 'one-up' | 'two-up';
+    align?: 'left' | 'center';
     children?: Snippet;
 }
 declare const ChartFooter: import("svelte").Component<ChartFooterProps, {}, "">;

package/dist/ChartHeader/ChartHeader.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">import Headline from '../Headline/Headline.svelte';
 import Copy from '../Copy/Copy.svelte';
 import slugify from '../utils/slugify';
-let { title, subtitle, children } = $props();
+let { title, subtitle, align = 'left', children } = $props();
 </script>
 
-<header class="container" id={slugify(title)}>
+<header class={`container align-${align}`} id={slugify(title)}>
 	<Headline>{title}</Headline>
 	{#if subtitle}
 		<Copy><p class="subtitle">{subtitle}</p></Copy>
@@ -20,6 +20,12 @@ let { title, subtitle, children } = $props();
 	.container {
 		color: var(--violet-blue);
 		font-family: var(--swr-sans);
+		display: flex;
+		flex-flow: column;
+		gap: 0.125rem;
+	}
+	.align-center {
+		text-align: center;
 	}
 	.subtitle {
 		text-wrap: balance;

package/dist/ChartHeader/ChartHeader.svelte.d.ts

@@ -2,6 +2,7 @@ import type { Snippet } from 'svelte';
 interface ChartHeaderProps {
     title: string;
     subtitle?: string;
+    align?: 'left' | 'center';
     children?: Snippet;
 }
 declare const ChartHeader: import("svelte").Component<ChartHeaderProps, {}, "">;

package/dist/DesignTokens/Tokens.js

@@ -132,6 +132,7 @@ const shades = {
     gray: {
         light5: 'hsl(225, 2%, 95%)',
         light3: 'hsl(225, 2%, 77%)',
+        light1: 'hsl(225, 2%, 62%)',
         base: 'hsl(227, 2%, 50%)',
         dark2: 'hsl(236, 2%, 38%)',
         dark3: 'hsl(236, 2%, 32%)',

package/dist/Logotype/Logotype.svelte

@@ -39,9 +39,9 @@
 	svg {
 		display: block;
 		width: auto;
-		height: calc(var(--fs-small-2) * 0.9);
+		height: calc(var(--fs-small-2) * 0.8);
 	}
 	path {
-		fill: var(--violet-dark-5);
+		fill: var(--gray-light-1);
 	}
 </style>

package/dist/Note/Note.svelte

@@ -21,6 +21,10 @@ export {};
 .container :global(p) {
   margin-bottom: 0.5em;
 }
+.container :global(a),
+.container :global(summary) {
+  text-underline-offset: 0.15em;
+}
 .container :global(a):hover, .container :global(a):focus-visible,
 .container :global(summary):hover,
 .container :global(summary):focus-visible {

package/dist/maplibre/Map/Map.svelte.d.ts

@@ -18,6 +18,6 @@ interface MapProps {
     options?: any;
     children?: Snippet;
 }
-declare const Map: import("svelte").Component<MapProps, {}, "zoom" | "pitch" | "center" | "bearing" | "loading">;
+declare const Map: import("svelte").Component<MapProps, {}, "center" | "zoom" | "pitch" | "bearing" | "loading">;
 type Map = ReturnType<typeof Map>;
 export default Map;

package/package.json

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