From 95bebbef75a801fceeaa36d8d7d1aa6499fe2933 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Tue, 4 Nov 2025 14:43:38 +0100
Subject: [PATCH] Block out feature

---
 components/src/Caption/Caption.svelte           |  4 ++--
 components/src/Copy/Copy.svelte                 |  4 ++--
 components/src/Headline/Headline.stories.svelte | 17 +++++++++++++++++
 components/src/Headline/Headline.svelte         |  4 ++--
 components/src/Note/Note.svelte                 |  4 ++--
 5 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/components/src/Caption/Caption.svelte b/components/src/Caption/Caption.svelte
index f63fb788..e7dcd870 100644
--- a/components/src/Caption/Caption.svelte
+++ b/components/src/Caption/Caption.svelte
@@ -6,10 +6,10 @@
 		as?: string;
 		children?: Snippet;
 	}
-	let { weight = 'regular', as = 'div', children }: CaptionProps = $props();
+	let { weight = 'regular', as = 'div', children, ...rest }: CaptionProps = $props();
 </script>
 
-<svelte:element this={as} class={['container', weight]}>
+<svelte:element this={as} class={['container', weight]} {...rest}>
 	{@render children?.()}
 </svelte:element>
 
diff --git a/components/src/Copy/Copy.svelte b/components/src/Copy/Copy.svelte
index bae63ad1..e3ca705b 100644
--- a/components/src/Copy/Copy.svelte
+++ b/components/src/Copy/Copy.svelte
@@ -6,10 +6,10 @@
 		as?: string;
 		children?: Snippet;
 	}
-	let { as = 'div', weight = 'regular', children }: CopyProps = $props();
+	let { as = 'div', weight = 'regular', children, ...rest }: CopyProps = $props();
 </script>
 
-<svelte:element this={as} class={['container', weight]}>
+<svelte:element this={as} class={['container', weight]} {...rest}>
 	{@render children?.()}
 </svelte:element>
 
diff --git a/components/src/Headline/Headline.stories.svelte b/components/src/Headline/Headline.stories.svelte
index 8a761fdf..ce075e07 100644
--- a/components/src/Headline/Headline.stories.svelte
+++ b/components/src/Headline/Headline.stories.svelte
@@ -36,6 +36,23 @@
 	</DesignTokens>
 </Story>
 
+<Story
+	name="Render rest props"
+	asChild
+	play={async ({ canvasElement, step }) => {
+		const el = canvasElement.querySelector('h3');
+		await step('Renders the rest prop', async () => {
+			expect(el).toHaveAttribute('id', 'foo');
+		});
+	}}
+>
+	<DesignTokens theme="light">
+		<div class="container">
+			<Headline as="h3" id="foo">This should have an ID of "foo"</Headline>
+		</div>
+	</DesignTokens>
+</Story>
+
 <style>
 	.container {
 		color: var(--color-textPrimary);
diff --git a/components/src/Headline/Headline.svelte b/components/src/Headline/Headline.svelte
index 649ff0d5..872e25da 100644
--- a/components/src/Headline/Headline.svelte
+++ b/components/src/Headline/Headline.svelte
@@ -6,10 +6,10 @@
 		as?: string;
 	}
 
-	let { as = 'h2', children }: HeadlineProps = $props();
+	let { as = 'h2', children, ...rest }: HeadlineProps = $props();
 </script>
 
-<svelte:element this={as} class="container">
+<svelte:element this={as} class="container" {...rest}>
 	{@render children?.()}
 </svelte:element>
 
diff --git a/components/src/Note/Note.svelte b/components/src/Note/Note.svelte
index e86ab79b..46f800e1 100644
--- a/components/src/Note/Note.svelte
+++ b/components/src/Note/Note.svelte
@@ -5,10 +5,10 @@
 		children?: Snippet;
 		as?: string;
 	}
-	let { as = 'div', children }: NoteProps = $props();
+	let { as = 'div', children, ...rest }: NoteProps = $props();
 </script>
 
-<svelte:element this={as} class="container">
+<svelte:element this={as} class="container" {...rest}>
 	{@render children?.()}
 </svelte:element>