feat(svelte): add event handlers and props, rename class names

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

@@ -9,14 +9,14 @@
 <button
   type="button"
   on:click
-  class={cc(['react-flow__controls-button', className])}
+  class={cc(['svelte-flow__controls-button', className])}
   {...$$restProps}
 >
   <slot class="button-svg" />
 </button>
 
 <style>
-  .react-flow__controls-button {
+  .svelte-flow__controls-button {
     border: none;
     background: #fefefe;
     border-bottom: 1px solid #eee;
@@ -31,7 +31,7 @@
     padding: 5px;
   }
 
-  .react-flow__controls-button :global(svg) {
+  .svelte-flow__controls-button :global(svg) {
     width: 100%;
     max-width: 12px;
     max-height: 12px;

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

@@ -43,11 +43,11 @@
   };
 </script>
 
-<Panel class="react-flow__controls" {position}>
+<Panel class="svelte-flow__controls" {position}>
   {#if showZoom}
     <ControlButton
       on:click={onZoomInHandler}
-      class="react-flow__controls-zoomin"
+      class="svelte-flow__controls-zoomin"
       title="zoom in"
       aria-label="zoom in"
     >
@@ -56,7 +56,7 @@
     <svelte:component
       this={ControlButton}
       on:click={onZoomOutHandler}
-      class="react-flow__controls-zoomout"
+      class="svelte-flow__controls-zoomout"
       title="zoom out"
       aria-label="zoom out"
     >
@@ -66,7 +66,7 @@
   {#if showFitView}
     <svelte:component
       this={ControlButton}
-      class="react-flow__controls-fitview"
+      class="svelte-flow__controls-fitview"
       on:click={onFitViewHandler}
       title="fit view"
       aria-label="fit view"
@@ -77,7 +77,7 @@
   {#if showInteractive}
     <svelte:component
       this={ControlButton}
-      class="react-flow__controls-interactive"
+      class="svelte-flow__controls-interactive"
       on:click={onToggleInteractivity}
       title="toggle interactivity"
       aria-label="toggle interactivity"

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

@@ -1,3 +1,3 @@
 export { default as Controls } from './Controls.svelte';
 export { default as ControlButton } from './ControlButton.svelte';
-export { type ControlsProps } from './types';
+export * from './types';

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

@@ -1,8 +1,8 @@
 import type { PanelPosition } from '@reactflow/system';
 
 export type ControlsProps = {
-  position: PanelPosition;
-  showZoom: boolean;
-  showFitView: boolean;
-  showInteractive: boolean;
+  position?: PanelPosition;
+  showZoom?: boolean;
+  showFitView?: boolean;
+  showInteractive?: boolean;
 };