[stdf]Update Progress compoent, demo and documents.

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

@@ -5,15 +5,9 @@
 	let percent = 20;
 	const changePercentFun = type => {
 		if (type === '+10') {
-			percent += 10;
-			if (percent > 100) {
-				percent = 100;
-			}
+			percent = percent > 100 ? 100 : percent + 10;
 		} else {
-			percent -= 10;
-			if (percent < 0) {
-				percent = 0;
-			}
+			percent = percent < 0 ? 0 : percent - 10;
 		}
 	};
 </script>
@@ -35,7 +29,7 @@
 		<Progress />
 		<Progress percentPosition="inner" />
 		<Progress percentPosition="block" />
-		<Progress percentPosition="none" />
+		<Progress percentPosition={null} />
 	</div>
 
 	<div class="m-4 mt-8 font-bold text-lg">Different styles of rounded corners</div>
@@ -62,16 +56,14 @@
 		<Progress {percent} duration="1000" />
 	</div>
 	<Button heightIn="0" group size="full">
-		<div class="flex divide-x divide-white dark:divide-black">
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div class="flex-1 py-2 active:opacity-80" on:click={() => changePercentFun('-10')}>progress -10</div>
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div class="flex-1 py-2 active:opacity-80" on:click={() => changePercentFun('+10')}>progress +10</div>
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div class="flex-1 py-2 active:opacity-80" on:click={() => (percent = 20)}>reset</div>
+		<div class="flex w-full">
+			<button class="flex-1 border-r border-white dark:border-black py-2 active:opacity-80" onclick={() => changePercentFun('-10')}>
+				Progress -10
+			</button>
+			<button class="flex-1 border-r border-white dark:border-black py-2 active:opacity-80" onclick={() => changePercentFun('+10')}>
+				Progress +10
+			</button>
+			<button class="flex-1 py-2 active:opacity-80" onclick={() => (percent = 20)}>Reset</button>
 		</div>
 	</Button>
 
@@ -79,16 +71,16 @@
 	<div class="flex flex-col space-y-4">
 		<Progress injClass="bg-success dark:bg-error" />
 		<Progress injClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0]" />
-		<Progress percentPosition="block" injClass="bg-extend2" />
+		<Progress percentPosition="block" injClass="bg-[#FF9F7D] dark:bg-[#9e4f5e]" />
 		<Progress trackInjClass="!bg-primary/20 dark:!bg-dark/20" />
 	</div>
 
 	<div class="m-4 mt-8 font-bold text-lg">Custom text</div>
 	<div class="flex flex-col space-y-4">
-		<Progress useSlot>
+		<Progress>
 			<div class="text-xs whitespace-nowrap">completed 2/3</div>
 		</Progress>
-		<Progress useSlot percentPosition="block">
+		<Progress percentPosition="block">
 			<div class="text-xs whitespace-nowrap">completed 2/3</div>
 		</Progress>
 	</div>

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

@@ -2,18 +2,12 @@
 <script>
 	import { Progress, Button } from '../../../../../packages/stdf/components';
 
-	let percent = 20;
+	let percent = $state(20);
 	const changePercentFun = type => {
 		if (type === '+10') {
-			percent += 10;
-			if (percent > 100) {
-				percent = 100;
-			}
+			percent = percent > 100 ? 100 : percent + 10;
 		} else {
-			percent -= 10;
-			if (percent < 0) {
-				percent = 0;
-			}
+			percent = percent < 0 ? 0 : percent - 10;
 		}
 	};
 </script>
@@ -35,7 +29,7 @@
 		<Progress />
 		<Progress percentPosition="inner" />
 		<Progress percentPosition="block" />
-		<Progress percentPosition="none" />
+		<Progress percentPosition={null} />
 	</div>
 
 	<div class="m-4 mt-8 font-bold text-lg">不同圆角风格</div>
@@ -47,7 +41,7 @@
 		<Progress percentPosition="block" />
 	</div>
 
-	<div class="m-4 mt-8 font-bold text-lg">置灰</div>
+	<div class="m-4 mt-8 font-bold text-lg">禁用</div>
 	<div class="flex flex-col space-y-4">
 		<Progress inactive />
 		<Progress inactive percentPosition="block" />
@@ -62,16 +56,14 @@
 		<Progress {percent} duration="1000" />
 	</div>
 	<Button heightIn="0" group size="full">
