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('segmented-control-variant') || 'default' const size = getContext('segmented-control-size') || 'default' + const grow = getContext('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(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;