From b8d019b824416e0f21b6357cf52f06fcf9985652 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 18 Feb 2026 17:03:44 +0300
Subject: [PATCH] feat(ComparisonSlider): add labels

---
 src/features/SetupFont/ui/TypographyMenu.svelte | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/features/SetupFont/ui/TypographyMenu.svelte b/src/features/SetupFont/ui/TypographyMenu.svelte
index 631eff9..9d8d6ba 100644
--- a/src/features/SetupFont/ui/TypographyMenu.svelte
+++ b/src/features/SetupFont/ui/TypographyMenu.svelte
@@ -15,6 +15,7 @@ import {
     Drawer,
     IconButton,
 } from '$shared/ui';
+import { Label } from '$shared/ui';
 import SlidersIcon from '@lucide/svelte/icons/sliders-vertical';
 import { getContext } from 'svelte';
 import { cubicOut } from 'svelte/easing';
@@ -72,7 +73,11 @@ $effect(() => {
 </script>
 
 <div
-    class={cn('w-auto max-screen z-10 flex justify-center', hidden && 'hidden', className)}
+    class={cn(
+        'w-auto max-screen z-10 flex justify-center',
+        hidden && 'hidden',
+        className,
+    )}
     in:receive={{ key: 'panel' }}
     out:send={{ key: 'panel' }}
 >
@@ -86,11 +91,17 @@ $effect(() => {
                 </IconButton>
             {/snippet}
             {#snippet content({ className })}
-                <div class={cn(className, 'flex flex-col gap-6')}>
+                <Label
+                    class="mt-6 mb-12 px-2"
+                    text="Typography Controls"
+                    align="center"
+                />
+                <div class={cn(className, 'flex flex-col gap-8')}>
                     {#each controlManager.controls as control (control.id)}
                         <ComboControlV2
                             control={control.instance}
                             orientation="horizontal"
+                            label={control.controlLabel}
                             reduced
                         />
                     {/each}
@@ -112,6 +123,7 @@ $effect(() => {
                                 decreaseLabel={control.decreaseLabel}
                                 controlLabel={control.controlLabel}
                                 orientation="vertical"
+                                showScale={false}
                             />
                         {/each}
                     </div>