export htmlattributes as props where possible

packages/svelte/src/lib/plugins/Background/Background.svelte

@@ -47,7 +47,7 @@
 </script>
 
 <svg
-  class={['svelte-flow__background', className]}
+  class={['svelte-flow__background', 'svelte-flow__container', className]}
   data-testid="svelte-flow__background"
   style:--xy-background-color-props={bgColor}
   style:--xy-background-pattern-color-props={patternColor}
@@ -69,13 +69,3 @@
   </pattern>
   <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId})`} />
 </svg>
-
-<style>
-  .svelte-flow__background {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-  }
-</style>

packages/svelte/src/lib/plugins/Controls/Controls.svelte

@@ -27,7 +27,8 @@
     fitViewOptions,
     children,
     before,
-    after
+    after,
+    ...rest
   }: ControlsProps = $props();
 
   const store = useStore();
@@ -74,6 +75,7 @@
   data-testid="svelte-flow__controls"
   aria-label={ariaLabel ?? 'Svelte Flow controls'}
   {style}
+  {...rest}
 >
   {#if before}
     {@render before()}

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

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { ClassValue, HTMLButtonAttributes } from 'svelte/elements';
+import type { ClassValue, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
 import type { PanelPosition } from '@xyflow/system';
 
 import type { FitViewOptions } from '$lib/types';
@@ -29,7 +29,7 @@ export type ControlsProps = {
   before?: Snippet;
   after?: Snippet;
   fitViewOptions?: FitViewOptions;
-};
+} & HTMLAttributes<HTMLDivElement>;
 
 export type ControlButtonProps = HTMLButtonAttributes & {
   class?: ClassValue;

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

@@ -43,8 +43,6 @@
 
   let store = useStore();
 
-  // let nodes = $derived(store.nodes);
-
   const nodeColorFunc = nodeColor === undefined ? undefined : getAttrFunction(nodeColor);
   const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
   const nodeClassFunc = getAttrFunction(nodeClass);

packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte

@@ -15,7 +15,8 @@
     align = 'center',
     offset = 10,
     isVisible,
-    children
+    children,
+    ...rest
   }: NodeToolbarProps = $props();
 
   const store = useStore();
@@ -66,12 +67,13 @@
 
 {#if store.domNode && isActive && toolbarNodes}
   <div
-    data-id={toolbarNodes.reduce((acc, node) => `${acc}${node.id} `, '').trim()}
-    class="svelte-flow__node-toolbar"
     use:portal={'root'}
+    class="svelte-flow__node-toolbar"
+    data-id={toolbarNodes.reduce((acc, node) => `${acc}${node.id} `, '').trim()}
     style:position="absolute"
     style:transform
     style:z-index={zIndex}
+    {...rest}
   >
     {@render children?.()}
   </div>

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

@@ -1,5 +1,6 @@
 import type { Position, Align } from '@xyflow/system';
 import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
 
 export type NodeToolbarProps = {
   /** The id of the node, or array of ids the toolbar should be displayed at */
@@ -18,4 +19,4 @@ export type NodeToolbarProps = {
   /** If true, node toolbar is visible even if node is not selected */
   isVisible?: boolean;
   children?: Snippet;
-};
+} & HTMLAttributes<HTMLDivElement>;