From 76484b7bb07277235b1abc8e8c18304ba6e74cc6 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 17 Dec 2025 22:40:05 -0800
Subject: [PATCH] add grow prop to segmented control

---
 src/lib/components/ui/segmented-control/Segment.svelte      | 4 +++-
 .../components/ui/segmented-control/SegmentedControl.svelte | 3 ++-
 src/lib/components/ui/segmented-control/segment.module.scss | 6 ++++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/ui/segmented-control/Segment.svelte b/src/lib/components/ui/segmented-control/Segment.svelte
index d98ada2e..225929d1 100644
--- a/src/lib/components/ui/segmented-control/Segment.svelte
+++ b/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)
diff --git a/src/lib/components/ui/segmented-control/SegmentedControl.svelte b/src/lib/components/ui/segmented-control/SegmentedControl.svelte
index 53d10a2b..adb1b58d 100644
--- a/src/lib/components/ui/segmented-control/SegmentedControl.svelte
+++ b/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)
diff --git a/src/lib/components/ui/segmented-control/segment.module.scss b/src/lib/components/ui/segmented-control/segment.module.scss
index f4d334c3..898517c5 100644
--- a/src/lib/components/ui/segmented-control/segment.module.scss
+++ b/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;