fix: default variant changed and truncation added

src/components/ui/toggle-group/ToggleGroup.vue

@@ -9,12 +9,12 @@ import { provide } from 'vue'
 import { cn } from '@/utils/tailwindUtil'
 
 import { toggleGroupVariants } from './toggleGroup.variants'
-import type { ToggleGroupVariants } from './toggleGroup.variants'
+import type { ToggleGroupItemVariants } from './toggleGroup.variants'
 
 const props = defineProps<
   ToggleGroupRootProps & {
     class?: HTMLAttributes['class']
-    variant?: ToggleGroupVariants['variant']
+    variant?: ToggleGroupItemVariants['variant']
   }
 >()
 const emits = defineEmits<ToggleGroupRootEmits>()
@@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <ToggleGroupRoot
     v-slot="slotProps"
     v-bind="forwarded"
-    :class="cn(toggleGroupVariants({ variant }), props.class)"
+    :class="cn(toggleGroupVariants(), props.class)"
   >
     <slot v-bind="slotProps" />
   </ToggleGroupRoot>

src/components/ui/toggle-group/ToggleGroupItem.vue

@@ -9,16 +9,18 @@ import { inject } from 'vue'
 import { cn } from '@/utils/tailwindUtil'
 
 import { toggleGroupItemVariants } from './toggleGroup.variants'
-import type { ToggleGroupVariants } from './toggleGroup.variants'
+import type { ToggleGroupItemVariants } from './toggleGroup.variants'
 
 const props = defineProps<
   ToggleGroupItemProps & {
     class?: HTMLAttributes['class']
-    variant?: ToggleGroupVariants['variant']
+    variant?: ToggleGroupItemVariants['variant']
   }
 >()
 
-const context = inject<ToggleGroupVariants>('toggleGroup')
+const context = inject<{ variant?: ToggleGroupItemVariants['variant'] }>(
+  'toggleGroup'
+)
 
 const delegatedProps = reactiveOmit(props, 'class', 'variant')
 
@@ -38,6 +40,8 @@ const forwardedProps = useForwardProps(delegatedProps)
       )
     "
   >
-    <slot v-bind="slotProps" />
+    <span class="truncate min-w-0">
+      <slot v-bind="slotProps" />
+    </span>
   </ToggleGroupItem>
 </template>

src/components/ui/toggle-group/toggleGroup.variants.ts

@@ -2,21 +2,11 @@ import type { VariantProps } from 'cva'
 import { cva } from 'cva'
 
 export const toggleGroupVariants = cva({
-  base: 'flex gap-[var(--primitive-padding-padding-1,4px)] p-[var(--primitive-padding-padding-1,4px)] rounded-[var(--primitive-border-radius-rounded-sm,4px)]',
-  variants: {
-    variant: {
-      primary: 'bg-component-node-widget-background',
-      secondary: 'bg-component-node-widget-background',
-      inverted: 'bg-component-node-widget-background'
-    }
-  },
-  defaultVariants: {
-    variant: 'primary'
-  }
+  base: 'flex gap-[var(--primitive-padding-padding-1,4px)] p-[var(--primitive-padding-padding-1,4px)] rounded-[var(--primitive-border-radius-rounded-sm,4px)] bg-component-node-widget-background'
 })
 
 export const toggleGroupItemVariants = cva({
-  base: 'flex-1 inline-flex items-center justify-center border-0 rounded-[var(--primitive-border-radius-rounded-sm,4px)] px-[var(--primitive-padding-padding-2,8px)] py-[var(--primitive-padding-padding-1,4px)] text-xs font-inter font-normal transition-colors cursor-pointer',
+  base: 'flex-1 inline-flex items-center justify-center border-0 rounded-[var(--primitive-border-radius-rounded-sm,4px)] px-[var(--primitive-padding-padding-2,8px)] py-[var(--primitive-padding-padding-1,4px)] text-xs font-inter font-normal transition-colors cursor-pointer overflow-hidden',
   variants: {
     variant: {
       primary: [
@@ -37,8 +27,10 @@ export const toggleGroupItemVariants = cva({
     }
   },
   defaultVariants: {
-    variant: 'primary'
+    variant: 'secondary'
   }
 })
 
-export type ToggleGroupVariants = VariantProps<typeof toggleGroupVariants>
+export type ToggleGroupItemVariants = VariantProps<
+  typeof toggleGroupItemVariants
+>

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

@@ -1,10 +1,12 @@
 <template>
   <WidgetLayoutField :widget="widgetWithStyle">
     <!-- Use ToggleGroup when explicit labels are provided -->
+    <!-- The variant attribute is not necessary here because the default is secondary -->
+    <!-- It was still added to show that a variant (3) can be explicitly set -->
     <ToggleGroup
       v-if="hasLabels"
       type="single"
-      variant="primary"
+      variant="secondary"
       :model-value="toggleGroupValue"
       class="w-full mb-[-0.5rem]"
       @update:model-value="handleToggleGroupChange"