From 135146d1eea779f3054a6910224296d1bd9ad09a Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 20 Dec 2025 01:03:41 -0800
Subject: [PATCH] add xsmall size variant to segmented control

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

diff --git a/src/lib/components/ui/segmented-control/Segment.svelte b/src/lib/components/ui/segmented-control/Segment.svelte
index 0643247d..7d2ce740 100644
--- a/src/lib/components/ui/segmented-control/Segment.svelte
+++ b/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
diff --git a/src/lib/components/ui/segmented-control/SegmentedControl.svelte b/src/lib/components/ui/segmented-control/SegmentedControl.svelte
index 77b886d7..610396dc 100644
--- a/src/lib/components/ui/segmented-control/SegmentedControl.svelte
+++ b/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
diff --git a/src/lib/components/ui/segmented-control/segment.module.scss b/src/lib/components/ui/segmented-control/segment.module.scss
index ace740e5..3e936c22 100644
--- a/src/lib/components/ui/segmented-control/segment.module.scss
+++ b/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;