[stdf]Update Steps compoent, demo and documents.

demo/src/routes/en_US/steps/+page.svelte

@@ -12,11 +12,11 @@
 		{ step: { title: 'sleep' } },
 	];
 	const steps1 = [
-		{ step: { title: 'Get up', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-line' } } } },
-		{ step: { title: 'Eat', bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } } } },
-		{ step: { title: 'Drink', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } } },
-		{ step: { title: 'Beat beans', bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } } } },
-		{ step: { title: 'sleep', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } } },
+		{ step: { title: 'Get up', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-hotel-bed-line' } } } },
+		{ step: { title: 'Eat', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-restaurant-2-line' } } } },
+		{ step: { title: 'Drink', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-cup-line' } } } },
+		{ step: { title: 'Beat beans', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-emotion-sad-line' } } } },
+		{ step: { title: 'sleep', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-zzz-line' } } } },
 	];
 	const steps2 = [
 		{ step: { title: 'Get up' }, finishStep: { title: 'Have got up' } },
@@ -27,24 +27,24 @@
 	];
 	const steps3 = [
 		{
-			step: { title: 'Get up', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-line' } } },
-			finishStep: { title: 'Have got up', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-fill' } } },
+			step: { title: 'Get up', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-hotel-bed-line' } } },
+			finishStep: { title: 'Have got up', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-hotel-bed-fill' } } },
 		},
 		{
-			step: { title: 'Eat', bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } } },
-			finishStep: { title: 'Have had enough', bar: { type: 'icon', icon: { name: 'ri-restaurant-2-fill' } } },
+			step: { title: 'Eat', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-restaurant-2-line' } } },
+			finishStep: { title: 'Have had enough', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-restaurant-2-fill' } } },
 		},
 		{
-			step: { title: 'Drink', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } },
-			finishStep: { title: 'Drink up', bar: { type: 'icon', icon: { name: 'ri-cup-fill' } } },
+			step: { title: 'Drink', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-cup-line' } } },
+			finishStep: { title: 'Drink up', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-cup-fill' } } },
 		},
 		{
-			step: { title: 'Beat beans', bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } } },
-			finishStep: { title: 'Have a good time', bar: { type: 'icon', icon: { name: 'ri-emotion-sad-fill' } } },
+			step: { title: 'Beat beans', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-emotion-sad-line' } } },
+			finishStep: { title: 'Have a good time', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-emotion-sad-fill' } } },
 		},
 		{
-			step: { title: 'sleep', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } },
-			finishStep: { title: 'Fall asleep', bar: { type: 'icon', icon: { name: 'ri-zzz-fill' } } },
+			step: { title: 'sleep', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-zzz-line' } } },
+			finishStep: { title: 'Fall asleep', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-zzz-fill' } } },
 		},
 	];
 	const steps4 = [
@@ -60,123 +60,163 @@
 		{ step: { title: 'sleep', desc: 'Too full to sleep.' } },
 	];
 	const steps5 = [
-		{ step: { title: 'Get up', desc: 'Get up and move bricks!', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-line' } } } },
+		{
+			step: {
+				title: 'Get up',
+				desc: 'Get up and move bricks!',
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-hotel-bed-line' } },
+			},
+		},
 		{
 			step: {
 				title: 'Eat',
 				desc: 'Eat, eat, eat, eat, fat you.',
-				bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } },
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-restaurant-2-line' } },
+			},
+		},
+		{
+			step: {
+				title: 'Drink',
+				desc: 'Walk slowly and drink lots of water.',
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-cup-line' } },
 			},
 		},
-		{ step: { title: 'Drink', desc: 'Walk slowly and drink lots of water.', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } } },
 		{
 			step: {
 				title: 'Beat beans',
 				desc: "Eat, sleep, play peas It's cool, it's cool, it's cool, it's cool, it's cool. By the way to verify the progress bar height adaptive step text height.",
-				bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } },
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-emotion-sad-line' } },
 			},
 		},
-		{ step: { title: 'sleep', desc: 'Too full to sleep.', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } } },
+		{
+			step: { title: 'sleep', desc: 'Too full to sleep.', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-zzz-line' } } },
+		},
 	];
 	const steps6 = [
 		{
-			step: { title: 'Get up', desc: 'Get up and move bricks!', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-line' } } },
+			step: {
+				title: 'Get up',
+				desc: 'Get up and move bricks!',
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-hotel-bed-line' } },
+			},
 			finishStep: {
 				title: 'Have got up',
 				desc: 'The bricks are gone!',
-				bar: { type: 'icon', icon: { name: 'ri-hotel-bed-fill' } },
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-hotel-bed-fill' } },
 			},
 		},
 		{
 			step: {
 				title: 'Eat',
 				desc: 'Eat, eat, eat, eat, fat you.',
-				bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } },
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-restaurant-2-line' } },
 			},
 			finishStep: {
 				title: 'Have had enough',
 				desc: 'The meal has been eaten up!',
-				bar: { type: 'icon', icon: { name: 'ri-restaurant-2-fill' } },
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-restaurant-2-fill' } },
 			},
 		},
 		{
-			step: { title: 'Drink', desc: 'Walk slowly and drink lots of water.', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } },
+			step: {
+				title: 'Drink',
+				desc: 'Walk slowly and drink lots of water.',
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-cup-line' } },
+			},
 			finishStep: {
 				title: 'Drink up',
 				desc: 'I drink too much water and it spills out of my eyes!',
-				bar: { type: 'icon', icon: { name: 'ri-cup-fill' } },
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-cup-fill' } },
 			},
 		},
 		{
 			step: {
 				title: 'Beat beans',
 				desc: 'Eat, sleep, play beans.',
-				bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } },
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-emotion-sad-line' } },
 			},
 			finishStep: {
 				title: 'Have a good time',
 				desc: 'Doudou has been beaten to the ground.',
-				bar: { type: 'icon', icon: { name: 'ri-emotion-sad-fill' } },
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-emotion-sad-fill' } },
 			},
 		},
 		{
-			step: { title: 'sleep', desc: 'Too full to sleep.', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } },
+			step: {
+				title: 'sleep',
+				desc: 'Too full to sleep.',
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-zzz-line' } },
+			},
 			finishStep: {
 				title: 'Fall asleep',
 				desc: 'Asleep and dreaming!',
-				bar: { type: 'icon', icon: { name: 'ri-zzz-fill' } },
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-zzz-fill' } },
 			},
 		},
 	];
 	const steps7 = [
-		{ step: { title: 'Get up', desc: 'Get up and move bricks!', bar: '1' } },
-		{ step: { title: 'Eat', desc: 'Eat, eat, eat, eat, fat you.', bar: 'eat' } },
-		{ step: { title: 'Drink', desc: 'Walk slowly and drink lots of water.', bar: '3' } },
+		{ step: { title: 'Get up', desc: 'Get up and move bricks!', bar: { type: /** @type {"string"} */ ('string'), content: '1' } } },
+		{ step: { title: 'Eat', desc: 'Eat, eat, eat, eat, fat you.', bar: { type: /** @type {"string"} */ ('string'), content: 'eat' } } },
+		{
+			step: {
+				title: 'Drink',
+				desc: 'Walk slowly and drink lots of water.',
+				bar: { type: /** @type {"string"} */ ('string'), content: '3' },
+			},
+		},
 		{
 			step: {
 				title: 'Beat beans',
 				desc: 'Eat, sleep, play beans.',
-				bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } },
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-emotion-sad-line' } },
 			},
 		},
-		{ step: { title: 'sleep', desc: 'Too full to sleep.', bar: '😴' } },
+		{ step: { title: 'sleep', desc: 'Too full to sleep.', bar: { type: /** @type {"string"} */ ('string'), content: '😴' } } },
 	];
 	const steps8 = [
-		{ step: { title: 'Get up', bar: { type: 'image', image: '/assets/images/avatar_2.png' } } },
-		{ step: { title: 'Eat', bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } } } },
-		{ step: { title: 'Drink', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } } },
-		{ step: { title: 'Beat beans', bar: { type: 'image', image: '/assets/images/avatar_1.jpg' } } },
-		{ step: { title: 'sleep', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } } },
+		{ step: { title: 'Get up', bar: { type: /** @type {"image"} */ ('image'), content: '/assets/images/avatar_2.png' } } },
+		{ step: { title: 'Eat', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-restaurant-2-line' } } } },
+		{ step: { title: 'Drink', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-cup-line' } } } },
+		{ step: { title: 'Beat beans', bar: { type: /** @type {"image"} */ ('image'), content: '/assets/images/avatar_1.jpg' } } },
+		{ step: { title: 'sleep', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-zzz-line' } } } },
 	];
 	const steps9 = [
-		{ step: { title: 'Get up', desc: 'Get up and move bricks!', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-line' } } } },
+		{
+			step: {
+				title: 'Get up',
+				desc: 'Get up and move bricks!',
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-hotel-bed-line' } },
+			},
+		},
 		{
 			step: {
 				title: 'Eat',
 				desc: 'Eat, eat, eat, eat, fat you.',
-				bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } },
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-restaurant-2-line' } },
 				injComponent: injCom1,
 			},
 		},
-		{ step: { title: 'Drink', desc: 'Walk slowly and drink lots of water.', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } } },
+		{
+			step: {
+				title: 'Drink',
+				desc: 'Walk slowly and drink lots of water.',
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-cup-line' } },
+			},
+		},
 		{
 			step: {
 				title: 'Beat beans',
 				desc: 'Eat, sleep, play beans.',
-				bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } },
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-emotion-sad-line' } },
 				injComponent: injCom2,
 			},
 		},
-		{ step: { title: 'sleep', desc: 'Too full to sleep.', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } } },
+		{
+			step: { title: 'sleep', desc: 'Too full to sleep.', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-zzz-line' } } },
+		},
 	];
 
-	let current = 1;
-	const preFun = () => {
-		current > 1 && current--;
-	};
-	const nextFun = () => {
-		current < steps.length + 1 && current++;
-	};
+	let current = $state(1);
 </script>
 
 <div class="mt-8 px-4 mb-4 font-bold text-2xl">Horizontal arrangement</div>
@@ -257,10 +297,10 @@
 
 <div class="flex sticky bottom-0 z-10 bg-white/50 dark:bg-black/50 backdrop-blur">
 	<div class="flex-1">
-		<Button fill="lineTheme" on:click={preFun}>Previous step</Button>
+		<Button fill="lineTheme" disabled={current === 1} onclick={() => current > 1 && current--}>Previous step</Button>
 	</div>
 	<div class="flex-1">
-		<Button fill="lineTheme" on:click={nextFun}>Next step</Button>
+		<Button fill="lineTheme" disabled={current === steps.length} onclick={() => current < steps.length + 1 && current++}>Next step</Button>
 	</div>
 </div>
 
@@ -281,7 +321,7 @@
 </script>
 
 <div class="text-primary dark:text-dark text-sm">Here you inject something in the form of a component</div>
-<div class="flex items-center justify-between">
+<div class="flex items-center space-x-4">
     <Button size="full" heightIn="2" injClass="px-4">button</Button>
     <Avatar image="/assets/images/avatar_1.jpg" size="sm" />
     <Icon name="ri-money-cny-circle-line" theme />

demo/src/routes/en_US/steps/injCom2_en.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <div class="text-primary dark:text-dark text-sm">Here you inject something in the form of a component</div>
-<div class="flex items-center justify-between">
+<div class="flex items-center space-x-4">
 	<Button size="full" heightIn="2" injClass="px-4">button</Button>
 	<Avatar image="/assets/images/avatar_1.jpg" size="sm" />
 	<Icon name="ri-money-cny-circle-line" theme />

demo/src/routes/zh_CN/steps/+page.svelte

@@ -12,11 +12,11 @@
 		{ step: { title: '睡觉' } },
 	];
 	const steps1 = [
-		{ step: { title: '起床', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-line' } } } },
-		{ step: { title: '吃饭', bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } } } },
-		{ step: { title: '喝水', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } } },
-		{ step: { title: '打豆豆', bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } } } },
-		{ step: { title: '睡觉', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } } },
+		{ step: { title: '起床', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-hotel-bed-line' } } } },
+		{ step: { title: '吃饭', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-restaurant-2-line' } } } },
+		{ step: { title: '喝水', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-cup-line' } } } },
+		{ step: { title: '打豆豆', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-emotion-sad-line' } } } },
+		{ step: { title: '睡觉', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-zzz-line' } } } },
 	];
 	const steps2 = [
 		{ step: { title: '起床' }, finishStep: { title: '已起床' } },
@@ -27,24 +27,24 @@
 	];
 	const steps3 = [
 		{
-			step: { title: '起床', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-line' } } },
-			finishStep: { title: '已起床', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-fill' } } },
+			step: { title: '起床', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-hotel-bed-line' } } },
+			finishStep: { title: '已起床', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-hotel-bed-fill' } } },
 		},
 		{
-			step: { title: '吃饭', bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } } },
-			finishStep: { title: '吃饱了', bar: { type: 'icon', icon: { name: 'ri-restaurant-2-fill' } } },
+			step: { title: '吃饭', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-restaurant-2-line' } } },
+			finishStep: { title: '吃饱了', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-restaurant-2-fill' } } },
 		},
 		{
-			step: { title: '喝水', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } },
-			finishStep: { title: '喝足了', bar: { type: 'icon', icon: { name: 'ri-cup-fill' } } },
+			step: { title: '喝水', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-cup-line' } } },
+			finishStep: { title: '喝足了', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-cup-fill' } } },
 		},
 		{
-			step: { title: '打豆豆', bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } } },
-			finishStep: { title: '打爽了', bar: { type: 'icon', icon: { name: 'ri-emotion-sad-fill' } } },
+			step: { title: '打豆豆', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-emotion-sad-line' } } },
+			finishStep: { title: '打爽了', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-emotion-sad-fill' } } },
 		},
 		{
-			step: { title: '睡觉', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } },
-			finishStep: { title: '睡着了', bar: { type: 'icon', icon: { name: 'ri-zzz-fill' } } },
+			step: { title: '睡觉', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-zzz-line' } } },
+			finishStep: { title: '睡着了', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-zzz-fill' } } },
 		},
 	];
 	const steps4 = [
@@ -60,123 +60,141 @@
 		{ step: { title: '睡觉', desc: '吃太饱，睡不着。' } },
 	];
 	const steps5 = [
-		{ step: { title: '起床', desc: '起床搬砖了！', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-line' } } } },
+		{
+			step: { title: '起床', desc: '起床搬砖了！', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-hotel-bed-line' } } },
+		},
 		{
 			step: {
 				title: '吃饭',
 				desc: '吃吃吃，肥死你。',
-				bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } },
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-restaurant-2-line' } },
+			},
+		},
+		{
+			step: {
+				title: '喝水',
+				desc: '慢慢走路，多多喝水。',
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-cup-line' } },
 			},
 		},
-		{ step: { title: '喝水', desc: '慢慢走路，多多喝水。', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } } },
 		{
 			step: {
 				title: '打豆豆',
 				desc: '吃饭睡觉，打豆豆很爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽。顺便验证进度条高度自适应步骤文字高度。',
-				bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } },
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-emotion-sad-line' } },
 			},
 		},
-		{ step: { title: '睡觉', desc: '吃太饱，睡不着。', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } } },
+		{ step: { title: '睡觉', desc: '吃太饱，睡不着。', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-zzz-line' } } } },
 	];
 	const steps6 = [
 		{
-			step: { title: '起床', desc: '起床搬砖了！', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-line' } } },
+			step: { title: '起床', desc: '起床搬砖了！', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-hotel-bed-line' } } },
 			finishStep: {
 				title: '已起床',
 				desc: '砖已经搬完了！',
-				bar: { type: 'icon', icon: { name: 'ri-hotel-bed-fill' } },
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-hotel-bed-fill' } },
 			},
 		},
 		{
 			step: {
 				title: '吃饭',
 				desc: '吃吃吃，肥死你。',
-				bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } },
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-restaurant-2-line' } },
 			},
 			finishStep: {
 				title: '吃饱了',
 				desc: '饭已经全部被吃完了！',
-				bar: { type: 'icon', icon: { name: 'ri-restaurant-2-fill' } },
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-restaurant-2-fill' } },
 			},
 		},
 		{
-			step: { title: '喝水', desc: '慢慢走路，多多喝水。', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } },
+			step: {
+				title: '喝水',
+				desc: '慢慢走路，多多喝水。',
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-cup-line' } },
+			},
 			finishStep: {
 				title: '喝足了',
 				desc: '水喝太多，从眼睛里溢出来了！',
-				bar: { type: 'icon', icon: { name: 'ri-cup-fill' } },
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-cup-fill' } },
 			},
 		},
 		{
 			step: {
 				title: '打豆豆',
 				desc: '吃饭睡觉，打豆豆。',
-				bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } },
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-emotion-sad-line' } },
 			},
 			finishStep: {
 				title: '打爽了',
 				desc: '豆豆已经被打趴下了。',
-				bar: { type: 'icon', icon: { name: 'ri-emotion-sad-fill' } },
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-emotion-sad-fill' } },
 			},
 		},
 		{
-			step: { title: '睡觉', desc: '吃太饱，睡不着。', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } },
+			step: {
+				title: '睡觉',
+				desc: '吃太饱，睡不着。',
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-zzz-line' } },
+			},
 			finishStep: {
 				title: '睡着了',
 				desc: '睡着了正在做梦呢！',
-				bar: { type: 'icon', icon: { name: 'ri-zzz-fill' } },
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-zzz-fill' } },
 			},
 		},
 	];
 	const steps7 = [
-		{ step: { title: '起床', desc: '起床搬砖了！', bar: '1' } },
-		{ step: { title: '吃饭', desc: '吃吃吃，肥死你。', bar: '吃' } },
-		{ step: { title: '喝水', desc: '慢慢走路，多多喝水。', bar: '3' } },
+		{ step: { title: '起床', desc: '起床搬砖了！', bar: { type: /** @type {"string"} */ ('string'), content: '1' } } },
+		{ step: { title: '吃饭', desc: '吃吃吃，肥死你。', bar: { type: /** @type {"string"} */ ('string'), content: '吃' } } },
+		{ step: { title: '喝水', desc: '慢慢走路，多多喝水。', bar: { type: /** @type {"string"} */ ('string'), content: '3' } } },
 		{
 			step: {
 				title: '打豆豆',
 				desc: '吃饭睡觉，打豆豆。',
-				bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } },
+				bar: { type: /** @type {"string"} */ ('string'), content: '5' },
 			},
 		},
-		{ step: { title: '睡觉', desc: '吃太饱，睡不着。', bar: '😴' } },
+		{ step: { title: '睡觉', desc: '吃太饱，睡不着。', bar: { type: /** @type {"string"} */ ('string'), content: '😴' } } },
 	];
 	const steps8 = [
-		{ step: { title: '起床', bar: { type: 'image', image: '/assets/images/avatar_2.png' } } },
-		{ step: { title: '吃饭', bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } } } },
-		{ step: { title: '喝水', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } } },
-		{ step: { title: '打豆豆', bar: { type: 'image', image: '/assets/images/avatar_1.jpg' } } },
-		{ step: { title: '睡觉', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } } },
+		{ step: { title: '起床', bar: { type: /** @type {"image"} */ ('image'), content: '/assets/images/avatar_2.png' } } },
+		{ step: { title: '吃饭', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-restaurant-2-line' } } } },
+		{ step: { title: '喝水', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-cup-line' } } } },
+		{ step: { title: '打豆豆', bar: { type: /** @type {"image"} */ ('image'), content: '/assets/images/avatar_1.jpg' } } },
+		{ step: { title: '睡觉', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-zzz-line' } } } },
 	];
 	const steps9 = [
-		{ step: { title: '起床', desc: '起床搬砖了！', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-line' } } } },
+		{
+			step: { title: '起床', desc: '起床搬砖了！', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-hotel-bed-line' } } },
+		},
 		{
 			step: {
 				title: '吃饭',
 				desc: '吃吃吃，肥死你。',
-				bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } },
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-restaurant-2-line' } },
 				injComponent: injCom1,
 			},
 		},
-		{ step: { title: '喝水', desc: '慢慢走路，多多喝水。', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } } },
+		{
+			step: {
+				title: '喝水',
+				desc: '慢慢走路，多多喝水。',
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-cup-line' } },
+			},
+		},
 		{
 			step: {
 				title: '打豆豆',
 				desc: '吃饭睡觉，打豆豆。',
-				bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } },
+				bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-emotion-sad-line' } },
 				injComponent: injCom2,
 			},
 		},
-		{ step: { title: '睡觉', desc: '吃太饱，睡不着。', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } } },
+		{ step: { title: '睡觉', desc: '吃太饱，睡不着。', bar: { type: /** @type {"icon"} */ ('icon'), content: { name: 'ri-zzz-line' } } } },
 	];
 
-	let current = 1;
-	const preFun = () => {
-		current > 1 && current--;
-	};
-	const nextFun = () => {
-		current < steps.length + 1 && current++;
-	};
+	let current = $state(1);
 </script>
 
 <div class="mt-8 px-4 mb-4 font-bold text-2xl">横向排列</div>
@@ -257,10 +275,10 @@
 
 <div class="flex sticky bottom-0 z-10 bg-white/50 dark:bg-black/50 backdrop-blur">
 	<div class="flex-1">
-		<Button fill="lineTheme" on:click={preFun}>上一步</Button>
+		<Button fill="lineTheme" disabled={current === 1} onclick={() => current > 1 && current--}>上一步</Button>
 	</div>
 	<div class="flex-1">
-		<Button fill="lineTheme" on:click={nextFun}>下一步</Button>
+		<Button fill="lineTheme" disabled={current === steps.length} onclick={() => current < steps.length + 1 && current++}>下一步</Button>
 	</div>
 </div>
 
@@ -278,7 +296,7 @@
 </script>
 
 <div class="text-primary dark:text-dark text-sm">此处以组件形式注入一些内容</div>
-<div class="flex items-center justify-between">
+<div class="flex items-center space-x-4">
     <Button size="full" heightIn="2" injClass="px-4">按钮</Button>
     <Avatar image="/assets/images/avatar_1.jpg" size="sm" />
     <Icon name="ri-money-cny-circle-line" theme />

demo/src/routes/zh_CN/steps/injCom2.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <div class="text-primary dark:text-dark text-sm">此处以组件形式注入一些内容</div>
-<div class="flex items-center justify-between">
+<div class="flex items-center space-x-4">
 	<Button size="full" heightIn="2" injClass="px-4">按钮</Button>
 	<Avatar image="/assets/images/avatar_1.jpg" size="sm" />
 	<Icon name="ri-money-cny-circle-line" theme />

doc/components/steps/api.md

@@ -1,22 +1,47 @@
 ## Steps Props
 
-| 属性      | 类型    | 默认值 | 可选值                    | 必传 | 说明                                  |
-| --------- | ------- | ------ | ------------------------- | ---- | ------------------------------------- |
-| steps     | Array   | []     | -                         | Y    | step 或 finishStep Props 组成的数组。 |
-| current   | Number  | 1      | -                         | N    | 当前进行的步骤序号。                  |
-| radius    | String  | 'base' | 'none'/'base'/'xl'/'full' | N    | 圆角风格。                            |
-| barBorder | Boolean | true   | true/false                | N    | 图标是否带边框。                      |
-| vertical  | Boolean | false  | true/false                | N    | 是否纵向布局。                        |
-
-## step Props
-
-| 属性         | 类型          | 默认值 | 可选值           | 必传 | 说明               |
-| ------------ | ------------- | ------ | ---------------- | ---- | ------------------ |
-| title        | String        | -      | -                | Y    | 步骤标题。         |
-| bar          | String/Object | -      | String/Object    | N    | 步骤图标区域内容。 |
-| desc         | String        | -      | -                | N    | 步骤描述。         |
-| injComponent | Component     | -      | Svelte Component | N    | Svelte 组件。      |
-
-## finishStep Props
-
-同 step Props，表示已完成步骤参数。
+| 名称      | 类型                              | 默认值   | 必传 | 说明                                        |
+| --------- | --------------------------------- | -------- | ---- | ------------------------------------------- |
+| steps     | `StepsItem[]`                     | `[]`     | Y    | step Props 或 finishStep Props 组成的数组。 |
+| current   | `number`                          | `1`      | N    | 当前进行的步骤序号。                        |
+| radius    | `'none'`/`'base'`/`'xl'`/`'full'` | `'base'` | N    | 圆角风格。                                  |
+| barBorder | `boolean`                         | `true`   | N    | 图标是否带边框。                            |
+| vertical  | `boolean`                         | `false`  | N    | 是否纵向布局。                              |
+
+## StepsItem
+
+| 名称       | 类型              | 默认值 | 必传 | 说明                                                 |
+| ---------- | ----------------- | ------ | ---- | ---------------------------------------------------- |
+| step       | `StepsStep`       | `{}`   | Y    | 步骤参数。                                           |
+| finishStep | `StepsFinishStep` | `{}`   | N    | 已完成步骤参数。                                     |
+| height     | `number`          | `0`    | N    | 步骤高度，用于纵向布局，一般不设置，由组件自动计算。 |
+
+## step Props && StepsFinishStep Props
+
+| 名称         | 类型                                                          | 默认值 | 必传 | 说明                         |
+| ------------ | ------------------------------------------------------------- | ------ | ---- | ---------------------------- |
+| title        | `string`                                                      | `''`   | Y    | 步骤标题。                   |
+| bar          | `StepsStepBarIcon \| StepsStepBarImage \| StepsStepBarString` | `{}`   | N    | 步骤区域内容。               |
+| desc         | `string`                                                      | `''`   | N    | 步骤描述内容。               |
+| injComponent | `Component`                                                   | -      | N    | 向步骤区域注入 Svelte 组件。 |
+
+## StepsStepBarIcon Props
+
+| 名称    | 类型     | 默认值 | 必传 | 说明                                                                     |
+| ------- | -------- | ------ | ---- | ------------------------------------------------------------------------ |
+| type    | `'icon'` | `{}`   | Y    | 步骤区域内容为图标时使用。                                               |
+| content | `Icon`   | `-`    | Y    | 图标参数 [Icon Props](https://stdf.design/#/components?nav=icon&tab=1)。 |
+
+## StepsStepBarImage Props
+
+| 名称    | 类型      | 默认值 | 必传 | 说明                       |
+| ------- | --------- | ------ | ---- | -------------------------- |
+| type    | `'image'` | `{}`   | Y    | 步骤区域内容为图片时使用。 |
+| content | `string`  | `-`    | Y    | 图片路径。                 |
+
+## StepsStepBarString Props
+
+| 名称    | 类型       | 默认值 | 必传 | 说明                         |
+| ------- | ---------- | ------ | ---- | ---------------------------- |
+| type    | `'string'` | `{}`   | Y    | 步骤区域内容为字符串时使用。 |
+| content | `string`   | `-`    | Y    | 字符串内容。                 |

doc/components/steps/api_en.md

@@ -1,22 +1,47 @@
 ## Steps Props
 
-| Property  | Type    | Default | Options                   | Required | Description                                    |
-| --------- | ------- | ------- | ------------------------- | -------- | ---------------------------------------------- |
-| steps     | Array   | []      | -                         | Y        | An array composed of step or finishStep Props. |
-| current   | Number  | 1       | -                         | N        | The current step number.                       |
-| radius    | String  | 'base'  | 'none'/'base'/'xl'/'full' | N        | The border radius style.                       |
-| barBorder | Boolean | true    | true/false                | N        | Whether the icon has a border.                 |
-| vertical  | Boolean | false   | true/false                | N        | Whether to use a vertical layout.              |
-
-## step Props
-
-| Property     | Type          | Default | Options          | Required | Description                        |
-| ------------ | ------------- | ------- | ---------------- | -------- | ---------------------------------- |
-| title        | String        | -       | -                | Y        | The title of step.                 |
-| bar          | String/Object | -       | String/Object    | N        | The content of the step icon area. |
-| desc         | String        | -       | -                | N        | The description of the step.       |
-| injComponent | Component     | -       | Svelte Component | N        | The Svelte component.              |
-
-## finishStep Props
-
-The same as step Props, representing the parameters of completed steps.
+| Name      | Type                              | Default  | Required | Description                                       |
+| --------- | --------------------------------- | -------- | -------- | ------------------------------------------------- |
+| steps     | `StepsItem[]`                     | `[]`     | Y        | Array composed of step Props or finishStep Props. |
+| current   | `number`                          | `1`      | N        | Current step number.                              |
+| radius    | `'none'`/`'base'`/`'xl'`/`'full'` | `'base'` | N        | Border radius style.                              |
+| barBorder | `boolean`                         | `true`   | N        | Whether the icon has a border.                    |
+| vertical  | `boolean`                         | `false`  | N        | Whether to use vertical layout.                   |
+
+## StepsItem
+
+| Name       | Type              | Default | Required | Description                                                                |
+| ---------- | ----------------- | ------- | -------- | -------------------------------------------------------------------------- |
+| step       | `StepsStep`       | `{}`    | Y        | Step parameters.                                                           |
+| finishStep | `StepsFinishStep` | `{}`    | N        | Completed step parameters.                                                 |
+| height     | `number`          | `0`     | N        | Step height for vertical layout, usually auto-calculated by the component. |
+
+## step Props && StepsFinishStep Props
+
+| Name         | Type                                                          | Default | Required | Description                             |
+| ------------ | ------------------------------------------------------------- | ------- | -------- | --------------------------------------- |
+| title        | `string`                                                      | `''`    | Y        | Step title.                             |
+| bar          | `StepsStepBarIcon \| StepsStepBarImage \| StepsStepBarString` | `{}`    | N        | Step area content.                      |
+| desc         | `string`                                                      | `''`    | N        | Step description content.               |
+| injComponent | `Component`                                                   | -       | N        | Inject Svelte component into step area. |
+
+## StepsStepBarIcon Props
+
+| Name    | Type     | Default | Required | Description                                                                    |
+| ------- | -------- | ------- | -------- | ------------------------------------------------------------------------------ |
+| type    | `'icon'` | `{}`    | Y        | Used when step area content is an icon.                                        |
+| content | `Icon`   | `-`     | Y        | Icon parameters [Icon Props](https://stdf.design/#/components?nav=icon&tab=1). |
+
+## StepsStepBarImage Props
+
+| Name    | Type      | Default | Required | Description                              |
+| ------- | --------- | ------- | -------- | ---------------------------------------- |
+| type    | `'image'` | `{}`    | Y        | Used when step area content is an image. |
+| content | `string`  | `-`     | Y        | Image path.                              |
+
+## StepsStepBarString Props
+
+| Name    | Type       | Default | Required | Description                              |
+| ------- | ---------- | ------- | -------- | ---------------------------------------- |
+| type    | `'string'` | `{}`    | Y        | Used when step area content is a string. |
+| content | `string`   | `-`     | Y        | String content.                          |

doc/components/steps/guide.md

@@ -1,6 +1,8 @@
 ## 说明
 
-Steps 默认为横向布局，由于移动端横向显示内容有限，横向布局建议只用作简单使用。当步骤较多、标题较长或显示内容较多时建议使用纵向布局，而横向布局只显示标题与步骤栏区域，即使传入了 desc 等其他参数也不会显示。
+Steps 默认为横向布局，由于移动端横向显示内容有限，横向布局建议只用作简单使用。当步骤较多、标题较长或显示内容较多时建议使用纵向布局.
+
+> 横向布局只显示标题与步骤栏区域，即使传入了 desc 等其他参数也不会显示。
 
 ## current
 
@@ -8,19 +10,17 @@ Steps 默认为横向布局，由于移动端横向显示内容有限，横向
 
 ## finishStep
 
-每一步的 Props 支持传入 finishStep，用于一些场景下更准确细致地表达已经完成的步骤，请参考示例。
+每一步的 Props 支持传入 finishStep，格式与 step 相同，用于一些场景下更准确细致地表达已经完成的步骤，请参考示例。
 
 ## 步骤栏区域
 
-步骤栏区域 bar 可以传入对象或者字符，传入字符将直接显示，建议单个字符；对象通过 type 支持 image 与 icon，icon 使用 Icon Props，image 可以传入图片的相对路径或绝对路径，组件内部将其转换为 img 标签的 src 属性。
-
-Icon Props 请参考 Icon API。
+步骤栏区域 bar 可以传入三种情况，type 为 `'string'` 将直接显示字符，建议单个字符；type 为 `'image'` 将显示图片，可以传入图片的相对路径或绝对路径，组件内部将其转换为 img 标签的 src 属性；type 为 `'icon'` 将显示图标，根据传入的 [Icon Props](https://stdf.design/#/components?nav=icon&tab=1) 进行渲染。
 
 ## injComponent
 
-step Props 和 finishStep Props 支持通过 injComponent 注入 Svelte 组件，Steps 内部将通过`<svelte:component>`语法渲染传入的整个 Svelte 组件，请参考示例。
+step 和 finishStep 支持通过 injComponent 注入 Svelte 组件，Steps 内部将其渲染至步骤区域底部，请参考示例。
 
-关于 \<svelte:component\> 可参考 [\<svelte:component\>](https://svelte.dev/docs#template-syntax-svelte-component)。
+将 Svelte 组件作为传入参数并进行渲染的实现，使用到了 Svelte 的 `{@const ...}` 语法，请参考 [{@const ...}](https://svelte.dev/docs/svelte/@const)。
 
 ## 补充
 

doc/components/steps/guide_en.md

@@ -1,27 +1,27 @@
 ## Description
 
-By default, Steps are horizontally layouted, but due to limited display on mobile devices, horizontal layout is recommended only for simple use. When there are many steps, long titles, or more content to display, vertical layout is recommended. Horizontal layout only displays titles and step bar areas, and other parameters such as desc will not be displayed.
+Steps defaults to horizontal layout. Due to limited horizontal display content on mobile devices, horizontal layout is recommended only for simple use. When there are multiple steps, long titles, or more content to display, vertical layout is recommended.
+
+> Horizontal layout only displays the title and step bar area, even if other parameters like desc are passed in, they will not be displayed.
 
 ## current
 
-The actual step number starting from 1, corresponding to the index value +1 of steps within the component.
+The actual step number starting from 1, which corresponds to the steps array index + 1 internally in the component.
 
 ## finishStep
 
-Props for each step support finishStep, which is used for more precise expressions of completed steps in some scenarios. Please refer to the example for details.
-
-## Step bar area
+Each step's Props supports passing in finishStep, which has the same format as step, used to more accurately and precisely express completed steps in some scenarios. Please refer to the examples.
 
-The step bar area bar can be passed in as an object or a character. If a character is passed in, it will be displayed directly. It is recommended to use a single character. The object supports image and icon through type. Icon uses Icon Props, and image can pass the relative or absolute path of the image, and the component will convert it to the src attribute of the img tag.
+## Step Bar Area
 
-Please refer to Icon API for Icon Props.
+The step bar area can accept three types of content: when type is `'string'`, it will directly display characters (single character recommended); when type is `'image'`, it will display an image, accepting relative or absolute image paths which will be converted to img tag src attribute internally; when type is `'icon'`, it will display an icon rendered according to the passed [Icon Props](https://stdf.design/#/components?nav=icon&tab=1).
 
 ## injComponent
 
-step Props and finishStep Props support the injection of Svelte components through injComponent. Steps will use the `<svelte:component>`syntax to render the entire Svelte component passed in. Refer to the example for details.
+step and finishStep support injecting Svelte components via injComponent, which Steps will render at the bottom of the step area. Please refer to the examples.
 
-For \<svelte:component\>, please refer to [\<svelte:component\>](https://svelte.dev/docs#template-syntax-svelte-component).
+The implementation of passing and rendering Svelte components as parameters uses Svelte's `{@const ...}` syntax, please refer to [{@const ...}](https://svelte.dev/docs/svelte/@const).
 
-## Supplement
+## Additional Note
 
-Tip: The business scenario that represents a timeline can also use the Steps component.
+Tip: The Steps component can also be used for timeline business scenarios.

packages/stdf/components/steps/Steps.svelte

@@ -7,56 +7,58 @@
 
 	const radiusObj = { none: 'rounded-none', base: 'rounded', xl: 'rounded-xl', full: 'rounded-full' };
 	let width = $state(0);
+
+	let heightList = $state([]);
+	const getClientHeight = node => {
+		heightList.push(node.clientHeight);
+	};
 </script>
 
-<!-- 纵向排列 -->
 {#if vertical}
 	<div class="flex flex-col justify-between">
 		{#each steps as item, i}
-			<div class="flex items-center py-3" bind:clientHeight={item.height}>
-				{#if item.step.bar || item.finishStep?.bar}
+			<div class="flex items-center py-3 relative" use:getClientHeight>
+				{#if item.step?.bar || item.finishStep?.bar}
 					<div class="pl-4 mr-10 my-4">
 						<div
-							class={`w-[2px] absolute transition-all ${i < current - 1 ? 'bg-primary dark:bg-dark' : 'bg-black/30 dark:bg-white/30'}`}
-							style="height:{i === steps.length - 1 ? '0px' : item.height - 30 + 'px'};top:42px;left:30px"
+							class="w-0.5 absolute transition-all {i < current - 1 ? 'bg-primary dark:bg-dark' : 'bg-black/30 dark:bg-white/30'}"
+							style="height:{i === steps.length - 1 ? '0px' : heightList[i] - 30 + 'px'};top:42px;left:30px"
 						></div>
 						<div
-							class={`w-[30px] h-[30px] absolute box-border transition-all duration-300 overflow-hidden border ${
-								i < current - 1
-									? 'border-primary dark:border-dark text-primary dark:text-dark'
-									: i === current - 1
-										? 'border-primary dark:border-dark bg-primary dark:bg-dark text-white dark:text-black'
-										: 'border-black/30 dark:border-white/30 text-black/30 dark:text-white/30'
-							} ${radiusObj[radius] || radiusObj.base} ${!barBorder ? '!border-transparent' : ''}`}
+							class="w-[30px] h-[30px] absolute box-border transition-all duration-300 overflow-hidden border {i < current - 1
+								? 'border-primary dark:border-dark text-primary dark:text-dark'
+								: i === current - 1
+									? 'border-primary dark:border-dark bg-primary dark:bg-dark text-white dark:text-black'
+									: 'border-black/30 dark:border-white/30 text-black/30 dark:text-white/30'} {radiusObj[radius] ||
+								radiusObj.base} {!barBorder ? '!border-transparent' : ''}"
 							style="top:12px"
 						>
-							<!-- {#if item.step?.bar?.constructor === Object || item.finishStep?.bar?.constructor === Object} -->
-							{#if item.step.bar.type === 'icon' || item.finishStep.bar.type === 'icon'}
+							{#if item.step?.bar?.type === 'icon' || item.finishStep?.bar?.type === 'icon'}
 								<div class="w-4 h-4 m-auto">
 									<Icon
-										{...item.step?.bar?.type === 'icon' ? item.step.bar : {}}
-										name={item.finishStep && i < current && item.finishStep.bar.type === 'icon'
-											? item.finishStep.bar.icon.name
-											: item.step.bar.type === 'icon'
-												? item.step.bar.icon.name
+										{...item.step?.bar?.type === 'icon' ? item.step?.bar : {}}
+										name={item.finishStep && i < current && item.finishStep?.bar?.type === 'icon'
+											? item.finishStep?.bar?.content?.name
+											: item.step?.bar?.type === 'icon'
+												? item.step?.bar?.content?.name
 												: ''}
 										size={16}
 										top={0}
 									/>
 								</div>
 							{/if}
-							{#if item.step.bar.type === 'image' || item.finishStep.bar.type === 'image'}
+							{#if item.step?.bar?.type === 'image' || item.finishStep?.bar?.type === 'image'}
 								<img
 									class="object-cover"
-									src={(item.step.bar.type === 'image' && item.step.bar.image) ||
-										(item.finishStep.bar.type === 'image' && item.finishStep.bar.image)}
+									src={(item.step?.bar?.type === 'image' && item.step?.bar?.content) ||
+										(item.finishStep?.bar?.type === 'image' && item.finishStep?.bar?.content)}
 									alt=""
 								/>
 							{/if}
-							{#if item.step.bar.type === 'string' || item.finishStep.bar.type === 'string'}
-								<div class="w-5 h-5 m-auto mt-1 text-sm leading-[20px] text-center">
-									{(item.step.bar.type === 'string' && item.step.bar.string) ||
-										(item.finishStep.bar.type === 'string' && item.finishStep.bar.string)}
+							{#if item.step?.bar?.type === 'string' || item.finishStep?.bar?.type === 'string'}
+								<div class="w-5 h-5 m-auto mt-1 text-sm leading-5 text-center">
+									{(item.step?.bar?.type === 'string' && item.step?.bar?.content) ||
+										(item.finishStep?.bar?.type === 'string' && item.finishStep?.bar?.content)}
 								</div>
 							{/if}
 						</div>
@@ -64,46 +66,42 @@
 				{:else}
 					<div class="pl-4 mr-6">
 						<div
-							class={`w-[2px] absolute transition-all ${i < current - 1 ? 'bg-primary dark:bg-dark' : 'bg-black/30 dark:bg-white/30'}`}
-							style="height:{i === steps.length - 1 ? '0px' : item.height - 10 + 'px'};top:26px;left:20px"
+							class="w-0.5 absolute transition-all {i < current - 1 ? 'bg-primary dark:bg-dark' : 'bg-black/30 dark:bg-white/30'}"
+							style="height:{i === steps.length - 1 ? '0px' : heightList[i] - 10 + 'px'};top:26px;left:20px"
 						></div>
 						<div
-							class={`w-[10px] h-[10px] absolute border transition-all duration-300 ${
-								i < current - 1
-									? 'border-primary dark:border-dark'
-									: i === current - 1
-										? 'border-primary dark:border-dark bg-primary dark:bg-dark'
-										: 'border-black/30 dark:border-white/30'
-							} ${radiusObj[radius] || radiusObj.base}`}
+							class="w-2.5 h-2.5 absolute border transition-all duration-300 {i < current - 1
+								? 'border-primary dark:border-dark'
+								: i === current - 1
+									? 'border-primary dark:border-dark bg-primary dark:bg-dark'
+									: 'border-black/30 dark:border-white/30'} {radiusObj[radius] || radiusObj.base}"
 							style="top:16px"
 						></div>
 					</div>
 				{/if}
 				<div class="pr-4">
 					<div
-						class={`font-medium transition-all duration-300 ${
-							i < current - 1
-								? 'text-black dark:text-white'
-								: i === current - 1
-									? 'text-primary dark:text-dark'
-									: 'text-black/30 dark:text-white/30'
-						}`}
+						class="font-medium transition-all duration-300 {i < current - 1
+							? 'text-black dark:text-white'
+							: i === current - 1
+								? 'text-primary dark:text-dark'
+								: 'text-black/30 dark:text-white/30'}"
 					>
 						{item.finishStep && i < current - 1 ? item.finishStep.title : item.step.title}
 					</div>
-					{#if item.step.desc || item.finishStep?.desc}
-						<div class={`text-xs transition-all duration-300${i <= current - 1 ? '' : ' text-black/30 dark:text-white/30'}`}>
+					{#if item.step?.desc || item.finishStep?.desc}
+						<div class="text-xs transition-all duration-300{i <= current - 1 ? '' : ' text-black/30 dark:text-white/30'}">
 							{item.finishStep && i < current - 1
 								? item.finishStep.desc
 									? item.finishStep.desc
 									: ''
-								: item.step.desc
-									? item.step.desc
+								: item.step?.desc
+									? item.step?.desc
 									: ''}
 						</div>
 					{/if}
 					{#if item.step?.injComponent || item.finishStep?.injComponent}
-						{@const SvelteComponent = item.step.injComponent || item.finishStep.injComponent}
+						{@const SvelteComponent = item.step?.injComponent || item.finishStep?.injComponent}
 						<SvelteComponent />
 					{/if}
 				</div>
@@ -114,48 +112,47 @@
 	<div class="flex justify-between mt-4" bind:clientWidth={width}>
 		{#each steps as item, i}
 			<div class="flex-1 flex flex-col items-center space-y-2">
-				{#if item.step.bar}
+				{#if item.step?.bar || item.finishStep?.bar}
 					<div class="w-full relative pb-8">
 						<div
-							class={`h-[2px] relative transition-all ${i < current - 1 ? 'bg-primary dark:bg-dark' : 'bg-black/30 dark:bg-white/30'}`}
+							class="h-0.5 relative transition-all {i < current - 1 ? 'bg-primary dark:bg-dark' : 'bg-black/30 dark:bg-white/30'}"
 							style="top:16px;width:{i === steps.length - 1 ? '0' : width / steps.length - 30}px;left:calc(50% + 15px)"
 						></div>
 						<div
-							class={`w-[30px] h-[30px] box-border absolute transition-all duration-300 overflow-hidden border ${
-								i < current - 1
-									? 'border-primary dark:border-dark text-primary dark:text-dark'
-									: i === current - 1
-										? 'border-primary dark:border-dark bg-primary dark:bg-dark text-white dark:text-black'
-										: 'border-black/30 dark:border-white/30 text-black/30 dark:text-white/30'
-							} ${radiusObj[radius] || radiusObj.base} ${!barBorder ? '!border-transparent' : ''}`}
+							class="w-[30px] h-[30px] box-border absolute transition-all duration-300 overflow-hidden border {i < current - 1
+								? 'border-primary dark:border-dark text-primary dark:text-dark'
+								: i === current - 1
+									? 'border-primary dark:border-dark bg-primary dark:bg-dark text-white dark:text-black'
+									: 'border-black/30 dark:border-white/30 text-black/30 dark:text-white/30'} {radiusObj[radius] ||
+								radiusObj.base} {!barBorder ? '!border-transparent' : ''}"
 							style="left:calc(50% - 15px)"
 						>
-							{#if item.step.bar.type === 'icon' || item.finishStep.bar.type === 'icon'}
+							{#if item.step?.bar?.type === 'icon' || item.finishStep?.bar?.type === 'icon'}
 								<div class="w-4 h-4 m-auto">
 									<Icon
-										{...item.step.bar.type === 'icon' ? item.step.bar : {}}
-										name={item.finishStep && i < current && item.finishStep.bar.type === 'icon'
-											? item.finishStep.bar.icon.name
-											: item.step.bar.type === 'icon'
-												? item.step.bar.icon.name
+										{...item.step?.bar?.type === 'icon' ? item.step?.bar : {}}
+										name={item.finishStep && i < current && item.finishStep?.bar?.type === 'icon'
+											? item.finishStep?.bar?.content?.name
+											: item.step?.bar?.type === 'icon'
+												? item.step?.bar?.content?.name
 												: ''}
 										size={16}
 										top={0}
 									/>
 								</div>
 							{/if}
-							{#if item.step.bar.type === 'image' || item.finishStep.bar.type === 'image'}
+							{#if item.step?.bar?.type === 'image' || item.finishStep?.bar?.type === 'image'}
 								<img
 									class=" object-cover"
-									src={(item.step.bar.type === 'image' && item.step.bar.image) ||
-										(item.finishStep.bar.type === 'image' && item.finishStep.bar.image)}
+									src={(item.step?.bar?.type === 'image' && item.step?.bar?.content) ||
+										(item.finishStep?.bar?.type === 'image' && item.finishStep?.bar?.content)}
 									alt=""
 								/>
 							{/if}
-							{#if item.step.bar.type === 'string' || item.finishStep.bar.type === 'string'}
-								<div class="w-5 h-5 m-auto mt-1 text-sm leading-[20px] text-center">
-									{(item.step.bar.type === 'string' && item.step.bar.string) ||
-										(item.finishStep.bar.type === 'string' && item.finishStep.bar.string)}
+							{#if item.step?.bar?.type === 'string' || item.finishStep?.bar?.type === 'string'}
+								<div class="w-5 h-5 m-auto mt-1 text-sm leading-5 text-center">
+									{(item.step?.bar?.type === 'string' && item.step?.bar?.content) ||
+										(item.finishStep?.bar?.type === 'string' && item.finishStep?.bar?.content)}
 								</div>
 							{/if}
 						</div>
@@ -163,33 +160,30 @@
 				{:else}
 					<div class="w-full relative py-2">
 						<div
-							class={`h-[2px] relative transition-all ${i < current - 1 ? 'bg-primary dark:bg-dark' : 'bg-black/30 dark:bg-white/30'} ${
-								i === steps.length - 1 ? 'w-px' : ''
-							}`}
+							class="h-0.5 relative transition-all {i < current - 1 ? 'bg-primary dark:bg-dark' : 'bg-black/30 dark:bg-white/30'} {i ===
+							steps.length - 1
+								? 'w-px'
+								: ''}"
 							style="width:{i === steps.length - 1 ? '0' : width / steps.length - 9}px;top:0;left:calc(50% + 5px)"
 						></div>
 						<div
-							class={`w-[10px] h-[10px] absolute top-[4px] border transition-all duration-300 ${
-								i < current - 1
-									? 'border-primary dark:border-dark'
-									: i === current - 1
-										? 'border-primary dark:border-dark bg-primary dark:bg-dark'
-										: 'border-black/30 dark:border-white/30'
-							} ${radiusObj[radius] || radiusObj.base}`}
+							class="w-2.5 h-2.5 absolute top-1 border transition-all duration-300 {i < current - 1
+								? 'border-primary dark:border-dark'
+								: i === current - 1
+									? 'border-primary dark:border-dark bg-primary dark:bg-dark'
+									: 'border-black/30 dark:border-white/30'} {radiusObj[radius] || radiusObj.base}"
 							style="left:calc(50% - 5px)"
 						></div>
 					</div>
 				{/if}
 				<div
-					class={`text-center text-sm font-medium transition-all duration-300 ${
-						i < current - 1
-							? 'text-black dark:text-white'
-							: i === current - 1
-								? 'text-primary dark:text-dark'
-								: 'text-black/30 dark:text-white/30'
-					}`}
+					class="text-center text-sm font-medium transition-all duration-300 {i < current - 1
+						? 'text-black dark:text-white'
+						: i === current - 1
+							? 'text-primary dark:text-dark'
+							: 'text-black/30 dark:text-white/30'}"
 				>
-					{item.finishStep && i < current - 1 ? item.finishStep.title : item.step.title}
+					{item.finishStep && i < current - 1 ? item.finishStep.title : item.step?.title}
 				</div>
 			</div>
 		{/each}