fix(core): add focus and focus-visible styles to nodes to avoid browser styles

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/core/src/style.css

@@ -125,6 +125,21 @@
   transform-origin: 0 0;
 }
 
+.vue-flow__node-default,
+.vue-flow__node-input,
+.vue-flow__node-output {
+  border-width: 1px;
+  border-style: solid;
+  border-color: #bbb;
+
+  &.selected,
+  &:focus,
+  &:focus-visible {
+     outline: none;
+     border: 1px solid #555;
+   }
+}
+
 .vue-flow__node {
   position: absolute;
   user-select: none;

packages/core/src/theme-default.css

@@ -29,6 +29,13 @@
   cursor: grab;
 }
 
+.vue-flow__node.selectable {
+  &:focus,
+  &:focus-visible {
+     outline: none;
+   }
+}
+
 .vue-flow__node-default,
 .vue-flow__node-input,
 .vue-flow__node-output {
@@ -48,6 +55,13 @@
      box-shadow: 0 0 0 0.5px var(--vf-box-shadow);
    }
 
+  &.selected,
+  &:focus,
+  &:focus-visible {
+     outline: none;
+     border: 1px solid var(--vf-node-color);
+   }
+
   .vue-flow__handle {
     background: var(--vf-handle);
   }