feat(ComboControl): replace ComboControl with redesigned ComboControlV2

src/shared/ui/ComboControl/ComboControl.stories.svelte

@@ -11,100 +11,36 @@ const { Story } = defineMeta({
         docs: {
             description: {
                 component:
-                    'Provides multiple ways to change a numeric value via decrease/increase buttons, slider, and direct input. All three methods are synchronized, giving users flexibility based on precision needs.',
+                    'ComboControl with input field and slider. Simplified version without increase/decrease buttons.',
             },
             story: { inline: false }, // Render stories in iframe for state isolation
         },
     },
     argTypes: {
+        label: {
+            control: 'text',
+            description: 'Label for the ComboControl',
+        },
         control: {
             control: 'object',
             description: 'TypographyControl instance managing the value and bounds',
         },
-        decreaseLabel: {
-            control: 'text',
-            description: 'Accessibility label for the decrease button',
-        },
-        increaseLabel: {
-            control: 'text',
-            description: 'Accessibility label for the increase button',
-        },
-        controlLabel: {
-            control: 'text',
-            description: 'Accessibility label for the control button (opens popover)',
-        },
     },
 });
 </script>
 
 <script lang="ts">
-const defaultControl = createTypographyControl({ value: 77, min: 0, max: 100, step: 1 });
-const atMinimumControl = createTypographyControl({ value: 0, min: 0, max: 100, step: 1 });
-const atMaximumControl = createTypographyControl({ value: 100, min: 0, max: 100, step: 1 });
-const withFloatControl = createTypographyControl({ value: 77.5, min: 0, max: 100, step: 0.1 });
-const customLabelsControl = createTypographyControl({ value: 50, min: 0, max: 100, step: 1 });
+const horizontalControl = createTypographyControl({ min: 0, max: 100, step: 1, value: 50 });
 </script>
 
 <Story
-    name="Default"
+    name="Horizontal"
     args={{
-        control: defaultControl,
+        control: horizontalControl,
+        label: 'Size',
     }}
 >
     {#snippet template(args)}
-        <ComboControl control={defaultControl} {...args} />
-    {/snippet}
-</Story>
-
-<Story
-    name="At Minimum"
-    args={{
-        control: atMinimumControl,
-    }}
->
-    {#snippet template(args)}
-        <ComboControl control={atMinimumControl} {...args} />
-    {/snippet}
-</Story>
-
-<Story
-    name="At Maximum"
-    args={{
-        control: atMaximumControl,
-    }}
->
-    {#snippet template(args)}
-        <ComboControl control={atMaximumControl} {...args} />
-    {/snippet}
-</Story>
-
-<Story
-    name="With Float"
-    args={{
-        control: withFloatControl,
-    }}
->
-    {#snippet template(args)}
-        <ComboControl control={withFloatControl} {...args} />
-    {/snippet}
-</Story>
-
-<Story
-    name="Custom Labels"
-    args={{
-        control: customLabelsControl,
-        decreaseLabel: 'Decrease font size',
-        increaseLabel: 'Increase font size',
-        controlLabel: 'Open font size controls',
-    }}
->
-    {#snippet template(args)}
-        <ComboControl
-            control={customLabelsControl}
-            decreaseLabel="Decrease font size"
-            increaseLabel="Increase font size"
-            controlLabel="Open font size controls"
-            {...args}
-        />
+        <ComboControl {...args} />
     {/snippet}
 </Story>