add xsmall size variant to segmented control

src/lib/components/ui/segmented-control/Segment.svelte

@@ -35,7 +35,8 @@
 	// Apply size-specific classes
 	const sizeClasses = {
 		default: '',
-		small: styles.small
+		small: styles.small,
+		xsmall: styles.xsmall
 	}
 
 	// Apply element-specific classes

src/lib/components/ui/segmented-control/SegmentedControl.svelte

@@ -9,7 +9,7 @@
 	import type { HTMLAttributes } from 'svelte/elements'
 
 	export type SegmentedControlVariant = 'default' | 'blended' | 'background'
-	export type SegmentedControlSize = 'default' | 'small'
+	export type SegmentedControlSize = 'default' | 'small' | 'xsmall'
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		value?: string

src/lib/components/ui/segmented-control/segment.module.scss

@@ -39,6 +39,16 @@
 	}
 }
 
+// Extra small size variant
+.xsmall {
+	font-size: typography.$font-small;
+	min-width: 60px;
+
+	.label {
+		padding: spacing.$unit-half spacing.$unit;
+	}
+}
+
 // Grow variant - fill available space equally
 .grow {
 	flex: 1;