@swr-data-lab/components 1.10.0 → 1.11.0

package/.storybook/main.ts

@@ -11,20 +11,14 @@ const config: StorybookConfig = {
     '../src/**/*.mdx'
   ],
 
-  addons: [
-    {
-      name: '@storybook/addon-svelte-csf',
-      options: {
-        legacyTemplate: true
-      }
-    },
-    getAbsolutePath('@storybook/addon-links'),
-    getAbsolutePath('@storybook/addon-essentials'),
-    getAbsolutePath('@chromatic-com/storybook'),
-    getAbsolutePath('@storybook/experimental-addon-test')
-  ],
+  addons: [{
+    name: getAbsolutePath("@storybook/addon-svelte-csf"),
+    options: {
+      legacyTemplate: true
+    }
+  }, getAbsolutePath('@storybook/addon-links'), getAbsolutePath('@chromatic-com/storybook'), getAbsolutePath('@storybook/addon-vitest'), getAbsolutePath("@storybook/addon-docs")],
   framework: {
-    name: '@storybook/sveltekit',
+    name: getAbsolutePath("@storybook/sveltekit"),
     options: {}
   },
 

package/.storybook/preview.ts

@@ -1,4 +1,4 @@
-import type { Preview } from "@storybook/svelte";
+import type { Preview } from "@storybook/sveltekit";
 
 const preview: Preview = {
   parameters: {

package/package.json

@@ -1,71 +1,70 @@
 {
-	"name": "@swr-data-lab/components",
-	"description": "SWR Data Lab component library",
-	"author": "SWR Data Lab",
-	"publishConfig": {
-		"access": "restricted"
-	},
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"storybook": "storybook dev -p 6006",
-		"start": "storybook dev -p 6006",
-		"build-storybook": "storybook build --disable-telemetry",
-		"test-storybook": "vitest run --project=storybook",
-		"test-storybook:ci": "concurrently -k -s first -n \"Storybook,Test\" -c \"magenta,blue\" \"npm run build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && npm run test-storybook\"",
-		"semantic-release": "semantic-release"
-	},
-	"dependencies": {
-		"svelte-select": "^5.8.3"
-	},
-	"devDependencies": {
-		"@chromatic-com/storybook": "^2.0.2",
-		"@semantic-release/changelog": "^6.0.3",
-		"@semantic-release/git": "^10.0.1",
-		"@semantic-release/npm": "^12.0.1",
-		"@storybook/addon-essentials": "^8.6.4",
-		"@storybook/addon-links": "^8.6.4",
-		"@storybook/addon-svelte-csf": "^5.0.0-next.27",
-		"@storybook/blocks": "^8.6.4",
-		"@storybook/docs-tools": "^8.6.4",
-		"@storybook/experimental-addon-test": "^8.6.12",
-		"@storybook/svelte": "^8.6.4",
-		"@storybook/sveltekit": "^8.6.4",
-		"@storybook/test": "^8.6.4",
-		"@storybook/test-runner": "^0.22.0",
-		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^5.0.3",
-		"@vitest/browser": "^3.1.1",
-		"@vitest/coverage-v8": "^3.1.1",
-		"concurrently": "^9.0.1",
-		"http-server": "^14.1.1",
-		"playwright": "^1.51.1",
-		"sass-embedded": "^1.78.0",
-		"semantic-release": "^24.1.2",
-		"storybook": "^8.6.4",
-		"svelte": "^5.23.0",
-		"svelte-check": "^4.0.0",
-		"typescript": "^5.0.0",
-		"vite": "^6.0.0",
-		"vitest": "^3.1.1",
-		"wait-on": "^8.0.1"
-	},
-	"type": "module",
-	"release": {
-		"plugins": [
-			"@semantic-release/commit-analyzer",
-			"@semantic-release/release-notes-generator",
-			"@semantic-release/npm"
-		]
-	},
-	"exports": {
-		".": {
-			"svelte": "./src/index.js"
-		}
-	},
-	"version": "1.10.0"
+  "name": "@swr-data-lab/components",
+  "description": "SWR Data Lab component library",
+  "author": "SWR Data Lab",
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "storybook": "storybook dev -p 6006",
+    "start": "storybook dev -p 6006",
+    "build-storybook": "storybook build --disable-telemetry",
+    "test-storybook": "vitest run --project=storybook",
+    "test-storybook:ci": "concurrently -k -s first -n \"Storybook,Test\" -c \"magenta,blue\" \"npm run build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && npm run test-storybook\"",
+    "semantic-release": "semantic-release"
+  },
+  "dependencies": {
+    "svelte-select": "^5.8.3"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.0.0-next.6",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/npm": "^12.0.1",
+    "@storybook/addon-docs": "^9.0.0-beta.11",
+    "@storybook/addon-links": "^9.0.0-beta.11",
+    "@storybook/addon-svelte-csf": "^5.0.0-next.30",
+    "@storybook/addon-vitest": "^9.0.0-beta.11",
+    "@storybook/sveltekit": "^9.0.0-beta.11",
+    "@storybook/test-runner": "^0.23.0-next.1",
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@vitest/browser": "^3.1.1",
+    "@vitest/coverage-v8": "^3.1.1",
+    "concurrently": "^9.0.1",
+    "http-server": "^14.1.1",
+    "playwright": "^1.51.1",
+    "sass-embedded": "^1.78.0",
+    "semantic-release": "^24.1.2",
+    "storybook": "^9.0.0-beta.11",
+    "svelte": "^5.23.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^6.0.0",
+    "vitest": "^3.1.1",
+    "wait-on": "^8.0.1"
+  },
+  "type": "module",
+  "release": {
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      "@semantic-release/npm"
+    ]
+  },
+  "exports": {
+    ".": {
+      "svelte": "./src/index.js"
+    }
+  },
+  "version": "1.11.0",
+  "overrides": {
+    "storybook": "$storybook"
+  }
 }

