SegmentedControl: add size prop (default/small)

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

@@ -6,7 +6,7 @@
 	import { getContext } from 'svelte'
 	import type { Snippet } from 'svelte'
 	import styles from './segment.module.scss'
-	import type { SegmentedControlVariant } from './SegmentedControl.svelte'
+	import type { SegmentedControlVariant, SegmentedControlSize } from './SegmentedControl.svelte'
 
 	interface Props {
 		value: string
@@ -17,8 +17,9 @@
 
 	let { value, class: className, disabled, children: content }: Props = $props()
 
-	// Get variant from parent context
+	// Get variant and size from parent context
 	const variant = getContext<SegmentedControlVariant>('segmented-control-variant') || 'default'
+	const size = getContext<SegmentedControlSize>('segmented-control-size') || 'default'
 
 	// Apply variant-specific classes
 	const variantClasses = {
@@ -27,10 +28,17 @@
 		background: styles.background
 	}
 
+	// Apply size-specific classes
+	const sizeClasses = {
+		default: '',
+		small: styles.small
+	}
+
 	const segmentClass = $derived(
 		[
 			styles.segment,
 			variantClasses[variant],
+			sizeClasses[size],
 			className || ''
 		]
 			.filter(Boolean)

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

@@ -9,11 +9,13 @@
 	import type { HTMLAttributes } from 'svelte/elements'
 
 	export type SegmentedControlVariant = 'default' | 'blended' | 'background'
+	export type SegmentedControlSize = 'default' | 'small'
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		value?: string
 		onValueChange?: (value: string) => void
 		variant?: SegmentedControlVariant
+		size?: SegmentedControlSize
 		element?: 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light' | null
 		grow?: boolean
 		gap?: boolean
@@ -26,6 +28,7 @@
 		value = $bindable(),
 		onValueChange,
 		variant = 'default',
+		size = 'default',
 		element = null,
 		grow = false,
 		gap = false,
@@ -34,8 +37,9 @@
 		children
 	}: Props = $props()
 
-	// Provide variant to child segments via context
+	// Provide variant and size to child segments via context
 	setContext('segmented-control-variant', variant)
+	setContext('segmented-control-size', size)
 
 	// 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

@@ -29,6 +29,16 @@
 	}
 }
 
+// Small size variant
+.small {
+	font-size: typography.$font-small;
+	min-width: 80px;
+
+	.label {
+		padding: spacing.$unit spacing.$unit-2x;
+	}
+}
+
 .label {
 	border: 0.5px solid transparent;
 	border-radius: layout.$full-corner;