refactor(ui): update shared components and add ControlGroup, SidebarContainer

src/shared/ui/Slider/Slider.stories.svelte

@@ -75,24 +75,6 @@ let valueHigh = $state(75);
     {/snippet}
 </Story>
 
-<Story
-    name="Dark Mode"
-    args={{ orientation: 'horizontal', min: 0, max: 100, step: 1, value }}
-    parameters={{
-        backgrounds: {
-            default: 'dark',
-        },
-    }}
->
-    {#snippet template(args)}
-        <div class="p-8 bg-background">
-            <Slider {...args} />
-            <p class="mt-4 text-sm text-muted-foreground">Value: {args.value}</p>
-            <p class="mt-2 text-xs text-muted-foreground">Dark mode: track uses neutral-800</p>
-        </div>
-    {/snippet}
-</Story>
-
 <Story name="Interactive States" args={{ orientation: 'horizontal', min: 0, max: 100, step: 1, value: 50 }}>
     {#snippet template(args)}
         <div class="p-8 space-y-8">

src/shared/ui/Slider/Slider.svelte

@@ -10,18 +10,48 @@ import {
 } from 'bits-ui';
 
 interface Props {
+    /**
+     * Slider value
+     * @default 0
+     */
     value?: number;
+    /**
+     * Minimum value
+     * @default 0
+     */
     min?: number;
+    /**
+     * Maximum value
+     * @default 100
+     */
     max?: number;
+    /**
+     * Step increment
+     * @default 1
+     */
     step?: number;
+    /**
+     * Disabled state
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * Slider orientation
+     * @default 'horizontal'
+     */
     orientation?: Orientation;
     /**
-     * Format the displayed value label.
+     * Value formatter
      * @default (v) => v
      */
     format?: (v: number) => string | number;
+    /**
+     * Value change callback
+     */
     onValueChange?: (v: number) => void;
+    /**
+     * CSS classes
+     */
     class?: string;
 }