update segment control styles

to match button styles for small sizes.

Author: PavelLaptev

packages/ui/src/lib/components/segmentControl/Segment.svelte

@@ -20,6 +20,7 @@
 
 	const context = getContext<SegmentContext>("SegmentControl");
 	const selectedSegmentId = context.selectedSegmentId;
+	const iconSize = $derived(context.size === "small" ? 14 : 16);
 
 	let elRef = $state<HTMLButtonElement>();
 	let isFocused = $state(false);
@@ -67,7 +68,7 @@
 		{/if}
 		{#if icon}
 			<span class="segment-control-item__icon" aria-hidden="true">
-				<Icon name={icon} />
+				<Icon name={icon} size={iconSize} />
 			</span>
 		{/if}
 	</button>

packages/ui/src/lib/components/segmentControl/SegmentControl.svelte

@@ -34,6 +34,9 @@
 
 	const context: SegmentContext = {
 		selectedSegmentId,
+		get size() {
+			return size;
+		},
 		registerSegment: (id: string) => {
 			if (!registeredSegments.includes(id)) {
 				registeredSegments.push(id);

packages/ui/src/lib/components/segmentControl/segmentTypes.ts

@@ -2,6 +2,7 @@ import type { Writable } from "svelte/store";
 
 export interface SegmentContext {
 	selectedSegmentId: Writable<string | undefined>;
+	size: "default" | "small";
 	registerSegment(id: string): void;
 	selectSegment(id: string): void;
 }

packages/ui/src/stories/components/SegmentControl.stories.svelte

@@ -9,9 +9,8 @@
 			fullWidth: false,
 			size: "default",
 			segments: [
-				{ id: "1", icon: "horz-columns" },
-				{ id: "2", icon: "single-view" },
-				{ id: "3", icon: "vert-columns" },
+				{ id: "1", icon: "folder-tree" },
+				{ id: "2", icon: "list" },
 			],
 		},
 		argTypes: {