export htmlattributes as props where possible

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -4,19 +4,20 @@
     Position,
     XYHandle,
     isMouseEvent,
-    type HandleConnection,
     areConnectionMapsEqual,
     handleConnectionChange,
     ConnectionMode,
     getHostForElement,
+    type HandleConnection,
     type Optional,
     type ConnectionState,
     type Connection
   } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
-  import type { HandleProps } from '$lib/types';
+
   import type { ConnectableContext } from '../NodeWrapper/types';
+  import type { HandleProps } from './types';
 
   let {
     id: handleId = null,
@@ -30,7 +31,8 @@
     isValidConnection,
     onconnect,
     ondisconnect,
-    children
+    children,
+    ...rest
   }: HandleProps = $props();
 
   const nodeId = getContext<string>('svelteflow__node_id');
@@ -226,6 +228,7 @@ The Handle component is the part of a node that can be used to connect nodes.
   {style}
   role="button"
   tabindex="-1"
+  {...rest}
 >
   {@render children?.()}
 </div>

packages/svelte/src/lib/components/Handle/index.ts

@@ -1 +1,2 @@
 export { default as Handle } from './Handle.svelte';
+export * from './types';

packages/svelte/src/lib/components/Handle/types.ts

@@ -0,0 +1,10 @@
+import type { Connection, HandleProps as HandlePropsSystem } from '@xyflow/system';
+import type { Snippet } from 'svelte';
+import type { ClassValue, HTMLAttributes } from 'svelte/elements';
+
+export type HandleProps = HandlePropsSystem & {
+  class?: ClassValue;
+  onconnect?: (connections: Connection[]) => void;
+  ondisconnect?: (connections: Connection[]) => void;
+  children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;