feat(ComboControl): add reduced flag that removes increase/decrease buttons keeping the slider popover

src/shared/ui/ComboControl/ComboControl.svelte

@@ -26,7 +26,7 @@ import PlusIcon from '@lucide/svelte/icons/plus';
 import type { ChangeEventHandler } from 'svelte/elements';
 import IconButton from '../IconButton/IconButton.svelte';
 
-interface ComboControlProps {
+interface Props {
     /**
      * Text for increase button aria-label
      */
@@ -43,6 +43,10 @@ interface ComboControlProps {
      * Control instance
      */
     control: TypographyControl;
+    /**
+     * Reduced amount of controls
+     */
+    reduced?: boolean;
 }
 
 const {
@@ -50,7 +54,8 @@ const {
     decreaseLabel,
     increaseLabel,
     controlLabel,
-}: ComboControlProps = $props();
+    reduced = false,
+}: Props = $props();
 
 // Local state for the slider to prevent infinite loops
 // svelte-ignore state_referenced_locally - $state captures initial value, $effect syncs updates
@@ -80,16 +85,18 @@ const handleSliderChange = (newValue: number) => {
 <TooltipRoot>
     <ButtonGroupRoot class="bg-transparent border-none shadow-none">
         <TooltipTrigger class="flex items-center">
-            <IconButton
-                onclick={control.decrease}
-                disabled={control.isAtMin}
-                aria-label={decreaseLabel}
-                rotation="counterclockwise"
-            >
-                {#snippet icon({ className })}
-                    <MinusIcon class={className} />
-                {/snippet}
-            </IconButton>
+            {#if !reduced}
+                <IconButton
+                    onclick={control.decrease}
+                    disabled={control.isAtMin}
+                    aria-label={decreaseLabel}
+                    rotation="counterclockwise"
+                >
+                    {#snippet icon({ className })}
+                        <MinusIcon class={className} />
+                    {/snippet}
+                </IconButton>
+            {/if}
             <PopoverRoot>
                 <PopoverTrigger>
                     {#snippet child({ props })}
@@ -127,16 +134,18 @@ const handleSliderChange = (newValue: number) => {
                 </PopoverContent>
             </PopoverRoot>
 
-            <IconButton
-                aria-label={increaseLabel}
-                onclick={control.increase}
-                disabled={control.isAtMax}
-                rotation="clockwise"
-            >
-                {#snippet icon({ className })}
-                    <PlusIcon class={className} />
-                {/snippet}
-            </IconButton>
+            {#if !reduced}
+                <IconButton
+                    aria-label={increaseLabel}
+                    onclick={control.increase}
+                    disabled={control.isAtMax}
+                    rotation="clockwise"
+                >
+                    {#snippet icon({ className })}
+                        <PlusIcon class={className} />
+                    {/snippet}
+                </IconButton>
+            {/if}
         </TooltipTrigger>
     </ButtonGroupRoot>
     {#if controlLabel}