From 630bf5442bfff6a427bb3e5ebe372a29810e6bee Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Wed, 19 Feb 2025 10:47:17 +0100
Subject: [PATCH] Fix setting class on SvelteFlow component breaking css

---
 .../src/lib/container/SvelteFlow/SvelteFlow.svelte       | 4 ++--
 .../svelte/src/lib/container/SvelteFlow/Wrapper.svelte   | 9 ++++-----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index 91a4d84d..f10aef43 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getContext, setContext, onDestroy } from 'svelte';
-  import type { DOMAttributes } from 'svelte/elements';
+  import type { HTMLAttributes } from 'svelte/elements';
   import { ConnectionLineType, PanOnScrollMode } from '@xyflow/system';
 
   import { key, createStore } from '$lib/store';
@@ -66,7 +66,7 @@
     edges = $bindable([]),
     viewport = $bindable(undefined),
     ...props
-  }: SvelteFlowProps & DOMAttributes<HTMLDivElement> = $props();
+  }: SvelteFlowProps & HTMLAttributes<HTMLDivElement> = $props();
 
   const store = createStore({
     props,
diff --git a/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte b/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
index 31b8cb41..6a65fb72 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
-  import type { ClassValue, DOMAttributes } from 'svelte/elements';
+  import type { HTMLAttributes } from 'svelte/elements';
   import type { Snippet } from 'svelte';
   import { type SvelteFlowRestProps } from '$lib/store/types';
 
   let {
     width,
     height,
-    class: className,
     colorMode,
     domNode = $bindable(),
     clientWidth = $bindable(),
@@ -16,19 +15,19 @@
   }: {
     width?: number;
     height?: number;
-    class?: ClassValue;
     colorMode?: string;
     domNode: HTMLDivElement | null;
     clientWidth?: number;
     clientHeight?: number;
     children?: Snippet;
-    rest: SvelteFlowRestProps & DOMAttributes<HTMLDivElement>;
+    rest: SvelteFlowRestProps & HTMLAttributes<HTMLDivElement>;
   } = $props();
 
   // Unfortunately we have to destructure the props here this way,
   // so we don't pass all the props as attributes to the div element
   let {
     id,
+    class: className,
     nodeTypes,
     edgeTypes,
     colorMode: _colorMode,
@@ -69,7 +68,7 @@
   } = $derived(rest);
 
   type OnlyDivAttributes<T> = {
-    [K in keyof T]: K extends keyof DOMAttributes<HTMLDivElement> ? T[K] : never;
+    [K in keyof T]: K extends keyof HTMLAttributes<HTMLDivElement> ? T[K] : never;
   };
 </script>