package/src/Autocomplete/Autocomplete.stories.svelte

@@ -1,13 +1,12 @@
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { userEvent, within, expect } from '@storybook/test';
+	import { userEvent, within, expect } from 'storybook/test';
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 
 	import Autocomplete from './Autocomplete.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Deprecated/Autocomplete',
-		component: Autocomplete
+		title: 'Deprecated/Autocomplete'
 	});
 
 	const testData = ['Apples', 'Oranges', 'Pears', 'Peaches', 'Bananas'].map((el) => {

package/src/Autocomplete/Autocomplete.svelte

@@ -161,9 +161,6 @@ Data should be provided as array of objects. Each object contains the informatio
 		color: white;
 		display: flex;
 		flex-flow: column;
-		label {
-			@extend %form-label;
-		}
 
 		input {
 			@extend %form-input;

package/src/Button/Button.stories.svelte

@@ -4,8 +4,7 @@
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Form/Button',
-		component: Button
+		title: 'Form/Button'
 	});
 </script>
 

package/src/Caption/Caption.stories.svelte

@@ -5,8 +5,7 @@
 	import Caption from './Caption.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Typography/Caption',
-		component: Caption
+		title: 'Typography/Caption'
 	});
 </script>
 

package/src/Card/Card.stories.svelte

@@ -4,8 +4,7 @@
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Display/Card/Base',
-		component: Card
+		title: 'Display/Card/Base'
 	});
 </script>
 

package/src/ChartFooter/ChartFooter.mdx

@@ -1,4 +1,4 @@
-import { Story,  Meta, Primary, Controls, Stories } from '@storybook/blocks';
+import { Story,  Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
  
 import * as ChartFooterStories from './ChartFooter.stories.svelte';
 

package/src/ChartFooter/ChartFooter.stories.svelte

@@ -6,8 +6,7 @@
 	import Middot from '../Middot/Middot.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Chart/ChartFooter',
-		component: ChartFooter
+		title: 'Chart/ChartFooter'
 	});
 </script>
 

package/src/ChartHeader/ChartHeader.mdx

@@ -1,4 +1,4 @@
-import { Story, Meta, Primary, Controls, Stories } from '@storybook/blocks';
+import { Story, Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
  
 import * as ChartHeaderStories from './ChartHeader.stories.svelte';
 

package/src/ChartHeader/ChartHeader.stories.svelte

@@ -1,12 +1,11 @@
 <script context="module">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-	import { expect } from '@storybook/test';
+	import { expect } from 'storybook/test';
 	import ChartHeader from './ChartHeader.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Chart/ChartHeader',
-		component: ChartHeader
+		title: 'Chart/ChartHeader'
 	});
 </script>
 

package/src/Copy/Copy.stories.svelte

@@ -5,8 +5,7 @@
 	import Copy from './Copy.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Typography/Copy',
-		component: Copy
+		title: 'Typography/Copy'
 	});
 </script>
 

package/src/DesignTokens/DesignTokens.mdx

@@ -1,4 +1,4 @@
-import { Title, Story, ColorPalette, ColorItem, Meta, Typeset, Canvas } from '@storybook/blocks';
+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"

package/src/DesignTokens/DesignTokens.svelte

@@ -1,6 +1,12 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import { shades } from './Tokens';
 
