refactor(svelte): add slot to controls, cleanup ControlButton types closes #3788

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

@@ -1,12 +1,16 @@
 <script lang="ts">
   import cc from 'classcat';
 
-  let className: string;
-  let bgColor: string | undefined = undefined;
-  let bgColorHover: string | undefined = undefined;
-  let color: string | undefined = undefined;
-  let colorHover: string | undefined = undefined;
-  let borderColor: string | undefined = undefined;
+  import type { ControlButtonProps } from './types';
+
+  type $$Props = ControlButtonProps;
+
+  let className: $$Props['class'] = undefined;
+  let bgColor: $$Props['bgColor'] = undefined;
+  let bgColorHover: $$Props['bgColorHover'] = undefined;
+  let color: $$Props['color'] = undefined;
+  let colorHover: $$Props['colorHover'] = undefined;
+  let borderColor: $$Props['borderColor'] = undefined;
 
   export { className as class };
 </script>

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

@@ -74,6 +74,7 @@
   data-testid="svelte-flow__controls"
   aria-label={ariaLabel ?? 'Svelte Flow controls'}
 >
+  <slot name="before" />
   {#if showZoom}
     <ControlButton
       on:click={onZoomInHandler}
@@ -118,4 +119,6 @@
       {#if isInteractive}<UnlockIcon />{:else}<LockIcon />{/if}
     </ControlButton>
   {/if}
+  <slot />
+  <slot name="after" />
 </Panel>

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

@@ -1,3 +1,4 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
 import type { PanelPosition } from '@xyflow/system';
 
 export type ControlsProps = {
@@ -11,3 +12,12 @@ export type ControlsProps = {
   buttonColorHover?: string;
   'aria-label'?: string;
 };
+
+export type ControlButtonProps = HTMLButtonAttributes & {
+  class?: string;
+  bgColor?: string;
+  bgColorHover?: string;
+  color?: string;
+  colorHover?: string;
+  borderColor?: string;
+};