-		<div class="flex divide-x divide-white dark:divide-black">
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div class="flex-1 py-2 active:opacity-80" on:click={() => changePercentFun('-10')}>进度 -10</div>
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div class="flex-1 py-2 active:opacity-80" on:click={() => changePercentFun('+10')}>进度 +10</div>
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div class="flex-1 py-2 active:opacity-80" on:click={() => (percent = 20)}>重置</div>
+		<div class="flex w-full">
+			<button class="flex-1 border-r border-white dark:border-black py-2 active:opacity-80" onclick={() => changePercentFun('-10')}>
+				进度 -10
+			</button>
+			<button class="flex-1 border-r border-white dark:border-black py-2 active:opacity-80" onclick={() => changePercentFun('+10')}>
+				进度 +10
+			</button>
+			<button class="flex-1 py-2 active:opacity-80" onclick={() => (percent = 20)}>重置</button>
 		</div>
 	</Button>
 
@@ -79,16 +71,16 @@
 	<div class="flex flex-col space-y-4">
 		<Progress injClass="bg-success dark:bg-error" />
 		<Progress injClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0]" />
-		<Progress percentPosition="block" injClass="bg-extend2" />
+		<Progress percentPosition="block" injClass="bg-[#FF9F7D] dark:bg-[#9e4f5e]" />
 		<Progress trackInjClass="!bg-primary/20 dark:!bg-dark/20" />
 	</div>
 
 	<div class="m-4 mt-8 font-bold text-lg">自定义文字</div>
 	<div class="flex flex-col space-y-4">
-		<Progress useSlot>
+		<Progress>
 			<div class="text-xs whitespace-nowrap">已完成 2/3</div>
 		</Progress>
-		<Progress useSlot percentPosition="block">
+		<Progress percentPosition="block">
 			<div class="text-xs whitespace-nowrap">已完成 2/3</div>
 		</Progress>
 	</div>

doc/components/progress/api.md

@@ -1,20 +1,19 @@
 ## Progress Props
 
-| 属性            | 类型    | 默认值  | 可选值                         | 必传 | 说明                                                |
-| --------------- | ------- | ------- | ------------------------------ | ---- | --------------------------------------------------- |
-| percent         | Number  | 66      | 0-100                          | N    | 百分比。                                            |
-| percentPosition | String  | 'right' | 'right'/'inner'/'block'/'none' | N    | 百分比位置。                                        |
-| height          | String  | '2'     | '1'/'2'/'3'/'4'                | N    | 高度。                                              |
-| radius          | String  | 'full'  | 'full'/'base'/'none'           | N    | 圆角风格。                                          |
-| inactive        | Boolean | false   | true/false                     | N    | 是否置灰。                                          |
-| useSlot         | Boolean | false   | true/false                     | N    | 百分比文字是否使用 slot。                           |
-| overflowPercent | Number  | 10      | 0-100                          | N    | percentPosition 为 inner 时，百分比文字溢出的阀值。 |
-| duration        | String  | '300'   | '150'/'300'/'500'/'700'/'1000' | N    | 动画过度时间（ms）。                                |
-| injClass        | String  | ''      | -                              | N    | 激活进度条注入 Class 名称。                         |
-| trackInjClass   | String  | ''      | -                              | N    | 轨道条注入 Class 名称。                             |
+| 名称            | 类型                                 | 默认值    | 必传 | 说明                                              |
+| --------------- | ------------------------------------ | --------- | ---- | ------------------------------------------------- |
+| percent         | `number`                             | `66`      | N    | 百分比。                                          |
+| percentPosition | `'inner'\|'right'\|'block'\|null`    | `'right'` | N    | 百分比位置。                                      |
+| height          | `'1'\|'2'\|'3'\|'4'`                 | `'2'`     | N    | 高度。                                            |
+| radius          | `'full'\|'base'\|'none'`             | `'full'`  | N    | 圆角风格。                                        |
+| inactive        | `boolean`                            | `false`   | N    | 是否置灰。                                        |
+| overflowPercent | `number`                             | `10`      | N    | percentPosition 为 `'inner'` 时，文字溢出的阀值。 |
+| duration        | `'150'\|'300'\|'500'\|'700'\|'1000'` | `'300'`   | N    | 动画过度时间（ms）。                              |
+| injClass        | `string`                             | `''`      | N    | 激活进度条注入 Class 名称。                       |
+| trackInjClass   | `string`                             | `''`      | N    | 轨道条注入 Class 名称。                           |
 
-## Progress Slots
+## Progress Snippets
 
-| 名称 | 说 明                                  |
-| ---- | -------------------------------------- |
-| -    | 当 useSlot 为 true 时百分比文字内容 。 |
+| 名称     | 类型                                                                | 参数 | 说明                 |
+| -------- | ------------------------------------------------------------------- | ---- | -------------------- |
+| children | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 传入时渲染文字内容。 |

