[stdf]Update Button compoent, demo and documents.

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

@@ -2,7 +2,7 @@
 <script>
 	import { Button, Icon, Toast, Loading } from '../../../../../packages/stdf/components';
 
-	let visible = false;
+	let visible = $state(false);
 </script>
 
 <div class="flex flex-col space-y-8 py-8">
@@ -133,38 +133,34 @@
 		<div class="p-4 font-bold">Button group</div>
 		<Button fill="lineTheme" heightIn="0" group>
 			<div class="flex w-full">
-				<div class="flex-1 border-r border-primary dark:border-dark py-2 active:opacity-80">
+				<button class="flex-1 border-r border-primary dark:border-dark py-2 active:opacity-80">
 					<Icon name="ri-apps-2-line" size={18} top={-2} />
 					Application
-				</div>
-				<div class="flex-1 border-r border-primary dark:border-dark py-2 active:opacity-80">
+				</button>
+				<button class="flex-1 border-r border-primary dark:border-dark py-2 active:opacity-80">
 					<Icon name="ri-star-line" size={18} top={-2} />
 					Collect
-				</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={() => (visible = true)}>
+				</button>
+				<button class="flex-1 py-2 active:opacity-80" onclick={() => (visible = true)}>
 					<Icon name="ri-share-forward-line" size={18} top={-2} />
 					Share
-				</div>
+				</button>
 			</div>
 		</Button>
 		<Button radius="full" heightIn="0" group>
 			<div class="flex w-full">
-				<div class="flex-1 border-r border-white dark:border-black py-2 active:opacity-80">
+				<button class="flex-1 border-r border-white dark:border-black py-2 active:opacity-80">
 					<Icon name="ri-apps-2-line" size={18} top={-2} />
 					Application
-				</div>
-				<div class="flex-1 border-r border-white dark:border-black py-2 active:opacity-80">
+				</button>
+				<button class="flex-1 border-r border-white dark:border-black py-2 active:opacity-80">
 					<Icon name="ri-star-line" size={18} top={-2} />
 					Collect
-				</div>
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<!-- svelte-ignore a11y-interactive-supports-focus -->
-				<div class="flex-1 py-2 active:opacity-80" on:click={() => (visible = true)} role="button">
+				</button>
+				<button class="flex-1 py-2 active:opacity-80" onclick={() => (visible = true)}>
 					<Icon name="ri-share-forward-line" size={18} top={-2} />
 					Share
-				</div>
+				</button>
 			</div>
 		</Button>
 	</div>

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

@@ -2,7 +2,7 @@
 <script>
 	import { Button, Icon, Toast, Loading } from '../../../../../packages/stdf/components';
 
-	let visible = false;
+	let visible = $state(false);
 </script>
 
 <div class="flex flex-col space-y-8 py-8">
@@ -133,38 +133,34 @@
 		<div class="p-4 font-bold">按钮组</div>
 		<Button fill="lineTheme" heightIn="0" group>
 			<div class="flex w-full">
-				<div class="flex-1 border-r border-primary dark:border-dark py-2 active:opacity-80">
+				<button class="flex-1 border-r border-primary dark:border-dark py-2 active:opacity-80">
 					<Icon name="ri-apps-2-line" size={18} top={-2} />
 					应用
-				</div>
-				<div class="flex-1 border-r border-primary dark:border-dark py-2 active:opacity-80">
+				</button>
+				<button class="flex-1 border-r border-primary dark:border-dark py-2 active:opacity-80">
 					<Icon name="ri-star-line" size={18} top={-2} />
 					收藏
-				</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={() => (visible = true)}>
+				</button>
+				<button class="flex-1 py-2 active:opacity-80" onclick={() => (visible = true)}>
 					<Icon name="ri-share-forward-line" size={18} top={-2} />
 					分享
-				</div>
+				</button>
 			</div>
 		</Button>
 		<Button radius="full" heightIn="0" group>
 			<div class="flex w-full">
-				<div class="flex-1 border-r border-white dark:border-black py-2 active:opacity-80">
+				<button class="flex-1 border-r border-white dark:border-black py-2 active:opacity-80">
 					<Icon name="ri-apps-2-line" size={18} top={-2} />
 					应用
