feat(Typography): Support rest props

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>
 

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>
 

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);

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>
 

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>