doc/components/progress/api_en.md

@@ -1,20 +1,19 @@
 ## Progress Props
 
-| Property        | Type    | Default | Options                        | Required | Description                                          |
-| --------------- | ------- | ------- | ------------------------------ | -------- | ---------------------------------------------------- |
-| percent         | Number  | 66      | 0-100                          | Yes      | The percentage completed.                            |
-| percentPosition | String  | 'right' | 'right'/'inner'/'block'/'none' | Yes      | The position of the percentage text.                 |
-| height          | String  | '2'     | '1'/'2'/'3'/'4'                | Yes      | The height of the progress bar.                      |
-| radius          | String  | 'full'  | 'full'/'base'/'none'           | Yes      | The style of the progress bar's corners.             |
-| inactive        | Boolean | false   | true/false                     | Yes      | Whether the progress bar is inactive.                |
-| useSlot         | Boolean | false   | true/false                     | Yes      | Whether the percentage text should be a slot.        |
-| overflowPercent | Number  | 10      | 0-100                          | Yes      | The threshold for the percentage text's overflow.    |
-| duration        | String  | '300'   | '150'/'300'/'500'/'700'/'1000' | Yes      | The duration of the animation in milliseconds.       |
-| injClass        | String  | ''      | -                              | Yes      | The class to inject when the progress bar is active. |
-| trackInjClass   | String  | ''      | -                              | Yes      | The class to inject for the progress bar's track.    |
+| Name            | Type                                 | Default   | Required | Description                                                       |
+| --------------- | ------------------------------------ | --------- | -------- | ----------------------------------------------------------------- |
+| percent         | `number`                             | `66`      | N        | Percentage value.                                                 |
+| percentPosition | `'inner'\|'right'\|'block'\|null`    | `'right'` | N        | Position of percentage text.                                      |
+| height          | `'1'\|'2'\|'3'\|'4'`                 | `'2'`     | N        | Height of progress bar.                                           |
+| radius          | `'full'\|'base'\|'none'`             | `'full'`  | N        | Border radius style.                                              |
+| inactive        | `boolean`                            | `false`   | N        | Whether to show in inactive state.                                |
+| overflowPercent | `number`                             | `10`      | N        | Text overflow threshold when percentPosition is set to `'inner'`. |
+| duration        | `'150'\|'300'\|'500'\|'700'\|'1000'` | `'300'`   | N        | Animation transition duration (ms).                               |
+| injClass        | `string`                             | `''`      | N        | Injected class name for active progress bar.                      |
+| trackInjClass   | `string`                             | `''`      | N        | Injected class name for track bar.                                |
 
-## Progress Slots
+## Progress Snippets
 
-| Name | Description                                              |
-| ---- | -------------------------------------------------------- |
-| -    | The content of the percentage text when useSlot is true. |
+| Name     | Type                                                                | Params | Description                                 |
+| -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------- |
+| children | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -      | Renders custom text content when passed in. |

doc/components/progress/guide.md

@@ -1,10 +1,10 @@
-## useSlot
+## Snippet
 
-当 useSlot 为 true，百分比内容不再使用默认百分比文字，而是使用传入的 slot 渲染。
+当传入 children 时，百分比内容不再使用默认百分比文字，而是使用传入的 children 渲染。
 
 ## overflowPercent
 
-当 percentPosition 为 inner 且百分比数值较低时，百分比文字会溢出，overflowPercent 为溢出的阀值，当百分比小于该值时，百分比文字会放置于进度条右侧。
+当 percentPosition 为 `'inner'` 且百分比数值较低时，百分比文字会溢出，overflowPercent 为溢出的阀值，当百分比小于该值时，百分比文字会放置于进度条右侧。
 
 ## CSS 注入
 

doc/components/progress/guide_en.md

@@ -1,13 +1,13 @@
-## useSlot
+## Snippet
 
-When `useSlot` is set to true, the default percentage text is no longer used and will instead be rendered through a provided slot.
+When children is passed in, the percentage content will no longer use the default percentage text, but will render using the passed in children.
 
 ## overflowPercent
 
-When `percentPosition` is set to 'inner' and the percentage value is low, the percentage text may overflow. `overflowPercent` sets the threshold for the overflow. When the percentage is less than the `overflowPercent` value, the percentage text will be placed to the right of the progress bar.
+When percentPosition is set to `'inner'` and the percentage value is low, the percentage text may overflow. overflowPercent is the overflow threshold - when the percentage is less than this value, the percentage text will be placed on the right side of the progress bar.
 
 ## CSS Injection
 
