diff --git a/svelte/src/lib/components/PageHeader.svelte b/svelte/src/lib/components/PageHeader.svelte
index 4c8ef943b0..7e7164a54f 100644
--- a/svelte/src/lib/components/PageHeader.svelte
+++ b/svelte/src/lib/components/PageHeader.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
 
   // TODO: import LoadingSpinner from './LoadingSpinner.svelte';
 
-  interface Props {
+  interface Props extends HTMLAttributes<HTMLDivElement> {
     title?: string;
     suffix?: string;
     showSpinner?: boolean;
     children?: Snippet;
-    [key: string]: unknown;
   }
 
-  let { title, suffix, showSpinner = false, children, ...others }: Props = $props();
+  let { title, suffix, showSpinner = false, children, class: className, ...others }: Props = $props();
 </script>
 
-<div data-test-page-header class="header" {...others}>
+<div data-test-page-header class={['header', className]} {...others}>
   {#if children}
     {@render children()}
   {:else}
diff --git a/svelte/src/lib/components/TextContent.svelte b/svelte/src/lib/components/TextContent.svelte
index cfa835b945..c7f98a466a 100644
--- a/svelte/src/lib/components/TextContent.svelte
+++ b/svelte/src/lib/components/TextContent.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
 
-  interface Props {
+  interface Props extends HTMLAttributes<HTMLDivElement> {
     boxed?: boolean;
     children: Snippet;
-    [key: string]: unknown;
   }
 
-  let { boxed = false, children, ...others }: Props = $props();
+  let { boxed = false, children, class: className, ...others }: Props = $props();
 </script>
 
-<div class="wrapper" class:boxed {...others}>
+<div class={['wrapper', className, { boxed }]} {...others}>
   {@render children()}
 </div>