chore(shared/ui): enhance stories with cases, controls and documentation

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

@@ -5,12 +5,35 @@ import ComboControl from './ComboControl.svelte';
 
 const { Story } = defineMeta({
     title: 'Shared/ComboControl',
+    component: ComboControl,
     tags: ['autodocs'],
     parameters: {
         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.',
+            },
             story: { inline: false }, // Render stories in iframe for state isolation
         },
     },
+    argTypes: {
+        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>
 
@@ -19,20 +42,58 @@ const defaultControl = createTypographyControl({ value: 77, min: 0, max: 100, st
 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 });
 </script>
 
-<Story name="Default">
+<Story
+    name="Default"
+    args={{
+        control: defaultControl,
+    }}
+>
     <ComboControl control={defaultControl} />
 </Story>
 
-<Story name="At Minimum">
+<Story
+    name="At Minimum"
+    args={{
+        control: atMinimumControl,
+    }}
+>
     <ComboControl control={atMinimumControl} />
 </Story>
 
-<Story name="At Maximum">
+<Story
+    name="At Maximum"
+    args={{
+        control: atMaximumControl,
+    }}
+>
     <ComboControl control={atMaximumControl} />
 </Story>
 
-<Story name="With Float">
+<Story
+    name="With Float"
+    args={{
+        control: withFloatControl,
+    }}
+>
     <ComboControl control={withFloatControl} />
 </Story>
+
+<Story
+    name="Custom Labels"
+    args={{
+        control: customLabelsControl,
+        decreaseLabel: 'Decrease font size',
+        increaseLabel: 'Increase font size',
+        controlLabel: 'Open font size controls',
+    }}
+>
+    <ComboControl
+        control={customLabelsControl}
+        decreaseLabel="Decrease font size"
+        increaseLabel="Increase font size"
+        controlLabel="Open font size controls"
+    />
+</Story>