minimize inline style usage

packages/svelte/src/lib/plugins/Minimap/Minimap.svelte

@@ -37,8 +37,8 @@
     zoomable = true,
     inversePan,
     zoomStep,
-    style = '',
-    class: className
+    class: className,
+    ...rest
   }: MiniMapProps = $props();
 
   let store = useStore();
@@ -83,9 +83,10 @@
 
 <Panel
   {position}
-  style={style + (bgColor ? `;--xy-minimap-background-color-props:${bgColor}` : '')}
   class={['svelte-flow__minimap', className]}
   data-testid="svelte-flow__minimap"
+  --xy-minimap-background-color-props={bgColor}
+  {...rest}
 >
   {#if store.panZoom}
     <svg

packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte

@@ -37,8 +37,8 @@
   ry={borderRadius}
   {width}
   {height}
-  style={`${color ? `fill: ${color};` : ''}${strokeColor ? `stroke: ${strokeColor};` : ''}${
-    strokeWidth ? `stroke-width: ${strokeWidth};` : ''
-  }`}
+  style:fill={color}
+  style:stroke={strokeColor}
+  style:stroke-width={strokeWidth}
   shape-rendering={shapeRendering}
 />

packages/svelte/src/lib/plugins/Minimap/types.ts

@@ -1,5 +1,5 @@
 import type { PanelPosition } from '@xyflow/system';
-import type { ClassValue } from 'svelte/elements';
+import type { ClassValue, HTMLAttributes } from 'svelte/elements';
 import type { Node } from '$lib/types';
 
 export type GetMiniMapNodeAttribute = (node: Node) => string;
@@ -46,4 +46,4 @@ export type MiniMapProps = {
   inversePan?: boolean;
   /** Step size for zooming in/out */
   zoomStep?: number;
-};
+} & HTMLAttributes<HTMLDivElement>;

packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte

@@ -26,9 +26,9 @@
     onResizeStart,
     onResize,
     onResizeEnd,
-    style = '',
     class: className,
-    children
+    children,
+    ...rest
   }: ResizeControlProps = $props();
 
   const store = useStore();
@@ -51,12 +51,6 @@
 
   let positionClassNames = $derived(controlPosition.split('-'));
 
-  let controlStyle = $derived.by(() => {
-    let colorStyleProp =
-      variant === ResizeControlVariant.Line ? 'border-color' : 'background-color';
-    return color ? `${style} ${colorStyleProp}: ${color};` : style;
-  });
-
   onMount(() => {
     if (resizeControlRef) {
       resizer = XYResizer({
@@ -116,7 +110,9 @@
 <div
   class={['svelte-flow__resize-control', 'nodrag', ...positionClassNames, variant, className]}
   bind:this={resizeControlRef}
-  style={controlStyle}
+  style:border-color={variant === ResizeControlVariant.Line ? color : undefined}
+  style:background-color={variant === ResizeControlVariant.Line ? undefined : color}
+  {...rest}
 >
   {@render children?.()}
 </div>

packages/svelte/src/lib/plugins/NodeResizer/types.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { ClassValue } from 'svelte/elements';
+import type { ClassValue, HTMLAttributes } from 'svelte/elements';
 import type {
   ControlPosition,
   ResizeControlVariant,
@@ -44,7 +44,7 @@ export type NodeResizerProps = {
   onResize?: OnResize;
   /** Callback called when resizing ends */
   onResizeEnd?: OnResizeEnd;
-};
+} & HTMLAttributes<HTMLDivElement>;
 
 export type ResizeControlProps = Pick<
   NodeResizerProps,
@@ -69,7 +69,5 @@ export type ResizeControlProps = Pick<
    * @example ResizeControlVariant.Handle, ResizeControlVariant.Line
    */
   variant?: ResizeControlVariant;
-  class?: ClassValue;
-  style?: string;
   children?: Snippet;
-};
+} & HTMLAttributes<HTMLDivElement>;