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

src/shared/ui/Badge/Badge.svelte

@@ -9,6 +9,7 @@ import {
     labelSizeConfig,
 } from '$shared/ui/Label/config';
 import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
 
 type BadgeVariant = 'default' | 'accent' | 'success' | 'warning' | 'info';
 
@@ -20,12 +21,29 @@ const badgeVariantConfig: Record<BadgeVariant, string> = {
     info: 'bg-blue-500/10 border-blue-500/20 text-blue-600 dark:text-blue-400',
 };
 
-interface Props {
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Visual variant
+     * @default 'default'
+     */
     variant?: BadgeVariant;
+    /**
+     * Badge size
+     * @default 'xs'
+     */
     size?: LabelSize;
-    /** Renders a small filled circle before the text. */
+    /**
+     * Show status dot
+     * @default false
+     */
     dot?: boolean;
+    /**
+     * Content snippet
+     */
     children?: Snippet;
+    /**
+     * CSS classes
+     */
     class?: string;
 }
 
@@ -35,6 +53,7 @@ let {
     dot = false,
     children,
     class: className,
+    ...rest
 }: Props = $props();
 </script>
 
@@ -46,6 +65,7 @@ let {
         badgeVariantConfig[variant],
         className,
     )}
+    {...rest}
 >
     {#if dot}
         <span class="w-1 h-1 rounded-full bg-current"></span>