[stdf]Update Badge compoent, demo and documents.

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

@@ -3,122 +3,81 @@
 	import { Badge, Avatar, Button, Icon, Input, Cell } from '../../../../../packages/stdf/components';
 
 	let isShow = true;
-	const changeShowFun = () => {
-		isShow = !isShow;
-	};
 </script>
 
 <div class="pt-1 pb-4">
 	<div class="mx-4 mt-8 font-bold text-lg">Basic usage</div>
 	<div class="p-4 flex justify-around">
-		<Badge>
-			<Avatar />
-		</Badge>
-		<Badge text="24">
-			<Avatar />
-		</Badge>
-		<Badge text="99+">
-			<Avatar />
-		</Badge>
-		<Badge text="New">
-			<Avatar />
-		</Badge>
+		<Badge><Avatar /></Badge>
+		<Badge text="24"><Avatar /></Badge>
+		<Badge text="99+"><Avatar /></Badge>
+		<Badge text="New"><Avatar /></Badge>
 	</div>
 
 	<div class="mx-4 mt-8 font-bold text-lg">Different rounded corners</div>
 	<div class="p-4 flex justify-around">
-		<Badge radius="base">
-			<Avatar />
-		</Badge>
-		<Badge text="24" radius="none">
-			<Avatar />
-		</Badge>
-		<Badge text="24" radius="base">
-			<Avatar />
-		</Badge>
-		<Badge text="Hot" radius="leaf">
-			<Avatar />
-		</Badge>
+		<Badge radius="base"><Avatar /></Badge>
+		<Badge text="24" radius="none"><Avatar /></Badge>
+		<Badge text="24" radius="base"><Avatar /></Badge>
+		<Badge text="Hot" radius="leaf"><Avatar /></Badge>
 	</div>
 
 	<div class="mx-4 mt-8 font-bold text-lg">Located on the left</div>
 	<div class="p-4 flex justify-around">
-		<Badge isLeft>
-			<Avatar />
-		</Badge>
-		<Badge isLeft text="24">
-			<Avatar />
-		</Badge>
-		<Badge isLeft text="24" radius="leaf">
-			<Avatar />
-		</Badge>
-		<Badge isLeft text="sharp">
-			<Avatar />
-		</Badge>
+		<Badge isLeft><Avatar /></Badge>
+		<Badge isLeft text="24"><Avatar /></Badge>
+		<Badge isLeft text="24" radius="leaf"><Avatar /></Badge>
+		<Badge isLeft text="sharp"><Avatar /></Badge>
 	</div>
 
 	<div class="mx-4 mt-8 font-bold text-lg">Match other components</div>
 	<div class="p-4 flex justify-around">
-		<Badge text="Cool" radius="leaf" offsetX={-6}>
-			<Icon name="ri-spy-fill" />
-		</Badge>
-		<Badge text="Great" radius="leaf" offsetX={-10}>
-			<Icon name="ri-medal-fill" />
-		</Badge>
-		<Badge text="Happy" radius="leaf" offsetX={-12}>
-			<Icon name="ri-cake-2-fill" />
-		</Badge>
+		<Badge text="Cool" radius="leaf" offsetX={-6}><Icon name="ri-spy-fill" /></Badge>
+		<Badge text="Great" radius="leaf" offsetX={-10}><Icon name="ri-medal-fill" /></Badge>
+		<Badge text="Happy" radius="leaf" offsetX={-12}><Icon name="ri-cake-2-fill" /></Badge>
 	</div>
