chore(svelte/selection): add class name and styles

packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte

@@ -85,7 +85,7 @@
     onkeydown={store.disableKeyboardA11y ? undefined : onkeydown}
     bind:this={ref}
   >
-    <Selection width="100%" height="100%" x={0} y={0} />
+    <Selection width="100%" height="100%" x={0} y={0} class="svelte-flow__nodesselection-rect" />
   </div>
 {/if}
 
@@ -97,4 +97,9 @@
     z-index: 2000;
     pointer-events: all;
   }
+
+  .svelte-flow__selection-wrapper:focus,
+  .svelte-flow__selection-wrapper:focus-visible {
+    outline: none;
+  }
 </style>

packages/svelte/src/lib/components/Selection/Selection.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { ClassValue } from 'svelte/elements';
   import { toPxString } from '$lib/utils';
 
   let {
@@ -6,19 +7,21 @@
     y = 0,
     width = 0,
     height = 0,
-    isVisible = true
+    isVisible = true,
+    ...props
   }: {
     x?: number;
     y?: number;
     width?: number | string;
     height?: number | string;
     isVisible?: boolean;
+    class?: ClassValue;
   } = $props();
 </script>
 
 {#if isVisible}
   <div
-    class="svelte-flow__selection"
+    class={['svelte-flow__selection', props.class]}
     style:width={typeof width === 'string' ? width : toPxString(width)}
     style:height={typeof height === 'string' ? height : toPxString(height)}
     style:transform={`translate(${x}px, ${y}px)`}