[stdf]Update ProgressLoop compoent, demo and documents.

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

@@ -2,18 +2,12 @@
 <script>
 	import { ProgressLoop, 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>
@@ -65,7 +59,7 @@
 <div class="m-4 mt-8 font-bold text-lg">Custom text</div>
 <div class="flex flex-grow gap-2 m-4">
 	<div class="flex-1">
-		<ProgressLoop useSlot>
+		<ProgressLoop>
 			<div class="text-xs text-center">
 				<div>Completed</div>
 				<div class="text-lg text-primary dark:text-dark">6666</div>
@@ -74,7 +68,7 @@
 		</ProgressLoop>
 	</div>
 	<div class="flex-1">
-		<ProgressLoop useSlot>
+		<ProgressLoop>
 			<div class="text-xs text-center">
 				<div>Residual flow</div>
 				<div class="text-lg text-primary dark:text-dark">66</div>
@@ -83,7 +77,7 @@
 		</ProgressLoop>
 	</div>
 	<div class="flex-1">
-		<ProgressLoop useSlot>
+		<ProgressLoop>
 			<div class="text-xs">complete 2/3</div>
 		</ProgressLoop>
 	</div>
@@ -120,16 +114,14 @@
 </div>
 <div class="mx-4 pb-8">
 	<Button heightIn="0" group size="full">
-		<div class="flex">
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div class="flex-1 border-r 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 border-r 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')}>
+				-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)}>Reset</button>
 		</div>
 	</Button>
 </div>

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