-	<Badge text="Hot" offsetX={18} offsetY={8}>
-		<Button>Match Button</Button>
-	</Badge>
-	<Badge text="Required" offsetX={30} offsetY={26}>
-		<Input title="Match Input" />
-	</Badge>
-	<Cell title="Match Cell" detail="slot">
-		<span slot="detail"><Badge isInner /></span>
+	<Badge text="Hot" offsetX={18} offsetY={8}><Button>Match Button</Button></Badge>
+	<Badge text="Required" offsetX={30} offsetY={26}><Input title="Match Input" /></Badge>
+	<Cell title="Match Cell">
+		{#snippet detailChild()}
+			<Badge isInner />
+		{/snippet}
 	</Cell>
-	<Cell title="Match Cell" detail="slot" line={false}>
-		<span slot="detail"><Badge text="99+" isInner /></span>
+	<Cell title="Match Cell" line={false}>
+		{#snippet detailChild()}
+			<Badge text="99+" isInner />
+		{/snippet}
 	</Cell>
-	<Cell title="Match no radius corner Cell" detail="slot" radius="none">
-		<span slot="detail"><Badge text="new version" radius="base" isInner /></span>
+	<Cell title="Match no radius corner Cell" radius="none">
+		{#snippet detailChild()}
+			<Badge text="new version" radius="base" isInner />
+		{/snippet}
 	</Cell>
-	<Cell title="Match full radius Cell" detail="slot" radius="full">
-		<span slot="detail"><Badge isInner /></span>
+	<Cell title="Match full radius Cell" radius="full">
+		{#snippet detailChild()}
+			<Badge isInner />
+		{/snippet}
 	</Cell>
 
 	<div class="mx-4 mt-8 font-bold text-lg">Badge animation</div>
 	<div class="p-4 flex justify-around">
-		<Badge {isShow}>
-			<Avatar />
-		</Badge>
-		<Badge text="24" {isShow}>
-			<Avatar />
-		</Badge>
-		<Badge text="24" radius="base" {isShow}>
-			<Avatar />
-		</Badge>
-		<Badge text="Hot" radius="leaf" {isShow}>
-			<Avatar />
-		</Badge>
+		<Badge {isShow}><Avatar /></Badge>
+		<Badge text="24" {isShow}><Avatar /></Badge>
+		<Badge text="24" radius="base" {isShow}><Avatar /></Badge>
+		<Badge text="Hot" radius="leaf" {isShow}><Avatar /></Badge>
 	</div>
-	<Cell title={!isShow ? 'Hidden' : 'Show'} detail="slot">
-		<span slot="detail"><Badge isInner {isShow} /></span>
+	<Cell title={!isShow ? 'Hidden' : 'Show'}>
+		{#snippet detailChild()}
+			<Badge isInner {isShow} />
+		{/snippet}
 	</Cell>
-	<Button on:click={changeShowFun}>Click {isShow ? 'Hidden' : 'Show'} Badge</Button>
+	<Button onclick={() => (isShow = !isShow)}>Click {isShow ? 'Hidden' : 'Show'} Badge</Button>
 
 	<div class="mx-4 mt-8 font-bold text-lg">Custom background color and border</div>
 	<div class="p-4 flex justify-around">
-		<Badge text="Theme" injClass="!bg-primary dark:!bg-dark text-white dark:text-black">
-			<Avatar />
-		</Badge>
-		<Badge text="New" injClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0]">
-			<Avatar />
-		</Badge>
-		<Badge radius="base" injClass="ring-2 ring-[#ebeef2] dark:ring-[#414248]">
-			<Avatar image="/assets/images/avatar_1.jpg" />
-		</Badge>
+		<Badge text="Theme" injClass="!bg-primary dark:!bg-dark text-white dark:text-black"><Avatar /></Badge>
+		<Badge text="New" injClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0]"><Avatar /></Badge>
+		<Badge radius="base" injClass="ring-2 ring-[#ebeef2] dark:ring-[#414248]"><Avatar image="/assets/images/avatar_1.jpg" /></Badge>
 		<Badge offsetX={9} offsetY={9} injClass="ring-2 ring-[#ebeef2] dark:ring-[#414248]">
 			<Avatar radius="full" image="/assets/images/avatar_1.jpg" />
 		</Badge>

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

@@ -2,123 +2,82 @@
 <script>
 	import { Badge, Avatar, Button, Icon, Input, Cell } from '../../../../../packages/stdf/components';
 
-	let isShow = true;
-	const changeShowFun = () => {
-		isShow = !isShow;
-	};
+	let isShow = $state(true);
 </script>
 
 <div class="pt-1 pb-4">
 	<div class="mx-4 mt-8 font-bold text-lg">基础用法</div>
 	<div class="p-4 flex justify-around">
-		<Badge>
-			<Avatar />
-		</Badge>
-		<Badge text="24">
-			<Avatar />
-		</Badge>
-		<Badge text="99+">
-			<Avatar />
-		</Badge>
-		<Badge text="New">
-			<Avatar />
-		</Badge>
+		<Badge><Avatar /></Badge>
+		<Badge text="24"><Avatar /></Badge>
+		<Badge text="99+"><Avatar /></Badge>
+		<Badge text="New"><Avatar /></Badge>
 	</div>
 
 	<div class="mx-4 mt-8 font-bold text-lg">不同圆角</div>
 	<div class="p-4 flex justify-around">
-		<Badge radius="base">
-			<Avatar />
-		</Badge>
-		<Badge text="24" radius="none">
-			<Avatar />
-		</Badge>
-		<Badge text="24" radius="base">
-			<Avatar />
-		</Badge>
-		<Badge text="Hot" radius="leaf">
-			<Avatar />
-		</Badge>
+		<Badge radius="base"><Avatar /></Badge>
+		<Badge text="24" radius="none"><Avatar /></Badge>
+		<Badge text="24" radius="base"><Avatar /></Badge>
+		<Badge text="Hot" radius="leaf"><Avatar /></Badge>
 	</div>
 
 	<div class="mx-4 mt-8 font-bold text-lg">位于左侧</div>
 	<div class="p-4 flex justify-around">
-		<Badge isLeft>
-			<Avatar />
-		</Badge>
-		<Badge isLeft text="24">
-			<Avatar />
-		</Badge>
-		<Badge isLeft text="24" radius="leaf">
-			<Avatar />
-		</Badge>
-		<Badge isLeft text="厉害">
-			<Avatar />
-		</Badge>
+		<Badge isLeft><Avatar /></Badge>
+		<Badge isLeft text="24"><Avatar /></Badge>
+		<Badge isLeft text="24" radius="leaf"><Avatar /></Badge>
+		<Badge isLeft text="厉害"><Avatar /></Badge>
 	</div>
 
 	<div class="mx-4 mt-8 font-bold text-lg">搭配其他组件</div>
 	<div class="p-4 flex justify-around">
-		<Badge text="帅" radius="leaf">
-			<Icon name="ri-spy-fill" />
-		</Badge>
-		<Badge text="棒" radius="leaf">
-			<Icon name="ri-medal-fill" />
-		</Badge>
-		<Badge text="Happy" radius="leaf" offsetX={-12}>
-			<Icon name="ri-cake-2-fill" />
-		</Badge>
+		<Badge text="帅" radius="leaf"><Icon name="ri-spy-fill" /></Badge>
+		<Badge text="棒" radius="leaf"><Icon name="ri-medal-fill" /></Badge>
+		<Badge text="Happy" radius="leaf" offsetX={-12}><Icon name="ri-cake-2-fill" /></Badge>
 	</div>
-	<Badge text="Hot" offsetX={18} offsetY={8}>
-		<Button>搭配 Button</Button>
-	</Badge>
-	<Badge text="必填" offsetX={18} offsetY={26}>
-		<Input title="搭配 Input" />
-	</Badge>
-	<Cell title="搭配 Cell" detail="slot">
-		<span slot="detail"><Badge isInner /></span>
+	<Badge text="Hot" offsetX={18} offsetY={8}><Button>搭配 Button</Button></Badge>
+	<Badge text="必填" offsetX={18} offsetY={26}><Input title="搭配 Input" /></Badge>
+	<Cell title="搭配 Cell">
+		{#snippet detailChild()}
+			<Badge isInner />
+		{/snippet}
 	</Cell>
-	<Cell title="搭配 Cell" detail="slot" line={false}>
-		<span slot="detail"><Badge text="99+" isInner /></span>
+	<Cell title="搭配 Cell" line={false}>
+		{#snippet detailChild()}
+			<Badge text="99+" isInner />
+		{/snippet}
 	</Cell>
-	<Cell title="搭配无圆角 Cell" detail="slot" radius="none">
-		<span slot="detail"><Badge text="新版本" radius="base" isInner /></span>
+	<Cell title="搭配无圆角 Cell" radius="none">
+		{#snippet detailChild()}
+			<Badge text="新版本" radius="base" isInner />
+		{/snippet}
 	</Cell>
-	<Cell title="搭配全圆角 Cell" detail="slot" radius="full">
-		<span slot="detail"><Badge isInner /></span>
+	<Cell title="搭配全圆角 Cell" radius="full">
+		{#snippet detailChild()}
+			<Badge isInner />
+		{/snippet}
 	</Cell>
 
 	<div class="mx-4 mt-8 font-bold text-lg">徽标动画</div>
 	<div class="p-4 flex justify-around">
-		<Badge {isShow}>
-			<Avatar />
-		</Badge>
-		<Badge text="24" {isShow}>
-			<Avatar />
-		</Badge>
-		<Badge text="24" radius="base" {isShow}>
-			<Avatar />
-		</Badge>
-		<Badge text="Hot" radius="leaf" {isShow}>
-			<Avatar />
-		</Badge>
+		<Badge {isShow}><Avatar /></Badge>
+		<Badge text="24" {isShow}><Avatar /></Badge>
+		<Badge text="24" radius="base" {isShow}><Avatar /></Badge>
+		<Badge text="Hot" radius="leaf" {isShow}><Avatar /></Badge>
 	</div>
-	<Cell title={!isShow ? '隐藏' : '显示'} detail="slot">
-		<span slot="detail"><Badge isInner {isShow} /></span>
+	<Cell title={!isShow ? '隐藏' : '显示'}>
+		{#snippet detailChild()}
+			<Badge isInner {isShow} />
+		{/snippet}
 	</Cell>
-	<Button on:click={changeShowFun}>点击{isShow ? '隐藏' : '显示'}徽标</Button>
+	<Button onclick={() => (isShow = !isShow)}>点击{isShow ? '隐藏' : '显示'}徽标</Button>
 
 	<div class="mx-4 mt-8 font-bold text-lg">自定义背景色与边框</div>
 	<div class="p-4 flex justify-around">
-		<Badge text="Theme" injClass="!bg-primary dark:!bg-dark text-white dark:text-black">
-			<Avatar />
-		</Badge>
-		<Badge text="New" injClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0]">
-			<Avatar />
-		</Badge>
-		<Badge radius="base" injClass="ring-2 ring-[#ebeef2] dark:ring-[#414248]">
-			<Avatar image="/assets/images/avatar_1.jpg" />
-		</Badge>
+		<Badge text="Theme" injClass="!bg-primary dark:!bg-dark text-white dark:text-black"><Avatar /></Badge>
+		<Badge text="New" injClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0]"><Avatar /></Badge>
+		<Badge radius="base" injClass="ring-2 ring-[#ebeef2] dark:ring-[#414248]"><Avatar image="/assets/images/avatar_1.jpg" /></Badge>
 		<Badge offsetX={9} offsetY={9} injClass="ring-2 ring-[#ebeef2] dark:ring-[#414248]">
 			<Avatar radius="full" image="/assets/images/avatar_1.jpg" />
 		</Badge>

doc/components/badge/api.md

@@ -1,18 +1,18 @@
 ## Badge Props
 
-| 属性     | 类型    | 默认值 | 可选值                      | 必传 | 说明                                         |
-| -------- | ------- | ------ | --------------------------- | ---- | -------------------------------------------- |
-| text     | String  | ''     | -                           | N    | 徽标文案。                                   |
-| radius   | String  | 'full' | 'full'/'base'/'none'/'leaf' | N    | 圆角风格。                                   |
-| isShow   | Boolean | true   | true/false                  | N    | 是否显示。                                   |
-| isInner  | Boolean | false  | true/false                  | N    | 是否位于内部。                               |
-| isLeft   | Boolean | false  | true/false                  | N    | 是否位于左侧（仅 isInner 为 false 时生效）。 |
-| offsetY  | Number  | 0      | -                           | N    | 上下偏移量（仅 isInner 为 false 时生效）。   |
-| offsetX  | Number  | 0      | -                           | N    | 左右偏移量（仅 isInner 为 false 时生效）。   |
-| injClass | String  | ''     | Class                       | N    | 注入 CSS 名称。                              |
+| 名称     | 类型                             | 默认值   | 必传 | 说明                                         |
+| -------- | -------------------------------- | -------- | ---- | -------------------------------------------- |
+| text     | `string`                         | `''`     | N    | 徽标文案。                                   |
+| radius   | `'full'\|'base'\|'none'\|'leaf'` | `'full'` | N    | 圆角风格。                                   |
+| isLeft   | `boolean`                        | `false`  | N    | 是否位于左侧（仅 isInner 为 false 时生效）。 |
+| isShow   | `boolean`                        | `true`   | N    | 是否显示。                                   |
+| offsetY  | `number`                         | `0`      | N    | 上下偏移量（仅 isInner 为 false 时生效）。   |
+| offsetX  | `number`                         | `0`      | N    | 左右偏移量（仅 isInner 为 false 时生效）。   |
+| isInner  | `boolean`                        | `false`  | N    | 是否位于内部。                               |
+| injClass | `string`                         | `''`     | N    | 注入 CSS 名称。                              |
 
-## Badge Slots
+## Badge Snippets
 
-| 名称 | 说 明                                          |
-| ---- | ---------------------------------------------- |
-| -    | isInner 为 false 时作为 Badge 相对位置的内容。 |
+| 名称     | 类型                                                                | 参数 | 说明                                             |
+| -------- | ------------------------------------------------------------------- | ---- | ------------------------------------------------ |
+| children | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | `isInner` 为 false 时作为 Badge 相对位置的内容。 |

doc/components/badge/api_en.md

@@ -1,18 +1,18 @@
 ## Badge Props
 
-| Properties | Type    | Default value | Optional value              | required | Description                                                                    |
-| ---------- | ------- | ------------- | --------------------------- | -------- | ------------------------------------------------------------------------------ |
-| text       | String  | ''            | -                           | N        | Mark copywriting.                                                              |
-| radius     | String  | 'full'        | 'full'/'base'/'none'/'leaf' | N        | Round -corner style.                                                           |
-| isShow     | Boolean | true          | true/false                  | N        | Whether to display.                                                            |
-| isInner    | Boolean | false         | true/false                  | N        | Whether it is inside.                                                          |
-| isLeft     | Boolean | false         | true/false                  | N        | Whether it is located on the left (only isinner is effective when false).      |
-| offsetY    | Number  | 0             | -                           | N        | The displacement of the upper and lower part (only when the Isinner is false). |
-| offsetX    | Number  | 0             | -                           | N        | The left and right offset (only when the Isinner is false).                    |
-| injClass   | String  | ''            | Class                       | N        | Inject the CSS name.                                                           |
+| Name     | Type                             | Default  | Required | Description                                                         |
+| -------- | -------------------------------- | -------- | -------- | ------------------------------------------------------------------- |
+| text     | `string`                         | `''`     | N        | Badge text content.                                                 |
+| radius   | `'full'\|'base'\|'none'\|'leaf'` | `'full'` | N        | Border radius style.                                                |
+| isLeft   | `boolean`                        | `false`  | N        | Whether to position on the left (only works when isInner is false). |
+| isShow   | `boolean`                        | `true`   | N        | Whether to show the badge.                                          |
+| offsetY  | `number`                         | `0`      | N        | Vertical offset (only works when isInner is false).                 |
+| offsetX  | `number`                         | `0`      | N        | Horizontal offset (only works when isInner is false).               |
+| isInner  | `boolean`                        | `false`  | N        | Whether to position inside.                                         |
+| injClass | `string`                         | `''`     | N        | Injected CSS class name.                                            |
 
-## Badge Slots
+## Badge Snippets
 
-| Name | Explanation                                           |
-| ---- | ----------------------------------------------------- |
-| -    | Isinner is a relative position of Badge when isinner. |
+| Name     | Type                                                                | Params | Description                                             |
+| -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------------- |
+| children | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -      | Content for relative positioning when isInner is false. |

doc/components/badge/guide.md

@@ -10,7 +10,7 @@ Badge 组件默认位置是相对于主体内容右上角，左右和上下偏
 
 ## 叶形圆角
 
-当 radius 为 `leaf` 时，Badge 圆角风格为叶形，同时叶形方向会与当前位置关联。
+当 radius 为 `'leaf'` 时，Badge 圆角风格为叶形，同时叶形方向会与当前位置关联。
 
 ## CSS 注入
 

doc/components/badge/guide_en.md

@@ -10,7 +10,7 @@ By default, the `Badge` component is positioned relative to the upper right corn
 
 ## Leaf-shaped Corner Radius
 
-When `radius` is set to `leaf`, the corner style of the `Badge` is leaf-shaped, and the direction of the leaves is associated with the current position.
+When `radius` is set to `'leaf'`, the corner style of the `Badge` is leaf-shaped, and the direction of the leaves is associated with the current position.
 
 ## Injecting CSS