From 3c609e01222f22c4fa669485949bd7d870d5a8f7 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 28 Oct 2025 15:44:39 +0100
Subject: [PATCH 1/2] chore(svelte/selection): add class name and styles

---
 .../src/lib/components/NodeSelection/NodeSelection.svelte  | 7 ++++++-
 .../svelte/src/lib/components/Selection/Selection.svelte   | 7 +++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte b/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
index e453f8b6..5dd87b42 100644
--- a/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
+++ b/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>
diff --git a/packages/svelte/src/lib/components/Selection/Selection.svelte b/packages/svelte/src/lib/components/Selection/Selection.svelte
index 25a7de2e..1422b185 100644
--- a/packages/svelte/src/lib/components/Selection/Selection.svelte
+++ b/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)`}

From 072308f80e51814112ed3e1d706c5449dc72a1c1 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 28 Oct 2025 15:46:50 +0100
Subject: [PATCH 2/2] chore(svelte/selection): cleanup

---
 .../src/lib/components/NodeSelection/NodeSelection.svelte  | 2 +-
 .../svelte/src/lib/components/Selection/Selection.svelte   | 7 ++-----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte b/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
index 5dd87b42..65e12b6a 100644
--- a/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
+++ b/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} class="svelte-flow__nodesselection-rect" />
+    <Selection width="100%" height="100%" x={0} y={0} />
   </div>
 {/if}
 
diff --git a/packages/svelte/src/lib/components/Selection/Selection.svelte b/packages/svelte/src/lib/components/Selection/Selection.svelte
index 1422b185..25a7de2e 100644
--- a/packages/svelte/src/lib/components/Selection/Selection.svelte
+++ b/packages/svelte/src/lib/components/Selection/Selection.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import type { ClassValue } from 'svelte/elements';
   import { toPxString } from '$lib/utils';
 
   let {
@@ -7,21 +6,19 @@
     y = 0,
     width = 0,
     height = 0,
-    isVisible = true,
-    ...props
+    isVisible = true
   }: {
     x?: number;
     y?: number;
     width?: number | string;
     height?: number | string;
     isVisible?: boolean;
-    class?: ClassValue;
   } = $props();
 </script>
 
 {#if isVisible}
   <div
-    class={['svelte-flow__selection', props.class]}
+    class="svelte-flow__selection"
     style:width={typeof width === 'string' ? width : toPxString(width)}
     style:height={typeof height === 'string' ? height : toPxString(height)}
     style:transform={`translate(${x}px, ${y}px)`}