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

src/shared/ui/Button/Button.svelte

@@ -13,18 +13,43 @@ import type {
 } from './types';
 
 interface Props extends HTMLButtonAttributes {
+    /**
+     * Visual style variant
+     * @default 'secondary'
+     */
     variant?: ButtonVariant;
+    /**
+     * Button size
+     * @default 'md'
+     */
     size?: ButtonSize;
-    /** Svelte snippet rendered as the icon. */
+    /**
+     * Icon snippet
+     */
     icon?: Snippet;
+    /**
+     * Icon placement
+     * @default 'left'
+     */
     iconPosition?: IconPosition;
+    /**
+     * Active toggle state
+     * @default false
+     */
     active?: boolean;
     /**
-     * When true (default), adds `active:scale-[0.97]` on tap via CSS.
-     * Primary variant is excluded from scale — it shifts via translate instead.
+     * Tap animation
+     * Primary uses translate, others use scale
+     * @default true
      */
     animate?: boolean;
+    /**
+     * Content snippet
+     */
     children?: Snippet;
+    /**
+     * CSS classes
+     */
     class?: string;
 }
 
@@ -45,7 +70,6 @@ let {
 // Square sizing when icon is present but there is no text label
 const isIconOnly = $derived(!!icon && !children);
 
-// ── Variant base styles ──────────────────────────────────────────────────────
 const variantStyles: Record<ButtonVariant, string> = {
     primary: cn(
         'bg-swiss-red text-white',
@@ -125,7 +149,6 @@ const variantStyles: Record<ButtonVariant, string> = {
     ),
 };
 
-// ── Size styles ───────────────────────────────────────────────────────────────
 const sizeStyles: Record<ButtonSize, string> = {
     xs: 'h-6  px-2 text-[9px]  gap-1',
     sm: 'h-8  px-3 text-[10px] gap-1.5',
@@ -143,12 +166,11 @@ const iconSizeStyles: Record<ButtonSize, string> = {
     xl: 'h-14 w-14 p-3',
 };
 
-// ── Active state overrides (per variant) ─────────────────────────────────────
 const activeStyles: Partial<Record<ButtonVariant, string>> = {
     secondary: 'bg-paper dark:bg-paper shadow-sm border-black/20 dark:border-white/20',
     tertiary:
         'bg-paper dark:bg-[#1e1e1e] border-black/10 dark:border-white/10 shadow-sm text-neutral-900 dark:text-neutral-100',
-    ghost: 'bg-transparent dark:bg-transparent text-brnad dark:text-brand',
+    ghost: 'bg-transparent dark:bg-transparent text-brand dark:text-brand',
     outline: 'bg-surface dark:bg-paper border-brand',
     icon: 'bg-paper dark:bg-paper text-brand border-black/5 dark:border-white/10',
 };