SWRdata · awesomephant · May 9, 2025 · May 9, 2025
diff --git a/components/src/Autocomplete/Autocomplete.stories.svelte b/components/src/Autocomplete/Autocomplete.stories.svelte
@@ -6,7 +6,8 @@
 	import Autocomplete from './Autocomplete.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Deprecated/Autocomplete'
+		title: 'Deprecated/Autocomplete',
+		component: Autocomplete
 	});
 
 	const testData = ['Apples', 'Oranges', 'Pears', 'Peaches', 'Bananas'].map((el) => {
@@ -20,7 +21,7 @@
 
 <Story
 	name="Basic"
-	tags={['autodocs']}
+	asChild
 	play={async ({ canvasElement, step }) => {
 		const canvas = within(canvasElement);
 		const input = canvas.getByTestId('autocomplete-input');

diff --git a/components/src/Button/Button.stories.svelte b/components/src/Button/Button.stories.svelte
@@ -4,16 +4,17 @@
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Form/Button'
+		title: 'Form/Button',
+		component: Button
 	});
 </script>
 
-<Story name="Basic">
+<Story name="Basic" asChild>
 	<DesignTokens>
 		<Button label="This is a button label"></Button>
 	</DesignTokens>
 </Story>
-<Story name="Disabled">
+<Story name="Disabled" asChild>
 	<DesignTokens>
 		<Button disabled label="This button is disabled"></Button>
 	</DesignTokens>

diff --git a/components/src/Caption/Caption.stories.svelte b/components/src/Caption/Caption.stories.svelte
@@ -5,16 +5,17 @@
 	import Caption from './Caption.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Typography/Caption'
+		title: 'Typography/Caption',
+		component: Caption
 	});
 </script>
 
-<Story name="Default">
+<Story name="Default" asChild>
 	<DesignTokens>
 		<Caption>Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen)</Caption>
 	</DesignTokens>
 </Story>
-<Story name="Bold">
+<Story name="Bold" asChild>
 	<DesignTokens>
 		<Caption weight="bold">
 			Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen)

diff --git a/components/src/Card/Card.stories.svelte b/components/src/Card/Card.stories.svelte
@@ -4,11 +4,12 @@
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Display/Card/Base'
+		title: 'Display/Card/Base',
+		component: Card
 	});
 </script>
 
-<Story name="Basic card">
+<Story name="Basic card" asChild>
 	<DesignTokens>
 		<Card>
 			<h1>Any content</h1>

diff --git a/components/src/ChartFooter/ChartFooter.stories.svelte b/components/src/ChartFooter/ChartFooter.stories.svelte
@@ -6,11 +6,12 @@
 	import Middot from '../Middot/Middot.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Chart/ChartFooter'
+		title: 'Chart/ChartFooter',
+		component: ChartFooter
 	});
 </script>
 
-<Story name="One-up" tags={['autodocs']}>
+<Story name="One-up" asChild>
 	<DesignTokens>
 		<ChartFooter layout="one-up">
 			Daten: <a href="#1">Zensus 2022</a>
@@ -21,7 +22,7 @@
 	</DesignTokens>
 </Story>
 
-<Story name="Two-up">
+<Story name="Two-up" asChild>
 	<DesignTokens>
 		<ChartFooter layout="two-up">
 			Daten: <a href="#1">Zensus 2022</a>

diff --git a/components/src/ChartHeader/ChartHeader.stories.svelte b/components/src/ChartHeader/ChartHeader.stories.svelte
@@ -5,12 +5,14 @@
 	import ChartHeader from './ChartHeader.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Chart/ChartHeader'
+		title: 'Chart/ChartHeader',
+		component: ChartHeader
 	});
 </script>
 
 <Story
 	name="Default"
+	asChild
 	play={async ({ step }) => {
 		await step('Container has ID attribute derived from title prop', async () => {
 			const containerEl = document.querySelector('#mehr-uber-60-jahrige-in-allen-berufen');

diff --git a/components/src/Copy/Copy.stories.svelte b/components/src/Copy/Copy.stories.svelte
@@ -5,11 +5,12 @@
 	import Copy from './Copy.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Typography/Copy'
+		title: 'Typography/Copy',
+		component: Copy
 	});
 </script>
 
-<Story name="Default">
+<Story name="Default" asChild>
 	<DesignTokens>
 		<Copy>
 			Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen), bedient derzeit
@@ -19,7 +20,7 @@
 		</Copy>
 	</DesignTokens>
 </Story>
-<Story name="Bold">
+<Story name="Bold" asChild>
 	<DesignTokens>
 		<Copy weight="bold">
 			Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen), bedient derzeit

diff --git a/components/src/FormLabel/FormLabel.mdx b/components/src/FormLabel/FormLabel.mdx
@@ -8,6 +8,6 @@ import * as FormLabelStories from './FormLabel.stories.svelte';
 
 Standard form label. The `htmlFor` prop is required to semantically link the label to the form element it describes. 
 
-<Controls  />
+<Controls />
 
 <Stories/>
diff --git a/components/src/FormLabel/FormLabel.stories.svelte b/components/src/FormLabel/FormLabel.stories.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import { userEvent, within, expect } from 'storybook/test';
 
@@ -8,18 +8,20 @@
 	import Select from '../Select/Select.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Form/Label'
