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

src/shared/ui/ComboControl/ComboControl.svelte

@@ -18,12 +18,36 @@ import PlusIcon from '@lucide/svelte/icons/plus';
 import TechText from '../TechText/TechText.svelte';
 
 interface Props {
+    /**
+     * Typography control
+     */
     control: TypographyControl;
+    /**
+     * Control label
+     */
     label?: string;
+    /**
+     * CSS classes
+     */
     class?: string;
+    /**
+     * Reduced layout
+     * @default false
+     */
     reduced?: boolean;
+    /**
+     * Increase button label
+     * @default 'Increase'
+     */
     increaseLabel?: string;
+    /**
+     * Decrease button label
+     * @default 'Decrease'
+     */
     decreaseLabel?: string;
+    /**
+     * Control aria label
+     */
     controlLabel?: string;
 }
 
@@ -39,10 +63,6 @@ let {
 
 let open = $state(false);
 
-function toggleOpen() {
-    open = !open;
-}
-
 // Smart value formatting matching the Figma design
 const formattedValue = $derived(() => {
     const v = control.value;
@@ -55,7 +75,7 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
 </script>
 
 <!--
-    ── REDUCED MODE ────────────────────────────────────────────────────────────
+    REDUCED MODE
     Inline slider + value. No buttons, no popover.
 -->
 {#if reduced}
@@ -85,12 +105,15 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
     <div class={cn('flex items-center px-1 relative', className)}>
         <!-- Decrease button -->
         <Button
-            variant="secondary"
+            variant="icon"
+            size="sm"
             onclick={control.decrease}
             disabled={control.isAtMin}
             aria-label={decreaseLabel}
         >
-            <MinusIcon class="size-3.5 stroke-2" />
+            {#snippet icon()}
+                <MinusIcon class="size-3.5 stroke-2" />
+            {/snippet}
         </Button>
 
         <!-- Trigger -->
@@ -152,12 +175,15 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
 
         <!-- Increase button -->
         <Button
-            variant="secondary"
+            variant="icon"
+            size="sm"
             onclick={control.increase}
             disabled={control.isAtMax}
             aria-label={increaseLabel}
         >
-            <PlusIcon class="size-3.5 stroke-2" />
+            {#snippet icon()}
+                <PlusIcon class="size-3.5 stroke-2" />
+            {/snippet}
         </Button>
     </div>
 {/if}