feat(svelte): add labelStyle prop for edges

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import EdgeLabelRenderer from '$lib/components/EdgeLabelRenderer/EdgeLabelRenderer.svelte';
+  import { EdgeLabelRenderer } from '$lib/components/EdgeLabelRenderer';
   import type { BaseEdgeProps } from './types';
 
   type $$Props = BaseEdgeProps;
@@ -9,10 +9,12 @@
   export let label: $$Props['label'] = undefined;
   export let labelX: $$Props['labelX'] = undefined;
   export let labelY: $$Props['labelY'] = undefined;
+  export let labelStyle: $$Props['labelStyle'] = undefined;
   export let markerStart: $$Props['markerStart'] = undefined;
   export let markerEnd: $$Props['markerEnd'] = undefined;
   export let style: $$Props['style'] = undefined;
   export let interactionWidth: $$Props['interactionWidth'] = 20;
+
 </script>
 
 <path
@@ -40,6 +42,7 @@
     <div
       class="svelte-flow__edge-label"
       style:transform={`translate(-50%, -50%) translate(${labelX}px,${labelY}px)`}
+      style={labelStyle}
     >
       {label}
     </div>

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

@@ -1,6 +1,9 @@
 import type { EdgeProps } from '$lib/types';
 
-export type BaseEdgeProps = Pick<EdgeProps, 'interactionWidth' | 'label' | 'style'> & {
+export type BaseEdgeProps = Pick<
+  EdgeProps,
+  'interactionWidth' | 'label' | 'labelStyle' | 'style'
+> & {
   id?: string;
   path: string;
   labelX?: number;

packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte

@@ -24,6 +24,7 @@
   export let animated: $$Props['animated'] = false;
   export let selected: $$Props['selected'] = false;
   export let label: $$Props['label'] = undefined;
+  export let labelStyle: $$Props['labelStyle'] = undefined;
   export let markerStart: $$Props['markerStart'] = undefined;
   export let markerEnd: $$Props['markerEnd'] = undefined;
   export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
@@ -66,6 +67,7 @@
     {animated}
     {selected}
     {label}
+    {labelStyle}
     {data}
     {style}
     {sourceHandleId}

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

@@ -22,6 +22,7 @@
   {labelY}
   id={$$props.id}
   label={$$props.label}
+  labelStyle={$$props.labelStyle}
   markerStart={$$props.markerStart}
   markerEnd={$$props.markerEnd}
   interactionWidth={$$props.interactionWidth}

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

@@ -22,6 +22,7 @@
   {labelY}
   id={$$props.id}
   label={$$props.label}
+  labelStyle={$$props.labelStyle}
   markerStart={$$props.markerStart}
   markerEnd={$$props.markerEnd}
   interactionWidth={$$props.interactionWidth}

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

@@ -23,6 +23,7 @@
   {labelY}
   id={$$props.id}
   label={$$props.label}
+  labelStyle={$$props.labelStyle}
   markerStart={$$props.markerStart}
   markerEnd={$$props.markerEnd}
   interactionWidth={$$props.interactionWidth}

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

@@ -20,6 +20,7 @@
   {labelY}
   id={$$props.id}
   label={$$props.label}
+  labelStyle={$$props.labelStyle}
   markerStart={$$props.markerStart}
   markerEnd={$$props.markerEnd}
   interactionWidth={$$props.interactionWidth}