feat(ComboControlV2): crete ComboControlV2 - without increase/decrease buttons. Refresh styling of the original one

src/shared/ui/ComboControl/ComboControl.svelte

@@ -8,9 +8,13 @@
 <script lang="ts">
 import type { TypographyControl } from '$shared/lib';
 import { Button } from '$shared/shadcn/ui/button';
-import * as ButtonGroup from '$shared/shadcn/ui/button-group';
+import { Root as ButtonGroupRoot } from '$shared/shadcn/ui/button-group';
 import { Input } from '$shared/shadcn/ui/input';
-import * as Popover from '$shared/shadcn/ui/popover';
+import {
+    Content as PopoverContent,
+    Root as PopoverRoot,
+    Trigger as PopoverTrigger,
+} from '$shared/shadcn/ui/popover';
 import { Slider } from '$shared/shadcn/ui/slider';
 import MinusIcon from '@lucide/svelte/icons/minus';
 import PlusIcon from '@lucide/svelte/icons/plus';
@@ -67,30 +71,32 @@ const handleSliderChange = (newValue: number) => {
 };
 </script>
 
-<ButtonGroup.Root>
+<ButtonGroupRoot class="bg-transparent border-none shadow-none">
     <Button
-        variant="outline"
+        variant="ghost"
+        class="hover:bg-white/50 bg-white/20 border-none"
         size="icon"
         aria-label={decreaseLabel}
         onclick={control.decrease}
         disabled={control.isAtMin}
     >
-        <MinusIcon />
+        <MinusIcon class="size-4" />
     </Button>
-    <Popover.Root>
-        <Popover.Trigger>
+    <PopoverRoot>
+        <PopoverTrigger>
             {#snippet child({ props })}
                 <Button
                     {...props}
-                    variant="outline"
+                    variant="ghost"
+                    class="hover:bg-white/50 bg-white/20 border-none"
                     size="icon"
                     aria-label={controlLabel}
                 >
                     {control.value}
                 </Button>
             {/snippet}
-        </Popover.Trigger>
-        <Popover.Content class="w-auto p-4">
+        </PopoverTrigger>
+        <PopoverContent class="w-auto p-4">
             <div class="flex flex-col items-center gap-3">
                 <Slider
                     min={control.min}
@@ -110,15 +116,16 @@ const handleSliderChange = (newValue: number) => {
                     class="w-16 text-center"
                 />
             </div>
-        </Popover.Content>
-    </Popover.Root>
+        </PopoverContent>
+    </PopoverRoot>
     <Button
-        variant="outline"
+        variant="ghost"
+        class="hover:bg-white/50 bg-white/20 border-none"
         size="icon"
         aria-label={increaseLabel}
         onclick={control.increase}
         disabled={control.isAtMax}
     >
-        <PlusIcon />
+        <PlusIcon class="size-4" />
     </Button>
-</ButtonGroup.Root>
+</ButtonGroupRoot>