export htmlattributes as props where possible

packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte

@@ -1,41 +1,45 @@
 <script lang="ts">
-  import { getContext, type Snippet } from 'svelte';
-  import type { ClassValue } from 'svelte/elements';
+  import { getContext } from 'svelte';
+  import { portal } from '$lib/actions/portal';
 
-  import { EdgeLabelRenderer } from '$lib/components/EdgeLabelRenderer';
   import { useStore } from '$lib/store';
+  import type { EdgeLabelProps } from './types';
 
   let {
     x,
     y,
+    selectEdgeOnClick = false,
+    transparent = false,
     style,
     class: className,
-    children
-  }: {
-    x?: number;
-    y?: number;
-    style?: string;
-    class?: ClassValue;
-    children?: Snippet;
-  } = $props();
+    children,
+    ...rest
+  }: EdgeLabelProps = $props();
 
   const store = useStore();
 
   const id = getContext<string>('svelteflow__edge_id');
 </script>
 
-<EdgeLabelRenderer>
-  <div
-    class={['svelte-flow__edge-label', className]}
-    style:transform="translate(-50%, -50%) translate({x}px,{y}px)"
-    style={'pointer-events: all;' + style}
-    role="button"
-    tabindex="-1"
-    onkeyup={() => {}}
-    onclick={() => {
-      if (id) store.handleEdgeSelection(id);
-    }}
-  >
-    {@render children?.()}
-  </div>
-</EdgeLabelRenderer>
+<div
+  use:portal={'edgelabel'}
+  class={['svelte-flow__edge-label', { transparent }, className]}
+  style:cursor={selectEdgeOnClick ? 'pointer' : undefined}
+  style:transform="translate(-50%, -50%) translate({x}px,{y}px)"
+  style:pointer-events="all"
+  {style}
+  role="button"
+  tabindex="-1"
+  onclick={() => {
+    if (selectEdgeOnClick && id) store.handleEdgeSelection(id);
+  }}
+  {...rest}
+>
+  {@render children?.()}
+</div>
+
+<style>
+  .transparent {
+    background: transparent;
+  }
+</style>

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

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

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue, HTMLAttributes } from 'svelte/elements';
+
+export type EdgeLabelProps = {
+  x?: number;
+  y?: number;
+  selectEdgeOnClick?: boolean;
+  transparent?: boolean;
+  style?: string;
+  class?: ClassValue;
+  children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;

packages/svelte/src/lib/components/EdgeReconnectAnchor/EdgeReconnectAnchor.svelte

@@ -4,7 +4,8 @@
   import { XYHandle, type HandleType, type XYPosition } from '@xyflow/system';
   import { getContext, type Snippet } from 'svelte';
   import type { ClassValue } from 'svelte/elements';
-  import { portal } from '$lib/actions/portal';
+  import EdgeLabel from '../EdgeLabel/EdgeLabel.svelte';
+  import type { EdgeReconnectAnchorProps } from './types';
 
   let {
     type,
@@ -13,16 +14,9 @@
     class: className,
     size = 25,
     style,
-    children
-  }: {
-    type: HandleType;
-    reconnecting?: boolean;
-    style?: string;
-    class?: ClassValue;
-    position?: XYPosition;
-    size?: number;
-    children?: Snippet;
-  } = $props();
+    children,
+    ...rest
+  }: EdgeReconnectAnchorProps = $props();
 
   const store = useStore();
 
@@ -110,17 +104,16 @@
   };
 </script>
 
-<div
-  use:portal={'edgelabel'}
+<EdgeLabel
+  x={position?.x}
+  y={position?.y}
   class={['svelte-flow__edgeupdater nopan', `svelte-flow__edgeupdater-${type}`, className]}
-  style:position="absolute"
-  style:width={`${size}px`}
-  style:height={`${size}px`}
-  style:transform={`translate(-50%, -50%) ${position ? `translate(${position.x}px, ${position.y}px` : ''}`}
-  {style}
+  style={`width:${size}px; height:${size}px;` + style}
   onpointerdown={onPointerDown}
+  transparent
+  {...rest}
 >
   {#if !reconnecting && children}
     {@render children()}
   {/if}
-</div>
+</EdgeLabel>

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

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

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

@@ -0,0 +1,13 @@
+import type { HandleType, XYPosition } from '@xyflow/system';
+import type { Snippet } from 'svelte';
+import type { ClassValue, HTMLAttributes } from 'svelte/elements';
+
+export type EdgeReconnectAnchorProps = {
+  type: HandleType;
+  reconnecting?: boolean;
+  style?: string;
+  class?: ClassValue;
+  position?: XYPosition;
+  size?: number;
+  children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;

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

packages/svelte/src/lib/components/ViewportPortal/ViewportPortal.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-  import type { Snippet } from 'svelte';
-
   import { portal } from '$lib/actions/portal';
+  import type { ViewportPortalProps } from './types';
 
-  let { children }: { children?: Snippet } = $props();
+  let { children, ...rest }: ViewportPortalProps = $props();
 </script>
 
-<div use:portal={'viewport'}>
+<div use:portal={'viewport'} {...rest}>
   {@render children?.()}
 </div>

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

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

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

@@ -0,0 +1,6 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+export type ViewportPortalProps = {
+  children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;

packages/svelte/src/lib/components/edges/BaseEdge.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import type { HTMLAttributes } from 'svelte/elements';
   import type { BaseEdgeProps } from '../../types';
   import EdgeLabel from '../EdgeLabel/EdgeLabel.svelte';
 
@@ -16,7 +15,7 @@
     interactionWidth = 20,
     class: className,
     ...rest
-  }: BaseEdgeProps & HTMLAttributes<SVGPathElement> = $props();
+  }: BaseEdgeProps = $props();
 </script>
 
 <path
@@ -41,7 +40,7 @@
 {/if}
 
 {#if label}
-  <EdgeLabel x={labelX} y={labelY} style={labelStyle}>
+  <EdgeLabel x={labelX} y={labelY} style={labelStyle} selectEdgeOnClick>
     {label}
   </EdgeLabel>
 {/if}