-				</div>
-				<div class="flex-1 border-r border-white dark:border-black py-2 active:opacity-80">
+				</button>
+				<button class="flex-1 border-r border-white dark:border-black py-2 active:opacity-80">
 					<Icon name="ri-star-line" size={18} top={-2} />
 					收藏
-				</div>
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<!-- svelte-ignore a11y-interactive-supports-focus -->
-				<div class="flex-1 py-2 active:opacity-80" on:click={() => (visible = true)} role="button">
+				</button>
+				<button class="flex-1 py-2 active:opacity-80" onclick={() => (visible = true)}>
 					<Icon name="ri-share-forward-line" size={18} top={-2} />
 					分享
-				</div>
+				</button>
 			</div>
 		</Button>
 	</div>

doc/components/button/api.md

@@ -1,33 +1,33 @@
 ## Button Props
 
-| 属性            | 类型        | 默认值  | 可选值                                                                | 必传 | 说明                           |
-| --------------- | ----------- | ------- | --------------------------------------------------------------------- | ---- | ------------------------------ |
-| fill            | String      | 'base'  | 'base'/'line'/'lineLight'/'lineTheme'/'text'/'textTheme'/'colorLight' | N    | 填充模式。                     |
-| state           | String      | 'theme' | 'theme'/'success'/'warning'/'error'/'info'                            | N    | 状态色，theme 表示跟随主题色。 |
-| radius          | String      | 'base'  | 'none'/'base'/'xl'/'2xl'/'full'                                       | N    | 圆角风格。                     |
-| size            | String      | 'big'   | 'full'/'big'/'md'/'sm'/'auto'                                         | N    | 尺寸。                         |
-| line            | String      | 'solid' | 'solid'/'dashed'/'dotted'                                             | N    | 边框风格。                     |
-| heightOut       | String      | '2'     | '0'/'1'/'2'/'3'/'4'                                                   | N    | 按钮外部高度。                 |
-| heightIn        | String      | '3'     | '0'/'1'/'2'/'3'/'4'                                                   | N    | 按钮高度。                     |
-| injClass        | String      | ''      | Class                                                                 | N    | 注入 CSS 名称。                |
-| love            | Boolean     | false   | true/false                                                            | N    | 是否开启关爱版。               |
-| group           | Boolean     | false   | true/false                                                            | N    | 是否使用按钮组。               |
-| disabled        | Boolean     | false   | true/false                                                            | N    | 是否禁用。                     |
-| customSize      | Boolean     | false   | true/false                                                            | N    | 是否自定义大小。               |
-| customWidth     | Number      | 0       | -                                                                     | N    | 自定义宽度。                   |
-| customHeight    | Number      | 0       | -                                                                     | N    | 自定义高度。                   |
-| icon            | Object/null | null    | 参考 Icon Props                                                       | N    | 图标参数。                     |
-| loading         | Object/null | null    | 参考 Loading Props                                                    | N    | 加载参数。                     |
-| disabledLoading | Boolean     | false   | true/false                                                            | N    | 使用加载时是否禁用。           |
+| 名称            | 类型                                                                          | 默认值    | 必传 | 说明                                                                           |
+| --------------- | ----------------------------------------------------------------------------- | --------- | ---- | ------------------------------------------------------------------------------ |
+| fill            | `'base'\|'line'\|'lineLight'\|'lineTheme'\|'text'\|'textTheme'\|'colorLight'` | `'base'`  | N    | 填充模式。                                                                     |
+| state           | `'theme'\|'success'\|'warning'\|'error'\|'info'`                              | `'theme'` | N    | 状态色，theme 表示跟随主题色。                                                 |
+| radius          | `'none'\|'base'\|'xl'\|'2xl'\|'full'`                                         | `'base'`  | N    | 圆角风格。                                                                     |
+| size            | `'full'\|'big'\|'md'\|'sm'\|'auto'`                                           | `'big'`   | N    | 尺寸。                                                                         |
+| line            | `'solid'\|'dashed'\|'dotted'`                                                 | `'solid'` | N    | 边框风格。                                                                     |
+| heightOut       | `'0'\|'1'\|'2'\|'3'\|'4'`                                                     | `'2'`     | N    | 按钮外部高度。                                                                 |
+| heightIn        | `'0'\|'1'\|'2'\|'3'\|'4'`                                                     | `'3'`     | N    | 按钮高度。                                                                     |
+| injClass        | `string`                                                                      | `''`      | N    | 注入 CSS 名称。                                                                |
+| love            | `boolean`                                                                     | `false`   | N    | 是否开启关爱版。                                                               |
+| group           | `boolean`                                                                     | `false`   | N    | 是否使用按钮组。                                                               |
+| disabled        | `boolean`                                                                     | `false`   | N    | 是否禁用。                                                                     |
+| customSize      | `boolean`                                                                     | `false`   | N    | 是否自定义大小。                                                               |
+| customWidth     | `number`                                                                      | `0`       | N    | 自定义宽度。                                                                   |
+| customHeight    | `number`                                                                      | `0`       | N    | 自定义高度。                                                                   |
+| icon            | `Icon\|null`                                                                  | `null`    | N    | 图标参数 [Icon Props](https://stdf.design/#/components?nav=icon&tab=1)。       |
+| loading         | `Loading\|null`                                                               | `null`    | N    | 加载参数 [Loading Props](https://stdf.design/#/components?nav=loading&tab=1)。 |
+| disabledLoading | `boolean`                                                                     | `false`   | N    | 加载时是否禁用。                                                               |
 
 ## Button Events
 
-| 名称  | 参数 | 描述       |
-| ----- | ---- | ---------- |
-| click | -    | 点击触发。 |
+| 名称    | 类型         | 参数 | 描述       |
+| ------- | ------------ | ---- | ---------- |
+| onclick | `() => void` | -    | 点击触发。 |
 
-## Button Slots
+## Button Snippets
 
-| 名称 | 说明       |
-| ---- | ---------- |
-| -    | 按钮内容。 |
+| 名称     | 说明       |
+| -------- | ---------- |
+| children | 按钮内容。 |

doc/components/button/api_en.md

@@ -1,33 +1,33 @@
 ## Button Props
 
-| property        | type        | default value | optional value                               | required | description                                       |
-| --------------- | ----------- | ------------- | -------------------------------------------- | -------- | ------------------------------------------------- |
-| fill            | String      | 'base'        | base/line/lineLight/lineTheme/text/textTheme | N        | fill mode.                                        |
-| state           | String      | 'theme'       | theme/success/warning/error/info             | N        | Status color, theme means follow the theme color. |
-| radius          | String      | 'base'        | none/base/xl/2xl/full                        | N        | Rounded corner style.                             |
-| size            | String      | 'big'         | full/big/md/sm/auto                          | N        | size.                                             |
-| line            | String      | 'solid'       | solid/dashed/dotted                          | N        | border style.                                     |
-| heightOut       | String      | '2'           | '0'/'1'/'2'/'4'                              | N        | Button outer height.                              |
-| heightIn        | String      | '3'           | '0'/'1'/'2'/'4'                              | N        | Button height.                                    |
-| injClass        | String      | ''            | Class                                        | N        | Inject CSS name.                                  |
-| love            | Boolean     | false         | true/false                                   | N        | Whether to open the love version.                 |
-| group           | Boolean     | false         | true/false                                   | N        | Whether to use a button group.                    |
-| disabled        | Boolean     | false         | true/false                                   | N        | Whether to disable.                               |
-| customSize      | Boolean     | false         | true/false                                   | N        | Whether to customize the size.                    |
-| customWidth     | Number      | 0             | -                                            | N        | Customize the width.                              |
-| customHeight    | Number      | 0             | -                                            | N        | Customize the height.                             |
-| icon            | Object/null | null          | Reference Icon Props                         | N        | Icon params.                                      |
-| loading         | Object/null | null          | Reference Loading Props                      | N        | Loading params.                                   |
-| disabledLoading | Boolean     | false         | true/false                                   | N        | Whether to disable when using loading.            |
+| Name            | Type                                                                          | Default   | Required | Description                                                                        |
+| --------------- | ----------------------------------------------------------------------------- | --------- | -------- | ---------------------------------------------------------------------------------- |
+| fill            | `'base'\|'line'\|'lineLight'\|'lineTheme'\|'text'\|'textTheme'\|'colorLight'` | `'base'`  | N        | Fill mode.                                                                         |
+| state           | `'theme'\|'success'\|'warning'\|'error'\|'info'`                              | `'theme'` | N        | Status color, theme means following theme color.                                   |
+| radius          | `'none'\|'base'\|'xl'\|'2xl'\|'full'`                                         | `'base'`  | N        | Border radius style.                                                               |
+| size            | `'full'\|'big'\|'md'\|'sm'\|'auto'`                                           | `'big'`   | N        | Size.                                                                              |
+| line            | `'solid'\|'dashed'\|'dotted'`                                                 | `'solid'` | N        | Border style.                                                                      |
+| heightOut       | `'0'\|'1'\|'2'\|'3'\|'4'`                                                     | `'2'`     | N        | Button outer height.                                                               |
+| heightIn        | `'0'\|'1'\|'2'\|'3'\|'4'`                                                     | `'3'`     | N        | Button height.                                                                     |
+| injClass        | `string`                                                                      | `''`      | N        | Inject CSS class name.                                                             |
+| love            | `boolean`                                                                     | `false`   | N        | Whether to enable care version.                                                    |
+| group           | `boolean`                                                                     | `false`   | N        | Whether to use button group.                                                       |
+| disabled        | `boolean`                                                                     | `false`   | N        | Whether to disable.                                                                |
+| customSize      | `boolean`                                                                     | `false`   | N        | Whether to use custom size.                                                        |
+| customWidth     | `number`                                                                      | `0`       | N        | Custom width.                                                                      |
+| customHeight    | `number`                                                                      | `0`       | N        | Custom height.                                                                     |
+| icon            | `Icon\|null`                                                                  | `null`    | N        | Icon props [Icon Props](https://stdf.design/#/components?nav=icon&tab=1).          |
+| loading         | `Loading\|null`                                                               | `null`    | N        | Loading props [Loading Props](https://stdf.design/#/components?nav=loading&tab=1). |
+| disabledLoading | `boolean`                                                                     | `false`   | N        | Whether to disable when loading.                                                   |
 
 ## Button Events
 
-| Name  | Parameters | Description       |
-| ----- | ---------- | ----------------- |
-| click | -          | Click to trigger. |
+| Name    | Type         | Parameters | Description         |
+| ------- | ------------ | ---------- | ------------------- |
+| onclick | `() => void` | -          | Triggered on click. |
 
-## Button Slots
+## Button Snippets
 
-| Name | Description     |
-| ---- | --------------- |
-| -    | Button content. |
+| Name     | Description     |
+| -------- | --------------- |
+| children | Button content. |

packages/stdf/components/button/Button.svelte

@@ -74,17 +74,18 @@
 </script>
 
 <div
-	class={`${heightOutObj[heightOut] || heightOutObj['2']} ${size === 'big' && !customSize ? 'px-4' : 'px-0'} ${
-		block ? 'block' : 'inline'
-	} ${love ? 'text-xl' : ''}`}
+	class="{heightOutObj[heightOut] || heightOutObj['2']} {size === 'big' && !customSize ? 'px-4' : 'px-0'} {block ? 'block' : 'inline'} {love
+		? 'text-xl'
+		: ''}"
 >
 	<button
 		{onclick}
-		class={`truncate inline-flex items-center justify-center gap-1 ${!group && !innerDisabled ? 'active:opacity-80' : ''} ${heightInObj[heightIn] || heightInObj['3']} ${
-			sizeObj[size] || sizeObj.big
-		} ${textColor} ${lineObj[line] || lineObj.solid} ${radiusObj[radius] || radiusObj.base} ${
-			fill === 'base' && (stateObj[state] || stateObj.theme)
-		} ${fillObj[fill] || fillObj.base} ${injClass} ${innerDisabled ? 'cursor-not-allowed opacity-50' : ''}`}
+		class="truncate inline-flex items-center justify-center gap-1 {!group && !innerDisabled ? 'active:opacity-80' : ''} {heightInObj[
+			heightIn
+		] || heightInObj['3']} {sizeObj[size] || sizeObj.big} {textColor} {lineObj[line] || lineObj.solid} {radiusObj[radius] ||
+			radiusObj.base} {fill === 'base' && (stateObj[state] || stateObj.theme)} {fillObj[fill] || fillObj.base} {injClass} {innerDisabled
+			? 'cursor-not-allowed opacity-50'
+			: ''}"
 		disabled={innerDisabled}
 		style={customSize ? `width:${customWidth}px;height:${customHeight}px;padding:0;` : ''}
 	>