src/shared/ui/ComboControl/ComboControl.svelte

@@ -4,7 +4,6 @@
     that opens a vertical slider popover.
 -->
 <script lang="ts">
-import type { TypographyControl } from '$shared/lib';
 import { cn } from '$shared/lib';
 import { Slider } from '$shared/ui';
 import { Button } from '$shared/ui/Button';
@@ -12,12 +11,16 @@ import MinusIcon from '@lucide/svelte/icons/minus';
 import PlusIcon from '@lucide/svelte/icons/plus';
 import { Popover } from 'bits-ui';
 import TechText from '../TechText/TechText.svelte';
+import type {
+    ControlLabels,
+    NumericControl,
+} from './types';
 
-interface Props {
+interface Props extends ControlLabels {
     /**
-     * Typography control
+     * Bounded numeric control to render
      */
-    control: TypographyControl;
+    control: NumericControl;
     /**
      * Control label
      */
@@ -31,20 +34,6 @@ interface Props {
      * @default false
      */
     reduced?: boolean;
-    /**
-     * Increase button label
-     * @default 'Increase'
-     */
-    increaseLabel?: string;
-    /**
-     * Decrease button label
-     * @default 'Decrease'
-     */
-    decreaseLabel?: string;
-    /**
-     * Control aria label
-     */
-    controlLabel?: string;
 }
 
 let {

src/shared/ui/ComboControl/types.ts

@@ -0,0 +1,60 @@
+/**
+ * Structural contract for the bounded numeric control ComboControl renders.
+ *
+ * ComboControl depends only on this shape — never on a concrete factory.
+ * The typography control factory in features/AdjustTypography produces a value
+ * conforming to it; any other conforming object works equally well.
+ */
+export interface NumericControl {
+    /**
+     * Current value. The setter is expected to clamp to [min, max] and round to step.
+     */
+    value: number;
+    /**
+     * Lower inclusive bound
+     */
+    readonly min: number;
+    /**
+     * Upper inclusive bound
+     */
+    readonly max: number;
+    /**
+     * Increment/decrement precision
+     */
+    readonly step: number;
+    /**
+     * True when the value is at or below min
+     */
+    readonly isAtMin: boolean;
+    /**
+     * True when the value is at or above max
+     */
+    readonly isAtMax: boolean;
+    /**
+     * Increase the value by one step (clamped to max)
+     */
+    increase(): void;
+    /**
+     * Decrease the value by one step (clamped to min)
+     */
+    decrease(): void;
+}
+
+/**
+ * Accessibility label fields. Single source of truth — composed by both
+ * ComboControl.Props and the typography ControlModel so they never drift.
+ */
+export interface ControlLabels {
+    /**
+     * Screen-reader label for the increase button
+     */
+    increaseLabel?: string;
+    /**
+     * Screen-reader label for the decrease button
+     */
+    decreaseLabel?: string;
+    /**
+     * Overall label describing the control's purpose (also the aria fallback)
+     */
+    controlLabel?: string;
+}

src/shared/ui/index.ts

@@ -28,6 +28,16 @@ export {
      */
     default as ComboControl,
 } from './ComboControl/ComboControl.svelte';
+export type {
+    /**
+     * Accessibility label fields shared by ComboControl and control models
+     */
+    ControlLabels,
+    /**
+     * Structural contract for the bounded numeric control ComboControl renders
+     */
+    NumericControl,
+} from './ComboControl/types';
 export {
     /**
      * Rich text input using contenteditable attribute