+		title: 'Form/Label',
+		component: FormLabel
 	});
 </script>
 
-<Story name="Default">
+<Story name="Default" asChild>
 	<DesignTokens>
 		<FormLabel htmlFor="">Deine Gemeinde</FormLabel>
 	</DesignTokens>
 </Story>
 
 <Story
 	name="With Select"
+	asChild
 	play={async ({ canvasElement, step }) => {
 		const canvas = within(canvasElement);
 		const label = canvas.getByTestId('label-container');

diff --git a/components/src/Headline/Headline.stories.svelte b/components/src/Headline/Headline.stories.svelte
@@ -5,11 +5,12 @@
 	import Headline from './Headline.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Typography/Headline'
+		title: 'Typography/Headline',
+		component: Headline
 	});
 </script>
 
-<Story name="Default">
+<Story name="Default" asChild>
 	<DesignTokens>
 		<Headline>Baden-Württemberg heizt überdurchschnittlich viel mit Wärmepumpe</Headline>
 	</DesignTokens>

diff --git a/components/src/HighlightCard/HighlightCard.stories.svelte b/components/src/HighlightCard/HighlightCard.stories.svelte
@@ -4,11 +4,12 @@
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Display/Card/HighlightCard'
+		title: 'Display/Card/HighlightCard',
+		component: HighlightCard
 	});
 </script>
 
-<Story name="Basic HighlightCard">
+<Story name="Basic HighlightCard" asChild>
 	<DesignTokens>
 		<HighlightCard
 			topline="Die letzte Großspende liegt bei"
@@ -19,7 +20,7 @@
 	</DesignTokens>
 </Story>
 
-<Story name="Multiple HighlightCards">
+<Story name="Multiple HighlightCards" asChild>
 	<DesignTokens>
 		<div class="highlight-cards">
 			<HighlightCard

diff --git a/components/src/Logotype/Logotype.stories.svelte b/components/src/Logotype/Logotype.stories.svelte
@@ -4,11 +4,12 @@
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Chart/Logotype'
+		title: 'Chart/Logotype',
+		component: Logotype
 	});
 </script>
 
-<Story name="Basic">
+<Story name="Basic" asChild>
 	<DesignTokens>
 		<Logotype></Logotype>
 	</DesignTokens>

diff --git a/components/src/Middot/Middot.stories.svelte b/components/src/Middot/Middot.stories.svelte
@@ -4,11 +4,12 @@
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Chart/Middot'
+		title: 'Chart/Middot',
+		component: Middot
 	});
 </script>
 
-<Story name="Basic">
+<Story name="Basic" asChild>
 	<DesignTokens>
 		<Middot></Middot>
 	</DesignTokens>

diff --git a/components/src/Note/Note.stories.svelte b/components/src/Note/Note.stories.svelte
@@ -6,11 +6,12 @@
 	import Note from './Note.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Typography/Note'
+		title: 'Typography/Note',
+		component: Note
 	});
 </script>
 
-<Story name="Default">
+<Story name="Default" asChild>
 	<DesignTokens>
 		<Note>
 			Daten: <a href="#1">Zensus 2022</a>

diff --git a/components/src/Select/Select.stories.svelte b/components/src/Select/Select.stories.svelte
@@ -6,7 +6,8 @@
 	import jobsData from './mock_data/jobs.json';
 
 	const { Story } = defineMeta({
-		title: 'Form/Select'
+		title: 'Form/Select',
+		component: Select
 	});
 </script>
 
@@ -18,6 +19,7 @@
 
 <Story
 	name="Simple"
+	asChild
 	play={async ({ canvasElement, step }) => {
 		const canvas = within(canvasElement);
 		const select = canvas.getByLabelText('Select');
@@ -59,7 +61,7 @@
 	/>
 </Story>
 
-<Story name="Grouped">
+<Story name="Grouped" asChild>
 	<StoryTemplate
 		bind:selectedItem
 		args={{
@@ -76,6 +78,7 @@
 
 <Story
 	name="Grouped (group header selectable)"
+	asChild
 	play={async ({ canvasElement, step }) => {
 		const canvas = within(canvasElement);
 		const select = canvas.getByLabelText('Select');
@@ -123,6 +126,7 @@
 
 <Story
 	name="Custom items"
+	asChild
 	play={async ({ canvasElement, step }) => {
 		const canvas = within(canvasElement);
 		const select = canvas.getByLabelText('Berufe');

diff --git a/components/src/Switcher/Switcher.stories.svelte b/components/src/Switcher/Switcher.stories.svelte
@@ -5,18 +5,20 @@
 	import { userEvent, within, expect } from 'storybook/test';
 
 	const { Story } = defineMeta({
-		title: 'Form/Switcher'
+		title: 'Form/Switcher',
+		component: Switcher
 	});
 </script>
 
-<Story name="Two Options">
+<Story name="Two Options" asChild>
 	<DesignTokens>
 		<Switcher options={['Option A', 'Option B']} value="Option A" size="default" label="Label" />
 	</DesignTokens>
 </Story>
 
 <Story
 	name="Four Options"
+	asChild
 	play={async ({ canvasElement, step }) => {
 		const canvas = within(canvasElement);
 		await step('Clicking selects the expected option', async () => {