@@ -2,18 +2,12 @@
 <script>
 	import { ProgressLoop, 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>
@@ -65,7 +59,7 @@
 <div class="m-4 mt-8 font-bold text-lg">自定义文字</div>
 <div class="flex flex-grow gap-2 m-4">
 	<div class="flex-1">
-		<ProgressLoop useSlot>
+		<ProgressLoop>
 			<div class="text-xs text-center">
 				<div>已完成</div>
 				<div class="text-lg text-primary dark:text-dark">6666</div>
@@ -74,7 +68,7 @@
 		</ProgressLoop>
 	</div>
 	<div class="flex-1">
-		<ProgressLoop useSlot>
+		<ProgressLoop>
 			<div class="text-xs text-center">
 				<div>剩余流量</div>
 				<div class="text-lg text-primary dark:text-dark">66</div>
@@ -83,7 +77,7 @@
 		</ProgressLoop>
 	</div>
 	<div class="flex-1">
-		<ProgressLoop useSlot>
+		<ProgressLoop>
 			<div class="text-xs">完成 2/3</div>
 		</ProgressLoop>
 	</div>
@@ -120,16 +114,14 @@
 </div>
 <div class="mx-4 pb-8">
 	<Button heightIn="0" group size="full">
-		<div class="flex">
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div class="flex-1 border-r 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 border-r 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>
 </div>

doc/components/progressLoop/api.md

@@ -1,19 +1,18 @@
 ## ProgressLoop Props
 
-| 属性          | 类型    | 默认值 | 可选值                         | 必传 | 说明                               |
-| ------------- | ------- | ------ | ------------------------------ | ---- | ---------------------------------- |
-| percent       | Number  | 66     | 0-100                          | N    | 百分比。                           |
-| strokeWidth   | Number  | 2      | 0-12                           | N    | 圆环宽度。                         |
-| butt          | Boolean | false  | true/false                     | N    | 端点是否直角。                     |
-| reverse       | Boolean | false  | true/false                     | N    | 是否反向（逆时针）。               |
-| duration      | String  | '300'  | '150'/'300'/'500'/'700'/'1000' | N    | 动画过渡时间。                     |
-| gradient      | Array   | []     | -                              | N    | 渐变色，开始色与结束色组成的数组。 |
-| useSlot       | Boolean | false  | true/false                     | N    | 百分比文字是否使用 slot。          |
-| injClass      | String  | ''     | -                              | N    | 激活进度环注入 Class 名称。        |
-| trackInjClass | String  | ''     | -                              | N    | 轨道环注入 Class 名称。            |
+| 名称          | 类型                                 | 默认值  | 必传 | 说明                               |
+| ------------- | ------------------------------------ | ------- | ---- | ---------------------------------- |
+| percent       | `number`                             | `66`    | N    | 百分比。                           |
+| strokeWidth   | `number`                             | `2`     | N    | 圆环宽度。                         |
+| butt          | `boolean`                            | `false` | N    | 端点是否直角。                     |
+| reverse       | `boolean`                            | `false` | N    | 是否反向（逆时针）。               |
+| duration      | `'150'\|'300'\|'500'\|'700'\|'1000'` | `'300'` | N    | 动画过渡时间。                     |
+| gradient      | `[string,string]\|null`              | `[]`    | N    | 渐变色，开始色与结束色组成的数组。 |
+| injClass      | `String`                             | `''`    | N    | 激活进度环注入 Class 名称。        |
+| trackInjClass | `String`                             | `''`    | N    | 轨道环注入 Class 名称。            |
 
-## ProgressLoop Slots
+## ProgressLoop Snippets
 
-| 名称 | 说 明                                  |
-| ---- | -------------------------------------- |
-| -    | 当 useSlot 为 true 时百分比文字内容 。 |
+| 名称     | 类型                                                                | 参数 | 说明                 |
+| -------- | ------------------------------------------------------------------- | ---- | -------------------- |
+| children | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 传入时渲染文字内容。 |

doc/components/progressLoop/api_en.md

@@ -1,19 +1,18 @@
 ## ProgressLoop Props
 
-| Prop Name     | Type    | Default | Options                        | Required | Description                                                                  |
-| ------------- | ------- | ------- | ------------------------------ | -------- | ---------------------------------------------------------------------------- |
-| percent       | Number  | 66      | 0-100                          | No       | The percentage value of the progress ring.                                   |
-| strokeWidth   | Number  | 2       | 0-12                           | No       | The width of the progress ring.                                              |
-| butt          | Boolean | false   | true/false                     | No       | Whether the endpoint of the progress ring is square.                         |
-| reverse       | Boolean | false   | true/false                     | No       | Whether the progress ring is shown in a reverse (anti-clockwise) direction.  |
-| duration      | String  | '300'   | '150'/'300'/'500'/'700'/'1000' | No       | The transition time of the animation.                                        |
-| gradient      | Array   | []      | -                              | No       | The colors of the gradient, represented by an array of start and end colors. |
-| useSlot       | Boolean | false   | true/false                     | No       | Whether to use a custom slot for the percentage text.                        |
-| injClass      | String  | ''      | -                              | No       | The CSS class name injected into the active progress ring.                   |
-| trackInjClass | String  | ''      | -                              | No       | The CSS class name injected into the track ring.                             |
+| Name          | Type                                 | Default | Required | Description                                      |
+| ------------- | ------------------------------------ | ------- | -------- | ------------------------------------------------ |
+| percent       | `number`                             | `66`    | N        | Percentage value.                                |
+| strokeWidth   | `number`                             | `2`     | N        | Width of the circular ring.                      |
+| butt          | `boolean`                            | `false` | N        | Whether the endpoints are square.                |
+| reverse       | `boolean`                            | `false` | N        | Whether to reverse direction (counterclockwise). |
+| duration      | `'150'\|'300'\|'500'\|'700'\|'1000'` | `'300'` | N        | Animation transition duration.                   |
+| gradient      | `[string,string]\|null`              | `[]`    | N        | Gradient colors, array of start and end colors.  |
+| injClass      | `String`                             | `''`    | N        | Injected class name for active progress ring.    |
+| trackInjClass | `String`                             | `''`    | N        | Injected class name for track ring.              |
 
-## ProgressLoop Slots
+## ProgressLoop Snippets
 
-| Slot Name | Description                                                                                      |
-| --------- | ------------------------------------------------------------------------------------------------ |
-| -         | The content of the slot that will replace the default text for `percent` when `useSlot` is true. |
+| Name     | Type                                                                | Params | Description                       |
+| -------- | ------------------------------------------------------------------- | ------ | --------------------------------- |
+| children | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -      | Renders text content when passed. |

doc/components/progressLoop/guide.md

@@ -2,9 +2,9 @@
 
 进度环 ProgressLoop 的大小由外层容器的宽度决定，组件内部使用了 24＊24 画布大小的 svg 渲染，铺满父容器。而宽度 strokeWidth 理论上支持 0-12 的任意数值，但宽度太大时圆环将会很不美观。
 
-## useSlot
+## Snippet
 
-当 useSlot 为 true，百分比内容不再使用默认百分比文字，而是使用传入的 slot 渲染。
+当传入 children 时，百分比内容不再使用默认百分比文字，而是使用传入的 children 渲染。
 
 ## CSS 注入
 

doc/components/progressLoop/guide_en.md

@@ -2,9 +2,9 @@
 
 The size of the progress loop, ProgressLoop, is determined by the width of the outer container. The component uses an SVG rendering with a canvas size of 24\*24, which fills the parent container. The width, strokeWidth, theoretically supports any value between 0 to 12, but when the width is too large, the circular ring may not be aesthetically pleasing.
 
-## useSlot
+## Snippet
 
-When useSlot is true, the default percentage text is no longer used for the percentage content, and instead, the slot passed in is used for rendering.
+When children is passed in, the percentage content no longer uses the default percentage text, but uses the passed children to render.
 
 ## CSS injection
 

packages/stdf/components/progressLoop/ProgressLoop.svelte

@@ -33,14 +33,14 @@
 </script>
 
 <div class="relative">
-	<svg viewBox="0 0 24 24" class={`-rotate-90${reverse ? ' -scale-y-100' : ''}`}>
+	<svg viewBox="0 0 24 24" class="-rotate-90{reverse ? ' -scale-y-100' : ''}">
 		<circle
 			cx="12"
 			cy="12"
 			{r}
 			stroke-width={strokeWidth}
 			fill="none"
-			class={`stroke-black/5 dark:stroke-white/5${trackInjClass === '' ? '' : ` ${trackInjClass}`}`}
+			class="stroke-black/5 dark:stroke-white/5{trackInjClass === '' ? '' : ` ${trackInjClass}`}"
 		></circle>
 		{#if gradient && gradient.length === 2}
 			<defs>
@@ -55,9 +55,8 @@
 			cy="12"
 			{r}
 			stroke-width={strokeWidth}
-			class={`${!gradient || gradient.length < 2 ? 'stroke-primary dark:stroke-dark ' : ''}transition-all ${
-				durationClass[duration] || durationClass['300']
-			}${injClass === '' ? '' : ` ${injClass}`}`}
+			class="{!gradient || gradient.length < 2 ? 'stroke-primary dark:stroke-dark ' : ''}transition-all {durationClass[duration] ||
+				durationClass['300']}{injClass === '' ? '' : ` ${injClass}`}"
 			fill="none"
 			stroke-dashoffset={circleLen - (percent / 100) * circleLen || 0}
 			stroke-dasharray={circleLen}