+	interface DesignTokensProps {
+		children?: Snippet;
+	}
+	let { children }: DesignTokensProps = $props();
+
 	const rules = [
 		...Object.keys(shades).map((key) => {
 			return Object.entries(shades[key])
@@ -16,7 +22,9 @@
 </script>
 
 <div class="container" style={rules.join(';')}>
-	<slot />
+	{#if children}
+		{@render children()}
+	{/if}
 </div>
 
 <style lang="scss">

package/src/FormLabel/FormLabel.mdx

@@ -0,0 +1,13 @@
+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/src/FormLabel/FormLabel.stories.svelte

@@ -0,0 +1,50 @@
+<script context="module">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { userEvent, within, expect } from 'storybook/test';
+
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+
+	import FormLabel from './FormLabel.svelte';
+	import Select from '../Select/Select.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Form/Label'
+	});
+</script>
+
+<Story name="Default">
+	<DesignTokens>
+		<FormLabel htmlFor="">Deine Gemeinde</FormLabel>
+	</DesignTokens>
+</Story>
+
+<Story
+	name="With Select"
+	play={async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+		const label = canvas.getByTestId('label-container');
+		const input = canvas.getByPlaceholderText('...');
+		await step('Label renders children', async () => {
+			await userEvent.click(label);
+			expect(label).toHaveTextContent('Deine Gemeinde');
+		});
+		await step('Clicking the label focuses the input', async () => {
+			await userEvent.click(label);
+			expect(input).toHaveFocus();
+		});
+	}}
+>
+	<DesignTokens>
+		<FormLabel htmlFor="select-gemeinde">Deine Gemeinde</FormLabel>
+		<Select
+			inputId="select-gemeinde"
+			placeholder="..."
+			value={undefined}
+			items={[
+				{ value: 'konstanz', label: 'Konstanz' },
+				{ value: 'stuttgart', label: 'Stuttgart' },
+				{ value: 'heidelberg', label: 'Heidelberg' }
+			]}
+		></Select>
+	</DesignTokens>
+</Story>

package/src/FormLabel/FormLabel.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface FormLabelProps {
+		as?: string;
+		htmlFor?: string;
+		children?: Snippet;
+	}
+	let { as = 'label', htmlFor, children }: FormLabelProps = $props();
+</script>
+
+{#if as == 'legend'}
+	<legend class="container" data-testid="label-container">
+		{#if children}
+			{@render children()}
+		{/if}
+	</legend>
+{/if}
+{#if as == 'label'}
+	<label class="container" for={htmlFor} data-testid="label-container">
+		{#if children}
+			{@render children()}
+		{/if}
+	</label>
+{/if}
+
+<style>
+	.container {
+		font-family: var(--swr-text);
+		font-size: var(--fs-small-1);
+		font-weight: 400;
+		margin-bottom: 0.25em;
+		display: inline-block;
+		letter-spacing: 0.005em;
+	}
+</style>

package/src/FormLabel/index.ts

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

package/src/Headline/Headline.stories.svelte

@@ -5,8 +5,7 @@
 	import Headline from './Headline.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Typography/Headline',
-		component: Headline
+		title: 'Typography/Headline'
 	});
 </script>
 

package/src/HighlightCard/HighlightCard.stories.svelte

@@ -4,8 +4,7 @@
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Display/Card/HighlightCard',
-		component: HighlightCard
+		title: 'Display/Card/HighlightCard'
 	});
 </script>
 

package/src/Input/Input.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import FormLabel from '../FormLabel/FormLabel.svelte';
+
 	export let label: string = '';
 	export let name: string = '';
 	export let placeholder: string = '';
@@ -6,16 +8,13 @@
 </script>
 
 <div class="container">
-	<label for={name}>{label}</label>
+	<FormLabel htmlFor={name}>{label}</FormLabel>
 	<input {name} type="text" {placeholder} bind:value />
 </div>
 
 <style lang="scss">
 	@use '../styles/base.scss';
 
-	label {
-		@extend %form-label;
-	}
 	input {
 		@extend %form-input;
 	}

package/src/Intro.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs/blocks";
 
 <Meta title="About" />
 

package/src/Logotype/Logotype.stories.svelte

@@ -4,8 +4,7 @@
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Chart/Logotype',
-		component: Logotype
+		title: 'Chart/Logotype'
 	});
 </script>
 

package/src/Middot/Middot.stories.svelte

@@ -4,8 +4,7 @@
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Chart/Middot',
-		component: Middot
+		title: 'Chart/Middot'
 	});
 </script>
 

package/src/Note/Note.stories.svelte

@@ -6,8 +6,7 @@
 	import Note from './Note.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Typography/Note',
-		component: Note
+		title: 'Typography/Note'
 	});
 </script>
 

