Make the vue toggle ring surround toggle (#9071)

| Before | After |
| ------ | ----- |
| <img width="360" alt="before"
src="https://github.com/user-attachments/assets/3d414c6e-972e-4c87-8765-c30dc8288ddb"
/> | <img width="360" alt="after"
src="https://github.com/user-attachments/assets/a3ec3eb4-f61f-42ac-bcf3-bc4c766040d7"/>|

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9071-Make-the-vue-toggle-ring-surround-toggle-30f6d73d365081e0a427cf270ef2763a)
by [Unito](https://www.unito.io)

src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue

@@ -1,5 +1,5 @@
 <template>
-  <WidgetLayoutField :widget>
+  <WidgetLayoutField v-slot="{ borderStyle }" :widget :no-border="!hasLabels">
     <!-- Use ToggleGroup when explicit labels are provided -->
     <ToggleGroup
       v-if="hasLabels"
@@ -25,7 +25,13 @@
     <!-- Use ToggleSwitch for implicit boolean states -->
     <div
       v-else
-      :class="cn('flex w-fit items-center gap-2', hideLayoutField || 'ml-auto')"
+      :class="
+        cn(
+          '-m-1 flex w-fit items-center gap-2 rounded-full p-1',
+          hideLayoutField || 'ml-auto',
+          borderStyle
+        )
+      "
     >
       <ToggleSwitch
         v-model="modelValue"