add grow prop to segmented control

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

@@ -17,9 +17,10 @@
 
 	let { value, class: className, disabled, children: content }: Props = $props()
 
-	// Get variant and size from parent context
+	// Get variant, size, and grow from parent context
 	const variant = getContext<SegmentedControlVariant>('segmented-control-variant') || 'default'
 	const size = getContext<SegmentedControlSize>('segmented-control-size') || 'default'
+	const grow = getContext<boolean>('segmented-control-grow') || false
 
 	// Apply variant-specific classes
 	const variantClasses = {
@@ -39,6 +40,7 @@
 			styles.segment,
 			variantClasses[variant],
 			sizeClasses[size],
+			grow ? styles.grow : '',
 			className || ''
 		]
 			.filter(Boolean)

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

@@ -37,9 +37,10 @@
 		children
 	}: Props = $props()
 
-	// Provide variant and size to child segments via context
+	// Provide variant, size, and grow to child segments via context
 	setContext('segmented-control-variant', variant)
 	setContext('segmented-control-size', size)
+	setContext('segmented-control-grow', grow)
 
 	// Track previous value to only fire callback on actual changes (not initialization)
 	let previousValue = $state<string | undefined>(undefined)

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

@@ -39,6 +39,12 @@
 	}
 }
 
+// Grow variant - fill available space equally
+.grow {
+	flex: 1;
+	min-width: 0;
+}
+
 .label {
 	border: 0.5px solid transparent;
 	border-radius: layout.$full-corner;