package/src/Select/Select.mdx

@@ -1,4 +1,4 @@
-import { Story,  Meta, Primary, Controls, Stories} from '@storybook/blocks';
+import { Story,  Meta, Primary, Controls, Stories} from '@storybook/addon-docs/blocks';
  
 import * as SelectStories from './Select.stories.svelte';
 

package/src/Select/Select.stories.svelte

@@ -1,17 +1,17 @@
 <script context="module" lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import Select from './Select.svelte';
+	import FormLabel from '../FormLabel/FormLabel.svelte';
 	import StoryTemplate from './SelectStoriesTemplate.svelte';
 	import jobsData from './mock_data/jobs.json';
 
 	const { Story } = defineMeta({
-		title: 'Form/Select',
-		component: Select
+		title: 'Form/Select'
 	});
 </script>
 
 <script lang="ts">
-	import { userEvent, within, expect } from '@storybook/test';
+	import { userEvent, within, expect } from 'storybook/test';
 	import { type SelectItem } from './Select.types';
 	let selectedItem: SelectItem | undefined = undefined;
 </script>
@@ -148,7 +148,7 @@
 >
 	<StoryTemplate>
 		{#snippet demoComponent()}
-			<label for="job-select">Berufe</label>
+			<FormLabel htmlFor="job-select">Berufe</FormLabel>
 			<Select
 				bind:value={selectedItem}
 				inputId="job-select"

package/src/Select/SelectStoriesTemplate.svelte

@@ -1,5 +1,6 @@
 <script>
 	import Select from './Select.svelte';
+	import FormLabel from '../FormLabel/FormLabel.svelte';
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 
 	let { args = null, selectedItem = $bindable(), demoComponent = null } = $props();
@@ -9,7 +10,7 @@
 	{#if demoComponent}
 		{@render demoComponent()}
 	{:else}
-		<label for={args.inputId}>Select</label>
+		<FormLabel htmlFor={args.inputId}>Select</FormLabel>
 		<Select {...args} bind:value={selectedItem} />
 	{/if}
 </DesignTokens>
@@ -20,11 +21,6 @@ value = {JSON.stringify(selectedItem, null, ' ')}</pre>
 {/if}
 
 <style>
-	label {
-		display: block;
-		font-family: var(--swr-sans);
-		margin-bottom: 0.25em;
-	}
 	.output {
 		display: block;
 		margin-top: 1rem;

package/src/Switcher/Switcher.mdx

@@ -1,4 +1,4 @@
-import { Story,  Meta, Primary, Controls, Stories} from '@storybook/blocks';
+import { Story,  Meta, Primary, Controls, Stories} from '@storybook/addon-docs/blocks';
  
 import * as SwictherStories from './Switcher.stories.svelte';
 

package/src/Switcher/Switcher.stories.svelte

@@ -2,11 +2,10 @@
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import Switcher from './Switcher.svelte';
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-	import { userEvent, within, expect } from '@storybook/test';
+	import { userEvent, within, expect } from 'storybook/test';
 
 	const { Story } = defineMeta({
-		title: 'Form/Switcher',
-		component: Switcher
+		title: 'Form/Switcher'
 	});
 </script>
 

package/src/Switcher/Switcher.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import FormLabel from '../FormLabel/FormLabel.svelte';
+
 	interface SwitcherProps {
 		/**
 		 * Human-readable label
@@ -29,7 +31,7 @@
 </script>
 
 <fieldset class="container" class:small={size === 'small'}>
-	<legend>{label}</legend>
+	<FormLabel as="legend">{label}</FormLabel>
 	<ul>
 		{#each options as o (o)}
 			<li class:is-selected={o === value}>
@@ -50,12 +52,6 @@
 		font-family: var(--swr-sans);
 	}
 
-	legend {
-		font-size: var(--fs-small-2);
-		font-weight: 500;
-		margin-bottom: 0.35em;
-	}
-
 	ul {
 		width: 100%;
 		display: flex;

package/src/styles/base.scss

@@ -7,14 +7,6 @@ $bp-l: 1024px;
 $bp-xl: 1440px;
 
 // TODO drop everything below
-%form-label {
-	font-family: var(--swr-sans);
-	font-size: 0.9rem;
-	line-height: 1;
-	letter-spacing: 0.0045em;
-	display: block;
-	margin-bottom: 0.5em;
-}
 
 %form-input {
 	font-family: var(--swr-sans);

package/vitest.workspace.ts

@@ -3,7 +3,7 @@ import { fileURLToPath } from 'node:url';
 
 import { defineWorkspace } from 'vitest/config';
 
-import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
 
 const dirname =
 	typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));