-The `injClass` and `trackInjClass` props can be used to inject CSS class names into the active progress bar and track bar elements. This allows for greater customization of the component's style. In the provided example, custom progress bar colors are achieved through the use of `injClass` and `trackInjClass`.
+The injClass and trackInjClass parameters can be used to inject CSS class names (not limited to Tailwind CSS) into the active progress bar and track bar elements inside the component. This provides more customization possibilities for component styling. The example demonstrates customizing progress bar colors through injClass and trackInjClass.
 
-If the injected class does not take effect, add a "!" before the class name. More information can be found in the [Tailwind Important modifier](https://tailwindcss.com/docs/configuration#important-modifier).
+If the injected class is not taking effect, try adding "!" before the class name. See [Tailwind Important modifier](https://tailwindcss.com/docs/configuration#important-modifier) for reference.

packages/stdf/components/progress/Progress.svelte

@@ -8,9 +8,9 @@
 		radius = 'full',
 		inactive = false,
 		overflowPercent = 10,
+		duration = '300',
 		injClass = '',
 		trackInjClass = '',
-		duration = '300',
 		children,
 	} = $props();
 
@@ -33,25 +33,25 @@
 	};
 </script>
 
-<div class={`flex justify-between space-x-2 items-center`}>
+<div class="flex justify-between space-x-2 items-center">
 	<div
-		class={`relative w-full bg-black/10 dark:bg-white/20${percentPosition === 'inner' ? '' : heightClass[height] || heightClass['2']}${
-			radiusClass[radius] || radiusClass['full']
-		}${trackInjClass === '' ? '' : ` ${trackInjClass}`}`}
+		class="relative w-full bg-black/10 dark:bg-white/20{percentPosition === 'inner'
+			? ''
+			: heightClass[height] || heightClass['2']}{radiusClass[radius] || radiusClass['full']}{trackInjClass === ''
+			? ''
+			: ` ${trackInjClass}`}"
 	>
 		<div
-			class={`${inactive ? 'bg-primary-300 dark:bg-dark-800' : 'bg-primary dark:bg-dark'} transition-all${
-				durationClass[duration] || durationClass['300']
-			}${percentPosition === 'inner' ? '' : heightClass[height] || heightClass['2']}${radiusClass[radius] || radiusClass['full']}${
-				injClass === '' ? '' : ` ${injClass}`
-			}`}
-			style={`width:${percent}%;`}
+			class="{inactive ? 'bg-primary-300 dark:bg-dark-800' : 'bg-primary dark:bg-dark'} transition-all{durationClass[duration] ||
+				durationClass['300']}{percentPosition === 'inner' ? '' : heightClass[height] || heightClass['2']}{radiusClass[radius] ||
+				radiusClass['full']}{injClass === '' ? '' : ` ${injClass}`}"
+			style="width:{percent}%;"
 		>
 			{#if percentPosition === 'inner'}
 				<div
-					class={`py-0.5 px-1 text-xs text-right whitespace-nowrap${
-						percent < overflowPercent ? ' translate-x-full text-black dark:text-white' : ' text-white dark:text-black'
-					}`}
+					class="py-0.5 px-1 text-xs text-right whitespace-nowrap{percent < overflowPercent
+						? ' translate-x-full text-black dark:text-white'
+						: ' text-white dark:text-black'}"
 				>
 					{#if children}
 						{@render children?.()}
@@ -63,12 +63,11 @@
 		</div>
 		{#if percentPosition === 'block'}
 			<div
-				class={`absolute top-1/2 ${
-					inactive ? ' bg-primary-300 dark:bg-dark-800' : ' bg-primary dark:bg-dark'
-				} py-0.5 px-1 text-xs text-white dark:text-black transition-all duration-300${
-					radiusClass[radius] || radiusClass['full']
-				} -translate-y-1/2 -translate-x-1/2${injClass === '' ? '' : ` ${injClass}`}`}
-				style={`left:${percent}%;`}
+				class="absolute top-1/2 {inactive
+					? ' bg-primary-300 dark:bg-dark-800'
+					: ' bg-primary dark:bg-dark'} py-0.5 px-1 text-xs text-white dark:text-black transition-all duration-300{radiusClass[radius] ||
+					radiusClass['full']} -translate-y-1/2 -translate-x-1/2{injClass === '' ? '' : ` ${injClass}`}"
+				style="left:{percent}%;"
 			>
 				{#if children}
 					{@render children?.()}